/* Force 100% height for all parent tags */
html, body {
    height: 100%;
    min-height: 100%;
}

html {
}

/* prevent horizontal overflow and set default background colour */
body {
    /*overflow-x: hidden;
    background: #eee;*/
}

/* hide asp.net tags. otherwise layout breaks */
.aspNetHidden {
    display: none;
}

/* Style .NET RadioButtonList and .NET CheckBoxList to match layout of Inline Bootstrap radio buttons */
/* RADIOS AND CHECKBOXES */
.dotNETRadio input[type="radio"],
.dotNETCheckbox input[type="checkbox"] {
    /*margin: 0 0.5em;*/
}

/* Style .NET RadioButtonList and .NET CheckBoxList to match layout of Inline Bootstrap radio buttons */
.dotNETRadioButtonList,
.dotNETCheckBoxList {
    padding-left: 0;
}

table.dotNETRadioButtonList td,
table.dotNETCheckBoxList td {
    display: flex;
}

.dotNETRadioButtonList input[type="radio"],
.dotNETCheckBoxList input[type="checkbox"] {
    display: inline-block;
    float: none;
    position: relative;
    margin-right: 0.5rem;
    margin-left: 0;
}

.dotNETRadioButtonList .aspNetDisabled label:not(:last-child),
.dotNETRadioButtonList > label:not(:last-child),
.dotNETRadioButtonList > span:not(:last-child) label,
.dotNETCheckBoxList .aspNetDisabled label:not(:last-child),
.dotNETCheckBoxList > label:not(:last-child),
.dotNETCheckBoxList > span:not(:last-child) label {
    margin-right: 1rem;
}


/* Apply checkbox disabled styling only to the label immediately following a checkbox */
.dotNETCheckBoxList .form-check-input[disabled] ~ .form-check-label,
.dotNETCheckBoxList .form-check-input:disabled ~ .form-check-label {
    cursor: default !important;
    opacity: unset !important;
}

.dotNETCheckBoxList .form-check-input[disabled] + .form-check-label,
.dotNETCheckBoxList .form-check-input:disabled + .form-check-label {
    cursor: not-allowed !important;
    opacity: .5 !important;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.scrollbar-none::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE and Edge */
.scrollbar-none {
    -ms-overflow-style: none;
}

/* Required Field Icon */
label.requiredField::after,
span.requiredField::after {
    margin-left: 0.5em;
    font-family: "Font Awesome 5 Pro";
    content: "*";
    color: var(--bs-danger);
}


/* Allow inline font awesome classes */
/* base button */
.btn {
    font-family: inherit !important;
}

    /* padding between font awesome and button / textbox text */
    .btn.fas::before,
    .btn.far::before,
    .btn.fal::before {
        font-family: "Font Awesome 5 Pro";
        margin-right: 0.3em;
        display: inline-flex;
        width: 1em;
        height: 1em;
        align-items: center;
        justify-content: center;
    }

    .btn.fas::before { /* Font Awesome Solid icon weight */
        font-weight: 900;
    }

    .btn.far::before { /* Font Awesome Regular icon weight */
        font-weight: 400;
    }

    .btn.fal::before { /* Font Awesome Light icon weight */
        font-weight: 300;
    }

    .btn.iconOnly.fas::before,
    .btn.iconOnly.far::before,
    .btn.iconOnly.fal::before {
        margin-right: 0;
    }

    /*prevent entire button from spinning */
    .btn.fa-spin {
        -webkit-animation: unset;
        animation: unset;
    }

        .btn.fa-spin::before {
            /*add spin to button icon */
            -webkit-animation: fa-spin 2s linear infinite !important;
            animation: fa-spin 2s linear infinite !important;
        }

/*.selectize-control .selectize-input.disabled {
    background-color: #e9ecef !important;
    opacity: 1 !important;
}*/

.form-row {
    margin-bottom: 0.5rem;
}

.form-gutter {
    /*--bs-gutter-x: 0.5rem;*/
    --bs-gutter-y: 0.5rem;
}

/* position items over top of bootstrap sticky positioned items */
.z-index-abovesticky {
    z-index: 1021;
}

.border-transparent {
    border-color: transparent !important;
}

/*************
Tablesorter - Default Theme - minimal styles
*************/
/* overall */
.tablesorter-default {
}

    /* header */
    .tablesorter-default th,
    .tablesorter-default thead td {
    }

    .tablesorter-default tfoot th,
    .tablesorter-default tfoot td {
        border: 0;
    }

    .tablesorter-default .header:not(.sorter-false),
    .tablesorter-default .tablesorter-header:not(.sorter-false) {
        background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
        background-position: center right;
        background-repeat: no-repeat;
        cursor: pointer;
        white-space: normal;
        padding-right: 1em;
        vertical-align: middle;
    }

    .tablesorter-default thead .headerSortUp,
    .tablesorter-default thead .tablesorter-headerSortUp,
    .tablesorter-default thead .tablesorter-headerAsc {
        background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7) !important;
        border-bottom-width: 2px !important;
    }

    .tablesorter-default thead .headerSortDown,
    .tablesorter-default thead .tablesorter-headerSortDown,
    .tablesorter-default thead .tablesorter-headerDesc {
        background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7) !important;
        border-bottom-width: 2px !important;
    }

    .tablesorter-default thead .sorter-false {
        background-image: none;
        cursor: default;
    }

    /* tfoot */
    .tablesorter-default tfoot .tablesorter-headerSortUp,
    .tablesorter-default tfoot .tablesorter-headerSortDown,
    .tablesorter-default tfoot .tablesorter-headerAsc,
    .tablesorter-default tfoot .tablesorter-headerDesc {
        border-top: #000 2px solid;
    }

/* ajax error row */
.tablesorter .tablesorter-errorRow td {
    text-align: center;
    cursor: pointer;
    background-color: #e6bf99;
}

/*************
Line clamp styles
*************/
.line-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.line-clamp-1 {
    -webkit-line-clamp: 1 !important;
    line-clamp: 1 !important;
}

.line-clamp-2 {
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
}

.line-clamp-3 {
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
}

.line-clamp-4 {
    -webkit-line-clamp: 4 !important;
    line-clamp: 4 !important;
}

.line-clamp-5 {
    -webkit-line-clamp: 5 !important;
    line-clamp: 5 !important;
}

/*************
Image Gallery. Thumbnail display with hoverable controls
*************/
.image-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

    .image-gallery > li {
        list-style: none;
        margin: 0;
        padding: 0;
        height: clamp(100px, 12em, 200px);
        position: relative;
        overflow: hidden;
    }

    .image-gallery li img {
        object-fit: cover;
        width: 100%;
        height: 100%;
        vertical-align: middle;
        border-radius: 5px;
        transform: scale(1.0);
        transition: -webkit-transform 300ms ease;
        transition: transform 300ms ease;
        transition: transform 300ms ease, -webkit-transform 300ms ease;
    }

    .image-gallery li:hover img {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
    }

    .image-gallery li .overlay-lower {
        padding: 0.25em;
        display: flex;
        flex-direction: row;
        align-items: center;
        position: absolute;
        bottom: 0;
        left: 0;
        background-color: rgba(255,255,255,0.7);
        width: 100%;
    }

        .image-gallery li .overlay-lower .imgName {
            flex-grow: 1;
            color: inherit;
            text-decoration: none;
        }

        .image-gallery li .overlay-lower .buttons {
            flex-grow: 0;
        }

    .image-gallery li .overlay-upper {
        padding: 0.25em;
        position: absolute;
        top: 0;
        right: 0;
        display: none;
    }

    .image-gallery li:hover .overlay-upper {
        display: block;
    }


/*************
Bootstrap Accordion modifiers for Image Gallery nested in folders
*************/
.accordion.accordion-image-gallery {
    --bs-accordion-btn-padding-x: 0.5rem;
    --bs-accordion-btn-padding-y: 0.5rem;
    --bs-accordion-btn-bg: var(--bs-gray-200);
    --bs-accordion-btn-color: var(--bs-dark);
    --bs-accordion-body-padding-x: 0.5rem;
    --bs-accordion-body-padding-y: 0.5rem;
    --bs-accordion-border-radius: 0;
    --bs-accordion-inner-border-radius: 0;
    --bs-accordion-border-color: var(--bs-gray-400);
}

    .accordion.accordion-image-gallery .accordion-body {
        padding-bottom: 1rem !important;
    }

    .accordion.accordion-image-gallery .accordion-button:hover {
        background-color: var(--bs-gray-300) !important;
        color: var(--bs-dark) !important;
    }

    .accordion.accordion-image-gallery .accordion-button .icon-folder {
        color: #FFE894;
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: #EECB4A;
        display: none;
        margin-right: 0.5em;
    }

    .accordion.accordion-image-gallery .accordion-button.collapsed .icon-folder-closed {
        display: block !important;
    }

    .accordion.accordion-image-gallery .accordion-button:not(.collapsed) .icon-folder-opened {
        display: block !important;
    }

    .accordion.accordion-image-gallery .accordion-button:not(.collapsed) {
        background-color: var(--bs-gray-200) !important;
        color: var(--bs-dark) !important;
    }

        .accordion.accordion-image-gallery .accordion-button:not(.collapsed)::after {
            background-image: var(--bs-accordion-btn-icon);
        }

/*************
Custom nav tabs 
*************/
.nav-tabs.nav-tabs-custom {
    --bs-nav-link-color: var(--bs-white);
    --bs-nav-link-hover-color: var(--bs-white);
    --bs-nav-tabs-link-active-color: var(--bs-primary);
    --bs-nav-tabs-link-active-bg: var(--bs-white);
    --bs-nav-tabs-link-active-border-color: var(--bs-border-color) var(--bs-border-color) var(--bs-border-color);
    --crm-nav-margin: 0 0.125rem 0 0;
    --crm-nav-link-bg: var(--bs-gray-600);
    --crm-nav-link-border-color: var(--bs-border-color) var(--bs-border-color) var(--bs-border-color);
}

.nav-tabs-custom .nav-item {
    margin: var(--crm-nav-margin);
}

.nav-tabs-custom .nav-link {
    background-color: var(--crm-nav-link-bg);
    border-color: var(--crm-nav-link-border-color);
}

.nav-tabs.nav-tabs-custom .nav-link:hover {
}

.nav-tabs-custom .nav-link.active,
.nav-tabs-custom .nav-item.show .nav-link {
    border-color: var(--bs-nav-tabs-link-active-border-color);
}



/*************
Custom tables 
*************/
.table.table-crm thead th,
.table.table-crm tbody th {
    background-color: var(--bs-gray-300) !important;
}


/* match selectize disabled style to standard input/select controls */
.selectize-control .selectize-input.disabled {
    background-color: var(--bs-secondary-bg) !important;
    opacity: 1 !important;
}


/*************
modal overlay
*************/
html:has(.modal-overlay) {
    /* remove the main scrollbar when dialog is open */
    overflow: hidden;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Adjust the opacity as needed */
    z-index: 1045; /* Ensure it is above other elements */
    pointer-events: none; /* Allow clicks to pass through */
}




/* Custom breadcrumbs for page title - final "active" item will be 100% width on new line */
.breadcrumb-title .breadcrumb-item + .breadcrumb-item::before {
    font-family: "Font Awesome 5 Pro";
    content: "\f105" !important;
    color: var(--bs-light);
}

.breadcrumb-title .breadcrumb-item.active {
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-basis: 100%;
    align-items: center;
}

    .breadcrumb-title .breadcrumb-item.active::before {
        padding: 0 !important;
        margin: 0 !important;
        content: "" !important;
    }


.custom-popover {
    --bs-popover-max-width: 30rem;
    --bs-popover-body-padding-x: 0.5rem;
    --bs-popover-body-padding-y: 0.5rem;
}


/* Permission Matrix */
.permissionMatrix {
}

    .permissionMatrix li.permission {
    }

        .permissionMatrix li.permission input[type="checkbox"] + .btn {
            color: var(--bs-danger) !important;
            background-color: var(--bs-white) !important;
            border-color: var(--bs-danger) !important;
        }

            .permissionMatrix li.permission input[type="checkbox"] + .btn label:after {
                margin: 0 0 0 0.50em !important;
                content: "\f0c8";
                font-family: "Font Awesome 5 Pro"
            }

        .permissionMatrix li.permission input[type="checkbox"]:checked + .btn {
            color: var(--bs-success) !important;
            background-color: var(--bs-white) !important;
            border-color: var(--bs-success) !important;
        }

            .permissionMatrix li.permission input[type="checkbox"]:checked + .btn label:after {
                content: "\f14a";
                font-family: "Font Awesome 5 Pro"
            }

    .permissionMatrix .btn[data-bs-toggle="collapse"]::after {
        content: "\f077";
        font-family: "Font Awesome 5 Pro";
        margin-left: 0.5em;
    }

    .permissionMatrix .btn.collapsed[data-bs-toggle="collapse"]::after {
        content: "\f078";
        font-family: "Font Awesome 5 Pro";
    }


.navbar-crm {
    background-color: var(--bs-light);
}

    .navbar-crm .navbar-nav {
        flex-wrap: wrap;
        gap: 0.25rem 0.5rem;
    }

        .navbar-crm .navbar-nav .nav-item {
            margin-top: 0.25rem;
            margin-bottom: 0.25rem;
        }

            .navbar-crm .navbar-nav .nav-item > .nav-link {
                padding: 0.5rem 0.5rem;
            }

                .navbar-crm .navbar-nav .nav-item > .nav-link:not(.btn) {
                    color: var(--bs-dark);
                    border-bottom: 0.3rem solid transparent;
                }

            .navbar-crm .navbar-nav .nav-item.active > .nav-link:not(.btn),
            .navbar-crm .navbar-nav .nav-item:hover > .nav-link:not(.btn) {
                /*background: var(--bs-white);*/
                border-bottom: 0.3rem solid var(--bs-primary);
            }

            .navbar-crm .navbar-nav .nav-item:hover > .nav-link.btn {
                color: var(--bs-btn-hover-color);
                background-color: var(--bs-btn-hover-bg);
                border-color: var(--bs-btn-hover-border-color);
            }


    .navbar-crm .dropdown-menu .dropdown-item {
        color: var(--bs-nav-link-color) !important;
        /*font-size: 0.875rem;*/
    }

    .navbar-crm .navbar-toggler:focus {
        text-decoration: none;
        outline: 0;
        box-shadow: none;
    }

/* Default state (closed eye) */
.peek-button .fa-eye-slash {
    display: none;
}

/* Peek state (open eye) */
.peek-button.peek-active .fa-eye {
    display: none;
}

.peek-button.peek-active .fa-eye-slash {
    display: inline;
}