@import"https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&display=swap";*{font-family:Montserrat,sans-serif;font-optical-sizing:auto;font-style:normal;outline:none;border:none}*::-webkit-scrollbar{width:10px}*::-webkit-scrollbar-track{box-shadow:inset 0 0 5px #fff;border-radius:10px}*::-webkit-scrollbar-thumb{background:#72c007;border-radius:10px}*::-webkit-scrollbar-thumb:hover{background:#72c00780}a{text-decoration:none}h1,h2,h3,h4,h5,h6{font-weight:800;color:#b4b4b4;text-transform:capitalize}body,p,span,div,a,li,ul,ol,table,th,td,button,input,label,nav,footer,header,section,article,aside,main{font-weight:400;color:#b4b4b4}body{background-color:#b4b4b4}main{height:calc(100vh - 3em);width:calc(100vw - 3em);background-color:#1b1b1b;border-radius:1em;box-shadow:0 0 30px #72c007;margin:1.5em;position:relative;overflow:hidden}main .userportal{height:100%;display:flex}main .userportal .header{display:flex;justify-content:space-between;align-items:center}main .userportal .header .add{padding:.8em 1em;background-color:#fff;cursor:pointer;border-radius:.5em;color:#1b1b1b;font-weight:500;font-size:14px}main .userportal .userdynamicportal{flex:1;padding:1em}main .userportal .userdynamicportal .selectcustomer{background-color:#fff3;padding:.5em 1em;border:#ffffff solid 1px;border-radius:.4em;color:#fff;min-width:200px}main .userportal .userdynamicportal .selectcustomer option{color:#1b1b1b}main .userportal .userdynamicportal .dynamicmonhtlyportal{overflow-y:scroll;height:100%}main .userportal .userdynamicportal .dynamicmonhtlyportal .monthlyreport{display:flex;padding:1em;flex-direction:column}main .userportal .userdynamicportal .dynamicmonhtlyportal .monthlyreport .selectyear{display:flex;align-items:center;justify-content:space-between;min-width:25%}main .userportal .userdynamicportal .dynamicmonhtlyportal .monthlyreport .selectyear h3{color:#fff}main .userportal .userdynamicportal .dynamicmonhtlyportal .monthlyreport .selectyear select{background-color:#fff3;padding:.5em 1em;border:#ffffff solid 1px;border-radius:.4em;color:#fff}main .userportal .userdynamicportal .dynamicmonhtlyportal .monthlyreport .selectyear select option{color:#1b1b1b}main .userportal .userdynamicportal .dynamicmonhtlyportal .monthlyreport .months{display:flex;flex-wrap:wrap;gap:1em}main .userportal .userdynamicportal .dynamicmonhtlyportal .monthlyreport .months .month{width:calc(25% - 1em);display:flex;flex-direction:column;padding:1.2em;align-items:center;justify-content:center;background-color:#c1ff72;border-radius:.5em;gap:.5em}main .userportal .userdynamicportal .dynamicmonhtlyportal .monthlyreport .months .month h4{color:#1b1b1b}main .userportal .userdynamicportal .dynamicmonhtlyportal .monthlyreport .months .month a{background-color:#ffde59;color:#1b1b1b;padding:.5em 1em;border-radius:.5em}main .userportal .userdynamicportal .dynamicorderportal{overflow-y:scroll;height:100%}main .userportal .userdynamicportal .dynamicorderportal .orderreports{display:flex;flex-direction:column;text-align:center;align-items:center;gap:1em;padding:1em}main .userportal .userdynamicportal .dynamicorderportal .orderreports .heading{background-color:#fff3;border-radius:1em;padding:.5em 1.5em;display:flex;gap:1em}main .userportal .userdynamicportal .dynamicorderportal .orderreports .heading h4{color:#fff}main .userportal .userdynamicportal .dynamicorderportal .orderreports .heading img{width:20px;cursor:pointer}main .userportal .userdynamicportal .dynamicorderportal .orderreports .orderdata{display:flex;gap:1rem;position:relative}main .userportal .userdynamicportal .dynamicorderportal .orderreports .orderdata.expired:after{content:"Expired";background:#ffffff80;color:#1b1b1b;position:absolute;height:100%;width:100%;display:flex;align-items:center;justify-content:center;font-weight:900;border-radius:.5em;border:1px solid #ffffff}main .userportal .userdynamicportal .dynamicorderportal .orderreports .orderdata .data{width:150px;display:flex;flex-direction:column;gap:.2em}main .userportal .userdynamicportal .dynamicorderportal .orderreports .orderdata .data.inactive span{background-color:#ffffff1a;color:#fff}main .userportal .userdynamicportal .dynamicorderportal .orderreports .orderdata .data.percentage span{position:relative;overflow:hidden;z-index:1}main .userportal .userdynamicportal .dynamicorderportal .orderreports .orderdata .data.percentage span:before{content:"";height:100%;background-color:#72c007b3;position:absolute;top:0;left:0;z-index:-1;transition:width .5s;width:0%}main .userportal .userdynamicportal .dynamicorderportal .orderreports .orderdata .data p{padding:.5em 1.5em;color:#1b1b1b;background-color:#ffde59;font-size:.8em;font-weight:600;border-radius:1em}main .userportal .userdynamicportal .dynamicorderportal .orderreports .orderdata .data span,main .userportal .userdynamicportal .dynamicorderportal .orderreports .orderdata .data a{border-radius:1em;padding:.5em 1.5em;color:#1b1b1b;background-color:#c1ff72;font-size:.8em;font-weight:600}main .userportal .userdynamicportal .allcustomers{display:flex;flex-direction:column;gap:1em;overflow-y:scroll;height:100%}main .userportal .userdynamicportal .allcustomers .customer{padding:1em;background-color:#fff3;border-radius:.5em;width:100%;display:flex;gap:.5em;align-items:center;justify-content:space-between}main .userportal .userdynamicportal .allcustomers .customer h3{text-transform:capitalize}main .userportal .userdynamicportal .allcustomers .customer h3 img{height:20px;cursor:pointer}main .userportal .userdynamicportal .allcustomers .customer .reports{display:flex;gap:1em}main .userportal .userdynamicportal .allcustomers .customer .reports .report{padding:.8em 1em;background-color:#1b1b1b;cursor:pointer;border-radius:.5em}main .userportal .userdynamicportal .allcustomers .customer .reports p{color:#fff;font-size:14px}main .sidebar{display:flex;padding:1.5em .8em;flex-direction:column;align-items:flex-start;gap:1em;background-color:#ffffff1a;width:20%;height:100%;text-transform:capitalize}main .sidebar .logo{height:3em;max-width:100%;object-fit:contain}main .sidebar .link{width:100%;padding:.5em 1em;border-radius:.2em;cursor:pointer}main .sidebar .link p{color:#fff}main .sidebar .link.active{background-color:#1b1b1b}main .sidebar .link.active p{font-weight:700;color:#fff}main .customerportal{height:100%;width:100%;display:flex;flex-direction:column;justify-content:center;gap:1rem;align-items:center;padding:1em;background-image:linear-gradient(to bottom,#1b1b1b,#72c007)}main .customerportal h4{color:#fff;font-weight:600;cursor:pointer}main .customerportal .logo{height:100px}main .customerportal .logo img{height:100%}main .customerportal .typecont{background-color:#b4b4b466;border-radius:.5em;display:flex;width:500px;align-items:center;justify-content:space-around;padding:.5em;text-align:center}main .customerportal .typecont .type{border-radius:.5em;padding:.5em;flex:1;color:#fff;cursor:pointer}main .customerportal .typecont .type.active{background-color:#c1ff72;color:#1b1b1b}main .customerportal .monthlyreport{display:flex;padding:1em;flex-direction:column;overflow-y:scroll;width:80%}main .customerportal .monthlyreport .selectyear{display:flex;align-items:center;justify-content:space-between;min-width:500px}main .customerportal .monthlyreport .selectyear h3{color:#fff}main .customerportal .monthlyreport .selectyear select{background-color:#fff3;padding:.5em 1em;border:#ffffff solid 1px;border-radius:.4em}main .customerportal .monthlyreport .months{display:flex;max-width:800px;flex-wrap:wrap;gap:1em}main .customerportal .monthlyreport .months .month{width:calc(25% - 1em);display:flex;flex-direction:column;padding:1.2em;align-items:center;justify-content:center;background-color:#c1ff72;border-radius:.5em;gap:.5em}main .customerportal .monthlyreport .months .month h4{color:#1b1b1b}main .customerportal .monthlyreport .months .month a{background-color:#ffde59;color:#1b1b1b;padding:.5em 1em;border-radius:.5em}main .customerportal .orderreports{display:flex;flex-direction:column;text-align:center;align-items:center;gap:1em;padding:1em;overflow-y:scroll}main .customerportal .orderreports .heading{background-color:#1b1b1bb3;border-radius:1em;padding:.5em 1.5em}main .customerportal .orderreports .heading h4{color:#fff}main .customerportal .orderreports .orderdata{display:flex;position:relative;gap:1rem}main .customerportal .orderreports .orderdata.expired:after{content:"Expired";background:#ffffff80;color:#1b1b1b;position:absolute;height:100%;width:100%;display:flex;align-items:center;justify-content:center;font-weight:900;border:1px solid #ffffff;border-radius:1em}main .customerportal .orderreports .orderdata .data{width:150px;display:flex;flex-direction:column;gap:.2em}main .customerportal .orderreports .orderdata .data.inactive span{background-color:#1b1b1bcc;color:#fff}main .customerportal .orderreports .orderdata .data.percentage span{position:relative;overflow:hidden;z-index:1}main .customerportal .orderreports .orderdata .data.percentage span:before{content:"";height:100%;background-color:#72c007b3;position:absolute;top:0;left:0;z-index:-1;transition:width .5s;width:0%}main .customerportal .orderreports .orderdata .data p{padding:.5em 1.5em;color:#1b1b1b;background-color:#ffde59;font-size:.8em;font-weight:600;border-radius:1em}main .customerportal .orderreports .orderdata .data span,main .customerportal .orderreports .orderdata .data a{border-radius:1em;padding:.5em 1.5em;color:#1b1b1b;background-color:#c1ff72;font-size:.8em;font-weight:600}main .modal{z-index:100;display:flex;flex-direction:column;align-items:center;height:100%;border-radius:1em;min-width:100%;background-color:#1b1b1bcc;border:#b4b4b4 solid 1px;position:absolute;top:50%;left:50%;translate:-50% -50%;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);overflow-y:scroll;padding:1em}main .modal .close{position:absolute;top:20px;right:20px;color:#fff;cursor:pointer;font-size:25px}main .loader{z-index:10000;display:flex;flex-direction:column;align-items:center;justify-content:center;height:350px;border-radius:1em;width:500px;background-color:#b4b4b44d;border:#b4b4b4 solid 1px;position:absolute;top:50%;left:50%;translate:-50% -50%;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}main .loader p{margin-top:1.5em;font-weight:800;color:#000}main .loader .loading{width:40px;aspect-ratio:1;display:flex}main .loader .loading:before,main .loader .loading:after{content:"";flex:1;background:#72c007;animation:l21 2s infinite;border-radius:100px 0 0 100px;transform-origin:top right;transform:translateY(calc(var(--s, 1) * 0%)) rotate(0)}main .loader .loading:after{transform-origin:bottom left;border-radius:0 100px 100px 0;--s: -1}@keyframes l21{33%{transform:translateY(calc(var(--s, 1) * 50%)) rotate(0)}66%{transform:translateY(calc(var(--s, 1) * 50%)) rotate(-90deg)}90%,to{transform:translate(calc(var(--s, 1) * -100%),calc(var(--s, 1) * 50%)) rotate(-90deg)}}main .auth{height:100%;width:100%;display:flex;align-items:center;justify-content:center}main .auth .logincont{background-color:#b4b4b433;border-radius:1.2em;padding:3em;border:#b4b4b4 solid 1px;display:flex;flex-direction:column;gap:1.5em;align-items:center;justify-content:center;text-align:center}main .auth .logincont .typecont{background-color:#b4b4b433;border-radius:.5em;display:flex;width:100%;align-items:center;justify-content:space-around;padding:.5em}main .auth .logincont .typecont .type{border-radius:.5em;padding:.5em;flex:1;cursor:pointer}main .auth .logincont .typecont .type.active{background-color:#b4b4b4;color:#1b1b1b}main .auth .logincont .login{display:flex;flex-direction:column;gap:.5em}main form{display:flex;flex-direction:column;gap:.2em;text-align:left}main form label{text-transform:capitalize}main form .input{background-color:#b4b4b433;border-radius:.2em;border:#b4b4b4 solid 1px;padding:.8em .5em;color:#fff}main form .input option{color:#1b1b1b}main form .button{border-radius:.2em;background-color:#72c007;color:#1b1b1b;padding:.8em .5em;cursor:pointer}.percentage[data-percentage="0"] span:before{width:0%!important}.percentage[data-percentage="1"] span:before{width:1%!important}.percentage[data-percentage="2"] span:before{width:2%!important}.percentage[data-percentage="3"] span:before{width:3%!important}.percentage[data-percentage="4"] span:before{width:4%!important}.percentage[data-percentage="5"] span:before{width:5%!important}.percentage[data-percentage="6"] span:before{width:6%!important}.percentage[data-percentage="7"] span:before{width:7%!important}.percentage[data-percentage="8"] span:before{width:8%!important}.percentage[data-percentage="9"] span:before{width:9%!important}.percentage[data-percentage="10"] span:before{width:10%!important}.percentage[data-percentage="11"] span:before{width:11%!important}.percentage[data-percentage="12"] span:before{width:12%!important}.percentage[data-percentage="13"] span:before{width:13%!important}.percentage[data-percentage="14"] span:before{width:14%!important}.percentage[data-percentage="15"] span:before{width:15%!important}.percentage[data-percentage="16"] span:before{width:16%!important}.percentage[data-percentage="17"] span:before{width:17%!important}.percentage[data-percentage="18"] span:before{width:18%!important}.percentage[data-percentage="19"] span:before{width:19%!important}.percentage[data-percentage="20"] span:before{width:20%!important}.percentage[data-percentage="21"] span:before{width:21%!important}.percentage[data-percentage="22"] span:before{width:22%!important}.percentage[data-percentage="23"] span:before{width:23%!important}.percentage[data-percentage="24"] span:before{width:24%!important}.percentage[data-percentage="25"] span:before{width:25%!important}.percentage[data-percentage="26"] span:before{width:26%!important}.percentage[data-percentage="27"] span:before{width:27%!important}.percentage[data-percentage="28"] span:before{width:28%!important}.percentage[data-percentage="29"] span:before{width:29%!important}.percentage[data-percentage="30"] span:before{width:30%!important}.percentage[data-percentage="31"] span:before{width:31%!important}.percentage[data-percentage="32"] span:before{width:32%!important}.percentage[data-percentage="33"] span:before{width:33%!important}.percentage[data-percentage="34"] span:before{width:34%!important}.percentage[data-percentage="35"] span:before{width:35%!important}.percentage[data-percentage="36"] span:before{width:36%!important}.percentage[data-percentage="37"] span:before{width:37%!important}.percentage[data-percentage="38"] span:before{width:38%!important}.percentage[data-percentage="39"] span:before{width:39%!important}.percentage[data-percentage="40"] span:before{width:40%!important}.percentage[data-percentage="41"] span:before{width:41%!important}.percentage[data-percentage="42"] span:before{width:42%!important}.percentage[data-percentage="43"] span:before{width:43%!important}.percentage[data-percentage="44"] span:before{width:44%!important}.percentage[data-percentage="45"] span:before{width:45%!important}.percentage[data-percentage="46"] span:before{width:46%!important}.percentage[data-percentage="47"] span:before{width:47%!important}.percentage[data-percentage="48"] span:before{width:48%!important}.percentage[data-percentage="49"] span:before{width:49%!important}.percentage[data-percentage="50"] span:before{width:50%!important}.percentage[data-percentage="51"] span:before{width:51%!important}.percentage[data-percentage="52"] span:before{width:52%!important}.percentage[data-percentage="53"] span:before{width:53%!important}.percentage[data-percentage="54"] span:before{width:54%!important}.percentage[data-percentage="55"] span:before{width:55%!important}.percentage[data-percentage="56"] span:before{width:56%!important}.percentage[data-percentage="57"] span:before{width:57%!important}.percentage[data-percentage="58"] span:before{width:58%!important}.percentage[data-percentage="59"] span:before{width:59%!important}.percentage[data-percentage="60"] span:before{width:60%!important}.percentage[data-percentage="61"] span:before{width:61%!important}.percentage[data-percentage="62"] span:before{width:62%!important}.percentage[data-percentage="63"] span:before{width:63%!important}.percentage[data-percentage="64"] span:before{width:64%!important}.percentage[data-percentage="65"] span:before{width:65%!important}.percentage[data-percentage="66"] span:before{width:66%!important}.percentage[data-percentage="67"] span:before{width:67%!important}.percentage[data-percentage="68"] span:before{width:68%!important}.percentage[data-percentage="69"] span:before{width:69%!important}.percentage[data-percentage="70"] span:before{width:70%!important}.percentage[data-percentage="71"] span:before{width:71%!important}.percentage[data-percentage="72"] span:before{width:72%!important}.percentage[data-percentage="73"] span:before{width:73%!important}.percentage[data-percentage="74"] span:before{width:74%!important}.percentage[data-percentage="75"] span:before{width:75%!important}.percentage[data-percentage="76"] span:before{width:76%!important}.percentage[data-percentage="77"] span:before{width:77%!important}.percentage[data-percentage="78"] span:before{width:78%!important}.percentage[data-percentage="79"] span:before{width:79%!important}.percentage[data-percentage="80"] span:before{width:80%!important}.percentage[data-percentage="81"] span:before{width:81%!important}.percentage[data-percentage="82"] span:before{width:82%!important}.percentage[data-percentage="83"] span:before{width:83%!important}.percentage[data-percentage="84"] span:before{width:84%!important}.percentage[data-percentage="85"] span:before{width:85%!important}.percentage[data-percentage="86"] span:before{width:86%!important}.percentage[data-percentage="87"] span:before{width:87%!important}.percentage[data-percentage="88"] span:before{width:88%!important}.percentage[data-percentage="89"] span:before{width:89%!important}.percentage[data-percentage="90"] span:before{width:90%!important}.percentage[data-percentage="91"] span:before{width:91%!important}.percentage[data-percentage="92"] span:before{width:92%!important}.percentage[data-percentage="93"] span:before{width:93%!important}.percentage[data-percentage="94"] span:before{width:94%!important}.percentage[data-percentage="95"] span:before{width:95%!important}.percentage[data-percentage="96"] span:before{width:96%!important}.percentage[data-percentage="97"] span:before{width:97%!important}.percentage[data-percentage="98"] span:before{width:98%!important}.percentage[data-percentage="99"] span:before{width:99%!important}.percentage[data-percentage="100"] span:before{width:100%!important}@media (prefers-color-scheme: light){body{background-color:#1b1b1b}main{background-color:#b4b4b4}}*{margin:0;padding:0;box-sizing:border-box}