::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: transparent; 
}

::-webkit-scrollbar-thumb {
    background: #00000044; 
}

::-webkit-scrollbar-thumb:hover {
    background: #555; 
}

:root {
    --tr1: 0.1;
    --tr2: 0.5;
    --plt1: #3361ac;
    --plt2: #e7e6dd;
    --plt3: #e8c766;
    --plt4: #e8af30;
    --plt5: #162f65;
    --plt6: #0f2043;
    --plt1-tr1: rgb(51, 97, 172, var(--tr1));
    --plt2-tr1: rgb(231, 230, 221, var(--tr1));
    --plt3-tr1: rgb(232, 199, 102, var(--tr1));
    --plt4-tr1: rgb(232, 175, 48, var(--tr1));
    --plt5-tr1: rgb(22, 47, 101, var(--tr1));
    --plt5-tr1: rgb(15, 32, 67, var(--tr1));
    --plt1-tr2: rgb(51, 97, 172, var(--tr2));
    --plt2-tr2: rgb(231, 230, 221, var(--tr2));
    --plt3-tr2: rgb(232, 199, 102, var(--tr2));
    --plt4-tr2: rgb(232, 175, 48, var(--tr2));
    --plt5-tr2: rgb(22, 47, 101, var(--tr2));
    --plt6-tr2: rgb(15, 32, 67, var(--tr2));
    --white1: #d0d0d0;
    --white2: #e1e1e1;
    --white3: #ececec;
    --white4: #f6f6f6;
    --white5: #ffffff;
    --pd1: 10px 10px;
    --pd2: 20px 20px;
    --pd3: 30px 30px;
    --pd4: 40px 40px;
    --pd5: 50px 50px;
}

body { padding:0px; margin:0px; font-family: Arial, Helvetica, sans-serif;}
/* body { padding:0px; margin:0px; font-family: Jura;} */


.cursor-pointer {cursor: pointer;}
.cursor-default  {cursor: default ;}
.cursor-text  {cursor: text ;}
.cursor-wait  {cursor: wait ;}
.cursor-crosshair  {cursor: crosshair ;}
.cursor-move  {cursor: move ;}
.cursor-not-allowed  {cursor: not-allowed ;}
.cursor-help  {cursor: help ;}

/*      Font Size      */
.fs-2 {font-size: 2px;}
.fs-3 {font-size: 3px;}
.fs-4 {font-size: 4px;}
.fs-5 {font-size: 5px;}
.fs-6 {font-size: 6px;}
.fs-7 {font-size: 7px;}
.fs-8 {font-size: 8px;}
.fs-9 {font-size: 9px;}
.fs-10 {font-size: 10px;}
.fs-11 {font-size: 11px;}
.fs-12 {font-size: 12px;}
.fs-13 {font-size: 13px;}
.fs-14 {font-size: 14px;}
.fs-15 {font-size: 15px;}
.fs-16 {font-size: 16px;}
.fs-17 {font-size: 17px;}
.fs-18 {font-size: 18px;}
.fs-19 {font-size: 19px;}
.fs-20 {font-size: 20px;}
.fs-21 {font-size: 21px;}
.fs-22 {font-size: 22px;}
.fs-23 {font-size: 23px;}
.fs-24 {font-size: 24px;}
.fs-25 {font-size: 25px;}
.fs-30 {font-size: 30px;}
.fs-40 {font-size: 40px;}
.fs-50 {font-size: 50px;}

.fs-large {font-size: 18px;}
.fs-medium {font-size: 15px;}
.fs-small {font-size: 12px;}
.fs-very-small {font-size: 10px;}



/*      Font Weight      */
.fw-light {font-weight: 300;}
.fw-normal {font-weight: 400;}
.fw-bold {font-weight: 700;}

/*      Font Color      */
.clr-black {color: #000000}
.clr-black1 {color: #141b34}
.clr-grey1 {color: #777777}
.clr-grey2 {color: #bec3d0}
.clr-white {color: #ffffff}
.clr-green {color: #009900}
.clr-yellow {color: #e6c109}
.clr-red {color: #e60909}

.clr-plt1 {color: var(--plt1);}
.clr-plt2 {color: var(--plt2);}
.clr-plt3 {color: var(--plt3);}
.clr-plt4 {color: var(--plt4);}
.clr-plt5 {color: var(--plt5);}
.clr-plt6 {color: var(--plt6);}

.clr-plt1-hv:hover {color: var(--plt1);}
.clr-plt2-hv:hover {color: var(--plt2);}
.clr-plt3-hv:hover {color: var(--plt3);}
.clr-plt4-hv:hover {color: var(--plt4);}
.clr-plt5-hv:hover {color: var(--plt5);}
.clr-plt6-hv:hover {color: var(--plt6);}

.clr-white1 {color: var(--white1);}
.clr-white2 {color: var(--white2);}
.clr-white3 {color: var(--white3);}
.clr-white4 {color: var(--white4);}
.clr-white5 {color: var(--white5);}

/*      Text Align      */
.txt-l {text-align: left;}
.txt-c {text-align: center;}
.txt-r {text-align: right;}
.txt-u {text-decoration: underline;}
.txt-lt {text-decoration: line-through;}
.txt-none {text-decoration: none;}

.txt-u-hv:hover {text-decoration: underline;}

/*      Text Wrap      */
.tw-wrap {white-space: normal;}
.tw-nowrap {white-space: nowrap;}
.tw-pre {white-space: pre;}
.tw-pre-wrap {white-space: pre-wrap;}
.tw-pre-line {white-space: pre-line;}

.tof-ellipsis { text-overflow: ellipsis; }

.us-none {user-select: none;}

/*      Display      */
.d-block { display: block;}
.d-flex { display: flex;}
.d-inline-flex { display: inline-flex;}
.d-flex-center { display: flex; justify-content: center; align-items: center;}
.d-none { display: none;}


/*      Flex Direction      */
.fd-row {flex-direction: row;}
.fd-column {flex-direction: column;}
.fd-row-reverse {flex-direction: row-reverse;}
.fd-column-reverse {flex-direction: column-reverse;}

.f-shrink-0 {flex-shrink: 0;}
.fw-wrap {flex-wrap:wrap; }

/*      Justify Content      */
.jc-start { justify-content: flex-start;}
.jc-center { justify-content: center;}
.jc-end { justify-content: flex-end;}
.jc-between { justify-content: space-between;}
.jc-around { justify-content: space-around;}

/*      Align Item      */
.ai-start { align-items: flex-start;}
.ai-center { align-items: center;}
.ai-end { align-items: flex-end;}
.ai-stretch { align-items: stretch;}

/*      Background Color      */
.bg-grey {background-color: #dddddd;}
.bg-green { background-color: #009900;}
.bg-green-lite { background-color: rgba(0, 153, 0, 0.133);}
.bg-yellow { background-color: #e6c109;}
.bg-yellow-lite { background-color: #e6c10922;}
.bg-red { background-color: #e60909;}
.bg-red-lite { background-color: #e6090922;}

.bg-plt1 {background-color: var(--plt1);}
.bg-plt2 {background-color: var(--plt2);}
.bg-plt3 {background-color: var(--plt3);}
.bg-plt4 {background-color: var(--plt4);}
.bg-plt5 {background-color: var(--plt5);}
.bg-plt6 {background-color: var(--plt6);}

.bg-plt1-tr2 {background-color: var(--plt1-tr2);}
.bg-plt2-tr2 {background-color: var(--plt2-tr2);}
.bg-plt3-tr2 {background-color: var(--plt3-tr2);}
.bg-plt4-tr2 {background-color: var(--plt4-tr2);}
.bg-plt5-tr2 {background-color: var(--plt5-tr2);}
.bg-plt6-tr2 {background-color: var(--plt6-tr2);}

.bg-plt1-hv:hover {background-color: var(--plt1);}
.bg-plt2-hv:hover {background-color: var(--plt2);}
.bg-plt3-hv:hover {background-color: var(--plt3);}
.bg-plt4-hv:hover {background-color: var(--plt4);}
.bg-plt5-hv:hover {background-color: var(--plt5);}
.bg-plt6-hv:hover {background-color: var(--plt6);}

.bg-plt1-tr2-hv:hover {background-color: var(--plt1-tr2);}
.bg-plt2-tr2-hv:hover {background-color: var(--plt2-tr2);}
.bg-plt3-tr2-hv:hover {background-color: var(--plt3-tr2);}
.bg-plt4-tr2-hv:hover {background-color: var(--plt4-tr2);}
.bg-plt5-tr2-hv:hover {background-color: var(--plt5-tr2);}
.bg-plt6-tr2-hv:hover {background-color: var(--plt6-tr2);}

.bg-white1 {background-color: var(--white1);}
.bg-white2 {background-color: var(--white2);}
.bg-white3 {background-color: var(--white3);}
.bg-white4 {background-color: var(--white4);}
.bg-white5 {background-color: var(--white5);}

.bg-white1-hv:hover {background-color: var(--white1);}
.bg-white2-hv:hover {background-color: var(--white2);}
.bg-white3-hv:hover {background-color: var(--white3);}
.bg-white4-hv:hover {background-color: var(--white4);}
.bg-white5-hv:hover {background-color: var(--white5);}

.bs-bb { box-sizing: border-box;}
.bs-cb { box-sizing: content-box;}

.pd1 {padding: var(--pd1);}
.pd2 {padding: var(--pd2);}
.pd3 {padding: var(--pd3);}
.pd4 {padding: var(--pd4);}
.pd5 {padding: var(--pd5);}

/*      Padding       */
.pd-0 {padding: 0px;}
.pd-1 {padding: 1px;}
.pd-2 {padding: 2px;}
.pd-3 {padding: 3px;}
.pd-4 {padding: 4px;}
.pd-5 {padding: 5px;}
.pd-6 {padding: 6px;}
.pd-7 {padding: 7px;}
.pd-8 {padding: 8px;}
.pd-9 {padding: 9px;}
.pd-10 {padding: 10px;}
.pd-15 {padding: 15px;}
.pd-20 {padding: 20px;}
.pd-25 {padding: 25px;}
.pd-30 {padding: 30px;}
.pd-35 {padding: 35px;}
.pd-40 {padding: 40px;}
.pd-45 {padding: 45px;}
.pd-50 {padding: 50px;}
.pd-t-5 {padding-top: 5px;}
.pd-t-10 {padding-top: 10px;}
.pd-t-15 {padding-top: 15px;}
.pd-t-20 {padding-top: 20px;}
.pd-b-5 {padding-bottom: 5px;}
.pd-b-10 {padding-bottom: 10px;}
.pd-b-15 {padding-bottom: 15px;}
.pd-b-20 {padding-bottom: 20px;}
.pd-b-30 {padding-bottom: 30px;}
.pd-b-40 {padding-bottom: 40px;}
.pd-b-50 {padding-bottom: 50px;}
.pd-b-60 {padding-bottom: 60px;}
.pd-b-70 {padding-bottom: 70px;}
.pd-b-80 {padding-bottom: 80px;}
.pd-b-90 {padding-bottom: 90px;}
.pd-b-100 {padding-bottom: 100px;}
.pd-l-5 {padding-left: 5px;}
.pd-l-10 {padding-left: 10px;}
.pd-l-15 {padding-left: 15px;}
.pd-l-20 {padding-left: 20px;}
.pd-l-30 {padding-left: 30px;}
.pd-l-40 {padding-left: 50px;}
.pd-l-50 {padding-left: 50px;}
.pd-r-5 {padding-right: 5px;}
.pd-r-10 {padding-right: 10px;}
.pd-r-15 {padding-right: 15px;}
.pd-r-20 {padding-right: 20px;}
.pd-r-30 {padding-right: 30px;}
.pd-r-40 {padding-right: 40px;}
.pd-r-50 {padding-right: 50px;}
.pd-tb-0 {padding-top: 0px; padding-bottom: 0px;}
.pd-tb-1 {padding-top: 1px; padding-bottom: 1px;}
.pd-tb-2 {padding-top: 2px; padding-bottom: 2px;}
.pd-tb-3 {padding-top: 3px; padding-bottom: 3px;}
.pd-tb-4 {padding-top: 4px; padding-bottom: 4px;}
.pd-tb-5 {padding-top: 5px; padding-bottom: 5px;}
.pd-tb-6 {padding-top: 6px; padding-bottom: 6px;}
.pd-tb-7 {padding-top: 7px; padding-bottom: 7px;}
.pd-tb-8 {padding-top: 8px; padding-bottom: 8px;}
.pd-tb-9 {padding-top: 9px; padding-bottom: 9px;}
.pd-tb-10 {padding-top: 10px; padding-bottom: 10px;}
.pd-tb-15 {padding-top: 15px; padding-bottom: 15px;}
.pd-tb-20 {padding-top: 20px; padding-bottom: 20px;}
.pd-lr-0 {padding-left: 0px; padding-right: 0px;}
.pd-lr-1 {padding-left: 1px; padding-right: 1px;}
.pd-lr-2 {padding-left: 2px; padding-right: 2px;}
.pd-lr-3 {padding-left: 3px; padding-right: 3px;}
.pd-lr-4 {padding-left: 4px; padding-right: 4px;}
.pd-lr-5 {padding-left: 5px; padding-right: 5px;}
.pd-lr-6 {padding-left: 6px; padding-right: 6px;}
.pd-lr-7 {padding-left: 7px; padding-right: 7px;}
.pd-lr-8 {padding-left: 8px; padding-right: 8px;}
.pd-lr-9 {padding-left: 9px; padding-right: 9px;}
.pd-lr-10 {padding-left: 10px; padding-right: 10px;}
.pd-lr-15 {padding-left: 15px; padding-right: 15px;}
.pd-lr-20 {padding-left: 20px; padding-right: 20px;}
.pd-lr-30 {padding-left: 30px; padding-right: 30px;}
.pd-lr-40 {padding-left: 40px; padding-right: 40px;}
.pd-lr-50 {padding-left: 50px; padding-right: 50px;}
.pd-lr-60 {padding-left: 60px; padding-right: 60px;}
.pd-lr-70 {padding-left: 70px; padding-right: 70px;}
.pd-lr-80 {padding-left: 80px; padding-right: 80px;}
.pd-lr-90 {padding-left: 90px; padding-right: 90px;}
.pd-lr-100 {padding-left: 100px; padding-right: 100px;}


/*      Margin      */
.mg-0 {margin: 0px;}
.mg-5 {margin: 5px;}
.mg-10 {margin: 10px;}
.mg-15 {margin: 15px;}
.mg-20 {margin: 20px;}
.mg-25 {margin: 25px;}
.mg-30 {margin: 30px;}
.mg-35 {margin: 35px;}
.mg-40 {margin: 40px;}
.mg-45 {margin: 45px;}
.mg-50 {margin: 50px;}
.mg-t-1 {margin-top: 1px;}
.mg-t-2 {margin-top: 2px;}
.mg-t-3 {margin-top: 3px;}
.mg-t-4 {margin-top: 4px;}
.mg-t-5 {margin-top: 5px;}
.mg-t-8 {margin-top: 8px;}
.mg-t-10 {margin-top: 10px;}
.mg-t-15 {margin-top: 15px;}
.mg-t-20 {margin-top: 20px;}
.mg-t-25 {margin-top: 25px;}
.mg-t-30 {margin-top: 30px;}
.mg-t-35 {margin-top: 35px;}
.mg-t-40 {margin-top: 40px;}
.mg-t-45 {margin-top: 45px;}
.mg-t-50 {margin-top: 50px;}
.mg-t-60 {margin-top: 60px;}
.mg-t-70 {margin-top: 70px;}
.mg-t-80 {margin-top: 80px;}
.mg-t-90 {margin-top: 90px;}
.mg-t-100 {margin-top: 100px;}
.mg-b-5 {margin-bottom: 5px;}
.mg-b-10 {margin-bottom: 10px;}
.mg-b-15 {margin-bottom: 15px;}
.mg-b-20 {margin-bottom: 20px;}
.mg-b-25 {margin-bottom: 25px;}
.mg-b-30 {margin-bottom: 30px;}
.mg-b-35 {margin-bottom: 30px;}
.mg-b-40 {margin-bottom: 35px;}
.mg-b-45 {margin-bottom: 40px;}
.mg-b-50 {margin-bottom: 50px;}
.mg-b-100 {margin-bottom: 100px;}
.mg-b-150 {margin-bottom: 150px;}
.mg-b-200 {margin-bottom: 200px;}
.mg-l-1 {margin-left: 1px;}
.mg-l-2 {margin-left: 2px;}
.mg-l-3 {margin-left: 3px;}
.mg-l-4 {margin-left: 4px;}
.mg-l-5 {margin-left: 5px;}
.mg-l-6 {margin-left: 6px;}
.mg-l-7 {margin-left: 7px;}
.mg-l-8 {margin-left: 8px;}
.mg-l-9 {margin-left: 9px;}
.mg-l-10 {margin-left: 10px;}
.mg-l-15 {margin-left: 15px;}
.mg-l-20 {margin-left: 20px;}
.mg-l-25 {margin-left: 25px;}
.mg-l-30 {margin-left: 30px;}
.mg-l-35 {margin-left: 30px;}
.mg-l-40 {margin-left: 35px;}
.mg-l-45 {margin-left: 40px;}
.mg-l-50 {margin-left: 50px;}
.mg-l-100 {margin-left: 100px;}
.mg-r-1 {margin-right: 1px;}
.mg-r-2 {margin-right: 2px;}
.mg-r-3 {margin-right: 3px;}
.mg-r-4 {margin-right: 4px;}
.mg-r-5 {margin-right: 5px;}
.mg-r-10 {margin-right: 10px;}
.mg-r-15 {margin-right: 15px;}
.mg-r-20 {margin-right: 20px;}
.mg-r-25 {margin-right: 25px;}
.mg-r-30 {margin-right: 30px;}
.mg-r-35 {margin-right: 30px;}
.mg-r-40 {margin-right: 35px;}
.mg-r-45 {margin-right: 40px;}
.mg-r-50 {margin-right: 50px;}

/*      Border Radius      */
.br-50p { border-radius: 50%;}
.br-1 { border-radius: 1px;}
.br-2 { border-radius: 2px;}
.br-3 { border-radius: 3px;}
.br-4 { border-radius: 4px;}
.br-5 { border-radius: 5px;}
.br-10 { border-radius: 10px;}
.br-15 { border-radius: 15px;}

/*      Border      */
.bdr-none {border: none;}
.bdr-all {border: 1px solid #00000022}
.bdr-top {border-top: 1px solid #00000022}
.bdr-bottom {border-bottom: 1px solid #00000022}
.bdr-left {border-left: 1px solid #00000022}
.bdr-right {border-right: 1px solid #00000022}

/*      Box Shadow      */
.box-shadow-basic { box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);}
.box-shadow-medium { box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);}
.box-shadow-heavy { box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);}


/*      Overflow      */
.of-hidden {overflow: hidden;}
.of-scroll {overflow: scroll;}
.of-auto {overflow: auto;}
.of-visible {overflow: visible;}

.w-mc {width: max-content;}
/*      Width      */
.w-50p {width: 50%;}
.w-100p {width: 100%;}
.w-10 {width: 10px;}
.w-15 {width: 10px;}
.w-20 {width: 20px;}
.w-25 {width: 25px;}
.w-30 {width: 30px;}
.w-35 {width: 35px;}
.w-40 {width: 40px;}
.w-50 {width: 50px;}
.w-60 {width: 60px;}
.w-70 {width: 70px;}
.w-80 {width: 80px;}
.w-90 {width: 90px;}
.w-96 {width: 96px;}
.w-100 {width: 100px;}
.w-110 {width: 110px;}
.w-120 {width: 120px;}
.w-130 {width: 130px;}
.w-140 {width: 140px;}
.w-150 {width: 150px;}
.w-200 {width: 200px;}
.w-210 {width: 210px;}
.w-220 {width: 220px;}
.w-230 {width: 230px;}
.w-240 {width: 240px;}
.w-250 {width: 250px;}
.w-300 {width: 300px;}
.w-350 {width: 350px;}
.w-400 {width: 400px;}
.w-410 {width: 410px;}
.w-420 {width: 420px;}
.w-430 {width: 430px;}
.w-440 {width: 440px;}
.w-450 {width: 450px;}
.w-500 {width: 500px;}
.w-550 {width: 550px;}
.w-600 {width: 600px;}
.w-650 {width: 650px;}
.w-700 {width: 700px;}
.w-750 {width: 750px;}
.w-800 {width: 800px;}


.h-mc {height: max-content;}
/*      Height      */
.h-10p {height: 10%;}
.h-20p {height: 20%;}
.h-30p {height: 30%;}
.h-40p {height: 40%;}
.h-50p {height: 50%;}
.h-60p {height: 60%;}
.h-70p {height: 70%;}
.h-80p {height: 80%;}
.h-90p {height: 90%;}
.h-100p {height: 100%;}
.h-1 {height: 1px;}
.h-2 {height: 2px;}
.h-3 {height: 3px;}
.h-4 {height: 4px;}
.h-5 {height: 5px;}
.h-10 {height: 10px;}
.h-25 {height: 25px;}
.h-20 {height: 20px;}
.h-30 {height: 30px;}
.h-35 {height: 35px;}
.h-40 {height: 40px;}
.h-50 {height: 50px;}
.h-60 {height: 60px;}
.h-70 {height: 70px;}
.h-80 {height: 80px;}
.h-90 {height: 90px;}
.h-100 {height: 100px;}
.h-110 {height: 110px;}
.h-120 {height: 120px;}
.h-130 {height: 130px;}
.h-140 {height: 140px;}
.h-150 {height: 150px;}
.h-200 {height: 200px;}
.h-250 {height: 250px;}
.h-300 {height: 300px;}
.h-350 {height: 350px;}
.h-400 {height: 400px;}
.h-450 {height: 450px;}
.h-500 {height: 500px;}
.h-550 {height: 550px;}
.h-600 {height: 600px;}
.h-650 {height: 650px;}
.h-700 {height: 700px;}
.h-750 {height: 750px;}
.h-800 {height: 800px;}