::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #888; }
::-webkit-scrollbar-thumb:hover { background: #555; }  
body { 
  font-family:RobotoDraft, Roboto, arial;
  font-size:10pt;
  padding:0px;
  margin:0px; 
}
td { vertical-align:top;padding-left:2px;  }
#numberfield { text-align:right; }

table.mainmenu { border-collapse: collapse;}
table.searchmenu tr td { padding:0px;line-height:1.8em; }
table.generalwarning tr { background-color:lime;border-radius: 5px;}
table.generalwarning tr td { padding:10px;font-size:12pt;color:black;}
.timestamp { 
  border-bottom:0.5px dashed gray;
  width:95px;font-size:8.5pt;padding-left:1px;padding-right:1px;
}

.iconpairedwithselect
{ padding:4px;padding-right:6px;background-color:silver;border-radius:0px 5px 5px 0px; }

td.guide_paragraph { /* User in the Installation guide */
  padding-left:12px; 
  border-left: 2px dashed black; 
  border-bottom: 0.5px solid lightgray;  
  padding-top: 1.2em;
}

#top-gradient {
  background-color: gray; /* For browsers that do not support gradients */
  background-image: linear-gradient(gray, #d6eefa);
  height:60px;
}
#contentcontainer { z-index: 5; }	
span.silver { color:silver;font-size:9pt; }
span.grey { color:grey;font-size:9pt; }
span.strikeout { text-decoration: line-through;color:red; }

#workitemcreatebox {
  position: fixed;
  top: 20%;
  left:10%;
  width:400px;
  padding:15px;
  background-color:white;
  border: 1px solid gray;
  border-radius: 10px 10px 10px 10px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
  display:none; 
}

#userdetailsbox {
  position: fixed;
  top: 30pt;
  right: 0pt;
  background-color:lightgray;
  border: 1px solid gray;
  border-right: 0px;
  border-radius: 30px 0px 0px 30px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
  padding:12px;
  display:none;	
}
#focusbox {
  position: fixed;
  top: 25pt;
  left:20pt;
  background-color:transparent;
  
  max-height: calc(100vh - 30px);
  overflow-y: auto;
}
#focusbox table { 
  border-radius: 30px 30px 30px 30px;
  background-color:lightgray; 
  padding:0px;
}
#stickyinfobox {
  position: fixed;
  top: 55pt;
  left:200pt;
  background-color:transparent;
  display:block;
}
#stickyinfobox table {
  border-radius: 15px 15px 15px 15px;
  background-color:lightgray; 
  padding:10px;
  border:0.5px solid black;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
}
input.linkdescription { 
  border:0px solid black;
  background-color:#d3d3d33b;
}
tr.canvasoncanvas { background-color:#d3d3d3A0; }
table.wbsExplosion tr td {
  font-size: 0.9em;
  border: 1px solid black;
  padding: 0px 8px 0px 8px;  
  border-radius: 8px 2px 8px 2px;
}
table.wbsExplosion tr td.clear {
  border: 0px solid black;
  font-size:1.125em;
}

/* #canvas-main-panel table.canvas tr.pagingNavigation td { text-align:right;border:0px;padding-bottom:5px; } */
#canvas-main-panel table.canvas tr.buttonbar td { border:0px; }
#canvas-main-panel table.canvas tr.infocus td{ background-color:white;border-radius:3pt;border:1px solid silver; }
#inactive { color:#777;font-style: italic; }
 
#canvas-main-panel table.canvas tr.columnheader td,
 #sidepanelcolumn td,
 #sidepanelvalue 
 { 
  border:1px solid black;
  background-color:white;
  border-radius:4px;
  padding:1px;
  padding-left:3px;
  font-size:10pt;
  text-align:center;
  font-weight: normal;
}
 #sidepanelcolumn td.inactive,
 #sidepanelvalue .inactive
  { background-color:silver; }

.tableFixHead          { overflow-y: auto; max-height:550px;border-top:1px solid black;border-bottom:1px solid black; } 
.tableFixHead thead th { position: sticky; top: 7px; } 

#canvas-main-panel table.canvas tr.subheader td { 
  border:1px solid black;
  background-image:linear-gradient(45deg, white, white, lightgrey, white);
  border-radius:4px;
  padding:2px;
  padding-left:8px;padding-bottom:0px;
  font-size:12pt;
}
#canvas-main-panel table.canvas tr.subheader td table.stripped tr td {
  background-image:none;
  padding:0px;
  border:0px;
}
#canvas-main-panel table.canvas tr td,
 #canvas-main-panel table.canvaspreset tr td { border-bottom:1px solid white; }

#canvas-main-panel table.canvas tr.clear td { border-bottom:0px; }
#canvas-main-panel table.canvas tr td.label { border-bottom:0px;text-align:right;color:gray; }

#canvas-main-panel table.canvaspreset { 
  background-color: white; 
  background: url(../src/img/canvas-preset-background.png) no-repeat center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  
  border-top:1px solid black;
  border-bottom:1px solid black;
  padding:3px;
  width:100%;
}
#canvas-main-panel table.canvaspersonal { 
  background-color: white; 
  background: url(../src/img/canvas-personal-background.jpg) no-repeat center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  
  border-top:2px solid black;
  border-bottom:2px solid black;
  padding:3px;
  width:100%;
}
table.canvasPopup { border-collapse: collapse; }
table.canvasPopup tr { background-color:#f1f1f1; }
table.canvasPopup tr #topsection { border-top:0px; }
table.canvasPopup tr #bottomsection { border-bottom:0px; }
table.canvasPopup tr.buttonbar { background-color:transparent; }

table.timeentrycanvas { border-collapse: collapse; }
table.timeentrycanvas tr td { padding:3px 6px 3px 6px; }

ul.accessvaultUL { padding-left:5px; }
ul.accessvaultUL li { min-height:42px;list-style:none; }
ul.taskboardUL { padding-left:15px;margin-block-start: 0em;margin-block-end: 0em; }
ul.taskboardUL li { min-height:100px;list-style:none; }
ul.tasklistUL { padding-left:12px; }
ul.tasklistUL li { list-style:none; }
ul.tasklistTaskUL {  }
ul.tasklistTaskUL li { list-style:none; }
ul.planboardUL { padding-left:0px;margin-block-start: 0em;margin-block-end: 0em; }
ul.planboardUL li { list-style:none; }
ul.planboardUL li.task { min-height:12px;list-style:none; }
ul.workitemLinksUL { padding-left:0px;margin-block-start: 0em;margin-block-end: 0em; }
ul.workitemLinksUL li { min-height:40px;list-style:none; }
ul.workitemTasksUL { padding-left:0px;margin-block-start: 0em;margin-block-end: 0em; }
ul.workitemTasksUL li { min-height:20px;list-style:none; }

ul.articlesectionUL { padding-left:2px;margin-block-start: 0em;margin-block-end: 0em;  }
ul.articlesectionUL li { min-height:40px;list-style:none; }
ul.articlerowsUL { padding-left:2px;margin-block-start: 0em;margin-block-end: 0em;  }
ul.articlerowsUL li { min-height:40px;list-style:none; }
ul.articlerowscolsUL { padding-left:2px;margin-block-start: 0em;margin-block-end: 0em;  }
ul.articlerowscolsUL li { min-height:40px;list-style:none;display: inline-block} 

.artcell { border:1px solid black;background-color:#e6e6e6;border-radius: 6px 0px 0px 0px;min-width:30px;opacity:0.70; }
.artvertical { writing-mode: vertical-rl;text-orientation: mixed; }

ul.notepadUL { padding-inline-start: 0px }
ul.notepadUL li { list-style:none; }
ul.notepadULmany { padding-inline-start: 0px }
ul.notepadULmany li { list-style:none;display:inline-block; }
div.notes table { 
  padding-left:0px;
  border-collapse:collapse;
}
div.notes ul.notepadUL table tr td { 
  padding:8px;
  border-radius:0px 13px 13px 0px; 
  background-color:rgba(250, 250, 250, 0.40);
}
div.notes ul.notepadULmany table tr td { 
  padding:8px;
  border-radius:10px; 
  background-color:rgba(250, 250, 250, 0.40);
}
div.statusBar { border:0.5px solid grey; }

td.icon-pair-left { padding:0px;width:40px; }
td.icon-pair-left i.fa { padding: 8px 16px 8px 16px; padding-right:2px;
  border:0.5px solid black; 
  border-radius: 14px 5px 5px 14px; }
td.icon-pair-right { padding:0px;width:40px; }
td.icon-pair-right i.fa { padding: 8px 16px 8px 16px; padding-left:2px;
  border:0.5px solid black; 
  border-radius: 5px 14px 14px 5px; }

#canvas-main-panel table.canvasForm tr td.label,
  td.label { border-bottom:0px;text-align:right;color:gray;}
#canvas-main-panel table.canvasform tr.playerlist td { text-align:center; }
#testnumber { font-size:22pt;text-align:center;color:white;background-color:black;opacity:0.5;width:30px;border:1px solid gray;border-radius:7px;}
#canvas-wiheader { height:75px;background-color:#FFFFFFAA;width:100%;position:fixed;top:0px;z-index:900 }
#canvas-wiheader-narrow { height:43px;width:100%;position:fixed;top:0px;z-index:900 }

#demoHeader li { list-style-type:none; float:left; }
#demoHeader li table { margin:2px;width:34em; }
#demoTiles li { list-style-type:none; float:left; }
#demoTiles li table { margin:22px;border:0.5px solid black;border-spacing:0px;width:26em;height:30em; }
#demoTiles li table tr td h2 { font-size:20pt;line-height:1.2; }
#demoTileSummary { padding-left:2px; }
#demoTileSummary li { list-style-type:circle;float:none; }

i.planboardFlags {padding-left:3px;padding-right:3px;filter:opacity(60%)}
i.planboardFlagsACTIVE {padding-left:3px;padding-right:3px;rotate:25deg;}

@media (min-width:900px){ .titlebarheight { height:75px; } }
@media (max-width:899px){ .titlebarheight { height:43px; } }

h2.demo { background-color:tomato;color:white;width:100%;padding:5px;text-align:center; }
h2.pagetitle { font-weight:bolder; } 

ul li { list-style-type: circle; }
ul li a { font-size:12pt;text-decoration:none;color:black; }
ul li a:hover { color:purple; }
	
ul.linkgroupUL li { list-style-type:none;max-width:900px; }
ul.linktileUL li { list-style-type:none;display:inline-block;margin:5px; } 
	
ul.wbssearchresults li { list-style-type:none;display:inline-block;margin:5px;vertical-align:top; } 
ul.wbssearchresults li div.outline { 
  margin:2px;padding:1rem;width:300px;border:0.5px solid gray;
  background-color:white;border-radius:3px; 
} 

ol li a { font-size:12pt;text-decoration:none;color:black; }
ol li a:hover { color:purple; }

code { padding-left:5px;padding-right:5px; } 

select {
/*  display:block; */
  overflow-y: auto;	
}
form.controlparams select { width:100px; } 
input[type="checkbox"][readonly] { pointer-events: none; } /* To cater for readonly on checkboxes, doesn't work though */

div.calendar table.cal { 
  background-color:transparent;
}  
div.calendar table.cal tr td.title { 
  background-color:white;
  border-bottom:3px solid black;
  color:black;
  font-size:12pt;
  text-align:left; 
  padding: 4px;
  border-radius:4px;
}
div.calendar table.cal tr td.header {font-size:14pt;text-align:center;}
div.calendar table.cal tr td { vertical-align:top;color:black;padding:4px; }
div.calendar table.cal tr td span.daynr { font-size:15px;color:white;background-color:#606060;padding-right:3px; }
div.calendar table.cal tr td.caldaypassee { 
  background-color:#e6cde6; border-bottom-right-radius: 18px;
  -moz-box-shadow:    inset 0 0 8px #000000;
  -webkit-box-shadow: inset 0 0 8px #000000;
  box-shadow:         inset 0 0 8px #000000;
  border:0px solid white; 
  padding-left:8px;
}    
div.calendar table.cal tr td.calday { 
  background-color: white; border-bottom-right-radius: 18px;
  -moz-box-shadow:    inset 0 0 8px #000000;
  -webkit-box-shadow: inset 0 0 8px #000000;
  box-shadow:         inset 0 0 8px #000000;
  border:0px solid white; 
  padding-left:8px;
}
div.calendar table.cal tr td.weekend, div.calendar table.cal tr td.weekendpassee { 
  background-color: transparent; border-bottom-right-radius: 18px;
  -moz-box-shadow:    inset 0 0 8px #000000;
  -webkit-box-shadow: inset 0 0 8px #000000;
  box-shadow:         inset 0 0 8px #000000;
  border:0px solid white; 
  padding-left:8px;
}  
div.calendar table.cal tr td select, div.calendar table.cal tr td span { 
  font-size:8pt;
  border:0px;
  -webkit-appearance: none; 
  appearance: none;
  padding:1px;
  background-color:#efefef;
  border-bottom:1px solid grey;
  border-right:1px solid lightgray; 
}
div.calendar table.cal tr td.caldaynow, div.calendar table.cal tr td.weekendnow { 
  background-color:#7ac9e1;
  border-bottom-right-radius: 18px;
  -moz-box-shadow:    inset 0 0 8px #000000;
  -webkit-box-shadow: inset 0 0 8px #000000;
  box-shadow:         inset 0 0 8px #000000;
  border:0px solid white; 
  padding-left:3px;
}  
div.calendar table.cal tr td span.psummary { font-size:10pt; }
div.calendar table.cal tr td p.totalhours { font-size:14pt;text-align:center; }

/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
/*  border-bottom: 1px dotted black;  If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 180px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -40px;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

.embossedtext {
  color:lightgray;
  font-size:3.5em;
  text-shadow: 
    1px 1px 0 black, 
    1px -1px 0 black, 
    -1px 1px 0 black, 
    -1px -1px 0 black;
}
/* Tooltip arrow */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 20%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
section.no_results { 
  background-color: rgba(230, 230, 230, 0.7);
  margin: 5% 10% 10% 10%;
  padding:20px;
}

.address_box {
  border-bottom: 0.5px solid gray;
  border-radius: 10px;
  padding: 5px;
  opacity: 0.65;
  background-color: lightgray;
  border-top: 0.5px solid gray;
}

td.deadcell { background-color:rgba(0, 0, 0, 0.2);border-radius:3px 3px 3px 3px;  }
#sidemenu { background-color:transparent; }
#sidemenu table.canvas { background-color:rgba(230, 230, 230, 0.9) }

#att {
  border:0.5px solid #555; 
  border-radius:0px 0px 6px 0px;
  width:17px;height:10px; 
  text-align:left; 
} 
/*  #att.td { padding:20px; }*/
#att.gradient { 
  background-color:transparent;
  background-image: linear-gradient(to right, #7ac9e1, transparent); 
  font-size:12pt;
}
#att span { font-size:8pt; }
#attOff {
  border:0.5px solid #555; 
  border-radius:0px 0px 6px 0px; 
  width:17px;height:10px;  
  text-align:left;  
  background-color:transparent; 
}     
#att.weekend, #attOff.weekend { border: 0.5px solid #aaa } 
#attDead { width:17px; }
#attFTE { width:17px;border:0.5px solid silver;color:grey;border-radius:0px 0px 6px 0px;font-size:6pt; }
/* #attendanceEditor td input[type=number] { width:45px; } */
#attendanceEditor td { vertical-align:bottom; }
#attendanceHdr { background-color:white; }
#attendanceHdr td { text-align:center; }
table.dragAtype { background-color:transparent; }
table.dragAtype tr td { padding:2px;border-radius:4px 4px 4px 4px;border:0.5px solid black; }

table.stickies tr td { 
  padding:5px;
  border:0.5px solid black;
  border-radius:3px 3px 3px 3px; 
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
}

table.riskmatrix { border-spacing: 8px; }  
table.riskmatrix tr td {border-radius:10px;text-align:center;border:1px solid white;padding:2px;}  
table.riskmatrix tr td.label { border:0px solid white; }  
table.riskmatrix tr {line-height:40px;}  
table.riskmatrix tr td.low { background-color:#58c958;}  
table.riskmatrix tr td.lowmed { background-color:lightgreen;}  
table.riskmatrix tr td.medium { background-color:#c5fcc5}  
table.riskmatrix tr td.highmed { background-color:#eea954;}  
table.riskmatrix tr td.high { background-color:#ff8989;}  
		
div.colorBar { 
  width:18px;height:18px;
  border:0.5px solid black; 
  border-radius:3px 3px 3px 3px;
}
.tabulator-header {
  padding:0px;
  border-top:0.5px solid black;
  border-bottom:0.5px solid black;
  white-space:nowrap;
}
#watermark {
  position: fixed;
  bottom: 5px;
  left: 5px;
  z-index:-1;
  opacity: 0.15;
  width:400px;
  height:400px;
  display:none; /* By default, the watermark is disabled, theme css settings can enable */
  background: url(img/button_search.webp); 
  background-repeat: no-repeat;
  background-size: contain; 
}	
#projectfilterselector select {
  padding:4px 8px 4px 8px;
  border:1px solid black;
  border-radius: 10px 10px 10px 10px;
  background-color:rgba(245,245,245,0.99);
} 	
#searchboxtrigger {
  position: fixed;
  bottom: -30px;
  left: 6%;
  z-index:21;
  opacity: 0.55;
  padding:4px 8px 4px 8px;
}  
#searchbox {
  position: absolute; 
  top: 4%;
  left: 4%;
  min-width:400px;
  max-height:90%; 
  z-index:3;
  background-color:rgba(255,255,255,0.99);
  padding:4px 8px 0px 8px;
  border:0.5px solid black;
  border-radius: 10px 10px 10px 10px;
  display:none;
} 

#searchresults {
  background-color:rgba(245,245,245,0.99);
  border-radius: 10px 1px 1px 10px;
  border:2px solid black;
  padding:10px;
  overflow-y: scroll; 
  max-height:60vh;
}
#stickydeleter {
  position: fixed;
  bottom: 0px;
  right: 10%;
  font-size:15px;
  z-index:21;
  background-color:rgba(255,255,255,0.95);
  padding:5px 12px 5px 12px;
  border: 0.5px solid black;
  border-radius: 10px 10px 0px 0px;
  -webkit-box-shadow: 26px 21px 6px 0px rgba(0,0,0,0.6);
  -moz-box-shadow: 26px 21px 6px 0px rgba(0,0,0,0.6);
  box-shadow: 3px 2px 3px 0px rgba(0,0,0,0.6);
}

div.fieldcanvas {
  height: 80px;
  width:450px;
  border:0.5px solid black;
 }	 

#helpboxtrigger {
  position: fixed;
  bottom: -30px;
  right: 2%;
  z-index:21;
  opacity: 0.55;
  padding:4px 8px 4px 8px;
}
div.rotated{
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
#wiSideDiv table {
  border-collapse:collapse;
  min-width:180px;
  max-width:180px;
}	
#wiside td.title { 
  text-align:left;
  font-size:10pt;
  border-top:1px solid white;
  padding-top:4px;
  padding-right:4px; 
}
#wiside td { 
  background-color:rgb(210,210,200,0.15);
  color:grey;
  font-size:9pt;
  text-align:right;
  padding-right:4px; 
}
#wiside td:hover { 
  background-color:rgb(210,210,200,0.75);
}
#wiside td h3 { color:black; } 
#boxed { 
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
}
.timebox {
  vertical-align: top;
  border: 1px solid gray;
  border-radius:15px;
  background-color:black;
  color:white;
  padding:0px 3px 0px 3px;  
}	
.timebox span.blind { color:black; }

.editorcanvas { 
  background-color:white;
  border:0.5px solid black;
  padding:10px; 
  width:65vw;
}
div.rotatedLabel{
  -moz-transform: rotate(350deg);
  -ms-transform: rotate(350deg);
  -o-transform: rotate(350deg);
  -webkit-transform: rotate(350deg);
  transform: rotate(350deg);

  position:fixed;bottom:35px;left:-4px;
}
div.rotatedLabel2{
  -moz-transform: rotate(350deg);
  -ms-transform: rotate(350deg);
  -o-transform: rotate(350deg);
  -webkit-transform: rotate(350deg);
  transform: rotate(350deg);

  position:fixed;bottom:70px;left:-4px;

}
#sidelabel {
  border:1px solid black;
  background-color:rgb(255,255,255,0.9);
  font-family:tahoma;
  font-size:12pt;
  border-radius: 6px 6px 6px 6px; 
  padding:0px;

  -webkit-box-shadow: 10px 10px 20px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 10px 10px 20px 0px rgba(0,0,0,0.75);
  box-shadow: 10px 10px 20px 0px rgba(0,0,0,0.45);  
  
}

/* The Modal (background) - for image preview viewing */
.modal {
  display: none;  
  position: fixed;  
  z-index: 1;  
  padding-top: 100px;  
  left: 0;
  top: 0;
  width: 100%;  
  height: 100%;  
  overflow: auto;  
  background-color: rgb(0,0,0);  
  background-color: rgba(0,0,0,0.9);  
}
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
}
.modal-content-max {
  margin: auto;
  display: block;
  width: 100%;
}
#modal-caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}
.modal-content, .modal-content-max, #modal-caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.modal-close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.modal-close:hover,
.modal-close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}
@media only screen and (max-width: 700px){ .modal-content { width: 100%; }}

.menutick { text-shadow: 1px 2px #000; }