@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&family=Lato:wght@300;400;700;900&family=Montserrat:wght@400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Questrial&display=swap');


/*disabled rubber band effect*/

button, a, input, label {
    touch-action: manipulation; /* Avoids 300ms delay and double-tap zoom */
}


:root {
    --navy-blue: #31456A;
    --light-blue: #00BEF9;
    --gray: #878787;
    --light-gray: #D5D6D9;
    --light-green: #34D9C8;
    --dark-gray: #3E3E3E;
    --light-red: #FA6960;
    --white: #ffffff;
    --roboto: 'Roboto', sans-serif;
    --inter: 'Inter', sans-serif;
    --regular: 400;
    --medium: 500;
    --bold: 700;
}

.fs-poppins {
    font-family: 'Poppins', sans-serif !important;
}

.fs-inter {
    font-family: 'Inter', sans-serif
}

.no-hover {
    background: transparent !important;
    /*pointer-events: none !important;*/
    cursor: default;
}

.d-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Gap */
.gap-2 {
    gap: 2px;
}

.gap-5 {
    gap: 5px;
}

.gap-4 {
    gap: 4px;
}

.gap-8 {
    gap: 8px;
}

.gap-10 {
    gap: 10px;
}

.gap-12 {
    gap: 12px;
}

.gap-y-12 {
    row-gap: 12px;
}

.gap-16 {
    gap: 16px;
}

.gap-20 {
    gap: 20px;
}

.gap-24 {
    gap: 24px;
}

.gap-x-30 {
    column-gap: 30px;
}

.gap-x-36 {
    column-gap: 36px;
}

.gap-30 {
    gap: 30px;
}

.gap-32 {
    gap: 32px;
}

.gap-36 {
    gap: 36px;
}

.h-100vh {
    height: 100vh;
}

.h-32 {
    height: 32px;
}

.h-150 {
    height: 150px;
}

.h-170 {
    height: 170px;
}

.h-200 {
    height: 200px;
}

.br-0 {
    border-radius: 0 !important;
}

.br-4 {
    border-radius: 4px !important;
}

.br-6 {
    border-radius: 6px;
}

.br-8 {
    border-radius: 8px;
}

.br-12 {
    border-radius: 12px !important;
}

.br-10 {
    border-radius: 0.625rem;
}

.br-20 {
    border-radius: 20px;
}

.br-26 {
    border-radius: 26px;
}

.br-30 {
    border-radius: 30px;
}

.br-50 {
    border-radius: 50px;
}

.br-top-left-12 {
    border-top-left-radius: 12px !important;
}

.br-bottom-left-12 {
    border-bottom-left-radius: 12px !important;
}

.br-top-right-12 {
    border-top-right-radius: 12px !important;
}

.br-bottom-right-12 {
    border-bottom-right-radius: 12px !important;
}

.br-top-left-6 {
    border-top-left-radius: 6px !important;
}

.br-bottom-left-6 {
    border-bottom-left-radius: 6px !important;
}

.br-top-right-6 {
    border-top-right-radius: 6px !important;
}

.br-bottom-right-6 {
    border-bottom-right-radius: 6px !important;
}


.br-bottom-2-dott {
    border-bottom: 2px dotted #E6E9EC;
}

/*common css*/
.h50 {
    height: 50px;
}

.h-48 {
    height: 48px;
}

.h35 {
    height: 35px;
}

.h30 {
    height: 30px;
}

.h20 {
    height: 20px;
}

.wh-20 {
    width: 20px;
    height: 20px;
}

.wh-25 {
    width: 25px;
    height: 25px;
}

.wh-32 {
    width: 32px !important;
    height: 32px !important;
}

.wh-36 {
    width: 36px;
    height: 36px;
}

.wh-60 {
    width: 60px;
    height: 60px;
}

.wh-65 {
    width: 65px;
    height: 65px;
}

.max-w-300 {
    max-width: 300px;
}

.h36 {
    height: 36px;
}

.h40 {
    height: 40px;
}

.mx-770 {
    max-width: 770px;
}

.mx-850 {
    max-width: 856px;
}

.w-500 {
    width: 500px;
}

.wp-100 {
    width: 100px;
}

.wp-125 {
    width: 125px;
}

.wp-130 {
    width: 130px;
}

.w-150 {
    width: 150px;
}

.w-550 {
    width: 550px;
}

.min-w-35 {
    min-width: 35px;
}

.min-89 {
    min-width: 89px !important;
}

.cursor-pointer {
    cursor: pointer;
}

.cursor-default {
    cursor: default !important;
}

.title-header {
    font-size: 1.5rem;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    color: #31456A;
}

.normal-text {
    font-size: 0.875rem;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    letter-spacing: 0.5px;
}

/*Color*/
.gray {
    color: #878787 !important;
}

.light-gray {
    color: #D5D6D9 !important;
}

.dark-gray {
    color: #3E3E3E !important;
}

.sky-blue {
    color: #CCF2FE;
}

.navy-blue {
    color: #31456A !important;
}

.light-blue-gray {
    color: #7888A2;
}

.white {
    color: #fff !important;
}

.light-blue {
    color: #00BEF9 !important;
}

.text-color {
    color: #00BEF9 !important;
}

.green {
    color: #26d9c6;
}

.light-green {
    color: #34D9C8;
}

.dark-green {
    color: #1BBFAF;
}

.light-red {
    color: #FA6960;
}

.yellow-10 {
    color: #EBB412;
}

.bg-white {
    background: #fff;
}

.bg-cyan {
    background: #00BEF9;
}

.bg-cyan-active.active {
    background: #00BEF9 !important;
}

.hover-bg-cyan:hover {
    background: #00ABE0;
}

.bg-surface-2 {
    background-color: #EAEFF5;
}

.bg-hover-surface-2:hover {
    background-color: #EAEFF5 !important;
}

.bg-yellow-10 {
    background: #FFF8E5;
}

.dark-red {
    color: #D33C48;
}

.bg-baby-blue {
    background: #E0F8FF;
}


.bg-neutral-grey {
    background: #F9FAFC;
}

.bg-disabled-1 {
    background: #e9ecef;
}

.br-color-default {
    border-color: #EBF2FB;
}

.br-1-old {
    border: 1px solid #EBF2FB !important;
}

.br-1-cyan {
    border: 1px solid #00BEF9;
}

.br-1-yellow {
    border-color: #FDC00F !important;
}


/*end color*/

/*font-size*/

.fs-8 {
    font-size: 8px;
}

.fs-9 {
    font-size: 0.563rem;
}

.fs-10 {
    font-size: 0.625rem;
}

.fs-11 {
    font-size: 0.6875rem;
}

.fs-12 {
    font-size: 0.75rem;
}

.fs-14 {
    font-size: 0.875rem;
}

.fs-13 {
    font-size: 0.8125rem;
}

.fs-15 {
    font-size: 0.9375rem;
}

.fs-16 {
    font-size: 1rem;
}

.fs-16-mini {
    font-size: 1rem;
}

.fs-17 {
    font-size: 1.0625rem;
}

.fs-18 {
    font-size: 1.125rem;
}

.fs-19 {
    font-size: 1.1875rem;
}

.fs-20 {
    font-size: 1.25rem;
}

.fs-20-mini {
    font-size: 1.25rem;
}

.fs-22 {
    font-size: 1.375rem;
}

.fs-24 {
    font-size: 1.5rem;
}

.fs-24-mini {
    font-size: 1.5rem;
}

.fs-25 {
    font-size: 1.563rem;
}

.fs-28 {
    font-size: 1.75rem;
}

.fs-30 {
    font-size: 1.875rem;
}

.fs-34 {
    font-size: 34px;
}

.fs-41 {
    font-size: 2.563rem;
}
/*end font-size*/

/*Margin bottom spacing*/
.cmb-100 {
    margin-bottom: 6.25rem;
}
.cmb-48 {
    margin-bottom: 48px;
}

.cmb-36 {
    margin-bottom: 36px;
}

.cmb-30 {
    margin-bottom: 30px;
}

.cmb-24 {
    margin-bottom: 24px;
}

.cmb-20 {
    margin-bottom: 20px;
}

.cmb-16 {
    margin-bottom: 16px;
}

.cmb-14 {
    margin-bottom: 14px;
}

.cmb-12 {
    margin-bottom: 12px;
}

.cmb-8 {
    margin-bottom: 8px;
}

.cmb-6 {
    margin-bottom: 6px;
}

.cmb-4 {
    margin-bottom: 4px;
}

.cmt-36 {
    margin-top: 36px;
}

.cmt-30 {
    margin-top: 30px;
}

.cmt-16 {
    margin-top: 16px;
}

.cmt-12 {
    margin-top: 12px;
}

.cmr-12 {
    margin-right: 12px;
}

.cmr-36 {
    margin-right: 36px;
}

/*padding customize*/
.cpl-20 {
    padding-left: 20px;
}

.cpr-20 {
    padding-right: 20px;
}

.cpx-8 {
    padding-left: 8px;
    padding-right: 8px;
}

.cpx-16 {
    padding-left: 16px;
    padding-right: 16px;
}

.cp-8 {
    padding: 8px;
}

.cp-16 {
    padding: 16px;
}

.cp-24 {
    padding: 24px;
}

.cp-36 {
    padding: 36px;
}

.cpb-16 {
    padding-bottom: 16px !important;
}

/* paddings and margins */

.py-6 {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

.py-8 {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.px-6 {
    padding-left: 6px !important;
    padding-right: 6px !important;
}

.px-8 {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

.pl-8 {
    padding-left: 8px !important;
}

.px-2px {
    padding-left: 2px !important;
    padding-right: 2px !important;
}

.pt-8 {
    padding-top: 0.5rem !important;
}

.pb-8 {
    padding-bottom: 0.5rem !important;
}

.py-10,
.p-10 {
    padding-top: 0.625rem !important;
    padding-bottom: 0.625rem !important;
}

.pb-10 {
    padding-bottom: 0.625rem !important;
}

.px-10,
.p-10 {
    padding-right: 0.625rem !important;
    padding-left: 0.625rem !important;
}

.py-12,
.p-12 {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}

.pt-12 {
    padding-top: .75rem !important;
}

.pb-12 {
    padding-bottom: .75rem !important;
}

.pl-12 {
    padding-left: 0.75rem !important;
}

.pr-12 {
    padding-right: 0.75rem !important;
}

.px-12,
.p-12 {
    padding-right: 0.75rem !important;
    padding-left: 0.75rem !important;
}

.px-15,
.pl-15 {
    padding-left: 15px !important;
}

.px-15,
.pr-15 {
    padding-right: 15px !important;
}


.pr-18,
.px-18 {
    padding-right: 1.125rem !important;
}

.pl-18,
.px-18 {
    padding-left: 1.125rem !important;
}

.py-18,
.pt-18 {
    padding-top: 1.125rem !important;
}

.py-18,
.pb-18 {
    padding-bottom: 1.125rem !important;
}

.pt-20,
.py-20,
.p-20 {
    padding-top: 1.25rem !important;
}

.pb-20,
.py-20,
.p-20 {
    padding-bottom: 1.25rem !important;
}

.pl-20,
.px-20,
.p-20 {
    padding-left: 1.25rem !important;
}

.pr-20,
.px-20,
.p-20 {
    padding-right: 1.25rem !important;
}

.pl-30,
.p-30,
.px-30 {
    padding-left: 1.875rem !important;
}

.pr-30,
.p-30,
.px-30 {
    padding-right: 1.875rem !important;
}

.px-32 {
    padding-right: 2rem !important;
    padding-left: 2rem !important;
}

.pt-30,
.p-30,
.py-30 {
    padding-top: 1.875rem !important;
}

.pb-30,
.p-30,
.py-30 {
    padding-bottom: 1.875rem !important;
}


.px-34,
.p-34 {
    padding-right: 2.125rem !important;
    padding-left: 2.125rem !important;
}

.py-34,
.p-34 {
    padding-top: 2.125rem !important;
    padding-bottom: 2.125rem !important;
}

.mr-6 {
    margin-right: 6px;
}

.mt-2px {
    margin-top: 2px;
}

.mt-8 {
    margin-top: 8px;
}

.mb-8 {
    margin-bottom: 8px;
}

.mt-80 {
    margin-top: 80px;
}

.mt-10,
.my-10,
.m-10 {
    margin-top: .625rem !important;
}

.mb-10,
.my-10,
.m-10 {
    margin-bottom: .625rem !important;
}

.mr-10,
.mx-10,
.m-10 {
    margin-right: .625rem !important;
}

.ml-10,
.mx-10,
.m-10 {
    margin-left: .625rem !important;
}

.mx-10,
.m-10 {
    margin-right: .625rem !important;
    margin-left: .625rem !important;
}

.mt-12,
.m-12,
.my-12 {
    margin-top: 0.75rem !important;
}

.mb-12,
.m-12,
.my-12 {
    margin-bottom: 0.75rem !important;
}

.mr-12,
.mx-12,
.m-12 {
    margin-right: 0.75rem !important;
}

.ml-12,
.mx-12,
.m-12 {
    margin-left: 0.75rem !important;
}

.mb-18,
.my-18 {
    margin-bottom: 1.125rem !important;
}

.mt-18,
.my-18 {
    margin-top: 1.125rem !important;
}

.mt-20,
.my-20,
.m-20 {
    margin-top: 1.25rem !important;
}

.mb-20,
.my-20,
.m-20 {
    margin-bottom: 1.25rem !important;
}

.ml-20,
.mx-20,
.m-20 {
    margin-left: 1.25rem !important;
}

.mr-20,
.mx-20,
.m-20 {
    margin-right: 1.25rem !important;
}

.mt-32,
.m-32,
.my-32 {
    margin-top: 2rem !important;
}

.mb-32,
.m-32,
.my-32 {
    margin-bottom: 2rem !important;
}

.ml-32,
.m-32,
.mx-32 {
    margin-left: 2rem !important;
}

.mr-32,
.m-32,
.mx-32 {
    margin-right: 2rem !important;
}

.mb-36 {
    margin-bottom: 2.25rem !important;
}

.mb-20,
.my-20 {
    margin-bottom: 1.25rem !important;
}

.mr-20 {
    margin-right: 1.25rem !important;
}

.ml-20 {
    margin-left: 1.25rem !important;
}



.fw-800 {
    font-weight: 800 !important;
}

.fw-700 {
    font-weight: 700 !important;
}

.fw-600 {
    font-weight: 600 !important;
}

.fw-500 {
    font-weight: 500 !important;
}

.fw-400 {
    font-weight: 400 !important;
}

.medium {
    font-weight: 500;
    font-family: 'Roboto',sans-serif;
}

.medium-400 {
    font-weight: 400;
    font-family: 'Roboto',sans-serif;
}

.regular {
    font-weight: 400;
    font-family: 'Roboto',sans-serif;
}

.bold {
    font-weight: 700;
    font-family: 'Roboto',sans-serif;
}

.border-bottom-1 {
    border-bottom: 1px solid #ededed !important;
}

.custom-control-input:checked ~ .custom-control-label::before {
    color: #fff;
    border-color: #00BEF9;
    background-color: #00BEF9;
}

.custom-control-input:selected ~ .custom-control-label::before {
    color: #fff;
    border-color: #00BEF9;
    background-color: #00BEF9;
}

.custom-control-label::before {
    width: 20px !important;
    height: 20px !important;
}

.custom-control-label::after {
    top: 0.0rem !important;
    left: -1.8rem !important;
    display: block !important;
    width: 30px !important;
    height: 30px !important;
}

.trade-checkbox input[type="checkbox"]:before {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    content: "\f096";
    opacity: 1 !important;
    margin-top: -25px;
    appearance: none;
    background: #fff;
}

.trade-checkbox input[type="checkbox"]:checked:before {
    content: "\f00c";
}

.trade-checkbox input[type="checkbox"] {
    font-size: 1.375rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.checkbox-label {
    color: #878787;
    font-size: 0.9375rem;
    font-family: var(--roboto);
    font-weight: 400;
    padding-top: 4px;
    padding-left: 5px;
}

.form-radio {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    padding-right: 25px;
}

.radio-button {
    opacity: 0;
    position: absolute;
    z-index: 1;
    width: 2.188rem;
    height: 2.188rem;
    cursor: pointer;
}

.form-radio input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}

.form-radio input {
    font-size: 1rem;
    line-height: 1.5;
    padding: 11px 23px;
    border: 1px solid #D5D6D9;
    border-radius: 0;
    outline: 0;
    background-color: transparent;
}

.radio-customize {
    position: relative;
    display: inline-block;
    width: 35px;
    height: 35px;
    margin-right: 12px;
    vertical-align: middle;
    background-color: inherit;
    color: #00BEF9;
    border: 2px solid #D5D6D9;
    border-radius: 24px !important;
}

.radio-button:checked + .radio-customize:after {
    content: "";
    display: block;
    position: absolute;
    top: 3px;
    left: 3px;
    width: 25px;
    height: 25px;
    background-color: #00BEF9;
    border-radius: 30px;
}

.radio-button:selected + .radio-customize:after {
    content: "";
    display: block;
    position: absolute;
    top: 3px;
    left: 3px;
    width: 30px;
    height: 30px;
    background-color: #00BEF9;
    border-radius: 30px;
}

.radio-button:checked + .radio-customize {
    border-color: #00BEF9;
}

.radio-button:selected + .radio-customize {
    border-color: #00BEF9;
}

.radio-customize {
    transform: scale(0.75);
}

    .radio-customize + label {
        color: #3E3E3E;
        font-size: 0.9375rem;
        font-family: var(--roboto);
        /*font-weight: 500;*/
    }


.object-fix-contain {
    object-fit: contain;
}

/*background color*/

bg-white {
    background: #fff;
}

a:hover {
    text-decoration: none !important;
}

input:focus-visible {
    outline: transparent !important;
}

.investa-btn-blue {
    background: #00BEF9;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    padding: 10px 20px;
    border-style: none;
    font-weight: 500;
}

    .investa-btn-blue:hover, .investa-btn:focus {
        background: #0C91CF;
        color: #fff;
    }
    .investa-btn-blue.disabled, .investa-btn:disabled {
        cursor: not-allowed !important;
    }

.investa-btn-regular {
    padding: 10px 20px;
    background: #F2F3F7;
    color: #878787;
    font-family: var(--roboto);
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    border-style: none;
    font-weight: 500;
}

    .investa-btn-regular:hover, .investa-btn-regular:focus {
        background: #D5D6D9 !important;
        color: #3E3E3E !important;
        text-decoration: none !important;
    }

    .investa-btn-regular:disabled {
        background: #D5D6D9 !important;
        color: #878787 !important;
        font-family: var(--roboto) !important;
        border-radius: 6px !important;
        text-decoration: none !important;
        cursor: no-drop !important;
        user-select: none !important;
        font-weight: 500 !important;
        border-style: none !important;
    }

        .investa-btn-regular:disabled:hover {
            background: #D5D6D9 !important;
            color: #878787 !important;
            transition: none !important;
            transform: none !important;
        }

.investa-btn-dark {
    color: #3E3E3E;
    background: #E6E9EC;
    font-family: var(--roboto) !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    user-select: none !important;
    font-weight: 700 !important;
    border-style: none !important;
}

.investa-btn-light-blue {
    background: #E5FAFF;
    color: #20BEF9;
    font-family: var(--roboto);
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    padding: 10px 20px;
    border-style: none;
}

/*.investa-btn-light-blue:disabled:hover {
        background: #D5D6D9 !important;
        color: #878787 !important;
        transition: none !important;
        transform: none !important;
    }*/

.investa-outlined-red {
    border: 1px solid #FA6960;
    color: #FA6960;
    font-family: var(--roboto);
    border-radius: 6px;
    padding: 10px 20px;
    background: transparent;
    cursor: pointer;
}

    .investa-outlined-red:hover {
        background: #D33C48 !important;
        color: #fff !important;
        text-decoration: none;
    }

.investa-outlined-btn {
    border: 1px solid #00BEF9 !important;
    color: #00BEF9;
    font-family: var(--roboto);
    border-radius: 6px;
    padding: 10px 20px;
    background: transparent;
    cursor: pointer;
}

    .investa-outlined-btn:hover {
        background: #0C91CF !important;
        color: #fff !important;
        text-decoration: none;
    }

    .investa-outlined-btn:disabled {
        background: #D5D6D9 !important;
        color: #878787 !important;
        font-family: var(--roboto) !important;
        border-radius: 6px !important;
        text-decoration: none !important;
        cursor: no-drop !important;
        user-select: none !important;
        font-weight: 500 !important;
        border-style: none !important;
    }

        .investa-outlined-btn:disabled:hover {
            background: #D5D6D9 !important;
            color: #878787 !important;
            transition: none !important;
            transform: none !important;
        }

    .investa-outlined-btn a {
        color: #00BEF9;
    }

    .investa-outlined-btn:hover a {
        color: #fff;
    }

    .investa-outlined-regular {
        border: 1px solid #E6E9EC;
        color: #3E3E3E;
        font-family: var(--roboto);
        border-radius: 6px;
        padding: 10px 20px;
        background: transparent;
        cursor: pointer;
    }

    .investa-outlined-regular:hover {
        color: #00BEF9 !important;
        background: #E6E9EC !important;
        text-decoration: none;
    }

    .investa-outlined-regular:disabled {
        background: #D5D6D9 !important;
        color: #878787 !important;
        font-family: var(--roboto) !important;
        border-radius: 6px !important;
        text-decoration: none !important;
        cursor: no-drop !important;
        user-select: none !important;
        font-weight: 500 !important;
        border-style: none !important;
    }

        .investa-outlined-regular:disabled:hover {
            background: #D5D6D9 !important;
            color: #878787 !important;
            transition: none !important;
            transform: none !important;
        }

.investa-btn {
    background: #00BEF9;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    padding: 10px 20px;
    border-style: none;
    font-weight: 500;
}

    .investa-btn:hover, .investa-btn:focus {
        background: #0C91CF;
        color: #fff;
    }

    .investa-btn.disabled, .investa-btn:disabled {
        cursor: not-allowed !important;
    }

.investa-btn-disabled {
    background: #D5D6D9;
    color: #878787;
    font-family: var(--roboto);
    border-radius: 6px;
    text-decoration: none;
    cursor: no-drop;
    user-select: none;
    padding: 10px 20px;
    font-weight: 500;
    border-style: none;
}

    .investa-btn-disabled:hover {
        background: #D5D6D9 !important;
        color: #878787 !important;
    }

.investa-btn-red {
    background: #FA6960;
    color: #fff;
    font-family: var(--roboto);
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    padding: 10px 20px;
    border-style: none;
    font-weight: 500;
}

    .investa-btn-red:hover {
        color: #fff;
        background: #c82333;
        text-decoration: none;
    }

    .investa-btn-red:disabled {
        background: #D5D6D9 !important;
        color: #878787 !important;
        font-family: var(--roboto) !important;
        text-decoration: none !important;
        cursor: no-drop !important;
        user-select: none !important;
        font-weight: 500 !important;
        border-style: none !important;
    }

        .investa-btn-red:disabled:hover {
            background: #D5D6D9 !important;
            color: #878787 !important;
            transition: none !important;
            transform: none !important;
        }

.investa-btn-green {
    background: #34D9C8;
    color: #fff;
    font-family: var(--roboto);
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    cursor: pointer;
    padding: 10px 20px;
    border-style: none;
    font-weight: 500;
}

    .investa-btn-green:hover {
        color: #fff;
        background: #0a9787;
        text-decoration: none;
    }

    .investa-btn-green:disabled {
        background: #D5D6D9 !important;
        color: #878787 !important;
        font-family: var(--roboto) !important;
        text-decoration: none !important;
        cursor: no-drop !important;
        user-select: none !important;
        font-weight: 500 !important;
        border-style: none !important;
    }

        .investa-btn-green:disabled:hover {
            background: #D5D6D9 !important;
            color: #878787 !important;
            transition: none !important;
            transform: none !important;
        }

.investa-badge {
    padding: 0.5rem;
    letter-spacing: 3px;
}

.investa-bg-light-green {
    background-color: #34D9C8;
    color: #fff;
}

.investa-bg-dark-green {
    background-color: #1BBFAF;
    color: #fff;
}

.investa-card-header {
    padding: 0.5rem;
    letter-spacing: 3px;
    background-color: #34D9C8;
    color: #fff;
}

.pointer {
    cursor: pointer;
}

.border-top-lightgray {
    border-top: 1px solid rgb(230, 233, 236) !important;
    margin-top: -15px;
}

.side-nested-tab {
    background: #fff;
}

    .side-nested-tab ul {
        background-color: transparent;
        cursor: pointer !important;
        margin-bottom: 0.5px;
    }

        .side-nested-tab ul li {
            background: #fff;
        }

            .side-nested-tab ul li a {
                color: #878787 !important;
                font-weight: 400 !important;
                border: 0px !important;
                padding: 4px 5px 4px 5px !important;
            }

                .side-nested-tab ul li a:not(.active):hover {
                    color: #878787 !important;
                    font-weight: 500 !important;
                }

                .side-nested-tab ul li a.active {
                    font-weight: 500 !important;
                    color: #00BEF9 !important;
                    border-bottom: solid #00BEF9 !important;
                }

.side-nested-tab-pills ul li a {
    color: #878787 !important;
    font-weight: 400 !important;
    border: 0px !important;
    padding: 2px 5px 2px 5px !important;
}

/*    .side-nested-tab-pills ul li a:not(.active):hover {
        color: #878787 !important;
        font-weight: 500 !important;
    }*/

    .side-nested-tab-pills ul li a.active {
        font-weight: 500 !important;
        color: #fff !important;
        background: #00BEF9 !important;
    }

.hover-cursor-gray:hover {
    background: #F2F3F7;
    cursor: pointer;
}

.middle-line {
    width: 100%;
    text-align: center;
    border-bottom: 1px dashed #dee2e6;
    line-height: 0.1em;
    margin: 10px 0 10px;
    padding-left: 15px;
    padding-right: 15px;
}

    .middle-line span {
        background: #fff;
        padding: 0 5px;
    }

.investa-btngreen {
    background: #00D0FA;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    border-radius: 0.375rem;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    cursor: pointer;
    padding: 0.625rem 1.25rem;
    border-style: none;
    font-weight: var(--medium);
}

    .investa-btngreen:hover {
        color: #fff;
        background: #00a8ca;
    }


.no-user-select {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
}


.stock-green {
    background: #1BBFAF;
    border-radius: 8px;
    color: #fff;
}

.stock-red {
    background: #FF6861;
    border-radius: 8px;
    color: #fff;
}

.even-row {
    background: #F9FAFC !important;
}


/*animation */

/*revamp component*/

/* Text Colors */
.text-white {
    color: #fff;
}

.text-white-important {
    color: #fff !important;
}

.text-white-1 {
    color: #EBF2FB !important;
}

.text-cyan {
    color: #00BEF9 !important;
}

.text-primary-white {
    color: #F7F9F9;
}


.text-cyan-light {
    color: #A3C7E8;
}

.text-navy {
    color: #31456A;
}

.text-navy-light,
.text-navy-light-whover {
    color: #7888A2;
}

    .text-navy-light-whover:hover {
        color: #31456A;
    }

.text-yellow {
    color: #FDC00F;
}

.text-yellow-10 {
    color: #EBB412;
}


.text-light-yellow {
    color: #FFBE00;
}

.text-orange {
    color: #FEB247 !important;
}

.text-purple {
    color: #9087FF;
}

.text-lavender {
    color: #D4CFFF
}

.text-blue {
    color: #2B9CFC;
}

.text-dark-blue {
    color: #3936DB;
}

.text-red {
    color: #FF3729 !important;
}

.text-green {
    color: #34D9C8 !important;
}

.text-red-2 {
    color: #FA6A60 !important;
}

.text-red-3 {
    color: #F4594E !important;
}

.text-green-2 {
    color: #42B8A4 !important;
}

.text-green-light {
    color: #62E6AC;
}

.text-green-info, .text-green-3 {
    color: #21A690 !important;
}

.text-dark-green {
    color: #71CA25;
}

.text-semantic-green {
    color: #42B8A4 !important;
}

.text-gray {
    color: #DDE7F3;
}

.text-gray-light {
    color: #CFDCE8;
}

.text-mid-gray {
    color: #C0C5D0;
}

.text-gray-dark {
    color: #959595;
}

.text-gray-black {
    color: #3E3E3E !important;
}

.text-lighter-black {
    color: #525252;
}

.text-baby-gray {
    color: #7E7E7E;
}

.text-grey {
    color: #AFAFAF;
}

.text-super-black {
    color: #151515;
}

.invg-matte-black {
    color: #3E3E3E;
}

.text-super-lighter-gray {
    color: #D6DAE3;
}

.text-gray-muted {
    color: #878787;
}

.text-spacing {
    letter-spacing: 2px;
}

.text-spacing-1 {
    letter-spacing: 1px;
}

.text-hover-cyan:hover {
    color: #00bef9 !important;
}

.text-bg-hover-cyan:hover {
    color: #00bef9 !important;
    background: #D6F5FF !important;
}

.text-semantic {
    color: #856412 !important;
}

.text-semantic-orange {
    color: #F0C22C !important;
}

.text-lighter-blue {
    color: #04B4EB;
}

.text-semantic-gray {
    color: #ABBCCC !important;
}

.text-blue-gradient {
    background: linear-gradient(180deg, #39C2EA 0%, #1D57FD 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-invg-gradient {
    background: linear-gradient(180deg, #39C2EA 0%, #1D57FD 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-orange-gradient {
    background: linear-gradient(279.26deg, #ED7D5F 11.54%, #F39444 43.25%, #FDC00F 92.83%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}



.text-muted-blue {
    color: #2D3342 !important
}


.text-underline,
a.text-underline {
    text-decoration: underline !important;
}

.text-underline-hover-remove:hover {
    text-decoration: none !important;
}

.text-hover-underline:hover {
    text-decoration: underline !important;
    text-decoration-color: inherit;
}

.text-decoration-none {
    text-decoration: none;
}

.line-break {
    line-break: anywhere;
}

.border-hover-cyan:hover {
    border-color: #00bef9 !important;
}


.break-word {
    word-break: break-word;
}

.crypto-break-word {
    word-break: break-word;
    max-width: 61px;
    text-align: left;
}

.box-shadow-0 {
    box-shadow: none !important;
}

.box-shadow-light-card {
    box-shadow: 0px 0px 120px rgba(0, 0, 0, 0.04);
}

/* Font Sizes */

.fs-1 {
    font-size: 0.063rem;
}

.fs-4 {
    font-size: 0.25rem;
}

.fs-6 {
    font-size: 0.375rem;
}

.fs-8 {
    font-size: .5rem;
}

.fs-10 {
    font-size: 0.625rem;
}

.fs-11 {
    font-size: 0.69rem;
}

.fs-12 {
    font-size: 0.75rem;
}

.fs-13 {
    font-size: 13px;
}

.fs-14 {
    font-size: 0.875rem;
}

.fs-14-mini {
    font-size: 0.875rem;
}

.fs-15 {
    font-size: .94rem;
}

.fs-16 {
    font-size: 1rem;
}

.fs-16-mini {
    font-size: 1rem;
}

.fs-18 {
    font-size: 1.125rem;
}

.fs-18-mini {
    font-size: 1.125rem;
}

.fs-20 {
    font-size: 1.25rem;
}

.fs-22 {
    font-size: 1.375rem;
}

.fs-24 {
    font-size: 1.5rem;
}

.fs-24-mini {
    font-size: 1.5rem;
}

.fs-26 {
    font-size: 26px;
}

.fs-28 {
    font-size: 1.75rem;
}

.fs-30 {
    font-size: 1.875rem;
}

.fs-32 {
    font-size: 2rem;
}

.fs-36 {
    font-size: 2.25rem;
}

.fs-40 {
    font-size: 2.5rem;
}

.fs-44 {
    font-size: 2.75rem;
}

.fs-45 {
    font-size: 2.8125rem;
}

.fs-50 {
    font-size: 3.125rem;
}

.fs-60 {
    font-size: 4rem;
}

.fw-300 {
    font-weight: 300;
}

/* Font Weights */

.fw-400 {
    font-weight: 400 !important;
}

.fw-500 {
    font-weight: 500 !important;
}

.fw-600 {
    font-weight: 600 !important;
}

.fw-700 {
    font-weight: 700 !important;
}

.fw-900 {
    font-weight: 900 !important;
}

.fw-bold {
    font-weight: bold;
}

/* line-heights */

.line-height-1 {
    line-height: 1px !important;
}

.line-height-5 {
    line-height: 5px !important;
}

.line-height-10 {
    line-height: 10px !important;
}

.line-height-20 {
    line-height: 20px !important;
}

.line-height-normal {
    line-height: normal !important;
}

.leading-tighter {
    line-height: 1.1;
}

.leading-tight {
    line-height: 1.25;
}

.leading-snug {
    line-height: 1.375;
}

.leading-normal {
    line-height: 1.5;
}

.leading-relaxed {
    line-height: 1.625;
}

.leading-loose {
    line-height: 2;
}

.leading-none {
    line-height: 1;
}

.leading-20 {
    line-height: 1.25rem;
}

.tracking-tightest {
    letter-spacing: -0.075em;
}

.tracking-tighter {
    letter-spacing: -0.05em;
}

.tracking-normal {
    letter-spacing: 0;
}

.tracking-wider {
    letter-spacing: 0.05em;
}

.tracking-widest {
    letter-spacing: 0.25em;
}



.br-4 {
    border-radius: .25rem !important;
}
/*Border radius */
.br-0 {
    border-radius: 0 !important;
}

.br-4 {
    border-radius: .25rem;
}

.br-6 {
    border-radius: 0.375rem;
}

.br-8 {
    border-radius: 0.5rem !important;
}

.br-10 {
    border-radius: 0.625rem;
}

.br-11 {
    border-radius: 0.69rem;
}

.br-12 {
    border-radius: 0.75rem !important;
}

.br-14 {
    border-radius: 0.875rem;
}

.br-16 {
    border-radius: 1rem !important;
}

.br-18 {
    border-radius: 1.125rem;
}

.br-20 {
    border-radius: 1.25rem;
}

.br-24 {
    border-radius: 1.5rem !important;
}

.br-30 {
    border-radius: 1.875rem;
}

.br-50 {
    border-radius: 3.125rem;
}

.br-60 {
    border-radius: 3.75rem;
}

.border-1 {
    border: 1px solid #F2F6FA;
}

.border-1-lighter {
    border: 1px solid #E6E9EC
}

.border-1-yellow {
    border: 1px solid #FFBE00;
}

.border-1-cyan {
    border: 1px solid #00BEF9 !important;
}

.border-1-red {
    border: 1px solid #F4594E;
}

.border-1-green {
    border: 1px solid #21A690;
}

.border-1-gray {
    border: 1px solid #E0E6EF;
}

.border-1-gray-01 {
    border: 1px solid #D4E0EF;
}

.border-top-1 {
    border-top: 1px solid #F2F6FA;
}

.border-bottom-1 {
    border-bottom: 1px solid #F2F6FA;
}

.border-left-0 {
    border-left: 0 !important;
}

.border-right-0 {
    border-right: 0 !important;
}

.border-left-1 {
    border-left: 1px solid #F2F6FA;
}

.border-right-1 {
    border-right: 1px solid #F2F6FA;
}



.border-top-1-default {
    border-top: 1px solid #DDE7F3;
}

.border-bottom-1-default {
    border-bottom: 1px solid #DDE7F3;
}

.border-left-1-default {
    border-left: 1px solid #DDE7F3;
}

.border-right-1-default {
    border-right: 1px solid #DDE7F3;
}



.br-top-right-4 {
    border-top-right-radius: 0.25rem !important;
}

.br-bottom-right-4 {
    border-bottom-right-radius: 0.25rem !important;
}

.br-top-left-12 {
    border-top-left-radius: 12px !important;
}

.br-bottom-left-12 {
    border-bottom-left-radius: 12px !important;
}

.br-top-right-12 {
    border-top-right-radius: 12px !important;
}

.br-bottom-right-12 {
    border-bottom-right-radius: 12px !important;
}


.br-top-right-0 {
    border-top-right-radius: 0 !important;
}

.br-bottom-right-0 {
    border-bottom-right-radius: 0 !important;
}

.br-top-left-0 {
    border-top-left-radius: 0 !important;
}

.br-bottom-left-0 {
    border-bottom-left-radius: 0 !important;
}

.br-round {
    border-radius: 50%;
}

.br-top-right-o {
    border-top-right-radius: 0 !important;
}

.br-bottom-right-0 {
    border-bottom-right-radius: 0 !important;
}

.br-none {
    border: none;
}

.border-default {
    border: 1px solid #F2F6FA;
}

.br-bottom-1px {
    border-bottom: 1px solid #F2F6FA;
}

.br-left-1 {
    border-left: 1px solid #EBF2FB;
}

.br-right-1 {
    border-right: 1px solid #EBF2FB;
}

.br-top-1 {
    border-top: 1px solid #EBF2FB;
}

.br-bottom-1 {
    border-bottom: 1px solid #EBF2FB;
}

.br-color-default {
    border-color: #EBF2FB;
}

.border-color-neutral {
    border-color: #878787 !important;
}

.border-color-red {
    border-color: #FA6A60 !important;
}

.border-color-green {
    border-color: #42B8A4 !important;
}

.border-dashed {
    border: 1px dashed rgba(135, 135, 135, 0.10);
}

.border-top-red-2 {
    border-top: 2px solid #F4594E !important;
}

.border-top-green-2 {
    border-top: 2px solid #21A690 !important;
}

.border-top-gray-2 {
    border-top: 2px solid #878787 !important;
}

/* Background Colors */
.bg-gradient-blue {
    background: rgba(0,40,239,1);
    background: -moz-linear-gradient(270deg, #39C2EA, #1D57FD,#39C2EA, #1D57FD);
    background: -webkit-linear-gradient(270deg, #39C2EA, #39C2EA, #1D57FD, #1D57FD);
    background: linear-gradient(270deg, #39C2EA, #1D57FD,#39C2EA, #1D57FD);
    background-size: 300%;
    transition: .4s ease;
    color: #fff;
    border: none;
}

.bg-gradient-transparent {
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.3));
}

.bg-blue-gradient {
    color: #FFF;
    background: rgba(0,40,239,1);
    background: linear-gradient(270deg, #39C2EA, #1D57FD);
}

.bg-orange-gradient {
    background: #FDC00F;
    color: #FFF;
    background: linear-gradient(280deg, #ED7D5F, #F39444, #FDC00F);
}

.bg-white-black {
    background: #fff !important;
}

.bg-orange-400 {
    background: #F39444;
    color: #fff;
}

.bg-hover-gradient-orange {
    position: relative;
    overflow: hidden;
}

    .bg-hover-gradient-orange > span {
        position: relative;
    }

    .bg-hover-gradient-orange::before {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        opacity: 0;
        transition: opacity .2s ease-in-out;
    }

    .bg-hover-gradient-orange:hover::before {
        opacity: 1;
        background: linear-gradient(279deg, #FDC00F 11.54%, #F39444 49.75%, #ED7D5F 92.83%);
    }

    .bg-hover-gradient-orange:hover > .text-main {
        color: #fff !important;
    }

.border-hover-transparent:hover {
    border-color: transparent !important;
}


.bg-white {
    background: #ffffff !important;
}

.bg-white-2 {
    background-color: rgba(255, 255, 255, 0.02);
}

.bg-neutral {
    background: #EBF2FB !important;
}

.bg-primary-white {
    background: #F7F9F9 !important;
}

.bg-whitesmoke {
    background: #f5f5f5 !important;
}

.bg-semiwhite {
    background-color: #f5f5f5 !important;
}

.bg-transparent {
    background: transparent !important;
}

.bg-cyan {
    background: #00BEF9;
}

.bg-cyan-10 {
    background: rgba(0, 190, 249, 0.10);
}

.bg-blue {
    background-color: #2B9CFC;
}

.bg-accent-blue {
    background-color: #0D98D9;
}

.bg-cyan-lighter {
    background: #D6F5FF;
}

.bg-cyan-light {
    background: #A3C7E8;
}

.bg-cyan-op-20 {
    background: rgba(0, 190, 249, 0.2);
}

.bg-cyan-20 {
    background: #00AFE5;
}

.bg-navy {
    background: #31456A;
}

.bg-navy-light {
    background: #7888A2;
}

.bg-yellow {
    background: #FDC00F;
}

.bg-red {
    background: #FA6960;
}

.bg-light-red-1 {
    background: #FFEBEA;
}

.bg-red-2 {
    background: #FF3729;
}

.bg-light-red-10 {
    background: #FFEBEA;
}

.bg-red-2 {
    background: #FA6A60;
}

.bg-red-10 {
    background: #F4594E1A;
}

.bg-neutral-info {
    background-color: rgba(135, 135, 135, 0.10);
    color: #878787;
}

    .bg-neutral-info > * {
        color: #878787;
    }

.bg-red-info {
    background-color: rgba(250, 106, 96, 0.2) !important;
    color: #FA6A60 !important;
}

    .bg-red-info.darker {
        background-color: rgba(250, 106, 96, 0.14) !important;
    }

    .bg-red-info > * {
        color: #FA6A60 !important;
    }


.bg-green-info {
    background-color: rgba(66, 184, 164, 0.1) !important;
    color: #21A690 !important;
}

    .bg-green-info.darker {
        background: rgba(66, 184, 164, 0.1) !important;
    }

    .bg-green-info > * {
        color: #21A690 !important;
    }

.bg-light-green-1 {
    background: #E9F6F4;
}

.bg-light-green-10 {
    background: #E9F6F4;
}

.bg-light-gray-1 {
    background: #E0E6EF;
}


.bg-green-01 {
    background: #21A690;
}

.bg-ligther-green {
    background: #4df06b1a;
}

.bg-transparent-green {
    background-color: rgba(66, 184, 164, 0.2);
}


.bg-transparent-red {
    background-color: rgba(250, 106, 96, 0.2);
}

.bg-red-light {
    background: #FFEFEE;
}

.bg-green {
    background: #34D9C8;
}

.bg-green-2 {
    background: #42B8A4;
}

.bg-green-light {
    background: #E5F9F7;
}

.bg-baby-gray {
    background: #F8F9FC;
}

.bg-neutral-grey {
    background: #F9FAFC;
}

.bg-hover-neutral-grey:hover {
    background-color: #F9FAFC;
}

.bg-gray,
.bg-color-gray {
    background: #DDE7F3 !important;
}

.bg-pearl-blue {
    background-color: #F2F6FA !important;
}

.bg-floor {
    background-color: #F7FDFF !important;
}

.bg-gradient {
    background-image: linear-gradient(to right, #FDC00F 0%, #FA6960 51%, #fdc00f 100%) !important;
}

.bg-gradient-reverse {
    background-image: linear-gradient(to right, #FA6960 0%, #FDC00F 51%, #FA6960 100%) !important;
}


.bg-radial-gradient {
    /*    background: rgb(98,235,236);
    background: radial-gradient(circle, #62EBEC 0%, #00BEF9 76%, #37A1FD 100%);*/
    background: rgb(51,213,243);
    background: -moz-radial-gradient(circle, rgba(51,213,243,1) 0%, rgba(0,190,249,1) 75%, rgba(55,161,253,1) 100%);
    background: -webkit-radial-gradient(circle, rgba(51,213,243,1) 0%, rgba(0,190,249,1) 75%, rgba(55,161,253,1) 100%);
    background: radial-gradient(circle, rgba(51,213,243,1) 0%, rgba(0,190,249,1) 75%, rgba(55,161,253,1) 100%);
}


.bg-cyan-outline,
.bg-outlined-cyan {
    background: #D6F5FF;
    border: 1px solid #00bef9;
}

.bg-outlined-red {
    background: #FFEFEE;
    border: 1px solid #FA6960;
}

.bg-outlined-navy {
    background: #FFEFEE;
    border: 1px solid #31456A;
}

.bg-semantic {
    background: #FFFBCC;
}

.bg-semantic-orange {
    background: #F0C22C;
}

.bg-semantic-green {
    background: #00BFAC;
}

.bg-maroon {
    background: #944a00 !important;
}

.bg-orange {
    background-color: #FBB853;
}

.bg-violet {
    background-color: #9990FF;
}

.bg-toggle-basic:hover,
.bg-toggle-basic.active {
    background-color: #EBF2FB;
}

.bg-default-surface-2 {
    background: #1C2336;
}

    .bg-default-surface-2:hover {
        background: #2d3750;
    }

.bg-binance {
    background: #F5F5F5;
}

    .bg-binance:hover {
        background: #EBEBEB;
    }

.bg-surface-3 {
    background-color: #E0E6EF;
}

.bg-surface-4 {
    background: #ECFAFF;
}

.bg-purple {
    background-color: #985CFD;
}

.bg-dark-orange {
    background-color: #F37B30;
}

.bg-light-green {
    background-color: #55BE59;
}

.bg-darker-blue {
    background-color: #2A77FD;
}

.bg-neon-blue {
    background-color: #65CAE9;
}

.bg-surface-6 {
    background: #171F33;
}

.bg-surface-7 {
    background: #2D3342;
}

.bg-gradient-transparent-white {
    background: transparent !important;
    background-image: linear-gradient(to bottom, rgba( 255, 255, 255,0), #fff) !important
}

.bg-darker-yellow {
    background: #FFBE00;
}

.bg-hover-light-1:hover {
    background: #F9FAFC !important;
}

.bg-yellow-10 {
    background: #FFF8E5;
}


.bg-secondary-10 {
    background: rgba(135, 135, 135, 0.10);
}

.bg-aqua {
    background: #E6F9FE;
}
/* paddings and margins */

.py-6 {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

.py-8 {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.px-6 {
    padding-left: 6px !important;
    padding-right: 6px !important;
}

.px-8 {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

.pl-8 {
    padding-left: 8px !important;
}

.px-2px {
    padding-left: 2px !important;
    padding-right: 2px !important;
}

.pt-8 {
    padding-top: 0.5rem !important;
}

.pb-8 {
    padding-bottom: 0.5rem !important;
}

.py-10,
.p-10 {
    padding-top: 0.625rem !important;
    padding-bottom: 0.625rem !important;
}

.pb-10 {
    padding-bottom: 0.625rem !important;
}

.px-10,
.p-10 {
    padding-right: 0.625rem !important;
    padding-left: 0.625rem !important;
}

.py-12,
.p-12 {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}

.pt-12 {
    padding-top: .75rem !important;
}

.pb-12 {
    padding-bottom: .75rem !important;
}

.pl-12 {
    padding-left: 0.75rem !important;
}

.pr-12 {
    padding-right: 0.75rem !important;
}

.px-12,
.p-12 {
    padding-right: 0.75rem !important;
    padding-left: 0.75rem !important;
}

.px-15,
.pl-15 {
    padding-left: 15px !important;
}

.px-15,
.pr-15 {
    padding-right: 15px !important;
}


.pr-18,
.px-18 {
    padding-right: 1.125rem !important;
}

.pl-18,
.px-18 {
    padding-left: 1.125rem !important;
}

.py-18,
.pt-18 {
    padding-top: 1.125rem !important;
}

.py-18,
.pb-18 {
    padding-bottom: 1.125rem !important;
}

.pt-20,
.py-20,
.p-20 {
    padding-top: 1.25rem !important;
}

.pb-20,
.py-20,
.p-20 {
    padding-bottom: 1.25rem !important;
}

.pl-20,
.px-20,
.p-20 {
    padding-left: 1.25rem !important;
}

.pr-20,
.px-20,
.p-20 {
    padding-right: 1.25rem !important;
}

.pl-30,
.p-30,
.px-30 {
    padding-left: 1.875rem !important;
}

.pr-30,
.p-30,
.px-30 {
    padding-right: 1.875rem !important;
}

.px-32 {
    padding-right: 2rem !important;
    padding-left: 2rem !important;
}

.pt-30,
.p-30,
.py-30 {
    padding-top: 1.875rem !important;
}

.pb-30,
.p-30,
.py-30 {
    padding-bottom: 1.875rem !important;
}


.px-34,
.p-34 {
    padding-right: 2.125rem !important;
    padding-left: 2.125rem !important;
}

.py-34,
.p-34 {
    padding-top: 2.125rem !important;
    padding-bottom: 2.125rem !important;
}

.mr-6 {
    margin-right: 6px;
}

.mt-2px {
    margin-top: 2px;
}

.mt-8 {
    margin-top: 8px;
}

.mb-8 {
    margin-bottom: 8px;
}

.mt-80 {
    margin-top: 80px;
}

.mt-10,
.my-10,
.m-10 {
    margin-top: .625rem !important;
}

.mb-10,
.my-10,
.m-10 {
    margin-bottom: .625rem !important;
}

.mr-10,
.mx-10,
.m-10 {
    margin-right: .625rem !important;
}

.ml-10,
.mx-10,
.m-10 {
    margin-left: .625rem !important;
}

.mx-10,
.m-10 {
    margin-right: .625rem !important;
    margin-left: .625rem !important;
}

.mt-12,
.m-12,
.my-12 {
    margin-top: 0.75rem !important;
}

.mb-12,
.m-12,
.my-12 {
    margin-bottom: 0.75rem !important;
}

.mr-12,
.mx-12,
.m-12 {
    margin-right: 0.75rem !important;
}

.ml-12,
.mx-12,
.m-12 {
    margin-left: 0.75rem !important;
}

.mb-18,
.my-18 {
    margin-bottom: 1.125rem !important;
}

.mt-18,
.my-18 {
    margin-top: 1.125rem !important;
}

.mt-20,
.my-20,
.m-20 {
    margin-top: 1.25rem !important;
}

.mb-20,
.my-20,
.m-20 {
    margin-bottom: 1.25rem !important;
}

.ml-20,
.mx-20,
.m-20 {
    margin-left: 1.25rem !important;
}

.mr-20,
.mx-20,
.m-20 {
    margin-right: 1.25rem !important;
}

.mt-32,
.m-32,
.my-32 {
    margin-top: 2rem !important;
}

.mb-32,
.m-32,
.my-32 {
    margin-bottom: 2rem !important;
}

.ml-32,
.m-32,
.mx-32 {
    margin-left: 2rem !important;
}

.mr-32,
.m-32,
.mx-32 {
    margin-right: 2rem !important;
}

.mb-36 {
    margin-bottom: 2.25rem !important;
}

.mb-20,
.my-20 {
    margin-bottom: 1.25rem !important;
}

.mr-20 {
    margin-right: 1.25rem !important;
}

.ml-20 {
    margin-left: 1.25rem !important;
}


.mt-negative-15 {
    margin-top: -15px;
}

.mt-negative-8 {
    margin-top: -8px;
}

.mb-negative-8 {
    margin-bottom: -8px;
}

.mt-negative-4 {
    margin-top: -4px;
}

.m-center {
    margin: 0 auto;
}


.mb-100 {
    margin-bottom: 100px;
}
/* Negative Margins */
.-mx-10 {
    margin-right: -10px;
    margin-left: -10px;
}

.-mt-16 {
    margin-top: -1rem;
}

/*top left right bottom*/
.top-0,
.top-left-0,
.top-right-0 {
    top: 0;
}

.top-100 {
    top: 100%;
}

.bottom-100 {
    bottom: 100%;
}

.bottom-0,
.bottom-right-0,
.bottom-left-0 {
    bottom: 0;
}

.left-0,
.top-left-0,
.bottom-left-0 {
    left: 0;
}

.right-0,
.top-right-0,
.bottom-right-0 {
    right: 0;
}

.right-50 {
    right: 50%;
}

.resize-none {
    resize: none;
}
/*z-index class*/
.zindex-1 {
    z-index: 1;
}

.z-10 {
    z-index: 10;
}

.z-100 {
    z-index: 100;
}

.zindex-2 {
    z-index: 2;
}

.zindex-0 {
    z-index: -1;
}

.zindex-unset {
    z-index: unset !important;
}

.zindex-100 {
    z-index: 100;
}

.flex-grow-1 {
    flex-grow: 1;
}

.flex-shrink-0 {
    flex-shrink: 0;
}

.opacity-100 {
    opacity: 1;
}

.opacity-75 {
    opacity: .75;
}

.opacity-50 {
    opacity: .5;
}

.opacity-25 {
    opacity: .25;
}

.opacity-20 {
    opacity: .2;
}

.opacity-10 {
    opacity: .1;
}

.opacity-0 {
    opacity: 0;
}

.minh-200 {
    min-height: 200px;
}
.minh-240 {
    min-height: 240px;
}
.min-w-120 {
    min-width: 120px;
}

.min-width {
    min-width: 320px;
}

.minw-250 {
    min-width: 250px;
}

.minw-220 {
    min-width: 220px;
}

.min-width {
    min-width: 320px;
}

.minw-334 {
    min-width: 334px;
}

.minw-350 {
    min-width: 350px;
}

.minh-100 {
    min-height: 100%;
}
/*max width*/
.mw-232 {
    max-width: 232px;
}

.mw-500 {
    max-width: 500px;
}

.mw-700 {
    max-width: 700px;
}

.mw-334 {
    max-width: 334px;
}

.mw-350 {
    max-width: 350px;
}

.mw-372 {
    max-width: 372px;
}

.mw-large {
    max-width: calc(100% - 40%);
}

.mw-150 {
    max-width: 150px;
}

.w-max {
    width: max-content;
}

.w-min {
    width: min-content;
}

.h-max {
    height: max-content;
}

.h-min {
    height: min-content;
}

.h-32 {
    height: 32px;
}

.h-34 {
    height: 34px;
}

.h-36 {
    height: 36px;
}

.h-40 {
    height: 40px;
}

.h-48 {
    height: 48px;
}

.h-50 {
    height: 50px;
}

.h-60 {
    height: 60px;
}

.h-80 {
    height: 80px;
}

.h-300 {
    height: 300px;
}

.h-340 {
    height: 340px;
}

.mh-232 {
    max-height: 232px;
}

.mh-400 {
    max-height: 400px;
}

.mh-50vh {
    max-height: 50vh;
}

.wp-100 {
    width: 100px;
}

.wp-130 {
    width: 130px;
}

.wp-70 {
    width: 70px;
}

.wp-80 {
    width: 80px;
}

.wp-40 {
    width: 40px;
}

/* Gap */
.gap-2 {
    gap: 2px;
}

.gap-5 {
    gap: 5px;
}

.gap-4 {
    gap: 4px;
}

.gap-8 {
    gap: 8px;
}

.gap-10 {
    gap: 10px;
}

.gap-12 {
    gap: 12px;
}

.gap-y-12 {
    row-gap: 12px;
}

.gap-16 {
    gap: 16px;
}

.gap-20 {
    gap: 20px;
}

.gap-24 {
    gap: 24px;
}

.gap-x-30 {
    column-gap: 30px;
}

.gap-x-36 {
    column-gap: 36px;
}

.gap-32 {
    gap: 32px;
}

.gap-36 {
    gap: 36px;
}

.gap-40 {
    gap: 40px;
}

.gap-50 {
    grid-gap: 50px;
}

/*width*/
.wh-18 {
    width: 18px;
    height: 18px;
}

.wh-30 {
    width: 30px;
    height: 30px;
}


.wh-32 {
    width: 32px;
    height: 32px;
}

.wh-36 {
    width: 36px;
    height: 36px;
}

.wh-24 {
    width: 24px;
    height: 24px;
}

.wh-34 {
    width: 34px;
    height: 34px;
}

.wh-40 {
    height: 40px;
    width: 40px;
}

.wh-45 {
    height: 45px;
    width: 45px;
}

.wh-50 {
    height: 50px;
    width: 50px;
}

.wh-60 {
    height: 60px;
    width: 60px;
}

ul.ul-clear {
    margin: 0;
    padding: 0;
}

    ul.ul-clear li {
        list-style: none;
    }

a.a-clear {
    text-decoration: none;
    color: inherit !important;
}
/*button*/

.button-reset {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    outline: inherit;
}

.button-classic {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.button-classic-1 {
    background-color: #F9FAFC;
}

    .button-classic-1:hover {
        background-color: #F2F6FA;
    }

.btn-base {
    display: inline-block;
    outline: transparent;
    border: none;
    cursor: pointer;
}

.general-tab {
    display: flex;
    gap: .75rem;
    border-bottom: 2px solid #DDE7F3;
}

.general-tab-btn {
    padding-top: .5rem;
    padding-left: .75rem;
    padding-right: .75rem;
    padding-bottom: 1.125rem;
    outline: none;
    border: none;
    background: none;
    display: inline-block;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.25;
    color: #7888A2;
    position: relative;
}

    .general-tab-btn:focus {
        outline: none;
    }

    .general-tab-btn.selected {
        color: #00BEF9;
    }

    .general-tab-btn::after {
        position: absolute;
        content: '';
        bottom: -2px;
        left: 0;
        right: 0;
        height: 2px;
        background-color: transparent;
        border-radius: 10px;
    }

    .general-tab-btn.selected::after {
        background-color: #00BEF9;
    }

.btn-base:focus {
    outline: transparent;
}

.invg-btn-prime {
    background: linear-gradient(to right,#ED7D5F, #FDC00F);
    color: #fff;
    font-weight: 700;
}

    .invg-btn-prime:hover,
    .invg-btn-prime-reverse:hover {
        color: #fff !important;
    }

.invg-btn-prime-reverse {
    background: linear-gradient(to left,#ED7D5F, #FDC00F);
    color: #fff;
    font-weight: 700;
}

.invg-btn-disabled {
    background: #EAEFF5;
    color: #ABB3C2 !important;
    cursor: not-allowed !important;
}

.invg-btn {
    background: #00BEF9;
    color: #fff;
}

    .invg-btn:hover {
        color: #fff;
        background: #0D98D9;
    }

    .invg-btn.no-hover:hover {
        background: #00BEF9 !important;
        color: #fff !important;
    }

.invg-btn-outlined-blue {
    background: #fff;
    border-color: #00BEF9;
    color: #00BEF9;
}

    .invg-btn-outlined-blue:hover {
        background: #428bca !important;
        color: #fff;
    }


.invg-btn-10 {
    background: var(--primary-10, rgba(0, 190, 249, 0.10));
    color: #00BEF9;
}

    .invg-btn-10:hover {
        background: #00BEF9;
        color: #fff;
    }

invg-btn-10 {
    background: var(--primary-10, rgba(0, 190, 249, 0.10));
    color: #00BEF9;
}

.invg-btn-10:hover {
    background: #00BEF9;
    color: #fff;
}


.invg-gradient-blue {
    background: #0028ef;
    background: -moz-linear-gradient(270deg,#39C2EA,#1D57FD,#39C2EA,#1D57FD);
    background: -webkit-linear-gradient(270deg,#39C2EA,#39C2EA,#1D57FD,#1D57FD);
    background: linear-gradient(270deg,#39C2EA,#1D57FD,#39C2EA,#1D57FD);
    background-size: 300%;
    transition: .4s ease;
    color: #fff;
    border: none
}

    .invg-gradient-blue.hover-none {
        background-position: left !important
    }

    .invg-gradient-blue:hover {
        background-position: right;
        color: #fff
    }

.invg-gradient-btn {
    background: #0028ef;
    background: -moz-linear-gradient(270deg,#39C2EA,#1D57FD,#39C2EA,#1D57FD);
    background: -webkit-linear-gradient(270deg,#39C2EA,#39C2EA,#1D57FD,#1D57FD);
    background: linear-gradient(270deg,#39C2EA,#1D57FD,#39C2EA,#1D57FD);
    background-size: 300%;
    transition: .4s ease;
    color: #fff;
    border: none
}

    .invg-gradient-btn.hover-none {
        background-position: left !important
    }

    .invg-gradient-btn:hover {
        background-position: right;
        color: #fff
    }


.with-transition {
    transition: all .2s ease;
}

.bc-transparent-last:last-child {
    border-color: transparent !important;
}

.invg-btn-outlined-blue.with-hover:hover {
    background: #D6F5FF !important;
    color: #00BEF9 !important;
}

.invg-renew-btn-orange {
    border: 1px solid #FEA939;
    border-radius: 8px;
    color: #F39444 !important;
    font-weight: 700 !important;
    height: 27px;
    line-height: 0 !important;
}

.invg-btn-orange {
    text-decoration: none;
    /*background: linear-gradient( 214deg,#ED7D5F,#FDC00F 80%);*/
    background: linear-gradient(272deg, #ffd5c8,#FEEEC3, #ED7D5F,#FDC00F);
    color: #fff;
    border-radius: .75rem;
    /*box-shadow: 0 0 .75rem 0 #fa6960;*/
    transition: .4s ease;
    background-size: 300%;
}

    .invg-btn-orange:hover {
        /*background-image: linear-gradient(to left, #FBDFD6,#FEEEC3 80%);*/
        background-position: right;
        color: #FA6960 !important;
        box-shadow: none;
    }

        .invg-btn-orange:hover > span {
            color: #FA6960 !important;
        }

.btn-disabled {
    background: #EBEBEB !important;
    color: #AFAFAF !important;
}

    .btn-disabled:hover {
        cursor: not-allowed;
    }

.invg-btn-pearl-blue {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 16px;
    background: #F2F6FA;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 700;
    color: #31456A;
    transition: .15s all linear;
}

    .invg-btn-pearl-blue:hover,
    .invg-btn-pearl-blue.bg-white:hover {
        background-color: #EBF2FB !important;
    }

    .invg-btn-pearl-blue:hover {
        color: #31456A;
    }

.invg-btn-fix {
    padding: 8px 16px;
    background: #00BEF9;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 700;
    color: #F7F9F9;
    transition: .15s all linear;
}

.invg-btn-buy {
    background: #21A690;
    color: #fff !important;
    font-weight: 700;
}

    .invg-btn-buy:hover {
        transition-duration: .4s !important;
        transform: scale(1.04,1.04) !important;
        background: #0a9787;
    }

    .invg-btn-buy:disabled {
        opacity: 0.5;
        text-decoration: none !important;
        cursor: no-drop !important;
        user-select: none !important;
        border-style: none !important;
    }

.invg-btn-sell {
    background: #F4594E !important;
    color: #fff !important;
    font-weight: 700;
}

    .invg-btn-sell:hover {
        transition-duration: .4s !important;
        transform: scale(1.04,1.04) !important;
        background: #c82333;
    }

    .invg-btn-sell:disabled {
        opacity: 0.5;
        text-decoration: none !important;
        cursor: no-drop !important;
        user-select: none !important;
        border-style: none !important;
    }


.btn-buy-order {
    font-weight: 600;
    color: #21A690;
    background: #21A6901A;
}

.btn-sell-order {
    font-weight: 600;
    color: #F4594E;
    background: #F4594E1A;
}

.btn-lighter-gray {
    background: #EAEFF5;
    color: #3E3E3E;
    font-weight: 700;
}

    .btn-lighter-gray:hover {
        background: #E0E6EF;
    }

.invg-btn-default {
    background: #F2F6FA;
    color: #3E3E3E;
}

    .invg-btn-default:hover {
        transition-duration: .4s !important;
        transform: scale(1.04,1.04) !important;
        background: #dde1e7;
    }

.invg-btn-yellow {
    background: #FFBE00;
    color: #FFFFFF;
    cursor: pointer;
}

    .invg-btn-yellow:hover {
        background: #E5AD0A;
    }


button.bg-darker-gray:hover {
    background: #9b9b9b;
}

button.bg-cyan:hover {
    background: #0c91cf;
}

.op-chart-btn,
.op-square-btn,
.op-circle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    border: none;
    height: 2rem;
    width: 2rem;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1.2;
    font-weight: 700;
    flex-shrink: 0;
}


.op-chart-btn {
    background: transparent;
    color: #7888A2;
    border-radius: 8px;
    transition: .15s all linear;
}

    .op-chart-btn:hover {
        background-color: #F2F6FA;
    }

.op-square-btn {
    background-color: #F2F6FA;
    color: #31456A;
    border-radius: 8px;
    transition: .15s all linear;
}

    .op-square-btn.rounded-full {
        border-radius: 50%;
    }

    .op-square-btn:hover,
    .op-icons:hover {
        background-color: #EBF2FB;
    }

.op-chart-btn.active {
    background: linear-gradient(270deg, #39C2EA 0%, #1D57FD 100%, #1D57FD 100%) !important;
    color: #fff !important;
}

.subscribe-pse-plan {
    background-color: #000;
    color: #FFF !important;
}

.btn-transparent {
    background: rgba(0, 0, 0, 0.04) !important;
    backdrop-filter: blur(5px);
    color: #3E3E3E !important;
}

.btn-plain {
    background-color: transparent;
}

    .btn-plain:hover {
        background-color: #EBF2FB;
    }

.btn-hover:hover {
    background: #EBF2FB;
    color: #31456A !important;
}

.outline-none {
    outline: none !important;
}

.flex-equals > div {
    flex: 1 1 0;
}
/*dropdown*/
.dropdown-clear .dropdown-toggle::after,
.dropdown-basic .dropdown-toggle::after {
    display: none;
}

.dropdown-basic .dropdown-toggle {
    background-color: transparent;
    border: 1px solid #DDE7F3;
}

.dropdown-basic.show .dropdown-toggle,
.dropdown-basic:hover .dropdown-toggle {
    background-color: #fff;
}

.dropdown-basic .dropdown-menu {
    border: 1px solid #DDE7F3;
}

.dropdown-basic .dropdown-item:not(.active) .selected-icon {
    display: none;
}

.dropdown-basic .dropdown-item.active .bitcoin-border {
    outline-color: #fff;
}

.dropdown-item.active-black {
    border-radius: 12px !important;
    background: #E0E6EF !important;
}


/* to remove */
.navbar-nav .nav-item .dropdown-toggle:focus,
.navbar-nav .nav-item .dropdown-toggle:hover,
.navbar-nav .nav-item .nav-link:focus,
.nvabar-nav .nav-item .nav-link:hover,
.regular-nav-link:hover {
    /*border-bottom: 2px solid transparent !important;*/
}

.lower-case {
    text-transform: lowercase
}

.upper-case {
    text-transform: uppercase
}

/* for gradient text
just add background-image for color*/
.text-gradient {
    background-size: 100%;
    background-repeat: repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
}
/*for hover gradient animation to right
just add background gradient color*/
.gradient-hover {
    background-size: 300%;
    transition: .4s ease;
}

    .gradient-hover:hover {
        background-position: right;
    }

.regular-nav-link .nav-link {
    padding: 6px 16px !important;
}

.regular-nav-link {
    position: relative;
    padding: 10px 15px !important;
    cursor: pointer;
}

    .regular-nav-link:hover:before {
        display: block;
    }

    .regular-nav-link:before {
        content: '';
        position: absolute;
        display: none;
        bottom: -12px;
        left: 10%;
        right: 10%;
        height: 40px;
        background: transparent;
    }

.nav-home:before {
    content: '';
    position: absolute;
    /*height: 0 !important;*/
    bottom: 0;
}

.navbar-logo {
    display: inline-block;
    cursor: pointer;
}

    .navbar-logo img {
        width: auto;
        height: 32px;
    }

.navbar li {
    padding: 0 !important;
}

.user-menu > .dropdown-menu {
    /*width: 280px;
    padding-top: 0;*/
    max-height: 90vh;
    overflow-y: auto;
}

.user-menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 0 !important;
    height: 36px;
    width: 36px;
}

    .user-menu-icon:hover {
        /*background: #D9F5FE;*/
        background: none;
        border-bottom: none !important;
    }

    .user-menu-icon:focus {
        /*background: #D9F5FE;*/
        background: none;
        border-bottom: none !important;
    }

    .user-menu-icon:active {
        transform: scale(0.95);
    }

    .user-menu-icon img {
        width: auto;
        height: 20px;
        object-fit: contain;
    }


/*tabs select with color*/

/*crypto tabs*/

.op-navtabs .op-purple-select .nav-link,
.op-navtabs .op-purpler-select .nav-link,
.op-navtabs .op-blue-select .nav-link,
.op-navtabs .op-orange-select .nav-link,
.op-navtabs .op-red-select .nav-link,
.op-navtabs .op-reder-select .nav-link,
.op-navtabs .op-green-select .nav-link,
.op-navtabs .op-yellow-select .nav-link,
.op-navtabs .op-yellow-select .nav-link,
.op-navtabs .op-light-blue-select .nav-link {
    border: none !important;
}

.op-hr {
    height: 2px;
    border-bottom: 2px solid #F2F6FA;
    position: absolute;
    left: 0;
    right: 0;
}

.op-navtabs .nav-tabs {
    background-color: transparent;
}

.nav-tabs.tab-default {
    background-color: transparent !important;
}

.op-navtabs .nav-tabs .nav-link {
    cursor: pointer;
}

.op-navtabs .op-purple-select .nav-link:hover {
    background: #EBF2FB !important;
    border-radius: 12px;
    color: #985CFD;
    border-color: transparent !important;
}

    .op-navtabs .op-purple-select .nav-link:hover p {
        color: #985CFD;
    }

    .op-navtabs .op-purple-select .nav-link:hover img {
        border-color: #985CFD !important;
        box-shadow: 0px 0px 12px rgb(152 92 253 / 70%);
    }

.op-navtabs .op-purple-select .nav-link.active p {
    color: #985CFD;
}

.op-navtabs .op-purpler-select .nav-link.active .op-tabs-img,
.op-purpler-select.op-tabs-img {
    border: 2px solid #985CFD !important;
    box-shadow: 0px 0px 12px rgba(152, 92, 253, 0.7);
}

.op-navtabs .op-purpler-select .nav-link:hover {
    background: #EBF2FB !important;
    border-radius: 12px;
    color: #6D3CF8;
    border-color: transparent !important;
}

    .op-navtabs .op-purpler-select .nav-link:hover p {
        color: #6D3CF8;
    }

    .op-navtabs .op-purpler-select .nav-link:hover img {
        border-color: #6D3CF8 !important;
        box-shadow: 0px 0px 12px rgb(152 92 253 / 70%);
    }

.op-navtabs .op-purpler-select .nav-link.active p {
    color: #6D3CF8;
}

.op-navtabs .op-purpler-select .nav-link.active .op-tabs-img,
.op-purpler-select.op-tabs-img {
    border: 2px solid #6D3CF8 !important;
    box-shadow: 0px 0px 12px rgba(152, 92, 253, 0.7);
}

/*ph tabs*/

.op-navtabs .op-blue-select .nav-link:hover {
    background: #EBF2FB !important;
    border-radius: 12px;
    color: #2A77FD;
    border-color: transparent !important;
}

    .op-navtabs .op-blue-select .nav-link:hover p {
        color: #2A77FD;
    }

    .op-navtabs .op-blue-select .nav-link:hover img {
        border-color: #2A77FD !important;
        box-shadow: 0px 0px 12px #2a77fd;
    }

.op-navtabs .op-blue-select .nav-link.active p {
    color: #2A77FD;
}

.op-navtabs .op-blue-select .nav-link.active .op-tabs-img,
.op-blue-select.op-tabs-img {
    border: 2px solid #2A77FD !important;
    box-shadow: 0px 0px 12px #2A77FD;
}

.op-navtabs .op-bluer-select .nav-link:hover {
    background: #EBF2FB !important;
    border-radius: 12px;
    color: #2B9CFC;
    border-color: transparent !important;
}

    .op-navtabs .op-bluer-select .nav-link:hover p {
        color: #2B9CFC;
    }

    .op-navtabs .op-bluer-select .nav-link:hover img {
        border-color: #2B9CFC !important;
        box-shadow: 0px 0px 12px #2B9CFC;
    }

.op-navtabs .op-bluer-select .nav-link.active p {
    color: #2B9CFC;
}

.op-navtabs .op-bluer-select .nav-link.active .op-tabs-img,
.op-bluer-select.op-tabs-img {
    border: 2px solid #2B9CFC !important;
    box-shadow: 0px 0px 12px #2B9CFC;
}


/*Global tabs*/
.op-navtabs .op-light-blue-select .nav-link:hover {
    background: #EBF2FB !important;
    border-radius: 12px;
    color: #2B9CFC;
    border-color: transparent !important;
}

    .op-navtabs .op-light-blue-select .nav-link:hover p {
        color: #2B9CFC;
    }

    .op-navtabs .op-light-blue-select .nav-link:hover img {
        border-color: #2B9CFC !important;
        box-shadow: 0px 0px 12px #2B9CFC;
    }

.op-navtabs .op-light-blue-select .nav-link.active p {
    color: #2B9CFC;
}

.op-navtabs .op-light-blue-select .nav-link.active .op-tabs-img {
    border: 2px solid #2B9CFC !important;
    box-shadow: 0px 0px 12px #2B9CFC;
}

/*united states tab*/
.op-navtabs .op-orange-select .nav-link.active p {
    color: #F37B30;
}

.op-navtabs .op-orange-select .nav-link.active .op-tabs-img,
.op-orange-select.op-tabs-img {
    border: 2px solid #F37B30 !important;
    box-shadow: 0px 0px 12px #F37B30;
}

.op-navtabs .op-orange-select .nav-link:hover p {
    color: #F37B30;
}

.op-navtabs .op-orange-select .nav-link:hover img {
    border-color: #F37B30 !important;
    box-shadow: 0px 0px 12px #F37B30;
}

.op-navtabs .op-orange-select .nav-link:hover {
    background: #EBF2FB !important;
    border-radius: 12px;
    color: #F37B30;
    border-color: transparent !important;
}

/*singapore tabs*/
.op-navtabs .op-red-select .nav-link.active p {
    color: #FA6A60;
}

.op-navtabs .op-red-select .nav-link.active .op-tabs-img,
.op-red-select.op-tabs-img {
    border: 2px solid #FA6A60 !important;
    box-shadow: 0px 0px 12px #FA6A60;
}

.op-navtabs .op-red-select .nav-link:hover p {
    color: #FA6A60;
}

.op-navtabs .op-red-select .nav-link:hover img {
    border-color: #FA6A60 !important;
    box-shadow: 0px 0px 12px #FA6A60;
}

.op-navtabs .op-red-select .nav-link:hover {
    background: #EBF2FB !important;
    border-radius: 12px;
    color: #FA6A60;
    border-color: transparent !important;
}

/*singapore tabs*/
.op-navtabs .op-reder-select .nav-link.active p {
    color: #DF066E;
}

.op-navtabs .op-reder-select .nav-link.active .op-tabs-img,
.op-reder-select.op-tabs-img {
    border: 2px solid #DF066E !important;
    box-shadow: 0px 0px 12px #DF066E;
}

.op-navtabs .op-reder-select .nav-link:hover p {
    color: #DF066E;
}

.op-navtabs .op-reder-select .nav-link:hover img {
    border-color: #DF066E !important;
    box-shadow: 0px 0px 12px #DF066E;
}

.op-navtabs .op-reder-select .nav-link:hover {
    background: #EBF2FB !important;
    border-radius: 12px;
    color: #DF066E;
    border-color: transparent !important;
}

/*forex tab*/
.op-navtabs .op-green-select .nav-link.active p {
    color: #55BE59;
}

.op-navtabs .op-green-select .nav-link.active .op-tabs-img,
.op-green-select.op-tabs-img {
    border: 2px solid #62E6AC !important;
    box-shadow: 0px 0px 12px #62E6AC;
}

.op-navtabs .op-green-select .nav-link:hover p {
    color: #55BE59;
}

.op-navtabs .op-green-select .nav-link:hover img {
    border-color: #62E6AC !important;
    box-shadow: 0px 0px 12px #62E6AC;
}

.op-navtabs .op-green-select .nav-link:hover {
    background: #EBF2FB !important;
    border-radius: 12px;
    color: #62E6AC;
    border-color: transparent !important;
}

/*commodities tab*/
.op-navtabs .op-yellow-select .nav-link.active p {
    color: #FDC00F;
}

.op-navtabs .op-yellow-select .nav-link.active .op-tabs-img,
.op-yellow-select.op-tabs-img {
    border: 2px solid #FDC00F !important;
    box-shadow: 0px 0px 12px #FDC00F;
}

.op-navtabs .op-yellow-select .nav-link:hover p {
    color: #FDC00F;
}

.op-navtabs .op-yellow-select .nav-link:hover img {
    border-color: #FDC00F !important;
    box-shadow: 0px 0px 12px #FDC00F;
}

.op-navtabs .op-yellow-select .nav-link:hover {
    background: #EBF2FB !important;
    border-radius: 12px;
    color: #FDC00F;
    border-color: transparent !important;
}

/*Indices tabs*/
.op-navtabs .op-semantic-green-select .nav-link.active p {
    color: #34D9C8;
}

.op-navtabs .op-semantic-green-select .nav-link.active .op-tabs-img {
    border: 2px solid #D7F6F3 !important;
    box-shadow: 0px 0px 12px #34D9C8;
}

.op-navtabs .op-semantic-green-select .nav-link:hover p {
    color: #34D9C8;
}

.op-navtabs .op-semantic-green-select .nav-link:hover img {
    border-color: #34D9C8 !important;
    box-shadow: 0px 0px 12px #34D9C8;
}

.op-navtabs .op-semantic-green-select .nav-link:hover {
    background: #EBF2FB !important;
    border-radius: 12px;
    color: #34D9C8;
    border-color: transparent !important;
}

/*Investment Fund*/
.op-navtabs .op-neon-blue-select .nav-link.active p {
    color: #65CAE9;
}

.op-navtabs .op-neon-blue-select .nav-link.active .op-tabs-img {
    border: 2px solid #D7F6F3 !important;
    box-shadow: 0px 0px 12px #65CAE9;
}

.op-navtabs .op-neon-blue-select .nav-link:hover p {
    color: #65CAE9;
}

.op-navtabs .op-neon-blue-select .nav-link:hover img {
    border-color: #65CAE9 !important;
    box-shadow: 0px 0px 12px #65CAE9;
}

.op-navtabs .op-neon-blue-select .nav-link:hover {
    background: #EBF2FB !important;
    border-radius: 12px;
    color: #65CAE9;
    border-color: transparent !important;
}

.op-navtabs p {
    color: #7888A2;
}
/*end tabs select with colors*/


.op-navtabs-default .nav-item .nav-link {
    color: #ABBCCC;
}

/*.op-navtabs-default .tab-default.nav-item.show .nav-link, .tab-default .nav-link.active {
    background: transparent !important;
    color: #00BEF9 !important;
}*/

.op-navtabs-default .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #00BEF9;
    background: transparent !important;
}

.op-tabs-default:hover {
    border-color: transparent !important;
}

.op-tabs-default:hover {
    background: #EBF2FB;
    border-radius: 12px;
    color: #31456A !important;
}

.op-tabs-default.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active:before {
    display: block;
}

.op-tabs-default:before {
    content: '';
    position: absolute;
    display: none;
    bottom: -1px;
    z-index: 1;
    left: 0;
    right: 0;
    height: 2px;
    background: #00bef9;
    margin-left: 16px;
    margin-right: 16px;
    /*border-top-left-radius: 5px;
    border-top-right-radius: 5px;*/
}

.op-tabs-img {
    width: 1.18rem;
    height: 1.18rem;
    border: 2px solid #CFDCE8 !important;
}


/*opacity */
.opacity-100 {
    opacity: 1;
}

.opacity-75 {
    opacity: .75;
}

.opacity-50 {
    opacity: .5;
}

.opacity-25 {
    opacity: .25;
}

.opacity-10 {
    opacity: .25;
}

.opacity-0 {
    opacity: 0;
}

.opacity-10 {
    opacity: .1;
}

.opacity-20 {
    opacity: .2;
}

.opacity-30 {
    opacity: .3;
}

.opacity-40 {
    opacity: .4;
}

.opacity-60 {
    opacity: .6;
}

.opacity-70 {
    opacity: .7;
}

.opacity-80 {
    opacity: .8;
}

.opacity-90 {
    opacity: .9;
}

.hover-opacity-75:hover {
    opacity: .75;
}


/*checkbox*/
.checkbox-blue .container {
    display: block;
    position: relative;
    padding-left: 32px;
    margin-bottom: 0;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .checkbox-blue .container input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

.checkbox-blue .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    border-radius: 4px;
    /*background-color: #eee;*/
}

.checkbox-blue .container:hover input ~ .checkmark {
    opacity: .8;
}

.checkbox-blue .container input:checked ~ .checkmark {
    /*background-color: #2196F3;*/
}

.checkbox-blue .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.checkbox-blue .container input:checked ~ .checkmark:after {
    display: block;
}

.checkbox-blue .container .checkmark:after {
    content: url(../../../Images/Portfolio/icon-checkbox-blue.png);
    left: 4px;
}

/*loading icon bouncing*/
/*put span inside loader-bounce*/
.loader-bounce {
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    height: 1.25rem;
}

    .loader-bounce:before, .loader-bounce:after, .loader-bounce span {
        content: "";
        background-color: #00bef9;
        border-radius: 50%;
        width: .5rem;
        height: .5rem;
        margin: .125rem;
        animation: bouncing-fade 0.6s infinite alternate;
    }

    .loader-bounce span {
        animation-delay: 0.2s;
    }

    .loader-bounce:after {
        animation-delay: 0.4s;
    }


.bg-green-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    font-weight: 700;
    background: #E9F6F4;
    color: #21A690 !important;
}

.bg-red-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    font-weight: 700;
    background: #FFEBEA;
    color: #FF3729 !important;
}
@keyframes bouncing-fade {
    from {
        transform: translate3d(0, .25rem, 0);
    }

    to {
        opacity: 0.1;
        transform: translate3d(0, -.25rem, 0);
    }
}


/*no data table state*/
/*add position-relative on tbody*/

.nodata-block.small {
    width: 80px;
    max-width: 100%;
}

.nodata-gradient-transparent-bg {
    background: linear-gradient(180.09deg, rgba(255, 255, 255, 0.4) 0.08%, #FFFFFF 42.2%);
}

.nodata-block.big {
    width: 270px;
    max-width: 100%;
}

.nodata-block {
    height: 1.25rem;
    border-radius: .25rem;
}

.nodata-info {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

    .nodata-info.show-border {
        top: 1px;
        left: 1px;
        right: 1px;
        bottom: 1px;
        height: auto;
        width: auto;
    }

    .nodata-info > td {
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        background-color: transparent !important;
        border: none !important;
        line-height: normal !important;
    }


.table-layout-fixed {
    table-layout: fixed;
}
/*to clear nodata td background*/
table.op-table.table-striped tbody tr.nodata-info > td:hover,
table.op-table.table-striped tbody tr.nodata-info:hover > td,
table > tbody tr.nodata-info > td:hover,
table > tbody tr.nodata-info:hover > td,
.table-striped tbody tr.nodata-info:nth-of-type(odd) {
    background-color: transparent !important;
}

table.basic-table thead th {
    border: 0;
}

.basic-table td, .basic-table th {
    border: 0;
    padding: .5rem .75rem;
}

.basic-table tbody tr td:first-child {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.basic-table tbody tr td:last-child {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

.basic-table.basic-table-striped tbody tr:nth-of-type(even) td {
    background-color: #F2F6FA;
}

.basic-table.basic-table-bordered tbody tr:not(:last-child) td {
    border: 1px solid transparent;
    border-bottom-color: #DDE7F3;
}

/* cards */
.op-cards {
    background: #FFFFFF;
    border: 1px solid transparent;
    border-radius: 24px;
}

.op-cards-transparent {
    padding: 8px 12px;
    cursor: pointer;
}

    .op-cards-transparent:hover {
        border-radius: 12px;
        background: #F2F6FA;
    }

.d-table-row.op-cards-transparent:hover .d-table-cell {
    background-color: #F2F6FA;
}

.d-table .d-table-row.op-cards-transparent .d-table-cell:first-child {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.d-table .d-table-row.op-cards-transparent .d-table-cell:last-child {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

.d-table .d-table-row.op-cards-transparent,
.d-table .d-table-row.op-cards-transparent:hover {
    padding: 0;
    background-color: transparent !important;
}

.d-table .d-table-row.op-cards-tranparent:hover .d-table-cell {
    background-color: #F2F6FA;
}


/*News style*/

.op-news-blue {
    background: linear-gradient(270deg, #39C2EA 0%, #1D57FD 100%, #1D57FD 100%);
    color: #FFFFFF !important;
    padding: .5rem;
    border-radius: 10px;
}

.op-news-default {
    background: #F2F6FA;
    color: #3E3E3E !important;
    padding: .5rem;
    border-radius: 10px;
}

.op-news-description {
    line-height: 1.5rem;
}

.op-news-header P {
    color: #3E3E3E;
}

.op-news-content-img {
    width: 100%;
}

.op-news-img {
    max-width: 100%;
    cursor: pointer;
    display: block;
    margin: 0 auto;
    height: 130px;
    min-width: 100%;
    object-fit: cover;
    object-position: center;
}

.op-load-more {
    color: #31456A;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 16px;
    gap: 8px;
    font-size: 1rem;
    font-weight: 700;
    background: #fff;
    border-radius: 12px;
    cursor: pointer;
}

.news-thumbnail-container {
    width: 80px;
    height: 80px;
    overflow: hidden;
    border-radius: 12px;
    flex-shrink: 0;
    max-width: 100%;
}


    .news-thumbnail-container.news-thumbnail-container-lg {
        width: 294px;
        height: 172px;
        border-radius: 10px;
    }

.news-thumbnail {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*end news style*/

.invg-progress {
    height: 6px;
}

    .invg-progress.invg-progress-rounded .progress-bar {
        border-bottom-left-radius: inherit;
        border-top-left-radius: inherit;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .invg-progress .progress-bar {
        background: linear-gradient(90deg, #39C2EA 0%, #1D57FD 100%) !important;
        box-shadow: 0px 0px 8px rgba(43, 140, 244, 0.5);
    }


.invg-card {
    background: #fff;
    border: 1px solid #DDE7F3;
    border-radius: 20px;
}

.category-btn {
    border: none;
    display: inline-block;
    text-align: center;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    padding: .375rem .75rem;
    color: #A3C7E8;
    background: none;
    border-radius: 20px;
    text-transform: uppercase;
    transition: background 0.2s ease;
}

    .category-btn.selected {
        color: #00bef9;
        background: #D6F5FF;
    }

    .category-btn:hover {
        background: #f5f5f5;
    }


/*calendar css*/
.calendar-item {
    position: relative;
    display: flex;
    align-items: center;
    padding: .75rem;
    border: 1px solid transparent;
    border-bottom-color: #CFDCE8;
    border-left-width: 3px;
    transition: all 0.2s ease;
    cursor: pointer;
}

    .calendar-item:first-child,
    .stock-trending-item:first-child {
        border-top: 1px solid #cfdce8;
    }

    .calendar-item::before {
        content: '';
        position: absolute;
        background: transparent;
        width: 3px;
        top: -1px;
        bottom: -1px;
        left: -3px;
        display: block;
    }

    .calendar-item.orange::before {
        background-color: #FEB244;
    }

    .calendar-item.purple::before {
        background-color: #9087FF;
    }

    .calendar-item.orange:hover {
        border-color: #FEB244;
        background-color: #FFF1DE;
    }

    .calendar-item.purple:hover {
        border-color: #9087FF;
        background-color: #E6E4FF;
    }
/* END calendar css*/

.v-divider {
    min-height: 100%;
    width: 1px;
    display: inline-block;
    border-radius: 6px;
    background-color: #DDE7F3;
}

.container.heavy-container,
.container-fluid.heavy-container {
    max-width: 100%;
}

/* tags */
.tag {
    display: inline-flex;
    align-items: center;
    color: #7888A2;
    font-size: .75rem;
    font-weight: 700;
    background-color: #EBF2FB;
    padding: 6px 12px;
    border-radius: 8px;
}

    .tag.tag-us,
    .tag.tag-us span {
        color: #F37B30 !important;
    }

        .tag.tag-us .asset-icon {
            border: 2px solid #F37B30 !important;
            box-shadow: 0px 0px 20px #F37B30;
        }

    .tag.tag-crypto,
    .tag.tag-crypto span {
        color: #985CFD !important;
    }

        .tag.tag-crypto .asset-icon {
            border: 2px solid #985CFD !important;
            box-shadow: 0px 0px 20px #985CFD;
        }

    .tag.tag-ph,
    .tag.tag-ph span {
        color: #2A77FD !important;
    }

        .tag.tag-ph .asset-icon {
            border: 2px solid #2A77FD !important;
            box-shadow: 0px 0px 20px #2A77FD;
        }

    .tag.tag-cmd,
    .tag.tag-cmd span {
        color: #FDC00F !important;
    }

        .tag.tag-cmd .asset-icon {
            border: 2px solid #FDC00F !important;
            box-shadow: 0px 0px 20px #FDC00F;
        }

.upcoming-tag {
    display: inline-block;
    border-radius: 10px;
    padding: .25rem .5rem;
    background-color: #BA2719;
    color: #f7f9f9;
    font-size: .5rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

.text-truncate-max {
    max-width: 140px;
}

.bg-progress-blue {
    background: #005CE5;
    border-radius: 20px;
}

.rounded-right-none {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.rounded-left-none {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
.bg-progress-yellow {
    background: #CA970C;
    border-radius: 20px;
}

.bg-progress-lightblue {
    background: #06EEFF;
    border-radius: 20px;
}

.progress-yellow {
    background: #F9E39A;
}

.progress-gray {
    background: #D2E5FF;
}

.progress-darkgray {
    background: #0C5066;
}
@media (max-width: 400px) {

    .text-truncate-max {
        max-width: 50px;
    }
}

/* Avatar */
.asset-icon.asset-icon-xs {
    width: 14px;
    height: 14px;
}

.asset-icon.asset-icon-sm {
    width: 16px;
    height: 16px;
}

.asset-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
}

    .asset-icon.asset-icon-md {
        width: 34px;
        height: 34px;
    }


    .asset-icon.asset-icon-lg {
        width: 50px;
        height: 50px;
    }

    .asset-icon.asset-icon-xl {
        width: 54px;
        height: 54px;
    }

.asset-icon-bordered {
    border: 2px solid #CFDCE8 !important;
}


.asset-code-bg {
    display: inline-block;
    color: #31456A;
    background-color: #F2F6FA;
    padding: .25rem .5rem;
    border-radius: 8px;
    font-weight: 700;
}

.asset-rank {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .875rem;
    background-color: #F2F6FA;
    border-radius: 50%;
    color: #3E3E3E;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
}

.overflow-visible {
    overflow: visible !important;
}

.op-hr {
    height: 2px;
    border-bottom: 2px solid #DDE7F3;
    position: absolute;
    left: 0;
    right: 0;
}

.op-toggle {
    display: flex;
    align-items: stretch;
    border-radius: 12px;
    border: 1px solid #DDE7F3;
    padding: .25rem;
    gap: 4px;
    background-color: #FFFFFF;
}

.op-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 8px;
    width: 28px;
    height: 28px;
    color: #3E3E3E;
    fill: #3E3E3E;
    transition: all .15s linear;
}

    .op-toggle-btn svg,
    .op-toggle-btn svg path {
        fill: inherit;
        transform: translateZ(0); /* triggers hardware acceleration */
        -webkit-transform: translateZ(0); /* Safari */
        shape-rendering: geometricPrecision;
    }

    .op-toggle-btn:hover {
        background-color: #EBF2FB;
    }

    .op-toggle-btn.active {
        background-color: #EBF2FB;
        color: #00BEF9 !important;
        fill: #00BEF9 !important;
    }

.buy-class.active {
    background: #42B8A4 !important;
    color: #F7F9F9 !important;
}

.sell-class.active {
    background: #FA6A60 !important;
    color: #F7F9F9 !important;
}

.img-hover {
    transition: 0.5s ease;
    transform: scale(0.8);
}

    .img-hover:hover {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        transition: 0.4s ease;
    }

.cyan-active-10 {
    background: #E6F9FE;
    border-left: 2px solid #00BEF9;
}

.cyan-hover:hover {
    background: #E6F9FE;
    border-left: 2px solid #00BEF9;
}


@media only screen and (min-width: 1360px) {
    .container.heavy-container,
    .container-fluid.heavy-container {
        max-width: 1366px;
    }
}
/*animation*/
.animate-up-onhover {
    transition: transform .2s ease-in-out;
    transition-delay: .2s;
}

    .animate-up-onhover:hover {
        transform: translateY(-4px);
    }

.dropdown-list.show .fa-chevron-down {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}

.dropdown-list .fa-chevron-down {
    transform: rotate(0deg);
    transition: transform 0.3s ease;
}

.fa-chevron-down {
    transform: rotate(0deg);
    transition: transform 0.3s ease;
}

/*.active .fa-chevron-down {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}*/


/*loading animation shine to right*/
.loading-shine.bg-pearl-blue::after {
    content: '';
    position: absolute;
    border-radius: 30px;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient( to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100% );
    /* The animation properties */
    animation: shine-right 1s infinite linear;
    background-size: 200% 100%;
    background-repeat: no-repeat;
}

/* Shine animation keyframes */
@keyframes shine-right {
    0% {
        background-position: 200% 0; /* Starts the gradient far left */
    }

    100% {
        background-position: -200% 0; /* Moves the gradient far right */
    }
}



/*tooltip*/
/* you can adjust the gap depends on top,left,right,bottom negative value*/
.tooltip-top, .tooltip-left, .tooltip-right, .tooltip-bottom {
    position: relative;
    z-index: 1;
}

.tooltip-info {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    user-select: none;
    transition: opacity .2s ease-in-out;
}

.tooltip-top:hover .tooltip-info,
.tooltip-left:hover .tooltip-info,
.tooltip-right:hover .tooltip-info,
.tooltip-bottom:hover .tooltip-info {
    opacity: 1;
}

.tooltip-top .tooltip-info,
.tooltip-bottom .tooltip-info {
    left: 50%;
}

.tooltip-top .tooltip-info {
    top: -4px;
    transform: translate(-50%, -100%);
}

.tooltip-bottom .tooltip-info {
    bottom: -4px;
    transform: translate(-50%, 100%);
}

.border-default {
    border-width: 1px;
    border-style: solid;
    border-color: #DDE7F3;
}

.subscribe-to-unlock-btn {
    border-radius: 6px;
    color: #515151 !important;
    background: linear-gradient(280.44deg, #D9E3F2 0%, #F1F7FE 27.42%, #E3EDF5 52.16%, #E9F0F9 77.43%, #D2DEF0 103.24%);
    font-weight: 600;
    white-space: nowrap;
}
/*function tab*/
.tab {
    display: flex;
    list-style: none;
    padding: 0;
}

.tab-frame {
    position: relative;
}

    .tab-frame > div {
        display: none;
    }

        .tab-frame > div.show {
            display: block;
        }
/*blue line design*/
.tab.tab-blueline .tab-item {
    padding-bottom: 1rem;
    border-bottom: solid 1.5px transparent;
    z-index: 1;
}

    .tab.tab-blueline .tab-item.active {
        font-weight: 700;
        color: #00BEF9 !important;
        border-color: #00BEF9
    }

    .tab.tab-blueline .tab-item:not(.active):hover {
        opacity: .8;
    }
/*basic design tab*/
.tab .tab-item {
    cursor: pointer;
}

.tab-basic .tab-item.active > div,
.tab-basic .tab-item:hover > div {
    background-color: #EBF2FB;
}

.tooltip-right .tooltip-info,
.tooltip-left .tooltip-info {
    top: 50%;
}

.tooltip-left .tooltip-info {
    left: -4px;
    transform: translate(-100%, -50%);
}

.tooltip-right .tooltip-info {
    right: -4px;
    transform: translate(100%, -50%);
}

.tab-basic .tab-item.active > div {
    color: #3E3E3E !important;
}

/*multiple lines elipses*/
.line-clamp-1,
.line-clamp-2,
.line-clamp-3 {
    /* autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-height: 1.5;
}

.line-clamp-1 {
    -webkit-line-clamp: 1;
}

.line-clamp-2 {
    -webkit-line-clamp: 2;
}

.line-clamp-3 {
    -webkit-line-clamp: 3;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

.search-input {
    position: relative;
    max-width: 304px;
}

    .search-input > input {
        border-radius: 12px;
        padding: 6px 12px;
        padding-left: 36px;
        font-size: 14px;
        color: #3E3E3E;
        border: none;
        outline: none;
        background-color: #F2F6FA;
        width: 100%;
    }

.search-icon {
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 14px;
}

.info-card {
    display: block;
    border-radius: 20px;
    padding: 12px;
    background-color: rgba(255, 255, 255, 0.4);
    transition: .15s background-color linear;
}

    .info-card:hover,
    .info-card-hovered {
        background-color: rgba(255, 255, 255, 1);
        box-shadow: 0px 0px 50px rgba(0, 0, 0, .06);
    }

.bg-transparent-02,
.card.bg-transparent-02 {
    background-color: rgba(255, 255, 255, 0.4);
}

.bg-transparent-04 {
    background-color: rgba(255, 255, 255, 0.6);
}

.bg-transparent-06 {
    background-color: #f2f6fa;
}

.bg-transparent-08 {
    background-color: rgba(255, 255, 255, 0.8);
}

    .bg-transparent-08.smoke {
        background-color: #F5F5F5;
    }


.bg-darker-gray {
    background: #3E3E3E;
}

.bg-ligther-gray {
    background: #EAEFF5;
}

/*.asset-icon.asset-icon-hover-border {
    border: 3px solid transparent;
    background: linear-gradient(90deg, #1D57FD, #39C2EA, transparent, transparent) border-box;
    background-size: 300%;
    transition: .15s all linear;
    background-position: right;
}

.info-card:hover .asset-code-bg.asset-code-hover-bg {
    background-position: left;
    color: #F7F9F9 !important;
}*/

/*.info-card:hover .asset-icon.asset-icon-hover-border {
    background: linear-gradient(270deg, #39C2EA 0%, #1D57FD 100%, #1D57FD 100%) border-box;
    background-position: left;
}*/

/*.asset-code-bg.asset-code-hover-bg {
    background-repeat: no-repeat !important;
    background: linear-gradient(90deg, #1D57FD, #39C2EA, #F2F6FA, #F2F6FA);
    background-size: 300%;
    transition: .15s all linear;
    background-position: right;
}*/

.asset-icon.asset-icon-hover-border {
    border: 3px solid transparent;
}

.info-card:hover .asset-icon-hover-border {
    background: linear-gradient(270deg, #39C2EA 0%, #1D57FD 100%) border-box !important;
}

.info-card:hover .asset-code-bg.asset-code-hover-bg {
    background: linear-gradient(270deg, #39C2EA 0%, #1D57FD 100%) !important;
    color: #F7F9F9 !important;
}

.div-odd-color:nth-child(odd) {
    background: #F9FAFC;
}

@media (min-width: 768px) {
    .fs-md-10 {
        font-size: .625rem;
    }

    .fs-md-12 {
        font-size: .75rem;
    }

    .fs-md-14 {
        font-size: .875rem;
    }

    .fs-md-16 {
        font-size: 1rem;
    }

    .fs-md-18 {
        font-size: 1.1875rem;
    }

    .fs-md-20 {
        font-size: 1.25rem;
    }

    .fs-md-24 {
        font-size: 1.5rem;
    }

    .fs-md-28 {
        font-size: 1.75rem;
    }

    .fs-md-32 {
        font-size: 2rem;
    }

    .fs-md-36 {
        font-size: 2.25rem;
    }

    .fs-md-40 {
        font-size: 2.5rem;
    }

    .fs-md-45 {
        font-size: 2.8125rem;
    }

    .fs-md-60 {
        font-size: 4rem;
    }

    .w-md-auto {
        width: auto;
    }

    .p-md-30 {
        padding: 1.875rem !important;
    }
}


/*background radial gradient*/
.bg-abs-container {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.dark-hidden {
    display: block;
}

.light-hidden {
    display: none;
}


.table-responsive .simplebar-content::-webkit-scrollbar {
    height: 0;
}


.cursor-pointer {
    cursor: pointer;
}

.no-cursor {
    cursor: none;
}

.cursor-text {
    cursor: text;
}

.cursor-default {
    cursor: default;
}

table.hover-classic tbody tr:hover td {
    background-color: #F9FAFC;
}

table.tr-br-24 tbody td:last-child {
    border-top-right-radius: 24px;
    border-bottom-right-radius: 24px;
}

table.tr-br-24 tbody td:first-child {
    border-top-left-radius: 24px;
    border-bottom-left-radius: 24px;
}

table.table-top-borderless tbody tr:first-child td {
    border-top: 0;
}

/*.tr-selected {
    background-color: #F2F6FA;
}
*/

/*hover section*/
a.bg-transparent-06:hover {
    background: #EBF2FB;
}

span.bg-neutral-grey:hover {
    background: #dde1e7;
}

a.bg-neutral-grey:hover {
    background: #dde1e7;
}


.no-hover-animation:hover {
    transform: none !important;
    transition: none !important;
    background: transparent !important;
}

/*.bg-neutral-grey.no-hover-animation:hover {
    background: #F9FAFC !important;
}*/

.parent:hover .hover-marque {
    animation: marquee 3s linear infinite;
}

.wp-70:hover .hover-marque {
    animation: marquee 3s linear infinite;
}

.wp-40:hover .hover-marque {
    animation: marquee 3s linear infinite;
}

.trade-table-hover tbody tr:hover {
    background: #F2F6FA;
}

.trade-table-hover tbody tr td:first-child {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.trade-table-hover tbody tr td:last-child {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

/*.trade-table-hover tbody td:nth-child(1),
.trade-table-hover tr:hover {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.trade-table-hover tbody tr td:last-child,
.trade-table-hover tr:hover {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}*/


.success-hover:hover {
    background: rgba(33, 166, 144, 0.10);
    color: #21A690 !important;
}

    .success-hover:hover .fa-check-circle {
        color: #21A690 !important;
    }

.failed-hover:hover {
    background: rgba(244, 89, 78, 0.10);
    color: #F4594E !important;
}

    .failed-hover:hover .fa-check-circle {
        color: #F4594E !important;
    }


.gray-hover:hover {
    background: #ebf2fb;
}
/*end hover*/
.parent {
    width: 200px;
    overflow: hidden;
}

.hover-marque {
    white-space: nowrap;
    cursor: auto;
}


 /*Gcash style*/

.gcash-bg-blue {
    background: #155EE0;
}

.gcash-gray {
    color: #445C85;
    opacity: 0.6;
}


.text-gcash-gray {
    color: #6780A9;
}

.text-gcash-dark-blue {
    color: #0A2757;
}

.text-gcash-blue-1 {
    color: #005CE5;
}

.text-gcash-blue-2 {
    color: #2340A9;
}

.text-gcash-gold-1 {
    color: #CA970C;
}

.border-2-gcash-blue-1 {
    border: 2px solid #005CE5;
}

.border-2-gcash-gold-1 {
    border: 2px solid #CA970C;
}

.bg-gcash-dark-blue {
    background: #005CE5;
}

.bg-gcash-dark-blue-1 {
    background: #0A2757;
}

.bg-gcash-gold {
    background: #CA970C;
}

.bg-gcash-gray-01 {
    background: #F6F9FD !important;
}

.bg-gcash-yellow-01 {
    background: #FFF9EB !important;
}

.bg-nav-gcash-blue {
    background: #1972F9 !important;
}

.bg-gradient-gcash-blue {
    background: linear-gradient(115deg, #0597FB 31.38%, #00D5DD 100%);
}

.bg-gradient-gcash-yellow {
    background: linear-gradient(115deg, #FFF0BB 31.38%, #FFD24D 100%);
}

.gcash-border-stripe {
    border: 1px solid #D7E0EF;
}




@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

.form-control:disabled, .form-control[readonly] {
    background: #F9FAFC;
}


/*override nav classes for bid and ask*/
.tranx-nav-tabs {
    border-bottom: 1px solid #EBF2FB !important;
}

    .tranx-nav-tabs .nav-link {
        font-weight: 400;
        border-bottom: 2px solid transparent;
    }

        .tranx-nav-tabs .nav-link.active {
            border: none;
            font-weight: 700;
            background: transparent !important;
        }

        .tranx-nav-tabs .nav-link:hover {
            color: #00BEF9;
            border: none;
            border: 1px solid transparent;
        }

        .tranx-nav-tabs .nav-link.active:hover {
            border: none;
        }

    .tranx-nav-tabs .nav-item {
        margin-bottom: 0 !important;
    }

    .tranx-nav-tabs .nav-link::after {
        display: block;
        content: '';
        width: 50%;
        left: 25%;
        bottom: 0;
        /* height: 1px; */
        border-bottom: solid 3px #00afe6;
        transform: scaleX(0);
        transition: transform 250ms ease-in-out;
        position: absolute;
    }

    .tranx-nav-tabs .nav-link:hover::after {
        transform: scaleX(1);
        border-radius: 20px;
    }

    .tranx-nav-tabs .nav-link.active::after {
        content: "";
        position: absolute;
        left: 14%;
        bottom: 0;
        height: 1px;
        width: 70%; /* or 100px */
        border-bottom: 3px solid #00afe6;
        transform: scaleX(1);
        border-radius: 20px;
    }

/*end override*/

.blink-red {
    background: #F4594E;
    color: #fff !important;
}

.blink-green {
    background: #21A690;
    color: #fff !important;
}

*:disabled {
    cursor: default;
}

.obj-contain {
    object-fit: contain;
}


.border-insufficient-1 {
    border: 1px solid #F4594E !important
}

.ch-port-tab:hover {
    background: #F2F6FA;
    border-radius: 8px;
}


/*end revamp components*/

.svg-text-color {
    background: #19B3E3;
    color: #19B3E3;
    fill: #19B3E3;
}

@keyframes bouncing-fade {
    from {
        transform: translate3d(0, .25rem, 0);
    }

    to {
        opacity: 0.1;
        transform: translate3d(0, -.25rem, 0);
    }
}