/* Variables */
:root {
    --default-header: #000000;
    --gray-disable: #CBD5E1;
    --gray-offset: rgba(0, 0, 0, 0.03);
    --gray-border: rgba(0, 0, 0, 0.15);
    --gray-light: rgba(0, 0, 0, 0.4);
    --gray-mid: rgba(0, 0, 0, 0.7);
    --gray-dark: rgba(0, 0, 0, 0.9);
    --active-color: #3460DC;
    --body-color: rgba(0, 0, 0, 1);
    --headline-color: var(--gray-dark);
    --accent-color: #0066f0;
    --body-font-family: Inter, sans-serif;
    --radius: 6px;
    /*--logo-image: url("https://storage.googleapis.com/stripe-sample-images/KAVHOLM.svg");*/
    --form-width: 600px;
}

/* Base */
* {
    box-sizing: border-box;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

body {
    font-family: var(--body-font-family);
    padding-right: 0px !important;
}

main {
    margin-top: 69px;
    margin-bottom: 40px;
}

.header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1039;
}

.partner-title {
    font-size: 3rem !important;
}

.promotion-title {
    font-size: 14px !important;
}

.rounded {
    border-radius: 16px !important;
}

    .rounded.btn {
        border-radius: 7px !important;
    }

.img-rounded {
    border-radius: 17px !important;
}

.border-rounded {
    border-radius: 8px !important;
}

.form-control.rounded {
    border-radius: 5px !important;
}

.form-control.is-invalid {
    border-color: #dc3545 !important;
}

.rounded-bottom-left {
    border-radius: 0 0 0 32px;
}

.text-transparent {
    color: transparent !important;
}

.text-muted {
    color: #94A3B8 !important;
}

.text-medium {
    font-weight: 600 !important;
}

section#ProductList > h4 {
    font-weight: 600;
}

.success-alert {
    border: none;
    background-color: #ECFDF5;
    color: #059669;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
}

button.close {
    font-weight: 100 !important;
}

@media (max-width: 1024px) {
    #Partner > div, .checkout-hero > div {
        flex-flow: column-reverse;
    }
}

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

.btn {
    line-height: 18.2px;
    padding: 10px 24px;
}

.btn-disabled {
    pointer-events: none;
    border-color: var(--gray-disable);
    background-color: var(--gray-disable);
}

#customerForm:invalid > div > .btn-active {
    pointer-events: none !important;
    border-color: var(--gray-disable) !important;
    background-color: var(--gray-disable) !important;
}

form:not(#paymentMethodForm):has(input.input-validation-error) > div > .btn-active {
    pointer-events: none !important;
    border-color: var(--gray-disable) !important;
    background-color: var(--gray-disable) !important;
}

.check-input {
    width: 20px;
    height: 20px;
}

span.font-weight-bold {
    font-weight: 600 !important;
}

a.disabled,
button.disabled {
    pointer-events: none !important;
}

/*Footer*/

.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    font-size: .875rem;
    z-index: 100;
    white-space: nowrap;
    height: 40px;
    background-color: #F8FAFC !important;
}

/*Carousel*/

.carousel-control-next-icon {
    background-image: url("../../img/next-arrow.svg") !important;
}

.carousel-control-prev-icon {
    background-image: url("../../img/prev-arrow.svg") !important;
}

.carousel-item.list > div {
    height: 362px;
}

.carousel-control-next {
    right: -16px !important;
}

.carousel-control-prev {
    left: -16px !important;
}

@media (min-width: 768px) {
    .carousel.list {
        position: unset;
    }

    .carousel-inner.list {
        position: unset;
        overflow: unset;
    }

    .carousel-item.list {
        position: unset;
        display: unset;
        float: none;
        width: 100%;
        margin-right: 0;
        -webkit-backface-visibility: unset;
        backface-visibility: unset;
    }

        .carousel-item.list.active {
            display: unset;
        }

        .carousel-item.list > div {
            height: 100% !important;
        }
}

@media (max-width: 768px) {
    .carousel-item.list > div > div {
        height: 182px;
    }

    .img-fluid {
        max-height: 100%;
    }

    .carousel-control-next {
        justify-content: flex-end !important;
    }

    .carousel-control-prev {
        justify-content: flex-start !important;
    }
}

/*Availability Dots*/

.dot {
    width: 16px;
    height: 16px;
    min-width: 16px;
    border-radius: 16px;
}

    .dot.available {
        background-color: #059669;
    }

    .dot.limitedavailable {
        background-color: #F59E0B;
    }

    .dot.notavailable {
        background-color: #DC2626;
    }

/*Promotion alerts*/

span.rounded {
    border-radius: 7px !important;
}

.border-primary-alert {
    background-color: #E8EDFB;
    border-color: #1D4ED8 !important;
}

    .border-primary-alert > p.font-weight-bold {
        color: #1D4ED8 !important;
    }

.badge-floating {
    position: absolute;
    right: -8px;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}

@media (min-width:1024px) {
    .partner-image {
        width: 50vW;
    }

    .info {
        position: relative;
        z-index: 30;
        max-width: 1140px;
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
    }

        .info > * {
            max-width: 45%;
        }
}

@media (min-width:768px) {
    .result-title {
        font-size: 34px !important;
    }

    .modal-dialog {
        margin-top: 69px;
    }
}

@media (min-width:1024px) {
    .info-wrapper {
        position: absolute
    }

    section#Partner, .checkout-hero {
        min-height: 50vh;
    }
}

@media (max-width:1024px) {
    .partner-image {
        width: 100%;
    }
}

/*Spinner*/

.spinner {
    position: fixed;
    z-index: 2047;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(53, 53, 53, 0.495)
}

    .spinner > span {
        position: fixed;
        top: calc(50vh - 100px);
        left: calc(50vW - 100px);
        z-index: 2048;
        width: 200px;
        height: 200px;
        background-color: #000;
        background-image: url('data:image/svg+xml,https://cdn.dmcslt.com/plugins/images/spin.svg');
        mask: url(https://cdn.dmcslt.com/images/spin.svg);
        -webkit-mask: url(https://cdn.dmcslt.com/images/spin.svg);
        mask-image: url(https://cdn.dmcslt.com/images/spin.svg);
        -webkit-mask-image: url(https://cdn.dmcslt.com/images/spin.svg);
    }