:root {
    /* primary */
    --Primary-Blue-900 :#030B13;
    --Primary-Blue-800 :#071C2E;
    --Primary-Blue-700 :#0C2D49;
    --Primary-Blue-600 :#103F67;
    --Primary-Blue-500 :#1D70B7;
    --Primary-Blue-400 :#61A8E6;
    --Primary-Blue-300 :rgba(29, 112, 183, 0.48);
    --Primary-Blue-200 :rgba(29, 112, 183, 0.24);
    --Primary-Blue-100 :rgba(29, 112, 183, 0.16);
    --Primary-Blue-50  :rgba(29, 112, 183, 0.08);

    /* primary-Gradient*/
    --Light-Gradient: linear-gradient(90deg, rgba(16, 63, 103, 1), rgba(29, 112, 183, 1));
    --Dark-Gradient : linear-gradient(90deg, rgba(97, 168, 230, 1), rgba(29, 112, 183, 1));

    /* secondary */
    --Secondary-Yellow-900 :#1A1400;
    --Secondary-Yellow-800 :#403000;
    --Secondary-Yellow-700 :#8C6900;
    --Secondary-Yellow-600 :#CC9A00;
    --Secondary-Yellow-500 :#FFC000;
    --Secondary-Yellow-400 :#FFE699;
    --Secondary-Yellow-300 :rgba(255, 230, 153, 0.64);
    --Secondary-Yellow-200 :rgba(255, 230, 153, 0.48);
    --Secondary-Yellow-100 :rgba(255, 230, 153, 0.24);
    --Secondary-Yellow-50  :rgba(255, 230, 153, 0.16);

    /* gray */
    --Gray-Not-Black :#000025;
    --Gray-Gray-900  :#181826;
    --Gray-Gray-850  :#232338;
    --Gray-Night     :#333351;
    --Gray-Gray-700  :#6969A0;
    --Gray-Gray-600  :#6969A0;
    --Gray-Gray-500  :#8E8EB8;
    --Gray-Gray-400  :#B4B4D0;
    --Gray-Gray-300  :rgba(180, 180, 208, 0.48);
    --Gray-Gray-200  :rgba(180, 180, 208, 0.32);
    --Gray-Gray-150  :rgba(180, 180, 208, 0.24);
    --Gray-Gray-100  :rgba(180, 180, 208, 0.16);
    --Gray-Gray-50   :rgba(180, 180, 208, 0.08);
    --Gray-Not-White :#F7F7F7;

    /* red */
    --Error-900 :#540310;
    --Error-800 :#7A0417;
    --Error-700 :#B10521;
    --Error-600 :#C40625;
    --Error-500 :#E9072C;
    --Error-400 :#ED3956;
    --Error-300 :rgba(233, 7, 44, 0.48);
    --Error-200 :rgba(233, 7, 44, 0.24);
    --Error-100 :rgba(233, 7, 44, 0.16);
    --Error-50  :rgba(233, 7, 44, 0.08);

    /* green */
    --Success-900 :#061907;
    --Success-800 :#0C310F;
    --Success-700 :#145218;
    --Success-600 :#1F7A25;
    --Success-500 :#2BAB33;
    --Success-400 :#5CD664;
    --Success-300 :rgba(43, 171, 51, 0.48);
    --Success-200 :rgba(43, 171, 51, 0.24);
    --Success-100 :rgba(43, 171, 51, 0.16);
    --Success-50  :rgba(43, 171, 51, 0.08);

    /* warning */
    --Warning-900 :#321501;
    --Warning-800 :#7A3504;
    --Warning-700 :#B14D05;
    --Warning-600 :#C45506;
    --Warning-500 :#E96507;
    --Warning-400 :#E96507;
    --Warning-300 :rgba(233, 101, 7, 0.48);
    --Warning-200 :rgba(233, 101, 7, 0.24);
    --Warning-100 :rgba(233, 101, 7, 0.16);
    --Warning-50  :rgba(233, 101, 7, 0.08);
}


.line {
    width: 20%;
    height: 2px;
    background-color: var(--Gray-Gray-400);
    margin: auto;
}
.dark-page .line{
    width: 20%;
    height: 2px;
    background-color: var(--Gray-Gray-200);
    margin: auto;
}
.form-control{
    border-top-right-radius:1rem !important;
    border-bottom-right-radius:1rem !important;
    border-radius: 1rem !important;
    background-color: var(--Gray-Gray-100) !important;
}
select option {
    padding: 10px;
    background-color: var(--Gray-Not-White);
    color: var(--Gray-Night) !important;
    font-size: 16px;
    line-height: 21.82px;
    font-family: 'Nunito';
    font-weight: 400;
}
.dark-page select option{
    padding: 10px;
    background-color: #232338;
    color: var(--Gray-Not-White) !important;
    font-size: 16px;
    line-height: 21.82px;
    font-family: 'Nunito';
    font-weight: 400;
}

.tooltip-customize {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    white-space: normal;
    max-width: 250px;
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    -webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    -ms-transition: opacity 0.2s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out;
}


.number-background {
    background-color: var(--Gray-Gray-400);
    border-radius: 4rem;
    width: 20px;
    height: 20px;
    font-size: 12px;
    font-weight: 700;
    color: var(--Gray-Not-White);
    display: flex;
    justify-content: center;
    align-items: center;
}

.dark-page .number-background {
    background-color: var(--Gray-Gray-200);
}