:root{
    --base: var(--base-h) var(--base-s) var(--base-l);
    --base-rgb: rgb(--base-r), var(--base-g), var(--base-b);
    --base-rgba: rgb(--base-r), var(--base-g), var(--base-b), var(--base-a);
    --base-hover: var(--base-h) var(--base-s) calc(var(--base-l) - 10%);
    --primary: var(--base-h) var(--base-s) calc(var(--base-l) - 10%);
    --primary-hover: var(--base-h) var(--base-s) calc(var(--base-l) - 20%);
    --border-color: #dfdfdf;
    --tb-primary-rgb: var(--base-r), var(--base-g), var(--base-b);
    -tb-vertical-menu-item-active-color : var(--base-h) var(--base-s) calc(var(--base-l) - 20%);
    --tb--primary: hsl(var(--primary));
    --tb--secondary-o: rgba(var(--tb-primary-rgb), .3);
    --tb--base-secondary: hsl(var(--base-h) var(--base-s) calc(var(--base-l) - 30%));
    --animate-duration: 1s;
    --animate-delay: 1s;
    --animate-repeat: 1
}

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

.text-primary{
    color: hsl(var(--primary)) !important;
}
.badge-label.bg-primary:before {
    border-right-color: hsl(var(--primary)) !important;
}
.bg-primary{
    --tb-bg-opacity: 1;
    background-color: hsl(var(--primary)) !important;
}
.border-primary{
    border-color: hsl(var(--primary)) !important;
}
.btn-primary, .btn--base{
    /* background-color: hsl(var(--primary)) !important; */
    background-color: #474034!important;
    border-color: hsl(var(--primary)) !important;
}
.btn--base{
    color: #fff !important;
}

.btn-primary:hover, .btn--base:hover{
    background-color: hsl(var(--primary-hover)) !important;
    border-color: hsl(var(--primary-hover)) !important;
}

.jp-card .jp-card-back, .jp-card .jp-card-front {
    background: hsl(var(--primary-hover)) !important;
}

.form-control, .form-select, .form-check .form-check-input{
    border-color: #dfdfdf !important;
}

.input-group-text {
    /* background-color: hsl(var(--primary)); */
    background-color: #d3ac5f;
    color: #fff;
}

.badge--warning, .badge--success, .badge--dark, .bg-warning-subtle, .bg-warning-subtle, .bg-success-subtle, .bg-primary-subtle, .bg-secondary-subtle, .badge--info{
    border-left: 2px solid;
}

.badge--info {
    --tb-text-opacity: 1;
    color: rgba(var(--tb-info-rgb),var(--tb-text-opacity))!important;
    background-color: var(--tb-info-bg-subtle) !important;
}

.badge-outline-primary{
    border-color: hsl(var(--primary)) !important;
    color: hsl(var(--primary)) !important;
}

.badge--warning{
    background-color: var(--tb-warning-bg-subtle) !important;
    --tb-text-opacity: 1;
    color: rgba(var(--tb-warning-rgb),var(--tb-text-opacity))!important;
}

.badge--success{
    background-color: var(--tb-success-bg-subtle) !important;
    --tb-text-opacity: 1;
    color: rgba(var(--tb-success-rgb),var(--tb-text-opacity)) !important;
}

/* .text-primary{
    background-color: var(--tb-warning-bg-subtle) !important;
} */

.badge--dark{
    --tb-text-opacity: 1;
    background-color: var(--tb-dark-bg-subtle) !important;
    color: #2b313e;
}

.badge--danger{
    --tb-text-opacity: 1;
    background-color: var(--tb-danger-bg-subtle) !important;
    color: rgba(var(--tb-danger-rgb),var(--tb-text-opacity)) !important;
}

.navbar-menu .navbar-nav .nav-link.active {
    color: hsl(var(--tb-vertical-menu-item-active-color)) !important;
}

.bg-primary-opacity-10{
    --tb-bg-opacity: 1;
    background-color: rgba(var(--tb-primary-rgb),var(--tb-bg-opacity))!important;
}

.bg-opacity-10 {
    --tb-bg-opacity: 0.1 !important;
}

.ribbon-box.right .ribbon-primary, .ribbon-box .ribbon-primary,.ribbon-box .ribbon-primary.ribbon-shape::before  {
    background: hsl(var(--primary)) !important;
}

.ribbon-box .ribbon-primary.ribbon-shape::after {
    background-color: rgba(var(--tb-primary-rgb), .1)!important;
}

.accordion-button:not(.collapsed) {
    background-color: rgba(var(--tb-primary-rgb), .25)!important;
}

.card-radio .form-check-input:checked+.form-check-label {
    border-color: hsl(var(--primary)) !important;
}

.card-radio .form-check-input:checked+.form-check-label:before {
    color: hsl(var(--primary)) !important;
}
.page-link {
    color: hsl(var(--primary)) !important;
}
.active>.page-link, .page-link.active {
    z-index: 3;
    color: #fff !important;
    background-color: hsl(var(--primary)) !important;
    border-color: hsl(var(--primary)) !important;
}

.form-check-input:checked {
    background-color: hsl(var(--primary)) !important;
    border-color: hsl(var(--primary)) !important;
}

.bg-primary-opacity-10  .form-control {
    background-color: rgba(var(--tb-primary-rgb), .1)!important;
}

.card-border-primary{
    border-color: hsl(var(--primary)) !important;
}

.bg-primary-subtle {
    background-color: rgba(var(--tb-primary-rgb), .25) !important;
}

.invest-badge__thumb__mask {
    content: "";
    width: 126px;
    height: 142px;
    display: inline-block;
    background: #747474;
    -webkit-mask: url(../images/shape.png) no-repeat 50% 50%;
    mask-image: url(../images/shape.png);
    mask-size: auto;
    -webkit-mask-size: cover;
    mask-size: contain;
    max-width: 100%;
    max-height: 100%;
    line-height: 10;
    position: relative;
    transition: 0.5s;
}

.invest-badge__thumb__mask::before {
    height: var(--before-height);
}

.invest-badge__thumb__mask::before {
    position: absolute;
    content: '';
    width: 100%;
    background: hsl(var(--primary));
    left: 0;
    bottom: 0;
    z-index: -1;
    transition: .3s linear;
}

.invest-badge:hover .invest-badge__thumb__mask::before {
    height: 100%;
}

.invest-badge__thumb__mask img {
    margin: 0 auto;
    width: 100px;
    height: 100px;
}

.badge-lock img {
    filter: grayscale(100%);
}

.badge-lock::before {
    position: absolute;
    content: '';
    height: 100%;
    width: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9;
    opacity: 0.1;
    background-color: transparent;
}

.badge-lock::after {
    position: absolute;
    content: "\ee0d";
    font-family: boxicons!important;
    font-weight: 900;
    font-size: 35px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    visibility: visible;
    transition: 0.5s;
    z-index: 99;
    color: hsl(206 70% 11%);
}


.ribbon-box .ribbon-offline {
    background: #ACACAC;
}
.ribbon-offline .ribbon-offline.ribbon-shape::before {
    background-color: #ACACAC !important;
}

.ribbon-box .ribbon-offline:before {
    border-color: #ACACAC !important;
}

.ribbon-box .ribbon-offline.ribbon-shape::before {
    background-color: #ACACAC !important;
}

.text-offine{
    color: #ACACAC !important;
}

.treemap-elem[treemap-color=light] label.elem-label:before {
    color: hsl(var(--primary)) !important;
}

.star-rating {
    width: 0;
    position: relative;
    display: inline-block;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDguOSIgaGVpZ2h0PSIxMDMuNiIgdmlld0JveD0iMCAwIDEwOC45IDEwMy42Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2UzZTZlNjt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPnN0YXJfMDwvdGl0bGU+PGcgaWQ9IkxheWVyXzIiIGRhdGEtbmFtZT0iTGF5ZXIgMiI+PGcgaWQ9IkxheWVyXzEtMiIgZGF0YS1uYW1lPSJMYXllciAxIj48cG9seWdvbiBjbGFzcz0iY2xzLTEiIHBvaW50cz0iMTA4LjkgMzkuNiA3MS4zIDM0LjEgNTQuNCAwIDM3LjYgMzQuMSAwIDM5LjYgMjcuMiA2Ni4xIDIwLjggMTAzLjYgNTQuNCA4NS45IDg4LjEgMTAzLjYgODEuNyA2Ni4xIDEwOC45IDM5LjYiLz48L2c+PC9nPjwvc3ZnPg0K);
    background-position: 0 0;
    background-repeat: repeat-x;
    cursor: pointer;
}

.star-rating .star-value {
    position: absolute;
    height: 100%;
    width: 100%;
    background: url(data:image/svg+xml;base64,PHN2Zw0KCXhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwOC45IiBoZWlnaHQ9IjEwMy42IiB2aWV3Qm94PSIwIDAgMTA4LjkgMTAzLjYiPg0KCTxkZWZzPg0KCQk8c3R5bGU+LmNscy0xe2ZpbGw6I2YxYzk0Nzt9PC9zdHlsZT4NCgk8L2RlZnM+DQoJPHRpdGxlPnN0YXIxPC90aXRsZT4NCgk8ZyBpZD0iTGF5ZXJfMiIgZGF0YS1uYW1lPSJMYXllciAyIj4NCgkJPGcgaWQ9IkxheWVyXzEtMiIgZGF0YS1uYW1lPSJMYXllciAxIj4NCgkJCTxwb2x5Z29uIGNsYXNzPSJjbHMtMSIgcG9pbnRzPSI1NC40IDAgNzEuMyAzNC4xIDEwOC45IDM5LjYgODEuNyA2Ni4xIDg4LjEgMTAzLjYgNTQuNCA4NS45IDIwLjggMTAzLjYgMjcuMiA2Ni4xIDAgMzkuNiAzNy42IDM0LjEgNTQuNCAwIi8+DQoJCTwvZz4NCgk8L2c+DQo8L3N2Zz4NCg==);
    background-repeat: repeat-x;
}

.btn-soft-primary {
    --tb-btn-color: hsl(var(--primary)) !important;
    --tb-btn-bg: rgba(var(--tb-primary-rgb), 0.3) !important;
    --tb-btn-hover-bg: hsl(var(--primary-hover)) !important;
    --tb-btn-active-bg: hsl(var(--primary-hover)) !important;
}

.animation-nav li a::before{
    background-color: hsl(var(--base)) !important;
}

.button>.inner>button>span {
    border: 1px solid hsl(var(--primary-hover)) !important;;
    border-color: rgba(var(--tb-primary-rgb),0.1);
    border-bottom-color: hsl(var(--primary-hover)) !important;;
    border-bottom-color: hsl(var(--primary-hover)) !important;;
}

.button>.inner>button {
    background-image: -moz-linear-gradient(hsl(var(--primary)), hsl(var(--primary-hover))) !important;
    background-image: -ms-linear-gradient(hsl(var(--primary)), hsl(var(--primary-hover))) !important;
    background-image: -o-linear-gradient(hsl(var(--primary)), hsl(var(--primary-hover))) !important;
    /* background-image: -webkit-linear-gradient(hsl(var(--primary)), hsl(var(--primary-hover))) !important; */
    background-image: -moz-linear-gradient(hsl(var(--primary)), hsl(var(--primary-hover))) !important;
    background-image: -ms-linear-gradient(hsl(var(--primary)), hsl(var(--primary-hover))) !important;
    background-image: -o-linear-gradient(hsl(var(--primary)), hsl(var(--primary-hover))) !important;
    background-image: linear-gradient(hsl(var(--primary)), hsl(var(--primary-hover))) !important;
}

.badge--primary {
    background-color: rgba(var(--tb-primary-rgb), .25) !important;
    color: hsl(var(--primary)) !important;
    border-left: 2px solid;
}

.navbar-menu .navbar-nav .nav-link:hover, .navbar-menu .navbar-nav .nav-link.active {
    color: hsl(var(--primary)) !important;
}

.hover-input-popup {
	position: relative;
}
.input-popup {
	display: none;
}


.hover-input-popup .input-popup{
    position: absolute;
    bottom: 100%;
    left: calc(50% - 111px) !important;
    z-index: 1070;
    display: block;
    max-width: 300px;
    font-family: "Gantari", sans-serif;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    white-space: normal;
    word-spacing: normal;
    line-break: auto;
    padding: 20px;
    font-size: 0.7930125rem;
    word-wrap: break-word;
    background-color: hsl(var(--base-h) var(--base-s) calc(var(--base-l) + 30%)) !important;
    background-clip: padding-box;
    border: 1px solid #eff2f7;
    border-radius: 0.3rem;
}


.input-popup p{
    margin-bottom: 8px !important;
}

.input-popup p:nth-last-child(1) {
    margin-bottom: 0 !important;
} 

.input-popup p:before{
    font-family: boxicons !important;
    font-weight: 400;
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto;
    display: inline-block;
    text-transform: none;
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.input-popup p.error:before{
    content: "\ec8e";
    color: red !important;
    margin-right: 5px;
}

.input-popup p.success:before{
    content: "\ea46";
    color: green !important;
    margin-right: 5px;
}

.input-popup::before, .input-popup::after{
    position: absolute;
    display: block;
    content: "";
    border-color: transparent;
    border-style: solid;
    /* border-width: 0; */
    border-width: 0.5rem calc(1rem * .5) 0;
    bottom: -8px;
    left: calc(50% - 8px);
    border-top-color: hsl(var(--base-h) var(--base-s) calc(var(--base-l) + 30%)) !important;
}

@media (max-width: 575.98px) {
    .trx .bal{
        display: block;
        width: 100% !important;
    }
}

.card{
    border-color: #d4d8e0;
}

.card.trx.border-primary{
    border-color: rgba(var(--tb-primary-rgb), .35) !important;
}


.pagination{
    margin-bottom: 0 !important;
    float: right !important;
}

.bg-primary-light{
    background-color: hsl(var(--base-h) var(--base-s) calc(var(--base-l) + 30%)) !important;
}

.cookies-card__icon{
    font-size: 100px !important;
}

@keyframes bounceIn {

    0%,
    20%,
    40%,
    60%,
    80%,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }

    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1)
    }

    40% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9)
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03)
    }

    80% {
        -webkit-transform: scale3d(.97, .97, .97);
        transform: scale3d(.97, .97, .97)
    }

    to {
        opacity: 1;
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

.animate__bounceIn {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-duration: calc(var(--animate-duration) * 2);
    animation-duration: calc(var(--animate-duration) * 2);
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn
}

@-webkit-keyframes slideInDown {
    0% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        visibility: visible
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes slideInDown {
    0% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        visibility: visible
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.animate__slideInDown {
    -webkit-animation-name: slideInDown;
    animation-name: slideInDown
}

.cookies-card .modal-dialog{
    margin-right: auto !important;
    margin-left: auto !important;
}

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

.topbar-user .user-avater{
    font-size: 30px !important;
    font-weight: lighter;
    color: #747474 !important;
}

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

.select2-container {
    z-index: 99999999999 !important;
}
.select2-container {
    width: 100% !important;
}
.select2-container {
    box-sizing: border-box;
    display: inline-block;
    margin: 0;
    position: relative;
    vertical-align: middle;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #F0F5F8;
    border-color: #D7D7D7;
}

.select2-container .select2-selection--multiple {
    min-height: 43px !important;
}