@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display-swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
    overflow-x: hidden;
}
.container{
position: relative;
width: 100%;
}
.navigation{
    position: fixed;
    width: 300px;
    height: 100%;
    background: #003147;
    transition: 0.5s;
    overflow: hidden;
}
.navigation.active{
    width:60px;
}
.navigation ul{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.navigation ul li{
    position: relative;
    width: 100%;
    list-style: none;
}

.navigation ul li:hover{
    background: #E5E7E9;
}

.navigation ul li:nth-child(1){
    margin-bottom: 25px;
}
.navigation ul li:nth-child(1):hover{
    background:transparent ;

}

.navigation ul li a{

position: relative;

display: block;

width: 100%;

display: flex;

text-decoration: none;

color: #fff;

}

.navigation ul li a .icon{

position: relative;

display: block;

min-width: 60px;

height: 60px;

line-height: 60px;

text-align: center;

}
.navigation ul li a .icon .fa

{

color: #fff;

font-size: 24px;

}

.navigation ul li a .title

{

position: relative;

display: block;

padding: 0 10px;

height: 60px;

line-height: 60px;

white-space: nowrap;

}

.main{
    position: absolute;

width: calc(100% - 300px);

Left: 300px;

min-height: 100vh;

background: #f5f5f5;

transition: 0.5s;

}
.main.active{
    width: calc(100% - 60px);
    Left:60px;
}

.main .topbar {

width: 100%;

background: #fff;

height: 60px;
padding: 0 10px;

display: flex;

justify-content: space-between;

align-items: center;
    
}
.toggle
{
position: relative;

width: 60px;

height: 60px;

cursor:pointer ;

}
.toggle::before

{

content:'\f0c9';

font-family: fontAwesome; 
position: absolute;

width: 100%;

height: 100%;

line-height: 60px;

font-size: 24px;

text-align: center;

color: #111;

}

.search
{

position: relative;

width: 400px;

margin: 0 10px;

}

.search label
{

position: relative; 
width: 100%;

}

.search label input
{
width: 100%;

height: 40px;

border-radius: 40px;

padding: 5px 20px; 
padding-left: 35px;
outline: none;

border: 1px soid rgba(0,0,0,0.2);

}
.search label .fa{
    position:absolute ;
    left:15px;
    top:4px;
}

.user
{

position: relative;

min-width: 50px; overflow: hidden;

width: 50px;

height: 50px;

border-radius: 50%;

cursor: pointer;

}

.user img

{

position: absolute; Left: 0; width: 100%; height: 100%; object-fit: cover;

top: 0;

}
.cardBox
{
position: relative;

width: 100%;
 padding: 20px;

display: grid;
grid-template-columns: repeat(4,1fr);

grid-gap: 20px;

}

.cardBox .card

{

position: relative;

background:#fff;

padding: 20px;

display: flex;

justify-content: space-between; 
cursor: pointer;

}
.cardBox .card .numbers
{
position: relative;

font-size: 2em;

font-weight: 500;}

.cardBox .card .cardName{

color: #999;
}

.cardBox .card .iconBox{

font-size: 2.5em;

color: #03a9f4;}


.details
{

position: relative;

width: 100%;

padding: 20px;

padding-top: 0;

display: grid;
grid-gap: 20px;
grid-template-columns: 2fr 1fr;

}

.details .recentOrders
{
position: relative;

min-height: 530px;

background: #fff;

padding: 20px;

}

.cardHeader
{

background: #fff;

padding: 20px;

display: flex;

justify-content: space-between; 
align-items: flex-start;

}

.cardHeader h2

{
font-weight: 600;
}

.btn{
position: relative;

padding: 5px 10px; border-radius: 6px;

background:#03a9f4;

color:#fff; text-decoration: none;
}
.details table

{

width: 100%;

border-collapse: collapse; margin-top: 10px;

}
.details table thead td {

font-weight: 600;

}

.details .recentOrders table tr

{

border-bottom: 1px solid rgba(0,0,0,0.1);

} 
.details .recentOrders table tbody tr:last-child

{

border-bottom: none;}

.details .recentOrders table tbody tr:hover
{
background: #03a9f4; color:#fff;

}

.details .recentOrders table tr td

{
padding: 9px 5px;
}



.details .recentOrders table thead tr td:last-child, 
.details .recentOrders table tbody tr td:last-child
{
text-align: right;

}

.details .recentOrders table thead tr td:nth-child(2), 
.details .recentOrders table tbody td td:nth-child(2)
{
text-align: right; padding-right: 20p;
}

.details .recentOrders table thead tr td:nth-child(3),
.details .recentOrders table tbody tr td:nth-child(3)

{
text-align: center;
}



.status
{
position: relative;

padding: 2px 4px;

background:#f00;

color: #fff; Letter-spacing: 1px;

border-radius: 4px;

font-size: 14px;

font-weight: 300;

}

.delivered

{
background:#8de02c;
}



.pending

{
background: #f9ca3f;
}



.return

{
background: #fee;
}



.inprogress
{
background:#1795ce;

}
.details .recentCustomers{
    position: relative;
    min-height: 530px;
    background: #fff;
    padding: 20px;
}
.details .recentCustomers .imgBx{
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
}
.details .recentCustomers .imgBx img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.details .recentCustomers table tr:hover{
background: #03a9f4;
color: #fff;

}
.details .recentCustomers table tr td{
    padding: 7px 10px;
}
.details .recentCustomers table tr td h4{
font-size: 16px;
font-weight: 500;
line-height: 1.2em;
}
@media (max-width: 992px)
{
.navigation
{
    Left: -300px;
}
.navigation.active
{
    Left: 0;
    width: 300px;
}
.main
{
width: 100%;
Left: 0;

}

.main.active
{
width: calc(100% - 300px);
Left: 300px;
}
.cardBox{
    grid-template-columns: repeat(2,1fr);
}
}

@media(max-width:768px)
{
.details
{
    grid-template-columns: repeat(1,1fr);
}



.cardHeader h2
{
font-weight: 600;

font-size: 18px;

}

}

@media (max-width: 480px)
{
.cardBox{

    grid-template-columns: repeat(1,1fr);

}

.details .recentOrders
{
    overflow-x: auto;
}

.details .recentOrders table
{
    width: 600px;
}



.navigation
{
    width: 100%;
    left: -100%;
     z-index: 1000;
}
.navigation.active

{

width: 100%;
 Left: 0;

}

.toggle.active
{
position: fixed;

z-index: 10000;

right: 0;

left: initial;

}

.toggle.active::before
{
    color:#fff;
}



.main,
.main.active
{
width: 100%;
 Left: 0;

}
}