.modal {}
.modal .modal-dialog {}
.modal .modal-dialog.modal-dialog-bottom { display: flex; align-items: flex-end; min-height: calc(100% - 3.5rem); }
.modal .modal-dialog .modal-content { border-radius: 0; background: none; border: none; }
.modal .modal-dialog .modal-content .modal-header {padding: 0;border: none;z-index: 10;}
.modal .modal-dialog .modal-content .modal-header .btn-close {width: 40px;height: 40px;margin: 0;position: absolute;right: -20px;top: -20px;padding: 0;background: var(--c-main);opacity: 1;border-radius: 50%;color: #fff;font-size: 18px;font-weight: 300;}
.modal .modal-dialog.modal-fullscreen .modal-content .modal-body { padding-top: 60px; }
.modal .modal-dialog.modal-fullscreen .modal-content .modal-header .btn-close { right: 10px; top: 10px; }
.modal .modal-dialog .modal-content .modal-header .btn-close:hover {background:var(--c-secondary)}
.modal .modal-dialog .modal-content .modal-body {padding: 40px;background: #fff;border-radius: 20px;}

#quiz_modal .modal-body { background: var(--c-main); color: #fff; }
#quiz_modal .modal-dialog {max-width: 800px;}
#quiz_modal .modal-dialog .modal-content .modal-header .btn-close {background:var(--c-textcolor);}

@media (max-width: 767px) {
    #quiz_modal {}
    #quiz_modal .modal-dialog {align-items: start;margin: 0;width: 100%;max-width: 100%;}
    #quiz_modal .modal-dialog .modal-content {min-height: 100vh;}
    #quiz_modal .modal-dialog .modal-content .modal-header {border-radius: 0;/*! background: #fff; */}
    #quiz_modal .modal-dialog .modal-content .modal-header .btn-close {top: 10px;right: 10px;/*! position: relative; */}
    #quiz_modal .modal-dialog .modal-content .modal-body {border-radius: 0;padding: 50px 20px 20px;}
}