:root {
    --box-shadow: 0px 0px 0px 1px rgb(140 140 140/.2);
    --box-shadow-hover: 0 0 2px rgba(179, 179, 179, 0.3);
    --tile-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06);
    --hover-background: #eeeeee;
    --active-background: #dddddd;
    --active-background: #fdfeff;
    --dropdown-background: #fff;
    --tab-focus-outline: #d9d9d9 solid 2px;
    --background: #fff;
    --primary-theme: #0c4b6a;
    --action-theme: #B0C937;
    --border-radius: 7px;
    --product-green: #3bb54a;
    --product-red: #b92120;
    --hr-suite: #3bb54a;
        --hr-suite-bg: #ecf9ed;
    --workforce-suite: #29AAE2;
        --workforce-suite-bg: #e9f6fc;
    --payroll-suite: #272361;
        --payroll-suite-bg: #f3ecf9;
    --talent-suite: #662F90;
        --talent-suite-bg: #f3ecf9;
}   

html.visual-release{
    overflow-x: hidden;
    body{
        margin-top: -1px;
        margin-right: 15px;
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto 1fr;
        gap: 0 1rem;
    }
}

.disabled{
    cursor: not-allowed;
    opacity: 0.7;
}

i{
    height: 16px;
    width: 16px;
    display: block;
    margin: 0 auto;
    background-color: #444;

    -webkit-mask-size: cover; 
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    &.drag-handle{
        height: 18px;
        width: 14px;
        background-color: #444;
        transform: rotate(90deg);
        -webkit-mask-image: url(images/wzIcons/drag-handle.svg);
        mask-image: url(images/wzIcons/drag-handle.svg);
    }
}

/*COLOUR THEME CLASSES*/
.primary-font{
    color: var(--primary-theme) !important;
}

/* Focus styles for input, select, and TomSelect */
input:focus, 
select:focus, 
.ts-control:focus, 
.ts-control:focus-visible, 
.tomselect-control:focus {
    outline: none;
    box-shadow: var(--box-shadow) !important;
}

/*Feels almost broken having boxshadow on role select - MW 3/25/2025*/
div.person-role-container .ts-control:focus{
    box-shadow: none !important;    
}

input[type="radio"]:focus{
    box-shadow: none !important;
}

main.worksheet span.tableActions>span[action],
main.worksheet span.policyAdd,
section.ActivityTransition a.transition,
h3.transitions > span[code],
a.createFormAction,
a.action-button,
div > a.cmdbtn,
input[type='button'], 
header.dashTitle a[action],
tfoot  a[action],
span.scheduleActions span.tableActions a[action],
section.insert-banner > div.ts-wrapper{
    padding: 4px 10px;

    display: inline-block;
    white-space: nowrap;

    background-color: white;
    outline: 1px solid var(--product-green);
    border: none;
    color: var(--product-green);

    font-weight: bold;
    border-radius: var(--border-radius);
    height: fit-content;
    font-size: 12px;
    width: fit-content;
    
    &:hover{
        background-color: #e5f6e7;
        cursor: pointer;
    }
    &.loading,
    &[status="loading"],
    &:active,
    &.button-processing{
/*        color: #fff;
        background-color: #fff;*/
        outline-color: var(--product-green);
        background-image: url(images/workzoomLoad.gif);
        background-size: 50px;
        background-repeat: no-repeat;
        background-position: center;
        color: transparent;
        background-color: transparent;
        transition: opacity 0.3s ease;
    }
}

.action-button,
a[action='ADD'],
.primary-button{
    order: 1;
    &:hover{
        background-color: #e5f6e7;
    }
}

@keyframes glow {
  0%   { box-shadow: 0 0 0 1px rgba(75, 203, 90, 0.3); }
  50%  { box-shadow: 0 0 2px 1px rgba(75, 203, 90, 0.6); }
  100% { box-shadow: 0 0 0 1px rgba(75, 203, 90, 0.3); }
}

button.primary-button.glow {
  animation: glow 1.4s ease-in-out 3;
}

a[action='ADD']{
    display: flex;
    align-items: center;
    gap: 0.25rem;
    i{
        height: 16px;
        width: 16px;
        display: block;
        margin: 0 auto;
        background-color: var(--product-green);
        -webkit-mask-size: 18px;
        mask-image-size: 18px;
        mask-position: center;
        -webkit-mask-position: center;
        &.add-icon{
            -webkit-mask-image: url(images/wzIcons/add-icon.svg);
            mask-image: url(images/wzIcons/add-icon.svg);
        }
    }
}

.action-button,
a[action='ADD'],
.primary-button,
.secondary-button,
input[type='button'],
section.ActivityTransition.leftBtn > a.transition,
.button{
    align-items: center;
    cursor: pointer;
    background-color: transparent;
    border-color: var(--product-green);
    outline-color: var(--product-green);
    color: var(--product-green);
    font-weight: bold;
    height: fit-content;
    width: fit-content;
    font-size: 12px;
    font-weight: bold;
    border: none;
    border-radius: var(--border-radius);
    padding: 4px 10px;
    display: inline-block;
    display: flex;
    white-space: nowrap;
    outline: 1px solid;
    display: flex;
    gap: 5px;

    &:active,
    &.button-processing{
        color: transparent;
        background-color: transparent;
        > i{
            background-color: transparent !important;
        }
    }
    
    &:focus {
        box-shadow: 0 0 0 3px rgba(75, 203, 90, 0.3);
    }
}

.button.primary-theme{
    border-color: var(--primary-theme);
    outline-color: var(--primary-theme);
    color: var(--primary-theme);
    > i{
        background-color: var(--primary-theme);
    }
    &:hover{
        background-color: var(--primary-theme-90pct);
    }
    &:focus{
        box-shadow: 0 0 0 3px var(--primary-theme-90pct) !important;
    }
}

section.reportContainer aside.resultsFilter > button{
    color: white;
    background-color: var(--primary-theme);
    border: thin var(--primary-theme) solid;
}

.action-button,
.primary-button{
    color: white !important;
    border-color: var(--product-green) !important;
    outline-color: var(--product-green) !important;
    background-color: var(--product-green) !important;
    &:hover{
        background-color: #4bcb5a !important; /* A slightly darker shade of green for the hover effect */
    }
    &:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(75, 203, 90, 0.3); /* Soft green shadow for focus */
        background-color: var(--product-green) !important; /* Keep the original green */
    }
}

.close-button{
    font-size: 18px;
    line-height: 18px;
    color: #888;
    background-color: transparent;
    border: none;
    outline: none;
    text-align: center;
    width: fit-content;
    height: fit-content;
    position: absolute;
    right: 15px;
    top: 15px;
    padding: 2px 5px;
    margin: 0;
    &:hover{
        cursor: pointer;
        color: #666;
        border-radius: 50%;
        background-color: #f2f2f2;
        transition: background-color 0.3s ease;
    }
}

section.ActivityTransition.leftBtn > a.transition,
.secondary-button{
    outline-color: #a8a8a8;
    color: #666;
    
    > i{
        height: 18px;
        width: 18px;
        background-color: #666;
    }
    
    &:hover{
        background-color: #f2f2f2 !important;
    }
    &:active{
        color: #f2f2f2 !important;
    }
    &:focus{
        box-shadow: 0 0 0 3px rgba(168, 168, 168, 0.3);
    }
}


/*input[type='button'],
.button{
    background-color: transparent;
    border-color: var(--product-green);
    outline-color: var(--product-green);
    color: var(--product-green);
    font-weight: bold;
    height: fit-content;
    font-size: 12px;
    width: fit-content;
    order: 10;
    
    &:hover{
        background-color: #e5f6e7;
    }
    
    &:active,
    &.button-processing{
        color: transparent;
        background-color: transparent;
        > i{
            background-color: transparent !important;
        }
    }
}*/

header > button.action-button{
    display: block;
    margin: auto 0;
    margin-left: auto;
}

.Logic ol.choices > li.Choice > div,
.Config ol.choices > li.Choice > div{
  margin-left: 15px;
}
.Logic ol.choices > li.Choice.contentHidden > div,
.Config ol.choices > li.Choice.contentHidden > div{
  display: none;
}

/************ Utility classes ************/
.rowspan-1 {
    grid-row: span 1;
}

.rowspan-2 {
    grid-row: span 2;
}

.hide{
    display: none !important;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/*********** End of Utility classes ************/
body #backButtonNav{
  display:none;
}
body div#wsTableHeaders > div {
    display: none;
}
section.recap > header.tableHeader > h1.headerData {
    display: none;
}
/*set as a min height for now, causing errors on the job opening page and in other areas mw 7/18/2023*/
.container {
    min-height: 200px; 
    /*border: 1px solid #dadada;*/ 
    overflow: auto;
}


body {
    -webkit-text-size-adjust: auto;
    text-size-adjust: auto;
}

body.postLogin > main.appLogin {
    display: none;
}

body.no-transitions #loading-transition {
    display: none;
}
#loading-transition.loading-transition {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--background);
    width: 100vw;
    height: 100vh;
    z-index: 10000;
    display: flex;
    flex-direction: column;  
    gap: 1rem;
/*    display: none;*/
}

.cursor-wait {
  cursor: wait !important;  
}

#loading-transition:visible ~ footer#bodyFooter {
    display: none;
}

#loading-transition > div.loading-transition-bottom {
    display: flex;
    justify-content: center;
}
#loading-transition > .loading-logo {
/*    flex: 1;*/
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 200px;
    height: 350px;
}

#loading-transition > div > .wz-logo,
#loading-transition > div > .loading-spinner {
    background-repeat: no-repeat;
    height: 60px;
}
#loading-transition > div > .wz-logo {
    background-image: url(images/wzFullLogo.png); 
    background-position: right center;
    background-size: 200px;
    width: 200px;
}
#loading-transition > div > .loading-spinner  {
    background-image: url(images/workzoomLoadingV3200px.gif); 
    background-position: left center;
    background-size: 50px;
    width: 50px;
}

/* Tooltip styling */
*[data-tooltip]:hover:before,
*[data-tooltip]:hover:after {
    opacity: 1;
    visibility: visible;
}

*[data-tooltip]:before {
    content: attr(data-tooltip);
    position: absolute;
    top: 30px;
    /* color: #fff; */
    width: max-content;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s;
    background: #fff;
    box-shadow: var(--box-shadow);
    padding: 5px;
    border-radius: 2px;
}
*[data-tooltip]:after {
    content: "";
    position: absolute;
    top: 50%;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent #fff transparent;
    font-size: 12px;
    font-family: 'proxima-nova','sans-serif';
    color: #444; 
    font-style: normal;
}


/* End of tooltips */

/**** FONTS ****/
/*@font-face {
font-family:"proxima-nova";
src:url("../fonts/pnova_700.otf") format("opentype");
font-display:auto;font-style:normal;font-weight:700;font-stretch:normal;
}
@font-face {
font-family:"proxima-nova";
src:url("../fonts/pnova_400.otf") format("opentype");
font-display:auto;font-style:normal;font-weight:400;font-stretch:normal;
}
@font-face {
font-family:"proxima-nova";
src:url("../fonts/pnova_italic.otf") format("opentype");;
font-display:auto;font-style:italic;font-weight:300;font-stretch:normal;
}*/
@font-face {
font-family:"proxima-nova";
src:url("../fonts/pv_n7.otf") format("opentype");
font-display:auto;font-style:normal;font-weight:700;font-stretch:normal;
}

@font-face {
font-family:"proxima-nova";
src:url("../fonts/pv_i7.otf") format("opentype");
font-display:auto;font-style:italic;font-weight:700;font-stretch:normal;
}

@font-face {
font-family:"proxima-nova";
src:url("../fonts/pv_n4.otf") format("opentype");
font-display:auto;font-style:normal;font-weight:400;font-stretch:normal;
}

@font-face {
font-family:"proxima-nova";
src:url("../fonts/pv_n4.otf") format("opentype");
font-display:auto;font-style:italic;font-weight:400;font-stretch:normal;
}

@font-face {
font-family:"proxima-nova";
src:url("../fonts/pv_n3.otf") format("opentype");
font-display:auto;font-style:normal;font-weight:300;font-stretch:normal;
}

@font-face {
font-family:"proxima-nova";
src:url("../fonts/pv_i3.otf") format("opentype");
font-display:auto;font-style:italic;font-weight:300;font-stretch:normal;
}
/*@font-face {
font-family:"proxima-nova";
src:url("https://use.typekit.net/af/2555e1/00000000000000007735e603/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");
font-display:auto;font-style:normal;font-weight:700;font-stretch:normal;
}

@font-face {
font-family:"proxima-nova";
src:url("https://use.typekit.net/af/4de20a/00000000000000007735e604/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("opentype");
font-display:auto;font-style:italic;font-weight:700;font-stretch:normal;
}

@font-face {
font-family:"proxima-nova";
src:url("https://use.typekit.net/af/efe4a5/00000000000000007735e609/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
font-display:auto;font-style:normal;font-weight:400;font-stretch:normal;
}

@font-face {
font-family:"proxima-nova";
src:url("https://use.typekit.net/af/3322cc/00000000000000007735e616/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("opentype");
font-display:auto;font-style:italic;font-weight:400;font-stretch:normal;
}

@font-face {
font-family:"proxima-nova";
src:url("https://use.typekit.net/af/1be3c2/00000000000000007735e606/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff2"),url("https://use.typekit.net/af/1be3c2/00000000000000007735e606/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff"),url("https://use.typekit.net/af/1be3c2/00000000000000007735e606/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("opentype");
font-display:auto;font-style:normal;font-weight:300;font-stretch:normal;
}

@font-face {
font-family:"proxima-nova";
src:url("https://use.typekit.net/af/40d372/00000000000000007735e607/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i3&v=3") format("woff2"),url("https://use.typekit.net/af/40d372/00000000000000007735e607/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i3&v=3") format("woff"),url("https://use.typekit.net/af/40d372/00000000000000007735e607/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i3&v=3") format("opentype");
font-display:auto;font-style:italic;font-weight:300;font-stretch:normal;
}*/
/**** end of fonts ****/
body.postLogin main {
    /*grid-column: span 2;*/
    min-height: 80vh; 
}

:is(section, div):is(.data, .task-table, .recapListContent):has([calendar_type="CALENDAR"]) {
  z-index: 100;
}

input:-ms-input-placeholder { 
  color:#444;
  font-style: italic;
  /*font-size: 11px;*/
}

input[type="text"]:-ms-input-placeholder { 
  color:#444;
  font-style: italic;
  /*font-size: 11px;*/
}
input::-webkit-input-placeholder {
  color:#CCCCCC;
  font-style: italic;
  /*	font-size: 11px;*/
}

    /*section.ActivityTransition a.transition.Denied,*/
    /*section.ActivityTransition.leftBtn a.transition,*/
    section.ActivityTransition.rightBtn a.transition{
        border: thin solid #999;
        background-color: white;
        color: #999;
    }

/*,
article.chartDisplay > div.cdTitle > div:hover,
article.reportDetails > div.dTitle > div:hover*/

/**** Tile Hover States ****/
section.drillDown > section.ttu > section.ReportDashHandler > ol > li:not([report]):hover,
ul.child-table-list > li.depth-1.ttu > section > h4 > a.highlighted-menu-item,
li.ttu.depth-0 > section > h4 > a.menu-item-text.homeButton.highlighted-menu-item,
.toggleView.clicked > div.menuBridge > ul.menuElements > li:hover,
div.WorkzoomMenu li.highlighted-menu-item > section > h4,
ul.role-list > li:hover,
tr.drillDownAware:hover,
nav.sideMenu:not(.active) li.depth-1.highlighted-menu-item,
article.ttu > section.more:hover,
aside.resultsFilter > div.rsTitle > div.toggleClose:hover{
    background-color: var(--hover-background);
    cursor: pointer;
    border-radius: var(--border-radius);
}

span#pinIt:hover,
span#logOut.log-out-button:hover {
    background-color: var(--hover-background);
    cursor: pointer;
    border-radius: 50%;
}
/*li.depth-2 a.menu-item-text:hover,
ul.child-table-list > li.depth-1.ttu > section > h4 > a:hover,
li.ttu.depth-0 > section > h4 > a.menu-item-text.homeButton:hover{
        text-decoration: underline;
}*/
/*article.ttu > section.dash > article:not(.CanDoManager):not(.CanDoManagerV2):not(.Personnel):not(.more):not(.ToDosTile):not([mtitle="details"]):hover*/
article.CanDoManager > section[level="Suite"]:not([holders="1"]) > ol.canDoHolder > li:hover,
article.CanDoManager section[level="Curos"] section[level="Suite"] > ol.canDoHolder > li:hover,
article.CanDoManager > section:not([level="Curos"]):not([holders="1"]) > ol.canDoHolder > li:hover,
article.CanDoManager > section[level="Suite"][holders="1"] section[holders="0"]  > ol.canDoHolder > li:hover,
section.drillDown > section.ttu > section.ReportDashHandler > ol > li[report]:hover,
li.drillDownAware[report]:hover:not(.depth-0):not(.depth-1),
li.drillDownAware.masonry-item:hover{
  box-shadow: var(--box-shadow-hover);
  cursor: pointer;
  border-radius: var(--border-radius);
}

div.pwdRequirements .title {
  font-weight: bold;
}

div.pwdRequirements {
  box-shadow: var(--box-shadow);
  white-space: pre-wrap;
  padding: 8px;
  margin-bottom: 8px;
  margin-top: 8px;
}

section.ReportDashHandler > ol{
    margin-top: 5px;
}
li.TTUReport > h6.reportTitle{
    text-align: center;
    width: fit-content;
    /*padding: 5px;*/
    margin: 0px auto;
}

/*Makes timeseries Charts bg transparent on hover */
li:hover > article.chartWrapper span.fusioncharts-container > svg > g > g > rect:first-child {
    fill-opacity: 0;
}
/* ------ HTML5 Reset :: style.css  */
html, body, body div, main,span, object, iframe, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q,
samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article,
aside, figure, footer, header, hgroup, menu, nav, 
section, time, mark, audio, video {

    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    list-style: none;
    background: transparent;
    /*color: #444444;*/
}

html, 
th, 
select,
legend, 
div.ql-container,
label, input,textarea, 
.Config div.Field > header > h1 {
    font-family: 'proxima-nova','sans-serif';
    text-align: left;
    font-weight: 400;
    font-style: normal;
    font-size: 12px;
}
body a {
    text-decoration: none;
    color: #888888;
}
/*body:not(.withContrast) header a,*/ 
/*body:not(.withContrast) article a:not(.cmdbtn),*/ 
body:not(.withContrast) p a {
    color: #444;
}
span[error]{
  color: #FF0000;
}

/**** Scroll Back To Top ****/
a.backToTopHref {
    position: fixed;
    right: 0;
    bottom: 0;
    margin: 30px 30px;
    z-index: 31;
}
img.backToTopImg {
    width: 40px;
    height: 40px;
    cursor: pointer;
}
/**** End of Scroll Back To Top ****/
/**** LOG IN ****/
main.appLogin .centerVandH {
    margin: 20px auto;
    width: 350px;
    height: fit-content;
    text-align: center;
}
main.appLogin section{
    display: flex;
    flex-direction: column;
}
main.appLogin ul.layout {
    width: 210px;
    margin: auto;
}
fieldset {
    min-width: 0;
    text-overflow: ellipsis;
}

main.appLogin .userPasswordInfo li input.paramter {
    padding-left: 8px;
}

li.TTUReport:empty{
    
}
ol > li.TTUReport{
    border-radius: 8px;
    box-shadow: var(--box-shadow);
    display: flex;
    flex-direction: column;
    padding: 10px;
    flex-direction: column;
    max-height: 300px;
}

section.dash > article[table_key='PWA_HW_CALENDAR']{
    /*grid-row: span 2;*/
}

a.fc-event.hidden-event{
    display: none;
}
a.fc-event.highlight-event{
    outline: none;
    box-shadow: 0 0 0 4px rgba(21, 156, 228, 0.4);
}

/*With the drop down indicator, children should be show/hideable*/
div.recapListContent > ol.recapList > li:not(.expanded) > div > article.ttu > section.dash{
    display: none;
}

ul.legend-item-holder > li.legend-item{
    color: #666;
    cursor: pointer;
}
ul.legend-item-holder > li.legend-item:not(.show-events){
    color: #888;
    padding-left: 20px;
}
li.show-events > div.legend-toggle {
    background-image: url("images/uploadOk16x16.png");
    background-size: 12px;
    background-position: center;
    background-repeat: no-repeat;
    height: 16px;
    width: 16px;
    padding: 0 2px;
    display: block;
    margin: auto 0;
}

main.appLogin .userPasswordInfo input {
    border: 1px solid #cccccb;
    border-radius: var(--border-radius);
    margin: 2px;
    background: #ffffff;
    height: 30px;
    width: 200px;
    color: #444444;
    font-size: 11pt;
}
body main.appLogin .userPasswordInfo li.actionbutton {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
}

div.popupHolder > ol.staged-for-delete:not(:empty),
div.popupHolder > ol.selectedValues:not(:empty){
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    order: 1;
    padding: 5px 0;
    > li{
        background-color: #f1f1f1;
        color: #555;
        /*font-weight: bold;*/
        padding: 2px 5px;
        font-size: 12px;
        border-radius: var(--border-radius);
        
        gap: 5px;
        display: flex;
        flex-direction: row;
        align-items: center;
    }
}

article.PayRuns section.Command > ol.commandlayout input[type='button'][disabled], 
div.valueHolder > section.Command > ol.commandlayout input[type='button'][disabled]{
    cursor: not-allowed;   
}

div.valueHolder > section.Command[disabled] > ol.commandlayout input[type='button']{
    background-color: #eeeeee;
    border: thin solid #eeeeee;
    color: #666;
    display: inline-block;
    cursor: default;
    margin-left: 4px;
    margin-right: 4px;
    padding: 3px 6px;
    cursor: not-allowed;
}

img.dragable.profilePicture{
  cursor: pointer;
  border-radius: 50%;
  width: 70px;
  height: 70px;
}

main.appLogin .userPasswordInfo li .processCommandAction {
    cursor: pointer;
    background: #0c4b6a;
    color: #ffffff;
    /* text-transform: uppercase; */
    width: 100%;
    border: none;
    /* width: auto !important; */
    /*padding: 0 15px !important;*/
    margin: 0px;
    text-align: center;
}

.hover-chart-item{
    opacity: 0.5;
}

/*My coompany hierarchy preview needs to be full height*/
section.TaskTableUsageRecap[table_key="HIERARCHY_PREVIEW"] > div.recapListContent{
    height: 100%;
}

/* Hierarchy Tile Views Should Not Be Scrollable/Show Scrollbars - mw 7/9/2024 */
article.TaskTableUsageTileHandler > article.TTUReport > section.hierarchyViewPort{
    overflow: hidden;
}

section.hierarchyViewPort{
    overflow: auto;
    position: relative;
    height: 100%;
    &.zoomed-out{
        overflow: hidden;
    }
    > article.HierarchyView{
        position: absolute;
        height: 100%;
        width: 100%;
        > svg{
            height: 100%;
            width: 100%;
        }
    }
}

li.Question.is-required > header{
    font-size: 14px;
    width: fit-content;
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    
    &:after{
        content:" *";
        color: red;
        font-size: 20px;
        line-height: 20px;
    }
}   

main.appLogin .userPasswordInfo .taskAction {
    /* padding-top: 15px; */
    margin-top: 20px;
    padding-left: 8px;
    /* color: #939597; */
    /* font-size: 8pt; */
    font-size: 10px;
    text-decoration: underline;
    cursor: pointer;
}

main.appLogin div.language, main.appLogin div.accessibility {
    margin: 4px;
}
main.appLogin div.language a {
    margin: 0 3px;
}
main.appLogin a {
    color: #505253;
}
main.appLogin .userPasswordInfo li.footer {
    padding-top: 16px;
    /* color: #939597; */
    color: #4A4F4F !important;
    font-size: 10px;
}
main.appLogin .userPasswordInfo li.footer a#privacyPolicy {
    text-decoration: underline;
}
/**** end of LOG IN ****/

div.valueHolder.promptAbove.required > label{
  color: red;
}

div.valueHolder:has(div.required[domain="FILE"]) input[type="file"],
div.valueHolder[required]  input[type="file"],
li.columnHolder[required]  input[type="file"],
input.required,
input.requiredInstance,
textarea.required,
/*li[required="required"] input:not([type="button"]),*/
textarea.requiredInstance{
  border: 1px solid var(--product-red) !important;
}

table.ttuList.matrix tr > td input.lovAvailable {
    background-color: transparent;
    background-image: unset;
}

table:is(.ttuList) tr > td input.lovAvailable {
  background-image: unset;
}
table:is(.ttuList) tr > td input.lovAvailable:focus {
  background-image: url(images/dropdown64.png);
  padding-right: 15px;
  transition: padding-right 0.3s ease-in-out;
  /*text-indent: 2px;*/
  /*Added to make sure drop down is visible for Workforce > Scheduling > Work Schedules > Schedule - 11/21/2023 mw*/
}
input.lovAvailable:not([readonly]){
  background-image: url(images/dropdown64.png);
  background-size: 18px;
  background-position: right 2px center;
  background-repeat: no-repeat;
}
input.lovAvailable[readonly]:focus{
  background: none;
}
input.lovAvailable[domain="FKIDS"]:focus, input.lovAvailable[domain="XREFS"]:focus, input.lovAvailable[domain="REFS"]:focus, 
input.lovAvailable[domain="TREFS"]:focus{
  /*background-image: url('images/lovDown12x12.png'); Updated to match other dropdowns */ 
  background-image: url(images/dropdown64.png);

}

/*Overrides for tom select */ 

html .ts-wrapper {
    font-size: 12px;
    cursor: pointer;
    width: auto;
    position: relative;
}

html .ts-control {
    cursor: pointer;
    border-radius: var(--border-radius) !important;
    padding: 4px 5px;
    flex-wrap: nowrap;
    font-size: 12px;
    width: fit-content;
}
html .calendarDiv .ts-wrapper {
    flex: 1;
    & .ts-control {
        flex-wrap: nowrap;
        border: none;
    }
    & .ts-dropdown [data-selectable].option {
        min-width: unset;
    }
     & .ts-dropdown {
        max-height: 150px;
        overflow-y: auto;
    }
}

html .ts-control>*[data-value]:first-child {
    padding: 0 6px;
}


html article.TTUReport div.chart-type-options .ts-control>*[data-value]:first-child {
    padding: 1px 2px;
    font-size: 10px;
}
    
html div.person-role-container .ts-control {
    padding: 2px;
    border: none;
    margin-left: 2px;
    position: sticky;
} 
html div.person-role-container .ts-dropdown {
  left: -18px;
}
html .ts-wrapper.single.input-active .ts-control {
    cursor: pointer; 
}

html .ts-control:after {
    content: '';
    background-image: url(images/dropdown64.png);
    background-repeat: no-repeat;
    background-size: 15px 15px;
    align-self: center;
    margin-left: auto;
    margin-right: 5px;
    height: 15px;
    width: 15px;
    transform: rotate(0deg);
    transition: transform 0.3s ease;
}
html .dropdown-active > .ts-control:after {
    transform: rotate(180deg);
}

html .ts-dropdown {
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius);
    border: unset;
    min-width: fit-content;
    width: auto;
    
    background: #fff;
    box-sizing: border-box;
    left: 0;
    margin: .25rem 0 0;
    position: absolute;
    top: 100%;
    z-index: 10;

    max-height: 185px;
    overflow-y: auto;
}

html .ts-dropdown [data-selectable].option.selected {
    color: var(--primary-theme);
}

html .ts-dropdown .ts-dropdown-content{
    display: flex;
    flex-direction: column;
    padding: 5px;
    max-height: unset;
    > [data-selectable].option {
        font-size: 12px;
        padding: 4px 10px;
        
        &.option.has-icon {
            display: flex;
            flex-direction: row;
            gap: 5px;
            align-items: center;
            min-width: unset;
        }
    }
}

.ts-hidden-accessible {
  clip: rect(0 0 0 0) !important;
  border: 0 !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

html .ts-wrapper.has-logout .ts-dropdown [data-selectable] {
    /*margin-block: 0.5rem;*/
}

html .ts-dropdown [data-selectable][data-value="logout"].option {
    border-top: 1.3px solid #dcddde;
    margin-block: 0.5rem;
    padding-top: 0.5rem;
}

ol.listOfValues span.code {
    font-size: smaller;
    color: darkgray;
}

span.ql-picker-options,
.lovInputHolder > ol.listOfValues {
    padding: 5px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);

    list-style: none;
    background-color: white;
    max-height: 200px;
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0px;
    min-width: 150px;
    margin-top: 5px;
    
    display: flex;
    flex-direction: column;
    
    > span.ql-picker-item,
    > li {
        padding: 4px 8px;
        white-space: nowrap;
        margin: 0 !important;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 3px;
        &.keyboardFocus,
        &:hover {
            cursor: pointer;
            text-decoration: underline;
            background-color: unset;
            color: var(--primary-theme);
        } 
    }
}

article.ttu > section.dash > section.data.show-more ~ article.CanDoManagerV2 {
  grid-row: unset;
}

/*CanDo Manager always show after first row of dash items 12/7/2023+*/
article.ttu > section.dash > article.CanDoManagerV2{
    /*grid-row: 2;*/
}

/*TimeSeries Custom Display*/
section.Task[chart-data-type="TIMESERIES"]:not([view_group_item]) section.reportContainer > article.chartDisplay{
    /*grid-row: span 2;*/
}
section.Task[chart-data-type="TIMESERIES"]:not([view_group_item]) section.reportContainer > article.reportDetails{
    /*display: none;*/
}
h1.task{
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: larger;
}

/*Calendar Colour Legend*/
section.calendar-legend{
    order: -1;
    margin-bottom: 1rem;
    height: fit-content;
    > div.multi-select-menu{
        width: fit-content;
    }
}

article.ttu.insertedRow > section.dash > article.TaskTableUsageTileHandler{
  display:none;
}

.Config header.multiples > span.policyDelete {
  background-repeat: no-repeat;
  color: #A9A9A9;
  cursor: pointer;
  display: inline-block;
  height: 16px;
  min-width: 10px;
  padding-right: 0;
  position: absolute;
  right: 0;
  width: 16px;
}

/**** Header ****/
body > header {
    z-index: 100;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background-color: #fff;
    margin: 0px -10px 5px -5px;
    padding: 10px 10px 0px 5px;
    transition: all 0.5s linear;
}

header.topMenuHeader section.companyNavUser{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    /*background-color: #fff;*/
    /*margin: 0px -10px 0px -10px;*/
/*    padding: 10px 10px 0px 10px;*/
    min-height: 60px;
    justify-content: space-between;
}

html div.person-role-container .ts-control>*[data-value]:first-child{
    padding: 0px;
    color: #444444;
    font-size: 13px;
}

html div.person-role-container .ts-control{
    margin-left: 0px;
    margin-top: -3px;
}

div.rowIndexOfTotal{
    margin: 2.5px 5px;
    height: fit-content;
}

header.topMenuHeader section.companyNavUser nav#backButtonNav{
    display: block;
    top: 60px;
    position: fixed;
    padding: 0;
}

section.companyNavUser  > div.companyHome {
    cursor: pointer;
    /* background-image: url("images/myCoLogo200x100.png"); */
}

header.topMenuHeader a {
    text-decoration: none;
}

/*Search*/ 
section.companyNavUser span.searchArea > input.searchInput{
    display: inline-block;
    background-color: transparent;
    margin-top: 0;
    cursor: text;
    width: 200px;
    margin-left: 0.75rem;
    color: #444;
    border: none;
    outline: none;
    box-shadow: none !important;
    border-radius: 15px;
    height: 25px;
    font-size: 13px;
}
input.searchInput:focus::placeholder {
  color: transparent;
}

/*section.companyNavUser span.searchArea > aside.filters{
    display: inline-block;
    height: 25px;
    margin-top: 0px;
    margin-left: 20px;
    top: 50%;
    float: left;
}*/

section.companyNavUser  > span.searchArea[allowed="Y"]{
    display: flex;
    flex-direction: row;
    width: 40vw;
    align-items: center;
    padding: 5px 10px;
    > input{
        width: -webkit-fill-available;
        width: -moz-available;
    }
}

section.companyNavUser span.searchArea > i.filters{
    background-color: #444;
    width: 16px;
    height: 16px;
    padding: 0px;
    display: block;
    cursor: pointer;
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-image: url('images/wzIcons/search-icon.svg');
    mask-image: url('images/wzIcons/search-icon.svg');
}

section.companyNavUser i.pin-it-button{
    background-color: var(--primary-theme);
    width: 26px;
    height: 26px;
    padding: 0px;
    display: block;
    cursor: pointer;
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-image: url('images/wzIcons/pin-icon.svg');
    mask-image: url('images/wzIcons/pin-icon.svg');
    border-radius: 50%;
    &:hover{
        /*background-color: #f2f2f2;*/
    }
}

section.companyNavUser span.searchArea,
span.tableActions > input.searchInput{
    display: inline-block;
    /*border: thin solid #dcddde;*/
    background-color: #f8f8fa;
    border-radius: var(--border-radius);
    height: fit-content;
    padding: 0px 3px;
    height: 25px;
    display: flex;
    flex-flow: row nowrap;
    
    /*    background-image: url(images/searchGrey16x16.jpg);
    background-size: 14px 14px;
    background-repeat: no-repeat;
    background-position: 5px 50%;*/
}
/*End of Search*/

/*USER ACTIONS*/
section.companyNavUser  > div.userActions {
    display: flex;
    flex-direction: row;
    gap: 5px;
    flex-wrap: nowrap;
    align-items: center;
    margin-left: 10vw;
    position: relative;
    
    /*display: none;*/
}
 header section.companyNavUser > div.userActions > span.pinIt{
    background-image: url(images/pinIt888.png);
    background-size: 25px 25px;
    height: 25px;
    width: 25px;
    background-repeat: no-repeat;
    background-color: transparent;
    cursor: pointer;
 }

div.userActions > div.personBlock{
    display: flex;
    flex-direction: column;
    align-items: center;
    
    display: none;
}
div.userActions > div.personBlock span select {
    width: 75px;
    height: 20px;
    font-size: 12px;
    color: #0c4b6a;
    border-radius: var(--border-radius);
    border: none;
    box-shadow: none;
/*    text-align: center;*/
}
div.personBlock span select option{
    color: #888;
}
section.companyNavUser  > div.userActions > article.profileToggleView,
section.companyNavUser  > div.userActions a.profileToggleView {
    cursor: pointer;
    margin-left: 5px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    /* width: fit-content; */
}

section.companyNavUser div.userActions span.selectRole.clicked div.menuBridge{
    display: block;
    position: absolute;
    top: 41px;
    padding: 5px;
    width: auto;
    transform: translate(0%);
    left: 63px;
}
.quickAddsUl:before,
.quickAddsUl:after,
section.companyNavUser span .menuElements:before, 
section.companyNavUser span .menuElements:after {
    content: '';
    position: absolute;
    bottom: 100%;
    width: 0px;
    height: 0;
}
.quickAddsUl:after, li.clicked ul.menuElements:after, 
span.profileToggleView ul.menuElements:after,
div.actionContent ul:first-of-type:after,
span.dateRanges.clicked .menuBridge:after, 
span.dateRanges .menuBridge.mustBeVisible:after, 
span.breakByOptions.clicked .menuBridge:after,
span.breakByOptions .menuBridge.mustBeVisible:after,
section.companyNavUser .menuElements:after {
    transform: translate(-50%, 5%);
    left: 50%;
    border: 10px solid transparent;
    border-bottom-color: #fff;
}

section.companyNavUser .menuElements, 
section.companyNavUser Mobile div.userActions .menuElements {
    font-weight: 400;
    border-radius: var(--border-radius);
    background: #FFFFFF;
    /* border: 1px #BEB9B9 solid; */
    box-shadow: 0 0 5px #d9d9d8;
    /* box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.2); */
}
section.companyNavUser > div.userActions span.selectRole.clicked > div.menuBridge > ul > li:not(.logOut){
    box-shadow: none;
    border: none;
}
span.toggleView > div.menuBridge > ul.menuElements > li.logOut{
        border-top: #999 1px solid;
}
div.menuBridge > ul.menuElements > li.logOut > span.logOut.iconLess{
    background-size: 0px;
    height: auto;
    display: block;
    width: auto;
    padding: 5px 4px;
}

span#logOut.log-out-button,
span.pin-it-button{
    background-image: url(images/pinIt888.png);
    background-size: 32px;
    height: 32px;
    min-width: 32px;
    width: 32px;
    background-repeat: no-repeat;
    background-color: transparent;
}

 section.companyNavUser #userPic{
    height: 35px;
    width: 35px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 3px;
    cursor: pointer;
    > img{
        height: inherit;
        width: inherit;
        background-color: #dcddde;
        border-radius: 50%;
        object-fit: cover;
        cursor: pointer;
    }
}

span#logOut.log-out-button{
    background-image: url("images/logout888.png");
}

section.data{
    height: auto;
    width: auto;
    padding: 15px;
}

article.ttu.noOutline section.data{
    padding: 0px;
}

i.pin-it-button{
    background-color: #444;
    display: block;
    cursor: pointer;
    height: 30px;
    width: 30px;
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-image: url('images/wzIcons/pin-it-icon.svg');
    mask-image: url('images/wzIcons/pin-it-icon.svg');
}

article.ApplicantAssessments > section.dash > section.data > ol.columnGroupLayout > li,
article.ApplicantAssessments > section.dash > section.data{
    grid-column: span 6;
}

div.personBlock > span.toggleView{
  border: none;
  color: #999;
  background: #fff;
  margin: 0px 10px;
    cursor: pointer;
  border-radius: var(--border-radius);
  display: inline-block;
  /* position: absolute; */
  padding: 0px 5px 0px 12px;
  width: max-content;
  /* width: 80px; */
  text-align: center;
  height: 26px;
  line-height: 25px;
  font-size: 12px;
}
div.personBlock > span.toggleView:hover{
     background: #fff;
     color: #999;
     border: none;
}

section.companyNavUser div.userActions span.selectRole.toggleView > div.menuBridge > ul.menuElements{
    padding: 0px;
}

main span.toggleView ul.menuElements > li:not(:empty):not(.logOut).selected{
    background-color: #a7a9ac;
    color: white;
}

main .toggleView.clicked > div.menuBridge li:hover{
    background-color: #f2f2f3;
    color: #444;
}
span.expansionIndicator {
    background-image: url("images/dropdown64.png");
    background-position: center;
    vertical-align: middle;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: 15px 15px;
    width: 20px;
    height: 20px;
    /* margin-left: 5px; */
}
section.companyNavUser div.userActions div.menuBridge {
    position: absolute;
    top: 15px;
    /* background: purple; */
    padding: 5px;
    width: auto;
    transform: translate(33%);
}
span.export .menuBridge, section.companyNavUser .menuBridge, section.companyNavUserMobile span.profileToggleView .menuBridge {
    border: 6px solid transparent;
    /* box-shadow: 0 0 5px #d9d9d8; */
    width: 125%;
    transform: translate(-15%);
    display: none;
}  
/*END USERS ACTIONS*/

/* NavigationInfo & breadcrumbs*/
.topMenuHeader #navigationInfo {
    display: none;
}
nav#backButtonNav{
/*  position: fixed;
  padding: 0;
  top: 56px;*/
    display: none;
}

 /* End of NavigationInfo & breadcrumbs */
 /*navUserMobile*/
 section.companyNavUserMobile {
    display: none;
}
/**** End of Header ****/

/**** Footer ****/
footer#bodyFooter {
    /* position: sticky; */
    padding: 50px 0;
    text-align: center;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 2vh;
    grid-column: span 2;
}
footer#bodyFooter a#workzoomFooter {
    color: #ccc;
}
footer#bodyFooter span#Workzoom {
    font-weight: 700;
    text-transform: uppercase;
}
/**** End of Footer ****/

/**** MAIN ****/
main.worksheet div.workspaceContent {
    position: relative;
    color: #444;
    width: 100%;
    height: 100%;
    margin-right: -3px;
    
    /*try on remove if breaking things... mw*/
    display: flex;
    flex-direction: column;
}

h2.requestedChanges {
    text-align: right;
    font-style: italic;
    font-weight: 400;
    display: none;
}

/**** Recap Lists ****/
header.tableHeader span.tableActions > div.record-status-options,
header.tableHeader span.tableActions > div > select,
header.tableHeader span.tableActions  > span.searchArea {
    /*box-shadow: var(--box-shadow);*/
}

ol.statistic-container {
    display: flex;
    justify-content: space-around;
    max-height: 300px;
    > li{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 10px;      
        margin-bottom: 20px;
        > span.stat-value{
            font-size: 30px;
        }
        > span.stat-prompt{
            font-size: 16px;
            color: #555;
            font-weight: bold;
        }
    }
}

h2.requestedChanges {
    text-align: right;
    font-style: italic;
    font-weight: 400;
    display: none;
}

.fc .fc-button{
    padding: 1px 3px;
}

/* Sticky Header */ 
    /*Custom Heading Heights For Specific Recaps - Processing > Pay > Pay Entries*/
    main > div.workspaceContent section[table_key="PPY_PR"] > div.recapListContent > table.sticky:not(.calendar) thead{
        top: 130px;
    }
    section.stickyHeaderHolder[table_key="PVE_EDIT_PPY"]{
        > header{
            top: 92px;
        }
        > div.recapListContent > table.ttuList.sticky:not(.calendar) thead{
            top: 145px;
        }
    }

.stickyHeaderHolder > header {
    position: sticky;
    z-index: 10;
    /*gap: 10px;*/
    display: flex;
    top: 68px;
    background-color: white;
}
header.tableHeader:has(div.dropdown-active) {
    z-index: 11;
}

article.ttu > header.dashTitle ~ section.dash > .stickyHeaderHolder > header {
    /*not sure what this is here for, messed up paystub CanDo in EE SS - mw 11/14/2023*/
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

article.ttu > header.dashTitle ~ section.dash > [table_key="PVE_EDIT_BPR"].stickyHeaderHolder{
    > header{                               
        top: 95px;  
    }
    > div.recapListContent > table > thead{ 
        top: 155px; 
    }
} 

article.stickyHeaderHolder.noTile.ttu > header.dashTitle {
  /*z-index: 1;*/
}

.ApplicantAssessments.stickyHeaderHolder > header {
    padding: 0 20px;
    margin: 0 -20px;
}

li.depth-2 a.menu-item-text:hover{
    border-radius: var(--border-radius);
}

[mpath='TCIACT_TODO_ALL'] > section.dash > section > ol.columnGroupLayout {
  box-shadow: none;
}

section[mtitle='details'] > section.TaskTableUsageRecap {
  margin: 20px 0px;
}

section[mtitle='details'] > section.TaskTableUsageRecap.noRows {
  display:none;
}

section[mtitle='details'] > section.TaskTableUsageRecap.noRows.canAdd{
  display:block;
}

main div article.TaskTableUsage section.TaskTableUsageRecap.noView{
  display:none;
}

div.summaryStats div.containerDiv {
  margin:auto;
  width:100%;
}


div.takenAvailable span.valueSpan {
  font-size: 24px;
  color:#005C51;
}

div.balanceBox span.days,
div.takenAvailable span.days {
  color: #444;
}

div.cdHeaderItems{
    height: 275px;
}

main.appLogin div.logo{
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 200px;
    height: 275px;
    margin-top: auto;
}

/* Media query for 1410px */
@media screen and (max-width: 1410px) {
    div.PplTimeOffBalances div.leaveTypesDiv ol.timeOffTypes {
        grid-template-columns: repeat(2, minmax(300px, 1fr));
        > li.timeOffBalance {
            grid-column: span 1 !important;
            &.odd-last{
                grid-column: span 2 !important;
            }
        }
    }
}

li.timeOffBalance {
    grid-column: span 3;
    display: flex;
    flex-direction: column;
    gap: 20px; 
    border-radius: 7px;
    padding: 15px;

    > h4.title-heading {
        color: #444;
        font-size: 16px;
        font-weight: bold;
        grid-column: -1/1;
        text-align: center;
    }
    > section.time-balance{
        border: 4px solid;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        text-transform: lowercase;

        > span{
            &.value-span{
                font-size: 25px;
                font-weight: bold;
            }
            &.value-basis{
                color: #555;
                font-weight: normal;
                font-size: 14px;
            }
        }
    }
    > div.summary-stats{
        font-size: 14px;
        font-weight: normal;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 0 5vw;
        gap: 2px;
        > div{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            gap: 5px;
            &.prompting{
                > span.valueSpan.WARN{
                    color: #d8a82f !important;
                }
                > span.valueSpan.STOP{
                    color: var(--product-red) !important;
                }
            }
            > span.promptSpan{
                font-weight: normal;
                color: #555;
            }
            > span.valueSpan{
                color: #444;
            }
        }
    }
    &:nth-child(3n+1){
        > section.time-balance{
            border-color: #064a69; 
            > .value-span {   
                color: #064a69;        
            }
        }
        > div.summary-stats > div.amount > span.valueSpan{
            color: #064a69;
        }
    } 
    &:nth-child(3n+2){
        > section.time-balance{
            border-color: #0b72b9; 
            > .value-span {   
                color: #0b72b9;        
            }
        }
        > div.summary-stats > div.amount > span.valueSpan{
            color: #0b72b9;
        }
    }
    &:nth-child(3n+3){
        > section.time-balance{
            border-color: #22aae1; 
            > .value-span {   
                color: #22aae1;        
            }
        }
        > div.summary-stats > div.amount > span.valueSpan{
            color: #22aae1;
        }
    }
}

/* ** SLIDES ** */

.slider .slideIndicator {
  flex: 1 0 100%;
  cursor: default;
}

.slider .slideIndicator span {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid #d9d9d8;
  margin: 5px;
  cursor: pointer;
}

.slider.scrolledRight .slideIndicator span.slideRight,
.slider:not(.scrolledRight) .slideIndicator span.slideLeft {
  background-color: #60b157;
  cursor: pointer;
}

.slider.scrolledRight .slideIndicator span.slideLeft,
.slider:not(.scrolledRight) .slideIndicator span.slideRight {
  background-color: #d9d9d8;
  cursor: pointer;
}

.slides::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}

div.slide > div.titleDiv {
    margin-top: auto;
    text-align: center;
    font-weight: bold;
    font-size: 13px;
    color: #444;
}

table.ttuList,
table.recap {
/*    width: 99%;
    border-collapse: collapse;
    color: #444;
    background-color: #fff;
    border-radius: var(--border-radius);*/
    /*box-shadow: var(--box-shadow);*/
    width: 100%;
    width: -moz-available;
    width: -webkit-fill-available;
    /*width: 99%;*/
/*    margin-left: 5px;
    margin-right: 5px; */   
    /*margin: 5px;*/
}

section.TaskTableUsageRecap div.recapListContent ol.recapList{
    display: flex;
    flex-direction: column;
    gap: 15px;
    > li{
        section.data{
            padding: 0px;
        }
    }
}

/*Make All ToDos Column Groups Sections Span Full Width Aislin's Request- MW 10/11/2023*/
article.TaskTableUsage.ttu.todo section.dash > section.data{
    grid-column: -1/1;
}
section.summary.noTile.ttu > header.hide-repeating-header,
article.stickyHeaderHolder.noTile.ttu > header.dashTitle.hide-repeating-header{
    display: none;
}


body article.resume-preview-container{
    display: flex;
    flex-direction: column;   
    width: fit-content;
    overflow: auto;
    max-height: 792px;
    transition: max-height 0.2s ease-out;       
    canvas {
        background: white;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        margin: 1rem 2px;
        display: block;
        border-radius: var(--border-radius);
        padding: 0;
    }
}

/*Recap List Content*/      

div.recapListContent > ol.recapList > li,
div.tableListScroller > ol.recapList > li{
    color: #444;
    background-color: #fff;
    border-radius: var(--border-radius);
    outline: 1px solid #dcddde;
    padding: 15px;
    
    /*box-shadow: var(--box-shadow);*/
    /*margin: 10px*/
}
div.tableListScroller > ol.recapList.taskPreview  > li{
    height: auto;
    width: auto;
    min-height: 300px;
    max-height: 500px;
    overflow: auto;
    &;hover
}

div.tableListScroller > ol.recapList.taskPreview  > li > article.TTUReport.pending{
  min-height: 300px;
}

div.recapListContent > input.searchInput{
    padding: 2px;
    padding-left: 25px;
    margin: 0px;
    margin-bottom: 5px;
    
    width: auto;
    min-width: 150px;
    
    background-image: url(images/searchGrey16x16.jpg);
    background-size: 14px 14px;
    background-repeat: no-repeat;
    background-position: 5px 50%;
}
ol.recapList{
    /*margin-top: 10px;*/
}

[table_key='PWA_DIR'] > div.recapListContent > ol.recapList,
[table_key='PWA_DIR'] > div.recapListContent > div > div.tableListScroller > ol.recapList {
  display: flex;
  flex-wrap: wrap;
  box-shadow: none;
}

[table_key='PWA_DIR'] > div.recapListContent > ol.recapList > li,
[table_key='PWA_DIR'] > div.recapListContent > div > div.tableListScroller > ol.recapList > li {
  box-shadow: none;
  padding: 0px;
  width: 200px;
}

article.ttu[table_key='PWA_DIR'] > section.dash > section.data {
  box-shadow: none;
}

article.TaskTableUsage[table_key='PWA_DIR'] > header.dashTitle,
article.TaskTableUsage[table_key='PWA_DIR'] > header {
  display: none;
}


/*section.scrollSensitive div.recapListContent table.sticky > thead {
    position: sticky;
    top: 120px;
}*/

main > div.workspaceContent table.sticky thead th:last-child {
    border-top-right-radius: 10px;

}
main > div.workspaceContent table.sticky thead th:first-child {
    border-top-left-radius: 10px;
}

/*setting recaplist sticky head height*/
section[view_mode="recap"] > div.recapListContent > table.sticky > thead{
    /*top: 150px;*/
    /*making the personnel header stick in the right spot, most recent mw 6/7/2023 personnel list*/
}
section[view_mode="recap"][table_key="PWA"] > div.recapListContent > table.sticky > thead,
section[view_mode="recap"][table_key="PLV_LEAVE_ORG"] > div.recapListContent > table.sticky > thead,
section[view_mode="recap"][table_key="PCP_TC"] > div.recapListContent > table.sticky > thead,
section[view_mode="recap"][table_key="PWAXXXX_HW"] > div.recapListContent > table.sticky > thead,
section[view_mode="recap"][table_key="PCM_TL_CERT"] > div.recapListContent > table.sticky > thead,
section[view_mode="recap"][table_key="BPR_PR"] > div.recapListContent > table.sticky > thead,
section table.ttuList.sticky.tableLayout > thead{
    top: 134px;
}
section[view_mode="recap"][table_key="PRV_TM"] > div.recapListContent > table.sticky > thead{
    top: 125px;
}

/*if sso is present it should show, also footer should always show, not get displayed none mw 8/17/2023*/
main.appLogin div.userPasswordInfo ul.layout > li.footer,
main.appLogin div.userPasswordInfo ul.layout > li.sso{
    display: block !important;
}


th.emptyColumn,td.emptyColumn{
  display: none;
}

main > div.workspaceContent section[table-alias="PVE"] table.sticky thead{
    top: 125px;
}

main div.recapListContent > table.ttuList.sticky table thead,
main > div.workspaceContent table.sticky thead{
    position: sticky;
    top: 130px;  
    z-index: 1;
    background-color: white;
    box-shadow: none;
    border: none;
}

main td > div.popupHolder > div.calendarDiv[calendar_type='CALENDAR'] > table.calendar > thead{
    top: 0px !important;
}

div.recapListContent {
    /*height: 100%;*/
    position: relative;
    z-index: 0;
}
main div.recapListContent > table.ttuList.sticky thead {
    top: 150px;
}

main section.TaskTableUsageRecap div.recapListContent > table.ttuList.sticky thead {
    top: 120px;
}

div.groupBy,
span.layoutChoices,
span.scheduleLayoutChoices {
    display: flex;
    flex-direction: row;
    gap: 2px 10px;
    align-items: end;
    flex-wrap: wrap;
    > label{
        display: flex;
        align-items: center;
        font-size: 14px;
        font-weight: normal;
        color: #555;
        > input{
          margin: 4px;
        }
        cursor: pointer;
    }
}
    
/*article.tab > section.dash > article.TaskTableUsageTileHandler{
    grid-row: span 2;
}*/

article.TTUReport > h6.reportTitle{
    font-size: 14px;
    text-align: center;
}

html div.person-role-container .ts-control:after{
    margin-right: 0px;
    margin-left: 5px;
    background-size: 14px;
}
span#person.person-name{
    font-size: 14px;
    font-weight: bold;
    text-wrap: nowrap;
    z-index: 2;
    margin: -1px 0px;
    padding-left: 2px;
}

/*article.TaskTableUsageTileHandler > table {
  width: 100%;
}*/

/*basic table layout*/
section.ttu table.recap{
    width: -moz-available;
    width: -webkit-fill-available;
}
div.recapListContent table.ttuList{
    /*Must be fixed to fit screen width - mw 5/2/2024*/
    table-layout: fixed;
    /*table-layout: auto;*/
    width: 100%;
    td{
        max-width: 0;
    }
}
/*Full Calendar Tables*/
.fc .fc-scrollgrid, .fc .fc-scrollgrid table{
    table-layout: fixed !important;
    width: 100%;
}

.fc-daygrid-event,
.fc-daygrid-block-event .fc-event-time, 
.fc-daygrid-block-event .fc-event-title{
    padding: 0 2px;
}
a.fc-event{
    &.drillDownAware:hover{
        outline: 1px solid;
    }
}

.fc .fc-col-header-cell-cushion{
    color: #666;
    font-size: 12px;
    padding: 0;
    text-transform: capitalize;
    /*letter-spacing: 1px;*/
}

/*Timeseries Hover State*/

article.drillDownAware.TaskTableUsageTileHandler,
article.drillDownAware.TTUReport{
    section.time-series-chart .fc td.fc-daygrid-day.has-events:hover {
        cursor: pointer;
        background-color: #eaeaea;
        box-shadow: inset 0 0 2px rgba(0,0,0,0.2);
    }
}

/*Calendar Shift Styling*/
a.fc-daygrid-event.fc-event-end.Shift, 
a.fc-daygrid-event.fc-event-start.Shift{
    margin-right: 2px;
    display: grid;
    align-items: flex-start;
    grid-template-columns: auto 1fr;
    align-items: center;
    /*background-color: #e9f6fc;*/
    background-color: #E5EBED;
    padding: 2px;
    color: #444;
    /*border: 1px solid var(--fc-event-border-color);*/
    overflow: hidden;
    > div.fc-event-title{
        grid-column: -1/1;
        text-wrap: pretty;
        font-size: normal;
    }
    .fc-event-main{
        color: #444;
    }
}
    
/* Compact Calendar Styling  7/15/2024 - MW*/
.compact-calendar{
    /*Mini Calendar Design*/
    &.fc .fc-scroller-liquid-absolute{
        overflow: hidden !important;
    }
    &.fc .fc-toolbar-title{
        font-size: 12px;
    }
    &.fc > .fc-header-toolbar{
        margin-bottom: 0.25rem;
    }
    &.fc .fc-daygrid-body-natural .fc-daygrid-day-events{
        margin-bottom: 0px;
    }
    &.fc .fc-toolbar-chunk .fc-button{
        padding: 0px 10px;
        font-size: 10px;
    }
    &.fc .fc-day-disabled{
        display: table-cell;
        height: 10px;
        height: 20px;
        /*background: white;*/
        > *,
        .fc-daygrid-day-events,
        .fc-daygrid-day-top{
            height: 0px;
        }
    }
    .fc-x-button{
        border: none;
    }
    &.fc .fc-daygrid-day-number{
        font-size: 12px;
        line-height: 12px;
    }
    .fc .fc-col-header-cell-cushion{
        padding: 0px;
    }
    &.fc-theme-standard .fc-scrollgrid,
    &.fc-theme-standard td, 
    &.fc-theme-standard th,
    &.fc tr{
        /*border: none !important;*/
    }
    &.fc .fc-daygrid-day.fc-day-today{
        border-radius: var(--border-radius);
    }
    &.fc .fc-event-title{
        font-size: 10px;
    }
}

.fc-event-title { 
    font-size: 11px;
}

/*if overflow is not set right for the full calendar events... they will not overflow into their days as they should... huge issue! mw - 11/26/2023*/
table td.fc-day{
    overflow: inherit !important;
}

article.TaskTableUsageTileHandler > table.column-entry-table{
  height: -webkit-fill-available;
  max-height: -webkit-fit-content; /* MA - 2024/01/16 For Safari, whenever the stylesheet updates fill available size grows max needed to prevent*/
}

article.reportDetails table > thead{
    background-color: white;
}
    
/*General Table Styling*/
table{
    border-collapse: collapse;
    color: #444;
    background-color: #fff;
    background-color: transparent;
    border-radius: var(--border-radius);
    width: 100%;
    display: table;
    table-layout: auto;
    &.column-entry-table{
        table-layout: fixed;
    }
    > thead{
        background-color: white;
        background-color: transparent;
        box-shadow: none;
        border: none;
        display: table-header-group;
        > tr{
            /*box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);*/
            > th[cn="Status"]{
                padding: 0px;
                margin: 0px;
            }
            > th{
                padding: 4px;
                color: #888888;
                text-transform: uppercase;
                text-align: left;
                font-size: 12px;
                font-style: normal;
                font-weight: normal;
            }
        }  
    }
    > tbody > tr{
        display: table-row;
        border-bottom: 1px solid #dcddde;
        > td{
            /*feels better to hide with ellipsis than have overflow into next td - mw 11/11/2023*/ 
            text-overflow: ellipsis;
            
            font-size: 12px;
            display: table-cell;
            white-space: normal;            
            padding: 4px;
        }
        > td:not(.calendar-holder) {
          overflow: hidden;
        }
        td.calendar-holder {
          position: relative;
        }
        > td.emptyColumn{
            display: none;
        }
    }
    
}

html .ts-control{
    display: flex;
    white-space: nowrap;
    color: #444;
    border: 1px solid #cccccb;
}

/*Custom Styling For Location Tables*/
article.TaskTableUsageTileHandler.BwsLocationRecap table.column-entry-table{
    > thead{
        display: none;
    }
    > tbody{
        display: grid;
        grid-template-columns: repeat(auto-fit, 110px);
        gap: 20px;
        justify-content: center;
        
        > tr{
            background-color: white;          
            > td[cn="RECORD_STATUS"]{
                display: none;
            }
        }
    }
}

/*Handling Col Entry Tables On Smaller Screens*/
@media screen and (max-width: 1300px) {
    table.column-entry-table tbody > tr > td{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
}
/*article.ttu.full-height section.dash{
    height: 100%;
}*/

article.ttuListTile{
    overflow: hidden;
    /*set like this for now ideally we dont have as many columns in the table so there is no need for side scroll mw 5252023*/
}

article.ttu:not(.noOutline) > section.dash > section.details > ol.columnGroupLayout{
    box-shadow:var(--box-shadow);
    border-radius: var(--border-radius);
    height: auto;
    
    /*padding: 10px;*/
    /*margin: 0px 0px 10px 0px;*/
}

table.column-entry-table tbody tr td span[clmn="RECORD_STATUS"]{
    font-size: 0px;
    background-size: 11px;
    height: 11px;
    width: 11px;
    background-position: center;
    background-repeat: no-repeat;
    border: 0;
    display: inline-table;
    vertical-align: middle;
}

span.completedText {
  display: block;
  text-align: center;
  font-size: 16px;
  padding: 20px;
}

article.child-of-SUMMARY  > section.dash > section.data > ol.columnGroupLayout{
    box-shadow: none;
}

html body main section > article.ttu.TaskTableUsage.noHeader > header.dashTitle{
    display: none;
}

article.drilledDown > section.drillDown > article.ttu > header.dashTitle{
    /*display: none;*/
}
/*up down arrow*/
table.recap > thead > tr > th.sortable {
    position: relative;
    min-height: 20px;
}
table.recap > thead > tr > th.sortable::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
    margin-left: 8px;
    height: 13px;
    width: 13px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(images/sortUpDown.png);
}
/*Arrow down*/
table.recap > thead > tr > th.sortable.desc::after {
    background-image: url(images/sortDown.png);
}
/*Arrow Up*/
table.recap > thead > tr > th.sortable.asc::after {
    background-image: url(images/sortUp.png);
}

table.recap th.rsHeader {
    width: 15px;
}
table.recap > thead > tr > th {
    padding: 2px;
    padding-top: 4px;
    padding-right: 15px;
    padding-bottom: 4px;
}
div.recapListContent  thead th {
    min-height: 30px;
}
/*div.recapListContent {
    height: 80vh;
    overflow-y: auto;
}*/

table.recap th:hover {
    cursor: pointer;
    text-decoration: underline;
}

table.recap th{
    color: #888888;
    text-transform: uppercase; 
    text-align: left;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    width: 180px;
}

div.export-select .ts-dropdown{
    left: unset;
    right: 0;
}

/*section.recapListLayout th[domain="DATESTAMP"] {
    max-width: 125px;
}

table > thead th[domain="DATESTAMP"] {
    width: 80px;
}*/

table.previewTable > tbody > tr:nth-child(odd),
section.recapListLayout > div.tableHolderDiv > div.recapListContent > table > tbody > tr:nth-child(odd), 
section.recapListLayout > div.recapListContent > table > tbody > tr:nth-child(odd) {
    background-color: #f6f6f6;
}
table.previewTable > tbody > tr:nth-child(even), section.recapListLayout > div.recapListContent > table > tbody > tr:nth-child(even) {
    background-color: #fdfdfd;
}
main div.recapListContent > table > tbody > tr:first-child {
    margin-top: 5px;
    padding-top: 15px;
}
main div.recapListContent > table > tbody > tr td.rsHeader, th.rsHeader {
    width: 2px;
    padding: 0px;
    margin: 0px;
    border-right: 0px;
}
table.recap > tbody > tr > td:hover {
    cursor: pointer;
}
table.recap > tbody > tr >  td {
    /* padding: 2px 10px 2px 2px; */
    padding: 2px 2px 2px 8px;
    font-size: 12px;
    overflow: hidden;
    align-items: center;
}
main div.recapListContent  table.recap > tbody > tr {
    padding-left: 10px;
    padding-right: 10px;
    height: 40px;
}
table.recap td {
    overflow-x: hidden;
    min-height: 27px;
}
table.recap td[data-th="Timesheets"],
table.recap td[data-th="Job Applications"] {
    height: auto;
}

section.ttu.recapListLayout > header > span.tableActions > input.searchInput{
    padding-left: 25px;
    margin-left: 0px;
    outline: solid 1px #cccccb;
    border-radius: var(--border-radius);
    cursor: text;
}

ol.recapList > li > article.child-of-SUMMARY > header{
    display: none;
}

section.TaskTableUsageRecap:not([mtitle="Policies"]):not([mtitle="Departments Costing"]) table.recap > tbody > tr > td > div.roundStatusImage.toggleable-status{
    outline: 3px solid #cccccb;
    border-radius: 50px;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
    transform: scale(1);
    height: 18px;
    width: 18px;
    display: block;
}

header.recordRecap > div.roundStatusImage,
/*not sure why we have the not statement for the below statement :not([mtitle="Policies"]):not([mtitle="Departments Costing"]) - mw 10/13/2023*/
div.roundStatusImage {
    background-size: 11px;
    height: 12px;
    width: 12px;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    position: relative;
    vertical-align: middle;
    margin: 0px;
}
div.roundStatusImage[rs="A"],
article.ttuListTile tr > td[status="A"],
li[rs="A"] div.roundStatusImage,
td > span[clmn="RECORD_STATUS"][value="A"],
main.worksheet tr[rs="A"] > td > div.roundStatusImage,
main.worksheet li[rs="A"] > td > div.roundStatusImage{
    background-image: url(images/recordStatusActive24.png);
}

div.roundStatusImage[rs="I"],
article.ttuListTile tr > td[status="I"],
li[rs="I"] div.roundStatusImage,
td > span[clmn="RECORD_STATUS"][value="I"],
div.roundStatusImage[rs="I"],
main.worksheet tr[rs="I"] > td > div.roundStatusImage,
main.worksheet li[rs="I"] > td > div.roundStatusImage{
background-image: url(images/recordStatusInactive24.png);
}

div.roundStatusImage[rs="X"],
article.ttuListTile tr > td[status="X"],
li[rs="X"] div.roundStatusImage,
td > span[clmn="RECORD_STATUS"][value="X"],
main.worksheet tr[rs="X"] > td > div.roundStatusImage,
main.worksheet li[rs="X"] > td > div.roundStatusImage{
    background-image: url(images/recordStatusCancelled24.png);
}

div.roundStatusImage[rs="C"],
article.ttuListTile tr > td[status="C"],
li[rs="C"] div.roundStatusImage,
td > span[clmn="RECORD_STATUS"][value="C"],
main.worksheet tr[rs="C"] > td > div.roundStatusImage,
main.worksheet li[rs="C"] > td > div.roundStatusImage{
    background-image: url(images/recordStatusClosed24.png);
}

div.roundStatusImage[rs="W"],
article.ttuListTile tr > td[status="W"],
li[rs="W"] div.roundStatusImage,
td > span[clmn="RECORD_STATUS"][value="W"],
main.worksheet tr[rs="W"] > td > div.roundStatusImage,
main.worksheet li[rs="W"] > td > div.roundStatusImage{
    background-image: url(images/recordStatusWithdrawn24.png);
}

div.roundStatusImage[rs="D"],
article.ttuListTile tr > td[status="D"],
li[rs="D"] div.roundStatusImage,
td > span[clmn="RECORD_STATUS"][value="D"],
main.worksheet tr[rs="D"] > td > div.roundStatusImage,
main.worksheet li[rs="D"] > td > div.roundStatusImage{
    background-image: url(images/recordStatusDenied24.png);
}

div.roundStatusImage[rs="E"],
article.ttuListTile tr > td[status="E"],
li[rs="E"] div.roundStatusImage,
td > span[clmn="RECORD_STATUS"][value="E"],
    main.worksheet tr[rs="E"] > td > div.roundStatusImage,
        main.worksheet li[rs="E"] > td > div.roundStatusImage{
    background-image: url(images/recordStatusError24.png);
}

div.roundStatusImage[rs="P"],
article.ttuListTile tr > td[status="P"],
li[rs="P"] div.roundStatusImage,
td > span[clmn="RECORD_STATUS"][value="P"],
    main.worksheet tr[rs="P"] > td > div.roundStatusImage,
        main.worksheet li[rs="P"] > td > div.roundStatusImage{
    background-image: url(images/recordStatusPending24.png);
}
/*div.tableLayoutParent tr[rs="P"]{
  border-left: #FBAF3F solid 2px;
}
div.tableLayoutParent tr[rs="I"]{
  border-left: #CCCCCC solid 2px;
}
div.tableLayoutParent tr[rs="C"]{
  border-left: black solid 2px;
}
div.tableLayoutParent tr[rs="X"]{
  border-left: #EB0000 solid 2px;
}
div.tableLayoutParent tr[rs="W"]{
  border-left: darkgray solid 2px;
}
div.tableLayoutParent tr[rs="D"]{
  border-left: #eb000094 solid 2px;
}*/

li[rs] div.roundStatusImage{
    background-size: 12px;
    height: 15px;
    width: 15px;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    padding: 0px;
    margin: 2px;
}

article.ttuListTile tr > td[status]{
    background-size: 12px;
    height: 40px;
    width: 15px;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    padding: 0px;
    margin: 2px auto;
}

span.enddate-warning-message{
    color: #FF0000;
    font-size: 10px;
}

.event-hover-tooltip{
    position: absolute;
    font-size: 10px;
    padding: 4px 2px;
    border-radius: 3px;
    display: block;
    color: #666;
    outline: #cccccb solid thin;
    z-index: 10;
    background-color: white;
}
.event-hover-tooltip::before{
    top: -9px;
    transform: translate(-50%);
    left: 20%;
    border: 5px solid transparent;
    border-bottom-color: #d9d9d8;
    content: '';
    position: absolute;
    bottom: 100%;
    width: 0;
    height: 0;
}

div.roundActiveStatusImage{
    background-image: url(images/recordStatusActive24.png);
}

div.roundPendingStatusImage{
    background-image: url(images/recordStatusPendingd24.png);
}

div.roundClosedStatusImage{
    background-image: url(images/recordStatusClosed24.png);
}

div.roundPendingStatusImage{
    background-image: url(images/recordStatusPending24.png);
}

div.roundDeniedStatusImage{
    background-image: url(images/recordStatusDenied24.png);
}

div.roundWithdrawnStatusImage{
    background-image: url(images/recordStatusWithdrawn24.png);
}

div.roundCancelledImage{
    background-image: url(images/recordStatusCancelled24.png);
}
div.roundErrorImage{
    background-image: url(images/recordStatusError24.png);
}


main.worksheet tbody tr:in([rs="I"],[rs="C"],[rs="W"],[rs="D"],[rs="E"],[rs="P"]){
    color: #999;
}
main.worksheet tbody tr[rs="X"],
main.worksheet table.ttuList.tableLayout tbody tr[rs="X"] > td > div > input{
    color: var(--product-red) !important;
}

main.worksheet table.ttuList.tableLayout tbody tr > td > textarea {
  width: 90%;
}

/**** End of Recap Lists ****/

/**** Drill Downs ****/
article.expanded {
    background-color: transparent;
}
.rs.Active, article.TaskTableUsage[rs="A"] > header > span.recordStatus {
    /* color: #B1ca38; */
    background-image: url(images/recordStatusActive24.png);
}
header > span.scrollContext {
    display: none;
}
article:not(.tab) > header > div.actions{
    /*display: none; AW this was making actions not visible on screens like TXCRS_COLUMNS*/
}
article.TaskTableUsage.detail header div.actions > div.actionContent {
    display: flex;
    justify-content: flex-end;
    line-height: 20px;
    position: relative;
}
article.TaskTableUsage.detail.insertedRow > header, 
article.TaskTableUsage.detail.insertedRow div.actions > div.actionContent {
  display: none;
}
header div.actions > div > div.actionLabel {
    z-index: 0;
    height: 20px;
    margin: 2px 5px;
    padding: 3px 7px;
    font-size: 12px;
    top: 0px;
    right: 0px;
    position: relative;
    display: inline-block;
    cursor: pointer;
    /* z-index: 999999; */
    background-image: url("images/downArrowBranded12x12.png");
    background-repeat: no-repeat;
    background-position: right 7px;
    border: 1px #888888 solid;
    border-radius: var(--border-radius);
    background: #fff;
    color: #888888;
}

/*Menu Bridge*/
header.worksheetMenu > div.actions > div.actionContent > div.menuBridge{
    display: block;
}
article.TaskTableUsage header div.actions div.menuBridge {
    display: none;
    top: 37px;
    position: absolute;
    right: 0;
    color: #333333;
    width: fit-content;
    transform: translate(-50%);
    left: 50%;    
}
article.TaskTableUsage header div.actions div.menuBridge > ul {
    background-color: white;
    box-shadow: 0 0 5px #d9d9d8;
    border-radius: var(--border-radius);
    padding: 5px;
    padding-top: 0px;
    margin: 0 -3px;
}
div.actionContent ul:first-of-type:before, div.actionContent ul:first-of-type:after {
    /*left: 75%;*/
    /*creating weird of centered placement of arrow on the actions button product wide mw 5/25/2023*/
}
.quickAddsUl:before, 
span.profileToggleView ul.menuElements:before,
li.clicked:not(.mobileTopMenu) ul.menuElements:before, 
span.dateRanges.clicked .menuBridge:before, span.dateRanges .menuBridge.mustBeVisible:before,
span.breakByOptions.clicked .menuBridge:before, span.breakByOptions .menuBridge.mustBeVisible:before, 
header div.actionContent ul:first-of-type:before {
    transform: translate(-50%);
    left: 50%;
    border: 10px solid transparent;
    border-bottom-color: #d9d9d8;
}
span.dateRanges.clicked .menuBridge:before, 
span.dateRanges.clicked .menuBridge:after, 
span.breakByOptions.clicked .menuBridge:before, 
span.breakByOptions.clicked .menuBridge:after,
span.dateRanges .menuBridge.mustBeVisible:before,
span.dateRanges .menuBridge.mustBeVisible:after, span.breakByOptions .menuBridge.mustBeVisible:before,
span.breakByOptions .menuBridge.mustBeVisible:after,
header div.actionContent ul:first-of-type:before, 
header div.actionContent ul:first-of-type:after,
li.clicked ul.menuElements:before, li.clicked ul.menuElements:after, 
div.quickAddDiv ul.quickAddsUl:before, 
div.quickAddDiv ul.quickAddsUl:after {
    content: '';
    position: absolute;
    bottom: 100%;
    width: 0;
    height: 0;
}

article.TaskTableUsage header div.actions  ul > li {
    list-style-position: inside;
    font-size: 11px;
    cursor: pointer;
    font-weight: 400;
    text-align: center;
    padding: 4px;
    white-space: nowrap;
    min-width: 100px;
}

div#reportStage.reportStage{
    font-size: 12px;
    color: #888;
    height: 20px;
}
div#reportStage.reportStage.hide{
    font-size: 0px;
    display: block;
}

header.column-banner.short-banner > div.primary-banner{
    height: 40px;
}

/*Candidate Experience, Hiding Side Menu, Role Select*/
body.candidate-user > header > section.companyNavUser > span.searchArea,
body.candidate-user nav.sideMenu li.depth-0 > section > ul.child-table-list{
    display: none;
}
body.side-menu-active.candidate-user > main#curosWorksheet{  
    margin-left: 40px;
}
 /*..*/
 

header.column-banner h1,
header.column-banner h2,
header.column-banner h3{
    text-align: center;
    width: fit-content;
    margin: auto;
    color: #666;
    font-size: 13px;
}
header.column-banner h1.cb-primary-header{
    color: var(--primary-theme);
    font-size: 14px;
}

/**** End Of header actions ****/

body main article.ttu > section.dash > article.more:not(.empty){
    display: grid;
    gap: 5px;
    grid-template-columns: repeat(auto-fill, minmax(150px,1fr));
    grid-auto-rows: min-content;
    border-radius: var(--border-radius);
    /*box-shadow: var(--box-shadow);*/
    box-shadow: var(--tile-box-shadow);
    outline: 1px solid #dcddde;
    padding: 15px;
}

/**** Details ****/
ol.columnGroupLayout > li:not(.fullWidth),
ol.columnGroupLayout section.ColumnGroupSet ol.columnGroupLayout > section {
    -moz-box-orient: vertical;
    display: inline-block;
    vertical-align: top;
    word-wrap: break-word;
    height: fit-content;
    /*padding: 10px;*/
    /* width: 100%; */
}
section.dash > article.ttu.noOutline{
  padding: 0px;
  box-shadow: none;
  /*For moving Can-Do Moving Date looks weird without padding mw 8/8/2023*/
}

/*noOverview can be assigned to TTU Tasks that need to hide that title*/
article.ttu.noOverview > section.dash > section.data > h3.column-group-header{
    display: none;
}

fieldset.columnGroup h4.comm-status,
fieldset.columnGroup > legend{
    padding-left: 0;
    font-weight: 700;
    width: 100%;
    color: #555;
    font-size: 14px;
    margin-bottom: 1rem;
    
/*    padding-bottom: 10px;
    font-size: 12px 
    letter-spacing: 1px;
    text-transform: uppercase;*/
}

section.data > ol.columnGroupLayout{
    gap: 3rem;
}

article.ttu[mpath="TWPWA_WL_CAL"] > section.dash{
/*    box-shadow: var(--box-shadow);
    border-radius: 7px;
    padding: 0px 10px 10px 10px;*/
}

ol.layout.columnLayout{
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

div.Field > div.valueHolder:not(.promptAbove),
li:not([isphoto="Y"]) > div[use-native-input="true"].valueHolder:has(.custom-file-input),
ol.columnLayout > li label.valueHolder,
ol.columnLayout > li div.valueHolder {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: 1fr 1.5fr;
    justify-content: space-between;
    width: 100%;

/*    grid-template-columns: 1fr;*/
}

/*article.TaskTableUsage[mpath='TTPRV_CAREER_GOALS'] section.TaskTableUsageRecap ol.recapList > li.expanded{
    padding: 20px;
    box-shadow: var(--box-shadow);
    margin: 0px 0px 20px 0px;
    border-radius: var(--border-radius);
}*/

/**** Policies ****/ 
div.Config.biz {
/*    margin-top: 10px;
    padding-top: 10px;
    padding-bottom: 10px;*/
}

div.policySection {
    grid-column: -1/1;
    /*Taken out for now, causing more issues than benefit - MW 5/2/2024*/
    /*overflow: hidden;*/
    &.widgetHolder,
    &:has([calendar_type]) {
      overflow: unset;
    }
}

section.drillDown > article.TaskTableUsage:not(.drilledDown).ActionItems > header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
article.ActionItems > header > h2 > span.ttu-title-text{
    margin-left: 65px;
}

.Config div.Field {
    color: #606060;
    margin-bottom: 10px;
}

div.policySection div.valueHolder.promptAbove,
div.PolicyComponent div.valueHolder.promptAbove,
div.Logic div.valueHolder.promptAbove,
article.AllSubjects\/Workflows div.Config[config_class='Policy'] div.valueHolder.promptAbove {
    flex-direction: column;
}

.wmd-button-row {
    position: relative;
    margin: 0px;
    padding: 0px;
    height: 24px;
}

.wmd-button {
    width: 20px;
    height: 20px;
    padding-left: 2px;
    padding-right: 3px;
    position: absolute;
    display: inline-block;
    list-style: none;
    cursor: pointer;
}

.wmd-button>span {
    background-image: url("images/wmd-buttons.png");
    background-repeat: no-repeat;
    background-position: 0px 0px;
    width: 20px;
    height: 20px;
    display: inline-block;
}

ul.dataItems.collapsible li:empty {
    display: none;
}

.wmd-spacer1 {
    left: 50px;
}

.wmd-spacer2 {
    left: 175px;
}

.wmd-spacer {
    width: 1px;
    height: 20px;
    margin-left: 14px;
    position: absolute;
    background-color: Silver;
    display: inline-block;
    list-style: none;
}

div.wmd-preview {
    display: none;
}

input[domain="CONDITION"] {
    /*background-image: url("images/viewpointTodo16x16.png");*/
    background-position: right center;
    background-repeat: no-repeat;
}

div.valueHolder>input,
div.Field div.valueHolder>div[domain="FILE"],
div.valueHolder>div.popupHolder>input.lovAvailable {
    display: inline-block;
    position: relative;
}
div.Field div.valueHolder>div[domain="FILE"] {
    padding-left: 2rem;
}
div.valueHolder>div.popupHolder>input {
    width: 100%;
    width: -moz-available;
    width: -webkit-fill-available;
}

.Config ol.choices {
    margin-bottom: 6px;
}

.Config ol.choices>li {
    /*background-color: #FFFFFF;*/
    list-style: none outside none;
    padding-left: 20px;
    position: relative;
}

.Config ol.choices>li>header {
    min-height: 20px;
    padding-top: 4px;
}

.Config ol.choices>li.Choice>header>input {
    left: 0;
    position: absolute;
    /*top: 2px;*/
}

.Config li.Choice>header>label {
    padding-left: 5px;
    color: #444;
}

.Config ol.choices>li.Choice.contentHidden>header>span.contentToggle {
    background-image: url("images/arrowRight11x11Grey.png");
}

.Config ol.choices>li.Choice>header>span.contentToggle {
    background-image: url("images/arrowDown11x11Grey.png");
    background-repeat: no-repeat;
    cursor: pointer;
    display: inline-block;
    height: 11px;
    margin-right: 5px;
    min-width: 0;
    position: initial;
    width: 11px;
}

header span.contentToggle {
    text-decoration: underline;
    cursor: pointer;
    font-weight: 400;
    /*position: absolute;*/
    order: -1;
    right: 0;
}

.Config ol.choices>li.Choice.contentHidden>div {
    display: none;
}

.Config div.Field {
    color: #606060;
    margin-bottom: 10px;
}

.Config div.Field>header {
    font-weight: 400;
    margin-top: 5px;
    margin-bottom: 5px;
    position: relative;
}

.Config div.Field.multiples {
    margin-top: 5px;
    position: relative;
    > header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        &.policy-heading{
            position: sticky;
            top: 115px;
            z-index: 2;
            padding: 10px 0;
            background-color: white;
        }   
    }
}

.Config div.PolicyComponent{
    /*padding: 15px 0;*/
    > header {
        margin-bottom: 10px;
        color: #444;
        letter-spacing: 1px;
        text-transform: uppercase;
        font-size: 12px;
        font-weight: 700;
    }
}
/*section[name='Evaluate Policy'] {
    padding: 20px 20px 0 20px;
}*/

section.Command {
    margin-bottom: 10px;
}

.Config ol.multiplesContent {
    list-style: none;
    margin-bottom: 5px;
    display: flex;
    flex-direction: column;
    /*gap: 10px;*/
}
/*AW20231106 do not show when the table CVT on TOFCS = no add and not searched */
span.empty-state{
    display: none;
    
    background-image: url(images/wzIcons/noData500.png);
    background-size: 300px;
    height: 300px;
    width: 300px;
    padding-top: 300px;
    display: block;
    background-repeat: no-repeat;
    background-color: transparent;
    background-position: top center;
    margin: auto;
    
    text-align: center;
    font-size: 15px;
    color: #cccccb;
}
/* updated condition, in the case of noTiles that have no data, no way to add, and no search filters in, they should be hidden - mw 11/8/2023*/
section.TaskTableUsageRecap.noTile[rowcount="0"][add_allowed="N"][has_search_filter="N"]:not([is_searched="Y"]) > span.empty-state,
section.TaskTableUsageRecap.noTile[rowcount="0"][add_allowed="N"][has_search_filter="N"]:not([is_searched="Y"]) > header{
    display: block;
}
section.TaskTableUsageRecap.noTile[rowcount="0"][add_allowed="N"][has_search_filter="N"]:not([is_searched="Y"]) {
    display: none;
}
section.TaskTableUsageRecap[add_allowed="N"] > header.tableHeader a[action="ADD"] {
  display: none;
}

section.TaskTableUsageRecap:after[rowcount="0"][add_allowed="N"][has_search_filter="N"]:not([is_searched="Y"]){
    background-size: 400px;
    height: 175px;
    width: 175px;
    display: block;
    background-repeat: no-repeat;
    background-color: transparent;
    background-position: center;
    margin: auto;
    border-radius: 500px;
    background-image: url(images/emptyBin.png);
}
div.multiples[rowcount="0"] ol.noRowsFound {
    display: block;
    margin-bottom: 5px;
}

section.Command span.version {
    display: none;
}

section.notes[add_allowed=N][rowcount="0"] {
    display: none;
}

div.multiples[rowcount="0"] ol.noRowsFound+section.addHolder {
    position: absolute;
    top: 0;
    right: 0;
}

header > h2.recapH2{
    display: flex;
    flex-direction: row;
    gap: 10px;
    
    /*Not needed anymore, was for no tile recap list - MW 12/9/2024 */
    /*margin-left: 25px;*/
    
    > span.summary-title{
        font-size: 14px;
        font-weight: bold;
        color: #555;
        > span.record-code{
            font-size: 14px;
            font-weight: normal;
            color: #666;
            margin: 0 2px;
        }  
    }
    > span.desc{
        font-size: 14px;
    }
    span.delete{
        margin-top: 2px;
    }
} 

span.tableActions>span[action],
span.policyAdd {
    cursor: pointer;
    display: inline-block;
    margin-left: 8px;
    padding: 2px 6px;
    vertical-align: top;
    padding-bottom: 3px;
    background-color: #FFFFFF;
    border: thin solid #A9A9A9;
    color: #A9A9A9;
    white-space: nowrap;
}

span.policyAdd {
    position: absolute;
    right: 0px;
    top: -7px;
}


main div.Config div.Field.multiCheckList div[domain]>label {
    width: 200px;
    display: inline-flex;
    flex-direction: row;
    gap: 5px;
    > input{
        margin: 0px;
    }
    vertical-align: top;
    text-indent: 1px;
}
main div.Config div.Field.multiCheckList div[domain]>label > input {
  float: left;
}

div.policySection div.valueHolder.promptAbove,
div.PolicyComponent div.valueHolder.promptAbove,
div.Logic div.valueHolder.promptAbove,
article.AllSubjects\/Workflows div.Config[config_class='Policy'] div.valueHolder.promptAbove {
    flex-direction: column;
}

section.ttu.hideEvaluatePolicy > div.policySection section#EVALUATE_BPA_PLCY,
article.ttu.hideEvaluatePolicy > div.policySection section#EVALUATE_BPA_PLCY{
    display: none;
    padding: 0;
    margin: 0;
}
/*Save, Cancel, & Add Button Styling*/

/*h3.transitions a,*/
/*main section.TaskTableUsageRecap > header > span.tableActions > a[action],*/

/*h3.transitions a.save-button,*/
section.ActivityTransition > a.transition.APPROVE{
    background-color: var(--product-green);
    border-color:  var(--product-green);
    color: #FFF;
    &:hover{
        background-color: #4bcb5a !important; /* A slightly darker shade of green for the hover effect */
    }
}

div#commandArea,
div#supportCommandArea{
    > div{
        display: flex;
        flex-direction: column;
        gap: 2px;
        > span{
            font-size: 12px;
            color: #555;
            font-weight: bold;
        }
    }
    > section > div{
        font-size: 12px;
        color: #555;
        font-weight: bold;
    }
}

body main fieldset.columnGroup input[invalidated],
body main div input[invalidated],
body main table.ttuList td > input[invalidated] {
    background-image: url("images/invalidField15x15.png");
    background-position: right center;
    background-repeat: no-repeat;
    border: 1px solid;
    border-color: var(--product-red) !important;
    color: var(--product-red) !important;
}

/**** End Of Policies ****/ 
/*:not([required])*/
.displayModeO {
    display: none;
}
ol.columnLayout > li {
    flex: 1;
    /*margin-bottom: 5px;*/
}

span.remaining-row-count{
/*    color: #666;
    font-weight: bold;
    text-transform: capitalize;
    width: fit-content;
    font-size: 11px;
    margin: auto;
    margin-top: 5px;
    padding: 3px 5px;
    &:hover {
        cursor: pointer;
        text-decoration: underline;
        border-radius: var(--border-radius);
        background-color: var(--hover-background);
    }*/
}

fieldset.columnGroup label {
    color: #444;
}

div.Field > label > input, 
div.Field > label > div.lovInputHolder input, 
textArea, div.Field > div > div.dateHolder input,
div.valueHolder > div.popupHolder > input.lovAvailable:not([readonly]:not(.requi#EB0000)) {
    font-size: inherit; 
    padding-right: 20px;
    border: 1px #cccccb solid;
    border-radius: var(--border-radius);
    &:not([requested]){
        color: #444;
    }
}

/* For when shifts get cancelled, white bg looks weird */
div.cancelled-shift input{
    background-color: transparent;
}

div > input, 
div.Matrix td > input,
table.ttuList.tableLayout input,
table:not(.ttuList) input,
span[domain=GLSEGS] > input {
    /*background-color: transparent;*/
    
    background-color: #fff;
    color: #444;
    padding: 3px 0;
    text-indent: 5px; 
    border: 1px solid #cccccb;
    width: auto;
    border-radius: var(--border-radius);
}

/*Custom subtle outline for table layouts - MW 5/2/2024*/
body table.ttuList.tableLayout td{
    padding: 2px;
    input{
        border-color: #f2f2f2;
    }
}

div.recapListContent.tableLayoutParent table.ttuList.tableLayout input {
    &:focus-visible{
        border: medium none;
        outline: none;
    }
    &[readonly='readonly']{
        width: 100%;
        background-color: transparent;
        border: 0.5px solid #f2f2f2;
        cursor: auto;
    }
}

td.delete > div.tableRowActions{
    text-align: center;
    cursor: pointer;
    padding: 2px;
}

.pictureCard {
    min-height: 330px;
    min-width: 200px;
    background-color: white;
    outline: 1px solid #cccccb;
    border-radius: var(--border-radius);
    margin: 8px;
    padding: 15px;
    display: flex;
    align-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: default;
    flex: 1;
    > img:first-child {
        cursor: default;
        border-radius: 50%;
        height: 100px;
        width: 100px;
        object-fit: cover;
    }
}
.pictureCard > OL{
  margin: 20px 0 0 0;
  height: 140px;
  text-align: center;
  width: 100%;
}

li[name="ADDL"] > fieldset.columnGroup >  ol.columnLayout{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 10px;
}

ol.columnGroupLayout > fieldset.columnGroup{
    padding: 10px;
}

div.valueHolder > div.popupHolder > input {
    width: 100%;
    width: -moz-available;
    width: -webkit-fill-available;
}

div.popupHolder{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

div.promptAbove.valueHolder > textArea {
    /*width: 98%;*/
    grid-column-start: 2;
    width: -webkit-fill-available;
    width: -moz-available;
    min-height: 50px;
    border: 1px #dcddde solid;
    padding: 5px;
    resize: vertical;
    &:focus-visible{
        outline: none;
        box-shadow: var(--box-shadow);
    }
}
ol.columnLayout > li div.valueHolder.promptAbove {
    display: grid;
    /*Turning off for now... use case seems more narrow - mw 12/11/2023*/
    /*overflow: auto;*/
}

ol.columnLayout > li[name="JSON_EVENT_POLICY"] div.valueHolder {
  overflow: unset;
}

ol > li.columnHolder div.valueHolder:has(label:empty){
    grid-template-columns: none;
}

input[domain="DATESTAMP"]:focus {
    /*background-image: url('images/lovCalendar14x14.png');*/
    background-size: 12px;
    background-image: url('images/calendarDropdown64.png');
    background-position: center right 3px;
    background-repeat: no-repeat;
}

/*main.worksheet div.attchmentButton > span, 
section.notes span.attchmentButton{
div.valueHolder div.attchmentButton > div.preview{
    background-image: url('images/addAttachmentGrey12x12.png'); 
    background-position: 5px; 
    color: #444; 
    background-repeat: no-repeat; 
    margin-top: 10px;
    padding-left: 20px; 
    display: inline-block; 
    border: thin #0c4968 solid; 
    color: #0c4968;
    cursor: pointer;
    border-radius: 15px; 
    padding-right: 4px; 
}*/
a.dashTile, article.dashTile {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    
    width: 100%;
    height: auto;
    /*min-height: 250px;*/
    
    color: #444;
    
    margin: auto;
    /*padding: 5px;*/

    /*cursor: pointer;*/
    overflow: hidden;
}
/*calender popup*/
div.popupHolder > div.datePicker[id='inputPopup'] {
    z-index: 20;
}

article.ttu.calendar-popup{
    z-index: 20;
}

/* Fix for conflicting z-index when calendar is open */
body:has(#inputPopup:not([style*="display: none"])) section.dash header.dashTitle {
  z-index: unset !important;
}


div.calendarDiv.datePicker {
    top: 25px;
    position: absolute;
    margin-left: 0;
    margin-top: 0;
    height: auto;
    width: 220px;
    background: none repeat scroll 0 0 #ffffff;
    border-radius: var(--border-radius);
    box-shadow: var(--tile-box-shadow);
    outline: 1px solid #f2f2f2;
    list-style: none;
    text-indent: 4px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 10px;
    margin: 0px;
    z-index: 2;
    
    /*transform: translateX(-50%);*/
    /*left: 50%;*/
    
    /*margin-top: 7px;*/

    > table.calendar{
        cursor: auto;
        width: 100%;
        table-layout: fixed;
        > thead{
            > tr{
                > td.dayOfWeek{         
                    font-weight: bold;
                    white-space: nowrap;
                    text-align: center;
                }
            }
        }
        > tbody{
            > tr{
                border: none;
                > td{
                    cursor: pointer;
                    font-size: 12px;
                    text-align: center;
                    padding: 6px;
                    background-color: #FFF;
                    transition: color 0.5s ease;
                    transition: background-color 0.25s ease;
                    border-radius: 50%;

                    > a{
                        color: #555;
                    }

                    /* All Hover & Background Effects */
                    &.otherMonth{ 
                        border-radius: unset;
                        background-color: #f2f2f2; 
                    }
                    &.current{
                        background-color: var(--primary-theme);
                        border-radius: 50%;
                        > a{
                            color: #FFF;
                        }
                    }
                    &:not(.current):not(.otherMonth):hover{
                        background-color: var(--action-theme);
                        > a{
                            color: #FFF;
                        }
                    }
                }
            }
        }
    }
}

div.dateLine {
    text-align: center;
    display: flex;
    flex-direction: row;
    gap: 0.25rem;
    justify-content: space-between;
    align-items: center;
    
    margin-bottom: 5px;
    > select{
        border: none;
        cursor: pointer;
        font-weight: bold;
        align-self: center;
        color: #555;
        font-size: 13px;
    }
    > div.clearAll{
        display: none;
    }
    > img {
        padding: 3px;
        width: 15px;
        height: 15px;
        cursor: pointer;
        border-radius: 50%;
        &:hover{
            transform: scale(1.1);
            background-color: #f2f2f2;
        }
        &.previous-button{
        transform: rotate(90deg);
        }
        &.next-button{
            transform: rotate(-90deg);
        }
    }
}

.ui-sortable-handle {
  cursor: grab;
  user-select: none;
  transition: background-color 0.2s ease;
}

.ui-sortable-handle:active {
  cursor: grabbing;
}

/*Hide CanDos in ToDo Items - mw 12/24/2023*/
/*AW 20241121 - needed for more than TTPRV_INIT - like TPBPR - let's not build them in the first place if they are not needed or use css_class
article.ttu.todo:not([mpath='TTPRV_INIT']) article.CanDoManagerV2{
    display: none;
}

article.ttu.todo article.CanDoManagerV2 li:not([task='TASK-TTPRV_ASSIGN_PEER_REVIEW']) {
  display:none;
}
*/
header.recordRecap{
    cursor: pointer;
}

table.calendar {
    width: 100%;
    cursor: pointer;
}
main div.popupHolder td.date {
    cursor: pointer;
}
/*end of calendaer pop up*/
span.instruction:not([error]) {
    color: #666666;
    /* display: none; */
    font-size: 11px;
    font-style: italic;
    font-weight: 400;
    margin-right: 5px;
    padding-bottom: 3px;
    right: 0px;
    text-align: right;
    align-self: baseline;
    /* margin: 10px 5px 0 0; */
}
.hideSaveCancelText {
    display: none;
}

span.completedText,
div.savedDiv, 
div.resumeMessageDiv {
    justify-content: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    background-color: #e9f1dc;
    color: var(--product-green);
    width: 100%;
    font-size: 16px;
    margin: 10px auto;
    border-radius: 8px;
    padding: 5px 10px;
    z-index: 2;
    opacity: 0.95;
    display: flex;
    flex-direction: row;
}
div.savedDiv > div.savedImage, 
div.resumeMessageDiv > div.resumeMessageSuccessfulImage {
    background-image: url("images/uploadOk16x16.png");
    background-position: center;
    background-repeat: no-repeat;
    height: 16px;
    width: 16px;
    padding: 10px;
    display: block;
    margin: auto 0;
}
div.savedDiv > div.savedText,
div.resumeMessageDiv > div.resumeMessageText {
    text-align: center;
    font-size: 16px;
    margin: auto 0;
}


article.TaskTableUsage > aside:empty {
    /*display: none;*/
    margin: 0;
}

h2.requestedChanges,
div.dateHolder > input[requested="Process"],
label.valueHolder input[requested], 
div.valueHolder input[requested="Process"],
textarea[requested="Process"], 
div.Matrix td input[requested="Process"], 
span.changedValue {
    color: #02590f;
}
/**** End of Details form ****/


/* Overwrite the default to keep the scrollbar always visible */
.scrollable { 
  cursor: auto; 
}

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
    height: 10px;
    cursor: pointer;
    }

*:hover::-webkit-scrollbar {
    width: 7px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: #a7a9ac;
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

html body > header.topMenuHeader {
  container-name: headerContainer;
  container-type: inline-size;
}

html.visual-release body > header{
    height: auto;
    /*margin: 0;*/
    min-height: 60px;
/*   overflow-x: clip;*/ /* Fixes horizontal scroll on firefox */
}

input[type="file"]:not([use-native="true"]){
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}
label:empty + input[type="file"][use-native="true"] {
  grid-column: span 2;
}

input[type="file"][use-native="true"] {
    border: none;
    color: #444;
    padding: 0;
}

input[type="file"][invalidated]{
  border:  1px solid #FF0000;
}

input[type="file"][use-native="true"]::file-selector-button {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="%23444"><path stroke-linecap="round" stroke-linejoin="round" d="M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-7.81 7.81a1.5 1.5 0 002.112 2.13" /></svg>');
  background-repeat: no-repeat;
  background-position: 5px center;
  background-size: 18px 18px;
  background-color: var(--background);
  padding-right: 0.4em;
  padding-left: 2em;
  padding-block: 0.4em;
  /*border: 2px solid #6c5ce7;*/
  border: 0.5px #cccccb solid;
  border-radius: 0.2em;
  min-width: 9em;
  color: #444;

}
input[type="file"][use-native="true"].drag-over,
input[type="file"][use-native="true"]:focus {
  outline: 2px dashed #cccccb;
}
input[type="file"][use-native="true"]::file-selector-button:hover {
  background-color: var(--hover-background);
  cursor: pointer;
}

li[isphoto="Y"] div.attchmentButton[domain="FILE"] {
  grid-row: 2;
}

div.valueHolder > input[type="file"][use-native="true"] ~ div.attchmentButton[domain="FILE"] > span,
li.columnHolder > div > input[type="file"][use-native="true"] ~ div.attchmentButton[domain="FILE"] > span {
  display: none;
}

/* Hide the file input if the .preview div is visible */
td[isfile="Y"]:has(.preview:not([style*="display: none"])) .custom-file-input:not([multiple]),
div[use-native-input="true"].valueHolder:has(.preview:not([style*="display: none"])) .custom-file-input:not([multiple]) {
  display: none;
}

/* Show the file input if the .preview div is hidden */
div[use-native-input="true"].valueHolder:has(.preview[style*="display: none"]) .custom-file-input:not([multiple]) {
  display: block;
}

div[use-native-input="true"] ~ label.custom-file-label {
  display: none;
}
valueHolder[readonly="readonly"] ol.columnGroupLayout div.preview > span.delete {
  display: none;
}

div.attchmentButton > div.preview > span.delete,
ol.columnGroupLayout div.preview > span.delete {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="%23444"><path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" /></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  background-color: var(--background);
  width: 16px;
  height: 16px;
  border: none;
  display: block;
}

div.attchmentButton > div.preview > span.delete:hover,
ol.columnGroupLayout div.preview > span.delete:hover {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="%23e34b65"><path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" /></svg>');
  cursor: pointer;
  font-weight: bold;
}
ol.columnLayout > li div.valueHolder.promptAbove[use-native-input="true"] > label {
  /*align-self: center;*/
}
ol.columnLayout > li div.valueHolder.promptAbove[use-native-input="true"] {
  overflow: unset;
}
ol.columnLayout > li:not([isphoto="Y"]) div.valueHolder.promptAbove[use-native-input="true"] {
  /*grid-template-columns: 1fr 2fr;*/

}
ol.columnLayout > li div.valueHolder.promptAbove[use-native-input="true"] + div.attchmentButton {
  grid-column: span 2;
}

ol.columnGroupLayout > li[name="ADDL"].wide-layout {
  grid-column: span 4;
}

ol.columnGroupLayout > li[name="ADDL"].wide-layout > fieldset.columnGroup >  ol.columnLayout {
  display: grid;
  grid-template-columns: 1fr 1fr;
}


label.custom-file-label{
    font-size: 14px;
    font-weight: lighter;
    color: #444;
    cursor: pointer;
}
label.custom-file-label:hover{
    text-decoration: underline;
    color: var(--primary-theme);
}

html.visual-release body.cdBody > nav{
  grid-row: span 2;
}
section.bullpen{
  display:none;
}
article.reportDetails div.DataList{
    max-height: 100%;
    font-size: 14px;
    overflow: auto;
    overflow-x: auto;
}

article.reportDetails div.DataList::-webkit-scrollbar,
aside.resultsFilter ul.detailList::-webkit-scrollbar{
    display: none;
    /*width: 0px;*/
    /*height: 0px;*/
}

article.reportDetails div.DataList:hover::-webkit-scrollbar,
aside.resultsFilter ul.detailList:hover::-webkit-scrollbar{
    display: block;
    width: 12px;
    height: 20px;
    cursor: pointer;
}

/*Side Menu V2.0 CSS*/
li.HomeDash.noActions{
    visibility: hidden;
}
ul.menuList{
    padding: 0px;
    color: #888;
    font-size: 14px;
    /*box-shadow: 0 0 5px #d9d9d8;*/ 
}
ul.menuList > li{
    /*display: inline;*/
    font-weight: 500;
}
ul.menuList > li.SuiteDash{
    font-weight: 700;
}
li.SuiteDash{
    margin-top: 5px;
}
li.SPDash, li.SuiteDash{
    padding: 3px 3px 3px 0px;
}
ul.SuiteDash{
    margin-bottom: 20px;
}

section.Task[view_group_item] div.toggle-holder,
section.Task:not([view_group_item]) article.chartDisplay[toggle="calendar"] > article.chartWrapper > div.chart,
section.Task:not([view_group_item]) article.chartDisplay[toggle="timeseries"] > article.chartWrapper > section.chart.fc{
    display: none;
}

article.chartWrapper[toggle="timeseries"] >  section.chart.fc,
article.chartWrapper[toggle="calendar"] >  div.chart{
    display: none;
}

article.chartWrapper > section.chart.fc{
    margin: 10px 0;
    overflow-x: auto;
}

article.chartWrapper > div.toggle-holder{
    margin-left: auto;
    width: fit-content;
}

/**** Recap / Report Toggle ****/
div.recap-list-report-toggle {
    margin-left: auto;
    display: flex; 
    align-items: center;
    
    position: absolute;
    top: 0px;
    right: 0px;
}
/* Default/ Generic state */ 


article.ttu[inserted_row]  div.toggle-buttons > button.toggle-settings-button,
article.ttu[inserted_row]  div.toggle-buttons > button.toggle-settings-button{
    display:none;
}


/*Affecting background colour on show states*/
/*article.ttu.show-notes > section.dash > div.toggle-buttons{
    border-color: #E1B93C;
    background-color: #fcf4E5;
}
article.ttu.show-settings > section.dash > div.toggle-buttons{
    border-color: #cccccb;
    background-color: #f5f6f6;
}
article.ttu.show-help > section.dash > div.toggle-buttons{
    border-color: #0b70b7;
    background-color: #f1f8fe;
}*/

/*article.ttu.show-help > section.dash > div.toggle-buttons button.toggle-help-button svg,
article.ttu.show-settings > section.dash > div.toggle-buttons button.toggle-settings-button svg,
article.ttu.show-notes > section.dash > div.toggle-buttons button.toggle-notes-button svg{
    background-color: #666;
    background-color: #444;
}*/

article.ttu.show-help > section.dash > div.toggle-buttons button.toggle-help-button svg{
    background-color: #0b70b7;
    background-color: var(--primary-theme);
}
article.ttu.show-settings > section.dash > div.toggle-buttons button.toggle-settings-button svg{
    background-color: #666;
    background-color: var(--primary-theme);
}
article.ttu.show-notes > section.dash > div.toggle-buttons button.toggle-notes-button svg{
    background-color: #E1B93C;
    background-color: var(--primary-theme);
}
article.ttu.show-audit > section.dash > div.toggle-buttons button.toggle-audit-button svg{
    background-color: #800020;
    background-color: var(--primary-theme);
}

/* Colouring The PopOut Utility Menu When Open */
article.ttu{
    &.show-notes > aside.notes,
    &.show-settings > aside.settings,
    &.show-help > aside.help-text{
        /*border-top-left-radius: 0px !important;*/
    }
/*    &.show-notes > section.dash > div.toggle-buttons{
        border-top: 5px solid #E1B93C;
        padding-top: 1px;
    }
    &.show-settings > section.dash > div.toggle-buttons{
        border-top: 5px solid #999;
        padding-top: 1px;
    }
    &.show-help > section.dash > div.toggle-buttons{
        border-top: 5px solid #0b70b7;
        padding-top: 1px;
    }*/
}

div.toggle-buttons {
    display: flex;
    /*gap: 5px;*/
    align-items: center;
    /*margin-left: 10px;*/
    order: 1;
    
    /*V2 Try On*/
    gap: 0.75rem;
    flex-direction: column;
    position: absolute;
    z-index: 100;
    left: unset !important;
    right: -17px !important;
    /*top: 5rem;*/
    padding: 0.75rem;
    background-color: white;
    
    border-top: 1px solid;
    border-bottom: 1px solid;
    border-left: 1px solid;
    border-right: none;
    border-color: #dcddde;

    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;

    box-shadow: -3px 0 4px -1px rgba(140, 140, 140, 0.15);
    
    cursor: ns-resize;
    
    &:empty{
        display: none;
    }

    > button.toggle-button{
        padding: 0;
        border: none;
        background-color: transparent;
        
        display: flex;
        flex-direction: column;
        justify-content: center;
        > svg.button-icon{
            background-color: #777;
            /*background-color: #adadad;*/
            width: 28px;
            height: 28px;
            padding: 0px;
            margin: 0px;
            display: block;
            cursor: pointer;
            mask-size: cover;
            mask-repeat: no-repeat;
            mask-position: center;
            -webkit-mask-size: cover;
            -webkit-mask-repeat: no-repeat;
            -webkit-mask-position: center;
            &:hover{
                transform: scale(1.05);
                opacity: 0.85;
            }
        }
        > span{
            font-size: 8px;
            text-align: center;
            text-transform: capitalize;
            margin: auto;
            padding: 0;
            display: none !important;
        }
        > svg.button-icon.notes{
            -webkit-mask-image: url(images/notes64.svg);
            mask-image: url(images/notes64.svg);
        }
        > svg.button-icon.settings{
            -webkit-mask-image: url(images/wzIcons/adminSettings64.svg);
            mask-image: url(images/wzIcons/adminSettings64.svg);
        }
        > svg.button-icon.history,
        > svg.button-icon.audit
        {
/*            -webkit-mask-image: url(images/history64.svg);
            mask-image: url(images/history64.svg);*/
            -webkit-mask-image: url(images/history-icon.svg);
            mask-image: url(images/history-icon.svg);
        }
        > svg.button-icon.help{
            -webkit-mask-image: url(images/help64.svg);
            mask-image: url(images/help64.svg);
            
            margin-left: -3px;
        }
    } 
    
/*    > button.toggle-notes-button{
        > svg.button-icon.notes{
            background-color: #E1B93C;
        }
        > span{
            color: #E1B93C;
            display: block !important;
        }
    }
    
    > button.toggle-settings-button{
        > svg.button-icon.settings{
            background-color: #555;
        }
        > span{
            color: #666;
            display: block !important;
        }
    }
    
    > button.toggle-help-button{
        > svg.button-icon.help{
            background-color: #0D71BA;
        }
        > span{
            color: #0D71BA;
            display: block !important;
        }
    } */
}

main section.detailsList{
  li.grouping > h1{
    font-size: larger;
    font-weight: bold;
  }
  li.grouping > ol {
    padding-left: 30px;
  }
}
main li > article.detailsList{
  margin-bottom: 15px;  
 
  span.ttu-title-text{
    /*background-color: lightblue;*/
    font-weight: bold;
    display:  inline-block;
    /*text-decoration: underline;*/
  }
  header.dashTitle{
    margin-bottom: 5px;
  }
  h2.ttu-title {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
  }
  span.drillDown{
    display: block;
    background-image: url(/res/vHabanero/resources/style/images/payrollTransactions64.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 0;
    width: 0;
    padding: 10px;
  }
}

button.report-toggle-button,
button.recap-toggle-button{
    margin: 0 2px;
    padding: 2px 6px;
    display: flex;
    flex-direction: column;
    
    border-radius: var(--border-radius);
    cursor: pointer;
    background-color: white;
    color: #888;
    font-size: 12px;
    font-family: 'proxima-nova';
    border: thin solid white;
    border-bottom: 2px solid #dcddde;
}

button.report-toggle-button:hover,
button.recap-toggle-button:hover{
    background-color: #f8f8f8;
    cursor: pointer;
}

i.report-toggle-img,
i.recap-toggle-img {
  height: 20px;
  width: 20px;
  display: block;
  margin: auto;
  
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: #888;
}

section[view_mode="report"] button.report-toggle-button,
section[view_mode="recap"] button.recap-toggle-button{
    color: var(--action-theme);
    border-bottom: 2px solid var(--action-theme);
}

section[view_mode="report"] button.report-toggle-button > i,
section[view_mode="recap"] button.recap-toggle-button > i{
    background-color: var(--action-theme);
}

section.ttu button.report-toggle-button > i.report-toggle-img {
    -webkit-mask-image: url("images/listTabChart64.svg");
    mask-image: url("images/listTabChart64.svg");
}

section.ttu button.recap-toggle-button > i.recap-toggle-img {
    -webkit-mask-image: url("images/listTabRecap64.svg");
    mask-image: url("images/listTabRecap64.svg");
}

/**** End of Recap / Report Toggle ****/
section.task-table.drilledDown > div.recapListContent,
section.TaskTableUsageRecap.drilledDown > div.tableListFilterAspects,
section.TaskTableUsageRecap.drilledDown > div.recapListContent,
section.task-table.drilledDown > div.tableListFilterAspects,
main > div.workspaceContent section.task-table.drilledDown > header,
main > div.workspaceContent article.TaskTableUsage.drilledDown > header,
section.Task > section.TaskTableUsageRecap.displayGrid.drilledDown > header.tableHeader,
div.recapListReportToggle,
main > div.workspaceContent article.TaskTableUsage.drilledDown > div.recapListReportToggle,
main > div.workspaceContent section.TaskTableUsageRecap.drilledDown > .ReportDashHandler,
main > div.workspaceContent section.TaskTableUsageRecap.drilledDown > .resultsFilter,
main > div.workspaceContent section.TaskTableUsageRecap.drilledDown > .chartDisplay,
main > div.workspaceContent section.TaskTableUsageRecap.drilledDown > .reportDetails,
main > div.workspaceContent section.TaskTableUsageRecap.displayGrid.drilledDown  > section.reportContainer,
main > div.workspaceContent section.Task > section.TaskTableUsageRecap.displayGrid.drilledDown > header.tableHeader > span.toggleView.export,
main > div.workspaceContent section.drillDown > .TaskTableUsageRecap.toggleOff,
main > div.workspaceContent section.drillDown > .TaskTableUsage.toggleOff,
article.TaskTableUsage.drilledDown > ul.tabs,
article.TaskTableUsage.drilledDown > div.tileHolder,
main > div.workspaceContent section.TaskTableUsageRecap.noLayoutFound,
section.TaskTableUsageRecap.drilledDown > header.tableHeader,
article.ttu.drilledDown > section.activityContent
{
  display:none;
}

article.ttu[mpath="TGSURVEY"][table-alias="CTK"] [name="DATA_STRUCTURE"] > .valueHolder {
  margin-bottom: 0px;
}

article.ttu[mpath="TGSURVEY"][table-alias="CTK"] [name="DATA_STRUCTURE"] > .valueHolder > .policySection > [config_class="Policy"] {
  padding-top: 0px;
}

article.ttu[mpath="TGSURVEY"][table-alias="CTK"] div[code="ASSESSMENT_FEATURES"] > header {
      margin-bottom: 10px;
}

article.ttu[mpath="TGSURVEY"][table-alias="CTK"] div[code="ASSESSMENT_FEATURES"] > header > h1 {
  font-size: 14px;
  font-weight: bold;
}

article.ttu[mpath="TGSURVEY"][table-alias="CTK"] div[code="SECTIONS"] > header, 
article.ttu[mpath="TGSURVEY"][table-alias="CTK"] div[code="QUESTIONS"] > header {
  font-size: 14px;
  margin-bottom: 10px;    
  font-weight: bold;
  margin-top: 0px;
}

article.ttu[mpath="TGSURVEY"][table-alias="CTK"] div[code="SECTIONS"] > .addHolder > .policyAdd, 
article.ttu[mpath="TGSURVEY"][table-alias="CTK"] div[code="QUESTIONS"] > .addHolder > .policyAdd {
  top: 10px;
  right: 10px;
}

article.ttu[mpath="TGSURVEY"][table-alias="BAS"] > header {
  display: none;
}

section.drillDown > article.TaskTableUsage:not(.drilledDown) > header:not(.hasIcon){
    display: flex;
    flex-direction: row;
    
    position: sticky;
    justify-content: space-between;
    top: 68px;
    background: white;
    z-index: 16;
    margin: 0px -20px 5px;
    padding: 0px 20px 5px;
    
    margin: 0px -20px 1rem;
    padding: 0px 20px 0px;
}

    article.ttu[inserted_row] > section.dash > section.data > span.show-all-columns,
    article.ttu:not([inserted_row]) > section.dash > section.data > ol.columnGroupLayout:not(.show-all-columns)[visible_group_count="1"] > li:nth-child(n+2),
    article.ttu:not([inserted_row]) > section.dash > section.data > ol.columnGroupLayout:not(.show-all-columns)[visible_group_count="2"] > li:nth-child(n+3),
    article.ttu:not([inserted_row]) > section.dash > section.data > ol.columnGroupLayout:not(.show-all-columns)[visible_group_count="3"] > li:nth-child(n+4),
    article.ttu:not([inserted_row]) > section.dash > section.data > ol.columnGroupLayout:not(.show-all-columns)[visible_group_count="4"] > li:nth-child(n+5),
    article.ttu:not([inserted_row]) > section.dash > section.data > ol.columnGroupLayout:not(.show-all-columns)[visible_group_count="5"] > li:nth-child(n+6),
    article.ttu:not([inserted_row]) > section.dash > section.data > ol.columnGroupLayout:not(.show-all-columns)[visible_group_count="6"] > li:nth-child(n+7),
    article.ttu:not([inserted_row]) > section.dash > section.data > ol.columnGroupLayout:not(.show-all-columns)[visible_group_count="7"] > li:nth-child(n+8),
    article.ttu:not([inserted_row]) > section.dash > section.data > ol.columnGroupLayout:not(.show-all-columns)[visible_group_count="8"] > li:nth-child(n+9){
        display: none !important;
    }
   
/*    ol.columnGroupLayout:not(.show-all-columns) > li:nth-child(-n+4) {
        display: block;
    }*/
    ol.columnGroupLayout li.columnGroup[name="AUDT"],
    article.ttu.insertedRow li.columnGroup[name="AUDT"],
    article.ttu.insertedRow li.columnGroup[name="ACTN"]{
      display:none;
    }    
    
    article.TaskTableUsageTileHandler.report-list > ul.list-preview{
        > li:first-child {
            min-height: 300px;
            article.HierarchyView{
                cursor: pointer !important;
            }      
        }
/*        > li:not(:first-child) {
            display: none;
        }*/
    } 
    
/*    main .showMoreRows{
        display: none; 
        cursor: pointer;
        text-align: center;
        font-variant: small-caps;
        color: #444;
        padding-top: 2px;
        padding-bottom: 2px;
    }*/

    main .showMoreRows,
    span.more-prompt,
    li.more-items,
    span.remaining-row-count,
    span.show-all-columns{
        display: block;
        color: #666;
        font-weight: bold;
        text-transform: capitalize;
        width: fit-content;
        font-size: 12px;
        margin: auto;
        margin-top: 1rem;
        padding: 2px 8px;
        text-decoration: underline;
        &:hover {
            cursor: pointer;
            color: #333;
        }
    }
    
div#breadcrumbs > span.breadcrumb{
    cursor: pointer;
    margin-right: 4px;
}
section.drillDown{
    height: auto;
  /*box-shadow: 0 0 5px #d9d9d9;*/
  /*border-radius: 7px;*/
  /*margin-top: 5px;*/
}

span.weekSelector{
    display: flex;
    flex-direction: row;
    gap: 5px;
    > label{
        font-size: 13px;
        font-weight: normal;
        color: #555;
    }
}

section.dash > article.TaskTableUsageTileHandler > article.TTUReport > div.chart-type-options,
section.TaskTableUsageRecap ol.recapList > li div.chart-type-options{
    height: fit-content;
    width: fit-content;
    margin-right: auto;
}

article.TTUReport,
article.TaskTableUsageTileHandler{
    display: flex;
    flex-direction: column;
    height: 100%;
    > h6.reportTitle{
        order: 0;
    }
    > h5.table-title{
        order: 0;
    }
    > div.chart-type-options{
        order: 1;
    }
    > article.chartWrapper{
        order: 2;
    }
}

/*Statement Styling*/
section.StatementSection {
  margin-top: 10px;
}
section.StatementSection > aside{
  margin-top: 5px;
  margin-bottom : 5px;
  box-shadow: 0 0 5px #d9d9d8;
  padding: 20px;
  border-radius: var(--border-radius);
  font-size: 13px;
  display: inline-block;
  margin: 15px 20px;
  width: 100%;
  width: -moz-available;
  width: -webkit-fill-available;  
}
section.StatementSection > aside:empty{
  display:none;
}
section.StatementSection > article{
  margin: 0 auto; 
  width: 800px;
  margin-top: 10px;
  margin-bottom : 10px;

}
section.StatementSection > article > table{
  width : 100%;
  max-width: 800px;
}
section.StatementSection > article > table th{
  text-align: left;
  font-weight: 700;
}
section.StatementSection > article > table th.title{
  width: 150px;
}
section.StatementSection > article > table th.description{
  width: 250px;
}
section.StatementSection > article > table th.total1{
  width : 100px;
  text-align: right;
}
section.StatementSection > article > table th.total2{
  width : 100px;
  text-align: right;
}
section.StatementSection > article > table th.total3{
  width : 100px;
  text-align: right;
}
table.StatementTable td.amount{
  text-align: right;
}
table.StatementTable td{
  color: #555555;
  vertical-align: top;
}
table.StatementTable{
  table-layout: auto;
  border-collapse: collapse;
  width: 100%;
}
table.StatementTable {
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
}
table.StatementTable th{
  border-top: 1px solid #ddd;
}
table.StatementTable td,table.StatementTable th{
  border-bottom: 1px solid #ddd;
  padding: 5px;

}

div.recapListReportToggle, 
section.drillDown > section.TaskTableUsageRecap > div.recapListReportToggle, 
section.drillDown > div.recapListReportToggle.report.recap {
  display: flex;
  justify-content: end;
  margin-bottom: 8px;
}  

[iact_id] > .details {
  box-shadow: var(--tile-box-shadow);
  outline: thin solid #dcddde;
  padding: 15px;
  border-radius: var(--border-radius);
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
  white-space: pre-wrap;
  
  > .title {
    font-weight: 700;
    color: #555;
    font-size: 14px;
    margin-bottom: 5px;
  }
}

[iact_id] > label.signOff {
    font-size: 12px;
    font-weight: 700;

    outline: thin solid #dcddde;
    background-color: #f2f2f2;
    
/*    outline: 1px solid #0b70b7;
    background-color: #f3fafe;
    margin: 16px 0;*/
    
    margin-bottom: 1rem;
    padding: 15px;
    border-radius: var(--border-radius);
    display: flex;
    gap: 5px;
    align-items: center;  
    width: 100%;
    width: -moz-available;          
    width: -webkit-fill-available; 
    > span{
        display: inline-block;
        font-size: 13px;
    }
}

[iact_id] > label.signOff label.signOff > input[type='checkbox'] {
  transform: scale(1.5, 1.5);
}

[iact_id] > label.signOff label.signOff > span {
  margin-left: 10px;
}

.drilledDown > article.instruction > aside.instructionText,
[iact_id].drilledDown > label.signOff,
[iact_id].drilledDown > article.instruction > article.activityInstructions {
  display: none;  
}

/* For action item and can do instructions */
aside.instructionText,
article.activityInstructions {
    /*Making it so that they always show at the top - mw 9/27/2024*/
    order: -50;
    
    grid-column: -1/1;
    padding: 15px;
    border-radius: var(--border-radius);
    font-size: 14px;
    color: #555;
    display: inline-block;
    width: 100%;
    width: -moz-available;
    width: -webkit-fill-available;
    background-color: #f3fafe;
    outline: 1px solid #0b70b7;
}

body.cdBody > div.navMainContainer{
  display: flex;
  /*width: 100%;*/

}

ul.menuList > li{
    color: #888;
    font-weight: 600;
    cursor: pointer;
}

ul.menuList > li.children > ul > li:not(.children){
   /*color: #444;*/
   font-weight: 800;
}
ul.menuList > li.children > ul > li:not(.children):not(.homeButton) {
   padding-top: 10px;
   padding-bottom: 3px;
}
ul.sideMenu.dataItems.collapsible{
    width: fit-content;
    margin: 0;
}

html.visual-release main.worksheet{
    margin: 0px;
    /*margin-right: 10px;*/
}

/*li.HomeDash.noActions{
    visibility: hidden;
}*/
ul.menuList{
    padding: 0px;
    color: #888;
    font-size: 14px;
    /*box-shadow: 0 0 5px #d9d9d8;*/ 
}
ul.menuList > li.children li.ttu{
    /*display: inline;*/
    font-weight: 500;
}
ul.menuList > li.ttu{
    font-weight: 700;
}
nav.sideMenu li.ttu{
    /*margin-top: 5px;*/
}
nav.sideMenu li.ttu{
    /*padding: 2px 2px 2px 0px;*/
}
nav.sideMenu ul.menuList{
    margin-bottom: 20px;
}

article.ttu.detail.dash:not(.edit) > section.data{
  /*display:none;*/
}

/*No need to display count on CanDo Activities... feels weird    mw - 11/16/2023*/
section.ttu.TaskTableUsageRecap[activity_task] > header > h2 > span.ttu-title-text > span.ttu-title-count,
section.ttu.TaskTableUsageRecap[activity_task] > header >  span.ttuTitle > span.tableRecapCounter{
    display: none;
}

article.ttu.detail.edit > section.dash,
article.ttu.detail.edit > section.more{
  /*display:none;*/
}

article.ttu.drilledDown > footer,
article.ttu.drilledDown:not(.showDashOnDrillDown) > section.dash,
article.ttu.drilledDown > section.more,
article.ttu.drilledDown > aside.com-banner{
  display:none;
}

/*article.ttu:not(.drilledDown) > section.drillDown{
  display:none;
}*/

/*Styling Side Menus Titles*/
li.children > ul > li{
    /*padding-left: 5px;*/
}

/* Adds padding to hover nav */
nav.sideMenu.hover > ul.menuList > li.children > ul > li,
nav.sideMenu.active > ul.menuList > li.children > ul > li{
    padding-left: 5px;
}

nav.sideMenu > ul.menuList > li.children > ul > li.children > ul > li.ttu{
    font-weight: 600;
    padding-top: 10px;
    padding-bottom: 3px;
}
nav.sideMenu > ul.menuList > li.children > ul > li.children > ul > li.children > ul > li.ttu{
    /*font-weight: 600;*/
}
nav.sideMenu > ul.menuList > li.children > ul > li.children > ul > li.children > ul > li.children > ul{
    display: none;
}

/*Creating Tiles, and layout*/

main article.ttu > section.dash > article.TtuDetailsTile{ 
/*    grid-column: span 4;*/
    padding: 0px; 
    /*interior details alr padded no need*/
}

main article.ttu > section.dash > article.TtuDetailsTile > header.detailsHeader > area.companyColourArea{
    display: block;
    height: 100px;
    width: auto;
    background-color: var(--primary-theme);
    border-radius: 5px 5px 0px 0px;
}

main article.ttu > section.dash > article.TtuDetailsTile > header.detailsHeader > article{
    display: flex;
    flex-direction: column;
    position: relative;
    padding-top: 45px;
}
main article.ttu > section.dash > article.TtuDetailsTile > header.detailsHeader > article > img.personImg{
    height: 90px;
    width: 90px;
    position: absolute;
    left: 50%;
    top: -50px;
    transform: translateX(-50%);
    border: 5px solid #fff;
    border-radius: 50%;
    background-color: grey;
}
  

  


main article.ttu > section.dash > article.TtuDetailsTile > header.detailsHeader > article > span{
    margin: 0px auto;
    font-size: 16px;
    font-weight: bold;
}
main article.ttu > section.dash > article.TtuDetailsTile > header.detailsHeader > article > span.personDetailsTitle{
    color: var(--primary-theme);
}

section.ReportDashHandler > ol > li.TTUReport{
  min-height: 270px; /*AW need this to help make sure they are no all visible - need scroll to see report tile preview*/
  max-height: 360px;
}
section.ReportDashHandler > ol > li.TTUReport.time-series-container{
/*  height: auto;
  min-height: 500px;
  max-height: none;
  grid-row: span 2;*/
}


/*profile initials*/
[data-initials]:before {
    background: #999;
    color: white;
    opacity: 1; 
    content: attr(data-initials); 
    display: inline-block; 
    font-weight: bold; 
    border-radius: 50%; 
    vertical-align: middle; 
    /*margin-right: 0.5em;*/ 
    width: 35px; 
    height: 35px; 
    line-height: 35px; 
    text-align: center; 
}

header.column-banner{
    margin-bottom: 15px;
    > img.profile-picture{
        display: block;
        margin: -40px auto 10px;
        object-fit: cover;
        height: 70px;
        width: 70px;
        border: thin solid #CCCCCC;
        overflow: hidden;

        border: 5px solid white;
        border-radius: 500px;
        -webkit-border-radius: 500px;
        -moz-border-radius: 500px;
    }
    > div.primary-banner{
        background-color: var(--primary-theme);
        height: 50px;
        margin: -15px -15px 0px;
        border-top-right-radius: 5px;
        border-top-left-radius: 5px;
    }
    > div.dashboard-image-initials{
        margin-bottom: 45px;
        position: relative;
        &[data-initials]:before{
            margin: -90px auto 10px;
            object-fit: cover;
            height: 70px;
            width: 70px;
            overflow: hidden;
            transform: translateX(-50%);
            left: 50%;
            top: 45px;
            position: absolute;
            border: 5px solid white;
            font-size: 24px;
            line-height: 70px;
        }
    }
} 

.competencies > .skill {
  > .title {
    font-weight: bold;
  }

  > .certificates > .certificate {
    display: flex;
    align-items: center;
    > .completeIcon {
      margin-right: 3px;
    }
  }
}

td > artice.IcaToDo{
    margin: 0;
    > div.todoContainer{
        margin: 0;
        padding: 0;
    }
} 

section.TaskTableUsageRecap > div.recapListContent article.IcaToDo.drillDown.priority0 {
    background-color: #E6F6F5;
}
section.TaskTableUsageRecap > div.recapListContent article.IcaToDo.drillDown.priority1 {
    background-color: #FFF7EB;
}
section.TaskTableUsageRecap > div.recapListContent article.IcaToDo.drillDown.priority2 {
    background-color: #FEEFE9;
}


section.dash > article[mpath="TCICA_EVENT"] header{
    margin: 0;
    margin-bottom: 5px;
    padding: 0;
    
    > h3.transitions{
        margin-left: auto;
    }
} 

section.dash > article[mpath="TCICA_EVENT"] > header > *:not(h3.transitions),  /* made selection more specific as it was preventing the choices from appearing for mass schedule change can dos - if there is another use case than hiding the Event header it will need to be added specifically - mh - 2023-12-12 */
section.dash > article[mpath="TCICA_EVENT"] section[mtitle="details"] > h3,  
section.dash > article[mpath="TCICA_EVENT"].hideEventLogic,
section.dash > article[table_key="ICA_EVENT"].hideEventLogic{
  display: none
}

div.imageHolder{
    display: flex;
    height: fit-content;
    width: fit-content;
}

article.TaskTableUsageTileHandler.drillDownAware:not(.no-tile-outline):hover{
    cursor: pointer;
    outline: 1px solid #bfbfbe !important;
}

article.TaskTableUsageTileHandler.drillDownAware > h5.tableTitle:hover{
    text-decoration: underline;
}
article.more > article.TaskTableUsageTileHandler.drillDownAware > h5.tableTitle:hover{
    text-decoration: none;
}

article.more > article.TaskTableUsageTileHandler.drillDownAware:hover{
    cursor: pointer;
    outline: 1px solid #bfbfbe !important;
    background-color: var(--hover-background);
    border-radius: var(--border-radius);
}

section.dash > article.TaskTableUsageTileHandler:not(.CanDoManager):not(.screentailor-hidden):not(.no-tile-outline):not(.hideEventLogic):not(.empty):not(.tileEmpty):hover{
    cursor: pointer;
    /*background-color: var(--hover-background);*/
}

/*Made It only for tiles*/
div.tileHolder > div.tileHolder,
section.dash > article.TaskTableUsageTileHandler:not(.CanDoManager):not(.screentailor-hidden):not(.RecordHistoryTile):not(.no-tile-outline):not(.hideEventLogic):not(.empty):not(.tileEmpty),
section.drillDown > section.ttu > section.ReportDashHandler > ol > li{
    min-height: 350px;
}

/*:not(.noOutline) valid use case?? */
div.tileHolder > div.tileHolder,
section.drillDown > section.ttu > section.ReportDashHandler > ol > li,
section.dash > article.TaskTableUsageTileHandler:not(.CanDoManager):not(.screentailor-hidden):not(.no-tile-outline):not(.hideEventLogic):not(.empty):not(.tileEmpty), 
section.dash > article.ToDosTile{
    border-radius: var(--border-radius);
    box-shadow: var(--tile-box-shadow);
    outline: 1px solid #dcddde;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 15px;
    overflow: initial;
    z-index: revert-layer;
    height: auto;
}

article.ttu > section.dash > article.noOutline:not(.CanDoManager){
  box-shadow: none;
  padding: 0px;
}
section.dash > article.more.parentTableInserted,
section.dash > article.TaskTableUsageTileHandler.parentTableInserted,
section.dash > article.TaskTableUsageRecap.parentTableInserted{
  /*display: none !important;*/
}
section.dash >  article.TaskTableUsage.emptyRecord{ 
   display:none;
 }

section.dash > article.TaskTableUsageTileHandler.noDataNoShow:not(.screen-tailor-hover){
  display: none !important;
}
article.ttu > section.dash > article.TaskTableUsageTileHandler.noReportData{
  /*display:none;*/
  
}

main article.ttu > section.dash > article.TaskTableUsageTileHandler.tileEmpty,
main article.ttu > section.dash > article.TaskTableUsageTileHandler.hideTile{
  display:none;
}

article.inActionItem > section.dash > section.data{
    grid-column: span 6;
     border-radius: 0px;
    box-shadow: none;
    display: flex;
    flex-direction: column;
}
section.drillDown > section.ttu > section.ReportDashHandler > ol > li,
article.ttu > section.dash > article:not([table_key="ICA_EVENT"]):not(.CanDoManager):not(.CanDoManagerV2):not(.noTile):not(.no-tile-outline):not(.noOutline):not(.full-width),
article.ttu > section.more{
    padding: 15px;
}

article.ttu > section.dash > article[table_key="ICA_EVENT"]{
    order: -10;
}

/* Show Last on Dash */
article.ttu > section.dash > article.more{
    order: 5;
}

section.dash[to-do-tile-height="2"] > article.ToDosTile{
    grid-row: span 2;
}

section.dash > article.ToDosTile.isRecord {
    grid-column: -1/1;
    background-color: #fcf4e5;
}
section.dash > article.ToDosTile.isRecord.Low {
    background-color: #E6F6F5;
}
section.dash > article.ToDosTile.isRecord.Medium {
    background-color: #FFF7EB;
}
section.dash > article.ToDosTile.isRecord.High {
    background-color: #FEEFE9;
}

article.ttu > section.dash > article.canDos.detailRecord{
    grid-row: span 1;
    grid-column: span 2;
    flex-direction: column;
    
  
}

section.drillDown > section.ttu > section.ReportDashHandler > ol > li {
    height: 275px;
    overflow: hidden;
}

/*New Report Styling*/
section.reportContainer aside.resultsFilter,
section.reportContainer article.chartDisplay,
section.reportContainer article.reportDetails{
    display: flex;
    flex-direction: column;
    margin: 0px;
    max-width: inherit;
    border: 0px;
    font-size: 100%;
    list-style: none;
    background: transparent;
    overflow-x: auto;
}

header.hideWhenFkLinkID{
    /*not sure why this is needed ??? most instances it goes undefined so js cant condition for it - mw 11/20/2023*/
    /*display: none !important;*/
}

div.attchmentButton > div.preview > img.profile-photo {
    object-fit: cover;
    height: 30px;
    width: 30px;
    border: thin solid #CCCCCC;
    border-radius: 50%;
    overflow: hidden;
}
div.attchmentButton > div.preview{
    width: auto;
    position: relative;
/*    max-height: 150px;
    max-width: 150px;*/
}
/*section.Task > section.displayGrid > section.reportContainer {
    height: 80vh;
}*/
/*section.Task[chart-data-type="TIMESERIES"] > section.displayGrid > section.reportContainer{
    grid-template-rows: 50% 50%;
}*/
section.Task section.reportContainer:not(.empty-chart-tile){
    display: grid;
    grid-template-columns: 220px 1fr;
    grid-template-rows: 300px 1fr;
    gap: 16px;
    height: auto;
    max-height: 110vh;
    padding-top: 5px;
}


header.hideWhenFkLinkID > h2.ttu-title{
    /*display: none;*/
}

section.ttu > header.tableHeader.ttuRecapTabTitle{
    /*margin: 0px;*/
}

section.Task > section.displayGrid > section.reportContainer.empty-chart-tile{
    display: grid;
    grid-template-columns: 280px 1fr;
    grid-template-rows: 20% 80%;
    gap: 16px;
    /*height: 100%;*/
    
    padding-top: 5px
}

/*SERVES AS COLLAPSE CHART*/
section.Task > section.displayGrid > section.reportContainer.empty-chart-tile.chartExpanded{
    /*display: grid;*/
    /*grid-template-columns: 275px 1fr;*/
    grid-template-rows: 10% 90%;
    gap: 16px;
    height: 100%;
}

section.Task section.reportContainer.noOverview {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 300px 1fr;
    gap: 16px;
    /*height: inherit;*/
    padding-top: 5px;
    /*height: inherit;*/
}

/*Chart expanded or Details expanded MW 3/24/2023*/
section.Task > section.displayGrid > section.reportContainer.empty-chart-tile.detailsExpanded,
section.Task > section.displayGrid > section.reportContainer:not(.empty-chart-tile).chartExpanded,
section.Task > section.displayGrid > section.reportContainer:not(.empty-chart-tile).collapseResultsFilter.chartExpanded,
section.Task > section.displayGrid > section.reportContainer:not(.empty-chart-tile).collapseResultsFilter.detailsExpanded,
section.Task > section.displayGrid > section.reportContainer:not(.empty-chart-tile).detailsExpanded{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 0px;
}

section.chartExpanded:not(.empty-chart-tile) > aside.resultsFilter,
section.chartExpanded:not(.empty-chart-tile) > article.reportDetails,
section.detailsExpanded > aside.resultsFilter,
section.detailsExpanded > article.chartDisplay{
/*section:not(.empty-chart-tile).chartExpanded > aside.resultsFilter,
section:not(.empty-chart-tile).chartExpanded > article.reportDetails,
section:not(.empty-chart-tile).detailsExpanded > aside.resultsFilter,
section:not(.empty-chart-tile).detailsExpanded > article.chartDisplay{*/
    display: none;
}
section.Task > section.chartExpanded > article.chartDisplay,
section.detailsExpanded > article.reportDetails{
    grid-row: span 2;
    grid-column: span 2;
}



section.Task > section.displayGrid > section.reportContainer.collapseResultsFilter{
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 16px;
}
 /*ResultsFilter On Collapse MW 3/24/2023*/
section.collapseResultsFilter > aside.resultsFilter > :not(div.rsTitle){
    display: none !important;
}

section.collapseResultsFilter > aside.resultsFilter{
    height: fit-content;
    max-width: 60px;
    transition: max-width 0.5s ease-in;
}

section.collapseResultsFilter > aside.resultsFilter > div.rsTitle{
    font-size: 0;
    width: fit-content;
}

section.displayGrid > section.reportContainer > header.tableHeader{
    grid-row: span 1;
    grid-column: span 3;
}

aside.resultsFilter{
    grid-row: span 2;
    grid-column: span 1;
}
aside.resultsFilter.oneHeight{
    grid-row: span 1;
    grid-column: span 2;
}

@media (max-width: 1078px) {  
  section.report article.options .ts-control {
    max-width: 175px;
    display: flex;
    flex-wrap: wrap;
  }
}

section.report article.options {
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  padding: 15px;
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
  > header {
    display: flex;
    margin-bottom: 5px;
    span {
      font-size: 14px;
      font-weight: bold;
    }
  }
  
  .edit-button {
    /*padding: 1px 10px;*/
    margin-left: auto;
  }
  
  .tableActions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 25px;
    > div:not(.dateRange){
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        > label.menu-prompt{
            text-transform: capitalize;
        }
    }
    > div.dateRange.show {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 5px;
    }
    .filter {
      max-width: 150px;
    }
  }
}

section.report .report-setup {
  margin-left: auto;
  display: flex;
  flex-direction: row-reverse;
  i.report-settings {
    -webkit-mask-image: url(images/wzIcons/adminSettings64.svg);
    mask-image: url(images/wzIcons/adminSettings64.svg);
    background-color: #666;
    width: 25px;
    height: 25px;
    padding: 0px;
    display: block;
    cursor: pointer;
    -webkit-mask-size: cover;
    mask-repeat: no-repeat;
    margin-right: 8px;
  }
}

article.chartDisplay{
    grid-row: span 1;
    grid-column: span 1;
    padding: 15px;
    font-size: 16px;
    font-weight: 600;
    color: #444;
    transition: all 0.5s ease-in-out;
    /*min-height: 350px;*/
    /*transition: all 0.5s linear;*/
}

section.displayGrid > section.reportContainer.detailsExpanded > article.reportDetails,
section.displayGrid > section.reportContainer.chartExpanded:not(.empty-chart-tile) > article.chartDisplay{
    grid-row: span 2;
    height: 80vh;
}

section.displayGrid > section.reportContainer.focus-view-on-options > article > div:not(.cdTitle):not(.dTitle){
    opacity: 60%;
}

article.reportDetails{
    grid-row: span 1;
    grid-column: span 1;
}

article.reportDetails.full {
    grid-row: span 2;
    grid-column: span 1;
}
section.displayGrid > section.reportContainer > header.tableHeader{
    grid-row: span 1;
    grid-column: span 2;
}

/*section.displayGrid > section.reportContainer > aside.resultsFilter{
    grid-row: span 1;
    grid-column: span 6;
}

section.displayGrid > section.reportContainer > article.reportDetails{
    grid-row: span 1;
    grid-column: span 3;
}

section.displayGrid > section.reportContainer > article.chartDisplay{
    grid-row: span 1;
    grid-column: span 3;
}*/

section.displayGrid > section.reportContainer > article.chartDisplay.empty{
    display: none;
    grid-row: span 0;
    grid-column: span 0;
}

section > section.displayGrid > section.reportContainer > header.tableHeader{
   height: fit-content; 
}

/*article.chartWrapper > div.chart > span{
    max-width: auto;
}*/
article.chartDisplay > article.emptyTile,
article.chartDisplay > article.chartWrapper{
  display:none;
}
article.chartDisplay > article.emptyTile.focus,
article.chartDisplay > article.chartWrapper.focus{
  display:block;
}
/*
  was causing edit detail screen not to show when drilling down from report
  section.displayGrid > section.reportContainer > section.drillDown{
    display: none;
}*/
main > div > section.Task[mpath^="R"] > section.displayGrid > section.reportContainer.TaskTableUsageRecap > header > span.tableActions.borderedAction{
    padding: 0px;
    margin: 0px;
}
section.Task[mpath^="R"] > section.displayGrid > section.reportContainer.TaskTableUsageRecap > header.ttuRecapTabTitle{
    height: fit-content;
}

article.reportDetails > div.DataList.ReportScreen > table.subTable{
    width: -webkit-fill-available;
    width: -moz-available;
    height: auto; 
}

div.week-pattern{
    position: relative;
    cursor: auto;
    > i.upcoming-icon{
        display: inline-flex;
        justify-content: space-between;
        background-color: #999;
        width: 15px;
        height: 15px;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: 15px;
        mask-size: 15px;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-image: url("images/wzIcons/weekly-repeating.svg");
        mask-image: url("images/wzIcons/weekly-repeating.svg");
    }
    > span.text-prompt{
        user-select: none;
        white-space: nowrap;
        color: #59667d;
        position: absolute;
        font-size: 8px;
        line-height: 8px;
        background-color: white;
        height: fit-content;
        width: fit-content;
        border-radius: 50%;
        left: 0;
        top: 9px;
    }      
}

article.CanDoManagerV2 li span.complete-icon{
    display: block;
    background-image: url(images/progressOnTrack64.png);
    background-repeat: no-repeat;
    background-size: 20px;
    height: 20px;
    width: 20px;
    padding: 2px;
    margin-top: auto;
    border-style: none;
}

aside.resultsFilter > span.searchArea > input.searchInput{
    display: inline-block;
    background-color: transparent;
    margin-top: 0;
    cursor: pointer;
    width: -webkit-fill-available;
    width: -moz-available;
    /*margin-left: 20px;*/
    color: #58585B;
    border: none;
    border-radius: 0px;
    /*border-bottom: thin solid #d9d9d9;*/
    height: 25px;
    font-size: 12px;
}

aside.resultsFilter  li.analyzeBy,
aside.resultsFilter  li.dateRangeHolder,
aside.resultsFilter  li.searchAreaHolder{
    margin: 5px 0px;
    font-weight: 600;
    font-size: 14px;
}

aside.resultsFilter > div,
article.chartDisplay > div,
article.reportDetails > div{
    /*padding: 15px 0px 0px 0px;*/
    font-weight: 600;
    font-size: 16px;
    overflow: hidden;
}

aside.resultsFilter{
    max-width: 280px;
    transition: max-width 0.3s ease-in;
    > header.overview {
      font-size: 14px;
      font-weight: bold;
      margin-bottom: 10px;
    }
}

section.detailsExpanded > article.reportDetails{
    grid-row: span 2;
}

article.reportDetails > div.DataList.ReportScreen > table.subTable > caption.captionTitle{
    margin: 0px;
    margin-bottom: 5px;
    padding: 0px;
    font-weight: 600;
    font-size: 16px;
    color: #58585B;
}

span.date-range-prompt{
    display: none;
}
section.report span.date-range-prompt{
    display: inline-block;
}

h2.ttu-title > h3.filter-sub-header{
    display: flex;
    flex-direction: row;
    
    width: fit-content;
    font-size: 14px;
    font-weight: normal;
    color: #888;
    padding: 5px 0px;
    /*display: block;*/
    
}
section.report > header > h2.ttu-title > h3.filter-sub-header > div.status-prompt{
    margin-left: 5px;
}

button.x-status-option{
    display: inline;
    padding: 0 3px;
    margin-left: 2px;
    cursor: pointer;

    border: 0px;
    background-color: transparent;
    color: #888;
    font-size: 10px;
}
section:not(.clicked) > .toggleView > div.menuBridge{
    display: none;
}
.toggleView.clicked > div.menuBridge > ul.menuElements{
    width: auto;
    padding: 0 5px;
    background-color: white;
    
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.toggleView.clicked > div.menuBridge > ul.menuElements > li{
    color: #444;
    border-radius: var(--border-radius);
    padding: 4px 7px 4px 27px;
    margin: 0px;
    text-align: center;
    cursor: pointer;
    font-size: 12px;
    
    width: auto;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: left center;
}

ul.menuElements > li.pdf-extract{
    background-image: url(images/postTypeDocPDF16x16.png);
}
ul.menuElements > li.doc-extract{
    background-image: url(images/postTypeDocPic16x16.png);
}
ul.menuElements > li.xls-extract{
    background-image: url(images/postTypeDocExcel16x16.png);
}

.toggleView.clicked > div.menuBridge  li > a{
    color: #444;
}

aside.resultsFilter section > span.toggleView{
    cursor: pointer;
    border-radius: 8px;
    display: inline-block;
    margin: 0px;
    padding: 0px 5px 0px 12px;
    width: -webkit-fill-available;
    width: -moz-available;
    text-align: center;
    height: 26px;
    line-height: 25px;
    font-size: 12px;
    border: thin solid #dcddde;
}

aside.resultsFilter section > span.toggleView.clicked > div.menuBridge{
    display: block;
}

/*article.chartDisplay > div.chartWrapper > div.chart{
    width: 100%;
    height: 250px;
}*/

aside.resultsFilter > div.analyzeBy > section.breakByOptionsSection{
    margin: 0px;
}

span.tableActions.borderedAction > section.breakByOptionsSection > span.breakByOptions.toggleView.clicked > div.menuBridge{
    left: -17px;
}

span.tableActions.borderedAction > section.breakByOptionsSection > span.breakByOptions.toggleView.clicked > div.menuBridge > ul.menuElements{
    padding: 0 10px;
    top: -2px;
    left: 0px;
    width: -webkit-fill-available;
    width: -moz-available;
}

span.tableActions.borderedAction > section.breakByOptionsSection > span.breakByOptions.toggleView.clicked > div.menuBridge > ul.menuElements > li{
    border: thin solid #dcddde;
}

article.chartWrapper > div.chart{
    /*height: 100%;*/
    height: 260px;
    width: 100%;
    /*going to find better fix for tile sizing later on, just MVP for getting things feeling decent MW 3/16/2023*/
}

article.chartWrapper:not(.summary) > div.chart > span.fusioncharts-container > svg:hover {
    cursor: pointer !important; /* Work around for hover cursor on charts */
}
/*div > article.ttu > section.dash > article.ToDoTile:not(.emptyState),
section.drillDown > article.ttu > section.dash > article.ToDoTile:not(.emptyState){
   grid-row: span 2; 
}*/

/*div > article.ttu > section.dash > article.ToDoTile.emptyState,
section.drillDown > article.ttu > section.dash > article.ToDoTile.emptyState{
   grid-row: span 1; 
}*/
/*
main section.drillDown > article.ttu > section.dash > article.ToDoTile.emptyState{
    grid-row: span 1;
}*/

/*hiding for reports screen when empty?*/
section.displayGrid > section.reportContainer > div.recapListDetailNode:empty,
section.displayGrid > section.reportContainer > div.tableListFilterAspects:empty,
section.displayGrid > section.reportContainer > figure.thumbnail:empty,
section.displayGrid > section.reportContainer > section.drillDown:empty,
section.displayGrid > section.reportContainer > div.recapListContent:empty{
    display: none;
}

section[holders="0"][level="More"] ol:not(.more-canDo-list) > li:not(.more-tile).canDoItem > a.isCanDoItem {
    position: absolute;
    transform: translate(-50%);
    left: 50%;
    width: 100%;
    padding-top: 65px;
    color: #444;
    /*height: 100%;*/
    display: flex;
    flex-direction: column;
    justify-content: flex-end;    
}
li.canDoItem > a.isCanDoItem > section.Command{
  display: none;
}
section[holders="0"][level="More"] > ol > li:not(.more-tile).canDoItem > a.isCanDoItem:after {
/*    content: '';
    width: 100%;
    height: 1rem;*/
}

section[level="More"] ol.canDoHolder li.more-tile section.more-tile a.isCanDoItem {
    text-align: left;
    text-wrap: nowrap;
    position: unset;
    transform: none;
    left: 0;
    top: 0;
}

table.ttuList > tbody > tr.empty > td{
    background-image: url(images/workzoomLoadingV3200px.gif);
    background-position: left center;
    background-size: 150px;
    margin: auto;
    width: 150px;
    height: 150px;
    background-color: transparent;
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    cursor: wait;
}

section.displayGrid > section.reportContainer.loadingReport > article.chartDisplay > img.loadingIcon{
  height: 200px;
  width: 200px;
  display: block;
  margin: auto;
}
article.chartDisplay > img.loadingIcon{
    display: none;
}

article.ttu > section.dash > article.TaskTableUsageTileHandler.hidePolicyTileShowPolicies{
  display: none;
}

h5.tableTitle,
section.ReportDashHandler > ol > li > div > div.reportTitle,
section.dash >  article.TaskTableUsageTileHandler > h5.tableTitle,
section.dash >  article.ttu.noTile.outline > header > h2 > span.scrollContext,
section.dash > article.ToDosTile > span.title,
article.more > h4.moreTitle{
    font-size: 14px;
    font-weight: bold;
    color: #444;
    /*padding-bottom: 10px;*/
    /*width: fit-content;*/
}

section.dash >  article.TaskTableUsageTileHandler > h5.tableTitle{
    /*Make it so that the tile titles have more clickable height, mw 10/28/2024*/
    padding-bottom: 5px;
}

article.TaskTableUsageTileHandler.dash-tile{
    cursor: default !important;
}

.hover-underline:hover{
    cursor: pointer;
    text-decoration: underline;
}

section.drill-navigation{
    height: fit-content;
    order: 10;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    cursor: pointer;
    margin-top: auto;
    margin-left: auto; 
    
    &:hover{ 
        border-radius: var(--border-radius);
        background-color: var(--hover-background);
        outline: 1px solid #dcddde;
        /*text-decoration: underline;*/
    }
    
    > span.drill-prompt{
        width: fit-content;
        font-size: 12px;
        color: #666;
        margin-top: auto;
        text-transform: capitalize;
    }
    > i{
        height: 12px;
        width: 12px;
        background-color: #666;
        -webkit-mask-size: cover;
        -webkit-mask-image: url(images/rightMoreArrow64.svg);
        mask-image: url(images/rightMoreArrow64.svg);
        mask-image-size: cover;
    }
}

td.drillDownAware,
/*article.more > article.drillDownAware > h5.tableTitle:hover,*/
/*section.dash >  article.TaskTableUsageTileHandler:not(.dash-tile) > h5:hover,*/
section.ReportDashHandler > ol > li > div > div.reportTitle:hover,
section.dash > article.ToDosTile > span.title:hover{
    cursor: pointer;
    text-decoration: underline;
}

article.TtuDetailsTile > div,
section.more > article.TaskTableUsageTileHandler{
    font-size: 14px;
    color: #444;
}

section.dash > article.ToDoTile > span.title:hover{
    cursor: pointer;
    text-decoration: underline;
}
section.dash > article.ToDoTile > div.ToDoTile > div.moreTiles{
    font-size: 12px;
    margin-top: 5px;
} 
article.TtuDetailsTile > span.title,
article.ttu > header.dashTitle > span.ttuTitle,
section.more > h4.moreTitle{
    font-size: 14px;
    font-weight: bold;
    color: #444;
}
section.dash > article.more.empty{
  display:none;
}

section.Task > section.displayGrid > section.reportContainer > header.tableHeader > span.tableActions:empty{
    display: none;
}

section.reportContainer div.reportStage{
    font-weight: normal;
    text-align: left;
    font-size: 14px;
    color: #444;
}

aside.com-banner > article.chartWrapper{
    display: none;
}

aside.resultsFilter > button:not(.hide){
  padding: 0px 10px;
  margin: 5px 0px;
  /*display: inline-block;*/
  justify-content: center;
  white-space: nowrap;
  border: thin  var(--action-theme) solid;
  color: white;
  border-radius: var(--border-radius);
  line-height: 30px;
  height: fit-content;
  font-size: 14px;
  background-color:  var(--action-theme);
  cursor: pointer;
}

aside.resultsFilter > button:active{
  background-color:  var(--action-theme);
}

section.displayGrid > section.reportContainer.loadingReport > article.chartDisplay > article.chartWrapper{
    display: none;
}

aside.resultsFilter > span.searchArea > aside.filters{
    /*margin-left: 20px;*/
    margin-top: 6px;
}
aside.resultsFilter > span.searchArea > aside.filters > ol.layout > li{
    border-radius: 0;
    overflow-wrap: none;
    display: flex;
    flex-direction: row;
}
aside.resultsFilter > span.searchArea > aside.filters > ol.layout > li > span{
    margin: 0;
    padding: 0;
    font-size: 10px;
    font-weight: normal;
    width: max-content;
}

aside.resultsFilter  header.summary {
  /*margin-bottom: 3px;*/
  cursor: pointer;
}

aside.resultsFilter  div.separator {
    height: 1rem;
}

/*aside.resultsFilter  header.summary,*/
aside.resultsFilter  header.details {
  display: flex;
  font-weight: bold;
  color: #444;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  border-left: 6px solid transparent;
}

aside.resultsFilter  header.summary,
aside.resultsFilter  ul.detailList > li div{
    color: #444;
    font-size: 13px;
    font-weight: bold;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    border-left: 6px solid transparent;
}

aside.resultsFilter  ul.detailList.indent {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-left: 0.5rem;
}

aside.resultsFilter li  span.break-by-count{
    width: fit-content;
    padding-right: 5px;
    cursor: pointer;
    font-weight: normal;
}

aside.resultsFilter header.summary  span.break-by-prompt,
aside.resultsFilter header.details  span.break-by-prompt,
aside.resultsFilter li  span.break-by-prompt{
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

aside.resultsFilter li  span.break-by-prompt {
    font-weight: normal;
}

aside.resultsFilter header.summary,
aside.resultsFilter li div[id^='group-item-'] {
  display: flex;
  flex-direction: row;
}

aside.resultsFilter button.edit-button {
  background-image: url(images/editIcon16x16.png);
  height: 1rem;
  width: 1rem;
  border: none;
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: 3px;
}

section.report a.save-button, section.report a.cancel-button {
      margin-right: 3px;
}

.reportContainer.blur {
   opacity: 30%;
   /*filter: blur(2px);*/
}

.reportContainer .overlay {
  position: fixed;
  width: 100%;
  height: 100%;
}

.report .report-settings {
  /*width: 100%;*/
  height: unset;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  padding: 10px 15px;
  margin-bottom: 10px;
  header {
    display: flex;
    margin-bottom: 7px;
    align-items: end;
    .headerText {
      font-size: 16px;
      font-weight: bold;
    }
    .transitions { 
      margin-left: auto;
    }
  }
  .container {
    display: flex;
    div.version {
      width: 60%;
      > div.versioning { 
        margin: 10px 10px 15px 0px;
        display: flex;
        align-items: end;
        .versionName {
          width: 50%;          
          display: flex;
          flex-direction: column;
          > label {
            font-weight: bold;
            font-size: 14px;
            margin-right: 5px;
            margin-bottom: 5px;
          }
          input[name="VERSION_NAME"] {
            margin-right: 20px;
          }
        }
        .makePublic {
          margin-left: 10px;
        }
      }
      > div.columns {
        
        flex-direction: column;
        > div {
          margin: 10px 10px 15px 0px;
        }
        label {
          font-weight: bold;
          font-size: 14px;
          margin-bottom: 5px;
        }
        .fieldChooser a {
          display: none;
        }
      }
      > div.public, > div.defaultReport {
        white-space: nowrap;
      }
    }
  }
  
  div.fieldChooser.panel {
    height: 290px;
    border: none;
    /*padding: 8px;*/
    margin: 5px;
    overflow: hidden;
    span.close-editor {
      display: none;
    } 
    > section {
      /*margin-right: 15px;*/
      /*position: fixed;*/
      .ftchosertitle {
        font-size: 14px; 
      }
      > ul {
        overflow: scroll;
        height: 245px;
        border-radius: 5px;
        box-shadow: var(--box-shadow);
        padding: 7px;
        margin: 1px;
      }
    }
  }
}

ol.ui-droppable[domain="DERIVATION"] {
  border: 1px solid #d0d0d0;
  border-radius: 3px;
  box-shadow: none;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  /*overflow: hidden;*/
  padding: 2px;
  position: relative;
  margin-right: 10px;
  z-index: 0;
  min-height: 25px;
  li {
    background: #f2f2f2;
    border: 0 solid #d0d0d0;
    color: #303030;
    cursor: pointer;
    margin: 0 3px 3px 0;
    padding: 2px 6px;
    margin: 0 3px 0 0;
    color: #888;
    font-size: 12px;
    span.remove {
      border-left: 1px solid #d0d0d0;
      margin-left: 6px;
      border-radius: 0 2px 2px 0;
      box-sizing: border-box;
      color: inherit;
      display: inline-block;
      padding: 0 6px;
      text-decoration: none;
      vertical-align: middle;
    }
  }
}

div.staffDiv > div > a.initials,
div.staffDiv > div > img {
  border-radius: 50%;
  display: block;
  height: 40px;
  width: 40px;
  background-color: #0C4B6A;
  text-align: center;
}

div.staffDiv > div.perStaff {
    margin: 3px;
}

Xaside.resultsFilter ul.detailList > li:not(.notInFocus){
    color: white;
    background-color: #0C4B6A;
    /*border-radius: 7px;*/
}


Xaside.resultsFilter ul.detailList  li:not(.XnotInFocus) div.triangleCutout{
    width: 0px;
    height: 0px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 6px solid #0C4B6A;
    background-color: white;
}

aside.resultsFilter  ul.detailList > li > div.selected,
aside.resultsFilter  header.summary.selected,
aside.resultsFilter  header.details.selected {
    color: white;
    background-color:  var(--primary-theme);
}

/* Specific styles when selected */
aside.resultsFilter .selected .triangleCutout {
    border-left: 6px solid var(--primary-theme);  /* Use a CSS variable for selected state color */
}

aside.resultsFilter ul.detailList > li > div:not(.selected):hover,
aside.resultsFilter header.summary:not(.selected):hover {
    background-color: var(--hover-background);
}

aside.resultsFilter .triangleCutout {
    width: 0px;
    height: 0px;
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    background-color: white;
    margin: 0px;
}

/* Hover state, excluding selected elements to prevent override */
aside.resultsFilter li div:not(.selected):hover .triangleCutout,
aside.resultsFilter header.summary:not(.selected):hover .triangleCutout {
    border-left: 6px solid var(--hover-background); /* Use a CSS variable for hover state color */
}

section.displayGrid > section.reportContainer > article.chartDisplay > div.active,
div.DataList > div.groupingDiv.active .collapseDataList{
    display: block;
}

div.ReportScreen > table.subTable > tbody{
  box-shadow: 0 0 0;
  border-radius: 0px;
  border-collapse: collapse;
  width: inherit;
}

article.reportDetails table.subTable.expandDataList, 
article.reportDetails table.subTable.groupTable, 
article.reportDetails table.subTable.collapseDataList{
    margin-top: 10px;
    font-weight: 400;
    display: table;
    border-collapse: collapse;
}

article.reportDetails div.DataList table.subTable > tbody > tr > td.subTableHeader{
    width: 12%;
    text-transform: uppercase;
    color: #888;
    /*padding: 10px;*/
    font-size: 10px;
}
article.reportDetails div.DataList table.subTable > tbody > tr:not(:first-child) td{
    /*border-top: solid #eee 1px;*/
}
article.reportDetails div.DataListtable.subTable > tbody > tr > td:not(.subTableHeader){
    color: #444;
    border: none;
    border-bottom: 1px solid #dcddde;
}
article.reportDetails div.DataList table tr td{
    /*text-align: center;*/
    text-align: left;
    white-space: pre;    
    padding: 10px;
    /*font-size: 10px;*/
    font-size: 12px;
}

aside.resultsFilter > span.tableActions{
    margin: 10px 0px;
    flex-direction: column;
}
aside.resultsFilter > span.tableActions > div {
    margin-top: 1rem;
}
section.displayGrid > section.reportContainer > aside.resultsFilter div.analyzeBy > section.breakByOptionsSection{
    margin: 0px;
}

section.companyNavUser[role="A"]  > div.userActions > span.searchArea[roles*="A"], 
section.companyNavUser[role="M"] > div.userActions > span.searchArea[roles*="M"], 
section.companyNavUser[role="P"]  > div.userActions > span.searchArea[roles*="P"] {
  display: inline-block;
}
article.detail.ttu > header.dashTitle > span{
    vertical-align: middle;
}

section.drillDown > article.ttu.detail:not(.dash) > header.dashTitle > span.ttuTitle{
    font-weight: 400;
    font-size: 20px;
    color: #888;
}

span.record-status,
span.recordStatus{
  background-size: 20px 20px;
  height: 20px;
  width: 20px;
  margin: 0px;
  padding: 0px;
  background-repeat: no-repeat;
  border: 0;
}

header.dashTitle > span.recordStatus{
  display: inline-block;
  margin-right: 5px;
  margin-top: 5px;
  margin-bottom: 10px;
}

article.ttu:not([record_status]) header.dashTitle > span.recordStatus{
    display: none;
}

span.record-status[rs="A"],
article.ttu[record_status="A"] > header.dashTitle > span.recordStatus{
  background-image: url(images/recordStatusActive24.png);
}
span.record-status[rs="P"],
article.ttu[record_status="P"] > header.dashTitle > span.recordStatus{
  background-image: url(images/recordStatusPending24.png);
}
span.record-status[rs="I"],
article.ttu[record_status="I"] > header.dashTitle > span.recordStatus{
  background-image: url(images/recordStatusInactive24.png);
}
span.record-status[rs="X"],
article.ttu[record_status="X"] > header.dashTitle > span.recordStatus{
  background-image: url(images/recordStatusCancelled24.png);
}
span.record-status[rs="C"],
article.ttu[record_status="C"] > header.dashTitle > span.recordStatus{
  background-image: url(images/recordStatusClosed24.png);
}
span.record-status[rs="W"],
article.ttu[record_status="W"] > header.dashTitle > span.recordStatus{
  background-image: url(images/recordStatusWithdrawn24.png);
}
span.record-status[rs="D"],
article.ttu[record_status="D"] > header.dashTitle > span.recordStatus{
  background-image: url(images/recordStatusDenied24.png);
}
span.record-status[rs="E"],
article.ttu[record_status="E"] > header.dashTitle > span.recordStatus{
  background-image: url(images/recordStatusError24.png);
}
header.dashTitle > h2.ttu-title > span.ttu-title-text.sub-title,
header.hasIcon > h2.ttu-title > span.ttu-title-text,
header:not(.tableHeader) > h2 > span.ttu-title-text{
    font-weight: normal;
    color: #666;
    font-size: 14px;
    display: flex;
    gap: 0.5rem;
    flex-direction: row;
    &:empty{
        display: none;
    }
}

article.ttu.noScrollContext > header.dashTitle > h2.ttu-title > span.sub-title{
    color: #444;
    font-weight: bold;
    font-size: 18px;
}

article.ttu > header > h2.ttu-title > span.ttu-title-text:empty{
    display: none;
}

span.record-status-text,
span.status-item{
    width: fit-content;
    font-size: 12px;
    background-color: #f2f2f2;
    border-radius: var(--border-radius);
    padding: 1px 7px;
    display: flex;
    flex-direction: row;
}

/*fieldset.columnGroup input[readonly],*/ 
div.Field > label > input[readonly], 
fieldset.columnGroup input[readonly], 
div.Field > label > div.lovInputHolder input[readonly], 
div.Field > div > div.dateHolder input[readonly]{
    background-color: #fefefe;
    border: 1px solid #f2f2f2;
    cursor: auto;
    &:focus-visible{
        border: 1px solid #cccccb;
        outline: none;
    }
}
article.hasRequestedChanges > header.dashTitle > div > a.add-new{
    display: none;
}
div.status-prompt{
    display: flex;
    flex-direction: row;
}

span.record-status-text[rs="D"],
span.status-item.WithdrawnDenied{
    background-color: #f9dadf;
    color: #e34b65;
}
span.record-status-text[rs="A"],
span.status-item.Active{
    background-color: #e9f1dc;
    color: var(--product-green);
}

span.record-status-text[rs="I"],
span.status-item.PendingInactive{
    background-color: #CDE1FE;
    color: #5098FB;
}
span.record-status-text[rs="X"],
span.status-item.Cancelled{
    color: var(--product-red);
}

div.WorkzoomMenu[role="M"] li.depth-2,
div.WorkzoomMenu[role="P"] li.depth-2{
    display: none;
}

section.dash > article.TaskTableUsageTileHandler > div > div.reportTitle{
    text-align: center;
    text-decoration: none;
    color: #888;
}
section.dash > article.TaskTableUsageTileHandler > div > div.reportTitle:hover{
    text-align: center;
    text-decoration: none;
    color: #888;
}
section.dash > article.TaskTableUsageTileHandler > div > div.noChart{
    margin: 0;
    padding: 0;
    color: #888;
    font-weight: normal;
    text-align: center;
    height: 300px;
    display: grid;
    align-items: center;
}

article.TaskTableUsage > header.dashTitle > div.actions {
  width: fit-content;
  margin-left: auto;
}

article.TaskTableUsage.dash > header.dashTitle > div.actions{
    color: #888;
}
article.TaskTableUsage.dash > header.dashTitle > div.actions{
    color: #888;
}

main div.workspaceContent article.TaskTableUsage > header.dashTitle:not(.hasIcon) > span.ttuTitle{
  width: fit-content;
  background: #fff;
  margin: 0px;
  padding: 0px;
  font-size: 20px;
  display: block;
}
main div.workspaceContent article.TaskTableUsage > header.dashTitle:not(.hasIcon) > span.ttuTitles{
    width: 100%;
}

section.dash > article.TaskTableUsageTileHandler > div{
    height: -webkit-fill-available;
    height: -moz-available;
    height: 100%;
}

nav.backButtonNav > div#breadcrumbs{
    /*margin: 5px 0px;*/
    color: #888;
    display: flex;
    position: fixed;
    top: 75px;
    left: 55px;
}

div#breadcrumbs> span.slash,
div#breadcrumbs > div.dotHolder > span.breadcrumb,
div#breadcrumbs > div.dotHolder.non > span.dots{
    margin-right: 4px;
}

/*html.visual-release .stickyHeaderHolder > header{
    top: 65px;
    position: -webkit-sticky;
    position: sticky;
      z-index: 1;
}*/

nav.backButtonNav > div#breadcrumbs > span.breadcrumb:hover,
nav.backButtonNav > div#breadcrumbs > div.dotHolder:not(.non) > span.breadcrumb:hover,
nav.backButtonNav > div#breadcrumbs > div.dotHolder.non > span.dots:hover{
    cursor: pointer;
    text-decoration: underline;
}

nav.backButtonNav > div#breadcrumbs > div.dotHolder:not(.non) > span.dots,
nav.backButtonNav > div#breadcrumbs > div.dotHolder.non > span.breadcrumb{
    display: none;
}

ul.menuList > li.children > ul > li.children li.active{
    color: #0c4b6a;
}

li.children > ul > li.ttu.homeButton{
    color: #999;
}

body > div.navMainContainer > main section.scrollSensitive div.recapListContent table.sticky > thead{
    top: 150px;
    background-color: white;
    padding: 2px;
    display:table-header-group
}

section.recapListLayout > div.recapListContent > table > tbody > tr.drillDownAware:hover,
section.recapListLayout > div.recapListContent > table > tbody > tr.drillDownAware:hover{
  background-color: #f3f3f3;
  outline: 1px solid #dcddde;
}

section.dash > article.TtuDetailsTile{
    min-height: 300px;
}

/*div.recapListReportToggle.recap > img.recapImg,
div.recapListReportToggle.recap > img.reportImg{
  cursor: pointer;
}*/

section.drillDown > section.ttu.recapListLayout.recapLayout.localScroll > div.recapListContent[list_type="table"] {
    max-height: none;
    overflow-y: auto;
}

section.report table > caption{
    text-align: left;
    width: fit-content;
    font-weight: normal;
    color: #888;
    cursor: pointer;
    padding: 2px;
}
section.report table > caption:hover{
    text-decoration: underline;
}
section.report table td > input{
    border-radius: var(--border-radius);
    border: thin solid #dcddde;
}


section.Task > section.TaskTableUsageRecap.displayGrid > header.tableHeader{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
}

section.Task > section.TaskTableUsageRecap.displayGrid > header.tableHeader > span.toggleView{
    cursor: pointer;
    border-radius: var(--border-radius);
    display: inline-block;
    
    width: max-content;
    
    height: 26px;
    line-height: 25px;
    text-align: center;
    font-size: 12px;
    
    border: thin solid #999;
    color: #999;
    background: #fff;
    
    padding: 0px 5px 0px 12px;
    margin: 0px;
    
    position: relative;
}
header.toggle-holder > button.view-toggle > i{
    display: inline-block;
    width: 18px;
    height: 18px;
    padding: 0px;
}
button.view-toggle[title="Trends"] > i.view-toggle-img {
    background-color: #888;
    -webkit-mask-image: url(images/report64.svg);
    mask-image: url(images/report64.svg);
}

button.view-toggle[title="Events"].selected > i.view-toggle-img,
button.view-toggle[title="Trends"].selected > i.view-toggle-img {
    background-color: var(--product-green);
}

button.view-toggle[title="Events"] > i.view-toggle-img {
    background-color: #888;
    -webkit-mask-image: url(images/calendar64.svg);
    mask-image: url(images/calendar64.svg);
}

div.toggleClose,
div.toggleExpand{
    background-position: center;
    vertical-align: middle;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: 18px;
    width: 18px;
    height: 18px;
    padding: 5px;
    border-radius: var(--border-radius);
    cursor: pointer;
    &:hover{
        background-color: var(--hover-background);
        cursor: pointer;
        border-radius: var(--border-radius);
    }
}
div.toggleClose{
    background-image: url(images/collapseLeft64.png);
}

section.reportContainer.empty-chart-tile  article.chartDisplay > div.cdTitle > div{
    background-image: url(images/collapseLeft64.png);
    transform: rotate(270deg);
}

section.reportContainer.empty-chart-tile.chartExpanded  article.chartDisplay > div.cdTitle > div{
    transform: rotate(90deg);
}

div.toggleExpand{
    background-image: url(images/expandRight64.png);
}

section.chartExpanded article.chartDisplay > div.cdTitle > div,
section.detailsExpanded article.reportDetails > div.dTitle > div{
    background-image: url(images/collapseRight64.png);
}

section.collapseResultsFilter aside.resultsFilter > div.rsTitle > div.toggleClose,
section.chartExpanded article.chartDisplay > div.cdTitle > div.toggleExpand,
section.chartExpanded article.reportDetails > div.dTitle > div.toggleExpand{
    transform: rotate(180deg);
}

aside.resultsFilter > div.rsTitle,
article.chartDisplay > div.cdTitle,
article.reportDetails > div.dTitle{
    display: flex;
    justify-content: space-between;
    min-height: 25px;
    font-size: 14px;
    /*align-items: center;*/
    
}

header.tableHeader > span.tableActions{
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px; 
}

section.TaskTableUsageRecap.localScroll > header.tableHeader{
    padding: 20px 0;
    padding-bottom: 10px;
    padding-top: 0px;
    justify-content: space-between;
    display: flex;
    flex: no-wrap;
}

section.Task > section.TaskTableUsageRecap > header.tableHeader > span.ttuTitle{
    display: flex;
    flex-direction: column;
    width: fit-content;
    font-weight: bold;
    font-size: 18px;
    
}

section.Task > section.TaskTableUsageRecap > header.tableHeader > span.dateRangeHeader{
    font-size: 14px;
    color: #888;
    font-weight: normal;
}
span.searchArea aside.filters ol.searchAspect.layout {
    display: flex;
    height: fit-content;
    width: fit-content;
    /*max-width: 250px;*/
    flex-wrap: wrap;
    margin-top: 3px;
}
span.searchArea aside.filters ol.searchAspect.layout > li.searchAspect > span.label{
    display: none;
}

span.searchArea aside.filters ol.searchAspect.layout > li.searchAspect > span.YesNo,
span.searchArea aside.filters ol.searchAspect.layout > li.searchAspect > span.value{
    margin: 1px;
    width: fit-content;
    font-size: 12px;
    margin-right: 3px;
    background-color: #f2f2f2;
    border-radius: 8px;
    padding: 1px 7px;
    display: flex;
    flex-direction: row;
    color: #888;
    height: 100%;
    border: none;
}

span.searchArea aside.filters ol.searchAspect.layout > li.searchAspect > span.YesNo::after
span.searchArea aside.filters ol.searchAspect.layout > li.searchAspect > span.value::after{
    margin-left: 2px;
    margin-right: 0px;
}

main.worksheet span.tableActions span.searchArea aside.filters ol.searchAspect > li{
  overflow-wrap: break-word;
  border-radius: var(--border-radius);
  color: white;
  border: 1px solid #f2f2f2;
  background-color: #f2f2f2;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  margin: 0 2px;
}

main.worksheet span.tableActions span.searchArea > aside.filters:has(div.dateRange),
span.searchArea aside.filters ol.searchAspect.layout:has(div.dateRange) {
  max-width: 335px;
}
main.worksheet span.tableActions span.searchArea aside.filters ol.searchAspect > li > div.dateRange {
  color: #444;
  background-color: #f2f2f2;
  &> input {
    background-color: white;
  }
  &>span.text {
    margin-inline: 2px;
  }
}

ol:is(.selectedValues, .staged-for-delete) > li.marked-for-delete,
div.Field > div.valueHolder ol.staged-aspects > li.searchAspect {
  text-decoration: line-through;
}
div.Field > div.valueHolder ol:is(.staged-aspects , .selectedFilters):not(:empty) {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
    order: 1;
    overflow-x: auto;
    padding: 5px 0;
}

ol.staged-aspects > li.searchAspect,
ol.selectedFilters > li.searchAspect{
    background-color: #f1f1f1;
    color: #555;
    font-weight: bold;
    padding: 5px;
    font-size: 12px;
    border-radius: var(--border-radius);
    > div.value-header{
        gap: 3px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        font-weight: normal;
        color: #444;
        > div.delete{
            padding: 0 4px;
            outline: none;
            font-size: 14px;
            line-height: 18px;
            color: #666;
            &:hover{
                color: #444;
                cursor: pointer; 
            }
        }
    }
    
}

ol.selectedFilters > li > span.label::after{
    content: " :";
}

ol.selectedValues > li > span.remove::after{
    content: "x";
    cursor: pointer;
    padding: 0 4px;
    outline: none;
    font-size: 14px;
    line-height: 18px;
}

ol:is(.selectedValues, .staged-for-delete) > li > button.remove,
li.searchAspect > button.delete {
    padding-left: 5px;
    padding-bottom: 2px;
    cursor: pointer;
    font-size: 12px;
    text-transform: lowercase;
    border: none;
    color: #444;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    &:hover{
        color: #777;
    }
}

ol:is(.selectedValues, .staged-for-delete) > li > button.remove:hover,
li.searchAspect > button.delete:hover {
  background: var(--hover-background);
}

/*main.worksheet section.reportContainer span.searchArea input.searchInput{
    border: thin solid #dcddde;
}*/
main.worksheet header span.searchArea > input.searchInput{
    width: 220px;
}

main.worksheet span.searchArea input.searchInput{
    border: none;
    display: inline-block;
    background-color: transparent;
    margin-top: auto;
    padding-left: 25px;
    margin-left: 0px;
    cursor: pointer;
    border-radius: var(--border-radius);

    background-image: url("images/searchGrey16x16.jpg") ;
    background-size: 14px 14px;
    background-repeat: no-repeat;
    background-position: 5px 50%; 

    cursor: auto;
    width: auto;
    width: 100%;
    width: -moz-available;          /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
    width: fill-available;

    color: #58585B;
    height: 26px;
    font-size: 12px;
    &:focus{
        outline: 2px solid #dcddde;
        box-shadow: none;
    }
}


section.ttu.displayGrid > div.aspectSearch{
  font-weight: 400;
  border-radius: var(--border-radius);
  background: #FFFFFF;
  /* border: 1px #D0D2D3 solid; */
  box-shadow: var(--box-shadow);

}

section.ttu.displayGrid:not(.report) > div.aspectSearch{
    position: absolute;
    top: 8.5rem;
    left: 1%;
    z-index: 100;
}

section.ttu.displayGrid.report > div.aspectSearch{
    position: absolute;
    top: 133px;
    z-index: 100;
}

article.TtuDetailsTile > section.contentHolder{
    display: grid;
    grid-auto-flow: dense;
    place-content: space-between;
    padding: 0px 50px;
    gap: 10px;
    /*    grid-template-columns: repeat(3, 1fr);*/
    /*now will scale with min space for details being 250px, and will adjust based on screen size 4/14/23/ mw*/
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr) );
    font-size: 14px;
}

/*New Can Do Caroussel*/
article.ttu  article.canDos article.canDos{
  display:none;
}
/*article.ttu section.dash.hasCanDos > article.CanDoManager{
    display: flex;
    flex-direction: row;
}*/
/*article.CanDoManager section[level="Suite"] > ol > li{
  width: 100%;
}*/
/*article.CanDoManager  section[can_dos="0"] ol{
  
  width: inherit;
  display: flex;
  gap: 12px;
  height: 103px;
}*/

article.CanDoManager:empty{
    display: none;
}


article.ttu section.dash > article.canDos.dash > ol.canDoTileHolder{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 0px 0px;
    width: inherit;
    gap: 16px;
}
section.dash > article.CanDoManager > span.carousselChevron{
  background-image: url(images/dropdown64.png);
  background-position: center;
  vertical-align: middle;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: 30px 30px;
  width: 35px;
  height: 35px;
  min-width: 35px;
  border-radius: 50%;
  /*outline: 1px solid #cccccb;*/
  /*margin: auto 10px;*/
}
section.dash > article.CanDoManager > span.carousselChevron:hover{
    background-color: #f2f2f3;
    cursor: pointer;
}
section.dash > article.CanDoManager > span.carousselChevron.before{
    transform: rotate(90deg); 
    margin: auto 10px auto 0px;
}
section.dash > article.CanDoManager > span.carousselChevron.after{
    transform: rotate(270deg); 
    margin: auto 0px auto 10px;
}

article.TtuDetailsTile > section.contentHolder > article.detailsArticle{
    display: inline-grid;
    padding: 2px;
    grid-column: span 1;
    width: fit-content;
    text-align: left;
    /*margin: 0px auto;*/
}

article.TtuDetailsTile > section.contentHolder > article.detailsArticle > span.value{
    font-weight: bold;
}

article.ttu > section.dash article.TaskTableUsageTileHandler.tileEmpty{
  display:none;
}
/*article.TaskTableUsageTileHandler.noData.noAdd{*/
section.drillDown section.dash > article.TaskTableUsageTileHandler.noData{
  display:none;
}

section.dash article.contentDiv,
article.reportTile > div > article.dashTile article.contentDiv{
    display: flex;
    flex-direction: row;
    width: inherit;
}

section.dash > article.TaskTableUsageTileHandler article > h6{
    margin: 0px auto;
    width: fit-content;
    text-align: center;
    font-weight: bold;
    font-size: 13px;
    color: #444;
}
article.TTUReport > article.noChart{
    text-align: center;
    color: #cccccb;
    font-size: 14px;
    margin-bottom: 20px;
}

article.dashTile > article.contentDiv > article.chartWrapper{
/*    width: 100%;
    width: -moz-available;          
    width: -webkit-fill-available;  */
    min-width: 100px;
    max-width: 500px;
}

article.chartWrapper{
    width: -moz-available;          /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
    transition: all 0.5s linear;
    height: auto;
    
    svg{
        background-color: transparent !important;
    }
    
    rect,
    {
        cursor: pointer;
    }
}

html.job-opening-page div.lovInputHolder{
    z-index: 30;
}
div.lovInputHolder{
    z-index: 51; 
    max-width: 90vw;
}

/*article.chartDisplay > article.chartWrapper:not(.active){
    display: none;
}*/

div.DataList > .active.collapseDataList{
    display: block;
}

article.reportDetails > span.toggleView.export{
    margin: 0px;
    margin-left: auto;
}

section > span.toggleView.clicked > div.menuBridge{
  /* border: 5px solid transparent; */
  border: 7px solid transparent;
  width: 100%;
  transform: translate(0%);
  position: absolute;
  top: 21px;
  background: transparent;
  padding: 10px;
  margin: 0px;

}

section > span.toggleView.clicked > div.menuBridge > ul.menuElements{
  width: unset;
  position: absolute;
  top: 0px;
  left: 0px;
  transform: translatex(25%);
  background: #fff;
  padding: 10px;
}

span.ttuTitle > span.dateRangeHeader{
    font-size: 14px;
    font-weight: lighter;
    color: #888;
}

article.more > article > h5,
article.more > li > a.link-title,
article.resource-item > a.link-title,
article.resource-item > a.content-link{
    font-size: 12px;
    font-weight: normal;
    color: #444;
    display: block;
    margin: auto 0;
}

div.html-link-container:hover{
    text-decoration: underline;
}

section.dash > article.more:empty{
  display:none;
}

section.reportContainer.empty-chart-tile:not(.chartExpanded) article.emptyTile > div.emptyImage{
  background-image: url(images/noOutstanding.png);
  background-size: 100px 70px;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  height: 70px; 
}


section.reportContainer.empty-chart-tile:not(.chartExpanded) article.emptyTile > span.emptyText{
    color: #cccccb;
    font-size: 14px;
    font-weight: normal;
}
section.reportContainer.empty-chart-tile.chartExpanded article.emptyTile > span.emptyText{
    font-size: 0px;
}
article.chartDisplay article.emptyTile{
    text-align: center;
    margin: auto;
}
article.reportDetails > div.DataList tr.drillDownAware:not(.trHeaderClass):hover{
    background-color: #f3f3f3;
    cursor: pointer;
}
article.reportDetails > div.DataList tbody tr:nth-child(odd){
    /*background-color: #f9f9f9;*/
}
div.emptyImg,
article > section.dash > article.ToDoTile.emptyState > div.todoContainer{
  background-image: url(images/noOutstanding.png);
  background-size: 100px 70px;
  background-repeat: no-repeat;
  background-position: center;
  margin-top: 40px;
  position: relative;
  height: 100px;
}

div.emptyTile,
div.empty-tile{
    color: #cccccb;
    background-image: url(images/wzIcons/noToDos500.png);
    background-size: 150px;
    background-repeat: no-repeat;
    background-position: center;
    
    font-size: 14px;
    position: relative;
    text-align: center;
    padding-top: 180px;
    height: fit-content;
}

article.emptyState > div.emptyTile{
    text-align: center;
    font-weight: lighter;
    color: #cccccb;
    
    margin: 0px auto;
}

div > article.hasReport > article.contentDiv{
    height: 300px;
    display: flex;
}

a#logoLink{
    height: auto;
    width: auto;
    margin-right: 10vw;
    display: flex;
    > img#companyImg {
        max-height: 50px;
        max-width: 200px;
    }
}

ol.columnLayout > li div[code="PARTICULARS"] div.valueHolder.promptAbove,
ol.columnLayout > li div[code="COMMENTS"] div.valueHolder.promptAbove{
    display: flex;
    flex-direction: column;
}

/*Internal Comms & Effective Date Styling*/
div.Field[code="EFFECTIVE_DATE"] > div.valueHolder,
ol.columnLayout li.columnHolder[name="COMMENTS"] > div.valueHolder,
div.Field[code="PARTICULARS"] > div.valueHolder,
div.Field[code="COMMENTS"] > div.valueHolder{
    display: flex;
    flex-direction: column;
    > textArea{
        min-height: 80px;
        border: 2px #dcddde solid;
    }
}

html .ql-toolbar.ql-snow{
    padding: 5px;
}

html ol.layout > li div.valueHolder.promptAbove.editor,
li.columnGroup > fieldset > ol.layout > li.editor > div.valueHolder{
    display: flex;
    flex-direction: column;
    gap: 0px;
    
    > label{
        /*margin-bottom: 8px;*/
    }
    
    > div.button-bar,
    > div.ql-toolbar{
        padding: 5px;
        border: 1px solid #ccc;
        border-bottom: none;
        box-sizing: border-box;
    }
    > textarea{
        border-color: #ccc;
        border-radius: 0 0 5px 5px;
        resize: vertical;
    }
}

article.ttu.promptAbove > section.dash ol.layout > li div.valueHolder,
article.ttu.child-of-SUMMARY.promptAbove  li div.valueHolder,
ol.layout > li div.valueHolder.promptAbove{
    display: flex;
    flex-direction: column;
    gap: 8px;    
}

article.ttu.child-of-SUMMARY.promptAbove li.columnHolder:first-child  div.valueHolder {
  margin-top: 0px;
}

article.ttu:not(.promptAbove) > section.dash ol.layout > li div.valueHolder.promptAbove,
article.ttu:not(.promptAbove) > section.dash li.columnGroup.fullWidth > fieldset > ol.layout > li.editor > div.valueHolder{
    > label{
/*        font-weight: 700;
        color: #666;
        letter-spacing: 1px;
        font-size: 12px;
        text-transform: uppercase;*/
    }
}

article.ttu > section.dash > article.ttu[mpath="TCICA_EVENT"]{
    padding: 0 !important;
}

/*Recap List Open Close*/
header.recordRecap {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
}

/*ol.recapList > li > div > article.ttu:not(.noSummaryHeaderText) > header.recordRecap::after{
  content: " ";
  display: block;
  height: 16px;
  width: 16px;
  background-size: 15px;
  background-repeat: no-repeat;
  transition: transform 0.3s ease;
  background-position: left center;
  background-image: url(images/canDoArrowHEX444.png);
  position: absolute;
  left: 0px;
  margin: 2px;
}
ol.recapList > li:not(.expanded) > div > article.ttu > header.recordRecap::after{
    transform: rotate(-90deg);
}*/

ol.recapList > li > div > article.ttu > header.recordRecap:hover{
    cursor: pointer;
}
article.ttu.hideRecordRecap > header.recordRecap{
  display:none;
}


/*Custom CanDO Styling*/
/*[activity_task] aside.context-support,*/
[activity_task] footer.pagination-container,
[activity_task] div.recapListReportToggle{
    display: none;
}
section.ttu[activity_task]:not(.drilledDown){
    box-shadow: var(--box-shadow);
    padding: 15px;
    border-radius: 7px; 
    > aside.context-support{
        /*display: none;*/
    }
}

/*Improving fit for default tasks used as CanDos - mw 12/22/2023*/
.cando-path-start section.dash > article.TaskTableUsageTileHandler.parentTableInserted,
.cando-path-start section.dash > article.more.parentTableInserted{
    display: none !important;
}

/*Hide settings button within CanDos - mw 8/7/2024*/
.ttu.cando-path-start > header div.toggle-buttons > button.toggle-settings-button{
    display: none;
}

.ttu.noTile,
section.ttu[activity_task]:not(.drilledDown){
    > div.recapListContent > table{
        box-shadow: none;
        outline: 1px solid #dcddde;
    }
}

#trash-bin {
    display: none;
    position: fixed;
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    background-color: #fadcdf;
    padding: 1.5rem 2rem;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    cursor: pointer;
    pointer-events: auto;

    transition:
      background-color 0.1s ease,
      transform 0.1s ease,
      padding 0.1s ease,
      outline 0.1s ease;
    
    &.drag-over {
        background-color: rgba(255, 200, 200, 1);
        transform: translateX(-50%) scale(1.3);
        outline: 1px dashed var(--product-red);
        outline-offset: -4px;
    }
    
    i.trash-icon {
        display: inline-block;
        width: 30px;
        height: 30px;
        background-color: var(--product-red);

        -webkit-mask-image: url(images/wzIcons/trash-bin.svg);
        mask-image: url(images/wzIcons/trash-bin.svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: cover;
        mask-size: cover;

        pointer-events: none;
    }
}



div.drop-overlay{
    position: absolute;
    z-index: 9999;
    background: white;
    border: 1px solid #ccc;
    padding: 8px;
    border-radius: var(--border-radius); 
    box-shadow: var(--box-shadow);
    display: flex;
    gap: 0.5rem;
    transition: width 0.3s ease, height 0.3s ease;
    width: fit-content;
    
    button,
    .drop-btn {
        font-size: 12px;
        font-weight: normal;
        padding: 4px 10px;
        background-color: #f0f0f0;
        border: 1px solid #ccc;
        outline: none;
        border-radius: 3px;
        cursor: pointer;
        transition: background-color 0.2s ease, border-color 0.2s ease;
        
        &:hover,
        &:hover {
            background-color: #e6f7ff;
            border-color: #1890ff;
        }
        
        &.selected {
            background-color: #e6f7ff;
            border: 1px solid #1890ff;
        }
        
        &.close-overlay-button{
            order: 5;
            background-color: transparent;
            border: none;
            &:hover{
                background-color: #f2f2f2;
            }
        }
    }
}
    
/*Matrix Draggability Styling*/
body main table.matrix{
    td div.mcell.draggable-item {
        cursor: grab;
        user-select: none;
        &:hover {
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }
        &:active {
            z-index: 1;
            cursor: grabbing;
            box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
        }
    }
    
    .drop-overlay {
        position: absolute;
        z-index: 9999;
        background: white;
        border: 1px solid #ccc;
        padding: 8px;
        border-radius: 4px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

        button {
          margin: 0 4px;
          padding: 4px 10px;
          background-color: #f0f0f0;
          border: 1px solid #ccc;
          border-radius: 3px;
          cursor: pointer;

          &:hover {
            background-color: #e6f7ff;
            border-color: #1890ff;
          }
        }
    }

    .drop-placeholder {
        text-align: center;
        padding: 6px;
        font-size: 14px;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--border-radius);
        margin: 4px;
          
        &.drag {
            background-color: #f5f5f5;
            border: 2px dashed #ccc;
            color: #999;
        }
        &.preview {
            background-color: #e6f7ff;
            border: 2px dashed #1890ff;
            color: #1890ff;
        }
    }

    td.drag-over {
        background-color: #e6f7ff;
        outline: 2px dashed #1890ff;
        transition: background-color 0.1s ease, border 0.1s ease;
        border-radius: var(--border-radius);
    }
}

.noTile > header > h2.ttu-title{
    font-size: 16px;
}
/*Unique way of hiding title on drilldown, title needs to follow .drilledDown section, it will use lower order to show first, will hide on drillDown - mw 12/8/2023*/
h3.cando-title{
    font-size: 18px;
    font-weight: bold;
    color: #444;
    margin-bottom: 10px;
    order: -1;
}
article.ttu ~ h3.cando-title,
section.ttu.drilledDown ~ h3.cando-title {
  display: none;
}
section.drillDown{
    display: flex;
    flex-direction: column;
    &:empty{
        display: none;
    }
}

header.tableHeader > h3.ttuTitle,
header.tableHeader > span.ttuTitle,
section.TaskTableUsageRecap header.tableHeader span.tableRecapCounter{
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
}

.fc .fc-daygrid-month-start{
    font-size: 1.75vw;
    font-style: italic;
    color: #29AAE2;
    opacity: 0.7;
}

.fc .fc-button:disabled{
    opacity: 0.50 !important;
    cursor: default !important;
    border-color: transparent !important;
    color: transparent !important;
    background-color: transparent !important;
}

td.fc-day{
    height: 50px;
}

.fc .fc-button-primary:not(:disabled).fc-button-active, 
.fc .fc-button-primary:not(:disabled):active,
.fc .fc-button-primary:hover,
.fc .fc-button-primary{
    background-color: var(--product-green);
    border-color: var(--product-green);
}
.fc .fc-button-primary:not(.fc-button-active):hover{
/*        color: var(--product-green);
        background-color: #e1f5e3;*/
        opacity: 0.70;
}

.fc-daygrid-event-dot{
    margin: 0px 4px 0 0;
}

.fc .fc-button-primary:hover{
    cursor: pointer;
    opacity: 85%;
}
.fc .fc-button-primary:not(:disabled).fc-button-active, 
.fc .fc-button-primary:not(:disabled):active{

}
.fc .fc-button-primary:not(:disabled).fc-button-active:focus, 
.fc .fc-button-primary:not(:disabled):active:focus,
.fc .fc-button-primary:focus{
    box-shadow: none;
}
/*TIMESERIES Chart Styling*/
body main section.time-series-chart[toggle="calendar"] > article.chartWrapper,
body main section.time-series-chart[toggle="timeseries"] > article.fc{
    display: none;
}

section.time-series-chart{
    /*overflow: auto;*/
    position: relative;
    height: fit-content;
}

header.toggle-holder{
    display: block;
    position: absolute;
    width: fit-content;
    right: 0px;
    top: 0px;
    z-index: 8;
}
section.reportContainer header.toggle-holder{
    top: 0px;
}
header.toggle-holder > button.view-toggle{
    border-radius: 3px;
    border: thin solid #dcddde;
    cursor: pointer;
    
    height: 24px;
    margin: 1px;
    padding: 2px;
    
    color: #888;
    font-size: 12px;
    background-color: white;
}

body main .fc .fc-toolbar.fc-header-toolbar{
    /*margin: 5px 0px;*/
    padding: 0px;
    text-transform: capitalize;
}

/*tile calendar compression, calendar condensing*/
div.PwaWorkerCalendar section.time-series-chart > article.fc .fc-button,
.TTUReport > section.time-series-chart > article.fc .fc-button{
    /*padding: 0.15em 0.2em;*/
}

/*div.PwaWorkerCalendar section.time-series-chart > article.calendar-holder.fc .fc-daygrid-body-natural div.fc-daygrid-day-events,
.TTUReport section.time-series-chart > article.calendar-holder.fc .fc-daygrid-body-natural div.fc-daygrid-day-events,
section.calendar-holder.fc .fc-daygrid-body-natural .fc-daygrid-day-events{
    margin-bottom: 0.1em; 
}
section.time-series-chart > article.calendar-holder.fc .fc-daygrid-day-number{
    padding: 0px;
    font-size: 10px;
}
section.time-series-chart > article.calendar-holder.fc .fc-col-header-cell-cushion,
section.calendar-holder.fc .fc-daygrid-day-number{
    padding: 1px 4px;
}
div.PwaWorkerCalendar section.time-series-chart > article.calendar-holder.fc .fc-day-disabled .fc-daygrid-day-top,
.TTUReport section.time-series-chart > article.calendar-holder.fc .fc-day-disabled .fc-daygrid-day-top{
    display: none;
}*/
/*end of compression*/


/*overriding calendar styling*/
body main .TENTATIVE .fc-event-main{
  color: var(--fc-event-border-color) !important;
  background-color: #FFFFFF;
}

.fc > div .fc-cell-shaded, .fc > div .fc-day-disabled {
    background: var(--fc-neutral-bg-color);
}

section.reportContainer .fc > div .fc-day-disabled {
    background: var(--fc-neutral-bg-color);
    height: 0px;
}


.fc-theme-standard td, 
.fc-theme-standard th{
    padding: 2px;
    border: 1px solid #e5e5e5;
}

.fc .fc-daygrid-day-number {
  padding: 1px;
  position: relative;
  z-index: 4;
}

.fc .fc-day-sun,
.fc .fc-day-sat{
/*    background: #f8f8f8;*/
}
    article.IcaToDo.activityContent{
        margin: 5px;
    }
    
    .fc-event.activityContent{
        padding: 2px;
        gap: 2px;
        > img.toDoIcon{
            padding: 10px;
            background-position: center;
            background-size: 18px;
        }
        > div{
            overflow: hidden;
        }
        &:hover{
            background-color: unset !important;
        }
    }
    
    textarea,
    div.ql-editor{
        padding: 5px;
        &:focus-visible{
            outline: 0;
            transition: box-shadow 0.3s ease-in-out;
            box-shadow: var(--box-shadow);
        }
    }
    
    /*Task ToDos And Flags Tile*/
    article.ToDosTile {
        div.toggle-container {
            display: flex;
            flex-direction: row;
            gap: 12px;
            font-size: 14px;
            font-weight: bold;
            
            > span.activities-text{
                flex: 1;
            }
                
            > div.toggle-btn{ 
                display: flex; 
                outline: none;
                position: relative;
                border: none;
                text-align: center;
                align-items: center;
                background-color: transparent;
                padding: 5px;
                line-height: 1;
                color: #888;
                
                &.clickable:not(.active):hover{
                    cursor: pointer;
                    background-color: var(--hover-background);
                    border-radius: 5px;
                }
                
                &.active {
                    > span.text-prompt{
                        color: #444;
                        text-decoration: underline;
                    }
                }

                span.count-dot {
                    color: #FFF;
                    font-size: 11px;
                    text-align: center;
                    padding: 3px;
                    height: fit-content;
                    width: fit-content;
                    border-radius: 20px;
                    min-width: 12px;
                    display: block;
                    margin-left: 0.5rem;
                    vertical-align: middle;
                    text-decoration: none !important;
                    position: inherit;
                }
            }
        }

        ul {
            display: flex;
            flex-direction: column;
            gap: 5px;
            /*margin: 10px 0;*/
            &.scrollable {
                max-height: 420px;
                overflow-y: auto;
                overflow-x: hidden;
                padding-right: 10px;
                box-sizing: border-box;
            }
        }

        li.activityContent {
            display: flex;
            align-items: center;
            gap: 5px;
            padding: 5px;
            border-radius: 0;

            &:not(.more-items) {
                &:last-child {
                    border-bottom: none;
                }
            }

            &.drillDownAware:hover{
                cursor: pointer;
                border-radius: var(--border-radius);
                outline: solid 1px #dcddde;
                background-color: #f6f6f6;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            }

            img.toDoIcon {
                padding: 18px;
                height: 0;
                width: 0;
                background-repeat: no-repeat;
                background-size: cover;  
            }
            
            &.prioritynull{
                order: 1;
            }
            
            div.activityDetails {
                display: flex;
                flex-direction: column;
                overflow: hidden;

                > p {
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                    width: auto;
                }

                > p.todo-title{
                    font-size: 12px;
                    line-height: 15px;
                    font-weight: bold;
                }

                > p.synopsis {
                    color: #444;
                    font-size: 13px;
                    line-height: 17px;
                    font-weight: bold;
                    /*text-transform: capitalize;*/
                }

                > p.recordTitle {
                    color: #666;
                    font-weight: normal;
                    &.drillDownAware:hover {
                        color: #444;
                        cursor: pointer;
                        text-decoration: underline;
                    }
                }
            }
        }
        
        button.list-button{
            font-size: 12px;
            font-weight: bold;
            order: 10;
            margin: 0;
            margin-top: 0.5rem;
            width: auto;
            text-align: center;
            text-decoration: none;
            justify-content: center;
            padding: 3px;
            background-color: transparent;
            border-radius: var(--border-radius);
            color: #444;
            border: none;
            font-family: 'proxima-nova', 'sans-serif';
            &:hover{
                cursor: pointer;
                outline: solid 1px #dcddde;
                background-color: #f6f6f6;
            }
        }

        .activityContent > ol {
            width: 100%;
            width: -moz-available;          
            width: -webkit-fill-available;  
        }
    }
    
    /*Custom Tooltip Styling*/
    .tooltip-container {
        position: absolute;
        display: none;
        z-index: 1000;
        background: #fff;
        border: 1px solid #cccccb; 
        padding: 10px;
        box-shadow: var(--box-shadow);
        border-radius: 5px;
        font-size: 12px;
        color: #444; /* Dark grey text color */
    }

    .tooltip-container ul {
        margin: 0;
        padding-left: 20px;
        list-style-type: disc !important;
    }

    .tooltip-container li {
        margin: 3px 0;
        display: list-item;
    }

    /*Condensed Tile View*/
    article.TaskTableUsageTileHandler article.IcaToDo.activityContent{
        margin: 0;
        padding: 3px;
        border-radius: var(--border-radius);
        gap: 3px;
        &:hover{
            background-color: #dcddde;
            cursor: pointer;
        }
        > img{
            padding: 12px;
        }
        > div.activity-details{
            flex-grow: 1;
            span.value{
                font-size: 11px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }
    
    .activityContent{
        display: flex;
        flex-direction: row;
        padding: 5px;
        align-items: center;
        gap: 5px;
        &.drillDownAware{
            border-radius: var(--border-radius);
            &:hover{
                cursor: pointer;
                outline: solid 1px #dcddde;
                background-color: var(--hover-background);
            }
        }
        
        > img{
            padding: 18px;
            height: 0;
            width: 0;
            background-repeat: no-repeat;
            background-size: cover;
        }
        
        span{
            font-size: 12px;
        }
    }

    /* Priority - Low */
    .toDoIcon{
        background-image: url(images/activities/todoLowSinglePriority64.png);
        
    }
    .toDoIcon.multiple,
    .multiple .toDoIcon{
        background-image: url(images/activities/todoLowMultiplePriority64.png);
    }

    .priority4.multiple .toDoIcon,
    .toDoIcon.priority4.multiple {
        background-image: url(images/activities/todoLowMultiplePriority64.png);
    }

    .flag-type .toDoIcon,
    .toDoIcon.flag-type {
        background-image: url(images/activities/flagLowSinglePriority64.png);
    }
    
    .flag-type.multiple .toDoIcon,
    .priority4.flag-type.multiple .toDoIcon,
    .toDoIcon.priority4.flag-type.multiple {
        background-image: url(images/activities/flagLowMultiplePriority64.png);
    }

    /* Priority - Medium */
    .priority3 .toDoIcon,
    .toDoIcon.priority3 {
        background-image: url(images/activities/todoMediumSinglePriority64.png);
    }

    .priority3.multiple .toDoIcon,
    .toDoIcon.priority3.multiple {
        background-image: url(images/activities/todoMediumMultiplePriority64.png);
    }

    .priority3.flag-type .toDoIcon,
    .toDoIcon.priority3.flag-type {
        background-image: url(images/activities/flagMediumSinglePriority64.png);
    }

    .priority3.flag-type.multiple .toDoIcon,
    .toDoIcon.priority3.flag-type.multiple {
        background-image: url(images/activities/flagMediumMultiplePriority64.png);
    }

    /* Priority - High */
    .priority2 .toDoIcon,
    .toDoIcon.priority2 {
        background-image: url(images/activities/todoHighSinglePriority64.png);
    }

    .priority2.multiple .toDoIcon,
    img.toDoIcon.priority2.multiple {
        background-image: url(images/activities/todoHighMultiplePriority64.png);
    }

    .priority2.flag-type .toDoIcon,
    img.toDoIcon.priority2.flag-type {
        background-image: url(images/activities/flagHighSinglePriority64.png);
    }

    .priority2.flag-type.multiple .toDoIcon,
    img.toDoIcon.priority2.flag-type.multiple {
        background-image: url(images/activities/flagHighMultiplePriority64.png);
    }

    /* Priority - Very High */
    .priority1 .toDoIcon,
    img.toDoIcon.priority1 {
        background-image: url(images/activities/todoHighSinglePriority64.png);
    }

    .priority1.multiple .toDoIcon,
    img.toDoIcon.priority1.multiple {
        background-image: url(images/activities/todoHighMultiplePriority64.png);
    }
    
    .priority1.multiple,
    .priority2.multiple{
        order: -5;
    }
    .priority1,
    .priority2{
        order: -4;
    }
    .priority3.multiple{
        order: -3;
    }
    .priority3{
        order: -2;
    }
    .priority4.multiple{
        order: -1;
    }
    .priority4{
        order: 0;
    }
    
div.todoContainer > div.activityContent li:not(:first-child) {
  display: none;
}

button.hide{
    display: none;
}

 section.recordDash > article > article.canDoHolder[totaldepth="1"] > ol.childrenHolder:empty{
    display: none;
}

article.CanDoManager > section:not([level="Curos"]) > ol.canDoHolder:empty {
  display: none;
}


/*Trying this on, getting double title in EE SS > Schedule... felt broken - mw 12/11/2023*/
section.ttu.noTile > header.tableHeader{
    /*display: none;*/
}


section.drillDown section.TaskTableUsageRecap header.tableHeader span.ttuTitle,
span.ttuTitle > span.dateRangeHeader{
    display: block;
}
span.ttuTitle > span.tableRecapCounter{
    display: inline;
}

section.drillDown > article > header > h2.ttu-title.hasIcon{
    background-repeat: no-repeat;
    background-size: 40px;
    padding-left: 50px;
    background-position: left center;
}

section.data > section.TaskTableUsageRecap.summary{
  box-shadow: 0 0 5px #d9d9d8;
  border-radius: 10px;
  margin: 0px;
}

section.data > section.TaskTableUsageRecap.summary > header.tableHeader{
    padding: 5px;
}

/*changing it to width auto, causing column group holder to span out of width*/
main section.TaskTableUsageRecap div.recapListContent > ol.recapList > li{
    /*padding-left: 15px;*/
    /*width: 100%;*/
    width: auto;
}

div.listNavigation div.rowIndexOfTotal{
    margin: 2px 10px 0 10px;
    width: max-content;
    color: #888;
}

div.PrevNextNavigation div.prevListItem, 
div.PrevNextNavigation div.nextListItem{
    cursor: pointer;
    padding: 8px;
    line-height: 6px;
    border-radius: 50%;
    background: #f4f4f4;
    height: 8px;
}

div.PrevNextNavigation{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    height: fit-content;
    /*margin-top: auto;*/
    
}
main#curosWorksheet::before,
main#curosWorksheet::after,
main#curosWorksheet{
  margin-bottom: 0px; 
  /*padding-top: 10px;*/
  transition: all 0.5s linear;
  
  /*Issue with layering when calendar field is expanded*/
  z-index: 1;
}

/*NEEDS TO BE IN THIS FILE FOR ICON*/
div#sideMenuToggle.sideMenuIcon{
    content: "";
    height: 25px;
    width: 25px;
    margin: 5px;
    background-image: url(images/dropdown64.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px;
    /*margin-left: 10px;*/
    margin-bottom: 20px;
    transform: rotate(-90deg);
    border-radius: var(--border-radius);
    background-color: #f2f2f2;
    transition: ease 0.3;
    &:hover{
        box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.06), 0px 0px 1px rgba(0, 0, 0, 0.04);
        cursor: pointer;
    }
}
nav.sideMenu.active > div.WorkzoomMenu > div.sideMenuToggle{
    transform: rotate(90deg) !important;
}

/*Make all comms tiles half width*/
article.ttu[mpath="TGBIZ_COM"] > section.dash > article.TaskTableUsageTileHandler{
    grid-column: span 3;
}

/*section.dash > article.TaskTableUsageTileHandler{
 min-height: 300px; 
 content-visibility: visible ;
}*/
section.dash.hasCanDos > article.TtuDetailsTile:first-child{
/*  margin-top: 75px;
  position: relative;*/
  padding: 0px;
}

section.dash.hasCanDos > article.TtuDetailsTile:first-child > span.title{
    padding: 10px 12px 0px 12px;
}

section.dash.hasCanDos > article.TtuDetailsTile:first-child > div.container{
    padding: 10px;
}

article.canDos.detailRecord{
  /*margin-top: -100px;*/
  width: 100%;
  position: absolute;
  top: -75px;
}

article.canDos > ol > li:hover,
article.canDos > ol > li.clicked{
    background-color: #f2f2f3;
}

article.canDos > ol > li:hover{
    /*text-decoration: underline;*/
}

ol.canDoTileHolder > li:not(.hide) {
    width: 100%;
  width: -moz-available;          
  width: -webkit-fill-available;  

  border-radius: 8px;
  box-shadow: var(--box-shadow);
  padding: 5px;
  padding-top: 30px;
  text-align: center;
  display: inline-block;
  position: relative;
  cursor: pointer;

  background-repeat: no-repeat;
  background-size: 30px 30px;
  background-position-x: center;
  background-position-y: 5px;
  margin: auto;
/*  padding-top: 30px;
  height: 30px;*/

    grid-column: span 1;
    grid-row: span 1;
    height: 20px;
}

div.valueHolder{
    legend{  
        padding-bottom: 10px;
        padding-left: 0;
        font-weight: 700;
        width: 100%;
        color: #555;
        letter-spacing: 1px;
        font-size: 12px;
        text-transform: uppercase;
        margin-bottom: 15px;
    }
    
    /*Too loose of a selector, causing issues with quill - mw 10/16/2024*/
/*    p{
        margin-bottom: 10px;
        font-size: 12px;
        color: #555;
    }*/
}


article.ttu.noScrollContext > header span.scrollContext{
  display: none; 
}
article.ttu.noScrollContext{
  display: none; 
}


/*article.noTile > header > h2.recapH2,*/

/*Not sure this line below makes sense, use .noHeader if needed, there's scenarios where no tile & header makes sense - mw 11/16/2023*/

article.noTile > header actionContent,
article.noTile > header > div.header-right{
  display:none;
}
main .TaskTableUsageRecap[rowcount]{
  display:block;
  width: 100%;
  width: -moz-available;          
  width: -webkit-fill-available;  
}

main .section:not([mpath^="R"]) .TaskTableUsageRecap[rowcount="0"]{
  display:none;
}
/*aw this causing the whole screen to appear blank
main  .TaskTableUsageRecap[rowcount="0"]{
  display:none;
}
*/
main > div.workspaceContent > .TaskTableUsageRecap[rowcount="0"]:only-child {
  display: block;
}

main .TaskTableUsageRecap[is_searched="Y"][rowcount="0"]{
  display:block;
}
article.dashTile > article.contentDiv{
    display: flex;
    margin: auto;
    justify-content: center;
}

article.chartDisplay article.XnotInFocus,
section article.reportDetails > div.DataList > table.XnotInFocus{
    display: none;
}

article.activityInstructions:empty,
aside.instructionText:empty {
  display:none;
}

ul.dashboardItems:empty{
    display: none;
}

li.BenefitOptions {
    margin-bottom: 2rem;
    background-color: #f9fbfc;
    padding: 15px;
    box-shadow: var(--box-shadow-hover);
    border-radius: var(--border-radius);
    
    article.benefitPlanParent{
        > header {
            font-weight: bold;    
            font-size: 18px;
            color: #444;
        } 
        tr.header {
            background-color: #f6f6f6;
            > td{
                font-size: 14px;
                font-weight: bold;
            }
        }
        tr.option > td{
            /*Options Refinement*/
            label{
                cursor: pointer;
                display: flex;
                gap: 0.5rem;
                align-items: center;
                width: fit-content;
                padding: 2px 5px;
        
                > input[type="radio"]{
                    margin: 0px;
                }
/*                > span{
                    font-size: 13px;
                }*/
                
                input[type="radio"]:checked + span {
                    color: #005cc8;
                    font-weight: bold;
                }
            }
        }
    }
}


table.benefitPlanComparison tr[code="PLAN"] {
  display: none;
}

section.TaskTableUsageRecap > header.tableHeader {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  background: white;
  padding-top: 0px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  
  /*min-height: 50px;*/
  
  
  /*padding: 0 5px;*/
  /*margin: 0 5px;*/
  /*margin: 0 -10px;*/
  /*padding: 0 10px;*/
  /*min-height: 82.33px;*/
}

section.recapListLayout > header.tableHeader > h2.ttu-title > h3.filter-sub-header{
    display: none;
}

header:is(.ttuRecapTabTitle, .task) > span.tableActions {
    display: -webkit-inline-box;
    right: 0px;
    display: flex;
    /*gap: 5px;*/
    gap: 0.5rem;
    flex-direction: row;
    flex-wrap: wrap;
    flex-grow: 2;
    align-items: center;
    height: min-content;
    /*justify-content: flex-end;*/
    padding: 3px 0px;
}
 div.Matrix{
   div.mcell[record-status="D"]{
      border-left-color: #cccccb !important;
      color: #cccccb !important;
   }
   div.mcell[record-status="X"]{
     color:red;
   }
 }

    section[table-alias="BSTx"] div.Matrix{
            margin: 0;
            > table.ttuList{
            box-shadow: none;
            /*outline: solid white;*/
            width: 100%;
            border-collapse: collapse;
                /*Fancy Bordering*/
                tr {
                    border-bottom: 1px solid #cccccb;
                    &:last-child{
                    border-bottom: none;
                    }
                }
                td, th {
                    border-right: 1px dotted #cccccb; 
                    padding: 8px;
                    &:last-child{
                    border-right: none;
                    }
                } 
                
                /*Rest Of Styling*/
                > thead > tr > th {
                    font-size: 12px;
                    font-weight: bold;
                    color: #555;
                    padding: 5px 3px;
                    &:not(:first-child){
                        text-align: center;
                    }
                }
                > tbody{
                  > tr{
                    background-color: white;
                    > td{
                        padding: 0.4rem;
                        /*vertical-align: middle;*/
                        > div.mcell{
                            padding: 3px;
                            padding-left: 5px;
                            user-select: none;
                            position: relative;
                            border: solid 1px #dcddde;
                            background-color: #BCD2E8;
                            border-left: solid 6px #dcddde;
                            border-radius: var(--border-radius);
                            background-color: white;
                            min-height: 70px;                                
                            cursor: pointer;
                            
                            &.drillDownAware:hover{
                                box-shadow: var(--box-shadow);
                                cursor: pointer;
                            }
                            
                            /*Shift States*/
                            &.cancelled-shift{
                                border-left-color: #cccccb !important;
                                background-color: #f2f2f2;
                                div.view-record{
                                    background-color: #e5e5e5;
                                }
                            }
                            
                            &[record-status="D"]{
                                border-left-color: #cccccb !important;
                                color: #cccccb !important;
                            }
                            
                            &.shiftStateP{
                                order: 1;
                                border-left-color: #00a89c;
                                span.shift-state{
                                  color: #00a89c;
                                }
                            }
                            &.shiftStateA{
                                border-left-color: #0d71ba;
                                span.shift-state{
                                  color: #0d71ba;
                                }
                            }
                            &.shiftStateS{
                                border-left-color: #541388;
                                span.shift-state{
                                  color: #541388;
                                }
                            }
                            &.shiftStateT,
                            &.shiftStateV{
                                border-left-color: #f05a26;
                                span.shift-state{
                                  color: #f05a26;
                                }
                            }
/*                            &.shiftStateT{
                                border-left-color: #30362F;
                                span.shift-state{
                                  color: #30362F;
                                }
                            }*/
                        }
                    }
                    &.added > td > div.mcell{
                        border-left-color: var(--add-colour);
                    }
                  }
                }
            }
        }
        
article.noChart{
    color: #cccccb;
    font-size: 14px;
    font-weight: normal;
    margin: 0px auto;
    text-align: center;
}

header.dashTitle div.header-right a.add-new[action]{
    margin: 0 5px;
    /*align-self: end;*/
    /*margin-top: 5px;*/
}
table:not(.many-rows) tfoot{
  display:none;
}

div.personProfile > div{
    display: flex;
    flex-direction: row;
    gap: 5px;
}
div.personProfile div.imageHolder,
div.personProfile img{
    height: 12px;
    width: 12px;
    border-radius: 500px;
    background-size: 12px;
    background-repeat: none;
    
    margin: 1px;
}

/*No Search*/
.ttu.noSearch > header span.searchArea{
    display: none;
}

main.worksheet span.tableActions span.searchArea > aside.filters{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  /*width: -webkit-fill-available;*/
  height: fit-content;
  margin-left: 0px;
  margin-right: 2px;
  /*max-width: 250px;*/
  overflow: hidden;
  top: 50%;
  float: left;
}

body main aside.resultsFilter span.searchArea{
    display: flex;
    flex-direction: column;
    /*gap: 5px;*/
}

/*Why is all this needed? - MW 4/19/2024*/
/*.ttu:not(.noSearch) > header.tableHeader > span.tableActions.borderedAction >*/ 
body main span.searchArea{
    white-space: nowrap;
    margin: 0px;
    background-size: 0px;
    border: 1px solid #cccccb;
    border-radius: var(--border-radius);
    height: fit-content;
    
    display: flex;
    flex-flow: column nowrap;
    
    > aside.filters > ol.searchAspect > li > div.value-header{
        /*display: none;*/
        color: #888;
        &::after {
            content: ":";
        }
    }
}

ol.columnGroupLayout > li.columnGroup[name="PHOT"] label{
    padding-bottom: 10px;
    padding-left: 0;
    font-weight: 700;
    width: 100%;
    color: #666;
    letter-spacing: 1px;
    font-size: 12px;
    text-transform: uppercase;
}

section.drillDown section.TaskTableUsageRecap header.tableHeader span.ttuTitle{
    width: fit-content;
    display: block;
    flex-basis: 100%;
}

div.recapListReportToggle{
    margin: auto 0px auto auto;
    display: flex;
    position: absolute;
    right: 11px;
    top: 1px;
    align-items: center;
    order: 100;
}

article.inActionItem  section.dash > section.data{
    padding: 0px;
}


/*why is this here? - mw*/
article.ActionItems section.dash{
    /*grid-template-columns: none;*/
    width: inherit;
}
article.ActionItems section.dash > section.data{
    box-shadow: none;
}

article.ActionItems section.dash > section.data > ol.columnGroupLayout{
    /*grid-template-columns: none;*/
}

/*hiding toggle within reports*/
body main section.Task > section.TaskTableUsageRecap > header.tableHeader > div.recapListReportToggle{
    display: none;
}

section.drillDown > section.TaskTableUsageRecap > header div.recapListReportToggle > div.recapDiv,
section.drillDown > section.TaskTableUsageRecap > header div.recapListReportToggle > div.reportDiv{
    margin: 0px 2px;
    padding: 7px;
    height: auto;
    width: fit-content;
    outline: solid 1px #888;
    font-size: 14px;
    color: #888;
    cursor: pointer;
    background-color: #f8f8f8;
    border-top: 3px solid white;
    border-radius: 3px;
}
/*section.drillDown > section.TaskTableUsageRecap > header div.recapListReportToggle > div:not(.selected){
    padding-top: 12px;
} */

section.drillDown > section.TaskTableUsageRecap > header div.recapListReportToggle > div.selected{
    border-top: 3px solid var(--primary-theme);
    color: var(--primary-theme);
    background-color: white;
    outline: 1px solid var(--primary-theme);
}

header.dashTitle > span.ttuTitle{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap
}

header.dashTitle > span.ttuTitle > span.recordName{
    font-size: 14px;
    color: #444;
    width: 100%;
}

span.recordStatus{
    border-radius: 10px;
    font-size: 12px;
    width: fit-content;
    padding: 3px 10px;
    margin: 2px;
    background-color: #f2f2f3;
    color: #888;
}

article[record_status="A"] > header.dashTitle > span.ttuTitle > span.recordStatus{
    background-color: #d2f8d2;
    color: #00b300;
}
article[record_status="C"] > header.dashTitle > span.ttuTitle > span.recordStatus{
    background-color: #f2f2f3;
    color: #888;
}

header.dashTitle > span.ttuTitle > span.recordType{
    display: flex;
    font-size: 14px;
    color: #888;
    margin: 5px 3px;
}

@media screen and (min-width: 700px){
    body main section.TaskTableUsageRecap article.TaskTableUsage.expanded {
        padding: 0px; 
    }
}

section.dash > article.more > li,
section.dash > article.more > article.TaskTableUsageTileHandler{
    display: grid;
    padding: 5px;
    grid-template-columns: 20px 1fr;
    align-items: center;
    height: fit-content;
    gap: 5px;
}

section.dash > article.more > li > i,
section.dash > article.more > article.TaskTableUsageTileHandler > i{
    /*background-color: var(--product-green);*/
    background-color: var(--primary-theme);
    width: 20px;
    height: 20px;
    
    padding: 0px;
    /*margin: 5px;*/
    margin-left: 0;
    
    display: block;
    cursor: pointer;
    -webkit-mask-size: cover;
  
    -webkit-mask-image: url(images/resourcesNewScreen64.svg);
    mask-image: url(images/resourcesNewScreen64.svg);
}
section.dash > article.more > article.TaskTableUsageTileHandler[table_key="BIZ_GS"] > i{
    -webkit-mask-size: cover;
    -webkit-mask-image: url(images/wzIcons/wzFav.svg);
    mask-image: url(images/wzIcons/wzFav.svg);
}
section.dash > article.more > article.TaskTableUsageTileHandler[table_key="PER_ACCOUNT"] > i,
section.dash > article.more > article.TaskTableUsageTileHandler[product^="X"] > i{
    -webkit-mask-size: cover;
    -webkit-mask-image: url(images/wzIcons/adminSettings64.svg);
    mask-image: url(images/wzIcons/adminSettings64.svg);
}
section.dash > article.more > article.TaskTableUsageTileHandler.views > i{
    -webkit-mask-size: cover;
  
    -webkit-mask-image: url(images/report64.svg);
    mask-image: url(images/report64.svg);
}
section.dash > article.more > article.TaskTableUsageTileHandler{
    > i[table="PWA"]{
        -webkit-mask-image: url(images/wzIcons/adminHR64.svg);
        mask-image: url(images/wzIcons/adminHR64.svg);
    }
    order: 1;
}
section.dash > article.more > article.TaskTableUsageTileHandler.resource-item.download{
    > i{
        -webkit-mask-image: url(images/resourcesDownload64.svg);
        mask-image: url(images/resourcesDownload64.svg);
    }
    order: 1;
}
section.dash > article.more > article.TaskTableUsageTileHandler.quick-link{
    > i{
        -webkit-mask-image: url(images/resourcesLink64.svg);
        mask-image: url(images/resourcesLink64.svg);
    }
    order: 2;
}
section.dash > article.more > article.resource-item a:hover,
section.dash > article.more > article.resource-item h5:hover{
    text-decoration: underline;
    cursor: pointer;
}

div.valueHolder > label:empty{
    display: none;
}

article.ttu > article.instruction{
    margin: 16px 0;
}

header > h3.transitions{
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
    order: 5;
    margin-left: auto;
}

section.dash > article.more > h4.moreTitle{
    grid-column: -1/1;
}

aside.resultsFilter > ul.detailList{
    height: 800px;
    overflow-y: auto;
}
aside.resultsFilter > ul.detailList,
article.reportDetails > div.DataList{
    /*max-height: 500px;*/
    /*overflow-y: auto;*/
    width: inherit;
    /*padding: 10px 0px;*/
    /*overflow-x: auto;*/
}


section.detailsExpanded > article.reportDetails > div.DataList {
    max-height: none;
}

aside.resultsFilter > span.toggleView {
  border: thin solid #999;
  color: #999;
  background: #fff;
  margin: 0px;
}

main article section.Task > section.recapListLayout{
    margin: 0px;
    /*max-height: 80vh; This is causing reports to not be scrollable*/
}

article.TtuDetailsTile > article.canDos > ol.canDoTileHolder{
    height: fit-content;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(auto-fill, minmax(0px, 1fr));
}

article.TtuDetailsTile > article.canDos > ol.canDoTileHolder > li{
    grid-row: span 1;
    grid-column: span 1;
    width: inherit;
}

/*xxxxxxx noTile feels like it needs no outline when used... trying :not(.noTile) on for now :not(.noTile) mw 10/13/2023 */
.tile-outline,
div.PplTimeOffBalances > div.widget-results-empty,
section.TaskTableUsageRecap.outline,
ol > li.columnGroup.outline,
.outline-element,
table.ttuList,
table.recap,
.cando-item:not(.in-holder),
article.ttu:not(.recapContent):not(.child-of-SUMMARY):not(.noOutline):not(.noDataSectionOutline) > section.dash > section.data,
article.TaskTableUsage.outline:not(.recapContent):not(.child-of-SUMMARY){
    box-shadow: var(--tile-box-shadow);
    outline: thin solid #dcddde;
    padding: 15px;
    border-radius: var(--border-radius);
}

article.ttu.noDataSectionOutline > section.dash > section.data{
    padding: 0px;
}

html main article.ttu > section.dash > section.data{
    z-index: 2;
}

html main article.ttu > section.dash > section.ttu:has(#inputPopup:not([style*="display: none"])) {
  z-index: 100;
}

html main article.ttu > section.dash > section.ttu{
    z-index: 1;
    position: relative;
}

div.mcell:hover div.utility-button[record-status="X"] {
  display:block;
}

/*Utility Button For DrillDowns*/ 
div.mcell div.utility-button{
    display: none;
    position: absolute;
    background-color: white;
    cursor: pointer;
    padding: 2px;
    border-radius: var(--border-radius);
    transition: background-color 0.1s, box-shadow 0.1s;
    z-index: 1;
    width: 16px;
    height: 16px;
    right: 1px;
    bottom: 1px;
    margin-bottom: 2px;

    &:hover,
    &:active{
        cursor: pointer;
        background-color: #f2f2f2;
        box-shadow: var(--box-shadow);
    }
    
    &.view-record{
        background-color: #f2f2f2;
        box-shadow: var(--box-shadow-hover);
        
        &:hover,
        &:active{
           box-shadow: var(--box-shadow); 
        }
        > i{
            -webkit-mask-image: url("images/wzIcons/up-right-arrow.svg");
            mask-image: url("images/wzIcons/up-right-arrow.svg");
        }
    } 
    
    > i{ 
        display: inline-flex;
        justify-content: space-between;
        background-color: #999;     
        -webkit-mask-size: 16px;
        mask-size: 16px;
        height: 16px;
        width: 16px;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
    }
}   
body.mobileDevice div.mcell div.utility-button{
    display: block;
}

div.mcell:hover div.utility-button{
    display: block;
}




/*column / entry table styling*/
table.column-entry-table{
    /*margin: 5px 0;/*/
    > thead > tr > th{
        font-size: 10px;
        font-weight: bold;
        color: #666;
        text-transform: uppercase;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 2px;
        margin: 2px;
    }
    > thead > tr > th.empty{
        display: none;
    }
    > thead > tr > th[cn="RECORD_STATUS"]{
        font-size: 0px !important;
        width: 16px;
    }
    > tbody{
        > tr{
            background-color: #fefefe;
            background-color: transparent;
        }
        > tr.drillDownAware:hover{
            outline: 1px solid #dcddde;
            cursor: pointer;
            border-radius: 2px;
        }
    }
}
table.column-entry-table th{
    font-weight: normal;
    color: #666;
    padding: 5px 3px;
    margin: 0;
}

table.column-entry-table tr td{
    padding: 2px;
    > span.value{
        overflow: hidden;
        display: block;
        
        width: inherit;
        height: inherit;
        max-height: 110px;
        
    }
    &.ellipses-text > span.value{
        text-wrap: nowrap;
        text-overflow: ellipsis;
    }
}

/*main section.drillDown > section.ttu > section.ReportDashHandler > article.reportTile:empty{
AW - this should only be this way if... the tile got loaded and is still empty
    display: none;
}*/

section.dash > article.TtuDetailsTile > section.contentHolder > article.detailsArticle > span.prompt{
    color: #999;
    height: 20px
}

section.dash > article.TtuDetailsTile > div.container > div > span.value{
    height: 50px;
    overflow-wrap: anywhere;
}

li.moreTile > div.menuBridge,
li.moreTile > div.menuBridge > ul.menuElements{
    width: fit-content;
}
li.moreTile > div.menuBridge > ul.menuElements{
    border: thin solid #cccccb;
}

li.moreTile > div.menuBridge > ul.menuElements > li > a{
    color: #444;
    font-weight: 700;
}
li.moreTile > div.menuBridge > ul.menuElements > li:hover{
    background-color: #f2f2f3;
}

li.moreTile > div.menuBridge > ul.menuElements > li > a:hover{
    cursor: pointer;
    /*text-decoration: underline;*/
}

ol.canDoTileHolder > li.moreTile > div.menuBridge{
  position: absolute;
  top: 60px;
  left: 0px;
}

main article.TaskTableUsage[mpath^="TCIACT_TODO"] div.IactJsonTransitions {
    top: 10px;
    right: 20px;
}

div.policySection > div.IcaJsonContent{
    width: auto;
}

div.IcaJsonContent section.data > ol.columnGroupLayout{
    margin-left: 0px;
}
/*Styling Drop Down Menus*/
span.toggleView:not(.clicked) > div.menuBridge,
main .toggleView:not(.clicked) > ol.childrenHolder,
ol.canDoBullpen{
    display: none;
}

html.previewing,
html.searching{
    overflow: hidden;
    body{
        div.searchContent{
            animation: expand 0.5s forwards;
        }

        div.workspaceContent,
        nav.sideMenu{
            opacity: 0.9;
            filter: blur(2px);
            -webkit-filter: blur(2px);
        }
    }
} 
    
div.preview{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    
    a > span{
        color: #888;
    }
    
    span.delete{
        position: inherit;
        background-image: url(images/AttachDelete14x14.png);
        background-repeat: no-repeat;
        height: 14px;
        width: 14px;
        cursor: pointer;
    }
}
div.preview span.delete {
    background-image: url("images/AttachDelete14x14.png");
    background-repeat: no-repeat;
    height: 14px;
    width: 14px;
    padding: 2px;
    cursor: pointer;
    /*position: absolute;*/
    position: relative; 
    /*margin-left: 10px;*/
    /* top: 25px; */
    display: none;
    /*changed to position relative to fix delete button in ToDos instance MW 5/24/2023*/
}

main aside.resultsFilter span.toggleView{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    position: relative;
    width: auto;
    margin: 0px;
    padding: 0px;
}


main .toggleView.clicked > div.menuBridge{
    z-index: 1;
    position: absolute;
    width: 20px;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
}

header.tableHeader > span.toggleView.clicked > div.menuBridge {
    display: block;
    width: fit-content;
    border: 7px solid transparent;

    position: absolute;
    transform: translate(-50%);
    left: 50%;
    top: 90%;

    padding: 5px;
}

main .toggleView.clicked > div.menuBridge > ul.menuElements,
main .toggleView.clicked > div.menuBridge > ol{
  width: fit-content;
  z-index: 5;
  
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--dropdown-background);

  box-shadow: var(--box-shadow);
  border-radius: 7px;
}

section.ttu > header span.dateRangeHeader{
  display:none;
}
section.Task > section.ttu > header span.dateRangeHeader{
  display:block;
}

article.CanDoManager{
  /*width: 100%;*/
  grid-row: span 1;
  flex-direction: column;
}

main ul.menuElements > li > img.reportExportImage{
    padding-left: 10px;
    margin: auto;
    vertical-align: middle;
}

main span.toggleView > span.Title{
    display: inline;
    vertical-align: middle;
   width: fit-content;
    flex: 1 0 auto;
    margin-left: 0px;
    
     /* color: #444; */
}

/*Search Aspects Distinction*/
ol.listOfValues > li.searchAspect{
    margin: 3px 0px;
    cursor: pointer;
}
ol.listOfValues > li.searchAspect > span.label{
      color: #444;
      font-weight: bold;
}
ol.listOfValues > li.searchAspect > span.label:after{
    content: ":";
}
ol.listOfValues > li.searchAspect > span.value{
    font-weight: normal;
    padding-left: 5px;
    color: #666;
}

main .clicked.toggleView > div.menuBridge:before,
main .clicked.toggleView > div.menuBridge:after{
    top: -17px;
    transform: translate(-50%);
    left: 50%;
    border: 10px solid transparent;
    border-bottom-color: #d9d9d8;
    content: '';
    position: absolute;
    bottom: 100%;
    width: 0;
    /*padding: 10px;*/
    height: 0;
}

main span.expansionIndicator{
  background-image: url(images/dropdown64.png);
  background-position: center;
  vertical-align: middle;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: 15px 15px;
  width: 20px;
  height: 20px;
}
main span.clicked > span.expansionIndicator{
    transform: rotate(180deg);
}

article.CanDoManager > ol.canDoBullpen{
    display: none;
}

article.canDoHolder{
    width: inherit
}


section.ttu[view_mode="recap"] > .ReportDashHandler{
  display:none;
}
section.ttu[view_mode="report"] > header span.ttu-title-count,
section.ttu[view_mode="report"] > header span.tableActions :not(span.tableActions div.recapListReportToggle, span.tableActions div.recapListReportToggle *),
section.ttu[view_mode="report"] > .recapListContent{
  display:none;
}


/*AW new cando work*/
article.CanDoManager section[level="Suite"] > ol.canDoHolder,
article.CanDoManager > section:not([level="Curos"]) > ol.canDoHolder{
    width: inherit;
    display: flex;
    gap: 12px;
    height: 110px;
}
article.CanDoManager > section > ol.canDoHolder{
    width: 100%;
}

article.CanDoManager.has-carousel > section {
    width: -moz-available;
}

article.CanDoManager > section[level="Suite"]:not([holders="1"]) > ol.canDoHolder > li,
article.CanDoManager section[level="Curos"] section[level="Suite"] > ol.canDoHolder > li,
article.CanDoManager > section:not([level="Curos"]):not([holders="1"]) > ol.canDoHolder > li,
article.CanDoManager > section[level="Suite"][holders="1"] section[holders="0"]  > ol.canDoHolder > li{
    width: -webkit-fill-available;
    width: -moz-available;
    cursor: pointer;
    border-radius: 8px;
    box-shadow: var(--box-shadow);
    position: relative;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #444;
    
    background-size: 40px 40px;
    background-repeat: no-repeat;
    background-color: transparent;
    background-position: center top 15px;
    
}

ol > li > section[level="Module"] > h4{
    padding-top: 65px;
}

div.completeIcon.complete {
  background-image: url("images/progressOnTrack64.png");
  background-repeat: no-repeat;
  background-size: cover;
  height: 0;
  width: 0;
  padding: 8px;
  border-style: none;
}  

/*As per Aislins request, hiding empty ToDos at module level*/
article.ttu.ttu-depth-2 > section.dash > article.ToDosTile.emptyState{
    display: none !important;
}

div.completeIcon.incomplete {
  height: 0px;
  width: 0px;
  padding: 8px;
  background-size: cover;
  background-image: url("images/progressBehind64.png");
}

section.canDoParent > h4{
    background-image: url(images/canDoArrowHEX444.png);
    background-position: bottom 3px right;
    padding-right: 20px;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: 13px;
    color: #444;
    
/*    height: 20px;
    width: 20px;*/
} 
section.canDoParent.clicked > h4{
    /*transform: rotate(180deg);*/
} 

div[domain="FILE"] > div.preview > img {
    width: 16px;
    height: 16px;
}

.pdf-container,
.docx-container {
    height: auto;
    background: #fff;
    box-sizing: border-box;
    touch-action: pinch-zoom;
}

div.docx-wrapper {
    padding: 2rem;
    font-size: 14px;
    line-height: 1.6;
    background: white;
    border: 0.25rem solid #cccccb;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border-radius: var(--border-radius, 8px);
    margin: 2rem auto;
    max-width: 900px;
    overflow-x: hidden;
    position: relative !important;

    > section.docx {
        all: unset;
        display: block !important;
        width: auto !important;
        padding: 0 !important;
        min-height: unset !important;
        box-shadow: none !important;
        margin: 0 !important;
        background: none !important;
        
        p:empty{
            display: none;
        }
    }
}
        
.file-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    
    &.active {
      opacity: 1;
      transform: translateY(0);
    }

    div.overlay-content {
        pointer-events: auto;
        padding: 15px;
        background: #fff;
        border-radius: var(--border-radius);
        max-width: 85%;
        min-width: 50vw;
        max-height: 80vh;
        min-height: 20vh;
        width: auto;
        height: auto; 
        display: flex;
        flex-direction: column;
        gap: 1rem;
        box-shadow: 0 4px 8px rgba(0.2, 0.2, 0.2, 0.3);
        position: relative;
    
        > header.sticky-header{
            display: flex; 
            justify-content: flex-end;
            align-items: center;
            gap: 0 1rem;
            padding: 10px;
            flex-wrap: wrap; 
            
            > span.file-title{
                color: #444;
                font-size: 20px;
                font-weight: bold;
                flex-grow: 1;
                text-align: left;
            }
            
            > button.download-button{
                outline-color: #666;
                color: #555;
                &:hover{
                    background-color: var(--hover-background);    
                }

                &:focus{
                    background-color: var(--hover-background);
                    box-shadow: var(--box-shadow-hover);
                }

                > i{
                    background-color: #222 !important;
                }
            }
            
            .close-button{
                font-size: 20px;
                position: inherit;
            }
        }

        div.file-preview-content {
            flex: 1;
            width: 100%;
            height: 100%;
            overflow-y: auto;
            overflow-x: hidden;
            background: #f9f9f9;
            box-sizing: border-box;
            border-radius: var(--border-radius);
            
            > span.file-error{
                display: block;
                width: fit-content;
                margin: auto;
                font-size: 16px;
            }
        }
        
        img.file-image,
        canvas.pdf-canvas,
        audio.file-audio {
            min-width: 50%;
            min-height: 30vh;
            max-width: 90vw; 
            max-height: 80vh;
            object-fit: contain;
            margin: auto;
        }
        
        video.file-video {
            width: 100%;
            height: 100%;
            object-fit: contain;
            max-width: 100%; 
            max-height: 100%; 
            margin: auto;
            display: block;
        }
    }
}

i.email-icon,
i.download-icon{
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;  
    background-color: #111;
    cursor: pointer;
    &:hover{
        background-color: var(--product-green);
    }
}

i.download-icon{
    -webkit-mask-image: url(images/download-icon.svg);
    mask-image: url(images/download-icon.svg);
}

i.email-icon{
    -webkit-mask-image: url(images/wzIcons/email-icon.svg);
    mask-image: url(images/wzIcons/email-icon.svg);
}

div[domain="FILE"] > div.preview > a {
    &:hover {
      text-decoration: underline;
    }
}
div[domain="FILE"] [data-tooltip]:after {
    top: 56%;
    left: 30%;
}

div.preview > img{
/*    max-height: 150px;
    max-width: 150px;*/

    /*height width ratio was wonky before*/
    height: 25px;
    width: 25px;
    background-color: transparent;
    
}

article.CanDoManager > section[level="Module"][holders="0"] > h4,
article.CanDoManager > section[level="Suite"][holders="1"]  section[holders="0"] > h4{
  display:none;
}

article.CanDoManager > section[level="Curos"] > ol.canDoHolder > li  {
    transition: opacity 200ms, display 200ms;
    display: none;
    opacity: 0;
}

article.CanDoManager > section[level="Curos"] > ol.canDoHolder > li:first-child  {
    display: block;
    opacity: 1;
}
article.CanDoManager section[level="Suite"]:not([holders="1"])  section[level]:not(.clicked) > ol,
article.CanDoManager section[level]  section[level] li:not(.more-tile) section[level]:not(.clicked) > ol {
  display:none;
}
/*AW end new cando work*/

/*** MA - Start of new cando carousel ***/
article.CanDoManager section[level="Suite"]:not([holders="1"]) section[level].clicked > ol,
article.CanDoManager section[level] section[level] section[level].clicked > ol{
    display: flex; 
    flex-direction: column;
    align-items: center;
}
article.CanDoManager section[level="Suite"]:not([holders="1"]) section[level].clicked > ol,
article.CanDoManager section[level] section[level] section[level].clicked > ol,
ol.more-canDo-list{
    display: block;
    background-color: white;
    border-radius: 8px;
    box-shadow: var(--box-shadow);
    width: fit-content;
    z-index: 1;
    
    transform: translate(-50%);
    left: 50%;
    position: absolute;

    user-select: none;
}

/***** Start of can do drop downs syling - MA ******/ 
article.CanDoManager section[level="Suite"]:not([holders="1"]) section[level].clicked > ol > li.canDoItem,
article.CanDoManager section[level] section[level] section[level].clicked > ol > li.canDoItem,
ol.more-canDo-list > li.canDoItem{
    border-radius: var(--border-radius);
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: .25rem;
    padding-bottom: .25rem;
    min-width: 8rem;
    background-image: none;
}
ol.more-canDo-list > li.canDoItem > a{
    background-image: none;
    padding: 0px;
    margin: 0px;
    font-weight: 500;
    display: block;
    text-align: center;
    width: auto;
    color: #444;
    padding-top: 0px;
}

section.reportContainer section.time-series-chart,
section.reportContainer section.time-series-chart article.chartWrapper > div.chart,
section.reportContainer section.time-series-chart article.chartWrapper{
    height: -webkit-fill-available;
    height: -moz-available;
    height: 100%;
}

/* Setting Flash Message, ToDo and CG order properties, first tile will get -1 order so it always shows before CANDOS, rest will have default 0 including CANDO */
    /* Flash Message */
    div.flash-message {
        order: -50;
    }
    
    /* To Do Tile & More Title */
    section.dash > article.more > h4.moreTitle,
    section.dash > article.ToDosTile{
        order: -20;
    }

    /* Internal Messaging */
    section.dash > article.ttu[mpath="TCICA_EVENT"]{
        order: -10;
    }
    
    /* Column Groupings */ 
    article.ttu.cando-manager-first > section.dash > article.CanDoManagerV2,
    article.ttu:not(.cando-manager-first) > section.dash > section.data.column-edit{
        order: -5;
    }

/* START ----- PRODUCT AREA ICONS*/ 
i.product-area-icon{
    height: 40px;
    width: 40px;
    display: block;
    margin: 0 auto;
    background-color: #666;
    /*outline-color: #666;*/
    outline-color: #cccccb;
    -webkit-mask-size: cover;
    /*background-color: #023A51;*/
    -webkit-mask-image: url(images/wzIcons/adminHR64.svg);
    mask-image: url(images/wzIcons/adminHR64.svg);
}
    
    /*ALL SUITES - COLOURS*/
    li.cando-item:hover {
        transition: background-color 0.3s ease;
    }

    li.cando-item:is([product="O"],[product="OW"],[product="OF"], [product="OS"],[product="OR"],[product="OG"],[product="H"],[product="HC"],[product="HJ"],[product="HR"],[product="HW"],[product="HO"],[product="HP"],[product="F"],[product="FS"],[product="GC"],[product="FP"],[product="R"],[product="RR"],[product="RA"],[product="RT"]){
        > i{
            background-color: var(--hr-suite);
        }
    }

    li.cando-item:is([product="W"],[product="WSZ"],[product="WL"],[product="WA"],[product="WF"],[product="WC"],[product="WT"],[product="WR"],[product="WV"],[product="WI"],[product="WG"],[product="WS"],[table="BIZ_WS_SCHED"],[table="BIZ_WS_PLAN"]){
        > i{
            background-color: var(--workforce-suite);
        }
    }

    li.cando-item:is([product="P"],[product="BE"],[product="BP"],[product="B"],[product="BG"],[product="WX"],[product="BC"],[product="BA"],[product="PR"],[product="PB"],[product="PA"],[product="PU"],[product="PV"],[product="PF"],[product="PC"],[product="PT"]){
        > i{
            background-color: var(--payroll-suite);
        }
    }

    li.cando-item:is([product="T"],[product="TM"],[product="TC"],[product="TG"],[product="TS"],[product="TL"],[product="TD"],[product="TU"]){
        > i{
            background-color: var(--talent-suite);
        }
    }
    
    /* H SUITE - ICONS*/
    i.product-area-icon:is([product="H"],[product="HR"],[product="HW"]){
        -webkit-mask-image: url(images/wzIcons/eeProfile64.svg);
        mask-image: url(images/wzIcons/eeProfile64.svg);
    }
    /*Specialty CanDo Icons For H*/
    li[task="TASK-THPWA_SPOUSE"] i.product-area-icon:is([product="HW"]){
        -webkit-mask-image: url(images/wzIcons/wedding_icon.svg);
        mask-image: url(images/wzIcons/wedding_icon.svg);
    }
    li[task="TASK-THPWA_EMERG"] i.product-area-icon:is([product="HW"]){
        -webkit-mask-image: url(images/wzIcons/addEmergDependentInfo64.svg);
        mask-image: url(images/wzIcons/addEmergDependentInfo64.svg);
    }
    li[task="TASK-THPWA_P2P_CHANGE"] i.product-area-icon:is([product="HW"]){
        -webkit-mask-image: url(images/wzIcons/changeDep64.svg);
        mask-image: url(images/wzIcons/changeDep64.svg);
    }
    li[task="TASK-THPWA_PARENT"] i.product-area-icon:is([product="HW"]){
        -webkit-mask-image: url(images/wzIcons/becomingParent64.svg);
        mask-image: url(images/wzIcons/becomingParent64.svg);
    }

    li[task="TASK-THPWA_CANCEL_TERMINATION"] i.product-area-icon:is([product="HW"]){
        -webkit-mask-image: url(images/wzIcons/cancel-button.svg);
        mask-image: url(images/wzIcons/cancel-button.svg);
    }

    i.product-area-icon[product="HJ"]{
        -webkit-mask-image: url(images/wzIcons/jobs64.svg);
        mask-image: url(images/wzIcons/jobs64.svg);
    }
    i.product-area-icon:is([product="HC"]){
        -webkit-mask-image: url(images/wzIcons/onboarding64.svg);
        mask-image: url(images/wzIcons/onboarding64.svg);
    }

    /*Module - Safety*/
    i.product-area-icon:is([product="F"]){
        -webkit-mask-image: url(images/wzIcons/mgrSafety64.svg);
        mask-image: url(images/wzIcons/mgrSafety64.svg);
    } 
    i.product-area-icon:is([product="FS"]){
        -webkit-mask-image: url(images/wzIcons/recordIncident64.svg);
        mask-image: url(images/wzIcons/recordIncident64.svg);
    } 
    i.product-area-icon:is([product="FP"]){
        -webkit-mask-image: url(images/wzIcons/addMedicalRecord64.svg);
        mask-image: url(images/wzIcons/addMedicalRecord64.svg);
    } 
    li[task="TASK-TFPIN_ADD"] > i.product-area-icon{
        -webkit-mask-image: url(images/wzIcons/addPersonalInjury64.svg);
        mask-image: url(images/wzIcons/addPersonalInjury64.svg);
    } 

    /*Module - Recruiting*/
    i.product-area-icon:is([product="R"],[product="RR"],[product="RA"]){ 
        -webkit-mask-image: url(images/wzIcons/mgrRecruiting64.svg);
        mask-image: url(images/wzIcons/mgrRecruiting64.svg);
    }
    i.product-area-icon:is([product="RT"]){ 
        -webkit-mask-image: url(images/wzIcons/talentPools64.svg);
        mask-image: url(images/wzIcons/talentPools64.svg);
    }

    /*Module - Enagement*/
    i.product-area-icon[product="GC"]{ 
        -webkit-mask-image: url(images/communicationsMemo64.svg);
        mask-image: url(images/communicationsMemo64.svg);
    }
    [task="TASK-TGCOM_MEMO"] i.product-area-icon[product="GC"]{ 
        -webkit-mask-image: url(images/communicationsMemo64.svg);
        mask-image: url(images/communicationsMemo64.svg);
        /*background-color: #25aae1;*/
    }    
    [task="TASK-TGCOM_ALERT"] i.product-area-icon[product="GC"]{ 
        -webkit-mask-image: url(images/communicationsAlert64.svg);
        mask-image: url(images/communicationsAlert64.svg);
        /*background-color: #cc3333;*/
    }   
    article.more > article.TaskTableUsageTileHandler[table_key="PWA_GC"] > i.more-image[table="PWA"],
    [task="TASK-TGCOM_RESOURCE"] i.product-area-icon[product="GC"]{ 
        -webkit-mask-image: url(images/resourcesDownload64.svg);
        mask-image: url(images/resourcesDownload64.svg);
    }   
    [ttu="COM_GS_POLL"] i.product-area-icon[product="GC"]{ 
        -webkit-mask-image: url(images/communicationsPoll64.svg);
        mask-image: url(images/communicationsPoll64.svg);
    } 
    [ttu="COM_GS_SURVEY"] i.product-area-icon[product="GC"],
    [task="TASK-TGCOM_SURVEY"] i.product-area-icon[product="GC"]{ 
        -webkit-mask-image: url(images/communicationsSurvey64.svg);
        mask-image: url(images/communicationsSurvey64.svg);
    } 
    [ttu="COM_GS_DC"] i.product-area-icon[product="GC"]{ 
        -webkit-mask-image: url(images/wzIcons/addDashContent64.svg);
        mask-image: url(images/wzIcons/addDashContent64.svg);
    } 
    h4[mpath="TGPWA_RESOURCES"] > i.product-area-icon,
    [task="TASK-TGCOM_SIGNED"] i.product-area-icon[product="GC"]{ 
        -webkit-mask-image: url(images/wzIcons/addSignedDoc64.svg);
        mask-image: url(images/wzIcons/addSignedDoc64.svg);
    } 
    [task="TASK-TGCOM_CALENDAR"] i.product-area-icon[product="GC"]{ 
        -webkit-mask-image: url(images/wzIcons/addCalEvent64.svg);
        mask-image: url(images/wzIcons/addCalEvent64.svg);
    } 

    /*Module - Organization*/ 
    i.product-area-icon:is([product="O"],[product="OW"],[product="OS"],[product="OR"],[product="AB"]){
        -webkit-mask-image: url(images/wzIcons/eeCompany64.svg);
        mask-image: url(images/wzIcons/eeCompany64.svg);
    }

    i.product-area-icon:is([product="OG"],[product="OF"]){
        -webkit-mask-image: url(images/wzIcons/policies64.svg);
        mask-image: url(images/wzIcons/policies64.svg);
    }

    i.product-area-icon:is([product="OU"],[product="BA"]){
        -webkit-mask-image: url(images/wzIcons/suppliers64.svg);
        mask-image: url(images/wzIcons/suppliers64.svg);
    }

    /*Quick Start CANDO Icons*/
    li[task="TASK-TXBIZ_CLOCK_BADGE_LOAD"] > i.product-area-icon{
        -webkit-mask-image: url(images/wzIcons/adminWorkforce64.svg);
        mask-image: url(images/wzIcons/adminWorkforce64.svg);
        background-color: #29AAE2;
    } 
    li[task="TASK-TXBIZ_LEAVE_BAL_LOAD"] > i.product-area-icon{
        -webkit-mask-image: url(images/wzIcons/leaveManagement64.svg);
        mask-image: url(images/wzIcons/leaveManagement64.svg);
        background-color: #29AAE2;
    } 
    li[task="TASK-TXBIZ_DEPENDENTS_LOAD"] > i.product-area-icon{
        -webkit-mask-image: url(images/wzIcons/changeDep64.svg);
        mask-image: url(images/wzIcons/changeDep64.svg);
        background-color: var(--product-green);
    } 
    li:is([task="TASK-TXBIZ_COMP_LOAD"],[task="TASK-TXBIZ_EXTERNAL_ID_LOAD"],[task="TASK-TXBIZ_ASSGND_ITEMS_LOAD"]) > i.product-area-icon{
        -webkit-mask-image: url(images/wzIcons/eeProfile64.svg);
        mask-image: url(images/wzIcons/eeProfile64.svg);
        background-color: var(--product-green);
    } 
    li:is([task="TASK-TXBIZ_ORG_LOAD"],[task="TASK-TXBIZ_GROUP_LOAD"]) > i.product-area-icon{
        -webkit-mask-image: url(images/wzIcons/eeCompany64.svg);
        mask-image: url(images/wzIcons/eeCompany64.svg);
        background-color: var(--product-green);
    } 
    li[task="TASK-TXBIZ_ADP_SYNC"] > i.product-area-icon{
        -webkit-mask-image: url(images/wzIcons/runSyncTasks.svg);
        mask-image: url(images/wzIcons/runSyncTasks.svg);
        background-color: var(--product-green);
    } 
    li[task="TASK-TXBIZ_WORKING_HRS_LOAD"] > i.product-area-icon{
        -webkit-mask-image: url(images/wzIcons/jobs64.svg);
        mask-image: url(images/wzIcons/jobs64.svg);
        background-color: var(--product-green);
    } 
    li[task="TASK-TXBIZ_CCM_LOAD"] > i.product-area-icon{
        -webkit-mask-image: url(images/wzIcons/adminTalent64.svg);
        mask-image: url(images/wzIcons/adminTalent64.svg);
        background-color: #662F90;
    } 
    li:is([task="TASK-TXBIZ_BEN_ENROL_LOAD"],[task="TASK-TXBIZ_DESIGNATION_LOAD"]) > i.product-area-icon{
        -webkit-mask-image: url(images/wzIcons/eeBenefits64.svg);
        mask-image: url(images/wzIcons/eeBenefits64.svg);
        background-color: #272361;
    } 
    li:is([task="TASK-TXBIZ_CDN_TAX_LOAD"],[task="TASK-TXBIZ_EE_BANK_LOAD"],[task="TASK-TXBIZ_SUNDRY_LOAD"],[task="TASK-TXBIZ_REC_ENTRIES_LOAD"]) > i.product-area-icon{
        -webkit-mask-image: url(images/wzIcons/accounting64.svg);
        mask-image: url(images/wzIcons/accounting64.svg);
        background-color: #272361;
    } 

    /*W SUITE - ICONS*/
    i.product-area-icon:is([product="W"],[product="WSZ"],[product="WG"],[table="BIZ_WS_PLAN"]){
        -webkit-mask-image: url(images/wzIcons/adminWorkforce64.svg);
        mask-image: url(images/wzIcons/adminWorkforce64.svg);
    }

    i.product-area-icon:is([product="WS"],[product="WI"],[product="WS"][table="BIZ_WS_SCHED"],[product="WV"]){
        -webkit-mask-image: url(images/wzIcons/adminWorkforce64.svg);
        mask-image: url(images/wzIcons/adminWorkforce64.svg);
    }

    li[ttu="SHIFT_COMPLEMENT"] > i.product-area-icon{
        -webkit-mask-image: url(images/wzIcons/required-task-icon.svg) !important;
        mask-image: url(images/wzIcons/required-task-icon.svg) !important;
    }

    i.product-area-icon:is([product="WL"]){
        -webkit-mask-image: url(images/wzIcons/leaveManagement64.svg);
        mask-image: url(images/wzIcons/leaveManagement64.svg);
    }
    li[task="TASK-TWPLV_WITHDRAW_REQUEST"] i.product-area-icon:is([product="WL"]){
        -webkit-mask-image: url(images/wzIcons/withdrawLeave64.svg);
        mask-image: url(images/wzIcons/withdrawLeave64.svg);
    }
    i.product-area-icon:is([product="WR"],[product="WA"]){
        -webkit-mask-image: url(images/wzIcons/travelRequests64.svg);
        mask-image: url(images/wzIcons/travelRequests64.svg);
    }
    i.product-area-icon:is([product="WF"]){
        -webkit-mask-image: url(images/wzIcons/eeExpenses64.svg);
        mask-image: url(images/wzIcons/eeExpenses64.svg);
    }
    i.product-area-icon[product="WX"]{
        -webkit-mask-image: url(images/wzIcons/addExpenseStatement64.svg);
        mask-image: url(images/wzIcons/addExpenseStatement64.svg);
    }

    i.product-area-icon:is([product="WC"],[product="WT"]){
        -webkit-mask-image: url(images/wzIcons/adminWorkforce64.svg);
        mask-image: url(images/wzIcons/adminWorkforce64.svg);
    }

    i.product-area-icon:is([product="L"],[product="LD"]){
        -webkit-mask-image: url(images/wzIcons/labour64.svg);
        mask-image: url(images/wzIcons/labour64.svg);
    }
    li[ttu="PDP_TD"] > i.product-area-icon{
        -webkit-mask-image: url(images/wzIcons/eeProfile64.svg);
        mask-image: url(images/wzIcons/eeProfile64.svg);
    }

/*P SUITE - ICONS AND COLOURS*/
    i.product-area-icon:is([product="P"],[product="PR"],[product="PU"]){
        -webkit-mask-image: url(images/wzIcons/adminPayroll64.svg);
        mask-image: url(images/wzIcons/adminPayroll64.svg);
    }

    i.product-area-icon:is([product="PB"],[product="PA"]){
        -webkit-mask-image: url(images/wzIcons/accounting64.svg);
        mask-image: url(images/wzIcons/accounting64.svg);
    }
    i.product-area-icon:is([product="PV"],[product="PF"]){
        -webkit-mask-image: url(images/wzIcons/adminPayroll64.svg);
        mask-image: url(images/wzIcons/adminPayroll64.svg);
    }

    i.product-area-icon:is([product="PC"],[product="PT"]){
        -webkit-mask-image: url(images/wzIcons/adminPayroll64.svg);
        mask-image: url(images/wzIcons/adminPayroll64.svg);
    }

    /*Module - Benefits*/
    i.product-area-icon:is([product="BE"],[product="BP"],[product="B"],[product="BG"],[product="BC"]){
        -webkit-mask-image: url(images/wzIcons/eeBenefits64.svg);
        mask-image: url(images/wzIcons/eeBenefits64.svg);
    }

    /*T SUITE - ICONS AND COLOURS*/
    i.product-area-icon:is([product="T"],[product="TM"],[product="TC"],[product="TG"],[product="TS"]){
        -webkit-mask-image: url(images/wzIcons/adminTalent64.svg);
        mask-image: url(images/wzIcons/adminTalent64.svg);
    }
    i.product-area-icon:is([product="TG"]){
        -webkit-mask-image: url(images/wzIcons/target-icon.svg);
        mask-image: url(images/wzIcons/target-icon.svg);
    }

    i.product-area-icon:is([product="TL"]){
        -webkit-mask-image: url(images/wzIcons/mgrLearning64.svg);
        mask-image: url(images/wzIcons/mgrLearning64.svg);
    }

    i.product-area-icon:is([product="TD"]){
        -webkit-mask-image: url(images/wzIcons/careers-icon.svg);
        mask-image: url(images/wzIcons/careers-icon.svg);
    }

    i.product-area-icon:is([product="TU"]){
        -webkit-mask-image: url(images/wzIcons/adminTalent64.svg);
        mask-image: url(images/wzIcons/adminTalent64.svg);
    }    

    section.dash > article.more > article.TaskTableUsageTileHandler{
        &[table_key="BJO_REQ_SKILLS"] > i,
        &[table_key="BJO_REQ_CERTS"] > i,
        &[table_key="BJO_DES_SKILLS"] > i,
        &[table_key="BJO_DES_CERTSS"] > i{
            -webkit-mask-image: url(images/wzIcons/adminTalent64.svg);
            mask-image: url(images/wzIcons/adminTalent64.svg);
        }
    }

    /*SYSTEM - ICONS*/
    i.product-area-icon:is([product="CS"],[product="X"],[product="XQ"],[product="XA"],[product="XE"],[product="XZ"],[product="CU"],[product="OC"]){
        -webkit-mask-image: url(images/wzFav.png);
        mask-image: url(images/wzFav.png);
        mask-size: 20px !important;
        -webkit-mask-size: 20px !important;
    }

    i.product-area-icon:is([product="GS"]){ 
        -webkit-mask-image: url(images/wzIcons/adminSettings64.svg);
        mask-image: url(images/wzIcons/adminSettings64.svg);
    }

    i.product-area-icon:is([product="CD"]){
        /*background-image: url(images/configSync64.png);*/
        -webkit-mask-image: url(images/wzIcons/adminSettings64.svg);
        mask-image: url(images/wzIcons/adminSettings64.svg);
    } 

    li[task="TASK-SYNC_TASKS"] i.product-area-icon:is([product="CD"]){
        -webkit-mask-image: url(images/wzIcons/runSyncTasks.svg);
        mask-image: url(images/wzIcons/runSyncTasks.svg);
    } 

    li[task="TASK-SYNC_CUSTOMER_TABLE_CACHE"] i.product-area-icon:is([product="CD"]){
        -webkit-mask-image: url(images/wzIcons/runRefreshCache.svg);
        mask-image: url(images/wzIcons/runRefreshCache.svg);
    } 

    li[task="TASK-TQRCODE"] i.product-area-icon{
        -webkit-mask-image: url(images/wzIcons/mobile-device-icon.svg);
        mask-image: url(images/wzIcons/mobile-device-icon.svg);
    } 
    
    /*CAN DO MORE ICON*/
    .more > i.product-area-icon{
        -webkit-mask-image: url(images/wzIcons/more64.svg);
        mask-image: url(images/wzIcons/more64.svg);
    }
    /*INTERNAL COMM*/
    body main [internal-comm="Y"] > i.product-area-icon{
        -webkit-mask-image: url(images/wzIcons/communicationsMessage64.svg) !important;
        mask-image: url(images/wzIcons/communicationsMessage64.svg) !important;
    }
    
    li[task="TASK-TWPWA_CLOCK_IN_OUT"] i.product-area-icon{
        -webkit-mask-image: url(images/wzIcons/clocking-cando.svg);
        mask-image: url(images/wzIcons/clocking-cando.svg);
    }

/*END ----- PRODUCT AREA ICONS*/

section.companyNavUser > span.searchArea {
  display: none;
}
img.profile-photo{
  height: 35px;
  width: 35px;
  line-height: 35px;
  background: #0c4b6a;
  color: white;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  object-fit: cover;  
}

article.chartDisplay,
article.TTUReport{
  overflow:  auto;
}
article.TaskTableUsageTileHandler > article.TTUReport:not([report='VWBPR']):not([report='VWBST_STATUS']){
    max-height: 375px;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-top: 0px;
}

section.Task div.ReportScreen table.summaryTable{
  /*display:table;*/
  width:100%;
}

/*section.Task[view_group_item] section.time-series-chart,
section.Task[view_group_item] article.chartWrapper.summary:not(.focus),
section.Task[view_group_item] div.ReportScreen  table.summaryTable{
  display:none;
}
section.Task div.ReportScreen  table.groupTable{
  display:none;
}
section.Task[view_group_item] div.ReportScreen  table.groupTable.focus{
    display: inline-table;
}

section:not([view_group_item]) article.chartDisplay > div > article,
section:not([view_group_item]) article.chartDisplay > .summary{
    display: block;
}
section[view_group_item] article.chartDisplay > div > article{
    display: none;
}

section.Task article.chartWrapper.focus{
  display:block;
}

section.Task[view_group_item] > section.TaskTableUsageRecap > section.reportContainer > article.chartDisplay > article.summary:not(.focus){
    display: none;
} */

section.Task[view_group_item] div.DataList > table.summaryTable,
section.Task div.DataList > table.groupTable:not(.focus),
section.Task[view_group_item] article.chartDisplay div.adminTile,
section.Task[view_group_item] article.chartDisplay .chart-view-element.summary:not(.focus),
section.Task                  article.chartDisplay .chart-view-element:not(.summary):not(.focus){
    display: none !important;
}

section.Task:not([view_group_item]) div.DataList > table.summaryTable{
    display: table;
}
section.Task[view_group_item] .chart-view-element.focus,
section.Task:not([view_group_item]) .chart-view-element.summary{
    display: block;
}

html.visual-release article.TaskTableUsage{
    height: auto;
}

i.close-button{ 
    display: none; 
}

i.repeat-icon{
    mask-image: url(images/wzIcons/thumbtack.svg);
    -webkit-mask-image: url(images/wzIcons/thumbtack.svg);
    
    &.pattern-start{
        background-color: var(--product-green);
        mask-image: url(images/wzIcons/weekly-repeating.svg);
        -webkit-mask-image: url(images/wzIcons/weekly-repeating.svg);
    }
    &.pattern-end{
        mask-image: url(images/wzIcons/weekly-repeating.svg);
        -webkit-mask-image: url(images/wzIcons/weekly-repeating.svg);
        background-color: var(--product-red);
    }
}
    
section.report > section.drillDown article.TaskTableUsage.overlay-aside:not(.drilledDown){
    top: 30px;
}

body main .no-outline,
body main div.recapListContent > ol.recapList > li.no-outline{
    border: none;
    outline: none;
    border-radius: 0px;
}

body main .bottom-border,
body main div.recapListContent > ol.recapList > li.bottom-border{
    padding-bottom: 10px;
    border-bottom: 1px solid #cccccb;
}


html article.ttu.child-overlay > header.dashTitle,
html article.ttu.child-overlay > aside.context-support,
html article.ttu.child-overlay > section.dash {
    filter: blur(2px);
}
    
html section.ttu.child-overlay,
html article.ttu.child-overlay{
    section.drillDown{
        z-index: 100;
        position: fixed;
        position: absolute;
        display: flex;
        width: 100%;
        align-items: center;
        top: 8vh;
        /*top: 0;*/
        
        > article.TaskTableUsage.overlay-aside:not(.drilledDown){
            width: 70vw;
            min-width: 350px;
            top: 0px;
            min-height: 65vh;
            height: auto;
            max-height: 90vh;
            position: sticky;
            overflow: hidden;
            overflow-y: auto;
            background-color: white;
            border: solid 1px #dcddde;
            box-shadow: var(--tile-box-shadow);
            border-radius: var(--border-radius);
            box-sizing: border-box;
            margin: 0;
            padding: 25px;
            padding-top: 0px;
            
            > aside.context-support{
                margin-bottom: 0px;
            }
            
            > header{
                justify-content: flex-start;
                position: sticky !important;
                top: 0px !important;
                margin: 0px -25px 5px;
                padding: 25px 25px 5px;
                /*padding-top: 25px;*/
                margin-bottom: 10px;

                > div.header-right{
                    display: none;
                }
                > i.close-button{
                    padding: 10px;
                }
            }
            > section.dash{
                display: flex;
                flex-direction: column;
                > section.data > ol.columnGroupLayout{
                    /*grid-template-columns: repeat(4, minmax(0px, 1fr));*/
                    grid-template-columns: repeat(2, minmax(0, 1fr));
/*                    @media (min-width: 768px) {
                        grid-template-columns: repeat(4, minmax(0, 1fr));
                    }*/
                }
            }
            label{
                /*white-space: nowrap;*/
                overflow: hidden;
            }
            > aside:is(.notes, .help-text, .settings){
                top: 0;
            }
            > aside.context-support > *{
                display: none;
            }
            section.data{
                height: fit-content;
            }
        }
        
        }
    }
}
    
html.visual-release article.TaskTableUsage.full-height{
    height: 100%;
}
/*
AW this is causing the reports to be pushed to the bottom of the page
html.visual-release article.TaskTableUsage section:not(.dash){
    height: inherit;
}*/

h6.reportTitle:hover{
    text-decoration: underline;
    cursor: pointer;
}
div.report-default-filters {
    display: flex;
    flex-direction: row;
    gap: 3px;
    justify-content: center;
    align-items: center;
    > i.center-dot {
        -webkit-mask-size: 22px;
        -webkit-mask-position: center;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-image: url(images/center-dot.svg);
        mask-image: url(images/center-dot.svg);
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: 22px;
        
        width: 15px;
        height: 15px;
        display: block;
        background-color: #666;
        padding: 0 5px;
        margin: 0;
    }
    > span{
        font-size: 12px;
        /*font-weight: lighter;*/
        text-align: center;
        color: #666;
        width: 100%;
        width: -webkit-fill-available;
        white-space: nowrap;
        max-width: 40%;
        overflow: hidden;
        text-overflow: ellipsis;
        &:not(.centered){
            &:first-child{
                text-align: right;
            }
            &:last-child{
                text-align: left;
            }
        }
    }
}

aside.resultsFilter > ul.menuFilters{
    max-width: 250px;
}

div.linkDiv{
    text-align: center;
}

/*EE Dash Custom Tile Images*/
div.EmployeeLeaveTile img.vacation {
  background-image: url("images/timeVacationBank64.png") ; 
}

div.EmployeeLeaveTile img.banked {
  background-image: url("images/bankedHours64.png") ;
} 

header.tableHeader > span.tableActions label.menu-prompt,
header.tableHeader > span.tableActions span.menu-prompt{
    display: none;
}

div.defaultInstruction{
    color: #666;
}

body main section{
    height: inherit;
}
body main section:not(:empty()){
    height: inherit;
}

main section.Task > section.recapListLayout{
    height: inherit;
}
/*new drop down menus*/
div.select-menu{
    display: flex;
    flex-direction: column;
}
aside.resultsFilter div.select-menu,
aside.resultsFilter div.multi-selection-menu{
    margin: 10px 0px;
}

header div.multi-selection-menu > div.select-menu{
    margin: 0 5px;
    padding: 4px 30px 5px 10px;
}

div.multi-selection-menu > div.select-menu{
    margin: 0px;
}

article.ttu.dash:not(.tab) > header.dashTitle > h2.ttu-title > span.scrollContext{
    /*display: none;*/
}
aside.resultsFilter label.menu-prompt-toggle,
label.menu-prompt,
span.menu-prompt{
    font-size: 13px;
    font-weight: 600;
}
label.menu-prompt-toggle {
    display: inline-flex;
    gap: 3px;
    user-select: none;
}
header div.direct-report {
    border: 1px solid #d0d0d0;
    border-radius: var(--border-radius);
    height: 20px;
    padding: 3px;
    display: flex;
    align-items: center;
}
header label.menu-prompt-toggle {
    margin-inline: 5px;
    color: #888;
}
aside.resultsFilter label.menu-prompt-toggle {
    gap: 1rem;
    width: 100%;
    justify-content: space-between;
}
label.menu-prompt-toggle:hover {
    cursor: pointer;
}
label.menu-prompt-toggle:hover > input {
    cursor: pointer;
    box-shadow: var(--box-shadow);
}

div.todoContainer{
    /*padding-top: 5px;*/
    margin: 10px 0px;
    gap: 8px;
    display: flex;
    flex-direction: column;
}

section.Task[chart-data-type="TIMESERIES"] article.reportDetails{
    /*display: none;*/
    /*     hiding report details on time series reports for the time being... mw 7/6/2023*/
}
section.Task[chart-data-type="TIMESERIES"] article.chartDisplay{
    /*grid-row: span 2;*/
}

ul.select-menu-items-list:not(.active){
    display: none;
}

section.Task,
section.drillDown:not(:empty)
/*html.visual-release section.ttu.TaskTableUsageRecap  - was causing recap lists within a dash to take up too much room - needs to be more specific before adding back - mh - 2023-06-08*/
{
    height: 100%;
}

header > span.tableActions > div.select-menu > select.select-menu-items-list{
    padding: 7px 30px 7px 10px;
    margin: 0px 5px;
    z-index: 2;
}

header > span.tableActions > div.select-menu.dateRangeOptions > select.select-menu-items-list{
    padding: 4px 30px 3px 10px;
    font-size: 12px;
    font-family: 'proxima-nova';
    cursor: pointer;
}

div.select-menu > span{
    font-size: 12px;
    font-family: 'proxima-nova';
}

select.select-menu:hover{
    cursor: pointer;
}

div.emptyTile{
    margin: auto;
    text-align: center;
}

header > span.tableActions > div.select-menu > select.select-menu-items-list[multiple="multiple"]{
    position: absolute;
    height: 100px;
    overflow: inherit;
    transform: translate(-50%);
    left: 50%;
    top: 100%;
    max-height: none;
}

select.select-menu-items-list {  
  background-color: #ffffff;
  background-position: right 10px center;
  background-repeat: no-repeat;
  background-size: auto 50%;
  border-radius:5px;
  border: thin solid #dcddde;
  color: #888;
  padding: 10px 30px 10px 10px;
}


aside.resultsFilter > ul.detailList{
    font-size: 12px;
    height: auto;
    overflow: auto;
    padding-left: 0px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-left: 6px;
}

article.reportDetails table.summaryTable td {
  padding: 5px;
}

article.reportDetails table.summaryTable td > span.indent {
  margin-left: 10px;
}

div.select-menu > label.select-menu-label{
    font-size: 14px;
    color: #444;
    /*font-weight: bold;*/
}

main div.DataList table.expandDataList tr:nth-child(odd):not(:first-child) {
  background-color: #f4f4f4;
}
main div.DataList table.expandDataList tr:nth-child(even):not(:first-child) {
  background-color: white;
}

article.reportDetails table > tbody > tr > td{
    padding: 1rem;
}

span.age-due{
    font-size: 12px;
    font-weight: normal;
    color: #888;
    padding: 0px;
    margin: 0px;
}

header.topMenuHeader a:hover


article.ToDoTile > span.more{
    outline: 1px solid #f2f2f3;
    background-color: #f2f2f3;
    padding: 5px 10px;
    border-radius: var(--border-radius);
    text-decoration: none;
    width: fit-content;
}
article.ToDoTile  > span.more:hover{
    background-color: #e5e5e7;
    outline: 1px solid #e5e5e7;
    text-decoration: none;
    width: fit-content;
    border-radius: var(--border-radius);
}


 /*sub drop down menus*/
 nav.side-menu:not(.active) > section > ul.child-table-list > li[product="CUROS"]{
     font-size: 0px;
 }
 nav.side-menu:not(.active) > section > ul.child-table-list > li[product="CUROS"] > ul.child-table-list > li.ttu{
    font-size: 0px;
 }

 nav.side-menu:not(.active) > section > ul.child-table-list > li[product="CUROS"] > ul.child-table-list > li.hover > div.menu-item-image,
 nav.side-menu:not(.active) > section > ul.child-table-list > li[product="CUROS"] > ul.child-table-list > li.childHover > div.menu-item-image{
    padding-right: 2px;
    margin: 0px;
    box-shadow: var(--box-shadow);
    clip-path: inset(-5px 0px -5px -5px);
    background-color: white;
    z-index: 14;
 }
 html nav.side-menu section.menuList li[product="CUROS"] > span {
   min-height: 30px;
   margin-left: 35px;
 }
 nav.side-menu:not(.active) li[product="CUROS"] > span{
   display:none;
 }
 nav.side-menu:not(.active) li[product="CUROS"] > ul{
   margin-top: 35px;
 }
 nav.side-menu:not(.active) section.menuList li[product="CUROS"] > ul > li {
   min-height: 30px;
   min-width: 30px;
 }
 nav.side-menu:not(.active) section.menuList li[product="CUROS"] > ul > li > *{
   display:none;
 }
 section.menuList li[product="CUROS"],
 section.menuList li[product="CUROS"] > ul > li[table_key][product]{
  background-size: 30px 30px;
  background-repeat: no-repeat;
  /*width: 35px;*/
  /*background-color: transparent;*/
  background-position: 0px 0px;
  position: relative;
  padding-left: 35px;
  
 }
/* section.menuList span.drop-down-expand-span{
   display: block;
   width: 100px;
 }*/
 section.menuList li[table_key][product] > span.drop-down-expand-spanX{
   position: absolute;
   top: 0px;
   left: 35px;
 }
 nav.side-menu.active li[product="CUROS"] > span{
   display:block;
 }
 nav.side-menu:not(.active) section.menuList li[product="CUROS"] > ul{
   position: relative;
 }
 /*hover*/
 /*nav.side-menu:not(.active) */
 section.menuList li[product="CUROS"] > ul > li > ul  {
   position: absolute;
   background-color: white;
   z-index: 9;
   top: 30px;
   left: 40px;
 }
 section.menuList li[product="CUROS"] > ul > li > ul > li {
   padding-left: 5px;
 }
 nav.side-menu:not(.active) section.menuList li[product="CUROS"] > ul > li:first-child > *{
   display:block;
 }
 
 
 
 XXnav.side-menu > section > ul.child-table-list > li[product="CUROS"] > div.menu-item-image,
 XXnav.side-menu > section > ul.child-table-list > li[product="CUROS"] > ul.child-table-list > li > div.menu-item-image{
 cursor: pointer;
  height: 30px;
  width: 30px;
  background-size: 30px 30px;
  background-repeat: no-repeat;
  /*background-color: transparent;*/
  background-position: center;
  /*background-color: white;*/
  padding: 5px;
  /*z-index: 1;*/
 }
 nav.side-menu.active div.menu-item-image{
    background-color: white;
 }
 
 /*menu tucked away text states*/
 nav.side-menu:not(.active) li[product="CUROS"] > ul.child-table-list > li.hover > span > a.menu-item-text,
  nav.side-menu:not(.active) li[product="CUROS"] > ul.child-table-list > li.childHover > span > a.menu-item-text{
     font-weight: bold;
 }

 nav.side-menu li[product="CUROS"] > ul.child-table-list > li > ul.child-table-list > li:hover,
 nav.side-menu:not(.active) li[product="CUROS"] > ul.child-table-list > li > span >a:hover{  
     background-color: #f2f2f3;
     border-radius: var(--border-radius);
 }
 
 nav.side-menu.active ul.child-table-list > li.hover:not(.childHover) > span.drop-down-expand-span,
 nav.side-menu.active ul.child-table-list > li.hover:not(.childHover) > div.menu-item-image{
     background-color: #f2f2f3;
     /*border-radius: var(--border-radius);*/
 }
 /*
 nav.side-menu:not(.active) > section > ul.child-table-list > li[product="CUROS"] > div:hover,
 nav.side-menu:not(.active) > section > ul.child-table-list > li[product="CUROS"] > ul.child-table-list > li[product]:hover{
     background-color: #f2f2f3;
     border-radius: var(--border-radius);
 }
 nav.side-menu > section > ul.child-table-list > li[product="CUROS"] > div.menu-item-image{
    background-image: url(images/MenuIcons/menuHomeIcon.png);
 }
 nav.side-menu > section > ul.child-table-list > li[product="CUROS"] > ul.child-table-list > li[product="H"] > div.menu-item-image{
    background-image: url(images/MenuIcons/menuHR64Icon.png);
 }
 nav.side-menu > section > ul.child-table-list > li[product="CUROS"] > ul.child-table-list > li[product="T"] > div.menu-item-image{
    background-image: url(images/MenuIcons/menuTalentIcon.png);
 }
 nav.side-menu > section > ul.child-table-list > li[product="CUROS"] > ul.child-table-list > li[product="W"] > div.menu-item-image{
    background-image: url(images/MenuIcons/menuWorkforceIcon.png);
 }
 nav.side-menu > section > ul.child-table-list > li[product="CUROS"] > ul.child-table-list > li[product="P"] > div.menu-item-image{
    background-image: url(images/MenuIcons/menuPayrollIcon.png);
 }
 */
 nav.side-menu:not(.active) > section > ul.child-table-list > li[product="CUROS"] > div:hover,
 nav.side-menu:not(.active) > section > ul.child-table-list > li[product="CUROS"] > ul.child-table-list > li[product]:hover{
     background-color: #f2f2f3;
     border-radius: var(--border-radius);
 }
 nav.side-menu > section > ul.child-table-list > li[product="CUROS"] {
    background-image: url(images/MenuIcons/menuHomeIcon.png);
 }
 nav.side-menu > section > ul.child-table-list > li[product="CUROS"] > ul.child-table-list > li[product="H"] {
    background-image: url(images/MenuIcons/menuHR64Icon.png);
 }
 nav.side-menu > section > ul.child-table-list > li[product="CUROS"] > ul.child-table-list > li[product="T"] {
    background-image: url(images/MenuIcons/menuTalentIcon.png);
 }
 nav.side-menu > section > ul.child-table-list > li[product="CUROS"] > ul.child-table-list > li[product="W"] {
    background-image: url(images/MenuIcons/menuWorkforceIcon.png);
 }
 nav.side-menu > section > ul.child-table-list > li[product="CUROS"] > ul.child-table-list > li[product="P"] {
    background-image: url(images/MenuIcons/menuPayrollIcon.png);
 }
 
 nav.side-menu > section > ul.child-table-list{
     width: 165px;
 }
 
 nav.side-menu:not(.active) > section > ul.child-table-list{
     width: fit-content;
 }
 li[product="CUROS"] > ul.child-table-list > li > span.drop-down-expand-span{
     padding: 10px;
     padding-left: 0px;
     padding-bottom: 9px;
 }
 
 /*Open Vs Closed Menu*/
 li[product="CUROS"] > ul.child-table-list > li > ul > li{
     padding-left: 10px;
     padding-right: 10px;
     margin-left: 0px;
     width: fit-content;
     
     background-image: none;
 }
 nav.active li[product="CUROS"] > ul.child-table-list > li > ul > li{
     padding-left: 10px;
     padding-right: 10px;
     margin-left: 30px;
 }
 
/* span.drop-down-expand-span{
    display: flex;
    padding: 0px;
    justify-content: space-between;
    width: fit-content;
    height: fit-content;
    cursor: pointer;
 }*/
 li.ttu > span.drop-down-expand-span:hover{
     cursor: pointer;
  }
 span.drop-down-expand-span > a.menu-item-text{
     width: auto;
    display: block;
    vertical-align: sub;
    font-size: 14px;
 }
 span.drop-down-expand-span > div.collapsible-menu-chevron{
    display: inline-flex;
    vertical-align: text-bottom;
     
    background-image: url(images/dropdown64.png);
    background-position: center;
    vertical-align: middle;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: 15px 15px;
    width: 20px;
    height: 20px;
 }
 span.drop-down-expand-span.menu-expanded > div.collapsible-menu-chevron{
     transform: rotate(180deg);
 }
 
 
 li[table_key="BIZ_ADMIN"] > span.drop-down-expand-span{
/*    margin: auto;
     margin-left: -65px;
     padding: 9px;*/
 }
 
 
 nav.side-menu:not(.active) > section > ul.child-table-list > li[product="CUROS"] span.drop-down-expand-span > div.collapsible-menu-chevron{
     display: none;
 }

 nav.side-menu > section > ul.child-table-list > li[product="CUROS"] > ul.child-table-list{
    /*padding-top: 50px;*/
    /*width: fit-content*/
 }
 
 nav.side-menu > section > ul.child-table-list > li:not([product="CUROS"]){
     display: none;
 }
 nav.side-menu > section > ul.child-table-list > li[product="CUROS"] > ul.child-table-list > li li{
     /*display: none;*/
 }
 
/* nav.side-menu.active > section > ul.child-table-list > li[product="CUROS"]{
     display: grid;
     flex-flow: wrap;
 }*/
  nav.side-menu:not(.active) > section > ul.child-table-list > li[product="CUROS"]{
     display: flex;
     flex-direction: column;
 }
 nav.side-menu > section > ul.child-table-list > li[product="CUROS"] > ul.child-table-list > li{
    display: grid;
    grid-template-columns: 40px 1fr;
    width: 40px;
    /*padding: 5px 0px;*/
    position: relative;
 }
 
 article.ttu.full-width-cg > section.dash > section.data > ol.columnGroupLayout > li.columnGroup,
 ol.columnGroupLayout > li.columnGroup.fullWidth{
     
    grid-column: 1/-1;
    
    /*Do we need this padding on full width items, the non full width use gaps now? not PADDING mw 11/10/2023*/
    /*padding: 10px;*/
 }
 
/* li[product="CUROS"] > ul.child-table-list > li.ttu.childHover,
  li[product="CUROS"] > ul.child-table-list > li.ttu.childHover > span,
  li[product="CUROS"] > ul.child-table-list > li.ttu.childHover > ul,
 li[product="CUROS"] > ul.child-table-list > li.ttu.hover,
  li[product="CUROS"] > ul.child-table-list > li.ttu.hover > span,
  li[product="CUROS"] > ul.child-table-list > li.ttu.hover > ul{
      background-color: #f2f2f3;
  }
 */
  nav.side-menu.active > section > ul.child-table-list > li[product="CUROS"] > span:hover,
 nav.side-menu.active > section > ul.child-table-list > li[product="CUROS"] > ul.child-table-list > li > span:hover{
     /*background-color: #f2f2f3;*/
     /*border-radius: var(--border-radius);*/
 }
 
/*  nav.side-menu:not(.active) > section > ul.child-table-list > li[product="CUROS"] > ul.child-table-list > li > ul.child-table-list,
 nav.side-menu:not(.active) > section > ul.child-table-list > li[product="CUROS"] > span,
 nav.side-menu:not(.active) li[product="CUROS"] > ul.child-table-list > li > span{
     display: none;
 }*/
 
/* nav.side-menu > section > ul.child-table-list > li[product="CUROS"] ul.child-table-list{
     grid-column: span 2;
 }*/
section.data.column-edit:empty{
    display: none;
}
 
 nav.side-menu:not(.active) > section > ul.child-table-list > li[product="CUROS"] > ul.child-table-list > li.hover > span,
 nav.side-menu:not(.active) > section > ul.child-table-list > li[product="CUROS"] > ul.child-table-list > li.childHover > span{
  position: absolute;
  top: -2px;
  padding-left: 55px;
  padding-right: 15px;
  left: -5px;
  padding-top: 12px;
  padding-bottom: 10px;
  margin-left: 0px;
  display: flex;
  z-index: 3;
  flex-direction: row;
}
 nav.side-menu:not(.active) > section > ul.child-table-list > li[product="CUROS"] > ul.child-table-list > li.hover > ul.child-table-list,
 nav.side-menu:not(.active) > section > ul.child-table-list > li[product="CUROS"] > ul.child-table-list > li.childHover > ul.child-table-list{
    display: flex;
    flex-direction: column;  
    
    text-align: left;
    background-color: white;
    border-radius: 8px;
      border-top-left-radius: 0px;
    box-shadow: var(--box-shadow);
    
    width: fit-content;
    position: absolute;
    top: 0px;
    z-index: 2;
    
    margin-left: 35px;
    padding-top: 40px;
    padding-left: 5px;
    padding-right: 15px;
 }
 h2.ttu-title{
    font-size: 18px;
    font-weight: bold;
    width: fit-content;
    display: flex;
    flex-direction: column;
    /*flex-basis: 100%;*/
    /*gap: 5px;*/
    /*padding: 0 5px;*/
 }
 

  
 section.recap span.ttuTitle,
 section.recap h2.ttuTitle,
 section.recap h2.ttu-title {
    /*min-height: 44px;*/
    /*justify-content: end;*/
 }
 
 aside.context-support{
    /*margin-bottom: 10px;*/
    grid-column: -1/1;
    > span.seperator-bracket{
       color: #999;
    }
 } 
 
aside.context-support{
    color: #888;
    font-size: 13px;
    font-weight: normal;
    background-color: white;
    z-index: 16;
    display: flex;
    margin-bottom: 5px;
            
    > span.ellipsis-pd:not(.show-children){
        padding: 0px 8px;
        cursor: pointer;
        letter-spacing: 2px;
        &:hover {
            text-decoration: underline;
            font-weight: bold;
        }
        > *:not(.prompt){
            display: none;
        }
    } 
    > a.context-return{
        padding: 0px 8px;
        color: #666;
            
        display: flex;
        flex-direction: row;
        gap: 3px;
        &:hover {
            cursor: pointer;
            text-decoration: underline;
        }
/*        > i.home-icon{
            -webkit-mask-image: url(images/wzIcons/adminHome64.svg); 
            mask-image: url(images/wzIcons/adminHome64.svg);
            background-color: #666;
            width: 16px;
            height: 16px;
            padding: 0px;
            display: block;
            -webkit-mask-size: cover;
            mask-repeat: no-repeat;
        }*/
    }
 } 

 .drilledDown > aside.context-support,
 article.drilledDown > header.dashTitle,
  article.drilledDown > section.dash > aside.instructionText,
 article.drilledDown > header.dashTitle > *{
     display: none;
 }
 
 h2.ttu-title > h3.context-sub-heading{
    font-size: 12px;
    color: #999;
    font-weight: normal;
    width: fit-content;
    /*margin: 0px 0px -7px 0px;*/
    /*cursor: pointer;*/
 }
 
 article.ttu section[mtitle="details"].data.column-edit.show-more{
    grid-row: span 3;
 }

 
 article.ToDosTile > span.more.drillDownAware{
     cursor: pointer;
     width: fit-content;
     padding: 5px;
     color: #666;
 }
 article.ToDosTile > span.more.drillDownAware:hover{
    text-decoration: underline;
 }
 
 section.TaskTableUsageRecap > header.tableHeader.ttuRecapTabTitle {
    flex-direction: column;
    /*flex-direction: row;*/
 }
 
section.TaskTableUsageRecap > header.tableHeader,
article.TaskTableUsage > header.dashTitle {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem;
  
  padding-left: 8px;
  padding-right: 4px;
  padding-bottom: 2px;
  
  margin-left: -8px;
  margin-right: -4px;
  margin-bottom: 10px;
  justify-content: space-between;
  /*align-items: center;*/
  
    /*gap: 2rem;*/
    /*align-items: center;*/
}

article.TaskTableUsage > div#supportCommandArea, article.TaskTableUsage > div#commandArea{
    padding: 15px;
    box-shadow: var(--box-shadow);
    margin-top: 16px;
    border-radius: 7px;
}

section.ttu.noHeader > header,
article.ttu.noHeader > header{
  /*Is no header needed for recap lists? - MW 2024/10/22*/
  display:none;
}


ol.recapList > li.expanded{
    > div > article.ttu.child-of-SUMMARY > header.recordRecap{
        margin-bottom: 15px;
    }
} 
    
ol.recapList > li > div > article.ttu.child-of-SUMMARY > header.recordRecap  {
    width: auto;
    > .delete {
        font-weight: bold;
        margin-left: auto;
        font-size: 16px;
    }
}

article.ttu.noSummaryHeaderText.child-of-SUMMARY {
  position: relative;
  > header {
    position: absolute;
    top: 0px;
    right: 0px;
    /*Hide the heading, try on - mw 10/21/2024 */
    display: none;
  }
}

article.ttu.noSummaryHeader.child-of-SUMMARY > header{
  display:none;
}

/*> h2.ttu-title*/
.TaskTableUsageRecap.ttu.noRecapTitle > header{
  /*display:none;*/
}

.TaskTableUsageRecap.ttu.noRecapHeader > header  {
  display:none;
}

section.ttu.noActions > header > .tableActions > *,
article.ttu.noActions > header > .tableActions {
  display:none !important;
}

article.expanded > header.dashTitle{
  /*display:none;*/
  /*not sure why this was added so openly, its hiding the header from the top mw 6/26/2023*/
}


li.columnHolder.joinColumn{
  display:none;
}
article.ttu:not(.showRECORD_STATUS) > section.dash > section.details  li.columnHolder[name="RECORD_STATUS"],
li.columnHolder[name="BIZ_ID"],
li.columnHolder[name="P2B_ID"]
{
  display:none;
}

article.TaskTableUsage.showPER_ID:not(.drilledDown) > section.dash > section[mtitle="details"] li.columnHolder[name="PER_ID"] {
  display: inline-block;
}

body ol.columnGroupLayout{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
  
section.data > div.tileHolder,
section.dash,
section.ReportDashHandler > ol {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-flow: dense;
    height: inherit;
    grid-template-rows: auto;
    gap: 16px;
    position: relative;
    /*Issue with layering when calendar field is expanded*/
    z-index: 1;
} 
 
section.dash[productDash="true"] > article.TaskTableUsageTileHandler.first {
    grid-column: span 4;
}

section.TaskTableUsageRecap.report-list div.recapListContent ol.recapList,
section.TaskTableUsageRecap[mpath="TCCTK"] div.recapListContent ol.recapList{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-flow: dense;
    grid-template-rows: auto;
    gap: 16px;
    > li{
        grid-column: span 2;
        height: auto;
        width: auto;
        min-height: 300px;
        max-height: 500px;
        overflow: auto;
        &:nth-child(odd):last-child {
            grid-column: -1/1;
        }
    }
}

 ol.columnGroupLayout.taskPreview{
     grid-template-columns: repeat(4, minmax(0, 1fr));
     grid-auto-flow: unset;
 }
 
    li.prompt-value-display{
        display: flex !important;
        flex-direction: column;
        gap: 5px;

        > label.prompt-item{
            color: #666;
            font-size: 12px;
            text-transform: capitalize;
            text-align: center;
        }
        > value.value-item{
            color: #444;
            font-size: 14px;
            text-align: center;
        }

    }
    
    section.widget-content > ol.context-list{
        display: flex;
        /*flex-direction: row;*/
        flex-direction: column;
        gap: 30px;
        margin: 20px auto;
    }
  
 /*Setting The Size Norms Inrelation To Span Columns, mw added !important if classes are deliberately there they should trump all...*/
  html body main .small-width,
 section.dash > section.TaskTableUsageRecap.small-width,
 html body main div.workspaceContent article.ttu.small-width{
    grid-column: span 2 !important;
 }
 html body main div.workspaceContent .medium-width{
    grid-column: span 3;
 }
html body main div.workspaceContent article.large-width,
html body main .large-width{
    grid-column: span 4 !important;
 }
html body main div.workspaceContent .full-width{
    grid-column: -1/1 !important;
    min-height: auto !important;
    /*Only item on row, no min height needed - mw 3/27/2024*/
 }
 
 html body:not(.candidate-user) main div.workspaceContent article.ttu.show-more{
    grid-row: span 3;
 }
 
 .fc .fc-toolbar-chunk .fc-button{
    flex: 1 1 auto;
    position: relative;
    padding: 0 15px;
    font-weight: bold;
    background-color: white;
    color: var(--product-green);
}
 
 .fc .fc-button{
    font-size: 12px;
    padding: 2px 6px;
}
 
 .fc {
  .fc-col-header,
  .fc-daygrid-body,
  .fc-scrollgrid-sync-table {
    inline-size: 100% !important;
  }
}
 
 section.TaskTableUsageRecap > header.ttuRecapTabTitle > span.tableActions:empty{
     display: none;
 }
 
 div.recapListContent{
     /*padding: 10px 0px;*/
 }
 
 section.TaskTableUsageRecap.recapListLayout > section.ReportDashHandler > ol{
     grid-template-columns: repeat(4, minmax(0, 1fr));
 }
 section.TaskTableUsageRecap[mpath="TCCTK"] div.recapListContent ol.recapList > li,
 ol.columnGroupLayout > li,
 section.dash > article{
   /*grid-column: span 2;*/
 }
 section.dash > article.fullWidth{
   /*grid-column: span 4;*/
 }
 section.ReportDashHandler > ol > li {
   /*grid-column: span 2;*/
 }
 ol.columnGroupLayout:empty,
 ol.columnGroupLayout > li:empty{
   display:none;
 }
 
 ol.columnGroupLayout > li:photo{
   /*display:none;*/
 }
section.data,
 article.ttu section.dash > article:first-child:not(.ToDosTile),
 article.ttu section.dash > article:first-child.CanDoManager{
   grid-column: span 6;
 }
 
 
.reportContainer > .resultsFilter > .tableActions > .recordStatusOptions {
  display: none;
}

.TaskTableUsageRecap > header > span.tableActions > div.dateRange, 
.reportContainer > .resultsFilter > .tableActions > .dateRange:not(.show),
span.tableActions > div.dateRange:not(.show){
  display: none;
}

.TaskTableUsageRecap > header > span.tableActions > div.dateRange.show,
.reportContainer > .resultsFilter > .tableActions > .dateRange.show {
    display: flex;
    flex-direction: row;
    visibility: visible;
    gap: 5px;
    align-items: center;
}

section.reportContainer td.fc-event-container a {
  background-color: transparent;
  border:none;
  position: relative;
}
section.data > section.ttu{
  margin-bottom: 10px;
}
section.data > section.ttu > header > h1{
  display:none;
}

/* Container Query Setup for div.workspaceContent */ 
body.cdBody.postLogin{
    container-type: inline-size;
    container-name: mainContainer;
}

div.workspaceContent {
    container-type: inline-size;
    container-name: workspaceContentContainer;
}

div.workspaceContent {
    container-type: inline-size;
    container-name: workspaceContentContainer;
}
section.column-edit {
    container-type: inline-size;
    container-name: sectionEditContainer;
}
td > div.mcell {
    container-type: inline-size;
    container-name: matrixCell;
}

/*nav.sideMenu#sideMenu{
    transition:max-width 0.5s ease-in;
    max-width: 50px
}*/

article.TaskTableUsage.show-notes.drilledDown > aside.notes,
article.TaskTableUsage.show-settings.drilledDown > aside.settings,
article.TaskTableUsage.show-audit.drilledDown > aside.record-audit,
article.TaskTableUsage.show-help.drilledDown > aside.help-text {
    display: none;
}

/* Used to reposition the grid when the banner is present and aside is open */
body article.TaskTableUsage.ttu:is(.show-help, .show-settings, .show-notes):has(aside.com-banner) {
  grid-template-rows: auto 50px auto;
  & > aside:is(.help-text, .settings, .notes) {
    grid-row-start: 4;
  }
}

/*Drop Down Filter Menus*/
div.record-status-options:not(.expanded) > select.select-menu-items-list{
    max-height: 0px;
    display: none;
}
div.record-status-options.expanded > select.select-menu-items-list{
    min-height: 7.6rem;
    max-height: 170px;
    transition: max-width 0.5s ease-in;
    position: absolute;
    background-color: #f2f2f2;
    color: #666;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
}
div.record-status-options select option{
    padding: 2px;
}
div.record-status-options select option:hover{
    color: white;
    background-color: #007AFF;
    border-radius: var(--border-radius);
}
header.tableHeader > span.tableActions > div.record-status-options{
    width: fit-content;
    min-width: 40px;
    min-height: 20px;
    background-position: center right 5px;
    padding: 3px 30px 3px 10px;
    margin-left: 5px;
    position: relative;
    cursor: pointer;
}
div.record-status-options{
  font-size: 14px;
  font-weight: normal;
  color: #888;
  position: relative;
  background-image: url(images/dropdown64.png);
  background-position: top 7px right 3px;
  background-repeat: no-repeat;
  background-size: 14px 14px;
}

span.searhArea,
div.select-menu > select.select-menu-items-list:not([multiple="multiple"]),
div.select-menu.record-status-options{
    border: thin solid #dcddde;
    padding: 4px 0px 5px 10px;
    border-radius: var(--border-radius);
    min-height: 10px;
    width: -webkit-fill-available;
    width: -moz-available;
    cursor: pointer;
}

select.select-menu{
    border: none;
    color: #666;
    /*background-color: #f2f2f2;*/
    /*padding: 2px;*/
    font-size: 12px;
    border-radius: var(--border-radius);
    min-height: 10px;
    width: fit-content;
    max-width: 100px;
    /*text-align: center;*/
}
/*article.wrapParent > section.dash > section.data{
    grid-template-columns: repeat(4, minmax(0px, 1fr));
    display: grid;
    grid-auto-flow: dense;
    width: auto;
    height: inherit;
    gap: 16px;
}*/

/*article.wrapParent > section.dash > section.data > ol.columnGroupLayout,
article.wrapParent > section.dash > section.data > article{
    width: fit-content;
    grid-column: span 2;
}*/


select.select-menu option { 
    line-height: 20px;
    width: 80px;
}

select.select-menu:hover{
    text-decoration: underline;
}

div.person-role-container{
    display: flex;
    flex-direction: column;
    margin-top: 8px;
}

/*condition to hide add in recap - mw 12/6/2023*/
article.ttu > section.dash > section.ttu:not(.add-multiple):has(> div.recapListContent > ol.recapList > li > article[inserted_row])> header.tableHeader > span.tableActions{
    display: none;
    padding: 0;
    margin: 0;
}

html.visual-release div.recapListDetailNode.aspectSearch {
    background-color: white;
    z-index: 2;
    /*top: 150px;*/
    position: fixed;
    padding: 15px;
    border: thin solid #cccccb;
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius);
    min-width: 50vw;
    /*margin-top: 5px;*/
    /*margin-left: 5px;*/
    flex: 1 0 100%;
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 1fr;
}

div.recapListDetailNode.aspectSearch > h1 {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
}

div.recapListDetailNode.aspectSearch > aside.searchAspects {
    grid-column: span 2;
    max-height: 80vh;
    overflow: scroll;
    
    /*column-count: 1;*/
}
.double-column {
    column-count: 3;
    column-gap: 50px;
    column-rule: solid 1px #ccc;
}

aside.searchAspects > ol {
    margin-bottom: 5px;
}

aside.searchAspects > ol > li:hover,
aside.searchAspects > ol > li:focus{
    color: var(--primary-theme);
    text-decoration: underline;    
}
aside.searchAspects > ol > li {
    display: grid;
    gap: 5px;
    grid-template-columns: 1fr 3fr;
    
}
aside.searchAspects > ol > li:hover {
    cursor: pointer;
}

aside.searchAspects span:hover {
    text-decoration: underline;
}

h2.searchAspectTitle{
    font-size: 14px;
    font-weight: bold;
    width: fit-content;
}

aside.searchAspects span.label {
    color: #555;
    font-weight: bold;
    margin: auto 0;
}

aside.searchAspects span.value {
    margin-right: 5px;
    
}

aside li.searchAspect span.YesNo,
aside li.searchAspect span.YesNo > label {
    color: #444;
}
aside li.searchAspect span.YesNo > label {
    display: inline-flex;
}
aside li.searchAspect span.YesNo > label {
    margin-right: 5px;
}
aside li.searchAspect span.YesNo > label > input {
    margin: 0;
    margin-right: 2px;
    cursor: pointer;
}
aside li.searchAspect span.YesNo > label:hover {
    cursor: pointer;
}


aside.searchAspects span.label:after {
    content: ':';
}

div.recapListDetailNode.aspectSearch > button.closeSearchAspects {
    grid-column: 2;
    grid-row: 1;
    margin-left: 95%; 
    width: 25px;
    height: 25px;
    background: transparent;
    text-align: center;
    font-size: 1rem;    
    border: none;
    border-radius: 7px;
    color: #777777;
    
}
div.recapListDetailNode.aspectSearch > button.closeSearchAspects:hover {
    background: var(--hover-background);
    cursor: pointer;
}
div.recapListDetailNode.aspectSearch > button.closeSearchAspects:focus{
    outline: var(--tab-focus-outline);
}
div.recapListDetailNode.aspectSearch > button.closeSearchAspects:active {
    background: var(--active-background);
}

ol.noRowsFound {
    display: none;
}

/*********** Body editMode START ***********/
    body.editMode div.PrevNextNavigation,
    body.editMode article.TaskTableUsage > header.dashTitle > div.actions {
        display: none;
    }
    
    h3.transitions > span {
        align-self: center;
    }
/*********** Body editMode END ***********/

img.progressSpinner {
  height: 40px;
  width: 40px;
}

aside.filters li.searchAspect > div.dateRange::after,
aside.filters li.searchAspect > span.YesNo::after,
aside.filters li.searchAspect > span.value::after{
  content: " x";
  padding-left: 5px;
  padding-right: 0px;
  /*margin-left: 5px;*/
  cursor: pointer;
  border-left: 1px solid #d0d0d0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
span span.searchArea aside.filters ol.searchAspect.layout > li.searchAspect > div.dateRange,
span span.searchArea aside.filters ol.searchAspect.layout > li.searchAspect > span.YesNo, 
span span.searchArea aside.filters ol.searchAspect.layout > li.searchAspect > span.value {
    border-radius: 0px;
    margin-top: 0;
    display: inline-flex;
    gap: 5px;
    align-items: center;
    padding: 1px 5px;
    width: fit-content;
    margin: 0 2px;
    
    flex-wrap: wrap;
}

div.Matrix thead, 
table.ttuList thead {
  border-bottom: 1px solid #A9A9A9;   
}

div.Matrix > table.ttuList.matrix > thead {
    position: sticky;
    top: 115px;
    z-index: 10;
    background-color: white;
    box-shadow: none;
    border: none;
}

/*Niche top scenario for top heading of matrix schedule in Mgr SS*/
article.ttu[role="M"] article.MasterSchedule[table_key="BIZ_MASTER_SCHEDULE"] div.Matrix > table.ttuList.matrix > thead {
    top: -15px;
}

div.recapListContent table.ttuList.matrix {
    border-collapse: collapse;
    color: #58585B;
    table-layout: fixed;
    max-width: 100%;
    width: 100%;
}
header.tableHeader.stuck ~ div.Matrix > table.matrix > thead > tr > th {
  top: 250px;
  position: sticky;
  background-color: #ffffff;
  padding: 0;
  z-index: 0;
}
section.TaskTableUsageRecap > header.tableHeader.stuck ~ div.Matrix > table.matrix > thead > tr > th {
  /*top:315px;*/ /*SP EE Time Time Off */
  top: 175px;
}
div.Matrix th{
  padding-left: 2px;
}
div.Matrix.analytic{
  margin: 10px;
}

div.Matrix td {
  padding: 2px;
}

div.Matrix > table.matrix > tbody > tr > td {
  /*overflow: hidden;*/
  overflow: visible;
  text-overflow: ellipsis;
  vertical-align: top;
}
div.Matrix > table.matrix > tbody > tr > td div.mcell {
    border-top: thin solid #dcddde ;
    position:relative;
    display: flex;
    flex-flow: row wrap;
}
div.Matrix > table.matrix div.mcell:first-child {
  border-top: none;
}
bodymain div.Matrix td span.inputPlaceholder[domain=TIMEOFDAY] {
    width: auto;
}
div.Matrix td span.inputPlaceholder{
  display: block;
  height: 15px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
div.Matrix td span.inputPlaceholder.empty{
    color: #CCCCCC;
    font-style: italic;
    &:empty{
        display: none;
    }
}
div.Matrix td span.inputPlaceholder[domain], 
div.Matrix td input[domain] {
    border: medium none;
    padding: 0px;
    text-indent: 0;
    width: -webkit-fill-available;
    width: -moz-available;
    border-bottom: thin solid transparent;
    &:focus{
        border-bottom: thin solid #cccccb;
        border-radius: var(--border-radius);
    }
}

span.inputPlaceholder[column_name="JSON_REPEAT"]{
    display: none !important;
}

div.Matrix td div.mcell {
  container-type: inline-size;

  span.inputPlaceholder[domain="TIMEOFDAY"],
  input[domain="TIMEOFDAY"] {
    display: inline-block;
    border: thin solid transparent;
    margin: 0px;
  }
  
  /*Ensuring it is only side by side when theres approp space*/
  @container (min-width: 110px) {
    span.inputPlaceholder[domain="TIMEOFDAY"],
    input[domain="TIMEOFDAY"] {
      width: 44%;
    }
  }
}

div.Matrix td > input[domain="TIMEOFDAY"]{
  /*text-align: right;*/
}
div.Matrix  td > input[domain="TIMEOFDAY"]:last-of-type{
  padding-left: 5px;
  /*padding-right: 5px; SP was causing schedule matrix to expand past borders and be visible behind sticky header*/
  background-image: url("images/timeMatrixDivider10x10.png");
  background-position: left;
  background-repeat: no-repeat;
}
div.Matrix  td > input[domain="TIMEOFDAY"]:first-child{
  background-image:  none;
}
div.Matrix  td > input[domain="TIMEOFDAY"]{
  max-width: 60px;
}

div.Matrix td > input::placeholder {
  font-style: initial;
  color: #aaa;
}
table.ttuList.matrix th {
  /*div.tableHolderDiv table.recap th {*/
  border: none;
}
div.Matrix td input[requested] {
  color: #00770a;
  font-style: italic;
}
div.Matrix td input[requested="Process"] {
  color: #02590f;
}
table.matrix th[domain="FKID"][sub_domain="PWA"]{
  width : 150px ;  
}

/*Shift Matrix States*/
section.ScheduleViewer div.Matrix td > div.mcell{
    margin: 4px;
}

div.Matrix td > div[mpath="TWBST_ASIDE"]{
    border-radius: 5px;
    border: 1px solid #cccccb;
    border-left: 5px solid #cccccb;   
    box-shadow: var(--box-shadow);
    padding: 5px 3px;
    margin: 4px;
    background-color: white;
}

div.Matrix td > div.shiftStateP{
  border-left: 5px solid #00a89c;
}

div.Matrix td > div.shiftStateA{
  border-left: 5px solid #0d71ba;
}

div.Matrix td > div.shiftStateS{
 border-left: 5px solid #541388;
}

div.Matrix td > div.shiftStateV{
  border-left: 5px solid #f05a26;
}
/*End of Shift States - Matrix*/

section.data:has(ol.show-all-columns){
    /*grid-row: span 2;*/
}

/*tile sizing styling for buildTileLayout()*/
div.tileHolder div.smallTile,
article.smallTile.dash > section.dash > section.data{
    grid-column: span 2;
}
div.tileHolder div.mediumTile,
article.mediumTile.dash > section.dash > section.data{
    grid-column: span 3;
}
div.tileHolder div.largeTile,
section.dash > article.largeTile.TaskTableUsage{
    grid-column: span 4;
}
div.tileHolder div.fullTile,
article.fullTile.dash > section.dash > section.data,
section.TaskTableUsageRecap.span-3{
    grid-column: span 6;
}
div.tileHolder div.One{
    grid-row: span 1;
}
div.tileHolder div.Two{
    grid-row: span 2;
}
div.tileHolder div.Three{
    grid-row: span 3;
}
/*AW2023-09-20 will see how it feels showing no data image 
li.TTUReport.empty-report-tile{
    display: none !important;
}
*/
/* was causing recap list header to disappear so user can't change parameters to widen the search or add a new record - MH - 2023-06-05
main  .TaskTableUsageRecap[rowcount="0"]{
  display:none;
}*/
article.ttuListTile ol {
  /*padding-top: 5px;*/
  /*padding-left: 20px;*/
}
article.ttuListTile ol > li {
  cursor: pointer;
  padding: 5px 0px;
  
  display: flex;
  flex-wrap: wrap;
}

article.ttuListTile ol span.title{
  font-weight: bolder;
}
article.ttuListTile ol span.code{
  padding-left: 10px;
}
article.ttuListTile ol span.desc{
  display: block;
  font-size: smaller;
  margin-left: 20px;
  flex-basis: 100%
}

ul.list-preview{
    display: flex;
    flex-direction: column;
    margin: 10px 0;
    gap: 10px;
    > li.record-list-item{
        outline: 1px solid #dcddde;
        box-shadow: none;
        padding: 5px;
        &:hover{
            cursor: pointer;
            outline-width: 2px;
            background-color: var(--hover-background);
        }
        > ul.column-list{
            display: flex;
            flex-direction: column;
            > li.col-item{
                gap: 3px;
                display: flex;
                line-height: 16px;
                flex-direction: row;
                justify-content: center;   
                align-items: center;
                color: #555;
                font-size: 11px;
                &:nth-of-type(1), 
                &:nth-of-type(2) {
                  font-weight: bold;
                }
                > span.col-value[cn="JSON_PROGRESS"] {
                  width: 25%;
                }
            }
        }
    }
}

.todoEffectiveDate {
  width: 100%;
  display: inline-block;
  /*text-align: right;*/
  margin-bottom: 3px;
  font-weight: bold;
}

/*Making report data lists headers sticky, pain in the ass when you scroll and can't see the data*/
section.reportContainer > article.reportDetails > div.DataList > table > thead{
    top: 0px;
    position: sticky;
    z-index: 1;
    position: sticky; 
}

span.value[clmn='RECORD_STATUS']{
    color: #737373;
    font-weight: bold;
    padding-left: 12px;
    background-size: 10px;
    background-position: left center;
    background-repeat: no-repeat;                    
    &[value='A']{
        color: var(--product-green);
        background-image: url(images/recordStatusActive24.png);
    }
    &[value='I']{
        color: #0872ba;
        background-image: url(images/recordStatusInactive24.png);
    }
    &[value='C']{ background-image: url(images/recordStatusClosed24.png); }
    &[value='P']{ background-image: url(images/recordStatusPending24.png); }
    &[value='X']{ background-image: url(images/recordStatusCancelled24.png); }
    &[value='D']{ background-image: url(images/recordStatusDenied24.png); }
    &[value='W']{ background-image: url(images/recordStatusWithdrawn24.png); }
    &[value='E']{ background-image: url(images/recordStatusDenied24.png); }
}

section.loadingReport article.chartDisplay > img.loadingIcon {
    display: block;
    width: fit-content;
    align-self: center;
}

article.TaskTableUsage.hasRequestedChanges h2.requestedChanges{
  display: block;  
  font-weight: bolder;
}
article.ttu.wrapIntoParentDetails > header,
article.ttu.wrapIntoParentDetails > h2.requestedChanges{
  display:none;
}

input[changed="changed"],
li.columnHolder input[change],
td.columnHolder input[change],
div.dateHolder > input[requested], 
div.valueHolder input[requested], textarea[requested], 
div.Matrix td input[requested], span.changedValue {
    border-color: var(--product-green) !important;
    color: var(--product-green) !important;
    font-style: italic;
    font-weight: bolder;
    
    /*outline: 1px solid var(--product-green);*/
}

/*Hierarchy Styling*/
svg > g > line{
    stroke: #dcddde !important;
}
div.chartHolder > svg > g > line{
    padding: 5px;
    text-align: center;
    background-color: #fff;
    border: thin solid #CCCCCC;
    border-radius: 15px;
}
g[node_type='L'] > foreignObject > article {
    /*background-color: #f7f7f9;*/
    > div{
        color: #59667d;
    }
}

g.hideStrandedLeafNode{
    display: none !important;
}

g[depth] > foreignObject > article{
    border-top: solid 5px;
    border-color: #cccccb;
}

g[depth='0'] > foreignObject > article{
    border-top-color: var(--primary-theme-10pct);
}
g[depth='1'] > foreignObject > article{
    border-top-color: var(--primary-theme-20pct);
}
g[depth='2'] > foreignObject > article{
    border-top-color: var(--primary-theme-40pct);
}
g[depth='3'] > foreignObject > article{
    border-top-color: var(--primary-theme-80pct);
}
g[depth='4'] > foreignObject > article{
    border-top-color: var(--primary-theme-90pct);
}
g[depth='5'] > foreignObject > article{
    border-top-color: #F2F2F2;
}

h2.requestedChanges,div.dateHolder > input[requested="Process"], label.valueHolder input[requested],div.valueHolder input[requested="Process"], textarea[requested="Process"], div.Matrix td input[requested="Process"], span.changedValue {
  color: #02590f;
  font-weight: bolder;
}

.Logic.biz div.Field.pl,
.Config.biz div.Field.pl{
  display:none;
}
.Logic.per div.Field.cl,
.Config.per div.Field.cl{
  display:none;
}
article[table-alias="PROE"] > section.dash  .Config.per div.Field.cl{
  display:block;
}

.Config ol.multiplesContent  > li:first-child, ol.bjoInternal > li:first-child {
    border-top: thin solid #CCCCCC;
}

.Config ol.multiplesContent  > li {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 15px;
    position: relative;
}

.Config ol.multiplesContent > li, ol.bjoInternal > li {
    border-bottom: thin solid #CCCCCC;
    border-left: thin solid #CCCCCC;
    border-right: thin solid #CCCCCC;
    list-style: none outside none;
    border-radius: var(--border-radius);
}
.Config ol.multiplesContent > li > header {
    color: #666766;
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

.Config ol.multiplesContent.multiplesContent > li.disabled {
    background-color: #d9d9d9 ;
}

.Config header.multiples > span, ol.bjoInternal header.multiples > span {
    min-width: 20px;
    font-size: 12px;
    display: inline-block;
}

li.contentHidden header.multiples > span.policyPause,
li.contentHidden header.multiples > span.policyDelete {
    display: none;

}
.Config header.multiples > span.policyPause ,
.Config header.multiples > span.policyDelete {
    background-repeat: no-repeat;
    color: #A9A9A9;
    cursor: pointer;
    display: inline-block;
    height: 16px;
    min-width: 10px;
    padding-right: 0;
    position: absolute;
    right: 0;
    width: 16px;
}
.Config header.multiples > span.policyPause {
  background-image: url(images/recordStatusInactive24.png);
  background-size: 16px;
  right: 20px;
}

.Config ol.multiplesContent > li.contentHidden > header > span.contentToggle,
li:not(.expanded) span.showHide{
    background-image: url(images/dropdown64.png);
    transform: rotate(-90deg);
    left: 5px;
    top: 0px;
}

.Config ol.multiplesContent > li > header > span.contentToggle, 
ol.bjoInternal > li > header > span.contentToggle,
span.showHide{
    background-image: url("images/dropdown64.png");
    background-repeat: no-repeat;
    height: 20px;
    width: 20px;
    flex-shrink: 0;
    background-size: 20px;
    transition: transform 0.5s;
    min-width: 0px;  
    display: inline-block;
    padding: 0;
    
    &:hover{
        background-color: #f2f2f2;
        border-radius: var(--border-radius);
        cursor: pointer;
    }
}

.Config  ol.multiplesContent li.contentHidden div.PolicyComponent, ol.bjoInternal li.contentHidden ul.bjoDetail {
    display: none;
}

.Config ol.multiplesContent > li > div.PolicyComponent {
    /*padding: 15px;*/
}

section:not(.loadingReport):not(chartExpanded) article.chartDisplay > article.chartWrapper,
section:not(.loadingReport):not(chartExpanded) article.chartDisplay > article.chartWrapper > div.chart {
    /*height: 100%;*/
    height: 250px
}

article.ttuListTile > div.emptyImg {
    margin-top: 0;
}

article.MasterSchedule span.scheduleActions span.tableActions {
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: end;
}

div.reportControls span.searchArea input.searchInput, 
div.userActions input.searchInput, 
span.tableActions input.searchInput {
    display: inline-block;
    background-color: transparent;
    margin-top: 0;
    cursor: pointer;
    width: 200px;
    margin-left: 15px;
    color: #58585B;
    border: none;
    border-radius: 15px;
    height: 25px;
    font-size: 12px;
}
section.ttu[table_key="PWA_DIR"] span.tableActions input.searchInput{
/*    padding-left: 30px;
    border: thin solid #dcddde;
    border-radius: var(--border-radius);
    margin-left: 0px;*/
}
article.WorkSchedules div.userActions span.searchArea > aside.filters, span.tableActions span.searchArea > aside.filters
article.MasterSchedule div.userActions span.searchArea > aside.filters, span.tableActions span.searchArea > aside.filters {
    display: inline-block;
    height: 25px;
    margin-top: 0px;
    margin-left: 20px;
    top: 50%;
    float: left;
}
article.WorkSchedules div.reportControls span.searchArea, 
article.WorkSchedules div.userActions span.searchArea,
article.tableActions span.searchArea,
article.MasterSchedule div.reportControls span.searchArea, article.MasterSchedule div.userActions span.searchArea{
    display: inline-block;
    border: thin solid #dcddde;
    border-radius: var(--border-radius);
    background-size: 14px 14px;
    background-repeat: no-repeat;
    background-position: 5px 50%;
    height: fit-content;
    padding: 0px 3px;
    height: 25px;
    display: flex;
    flex-flow: row nowrap;
}

table.ttuList > thead > tr > th {
    color: #444;
    
}

span.scheduleLayoutChoices label:hover *,
span.layoutChoices label:hover *{
    cursor: pointer;
    text-decoration: underline;
}
article.ttu.MasterSchedule table.ttuList {
    margin: 0;
}
article.ttu.MasterSchedule ol.columnGroupLayout {
    padding: 0;
}
main table.ttuList input {
    color: #606060;
}
article.ttu.MasterSchedule[mpath='TWBPA_MASTER'] header > div.actions {display: none;}


/*work schedules layout fixes*/
article.ttu.WorkSchedules header span.tableActions span.searchArea{
    order: -1;
}

article.ttu.WorkSchedules header span.tableActions > a{
    margin-left: auto;
}


span.layoutChoices {
    margin-right: 1rem;
/*    order: 1;*/
}
span.layoutChoices:empty{
    display: none;
}
/*article.ttu.Scheduling div.Matrix {
    padding: 0 5px;
}*/

article.ttu.Scheduling div.Matrix table.ttuList {
    margin: 5px 0 0 0; 
}

button.report-extract-button {
    cursor: pointer;
    padding: 5px 10px;
}

table.ttuList tbody tr:nth-child(odd) {
    background-color: #f9f9f9;
}

aise.com-banner > article.chartWrapper{
    display: none;
}

/*section.dash:not([to-do-tile-height]) section.data {
    grid-row: span 2;
    height: auto;
}*/

section.dash:not([to-do-tile-height]) section.data.show-more {
    grid-row: span 3;
    height: auto;
}
/*section.dash:not([to-do-tile-height]) section.data{
    height: 100%;
    grid-row: span 2;
}*/

html.visual-release body.cdBody.postLogin.withEditor{
    margin-top: -1px;
    display: grid;
    grid-template-columns: auto 1fr 25%;
}

html.visual-release body.cdBody.postLogin.withEditor > header{
    grid-column: span 2;
}
div.valueHolder div.fieldChooser a {
    background-color: var(--product-green);
    border: thin solid var(--product-green);
  
    border-radius: 5px;
    padding: 4px 10px;
    color: #FFFFFF;
    cursor: pointer;
    display: inline-block;
    margin: 7px 0px;
    font-size: 12px;
    font-weight: 400;
}

.collapsed > div > span.treeIndicator,
.collapsed > span.treeIndicator {
  background-image: url(images/arrowRight11x11Grey.png);
}
.expanded > span.treeIndicator {
  background-image: url(images/arrowDown11x11Grey.png);
}
.collapsed > ul {
  display: none;
}
span.treeIndicator {
  display: inline-block;
  height: 20px;
  width: 20px;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}

div.fieldChooser p{
  vertical-align: top;
  margin-left: 20px;
  color: #888;
  font-size: 10px;
  font-weight: 400;
  grid-column: -1/1;
}
div.fieldChooser  h4.fileChooserSubject{
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    vertical-align: top;
    cursor: pointer;
    font-weight: 400;
    font-size: 14px;
    
    > span.ftchosertitle {
        color: #444;
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 5px;
    }
    > span.close-editor{
        font-weight: bold;
        font-size: 14px;
        margin-left: auto;
        cursor: pointer;
        padding: 5px;
        
        &:hover{
            text-decoration: underline;
        }
    }
}

div.fieldChooser ul{
  list-style: none;
  background-color: #fff;
}

div.fieldChooser li {
    > div {
      cursor: pointer;
      display: grid;
      grid-template-columns: 20px 1fr;
      gap: 5px;
    }
/*    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 5px;*/

    border: thin #eaeaea solid;
    margin-bottom: 5px;
    border-radius: var(--border-radius);
    > ul{
        padding: 5px 0;
        margin-left: 10px;
        grid-column: -1/1;
    }
}

div.fieldChooser li.collapsed,
div.fieldChooser li.expanded {
  color: #444;
  background-color: #f2f2f2;
}

div.fieldChooser ul li ul li {
  margin: 5px 10px;
}

div.fieldChooser.panel{
  border-left: solid 3px #dcddde;
  padding-left: 5px;
  position: relative;
  background-color: white;
  z-index: 1;
  color: #444;
  flex: 1 20%;
    
  height: 86vh;
  position: sticky;
  top: 120px;
  overflow-y: auto;
}

div.valueHolder > label ~ div.fieldChooser {
  border: none;
}

section.ttu.policyLayout > header.tableHeader.ttuRecapTabTitle{
    padding: 0px;
    margin: 0px;
    > span.tableActions{
        display: none;
    }
}

/*not sure why this is here? was causing Calendar to take up 2 tile height in grid - MW 7/14/2023*/
section.dash:not([to-do-tile-height]) article:not(.tileRecap):not(.rowspan-1):not(.more) {
    /*grid-row: span 2;*/
}

/***********    Quill overrides     ***********/
div.valueHolder div.ui-droppable {
    height: fit-content;
    border-radius: var(--border-radius);
    grid-column: 2;
}

div.valueHolder div.ql-toolbar.ql-snow[focus='focus'] {
    border-radius: 5px 5px 0 0;
}

div.valueHolder div.ql-toolbar.ql-snow[focus='focus'] + div.ui-droppable {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

div.valueHolder  .ql-snow.ql-toolbar button,
div.valueHolder  .ql-snow .ql-toolbar button {
    width: 30px;
}
/*********** End of Quill overrides ***********/

div.widget-results-empty{
    height: 100%;
    flex: 1;
    text-align: center;
    display: flex;
    gap: 16px;
    flex-direction: column;
    justify-content: center;
    > i.widget-empty-image{
        background-image: url(images/wzIcons/noData500.png);
        background-size: 120px;
        height: 120px;
        width: 120px;

        display: block;
        background-repeat: no-repeat;
        background-color: transparent;
        background-position: center;
        margin: 15px auto;
    }
    > span.widget-empty-text{
        color: #999;
        font-size: 13px;
        text-align: center;
        font-weight: normal;
    }
}

section.widget-content{
    display: flex;
    flex-direction: row;
    gap: 20px;
}

section.widget-content i.widget-excel-image{
    background-image: url(images/excelIcon.png);
    background-size: 20px;
    height: 25px;
    width: 25px;
    /*margin: 0 20px;*/
    padding: 0px;
    display: block;
    background-repeat: no-repeat;
    background-color: transparent;
    background-position: center;
}

div.widget-results-empty.narrow-date > i.widget-empty-image{
    background-image: url(images/noResultsFound.png);
}

div.widget-results-empty span.side-note-text{
    display: block;
    color: #666;
    font-size: 12px;
    font-weight: lighter;
}

div.buttonBar{
    color: white;
    background-color: var(--primary-theme);
    
    font-size: 14px;
    height: 50px;
    width: fit-content;
    border-radius: var(--border-radius);
    
    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
}

div.buttonBar:hover{
    color: var(--primary-theme);
    background-color: white;
    outline: 1px solid var(--primary-theme);
}

/*Calendar DrillDown & Report Drilldown*/
header > div.recapListReportToggle > i.recap-toggle-icon,
header > div.productReports > i.product-report-icon,
header > div.calendar-drilldown > i.calendar-drilldown-image{
    background-color: var(--product-green);
    
    display: inline-block;
    width: 24px;
    height: 24px;
    padding: 0px;
    margin: 0px;
}

header > div.productReports > i.product-report-icon{
    -webkit-mask-image: url(images/report64.svg); 
    mask-image: url(images/report64.svg);
}

header > div.recapListReportToggle > i.recap-toggle-icon{
    height: 26px;
    width: 26px;
    -webkit-mask-image: url(images/wzIcons/report-preview.svg); 
    mask-image: url(images/wzIcons/report-preview.svg);
}

header > div.calendar-drilldown > i.calendar-drilldown-image{
    -webkit-mask-image: url(images/calendar64.svg); 
    mask-image: url(images/calendar64.svg);
}

header > .productReports {
    /*margin: 2px;*/
    margin-left: auto;
    align-content: center;
    align-self: center;
    display: flex;
    flex-direction: row;
    gap: 5px;

    align-items: center;
    height: fit-content;
    width: fit-content;
    cursor: pointer;
}

/*    color: var(--primary-theme);
    border-color: var(--primary-theme);*/

header > div.recapListReportToggle > span,
header > div.calendar-drilldown > span{
    height: fit-content;
    margin: 0;
}

header > div.recapListReportToggle,
header > div.calendar-drilldown{
    order: 100;
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
    align-self: center;
    /*margin: 2px;*/
    height: fit-content;
    width: fit-content;
    cursor: pointer;
}

header > div.productReports,
header > div.recapListReportToggle,
header > div.calendar-drilldown{
    outline-color: var(--primary-theme) !important;
    border-color: var(--primary-theme) !important;

    
    > i{
        background-color: var(--primary-theme) !important;
        &:hover{
            color: #007BFF;
            transform: scale(1.1);
            filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
        }  
    }
    > span{
        color: var(--primary-theme) !important;
    }
}

header > div.calendar-drilldown:hover{
/*    > i.calendar-drilldown-image{
        background-color: #999;
    }
    > span{
        color: #999;
        text-decoration: underline;
    }*/
} 

html .ts-dropdown .active {
    text-decoration: underline;
    background-color: unset;
    color: var(--primary-theme);
}

html .ts-wrapper.multi .ts-control>div {
    color: #444;
    font-size: 12px;
}

html .ts-wrapper.multi.has-items .ts-control {
    padding: 2px;
}

html .ts-wrapper.multi .ts-control>div:not(.placeholder-text) {
    margin: 0 3px 0 0;
}

html .ts-wrapper.multi .ts-control {
    padding: 2px;
}
html div.ts-wrapper.multi:not(.has-items) .clear-button,
html div.ts-wrapper.multi.has-items .ts-control > div.placeholder-text {
    display: none;
}

html div.plugin-clear_button div.clear-button{
    background: #f2f2f2 !important;
    margin-right: 0!important;
    position: relative;
    border-radius: 50%;
    display: block;
    opacity: 1;
    right: 0;
    top: 0;
    transform: none;
    &:hover{
        color: #555;
    }
}

html .ts-wrapper.multi .ts-control > div.placeholder-text {
    background: transparent;
    margin: 0;
}
/* end of overrides for tom select*/

/*********** article.CanDoManager.suite-level-carousel  ***********/
article.CanDoManager.suite-level-carousel section[level="Curos"][holders="1"] section[level="Suite"] > ol.canDoHolder > li:not(:first-child) {
    display: none;
}

article.CanDoManager.suite-level-carousel section[level="Curos"][holders="1"] section[level="Suite"] section[level="Module"] > ol.canDoHolder {
    width: inherit;
    display: flex;
    gap: 12px;
    height: 103px;
}

article.CanDoManager.suite-level-carousel section[level="Curos"][holders="1"] section[level="Suite"] > ol.canDoHolder > li {
    width: -webkit-fill-available;
    width: -moz-available;
    cursor: unset;
    box-shadow: unset;
    background-image: none;
    /*font-size: 0;*/
}

h3.column-group-header:not(:empty){
    font-size: 16px;
    font-weight: bold;
    color: #444;
    padding-bottom: 15px;
    &:empty(){
        display: none;
    }
}

article.CanDoManager.suite-level-carousel section[level="Curos"][holders="1"] section[level="Suite"] > ol.canDoHolder > li > section > h4 {
    display: none;
    padding: 0;
    background-image: none;
    width: 100%;
    text-align: center;
    position: absolute;
    z-index: 2;
    left: 0;
}

/*article.ToDosTile div.todoContainer > div.activityContent:hover{
    box-shadow: var(--box-shadow);
    border-radius: 8px;
}*/

section.dash > article.ToDosTile:empty{
    display: none;
}

article.CanDoManager.suite-level-carousel section[level="Curos"][holders="1"] section[level="Suite"] > ol.canDoHolder > li > section > ol.canDoHolder > li.clicked,
article.CanDoManager.suite-level-carousel section[level="Curos"][holders="1"] section[level="Suite"] > ol.canDoHolder > li > section > ol.canDoHolder > li {
    display: flex;
    gap: 12px;
    height: 103px;
    width: -webkit-fill-available;
    width: -moz-available;
    cursor: pointer;
    border-radius: 8px;
    box-shadow: var(--box-shadow);
    position: relative;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #444;
    background-size: 40px 40px;
    background-repeat: no-repeat;
    background-color: transparent;
    background-position: center top 25px;

}
article.CanDoManager.suite-level-carousel section[level="Curos"][holders="1"] section[level="Suite"] > ol.canDoHolder > li > section > ol.canDoHolder > li a.isCanDoItem {
    position: absolute;
    transform: translate(-50%);
    left: 50%;
    width: 100%;
    /*height: 100%;*/
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    font-size: 100%;
}
article.CanDoManager.suite-level-carousel section[level="Curos"][holders="1"] section[level="Suite"] > ol.canDoHolder > li > section > ol.canDoHolder > li:not(.more-tile) a.isCanDoItem:after {
    content: '';
    width: 100%;
    height: 1rem;
} 

article.CanDoManager.suite-level-carousel section[level="Curos"][holders="1"] section[level="Suite"] > ol.canDoHolder > li > section > ol.canDoHolder > li.more-tile {
    justify-content: center;
    background-size: 40px 40px;
    background-repeat: no-repeat;
    background-position: top 25px center;
    min-height: 6rem;
}
article.CanDoManager.suite-level-carousel li.more-tile > section.more-tile {
    height: fit-content;
}

article.CanDoManager.suite-level-carousel li.more-tile.clicked > section[level="module-more-canDos"].more-tile > ol.more-canDo-list {
    display: block;
}
article.CanDoManager.suite-level-carousel li.more-tile.clicked > section[level="module-more-canDos"].more-tile > ol.more-canDo-list > li.canDoItem > a.isCanDoItem {
    position: unset;
    transform: none;
    text-wrap: nowrap;
    text-align: left;
}
article.CanDoManager:not(.suite-level-carousel) section[level="Curos"]  section[level="Suite"] li:not(.more-tile) section[level]:not(.clicked) > ol {
    display: flex;
}
/******** end of article.CanDoManager.suite-level-carousel  ********/

article.ttu.Extracts > section.dash > section.Task {
    grid-column: span 6;
}

article.ttu > footer {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
    grid-column: span 2;
    order: 100;
}
article.ttu > footer:empty{
    margin-top: 0px;
}


header.dashTitle > div.header-right {
    order: 100;
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: end;
    &:empty { 
        display: none; 
    }
}

article.ttu.has-pagination {
    display: flex;
    flex-direction: column;
    min-height: 83vh;
    
}

article.ttu:not(.show-settings, .show-help, .show-notes) > footer.pagination-container {
    margin-top: auto;
    padding-top: 1rem;
}

.drillDownAware.multi-selected {
    outline: auto !important;
    background: var(--hover-background) !important;
    user-select: none;
}

.multi-selectable {
    user-select: none;
}


main.ctrl-down section[mtitle].show-drilldowns .columnHolder a.short-cut-link {
    display: block;
    text-decoration: underline;
    cursor: pointer;
    font-weight: bold;
}

main.ctrl-down section[mtitle].show-drilldowns li.columnHolder a.short-cut-link.record {
    padding: 2px;
    padding-left: 4px;
    border: 1px #cccccb solid;
    border-radius: var(--border-radius);
}

main.ctrl-down section[mtitle].show-drilldowns .columnHolder a.short-cut-link + input,
main.ctrl-down section[mtitle].show-drilldowns .columnHolder a.short-cut-link + label {
    display: none;
}
main:not(.ctrl-down) section[mtitle] .columnHolder a.short-cut-link {
    display: none;
}

main:not(.ctrl-down) .drillDownAware.ctrl-only-true,
main:not(.ctrl-down) .drillDownAware.ctrl-only-true:hover {
    text-decoration: none;
}
main:not(.ctrl-down) .drillDownAware.ctrl-only-true a.drilldown-anchor:hover {
    text-decoration: none !important;
}

article.reportDetails > div.multi-select-count,
div.multi-select-count {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  position: absolute;
  margin-left: auto;
  top: 125px;
  right: 50px;
  background: var(--background);
  box-shadow: var(--box-shadow);
  border-radius: var(--border-radius);
  padding: 2px 6px;
  min-height: 27px;
  width: fit-content;
  z-index: 1;
  font-family: 'proxima-nova','sans-serif';
  text-align: left;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
}

p.Help{
    color: #666;
    font-weight: lighter;
    font-size: 12px;
    
    /*Should get the same spacing as fields get within a policy*/
    margin-bottom: 10px;
}

div.multi-select-count:hover {
  box-shadow: var(--box-shadow-hover);
}

section.reportContainer div.multi-select-count {
  top: unset;
}

section.reportContainer.detailsExpanded div.multi-select-count {
  top: unset;
}
div.multi-select-count > button {
  border-radius: var(--border-radius);
  border: unset;
  box-shadow: var(--box-shadow);
  min-width: 55px;
  min-height: 20px;
  background-color: var(--product-green);
/*  color: #fff;*/
}
div.multi-select-count > button.cancel {
  background-color: transparent;
}
div.multi-select-count > button.cancel a {
  color: #666;
}
div.multi-select-count > button a {
  color: #fff;
}
div.multi-select-count > button:hover {
  cursor: pointer;
  box-shadow: var(--box-shadow-hover);
}

article.ttu.overlay-aside > section.dash > div.flash-message{
    top: 0px;
}

div.flash-message.popover {
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
}
div.flash-message{
    grid-column: 1 / -1;
    overflow: hidden;
    border-radius: 5px;
    height: fit-content;
    
    /* Added to make flash message visible when scrolling */
    position: sticky;
    z-index: 10;
    top: 122px;
    
    > div.message{
        display: flex;
        justify-content: center;
        flex-direction: row;
        padding: 15px;
        border-radius: 7px;
        gap: 5px 1rem;
        align-items: flex-start;
        border: thin solid;
        font-size: 14px;

        >  .message-content {
            display: flex;
            align-items: center;
            font-weight: bold;
            margin-top: 5px;
            
            &.calculating {
              background-image: url(images/workzoomLoadingV3200px.gif); 
              background-position: left center;
              background-size: contain;
              width: 2rem;
              height: 2rem;
              margin: auto 0;
              background-repeat: no-repeat;
            }
        }

        span.message-description{
            display: flex;
            align-items: center;
            color: #444;
            margin-top: 5px;
        }

        .close-button{
            font-size: 14px;
            line-height: 14px;
        }

        button.close {
            font-size: 11px;
            color: inherit;
            background: transparent;
            border: none;
            height: auto;
            width: auto;
            align-self: center;
            &:hover{
                cursor: pointer;
            }
        } 
    }
} 

div.flash-message > .icon-holder {
  align-self: center;
  display: flex;
}
div.flash-message div.icon-holder{
    height: 30px;
}

div.flash-message[mode] > div.progress-bar {
    margin: 0 15px;
    height: 3px;
    border-radius: 4px;
    width: 100%;
    animation-name: runout;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
 @keyframes runout {
    from { width: 100%; }
    to { width: 0%; }
}

div.RoleCommunications div.communicationDiv span.close-button{
    font-size: 14px;
    line-height: 14px;
}

div.flash-message[mode="SUCCESS"] {
    background-color: #e9f1dc;
    color: var(--product-green);
    border-color: var(--product-green);
    button.close-button{
        color: var(--product-green);
    }
}
div.flash-message[mode="SUCCESS"] > div.progress-bar {
  background-color: var(--product-green);
}


div.flash-message[mode="INFO"] {
    background-color: #CDE1FE;
    color: #5098FB;
    border-color: #5098FB;
    > div.progress-bar {
        background-color: #5098FB;
    }
    button.close-button{
        color: #5098FB;
    }
}

div.flash-message[mode="CAUTION"] {
    color: #f9a64e;
    border-color: #f9a64e;
    > div.message{
        background-color: #fdeddb;
    }
    > div.progress-bar {
        background-color: #eed202;
    }
    button.close-button{
        color: #f9a64e;
    }
}

div.flash-message[mode="WARNING"] { 
    color: #e34b65;
    border-color: #e34b65;
    > div.message{
        background-color: #f9dadf;
    }
    > div.progress-bar {
        background-color: #e34b65;
    }
    button.close-button{
        color: #e34b65;
    }
}



article.TaskTableUsage.noHeader.show-settings > aside.settings,
article.TaskTableUsage.noHeader.show-notes > aside.notes,
article.TaskTableUsage.noHeader.show-help > aside.help-text{
    /*grid-row-start: 1;*/
}

html main section.ttu.noTile.noOutline.recapLayout{
    max-height: 600px;
    overflow-y: auto;
}

article.noTile.TaskTableUsage.show-settings >aside.settings,
article.noTile.TaskTableUsage.show-notes > aside.notes,
article.noTile.TaskTableUsage.show-help > aside.help-text{
    grid-row-start: 1;
}

/*Grouped styling, ideally avoid fall-out by doing this - mw 12/18/2023*/
article.TaskTableUsage:is(.show-notes, .show-help, .show-settings, .show-audit) > aside.context-support ~ aside:is(.notes, .settings, .help-text, .record-audit) {
  grid-row: 3/99;
}

article.TaskTableUsage > aside.record-audit,
article.TaskTableUsage >aside.settings,
article.TaskTableUsage > aside.notes,
article.TaskTableUsage> aside.help-text{
    display: none;
}

article.TaskTableUsage.show-audit > aside.record-audit,
article.TaskTableUsage.show-settings > aside.settings,
article.TaskTableUsage.show-notes > aside.notes,
article.TaskTableUsage.show-help > aside.help-text{
    display: block;
    margin: 0;
    grid-column-start: 2;
    grid-row-start: 2;
    border-radius: var(--border-radius);
    border: solid 1px #dcddde;
    outline: none;
    /*box-shadow: var(--box-shadow);*/
    max-height: inherit;
    overflow-y: scroll;
    container-type: inline-size;
    button.close-button{
        position: relative;
        padding: 5px;
    }
    
    /*CUSTOM COLOURING*/
    border-top: solid 5px var(--primary-theme) !important;
    div > h2,
    header > h2{
        color: var(--primary-theme) !important;
    }
}

@-webkit-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}


@container workspaceContentContainer (inline-size < 600px) {
 
  html.visual-release main.worksheet {
    margin-left:10px;
    margin-right:10px;
  }
}

article.ttu:is(.show-help, .show-settings, show-notes) > h2.requestedChanges{
    grid-row: 3;
    grid-column: -1/1;
}

 @container workspaceContentContainer (inline-size >= 1900px) {
    body.visual-release{
        margin: auto;
    } 
 }

@media (max-width: 950px) {  
    div a#logoLink > img#companyImg{
        margin-right: 0px;
        margin-left: 0px;
    }
}
/* Header on mobile */ 
@media (max-width: 600px) {
    html.visual-release body.cdBody.postLogin {
        margin-right: 0;
    }
    
    article.ttu > header div.toggle-buttons{
        display: flex;
        flex-direction: column;
        margin-left: 0;
    }   
    
    html body article.TaskTableUsage.show-help:not(.drilledDown):not(.hideEventLogic),
    html body article.TaskTableUsage.show-notes:not(.drilledDown):not(.hideEventLogic),
    html body article.TaskTableUsage.show-settings:not(.drilledDown):not(.hideEventLogic) {
        display: grid !important;
        grid-template-columns: 2fr 1fr;
        grid-column-gap: 16px;
        
        > header{
           order: -2;
        }
        
        aside.notes,
        aside.settings,
        aside.help-text{
            top: 0px;
            position: relative;
            order: -1;
            margin-bottom: 16px;
        }
    }
    
    html.visual-release body.cdBody.postLogin article.drilledDown > section.drillDown > article.ttu > header.dashTitle{
        display: flex;
        flex-direction: row;
    }
    
    html.visual-release body > header,
    body.postLogin.side-menu-active > main#curosWorksheet {
        /*min-height: unset;*/
        padding: 15px 15px 0px 15px;
        margin: 0;
    }
    
    header.topMenuHeader{
        min-height: unset;
        section.companyNavUser {
            display: grid;
            grid-template-columns: 1fr 1fr;
            min-height: unset;
            
            a#logoLink > img#companyImg{
                max-width: 150px;
            }
            
            > span.searchArea#productSearch{
                /* No need for product search in mobile scenarios - mw 10/10/2024*/
                display: none;
            }
            > div.userActions{
                margin: 0;
                justify-content: flex-end;
                align-items: center;

                display: flex;
                flex-direction: row;
                gap: 5px;
            }
        }
    } 
    
    .stickyHeaderHolder > header {
        top: 75px;
        margin: 0;
        border-radius: 0;
    }
    
    html.visual-release main.worksheet{
        margin: 0px 15px;
    }
    
    html.visual-release body.cdBody.postLogin{
        display: block;
    }
    html.visual-release body.cdBody.postLogin.withEditor{
        grid-template-columns: 1fr 25%;
    }
    
    nav.side-menu{
        display:none;
    }
    
/*    section.companyNavUser > div.companyHome {
        grid-column: span 2;
    }*/
    div.userActions {
        grid-row: 1;
        grid-column: 2;
    }
    span#productSearch.searchArea {
        grid-column: span 2;
    }

    html.visual-release body.cdBody.postLogin.withEditor > header {
        grid-column: span 2;
    }   
    body > div.fieldChooser.panel {
        height: 82vh;
        overflow-x: hidden;
        overflow-y: auto;
    }
/*    span#logOut.log-out-button, 
    span.pin-it-button {
        width: 36px;
    }*/
    span#logOut.log-out-button {
      margin-left: 2px;
    }
    
    main section.TaskTableUsageRecap > header.tableHeader {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        padding-left: 0;
        padding-right: 0;
        margin: 0;
    }
    
    a.backToTopHref {
        margin: 45px 5px;
    }
    
    footer#bodyFooter {
       padding-bottom: 65px;
    }    
}

@container headerContainer (inline-size < 1000px) { 
  a#logoLink{
    margin-right: 5vw;
  }
}

@container headerContainer (inline-size < 700px) { 
  a#logoLink{
    margin-right: 2vw;
    margin-left: 0px !important;
  }
  section.companyNavUser > span.searchArea[allowed="Y"] {
    width: auto;
  }
  section.companyNavUser {
    gap: 0.5rem;
  }  
}
@container headerContainer (inline-size < 630px) {
  section.companyNavUser  > div.userActions {
    display: grid;
    grid-template-columns: 1fr 3fr;
    justify-items: end;
  } 
  
  
  span#logOut.log-out-button, span.pin-it-button {
    grid-row: 2;
    grid-column: 2;
  }
  span.pin-it-button {
    /*margin-right: 32px;*/
  }
  span#logOut.log-out-button {
    margin-left: auto;
  }
}
@container headerContainer (inline-size < 600px) {
  span.pin-it-button {
    /*display: none;*/
  }
}

@container sectionEditContainer (inline-size < 1200px) {
  article.ActionItems section.dash{
    grid-template-columns: repeat(4, minmax(0px, 1fr));
  }  
  article.inActionItem > section.dash > section.data{
    grid-column: span 4;
  }
  section.dash > section.data{
    grid-column: span 4;  
  }
}
@container sectionEditContainer (inline-size < 800px) {
  ol.columnGroupLayout,
  article.ActionItems section.dash{
    /*grid-template-columns: repeat(4, minmax(0px, 1fr));*/
  }  
}
@container sectionEditContainer (inline-size > 1200px) {
  /* Trying more condensed layout*/
 section.data ol.columnGroupLayout {
    /*grid-template-columns: repeat(6, minmax(0px, 1fr));*/
  }
  
  /*section.data ol.columnGroupLayout:*/
  article:not(.MasterSchedule) section ol.columnGroupLayout > li[name="DETL"].fullWidth {
      grid-column: span 2;
  }
}
@container sectionEditContainer (inline-size > 800px) {
  section.data ol.columnGroupLayout[visible_group_count="2"][count="2"] {
      /*grid-template-columns: repeat(4, minmax(0px, 1fr));*/
  }
}

@container workspaceContentContainer (inline-size < 1200px) { 
  article.ttu.Extracts > section.dash > section.Task {
    grid-column: span 4;
  }
  
  section.ReportDashHandler > ol,
  /*article.wrapParent > section.dash  > section.column-edit,*/
  section.dash {   
    grid-template-columns: repeat(4, minmax(0px, 1fr));
    
    > article.more,
    > article.ToDosTile,
    > article.TaskTableUsageTileHandler{
        grid-column: span 2;
    }
  }
  
  body main section.dash > article.ttu,
  section.dash > section.TaskTableUsageRecap,
  section.dash > section.data, article.ttu section.dash > article:first-child:not(.ToDosTile),
  section.ttu.fullWidth,
  body main article.ttu[mpath="TWPWA_WL_CAL"] > section.dash > article.ttu[table_key="PLV_REQUEST"],
  article.ttu section.dash > article:first-child.CanDoManager {
    grid-column: span 4;
  }
  section.dash > article.CanDoManager {
    grid-column: span 4;
  }
  section.ReportDashHandler > ol > li {
    grid-column: span 2;
  }
  article.medium-width{
      grid-column: span 2 !important;
  }
  
  article.ttu[mpath="TGBIZ_COM"] > section.dash > article.TaskTableUsageTileHandler{
    grid-column: span 4;
  }  
}
 
 
 /* Large Container Query div.workspaceContent */ 
@container workspaceContentContainer (inline-size >= 1200px) {
 
  section.data{
    grid-column: span 6;
  }
  
  article.ttu[mpath="THPWA"] > section.dash > section.data.column-edit {
    grid-column: span 4;
  }
/*    html.visual-release article.wrapParent section.data,
    section.dash,
    section.drillDown > section.ttu > section.ReportDashHandler {
        grid-template-columns: repeat(6, minmax(200px, 1fr));
    }*/
    
    section.drillDown > section.ttu > section.ReportDashHandler > ol > li,
    /*article.ttu > section.dash > article:not(.canDos),*/
    section.dash > article,
    article.ttu > section.more {
        grid-column: span 2;
    }
    article.ttu section.dash > article.CanDoManager {
        grid-column: span 6;
    }
    
/*    Main Page Testing*/
    article.ttu[table_key="BIZ_ADMIN"] section.dash > article.TaskTableUsageTileHandler[table_key="BIZ_H"]{
    grid-column: span 4;
    }
    article.ttu[table_key="BIZ_ADMIN"] section.dash[to-do-tile-height="1"] > article.TaskTableUsageTileHandler[table_key="BIZ_T"]{
        grid-column: span 4;
    }
    article.ttu[table_key="BIZ_ADMIN"] section.dash[to-do-tile-height="1"] > article.TaskTableUsageTileHandler[table_key="BIZ_W"]{
        grid-column: span 3;
    }
        article.ttu[table_key="BIZ_ADMIN"] section.dash[to-do-tile-height="1"]:not(:has(article.TaskTableUsageTileHandler[table_key="BIZ_P"])) > article.TaskTableUsageTileHandler[table_key="BIZ_W"]{
            grid-column: span 2;
        }
    
    article.ttu[table_key="PWA_HOME_M"]  section.dash[to-do-tile-height="1"] > article.TaskTableUsageTileHandler[table_key="BIZ_F"]{
        /*grid-column: span 3;*/
    }
    article.ttu[table_key="BIZ_ADMIN"] section.dash[to-do-tile-height="1"] > article.TaskTableUsageTileHandler[table_key="BIZ_P"]{
        grid-column: span 3;
    }
    

/*    Hr Hub Try On*/
    article.ttu[role='A'] > section.dash > article.TaskTableUsageTileHandler[table_key="BIZ_H_PERS"]{
        grid-column: span 4;
    }
    article.ttu[role='A'] > section.dash > article.TaskTableUsageTileHandler[table_key="BIZ_R"],
    article.ttu[role='A'] > section.dash > article.TaskTableUsageTileHandler[table_key="BIZ_GC"]{
        grid-column: span 3;
    }
    
    /*Comms Try On*/
    article.ttu[role='A'] > section.dash > article.TaskTableUsageTileHandler[table_key="COM_GS"]{
        grid-column: span 4;
    }
    
    /*    Performance Try On*/
    article.ttu[role='P'] > section.dash > article.TaskTableUsageTileHandler[table_key="PGOB_TM"]{
        grid-column: span 4;
    }
    
    section.dash > article.ttu,
/*    section.dash > section.data,     */
    article.ttu[role='A'] section.dash > article:first-child:not(.ToDosTile),    
    section.ttu.fullWidth,
    article.ttu[role='A'] section.dash > article:first-child.CanDoManager, 
    section.dash > section.TaskTableUsageRecap {
        grid-column: -1/1;
    }
}

/* Medium Container Query for div.workspaceContent */
/*--medium-device-width-max or half split screen*/


/* Mobile (> 800px) Container Query for div.workspaceContent */
/*--mobile-device-width-max - grid template inherit was causing major issues with the column group layout*/
@container sectionEditContainer (inline-size <= 800px) {
  ol.columnGroupLayout,
  article.ActionItems section.dash{
    /*grid-template: inherit;*/
    gap:20px;
  }
  article.inActionItem > section.dash > section.data,
  section.dash > article{
      grid-column: span 1;
  }
  
/*  ol.columnLayout > li label.valueHolder, 
  ol.columnLayout > li div.valueHolder {
    display: grid;
    grid-template-columns: 1fr;
 }*/
 ol.columnGroupLayout > li {
    /*grid-column: span 2;*/
 }
 

}

@container workspaceContentContainer (inline-size < 800px) {
    /*html.visual-release article.wrapParent section.data,*/
    section.dash,
    ol.columnGroupLayout,
    section.TaskTableUsageRecap.report-list div.recapListContent ol.recapList,
    section.TaskTableUsageRecap[mpath="TCCTK"] div.recapListContent ol.recapList,
    section.drillDown > section.ttu > section.ReportDashHandler > ol {
      grid-template-columns: repeat(1, minmax(0px, 1fr));
    }
    article.CanDoManager{
      grid-column: span 4;
    }
    
    section.drillDown > section.ttu > section.ReportDashHandler > ol > li,
    article.ttu > section.dash > article:not(.canDos),
    article.ttu > section.more {
        grid-column-end: span 1;
    }
    
    article.ttu.Extracts > section.dash > section.Task,
    article.ttu section.dash > article.CanDoManager {
        grid-column: span 1;
    }
    
/*    html.visual-release article.wrapParent section.data,
    section.dash,
    section.drillDown > section.ttu > section.ReportDashHandler {
        grid-template-columns: repeat(1, minmax(200px, 1fr));
    }*/
    
    section.drillDown > section.ttu > section.ReportDashHandler > ol > li,
    article.ttu > section.dash > article:not(.canDos),
    article.ttu > section.dash > section.TaskTableUsageRecap,
    article.ttu > section.more {
        grid-column: span 1 !important; //used important tag, because if this applies it should trump all - mw 11/6/2023
    }
    child:not(.ToDosTile), article.ttu section.dash > article:first-child.CanDoManager {
        grid-column: span 1;
    }
    
    body main article.CanDoManager{
          grid-column: span 2;
    }
    /*carousel*/
    main article.canDoHolder[totalDepth="3"] > ol.childrenHolder > li > ol.childrenHolder, main article.canDoHolder[totalDepth="2"] > 
    ol.childrenHolder, main article.canDoHolder[totalDepth="1"] > ol.childrenHolder, 
    main section.recordDash > article > article.canDoHolder > ol.childrenHolder{ 
        width: inherit; 
        display: grid; 
        grid-template-columns: 1fr 1fr; 
        gap: 12px; 
        height: auto; 
    } 
    
    body main section.Task > section.displayGrid > section.reportContainer{
        display: flex;
        flex-direction: column;
        gap: 16px;
        height: auto;
    }
    
    section.reportContainer.collapseResultsFilter > aside.resultsFilter > div.rsTitle {
        width: auto;
        font-size: 16px;
    }
    
    section.collapseResultsFilter aside.resultsFilter > div.rsTitle > div.toggleClose{
        transform: rotate(270deg);
    }
    
    section:not(collapseResultsFilter) aside.resultsFilter > div.rsTitle > div.toggleClose{
        transform: rotate(90deg);
    }
    
    html.visual-release > header > section nav.backButtonNav > div#breadcrumbs {
        color: #888;
        display: flex;
        position: fixed;
        top: 60px;
    }
    
    
    /* table layouts for mobile */
    div.recapListContent {
        max-height: none;
    }
    table:not(.scheduleCalendar):not(.fc-scrollgrid-sync-table):not(.fc-scrollgrid) th {
        display: none;
    }

        /* STYLING FOR RECAPS IN MOBILE*/
        table:not(.column-entry-table):not(.matrix):not(.fc-list-table):not(.fc-scrollgrid-sync-table):not(.calendar):not(.scheduleCalendar):not(.fc-scrollgrid) > tbody >tr > td,
        table:not(.column-entry-table):not(.matrix):not(.fc-list-table):not(.fc-scrollgrid-sync-table):not(.calendar):not(.scheduleCalendar):not(.fc-scrollgrid) > tbody >td {
            display: grid;
            gap: 0.5rem;
            padding: 2px;
            height: fit-content;
            grid-template-columns: 20ch auto;
            padding: 0.2rem 0.5rem;
            height: auto;
        }
        
        table.ttuList{
          &.matrix > tbody > tr{
              display: block;
          }
          > tbody >tr{
            display: grid;
            gap: 0.5rem;
            box-sizing: border-box;
            padding: 5px;
            > td{
              display: contents !important;
              > div.tableRowActions{
                text-align: left;
              }
            }
          }
        }
    
    table.ttuList{
        &.matrix > tbody > tr{
            display: block;
        }
        
        > tbody >tr{
            display: grid;
            gap: 0.5rem;
            box-sizing: border-box;
            padding: 5px;
            > td{
                display: contents !important;
                > div.tableRowActions{
                    text-align: left;
                }
            }
        }
    } 
    
    table.fc-scrollgrid table.fc-scrollgrid-sync-table > tbody >tr > td,
    table.fc-scrollgrid table.fc-scrollgrid-sync-table > tbody >td {
        grid-template-columns: auto !important;
        border: none;
    }
    
    table:not(.column-entry-table):not(.calendar):not(.scheduleCalendar):not(.fc-scrollgrid-sync-table):not(.fc-scrollgrid) > body > td:first-chil
    table:not(.column-entry-table):not(.calendar):not(.scheduleCalendar):not(.fc-scrollgrid-sync-table):not(.fc-scrollgrid) > thead > td:first-child {
        padding-top: 2rem;
    }
    table:not(.column-entry-table):not(.calendar):not(.scheduleCalendar):not(.fc-scrollgrid-sync-table):not(.fc-scrollgrid) > tbody > td:last-child,
    table:not(.column-entry-table):not(.calendar):not(.scheduleCalendar):not(.fc-scrollgrid-sync-table):not(.fc-scrollgrid) > thead > td:last-child {
        padding-bottom: 2rem;
    }
    /* END OF STYLING FOR RECAPS IN MOBILE*/
    
    table:not(.scheduleCalendar):not(.fc-scrollgrid-sync-table):not(.fc-scrollgrid) td[data-th]::before {
        content: attr(data-th) ": ";
        font-weight: 700;
        text-transform: capitalize;
    }
    
    table:not(.scheduleCalendar):not(.fc-scrollgrid-sync-table):not(.fc-scrollgrid) td[data-th] > * {
        grid-column: 2;
    }
  
    body main div.recapListContent > table > tbody > tr td.rsHeader{
        width: fit-content;
        padding-left: 2px;
    }
    
    /*show active record status in mobile*/
    li[rs="A"] div.roundStatusImage,
        main.worksheet tr[rs="A"] > td > div.roundStatusImage,
            main.worksheet li[rs="A"] > td > div.roundStatusImage{
        background-image: url(images/recordStatusActive24.png);
    }
    
    body main section.TaskTableUsageRecap:not([mtitle="Policies"]):not([mtitle="Departments Costing"]) div.roundStatusImage{
          /* position: absolute; */
        background-size: 15px 15px;
        height: 15px;
        width: 15px;
        background-repeat: no-repeat;
        border: 0px;
        display: inline-table;
        vertical-align: middle;
        padding: 0px;
        margin: 0px;
        grid-row: -1;
    }
    html.visual-release.mobileDevice main > div.workspaceContent .stickyHeaderHolder .stickyHeaderHolder > header[stuck]{
          top: 50px;
    }
    
    
    body main div.recapListContent table.recap > tbody > tr{
          border-top: 3px #f2f2f3 solid;
    }
    html.visual-release.mobileDevice header section.companyNavUserMobile{
        display: none;
    }
    html.visual-release.mobileDevice main > div.workspaceContent .stickyHeaderHolder .stickyHeaderHolder .stickyHeaderHolder > header[stuck]{
        top: 45px;
    }
    section.Task > section.displayGrid > section.reportContainer.empty-chart-tile,
    section.Task > section.displayGrid > section.reportContainer:not(.empty-chart-tile){
        display: flex;
        
    }
    
    /* Report Options Aside Small screens */ 
    aside.resultsFilter,
    section.collapseResultsFilter > aside.resultsFilter {
        max-width: none;
    }
    /* Enables report scrolling on small screens */
    main article section.Task > section.recapListLayout {
        max-height: none;
    }
    
    /***** Can Do's on Small Screens *****/ 
    article.CanDoManager.suite-level-carousel section[level="Curos"][holders="1"] section[level="Suite"] > ol.canDoHolder {
        grid-template-columns: repeat(1, minmax(0px, 1fr));
    }
    
    article.CanDoManager.suite-level-carousel section[level="Curos"][holders="1"] section[level="Suite"] section[level="Module"] > ol.canDoHolder,
    article.CanDoManager > section[level="Suite"][holders="1"] section[level="Module"][holders="0"] > ol.canDoHolder,
    article.CanDoManager section[level="Suite"] > ol.canDoHolder,
    article.CanDoManager > section:not([level="Curos"]) > ol.canDoHolder {
        display: grid;
        grid-template-columns: repeat(2, minmax(0px, 1fr));
        height: auto;        
    }
    article.CanDoManager  ol.canDoHolder > li:last-child:nth-child(odd),
    article.CanDoManager section[level="Suite"][holders="1"] > ol.canDoHolder > li:only-child {
        grid-column: span 2;
    }
    article.CanDoManager > section[level="Suite"][holders="1"] section[level="Module"][holders="0"] > ol.canDoHolder:has(> li:nth-of-type(1)), li[product="HW"]:only-child {
        grid-column: span 2;
    }

    html a#logoLink > img#companyImg{
        max-height: 50px;
        max-width: 200px;
         margin-left: 0px; 
         margin-right: 0px;
    }
    /***** End of Can do's on mobile ****/
    
    /* Fixes grid overflow */ 
    section.dash > section.data,
    section.dash > article:first-child:not(.ToDosTile){
        grid-column: span 1;
    }

    .double-column {
        column-count: 1;
    }
    
    section.dash > article.ttu,
    article.largeTile.dash > section.dash > section.data,
    section.dash > section.data, 
    article.ttu section.dash > article:first-child:not(.ToDosTile), 
    article.ttu section.dash > article:first-child.CanDoManager {
        grid-column: span 1;
    }
    
    section:not(.loadingReport):not(chartExpanded) article.chartDisplay > article.chartWrapper,
    section:not(.loadingReport):not(chartExpanded) article.chartDisplay > article.chartWrapper > div.chart {
        height: 225px;
    }
    section.reportContainer aside.resultsFilter {
        overflow-x: unset;
    }
    
    /* mobile schedule */
    table.scheduleCalendar tr > td.stateCount:before {
        text-align: left;
        padding-top: 5px;
        padding-bottom: 5px;
    }
    
    main div.Matrix td span.inputPlaceholder[domain=TIMEOFDAY], 
    main div.Matrix td input[domain=TIMEOFDAY] {
        display: inline-block;
        width: 48%;
        margin: 0px;
    }
    section.drillDown > article.TaskTableUsage:not(.drilledDown).WorkSchedule > header:not(.hasIcon),
    section.drillDown > article.TaskTableUsage:not(.drilledDown).MasterSchedule > header:not(.hasIcon) {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 0.5fr;
    }
    
    ol.columnLayout > li div.valueHolder.promptAbove[use-native-input="true"] {
      overflow: unset;
      grid-template-columns: auto;
    }
    ol.columnLayout > li div.valueHolder.promptAbove[use-native-input="true"] + div.attchmentButton {
      grid-column: span 2;
    }
    ol.columnGroupLayout > li[name="ADDL"].wide-layout {
        grid-column: span 1;
    }
    
 }

@container mainContainer (inline-size < 800px) {
  ul.menuContainer{
    display:none; 
  }
  body div.navMainContainer > nav.side-menu {
    display:none;
  }
}

@container workspaceContentContainer (inline-size < 700px) {       
    button.report-toggle-button, button.recap-toggle-button, button.toggle-button {
        flex-direction: row;
        align-items: center;
    }
}

@container workspaceContentContainer (inline-size < 650px) {
    section.recap h2.ttu-title {
    }
    
    header.dashTitle div.actions {
        grid-row: 2;
        justify-self: start;
    }
    body.editMode article.TaskTableUsage h3.transitions {
        grid-row: 2;
        justify-self: end;
    }
    div.PrevNextNavigation {
        justify-self: end;
        grid-row: 2;
    }

    main section.TaskTableUsageRecap > header > span.tableActions > a[action] {
        grid-row: 1;
        grid-column: 1;
        margin: 0;
    }
    span.tableActions > div.recapListReportToggle {
        grid-row:1;
        grid-column: 2;
    }
    header.tableHeader > span.tableActions > div.record-status-options {
        grid-row: 2;
        grid-column: 1;
        width: auto;
        margin: 0;
    }
    span.tableActions > div.select-menu {
        grid-row: 1;
        grid-column:2;
    }
    
    header > span.tableActions > div.select-menu > select.select-menu-items-list {
        margin: 0;
    }
    span.tableActions > span.searchArea {
        grid-row: 3;
        grid-column: span 2;
    }
    span.tableActions > span.searchArea > input.searchInput {
      width: -moz-available;
      width: -webkit-fill-available;
      width: fill-available;
    }
    div.multi-select-count {
      top: 150px;
    }
    
    div.recapListReportToggle {
      /*top: 0;*/
    }
}
/* Sub 600px screen size */
@container workspaceContentContainer (inline-size < 600px) {
    article.ttu header span.scheduleActions {
        flex-direction: column;
        align-items: flex-start;
    }
}
@container workspaceContentContainer (inline-size < 500px) {
    html article.TaskTableUsage.show-settings>header {
        grid-column: span 1;
    }

    html body article.ttu.TaskTableUsage.show-help > aside.help-text,
    html body article.ttu.TaskTableUsage.show-notes > aside.notes,
    html body article.ttu.TaskTableUsage.show-settings > aside.settings {
      grid-column: 1;
      grid-row: 2;
      z-index: 100;
      top: 184px;
    }
}

@container workspaceContentContainer (inline-size < 400px) {
    /***** Can Do's on < 400px Screens *****/ 
    article.CanDoManager > section[level="Suite"][holders="1"] section[level="Module"][holders="0"] > ol.canDoHolder,
    article.CanDoManager section[level="Suite"] > ol.canDoHolder,
    article.CanDoManager > section:not([level="Curos"]) > ol.canDoHolder {
        display: flex;
        flex-direction: column;
        
    }
        
    ol.columnGroupLayout > li[name="ADDL"].wide-layout > fieldset.columnGroup >  ol.columnLayout {
      display: grid;
      grid-template-columns: 1fr;
    }
    /***** End of Can do's on < sub 400px screens *****/
}

@container matrixCell (inline-size < 60px) {
  div.Matrix td span.inputPlaceholder[domain=TIMEOFDAY], div.Matrix td input[domain=TIMEOFDAY] {
    display: block;
    /*border: thin solid white;*/
    width: 100%;
    /*margin: 0px;*/
  }

}

/*DONT ADD NEW CSS HERE, NETBEANS CANT UNDERSTAND CONTAINER QUERIES SO IT GOES WEIRD, ADD NEW CSS ABOVE THEM MW 5/8/2023*/




div.modalContent {
  position: relative;
  /*background-color: #fefefe;*/
  background-color: #f2f2f2;
  color: #444;
  margin: auto;
  padding: 0;
  font-size : 12px;
  /*border: 1px solid #888;*/
  width: 100%;
  height: 90%;
  /*box-shadow: 0 0 5px #d9d9d8;*/
  /*border-radius: 10px;*/
  /*padding: 20px;*/
  /*box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);*/
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s;
  width:1100px;
  overflow: hidden;
}

div.modalHeader {
  /*padding: 20px;*/
  /*background-color: #5E91C8;*/
  background-color: #999999;
  color: #444;
  text-align: left;
  /*text-transform: uppercase;*/
  /*margin: 0px 20px 10px 20px;*/
  padding: 5px 15px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}

div.modalBody {
  position:relative;
  height:768px;
  /*margin-top: 20px;*/
  /*margin-left: 8%;*/
  /*margin-right: 8%;*/
  margin: 20px 8%;
  /*width:840px;*/
}

div.modalContent > div.modalHeader > h2 {
    color: #FFFFFF;
}
div.modalContent > div.modalHeader > div.modalNav {
    display: flex;
    flex-flow: row nowrap;
}
div.modalHeader a.closeIcon {
  color: #FFFFFF;
  float: right;
  font-weight: 700;
  cursor: pointer;
  /*margin-left:auto;*/
}

/*Signature Signing screen*/
div.modalBody > article.radios{
    display: flex;
    flex-direction: column;
    gap: 16px;
    > section.radioHolder{
        display: flex;
        flex-direction: row;
        align-items: center;
    }
}


div.signatureDialog > div.modalContent {
    height: auto;
    border-radius: 10px;
    background-color: #FFFFFF;
}
div.signatureDialog > div.modalContent > div.modalBody {
    height: auto;
    margin: 20px;
}
div.signatureDialog > div.modalContent > div.modalHeader {
    background-color: #FFFFFF;
}
div.signatureDialog > div.modalContent > div.modalHeader > h2 {
    font-size: 16px;
    color: black;
    line-height: 20px;
    height: 20px;
    padding-top: 5px;
}
div.signatureDialog > div.modalContent > div.modalHeader > h2 > p.selectionInstructions {
    display: none;
}

div.signatureDialog > div.modalContent > div.modalHeader a.closeIcon {
    color: #888;
    margin-right: 10px;
    margin-top: 10px;
    margin-left: auto;
    border: 1px solid #888;
    border-radius: var(--border-radius);
    padding: 4px 10px;
    font-size: 12px;
    height: fit-content;
}

div.signatureDialog > div.modalContent > div.modalHeader a.selectedSig{
    margin-top: 10px;
    cursor: pointer !important;
}

/*div.signatureDialog > div.modalContent > div.modalHeader > div.buttonHolder > button {
    color: #FFFFFF;
    background-color: var(--product-green);
    border: thin solid var(--product-green);
    border-radius: var(--border-radius);
    padding: 4px 10px;
    font-size: 12px;
    height: fit-content;
    cursor: pointer;
}*/

div.signatureDialog > div.modalContent > div.modalBody > article.radios > section.radioHolder {
    background-color: #FFFFFF;
}
div.signatureDialog > div.modalContent > div.modalBody > article.radios > section.radioHolder > article.generatedArticle {
    padding-left: 22px; 
}
div.signatureDialog > div.modalContent > div.modalBody > article.radios > section#storedRadio {
    display: none;
}
div.signatureDialog > div.modalContent > div.modalBody > article.radios > section#createRadio section {
    display: flex;
}

div.signatureDialog > div.modalContent > div.modalBody > article.radios section > input#generateRadio, 
div.signatureDialog > div.modalContent > div.modalBody > article.radios section > input#createRadio{
    margin: 0px;
    margin-right: 10px;
    cursor: pointer;
}

div.signatureDialog > div.modalContent > div.modalBody > article.radios input[type='radio']:after {
    width: 15px;
    height: 15px;
    border-radius: 15px;
    position: relative;
    background-color: #d1d3d1;
    content: '';
    display: inline-block;
    visibility: visible;
}

    div.signatureDialog > div.modalContent > div.modalBody > article.radios input[type='radio']:checked:after {
        width: 15px;
        height: 15px;
        border-radius: 15px;
        top: -2px;
        left: -1px;
        position: relative;
        background-color: var(--product-green);
        content: '';
        display: inline-block;
        visibility: visible;
        border: 2px solid white;
    }
    
@container (max-width: 1200px) {
  div.PplTimeOffBalances div.leaveTypesDiv ol.timeOffTypes {
    grid-template-columns: repeat(1, minmax(300px, 1fr));
    > li.timeOffBalance {
      grid-column: span 1 !important;
      &.odd-last {
        grid-column: span 1 !important;
      }
    }
  }
}

html main article.ttu > section.dash > section.ttu.noTile.TaskTableUsageRecap.recapLayout[rowcount]:not([rowcount="1"]):not(.full-height){ 
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: auto;
    > header.tableHeader{
        padding-top: 15px;
        margin-top: -15px;
        top: -15px;
    }
    > div.recapListContent thead{
        top: 60px;
        top: 0px;
    }
}

article.SurveyPreview section.assessmentSection{
    box-shadow: none;
    padding: 0px;
    margin: 0px;
}