@import url("Theme.TCL_NewUX_Theme.css?5899");

/* ----------- Display -----------*/

.display-flex {display:flex;}
.display-block {display: block;}

.justify-content-center {justify-content: center;}
.justify-content-right{justify-content: end;}
.justify-content-space-between {justify-content: space-between;}
.justify-content-space-evenly {justify-content: space-around;}
.justify-content-space-evenly {justify-content: space-evenly;}

.align-items-center {align-items: center;}

.align-right { float: right;}

.position-relative { position: relative;}
.position-absolute { position: absolute;}
.position-sticky { position: sticky;}

.whitespace-nowrap { white-space: nowrap;}

.full-height {height: 100%;}
.full-width { width: 100%;}

.news-and-updates-card-title{
    margin-bottom: 5px;
}

.width-33-pct {
    width: calc(100% / 3);
}

.max-1-line {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
}

.max-2-lines {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.max-3-lines {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
}

.max-4-lines {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
}

/* ----------- Padding -----------*/

.padding-none { padding: 0; }
.padding-xs { padding: 4px; }
.padding-s { padding: 8px; }
.padding-base {  padding: 16px; }
.padding-m { padding: 24px; }
.padding-l { padding: 32px; }
.padding-xl { padding: 40px; }
.padding-xxl { padding: 48px; }

.padding-top-none { padding-top: 0; }
.padding-top-xs { padding-top: 4px; }
.padding-top-s { padding-top: 8px; }
.padding-top-base { padding-top: 16px; }
.padding-top-m { padding-top: 24px; }
.padding-top-l { padding-top: 32px; }
.padding-top-xl { padding-top: 40px; }
.padding-top-xxl { padding-top: 48px; }

.padding-right-none { padding-right: 0; }
.padding-right-xs { padding-right: 4px; }
.padding-right-s { padding-right: 8px; }
.padding-right-base { padding-right: 16px; }
.padding-right-m { padding-right: 24px; }
.padding-right-l { padding-right: 32px; }
.padding-right-xl { padding-right: 40px; }
.padding-right-xxl { padding-right: 48px; }

.padding-bottom-none { padding-bottom: 0; }
.padding-bottom-xs { padding-bottom: 4px; }
.padding-bottom-s { padding-bottom: 8px; }
.padding-bottom-base { padding-bottom: 16px; }
.padding-bottom-m { padding-bottom: 24px; }
.padding-bottom-l { padding-bottom: 32px; }
.padding-bottom-xl { padding-bottom: 40px; }
.padding-bottom-xxl { padding-bottom: 48px; }

.padding-left-none { padding-left: 0; }
.padding-left-xs { padding-left: 4px; }
.padding-left-s { padding-left: 8px; }
.padding-left-base { padding-left: 16px; }
.padding-left-m { padding-left: 24px; }
.padding-left-l { padding-left: 32px; }
.padding-left-xl { padding-left: 40px; }
.padding-left-xxl { padding-left: 48px; }

.padding-y-none {padding-top: 0; padding-bottom: 0;}
.padding-y-xs { padding-top: 4px; padding-bottom: 4px;}
.padding-y-s { padding-top: 8px; padding-bottom: 8px;}
.padding-y-base { padding-top: 16px; padding-bottom: 16px;}
.padding-y-m { padding-top: 24px; padding-bottom: 24px;}
.padding-y-l { padding-top: 32px; padding-bottom: 32px;}
.padding-y-xl { padding-top: 40px; padding-bottom: 40px;}
.padding-y-xxl { padding-top: 48px; padding-bottom: 48px;}

.padding-x-none { padding-left: 0; padding-right: 0;}
.padding-x-xs { padding-left: 4px; padding-right: 4px;}
.padding-x-s { padding-left: 8px; padding-right: 8px;}
.padding-x-base { padding-left: 16px; padding-right: 16px;}
.padding-x-m { padding-left: 24px; padding-right: 24px;}
.padding-x-l { padding-left: 32px; padding-right: 32px;}
.padding-x-xl { padding-left: 40px; padding-right: 40px;}
.padding-x-xxl { padding-left: 48px; padding-right: 48px;}


/* ----------- Margin -----------*/

.margin-none { margin: 0; }
.margin-xs { margin: 4px; }
.margin-s { margin: 8px; }
.margin-base { margin: 16px; }
.margin-m { margin: 24px; }
.margin-l { margin: 32px; }
.margin-xl { margin: 40px; }
.margin-xxl { margin: 48px; }

.margin-top-none { margin-top: 0; }
.margin-top-xs { margin-top: 4px; }
.margin-top-s { margin-top: 8px; }
.margin-top-base { margin-top: 16px; }
.margin-top-m { margin-top: 24px; }
.margin-top-l { margin-top: 32px; }
.margin-top-xl { margin-top: 40px; }
.margin-top-xxl { margin-top: 48px; }

.margin-right-none { margin-right: 0; }
.margin-right-xs { margin-right: 4px; }
.margin-right-s { margin-right: 8px; }
.margin-right-base { margin-right: 16px; }
.margin-right-m { margin-right: 24px; }
.margin-right-l { margin-right: 32px; }
.margin-right-xl { margin-right: 40px; }
.margin-right-xxl { margin-right: 48px; }

.margin-bottom-none { margin-bottom: 0; }
.margin-bottom-xs { margin-bottom: 4px; }
.margin-bottom-s { margin-bottom: 8px; }
.margin-bottom-base { margin-bottom: 16px; }
.margin-bottom-m { margin-bottom: 24px; }
.margin-bottom-l { margin-bottom: 32px; }
.margin-bottom-xl { margin-bottom: 40px; } 
.margin-bottom-xxl { margin-bottom: 48px; }

.margin-left-none { margin-left: 0; }
.margin-left-xs { margin-left: 4px; }
.margin-left-s { margin-left: 8px; }
.margin-left-base { margin-left: 16px; }
.margin-left-m { margin-left: 24px; }
.margin-left-l { margin-left: 32px; }
.margin-left-xl { margin-left: 40px; }
.margin-left-xxl { margin-left: 48px; }

.margin-y-none { margin-top: 0; margin-bottom: 0;}
.margin-y-xs { margin-top: 4px; margin-bottom: 4px;}
.margin-y-s { margin-top: 8px; margin-bottom: 8px;}
.margin-y-base { margin-top: 16px; margin-bottom: 16px;}
.margin-y-m { margin-top: 24px; margin-bottom: 24px;}
.margin-y-l { margin-top: 32px; margin-bottom: 32px;}
.margin-y-xl { margin-top: 40px; margin-bottom: 40px;}
.margin-y-xxl { margin-top: 48px; margin-bottom: 48px;}

.margin-x-none { margin-left: 0; margin-right: 0;}
.margin-x-xs { margin-left: 4px; margin-right: 4px;}
.margin-x-s { margin-left: 8px; margin-right: 8px;}
.margin-x-base { margin-left: 16px; margin-right: 16px;}
.margin-x-m { margin-left: 24px; margin-right: 24px;}
.margin-x-l { margin-left: 32px; margin-right: 32px;}
.margin-x-xl { margin-left: 40px; margin-right: 40px;}
.margin-x-xxl { margin-left: 48px; margin-right: 48px;}

.margin-top-56px {margin-top: 10px;}

/* ----------- Background colors -----------*/

.background-tcl-red {
    background: #E03E52;
}

.background-tcl-dark-red {
    background: #C8102E;
}

.background-tcl-blue {
    background: #3F44AA;
}

.background-tcl-white {
    background: #D6D2C4;
}

.background-tcl-black {
    background: #000000;
}

.background-tcl-light-grey {
    background: #C5B9AC;
}

.MainContent_CatalystUX {
    background: #D6D2C4;

    
}

/* ----------- Opacity -----------*/

.opacity-10 {opacity: 10%;}
.opacity-20 {opacity: 20%;}
.opacity-30 {opacity: 30%;}
.opacity-40 {opacity: 40%;}
.opacity-50 {opacity: 50%;}
.opacity-60 {opacity: 60%;}
.opacity-70 {opacity: 70%;}
.opacity-80 {opacity: 80%;}
.opacity-90 {opacity: 90%;}


/* ----------- Text colors -----------*/

.text-tcl-red {
    color: #E03E52;
}

.text-tcl-dark-red {
    color: #C8102E;
}

.text-tcl-white {
    color: #FFFFFF;
}

.text-tcl-black {
    color: #000000;
}


/* ----------- Fonts -----------*/

@font-face {    
    font-family: 'Spectral';
    src: url('/TCL_Theme/Spectral-Regular.ttf') format('truetype');
    font-weight: 400;
    unicode-range: U+0000-FFFF;
}

@font-face {    
    font-family: 'Spectral';
    src: url('/TCL_Theme/Spectral-Medium.ttf') format('truetype');
    font-weight: 500;
    unicode-range: U+0000-FFFF;
}

@font-face {    
    font-family: 'Spectral';
    src: url('/TCL_Theme/Spectral-SemiBold.ttf') format('truetype');
    font-weight: 600;
    unicode-range: U+0000-FFFF;
}

@font-face {    
    font-family: 'Spectral';
    src: url('/TCL_Theme/Spectral-Bold.ttf') format('truetype');
    font-weight: 700;
    unicode-range: U+0000-FFFF;
}

@font-face {    
    font-family: 'Spectral';
    src: url('/TCL_Theme/Spectral-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    unicode-range: U+0000-FFFF;
}

@font-face {    
    font-family: 'Spectral';
    src: url('/TCL_Theme/Spectral-ExtraBold.ttf') format('truetype');
    font-weight: 900;
    unicode-range: U+0000-FFFF;
}

:not(.fa) {
    font-family: 'Spectral' !important;
}

.font-Spectral {
    font-family: 'Spectral';
}

.font-tcl-thin {
    font-weight: 400;
}

.font-tcl-regular {
    font-weight: 500;
}

.font-tcl-semi-bold {
    font-weight: 600;
}

.font-tcl-bold {
    font-weight: 700;
}

a:hover {
    text-decoration: none;
}


/* ----------- Font sizes -----------*/

.font-size-10 {font-size: 10px;}
.font-size-12 {font-size: 12px;}
.font-size-14 {font-size: 14px;}
.font-size-16 {font-size: 16px;}
.font-size-18 {font-size: 18px;}
.font-size-20 {font-size: 20px;}
.font-size-22 {font-size: 22px;}
.font-size-24 {font-size: 24px;}
.font-size-26 {font-size: 26px;}
.font-size-28 {font-size: 28px;}
.font-size-30 {font-size: 30px;}


/* ----------- Line heights -----------*/

.line-height-16 {line-height: 16px;}
.line-height-18 {line-height: 18px;}
.line-height-20 {line-height: 20px;}
.line-height-22 {line-height: 22px;}
.line-height-24 {line-height: 24px;}
.line-height-26 {line-height: 26px;}
.line-height-28 {line-height: 28px;}
.line-height-30 {line-height: 30px;}
.line-height-32 {line-height: 32px;}
.line-height-34 {line-height: 34px;}
.line-height-36 {line-height: 36px;}


/* ----------- Layouts -----------*/

.tcl-dashboard-layout-header {
    width: 100vw;
    max-width: 100%;
    height: 100px;
}

.phone .tcl-dashboard-layout-header {
    height: 80px;
}

.tcl-dashboard-layout-content {
    width: 100vw;
    max-width: 100%;
    background: #D6D2C4;
    min-height: calc(100vh - 200px);
}

.tcl-dashboard-layout-footer {
    width: 100vw;
    max-width: 100%;
    height: 100px;
}

.tcl-default-content-container {
    width: 100vw;
    max-width: 100%;
    display: flex;
    justify-content: center;
}

.tcl-default-content-placeholder {
    width: 1060px;
}

.tcl-default-content-CatalystUX-placeholder {
    width: 1160px;
}

.phone .tcl-default-content-placeholder {
    width: 100vw;
    min-width: 100vw;
    max-width: 100vw;
    overflow-x: hidden;
    padding: 0px 16px;
}


/* ----------- Common widgets -----------*/

.btn-tcl {
    padding: 8px 24px;
    font-family: "Spectral";
    font-weight: 600;
    font-size: 14px;
    width: 160px;
    height: 44px;
    border-radius: 22px;
    cursor: pointer;
}

.btn-tcl-small {
    width: fit-content !important;
    height: 32px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 24px !important;
}

.btn-tcl:hover {
    background: #000000;
    color: #D6D2C4;
    border: none;
    transform: all ease-in-out 0.3s;
}

.btn-tcl-red {
    background: #C8102E;
    color: #D6D2C4;
    border: none;
}

.btn-tcl-white {
    background: #D6D2C4;
    color: #C8102E;
    border: #C8102E solid 2px;
}

.Button.ButtonDefault, .Button.Is_Default  {
    box-shadow: none;
}

/* ----------- Header -----------*/

.tcl-new-header {
    width: 100%;
    height: 100px;
    background: #E03E52;
    padding: 0px 80px;
    position: fixed;
    top: 0px;
    z-index: 8000;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.phone .tcl-new-header {
    height: 80px;
    padding: 0px 16px;
}

.notifications-number-bubble {
    background: #D6D2C4;
    color: #C8102E;
    font-size: 10px;
    font-weight: 800;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    position: absolute;
    top: -6px;
    right: -6px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.notifications-number-bubble.notifications-99-plus-bubble {
    width: 24px;
    height: 24px;
    top: -12px;
    right: -16px;
}

.phone .notifications-number-bubble {
    right: -10px;
}

.phone .notifications-number-bubble.notifications-99-plus-bubble {
    right: -16px;
}

.tcl-new-header-logo {
    width: 214px;
    height: 50px;
}

.phone .tcl-new-header-logo {
    width: 129px;
    height: 30px;
}

.tcl-new-header-logo-bo {
    width: 214px;
    height: 35px;
}

.phone .tcl-new-header-logo-bo {
    width: 129px;
    height: 21px;
}

.tcl-new-header-notifications-icon {
    width: 36px;
    height: 36px;
}

.phone .tcl-new-header-notifications-icon {
    width: 30px;
    height: 30px;
}

.phone .card-settings-main-container {
    width: calc(90vw - 32px);
}

.top-section-mini-card {
    height: 100px;
    width: 140px;
    color: #C8102E;
    font-weight: 600;
    text-align: center;
    border-radius: 24px;
    padding: 16px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
    margin: 0 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

.top-section-mini-card:hover {
    scale: 1.1;
    transition: ease-in-out all 0.3s;
}

.phone .top-section-mini-card, .phone .bottom-section-mini-card {
    height: 50px;
    width: 100%;
    border-radius: 12px;
    margin: 8px 0;
    flex-direction: row;
    align-items: center;
}

.mini-card-list {
    display: flex;
}

.phone .mini-card-list {
    display: block;
}

.top-card-locked {
    border: solid 2px #C8102E;
}

.bottom-section-mini-card {
    height: 100px;
    width: 140px;
    color: #D6D2C4;
    font-weight: 600;
    text-align: center;
    border-radius: 24px;
    padding: 16px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
    background: rgb(49, 49, 49);
    margin: 0 8px 0 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

.bottom-section-mini-card:hover {
    scale: 1.1;
    transition: ease-in-out all 0.3s;
}

.bottom-card-locked {
    background: rgb(100, 100, 100) !important;
}

.phone .clickable-arrow {
    transform: rotate(90deg);
}

.clickable-arrow:hover {
    filter: brightness(0.5);
    cursor: pointer;
    transition: ease-in-out all 0.3s;
}

.invert-arrow {
    transform: rotate(180deg);
}

.phone .card-settings-main-container .invert-arrow {
    transform: rotate(270deg);
}

.header-item-container {
    background: #000000;
    width: fit-content;
    height: 100px;
    display: flex;
    align-items: center;
}

.phone .header-item-container {
    height: 80px;
}

.header-item-list-container {
    z-index: 9000;
    width: fit-content;
    background: #D6D2C4;
    position: absolute;
    right: 0px;
    top: 100px;
    border-radius: 0px 0px 24px 24px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
}

.phone .header-item-list-container {
    position: fixed;
    width: 100vw;
    top: 80px;
}

/* ----------- Footer -----------*/

.tcl-new-footer {
    width: 100%;
    height: 100px;
    background: #000000;
    padding: 0px 80px;
    position: relative;
    z-index: 8000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.phone .tcl-new-footer {
    padding: 0px 16px;
    justify-content: flex-start;
}

.tcl-new-footer-text {
    font-size: 16px;
    line-height: 22px;
    color: #FFFFFF;
    font-weight: 400;
}

.phone .tcl-new-footer-text {
    font-size: 16px;
    line-height: 22px;
}

/* ----------- Menu -----------*/

.new-ux-menu-icon {
    height: 22px;
}

.phone .new-ux-menu-icon {
    height: 18px;
}

.menu-item {
    background: #D6D2C4;
    color: #000000;
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: #D6D2C4;
}

.menu-item:hover{
    background: #E03E52;
    color: #D6D2C4;
    transition: all 0.15s ease-in-out;
    cursor: pointer;
}

.menu-item:hover > .menu-icon{
    color: #D6D2C4;
    transition: all 0.15s ease-in-out;
    cursor: pointer;
}

.menu-last-item {
    border-radius: 0px 0px 24px 24px;
}

.menu-dark-background {
    z-index: 7000;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0, 0.4);
    cursor: default !important;
}

.menu-user-photo {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 22px;
}


/* ----------- PopUp -----------*/

.popup-dark-background {
    z-index: 8500;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.4);
    cursor: default !important;
}

.popup-main-container {
    position: relative;
    z-index: 9000;
    width: fit-content;
    height: fit-content;
    max-width: 70vw;
    max-height: 70vh;
    background: #D6D2C4;
    border-radius: 24px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
    padding: 24px;
    overflow-y: auto;
}

.phone .popup-main-container {
    max-width: 90vw;
    max-height: 90vh;
    padding: 16px;
}

.tcl-close-popup-icon {
    color: #C8102E;
    position:absolute;
    top: 6px;
    right: 10px;
    z-index: 9000;
}

.popup-main-container::-webkit-scrollbar {
    display: none;
}

.popup-outer-container {
    z-index: 8000;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.new-ux-popup-content {
    width: 400px;
}

.shift-feedback-popup-content {
    width: fit-content;
}

.phone .new-ux-popup-content, .phone .shift-feedback-popup-content {
    width: 100%;
}

/* ----------- Cards -----------*/

.top-section-carousel-card {
    height: 340px;
    width: 340px;
}

.phone .top-section-carousel-card {
    height: 150px;
    width: 270px;
}

.phone .top-section-carousel-card.top-section-carousel-card-tall {
    height: 185px;
}

.tcl-light-card {
    padding: 16px 32px 16px 32px;
    background: rgba(214, 210, 196,0.8);
    position: relative;
    border-radius: 24px;
    height: 100%;
    width: 100%;
}

.phone .tcl-light-card {
    padding: 24px;
    border-radius: 16px;
}

.tcl-light-card-title {
    font-family: "Spectral";
    color: #C8102E;
    font-size: 26px;
    line-height: 32px;
    font-weight: 700;
    white-space: nowrap;
}

.phone .tcl-light-card-title {
    font-size: 20px;
    line-height: 24px;
}

.top-section-card-content {    
    height: -webkit-fill-available;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.phone .top-section-card-content {
    margin-top: 8px;
    height: -webkit-fill-available;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tcl-dark-card {
    border-radius: 24px;
    height: 100%;
    width: 100%;
    position: relative;
    z-index: 1500;
}

.phone .tcl-dark-card {
    border-radius: 16px;
}

.card-width-l {
    width: 520px;
}

.card-width-s {
    width: 340px;
}

.phone .card-width-l, .phone .card-width-s {
    width: 100%;
}


.dark-card-top-section {
    display: flex;
    justify-content: center;
    height: 60px;
    padding: 10px 32px;
    cursor: pointer;
}

.dark-card-bottom-section {
    height: 150px;
    padding: 32px 32px 40px 32px;
    background: rgba(214, 210, 196, 0.2);
    position: relative;
    z-index: 2000;
    border-radius: 0px 0px 24px 24px;
}

.bottom-section-card-content {
    height: -webkit-fill-available;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000000;
    font-family: "Spectral";
}

.dark-card-background {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: black;
    border-radius: 24px;
}

.dark-card-background-photo {
    height: 200px;
    width: 100%;
    object-fit: cover;
    border-radius: 24px;
    filter: brightness(0.3);
}

.action-items-number-bubble {
    background: #000000;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-left: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-items-number-bubble.action-items-99-plus {
    width: 36px;
    height: 36px;
}

.phone .action-items-number-bubble {
    width: 20px;
    height: 20px;
    margin-left: 8px;
}

.phone .action-items-number-bubble.action-items-99-plus {
    width: 28px;
    height: 28px;

}

.action-items-number {
    color: #FFFFFF;
    font-size: 16px;
    line-height: 16px;
}

.phone .action-items-number {
    font-size: 12px;
}

.action-item-main-container{
    width: 100%;
    padding-top: 5px;
    padding-bottom: 5px;
    height: 85px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.action-item-border-bottom-black{
    border-bottom: solid 0.25px #000000;
}

.tcl-link-container {
    width: 70px;
    text-align: center;
}

.tcl-link-margin-right {
    margin-right: 24px;
}

.phone .tcl-link-margin-right {
    margin-right: 16px;
}

.tcl-link-name-container {
    margin-top: 16px;
}

.phone .tcl-link-name-container {
    margin-top: 8px;
}

.tcl-link-icon {
    width: 55px;
    height: 55px;
}

.phone .tcl-link-icon {
    width: 30px;
    height: 30px;
}

.tcl-link-name {
    font-family: "Spectral";
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: #000000;
}

.phone .tcl-link-name {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.schedule-card-content {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.tcl-shiftadmin-logo {
    width: 115px;
    height: 25px;
}

.phone .tcl-shiftadmin-logo {
    width: 90px;
    height: 20px;
}

.shift-feedback-btn {
    min-height: 44px;
    height: 44px;
    width: 100%;
    background: #C8102E;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 32px;
}

.news-and-updates-card {
    width: 700px;
    height: 100%;
}

.phone .news-and-updates-card {
    width: 270px;
    height: 150px;
}

.news-and-updates-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /*height: -webkit-fill-available;*/
}

.news-short {
    height: 240px;
}
.news-medium {
    height: 340px;
}

.news-tall {
    height: 420px;
}

.news-item-icon {
    object-fit: cover;
}

.education-card {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 3000;
}

.education-single-width {
    width: 340px;
}

.education-double-width {
    width: 700px;
}

.education-title {
    font-family: "Spectral";
    font-weight: 700;
    font-size: 24px;
    line-height: 30px;
    color: #000000;
}

.phone .education-title {
    font-size: 22px;
    line-height: 26px;
}

.education-description {
    font-family: "Spectral";
    font-weight: 600;
    font-size: 16px;
    line-height: 26px;
    color: #000000;
}

.phone .education-description {
    font-size: 14px;
    line-height: 20px;
}

.education-view-more-btn {
    background: #E03E52;
    width: 150px;
    height: 44px;
    margin-top: 24px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 18px;
    font-family: "Spectral";
    font-weight: 600;
}

.phone .education-view-more-btn {
    font-size: 16px;
}

.sharing-community-CatalystUX-card {
    width: 520px;
    height: 580px;
    background: #D6D2C4;
    padding: 25px 40px 0px 15px;
}

.phone .sharing-community-card {
    width: 100%;
    background: #D6D2C4;
    background-size: cover;
    border-radius: 16px;
    padding: 32px;
}

.sharing-community-item-icon {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
}

.sharing-community-info-popup-left {
    width: 150px;
    min-width: 150px;
}

.sharing-community-info-popup-right {
    max-width: 450px;
}

.directory-card-CatalystUX-container {
    width: 520px;
    height: 280px;
    background: #D6D2C4;
    padding: 10px;
}

.phone .directory-card-container {
    width: 100%;
    height: 340px;
    background: #D6D2C4;
    background-size: cover;
    border-radius: 16px;
    padding: 32px;
}

.directory-newcomers-list-container {
    margin-top: 10px;
}

.phone .directory-newcomers-list-container {
    margin-top: 16px;
}

.directory-user-container {
    text-align: center;
    padding: 0px 4px;
}

.directory-user-photo {
    width: 48px;
    height: 48px;
    border-radius: 24px;
}

.wellness-card-CatalystUX-container {
    width: 520px;
    height: 280px;
    padding: 20px;
    position: relative;
}

.phone .wellness-card-container {
    width: 100%;
    border-radius: 16px;
    padding: 32px;
}

.wellness-card-background {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    filter: brightness(65%);
    border-radius: 24px;
    background: url("/TCL_Collaboration/img/wellness_background.png?5872");
}

.phone .wellness-card-background {
    border-radius: 16px;
}

.wellness-card-top-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1000;
    margin-top: 25px;
}

.wellness-card-description-container {
    width: 80%;
    position: relative;
    z-index: 1000;
    margin-top: 10px;
}
.wellness-card-description-container-mobile {
    width: 100%;
    position: relative;
    z-index: 1000;
    margin-top: 10px;
}

.entry-forms-icon {
    width: 53px;
    height: 53px;
    filter: brightness(300);
}


/* ----------- Page Sections -----------*/

.homepage-background-image {
    width: 100vw;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0px 0px 250px 0px;
    filter: brightness(40%);
    position: absolute;
    top: 0px;
    left: 0px;
}

.phone .homepage-background-image {
    border-radius: 0px 0px 180px 0px;
}

.top-section-size {
    width: 100%;
    height: fit-content;
    padding-bottom: 20px;
}

.phone .top-section-size {
    padding-bottom: 40px;
}


/* ----------- Carousels -----------*/

.top-carousel-arrows .owl-carousel .owl-controls .owl-buttons .owl-prev {
    font-size: 80px;
    color: #D6D2C4;
    background: transparent;
    left: -80px;
}

.phone .top-carousel-arrows .owl-carousel .owl-controls .owl-buttons .owl-prev {
    font-size: 32px;
    left: -64px;
    top: 24px;
}

.phone .top-carousel-arrows .schedule-card-content .owl-carousel .owl-controls .owl-buttons .owl-prev {
    top: 45px;
}

.phone .top-carousel-arrows .news-and-updates-card .owl-carousel .owl-controls .owl-buttons .owl-prev {
    top: 32px;
}

.top-carousel-arrows .owl-carousel .owl-controls .owl-buttons .owl-next {
    font-size: 80px;
    color: #D6D2C4;
    background: transparent;
    right: -80px;
}

.phone .top-carousel-arrows .owl-carousel .owl-controls .owl-buttons .owl-next {
    font-size: 32px;
    right: -64px;
    top: 24px;
}

.phone .top-carousel-arrows .schedule-card-content .owl-carousel .owl-controls .owl-buttons .owl-next {
    top: 45px;
}

.phone .top-carousel-arrows .news-and-updates-card .owl-carousel .owl-controls .owl-buttons .owl-next {
    top: 32px;
}

.bottom-carousel-arrows .owl-carousel .owl-controls .owl-buttons .owl-prev {
    font-size: 80px;
    color: #000000;
    background: transparent;
    left: -80px;
}

.bottom-carousel-arrows .owl-carousel .owl-controls .owl-buttons .owl-next {
    font-size: 80px;
    color: #000000;
    background: transparent;
    right: -80px;
}

.top-carousel-arrows .owl-carousel .owl-item {
    width: 360px !important;
}

.phone .top-carousel-arrows .owl-carousel .owl-item {
    width: 222px !important;
    margin-right: 54px !important;
}

.bottom-carousel-arrows .owl-carousel .owl-item {
    width: 360px !important;
}

.news-carousel .owl-theme .owl-controls {
    translate: 0px -15px;
}

.phone .news-carousel .owl-theme .owl-controls {
    translate: none;
}

.news-carousel .owl-carousel .owl-item {
    width: 636px !important;
}

.phone .news-carousel .owl-carousel .owl-item {
    margin-right: 415px !important;
}


/* ----------- Search -----------*/

input {
    font-family: "Spectral";
}

.header-search-bar {
    width: 210px ;
    height: 44px;
    padding: 0 16px 0 16px;
    border-radius: 22px;
    border: 1px solid #FFFFFF;
    background: #000000;
    display: flex;
    align-items: center;
    color: #FFFFFF;
    font-family: "Spectral";
    font-size: 14px;
    font-weight: 400;
}

.header-search-input {
    width: 100%;
    background: transparent !important;
    border: none !important;
    color: #FFFFFF !important;
}

.phone .header-search-input {
    color: #000000 !important;
}

.header-search-bar input[type="text"]::-webkit-input-placeholder {
    color: #FFFFFF;
    font-family: "Spectral";
}

.header-search-bar input[type="text"]::-moz-placeholder {
    color: #FFFFFF;
    font-family: "Spectral";
}

.header-search-bar input[type="text"]:-ms-input-placeholder {
    color: #FFFFFF;
    font-family: "Spectral";
}

.header-search-bar input[type="text"]:-moz-placeholder {
    color: #FFFFFF;
    font-family: "Spectral";
}

.phone .header-search-input input[type="text"]::-webkit-input-placeholder {
    color: #000000 !important;
    padding: 0 !important;
}

.phone .header-search-input input[type="text"]::-moz-placeholder {
    color: #000000 !important;
    padding: 0 !important;
}

.phone .header-search-input input[type="text"]:-ms-input-placeholder {
    color: #000000 !important;
    padding: 0 !important;
}

.phone .header-search-input input[type="text"]:-moz-placeholder {
    color: #000000 !important;
    padding: 0 !important;
}

.header-search-bar-results {
    width: 320px;
    margin-top: 0px;
}

.phone .header-search-bar-results {
    width: 100vw;
    margin-top: 0px;
}

.directory-search-bar {
    height: 44px;
    width: 300px;
    border-radius: 22px;
    border: solid #000000 1px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    background: white;
}

.phone .directory-search-bar {
    width: 100%;
}

.directory-search-input {
    width: 100%;
    background: transparent !important;
    border: none !important;
    color: black !important;
}

.directory-search-results {
    position: absolute;
    top: 52px;
    left: 0px;
    background: #D6D2C4;
    border-radius: 24px;
    width: 440px;
    padding: 16px;
    z-index: 7000;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
}

.phone .directory-search-results {
    width: 100%;
}

.clickable-close-directory-results {
    background:transparent;
    position:absolute;
    top: 0px;
    left: 0px;
    height:1px;
    width: 1px;
    cursor: default !important;
}


/* ----------- Date picker / Calendar -----------*/

div.calendar, div.calendar table {
    z-index: 9000;
}

div.calendar tbody .rowhilite td.selected,
div.calendar tbody .rowhilite th.selected {
    background: #C8102E;
    color: #D6D2C4;
}

div.calendar tbody td.hilite,
div.calendar tbody th.hilite {
    background: mistyrose;
    color: #000000;
}

div.calendar tbody td.selected, div.calendar tbody th.selected {
    background: #C8102E;
    color: #D6D2C4;
}

/* ----------- Sharing Communities -----------*/

.tcl-sharing-community-title-container {
    font-family: "Spectral";
    color: #C8102E;
    font-size: 28px;
    line-height: 32px;
    font-weight: 600;
    white-space: nowrap;
    margin: 32px 16px;
    display: flex;
    width: 100%;
    overflow-x: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.tcl-sharing-community-title-container::-webkit-scrollbar {
    display: none;
}

.phone .tcl-sharing-community-title-container {
    font-size: 16px;
    line-height: 22px;
    font-weight: 600;
    white-space: nowrap;
    margin: 16px 8px;
}

.tcl-sharing-community-search-container {
    margin-top: 40px;
    margin-bottom: 80px;
    display: flex;
}

.phone .tcl-sharing-community-search-container {
    margin-top: 16px;
    margin-bottom: 40px;
    display: block;
}

.tcl-sharing-community-search-bar-container {
    margin-top: 20px;
}

.tcl-communities-list-container {
    margin-left: 20px;
}

.phone .tcl-communities-list-container {
    margin-left: 0px;
}

.sharing-community-main-container {
    display: flex;
    padding-bottom: 24px;
}

.phone .sharing-community-main-container {
    display: block;
    padding-bottom: 16px;
}

.sharing-community-tools-container {
    width: 300px;
    padding: 24px 32px 24px 0px;;
}

.phone .sharing-community-tools-container {
    width: 100%;
    padding: 16px 0px 16px 0px;
}

.sharing-community-content-container {
    width: 100%;
    padding: 24px 0px;
}

.phone .sharing-community-content-container {
    padding: 16px 0px;
}

.sharing-community-mini-card-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.phone .sharing-community-mini-card-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.sharing-community-mini-card-list > li {
    flex-basis: 760px;
}

.sharing-community-mini-card {
    border-radius: 16px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
    padding: 16px;
    width: 250px;
    max-width: 250px;
    height: 130px;
    margin-bottom: 20px;
}

.sharing-community-mini-card-icon {
    width: 30px;
    height: 30px;
    object-fit: cover;
    border-radius: 4px;
}

.tcl-sharing-community-filters-container_CatalystUX {
    width: 520px;
    height: 240px;
    padding: 16px 32px;
    border-radius: 24px;
    box-shadow: 0px 4px 4px 0px rgba(197, 185, 172, 0.08);
}

.phone .tcl-sharing-community-filters-container_CatalystUX {
    width: 100%;
    border-radius: 16px;
}

.tcl-sharing-community-contents-title-container, .phone .tcl-sharing-community-introdution-title-container {
    font-family: "Spectral";
    color: #C8102E;
    font-size: 20px;
    line-height: 32px;
    font-weight: 600;
    white-space: nowrap;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.tcl-sharing-community-introdution-title-container {
    font-family: "Spectral";
    color: #C8102E;
    font-size: 20px;
    line-height: 32px;
    font-weight: 600;
    white-space: nowrap;
    margin-bottom: 0px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: fit-content;
    max-width: 100%;
}

.tcl-sharing-community-filter-item {
    padding: 22px 0px;
    font-family: "Spectral";
    color: #D6D2C4;
    font-weight: 500;
    font-size: 18px;
    line-height: 23px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.tcl-sharing-community-filter-selected {
    font-weight: 700;
}

.tcl-bottom-line-white {
    border-bottom: solid white 1px;
}

.tcl-sharing-community-list_CatalystUX {
    height: 406px;
    width: 520px;
    border-radius: 24px;
    padding: 40px 32px;
    box-shadow: 0px 4px 4px 0px rgba(197, 185, 172, 0.08);
}

.phone .tcl-sharing-community-list_CatalystUX {
    height: 450px;
    width: 100%;
    border-radius: 16px;
    padding: 32px 24px;
    margin-top: 24px;
}

.tcl-sharing-community-list-item-title {
    font-family: "Spectral";
    font-weight: 600;
    font-size: 18px;
    line-height: 26px;
    color: #C8102E;
}

.phone .tcl-sharing-community-list-item-title {
    font-size: 16px;
    line-height: 26px;
}

.tcl-sharing-community-list-item-details {
    font-family: "Spectral";
    font-weight: 400;
    font-size: 16px;
    color: black;
}

.phone .tcl-sharing-community-list-item-details {
    font-size: 14px;
}

.tcl-sharing-community-search-bar-background {
    width: 520px;
    height: 145px;
    border-radius: 24px;
    padding: 32px;
    background: #D6D2C4;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.08);
}

.sharing-communities-search-type {
    font-family: "Spectral";
    color: #C8102E;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 16px;
}

.content-mini-card {
    position: relative;
    z-index: 3000;
    width: 250px;
    height: 164px;
    border-radius: 16px;
    padding: 24px;
    /*box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);*/
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.folder-mini-card .content-mini-card {
    justify-content: end;
}

.folder-background_CatalystUX{
    background: url("/TCL_ContentSharing/img/content_folder_background_CatalystUX.png?5855");
}

.post-background_CatalystUX{
    background: url("/TCL_ContentSharing/img/content_post_background_CatalystUX.png?5855");
}

.file-background_CatalystUX{
    background: url("/TCL_ContentSharing/img/content_file_background_CatalystUX.png?5855");
}

.link-background_CatalystUX{
    background: url("/TCL_ContentSharing/img/content_link_background_CatalystUX.png?5855");
}

.folder-background_CatalystUX, .file-background_CatalystUX, .link-background_CatalystUX, .post-background_CatalystUX {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 250px;
    height: 164px;
    z-index: 2500;
    background-size: cover;
    border-radius: 16px;
}

.content-mini-card-title {
    font-family: "Spectral";
    color: black;
    font-weight: 600;
    font-size: 16px;
    width: 150px;
}

.content-mini-card-photo {
    width: 24px;
    height: 24px;
    border-radius: 12px;
    object-fit: cover;
}

.tcl-categories-card {
    position: relative;
    z-index: 1500;
    cursor: pointer;
}

.categories-card-top-section {
    display: flex;
    justify-content: center;
    height: 45%;
    padding: 40px 32px;
}

.tcl-categories-card-title-placeholder {
    font-family: "Spectral";
    color: #000000;
    font-size: 28px;
    line-height: 38px;
    font-weight: 700;
    white-space: nowrap;
}

.phone .tcl-categories-card-title-placeholder {
    font-size: 16px;
    line-height: 20px;
    white-space: normal;
}

.categories-card-bottom-section {
    height: 55%;
    width: 100%;
    padding: 32px 32px 40px 32px;
    background: rgba( 214, 210, 196, 0.2);
    backdrop-filter: blur(4px);
    position: relative;
    z-index: 2000;
    border-radius: 0px 0px 24px 24px;
}

.categories-card-content {
    height: -webkit-fill-available;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #D6D2C4;
    font-family: "Spectral";
}

.categories-card-background {
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: black;
}

.categories-card-background-photo {
    object-fit: cover;
    filter: brightness(0.3);
}

.tcl-categories-card, .categories-card-background, .categories-card-background-photo {
    border-radius: 24px;
    width: 340px;
    aspect-ratio: 1;
}

.phone .tcl-categories-card, .phone .categories-card-background, .phone .categories-card-background-photo {
    border-radius: 16px;
    width: calc(50vw - 24px);
}

.content-section-new-ux{
    margin-bottom: 24px;
    border-radius: 0px;
    padding: 24px;
    /*box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);*/
    border-style: solid;
    border-top-width: 1px;
}

.phone .content-section-new-ux{
    margin-bottom: 16px;
    padding: 16px;
}

/* $4.1.9 - Patterns - Content - Carousel */
.carousel {
    position: relative;
    -webkit-transition: opacity 330ms ease;
            transition: opacity 330ms ease;
}

.carousel.is--hidden {
    opacity: 0;
    
}

.carousel .tns-outer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:reverse;
    -ms-flex-direction:column-reverse;
    flex-direction:column-reverse;
    width: 100%;
}

.carousel .tns-ovh {
    position: relative;
}

.carousel .tns-item {
    cursor: -webkit-grab;
}

.carousel .tns-nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-top: var(--space-m);
}

.carousel .tns-nav button {
    cursor: pointer;
}

.carousel .carousel-navigation {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.carousel .carousel-arrow-left,
.carousel .carousel-arrow-right {
    position: absolute;
    background:  var(--color-neutral-0);
    border-radius: 50%;
    cursor: pointer;
    height: 40px;
    width: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack:  center;
    -ms-flex-pack:  center;
    justify-content:  center;
    -webkit-box-align:  center;
    -ms-flex-align:  center;
    align-items:  center;
    -webkit-box-shadow: var(--shadow-xs);
            box-shadow: var(--shadow-xs);
    /*color: var(--color-neutral-7);*/
    color: #C5B9AC;
    -webkit-transition: all 180ms linear;
            transition: all 180ms linear;
}

.carousel .carousel-arrow-left:hover,
.carousel .carousel-arrow-right:hover {
    /*color: var(--color-neutral-9);*/
    color: #C5B9AC;
}

.carousel .carousel-arrow-left {
    left: 0;
}

.carousel .carousel-arrow-right {
    right: 0;
}

.carousel .carousel-navigation.carousel-padding-none .carousel-arrow-left {
    /*left: 24px;*/
    left: -70px;
    top:-50px;
}

.carousel .carousel-navigation.carousel-padding-none .carousel-arrow-right {
    /*right: 24px;*/
    right: -70px;
    top:-50px;
}

.carousel .carousel-arrow-left .fa-fw,
.carousel .carousel-arrow-right .fa-fw {
    font-size: 35px;
}

.carousel .carousel-arrow-left .fa-fw {
    margin: -2px 0 0 -2px;
}

.carousel .carousel-arrow-right .fa-fw {
    margin: -2px -2px 0 0;
}

/* Library CSS */
.carousel img:not(.tns-lazy-img),
.carousel .lazyload img {
    height: auto;
}
.carousel [class*="autoWidth"] img {
    max-width: none;
}

.carousel .img {
    font-size: 100px;
    font-weight: 100;
    color: #D6D2C4;
    text-align: center;
}

.carousel .visually-hidden {
    position: fixed;
    left: -10000px;
    opacity: 0;
}

/* nav */
.carousel .nav.active ul {
    left: 0;
}

.carousel .nav.active .nav-toggle-handle {
    left: 17em;
}

.carousel .nav.active .nav-toggle-handle:before {
    display: inline-block;
}

.carousel .nav.active .nav-toggle-handle:after {
    display: none;
}

.carousel .nav ul {
    position: fixed;
    top: 0;
    left: -17em;
    z-index: 100;
    width: 17em;
    height: 1000px;
    height: 100vh;
    background-color: #D6D2C4;
    -webkit-box-shadow: 2px 0 15px rgba(0, 0, 0, 0.15);
    box-shadow: 2px 0 15px rgba(0, 0, 0, 0.15);
    transition: left 0.25s;
    overflow-y: auto;
}

.carousel .nav a {
    display: block;
    padding: 0.7em 1em;
    color: inherit;
    text-decoration: none;
}

.carousel .nav a:hover {
    background-color: #C5B9AC;
}

.carousel .nav .active {
    color: #D6D2C4;
    background-color: #af23ff !important;
}

.carousel .nav-toggle-handle {
    position: fixed;
    transition: left 0.25s;
    left: 0;
    top: 0;
    z-index: 100;
    padding: 10px;
    color: #D6D2C4;
    background-color: #af23ff;
    cursor: pointer;
}

.carousel .nav-toggle-handle:before { 
    display: none;
    padding-right: 5px;
    content: 'â—„'; 
    font-size: 0.8em;
}

.carousel .nav-toggle-handle:after { 
    padding-left: 5px;
    content: 'â–º'; 
    font-size: 0.8em;
}

.carousel .customize-tools {
    position: relative;
}

.carousel .thumbnails { 
    margin: 20px 0;
    text-align: center;
}

.carousel .thumbnails li {
    display: inline-block;
    cursor: pointer;
    border: 5px solid #fff;
}

.carousel .thumbnails [aria-selected="true"] {
    background: none;
    border-color: #000;
}

.carousel .thumbnails li {
    width: 50px;
}

.carousel .thumbnails img {
    vertical-align: bottom;
    height: auto;
    max-height: 50px;
}

.carousel .controls {
    text-align: center;
}

.carousel .controls li {
    display: block;
    position: absolute;
    top: 50%;
    height: 60px;
    line-height: 60px;
    margin-top: -30px;
    padding: 0 15px;
    cursor: pointer;
    transition: background 0.3s;
}

.carousel .controls li img {
    display: inline-block;
    vertical-align: middle;
}

.carousel .controls .prev {
    left: 0;
}

.carousel .controls .next {
    right: 0;
}

.carousel .controls li:hover {
    background: #D6D2C4;
}

.carousel .tns-controls {
    text-align: center;
    margin-bottom: 10px;
}

.carousel .tns-controls [aria-controls] {
    font-size: 15px;
    margin: 0 5px;
    padding: 0 1em;
    height: 2.5em;
    color: #000;
    background: #66CCFF;
    border-radius: 3px;
    border: 0;
}

.carousel .lt-ie9 .tns-controls > [aria-controls] {
    line-height: 2.5em;
}

.carousel [data-action] {
    display: block;
    margin: 10px auto;
    font-size: 17px;
    min-width: 3em;
    text-align: center;
    background: transparent;
    border: 0;
}

.carousel .tns-controls [disabled] { 
    color: #999999;
    background: #C5B9AC; 
    cursor: not-allowed !important;
}

.carousel .tns-nav > [aria-controls] {
    width: 8px;
    height: 8px;
    padding: 0;
    margin: 0 4px;
    border-radius: 50%;
    background: var(--color-neutral-5);
    border: 0;
}

.carousel .tns-nav > [aria-selected="true"] {
    background: var(--color-primary);
}

.carousel .playbutton-wrapper {
    text-align: center;
}

.carousel .playbutton-wrapper button {
    height: 34px;
    padding: 0 10px;
    font-size: 14px;
    background: #D6D2C4;
    border-radius: 3px;
    border: 1px solid  #ccc;
    cursor: pointer;
}

.carousel .wrapper {
    padding: 0 5em;
}

.carousel .suite-container .title, 
.carousel .suite-container .subtitle, 
.carousel .suite-container li {
    padding: 5px 10px;
}

.carousel .suite-container li {
    font-size: 12px;
    line-height: 1.4;
    background: #D6D2C4;
}
.carousel .suite-container .title {
    font-size: 14px;
    font-weight: bold;
    background: #8acac6;
    text-transform: capitalize;
}

.carousel .suite-container .subtitle {
    font-size: 13px;
    font-weight: bold;
    background: #C5B9AC;
    text-transform: capitalize;
}

.carousel .suite-container .fail {
    background: #FFADE2;
}

.carousel [class*="vertical"] .img {
    padding: 30px 0;
}

.carousel [class*="vertical"] .img:before {
    content: '';
    display: inline-block;
    width: 1px;
    margin-right: -1px;
    height: 100%;
    vertical-align: middle;
}

.carousel [class*="vertical"] .img a {
    display: inline-block;
    padding: 0;
}
.carousel [class*="vertical"] .img-1 { height: 137px; }
.carousel [class*="vertical"] .img-2 { height: 122px; }
.carousel [class*="vertical"] .img-3 { height: 143px; }
.carousel [class*="vertical"] .img-4 { height: 325px; }
.carousel [class*="vertical"] .img-5 { height: 140px; }
.carousel [class*="vertical"] .img-6 { height: 119px; }
.carousel [class*="vertical"] .img-7 { height: 223px; }
.carousel [class*="vertical"] .img-8 { height: 164px; }

/* https://daneden.github.io/animate.css/ */
@-webkit-keyframes jello {
  from,
  11.1%,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

@keyframes jello {
  from,
  11.1%,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

.jello {
    -webkit-animation-name: jello;
    animation-name: jello;
    -webkit-transform-origin: center;
    transform-origin: center;
}

@-webkit-keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

@keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

.rollOut {
    -webkit-animation-name: rollOut;
    animation-name: rollOut;
}

/*########## tny slider css ##########*/
.carousel .tns-outer {
    padding: 0 !important;
}

.carousel .tns-outer [hidden] {
    display: none !important;
}

.carousel .tns-outer [aria-controls], .carousel .tns-outer [data-action] {
    cursor: pointer;
}

.carousel .tns-slider {
    -webkit-transition: all 0s;
    -moz-transition: all 0s;
    transition: all 0s;
}

.carousel .tns-slider > .tns-item {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.carousel .tns-horizontal.tns-subpixel > .tns-item {
    display: inline-block;
    vertical-align: top;
    white-space: normal;
}

.carousel .tns-horizontal.tns-no-subpixel:after {
    content: '';
    display: table;
    clear: both;
}

.carousel .tns-horizontal.tns-no-subpixel > .tns-item {
    float: left;
    margin-right: -100%;
}

.carousel .tns-no-calc {
    position: relative;
    left: 0;
}

.carousel .tns-gallery {
    position: relative;
    left: 0;
    min-height: 1px;
}

.carousel .tns-gallery > .tns-item {
    position: absolute;
    left: -100%;
    -webkit-transition: transform 0s, opacity 0s;
    -moz-transition: transform 0s, opacity 0s;
    transition: transform 0s, opacity 0s;
}

.carousel .tns-gallery > .tns-slide-active {
    position: relative;
    left: unset !important;
}

.carousel .tns-gallery > .tns-moving {
    -webkit-transition: all 0.25s;
    -moz-transition: all 0.25s;
    transition: all 0.25s;
}

.carousel .tns-lazy-img {
    -webkit-transition: opacity 0.6s;
    -moz-transition: opacity 0.6s;
    transition: opacity 0.6s;
    opacity: 0.6;
}

.carousel .tns-lazy-img.loaded {
    opacity: 1;
}

.carousel .tns-ah {
    -webkit-transition: height 0s;
    -moz-transition: height 0s;
    transition: height 0s;
}

.carousel .tns-ovh {
    overflow: hidden;
}

.carousel .tns-visually-hidden {
    position: absolute;
    left: -10000em;
}

.carousel .tns-transparent {
    opacity: 0;
    visibility: hidden;
}

.carousel .tns-fadeIn {
    opacity: 1;
    filter: alpha(opacity=100);
    z-index: 0;
}

.carousel .tns-normal, .carousel .tns-fadeOut {
    opacity: 0;
    filter: alpha(opacity=0);
    z-index: -1;

/*------------------------------------------------------------*/
/* CatalystUX > SectionExpandable **********************/
/*------------------------------------------------------------*/

.SectionExpandable_CatalystUX {
    background-color: #D6D2C4;
    border: 1px solid #C5B9AC;
    box-shadow: 0 1px 3px rgba(197, 185, 172, .5);
}

.SectionExpandable_header_CatalystUX {
    border-bottom: 1px solid #dadbde;
    height: 50px;
    padding: 15px;
}

.SectionExpandable_CatalystUX.expanded .SectionExpandable__icon_CatalystUX {
    color: #b61212; 
}

.SectionExpandable__title_CatalystUX.Heading2 {
    color: #b61212; 
    font-size: 14px;
    display: table-cell;
    text-align: right;
    vertical-align: middle;
    width: 16px;
}

/*------------------------------------------------------------*/
/* CatalystUX > Section Expandable Detail ************/
/*------------------------------------------------------------*/

.CustomExpandable_CatalystUX .SectionExpandable_CatalystUX {
    background-color: #D6D2C4;
    border-radius: 4px;
    box-shadow: none;
    padding: 0;
}

.CustomExpandable_CatalystUX .SectionExpandable_header_CatalystUX {
    background-color: #D6D2C4;
    border: 0;
    margin-bottom: 0;
    padding: 15px 20px;
}
.CustomExpandable .SectionExpandable {
    background-color: #D6D2C4;
    border-radius: 4px;
    box-shadow: none;
    padding: 0;
}

.CustomExpandable .SectionExpandable_header {
    background-color: #D6D2C4;
    border: 0;
    margin-bottom: 0;
    padding: 15px 20px;
}
.CustomExpandable_CatalystUX .SectionExpandable__icon_CatalystUX.Heading2 {
    background-color: #D6D2C4;
    border: 1px solid #C5B9AC;
    border-radius: 23px;
    color: #cc3232;
    font-size: 12px;
    font-weight: 400;
    height: 36px;
    text-align: center;
    width: 92px;
}

.CustomExpandable_CatalystUX .SectionExpandable_CatalystUX.expanded .SectionExpandable__icon_CatalystUX.Heading2 {
    background-color: #D6D2C4;
}

.CustomExpandable_CatalystUX .SectionExpandable__title_CatalystUX {
    border-right: 0;
}

.CustomExpandable_CatalystUX .SectionExpandable_content_CatalystUX {
    border-radius: 0;
}

.CustomExpandable_CatalystUX .SectionExpandable__icon_CatalystUX.Heading2 > .fa {
    background-color: transparent;
    border: 0;
    color: #cc3232;
    font-size: 12px;
    height: 14px;
    margin-right: 0;
    width: 22px;
}

.CustomExpandable_CatalystUX .expanded_CatalystUX .SectionExpandable__icon_CatalystUX.Heading2 > .fa {
    background-color: transparent;
    border: 0;
    color: #cc3232;
    font-size: 12px;
    height: 13px;
    margin-right: 0;
    width: 22px;
}

.CustomExpandable_CatalystUX .SectionExpandable_CatalystUX.expanded .SectionExpandable__icon_CatalystUX {
    -webkit-transform: none;
            transform: none;
}

.CustomExpandable_CatalystUX .SectionExpandable_CatalystUX.expanded .SectionExpandable__icon_CatalystUX .fa {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
}
/*------------------------------------------------------------*/
/* CatalystUX Buit-in widgets > TableRecords *************************/
/*------------------------------------------------------------*/

.TableRecords_CatalystUX {
    border-bottom: 0;
    border-top: 0;
}

.TableRecords_Header_CatalystUX {
    border-bottom: 1px solid #101820;
    color: #D6D2C4;
    font-size: 14px;
    font-weight: bold;
    padding: 20px 0 20px 10px;
    text-transform: uppercase;
}

.TableRecords_OddLine_CatalystUX,
.TableRecords_EvenLine_CatalystUX {
    border-bottom: 1px solid #101820;
    padding: 15px 0 15px 10px;
}

.TableRecords_OddLine_CatalystUX {
    background-color: #C5B9AC;
}

/* Ajax Loading */

.Feedback_AjaxWait_CatalystUX {
    background-color: #D6D2C4;
    border-radius: 0;
    bottom: 0;
    box-shadow: 1px 2px 8px 0 rgba(197, 185, 172, .48);
    color: #C5B9AC;
    font-size: 12px;
    height: 70px;
    padding: 0 15px;
}

.Feedback_AjaxWait_CatalystUX .Loader {
    background: url(/TCL_Theme/img/loading_USACS.gif?5080) no-repeat;
    height: 11px;
    margin-bottom: 15px;
    margin-top: 20px;
    position: relative;
    text-indent: -9999em;
    width: 16px;
}
}
/*
.desktop .TableRecords_CatalystUX > tbody > tr:hover,
.desktop .TableRecords_CatalystUX > tbody > tr:hover td,
.desktop .EditableTable_CatalystUX > tbody > tr:hover td {
    background: #C5B9AC;
}*/
/*------------------------------------------------------------*/
/* 6.5 Usefull Classes > Text Classes *************************/
/*------------------------------------------------------------*/

.Red_CatalystUX {
    background-color: #E03E52;
}

.Page .Text_red_CatalystUX {
    color: #E03E52;
}

.Beige_CatalystUX {
    background-color: #C5B9AC;
}

.Page .Text_Beige_CatalystUX {
    color: #C5B9AC;
}

.Greige_CatalystUX {
    background-color: #D6D2C4;
}

.Page .Text_Greige {
    color: #D6D2C4;
}

.OffBlack {
    background-color: #101820;
}

.Page .OffBlack {
    color: #101820;
}

.DarkRed_CatalystUX {
    background-color: #C8102E;
}

.Page .Text_darkred_CatalystUX {
    color: #C8102E;
}

.Black_CatalystUX {
    background-color: #212227;
}

.Page .Text_black_CatalystUX {
    color: #212227;
}

.BackgroundGreige_CatalystUX{
    background: #D6D2C4;
}
/*------------------------------------------------------------*/
/* 7.3 CatalystUX USACS Patterns > Community Card ************************/
/*------------------------------------------------------------*/

.CommunityCard_CatalystUX {
    background: #D6D2C4;
    border-radius: 4px;
    display: table;
    padding: 10px;
    width: 100%;
}

.CommunityCard_CatalystUX .CCard_Left {
    display: table-cell;
    vertical-align: middle;
}

.CommunityCard_CatalystUX .CCard_Image {
    height: 40px;
    width: 40px;
}

.CommunityCard_CatalystUX .CCard_Right {
    display: table-cell;
    padding-left: 10px;
}

.CommunityCard_CatalystUX .CCard_Row {
    display: table;
    width: 100%;
}

.CommunityCard_CatalystUX .CCard_Icon {
    color: #D6D2C4;
    display: table-cell;
    width: 1%;
}

.CommunityCard_CatalystUX .CCard_Title {
    color: #101820;
    display: table-cell;
    font-size: 16px;
    line-height: 20px;
}

.CommunityCard_CatalystUX .CCard_Description {
    color: #000000;
    display: table-cell;
    font-size: 12px;
}

/* List */
.CommunityCardsList_CatalystUX {
    display: block;
    margin: 0 -10px;
    position: relative;
}

.CommunityCardsList_CatalystUX > .Column2 {
    display: inline-block;
    padding: 0 10px 15px;
    width: 50%;
}

.CommunityCardsList_CatalystUX > .Column3 {
    display: inline-block;
    padding: 0 10px 15px;
    width: 33.333%;
}

.desktop.small .CommunityCardsList > .Column2,
.tablet .CommunityCardsList > .Column2,
.desktop.small .CommunityCardsList > .Column3,
.tablet .CommunityCardsList > .Column3 {
    width: 50%;
}

.tablet.portrait .CommunityCardsList > .Column2,
.phone .CommunityCardsList > .Column2 {
    width: 100%;
}

.tablet.portrait .CommunityCardsList > .Column3,
.phone .CommunityCardsList > .Column3 {
    width: 100%;
}

.desktop.small .CommunityCardContent .CommunityCard,
.tablet .CommunityCardContent .CommunityCard,
.phone .CommunityCardContent .CommunityCard {
    min-height: auto;
}

/* Sidebar */
.Panel.SharingSidebar_CatalystUX .CommunityCard {
    /*border-bottom: 1px solid #ddd;*/
    border-radius: 0;
    padding: 10px 0;
}

.Panel.SharingSidebar_CatalystUX .SugestedLinks_Wrapper_CatalystUX .ListRecords > span:first-child .CommunityCard {
    border-top: 1px solid #ddd;
    margin-top: 15px;
}

.Panel.SharingSidebar_CatalystUX .MenuLinks_Wrapper_CatalystUX .ListRecords > span:first-child .CommunityCard {
    background: none;
    border-top: 1px solid #ddd;
    margin-top: 15px;
}

/*------------------------------------------------------------*/
/* 7.4 USACS Patterns > Community Card Content ****************/
/*------------------------------------------------------------*/

.CommunityCardContent_CatalystUX {
    background: #D6D2C4;
    border-radius: 4px;
    padding: 10px;
}

.CommunityCardContent_CatalystUX .CommunityCard {
    border-bottom: 1px solid #D6D2C4;
    min-height: 75px;
    padding: 0 0 10px;
}

.CCard_FileInfo_CatalystUX {
    color: #000000;
    font-size: 12px;
    line-height: 14px;
}

.CCard_ActionInfo_CatalystUX {
    color: #aaa;
    font-size: 12px;
    line-height: 14px;
}

.CommunityCardAuthor_CatalystUX {
    display: table;
    padding: 10px 0;
    width: 100%;
}

.CCardAuthor_Image_CatalystUX {
    display: table-cell;
    height: 30px;
    vertical-align: middle;
    width: 30px;
}

.CCardAuthor_ContentInfo_CatalystUX {
    display: table-cell;
    padding-left: 10px;
    vertical-align: middle;
}

.CCardAuthor_Name_CatalystUX {
    color: #101820;
    font-weight: 600;
    line-height: 16px;
}

.CCardAuthor_Description_CatalystUX {
    color: #000000;
    font-size: 11px;
    line-height: 14px;
}
/*------------------------------------------------------------*/
/* 5.1 SILK Patterns > Accordion ******************************/
/*------------------------------------------------------------*/


.Accordion {
    background-color: #D6D2C4 !important;
    border: 1px solid #C5B9AC !important;
}

.AccordionVertical {
    background: #D6D2C4 !important;
}

/* Accordion Harrow */
.Accordion .fa-angle-down:before {
    padding-left: 1px;
}

.AccordionVertical___title {
    color: #C8102E; 
}

.AccordionVertical___icon {
    border-left: 1px solid transparent;
}

.AccordionVertical___icon > .fa {
    background-color: transparent;
    border: 0;
    border-radius: 0;
    color: #D6D2C4;
    font-size: 22px;
}

.AccordionVertical_item.open .AccordionVertical___icon > .fa {
    background-color: transparent;
    border: 0;
    border-radius: 0;
    color: #C8102E;
    font-size: 22px;
}

/*------------------------------------------------------------*/
/* 5.8 Catalyst SILK Patterns > Tabs ***********************************/
/*------------------------------------------------------------*/

.Tabs {
    border: 0;
}

.Tabs_header {
    background: transparent;
}

.Tabs__tab {
    background: transparent;
    border-bottom: 1px solid #ccc;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    color: #949fa3;
}

.Tabs__tab.active {
    background: transparent;
    border-bottom-color: #C8102E;
    border-top: 0;
    color: #C8102E;
}

.Tabs__tab:hover {
    background: transparent;
    border-bottom: 1px solid #C8102E;
}
/*------------------------------------------------------------*/
/* 1.1 General Properties > a links ***************************/
/*------------------------------------------------------------*/

a,
a:link,
a:visited {
    color: #C8102E;
}
/*---------Style for Patient Surveys--------------*/
.counter-title {
  height: 24px;
  color: #101820;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 24px;
}
.survey-submissions-margin-top-bottom {
    margin:  30px 0 10px 0;
}
.average-question-score {
  height: 55px;
  color: #9CBE4C;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 41px;
}
.height-card {
    height: 173px;
}
.background-dashboard-card {
    background-color: #C5B9AC;
    padding: 24px;
}


.YesPercentValue{
    color:#22b14c;
    font-size: .55em;
}

.NoPercentValue{
    color:#ed1c24;
    font-size: .55em;
}

.NAPercentValue{
    color:#7f7f7f;
    font-size: .55em;
}

.YesNoPercentLabel{
    color:#000000;
    font-size: .5em;
}

.NoResponseText{
    color:#7f7f7f;
    font-size: .4em;
    font-weight: normal;
}

.height20{
    height: 20px;
    line-height: 20px;
}

.height9{
    height: 9px;
    line-height: 9px;   
}

.nps-negative {
  height: 21px;
  border-radius: 10px 0 0 10px;
  background-color: #E03E52;
}

.nps-neutral {
  height: 21px;
  background-color: #FCD757;
}

.nps-positive {
  height: 21px;
  border-radius: 0 10px 10px 0;
  background-color: #00A376;
}

.nps-detractors {
  box-sizing: border-box;
  height: 20px;
  border: 1px dashed #979797;
}

.nps-passives {
  box-sizing: border-box;
  height: 20px;
  border: 1px dashed #979797;
}

.nps-promoters {
  box-sizing: border-box;
  height: 20px;
  border: 1px dashed #979797;
}

.NumberAnswers {
  height: 16px;
  color: #626365;
  font-size: 12px;
  letter-spacing: 0.38px;
  line-height: 16px;
}

.nps-values {
  height: 16px;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.38px;
  line-height: 16px;
}

.list-current-row-number {
  height: 41px;
  color: #464748;
  font-size: 30px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 41px;
}

.average-question-score {
  height: 55px;
  color: #00A376;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 41px;
}
.ThemeGrid_Container {
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 30px;
}
input[type="checkbox"]:disabled:checked, input[type="checkbox"]:disabled {
    background-color: #C5B9AC !important;
    border-color: #000 !important;
    border-style: solid !important;
    border-width: 1px !important;
}
input[type="checkbox"]:disabled:checked:after {
    border-color: #000000;
}