/* Modal — i2t3 component styles
 * Bootstrap modal handles the heavy lifting. Wrapper styles only.
 */

.i2t3-modal-section { position: relative; }

.i2t3-modal-section .modal-trigger {
    display: inline-block;
}

/* Position top / bottom (i2t3_modal_position). Bootstrap opens every dialog near
 * the top, so "bottom" had no effect. Make the dialog a full-height flex box and
 * align its content to the top / bottom edge (same technique as Bootstrap's
 * modal-dialog-centered, just flex-start / flex-end). */
.modal.modal-from-top .modal-dialog,
.modal.modal-from-bottom .modal-dialog {
    display: flex;
    min-height: calc(100% - 3.5rem);
}
.modal.modal-from-top .modal-dialog { align-items: flex-start; }
.modal.modal-from-bottom .modal-dialog { align-items: flex-end; }
.modal.modal-from-top .modal-content,
.modal.modal-from-bottom .modal-content { width: 100%; }