/*
  Site theme for the SweetAlert (v1) popups used by ShowMessage and the other swal() calls.
  Loaded after dist/sweetalert.css. SweetAlert sets the confirm button's colour and shadow as
  inline styles, hence the !important on those.
*/
.sweet-overlay {
    background-color: rgba(4, 49, 77, 0.45);
}

.sweet-alert {
    font-family: "inter", sans-serif;
    border-radius: 10px;
    box-shadow: 4px 4px 30px rgba(0, 0, 0, 0.10);
    padding: 28px 24px 24px;
}

    .sweet-alert h2 {
        margin: 18px 0 0;
        font-family: 'Poppins', sans-serif;
        font-size: 20px;
        font-weight: 500;
        line-height: 1.35;
        color: #04314D;
    }

    .sweet-alert p {
        margin-top: 8px;
        font-size: 15px;
        line-height: 1.5;
        color: #4b5d6b;
    }

    .sweet-alert .sa-icon {
        margin: 4px auto 0;
    }

    .sweet-alert .sa-button-container {
        margin-top: 8px;
    }

    .sweet-alert button {
        margin: 18px 6px 0;
        padding: 10px 34px;
        border-radius: 5px;
        font-family: "inter", sans-serif;
        font-size: 15px;
        font-weight: 600;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        box-shadow: none !important;
    }

        .sweet-alert button.confirm {
            background-color: #D81481 !important;
        }

            .sweet-alert button.confirm:hover,
            .sweet-alert button.confirm:focus {
                background-color: #E11D8A !important;
            }

        .sweet-alert button.cancel {
            background-color: #ECF1F3;
            color: #04314D;
        }

            .sweet-alert button.cancel:hover {
                background-color: #DEF3FF;
            }

    /* Icons in the site colours */
    .sweet-alert .sa-icon.sa-success {
        border-color: #547A36;
    }

        .sweet-alert .sa-icon.sa-success .sa-line {
            background-color: #547A36;
        }

        .sweet-alert .sa-icon.sa-success .sa-placeholder {
            border-color: rgba(84, 122, 54, 0.25);
        }

    .sweet-alert .sa-icon.sa-error {
        border-color: #C62828;
    }

        .sweet-alert .sa-icon.sa-error .sa-line {
            background-color: #C62828;
        }

    .sweet-alert .sa-icon.sa-info {
        border-color: #04314D;
    }

        .sweet-alert .sa-icon.sa-info::before,
        .sweet-alert .sa-icon.sa-info::after {
            background-color: #04314D;
        }

    .sweet-alert .sa-icon.sa-warning {
        border-color: #D81481;
    }

        .sweet-alert .sa-icon.sa-warning .sa-body,
        .sweet-alert .sa-icon.sa-warning .sa-dot {
            background-color: #D81481;
        }

/* Loading popup (ShowLoadingMessage): spinner instead of an icon, no button */
.kex-swal-spinner {
    display: block;
    width: 44px;
    height: 44px;
    margin: 6px auto 0;
    border: 4px solid #DEF3FF;
    border-top-color: #D81481;
    border-radius: 50%;
    animation: kex-swal-spin 0.8s linear infinite;
}

@keyframes kex-swal-spin {
    to {
        transform: rotate(360deg);
    }
}