body, h1, h2, h3, h4, input, select, textarea {
    font-family: "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif;
}
body, input, select {
    font-size: 10.5pt;
}
body {
	margin: 0px;
}
h1 {
    text-align: center;
}
h3 {
	margin-bottom: 20px;
	border-bottom: 1px solid;
}

.beta {
	display: none !important;
}

ul {
	margin-top: 0.2em;
}

@media print {
	
	.noprint {
		display: none;
	}
	.found {
		font-weight: bold;		
	}
	
}

.button {
	display: inline-block;
	cursor: pointer;
	text-align: center;
	vertical-align: middle;
	border-radius: 2px;
	background-color: white;
	color: black;
	border: 1px solid gray;
	transition-duration: 0.1s;
	padding: 2px 6px;
}
.inactive {
	color: #999;
}
.button + .button {
	margin-left: 8px;
}
.button:hover, i.material-icons.inline-button:hover {
	/* background-color: lightgray; */
	box-shadow: 0 0 4px rgba(33,33,33,.2);
}
.button.material-icons {
	padding: 4px;
	margin: 2px;
}
.button-right {
	float:right;
}
i.material-icons.inline-button {
	vertical-align: text-bottom;
	cursor: pointer;
	width: 24px;
	margin-left: 10px;
	overflow-x: hidden;
}
.descent-button {
    padding: 1pt 4pt;
	cursor: pointer;
	position: relative;
}
.descent-button:hover {
    background-color: #ddd;
}

.close {
	color: #aaa;
	float: right;
	font-size: 14pt;
	font-weight: bold;
	width: 14pt;
}
input[type="file"] {
    position: fixed;
    right: 200%;
    bottom: 200%;
}
input[type="color"] {
	vertical-align: bottom;
	width: 50px;
}


.needphp {
	display: none;
}
.hasphp .needphp {
	display: block;
}
.hasphp .nophp {
	display: none;
} 
.needloggedin, .needloggedin-inline, .needloggedin-inline.material-icons {
	display: none; 
}
.loggedin .needloggedin {
	display: block;
}
.loggedin .needloggedin-inline {
	display: inline-block;
}
.loggedin #loginform {
	display: none;
}

#boxProjects div.needphp {
	margin-bottom: 35px;
}
.float-left-box {
	float: left;
	margin-right: 6px;
	margin-bottom: 24px;
}
.projectsListBox {
	/*float: left;*/
	overflow-y: auto;
	max-height: 450px;
	min-width: 350px;
}
div + h3 {
	clear: both;
}
div.projectListItem {
    cursor: pointer;
	min-height: 55px;
	padding: 5px;
	position: relative;
	border-top: 1px solid #ddd;
}
div.projectListItem.hidden, div.projectFile.hiddenFile {
	display: none;
}
div.projectListItem.selected {
    background-color: lightblue;
}
div.projectListItem .button {
	display: none;
}
div.projectListItem.selected .button {
	display: inline-block;
}
div.projectListItem span.cmdPLoad, div.projectListItem span.cmdPView {
	display: none;
	position: absolute;
	right: 5px;
}
div.projectListItem:hover span.cmdPLoad {
	display: inline-block;
}
span.modified, span.template {
	position: absolute;
	bottom: 2px;
	right: 5px;
	font-size: 8pt;
}
div.projectListItem.selected.projectFile i.cmdPFileHistory {
	display: none;
}
div.projectListItem.selected.projectFile.newest.hasOld i.cmdPFileHistory {
	display: inline-block;
}
div.projectFile.old {
	padding-left: 12pt;
}



.notAllowed {
	display: none;
}
.notAvailable {
	color: #aaa;
}

table {
	table-layout: fixed;
}

td, th {
	padding-left: 6pt;
	padding-right: 6pt;
}
.narrow-cols td, .narrow-cols th {
	padding-left: 0pt;
	padding-right: 0pt;
}
td:first-child, .narrow-cols td:first-child {
	padding-left: 6pt;
	padding-right: 6pt;
}
.days_x .hide-when-narrow {
	display: none;
}


.tableSettings {
	width: 100%;
	margin-bottom: 50px;
}
.tableSettings td {
	border-top: 1px solid #ddd;
	vertical-align: top;
	padding-top: 4pt;
	padding-bottom: 4pt;
}
.tableSettings tr:last-child td {
	border-bottom: 1px solid #ddd;
}
.tableSettings td select:hover, .tableSettings td input:hover {
    background-color: #ddd;
}
.tableSettings td select:hover option {
    background-color: #fff;
}
.tableSettings td > * {
	margin-bottom: 5px;
}
.tableSettings .extraTopMargin {
	margin-top: 14px;
}
.tableSettings tr i.inline-button, .tableSettings tr span.button {
	opacity: 0;
}
.tableSettings tr:hover i.inline-button, .tableSettings tr:hover span.button {
	opacity: 1;
}
.tableSettings thead, .table-template {
	display: none;
}
.tableSettings textarea {
	font-size: 9pt;
}
.txtWWorking, .txtTDuration, .txtFAppr, .txtSAppr, .txtBAppr , .txtWReqCount, #txtEYearInput {
	width: 40px;
	text-align: center;
}
.tableSettings td.td-wquali span.cmdWSettings {
	float: left;
}
.tableSettings td.td-wquali.moreShown span.cmdWSettings {
	float: right;
}
.tableSettings td.td-wquali .isMore {
	display: none;
}
.tableSettings td.td-wquali.moreShown .isMore {
	display: block;
}
.td-wname, .td-sname, .td-wworking, .td-bname, .td-soptions {
	width: 180px;
}
.blockShiftDays select {
	border: 1px solid #ddd;
}
.blockShiftDays select + i.material-icons.inline-button {
	margin-left: 3px;
	margin-right: 3px;
}
i.material-icons.bday-forward {
	vertical-align: text-bottom;
	width: 24px;
	margin-left: 3px;
	margin-right: 3px;
	overflow-x: hidden;
	display: inline-block;
}
.tableSettings tr:hover i.material-icons.bday-forward {
	display: none;
}
.tableSettings tr i.bday-del {
	display: none;
}
.tableSettings tr:hover i.bday-del {
	display: inline-block;
}
.tableSettings tr span:last-child i.bday-forward {
	opacity: 0;
}
.fixedButtons {
	position: fixed;
	bottom: 0px;
	z-index: 20;
}
.tableSettings td.td-sdays input[type=number] {
	width: 40px;
}


.boxSAllWeekdays div.boxSWeekday label.boxSWeekdayChk {
	display: inline-block;
	width: 120px;
}
.boxSAllWeekdays .boxSWeekdayNumAllSame {
	display: none;
}

.boxSAllWeekdays.all-the-same div.boxSWeekday {
	display: inline-block;
}
.boxSAllWeekdays.all-the-same div.boxSWeekday label.boxSWeekdayChk {
	display: inline;
	margin-right: 4pt;
}
.boxSAllWeekdays.all-the-same div.boxSWeekday span.boxSWeekdayNums {
	display: none;
}
.boxSAllWeekdays.all-the-same .boxSWeekdayNumAllSame {
	display: inline;
}

div.boxSWeekday.deactivated span.boxSWeekdayNums {
	opacity: 0.2;
}





.tableSettings > tbody .grabable { 
	cursor: grab; user-select: none 
}
.tableSettings > tbody > tr.grabbed {
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
}
.tableSettings > tbody > tr.grabbed:active {
  user-input: none;
}
.tableSettings > tbody > tr.grabbed:active * {
  user-input: none;
  cursor: grabbing !important;
}






.tableGab td select:hover, .tableGab td input:hover {
    background-color: #ddd;
}
.tableGab td select:hover option {
    background-color: #fff;
}

.tableGab > tbody .grabable { 
	cursor: grab; user-select: none 
}
.tableGab > tbody > tr.grabbed {
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
}
.tableGab > tbody > tr.grabbed:active {
  user-input: none;
}
.tableGab > tbody > tr.grabbed:active * {
  user-input: none;
  cursor: grabbing !important;
}



.wpreset-shifts label {
	margin: 0 7px;
}
.wpreset-shifts label div {
	display: inline-block;
	width: 40px;
	cursor: pointer; 
	border: 1px solid #ddd;
	text-align: center;
	font-size: 8pt;
	margin-bottom: -4px;
}








.sd_so_num { 
	text-align: right !important; 
}
.sd_so_center { 
	text-align: center !important; 
}

.cal-settings-btn {
	margin-right: 10px;
}

table.calendar {
	border-collapse: separate;
	border-spacing: 0px;
	margin: auto;
	height: fit-content;
	position: relative;
}
.calendar table, .calendar tr, .calendar th, .calendar thead, .calendar td, .calendar input, .calendar select {
	font-size: 8pt;
}
.calendar tr {
	height: 100%;
}
.calendar tbody td, .calendar thead tr { 
	text-align: left; 
}
.calendar tbody td.td-date {
	text-align: right;
	cursor: pointer;
}
.calendar thead tr { 
	background-color: #fff;
}
.calendar thead tr th {
	min-width: 18pt;
	text-align: center;
	cursor: default;
}


.calendar thead th.th-date { 
	text-align: center; 
}
.calendar.days_y thead th.th-date div.date-head-title { 
	width: 90px;
}
.calendar.days_y.narrow-cols thead th.th-date div.date-head-title { 
	width: 100px;
}
.calendar.days_x thead th.th-date div.date-head-title { 
	width: 120px;
}
.calendar.days_x.hideWorkerStat thead th.th-date div.date-head-title { 
	width: 90px;
}
.calendar.viewer thead th.th-date #cmdCalSettings {
	display: none;
}

.calendar tr, .calendar td, .calendar th, th.th-workers, th.th-shifts, th.th-date {
	border-bottom: 1px solid #ddd;
	border-right: 1px solid #ddd;
}

.calendar.days_x td.last-of-month, .calendar.days_x th.last-of-month {
	border-right: 2px solid #777;
}
.calendar.days_y td.last-of-month {
	border-bottom: 2px solid #777;
}


.calendar tr td.td-date.fogDay, .calendar th.fogDay span {
	/* opacity: 0.2; */
	color: rgba(0, 0, 0, 0.2);
}
.calendar tr td.fogDay div {
	opacity: 0.2;
}
.calendar tr.th-button th[worker] {
	text-align: center; 
	font-weight: normal;
	cursor: pointer;
	z-index: 100;
}

.calendar thead { 
	position: sticky;
	top: 0px;
	z-index: 20;
}
.calendar thead th:first-child { 
	position: sticky;
	left: 0px;
	z-index: 21;
	background-color: white;
}
.calendar tbody tr td:first-child { 
	position: sticky;
	left: 0px;
	z-index: 18;
}
div#boxCal {
	overflow: hidden;
}
div.calContainer {
	overflow: scroll;
	scrollbar-width: thin;
}



.calendar tbody tr:hover td {
	box-shadow: 0 -4px 4px -4px rgba(33,33,33,.8) inset, 0 4px 4px -4px rgba(33,33,33,.8) inset;
}



.shift-marker {
	background: linear-gradient(45deg,transparent 35px,orange 0);
}





.th-date, .th-shifts {
	vertical-align: bottom;	
	text-align: center;
}
.th-workers {
	text-align: center;
	vertical-align: bottom;
	width: 25px;
	padding-top: 6pt;
}
.th-workers span, .th-shifts span {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	white-space: nowrap;
}
.th-workers[day] span {
	font-weight: normal;
}
.th-shifts {
	text-align: center;
	vertical-align: bottom;
	width: 70px;
}
tr.th-button th[worker]:hover, tr.th-button th[worker].hover, .hideWorkerStat tr.th-rotated th.th-workers[worker].hover, tr.th-rotated th.th-workers[day].hover, .blockCal tr th[block].hover, td.td-worker.first-col .buttons:hover {
	background-color: #ddd;
}
.th-workers-working {
	font-weight: normal;
	margin-left: 5px;
}

td.td-worker.first-col, td.td-shiftrow.first-col, tr.spacerRow td:first-child {
	background: white;
}
td.td-worker.first-col .buttons {
	text-align: center; 
	font-weight: normal;
	cursor: pointer;
	float: right; 
	padding: 0 3pt;
	/* display: inline; */
}
.calendar.days_x.hideWorkerStat td.td-worker.first-col .buttons { 
	display: none;
}
.calendar.days_y.hideWorkerStat tr.th-button { 
	display: none;
}
/*
.th-workers {
	text-align: left;
	white-space: nowrap;
	transform-origin: 50% 50%;
	transform: rotate(270deg) translate(2px,0);
	width: 25px;
	vertical-align: middle;
}
.th-workers > p, .th-shifts > p {
    margin: 0 -100%;
    display: inline-block;
}
.th-workers > p.hover {
    text-shadow: 1px 1px 2px rgba(33,33,33,.4); 
}
.th-workers > p:before, .th-shifts > p:before{
    content: '';
    width: 0;
    padding-top: 120%;
    display: inline-block;
    vertical-align: middle;
}
tr.th-button th[worker]:hover, tr.th-button th[worker].hover, .blockCal tr th[block].hover {
	background-color: #ddd;
}
.th-workers-working {
	font-weight: normal;
	margin-left: 5px;
}
.th-shifts {
	text-align: left;
	width: 70px;
	white-space: nowrap;
	transform-origin: 50% 50%;
	transform: rotate(270deg) translate(70px,0);
	vertical-align: middle;
}
*/


.td-shifts {
	text-align: center; 	
	padding: 0px;
	cursor: pointer;
	overflow: hidden;
}
.td-shifts div {
	text-align: center; 	
	overflow: hidden;
	position: relative;
	height: 100%;
	white-space: nowrap;
}
/*
.td-shifts div.notes {
	display: inline;
}
.td-shifts div.notes:after {
	position: absolute;
	bottom: -12;
	height: 30px;
	width: 30px;
	right: -75px;
	background: var(--notecolor,red);
	content: "";
	z-index: 1000;
	transform: skew(225deg);
}
*/
.td-shifts div.notes:after {
	position: absolute;
	bottom: 0px;
	height: 30px;
	width: 30px;
	right: -24px;
	background: var(--notecolor,red);
	content: "";
	z-index: 15;
	transform: skew(45deg);
}
.switching .td-shifts div.notes:after, .repeating .td-shifts div.notes:after {
	right: -50px;
}


.td-shifts.blockhover div {
	display: none; 	
}
.td-shifts.blockhover div.hoverTD {
	display: block;
}


.switching .td-shifts div, .repeating .td-shifts div {
	opacity: 0.3; 	
}
.switching .td-shifts div.canSwitch {
	opacity: 1.0;
	box-shadow: 0 0 6px green inset;
}
.switching .td-shifts div.sourceSwitch, .repeating .td-shifts.sourceRepeat {
	opacity: 1.0;
	box-shadow: 0 0 6px blue inset;
}
.switching .td-shifts div.snatched {
	opacity: 0.5;
}

.repeating .td-shifts.canRepeat * {
	opacity: 1.0;
}


tr.spacerRow {
	height: 8px;
}
tr.spacerRow.big {
	height: 16px;
}
.calendar thead tr th.spacerCol {
	min-width: 3px;
}
.calendar thead tr th.spacerCol.big {
	min-width: 10px;
}

tr.shiftRow {
	vertical-align: top;
}



.td-workers, .td-wblock {
	text-align: left; 	
	padding: 0px;
	cursor: pointer;
}
.td-workers div, .td-wblock div {
	text-align: left; 	
	padding-left: 6pt;
	padding-right: 6pt;
	display: inline-block;
	white-space: nowrap;
}
.narrow-cols .td-workers div, .narrow-cols .td-wblock div {
	padding-left: 0pt;
	padding-right: 0pt;
}
tr.shiftRow .td-workers div {
	padding-right: 0pt;
	max-width: 24px;
	overflow: hidden;
	white-space: nowrap;
	margin-bottom: -4px;
}
.td-shifts select {
	text-align: center;	
	width: 100%;
}
.td-workers select {
	text-align: left;	
	width: 100%;
}
.td-workers select.isEmpty {
	display: none;
}



td.blockhover div {
	background-color: transparent !important;
	color: black !important;
}
td.blockhover  {
	background-color: lightblue;
}
td.blockhover.conflict {
	background-color: lightcoral;
}


td select {
    border-style: none;
    background-color: transparent;
	/* for Firefox */
	-moz-appearance: none;
	/* for Chrome */
	-webkit-appearance: none;
	cursor: pointer;
}
td input {
    border-style: none;
    background-color: transparent;
}

td.weekend, th.weekend, td.td-date.weekend {
	background-color: lightgray;
}
td.holiday, th.holiday, td.td-date.holiday {
	background-color: lavender;
}

td.td-date {
	background-color: white;
}



tr.active  {
	background-color: lightblue;
}
.calendar tbody tr td.found {
	background-color: lightcoral;
}
.calendar tbody tr td.selected { /*, td.selected div { */
	box-shadow: inset 0 0 4px rgba(33,33,33,.8);
}
.calendar tbody tr td.available-2 {	
	/*background-color: #ffeb99;*/
	box-shadow: inset 0 0 6px rgb(255, 204, 0);
}
.calendar tbody tr td.available-1 {
	/*background-color: #ffcc99;	*/
	box-shadow: inset 0 0 6px rgb(255, 102, 0);
}
.calendar tbody tr td.available-0 {
	/*background-color: #ff6666;	*/
	box-shadow: inset 0 0 6px rgb(255, 0, 0);
}

/*
.days_x th.custom-holiday-start {
	box-shadow: 4px -4px 4px -4px #EB8702 inset;
}
.days_x th.custom-holiday-day {
	box-shadow: 0 -4px 4px -4px #EB8702 inset;
}
.days_x th.custom-holiday-end {
	box-shadow: 4px -4px 4px -4px #EB8702 inset;
}
*/
.days_x th.custom-holiday-day {
	border-bottom: 2px solid #EB8702;
}
.days_y td.custom-holiday-day {
	border-right: 2px solid #EB8702;
}






.exportMonthSelect {
	display: none;
}




.custom-menu {
	display: none;
    z-index: 25;
    position: absolute;
    overflow: hidden;
    border: 1px solid #CCC;
    white-space: nowrap;
    background-color: #FFF;
    color: #333;
    padding: 0;
	box-shadow: 0 0 6px rgba(33,33,33,.4);
}

#tdworkerInfo {
	z-index: 1005;
}

/* Each of the items in the list */
.custom-menu li {
	font-size: 8pt;
    padding: 2pt 6pt;
    cursor: pointer;
    list-style-type: none;
    user-select: none;
}

.custom-menu li[shift] {
	text-align: center;	
}
	
.custom-menu li:hover {
    background-color: #DEF;
}
.custom-menu li.unclickable {
    background-color: #ddd;
}
.custom-menu li.unclickable:hover {
    background-color: #ddd;
}
.custom-menu li.selected {
    background-color: lightblue;
}
.custom-menu li.spacer {
    background-color: #ddd;
	height: 0px;
}
.custom-menu li label {
	display: block;
	cursor: pointer;
}


#tdshiftsMenu, #tdpresetMenu {
	overflow: scroll;
	scrollbar-width: none;
	max-height: 370px;
}
.narrow-cols #tdshiftsMenu li {
	padding-left: 0pt;
	padding-right: 0pt;
}

.blockCal {
	display: inline-block;
	vertical-align: top;
}
#calWeekBlocks thead tr th {
	width: 70px;
}
#calWeekBlocks thead tr th.th-week {
	width: 100px;
}
#calWeekBlocks tbody td.td-week {
	text-align: right;
	cursor: pointer;
}	
.blockCal tbody td.available {
	background-color: lightgreen;
}
.blockCal tbody td.selWorker {
	background-color: lightblue;
}
.blockCal tbody td.selWorker span.countWorker {
	display: none;
}
.countWorker {
	float: right;
	padding-right: 4px;
}
.blockCal tr.deactivated {
	opacity: 0.2;
}
.blockCal tbody td input[type=number] {
	width: 32px;
}



.textNoteText {
	width: 490px;
}
#noteTemplatesListBox {
	width: 490px;
	margin-bottom: 16pt;
}
#noteTemplatesListBox .projectListItem {
	min-height: 1pt;
}
#noteTemplatesListBox .projectListItem:last-child {
	border-bottom: 1px solid #ddd;
}
.ntColorbox {
	width: 6px;
	display: table-cell;
}
.ntTextbox {
	display: table-cell;
	padding-left: 6pt;
}




#wrapper {
	padding-top: 54px;
	/* padding-bottom: 40px; */
	
}
#wrapper > div {
	margin: 8px;
}

.box-center {
	width: 800px;
    margin-left: auto;
    margin-right: auto;
	margin-bottom: 40px;
}
.box-max {
    margin-left: auto;
    margin-right: auto;
	margin-bottom: 40px;
	overflow-x: auto;
	position: relative;
}
.box {
    width: 650px;
}
.box_small {
    width: 550px;
}
.box, .box_small {
    margin-left: 20px;
    margin-right: 20px;
	float: left;
}
.centerdiv {
	left: 50%;
	display: inline-block;
	position: relative;
	transform: translate(-50%);
}




.wy-tooltip {
	border: 1px solid #F1D031;
	color: #444;
	background: #FFFFA3;
	box-shadow: 0 2px 3px #999;
	position: absolute;
	padding: 5px;
	text-align: left;
	border-radius: 5px;
	white-space: pre-line;
	z-index: 3000;
}
.wy-hide { display: none; }





.header {
    position: fixed;
    top: 0px;
    width: 100%;
	overflow: scroll;
	white-space: nowrap;
	scrollbar-width: none;
	padding: 7px;
	background-color: aliceblue;	
	z-index: 2222;
}
.headTitle {
	font-size: 16pt;
	font-weight: bold;
	vertical-align: bottom;
	margin-right: 10px;
}
.header .spacer {
	margin-left: 5px;
}
.boxSelect.selected {
	background-color: lightblue;
}
#txtProjectName {
	width: 100px;
}
#txtProjectDesc {
	width: 150px;
}
.spanRight {
	/*float: right;*/
	margin-right: 18px;
	margin-top: 7px;
	margin-left: 12px;
}
.unsaved {
    background: radial-gradient(white 50%, orange 150%);
}





.footer {
    display: none;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #666;
    color: white;
    text-align: center;
}
.footer.alert {
    background-color: #666;
    color: white;
}
.footer > p {
    display: none;
}



/* The Modal (background) */
.modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 10000; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: hidden; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
body.modal-open {
    /*overflow: hidden;*/
}
/* Modal Content/Box */
.modal-content {
	display: none; /* Hidden by default */
	background-color: #fefefe;
	padding: 20px;
	border: 1px solid #888;
	box-shadow: 0 0 8px rgba(33,33,33,.2);
}
.modal-big {
	width: 85%; /* Could be more or less, depending on screen size */
	margin: 10% auto; /* 15% from the top and centered */
}
.modal-small {
	width: 550px; 
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.show-modal {
    opacity: 1;
    visibility: visible;
    transform: scale(1.0);
    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}
.tabs {
	background-color: #ddd;
}
.tabs .tabitem {
	cursor: pointer;
	text-align: center;
	vertical-align: middle;
	color: black;
	transition-duration: 0.1s;
	padding: 6px 10px;
	display: inline-block;
}
.tabs .tabitem:hover {
	box-shadow: 0 0 4px rgba(33,33,33,.2);
}
.tabs .tabitem.selected {
	background-color: lightblue;
}
div[tab-content] {
	min-height: 300px;
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	padding: 10px;
}

#qrcodebox {
	text-align: center;
}
#qrcodebox img, #qrcodebox canvas {
	margin: auto;
	max-width: 90vw;
}


.modal-occ {
	width: 720px;
}
.modal-occ .projectsListBox {
	height: 450px;
}
.modal-occ .scroll-y-box {
	max-height: 400px;
	overflow-y: scroll;
	scrollbar-width: thin;
}