:root {
    --bs-th-navy-rgb: 0,60,75; /* NAVY #003C4B */
    --bs-th-green-rgb: 140, 198, 63; /* GREEN #8CC63F */
    --bs-th-blue-rgb: 23, 152, 193; /* BLUE #1798C1 */
    --Yellow-Jonquil: #F7CB15;
    --Bg-Container-Dk: #D9D9D9;
    --Bg-Container-Lt: #F3F3F3;
    --Blue-Alice-White: 244,251,255;
    --Blue-Paynes-Gray: 57,102,115;
    --Blue-Alice-Blue: 215,235,249;
    --Blue-Gray: #D0D4E4;
    --Blacks-Battleship-Gray: #858585;
    --Blacks-Eerie-Black: #1E1E1E;
    --Black-Dark: #101010;
    --Blue-Bleu-de-France: 5,130,220;
    --Blacks-Silver: 150,150,150;
    --Background-Base-Hover: #698B95;
    --Background-Base-Pressed: #2B4E57;
    --Backdround-Notice: #FBE898;
    --Background-Positive: #C7E9B8;
    --Background-Secondary: #F2F9FD;
    --Background-Secondary-RGB: 242,249,253;
    --Background-Secondary-Hover: #E1F0FB;
    --Background-Secondary-Pressed: #B9DCF5;
    --Background-Tertiary: #F9F9F9;
    --Background-Container-DK: #D9D9D9;
    --Blacks-Battleship-Gray: #858585;
    --Content-Brand-1: #0582DC;
    --Content-Link: 0,121,208;
    --Content-Link-Pressed: #034E84;
    --Content-Link-Pressed-RGB: 3,78,132;
    --Content-Notice: #6D6909;
    --Content-Notice-Bold: #453906;
    --Content-Link-Alt: #396673;
    --Content-Link-Hover: #0463A7;
    --Content-Link-Alt-Hover: #698B95;
    --Content-Positive: #194D00;
    --Content-Primary: #252525;
    --Content-Primary-Onyx: #373737;
    --Content-Primary-Invert: #FFF;
    --Content-Secondary: #656565;
    --Content-Tertiary: #A2A2A2;
    --Content-Understated-Inverted: #DDD;
    --Content-Link-Alt-Pressed: #2B4E57;
    --Disabled-Button: #8BA2B2;
    --Gradient-Blue: linear-gradient(180deg, #011A2C 25.85%, #396673 100%);
    --Neutral-Borders: #EEF2F6;
    --Neutral-Placeholder-Text: #6C7684;
    --Red-Imperial-Red: #EA4040;

    --max-width: 960px;
}

.max-width-100 {
    max-width: 100% !important;
}


/* Loading Spinner */
.loading-spinner-wrapper {
    display: flex;
    padding: 0.4em;
    justify-content: center;
    align-items: center;
    background-color: rgba(55, 55, 55, .5); 
    border-radius: 50%;
    position: absolute;
    left: 0;
    right: 0;
    margin-inline: auto;
    width: fit-content;
}

.loading-spinner-wrapper.center-vertically {
    top: 50%;
}

.loading-spinner-wrapper.loading-spinner-wrapper--pages {
    top: 15rem;
    z-index: 1000000;
    background-color: rgba(55, 55, 55, .95);
    padding: .8em;
}

    .loading-spinner-wrapper.loading-spinner-wrapper--pages > .loading-spinner {
        font-size: 15px;
    }

.loading-spinner-wrapper.loading-spinner-wrapper--dt {
    top: 50%;
    z-index: 1000000;
    background-color: rgba(55, 55, 55, .95);
    padding: .8em;
}

    .loading-spinner-wrapper.loading-spinner-wrapper--dt > .loading-spinner {
        font-size: 1em;
    }

.loading-spinner,
.loading-spinner:after {
  border-radius: 50%;
  width: 4em;
  height: 4em;
}

.loading-spinner {
  margin: 0;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: .6em solid rgba(255, 255, 255, 0.2);
  border-right: .6em solid rgba(255, 255, 255, 0.2);
  border-bottom: .6em solid rgba(255, 255, 255, 0.2);
  border-left: .6em solid #ffffff;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}

@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}




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

/* Outer Wrapper */
.announcement {
    display: flex;
    flex-direction: column;
}

.chat__header-wrapper, .announcement__header-wrapper {
    background: #fff;
    display: flex;
    gap: 1rem;
    width: 100%;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1001;
}

    .chat__header-wrapper > div:last-child, .announcement__header-wrapper > div:last-child {
        flex-grow: 1;
    }

.chat__cancel, .announcement__cancel {
    font-size: 1.2rem;
    padding: 2px 0;
}

.chat__header, .announcement__header {
    color: rgba(var(--Blue-Paynes-Gray), 1);
    font-size: 1.2rem;
    font-weight: bold;
    padding-right: 17px;
    text-align: center;
    flex-shrink: 1;
}


.announcement__header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    flex: 1 0 0;
}

a.announcement__edit-team {
    display: flex;
    gap: .5rem;
    align-items: center;
    text-decoration: none;
}

.announcement__edit-team-button {
    background-color: #39667366;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: .25rem;
    color: var(--Content-Link-Pressed);
    display: flex;
    justify-content: center;
}

    .announcement__edit-team-button > span {
        font-size: .8em !important;
        align-self: center;
        padding: 0 0 1.1rem 1.1rem;
    }

.chat__subheader, .announcement__subheader {
    color: rgba(var(--Blacks-Silver), .8);
    padding-right: 17px;
    text-align: center;
}

/* Messages */

.chat__messages-wrapper {
    height: calc(100vh - 100px);
    overflow: auto;
    scrollbar-color: #cecece;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
    width: 100%;
    padding-bottom: 130px;
}

.chat__messages {
    margin-top: 64px;
    padding-right: 8px;
}

.chat__messages-new {
    padding-bottom: 32px;
    text-align: center;
}

.chat__compose-wrapper {
    background-color: rgba(255, 255, 255, 0.5);
    bottom: 0;
    position: fixed;
    left: 0;
    width: 100%;
    z-index: 1001;
    min-height: 130px;
}

.chat__compose-wrapper-inner {
    border-start-start-radius: 16px;
    border-start-end-radius: 16px;
    background: #fff;
    padding: 1.15rem;
    box-shadow: 0px -4px 14px 0px rgba(0, 0, 0, 0.08);
    border-collapse: separate;
}

.announcement__compose-wrapper {
    background-color: var(--Content-Primary-Invert);
    bottom: 0;
    position: fixed;
    left: 0;
    width: 100%;
    z-index: 1031;
}

.announcement__compose-wrapper {
    padding: 1rem 0;
}

.announcement__compose-wrapper > div {
    padding: 0 1rem;
}

.announcement__compose-wrapper {
    display: flex;
    flex-direction: column;
    transition: height .1s ease;
}

.announcement__compose-message {
    flex: 1 0 auto;
}

.announcement__compose-subject {
    border-bottom: 1px solid var(--Content-Understated-Inverted, #DDD);
}

    .chat__compose > div, .announcement__compose-subject input, .announcement__compose-message textarea {
        border: 0;
        display: inline-block;
        height: auto;
        line-height: normal;
        padding: .7rem 0;
        width: 100%;
    }

.chat__compose > div, .announcement__compose-subject input {
    padding-right: .5rem;
}

.announcement__compose-message textarea {
    height: 100%;
    word-wrap: break-word;
    text-align: start;
    resize: none;
    box-shadow: none;
    outline: none;
    overflow: auto;
}

.chat__compose input:focus, .announcement__compose-subject input:focus, .announcement__compose-message input:focus {
    outline: 0;
}

.chat__compose-actions, .announcement__compose-actions {
    border-top: 1px solid var(--Content-Understated-Inverted);
    display: flex;
    margin-top: 8px;
    padding-top: .5rem !important;
}

    .chat__compose-actions > div, .announcement__compose-actions > div {
        padding: .7rem 1.25rem 0 0;
    }

        .chat__compose-actions > div:last-child, .announcement__compose-actions > div:last-child {
            margin-left: auto;
            display: flex;
            padding: 0;
            gap: 0.5rem;
        }

        .chat__compose-actions > div i, .announcement__compose-actions > div i {
            color: rgba(var(--Content-Link-Pressed-RGB), .9);
            font-size: 1.5rem;
        }

            .chat__compose-actions > div i.message-action-send, .announcement__compose-actions > div i.message-action-send {
                padding-top: 0.5rem;
            }

            .chat__compose-actions > div i:hover, .announcement__compose-actions > div i:hover {
                cursor: pointer;
            }

        .announcement__compose-comments {
            display: flex !important;
            padding-top: .5rem !important;
        }

.chat__file-upload input, .announcement__file-upload input {
    display: none;
}

.chat__image-upload input, .announcement__image-upload input {
    display: none;
}

.chat__attachments,
.announcement__attachments {
    display: flex;
    flex-wrap: wrap;
}

.chat__attachment {
    border: 1px solid rgba(220, 220, 220, 1);
    border-radius: 8px;
    display: flex;
    gap: .5rem;
    width: fit-content;
    margin: 4px 16px 0 0;
    padding: 8px;
    position: relative;
}

    .chat__attachment > img {
        width: auto;
        max-height: 50px;
    }

    .chat__attachment > span {
        color: rgba(0, 0, 0, .6);
        font-size: 1.2rem;
        padding-left: 4px;
        text-align: center;
        vertical-align: top;
    }

        .chat__attachment > span:hover {
            cursor: pointer;
        }

.chat__message-wrapper {
    clear: both;
}

.chat__message {
    border-radius: 16px;
    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.08), -0.75px -0.75px 0px 0px #FFF;
    backdrop-filter: blur(4px);
    padding: 16px;
    width: auto;
    clear: both;
    margin-bottom: 4px;
}
    
    .chat__message-not-me a.chat-reply__content {
        cursor: pointer;
        pointer-events: auto;
        background-color: #fff;
        border-radius: 0 0 16px 16px;
        transition: background-color .3s ease-out;
    }

        .chat__message-not-me a.chat-reply__content:hover {
            background-color: #f2f2f2;
        }
            
        .chat__message-not-me a.chat-reply__content:active {
            background-color: #e5e5e5;
        }

    .chat__message .chat-reply__delete {
        display: none;
    }

    .chat__message .chat-reply {
        margin-bottom: 12px;
    }

.chat__message-me {
    background: rgba(5, 130, 220, 0.72);
    border: rgba(5, 130, 220, 0.72);
    color: #fff;
    float: right;
    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.08), -0.75px -0.75px 0px 0px rgba(5, 130, 220, 0.72);
}

.chat__message-not-me {
    background-color: #fff;
    float: left;
}

.chat__message-day {
    color: var(--Blacks-Battleship-Gray);
    margin-bottom: 16px;
    text-align: center;
    font-family: Inter;
    font-size: 14px;
    font-style: italic;
    font-weight: 400;
    line-height: 16px; /* 114.286% */
}

.chat__message-date {
    clear: both;
    margin-bottom: 16px;
    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 150% */
}

.chat__messages .chat__message-wrapper:last-child .chat__message-date {
    padding-bottom: 16px;
}

.chat__message-date-me {
    text-align: right;
}

.chat__message-date-not-me {
    float: left;
}

.chat__message-read {
    border-radius: 100px;
    background: rgba(176, 194, 199, 0.33);
    padding: 2px 6px;
    color: #396673;
    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    margin-left: 4px;
}
/* when reading a chat message */
.chat__message-attachment, .announcement__message-attachment {
    margin-bottom: 8px;
    position: relative;
    text-align: center;
}

.chat__message-attachment:hover, .announcement__message-attachment:hover {
    cursor: pointer;
}

    .chat__message-attachment > img, .announcement__message-attachment > img {
        border-radius: 16px;
        max-width: 270px;
        height: auto;
   }

    .chat__message-attachment::before, .announcement__message-attachment::before {
        content: '\f019';
        z-index: 1000;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate( -50%, -50% );
        padding: 4px 8px;
        color: var(--Content-Primary);
        font-family: 'FontAwesome';
        font-size: 18px !important;
        background-color: #EDEDED;
        border-radius: 8px;
        border: 1px solid var(--Content-Tertiary);
    }

.chat__attachment-view {
    width: 100%;
    height: auto;
}

.chat__attachment-view-pdf {
    width: 100%;
    height: 800px;
}

.chat__attachment-download {
    text-align: center;
}


.chat__new {
    margin-top: 16px;
    height: calc(100vh - 300px);
    text-align: center;
}


.chat__employees {
    border-bottom: 1px solid rgba(220, 220, 220, 1);
    display: flex;
    width: 100%;
}

.chat__employees-label {
    align-self: center;
    font-weight: 700;
    padding: 0 8px 0 0;
}

.chat__employees select {
    border: 0px;
    display: inline;
    width: 100%;
}

    .chat__employees select:focus {
        box-shadow: none;
    }

.chat__compose > div {
    border: 0;
    width: 100%;
}

    .chat__compose > div:focus-visible {
        outline: none;
    }

    .chat__compose > div:empty:before,
    .chat__compose > div > div:empty:before {
        content: attr(placeholder);
        pointer-events: none;
        display: block; /* For Firefox */
    }


.chat-reply {
    border-radius: 16px;
    background: var(--Content-Primary-Invert);
    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.08);
    display: inline-block;
    line-height: normal;
    margin-bottom: 8px;
    width: 310px;
}

.chat-reply__header {
    background: #F1F1F1;
    color: var(--Content-Primary);
    font-family: "DM Sans";
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5rem; 
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}

    .chat-reply__header > div:first-child {
        flex-grow: 1;
    }

    .chat-reply__header::before {
        content: url(../images/reply-header-icon.png);
        width: 22px;
        height: 22px;
    }

.chat-reply__delete {
    cursor: pointer;
}

.chat-reply__content {
    display: block;
    padding: 8px;
    text-decoration: none;
    cursor: default;
    pointer-events: none;
}

.chat-reply__subject {
    color: var(--Content-Primary);
    font-family: "DM Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 150% */
}

.chat-reply__from {
    color: var(--Content-Secondary);
    font-family: "DM Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 21px; /* 150% */
}

.chat-reply__message {
    align-self: stretch;
    color: var(--Blacks-Eerie-Black);
    font-family: Inter;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.313rem;
}


/********************************************
 * EMPLOYEE SETTINGS
 ********************************************/

/* Employee Detail Main (Icon, Name, Buttons) */
.employee-detail {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 0.5rem;
    align-self: stretch;
    width: 100%;
    padding: 0 1rem;
}

.employee-detail .employee-detail__icon-wrapper {
    display: flex;
    padding: 0.5rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    align-self: stretch;
    border-radius: 0.5rem;
    background-color: 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;
    flex: 0 1 0;
}

/* Employee Profile Pic */
.employee-detail .employee-detail__icon {
    display: flex;
    min-width: 2.625rem;
    min-height: 2.625rem;
    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%));
    font-family: Inter;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.3125rem; /* 116.667% */
    color: var(--Background-Secondary-Pressed);
} 

.employee-detail .employee-detail__content-wrapper {
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

/* Employee Name and Type, Options */

.employee-detail .employee-detail__content {
    display: flex;
    height: 5.5rem;
    padding: 1rem;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0.5rem;
    align-self: stretch;
    border-radius: 0.5rem;
    background-color: 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;
}

.employee-detail__content .employee-detail__name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.employee-detail__name > span {
    color: var(--Content-Primary, #252525);
    /* Heading XL/Strong */
    font-family: "DM Sans";
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.75rem; /* 140% */
}

/* User Type bubble */
.employee-detail__name > .employee-detail__type {
    display: flex;
    padding: 0rem 0.5rem;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    border-radius: 6.25rem;
    background-color: var(--Content-Understated-Inverted);
    color: var(--Content-Primary, #252525);
    /* Text/Regular */
    font-family: Inter;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.3125rem; /* 150% */
}

/* Options (Logout, Switch View, etc..) */
.employee-detail__content .employee-detail__actions {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.employee-detail__actions > a {
    display: flex;
    padding: 0.25rem 0.5rem;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.5rem;
    border: 1px solid var(--Content-Understated-Inverted, #DDD);
    background: var(--Background-Tertiary, #F9F9F9);
    text-decoration: none;
    text-align: center;
    color: var(--Content-Primary, #252525);
    transition: background .3s ease-out;
}

.employee-detail__actions > a > i {
    font-size: 1rem;
}

.employee-detail__actions > a > span {
    /* Heading S/Regular */
    font-family: "DM Sans";
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.3125rem; /* 150% */
}

.employee-detail__actions > a:hover {
    background: #e0e0e0;
}

.employee-detail__actions > a:focus {
    background: #c7c7c7;
}


/* Employee Detail Cards (Email, Phone, Language, Preferences, etc...) Container */
.employee-detail-cards {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    padding: 0 1rem;
}

.employee-detail-card {
    display: flex;
    padding: 0.5rem;
    align-items: center;
    gap: 0.5rem;
    align-self: stretch;
    border-radius: 0.5rem;
    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;
}

.employee-detail-card .employee-detail-card__icon {
     display: flex;
     width: 3rem;
     height: 3rem;
     padding: 0.25rem;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     border-radius: 0.375rem;
     background: var(--Content-Link-Pressed, #034E84);
}

    .employee-detail-card__icon > i {
        font-size: 1.75rem;
        color: var(--Content-Primary-Invert);
    }

.employee-detail-card .employee-detail-card__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    flex: 1 0 0;
}

.employee-detail-card__content .employee-detail-card__title {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
}

    .employee-detail-card__title > span {
        color: var(--Content-Primary, #252525);
        /* Heading M/Strong */
        font-family: "DM Sans";
        font-size: 1rem;
        font-style: normal;
        line-height: 1.5rem;
        font-weight: 700;
    }

.employee-detail-card__content > span {
    flex: 1 0 0;
    color: var(--Content-Primary, #252525);
    /* Heading M/Strong */
    font-family: "DM Sans";
    font-size: 1rem;
    font-style: normal;
    line-height: 1.5rem;
    font-weight: 400;
}

.employee-detail-card__content .employee-detail-card__text-input {
	flex-direction: column;
	gap: .25rem;
	display: flex;
}

    .employee-detail-card__text-input > textarea {
        color: #374151;
        resize: none;
        background: #fff;
        border: 1px solid #d1d5db;
        border-radius: .375rem;
        min-height: auto;
        padding: .5rem .75rem;
        font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
        font-size: .875rem;
        line-height: 1.4;
        transition: border-color .15s ease-in-out;
        overflow: hidden;
    }

    .employee-detail-card__text-input > textarea::placeholder {
        font-style: italic;
    }

.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% */
}

.empty-state {
	color: #9ca3af;
	font-style: italic;
}


/* Add to Home Screen */
.employee-homescreen-shortcut-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 1rem;
}

.employee-homescreen-shortcut {
    display: flex;
    padding: 0.5rem;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    align-self: stretch;
    border-radius: 0.5rem;
    background: var(--Content-Link-Pressed, #034E84);
    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;
    color: var(--Content-Primary-Invert, #FFF);
}

    .employee-homescreen-shortcut > i {
        font-size: 1.25rem;
    }

    .employee-homescreen-shortcut > span {
        text-align: center;
        /* Heading M/Strong */
        font-family: "DM Sans";
        font-size: 1rem;
        font-style: normal;
        font-weight: 700;
        line-height: 1.5rem; /* 150% */
    }


/* Edit Button */
.edit-button,
.save-button,
.cancel-button {
    display: flex;
    padding: 0.125rem 0.5rem;
    align-items: center;
    gap: 0.25rem;
    border-radius: 0.25rem;
    background-color: var(--Background-Secondary-Hover);
    text-decoration: none;
    color: var(--Content-Link-Pressed) !important;
    /* Text S/Regular */
    font-family: Inter;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.125rem; /* 150% */
    transition: background-color .3s ease-out;
}

    .save-button, .cancel-button {
        min-width: 3.3rem;
        justify-content: center;
    }

    .save-button {
	    background-color: rgb(var(--Content-Link));
	    color: var(--Content-Primary-Invert) !important;
        border: none;
    }

    .cancel-button {
	    border: 1px solid var(--Background-Secondary-Hover);
	    background-color: var(--Background-Secondary);
	    color: var(--Content-Link-Alt) !important;
    }

.employee-detail-card > a.edit-button {
    margin-right: .75rem; 
    color: var(--Content-Link-Pressed);
}

.edit-button:hover {
    background-color: #cad8e1;
}

.edit-button:focus, .employee-detail-card > a.edit-button:focus {
    background-color: #b4c0c8;
}



/* Select Dropdown Control */
.employee-detail-card__content > select {
    color: var(--Content-Primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align-last: left;
    padding: 0 .375rem !important;
}


/* Edit Phone/Email Modal Body */
.employee-form-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    flex: 1 0 0;
}

    .employee-form-group > label {
        align-self: flex-start;
        color: var(--Content-Primary, #252525);
        /* Heading M/Strong */
        font-family: "DM Sans";
        font-size: 1rem;
        font-style: normal;
        font-weight: 700;
        line-height: 1.5rem; /* 150% */
    }

    .employee-form-group > input.employee-form-input {
        display: flex;
        padding: 0.125rem 0.25rem;
        align-items: center;
        gap: 0.625rem;
        align-self: stretch;
        border-radius: 0.25rem;
        border: 0.5px solid var(--Content-Tertiary, #A2A2A2);
        color: var(--Content-Primary, #252525);
        /* Text/Regular */
        font-family: Inter;
        font-size: 0.875rem;
        font-style: normal;
        font-weight: 400;
        line-height: 1.3125rem; /* 150% */
    }


 /* Success Message */
 .modal-success-message {
    display: flex;
    padding: 0.5rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    width: 16rem;

    color: var(--Content-Positive-Bold, #103100);
    text-align: center;
    /* Heading L/Regular */
    font-family: "DM Sans";
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.6875rem; /* 150% */
 }


/* Pending Tag */
.pending-tag {
    display: flex;
    padding: 0rem 0.35rem;
    align-items: center;
    gap: 0.25rem;
    border-radius: 6.25rem;
    background: var(--Background-Notice, #FBE898);
    align-self: center;
}

    .pending-tag > i {
        font-size: .75rem;
    }

    .pending-tag > div {
        color: var(--Content-Notice, #6D5909);
        /* Text S/Regular */
        font-family: Inter;
        font-size: 0.75rem;
        font-style: normal;
        font-weight: 400;
        line-height: 1.125rem; /* 150% */
    }

    .pending-tag.small {
        height: fit-content;
        padding: 2px 6px;
    }


/* Error Tag */
.error-tag {
    display: flex;
    padding: 0rem 0.35rem;
    align-items: center;
    gap: 0.25rem;
    border-radius: 6.25rem;
    background: #FFE8D2;
    align-self: center;
}

    .error-tag > i {
        font-size: .75rem;
        /* color: #F37A0B; */
    }

    .error-tag > div {
        color: var(--Content-Notice, #6D5909);
        /* Text S/Regular */
        font-family: Inter;
        font-size: 0.75rem;
        font-style: normal;
        font-weight: 400;
        line-height: 1.125repm; /* 150% */
    }

    .error-tag.small {
        height: fit-content;
        padding: 2px 6px;
    }


/* Teams Container */
.employee-teams-container {
    display: flex;
    padding: 0 1rem;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

/* Manager Team Group */
.employee-my-team {
    display: flex;
    padding: 0.25rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.0625rem;
    width: 100%;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.08);
}

.employee-my-team .employee-my-team__header {
    display: flex;
    padding: 0.75rem;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    align-self: stretch;
}

.employee-my-team__header .employee-my-team__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 0 0;
}

    .employee-my-team__title > i {
        font-size: 1.25rem;
        color: var(--Content-Link-Pressed);
    }

    .employee-my-team__title > 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% */
    }

.employee-my-team__header > a.edit-button {
    padding: 0.125rem .6rem;
    margin-right: .3rem;
}

.employee-my-team .employee-my-team__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    border-radius: 0.75rem;
    border: 1px solid var(--Content-Understated-Inverted, #DDD);
    overflow: hidden;
    border-collapse: separate;
}




/****************************************
 * PEOPLE DIRECTORY - COMPONENTS
 ****************************************/

/* People Groups - Container for .people-group containers */
.people-groups {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    padding-bottom: 14px;
}

/* People Group Section Wrapper */
.people-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}

    /* People Group Section Header */
    .people-group .people-group__header {
        color: var(--Content-Primary-Onyx);
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 24px; /* 150% */
        margin-bottom: 0px;
    }

    /* People Group Content Card */
    .people-group .people-group__content-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.0625rem;
        border-radius: 1rem;
        border-collapse: separate;
        overflow: hidden;
        box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.08);
        align-self: stretch;
    }

    .people-group .people-group__content {
        display: flex;
        padding: 12px 16px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 8px;
        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;
        /* backdrop-filter: blur(8px); -- disabled due to causing laggy scroll */
    }

    .people-group .people-group__content--highlight {
        padding: 12px 16px;
        background: var(--Background-Secondary, #F2F9FD);
        box-shadow: 0px 4px 14px 0px var(--Background-Secondary, #F2F9FD), 0.75px 0.75px 0px 0px rgba(255, 255, 255, 0.80) inset;
    }


/* Person Element */
.people-group .person {
    display: flex;
    align-items: center;
    gap: 8px;
    align-self: stretch;
}

.people-group .person.person--chat-listing {
    padding: 8px;
}

    .people-group .person.selected, .person .person__item:hover {
        border-radius: 8px;
    }

    .people-group .person.unread .person__name::after {
        stroke-width: 1px;
        stroke: var(--Content-Primary-Invert);
        content: '';
        display: inline-block;
        width: 10px;
        height: 10px;
        -moz-border-radius: 7.5px;
        -webkit-border-radius: 7.5px;
        border-radius: 7.5px;
        background-color: #EA4040;
    }

/* Person Name w/ Icon & Notification Bubble */
.person .person__item {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 0 0;
    text-decoration: none;
    overflow: hidden;
}

.person .person__name {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--Content-Primary, #252525);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 21px; /* 150% */
    flex-grow: 1;
}

    .person .person__name > span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .person .person__item > div.error-tag,
    .person .person__item > div.pending-tag {
        white-space: nowrap;
        min-width: 0%;
        flex: 0 1 auto;
    }

        .person .person__item > div.error-tag > div,
        .person .person__item > div.pending-tag > div {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

/* Modifier to Person Name - Input */
.person input.person__name--input {
    justify-content: center;
    flex: 1 0 0;
    border-left: none;
    border-right: none;
    border-top: none;
    border-bottom: 0.5px solid var(--Content-Tertiary);

}

    .person input.person__name--input::placeholder {
        color: var(--Content-Secondary, #656565);
    }

    .person input.person__name--input:focus {
        outline: none;
    }


.person .person__icon, .initials-icon {
    display: flex;
    min-width: 26px;
    height: 26px;
    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-size: 12px;
}

.person .person__datetime {
    color: var(--Content-Secondary);
    /* Text S/Regular */
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 150% */
    white-space: nowrap;
    align-content:end;
}

/* Person Edit Button */
.person .person__button {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

    .person .person__button > a {
        display: flex;
        padding: 0.125rem 0.5rem;
        align-items: center;
        gap: 0.25rem;
        border-radius: 0.25rem;
        font-family: Inter;
        font-size: .75rem;
        font-style: normal;
        font-weight: 400;
        line-height: 1.125rem; /* 150% */
        text-decoration: none;
        transition: background-color .3s ease-out;
    }
    
    .person .person__button > a.person__edit {
        background-color: var(--Background-Secondary-Hover, #E1F0FB);
        color: var(--Content-Link-Pressed, #034E84);
    }

    .person .person__button > a.person__delete {
        background-color: var(--Background-Negetive, #FCE2E2);
        color: var(--Content-Negative, #640505);
    }

    .person .person__button > a > span {
        font-size: .75rem;
    }

    .person .person__button > a.person__edit:hover,
    .employee-detail-card .employee-detail-card__edit-button:hover {
        background-color: #cad8e1;
    }
    .person .person__button > a.person__edit:focus,
    .employee-detail-card .employee-detail-card__edit-button:focus {
        background-color: #b4c0c8;
    }
    .person .person__button > a.person__delete:hover {
        background-color: #e2cbcb;
    }
    .person .person__button > a.person__delete:focus {
        background-color: #c9b4b4;
    }


/* Person Add Link */
.person .person__add {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex: 1 0 0;
    padding-left: 4px;
}

    .person .person__add > a {
        flex: 1 0 0;
        color: var(--Content-Secondary, #656565);
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 21px; /* 150% */
        text-decoration: none;
    }


/* Success confirmation text box */
.success-message-wrapper {
    display: flex;
    padding: 1rem;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
    align-self: stretch;
}

.success-message {
    display: flex;
    padding: 0.5rem 3rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    align-self: stretch;
    border-radius: 0.5rem;
    color: var(--Content-Positive);
    background: var(--Background-Positive);
    text-align: center;
    /* Heading L/Regular */
    font-family: "DM Sans";
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.6875rem; /* 150% */
}


/**************************************************
 * DRAWER MODAL
 **************************************************/

/* Modifer to turn bottom modal into a drawer */
.modal.modal-bottom.fade .modal-dialog.modal-dialog--drawer {
    border-radius: 1rem 1rem 0rem 0rem;
    background: rgba(255, 255, 255, 0.90);
    overflow: hidden;
    max-height: calc(100% - 5rem);
    height: 100%;
}

.modal.modal-bottom.fade .modal-dialog.modal-dialog--drawer.modal-dialog--task {
    max-height: 400px;
}

/* Modifier to drawer modal to contain team listing */
.modal-dialog.modal-dialog--drawer .modal-content.modal-content--teams {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
    overflow: hidden !important;
}


/*********************************** 
 * TEAM SELECTION - MODAL CONTENT
 ***********************************/

/* Modal header wrapper */
.modal-content--teams .teams__header-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    border-bottom: 1px solid var(--Content-Understated-Inverted);
}

/* Indicator bar at the top of the modal */
.teams__header-wrapper .teams__drawer-indicator {
    display: flex;
    padding: 0.25rem 0.125rem 0rem 0.125rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    align-self: stretch;
}

    .teams__drawer-indicator > div {
        width: 3.75rem;
        height: 0.25rem;
        border-radius: 0.625rem;
        background: var(--Content-Understated-Inverted);
    }

/* Modal header section */
.teams__header-wrapper .teams__header {
    display: flex;
    padding: 0.75rem 1rem 1rem 1rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    align-self: stretch;
}

/* Modal header title */
.teams__header .teams__title {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    align-self: stretch;
    color: var(--Content-Primary, #252525);
}

    /* Modal header title text */
    .teams__title > div:first-child {
        flex: 1 0 0;
        /* Heading L/Regular */
        font-family: "DM Sans";
        font-size: 1.125rem;
        font-style: normal;
        font-weight: 400;
        line-height: 1.6875rem; /* 150% */
    }

    /* Modal header close button */
    .teams__title > div:nth-child(2) {
        flex: 0 1 0;
        font-size: 1.375rem;
    }

        .teams__title > div:nth-child(2) > a > i {
            color: var(--Content-Primary);
        }

/* Modifer for people groups to fill modal */
.people-groups.people-groups--modal {
    flex-grow: 1;
}

.people-groups.people-groups--modal .people-group__content-wrapper {
    border-radius: 0;
    box-shadow: none;
}


/****************************************
 * SMART WIZARD MODIFICATIONS
 ****************************************/

/* Footer toolbar section */
.sw-toolbar-elm {
    display: flex;
    padding: 0.5rem !important;
    justify-content: flex-end;
    align-items: center;
    gap: 0.125rem;
    align-self: stretch;
    border-top: 1px solid var(--Content-Understated-Inverted);
}

    /* Footer button styling */
    .sw-toolbar-elm > button,
    .sw-toolbar-elm > a {
        padding: 0.25rem 0.5rem !important;
        background-color: rgb(var(--Content-Link)) !important;
        color: var(--Content-Primary-Invert) !important;
        /* Heading S/Regular */
        font-family: "DM Sans";
        font-size: 0.875rem;
        font-style: normal;
        line-height: 1.3125rem; /* 150% */
    }

    .sw-toolbar-elm > .sw-btn-prev,
    .sw-toolbar-elm > .sw-btn-return {
        border: 1px solid var(--Background-Secondary-Hover) !important;
        background-color: var(--Background-Secondary) !important;
        color: var(--Content-Link-Alt) !important;
    }

    .sw-toolbar-elm >.disabled {
        border: 1px solid var(--Disabled-Button) !important;
        background-color: var(--Disabled-Button) !important;
    }

.delete-team-wrapper {
    display: flex;
    padding: 1rem;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
    align-self: stretch;
}

.delete-team {
    display: flex;
    padding: 0.5rem 3rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    align-self: stretch;
    border-radius: 0.5rem;
    background: var(--Background-Negetive, #FCE2E2);
    color: var(--Content-Negative-Bold, #400303);
    text-align: center;
    /* Heading L/Regular */
    font-family: "DM Sans";
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.6875rem; /* 150% */
}


/* Smart Wizard - remove placeholder, unsure what this does, but it adds a whitespace at the bottom */
.ui-effects-placeholder {
    height: 0 !important;
}


/*************************************************
 * LANGUAGE SELECTION
 *************************************************/
.offcanvas-language {
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    z-index: 1041 !important;
}


    .offcanvas-language .offcanvas-header {
        padding-bottom: .5em;
    }

        .offcanvas-language .offcanvas-header h5 {
            font-family: "DM Sans";
            font-size: 18px;
            font-style: normal;
            font-weight: 400;
            line-height: 27px; /* 150% */
        }

    .offcanvas-language .offcanvas-body {
        padding-top: 0;
        overflow: hidden;
        position: relative;
    }

@media (min-width:1000px) {
    .offcanvas-language {
        margin: 0 auto;
        max-width: 500px;
    }
}

.languages {
    border-top: 1px solid rgba(var(--Blacks-Silver), .5);
    overflow-y: scroll;
    height: 200px;
    top: 3.75rem;
    left: 0;
    position: absolute;
    width: 100%;
    padding-bottom: 6rem;
}

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

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

.languages__language {
    display: flex;
    padding: 8px 24px;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    font-family: "DM Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 27px; /* 150% */
    width: 100%;
    position: relative;
}

    .languages__language:hover {
        background: rgba(225, 240, 251, 0.25);
        cursor: pointer;
    }

    .languages__language.selected {
        background: rgba(225, 240, 251, 0.50);
    }

        .languages__language.selected:after {
            font-family: 'FontAwesome';
            font-size: 1.2em;
            color: #034E84;
            content: "\f00c";
            position: absolute;
            right: 10px;
        }

.languages__search {
    padding-bottom: 16px;
}

    .languages__search input {
        height: 47px;
        padding: 0px 16px;
        justify-content: center;
        align-items: center;
        gap: 8px;
        align-self: stretch;
        font-family: Inter;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 21px; /* 150% */
        width: 100%;
        border: 1px solid #cecece;
        box-shadow: none;
        outline: none;
    }

        .languages__search input:focus {
            border-color: #cecece;
            box-shadow: none;
            outline: none;
        }

.languages__no-matches {
    font-family: "DM Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    padding-top: 1rem;
    text-align: center;
}


/***************************************
 * CHECKBOX COMPONENT
 ***************************************/

.person__checkbox {
    display: flex;
    position: relative;
    padding-left: 34px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    height: 26px;
    flex: 1 0 100%;
}

    .person__checkbox .person__name {
        vertical-align: middle;
    }

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

/* Create a custom checkbox */
.person__checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 26px;
    width: 26px;
    background-color: #eee;
    border-radius: 50%;
}

    .person__checkmark:not(.person__icon) {
        height: 26px;
        width: 26px;
        background-color: #eee;
        border-radius: 50%;
    }

/* On mouse-over, add a grey background color */
.person__checkbox:hover input ~ .person__checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.person__checkbox input:checked ~ .person__checkmark {
    background: rgb(var(--Content-Link));
}

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

/* Show the checkmark when checked */
.person__checkbox input:checked ~ .person__checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.person__checkbox .person__checkmark:after {
    left: 10px;
    top: 5px;
    width: 6px;
    height: 14px;
    border: solid white;
    border-width: 0 1px 1px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* Hide the employee initials on checked */
.person__checkbox input:checked ~ .person__icon {
    font-size: 0;
}



/* Search Bar */
.search-bar {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    align-content: flex-start;
    gap: 16px;
    align-self: stretch;
    flex-wrap: wrap;
    flex-grow: 1;
}

    .search-bar > 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, 1);
        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 */
    }

        .search-bar > 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;
        }

        .search-bar > div > span {
            font-size: 1rem !important;
        }

        .search-bar > div > input {
            flex: 1 0 0;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 21px; /* 150% */
            background: transparent;
            border: none;

        }

            .search-bar > div > input:focus {
                outline: none;
            }

.spinner-overlay {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
    background: rgba(0,0,0,0.5);
    z-index: 1099;
}

.cv-spinner {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.cv-spinner-text {
    color: #fff;
    font-family: "DM Sans";
    font-size: 20px;
    font-weight: normal;
    margin-top: 1rem;
}

.spinner {
    width: 80px;
    height: 80px;
    border: .6em #ddd solid;
    border-top: .6em #fff solid;
    border-radius: 50%;
    animation: sp-anime 0.8s infinite linear;
}

@keyframes sp-anime {
    100% {
        transform: rotate(360deg);
    }
}


/********************************************
/* Pages Footer
/*******************************************/

.pages__footer-ee {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 16px;
    align-items: center;
    font-family: "DM Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 21px; /* 175% */
    position: relative;
    margin-left: unset !important;
    width: 100% !important;
}

    .pages__footer-ee a:hover {
        text-decoration: none;
    }

    .pages__footer-ee > div {
        align-self: center;
    }

    .pages__footer-ee img.logo {
        max-height: 150px;
        width: auto;
        max-width: 100%;
    }

    .pages__footer-ee img.logo-truhu {
        height: auto;
        width: 48px;
    }

    .pages__footer-ee .pages__footer-ee-truhu-logo-wrapper {
        display: flex;
        align-items: center;
        justify-content: end;
        margin-bottom: 1rem;
    }

    .pages__footer-ee .pages__footer-ee-truhu-links {
        display: flex;
        flex-wrap: wrap;
        gap: .25rem;
        align-content: center;
        justify-content: center;
        padding: 0 1rem;
    }


/* Employee Section Wrapper */

.employee-section-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 1rem;
}

    .employee-section-wrapper > div {
        max-width: var(--max-width);
        width: 100vw;
    }

    .employee-section-wrapper--preview > div {
        max-width: 100% !important;
    }



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

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

@media (max-width: 768px) {
    .pages__footer-ee {
        flex-direction: column;
        justify-content: center;
        max-width: 100vw !important;
    }

        .pages__footer-ee img.logo {
            margin-bottom: 1rem;
        }

        .pages__footer-ee .pages__footer-ee-truhu-logo-wrapper {
            justify-content: center;
        }
}

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

}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    /* Change style of team selection modal for desktop */
    .modal.modal-bottom.fade {
        margin-left: calc(var(--desktop-nav-width) / 3);
    }

    .modal-dialog.modal-dialog--desktop {
        max-width: 50rem !important;
        max-height: 33rem;
        bottom: 25% !important;
        border-radius: 1rem !important;
        left: 0;
        right: 0;
        top: 0 !important;
        bottom: 0 !important;
        position: absolute !important;
    }

    .modal-dialog--desktop .teams__drawer-indicator {
        display: none;
    }

    .chat {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        position: relative;
        border-radius: 16px;
    }

    .chat__compose-wrapper {
        position: relative;
        margin-top: auto;
        min-height: 130px;
        height: auto;
        width: 100%;
        left: 0;
        bottom: 0;
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;
    }

    .chat__messages-wrapper {
        height: calc(100vh - 320px);
        padding-bottom: 0;
    }

    .chat__messages {
        margin-top: 0;
    }

    .chat__message-attachment > img, .announcement__message-attachment > img {
        border-radius: 16px;
        width: auto;
        max-height: 200px;
    }

    .chat__compose-wrapper-inner {
        border-radius: 16px;
    }

    .chat__header-wrapper, .announcement__header-wrapper {

        position: relative;

    }

}

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

}