/*Astro*/
:root {
    --first-color: #163582;
    --second-color: #3080c9;
    --third-color: #5ebbed;
    --fourth-color: #47ad01;
    --fifth-color: #fdf0e6;
    --white-color: #ffffff;
    --container-background: #f9f9f9;
    /*--container-background: #ffffff;*/
    /*--header-background: linear-gradient(90deg, rgb(0, 92, 147), rgb(107, 58, 167));*/
    --header-background: #ffffff;
    --header-logo-max-height: 100%;
    --header-logo-max-width: 150px;
    --btn-color : linear-gradient(90deg, var(--first-color), var(--first-color));
}

.btn-custom-1 {
    background: var(--btn-color);
    border-color: #e6c100;
    color: #ffffff;
}

.bg-custom-gradation, .btn-custom-gradation {
    background: -webkit-linear-gradient(90deg, var(--c1, #ffe229), var(--c2, #baf32e) 51%, var(--c1, #a7ea67)) var(--x, 0) / 200%;
    background: -moz-linear-gradient(90deg, var(--c1, #ffe229), var(--c2, #baf32e) 51%, var(--c1, #a7ea67)) var(--x, 0) / 200%;
    background: -o-linear-gradient(90deg, var(--c1, #ffe229), var(--c2, #baf32e) 51%, var(--c1, #a7ea67)) var(--x, 0) / 200%;
    background: linear-gradient(90deg, var(--c1, #ffe229), var(--c2, #baf32e) 51%, var(--c1, #a7ea67)) var(--x, 0) / 200%;
    border-color: var(--c3, #a7ea67) !important;
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}

.btn-7 {
    --c1: #ffe229;
    --c2: #baf32e;
    --c3: #a7ea67;
}

.navbar .navbar-brand {
    width: 100px;
}

/*Text Color*/
.navbar,
.navbar a,
.navbar .nav-link,
.navbar .nav-link.active,
.navbar .nav-link.show {
    color: #333333;
}

.navbar a:hover,
.navbar .nav-link:hover,
.navbar .nav-link.active:hover,
.navbar .nav-link.show:hover {
    color: #333333;
}


/*Background*/
.navbar-bg-custom {
    background: var(--header-background);
    /*background-color: #ffffff24;*/
    /*-webkit-backdrop-filter: blur(12px);*/
    /*backdrop-filter: blur(12px);*/
}
.body-bg-custom {
    background-color: var(--second-color) !important;
}
.container-bg-custom {
    background-color: var(--container-background) !important;
}
.border-custom {
    border-color: #333333;
}

/*Button Custom*/
.btn-custom-1 {
    background-color: var(--first-color) !important;
    border-color: var(--first-color) !important;
    color: #FFFFFF !important;
}
.btn-custom-2 {
    background-color: var(--second-color) !important;
    border-color: var(--second-color) !important;
    color: #FFFFFF !important;
}
.btn-1 {
    --c1: var(--first-color);
    --c2: var(--third-color);
    --c3: var(--third-color);
}


.form-check-input:checked {
    background-color: var(--first-color);
    border-color: var(--first-color);
}




/*Badge*/
.badge-custom {
    background-color: var(--fourth-color);
}

/*Menu*/
.navbar-nav .nav-link.active::after,
.menuBottom a.active::after {
    border-top: 4px solid var(--second-color);
}

.navbar-nav .nav-link.active,
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    background-color: var(--first-color) !important;
    color: #FFFFFF !important;
}

.navbar .nav-link:not(.active,.conversion):hover {
    background-color: #eeeeee;
}

.navbar .bd-links-link:hover,
.navbar .bd-links-link:focus,
.navbar .bd-links-link.active {
    background-color: #EEEEEE !important;
    /*color: var(--white-color) !important;*/
}

.buttonCashbackDetail,
.generateLinkProduct,
.searchProductPromo,
.voucherCodeWrap input {
    background-color: #e6f0ff !important;
    border-color: #9ec5fe !important;
}
.buttonCashbackDetail {
    background-color: transparent !important;
    border-style: dashed !important;
    border-width: 1px !important;
}
.voucherCodeWrap input {
    border-color: var(--first-color) !important;
}

/*Swiper Custom style*/
.swiper-button-prev,
.swiper-button-next {
    background-color: #3595d391;
    border-color: #3595d391;
}

/*Footer*/
footer {
    color: #ffffff;
}

/*Pagination*/
.pagination .active>.page-link, .page-link.active {
    z-index: 3;
    color: #FFFFFF !important;
    background-color: var(--first-color);
    border-color: var(--first-color);
}
.pagination .page-link {
    color: #000000;
}



/*Wallet*/
.wallet .nav-pills .nav-link.active,
.wallet .nav-pills .show>.nav-link {
    background-color: var(--first-color) !important;
    color: var(--bs-nav-pills-link-active-color) !important;
}

/*Product*/
.product-triger .commission {
    background-color: rgb(230 240 255) !important;
    color: rgb(230 240 255) !important;
    border-color: #d3e5ff !important;
}
.buttonCashbackDetail .icon-wrap::before {
    border-top-color: inherit !important;
}
.product-triger .product_commission,
.buttonCashbackDetail .icon-wrap {
    color: var(--first-color) !important;
}
.buttonCashbackDetail .icon-wrap i {
    color: #FFFFFF !important;
}
.product-triger .icon-wrap,
.buttonCashbackDetail .icon-wrap {
    background-color: var(--first-color) !important;
}



.bg-mobile-active {
    /*background: #dad8d8 !important;*/
    /*background: linear-gradient(90deg, rgba(22, 53, 130, 1) 0%, rgba(94, 187, 237, 1) 44%, rgba(94, 187, 237, 1) 59%, rgba(22, 53, 130, 1) 100%);*/
}
.bg-mobile-active .rounded-custom {
    background-color: #dad8d8 !important;
}

@media screen and (max-width: 480px) {
    .notch-wraps {
        margin-top: 0 !important;
    }
}
