/*************************************************************************/
/* MODERN MODALS - Bootstrap 3 compatible                                 */
/*************************************************************************/

/*************************************************************************/
/* BASE MODAL                                                             */
/*************************************************************************/

.modal {
    color: var(--panel-text, #4b5563);
}

/*************************************************************************/
/* DIALOG                                                                 */
/*************************************************************************/

.modal-dialog {
    margin: 30px auto;
}

.modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - 60px);
}

/*************************************************************************/
/* CONTENT                                                                */
/*************************************************************************/

.modal-content {
    position: relative;
    overflow: hidden;
    color: var(--panel-text, #4b5563);
    background-color: #ffffff;
    border: 1px solid var(--panel-border, #e3e8ef);
    border-radius: 12px;
    background-clip: padding-box;
    box-shadow: 0 18px 50px rgba(31, 45, 61, 0.18), 0 3px 10px rgba(31, 45, 61, 0.08);
}

/*************************************************************************/
/* HEADER                                                                 */
/*************************************************************************/

.modal-header {
    position: relative;
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 18px 22px;
    color: var(--panel-title, #263746);
    background: linear-gradient( 180deg, #ffffff 0%, #f8fafc 100% );
    border: 0;
    border-bottom: 1px solid var(--panel-border, #e3e8ef);
}

    /*
 * Same visual accent as modern panels.
 */
    .modal-header::before {
        position: absolute;
        top: 13px;
        bottom: 13px;
        left: 0;
        width: 3px;
        content: "";
        background-color: var(--panel-accent, #b18849);
        border-radius: 0 3px 3px 0;
    }

    /*************************************************************************/
    /* TITLE                                                                  */
    /*************************************************************************/

    .modal-header {
        position: relative;
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 2px 12px;
        padding: 18px 22px;
        color: var(--panel-title, #263746);
        background: linear-gradient( 180deg, #ffffff 0%, #f8fafc 100% );
        border: 0;
        border-bottom: 1px solid var(--panel-border, #e3e8ef);
    }

        .modal-header .modal-title {
            flex: 1 1 auto;
            min-width: 0;
            margin: 0;
            color: var(--panel-title, #263746);
            font-size: 1.05em;
            font-weight: 650;
            line-height: 1.35;
            text-transform: none;
        }

        .modal-header .modal-subtitle {
            flex: 1 0 100%;
            order: 3;
            margin-top: 2px;
            color: var(--panel-muted, #7b8794);
            font-size: 0.82em;
            font-weight: 400;
            line-height: 1.4;
        }

        .modal-header .close {
            flex: 0 0 auto;
            order: 2;
            margin-left: auto;
        }

    /*************************************************************************/
    /* CLOSE BUTTON                                                           */
    /*************************************************************************/

    .modal-header .close {
        position: static;
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        margin: 0 0 0 auto;
        padding: 0;
        color: #7b8794;
        background-color: transparent;
        border: 1px solid transparent;
        border-radius: 7px;
        font-size: 22px;
        font-weight: 300;
        line-height: 1;
        opacity: 1;
        text-shadow: none;
        transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
    }

        .modal-header .close:hover,
        .modal-header .close:focus {
            color: var(--panel-accent, #b18849);
            background-color: #ffffff;
            border-color: var(--panel-border, #e3e8ef);
            opacity: 1;
            outline: 0;
        }

/*************************************************************************/
/* BODY                                                                   */
/*************************************************************************/

.modal-body {
    position: relative;
    padding: 22px;
    color: var(--panel-text, #4b5563);
    background-color: #ffffff;
}

/*************************************************************************/
/* FOOTER                                                                 */
/*************************************************************************/

.modal-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 22px;
    background-color: #f8fafc;
    border: 0;
    border-top: 1px solid var(--panel-border, #e3e8ef);
    text-align: right;
}

    /*************************************************************************/
    /* FOOTER BUTTONS                                                         */
    /*************************************************************************/

    .modal-footer .btn {
        margin: 0;
        padding: 8px 14px;
        border-radius: 6px;
        font-size: 0.88em;
        font-weight: 600;
        text-transform: none;
    }

/*************************************************************************/
/* LIST GROUP                                                             */
/*************************************************************************/

.modal .modal-content .list-group-item {
    padding: 8px 10px;
    color: var(--panel-text, #4b5563);
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid #edf1f5;
    font-size: 0.86em;
}

    .modal .modal-content .list-group-item:last-child {
        border-bottom: 0;
    }

/*************************************************************************/
/* TABS                                                                   */
/*************************************************************************/

.modal .modal-content .nav-tabs {
    margin-bottom: 16px;
    border-bottom: 1px solid var(--panel-border, #e3e8ef);
    font-size: 0.84em;
    letter-spacing: normal;
}

    .modal .modal-content .nav-tabs > li > a {
        margin-right: 4px;
        padding: 8px 11px;
        color: #6d7988;
        background-color: transparent;
        border: 0;
        border-bottom: 2px solid transparent;
        font-weight: 600;
        text-transform: none;
    }

        .modal .modal-content .nav-tabs > li > a:hover,
        .modal .modal-content .nav-tabs > li > a:focus {
            color: var(--panel-title, #263746);
            background-color: #f7f9fb;
        }

    .modal .modal-content .nav-tabs > li.active > a,
    .modal .modal-content .nav-tabs > li.active > a:hover,
    .modal .modal-content .nav-tabs > li.active > a:focus {
        color: var(--panel-accent, #b18849);
        background-color: transparent;
        border: 0;
        border-bottom: 2px solid var(--panel-accent, #b18849);
        font-weight: 650;
    }

/*************************************************************************/
/* IMAGES                                                                 */
/*************************************************************************/

.modal .modal-content img {
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
    border-radius: 8px;
}

/*************************************************************************/
/* ITEM DETAILS                                                           */
/*************************************************************************/

.modal .modal-content .item-details {
    margin: 22px 0;
}

/*************************************************************************/
/* BACKDROP                                                               */
/*************************************************************************/

.modal-backdrop {
    background-color: #17202b;
}

    .modal-backdrop.in {
        opacity: 0.72;
    }

/*************************************************************************/
/* LEGACY CLOSE-MODAL                                                     */
/*************************************************************************/

/*
 * Kept for old views using:
 *
 * <div class="close-modal">
 *     <div class="lr">
 *         <div class="rl"></div>
 *     </div>
 * </div>
 */

.modal .close-modal,
.portfolio-modal .close-modal {
    position: absolute;
    top: 22px;
    right: 22px;
    width: 42px;
    height: 42px;
    cursor: pointer;
    background-color: transparent;
    opacity: 0.72;
    z-index: 1055;
    transition: opacity 0.15s ease;
}

    .modal .close-modal:hover,
    .portfolio-modal .close-modal:hover {
        opacity: 1;
    }

    .modal .close-modal .lr,
    .portfolio-modal .close-modal .lr {
        position: absolute;
        top: 4px;
        left: 20px;
        width: 2px;
        height: 34px;
        margin: 0;
        background-color: #536171;
        transform: rotate(45deg);
    }

        .modal .close-modal .lr .rl,
        .portfolio-modal .close-modal .lr .rl {
            width: 2px;
            height: 34px;
            background-color: #536171;
            transform: rotate(90deg);
        }

/*************************************************************************/
/* PORTFOLIO MODAL                                                        */
/*************************************************************************/

.portfolio-modal {
    min-height: 100vh;
    padding-right: 0 !important;
}

    .portfolio-modal .modal-dialog {
        width: 100vw;
        max-width: none;
        margin: 0;
    }

    .portfolio-modal .modal-content {
        min-height: 100vh;
        padding: 70px 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

/*************************************************************************/
/* FULLSCREEN                                                             */
/*************************************************************************/

.modal-fullscreen .modal-dialog {
    width: 100%;
    max-width: none;
    margin: 0;
}

.modal-fullscreen .modal-content {
    min-height: 100vh;
    padding: 70px 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.modal-fullscreen .modal-header {
    background-color: transparent;
    border-bottom: 0;
}

    .modal-fullscreen .modal-header::before {
        display: none;
    }

    .modal-fullscreen .modal-header h4 {
        font-size: 2.2em;
    }

.modal-fullscreen .modal-content h2 {
    margin-bottom: 1em;
    color: var(--panel-title, #263746);
    text-align: center;
}

/*************************************************************************/
/* MODAL SIZES                                                            */
/*************************************************************************/

.modal-sm .modal-content {
    border-radius: 10px;
}

.modal-lg .modal-content {
    border-radius: 12px;
}

/*************************************************************************/
/* BOOTSTRAP SELECT OVER MODALS                                          */
/*************************************************************************/

.bs-container {
    z-index: 1065 !important;
}

    .bs-container .dropdown-menu {
        z-index: 1065 !important;
    }

/*************************************************************************/
/* SCROLLABLE CONTENT                                                     */
/*************************************************************************/

.modal-body.modal-body-scrollable {
    max-height: calc(100vh - 220px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/*************************************************************************/
/* BOOTSTRAP SELECT INSIDE MODALS                                        */
/*************************************************************************/

.modal .bootstrap-select.form-control {
    width: 100%;
}

    .modal .bootstrap-select.form-control > .dropdown-toggle {
        min-height: 34px;
        padding: 6px 32px 6px 10px;
        font-size: 12px;
        line-height: 20px;
    }

.modal .bootstrap-select .bs-searchbox .form-control {
    height: 32px;
    min-height: 32px;
    padding: 5px 9px;
    font-size: 12px;
}
.modal .bootstrap-select .dropdown-menu {
    z-index: 1070;
}

/*************************************************************************/
/* RESPONSIVE                                                             */
/*************************************************************************/

@media (max-width: 767px) {

    .modal-dialog,
    .modal-dialog-centered {
        width: calc(100% - 20px);
        min-height: 0;
        margin: 10px auto;
    }

    .modal-content {
        border-radius: 9px;
    }

    .modal-header {
        padding: 14px 16px;
    }

        .modal-header .modal-title {
            font-size: 1em;
            white-space: normal;
        }

    .modal-body {
        padding: 16px;
    }

    .modal-footer {
        display: grid;
        grid-template-columns: 1fr;
        padding: 12px 16px;
    }

        .modal-footer .btn {
            width: 100%;
        }

    .modal-body.modal-body-scrollable {
        max-height: calc(100vh - 180px);
    }

    .portfolio-modal .modal-dialog,
    .modal-fullscreen .modal-dialog {
        width: 100%;
        height: 100%;
        margin: 0;
    }

    .portfolio-modal .modal-content,
    .modal-fullscreen .modal-content {
        min-height: 100%;
        border-radius: 0;
    }

    .modal .close-modal,
    .portfolio-modal .close-modal {
        top: 14px;
        right: 14px;
    }
}

/*************************************************************************/
/* COMPACT MODAL                                                         */
/*************************************************************************/

.modal.modal-compact {
    --modal-control-height: 30px;
    --modal-control-font-size: 11px;
    --modal-control-padding-y: 4px;
    --modal-control-padding-x: 8px;
}

    .modal.modal-compact .form-control {
        height: var(--modal-control-height);
        min-height: var(--modal-control-height);
        padding: var(--modal-control-padding-y) var(--modal-control-padding-x);
        font-size: var(--modal-control-font-size);
        line-height: 20px;
    }
    .modal.modal-compact .bootstrap-select > .dropdown-toggle {
        min-height: var(--modal-control-height);
        padding: var(--modal-control-padding-y) 28px var(--modal-control-padding-y) var(--modal-control-padding-x);
        font-size: var(--modal-control-font-size);
        line-height: 20px;
    }
    .modal.modal-compact .input-group-addon {
        padding: var(--modal-control-padding-y) var(--modal-control-padding-x);
        font-size: var(--modal-control-font-size);
    }