:root {
    --modal-width-standard: 700px;
}

.modal-content {
    display: flex;
    width: var(--modal-width-standard);
    padding: var(--padding-spacious);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-spacious);
    border-radius: var(--radius-primary)!important;
    background: var(--bg-card)!important;
}

@media (max-width: 767.98px) {
    .modal-content {
        padding: var(--padding-comfortable);
    }
}

.modal-content.modal-responsive {
    width: min(clamp(0px, var(--modal-width-standard), var(--modal-width-standard)), 90vw)!important;
    max-width: min(clamp(0px, var(--modal-width-standard), var(--modal-width-standard)), 90vw)!important;

    .modal-dialog:has(&) {
        width: min(clamp(0px, var(--modal-width-standard), var(--modal-width-standard)), 90vw)!important;
        max-width: min(clamp(0px, var(--modal-width-standard), var(--modal-width-standard)), 90vw)!important;
    }
}

.modal-content.modal-responsive-xl {
    width: fit-content!important;
    max-width: min(clamp(0px, 1200px, 100vw), 90vw)!important;

    .modal-dialog:has(&) {
        width: fit-content!important;
        max-width: min(clamp(0px, 1200px, 100vw), 90vw)!important;

    }
}

.modal-header, .modal-body, .modal-footer {
    padding: 0;
    background-color: transparent!important;
    border: none;
    width: 100%;
}

.modal-header .close {
    padding: 0;
    margin: 0;
}

.modal-header h5 {
    font-size: 20px;
    margin: 0;
}

.modal.right .modal-content {
    width: 100%;
    max-width: 100%;
}

.modal.right .modal-body, .modal.right .modal-body .dropdown-item {
    padding: 0!important;
}

.modal-body form {
    display: flex;
    flex-direction: column;
    gap: var(--gap-comfortable);
}

.eula-modal-content {
    max-height: 80vh;
    max-height: 80svh;
}