@charset "UTF-8";
/* TODO: comment out these styles when done testing */
/* styles in there should not alter the layout */
.gridWrapper {
  /*
  background-color:tomato;
  */
}

div.gridWrapper div.grid {
  /*
  background-color: green !important;
  */
}

#workflowDefinitionCanvasContainer {
  /*
  background: salmon;
  */
}

#workflowDefinitionCanvas {
  /*
  background: tomato;
  */
}

.pageContainer {
  /* TODO: remove test color */
  /*
  background-image: linear-gradient(90deg, #98CD8D 33.33%, #F6F0CF 33.33%, #F6F0CF 50%, #98CD8D 50%, #98CD8D 83.33%, #F6F0CF 83.33%, #F6F0CF 100%);
  background-size: 120.00px 120.00px;
  */
}

div.framedGrid {
  /*
  border-radius: 15px !important;
  border: solid 1px rgba(255, 165, 0, 1) !important;
  */
}

.gridContainerBase, .gridContainer {
  /* TODO: remove test color */
  /*
  background-image: linear-gradient(150deg, #95a5a6 30%, #34495e 30%, #34495e 50%, #95a5a6 50%, #95a5a6 80%, #34495e 80%, #34495e 100%);
  background-size: 100.00px 57.74px;
  */
}

div.desktopContentArea {
  /*
  background-color:#f1c40f;
  */
  /*
  background-image: linear-gradient(45deg, #f1c40f 25%, #e74c3c 25%, #e74c3c 50%, #f1c40f 50%, #f1c40f 75%, #e74c3c 75%, #e74c3c 100%);
  background-size: 56.57px 56.57px;
  */
}

/*
/ * verified grids * /
#grid\.myActionItemsGrid\.toolbarFrame
{
	background-color: #c5d4c1 !important;
}
*/
.unverifiedFormContainer {
  border: 1px solid #EE617D !important;
  /*
  background-image: linear-gradient(30deg, #EE617D 25%, #3D6F8E 25%, #3D6F8E 50%, #EE617D 50%, #EE617D 75%, #3D6F8E 75%, #3D6F8E 100%);
  background-size: 80.00px 46.19px;
  */
}

.fullPageContainer .pageFooter, .splashContainer .pageFooter {
  /*
  // TODO: remove test color
  border-top: solid 1px #cccccc !important;
  background-color: rgba(255, 165, 0, 0.2); // orange;	
  */
  /*
  background-color: rgba(255, 165, 0, 0.2); // orange;
  */
}

/*
$rtContent-maxVideoWidth: 600px;
*/
/*
$loginPage-twoPaneThreshold-min: 100024px;
$loginPage-twoPaneThreshold-max: 100023px;
*/
/* #21759B; */ /* #54829d; */
/* #999999; */
/* #0485AD; */
/* #008e00; #21759B, #278bb8 */
/* #0485ad; */ /*#999999; */
/* #298CB9; */ /* #0485ad */
/* #374249; */
/* #374249; */
/* #374249; */
/* #d73600; ,rgb(181, 46, 0); */
/* TODO: measure/adjust */
/*
$tasktwo-font-size-x-large: 20px;
$tasktwo-font-size-large: 18px;
$tasktwo-font-size-larger: 16px;
$tasktwo-font-size-largeish: 15px;
$tasktwo-font-size-regular: 14px;
$tasktwo-font-size-smaller: 13px;
$tasktwo-font-size-smallish: 12px;
$tasktwo-font-size-small: 11px;

/ * not used on desktop * /
$tasktwo-font-size-x-small: 9px;
*/
@font-face {
  font-family: "Inter";
  src: url("/static/font/inter/Inter-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Inter";
  src: url("/static/font/inter/Inter-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "Inter";
  src: url("/static/font/inter/Inter-ExtraLight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "Inter";
  src: url("/static/font/inter/Inter-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Inter";
  src: url("/static/font/inter/Inter-Bold.ttf") format("truetype");
  font-weight: bold; /* 400 */
  font-style: normal;
}
@font-face {
  font-family: "Inter";
  src: url("/static/font/inter/Inter-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Inter";
  src: url("/static/font/inter/Inter-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Inter";
  src: url("/static/font/inter/Inter-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: "Inter";
  src: url("/static/font/inter/Inter-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
}
/*titles*/
@font-face {
  font-family: "Geist";
  src: url("/static/font/geist/Geist-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Geist";
  src: url("/static/font/geist/Geist-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "Geist";
  src: url("/static/font/geist/Geist-ExtraLight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "Geist";
  src: url("/static/font/geist/Geist-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Geist";
  src: url("/static/font/geist/Geist-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Geist";
  src: url("/static/font/geist/Geist-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Geist";
  src: url("/static/font/geist/Geist-Bold.ttf") format("truetype");
  font-weight: bold; /* 700 */
  font-style: normal;
}
@font-face {
  font-family: "Geist";
  src: url("/static/font/geist/Geist-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: "Geist";
  src: url("/static/font/geist/Geist-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "Geist";
  src: url("/static/font/geist/Geist-Italic.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: "Geist";
  src: url("/static/font/geist/Geist-ThinItalic.ttf") format("truetype");
  font-weight: 100;
  font-style: italic;
}
@font-face {
  font-family: "Geist";
  src: url("/static/font/geist/Geist-ExtraLightItalic.ttf") format("truetype");
  font-weight: 200;
  font-style: italic;
}
@font-face {
  font-family: "Geist";
  src: url("/static/font/geist/Geist-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: "Geist";
  src: url("/static/font/geist/Geist-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: "Geist";
  src: url("/static/font/geist/Geist-SemiBoldItalic.ttf") format("truetype");
  font-weight: 600;
  font-style: italic;
}
@font-face {
  font-family: "Geist";
  src: url("/static/font/geist/Geist-BoldItalic.ttf") format("truetype");
  font-weight: bold; /* 700 */
  font-style: italic;
}
@font-face {
  font-family: "Geist";
  src: url("/static/font/geist/Geist-ExtraBoldItalic.ttf") format("truetype");
  font-weight: 800;
  font-style: italic;
}
@font-face {
  font-family: "Geist";
  src: url("/static/font/geist/Geist-BlackItalic.ttf") format("truetype");
  font-weight: 900;
  font-style: italic;
}
/*
@import "font-nimbus-sans-l";
*/
/* --- ttlogo font ---- */
@font-face {
  font-family: "ttlogo";
  src: url("/static/font/ttlogo/ttlogo.eot?md6nh8");
  src: url("/static/font/ttlogo/ttlogo.eot?md6nh8#iefix") format("embedded-opentype"), url("/static/font/ttlogo/ttlogo.ttf?md6nh8") format("truetype"), url("/static/font/ttlogo/ttlogo.woff?md6nh8") format("woff"), url("/static/font/ttlogo/ttlogo.svg?md6nh8#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
}
.systemWarningIcon {
  color: #ffffff;
  font-size: 32px;
}

.systemWarningTitle {
  color: #ffffff;
  font-size: 20px;
  font-weight: bold;
  text-transform: uppercase;
  padding-bottom: 5px;
}

.systemWarningText {
  color: #ffffff;
  font-size: 13px;
  font-weight: normal;
}

.systemWarningText a {
  color: #ffffff;
  font-weight: normal;
  text-decoration: underline;
}

.systemWarningCountdownBoxTop {
  padding: 10px;
  font-size: 13px;
  font-weight: normal;
  background-color: rgba(0, 0, 0, 0.2);
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
  -moz-border-radius-topright: 3px;
  -moz-border-radius-topleft: 3px;
  -webkit-border-top-right-radius: 3px;
  -webkit-border-top-left-radius: 3px;
}

.systemWarningCountdownBoxBottom {
  font-size: 11px;
  padding: 10px;
  font-weight: normal;
  background-color: rgba(0, 0, 0, 0.4);
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  -moz-border-radius-bottomright: 3px;
  -moz-border-radius-bottomleft: 3px;
  -webkit-border-bottom-right-radius: 3px;
  -webkit-border-bottom-left-radius: 3px;
}

.errorPanel {
  /*
  -moz-box-shadow: 1px 1px 10px #999999;
  -webkit-box-shadow: 1px 1px 10px #999999;
  box-shadow: 1px 1px 10px #999999;	
  */
  border: none;
  width: 100%;
  padding: 0px;
  border-radius: 3px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  overflow: hidden;
  position: fixed;
  z-index: 10600;
  /*
  z-index:1000;
  */
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.errorPanel a {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  cursor: pointer;
  text-underline-position: under;
}

.errorPanel b {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.errorPanel span {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.errorPanelBg {
  opacity: 0.98;
  background: linear-gradient(to bottom right, rgb(56.9803921569%, 14.4812046366%, 0%), #b52e00);
  /*
  background: linear-gradient(to bottom right, darken(#b72f00, $gradient-color-deviation), #b72f00);
  */
}

.warningPanelBg {
  /*
  background: #0095b5 url("../image/warning-bg.png") repeat-x left top;
  background: #0095b5;
  background: #2f2f37;
  background: #0485ad;
  */
  opacity: 0.98;
  background: linear-gradient(to bottom right, rgb(1.2522432702%, 41.6370887338%, 54.1595214357%), #0485ad);
}

.errorCloseIndicatorBar {
  background-color: rgba(255, 255, 255, 0.25);
  height: 4px;
  width: 100%;
  /*
  margin-top:15px;
  */
  border-radius: 3px;
  overflow: hidden;
}

@media (max-width: 425px) {
  .errorPanel[data-modal=true] #errorMessageIconContainer {
    display: none !important;
  }
}
#workspaceNavigation {
  height: 100%;
  padding: 0px;
  margin: 0px;
  overscroll-behavior-y: none;
}

.fullPageContainer, .splashContainer {
  margin: 0px;
  padding: 0px;
  border: 0px;
  height: 100%;
  width: 100%;
  height: 100dvh;
  width: 100vw;
  vertical-align: top;
  /*
  margin: 0px;
  padding: 0px;
  border: none;
  */
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: stretch;
  align-items: stretch;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-flex-flow: column wrap;
  flex-flow: column wrap;
  -webkit-align-content: flex-start;
  align-content: flex-start;
  overflow: hidden;
}

.splashContainer {
  position: fixed;
  top: 0;
  left: 0;
  opacity: 1;
  justify-content: center;
  text-align: center;
  /*
  transition: visibility 0s, opacity 5s linear;	
  transition: all 0.5s ease-in;
  */
  transition: opacity 0.5s ease-in, background-color 0.5s ease-in, background-image 0.5s ease-in;
  /*
  background-image: linear-gradient(to bottom right, #121212, #113b55);
  background-color: #113b55;
  */
  color: white;
  background-image: linear-gradient(to bottom right, #121212, #113b55);
  background-repeat: no-repeat;
  background-size: cover;
}

.fullPageContainer .fullPagePanel, .splashContainer .fullPagePanel {
  /*
  flex-basis: 90%;
  */
  flex-shrink: 1;
  flex-grow: 1;
  /*
  border-width: 0px;
  margin: 0px;  
  */
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 100px;
}

.headerBackground {
  /*
  background: linear-gradient(to bottom right, darken($prod-header-background-color, $gradient-color-deviation), $prod-header-background-color) !important;
  background-attachment: fixed;
  */
  background-color: rgba(0, 0, 0, 0);
  background-position-x: 0%;
  background-position-y: 0%;
  background-repeat: repeat;
  background-attachment: fixed;
  background-image: linear-gradient(to bottom right, #121212, #113b55) !important;
  /*
  background-image: linear-gradient(to bottom right, darken($prod-header-background-color, $gradient-color-deviation), $prod-header-background-color) !important;
  background-color: #1F2535;
  background-image: linear-gradient(to bottom right, darken($prod-header-background-color, $gradient-color-deviation), $prod-header-background-color) !important;
  */
  background-size: auto;
  background-origin: padding-box;
  background-clip: border-box;
}

.devHeaderBackground {
  background-color: rgba(0, 0, 0, 0);
  background-position-x: 0%;
  background-position-y: 0%;
  background-repeat: repeat;
  background-attachment: fixed;
  background-image: linear-gradient(to bottom right, rgb(43.2549019608%, 42.6623690572%, 0%), #929000) !important;
  /*
  	background-image: linear-gradient(to bottom right, #121212, #113b55) !important;
     	background-image: linear-gradient(to bottom right, darken($prod-header-background-color, $gradient-color-deviation), $prod-header-background-color) !important;
  		*/
  background-size: auto;
  background-origin: padding-box;
  background-clip: border-box;
}

.qaHeaderBackground {
  background-color: rgba(0, 0, 0, 0);
  background-position-x: 0%;
  background-position-y: 0%;
  background-repeat: repeat;
  background-attachment: fixed;
  background-image: linear-gradient(to bottom right, rgb(44.0392156863%, 24.4001059883%, 0%), #945200) !important;
  background-size: auto;
  background-origin: padding-box;
  background-clip: border-box;
}

.newServerHeaderBackground {
  background-color: rgba(0, 0, 0, 0);
  background-position-x: 0%;
  background-position-y: 0%;
  background-repeat: repeat;
  background-attachment: fixed;
  background-image: linear-gradient(to bottom right, rgb(0.9554179567%, 37.5797729618%, 59.5543859649%), #0376BB) !important;
  background-size: auto;
  background-origin: padding-box;
  background-clip: border-box;
}

.confidentialHeaderBg {
  background: linear-gradient(to bottom right, rgb(56.9803921569%, 14.4812046366%, 0%), #b52e00) !important;
  /*
  background: linear-gradient(to bottom right, $confidential-header-background-color, lighten($confidential-header-background-color, $gradient-color-deviation)) !important;
  background: linear-gradient(to bottom right, $background-color-red-button, lighten($background-color-red-button, $button-color-deviation)) !important; 
  background-color: $confidential-header-background-color !important;
  */
}

.hFlexContainer {
  margin: 0px;
  padding: 0px;
  vertical-align: top;
  border: 0px;
  display: flex;
  -webkit-flex-flow: row;
  flex-flow: row;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-align-items: center;
  align-items: center;
  -webkit-align-content: normal;
  align-content: normal;
  justify-content: center;
}

.vFlexContainer {
  margin: 0px;
  padding: 0px;
  vertical-align: top;
  border: 0px;
  display: flex;
  flex-flow: column;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  /*
  align-content: center;
  */
  align-content: normal;
  justify-content: center;
}

.fh {
  /*
  height: calc(100dvh - 20px);
  */
  min-height: 100dvh;
}

.pageContentLayoutContainer {
  /* needed for filter : brightness */
  background-color: #f2f2f2;
  transition-property: filter;
  transition-timing-function: ease-in-out;
  transition-duration: 0.2s; /* 500 milliseconds */
  vertical-align: top;
  width: 100vw;
  max-width: 100vw;
  /*
  margin: 0px;
  padding: 0px;
  border: none;
  */
  display: flex;
  flex-direction: row;
  align-items: top;
  flex-wrap: wrap;
  flex-flow: row;
  align-content: flex-start;
  overflow: hidden;
}

.pageContentLayoutContainer .pageContentLayoutPanel {
  overflow-x: hidden;
  overflow-y: auto;
  min-width: 0px;
  flex-basis: 90%;
  flex-shrink: 1;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

:root {
  /*
  --scrollbar-thumb-color: #2ca4db;
  --scrollbar-track-color : #113b55;


  background: #efe0c5;  #e1c898  #f2e8d3; 

      background: #113b55;
  	background: #998561;
  //	scrollbar-color: #998561 #efe0c5; 
   #e1c898  #f2e8d3;
  	 #e1c898  #f2e8d3; 


  	  TODO: change to relative colors



  	  --espresso-scrollbar-color-thumb: #2ca4db;;
  	  	--espresso-scrollbar-color-track : #113b55;

  		--espresso-scrollbar-color-thumb: #2ca4db;;
  		--espresso-scrollbar-color-track : #113b55;

  */
  --scrollbar-thumb-color-bright: rgba(255, 255, 255, 0.75);
  --scrollbar-track-color-bright: rgba(255, 255, 255, 0.08);
  --scrollbar-thumb-shadow-bright: 0px 1px 2px rgba(255, 255, 255, 0.75);
  --scrollbar-thumb-color-dark: #2ca4db99;
  --scrollbar-track-color-dark: transparent;
  --scrollbar-thumb-color: rgba(0, 0, 0, 0.5);
  --scrollbar-track-color: rgba(0, 0, 0, 0.08);
  --scrollbar-thumb-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
  --scrollbar-size-wide: 17px;
  --scrollbar-size-med: 12px;
  --scrollbar-size-narrow: 8px;
  --scrollbar-radius: 1ex;
}

div.headerBackground,
div.dashboardListPanelContent {
  scrollbar-color: var(--scrollbar-thumb-color-dark) var(--scrollbar-track-color-dark);
  scrollbar-width: auto;
}

div.headerBackground::-webkit-scrollbar,
div.headerBackground::-webkit-scrollbar-track,
div.dashboardListPanelContent::-webkit-scrollbar,
div.dashboardListPanelContent::-webkit-scrollbar-track {
  height: var(--scrollbar-size-med);
  width: var(--scrollbar-size-med);
  background-color: var(--scrollbar-track-color-dark);
  border-radius: var(--scrollbar-radius);
}

div.headerBackground::-webkit-scrollbar-thumb,
div.dashboardListPanelContent::-webkit-scrollbar-thumb {
  border-radius: var(--scrollbar-radius);
  background-color: var(--scrollbar-track-color-dark);
}

div.headerBackground::-webkit-scrollbar-corner,
div.dashboardListPanelContent::-webkit-scrollbar-corner {
  background-color: var(--scrollbar-track-color-dark);
}

#errorMessageContainer {
  scrollbar-color: var(--scrollbar-thumb-color-bright) var(--scrollbar-track-color-bright);
  scrollbar-width: auto;
}

#errorMessageContainer::-webkit-scrollbar,
#errorMessageContainer::-webkit-scrollbar-track {
  height: var(--scrollbar-size-med);
  width: var(--scrollbar-size-med);
  background-color: var(--scrollbar-track-color-bright);
  border-radius: var(--scrollbar-radius);
}

#errorMessageContainer::-webkit-scrollbar-thumb {
  border-radius: var(--scrollbar-radius);
  background-color: var(--scrollbar-track-color-bright);
}

#errorMessageContainer::-webkit-scrollbar-corner {
  background-color: var(--scrollbar-track-color-bright);
}

div.bbGridCellBox div.gridCellField,
div.bbGridCellBox div.xContainer,
div.bbGridCellBox div:not(.xContainerExclusion) > div.xContainer.xC150_500,
div.bbGridCellBox div.bbGridCellFooter,
div.gridBodyCell textarea,
div.gridBodyCell div.xContainer,
div.gridBodyCell div:not(.xContainerExclusion) > div.xContainer.xC150_500,
div.maxCellHeightContainer {
  --xContainer-scrollbar-track-color: rgba(0, 0, 0, 0.025);
  --xContainer-scrollbar-thumb-color: rgba(0, 0, 0, 0.25);
  scrollbar-color: var(--xContainer-scrollbar-thumb-color) var(--xContainer-scrollbar-track-color);
  scrollbar-width: thin;
}

div.bbGridCellBox div.xContainer::-webkit-scrollbar, div.bbGridCellBox div:not(.xContainerExclusion) > div.xContainer.xC150_500::-webkit-scrollbar,
div.bbGridCellBox div.bbGridCellFooter::-webkit-scrollbar,
div.gridBodyCell div.xContainer::-webkit-scrollbar,
div.gridBodyCell div:not(.xContainerExclusion) > div.xContainer.xC150_500::-webkit-scrollbar,
div.bbGridCellBox div.gridCellField::-webkit-scrollbar,
div.bbGridCellBox div.xContainer::-webkit-scrollbar-track,
div.bbGridCellBox div:not(.xContainerExclusion) > div.xContainer.xC150_500::-webkit-scrollbar-track,
div.bbGridCellBox div.bbGridCellFooter::-webkit-scrollbar-track,
div.gridBodyCell div.xContainer::-webkit-scrollbar-track,
div.gridBodyCell div:not(.xContainerExclusion) > div.xContainer.xC150_500::-webkit-scrollbar-track,
div.bbGridCellBox div.gridCellField::-webkit-scrollbar-track,
div.gridBodyCell textarea::-webkit-scrollbar,
div.gridBodyCell textarea::-webkit-scrollbar-track,
div.maxCellHeightContainer::-webkit-scrollbar,
div.maxCellHeightContainer::-webkit-scrollbar-track {
  height: var(--scrollbar-size-med);
  width: var(--scrollbar-size-med);
  background-color: var(--xContainer-scrollbar-track-color);
  border-radius: var(--scrollbar-radius);
}

div.bbGridCellBox div.xContainer::-webkit-scrollbar-thumb, div.bbGridCellBox div:not(.xContainerExclusion) > div.xContainer.xC150_500::-webkit-scrollbar-thumb,
div.bbGridCellBox div.bbGridCellFooter::-webkit-scrollbar-thumb,
div.gridBodyCell div.xContainer::-webkit-scrollbar-thumb,
div.gridBodyCell div:not(.xContainerExclusion) > div.xContainer.xC150_500::-webkit-scrollbar-thumb,
div.gridBodyCell textarea::-webkit-scrollbar-thumb,
div.bbGridCellBox div.gridCellField::-webkit-scrollbar-thumb,
div.maxCellHeightContainer::-webkit-scrollbar-thumb {
  background-color: var(--xContainer-scrollbar-thumb-color);
}

div.bbGridCellBox div.xContainer::-webkit-scrollbar-corner, div.bbGridCellBox div:not(.xContainerExclusion) > div.xContainer.xC150_500::-webkit-scrollbar-corner,
div.bbGridCellBox div.bbGridCellFooter::-webkit-scrollbar-corner,
div.gridBodyCell div.xContainer::-webkit-scrollbar-corner,
div.gridBodyCell div:not(.xContainerExclusion) > div.xContainer.xC150_500::-webkit-scrollbar-corner,
div.gridBodyCell textarea::-webkit-scrollbar-corner,
div.bbGridCellBox div.gridCellField::-webkit-scrollbar-corner,
div.maxCellHeightContainer::-webkit-scrollbar-corner {
  background-color: var(--xContainer-scrollbar-track-color);
}

* {
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /*
  @include font-smoothing;
     transition: color 0.1s linear;
     */
}

*::selection {
  background: #0485ad;
  color: white;
  text-shadow: none;
}

*::placeholder {
  letter-spacing: 0.01em;
  font-size: 12px;
  font-style: italic;
  color: #aaaaaa;
}

html {
  margin: 0px;
  padding: 0px;
  border: 0px;
  overflow: auto;
  overscroll-behavior-x: none;
  /*
  scroll-behavior: auto;
  */
  scroll-behavior: smooth;
  height: 100dvh;
  width: 100vw;
}

body {
  margin: 0px;
  padding: 0px;
  border: 0px;
  font-size: 13px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: normal;
  color: black;
  text-align: left;
  overscroll-behavior-x: none;
  /*
  height: 100%;
     width: 100%;
  */
  width: 100vw;
  height: 100dvh;
  height: -moz-available;
  height: -webkit-fill-available;
  height: fill-available;
  height: stretch;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: auto;
  min-height: 0px; /* flex overflow bug */
  /* Latest specification */
}

form {
  display: flex;
  flex-direction: column;
  overflow: auto;
  /*
  flex: 1 1 auto;	
  */
}

img {
  border-width: 0px;
}

a {
  text-underline-position: under;
  text-decoration: none;
}

textarea {
  display: block; /* critical */
  resize: none; /*no resize handle*/
  -moz-resize: none;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  line-height: 1.3;
  margin: 0px;
  border: none;
  /*
  padding: 0
  */
}

input {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

table {
  border: none;
  border-collapse: collapse;
}

table tr {
  vertical-align: top;
}

table tr td {
  padding: 0px;
}

span.avoidwrap {
  display: inline-block;
}

.roundedCorners3 {
  border-radius: 3px;
  /*
  -webkit-border-radius: $propertyValue;
  */
}

.roundedCorners5 {
  border-radius: 3px;
  /*
  -webkit-border-radius: $propertyValue;
  */
}

.roundedCorners15 {
  border-radius: 15px;
  /*
  -webkit-border-radius: $propertyValue;
  */
}

.errorCloseIcon {
  font-size: 1.4em;
  line-height: 1.4em;
  color: #ffffff;
  float: right;
  cursor: pointer;
  vertical-align: top;
  padding: 0px;
  transition: font-size 0.1s linear;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /*
  @include font-smoothing;
  */
}

.errorCloseIcon:hover {
  font-size: 1.4em;
  line-height: 1.4em;
}

.loadingContentMessage {
  letter-spacing: 0.01em;
  background-color: transparent;
  border: none;
  color: #21759B; /* #335588; #2f2f37*/
  cursor: pointer;
  left: 0px;
  margin: none;
  padding: 15px;
  line-height: 1.3;
  min-height: 47px;
  /*
  padding : 8px 12px;
  text-decoration: none;
  */
  white-space: nowrap;
  /*
  top: 0px;
  */
  font-size: 13px;
  font-style: normal;
  font-weight: normal;
  overflow: hidden;
}

.dropShadow {
  -moz-box-shadow: 1px 1px 10px #e0e0e0;
  -webkit-box-shadow: 1px 1px 10px #e0e0e0;
  box-shadow: 1px 1px 10px #e0e0e0;
}

/* TODO: replace formContainer with gridContainer everywhere appropriate */
.framedContainer, .formContainer {
  /* this should be safe*/
  width: 100%;
  border-radius: 3px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  border: solid 1px #cccccc;
}

.formContainer {
  background-color: #e9e9e9;
}

.pageFlexContainerBase {
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.framedFlexContainerBase, .framedFlexContainer {
  display: flex;
  flex-direction: column;
  overflow: auto;
  border-radius: 3px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  border: solid 1px #cccccc;
}

.framedFlexContainer {
  flex-direction: column;
}

.pageFlexContainer {
  display: flex;
  flex-direction: column;
  overflow: auto;
  flex: 0 1 auto;
  /*
  width: 100%;

  flex-direction: column;
  padding: 10px 15px 0px 15px;
  // TODO: verify top padding
  */
  padding: 5px 15px 0px 15px;
}

.pageContainer {
  padding: 5px 15px 0px 15px;
}

/* TODO: discontinue use */
.gridContainerBase, .gridContainer {
  display: flex;
  flex-direction: column;
  overflow: auto;
  padding: 0px;
  /*
  background-color: #dddedd;
  background-color: #eaeaea;
  width: 100%;
  */
}

/* TODO: discontinue use */
.gridContainer {
  border: solid 1px #cccccc;
  border-radius: 3px;
  /*
  -webkit-border-radius: $propertyValue;
  */
}

.bbHeaderTextSmall {
  padding-top: 7px;
  float: right;
  color: #121212;
  font-size: 11px;
  text-transform: uppercase;
  /*
  color: #808080;
  */
  color: #999999;
}

.bbHeaderTextSmall:hover {
  color: rgb(0.0588235294%, 0.0588235294%, 0.0588235294%) !important;
}

.tempPlaceholder {
  text-align: center;
  vertical-align: middle;
  background: #cccccc;
  font-size: 24px;
  color: #b3b3b3;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nonEditableGridCellContent {
  background: #ededed;
  border-radius: 3px;
  margin: -3px;
  padding: 3px;
}

div.searchToolbarFrame {
  overflow: hidden;
  padding: 5px 15px 1px 15px;
  border-style: solid;
  border-width: 0px 0px 1px 0px;
  border-color: rgba(0, 0, 0, 0.07);
  /*
  border-color: #cccccc;
  background-color: #dddedd;
  background-color: #d0d0d0;
  */
  background-color: #d9d9d9;
}

.confirmationDialogText {
  padding: 15px;
  line-height: 1.3;
  user-select: text;
}

.buttonBox .button {
  margin-right: 20px;
}

.buttonBox .button:last-of-type {
  margin-right: 0px;
}

.pageResizeOverlay {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 15000;
  width: 100vw;
  height: 100vh;
  display: flex;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  font-size: 72px;
  background-color: #ededed;
  color: #cccccc;
  cursor: pointer;
  background-image: url("/static/image/resize-overlay-bg-1-2pb.svg"), url("/static/image/resize-overlay-bg-2pb.svg");
  background-repeat: no-repeat, no-repeat;
  background-position: bottom -7vw left 0%, top 10vh left 10vh;
  background-size: 140vw, 50vh;
}

.widgetChartLoadingContainer {
  width: 100%;
  height: 100%;
  display: flex;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  font-size: 60px;
  background-color: #ededed;
  color: #cccccc;
}

.gridCellListItem {
  --spacingTop: 0.75em;
  --spacingBottom: 0.75em;
  margin-top: var(--spacingTop);
  margin-bottom: var(--spacingBottom);
  margin-right: 0px;
  margin-left: 0px;
  padding: 0px;
  overflow-y: hidden;
  line-height: 1.3;
  word-wrap: break-word;
}

.gridCellListItemXS {
  --spacingTop: 1em;
  --spacingBottom: 1em;
  margin-top: var(--spacingTop);
  margin-bottom: var(--spacingBottom);
  margin-right: 0px;
  margin-left: 0px;
  padding: 0px;
  overflow-y: hidden;
  line-height: 1.3;
  word-wrap: break-word;
}

.gridCellParagraph > .gridCellListItem:nth-child(1 of .gridCellListItem),
.gridCellParagraph > .gridCellListItemXS:nth-child(1 of .gridCellListItemXS),
.gridCellParagraphWTB > .gridCellListItem:nth-child(1 of .gridCellListItem),
.gridCellParagraphWTB > .gridCellListItemXS:nth-child(1 of .gridCellListItemXS),
.gridCellParagraphWBB > .gridCellListItem:nth-child(1 of .gridCellListItem),
.gridCellParagraphWBB > .gridCellListItemXS:nth-child(1 of .gridCellListItemXS),
.gridCellField > .gridCellListItem:nth-child(1 of .gridCellListItem),
.gridCellField > .gridCellListItemXS:nth-child(1 of .gridCellListItemXS) {
  margin-top: 0px;
}

.gridCellParagraph > .gridCellListItem:nth-last-child(1 of .gridCellListItem),
.gridCellParagraph > .gridCellListItemXS:nth-last-child(1 of .gridCellListItemXS),
.gridCellParagraphWTB > .gridCellListItem:nth-last-child(1 of .gridCellListItem),
.gridCellParagraphWTB > .gridCellListItemXS:nth-last-child(1 of .gridCellListItemXS),
.gridCellParagraphWBB > .gridCellListItem:nth-last-child(1 of .gridCellListItem),
.gridCellParagraphWBB > .gridCellListItemXS:nth-last-child(1 of .gridCellListItemXS),
.gridCellField > .gridCellListItem:nth-last-child(1 of .gridCellListItem),
.gridCellField > .gridCellListItemXS:nth-last-child(1 of .gridCellListItemXS) {
  margin-bottom: 0px;
}

.avoidBreak {
  page-break-inside: avoid;
  break-inside: avoid;
  column-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
}

.noBreak {
  white-space: nowrap;
}

.xltxt, .xlgtxt {
  letter-spacing: 0.01em;
  font-size: 20px;
  font-weight: normal;
  font-style: normal;
}

.xlgtxt {
  color: #999999;
}

.ltxt, .mlgtxt, .lgtxt {
  letter-spacing: 0.01em;
  font-size: 16px;
  font-weight: normal;
  font-style: normal;
}

.lgtxt {
  color: #999999;
}

.mltxt {
  letter-spacing: 0.01em;
  font-size: 14px;
  font-weight: normal;
  font-style: normal;
}

.mlgtxt {
  color: #999999;
}

.sgtxt {
  color: #999999;
}

.slgtxt {
  color: #cccccc;
}

.srtxt {
  color: #EA3C00;
}

#dialog\.mediaPlaybackDialog {
  z-index: 103 !important;
}

.loginLeftPanelTop {
  display: flex;
  height: 10dvh;
  width: 100%;
  background-clip: padding-box;
  overflow: hidden;
}

.loginLeftPanelBottom {
  display: flex;
  height: 10dvh;
  width: 100%;
  background-clip: padding-box;
  overflow: hidden;
}

.mLoginPanel {
  max-width: 440px;
}

.loginLeftPanelContent table {
  width: 100%;
  padding: 0px;
  margin: 0px;
  border: 0px;
}

.loginLeftPanelContentTable {
  width: 100%;
  padding: 0px;
  border: none;
  margin: 0px;
}

.loginPageBackground {
  background-position-x: 0%;
  background-position-y: 0%;
  background-attachment: fixed;
  background-origin: border-box;
  background-clip: border-box;
  /*
     background-image: url("/static/image/mobile-login-page-bg7.png");
    	background-color: #113b55;
  background-size: cover;
  */
  /*
  background-image: linear-gradient(to bottom right, #121212, #113b55) !important;
  background-repeat: repeat;
  background-size: auto;
  */
  /*
  background-color: white;
  */
  background-color: transparent;
  background-image: linear-gradient(to bottom right, #121212, #113b55) !important;
  background-repeat: repeat;
  background-size: auto;
}

.loginRightPanel {
  text-align: center;
  display: flex;
  align-items: center;
  place-content: center;
  color: black;
  /*
   	background-origin: border-box;
     background-clip: border-box;
  background-attachment: fixed;

     background-size: 30dvh;
     background-position-x: 90%;
     background-position-y: 50%;
     */
  /*
   	background-color: transparent;
  background-position-x: calc(100% - 30px);
  background-position-y: calc(100% - 30px);	
     background-image: url('/static/image/tt-on-desktop-computer.png');
     background-repeat: no-repeat;
     background-size: 40dvh;
     */
  /*
  background-image: url('/static/image/tt-on-desktop-computer.png');
  background-repeat: no-repeat;
  */
  /*
  background-size: cover;
  background-position-x: 50%;
  background-position-y: center;
  background-color: #ededed;
  */
}

.loginLeftPanel {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  place-content: center;
  color: white;
  background-color: transparent;
  /*	
  background-image: linear-gradient(to bottom right, #121212, #113b55);
  background-repeat: no-repeat;
  background-size: cover;
  */
}

.loginLogoContainer {
  padding-top: 30px;
  padding-bottom: 45px;
  padding-right: 15px;
  padding-left: 15px;
  width: 100%;
}

.loginLogoContainer img {
  width: 190px;
}

.loginPageContent {
  transition-property: font-size, background-color, color;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
  font-size: 15px;
  background-image: linear-gradient(to bottom right, #121212, #113b55) !important;
  color: white;
  background-color: #ededed;
  /*
  background-image: url('/static/image/mobile-login-page-bg4.jpg');
  background-image: url('/static/image/mobile-login-page-bg8.png');
  background-image: linear-gradient(to bottom right, darken($prod-header-background-color, $gradient-color-deviation), $prod-header-background-color) !important;
  background-color:$prod-header-background-color;	
  background-image: url('/static/image/mobile-login-page-bg.png');
  */
  background-repeat: no-repeat;
  background-size: cover;
  background-position-x: 0%;
  background-position-y: 0%;
  /*
  font-size: $tasktwo-font-size-larger;

  background-color: $prod-header-background-color;
     background-position-x: 0%;
     background-position-y: 0%;
     background-repeat: repeat;
     background-attachment: fixed;
     background-image: linear-gradient(to bottom right, darken($prod-header-background-color, $gradient-color-deviation), $prod-header-background-color) !important;
     background-size: auto;
     background-origin: padding-box;
     background-clip: border-box;
  */
}

.llpContainer {
  width: 100vw;
  max-width: 500px;
  height: 80dvh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px;
}

@media only screen and (max-width: 1023px) {
  .loginLeftPanelTop {
    max-width: 500px;
    padding: 15px 30px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: start;
  }
  .loginLeftPanelBottom {
    max-width: 500px;
    padding: 15px 30px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: start;
  }
  #loginPageLogoWide {
    display: none;
  }
  .loginButton {
    color: #000000;
    background: linear-gradient(to bottom right, #fdc047 0%, #fdb23a 100%);
  }
  .loginButton:hover {
    background: linear-gradient(to bottom right, rgb(99.0651486401%, 70.5521821632%, 13.9936748893%), rgb(99.0749827569%, 64.3868361415%, 8.8858015568%)) !important;
  }
  .loginLeftPanel {
    flex: 1 1 100%;
  }
  .loginRightPanel {
    flex: 1 1 0%;
    display: none;
  }
}
@media only screen and (min-width: 1024px) {
  .loginLeftPanelTop {
    max-width: 530px;
    padding: 15px 30px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: start;
  }
  .loginLeftPanelBottom {
    max-width: 530px;
    padding: 5px 15px 15px 5px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: start;
  }
  #loginPageLogo {
    display: none;
  }
  .loginButton {
    color: white;
    background: linear-gradient(to bottom right, #21759B, rgb(15.3986232791%, 54.5951188986%, 72.326866917%));
    /*
    color: #000000;
    background: linear-gradient(to bottom right, #fdc047 0%, #fdb23a 100%);
    */
  }
  .loginButton:hover {
    background: linear-gradient(to bottom right, rgb(10.4837296621%, 37.1695869837%, 49.241760534%), #21759B) !important;
    /*
    background: linear-gradient(to bottom right, darken(#fdc047, $gradient-color-deviation), darken(#fdb23a, $gradient-color-deviation)) !important;
    */
  }
  .loginLeftPanel {
    padding: 0dvh 0px 0dvh 10vw;
    max-width: min(50%, 670px);
    flex: 1 1 50%;
  }
  .loginRightPanel {
    padding: 10dvh 10vw 10dvh 0px;
    flex: 1 1 50%;
    /*
    max-width: 50%;
    */
  }
  .llpContainer {
    height: calc(80dvh - 30px);
    border-radius: 5px 0px 0px 5px;
    /*
    -webkit-border-radius: $propertyValue;
    */
  }
  .loginLeftPanelContent {
    /*
    height: calc(100dvh - 120px);
    */
    height: 80dvh;
    width: 100%;
    background-color: #ededed;
    display: flex;
    align-items: center;
    border-radius: 5px 0px 0px 5px;
    /*
    -webkit-border-radius: $propertyValue;
    */
    padding: 15px;
    background-clip: padding-box;
    overflow: hidden;
  }
}
.contentBoxHeader {
  letter-spacing: 0.01em;
  padding: 12px 15px 10px 15px;
  margin: 0px;
  font-weight: bold;
  background-color: #dddedd;
  border-bottom: solid 1px #cccccc;
}

.contentBoxParagraph {
  margin: 10px 15px 15px 15px;
  padding: 0px;
  overflow-y: hidden;
  /*
   margin: 10px 15px 10px 15px;

  border-bottom: solid 1px #cccccc;
  */
  line-height: 1.3;
}

.contentBoxParagraphWithSeparator {
  margin: 10px 15px 20px 15px;
  padding: 0px;
  overflow-y: hidden;
  border-bottom: solid 1px #cccccc;
  padding-bottom: 10px;
}

.contentBoxFooterLight {
  /*
  border-top: solid 1px #dddedd;
  */
  padding: 10px 15px 8px 15px;
  margin: 15px 0px 0px 0px;
  background-color: #ededed;
  color: #999999;
  font-size: 11px;
}

.contentBoxFooter {
  /*
  border-top: solid 1px #dddedd;
  */
  padding: 10px 15px 8px 15px;
  margin: 15px 0px 0px 0px;
  background-color: #dddedd;
  color: #999999;
  font-size: 11px;
}

.kpiDesignator {
  color: rgba(0, 0, 0, 0.6);
  font-size: 1.6em;
  display: inline-block;
  float: right;
  opacity: 0.3;
  padding-top: 2px;
}

.cellBGBox {
  border: none;
  margin: -10px -10px 0px -10px;
  padding: 7px 10px 7px 10px;
  height: calc(100% + 20px) !important;
  -webkit-print-color-adjust: exact;
  overflow: hidden;
  width: calc(100% + 20px);
}

.cellBGBoxStd {
  border: none;
  margin: -10px -10px 0px -10px;
  padding: 10px 10px 7px 10px;
  height: calc(100% + 20px) !important;
  -webkit-print-color-adjust: exact;
  overflow: hidden;
  width: calc(100% + 20px);
}

.iconTextBox {
  display: flex;
  justify-content: flex-start;
  align-items: start;
  flex-direction: row;
  vertical-align: top;
}

.iconTextBox i {
  margin-right: 8px;
  margin-top: 2px;
}

.scrollbox {
  position: relative;
  z-index: 1;
  overflow: auto;
  /*
     background-repeat: no-repeat;

     background-image:
         -webkit-radial-gradient(50% 0, farthest-side, rgba(0,0,0,0.15), rgba(0,0,0,0)),
         -webkit-radial-gradient(50% 100%,farthest-side, rgba(0,0,0,0.15), rgba(0,0,0,0));
     background-image:
         -moz-radial-gradient(50% 0, farthest-side, rgba(0,0,0,0.15), rgba(0,0,0,0)),
         -moz-radial-gradient(50% 100%,farthest-side, rgba(0,0,0,0.15), rgba(0,0,0,0));
     background-image:
         radial-gradient(farthest-side at 50% 0, rgba(0,0,0,0.15), rgba(0,0,0,0)),
         radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,0.15), rgba(0,0,0,0));
     background-position: 0 0, 0 100%;
     background-size: 100% 14px;
  */
}

/*
.scrollbox:before,
.scrollbox:after 
{
    content: "";
    position: relative;
    z-index: -1;

    display: block;

    height: 30px;
    margin: 0 0 -30px;
    background: -webkit-linear-gradient(top,#ededed,#ededed 30%,rgba(237,237,237,0));
    background:    -moz-linear-gradient(top,#ededed,#ededed 30%,rgba(237,237,237,0));
    background:   linear-gradient(to bottom,#ededed,#ededed 30%,rgba(237,237,237,0));
}

.scrollbox:after 
{
    margin: -30px 0 0;
    background: -webkit-linear-gradient(top,rgba(237,237,237,0),#ededed 70%,#ededed);
    background:    -moz-linear-gradient(top,rgba(237,237,237,0),#ededed 70%,#ededed);
    background:   linear-gradient(to bottom,rgba(237,237,237,0),#ededed 70%,#ededed);
}
*/
.refLink,
.smallLink,
.blueLink {
  --linkColor: #21759b;
  color: #21759b;
  text-decoration-color: #21759b;
  text-decoration-color: color-mix(in srgb, #21759b 50%, transparent);
  white-space: normal;
  cursor: pointer;
  transition-property: color, background-color;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
  /*
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.025);
  */
  /*
  text-decoration: underline;
  text-underline-position: under;
  */
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 1px;
  text-underline-offset: 0px;
}

.secondaryRefLink {
  --linkColor: #3d6a7f;
  color: #3d6a7f;
  text-decoration-color: #3d6a7f;
  text-decoration-color: color-mix(in srgb, #3d6a7f 50%, transparent);
  white-space: normal;
  cursor: pointer;
  transition-property: color, background-color;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
  /*
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.025);
  */
  /*
  text-decoration: underline;
  text-underline-position: under;
  */
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 1px;
  text-underline-offset: 0px;
}

.refLink:hover,
.secondaryRefLink:hover,
.smallLink:hover,
.blueLink:hover {
  --hoverColor: #d54e21;
  color: #d54e21;
  text-decoration-color: #d54e21;
  text-decoration-color: color-mix(in srgb, #d54e21 50%, transparent);
}

/*

.blueLinkSecondary
{
	--linkColor: #3d6a7f;

	color: var(--linkColor);
	text-decoration-color: var(--linkColor); // fallback
	text-decoration-color: rgb(from var(--linkColor) r g b / 50%);
	// text-decoration-color: alpha(from var(--linkColor) / 50%);

	@include linkBase;
}
*/
.redLink {
  --linkColor: #d54e21;
  color: #d54e21;
  text-decoration-color: #d54e21;
  text-decoration-color: color-mix(in srgb, #d54e21 50%, transparent);
  white-space: normal;
  cursor: pointer;
  transition-property: color, background-color;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
  /*
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.025);
  */
  /*
  text-decoration: underline;
  text-underline-position: under;
  */
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 1px;
  text-underline-offset: 0px;
}

.redLink:hover {
  /*
  font-weight: bold;
  */
}

#errorMessage a,
.errorMessageLink,
.whiteLink {
  --linkColor: $color-white-link;
  color: #ffffff;
  text-decoration-color: #ffffff;
  white-space: normal;
  cursor: pointer;
  transition-property: color, background-color;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
  /*
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.025);
  */
  /*
  text-decoration: underline;
  text-underline-position: under;
  */
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 1px;
  text-underline-offset: 0px;
}

#errorMessage a {
  font-weight: bold;
}

/*
#errorMessage a:hover,
.errorMessageLink:hover,
.whiteLink:hover
{

}
*/
.smallLink {
  font-size: 12px;
}

.boldLink {
  font-weight: bold;
}

.wrapLink {
  white-space: normal !important;
}

/* TODO: discontinue use */
.bbLinkIcon {
  cursor: pointer;
}

.bbLinkIcon:hover {
  color: #D54E21;
}

.gridCellLinkNC {
  color: #000000;
  text-decoration: none;
}

.gridCellLinkNC:hover {
  color: #d54e21 !important;
  text-decoration: underline;
}

.gridCellLinkNC:hover .sgtxt {
  color: #d54e21 !important;
}

.gridCellLink {
  color: #000000;
  text-decoration: none;
}

.gridCellLink:hover {
  color: #d54e21 !important;
  text-decoration: underline;
}

.gridCellLink:hover .sgtxt {
  color: #d54e21 !important;
}

div.mobileCardButtonIcon {
  margin-bottom: 5px;
  color: rgba(255, 255, 255, 0.6);
}

div.mobileCardButtonIcon i {
  font-size: 1.3em;
}

.tagBase, .cellTag, .projectCompletionTagLate, .projectCompletionTag, .documentTag, .businessCaseTagClosed, .businessCaseTagRejected, .businessCaseTagApproved, .businessCaseTagProposal, .businessCaseTagDraft, .timesheetEntryTagPTO, .timesheetEntryTagNPA, .timesheetEntryTagTask, .timesheetTagSubmitted, .timesheetTagNotSubmitted, .timesheetTagMissing, .timesheetTagRejected, .timesheetTagApproved, .workflowTagCompleted, .workflowTagSuspended, .workflowTagTerminated, .workflowTagInProgressWaiting, .workflowTagInProgress, .workflowTagNotStarted, .workflowDefinitionTagPublished, .workflowDefinitionTagNotPublished, .actionItemTag, .bbTag, .businessCaseBBTagClosed, .businessCaseBBTagRejected, .businessCaseBBTagApproved, .businessCaseBBTagProposal, .businessCaseBBTagDraft, .bbTagTimesheet, .timesheetBBTagSubmitted, .timesheetBBTagNotSubmitted, .timesheetBBTagMissing, .timesheetBBTagRejected, .timesheetBBTagApproved, .actionItemBBTag, .bbTagGeneric {
  display: inline-flex;
  flex-direction: row;
  width: fit-content;
  align-items: baseline;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-radius: 45px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  font-size: 11px;
  background-size: 100% 100%;
  background-origin: border-box;
  background-clip: border-box;
  background-repeat: no-repeat;
  line-height: 1.3;
  overflow: clip;
  /*
  color: white;
  background-color: rgba(0, 0, 0, 0);
  background-image: linear-gradient(to bottom right, #a6a6a6, #c0c0c0);
  */
  color: var(--tagColor);
  border-color: color-mix(in srgb, var(--tagColor) var(--borderOpacity), transparent);
  background-color: color-mix(in srgb, var(--tagColor) var(--backgroundOpacity), transparent);
  border-width: 1px;
  border-style: solid;
  /*
  @include button-shadow;
  */
  box-shadow: rgba(0, 0, 0, 0.05) 1px 2px 10px 1px;
}

.bbTag, .businessCaseBBTagClosed, .businessCaseBBTagRejected, .businessCaseBBTagApproved, .businessCaseBBTagProposal, .businessCaseBBTagDraft, .bbTagTimesheet, .timesheetBBTagSubmitted, .timesheetBBTagNotSubmitted, .timesheetBBTagMissing, .timesheetBBTagRejected, .timesheetBBTagApproved, .actionItemBBTag, .bbTagGeneric {
  padding: 5px 17px 4px 15px;
}

.cellTag, .projectCompletionTagLate, .projectCompletionTag, .documentTag, .businessCaseTagClosed, .businessCaseTagRejected, .businessCaseTagApproved, .businessCaseTagProposal, .businessCaseTagDraft, .timesheetEntryTagPTO, .timesheetEntryTagNPA, .timesheetEntryTagTask, .timesheetTagSubmitted, .timesheetTagNotSubmitted, .timesheetTagMissing, .timesheetTagRejected, .timesheetTagApproved, .workflowTagCompleted, .workflowTagSuspended, .workflowTagTerminated, .workflowTagInProgressWaiting, .workflowTagInProgress, .workflowTagNotStarted, .workflowDefinitionTagPublished, .workflowDefinitionTagNotPublished, .actionItemTag {
  padding: 5px 17px 4px 15px;
}

.tagSubtext {
  font-weight: bold;
  font-size: 9px;
}

.bbTagGeneric {
  --tagColor: #999999;
  --borderOpacity: 50%;
  --backgroundOpacity: 20%;
}

.bbTagStrong {
  display: inline-block;
  text-transform: uppercase;
  font-size: 11px;
  /*
  font-size: $tasktwo-font-size-regular;
  */
  border-radius: 15px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  padding: 6px 15px 5px 15px;
  color: white;
  background: linear-gradient(to bottom right, rgb(1.2522432702%, 41.6370887338%, 54.1595214357%), #0485AD);
  /*
  $background-color-tasktwo-blue: #0485AD;
  $background-color-tasktwo-light-blue: #05a7d9;
  $background-color-tasktwo-teal
  $color-tasktwo-menu	
  */
}

.bbTagBlue {
  /*
   background-image: linear-gradient(to bottom right, #0485AD, #0598c6)
  */
  background-image: linear-gradient(to right bottom, #21759B, #5998b4);
}

.bbGridCellBox .bbTag, .bbGridCellBox .businessCaseBBTagClosed, .bbGridCellBox .businessCaseBBTagRejected, .bbGridCellBox .businessCaseBBTagApproved, .bbGridCellBox .businessCaseBBTagProposal, .bbGridCellBox .businessCaseBBTagDraft, .bbGridCellBox .bbTagTimesheet, .bbGridCellBox .timesheetBBTagSubmitted, .bbGridCellBox .timesheetBBTagNotSubmitted, .bbGridCellBox .timesheetBBTagMissing, .bbGridCellBox .timesheetBBTagRejected, .bbGridCellBox .timesheetBBTagApproved, .bbGridCellBox .actionItemBBTag, .bbGridCellBox .bbTagGeneric {
  letter-spacing: 0.01em;
  transition-property: letter-spacing;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
  line-height: 1.5;
}

.bbGridCellBox:hover .bbTag, .bbGridCellBox:hover .businessCaseBBTagClosed, .bbGridCellBox:hover .businessCaseBBTagRejected, .bbGridCellBox:hover .businessCaseBBTagApproved, .bbGridCellBox:hover .businessCaseBBTagProposal, .bbGridCellBox:hover .businessCaseBBTagDraft, .bbGridCellBox:hover .bbTagTimesheet, .bbGridCellBox:hover .timesheetBBTagSubmitted, .bbGridCellBox:hover .timesheetBBTagNotSubmitted, .bbGridCellBox:hover .timesheetBBTagMissing, .bbGridCellBox:hover .timesheetBBTagRejected, .bbGridCellBox:hover .timesheetBBTagApproved, .bbGridCellBox:hover .actionItemBBTag, .bbGridCellBox:hover .bbTagGeneric {
  /*
  @include extra-spacing;
  */
}

.editableActionItemTag {
  cursor: pointer;
  filter: brightness(98%);
}

.actionItemTag {
  --borderOpacity: 50%;
  --backgroundOpacity: 20%;
}

.actionItemBBTag {
  --borderOpacity: 50%;
  --backgroundOpacity: 20%;
}

/* TODO: review use with tags  - bbTag - delete these */
.bbTagActionItem {
  display: inline-grid;
  grid-template-columns: auto auto;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  /*
  @include button-shadow;
  */
  box-shadow: rgba(0, 0, 0, 0.05) 1px 2px 10px 1px;
  /*
   background-image: linear-gradient(to bottom right, #999999, #b3b3b3);
   font-size: $tasktwo-font-size-regular;
  */
  font-size: 11px;
  border-radius: 45px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  padding: 7px 20px 5px 15px;
  color: white;
  background-color: rgba(0, 0, 0, 0);
  background-size: auto;
  background-origin: padding-box;
  background-clip: border-box;
}

.workflowDefinitionTagNotPublished {
  --tagColor: #999999;
  --borderOpacity: 50%;
  --backgroundOpacity: 20%;
}

.workflowDefinitionTagPublished {
  --tagColor: #21759B;
  --borderOpacity: 50%;
  --backgroundOpacity: 20%;
}

.workflowTagNotStarted {
  --tagColor: #cccccc;
  --borderOpacity: 50%;
  --backgroundOpacity: 20%;
}

.workflowTagInProgress {
  --tagColor: #999999;
  --borderOpacity: 50%;
  --backgroundOpacity: 20%;
}

.workflowTagInProgressWaiting {
  --tagColor: #cccccc;
  --borderOpacity: 50%;
  --backgroundOpacity: 20%;
}

.workflowTagTerminated {
  --tagColor: rgb(213, 78, 33);
  --borderOpacity: 50%;
  --backgroundOpacity: 20%;
}

.workflowTagSuspended {
  --tagColor: #e89002;
  --borderOpacity: 50%;
  --backgroundOpacity: 20%;
}

.workflowTagCompleted {
  --tagColor: #20872A;
  --borderOpacity: 50%;
  --backgroundOpacity: 20%;
}

.bbTagWorkflow {
  display: inline-grid;
  grid-template-columns: auto auto;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.02em;
  border-radius: 45px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  box-shadow: rgba(0, 0, 0, 0.05) 1px 2px 10px 1px;
  line-height: 1.3;
  overflow: clip;
  padding: 7px 20px 5px 15px;
  text-align: left;
  color: white;
  background-image: linear-gradient(to bottom right, #a6a6a6, #c0c0c0);
  background-color: rgba(0, 0, 0, 0);
  background-size: auto;
  background-origin: padding-box;
  background-clip: border-box;
}

.timesheetTagApproved {
  --tagColor: #20872A;
  --borderOpacity: 50%;
  --backgroundOpacity: 20%;
}

.timesheetTagRejected {
  --tagColor: rgb(213, 78, 33);
  --borderOpacity: 50%;
  --backgroundOpacity: 20%;
}

.timesheetTagMissing {
  --tagColor: rgb(213, 78, 33);
  --borderOpacity: 50%;
  --backgroundOpacity: 20%;
}

.timesheetTagNotSubmitted {
  --tagColor: #999999;
  --borderOpacity: 50%;
  --backgroundOpacity: 20%;
}

.timesheetTagSubmitted {
  --tagColor: #e89002;
  --borderOpacity: 50%;
  --backgroundOpacity: 20%;
}

.timesheetBBTagApproved {
  --tagColor: #20872A;
  --borderOpacity: 50%;
  --backgroundOpacity: 20%;
}

.timesheetBBTagRejected {
  --tagColor: rgb(213, 78, 33);
  --borderOpacity: 50%;
  --backgroundOpacity: 20%;
}

.timesheetBBTagMissing {
  --tagColor: rgb(213, 78, 33);
  --borderOpacity: 50%;
  --backgroundOpacity: 20%;
}

.timesheetBBTagNotSubmitted {
  --tagColor: #999999;
  --borderOpacity: 50%;
  --backgroundOpacity: 20%;
}

.timesheetBBTagSubmitted {
  --tagColor: #e89002;
  --borderOpacity: 50%;
  --backgroundOpacity: 20%;
}

.timesheetEntryTagTask {
  --progressPercentage: 0%;
  --progressColor: #21759B;
  --progressOpacity: 40%;
  --bgColor: color-mix(in srgb, var(--tagColor) var(--backgroundOpacity), transparent);
  --progressBgColor: color-mix(in srgb, var(--progressColor) var(--progressOpacity), transparent);
  --tagColor: #999999;
  --borderOpacity: 50%;
  --backgroundOpacity: 20%;
  background: linear-gradient(90deg, var(--progressBgColor) var(--progressPercentage), var(--bgColor) var(--progressPercentage));
  background-size: 100% 100%;
  background-origin: border-box;
  background-clip: border-box;
  background-repeat: no-repeat;
}

.timesheetEntryTagNPA {
  --tagColor: #7E8A56;
  --borderOpacity: 50%;
  --backgroundOpacity: 20%;
}

.timesheetEntryTagPTO {
  --tagColor: #CCA22F;
  --borderOpacity: 50%;
  --backgroundOpacity: 20%;
}

.bbTagTimesheetR {
  font-size: 11px;
  text-align: right;
  padding: 7px 15px 5px 12px;
}

.percentageBarTimesheet {
  background: transparent url(../image/completion-bg7.png) no-repeat scroll;
  background-position-y: 0px;
  background-size: 200% 100%;
}

.bbTagAssignmentBase, .roundTagAssignment {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  /*
   background-image: linear-gradient(to bottom right, #999999, #b3b3b3);
   font-size: $tasktwo-font-size-regular;
   padding: 7px 20px 5px 15px;
   */
  border-radius: 45px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  color: white;
  background-color: rgba(0, 0, 0, 0);
  background-size: auto;
  background-origin: padding-box;
  background-clip: border-box;
  overflow: clip;
  white-space: nowrap;
}

.roundTagAssignment {
  --diameter: 35px;
  width: var(--diameter);
  height: var(--diameter);
  text-align: center;
  cursor: help;
  font-size: 10px;
  opacity: 65%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.percentageBarAssignment {
  background: transparent url(../image/completion-bg7.png) no-repeat scroll;
  background-position-y: 0px;
  background-size: 200% 100%;
}

.percentageBarAssignmentLate {
  background: transparent url(../image/completion-late-bg7.png) no-repeat scroll;
  background-position-y: 0px;
  background-size: 200% 100%;
}

.businessCaseTagDraft {
  --tagColor: #999999;
  --borderOpacity: 50%;
  --backgroundOpacity: 20%;
}

.businessCaseTagProposal {
  --tagColor: #e89002;
  --borderOpacity: 50%;
  --backgroundOpacity: 20%;
}

.businessCaseTagApproved {
  --tagColor: #21759B;
  --borderOpacity: 50%;
  --backgroundOpacity: 20%;
}

.businessCaseTagRejected {
  --tagColor: rgb(213, 78, 33);
  --borderOpacity: 50%;
  --backgroundOpacity: 20%;
}

.businessCaseTagClosed {
  --tagColor: #20872A;
  --borderOpacity: 50%;
  --backgroundOpacity: 20%;
}

.businessCaseBBTagDraft {
  --tagColor: #999999;
  --borderOpacity: 50%;
  --backgroundOpacity: 20%;
}

.businessCaseBBTagProposal {
  --tagColor: #e89002;
  --borderOpacity: 50%;
  --backgroundOpacity: 20%;
}

.businessCaseBBTagApproved {
  --tagColor: #21759B;
  --borderOpacity: 50%;
  --backgroundOpacity: 20%;
}

.businessCaseBBTagRejected {
  --tagColor: rgb(213, 78, 33);
  --borderOpacity: 50%;
  --backgroundOpacity: 20%;
}

.businessCaseBBTagClosed {
  --tagColor: #20872A;
  --borderOpacity: 50%;
  --backgroundOpacity: 20%;
}

.documentTag {
  --tagColor: #999999;
  --borderOpacity: 50%;
  --backgroundOpacity: 20%;
}

.mr10px {
  margin-right: 10px;
}

.icon-tasktwo-logo {
  font-family: "ttlogo" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  /*
  text-transform: none;
  */
  line-height: 1;
  /*
  	@include font-smoothing;
  	*/
}

.icon-tasktwo-logo .path1:before {
  content: "\e900";
  /*
  color: rgb(51, 51, 51);
  */
}

.icon-tasktwo-logo .path2:before {
  content: "\e901";
  margin-left: -1em;
  /*
  color: rgb(0, 122, 161);
  */
}

.icon-tasktwo-logo .path3:before {
  content: "\e902";
  margin-left: -1em;
  /*
  color: rgb(0, 122, 161);
  */
}

.spinning {
  animation: rotation 2s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
.pictureFullWidth {
  max-width: 100%;
  max-height: 100%;
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
  object-fit: cover;
}

div.contentAndIcon, div.contentAndIconTop {
  display: grid; /* inline-grid; */
  align-items: center;
  grid-template-columns: 1fr auto;
  line-height: 1.3;
}

div.contentAndIcon .content, div.contentAndIconTop .content {
  padding-right: 15px;
}

div.contentAndIcon .icon, div.contentAndIconTop .icon {
  text-align: right;
}

div.contentAndIconTop {
  align-items: start;
}

div.iconAndContent, div.iconAndContentTop, div.iconAndContentCentered {
  display: inline-grid;
  align-items: center;
  grid-template-columns: auto 1fr;
  line-height: 1.3;
}

div.iconAndContent .icon, div.iconAndContentTop .icon, div.iconAndContentCentered .icon {
  padding-right: 15px;
}

div.iconAndContentCentered {
  align-items: center;
}

div.iconAndContentTop {
  align-items: start;
}

div.userIconXS, div.userIconXSLeft {
  box-shadow: rgba(0, 0, 0, 0.1) 1px 2px 10px 1px;
  color: white;
  background: linear-gradient(to bottom right, rgb(33%, 33%, 33%), #666666);
  display: inline-block;
  border-radius: 50%;
  /*
  -webkit-border-radius: $propertyValue;
  */
  vertical-align: middle;
  --radius: 32px;
  width: var(--radius);
  height: var(--radius);
  padding: 0px;
  border: solid 1px #cccccc;
  overflow: hidden;
}

div.userIconXS:hover, div.userIconXSLeft:hover {
  box-shadow: rgba(0, 0, 0, 0.15) 1px 2px 10px 1px;
}

div.userIconXSLeft {
  margin-right: 15px;
}

div.userIconSLeft {
  box-shadow: rgba(0, 0, 0, 0.1) 1px 2px 10px 1px;
  border-radius: 50%;
  /*
  -webkit-border-radius: $propertyValue;
  */
  color: white;
  background: linear-gradient(to bottom right, rgb(33%, 33%, 33%), #666666);
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  width: 45px;
  height: 45px;
  padding: 0px;
  border: solid 2px #cccccc;
  overflow: hidden;
}

/*
div.userIconSLeft:hover, div.userIconSLeft:active    
{
	z-index: +1;
}
*/
div.userIconSmallLeft {
  box-shadow: rgba(0, 0, 0, 0.05) 1px 2px 10px 1px;
  border-radius: 50%;
  /*
  -webkit-border-radius: $propertyValue;
  */
  color: white;
  background: linear-gradient(to bottom right, rgb(33%, 33%, 33%), #666666);
  display: inline-block;
  font-size: 16px;
  vertical-align: top;
  width: 2.6em;
  height: 2.6em;
  line-height: 2.6em;
  margin-right: 1em;
  padding: 0px;
  border: solid 2px #cccccc;
  overflow: hidden;
}

div.userIconSmallLeft:hover {
  box-shadow: rgba(0, 0, 0, 0.1) 1px 2px 10px 1px;
}

/*
div.userIconSmallLeft:hover, div.userIconSmallLeft:active    
{
	z-index: +1;
}
*/
div.userIconSmallLeftMiddle {
  box-shadow: rgba(0, 0, 0, 0.1) 1px 2px 10px 1px;
  border-radius: 50%;
  /*
  -webkit-border-radius: $propertyValue;
  */
  color: white;
  background: linear-gradient(to bottom right, rgb(33%, 33%, 33%), #666666);
  display: inline-block;
  font-size: 16px;
  vertical-align: middle;
  width: 2.6em;
  height: 2.6em;
  line-height: 2.6em;
  margin-right: 1em;
  padding: 0px;
  border: solid 2px #cccccc;
  overflow: hidden;
}

div.userIconSmallLeftMiddle:hover {
  box-shadow: rgba(0, 0, 0, 0.15) 1px 2px 10px 1px;
}

/*
div.userIconSmallLeftMiddle:hover, div.userIconSmallLeftMiddle:active
{
	z-index: +1;
}
*/
div.userIconSmallRight {
  box-shadow: rgba(0, 0, 0, 0.1) 1px 2px 10px 1px;
  border-radius: 50%;
  /*
  -webkit-border-radius: $propertyValue;
  */
  color: white;
  background: linear-gradient(to bottom right, rgb(33%, 33%, 33%), #666666);
  display: inline-block;
  font-size: 16px;
  vertical-align: top;
  width: 2.6em;
  height: 2.6em;
  line-height: 2.6em;
  margin-left: 1em;
  padding: 0px;
  border: solid 2px #cccccc;
  overflow: hidden;
}

div.userIconSmallRight:hover {
  box-shadow: rgba(0, 0, 0, 0.15) 1px 2px 10px 1px;
}

/*
div.userIconSmallRight:hover, div.userIconSmallRight:active
{
	z-index: +1;
}
*/
.documentTypeIcon {
  /*
  float : left;
  */
  font-size: 24px;
  padding-right: 10px;
  color: #cccccc;
}

.bb_documentTypeIcon {
  font-size: 24px;
  /* float : right; */
  /* padding-right: 15px; */
  padding-left: 10px;
  color: #cccccc;
}

.clickableDocumentTypeIcon {
  cursor: pointer;
}

.clickableDocumentTypeIcon:hover {
  color: #d54e21;
}

.bbHeaderIcon {
  margin: 0px 8px 0px 0px;
  /*
     vertical-align: baseline;
     */
}

.dialogKBIcon {
  cursor: pointer;
  color: #cccccc;
  font-size: 22px;
  padding-top: 3px;
  float: right;
}

.dialogKBIcon:hover {
  color: #d54e21;
  /*
  color: $color-darkTitle;
  */
}

.pageFooterKBIcon {
  cursor: pointer;
  color: #cccccc;
  font-size: 16px;
  padding-right: 10px;
  float: right;
}

.pageFooterKBIcon:hover {
  color: #d54e21;
  /*
  color: $color-darkTitle;
  */
}

.dialogHeader .dialogTitleKBIcon {
  cursor: pointer;
  color: #a6a6a6;
  padding-left: 10px;
  display: none;
}

.dialogHeader .dialogTitle i.formFieldHelpIcon {
  display: none;
}

.dialogHeader:hover .dialogTitleKBIcon {
  display: inline-block;
  /*
  display: initial;
  color: $color-darkTitle;
  */
}

.dialogHeader:hover .dialogTitleKBIcon:hover {
  color: #d54e21;
  /*
  display: initial;
  color: $color-darkTitle;
  */
}

.supportingDocumentIcon, .noSupportingDocIcon, .supportingDocIcon:hover, .supportingDocIcon {
  float: left;
  padding-top: 8px;
  cursor: pointer;
}

.supportingDocIcon {
  color: #21759b;
}

.supportingDocIcon:hover {
  color: #d54e21;
}

.noSupportingDocIcon {
  color: #cccccc;
}

i.hoverOnlyIcon {
  display: none;
}

.ef:hover i.hoverOnlyIcon {
  display: inline-block !important;
}

td.hCellContent:hover i.hoverOnlyIcon {
  display: inline-block !important;
}

.leftIconText {
  position: relative;
  padding-left: 1.75em;
}

.leftIconText i {
  position: absolute;
  font-size: 1.2em;
  left: 0;
  top: 0;
}

/* default highlight color indicator */
.dhci {
  float: right;
  padding: var(--paddingTop) 5px 0px 10px;
  opacity: 25%;
}

.bbIconVPath {
  position: relative;
}

div.bbIconVPath::after {
  content: "";
  position: absolute;
  top: 18px;
  left: 5px;
  bottom: 0;
  width: 2px;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0px, rgba(0, 0, 0, 0.2) 2px, transparent 2px, transparent 5px);
}

i.docListIcon {
  opacity: 50%;
  font-size: 1.1em;
  margin-right: 8px;
}

a:hover i.docListIcon {
  opacity: 100%;
}

/* TODO: retire. use iconAndContent */
div.userIconAndName {
  display: inline-grid;
  align-items: center;
  grid-template-columns: auto auto;
}

.pulseIconWhite {
  /*
     transform: scale(1);
     */
}

#pageHeaderRow:hover .pulseIconWhite {
  animation-timing-function: ease-out;
  animation: pulseFramesWhite 1s 1;
}

@keyframes pulseFramesWhite {
  0% {
    transform: scale(1);
    box-shadow: 0 0 8px 10px rgba(255, 255, 255, 0);
  }
  10% {
    transform: scale(1);
    box-shadow: 0 0 8px 10px rgba(255, 255, 255, 0.15);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 8px 10px rgba(255, 255, 255, 0);
  }
}
.pulseIconBlack {
  /*
     transform: scale(1);
     */
}

.gridToolbarFrame:hover .pulseIconBlack,
.toolbarFrame:hover .pulseIconBlack {
  animation-timing-function: ease-out;
  animation: pulseFramesBlack 0.5s 1;
}

@keyframes pulseFramesBlack {
  0% {
    transform: scale(1);
    box-shadow: 0 0 6px 8px rgba(0, 0, 0, 0);
  }
  10% {
    transform: scale(1);
    box-shadow: 0 0 6px 8px rgba(0, 0, 0, 0.1);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 6px 8px rgba(0, 0, 0, 0);
  }
}
.correspondingCell {
  /*
  background-color: #fff4de !important; // rgb(242,161,0)
  */
  /*
  background-color: #FFF4DE;
  opacity: 0.8;
  background-image:  repeating-radial-gradient( circle at 0 0, transparent 0, #FFF4DE 10px ), repeating-linear-gradient( #FFF4DE55, #FFF4DE );
  */
  /*
     background-image: radial-gradient(#999999 0.5px, transparent 0.5px);
  background-color: rgba(255, 244, 222, 0.65) !important; /  * #FFF4DE40 *   /
  background-color: #FFF4DE !important;
     */
  background-color: rgba(255, 244, 222, 0.45) !important; /* #FFF4DE40 */
}

.hoverEffectParent .hoverDisplay {
  display: none;
}

.hoverEffectParent:hover .hoverDisplay {
  display: revert;
}

.hoverEffectParent .hoverHighlightGray {
  transition: color 0.5s ease-out;
}

.hoverEffectParent:hover .hoverHighlightGray {
  color: #999999 !important;
}

.hoverEffectParent .hoverOpacity {
  transition: opacity 0.5s ease-out;
}

.hoverEffectParent:hover .hoverOpacity {
  opacity: 100% !important;
}

.ddBtn {
  float: right;
  margin: 5px 5px 5px 15px;
}

.button {
  letter-spacing: 0.02em;
  display: inline-block;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  margin: 0px;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  border-radius: 5px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /*
  transition-property: font-size, color, background-color, background;
  */
  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
  /*
  @include font-smoothing;
  */
}

.button:active {
  position: relative;
  top: 1px;
}

.buttonContainer, .flexButtonContainer {
  padding: 0px;
  border: none;
  background: transparent;
  overflow: hidden;
}

.flexButtonContainer {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}

.redButton {
  box-shadow: rgba(0, 0, 0, 0.1) 1px 2px 10px 1px;
  color: #ffffff;
  /* text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.35); */
  /*
  background-color: #d73600;
  background-color: $background-color-red-button;
  border : none;
  background: linear-gradient(to bottom right, $background-color-red-button, lighten($background-color-red-button, $gradient-color-deviation));
  border-color:  darken($background-color-red-button, $button-color-deviation);

  background: $background-color-red-button;
  border-width : 1px;
  border-style: solid;
  border-color:  $background-color-red-button;
  */
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  background: linear-gradient(to bottom right, #d73600, rgb(98.3137254902%, 24.692749658%, 0%)) !important; /* keep !important for redButton */
}

.redButton:hover {
  box-shadow: rgba(0, 0, 0, 0.15) 1px 2px 10px 1px;
  /*
  	background-color: #cc3300; 
  background-color: #ea3c00;
  color: darken($background-color-red-button, $gradient-color-deviation) !important;	
  background: linear-gradient(to bottom right, darken($background-color-red-button, $gradient-color-deviation), $background-color-red-button) !important;
  background-color: darken($background-color-red-button, $button-color-deviation) !important;	
  */
  background: linear-gradient(to bottom right, rgb(70.3137254902%, 17.6601915185%, 0%), #d73600) !important; /* keep !important for redButton */
}

.lightBlueButton {
  box-shadow: rgba(0, 0, 0, 0.05) 1px 2px 10px 1px;
  color: #FFFFFF;
  /*
  border : none;
  background: linear-gradient(to bottom right, $background-color-light-blue-button, lighten($background-color-light-blue-button, $gradient-color-deviation));
  background: $background-color-light-blue-button;

  border-width : 1px;
  border-style: solid;
  border-color:  $background-color-light-blue-button;
  */
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  background: linear-gradient(to bottom right, #05a7d9, rgb(3.2872284049%, 75.4875463699%, 97.7715951245%));
}

.lightBlueButton:hover {
  box-shadow: rgba(0, 0, 0, 0.1) 1px 2px 10px 1px;
  /*
  background: linear-gradient(to bottom right, darken($background-color-light-blue-button, $gradient-color-deviation), $background-color-light-blue-button);
  background: darken($background-color-light-blue-button, $button-color-deviation);
  */
  background: linear-gradient(to bottom right, rgb(1.6454689984%, 54.9586645469%, 71.413354531%), #05a7d9);
}

.blueButton {
  box-shadow: rgba(0, 0, 0, 0.05) 1px 2px 10px 1px;
  color: #FFFFFF;
  /*

  border : 1px solid $background-color-blue-button;
  border : none;
  background: linear-gradient(to bottom right, $background-color-blue-button, lighten($background-color-blue-button, $gradient-color-deviation));
  border : 1px solid $background-color-blue-button;	
  border : 1px solid darken($background-color-blue-button, $button-color-deviation);	
  border-width : 0px 0px 1px 0px;
  border-color:  lighten($background-color-blue-button, $button-color-deviation);

  border-width : 1px;
  border-style: solid;
  border-color:  $background-color-blue-button;	
  */
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  background: linear-gradient(to bottom right, #21759B, rgb(15.3986232791%, 54.5951188986%, 72.326866917%));
}

.blueButton:hover {
  box-shadow: rgba(0, 0, 0, 0.1) 1px 2px 10px 1px;
  /*
  background-color: #21759B;
  background-color: darken($background-color-blue-button, $gradient-color-deviation);
  background: linear-gradient(to bottom right, darken($background-color-blue-button, $gradient-color-deviation), $background-color-blue-button);
  background-color: darken($background-color-blue-button, $button-color-deviation);
  */
  background: linear-gradient(to bottom right, rgb(10.4837296621%, 37.1695869837%, 49.241760534%), #21759B);
}

.whiteButton {
  box-shadow: rgba(0, 0, 0, 0.05) 1px 2px 10px 1px;
  color: #000000;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  background-color: #ffffff;
}

.whiteButton:hover {
  box-shadow: rgba(0, 0, 0, 0.1) 1px 2px 10px 1px;
  /*
  background-color: darken($background-color-white-button, $gradient-color-deviation);
  */
  background-color: #eff5f7;
}

.whiteButtonNB {
  box-shadow: rgba(0, 0, 0, 0.05) 1px 2px 10px 1px;
  color: #000000;
  border: none;
  background-color: #ffffff;
}

.whiteButtonNB:hover {
  box-shadow: rgba(0, 0, 0, 0.1) 1px 2px 10px 1px;
  background-color: #eff5f7;
}

.greyButton {
  box-shadow: rgba(0, 0, 0, 0.05) 1px 2px 10px 1px;
  /*
  border: none;
  background: $background-grey-button;
  */
  color: #000000;
  border: 1px solid #cccccc;
  background: #dedede;
}

.greyButton:hover {
  box-shadow: rgba(0, 0, 0, 0.1) 1px 2px 10px 1px;
  background-color: rgb(80.0588235294%, 80.0588235294%, 80.0588235294%);
}

.transparentButton {
  color: white;
  border: white 1px solid;
  background-color: transparent;
  padding: 5px 19px !important;
}

.orangeButton {
  box-shadow: rgba(0, 0, 0, 0.05) 1px 2px 10px 1px;
  color: #000000;
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  background: linear-gradient(to bottom right, #fdc047 0%, #fdb23a 100%);
}

.orangeButton:hover {
  box-shadow: rgba(0, 0, 0, 0.1) 1px 2px 10px 1px;
  background: linear-gradient(to bottom right, rgb(99.0651486401%, 70.5521821632%, 13.9936748893%), rgb(99.0749827569%, 64.3868361415%, 8.8858015568%));
}

.largeButton {
  font-size: 13px;
  padding: 6px 20px 6px 20px;
  min-width: 80px;
  /*
  font-size: $tasktwo-font-size-larger;
  padding: 4px 24px;	
  */
}

.smallButton {
  font-size: 13px;
  padding: 5px 15px;
  min-width: 70px;
}

.smallGridButton {
  font-size: 13px;
  padding: 4px 20px;
  min-width: 70px;
}

.loginButton {
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
}

#explodedContentDialogDiv .explodeButton {
  display: none;
}

a.menuButtonMarker .under {
  text-decoration: none;
  font-weight: bold;
}

a.menuButtonMarker .counterBox {
  text-decoration: none;
  font-weight: normal;
}

.counterBox {
  border-radius: 15px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  /*
  background: #a3bac5;
  */
  background: #298cb9;
  color: white;
  margin: 0px 3px 0px 5px;
  text-align: center;
  text-decoration: none;
  font-weight: normal;
  display: inline-block;
  position: relative;
  top: -5px;
  left: 0px;
  padding: 2px 5px 2px 5px;
  font-size: 10px;
  /*	
      top: -15px;
      left: -10px;  
      padding: 2px 6px 2px 6px;
      font-size: $tasktwo-font-size-regular;
  */
  font-weight: normal;
  font-style: normal;
}

.homePageInlineCounterBox {
  /*
  position: relative;
  bottom:3px;

  vertical-align: sup;
  @include border-radius(25px);
  @include border-radius(50%);
  background: rgba(255, 255, 255, 0.8);
  font-size : $tasktwo-font-size-larger;
  */
  display: inline-block;
  white-space: nowrap;
  text-align: center;
  border-radius: 100px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  background: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-size: 13px;
  padding: 2px 7px 2px 7px;
  min-width: 25px;
  color: rgb(0, 0, 0);
}

.homePageInlineCounterBoxWarn {
  color: rgba(255, 255, 255, 0.9);
  background-color: rgba(213, 78, 33, 0.9);
}

.dashboardText {
  color: #000000;
  font-size: 13px;
  font-weight: normal;
  line-height: 1.3;
}

.dashboardLinkLight {
  color: #999999;
  font-size: 11px;
  font-weight: normal;
  text-decoration: underline;
  font-style: normal;
}

.dashboardLinkLight:hover {
  color: #d54e21;
  text-decoration: underline;
}

/*
.bbl0
{
  stroke-width: 1px;
  stroke: #111111;
}

.bbl1
{
  stroke-width: 1px;
  stroke-dasharray: 1

}

.bbl2
{	
  stroke-width: 2px;
  stroke-dasharray: 5
}
*/
.dashboardLinkUrgent {
  color: #d54e21;
  font-size: 13px;
  font-weight: bold;
  text-decoration: underline;
}

.dashboardNote {
  font-weight: normal;
  font-style: italic;
  color: #999999;
  font-size: 11px;
}

a.dashboardNote:hover {
  color: #EA3C00;
  text-decoration: underline;
}

.dashboardWidget {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  text-align: left;
  border: none;
  margin: 0px 0px 30px 0px;
}

.dashboardWidgetContainer {
  background-color: #ffffff;
  border: solid 1px rgba(0, 0, 0, 0.17);
  border-radius: 3px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  overflow: auto;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  scroll-snap-align: start;
}

.xWidgetContainer {
  display: grid;
  place-items: start;
  grid-template-areas: "xWidgetContent";
}

.widgetTitleControlIcon {
  z-index: 5;
  grid-area: xWidgetContent;
  display: inline-block;
  color: rgba(0, 0, 0, 0.2);
  padding: 10px 5px 5px 5px;
  border-radius: 5px;
  /*
  z-index:3;display:inline-block;position:sticky;grid-area: xWidgetContent;top:0px;left:0px;
  position:sticky;
  top:0px;
  left:0px;
  */
}

.widgetTitleControlIcon i {
  cursor: pointer;
}

.widgetTitleControlIcon i:hover {
  color: #a6a6a6;
}

.widgetTitleCloseIndicatorBar {
  background-color: rgba(0, 0, 0, 0.2);
  height: 1px;
  width: 0px; /* initial width zero*/
  /*
  margin-top:15px;
  */
  border-radius: 3px;
  overflow: hidden;
  grid-area: xWidgetContent;
  z-index: 3;
}

.dashboardWidgetContent {
  background-color: #ffffff;
  margin: 0px;
  padding: 0px;
  border: none;
  /* TODO: test */
  overflow: auto;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.xWidgetContent {
  grid-area: xWidgetContent;
  width: 100%;
}

.widgetTitleBar {
  width: 100%;
  padding: 3px 7px;
  vertical-align: middle;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  -webkit-border-top-left-radius: 3px;
  -webkit-border-top-right-radius: 3px;
  -webkit-border-bottom-left-radius: 0px;
  -webkit-border-bottom-right-radius: 0px;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  background: #d4d4d4;
  flex: 0 0 auto;
}

.xWidgetTitleBar {
  width: 100%;
  padding: 3px 7px;
  vertical-align: middle;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  -webkit-border-top-left-radius: 3px;
  -webkit-border-top-right-radius: 3px;
  -webkit-border-bottom-left-radius: 0px;
  -webkit-border-bottom-right-radius: 0px;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  background: #d4d4d4;
  flex: 0 0 auto;
  opacity: 100%;
  display: none;
}

.xWidgetContainer:hover .xWidgetTitleBar {
  /*
  opacity: 50%;
  opacity: 100%;
  */
  opacity: 100%;
}

.xWidgetContainer:hover .xWidgetTitleBar:hover {
  opacity: 100% !important;
}

.xWidgetContainer .xWidgetTitleBar .widgetTitleCloseIcon {
  display: none;
}

.xWidgetContainer:hover .xWidgetTitleBar:hover .widgetTitleCloseIcon {
  display: inline;
}

.widgetTitleBar {
  container-name: widgetTitleBar;
  container-type: inline-size;
}

@container widgetTitleBar (max-width: 300px) {
  .dynamicWidgetControlsDisplay {
    display: none;
  }
}
.widgetPanelBase, .widgetGridPanel, .widgetChartPanel, .widgetTextPanel, .widgetCustomPanel, .widgetErrorPanel {
  flex: 1 1 auto;
  height: 100%;
}

.widgetErrorPanel {
  padding: 15px;
  background-color: rgb(227, 227, 227);
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  text-align: center;
}

.widgetCustomPanel {
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.widgetTextPanel {
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.widgetChartPanel {
  overflow: hidden;
  /*
  display: flex;
  flex-direction: column;		
  overflow: auto;
  */
}

.widgetGridPanel {
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.widgetChartPanel .hChart {
  height: 100%;
}

.widgetErrorPanelMessage {
  color: #d54e21;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

#explodedContentDialogDiv .xWidgetTitleBar {
  opacity: 100% !important;
}

.emptyDashboardPanel {
  text-align: center;
  border: none;
  /*
  border: solid 1px #cccccc;
  */
}

.emptyDashboardPanel i {
  transition-property: color, transform;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
}

.emptyDashboardPanel:hover i {
  transform: scale(1.03);
  color: #bbbbbb;
}

.dashboardLayoutPanelContainer {
  padding: 5px 15px 0px 15px;
  vertical-align: top;
  /*
  margin: 0px;
  padding: 0px;
  border: none;
  */
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  align-items: top;
  flex-wrap: wrap;
  flex-flow: row wrap;
  align-content: flex-start;
  overflow: hidden;
}

.dashboardLayoutPanelContainer .dashboardLayoutPanel {
  flex: 1 1 auto;
  /*
  border-width: 0px;
  margin: 0px;  
  */
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 100px;
  min-width: 10px;
  display: flex;
  flex-direction: column;
  scroll-snap-type: y mandatory;
}

.dashboardLayoutPanelContainer .dashboardLayoutPanel .dashboardWidgetContainer {
  margin-bottom: 15px;
  scroll-snap-align: start;
  min-height: 100%;
}

.dashboardLayoutPanelContainer .dashboardLayoutPanel .dashboardWidgetContainer:last-child {
  margin-bottom: 0px;
}

.dashboardTabsContainer {
  display: flex;
  flex-direction: column;
  overflow: auto;
  width: 100%;
  border-radius: 3px;
  height: 100%;
}

.portfolioReportTitle {
  letter-spacing: 0.01em;
  color: #121212;
  font-family: Inter, Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: bold;
  font-style: normal;
  text-overflow: ellipsis;
  overflow: hidden;
}

.emptyDashboardPanel {
  border-radius: 3px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  border: solid 1px #cccccc;
  background-color: #e3e3e3;
  vertical-align: middle;
  text-align: center;
}

.emptyDashboardPanel i {
  color: #cccccc;
  cursor: pointer;
}

.summaryScheduleSmall {
  font-style: italic;
  font-size: 11px;
  color: #999999;
  line-height: 11px;
}

.summaryScheduleFooterSmall {
  font-style: italic;
  font-size: 11px;
  color: #2f2f37;
  line-height: 11px;
}

.bulletinBoardContent {
  line-height: 140%;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.bulletinBoardTitle {
  letter-spacing: 0.01em;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-color: rgba(0, 0, 0, 0);
  background-position-x: 0%;
  background-position-y: 0%;
  background-repeat: repeat;
  background-attachment: fixed;
  background-size: auto;
  background-origin: padding-box;
  background-image: linear-gradient(to bottom right, #121212, #113b55);
  display: inline-block;
  user-select: text;
  /* line-height:16px; */
  padding: 7px 7px 7px 0px;
  font-size: 14px;
  font-weight: bold;
  font-style: normal;
}

.bulletinBoardEditor .dataFormFieldContent video,
.bulletinBoardEditor .dataFormFieldContent img,
.bulletinBoardEntryContent video,
.bulletinBoardEntryContent img {
  /*
  max-width: calc(100% - 20px);
  */
  max-width: min(600px, 100%);
  margin: 0.5em 0em 0.5em 0em;
  border: 1px solid #cccccc;
  overflow: hidden; /* clip? */
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
  display: block;
  border-radius: 3px;
  /*
  -webkit-border-radius: $propertyValue;
  */
}

.bulletinBoardEditor .dataFormFieldContent video,
.bulletinBoardEntryContent video {
  /*
  background: linear-gradient(to bottom right, rgba(18, 18, 18, 1), rgba(17, 59, 85, 1));
  */
  background: linear-gradient(to bottom right, #121212, #113b55);
  background-image: url("/static/image/tasktwo-video-poster-background.jpg") !important;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
  background-size: cover;
  cursor: pointer;
}

.bulletinBoardEditor .dataFormFieldContent img,
.bulletinBoardEntryContent img {
  background-color: #ededed;
}

.bulletinBoardEditor .dataFormFieldContent video:hover,
.bulletinBoardEditor .dataFormFieldContent img:hover,
.bulletinBoardEntryContent video:hover,
.bulletinBoardEntryContent img:hover {
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
}

.bulletinBoardEditor .dataFormFieldContent video[poster] .bulletinBoardEntryContent video[poster] {
  /*
  height:100%;
  width:100%;
  */
  object-fit: cover;
}

div.timesheetLaborBreakdownContainer,
div.timesheetEventContainer {
  display: flex;
  flex-direction: row;
  width: 100%;
}

div.timesheetLaborBreakdownContainer > div.left,
div.timesheetEventContainer > div.left {
  display: flex;
  justify-content: left;
  text-align: left;
  flex: 1 1 auto;
  padding-right: 15px;
}

div.timesheetLaborBreakdownContainer > div.center,
div.timesheetEventContainer > div.center {
  display: flex;
  justify-content: left;
  text-align: left;
  flex: 0 0 auto;
}

div.timesheetLaborBreakdownContainer > div.right,
div.timesheetEventContainer > div.right {
  display: flex;
  justify-content: right;
  text-align: right;
  flex: 1 1 auto;
  padding-left: 15px;
}

div.bbGridCellBox:hover div.timesheetLaborBreakdownContainer .gridCellFieldSubduedHov,
div.bbGridCellBox:hover div.timesheetEventContainer .gridCellFieldSubduedHov,
div.bbGridCellBox:hover div.bbHeaderText .gridCellFieldSubduedHov,
div.bb_highlightedReadonlyGridCell div.timesheetLaborBreakdownContainer .gridCellFieldSubduedHov,
div.bb_highlightedReadonlyGridCell div.timesheetEventContainer .gridCellFieldSubduedHov,
div.bb_highlightedReadonlyGridCell div.bbHeaderText .gridCellFieldSubduedHov,
div.gridBodyCell:hover .gridCellFieldSubduedHov {
  color: rgba(0, 0, 0, 0.4) !important; /* #999999; */
}

.timesheetEventsContainer {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.timesheetEventsContainer .left {
  text-align: left;
  flex: 1 1 auto;
  padding-right: 15px;
}

.timesheetEventsContainer .right {
  text-align: right;
  flex: 1 1 auto;
  padding-left: 15px;
}

i.bbTimesheetIcon {
  color: rgba(0, 0, 0, 0.4); /* #999999; */
  font-size: 16px;
}

i.timesheetIcon {
  padding-right: 8px;
  color: rgba(0, 0, 0, 0.2);
  font-size: 14px;
}

div.bb_gridBodyColumn .gridBodyCell:hover i.timesheetIcon {
  color: rgba(0, 0, 0, 0.4);
}

/*
div:not(.bb_gridBodyColumn).gridBodyColumn:hover .gridBodyCell i.timesheetIcon
{
	color: #00000066;
}
*/
div:not(.bb_gridBodyColumn).gridBodyColumn .gridBodyCell:hover i.timesheetIcon {
  color: rgba(0, 0, 0, 0.4);
}

div.timesheetLaborBreakdownContainer div.bbGridCellSplitContainer:hover {
  /*
  background-color: rgba(0, 0, 0, 4%) !important;
  */
}

#processActivityText {
  overflow: hidden;
  margin-bottom: 10px;
  /*
  padding: 15px;
  background-color: #dddedd;// #ededed;
  */
}

#processActivityText:empty {
  display: none;
}

#processDocumentsText {
  /*
  overflow: hidden;
     */
  margin-bottom: 15px;
  /*
  padding: 15px;
  background-color: #dddedd;// #ededed;
  */
}

#processDocumentsText:empty {
  display: none;
}

.workflowParticipantBox {
  padding-left: 10px;
  margin-bottom: calc(1.25em - var(--paddingBottom)) !important;
}

.workflowButtonBox {
  /*
  padding-bottom: 10px;
  */
  overflow: hidden;
}

.workflowButtonBox .button {
  margin-right: 20px;
}

.workflowButtonBox .button:last-of-type {
  margin-right: 0px;
}

.taskResourcesContainer {
  border-radius: 3px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  overflow: auto;
  max-height: 40%; /* 40vh; */
  padding: 0px;
  width: 100%;
  /*
  background-color: #dddedd;
  */
}

.projectCompletionTag {
  --progressColor: #21759B;
  justify-content: center;
  width: 70px;
  background: linear-gradient(90deg, var(--progressBgColor) var(--progressPercentage), var(--bgColor) var(--progressPercentage));
  background-size: 100% 100%;
  background-origin: border-box;
  background-clip: border-box;
  background-repeat: no-repeat;
  --progressPercentage: 0%;
  --tagColor: #666666;
  --borderOpacity: 20%;
  --backgroundOpacity: 15%;
  --progressOpacity: 25%;
  --bgColor: color-mix(in srgb, var(--tagColor) var(--backgroundOpacity), transparent);
  --progressBgColor: color-mix(in srgb, var(--progressColor) var(--progressOpacity), transparent);
}

.projectCompletionTagLate {
  --progressColor: #EA3C00;
  justify-content: center;
  width: 70px;
  background: linear-gradient(90deg, var(--progressBgColor) var(--progressPercentage), var(--bgColor) var(--progressPercentage));
  background-size: 100% 100%;
  background-origin: border-box;
  background-clip: border-box;
  background-repeat: no-repeat;
  --progressPercentage: 0%;
  --tagColor: #666666;
  --borderOpacity: 20%;
  --backgroundOpacity: 15%;
  --progressOpacity: 25%;
  --bgColor: color-mix(in srgb, var(--tagColor) var(--backgroundOpacity), transparent);
  --progressBgColor: color-mix(in srgb, var(--progressColor) var(--progressOpacity), transparent);
}

.projectTagBase {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-radius: 45px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  color: white;
  background-color: rgba(0, 0, 0, 0);
  background-size: auto;
  background-origin: padding-box;
  background-clip: border-box;
  line-height: 1.3;
  overflow: clip;
  white-space: nowrap;
}

.percentageBar, .percentageBarLate {
  border-radius: 3px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  display: inline-block;
  *display: inline; /*for IE */
  width: 80px;
  min-height: fit-content;
  margin: none;
  overflow: hidden;
  background: transparent url(../image/completion-bg7.png) no-repeat scroll;
  color: #ffffff;
  background-position-y: 0px;
  background-size: 200% auto;
}

.percentageBarLate {
  background-image: url(../image/completion-late-bg7.png);
}

.percentageBackground10 {
  background: transparent url(../image/completion-bg8.png) no-repeat scroll;
  /*
  background-position-x: 100%;
  */
  background-position-y: 10px;
  background-size: 200% auto;
  margin: -10px;
  padding: 0px;
  /* cover entire height of parent. parent must have position:relative */
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  overflow: hidden;
  background-clip: padding-box;
}

.assignmentContainer {
  line-height: 1.3;
}

/*
.assignmentContainer div.projectName
{
	font-weight: bold;
	@include extra-spacing;
	user-select: text;
}

.assignmentContainer div.taskName
{
	@include extra-spacing;
	font-size: $tasktwo-font-size-smaller;
	user-select: text;
	color:#999999;
	padding-top: 2px;
}

.assignmentContainer div.schedule
{
	color:#999999;
	font-size: $tasktwo-font-size-smaller;
	user-select: text;
}

.assignmentContainer div.allocation
{
	text-align: right;
	float: right;
	color:#999999;
	font-size: $tasktwo-font-size-smaller;
	user-select: text;
}
*/
div.toolbarFrame {
  overflow: hidden;
  padding: 5px 15px 1px 15px;
  border-style: solid;
  border-width: 0px 0px 1px 0px;
  border-color: #cccccc;
  /*
  background-color: #dddedd;
  */
  background-color: #d0d0d0;
  /*
  display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
     justify-content: space-between;
  */
}

div.toolbarFrame div.gridToolbarSingleLeft {
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
}

div.toolbarFrame div.gridToolbarSingleRight {
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
}

div.toolbarFrame div.gridToolbarLeft {
  text-align: left;
  white-space: nowrap;
}

div.toolbarFrame div.gridToolbarRight {
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
}

.toolbar {
  padding: 5px 15px 1px 15px;
  /*
  padding: 3px 7px;
  */
  border-color: rgba(0, 0, 0, 0.07);
  border-width: 1px;
  border-style: solid;
  border-width: 0px 0px 1px 0px;
  background-color: #d4d4d4; /*d9d9d9 */
  /*
  background-color: #d9d9d9;
  background: url("../image/menu-bar-gradient-bg.gif") repeat-x left top;
  background : transparent; 
  */
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* ensure it keeps size inside flex containers */
  flex: 0 0 auto;
}

.toolbarText {
  font-size: 12px;
}

/* not used */
.toolbarButton {
  vertical-align: middle;
  padding: 5px;
  color: #2f2f37;
  cursor: pointer;
}

.toolbarIcon {
  text-align: center;
  cursor: pointer;
  color: #121212;
  font-size: 16px;
  line-height: 20px;
  font-style: normal;
  width: 28px;
  padding: 5px;
  transition: font-size 0.1s linear;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /*
  @include font-smoothing;
  */
}

.toolbarIcon:hover {
  /*
  color:#d54e21;
  color:#000000;
  color: #21759B;
  */
  color: #D54E21;
}

.toolbarIconSmall {
  vertical-align: bottom;
  cursor: pointer;
  color: #121212;
  font-size: 15px;
  line-height: 18px;
  font-style: normal;
  width: 20px;
  transition: font-size 0.1s linear;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /*
  @include font-smoothing;
  */
}

.toolbarIconSmall:hover {
  font-size: 16px;
  line-height: 18px;
  color: #000000;
}

.toolbarIconDisabled {
  text-align: center;
  cursor: default;
  color: #999999;
  font-size: 16px;
  line-height: 20px;
  font-style: normal;
  width: 28px;
  padding: 5px;
  transition: font-size 0.1s linear;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /*
  @include font-smoothing;
  */
}

.toolbarIconInactive {
  text-align: center;
  cursor: pointer;
  color: #999999;
  font-size: 16px;
  line-height: 20px;
  font-style: normal;
  width: 28px;
  padding: 5px;
  transition: font-size 0.1s linear;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /*
  @include font-smoothing;
  */
}

.toolbarIconInactive:hover {
  font-size: 18px;
  line-height: 20px;
  color: #000000;
}

.progressBar {
  font-size: 11px;
  font-weight: normal;
  text-align: center;
  vertical-align: center;
  padding: 0px;
  width: 100%;
  height: 14px;
  border: none;
  overflow: hidden;
  border-radius: 14px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: #ffffff;
  /*
  border: solid 1px $color-gantt-task-bar;
  background: linear-gradient(to bottom right, $color-gantt-task-bar  0%, lighten($color-gantt-task-bar, 2 * $gradient-color-deviation) 100%);
  */
  background: rgba(0, 0, 0, 0.15);
  box-shadow: rgba(0, 0, 0, 0.05) 1px 2px 10px 1px;
}

.progressBarOverlay {
  color: #ffffff;
  font-size: 11px;
  font-weight: normal;
  text-align: center;
  vertical-align: center;
  position: relative;
  padding: 0px;
  top: -14px;
  margin-bottom: -14px;
  width: 100%;
  height: 14px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-radius: 14px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  overflow: hidden;
  /*
   	border: solid 1px $color-gantt-task-bar-completed;
  background: linear-gradient(to bottom right, $color-gantt-task-bar-completed  0%, lighten($color-gantt-task-bar-completed, 2 * $gradient-color-deviation) 100%);
  */
  background: #4383a6;
}

.bb_highlightedReadonlyGridCell .progressBar,
.bb_highlightedReadonlyGridCell .progressBarOverlay,
.highlightedReadonlyGridCell .progressBar,
.highlightedReadonlyGridCell .progressBarOverlay {
  filter: brightness(90%);
}

.kbEditor .dataFormFieldContent video,
.kbEditor .dataFormFieldContent img,
.kbViewer video,
.kbViewer img {
  /*
  max-width: calc(100% - 20px);
  */
  max-width: min(600px, 100%);
  margin: 1em 0em 2em 0em;
  border: 1px solid rgba(0, 0, 0, 0.06);
  overflow: hidden; /* clip? */
  box-shadow: 0px 1px 2px 2px rgba(0, 0, 0, 0.06);
  display: block;
  border-radius: 5px;
  /*
  -webkit-border-radius: $propertyValue;
  */
}

.kbEditor .dataFormFieldContent video,
.kbViewer video {
  /*
  background: linear-gradient(to bottom right, rgba(18, 18, 18, 1), rgba(17, 59, 85, 1));
  */
  background: linear-gradient(to bottom right, #121212, #113b55);
  background-image: url("/static/image/tasktwo-video-poster-background.jpg") !important;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
  background-size: cover;
  cursor: pointer;
}

.kbEditor .dataFormFieldContent img,
.kbViewer img {
  background-color: #ededed;
}

.kbEditor .dataFormFieldContent video:hover,
.kbEditor .dataFormFieldContent img:hover,
.kbViewer video:hover,
.kbViewer img:hover {
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
}

.kbEditor .dataFormFieldContent video[poster] .kbViewer video[poster] {
  /*
  height:100%;
  width:100%;
  */
  object-fit: cover;
}

/*
TODO: move into taglib skin
*/
.splitPanelSeparator {
  cursor: col-resize;
  background-color: #d0d0d0;
  border-style: solid;
  border-width: 0px 1px 0px 1px;
  border-color: #bbbbbb;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

div.splitPanelFlexBase, div.splitPanelVertical, div.splitPanelHorizontal, div.splitPanelFlex {
  display: flex;
  overflow: auto;
}

/* TODO: discontinue use / rename */
div.splitPanelFlex {
  flex-direction: row;
}

div.splitPanelHorizontal {
  flex-direction: row;
}

div.splitPanelVertical {
  flex-direction: column;
}

div.subpanelSeparator {
  background-color: #d9d9d9;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.07);
  flex: 0 0 auto;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* used by dragged split bar */
div.subpanelSeparatorHorizontal {
  cursor: col-resize;
  width: 5px;
}

/* used by dragged split bar */
div.subpanelSeparatorVertical {
  cursor: row-resize;
  height: 5px;
}

div.splitPanelHorizontal div.subpanelSeparator {
  cursor: col-resize;
  border-width: 0px 1px 0px 1px;
  width: 5px;
  position: relative;
}

div.splitPanelHorizontal div.subpanelSeparator:hover {
  background-color: #cccccc;
}

div.splitPanelHorizontal div.subpanelSeparator:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 30px;
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0px, rgba(255, 255, 255, 0.5) 3px, transparent 3px, transparent 6px);
  border-radius: 0px;
}

div.splitPanelVertical div.subpanelSeparator {
  cursor: row-resize;
  border-width: 1px 0px 1px 0px;
  height: 5px;
  position: relative;
}

div.splitPanelVertical div.subpanelSeparator:hover {
  background-color: #cccccc;
}

div.splitPanelFlex div.subpanel {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.explodedContentContainer {
  max-width: calc(100vw - 122px);
  max-height: calc(100vh - 122px);
  display: flex;
  flex-direction: column;
}

.explodedContentContainer .widgetTitleControlIcon {
  display: none;
}

.explodedContentContainer .explodedContentDialogToolbar {
  flex: 0 0 auto;
}

.explodedContentContainer .explodedContentDialogContent {
  flex: 1 1 auto;
  /*
  max-height: calc(100vh - 200px);
  */
  display: flex;
  overflow: auto;
}

.explodedContentContainer .explodedContentDialogFooter {
  flex: 0 0 auto;
}

/*
.explodedContentDialogToolbar:empty
{
	max-height: 3px;
	overflow-y: hidden;
}
*/
#explodedContentDialogDiv .explodedHidden,
.explodedContentDialogToolbar .explodedHidden {
  display: none !important;
}

.explodedOnly {
  display: none;
}

#explodedContentDialogDiv .explodedOnly,
.explodedContentDialogToolbar .explodedOnly {
  display: inline-block !important;
}

div:not(.xContainerExclusion) > div.xContainer, div:not(.xContainerExclusion) > div.xContainer.xC150_500 {
  position: relative;
  overflow-y: auto;
  /*
  overscroll-behavior-y: none;
  */
  container-type: scroll-state;
  container-name: xContainer-scroll-context;
}

.xContainer > .gridCellParagraph:nth-child(1 of .gridCellParagraph) {
  margin-top: 0px;
}

.xContainer > .gridCellParagraph:nth-last-child(1 of .gridCellParagraph) {
  margin-bottom: 0px;
}

div:not(.xContainerExclusion) > div.xContainer.xC150_500:not(.xContainerExpanded) {
  max-height: 150px;
}

div:not(.xContainerExclusion) > div.xContainer.xC150_500.xContainerExpanded {
  max-height: max(150px, min(40vh, 500px));
}

div.xContainerExclusion > div.xContainer .seeMore,
div.xContainerExclusion > div.xContainer .seeLess {
  display: none;
}

div:not(.xContainerExclusion) > div.xContainer .seeMore,
div:not(.xContainerExclusion) > div.xContainer .seeLess {
  position: sticky;
  text-align: right;
  bottom: 0;
  left: 0;
  padding: 0px 10px;
  /*
     background-color: rgba(0, 0, 0, 0.1);
  */
  display: none;
}

div:not(.xContainerExclusion) > div.xContainer .seeMore a,
div:not(.xContainerExclusion) > div.xContainer .seeLess a {
  /*
  font-size: $tasktwo-font-size-x-large;
  */
  font-size: 16px;
  font-weight: normal;
  font-style: italic;
  color: #21759b;
  text-decoration: none;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 50px;
  padding: 2px;
  /*
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  */
}

div:not(.xContainerExclusion) > div.xContainer .seeMore a:hover,
div:not(.xContainerExclusion) > div.xContainer .seeLess a:hover {
  text-decoration: underline;
}

/* should be visible when expanded, regardless of scrollbar */
div:not(.xContainerExclusion) > div.xContainer.xContainerExpanded .seeLess {
  display: block;
}

@container xContainer-scroll-context scroll-state(scrollable: bottom) {
  /* div.xContainer cannot style itself here */
  div:not(.xContainerExclusion) > div.xContainer:not(.xContainerExpanded) .seeMore {
    display: block;
  }
  /*
  div:not(.xContainerExclusion) > div.xContainer.xContainerExpanded .seeLess
  {
  	display: block;
  }
  */
}
@container xContainer-scroll-context scroll-state(scrollable: top) {
  /* div.xContainer cannot style itself here */
  div:not(.xContainerExclusion) > div.xContainer:not(.xContainerExpanded) .seeMore {
    display: block;
  }
  /*
  div:not(.xContainerExclusion) > div.xContainer.xContainerExpanded .seeLess
  {
  	display: block;
  }
  */
}
div.desktopContentArea {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  overflow: auto;
}

.fullPageContainer .pageFooter, .splashContainer .pageFooter {
  /* needed for filter : brightness */
  background-color: #f2f2f2;
  transition-property: filter;
  transition-timing-function: ease-in-out;
  transition-duration: 0.2s; /* 500 milliseconds */
  letter-spacing: 0.01em;
  /*
  flex-basis: 10%;
  */
  flex-shrink: 0;
  flex-grow: 0;
  padding: 5px 15px 0px 15px;
  border: none;
  margin: 0px;
  overflow-x: hidden;
  overflow-y: hidden; /* auto; */
  color: #999999;
  width: 100vw;
  max-height: 30px;
  min-height: 30px;
  position: relative;
}

.pageTitleContainer {
  overflow: hidden;
  padding: 15px 15px 0px 15px;
}

.pageTitleIcon {
  color: #121212;
  letter-spacing: 0.01em;
  font-size: 22px;
  font-family: Inter, Arial, Helvetica, sans-serif;
  font-style: normal;
  overflow: hidden;
  white-space: nowrap;
  text-align: left;
  vertical-align: top;
  padding-top: 5px;
  padding-right: 15px;
}

.pageTitle {
  /*
  padding-top: 5px;
  */
  letter-spacing: 0.01em;
  vertical-align: top;
  font-size: 22px;
  font-family: Inter, Arial, Helvetica, sans-serif;
  font-style: normal;
  font-weight: bold;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  /*
  white-space: nowrap;
  */
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  cursor: default; /*important for ms edge */
  /*
  color: $color-darkTitle;
  */
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-color: rgba(0, 0, 0, 0);
  background-position-x: 0%;
  background-position-y: 0%;
  background-repeat: repeat;
  background-attachment: fixed;
  background-size: auto;
  background-origin: padding-box;
  background-image: linear-gradient(to bottom right, #121212, #113b55) !important;
}

.saveButtonContainer {
  flex: 1 1 49%;
  white-space: nowrap;
  text-align: right;
}

.pageSubtitle {
  color: #121212;
  letter-spacing: 0.01em;
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
  font-style: normal;
  font-weight: normal;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #999999;
  /*
  padding-top: 2px;
  padding: 20px 15px 0px 15px;
  */
}

.pageSubtitle:empty {
  display: none;
}

.clickablePageSubtitle {
  cursor: pointer;
}

.clickablePageSubtitle:hover {
  color: #d54e21;
}

.pageSubtitleIcon {
  margin-right: 5px;
}

.highlightedPageTitle {
  /*
  color: $background-color-red-button !important;
  */
  background-image: linear-gradient(to bottom right, #d73600, rgb(98.3137254902%, 24.692749658%, 0%)) !important; /* keep !important for redButton */
  /*	
  font-size: 24px;
  font-style: normal;
  font-weight: bold;
  text-overflow : ellipsis;
  overflow:hidden;
  */
}

.pageHeaderContainer {
  width: 100vw;
  min-height: 64px;
  vertical-align: top;
  margin: 0px;
  padding: 0px;
  border: none;
}

.userInfoInPageHeaderPanel {
  display: block;
  /*	
  position:absolute;
  top: 0px;
  */
  min-height: 75px;
  height: 75px;
  max-height: 75px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  color: white;
}

.titleInPageHeaderPanel {
  display: block;
  min-height: 75px;
  height: 75px;
  max-height: 75px;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
  text-align: left;
  vertical-align: middle;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-x: hidden;
  color: white;
  font-size: 24px;
  font-family: Inter, Arial, Helvetica, sans-serif;
  font-style: normal;
  font-weight: regular;
}

.pageHeaderContainer:hover .titleInPageHeaderPanel {
  opacity: 0;
}

#desktopBannerLogoContainer {
  padding: 60px 0px 0px 0px;
  flex-basis: 10%;
  flex-grow: 1;
  flex-shrink: 1;
  width: 100%;
}

.desktopBannerLogo {
  opacity: 0.75;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.65);
  -webkit-transform: translateZ(0);
  transition: opacity 0.5s ease-in-out;
  transition-delay: 0.5s;
}

.desktopBannerImage {
  -webkit-transform: translateZ(0);
  transition: opacity 0.5s ease-in-out;
  transition-delay: 0.25s;
}

#desktopBannerLeftContainer {
  text-align: left;
  flex-basis: 90%;
  flex-grow: 1;
  flex-shrink: 1;
  color: white;
  height: 100%;
}

#desktopBannerRightContainer {
  flex-basis: 10%;
  flex-grow: 1;
  flex-shrink: 1;
  padding-left: 30px;
  text-align: right;
  color: white;
}

@media only screen and (max-width: 650px) {
  #desktopBannerRightContainer {
    display: none;
  }
}
#desktopBannerRightContainer #desktopBannerImage {
  height: 30dvh;
  max-height: 300px;
}

#form\.scorecardFormulaForm {
  padding: 0px;
  margin-left: -15px;
  margin-top: -15px;
}

/*
#form\.kbEditorForm2
{
	padding: 0px;
	margin-left: -15px;
	margin-top: -15px;
}
*/
/*
$sidebar-button-color : #2f2f37;
$sidebar-button-border-color : rgba(255, 255, 255, 1);
$sidebar-button-background-color : rgba(255, 255, 255, 0.8);
$sidebar-button-selection-background-color : rgba(255, 255, 255, 0.5);
*/
/*tomato */
/*semi-transparent tomato */
.pageSidePanel {
  /* initial display
  display:none;
  */
  /* initial width */
  width: 0px;
  overflow-x: hidden;
  overflow-y: auto;
  overflow: hidden;
  flex-basis: 10%;
  flex-shrink: 0;
  flex-grow: 0;
  /*
  background: #d0d0d0; //  rgba(4,133,173,1);
  background: #d0d0d0;
  color: #2f2f37;
  */
  color: white;
  /*
  width: 200px; 
  */
  max-width: 350px;
  /*
  transition: width 0.3s ease-in-out;
  transition: min-width 0.3s ease-in-out;
  transition: max-width 0.3s ease-in-out;
  */
  transition: width 0.3s ease-in-out;
  /*
  linear-gradient(to bottom right, #6e6d00, #929000) !important;
  */
}

.pageSidePanelLeft {
  border-bottom-right-radius: 3px;
  -webkit-border-bottom-right-radius: 3px;
}

.pageSidePanelRight {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom-left-radius: 3px;
  -webkit-border-bottom-left-radius: 3px;
  overscroll-behavior-y: none;
}

.sidebarTitle {
  flex: 0 0 auto;
  text-align: left;
  padding: 20px 15px 15px 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 20px;
  font-family: Inter, Arial, Helvetica, sans-serif;
  font-style: normal;
  font-weight: normal;
  /*
  background-color: rgba(255,255,255,0.2);
  */
  position: sticky;
  top: 0;
  z-index: 2;
}

.sidebarFooter {
  flex: 0 0 auto;
  text-align: left;
  padding: 10px 15px 10px 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  font-family: Inter, Arial, Helvetica, sans-serif;
  font-style: normal;
  font-weight: normal;
  background-color: #113b55; /* rgba(255,255,255,0.2); */
  /*
  color: #b3b3b3;
  */
  color: #cccccc;
  position: sticky;
  bottom: 0;
  z-index: 2;
}

.sidebarFooter:empty {
  display: none;
}

.sidebarButtonGroupLeft {
  /*
  float: left;
  */
  margin: 5px 10px 5px 0px;
}

.sidebarButtonGroupRight {
  /*
  float: right;
  */
  margin: 5px 0px 5px 10px;
}

.sidebarButtonGroup {
  font-size: 13px;
  color: rgb(255, 255, 255);
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  display: inline-block;
  overflow: hidden;
  text-align: center;
  white-space: nowrap;
  border-radius: 3px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.sidebarButtonGroup button.sidebarButton {
  font-size: 13px;
  color: rgb(255, 255, 255);
  cursor: pointer;
  padding: 4px 12px;
  background-color: rgba(255, 255, 255, 0.2);
  display: inline-block;
  vertical-align: middle;
  border-radius: initial;
}

.sidebarButtonGroup button.sidebarButton:first-child {
  border: 0px;
}

.sidebarButtonGroup button.sidebarButton:hover {
  background-color: rgba(255, 99, 71, 0.3);
  color: #FF6347;
}

.sidebarButtonGroup button.sidebarButtonSelected {
  background-color: rgba(255, 255, 255, 0.35) !important;
}

.sidebarButtonGroup button.sidebarButtonSelected:hover {
  background-color: rgba(255, 255, 255, 0.35) !important;
  color: #FF6347;
}

.sidebarButtonGroup button.sidebarButton + button.sidebarButton {
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  border-top: 0px;
  border-bottom: 0px;
  border-right: 0px;
}

.sidebarButtonGroup button.sidebarButton + button.sidebarButton[style*="display: none"] {
  border: 0px;
}

button.sidebarButton[style*="display: none"] + button.sidebarButton {
  border: 0px;
}

.sidebarButtonGroup button.highlightedButton {
  background-color: rgba(255, 255, 255, 0.35);
}

.sidebarButtonGroup div.sidebarButtonText {
  padding: 4px 12px;
  color: rgb(255, 255, 255);
  background-color: transparent;
  vertical-align: middle;
  display: inline-block;
  border-right: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: initial;
}

.sidebarDragSource:hover {
  color: tomato !important;
}

body {
  /*
  background-color: #ededed;
  background-color: #f2f2f2;
  */
  background-color: #f2f2f2;
}

.chartWaitOverlay {
  font-size: 18px;
  font-weight: normal;
  color: #cccccc;
  position: absolute;
  text-align: center;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  padding: 0px;
  overflow: hidden;
  /* opacity:0.5; */
  z-index: 10501;
}

.sessionMessagesPanel {
  border: none;
  background: #ffffff url("../image/wdbg.png") repeat-x scroll left top;
  border-radius: 3px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  overflow: hidden;
  /*
  border : solid 1px #cccccc;
  -moz-box-shadow: 1px 1px 10px #e0e0e0;
  -webkit-box-shadow: 1px 1px 10px #e0e0e0;
  box-shadow: 1px 1px 10px #e0e0e0;
  */
  -moz-box-shadow: 5px 5px 80px #3b3b45;
  -webkit-box-shadow: 5px 5px 80px #3b3b45;
  box-shadow: 5px 5px 80px #3b3b45;
  left: 15px;
  top: 15px;
  width: min(100dvw - 30px, 850px);
  min-height: 100px;
  position: fixed;
  z-index: 11000;
  color: #000000;
  font-size: 13px;
  font-style: normal;
  font-weight: normal;
  opacity: 0.95;
  text-align: left;
  padding: 15px;
}

.customReferenceDataEditorMessage {
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: normal;
  color: #999999;
}

.greyText {
  font-size: 13px;
  font-weight: normal;
  color: #999999;
}

.userName {
  color: #2f2f37;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.userEmail {
  color: #2f2f37;
  font-size: 13px;
  font-weight: normal;
  text-align: center;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  line-break: anywhere;
}

.userPicture {
  width: 200px;
  height: 200px;
  border: 10px solid #cccccc;
  margin-bottom: 15px;
  border-radius: 50%;
  /*
  -webkit-border-radius: $propertyValue;
  */
  overflow: hidden;
  object-fit: cover;
}

.passkeyIcon {
  color: #999999;
  cursor: pointer;
  padding-left: 15px;
}

.passkeyIcon:hover {
  color: #2f2f37;
}

.forexIcon {
  float: left;
  color: rgba(0, 0, 0, 0.2);
}

.footerLink {
  font-size: 11px;
  color: #999999;
  /*	

  */
  -webkit-user-drag: none;
  -moz-user-drag: none;
  -ms-user-drag: none;
  user-drag: none;
}

.footerLink:hover {
  color: #d54e21;
}

.sessionMessage {
  margin-top: 15px;
  overflow: auto;
  max-height: 400px;
  color: #000000;
  font-size: 13px;
  font-weight: normal;
  vertical-align: top;
  line-height: 1.3;
  border-radius: 3px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.sessionMessage span {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.sessionMessagesTitle {
  /*
  color : #298CB9;
  */
  font-size: 16px;
  font-weight: bold;
  padding: 0px 0px 5px 0px;
  line-height: 1.3;
  color: #121212;
}

.fsRestoreButtonBase, .pageFooter .dynFSRestoreButton, .fsRestoreButton {
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translate(-50%, 0%);
  /*  
  position: absolute;
  left: calc(50dvw - 50px);
  top: 0px;
  */
  z-index: 10509; /* 8550 */
  overflow-x: auto;
  overflow-y: hidden;
  height: 15px;
  cursor: pointer;
  transition: transform 0.2s ease-out;
  transform-origin: left;
  vertical-align: middle;
  color: #999999;
  width: 100px;
  text-align: center;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.fsRestoreButton {
  padding: 0px 20px 0px 20px;
  opacity: 0.5;
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 15px;
  border-width: 0px 1px 1px 1px;
  border-color: rgba(0, 0, 0, 0.01);
  border-style: solid;
  background-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
}

.fsRestoreButton:hover {
  opacity: 1;
}

.pageFooter .dynFSRestoreButton {
  z-index: 2;
  padding: 5px 20px 0px 20px;
  opacity: 0.25;
  /*
  display: none;
  */
}

.pageFooter:hover .dynFSRestoreButton {
  /*
  opacity: 0.5;
  display: flex !important;
  */
}

.pageFooter:hover .dynFSRestoreButton:hover {
  opacity: 1 !important;
  /*
  display: flex !important;

  background-color: rgba(255, 255, 255, 0.3);
  border-left: 1px solid rgba(255, 255, 255, 0.7);
  border-right: 1px solid rgba(255, 255, 255, 0.7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);	
  */
}

.workspaceNavigation {
  position: absolute;
  left: 0px;
  z-index: 10510; /* 8550 */
  display: none;
  overflow-x: hidden;
  overflow-y: auto;
  width: 360px;
  border-bottom-right-radius: 3px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease-out;
  height: auto;
  transform-origin: left;
  vertical-align: middle;
  padding: 0px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #aaaaaa;
}

.workspaceNavButton {
  position: absolute;
  left: 0px;
  top: 50dvh;
  z-index: 10509; /* 8550 */
  overflow-x: hidden;
  overflow-y: auto;
  width: 15px;
  cursor: pointer;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease-out;
  transform-origin: left;
  vertical-align: middle;
  padding: 20px 0px 20px 4px;
  background-color: #cccccc;
  color: #ffffff;
  opacity: 0.5;
}

.workspaceNavButton:hover {
  opacity: 1;
}

.navigationIcon {
  display: inline-block;
  cursor: pointer;
  color: #cccccc;
  font-size: 13px;
  font-style: normal;
  font-weight: normal;
  transition: font-size 0.1s linear;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /*
  @include font-smoothing;
  */
  text-align: center;
  vertical-align: middle;
  padding: 20px 8px 20px 7px;
  min-height: 75px;
  height: 75px;
  max-height: 75px;
}

.navigationIcon:hover {
  /*
  color:#d54e21;
  */
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.15); /*#2f383e;*/
}

.navigationIcon a {
  text-decoration: none;
  cursor: pointer;
  color: #aaaaaa;
  letter-spacing: 0.01em;
  transition-property: letter-spacing;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
}

.navigationIcon:hover a {
  /*
  color:#d54e21;
  */
  color: #ffffff;
  letter-spacing: 0.01em;
}

.navigationIcon i {
  padding-bottom: 10px;
}

.selectedNavigationIcon {
  display: inline-block;
  text-align: center;
  cursor: pointer;
  /*
  color: #298cb9;
  */
  color: #2ca4db;
  background-color: rgba(0, 0, 0, 0.15); /*#2f383e;*/
  font-size: 13px;
  font-style: normal;
  font-weight: normal;
  transition: font-size 0.1s linear;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /*
  @include font-smoothing;
  */
  text-align: center;
  vertical-align: middle;
  padding: 20px 8px 20px 7px;
  min-height: 75px;
  height: 75px;
  max-height: 75px;
}

.selectedNavigationIcon i {
  padding-bottom: 10px;
}

.selectedNavigationIcon a {
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  color: #298cb9;
  transition-property: letter-spacing;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
}

.selectedNavigationIcon:hover {
  color: #ffffff;
  /* 
  color: #EA3C00; 
  color:#d54e21;
  */
}

.selectedNavigationIcon:hover a {
  letter-spacing: 0.01em;
  color: #ffffff;
  /* 
  color: #EA3C00; 
  color:#d54e21;
  */
}

.navigationIconNoHighlight {
  display: inline-block;
  /*
  cursor : pointer;
  */
  color: #cccccc;
  font-size: 11px;
  font-style: normal;
  font-weight: normal;
  transition: font-size 0.1s linear;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /*
  @include font-smoothing;
  */
  text-align: center;
  vertical-align: middle;
  padding: 20px 8px 20px 7px;
}

.serverTag {
  padding-left: 5px;
  font-size: 22px;
  font-weight: normal;
  /*
  color: #ffffff;
  color:#ea3c00;

  color:#ffffff;
  color:#ea3c00;	

  opacity: 0.2;
  */
  color: #ffffff;
  vertical-align: middle;
}

.globalNavigationPanel {
  display: block;
  margin: 0px;
  padding: 0px;
  background: transparent;
  /*
  min-height: 100px;
  max-height: 100px;
  */
  overflow-y: hidden;
  text-overflow: ellipsis;
}

/* global navigation tabs replacements */
.globalNavLink {
  font-size: 13px;
  font-weight: bold;
  color: #2f2f37;
  margin: 0px 0px 0px 20px;
  border: none;
  padding: 0px;
  cursor: pointer;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  -webkit-border-top-left-radius: 3px;
  -webkit-border-top-right-radius: 3px;
  -webkit-border-bottom-left-radius: 0px;
  -webkit-border-bottom-right-radius: 0px;
  overflow: hidden;
}

.globalNavLink:hover {
  color: #d54e21;
  text-decoration: underline;
}

.globalNavLinkSelected {
  background: url("../image/button-bg-blue.png") repeat-x left top;
  background: transparent;
  border: none;
  font-size: 13px;
  font-weight: bold;
  color: #298cb9;
  margin: 0px 0px 0px 20px;
  border: none;
  padding: 0px;
  cursor: pointer;
  border-radius: 20px;
  /*
  -webkit-border-radius: $propertyValue;
  */
}

div.navigationListGroup {
  /*
  opacity: 1 !important;
  padding: 20px 15px 20px 16px !important;
  */
  font-weight: bold;
}

div.navigationListEntry {
  overflow-x: hidden;
  overflow-y: auto;
  padding: 17px 15px 17px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #cccccc;
  cursor: pointer;
  font-family: Inter, Arial, Helvetica, sans-serif;
  font-size: 14px;
  /*
  font-size: $tasktwo-font-size-regular;
  opacity: 0.85;
  */
  opacity: 1;
  transition: color 0.1s ease-out, background-color 0.1s ease-out;
  display: grid;
  grid-template-columns: min-content auto;
  line-height: 1.3;
  letter-spacing: 0.03em;
}

div.navigationListEntry:hover {
  /*
  background-color: rgba(255, 255, 255, 0.1);
  */
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 1;
}

div.navigationListEntry a {
  /*
  font-size: $tasktwo-font-size-regular; //$tasktwo-font-size-largeish;
  @include extra-spacing;
  @include title-spacing;
  */
  text-decoration: none;
  color: #cccccc;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /*
  font-family: $font-stack-title;
  overflow: hidden;
  */
  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
  display: block;
  overflow: visible; /* for the counter block */
  text-underline-position: under;
}

div.navigationListEntry:hover i {
  color: tomato;
}

div.navigationListEntry:hover a {
  text-decoration: underline;
  color: tomato;
}

.ttNavIcon {
  margin-right: 15px;
  width: 22px;
  text-align: center;
  padding-top: 7.49px;
  float: left;
}

.ttRecentNavIconContainer {
  border: solid 2px rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0px;
  margin-right: 12px;
}

.ttRecentNavIconContainer:hover {
  border-color: tomato;
  color: tomato;
}

div.recentNavigationListEntry {
  overflow-x: hidden;
  overflow-y: auto;
  padding: 16px 15px 16px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #cccccc;
  cursor: auto;
  font-size: 13px;
  opacity: 1; /*0.7;*/
  transition: color 0.1s ease-out, background-color 0.1s ease-out;
  display: flex;
  align-items: center;
  flex-direction: row;
  background-color: rgba(0, 0, 0, 0.55);
  letter-spacing: 0.01em;
}

div.recentNavigationListEntry:hover {
  /*
  background-color: rgba(255, 255, 255, 0.1);
  */
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 1;
}

div.highlightedNavigationListBackground {
  background-color: rgba(0, 0, 0, 0.5);
}

div.highlightedNavigationListTitle {
  /*
  background-color:rgba(0, 0, 0, 0.5);
  */
  color: #2ca4db;
  opacity: 1;
}

div.highlightedNavigationListTitle a {
  color: #2ca4db;
}

.breadcrumbsContainer {
  vertical-align: middle;
  padding: 15px;
  /*
  background-color: rgba(0,0,0,0.5);
  color: #aaaaaa;
  */
  color: #ededed;
}

.logoContainer {
  vertical-align: middle;
  padding: 0px;
  color: #ededed;
}

.logoContainer i {
  opacity: 0.5;
}

.logoContainer:hover i {
  opacity: 1;
}

div.breadcrumb {
  text-align: center;
  vertical-align: middle;
  padding-right: 30px;
  display: inline-block;
  font-size: 13px;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
  text-decoration: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

div.breadcrumb i {
  padding-bottom: 7px;
}

div.selectedBreadcrumb {
  color: #2ca4db;
}

.selectedNavigationIcon {
  display: inline-block;
  text-align: center;
  cursor: pointer;
  /*
  color: #298cb9;
  */
  color: #2ca4db;
  background-color: rgba(0, 0, 0, 0.15); /*#2f383e;*/
  font-size: 13px;
  font-style: normal;
  font-weight: normal;
  transition: font-size 0.1s linear;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /*
  @include font-smoothing;
  */
  text-align: center;
  vertical-align: middle;
  padding: 20px 8px 20px 7px;
  min-height: 75px;
  height: 75px;
  max-height: 75px;
}

div.breadcrumb:hover {
  color: tomato;
}

.globalNavigationContainer a {
  display: none;
}

.globalNavigationContainer br {
  display: none;
}

@media only screen and (min-width: 500px) {
  .globalNavigationContainer a {
    display: inline;
  }
  .globalNavigationContainer br {
    display: inline;
  }
}
.navCloseIndicatorBar {
  background-color: rgba(255, 255, 255, 0.2);
  height: 2px;
  width: 100%;
  border-radius: 3px;
  overflow: hidden;
}

.globalNavigationContainer {
  position: absolute;
  top: 0px;
  margin: 0px;
  padding: 0px;
  border: 0px;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  vertical-align: middle;
  overflow-y: hidden;
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /*
  min-height: 100px;
  height: 100px;
  max-height: 100px;
  */
}

#quickLinks {
  transition: opacity 1.5s ease-in-out;
  transition-delay: 0s;
}

.pageHeaderContainer:hover .globalNavigationContainer {
  opacity: 1;
}

.bulletinBoardBullet {
  width: 31px;
  height: 31px;
  border-radius: 31px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  background: #ededed;
  display: inline-block;
  border: 1px solid #dddddd;
  vertical-align: middle;
  text-align: center;
  position: relative;
  left: -16px;
}

.bulletinBoardBullet div.innerBullet {
  margin: 0px;
  padding: 0px;
  width: 15px;
  height: 15px;
  border-radius: 15px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  display: inline-block;
  border: none;
  background: #298cb9;
  position: relative;
  top: 7px;
}

.bulletinBoardContainer {
  display: flex;
  align-content: flex-start;
  flex-direction: column;
}

.bulletinBoardEntry {
  /*
  margin-left: 8px !important;
  margin-right: 7px !important;
  align-self: start;

  width: calc(100% - 15px);
  */
}

.bulletinBoardEntryContent {
  /*
  min-height: 100px;
  */
}

.bulletinBoardEntryContent header {
  /*
  @include extra-spacing;
  font-size: $tasktwo-font-size-regular;
  font-size: $tasktwo-font-size-largeish;
  color: $color-darkTitle;
  */
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-color: rgba(0, 0, 0, 0);
  background-position-x: 0%;
  background-position-y: 0%;
  background-repeat: repeat;
  background-attachment: fixed;
  background-size: auto;
  background-origin: padding-box;
  background-image: linear-gradient(to bottom right, #121212, #113b55);
  font-size: 14px;
  font-style: normal;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 5px;
}

.bulletinBoardEntryContent p {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  cursor: default; /*important for ms edge */
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 15px;
}

.bulletinBoardEntryContent pre {
  padding: 10px 10px;
  background-color: #ededed;
  border-radius: 3px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  display: block;
  white-space: pre-wrap;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  cursor: default; /*important for ms edge */
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 15px;
}

.bulletinBoardEntryContent code {
  /*
  font-family: monospace;
  */
  display: block;
  white-space: pre-wrap;
  padding: 10px 10px;
  background-color: #ededed;
  color: #595959;
  border-radius: 3px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  cursor: default; /*important for ms edge */
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 15px;
}

@media only screen and (min-width: 2048px) {
  .bulletinBoardEntry {
    /*
    width: calc(50% - 15px);
    */
  }
}
/*
$dashboardIconWidth: 1.8em;
*/
.dashboardListPanelContent {
  /* overflow interferes with the wheel event in chromium */
  /*
  overflow-x: hidden;
  overflow-y: auto;
  */
  min-width: 200px;
  max-width: 400px;
  overscroll-behavior-y: none;
}

div.dashboardListEntry {
  overflow-x: hidden;
  overflow-y: auto;
  padding: 10px 15px 10px 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

div.dashboardListEntry a {
  cursor: pointer;
  text-decoration: none;
  color: #cccccc;
  font-size: 13px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  letter-spacing: 0.01em;
  transition-property: color, letter-spacing;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
}

div.dashboardListEntry a:hover {
  letter-spacing: 0.01em;
  text-decoration: underline;
  color: tomato !important;
}

.dashboardTitle {
  letter-spacing: 0.01em;
  overflow: hidden;
  float: left;
  display: inline-block;
  color: #121212;
  font-family: Inter, Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: bold;
  font-style: normal;
  line-height: 42px;
  /*
  transition: letter-spacing 0.2s ease-in-out 0s, color 0.2s ease-in-out 0s;
  */
  transition-property: color, letter-spacing;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
}

.dashboardSubtitle {
  letter-spacing: 0.01em;
  color: #2f2f37;
  font-size: 13px;
  font-weight: bold;
  font-style: normal;
  text-overflow: ellipsis;
  margin-bottom: 0px;
}

.widgetTitle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #121212;
  font-family: Inter, Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: bold;
  font-style: normal;
  transition-property: color, letter-spacing;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
}

/*
.dashboardSidePanelLeft
{
	flex: 1 1 20%;
	min-width: max(20%, 200px); 
	max-width: min(20%, 200px);


	background: #d0d0d0;

	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;

	border-width: 1px 1px 1px 0px;
	border-style: solid;
	border-color: #cccccc;
}

.dashboardSidePanelRight
{
	flex: 1 1 20%;
	min-width: max(20%, 200px); 
	max-width: min(20%, 200px);

	background: #d0d0d0;

	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;

	border-width: 1px 0px 1px 1px;
	border-style: solid;
	border-color: #cccccc;
}
*/
/* not used */
.selectedDashboardTitle {
  color: #2f2f37;
  font-size: 13px;
  font-weight: bold;
  text-decoration: none;
}

.dashboardWidgetGroupTitle {
  letter-spacing: 0.01em;
  font-size: 13px;
  font-weight: normal;
  text-decoration: none;
  color: white !important;
}

.dashboardWidgetGroupTitle:hover {
  color: #FF6347 !important;
}

/*
.widgetIcon
{
    vertical-align: top;
	cursor : pointer;
	color: #999999;
    font-size: $tasktwo-font-size-larger;
    line-height: 18px;
    font-style: normal;
    width: 20px;

    transition: font-size 0.1s linear;

	@include user-select(none);
	@include font-smoothing;
}

.widgetIcon:hover
{
	font-size: $tasktwo-font-size-large;
    line-height: 18px;
    color:#2f2f37;
}

.dashboardIcon
{
    vertical-align:middle;
	cursor : pointer;
    font-size: 20px;
    line-height: 24px;
    font-style: normal;
    width: 40px;
    transition: font-size 0.1s linear;
   	transition: color 0.1s linear;

   	@include user-select(none);
	@include font-smoothing;
}

.dashboardIcon:hover
{
}
*/
.dashboardSelectorContainer {
  display: inline-block;
  float: left;
  width: 99%;
  /*
  white-space:nowrap;
  */
  color: #2f2f37;
  text-decoration: none;
  cursor: pointer;
  margin-bottom: 15px;
  padding-right: 45px;
  text-align: left;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

@media only screen and (min-width: 640px) {
  .dashboardSelectorContainer {
    width: 49%;
  }
}
@media only screen and (min-width: 1024px) {
  .dashboardSelectorContainer {
    width: 24%;
  }
}
/*
@media only screen and (min-width: 1025px) 
{
	.dashboardSelectorContainer
	{
		width: 24%;
	}
}
*/
.dashboardSelectorContainerShared::after {
  content: " (shared)";
  font-size: 10px;
}

.dashboardSelectorContainerSelected {
  color: #21759b;
  font-weight: bold;
  text-decoration: underline;
}

.dashboardSelectorContainerSharedSelected {
  color: #21759b;
  font-weight: bold;
  text-decoration: underline;
}

.dashboardSelectorContainer:hover {
  /*
  color: #d54e21;
  */
  color: tomato;
}

.dashboardTitleMovable {
  letter-spacing: 0.01em;
}

.dashboardTitleMovable:hover {
  letter-spacing: 0.02em !important;
}

.dashboardListPanelContent div.verticalMenu ul li div.content {
  letter-spacing: 0.01em;
  color: white;
  line-height: 1.4em;
}

.dashboardListPanelContent div.verticalMenu ul li div.content:hover {
  color: tomato !important;
}

.dashboardListPanelContent div.verticalMenu ul li div.caret {
  color: white;
}

.dashboardListPanelContent div.verticalMenu ul li div.caret:hover {
  color: tomato !important;
}

.dashboardListPanelContent div.verticalMenu ul li div.content div.dashboardName {
  /*
  padding-left: calc(1.8em);
     text-indent: calc(-1.8em);
     */
  letter-spacing: 0.03em;
  padding-left: 30px;
  text-indent: -30px;
  color: white !important;
}

.dashboardListPanelContent div.verticalMenu ul li div.content div.dashboardName:hover {
  color: #FF6347 !important;
}

.dashboardListPanelContent div.verticalMenu ul li div.content div.dashboardDescription {
  /*
  padding-left: calc(1.8em);
  */
  padding-left: 30px;
}

.dashboardListIcon {
  text-indent: initial;
  /*
  width: 1.8em !important;
  */
  width: 30px !important;
}

.dashboardTagIcons {
  text-indent: initial;
  padding-left: 0px;
  white-space: nowrap;
}

.dashboardTagIcons i {
  color: #999999;
  /*
  cursor: help;
  */
}

.dashboardTagIcons i:not(:first-child) {
  padding-left: 10px;
}

/* for dev servers */
.devHeaderBackground .verticalMenuItemDescription {
  color: #b3b3b3;
}

.widgetDropTarget {
  /*
  background: linear-gradient(to bottom right, #912500, #b52e00);
  background: linear-gradient(to bottom right, #912500, #b52e00);

  color : #ffffff;

  -moz-box-shadow: 1px 3px 5px #b52e00;
  -webkit-box-shadow: 1px 3px 5px #b52e00;
  box-shadow: 1px 3px 5px #b52e00;
  */
  /*
  background-color: tomato;
  */
  cursor: s-resize !important;
}

.widgetDropTarget .emptyDashboardPanel {
  border-color: #b52e00 !important;
  background-color: #d8d8d8 !important;
}

.widgetDropTarget .emptyDashboardPanel i {
  color: #b3b3b3 !important;
}

.widgetDropTarget .dashboardWidgetContainer {
  border-color: #b52e00 !important;
}

.dashboardLayoutMenuImage {
  margin: 5px 5px 5px 0px;
  width: 120px;
}

/*
@import 'desktop/project';
*/
.ganttCanvas {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  background: #ffffff;
  position: relative;
  width: 100%;
}

.ganttTaskNamesContainer {
  background-color: #f6f6f6;
  border-style: solid;
  border-width: 0px 1px 0px 0px;
  border-color: #cccccc;
  font-size: 13px;
  font-weight: normal;
  color: #000000;
  z-index: 16;
}

.ganttDraggedTaskBarDropTarget {
  font-size: 1px;
  height: 3px;
  background-color: #EA3C00;
  border-width: 0px;
  z-index: 20;
  filter: alpha(opacity=20);
  -moz-opacity: 0.2;
  opacity: 0.2;
  overflow: hidden;
}

.ganttSummaryBar {
  font-size: 12px;
  font-weight: normal;
  text-align: left;
  text-overflow: ellipsis;
  overflow: hidden;
  padding: 0px;
  width: 100%;
  border: none;
  margin: none;
  vertical-align: top;
  background-color: #cccccc;
  color: #000000;
}

/* still needed? */
table.ganttSummaryBar tr td {
  min-height: 25px;
  height: 25px;
  /*
  padding: 5px 7px 5px 7px;
  */
  overflow: hidden;
  vertical-align: middle;
  padding: 5px 7px 5px 7px;
  color: #000000;
  text-overflow: ellipsis;
}

table.ganttSummaryBar tr td#ganttSummaryBarLeft {
  /*
  min-width: 300px;
  */
}

/* still needed? */
table.ganttSummaryBar a {
  color: #21759b;
}

/* still needed? */
.ganttSummaryBar a:hover {
  color: #D54E21;
  border-bottom: solid 1px #D54E21;
}

/*#990000;*/
.ganttBarScaled {
  transform: scaleX(0);
}

.ganttTaskBar {
  font-size: 13px;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  border-radius: 3px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  overflow: hidden;
  padding: 0px 1px 0px 1px;
  /* transitions should be made context-specific *
   	/*
  transition: transform 0.2s ease-out;
  transform-origin:left;
  */
  box-shadow: rgba(0, 0, 0, 0.05) 1px 2px 10px 1px;
  border-radius: 5px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  z-index: 12;
  color: #ffffff;
  border: solid 1px #cccccc;
  /*
  background: linear-gradient(to bottom right, $color-gantt-task-bar  0%, lighten($color-gantt-task-bar, 2 * $gradient-color-deviation) 100%);
  background: linear-gradient(to bottom right, lighten($color-gantt-task-bar, $gradient-color-deviation) 0%, lighten($color-gantt-task-bar, 2 * $gradient-color-deviation) 100%); 
  */
  background: linear-gradient(to bottom right, #cccccc 0%, rgb(87%, 87%, 87%) 100%);
}

.ganttTaskBarCompleted {
  font-size: 13px;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  border-radius: 3px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  overflow: hidden;
  padding: 0px 1px 0px 1px;
  /* transitions should be made context-specific *
   	/*
  transition: transform 0.2s ease-out;
  transform-origin:left;
  */
  box-shadow: rgba(0, 0, 0, 0.05) 1px 2px 10px 1px;
  border-radius: 5px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  z-index: 13;
  color: white;
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.35);
  border: solid 1px #4383a6;
  background: linear-gradient(to bottom right, #4383a6 0%, rgb(32.5830177565%, 58.5751072961%, 72.7895312631%) 100%);
}

.ganttApproved {
  font-size: 13px;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  border-radius: 3px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  overflow: hidden;
  padding: 0px 1px 0px 1px;
  /* transitions should be made context-specific *
   	/*
  transition: transform 0.2s ease-out;
  transform-origin:left;
  */
  box-shadow: rgba(0, 0, 0, 0.05) 1px 2px 10px 1px;
  border-radius: 5px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  z-index: 12;
  color: #ffffff;
  border: solid 1px rgb(59%, 59%, 59%);
  background: linear-gradient(to bottom right, rgb(59%, 59%, 59%) 0%, #cccccc 100%);
}

.ganttBarProposal {
  font-size: 13px;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  border-radius: 3px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  overflow: hidden;
  padding: 0px 1px 0px 1px;
  /* transitions should be made context-specific *
   	/*
  transition: transform 0.2s ease-out;
  transform-origin:left;
  */
  box-shadow: rgba(0, 0, 0, 0.05) 1px 2px 10px 1px;
  border-radius: 5px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  z-index: 12;
  color: #ffffff;
  border: solid 1px #cccccc;
  background: linear-gradient(to bottom right, #cccccc 0%, rgb(87%, 87%, 87%) 100%);
}

.ganttClosedCanceled {
  font-size: 13px;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  border-radius: 3px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  overflow: hidden;
  padding: 0px 1px 0px 1px;
  /* transitions should be made context-specific *
   	/*
  transition: transform 0.2s ease-out;
  transform-origin:left;
  */
  box-shadow: rgba(0, 0, 0, 0.05) 1px 2px 10px 1px;
  border-radius: 5px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  z-index: 12;
  color: #ffffff;
  border: solid 1px #e00000;
  background: linear-gradient(to bottom right, #e00000 0%, rgb(100%, 1.8431372549%, 1.8431372549%) 100%);
  /*
  background: rgba(102, 51, 51, 0.20);
  */
}

.ganttClosedCanceledCompleted {
  font-size: 13px;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  border-radius: 3px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  overflow: hidden;
  padding: 0px 1px 0px 1px;
  /* transitions should be made context-specific *
   	/*
  transition: transform 0.2s ease-out;
  transform-origin:left;
  */
  box-shadow: rgba(0, 0, 0, 0.05) 1px 2px 10px 1px;
  border-radius: 5px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  z-index: 12;
  color: #ffffff;
  border: solid 1px rgb(59.8431372549%, 0%, 0%);
  background: linear-gradient(to bottom right, rgb(59.8431372549%, 0%, 0%) 0%, rgb(73.8431372549%, 0%, 0%) 100%);
}

.ganttProposalRejected {
  font-size: 13px;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  border-radius: 3px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  overflow: hidden;
  padding: 0px 1px 0px 1px;
  /* transitions should be made context-specific *
   	/*
  transition: transform 0.2s ease-out;
  transform-origin:left;
  */
  box-shadow: rgba(0, 0, 0, 0.05) 1px 2px 10px 1px;
  border-radius: 5px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  z-index: 12;
  color: #ffffff;
  border: solid 1px #d55428;
  background: linear-gradient(to bottom right, #d55428 0%, rgb(86.2791598853%, 42.0294505154%, 26.9365263892%) 100%);
  /*
  border: solid 1px darken($color-gantt-rejected_proposal, $gradient-color-deviation);
   	background: rgba(102, 102, 102, 0.10);
  */
}

.ganttProposalRejectedCompleted {
  font-size: 13px;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  border-radius: 3px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  overflow: hidden;
  padding: 0px 1px 0px 1px;
  /* transitions should be made context-specific *
   	/*
  transition: transform 0.2s ease-out;
  transform-origin:left;
  */
  box-shadow: rgba(0, 0, 0, 0.05) 1px 2px 10px 1px;
  border-radius: 5px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  z-index: 13;
  color: #ffffff;
  border: solid 1px rgb(22.248758731%, 43.5013043844%, 55.1237902886%);
  background: linear-gradient(to bottom right, #4383a6 0%, rgb(32.5830177565%, 58.5751072961%, 72.7895312631%) 100%);
}

.ganttDraft {
  font-size: 13px;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  border-radius: 3px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  overflow: hidden;
  padding: 0px 1px 0px 1px;
  /* transitions should be made context-specific *
   	/*
  transition: transform 0.2s ease-out;
  transform-origin:left;
  */
  box-shadow: rgba(0, 0, 0, 0.05) 1px 2px 10px 1px;
  border-radius: 5px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  color: #ffffff;
  z-index: 12;
  border: solid 1px rgb(73%, 73%, 73%);
  background: rgba(204, 204, 204, 0.5);
}

.ganttOutline {
  font-size: 13px;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  border-radius: 3px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  overflow: hidden;
  padding: 0px 1px 0px 1px;
  /* transitions should be made context-specific *
   	/*
  transition: transform 0.2s ease-out;
  transform-origin:left;
  */
  box-shadow: rgba(0, 0, 0, 0.05) 1px 2px 10px 1px;
  border-radius: 5px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  background: transparent;
  border-style: solid;
  border-width: 1px;
  border-color: #666666;
  color: #2f2f37;
  z-index: 12;
}

.ganttClosedCompleted {
  font-size: 13px;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  border-radius: 3px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  overflow: hidden;
  padding: 0px 1px 0px 1px;
  /* transitions should be made context-specific *
   	/*
  transition: transform 0.2s ease-out;
  transform-origin:left;
  */
  box-shadow: rgba(0, 0, 0, 0.05) 1px 2px 10px 1px;
  border-radius: 5px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  background: transparent;
  border-style: solid;
  border-width: 1px;
  border-color: #666666;
  color: #2f2f37;
  z-index: 12;
  background: rgba(51, 102, 51, 0.2);
}

.ganttTimelineSummary {
  font-size: 13px;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  border-radius: 3px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  overflow: hidden;
  padding: 0px 1px 0px 1px;
  /* transitions should be made context-specific *
   	/*
  transition: transform 0.2s ease-out;
  transform-origin:left;
  */
  box-shadow: rgba(0, 0, 0, 0.05) 1px 2px 10px 1px;
  border-radius: 5px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  color: #ffffff;
  border: solid 0px transparent;
  cursor: pointer;
  z-index: 13;
}

.ganttTimelineCompleted {
  font-size: 13px;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  border-radius: 3px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  overflow: hidden;
  padding: 0px 1px 0px 1px;
  /* transitions should be made context-specific *
   	/*
  transition: transform 0.2s ease-out;
  transform-origin:left;
  */
  box-shadow: rgba(0, 0, 0, 0.05) 1px 2px 10px 1px;
  border-radius: 5px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  color: #ffffff;
  cursor: pointer;
  z-index: 13;
  border: none;
  background: #000000;
  filter: alpha(opacity=20);
  -moz-opacity: 0.2;
  opacity: 0.2;
}

.ganttTaskBarActuals {
  font-size: 13px;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  border-radius: 3px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  overflow: hidden;
  padding: 0px 1px 0px 1px;
  /* transitions should be made context-specific *
   	/*
  transition: transform 0.2s ease-out;
  transform-origin:left;
  */
  box-shadow: rgba(0, 0, 0, 0.05) 1px 2px 10px 1px;
  border-radius: 5px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  border: solid 1px rgb(61.0470385045%, 38.0345423143%, 0.6392360053%);
  background: linear-gradient(to bottom right, #bf7702 0%, rgb(88.7568830641%, 55.298791019%, 0.9293914457%) 100%);
  color: #2f2f37;
  filter: alpha(opacity=85);
  -moz-opacity: 0.85;
  opacity: 0.85;
  z-index: 14;
}

.ganttTaskBarCompletionEstimate {
  font-size: 13px;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  border-radius: 3px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  overflow: hidden;
  padding: 0px 1px 0px 1px;
  /* transitions should be made context-specific *
   	/*
  transition: transform 0.2s ease-out;
  transform-origin:left;
  */
  box-shadow: rgba(0, 0, 0, 0.05) 1px 2px 10px 1px;
  border-radius: 5px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  border: solid 1px rgb(61.0470385045%, 38.0345423143%, 0.6392360053%);
  background: linear-gradient(to bottom right, #bf7702 0%, rgb(88.7568830641%, 55.298791019%, 0.9293914457%) 100%);
  cursor: default;
  color: #000000;
  filter: alpha(opacity=50);
  -moz-opacity: 0.5;
  opacity: 0.5;
  z-index: 14;
}

.ganttTaskBarPositiveVariance {
  font-size: 13px;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  border-radius: 3px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  overflow: hidden;
  padding: 0px 1px 0px 1px;
  /* transitions should be made context-specific *
   	/*
  transition: transform 0.2s ease-out;
  transform-origin:left;
  */
  box-shadow: rgba(0, 0, 0, 0.05) 1px 2px 10px 1px;
  border-radius: 5px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  border: solid 1px rgb(9.8663848773%, 41.6238112011%, 12.9496301515%);
  background: linear-gradient(to bottom right, #20872A 0%, rgb(15.2316543384%, 64.25854174%, 19.9915463191%) 100%);
  cursor: default;
  color: #ffffff; /* #000000; */
  z-index: 14;
  filter: alpha(opacity=85);
  -moz-opacity: 0.85;
  opacity: 0.85;
}

.ganttTaskBarNegativeVariance {
  font-size: 13px;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  border-radius: 3px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  overflow: hidden;
  padding: 0px 1px 0px 1px;
  /* transitions should be made context-specific *
   	/*
  transition: transform 0.2s ease-out;
  transform-origin:left;
  */
  box-shadow: rgba(0, 0, 0, 0.05) 1px 2px 10px 1px;
  border-radius: 5px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  border: solid 1px rgb(70.3137254902%, 17.6601915185%, 0%);
  background: linear-gradient(to bottom right, #d73600 0%, rgb(98.3137254902%, 24.692749658%, 0%) 100%);
  cursor: default;
  color: #ffffff; /* #000000; */
  z-index: 14;
  filter: alpha(opacity=85);
  -moz-opacity: 0.85;
  opacity: 0.85;
}

.baselineTask {
  font-size: 13px;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  border-radius: 3px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  overflow: hidden;
  padding: 0px 1px 0px 1px;
  /* transitions should be made context-specific *
   	/*
  transition: transform 0.2s ease-out;
  transform-origin:left;
  */
  box-shadow: rgba(0, 0, 0, 0.05) 1px 2px 10px 1px;
  border-radius: 5px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  filter: alpha(opacity=40);
  -moz-opacity: 0.4;
  opacity: 0.4;
  color: #ffffff;
  z-index: 5;
  border: solid 1px rgb(73%, 73%, 73%);
  background: linear-gradient(to bottom right, #cccccc 0%, rgb(94%, 94%, 94%) 100%);
}

.baselineTaskCompleted {
  font-size: 13px;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  border-radius: 3px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  overflow: hidden;
  padding: 0px 1px 0px 1px;
  /* transitions should be made context-specific *
   	/*
  transition: transform 0.2s ease-out;
  transform-origin:left;
  */
  box-shadow: rgba(0, 0, 0, 0.05) 1px 2px 10px 1px;
  border-radius: 5px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  filter: alpha(opacity=40);
  -moz-opacity: 0.4;
  opacity: 0.4;
  color: #ffffff;
  padding: 0px;
  z-index: 6;
  border: solid 1px rgb(22.248758731%, 43.5013043844%, 55.1237902886%);
  background: linear-gradient(to bottom right, #4383a6 0%, rgb(42.5572666835%, 64.7038626609%, 76.8152823361%) 100%);
}

.ganttDraggedSummaryTaskBar {
  background-color: #999999;
  z-index: 12;
  overflow: hidden;
  vertical-align: center;
  border: none;
  margin: none;
  text-align: left;
  color: #2f2f37;
  /*	
  height:20px;
  */
}

.summaryTask {
  font-size: 13px;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  border-radius: 3px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  overflow: hidden;
  padding: 0px 1px 0px 1px;
  /* transitions should be made context-specific *
   	/*
  transition: transform 0.2s ease-out;
  transform-origin:left;
  */
  box-shadow: rgba(0, 0, 0, 0.05) 1px 2px 10px 1px;
  border-radius: 0px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  background: #999999;
  border: none;
  z-index: 12;
  cursor: pointer;
}

.summaryTaskCompleted {
  font-size: 13px;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  border-radius: 3px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  overflow: hidden;
  padding: 0px 1px 0px 1px;
  /* transitions should be made context-specific *
   	/*
  transition: transform 0.2s ease-out;
  transform-origin:left;
  */
  box-shadow: rgba(0, 0, 0, 0.05) 1px 2px 10px 1px;
  border-radius: 0px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  color: #ffffff;
  background: #2f2f37;
  border: none;
  z-index: 13;
  cursor: pointer;
}

.criticalPathTask {
  background: linear-gradient(to bottom right, #d73600, rgb(98.3137254902%, 24.692749658%, 0%)) !important;
  border-color: rgb(70.3137254902%, 17.6601915185%, 0%) !important;
}

.criticalPathTaskCompleted {
  background: linear-gradient(to bottom right, rgb(56.3137254902%, 14.1439124487%, 0%), rgb(70.3137254902%, 17.6601915185%, 0%)) !important;
  border-color: rgb(70.3137254902%, 17.6601915185%, 0%) !important;
}

.ganttHeader {
  border-width: 0px 0px 1px 0px;
  border-style: solid;
  border-color: #999999;
  background: #dddedd;
  /* 
  background : #cccccc;
  */
  /*z-index:18;*/
}

.ganttHeaderLeftOverlap {
  background-color: #ededed;
  border-style: solid;
  border-width: 0px 1px 0px 0px;
  border-color: #cccccc;
  overflow: hidden;
  z-index: 20;
}

/*ganttHeaderContent*/
.gHC {
  border-color: rgba(0, 0, 0, 0.14);
  color: #2f2f37;
  background-color: transparent;
  border-style: solid;
  border-width: 0px 0px 1px 1px;
  font-size: 13px;
  font-weight: bold;
  z-index: 19;
  text-align: center;
  overflow: hidden;
  padding: 7px 0px 0px 0px;
}

/*ganttHeaderContentSmall*/
.gHCS {
  border-color: rgba(0, 0, 0, 0.14);
  color: rgba(47, 47, 55, 0.6);
  background-color: transparent;
  border-style: solid;
  border-width: 0px 0px 1px 1px;
  font-size: 12px;
  z-index: 19;
  text-align: center;
  overflow: hidden;
  padding: 7px 0px 0px 0px;
}

.portfolioGanttStripe {
  background-color: transparent;
  border-style: solid;
  border-width: 0px 0px 0px 1px;
  border-color: #e0e0e0;
}

.portfolioGanttStripeToday {
  background-color: transparent;
  border-style: solid;
  border-width: 0px 0px 0px 1px;
  border-color: #ffead6;
}

/*ganttWorkdayStripe*/
.gWS {
  background: transparent;
  border-style: solid;
  border-width: 0px 1px 0px 0px;
  border-color: #e0e0e0;
}

/*ganttWorkdayStripeNoBorder*/
.gWSNB {
  background-color: transparent;
  border-style: solid;
  border-width: 0px 0px 0px 0px;
  border-color: #e0e0e0;
}

.ganttHolidayStripe {
  border-style: solid;
  border-width: 0px 1px 0px 0px;
  background-color: #f0f0f0;
  border-color: #e0e0e0;
}

.ganttHolidayStripeNoBorder {
  border-style: solid;
  border-width: 0px 0px 0px 0px;
  background-color: #f0f0f0;
  border-color: #e0e0e0;
}

.ganttTodayStripe {
  background-color: #ffead6;
  border-style: solid;
  border-width: 0px 1px 0px 1px;
  border-color: #e0e0e0;
}

.ganttFreezeStripe {
  background-color: #FCA790;
  border-style: solid;
  border-width: 0px 1px 0px 1px;
  border-color: #e0e0e0;
}

.ganttCapitalizationStripe {
  /* rgba(210, 178, 110, 0.1) */
  /*
  background-color: rgba(255, 202, 138, 0.3);
  background-color: rgba(210, 178, 110, 0.15);
  */
  background-color: rgba(210, 178, 110, 0.15);
  border: none;
}

.unreachedMilestoneMarker {
  background-color: #aaaaaa;
  color: #aaaaaa;
  border-color: #aaaaaa;
  border-style: solid;
  border-width: 0px;
  z-index: 14;
}

.reachedMilestoneMarker {
  background-color: #333333;
  color: #333333;
  border-color: #333333;
  border-style: solid;
  border-width: 0px;
  z-index: 14;
}

.criticalPathMilestoneMarker {
  /*
  	background-color: #cc3300; 
  color: #cc3300;
  border-color: #cc3300;
  */
  background-color: #ea3c00;
  color: #ea3c00;
  border-color: #ea3c00;
  border-style: solid;
  border-width: 0px;
  z-index: 14;
}

.taskBarShadow {
  /*
  -moz-box-shadow: 0px 0px 10px #EA3C00;
  -webkit-box-shadow: 0px 0px 10px #EA3C00;
  box-shadow: 0px 0px 10px #EA3C00;
  */
  -moz-box-shadow: 0px 0px 10px #d73600;
  -webkit-box-shadow: 0px 0px 10px #d73600;
  box-shadow: 0px 0px 10px #d73600;
}

.ganttDraggedTaskBar {
  font-size: 11px;
  font-weight: normal;
  color: #2f2f37;
  z-index: 12;
  overflow: hidden;
  vertical-align: center;
  border-radius: 3px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  border: solid 1px rgb(73%, 73%, 73%);
  background: linear-gradient(to bottom right, #cccccc 0%, rgb(94%, 94%, 94%) 100%);
}

.ganttTaskSelector {
  background-color: rgb(90, 160, 190); /* //  #21759b; // #DEECF2 without transparency */
  border-width: 0px;
  /*
  border-style: solid;
  border-color: #cccccc;
  z-index:17;

  z-index:11;
  */
  z-index: 3;
  filter: alpha(opacity=20);
  -moz-opacity: 0.2;
  opacity: 0.2;
}

.ganttTaskName {
  background-color: transparent;
  border-width: 0px;
  font-size: 13px;
  font-weight: normal;
  color: #000000;
  padding: 0px 4px 0px 4px;
  z-index: 16;
  cursor: pointer;
}

.ganttTaskName:hover {
  text-decoration: underline;
  color: #21759b;
}

.ganttTaskBarResources {
  background-color: transparent;
  border-width: 0px;
  font-size: 13px;
  font-weight: normal;
  color: rgba(0, 0, 0, 0.65);
  /*
  z-index:12;
  */
  z-index: 4;
  text-align: right;
  overflow: hidden;
  padding-right: 10px;
}

.ganttDependencyLine {
  box-shadow: rgba(0, 0, 0, 0.05) 1px 2px 10px 1px;
  border: none;
  z-index: 14;
  background-color: #999999;
  color: #999999;
}

.criticalPathDependency {
  box-shadow: rgba(0, 0, 0, 0.05) 1px 2px 10px 1px;
  border: none;
  z-index: 14;
  background-color: #d73600;
  color: #d73600;
}

.ganttDependencyLag {
  background-color: transparent;
  border-width: 0px;
  font-size: 12px;
  font-style: italic;
  font-weight: normal;
  color: rgba(0, 0, 0, 0.65);
  z-index: 12;
  text-align: left;
  overflow: hidden;
  cursor: default;
  transition: font-weight 0.1s linear;
  transition: color 0.1s linear;
}

.ganttExternalDependency {
  box-shadow: rgba(0, 0, 0, 0.05) 1px 2px 10px 1px;
  border: none;
  z-index: 16;
  background-color: #205a77; /* #3b3b44; */ /* #00e700;*/
  color: #205a77; /* #00e700;*/
}

.ganttExternalDependencyViolated {
  box-shadow: rgba(0, 0, 0, 0.05) 1px 2px 10px 1px;
  border: none;
  z-index: 16;
  background-color: #d54e21;
  color: #d54e21;
}

.ganttExternalDependencyIcon {
  box-shadow: rgba(0, 0, 0, 0.05) 1px 2px 10px 1px;
  border: none;
  z-index: 16;
  color: #205a77;
  font-size: 15px;
}

.ganttExternalDependencyViolatedIcon {
  box-shadow: rgba(0, 0, 0, 0.05) 1px 2px 10px 1px;
  border: none;
  z-index: 16;
  color: #d73600;
  font-size: 15px;
}

.allocationBarAllocated {
  background: linear-gradient(to bottom, #5ae05a 0%, #368636 100%) !important;
  border-color: #368636 !important;
}

.allocationBarRequested {
  background: linear-gradient(to bottom, #ffe066 0%, #99863d 100%) !important;
  border-color: #99863d !important;
}

.allocationBarAlternateDisplay {
  border-color: #bbbbbb !important;
  background: rgba(204, 204, 204, 0.5) !important;
}

.barEditable {
  cursor: pointer;
}

.barNotEditable {
  opacity: 0.35;
  cursor: default;
}

.allocationBarOffFilterAllocated {
  background: linear-gradient(to bottom, #5ae05a 0%, #368636 100%) !important;
  border-color: #368636;
  opacity: 0.5;
  border: none;
  /*
  background: linear-gradient(to bottom, #5ae05a 0%, #368636 100%) !important;
  */
  /*
  opacity: 0.75;
  */
  /*
  background: repeating-linear-gradient(
    -45deg,
    #368636,
    #368636 5px,
    #5ae05a 5px,
    #5ae05a 10px
  */
  /*
  background: linear-gradient(to bottom, #9fe09f 0%, #608660 100%) !important;

  background: repeating-linear-gradient(
    -45deg,
    #368636,
    #368636 5px,
    #5ae05a 5px,
    #5ae05a 10px
  );
  */
}

.allocationBarOffFilterRequested {
  background: linear-gradient(to bottom, #ffe066 0%, #99863d 100%) !important;
  border-color: #99863d;
  opacity: 0.5;
  border: none;
  /*
  background: repeating-linear-gradient(
    -45deg,
    rgba(153, 134, 61, 0.5),
    rgba(153, 134, 61, 0.5) 5px,
    #ffe066 5px,
    #ffe066 10px
  );
  */
}

.appSubtitle {
  position: relative;
  padding-bottom: 2px;
  font-family: Inter, Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 16px;
  line-height: 1.3em;
  letter-spacing: 0.04em;
  opacity: 0.35;
  /*
  text-transform: uppercase;
  */
  -webkit-transform: translateZ(0);
  --transition-duration-appearance: 1.5s;
  --transition-duration-position: 0.5s;
  --transition-function: ease-in; /* cubic-bezier(0.1,0.1,0.5,1); */
  transition: opacity var(--transition-duration-appearance) var(--transition-function), letter-spacing var(--transition-duration-appearance) var(--transition-function), color var(--transition-duration-appearance) var(--transition-function), left var(--transition-duration-position) var(--transition-function), right var(--transition-duration-position) var(--transition-function);
}

.appTitle {
  position: relative;
  padding-bottom: 0px;
  font-family: Inter, Arial, Helvetica, sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.3em;
  letter-spacing: 0.04em;
  /*
  opacity: 0.8;
  opacity: 0.6;
  */
  opacity: 0.7;
  /*
  text-transform: uppercase;
  */
  -webkit-transform: translateZ(0);
  --transition-duration-appearance: 1.5s;
  --transition-duration-position: 0.5s;
  --transition-function: ease-in; /* cubic-bezier(0.1,0.1,0.5,1); */
  transition: opacity var(--transition-duration-appearance) var(--transition-function), letter-spacing var(--transition-duration-appearance) var(--transition-function), color var(--transition-duration-appearance) var(--transition-function), left var(--transition-duration-position) var(--transition-function), right var(--transition-duration-position) var(--transition-function);
}

.bannerTitle {
  color: white;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.65);
}

.bannerBox {
  background: transparent;
  color: #ffffff;
  font-weight: bold;
  font-size: 34px;
  padding: 0px;
}

.bannerSlogan {
  letter-spacing: 0.01em;
  text-align: left;
  font-style: italic;
  color: #ffffff;
  font-weight: normal;
  font-size: 14px;
  line-height: 1.4em;
  max-width: 870px;
  display: inline-block;
}

.bannerSloganSmallPrint {
  text-align: left;
  font-style: italic;
  color: #868686;
  font-weight: normal;
  font-size: 11px;
  line-height: 1.4em;
}

.bannerContainer {
  width: 100%;
  background: transparent;
  padding: 0px;
  border-radius: 3px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  -moz-box-shadow: 1px 1px 10px #aaaaaa;
  -webkit-box-shadow: 1px 1px 10px #aaaaaa;
  box-shadow: 1px 1px 10px #aaaaaa;
  overflow: hidden;
}

.bannerTitle {
  letter-spacing: 0.01em;
  font-family: Inter, Arial, Helvetica, sans-serif;
  line-height: 1.25em;
  font-size: 22px;
  font-weight: 300;
  font-style: normal;
  color: #ffffff;
}

.bannerTitleBox {
  text-align: left;
  /*
  line-height:1.4em;
  */
  font-size: 22px;
  font-weight: normal;
  font-style: normal;
  color: #ffffff;
  padding: 15px 45px 15px 30px;
  display: inline-block;
  background: url("../image/transparent-bg-30pct.png") repeat scroll left top transparent;
  border-bottom-right-radius: 15px;
  border-top-right-radius: 15px;
  -webkit-border-bottom-right-radius: 15px;
  -webkit-border-top-right-radius: 15px;
  overflow: hidden;
}

.businessCaseMetricsFooter {
  font-size: 12px;
  font-weight: normal;
  text-align: left;
  text-overflow: ellipsis;
  overflow: hidden;
  padding: 0px;
  width: 100%;
  border: none;
  margin: none;
  vertical-align: top;
  color: #000000;
}

.contentBox {
  background-color: #ffffff;
  border: solid 1px #cccccc;
  margin: 0px 0px 1.3em 0px;
  padding: 0px;
  border-radius: 3px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  overflow: hidden;
  line-height: 1.3;
}

.bordersUpDown {
  border-top: solid 1px #cccccc;
  border-bottom: solid 1px #cccccc;
}

.tabHighlightIcon {
  padding-left: 10px;
  opacity: 30%;
}

.portfolioScenarioDetails {
  font-size: 11px;
  font-weight: normal;
  font-style: italic;
  color: #999999;
  text-align: right;
  overflow: hidden;
  vertical-align: middle;
}

.dropAreaOverlay {
  background: #EA3C00;
  filter: alpha(opacity=10);
  -moz-opacity: 0.1;
  opacity: 0.1;
  font-size: 18px;
  font-weight: normal;
  color: #ffffff;
  position: absolute;
  text-align: center;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  padding: 0px;
  overflow: hidden;
  z-index: 10501;
}

.previewFieldTitle {
  font-size: 13px;
  font-weight: normal;
  color: #666666;
  text-align: left;
}

.previewSectionTitle {
  font-size: 16px;
  font-weight: bold;
  color: #666666;
  text-align: left;
  width: 100%;
  border-style: solid;
  border-color: #999999;
  border-width: 0px 0px 1px 0px;
  padding: 0px 0px 3px 0px;
  margin: 0px 0px 3px 0px;
}

.previewFieldValue {
  font-size: 13px;
  font-weight: bold;
  color: #2f2f37;
  text-align: left;
}

a.previewFieldValue {
  text-decoration: none;
  border-bottom: dotted 1px #666666;
  font-size: 13px;
  font-weight: bold;
  color: #2f2f37;
  text-align: left;
}

a.previewFieldValue:hover {
  color: #D54E21;
  border-bottom: solid 1px #D54E21;
}

.previewText {
  font-size: 13px;
  font-weight: normal;
  color: #2f2f37;
  text-align: left;
}

.previewCell {
  padding: 3px;
  /* 
  padding: 3px 10px;
  */
}

.quickView {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: normal;
  color: #000000;
  line-height: 16px;
}

.quickView a {
  font-size: 13px;
  font-weight: normal;
  color: #000000;
  text-decoration: underline;
}

.quickView a:hover {
  color: #EA3C00;
}

.qvButtonsContainer {
  /*
  padding-left: 15px;
  */
  display: flex;
  flex-wrap: nowrap;
}

.workflowInteractionEntryBB {
  letter-spacing: 0.01em;
  padding-bottom: 0;
  margin-bottom: 0.25em;
}

.workflowInteractionEntry {
  letter-spacing: 0.01em;
  color: rgba(0, 0, 0, 0.4);
  border-radius: 3px;
  margin-bottom: 0.25em;
}

/* holds actor_response_text */
#form\.activityDetailsForm {
  padding: 0px;
  margin: -15px 0px 0px -15px;
}

.workflowDiagramToolbar {
  margin: 0px;
  padding: 0px 15px 0px 5px;
  width: 100%;
  overflow: hidden;
  border-style: solid;
  border-width: 0px 0px 1px 0px;
  border-color: rgba(0, 0, 0, 0.07);
  background-color: #e6e6e6;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  /*
  position: fixed;
  z-index: 2;
  */
}

#explodedContentDialogDiv #scorecardFormulaContent {
  width: calc(100vw - 32px - 120px);
  max-width: 1200px;
}

#explodedContentDialogDiv .scorecardFormulaToolbarButtonsContainer {
  display: none;
}

#lastSearchIconContainer {
  padding-top: 10px;
  text-align: right;
  padding-left: 15px;
}

div.globalSearchContainer {
  overflow: hidden;
  display: inline-block;
  width: 90%;
  max-width: 300px;
  color: #ededed;
  padding: 3px 0px 0px 7px;
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  border-radius: 64px;
  cursor: pointer;
  display: flex;
  flex-wrap: nowrap;
  vertical-align: middle;
  /*
  margin: -15px 0px -10px 0px;
  */
  /*
  opacity: 0.4;
  */
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  transition: opacity 1.5s ease-in-out;
  transition-delay: 0s;
}

div.pageHeaderContainer:hover div.globalSearchContainer {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  /*
  opacity: 1 !important;
  */
}

div.navSearchContainer {
  display: inline-block;
  vertical-align: iddle;
  color: #ededed;
  padding: 3px 0px 0px 7px;
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  border-radius: 64px;
  cursor: pointer;
  display: flex;
  flex-wrap: nowrap;
  vertical-align: middle;
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

div.pageHeaderContainer:hover div.navSearchContainer {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
}

.globalSearchResultsContainer {
  padding: 15px 0px 15px 15px;
  display: none;
  position: fixed;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0);
  background-position-x: 0%;
  background-position-y: 0%;
  background-repeat: repeat;
  background-attachment: fixed;
  background-size: auto;
  background-origin: padding-box;
  background-clip: border-box;
  background-image: linear-gradient(to bottom right, rgba(18, 18, 18, 0.95), rgba(17, 59, 85, 0.95)) !important;
}

.qaGlobalSearchResultsContainer {
  padding: 15px 0px 15px 15px;
  display: none;
  position: fixed;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0);
  background-position-x: 0%;
  background-position-y: 0%;
  background-repeat: repeat;
  background-attachment: fixed;
  background-size: auto;
  background-origin: padding-box;
  background-clip: border-box;
  background-image: linear-gradient(to bottom right, rgba(18, 18, 18, 0.95), rgba(148, 82, 0, 0.95)) !important;
}

.devGlobalSearchResultsContainer {
  padding: 15px 0px 15px 15px;
  display: none;
  position: fixed;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0);
  background-position-x: 0%;
  background-position-y: 0%;
  background-repeat: repeat;
  background-attachment: fixed;
  background-size: auto;
  background-origin: padding-box;
  background-clip: border-box;
  background-image: linear-gradient(to bottom right, rgba(18, 18, 18, 0.95), rgba(146, 144, 0, 0.95)) !important;
}

.indentedSearchResultEntry {
  padding-left: 15px;
}

.searchResultEntry {
  color: #ededed;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.25;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-bottom: 10px;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  border-radius: 3px;
  /*
  -webkit-border-radius: $propertyValue;
  */
}

.searchResultEntry a {
  cursor: pointer;
  color: #ededed;
}

/* 
.searchResultEntry > span
{
	font-size: $tasktwo-font-size-smaller;
    font-weight: normal;
    font-style: normal;
   	color: #999999;	
}
*/
.searchResultEntry:hover {
  background: rgba(0, 0, 0, 0.5);
  /*color: tomato;*/
}

.searchResultEntry:hover a {
  color: tomato;
}

.searchResultsTitle {
  color: #ededed;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.25;
  padding-top: 10px;
  padding-bottom: 10px;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding-left: 15px;
  background: rgba(18, 18, 18, 0.9);
}

.moreResultsLink {
  color: #2ca4db;
  text-decoration: none;
  font-size: 14px;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.moreResultsLink:hover {
  color: tomato;
  text-decoration: none;
}

.searchResultDescription {
  font-size: 12px;
  font-weight: normal;
  font-style: normal;
  color: #999999;
  padding-top: 3px;
}

.searchResultNote {
  font-size: 12px;
  font-weight: normal;
  font-style: normal;
  color: #999999;
  padding-top: 3px;
}

.searchMatch {
  border: none; /* 1px solid #cccccc; */
  border-radius: 3px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  overflow: hidden;
  color: #ff9a00;
}

#documentSearchResultsContainer .searchResultEntry {
  color: #21759b;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.25;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-bottom: 10px;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  border-radius: 3px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  overflow: hidden;
}

#documentSearchResultsContainer .searchResultEntry i {
  cursor: pointer;
  color: #21759b;
}

#documentSearchResultsContainer .searchResultEntry a {
  cursor: pointer;
  color: #21759b;
}

/* 
#documentSearchResultsContainer .searchResultEntry > span
{
	font-size: $tasktwo-font-size-smaller;
    font-weight: normal;
    font-style: normal;
   	color: #999999;	
}
*/
#documentSearchResultsContainer .searchResultEntry:hover {
  background: transparent !important;
  color: #D54E21;
}

#documentSearchResultsContainer .searchResultEntry:hover a {
  color: #D54E21;
}

#documentSearchResultsContainer .searchMatch {
  border: none; /* 1px solid #cccccc; */
  border-radius: 3px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  overflow: hidden;
  color: #21759b;
  background-color: #FFE3AC !important;
}

#documentSearchResultsContainer searchResultEntry:hover .searchMatch {
  border: none; /* 1px solid #cccccc; */
  border-radius: 3px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  overflow: hidden;
  color: #D54E21;
  background-color: #FFE3AC !important;
}

.timeReportFooterBar {
  border: none;
  margin: none;
  text-align: left;
  vertical-align: center;
  background-color: #cccccc;
  color: #ffffff;
  padding: 7px 10px;
  min-height: calc(1.3em + 7px + 7px);
  font-size: 12px;
  text-overflow: ellipsis;
  font-weight: normal;
  color: #2f2f37;
}

.timeReportFooterBar a {
  color: #21759b;
}

.timeReportFooterBar a:hover {
  color: #D54E21;
  border-bottom: solid 1px #D54E21;
}

.timeEntryContainer {
  line-height: 1.3;
}

.timeEntryContainer div.timeEntryProjectName {
  font-weight: bold;
  letter-spacing: 0.01em;
  user-select: text;
}

.timeEntryContainer div.timeEntryTaskName {
  letter-spacing: 0.01em;
  font-size: 12px;
  user-select: text;
  color: #999999;
  /*
  padding-top: 2px;
  */
}

.timeEntryContainer div.timeEntrySchedule {
  color: #999999;
  font-size: 10px;
  user-select: text;
}

.timeEntryContainer div.timeEntryAllocation {
  text-align: right;
  float: right;
  color: #999999;
  font-size: 12px;
  user-select: text;
}

.bbHeaderText {
  color: #121212;
}

/*
.bulletinBoardPanel:not([data-scroll='0'])
{
	border-top: 1px solid #cccccc;
}
*/
.kbViewer {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  cursor: default; /*important for ms edge */
  margin: 5px 15px 15px 15px;
  padding: 10px 0px 0px 0px;
  overflow-y: hidden;
  line-height: 1.3;
}

.kbViewer header {
  /*
  @include extra-spacing;
  font-size: $tasktwo-font-size-regular;
  font-size: $tasktwo-font-size-largeish;
  */
  font-family: Inter, Arial, Helvetica, sans-serif;
  color: #121212;
  font-size: 16px;
  font-style: normal;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: auto;
}

.kbViewer header:first-child {
  margin: 0.5em 0em 0.5em 0em;
}

.kbViewer header:not(:first-child) {
  margin: 2.5em 0em 0.5em 0em;
}

.kbViewer p {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  cursor: default; /*important for ms edge */
  border-radius: 3px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0.5em 0em 1em 0em;
}

.kbViewer pre {
  /*
  font-family: monospace;
  */
  display: block;
  white-space: pre-wrap;
  padding: 15px 15px;
  background-color: #ededed;
  color: #595959;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  cursor: default; /*important for ms edge */
  border-radius: 3px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0.5em 0em 1em 0em;
}

.errorTextInLoginPage {
  letter-spacing: 0.01em;
  color: #fdc047;
}

.errorTextInLoginPage a {
  color: #fdc047;
  text-decoration-line: underline;
}

[class^=icon-], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "ttlogo" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@-webkit-keyframes rotate {
  0% {
    /*
      	-webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    */
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 0;
  }
  50% {
    /*
      	-webkit-transform: rotate(180deg);
    transform: rotate(180deg);
      	*/
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    opacity: 1;
  }
  100% {
    /*
      	-webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    */
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 0;
  }
}
@keyframes rotate {
  0% {
    /*
    transform: rotate(0deg);
    */
    transform: scale(0.9);
    opacity: 0;
  }
  50% {
    /*
    transform: rotate(180deg);
    */
    transform: scale(1.1);
    opacity: 1;
  }
  100% {
    /*
    transform: rotate(360deg);
    */
    transform: scale(0.9);
    opacity: 0;
  }
}
@media screen {
  .reportHeadingSpacer {
    display: block;
    height: 80px;
  }
}
@media print {
  .reportHeadingSpacer {
    display: none;
  }
}
.gridFooterIcon {
  cursor: pointer;
  color: #121212;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /*
  @include font-smoothing;
  */
  transition: color 0.1s linear;
}

.gridFooterIcon:hover {
  color: #d54e21;
  /*
     color: #000000;
     */
}

.gridFooterInfoIcon {
  cursor: pointer;
  color: rgba(0, 0, 0, 0.15);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: color 0.1s linear;
}

.gridFooterInfoIcon:hover {
  color: #d54e21;
}

.annotatedCell {
  --annotatedCellIconSize: 14px;
  /*
  background: transparent url("../image/annotated-cell.gif") no-repeat right top;		
  */
  background: transparent url("/static/image/time-entry-note.svg") no-repeat right top;
  background-size: var(--annotatedCellIconSize) var(--annotatedCellIconSize);
  width: var(--annotatedCellIconSize);
  height: var(--annotatedCellIconSize);
  display: inline-block;
  float: right;
  cursor: pointer;
  border: none;
  padding: 0px;
  margin-top: 0px;
  margin-right: 0px;
}

.annotatedCell:hover {
  background: transparent url("/static/image/time-entry-note-hover.svg") no-repeat right top;
}

/* right aligned */
.annotatedCellRA {
  --annotatedCellIconSize: 14px;
  /*
  background: transparent url("../image/annotated-cell.gif") no-repeat right top;		
  */
  background: transparent url("/static/image/time-entry-note.svg") no-repeat left top;
  background-size: var(--annotatedCellIconSize) var(--annotatedCellIconSize);
  width: var(--annotatedCellIconSize);
  height: var(--annotatedCellIconSize);
  display: inline-block;
  float: left;
  cursor: pointer;
  border: none;
  padding: 0px;
  margin-top: 0px;
  margin-left: 10px;
}

.annotatedCellRA:hover {
  background: transparent url("/static/image/time-entry-note-hover.svg") no-repeat right top;
}

.bodyText {
  font-size: 13px;
  font-weight: normal;
  color: #000000;
}

.darkGrayBodyText {
  font-size: 13px;
  font-weight: normal;
  color: #666666;
  /* text-decoration : none; */
}

.pageFooterText {
  letter-spacing: 0.02em;
  font-size: 11px;
  font-weight: normal;
  color: #999999;
  text-decoration: none;
  margin: 0px;
  padding: 0px;
  line-height: normal;
  /*
  text-align: left;
  */
}

.copyrightText {
  font-size: 12px;
  font-weight: normal;
  color: #999999;
  text-decoration: none;
  margin: 0px;
  padding: 0px;
  line-height: normal;
}

.actorInteraction {
  /*
     margin: 0px 0px 3px 0px;
  padding : 0px;
  */
  font-size: 13px;
  font-weight: normal;
  color: #000000;
  text-decoration: none;
  line-height: normal;
}

.actorInteraction:hover {
  background-color: #ededed;
}

.footer_text {
  color: #999999;
  font-size: 13px;
  font-weight: normal;
  color: white;
  text-decoration: none;
}

.dragHandleIcon {
  margin-left: -2px;
  margin-right: 5px;
  color: #cccccc;
  cursor: grab;
}

.workflowDragHandleIcon {
  margin-left: 2px;
  color: #cccccc;
  cursor: grab;
}

.contentHeader {
  font-size: 20px;
  font-weight: bold;
  color: #999999;
  /*background-color:#FFB367;*/
  border-width: 0px;
  border-style: solid;
  /* border-color : #FF9900; */
  border-color: #FFA245;
  padding: 0px 0px 5px 0px;
  overflow: hidden;
  white-space: nowrap;
}

.contentSectionTitle {
  letter-spacing: 0.01em;
  padding-bottom: 3px;
  font-size: 15px;
  /*
  font-size: $tasktwo-font-size-large;
  */
  font-weight: bold;
  color: #121212;
  user-select: text;
  flex: 0 0 auto;
}

.contentSectionTitleSmaller {
  letter-spacing: 0.01em;
  text-decoration: none;
  padding-bottom: 3px;
  font-size: 13px;
  font-weight: bold;
  color: #121212;
  user-select: text;
  flex: 0 0 auto;
}

.waitMessage {
  font-size: 16px;
  font-weight: normal;
  color: #999999;
}

.headerUserName {
  font-size: 11px;
  font-weight: normal;
  font-style: italic;
  color: #cccccc;
  line-height: 16px;
}

.noteHeading {
  border-width: 0px 0px 1px 0px;
  border-style: solid;
  border-color: #999999;
  padding-bottom: 5px;
}

.noteAuthor {
  font-size: 13px;
  font-weight: bold;
  color: #121212;
  font-style: normal;
}

.noteTitle {
  font-size: 11px;
  font-weight: normal;
  font-style: normal;
  color: #999999;
}

.noteDate {
  font-size: 11px;
  font-style: normal;
  font-weight: normal;
  color: #999999;
}

.noteBody {
  font-size: 13px;
  font-weight: normal;
  color: #2f2f37;
  text-align: left;
  line-height: 18px;
}

.captchaNote {
  font-size: 11px;
  font-weight: normal;
  color: #999999;
  text-align: left;
  /*
  line-height:18px;	
  */
}

.noteInputField {
  border: 1px solid #808080;
  width: 100%;
  font-size: 13px;
  font-weight: normal;
  color: black;
  overflow-x: hidden;
  overflow-y: scroll;
}

.footnote {
  padding-bottom: 3px;
  font-size: 10px;
  font-weight: normal;
  color: #666666;
}

.errorMessage {
  letter-spacing: 0.01em;
  color: #ffffff;
  font-size: 14px;
  font-weight: normal;
  vertical-align: top;
  padding: 0px;
  line-height: 1.3;
}

.errorMessage .messageTitle {
  letter-spacing: 0.01em;
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
  vertical-align: top;
  line-height: 1.3;
  padding-bottom: 1.4em;
}

.errorMessage .messageFooter {
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  font-weight: normal;
  vertical-align: top;
  line-height: 1.3;
  /* padding-bottom: 1.3em; */
  padding-top: 0.3em;
}

.reportListParagraph {
  margin: 0px;
  border-width: 0px;
  padding-bottom: 10px;
  padding-right: 10px;
  padding-top: 0px;
  padding-left: 0px;
  font-size: 13px;
  font-weight: normal;
  color: #000000;
}

.baselineSummaryTask {
  filter: alpha(opacity=40);
  -moz-opacity: 0.4;
  opacity: 0.4;
  background: #999999;
  border: none;
  z-index: 5;
  overflow: hidden;
  cursor: auto;
}

.baselineSummaryTaskCompleted {
  /*
  filter:alpha(opacity=40);
  -moz-opacity:.40;
  opacity:.40;
  */
  color: #ffffff;
  background: #999999;
  font-size: 11px;
  font-weight: normal;
  border: none;
  z-index: 6;
  overflow: hidden;
  cursor: auto;
}

.summaryTimelineText {
  background: transparent;
  border: none;
  overflow: hidden;
  text-align: center;
  font-size: 13px;
  font-weight: normal;
  color: #ffffff;
  padding-top: 7px;
  cursor: pointer;
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  opacity: 1;
}

.summaryTimeline {
  /*
  background:url("../image/timeline-bg.png") repeat-x left top;
  */
  background: transparent;
  border: none;
  overflow: hidden;
  text-align: center;
  font-size: 13px;
  font-weight: normal;
  color: #ffffff;
  cursor: pointer;
  filter: alpha(opacity=85);
  -moz-opacity: 0.85;
  opacity: 0.85;
}

.summaryTimelineCompleted {
  background: #000000;
  border: none;
  overflow: hidden;
  text-align: center;
  font-size: 13px;
  font-weight: normal;
  color: #ffffff;
  cursor: pointer;
  filter: alpha(opacity=30);
  -moz-opacity: 0.3;
  opacity: 0.3;
}

.summaryTaskCompletionPercentage {
  color: rgba(0, 0, 0, 0.65);
  background: transparent;
  font-size: 11px;
  font-weight: normal;
  text-align: center;
  border: none;
  z-index: 13;
  cursor: default;
}

.dateRangeForDraggedTaskBar {
  background: transparent;
  border-style: none;
  font-size: 12px;
  font-weight: normal;
  color: #2f2f37;
  z-index: 13;
  overflow: visible;
  white-space: nowrap;
  text-align: center;
}

.negativeDataValue {
  font-size: 13px;
  font-weight: normal;
  color: #EA3C00;
}

.panelResizeButton {
  filter: alpha(opacity=70);
  -moz-opacity: 0.7;
  opacity: 0.7;
}

.ganttHorizontalSeparator {
  background-color: #f8f8f8;
  border-style: solid;
  border-width: 0px;
  border-color: #f8f8f8;
}

/*
.menuContainer
{
	background:#cccccc;

	padding:0px;
	width:100%;

	border-style: solid;
	border-color : #bbbbbb;


	border-bottom-right-radius : 3px;
	border-bottom-left-radius : 3px;

	-webkit-border-bottom-right-radius:3px;
	-webkit-border-bottom-left-radius:3px;

	overflow : hidden;

	-moz-box-shadow: 1px 1px 10px #d8d8d8;
	-webkit-box-shadow: 1px 1px 10px #d8d8d8;
	box-shadow: 1px 1px 10px #d8d8d8;
}
*/
.breadcrumbs {
  float: right;
  font-size: 13px;
  font-weight: normal;
  color: #999999;
  white-space: nobreak;
  padding-top: 2px;
}

.custGridFooter {
  font-weight: normal;
  font-size: 13px;
  color: #666666;
}

.dateRangeBar {
  /*background-color: #FFEAD6;*/
  /*background-color: hsla(60, 94%, 70%, 0.15);*/
  /*background: #FFECC8 !important;*/
  background-color: rgba(255, 202, 138, 0.3);
  border: none;
  position: absolute;
  overflow: hidden;
}

.resourceAvailabilityHrs {
  font-size: 11px;
  cursor: default;
  white-space: nowrap;
}

.resourceAvailabilityHrsDisabled {
  color: #999999;
  font-style: italic;
  font-size: 11px;
  cursor: default;
  white-space: nowrap;
}

.noDrag {
  user-drag: none;
  -webkit-user-drag: none;
}

.dragSource {
  cursor: grab;
}

.dragSource:hover {
  color: #D54E21;
}

.dragSourceDisabled {
  color: #999999;
  cursor: default;
  font-style: italic;
}

.dragSourceDynamic {
  display: none;
}

div.eF:hover .dragSourceDynamic {
  display: inline-block;
}

.quickViewLockMsg {
  display: inline-block;
  *display: inline; /*for IE */
  border: none;
  margin: none;
  line-height: 26px;
  white-space: nowrap;
  overflow: hidden;
  text-align: right;
  vertical-align: center;
  color: #EA3C00;
  padding: 0px 7px 0px 15px;
  font-size: 12px;
  font-weight: normal;
  font-style: italic;
}

.projectBarInSchedule {
  background-color: #e6e6e6;
  /*
  background-color: #e6e6e6;
  background-image: linear-gradient(to bottom right, #21759B,  #0485AD);
     background-size: auto;

     background:url("../image/schedule-bar.gif") repeat-x left top;
  */
  border: none;
  height: 5px;
  width: calc(100% + 20px);
  /*
  position:relative;
  left:-10px;
  */
  position: absolute;
  bottom: 0px;
  left: 0px;
}

.horizontalSlider {
  background: transparent;
  width: 100%;
  padding: 10px;
  border: 1px solid #cccccc;
  height: 24px;
  border-radius: 3px;
  /*
  -webkit-border-radius: $propertyValue;
  */
}

.sliderKnob {
  z-index: 2;
  position: relative;
  background: url("../image/slider-knob.png") no-repeat left top;
  width: 14px;
  height: 14px;
  cursor: pointer;
}

.notificationFrequency {
  color: #999999;
  font-style: italic;
  font-size: 11px;
  font-weight: normal;
}

.notificationTitle {
  font-weight: bold;
}

.notificationDescription {
  font-weight: normal;
  margin: 5px 0px;
}

.sparklineIcon {
  color: #cccccc;
  cursor: pointer;
  transition-property: font-size, color, background-color;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
  /*
  @include font-smoothing;
  */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.sparklineIcon:hover {
  color: #D54E21;
}

.sparklineFloatRight {
  float: right;
  margin-left: 15px;
}

.showOnHighlightedLine {
  display: none;
}

.hR .showOnHighlightedLine {
  display: inline;
}

.attachedWorkflowDocumentsHeader {
  font-size: 13px;
  font-weight: bold;
  padding: 6px;
  margin: 0px;
  border: none;
  color: #2f2f37;
  vertical-align: middle;
  height: 48px;
  background-color: #dddedd;
  border-bottom: 1px solid #bbbbbb;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.resourceCapacity {
  font-size: 10px;
  color: #999999;
}

.projectProposal {
  color: #999999;
  white-space: nowrap;
}

.projectDraft {
  color: #999999;
  font-style: italic;
  white-space: nowrap;
}

.rejectedProposal {
  text-decoration: line-through;
  color: #cccccc;
  white-space: nowrap;
}

.completedProject {
  color: #006600;
  white-space: nowrap;
}

.canceledProject {
  text-decoration: line-through;
  color: #990000;
  white-space: nowrap;
}

.modified-project, .selectorIcon.modified-project, .selectorIcon:hover.modified-project {
  color: #EA3C00; /* #d73600;*/
}

.dropzone {
  /*  border: dashed 3px #C1C3C5;
   cursor: pointer; */
}

.dropzone-drag-hover {
  /*
     border: solid 1px #EA3C00;
  @include border-radius(3px);
    */
  /*	
  -moz-box-shadow: 0px 0px 10px #EA3C00;
  -webkit-box-shadow: 0px 0px 10px #EA3C00;
  box-shadow: 0px 0px 10px #EA3C00;
  */
  /*
  filter:alpha(opacity=95);
  -moz-opacity:.95;
  opacity:.95;
  */
  /*
  filter: sepia(1);
  */
  cursor: s-resize;
  /*
  filter: blur(1.05px) brightness(75%);
  */
  filter: brightness(75%);
}

.dropzone-drag-hover:before {
  /*
     top: 50px;
     background: rgba(255, 255, 255, 0.59);
     color: rgba(255, 255, 255, 1);
  color: tomato;
  transform: translate(-50%, 0px);

   	content: "↓ drop";
      vertical-align: 50%;
      vertical-align: -50%;
     vertical-align: middle;
     content: url("/static/image/drop-file.svg");
   	content: "\2B07 drop";
   	content: "\2939 drop";
   		content: "\2935 drop file";
   		content: "\21e9  drop file";
   color: rgba(255, 255, 255, 1);
   top: 15px;
  padding-top: 15px;
  color: tomato;

  */
  content: "⤹ drop file";
  text-shadow: 1px 0px 1px #999999, 0px 1px 1px #cccccc, 2px 1px 1px #999999;
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
  font-size: 22px;
  font-weight: bold;
  position: absolute;
  top: 5px;
}

.uploadFilePlaceholder {
  color: #b1b3b7;
  font-size: 16px;
}

.mtxt, .mrtxt, .mgtxt {
  letter-spacing: 0.01em;
  font-size: 12px;
  font-weight: normal;
  font-style: normal;
}

.mgtxt {
  color: #999999;
}

.mrtxt {
  color: #EA3C00;
}

.stxt, .sgtxt, .slgtxt, .srtxt {
  letter-spacing: 0.01em;
  font-size: 11px;
  font-weight: normal;
  font-style: normal;
}

.mitxt, .migtxt {
  font-size: 12px;
  font-weight: normal;
  font-style: italic;
}

.migtxt {
  color: #999999;
}

.sitxt, .sirtxt, .sigtxt {
  font-size: 11px;
  font-weight: normal;
  font-style: italic;
}

.sigtxt {
  color: #999999;
}

.sirtxt {
  color: #EA3C00;
}

.dynPlaceholder {
  letter-spacing: 0.01em;
  font-size: 12px;
  font-weight: normal;
  font-style: italic;
  color: #aaaaaa;
}

.gtxt, .ngtxt {
  color: #999999;
}

.dgtxt {
  color: #666666;
}

.ngtxt {
  font-weight: normal;
}

.rtxt {
  color: #EA3C00;
}

.lgtxt {
  color: #cccccc;
}

/* TODO: measure/adjust */
.projectConditionBox {
  border: none;
  margin: -10px -10px 0px -10px;
  padding: 7px 10px 7px 10px;
  height: calc(100% + 20px) !important;
  -webkit-print-color-adjust: exact;
  overflow: hidden;
  width: calc(100% + 20px);
  background-image: url(../espressoresource/skin/expertwerk/lookup-pulldown.svg);
  background-repeat: no-repeat;
  background-position: right 3px top 3px;
  background-size: 16px 16px;
}

div.hR div.projectConditionBox {
  opacity: 65%;
}

div.hR div.cellBGBox {
  opacity: 65%;
}

.scheduleItemTarget {
  height: 100%;
  /*
  cursor : pointer;
  */
}

.scheduleItemTarget:empty::after {
  content: ".";
  visibility: hidden;
}

.lineNumberBB {
  font-weight: bold;
  font-size: 15px;
}

.titleBB {
  font-weight: bold;
  font-size: 15px;
}

.actionItemBB {
  border: 1px solid #d0d0d0;
  border-radius: 3px;
  /*
  -webkit-border-radius: $propertyValue;
  */
  overflow: hidden;
  padding: 15px;
  -webkit-print-color-adjust: exact;
  background-color: #ffffff;
}

.actionItemBBPastDue {
  border: none;
  padding: 16px;
  background-color: #d98880;
}

.actionItemBBCompleted {
  border: none;
  padding: 16px;
  background-color: #7dcea0;
}

.actionItemBBCanceled {
  border: none;
  padding: 16px;
  background-color: #808b96;
}

.sHC {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
}

.oschedule {
  display: inline-block;
  vertical-align: top;
}

.osday {
  display: inline-block;
  width: 30px;
  /*color: #eeeeee; */
}

/*  
[data-initials]:before 
{
  content:attr(data-initials);
  display:inline-block;
  font-size:1em;
  width:2.5em;
  height:2.5em;
  line-height:2.5em;
  text-align:center;

  @include border-radius(50%);

  background:#298CB9;
  vertical-align:middle;
  margin-right:1em;
  color:white;
  }

*/
.reqNumberMO {
  float: right;
  color: #2f2f37;
  font-size: 13px;
}