/* Modal styles using variables */
.modal-box {
    display: none;
    overflow-x: hidden;
    overflow-y: auto;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    outline: 0;
    padding-right: 0 !important;
}

    .modal-box > div {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 85vh;
    }

        .modal-box > div > div {
            background-color: var(--color-light);
            width: 30vw;
            border-radius: 10px;
            padding: 25px;
        }

    .modal-box * .title {
        color: var(--font-color-title);
        font-size: 20px;
        font-weight: 600;
        line-height: normal;
        letter-spacing: -0.5px;
    }

    .modal-box * .subtitle {
        color: var(--font-color-subtitle);
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        letter-spacing: -0.5px;
        margin-top: 25px;
        margin-bottom: 10px;
    }

    .modal-box * .text {
        font-size: 15px;
    }

    .modal-box * .grid-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 20px;
        align-items: center;
    }

        .modal-box * .grid-container > div {
            display: flex;
            flex-direction: column;
        }

            .modal-box * .grid-container > div > label {
                color: #242A30;
                font-size: 14px;
                font-weight: 600;
                letter-spacing: -0.42px;
            }

            .modal-box * .grid-container > div > input {
                border-radius: 4px;
                border: 1px solid var(--input-border-color);
                background: var(--color-light);
                height: 30px;
                font-size: 14px;
                padding-left: 5px;
            }

    .modal-box > div > div > div > div:last-child {
        padding-top: 30px;
    }

        .modal-box > div > div > div > div:last-child > a {
            padding: 5px 20px;
            color: var(--color-light);
            font-size: 15px;
            border-radius: 4px;
            margin: 0 8px;
            cursor: pointer;
        }

        .modal-box > div > div > div > div:last-child .cancelar {
            background-color: var(--color-danger);
        }

            .modal-box > div > div > div > div:last-child .cancelar:hover {
                background-color: var(--color-danger-hover);
                text-decoration: none;
            }

        .modal-box > div > div > div > div:last-child .confirmar {
            background-color: var(--color-info);
        }

            .modal-box > div > div > div > div:last-child .confirmar:hover {
                background-color: var(--color-info-hover);
                text-decoration: none;
            }

    .modal-box > div > div > div .right {
        text-align: end;
    }

    .modal-box > div > div > div .center {
        text-align: center;
    }

    .modal-box > div > div > div .left {
        text-align: start;
    }

@media(max-width: 1200px) {
    .modal-box > div > div {
        width: 80vw;
    }

    .modal-box * .grid-container {
        display: contents;
    }

    .modal-box > div > div > div > div:last-child {
        padding-top: 30px;
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

        .modal-box > div > div > div > div:last-child > a {
            font-size: 15px;
            text-align: center;
        }
}