* {
    --modalBackgroundColor: white;
    --modalTextColor: black;
    --modalButtonBackgroundColor: green;
    --modalButtonTextColor: white;
    --modalButtonBorderColor: blue;
}

.modal .modal-content {
    width: 100%;
    padding: calc(20 * var(--cf)) calc(40 * var(--cf));
    height: 100%;
    border-radius: calc(20 * var(--cf));
    background-color: white;
}

.modal .modal-dialog {
    min-width: 60vw;
}

.modal .modal-body {
    flex-direction: column;
    padding: 0;
}

.modal p.bodyTitle {
    font-size: calc(32 * var(--cf));
    font-weight: 700;
    line-height: calc(36 * var(--cf));
    text-align: center;
}

.modal p.bodyText, .modal p.actionText {
    font-size: calc(24 * var(--cf));
    font-weight: 700;
    line-height: calc(28 * var(--cf));
    margin-top: calc(20 * var(--cf));
    text-align: center;
}

.modal p.question {
    font-size: calc(24 * var(--cf));
    font-weight: 500;
    margin-top: calc(20 * var(--cf));
}

.modal .modal-footer {
    width: 100%;
    margin-top: calc(48 * var(--cf));
    border: none;
}

.modal button.modalButton {
    width: calc(var(--w, 200) * var(--cf));
    height: calc(var(--h, 48) * var(--cf));
    font-size: calc(var(--fs, 18) * var(--cf));
    border-radius: calc(24 * var(--cf));
    background-color: var(--modalButtonBackgroundColor);
    border: 1px solid var(--modalButtonBorderColor) !important;    
    color: var(--modalButtonTextColor);
}

#mainPopup .modal-content {
    min-width: calc(573 * var(--cf));  
    max-width: calc(573 * var(--cf));  
    padding: calc(16 * var(--cf));
    border-radius: calc(8 * var(--cf));
}
#mainPopup .modal-dialog {
    min-width: unset;
}
#mainPopup p.bodyTitle, #mainPopup p.bodyText, #mainPopup p.question {
    text-align: left;
}
#mainPopup p.bodyTitle {
    font-weight: 600 !important;
}
#mainPopup .modalButton {
    width: unset;
    background-color: transparent;
    border: none !important;
    color: var(--on-warning);

    /* label-sm */
    font-style: normal;
    font-weight: 500;
    font-size: calc(18 * var(--cf));
    line-height: calc(22 * var(--cf));
    letter-spacing: calc(0.5 * var(--cf));
}
#mainPopup .modalButton.btnYes {
    margin-right: calc(24 * var(--cf));
}

#naiaOverlayPopup {
    & .modal-content {
        width: calc(800 * var(--cf));
        background-color: white;
        color: black;
    }
}