:root {
  --mainBgColor:#065c79;
  --menuColor:#054a61;
  --mainTextColor: white;
  --payEditColor: #fff7e8;
  --buttonColor:#f0f0f5;
  --errorColor:#fca903;
  --blueHighlight:#8fc1ff;
  --smallScreenMessage:"This page requires a wider screen to be viewed properly. If possible, try landscape mode instead.";
}

.hidden{
	display:none !important;
}

* {
	box-sizing:border-box;
	padding:0;
	margin:0;
	font-family:"Times New Roman";
}

select{ border-image-width: 0; }

html{
	overflow-x:hidden;
}

body {
	width:100vw;
	min-height:100vh;
	display:flex;
	flex-flow:column;
	align-items:center;
	color:var(--mainTextColor);
	background:var(--mainBgColor);
	overflow-x:hidden;
}

input,select{
	font-family:"Arial";
}

button{
	border:none;
	padding:1%;
	background-color:var(--buttonColor);
	border-radius:.2em;
	cursor:pointer;
}

button:hover:enabled{
	filter:brightness(90%);
}

input[type='number']::-webkit-inner-spin-button, 
input[type='number']::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}

input[type=checkbox]{
	accent-color:blue;
}


.checkDiv {
	display:flex;
	flex-flow:row;
	align-items:center;
}

.checkDiv > input{
	display:inline-block;
	margin-right:clamp(.4rem,1vw,1rem);
	height:clamp(1rem,2vw,1.2rem);
	width:clamp(1rem,2vw,1.2rem);
	cursor:pointer;
}

.checkDiv > label{
	cursor:pointer;
}

.dimmer {
	margin:0 0 0 0;
	top:0px;
	left:0px;
	position:fixed;
	overflow-y:hidden;
	z-index:1100;
	width:100vw;
	height:100vh;
	background-color: rgba(0,0,0,.7);
	display:flex;
	flex-flow:column;
	cursor:pointer;
	align-items:center;
	justify-content:center;
	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
	user-select: none;  
}

#popup {
	margin:0 0 0 0;
	top:0px;
	left:0px;
	position:fixed;
	z-index:1200;
	width:100%;
	height:100%;
	overflow:none;
	background-color: rgba(0,0,0,.4);
	display:none;
	align-items:center;
	justify-content:center;
	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
	user-select: none;  
}

.load {
	background-color:rgba(255,255,255,.8);
	display:flex;
	flex-flow:column;
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	align-items:center;
	z-index:100;
	cursor:default;
	overflow:visible;
}

.load > span{
	display:block !important;
	width:100% !important;
	height:max(calc((100% - 3rem)/2),0px) !important;
	max-height:30vh !important;
}

.load .loader {
    border: 5px solid #f3f3f3 !important; /* Light grey */
    border-top: 5px solid #3498db !important; /* Blue */
    border-radius: 50% !important;
    width: clamp(1.5rem,3vw,3rem) !important;
    height: clamp(1.5rem,3vw,3rem) !important;
    animation: spin 1s linear infinite !important;
}



@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.noPermission{
	font-size:2.5vw;
	margin-top:35vh;
}

.payrollAlertContainer{
	background-color:white;
	width:min(90%,700px);
	display:flex;
	flex-flow:column;
	align-items:center;
	color:black;
	line-height:calc(clamp(1.2rem,3vw,1.8rem) * 1.5);
	font-size:clamp(1.2rem,3vw,1.8rem);
	cursor:default;
	padding:1.5rem;
}

.promptContainer{
	background-color:white;
	width:min(90%,700px);
	display:flex;
	flex-flow:column;
	align-items:center;
	color:black;
	font-size:clamp(1rem,2.5vw,1.5rem);
	cursor:default;
	padding:1rem;
}

.promptMessage{
	width:100%;
	word-wrap:wrap;
	display:flex;
	margin-bottom:2rem;
	align-items:center;
	justify-content:center;
	text-align:center;
	line-height:1.5rem;
}

.promptButtons{
	display:flex;
	flex-flow:row;
	width:100%;
	height:4rem;
	align-items:center;
	justify-content:space-around;
}

.promptButtons>button{
	width:30%;
	height:60%;
	font-size:clamp(1rem,2.5vw,1.5rem);
	cursor:pointer;
}

.promptCancel{
	background-color:#ffc2c2;
}

.promptConfirm{
	background-color:#adffad;
}

::-webkit-input-placeholder { /* Edge */
  opacity:.5;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  opacity:.5;
}

::placeholder {
  opacity:.5;
}

.searchSelect{
	display:flex;
	flex-flow:column;
	position:relative;
}

.searchSelect > .searchSelectOptions{
	position:relative;
	display:flex;
	align-items:center;
	width:100%;
	justify-content:space-between;
	margin-bottom:.5rem;
}

.searchSelect > .searchSelectOptions > button{
	max-width:55%;
	padding:1% 4% 1% 4%;
	font-size:.8em;
}

.searchSelect>.selectList{
	position:relative;
	background-color:white;
	color:black;
	margin-bottom:2%;
	
}



.searchSelect > input.selected{
	background:#85b4ff;
	max-width:150%;
}

.searchSelect .selectOption{
	padding:.5%;
	cursor:default;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	background-color:white;
}



#popup>.popupError{
	display:flex;
	flex-flow:column;
	gap:1rem;
	padding:3%;
	background-color:white;
	border:2px black solid;
	box-shadow:.5vw .5vh black;
	font-weight:bold;
	font-size:1.5rem;
	color:red;
	max-width:60%;
}

.bookedContainer{
	position:relative;
	width:min(90vw,600px);
	height:90vh;
	background-color:var(--mainBgColor);
	display:flex;
	flex-flow:column;
	cursor:default;
	padding:2%;
	align-items:center;
	font-size:clamp(.7rem,1.7vw,1rem);
	overflow:auto;
}

.bookedHoursHeader{
	font-size: 2em;
	margin-bottom:.9em;
}

#bookedHoursDate{
	font-size: 1.2em;
	margin-bottom:.75em;
	width:10em;
	padding-left:1%;
	min-height:1.6em;
}

.bookedHoursSearch{
	font-size: 1.2em;
	padding:1% 2% 1% 2%;
	width:10em;
	margin-bottom:.75em;
}

.bookedHoursResult{
	width:100%;
	display:flex;
	flex-flow:column;
	align-items:center;
	border-top:1px dashed black;
	padding-top:1em;
}

.bookedHoursRow{
	background-color:white;
	color:black;
	display:flex;
	justify-content:space-between;
	width:min(100%,12em);
	font-size:1.3em;
	padding:.7em 1.3em .7em 1.3em;
}

.bookedHoursRow + .bookedHoursRow{
	border-top:1px dashed black;
}

.bookedHoursRow.critical{
	background-color:#ff877a;
}

.longTermLink{
	text-decoration:underline;
	padding:1%;
	margin-bottom:.5em;
}

.bookedDetailContainer{
	position:relative;
	width:min(90vw,600px);
	height:90vh;
	background-color:var(--mainBgColor);
	display:none;
	flex-flow:column;
	cursor:default;
	padding:2%;
	align-items:center;
	font-size:clamp(.7rem,1.7vw,1rem);
	overflow:auto;
}

.bookedDetailHeader{
	display:flex;
	width:100%;
	padding:2% 1% 3% 1%;
	font-size:1.3em;
	align-items:center;
}

.refreshText{
	text-align:right;
	flex-grow:1;
}

.bookedLink,.bookedDetailBack{
	cursor:pointer;
}

.bookedLink:hover{
	outline:1px solid white;
}

.bookedDetailBack:hover{
	font-weight:bold;
}

.bookedDetailHeader>button{
	padding:1%;
	margin-left:1%;
}

.detailResultDiv{
	width:100%;
	display:flex;
	flex-flow:column;
	padding-bottom:3%;
}

.bookedDetailResultHeader{
	font-size:1.8em;
	padding-left:2%;
}

.bookedDetailDay{
	padding-left:4%;
	font-size:1.5em;
	
	margin-top:6%;
}

.bookedDetailDay>ul{
	padding-left:6%;
	margin-top:4%;
	line-height:1.2em;
	font-size:.8em;
}

.viewBookedLink{
	display:flex;
	align-items:center;
	justify-content:end;
	align-self:end;
	margin-right:5%;
	padding:1%;
	font-size: clamp(.9rem,1.8vw,1.15rem);
	cursor:pointer;
	text-decoration:underline;
	-webkit-tap-highlight-color: transparent;
}


#invoiceOptionsDiv{
	position:relative;
	height:95%;
	width:min(95%,1000px);
	background:var(--mainBgColor);
	display:flex;
	flex-flow:column;
	align-items:center;
	cursor:default;
}

.finalizeInvoice{
	display:flex;
	font-size:1.5em;
	align-self:end;
	height:5%;
	margin-right:3vw;
	align-items:center;
	justify-content:center;
	cursor:pointer;
}

.finalizeInvoice:hover{
	filter:brightness(80%);
}

.invoiceOptionsNameDiv{
	display:flex;
	gap:20px;
	font-size:2em;
	flex-flow:column;
	align-items:center;
	justify-content:center;
	width:min(90%,400px);
	height:20%;
}

.invoiceNameInput{
	font-size:clamp(.4em,2.3vw,.8em);
	padding:2%;
	width:100%;
	
}

.invoiceTotalDiv{
	display:flex;
	gap:5px;
	font-size:1.7em;
	flex-flow:column;
	align-items:center;
	justify-content:center;
	width:min(90%,400px);
	height:15%;
}

#invoiceTotal{
	font-size:clamp(.4em,2.3vw,.8em);
	padding:2%;
	width:30%;
	
}

.invoiceOptionsAddDetailDiv{
	display:grid;
	grid-template-columns:1fr 10fr 1fr 7fr;
	width:75%;
	align-items:center;
	font-size:clamp(.6em,2.5vw,1.4em);
}

.invoiceOptionsEntryDiv{
	margin-top:3%;
	margin-bottom:5%;
	display:grid;
	grid-template-columns:3fr 3fr 1fr 1fr 1fr 1fr;
	grid-auto-rows: max-content;
	align-items:center;
	justify-items:center;
	font-size:1.5em;
	width:95%;
	grid-row-gap:5px;
	overflow:auto;
}

[id^=invoiceEntryInput]{
	width:95%;
	font-size:clamp(.4em,2.3vw,.8em);
	padding:1%;
}

[id^=invoiceEntryRemove]:hover{
	filter:brightness(80%);
	cursor:pointer;
}

.invoiceNewInput{
	font-size:.6em;
	grid-column:1/7;
	cursor:pointer;
}

.invoiceNewInput:hover{
	filter:brightness(80%);
}

.invoiceDiv{
	display:none;
	position:relative;
	height:95%;
	width:1100px;
	background:var(--mainBgColor);
	flex-flow:row;
	align-items:start;
	justify-content:start;
	cursor:default;
	overflow:auto;
	padding:1%;
}

.invoiceDiv.resize{
	width:min(95%,1200px);
}

.invoiceCon{
	padding:40px;
	width:800px;
	display:flex;
	flex-flow:column;
	align-items:start;
	justify-content:start;
	background-color:white;
	color:black;
	line-height:1.5;
	font-size:1.1em;
	
}

.invoiceCon.resize{
	width:min(70%,800px);
	padding:0;
	font-size:clamp(.7em, 1.7vw, 1.1em);
}

.invoiceCon>img{
	height:4em;
	width:auto;
	margin-bottom:.5em;
}

.invoiceGrid{
	display:grid;
	grid-template-columns:2fr 5fr 1fr 1fr 2fr;
	width:100%;
	font-size:.8em;
	margin-top:1em;
}

.invoiceGrid>div.right{
	text-align:right;
}

.invoiceGrid>div.border{
	border-left:1px solid black;
}

.invoiceGrid>div{
	padding:.1em .4em .1em 0;
}

.invoiceGrid>.startTotal{
	border-top:1px solid black;
}

.invoiceGrid>.totalLeft{
	text-align:right;
	grid-column:1/5;
	font-size:1.1em;
}

.invoiceGrid>.totalRight{
	text-align:right;
	grid-column:5/6;
	font-size:1.1em;
}

.invoiceGridTitle{
	display:flex;
	font-weight:bold;
	border-bottom:1px solid black;
	border-top:1px solid black;
	align-items:center;
	justify-content:end;
}

.invoiceGridTitle.left{
	justify-content:start;
}

.invoiceCon>.displayTotal{
	margin:1em 0 1em 0;
}

.invoiceImage{
	width:min(100%,800px) !important;
	height:auto !important;
	margin-bottom:0 !important;
}

.invoicePanel{
	display:flex;
	flex:1;
	flex-flow:column;
	align-items:center;
	padding:1%;
	gap:3em;
}

.invoiceContactDiv{
	display:flex;
	width:100%;
	flex-flow:column;
	gap:2em;
	align-items:center;
}

.invoiceContactBox{
	display:grid;
	width:100%;
	grid-template-columns:1fr 4fr 10fr;
	font-size:clamp(.7em, 1.7vw, 1.1em);
	column-gap:.3em;
	row-gap:.2em;
}

.invoiceBoxName{
	font-size:clamp(.7em, 1.7vw, 1.1em);
	grid-area:auto/1/span 2/span 3;
	text-align:center;
	vertical-align:center;
	margin-bottom:.5em;
}

.invoiceSendButton{
	width:60%;
	font-size:clamp(.7em, 1.7vw, 1.1em);
	padding:3% 1% 3% 1%;
}

.invoiceSendButton:disabled{
	cursor:default;
}

.invoiceBoxLabel{
	cursor:pointer;
}

.invoiceCopy{
	display:grid;
	width:100%;
	grid-template-columns:5fr 1fr 3fr 1fr 3fr;
	font-size:clamp(.7em, 1.7vw, 1.1em);
	column-gap:.3em;
	row-gap:.2em;
}

.invoiceCopyLabel{
	cursor:pointer;

}


@media screen and (max-width:900px){
	.invoiceDiv.resize{
		flex-flow:column;
		align-items:center;
		font-size:clamp(1.4em, 3vw, 2.2em);
	}
	
	.invoiceCon.resize{
		width:100%;
		
	}
	
	.invoicePanel{
		margin-top:1em;
		gap:1em;
		width:min(100%,400px);
	}
	
	.invoicePanel button{
		font-size:clamp(.8em, 1.8vw, 1.5em);
	}
	
	
}


@media screen and (max-width:650px){
	#popup>.popupError{
		max-width:90%;
	}
	
	#mainList.searchSelect{
		margin-bottom:15vh;
	}
	
	.bookedContainer,.bookedDetailContainer{
		height:80vh;
		margin-top:-5vh;
	}
	
	.bookedHoursRow{
		width:min(100%,14em);
		font-size:1.5em;
	}
	
	#bookedHoursDate{
		font-size: 1.4em;
		width:12em;
	}

	.bookedHoursSearch{
		font-size: 1.4em;
		width:12em;
	}

	.longTermLink{
		font-size:1.3em;
	}
}

@media  (pointer: fine){
	.searchSelect .selectOption:hover:not(.checked){
		background-color:var(--blueHighlight);
		filter:brightness(120%);
	}
}

@media  (pointer: coarse){
	.searchSelect .selectOption:active:not(.checked){
		background-color:var(--blueHighlight);
		filter:brightness(120%);
	}
}