:root {
  --maxWidth: 1000px;
  --minWidth: 280px;
  
  --mainw: 1000px;
  --locMenuW: 600px;
  --popupBoxW: 850px;

	--bgDev: #555;
	--defaultTextColor: #333;


	/*--lightGreen: #e0f5e1;*/
	--lightGreen: #beebc0;
	/* --dark: #123679;  */
	--blueHi: #123679;
	--primary: #255697; --blue: #255697;
	--accent: #9fc0e3;
	/* --light: #d9e9f9; */
	--ultraLight: #e4eef7;
	--disabled: #eee;
	--disabledText: #6a6a6a;


	--dark: #273B61;
	--midTone: #4A70BA;
	--light: #DDE7FF;
	--lightGray: #eeeeee;
	--darkGray: #999999;
	--red: #EA9292;
	--green: #A5D6A7;

	/*--blue: #659dbd;*/

  /*--blueHi: #3e648f;*/
  --yellow: #255697;
  --tan: #bca36a;

  
  --msgblu: #1f4ba2;
  
  --msgyel: #E3DF48;
  --msgyelHi: #E5CF72;
  --msgyelDeep: #BEA847;

  --msgred: #CD3E3E;
  --msgredhi: #E57272;
  --msgreddeep: #BE4747;
    
  --msggre: #3ebf46;
  --msggrehi: #60d267;
  --msggrehi2: #3ebf46;



	--goodGreen: #3ebf46;
	--badRed: #d07575;
	--badRedForm: #ffb3b3;
	--progressYellow: #f1e04c;
	--progressOrange: #f1a04c;
	--progressBlue: #4c8bff;

	--navLeftWidth: 260px;
	--defaultNavLeftWidthClosed: 50px;

	--headBarHeight: 50px;
	--formRow-border-width: 1px;

	--collapsableOuterBGColor-base: unset;
	--collapsableOuterBGColor-active: #ffffff;
}

body, textarea{
	font-family: 'Open Sans', sans-serif;
}

/*body.intro{*/
	/*background: url('../img/wel-bg.jpg') no-repeat center center fixed;*/
	/*-webkit-background-size: cover;*/
	/*-moz-background-size: cover;*/
	/*-o-background-size: cover;*/
	/*background-size: cover;*/
/*}*/


.devBanner{position: fixed;top: var(--headBarHeight);z-index: 1;width: 100vw;height: 10px;background: repeating-linear-gradient(-45deg, yellow, yellow 10px, #282828 10px, #282828 20px);}

/* width */
::-webkit-scrollbar {width: 10px;}
::-webkit-scrollbar:horizontal{height: 8px;}
/* Track */
::-webkit-scrollbar-track {
	background: #dedede;
}

/* Handle */
::-webkit-scrollbar-thumb {
	background: #ccc;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background: #aaa;
}

h1{font-weight: normal; font-family: 'Roboto', sans-serif;}
h2{font-weight: normal; font-family: 'Roboto', sans-serif;}
h3{font-weight: normal;}

input[type=date]::-webkit-inner-spin-button {-webkit-appearance: none;display: none;}
input[type=datetime-local]::-webkit-inner-spin-button {-webkit-appearance: none;display: none;}

.ca{text-align: center;}

.darkBg{
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.7);
	z-index: 5;
}
.darkBg.active{	display: block;}


@keyframes liveBlinker {
  0% {background-color: #e34242;}
  49% {background-color: #e34242;}
  50% {background-color: darkred;}
  99% {background-color: darkred;}
}

@keyframes displayBlinker {
  0% {color: #e34242;}
  49% {color: #e34242;}
  50% {color: darkred;}
  99% {color: darkred;}
}


.liveDot{
	margin: 0 5px;
	width: 10px;
	height: 10px;
	border-radius: 5px;
	background-color: red;
	animation: liveBlinker 1s linear infinite;
	display: none;
}

.dot{
	margin: 0 5px !important;
	padding: 0 !important;
	width: 10px !important;
	height: 10px;
	border-radius: 5px;
}

.largeDot{display: inline-block;margin: 0 5px;padding: 0;width: 20px;height: 20px;border-radius: 10px; vertical-align: text-bottom; box-sizing: border-box;}

.dot.green{background-color: var(--msggrehi2) !important;}
.dot.yellow{background-color: var(--msgyelHi) !important;}

.formLink{cursor: pointer;}
.formLink.underline{cursor: pointer; text-decoration: underline;}
.formRow .formLink i{font-size: 1em; color: #0000007a;}
.formLink:hover{opacity: 0.5;}

.formBtn{
	display: inline-block;
	padding: 15px;
	box-sizing: content-box;
	border-radius: 3px;
	border: none;
	width: fit-content;
	min-width: 65px;
	text-align: center;
	font-size: 14px;
	margin: 3px;
}
.formBtn:hover{cursor: pointer;}

.formBtn.icon{
	min-width: 0;
	width: 30px;
	height: 30px;
	line-height: 30px;
	font-size: 26px;
}


.formBtn.gray{background-color: #999; color: #fff; border: none;}
.formBtn.gray:hover{background-color: #888}

.formBtn.lightGray{background-color: #d8d8d8; color: #000000; border: none;}
.formBtn.lightGray:hover{background-color: #cccccc}

.formBtn.green{background-color: var(--msggre); color: #fff; border: none;}
.formBtn.green:hover{background-color: var(--msggrehi);}

.formBtn.red{background-color: var(--msgred); color: #fff;}
.formBtn.red:hover{background-color: var(--msgredhi); color: #fff;}

.formBtn.primary{background-color: var(--blue); color: #fff;}
.formBtn.primary:hover{background-color: var(--blueHi); color: #fff;}

.formBtn.secondaryBtn{background-color: var(--accent); color: #000;}
.formBtn.secondaryBtn:hover{background-color: var(--blueHi); color: #fff;}

.formBtn.inRow{margin-top: 0; margin-bottom: 0; white-space: nowrap;}
.formBtn.formWidth{width: calc(100% - 20px); margin: 10px 0; box-sizing: border-box;}
.formBtn.vSpace{margin-top: 3px; margin-bottom: 3px;}
.formBtn.fullWidth{width: 100%; box-sizing: border-box;}
.formBtn.extraVertSpacing{margin-top: 7px;}
.formBtn.large{font-size: 1.4em;}
.formBtn.narrow{padding: 10px 8px;}
.formBtn.formFilterVCenter{margin: 18px 0;}

.releaseNote{background-color: #FFFFFF; padding: 0 10px; border-left: 2px solid var(--accent); margin: -10px 0 30px 20px; box-sizing: border-box; width: calc(100% - 20px);}
.releaseNote .releaseNoteTitle{font-size: 1.2em; font-style: italic; font-weight: 600;}
.releaseNote .releaseNoteTime{font-size: 0.8em; text-align: right;}
.releaseNote .releaseNoteBody{text-align: left;}


.popUpBox{
	display: none;
	position: fixed;
	left: 0;
	top:0;
	width: 95%;
	max-width: var(--popupBoxW);
	margin-top: 75px;
	margin-left: calc((100% - var(--popupBoxW) + var(--navLeftWidth))/2);
	margin-right: calc((100% - var(--popupBoxW))/2);
	padding: 30px 40px 50px;
	min-height: 200px;
	max-height: calc(100vh - 100px);
	background-color: #fff;
	z-index: 7;
	font-size: 16px;
	box-sizing: border-box;
	border: 1px #ccc solid;
	overflow-y: auto;

	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-moz-user-select: none; /* Old versions of Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}

.popUpBox.commentThreadPopUp{overflow: hidden; border: none; background: none;}
.popUpBox.small{
	max-width: 500px;
	margin-left: calc((100% - 500px + 50px)/2);
	margin-right: calc((100% - 500px)/2);
}
.popUpBox.smallR{
	max-width: 36vw;
	margin-left: calc((100% - 30vw + 50px)/2);
	margin-right: calc((100% - 30vw)/2);
}

.popUpBox.smallR.ca{text-align: center;}

.popUpBox.large{
	max-width: calc(100vw - 110px);
	margin-top: 100px;
	margin-left: 80px;
	margin-right: 30px;
}
.popUpBox.clean{font-size: 0;}
.popUpBox.active{display: inline-block;}
.popUpBox .head:not(.formRow){font-size: 20px;padding: 0;margin: 0;height: 30px;line-height: 30px;display: inline-block;
}

.popUpBox .head.sub{
	font-size: 16px;
	height: 26px;
	line-height: 26px;
	font-style: italic;
	color: var(--blue);
}
.popUpBox .headBtns{display: flex; align-items: center; gap: 10px;}
.popUpBoxCloseBtn{
	font-size: 30px;
	padding: 0;
	margin: 0;
	float: right;
	height: 30px;
	line-height: 30px;
	color: #D3696C;
	display: inline-block;
}
.popUpBoxCloseBtn:hover{color: #A9383B; cursor: pointer;}
.popUpBoxCloseBtn:active{color: #FAA4A6;}

.popUpBox .floodTextA{width: 100%;height: 120px;margin-top: 20px;margin-bottom: 20px;box-sizing: border-box;resize: none;}

.popUpBox > h1{display: flex;align-items: center; justify-content: space-between;}
.popUpBox > h1 div:last-child{display: flex; align-items: center;}

.popUpBox.mainEmulate .sectionBox{font-size: 0;}

.locationOptions{
	display: none;
	position: fixed;
	width: var(--locMenuW);
	margin-top: 60px;
	margin-left: calc((100% - var(--locMenuW) + 50px)/2);
	margin-right: calc((100% - var(--locMenuW))/2);
	padding: 20px;
	min-height: 200px;
	background-color: #fff;
	z-index: 10;
	font-size: 16px;
	box-sizing: border-box;
	border: 1px #ccc solid;
}


/* dialog{width: 60%; padding: 30px 40px 50px; min-height: 200px; max-height: calc(100vh - 200px); background-color: #fff; box-sizing: border-box; border: 1px #ccc solid; overflow-y: auto; border-radius: 0; outline: none;} */
/* dialog::backdrop {background-color: rgba(0, 0, 0, 0.5);} */


.locationOptions.active{display: inline-block;}


.locationOptionsHead{
	font-size: 18px;
	padding: 0 0 10px 0;
	margin: 0;
	/*width: 100%;*/
	height: 30px;
	line-height: 30px;
	box-sizing: border-box;
	display: inline-block;
}


.closeBtn {
	font-size: 30px;
	padding: 0;
	margin: 0;
	float: right;
	height: 30px;
	line-height: 30px;
	color: #D3696C;
	display: inline-block;
}
.closeBtn.small{font-size: 20px;}
.closeBtn:hover{color: #A9383B; cursor: pointer;}
.closeBtn:active{color: #FAA4A6;}

.freeBtn {
	font-size: 30px;
	padding: 0;
	margin: 0 5px;
	height: 30px;
	line-height: 30px;
	color: #333;
	display: inline-block;
	vertical-align: top;
}
.freeBtn.lightGray{color: #555;}
.freeBtn.small{font-size: 20px;}
.freeBtn:hover{color: #666666; cursor: pointer;}
.freeBtn:active{color: #777777;}

.freeBtn input{
	font-size: 30px;
	padding: 0;
	/*margin: 0 5px;*/
	height: 30px;
	line-height: 30px;
	color: #333;
	display: inline-block;
	border: none;
	border-bottom: solid 2px #999;
	width: 100%;
	text-align: center;
}

.freeBtn input::-webkit-outer-spin-button,
.freeBtn input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}



.locationOptionList{
	margin-top: 20px;
	text-align: center;
	display: none;
}
.locationOptionList.active{display: block;}




.popUpOptionsItem.plant{
	width: 140px;
	height: 60px;
	/*line-height: 60px;*/
	vertical-align: bottom;
	margin: 10px;
	padding: 0px 15px;
	box-sizing: border-box;
	position: relative;
}

.popUpOptionsItem.plant p{
	/*line-height: 1.5;*/
	/*display: inline-block;*/
	/*vertical-align: middle;*/

	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.popUpOptionsItem.mod{
	width: 160px;
	height: 80px;
	vertical-align: bottom;
	margin: 10px;
	padding: 15px;
	box-sizing: border-box;
}

.popUpOptionsItem.mod.pqdci{
	width: 230px;
	height: 100px;
	/*line-height: 50px;*/
	vertical-align: bottom;
	margin: 10px;
	padding: 20px 3px;
	box-sizing: border-box;
	font-size: 14px;
}

.popUpOptionsItem.mod.pqdci.sml{
	width: 200px;
	height: 60px;
	/*line-height: 50px;*/
	vertical-align: bottom;
	margin: 10px;
	padding: 20px 3px;
	box-sizing: border-box;
	font-size: 14px;
}

.popUpOptionsItem.selectable{border: rgba(0,0,0,0) solid 3px;}

.popUpOptionsItem.selectable.isSelected{border: rgba(0,0,0,0.25) solid 3px;  }

.popUpOptionsItem.mod i{
	font-size: 26px;
	display: block;
	margin-bottom: 5px;
}

.popUpOptionsItem {
	padding: 5px;
	margin: 7px 0;
	background-color: var(--blue);
	color: #fff;
	max-width: 300px;
	width: 100%;
	display: inline-block;
}

.popUpOptionsItem:hover{background-color: var(--blueHi); cursor: pointer;}

.popUpOptionsItem.gray{background-color: #ddd; cursor: pointer; color: #333;}
.popUpOptionsItem.gray:hover{background-color: #bbb;}

.popUpOptionsItem.inactive{display: none;}

.popUpBox.smallV2:not(.locationOptions):not(.small){
	position: fixed;
	left: 0;
	top: 100px;
	margin: 0 calc(50% - clamp(250px, 100%, 500px)/2);
	/*transform: translateX(-50%);*/
	width: clamp(250px, 100%, 500px);
	padding: 25px;
}

.txtLabel{
	font-size: 14px;
	font-weight: bold;
	margin-top: 10px;
}

.main{
	/*todo -> fix width*/
	width: calc(100% - var(--navLeftWidth));
	padding: 40px calc((100% - 1600px)/2) 120px;
	padding: 40px calc((100% - 1600px)/2) 120px;
	height: calc(100vh - 50px);
	margin-top: 50px;
	margin-left: var(--navLeftWidth);
	text-align: center;
	position: relative;
	z-index: 0;
	box-sizing: border-box;
	transition: width 0.3s, margin-left 0.3s;
}
body:has(.popUpBox.active){overflow: hidden; padding-right: 15px;}
.headerBar:has(~ .popUpBox.active){padding-right: 10px;}

.main.report{width: calc(100%);padding: 40px calc((100% - 1600px)/2) 120px;height: calc(100vh);margin-top: 0;margin-left: 0;}
.main.vCenter{display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 0; height: 100vh;}
.main.fullPageNoMenu{width: 100vw; height: 100vh; margin: 0; padding: 0;}
.main.loginMain{width: clamp(250px, 100%, 600px); padding: 40px 0 0; margin: 0 auto;}
.main.loginMain > div{flex-direction: column; align-items: center;}
.main.fullPageNoMenu.filled > div{max-width: 100%; height: 100%; overflow: hidden;}

.navLeft:not(.active) + div + .main{width: calc(100% - var(--defaultNavLeftWidthClosed)); margin-left: var(--defaultNavLeftWidthClosed);}

.footerText{position: absolute; bottom: 30px; font-size: 12px; display: block; width: 100%; padding: 0 0 0 15px; transition: transform 0.5s, padding 0.5s, bottom 1s;}
.navLeft .footerText{transform: rotate(-90deg);padding: 0; bottom: 15px}
.navLeft.active .footerText{transform: rotate(0); padding: 0 0 0 15px; bottom: 30px}

.main > div, .main > form {width: 100%;display: inline-flex;flex-direction: row; justify-content: space-evenly; flex-wrap: wrap;align-content: flex-start;}
.main.filled > div, .main.filled > form{background-color: #ffffff;max-width: calc(100% - 80px); justify-content: space-between; box-sizing: border-box; padding: 0 10px 30px 10px;}
.main.center > div, .main.center > form{justify-content: center;}

.main.heightFit{padding-bottom: 40px;}
.main.heightFit > div, .main.heightFit > form {height: calc(100vh - 90px - 40px); overflow-y: auto;}

.main .sectionBox{box-sizing: border-box; padding: 10px; display: inline-block;}
.main .sectionBox h1{font-size: 24px; margin: 0 0 15px;}
.main .sectionBox h2{font-size: 18px; margin: 0 0 5px;}
.main .sectionBox h2 i{margin: 0 10px;}
.main .sectionBox.noAdditionalSpace{font-size: 0;}
.main .sectionBox.collapsableV2Parent{display: flex; flex-direction: row; row-gap: 15px; flex-wrap: wrap;}
.main .sectionBox.collapsableV2Parent.vertical{flex-direction: column; flex-wrap: nowrap;}
.main .sectionBox.collapsableV2ParentGrid{display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0;}
.main .sectionBox.noPadding{padding: 0;}
.main .sectionBox.noPaddingLeftRight{padding-left: 0; padding-right: 0;}
.main .sectionBox.hidden,
.sectionBox.hidden{display: none;}
.main .sectionBox.vCenter{display: flex; flex-direction: row; align-items: center; justify-content: space-around;}

.main .sectionBox.collapsable{display: grid; grid-template-rows: min-content 0fr; transition: grid-template-rows 600ms, visibility 400ms; padding-top: 0; padding-bottom: 0;}
.main .sectionBox.collapsable.active{grid-template-rows: min-content 1fr; padding-bottom: 20px;}
.main .sectionBox.collapsable > *{visibility: hidden; overflow: hidden; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; line-height: 0;}
/*max-height: 0;*/
/*.main .sectionBox.collapsable.search > *{overflow: visible;}*/
.main .sectionBox.collapsable.active > *{visibility: visible; line-height: unset; max-height: unset;}
.main .sectionBox.collapsable.showVis.active > *{overflow: visible;}

.main .hidable{max-height: 0; overflow: hidden; box-sizing: border-box; transition: max-height 0.8s ease-in-out; padding: 0 !important;}
.main .hidable.noAdditionalSpace{padding: 0}
.main .hidable.active{max-height: 550px;}
.main .hidable.h100.active{max-height: 100px;}

.main .sectionBox.la{text-align: left;}
.main .sectionBox.fontSizeReset{font-size: 1rem;}
.main .sectionBox.ra{text-align: right;}
.main .sectionBox.center{margin: 0 auto;}
.main .sectionBox.collapsable.center{justify-items: center;}


.main .sectionBox.collapsableV2{display: grid; grid-template-rows: 0fr; transition: grid-template-rows 600ms; padding-top: 0; padding-bottom: 0;}
.main .sectionBox.collapsableV2.active{grid-template-rows: 1fr; padding-bottom: 20px;}
.main .sectionBox.collapsableV2 > div{ overflow: hidden; display: inline-flex; gap: 10px}
.main .collapsableOuter.table .collapsableV2{padding: 0;}


.main div:not(.collapsableOuter) > .sectionBox.collapsableV2 > div > div{ border: 1px solid #ccc; border-radius: 5px; font-size: 1em;}
.main .sectionBox.collapsableOuter{ border: 1px solid #ccc; border-radius: 5px; font-size: 1rem; background-color: var(--collapsableOuterBGColor-base); transition: background-color 600ms 200ms;  overflow-x: hidden;}
.main .sectionBox.collapsableOuter .rightJustifyKpis{width: 100%; justify-content: space-between;}
.main .sectionBox.collapsableOuter .rightJustifyKpis span > section{width: 150px;}
.main .sectionBox.collapsableOuter.bgYellow{background-color: #d8d86e;}
.main .sectionBox.collapsableOuter.bgGreen{background-color: #a4d5a4;}
.main .sectionBox.collapsableOuter:has(.collapsableV2.active){background-color: var(--collapsableOuterBGColor-active);}
.main .sectionBox.collapsableV2 > div > div:not(.noAdditionalSpace){font-size: 1rem;}
.main .sectionBox.collapsableOuter .collapsableHeader{display: flex; flex-direction: row; width: 100%; justify-content: space-between; align-items: center;}


.main .sectionBox.collapsableOuter.vertical{
	--collapsableVerticalHeight: 230px;
	--collapsableVerticalHeightTransition: 500ms 500ms;
	--collapsableVerticalWidth: 350px;

	width: auto; justify-content: space-between; align-items: center; height: var(--collapsableVerticalHeight); overflow: hidden;
	transition: height var(--collapsableVerticalHeightTransition);
	.collapsableHeader{width: 30px; overflow: visible; white-space: nowrap; transform: rotate(90deg); transform-origin: 10px; flex-direction: row-reverse; justify-content: flex-end;}
	.collapsableHeader .link:hover{cursor: pointer;}

	.sectionBox.collapsableV2{grid-template-rows: 0fr; grid-template-columns: 0fr; width: 0; transition: width 600ms; margin: -30px 0 0 20px; padding: 0;}
	.sectionBox.collapsableV2.active{grid-template-columns: 1fr; padding-bottom: 0; width: var(--collapsableVerticalWidth);}
	.sectionBox.collapsableV2 > div{width: var(--collapsableVerticalWidth); height: var(--collapsableVerticalHeight); transition: height var(--collapsableVerticalHeightTransition);}

	.sectionBox section{background-color: transparent; padding: 0; }
	.sectionBox section .formInput {padding: 0; }
}

.main .activeGrow .sectionBox.collapsableOuter.vertical:focus-within,
.main .activeGrow .sectionBox.collapsableOuter.vertical:hover,
.main .activeGrow .sectionBox.collapsableOuter.vertical:focus-within ~ .sectionBox.collapsableOuter.vertical,
.main .activeGrow .sectionBox.collapsableOuter.vertical:hover ~ .sectionBox.collapsableOuter.vertical,
.main .activeGrow .sectionBox.collapsableOuter.vertical:has(~ .sectionBox.collapsableOuter.vertical:focus-within),
.main .activeGrow .sectionBox.collapsableOuter.vertical:has(~ .sectionBox.collapsableOuter.vertical:hover) {
	--collapsableVerticalHeight: 45vh;
}
.main .sectionBox.collapsableOuter.vertical.full{
	--collapsableVerticalHeight: 500px; padding-left: 15px;
	--collapsableVerticalWidth: calc(100vw - var(--navLeftWidth) - 300px);
}

.main .sectionBox.collapsableOuter.vertical.wp500{--collapsableVerticalWidth: 500px;}

.collapsableOuterVerticalParent{ display: flex; gap: 10px; flex-direction: row;}

/*.main .sectionBox.collapsableOuter.vertical:has(.collapsableV2:not(.active)){width: 40px;}*/


.collapsableHeader span{display: flex; align-items: center; flex-direction: row; flex-wrap: wrap; gap: 15px;}
.collapsableHeader span.ra{justify-content: flex-end;}
.main .sectionBox.collapsableOuter .collapsableHeader span:last-of-type{flex-wrap: nowrap;}

.main .sectionBox.collapsableOuter.onOuterPadding > div,
.main .sectionBox.collapsableOuter.onOuterPadding > div > div{padding: 0; padding-bottom: 0}
.main .sectionBox.collapsableOuter.onOuterPadding > div > div > div {padding: 5px 0 0 0;}


/* .main.filled .collapsableHeader section.kpiV3{padding: 0;} */
.collapsableHeader .kpiV3{background-color: unset;}
.collapsableHeader .kpiV3 .circle{font-size: 0.9em; padding: 6px 8px; min-width: 40px; height: 40px}
.collapsableHeader .sectionBox.kpiV3 > div.textWrap .text{font-size: 0.9em;}
.collapsableHeader label,
.collapsableHeaderLabel label
{font-size: 0.9em; color: var(--disabledText);}

.collapsableHeader .kpiV3.large .circle{font-size: 1.2em; padding: 6px 8px; min-width: 60px; height: 60px}
.collapsableHeader .sectionBox.kpiV3.large > div.textWrap .text{font-size: 1.1em;}

.collapsableHeader .hideOnOpen{opacity: 1; transition: opacity 500ms 300ms;}
.collapsableHeader:has(+.collapsableV2.active) .hideOnOpen{opacity: 0;}

.collapsableHeader:not(:has(+.collapsableV2.active)) .hideOnOpenV2{display: inline-block; animation: appear 500ms;}
.noDelay .collapsableHeader:not(:has(+.collapsableV2.active)) .hideOnOpenV2{animation: appear;}
.collapsableHeader:has(+.collapsableV2.active) .hideOnOpenV2{display: none; animation: vanish 300ms 300ms;}

.collapsableHeader:not(:has(+.collapsableV2.active)) .showOnOpenV2{display: none; animation: vanish 300ms 300ms;}
.collapsableHeader:has(+.collapsableV2.active) .showOnOpenV2{display: inline-block; animation: appear 500ms;}
.noDelay .collapsableHeader:has(+.collapsableV2.active) .showOnOpenV2{animation: appear;}

@keyframes appear{
	from{display: none; opacity: 0;}
	to{display: inline-block; opacity: 1;}
}

@keyframes vanish{
	from{display: inline-block; opacity: 1;}
	to{display: none; opacity: 0;}
}




/*.main .sectionBox.collapsableV2 div div{transition: max-height 600ms; max-height: 0; overflow: hidden;}*/
/*.main .sectionBox.collapsableV2.active div div{ max-height: 100%;}*/
/*.main .sectionBox.centered{width: 20%; display: flex; align-items: center; justify-content: center;}*/

.main .sectionBox.w10{width: 10%;}
.main .sectionBox.w15{width: 15%;}
.main .sectionBox.w20{width: 20%;}
.main .sectionBox.w25{width: 25%;}
.main .sectionBox.w30{width: 30%;}
.main .sectionBox.w33{width: 33.333%;}
.main .sectionBox.w40{width: 40%;}
.main .sectionBox.w50{width: 50%;}
.main .sectionBox.w60{width: 60%;}
.main .sectionBox.w70{width: 70%;}
.main .sectionBox.w75{width: 75%;}
.main .sectionBox.w80{width: 80%;}
.main .sectionBox.w85{width: 85%;}
.main .sectionBox.w90{width: 90%;}
.main .sectionBox.w100{width: 100%;}

.main .sectionBox.flexAlignCenter{display: flex; align-items: center; justify-content: center;}

section{
	background-color: #fff;
	padding: 20px;
	/*width: calc(100% - 60px);*/
	width: 100%;
	margin-bottom: 40px;
	/*height: 40vh;*/
	box-sizing: border-box;
	overflow: hidden;
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	align-content: flex-start;
	font-size: 16px;
	vertical-align: top;
}
.main.filled section{padding: 0 10px; margin-bottom: 0;}
section.noWrap{flex-wrap: nowrap;}
section.half{width: calc(50%);}
section.third{width: calc(33.33%);}
section.forth{width: calc(25%);}
section.forthMobileHalf{width: calc(25%);}
section.halfMobileHalf{width: calc(50%);}
section.fifth{width: calc(20% - 20px);}
section.sixth{width: calc(16.667% - 5px);}
section.seventh{width: calc(14.2857% - 5px);}

section.twoCol.block.long > div,
section.twoCol.block.long > div.longBlock.btn
{width: calc(50% - 20px); margin: 10px;}


/*section.half{width: calc(50% - 60px);}*/
/*section.third{width: calc(33.33% - 60px);}*/
/*section.forth{width: calc(25% - 60px);}*/
/*section.fifth{width: calc(20% - 20px);}*/
/*section.sixth{width: calc(16.667% - 5px);}*/

.main.filled section.pageHeader {margin-bottom: 0; flex-direction: column; align-content: center; padding: 40px 10px 20px; overflow: visible;}
.main.filled section.pageHeader h1{margin: 0; padding: 5px; font-size: 2em;}
.main.filled section.pageHeader h1 i{margin: 0; padding: 5px; font-size: 0.8em;}
.main.filled section.pageHeader h2 {margin: 0; padding: 5px; font-size: 1rem; font-weight: 600; font-style: italic;}
.main.filled section.pageHeader h3{margin: 0; padding: 5px;}
.main.filled section.pageHeader h4{margin: -5px 0 0 0; padding: 5px; font-weight: normal;}
.main.filled section.pageHeader .headerFiller {margin: 0; padding: 0 10px; font-size: 16px; width: 100%; display: flex;justify-content: center;align-items: center;flex-direction: row;}
.main.filled section.pageHeader .headerFiller .half.block.long.narrow {margin: 0; font-size: 14px;}

.main.filled section.pageHeaderV2{display: flex; flex-direction: row; align-content: center; justify-content: space-between; align-items: center; padding: 40px 10px 20px; overflow: visible; font-size: 1rem; flex-wrap: nowrap; column-gap: 15px;}
.main.filled section.pageHeaderV2 .headerActions{display: flex; flex-direction: column; align-content: center; justify-content: space-between; align-items: flex-start; }

.main.filled section.pageHeaderV2 .headerActions .links{display: inline-flex; align-items: center; column-gap: 15px; row-gap: 5px; flex-wrap: wrap;}
.labelAction{display: flex; gap: 10px; align-items: center; padding: 2px 0;}
.labelAction .linkObjects {font-size: 0.85rem;}
section.block.long.narrow .longBlock .subject .labelAction i{font-size: 0.85rem; padding-right: 2px;}

.main.filled section.pageHeaderV2 .headerActions .links .linkObjects,
.labelAction .linkObjects
{display: inline-flex; gap: 5px; align-items: baseline; padding: 2px 4px; user-select: none;}

.main.filled section.pageHeaderV2 .headerActions .links .linkObjects:hover,
.labelAction .linkObjects:hover
{background-color: #eee; border-radius: 12px; cursor: pointer;}

.main.filled section.pageHeaderV2 .headerBtns .formBtn{display: flex; gap: 10px; padding: 10px 12px; align-items: center; justify-content: center;}
.main.filled section.pageHeaderV2 .headerBtns .formBtn .labelText{white-space: nowrap;}
.main.filled section.pageHeaderV2 .headerBtns .formBtn i{font-size: 1.1em;}

.main.filled section.pageHeaderV2 .headerBtns{display: flex; align-items: baseline; justify-content: flex-end; flex-wrap: wrap;}

.linkObjects{display: inline-flex; gap: 5px; align-items: center;}
.linkObjects:hover{cursor: pointer;}
.linkObjects.disabled:hover{cursor: not-allowed;}
.linkObjects.disabled i.link:hover{cursor: not-allowed;}

.main.filled section.pageHeaderV2 .hx{display: flex; column-gap: 10px; align-items: baseline; flex-wrap: wrap;}
.main.filled section.pageHeaderV2 h1{display: flex; align-items: center; gap: 10px; margin: 0; padding: 0 0 8px 0; font-size: 2em; text-align: left;}
.main.filled section.pageHeaderV2 h1 i{margin: 0; padding: 5px; font-size: 0.8em;}
.main.filled section.pageHeaderV2 h1 i.fa-star{margin: 0; padding: 0; font-size: 0.6em;}
.main.filled section.pageHeaderV2 h2{margin: 0; padding: 0 0 8px 0; font-size: 1em; text-align: left;}
.main.filled section.pageHeaderV2 h3{margin: 0; padding: 5px;}
.main.filled section.pageHeaderV2 h4{margin: 0; padding: 5px; font-weight: normal;}

i.sortControl{color: #a8a8a8;}
i.sortControl.activeSort{color: initial;}

.rfa-counter{position: relative;}
.rfa-counter::after {
	content: attr(data-counter); position: absolute; top: -12px; right: 90%; background: var(--blue);
	color: white; font-size: 9px; font-weight: bold; border-radius: 50%; min-width: 16px; height: 16px; padding: 2px;
	display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
	text-align: center; opacity: 0.75;
}
.rfa-counter:hover::after {opacity: 1;}

h2 i {margin: 0; padding: 5px;}
i.fl {float: left;}
i.fr {float: right;}

section.block > div{
	/*background-color: #cbcbcb;*/
	color: #333;
	font-size: 16px;
	display: inline-block;
	min-height: 120px;
	padding: 10px;
	margin: 0;
	box-sizing: border-box;
	text-decoration: none;
}

i.fa-xmark{color: var(--badRed);}
i.fa-check{color: var(--goodGreen);}
/*i.fa-plus{color: var(--yellow);}*/

.redMsgText{color: var(--badRed); font-weight: bold;}

section.block.kpiBlock{flex-wrap: nowrap; margin-top: -15px; }

section.block h1{display: block;width: 100%; margin: 5px 0;}
section.block.search{overflow: initial;}

section.block.short.fiveAcross > div{width: calc(20% - 20px);}
section.block.short > div{width: calc(33% - 20px);min-width: 120px;max-width: 240px;}
section.block.long > div{width: calc(100% - 20px);}

section.block .kpiBox{display: flex; justify-content: center; align-items: flex-start; font-size: 32px;}
section.block .kpiBox.vCenter{align-items: center;}
section.block .kpiBox .action{padding: 0 0 0 5px; font-size: 0.7em;}
section.block .kpiBox .kpi{margin: 0 10px;}

section.block .kpiBox.flashRed{color: #ffffff; background-color: red; animation: liveBlinker 1s linear infinite; max-width: 400px; width: 33.333%;}
section.block .kpiBox.flashRed h3,
section.block .kpiBox.flashRed h4{color: #ffffff;}




@keyframes tickerh {
	0% { transform: translate3d(0, 0, 0); }
	100% { transform: translate3d(-205%, 0, 0);}

}
section.block .kpiBox .kpi.ticker{overflow: hidden;}
section.block .kpiBox .kpi.ticker div{animation: tickerh linear 20s 3; animation-delay: 3s; font-size: 0.5em; white-space: nowrap; line-height: 42px;}
section.block .kpiBox .kpi.ticker div:hover { animation-play-state: paused; }


section.block .kpiBox .kpi.bold{font-weight: bold;}
section.block .kpiBox .kpi.shadow span{text-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.5);}

section.block .kpiBox .kpi.green, section.block .kpiBoxV2 .kpi.green{color: var(--goodGreen);}
section.block .kpiBox .kpi.red, section.block .kpiBoxV2 .kpi.red{color: var(--badRed);}
section.block .kpiBox .kpi.blue, section.block .kpiBoxV2 .kpi.blue{color: #255697;}
section.block .kpiBox .kpi.yellow, section.block .kpiBoxV2 .kpi.yellow{color: #bc9d5c;}
section.block .kpiBox .kpi.orange, section.block .kpiBoxV2 .kpi.orange{color: #C87532;}

section.block .kpiBox h3{font-size: 0.5em; margin: 0 0; color: #333333;}
section.block .kpiBox h4{font-size: 0.45em; margin: 0; padding: 0; color: #333333; font-weight: normal;}



section.block.short > div.kpiBoxV2{
	width: 100%; min-width: 100px; border: #ccc solid 1px; box-sizing: border-box; box-shadow: 3px 3px 10px 0 #ddd;
	display: flex; justify-content: center; align-items: center; position: relative;}
section.block.short > div.kpiBoxV2.hidden{display: none;}

section.block.short > div.kpiBoxV2:last-child,
section.block.short > div.kpiBoxV2:nth-child(4n){margin-right: 0;}
section.block.short .kpiBoxV2 h1{ color: #333333; font-size: clamp(1rem, 2vw, 1.2rem); font-weight: 600; font-family: 'Spline Sans', sans-serif;}
section.block.short .kpiBoxV2 h4{ color: #666666; font-size: 0.75rem; font-family: 'Spline Sans', sans-serif; font-weight: normal; margin: 5px 0;}
section.block.short .kpiBoxV2 span{ margin-bottom: 10px; font-size: clamp(1.2rem, 3.5vw, 2rem);}
section.block.short .kpiBoxV2.sml span{font-size: clamp(1.2rem, 1.5vw, 2rem);}

section.block.short.kpiBlock {justify-content: center; flex-wrap: wrap; padding: 0 0 10px; overflow: hidden; margin-top: 0; gap: 30px;}
section.block.short.kpiBlock.center {justify-content: center;}
section.block.short.kpiBlock.noWrap{flex-wrap: nowrap;}


section.block.short .kpiBoxV2 .progressBG{  position: absolute;  bottom: 0;  left: 0;  background-color: var(--accent);  width: 0;  height: 15px;  z-index: 0; transition: width ease 1s;}
section.block.short .kpiBoxV2 .progressBG.blink{animation: liveBlinker 1s linear infinite;}
section.block.short .kpiBoxV2 .progressBGBorder{ content: ''; position: absolute;  bottom: 0; left: 0;  width: 100%;
	height: 15px; border-top: 1px #666666 solid; z-index: 0; background: repeating-linear-gradient( 135deg, var(--ultraLight) 0px, var(--ultraLight) 10px, #FFFFFF 10px, #FFFFFF 20px); }


section.block.short .shortBlockBtn{font-size: 18px; transition: background-color 150ms ease-in; display: flex; justify-content: space-around; flex-direction: column;}
section.block.short .shortBlockBtn:hover{cursor: pointer; background-color: #EEE;}
section.block.short .shortBlockBtn.blank:hover{cursor: initial; background-color: #ffffff;}
section.block.short .shortBlockBtn i{display: block;font-size: 2em; padding: 15px 0 0px;}

section.block.long .longBlock{font-size: 18px; display: flex; justify-content: space-between; flex-direction: row; align-items: center;}
section.block.long .longBlock.bg{background-color: #eee;}
section.block.long .longBlock.bgLight{background-color: #f9f9f9;}
section.block.long .longBlock.bg.apAgenda{min-height: 50px; height: 50px; width: 160px;}

section.block.long .longBlock.btn{transition: background-color 150ms ease-in; background-color: #eee; border: #999 solid 1px; padding: 10px 20px; margin: 10px 0; box-sizing: border-box;}
section.block.long .longBlock.btn:hover{cursor: pointer; background-color: #ddd;}
section.block.long .longBlock.btn.noHover:hover{cursor: initial; background-color: #eee;}
section.block.long .longBlock.btn.border-red{border-width: 0 0 0 10px; border-style: solid; border-color: #ce6262;}
section.block.long .longBlock.btn.border-green{border-width: 0 0 0 10px; border-style: solid; border-color: #3ebf46;}
section.block.long .longBlock.btn.border-yellow{border-width: 0 0 0 10px; border-style: solid; border-color: #E5CF72;}
section.block.long .longBlock.btn.border-orange{border-width: 0 0 0 10px; border-style: solid; border-color: #ff9d66;}

section.block.long .longBlock .subject{text-align: left;}
section.block.long .longBlock .subject h2{margin: 0;}
section.block.long .longBlock .subject.textOnly{text-align: left; font-size: 24px;}
section.block.long .longBlock .subject i{display: block;font-size: 2em; padding: 15px 0 0;}

section.block.long.narrow.form{margin-bottom: 0;}
section.block.long.narrow > div{min-height: 60px; height: 60px; margin: 10px 0;}

section.block.long.thin.form{margin-bottom: 0;}
section.block.long.thin > div{min-height: 0; height: unset; margin: 4px 0;}

.sectionBox.thin section.block.long.narrow > div{margin: 0;}
.sectionBox.thin section.block.long.narrow > div.longBlock.formInput{padding: 0;}
section.block.long.narrow.lineBreak > div{min-height: 0; height: 0; margin: 0; padding: 0;}
section.block.long.narrow.h10 > div{min-height: 0; height: 10px; margin: 0; padding: 0;}
section.block.long.narrow.h20 > div{min-height: 0; height: 20px; margin: 0; padding: 0;}
section.block.long.narrow.h30 > div{min-height: 0; height: 30px; margin: 0; padding: 0;}
section.block.long.narrow.h50 > div{min-height: 0; height: 50px; margin: 0; padding: 0;}
section.block.long.narrow.h100 > div{min-height: 0; height: 100px; margin: 0; padding: 0;}


section.block.long.narrow > div.largeImgPreview{min-height: 60px; max-height: 300px; height: fit-content; margin: 10px 0;}
section.block.long.narrow .longBlock .kpiBox{font-size: 20px;}
section.block.long.narrow.labelPositionTop .longBlock .kpiBox{margin: 0 0 -25px 0;}
section.block.long.narrow .longBlock .kpiBox .textControlIcons{padding-left: 10px; font-size: 1.2em;}
section.block.long.narrow .longBlock .subject{font-size: 16px; display: flex; align-items: center;}
section.block.long.narrow .longBlock .subject i{display: inline-block; padding: 0 15px 0 0;}
section.block.long.narrow .longBlock .kpiBox .action{font-size: 1em;}

section.block.long.narrow.form.tight .formInput{min-height: initial; margin: 0;}
section.block.long.narrow.form.tight .formInput .subject{margin: 0;}

section.block.long.smallFontSize .longBlock.formInput textarea{font-size: 0.8em;}


section.block.long.narrow.heightDy > div{height: initial;}
.sectionBox section.noAdditionalSpace{width: 100%;}
.sectionBox section.noMarPad{margin: 0; padding: 0;}

.apDetail{display: inline-flex;}
.block.long.narrow.apDetail > div,
.apDetail > div
{height: initial; width: 280px;}
.apDetail .detailItem{font-size: 16px; display: flex; justify-content: center; flex-direction: column; align-items: center; transition: background-color 150ms ease-in; background-color: #eee; margin: 0; padding: 10px;}
.apDetail .detailItem > div{width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center;}
.apDetail .detailItem > div.resultRow{flex-direction: column;margin-top: 10px;}
.apDetail .detailItem .subject{text-align: left;}
.apDetail .detailItem .detailInput{display: flex; flex-direction: row; font-size: 20px}
.apDetail .detailItem .detailInput input{width: 100%;box-sizing: border-box;padding: 2px; border-width: 0 0 1px 0;border-style: solid;border-color: #bbbbbb; background-color: #eeeeee ;margin: 0 2px; font-size: 17px; outline: none; resize: none;}
.apDetail .detailItem .result{display: flex; flex-direction: row; width: 100%; justify-content: space-between; padding: 2px 0 0;}
.apDetail .detailItem .result div{margin: 1px; background-color: #d0d0d0; width: 10px; height: 10px; box-sizing: border-box;}
.apDetail .detailItem .result div.transparent{background-color: transparent;}
.apDetail .detailItem .result div.green{background-color: var(--goodGreen);}
.apDetail .detailItem .result div.red{background-color: var(--badRed);}

h1 i{padding: 0 10px; }
i.hiddenDefault{display: none;}
i.space5{padding: 0 5px; }
i.green{color: var(--goodGreen) !important;}
i.red{color: var(--badRed) !important;}
i.yellow{color: var(--progressYellow);}
i.gold{color: #ffcc00;}
i.orange{color: var(--progressOrange);}
i.blue{color: var(--progressBlue);}
i.gray{color: var(--lightGray);}
i.darkGray{color: var(--darkGray);}
i.midGray{color: #999;}
i.midLightGray{color: #ccc;}
i.white{color: #ffffff;}

/*hover scroll to end*/

.searchMultiTextWrapper{display: flex; width: 100%; justify-content: space-between; align-items: center;}
.searchMultiText{white-space: pre; overflow-x: auto; padding: 2px 0; -ms-overflow-style: none; scroll-behavior: smooth;  /* Internet Explorer 10+ */ scrollbar-width: none;  /* Firefox */}
.searchMultiText::-webkit-scrollbar{display: none;}
.searchMultiText span {display: inline-block; padding: 5px 8px; margin: 0 5px; border-radius: 6px; outline: 1px solid #9f9f9f; font-size: 0.9em; user-select: none;}

.searchMultiTextV2 {display: flex; flex-wrap: wrap; gap: 20px; width: 100%; padding: 15px 1px 5px; box-sizing: border-box;}
.searchMultiTextV2 span {display: flex; align-items: center; gap: 15px; padding: 5px 8px; border-radius: 6px; outline: 1px solid #9f9f9f; font-size: 0.9em; user-select: none; width: min-content;}
section.block.long .longBlock.formInput .subject .searchMultiTextV2 label:not(.formBtn){display: inline-block; padding: 0; text-transform: unset; white-space: nowrap; font-size: 0.9em;}
section.block.long .longBlock.formInput .searchMultiTextV2 span select{width: clamp(100px, 100%, 200px); margin: 0; border-width: 0 0 1px 0; box-sizing: border-box; padding: 4px; font-size: 0.9em;}

.searchMultiTextCount {display: inline-block; padding: 3px 5px; margin: 0 5px; border-radius: 6px; outline: 1px solid #9f9f9f; font-size: 0.9em; user-select: none;}
section.block.long .longBlock .subject .searchMultiTextWrapper i{font-size: 1.1em; padding: 5px; display: inline-block;}

/*.searchResult{width: 100%; min-width: 250px; text-align: left; border: 1px #ccc solid;border-width: 0 1px;position: absolute;display: none;font-size: 16px;background-color: #ccc;box-sizing: border-box;}*/
/*.searchResult.active{display: block; z-index: 2; box-shadow: 0px 10px 15px -5px #333;}*/
/*.searchResult.fixed{position: absolute; width: initial;}*/
/*.searchResult > div{padding: 5px;background-color: #fff;border-bottom: 1px solid #ccc;}*/
/*.searchResult div:hover:not(.noLink){background-color: #ccc; cursor: pointer;}*/
/*.searchResult div:hover{user-select: none;}*/

.searchResult,
.formRow > div > div.actionFunctionResult
{
	width: 100%; min-width: 250px; text-align: left; border: 1px #ccc solid;border-width: 0 1px;position: absolute;display: none;font-size: 16px;background-color: #ccc;box-sizing: border-box;
	.active{display: block; z-index: 2; box-shadow: 0px 10px 15px -5px #333;}
	.fixed{position: absolute; width: initial;}
	& > div{padding: 5px;background-color: #fff;border-bottom: 1px solid #ccc;}
	div:hover:not(.noLink){background-color: #ccc; cursor: pointer;}
	div:hover{user-select: none;}
}

.searchResult span.tag{display: inline-block;padding: 2px 5px;margin: 0 5px;border-radius: 50vw;border: 1px solid #9f9f9f;font-size: 0.8em;user-select: none; color: #000000}
.searchResult span.tag.yellow{background-color: var(--progressYellow); border-color: #d3bf1f;}
.searchResult span.tag.orange{background-color: var(--progressOrange); border-color: #ba742d;}
.searchResult span.tag.green{background-color: var(--goodGreen); border-color: #3ebf46;}
.searchResult span.tag.red{background-color: var(--badRed); border-color: #ce6262;}
.searchResult span.tag.blue{background-color: var(--progressBlue); border-color: #255697;}
.searchResult span.tag.gray{background-color: var(--lightGray); border-color: #9f9f9f;}
.searchResult span.tag.darkGray{background-color: var(--darkGray); border-color: #333333;}
.searchResult span.tag.white{background-color: #ffffff; border-color: #9f9f9f;}
.searchResult span.tag.black{background-color: #000000; border-color: #9f9f9f;}



.searchColorObj {display: flex;}
.searchColorObj div.colorSample{width: 30px; height: 30px; display: inline-block; outline: #333333 dashed 1px; box-sizing: border-box; border-radius: 5px;}
.searchColorObj span{line-height: 30px; vertical-align: center; padding-left: 10px; font-size: 1.2em;}

.formRow .searchResult,
.limitSearchHeight .searchResult,
.searchResult[popover]
{max-height: 300px; overflow-y: auto;}
/*{position: absolute; max-height: 300px; overflow-y: auto;}*/

.formRow .searchResult > div.multiSelect{display: grid; grid-template-columns: 25px 1fr; grid-gap: 5px; align-items: center;}

.formInput .subject > div{position: relative;}
.formRow .formInput .subject > div{position: initial;}

section.block.long .longBlock.formInput input[type='text'],
section.block.long .longBlock.formInput input[type='number'],
section.block.long .longBlock.formInput input[type='password'],
section.block.long .longBlock.formInput input[type='date'],
section.block.long .longBlock.formInput input[type='time'],
section.block.long .longBlock.formInput input[type='datetime-local'],
section.block.long .longBlock.formInput textarea,
.formRow .popUpBox textarea,
.formRow .popUpBox input:not(.excludeFormPopRow), .formRow .popUpBox select,
section.block.long .longBlock.formInput select,
.stdInput
{width: 100%;box-sizing: border-box;padding: 5px;border-width: 0 0 2px 0;border-style: solid;border-color: #bbbbbb;margin: 5px 0 0;font-size: 17px;outline: none; resize: none;}

section.block.long .longBlock.formInput input:read-only,
section.block.long .longBlock.formInput textarea:read-only
{background-color: #eeeeee;}


section.block.long .longBlock.formInput textarea,
.formRow .popUpBox textarea
{border-width: 2px; height: 100px;}
.formRow .popUpBox textarea.displayPin{text-align: center; font-size: 3rem; line-height: 80px;}
.formRow .popUpBox .popUpQRCodeElement{text-align: center;}

.emptyTableText{font-size: 1.1rem; color: #777; font-style: italic; padding: 20px 0; text-align: center; width: 100%}

.formRow .formObjectBox{display: flex; flex-wrap: wrap; justify-content: space-between;}
.formRow .formObjectBox .formObject{width: calc(50% - 10px); text-align: left; padding: 10px 0;}
.formRow .formObjectBox .formObject:nth-of-type(2n){margin: 0 10px 0 0;}
.formRow .formObjectBox .formObject:nth-of-type(2n+1){margin: 0 0 0 10px;}

section.block.long .longBlock.formInput input[type='text']:focus,
section.block.long .longBlock.formInput input[type='number']:focus,
section.block.long .longBlock.formInput input[type='password']:focus,
/*section.block.long .longBlock.formInput input[type='date']:focus,*/
/*section.block.long .longBlock.formInput input[type='time']:focus,*/
/*section.block.long .longBlock.formInput input[type='datetime-local']:focus,*/
section.block.long .longBlock.formInput textarea:focus,
section.block.long .longBlock.formInput select:focus
{border-color: #0D80A0;}

section.block.long .longBlock.formInput input[type='button'],
section.block.long .longBlock.formInput input[type='submit']
{width: 100%;box-sizing: border-box; border-radius: 5px; margin: 10px 0 0; padding: 10px; border: none; font-size: 17px; outline: none;}

section.block.long .longBlock.formInput input[type='button'].primary,
section.block.long .longBlock.formInput input[type='submit'].primary{background-color: var(--primary); color: #ffffff}

section.block.long .longBlock.formInput input[type='button']:hover,
section.block.long .longBlock.formInput input[type='submit']:hover
{background-color: #ccc; cursor: pointer;}

section.block.long .longBlock.formInput input[type='button'].primary:hover,
section.block.long .longBlock.formInput input[type='submit'].primary:hover{background-color: var(--dark); color: #ffffff}

section.block.long .longBlock.formInput .subject{width: 100%;display: flex;align-items: flex-start;flex-direction: column;}
section.block.long .longBlock.formInput .subject.center{align-items: center;}
section.block.long .longBlock.formInput .subject.flexStart{align-items: flex-start;}
section.block.long .longBlock.formInput .subject.directionRow{flex-direction: row; align-items: center;}
section.block.long .longBlock.formInput .subject.directionRow .cbcon{margin-right: 10px;}
section.block.long .longBlock.formInput .subject.lgLabel label:not(.cbcon){font-size: 1rem; margin: 3px 0 0; padding: 0}
section.block.long .longBlock.formInput .subject label{font-size: 0.8em;}
section.block.long .longBlock.formInput .subject label span.formRequired{color: #b83037; font-size: 0.85em;}

.largeImgPreview .previewImg{max-width: 300px; object-fit: scale-down;}
.previewImg{width: 100%; max-width: 150px; aspect-ratio: 1.333; object-fit: cover; padding: 10px 0;}
.previewImg.link{box-shadow: 0 0 0 #333; transition: box-shadow 100ms; margin: 10px 0;}
.previewImg.link:hover{cursor: zoom-in; opacity: 0.85; box-shadow: 0 0 5px #333;}

/*i.link:hover{color: #999; cursor: pointer;}*/
i.link:hover{opacity: 0.7; cursor: pointer;}
i.large{font-size: 1.5em;}
.formRow i.large{font-size: 1.5em; width: 45px; box-sizing: border-box;}

.blockSizeMin-1{width: 10px !important;}
.blockSizeMin-2{width: 20px !important;}
.blockSizeMin-3{width: 30px !important;}
.blockSizeMin-4{width: 40px !important;}
.blockSizeMin-5{width: 50px !important;}
.blockSizeMin-6{width: 60px !important;}
.blockSizeMin-7{width: 70px !important;}
.blockSizeMin-8{width: 80px !important;}
.blockSizeMin-9{width: 90px !important;}
.blockSizeMin-10{width: 100px !important;}
.blockSizeMin-11{width: 110px !important;}
.blockSizeMin-12{width: 120px !important;}
.blockSizeMin-13{width: 130px !important;}
.blockSizeMin-14{width: 140px !important;}
.blockSizeMin-15{width: 150px !important;}
.blockSizeMin-16{width: 160px !important;}
.blockSizeMin-17{width: 170px !important;}
.blockSizeMin-18{width: 180px !important;}
.blockSizeMin-19{width: 190px !important;}
.blockSizeMin-20{width: 200px !important;}
.blockSizeMin-21{width: 210px !important;}
.blockSizeMin-22{width: 220px !important;}
.blockSizeMin-23{width: 230px !important;}
.blockSizeMin-24{width: 240px !important;}
.blockSizeMin-25{width: 250px !important;}
.blockSizeMin-26{width: 260px !important;}

@keyframes lightColorBlinker {
	0% {background-color: var(--light);}
	50% {background-color: var(--ultraLight);}
	100% {background-color: var(--light);}
}

.formScrollable{overflow-y: scroll; overflow-x: hidden; max-height: calc(100vh - 400px);}
.scrollShort .formScrollable{overflow-y: scroll; max-height: calc(100vh - 600px);}

.formV2MenuHelp {
	display: flex;
	box-sizing: border-box;
	height: 22px;
	border-radius: 22px;
	padding: 3px 2px; background-color: #ffffff; align-items: center;
	gap: 4px;
	border: 1px solid #e1e1e1;

	i{font-size: 0.9em;}
}
.formV2MenuHelp .separator{width: 1px; height: 22px; background-color: #e1e1e1; margin: 0;}


.formRow i{font-size: 1.2em;}

.formRow i{cursor: move;}
/*.formRow.dragging{opacity: 0.7;}*/

.formRow{display: flex;width: 100%; margin: 0 5px; border-bottom: var(--formRow-border-width) solid #bbbbbb; flex-direction: row;flex-wrap: nowrap;justify-content: space-between; scroll-margin-top: 65px; position: relative;}
.formRow.borderForNoHeader:first-of-type{border-top: solid 1px var(--midtone);}
.formRow.head{border-width: var(--formRow-border-width) 0; border-style: solid; border-color: #bbbbbb; font-weight: bold; color: var(--yellow)}

.formRow.subHead{position: sticky; top: var(--headBarHeight); z-index: 2; background-color: #ffffff;}
.formRow.subHead > div{font-size: 1.1rem; font-style: italic; border: 0; padding-top: 20px;}
.formRow.subHead > div:first-child{border: 0;}

.noHeaderAddBorder .formRow:first-child{border-top: solid 1px #bbbbbb;}

.formRow.head div{display: inline-flex; align-items: center; font-size: 16px; justify-content: flex-start;}
.formRow.head.smlText div{font-size: 15px;}
.formRow.noAdditionalSpace{margin: 0;}
.formRow.bgColor-white{background-color: #ffffff;}
.formRow.noWrap{white-space: nowrap;}
.formRow.head.scrollable{overflow: hidden; box-sizing: border-box; border-right-width: 10px; border-right-color: #dedede;}
.formRow > div{width: 100%; background-color: #ffffff;}
.formRow.smlText > div, .formRow.smlText > div input, .formRow.smlText > div select, .formRow.smlText > div textarea, .formRow.smlText > div i{font-size: 14px;}

.formRow.head.largeDisplayText div{font-size: 26px;}
.formRow.largeDisplayText > div, .formRow.largeDisplayText > div input, .formRow.largeDisplayText > div select, .formRow.largeDisplayText > div textarea, .formRow.largeDisplayText > div i{font-size: 24px;}

.formRow input[type='text'],
.formRow input[type='password'],
.formRow input[type='number'],
.formRow input[type='date'],
.formRow input[type='time'],
.formRow input[type='datetime-local'],
.formRow textarea, .formRow select
{width: 100%; box-sizing: border-box; margin: 0; font-size: 16px; outline: none; border: none}
input[type="text"].currencyInput{text-align: right;}
.formRow div.center input[type='text']{text-align: center;}

.formRow > div {width: 100%; box-sizing: border-box; padding: 5px; border-width: 0 var(--formRow-border-width) 0 0; border-style: solid;border-color: #bbbbbb; margin: 0; font-size: 16px; display: flex; align-items: center; justify-content: flex-start; text-align: left; overflow: hidden;}
.formRow > div:last-of-type{overflow: visible;}
.formRow > div.center{ justify-content: center; text-align: center;}
.formRow > div .cellSplit{width: 1px; background-color: #bbbbbb;}
.formRow > div.right{ justify-content: flex-end; text-align: right;}
.formRow > div.searchMulti{ align-items: baseline; gap: 10px;}
.formRow > div.searchMulti:not(.active) i{ display: none;}
section.block.long.center .longBlock.formInput .subject{align-items: center;}
.formRow > div:first-child{border-width: 0 var(--formRow-border-width) 0 var(--formRow-border-width); border-style: solid;border-color: #bbbbbb;}
.formRow > div i{padding: 0 5px;}
.formRow > div > div{width: 100%;}
.formRow textarea{resize: none; height: 60px; padding: 5px; background-color: transparent;}
.formRow .largeHeight textarea{height: 120px;}
.formRow > div > div.searchInputWrapper.searchDependantV2{display: flex; align-items: center;}
.formRow > div > div.searchInputWrapper.searchDependantV2 input.searchDependantV2{background-color: transparent;}
.formRow > div > div.searchInputWrapper.searchDependantV2 i{font-size: 0.9em; margin-top: 3px;}

.formRow:not(.altColorTextOnly) > div.cellGray,
.formRow:not(.altColorTextOnly) > div.cellGray select,
.formRow:not(.altColorTextOnly) > div.cellGray input
/*{color: var(--disabledText); font-style: italic; background-color: transparent;}*/
{color: var(--disabledText); font-style: italic;}

.formRow:not(.altColorTextOnly) > div.cellGray.cellColor-blue{background-color: #caddea;font-style: unset;color: #000;}
.formRow:not(.altColorTextOnly) > div.cellGray.cellColor-green{background-color: #c8e6c9;font-style: unset;color: #000;}
.formRow:not(.altColorTextOnly) > div.cellGray.cellColor-red{background-color: #ffcdd2;font-style: unset;color: #000;}
.formRow:not(.altColorTextOnly) > div.cellGray.cellColor-yellow{background-color: #fff9c4;font-style: unset;color: #000;}

.formRow.lightGreen:not(.altColorTextOnly) > div.cellGray input {display: none;}
.formRow.lightGreen:not(.altColorTextOnly) > div.cellGray:not(:last-of-type)::before,
.formRow.lightGreen:not(.altColorTextOnly) > div.cellGray select::before,
.formRow.lightGreen:not(.altColorTextOnly) > div.cellGray input::before,
.formRow.lightGreen span.disabledText
{font-style: italic; font-size: 0.6em; content: "Disabled"; text-align: center; width: 100%; user-select: none;}

.formRow.red,
.formRow.red > div,
.formRow.red > div select,
.formRow.red > div input,
.formRow.yellow.red,
.formRow.yellow.red > div,
.formRow.yellow.red > div select,
.formRow.yellow.red > div input
{background-color: var(--badRedForm);}
/* .formRow.red i{color: #ffffff;} */

.formRow.red .searchResult > div{background-color: var(--badRedForm);}
.formRow.red .searchResult > div:hover{color: #333333;}

.formRow.blue,
.formRow.blue > div,
.formRow.blue > div select,
.formRow.blue > div input,
.formRow.yellow.blue,
.formRow.yellow.blue > div,
.formRow.yellow.blue > div select,
.formRow.yellow.blue > div input
{background-color: var(--light);}
/* .formRow.blue i{color: #ffffff;} */

.formRow.blue .searchResult > div{background-color: var(--light); color: #ffffff;}
.formRow.blue .searchResult > div:hover{color: #333333;}

.formRow.green,
.formRow.green > div,
.formRow.green > div select,
.formRow.green > div input,
.formRow.yellow.green,
.formRow.yellow.green > div,
.formRow.yellow.green > div select,
.formRow.yellow.green > div input
{background-color: var(--lightGreen);}
/* .formRow.green i{color: #ffffff;} */

.formRow.green .searchResult > div{background-color: var(--lightGreen); color: #ffffff;}
.formRow.green .searchResult > div:hover{color: #333333;}
/*.horizontalScrollable .formRow.green > div.sticky{background-color: var(--lightGreen);}*/



.formRow.blink,
.formRow.blink > div,
.formRow.blink > div > select,
.formRow.blink > div > input:not(.excludeFormPopRow)
{animation: lightColorBlinker 0.8s linear infinite;}

.formRow.yellow,
.formRow.yellow > div,
.formRow.yellow > div select,
.formRow.yellow > div input
{background-color: #fff6a3; color: #000000;}

.formRow.lightGreen,
.formRow.lightGreen > div,
.formRow.lightGreen > div select,
.formRow.lightGreen > div input
{background-color: var(--lightGreen); color: #000000;}

.formRow.accent,
.formRow.accent > div,
.formRow.accent > div select,
.formRow.accent > div input
{background-color: var(--accent); color: #333;}

.formRow.light,
.formRow.light > div,
.formRow.light > div select,
.formRow.light > div input
{background-color: var(--light); color: #333;}

.formRow.ultraLight:not(.formRow.red):not(.formRow.yellow):not(.formRow.green),
.formRow.ultraLight:not(.formRow.red):not(.formRow.yellow):not(.formRow.green) > div,
.formRow.ultraLight:not(.formRow.red):not(.formRow.yellow):not(.formRow.green) > div select,
.formRow.ultraLight:not(.formRow.red):not(.formRow.yellow):not(.formRow.green) > div input:not(.excludeFormPopRow)
{background-color: var(--ultraLight); color: #333;}

/*.formRow.rowLevel2,*/
/*.formRow.rowLevel2 > div,*/
/*.formRow.rowLevel2 > div select,*/
/*.formRow.rowLevel2 > div input*/
/*{background-color: var(--light); color: #000000;}*/
.formRow.rowLevel2 > div:first-child{border-left-width: 15px;}


/*.formRow.rowLevel3,*/
/*.formRow.rowLevel3 > div,*/
/*.formRow.rowLevel3 > div select,*/
/*.formRow.rowLevel3 > div input*/
/*{background-color: var(--ultraLight); color: #000000;}*/
.formRow.rowLevel3 > div:first-child{border-left-width: 30px;}


/*.formRow.rowLevel4,*/
/*.formRow.rowLevel4 > div,*/
/*.formRow.rowLevel4 > div select,*/
/*.formRow.rowLevel4 > div input*/
/*{background-color: #ffffff; color: #333;}*/
.formRow.rowLevel4 > div:first-child{border-left-width: 45px;}


.selectDependantV2{display: grid; grid-template-columns: minmax(0, 1fr) 18px; gap: 2px; width: 100%; overflow-x: hidden;}
.selectDependantV2:hover{cursor: pointer;}
.selectDependantV2 span{display: flex; flex-wrap: nowrap; white-space: nowrap; overflow: hidden;}


.horizontalScrollable{overflow-x: auto; overflow-y: hidden; padding-bottom: 300px;}
.noPadding .horizontalScrollable,
.noPaddingBottom .horizontalScrollable
{padding-bottom: 0;}
.hsHeaderNoSticky .horizontalScrollable.hsHeader{position: unset;}
.horizontalScrollable.hsHeader{overflow-x: hidden; overflow-y: hidden; padding-bottom: 0; position: sticky; top: 50px; z-index: 1}
.noStickyHeader-y .horizontalScrollable.hsHeader{position: unset;}
/*.horizontalScrollable.hsHeader .formRow > div.sticky{z-index: 0}*/
.horizontalScrollable .horizontalScrollableTextWrap{white-space: normal;}
.horizontalScrollable .formRow{width: fit-content; min-width: 100%; margin: 0;}
.horizontalScrollable .formRow > div{flex-grow: 1;}
.formRow > div.headerFilterFlexBox{display: flex; justify-content: space-between;}
.horizontalScrollable .formRow > div.headerFilterFlexBox{display: flex; justify-content: space-between;}
/*.horizontalScrollable .formRow > div.headerFilterFlexBox*/
.horizontalScrollable .formRow.head > div.sticky{z-index: 2}
.horizontalScrollable .formRow > div.sticky{position: sticky;}
.horizontalScrollable .formRow > div.stickyAction {position: sticky; z-index: 0; right: 0; border-left-width: 1px;}
.horizontalScrollable .formRow .stickyAction:has(.darkBg.active) {z-index: 1;}
.horizontalScrollable .formRow .stickyAction:has(.tooltipWrap .tooltipTarget:hover){z-index: 1;}
.horizontalScrollable .formRow > div.stickyActionNonFixed {border-left-width: 1px;}
.horizontalScrollable .formRow > div:nth-last-of-type(2){border-right-width: 0;}


.progress-container { position: relative; width: 100%; max-width: 400px; height: 0; background-color: #b1b1b1; border-radius: 40px; overflow: hidden;}
.progress-container.active {height: 20px;}
.progress-bar{ position: absolute; height: 100%; width: 0; text-align: center; background-color: var(--primary); line-height: 20px; border-radius: 25px 0 0 25px; transition: width 0.4s ease; animation: pulseProgressBar 500ms infinite;}
.progress-bar.complete {background-color: #28a745;}
.progress-bar.error {background-color: #dc3545;}

.progress-bar-text {position: absolute; height: 100%; width: 100%; text-align: center; line-height: 20px; font-size: 0.75em; color: #FFFFFF; border-radius: 25px 0 0 25px; filter: drop-shadow(0 0 3px #555); user-select: none;}

@keyframes pulseProgressBar {
	0% {opacity: 80%;}
	50% {opacity: 100%;}
	100% {opacity: 80%;}
}

.main.rightNavActive{
	/*width: calc(100% - var(--navLeftWidth) - 350px);*/
}

.main.full{
	width: 100%;
	padding: 30px 20px 0 20px;
	margin-left: 0;
}

.main.wide{
	/*account from scorll bar*/
	height: calc(100vh - 100px);
}


.loading{display: none;width: calc(100% - 50px);height: calc(100vh - 50px);margin-top: 50px;margin-left: 50px;position: fixed;z-index: 10000;box-sizing: border-box;cursor: wait;justify-content: center;align-items: center;}
.loading.fullScreen{width: 100%;height: 100%;margin-top: 0;margin-left: 0; top: 0;}
.loading i{font-size: 0; color: #ffffff;}
.loading.activeLong i{font-size: 3rem; color: #ffffff;}

.loading.active{display: flex;}
.loading.activeLong{background-color: rgba(0, 0, 0, 0.70);}

.navLeft{
	height: calc(100% - 50px);
	width: var(--defaultNavLeftWidthClosed);
	overflow-y: auto;
	overflow-x: hidden;
	white-space: nowrap;
	background-color: #eee;
	box-sizing: border-box;
	vertical-align: top;
	display: inline-block;
	margin-top: 50px;
	position: fixed;
	left: 0;
	top:0;
	z-index: 10;
	transition: width 0.3s;
}

.navLeft::-webkit-scrollbar{width: 5px;}

.navLeft.active{width: var(--navLeftWidth);}
.navLeft > .btn{
	font-size: 16px;text-align: left;color: #333;width: 100%;height: 45px;line-height: 40px;padding: 0; vertical-align: middle; text-decoration: none; user-select: none;
	display: flex;justify-content: space-between; box-sizing: border-box; align-items: center;}

.navLeft .btn .primary{flex: 1 0 70%;}
.navLeft .btn .primary:hover,
.navLeft .btn .primary.active{background-color: var(--yellow);color: #ffffff;cursor: pointer;}
.navLeft .btn .expand{}
.navLeft .btn .expand:hover{background-color: #DDD; cursor: pointer;}
.navLeft .btn i{width: 20px;text-align: center;margin: 0 15px;left: 0;}
.navLeft .btn .expand i{margin: 0 10px;}
.navLeft .btn:visited{}


.navLeft .childBtn{height: 0; overflow: hidden; transition: height 250ms; }
.navLeft .childBtn.active{height: initial;}
.navLeft .childBtn .btn{font-size: 14px;text-align: left;color: #333;width: 100%;height: 35px;
	line-height: 35px;padding: 0 0 0 15px; vertical-align: middle; text-decoration: none; display: block;}
.navLeft .childBtn .btn:hover {background-color: var(--yellow);color: #ffffff;cursor: pointer;}
.navLeft .childBtn .btn.active {background-color: var(--yellow);color: #ffffff;cursor: pointer;}

.navRight{
	height: calc(100% - var(--headBarHeight));
	width: 0;
	overflow: hidden;
	background-color: #eee;
	border-left: 1px solid #999;
	box-sizing: border-box;
	vertical-align: top;
	display: inline-block;
	margin-top: var(--headBarHeight);
	padding: 5px 10px;
	position: fixed;
	right: -20px;
	top: 0;
	z-index: 8;
	transition: width 0.3s;
	font-size: 14px;
	overflow-y: auto;
}

.navRight.active{
	width: 350px;
	right: 0;
}

.navRight .listAlpha{list-style-type: lower-alpha;}

.headerBar{height: 50px;width: 100%;font-size: 16px; overflow: hidden; background-color: white;box-sizing: border-box;vertical-align: top;position: fixed;left: 0;top: 0;z-index: 11;box-shadow: 10px 0 3px 1px rgba(0, 0, 0, 0.3);}


.headerBar img.logo{
	margin: 5px 15px;
	height: calc(100% - 10px);
	width: 190px;
}


.headerBar .btn{
	display: inline-block;
	box-sizing: border-box;
	height: var(--headBarHeight);
	line-height: 100%;
	min-width: 120px;
	padding: 14px 5px;
	vertical-align: top;
	font-size: 1.2em;
	text-align: center;
}

.headerBar .btn:first-child{
	padding-left: 16px;
	padding-right: 16px;
}

.headerBar .btn img{box-sizing: border-box; max-width: 200px; object-fit: cover; padding: 20px 10px;}
.headerBar .btn .primary{height: var(--headBarHeight); display: inline-flex; align-items: center;}

.headerBar .btn i{font-size: 0;}
.headerBar .btn.icon i{font-size: 1.2em;}
.headerBar .btn .expand i{padding: 0 10px; font-size: 1.2em;}

.headerBar .btn.fr{ float: right;}
.headerBar .btn.sml{ min-width: 50px;}
.headerBar .btn i.activeFavoriteStar{color: var(--yellow);}
.headerBar .btn:hover i.activeFavoriteStar{color: #ffcc00;}

.headerBar .btn:not(.noHover):hover,
.headerBar .btn:hover :not(.importantNotification) i.blue
{
	background-color: var(--yellow);
	color: #ffffff;
	cursor: pointer;
}

.headerBar .btn:not(.noHover):hover i.blue{
	color: #ffffff;
	cursor: pointer;
}
.headerBar .btn.textOnly:hover{
	background-color: #fff;
	color: #333;
	cursor: default;
}

.headerBar .childBtn{display: none;}

.headerBanner.edit{height: 15px;background-color: #fff653;width: 100vw;position: absolute;color: #333;font-size: 10px; overflow: hidden; padding: 0;}
.headerBanner.edit span{padding: 0 30px; line-height: 10px; margin: 0;}

#rmsg.toast.active{bottom: 30px;}
#rmsg.toast i{font-size: 1.45em;}
#rmsg.toast{ display: flex; justify-content: space-between; align-items: center; gap: 10px; position: fixed; top: unset; left: calc(50% - 300px); bottom: -200px; margin: 15px auto 0; width: 600px; max-width: 600px; text-align: left; opacity: 1; box-sizing: border-box; vertical-align: top; background-color: #EFFAED; color: #000; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3); border: 3px solid #9BDC91; padding: 15px 30px; border-radius: 4px; transition: bottom 1s; -webkit-transition: bottom 1s; -webkit-user-select: none; font-size: 1em;}
#rmsg.toast.active{bottom: 30px;}
#rmsg.toast::after{border: none; width: unset; margin: 0;}
#rmsg.toast i{color: #9BDC91;}
#rmsg.toast.red{background-color: #F2E0E0; color: #000; border-color: #EA9292;}
#rmsg.toast.red i{color: #EA9292;}
#rmsg.toast.yellow{background-color: #F9F9E0; color: #000; border-color: #EAEA92;}
#rmsg.toast.yellow i{color: #EAEA92;}
#rmsg.toast.info{background-color: #DDE7FF; color: #000; border-color: #4A70BA;}
#rmsg.toast.info i{color: #4A70BA;}

#rmsg.login{opacity: 0; color: #ffffff;}

.tooltipWrap{display: inline-block; position: relative; font-weight: normal; font-family: 'Roboto', sans-serif; line-height: initial;}

.tooltip{
	display: none;
	opacity: 0;
	z-index: 999;
	position: absolute;
	margin-top: 25px;
	box-sizing: border-box;
	vertical-align: top;
	font-size: 14px !important;
	text-align: center;
	background-color: #ffdb99;
	/*background-color: var(--primary);*/
	color: #333;
	box-shadow: 0 2px 10px 3px #33333394;
	padding: 10px 15px;
	border-radius: 3px;
	/*transition: opacity 0.8s;*/
	/*-webkit-transition: opacity 0.8s;*/
	-webkit-user-select: none; /* Chrome/Safari */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+ */
}

.formRow .tooltipTarget:hover ~.tooltip{display: block; opacity: 1; width: max-content; right: 10px; top: 10px;}
.tooltipTarget:hover ~.tooltip{display: block; opacity: 1; width: fit-content;}
/*.tooltip.delay{transition: all 0.5s ease-in 2s;}*/
.tooltip.sml{font-size: 12px !important; padding: 8px; white-space: nowrap;}
.tooltip.left{top: -25px; left: calc(100% + 20px);}
.tooltip.bottom{top: 50%; left: 0}

.tooltip::after{
	content: " ";
	position: absolute;
	bottom: 100%;  /* At the top of the tooltip */
	left: min(20px, 50%);
	margin-left: -5px;
	border-width: 10px;
	border-style: solid;
	border-color: transparent transparent #ffdb99 transparent;
}

.tooltip.left::after{
	content: " ";
	position: absolute;
	top: 50%;
	left: -15px; /* To the left of the tooltip */
	margin-top: -5px;
	border-width: 10px;
	border-style: solid;
	border-color: transparent #ffdb99 transparent transparent;
}

.tooltip.bottom::after{
	content: " ";
	position: absolute;
	bottom: 100%;
	left: 20px; /* To the left of the tooltip */
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: transparent transparent #ffdb99 transparent;
}

.tooltip.bottomRightAlign::after{
	content: " ";
	position: absolute;
	bottom: 100%;
	right: 20px;
	margin-left: calc(100% - 35px);
	border-width: 5px;
	border-style: solid;
	border-color: transparent transparent #ffdb99 transparent;
}

.main .loginBox{width: 420px; min-height: 600px; padding: 0 30px; position: relative; box-sizing: border-box; display: inline-flex; align-content: center; background-color: #ffffff;}
.main .loginBox section{margin-bottom: 0;}
.main .loginBox .sectionBox section{padding: 0 0 10px 0;}

#rmsg.login{display: inline-block;position: relative;top: 0;left: 0;margin: 5px 10px;box-shadow: none;font-size: 16px;}
#rmsg.login::after{border: none;}

#rmsg.active{opacity: 1;}
#rmsg.blue{background-color: var(--msgblu);}
#rmsg.blue::after{border-color: transparent transparent var(--msgblu) transparent;}
#rmsg.red{background-color: var(--msgred);}
#rmsg.red::after{border-color: transparent transparent var(--msgred) transparent;}
#rmsg.yellow{background-color: var(--msgyelHi); color: #333333;}
#rmsg.yellow::after{border-color: transparent transparent var(--msgyelHi) transparent;}
/*#rmsg.green{background-color: var(--msggre);}*/

#crewDetails{min-height: 150px; width: 100%;}

.dyBlock{
	vertical-align: top;
	display: inline-block;
	width: 50%;
	font-size: 16px;
	box-sizing: border-box;
	padding: 0 50px;
}

.dyBlock.center{text-align: center}
.dyBlock.f0{font-size: 0}


.numPad{
	margin: 50px calc((100% - 240px)/2);
	width: 240px;
	font-size: 0;
	box-sizing: border-box;
}

.numPad .btn{
	width: calc(33% - 8px);
	margin: 4px;
	height: 50px;
	padding: 10px 0;
	display: inline-block;
	border: solid 1px #999;
	font-size: 18px;
	box-sizing: border-box;
	border-radius: 5px;
	background-color: #fff;
	text-align: center;
	
	-webkit-user-select: none; /* Chrome/Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+ */
}

.numPad .btn:hover{
	background-color: #eee;
	cursor: pointer;
}

.numPad .btn:active{border-color: #333;}

.userCodeIn{
	width: 100%;
	box-sizing: border-box;
	font-size: 26px;
	padding: 10px;
	border-radius: 5px;
	border: solid 1px #333;
	text-align: center;
	margin: 30px 0;
}

.userCodeTxt{
	padding: 50px;
	text-align: center;
	color: #fff;
}

.userCodeTxt h1, .userCodeTxt h2{
	margin: 0;
	padding: 0;
	font-weight: normal;
}

.kpiBar{
	width: 100%;
	max-width: var(--maxWidth);
	min-width: var(--minWidth);
	font-size: 0;
	box-sizing: border-box;
	z-index: 0;	
	/*overflow: hidden;*/
	text-align: center;
	height: 0;
	transition: height 1s;
	margin: 10px 0 20px 0;
	display: inline-block;
	overflow-y: hidden;
	overflow-x: auto;
	white-space: nowrap;
}

.kpiBar.nonTop{margin-top: 10px;}
.kpiBar.active{ height: 100px;}
.kpiBar.active.live .liveDot{ display: inline-block;}
.kpiBar.flood{max-width: none;}


.kpiBar .item{
	height: 100px;
	position: relative;
	width: calc((100% - 80px)/5);
	margin: 0 20px 0 0;
	background-color: #fff;
	display: inline-block;
	font-size: 36px;
	text-align: center;
	line-height: 115px;
	vertical-align: middle;
}

.kpiBar .item.t6{width: calc((100% - 100px)/6);}
.kpiBar .item.wide{width: calc((100% - 40px)*2/5);}

.kpiBar .item.red{background-color: var(--msgredhi);}
.kpiBar .item.red span{color: #fff;}

.kpiBar .item.link{cursor:pointer;}
.kpiBar .item.link:hover{background-color: #eeeeee}

.kpiBar .item.last{margin: 0;}
.kpiBar .item .head{
	display: bolck;
	position: absolute;
	width: 100%;
	background-color: #ccc;
	font-size: 14px;
	height: 22px;
	line-height: 22px;
	overflow: hidden;
}

/*help center*/
.main .sectionBox.helpTopic{
	display: flex;
	flex-direction: column;
	margin-bottom: 24px;

	div{display: flex; width: 100%; align-items: center;}
	div.help-header{font-size: 1.1rem; margin: 0 0 4px 0;}
	a.title{font-weight: bold; text-decoration: underline; color: #2b2b2b;}
	p{font-size: 1rem; margin: 0; width: 100%; text-align: left;}

	.tag{border-radius: 500px; padding: 4px 12px; font-size: 0.75em;}
}

.timelineWrap{
	width: 100%;
	height: 120px;
	max-width: var(--maxWidth);
	min-width: var(--minWidth); 
	position: relative;
	display: inline-block;
}

.timeLine{
	position: absolute;
	left: 0;
	width: 100%;
	height: 100px;
	font-size: 0;
	box-sizing: border-box;
	z-index: 0;
	display: inline-block;
	text-align: left;
}

.timeLine.bg{
	background: repeating-linear-gradient(
		-45deg,
		#333,
		#333 10px,
		#444 10px,
		#444 20px
	);
}

.timeLine .batch{
	background-attachment: fixed !important;
	height: 100%;
	vertical-align: top;
	background: none;
	font-size: 14px;
	font-weight: bold;
	text-align: right;
	padding: 30px 5px 5px 5px;
	box-sizing: border-box;
	overflow: hidden;
	display: inline-block;
	background-color: #818b90;
	color: #333;
	border-right: 5px solid #393c3e;
	transition: width 1s;
	-webkit-transition: width 1s;
}

/*.timeLine .batch:hover{*/
	/*cursor: pointer;*/
	/*opacity: 0.90;*/
/*}*/

/*.timeLine .batch.selected{*/
	/*background-color: #CFE562;*/
/*}*/

.timeLine .batch.current{
	background-color: #ED7565;
	animation: blinker 0.5s linear infinite;
	border: none;
}

@keyframes blinker {
  50% {filter: brightness(125%);}
}
	

.timeLine .batch.tan{background-color: var(--tan);}
.timeLine .batch.yel{background-color: var(--yellow);}

.timeLine.shiftMarks{
	background-color: transparent;
	z-index: 10;
	pointer-events: none;

}

.timeLine.shiftMarks .shift{
	height: 100%;
	width: 15%;
	box-sizing: border-box;
	border: solid rgba(255,255,255,0.65) 3px;
	border-width: 3px 5px 5px 5px;
	display: inline-block;
	vertical-align: top;
}

.timeLine.shiftMarks .shift.w{width: 70%;}

.timeLine.shiftMarks .shift .label{
	height: 20%;
	width: 100%;
	box-sizing: border-box;
	background-color: rgba(255,255,255,0.65);
	display: inline-block;
	font-size: 14px;
	text-align: center;
	overflow: hidden;
}



.card{
	background-color: #fff;
	padding: 15px 10px;
	margin-bottom: 10px; 
	width: 50%;
	max-width: var(--maxWidth);
	min-width: var(--minWidth);
	box-sizing: border-box;
	overflow: hidden;
	display: inline-block;
	font-size: 16px;
	vertical-align: top;
}

.card.full.nWidth,
.card.nWidth{
	width: intrinsic;           /* Safari/WebKit uses a non-standard name */
	width: -moz-max-content;    /* Firefox/Gecko */
	width: -webkit-max-content; /* Chrome */
	max-width: none;
	width: auto;
}

.card.nWidth div{white-space: nowrap;}
.card.nWidth div div{white-space: pre-wrap;}

.card.nWidth .scrollRows div{white-space: nowrap;}
.card.nWidth .scrollRows div div{white-space: pre-wrap;}

.card.interactive{height: 45px;}
.card.interactive canvas{display: none !important;}

.card.interactive > *:not(.header){display: none;}

.card.interactive.active{height: auto;}
.card.interactive.active canvas{display: block !important;}
.card.interactive.active > *{display: block;}
.card.interactive.active i.fa-caret-down{transform: rotate(90deg);}

.card.light{background-color: rgba(255, 255, 255, 0.9);}

.card.even{
	margin: 5px;
	width: calc(50% - 10px);
}
.card.space0{font-size: 0;}
.card.overflow{overflow: visible;}
.card.full{
	margin-bottom: 10px; 
	width: 100%;
}
.card.flood{max-width: none;}
.card.flood .liveSearch{max-width: var(--maxWidth); display: inline-block;}

.card.half{
	margin: 5px;
	width: calc(50% - 10px);
	max-width: 500px;
}

.card.forth{
	margin: 5px;
	width: calc(25% - 10px);
	max-width: 300px;
}

.card .part{
	display: inline-block;
	width:50%;
}

.innerPart{
	display: inline-block;
	width: 50%;
	padding: 0 5px;
	box-sizing: border-box;
	vertical-align: top;
}

.innerPart.la{text-align: left;}

.innerPart.p100{width: 100%;}
.innerPart.p75{width: 75%;}
.innerPart.p25{width: 25%;}
.innerPart.p33{width: 33.33%;}
.innerPart.p20{width: 20%;}
.innerPart.la{text-align: left;}
.innerPart.ra{text-align: right;}
.innerPart.ca{text-align: center;}
.innerPart.sf{font-size: 16px;}

.tag{
	border-radius: 3px;
	padding: 5px 15px;
	margin: 5px 10px;
	background-color: #c5c5c5;
	display: inline-block;
	font-size: 14px;
}
.tag.blue{background-color: var(--blue); color: #ffffff;}

.card .kpiBlock{
	display: inline-block;
	width: calc(33% - 10px);
	margin: 5px;
	padding: 7px;
	font-size: 16px;
	text-align: center;
	box-sizing: border-box;
	border: 2px #bbb solid;
	vertical-align: top;
	
	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
	user-select: none;  
}

.card .kpiBlock.w25{width: calc(25% - 10px);}
.card .kpiBlock.w20{width: calc(20% - 10px);}

.card .kpiBlock.noBorder{border: none;}

.card .kpiBlock.green{background-color: var(--msggrehi2); color: #fff}
.card .kpiBlock.gray{background-color: #818b90; color: #fff}
.card .kpiBlock.yellow{background-color: var(--yellow); color: #fff}



.card .row{
	width: 100%;
	box-sizing: border-box;
	border: none;/*2px solid #ccc;*/
	margin: 10px 0;
	font-size: 0;
	display: inline-block;
}

.card .scrollRows{
	overflow-y: scroll;
	height: 65vh;
}
.card .scrollCols{
	overflow-x: scroll;
	width: 100%;
}

.card .scrollCols div{white-space: nowrap;}
.card .scrollCols div div{white-space: pre-wrap;}
.card .scrollCols .row {width: auto;}

.card .row.la{text-align: left;}
.card .row.nb{border: 0;}
.card .row.vb{vertical-align: bottom;}

.card .row.cardHead > div{vertical-align: bottom;}
.card .row.cardHead > div.btn{vertical-align: top;}
.card .row .cardHeadText {font-size: 22px; font-family: 'Roboto', sans-serif; vertical-align: bottom;}

.card .row.thin{margin: 3px 0;}
.card .row.thin.m0{margin: 0;}
.card .row.thin div{padding-top: 3px; padding-bottom: 3px;}
.card .row.thin div.btn{padding: 10px 0; height: 34px;}
.card .row.thin div.btn i{vertical-align: top;}

.card .row.l2 {margin-left: 10px; width: calc(100% - 10px);}
.card .row.l3 {margin-left: 20px; width: calc(100% - 20px);}
.card .row.l4 {margin-left: 30px; width: calc(100% - 30px);}

.card .row.green{background-color: var(--msggrehi2); color: #fff; border: none;}
.card .row.green input,
.card .row.green textarea,
.card .row.green select{	background-color: var(--msggrehi2); color: #fff;}
.card .row.green select option{	background-color: var(--msggrehi2); color: #fff;}
.card .row.green .btn:hover{background-color: #777;}
.card .row.green ::placeholder{color: #fff; border: none;}

.card .row.red{background-color: var(--msgredhi); color: #fff; border: none;}
.card .row.red input,
.card .row.red textarea,
.card .row.red select{	background-color: var(--msgredhi); color: #fff;}
.card .row.red select option{	background-color: var(--msgreddeep); color: #fff;}
.card .row.red .btn:hover{background-color: #777;}

.card .row.blue{background-color: var(--blueHi); color: #fff; border: none;}
.card .row.blue input,
.card .row.blue textarea,
.card .row.blue select{	background-color: var(--blueHi); color: #fff;}
.card .row.blue select option{	background-color: var(--blueHi); color: #fff;}
.card .row.blue .btn:hover{background-color: #777;}

.card .row.gray{background-color: #777; color: #fff; border: none;}
.card .row.gray input,
.card .row.gray textarea,
.card .row.gray select{	background-color: #777; color: #fff;}
.card .row.gray select option{	background-color: #777; color: #fff;}
.card .row.gray .btn:hover{background-color: #ccc; color: #333}
.card .row.gray ::placeholder{color: #ccc; border: none;}

.card .row.lightGray{background-color: #ddd; color: #333; border: none;}
.card .row.lightGray input,
.card .row.lightGray textarea,
.card .row.lightGray select{	background-color: #ddd; color: #333;}
.card .row.lightGray select option{	background-color: #ddd; color: #333;}
.card .row.lightGray .btn:hover{background-color: #aaa; color: #333}
.card .row.lightGray ::placeholder{color: #333; border: none;}

.card .row.yellow{background-color: var(--msgyelHi); color: #555; border: none;}
.card .row.yellow input,
.card .row.yellow textarea,
.card .row.yellow select{background-color: var(--msgyelHi); color: #555;}
.card .row.yellow select option{	background-color: var(--msgyelDeep); color: #555;}

.importantNotification{background-color: #ffbebe; border-radius: 20px; font-size: 0.7em; padding: 6px 10px; margin: 10px 0; cursor: pointer; font-weight: bold;}
.headerBar .btn .importantNotification i{font-size: 1.3em;}


.card .row.label div{
	font-size: 13px;
	padding: 0 10px;
}
.card .row.label{
	margin-bottom:0;
}

.card .row.head{
	border: none;
	margin: 3px 0;
}
.card .row.scroll{padding-right: 10px;}
.card .row.nw{white-space: nowrap;}
.card .row.head.vTop div{vertical-align: top;}
.card .row.head.vBot div{vertical-align: bottom;}
.card .row.head div.ep{padding-left: 20px;}

.card .row.head div{
	font-size: 14px;
	font-weight: bold;
	padding: 0 10px;
}

.card .row div{
	display: inline-block;
	font-size: 14px;
	padding: 10px;
	box-sizing: border-box;
	vertical-align: middle;
}

.card .row .btn{
	line-height: 46px;
	height: 46px;
	padding: 0;
	vertical-align: middle;
}
.card .row .btn.as{	margin-right: 3px;}

.card .row.cardHead .btn{
	line-height: 43px;
	height: 46px;
	padding: 0;
	vertical-align: middle;
	border: 3px solid rgba(0,0,0,0);
}
.card .row.cardHead .btn.selected{border: 3px solid rgba(0,0,0,0.25);}

.selectable{
	border: 3px solid rgba(0,0,0,0);
	cursor: pointer;
}
.selectable:hover{border: 3px solid rgba(0,0,0,0.15);}
.selectable.selected{border: 3px solid rgba(0,0,0,0.25);}

.card .row .btn:hover{
	background-color: var(--yellow);
	color: #ffffff;
	cursor: pointer;
}
.card .row div.green{background-color: var(--msggrehi2)}
.card .row div.yellow{background-color: var(--yellow);}

.card .row div.vb{vertical-align: bottom;}
.card .row div.ca,
.card .row div.ca textarea,
.card .row div.ca input{text-align: center}
.card .row div.la,
.card .row div.la textarea,
.card .row div.la input{text-align: left}

.card .row div.inlineFlex{display: inline-flex;}

.card .row input,
.card .row textarea,
.card .kpiBlock input,
.card .row select,
.card .kpiBlock select
{
	text-align: center;
	width: 100%;
	box-sizing: border-box;
	padding-bottom: 3px;
	border-radius: 0;
	border-width: 0 0 2px 0;
	border-bottom-style: solid;
	border-bottom-color: rgba(0, 0, 0, 0.1);
	background-color: transparent;
	margin: 0;
	font-size: 14px;
	height: auto; /*based on a fontsiz of 14px @ the <select> object*/
	resize: none;
}

.card .row input.disRed,
.card .row textarea.disRed,
.card .kpiBlock input.disRed,
.card .row select.disRed,
.card .kpiBlock select.disRed
{
	border-bottom-color: rgba(255, 0, 0, 0.3);
}

.card .row .upLabel{
	font-size: 12.5px;
	color: #999;
}

.card .row input:focus,
.card .kpiBlock input:focus,
.card .row select:focus,
.card .kpiBlock select:focus
{
	border-bottom-color: rgba(0, 0, 0, 0.35);
	outline: none;
}

.card .row.lightFor input,
.card .kpiBlock.lightFor input,
.card .row.lightFor select,
.card .kpiBlock.lightFor select
{
	color: #fff;
}

.cardLa input,
.cardLa select,
.cardLa time,
.cardLa textarea,
.card input,
.card textarea,
.card select{
	width: 100%;
	box-sizing: border-box;
	padding: 5px;
	border-radius: 3px;
	border: 1px solid #999;
	margin: 5px 0;
	font-size: 14px;
	height: 33px; /*based on a fontsiz of 14px @ the <select> object*/
}

.card input[type="text"].inline50{
	width: 50px;
	box-sizing: border-box;
	padding: 5px;
	border-radius: 3px;
	border: 1px solid #999;
	margin: 5px 0;
	font-size: 14px;
	height: 33px;
}

.card .header{
	font-size: 22px;
	margin-bottom: 10px;
	font-family: 'Roboto', sans-serif;
}

.card .header.red{color: #fa2323;}

.card .subHeader{
	font-size: 18px;
	margin-bottom: 5px;
	font-family: 'Roboto', sans-serif;
}

.card .header i{
	color: #666;
	float: right;
	margin: 0 10px;
	font-size: 26px;
	transform: rotate(0deg);
	transition: transform 0.5s;
	-webkit-transition: transform 0.5s;		/* Safari */
}
.card .header.page i{margin: 8px 10px;}
.card .header i:hover{cursor: pointer; color: #999;}

.card .header.bcc,
.card .header.center{
	text-align: center;
}

.card .header.la{text-align: left; padding-left: 15px; vertical-align: bottom; height: auto;}
.card .header.la span{margin-top: 7px; display: inline-block;}
.card .header.la input, .card .header.la select{margin-right: 10px; display: inline-block;}

.actionBtn{
	width: 100%;
	margin: 0 0 15px 0;
	padding: 10px;
	border-radius: 5px;
	background-color: #fff;
	text-align: center;
	font-size: 22px;
	border: solid 1px #fff;
	box-sizing: border-box;
}

.actionBtn:hover{
	background-color: #eee;
	cursor: pointer;
}
.actionBtn:active{border-color: #333;}

.actionBtn.in:hover{
	background-color: #fff;
	cursor: auto;
}
.actionBtn.in:active{border-color: #fff;}

.actionBtn.in{font-size: 0;}
.actionBtn.in div{
	box-sizing: border-box;
	display: inline-block;
	overflow: hidden;
	font-size: 16px;
	vertical-align: middle;
}

.actionBtn.in div input{
	text-align: center;
	width: 100%;
	box-sizing: border-box;
	padding-bottom: 3px;
	border-radius: 0;
	border-width: 0 0 2px 0;
	border-bottom-style: solid;
	border-bottom-color: rgba(0, 0, 0, 0.1);
	margin: 0;
	font-size: 14px;
	height: auto;
}
.actionBtn.in div input:focus{
	border-bottom-color: rgba(0, 0, 0, 0.35);
	outline: none;
}


.response{
	display: inline-block;
	opacity: 0;
	transition: opacity 0.1s, background-color 0.1s;
	transition-delay: 0s;
	border: 1px solid #333;
	padding: 10px;
	border-radius: 5px;
	text-align: left;
}

.response.red{
	opacity: 1;
	background-color: var(--msgred);
	color: #fff;
}

.response.yellow{
	opacity: 1;
	background-color: var(--msgyel);
	color: #333;
}
.response.green{
	opacity: 1;
	background-color: var(--msggre);
	color: #fff;
}


.response.fast{
	transition-delay: 2s;
	transition: opacity 3s, background-color 3s;
}


.liveSearch{
	position: relative;
	width: 100%;
	margin: 5px 0;
}

.liveSearchInput{
	border: 1px #ccc solid;
	box-sizing: border-box;
	border-radius: 5px 5px 0 0;
	overflow: hidden;
}

.liveSearchInput .label{
	width: 30%;
	line-height: 23px;
	padding: 5px;
	box-sizing: border-box;
	font-size: 11px;
	overflow: hidden;
	display: inline-block;
	vertical-align: top;
	background-color: #ccc;
	white-space: nowrap
}

.liveSearchInput input[type="text"]{
	vertical-align: top;
	border: none;
	margin: 0;
	width: 70%;
	box-sizing: border-box;
	outline: none;
	display: inline-block;
}

.liveResult{
	width: 100%;
	border: 1px #ccc solid;
	border-width: 0 1px;
	position: absolute;
	display: none;
	font-size: 16px;
	background-color: #ccc;
	box-sizing: border-box;
}

.liveResult.active{
	display: block;
	z-index: 1;
	box-shadow: 0px 10px 15px -5px #333;
}

.liveResult div{
	padding: 5px;
	background-color: #fff;
	border-bottom: 1px solid #ccc;
}

.liveResult div:hover{
	background-color: #ccc;
	cursor: pointer;
}

.cbcon { display: inline-block; position: relative; padding-left: 25px; padding-bottom: 3px; margin-bottom: 12px; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; height: auto;}

/* Hide the browser's default checkbox */
.cbcon input {position: absolute;opacity: 0;display: none;cursor: pointer;height: 0;width: 0;}

/* Create a custom checkbox */
.checkmark {position: absolute;top: -4px;left: 0;height: 25px;width: 25px;background-color: #afafaf;}

/* On mouse-over, add a grey background color */
.cbcon:hover input:not(:disabled) ~ .checkmark {background-color: #bababa;}
.cbcon:hover input:disabled ~ .checkmark {cursor: not-allowed;}

/* When the checkbox is checked, add a blue background */
.cbcon input:checked ~ .checkmark {
	background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {content: "";position: absolute;display: none;}

/* Show the checkmark when checked */
.cbcon input:checked ~ .checkmark:after {display: block;}

/* Style the checkmark/indicator */
.cbcon .checkmark:after { left: 9px; top: 5px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}

.modHomeMenu{
	font-size: 0;
	width: 100%;
	display: inline-block;
	box-sizing: border-box;
	max-width: calc(var(--maxWidth) + 20px);
	text-align: center;
}

.modHomeMenu.full{max-width: calc(100%);}

.modHomeMenu a:hover{
	background-color: #eaeaea;
	cursor: pointer;
}

.modHomeMenu a{
	color: #333;
	font-size: 16px;
	display: inline-block;
	background-color: #fff;
	width: calc(25% - 20px);
	height: 120px;
	padding: 10px;
	margin: 10px;
	box-sizing: border-box;
	line-height: 3em;
	text-decoration: none;

}

.modHomeMenu i {
	display: block;
	font-size: 2em;
	padding: 10px;
}

i.text{
	font-family: 'Open Sans', sans-serif;
}


.contentFrame{width: calc(100% - 40px);height: calc(100vh - 300px);margin: 0 20px;box-sizing: border-box;border: none;}
.filePreviewOtherLink{display: inline-block; margin: 0; font-size: 16px; color: var(--defaultTextColor)}

.contentImage{
	width: 70%;
	object-fit: cover;
	padding: 0;
}

.flowDia{
	position: relative;
	box-sizing: border-box;
	overflow-x: auto;
	padding: 15px 0;
}

.flowDia .path{
	width: 100%;
	padding: 10px 0;
	box-sizing: border-box;
	white-space: nowrap;
	text-align: left;
}

.flowDia .path .step{
	width: 180px;
	height: 100px;
	padding: 5px;
	margin: 0 10px;
	display: inline-block;
	background-color: #cfcfcf;
	font-size: 16px;
	vertical-align: top;
	/*white-space: pre-wrap;*/
	overflow: hidden;
	text-align: center;
}

.flowDia .path .step.ph{
	font-size: 0;
	background-color: transparent;
}

.flowDia .path .step.green{
	background-color: var(--msggrehi);
}

.flowDia .path .step div{
	vertical-align: top;
	width: 100%;
}

.flowDia .path .step .head{
	font-size: 13px;
	white-space: normal;
	height: 38px;
}

.flowDia .path .step .data{
	font-size: 16px;
	white-space: normal;
}
.flowDia .path .step .data div{
	display: inline-block;
	width: 100%;
}

/*hr{width: 100%; margin: 50px 25% 5px; box-sizing: border-box; border: dashed #cccccc 1px;}*/
hr{width: 100%; margin: 40px 15% 40px; box-sizing: border-box; border:0; height: 2px; background-image: linear-gradient(to right, #ddd, #aaa, #ddd);}
.spacer.h5{margin: 5px 0 0 0;}
.spacer.h100{margin: 100px 0;}
.spacer.h20{margin: 20px 0;}
.spacer.h10{margin: 10px 0;}
.spacer{width: 100%; margin: 40px 0;}

.main .sectionBox.progressBoxOuter {--circleWidth: 50px; text-align: center;	margin: 0; padding: 0; position: relative;}
.main .sectionBox.progressBoxOuter.center {margin: 0 auto;}
.main .sectionBox.progressBoxOuter:before {content: ''; position: absolute; top: calc(var(--circleWidth)/2); left: 30px; border-top: 3px solid #777; background: black; width: calc(100% - 100px);}
.main .sectionBox.progressBoxOuter .progressBoxInner{padding: 0; display: flex; justify-content: space-between; position: relative;}
.main .sectionBox.progressBoxOuter .progressBoxInner .item{overflow: hidden; width: 100px;}
.main .sectionBox.progressBoxOuter .progressBoxInner .item .info{font-size: 0.8rem;}
.main .sectionBox.progressBoxOuter .progressBoxInner .item .circle{ display: inline-block; width: var(--circleWidth); height: var(--circleWidth); border-radius: calc(var(--circleWidth)/2); min-width: var(--circleWidth); border: #ccc solid 4px; box-sizing: border-box; background-color: #ffffff; z-index: 10; margin: 0 20px;}
.main .sectionBox.progressBoxOuter .progressBoxInner .item .circle.link:hover{cursor: pointer; border-color: #333333;}
.main .sectionBox.progressBoxOuter .progressBoxInner .item.red .circle{background-color: #ff3131; border-color: #333333;}
.main .sectionBox.progressBoxOuter .progressBoxInner .item.lightRed .circle{border-color: #ffb0b0;}
.main .sectionBox.progressBoxOuter .progressBoxInner .item.green .circle{background-color: var(--goodGreen); border-color: #666666;}
.main .sectionBox.progressBoxOuter .progressBoxInner .item.blue .circle{background-color: var(--progressBlue); border-color: #666666;}

.imageNotFound{width: 100%; box-sizing: border-box; padding: 30px; text-align: center; color: #999999}
.imageNotFound div{border: 2px dashed #999999; width: 300px; height: 300px; padding: 20px; box-sizing: border-box; display: inline-block;}
.imageNotFound.textOnly div{width: 300px; height: auto; padding: 10px; box-sizing: border-box; display: inline-block;}
.imageNotFound.noBorder div{border: none;}
.imageNotFound.short div{height: 220px;}
.imageNotFound div span{padding-top: 20px; display: block;}
.imageNotFound.textOnly div span{padding-top: 0;}
.imageNotFound div i{font-size: min(180px, 30vw);}

.scrollIndicator{display: none;}

.f2ddf_dragndrop,
.f2ddf_uploading,
.f2ddf_success,
.f2ddf_error {
	display: none;
}

.f2ddf.has-advanced-upload {background-color: var(--ultraLight);outline: 2px dashed black;outline-offset: -10px;width: 100%;height: 200px; display: flex; align-items: center; justify-content: center;}
.f2ddf.is-dragover {background-color: var(--accent);}

.f2ddf.has-advanced-upload .f2ddf_dragndrop {
	display: inline;
}

.wordBank{font-size: 1rem; border: #cccccc solid 1px; border-radius: 12px; padding: 16px; text-align: left; overflow: hidden; display: flex; flex-wrap: wrap; max-height: 250px; overflow-y: auto;}
.wordBank .wordBankItemText{width: fit-content; padding: 5px 10px; border-radius: 10px; font-size: .8em; background-color: var(--accent); margin: 4px;}
.wordBank .wordBankItemText:hover{background-color: var(--light); cursor: pointer;}
.wordBank .wordBankItemText:active{background-color: var(--primary); cursor: pointer; color: #ffffff;}


.sectionBox.kpiV3{display: inline-flex; flex-wrap: nowrap; justify-content: flex-start; column-gap: 10px; width: auto; align-items: center; padding: 0; overflow: hidden}
.sectionBox.kpiV3 > div.textWrap{display: flex; flex-wrap: nowrap; flex-direction: column; justify-content: center; align-items: flex-start;}
.sectionBox.kpiV3 > div.textWrap .text{font-size: 1.2em; text-align: left;}
.sectionBox.kpiV3 > div.textWrap .subtext{font-size: 0.7em; color: gray;}

/* .main .sectionBox.kpiBlockGrid{display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); column-gap: 10px; row-gap: 10px; justify-content: center;} */

/* .main .sectionBox.kpiBlockV3{display: flex; column-gap: 50px; flex-direction: row; justify-content: center;} */
.sectionBox.kpiBlockV3{display: flex; column-gap: 50px;  row-gap: 20px; justify-content: center; flex-wrap: wrap;}
.sectionBox.kpiBlockV3Lrg{display: grid; column-gap: 50px;  row-gap: 20px; grid-template-columns: repeat(auto-fill, clamp(190px, 20%, 450px)); justify-content: center;}
.sectionBox.kpiV3WrapVerticalNoWrap{display: flex; row-gap: 30px; flex-direction: column; min-width: 250px}

.sectionBox.kpiBlockV3-5w{display: grid; column-gap: 20px;  row-gap: 20px; grid-template-columns: repeat(5, 1fr); justify-content: center;}
.kpiBlockV3-5w .sectionBox.kpiV3 > div.textWrap .subtext{font-size: 0.7em; color: gray; text-align: left;}


.sectionBox.kpiV3WrapVertical{display: flex; row-gap: 30px; flex-direction: column;}
.sectionBox.kpiV3WrapVertical .sectionBox.kpiV3{flex-direction: column; align-items: flex-start}
.sectionBox.kpiV3WrapVertical .sectionBox.kpiV3 > div.textWrap{flex-direction: column-reverse; align-items: flex-start;}
.sectionBox.kpiV3WrapVertical .sectionBox.kpiV3 > div.textWrap .text{font-size: 1.2em; text-align: left;}


.actionPlanKPIWrapper {display: flex;flex-direction: column;justify-content: space-between; row-gap: 25px;  position: relative}
.actionPlanKpi {padding: 0;}
.actionPlanKpi > div > div.apKPI-TitleWrapper {display: flex; align-items: flex-start; flex-direction: column;}
.safety-indicator {display: flex; align-items: center;justify-content: space-between; column-gap: 10px;     grid-template-columns: 65px 1fr 20px;}

.circle {width: min-content;min-width: 65px;height: 65px;background-color: var(--light); border-radius: 65px; display: flex;align-items: center;justify-content: center;font-weight: bold;padding: 5px  10px; box-sizing: border-box; font-size: 1.3em; user-select: none;}
.circle.dark {background-color: var(--dark); color: #ffffff;}
.circle.midTone {background-color: var(--midTone);}
.circle.light {background-color: var(--light);}
.circle.lightGray {background-color: var(--lightGray);}
.circle.red {background-color: var(--red);}
.circle.green {background-color: var(--green);}
.circle.yellow {background-color: #ffe04e;}


.safety-text {font-size: 1.2em;}
.safety-subtext {font-size: 0.8em;color: gray;}
.filters {display: flex;align-items: center;}
.filter-icon {width: 20px;height: 20px; display: inline-block;background-size: cover;}

.dot-container {display: grid; align-items: center; margin-top: 10px; gap: 4px; grid-template-columns: repeat(16, 1fr);}
.kpiDot {width: 100%;background-color: #ffffff; border-radius: 50%;margin-right: 2px;box-sizing: border-box;border: 1px solid #999;aspect-ratio: 1;}
.kpiDot.green{background-color: #A5D6A7;border: 1px solid #6eba71;}
.kpiDot.red{background-color: #EF9A9A;border: 1px solid #d55d5d;}
.kpiDot.gray{background-color: #E0E0E0;border: 1px solid #afafaf;}
.dotsLabel {margin-top: 3px;font-size: 0.8em;color: gray;}

.main .sectionBox.legend{font-size: 1rem; display: flex; justify-content: center; column-gap: 24px; row-gap: 12px; flex-wrap: wrap;}
.main .sectionBox.legend > div{display: flex; gap: 8px; align-items: center;}
.main .sectionBox.legend > div i{font-size: 1em;}

/*popup header*/
.popUpBox .header-wrapper{display: flex; justify-content: space-between; width: 100%; padding-bottom: 30px;}
.popUpBox .header-wrapper h2{margin: 0}
.popUpBox .header-wrapper.noPaddingBottom{padding-bottom: 0;}

.androidSettings{display: none;}
.androidSettings.active{display: inline-block;}

/** Search bar */
.globalSearchBar {display: inline-flex;justify-content: center;align-items: center;height: 100%;padding: 0 10px;width: unset;background-color: unset;margin: 0;}
.globalSearchBar form {display: flex;align-items: center; border-radius: 5px; overflow: hidden;}
.globalSearchBar .search-button {background-color: var(--primary);color: #fff;border: none;padding: 10px 20px;cursor: pointer;font-size: 16px;transition: background-color 0.3s ease;  border-radius: 0 5px 5px 0;}


.assistant-button{background-color: var(--primary); color: #fff;border: none;padding: 10px 20px;cursor: pointer;font-size: 16px;transition: background-color 0.3s ease;  border-radius: 15px; margin: 6px;}
.assistant-button:hover{background-color: #123679;}
.assistant-button.active,
.assistant-button.active:focus
{background-color: var(--msgred);color: #fff;}

.globalSearchBar .search-button.processing,
.globalSearchBar .search-button.processing:focus
{background-color: var(--msggre);color: #fff;}

.globalSearchBar .search-button:hover {background-color: #0056b3;}
.globalSearchBar .search-button:focus {outline: none;}
.globalSearchBar .search-input::placeholder {color: #aaa;}

section.block.long .longBlock.formInput .searchInputWrapper.searchDependantV2{
	display: flex; flex-direction: row; flex-wrap: nowrap; border-width: 0 0 2px 0; border-style: solid; border-color: #bbbbbb; padding: 6px; box-sizing: border-box; align-items: center; justify-content: center; gap: 6px; margin-top: 5px;
	i{font-size: 0.85rem; padding: 0}
	input[type='text']{border: none; padding: 0; margin: 0; background: transparent;}
}

section.block.long.narrow.globalSearchBar > div{min-height: unset; height: 100%; margin: 0; padding: 0;}
section.block.long.narrow.globalSearchBar > div .subject{margin: 0; padding: 0;}
section.block.long.globalSearchBar .longBlock.formInput input[type='text']{border: none;outline: none;padding: 10px 15px;font-size: 16px; margin: 0; border-radius: 5px 0 0 5px;}

/*.globalSearchBar .searchResult {position: fixed; top: 50px; left: 50%; transform: translate(-50%, 0); z-index: 100; width: clamp(300px, 80vw, 600px);}*/



/*.searchResult.active{top:34px; left: 0; width: 100%;}*/
/*.searchBarTextField {anchor-name: --searchBarTextField;}*/
.searchInputWrapper.active{anchor-name: --searchBarTextField;}
.searchResult,
.formRow > div > div.actionFunctionResult,
.searchResult.fixed
{position: fixed; margin: 0; top: calc(anchor(bottom) + 1px); left: anchor(left); position-anchor: --searchBarTextField; padding: 0; width: clamp(200px, anchor-size(width), 100%); position-try-fallbacks: --searchBarTextField; }

.formRow > div > div.actionFunctionResult:popover-open,
.searchResult:popover-open
{display: block;}

@position-try --searchBarTextField {
	position: fixed;
	position-anchor: --searchBarTextField;
	left: unset;
	right: anchor(right);
}

.formRow.head > div .filterHeadSelectedIcon{width: 15px; display: inline-flex; justify-content: flex-start;}
.formRow.head > div .filterHeadSelectedIcon i{padding: 0;}

.formRow > div > div.actionFunctionResult,
.formRow.head > div > span > div.searchResult.filterHeadResult
{
	width: 160px; display: block; font-size: 1em; font-weight: normal; border-radius: 5px; top: calc(anchor(bottom) + 3px); box-shadow: 0 3px 10px 0 #999;
	&> div{display: flex; width: 100%; box-sizing: border-box;}
	&> div:first-child{border-width: 1px; margin-top: 1px;}
	&> div.filterFunctionHeaderOptions{display: grid; grid-template-columns: 1fr 1fr; padding: 12px 10px;}
	&> div.filterFunctionHeaderOptions > span:last-child{display: flex; gap: 8px; justify-content: flex-end;}
	&> div.filterFunctionDate{display: grid; grid-template-columns: 6ch 1fr; font-size: 0.9em; padding: 10px 10px 8px; font-weight: bold;}
	&> div.filterFunctionText{display: flex; width: 100%; font-size: 0.9em; padding: 10px 10px 8px; font-weight: bold;}
	&> .filterHeadMultiSelected{width: fit-content; padding-right: 10px;}
}

.headerBar div.searchResult.filterHeadResult{
	min-width: unset; width: 240px; display: block; font-size: 1em; font-weight: normal; border-radius: 5px; top: calc(anchor(bottom) + 3px); box-shadow: 0 3px 10px 0 #999;
	&.favorites{
		width: 290px; max-height: calc(100vh - 100px);
		div{font-size: 0.85em;}
		div.headerMenuWelcome span:nth-child(2){font-size: 16px;}
		div.headerMenuWelcome span:nth-child(3){font-size: 0.8em;}

	}
	&.helpMenu{
		width: 290px; max-height: calc(100vh - 100px);
		div{font-size: 0.85em;}
		div.headerMenuWelcome span:nth-child(2){font-size: 16px; margin: 10px 0 5px;}
		div.headerMenuWelcome span:nth-child(3){padding: 5px 10px 10px; text-align: left; font-size: 0.95em; font-weight: 400; line-height: 1.2em;}
	}
	&> div{display: grid; grid-template-columns: 24px 1fr; padding: 12px 20px; align-items: center;}
	&> div:hover{background-color: var(--lightGray); cursor: pointer;}

	&> div.headerMenuWelcome{
		display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px 0; width: 100%;font-weight: bold; text-align: center;

		span:nth-child(1){background-color: var(--initials-bg-color); color: var(--initials-color); border-radius: 50%; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; user-select: none;}
		span:nth-child(2){font-size: 1em;}
		span:nth-child(3){font-size: 0.7em;}
	}
	&> div.headerMenuWelcome:hover{background-color: #ffffff; cursor: unset;}



}

.formRow > div > div.actionFunctionResult{
	display: none; left: unset; right: anchor(right); min-width: 100px;
	& > div{gap: 4px;}
}



@media screen and (max-device-width: 640px){
	.main{
		padding: 30px 10px 0 10px;
	}

	.navLeft{
		height: calc(100% - 50px);
		margin-top: 50px;
		width: 50px;
		overflow: hidden;
		white-space: nowrap;
		background-color: #eee;
		box-sizing: border-box;
		vertical-align: top;
		display: inline-block;
		position: fixed;
		left: 0;
		z-index: 10;
		transition: width 0.3s;
	}

	.navLeft.active{width: 70vw;}

	.navLeft .btn{
		font-size: 14px;
		text-align: left;
		color: #333;
		width: 100%;
		height: 40px;
		line-height: 40px;
		padding: 0;
		vertical-align: top;
		vertical-align: middle;
		text-decoration: none;
		/*display: block;*/
		box-sizing: border-box;
	}

	.navLeft .btn:hover{
		background-color: var(--yellow);
		color: #ffffff;
		cursor: pointer;
	}

	.navLeft .btn i{
		width: 30px;
		text-align: center;
		margin: 0 10px;
		left: 0;
	}

	.navLeft .btn:visited{}

	.navRight.active{width: calc(100% - 50px);}

	.main.rightNavActive{
		width: calc(100% - 50px);
	}

	.headerBar{
		height: 50px;
		width: 100%;
		font-size: 14px;
		overflow: hidden;
		background-color: white;
		box-sizing: border-box;
		vertical-align: top;
		position: fixed;
		left: 0;
		z-index: 9;
	}


	.headerBar img.logo{
		margin: 5px 15px;
		height: calc(100% - 10px);
		width: 190px;
	}


	.headerBar .btn{
		display: inline-block;
		box-sizing: border-box;
		height: 100%;
		line-height: 100%;
		min-width: 0;
		padding: 15px 5px;
		vertical-align: top;
		text-align: center;
	}

	.headerBar .btn.sml{
		display: inline-block;
		box-sizing: border-box;
		height: 100%;
		line-height: 100%;
		min-width: 55px;
		padding: 15px 5px;
		vertical-align: top;
		font-size: 0;
		text-align: center;
	}

	.headerBar .btn{
		min-width: 55px;
		font-size: 0;
		padding-left: 0;
		padding-right: 0;
		text-align: center;
	}

	.headerBar .btn.noIcon i,
	.headerBar .btn i{font-size: 18px;}

	.headerBar .btn:first-child{
		min-width: 50px;
		font-size: 0;
		padding-left: 0;
		padding-right: 0;
		text-align: center;
	}

	.locationOptions{
		width: calc(100% - 70px);
		margin: 60px 10px 10px 60px;
		padding: 20px;
		height: calc(100% - 70px);
		background-color: #fff;
		z-index: 10;
		font-size: 16px;
		box-sizing: border-box;
		border: 1px #ccc solid;
		overflow-y: auto;
	}
	.locationOptions.active{display: inline-block;}


	.locationOptionsHead{
		font-size: 18px;
		padding: 0 0 10px 0;
		margin: 0;
		/*width: 100%;*/
		height: 30px;
		line-height: 30px;
		box-sizing: border-box;
		display: inline-block;
	}

	.popUpOptionsItem.mod i{
		font-size: 0px;
		margin: 0;
	}

	.popUpOptionsItem,
	.popUpOptionsItem.plant,
	.popUpOptionsItem.mod{
		height: 45px;
		/*padding: 3px 0 5px 0;*/
		padding: 13px 0;
		margin: 3px 0;
		background-color: var(--blue);
		color: #fff;
		width: 100%;
		display: inline-block;
		box-sizing: border-box;
	}

	.modHomeMenu a{
		font-size: 14px;
		width: calc(50% - 10px);
		height: 100px;
		padding: 10px;
		margin: 10px 5px;
		line-height: 1em;
	}

	.innerPart{
		width: 100%;
	}

	.kpiBar .item{
		height: 65px;
		width: calc((100% - 10px)/3);
		margin: 0 5px 0 0;
		font-size: 32px;
		line-height: 85px;
	}

	.kpiBar.active{ height: 80px;}

	#rmsg::after{left: 5%;}

}