:root {
    --modal-overlay-bg: #FFF;
    --modal-overlay-tc: #878787;
    --modal-tray-bg: rgba(31, 41, 55, .4);
    --modal-tray-item-tc: #f0f0f0;
    --modal-tray-item-bg: #C5C5C5;
    --modal-tray-item-bc: #B7B7B7;
    --modal-tray-item-hover-bg: #4D4FC6;
    --modal-tray-item-hover-bc: #6366F1;
    --modal-tray-item-opened-bg: #6366F1;
    --modal-tray-item-opened-bc: #4D4FC6;
    --modal-tray-item-first-bg: #2F2F93;
    --modal-tray-item-first-bc: var(--modal-tray-item-first-bg);
}

:root.appearance-dark {
    --modal-overlay-bg: #212529;
    --modal-overlay-tc: #878787;
    --modal-tray-bg: rgba(77, 92, 112, .4);
}

body.modal-open {
    overflow: hidden !important;
}

.modal-dialog .dialog-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 5000;
    text-align: center;
    opacity: .95;
    background-color: var(--modal-overlay-bg);
    display: flex;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0.5rem;
}

.modal-dialog .dialog-overlay .dialog-overlay-loader {
    font-size: 5.5em;
    color: var(--modal-overlay-tc);
}

#modal-tray {
    position: fixed;
    bottom: 0;
    background-color: var(--modal-tray-bg);
    z-index: 6000001;
    width: 100%;
    height: 32px;
}

#modal-tray #modal-tray-items {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
}

#modal-tray #modal-tray-items .modal-tray-item {
    width: 40px;
    height: 100%;
    cursor: pointer;
    text-align: center;
    color: var(--modal-tray-item-tc);
    background-color: var(--modal-tray-item-bg);
    border-color: var(--modal-tray-item-bc);
    border-width: 1px;
}

#modal-tray #modal-tray-items .modal-tray-item.opened {
    background-color: var(--modal-tray-item-opened-bg);
    border-color: var(--modal-tray-item-opened-bc);
}

#modal-tray #modal-tray-items .modal-tray-item.opened.first {
    background-color: var(--modal-tray-item-first-bg);
    border-color: var(--modal-tray-item-first-bc);
}

#modal-tray #modal-tray-items .modal-tray-item:hover {
    background-color: var(--modal-tray-item-hover-bg);
    border-color: var(--modal-tray-item-hover-bc);
}

#modal-tray #modal-tray-items .modal-tray-item .modal-tray-item-icon {
    font-size: 1.5rem;
    line-height: 2rem;
}

.modal-dialog[class*="modal-col-"] {
    max-width: 100%;
}

/* SM (≥576px) */
@media (min-width: 576px) {
    .modal-dialog.modal-col-1 {
        max-width: calc(100% / 12 * 1.5);
    }

    .modal-dialog.modal-col-2 {
        max-width: calc(100% / 12 * 2.5);
    }

    .modal-dialog.modal-col-3 {
        max-width: calc(100% / 12 * 3.5);
    }

    .modal-dialog.modal-col-4 {
        max-width: calc(100% / 12 * 4.5);
    }

    .modal-dialog.modal-col-5 {
        max-width: calc(100% / 12 * 5.5);
    }

    .modal-dialog.modal-col-6 {
        max-width: calc(100% / 12 * 6.5);
    }

    .modal-dialog.modal-col-7 {
        max-width: calc(100% / 12 * 7.5);
    }

    .modal-dialog.modal-col-8 {
        max-width: calc(100% / 12 * 8.5);
    }

    .modal-dialog.modal-col-9 {
        max-width: calc(100% / 12 * 9.5);
    }

    .modal-dialog.modal-col-10 {
        max-width: calc(100% / 12 * 10.5);
    }

    .modal-dialog.modal-col-11 {
        max-width: calc(100% / 12 * 11.5);
    }

    .modal-dialog.modal-col-12 {
        max-width: 100%;
    }
}

/* MD (≥768px) */
@media (min-width: 768px) {
    .modal-dialog.modal-col-1 {
        max-width: calc(100% / 12 * 1);
    }

    .modal-dialog.modal-col-2 {
        max-width: calc(100% / 12 * 2);
    }

    .modal-dialog.modal-col-3 {
        max-width: calc(100% / 12 * 3);
    }

    .modal-dialog.modal-col-4 {
        max-width: calc(100% / 12 * 4);
    }

    .modal-dialog.modal-col-5 {
        max-width: calc(100% / 12 * 5);
    }

    .modal-dialog.modal-col-6 {
        max-width: calc(100% / 12 * 6);
    }

    .modal-dialog.modal-col-7 {
        max-width: calc(100% / 12 * 7);
    }

    .modal-dialog.modal-col-8 {
        max-width: calc(100% / 12 * 8);
    }

    .modal-dialog.modal-col-9 {
        max-width: calc(100% / 12 * 9);
    }

    .modal-dialog.modal-col-10 {
        max-width: calc(100% / 12 * 10);
    }

    .modal-dialog.modal-col-11 {
        max-width: calc(100% / 12 * 11);
    }

    .modal-dialog.modal-col-12 {
        max-width: 100%;
    }
}

/* LG (≥992px) */
@media (min-width: 992px) {
    .modal-dialog.modal-col-1 {
        max-width: calc(100% / 12 * 1);
    }

    .modal-dialog.modal-col-2 {
        max-width: calc(100% / 12 * 2);
    }

    .modal-dialog.modal-col-3 {
        max-width: calc(100% / 12 * 3);
    }

    .modal-dialog.modal-col-4 {
        max-width: calc(100% / 12 * 4);
    }

    .modal-dialog.modal-col-5 {
        max-width: calc(100% / 12 * 5);
    }

    .modal-dialog.modal-col-6 {
        max-width: calc(100% / 12 * 6);
    }

    .modal-dialog.modal-col-7 {
        max-width: calc(100% / 12 * 7);
    }

    .modal-dialog.modal-col-8 {
        max-width: calc(100% / 12 * 8);
    }

    .modal-dialog.modal-col-9 {
        max-width: calc(100% / 12 * 9);
    }

    .modal-dialog.modal-col-10 {
        max-width: calc(100% / 12 * 10);
    }

    .modal-dialog.modal-col-11 {
        max-width: calc(100% / 12 * 11);
    }

    .modal-dialog.modal-col-12 {
        max-width: 100%;
    }
}

/* XL (≥1200px) */
@media (min-width: 1200px) {
    .modal-dialog.modal-col-1 {
        max-width: calc(100% / 12 * 1);
    }

    .modal-dialog.modal-col-2 {
        max-width: calc(100% / 12 * 2);
    }

    .modal-dialog.modal-col-3 {
        max-width: calc(100% / 12 * 3);
    }

    .modal-dialog.modal-col-4 {
        max-width: calc(100% / 12 * 4);
    }

    .modal-dialog.modal-col-5 {
        max-width: calc(100% / 12 * 5);
    }

    .modal-dialog.modal-col-6 {
        max-width: calc(100% / 12 * 6);
    }

    .modal-dialog.modal-col-7 {
        max-width: calc(100% / 12 * 7);
    }

    .modal-dialog.modal-col-8 {
        max-width: calc(100% / 12 * 8);
    }

    .modal-dialog.modal-col-9 {
        max-width: calc(100% / 12 * 9);
    }

    .modal-dialog.modal-col-10 {
        max-width: calc(100% / 12 * 10);
    }

    .modal-dialog.modal-col-11 {
        max-width: calc(100% / 12 * 11);
    }

    .modal-dialog.modal-col-12 {
        max-width: 100%;
    }
}

/* XXL (≥1400px) */
@media (min-width: 1400px) {
    .modal-dialog.modal-col-1 {
        max-width: calc(100% / 12 * 1);
    }

    .modal-dialog.modal-col-2 {
        max-width: calc(100% / 12 * 2);
    }

    .modal-dialog.modal-col-3 {
        max-width: calc(100% / 12 * 3);
    }

    .modal-dialog.modal-col-4 {
        max-width: calc(100% / 12 * 4);
    }

    .modal-dialog.modal-col-5 {
        max-width: calc(100% / 12 * 5);
    }

    .modal-dialog.modal-col-6 {
        max-width: calc(100% / 12 * 6);
    }

    .modal-dialog.modal-col-7 {
        max-width: calc(100% / 12 * 7);
    }

    .modal-dialog.modal-col-8 {
        max-width: calc(100% / 12 * 8);
    }

    .modal-dialog.modal-col-9 {
        max-width: calc(100% / 12 * 9);
    }

    .modal-dialog.modal-col-10 {
        max-width: calc(100% / 12 * 10);
    }

    .modal-dialog.modal-col-11 {
        max-width: calc(100% / 12 * 11);
    }

    .modal-dialog.modal-col-12 {
        max-width: 100%;
    }
}