/*IM3*/
:root {
    --first-color: #fcd403;
    --second-color: #ed1e26;
    --third-color: #242022;
}



/* plus-jakarta-sans-300 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Plus Jakarta Sans-300';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/plus-jakarta-sans-v12-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* plus-jakarta-sans-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Plus Jakarta Sans-regular';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/plus-jakarta-sans-v12-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* plus-jakarta-sans-600 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Plus Jakarta Sans-600';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/plus-jakarta-sans-v12-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* plus-jakarta-sans-700 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Plus Jakarta Sans-700';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/plus-jakarta-sans-v12-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* plus-jakarta-sans-800 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Plus Jakarta Sans-800';
    font-style: normal;
    font-weight: 800;
    src: url('../fonts/plus-jakarta-sans-v12-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

.font-plus-jakarta-sans-300 {font-family: 'Plus Jakarta Sans-300';}
.font-plus-jakarta-sans-regular {font-family: 'Plus Jakarta Sans-regular';}
.font-plus-jakarta-sans-600 {font-family: 'Plus Jakarta Sans-600';}
.font-plus-jakarta-sans-700 {font-family: 'Plus Jakarta Sans-700';}
.font-plus-jakarta-sans-800 {font-family: 'Plus Jakarta Sans-800';}

/*Width Custom*/
.fs-xxs { font-size: .575rem !important}
.fs-xs { font-size: .675rem !important}
.fs-sm { font-size: .775rem !important}

.fs-md { font-size: .950rem !important}
.fs-md2 { font-size: .850rem !important}
.fs-lg {font-size: 1.125rem !important;}
.fs-xl {font-size: 2.5rem !important;}
.fs-xxl {font-size: 3rem !important;}
.fs-xxxl {font-size: 4rem !important;}
.cur-pointer {cursor: pointer !important;}
.full-index-1 {z-index: 11 !important;}
.full-index-2 {z-index: 1030 !important;}
.full-index-3 {z-index: 1055!important}
.py-1a {
    padding-top: .2rem !important;
    padding-bottom: .2rem !important;
}
.imgCont {overflow: hidden}
.limit-text-1a {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}
.limit-text-1,
.limit-text-2,
.limit-text-3,
.limit-text-4 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box!important;
    -webkit-box-orient: vertical;
}
.limit-text-1 {
    -webkit-line-clamp: 1;
    display: block!important;
}
.limit-text-2 {
    -webkit-line-clamp: 2;
}
.limit-text-3 {
    -webkit-line-clamp: 3;
}
.limit-text-4 {
    -webkit-line-clamp: 4;
}
.text-orangered { color: orangered !important}

.sticky-offset-top-1 {
    top: 1rem !important;
}
.sticky-offset-top-2 {
    top: 2.5rem !important;
}
.sticky-offset-top-3 {
    top: 3.5rem !important;
}
.sticky-offset-top-4 {
    top: 4rem!important;
}
.sticky-offset-top-5 {
    top: 5rem!important;
}
.sticky-offset-top-6 {
    top: 6rem!important;
}
.sticky-offset-bottom-1 {
    bottom: .5rem !important;
}
.sticky-offset-bottom-2 {
    bottom: 2.5rem !important;
}
.sticky-offset-bottom-3 {
    bottom: 3.5rem !important;
}
.sticky-offset-bottom-4 {
    bottom: 4rem!important;
}
.sticky-offset-bottom-5 {
    bottom: 5rem!important;
}


/*Text Color Custom*/
.bg-custom {
    background-color: var(--first-color) ;
}
.border-custom {
    border-color: var(--first-color);
}


.bg-medium-light {
    background-color: #c5c5c5;
}
/*.text-orange {color: var(--fourth-color) !important;}*/
.text-bluegreen {color: #03bcc5 !important;}
/*.bg-orange {background-color: var(--fourth-color) !important;}*/

.bg-zebra {
    background: repeating-linear-gradient(45deg, #edeffb, #edeffb 10px, #f8f9fa 10px, #f8f9fa 20px) !important;
}
.bg-low-light {
    background-color: rgb(243 243 243) !important;
}

/*Button Custom*/
.btn-custom-1 {
    background: var(--btn-color);
    border-color: #e6c100;
    color: var(--third-color);
}
.btn-outline-custom-1 {
    background: #FFFFFF;
    border-color: var(--first-color);
    color: #000000;
}
.btn-outline-custom-1:hover {
    background: var(--first-color) !important;
    color: #ffffff !important;
}
.btn-custom-2 {
    background-color: var(--second-color);
    border-color: var(--second-color);
    color: #FFFFFF;
}


.bg-custom-gradation,
.btn-custom-gradation {
    background: -webkit-linear-gradient(90deg,var(--c1, #f6d365),var(--c2, #fda085) 51%,var(--c1, #f6d365)) var(--x, 0)/200%;
    background: -moz-linear-gradient(90deg,var(--c1, #f6d365),var(--c2, #fda085) 51%,var(--c1, #f6d365)) var(--x, 0)/200%;
    background: -o-linear-gradient(90deg,var(--c1, #f6d365),var(--c2, #fda085) 51%,var(--c1, #f6d365)) var(--x, 0)/200%;
    background: linear-gradient(90deg,var(--c1, #f6d365),var(--c2, #fda085) 51%,var(--c1, #f6d365)) var(--x, 0)/200%;
    border-color: var(--c3, #EF6507);
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s;
    transition: .5s
}

.btn:hover {
    --x: 100%;
    color: #000
}

.btn-1 {
    --c1: var(--first-color);
    --c2: var(--third-color);
    --c3: var(--third-color);
}
.btn-2 {
    --c1: #c2eafb;
    --c2: #f1acff;
    --c3: #b799f7;
}

.btn-3 {
    --c1: #fcef07;
    --c2: #deb104;
    --c3: #d79506;
}
.btn-4 {
    --c1: #a6ffdd;
    --c2: #77e7ff;
    --c3: #57cbdc;
}
.btn-5 {
    --c1: #ffecd2;
    --c2: #fcb69f;
    --c3: #fcb69f;
}
.btn-6 {
    --c1: #dfb0ff;
    --c2: #f87c8a;
    --c3: #e35364;
}
.btn-7 {
    --c1: #ffe229;
    --c2: #baf32e;
    --c3: #9ae553;
}
.no-transition {
    -webkit-transition: none!important;
    -moz-transition: none!important;
    -ms-transition: none!important;
    -o-transition: none!important;
    transition: none!important
}
.btn-transition {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease
}



html {height: 100%}
body a {
    text-decoration: none;
    color: #000000;
}


.navbar .navbar-brand {
    max-width: var(--header-logo-max-width);
}
.navbar-nav .nav-link.active {
    background-color: #9E9E9E;
    color: #FFFFFF !important;
}
.navbar-nav .nav-link.active::after,
.menuBottom a.active::after {
    content: '';
    border-top: 4px solid var(--second-color);
    position: absolute;
    left: 8px;
    right: 8px;
    display: none;
}
.navbar-nav .nav-link.active::after {
    bottom: -9px;
}

.navbar .searchButtonCustom {
    min-width: 9rem;
}
.navbar .searchButtonCustom .imgCont {
    max-width: 6rem;
    display: inline-block;
}



.menuBottom a.active::after {
    top: -4px;
}


/*MENU BOTTOM*/
.menuBottom a {
    height: 3rem;
    color: #000000 !important;
    text-decoration: none;
    display: grid;
}
.menuBottom li.nav-item:nth-child(3) i {
    width: 2.9rem;
    height: 2.9rem;
    line-height: 2.6rem;
    border-radius: 2.5rem;
    position: absolute;
    top: -1rem;
    left: 50%;
    transform: translateX(-50%);
    border: 3px solid #ffffff !important;
}

.search .nav-link,
.wishlist .nav-link,
.languages .nav-link,
.user-account .imgCont {
    width: 2.5rem;
    height: 2.5rem;
}
.search .nav-link,
.languages .nav-link,
.wishlist .nav-link {
    background-color: #f6f6f6 !important;
}
.search .nav-link,
.languages .nav-link,
.wishlist .nav-link {
    line-height: 2.5rem;
}

.search .nav-link:hover,
.wishlist .nav-link:hover,
.languages .nav-link:hover,
.account-side-menu .nav-link:hover {
    background-color: #e9e9e9 !important;
}

@media screen and (max-width: 480px) {
    .add-wishlist:not(.no-float) {
        position: absolute;
        top: -.8rem;
        right: .5rem;
    }
}

.main-content {
    /*margin-top: 3.52rem;*/
    margin-top: 3.52rem;
}
.main-content.custom-top-only {
    margin-top: 3.52rem;
}
.main-content {
    height: calc(100vh - 7.5rem);
}
.main-content .container {
    overflow-y: auto;
}

.main-content section:not(.home-only) {
    min-height: calc(100vh - 7.5rem);
}







@media screen and (min-width: 990px) {
    body {
        overflow-y: hidden;
    }

}
footer .container {
    min-height: 2.7rem;
    line-height: 2rem;
}

@media screen and (max-width: 990px) {
    body.overflow-y-hidden {
        overflow-y: auto !important;
    }
    .navbar .container {
        /*border-bottom: 0 !important;*/
        /*box-shadow: none !important;*/
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
        border-bottom-left-radius: .7rem !important;
        border-bottom-right-radius: .7rem !important;
    }
    .navbar .container::before {
        content: '';
        background-color: var(--container-background) !important;
        height: 100%;
    }
    .main-content.member-login {
        height: auto !important;
    }
    footer {
        position: static !important;
        right: initial !important;
        bottom: initial !important;
        left: initial !important;
        z-index: 1 !important;
    }
    footer .container {
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }


    .campActionCont {
        bottom: 3.7rem;
        left: .3rem;
        right: .3rem;
    }
}
@media screen and (min-width: 990px) {
    .navbar {
        top: 8px;
    }

    footer {
        bottom: 8px !important;
    }
}



.h-inherit {
    height: inherit !important;
}

/*Lobibox*/
.lobibox.lobibox-confirm .lobibox-header {
    background-color: #eee!important;
    color: #333;
    text-align: center;
    /*display: none;*/
}
.lobibox.lobibox-confirm .lobibox-body {
    padding-top: 1rem;
    text-align: center;
}
.lobibox.lobibox-confirm .lobibox-footer {
    background-color: #fff!important;
    padding-bottom: 1.5rem;
}
.lobibox-notify .lobibox-notify-title {
    padding-right: 2rem!important;
}


/*FAMFAMFAM flag icons CSS.*/
[class^="fam-flag"] {
    display: inline-block;
    width: 16px;
    height: 11px;
    line-height: 11px;
    background-image: url("../img/default/famfamfam-flags.png");
    background-position: 0 0;
    background-repeat: no-repeat;
}
.fam-flag-En {
    background-position: -176px -22px;
    width: 16px;
    height: 11px;
}
.fam-flag-Id {
    background-position: -160px -53px;
    width: 16px;
    height: 11px;
}

/*.main-content.authOn {margin-left: 14.4rem;}*/
.border-dark {border-color: #252a2e !important;}
.w-number {width: 1rem!important;}
.w-date {width: 10rem!important;}
.w-curency {width: 10rem!important;}
.w-status {width: 3rem!important;}
.status-approve span {background: #7bc646 !important}
.status-pending span {background: #27b1f3 !important}
.status-reject span {background: #ff5757 !important}


/*Expire Date*/
.expireDate {
    background: #ec0000;
    padding: 0.5rem 1rem 0.5rem 4rem;
    top: 1rem;
    left: -.5rem;
    -webkit-border-radius: .3rem .3rem .3rem 0;
    -moz-border-radius: .3rem .3rem .3rem 0;
    border-radius: .3rem .3rem .3rem 0;
    z-index: 5;
}
.expireDate::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 0 solid transparent;
    border-top: 9px solid #881212;
    position: absolute;
    bottom: -9px;
    left: 0;
    display: inline-block;
}
.expireDate span {
    font-size: 1.5rem;
}
.expireDate i {
    font-size: 2.3rem;
}
.expireDate i {
    position: absolute;
    top: 1rem;
    left: 1rem;
}


/*Daterange*/
.date-picker-wrapper {
    border: 2px solid #f19220;
    background-color: #fff;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
/*.date-picker-wrapper .drp_top-bar .default-top {color: #fff!important;}*/









.txt {
    display: -ms-flexbox!important;
    display: flex!important;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0;
    background-color: transparent;
    border: 0;
    margin-left: 0;
    margin-right: 0;
}
.content-wrapper {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex: 1;
    flex: 1;
    overflow: auto;
}
.header-elements-md-inline {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}



/*REPORT*/
.report .side-right::before {
    content: '';
    background: linear-gradient(to right, rgb(248, 248, 248), #ffffff);
    border-left: 1px solid #fff;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    display: block;
}
.report .badgeCustom {
    right: 1rem;
}
.report .imgCont.mini {
    width: 10rem;
}
.widget i {
    /*width: 3rem;*/
    text-align: center;
    bottom: .5rem;
    right: 0;
    color: #dcdbdb;
    /*font-size: 4rem!important;*/
}
.widget i.fa-check {color: #f2f3f2;}
.widget i.fa-hourglass-half {color: #f2f3f2;}
.widget i.fa-ban {color: #f2f3f2;}
.widget i.fa-money {color: #f2f3f2;}


.heading {
    font-family: Barlow-bold!important;
    color: #515151;
}
.heading::after {
    content: '';
    background-color: #333;
    width: 2.5rem;
    height: .2rem;
    position: absolute;
    left: 0;
    bottom: -1rem;
    display: inline-block;
}
.heading.text-center::after {
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}
.heading.no-line::after {display: none}




/*.list .btn-outline-primary{background-color: #fff}*/
/*.list .btn-outline-primary:hover{background-color: #007bff;}*/

/*Login*/
#loginForm .imgCont {
    height: 3rem;
}




/*Home*/


/*Slick*/
.slick-slider .slick-track {
    justify-content:flex-start;
    display:flex;
}
.slick-slider .slick-track {
    margin-left: 0 !important;
    margin-right: auto;
}


/*Slick Arrow*/
.slick-slider .slick-arrow,
.arrow-custom .slick-arrow {
    background-color: #fafafa24;
    color: #ffffff;
    width: 2.5rem;
    height: 2.5rem;
    top: 50%;
    z-index: 5;
    border: 2px solid #ffffff;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    -webkit-border-radius: 3rem;
    -moz-border-radius: 3rem;
    border-radius: 3rem;
    /*transform: translateY(-120%);*/
    transform: translateY(-50%);
    /*-webkit-transition: all 0.1s ease-in-out;*/
    /*-moz-transition: all 0.1s ease-in-out;*/
    /*-ms-transition: all 0.1s ease-in-out;*/
    /*-o-transition: all 0.1s ease-in-out;*/
    /*transition: all 0.1s ease-in-out;*/
    -webkit-box-shadow: 0 12px 12px -4px rgba(0, 0, 0, .05);
    -moz-box-shadow: 0 12px 12px -4px rgba(0, 0, 0, .05);
    box-shadow: 0 12px 12px -4px rgba(0, 0, 0, .05);
}
.arrow-custom .slick-arrow {
    border: 1px solid #dce0e4;
    position: static !important;
    transform: none;
    -webkit-border-radius: .35rem;
    -moz-border-radius: .35rem;
    border-radius: .35rem;
    box-shadow: none;
}
.arrow-custom .slick-arrow.slick-disabled {
    display: block !important;
}
.slick-slider .slick-arrow.slick-disabled,
.arrow-custom .slick-arrow.slick-disabled,
.slick-slider .slick-arrow.slick-disabled:hover,
.arrow-custom .slick-arrow.slick-disabled:hover,
.slick-slider .slick-arrow.slick-disabled:visited,
.arrow-custom .slick-arrow.slick-disabled:visited,
.slick-slider .slick-arrow.slick-disabled:active,
.arrow-custom .slick-arrow.slick-disabled:active {
    background: #fff!important;
    cursor: default!important;
    display: none !important;
}
.slick-slider .slick-arrow.slick-disabled::before,
.arrow-custom .slick-arrow.slick-disabled::before {
    color: #333!important;
}
.slick-slider .slick-arrow:active,
.arrow-custom .slick-arrow:active {
    background: var(--second-color) !important;
    /*backdrop-filter: blur(0);*/
}
.slick-slider .slick-prev,
.slick-slider:hover .slick-prev {left: -.5rem!important}
.slick-slider .slick-next,
.slick-slider:hover .slick-next {right: -.5rem!important}

.slick-slider .slick-arrow::before,
.arrow-custom .slick-arrow::before {
    font-family: bootstrap-icons !important;
    color: #000000 !important;
}
.slick-slider .slick-arrow:active::before,
.arrow-custom .slick-arrow:active::before {
    color: #ffffff;
}
.slick-slider .slick-prev::before,
.arrow-custom .slick-prev::before {
    content: "\f284";
}
.slick-slider .slick-next::before,
.arrow-custom .slick-next::before {
    content: "\f285";
}

#bannerSlider.slick-slider .slick-prev {left: 0 !important;}
#bannerSlider.slick-slider .slick-next {right: 0 !important;}
/*@media screen and (max-width: 990px) {*/
/*    #bannerSlider .imgCont {*/
/*        border-radius: 0 !important;*/
/*    }*/
/*}*/

/*Slick Dot*/
.slick-dots li{
    background-color: #ccc;
    width: .375rem;
    height: .375rem;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.slick-dots li button {
    display: none;
}
.slick-dots li.slick-active {
    background-color: var(--second-color) !important;
    /*width: 1.5rem;*/
}


/*Product*/
.product-list .card-shadow-custom {
    -webkit-transition: box-shadow 0.5s;
    -moz-transition: box-shadow 0.5s;
    -ms-transition: box-shadow 0.5s;
    -o-transition: box-shadow 0.5s;
    transition: box-shadow 0.5s;
}
.product-list .card-shadow-custom:hover {
    -webkit-box-shadow: 0 0.225rem 0.25rem rgba(0, 0, 0, 0.075) !important;
    -moz-box-shadow: 0 0.225rem 0.25rem rgba(0, 0, 0, 0.075) !important;
    box-shadow: 0 0.225rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}



#productSlider .card-title,
#productSlider .card-price {
    height: 35px;
}
#productSlider .card-body {
    min-height: 155px;
}


/*Dropdown Custom Color*/
.dropdown-item.active,
.dropdown-item:active {
    background-color: #f5f2f2;
    color: #000000;
}


.floatAuth {
    position: absolute;
    top: 2.5rem;
    right: 0;
}
.floatAuth .dropdown-toggle {
    width: 2.5rem;
    height: 2.5rem;
}
.floatAuth .dropdown-toggle .fa {
    font-size: 1.3rem;
}
.floatAuth .dropdown-toggle::after {
    display: none;
}






#signInModal input[type="text"],
#signInModal input[type="password"] {
    height: 3rem;
}



/*.list-promo .card {*/
/*-webkit-transition: 0.3s all ease;*/
/*-moz-transition: 0.3s all ease;*/
/*-o-transition: 0.3s all ease;*/
/*-ms-transition: 0.3s all ease;*/
/*transition: 0.3s all ease;*/
/*-webkit-transform: translate3d(0, 0, 0);*/
/*-moz-transform: translate3d(0, 0, 0);*/
/*-o-transform: translate3d(0, 0, 0);*/
/*-ms-transform: translate3d(0, 0, 0);*/
/*transform: translate3d(0, 0, 0);*/
/*text-align: center;*/
/*-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);*/
/*-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);*/
/*box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);*/
/*-webkit-border-radius: 5px;*/
/*-moz-border-radius: 5px;*/
/*border-radius: 5px;*/
/*}*/

/*.list-promo .card-header {top: 0.8rem}*/
/*.list-promo .card:hover {*/
/*    -webkit-transform: translate3d(0, -5px, 0);*/
/*    -moz-transform: translate3d(0, -5px, 0);*/
/*    -o-transform: translate3d(0, -5px, 0);*/
/*    -ms-transform: translate3d(0, -5px, 0);*/
/*    transform: translate3d(0, -5px, 0);*/
/*}*/
/*.list-promo .card-header .imgCont:first-of-type {*/
/*    background: #ccc;*/
/*    !*height: 11.8rem;*!*/
/*}*/
/*.list-promo .card-header .imgCont.mini {*/
/*    width: 6rem;*/
/*    height: initial;*/
/*    bottom: 1.2rem;*/
/*    right: 0.9rem;*/
/*}*/
.list-promo .card-header .brand-mini {
    max-width: 3rem;
}
.list-promo a {
    /*text-decoration: none;*/
}

/*.list-promo .card-body {*/
/*    !* background: linear-gradient(to top, rgb(236, 236, 236), rgb(255, 255, 255)); *!*/
/*    -webkit-transition: 0.3s;*/
/*    -moz-transition: 0.3s;*/
/*    -o-transition: 0.3s;*/
/*    -ms-transition: 0.3s;*/
/*    transition: 0.3s;*/
/*    -webkit-border-radius: 7px 7px 10px 10px !important;*/
/*    -moz-border-radius: 7px 7px 10px 10px !important;*/
/*    border-radius: 7px 7px 10px 10px !important;*/
/*    padding-left: .8rem!important;*/
/*    padding-right: .8rem!important;*/
/*    z-index: 2;*/
/*}*/
/*.list-promo .card:hover .card-body {*/
/*    -webkit-box-shadow: 0 6px 0 -3px rgba(0, 0, 0, 0.25) !important;*/
/*    -moz-box-shadow: 0 6px 0 -3px rgba(0, 0, 0, 0.25) !important;*/
/*    box-shadow: 0 6px 0 -3px rgba(0, 0, 0, 0.25) !important;*/
/*}*/
/*.list-promo .card-body .card-title {*/
/*    !*font-size: .9rem!important;*!*/
/*    height: 4.8rem;*/
/*}*/


.form-group.error .form-control {
    border-color: #d00606!important;
}
.form-group.error .invalid-feedback {
    background: #d00606;
    font-family: sans-serif;
    width: auto;
    min-width: 12rem;
    max-width: 17rem;
    color: #fff;
    padding: .5rem;
    position: absolute;
    bottom: -2.9rem;
    right: .3rem;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    display: none!important;
}
.form-group.error .invalid-feedback::before {
    content: '';
    width: 0;
    height: 0;
    border-bottom: .4rem solid #d01c05;
    border-left: .4rem solid transparent;
    border-right: .4rem solid transparent;
    position: absolute;
    top: -.3rem;
    right: .4rem;
    display: block;
}
.form-group.error .form-control ~ .fa {
    position: absolute;
    top: 50%;
    left: 94%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    display: block;
}


.form-group.error .form-control:hover + .invalid-feedback,
.form-group.error .form-control:focus + .invalid-feedback,
.form-group.error .form-control:not(:placeholder-shown) + .invalid-feedback {
    display: block!important;
}
.form-group.error .form-control:hover ~ .fa,
.form-group.error .form-control:focus ~ .fa,
.form-group.error .form-control:not(:placeholder-shown) ~ .fa {
    display: none!important;
}



/*WALLET*/
.offcanvas#withdrawShow .form-check-input {
    width: 1.3em;
    height: 1.3em;
}

@media screen and (min-width: 990px) {
    .wallet #withdrawShow {
        z-index: 1030;
        border-top: 0;
        visibility: visible;
        position: relative;
        left: initial;
        right: initial;
        bottom: initial;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
    }
}

/*TOP SLIDER*/
.bg-mobile-active {
    /*background-color: #49115c !important;*/
    background-color: #c2c2c2 !important;
    height: 13%;
    top: -10px !important;
    left: -12px !important;
    right: -12px !important;

}
.top-slider .bg-mobile-active {
    height: initial;
    bottom: 18%;
}
/*@media screen and (max-width: 768px) {*/
    .top-slider #bannerSlider {
        margin-left: -12px;
        margin-right: -12px;
    }
/*}*/
.list-promo .bg-mobile-active,
.product-list .bg-mobile-active {
    height: 230px;
}
.bg-mobile-active .rounded-custom {
    background-color: inherit !important;
    width: 2rem;
    height: 2rem;
    bottom: -2rem;
}
.bg-mobile-active .rounded-custom:first-child::before,
.bg-mobile-active .rounded-custom:last-child::before {
    content: '';
    background: #f9f9f9 !important;
    width: 2rem;
    height: 2rem;
    bottom: 1rem;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
}
.bg-mobile-active .rounded-custom:first-child::before {
    border-top-left-radius: 2rem;
}
.bg-mobile-active .rounded-custom:last-child::before {
    border-top-right-radius: 2rem;
}
@media screen and (min-width: 768px) and (max-width: 990px) {
    .wallet-widget .card-footer .border-top {
        border-top: 0 !important;
    }
    .wallet-widget .card-body {
        border-right: 1px solid #dee2e6 !important;
    }
}
@media screen and (min-width: 990px) and (min-width: 1200px) {
    .wallet-widget .card-footer .border-top {
        border-top: 0 !important;
    }
    .wallet-widget .card-body {
        border-right: 1px solid #dee2e6 !important;
    }
}
@media screen and (min-width: 768px) {
    .top-slider .bg-mobile-active {
        bottom: 13%;
    }
    .list-promo .bg-mobile-active {
        height: 15%;
    }
}
@media screen and (min-width: 990px) {
    .top-slider .bg-mobile-active {
        bottom: 10%;
    }
    .list-promo .bg-mobile-active {
        height: 15rem;
    }
    .home-only .wallet-widget {
        max-width: 75%;
    }
}
.top-slider .slick-dots {
    /*width: auto;*/
    position: absolute;
    bottom: .5rem;
    /*right: 1rem;*/
    /*left: initial;*/
}
/*.top-slider .slick-slide:not(.slick-active) .imgCont img {*/
/*    filter: blur(9px);*/
/*    -webkit-filter: blur(9px);*/
/*}*/

/*PROMO DETAIL*/
.promo-detail .big .brand-mini {
    max-width: 6rem;
}
.promo-detail .promo-mini .card-header {
    /*min-height: 10rem;*/
    /*max-width: 10rem;*/

    max-height: 10rem;
}
.promo-detail .promo-mini .card-header .imgCont {
    max-height: 9rem;
}
@media screen and (min-width: 1200px) {
    .list-promo.promo-mini .add-wishlist {
        /*margin-top: .8rem;*/
        /*margin-right: .3rem;*/
    }
}
.wishlist .nav-link,
.list-promo .add-wishlist {
    background-color: #fafafa61;
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(5px);
    /*width: 2rem;*/
    /*height: 2rem;*/
    /*line-height: 2rem;*/
    color: #000000;
    /*margin-top: .8rem;*/
    /*margin-right: .8rem;*/
}
.promo-quick-view .add-wishlist {
    background-color: #dddddd61;
    width: 2.5rem;
    height: 2.5rem;
}

@media screen and (max-width: 400px) {
    .promo-detail .list-promo .row-cols-2>* {
        flex: 0 0 auto;
        width: 100%;
    }
}
@media screen and (min-width: 990px) {
    .promo-detail .sticky-bottom {
        position: static !important;
    }
}
@media screen and (min-width: 1200px) {
    .promo-detail .promo-mini .card-header {
        min-height: 10rem;
        max-width: 10rem;
        max-height: initial;
    }
    .promo-detail .promo-mini .card-header .imgCont {
        max-height: 100%;
    }
    .promo-detail .promo-mini .imgCont:not(.brand-mini) {
        height: 100%;
        border-radius: .5rem 0 0 .5rem !important;
    }
    .promo-detail .promo-mini .imgCont:not(.brand-mini) img {
        min-width: 100%;
        min-height: 100%;
        object-fit: cover;
        border-radius: .5rem 0 0 .5rem !important;
    }
}



.badge-custom {
    background-color: red;
}
.badge-custom::before {
    content: '';
    background-color: inherit;
    width: 5px;
    height: 5px;
    position: absolute;
    top: 50%;
    left: -2.5px;
    transform: translateY(-50%) rotate(45deg);
}




/*TIMERCOUNT*/

/*Timer Countdowon*/
.timeCountdown {
    -webkit-transition: All 300ms linear;
    -moz-transition: All 300ms linear;
    -ms-transition: All 300ms linear;
    -o-transition: All 300ms linear;
    transition: All 300ms linear;
    z-index: 10;
    display: inline-block;
}
.timeCountdown::after {
    content: '';
    /*background: url(../img/dotted_arrow.png) no-repeat center center;*/
    background-size: contain;
    width: 8rem;
    height: 5rem;
    position: absolute;
    right: -5.5rem;
    bottom: -2rem;
    display: none;
    transform: rotate(-56deg);
}
.timeCountdown div {
    background-color: #080808ab;
    color: #fff;
    width: 3.5rem;
    font-weight: 700;
    line-height: 1.3;
    padding: .2rem .5rem;
    text-align: center;
    position: relative;
    border: 1px solid #000;
    margin: 0 2px;
    display: inline-block;
    -webkit-border-radius: 0.3rem;
    -moz-border-radius: 0.3rem;
    border-radius: 0.3rem;
}
.timeCountdown div::after {
    content: ':';
    font-size: 1.5rem;
    font-weight: 500;
    position: absolute;
    top: 50%;
    right: -.2rem;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    display: none;
}
.timeCountdown div:last-child::after {
    display: none;
}
.timeCountdown div span {
    /*font-size: 1.5rem;*/
    /*font-family: 'inter-600';*/
}
.timeCountdown div:last-child span {
    color: #f17420!important;
}
.membership.my-events .timeCountdown div span {
    /*font-size: 1rem;*/
    /*color: #ffffff;*/
}
.timeCountdown div small {
    font-size: .5rem;
    font-weight: 400;
    color: #ffffff;
    text-transform: uppercase;
    display: block;
}
.membership.my-events .timeCountdown div small {
    /*color: #fff;*/
}

/*Seeding Custom*/
.list-promo .timeCountdown div,
.promo-detail .timeCountdown div {
    background-color: rgb(250, 238, 199);
    color: #000000;
    width: auto;
    font-size: .8rem;
    padding: 2px 4px!important;
    border-color: #f1d57a;
    margin: 0 2px!important;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px
}
.list-promo .timeCountdown.small-size div {
    font-size: .6rem;
}
.promo-detail .timeCountdown div:nth-of-type(1) {
    /*background-color: #fcab2f;*/
}
.promo-detail .timeCountdown div:nth-of-type(2) {
    /*background-color: #ee4723;*/
}
.promo-detail .timeCountdown div:nth-of-type(3) {
    /*background-color: #58d337;*/
}
.promo-detail .timeCountdown div:last-of-type {
    /*background-color: #96fceb;*/
}
.list-promo .timeCountdown div small,
.promo-detail .timeCountdown div small {
    font-size: .8rem;
    color: #000000;
    font-weight: 600;
    margin-left: 1px;
    display: inline
}

.list-promo .timeCountdown.small-size div small {
    font-size: .6rem;
}



/*------------------------------------*/
/*Article List*/
/*------------------------------------*/
.card-horizontal {
    display: flex;
    flex: 1 1 auto;
}
.article-list .gridOption .btn {
    width: 40px;
    height: 40px;
    line-height: 40px;
    padding: 0;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}
.article-list .gridOption#gBox .card-horizontal,
.article-list .gridOption .list.gBox .card-horizontal {
    flex: 1 1 auto;
    display: block;
}
.article-list .gridOption#gList .card-horizontal .card-body {
    width: 585px;
    /*min-height: 120px;*/
    padding: 0 .5rem 0 0!important;
}
.article-list .gridOption#gList .list.gBox .card-horizontal .card-body {
    width: 100%;
}
.article-list .item .imgCont,
    /*.article-list .gridOption#gBox .card-horizontal .card-body {padding: .5rem 0!important}*/
.article-list .item .imgCont, .article-list .gridOption#gBox .card-horizontal .imgCont {min-height: 140px}
.article-list .gridOption#gList .list.gBox .card-horizontal .card-body,
.article-list .gridOption.rows#gBox .card-horizontal .card-body,
.article-list .gridOption.comic#gBox .card-horizontal .card-body {
    min-height: 50px;
}
.article-list .gridOption#gList .list.col-xl-4,
.article-list .gridOption#gList .list.col-lg-4 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}
.article-list .gridOption#gList .card-header {margin-right: 1rem}
.article-list .prev-next .gridOption#gList .card-header,
.article-list .gridOption#gList .list.gBox .card-header {margin-right: 0}
.article-list .category.custom {
    position: absolute;
    left: 5px;
    bottom: 5px;
}

.ssb.article-list .category {color: #f39331!important}
.jak.article-list .category {color: #239548!important}
.oim.article-list .category {color: #e9002b!important}
.im.article-list .category {color: #145ca8!important;}
.kp.article-list .category {color: purple !important}

.article-list .card-title {
    font-size: 1rem;
    overflow: hidden;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    display: -webkit-box;
}
.article-list .card .card-title a {
    -webkit-transition: All .300s linear;
    -moz-transition: All .300s linear;
    -ms-transition: All .300s linear;
    -o-transition: All .300s linear;
    transition: All .300s linear;
}
.article-list .card .card-title a:hover {color: #2557b7 !important}
.article-list .card-header::before,
.article-list .card-header::after {
    content: "";
    background: #fff;
    width: 3px;
    height: 3px;
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0;
    z-index: 5;
    -webkit-transition: All .200s linear;
    -moz-transition: All .200s linear;
    -ms-transition: All .200s linear;
    -o-transition: All .200s linear;
    transition: All .200s linear;
}
.article-list .card.no-animated .card-header::before,
.article-list .card.no-animated .card-header::after {
    opacity: 0!important;
}
.article-list .card-header::before {
    margin-top: -45px;
    margin-left: -0.5px;
}
.article-list .card-header::after {
    margin-top: -0.5px;
    margin-left: -44px;
}
.article-list .card:hover .card-header::before {
    height: 50px;
    margin-top: -25px;
}
.article-list .card:hover .card-header::after {
    width: 50px;
    margin-left: -24px;
}
.article-list .card-header .imgCont::before {
    content: "";
    background: rgba(10, 5, 2, 0.58);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    z-index: 8;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-transition: All .300s linear;
    -moz-transition: All .300s linear;
    -ms-transition: All .300s linear;
    -o-transition: All .300s linear;
    transition: All .300s linear;
}
.ssb.article-list .card:hover .imgCont::before,
#ssbSlider.article-list .card:hover .imgCont::before {background: rgba(255, 136, 0, 0.58)!important;}

.jak.article-list .card:hover .imgCont::before,
#jakSlider.article-list .card:hover .imgCont::before {background: rgba(50, 150, 75, 0.58)!important;}

.oim.article-list .card:hover .imgCont::before,
#oimSlider.article-list .card:hover .imgCont::before {background: rgba(227, 0, 47, 0.58)!important;}

.grid .item:hover .imgCont::before,
.im.article-list .card:hover .imgCont::before,
#imSlider.article-list .card:hover .imgCont::before {background: rgba(31, 94, 166, 0.58)!important;}

.kp.article-list .card:hover .imgCont::before,
#kpSlider.article-list .card:hover .imgCont::before {background: rgba(241, 235, 77, 0.58)!important;}

.article-list .card:hover .card-header .imgCont::before,
.article-list .card:hover .card-header::before,
.article-list .card:hover .card-header::after {opacity: 1}

.article-list .card.no-animated .card-header .imgCont::before,
.article-list .gridOption#gList .card .card-header .imgCont::before,
.article-list .gridOption#gList .card .card-header::before,
.article-list .gridOption#gList .card .card-header::after {
    opacity: 0;
    visibility: hidden;
    /*display: none;*/
}
.article-list .gridOption#gList .list.gBox:hover .card .card-header .imgCont::before,
.article-list .gridOption#gList .list.gBox:hover .card .card-header::before,
.article-list .gridOption#gList .list.gBox:hover .card .card-header::after {
    opacity: 1;
    visibility: visible;
    /*display: block;*/
}
/*.article-list .card:hover .card-header .imgCont::before {*/
/*left: 8px;*/
/*right: 8px;*/
/*top: 8px;*/
/*bottom: 8px;*/
/*}*/
.small-list .card-header .imgCont {
    width: 100px;
    min-height: 75px!important;
    margin-right: 1rem;
}
.small-list .card-title {
    font-size: 0.9rem;
    line-height: 1.4;
}
.article-list .card-header img {
    -webkit-transition: All .3s linear;
    -moz-transition: All .3s linear;
    -ms-transition: All .3s linear;
    -o-transition: All .3s linear;
    transition: All .3s linear;
}
.article-list .card:hover .card-header img {
    -webkit-transform: rotate(3deg) scale(1.1);
    -moz-transform: rotate(3deg) scale(1.1);
    -ms-transform: rotate(3deg) scale(1.1);
    -o-transform: rotate(3deg) scale(1.1);
    transform: rotate(3deg) scale(1.1);
}
.article-list .card.no-animated .card-header img {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
}
.article-list .card .info.custom {
    background: #515151;
    width: 50px;
    height: 55px;
    text-align: center;
    color: #fff;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
}
.article-list .card .info.custom .date {
    font-size: 1.5rem;
}
.article-list .card .info.custom .month {
    font-size: 1rem;
    position: relative;
    top: -9px;
}
.footer-carousel {
    height: 5rem;
    padding-top: 1rem;
}
.carousel-control-next, .carousel-control-prev {
    bottom: 5rem;
}




/*Loadings*/
.loadings {
    background: #fff;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    display: none;
}
.loadings.active {
    display: block!important;
}
.loadings img {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}



/*Video*/
.video-list {}
.video-list .play-icon {
    background: #fff;
    width: 3rem;
    height: 3rem;
    line-height: 2;
    text-align: center;
    font-size: 24.027px;
    z-index:10;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-transform: translate(-50% , -50%);
    -ms-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    -webkit-animation : 2s play-animation infinite;
    animation : 2s play-animation infinite;
    -webkit-transition:0.2s color;
    transition:0.2s color;
}
@-webkit-keyframes play-animation {
    from {
        -webkit-box-shadow : 0px 0px 0px 0px #FFF;
        box-shadow : 0px 0px 0px 0px #FFF;
    }
    to {
        -webkit-box-shadow : 0px 0px 0px 10px transparent;
        box-shadow : 0px 0px 0px 10px transparent;
    }
}
@keyframes play-animation {
    from {
        -webkit-box-shadow : 0px 0px 0px 0px #FFF;
        box-shadow : 0px 0px 0px 0px #FFF;
    }
    to {
        -webkit-box-shadow : 0px 0px 0px 10px transparent;
        box-shadow : 0px 0px 0px 10px transparent;
    }
}




/*Subscribe*/
.subscribe input {
    background: #fff;
    min-width: 400px;
    max-width: 400px;
    color: #060c22;
    border: 0;
    outline: none;
    margin: 0;
    padding: 9px 20px;
    font-size: 14px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.subscribe button {
    border: 0;
    padding: 9px 25px;
    cursor: pointer;
    background: #ed2124;
    color: #fff;
    transition: all 0.3s ease;
    outline: none;
    font-size: 14px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.subscribe button:hover {
    background: #e0072f;
}


/*------------------------------------*/
/*Article Detail*/
/*------------------------------------*/
.article-detail .text-detail h2 {font-size: 1.6rem}
.article-detail .text-detail h3 {font-size: 1.3rem}
.article-detail .text-detail h4 {font-size: 1.1rem}
.article-detail .text-detail img {max-width: 550px}
.article-detail .text-detail iframe {max-width: 100%}

.text-detail h2,
.text-detail h3,
.text-detail h4 {margin-top: 2rem!important;}

.article-detail .text-detail .card h2 {font-size: 1.2rem!important}
.article-detail .text-detail img {margin: 2.5rem 0}
.article-detail .text-detail .card .imgCont {width: 80px}
.article-detail .text-detail .card .imgCont img {margin: 0 1rem 0 0!important}
.article-detail .text-detail ul li {margin-bottom: 0.5rem}
.article-detail .text-detail iframe,
.article-detail .fb_iframe_widget_fluid_desktop iframe {width: 100%!important}

#section1 {width: 75%!important}
.modal .logoBrandInfo .imgCont {
    max-width: 4rem;
}

/*------------------------------------*/
/*Button Custom*/
/*------------------------------------*/
.btn-white {
    color: #333;
    background-color: #fff;
    background-image: none;
    border-color: #ccc;
    white-space: initial!important;
}
.btn-white:hover,
.btn-white.focus,
.btn-white.active {
    background-color: #ccc;
    border-color: #ccc;
    color: #000000;
}


/*Image Loaded*/
.checkImg .imgCont {position: relative; z-index: 2}
.checkImg .is-loading .imgCont:before,
.checkImg .is-broken .imgCont:before {
    content: '';
    background-color: #eee;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 1;
    z-index: 0;
}
.checkImg .is-loading .imgCont:after,
.checkImg .is-broken .imgCont:after {
    content: '';
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100%;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -25px;
    margin-top: -25px;
    z-index: 0;
    display: inline-block;
}
.checkImg .is-loading .imgCont:after {background-image: url(../img/spinner.svg)}
.checkImg .is-broken .imgCont:after {background-image: url('../img/broken_image.svg')}
.checkImg .is-loading .imgCont img, .checkImg .is-broken .imgCont img {opacity: 0}





/*PRODUCT*/
@media screen and (min-width: 990px) {
    /*.product-title {*/
    /*    font-size: calc(1.1rem + .6vw) !important;*/
    /*}*/
}

/*------------------------------------*/
/*All Grid list*/
/*------------------------------------*/
.grid-container {
    padding-top: 1.5em;
    padding-bottom: 1.5em;
}
.grid {
    float: none;
    width: 100%;
    padding-left: 0.8em;
    padding-right: 0.8em;
    padding-bottom: 1.3em;
    cursor: pointer;
    -webkit-transition: all .25s ease-in;
    -moz-transition: all .25s ease-in;
    -ms-transition: all .25s ease-in;
    -o-transition: all .25s ease-in;
    transition: all .25s ease-in;
}
.grid .imgCont {position: relative}
.grid .imgCont::before {
    content: "";
    background: rgba(10, 5, 2, 0.58);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    z-index: 8;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-transition: All .300s linear;
    -moz-transition: All .300s linear;
    -ms-transition: All .300s linear;
    -o-transition: All .300s linear;
    transition: All .300s linear;
}
.grid:hover .imgCont::before {
    opacity: 1;
    visibility: visible;
}

.grid, .grid .card {
    -webkit-border-radius: 5px!important;
    -moz-border-radius: 5px!important;
    border-radius: 5px!important;
}
@media screen and (min-width: 40.063em) {
    .grid {
        float: left;
        width: 33.333%;
    }
}
.card__image {
    min-height: 180px;
    overflow: hidden;
    position: relative;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    display: block;
}
.card__image img {
    display: block;
    margin-bottom: 0;
    width: 100%;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}
.card__image:hover img {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}
.card__title {
    margin-bottom: 0.75em;
    text-decoration: none;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    display: inline-block;
}
.card__title h2 {
    color: white;
    font-weight: 700;
    line-height: 1.2;
}
.card__title:hover {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
}
.card__overlay {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: block;
}
.card__overlay--indigo {
    background-image: linear-gradient(to bottom, rgba(92, 107, 192, 0.1), rgba(92, 107, 192, 0.8));
    z-index: 2;
}
.card__overlay--blue {
    background-image: linear-gradient(to bottom, rgba(41, 182, 246, 0.1), rgb(10, 40, 72) 118%);
    z-index: 2;
}
.card__overlay-content {
    padding: 1em 1rem 0;
    position: absolute;
    bottom: 0;
    z-index: 3;
}
.card__meta {
    margin: 0;
    margin-right: -1em;
    margin-bottom: 0.75em;
}
.card__meta.card__meta--last {
    margin-bottom: 0;
}
.card__meta span {
    color: #f8f8f8;
    list-style-type: none;
    margin-bottom: 0;
    padding-right: 1em;
    font-size: 0.85em;
    font-variant: small-caps;
    letter-spacing: 1px;
    display: inline;
}
.card__meta span:not(:last-child):after {
    content: "\25cf";
    color: rgba(255, 255, 255, 0.25);
    font-style: normal;
    position: relative;
    right: -0.6em;
}


/*TBALE CUSTOM*/

/*Table Custom Beta*/
.table-scroll {
    /*position:relative;*/
    /*overflow-y: visible !important;*/
    /*border:1px solid #000;*/
}
.table-wrap {
    background: repeating-linear-gradient(45deg, #edeffb, #edeffb 10px, #f8f9fa 10px, #f8f9fa 20px) !important;
    /*height: calc(100vh - 195px);*/
    overflow-y: auto;
    overflow-x: auto;
    /*-webkit-overflow-scrolling: auto;*/
}

.table-scroll table {
    /*width:100%;*/
    font-size: 14px;
    border-collapse:separate;
    border-spacing:0;
}
.table-scroll table tr.collapsing,
.table-scroll table tr.collapse,
.table-scroll table tr.collapse td {
    background-color: #ffffff!important;
}
.table-scroll table tr.collapse td {
    border-bottom: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
}
/*.table-scroll table tr.collapse.show td.card-body::before {*/
/*    content: '';*/
/*    background-color: #e6fcdb;*/
/*    width: 10px;*/
/*    height: 10px;*/
/*    border: 1px solid #dee2e6;*/
/*    position: absolute;*/
/*    left: 1.65rem;*/
/*    top: -6px;*/
/*    -webkit-transform: rotate(45deg);*/
/*    -moz-transform: rotate(45deg);*/
/*    -ms-transform: rotate(45deg);*/
/*    -o-transform: rotate(45deg);*/
/*    transform: rotate(45deg);*/
/*    display: block;*/
/*}*/
.table-scroll table tbody:last-child tr.collapse td{
    border-bottom: 0;
}

.table-scroll thead {
    background-color: #f8f8f8;
    position: sticky;
    top: 0;
    -webkit-box-shadow: 1px 1px 5px #d6d6d6;
    -moz-box-shadow: 1px 1px 5px #d6d6d6;
    box-shadow: 1px 1px 5px #d6d6d6;
    z-index: 1010;
}
.table-scroll th {
    vertical-align: middle;
}
.table-scroll td {
    width: 7rem;
    min-width: 7rem;
    padding: .6rem .5rem;
    vertical-align: top;
    /*border-right: 1px dashed #ccc;*/
}
.table-scroll th:not(:first-child),
.table-scroll td:not(:first-child) {
    max-width: 100%;
    /*overflow: hidden;*/
    /*text-overflow: ellipsis;*/
    /*white-space: nowrap;*/
    padding: .7rem 0;
}
.table-scroll td:not(:first-child) .ins,
.table-scroll th:not(:first-child) .text-label {
    /*width: inherit;*/
    font-weight: 400;
    padding-left: .5rem;
    padding-right: .2rem;
}
.table-scroll th:not(:first-child) .text-label {
    width: auto;
}
.table-scroll thead th .text-label {
    font-weight: 500 !important;
    /*cursor: grab !important;*/
}
.table-scroll th> div {
    width: inherit;
}
.table-scroll td>.ins {
    /*width: inherit;*/
    color: #555;
    /*float: left;*/
    /*text-overflow: ellipsis;*/
    /*white-space: nowrap;*/
    text-wrap: initial;
    cursor: default;
    overflow: hidden;
}
/*POPOVER*/
.popover {
    z-index: 1115 !important;
}





.table-scroll th {
    background-color: #FFFFFF;
    max-width: 100%;
    /*overflow: hidden;*/
    /*text-overflow: ellipsis;*/
    /*white-space: nowrap;*/
    /*position: -webkit-sticky;*/
    /*position: sticky;*/
    /*top: 0;*/
}
.table-scroll th .text-label {
    width: 100%;
    color: #555;
    /*float: left;*/
    /*text-overflow: ellipsis;*/
    /*white-space: nowrap;*/
    cursor: default;
    /*overflow: hidden;*/
}
.table-scroll tbody:nth-child(odd) {
    background-color: #fbfbeb;
}
.table-scroll thead th.pinned {
    z-index: 10;
}
.table-scroll thead th.status-column,
.table-scroll tbody td.status-column {
    min-width: 5rem;
    max-width: 5rem;
}
.table-scroll thead th.date-column,
.table-scroll tbody td.date-column {
    min-width: 5rem;
    max-width: 5rem;
}
.table-scroll thead th.promotion-column,
.table-scroll tbody td.promotion-column {
    min-width: 10rem;
    max-width: 10rem;
}
.table-scroll thead th.merchant-column,
.table-scroll tbody td.merchant-column {
    min-width: auto;
    max-width: 100%;
}

@media screen and (min-width: 990px){
    .table-scroll thead th.promotion-column,
    .table-scroll tbody td.promotion-column {
        min-width: 26rem;
        max-width: 26rem;
    }
    .table-scroll thead th.merchant-column,
    .table-scroll tbody td.merchant-column {
        min-width: 13rem;
        max-width: 13rem;
    }
}

.table-scroll thead th.pinned i.bi-pin-angle-fill {
    background: var(--second-color) !important;
    width: 1rem;
    height: 1rem;
    font-size: .6rem;
    line-height: 1rem;
    text-align: center;
    color: #fff !important;
    border-radius: 1rem;
    position: absolute;
    right: 6px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 11;
}
.table-scroll th.pinned-first,
.table-scroll td.pinned-first {
    border-right: 1px dashed #ddd;
}
.table-scroll th.pinned-last,
.table-scroll td.pinned-last {
    border-left: 1px dashed #ddd;
}
.table-scroll th:last-child,
.table-scroll td:last-child {
    width: 100% !important;
    min-width: 6rem !important;
    max-width: 6rem !important;
    border-right: 0;
}

/*Table Pin*/
.table-scroll thead tr th.pinned,
.table-scroll tbody tr td.pinned {
    position: sticky;
    z-index: 999;
}
.table-scroll thead tr th.pinned-first,
.table-scroll tbody tr td.pinned-first {
    left: 0;
}
.table-scroll thead tr th.pinned-last,
.table-scroll tbody tr td.pinned-last {
    right: 0;
}
.table-scroll thead tr th.action,
.table-scroll tbody tr td.action  {
    left: 0!important;
}
.table-scroll tbody tr td.pinned {
    background-color: #ffffff;
}
.table-scroll tbody:nth-child(odd) tr td.pinned {
    background-color: #fbfbeb;
}
.table-scroll table tbody:hover tr td:not(.card-body),
.table-scroll table tbody:nth-child(odd):hover tr td.pinned {
    background-color: #f8f2b8 !important;
}

.table-scroll table tbody.expanded tr td:not(.card-body),
.table-scroll table tbody.expanded:hover tr td.pinned:not(.card-body),
.table-scroll table tbody.expanded tr td.pinned {
    background-color: #e6fcdb !important;
}

.table-scroll th.order-date,
.table-scroll td.order-date,
.table-scroll th.status-column,
.table-scroll td.status-column {
    min-width: 7.5rem !important;
    max-width: 7.5rem !important;
}

.table-scroll th.merchant-column,
.table-scroll td.merchant-column {
    min-width: 12rem !important;
    max-width: 12rem !important;
}


/*.listFloat {*/
/*    background: #28d6a6;*/
/*    top: -0.5rem;*/
/*    margin: 0 auto;*/
/*}*/




/*------------------------------------*/
/*Sosmed*/
/*------------------------------------*/
.sosmed {
    height: 35px;
    line-height: 35px;
    margin-top: -6px;
}
.sosmed a {
    background: #3e3e3e;
    width: 3rem;
    height: 3rem;
    padding: 2px;
    margin-right: 5px;
    text-align: center;
    overflow: hidden;
    text-decoration: none;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    display: inline-block;
}
.sosmed a:before,
.sosmed a:after {
    font-family: FontAwesome;
    font-size: 1.8rem;
    line-height: 1.5;
    color: #fff;
    display: block;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.sosmed a:after {color: #fff}

.sosmed a.facebook:before,
.sosmed a.facebook:after {content: '\f09a'}
.sosmed a.youtube:before,
.sosmed a.youtube:after {content: '\f167'}
.sosmed a.gplus:before,
.sosmed a.gplus:after {content: '\f0d5'}
.sosmed a.twitter:before,
.sosmed a.twitter:after {content: '\f099'}
.sosmed a.instagram:before,
.sosmed a.instagram:after {content: '\f16d'}
.sosmed a.linkedin:before,
.sosmed a.linkedin:after {content: '\f0e1'}


.sosmed a.facebook {background: #3b5998}
.sosmed a.youtube {background: #e62117}
.sosmed a.gplus {background: #db4437}
.sosmed a.twitter {background: #00aced}
.sosmed a.linkedin {background: #1c79b3}
.sosmed a.instagram {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f9a33e+0,9a37b6+100 */
    background: rgb(249,163,62); /* Old browsers */
    background: -moz-linear-gradient(-45deg,  rgba(249,163,62,1) 0%, rgba(154,55,182,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg,  rgba(249,163,62,1) 0%,rgba(154,55,182,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg,  rgba(249,163,62,1) 0%,rgba(154,55,182,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9a33e', endColorstr='#9a37b6',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.sosmed a:hover:before {margin-top: -3rem}
.sosmed a:hover:after {margin-top: .4rem}






/*------------------------------------*/
/*Keyframes*/
/*------------------------------------*/
/*Scale Up*/
@keyframes scaleUp {
    0% { }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
@-o-keyframes scaleUp {
    0% { }
    100% {
        -o-transform: scale(1);
        opacity: 1;
    }
}
@-ms-keyframes scaleUp {
    0% { }
    100% {
        -ms-transform: scale(1);
        opacity: 1;
    }
}
@-moz-keyframes scaleUp {
    0% { }
    100% {
        -moz-transform: scale(1);
        opacity: 1;
    }
}
@-webkit-keyframes scaleUp {
    0% { }
    100% {
        -webkit-transform: scale(1);
        opacity: 1;
    }
}

/*Move Up*/
@keyframes moveUp {
    0% { }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
@-o-keyframes moveUp {
    0% { }
    100% {
        -o-transform: translateY(0);
        opacity: 1;
    }
}
@-ms-keyframes moveUp {
    0% { }
    100% {
        -ms-transform: translateY(0);
        opacity: 1;
    }
}
@-moz-keyframes moveUp {
    0% { }
    100% {
        -moz-transform: translateY(0);
        opacity: 1;
    }
}
@-webkit-keyframes moveUp {
    0% { }
    100% {
        -webkit-transform: translateY(0);
        opacity: 1;
    }
}

/*Spin*/
@keyframes spin {
    0% {transform: rotate(0deg)}
    50% {transform: rotate(360deg)}
    100% {transform: rotate(1080deg)}
}
@-o-keyframes spin {
    0% {-o-transform: rotate(0deg)}
    50% {-o-transform: rotate(360deg)}
    100% {-o-transform: rotate(1080deg)}
}
@-ms-keyframes spin {
    0% {-ms-transform: rotate(0deg)}
    50% {-ms-transform: rotate(360deg)}
    100% {-ms-transform: rotate(1080deg)}
}
@-moz-keyframes spin {
    0% {-moz-transform: rotate(0deg)}
    50% {-moz-transform: rotate(360deg)}
    100% {-moz-transform: rotate(1080deg)}
}
@-webkit-keyframes spin {
    0% {-webkit-transform: rotate(0deg)}
    50% {-webkit-transform: rotate(360deg)}
    100% {-webkit-transform: rotate(1080deg)}
}

/*Pulse*/
@keyframes pulse {
    0% {background-color: rgba(221, 187, 0, 0.2)}
    13% {background-color: rgba(221, 187, 0, 0.2)}
    15% {background-color: rgba(255, 234, 119, 0.9)}
    28% {background-color: rgba(255, 234, 119, 0.9)}
    30% {background-color: rgba(221, 187, 0, 0.2)}
    43% {background-color: rgba(221, 187, 0, 0.2)}
    45% {background-color: rgba(255, 234, 119, 0.9)}
    70% {background-color: rgba(255, 234, 119, 0.9)}
    74% {background-color: rgba(221, 187, 0, 0.2)}
    100% {background-color: rgba(255, 234, 119, 0.9)}
}
@-o-keyframes pulse {
    0% {background-color: rgba(221, 187, 0, 0.2)}
    13% {background-color: rgba(221, 187, 0, 0.2)}
    15% {background-color: rgba(255, 234, 119, 0.9)}
    28% {background-color: rgba(255, 234, 119, 0.9)}
    30% {background-color: rgba(221, 187, 0, 0.2)}
    43% {background-color: rgba(221, 187, 0, 0.2)}
    45% {background-color: rgba(255, 234, 119, 0.9)}
    70% {background-color: rgba(255, 234, 119, 0.9)}
    74% {background-color: rgba(221, 187, 0, 0.2)}
    100% {background-color: rgba(255, 234, 119, 0.9)}
}
@-ms-keyframes pulse {
    0% {background-color: rgba(221, 187, 0, 0.2)}
    13% {background-color: rgba(221, 187, 0, 0.2)}
    15% {background-color: rgba(255, 234, 119, 0.9)}
    28% {background-color: rgba(255, 234, 119, 0.9)}
    30% {background-color: rgba(221, 187, 0, 0.2)}
    43% {background-color: rgba(221, 187, 0, 0.2)}
    45% {background-color: rgba(255, 234, 119, 0.9)}
    70% {background-color: rgba(255, 234, 119, 0.9)}
    74% {background-color: rgba(221, 187, 0, 0.2)}
    100% {background-color: rgba(255, 234, 119, 0.9)}
}
@-moz-keyframes pulse {
    0% {background-color: rgba(221, 187, 0, 0.2)}
    13% {background-color: rgba(221, 187, 0, 0.2)}
    15% {background-color: rgba(255, 234, 119, 0.9)}
    28% {background-color: rgba(255, 234, 119, 0.9)}
    30% {background-color: rgba(221, 187, 0, 0.2)}
    43% {background-color: rgba(221, 187, 0, 0.2)}
    45% {background-color: rgba(255, 234, 119, 0.9)}
    70% {background-color: rgba(255, 234, 119, 0.9)}
    74% {background-color: rgba(221, 187, 0, 0.2)}
    100% {background-color: rgba(255, 234, 119, 0.9)}
}
@-webkit-keyframes pulse {
    0% {background-color: rgba(221, 187, 0, 0.2)}
    13% {background-color: rgba(221, 187, 0, 0.2)}
    15% {background-color: rgba(255, 234, 119, 0.9)}
    28% {background-color: rgba(255, 234, 119, 0.9)}
    30% {background-color: rgba(221, 187, 0, 0.2)}
    43% {background-color: rgba(221, 187, 0, 0.2)}
    45% {background-color: rgba(255, 234, 119, 0.9)}
    70% {background-color: rgba(255, 234, 119, 0.9)}
    74% {background-color: rgba(221, 187, 0, 0.2)}
    100% {background-color: rgba(255, 234, 119, 0.9)}
}

/*Border Pulse*/
@keyframes borderPulse {
    0% {box-shadow: 0 0 0 0 #767676, 0 0 0 1px rgba(221, 187, 0, 0.8)}
    40% {box-shadow: 0 0 0 1px #767676, 0 0 0 2px rgba(221, 187, 0, 0.8)}
    80% {box-shadow: 0 0 0 3px #767676, 0 0 1px 3px rgba(221, 187, 0, 0.8)}
}
@-o-keyframes borderPulse {
    0% {-o-box-shadow: 0 0 0 0 #333, 0 0 0 1px rgba(221, 187, 0, 0.8)}
    40% {-o-box-shadow: 0 0 0 1px #333, 0 0 0 2px rgba(221, 187, 0, 0.8)}
    80% {-o-box-shadow: 0 0 0 3px #333, 0 0 1px 3px rgba(221, 187, 0, 0.8)}
}
@-ms-keyframes borderPulse {
    0% {-ms-box-shadow: 0 0 0 0 #333, 0 0 0 1px rgba(221, 187, 0, 0.8)}
    40% {-ms-box-shadow: 0 0 0 1px #333, 0 0 0 2px rgba(221, 187, 0, 0.8)}
    80% {-ms-box-shadow: 0 0 0 3px #333, 0 0 1px 3px rgba(221, 187, 0, 0.8)}
}
@-moz-keyframes borderPulse {
    0% {-moz-box-shadow: 0 0 0 0 #333, 0 0 0 1px rgba(221, 187, 0, 0.8)}
    40% {-moz-box-shadow: 0 0 0 1px #333, 0 0 0 2px rgba(221, 187, 0, 0.8)}
    80% {-moz-box-shadow: 0 0 0 3px #333, 0 0 1px 3px rgba(221, 187, 0, 0.8)}
}
@-webkit-keyframes borderPulse {
    0% {-webkit-box-shadow: 0 0 0 0 #333, 0 0 0 1px rgba(221, 187, 0, 0.8)}
    40% {-webkit-box-shadow: 0 0 0 1px #333, 0 0 0 2px rgba(221, 187, 0, 0.8)}
    80% {-webkit-box-shadow: 0 0 0 3px #333, 0 0 1px 3px rgba(221, 187, 0, 0.8)}
}




@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1185px
    }
}





/*Categories*/
.categories .card .imgCont {
    min-width: 5rem;
    max-width: 5rem
}
.categories-detail .cateImage {
    min-width: 5rem;
    max-width: 5rem
}
@media screen and (min-width: 990px) {
    .categories .card .fix-boxs {
        min-width: 7rem;
        max-width: 7rem
    }
}
@media screen and (min-width: 1200px) {
    .categories .col-xl-auto {
        width: 12.5%;
    }
}



.bg-icons {
    background: url(../img/default/1810239.jpg);
    background-size: cover;
    min-width: 8rem;
    height: 8rem;
    opacity: .8;
    top: -21px;
    right: -10px;
}


/*WITHDRAW*/
.offcanvas#withdrawShow {
    height: auto !important;
}
@media screen and (min-width: 990px) {
    .offcanvas#withdrawShow {
        width: 30rem;
        height: auto;
        margin: auto;
        top: 50%;
        bottom: initial;
        -webkit-border-radius: .75rem;
        -moz-border-radius: .75rem;
        border-radius: .75rem;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .offcanvas#withdrawShow .offcanvas-header {
        border-top-left-radius: .75rem !important;
        border-top-right-radius: .75rem !important;
    }
    .offcanvas#withdrawShow .offcanvas-footer {
        border-bottom-left-radius: .75rem !important;
        border-bottom-right-radius: .75rem !important;
    }


    .wallet #withdrawShow {
        background-color: transparent !important;
        width: initial;
        height: initial;
        z-index: 1030;
        top: initial;
        border-top: 0;
        margin: initial;
        visibility: visible;
        overflow: hidden;
        position: relative;
        left: initial;
        right: initial;
        bottom: initial;
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
        border-radius: .5rem !important;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
    }
    #withdrawShow .offcanvas-header,
    #withdrawShow .offcanvas-footer {
        background-color: #ffffff;
    }
    .wallet #withdrawShow .offcanvas-body {
        background-color: #FFFFFF !important;
        overflow-y: visible;
        /*box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;*/
        /*border-radius: .5rem !important;*/
    }
    /*#withdrawShow .form-floating>.form-control::-webkit-input-placeholder { !* Edge *!*/
    /*    color: #94999c;*/
    /*}*/
    /*#withdrawShow .form-floating>.form-control:-ms-input-placeholder { !* Internet Explorer 10-11 *!*/
    /*    color: #94999c;*/
    /*}*/
    /*#withdrawShow .form-floating>.form-control::placeholder {*/
    /*    color: #94999c;*/
    /*}*/

    /*#withdrawShow .form-floating>.form-control,*/
    /*#withdrawShow .form-floating>.form-control-plaintext {*/
    /*    padding-top: .375rem !important;*/
    /*    padding-bottom: .375rem !important;*/
    /*    line-height: 1.5 !important;*/
    /*}*/
    /*#withdrawShow .form-floating>.form-control,*/
    /*#withdrawShow .form-floating>.form-control-plaintext,*/
    /*#withdrawShow .form-floating>.form-select {*/
    /*    height: 100% !important;*/
    /*    min-height: 2.55rem !important;*/
    /*    max-height: 2.55rem !important;*/
    /*    padding-top: .4rem !important;*/
    /*}*/
    /*#withdrawShow .form-floating label {*/
    /*    display: none !important;*/
    /*}*/
}



@media screen and (min-width: 990px) {
    /*Account Show*/
    .offcanvas#accountShow {
        position: absolute;
        top: .5rem;
        right: -100%;
        bottom: auto;
        visibility: visible;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
        z-index: 1044;
    }
    .offcanvas#accountShow.show {
        min-width: 19rem;
        font-size: .9rem;
        top: 0;
        overflow: hidden;
        right: .5rem;
        z-index: 9999 !important;
        -webkit-border-radius: .375rem;
        -moz-border-radius: .375rem;
        border-radius: .375rem;
        -webkit-box-shadow: 0 1rem 16px 3rem rgba(0, 0, 0, 0.175);
        -moz-box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
        box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
    }
    .offcanvas#accountShow.show .offcanvas-header {
        border-top-left-radius: .375rem;
        border-top-right-radius: .375rem;
    }
    .offcanvas#accountShow.show .offcanvas-footer {
        border-bottom-left-radius: .375rem;
        border-bottom-right-radius: .375rem;
    }
    .offcanvas#accountShow .floating-custom-navbar {
        position: fixed;
        top: 0;
        left: 4.5rem;
        opacity: 1;
    }
    .offcanvas#accountShow ~ .offcanvas-backdrop {
        opacity: 0;
    }
    .offcanvas#accountShow .propertiesCustomWidget {
        max-width: 12rem;
        height: 2.3rem;
    }
}
@media screen and (max-width: 990px) {
    .offcanvas#accountShow {
        width: 21rem;
        right: 0;
        -webkit-box-shadow: none !important;
        -moz-box-shadow: none !important;
        box-shadow: none !important;
        -webkit-border-radius: 0 !important;
        -moz-border-radius: 0 !important;
        border-radius: 0 !important;
    }
    .offcanvas#accountShow .earningCustomWidget .label-custom,
    .offcanvas#accountShow .superpointCustomWidget .label-custom,
    .offcanvas#accountShow .propertiesCustomWidget .label-custom {
        background: linear-gradient(to bottom, #f8f9fa 50%, #ffffff 100%);
    }
}


.custom-ranges .progress-bar {
    background-color: var(--first-color) !important;
    color: #ffffff;
}