:root{
    --b1:#fff;
    --b2:#ededed;
    --b3:#1c1c1c;
    --c1:#000;
    --c2:#333;
    --c3:#0e2a5f;
    --c4:#34472c;
    --c5:#6f1a74;
    --c6:#465569;
    --c7:#20b720;
    --white:#fff;
    --th-primary:#6ca7ce;
    --th-secondary:#051e34;
    --th-border:#335158;
    --th-color:#1f1e1e;
    --th-color2:#ffffff;
    --shadow:0 2px 4px rgba(0,0,0,0.24);
}
*{box-sizing: border-box;}
html{font-size:16px;scroll-behavior:smooth;}
body{
    print-color-adjust: exact;-webkit-print-color-adjust: exact;
    -webkit-text-size-adjust: 100%;-webkit-tap-highlight-color: rgba(255,255,255,0);
    font-family:'Poppins', sans-serif;font-size: 15px;font-weight: 400;line-height: 1.5;
    width: 100vw;height: 100vh;overflow: hidden;margin: 0;
    background-color: var(--b2);
}
#root{
    width: 100vw;height: 100vh;overflow: hidden;
    background-color: var(--b2);
}
h1,h2,h3,h4,h5,h6,p{margin: 0;margin-bottom: 0.5rem;}
button{box-shadow:none;background:none;border:none;cursor:pointer;font-family:inherit;font-size: inherit;
  color:inherit;}
ul{list-style:none;padding:0;margin: 0;}a{text-decoration:none}
img{width:100%;height:auto;object-fit:cover;}video{width: 100%;}
.minput{
    box-shadow:none;background:none;width: 100%;
    border:none;padding:10px;font-size:1rem;
    font-family:'Poppins', sans-serif;outline:none;
}
.minput1{color: var(--c1);background-color: var(--b2);border:1px solid #ddd;}
.minput2{color: var(--c1);background-color: var(--b1);border:1px solid #bbbaf3;}
.df{display: flex;}.dn{display: none;}.db{display: block;}
.jcc{justify-content: center;}.jcsb{justify-content: space-between;}
.aic{align-items: center;}.fw{flex-wrap:wrap;}.f1{flex:1;}.fdc{flex-direction:column;}.fdr{flex-direction:row;}
.tar{text-align: right;}.tac{text-align: center;}
.text-lower{text-transform:lowercase !important;}
.text-danger{color:red !important;}
.text-small{font-size:.85rem !important;}
.bgwhite{background-color: #fff;}
.mr05{margin-right: 0.5rem;}
.mb05{margin-bottom: 0.5rem;}
.mr1{margin-right: 1rem;}
.mb1{margin-bottom: 1rem;}
.ico{font-style:normal;font-weight: bolder;}
.ico-check::before{content: '\2713';}
.ico-close::before{content: '\2715';}
.circle{padding: 5px;border-radius:50%;border:1px solid currentColor;
    display: inline-flex;width: 20px;height: 20px;justify-content: center;align-items: center;}
.text-blue{color: #0079e5;}
.text-green{color: seagreen;}
.br10{border-radius:10px;}
.br5{border-radius:5px;}

.p0{padding: 0 !important;}
.m0{margin: 0 !important;}
.pl05{padding-left: 0.5rem;}
.pr05{padding-right: 0.5rem;}
.pt05{padding-top: 0.5rem;}
.pb05{padding-bottom: 0.5rem;}
.pl1{padding-left: 1rem;}
.pr1{padding-right: 1rem;}
.pt1{padding-top: 1rem;}
.pb1{padding-bottom: 1rem;}
.pl2{padding-left: 2rem;}
.pr2{padding-right: 2rem;}
.pt2{padding-top: 2rem;}
.pb2{padding-bottom: 2rem;}
.p05{padding: 0.5rem;}
.p1{padding: 1rem;}
.p2{padding: 2rem;}

.ct{padding: 20px;max-width:100%;margin-left: auto;margin-right: auto;}
@media screen and (min-width:1300px) {
    .ct{max-width:1250px;}
}

.c-1{width: 8.333333333%;}
.c-2{width: 16.666666666%;}
.c-3{width: 25%;}
.c-4{width: 33.3333333333%;}
.c-5{width: 41.6666666666%;}
.c-6{width: 50%;}
.c-7{width: 58.33333333333%;}
.c-8{width: 66.6666666666%;}
.c-9{width: 75%;}
.c-10{width: 83.33333333333%;}
.c-11{width: 91.66666666666%;}
.c-12{width: 100%;}

@media (min-width: 768px){
    .c-md-1{width: 8.333333333%;}
    .c-md-2{width: 16.666666666%;}
    .c-md-3{width: 25%;}
    .c-md-4{width: 33.3333333333%;}
    .c-md-5{width: 41.6666666666%;}
    .c-md-6{width: 50%;}
    .c-md-7{width: 58.33333333333%;}
    .c-md-8{width: 66.6666666666%;}
    .c-md-9{width: 75%;}
    .c-md-10{width: 83.33333333333%;}
    .c-md-11{width: 91.66666666666%;}
    .c-md-12{width: 100%;}
}
@media (min-width: 991px){
    .c-xl-1{width: 8.333333333%;}
    .c-xl-2{width: 16.666666666%;}
    .c-xl-3{width: 25%;}
    .c-xl-4{width: 33.3333333333%;}
    .c-xl-5{width: 41.6666666666%;}
    .c-xl-6{width: 50%;}
    .c-xl-7{width: 58.33333333333%;}
    .c-xl-8{width: 66.6666666666%;}
    .c-xl-9{width: 75%;}
    .c-xl-10{width: 83.33333333333%;}
    .c-xl-11{width: 91.66666666666%;}
    .c-xl-12{width: 100%;}
}
.scroll::-webkit-scrollbar{width:10px;}
.scroll-small::-webkit-scrollbar{width:5px;}
.scroll::-webkit-scrollbar-thumb,.scroll-small::-webkit-scrollbar-thumb{background-color:rgb(202, 200, 200);}

m-l{display:flex;align-items: center;justify-content: center;width: 100%;height: 100%;}
es-modal m-l{height: 200px;width:100%;}
m-l::after{
    content:"";position: relative;display: block;width: 2rem;height: 2rem;border-radius:50%;
    animation: grow .75s linear infinite;background-color: currentcolor;opacity:0.5;transform:scale(0)}
m-l#preload{
    position:fixed;background-color: rgba(0, 0, 0, 0.93);z-index:99;
    top: 0;left: 0;width: 100vw;height: 100vh;display: none;
}

es-modal{
  position:fixed;top: 50%;left: 50%;display: flex;justify-content: center;z-index:99999;
  align-items: center;transform:translate(-50%,-50%) scale(0);opacity:0;pointer-events: none;transition: all 300ms ease;
}
es-wrap{position:fixed;width:100vw;height: 100vh;z-index:9999;
  display: none;background-color:rgba(0,0,0,0.8);left: 0;top: 0;}
es-modal es-mbody{
  border:1px solid rgba(0, 0, 0, 0.175);background-color:#fff;
  border-radius: .5rem;max-height: 90vh;overflow-x:hidden;overflow-y: auto;
}
es-mbody.delete{max-width:600px;width: 100%;}
es-mbody.view{max-width:90vw;width:fit-content;}
body.show-modal es-modal{pointer-events:all;opacity:1;transform: translate(-50%,-50%) scale(1);}
body.show-modal{overflow: hidden;}
body.show-modal es-wrap,body.show-menu es-wrap{display: block;}
es-modal m-h{border-bottom:1px solid #4e5863;}
es-modal m-h h5{margin-right:3em;}
es-modal m-f{text-align: right;}
es-modal m-h,es-modal m-b,es-modal m-f{padding: 1em;display: block;}
#notify{position:fixed;z-index:99;bottom:0;display: flex;flex-direction: column;align-items: center;right: 5px;}
m-toast{box-shadow:0 0 10px rgba(0,0,0,0.5);padding:6px 12px;padding-right: 25px;
  position: relative;margin-bottom:10px;display:inline-flex;align-items: center;
  letter-spacing:.5px;cursor:pointer;border-left: 4px solid #bbb;border-radius:5px;
  background-color:#fff;color: #333;min-width:250px;transform-origin:bottom;transform-style: preserve-3d;
animation: show 800ms ease;}
m-toast::before,m-toast::after{border-radius: 50%;display: inline-flex;justify-content: center;align-items: center;}
m-toast::before{width: 30px;height: 30px;color: #fff;font-size: 20px;margin-right: 10px;}
m-toast::after {content: "\2716";position: absolute;right: 5px;
    width: 20px;color: #878787;background-color:#cbcbcb;height: 20px;font-size: 12px;
}
m-toast.s0{border-color:#ff3b2a}
m-toast.s1{border-color: #2ecd70;}
m-toast.s2{border-color: #1b72f3;}
m-toast.s3{border-color: #f6c418;}
m-toast.s1::before{content:"✔";background-color:#2ecd70;} /* content:"\2713"; */
m-toast.s0::before{content:"!";background-color:#ff3b2a;}
m-toast h4{font-size:16px;margin-bottom: 4px;}m-toast p{margin-bottom: 0;font-size: 13px;}
.dark m-toast{background-color: #5e5b5b;color: #fff;}
.dark m-toast::after{color: #ddd;background-color: #444;}
label{display: inline-block;margin-bottom: 10px;text-transform: capitalize;}
.mbtn1{background-color:seagreen;color:#fff;padding:10px 20px;margin: 0;cursor: pointer;}
.mbtn2{background-color:blue;color:#fff;padding:10px 20px;margin: 0;cursor: pointer;}
.br20{border-radius:20px;}

.ff{padding: 10px;position: relative;}
.ff2 label{font-size: 0.8rem;position: absolute;top: 0;left: 20px;background: #fff;}

body.loading m-l#preload{display: flex;}
.sloader{animation:spin 1s ease infinite;}

@keyframes grow{50%{opacity:1;transform:scale(1)}100%{opacity: 0.5;transform:scale(1)}}
@keyframes spin {
    0%{transform: rotate(0);}40%{transform: rotate(180deg);}
    60%{transform: rotate(180deg);}100%{transform: rotate(360deg);}
}
.mtable-resp{height: 60vh;overflow: auto;}
.mtable{border-collapse:collapse;width: 100%;background-color: #fff;}
.mtable th,.mtable td{padding: 5px 10px;font-size:.9rem;border:1px solid var(--th-border);}
.mtable th{text-align: center;position: sticky;top: 0px;box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
background-color:var(--th-secondary);text-transform:capitalize;color:var(--th-color2);}
.mtable td{color: var(--th-color);font-weight: 500;}
.section{height: 85vh;height: calc(100vh - 50px);overflow-y:auto;}

header{
    display: flex;align-items: center;justify-content: space-between;
    padding: 10px 20px;box-shadow:var(--shadow1);background-color: var(--b1);
    height: 50px;border-bottom:1px solid #ddd;position: relative;
}
brand-logo{display: block;}
brand-logo img{height: 49px;width: auto;}
main{
    height:calc(100vh - 50px);
}
.menu{display: flex; align-items: center;}
.menu li{position: relative;}
.menu li ul{
    position:absolute;
    min-width:100%;
    white-space: nowrap;
    background-color:var(--b1);z-index: 9999;
    display: none;box-shadow:var(--shadow);
}
.menu li:hover ul{
    display: block;
}
.menu a{
    display: block;
    padding: 10px 20px;
    color: var(--c2);
}
.menu a i{
    display: inline-block;
    margin-right: 5px;
}
.menu li ul a{
    display: block;
}
.menu.toolnav a{
    padding:10px;
    color: #15a515;
    font-size: 1.3rem;
}
header h3{color: #15a515;font-size: 1.3rem;}
.textgreen{color: seagreen;}
.textred{color: tomato;}
.anim-rotate{animation:rotate 1s ease infinite;}
@keyframes  rotate{
    0%{transform:rotate(0);}
    100%{transform:rotate(360deg);}
}

drop-box{display: inline-block;width: auto;position: relative;}
drop-trigger{
    display: inline-block;background-color:#2f5c71;color: #fff;
    padding: 8px 10px;cursor: pointer;
}
drop-options{
    z-index:2;background-color: #fff;top: 100%;left: 0;border: 1px solid #ddd;
    box-shadow: var(--shadow);
    display: none;position: absolute;max-height:250px;overflow-y: auto;
}
drop-box.a drop-options{
    display: inline-block;
}
drop-options d-grp{display: block;border-bottom: 1px solid #ccc;}
drop-options d-grp::before{content: attr(l);font-weight: 600;display: block;white-space: nowrap;padding: 5px 10px;}
drop-options d-o{display: block;white-space: nowrap;padding: 5px 10px;cursor: pointer;}

.menu a{padding: 10px;font-size: .8rem;}