:root {
    --white: #fff;
    --primary-blue: #3fabf3;
    --uba-primary-blue: #00a0d1;
    --primary-blue-hover: #308eb7;
    --gray-light: #f9f9f9f9;
    --gray-light-hover: #c9c9c9f9;
    --primary-red: #dc3545;
    --primary-ocean: #0d6efd;
    --primary-ocean-dark: #152e4d;
    --primary-yellow: #ffc107;
    --primary-yellow-hover: #ca9a08;
    --text-sm-responsive: clamp(1rem, 4vw, 1.3rem);
    --terthemecolor: #3d4461;
}

/* Base Modal Block */
.scaem-modal {
    /* Base styles for the modal */
    display: none;
    /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* Overlay */
    z-index: 1050;
    /* Bootstrap modal z-index */
}

/* Modal Dialog */
.scaem-modal__dialog {
    position: relative;
    margin: auto;
    max-width: 42.85rem;
    /* Max width for the modal */
    width: 90%;
    /* Responsive width */
}

/* Modal Content */
.scaem-modal__content {
    background-color: var(--white);
    border-radius: 8px;
    /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: 20px;
    background-color: var(--white) !important;
    /* Base padding */
}

/* Modal Header */
.scaem-modal__header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 20px;
    /* border-bottom: 1px solid #e9ecef; */
}

/* Modal Title */
.scaem-modal__title {
    font-size: 1.5rem;
    /* Font size for title */
    font-weight: 600;
    /* Bold title */
    color: #333 !important;
    /* Title color */
}

/* Close Button */
.scaem-modal__close {
    background: none;
    border: none;
    font-size: 1.5rem;
    /* Font size for close button */
    cursor: pointer;
}

/* Modal Body */
.scaem-modal__body {
    padding: 20px;
    font-size: 1rem;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    max-height: 20vh;
    min-height: 20vh;
    position: relative;
}

.scaem-modal__body--large-height {
    max-height: 50vh;
    min-height: 50vh;
}

.scaem-modal__body--large-medium-height {
    max-height: 46vh;
    min-height: 46vh;
}

.scaem-modal__body--medium-height {
    max-height: 40vh;
    min-height: 40vh;
}

.scaem-modal__body--small-height {
    max-height: 35vh;
    min-height: 35vh;
}

.scaem-modal__body--smaller-height {
    max-height: 25vh;
    min-height: 25vh;
}

.scaem-modal__body--tiny-height {
    max-height: 20vh;
    min-height: 20vh;
}

.modal-body-text__agreement p {
    font-size: var(--text-sm-responsive);
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    margin: 0;
    color: oklch(0.208 0.042 265.755);
}



/* Define the pulsing animation */
@keyframes pulsarScale {
    0% {
        translate: 0 3px;
        opacity: 1;
    }

    50% {
        translate: 0 7px;
        opacity: 0.5;
    }

    100% {
        translate: 0 3px;
        opacity: 1;
    }
}

@keyframes pulsar {
    0% {
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
        opacity: 1;
    }

    50% {
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgb(239, 239, 239));
        opacity: 0.5;
    }

    100% {
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
        opacity: 1;
    }
}

.scaem-modal__button-disabled {
    pointer-events: none;
    transition: opacity 0.3s ease-in-out;
    opacity: 0.5 !important;
}

.scaem-modal--visibility-transition {
    transition: opacity 0.3s ease-in-out;
    opacity: 1;
}

.invisible-transition {
    transition: opacity 0.3s ease-in-out;
    opacity: 0;
}

/* CSS for the element */
.scaem-modal--visibility-fade-in {
    opacity: 0.7;
    /* Start hidden */
    /* Transition effect */
    transition: opacity 0.2s ease-in;
}

.scaem-modal--visibility-fade-in.visible {
    opacity: 1;
    /* Fully visible */
}

/* Modal Footer */
.scaem-modal__footer {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    gap: 1rem;
    padding: 15px 20px;
    /* border-top: 1px solid #e9ecef; */
}

.scaem-modal__button {
    font-size: 16px;
    cursor: pointer !important;
    min-width: 8rem !important;
    padding: 0.5rem !important;
    position: relative;
    text-align: center;
    border: 2px solid;
    border-radius: 0.28rem;
    display: inline-block;
    vertical-align: middle;
    text-transform: capitalize;
    transition: all 0.2s ease-in-out;
}

.scaem-modal__button--full-width {
    width: 100%;
}

.scaem-modal__button--primary {
    background-color: var(--uba-primary-blue);
    border-color: var(--uba-primary-blue);
    color: var(--white);
    opacity: 0.9;
}

.scaem-modal__button--primary:hover {
    background-color: var(--primary-blue-hover) !important;
    border-color: var(--primary-blue-hover) !important;
    color: var(--white) !important;
    opacity: 1 !important;
}

.scaem-modal__button--gray-border {
    background-color: var(--gray-light) !important;
    border-color: var(--gray-light-hover) !important;
    color: var(--terthemecolor);
    opacity: 0.9;
}

.scaem-modal__button--gray-border:hover {
    border-color: var(--primary-blue) !important;
    background-color: var(--primary-blue) !important;
    color: var(--white) !important;
    opacity: 1 !important;
}

.scaem-modal__button--none {
    background-color: #6c757d;
    color: var(--white);
    opacity: 0.9;
}

.scaem-modal__button--secondary-ocean {
    background-color: transparent;
    border: 1px solid var(--primary-ocean);
    color: var(--primary-ocean);
    opacity: 0.9;
    transition: all 200ms ease-in-out;
}

.scaem-modal__button--secondary-ocean:hover {
    background-color: var(--primary-ocean) !important;
    color: var(--white) !important;
    border-radius: 0.28rem;
}

.scaem-modal__button--outline-secondary-ocean {
    background-color: transparent;
    border: 1px solid var(--primary-ocean);
    color: var(--primary-ocean);
    opacity: 0.9;
}

.scaem-modal__text-white {
    color: var(--white) !important;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.123);
}

.scaem-modal__text-secondary-ocean {
    color: var(--primary-ocean) !important;
}

.scaem-modal__text-secondary-ocean-dark {
    color: var(--primary-ocean-dark) !important;
}

.scaem-modal__bg-primary-yellow {
    background-color: var(--primary-yellow) !important;
    border-color: var(--primary-yellow) !important;
}

.transition-all-04 {
    transition: all 0.4s ease-in !important;
}

.scaem-modal__bg-primary-yellow:hover {
    background-color: var(--primary-yellow-hover) !important;
    border-color: var(--primary-yellow-hover) !important;
}

.scaem-modal__text-primary-yellow {
    color: var(--primary-yellow) !important;
}



.scaem-modal__button--secondary-gray {
    background-color: transparent;
    border: 1px solid #6c757d;
    color: #6c757d;
    opacity: 0.9;
}

.scaem-modal__button--secondary-gray-dark {
    background-color: transparent;
    border: 1px solid #303030;
    color: #303030;
    opacity: 0.9;
}

.scaem-modal__button--danger {
    background-color: var(--primary-red);
    border-color: var(--primary-red);
    color: var(--white);
    opacity: 0.9;
}

.scaem-modal__button--warning {
    background-color: #ffc107;
    color: var(--white);
    opacity: 0.9;
}

.scaem-modal__button--primary:hover,
.scaem-modal__button--none:hover,
.scaem-modal__button--secondary-gray:hover,
.scaem-modal__button--secondary-gray-dark:hover,
.scaem-modal__button--danger:hover,
.scaem-modal__button--warning:hover {
    transition: opacity 0.3s ease-in-out;
    opacity: 1;
}

.container-large__small {
    width: 100%;
    max-width: 14rem;
}

.modal-dialog--smaller-420 {
    max-width: 30rem !important;
}

.scaem-modal--large .scaem-modal__dialog {
    max-width: 57.14rem;
}

.scaem-modal--small .scaem-modal__dialog {
    max-width: 28.57rem;
}

#quality-check-navigation-modal,
#carnet-success-window-navigation-modal,
#contact-form-quality-check-navigation-modal,
#fmd-open-account-navigation-modal {
    padding: 0 !important;
}

#modal-navigation-text {
    overflow: auto;
    max-height: 80vh;
}

.scaem-modal-opened {
    overflow: hidden !important;
    /* Prevents scrolling of the backdrop */
}

.scaem-modal__container {
    display: flex;
    flex-direction: column;
}

.scaem-modal__container--desktop {
    display: none;
    flex-direction: column;
}

.scaem-modal__container--mobile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.scaem-modal__aside-container {
    border-radius: 0.4rem;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.scaem-modal__aside-image {
    min-width: 12rem;
    max-width: 100%;
    height: 20rem;
    object-fit: cover;
    border-radius: 0.4rem;
}

.scaem-modal__aside-image--contain {
    object-fit: contain;
}

.swal2-actions {
    width: 100%;
    padding: 1.42rem 1.8rem;
    justify-content: flex-end !important;
}


.scaem-modal-fmd-open-account__content {
    width: 100% !important;
    height: 100% !important;
}

.uba-modal__backdrop {
    backdrop-filter: blur(6px) !important;
    background: rgba(255, 255, 255, .8) !important;
    border: 1px solid #fff !important;
}

.max-width-none {
    max-width: none !important;
}

.max-height-100 {
    max-height: 100% !important;
}

@media (min-width: 640px) {
    .scaem-modal__container--desktop {
        display: flex;
        flex-direction: column;
    }

    .scaem-modal__container--mobile {
        display: none;
    }

    .scaem-modal__button--full-width {
        width: auto;
    }

    .scaem-modal__body--small-height {
        max-height: 38vh;
        min-height: 38vh;
    }

}

.modal-width {
    max-width: 37rem !important;
}

@media screen and (min-width: 1400px) {
    .modal-width__40 {
        width: 35% !important;
    }
}

@media screen and (min-width: 680px) and (max-width: 1400px) {
    .modal-width__55 {
        width: 55% !important;
    }
}

@media screen and (max-width: 680px) {
    .modal-width__100 {
        width: 100% !important;
        padding: 1rem !important
    }
}

@media screen and (max-width: 768px) {

    .scaem-modal__container {
        display: flex;
        flex-direction: column;
    }

    /* Apply the animation to the visual hint */
    .with-after::after {
        content: '';
        position: absolute;
        bottom: 4%;
        width: 90%;
        height: 20px;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(229, 245, 255, 0.812));
        pointer-events: none;
        animation: pulsarScale 2s infinite ease-in-out;
        border-top-left-radius: 100%;
        border-top-right-radius: 100%;
        /* Apply the pulsing animation */
    }
}

/* Responsive variants */
@media (min-width: 640px) {
    .sm\:scaem-modal__body--large-height {
        max-height: 50vh;
        min-height: 50vh;
    }

    .sm\:scaem-modal__body--large-medium-height {
        max-height: 46vh;
        min-height: 46vh;
    }

    .sm\:scaem-modal__body--medium-height {
        max-height: 40vh;
        min-height: 40vh;
    }

    .sm\:scaem-modal__body--small-height {
        max-height: 35vh;
        min-height: 35vh;
    }

    .sm\:scaem-modal__body--smaller-height {
        max-height: 25vh;
        min-height: 25vh;
    }

    .sm\:scaem-modal__body--tiny-height {
        max-height: 20vh;
        min-height: 20vh;
    }
}

@media (min-width: 768px) {
    .md\:scaem-modal__body--large-height {
        max-height: 48vh;
        min-height: 48vh;
    }

    .md\:scaem-modal__body--large-medium-height {
        max-height: 46vh;
        min-height: 46vh;
    }

    .md\:scaem-modal__body--medium-height {
        max-height: 30vh;
        min-height: 30vh;
    }

    .md\:scaem-modal__body--small-height {
        max-height: 35vh;
        min-height: 35vh;
    }

    .md\:scaem-modal__body--smaller-height {
        max-height: 25vh;
        min-height: 25vh;
    }

    .md\:scaem-modal__body--tiny-height {
        max-height: 20vh;
        min-height: 20vh;
    }
}

@media (min-width: 1024px) {
    .lg\:scaem-modal__body--large-height {
        max-height: 50vh;
        min-height: 50vh;
    }

    .lg\:scaem-modal__body--large-medium-height {
        max-height: 46vh;
        min-height: 46vh;
    }

    .lg\:scaem-modal__body--medium-height {
        max-height: 40vh;
        min-height: 40vh;
    }

    .lg\:scaem-modal__body--small-height {
        max-height: 35vh;
        min-height: 35vh;
    }

    .lg\:scaem-modal__body--smaller-height {
        max-height: 25vh;
        min-height: 25vh;
    }

    .lg\:scaem-modal__body--tiny-height {
        max-height: 20vh;
        min-height: 20vh;
    }
}