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

.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-orange {
    color: #FEB247 !important;
}

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

.text-lavender {
    color: #D4CFFF;
}

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

.text-invg-blue-old {
    color: #25a7df !important;
}

.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-3 {
    color: #21A690 !important;
}

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

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

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

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

.text-violet {
    color: #9990FF;
}

.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-gray-black:hover {
        color: #8b8b8b !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;
}

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

.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;
}

.filter-hover-darker-90:hover {
    filter: brightness(.9);
}

.transform-hover-scale-5:hover {
    transform: scale(1.05);
}

.transform-hover-scale-3:hover {
    transform: scale(1.03);
}

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

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

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

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

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

.text-blue-violet {
    color: #1D57FD !important;
}

.text-blue-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-super-black-1 {
    color: #1D1D1D;
}

.text-crossedout {
    text-decoration: line-through;
}

.color-unset {
    color: unset;
}

.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-full-hover-underline:hover {
    border-bottom: 2px solid #878787;
}

.text-break {
    white-space: break-spaces;
}

.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);
}

.badge-realtime {
    color: #0E7465 !important;
    background-color: #D7F6F3 !important;
}

.badge-delayed {
    color: #31456A !important;
    background-color: #DDE7F3 !important;
}

.border-box {
    box-sizing: border-box;
}

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

.border-green {
    border-color: #21A690 !important;
}

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

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

.border-cyan {
    border-color: #00BEF9 !important;
}
/* Font Sizes */

.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-15 {
    font-size: .94rem;
}

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

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

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

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

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

.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-42 {
    font-size: 42px;
}

.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-800 {
    font-weight: 800 !important;
}

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

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

/* line-heights */

.line-height-1 {
    line-height: 1 !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-standard {
    line-height: normal;
}

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

.leading-25 {
    line-height: 1.563rem;
}

.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;
}



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

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

.br-5 {
    border-radius: 0.313rem;
}

.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;
}

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

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

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

.br-28 {
    border-radius: 1.75rem !important;
}

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

.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;
}

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

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

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

.border-1px-solid {
    border: 1px solid !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-orange-gradient-border {
    border: 1px solid #ED7D5F;
}

.bg-violet-gradient {
    background: #9990FF;
    color: #FFF;
    background: linear-gradient(92deg, #9990FF 1.99%, #5C5699 88.39%);
}

.bg-violet-gradient-border {
    border: 1px solid #5C5699;
}

.bg-gradient-hover {
    background-size: 150%;
    background-position-x: left;
    transition: background .3s ease-in-out;
}

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

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

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

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

.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;
}

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

.bg-redlighten {
    background: #FFEBEA;
}

.hover-bg-redlighten:hover {
    background: #FFEBEA;
}

.hover-bg-white:hover {
    background-color: white;
}

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

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

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

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

.bg-cyan-10 {
    background: #E6F9FE;
}

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

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

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

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

.bg-yellow {
    background: #FDC00F;
}

.bg-yellow-2 {
    background: #FDD551;
}

.bg-yellow-info {
    background: #fcf8e3;
}

.bg-red {
    background: #FA6960;
}

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

.bg-red-3 {
    background: #F4594E;
}

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

.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-blue-info {
    background-color: rgba(0, 190, 249, 0.1) !important;
    color: #00BEF9 !important;
}

    .bg-blue-info.darker {
        background: rgba(0, 190, 249, 0.1) !important;
    }

    .bg-blue-info > * {
        color: #00BEF9 !important;
    }

.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-greenlighten {
    background: #E9F6F4;
}

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

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

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

.bg-green-4 {
    background: #B9F5A4;
}

.bg-green-5 {
    background-color: #00CE89;
}

.bg-hover-green-5-darken:hover {
    background-color: #03BF80;
}

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

.bg-green-neon {
    background-color: #ADF693;
}

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

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

.bg-color-floor {
    background: #F9FAFC;
}

.bg-textprimary {
    background: #3E3E3E;
}

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

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

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

.hover-bg-pearl-blue:hover {
    background-color: #F2F6FA !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;
}

.border-hover-transparent:hover {
    border-color: transparent !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-binance {
    background: #F5F5F5;
}

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

.bg-surface-3 {
    background: #EAEFF5;
}


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

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

.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-yellowgold {
    background-color: #FFBE00;
}


/* 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-2px {
    padding-left: 2px !important;
    padding-right: 2px !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;
}

.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-8 {
    margin-top: 0.5rem !important;
}

.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;
}

.mr-36 {
    margin-right: 2.25rem !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;
}

/* 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;
}

.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 !important;
}

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

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

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

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

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

.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-0 {
    opacity: 0;
}

.hover-opacity-75:hover {
    opacity: .75;
}

.minh-200 {
    min-height: 200px;
}

.minh-300 {
    min-height: 300px;
}

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

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

.minh-100 {
    min-height: 100%;
}

.maxh-100 {
    max-height: 100%;
}

.minh-100vh-lessnavh {
    min-height: calc(100vh - 55px); /*navheightis = 55px*/
    min-height: calc(100dvh - 55px);
}

.mh-100vh-lessnavh {
    max-height: calc(100vh - 55px); /*navheightis = 55px*/
    max-height: calc(100dvh - 55px);
}

.h-100vh-lessnavh {
    height: calc(100vh - 55px); /*navheightis = 55px*/
    height: calc(100dvh - 55px);
}

.top-navh {
    top: 55px; /*navheightis = 55px*/
}

@media (max-width: 1199px) {

    .minh-100vh-lessnavh {
        min-height: calc(100vh - 69px); /*navheightis = 55px*/
        min-height: calc(100dvh - 69px);
    }

    .mh-100vh-lessnavh {
        max-height: calc(100vh - 69px); /*navheightis = 55px*/
        max-height: calc(100dvh - 69px);
    }

    .h-100vh-lessnavh {
        height: calc(100vh - 69px); /*navheightis = 55px*/
        height: calc(100dvh - 69px);
    }

    .top-navh {
        top: 69px; /*navheightis = 55px*/
    }
}

/*max width*/

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

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

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

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


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

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

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

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

.w-100vw {
    width: 100vw;
}

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

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

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

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

.h-25 {
    height: 25px !important;
}

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

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

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

/*box shadow*/
.boxshadow-1 {
    box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, 0.10);
}

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

.gap-4 {
    gap: 4px;
}

.gap-6 {
    gap: 6px;
}

.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-24 {
    column-gap: 24px;
}

.gap-40 {
    gap: 40px;
}

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

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

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

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

.gap-32 {
    gap: 32px;
}

.gap-36 {
    gap: 36px;
}

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

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

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

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

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

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

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

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

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

.border-color-focus-cyan:focus {
    border-color: #00bef9 !important;
}
/*button*/

.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;
}

.hover-cyan-20:hover {
    background: #E6F9FE;
}

.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: #EBEBEB !important;
    color: #AFAFAF !important;
    cursor: default;
}

.invg-btn-disabled-2 {
    background: #EAEFF5 !important;
    color: #AFAFAF !important;
    cursor: default;
}

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

    .invg-btn-blue:hover {
        color: #fff;
        background: #1c7bbf;
    }

    .invg-btn-blue.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-cyan-10 {
    background: rgba(0, 190, 249, 0.10);
    color: #00BEF9;
}

    .invg-btn-cyan-10:hover {
        background: #428bca !important;
        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;
}

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

.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-blue-fix {
    padding: 8px 16px;
    background: #00BEF9;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 700;
    color: #F7F9F9;
    transition: .15s all linear;
}

.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;
}

.flex-equals > * {
    flex: 1 1 0;
}
/*dropdown*/
.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;
}

/* 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;*/
}

/* 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;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-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 #DDE7F3;
    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-item.show .nav-link, .nav-tabs .nav-link.active {
    background: #EBF2FB !important;
    border-radius: 12px;
    color: #985CFD;
    border-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 #65CAE9 !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;
}

/*neon green*/

.op-neon-green-select .nav-link.active {
    border-radius: 8px;
    background: rgba(88, 210, 15, 0.10) !important;
    box-shadow: 0px 3px 50px 0px rgba(49, 69, 106, 0.05) !important;
}

.op-navtabs .op-neon-green-select .nav-link.active p {
    color: #58D20F;
}

.op-navtabs .op-neon-green-select .nav-link.active .tab-rv-img {
    background: #58D20F;
    box-shadow: 0px 4px 20px 0px #58D20F;
    opacity: 1;
}

.op-navtabs .op-neon-green-select .nav-link:hover p {
    color: #58D20F;
}

.op-navtabs .op-neon-green-select .nav-link:hover .tab-rv-img {
    background: #58D20F;
    box-shadow: 0px 4px 20px 0px #58D20F;
    opacity: 1;
}

.op-navtabs .op-neon-green-select.show .nav-link:hover {
    background: rgba(88, 210, 15, 0.10) !important;
    border-radius: 12px;
    color: #58D20F;
    border-color: transparent !important;
}

/*violet*/

.op-violet-select .nav-link.active {
    border-radius: 8px;
    background: rgba(108, 56, 255, 0.10) !important;
    box-shadow: 0px 3px 50px 0px rgba(49, 69, 106, 0.05) !important;
}

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

.op-navtabs .op-violet-select .nav-link.active .tab-rv-img {
    background: #6C38FF;
    box-shadow: 0px 4px 20px 0px #6C38FF;
    opacity: 1;
}

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

.op-navtabs .op-violet-select .nav-link:hover .tab-rv-img {
    background: #6C38FF;
    box-shadow: 0px 4px 20px 0px #6C38FF;
    opacity: 1;
}

.op-navtabs .op-violet-select.show .nav-link:hover {
    background: rgba(108, 56, 255, 0.10) !important;
    border-radius: 12px;
    color: #6C38FF;
    border-color: transparent !important;
}

/*dark orange*/

.op-dark-orange-select .nav-link.active {
    border-radius: 8px;
    background: rgba(255, 140, 56, 0.10) !important;
    box-shadow: 0px 3px 50px 0px rgba(49, 69, 106, 0.05) !important;
}

.op-navtabs .op-dark-orange-select .nav-link.active p {
    color: #FF8C38;
}

.op-navtabs .op-dark-orange-select .nav-link.active .tab-rv-img {
    background: #FF8C38;
    box-shadow: 0px 4px 20px 0px #FF8C38;
    opacity: 1;
}

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

.op-navtabs .op-dark-orange-select .nav-link:hover .tab-rv-img {
    background: #FF8C38;
    box-shadow: 0px 4px 20px 0px #FF8C38;
    opacity: 1;
}

.op-navtabs .op-dark-orange-select.show .nav-link:hover {
    background: rgba(255, 140, 56, 0.10) !important;
    border-radius: 12px;
    color: #FF8C38;
    border-color: transparent !important;
}


.tab-rv-img {
    border-radius: 6px;
    opacity: 0.15;
    background: #3E3E3E;
    backdrop-filter: blur(4.5px);
}


/*Insurance tabs*/
.op-navtabs .op-neon-orange-select .nav-link.active p {
    color: #FF3800;
}

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

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

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

.op-navtabs .op-neon-orange-select .nav-link:hover {
    background: #EBF2FB !important;
    border-radius: 12px;
    color: #FF3800;
    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;
}

.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;
    /*border-top-left-radius: 5px;
    border-top-right-radius: 5px;*/
}

.op-tabs-img {
    width: 1.18rem;
    height: 1.18rem;
    border: 2px solid #CFDCE8 !important;
}

.tab-blue-border-bottom-onactive.active,
.tab-blue-border-bottom-onactive .active {
    position: relative;
}

    .tab-blue-border-bottom-onactive.active::before,
    .tab-blue-border-bottom-onactive .active::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 47px;
        height: 2px;
        border-radius: 20px;
        background-color: #00BEF9;
    }
/*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;
}

.onCollapsed-rotate {
    transition: transform .2s ease-in-out;
    transform: rotate(180deg) !important;
}

    .onCollapsed-rotate.rotated {
        transform: rotate(360deg) !important;
    }

/*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;
    }

@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;
    }
/*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;
}

.table-card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.table-card {
    width: 268px;
    border-radius: 8px;
}


.table-list {
    width: 100%;
    border-radius: 8px;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
    margin-left: 0.25rem;
    margin-right: 0.25rem;
    padding-top: 0.50rem;
}



.table-list-feats {
    width: 400px;
    border-radius: 8px;
}


/* 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);
    }

.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;
}

@media (max-width: 768px) {

    .w-mobile-100 {
        width: 100% !important;
    }

    .w-mobile-50 {
        width: 50% !important;
    }

    .gap-20-mobile-12 {
        gap: 12px !important;
    }
}

@media (max-width: 400px) {

    .text-truncate-max {
        max-width: 50px;
    }

    .w-mobile-s-100 {
        width: 100% !important;
    }

    .w-mobile-auto {
        width: auto !important;
    }

    .gap-mobile-s-0 {
        gap: 0;
    }

    .min-h-mobile-unset {
        min-height: unset !important;
    }

    .min-w-mobile-unset {
        min-width: unset !important;
    }
}


/* 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;
}

.overflow-x-hidden {
    overflow-x: hidden;
}

.overflow-y-hidden {
    overflow-y: hidden;
}

.overflow-x-auto {
    overflow-x: auto;
}

.overflow-y-auto {
    overflow-y: auto;
}

.overflow-x-scroll {
    overflow-x: scroll;
}

.overflow-y-scroll {
    overflow-y: scroll;
}

@media (min-width: 992px) {
    .scroll-x-onhover,
    .scroll-y-onhover {
        overflow: hidden;
    }

        .scroll-y-onhover:hover {
            overflow-y: auto;
            overflow-x: hidden;
        }

        .scroll-x-onhover:hover {
            overflow-x: auto;
            overflow-y: hidden;
        }

    .scroll-y-invisible,
    .scroll-x-invisible {
        white-space: nowrap; /* Prevent wrapping of child elements */
        -ms-overflow-style: none; /* Hide scrollbar in Internet Explorer */
        scrollbar-width: none; /* Hide scrollbar in Firefox */
    }

    .scroll-y-invisible {
        overflow-x: auto; /* Enable horizontal scrolling */
        overflow-y: hidden; /* Hide vertical scrollbar */
    }

    .scroll-x-invisible {
        overflow-y: auto; /* Enable horizontal scrolling */
        overflow-x: hidden; /* Hide vertical scrollbar */
    }

        .scroll-y-invisible::-webkit-scrollbar,
        .scroll-x-invisible::-webkit-scrollbar {
            display: none; /* Hide scrollbar in Chrome, Safari and Opera */
        }

    .scroll-x-invisible-showonhover {
        overflow-x: scroll;
    }

        .scroll-x-invisible-showonhover:not(:hover)::-webkit-scrollbar-track,
        .scroll-x-invisible-showonhover:not(:hover)::-webkit-scrollbar-thumb {
            opacity: 0;
            background-color: transparent !important;
        }
}


.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;
    }

    .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;
}

.no-hover-animation:hover {
    transform: none !important;
    transition: none !important;
}

.img-hover {
    transition: 0.5s ease;
    transform: scale(0.95);
}

    .img-hover:hover {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        transition: 0.4s ease;
    }


@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);
    }
/*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;
}

.user-select-all {
    user-select: all;
}

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

.v-align-middle {
    vertical-align: middle;
}
/*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 */
}

.scroll-x-4::-webkit-scrollbar {
    height: 4px !important;
}

.scroll-x-12::-webkit-scrollbar {
    height: 12px;
}

.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;
    }

/*.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;
}

@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;
    }
}

.dot-blue {
    width: 10px;
    height: 10px;
    background: #00BEF9;
    border-radius: 50%
}

.dot-default {
    width: 10px;
    height: 10px;
    background: #D9D9D9;
    border-radius: 50%
}


/*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;
}

/*vtrade new component styles*/
.button-v1 {
    background-color: #fff;
    border: 1px solid #00BEF9;
    box-shadow: 3px 3px 20px 0px rgba(49, 69, 106, 0.10);
}

    .button-v1:hover {
        background-color: #EBF2FB;
    }

.blue-dots-slider {
    width: 8px;
    height: 8px;
    cursor: pointer;
    background-color: #EBF2FB;
}

    .blue-dots-slider.active {
        background-color: #00BEF9;
    }

.tab-v1 {
    cursor: pointer;
    color: #3E3E3E;
    border: 1px solid #EBF2FA;
}

    .tab-v1:not(.active):hover {
        border: 1px solid transparent;
        background-color: #F9FAFC;
    }

.tav-v1-hover-white:not(.active):hover {
    background-color: #fff;
}

.tab-v1:not(.tab-v1-light).active {
    color: #fff;
    background-color: #00BEF9;
}

.tab-v1.tab-v1-light.active {
    background-color: #F2F6FA;
}

.input-search-v1 {
    position: relative;
}

.input-v1 {
    background-color: #fff;
    border: 1px solid #F2F6FA;
}

    .input-v1:active,
    .input-v1:focus {
        border: 1px solid #00BEF9;
    }

.svg-fill-primary {
    fill: #3E3E3E;
}

.svg-stroke-primary {
    fill: #3E3E3E;
}

.svg-fill-secondary {
    fill: #EBF2FB;
}

.svg-stroke-secondary {
    stroke: #EBF2FB;
}

.icons-compiler {
    display: flex;
}

.icons-compiler-icon {
    width: 11px;
}

.image-holder {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.breadcrumb-v1-item {
    color: #AFAFAF;
}

    .breadcrumb-v1-item:not(:last-child)::after {
        content: '/';
        margin: 0 .25rem;
    }

    .breadcrumb-v1-item.active {
        color: #3E3E3E;
    }

    .breadcrumb-v1-item:not(.active):hover {
        color: #3E3E3E;
    }

.table-v1 {
    border-collapse: separate;
    border-spacing: 0 8px;
}

    .table-v1.table-v1-py-6 td {
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .table-v1 tr {
        outline: 1px solid #F9FAFC;
        border-radius: 1rem;
        transition-delay: 0;
    }

        .table-v1 tr:not(.no-hover):hover {
            background-color: #F9FAFC;
            transition-delay: .2s;
        }

    .table-v1 td {
        border-top: 0;
    }

    .table-v1 tr > td:first-child {
        border-top-left-radius: 1rem;
        border-bottom-left-radius: 1rem;
        border-left: 1px solid #F9FAFC;
    }

    .table-v1 tr > td:last-child {
        border-top-right-radius: 1rem;
        border-bottom-right-radius: 1rem;
        border-right: 1px solid #F9FAFC;
    }

@media (max-width: 768px) {
    .w-mobile-100 {
        width: 100% !important;
    }

    .w-mobile-50 {
        width: 50% !important;
    }

    .mw-mobile-100 {
        max-width: 100% !important;
    }

    .minw-mobile-auto {
        min-width: auto !important;
    }
}

.border-half-middlesonly > *:not(:last-child) {
    border-right: 1px solid #EBF2FB;
}

.padding-edges-0 > *:first-child {
    padding-left: 0 !important;
}

.padding-edges-0 > *:last-child {
    padding-right: 0 !important;
}

.border-color-v1 {
    border-color: #F2F6FA !important;
}

.border-color-v2 {
    border-color: #EBF2FB !important;
}

.border-color-v3 {
    border-color: #EAEFF5 !important;
}

.border-color-v4 {
    border-color: #E0E6EF !important;
}

.border-dashed {
    border-style: dashed !important;
}

.border-2 {
    border-width: 2px !important;
}

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

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

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

.fw-400-placeholder::placeholder {
    font-weight: 400;
}

.text-grey-placehoder::placeholder {
    color: #AFAFAF;
}
/* The container */
.radio-button-custom.container {
    display: block;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .radio-button-custom.container input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }

.radio-button-v1 .checkmark {
    background-color: #fff;
    outline: solid 1px #CFDCE8;
}

.radio-button-v1.container:hover input ~ .checkmark {
    background-color: #EBF2FB;
    border: 2px solid #fff;
}

.radio-button-v1.container input:checked ~ .checkmark {
    outline-color: #00BEF9;
    border: 2px solid #fff;
    background-color: #00BEF9;
}

.dropdown-custom .dropdown-toggle::after {
    display: none;
}

.dropdown-custom .dropdown-item {
    cursor: pointer;
}

.checker-v1 > .check {
    opacity: 0;
}

.checker-v1.checked > .check {
    opacity: 1;
}


.search-pointer {
    cursor: pointer;
    color: #212529;
}

    .search-pointer:hover {
        color: #212529 !important;
    }

.cursor-notallowed {
    cursor: not-allowed;
}

/*bg color hover*/

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

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

.bg-hover-surface-4:hover {
    background-color: #E0E6EF !important;
}

.border-hover-color-v4:hover {
    border-color: #E0E6EF !important;
}

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

.bg-hover-green-light-darken:hover {
    background-color: #CCF2FE !important;
}

.bg-hover-green-neon:hover {
    background-color: #A1E589;
}