@use 'variables' as *;

/* Modals */
.modal-dialog {
    min-height: 100%;
    min-height: 100vh;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}
.modal-content {
    background-color: $white;
    border: none;
    color: $darkgrey;
    border-radius: 0;
    min-width: 600px;
}
.modal-header {
    text-transform: uppercase;
    color: $white;
    text-align: center;
    background-color: $darkgrey;
}
.modal-header h3 {
    font-size: 16px; 
    font-weight: bold;
}
.btn-modal, .btn-modal:hover {
    width: 143px;
    color: $white;
    text-transform: uppercase;
}
.btn-modal { background-color: $vividorange; }
.btn-modal:hover { background-color: $opaqueorange; }
.base-modal-close {
    background-color: $darkgrey;
    padding: 4px;
}
.base-modal-close {
    font-size: 16px; 
    font-weight: bold;
    color: white;
    background-color: $darkgrey;
    height: 44px;
    cursor: pointer;
    padding-top: 10px;
    border-top-right-radius: var(--bs-modal-inner-border-radius);
}
.no-right-border-radius {
    border-top-right-radius: 0px !important;
}