*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}


body{

    background:#0b1220;
    color:#fff;
    display:flex;
    min-height:100vh;
    overflow-x:hidden;

}



/* SIDEBAR */

.sidebar{

    width:260px;
    height:100vh;
    position:fixed;
    left:0;
    top:0;

    background:rgba(20,30,55,.8);
    backdrop-filter:blur(15px);

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

    padding:25px;

}


.logo{

    font-size:22px;
    font-weight:bold;
    margin-bottom:40px;

}



.sidebar ul{

    list-style:none;

}


.sidebar li{

    padding:15px;
    margin-bottom:10px;

    border-radius:12px;

    cursor:pointer;

    transition:.3s;

    color:#b9c3d5;

}



.sidebar li:hover,
.sidebar .active{

    background:rgba(255,255,255,.12);

    color:white;

    transform:translateX(5px);

}




/* MAIN */

.main{

    margin-left:260px;

    width:calc(100% - 260px);

    padding:30px;

}



header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

}


header h1{

    font-size:32px;

}


.user{

    background:rgba(255,255,255,.1);

    padding:12px 20px;

    border-radius:30px;

}



/* CARDS */

.cards{

    display:grid;

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

    gap:20px;

    margin-bottom:30px;

}



.card{


    background:rgba(255,255,255,.08);

    backdrop-filter:blur(15px);

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

    padding:25px;

    border-radius:20px;


    transition:.35s;


    animation:show .6s ease;


}



.card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 40px rgba(0,0,0,.3);

}



.card h3{

    color:#aab4c7;

    font-size:15px;

}


.number{

    font-size:42px;

    font-weight:bold;

    margin:15px 0;

}



.card span{

    color:#8d99ae;

}



/* STATUS */

.success{

    border-left:4px solid #00d084;

}


.warning{

    border-left:4px solid #ffb020;

}


.danger{

    border-left:4px solid #ff4d6d;

}

.queue{

    border-left:4px solid #4da3ff;

}


.provider-row {

    margin-bottom:18px;

}


.provider-head {

    display:flex;

    justify-content:space-between;

    margin-bottom:8px;

    font-size:14px;

}


.progress {

    width:100%;

    height:10px;

    background:#1e293b;

    border-radius:10px;

    overflow:hidden;

}


.progress-bar {

    height:100%;

    background:#4da3ff;

    border-radius:10px;

    transition:width .5s ease;

}

/* PANELS */


.panel{


    background:rgba(255,255,255,.07);

    backdrop-filter:blur(15px);

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

    border-radius:20px;

    padding:25px;

    margin-bottom:25px;


}



.panel h2{

    margin-bottom:20px;

}



/* .chart{

    height:220px;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#8892a6;

} */

.chart{

    height:260px;
    max-height:260px;

    position:relative;

    display:flex;
    justify-content:center;
    align-items:center;

}
.chart canvas{

    max-height:220px !important;

}

/* TABLE */


.table-box{

    overflow:auto;

    max-height:400px;

}



table{

    width:100%;

    border-collapse:collapse;

}



th{

    text-align:left;

    color:#9ba7bd;

    padding:15px;

}



td{

    padding:15px;

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

}



tr:hover{

    background:rgba(255,255,255,.05);

}



.badge{

    padding:6px 12px;

    border-radius:20px;

    font-size:12px;

}


.badge.success{

    background:rgba(0,208,132,.15);

    color:#00d084;

}




/* ANIMATION */


@keyframes show{

from{

    opacity:0;

    transform:translateY(20px);

}

to{

    opacity:1;

    transform:none;

}

}




/* MOBILE */

@media(max-width:900px){


.sidebar{

    display:none;

}


.main{

    margin-left:0;

    width:100%;

}


.cards{

    grid-template-columns:1fr;

}


}