header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;
    background-color: var(--color-white);
    box-shadow: 0 0 5px 2px rgba(0,0,0,0.2);
}
footer {
    background-color: var(--primarr-light-color);
}
footer ul {
    list-style: none;
}
footer ul li a {
    color: var(--color-white);
    text-decoration: none;
}
.border-bottom-light {
    border-bottom: 1px solid var(--color-white-100);
}
main {
    margin-top: 102px;
}
.hero-section {
    /* background: url('../images/hero-background.png'), var(--primary-color); */
}
h1 {
    font-size: var(--font-65);
}
h2 {
    font-size: var(--font-70);
}
h3 {
    font-size: 35px;
}
h4 {
    font-size: 28px;
    text-shadow: 0px 4px 4px 0px #000000A6;    ;
}
.hero-section p {
    font-size: var(--font-18);
}
.login_wrap {

    height: 100vh;
    background-size: cover;
    background-position: center center;
    display: flex;
    align-items: center;
    padding: 30px 0;
}
.remove_header header, .remove_header footer {
    display: none;
}
.remove_header main {
    margin: 0 !important;
    background-image: url('../images/login_wrap_background.png');
}
.bg-login {
    background-image: url('../images/login_wrap_background.png');
}
.w-65 {
    width: 65px !important;
}
.bg-primary-light {
    background-color: #fcf7ff;
}
.top_5 {
    position: relative;
    top: 5px;
}

.input-46 {
    height: 46px;
    padding: 10px 15px;
}
.box-card {
    width: 100%;
    max-width: 550px;
    background-color: var(--color-white);
    box-shadow: 0px 0px 17px 0px #E0CEFB;
    border-radius: 40px;
    margin: 0 auto;
    padding: 40px;
}
.box-card-536 {
    width: 100%;
    max-width: 536px;
    background-color: var(--color-white);
    box-shadow: 0px 0px 17px 0px #E0CEFB;
    border-radius: 40px;
    margin: 0 auto;
    padding: 40px;
}
.password-group {
    position: relative;
}
.password-group input {
    padding-right: 60px;
}
.password-group .toggle-password {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 15px;
    display: flex;
    align-items: center;
    z-index: 5;
}
.icon-62 {
    width: 62px;
    height: 62px;
    border-radius: 100%;
}
.dropdown-toggle::after {
    display: none;
}
.downarrow {
    background: #AF99EE42;
    width: 28px;
    height: 28px;
    border-radius: 5px;
}
.dropdown-menu {
    width: 278px;
    box-shadow: 0px 0px 4px 0px #00000040;
    border: 0;
    padding: 0;
}
.dropdown-menu li a {
    padding: 10px 15px;
}
.theme-table:has(table.dataTable) {
    border-radius: 0;
    border: 0;
    font-size: 17px;
}
.theme-table {
    border-radius: 10px;
    border: 1px solid #CFCFCF;
    font-size: 17px;
}
table.dataTable {
    border: 1px solid #CFCFCF;
    width: 100% !important;
    border-radius: 10px;
    margin: auto !important;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 15px !important;
}
.dataTables_length label {
    padding-left: 0 !important;
}
.dataTables_filter label {
    padding-right: 0 !important;
}
.theme-table thead td {
    background-color:#EFEEF6;
}
.theme-table thead td:first-child {
    border-top-left-radius: 10px;
}
.theme-table thead td:last-child {
    border-top-right-radius: 10px;
}
.theme-table tbody tr:last-child td {
    border-bottom: 0 !important;
}
.theme-table tbody tr:last-child{
    border-bottom: 0 !important;
}
.table>:not(caption)>*>* {
    padding: 1rem .8rem;
    white-space: nowrap;
}
.primary-box-card {
    background: var(--primary-color) url(../images/balance-background.png);
    min-height: 144px;
    display: flex;
    padding: 20px 0;
    align-items: center;
    color: var(--color-white) !important;
}
.plan-bg {
    background-image: url(../images/plan-bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 30px;
}
.text-shedow {
    text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1),     0px 18px 23px rgba(0,0,0,0.1);
}
.box-div {
    border-radius: 10px;
}
.card-green {
    background-color: #09B879 !important;
}
.card-blue {
    background: #096EB8 !important;
}
.card-orange {
    background:  #B86709!important;
}
.card-primary {
    background: var(--primary-color) !important;
}
.refer-code-form input {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
.refer-code-form .input-group-text {
    width: 55px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border-top-left-radius: 0;
}
.refer-box-height {
    min-height: 580px;
    display: flex;
    align-items: center;
}
.avatar-profile {
    display: inline-flex;
}
.avatar-profile img {
    width: 151px;
    height: 151px;
    object-fit: cover;
    border-radius: 100%;
}
.edit-icon {
    position: absolute;
    bottom: 0;
    right: -20px;
    width: 50px;
    height: 50px;
    background-color: var(--color-white);
    border: 4px solid #EADFFB;
    border-radius: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.edit-icon img {
    width: 30px;
    height: 30px;
}
@media screen and (max-width: 767px) {
    .max-410 {
        max-width: 365px !important;
        margin: 0 auto;
    }
    .max-350 {
        max-width: 300px !important;
        margin: 0 auto;
    }
    .max-350 .card.pricing-card {
        height: 420px;
    }
    .login_wrap {
        padding: 30px 10px;
    }
    .box-card {
        padding: 16px;
        border-radius: 10px;
    }
    .icon-62 {
        width: 39px;
        height: 39px;
    }
    .logo {
        max-width: 140px;
    }
    .border-bottom-md-light {
        border-bottom: 1px solid var(--color-white-100);
    }
    main {
        margin-top: 61px;
    }
}
.owl-nav {
    display: flex;
    justify-content: space-between;
}
button.owl-prev {
    left: -100px;
    position: absolute;
    top: 40%;
}
button.owl-next {
    right: -100px;
    position: absolute;
    top: 40%;
}
@media screen and (max-width: 1280px) {
    button.owl-prev {
        left: -70px;
    }
    button.owl-next {
        right: -70px;
    }
}
.pricing-card {
    border-radius: 30px;
    font-size: 17px;
    border: 0;
    background-size: cover;
}
.pricing-card span {
    font-size: 18px;
    font-weight: bold;
}
.badge-inactive {
    width: 16px;
    height: 16px;
    border: 2px solid #fff;
    background: #cf1036;
    display: inline-flex;
    border-radius: 100%;
}
.badge-active {
    width: 16px;
    height: 16px;
    border: 2px solid #fff;
    background: #2BCF10;
    display: inline-flex;
    border-radius: 100%;
}
.card-image-1 {
    background-image: url(../images/card-image-1.png);
}
.card-image-2 {
    background-image: url(../images/card-image-2.png);
}
.card-image-3 {
    background-image: url(../images/card-image-3.png);
}
.card-image-4 {
    background-image: url(../images/card-image-4.png);
}
.card-image-5 {
    background-image: url(../images/card-image-5.png);
}
.card-image-6 {
    background-image: url(../images/card-image-6.png);
}
.card-image-7 {
    background-image: url(../images/card-image-7.png);
}
.card-image-8 {
    background-image: url(../images/card-image-8.png);
}
.card-image-9 {
    background-image: url(../images/card-image-9.png);
}
.card-image-10 {
    background-image: url(../images/card-image-10.png);
}
.card.pricing-card {
    height: 500px;
    align-items: flex-start;
    overflow: hidden;
}
@media screen and (max-width: 767px) {
    .pricing-card span {
        font-size: 16px;
        font-weight: normal;
    }
    .card.pricing-card, .plan-bg {
        height: 520px;
        justify-content: space-between;
        
    }
}
.copy-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #000;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    white-space: nowrap;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
@media screen and (min-width: 1025px) {
    .dropdown-menu[data-bs-popper] {
        left: -80px;
    }
}
@media screen and (max-width: 1024px) {
    .dropdown-menu[data-bs-popper] {
        left: -240px;
    }
}
.blink-text-red {
    animation: 2s infinite pulse-red;
}
.blink-text-green {
    animation: 2s infinite pulse-green;
}
.blink-text-blue {
    animation: 2s infinite pulse-blue;
}
.blink-arrow {
    animation: 2s infinite pulse-green-zoom;
}
.bg-blue-completed {
    background-color: #02bfff !important;
}
.accordion-button::after {
    display: none;
}
@keyframes pulse-blue {
    0% {
        -moz-box-shadow: 0 0 0 rgb(0 0 0 / .8);
        box-shadow: 0 0 0 rgb(2 191 255 / 80%);
    }

    70% {
        -moz-box-shadow: 0 0 0 10px #fff0;
        box-shadow: 0 0 0 10px #fff0
    }

    100% {
        -moz-box-shadow: 0 0 0 0 #fff0;
        box-shadow: 0 0 0 0 #fff0
    }
}
@keyframes pulse-green {
    0% {
        -moz-box-shadow: 0 0 0 rgb(0 0 0 / .8);
        box-shadow: 0 0 0 rgb(25 135 84 / .8)
    }

    70% {
        -moz-box-shadow: 0 0 0 10px #fff0;
        box-shadow: 0 0 0 10px #fff0
    }

    100% {
        -moz-box-shadow: 0 0 0 0 #fff0;
        box-shadow: 0 0 0 0 #fff0
    }
}
@keyframes pulse-red {
    0% {
        -moz-box-shadow: 0 0 0 rgb(0 0 0 / .8);
        box-shadow: 0 0 0 rgba(135, 25, 25, 0.8);
    }

    70% {
        -moz-box-shadow: 0 0 0 10px #fff0;
        box-shadow: 0 0 0 10px #fff0
    }

    100% {
        -moz-box-shadow: 0 0 0 0 #fff0;
        box-shadow: 0 0 0 0 #fff0
    }
}
@keyframes pulse-green-zoom {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.5);
    }

    100% {
        transform: scale(1);
    }
}
.accordion-item {
    border: none;
}
.accordion-button:not(.collapsed){
    background-color: #ffffff;
}
.title-box {
    background: #EFEEF6;
    border-bottom: 1px solid #CFCFCF;
}
.border-div > div:not(:last-child) {
    border-bottom: 1px solid #CFCFCF;
}
.accordion-button:not(.collapsed) .hide {
    display: none;
}
.w-20 {
    width: 25px;
    height: auto;
}
.history-tl-container ul.tl{
    margin:20px 0;
    padding:0;
    display:inline-block;

}
.history-tl-container ul.tl li{
    list-style: none;
    margin:auto;
    margin-left:200px;
    min-height:50px;
    /*background: rgba(255,255,0,0.1);*/
    border-left:1px solid #a2a2a2;
    padding:0 0 30px 30px;
    position:relative;
}
.history-tl-container ul.tl li:last-child{ border-left:0;}
.history-tl-container ul.tl li::before{
    position: absolute; 
    left: -15px;
    top: -5px;
    content: " ";
    border-radius: 10px;
    background: #a2a2a2;
    height: 30px;
    width: 30px;
    transition: all 500ms ease-in-out;

}

.history-tl-container ul.tl li.inprogress::before {
    background: #cb5e27;
}
.history-tl-container ul.tl li:hover::before{
    border-color:  #258CC7;
    transition: all 1000ms ease-in-out;
}
ul.tl li .item-title{
    font-weight: bold;
}
ul.tl li .item-detail{
    color:rgba(0,0,0,0.5);
    font-size:12px;
}
ul.tl li .timestamp{
    color: #000;
    position: absolute;
    width: 100px;
    left: -73%;
    top: -4px;
    text-align: right;
    font-size: 12px;
}
.timestamp small {
    color: rgba(0,0,0,0.5)
}
.history-tl-container ul li.inprogress:before {
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPgo8c3ZnIHdpZHRoPSI4MDBweCIgaGVpZ2h0PSI4MDBweCIgdmlld0JveD0iMCAwIDM2IDM2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBhcmlhLWhpZGRlbj0idHJ1ZSIgcm9sZT0iaW1nIiBjbGFzcz0iaWNvbmlmeSBpY29uaWZ5LS10d2Vtb2ppIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0Ij48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMzQuNDU5IDEuMzc1YTIuOTk5IDIuOTk5IDAgMCAwLTQuMTQ5Ljg4NEwxMy41IDI4LjE3bC04LjE5OC03LjU4YTIuOTk5IDIuOTk5IDAgMSAwLTQuMDczIDQuNDA1bDEwLjc2NCA5Ljk1MnMuMzA5LjI2Ni40NTIuMzU5YTIuOTk5IDIuOTk5IDAgMCAwIDQuMTUtLjg4NEwzNS4zNDMgNS41MjRhMi45OTkgMi45OTkgMCAwIDAtLjg4NC00LjE0OXoiPjwvcGF0aD48L3N2Zz4=), var(--primary-color);
    background-size: 10px;
    background-repeat: no-repeat;
    background-position: center;
}
.history-tl-container ul li.active:before {
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPgo8c3ZnIHdpZHRoPSI4MDBweCIgaGVpZ2h0PSI4MDBweCIgdmlld0JveD0iMCAwIDM2IDM2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBhcmlhLWhpZGRlbj0idHJ1ZSIgcm9sZT0iaW1nIiBjbGFzcz0iaWNvbmlmeSBpY29uaWZ5LS10d2Vtb2ppIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0Ij48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMzQuNDU5IDEuMzc1YTIuOTk5IDIuOTk5IDAgMCAwLTQuMTQ5Ljg4NEwxMy41IDI4LjE3bC04LjE5OC03LjU4YTIuOTk5IDIuOTk5IDAgMSAwLTQuMDczIDQuNDA1bDEwLjc2NCA5Ljk1MnMuMzA5LjI2Ni40NTIuMzU5YTIuOTk5IDIuOTk5IDAgMCAwIDQuMTUtLjg4NEwzNS4zNDMgNS41MjRhMi45OTkgMi45OTkgMCAwIDAtLjg4NC00LjE0OXoiPjwvcGF0aD48L3N2Zz4=), var(--primary-color);
    background-size: 10px;
    background-repeat: no-repeat;
    background-position: center;
}
@media screen and (max-width: 991px) {
    .min-250 {
        min-height: calc(100dvh - 250px);
    }
    .history-tl-container ul.tl li {
        margin-left: 100px;
    }
    ul.tl li .timestamp {
        left: -65%;
    }
}
@media screen and (max-width: 575px) {
    ul.tl li .timestamp {
        left: -120px;
    }
}
    .balance-card {
      background: white;
      border-radius: 10px;
      padding: 1rem;
      margin-top: -30px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .quick-amount button {
      margin: 5px;
      border-radius: 8px;
      font-size: 16px;
      font-weight: normal;
    }

    .method-card {
      border: 2px solid transparent;
      border-radius: 10px;
      padding: 1rem;
      margin-bottom: 1rem;
      cursor: pointer;
    }

    .method-card.active {
      border-color: var(--primary-color);
      background-color: #e4daeb;
    }

    .deposit-btn {
      border-radius: 10px;
      font-weight: bold;
      justify-content: center;
    }
    .btn-outline-primary:hover, .btn-outline-primary:focus {
        color: #ffffff !important;
        background-color: var(--primary-color) !important;
    }
    .small-button {
        height: auto !important;
    padding: 5px !important;

    }
    .pricing-card span.badge {
                font-size: 18px;
    margin-left: 0;
    margin-bottom: 10px;
    }
    .max-box {
        max-height: 40px;
    }
    .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after, .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
        display: none;
    }
    .swiper-button-next, .swiper-rtl .swiper-button-prev, .swiper-button-prev, .swiper-rtl .swiper-button-next {
        width: 50px;
    }
    @media screen and (max-width: 1024px) {
        .res-button {
            font-size: 15px;
            padding: 0 14px;
        }
        .swiper-button-next, .swiper-rtl .swiper-button-prev, .swiper-button-prev, .swiper-rtl .swiper-button-next {
            display: none;
        }
        
    }
    .referCodeBox {
            display: inline-block;
        }
        .mobile-show .referCodeBox {
            display: none;
        }
        .toggle-ref-code {
            display: none;
        }
        .mobile-show .toggle-ref-code {
            display: inline-block;
        }
    .timer-box {
        /* background: #0C0C0C5E; */
        background: #ffffff40;
        padding: 5px 12px;
        border-radius: 10px;

    }

  .blinking-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    top: 15px;
    right: 15px;
}
    .blinking-dot-active {
    background-color: #28a745;
    box-shadow: 0 0 8px rgba(40, 167, 69, 0.7);
    animation: blink 1s infinite;
}

.blinking-dot-inactive {
    background-color: #dc3545;
    box-shadow: 0 0 8px rgba(220, 53, 69, 0.7);
    animation: blink 1s infinite;
}

.blinking-dot-completed {
    background-color: #0d6efd; 
    box-shadow: 0 0 8px rgba(13, 110, 253, 0.7);  
}


    @keyframes blink {
        0%, 100% { opacity: 1; }
        50% { opacity: 0; }
    }
    
    .w-70 {
        width: 80px;
    }
    @media screen and (max-width: 375px) {
        .logo {
        max-width: 120px;
        }
        .btn-white, .btn-white:hover, .btn-white:active, .btn-white:focus-visible {
            font-size: 12px !important;
        }
    }