:root {
     --gradient1: linear-gradient(90deg, #FFBE0B 0%, #FB5607 48.44%, #3A86FF 100%);
     --clr1: rgba(0, 0, 0, 0.25);
     --light_gray: rgba(87, 91, 108, 0.85);
     --clr2: #f1f1f1;
     --clr3: #3A86FF;
     --clr4: rgba(0, 0, 0, 0.75);
     --clr5: #5BC589;
     --clr6: rgba(0, 0, 0, 0.4);
     --clr7: #F5F5F5;
     --black: black;
     --white: white;
     --black: black;
     --dark_black: rgba(0, 0, 0, 0.85);;
     --co_light: rgba(0, 0, 0, 0.7);
     --ff_Inter: 'Inter', sans-serif;
     --ff_dm: 'DM Sans', sans-serif;
     --s8: 8px;
     --s9: 9px;
     --s10: 10px;
     --s11: 11px;
     --s12: 12px;
     --s13: 13px;
     --s14: 14px;
     --s15: 15px;
     --s16: 16px;
     --s17: 17px;
     --s18: 18px;
     --s20: 20px;
     --s22: 22px;
     --s24: 24px;
     --s26: 26px;
     --s28: 28px;
     --s30: 30px;
     --s32: 32px;
}
 * {
     -webkit-font-smoothing: antialiased;
     /*letter-spacing: 0.05em;*/
     letter-spacing: 0.2px;
     transition: 0.4s;
}
 body {
    font-family: 'Inter', sans-serif;
     background-color: var(--clr7);
     color: var(--black);
     letter-spacing: 0.05em;
}
 .infoUpdateNotification::-webkit-scrollbar {
     width: 5px;
     height: 1px;
}
 .leftSection::-webkit-scrollbar {
     width: 0px;
}
 .infoUpdateNotification::-webkit-scrollbar-thumb {
     background: linear-gradient(to bottom, #3a86ff, #3a86ff);
     border: 0px;
     border-radius: 10px;
     height: 1px;
}
 .infoUpdateNotification::-webkit-scrollbar-track {
     background: linear-gradient(to bottom, rgb(255 190 11 / 15%), rgb(251 86 7 / 15%));
}
 a {
     text-decoration: none;
}
 *:focus {
     box-shadow: none !important;
}
 .bg-gray {
     background-color: var(--clr2);
}
 .card {
     background: #FFFFFF;
     border: 1px solid rgba(0, 0, 0, 0.15);
     /* box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15); */
     border-radius: 8px;
     overflow: hidden;
}

 @media(min-width: 1600px) {
     :root {
         --s8: 10px;
         --s9: 11px;
         --s10: 14px;
         --s11: 14px;
         --s12: 15px;
         --s13: 16px;
         --s14: 17px;
         --s15: 20px;
         --s16: 20px;
         --s18: 20px;
         --s17: 17px;
         --s20: 24px;
         --s22: 25px;
         --s24: 28px;
         --s26: 27px;
         --s28: 28px;
         --s30: 32px;
         --s32: 36px;
    }
}
@media(min-width: 1700px) {
    :root {
        --s8: 12px;
        --s9: 13px;
        --s10: 15px;
        --s11: 15px;
        --s12: 16px;
        --s13: 18px;
        --s14: 20px;
        --s15: 18px;
        --s16: 18px;
        --s17: 18px;
        --s18: 18px;
        --s20: 26px;
        --s22: 28px;
        --s24: 30px;
        --s26: 28px;
        --s28: 28px;
        --s30: 30px;
        --s32: 36px;
   }
}
@media(min-width: 2100px) {
    :root {
        --s8: 14px;
        --s9: 15px;
        --s10: 17px;
        --s11: 17px;
        --s12: 17px;
        --s13: 20px;
        --s14: 21px;
        --s15: 23px;
        --s16: 23px;
        --s17: 23px;
        --s18: 23px;
        --s20: 27px;
        --s22: 28px;
        --s24: 31px;
        --s26: 30px;
        --s28: 32px;
        --s30: 33px;
        --s32: 37px;
   }
}
@media(min-width: 2400px) {
    :root {
        --s8: 15px;
        --s9: 16px;
        --s10: 18px;
        --s11: 18px;
        --s12: 18px;
        --s13: 22px;
        --s14: 23px;
        --s15: 24px;
        --s16: 24px;
        --s17: 24px;
        --s18: 24px;
        --s20: 28px;
        --s22: 29px;
        --s24: 32px;
        --s26: 32px;
        --s28: 33px;
        --s32: 38px;
   }
}
 @media(max-width: 1200px) {
     :root {
         --s8: 8px;
         --s10: 10px;
         --s12: 11px;
         --s14: 13px;
         --s13: 13px;
         --s15: 13px;
         --s16: 14px;
         --s17: 14px;
         --s18: 15px;
         --s20: 16px;
         --s22: 17px;
         --s24: 18px;
         --s26: 25px;
         --s28: 26px;
         --s32: 25px;
    }
}
@media(max-width: 991px) {
    :root {
        --s13: 12px;
   }
}
 @media(max-width: 575px) {
     :root {
         --s8: 8px;
         --s10: 10px;
         --s11: 9px;
         --s13: 12px;
         --s12: 12px;
         --s14: 13px;
         --s15: 13px;
         --s16: 13px;
         --s17: 13px;
         --s18: 13px;
         --s20: 13px;
         --s22: 15px;
         --s24: 14px;
         --s26: 18px;
         --s28: 19px;
         --s32: 20px;
    }
}
 @media(max-width: 450px) {
     :root {
         --s8: 8px;
         --s10: 10px;
         --s12: 12px;
         --s13: 11px;
         --s14: 12px;
         --s15: 12px;
         --s16: 12px;
         --s17: 12px;
         --s18: 13px;
         --s20: 14px;
         --s24: 14px;
         --s26: 16px;
         --s28: 17px;
         --s32: 18px;
    }
}