/*top import*/
@import "sweetalert2.min.css";

:root {
    --red: hsl(0, 100%, 50%);
    --chm-red: hsla(345, 100%, 40%, 1);
    --chm-blue: hsla(220, 83%, 16%, 1);
    --chm-tan: hsl(35, 43%, 55%);
    --chm-white: #ffffff;
    --chm-lightBackground: hsla(36, 43%, 91%, 1);
    --chm-input: hsla(36, 45%, 97%, 1);
}

/*body of styles*/
.warning-title {
    color: var(--chm-blue);
}

.warning-icon {
    height: 75px;
    width: 80px;
    flex: 0 0 auto;
}

.warning-grow-loop {
    transform: scale(1);
    animation: warningGrowCycle 2s infinite;
    border: none;

}

@keyframes warningGrowCycle {
    0% {
        transform: scale(0.8);
    }

    40% {
        transform: scale(1);
    }

    60% {
        transform: scale(1);
    }

    100% {
        transform: scale(0.8);
    }
}

div:where(.swal2-container).swal2-center > .swal2-popup {
    grid-column: 2;
    grid-row: 2;
    place-self: start center; /* top + center horizontally */
    margin-top: 0vh;
}

body.swal2-shown > [aria-hidden='true'] {
    transition: 0.1s filter;
    filter: blur(3px);
}

div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-cancel),
div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-deny),
div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm),
.swal2-cancel,
.swal2-deny,
.swal2-confirm {
    border-color: var(--chm-tan) !important;
    width: 200px;
    border-width: 4px !important;
    border-radius: 4px !important;
    border-style: solid !important;
    background-color: hsl(0 0% 100%) !important;
    color: var(--chm-blue) !important;
    height: 55px !important;
    font-size: 22px !important;
    font-weight: bold !important;
    padding: 0 50px !important;
}

    div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-cancel):hover,
    div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-deny):hover,
    div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm):hover,
    .swal2-cancel,
    .swal2-deny,
    .swal2-confirm {
        box-shadow: 0 2px 5px hsla(0, 0%, 48%, 0.8);
    }

div:where(.swal2-container) div:where(.swal2-timer-progress-bar) {
    background-color: var(--chm-red) !important;
}

.swal2-timer-progress-bar-container {
    transform: scaleX(-1);
}

.swal-btn-wide {
    width: 280px;
    margin-bottom: 10px;
}