:root {
    --admin-top-nav-height: 64px;
}


html {
    position: relative;
    min-height: 100%;
}

body {
    color: rgb(33, 37, 41, .9);
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    overflow-y: scroll;
}


.body-admin--pages {
    height: 100dvh;
    overflow: hidden;
}

    .body-admin--pages > form {
        height: 100%;
    }

        .body-admin--pages > form > .container-fluid {
            height: calc(100% - var(--admin-top-nav-height));
        }

            .body-admin--pages > form > .container-fluid > .row {
                height: 100%;
            }

.body-admin, header.navbar-admin {
    background: var(--Gradient-Blue, linear-gradient(180deg, #011A2C 25.85%, #396673 100%));
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

z

.form-control, .form-select {
    font-size: 14px;
}

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

.modal-title {
    color: #1f2937;
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.modal-subtitle {
    color: #6b7280;
    margin: .25rem 0 0;
    font-size: .875rem;
    line-height: 1.4;
    font-weight: normal;
}

.no-box-shadow:focus {
    box-shadow: none;
}

.green {
    color: #8CC63F;
}

.red {
    color: #dc3545;
}

fieldset
.text-danger a {
    color: rgb(220, 53, 69);
}

.text-danger a:hover {
    color: rgb(220, 53, 69);
    text-decoration: none;
}

button.link-button {
  all: unset;
  color: #2d4a53;
  cursor: pointer;
  text-decoration: underline;
  font-weight: normal;
  font-size: 1em;
  display: inline;
}

a, .popover-link {
    color: rgba(var(--Blue-Paynes-Gray), 1);
}


    a:hover {
        color: rgba(var(--Blue-Paynes-Gray), .8);
        cursor: pointer;
    }


    a.disabled, a.aspNetDisabled {
        color: rgba(var(--Blacks-Silver), 1) !important;
        cursor: default !important;
    }

    a.disabled, a.aspNetDisabled {
        background: none !important;
    }

    a.disabled, a:focus {
        outline: 0 !important;
    }

    a > span.fa {
        font-size: 1.3em;
    }

    a.btn-link {
        font-size: 14px;
        padding-top: 0;
    }

.navbar {
    border: 0 !important;
    list-style-type: none;
    z-index: 1030;
}

    .navbar a.white {
        color: #fff !important;
    }

    .navbar .fas {
        color: #fff;
        font-size: 1.6em;
    }

    .navbar .dropdown-toggle::after {
        border: 0;
        color: #fff;
        font: var(--fa-font-solid);
        content: "\f107";
        vertical-align: unset;
    }

    .navbar .dropdown-toggle.nav-link-initials::after {
        vertical-align: -.2rem;
    }


    .navbar a {
        color: rgba(var(--bs-th-navy-rgb), 1);
        padding: .5rem .7rem;
    }

        .navbar a:hover {
            color: rgba(var(--bs-th-navy-rgb), .8);
        }

.dropdown-menu i.fa, .dropdown-menu i.fas, .dropdown-menu i.fa-light {
    margin-right: .5rem;
    text-align: left;
    width: 20px;
}

.dropdown-menu {
    font-size: 14px;
}

    .dropdown-menu:focus {
        font-size: 14px;
    }

.dropdown-item {
    color: rgb(33, 37, 41, .8);
}

    .dropdown-item:focus {
        background-color: transparent;
    }

    .dropdown-item:active {
        background-color: initial;
        color: rgba(var(--bs-th-navy-rgb), 1);
    }

.main-wrapper {
    background-color: #fff;
    height: inherit;
    margin-top: var(--admin-top-nav-height);
}

.rounded-corner-wrapper {
    background-color: rgb(1, 26, 44);
    position: -webkit-sticky;
    position: sticky;
    top: 64px;
    z-index: 1019;
    height: 10px;
}

.rounded-corner {
    background-color: #fff;
    border-top-left-radius: 14px;
    height: 100%;
    width: 100%;
}

.section-wrapper {
    background-color: #fff;
    /* border-top-left-radius: 14px;*/
    padding: 0 1.5rem 3.5rem 1.5rem;
    min-height: calc(100vh - 74px);
}

    .section-wrapper.section-wrapper--pages {
        background-color: rgb(1, 26, 44);
        overflow: hidden;
        padding: 0;
        height: inherit;
    }

    .section-wrapper .subsection {
        border-radius: 4px;
        background: rgba(var(--Blue-Alice-White), 1);
        display: flex;
        padding: 8px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        align-self: stretch;
    }

    .section-wrapper .section-header {
        margin-bottom: 1rem;
    }

        .section-wrapper .section-header h5 {
            display: inline-block;
            margin-right: .7rem;
            color: var(--Black-Dark);
            /* Header 2 */
            font-family: DM Sans;
            font-size: 18px;
            font-style: normal;
            font-weight: 700;
            line-height: 24px; /* 133.333% */
        }

        .section-wrapper .section-header a {
            margin-right: .7rem;
        }



/***************************/


/* Main Action button */
.section-wrapper .main-action, 
.modal-content .main-action {
    float: right;
    display: flex;
    padding: 0.375rem .5rem;
    justify-content: center;
    align-items: center;
    gap: .3125rem;
    border-radius: 0.25rem;
    border: 0.0625rem solid rgba(var(--Blue-Paynes-Gray), 1);
    background: rgba(var(--Blue-Paynes-Gray), 1);
    color: #FFF !important;
    font-family: Inter;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 400;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .15s ease-in-out;
    line-height: 1rem;
}

.action-group .main-action {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}

/* Action Group for buttons*/
.action-group {
    display: flex;
    justify-content: flex-end;
    float: right;
    gap: 0.05rem;
    position: relative;
}

.action-group > .main-action:only-child {
  border: 0.0625rem solid rgba(var(--Blue-Paynes-Gray), 1);
  border-radius: 0.25rem;
}

/* Dropdown for placing next to a main action button within an action group */
.action-group__dropdown-wrapper {
    display: flex;
    align-items: center;
}

.action-group__dropdown-toggle {
    padding: 0.375rem 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Inter;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1rem;
    border-radius: 0.25rem;
    background: rgba(var(--Blue-Paynes-Gray), 1);
    border: 0.0625rem solid rgba(var(--Blue-Paynes-Gray), 1);
    color: #FFF;
    cursor: pointer;
    height: 100%;
}

.action-group__dropdown-toggle {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.action-group__dropdown-toggle i {
    font-size: 0.75rem;
    line-height: 1rem;
}

.action-group__dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0;
    background: #fff;
    z-index: 10;
    border: none;
    border-radius: 0 0 .25rem .25rem;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
    min-width: 100%;
    max-width: 100%;
    padding: .25rem;
}

.action-group__dropdown-wrapper:hover .action-group__dropdown-content,
.action-group__dropdown-content:hover {
    display: block;
}

.action-group__dropdown-content a {
    color: #333;
    display: flex;
    padding: 0.375rem 0.5rem;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-family: Inter;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1rem;
    text-decoration: none;
    overflow: hidden;
}

.action-group__dropdown-content a:hover {
  background: rgba(var(--Blue-Paynes-Gray), 0.1);
  border-radius: .25rem;
}

    
/****************************/



    .mobile-show {
        display: none;
    }

@media screen and (max-width: 481px) {
    .section-wrapper .main-action {
        float: none;
        width: auto;
    }

    .mobile-hide {
        display: none !important;
    }

    .mobile-show {
        display: inherit;
    }
}

.section-wrapper .main-action > i, .section-wrapper .secondary-action > i,
.modal-content .main-action > i, .modal-content .secdondary-action > i {
    font-size: 18px;
    padding-right: .2rem;
}

.section-wrapper .main-action:hover,
.modal-content .main-action:hover {
    background-color: rgba(var(--Blue-Paynes-Gray), .9);
    box-shadow: none;
    border-color: rgba(var(--Blue-Paynes-Gray), .9);
}

.section-wrapper .main-action:focus,
.modal-content .main-action:focus {
    background-color: rgba(var(--Blue-Paynes-Gray), .8);
    box-shadow: none;
    border-color: rgba(var(--Blue-Paynes-Gray), .8);
}

.section-wrapper .secondary-action,
.modal-content .secondary-action {
    display: flex;
    padding: 0.375rem .5rem;
    justify-content: center;
    align-items: center;
    gap: .3125rem;
    border-radius: .25rem;
    border: .0625rem solid rgba(var(--Blue-Alice-Blue), 1);
    background: rgba(var(--Blue-Alice-White), 1);
    color: rgba(var(--Blue-Paynes-Gray), 1) !important;
    /* Caption */
    font-family: Inter;
    font-size: .75rem;
    font-style: normal;
    font-weight: 400;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .15s ease-in-out;
    line-height: 1rem;
}

.section-wrapper .section-header div.actions {
    display: flex;
    flex-wrap: wrap;
    padding: 0px 32px 0 0;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    padding-top: 8px;
}

    .section-wrapper .section-header div.actions.tabbed {
        padding-bottom: 5px;
    }

        .section-wrapper .section-header div.actions.tabbed > div:not(.active) {
            padding-bottom: 5px;
        }

        .section-wrapper .section-header div.actions.tabbed > div.active > .highlight-tab {
            background-color: rgba(var(--Blue-Paynes-Gray), 1);
            height: 5px;
            border-radius: 20px;
            margin: 0 .7rem 0 0;
        }

@media (pointer:none), (pointer:coarse) {
    .section-wrapper .section-header div.actions.tabbed > div.active > .highlight-tab {
        margin: 0;
    }
}

.section-wrapper .section-header div.actions.breadcrumbs > div > a {
    margin-right: 0;
}

.section-wrapper .section-header div.actions.breadcrumbs > div:not(:last-child)::after {
    content: '>';
}

.section-wrapper .section-header div.actions > div {
    flex-shrink: 0;
}

.section-wrapper .section-header div.actions a {
    border-radius: 4px;
    color: rgba(var(--Blue-Paynes-Gray), 1);
    font-family: DM Sans;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    text-decoration: none;
    padding: 4px 6px 4px 6px;
    transform: translateZ(0);
}

    .section-wrapper .section-header div.actions a:hover {
        background: rgba(var(--Blue-Paynes-Gray), 0.04);
    }

    .section-wrapper .section-header div.actions a:not(.toggle):focus {
        background: rgba(var(--Blue-Paynes-Gray), 0.10);
    }

    .section-wrapper .section-header div.actions a.toggle:active {
        background: rgba(var(--Blue-Paynes-Gray), 0.10);
    }

    .section-wrapper .section-header div.actions a img {
        padding-bottom: .4rem;
    }

.section-wrapper h5.subheader {
    color: var(--Blacks-Eerie-Black);
    text-align: left;
    /* Header 3 */
    font-family: DM Sans;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 150% */
}

.section-wrapper .sticky-row {
    background-color: #fff;
    position: -webkit-sticky;
    position: sticky;
    top: 74px;
    z-index: 1019;
    padding-top: 0;
}

@media (pointer:none), (pointer:coarse) {
    .section-wrapper .sticky-row {
        position: relative;
        top: 0;
    }
}

@media screen and (max-width: 481px) {
    .section-wrapper .main-action {
        float: none;
        width: auto;
    }

    .section-wrapper .section-header a {
        margin-right: 0;
    }

    .mobile-hide {
        display: none;
    }

    .mobile-show {
        display: inherit;
    }
}

.ui-datepicker {
    z-index: 1056 !important;
}

.ui-datepicker-today {
    color: #000000;
    background-color: #cecece;
    border-color: #c0c0c0;
}

.dataTables_filter {
    display: none;
}

.data-table-filters {
    background-color: rgba(var(--Blue-Alice-White), 1);
    border-radius: 4px;
    margin-bottom: 1rem;
    padding: 8px;
}

    .data-table-filters .header {
        color: var(--Blacks-Eerie-Black);
        /* Header 3 */
        font-family: DM Sans;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 24px; /* 150% */
    }

        .data-table-filters .header a {
            color: inherit;
            text-decoration: none;
        }

            .data-table-filters .header a.secondary-action {
                background-color: #fff;
            }

            .data-table-filters .header a[aria-expanded=true] .fa-angle-down {
                display: none;
            }

            .data-table-filters .header a[aria-expanded=false] .fa-angle-up {
                display: none;
            }


        .data-table-filters .header i {
            padding-right: .25rem;
        }

    .data-table-filters label {
        color: var(--Blacks-Eerie-Black);
    }

    .data-table-filters > div {
        margin: 0 .25rem .25rem .25rem;
    }

    .data-table-filters hr {
        margin: 0 0 .4rem 0;
    }

.dataTables_wrapper .dataTables_length {
    margin-top: .3rem;
}

.table > thead > tr > th, table.dataTable.no-footer {
    border-bottom-color: #cecece;
}

.table > :not(:first-child) {
    border-top: 0;
}

.table > tbody > tr > td {
    border-bottom-color: #efefef;
}

.table span.fa, .table span.fas {
    font-size: 1.3em;
    margin: 0 .1rem;
}


.table-striped > thead > tr > th {
    background: #E9ECEF; 
    border: 0;
    color: var(--Black-Dark);
    /* Body */
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 128.571% */
}

.bs5-style-override .table-striped > thead > tr > th {
    background: #E9ECEF !important;
    color: var(--Black-Dark) !important;
}

.bs5-style-override .table-striped > thead > tr > th > div.dt-column-header {
    align-items: center;
}

.bs5-style-override .dt-processing.card {
    display: none !important;
}

.bs5-style-override div.dts div.dt-scroll-body, div.dts div.dataTables_scrollBody {
	/* background: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.025), rgba(0, 0, 0, 0.025) 10px, rgba(0, 0, 0, 0) 10px, rgba(0, 0, 0, 0) 20px); */
	background: #f8fafc;
}

/*.bs5-style-override .table.table-striped.dataTable {
    padding-bottom: 4rem;
}*/

.bs5-style-override .dtfc-top-blocker {
    background-color: transparent !important;
}

.bs5-style-override .dt-scroll-headInner {
    background-color: #E9ECEF !important
}

.table-striped > tbody > tr:nth-of-type(2n) > * {
    --bs-table-accent-bg: rgba(var(--Blue-Alice-White), 1) !important;
}

.table-striped > tbody > tr:nth-of-type(2n + 1) > * {
    --bs-table-accent-bg: #fff !important;
    box-shadow: inset 0 0 0 9999px rgba(255, 255, 255, 1) !important;
}

.table-striped > tbody > tr > td {
    vertical-align: middle;
}

    .table-striped > tbody > tr > td > a {
        display: inline-block;
        vertical-align: middle;
    }

    .table-striped > tbody > tr > td > label.custom-checkbox {
        margin-bottom: 20px;
    }

.dt-container.dt-bootstrap5 > div.row {
    margin-top: 0 !important;
}


table.dataTable thead th {
    padding-left: 10px;
}

.allow-reorder:hover {
    cursor: move;
}

.sort-arrows::before {
    color: #808080;
    font-family: 'FontAwesome';
    content: "\f0dc";
    padding-right: 1em;
}

.w-10 {
    width: 10%;
}

.w-20 {
    width: 20%;
}

.w-33 {
    width: 33%;
}

.w-66 {
    width: 66%;
}

.w-90 {
    width: 90%;
}

table.dataTable thead .no-icons .sorting_asc {
    background-image: none !important;
}

.navigation {
    margin-top: 3rem;
    text-align: center;
}

    .navigation input {
        margin: .25rem;
    }

.input-group-text button {
    font-size: .7rem;
}

.btn:hover, .btn:focus {
}

.btn-primary {
    padding: 6px 8px;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border-radius: 4px;
    border: 1px solid rgba(var(--Blue-Paynes-Gray), 1);
    background: rgba(var(--Blue-Paynes-Gray), 1);
    color: #FFF;
    /* Caption */
    font-family: Inter;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
    text-decoration: none;
}

    .btn-primary:hover, .btn-primary:focus {
        background-color: rgba(var(--Blue-Paynes-Gray), .8);
        box-shadow: none;
        border-color: rgba(var(--Blue-Paynes-Gray), 1);
    }

    .btn-primary:disabled {
        background-color: rgba(var(--Blue-Paynes-Gray), .4);
        border-color: rgba(var(--Blue-Paynes-Gray), .1);
    }

.btn-primary-blue {
    background-color: rgba(var(--Blue-Paynes-Gray), 1);
    border-color: rgba(var(--Blue-Paynes-Gray), 1);
    color: #fff;
}

    .btn-primary-blue:hover, .btn-primary-blue:focus {
        background-color: rgba(var(--Blue-Paynes-Gray), .8);
        box-shadow: none;
        color: #fff;
    }

    .btn-primary-blue:disabled {
        background-color: rgba(var(--Blue-Paynes-Gray), .4);
        border-color: rgba(var(--Blue-Paynes-Gray), .1);
    }

.btn-success {
    background-color: rgba(var(--bs-th-green-rgb), 1);
    border-color: rgba(var(--bs-th-green-rgb), 1);
}

    .btn-success:hover, .btn-success:focus {
        background-color: rgba(var(--bs-th-green-rgb), .8);
        border-color: rgba(var(--bs-th-green-rgb), 1);
        box-shadow: none;
    }

.btn-secondary {
    background-color: rgba(var(--Blue-Bleu-de-France), 1);
    border-color: rgba(var(--Blue-Bleu-de-France), 1);
    font-size: 13px;
}

    .btn-secondary:hover, .btn-secondary:focus {
        background-color: rgba(var(--Blue-Bleu-de-France), .8);
        box-shadow: none;
        border-color: rgba(var(--Blue-Bleu-de-France), 1);
    }

.btn-outline-primary {
    padding: 6px 8px;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border-radius: 4px;
    border: 1px solid rgba(var(--Blue-Alice-Blue), 1);
    background: rgba(var(--Blue-Alice-White), 1);
    color: rgba(var(--Blue-Paynes-Gray), 1);
    /* Caption */
    font-family: Inter;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
    text-decoration: none;
}

    .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
        background-color: rgba(var(--Blue-Paynes-Gray), 1);
        border-color: rgba(var(--Blue-Paynes-Gray), 1);
        color: #fff;
        box-shadow: none;
    }


.btn-outline-secondary {
    padding: 6px 8px;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border-radius: 4px;
    background-color: #fff;
    border-color: rgba(var(--Blue-Bleu-de-France), 1);
    color: rgba(var(--Blue-Bleu-de-France), 1);
    /* Caption */
    font-family: Inter;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
    text-decoration: none;
}

    .btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-outline-secondary:active {
        background-color: rgba(var(--Blue-Bleu-de-France), 1);
        border-color: rgba(var(--Blue-Bleu-de-France), 1);
        color: #fff;
        box-shadow: none;
    }


.btn-gray {
    background-color: rgba(204,204,204, .3);
    border-color: rgba(204,204,204, .3);
    color: rgba(120,120,120, 1);
}

.btn-outline-gray {
    border-color: #ccc;
    color: #a3a3a3;
}

    .btn-outline-gray:hover {
        color: rgba(var(--bs-th-blue-rgb), 1);
    }

.form-group-sm {
    margin-bottom: 1rem;
}

    .form-group-sm.required label:after {
        content: "*";
        color: #E00000;
        padding-left: .1rem;
    }

    .form-group-sm label {
        display: block;
        line-height: 1.2em;
        margin-bottom: 3px;
    }

        .form-group-sm label > a > span.fa {
            font-size: 1.05em;
        }


.required-section header:after {
    content: "*";
    color: red;
    padding-left: .2rem;
}




.app-icon {
    height: 60px;
    width: 60px;
}

.multiselect-container > li > a > label {
    color: initial;
    padding-left: 4px;
}

.custom-multiselect {
    background-color: #fff;
    border: 1px solid #cecece;
}

    .custom-multiselect.btn {
        text-align: left;
    }

.multiselect.dropdown-toggle::after {
    float: right;
    margin: 8px 8px;
}

.custom-multiselect-sm {
    font-size: 14px;
    padding: 4px 4px 4px 10px;
    cursor: default !important;
}

.custom-multiselect-m {
    background-color: #fff;
    border: 1px solid #cecece;
    cursor: default !important;
    font-size: 14px;
    text-align: left;
}

    .custom-multiselect-m.btn {
        padding: 6px 9px 5px 10px;
    }

    .custom-multiselect-m.multiselect.dropdown-toggle::after {
        float: right;
        margin: 9px 7px;
    }


.popover {
    max-width: 90%;
}

.popover-header {
    font-weight: 600;
}

.popover-body ul {
    margin-top: .8em;
}

    .popover-body ul li {
        padding-bottom: .5em;
    }

        .popover-body ul li span.fa {
            font-size: 1.3em;
        }

.popover-body-scroll {
    max-height: 300px;
    overflow-y: auto;
    width: 100%;
    white-space: pre-wrap;
    padding-right: 10px;
}

.accordion-button:not(.collapsed) {
    background-color: #254A79;
    color: #fff;
}

    .accordion-button:not(.collapsed)::after {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
        transform: rotate(-180deg)
    }

/******************
    
    NOTIFICATIONS
       
******************/
.notifications-badge, .messages-badge, .employee-badge, .employee-badge-switch {
    background-color: #E46F1A;
    border-radius: 10px;
    color: #fff;
    padding: 2px 5px;
    height: 14px;
    width: 14px;
    line-height: 14px;
    position: absolute; /* Position the badge within the relatively positioned button */
    top: 31px;
    left: 146px;
    z-index: 10000;
}

.chat-badge {
    background: #E46F1A;
    border-radius: 100px;
    display: flex;
    width: 24px;
    height: 24px;
    padding: 10px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    position: absolute; /* Position the badge within the relatively positioned button */
    top: 4px;
    left: 154px;
    opacity: 1;
    z-index: 1000;
}

.employee-badge {
    left: 36px;
    top: 8px;
}

.employee-badge-switch {
    height: 10px;
    width: 10px;
    padding: 2px;
    line-height: 10px;
    left: 22px;
    top: 50px;
}

.notifications-badge {
    left: 98px;
}

.nav-link:focus {
    outline: 0 !important;
}

.nav-item .message-badge {
    background-color: #E46F1A;
    border-radius: 10px;
    color: #fff;
    padding: 2px 5px;
    height: 14px;
    width: 14px;
    line-height: 14px;
    position: absolute; /* Position the badge within the relatively positioned button */
    top: 4px;
    left: 56px;
}

.nav-item .employee-change-request-badge {
    background-color: #EA4040;
    border-radius: 10px;
    color: #fff;
    padding: 2px 5px;
    height: 14px;
    width: 14px;
    line-height: 14px;
    position: absolute; /* Position the badge within the relatively positioned button */
    top: 4px;
    left: 56px;
}

.message-response-countold {
    background-color: #E46F1A;
    border-radius: 10px;
    color: #fff;
    padding: 2px 5px;
    line-height: 10px;
    height: 10px;
    width: 10px;
    position: relative; /* Position the badge within the relatively positioned button */
    top: -15px;
    right: -10px;
}

.message-response-count {
    /* circle shape, size and position */
    position: absolute;
    right: 1.7em;
    top: -.3em;
    min-width: 1.2em; /* or width, explained below. */
    height: 1.2em;
    border-radius: 0.8em; /* or 50%, explained below. */
    border: 0.05em solid white;
    background-color: #E46F1A;
    padding: 3px;
    /* number size and position */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8em;
    color: white;
    z-index: 100;
}

.message-response-count-dummy {
    padding: 3px;
    position: absolute;
    right: 1.4em;
    top: -1.0em;
}

.message-response-count-dummyold {
    padding: 2px 5px;
    position: relative; /* Position the badge within the relatively positioned button */
    top: -15px;
    right: -10px;
}

.app-notification-details {
    background-color: rgb(251,251,251);
    border: 1px solid #909090;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    bottom: 0;
    display: none;
    height: 500px;
    padding: 0;
    position: absolute;
    right: 154px;
    top: 60px;
    width: 350px;
    z-index: 2;
}

@media (max-width:428px) {
    .app-notification-details {
        right: 10px;
    }
}

.app-notification-details .header {
    background-color: #254A79;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    margin: 0;
    padding: 0;
}

    .app-notification-details .header h5 {
        color: #ffffff;
        margin: 0;
        padding: 20px;
    }

.app-notification-details .footer {
    background-color: #254A79;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    color: #fff;
    font-size: 14px;
    margin: 0;
    padding: 10px;
}

.app-notifications {
    list-style-type: none;
    margin: 0;
    padding: 0;
    height: 376px;
    overflow-y: auto;
}

    .app-notifications li {
        border-bottom: 1px solid #909090;
        color: #808080;
        float: none !important;
        font-size: 14px;
        padding: 15px 10px 15px 10px;
    }

        .app-notifications li div.app-notification-content {
            min-height: 84px;
        }

            .app-notifications li div.app-notification-content div {
                color: gray;
                font-size: 12px;
                padding: 6px 0 2px 0;
            }

        .app-notifications li div a:first-child {
            padding-right: 5px;
        }

        .app-notifications li.unread {
            background-color: rgba(37, 74, 121, .1);
            color: rgba(37, 74, 121, 1);
        }

            .app-notifications li.unread div.app-notification-content div {
                color: rgba(37, 74, 121, 1);
            }

.app-alerts-offcanvas {
    background-color: rgb(251,251,251);
    margin: 0;
    padding: 0;
}

    .app-alerts-offcanvas .offcanvas-header {
        background-color: rgb(251,251,251);
        padding: 20px;
    }

        .app-alerts-offcanvas .offcanvas-header .btn-close {
            opacity: 1;
        }

        .app-alerts-offcanvas .offcanvas-header h5 {
            color: #000;
            margin: 0;
            padding: 0;
        }

    .app-alerts-offcanvas .offcanvas-footer {
        background-color: rgb(251,251,251);
        padding: 10px;
        color: #000;
        font-size: 14px;
    }

    .app-alerts-offcanvas .app-alerts-details {
        background-color: rgb(251, 251, 251);
        border-top: 1px solid #909090;
        border-bottom: 1px solid #909090;
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: hidden;
        padding: 0;
        position: relative;
        width: 100%;
        height: 100% !important;
    }

    .app-alerts-offcanvas .app-alerts-wrapper {
        flex: 1;
        overflow-y: auto;
    }

        .app-alerts-offcanvas .app-alerts-wrapper .app-alerts {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow-y: auto;
            height: 100% !important;
        }

            .app-alerts-offcanvas .app-alerts-wrapper .app-alerts li {
                position: relative;
                border-bottom: 1px solid #909090;
                color: #808080;
                float: none !important;
                font-size: 14px;
                padding: 15px 10px 15px 25px;
            }

                .app-alerts-offcanvas .app-alerts-wrapper .app-alerts li:last-child {
                    border-bottom: none;
                }

                .app-alerts-offcanvas .app-alerts-wrapper .app-alerts li div.app-notification-content {
                    min-height: 84px;
                }

                    .app-alerts-offcanvas .app-alerts-wrapper .app-alerts li div.app-notification-content div {
                        color: #808080;
                        font-size: 12px;
                        padding: 6px 0 2px 0;
                    }

                .app-alerts-offcanvas .app-alerts-wrapper .app-alerts li div a:first-child {
                    padding-right: 5px;
                }

                .app-alerts-offcanvas .app-alerts-wrapper .app-alerts li.unread {
                    color: #282828;
                    padding-left: 25px;
                }

                    .app-alerts-offcanvas .app-alerts-wrapper .app-alerts li.unread::before {
                        position: absolute;
                        content: '';
                        width: 6px;
                        height: 6px;
                        background-color: #e46f1a;
                        border-radius: 6px;
                        top: 23px;
                        left: 10px;
                    }

                    .app-alerts-offcanvas .app-alerts-wrapper .app-alerts li.unread div.app-notification-content div {
                        color: #282828
                    }

.comments-badge {
    background-color: #E46F1A;
    border-radius: 10px;
    color: #fff;
    padding: 1px 6px;
    font-size: .6em;
    line-height: 20px;
    left: 6px;
    position: relative;
    bottom: 3px;
    z-index: 1000;
    width: 30px;
}

/******************
    
    CUSTOM CHECKBOXES
       
******************/
/* Customize the label (the container) */
.custom-checkbox {
    display: block;
    position: relative;
    padding-left: 26px;
    margin-bottom: 10px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    line-height: 21px !important;
}

    /* Hide the browser's default checkbox */
    .custom-checkbox input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

.bs5-style-override .custom-checkbox {
    margin-bottom: 20px;
}

.bs5-style-override tbody .select-checkbox {
    padding-left: 10px;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 22px;
    width: 22px;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #ced4da;
}

.checkmark-centered {
    left: 40%;
}

/* On mouse-over, add a grey background color */
.custom-checkbox:hover input ~ .checkmark {
    background-color: rgba(var(--Blue-Paynes-Gray), .5);
}

/* When the checkbox is checked, add a blue background */
.custom-checkbox input:checked ~ .checkmark {
    background-color: rgba(var(--Blue-Paynes-Gray), 1);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.custom-checkbox input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.custom-checkbox .checkmark:after {
    left: 6px;
    top: 1px;
    width: 9px;
    height: 15px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}


.custom-checkbox input:disabled ~ .checkmark {
    background-color: rgba(var(--Blacks-Silver), .3);
    border-color: rgba(var(--Blacks-Silver), .3);
}

.modal-loading {
    position: fixed;
    top: 0;
    left: 0;
    background-color: #c0c0c0;
    z-index: 2000;
    opacity: 0.8;
    filter: alpha(opacity=50);
    -moz-opacity: 0.8;
    min-height: 100%;
    width: 100%;
}

.loading {
    border: 5px solid #67CFF5;
    width: 300px;
    height: 300px;
    display: none;
    position: fixed;
    background-color: White;
    -webkit-transform: translate3d(0,0,0);
    z-index: 2009;
    padding: 10px;
    text-align: center;
    overflow-x: hidden;
    overflow-y: auto;
}

#loader {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background: rgba(0,0,0,0.75) url(../images/loading-circles.gif) no-repeat center center;
    z-index: 10000;
}

.modal-system-alert .modal-body {
    height: 500px;
}


.carousel-inner .carousel-item .details {
    overflow-y: auto;
    height: 94%;
}

.carousel-inner .carousel-item .do-not-display {
    height: 6%;
    padding-top: .3rem;
}

/*****************

TILES - BEGIN
    
******************/

.tile {
    height: 5.6em;
    text-align: center;
    margin-top: 1.5rem;
}

    .tile h1, .tile h4 {
        color: #ffffff;
        margin: 0 auto;
    }

    .tile h1 {
        font-size: 1.7em;
    }

    .tile h4 {
        font-size: 1.4em;
    }

    .tile .tile-header {
        border-bottom: 1px solid #ffffff;
        padding: .5em;
        height: 2.8em;
    }

    .tile .tile-body {
        height: 3.5em;
    }

    .tile .tile-header.green {
        background-color: rgba(140,198,63,1);
    }

    .tile .tile-body.green {
        background-color: rgba(140,198,63,1);
    }


    .tile .tile-header.orange {
        background-color: rgba(23, 152, 193,1);
    }

    .tile .tile-body.orange {
        background-color: rgba(23, 152, 193,1);
    }

    .tile .tile-header.blue {
        background-color: rgba(37, 74, 121);
    }

    .tile .tile-body.blue {
        background-color: rgba(37, 74, 121);
    }


/*****************

TILES - END
    
******************/

/*************
    Help Docs Styles - BEGIN
**************/

.help-doc-menu > div {
    position: fixed;
    width: 250px;
}

@media (max-width:768px) {
    .help-doc-menu > div {
        margin-bottom: 1rem;
        position: unset;
        width: auto;
    }
}

.help-header {
    background: #fff; /*#3e81ba; /*#576081*/
    padding-top: 5rem;
    /*padding-bottom: 5rem;*/
    /*color: #fff;*/
    margin-left: -20px;
    margin-right: -20px;
    margin-top: -5px;
}

.help-doc-menu .smoothScroll {
    line-height: 2;
}

.help-doc-menu #accordion {
    line-height: 0;
}

.faqs h1 {
    font-size: 28px !important;
    color: #3C5C9C;
    font-weight: 600;
    padding-top: 8rem;
    padding-bottom: 1rem;
    text-align: center;
}

.faqs h3 {
    font-size: 26px;
    font-weight: 600;
}

.faqs p {
    padding-bottom: .2rem;
}

#qs-general h1 {
    padding-top: 0;
}

.get-start h1 {
    font-size: 28px !important;
    color: #3C5C9C;
    font-weight: 600;
    padding-top: 8rem;
    padding-bottom: 1rem;
    text-align: center;
}

.get-start h3 {
    font-size: 26px;
    font-weight: 600;
}

.get-start h5 {
    margin-top: 2rem;
}

.get-start p {
    padding-bottom: .1rem;
}

#gsClientSetup h1 {
    padding-top: 0;
}


/*************
    Help Docs Styles - END
**************/



/*************

 Video Cards - BEGIN
        
**************/

#vids {
    margin-top: 2rem;
}

.vid-card {
    margin-top: 5rem;
    margin-bottom: 5rem;
}

    .vid-card .vid-card-image {
        overflow: hidden;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        -o-transform-style: preserve-3d;
        transform-style: preserve-3d;
        text-align: center;
    }


.vid-card {
    margin-top: 10px;
    position: relative;
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

    .vid-card:hover {
        -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2), 0 2px 10px 0 rgba(0, 0, 0, 0.16);
        -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2), 0 2px 10px 0 rgba(0, 0, 0, 0.16);
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2), 0 2px 10px 0 rgba(0, 0, 0, 0.16);
    }

    .vid-card .vid-card-content {
        padding: 10px;
        text-align: center;
    }

        .vid-card .vid-card-content .vid-card-category {
            color: #337AB7;
            font-size: 16px;
            font-weight: 300;
        }

        .vid-card .vid-card-content .vid-card-title, .vid-card-reveal .vid-card-title {
            font-size: 20px;
            font-weight: 200;
        }

    .vid-card .vid-card-action {
        padding: 20px;
        border-top: 1px solid rgba(160, 160, 160, 0.2);
    }

        .vid-card .vid-card-action a {
            font-size: 15px;
            color: #ffab40;
            text-transform: uppercase;
            margin-right: 20px;
            -webkit-transition: color 0.3s ease;
            -moz-transition: color 0.3s ease;
            -o-transition: color 0.3s ease;
            -ms-transition: color 0.3s ease;
            transition: color 0.3s ease;
        }

            .vid-card .vid-card-action a:hover {
                color: #ffd8a6;
                text-decoration: none;
            }

    .vid-card .vid-card-reveal {
        padding: 20px;
        position: absolute;
        background-color: #FFF;
        width: 100%;
        overflow-y: auto;
        /*top: 0;*/
        left: 0;
        bottom: 0;
        height: 100%;
        z-index: 1;
        display: none;
    }

        .vid-card .vid-card-reveal p {
            color: rgba(0, 0, 0, 0.71);
            margin: 20px;
        }

.vid-btn-custom {
    background-color: transparent;
    font-size: 18px;
}

/*************

 Video Cards - END
        
**************/

/***********************

   QUICK ADD EMPLOYEES

************************/

.quick-add-employee {
    border-bottom: 1px solid #cecece;
    margin-bottom: 8px;
    padding-bottom: 0;
}

@media (min-width:1200px) {

    .quick-add-employee label {
        display: none;
    }
}

.quick-add-employee:first-child label {
    display: inline-block;
}

.quick-add-employee:last-child {
    border-bottom: 0;
}

@media (max-width:768px) {
    .quick-add-controls {
        display: none !important;
    }
}

@media (min-width:769px) {
    .quick-add-controls-mobile {
        display: none;
    }
}



/***********************

   TOGGLE SWITCHES

************************/

.toggle-group label {
    margin-bottom: 0;
    padding-top: 7px;
}

.toggle-group label {
    font-size: 12px;
}

.toggle.btn-primary, .toggle-group .btn-primary {
    background-color: rgba(var(--Blue-Paynes-Gray), 1);
    border-color: rgba(var(--Blue-Paynes-Gray), 1);
}

.toggle-group .btn-light {
    background-color: #EDECED;
}

.toggle-group .toggle-handle {
    background-color: #fff;
    padding-left: 10px;
}


a[aria-expanded=true] .fa-chevron-right {
    display: none;
}

a[aria-expanded=false] .fa-chevron-down {
    display: none;
}


.selected-icon {
    border: 1px solid #c0c0c0;
    background-color: #1798C1;
    color: #ffffff;
    display: inline-block;
    height: 38px;
    width: 42px;
    padding: 2px;
    font-size: 22px;
    font-weight: 900;
    margin-right: .5rem;
    text-align: center;
}


.ss-main .ss-single-selected .placeholder {
    background-color: transparent;
    cursor: pointer;
    opacity: 1;
}

.ss-main {
    color: inherit;
    min-height: 31px;
}

    .ss-main .ss-values .ss-max {
        border-radius: 4px;
        border: 1px solid rgba(var(--Blue-Alice-Blue), 1);
        background: rgba(var(--Blue-Alice-White), 1);
        padding: 2px 8px;
        color: inherit;
        font-size: 1em;
        line-height: 1;
        padding: var(--ss-spacing-s) var(--ss-spacing-m);
    }

.ss-content .ss-list .ss-option.ss-disabled {
    background-color: #fff;
    color: rgba(0, 0, 0, .5);
    font-style: italic;
}

    .ss-content .ss-list .ss-option.ss-disabled:hover {
        color: rgba(0, 0, 0, .5);
    }

/***********************

    MESSAGE TEMPLATES

************************/
.message-template {
    border-top: 1px solid #cecece;
    padding: 10px 0 10px 0;
    width: 100%;
}

    .message-template:first-child, .message-template.jq-first-child {
        border-top: 0;
        padding: 0 0 10px 0;
    }

    .message-template .icon {
        color: #337ab7;
        font-size: 22px;
    }

    .message-template .template-name {
        color: #337ab7;
        font-weight: bold;
    }

    .message-template a {
        color: #337ab7;
        font-size: 16px;
        font-weight: 400;
        text-decoration: underline;
    }

        .message-template a:hover {
            text-decoration: none;
        }


/***********************

   MESSAGE COUNTS

************************/

.message-counts {
    border: 1px solid #cecece;
    padding: 5px 10px 10px 15px;
    border-radius: 5px;
    margin-top: 5px;
}

    .message-counts .icon {
        float: right;
        font-size: 1.3em;
        padding-top: .2rem;
    }

    .message-counts span {
        color: #808080;
        font-size: 1.4em;
        font-weight: 500;
    }

    .message-counts div {
        font-size: 26px;
        font-weight: 400;
        color: #BAB8B8;
    }

    .message-counts.green {
        border-left: 10px solid #8CC63F;
    }

    .message-counts.red {
        border-left: 10px solid #dc3545;
    }

    .message-counts.orange {
        border-left: 10px solid #254A79;
    }


@media (min-width:1200px) and (max-width:1400px) {

    .message-counts .icon {
        font-size: 26px;
        top: 5px;
    }

    .message-counts span {
        font-size: 20px;
    }

    .message-counts div {
        font-size: 18px;
    }
}



/**************************

DASHBOARD CARDS - BEGIN
 
****************************/

.no-underline {
    text-decoration: none;
}

.card {
    border: 1px solid #c0c0c0;
    border-radius: 5px;
    height: 150px;
    margin-top: 10px;
    padding: 0 10px 5px 10px;
}

    .card i.fa, .card i.fas {
        font-size: 2.3em;
    }

    .card h1, .card h3, .card h4, .card a {
        color: #707070 !important;
        margin-top: 25px;
        margin-bottom: 20px;
    }


    .card h3 {
        font-size: 1.5em !important;
        font-weight: bold;
        margin-bottom: 10px;
        margin-top: .5rem;
    }

.tileText {
    font-family: Roboto, sans-serif;
    font-size: 14px;
    color: #484848;
    font-weight: 500;
    height: 50px;
    margin-bottom: 5px;
}

@media (min-width:1200px) and (max-width:1500px) {

    .card h3 {
        font-size: 18px !important;
    }

    .card i.fa, .card i.fas {
        font-size: 30px;
    }

    .tileText {
        font-size: 13px;
    }
}

.card a {
    text-decoration: underline;
}

    .card a:hover {
        text-decoration: none;
    }

.card.gray {
    background-color: rgba(237,236,237,.5);
}

.card .card-icon {
    position: absolute;
    z-index: 0;
    top: .5rem;
    right: .5rem;
    opacity: 0.4;
    color: #707070;
}

.card .card-link {
    border-top: 1px solid #c0c0c0;
    font-size: 1em;
    padding: 10px 0 0 0;
    text-align: left;
}

    .card .card-link span.fa {
        color: rgba(var(--bs-th-blue-rgb), 1);
        font-size: 1em;
    }

/**************************

DASHBOARD CARDS - END
 
****************************/

/*************
         IMPERSONATION
        
**************/

.company-impersonation, .employee-impersonation {
    color: rgba(var(--Blue-Paynes-Gray), 1);
    text-align: center;
    /*background-color: #8CC63F;*/
    background-color: rgba(var(--Blue-Alice-Blue), 1);
    padding: 8px 4px 8px 4px;
    font-weight: 400;
    font-size: 16px;
    list-style-type: none;
    z-index: 1054;
    border-radius: 4px;
}

    .company-impersonation.company-impersonation-top {
        height: 44px;
        margin-left: 1rem;
        padding: 6px 10px;
    }


    .company-impersonation .company-name, .employee-impersonation .company-name {
        font-size: 1em;
        font-weight: 400;
        margin-left: 0;
    }

    .company-impersonation a, .employee-impersonation a {
        font-size: 1em;
        text-decoration: none;
        font-weight: 400;
        line-height: 1em;
        background-color: #62C0FF;
        color: #fff;
        border-radius: 4px;
        min-height: 32px;
        display: inline-block;
        padding: 6px 6px 3px 6px;
    }


    .company-impersonation.company-impersonation-top a {
        padding-top: 8px;
    }

    .company-impersonation a:hover, .employee-impersonation a:hover {
        color: #fff;
    }

    .company-impersonation a {
        clear: both;
    }

    .company-impersonation .fas, .employee-impersonation .fas {
        font-size: 1.1em;
        padding-right: 4px;
    }

    .company-impersonation div, .employee-impersonation div {
        line-height: 1em;
    }

.navbar .company-details {
    color: #fff;
    font-size: 1.4rem;
    margin-left: .2rem;
    padding-top: .4em;
    padding-right: .1em;
}

    .navbar .company-details:hover {
        color: #fff;
    }

/*************

 Impersonation - END
        
**************/


/********************
    
SINGLE SORTABLE LIST - BEGIN

********************/

#sortable {
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
    width: 90%;
}

    #sortable li {
        background-color: #efefef;
        margin: .5em;
        padding: .6em;
        font-size: 1.0em;
        min-height: 3em;
        border: 2px solid #cecece;
        text-align: left;
    }

        #sortable li span {
            position: absolute;
            margin-left: -.25em;
            margin-top: .3em;
        }

        #sortable li div {
            display: inline-block;
            margin-left: 1em;
        }


        #sortable li:hover {
            cursor: pointer;
        }

/********************
    
SINGLE SORTABLE LIST - END

********************/


/**************************

PORTAL CHECKBOXES - BEGIN
 
****************************/

.middle {
    width: 100%;
    text-align: left;
}

    .middle h1 {
        font-family: "Dax", sans-serif;
        color: gray;
    }

    .middle input[type="radio"], .middle input[type="checkbox"] {
        display: none;
    }

        .middle input[type="radio"] + .box, .middle input[type="checkbox"] + .box {
            border: 1px #cecece solid;
        }


        .middle input[type="radio"]:checked + .box, .middle input[type="checkbox"]:checked + .box {
            background-color: rgba(var(--bs-th-navy-rgb), 1);
        }

            .middle input[type="radio"]:checked + .box span, .middle input[type="checkbox"]:checked + .box span {
                color: white;
                transform: translateY(20px);
            }

                .middle input[type="radio"]:checked + .box span:before, .middle input[type="checkbox"]:checked + .box span:before {
                    transform: translateY(0px);
                    opacity: 1;
                }

    .middle .box {
        width: 215px;
        height: 110px;
        background-color: #fff;
        transition: all 250ms ease;
        will-change: transition;
        display: inline-block;
        text-align: center;
        cursor: pointer;
        position: relative;
        font-family: sans-serif;
        font-weight: 600;
        padding: 10px;
        margin: 0 !important;
    }

    .middle.small .box {
        height: 66px;
    }

    .middle.smallest .box {
        height: 86px;
        width: 86px;
    }

    .middle.large .box {
        width: 300px;
    }

    .middle .box:active {
        transform: translateY(5px);
    }

    .middle .box span {
        position: absolute;
        transform: translate(0, 5px);
        left: 0;
        right: 0;
        transition: all 300ms ease;
        font-size: 15px;
        user-select: none;
        top: -15px;
        padding: 10px 5px 10px 5px;
    }

        .middle .box span:before {
            font-size: 1em;
            font-family: FontAwesome;
            display: block;
            transform: translateY(-40px);
            opacity: 0;
            transition: all 300ms ease-in-out;
            font-weight: normal;
            color: white;
            padding-top: 2px;
        }

    .middle .front-end span:before {
        content: '\f00c';
    }

    .middle .back-end span:before {
        content: '\f00c';
    }

    .middle .box span .details {
        font-size: 15px;
        font-weight: 400;
    }

    .middle.smallest .box span i {
        margin-top: 5px;
        font-size: 28px;
    }


    .middle .middle-end span:before {
        content: '\f00c';
    }

    .middle p {
        color: #fff;
        font-family: "Dax", sans-serif;
        font-weight: 400;
    }

        .middle p span:after {
            content: '\f0e7';
            font-family: FontAwesome;
            color: yellow;
        }

    .middle label {
        display: inline;
    }


    .middle input[type="radio"]:checked + .box-disabled {
        background-color: #efefef !important;
    }

        .middle input[type="radio"]:checked + .box-disabled span, .middle input[type="radio"]:checked + .box-disabled span:before, .middle input[type="radio"] + .box-disabled span {
            color: #606060 !important;
        }

/**************************

PORTAL CHECKBOXES - END
 
****************************/

/************************

Portal Templates - Begin

************************/

.sortablePortalSelected, #sortablePortalAvailable {
    border: 1px solid #eee;
    width: 300px;
    min-height: 20px;
    list-style-type: none;
    margin: 0;
    padding: 5px 0 0 0;
    float: left;
}

    .sortablePortalSelected li, #sortablePortalAvailable li {
        margin: 0 3px 3px 3px;
        padding: 12px 0 12px 6px;
        font-size: 1em;
        height: 52px;
        width: 290px;
    }

        .sortablePortalSelected li div span.fa, #sortablePortalAvailable li div span.fa {
            font-size: 1.4em;
            text-align: center;
            width: 32px;
        }

    .sortablePortalSelected li {
        background-color: #ffffff;
        border-top: 1px solid #cecece;
        border-right: 1px solid #cecece;
        border-bottom: 1px solid #cecece;
        border-left: 3px solid #cecece;
        color: rgb(23, 152, 193);
    }

    #sortablePortalAvailable li {
        background-color: #ffffff;
        border-top: 1px solid #cecece;
        border-right: 1px solid #cecece;
        border-bottom: 1px solid #cecece;
        border-left: 3px solid #cecece;
        color: #808080;
    }

    .sortablePortalSelected li.no-selected-items {
        border: 0;
        height: 100px;
        text-align: center;
    }

/************************

Portal Templates - End

************************/

#wrapper {
    overflow-x: hidden;
}

#sidebar-wrapper {
    background-color: rgba(var(--bs-th-navy-rgb), 1);
    min-height: 100vh;
    margin-left: -15rem;
    transition: margin 0.25s ease-out;
}

    #sidebar-wrapper .sidebar-heading {
        padding: 0.875rem 1.25rem;
        font-size: 1.2rem;
    }

    #sidebar-wrapper .list-group {
        width: 15rem;
    }

#page-content-wrapper {
    min-width: 100vw;
}

body.sb-sidenav-toggled #wrapper #sidebar-wrapper {
    margin-left: 0;
}

@media (min-width: 768px) {
    #sidebar-wrapper {
        margin-left: 0;
    }

    #page-content-wrapper {
        min-width: 0;
        width: 100%;
    }

    body.sb-sidenav-toggled #wrapper #sidebar-wrapper {
        margin-left: -15rem;
    }
}

.side-nav .list-group-item {
    background-color: transparent;
    border: 0;
}

    .side-nav .list-group-item:hover {
        cursor: pointer;
    }

    .side-nav .list-group-item ul.nav-sub-menu {
        list-style-type: none;
    }

    .side-nav .list-group-item a {
        color: #EDECED;
    }

        .side-nav .list-group-item a:hover {
            color: #fff;
        }

        .side-nav .list-group-item a > span.fa, .side-nav .list-group-item a > span.fas {
            color: #EDECED;
            font-size: 1.3em;
            text-align: center;
            width: 44px;
        }

/*
    Profile - Notifications
*/

.table-notifications td {
    padding: 5px;
}

    .table-notifications td.details {
        background-color: #ffffff !important;
        border: 0 !important;
        width: 60%;
    }

    .table-notifications td.permissions {
        text-align: center;
        width: 20%;
    }




/***************

MODULES - EMNPLOYEE  

***************/

.modules a {
    text-decoration: none;
}


.module {
    border-top: 1px solid rgba(210,219,226, .5) !important;
    border-right: 1px solid rgba(210,219,226, .5) !important;
    border-bottom: 1px solid rgba(210,219,226, .5) !important;
    border-left: 6px solid rgba(210,219,226, .5) !important;
    padding: 12px 4px 12px 0 !important;
    border-radius: 8px;
    margin: 10px auto;
}

    .module .badge {
        /*position: absolute;
        top: -5px;
        right: 10px;
        padding: 8px 12px;
        border-radius: 50%;
        background: #ff0000;
        color: white;
        font-size: 16px;*/
        background-color: #fa3e3e;
        border-radius: 2px;
        color: white;
        padding: 0 5px;
        font-family: Tahoma;
        font-size: 16px;
        line-height: 24px;
        position: absolute; /* Position the badge within the relatively positioned button */
        top: -5px;
        right: 10px;
    }

    .module .message-details {
        color: #50585e;
        padding-left: 44px;
    }

    .module .moduleName, .module .moduleNameFab {
        color: #50585e;
        font-size: 12px;
        text-align: center;
    }

        .module .moduleName .module-text, .module .moduleNameFab .module-text {
            color: rgb(15,22,27);
            font-size: 17px;
        }

        .module .moduleName:before {
            font-family: 'FontAwesome';
            font-size: 1.9em;
            float: left;
            width: 40px;
            position: relative;
            top: -5px;
            padding-bottom: 14px;
        }

@media (max-width:415px) {



    .module {
        border-left: 1px solid #cecece;
        margin: 0;
    }

        .module .moduleName, .module .moduleNameFab {
            font-size: 14px;
        }

    .top-border {
        border-top: 1px solid #cecece;
    }

    .module .moduleName .module-text, .module .moduleNameFab .module-text {
        font-size: 16px;
    }

    .module .moduleName:before {
        font-size: 1.7em;
    }
}

@media (min-width:1200px) and (max-width:1300px) {
    .module .moduleName, .module .moduleNameFab {
        font-size: 15px !important;
    }
}



.module .moduleNameFab:before {
    font-family: 'Font Awesome 5 Brands';
    font-size: 34px;
    float: left;
    width: 50px;
}

.module .moduleName.fa-walking:before {
    content: "\f554";
    font: var(--fa-font-solid);
    font-size: 1.9em;
}


.module .moduleName.fa-spa:before {
    content: "\f5bb";
    font: var(--fa-font-solid);
    font-size: 1.9em;
}

.module .moduleName.fa-paw:before {
    content: "\f1b0";
}

.module .moduleName.fa-users-cog:before {
    content: "\f509";
    font: var(--fa-font-solid);
    font-size: 1.9em;
}

.module .moduleName.fa-user-friends:before {
    content: "\f500";
    font: var(--fa-font-solid);
    font-size: 1.9em;
}

.module .moduleName.fa-star:before {
    content: "\f005";
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
}


.module .moduleName.fa-mobile-alt:before {
    content: "\f3cd";
    font: var(--fa-font-solid);
    font-size: 1.9em;
}

.module .moduleName.fa-toolbox:before {
    content: "\f552";
    font: var(--fa-font-solid);
    font-size: 1.9em;
}

.module .moduleName.fa-tools:before {
    content: "\f7d9";
    font: var(--fa-font-solid);
    font-size: 1.9em;
}

.module .moduleName.fa-thumbs-up:before {
    content: "\f164";
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
}

.module .moduleName.fa-money-check-alt:before {
    content: "\f53d";
    font: var(--fa-font-solid);
    font-size: 1.9em;
}

.module .moduleName.fa-money-bill-wave:before {
    content: "\f53a";
    font: var(--fa-font-solid);
    font-size: 1.9em;
}


.module .moduleName.fa-user-hard-hat:before {
    content: "\f82c";
    font: var(--fa-font-solid);
    font-size: 1.9em;
}

.module .moduleName.fa-hospital-user:before {
    content: "\f80d";
    font: var(--fa-font-solid);
    font-size: 1.9em;
}

.module .moduleName.fa-user-injured:before {
    content: "\f728";
    font: var(--fa-font-solid);
    font-size: 1.9em;
}

.module .moduleName.fa-star-of-life:before {
    content: "\f621";
    font: var(--fa-font-solid);
    font-size: 1.9em;
}

.module .moduleName.fa-user-nurse:before {
    content: "\f82f";
    font: var(--fa-font-solid);
    font-size: 1.9em;
}

.module .moduleName.fa-laptop-house:before {
    content: "\e066";
    font: var(--fa-font-solid);
    font-size: 1.9em;
}

.module .moduleName.fa-hands-helping:before {
    content: "\f4c4";
    font: var(--fa-font-solid);
    font-size: 1.9em;
}

.module .moduleName.fa-user-shield:before {
    content: "\f505";
    font: var(--fa-font-solid);
    font-size: 1.9em;
}

.module .moduleName.fa-shield-check:before {
    content: "\f2f7";
    font: var(--fa-font-solid);
    font-size: 1.9em;
}

.module .moduleName.fa-shield-alt:before {
    content: "\f3ed";
    font: var(--fa-font-solid);
    font-size: 1.9em;
}

.module .moduleName.fa-house-user:before {
    content: "\e065";
    font: var(--fa-font-solid);
    font-size: 1.9em;
}

.module .moduleName.fa-medkit:before {
    content: "\f0fa";
}

.module .moduleName.fa-umbrella-beach:before {
    content: "\f5ca";
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
}

.module .moduleName.fa-head-side-brain:before {
    content: "\f808";
    font: var(--fa-font-solid);
    font-size: 1.9em;
}

.module .moduleName.fa-user-headset:before {
    content: "\f82d";
    font: var(--fa-font-solid);
    font-size: 1.9em;
}

.module .moduleName.fa-procedures:before {
    content: "\f487";
    font: var(--fa-font-solid);
    font-size: 1.9em;
}

.module .moduleName.fa-sign-out:before {
    content: "\f08b";
}

.module .moduleName.fa-columns:before {
    content: "\f0db";
}

.module .moduleName.fa-copy:before {
    content: "\f0c5";
}

.module .moduleName.fa-file-video-o:before {
    content: "\f1c8";
}

.module .moduleName.fa-copy:before {
    content: "\f0c5";
    font: var(--fa-font-solid);
    font-size: 1.9em;
}


.module .moduleName.fa-folder-o:before {
    content: "\f114";
}

.module .moduleName.fa-pencil-square:before {
    content: "\f14b";
}

.module .moduleName.fa-globe:before {
    content: "\f0ac";
}

.module .moduleName.fa-user-md:before {
    content: "\f0f0";
}

.module .moduleName.fa-check-square:before {
    content: "\f046";
}

.module .moduleName.fa-graduation-cap:before {
    content: "\f19d";
}

.module .moduleName.fa-users:before {
    content: "\f0c0";
}

.module .moduleName.fa-eye:before {
    content: "\f06e";
}

.module .moduleName.fa-calendar-alt:before {
    content: "\f073";
}

.module .moduleName.fa-smile:before {
    content: "\f118";
}

.module .moduleName.fa-dollar:before {
    content: "\f155";
}

.module .moduleName.fa-clock-o:before {
    content: "\f017";
}

.module .moduleName.fa-slack:before {
    content: "\f198";
}

.module .moduleName.fa-salesforce:before {
    content: "\f83b";
}

.module .moduleName.fa-sitemap:before {
    content: "\f0e8";
}

.module .moduleName.fa-briefcase:before {
    content: "\f0b1";
}

.module .moduleName.fa-recycle:before {
    content: "\f1b8";
}

.module .moduleName.fa-handshake:before {
    content: "\f2b5";
}

.module .moduleName.fa-hands-helping:before {
    content: "\f4c4";
}

.module .moduleName.fa-bicycle:before {
    content: "\f206";
}

.module .moduleName.fa-bank:before {
    content: "\f19c";
}

.module .moduleName.fa-car:before {
    content: "\f1b9";
}

.module .moduleName.fa-birthday-cake:before {
    content: "\f1fd";
}

.module .moduleName.fa-gift:before {
    content: "\f06b";
}

.module .moduleName.fa-plane:before {
    content: "\f072";
}

.module .moduleName.fa-smile:before {
    content: "\f118";
}


.module .moduleName.fa-wheelchair:before {
    content: "\f193";
}


.module .moduleName.fa-file-pdf:before {
    content: "\f1c1";
}

.module .moduleName.fa-thumb-tack:before {
    content: "\f08d";
}

.module .moduleName.fa-sticky-note-o:before {
    content: "\f24a";
}

.module .moduleName.fa-sticky-note:before {
    content: "\f249";
}

.module .moduleName.fa-dot-circle-o:before {
    content: "\f192";
}

.module .moduleName.fa-comment:before {
    content: "\f075";
}

.module .moduleName.fa-comment-dots:before {
    content: "\f27a";
}

.module .moduleName.fa-file:before {
    content: "\f15b";
}

.module .moduleName.fa-file-alt:before {
    content: "\f15c";
}

.module .moduleName.fa-envelope-o:before {
    content: "\f003";
}

.module .moduleName.fa-capsules:before {
    content: "\f46b";
    font: var(--fa-font-solid);
    font-size: 1.9em;
}

.module .moduleName.fa-clinic-medical:before {
    content: "\f7f2";
    font: var(--fa-font-solid);
    font-size: 1.9em;
}

.module .moduleName.fa-tablet-alt:before {
    content: "\f3fa";
    font: var(--fa-font-solid);
    font-size: 1.9em;
}

.module .moduleName.fa-hospital:before {
    content: "\f0f8";
    font: var(--fa-font-solid);
    font-size: 1.9em;
}

.module .moduleName.fa-folder-open:before {
    content: "\f07c";
    font: var(--fa-font-solid);
    font-size: 1.9em;
}

.module .moduleName.fa-desktop:before {
    content: "\f108";
    font: var(--fa-font-solid);
    font-size: 1.9em;
}

.module .moduleName.fa-coins:before {
    content: "\f51e";
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
}

.module .moduleName.fa-comment-dots:before {
    content: "\f4ad";
    font: var(--fa-font-solid);
    font-size: 1.9em;
}

.module .moduleName.fa-comment-medical:before {
    content: "\f7f5";
    font: var(--fa-font-solid);
    font-size: 1.9em;
}

.module .moduleName.fa-crutch:before {
    content: "\f7f7";
    font: var(--fa-font-solid);
    font-size: 1.9em;
}

.module .moduleName.fa-file-prescription:before {
    content: "\f572";
    font: var(--fa-font-solid);
    font-size: 1.9em;
}

.module .moduleName.fa-fingerprint:before {
    content: "\f577";
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
}

.module .moduleName.fa-glasses:before {
    content: "\f530";
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
}

.module .moduleName.fa-hand-holding-medical:before {
    content: "\e05c";
    font: var(--fa-font-solid);
    font-size: 1.9em;
}

.module .moduleName.fa-hand-holding-heart:before {
    content: "\f4be";
    font: var(--fa-font-solid);
    font-size: 1.9em;
}

.module .moduleName.fa-hand-holding-usd:before {
    content: "\f4c0";
    font: var(--fa-font-solid);
    font-size: 1.9em;
}


.module .moduleName.fa-laptop-medical:before {
    content: "\f812";
    font: var(--fa-font-solid);
    font-size: 1.9em;
}

.module .moduleName.fa-notes-medical:before {
    content: "\f481";
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
}

.module .moduleName.fa-piggy-bank:before {
    content: "\f4d3";
    font: var(--fa-font-solid);
    font-size: 1.9em;
}

.module .moduleName.fa-pills:before {
    content: "\f484";
    font: var(--fa-font-solid);
    font-size: 1.9em;
}

.module .moduleName.fa-poll:before {
    content: "\f681";
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
}

.module .moduleName.fa-prescription:before {
    content: "\f5b1";
    font: var(--fa-font-solid);
    font-size: 1.9em;
}

.module .moduleName.fa-prescription-bottle-alt:before {
    content: "\f486";
    font: var(--fa-font-solid);
    font-size: 1.9em;
}


.module .moduleName.fa-syringe:before {
    content: "\f48e";
    font: var(--fa-font-solid);
    font-size: 1.9em;
}

.module .moduleName.fa-tooth:before {
    content: "\f5c9";
    font: var(--fa-font-solid);
    font-size: 1.9em;
}

.module .moduleName.fa-wallet:before {
    content: "\f555";
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
}


.module-parent.moduleName::after, .module .moduleNameFab::after {
    font-family: 'FontAwesome';
    font-size: 20px;
    content: "\f105";
    float: right;
    color: rgba(210,219,226, 1);
}



.module.policy {
    border-top: 6px solid #cecece;
    border-bottom: 1px solid #cecece;
    border-left: 1px solid #cecece;
    border-right: 1px solid #cecece;
    width: 100%;
    padding: 10px;
    margin: 15px auto;
    text-align: center;
}

    .module.policy .carrier-logo-wrapper {
        height: 60px;
        padding: 5px 0;
    }

        .module.policy .carrier-logo-wrapper img, #divCarrierLogo img {
            max-height: 60px;
            max-width: 150px;
        }


    .module.policy img {
        max-width: 150px;
    }

    .module.policy .plan-name {
        font-size: 20px;
        padding-top: 10px;
        pointer-events: none;
        text-decoration: none;
        color: inherit;
    }

    .module.policy a {
        text-decoration: underline;
    }

        .module.policy a:hover {
            text-decoration: none;
        }

        .module.policy a[href^="tel:"] {
            text-decoration: none;
        }

.module.blue span {
    color: #337ab7 !important;
}


.module.gray span {
    color: #888888 !important;
}

.subModuleWrapper {
    background-color: #ffffff;
    border-top: 1px solid #cecece;
    border-bottom: 1px solid #cecece;
    margin-bottom: 50px;
    padding: 15px;
}


    .subModuleWrapper .btn-link {
        margin-top: 0;
        margin-left: 0;
        margin-bottom: 3px;
    }


/*
    Login styles
*/

.form-signin-body {
    display: flex;
    align-items: center;
    padding-top: 40px;
    padding-bottom: 40px;
}

.form-signin {
    width: 100%;
    max-width: 330px;
    padding: 15px;
    margin: auto;
}

    .form-signin .checkbox {
        font-weight: 400;
    }

    .form-signin .form-floating:focus-within {
        z-index: 2;
    }

    .form-signin input[type="email"] {
        margin-bottom: -1px;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
    }

    .form-signin input[type="password"] {
        margin-bottom: 10px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }


/***************************************

PEOPLE REPORT - BEGIN 
    
************************************/

.pr-page-header-wrapper {
    display: block;
    position: relative;
    font-size: 2.2em;
    font-weight: 400;
    margin: .6rem auto;
    width: 100%;
    text-align: center;
}

.pr-page-header {
    display: inline-block;
    width: auto;
}

    .pr-page-header.no-width {
        width: auto;
    }

.pr-page-subheader {
    color: #000000;
    font-size: .7em;
    float: right;
    padding: .3em .5em 0 0;
    text-align: right;
    width: 350px;
}

.pr-logo img {
    max-height: 80px;
    padding-bottom: 1rem;
    width: auto;
}

@media (max-width: 810px) {
    .pr-logo > div {
        text-align: center;
    }
}

.pr-card {
    border: 1px solid #ddd;
    border-radius: 20px;
    height: 100%;
    text-align: center;
}

.pr-card-header {
    padding: .6em 0 .5em .4em;
    border-radius: 10px 10px 0 0;
    background-color: transparent;
    border-bottom: 1px solid #ddd;
    font-size: 1.2em;
    font-weight: 500;
    text-align: left;
}

    .pr-card-header .btn-trends {
        color: rgba(var(--bs-th-navy-rgb), 1);
        float: right;
        font-size: .8em;
        margin-right: .5rem;
        padding: 0;
    }

.pr-card-content-wrapper {
    height: 100%;
    padding: 1.35em .5em;
    text-align: center;
    margin: 0 auto;
    width: 100%;
}

.pr-card-inner {
    background-color: rgba(var(--bs-th-navy-rgb), 1);
    border: 0px solid rgb(59, 89, 152, .9);
    border-radius: 16px;
    color: #ffffff;
    font-size: 1.2em;
    margin: 0;
    padding: .5em 0;
    width: 100%;
}

    .pr-card-inner div {
        font-size: .9em;
        line-height: 1em;
    }

        .pr-card-inner div.pr-card-turnover, .pr-card-inner div.pr-card-engagement {
            font-size: 1em;
        }

    .pr-card-inner a {
        color: #ffffff;
    }

        .pr-card-inner a:hover {
            text-decoration: none;
        }

.pr-card-inner-header {
    border-bottom: 1px solid #ffffff;
    font-size: 1em !important;
    padding: .4em 0;
}

.pr-card-inner .pr-card-turnover, .pr-card-inner .pr-card-engagement {
    display: flex;
}

.pr-card-turnover > div, .pr-card-engagement > div {
    text-align: center;
    width: 33%;
}


.pr-card-inner .pr-card-inner-value {
    font-size: 1.6em;
    font-weight: 400;
    line-height: 1.3em;
}

    .pr-card-inner .pr-card-inner-value .pr-card-small-text {
        font-size: .5em;
    }

.pr-card-button-wrapper {
    margin: 1em auto 0 auto;
    width: 100%;
}

.pr-card-graph-wrapper {
    background-color: #ededed;
    border-radius: 20px;
    font-size: 1em;
    padding: .75em;
    margin: 1em auto .2em auto;
}

    .pr-card-graph-wrapper.small {
        font-size: 1em;
    }

    .pr-card-graph-wrapper .change-from {
        display: inline;
    }

@media (min-width:1000px) and (max-width:1300px) {

    .pr-card-graph-wrapper .change-from {
        display: block;
    }
}


.pr-card-spark-line-wrapper {
    background-color: #ffffff;
    border-radius: 20px;
    height: 100px;
    margin-bottom: .5em;
    padding: .3em .4em 1em .4em;
    width: 100%;
}

.survey-questions-change-spark-line-wrapper {
    padding: .3em .3em 1em .3em;
    height: 70px;
    width: 100%;
}

    .pr-card-spark-line-wrapper .spark-line, .survey-questions-change-spark-line-wrapper .spark-line {
        display: inline-block;
        margin: 0 auto;
        padding: 0;
        text-align: center;
        width: 96%;
        z-index: 9999;
    }

.pr-card-spark-line-wrapper .start-date, .pr-card-spark-line-wrapper .end-date {
    display: inline;
    font-size: .9em;
    margin-top: .5em;
}

.pr-card-spark-line-wrapper .start-date {
    float: left;
    padding-left: .1em;
}


.pr-card-spark-line-wrapper .end-date {
    float: right;
    padding-right: .1em;
}

.pr-progress-wrapper, .pr-progress-wrapper-scroll {
    overflow-y: auto;
    padding: .5em;
    height: 300px;
    width: 100%;
}

.pr-progress-wrapper-scroll {
    height: 98%;
}

@media (max-width:600px) {
    .pr-progress-wrapper {
        overflow-y: unset;
        height: auto;
    }
}

.pr-progress-wrapper.no-data {
    background-image: url('../images/pr-graph-unavailable.jpg');
    background-position: center center;
    background-repeat: no-repeat;
}

.table-turnover td.no-data {
    height: 228px;
    padding-top: .5em;
}

.pr-progress-wrapper.no-data, .table-turnover td.no-data {
    color: #313030;
    font-size: 1.4em !important;
    text-align: center;
    word-break: normal;
}

    .pr-progress-wrapper.no-data .instructions, .table-turnover td.no-data .instructions {
        display: block;
        font-size: .7em;
        padding: .25em;
    }

    .pr-progress-wrapper.no-data .btn-get-started, .table-turnover td.no-data .btn-get-started, .pr-no-data-modal .btn-get-started {
        background-color: rgb(59, 89, 152, .9);
        border-color: rgb(59, 89, 152, .9);
        border-radius: 6px;
        color: #ffffff;
        font-size: .7em !important;
        margin-top: 15px;
        padding: 12px 8px;
        text-decoration: none;
    }


    .pr-progress-wrapper.no-data .far, .table-turnover td.no-data .far {
        padding-right: 8px;
    }

.pr-card-button-wrapper {
    margin: 1rem auto 0 auto;
    width: 100%;
}

    .pr-card-button-wrapper a {
        width: 100%;
        font-size: 1.5em;
    }

.pr-popover-details {
    padding: 3px;
    height: 116px;
    width: 280px;
}

    .pr-popover-details div {
        display: block;
        line-height: 1.2em;
    }

    .pr-popover-details h5 {
        margin: 10px 0 3px 0;
        padding: 0;
        font-weight: 600;
    }

    .pr-popover-details.large {
        height: 100%;
        max-width: 320px;
    }

    .pr-popover-details ul {
        list-style: none;
        margin-top: 5px;
        padding-left: 0;
    }

    .pr-popover-details span.data-label {
        float: left;
        width: 80%;
        overflow: hidden;
        white-space: nowrap;
        text-align: left;
    }

    .pr-popover-details span.data {
        float: left;
        width: 20%;
        overflow: hidden;
        text-align: right;
    }

    .pr-popover-details span.data-label:after {
        content: "    .........................................................."
    }


.pr-data-check-modal .pr-data-check-turnover-costs {
    text-align: center;
}

    .pr-data-check-modal .pr-data-check-turnover-costs label {
        display: block;
        font-size: 1em;
        font-weight: 400;
    }

    .pr-data-check-modal .pr-data-check-turnover-costs div > div {
        color: #606060;
        display: inline-block;
        font-weight: 600;
        padding: 0 10px 6px 10px;
        text-align: center;
    }

.pr-data-check-modal .pr-data-check-point {
    clear: both;
    margin-top: 60px;
    padding-top: 6px;
}

    .pr-data-check-modal .pr-data-check-point h3 {
        color: #606060 !important;
        font-size: 1.2em !important;
        margin-bottom: 4px;
    }

        .pr-data-check-modal .pr-data-check-point h3 span.fa, .pr-data-check-modal .pr-data-check-point h3 span.fas {
            margin-right: 4px;
        }


        .pr-data-check-modal .pr-data-check-point h3 > span > span {
            font-weight: 400;
        }

.pr-data-check-modal .pr-danger {
    color: #e46f1a;
}

.pr-data-check-modal .pr-warning {
    color: #fda633;
}

.pr-data-check-modal .pr-success {
    color: #8CC63F;
}

.pr-data-check-modal .pr-danger-bg {
    background-color: #e46f1a;
}

.pr-data-check-modal .pr-warning-bg {
    background-color: #fda633;
}

.pr-data-check-modal .pr-success-bg {
    background-color: #8CC63F;
}

.pr-data-check-modal .pr-danger-border {
    border-color: #e46f1a;
}

.pr-data-check-modal .pr-warning-border {
    border-color: #fda633;
}

.pr-data-check-modal .pr-success-border {
    border-color: #8CC63F;
}

.pr-data-check-next {
    color: rgba(var(--bs-th-blue-rgb), 1);
}



.pr-data-check-modal .pr-data-check-point .pr-data-check-point-chart {
    float: left;
    padding-left: 10px;
    vertical-align: top;
    width: 100%;
}

    .pr-data-check-modal .pr-data-check-point .pr-data-check-point-chart h3 {
        margin-top: 0 !important;
    }

    .pr-data-check-modal .pr-data-check-point .pr-data-check-point-chart > div {
        border-width: 1px;
        border-style: solid;
        border-radius: 4px;
    }


        .pr-data-check-modal .pr-data-check-point .pr-data-check-point-chart > div > div {
            height: 22px;
        }

@media (max-width:414px) {


    .pr-data-check-modal .pr-data-check-point .pr-data-check-point-chart {
        width: 100%;
    }



    .pr-data-check-modal .pr-data-check-point h3 {
        font-size: 1em !important;
    }
}

@media (max-width:809px) {
    .pr-data-check-actions {
        display: none;
    }
}

@media (max-width:1024px) {
    .pr-survey-questions-table {
        display: none;
    }
}

@media (min-width:1025px) {
    .pr-survey-questions-tiles {
        display: none;
    }
}

.pr-breadcrumb {
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
    border-radius: 15px;
    background: #fff;
    border: 1px solid #ddd;
}

    .pr-breadcrumb .breadcrumb {
        padding: 0;
        display: inline-block;
        background-color: #fff;
        margin: 12px;
        font-size: 1.1em;
    }

        .pr-breadcrumb .breadcrumb li {
            display: inline-block;
        }

        .pr-breadcrumb .breadcrumb > li + li::before {
            padding: 0 5px;
            color: #ccc;
            content: "/\00a0";
        }

    .pr-breadcrumb img {
        max-height: 50px;
        display: inline-block;
        margin-top: 10px;
        margin-right: 10px;
        float: right;
    }

    .pr-breadcrumb .pr-breadcrumb-subheader {
        margin-top: 12px;
        margin-right: 10px;
        float: right;
        font-size: 1.1em;
        width: auto;
    }

    .pr-breadcrumb .pr-breadcrumb-control {
        margin-right: 16px;
        float: right;
    }

        .pr-breadcrumb .pr-breadcrumb-control .form-group-sm .form-control {
            border-radius: 10px;
            height: 34px !important;
        }

.pr-survey-questions {
    border: 1px;
    border-spacing: 0;
    border-collapse: separate;
    border-radius: 20px;
    border-color: #ededed;
}

    .pr-survey-questions > tbody > tr:hover {
        cursor: pointer;
    }

    .pr-survey-questions > tbody > tr > td {
        border-color: #ededed;
        border-top-width: 1px;
        color: rgb(33, 37, 41, .9);
        font-size: 1.3em !important;
    }

        .pr-survey-questions > tbody > tr > td.total-employee-engagement {
            font-size: 1.3em !important;
            font-weight: 600;
            padding: .8rem;
        }

            .pr-survey-questions > tbody > tr > td.total-employee-engagement div.total-employee-engagement-sub {
                font-size: .8em !important;
                font-weight: normal;
            }

            .pr-survey-questions > tbody > tr > td.total-employee-engagement div.total-employee-engagement-response-rate {
                font-size: .8em !important;
                font-weight: normal;
                text-align: center;
            }


    .pr-survey-questions > tbody > tr:first-child > td {
        border-bottom: 4px solid #7cc5dc;
    }

    .pr-survey-questions > tbody > tr:nth-child(2) > td {
        border-top: 0;
    }


    .pr-survey-questions > tbody > tr:first-child > td:first-child {
        border-top-left-radius: 20px;
    }

    .pr-survey-questions > tbody > tr:first-child > td:last-child {
        border-top-right-radius: 20px;
    }

    .pr-survey-questions > tbody > tr:last-child > td:first-child {
        border-bottom-left-radius: 20px;
    }

    .pr-survey-questions > tbody > tr:last-child > td:last-child {
        border-bottom-right-radius: 20px;
    }

    .pr-survey-questions > tbody > tr > td.survey-questions-percentage {
        padding-top: 8px;
        text-align: center;
    }


    .pr-survey-questions td span.percentage, .pr-card.survey-question span.percentage {
        font-size: 2.2em;
        line-height: 1em;
    }

    .pr-survey-questions td div.percentage-change, .pr-card.survey-question div.percentage-change {
        font-size: 1.4em;
    }

    .pr-survey-questions td div.btn-wrapper, .pr-card.survey-question div.btn-wrapper {
        padding-top: .25em;
    }

    .pr-survey-questions td div .btn-dig-deeper, .pr-card.survey-question div .btn-dig-deeper {
        background-color: rgb(59, 89, 152, .9);
        border-color: rgb(59, 89, 152, .9);
        border-radius: 20px;
        color: #ffffff;
        font-size: .7em;
        padding: 12px 8px;
        text-align: center;
        text-decoration: none;
        width: 99%;
    }

.pr-card.survey-question .survey-questions-percentage {
    padding: .7em 0 .2em 0;
}

.pr-card.survey-question div.btn-wrapper a {
    font-size: .9em;
}



.pr-survey-questions td div.last-survey, .pr-card.survey-question div.last-survey {
    color: #606060;
    font-size: .8em;
}



.pr-survey-questions td .start-date, .pr-survey-questions td .end-date {
    display: inline;
    font-size: .8em;
    margin-top: .5em;
}

.pr-survey-questions td .start-date {
    float: left;
    padding-left: .3em;
}


.pr-survey-questions td .end-date {
    float: right;
    padding-right: .3em;
}

.pr-survey-questions td div.no-trend-data {
    font-size: .8em;
    font-style: italic;
    height: 100%;
}

.pr-survey-questions-mobile > tbody > tr > td {
    font-size: 1em !important;
}

    .pr-survey-questions-mobile > tbody > tr > td.change-text {
        font-size: .9em !important;
    }


@media (max-width:414px) {
    .pr-page-header {
        margin: 0 auto;
    }

    .pr-page-header-wrapper {
        font-size: 1.5em;
    }

    .pr-page-subheader {
        float: none;
        padding: .3em 0 0 0;
        text-align: center;
        width: auto;
    }

    .pr-card-content-wrapper {
        padding: 1.35em .75em;
    }

    .pr-breadcrumb .breadcrumb {
        font-size: 1em !important;
        margin-left: 4px !important;
        margin-right: 4px !important;
        padding-left: 10px;
    }

    .pr-breadcrumb .pr-breadcrumb-subheader {
        display: block;
        float: none;
        font-size: 1.1em;
        text-align: center;
    }

    .pr-breadcrumb a.btn-share {
        font-size: .9em;
        padding: 4px;
        width: 80px;
    }

    .pr-breadcrumb a.btn-data-check {
        font-size: .9em;
        padding: 4px;
        width: 108px;
    }

    .pr-card-header-large {
        font-size: 1.2em;
    }

    .pr-card-inner .pr-card-inner-header {
        font-size: .9em;
    }
}

.progress {
    background-color: #ededed;
    border-radius: 4px !important;
    box-shadow: none;
    height: 28px;
    margin-bottom: 0;
}

.progress-bar {
    background-color: rgba(var(--bs-th-navy-rgb), 1);
    border-radius: 4px !important;
}

.pr-progress-table {
    width: 100%;
}

    .pr-progress-table td.filtername {
        color: #333;
        line-height: 1em;
        padding-right: .2em;
        text-align: right;
        width: 35%;
    }

    .pr-progress-table td.bar {
        width: 40%;
    }

    .pr-progress-table td.filtervalue {
        color: #333;
        font-weight: 400;
        text-align: right;
        width: 25%;
    }

    .pr-progress-table td.filtername.lg {
        width: 27%;
    }

    .pr-progress-table td.bar.lg {
        width: 48%;
    }

    .pr-progress-table td.filtervalue.lg {
        text-align: center;
        width: 25%;
    }


    .pr-progress-table td.filtervalue a, .progress-bar-vertical-wrapper div a {
        color: #1798C1 !important;
        font-weight: normal !important;
        text-decoration: underline;
    }

        .pr-progress-table td.filtervalue a:hover, .progress-bar-vertical-wrapper div a:hover {
            text-decoration: none;
        }

    .pr-progress-table td {
        font-size: 1em;
        line-height: 1em;
        padding: 8px 2px 8px 2px;
        vertical-align: middle;
    }

.progress-bar-vertical-wrapper {
    color: #333;
    display: inline-grid;
    font-size: .9em;
    font-weight: 400;
    height: 98%;
    justify-items: center;
    text-align: center;
    width: 20%;
}

    .progress-bar-vertical-wrapper .progress-bar-label {
        clear: left;
        display: block;
        padding-top: .3em;
        max-width: 60px;
    }

.progress-bar-vertical {
    width: 36px;
    height: 212px;
    display: flex;
    align-items: flex-end;
    align-content: center;
    text-align: center;
}

    .progress-bar-vertical .progress-bar {
        width: 100%;
        height: 0;
        -webkit-transition: height 0.6s ease;
        -o-transition: height 0.6s ease;
        transition: height 0.6s ease;
    }


.table-turnover {
    border-radius: 0 0 0 20px;
    height: 100%;
    margin-top: 0 !important;
    width: 100%;
}


table.dataTable.table-turnover.no-footer {
    border-bottom-width: 0;
}

.table-turnover, .table-turnover td {
    border-collapse: collapse;
}

    .table-turnover thead {
        display: table; /* to take the same width as tr */
        width: calc(100% - 19px); /* - 19px because of the scrollbar width */
    }

    .table-turnover tbody {
        display: block; /* to enable vertical scrolling */
        height: 268px; /* e.g. */
        overflow-y: scroll; /* keeps the scrollbar even if it doesn't need it; display purpose */
    }

    .table-turnover > thead > tr > th {
        border-top: 0 !important;
        border-bottom: 0 !important;
        padding-right: 22px !important;
        text-align: left;
    }

    .table-turnover tr th, .table-turnover tr td {
        padding: 3px;
        word-break: break-all;
    }

    .table-turnover tr {
        display: table; /* display purpose; th's border */
        width: 100%;
        box-sizing: border-box; /* because of the border (Chrome needs this line, but not FF) */
        height: 36px;
    }

    .table-turnover td {
        text-align: left;
        border-bottom: none;
        border-left: none;
    }

    .table-turnover tr td a {
        color: #627AAD;
        font-size: 1em !important;
        text-decoration: underline;
    }

        .table-turnover tr td a:hover {
            text-decoration: none;
        }

    .table-turnover > thead > tr {
        height: 32px;
    }

.table-turnover-employee tbody {
    height: 232px; /* e.g. */
}

    .table-turnover-employee tbody tr, .table-survey-questions-manager tbody tr {
        background-color: transparent !important;
    }

.table-turnover-employee .employee-term-date {
    white-space: nowrap;
    width: 12%;
}

.table-turnover-employee .employee-name {
    width: 20%;
}

    .table-turnover-employee .employee-name .employee-termination-type-abbreviation {
        float: right;
        font-size: .9em;
        font-style: italic;
        line-height: 1.3em;
        padding-right: 10px;
    }

.table-turnover .employee-termination-type {
    white-space: nowrap;
    width: 10%;
}

.table-turnover-employee .employee-tenure {
    white-space: nowrap;
    width: 10%;
}

.table-turnover-employee .employee-department {
    width: 17%;
}

.table-turnover-employee .employee-location {
    width: 17%;
}

.table-turnover-employee .employee-manager {
    width: 14%;
}



.table-survey-questions-manager .manager {
    width: 20%;
}

.table-survey-questions-manager .department {
    width: 20%;
}

.table-survey-questions-manager .location {
    width: 20%;
}

.table-survey-questions-manager .score {
    width: 18%;
}

.table-survey-questions-manager .response-rate {
    width: 22%;
}


@media only screen and (max-width: 428px) {

    .table-turnover-employee .employee-term-date {
        width: 35%;
    }

    .table-turnover-employee .employee-name {
        width: 65%;
    }

    .table-turnover-employee .employee-tenure, .table-turnover .employee-termination-type {
        display: none;
    }

    .table-survey-questions-manager .manager {
        width: 40%;
    }

    .table-survey-questions-manager .score {
        text-align: center;
        width: 60%;
    }

    .table-survey-questions-manager .department, .table-survey-questions-manager .location, .table-survey-questions-manager .response-rate {
        display: none;
    }
}

@media only screen and (max-width: 1300px) {
    .table-turnover-employee .employee-department, .table-turnover-employee .employee-location, .table-turnover-employee .employee-manager {
        display: none;
    }
}



@media only screen and (min-width: 428px) {
    .table-turnover-employee .employee-name .employee-termination-type-abbreviation, .employee-termination-type-help {
        display: none;
    }
}


@media only screen and (max-width: 1024px) {

    .table-turnover thead {
        width: 100%;
    }
}

.pr-trend-chart-rotate {
    font-size: 1em;
    font-weight: 600;
    margin: 2em 3em 3em 3em;
    text-align: center;
}

@media (min-width:667px) {
    .pr-trend-chart-rotate {
        display: none;
    }
}


@media (max-width:666px) {
    .pr-trend-chart {
        display: none;
    }
}

@media (max-width: 1079px) {

    .pr-card-header.blue a.pie-chart-leader-link {
        display: none;
    }
}

@media (max-width: 1080px) {

    .pr-demo-legends {
        display: none;
    }
}

@media (max-width:1000px) {
    .change-column {
        display: none;
    }
}

.legend-column {
    float: left;
    height: 20px;
    width: 50%;
}

/* Clear floats after the columns */
.legend-row:after {
    content: "";
    display: table;
    clear: both;
}

.bar-chart-height {
    height: 320px;
    width: 98%;
}

.pie-chart-height {
    height: 280px;
    width: 98%;
}

.pie-chart-legend {
    display: flex;
    list-style: none;
    flex-wrap: wrap;
    margin-top: 10px;
    padding-left: 0;
}

    .pie-chart-legend li {
        text-align: left;
        flex: 50%;
    }

        .pie-chart-legend li > span.indicator {
            border-radius: 10px;
            height: 12px;
            width: 12px;
            display: inline-block;
            margin-right: 4px;
        }

        .pie-chart-legend li > span.title {
            cursor: pointer;
        }

@media (max-width:1000px) {


    .pie-chart-legend li {
        font-size: .8em;
    }
}


@media (min-width:1001px) and (max-width:1300px) {

    .pie-chart-legend li {
        font-size: .85em;
    }
}

.carousel-control-next, .carousel-control-prev, .carousel-control-next:hover, .carousel-control-prev:hover, .carousel-control-next:focus, .carousel-control-prev:focus {
    color: #707070;
}

.carousel-indicators {
    margin-bottom: -10px;
}

    .carousel-indicators [data-bs-target] {
        background-color: #707070;
    }

.table-turnover-data-details > thead > tr > th {
    border-bottom: 0 !important;
    border-top: 0 !important;
}

.table-turnover-data-details {
    display: block; /* to enable vertical scrolling */
    height: 400px; /* e.g. */
    overflow-y: scroll; /* keeps the scrollbar even if it doesn't need it; display purpose */
}

    .table-turnover-data-details thead th, .table-turnover-data-details tbody td {
        font-size: .9em !important;
    }

    .table-turnover-data-details .filtername {
        text-align: left;
        width: 20%;
    }

    .table-turnover-data-details .count {
        text-align: center !important;
        width: 9%;
    }

    .table-turnover-data-details .percentage {
        text-align: center !important;
        width: 17%;
    }

.pr-buttons a {
    float: right;
}


@media (max-width:414px) {

    .pr-buttons {
        margin: .25rem auto 1rem auto;
        text-align: center;
    }

        .pr-buttons a {
            float: none;
        }
}

/*******************

    EMPLOYEE NAVIGATION

********************/

.employee-nav-wrapper {
    background-color: #fff;
    z-index: 1053;
}

.employee-nav {
    background-color: #fff;
    border-bottom: 1px solid #D6D6D6;
    height: 78px;
    z-index: 1053;
}

    .employee-nav > div {
        padding-top: 0;
        padding-bottom: .5rem;
        padding-right: 1rem;
        padding-left: 1rem;
        text-align: center;
    }


    .employee-nav span.fa, .employee-nav span.fa-thin {
        font-size: 2em !important;
    }

    .employee-nav > div > div.link-wrapper > a, .employee-nav > div.link-wrapper .dropdown-toggle, .employee-nav > div > div.link-wrapper > div.dropdown > a {
        text-decoration: none;
    }

    .employee-nav .dropdown-menu a {
        text-decoration: none;
    }

    .employee-nav > div > div.link-wrapper .message-badge, .employee-nav > div > div.link-wrapper .assignments-badge {
        background-color: #E46F1A;
        border-radius: 10px;
        color: #fff;
        padding: 2px 5px;
        line-height: 14px;
        height: 14px;
        left: 42px;
        position: relative;
        top: 10px;
        z-index: 10000;
        width: 14px;
    }

    .employee-nav > div > div.link-wrapper .assignments-badge {
        left: 24px;
    }

.disabled-icon {
    cursor: default;
}

.employee-nav ul li {
    padding: 4px 4px 4px 8px;
}

    .employee-nav ul li i.fa-thin {
        font-size: 1.2em;
        margin-right: .3rem;
    }


.employee-nav-customization {
    display: flex;
    flex-wrap: wrap;
}

    .employee-nav-customization .employee-nav-colors {
        display: inline-flex;
        column-gap: 40px;
        flex-grow: 1;
        justify-content: space-between;
    }

        .employee-nav-customization .employee-nav-colors > div:nth-child(1) > div {
            float: left;
        }

        .employee-nav-customization .employee-nav-colors > div:nth-child(2) > div {
            float: right;
        }

    .employee-nav-customization .break {
        flex-basis: 100%;
        height: 0;
    }

    .employee-nav-customization .employee-nav-preview > div {
        display: inline-block;
        margin-top: 5px;
        padding: 0px 0px 25px 0px;
        border: 1px solid black;
        border-radius: 20px;
        width: max-content;
        max-width: fit-content;
    }

    .employee-nav-customization .employee-nav-preview a {
        pointer-events: none;
        cursor: default;
        display: inline-block;
    }

    .employee-nav-customization .employee-nav-preview > div > .employee-nav-wrapper > .float-start > .employee-nav {
        border-radius: 20px 20px 0px 0px;
    }



.employee-content {
    margin-top: 80px;
    margin-bottom: 80px;
}

.employee-content-impersonation {
    margin-top: 7.5rem !important;
}

.employee-content-impersonation-preview {
    margin-top: 9.5rem !important;
}


.employee-header > h1 {
    font-size: 1.7em;
    margin: 0 auto .5rem auto;
    text-align: center;
}

.employee-header > div {
    font-size: 1.2em;
    font-style: italic;
    text-align: center;
}

/*************
        
        RICH TEXT MODAL
        
        */

.rich-text-modal {
    max-height: 500px;
    overflow-y: auto;
    font-family: tahoma, arial, helvetica, sans-serif; /* tahoma default for WYSIWYG */
    font-size: 16px !important; /* 12pt default for WYSIWYG */
}

    .rich-text-modal img {
        max-width: 100%;
        height: auto;
    }

    .rich-text-modal a {
        color: rgba(var(--bs-th-blue-rgb), 1);
        text-decoration: underline;
    }

        .rich-text-modal a:hover {
            text-decoration: none;
        }

.employee-navigation-back-mobile {
    background-color: #fff;
    display: none;
}

.employee-nav-desktop-company-info {
    float: left;
    padding: .9rem 0 0 .9rem;
    position: fixed;
    width: 400px;
    z-index: 1054;
}

    .employee-nav-desktop-company-info > img {
        height: 50px;
        width: 50px;
    }

    .employee-nav-desktop-company-info > div {
        display: inline-block;
        font-size: 1.1em;
        font-weight: bold;
        line-height: 1.1em;
        max-height: 2.2em;
        max-width: 320px;
        padding-left: .3rem;
        vertical-align: middle;
        white-space: pre-wrap; /* css-3 */
        white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
        white-space: -pre-wrap; /* Opera 4-6 */
        white-space: -o-pre-wrap; /* Opera 7 */
        word-break: break-word;
    }

    .employee-nav-desktop-company-info .company-name-no-icon {
        padding-top: 1.1rem;
    }

@media (min-width:1001px) and (max-width:1400px) {

    .employee-nav-desktop-company-info {
        width: 300px;
    }

        .employee-nav-desktop-company-info > div {
            max-width: 220px;
        }
}

@media (min-width:578px) and (max-width:1000px) {

    .employee-nav-desktop-company-info {
        width: 230px;
    }

        .employee-nav-desktop-company-info > div {
            max-width: 150px;
            overflow: hidden;
        }
}

@media (max-width:577px) {

    .employee-nav {
        border-top: 1px solid #D6D6D6;
        border-bottom: 0px;
        height: 70px;
    }

        .employee-nav > div {
            padding-left: 0;
            padding-right: 0;
            padding-top: 0;
            padding-bottom: 3px;
            line-height: 14px;
            height: 100%;
            vertical-align: top;
            flex: 1 1 0;
            max-width: 82px;
        }

            .employee-nav > div > div.link-wrapper {
                padding-top: .7rem;
            }

            .employee-nav > div > div.link-wrapper-no-top-padding {
                padding-top: 0 !important;
            }

        .employee-nav span.fa-thin {
            font-size: 2em !important;
            line-height: 1em;
        }

        .employee-nav > div > div.link-wrapper > a, .employee-nav .dropdown-toggle {
            font-size: .65em !important;
            outline: 0;
        }

        .employee-nav > div > div.link-wrapper > div > .dropdown-toggle > span.text {
            display: inline-block;
            font-size: 1em !important;
            text-align: center;
            width: 100%;
        }

        .employee-nav > div > div.link-wrapper .message-badge, .employee-nav > div > div.link-wrapper .assignments-badge {
            padding: 5px 1px;
            line-height: 10px;
            height: 10px;
            top: 6px;
            width: 10px;
            left: 42px;
        }

        .employee-nav ul li i.fa-thin {
            width: 20px;
        }

    .employee-nav-desktop-company-info {
        padding: .5rem 0 0 .5rem;
        width: 100%;
    }

        .employee-nav-desktop-company-info .company-name-no-icon {
            padding-top: 0;
        }

    .employee-content {
        margin-top: 4rem;
        margin-bottom: 6rem;
    }

    .employee-header {
        margin-bottom: 0;
    }

        .employee-header > h1 {
            font-size: 1.4em;
        }

    .rich-text-modal {
        max-height: none;
        overflow-y: unset;
    }

    .employee-navigation-back-mobile {
        display: unset;
    }

    .employee-navigation-back-mobile {
        border-bottom: 1px solid #D6D6D6;
        line-height: 18px;
    }

        .employee-navigation-back-mobile > div > a {
            color: #373737;
            padding-left: 1rem;
            font-size: 2.5em;
            margin-top: 0;
            padding-left: .8rem;
            padding-bottom: 0.1rem;
            outline: none;
            line-height: 1em;
        }


            .employee-navigation-back-mobile > div > a.delete {
                font-size: 1.5em;
                padding-top: 0.8rem;
            }

        .employee-navigation-back-mobile a:focus {
            outline: none !important;
            box-shadow: none !important;
        }

    .employee-navigation-back-desktop, .employee-footer-desktop, .employee-message-delete {
        display: none;
    }

    .message-content img {
        width: 100%;
        height: auto;
    }

    .employee-nav-desktop-company-info {
        border-bottom: 1px solid #D6D6D6;
        padding-bottom: .5rem;
        background-color: #fff;
    }

        .employee-nav-desktop-company-info > img {
            height: 44px;
            width: 44px;
        }

        .employee-nav-desktop-company-info > div {
        }

    .employee-content-impersonation {
        margin-top: 6.5rem !important;
    }

    .mobile-message-back {
        float: left;
        margin-right: -1.5rem;
    }
}

.message-content img.file-icon {
    width: inherit;
    height: inherit;
}

.employee-comments-wrapper {
    border: 1px solid #D6D6D6;
    border-radius: .5rem;
    padding: 1.3em 1.3em 1.3em .7em;
}

.employee-comments {
    max-height: 500px;
    overflow-y: scroll;
}

@media screen and (max-width: 481px) {
    .employee-comments {
        height: auto;
    }
}



/*
    SURVEYS
    */

.agree-disagree, .yes-no, .ranking, .multiple-choice {
    border: 1px solid #ccc;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    border-collapse: collapse;
    border-spacing: 0;
    display: table;
}

.yes-no {
    width: 60%;
}

    .agree-disagree tr, .yes-no tr, .ranking tr {
        border: 1px solid #ddd;
        padding: 0;
    }

    .agree-disagree th, .agree-disagree td, .yes-no th, .yes-no td, .ranking th, .ranking td {
        padding: 10px;
        text-align: center;
        width: 20%;
    }

.ranking th, .ranking td {
    width: 10%;
}

.agree-disagree th, .yes-no th, .ranking th, .multiple-choice th {
    font-size: 1em;
    letter-spacing: 1px;
    color: #515151;
}



.highlight {
    background-color: #254A79;
    color: #ffffff !important;
}

    .highlight input {
        display: none;
    }

    .highlight::before {
        content: '\f058';
        font-family: FontAwesome;
        font-size: 1.3em;
        padding-right: 0;
    }

.radio-survey {
    -ms-transform: scale(1.5); /* IE 9 */
    -webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
    transform: scale(1.5);
}

@media screen and (max-width: 1200px) {

    .agree-disagree {
        border: 0;
    }

        .agree-disagree thead {
            display: none;
        }

        .agree-disagree th, .agree-disagree td {
            width: auto;
        }

        .agree-disagree tr {
            margin-bottom: 10px;
            display: block;
            border-bottom: 1px solid #ddd;
        }

        .agree-disagree td {
            display: block;
            text-align: left;
            font-size: 1em;
            border-bottom: 1px dotted #ccc;
        }

            .agree-disagree td:last-child {
                border-bottom: 0;
            }

            .agree-disagree td:after {
                content: attr(data-label);
                font-weight: bold;
                font-size: 1em;
                color: #515151;
                padding-left: 10px;
            }

            .agree-disagree td.highlight:after {
                color: #ffffff !important;
            }
}


.multiple-choice {
    border: 0;
}

    .multiple-choice thead {
        display: none;
    }

    .multiple-choice th, .multiple-choice td {
        padding: 10px;
        width: auto;
    }

    .multiple-choice tr {
        margin-bottom: 10px;
        display: block;
        border: 1px solid #ddd;
    }

    .multiple-choice td {
        display: block;
        text-align: left;
        font-size: 1em;
        border-bottom: 1px solid #eee;
    }

        .multiple-choice td:last-child {
            border-bottom: 0;
        }

        .multiple-choice td:after {
            content: attr(data-label);
            font-weight: bold;
            font-size: 1em;
            color: #515151;
            padding-left: 10px;
        }

        .multiple-choice td.highlight:after {
            color: #ffffff !important;
        }



@media screen and (max-width: 1100px) {

    .yes-no {
        border: 0;
        width: 100%;
    }

        .yes-no thead {
            display: none;
        }

        .yes-no th, .yes-no td {
            width: auto;
        }

        .yes-no tr {
            margin-bottom: 10px;
            display: block;
            border-bottom: 1px solid #ddd;
        }

        .yes-no td {
            display: block;
            text-align: left;
            font-size: 1em;
            border-bottom: 1px dotted #ccc;
        }

            .yes-no td:last-child {
                border-bottom: 0;
            }

            .yes-no td:after {
                content: attr(data-label);
                font-weight: bold;
                font-size: 1em;
                color: #515151;
                padding-left: 10px;
            }

            .yes-no td.highlight:after {
                color: #ffffff !important;
            }
}

@media screen and (max-width: 767px) {

    .ranking {
        border: 0;
    }

        .ranking thead {
            display: none;
        }

        .ranking th, .ranking td {
            width: auto;
        }

        .ranking tr {
            margin-bottom: 10px;
            display: block;
            border-bottom: 1px solid #ddd;
        }

        .ranking td {
            display: block;
            text-align: left;
            font-size: 1em;
            border-bottom: 1px dotted #ccc;
        }

            .ranking td:last-child {
                border-bottom: 0;
            }

            .ranking td:after {
                content: attr(data-label);
                font-weight: bold;
                font-size: 1em;
                color: #515151;
                padding-left: 10px;
            }

            .ranking td.highlight:after {
                color: #ffffff !important;
            }
}


.assignment-tile {
    display: inline-block;
    padding: 12px 10px 12px 6px !important;
    width: 100%;
}

    .assignment-tile .assignment-due-date {
        float: left;
        vertical-align: top;
        width: 15%;
    }

    .assignment-tile .assignment-details {
        float: left;
        vertical-align: top;
        width: 80%;
    }

    .assignment-tile .assignment-arrow {
        float: left;
        font-family: 'FontAwesome';
        font-size: 20px;
        text-align: right;
        width: 5%;
        color: rgba(210,219,226, 1);
        padding-top: .7rem;
    }

    .assignment-tile .assignment-due-date .day {
        font-size: 2em;
        font-weight: bold;
        text-align: center;
        line-height: 1em;
        padding-bottom: .2rem;
    }

    .assignment-tile .assignment-due-date .month {
        font-size: 1.2em;
        font-weight: normal;
        text-align: center;
        line-height: 1em;
    }

    .assignment-tile .assignment-description {
        font-weight: bold;
        font-size: 1.2em;
        line-height: 1.1em;
    }

/***************
                
OVERRIDE P BOTTOM MARGIN FOR WYSIWYG
               
**************/
.course-content p {
    font-size: 15px;
    margin-left: 0;
    margin-bottom: .75em !important;
}


.course-content img {
    max-width: 100%;
    height: auto;
}

.course-content iframe {
    max-width: 100%;
}

.course-section {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 5px;
    margin-top: 10px;
}

.question-header {
    border-bottom: 1px solid #cecece;
    margin-bottom: 10px;
    padding-bottom: 10px;
}

.course-page {
    margin-bottom: 0;
    font-size: 16px;
}

/*****************

RESPONSIVE VIDEO - BEGIN    
    
******************/

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

    .video-container iframe,
    .video-container object,
    .video-container embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 75%;
        height: 75%;
    }



.navigator {
    height: 40px !important;
    padding: 0 !important;
}

@media (max-width:600px) {

    .navigator {
        font-size: .8em !important;
    }
}


.radio input {
    height: 16px;
    width: 16px;
    margin-right: .4rem;
}

.radio label {
    display: inline;
}


/***************
                
EMPLOYEE DATATABLE PROFILE PIC AND INITIALS
               
**************/

.profile_pic-dt {
    width: 100%;
    float: none;
    margin: 0 auto;
}

.img-circle-dt.profile_img-dt {
    width: 100%;
    background: #fff;
    z-index: 1000;
    position: inherit;
    margin-top: 0;
    border: 1px solid rgb(115, 135, 156);
    padding: 0;
    border-radius: 55%;
}


.profile_initials-dt {
    border: 1px solid rgb(115, 135, 156);
    padding: 5px;
    font-weight: 700;
    font-size: 24px;
    text-align: center;
    color: #ffffff;
    width: 100%;
    border-radius: 55%;
    background-color: rgb(115, 135, 156);
}

/***************

Employee Tiles  

***************/

.ee-tile {
    border-top: 1px solid #cecece;
    border-right: 1px solid #cecece;
    border-bottom: 1px solid #cecece;
    border-left: 6px solid #cecece;
    margin: 10px auto;
    padding: 10px 2px 10px 10px;
    height: 90px;
}

    .ee-tile .btn {
        padding-left: 0;
    }

    .ee-tile div {
        line-height: 22px;
    }

    .ee-tile .profile-pic {
        width: 50px;
        margin-right: 15px;
    }

@media (max-width:375px) {
    .ee-tile {
        font-size: 15px !important;
    }

        .ee-tile .btn-link {
            font-size: 13px !important;
        }

        .ee-tile .profile-pic {
            width: 40px;
            margin-right: 10px;
        }

        .ee-tile .profile_initials-dt {
            font-size: 16px;
        }
}

@media (min-width:768px) {
    .hideOnComputer {
        display: none !important;
    }
}

.table-demographics-detail {
    width: 100%;
}

    .table-demographics-detail .entity-name {
        width: 100%;
    }

    .table-demographics-detail .count {
        text-align: center;
    }

/*******************

Scroll Snap - Begin

*******************/

.scroll-snap-container {
    display: flex;
    border: 0 solid;
    width: 96vw;
    height: 75vh;
    scroll-snap-type: x mandatory;
    overflow-x: auto;
    white-space: nowrap;
    position: relative;
    -webkit-overflow-scrolling: touch;
    align-items: flex-start;
    margin-top: .5rem;
}

    .scroll-snap-container::-webkit-scrollbar {
        display: none;
    }

.scroll-snap-item {
    margin: 0 4px 0 4px;
    display: flex;
    flex-direction: row;
    scroll-behavior: smooth;
    scroll-snap-align: center;
    justify-content: center;
    align-items: center;
    padding-right: 20px;
}

    .scroll-snap-item:first-child {
        margin-left: 0;
        padding-left: 0;
    }

    .scroll-snap-item div.pr-card {
        width: 330px;
        height: 460px;
        justify-content: center;
        align-items: center;
    }


/*******************

Scroll Snap - End

*******************/
.integrations > div > div {
    border: 1px solid #ccc;
    border-radius: 8px;
    margin: 6px auto;
    padding: 6px;
    text-align: center;
    font-size: 1vw;
}

    .integrations > div > div > img {
        height: 44px;
        width: 44px;
    }

.integration-merge {
    cursor: pointer;
}

.integration-current {
}

    .integration-current img {
        max-height: 36px;
        padding-right: 1rem;
    }

/*****

    OVERRIDE TINY MCE
*********/
.tox .tox-mbtn__select-label {
    margin: 0 1px !important;
}


/************************

    DIRECT MESSAGE

************************/

.direct-message-wrapper {
    min-height: 120px;
    padding: 8px 0;
}

@media (min-width:768px) {
    .direct-message-wrapper {
        border: 1px solid #cecece;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        height: 500px;
        overflow-y: scroll;
    }
}

.direct-message-response {
    clear: both;
    margin: 0 .8em 1em .8em;
    width: 85%;
}

.direct-message {
    background-color: rgba(237,236,237,.8);
    padding: 1em;
    border-top-right-radius: 14px;
    border-bottom-right-radius: 14px;
    border-bottom-left-radius: 14px;
}

.direct-message-response .date {
    font-style: italic;
    padding: .25rem 0 0 .25rem;
}

.direct-message-response.me {
    float: right;
}

    .direct-message-response.me .direct-message {
        background-color: rgba(23, 152, 193, .8);
        color: #ffffff;
        border-top-right-radius: 0;
        border-top-left-radius: 14px;
        border-bottom-right-radius: 14px;
        border-bottom-left-radius: 14px;
    }

.module span.ee-direct-message {
    color: rgba(var(--bs-th-blue-rgb), 1) !important;
    font-style: italic;
    float: right;
    padding-right: .5rem;
}

.direct-message-badge {
    background-color: #E46F1A;
    border-radius: 50%;
    color: #fff;
    display: inline-block;
    padding: 2px 5px;
    margin-bottom: 2px;
    margin-left: 2px;
    height: 12px;
    width: 12px;
    vertical-align: middle;
}

.dashboard-actions {
}

    .dashboard-actions div.actions {
        border-radius: 10px;
        margin-top: 1em;
        padding: .5em 1em 1.25em 1em;
        text-align: center;
    }

        .dashboard-actions div.actions.analytics {
            margin-right: .5rem;
        }



    .dashboard-actions h1 {
        font-size: 2rem;
        margin-bottom: 0;
    }


@media (min-width:450px) and (max-width:1200px) {
    .dashboard-actions h1 {
        font-size: 1rem;
    }
}


.dashboard-actions .actions {
    background-color: rgba(var(--Blue-Alice-White), 1);
    border-radius: 4px;
    margin-bottom: 1rem;
    padding: 8px;
}

    .dashboard-actions .actions > div > div {
        border-right: 1px solid rgba(var(--bs-th-navy-rgb), 1);
        padding: 0 1.2em;
    }

        .dashboard-actions .actions > div > div:last-child {
            border-right: 0;
        }

    .dashboard-actions .actions .title {
        font-size: 1.2em;
        font-weight: bold;
        margin-bottom: .5em;
        text-align: left;
    }

        .dashboard-actions .actions .title a {
            float: right;
            font-size: .8em;
            font-weight: normal;
            padding-top: .25em;
        }

.recent-activity {
    background-color: rgba(237,236,237,.5);
    border: 1px solid #c0c0c0;
    border-radius: 10px;
    color: rgba(var(--bs-th-navy-rgb), 1);
    padding: 1.2em;
    max-height: 460px;
    overflow-y: scroll;
}

    .recent-activity > div {
        padding: .5em 0;
    }

        .recent-activity > div > span.fa {
            font-size: 1.5em;
            font-weight: bold;
        }

        .recent-activity > div > h5 {
            display: inline;
            font-size: 1.3em;
            font-weight: bold;
            padding-left: .5em;
        }

.dashboard-employees {
    background-color: rgba(var(--bs-th-navy-rgb), 1);
    border-radius: 10px;
    color: #fff;
    height: 100%;
    padding: .75em 1em .75em 1em;
    width: 330px;
}

    .dashboard-employees .title {
        color: #fff;
        font-size: 1.2em;
        font-weight: bold;
        margin-bottom: .25em;
        text-align: left;
    }


        .dashboard-employees .title a {
            color: #fff;
            float: right;
            font-size: .9em;
            font-weight: normal;
        }


    .dashboard-employees > div > div {
        text-align: left;
    }

        .dashboard-employees > div > div:last-child {
            border-right: 0;
        }

    .dashboard-employees .active {
        font-size: 1.2rem;
        line-height: 1.3rem;
        margin: .5rem 0 0 0;
        text-align: center;
    }

        .dashboard-employees .active h1 {
            font-size: 3rem;
            line-height: 3.1rem;
        }

    .dashboard-employees .total {
        text-align: center;
    }

        .dashboard-employees .total > span.fa {
            font-size: 5rem;
        }

    .dashboard-employees .classifications {
        margin-top: .5rem;
    }

        .dashboard-employees .classifications > div {
            text-align: center;
        }

            .dashboard-employees .classifications > div > h1 {
                font-size: 1.75rem;
            }



.dashboard-employee-statistics table {
    width: 310px;
}

    .dashboard-employee-statistics table .title {
        border-bottom: 1px solid #ccc;
    }

.dashboard-employee-statistics > table > thead > tr > th, .dashboard-employee-statistics > table > tbody > tr > td {
    padding-left: 0;
    padding-right: 0;
    text-align: left;
}

.dashboard-employee-statistics > table > tbody > tr:first-child > td {
    padding-top: .5rem;
}

.dashboard-employee-statistics > table > tbody > tr > td {
    padding-bottom: .5rem;
}



/*********************************
    COMPANY DASHBOARD - BEGIN
*********************************/

.dashboard-wrapper {
    margin: auto;
    max-width: 1600px;
    width: auto;
}

/* Dashboard Shortcuts */

.dashboard-shortcuts {
    background-color: rgba(var(--Blue-Alice-White), 1);
    background-size: contain;
    border-radius: 12px;
    border: 1px solid rgba(var(--Blue-Alice-Blue), 1);
    padding: 8px;
    min-height: 186px;
    height: auto;
}

    .dashboard-shortcuts > .dashboard-cards {
        align-items: stretch;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
    }

.dashboard-cards > div {
    background-color: rgba(var(--Blue-Paynes-Gray), 1);
    border-color: rgba(var(--Blue-Paynes-Gray), 1);
    border-radius: 10px;
    display: table;
    flex: 1 1 256px;
    margin: 10px;
    text-align: center;
}

    .dashboard-cards > div > a > div > span.icon-duotone {
        font-size: 60px;
    }

    .dashboard-cards > div > a > div:nth-of-type(2) {
        padding-top: .2rem;
    }

    .dashboard-cards > div > a > div > span.title {
        font-family: DM Sans;
        font-size: 18px;
        font-weight: 400;
    }

    .dashboard-cards > div > a > div.employee-count {
        align-items: center;
        display: flex;
        flex-direction: column;
        height: 90px;
        justify-content: center;
    }

        .dashboard-cards > div > a > div.employee-count > div > span {
            display: block;
            font-family: DM Sans;
        }

            .dashboard-cards > div > a > div.employee-count > div > span:nth-of-type(1) {
                font-size: 36px;
                font-weight: 700;
                line-height: 40px;
            }

            .dashboard-cards > div > a > div.employee-count > div > span:nth-of-type(2) {
                font-size: 16px;
                font-weight: 400;
                line-height: 20px;
                opacity: 60%;
            }

    .dashboard-cards > div a {
        color: #fff;
        display: table-cell;
        padding: .5rem 0 1.1rem 0;
        vertical-align: middle;
        width: 100%;
    }

    .dashboard-cards > div:hover {
        background-color: rgba(var(--Blue-Paynes-Gray), .9);
        box-shadow: none;
        border-color: rgba(var(--Blue-Paynes-Gray), .9);
    }

    .dashboard-cards > div:focus-within {
        background-color: rgba(var(--Blue-Paynes-Gray), .8);
        box-shadow: none;
        border-color: rgba(var(--Blue-Paynes-Gray), .8);
    }

/* Dashboard Overview - Parent class to "Recent Activity", "Recent Messages", and "Getting Started" */

.dashboard-overview {
    display: flex;
    flex-wrap: wrap;
    min-height: 526px;
    height: auto;
    gap: 20px;
}

/* Dashboard Recent Activity */

.dashboard-company-activity {
    display: flex;
    flex: 1 1 570px;
    flex-direction: column;
    margin-top: 20px;
    row-gap: 20px;
}

    .dashboard-company-activity > div.header, .dashboard-recent-messages > div.header {
        column-gap: 20px;
        display: inline-flex;
        flex-direction: row;
    }

        .dashboard-company-activity > div.header > h4, .dashboard-recent-messages > div.header > h4 {
            align-self: start;
            flex: 0 1 auto;
            font-family: DM Sans;
            font-size: 20px;
            font-weight: 700;
            margin: 0;
            padding: 2px 0 2px 0;
        }

        .dashboard-company-activity > div.header > div {
            align-self: stretch;
            flex: 1 0 auto;
        }

    .dashboard-company-activity > div.activity-type {
        align-items: stretch;
        background-color: rgba(var(--Blue-Alice-White), 1);
        background-size: contain;
        border-radius: 12px;
        border: 1px solid rgba(var(--Blue-Alice-Blue), 1);
        display: flex;
        flex: 1 1 160px;
        flex-direction: column;
        height: auto;
        padding: 8px;
    }

        .dashboard-company-activity > div.activity-type > div.header {
            display: flex;
            justify-content: start;
        }

            .dashboard-company-activity > div.activity-type > div.header > a {
                border-radius: 6px;
                color: rgba(var(--Blue-Paynes-Gray), 1);
                font-size: 18px;
                font-weight: 400;
                height: 24px;
                margin: 0;
                padding: 0 0 2px 0;
            }

                .dashboard-company-activity > div.activity-type > div.header > a > span.icon-duotone {
                    font-size: 1em;
                }

        .dashboard-company-activity > div.activity-type > div.stats {
            align-items: center;
            background-color: rgba(var(--Blue-Alice-Blue), 1);
            background-size: contain;
            border-radius: 12px;
            display: flex;
            flex: 1 0 auto;
            height: auto;
            padding: 8px;
            margin-top: 10px;
        }

            .dashboard-company-activity > div.activity-type > div.stats > div {
                display: flex;
                column-gap: 10px;
                flex: 1 1 auto;
                flex-wrap: wrap;
            }

                .dashboard-company-activity > div.activity-type > div.stats > div > div {
                    flex: 1 1 0px;
                    padding: 10px;
                }

                    .dashboard-company-activity > div.activity-type > div.stats > div > div > span {
                        display: block;
                        color: rgba(var(--Blue-Paynes-Gray), 1);
                        font-weight: 700;
                        line-height: 20px;
                        text-align: center;
                    }

                        .dashboard-company-activity > div.activity-type > div.stats > div > div > span:nth-of-type(1) {
                            font-size: 36px;
                            line-height: 50px;
                        }

                        .dashboard-company-activity > div.activity-type > div.stats > div > div > span:nth-of-type(2) {
                            font-size: 16px;
                            line-height: 20px;
                        }

/* Dashboard Recent Messages */

.dashboard-recent-messages {
    display: flex;
    flex: 1 1 570px;
    flex-direction: column;
    margin-top: 20px;
    row-gap: 20px;
}

    .dashboard-recent-messages > div:not(.header) {
        flex: 1 1 100%;
        margin-top: 2px;
    }

    .dashboard-recent-messages > div > div > table.table {
        border: 1px solid rgba(var(--Blue-Alice-Blue), 1);
        border-radius: 12px;
        overflow: hidden;
    }

        .dashboard-recent-messages > div > div > table.table > thead > tr > th {
            font-size: 16px;
            vertical-align: middle;
        }

            .dashboard-recent-messages > div > div > table.table > thead > tr > th:not(:first-child), .dashboard-recent-messages > div > div > table.table > tbody > tr > td:not(:first-child) {
                text-align: center;
                max-width: max-content;
                width: min-content;
            }

        .dashboard-recent-messages > div > div > table.table > tbody > tr {
            line-height: 30px;
        }

            .dashboard-recent-messages > div > div > table.table > tbody > tr > td:not(:nth-child(3)) {
                color: #396673;
            }

            .dashboard-recent-messages > div > div > table.table > tbody > tr > td.subject {
                max-width: 0;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .dashboard-recent-messages > div > div > table.table > tbody > tr > td.errors > div {
                background: #FBEFE6;
                border-radius: 100px;
                color: #D85B00;
                display: inline-block;
                height: fit-content;
                background-size: contain;
                line-height: 24px;
                padding: 0 10px 0 10px;
            }

                .dashboard-recent-messages > div > div > table.table > tbody > tr > td.errors > div > i {
                    padding-right: 6px;
                }

@media screen and (max-width: 500px) {
    .dashboard-recent-messages > div > div > table.table > thead > tr > th:nth-child(3), .dashboard-recent-messages > div > div > table.table > tbody > tr > td:nth-child(3) {
        display: none;
    }
}

@media screen and (max-width: 400px) {
    .dashboard-recent-messages > div > div > table.table > thead > tr > th:nth-child(2), .dashboard-recent-messages > div > div > table.table > tbody > tr > td:nth-child(2),
    .dashboard-recent-messages > div > div > table.table > thead > tr > th:nth-child(3), .dashboard-recent-messages > div > div > table.table > tbody > tr > td:nth-child(3) {
        display: none;
    }
}

/* Dashboard Getting Started Checklist */
.dashboard-getting-started-wrapper {
    display: flex;
    flex: 1 1 570px;
    flex-direction: column;
    margin-top: 20px;
    row-gap: 20px;
}

.dashboard-getting-started {
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    flex: 1 1 100%;
    align-self: stretch;
    border-radius: 12px;
    border: 1px solid var(--Background-Secondary-Hover, #E1F0FB);
    background: var(--Background-Secondary, #F2F9FD);
}

    .dashboard-getting-started > div.header {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 4px;
        align-self: stretch;
    }

        .dashboard-getting-started > div.header > span {
            color: #000;
            font-family: "DM Sans";
            font-size: 24px;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
        }

        .dashboard-getting-started > div.header > div.checklist-progress {
            display: flex;
            align-items: center;
            gap: 16px;
            align-self: stretch;
        }

div.checklist-progress > div.checklist-progress-bar {
    display: flex;
    height: 16px;
    align-items: center;
    gap: 10px;
    flex: 1 0 0;
    border-radius: 900px;
    background-color: #C8DAE1;
}

div.checklist-progress-bar > div.checklist-progress-bar-indicator {
    width: 0%;
    align-self: stretch;
    border-radius: 900px;
    background-color: #38B000;
    transition: width .3s ease-out;
}

div.checklist-progress > div.checklist-progress-percentage {
    color: #000;
    /* Heading L/Regular */
    font-family: "DM Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 27px; /* 150% */
}

.dashboard-getting-started > div.checklist-card-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    flex: 1 0 0;
    align-self: stretch;
}

div.checklist-card-container > a.checklist-card {
    display: flex;
    padding: 12px;
    align-items: flex-start;
    gap: 12px;
    flex: 1 1 0;
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid var(--Content-Understated-Inverted, #DDD);
    background: var(--Content-Primary-Invert, #FFF);
    text-decoration: none;
}

a.checklist-card > div.checkbox {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    align-self: stretch;
    font-size: 28px;
    color: #252525;
    min-width: 28px;
}

a.checklist-card > div.title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    flex: 1 0 0;
}

div.title > span {
    color: var(--Content-Secondary, #656565);
    /* Text/Regular */
    font-family: Inter;
    font-size: 14px;
    font-style: italic;
    font-weight: 400;
    line-height: 21px; /* 150% */
}

    div.title > span:first-child {
        color: var(--Content-Primary, #252525);
        /* Heading XL/Strong */
        font-family: "DM Sans";
        font-size: 20px;
        font-style: normal;
        line-height: 28px; /* 140% */
    }

a.checklist-card > div.arrow {
    display: flex;
    gap: 10px;
    align-items: center;
    align-self: stretch;
    font-size: 28px;
    color: #A2A2A2;
}

div.checklist-card-container > a.checklist-card.complete {
    border: 2px solid var(--Content-Brand-2, #38B000);
    background: #F4FFEF;
    pointer-events: none;
    cursor: pointer;
}

a.checklist-card.complete > div.checkbox {
    color: #38B000;
}

a.checklist-card.complete > div.title > span {
    text-decoration: line-through;
}

a.checklist-card.complete > div.arrow {
    display: none;
}

div.checklist-card-container > a.checklist-card:not(.complete):hover {
    background: #f2f2f2;
}

div.checklist-card-container > a.checklist-card:not(.complete):focus-within {
    background: #e5e5e5;
}


/*********************************
    COMPANY DASHBOARD - END
*********************************/



/***********************

DASHBOARD - SEMI CIRCLE PROGRESS INDICATOR

************************/
.progress-semi {
    position: relative;
    margin: 0;
    float: left;
    text-align: center;
}

    .progress-semi .percent-complete {
        font-weight: 600;
        font-size: 30px;
    }

    .progress-semi .percent-sign {
    }

.barOverflow { /* Wraps the rotating .bar */
    position: relative;
    overflow: hidden; /* Comment this line to understand the trick */
    width: 90px;
    height: 55px; /* Half circle (overflow) */
    margin-bottom: -34px; /* bring the numbers up */
}

.bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 90px;
    height: 90px; /* full circle! */
    border-radius: 50%;
    box-sizing: border-box;
    border: 8px solid #eee; /* half gray, */
    border-bottom-color: rgb(25, 135, 84); /* half azure */
    border-right-color: rgb(25, 135, 84);
}

/**************************

    Free Trial

***************************/

.free-trial-steps {
    list-style: none;
}

    .free-trial-steps li.complete::before {
        content: "\f058";
        font-family: 'Font Awesome 5 Pro';
        font-size: 22px;
        font-weight: 900;
        padding-right: .5rem;
    }

    .free-trial-steps li.complete, .free-trial-steps li.complete a {
        color: rgb(15, 81, 50);
        cursor: default;
        text-decoration: none;
    }

    .free-trial-steps li.current {
        color: rgb(15, 81, 50);
    }

    .free-trial-steps li.incomplete {
        color: rgb(15, 81, 50);
    }

    .free-trial-steps li.disabled, .free-trial-steps li.disabled a, .free-trial-steps li.disabled a.aspNetDisabled {
        color: #808080;
        cursor: default;
        text-decoration: none;
    }

        .free-trial-steps li.current::before, .free-trial-steps li.incomplete::before, .free-trial-steps li.disabled::before {
            content: "\f06a";
            font-family: 'Font Awesome 5 Pro';
            font-size: 22px;
            font-weight: 900;
            padding-right: .5rem;
        }

.free-trial-steps-toggle {
    padding-left: 1rem;
}

    .free-trial-steps-toggle[aria-expanded=false] .text-expanded {
        display: none;
    }

    .free-trial-steps-toggle[aria-expanded=true] .text-collapsed {
        display: none;
    }

.steps {
    margin-top: 1em;
}

    .steps .step h5 {
        margin-bottom: 0;
    }

    .steps .step .fa {
        font-size: 1.3em;
        margin-right: .5em;
    }

    .steps .step p {
        margin-left: 2.7em;
    }


/*************

EE PREVIEW
        
**************/

.employee-preview {
    color: #ffffff;
    text-align: center;
    /*background-color: #1696bf;*/
    background-color: dimgray;
    padding: 10px 4px 10px 4px;
    font-weight: 500;
    font-size: 1em;
    list-style-type: none;
    line-height: 1.2em;
}

    .employee-preview a.back-link {
        display: inline-block;
        font-size: 1em !important;
        margin-left: 1em;
        text-decoration: underline !important;
        color: white;
    }

/*************

EE PREVIEW - END
        
**************/


/*************

SEGMENTATION - BEGIN
        
**************/

.segmented-employees > div > span
{
    font-size: 0.75rem;
    font-style: italic;
}

.segmentation-employees {
    background: rgba(var(--Blue-Alice-White), 1);
    border-left: 1px solid rgb(220,220,220);
    margin: 0 auto;
    padding: 0 .5rem 0 .5rem;
    text-align: center;
    width: auto;
}

    .segmentation-employees a {
    }

        .segmentation-employees a:hover {
            text-decoration: none;
        }

.segmentation-display {
    font-size: 1em;
    padding-left: 1.5rem;
    width: 100%;
}

    .segmentation-display > div.filter {
        display: flex;
    }

        .segmentation-display > div.filter label {
            width: 120px;
        }

    .segmentation-display > div {
        margin: .5rem 0 .5rem 0;
    }

        .segmentation-display > div > strong {
            padding-right: .2rem;
        }

        .segmentation-display > div > span > span {
            background-color: rgba(33, 37, 41, 0.7);
            border: 0;
            border-radius: 4px;
            color: #fff;
            display: inline-block;
            line-height: 1em;
            margin: .2rem;
            padding: 4px 6px;
        }

            .segmentation-display > div > span > span > a {
                color: #fff !important;
            }

                .segmentation-display > div > span > span > a > i.fa {
                    padding: 0 0 0 6px;
                }

.segmentation-indicator-wrapper {
    border: 1px solid #dedede;
    border-radius: 4px;
    height: 38px;
    margin-right: .6rem;
}

.segmentation-indicator {
    align-items: center;
    border-radius: 4px;
    border: 1px solid rgba(var(--Blue-Alice-Blue), 1);
    background: rgba(var(--Blue-Alice-White), 1);
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--ss-spacing-m);
    flex: 1 1 100%;
    padding: 2px 12px;
    height: 28px;
    line-height: 21px;
    margin: 8px 0 2px 3px;
}

.segmentation-indicator-wrapper .segmentation-indicator {
    margin-top: 4px;
}

.segmentation-indicator .delete {
    border-left: 1px solid rgba(33, 37, 41, 0.9);
    display: flex;
    align-items: center;
    height: var(--ss-spacing-l);
    width: var(--ss-spacing-l);
    padding: var(--ss-spacing-s) var(--ss-spacing-m);
    cursor: pointer;
    box-sizing: content-box;
}

    .segmentation-indicator .delete svg {
        height: var(--ss-spacing-l);
        width: var(--ss-spacing-l);
    }

        .segmentation-indicator .delete svg path {
            fill: none;
            stroke: rgba(33,37,41,0.9);
            stroke-width: 18;
            stroke-linecap: round;
            stroke-linejoin: round
        }

.segmentation-individual-groups {
    padding-top: .4rem;
}

.segmentation-individual-group-seperator {
    border-top: 1px solid #E9ECEF;
    margin-top: 2px;
}


@media (max-width:600px) {
    .segmentation-employees {
        border: 0;
        display: block;
        padding: 0;
        text-align: center;
        width: 100%;
        margin: .5rem auto;
    }

        .segmentation-employees a {
            display: inline-block;
            margin-bottom: .5rem;
        }

        .segmentation-employees .employee-count {
            margin-top: .5rem;
        }


    .segmentation-display {
        padding-left: 0;
    }
}

/*************

SEGMENTATION - END
        
**************/


.checkbox-small label {
    display: inline;
    font-size: 16px !important;
    padding: 0 15px 0 5px;
}

    .checkbox-small label:after {
        content: "" !important;
    }


/*************

EMPLOYEE MESSAGES - BEGIN
        
**************/

a .disabledbtn {
    background-color: #000000;
    color: #FFFFFF;
}

/*************

EMPLOYEE MESSAGES - END
        
**************/


.bg-green-light {
    background-color: rgba(40, 167, 69, .075);
}

.bg-gray-light {
    background-color: rgba(220, 220, 220, .3);
}


/*************
    
CLONE CONTENT - START
    
*************/

.col-6-with-icon {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 48% 4% 48%;
    position: relative;
}

    .col-6-with-icon i {
        font-size: 40px;
        top: 90px;
        left: 50%;
        transform: translate(-50%, 0%);
        position: absolute;
    }

/*************
    
CLONE CONTENT - END
    
*************/

/***********************

    CLONE TEMPLATES

************************/
.clone-template {
    border-top: 1px solid #cecece;
    padding: 10px 0 10px 0;
    width: 100%;
}

    .clone-template:first-child {
        border-top: 0;
        padding: 0 0 10px 0;
    }

    .clone-template:last-child {
        padding: 10px 0 0 0;
    }

    .clone-template .icon {
        color: #337ab7;
        font-size: 22px;
    }

    .clone-template .template-name {
        color: #337ab7;
        font-weight: bold;
    }

    .clone-template a {
        color: #337ab7;
        font-size: 16px;
        font-weight: 400;
        text-decoration: underline;
    }

        .clone-template a:hover {
            text-decoration: none;
        }


/***********************

    FILE MANAGER - BEGIN

************************/

#filemanager .folders {
    margin-right: .2rem;
}

    #filemanager .folders .folder {
        border: 2px solid transparent;
        margin-bottom: .1rem;
        padding: 0 0rem 0rem .2rem;
    }

        #filemanager .folders .folder .folder-name {
            display: inline-block;
            overflow-x: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 190px;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        #filemanager .folders .folder .file-count {
            display: inline-block;
            overflow-x: hidden;
            padding-left: .2rem;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

@media (max-width:1500px) {
    #filemanager .folders .folder .folder-name {
        width: 150px;
    }
}

@media (max-width:1400px) {
    #filemanager .folders .folder .folder-name {
        width: 130px;
    }
}

@media (max-width:1300px) {
    #filemanager .folders .folder .folder-name {
        width: 80px;
    }
}

#filemanager #external-file-drop-range {
    border: 2px dashed rgba(255,255,255,1);
    min-height: 100%;
}

    #filemanager .folders .folder.drag-highlight, #filemanager .folders .folder.ui-droppable-hover, #filemanager .files.drag-highlight, #filemanager #external-file-drop-range.drag-highlight {
        border: 2px dashed rgba(0,60,75, .5);
        border-radius: 4px;
    }

#filemanager .folders .collapsible, #filemanager .folders .collapsible-dummy {
    display: inline-block;
    width: 14px;
}

    #filemanager .folders .collapsible::before {
        font-family: 'Font Awesome 6 Pro';
        font-size: 1em;
        font-weight: 100;
        content: "\f105";
        padding-top: 4px;
        display: inline-block;
    }

    #filemanager .folders .collapsible.show::before {
        font-family: 'Font Awesome 6 Pro';
        font-size: 1em;
        font-weight: 100;
        content: "\f107";
        padding-top: 4px;
        display: inline-block;
    }

    #filemanager .folders .collapsible:hover {
        cursor: pointer;
    }

#filemanager .folders .folder .folder-name::before {
    font-family: 'Font Awesome 6 Pro';
    font-size: 1.2em;
    font-weight: 100;
    content: "\f07b";
    padding-right: .2rem;
    padding-left: .2rem;
}

#filemanager .folders .folder .folder-name.deleted::before {
    font-family: 'Font Awesome 6 Pro';
    font-size: 1.2em;
    font-weight: 100;
    content: "\f1f8";
    padding-right: .2rem;
    padding-left: .2rem;
}

#filemanager .folders .folder:hover {
    background-color: rgba(222, 239, 245, 1);
    border-radius: 8px;
    cursor: pointer;
}

#filemanager .folders .folder.folder-draggable:hover {
    cursor: grab;
}

#filemanager .folders .folder.active {
    background-color: rgba(222, 239, 245, 1);
    border-radius: 8px;
}

    #filemanager .folders .folder.active .folder-name::before {
        font-family: 'Font Awesome 6 Pro';
        font-size: 1.2em;
        font-weight: 100;
        content: "\f07c";
        padding-right: .3rem;
    }

#filemanager .folders .actions {
    float: right;
    padding: 0 .7rem;
}

    #filemanager .folders .actions a {
        display: inline-block;
        padding-top: .2rem;
    }

    #filemanager .folders .actions > ul > li > a > i {
        font-size: 1.4em;
        padding-right: .5rem;
    }

#filemanager .folders-wrapper {
    border-radius: 4px;
    background: rgba(var(--Blue-Alice-White), 1);
    margin-top: 12px;
    padding: 6px;
}

#filemanager #folders-partner-wrapper .folders-partner-header {
    color: rgba(var(--Blue-Paynes-Gray), 1);
    font-weight: 700;
    line-height: 21px;
    margin-bottom: 4px;
}


#filemanager #folders-partner-wrapper .folder-partner {
    width: 100%;
}

#filemanager .files {
    border: 2px solid transparent;
}

    #filemanager .files tbody > tr > td.actions {
    }

    #filemanager .files tbody > tr > td.actions {
        font-size: 1em;
    }

        #filemanager .files tbody > tr > td.actions > div > div {
            padding: 0 .2rem 0 .2rem;
        }

    #filemanager .files tbody > tr > td div.file-default:before, #filemanager .files tbody > tr > td div.file-pdf:before, #filemanager .files tbody > tr > td div.file-image:before,
    #filemanager .files tbody > tr > td div.file-word:before, #filemanager .files tbody > tr > td div.file-excel:before, #filemanager .files tbody > tr > td div.file-powerpoint:before,
    #filemanager .files tbody > tr > td div.file-video:before, .employee-file > div:before {
        color: rgba(var(--bs-th-navy-rgb), 1);
        font-family: 'Font Awesome 6 Pro';
        font-size: 1.6em;
        font-weight: 100;
        padding-right: .5rem;
    }

    #filemanager .files tbody > tr > td div.file-default:before, .employee-file > div.file-default:before {
        content: "\f15b";
    }

    #filemanager .files tbody > tr > td div.file-pdf:before, .employee-file > div.file-pdf:before {
        content: "\f1c1";
    }

    #filemanager .files tbody > tr > td div.file-image:before, .employee-file > div.file-image:before {
        content: "\f1c5";
    }

    #filemanager .files tbody > tr > td div.file-word:before, .employee-file > div.file-word:before {
        content: "\f1c2";
    }

    #filemanager .files tbody > tr > td div.file-excel:before, .employee-file > div.file-excel:before {
        content: "\f1c3";
    }

    #filemanager .files tbody > tr > td div.file-powerpoint:before, .employee-file > div.file-powerpoint:before {
        content: "\f1c4";
    }

    #filemanager .files tbody > tr > td div.file-video:before .employee-file > div.file-video:before {
        content: "\f1c8";
    }

    #filemanager .files tbody > tr > td span.tag {
        padding: 3px 6px;
        align-items: center;
        border-radius: 11px;
        background: rgba(var(--Blue-Alice-Blue), 1);
        color: rgba(var(--Blue-Paynes-Gray), 1);
        text-align: center;
        margin-right: 5px;
        font-size: .8rem;
    }

        #filemanager .files tbody > tr > td span.tag:hover {
            cursor: pointer;
        }

    #filemanager .files tbody > tr {
        height: 100%;
    }


        #filemanager .files tbody > tr > td {
            position: relative;
        }

            #filemanager .files tbody > tr > td.updated-details > span.updated-details-tooltip, #filemanager .files tbody > tr > td.companies-details > span.companies-details-tooltip,
            #filemanager span.companies-details > span.companies-details-tooltip, #modalFile span.action span.companies-details > span.companies-details-tooltip {
                background-color: rgba(0, 60, 75, 1);
                border-radius: .5rem;
                color: #fff;
                font-weight: bold;
                position: absolute;
                right: 200px;
                top: 6px;
                padding: .5rem;
                width: 420px;
                z-index: 1000;
            }

            #filemanager .files tbody > tr > td.companies-details > span.companies-details-tooltip {
                width: 300px;
            }

#filemanager span.companies-details > span.companies-details-tooltip {
    right: 370px;
    top: 160px;
}

#modalFile span.action span.companies-details > span.companies-details-tooltip {
    right: 200px;
    top: 40px;
}

#filemanager #editor-image-files td > span.updated-details-tooltip, #filemanager #editor-link-files td > span.updated-details-tooltip, #filemanager #editor-media-files td > span.updated-details-tooltip {
    right: 154px;
}

#filemanager .files tbody > tr > td span.initials {
    background-color: rgba(173, 216, 230, 0.3);
    border-radius: 1rem;
    display: inline !important;
    font-size: .9rem;
    font-weight: bold;
    margin-right: .3rem;
    padding: .4rem;
    width: 34px !important;
}

#filemanager .files tbody > tr > td div.file-draggable {
    -webkit-transform: translateZ(0);
}

    #filemanager .files tbody > tr > td div.file-draggable:hover {
        cursor: grab;
    }

.tags-wrapper {
    max-height: 400px;
    overflow-y: scroll;
}

.file-manager-file-modal span.ajax__fileupload_selectFileButton {
    background-color: #fff;
    border: 1px solid rgba(var(--bs-th-blue-rgb), 1);
    border-radius: .25rem;
    color: rgba(var(--bs-th-blue-rgb), 1);
}

.file-manager-file-modal .ajax__fileupload_fileItemInfo .pendingState {
    color: inherit;
}

.file-manager-file-modal .ajax__fileupload_fileItemInfo {
    height: 24px;
}

    .file-manager-file-modal .ajax__fileupload_fileItemInfo .removeButton {
        border-radius: .25rem;
        padding: .1rem .3rem;
        height: 24px;
        width: 64px;
    }

.file-manager-file-modal .ajax__fileupload_uploadbutton {
    background-color: rgba(var(--bs-th-blue-rgb), 1);
    border-radius: .25rem;
    font-weight: 400;
    margin-right: .2rem;
    width: 66px;
}

.file-manager-file-modal .ajax__fileupload_queueContainer {
    border-bottom: #A9A9A9 1px solid;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    clear: both;
    margin-top: 2px;
    padding: 4px;
}

.file-manager-file-modal .ajax__fileupload_footer {
    height: 30px;
    line-height: 30px;
    margin: 1rem 0 .5rem 0;
}

.file-manager-file-modal .ajax__fileupload_fileItemInfo {
    font-size: 1em;
}

    .file-manager-file-modal .ajax__fileupload_fileItemInfo .filename {
        font-weight: normal;
    }

    .file-manager-file-modal .ajax__fileupload_fileItemInfo .filesize, .file-manager-file-modal .ajax__fileupload_fileItemInfo .filetype {
        display: none;
    }

#filemanager #editor-image-files-wrapper, #filemanager #editor-link-files-wrapper {
    height: 380px;
    overflow-y: auto;
}

#filemanager #editor-image-files td {
    position: relative;
}

    #filemanager #editor-image-files td > span {
        display: block;
        width: 400px;
        overflow-wrap: break-word;
    }

#filemanager div.image-preview {
    background-color: #fff;
    border: 3px solid rgba(220,220,220,1);
    position: fixed;
    top: 40%;
    left: 45%;
    padding: .5rem;
    text-align: center;
    width: 500px;
    z-index: 1000;
}

    #filemanager div.image-preview .title {
        border-bottom: 1px solid rgba(220,220,220,1);
        font-weight: bold;
        margin-bottom: .5rem;
        text-align: left;
    }

    #filemanager div.image-preview img {
        max-height: 100px;
        max-width: auto;
    }

#filemanager input.short {
    width: 100px;
}

#filemanager .lock-dimensions {
    padding-top: 1.4rem;
    text-align: center;
    width: 36px;
}

    #filemanager .lock-dimensions > i {
        font-size: 1.2rem;
    }

#filemanager .add-section {
    background-color: rgba(173, 216, 230, 0.3);
    border-radius: .25rem;
    margin-bottom: 1rem;
    padding: .75rem .75rem .5rem .75rem;
}

#filemanager #editor-add-media .media-type-wrapper, #filemanager #editor-add-link .link-type-wrapper {
    margin: 0 auto 1.5rem auto;
    text-align: center;
    width: 250px;
}

    #filemanager #editor-add-media .media-type-wrapper .media-type-options, #filemanager #editor-add-link .link-type-wrapper .link-type-options {
        width: 100%;
    }

        #filemanager #editor-add-media .media-type-wrapper .media-type-options .btn, #filemanager #editor-add-link .link-type-wrapper .link-type-options btn {
            width: 50%;
        }

#filemanager #editor-add-media .media-embed-add-wrapper {
    margin-top: 2.2rem;
}

#modalFileManager .section-wrapper {
    min-height: auto;
}

#modalFileManager #filemanager .file-manager-scroll {
    font-size: .85rem;
    height: 400px;
    overflow-y: scroll;
}

#modalFileManager #filemanager .file-manager-scroll-folders {
    height: 480px;
}

#modalFileManager #filemanager .file-manager-scroll .folders .folder .folder-name {
    max-width: 100px;
}

.dropzone .dz-preview.dz-error .dz-error-message {
    top: 150px;
}

.replace-file-controls {
    margin-left: 1.6rem;
}



.share-groups > div.share-group {
    background-color: rgba(var(--Blue-Alice-Blue), 1);
    border-radius: 4px;
    display: flex;
    flex: 1;
    margin-bottom: 10px;
    padding: 4px 10px 4px 4px;
}

    .share-groups > div.share-group > div:first-child {
        flex-grow: 1;
        padding-right: 8px;
    }

        .share-groups > div.share-group > div:first-child select, .share-groups > div.share-group > div:first-child div.ss-main {
            margin-bottom: 4px;
        }

    .share-groups > div.share-group > div.share-group-remove-wrapper {
        align-items: center;
        display: flex;
        justify-content: center;
        width: 28px;
    }

    .share-groups > div.share-group a {
        font-size: 1.4rem;
    }

.share-group-button-wrapper {
    margin-top: .75rem;
}

    .share-group-button-wrapper .btn {
        width: 100%;
    }

.share-group-just-me {
    background-color: rgba(var(--Blue-Alice-Blue), 1);
    border-radius: 4px;
    padding: 4px 10px 4px 4px;
    text-align: center;
}

.share-group-details-hover {
    background-color: rgba(var(--bs-th-navy-rgb), 1);
    border-radius: 4px;
    color: #fff;
    font-weight: normal;
    padding: 10px;
    position: absolute;
    z-index: 1000;
    width: 340px;
}

    .share-group-details-hover .share-group-header {
        font-weight: bold;
        margin-top: 12px;
    }

        .share-group-details-hover .share-group-header:first-child {
            margin-top: 0;
        }

/***********************

    FILE MANAGER - END

************************/
/*********************

EMPLOYEE INBOX - START  

**********************/
.employee-inbox a {
    color: inherit;
    text-decoration: none;
}

.employee-inbox .messages {
    height: 60vh;
    width: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
}

.employee-inbox .message {
    background: rgba(var(--Blue-Alice-White), 1);
    border-top: 1px solid var(--Blacks-Anti-flash-White, #EBEBEB);
    display: flex;
    padding: 16px 8px 16px 16px;
    align-items: center;
    gap: 12px;
    align-self: stretch;
    height: 70px;
}

    .employee-inbox .message.read {
        background: #fff;
    }

.employee-inbox .messages > div > div.message:last-child {
    border-bottom: 1px solid var(--Blacks-Anti-flash-White, #EBEBEB);
}

.employee-inbox .message:hover {
    background-color: rgba(173,216,230, .2);
    border-top-color: rgba(173,216,230, .4);
}

.employee-inbox .message .subject {
    font-size: 15px;
    font-weight: 600;
    line-height: 18px;
    float: left;
    padding: .1rem .4rem 0 0;
}

.employee-inbox .message .unread-wrapper {
    height: 100%;
    width: 10px;
}

.employee-inbox .message .unread {
    color: rgb(5, 130, 220);
    font-size: .5em;
    line-height: 1em;
    vertical-align: top;
}

.employee-inbox .message .content {
    float: left;
    width: 100%;
}

.employee-inbox .message .date-sent {
    color: rgba(55, 55, 55, 0.7);
    float: right;
    font-style: italic;
}

.employee-inbox .message .preview {
    color: rgba(55, 55, 55, 0.7);
    font-size: 1em;
    line-height: 1.1em;
    float: left;
    padding-top: 3px;
}


.employee-inbox .message .type {
    display: inline-block;
    padding: 5px 8px 5px 8px;
    align-items: center;
    gap: 4px;
    border-radius: 11px;
    background: rgba(var(--Blue-Alice-Blue), 1);
    color: rgba(var(--Blue-Paynes-Gray), 1);
    text-align: center;
    /*leading-trim: both;
        text-edge: cap; not recognized*/
    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 12px; /* 100% */
    clear: both;
}

    .employee-inbox .message .type.type-mobile {
        margin-top: .5rem;
    }

        .employee-inbox .message .type.type-mobile > div {
            border-left: 1px solid rgba(33, 37, 41, 0.9);
            display: inline;
            margin-left: 6px;
            padding: 0 6px;
        }

    .employee-inbox .message .type.announcement {
        background-color: rgba(0, 98, 168, .1);
        border-color: rgba(0, 98, 168, 1);
    }

    .employee-inbox .message .type.assignment {
        background-color: rgba(0, 98, 168, .1);
        border-color: rgba(0, 98, 168, 1);
        color: rgba(0, 98, 168, 1);
    }

    .employee-inbox .message .type.admin-chat {
        background-color: rgba(0, 98, 168, .1);
        border-color: rgba(0, 98, 168, 1);
        color: rgba(0, 98, 168, 1);
    }

    .employee-inbox .message .type.survey {
        background-color: rgba(0, 98, 168, .1);
        border-color: rgba(0, 98, 168, 1);
        color: rgba(0, 98, 168, 1);
    }



.employee-inbox .message .sent-message-details {
    clear: both;
    margin-top: .5rem;
}

.employee-inbox .arrow {
    text-align: right;
    width: 20px;
}

    .employee-inbox .arrow .fa {
        color: #396673;
        width: 18px;
        height: 18px;
    }

.message-details {
    border: 1px solid #D6D6D6;
    border-radius: .5rem;
    padding: 1em;
}

    .message-details .subject, .message-details-screen .subject {
        font-size: 1.5em;
        font-weight: 600;
    }

    .message-details .sender, .message-details-screen .sender {
        color: rgba(var(--bs-th-blue-rgb), 1);
        font-size: 1.2em;
        font-weight: 600;
    }

    .message-details .date-sent, .message-details-screen .date-sent {
        color: rgba(55, 55, 55, 0.7);
        line-height: 1.1em;
    }


    .message-details .message-content, .message-details-screen .message-content {
        font-size: 1.2em;
    }

.message-details-screen .delete {
    float: right;
}

    .message-details-screen .delete > a {
        font-size: 1.5em;
    }


.message-details-screen .btn {
    border-radius: 1rem;
    padding: .5rem 1rem;
}

.employee-mailbox-options .btn {
    border-radius: .25rem;
    width: 170px;
}

.employee-message-options a > i.fa-thin {
    font-size: 1.5em;
    padding: 0 .3rem 0 .3rem;
}

.employee-company-logo-desktop {
    margin-bottom: .5rem;
    text-align: center;
}

    .employee-company-logo-desktop img {
        max-height: 160px;
    }

.employee-company-logo-mobile {
    display: none;
}

@media (max-width:481px) {

    .employee-inbox .message {
        gap: 4px;
        padding: 8px;
        height: 100px;
        width: 100%;
    }

        .employee-inbox .message .unread {
            padding-top: 8px;
        }

        .employee-inbox .message .subject {
            display: block;
            float: none;
            padding-top: .2rem;
        }

        .employee-inbox .message .preview {
            clear: both;
            display: block;
            float: none;
            height: 34px;
        }

            .employee-inbox .message .preview::before {
                content: none;
            }

        .employee-inbox .message .content {
            width: 100%;
        }

    .employee-mailbox-options-wrapper {
        text-align: center;
        width: 100%;
    }

    .employee-mailbox-options {
        width: 100%;
    }

        .employee-mailbox-options .btn {
            width: 50%;
        }

    .employee-company-logo-mobile {
        display: block;
        max-height: 80px !important;
        margin: auto !important;
        width: auto !important;
    }

    .employee-inbox .message .arrow {
        color: #396673;
        width: 18px;
        height: 18px;
    }
}



/*********************

EMPLOYEE INBOX - END  

**********************/

.message-tasks > table > tbody > tr > td {
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 128.571% */
}

.message-tasks .add-task {
    background-color: #fff;
    border-radius: 4px;
    color: rgba(var(--Blue-Paynes-Gray), 1);
    /* Body */
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 128.571% */
    text-decoration: none;
    width: 100%;
    margin: 10px auto;
    display: inline-block;
    padding: 6px;
}

    .message-tasks .add-task > i {
        font-size: 16px;
        padding-right: .2rem;
    }

.message-tasks a.task-edit {
    color: rgba(var(--Blue-Bleu-de-France), 1);
    /* Body Link */

    text-decoration-line: underline;
}

.message-tasks a.task-delete {
    float: right;
}

.offcanvas .task-type::after {
    content: "*";
    color: red;
    padding-left: .2rem;
}


.offcanvas .form-switch input {
    height: 1.6em;
    width: 40px;
}

.offcanvas .form-switch label {
    padding-left: .6rem;
    padding-top: .4rem;
}

.offcanvas-backdrop.show {
    opacity: .2;
}

/* TERMS OF USE MODAL */
.terms-of-use-wrapper {
    height: 400px;
    overflow-y: scroll;
}

/* FLEXBOX COLUMN GAP */
.column-gap-1 {
    column-gap: 1rem;
}

.column-gap-2 {
    column-gap: .5rem;
}

/* FLEXBOX EQUAL WIDTH ITEMS */
.d-flex .flex-equal-width-quarters {
    flex: 0 0 25%;
    min-width: 15.625rem;
}

@media (max-width: 1200px) {
    .d-flex .flex-equal-width-quarters {
        flex: 0 0 33.33%; /* Switch to thirds */
    }
}

@media (max-width: 1000px) {
    .d-flex .flex-equal-width-quarters {
        flex: 0 0 50%; /* Switch to halves */
    }
}

@media (max-width: 800px) {
    .d-flex .flex-equal-width-quarters {
        flex: 0 0 100%; /* Switch to halves */
    }
}

.d-flex .flex-basis-400 {
    flex-basis: 400px;
}



.additional-listing-icon {
    color: rgba(var(--Blue-Paynes-Gray), .8);
    float: right;
    padding-top: 1.2em;
}

.message-preview #message-content p:last-child {
    margin-bottom: 0;
}


/* EMPLOYEE TASKS - BEGIN */

.employee-tasks .task {
    display: flex;
    flex-direction: row;
    padding: .8rem 0;
    width: 100%;
    border-bottom: 1px solid rgba(0,0,0,.1);
}

    .employee-tasks .task.header {
        padding-bottom: .2rem;
    }

        .employee-tasks .task.header > div {
            font-weight: bold;
            margin-bottom: 0;
            padding-bottom: 0;
        }

    .employee-tasks .task .btn {
        text-align: center;
        width: 95px;
    }

    .employee-tasks .task div.type {
        color: rgba(120,120,120, 1);
        display: block;
    }

        .employee-tasks .task div.type > span {
            font-style: italic;
        }

    .employee-tasks .task div.icon, .task div.details {
        float: left;
    }

    .employee-tasks .task > div {
        vertical-align: middle;
    }

        .employee-tasks .task > div:first-child {
            width: 55%;
        }

    .employee-tasks .task > div {
        width: 15%;
    }

    .employee-tasks .task .title {
        font-weight: bold;
    }

    .employee-tasks .task .complete:before {
        color: rgba(25,135,84, 1);
        content: "\f058";
        font: var(--fa-font-solid);
        font-weight: 400;
        font-size: 1.25rem;
        padding-right: .4rem;
    }

    .employee-tasks .task .incomplete:before {
        color: rgba(255,193,7, 1);
        content: "\f06a";
        font: var(--fa-font-solid);
        font-weight: 400;
        font-size: 1.25rem;
        padding-right: .4rem;
        float: left;
    }




.modal-file-request .input_container {
    border: 1px solid #e5e5e5;
}

.modal-file-request input[type=file]::file-selector-button {
    background-color: #ddd;
    color: #000;
    border: 0px;
    border-right: 1px solid #e5e5e5;
    padding: 10px 15px;
    margin-right: 20px;
    transition: .5s;
}

    .modal-file-request input[type=file]::file-selector-button:hover {
        background-color: #eee;
        border: 0px;
        border-right: 1px solid #e5e5e5;
    }

@media (max-width:481px) {
    .employee-tasks .task {
        flex-direction: column;
    }

        .employee-tasks .task.header {
            display: none;
        }

        .employee-tasks .task > div:first-child, .task > div {
            width: auto;
        }

        .employee-tasks .task > div.due-date, .employee-tasks .task > div.status, .employee-tasks .task > div.action {
            padding-left: 1.7rem;
            width: 100%;
        }

            .employee-tasks .task > div.due-date::before {
                content: 'Due ';
            }

        .employee-tasks .task > div.due-date-hide {
            display: none;
        }

    .employee-tasks div.action {
        margin-top: .5rem;
    }

    .btn-full-width {
        width: 100%;
    }
}


/* EMPLOYEE TASKS - END */


/* SURVEY RESULTS - BEGIN */

.survey-responses .question {
    display: flex;
    flex-direction: row;
    padding: .4rem 0;
    width: 100%;
    border-bottom: 1px solid rgba(0,0,0,.1);
}

    .survey-responses .question .header {
        padding-bottom: 0;
    }

        .survey-responses .question.header > div {
            font-weight: bold;
            margin-bottom: 0;
            padding-bottom: 0;
        }

    .survey-responses .question .btn {
        text-align: center;
        width: 95px;
    }

    .survey-responses .question div.type {
        color: rgba(120,120,120, 1);
        display: block;
    }

        .survey-responses .question div.type > span {
            font-style: italic;
        }

    .survey-responses .question div.prompt {
        float: left;
        margin-right: 3rem;
    }

    .survey-responses .question div.response {
        margin-right: 3rem;
    }

    .survey-responses .question > div {
        vertical-align: middle;
    }

        .survey-responses .question > div:first-child {
            width: 50%;
        }

    .survey-responses .question > div {
        width: 25%;
    }

    .survey-responses .question div.type {
        color: rgba(120,120,120, 1);
        display: block;
    }

@media (max-width:481px) {
    .survey-responses .question {
        flex-direction: column;
    }

        .survey-responses .question.header {
            display: none;
        }

        .survey-responses .question > div:first-child, .question > div {
            width: auto;
        }

        .survey-responses .question > div.options, .survey-responses .question > div.response {
            padding-left: 1.7rem;
            width: 100%;
        }

            .survey-responses .question > div.options::before {
                content: 'Choices: ';
                font-weight: bold;
                display: block;
            }

            .survey-responses .question > div.response::before {
                content: 'Response: ';
                font-weight: bold;
                display: block;
            }

    .survey-responses div.response {
        margin-top: .5rem;
    }
}

/* SURVEY RESULTS - END */

.radio-button-list {
    display: block;
}

    .radio-button-list label {
        display: inline;
    }

    .radio-button-list input[type="radio"] {
        accent-color: rgba(var(--bs-th-blue-rgb), 1);
        margin-right: .2rem;
    }

    .radio-button-list td {
        padding-right: .8rem;
    }


/*
    NEW TASK LISTING
*/
.task-listing {
    width: 100%;
}

    .task-listing:not(.no-scroll) {
        height: 68vh;
        overflow-y: scroll;
        overflow-x: hidden;
    }

    .task-listing .item {
        background: rgba(var(--Blue-Alice-White), 1);
        border-top: 1px solid var(--Blacks-Anti-flash-White, #EBEBEB);
        display: flex;
        padding: 16px 8px 16px 16px;
        align-items: center;
        gap: 12px;
        align-self: stretch;
    }

        .task-listing .item:last-child {
            border-bottom: 1px solid var(--Blacks-Anti-flash-White, #EBEBEB);
        }

    .task-listing a {
        text-decoration: none;
    }


    .task-listing .item .due-date {
        display: flex;
        width: 50px;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        border-radius: 4px;
        background: rgba(var(--Blue-Paynes-Gray), 1);
    }

        .task-listing .item .due-date .due {
            align-self: stretch;
            color: #FFF;
            text-align: center;
            /* Caption */
            font-family: Inter;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 16px; /* 133.333% */
        }

        .task-listing .item .due-date .dates {
            background: rgba(var(--Blue-Alice-Blue), 1);
            display: flex;
            /*padding: 6px 8px 4px 8px;*/
            padding: 4px 8px 4px 8px;
            flex-direction: column;
            align-items: center;
            /*gap: 2.5px; adding extra spacing*/
            align-self: stretch;
            border-bottom-left-radius: 4px;
            border-bottom-right-radius: 4px;
        }

        .task-listing .item .due-date .day {
            color: rgba(var(--Blue-Paynes-Gray), 1);
            text-align: center;
            /*leading-trim: both;
        text-edge: cap; not recognized*/
            font-family: DM Sans;
            font-size: 16px;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
        }

        .task-listing .item .due-date .month {
            color: rgba(var(--Blue-Paynes-Gray), 1);
            text-align: center;
            /* Caption */
            font-family: Inter;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 16px; /* 133.333% */
        }

    .task-listing .item .details {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        flex: 1 0 0;
    }

        .task-listing .item .details .description {
            color: var(--Blacks-Eerie-Black);
            font-family: Inter;
            font-size: 15px;
            font-style: normal;
            font-weight: 600;
            line-height: 18px; /* 120% */
        }

        .task-listing .item .details .type {
            color: var(--Blacks-Battleship-Gray);
            /* Caption */
            font-family: Inter;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 16px; /* 133.333% */
        }

        .task-listing .item .details .status, .task-details .status {
            display: inline-block;
            padding: 5px 8px 5px 4px;
            justify-content: flex-end;
            align-items: center;
            gap: 4px;
            border-radius: 11px;
            background: rgba(var(--Blue-Alice-Blue), 1);
            color: rgba(var(--Blue-Paynes-Gray), 1);
            text-align: center;
            /*leading-trim: both;
        text-edge: cap; not recognized*/
            font-family: Inter;
            font-size: 12px;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 12px; /* 100% */
        }

    .task-listing .item .arrow .fa {
        color: #396673;
        width: 18px;
        height: 18px;
    }

    .task-listing .item .details .status .in-progress::before, .task-listing .item .details .status .completed::before, .task-listing .item .details .status .not-started::before,
    .task-details .status .completed::before, .task-details .status .not-started::before {
        height: 9px;
        width: 9px;
        border-radius: 50%;
        display: inline-block;
        content: '';
        margin: 0 .25rem 0 .1rem;
    }

    .task-listing .item .details .status .in-progress::before {
        background-color: #0582dc;
    }

    .task-listing .item .details .status .completed::before, .task-details .status .completed::before {
        background-color: #38B000;
    }

    .task-listing .item .details .status .not-started::before, .task-details .status .not-started::before {
        background-color: #f7cb15;
    }


/* 
    Sidebar
*/

.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100; /* Behind the navbar */
    padding: 48px 0 0; /* Height of navbar */
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
    overflow-y: auto;
    scrollbar-color: #cecece;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
}

@media (max-width: 767.98px) {
    .sidebar {
        top: 5rem;
    }
}
/*
.sidebar-sticky {
    position: relative;
    top: 0;
    height: calc(100vh - 48px);
    overflow-x: hidden;
    overflow-y: auto; 
}*/


.navbar-admin {
    height: var(--admin-top-nav-height);
    position: fixed;
    top: 0;
    width: 100%;
}


    .navbar-admin .logo {
        text-align: center;
        margin-right: 27px;
        width: 100px;
    }

        .navbar-admin .logo img {
            max-width: 74px;
            height: auto;
            padding-top: 1.5rem;
        }

.navbar-top-menu {
    padding-top: 24px;
}

@media (min-width:1401px) and (max-width:1500px) {

    .navbar-admin .logo {
        margin-right: 22px;
        width: 90px;
    }
}

@media (min-width:1301px) and (max-width:1400px) {

    .navbar-admin .logo {
        margin-right: 15px;
        width: 90px;
    }
}

@media (min-width:1201px) and (max-width:1300px) {

    .navbar-admin .logo {
        margin-right: 15px;
        width: 80px;
    }
}

@media (min-width:1101px) and (max-width:1200px) {

    .navbar-admin .logo {
        margin-right: 15px;
        width: 70px;
    }
}


@media (min-width:1001px) and (max-width:1100px) {

    .navbar-admin .logo {
        margin-right: 15px;
        width: 60px;
    }

        .navbar-admin .logo img {
            max-width: 54px;
            padding-top: 1.8rem;
        }
}

.navbar-admin .company-name {
    display: inline-block;
    color: #FFF;
    /* Header 1 */
    font-family: DM Sans;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 120% */
}

.sidebar-collapse {
    display: none;
}


@media (max-width: 768px) {

    .navbar-admin .logo {
        margin-right: 0;
    }

        .navbar-admin .logo img {
            padding-top: 1rem;
        }

    .navbar-admin .company-name {
        display: none;
    }

    .navbar-top-menu {
        flex-wrap: nowrap;
        justify-content: center;
        padding-top: 4px;
    }

        .navbar-top-menu > li > a {
            padding: .5rem .5rem;
        }

            .navbar-top-menu > li > a > span.fas {
                font-size: 1.4em;
            }

        .navbar-top-menu > li .notifications-badge {
            top: 4px;
            margin-left: 22px;
        }

        .navbar-top-menu > li .messages-badge {
            top: 0;
            margin-left: 16px;
        }

        .navbar-top-menu > li .employee-badge {
            left: 26px;
            top: 2px;
        }

        .navbar-top-menu > li .user-initials {
            width: 26px;
            height: 26px;
            padding-top: .2rem;
        }

    .rounded-corner {
        border-radius: 0;
    }

    .sidebar {
        background: var(--Gradient-Blue, linear-gradient(180deg, #011A2C 25.85%, #396673 100%));
        background-attachment: fixed;
        padding-top: 0;
        top: 4rem;
        width: 100px;
        z-index: 1055;
    }


        .sidebar .sidenav-admin {
            align-content: start;
            padding-top: 0;
        }



    .sidebar-collapse {
        display: inline;
    }

    .navbar .company-details {
        display: none;
    }

    .label-to {
        width: auto !important;
    }

    .from-field {
        border-bottom: 0 !important;
    }
}

.navbar-admin-container {
    height: 64px;
}

.sidenav-admin {
    padding-top: 1.2rem;
}

    .sidenav-admin > li {
        display: inline-block;
        padding-top: .8rem;
        text-align: center;
        margin: 0 auto;
        width: 100%;
    }



    .sidenav-admin .nav-item, .sidenav-admin .nav-item a {
        color: #fff;
        display: inline-block;
        text-align: center;
        width: 100%;
    }

        .sidenav-admin .nav-item a.current {
            color: rgba(var(--Blue-Paynes-Gray), 1) !important;
            display: inline-block;
            background-color: rgba(var(--Blue-Alice-Blue), 1) !important;
            padding: 8px 4px 8px 4px !important;
            font-size: 13px !important;
            font-weight: 400 !important;
            border-radius: 4px !important;
            width: 94% !important;
            margin-top: .5rem !important;
            margin-left: .5rem;
            text-decoration: none !important;
        }

        .sidenav-admin .nav-item > a > span.fa-light {
            display: block;
            font-size: 1.5rem;
            padding-bottom: .2rem;
        }

        .sidenav-admin .nav-item a.nav-link {
            border-radius: 8px;
            color: #FFF;
            text-align: center;
            font-family: Inter;
            font-size: 13px;
            font-style: normal;
            font-weight: 400;
            line-height: 16px; /* 123.077% */
            padding: .5rem 0 .5rem 0;
            text-align: center;
            width: 100px;
            transform: translateZ(0);
        }

            .sidenav-admin .nav-item a.nav-link.active {
                background: rgba(255, 255, 255, 0.10);
            }

            .sidenav-admin .nav-item a.nav-link:hover:not(.active) {
                background: rgba(255, 255, 255, 0.04);
            }

            .sidenav-admin .nav-item a.nav-link:focus {
                background: rgba(255, 255, 255, 0.10);
            }

    .sidenav-admin .nav-item-title {
        color: rgba(var(--Blue-Paynes-Gray), 1);
        text-align: center;
        /*background-color: #8CC63F;*/
        background-color: rgba(var(--Blue-Alice-Blue), 1);
        padding: 8px 4px 8px 4px;
        font-weight: 400;
        font-size: 14px;
        list-style-type: none;
        z-index: 1054;
        border-radius: 4px;
        width: 99%;
        margin-top: .5rem;
    }

.user-initials {
    border-radius: 25px;
    background: rgba(var(--Blue-Paynes-Gray), 1);
    width: 32px;
    height: 32px;
    display: inline-block;
    flex-direction: column;
    color: #FFF;
    text-align: center;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 128.571% */
    padding-top: .4rem;
}

.message-actions {
    display: flex;
    height: 30px;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    align-self: stretch;
    padding-top: .75rem;
    margin-bottom: 1.5rem;
}

    .message-actions > div {
        display: flex;
        padding: 6px 8px;
        justify-content: center;
        align-items: center;
        gap: 5px;
    }

        .message-actions > div.divider {
            border-right: 1px solid rgba(var(--Blue-Paynes-Gray), 1);
            height: 80%;
            padding-right: .7rem;
        }

        .message-actions > div > a {
            color: rgba(var(--Blue-Paynes-Gray), 1);
            text-decoration: none;
        }

            .message-actions > div > a > i {
                padding-right: .2rem;
            }

/* custom radio */

.custom-radio input[type="radio"] {
    position: absolute;
    left: -9999px;
}

    .custom-radio input[type="radio"] + label {
        position: relative;
        padding: .1em 14px 0 24px;
        cursor: pointer;
        line-height: 1em;
    }

        .custom-radio input[type="radio"] + label:before {
            content: '';
            background: #fff;
            border: 1px solid #84c2ee;
            height: 18px;
            width: 18px;
            border-radius: 50%;
            position: absolute;
            top: 0;
            left: 0;
        }

        .custom-radio input[type="radio"] + label:after {
            content: '';
            background: #84c2ee content-box;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            padding: 3px;
            transform: scale(2);
            transition: transform 0.3s linear, opacity 0.3s linear;
        }

    .custom-radio input[type="radio"]:checked + label:after {
        opacity: 1;
        transform: scale(1);
    }

.borderless-field {
    border-top: 1px solid #E9ECEF;
    border-bottom: 1px solid #E9ECEF;
    margin-bottom: .4rem;
}

.borderless-field-no-top {
    border-top: 0;
}

.borderless-field-no-bottom {
    border-bottom: 0;
}

.borderless-field input[type=text] {
    border: 0;
}

    .borderless-field input[type=text]:focus {
        box-shadow: none;
        outline: none;
    }

.borderless-field > div > label {
    padding-top: .6rem;
    width: 60px;
}

.borderless-field .ss-main:not(.control-border) {
    border: 0;
}

    .borderless-field .ss-main:not(.control-border):focus {
        box-shadow: none;
        outline: none;
    }

    .borderless-field .ss-main:not(.control-border) .ss-single, .borderless-field .ss-main:not(.control-border) .ss-values .ss-value, .ss-main .ss-values .ss-value {
        border-radius: 4px;
        border: 1px solid rgba(var(--Blue-Alice-Blue), 1);
        background: rgba(var(--Blue-Alice-White), 1);
        padding: 2px 8px;
    }

        .borderless-field .ss-main:not(.control-border) .ss-values .ss-value .ss-value-text, .ss-main .ss-values .ss-value .ss-value-text {
            color: inherit;
        }

        .borderless-field .ss-main:not(.control-border) .ss-values .ss-value .ss-value-delete, .ss-main .ss-values .ss-value .ss-value-delete {
            border-left: 1px solid rgba(33, 37, 41, 0.9);
        }

            .borderless-field .ss-main:not(.control-border) .ss-values .ss-value .ss-value-delete svg path, .ss-main .ss-values .ss-value .ss-value-delete svg path {
                stroke: rgba(33, 37, 41, 0.9);
            }

    .borderless-field .ss-main:not(.control-border) .ss-arrow {
        display: none;
    }



/* FONT AWESOME DUOTONE ICONS - BEGIN */
.icon-duotone {
    position: relative;
    padding-left: 1.25em; /* make space for the width of the absolutely positioned icon */
    display: none;
}

    .icon-duotone.popover {
        border: none;
        display: inline;
        padding-left: 1rem;
        padding-right: .8rem;
        word-wrap: normal;
    }

    .icon-duotone.star.popover:after {
        padding-left: 0;
    }

    .icon-duotone::before,
    .icon-duotone::after {
        font: var(--fa-font-duotone);
        /* include the basic Font Awesome font style settings if you haven't already */
        display: inline-block;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        /* position both layers of the icon to the left, set our fixed-width width, horizontally center layers, and then vertically align them so they flex with different line heights */
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 1.25em;
        text-align: center;
    }

    .icon-duotone::before {
        color: var(--fa-primary-color, inherit);
        opacity: 1;
        opacity: var(--fa-primary-opacity, 1.0);
    }

    .icon-duotone::after {
        color: var(--fa-secondary-color, inherit);
        opacity: var(--fa-secondary-opacity, 0.4);
    }


span.icon-duotone.small {
    font-size: 1.2em;
    margin-top: -.2em;
}

span.icon-duotone:not(.small) {
    font-size: 1.4em;
}

span.icon-duotone.comments::before {
    content: "\f086";
}

span.icon-duotone.comments::after {
    content: "\f086\f086";
}

span.icon-duotone.share::before {
    content: "\f14d";
}

span.icon-duotone.share::after {
    content: "\f14d\f14d";
}

span.icon-duotone.trash::before {
    content: "\f1f8";
}

span.icon-duotone.trash::after {
    content: "\f1f8\f1f8";
}

span.icon-duotone.trash-undo::before {
    content: "\f895";
}

span.icon-duotone.trash-undo::after {
    content: "\f895\f895";
}

span.icon-duotone.plus-square::before {
    content: "\f0fe";
}

span.icon-duotone.plus-square::after {
    content: "\f0fe\f0fe";
}

span.icon-duotone.file-lines::before {
    content: "\f15c";
}

span.icon-duotone.file-lines::after {
    content: "\f15c\f15c";
}

span.icon-duotone.link::before {
    content: "\f0c1";
}

span.icon-duotone.link::after {
    content: "\f0c1\f0c1";
}

span.icon-duotone.square-pen::before {
    content: "\f14b";
}

span.icon-duotone.square-pen::after {
    content: "\f14b\f14b";
}

span.icon-duotone.download::before {
    content: "\f019";
}

span.icon-duotone.download::after {
    content: "\f019\f019";
}

span.icon-duotone.paper-plane::before {
    content: "\f1d8";
}

span.icon-duotone.paper-plane::after {
    content: "\f1d8\f1d8";
}

span.icon-duotone.clock::before {
    content: "\f017";
}

span.icon-duotone.clock::after {
    content: "\f017\f017";
}

span.icon-duotone.circle-info::before {
    content: "\f05a";
}

span.icon-duotone.circle-info::after {
    content: "\f05a\f05a";
}

span.icon-duotone.copy::before {
    content: "\f0c5";
}

span.icon-duotone.copy::after {
    content: "\f0c5\f0c5";
}

span.icon-duotone.eye::before {
    content: "\f06e";
}

span.icon-duotone.eye::after {
    content: "\f06e\f06e";
}

span.icon-duotone.poll::before {
    content: "\f200";
}

span.icon-duotone.poll::after {
    content: "\f200\f200";
}

span.icon-duotone.building::before {
    content: "\f1ad";
}

span.icon-duotone.building::after {
    content: "\f1ad\f1ad";
}

span.icon-duotone.plus-user::before {
    content: "\f234";
}

span.icon-duotone.plus-user::after {
    content: "\f234\f234";
}

span.icon-duotone.right-from-bracket::before {
    content: "\f2f5";
}

span.icon-duotone.right-from-bracket::after {
    content: "\f2f5\f2f5";
}

span.icon-duotone.right-to-bracket::before {
    content: "\f2f6";
}

span.icon-duotone.right-to-bracket::after {
    content: "\f2f6\f2f6";
}

span.icon-duotone.star::before {
    content: "\f005";
}

span.icon-duotone.star::after {
    content: "\f005\f005";
    padding-left: 6px;
}

span.icon-duotone.envelope::before {
    content: "\f0e0";
}

span.icon-duotone.envelope::after {
    content: "\f0e0\f0e0";
}

span.icon-duotone.gear-user::before {
    content: "\f4fe";
}

span.icon-duotone.gear-user::after {
    content: "\f4fe\f4fe";
}

span.icon-duotone.popover-icon::before {
    content: "\f059";
}

span.icon-duotone.popover-icon::after {
    content: "\f059\f059";
}

span.icon-duotone.popover-icon.small::before {
    padding-left: 6px;
}

span.icon-duotone.popover-icon.small::after {
    padding-left: 6px;
}

span.icon-duotone.info::before {
    content: "\f05a";
}

span.icon-duotone.info::after {
    content: "\f05a\f05a";
}

span.icon-duotone.upload::before {
    content: "\f093";
}

span.icon-duotone.upload::after {
    content: "\f093\f093";
}

span.icon-duotone.message-exclamation::before {
    content: "\f4a5";
}

span.icon-duotone.message-exclamation::after {
    content: "\f4a5\f4a5";
}

span.icon-duotone.home::before {
    content: "\f015";
}

span.icon-duotone.home::after {
    content: "\f015\f015";
}

span.icon-duotone.folder-open::before {
    content: "\f07c";
}

span.icon-duotone.folder-open::after {
    content: "\f07c\f07c";
}

span.icon-duotone.pencil::before {
    content: "\f303";
}

span.icon-duotone.pencil::after {
    content: "\f303\f303";
}

span.icon-duotone.user-lock::before {
    content: "\f502";
}

span.icon-duotone.user-lock::after {
    content: "\f502\f502";
}

span.icon-duotone.list-check::before {
    content: "\f0ae";
}

span.icon-duotone.list-check::after {
    content: "\f0ae\f0ae";
}

span.icon-duotone.magnifying-glass::before {
    content: "\f002";
}

span.icon-duotone.magnifying-glass::after {
    content: "\f002\f002";
}

span.icon-duotone.pen-to-square::before {
    content: "\f044";
}

span.icon-duotone.pen-to-square::after {
    content: "\f044\f044";
}

span.icon-duotone.message-lines::before {
    content: "\f4a6";
}

span.icon-duotone.message-lines::after {
    content: "\f4a6\f4a6";
}

span.icon-duotone.gear::before {
    content: "\f013";
}

span.icon-duotone.gear::after {
    content: "\f013\f013";
}

span.icon-duotone.switch::before {
    content: "\f074";
}

span.icon-duotone.switch::after {
    content: "\f074\f074";
}

span.icon-duotone.angle-right::before {
    content: "\f105";
}

span.icon-duotone.angle-right::after {
    content: "\f105\f105";
}

span.icon-duotone.language::before {
    content: "\f1ab";
}

span.icon-duotone.language::after {
    content: "\f1ab\f1ab";
}

span.icon-duotone.circle-check::before {
    content: "\f058";
}

span.icon-duotone.circle-check::after {
    content: "\f058\f058";
}

span.icon-duotone.ban::before {
    content: "\f05e";
}

span.icon-duotone.ban::after {
    content: "\f05e\f05e";
}

span.icon-duotone.circle-minus::before {
    content: "\f056";
}

span.icon-duotone.circle-minus::after {
    content: "\f056\f056";
}

/* FONT AWESOME DUOTOME ICONS - END */

.ee-task-details .completed-by {
    background-color: rgba(235, 247, 229,1);
    color: rgba(81, 121, 130,1);
    text-align: center;
    padding: 8px 0;
    border-radius: 4px;
    margin: 14px auto;
}

    .ee-task-details .completed-by .completed-by-header {
        font-size: 1.1rem;
        font-weight: 600;
    }

.btn.btn-disabled {
    background-color: #efefef;
}

.partner-hierarchy-options {
    border-radius: 4px;
    background: #D7EBF9;
    display: flex;
    padding: 6px;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    margin-bottom: 12px;
}

    .partner-hierarchy-options .level {
        color: #396673;
        font-weight: 700;
        line-height: 24px;
        padding-top: 4px;
        text-align: center;
    }


td.message-type {
    text-align: center;
}

    td.message-type > div {
        border-radius: 100px;
        color: #396673;
        display: inline-block;
        height: fit-content;
        background-size: contain;
        line-height: 24px;
        width: 80px;
        text-align: center;
    }

        td.message-type > div.draft {
            background-color: #EBEBEB;
        }

        td.message-type > div.sent {
            background-color: #EBF7E5;
        }


.dataTables_wrapper .dataTables_processing {
    position: absolute;
    top: 66px;
    padding-top: 50px;
    padding-bottom: 86px;
    z-index: 1000 !important;
}

.tall-table-header .dataTables_wrapper .dataTables_processing {
    top: 84px;
}


.form-group-sm > a.no-label {
    margin-top: 19.8px;
}


a[disabled="disabled"] {
    pointer-events: auto;
    cursor: default;
    color: rgb(150, 150, 150);
}

    a[disabled="disabled"]:active {
        pointer-events: none;
    }


.link-copy-success {
    display: inline-flex;
    position: absolute;
}

    .link-copy-success > div.success-text {
        display: flex;
        justify-content: center;
        align-items: center;
        width: fit-content;
        font-size: 12px;
        padding: 0 8px 0 4px;
        background: rgba(var(--Blue-Alice-Blue), 1);
        border-radius: 0 5px 5px 0;
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
    }

    .link-copy-success > div.triangle-point-left {
        position: relative;
        margin-left: 4px;
        --r: 2px; /* border radius */
        width: 10px;
        aspect-ratio: 1/2;
        -webkit-mask: linear-gradient(90deg,#0000 calc(var(--r)/sqrt(2)),#000 0), radial-gradient(var(--r) at calc(var(--r)*sqrt(2)) 50%,#000 98%,#0000 101%);
        clip-path: polygon(0 50%,100% 100%,100% 0);
        background: rgba(var(--Blue-Alice-Blue), 1);
    }


/* Flexbox Form Field Pair */
.form-field-pair_wrapper {
    display: flex;
    flex-wrap: wrap;
    column-gap: 1rem;
}

.form-field-pair_item {
    flex: 1 1 198px;
}

/************************
    CHAT
*************************/

/* Outer Wrapper */
.chat {
    width: 100%;
    border: 1px solid var(--Content-Understated-Inverted);
    position: relative;
    height: calc(100vh - 200px);
}

.chat__compose-wrapper {
    width: 100%;
}

.chat__header {
    border-bottom: 1px solid var(--Content-Understated-Inverted);
    padding: 16px;
    width: 100%;
}

.chat__download {
    float: right;
    font-size: 1.5rem;
}

.chat__messages-wrapper {
    background: var(--Background-Secondary);
    padding: 16px 16px 0 16px;
}

.chat__message-me {
    background: var(--Content-Link-Pressed);
    border: var(--Content-Link-Pressed);
}

.chat__message-day {
    color: var(--Blacks-Battleship-Gray);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 114.286% */
}

.chat__employees {
    padding: 8px;
}

/************************
    ACTIVE CHATS
*************************/

.activeChat__wrapper {
    border: 1px solid var(--Content-Understated-Inverted);
    border-radius: 16px;
    height: calc(100vh - 200px);
    overflow: hidden;
    box-sizing: border-box;
}

.activeChats__wrapper {
    scrollbar-color: #cecece;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
    height: calc(100vh - 270px);
    overflow: hidden;
    overflow-y: auto;
    box-sizing: border-box;
}

.activeChat__menu {
    border-bottom: 1px solid var(--Content-Understated-Inverted);
    display: flex;
    margin-bottom: 16px;
    padding: 16px;
    width: 100%;
}

.activeChat__search {
    flex-grow: 1;
}

.activeChat__add {
    color: rgba(var(--Blue-Paynes-Gray), 1);
    font-size: 1.5rem;
    padding-left: 16px;
    text-align: right;
}

.activechat {
    border-radius: 8px;
    display: flex;
    margin: 8px 0;
    padding: 8px;
}

    .activechat:hover {
        cursor: pointer;
    }

    .activechat.selected {
        background-color: rgba(var(--Blue-Alice-White), 1);
    }

    .activechat.unread {
        font-weight: 700;
    }

.activechat__icon {
    display: flex;
    width: 44px;
    height: 44px;
    padding: 4px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 100px;
    background: var(--Gradient-Blue, linear-gradient(180deg, #011A2C 25.85%, #396673 100%));
    color: #B9DCF5;
    font-family: "DM Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 27px; /* 150% */
}

.activechat__details {
    flex-grow: 1;
    margin-left: 8px;
}

.activechat__name {
    flex-grow: 1;
    color: var(--Content-Primary);
    /* Text/Regular */
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 21px; /* 150% */
}

.activechat__date {
    color: var(--Content-Secondary);
    /* Text S/Regular */
    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 150% */
}

.activechat__preview {
    color: rgb(33, 37, 41, .7);
    font-size: .8rem;
}

.activeChat__search input:focus {
    box-shadow: none;
}

.announcement-comments .form-check-input {
    height: 1.5em;
    margin-right: 6px;
    width: 2.7em;
}

    .announcement-comments .form-check-input:checked {
        background-color: #B9DCF5;
        border-color: #B9DCF5;
    }

.announcement-comments .form-check-label {
    color: #747474 !important;
    text-align: left;
    font-family: DM Sans;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    padding-top: 2px;
}

.announcement-comments .form-check-input:checked + .form-check-label {
    color: var(--Blacks-Eerie-Black) !important;
}

/************************
    EMPLOYEE CHANGE REQUESTS
*************************/
.employeechangerequests__check-all {
    padding-bottom: 8px;
}

.employeechangerequests__badge {
    display: flex;
    width: 24px;
    height: 24px;
    padding: 2px 8px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 100px;
    background: #EA4040;
    color: var(--Content-Primary-Invert, #FFF);
    /* Heading M/Strong */
    font-family: "DM Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
    margin-left: 8px;
}


/************************
    THEMES
*************************/

.employee-view-options__wrapper {
    border: 1px solid var(--Content-Understated-Inverted);
    border-radius: 16px;
    height: calc(100vh - 200px);
    overflow: hidden;
    overflow-y: auto;
    box-sizing: border-box;
}

.employee-view-options__buttons {
    padding: 16px;
}

    .employee-view-options__buttons > a {
        margin-bottom: 16px;
    }

.employee-view-options {
    border-top: 1px solid var(--Content-Understated-Inverted);
    padding: 16px;
    scrollbar-color: #cecece;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
    height: calc(100vh - 270px);
    overflow: hidden;
    overflow-y: auto;
    box-sizing: border-box;
}

    .employee-view-options .accordion-button {
        background-color: #fff;
        color: rgb(33, 37, 41);
    }


        .employee-view-options .accordion-button:after {
            background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000000'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
        }

.theme {
    display: flex;
    padding: .5rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    border-radius: .5rem;
    background: #F3F3F3;
    margin: 16px 0;
    border: 1px transparent;
    transition: border .3s ease-out, box-shadow .3s ease-out;
}

    .theme:hover {
        cursor: pointer;
    }

    .theme.theme__selected {
        border: 1px solid var(--Content-Brand-1);
        box-shadow: 0px 0px 4px 0px var(--Content-Brand-1);
    }

.theme__name {
    font-family: Inter;
    font-size: .9rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.125rem; /* 150% */
    flex-grow: 1;
    color: #252525;
}

.theme__color {
    display: flex;
    width: 1rem;
    aspect-ratio: 1/1;
    height: auto;
    padding: .625rem;
    flex-direction: column;
    align-items: flex-start;
    gap: .625rem;
    border-radius: 50%;
    border: 1px solid #A2A2A2;
}

.theme__color-backdrop {
    width: 1.8rem;
}

.theme__add {
    display: flex;
    padding: 4px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid var(--Content-Tertiary);
    background: #FFF;
    color: var(--Content-Tertiary, #A2A2A2);
    /* Heading L/Regular */
    font-family: "DM Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 27px; /* 150% */
    cursor: pointer;
}

.theme__custom .sp-replacer {
    border-radius: 4px;
    background: var(--Content-Understated-Inverted);
    border: 0;
    display: flex;
    padding: .375rem;
    align-items: center;
    gap: 4px;
}

.theme__custom .sp-preview {
    width: 1.5rem;
    aspect-ratio: 1/1;
    height: auto;
    border-radius: .125rem;
    border: 1px solid var(--Content-Tertiary);
}


.theme__custom .sp-dd {
    padding: 0;
    font-size: .75rem;
    color: #656565;
}

.theme__custom .form-group-sm label {
    color: var(--Content-Secondary);
    /* Text S/Regular */
    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 150% */
}

.theme__custom--close {
    display: flex;
    padding: 4px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid var(--Content-Tertiary);
    background: #FFF;
    color: var(--Content-Tertiary, #A2A2A2);
    /* Heading L/Regular */
    font-family: "DM Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 27px; /* 150% */
    width: 100%;
}

.theme__name input {
    color: var(--Content-Secondary);
    /* Text/Regular */
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 21px; /* 150% */
    border-top: 0;
    border-left: 0;
    border-right: 0;
}

    .theme__name input:focus-visible {
        outline: 0;
    }

.mobile__wrapper {
    border-radius: 36px;
    border: 2px solid var(--Content-Link-Alt-Hover);
    box-shadow: 0px 4px 0px 0px var(--Background-Base-Hover);
    margin: 0 auto;
    padding: 16px 16px 99px 16px;
    width: 335px;
    height: 700px;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.mobile__header {
    display: flex;
    width: 100%;
    padding: 18px 16px;
    align-items: center;
    gap: 16px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(8px);
    position: absolute;
    top: 0;
    left: 0;
    border-top-left-radius: 36px;
    border-top-right-radius: 36px;
    min-height: 60px;
}

    .mobile__header img {
        max-width: 300px;
    }

.mobile__search {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    align-content: flex-start;
    gap: 16px;
    align-self: stretch;
    flex-wrap: wrap;
    flex-grow: 1;
}

    .mobile__search > div {
        display: flex;
        height: 47px;
        padding: 0px 16px;
        justify-content: center;
        align-items: center;
        gap: 8px;
        flex: 1 0 0;
        border-radius: 16px;
        background: rgba(255, 255, 255, .75);
        box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.08), 0.75px 0.75px 0px 0px rgba(255, 255, 255, 0.80) inset;
        transition: box-shadow .3s ease-out;
        /* backdrop-filter: blur(8px); -- disabled due to causing laggy scroll */
    }

        .mobile__search > div:focus-within {
            box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.24), 0.75px 0.75px 0px 0px rgba(255, 255, 255, 0.64) inset;
        }

        .mobile__search > div > span {
            font-size: 1rem !important;
        }

        .mobile__search > div > input {
            flex: 1 0 0;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 21px; /* 150% */
            background: transparent;
            border: none;
        }

            .mobile__search > div > input:focus {
                outline: none;
            }


.mobile__tabs {
    display: flex;
    height: 2.9375rem;
    padding: 0rem 0.5rem;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    border-radius: 1rem;
    background: rgba(255, 255, 255, .75);
    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.08), 0.75px 0.75px 0px 0px rgba(255, 255, 255, 0.80) inset;
    /* backdrop-filter: blur(8px); -- disabled due to causing laggy scroll */
    margin: 8px auto 16px auto;
}

    /* Wrapper for each tab */
    .mobile__tabs > div {
        align-items: center;
        display: flex;
        flex: 1 1 0;
        gap: 0.5rem;
        height: 2rem;
        justify-content: center;
        padding: 0rem 1rem;
    }

/* Modifier for the active tab -- Must be wrapped around the Single Tab block */
.mobile__tabs-active {
    border-radius: 12px;
    border: 1px solid rgba(var(--Content-Link), 1);
    background: rgba(0, 121, 208, 0.05);
    color: rgba(var(--Content-Link), 1);
    /* backdrop-filter: blur(8px); -- disabled due to causing laggy scroll */
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

    .mobile__tabs-active .mobile__tab .mobile__tab-title {
        color: rgba(var(--Content-Link), 1);
    }

/* Single Tab */
.mobile__tab {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    flex: 1 0 0;
    text-decoration: none !important;
}

/* Text styling for tab title */
.mobile__tabs .mobile__tab-title {
    color: var(--Content-Primary);
    text-align: center;
    font-family: "DM Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.3125rem; /* 150% */
}

.mobile__page-cards {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    flex: 1 1 0;
    max-width: 100%;
    height: auto;
}

/* Page Card */
.mobile__page-card {
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.08), 0.75px 0.75px 0px 0px rgba(255, 255, 255, 0.80) inset;
    /* backdrop-filter: blur(8px); -- disabled due to causing laggy scroll */
    transition: background .3s ease-out;
    text-decoration: none;
}

    /* Container for Page Card content */
    .mobile__page-card .mobile__page-card__content {
        display: flex;
        padding: 1rem;
        align-items: center;
        gap: 1rem;
        align-self: stretch;
    }

/* Page Card Icon */
.mobile__page-card__content .mobile__page-card__icon {
    display: flex;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0.5rem;
    justify-content: center;
    align-items: center;
    gap: 0.3125rem;
    border-radius: 8px;
    border: 1px solid var(--Content-Understated-Inverted, #DDD);
    background: var(--Background-Primary, #FFF);
    color: rgba(var(--Content-Link), 1);
}

.mobile__page-card__icon > span {
    font-size: 1.25rem;
    flex-shrink: 0;
}

/* Page Card Name */
.mobile__page-card__content .mobile__page-card__name {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
    min-width: 0;
}

.mobile__page-card__name > span {
    height: 1.5rem;
    align-self: stretch;
    overflow: hidden;
    color: var(--Content-Primary);
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Heading XL/Strong */
    font-family: "DM Sans";
    font-size: 1rem;
    font-style: normal;
    font-weight: normal;
    line-height: normal; /* 140% */
}

/* Page Card - add arrow to indicate parent tile */
.mobile__page-card__name.parent > span::after {
    font-family: 'FontAwesome';
    font-size: 20px;
    content: "\f105";
    float: right;
    color: rgba(37, 37, 37, .6);
}

.mobile__navigation {
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
}

/* Mobile Navigation Container */
.mobile__navigation-nav {
    display: flex;
    width: 100%;
    height: 5.8125rem;
    padding: 1rem 1.25rem 0rem 1.25rem;
    justify-content: space-around;
    align-items: flex-start;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px -4px 14px 0px rgba(0, 0, 0, 0.08);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    /* Fix to bottom 
    position: fixed;
    bottom: 0;
    z-index: 1000;
    transition: bottom .6s ease-in;*/
    position: absolute;
    bottom: 0;
    border-bottom-left-radius: 36px;
    border-bottom-right-radius: 36px;
}

/* Mobile Navigation Item */
.mobile__navigation-nav__item {
    display: flex;
    width: 3.375rem;
    height: 3.375rem;
    padding-top: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.6875rem;
    flex-shrink: 0;
}

    /* Item Icon */
    .mobile__navigation-nav__item .mobile__navigation-nav__icon {
        width: 1.68775rem;
        height: 1.5rem;
        flex-shrink: 0;
        color: var(--Content-Link-Pressed, #034E84);
        padding-left: 1px;
        position: relative;
        text-decoration: none;
    }

    /* Item Icon (w/ active modifier) */
    .mobile__navigation-nav__item.active .mobile__navigation-nav__icon {
        color: rgb(var(--Content-Link));
    }

    /* Unread Badge (positioned on top of icon) */
    .mobile__navigation-nav__item .mobile__navigation-nav__unread {
        width: 0.625rem;
        height: 0.625rem;
        position: absolute;
        right: -0.15rem;
        top: -0.1rem;
    }

    /* Item Icon (w/ disabled modifier) */
    .mobile__navigation-nav__item.mobile__navigation-nav__item--disabled .mobile__navigation-nav__icon {
        color: #808080;
        cursor: default;
        pointer-events: none;
    }

    /* Item Icon - click coloring */
    .mobile__navigation-nav__item:not(.mobile__navigation-nav__item--button) .mobile__navigation-nav__icon:focus {
        color: rgb(var(--Content-Link));
    }

    /* Item Highlight Bar (positioned underneath icon) */
    .mobile__navigation-nav__item .mobile__navigation-nav__highlight {
        width: 2.3125rem;
        height: 0.25rem;
        border-radius: 0.125rem;
        background: rgb(var(--Content-Link));
        opacity: 0;
    }

    /* Show Highlight Bar (w/ active modifier) */
    .mobile__navigation-nav__item.active .mobile__navigation-nav__highlight {
        opacity: 1;
    }

/* Mobile Navigation Item - modifier to style as a button */
.mobile__navigation-nav__item--button {
    border-radius: 6.25rem;
    background: rgb(var(--Content-Link));
    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.08);
    padding-top: 10px;
    padding-left: 2px;
}

    .mobile__navigation-nav__item--button .mobile__navigation-nav__icon {
        color: var(--Content-Primary-Invert, #FFFFFF);
    }

/* Mobile Navigation Item - modifier to style as a dropdown option */
.mobile__navigation-nav__item--dropdown {
    padding-right: 10px;
    padding-top: 12px;
}

/* Item Button  - click coloring */
.mobile__navigation-nav__item--button {
    transition: background .3s ease-out;
}

    .mobile__navigation-nav__item--button:focus-within {
        background: #0060a6;
    }

.toggle-filters {
    display: inline-flex;
    align-items: center;
}

    .toggle-filters::before {
        font-family: "Font Awesome 6 Pro";
        font-weight: 900;
        content: "\f105";
        margin-right: 8px;
        transition: transform 0.3s ease;
    }

    .toggle-filters[aria-expanded="true"]::before {
        content: "\f107";
    }

.pages__clone .pages__clone-page .collapsible-dummy {
    display: inline-block;
    width: 14px;
}

.pages__clone .pages__clone-page .collapsible::before {
    font-family: 'Font Awesome 6 Pro';
    font-size: 1.2em;
    font-weight: 100;
    content: "\f105";
    padding-top: 0px;
    display: inline-block;
}

.pages__clone .pages__clone-page .collapsible.show::before {
    font-family: 'Font Awesome 6 Pro';
    font-size: 1.2em;
    font-weight: 100;
    content: "\f107";
    display: inline-block;
}

.pages__clone .pages__clone-page .collapsible:hover {
    cursor: pointer;
}


.white-background-boxshadow {
    background: var(--Background-Primary, #FFF);
    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.08);
    opacity: .9999999;
}


.form-group-instructions {
    color: var(--Neutral-Placeholder-Text);
    /* Text S/Regular */
    font-family: Inter;
    font-size: 12px;
    font-style: italic;
    font-weight: 400;
    line-height: 18px; /* 150% */
}



/*********************************/
/* Input Slider                  */
/*********************************/

/* Firefox */
input.form-range::-moz-range-thumb {
    width: 1.125rem;
    height: auto;
    aspect-ratio: 1/1;
    background-color: #f2f9fd;
    filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, .25));
}

input.form-range::-moz-range-track {
    background-color: #b9dcf5;
}

/* Webkit browsers */
input.form-range::-webkit-slider-thumb {
    width: 1.125rem;
    height: auto;
    aspect-ratio: 1/1;
    background-color: #f2f9fd;
    filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, .25));
}

input.form-range::-webkit-slider-runnable-track {
    background-color: #b9dcf5;
}





/**************************************/
/* Employee View Site Header & Footer */
/**************************************/

/* Tag Select Pills */

.tag-select-pill {
    display: flex;
    height: 1.5rem;
    padding: 0.5rem;
    align-items: center;
    justify-content: center;
    gap: 0.3125rem;
    cursor: pointer;
    border-radius: 0.25rem;
    border: 1px solid var(--Content-Link-Pressed, #034E84);
    background: var(--Content-Link-Pressed, #034E84);
    color: var(--Content-Primary-Invert, #FFF);
    transition: color .3s ease-out, border .3s ease-out, background .3s ease-out;
}

    .tag-select-pill.tag-select-pill--unselected {
        border-radius: 0.25rem;
        border: 1px solid var(--Content-Understated-Inverted, #DDD);
        background: var(--Content-Primary-Invert, #FFF);
        color: var(--Content-Primary, #252525);
    }

    .tag-select-pill .tag-select-pill__text {
        /* Text S/Regular */
        font-family: Inter;
        font-size: 0.75rem;
        font-style: normal;
        font-weight: 400;
        line-height: 1.125rem; /* 150% */
    }

    .tag-select-pill i.tag-select-pill__icon {
        position: relative;
        width: 0.5rem;
        height: 0.5rem;
    }

        .tag-select-pill i.tag-select-pill__icon::before {
            content: "\f00d"; /* Unicode for the fa-xmark icon */
            font-family: "Font Awesome 6 Pro";
            font-weight: 400; /* Regular weight */
            font-style: normal;
            font-size: .75rem;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

    .tag-select-pill.tag-select-pill--unselected i.tag-select-pill__icon::before {
        content: "\2b";
    }

/* Shortcut Pills */

.shortcut-pill {
    display: flex;
    padding: 0.25rem 0.5rem;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    align-self: stretch;
    border-radius: 0.25rem;
    background: var(--Background-Secondary, #F2F9FD);
    cursor: pointer;
}

    .shortcut-pill i.shortcut-pill__drag-icon {
        position: relative;
        width: .625rem;
        height: 1.25rem;
        color: #698B95;
    }

        .shortcut-pill i.shortcut-pill__drag-icon::before {
            content: "\e411"; /* Unicode for the fa-xmark icon */
            font-family: "Font Awesome 6 Pro";
            font-weight: 400; /* Regular weight */
            font-style: normal;
            font-size: 1rem;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

    .shortcut-pill .shortcut-pill__text {
        height: 1.3125rem;
        flex: 1 0 0;
        color: var(--Content-Primary, #252525);
        /* Heading S/Regular */
        font-family: "DM Sans";
        font-size: 0.875rem;
        font-style: normal;
        font-weight: 400;
        line-height: 1.3125rem; /* 150% */

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .shortcut-pill i.shortcut-pill__x-icon {
        position: relative;
        width: .75rem;
        height: .75rem;
        color: #252525;
    }

        .shortcut-pill i.shortcut-pill__x-icon::before {
            content: "\f00d"; /* Unicode for the fa-xmark icon */
            font-family: "Font Awesome 6 Pro";
            font-weight: 400; /* Regular weight */
            font-style: normal;
            font-size: 1rem;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

/* Color Selectors */

.color-selector {
    display: flex;
    height: 1.625rem;
    padding: 0.25rem;
    align-items: center;
    gap: 0.25rem;
    align-self: stretch;
    border-radius: 0.25rem;
    border: 1px solid var(--bg-container-DK, #D9D9D9);
    background: #F3F3F3;
    cursor: pointer;
}

    .color-selector .color-selector__color-preview {
        width: 1.125rem;
        height: 1.125rem;
        border-radius: 0.125rem;
        border: 1px solid var(--bg-container-DK, #D9D9D9);
        background: #E8E8E8;
    }

    .color-selector .color-selector__color-value {
        color: var(--Content-Secondary, #656565);
        text-align: center;
        font-family: Inter;
        font-size: 0.75rem;
        font-style: normal;
        font-weight: 400;
        line-height: 120%; /* 0.9rem */
    }

.flex-50-percent {
    flex: 1 1 50%;
}



.import-upload-container {
    flex-direction: column;
    justify-content: flex-start;
    gap: 1.5rem;
    width: 100%;
    max-width: 100%;
    min-height: 400px;
    display: flex;
    overflow: hidden;
}

.census-actions-section {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: .5rem;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 0;
    padding: 1.5rem;
    display: flex;
}

.census-actions-description {
    color: #64748b;
    text-align: center;
    margin: 0;
    font-size: .875rem;
}

.census-actions-buttons {
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
    display: flex;
}

.census-action-button.secondary {
    color: #475569;
    background-color: #fff;
    border-color: #d1d5db;
}

.census-action-button {
    cursor: pointer;
    white-space: nowrap;
    border: 1px solid;
    border-top-color: currentcolor;
    border-right-color: currentcolor;
    border-bottom-color: currentcolor;
    border-left-color: currentcolor;
    border-radius: .375rem;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1rem;
    font-size: .875rem;
    font-weight: 500;
    transition: all .15s ease-in-out;
    display: flex;
    text-decoration: none;
}


.table-container {
    scrollbar-color: #c1c1c1 #f1f1f1;
    scrollbar-width: thin;
}

.table-container {
    border: 1px solid var(--Blue-Gray);
    background-color: #fff;
    border-radius: .5rem;
    width: 100%;
    max-height: 60vh;
    position: relative;
    overflow-y: scroll;
    overflow-x: hidden;
}

.import-drop-zone {
    text-align: center;
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;
    background-color: #f9fafb;
    border: 2px dashed #d1d5db;
    border-radius: .5rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 100%;
    min-height: 300px;
    margin: 0;
    padding: 4rem 2rem;
    transition: border-color .15s ease-in-out, background-color .15s ease-in-out;
    display: flex;
    position: relative;
    overflow: hidden;
}

    .import-drop-zone:hover {
        background-color: #eff6ff;
        border-color: #3b82f6;
    }

.dropzone-content {
    position: relative;
    z-index: 2;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}


.dropzone-file-added:hover {
    cursor: pointer !important;
}

.import-upload-icon {
    margin-bottom: 1.5rem;
    width: 4rem;
    height: 4rem;
    color: #9ca3af;
    font-size: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    pointer-events: none;
}

.import-drop-zone.drag-over .import-upload-icon, .import-drop-zone:hover .import-upload-icon {
    color: #3b82f6;
}

.import-drop-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 0.75rem;
    text-align: center;
    word-wrap: break-word;
    max-width: 100%;
    position: relative;
    z-index: 2;
    pointer-events: none;
}

.import-drop-subtitle {
    font-size: 1rem;
    color: #6b7280;
    margin-bottom: 1rem;
    text-align: center;
    word-wrap: break-word;
    max-width: 100%;
    position: relative;
    z-index: 2;
    pointer-events: none;
}

.import-supported-formats {
    font-size: 0.875rem;
    color: #9ca3af;
    text-align: center;
    word-wrap: break-word;
    max-width: 100%;
    position: relative;
    z-index: 2;
    pointer-events: none;
}

.imprt-errors-wrapper {
    border: 1px solid #cecece;
    border-radius: 8px;
}

.dropzone-uploaded-file-display {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0.75rem;
    background-color: white;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    width: 100%;
    max-width: 100%;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    min-height: 4.5rem;
}

    .dropzone-uploaded-file-display .file-name {
        width: 250px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .dropzone-uploaded-file-display .file-details {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

.dropzone-save-as-group-section {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
    padding: 0;
    background-color: transparent;
    border: none;
    border-radius: 0;
    min-height: 2.5rem;
}

    .dropzone-save-as-group-section .save-as-group-checkbox {
        pointer-events: auto;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        white-space: nowrap;
        padding: 0.5rem 0.75rem;
        background-color: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 0.375rem;
        transition: background-color 0.15s ease-in-out;
        cursor: pointer;
        flex: 1;
    }

        .dropzone-save-as-group-section .save-as-group-checkbox:hover {
            background-color: #f1f5f9;
        }

        .dropzone-save-as-group-section .save-as-group-checkbox input[type="checkbox"] {
            width: 1rem;
            height: 1rem;
            border: 1px solid #d1d5db;
            border-radius: 0.25rem;
            accent-color: var(--Blue-Paynes-Gray);
            cursor: pointer;
            flex-shrink: 0;
        }

    .dropzone-save-as-group-section .save-as-group-label {
        user-select: none;
        font-size: 0.875rem;
        font-weight: 500;
        color: #374151;
        flex-shrink: 0;
    }

    .dropzone-save-as-group-section .group-name-input-section {
        margin-left: 0;
        flex: 1;
        height: 2rem;
        display: flex;
        align-items: center;
    }

    .dropzone-save-as-group-section .group-name-input {
        pointer-events: auto;
        max-width: 100%;
        width: 100%;
        height: 2rem;
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
        border: 1px solid #d1d5db;
        border-radius: 0.25rem;
        background-color: white;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out, color 0.15s ease-in-out;
    }

        .dropzone-save-as-group-section .group-name-input:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 1px #3b82f6;
        }

        .dropzone-save-as-group-section .group-name-input:disabled {
            background-color: #f9fafb;
            color: #9ca3af;
            border-color: #e5e7eb;
            cursor: not-allowed;
        }

            .dropzone-save-as-group-section .group-name-input:disabled::placeholder {
                color: #d1d5db;
            }

.dropzone-uploaded-file-display .remove-file-button, .dropzone-uploaded-file-display .replace-file-button {
    pointer-events: auto;
    flex-shrink: 0;
    margin-left: auto;
    color: #6b7280;
    cursor: pointer;
    background: none;
    border: none;
    border-radius: .25rem;
    padding: .25rem;
    font-size: 1rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out;
}

    .dropzone-uploaded-file-display .remove-file-button:hover, .dropzone-uploaded-file-display .remove-file-button > i:hover,
    .dropzone-uploaded-file-display .replace-file-button:hover, .dropzone-uploaded-file-display .replace-file-button > i:hover {
        color: #ef4444;
        cursor: pointer;
    }

.dropzone-uploaded-file-display .file-icon {
    color: #059669;
    flex-shrink: 0;
    font-size: 1.5rem;
    cursor: pointer;
}

.ss-full-width .ss-single {
    width: 100%;
}

.dropdown-field-type-pill {
    text-transform: uppercase;
    letter-spacing: .025em;
    border-radius: .25rem;
    flex-shrink: 0;
    padding: .125rem .375rem;
    font-size: .6875rem;
    font-weight: 500;
    display: inline-block;
    margin-left: auto;
}

    .dropdown-field-type-pill.truhu {
        color: #1e40af;
        background-color: #dbeafe;
    }

    .dropdown-field-type-pill.custom {
        color: #3730a3;
        background-color: #e0e7ff;
    }

.field-truhu {
    float: right;
    color: white;
    background-color: blue;
    width: 100px;
    margin-left: auto;
    text-align: center;
}

.field-multiple-values-wrapper {
    display: flex;
    align-items: center;
}

a.add-custom-field {
    color: #2563eb;
    z-index: 1;
    cursor: pointer;
    user-select: none;
    /*background-color: #f8fafc;*/
    border-top: 1px solid #e5e7eb;
    flex-shrink: 0;
    padding: .5rem .75rem;
    font-style: italic;
    font-weight: 500;
    box-shadow: 0 -2px 4px #0000000d;
    text-decoration: none;
    width: 100%;
}

    a.add-custom-field:hover {
        color: #1d4ed8 !important;
    }

.ss-content .ss-list .ss-option:has(a.add-custom-field) {
    padding-left: 0;
    padding-right: 0;
}

    .ss-content .ss-list .ss-option:has(a.add-custom-field):hover {
        background-color: transparent !important;
    }

.segmentation-filter-individual-employee-status {
    display: none;
}

.segmentation-filter-individual .ss-values .ss-value .ss-value-text > div > span {
    padding-left: 0.5rem;
    leading-trim: both;
    text-edge: cap;
    font-family: Inter;
    font-size: 10px;
    font-style: italic;
    font-weight: 400;
    line-height: 16px; /* 160% */
}

.segmentation-filter-individual .ss-values .ss-value.terminated,
.segmentation-filter-individual .ss-values .ss-value.inactive {
    border-radius: 4px !important;
    border: 1px solid #FFB6B6 !important;
    background: var(--Background-Negetive, #FCE2E2) !important;
}

    .segmentation-filter-individual .ss-values .ss-value.terminated .ss-value-text > div > span,
    .segmentation-filter-individual .ss-values .ss-value.inactive .ss-value-text > div > span {
        color: var(--Content-Negative, #640505);
        display: inline-block;
    }

    .segmentation-filter-individual .ss-values .ss-value.terminated .ss-value-delete,
    .segmentation-filter-individual .ss-values .ss-value.inactive .ss-value-delete {
        border-color: var(--Content-Negative, #640505) !important;
        color: var(--Content-Negative, #640505) !important;
    }

        .segmentation-filter-individual .ss-values .ss-value.terminated .ss-value-delete > svg > path,
        .segmentation-filter-individual .ss-values .ss-value.inactive .ss-value-delete > svg > path {
            stroke: var(--Content-Negative, #640505) !important;
        }

.segmentation-filter-individual .ss-values .ss-value .ss-value-delete > svg {
    transform: scale(1.25) !important;
}

.alert-inactive-terminated-employees {
    display: flex;
    padding: 8px;
    align-items: center;
    gap: 5px;
    align-self: stretch;
    border-radius: 4px;
    border: 1px solid #FFB6B6;
    background: var(--Background-Negetive, #FCE2E2);
    color: var(--Content-Primary, #252525);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 171.429% */
}

/* TABS - Employees page */
.tabs-container {
    display: flex;
    align-items: center;
    margin-bottom: 0; /* Remove space between tabs and search */
    overflow: hidden; /* Hide overflow tabs */
    position: relative; /* Establish stacking context */
    z-index: 100; /* Ensure tabs area has proper stacking context */
}

.tabs-scrollable-area {
    display: flex;
    align-items: stretch;
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

    .tabs-scrollable-area::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }

.tabs-scrollable-area > div {
    position: relative;
    display: flex;
}

.tab-button {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--Content-Tertiary);
    background: white;
    border: none;
    border-bottom: 3px solid transparent; /* Add transparent border to maintain consistent height */
    border-radius: 0.5rem 0.5rem 0 0;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    position: relative;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: -1px;
    min-height: 44px; /* Ensure consistent height across all tabs */
    box-sizing: border-box; /* Include padding and border in height calculation */
}

    .tab-button.active {
        color: rgb(var(--Blue-Paynes-Gray));
        background-color: transparent;
        border-bottom: 3px solid rgb(var(--Blue-Paynes-Gray)) !important; /* Ensure border consistency */
        z-index: 1;
        position: relative;
    }

        .tab-button.active::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgb(var(--Blue-Paynes-Gray));
            opacity: 0.1;
            border-radius: 0.5rem 0.5rem 0 0;
            z-index: -1;
        }

    .tab-button.pinned {
        font-weight: 700; /* Always bold for Active Employees */
    }

    .tab-button:hover:not(.active) {
        color: #374151;
        background: #f9fafb;
    }

.tab-options-icon {
    margin-left: 0.25rem;
    color: var(--Content-Tertiary);
    font-size: 1rem; /* Make it bigger */
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 0.25rem;
    transition: all 0.15s ease-in-out;
    border: none; /* Remove any outline */
    outline: none; /* Remove any outline */
    background: none; /* Ensure no background */
}

    .tab-options-icon:hover {
        color: #374151;
        background-color: rgba(0, 0, 0, 0.05);
    }

.tab-button.active .tab-options-icon {
    color: var(--Blue-Paynes-Gray);
}

.tab-count {
    background-color: #f3f4f6;
    color: var(--Content-Tertiary);
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.125rem 0.375rem;
    border-radius: 0.75rem;
    margin-left: 0.25rem;
}

.tab-button.active .tab-count {
    background-color: transparent;
    color: rgb(var(--Blue-Paynes-Gray));
    position: relative;
}

    .tab-button.active .tab-count::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgb(var(--Blue-Paynes-Gray));
        opacity: 0.1;
        border-radius: 0.75rem;
        z-index: -1;
    }

.tab-button.pinned .tab-count {
    color: var(--Content-Tertiary);
}

.tab-button.active.pinned .tab-count {
    color: rgb(var(--Blue-Paynes-Gray));
}

.tab-options-icon {
    margin-left: 0.25rem;
    color: var(--Content-Tertiary);
    font-size: 1rem; /* Make it bigger */
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 0.25rem;
    transition: all 0.15s ease-in-out;
    border: none; /* Remove any outline */
    outline: none; /* Remove any outline */
    background: none; /* Ensure no background */
}

    .tab-options-icon:hover {
        color: #374151;
        background-color: rgba(0, 0, 0, 0.05);
    }

.tab-button.active .tab-options-icon {
    color: rgb(var(--Blue-Paynes-Gray));
}

.tab-button.with-divider {
    position: relative; /* For positioning the pseudo-element divider */
}

    .tab-button.with-divider::after {
        content: '';
        position: absolute;
        right: 0;
        top: 12.5%; /* Start 1/8 from top to center the 3/4 height line */
        height: 75%; /* 3/4 of the tab height */
        width: 2px;
        background-color: #e5e7eb;
    }

    .tab-button.with-divider.active {
        border-bottom: 4px solid rgb(var(--Blue-Paynes-Gray)) !important;
    }

.tab-options-dropdown {
    position: fixed; /* Use fixed positioning to escape stacking context issues */
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    z-index: 9999; /* Very high z-index to ensure it appears above all content */
    width: 180px;
    margin-top: 0.25rem;
}

.tab-options-item {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: #374151;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .tab-options-item:first-child {
        border-top-left-radius: 0.375rem;
        border-top-right-radius: 0.375rem;
    }

    .tab-options-item:last-child {
        border-bottom-left-radius: 0.375rem;
        border-bottom-right-radius: 0.375rem;
    }

    .tab-options-item:hover {
        background-color: #f9fafb;
    }

    .tab-options-item.danger:hover {
        background-color: #fef2f2;
        color: #dc2626;
    }

.more-groups-button {
    margin-left: auto;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600; /* Increased font weight to be greater than tabs */
    color: var(--Content-Tertiary);
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0 0.375rem 0.375rem 0;
    position: relative; /* For positioning the pseudo-element divider */
}

    .more-groups-button::before {
        content: '';
        position: absolute;
        left: 0;
        top: 12.5%; /* Start 1/8 from top to center the 3/4 height line */
        height: 75%; /* 3/4 of the button height */
        width: 2px;
        background-color: #e5e7eb;
    }

    .more-groups-button:hover {
        color: #374151;
        background: #f9fafb;
    }

/* All Groups dropdown styles */
.all-groups-dropdown,
.all-employees-dropdown {
    position: fixed; /* Use fixed positioning to escape stacking context issues */
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    z-index: 9999; /* Very high z-index to ensure it appears above all content */
    min-width: 200px;
    max-width: 300px;
    margin-top: 0.25rem;
    right: 1rem;
    top: 11.9rem;
}

.all-employees-dropdown {
    right: unset;
    top: unset;
    min-width: 300px;
}

.all-groups-search,
.all-employees-search {
    padding: 0.75rem;
    border-bottom: 1px solid #e5e7eb;
}

.all-groups-search-input,
.all-employees-search-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    color: #374151;
    background-color: white;
    box-sizing: border-box;
}

    .all-groups-search-input:focus,
    .all-employees-search-input:focus {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 1px #3b82f6;
    }

.all-groups-list,
.all-employees-list {
    max-height: 200px;
    overflow-y: auto;
}

.all-groups-item,
.all-employees-item {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: #374151;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .all-groups-item:hover,
    .all-employees-item:hover {
        background-color: #f9fafb;
    }

    .all-groups-item.active,
    .all-employees-item.active {
        background-color: rgba(59, 92, 106, 0.1);
        color: var(--Blue-Paynes-Gray);
        font-weight: 600;
    }

.all-groups-item-name,
.all-employees-item {
    flex: 1;
}

.all-groups-item-count {
    background-color: #f3f4f6;
    color: #6b7280;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.125rem 0.375rem;
    border-radius: 0.75rem;
    margin-left: 0.5rem;
}

.all-groups-item.active .all-groups-item-count {
    background-color: rgba(59, 92, 106, 0.2);
    color: var(--Blue-Paynes-Gray);
}

/* --- Search and Buttons Row --- */
.search-and-buttons-row {
    display: flex;
    align-items: center;
    gap: 1rem; /* Standard gap between elements */
    background-color: #f8fafc; /* Grey background */
    padding: 1rem; /* Padding around all content */
    min-width: 0; /* Allow flex item to shrink below content width */
    max-width: 100%; /* Prevent expansion beyond container */
    box-sizing: border-box; /* Include padding in width calculation */
    border-top: 1px solid var(--Blue-Gray);
    border-left: 1px solid var(--Blue-Gray);
    border-right: 1px solid var(--Blue-Gray);
    width: 100%;
}

.search-input-container {
    position: relative;
    flex: 1;
    min-width: 200px; /* Minimum width to prevent too much shrinking */
    max-width: 100%; /* Ensure it doesn't overflow its container */
}

.search-input-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 0.875rem;
    pointer-events: none; /* Prevent interference with input */
}

.search-input {
    width: 100%;
    max-width: 100%; /* Prevent overflow */
    padding: 0.5rem 0.75rem 0.5rem 2.25rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    color: #374151;
    background-color: white;
    box-sizing: border-box; /* Include padding and border in width calculation */
}

    .search-input:focus {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 1px #3b82f6;
    }

.button-edit-filters {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: white;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    color: #374151;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    position: relative;
    white-space: nowrap; /* Prevent button text wrapping */
    flex-shrink: 0; /* Prevent button from shrinking */
}

    .button-edit-filters:hover {
        background-color: #f9fafb;
    }

    .button-edit-filters.has-filters {
        color: #2563eb;
        border-color: #93c5fd;
        background-color: #eff6ff;
    }

.filter-count {
    background-color: #2563eb;
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.125rem 0.375rem;
    border-radius: 9999px;
    margin-left: 0.25rem;
}

.main-content-area{
    overflow: hidden;
    padding: 0;
    position: relative;
}

/* --- Active Filters Section --- */
.filter-sidebar {
    --sidebar-base-spacing: 1rem;
    --sidebar-small-spacing: .5rem;
    --sidebar-tiny-spacing: .25rem;
    width: 20rem;
    min-width: 20rem;
    max-width: 20rem;
    padding: var(--sidebar-base-spacing);
    z-index: 60;
    gap: var(--sidebar-base-spacing);
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: rgb(229, 231, 235);
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: rgb(229, 231, 235);
    border-top: none;
    border-left: none;
    flex-direction: column;
    display: flex;
    overflow: hidden auto;
    box-shadow: -4px 0 6px -1px #0000001a;
    position: absolute;
    top: 1px;
    right: 13px;
    margin-bottom: calc(1.5rem + 1px);
}

.active-filters-section {
    display: flex;
    flex-direction: column;
    gap: var(--sidebar-small-spacing);
    padding: 1rem 0;
}

.active-filters-empty-state {
    color: #6b7280;
    text-align: center;
    background-color: var(--Background-Tertiary);
    border: 1px solid #e2e8f0;
    border-radius: .5rem;
    margin: 0;
    padding: 1rem;
    font-size: .875rem;
    font-style: italic;
}

.active-filters-list {
    display: flex;
    flex-direction: column;
    gap: 0; /* Remove gap between filter blocks to eliminate dividers */
}

.filter-item-container {
    display: flex;
    flex-direction: column;
    position: relative;
    border-bottom: 1px solid #f3f4f6;
    padding-bottom: var(--sidebar-small-spacing);
    margin-bottom: var(--sidebar-small-spacing);
}

    .filter-item-container:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

.filter-block {
    display: flex;
    align-items: center;
    background-color: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    padding: 0.75rem 2rem 0.75rem 0.75rem;
    gap: 0.5rem;
    transition: all 0.15s ease-in-out;
    position: relative;
    z-index: 1;
}

    .filter-block:not(.disabled):hover {
        background-color: #f9fafb;
        border-color: #d1d5db;
        cursor: pointer;
    }

    .filter-block.editing {
        background-color: #f9fafb; /* Gray background for editing filter block */
        cursor: default;
        z-index: 2;
    }

        .filter-block.editing:hover {
            background-color: #f9fafb; /* Maintain gray background on hover */
            border-color: #a5b4fc;
        }

.filter-block-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
}

.filter-block .filter-field {
    font-weight: 600;
    color: #374151;
    font-size: 0.875rem;
    white-space: nowrap;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--Blue-Gray);
    border-radius: 0.25rem;
    background-color: white;
}

.filter-block .filter-condition {
    font-size: 0.875rem;
    color: #374151;
    text-transform: uppercase;
    font-weight: 500;
    white-space: nowrap;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--Blue-Gray);
    border-radius: 0.25rem;
    background-color: white;
}

.filter-block .filter-value {
    font-size: 0.875rem;
    color: #374151;
    font-weight: 400;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    background-color: white;
    border: 1px solid #e5e7eb;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.filter-block .remove-filter-button {
    position: absolute;
    top: 50%;
    right: 0.25rem;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #dc2626; /* Changed to red by default */
    font-size: 0.875rem; /* Made slightly bigger */
    cursor: pointer;
    padding: 0.125rem;
    border-radius: 0.25rem;
    transition: all 0.15s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    z-index: 10;
}

    .filter-block .remove-filter-button:hover {
        background-color: #fef2f2;
        color: #b91c1c; /* Darker red on hover */
    }

.filter-value-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
}

.filter-value-tag {
    display: inline-flex;
    align-items: center;
    background-color: #dbeafe;
    color: #1e40af;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    border: 1px solid #bfdbfe;
    white-space: nowrap;
}

.button-add-new-filter {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sidebar-small-spacing);
    background-color: white;
    color: #4b5563;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    border: 1px solid #d1d5db;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

    .button-add-new-filter:hover {
        background-color: #f9fafb;
        border-color: #9ca3af;
    }

.group-save-actions {
    display: flex;
    flex-direction: column;
    gap: var(--sidebar-small-spacing);
    border-top: 1px solid #e5e7eb;
    padding-top: var(--sidebar-base-spacing);
}

.button-save-to-current-group {
    justify-content: center;
    align-items: center;
    gap: var(--sidebar-small-spacing);
    background-color: rgba(var(--Blue-Alice-White), 1);
    width: 100%;
    color: rgba(var(--Blue-Paynes-Gray), 1);
    border: 1px solid rgba(var(--Blue-Alice-Blue), 1);
    cursor: pointer;
    border-radius: .375rem;
    padding: .5rem 1rem;
    font-size: .875rem;
    font-weight: 500;
    transition: all .15s ease-in-out;
    display: flex;
}

    .button-save-to-current-group:hover:not(:disabled) {
        background-color: rgba(var(--Blue-Alice-White), 1);
        border-color: rgba(var(--Blue-Alice-Blue), 1);
    }

    .button-save-to-current-group:disabled {
        color: #9ca3af;
        cursor: not-allowed;
        background-color: #f9fafb;
        border-color: #e5e7eb;
    }

.button-save-as-new-group {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sidebar-small-spacing);
    background-color: rgba(var(--Blue-Paynes-Gray), 1);
    color: white;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    border: none;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

    .button-save-as-new-group:hover {
        background-color: #2d4a53;
    }

.filter-form-section {
    display: flex;
    flex-direction: column;
    gap: var(--sidebar-base-spacing);
    padding: var(--sidebar-base-spacing);
    position: relative;
    z-index: 1;
    animation: slideDown 0.2s ease-out;
}

    /* Edit Filter mode - gray background, with border */
    .filter-form-section.edit-mode {
        background-color: #f9fafb; /* Gray background */
        border: 1px solid #e5e7eb; /* Add border back */
        border-top: none; /* No top border to connect seamlessly with filter block */
        border-radius: 0 0 0.375rem 0.375rem;
        margin-top: -1px; /* Connect to editing filter block */
    }

    /* Add Filter mode - white background, top border */
    .filter-form-section.add-mode {
        background-color: white;
        border: 1px solid #e5e7eb;
        border-top: 2px solid rgba(var(--Blue-Paynes-Gray), 1); /* Prominent top border */
        border-radius: 0.375rem;
        box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.05);
    }

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
        max-height: 0;
    }

    to {
        opacity: 1;
        transform: translateY(0);
        max-height: 500px;
    }
}

.filter-form-heading {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #374151;
    margin: 0;
}

.filter-form-actions {
    display: flex;
    gap: var(--sidebar-small-spacing);
    justify-content: flex-end;
    margin-top: var(--sidebar-small-spacing);
}

.button-cancel {
    display: flex;
    align-items: center;
    gap: var(--sidebar-tiny-spacing);
    padding: var(--sidebar-small-spacing) var(--sidebar-base-spacing);
    background-color: white;
    color: #6b7280;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

    .button-cancel:hover {
        background-color: #f9fafb;
        border-color: #9ca3af;
    }

.button-save {
    display: flex;
    align-items: center;
    gap: var(--sidebar-small-spacing);
    padding: var(--sidebar-small-spacing) var(--sidebar-base-spacing);
    background-color: rgba(var(--Blue-Paynes-Gray), 1);
    color: white;
    border: none;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

    .button-save:hover {
        background-color: #2d4a53;
    }

.form-group input[type="text"],
.form-input-filter {
    width: 100%;
    max-width: 100%;
    padding: var(--sidebar-tiny-spacing) var(--sidebar-small-spacing);
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    color: #374151;
    background-color: white;
    box-sizing: border-box;
}

    .form-group input[type="text"]:focus,
    .form-input-filter:focus {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 1px #3b82f6;
    }

.value-placeholder {
    padding: var(--sidebar-tiny-spacing) var(--sidebar-small-spacing);
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    color: #9ca3af;
    background-color: #f9fafb;
    font-style: italic;
}

.employee-table-container {

}

.pagination-container {
    border-bottom: 1px solid var(--Blue-Gray);
    border-left: 1px solid var(--Blue-Gray);
    border-right: 1px solid var(--Blue-Gray);
    box-sizing: border-box;
    background-color: #f8fafc;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: center;
    margin-top: 0;
    padding: .5rem 1rem;
    display: flex;
    width: 100%;
}

.pagination-container .pagination-info {
	color: var(--Content-Secondary);
	align-items: center;
	gap: .5rem;
	font-size: .875rem;
	display: flex;
}

.employees-table-header-content {
	flex-direction: column;
	gap: .25rem;
	display: flex;
}

.employees-table-header-content .employees-table-header-title {
	color: #374151;
	align-items: center;
	gap: .5rem;
	font-size: .875rem;
	font-weight: 600;
	display: flex;
}

.field-options-icon {
	cursor: pointer;
	opacity: .8;
	border: 0;
	border-radius: .125rem;
	padding: .125rem;
	font-size: .75rem;
	transition: all .15s ease-in-out;
	color: var(--Blue-Paynes-Gray) !important;
    text-decoration: none;
}

.field-type-badge {
	text-transform: uppercase;
	letter-spacing: .025em;
	border-radius: .25rem;
	align-self: flex-start;
	padding: .125rem .375rem;
	font-size: .6875rem;
	font-weight: 500;
	display: inline-block;
}

.field-type-badge.truhu {
	color: #1e40af;
	background-color: #dbeafe;
}

.field-type-badge.custom {
	color: #3730a3;
	background-color: #e0e7ff;
}

.tab-edit-container {
    display: inline-flex; /* Use inline-flex to size to content */
    align-items: center;
    position: relative;
    min-width: 120px; /* Ensure minimum width to prevent collapse */
    max-width: 300px; /* Prevent it from getting too wide */
}

.tab-edit-input {
    width: auto; /* Let it size to content */
    min-width: 120px; /* Minimum width */
    max-width: 280px; /* Maximum width (accounting for button space) */
    padding: 0.25rem 2.5rem 0.25rem 0.5rem; /* Add right padding for buttons */
    border: 1px solid #3b82f6;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    background-color: white;
    outline: none;
    box-shadow: 0 0 0 1px #3b82f6;
    box-sizing: border-box; /* Include padding and border in width calculation */
}

.tab-edit-confirm,
.tab-edit-cancel {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: none;
    background: none;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    color: #6b7280;
    border-radius: 0.25rem;
}

.tab-edit-confirm {
    right: 1.25rem; /* Position checkmark to the left of X */
}

.tab-edit-cancel {
    right: 0.25rem; /* Position X on the far right */
}

.tab-edit-confirm:hover {
    background-color: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.tab-edit-cancel:hover {
    background-color: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* Floating Toolbar*/

.floating-selection-toolbar-container {
    display: flex;
    gap: .75rem;
    position: fixed;
	bottom: 3rem;
	left: 55%;
	transform: translateX(-50%);
    z-index: 50;
}

.floating-selection-toolbar {
	outline: 1px solid var(--Blue-Gray);
	-webkit-backdrop-filter: blur(8px);
	z-index: 50;
	font-family: var(--font-family-heading);
	background: #fff;
	border-radius: .5rem;
	align-items: center;
	display: flex;
	overflow: hidden;
    filter: brightness(100%);
	box-shadow: 0 4px 16px #00000052;
}

.floating-selection-toolbar::before {
	content: "";
	-webkit-backdrop-filter: blur(2px);
	z-index: -1;
	pointer-events: none;
	background-color: #fff;
	position: fixed;
	inset: 0;
}

.selection-info {
	background-color: var(--Background-Container-DK);
	color: var(--Content-Tertiary);
	flex-direction: column;
	align-items: center;
	gap: .25rem;
	padding: .75rem;
	display: flex;
}

.selection-info.has-selections {
	background-color: rgb(var(--Content-Link));
	color: #fff;
}

.selection-count {
	color: var(--Content-Secondary);
	font-size: 1.125rem;
	font-weight: 700;
	font-family: var(--font-family-heading);
	justify-content: center;
	align-items: center;
	transition: background-color .3s;
	display: flex;
}

.selection-info.has-selections .selection-count, .selection-info.has-selections .selection-label {
	color: #fff;
}

.selection-label {
	color: var(--Content-Secondary);
	text-align: center;
	font-size: .75rem;
	font-weight: 500;
	font-family: var(--font-family-heading);
}

.selection-info.has-selections .selection-count, .selection-info.has-selections .selection-label {
	color: #fff;
}

.selection-actions {
	align-items: center;
	display: flex;
}

.selection-action {
	color: #6b7280;
	cursor: pointer;
	min-width: 4rem;
	font-family: var(--font-family-heading);
	background: none;
	border: none;
	flex-direction: column;
	align-items: center;
	gap: .25rem;
	padding: .75rem;
	transition: all .15s ease-in-out;
	display: flex;
    text-decoration: none;
}

.selection-action:hover {
	color: #374151;
	background: #0000000d;
}

.selection-action:disabled {
	opacity: .5;
	cursor: not-allowed;
	pointer-events: none;
}

.selection-action-icon {
	font-size: 1.125rem;
}

.selection-action-label {
	white-space: nowrap;
	font-size: .75rem;
	font-weight: 500;
	font-family: var(--font-family-heading);
}

.selection-action.divider {
	border-left: 1px solid var(--Blue-Gray);
}

.selection-action.export-action {
	
}


.modal-body .field-editor {
    margin: 0;
    padding: 0;
}

.modal-body .field-editor {
    width: 100%;
    max-width: 100%;
}

    .modal-body .field-editor .field-editor-section:last-child {
        margin-bottom: 0;
    }

.custom-fields-table-container {
    margin-top: 0;
}

/*.table-container .table > tbody > tr:hover > * {
    

}*/

.table-container .table-striped > tbody > tr:nth-of-type(2n):hover > * {
    --bs-table-accent-bg: rgba(var(--Blue-Alice-Blue), 1) !important;
}

.table-container .table-striped > tbody > tr:nth-of-type(2n + 1):hover > * {
    --bs-table-accent-bg: rgba(var(--Blue-Alice-Blue), 1) !important;
    box-shadow: inset 0 0 0 9999px rgba(var(--Blue-Alice-Blue), 1) !important;
}


.custom-fields-table-container .table-header {
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    display: flex;
}

.add-field-header-button {
    background-color: rgba(var(--Blue-Paynes-Gray), 1);
    color: #fff;
    cursor: pointer;
    border: none;
    border-radius: .375rem;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1rem;
    font-size: .875rem;
    font-weight: 500;
    transition: background-color .15s ease-in-out;
    display: flex;
}

    .add-field-header-button:hover:not(:disabled) {
	    background-color: #2d4a53;
    }

.delete-field-header-button {
	background-color: var(--Blue-Alice-White);
	color: var(--Blue-Paynes-Gray);
	border: 1px solid var(--Blue-Alice-Blue);
	cursor: pointer;
	border-radius: .375rem;
	align-items: center;
	gap: .5rem;
	padding: .5rem 1rem;
	font-size: .875rem;
	font-weight: 500;
	transition: all .15s ease-in-out;
	display: flex;
}

    .delete-field-header-button:hover {
	    background-color: var(--Blue-Alice-White);
	    border-color: var(--Blue-Alice-Blue);
    }   

.field-tooltip-trigger {
    color: rgba(var(--Blue-Paynes-Gray), 1);
    cursor: help;
    vertical-align: middle;
    margin-left: .375rem;
    font-size: .875rem;
    transition: color .15s ease-in-out;
    display: inline-block;
}

.field-tooltip {
    background-color: #1f2937;
    border-color: #1f2937 !important;
    border-top-color: transparent !important;
    border-bottom-color: transparent !important;
    max-width: 400px;
}

    .field-tooltip .popover-body {
        color: #ffffff !important;
    }

    .field-tooltip .popover-arrow::before, .field-tooltip .popover-arrow::after {
        border-top-color: #1f2937 !important;
    }

.table-input {
    color: #1f2937;
    border: 1px solid #d1d5db;
    border-radius: .375rem;
    width: 100%;
    padding: .5rem;
    font-size: .875rem;
    transition: border-color .15s ease-in-out;
    box-sizing: border-box;
    max-width: 100%;
}

.table-select {
    color: #1f2937;
    background-color: #fff;
    border: 1px solid #d1d5db;
    border-radius: .375rem;
    width: 100%;
    padding: .5rem;
    font-size: .875rem;
    transition: border-color .15s ease-in-out;
    box-sizing: border-box;
    max-width: 100%;
}

.table-checkbox {
    cursor: pointer;
    width: 1rem;
    height: 1rem;
    margin: 0 auto;
    display: block;
}

.table-action-button {
    color: #6b7280;
    cursor: pointer;
    background: none;
    border: none;
    border-radius: .25rem;
    padding: .25rem;
    font-size: .875rem;
    transition: all .15s ease-in-out;
    width: 2rem;
    height: 2rem;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    display: flex;
}

.table-action-button.danger:hover {
	color: #b91c1c;
	background-color: #dc26261a;
}

    .table-action-button i {
        font-size: 1.125rem;
    }

        .table-action-button i.fa-duotone, .table-action-button i.fad {
            position: relative;
            font-weight: 900;
            letter-spacing: normal;
        }

.employee-profile-sticky-header {
    position: fixed;
    top: 64px; /* Height of the topnav */
    right: 0;
    z-index: 100; /* Lower z-index to avoid modal interference */
    background-color: white;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    border-radius: 1rem 0 0 0;
}

.employee-profile-sticky-header-content {
    margin: 0 auto;
    padding: 1.5rem 2rem 0 2rem;
}

/* Header Section */
.employee-profile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 1rem 0;
}

.employee-profile-title-section {
    flex: 1;
}

.employee-profile-title {
    font-size: 1.75rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
    font-family: "DM Sans", sans-serif;
}

.employee-profile-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.profile-action-button {
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    border: 1px solid;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

    /* Secondary button styles moved to globals.css */

    .profile-action-button.primary {
        background-color: rgba(var(--Blue-Paynes-Gray), 1);
        color: white;
        border-color: rgba(var(--Blue-Paynes-Gray), 1);
    }

        .profile-action-button.primary:hover {
            background-color: #2d4a53;
            border-color: #2d4a53;
        }


.button-secondary {
    background-color: rgba(var(--Blue-Alice-White), 1);
    color: rgba(var(--Blue-Paynes-Gray), 1);
    border: 1px solid rgba(var(--Blue-Alice-Blue), 1);
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .button-secondary:hover {
        background-color: rgba(var(--Blue-Alice-White), 1);
        border-color: rgba(var(--Blue-Alice-Blue), 1);
    }

    .button-secondary i {
        color: rgba(var(--Blue-Paynes-Gray), 1);
        font-size: 0.75rem; /* Smaller icon size */
    }

/* Profile Changes Counter */
.profile-changes-counter {
    background: none;
    border: none;
    color: var(--Content-Secondary);
    font-size: 14px;
    font-family: var(--font-family-heading); /* DM Sans */
    font-weight: 400;
    cursor: pointer;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    transition: all 0.15s ease-in-out;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

    .profile-changes-counter:hover {
        background-color: rgba(101, 101, 101, 0.1);
    }

.profile-changes-number {
    font-weight: 700; /* Bold number */
}

/* Tabs Section */
.employee-profile-tabs {
    display: flex;
    background-color: white;
    overflow-x: auto;
    padding: 0 0 1.5rem 0;
    gap: 0.5rem;
}

.employee-profile-tab {
    padding: 0.75rem 1.5rem;
    background: none;
    border: none;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    position: relative;
    white-space: nowrap;
    flex-shrink: 0;
}

    .employee-profile-tab:hover {
        color: #374151;
        background-color: #f9fafb;
    }

    .employee-profile-tab.active {
        color: rgba(var(--Blue-Paynes-Gray), 1);
        background-color: #f0f9ff;
        font-weight: 600;
    }

/* Main Content Area */
.employee-profile-main-content {
    padding-top: 140px; /* Space for the fixed sticky header */
}

.employee-profile-content {
    border-radius: 0;
    padding: 2rem;
    width: 100%;
    box-sizing: border-box;
    max-width: 1200px;
    margin: 0 auto;
    overflow: visible; /* Allow dropdowns to extend outside content area */
    position: relative; /* Establish proper stacking context */
}

/* Tab Content Wrapper */
.employee-profile-tab-content {
    background-color: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    overflow: visible; /* Allow dropdowns to extend outside tab content */
    position: relative; /* Establish stacking context for better dropdown layering */
}

/* Legacy profile-section classes for backward compatibility */
.profile-section {
    border: 1px solid #e5e7eb;
    background-color: white;
    overflow: visible; /* Allow dropdowns to extend outside section */
}

    .profile-section:last-child {
        border-bottom: none;
    }

.profile-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
    background-color: var(--Blue-Gray) !important;
    padding: 1rem 1.5rem;
    border-bottom: none;
    margin-top: -1px;
}

.profile-section:first-child .profile-section-header {
    margin-top: 0;
}

.profile-section-header:hover {
    background-color: #f1f5f9 !important;
}

.profile-section-header.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.profile-section-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
    font-family: var(--font-family-heading);
    display: inline;
}

.profile-section-header i {
    color: #6b7280;
    font-size: 1rem;
    transition: transform 0.15s ease-in-out;
}

.profile-section-content {
    display: grid;
    padding: 1rem;
    background-color: transparent;
    gap: 1rem;
    overflow: visible; /* Allow dropdowns to extend outside section */
}

/* Form Grid Layout - Maximum 3 columns */
.profile-form-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem 1rem;
    align-items: start;
}

.profile-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: relative;
    /* No z-index to avoid stacking context interference */
}

.profile-form-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin: 0;
}

    .profile-form-label.required::after {
        content: ' *';
        color: #ef4444;
    }

.profile-form-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    color: #374151;
    background-color: white;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    box-sizing: border-box;
    /* No position/z-index to avoid stacking context interference */
}

    .profile-form-input:focus {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 1px #3b82f6;
        /* No z-index to avoid stacking context interference */
    }

    .profile-form-input::placeholder {
        color: #9ca3af;
    }

.profile-form-input-container {
    position: relative;
}

    .profile-form-input-container span {
        position: absolute;
        top: 50%;
        right: 1.25rem;
        transform: translateY(-50%);
    }


.profile-form-select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    color: #374151;
    background-color: white;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    box-sizing: border-box;
    /* No position/z-index to avoid stacking context interference */
}

    .profile-form-select:focus {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 1px #3b82f6;
        /* No z-index to avoid stacking context interference */
    }

    .profile-form-select .ss-addable {
        border: 0 !important;
    }
          
    .profile-form-select .ss-addable svg {
       
        margin: 0 4px 0 8px !important;
        width: 10px !important;
        height: 10px !important;
    }
    
    .profile-form-select .ss-addable svg path {
        stroke: #2563eb !important;
    }

        .profile-form-select .ss-addable::after {
            color: #2563eb;
            content: 'Add Value' !important;
            font-size: .875rem !important;
            font-style: italic;
        }

    .profile-form-select:disabled {
        background-color: var(--ss-disabled-color);
        cursor: not-allowed;
    }

.edit-button-inline {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(var(--Blue-Paynes-Gray), 1);
    color: rgba(var(--Blue-Paynes-Gray), 1);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    white-space: nowrap;
}

    .edit-button-inline:hover {
        background: rgba(var(--Blue-Paynes-Gray), 1);
        color: white;
    }


.multi-select-options {
    background-color: #fff;
    border: 1px solid #d1d5db;
    padding: 1rem;
    position: absolute;
    top: 4.25rem;
    width: 100%;
    z-index: 1000;
}

.multi-select-options__header {
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6b7280;
    z-index: 1;
    background-color: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
    align-items: center;
    padding: 0;
    font-size: .75rem;
    font-weight: 600;
    display: flex;
    position: sticky;
    top: 0;
    justify-content: space-between;
}

.multi-select-options .form-check-input:checked {
    border-color: rgba(var(--Blue-Paynes-Gray), 1);
    background-color: rgba(var(--Blue-Paynes-Gray), 1);
}

.multi-select-options .form-check-label {
    font-size: 0.875rem;
    color: #374151;
}

.multi-select-options__option {
    display: flex;
    justify-content: center;
    padding: 0.5rem 0;
}

    .multi-select-options__option:hover {
        background-color: #f3f4f6;
        cursor: pointer;
    }

    .multi-select-options__option > div:first-child {
        display: flex;
        justify-content: center;
        padding: 0 4px 0 32px;
    }

    .multi-select-options__option > div:last-child {
        display: flex;
        justify-content: center;
        width: 40px;
    }


    .multi-select-options__option > div:nth-child(2) {
        flex-grow: 1;
    }

/* Roles & Permissions Styles */
.role-description-section {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    background-color: #ffffff;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
    gap: 1.5rem;
}

.role-description {
    padding: 1rem;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    color: #475569;
    font-size: 0.875rem;
}

    .role-description p {
        margin: 0;
    }


.permissions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.permission-item {
    display: flex;
    align-items: flex-start;
    padding: 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    background-color: #ffffff;
    transition: all 0.15s ease-in-out;
}

    .permission-item:hover {
        border-color: #cbd5e1;
        background-color: #f8fafc;
        cursor: pointer;
    }

.permission-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    width: auto;
    margin: 0;
    font-weight: normal;
}

.permission-checkbox {
    width: 1rem;
    height: 1rem;
    margin-right: 0.75rem;
    margin-top: 0.125rem;
    border: 1px solid #d1d5db;
    border-radius: 0.25rem;
    background-color: white;
    cursor: pointer;
    flex-shrink: 0;
}

    .permission-checkbox:checked {
        background-color: #3b82f6;
        border-color: #3b82f6;
    }

    .permission-checkbox:focus {
        outline: none;
        box-shadow: 0 0 0 2px #3b82f6, 0 0 0 4px rgba(59, 130, 246, 0.1);
    }

.permission-text {
    font-size: 0.875rem;
    color: #374151;
    line-height: 1.4;
}

/* Documents & Files Styles */
.documents-section {
    background-color: #ffffff;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

.documents-table-container {
    overflow-x: auto;
}

.documents-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem !important;
}

    .documents-table thead {
        background-color: #f8fafc;
        border-bottom: 1px solid #e2e8f0;
    }

    .documents-table th {
        padding: 0.75rem 1rem;
        text-align: left;
        font-weight: 500 !important;
        color: #6b7280 !important;
        font-size: 0.75rem !important;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        white-space: nowrap;
    }

    .documents-table tbody tr {
        border-bottom: 1px solid #f1f5f9;
        transition: background-color 0.15s ease-in-out;
    }

        .documents-table tbody tr:hover {
            background-color: #f8fafc;
        }

        .documents-table tbody tr:last-child {
            border-bottom: none;
        }

    .documents-table td {
        padding: 0.875rem 1rem;
        vertical-align: middle;
    }

    .documents-table .icon-duotone {
        font-size: 1rem !important;
        letter-spacing: normal;
    }

    .documents-table td.employee-file > div.file-image::before,
    .documents-table td.employee-file > div.file-powerpoint::before,
    .documents-table td.employee-file > div.file-pdf::before,
    .documents-table td.employee-file > div.file-word::before,
    .documents-table td.employee-file > div.file-excel::before,
    .documents-table td.employee-file > div.file-video::before,
    .documents-table td.employee-file > div.file-default::before {
        font-size: 1rem !important;
    }

    /* Cell content styles */
    .document-checkbox {
        width: 1rem;
        height: 1rem;
        border: 1px solid #d1d5db;
        border-radius: 0.25rem;
        cursor: pointer;
        margin: 0;
    }

    .document-checkbox:checked {
        background-color: #3b82f6;
        border-color: #3b82f6;
    }

/* Toast Notification Styles */
.toast-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 24px;
    pointer-events: none; /* Allow clicks to pass through overlay */
}

.toast-container {
    background: white;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 300px;
    max-width: 600px;
    border-left: 4px solid;
    animation: toastSlideIn 0.3s ease-out;
    pointer-events: auto;
}

    .toast-container > :not(:last-child) {
        margin-bottom: 0;
    }

.toast-success {
    border-left-color: #00C875;
}

.toast-error {
    border-left-color: #E2445C;
}

.toast-warning {
    border-left-color: #FDAB3D;
}

.toast-info {
    border-left-color: #579BFC;
}

.toast-content {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.toast-icon {
    font-size: 18px;
}

.toast-success .toast-icon {
    color: #00C875;
}

.toast-error .toast-icon {
    color: #E2445C;
}

.toast-warning .toast-icon {
    color: #FDAB3D;
}

.toast-info .toast-icon {
    color: #579BFC;
}

.toast-message {
    font-size: 14px;
    font-weight: 500;
    color: #323338;
    line-height: 1.4;
}

.toast-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.toast-undo-button {
    background: transparent;
    border: 1px solid #D0D4D9;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    color: #323338;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .toast-undo-button:hover {
        background-color: #F5F6F8;
        border-color: #C3C6D4;
    }

.toast-close-button {
    background: transparent;
    border: none;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #676879;
    transition: all 0.2s ease;
}

    .toast-close-button:hover {
        background-color: #F5F6F8;
        color: #323338;
    }

    .toast-close-button i {
        font-size: 12px;
    }

.profile-form-input.error, .profile-form-select.error {
    background-color: #fef2f2;
    border-color: #f87171;
}

.field-error-message {
    color: #dc2626;
    margin-top: .25rem;
    font-size: .75rem;
    font-weight: 500;
    display: block;
}

.employee-count-badge {
	color: #374151;
	text-align: center;
	background-color: #f3f4f6;
	border-radius: .75rem;
	min-width: 1.5rem;
	padding: .25rem .5rem;
	font-size: .75rem;
	font-weight: 500;
	display: inline-block;
}

.table-edit-container {
	justify-content: space-between;
	align-items: center;
	gap: .5rem;
	width: 100%;
	display: flex;
}

.table-input {
	color: #1f2937;
	border: 1px solid #d1d5db;
	border-radius: .375rem;
	width: 100%;
	padding: .5rem;
	font-size: .875rem;
	transition: border-color .15s ease-in-out;
}

.table-input:focus {
	border-color: var(--Blue-Paynes-Gray);
	box-shadow: 0 0 0 1px var(--Blue-Paynes-Gray);
	outline: none;
}

.table-actions-container {
	justify-content: flex-end;
	align-items: center;
	gap: .125rem;
	display: flex;
}

.table-action-button.save {
	color: #059669;
}

.table-action-button.save:hover {
	color: #047857;
	background-color: #ecfdf5;
}

.table-action-button.cancel {
	color: #6b7280;
}

.table-action-button.cancel:hover {
	color: #374151;
	background-color: #f3f4f6;
}

.table-action-button:hover {
	color: #374151;
	background-color: #f3f4f6;
}

input[type="checkbox"]:disabled {
    -webkit-appearance: none; /* Remove default Safari/Chrome styling */
    appearance: none; /* Remove default Firefox styling */
    width: 16px;
    height: 16px;
    border: 1px solid rgba(var(--Blacks-Silver), .25);
    border-radius: 4px;
    background-color: rgba(var(--Blacks-Silver), .3);
    cursor: not-allowed;
}

.import-additional-options {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
}

.additional-options-description {
    text-align: center;
}

    .additional-options-description span {
        font-size: 0.875rem;
        color: #6b7280;
        font-weight: 500;
    }

.options-dropdown-wrapper {
    position: relative;
    display: inline-block;
}

.options-button {
    justify-content: space-between;
    min-width: 140px;
    position: relative;
}

.additional-options-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    border: 1px solid #d1d5db;
    background-color: white;
    color: #6b7280;
    justify-content: space-between;
    min-width: 200px;
    position: relative;
    text-decoration: none;
}

    .additional-options-button:hover {
        background-color: #f9fafb;
        border-color: #9ca3af;
        color: #374151;
    }

.employee-options-dropdown {
    position: absolute;
    bottom: 100%;
    left: 0;
    min-width: 100%;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    z-index: 10000;
    margin-bottom: 0.25rem;
    overflow: hidden;
}

    .employee-options-dropdown .dropdown-option {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
        width: 100%;
        text-align: left;
        background: none;
        border: none;
        color: #374151;
        font-size: 0.875rem;
        font-weight: 500;
        cursor: pointer;
        transition: background-color 0.15s ease-in-out;
        white-space: nowrap;
        text-decoration: none;
    }

        .employee-options-dropdown .dropdown-option:hover {
            background-color: #f9fafb;
        }

        .employee-options-dropdown .dropdown-option:first-child {
            border-top-left-radius: 0.375rem;
            border-top-right-radius: 0.375rem;
        }

        .employee-options-dropdown .dropdown-option:last-child {
            border-bottom-left-radius: 0.375rem;
            border-bottom-right-radius: 0.375rem;
        }

        .employee-options-dropdown .dropdown-option i {
            font-size: 1rem;
            width: 1.25rem;
            text-align: center;
        }