:root {
    --bs-th-blue-rgb: 5, 130, 220; /* BLUE #0582DC */
    --max-width: 960px;
    --desktop-nav-width: 8rem;
    --mobile-nav-height: 6rem;
}

body {
    border-radius: 24px;
    background: radial-gradient(231.04% 224.87% at -41.35% 16.73%, #FBE898 0%, #E1F0FB 40.1%, #C7E9B8 100%);
}

.body-white
{
    background:#fff;
}

.employee-content {
    position: relative;
    margin: 0;
    padding: 0;
    padding-bottom: 100px;
}

    .employee-content > div > div.row {
        margin: 0;
    }

/* Set spacing for the footer in the settings page */
.page-footer {
    position: relative;
    font-size: .9em;
    width: 100%;
    background-color: transparent;
}

.page-footer-ee {
    margin-top: 2rem;
    margin-bottom: calc(var(--mobile-nav-height) + 1rem);
    height: 60px;
    line-height: 30px; /* Vertically center the text there */
    padding-top: 0;
    text-align: center;
    bottom: 1em;
}

/* Buttons */
.btn-primary {
    background-color: rgb(var(--Content-Link));
    border-color: rgb(var(--Content-Link));
    border-radius: .25rem;
    color: var(--Content-Primary-Invert, #FFF);
    padding: 0.25rem 0.5rem;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    
    /* Heading S/Regular */
    font-family: "DM Sans";
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.25rem; /* 150% */
}

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

    .btn-primary.disable {
        background-color: rgba(var(--Content-Link), .4);
        border-color: rgba(var(--Content-Link), .1);
        pointer-events: none;
    }

    .navigation .btn
    {
        display: inline;
    }

.btn-primary-blue {
    display: flex;
    padding: 0.375rem 0.5rem 0.375rem 0.375rem;
    align-items: center;
    gap: 0.375rem;
    border-radius: 0.25rem;
    border: 1px solid var(--Background-Base, #396673);
    background-color: var(--Background-Base, #396673);
    color: var(--Content-Primary-Invert);
    /* Text/Regular */
    font-family: Inter;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.25rem; /* 150% */
    text-decoration: none;
}

    .btn-primary-blue > i {
        font-size: 1.125rem !important;
        color: var(--Content-Primary-Invert) !important;
    }

a.aspNetDisabled {
    background: rgba(150, 150, 150, .25) !important;
}

/* Solid Divider Line */
div .solid {
    display: flex;
    align-self: stretch;
    border-top: 1px solid rgba(57, 102, 115, 0.30);
    height: 1px;
    margin: 1px;
}

/* Blue Vertical Divider Pipe */
div .divider-pipe {
    width: 0.0625rem;
    align-self: stretch;
    background: var(--Background-Secondary-Pressed, #B9DCF5);
}

/* Unread Badge (<i> fa-solid fa-circle) */
.unread-badge {
    font-size: .5rem;
    color: var(--Red-Imperial-Red, #EA4040);
    border-collapse: separate;
}

.in-progress-badge {
    font-size: .5rem;
    color: var(--Yellow-Jonquil, #F7CB15);
    border-collapse: separate;
}

.completed-badge {
    font-size: .5rem;
    color: green;
    border-collapse: separate;
}

.unread-badge > i, .in-progress-badge > i, .completed-badge > i {
    border: 1px solid white;
    border-radius: 50%;
}

/* Sort Icon */
.fa-duotone.fa-solid.fa-sort.up {
    transform: rotateX(0deg);
}

.fa-duotone.fa-solid.fa-sort.down {
    transform: rotateX(180deg);
}

/* Bold Text */
.bold-text {
    font-weight: 700 !important;
}

/* Error Icon (<span class="error-icon fa-duotone fa-triangle-exclamation"></span>) */
.error-icon {
    font-size: 0.875rem;
    color: #D85B00;
}


/* Checkmark Icon () */
.checkmark-icon {
    font-size: 0.875rem;
    color: var(--Content-Positive);
}



/**********************************
 * TEXT ENTRY AREA
 **********************************/

/* Text Area Container */
.text-area {
    display: flex;
    width: 100%;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    border-radius: 16px 16px 0px 0px;
    background: var(--Content-Primary-Invert, #FFF);
    box-shadow: 0px -4px 14px 0px rgba(0, 0, 0, 0.08);
    position: fixed;
    bottom: 0;
    margin: 0 auto;
    transition: box-shadow .1s;
    z-index: 1002;
}

.text-area__top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}

    .text-area__top > div {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        align-self: stretch;
    }

        .text-area__top > div > input {
            flex: 1 0 0;
            background: transparent;
            border: none;
        }

        .text-area__top > div > .subject {
            color: var(--Content-Primary, #252525);
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 24px; /* 150% */
        }

        .text-area__top > div > .text {
            color: var(--Blacks-Eerie-Black, #1E1E1E);
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 21px; /* 150% */
        }

        .text-area__top > div > input:focus {
            outline: none;
        }

.text-area__bottom {
    display: flex;
    padding-top: 8px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    border-top: 1px solid rgba(57, 102, 115, 0.30);
}

.text-area__bottom-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.text-area: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;
}

/************************
 * CHAT
 ************************/

.chat{
    height: 100vh;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1001;
    border: 0;
    z-index: 1031;
}

.chat__people-wrapper {
    background: rgba(255, 255, 255, 0.40);
    border-radius: 16px;
    height: calc(100vh - 180px);
    padding: 16px;
}

.chat__people {
    overflow: auto;
    scrollbar-color: #cecece;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
    height: 93%;
}


.chat__compose-wrapper {
    background: rgba(255, 255, 255, 0.0);
}

.chat__header-ee {
    background: #fff;
    color: var(--Content-Primary);
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1001;
    align-items: center;
    justify-content: center;
}

.chat__messages-wrapper {
    background: rgba(255, 255, 255, 0.0);
}

.chat__download {
    float: none;
    font-size:1.3rem;
}

.chat-download-alert {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1035;
}

.chat__user
{
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat__user a {
    color: rgba(var(--bs-th-navy-rgb), 1);
    padding: .5rem .7rem !important;
    text-decoration: none !important;
}

.chat__phone {
    color: darkgray !important;
}

/*
    Mobile Manager Announcement
*/

.announcement__compose-header {
    display: flex;
    padding: 0 1rem 1rem 1rem !important;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    align-self: stretch;
    border-bottom: 1px solid var(--Content-Understated-Inverted);
}

.announcement__compose-header > span {
    color: var(--Content-Primary);
    /* Heading L/Regular */
    font-family: "DM Sans";
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 400;
    flex: 1 0 0;
}

.announcement__compose-header > a {
    font-size: 1.375rem;
    color: var(--Content-Primary);
}

.announcement__compose-subject, .announcement__compose-to {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.announcement__compose-to {
    padding-top: 0.7rem;
}

.announcement__compose-to .announcement__recipients {
    display: flex;
    padding: 0.2rem 0.5rem;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.25rem;
    border: 1px solid var(--Background-Secondary-Pressed, #B9DCF5);
    background: var(--Background-Secondary, #F2F9FD);
}

    .announcement__recipients > a {
        display: flex;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        cursor: pointer;
    }

    .announcement__recipients > a > span {
        padding: 0 0.5rem;
        color: var(--Content-Primary, #252525);
        /* Text/Regular */
        font-family: Inter;
        font-size: 0.875rem;
        font-style: normal;
        font-weight: 400;
    }

    .announcement__recipients > a > i {
        color: var(--Content-Primary, #252525);
        font-size: 1.125rem;
    }

.announcement__recipients.announcement__recipients--unselected {
    border: 1px solid var(--Content-Understated-Inverted) !important;
    background: var(--Background-Tertiary) !important;
}

    .announcement__recipients--unselected > a > span {
        color: var(--Content-Tertiary);
    }

    .announcement__recipients--unselected > a:not(:first-child), 
    .announcement__recipients--unselected > a > div {
        display: none;
    }

.announcement__compose-subject > span, .announcement__compose-to > span {
    color: var(--Content-Primary, #252525);
    /* Heading M/Strong */
    font-family: "DM Sans";
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
}

.announcement__compose-subject > input {
    font-weight: 400;
    font-family: "DM Sans";
    font-size: 1rem;
    font-style: normal;
}

.announcement__compose-comments {
    padding-top: 6px;
    text-wrap: nowrap;
}

    .announcement__compose-comments .form-check-input {
        height: 1.5em;
        margin-right: 6px;
        width: 2.7em;
    }

        .announcement__compose-comments .form-check-input:checked {
            background-color: #B9DCF5;
            border-color: #B9DCF5;
        }

    .announcement__compose-comments .form-check-label {
        color: #747474;
        font-family: Inter;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: 21px; /* 150% */
        padding-top: 3px;
    }

    .announcement__compose-comments .form-check-input:checked + .form-check-label {
        color: #034E84;
    }



/**********************************
 * INBOX TABS
 **********************************/

/* Tabs Container */
.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, 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 */
    margin: 0 auto;
}

    /* Wrapper for each tab */
    .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 */
.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;
}

.tabs__active .tab .tab__title{
    color: rgba(var(--Content-Link), 1);
}

/* Single Tab */
.tabs .tab {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    flex: 1 0 0;
    text-decoration: none;
    cursor: pointer;
}

    /* Text styling for tab title */
.tab .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% */
}


/*****************************
 * INBOX MESSAGE GROUPS
 *****************************/

/* Message Groups (Today, Yesterday, Last Week, etc...) Container */
.message-groups {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    flex: 1 1 0;
    max-width: 100%;
}

    /* Message Group Wrapper */
    .message-groups .message-group {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        align-self: stretch;
        max-width: 100%;
    }

/* Message Group Header (ex. Today) */
.message-group .message-group__header {
    color: var(--Content-Primary-Onyx);
    font-size: 0.8125rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

/* Message Group Content Container */
.message-group .message-group__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.0625rem;
    border-radius: 1rem;
    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.08);
    border-collapse: separate;
    max-width: 100%;
    overflow: hidden;
}

/* Message Card Wrapper */
.message-card {
    display: flex;
    min-height: 6.25rem;
    padding: 0rem 1rem;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    align-self: stretch;
    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.72) inset;
    /* backdrop-filter: blur(8px); -- disabled due to causing laggy scroll */
    max-width: 100%;
    width: 100vw;
    text-decoration: none;
    transition: background .3s ease-out, box-shadow .3s ease-out;
}

    .message-card:hover,
    .page-card:hover {
        background: rgba(242, 242, 242, 0.72);
        box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.08), 0.75px 0.75px 0px 0px rgba(242, 242, 242, 0.72) inset;
    }

    .message-card:focus,
    .page-card:focus {
        background: rgba(231, 231, 231, 0.72);
        box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.08), 0.75px 0.75px 0px 0px rgba(231, 231, 231, 0.72) inset;
        transition: background .05s ease-out;
    }

/* Message Card Content Wrapper */
.message-card .message-card__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    flex: 1 0 0;
    max-width: 100%;
}

    /* Message Card Title Bar */
    .message-card__content .message-card__title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        align-self: stretch;
        flex-wrap: nowrap;
        max-width: 100%;
        gap: 0.5rem;
    }

        /* Subject */
        .message-card__title .message-card__subject {
            display: flex;
            align-items: center;
            gap: 0.25rem;
            min-width: 0;
        }

            /* Text */
            .message-card__subject > span {
                color: var(--Content-Primary);
                /* Text/Bold */
                font-size: 0.875rem;
                font-style: normal;
                font-weight: 700;
                line-height: 1.3125rem; /* 150% */
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

        /* Type of Message (Announcement, Task, etc...) */
        .message-card__content .message-card__type {
            display: flex;
            padding: 0.0625rem 0.5rem;
            justify-content: flex-end;
            align-items: center;
            border-radius: 0.6875rem;
            background: var(--Content-Primary-Invert);
            margin-top: 0.25rem;
            /* backdrop-filter: blur(8px); -- disabled due to causing laggy scroll */
        }

        .message-card__type.message-card__type--unread {
            background: var(--Background-Secondary-Hover);
        }

            /* Text */
            .message-card__content .message-card__type > span {
                color: var(--Blue-Paynes-Gray, #396673);
                text-align: center;
                font-size: 0.75rem;
                font-style: normal;
                font-weight: 400;
                line-height: 1.125rem; /* 150% */
            }

    /* Message Card Body */
    .message-card__content .message-card__body {
        height: 1.3125rem;
        align-self: stretch;
        overflow: hidden;
        color: var(--Content-Primary, #252525);
        text-overflow: ellipsis;
        white-space: nowrap;
        font-family: Inter;
        font-size: 0.875rem;
        font-style: normal;
        font-weight: 400;
        line-height: 1.3125rem; /* 150% */
        display: flex;
        min-width: 0;
    }

        .message-card__body > div {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

    /* Message Card Date */
    .message-card__title .message-card__date {
        color: var(--Content-Secondary, #656565);
        font-family: Inter;
        font-size: 0.75rem;
        font-style: normal;
        font-weight: 400;
        line-height: 1.125rem; /* 150% */
    }


/**************************************************************
 * STACK DIVS ON TOP OF ONE ANOTHER FOR ANIMATION SLIDING
 **************************************************************/
.stack-divs {
    position: relative;
    display: grid;
}

    .stack-divs > div {
        position: relative;
        grid-row: 1;
        grid-column: 1;
        min-width: 0;
    }


/**********************************
 * MOBILE NAVIGATION
 **********************************/

/* Mobile Navigation Wrapper */
.employee-mobile-nav-wrapper {
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
}

/* Mobile Navigation Container */
.employee-mobile-nav {
    display: flex;
    width: 100%;
    height: var(--mobile-nav-height);
    padding: 1rem 0rem 1.25rem 0rem;
    justify-content: space-evenly;
    align-items: flex-start;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.75);
    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 .3s ease-in;
}

.employee-mobile-nav--preview {
    position: absolute !important;
}

/* Mobile Navigation Item */
.employee-mobile-nav__item {
    display: flex;
    width: 3.375rem;
    height: 3.375rem;
    padding-top: 0.9375rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.6875rem;
    flex-shrink: 0;
}

    /* Item Icon */
    .employee-mobile-nav__item .employee-mobile-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;
        transition: color .3s ease-out;
    }

    /* Item Icon (w/ active modifier) */
    .employee-mobile-nav__item.active .employee-mobile-nav__icon {
        color: rgb(var(--Content-Link));
    }

    /* Unread Badge (positioned on top of icon) */
    .employee-mobile-nav__item .employee-mobile-nav__unread {
        width: 0.625rem;
        height: 0.625rem;
        position: absolute;
        right: -0.15rem;
        top: -0.1rem;
    }

    /* Item Icon (w/ disabled modifier) */
    .employee-mobile-nav__item.employee-mobile-nav__item--disabled .employee-mobile-nav__icon {
        color: #808080;
        cursor: default;
        pointer-events: none;
    }

    /* Item Icon - click coloring */
    .employee-mobile-nav__item:not(.employee-mobile-nav__item--button) .employee-mobile-nav__icon:focus {
        color: rgb(var(--Content-Link));
    }

    /* Item Highlight Bar (positioned underneath icon) */
    .employee-mobile-nav__item .employee-mobile-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) */
    .employee-mobile-nav__item.active .employee-mobile-nav__highlight {
        opacity: 1;
    }

/* Mobile Navigation Item - modifier to style as a button */
.employee-mobile-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;
    width: 4.625rem;
    height: 4.625rem;
    border: .25rem solid white;
    margin-top: -7px;
}

    .employee-mobile-nav__item--button .employee-mobile-nav__icon {
        color: var(--Content-Primary-Invert, #FFFFFF);
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 2px;
    }

        .employee-mobile-nav__item--button .employee-mobile-nav__icon > span.icon-duotone {
            font-size: 30px;
        }

/* Mobile Navigation Item - modifier to style as a dropdown option */
.employee-mobile-nav__item--dropdown {
    padding-right: 10px;
    padding-top: 12px;
}

/* Item Button  - click coloring */
.employee-mobile-nav__item--button {
    transition: background .3s ease-out;
}

.employee-mobile-nav__item--button:focus-within {
    background: #0060a6;
}


/*****************************************
 * DESKTOP NAVIGATION
 *****************************************/

/* Desktop Nav Container */
.employee-desktop-nav {
    display: none; /* Default to hidden */
    width: var(--desktop-nav-width);
    height: 100%;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    background: rgba(255, 255, 255, 0.75);
    box-shadow: 0px -4px 14px 0px rgba(0, 0, 0, 0.08);
    /* Fix to left */
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1031;
    transition: left .3s ease-in;
}

.employee-desktop-nav--preview {
    position: absolute;
    z-index: 1029;
}

    /* Container for Nav Items */
    .employee-desktop-nav .employee-desktop-nav__items-container {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        flex: 1 0 auto;
        width: 100%;
    }

        /* Individual Nav Item */
        .employee-desktop-nav__items-container .employee-desktop-nav__item {
            display: flex;
            padding: 1.75rem 0 0.75rem 0;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 0.8rem;
            align-self: stretch;
            color: var(--Content-Link-Pressed, #034E84);
            text-decoration: none;
            position: relative;
            transition: background .3s ease-out, color .3s ease-out;
        }

            /* Nav Item Icon */
            .employee-desktop_nav__item .employee-desktop-nav__icon {
                width: 1.875rem;
                height: 1.5rem;
                flex-shrink: 0;
                padding-left: 1px;
                position: relative;
                text-decoration: none;
            }

            /* Nav Item Title Text */
            .employee-desktop-nav__item .employee-desktop-nav__title {
                text-align: center;
                font-size: 1rem;
                font-style: normal;
                font-weight: 400;
                line-height: normal;
            }

            /* Nav Item Title Text (w/ active modifier) */
            .employee-desktop-nav__item.active .employee-desktop-nav__title {
                font-weight: 700;
            }

            /* Unread Badge (positioned on top of icon) */
            .employee-desktop-nav__item .employee-desktop-nav__unread {
                width: 0.625rem;
                height: 0.625rem;
                position: absolute;
                right: 2.95rem;
                top: .75rem;
            }

        /* Individual Nav Item (w/ active modifier) */
        .employee-desktop-nav__items-container .employee-desktop-nav__item.active {
            border-right: 3px solid rgb(var(--Content-Link));
            background: rgba(0, 121, 208, 0.05);
            color: rgb(var(--Content-Link));
            font-weight: 700;
        }

        /* Individual Nav Item (w/ disabled modifier) */
        .employee-desktop-nav__items-container .employee-desktop-nav__item--disabled {
            color: #808080 !important;
            cursor: default;
            pointer-events: none;
        }

        /* Hover & Focus Effects */
        .employee-desktop-nav__items-container .employee-desktop-nav__item:hover:not(.active) {
            background: rgba(0, 121, 208, 0.025);
        }

        .employee-desktop-nav__items-container .employee-desktop-nav__item:focus:not(.active) {
            background: rgba(0, 121, 208, 0.05);
        }

    /* Modifier to Container for Nav Items - move to bottom of nav bar */
    .employee-desktop-nav .employee-desktop-nav__items-container.employee-desktop-nav__items-container--secondary {
        align-items: flex-end;
        flex: 0 1 auto;
    }

    /* Modifier to Container for Nav Items - move to top */
    .employee-desktop-nav .employee-desktop-nav__items-container.employee-desktop-nav__items-container--highlight {
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
        flex: 0 1 auto;
        padding: .5rem;
    }

        /* Individual Nav Item - Button */
        .employee-desktop-nav__items-container .employee-desktop-nav__button {
            display: flex;
            padding: 0.5rem;
            align-items: center;
            gap: 0.3rem;
            flex: 1 0 0;
            border-radius: 0.25rem;
            background: rgb(var(--Content-Link));
            color: #FFF;
            text-decoration: none;
            width: 100%;
            transition: background .3s ease-out;
        }

            /* Modifier for Item Icon */
            .employee-desktop-nav__button .employee-desktop-nav__icon {
                width: 1.25rem;
                height: 1.25rem;
            }

            /* Button Text */
            .employee-desktop-nav__button .employee-desktop-nav__title {
                text-align: center;
                font-size: 1rem;
                font-style: normal;
                font-weight: 400;
                line-height: normal;
            }

        .employee-desktop-nav__items-container .employee-desktop-nav__button:hover {
            background: #006cbb;
        }

        .employee-desktop-nav__items-container .employee-desktop-nav__button:focus {
            background: #0060a6;
        }


/*****************************************
 * EMPLOYEE HEADER BAR
 *****************************************/

.employee-header-bar {
    display: flex;
    justify-content: center;
    background: rgba(255, 255, 255, 0.75);
    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.08);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    z-index: 999;
    transition: margin-left .3s ease-in;
}

.employee-header-bar--preview {
    display: flex;
    position: sticky;
    min-height: 60px;
}

.employee-header-bar__icon {
    display: flex;
    padding: 8px;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    flex: 1 0 auto;
}

    .employee-header-bar__icon > img {
        max-height: 6.25rem;
    }

    .employee-header-bar__icon > div {
        color: var(--Content-Primary, #252525);
        font-family: Inter;
        font-size: 0.875rem;
        font-style: normal;
        font-weight: 700;
        line-height: 1.3125rem; /* 150% */
    }

.employee-header-bar__logo {
    display: flex;
    padding: 0.5rem;
    flex: 1 0 0;
}

    .employee-header-bar__logo > a {
        text-decoration: none;
        pointer-events: none;
    }

    .employee-header-bar__logo.clickable > a {
        position: relative;
        pointer-events: fill;
        border: 2px dashed transparent;
        border-radius: .7rem;
        transition: border .1s ease-out;
    }

        .employee-header-bar__logo.clickable > a.aspNetDisabled, .employee-header-bar__logo > a.aspNetDisabled {
            background: none !important;
        }

    .employee-header-bar__logo.clickable > a:hover {
        border: 2px dashed lightblue;
    }

        .employee-header-bar__logo.clickable > a.aspNetDisabled:hover {
            border: 2px solid transparent !important;
        }

        .employee-header-bar__logo > a > img {
            max-height: 6.25rem;
        }

        .employee-header-bar__logo.clickable > a > div.overlay {
            position: absolute;
            border-radius: .7rem;
            background: rgba(255, 255, 255, 0);
            z-index: 10000;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            transition: background .1s ease-out;
        }

        .employee-header-bar__logo.clickable > a:focus > div.overlay {
            background: rgba(255, 255, 255, 0.36);
        }


.employee-header-bar__button {
    display: none;
    height: 2.75rem;
    width: 11.5rem;
    padding: 0rem 1rem;
    margin: 0.5rem 1rem;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    flex: 0 1 auto;
    text-decoration: none;
    border-radius: 1rem;
    background: var(--Background-Secondary-Hover, #E1F0FB);
    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.08), 0.75px 0.75px 0px 0px rgba(#E1F0FB, 0.80) inset;
    /* backdrop-filter: blur(8px); -- disabled due to causing laggy scroll */
    align-self: center;
    transition: background .3s ease-out;
}

    .employee-header-bar__button > span:first-child {
        width: 1.42931rem;
        height: 1.25rem;
    }

    .employee-header-bar__button > span:last-child {
        text-align: center;
        font-size: 1rem;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

/*************************************************
 * PORTALS
 *************************************************/

.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    min-height: 47px;
    padding: 8px 16px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(16px);
}

.breadcrumbs > div > a {
    overflow: hidden;
    color: var(--Content-Primary, #252525);
    text-overflow: ellipsis;
    font-family: "DM Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 21px; /* 150% */
    text-decoration-line: underline;
    text-wrap: nowrap;
}

.breadcrumbs__current {
    font-family: "DM Sans";
    font-size: 14px;
    font-weight: 700;
}

.richtext__wrapper {
    padding: 16px;
    border-radius: 16px;
    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);
}

    .richtext__wrapper img {
        max-width: 100%;
        height: auto;
    }

        .richtext__wrapper img.file-icon {
            width: inherit;
            height: inherit;
        }

.richtext__wrapper p:last-child {
    margin-bottom: 0;
}

.modal-file {
    padding-top: 24px;
}


/*************************************************
 * PORTAL TILES
 *************************************************/
/* Container for Page Cards */
.page-cards {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    flex: 1 1 0;
    max-width: 100%;
}

/* Page Card */
.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 */
    .page-card .page-card__content {
        display: flex;
        padding: 1rem;
        align-items: center;
        gap: 1rem;
        align-self: stretch;
    }

/* Page Card Icon */
.page-card__content .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);
}

.page-card__icon > span {
    font-size: 1.25rem;
    flex-shrink: 0;
}

/* Page Card Name */
.page-card__content .page-card__name {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
    min-width: 0;
}

.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 */
        .page-card__name.parent > span::after {
            font-family: 'FontAwesome';
            font-size: 20px;
            content: "\f105";
            float: right;
            color: rgba(37, 37, 37, .6);
        }


/*************************************************
* PORTAL LEADERSHIP PAGE  
**************************************************/
.directory-wrapper {
    align-content: center;
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
}

.leadership, .directory {
    display: flex;
    padding: 16px;
    flex-direction: column;
    gap: 16px;
    align-self: stretch;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.72);
    margin-bottom: .5rem;
    width: 100%;
}

.leadership__header, .directory__header {
    display: flex;
}

.leadership__initials-wrapper, .directory__initials-wrapper {
    display: flex;
    width: 44px;
    height: 44px;
    padding: 8px;
    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%));
}

.leadership__initials, .directory__initials {
    color: #fff;
    /* Heading L/Regular */
    font-family: "DM Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 27px; /* 150% */
}

.leadership__profilepic, .directory__profilepic {
    display: inline-block;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.leadership__name, .directory__name {
    color: var(--Content-Primary, #252525);
    /* Text/Regular */
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 21px; /* 150% */
}

.leadership__details-wrapper, .directory__details-wrapper {
    display: flex;
}

.leadership__title, .directory__title {
    margin-left: .5rem;
    display: flex;
    padding: 0px 8px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 100px;
    background: #B9DCF5;
    color: #2B4E57;
    /* Text S/Regular */
    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 150% */
}

.leadership__email, .directory__email {
    color: var(--Content-Link, #0079D0);
    /* Text S/Regular */
    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 150% */
    text-decoration-line: underline;
    padding-top: .25rem;
}

.leadership__about {
    border-top: 2px solid #B9DCF5;
    padding-top: .5rem;
}


/*****************************************
 * SENT MESSAGES
 *****************************************/

/* Sent Message Card - extends .message-card class */
.message-card.sent-message-card {
    padding: 0.75rem;
}

/* Sent Message Card Content Wrapper */
.sent-message-card .sent-message-card__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    flex: 1 0 0;
    max-width: 100%;
}

/* Sent Message Card Title Bar */
.sent-message-card__content .sent-message-card__title {
    display: flex;
    justify-content: space-between;
    gap: 0.25rem;
    align-items: center;
    align-self: stretch;
}

/* Title Bar Subject Text */
.sent-message-card__title .sent-message-card__subject {
    display: flex;
    align-items: center;
    min-width: 0;
}

    .sent-message-card__title .sent-message-card__subject > span {
        color: var(--Content-Primary);
        /* Text/Bold */
        font-size: 0.875rem;
        font-style: normal;
        font-weight: 700;
        line-height: 1.3125rem; /* 150% */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* Title Bar Date Text */
.sent-message-card__title .sent-message-card__date {
    color: var(--Content-Secondary);
    padding-left: .5rem;
    /* Text S/Regular */
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.125rem; /* 150% */
}

/* Sent Messarge Card Recipients */
.sent-message-card__content .sent-message-card__recipients {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    align-self: stretch;
    flex: 1 0 0;
}

    .sent-message-card__recipients > span {
        color: var(--Content-Primary);
        /* Text/Bold */
        font-family: Inter;
        font-size: 0.875rem;
        font-style: normal;
        font-weight: 400;
        line-height: 1.3125rem; /* 150% */
    }

/* Sent Message Card Body */
.sent-message-card__content .sent-message-card__body {
    display: flex;
    justify-content: flex-start;
    padding: 0.125rem 0;
    align-self: stretch;
    align-items: center;
    gap: 0.25rem;
}
    /* Sent Message Card Statistic Block */
    .sent-message-card__body .sent-message-card__stat-block, 
    .message-stats__statistics-container .sent-message-card__stat-block,
    .message-stats__engagement-statistics-container .sent-message-card__stat-block {
        display: flex;
        padding: 0.125rem 0.375rem;
        gap: 0.25rem;
        justify-content: center;
        align-items: baseline;
        border-radius: 0.25rem;
        border-collapse: separate;
        overflow: hidden;
    }

        /* Modifers for stat blocks */
        .sent-message-card__stat-block--delivered {
            background: var(--Background-Positive, #C7E9B8);
            color: var(--Content-Positive, #194D00);
        }
        .sent-message-card__stat-block--undelivered {
            background: #FBEFE6;
            color: #D85B00
        }
        .sent-message-card__stat-block--clicked {
            background: var(--Background-Secondary-Hover, #E1F0FB);
            color: rgb(var(--Content-Link));
        }

/* Statistic Block Text */
.sent-message-card__stat-block .sent-message-card__top-text {
    /* Heading S/Strong */
    font-family: Inter;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.125; /* 150% */
}
.sent-message-card__stat-block .sent-message-card__bottom-text {
    /* Text S/Italic */
    font-family: Inter;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.125rem; /* 150% */
}


/********************************************
 * MESSAGE DETAIL
 ********************************************/

/* Message Header Wrapper */
.message-header-wrapper {
    display: flex;
    padding: 0.5rem 1rem;
}

.message-header {
    display: flex;
    width: 100%;
    border-radius: 1rem;
    background: var(--Content-Primary-Invert);
    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;
}

/* Message Header Content */
.message-header__content {
    display: flex;
    padding: 0.5rem;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    flex: 1 0 0;
}

/* Message Header Subject (top row) */
.message-header__content .message-header__subject {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 0.5rem;
    align-self: stretch;
}

/* Back Caret */
.message-header .message-header__back-button {
    display: flex;
    height: 100%;
    align-items: flex-start;
    text-decoration: none;
    padding: 0.7rem 0 0.7rem 0.5rem;
}

    .message-header__back-button > i {
        font-size: 1.125rem;
        color: #000;
    }

/* Title text */
.message-header__subject .message-header__title {
    flex: 1 0 0;
    color: var(--Content-Primary);
    /* Heading M/Strong */
    font-family: "DM Sans";
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.5rem; /* 150% */
}

/* Translate Page button */
.message-header__subject .message-header__translate-button {
    display: flex;
    padding: 0.125rem 0.25rem;
    height: 1.5rem;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    align-self: stretch;
    border-radius: 0.25rem;
    background: rgb(var(--Content-Link));
    color: var(--Content-Primary-Invert);
    /* Text S/Regular */
    font-family: Inter;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.125rem; /* 150% */
    text-decoration: none;
    transition: background .3s ease-out;
}

    .message-header__translate-button > span.icon-duotone {
        font-size: 1.25rem;
    }

    .message-header__translate-button:focus {
        background: #0060a6;
    }

/* Delete Message button */
.message-header__subject .message-header__delete-button {
    display: flex;
    height: 1.5rem;
    align-items: center;
    gap: 0.625rem;
    color: #A2A2A2;
    text-decoration: none;
}

    .message-header__delete-button > i {
        font-size: 1.125rem;
    }

/* Message Header Sender Details (bottom row) */
.message-header__content .message-header__sender-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
    color: var(--Content-Secondary);
    /* Text/Regular */
    font-family: Inter;
    font-size: 0.875rem;
    font-weight: 400;
}

/* Sender Name */
.message-header__sender-details .message-header__sender-name {
    align-self: stretch;
    font-style: normal;
    line-height: 1.3125rem; /* 150% */

}

/* Date Sent */
.message-header__sender-details .message-header__date-sent {
    align-self: stretch;
    line-height: 1.3125rem; /* 150% */
}

/* Message Body Container */
.message-body {
    display: flex;
    padding: 0.5rem 1rem;
}

/* Message Body Content Block */
.message-body__content {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    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;
    color: var(--Blacks-Eerie-Black);
    font-family: Inter;
    font-size: 0.9375rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal; /* 120% */
    width: 100%;
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

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

    .message-body__content > p > span {
        line-height: 1;
    }

/* Message Attached Tasks Container */
.message-tasks {
    display: flex;
    padding: 0.5rem 1rem;
}

.message-tasks__content {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.0625rem;
    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    border-radius: 1rem;
    border-collapse: separate;
}

.message-tasks__content .message-tasks__header, 
.message-comments__content .message-comments__header {
    display: flex;
    padding: 0.25rem 0rem;
    justify-content: center;
    align-items: center;
    gap: 0.3125rem;
    background-color: var(--Content-Primary-Invert);
    color: var(--Content-Primary);
    text-align: center;
    /* Heading S/Strong */
    font-family: "DM Sans";
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.3125rem; /* 150% */
    width: 100%;
} 

.message-tasks__content .message-tasks__card {
    display: flex;
    height: 5.71875rem;
    padding: 0rem 1rem;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    align-self: stretch;
    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;
    text-decoration: none;
    transition: background .3s ease-out;
}

    .message-tasks__card:not(.message-tasks__card--no-hover-effects):hover {
        background: #f2f2f2;
        box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.08), 0.75px 0.75px 0px 0px #f2f2f2 inset;
    }

    .message-tasks__card:not(.message-tasks__card--no-hover-effects):focus {
        background: #e7e7e7;
        box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.08), 0.75px 0.75px 0px 0px #e7e7e7 inset;
    }

.message-tasks__card .message-tasks__due-date {
    display: flex;
    width: 3.125rem;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    border-radius: 0.25rem;
    border-collapse: separate;
    overflow: hidden;
    box-shadow: 0px 0.5px 1px 0px rgba(0, 0, 0, 0.25);
}

.message-tasks__due-date .message-tasks__title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    color: var(--Content-Primary-Invert);
    text-align: center;
    /* Text S/Regular */
    font-family: Inter;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.125rem; /* 150% */
    background-color: var(--Content-Primary);
}

.message-tasks__due-date .message-tasks__day-month {
    display: flex;
    padding: 0.375rem 0.5rem 0.25rem 0.5rem;
    flex-direction: column;
    align-items: center;
    gap: 0.15625rem;
    align-self: stretch;
    background: var(--Content-Primary-Invert);
}

    .message-tasks__day-month > span {
        color: var(--Content-Primary);
        text-align: center;
        font-family: "DM Sans";
        font-size: 1rem;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    .message-tasks__day-month > span:not(:first-child) {
        font-family: Inter;
        font-size: 0.75rem;
        font-weight: 400;
        line-height: 1.125rem; /* 150% */
    }

.message-tasks__card .message-tasks__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    flex: 1 0 0;
}

.message-tasks__info .message-tasks__details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
}

.message-tasks__details > span {
    color: var(--Blacks-Eerie-Black, #1E1E1E);
    /* Heading M/Strong */
    font-family: "DM Sans";
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.5rem; /* 150% */
}

        .message-tasks__details > span:not(:first-child) {
            color: var(--Content-Secondary);
            /* Text/Regular */
            font-family: Inter;
            font-size: 0.875rem;
            font-style: normal;
            font-weight: 400;
            line-height: 1.313rem; 
        }

.message-tasks__info .message-tasks__status {
    display: flex;
    padding: 0.3125rem 0rem;
    justify-content: flex-end;
    align-items: center;
    gap: 0.25rem;
}

    .message-tasks__status > span {
        color: var(--Content-Primary) !important;
        text-align: center;
        font-family: Inter;
        font-size: 0.75rem;
        font-style: normal;
        font-weight: 400;
        line-height: 0.75rem; /* 100% */
    }

/* Message Comments Section */
.message-comments {
    display: flex;
    padding: 0.5rem 1rem;
}

.message-comments__content {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.0625rem;
    border-radius: 1rem;
    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.08);
    border-collapse: separate;
    overflow: hidden;
}

.message-comments__icon {
    display: flex;
    min-width: 2rem;
    height: 2rem;
    padding: .25rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: flex-start;
    gap: 0.625rem;
    border-radius: 6.25rem;
    background: var(--Gradient-Blue, linear-gradient(180deg, #011A2C 25.85%, #396673 100%));
    color: var(--Background-Secondary-Pressed);
    font-size: .875rem;
    /* Text/Regular */
    font-family: Inter;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.3125rem; /* 150% */
}

.message-comments__icon.message-comments__icon--compose {
    margin-top: .4rem;
}

.message-comments__content .message-comments__compose-wrapper {
    display: flex;
    padding: 0.75rem;
    align-items: flex-start;
    gap: 0.25rem;
    align-self: stretch;
    border-bottom: 1px solid var(--Content-Understated-Inverted);
    background: rgba(255, 255, 255, 0.72);
}

.message-comments__compose-wrapper .message-comments__compose-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0.375rem;
    flex: 1 0 0;
}

.message-comments__compose-container .message-comments__compose-text-area {
    display: flex;
    align-items: stretch;
    align-self: stretch;
}

.message-comments__compose-text-area .message-comments__input-area {
    display: flex;
    padding: 0.5rem;
    justify-content: space-between;
    align-items: flex-start;
    flex: 1 0 0;
    background-color: var(--Content-Primary-Invert);
    border-radius: 0.5rem 0 0 0.5rem;
    border-collapse:separate;
    overflow: hidden;
    border: 1px solid var(--Background-Secondary-Pressed);
}

    .message-comments__input-area > textarea {
        min-height: .625rem;
        flex: 1 0 0;
        /* Text/Regular */
        font-family: Inter;
        font-size: 0.875rem;
        font-style: normal;
        font-weight: 400;
        line-height: 1.3125rem; /* 150% */
        border: none;
        overflow: hidden;
        padding-right: 1rem;
    }

        .message-comments__input-area > textarea:focus {
            outline: none;
        }

    /* Emoticon button */
    .message-comments__input-area > button.emoji-picker {
        display: none;
        align-self: stretch;
        align-items: flex-start;
        background: transparent;
        border: none;
        padding-left: 0.5rem;
        padding-top: 0.2rem;
    }

        button.emoji-picker > i {
            font-size: 1.375rem !important;
            align-self: flex-start;
            color: var(--Content-Link-Alt);
        }

.message-comments__compose-text-area .message-comments__send-button {
    display: flex;
    width: 2.5rem;
    height: auto;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    text-decoration: none;
    border-radius: 0rem 0.5rem 0.5rem 0rem;
    background: rgb(var(--Content-Link));
    transition: background .3s ease-out;
    padding-right: .1rem;
}

    .message-comments__send-button > i {
        font-size: 1.375rem;
        color: inherit;
    }

    .message-comments__send-button:focus {
        background: #0060a6;
    }

.message-comments__compose-container .message-comments__extras {
    display: flex;
    align-items: flex-start;
    gap: 0.25rem;
    align-self: stretch;
    color: var(--Content-Primary);
}

.message-comments__extras .message-comments__character-count {
    flex: 1 0 0;
    color: #3a3a3a;
    /* Text S/Italic */
    font-family: Inter;
    font-size: 0.75rem;
    font-style: italic;
    font-weight: 400;
    line-height: 1.125rem; /* 150% */
}

.message-comments__extras .message-comments__sort-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: inherit;
    /* Text S/Underline */
    font-family: Inter;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.125rem; /* 150% */
    text-decoration: none;
}

    .message-comments__sort-button > span {
        text-decoration: underline;
        color: #3a3a3a;
    }

    .message-comments__sort-button > i {
        font-size: 1.125rem;
        color: inherit;
    }

.message-comments__content .message-comments__comment-list {
    display: flex;
    padding: 0.75rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    align-self: stretch;
    background: rgba(255, 255, 255, 0.72);
}

.message-comments__comment-list .message-comments__comment-bubble-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 0.25rem;
    align-self: stretch;
}

.message-comments__comment-bubble-wrapper .message-comments__comment-bubble {
    display: flex;
    padding: 0.5rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    flex: 1 0 0;
    border-radius: 0.125rem 0.5rem 0.5rem 0.5rem;
    border-collapse: separate;
    overflow: hidden;
    background: var(--Background-Secondary-Hover, #E1F0FB);
}

.message-comments__comment-bubble .message-comments__bubble-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    align-self: stretch;
}

    .message-comments__comment-bubble .message-comments__bubble-header > span {
        color: var(--Content-Primary);
        /* Heading M/Strong */
        font-family: "DM Sans";
        font-size: 1rem;
        font-style: normal;
        font-weight: 700;
        line-height: 1.5rem; /* 150% */
        flex: 1 0 0;
    }

    .message-comments__comment-bubble .message-comments__bubble-header > span:not(:first-child) {
        color: #7c7c7c;
        font-size: 0.875rem;
        font-weight: 400;
        line-height: 1.3125rem;
        flex: 0 1 0;
        white-space: nowrap;
    }

.message-comments__comment-bubble .message-comments__delete-button {
    display: flex;
    height: 1.5rem;
    align-items: center;
    gap: 0.625rem;
    text-decoration: none;
}   

    .message-comments__delete-button > i {
        font-size: 1rem;
        color: #7c7c7c;
    }

.message-comments__comment-bubble .message-comments__body {
    align-self: stretch;
    color: var(--Content-Primary);
    /* Text/Regular */
    font-family: Inter;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.3125rem; /* 150% */
}

.message-comments__content .message-comments__private {
    display: flex;
    align-items: center;
    align-self: stretch;
    background-color: rgba(255, 255, 255, 0.72);
    padding: .5rem 0;
}

/* Message Reply Icon */
.message-reply {
    cursor: pointer;
    position: fixed;
    bottom: var(--mobile-nav-height);
    right: 1rem;
    z-index: 1054;
    height: 54px;
    width: 54px;
    display: inline-flex;
    padding: 1rem;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    border-radius: 1.5rem;
    background: rgba(5, 130, 220, 0.88);
    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;
    margin-bottom: 1rem;
}

    .message-reply .fa-duotone {
        --fa-primary-color: #fff;
        --fa-secondary-color: #fff;
        font-size: 1.5rem;
    }

/* Sent Message Stats */
.message-stats-wrapper {
    display: flex;
    padding: 0.5rem 1rem;
}

.message-stats {
    display: flex;
    padding: 0.5rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    align-self: stretch;
    border-radius: 1rem;
    background: var(--Content-Primary-Invert);
    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;
    width: 100%;
}

/* Children of this container will use the ".sent-message-card__stat-block" class */
.message-stats .message-stats__statistics-container {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    align-self: stretch;
}

    .message-stats__statistics-container .sent-message-card__stat-block-wrapper {
        display: flex;
        padding: 0.5rem;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        align-self: stretch;
        gap: 0.25rem;
        flex: 1 0 0;
        border-radius: 0.25rem;
        border-collapse: separate;
        overflow: hidden;
    }

    .sent-message-card__stat-block-wrapper .sent-message-card__top-text, .sent-message-card__stat-block-wrapper .sent-message-card__bottom-text {
        font-family: "DM Sans";
        font-size: 1rem;
        line-height: 1.5rem;
    }

    .sent-message-card__stat-block-wrapper .sent-message-card__action {
        display: flex;
        padding: 0.125rem 0rem;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
        align-self: stretch;
        border-radius: 0.25rem;
        text-decoration: none;
    }

        .sent-message-card__action.sent-message-card__action--resend {
            background-color: rgb(var(--Content-Link));
        }

        .sent-message-card__action.sent-message-card__action--edit {
            background-color: #D85B00;
        }

    .sent-message-card__action > i {
        font-size: .875rem;
        color: var(--Content-Primary-Invert);
    }

    .sent-message-card__action > span {
        color: var(--Content-Primary-Invert, #FFF);
        /* Text S/Regular */
        font-family: Inter;
        font-size: 0.75rem;
        font-style: normal;
        font-weight: 400;
        line-height: 1.125rem; /* 150% */
    }

.message-stats .message-stats__engagement {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    border-radius: 0.25rem;
    border: 1px solid var(--Background-Secondary-Pressed);
    background: #F2F9FDB3;
}

.message-stats__engagement .message-stats__engagement-header {
    display: flex;
    padding: 0.25rem 0;
    align-items: center;
    align-self: stretch;
    flex: 1 0 0;
}

.message-stats__engagement-header .message-stats__expand-details {
    display: flex;
    gap: .5rem;
    align-items: center;
    text-decoration: none;
    flex: 1 0 100%;
    justify-content: center;
}

.message-stats__expand-details .message-stats__expand-details-button {
    background-color: #034E8466;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: .25rem;
    color: var(--Content-Link-Pressed);
    display: flex;
}

    .message-stats__expand-details > span {
        color: var(--Content-Link-Pressed, #034E84);
        /* Heading M/Strong */
        font-family: "DM Sans";
        font-size: 1rem;
        font-style: normal;
        font-weight: 700;
        line-height: 1.5rem; /* 150% */
    }

    .message-stats__expand-details-button > i.fa-chevron-right {
        font-size: .75rem !important;
        display: table;
        margin: auto;
    }

    a.message-stats__expand-details .fa-chevron-right {
          transition: transform .1s ease-in;
    }
    a.message-stats__expand-details[aria-expanded=true] .fa-chevron-right {
          transform: rotate(90deg);
    }
    a.message-stats__expand-details[aria-expanded=false] .fa-chevron-right {
          transform: rotate(0deg);
    }


.message-stats__engagement .message-stats__engagement-card {
    display: flex;
    padding: 0.25rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    align-self: stretch;
    border-bottom: 0.5px solid var(--Background-Secondary-Pressed);
}

    .message-stats__engagement-card:first-child {
        border-top: 0.125rem solid var(--Background-Secondary-Pressed) !important;
    }

    .message-stats__engagement-card:last-child {
        border-bottom: none;
    }

    .message-stats__engagement-card:first-child:last-child {
        border-top: 0.125rem solid var(--Background-Secondary-Pressed) !important;
        border-bottom: none;
    }

.message-stats__engagement-card .message-stats__card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    align-self: stretch;

}

.message-stats__card-header .message-stats__card-header-icon {
    display: flex;
    min-width: 1.375rem;
    height: 1.375rem;
    padding: 0.25rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    border-radius: 6.25rem;
    background: var(--Gradient-Blue, linear-gradient(180deg, #011A2C 25.85%, #396673 100%));
    color: var(--Background-Secondary-Pressed);
    font-size: 0.625rem;
    font-family: Inter;
}

.message-stats__card-header > span {
    flex: 1 0 0;
    color: var(--Content-Primary);
    /* Text/Regular */
    font-family: Inter;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.3125rem; /* 150% */
}

/* Children of this container will use the ".sent-message-card__stat-block" class */
.message-stats__engagement-card .message-stats__engagement-statistics-container {
    display: flex;
    align-items: center;
    align-self: stretch;
    gap: 0.25rem;
}

.message-stats__engagement-statistics-container .sent-message-card__stat-block {
    flex-direction: row;
    gap: 0.5rem;
    border-radius: 0.25rem;
    flex: 1 0 0;
    align-items: center;
    justify-content: center;
}

.message-stats__engagement-statistics-container .sent-message-card__stat-block > span {
    font-style: italic;
}



.poweredby {
    display: flex;
    padding: 12px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.08);
    margin-top: 2.5rem;
}

    .poweredby .text {
        color: #000;
        font-family: "DM Sans";
        font-size: 0.625rem;
        font-style: normal;
        font-weight: 400;
        line-height: 1.313rem;
    }

    .poweredby a {
        color: #000;
        text-align: center;
        font-family: "DM Sans";
        font-size: 0.625rem;
        font-style: normal;
        font-weight: 400;
        line-height: 1.313rem;
        text-decoration-line: underline;
    }


/**********************/
/**** Custom Pages ****/
/**********************/
.custom-page-container {
    margin-left: var(--desktop-nav-width);
}


/*******************************************/
/* Pages Shortcuts                         */
/*******************************************/

/* Standard Control */

.pages-shortcut-container {
    display: flex;
    align-items: center;
    gap: 1rem;
    position: absolute;
    right: 0;
    top: 1px;
    height: 100%;
}

.pages-shortcut {
    color: var(--Content-Primary, #252525);
    text-align: center;
    font-family: "DM Sans";
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.6875rem; /* 150% */
    cursor: pointer;
    text-decoration: none;
}

.pages-shortcut--selected {
    text-align: center;
    font-weight: 700;
}

.pages-shortcut:hover {
    /* color: #3B3B3B; */
    color: #515151;
}

.pages-shortcut:focus {
    color: #00C0A7;
}

/* Vertical Overflow Menu Control*/

.pages-display-shortcuts-toggle {
    color: #252525;
    text-decoration: none;
    background: rgba(255, 255, 255, 0);
    backdrop-filter: blur(.5rem);
    border-radius: .5rem;
    overflow: hidden;
    aspect-ratio: 1/1;
    height: auto;
    width: auto;
}

.pages-display-shortcuts-toggle::before {
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    content: "\f0c9";
    margin: .5rem;
    transition: transform 0.3s ease;
    font-size: 1.75rem;
}

.pages-display-shortcuts-toggle[aria-expanded="true"]::before {
    content: "\f00d";
}

.pages-shortcut-container-collapsible {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    border-top: 1px solid var(--bg-container-DK, #D9D9D9);
    border-bottom: 1px solid var(--bg-container-DK, #D9D9D9);
    background: rgba(255, 255, 255, .375);
}

.pages-shortcut-container-collapsible .pages-shortcut {
    padding: .25rem 1rem;
    width: 100%;
    text-align: left;
}

.pages-shortcut-container-collapsible .pages-shortcut:first-child, 
.pages-shortcut-container-collapsible .pages-shortcut:last-child {
    padding-top: .5rem;
}






/************************************************************
 * RESPONSIVENESS - MUST LEAVE AT THE BOTTOM OF THE PAGE!!!
 ************************************************************/

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default */

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {

    .chat {
        height: calc(100vh - 180px);
        margin-left: 16px;
        position: relative;
        z-index:initial;
    }
    .chat__cancel
    {
        display: none;
    }

    .chat__header-ee {
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        position: relative;
    }

    .chat-download-alert {
        position: relative;
    }

    .message-reply {
        bottom: 0;
    }

    .employee-content {
        padding-bottom: 0;
    }
 }

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {

    /* Swap nav bars */
    .employee-desktop-nav {
        display: flex;
    }
    .employee-mobile-nav {
        display: none;
    }

    /* Swap "Back to Admin" button */
    .employee-header-bar__button {
        display: flex;
    }

    /* Spacing for desktop nav bar */
    .employee-header-bar, 
    .employee-impersonation, 
    .employee-preview, 
    .employee-section-wrapper {
        margin-left: var(--desktop-nav-width);
        transition: margin-left .3s ease-in;
    }

    .employee-content {
        transition: margin-bottom .3s ease-in;
    }

    /* Set to full width of viewport */
    .employee-section-wrapper.max-width-100 > div {
        max-width: 100%;
    }

    /* Center employee footer */
    .employee-footer-desktop {
        padding-left: var(--desktop-nav-width);
    }
    

    /* Adjust styling of announcement compose element */
    .announcement {
        position: relative;
        height: 60vh;
        max-height: 100%;
        max-width: 90%;
        margin: 0 1.5rem;
    }

    .announcement__compose-wrapper {
        max-width: var(--max-width);
        width: 100% !important;
        height: 100% !important;
        border-radius: 16px;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        z-index: 998;
        position: absolute;
    }

    .announcement__cancel {
        display: none;
    }

    .announcement__compose-actions > div:last-child > :first-child {
        display: none;
    }

    .announcement__compose-actions > div:last-child > :last-child {
        display: flex !important;
        margin-top: .25rem;
    }

    /* Make background  */
    .chat__messages-wrapper {
        background: rgba(255, 255, 255, 0.4);
    }

    .chat__compose-wrapper {
        background: rgba(255, 255, 255, 0.4);
    }

    /* Show emoji picker */
    .message-comments__input-area > button.emoji-picker {
        display: flex;
    }

    /* Set spacing for the footer in the settings page */
    .page-footer {
        position: absolute;
        bottom: 0;
        text-align: center;
        /* Set the fixed height of the footer here */
        height: 40px;
        line-height: 20px; /* Vertically center the text there */
    }

    .page-footer-ee {
        margin-top: 3rem;
        margin-bottom: 3rem;
    }

    .pages__breadcrumbs-desktop {
        transition: margin-left .3s ease-in;
    }

    .pages__footer-ee {
        transition: margin-left .3s ease-in;
    }

}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {


    .directory{
        margin-left: 8px;
        margin-right: 8px;
        width: 48%;
    }
}