@font-face {
    font-family: Avenir-Book;
    src: url(../font/avenir_ff/AvenirLTStd-Book.otf);
}

@font-face {
    font-family: Avenir-Black;
    src: url(../font/avenir_ff/AvenirLTStd-Black.otf);
}

@font-face {
    font-family: Avenir-Roman;
    src: url(../font/avenir_ff/AvenirLTStd-Roman.otf);
}

:root {
    /* color variable */
    --gray: #a7a7a7;
    --charcoal: #212529;
    --stack: #829382;
    --gainsboro: #e2e2e2;
    --alizarin: #ee3641;
    --darkred: #b20838;
    --smoke: #efefef;
    --smoke-2: #fafafa;
    --white: #fff;
    --purple: #f7eff6;
    --oldpurple: #892785;
    --green: #03aa4b;
    --acc: #dc3d3d;
    --default: #555555;
    --bgtable: #f2f2f2;
    --bginfo: #fffbd9;
    --icon-black: #374355;
    --light-green: #03AA4B;
    --success-hover: #136c43;
    --sunray-tp: #E3B15140;
    --bluemandiri: #013B7A;
}

.bg-light-green {
    background-color: var(--light-green);
}

.bg-sunray-tp {
    background-color: var(--sunray-tp);
}

.ic-black {
    color: var(--icon-black);
}

.br-solid-table {
    border-right: 1px solid #dee2e6;
}

.bg-white {
    background-color: var(--white);
}

.text-darkred {
    color: var(--darkred);
}

.bg-smoke-2 {
    background-color: var(--smoke-2);
}

.bginfo {
    background-color: var(--bginfo);
}

.tb-bb {
    border-bottom: 1px solid #dee2e6;
}

.tb-bt {
    border-top: 1px solid #dee2e6;
}

body {
    font-family: Avenir-Book;
    color: #555555;
}

.text-green {
    color: var(--green);
}

.bg-table {
    background-color: var(--bgtable);
}

.color-default {
    color: var(--default);
}

.text-alizarin {
    color: var(--alizarin);
}

.bg-acc {
    background-color: var(--acc);
}

.bg-orange {
    background-color: var(--orange);
}

.btn-green {
    background-color: var(--green);
    color: #fff;
}

.btn-green:hover {
    background-color: #019441;
    color: #fff;
}

.font-avenir-black {
    font-family: Avenir-Black !important;
}

.font-avenir-book {
    font-family: Avenir-Book !important;
}

.darkred {
    color: var(--darkred);
}

.bg-white {
    background-color: var(--white);
}

.bg-oldpurple {
    background-color: var(--oldpurple);
}

.bg-bluemandiri {
    background-color: var(--bluemandiri);
}

.text-oldpurple {
    color: var(--oldpurple);
}

.bg-purple {
    background-color: var(--purple);
}

hr {
    background-color: var(--gainsboro);
}

.nav-menu-icon:hover,
.nav-menu-icon:focus {
    color: var(--alizarin);
}

.orange-at {
    color: var(--alizarin);
}

.text-white {
    color: var(--white);
}

.bg-color-grey {
    background-color: var(--stack);
}

.bg-grey {
    background-color: #f8f8f8;
}

.bg-dark-red {
    background-color: var(--darkred) !important;
}

.bg-smoke {
    background-color: var(--smoke);
}

a {
    text-decoration: none;
    color: inherit;
}

.text-gray {
    color: var(--gray) !important;
}

.text-muted {
    color: var(--gray) !important;
}

.text-charcoal {
    color: var(--charcoal) !important;
}

.text-justify {
    text-align: justify !important;
}

.bg-smoke {
    background-color: var(--smoke) !important;
}

.bg-red-transprt {
    background: rgba(238, 54, 65, 0.08);
}

.border-gray {
    border-color: var(--gainsboro) !important;
}

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

.bg-size-cover {
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
}

.bg-red-linkAja {
    background-color: #E62E2D;
}

a:hover,
a:focus {
    text-decoration: none;
}

a:hover {
    color: var(--alizarin);
}

a {
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.contact-us {
    background: rgba(153, 152, 149, 0.15);
}


/* Form */

.form-control {
    border: 1px solid #e5e5e5;
    padding: 0.75rem 0.75rem;
    background: #fafafa;
    font-size: 1rem;
    line-height: 1.5;
    color: #343a40;
    border-radius: 0.3rem;
    -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}

.form-select {
    padding: 0.75rem 0.75rem;
    -moz-padding-start: calc(0.75rem - 3px);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fafafa;
}

.input-group-prepend .input-group-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0.375rem 0.75rem;
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
    border-radius: 0.25rem;
    border: 1px solid #e5e5e5;
    background: #fff;
    color: #8b8d8e;
    padding-left: 1rem;
    padding-right: 1rem;
}

.input-group-prepend {
    margin-right: -1px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
    float: right;
}

.form-check-input:checked {
    background-color: #dc3545;
    border-color: #198754;
}


/* End Form */

.list-promo:hover {
    background-color: #fafafa !important;
    color: #212529;
}

.btn-orange-at {
    background-color: var(--alizarin);
    color: white;
    font-size: 18px;
    font-weight: 800;
    line-height: 134.77%;
    border-radius: 5px;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 16px;
    padding-right: 16px;
}

.btn-light-at {
    color: black;
    font-size: 18px;
    font-weight: 500;
    line-height: 134.77%;
    border: 1px solid;
    border-color: black;
    border-radius: 5px;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 16px;
    padding-right: 16px;
}

.btn-outline-at {
    color: #555555;
    border-color: #EE3641;
}

.btn-outline-at:hover {
    color: #fff;
    background-color: #EE3641;
}

.btn-check:checked+.btn-outline-primary,
.btn-check:active+.btn-outline-primary,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary.dropdown-toggle.show {
    color: #bdbdbd;
    background-color: #fff !important;
    border-color: var(--alizarin) !important;
}

#mainNav {}

.section-first {
    margin-top: 86px;
    background: white;
    /* padding-top: 20px; */
    /* padding-bottom: 20px; */
}

.section-banner {
    margin-top: 80px;
    /* width: 100%; */
    /* height: 600px; */
    background: var(--smoke);
    padding-top: 60px;
    padding-bottom: 60px;
}

.section-white {
    background-color: white;
    padding: 70px 0 100px 70px;
}

.main-services {
    margin-top: 50px;
    text-align: center;
}

.plr-10 {
    padding-left: 10%;
    padding-right: 10%;
}

.plr-15 {
    padding-left: 15%;
    padding-right: 15%;
}

hr.hr-contact-us {
    width: 80px;
    height: 10px;
    margin-bottom: 1.5rem;
    margin-top: 0;
    border: 0;
    background-color: var(--stack);
    opacity: 100%;
}

.section-subtitle {
    margin-top: 20px;
}

.form-search {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 18px;
    line-height: 1.5;
    color: var(--charcoal);
    padding-left: 30px;
    padding-right: 30px;
    background: white;
    background-clip: padding-box;
    -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    border-top-left-radius: 5px !important;
    border-bottom-left-radius: 5px !important;
}

.greyIconSearch {
    color: #a8a8a8;
}


/* .boxSearchForm{
width: 100%;
margin-right: 50px;
margin-left: 150px;
} */

.title-breadcrump {
    font-size: 18px;
    line-height: 24.59px;
    color: #000000;
}

.nav-cart {
    margin-right: 39px;
}

.nav-burger {
    margin-right: 39px;
}

.vl {
    border-left: 1px solid #000;
    height: 24.5px;
}

.border-bottom-header {
    border-bottom: 4px solid var(--darkred);
    -webkit-box-shadow: 0px 4px 4px rgba(237, 237, 237, 0.25);
    box-shadow: 0px 4px 4px rgba(237, 237, 237, 0.25);
}

.dropdown-menu-item:hover,
.content-cart:hover {
    background-color: #f9f9f9;
}

.dropdown-menu-item:hover img {
    filter: invert(20%) sepia(88%) saturate(2381%) hue-rotate(340deg) brightness(114%) contrast(87%) !important;
}

.dropdown-menu-item:hover .text-menu-item {
    color: var(--alizarin) !important;
}

.box {
    background: #ffffff;
    border: 1px solid var(--gainsboro);
    border-radius: 5px;
}

.box-point {
    background: #ffffff;
    border: 1px solid var(--gainsboro);
    border-radius: 14px;
}

.p-box {
    padding: 24px;
}

@media (max-width: 768px) {
    .p-box {
        padding: 20px;
    }

    a>span {
        font-size: 18px;
    }
}

@media (max-width: 518px) {
    .p-box {
        padding: 10px;
    }

    .btn-sm-minus {
        padding: 5px !important;
    }

    .btn-sm-plus {
        padding: 5px !important;
        height: 100% !important;
    }

    .total-price-mobile {
        font-size: 14px;
    }

    .qty-cart-mobile {
        font-size: 14px;
    }

    .label-mobile {
        font: 14px;
    }

    .small-mobile {
        font-size: 12px !important;
    }
}

.space-between {
    display: flex;
    justify-content: space-between;
}

.menus-distr {
    display: flex;
    flex-direction: column;
}

.menus-distr>span {
    font-size: 17px;
    /* color: #A7A7A7; */
}

.menus-distr>span.dist-name {
    font-size: 25px;
    /* color: #555555; */
    font-weight: 900;
}

.menus-payDigtl {
    display: flex;
    flex-direction: column;
}

.menus-payDigtl>span {
    font-size: 17px;
    /* color: #A7A7A7; */
}

.menus-payDigtl>span.payDigtl-name {
    font-size: 25px;
    /* color: #555555; */
    font-weight: 900;
}

.cat-menu {
    background-color: #fff;
}

.product-list-main {
    background-color: #f8f8f8;
    margin: 32px 0 39px 0;
    padding: 37px 0 37px 0;
}

.box-item-product {
    background-color: #ffffff;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

ul#productCategoryMenu {
    border: none;
}


/* Button
=========================================================
========================================================= */

.btn-check:focus+.btn,
.btn:focus {
    outline: 0;
    box-shadow: none;
}

.prymary-2 {
    color: var(--alizarin);
}

.btn-primary-at-2 {
    background-color: var(--alizarin);
    color: #fff;
}

.btn-primary-at-2:hover {
    background-color: #d4303a;
    color: #fff;
}

.btn-redeem-reward {
    background-color: #fafafa;
    border: 1px solid #c9c9c9;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    font-weight: 600;
    background-color: var(--alizarin);
    color: #fff;
}

.btn-redeem-reward:hover {
    background-color: var(--darkred);
    color: #fff;
}

.btn-add-order {
    background-color: #fafafa;
    border: 1px solid #c9c9c9;
    color: #555555;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    font-weight: 600;
}

.btn-add-order:hover {
    background-color: var(--alizarin);
    color: #fff;
}

.button-outline-at {
    border: 2px solid var(--alizarin);
    box-sizing: border-box;
    border-radius: 5px;
    color: #555555;
    font-size: 20px;
    font-weight: 800;
    padding: 17px 29px 17px 29px;
    margin-right: 25px;
}

.button-outline-at:hover {
    background-color: var(--alizarin);
    border: 2px solid var(--alizarin);
    color: #fff;
}

.button-sm-outline-at {
    border: 2px solid var(--alizarin);
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 5px;
    color: #414141;
}

.button-sm-outline-at:hover {
    background-color: var(--alizarin);
    border: 2px solid var(--alizarin);
    color: #fff;
    font-weight: 600;
}

.button-outline-at:focus {
    box-shadow: none;
}

.button-sm-outline-at-v2 {
    border: 2px solid var(--alizarin);
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 5px;
    color: var(--alizarin);
}

.button-sm-outline-at-v2:hover {
    background-color: var(--alizarin);
    border: 2px solid var(--alizarin);
    color: #fff;
    font-weight: 600;
}

.button-grey-outline-at {
    border: 2px solid #bdbdbd !important;
    box-sizing: border-box;
    border-radius: 5px;
    color: #bdbdbd !important;
    font-size: 15px;
    font-weight: 400;
    padding: 17px 29px 17px 29px;
    margin-right: 15px;
}

.button-grey-outline-normal {
    border: 2px solid #bdbdbd !important;
    box-sizing: border-box;
    border-radius: 5px;
    color: #bdbdbd;
    font-size: 18px;
}

.button-grey-outline-at:hover {
    background-color: var(--alizarin) !important;
    border: 2px solid var(--alizarin) !important;
    color: #fff !important;
    font-weight: 800;
}

.button-grey-outline-at:hover img {
    filter: invert(100%) sepia(7%) saturate(27%) hue-rotate(321deg) brightness(109%) contrast(106%);
}

.button-grey-outline-normal:hover {
    background-color: var(--alizarin) !important;
    border: 2px solid var(--alizarin) !important;
    color: #fff !important;
    font-weight: 800;
}

a.button-grey-outline-at .active>span.txt-itemCatProduct {
    color: #555555 !important;
}

.button-grey-outline-at:focus {
    box-shadow: none;
}

.btn-icon>span {
    margin-left: 20px;
}

a.active {
    border: 2px solid var(--alizarin) !important;
    box-sizing: border-box;
    color: #555555 !important;
    font-weight: 800;
}


/* End Button
=========================================================
========================================================= */

.product-info {
    padding: 1rem 1rem 1rem 0;
    margin-bottom: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
}

a.product-items:hover {
    color: #555555;
}

.product-info>span {
    font-size: 16px;
}


/* Wishlist
=========================================================
========================================================= */

.wishlist {
    border-radius: 50%;
    background: #fff;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
    height: 30px;
    width: 30px;
    position: absolute;
    display: inline;
    right: 15px;
    top: 15px;
    text-align: center;
    border: 1px solid var(--gainsboro);
}

[id="heart"] {
    position: absolute;
    left: -100vw;
}

[for="heart"] {
    color: #aab8c2;
    cursor: pointer;
    font-size: 20px;
    align-self: normal;
    transition: color 0.2s ease-in-out;
}

[for="heart"]:hover {
    color: grey;
}

[for="heart"]::selection {
    color: none;
    background: transparent;
}

[for="heart"]::moz-selection {
    color: none;
    background: transparent;
}

[id="heart"]:checked+label {
    color: #e2264d;
    will-change: font-size;
    animation: heart 0.5s cubic-bezier(0.17, 0.89, 0.32, 1.49);
}

@keyframes heart {

    0%,
    17.5% {
        font-size: 0;
    }
}


/* End Wishlist
=========================================================
========================================================= */


/* Pagination
=========================================================
========================================================= */

.pagination {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-left: 0;
    list-style: none;
    border-radius: 0.3rem;
}

.pagination>li {
    margin: 0;
    border: 0px solid #ddd !important;
    font-size: 15px;
    margin-left: 4px !important;
}

.page-item.disabled .page-link {
    color: #666666;
    pointer-events: none;
    cursor: auto;
    background-color: #fff;
}

.page-item.active .page-link {
    z-index: 1;
    color: #b20838 !important;
    background-color: #fff;
    border-color: #fff;
}

.page-item:first-child .page-link {
    margin-left: 0;
    border-top-left-radius: 0.3rem;
    border-bottom-left-radius: 0.3rem;
}

li.page-item>a {
    position: relative;
    display: block;
    padding: 0.5rem 0.75rem;
    margin-left: -1px;
    line-height: 1.25;
    color: #8b8d8e !important;
    opacity: 0.8;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 0.25rem 1rem rgb(0 0 0 / 15%);
    box-shadow: 0 0.25rem 1rem rgb(0 0 0 / 15%);
}

.page-link {
    position: relative;
    display: block;
    padding: 0.5rem 0.75rem;
    margin-left: -1px;
    line-height: 1.25;
    color: #8b8d8e !important;
    opacity: 0.8;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 0.25rem 1rem rgb(0 0 0 / 15%);
    box-shadow: 0 0.25rem 1rem rgb(0 0 0 / 15%);
}


/* End Pagination
=========================================================
========================================================= */


/* Section News Main
=========================================================
========================================================= */

.last-transactions {
    display: flex;
    flex-direction: row;
}

.shadow {
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
}


/* End Section News Main
=========================================================
========================================================= */


/* Footer
=========================================================
========================================================= */

footer {
    background-color: #547b8e;
    color: #fff;
}

.copyright {
    background-color: #383836;
}


/* End Footer
=========================================================
========================================================= */

.boxSearchForm {
    width: 700px;
}

.banner-lt {
    display: none;
}

@media only screen and (max-width: 1199px) {
    .boxSearchForm {
        width: auto;
    }
}

@media only screen and (max-width: 991px) {
    .boxSearchForm {
        display: none;
    }

    .hr-cart {
        display: none;
    }

    .banner-lt {
        display: block;
    }

    .bg-banner-lt {
        display: none;
    }

    .mbl-mt-4 {
        margin-top: 1.5rem;
    }
}


/* Custom Owl-Carousel
=========================================================
========================================================= */

.owl-prev,
.owl-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.5) !important;
    /* height: 40px;
width: 40px; */
    border-radius: 50%;
}

.owl-prev:hover,
.owl-next:hover {
    background: #fff !important;
    -webkit-box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.15);
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.15);
}

button.owl-next.disabled {
    background: rgba(255, 255, 255, 0.5) !important;
    visibility: hidden;
}

button.owl-next.disabled:hover {
    background: rgba(255, 255, 255, 0.5) !important;
}

button.owl-prev.disabled {
    background: rgba(255, 255, 255, 0.5) !important;
    visibility: hidden;
}

button.owl-prev.disabled:hover {
    background: rgba(255, 255, 255, 0.5) !important;
}

.owl-prev {
    left: 1rem;
}

.owl-next {
    right: 1rem;
}


/* End Custom Owl-Carousel
=========================================================
========================================================= */

.sum-notif {
    top: -9px;
    right: -8px;
    background: var(--alizarin);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    padding: 6px;
    line-height: 12px;
    text-align: center;
    color: #fff;
    font-weight: 800;
}

#distDropdown {
    position: absolute;
    background: #fff;
    width: calc(100% + 2px);
    left: -1px;
    top: calc(100% + 1px);
    z-index: 1;
    /* max-height: 250px; */
    overflow-y: auto;
    border: 1px solid var(--gainsboro);
    border-top: 0;
    /* height: auto; */
}

ul.sub-distDropdown {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 0;
}

li.item-distDropdown {
    list-style: none;
}

.dropdown-item.active,
.dropdown-item:active {
    color: #fff;
    text-decoration: none;
    background-color: var(--alizarin);
}

#moreMenus {
    background: #fff;
    width: 220px;
    right: 15px;
    top: 40px;
    z-index: 1;
    /* max-height: 250px; */
    overflow-y: auto;
    border: 1px solid var(--gainsboro);
    border-top: 0;
    height: auto;
    overflow: hidden;
}

ul.sub-moreMenus>li {
    padding: 0.5rem 1rem;
    white-space: nowrap;
}

li.last-item-moreMenus {
    border-top: 1px solid;
    border-color: #e6e6e6;
}

.rounded-top-product {
    overflow: hidden;
    border-top-left-radius: 1rem !important;
    border-top-right-radius: 1rem !important;
}

.rounded-bottom-product {
    overflow: hidden;
    border-bottom-left-radius: 1rem !important;
    border-bottom-right-radius: 1rem !important;
}

.rounded-product {
    overflow: hidden;
    border-top-left-radius: 1rem !important;
    border-top-right-radius: 1rem !important;
    border-bottom-left-radius: 1rem !important;
    border-bottom-right-radius: 1rem !important;
}

#burger-menu.dropdown a::after,
#cart-menu.dropdown a::after {
    content: "";
    display: none;
}

#burger-menu.dropdown .dropdown-menu,
#cart-menu.dropdown .dropdown-menu {
    right: 0 !important;
    left: unset !important;
    margin-top: 1rem !important;
}

#burger-menu.dropdown .dropdown-menu .dropdown-item,
#cart-menu.dropdown .dropdown-menu .dropdown-item {
    padding: 0.7rem 1.4rem;
}

#owl-demo .owl-dots,
#owl-demo-1 .owl-dots,
#owl-demo-2 .owl-dots,
.owl-demo .owl-dots {
    position: absolute;
    width: 100%;
    bottom: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dot {
    padding: 8px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    display: inline-block;
    border: none;
    margin-left: 6px;
    margin-right: 6px;
}

.dot:hover {
    background: rgb(228, 67, 67, 25%) !important;
}

div.owl-dot.active>button.dot {
    background: var(--alizarin) !important;
}

.filter-white {
    filter: invert(100%) sepia(7%) saturate(27%) hue-rotate(321deg) brightness(109%) contrast(106%);
}

.filter-wa-color {
    filter: invert(48%) sepia(13%) saturate(3207%) hue-rotate(130deg) brightness(95%) contrast(80%);
}

.filter-at-primary-color {
    filter: invert(21%) sepia(96%) saturate(3822%) hue-rotate(341deg) brightness(91%) contrast(95%);

}

.filter-primary-color {
    filter: invert(72%) sepia(13%) saturate(4438%) hue-rotate(163deg) brightness(96%) contrast(99%);
}



.filter-kaspro-color {
    filter: invert(17%) sepia(41%) saturate(4791%) hue-rotate(285deg) brightness(95%) contrast(87%);
}

ion-icon:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
}

#dist-set ion-icon {
    transform: rotate(0deg);
    transition: transform 0.5s;
}

#dist-set ion-icon.open {
    transform: rotate(180deg);
}

ul.horizontal-hidden-scroll {
    display: flex;
    flex-flow: row;
    overflow-x: auto;
    overflow-y: hidden;
}


/* height */

ul.horizontal-hidden-scroll::-webkit-scrollbar {
    height: 0;
}


/* width */

::-webkit-scrollbar {
    width: 0.5rem;
}


/* Track */

::-webkit-scrollbar-track {
    background: transparent;
}


/* Handle */

::-webkit-scrollbar-thumb {
    background: var(--gray);
}


/* Handle on hover */

::-webkit-scrollbar-thumb:hover {
    background: var(--stack);
}

.fade-in-on-scroll {
    transition: opacity 1s;
}

.fade-in-smooth-on-scroll {
    transition: opacity 2s;
}

.fade-hidden {
    opacity: 0;
}

.fade-visible {
    opacity: 1;
}

.favorite-action {
    cursor: pointer;
}

.logoPaymentMain {
    height: 40px;
}

.logolinkAja {
    height: 54px;
}

.notfound-img {
    max-width: 500px;
}

.modalDelete-img {
    max-width: 500px;
}

.modal-success {
    max-width: 250px;
}

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

div.modal-body div>p {
    text-align: justify;
}

.title-detailNews {
    line-height: 1.1;
}

.close-btn-modal {
    z-index: 1;
    border: #fff solid 2px;
}


/* Size button Category product */

.sizeSameOldAT {
    padding: 0.5rem 1.5rem !important;
}


/* End */

.mbl-none {
    display: block;
}

.dkstp-none {
    display: none !important;
}

.detail-order-cart {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: white;
    text-align: center;
    z-index: 2;
}

div.tab-point.active {
    box-shadow: 0 0 1px 1px #b20838;
    -webkit-box-shadow: 0 0 1px 1px #b20838;
}

.img-list-order {
    max-width: 80px;
    border-radius: 5px;
}

.total-price {
    display: flex;
}

.left-arrow-imgprod {
    top: 30% !important;
    left: -5% !important;
    width: 30px !important;
}

.right-arrow-imgprod {
    top: 30% !important;
    right: -5% !important;
    width: 30px !important;
}

.greeting-section {
    padding-bottom: 7.5rem !important;
}

.img-extra-small {
    height: 30px;
}

@media only screen and (max-width: 991px) {
    .logoPaymentMain {
        height: 30px;
        width: 40px !important;
    }

    #distDropdown {
        top: 73px;
        width: 40px !important;
    }
}

@media only screen and (max-width: 767px) {
    .left-arrow-imgprod {
        top: 50% !important;
    }

    .right-arrow-imgprod {
        top: 50% !important;
    }

    .total-price {
        display: block;
        text-align: center;
    }

    .img-list-order {
        width: 100%;
        max-width: 100%;
    }

    .logoPaymentMain {
        height: 22px;
    }

    .mbl-none {
        display: none;
    }

    .dkstp-none {
        display: block !important;
    }

    div.menus-distr>span {
        font-size: 14px;
    }

    div.menus-distr>h4 {
        font-size: 18px;
    }

    div.menus-distr>h5 {
        font-size: 18px;
    }

    /* Payment */
    div.menus-payDigtl>span {
        font-size: 14px;
    }

    div.menus-payDigtl>h4 {
        font-size: 18px;
    }

    #distDropdown {
        top: 63px;
    }

    .title-catProduct {
        font-size: 18px;
    }

    .button-grey-outline-at {
        font-size: 15px !important;
    }

    .mbl-text-center {
        text-align: center;
    }
}

@media only screen and (max-width: 575px) {
    .navbar-logo-at {
        height: 45px !important;
    }

    .logoPaymentMain {
        height: 19px;
    }

    div.menus-distr>span {
        font-size: 12px;
    }

    div.menus-distr>h4 {
        font-size: 16px;
    }

    div.menus-distr>h5 {
        font-size: 16px;
    }

    div.menus-payDigtl>span {
        font-size: 12px;
    }

    div.menus-payDigtl>h4 {
        font-size: 16px;
    }

    #distDropdown {
        top: 51px;
    }

    footer {
        text-align: center;
    }

    .logo-footer {
        margin-left: auto;
        margin-right: auto;
    }

    .dot {
        padding: 6px;
    }

    .section-first {
        /* padding-bottom: 15px;
        padding-top: 15px; */
    }

    .text-extra-small {
        font-size: 10px !important;
    }

    .text-bold-extra-small {
        font-size: 12px !important;
    }

    .img-extra-small {
        height: 20px !important;
    }

    .img-mila-extra-small {
        width: 45px !important;
    }

    .balance-linkaja-section {
        padding-top: 4rem !important;
        padding-bottom: 6rem !important;
    }

    .greeting-section {
        padding-bottom: 7rem !important;
    }

    .button-grey-outline-at {
        font-size: 13px !important;
    }

    .text-mb-center {
        text-align: center;
    }

    .mbl-none {
        display: none !important;
    }

    .dkstp-none {
        display: block !important;
    }

    .mbl-text-center {
        text-align: center;
    }

    .modalDelete-img {
        max-width: 340px;
    }
}

@media only screen and (max-width: 400px) {
    .navbar-logo-at {
        height: 35px !important;
    }

    .logoPaymentMain {
        height: 16px;
    }

    .dot {
        padding: 4px;
    }

    .button-grey-outline-at {
        font-size: 11px !important;
        margin-right: 11px !important;
    }

    .text-mb-center {
        text-align: center;
    }

    .mbl-text-center {
        text-align: center;
    }
}


/* Loader CSS */

#loader {
    top: 0;
    position: fixed;
    width: 100%;
    z-index: 1031;
    display: none;
}

#loader .loading .percent {
    position: relative;
    width: 100%;
    height: 2px;
    overflow: hidden;
}

#loader .loading .percent .progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: linear-gradient(45deg, #ff2222, #f32121);
    animation: animate 3s ease-in-out infinite;
}

@keyframes animate {
    0% {
        width: 0%;
        left: 50%;
    }

    50% {
        width: 200%;
        left: -50%;
    }

    100% {
        width: 0%;
        left: 50%;
    }
}


/* END Loader CSS */

#formSearchMobile {
    position: absolute;
    top: -100%;
    height: 0;
    overflow: hidden;
    transition: all 0.5s;
}

#formSearchMobile.show {
    height: 100%;
    top: 0;
}

input:focus,
textarea:focus,
select:focus {
    outline-offset: 0px !important;
    outline: none !important;
    border: 1px solid var(--alizarin) !important;
    box-shadow: 0 0 1px var(--alizarin) !important;
    -moz-box-shadow: 0 0 1px var(--alizarin) !important;
    -webkit-box-shadow: 0 0 1px var(--alizarin) !important;
}

.breadcrumb-item+.breadcrumb-item::before {
    color: #fff;
    content: ">";
    font-size: 12px;
    font-weight: normal !important;
}

.inline-group {
    max-width: 10rem;
    padding: 0.5rem;
}

.inline-group .form-control {
    text-align: center;
}

.form-control[type="number"]::-webkit-inner-spin-button,
.form-control[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.btn-minus {
    border-top-left-radius: 25px !important;
    border-bottom-left-radius: 25px !important;
    padding: 0.75rem 0.75rem;
    border-color: #bdbdbd;
}

.btn-sm-minus {
    border-top-left-radius: 25px !important;
    border-bottom-left-radius: 25px !important;
    padding: 8px;
    border-color: #bdbdbd;
}

.btn-plus {
    border-top-right-radius: 25px !important;
    border-bottom-right-radius: 25px !important;
    padding: 0.75rem 0.75rem;
    border-color: #bdbdbd;
}

.btn-sm-plus {
    border-top-right-radius: 25px !important;
    border-bottom-right-radius: 25px !important;
    padding: 9px;
    border-color: #bdbdbd;
}

.form-control-qty {
    padding: 4px;
}

.quantity {
    padding: 0;
}

.input-group> :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    margin-left: -1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-color: #bdbdbd;
}

.dropdown-menu-item {
    border: 0px solid rgba(0, 0, 0, 0.15);
    background-color: white;
    /* cursor: pointer; */
}

.notif-badge {
    width: 10px;
    height: 10px;
    margin-top: 5px;
    margin-left: -5px;
}

#exzoom {
    width: auto;
    max-width: 500px;
    /*height: 400px;*/
}

.backdrop-window {
    position: fixed;
    width: 100vw;
    height: 100vh;
    left: 0;
    top: 0;
    opacity: 0;
    visibility: hidden;
    background: rgba(0, 0, 0, 0.5);
    overflow: hidden;
    transition: all 0.25s ease-in-out;
}

#burger-menu-mobile-content {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    background: white;
    overflow: auto;
    transition: all 0.3s ease-in-out;
    left: -100%;
}

#cart-menu-mobile-content {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    background: white;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    left: -100%;
    z-index: 2;
}

#close-menu-mobile {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.menu-mobile-show {
    left: 0 !important;
    opacity: 1;
    visibility: visible;
}


/* Coba */

.product-list {
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.product-list .product-list-img {
    float: left;
    width: 100px;
    margin-top: 1rem;
}


/* Cart Dropdown*/

div#cartAvailable {
    max-height: 350px;
    overflow: auto;
}

.content-faq {
    padding: 0.5rem 0;
    border-bottom: 1px solid #eee;
    margin-bottom: 10px;
}

.delete-cart {
    position: absolute;
    right: 0;
    top: 0;
    padding: 8px 16px;
}

.delete-cart-mobile {
    position: absolute;
    right: 1rem;
    top: 1rem;
}

.header-cart {
    padding-top: 10px;
    padding-bottom: 0px;
    padding-left: 4%;
    border-bottom: 1px solid #eee;
    background-color: #fff;
    color: #000;
    font-weight: 700;
}

.header-cart-mobile {
    background-color: #fff;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 3;
}

.footer-cart-mobile {
    background-color: #fff;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 3;
}


/* End Cart */

@media (min-width: 768px) {
    .product-list .product-list-img {
        width: 300px;
        margin-top: 0;
    }
}

.product-list .product-content {
    padding: 1rem 1rem 1rem 100px;
    position: relative;
}

@media (min-width: 768px) {
    .product-list .product-content {
        padding: 1.25rem 1.25rem 1.25rem 150px;
    }
}

.product-list .product-content h4 {
    font-size: 1rem;
}

@media (min-width: 768px) {
    .product-list .product-content h4 {
        font-size: 1.125rem;
    }
}

.product-list .product-content .fa-trash-alt {
    position: absolute;
    top: 1rem;
    right: 1rem;
    color: #b20838;
}

.product-list .product-content label {
    margin-bottom: 0;
    font-size: 0.8rem;
}

.product-list .product-content p {
    margin-bottom: 0;
    font-size: 0.9rem;
    font-weight: 700;
}

@media (min-width: 768px) {
    .product-list .product-content p {
        font-size: 1.1rem;
    }
}

.product-list .product-content .input-number-custom {
    font-size: 1rem;
    margin-top: -0.5rem;
    width: 100px;
}

@media (min-width: 576px) {
    .product-list .product-content .input-number-custom {
        margin-top: 0;
    }
}

@media (min-width: 768px) {
    .product-list .product-content .input-number-custom {
        margin-top: 0.2rem;
    }
}

.product-list .product-content .input-number-custom .input-number-decrement,
.product-list .product-content .input-number-custom .input-number-increment {
    width: 18px;
    height: 18px;
    line-height: 14px;
    margin-top: -9px;
    font-size: 1.25rem;
}

.product-list .product-content .input-number-custom .input-number {
    padding-left: 1rem;
    padding-right: 1rem;
}

.product-list .product-content .input-number-label {
    font-size: 0.7rem;
    width: 100px;
}

@media (min-width: 768px) {
    .product-list .product-content .input-number-label {
        bottom: -8px;
    }
}

.box-list {
    margin-bottom: 1.25rem;
    border-radius: 0.15rem;
    -webkit-box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.15);
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.15);
    padding: 1.25rem;
    background-color: #fff;
}


/* Dropdown */

div.submenu {
    background: #fff;
    inset: 0px auto auto 0px;
    z-index: 100;
    width: 100%;
    display: none;
    /* padding: 40px 0 5px; */
    border-radius: 6px;
    box-shadow: 0 2px 8px rgb(0 0 0 / 45%);
    position: absolute;
    inset: 0px auto auto 0px;
    margin: 0px;
    top: 105%;
    /* transform: translate(0px, 45px); */
}

.dropdown li a {
    color: #555555;
    display: block;
    font-family: arial;
    font-weight: bold;
    padding: 10px 5px;
    cursor: pointer;
    text-decoration: none;
    border-bottom: 1px solid #e2e2e2;
}

.dropdown li a:hover {
    background: #fafafa;
    text-decoration: none;
}

a.dropdown-custom {
    text-decoration: none;
    background: url(icons/arrow.png) 116px 17px no-repeat;
    cursor: pointer;
}

.root {
    list-style: none;
    margin: 0px;
    padding: 0px;
    border-top: 1px solid #dedede;
}


/* End Dropdown */


/* Custom Owl Slider */

.arrow-prev {
    position: absolute;
    top: 4rem;
    left: 0.75rem;
    z-index: 100;
    width: 30px;
    cursor: pointer;
}

@media (min-width: 768px) {
    .arrow-prev {
        top: 5.5rem;
        width: 40px;
    }
}

.arrow-prev:hover {
    -webkit-box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.15);
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.15);
    border-radius: 50%;
}

.arrow-next {
    position: absolute;
    top: 4rem;
    right: 0.75rem;
    z-index: 100;
    width: 30px;
    cursor: pointer;
}

@media (min-width: 768px) {
    .arrow-next {
        top: 5.5rem;
        width: 40px;
    }
}

.arrow-next:hover {
    -webkit-box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.15);
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.15);
    border-radius: 50%;
}

.owl-item {
    margin-bottom: 20px;
}


/* End */


/* Point */

.footer-box-slider-loyalty {
    background-color: #fafafa;
    border-top: 1px solid;
    border-top-color: #c9c9c9;
    border-bottom-left-radius: 5pt;
    border-bottom-right-radius: 5pt;
    text-align: center;
}

.tab-loyalty {
    padding: 0.5rem 1.5rem;
}

.edit-address-icon {
    position: absolute;
    top: 4px;
    right: 20px;
}


/* End Point */

#sectionformKasPro {
    display: none;
}

#unselectPromo {
    display: none;
}

.green-border {
    border-color: #03aa4b !important;
}

#OTPKasPro {
    display: none;
}

#KasProActive {
    display: none;
}

.footer-KasPro-aktive {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.payment-checked {
    background-color: #e9ecefab;
}

.promo-checked {
    background-color: transparent;
}

.overflow-promo {
    overflow-y: auto;
    max-height: 400px;
}

.disable-payment-button {
    background-color: #efefef;
    color: #555555;
}

.hover-text-white:hover {
    color: #fff !important;
}


/* History Pemesanan */

a.tab-orders.active {
    border: none !important;
    box-sizing: inherit;
}

a.tab-orders.active>h5 {
    border-bottom: 2px solid #ee3641;
    font-weight: 800;
    color: #555555 !important;
    font-family: Avenir-Black !important;
}

a.tab-rewards.active {
    border: none !important;
    box-sizing: inherit;
}

a.tab-rewards>h5 {
    padding: 15px;
}

a.tab-rewards.active>h5 {
    border-bottom: 1px solid #03AA4B;
    font-weight: 800;
    color: #555555 !important;
    font-family: Avenir-Black !important;
}

.footer-waiting-confirm {
    background-color: #949494;
}

.footer-list-order {
    border-top: 1px solid #e2e2e2;
}

.footer-confirm {
    background-color: #829382;
}

.footer-done {
    background-color: #03aa4b;
}

.footer-cancel {
    background-color: #ee3641;
}


/* Tiket */

.bg-done {
    background-color: #03aa4b;
}

.icon-eye,
.icon-input {
    position: absolute;
    top: 0;
    right: 0;
    /* margin: 17px; */
    margin: 15px 30px;
}

.right-icon {
    padding-right: calc(1.5em + 0.75rem);
    background-image: url('https://icons.getbootstrap.com/assets/icons/person-circle.svg');
    background-repeat: no-repeat;
    background-position: right calc(0.975em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    right: 0;
    height: calc(0.75em + 0.375rem);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding-left: calc(0.5em + 0.75rem);
}


/*
.icon-input {
right: 15px;
position: absolute;
top: 16px;
} */

.custom-dropdown-input {
    /* padding: 0.75rem 0.75rem; */
    border: 1px solid #e5e5e5;
    background: #fafafa;
    font-size: 1rem;
    line-height: 1.5;
    color: #70757d;
    border-radius: 0.3rem;
    -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}

.button-custom-dropdown-input {
    border-color: #bdbdbd;
    background-color: #fff;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    border: 1px solid #bdbdbd;
}

input.input-drp-reg {
    background: none !important;
    border: 0;
}

input.input-drp-reg:focus {
    background: none !important;
    border: 0 !important;
    border-color: transparent !important;
    box-shadow: none !important;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

#image-preview {
    width: 100%;
    height: 300px;
    position: relative;
    overflow: hidden;
    background: #fafafa;
    border: 1px solid #e2e2e2;
    border-radius: 5px;
    color: #ecf0f1;
}

.custom-image-preview {
    width: 100%;
    height: 300px;
    position: relative;
    overflow: hidden;
    background: #fafafa;
    border: 1px solid #e2e2e2;
    border-radius: 5px;
    color: #ecf0f1;
}

#image-upload {
    line-height: 200px;
    font-size: 200px;
    position: absolute;
    opacity: 0;
    z-index: 10;
}

.custom-image-upload {
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0;
    z-index: 10;
}

#image-label {
    position: absolute;
    z-index: 5;
    opacity: 0.8;
    cursor: pointer;
    background-color: #bdc3c7;
    width: 200px;
    height: 50px;
    font-size: 20px;
    line-height: 50px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
}

#image-label-avatar{
    position: absolute;
    z-index: 5;
    opacity: 0.8;
    cursor: pointer;
    background-color: #bdc3c7;
    width: 97px;
    height: 30px;
    font-size: 20px;
    line-height: 35px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
}

#image-preview-avatar {
    width: 128px !important;
    height: 128px !important;
    position: relative;
    overflow: hidden;
    background: #fafafa;
    border: 1px solid #e2e2e2;
    border-radius: 5px;
    color: #ecf0f1;
    background-size: contain;
}

#image-preview-banner {
    width: 100%;
    height: 150px;
    position: relative;
    overflow: hidden;
    background: #fafafa;
    border: 1px solid #e2e2e2;
    border-radius: 5px;
    color: #ecf0f1;
    background-size: contain;
}

.custom-image-label {
    position: absolute;
    z-index: 5;
    opacity: 0.8;
    cursor: pointer;
    background-color: #bdc3c7;
    width: 200px;
    height: 50px;
    font-size: 20px;
    line-height: 50px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
}

#cover_image {
    width: 1px;
    height: 1px;
    position: absolute;
}


/*Start vertical Wizard*/

.card00 {
    z-index: 0;
}

.card1 {
    margin-left: 140px;
    z-index: 0;
    border-right: 1px solid #f5f5f5;
}

.card2 {
    display: none;
}

.card2.show {
    display: block;
}

.social {
    border-radius: 50%;
    background-color: #ffcdd2;
    color: #e53935;
    height: 47px;
    width: 47px;
    padding-top: 16px;
    cursor: pointer;
}

.get-bonus {
    margin-left: 154px;
}

.pic {
    width: 230px;
    height: 110px;
}

.progressbar {
    position: absolute;
    left: 35px;
    overflow: hidden;
    color: #e53935;
    counter-reset: num;
}

.progressbar li {
    list-style-type: none;
    font-size: 8px;
    font-weight: 400;
    margin-bottom: 61px;
}


/* #progressbar li:nth-child(3) {
margin-bottom: 88px
} */

.progressbar .rounded-wizzard:before {
    counter-increment: num;
    content: counter(num);
    color: #a7a7a7;
}

.progressbar li:before {
    width: 35px;
    height: 35px;
    line-height: 32px;
    display: block;
    font-size: 15px;
    background: #fff;
    border: 2px solid #bdbdbd;
    border-radius: 50%;
    margin: auto;
}

.progressbar li:after {
    content: "";
    width: 1px;
    height: 101px;
    background: #bdbdbd;
    position: absolute;
    left: 49px;
    top: 15px;
    z-index: -1;
}

.progressbar li:last-child:after {
    top: 232px;
    height: 75px;
}

.progressbar li:nth-child(7):after {
    top: 511px;
}

.progressbar li:nth-child(6):after {
    top: 381px;
}

.progressbar li:nth-child(5):after {
    top: 317px;
}

.progressbar li:nth-child(4):after {
    top: 204px;
}

.progressbar li:nth-child(3):after {
    top: 100px;
}

.progressbar li:nth-child(2):after {
    top: 10px;
}

.progressbar li:first-child:after {
    position: absolute;
    top: -81px;
}

.progressbar li.active:after {
    background: #e2e2e2;
}

.progressbar li.active:before {
    background: #dc3545;
    color: #fff;
    border-color: #dc3545;
}

.progressbar li.done.active:before {
    background: #E0F6EF;
    border-color: #E0F6EF;
    font-family: Font Awesome\ 5 Pro;
    color: #03aa4b;
    content: "\f00c";
}

.tick {
    width: 100px;
    height: 100px;
}


/*
.prev:hover {
color: #D50000 !important
} */

@media screen and (max-width: 912px) {
    .card00 {
        padding-top: 30px;
    }

    .card1 {
        border: none;
        margin-left: 50px;
    }

    .card2 {
        border-bottom: 1px solid #f5f5f5;
        margin-bottom: 25px;
    }

    .social {
        height: 30px;
        width: 30px;
        font-size: 15px;
        padding-top: 8px;
        margin-top: 7px;
    }

    .get-bonus {
        margin-top: 40px !important;
        margin-left: 75px;
    }

    .progressbar {
        left: -25px;
    }
}


/*End vertical Wizard*/


/* Horizontal Wizzard */

ul.wizard,
ul.wizard li {
    margin: 0;
    padding: 0;
    display: flex;
    width: 100%;
}

ul.wizard {
    counter-reset: num;
}

ul.wizard li {
    flex-direction: column;
    align-items: center;
    position: relative;
}

ul.wizard li::before {
    counter-increment: num;
    content: counter(num);
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    font-size: 10px;
    border-radius: 50%;
    /* background: #21a2d1; */
    color: #fff;
}

ul.wizard li~li::after {
    content: "";
    position: absolute;
    width: 100%;
    right: 50%;
    height: 1px;
    background-color: #21a2d1;
    top: calc(0.75em - -2px);
    z-index: -1;
}

ul.wizard li.active::before {
    background: #dc3545 !important;
    color: white;
}

ul.wizard li.horizontal::before {
    counter-increment: num;
    content: counter(num);
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 16px;
    border-radius: 50%;
    /* background: #21a2d1; */
    color: #fff;
}

ul.wizard li.horizontal~li.horizontal::after {
    content: "";
    position: absolute;
    width: 100%;
    right: 50%;
    height: 1px;
    top: calc(0.75em - -7px);
    z-index: -1;
}

ul.wizard li.horizontal.active::before {
    background: #21a2d1 !important;
    color: white;
}

ul.wizard .active~li::before,
ul.wizard .active~li::after {
    background: #e2e2e2;
}

ul.wizard span {
    color: #7d7d7d;
    font-size: 12px;
    font-family: Arial;
}


/*  updated sample  */

ul.wizard li.completed::before {
    /*  number and circle  */
    background: red;
    color: white;
}

ul.wizard li.completed span {
    /*  text  */
    color: red;
}

ul.wizard li.completed+li::after {
    /*  line after circle  */
    background: red;
}

ul.wizard li.completed::after {
    /*  line before circle  */
    background: red;
}


/* End Horizontal Wizzard */

@media (min-width: 992px) {
    .masthead {
        height: 100vh;
        min-height: 40rem;
        padding-top: 72px;
        padding-bottom: 0;
    }
}

.masthead {
    padding-top: 10rem;
    padding-bottom: calc(10rem - 72px);
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    margin-top: 40px;
}

@media (max-width: 656px) {
    .masthead {
        background-position: center;
        background-position-y: 40px;
        background-repeat: no-repeat;
        background-attachment: scroll;
        background-size: cover !important;
    }
}

.maxHight-450 {
    max-height: 450px;
}

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

.bg-gradient-faq {
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-position-y: bottom;
}

.buttonHeader {
    background-color: #f5f5f5;
    color: #090909;
}

.listBody {
    max-height: 350px;
    overflow-y: scroll;
}


/* custom checkbox */

.custom-control {
    position: relative;
    display: block;
    min-height: 1.5rem;
    padding-left: 1.5rem;
}

.custom-control-label {
    position: relative;
    margin-bottom: 0;
    vertical-align: top;
}

.custom-control-input:checked~.custom-control-label::before {
    color: #fff;
    border-color: #b20838;
    background-color: #b20838;
}

.custom-checkbox .custom-control-label::before {
    border-radius: 0.25rem;
}

.custom-control-label::before,
.custom-file-label,
.custom-select {
    -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}

.custom-checkbox .custom-control-input:checked~.custom-control-label::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
}

.custom-control-label::before {
    position: absolute;
    top: 0.25rem;
    left: -1.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    pointer-events: none;
    content: "";
    background-color: #fff;
    border: #adb5bd solid 1px;
}

.custom-control-label::after {
    position: absolute;
    top: 0.25rem;
    left: -1.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    content: "";
    background: no-repeat 50% / 50% 50%;
}

.custom-control-input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

.list-sugestions-promo.active {
    border-color: red !important;
}

.overflow-sidebar-promo {
    max-height: 1700px;
    overflow-y: scroll;
}

.slider-sidebar-promo {
    display: none !important;
}

.news-dkstop-none {
    display: none !important;
}

@media (max-width: 767px) {
    .overflow-sidebar-promo {
        display: none;
    }

    .slider-sidebar-promo {
        display: block !important;
    }

    .news-dkstop-none {
        display: block !important;
    }

    .news-mbl-none {
        display: none !important;
    }
}

.icon-white {
    -webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1);
}

.rightSideContact {
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    min-height: 30rem;
}

@media (min-width: 992px) {
    .mastheadFaq {
        height: 100vh;
        min-height: 40rem;
        padding-top: 72px;
        padding-bottom: 0;
    }
}

.mastheadFaq {
    padding-top: 17rem;
    padding-bottom: calc(10rem - 72px);
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin-top: 40px;
}

@media (max-width: 656px) {
    .mastheadFaq {
        background-position: center;
        background-position-y: 40px;
        background-repeat: no-repeat;
        background-attachment: scroll;
        background-size: cover;
    }
}

.svg-white {
    filter: invert(132%) sepia(110%) saturate(4892%) hue-rotate(285deg) brightness(170%) contrast(100%);
}

.svg-white-icon {
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
}

.max-w-110 {
    max-width: 110px;
}

.svg-hover-red:hover {
    filter: invert(20%) sepia(88%) saturate(2381%) hue-rotate(340deg) brightness(114%) contrast(87%);
}

.svg-hover-red-active {
    filter: invert(20%) sepia(88%) saturate(2381%) hue-rotate(340deg) brightness(114%) contrast(87%);
}

.svg-darkred:hover {
    filter: invert(12%) sepia(45%) saturate(7235%) hue-rotate(333deg) brightness(103%) contrast(103%);
    cursor: pointer;
}

.svg-darkred-active {
    filter: invert(12%) sepia(45%) saturate(7235%) hue-rotate(333deg) brightness(103%) contrast(103%);
    cursor: pointer;
}

#modalBodyLogin {
    overflow: hidden;
}

@media (max-width: 767px) {
    #modalBodyLogin {
        overflow-y: auto;
    }
}


/* Box Loader CSS */

.loaderBox {
    top: 0;
    width: 100vw;
    height: 100vh;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1028;
}

.loaderKotak {
    left: 50%;
    bottom: 50%;
    position: absolute;
}

.image-loader {
    width: 130px;
}

.loaderNew {
    width: 130px;
    height: 170px;
    position: relative;
}

.txtLoader {
    width: 120%;
    text-align: center;
    position: absolute;
    bottom: -30px;
    left: -59%;
    font-family: "Segoe UI", sans-serif;
    font-size: 12px;
    letter-spacing: 2px;
    color: #fff;
}

.codeLoader {
    position: absolute;
    z-index: 99;
    bottom: -3px;
    left: -64px;
    -webkit-animation-name: spaceboots;
    -webkit-animation-duration: 0.8s;
    -webkit-transform-origin: 50% 50%;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}

.boxLoader {
    width: 100%;
    height: 150px;
    display: block;
    color: white;
    position: absolute;
    top: -43px;
    left: -60px;
    z-index: 2;
    overflow: hidden;
}

.boxLoader::before,
.boxLoader::after {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.boxLoader:nth-child(1)::before {
    font-size: 20px;
    content: "\f0e3";
    animation: a 1.1s linear infinite;
}

.boxLoader:nth-child(1)::after {
    content: "\f04d";
    animation: b 1.3s linear infinite;
}

.boxLoader:nth-child(2)::before {
    content: "\f0c8";
    font-size: 40px;
    animation: c 0.9s linear infinite;
}

.boxLoader:nth-child(2)::after {
    content: "\f0e3 ";
    animation: d 0.7s linear infinite;
}

.loader.amit::before,
.loader.amit::after {
    transform: scale(1);
}

@keyframes a {
    0% {
        transform: translate(30px, 0) rotate(30deg);
        opacity: 0;
    }

    100% {
        transform: translate(30px, 150px) rotate(-50deg);
        opacity: 1;
    }
}

@keyframes b {
    0% {
        transform: translate(50px, 0) rotate(-40deg);
        opacity: 0;
    }

    100% {
        transform: translate(40px, 150px) rotate(80deg);
        opacity: 1;
    }
}

@keyframes c {
    0% {
        transform: translate(70px, 0) rotate(10deg);
        opacity: 0;
    }

    100% {
        transform: translate(60px, 150px) rotate(70deg);
        opacity: 1;
    }
}

@keyframes d {
    0% {
        transform: translate(30px, 0) rotate(-50deg);
        opacity: 0;
    }

    100% {
        transform: translate(45px, 150px) rotate(30deg);
        opacity: 1;
    }
}

@-webkit-keyframes spaceboots {
    0% {
        -webkit-transform: translate(2px, 1px) rotate(0deg);
    }

    10% {
        -webkit-transform: translate(-1px, -2px) rotate(-1deg);
    }

    20% {
        -webkit-transform: translate(-3px, 0px) rotate(1deg);
    }

    30% {
        -webkit-transform: translate(0px, 2px) rotate(0deg);
    }

    40% {
        -webkit-transform: translate(1px, -1px) rotate(1deg);
    }

    50% {
        -webkit-transform: translate(-1px, 2px) rotate(-1deg);
    }

    60% {
        -webkit-transform: translate(-3px, 1px) rotate(0deg);
    }

    70% {
        -webkit-transform: translate(2px, 1px) rotate(-1deg);
    }

    80% {
        -webkit-transform: translate(-1px, -1px) rotate(1deg);
    }

    90% {
        -webkit-transform: translate(2px, 2px) rotate(0deg);
    }

    100% {
        -webkit-transform: translate(1px, -2px) rotate(-1deg);
    }
}


/* END Box Loader CSS */

.ui-icon {
    width: 16px !important;
    height: 16px;
}

.two-line-truncate {
    /* color: var(--N700,rgba(49,53,59,0.96)); */
    /* font-size: 0.86rem; */
    /* line-height: 1.5; */
    /* max-width: 100%; */
    /* max-height: 100%; */
    white-space: pre-wrap;
    /* word-break: break-all; */
    text-overflow: ellipsis;
    overflow: hidden;
    /* margin-bottom: 4px; */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.one-line-truncate {
    /* color: var(--N700,rgba(49,53,59,0.96)); */
    /* font-size: 0.86rem; */
    /* line-height: 1.5; */
    /* max-width: 100%; */
    /* max-height: 100%; */
    white-space: pre-wrap;
    /* word-break: break-all; */
    text-overflow: ellipsis;
    overflow: hidden;
    /* margin-bottom: 4px; */
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.lh-0 {
    line-height: 0 !important;
}

.breadcrumb-custom::-webkit-scrollbar {
    width: 0;
    /* Remove scrollbar space */
    background: transparent;
    /* Optional: just make scrollbar invisible */
    height: 0;
    /* Optional: just make scrollbar invisible */
}

.breadcrumb-custom {
    scrollbar-width: none;
}

.navbar-logo-at {
    height: 60px;
}

.title-banner {
    bottom: 150px;
    z-index: 1;
    width: 100%;
    margin-top: -7.5rem;
}

.content-curve {
    background-color: #fff;
    border-radius: 50% 50% 0 0/120% 120% 0 0;
    bottom: 0;
    width: 100%;
}

@media (max-width: 1199px) {
    .title-banner {
        bottom: 170px;
        z-index: 1;
        width: 100%;
        margin-top: -7.5rem;
    }
}

@media (max-width: 991px) {
    .title-banner {
        bottom: 170px;
        z-index: 1;
        width: 100%;
        margin-top: -5rem;
    }
}

@media (max-width: 900px) {
    .content-curve {
        border-radius: 50% 50% 0 0/50% 50% 0 0;
    }
}

.curved {
    background: #ff3c00;
    color: #fff;
    text-align: center;
}

.curved svg {
    display: block;
}

.icon-program {
    max-width: 125px !important;
}

.point-filter:hover {
    color: var(--alizarin) !important;
}

.point-filter.filter-selected {
    color: var(--alizarin) !important;
}

.errors ul {
    margin: 0 !important;
}

.progress-dash {
    position: absolute;
    height: 1rem;
    top: -49%;
    right: 2%;
    border-right: 1px white dotted;
    margin: 0;
    padding: 0;
}

.progress-volume {
    cursor: pointer;
}

.progress-volume:hover {
    background-color: var(--success-hover) !important;
}

.font-stroke-1 {
    text-shadow: -0.5px 0.5px 0 #fff, 0.5px 0.5px 0 #fff, 0.5px -0.5px 0 #fff, -0.5px -0.5px 0 #fff;
    -webkit-font-smoothing: antialiased;
}

.min-h-700px {
    min-height: 700px;
}

@media (max-width: 575px) {
    .min-h-700px {
        min-height: auto;
    }
}

.unselectable {
    -webkit-user-select: none;
    /* Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE10+/Edge */
    user-select: none;
    /* Standard */
}

.bi-plus-square.green::before {
    background-color: green;
    color: #fff;
}

.tab-flow.active {
    border: 1px solid rgba(3, 170, 75, 0.15) !important;
    background: rgba(3, 170, 75, 0.15);
    font-weight: 800;
    color: rgba(3, 170, 75, 1) !important;
    font-family: Avenir-Black !important;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 15px;
}

.tab-flow {
    border: 1px solid #E2E2E2;
    font-weight: 500;
    color: #BDBDBD;
    font-family: Avenir-Black !important;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 15px;
}

.tab-at.active {
    border: 1px solid rgba(3, 170, 75, 0.15) !important;
    background: rgba(3, 170, 75, 0.15);
    font-weight: 800;
    /* color: rgba(3, 170, 75, 1) !important; */
    font-family: Avenir-Black !important;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 15px;
}

.tab-at {
    border: 1px solid #E2E2E2;
    font-weight: 500;
    color: #555555;
    font-family: Avenir-Black !important;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 15px;
}

.tab-img>img {
    opacity: 50%;
}

.tab-img.active {
    border: none !important;
}

.tab-img.active>img {
    opacity: 100%;
}

.tab-content-v2 {
    display: none;
}

.tab-content-v2.active {
    display: block;
}

.filter-dropdown {
    font-weight: 600;
}

.top-header-main {
    /* background-position: center; */
    background-size: cover;
    background-color: var(--darkred);
    border-radius: 0 0 30px 30px;
}

.top-second-header-main {
    background-position: center;
    background-size: cover;
    background-color: var(--darkred);
}

.btn-secondary-red-at {
    border: 2px solid #B20838;
    border-radius: 42px;
    color: #B20838;
}

.btn-secondary-red-at:hover {
    /* border: 2px solid #B20838;
border-radius: 42px; */
    background-color: #B20838;
    color: #fff;
}

.btn-secondary-white-at-lg {
    border: 2px solid #fff;
    border-radius: 8px;
    color: #fff;
}

.btn-secondary-white-at-lg:hover {
    color: var(--alizarin);
    background-color: white;
}

.btn-secondary-white-at-lg:active {
    transform: scale(0.98);
}

.bg-transparent {
    background-color: transparent !important;
}

.no-border {
    border: none !important;
}

.dropdown-outline-filter-at {
    min-width: 250px;
    width: auto;
}

@media only screen and (max-width:768px) {
    .dropdown-outline-filter-at {
        width: 100% !important;
    }
}

select.form-select.option-outline.no-bg.border-bottom-only:focus {
    border-top-width: 0 !important;
    border-left-width: 0 !important;
    border-right-width: 0 !important;
    border-bottom: 1px solid #555555 !important;
}

.border-bottom-only {
    border-top-width: 0 !important;
    border-left-width: 0 !important;
    border-right-width: 0 !important;
    border-bottom: 1px solid #555555 !important;
}

.border-bottom-only:focus {
    border-top-width: 0 !important;
    border-left-width: 0 !important;
    border-right-width: 0 !important;
    border-bottom: 1px solid #555555 !important;
}

.box-rounded {
    border-radius: 55px 55px 0px 0px;
    background: #FFFFFF;
    margin-top: -3rem;
}

span.left-ticket-rounded {
    width: 14px;
    height: 14px;
    background-color: white;
    margin: 0;
    padding: 0;
    border-radius: 7px;
    position: absolute;
    top: -7px;
    left: -7px;
    border: 1px solid var(--gainsboro);
}

span.left-ticket-rounded::before {
    content: '';
    display: block;
    position: absolute;
    top: -1px;
    width: 50%;
    height: 14px;
    left: -1px;
    background: white;
}

span.right-ticket-rounded {
    width: 14px;
    height: 14px;
    background-color: white;
    margin: 0;
    padding: 0;
    border-radius: 7px;
    position: absolute;
    top: -7px;
    right: -7px;
    border: 1px solid var(--gainsboro);
}

span.right-ticket-rounded::before {
    content: '';
    display: block;
    position: absolute;
    top: -1px;
    width: 50%;
    height: 14px;
    right: -1px;
    background: white;
}

.bg-blue-navy {
    background-color: #425763;
}

.relative-dkstp {
    /* position: relative; */
    /* height: 50vh; */
}

.floating-box-bottom {
    /* position: absolute; */
    /* bottom: -40px; */
}

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

.border-right-dkstp {
    border-right: 1px solid #CECECE;
}

@media (max-width:768px) {
    .floating-box-bottom {
        position: unset;
    }

    .relative-dkstp {
        position: unset;
        height: auto;
    }

    .border-left-dkstp {
        border-left: none;
    }

    .border-right-dkstp {
        border-right: none;
    }
}

.modal-header-at {
    align-items: center;
    /* padding: 1rem 1rem; */
    /* border-bottom: 1px solid #dee2e6; */
    border-top-left-radius: calc(0.3rem - 1px);
    border-top-right-radius: calc(0.3rem - 1px);
}

.balance-linkaja-section {
    background: linear-gradient(180deg, #B20838 17.35%, #E82529 100%);
    padding-top: 7rem;
    padding-bottom: 9rem;
}

.img-mila-extra-small {
    width: 50px;
}

.text-red-at {
    color: #B20838;
}

.text-red-at img {
    filter: invert(11%) sepia(96%) saturate(4100%) hue-rotate(334deg) brightness(89%) contrast(102%);
}

.img-sm-scale {
    transition: all .2s ease-in-out;
}

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

a.menu-topup-mila:hover img {
    filter: invert(20%) sepia(88%) saturate(2381%) hue-rotate(340deg) brightness(114%) contrast(87%) !important;
}

a.menu-topup-mila:hover span {
    color: var(--alizarin) !important;
}