/* ==========================================
DEXATRADE FX RESPONSIVE LAYOUT
========================================== */

/* ===============================
SIDEBAR
=============================== */

.sidebar{

position:fixed;

top:0;

left:0;

width:260px;

height:100vh;

background:#141E30;

overflow-y:auto;

z-index:1050;

transition:.3s;

box-shadow:0 0 25px rgba(0,0,0,.35);

}

.sidebar-logo{

padding:25px;

text-align:center;

border-bottom:1px solid rgba(255,255,255,.08);

}

.sidebar-logo h3{

color:#FFC107;

font-size:24px;

margin:0;

font-weight:700;

}

.sidebar ul{

list-style:none;

padding:15px 0;

margin:0;

}

.sidebar ul li{

margin:4px 0;

}

.sidebar ul li a{

display:flex;

align-items:center;

gap:15px;

padding:15px 25px;

color:#d5d9e0;

font-size:15px;

transition:.3s;

text-decoration:none;

}

.sidebar ul li a:hover{

background:#1D2939;

color:#FFC107;

padding-left:32px;

}

.sidebar ul li a.active{

background:#FFC107;

color:#000;

font-weight:600;

}

.sidebar ul li i{

width:22px;

text-align:center;

font-size:18px;

}

/* ===============================
PAGE CONTENT
=============================== */

.main-content{

margin-left:260px;

padding:25px;

min-height:100vh;

transition:.3s;

}

/* ===============================
TOPBAR
=============================== */

.dashboard-navbar{

margin-left:260px;

transition:.3s;

}

/* ===============================
HAMBURGER
=============================== */

.menu-toggle{

display:none;

position:fixed;

top:15px;

left:15px;

width:45px;

height:45px;

background:#FFC107;

border:none;

border-radius:10px;

font-size:22px;

color:#000;

z-index:1200;

}

/* ===============================
OVERLAY
=============================== */

.sidebar-overlay{

display:none;

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(0,0,0,.55);

z-index:1040;

}

/* ===============================
TABLES
=============================== */

.table-responsive{

border-radius:15px;

overflow:auto;

}

/* ===============================
CARDS
=============================== */

.card,

.card-dark,

.deposit-card,

.balance-box,

.wallet-box{

border-radius:18px;

}

/* ===============================
TABLET
=============================== */

@media(max-width:991px){

.sidebar{

left:-270px;

}

.sidebar.show{

left:0;

}

.sidebar-overlay.show{

display:block;

}

.dashboard-navbar{

margin-left:0;

}

.main-content{

margin-left:0;

padding:90px 15px 20px;

}

.menu-toggle{

display:block;

}

}

/* ===============================
PHONE
=============================== */

@media(max-width:768px){

.container,

.container-fluid{

padding-left:15px;

padding-right:15px;

}

.row{

margin-left:0;

margin-right:0;

}

.col,

[class*="col-"]{

padding-left:8px;

padding-right:8px;

}

.card,

.card-dark,

.deposit-card{

padding:18px;

}

.balance-box h2{

font-size:28px;

}

.wallet{

width:100%;

text-align:center;

margin-bottom:10px;

}

.btn{

width:100%;

margin-bottom:10px;

}

.form-control,

.form-select{

height:50px;

font-size:16px;

}

img{

max-width:100%;

height:auto;

}

.table{

font-size:14px;

}

}

/* ===============================
SMALL PHONES
=============================== */

@media(max-width:480px){

.sidebar{

width:250px;

}

.balance-box h2{

font-size:22px;

}

.sidebar-logo h3{

font-size:20px;

}

.btn{

font-size:15px;

}

}