@import url(https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap);.container,.details,.navigation ul li,.navigation ul li a,.search label{position:relative;width:100%}.main,body{min-height:100vh}.cardBox .card,.topbar{display:flex;justify-content:space-between}.navigation ul li a .title,.topbar{padding:0 10px}.cardBox .card,.toggle,.user{cursor:pointer}.cardBox .card:hover,.navigation{background:var(--blue)}.cardHeader .btn,.navigation ul li a{text-decoration:none;color:var(--white)}.cardBox .card:hover .cardName,.cardBox .card:hover .iconBx,.cardBox .card:hover .numbers,.cardHeader .btn,.navigation ul li.hovered a,.navigation ul li:hover a,.recentCustomers table tr:hover td h4 span{color:var(--white)}.cardHeader h2,.details table thead td{font-weight:600}*{font-family:Ubuntu,sans-serif;margin:0;padding:0;box-sizing:border-box}:root{--blue:#2a2185;--white:#fff;--gray:#f5f5f5;--black1:#222;--black2:#999;--pink:#B6449C}body{overflow-x:hidden}.navigation{position:fixed;width:300px;height:100%;border-left:10px solid var(--blue);transition:.5s;overflow:hidden}.cardBox .card,.main{background:var(--white)}.navigation.active{width:80px;left:0}.navigation ul{position:absolute;top:0;left:0;width:100%}.navigation ul li{list-style:none;border-top-left-radius:30px;border-bottom-left-radius:30px}.navigation ul li.hovered,.navigation ul li:hover{background-color:var(--pink)}.navigation ul li:first-child{margin-bottom:40px;pointer-events:none}.navigation ul li a{display:block;display:flex}.navigation ul li a .icon{position:relative;display:block;min-width:60px;height:60px;line-height:75px;text-align:center}.navigation ul li a .title,.navigation ul li a .title1{position:relative;display:block;line-height:60px;text-align:start;white-space:nowrap;height:60px}.navigation ul li a .icon ion-icon{font-size:1.75rem}.navigation ul li a .title1{padding-left:70px}.navigation ul li.hovered a::before,.navigation ul li:hover a::before{content:"";position:absolute;right:0;top:-50px;width:50px;height:50px;background-color:transparent;border-radius:50%;box-shadow:35px 35px 0 10px var(--white);pointer-events:none}.navigation ul li.hovered a::after,.navigation ul li:hover a::after{content:"";position:absolute;right:0;bottom:-50px;width:50px;height:50px;background-color:transparent;border-radius:50%;box-shadow:35px -35px 0 10px var(--white);pointer-events:none}.main{position:absolute;width:calc(100% - 300px);left:300px;transition:.5s}.cardBox,.cardBox .card,.search,.toggle,.user{position:relative}.main.active{width:calc(100% - 80px);left:80px}.topbar{width:100%;height:60px;align-items:center}.toggle{width:60px;height:60px;display:flex;justify-content:center;align-items:center;font-size:2.5rem}.search{width:400px;margin:0 10px}.recentCustomers .imgBx,.user{width:40px;height:40px;overflow:hidden}.search label input{width:100%;height:40px;border-radius:40px;padding:5px 20px 5px 35px;font-size:18px;outline:0;border:1px solid var(--black2)}.search label ion-icon{position:absolute;top:0;left:10px;font-size:1.2rem}.user{border-radius:50%}.recentCustomers .imgBx img,.user img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}.cardBox{width:100%;padding:20px;display:grid;grid-template-columns:repeat(4,1fr);grid-gap:15px}.cardBox .card{padding:30px;border-radius:20px;box-shadow:0 7px 25px rgba(0,0,0,.08)}.details .recentOrders,.recentCustomers{display:grid;min-height:500px;padding:20px;background:var(--white);box-shadow:0 7px 25px rgba(0,0,0,.08);border-radius:20px;position:relative}.cardBox .card .numbers{position:relative;font-weight:500;font-size:2.5rem;color:var(--blue)}.cardBox .card .cardName{color:var(--black2);font-size:1.1rem;margin-top:5px}.cardBox .card .iconBx{font-size:3.5rem;color:var(--black2)}.details .cardHeader{display:flex;justify-content:space-between;align-items:flex-start}.cardHeader h2{color:var(--blue)}.cardHeader .btn{position:relative;padding:5px 10px;background:var(--blue);border-radius:6px}.status.delivered,.status.inProgress,.status.pending,.status.return{padding:2px 4px;border-radius:4px;font-weight:500;font-size:14px}.details table{width:100%;border-collapse:collapse;margin-top:10px}.details .recentOrders table tr{color:var(--black1);border-bottom:1px solid rgba(0,0,0,.1)}.details .recentOrders table tr:last-child{border-bottom:none}.details .recentOrders table tbody tr:hover,.recentCustomers table tr:hover{background:var(--blue);color:var(--white)}.details .recentOrders table tr td{padding:10px}.details .recentOrders table tr td:last-child,.details .recentOrders table tr td:nth-child(2){text-align:end}.details .recentOrders table tr td:nth-child(3){text-align:center}.status.delivered{background:#8de02c;color:var(--white)}.status.pending{background:#e9b10a;color:var(--white)}.status.return{background:red;color:var(--white)}.status.inProgress{background:#1795ce;color:var(--white)}.recentCustomers .imgBx{position:relative;border-radius:50px}.recentCustomers table tr td{padding:12px 10px}.recentCustomers table tr td h4{font-size:16px;font-weight:500;line-height:1.2rem}.recentCustomers table tr td h4 span{font-size:14px;color:var(--black2)}@media (max-width:991px){.navigation{left:-300px}.navigation.active{width:300px;left:0}.main{width:100%;left:0}.main.active{left:300px}.cardBox{grid-template-columns:repeat(2,1fr)}}@media (max-width:768px){.details{grid-template-columns:1fr}.recentOrders{overflow-x:auto}.status.inProgress{white-space:nowrap}}@media (max-width:480px){.navigation ul li a .title,.navigation ul li a .title1{position:relative;display:block;height:60px;white-space:nowrap}.cardBox{grid-template-columns:repeat(2,1fr)}.cardHeader h2{font-size:10px}.user{min-width:20px}.navigation{left:-100%;z-index:110;position:fixed;width:300px;height:100%;background:var(--blue);border-left:10px solid var(--blue);transition:.5s;overflow:hidden}.navigation.active{width:100%;left:0}.navigation ul li a .title1{padding:0 50px 50px;width:100%}.navigation ul{position:absolute;top:0;left:0;width:100%}.navigation ul li{position:relative;width:100%;list-style:none;border-top-left-radius:30px;border-bottom-left-radius:30px}.navigation ul li.hovered,.navigation ul li:hover{background-color:var(--pink)}.navigation ul li:first-child{margin-bottom:40px;pointer-events:none}.navigation ul li a{position:relative;display:block;width:100%;display:flex;text-decoration:none;color:var(--white)}.navigation ul li.hovered a,.navigation ul li:hover a{color:var(--white)}.navigation ul li a .icon{position:relative;display:block;min-width:60px;height:60px;line-height:75px;text-align:center}.navigation ul li a .icon ion-icon{font-size:1.75rem}.navigation ul li a .title{padding:0 10px;line-height:60px;text-align:start}.navigation ul li.hovered a::before,.navigation ul li:hover a::before{content:"";position:absolute;right:0;top:-50px;width:50px;height:50px;background-color:transparent;border-radius:50%;box-shadow:35px 35px 0 10px var(--white);pointer-events:none}.navigation ul li.hovered a::after,.navigation ul li:hover a::after{content:"";position:absolute;right:0;bottom:-50px;width:50px;height:50px;background-color:transparent;border-radius:50%;box-shadow:35px -35px 0 10px var(--white);pointer-events:none}.toggle{z-index:1001}.main.active .toggle{color:#fff;position:fixed;left:0}}