:root{
	--ticketWidth: 4in;
	--ticketHeight: 0.9in;
	--actionPlanKpiWidth: 210px;

	--navLeftWidth: 300px;

	--collapsableOuterBGColor-base: #f6f6f6;
	--collapsableOuterBGColor-active: #f6f6f6;
}

@media print {
	body {background: none !important;}
}

body{
	background-color: #FFFFFF;
	/*background-image: url('../img/bg-blue2.png');*/
	/*background-repeat: repeat;*/
	font-size: 0;
	margin: 0;
	padding: 0;
	position: relative;
	color: #333;
}

hr{margin: 10px 3px 7px;}
h4{font-size: 15px;margin: 0 0 5px;}

.headerBar .btn i{font-size: 1em;}
.headerBar .btn.noIcon i { display: none; }
.headerBar .btn.clientImg {margin: 0; padding: 7px; box-sizing: border-box; height: var(--headBarHeight);}
.headerBar .btn.clientImg img{ height: 36px; object-fit: cover; }

.main.filled > div{max-width: calc(100% - 20px);}


section.block.short.kpiBlock{justify-content: space-around;}

section.block.short.kpiBlockV2.vertical {flex-direction: column; align-items: center; justify-content: flex-start;}
section.block.short.kpiBlockV2.vertical > div.kpiBoxV2{width: 100%; margin: 10px 0;}
section.block.short.kpiBlockV2 > div.kpiBoxV2{width: auto;max-width: 300px;flex-basis: 15%;min-width: 140px;overflow: hidden;margin: 5px;border-radius: 0;}
section.block.short.kpiBlockV2 > div.kpiBoxV2.fullWidth{width: auto;flex-basis: initial;}
section.block.short.kpiBlockV2 > div.kpiBoxV2.fullWidth.w100{width: 100%;}

section.block.short.kpiBlockV2 > div.kpiBox{width: 100%; max-width: calc(20% - 30px); min-width: 100px; border: #ccc solid 1px; box-sizing: border-box; box-shadow: 3px 3px 10px 0 #ddd; margin: 0 40px 40px 0; border-radius: 0;}
section.block.short.kpiBlockV2.smlRowSpacing > div.kpiBox{margin: 0 40px 10px 0;}
section.block.short.kpiBlockV2 > div.kpiBox:nth-child(4n){margin-right: 0;}
section.block.short.kpiBlockV2 .kpiBox h1{ color: #333333; font-size: clamp(0.5em, 2vw, 0.7em); font-weight: 600; font-family: 'Spline Sans', sans-serif; margin-top: 3px;}
section.block.short.kpiBlockV2 .kpiBox h4{ color: #666666; font-size: 0.4em; font-family: 'Spline Sans', sans-serif;}
section.block.short.kpiBlockV2 .kpiBox span{ margin-bottom: 10px; font-size: clamp(0.7em, 3.5vw, 1.1em);}
section.block.short.kpiBlockV2{justify-content: flex-start; flex-wrap: wrap; padding: 0; overflow: hidden; margin-top: 0;}
section.block.short.kpiBlockV2.center{justify-content: space-around;}

section.block.short.kpiBlockV2 .kpiBox.flashRed span{color: #65a9ff;}
section.block.short.kpiBlockV2 .kpiBox.flashRed h1{color: #ffffff;}
section.block.short.kpiBlockV2 .kpiBox.flashRed h4{color: #c7c7c7;}
section.block.short .kpiBoxV2 span{font-size: clamp(1.2rem, 3.5vw, 1.7rem);}


section.block.long.miniCol .longBlock.btn{flex-direction: column-reverse; justify-content: center;}
section.block.long.miniCol .longBlock.btn .subject{font-size: 0.8em;}
section.block.long.miniCol.narrow .longBlock .kpiBox{width: 100%;}
section.block.long.miniCol .kpiBox .kpi{display: flex; width: 100%; justify-content: center;}
section.block .kpiBox .kpi.small{font-size: 0.7em;}


/*print objects*/
.poCU_PrintLabels_001{font-size: 0.8em;}
#labelPrintContainer{display: none;}

.labelPrintQR{width: 1in; padding: 2mm; box-sizing: border-box; margin: 0; font-weight: 600; text-align: right;}
.labelPrintQR img{width: 1in; aspect-ratio: 1; height: auto;}

.labelPrintQR.large{padding: 0 20mm;}
.labelPrintQR.large img{width: 100%; aspect-ratio: 1; height: auto;}
.labelPrintCode{width: var(--ticketWidth); text-align: left; font-size: 4mm; padding: 0 20px; box-sizing: border-box;}
.labelPrintCode .wrap{white-space: normal;}


.loading{
	display: none;
	width: calc(100% - 50px);
	height: calc(100vh);
	margin-top: 0;
	margin-left: 50px;
}

img.previewPopup{width: 100%;}
.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;
}

.popUpBox.smallV2:not(.locationOptions):not(.small).w800{
	/*top: 60px;*/
	--modalWidth: clamp(300px, 100%, 800px);
	margin: 0 calc(50% - var(--modalWidth)/2);
	width: var(--modalWidth);
}

.loading.expand{ width: calc(100% - var(--navLeftWidth)); margin-left: var(--navLeftWidth);}

.popUpBox:not(.locationOptions):not(.small)
{left: 80px; max-width: 100%; width: calc(100% - var(--defaultNavLeftWidthClosed) - 60px); margin: 80px 0 20px; padding: 30px 40px 50px; max-height: calc(100vh - 100px); transition: left 0.3s, width 0.3s;}

.navLeft.active ~ .main .popUpBox,
.navLeft.active ~ .popUpBox,
.popUpBox:not(.locationOptions):not(.small):has(~ .navLeft.active)
{left: calc(var(--navLeftWidth) + 30px); width: calc(100% - var(--navLeftWidth) - 60px);}


.popUpBox.flood:not(.locationOptions):not(.small),
.popUpBox.flood{padding: 10px; left: var(--defaultNavLeftWidthClosed); top: -30px; width: calc(100% - var(--defaultNavLeftWidthClosed)); max-height: calc(100vh - 50px); }
.popUpBox.flood h1 + div{display: none;}
.popUpBox.flood iframe{height: calc(100vh - 130px); max-height: 100%;}


.main .fh25{overflow: hidden; height: 25vh;}
.main .fh20{overflow: hidden; height: 20vh;}
.main .fh15{overflow: hidden; height: 15vh;}
.main .fh40{overflow: hidden; height: 40vh;}

.locationOptions{margin-top: 100px;}

section.block.long.xLargeCenter .longBlock.formInput{height: initial;}
section.block.long.xLargeCenter .longBlock.formInput input[type='text']{font-size: 38px; line-height: 45px; text-align: center; border-width: 1px;}
section.block.long.textBoxBorder .longBlock.formInput input[type='text']{border: none; background-color: #c3c3c3; padding: 10px 20px; width: 60%;}
section.block.long.xLargeCenter .longBlock.formInput .subject{align-items: center; margin-bottom: 20px;}
section.block.long.xLargeCenter .longBlock.formInput .subject.flexStart{align-items: flex-start; margin-bottom: 20px;}
section.block.long.xLargeCenter .longBlock.formInput .subject label{font-size: 1.2em}

section.block.long.xLargeCenter .longBlock.formInput .kpiBox {margin-bottom: 43px;margin-left: 10px;flex-direction: column-reverse;align-items: center;}
section.block.long.narrow.form.clearBg{background-color: transparent;}
section.block.long.narrow.form.clearBg input,
section.block.long.narrow.form.clearBg select{background-color: transparent;}
section.block.long.narrow.labelPositionTop .longBlock{margin-top: 0;}

#kpiQtyTarget { font-size: 1rem; color: #666666; }
.kpiBoxV2.redBlink {animation: kpiBgBlinker 1s linear infinite;}
/*section.block .kpiBoxV2.redBlink .kpi.blue,*/
/*.kpiBoxV2.redBlink #kpiQtyTarget,*/
/*section.block.short .kpiBoxV2.redBlink h4,*/
/*section.block.short .kpiBoxV2.redBlink h1 {color: #fff;}*/

@keyframes kpiBgBlinker {
	0% {background-color: var(--msgredhi);}
	49% {background-color: var(--msgredhi);}
	50% {background-color: #ffffff;}
	99% {background-color: #ffffff;}
}

.rfTagRetrieve {width: 500px; height: 200px; border-radius: 20px; display: inline-flex; margin: 30px 0 0; padding: 20px; background-color: #FFFFFF; border: dashed 3px #777;	 align-items: center; justify-content: center; flex-direction: column;}
.rfTagRetrieve.active {background-color: #e0f5e1; border: dashed 3px green;}
.rfTagRetrieve.timeout {background-color: #FFFFFF; border: dashed 3px var(--msgred);}
.rfTagRetrieve #statusText {font-size: 20px; font-weight: 600; color: #2172de; margin-bottom: 10px;}
.rfTagRetrieve.active > #statusText { color: green; }
.rfTagRetrieve.timeout > #statusText { color: var(--msgred); }
.rfTagRetrieve.active #rfTagName,
.rfTagRetrieve.timeout #rfTagName {font-size: 30px; font-weight: 600; color: #333333; margin-bottom: 10px; max-width: 490px;}

/*--- Stacked Icons ---*/
.icon-stack { position: relative; width: 100%; min-height: 50px; }
.icon-stack > i { position: absolute; left: 0; right: 0; }
.icon-stack > i:nth-of-type(2) { transform: scale(0.5); }

/*--- Internal "Remote" Displays ---*/
.realtimeDisplayMainInternal { height: calc(100vh - 50px); margin-top: 50px; padding: 0; }

/* Live Remote Plant */
body#liveRemotePlant {background-image: none; background-color: #FFFFFF;}
#liveRemotePlant .main.realtimeDisplayMainInternal.filled { display: flex; flex-direction: column; justify-content: space-between; font-family: 'Roboto', sans-serif; font-size: 1.3vw; opacity: 0; transition: opacity 400ms; }
#liveRemotePlant .main.realtimeDisplayMainInternal.filled.active{ opacity: 1;}
.realtimeDisplayMainInternal #linesContainer { display: flex; align-items: stretch; flex-direction: column; flex-wrap: wrap; align-content: stretch; justify-content: flex-start; padding: 0 25px 25px; gap: 3vh; max-width: none; }
.realtimeDisplayMainInternal #linesContainer h1 { margin-bottom: 0; font-size: 5vh; }
.realtimeDisplayMainInternal #linesContainer .plantLineBox {display: grid; grid-template-columns: 1fr 1fr; gap:clamp(10px, 2%, 30px); box-sizing: border-box;}
.realtimeDisplayMainInternal #linesContainer .line { flex: 1 0 15vh; max-height: 25vh; display: flex; flex-direction: column; }
.realtimeDisplayMainInternal #linesContainer .lineInfo { display: flex; justify-content: space-between; align-items: baseline; width: 100%; padding: 15px; box-sizing: border-box; font-size: 2.5vh; }
.realtimeDisplayMainInternal #linesContainer .lineNameTime { text-align: left; }
.realtimeDisplayMainInternal #linesContainer .lineNameTime > span { font-weight: bold; font-size: 3.5vh; margin-right: 15px; }
.realtimeDisplayMainInternal #linesContainer .progressBar { box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25) inset; width: 100%; min-height: 50px; background: repeating-linear-gradient(-45deg, #d9d9d9, #D9D9D9 10px, #E7E6E6 10px, #E7E6E6 20px); border-radius: 8px; flex-grow: 1; overflow: hidden; text-align: left; font-size: 0; }
.realtimeDisplayMainInternal #linesContainer .progressBar > div { height: 100%; display: inline-block; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25) inset; }
.realtimeDisplayMainInternal #linesContainer .progressBar .uptime { background-color: #30B438; }
.realtimeDisplayMainInternal #linesContainer .progressBar .downtime { background-color: #CD3E3E; }

/* Live Remote Line */
body#liveRemoteLine {background-image: none; background-color: #FFFFFF;}
#liveRemoteLine .main.realtimeDisplayMainInternal.filled { display: flex; font-family: 'Roboto', sans-serif; font-size: 1.3vw; opacity: 0; transition: opacity 400ms; }
#liveRemoteLine .main.realtimeDisplayMainInternal.filled.active{ opacity: 1;}
.main.realtimeDisplayMainInternal.filled .sidebar { width: 30vw; /*height: 100vh; background: #D9E9F9;*/ display: flex; flex-direction: column; flex-wrap: nowrap; padding: 0; justify-content: flex-start; border-right: 1px solid #eeeeee; }
.main.realtimeDisplayMainInternal.filled .sidebar h1 { margin: 0; font-size: 5vh; }
.main.realtimeDisplayMainInternal.filled .sidebar .clientLogo { padding: 15px; background: #D9E9F9; box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25); }
.main.realtimeDisplayMainInternal.filled .sidebar .clientLogo img { height: auto; width: calc(100% - 8vw); }
.main.realtimeDisplayMainInternal.filled .sidebar .kpiBoxV2 { width: 100%; text-align: left; padding: 20px 40px; box-sizing: border-box; }
.main.realtimeDisplayMainInternal.filled .sidebar .kpiBoxV2 .kpi { display: flex; flex-direction: column-reverse; }
.main.realtimeDisplayMainInternal.filled .sidebar .kpiBoxV2 .kpi > span { font-size: 4vw; font-weight: bold; }
.main.realtimeDisplayMainInternal.filled .sidebar .kpiBoxV2 .kpi.green > span { color: #26982d; }
.main.realtimeDisplayMainInternal.filled .sidebar .kpiBoxV2 .kpi.red > span { color: #CD3E3E; }
.main.realtimeDisplayMainInternal.filled .sidebar .kpiBoxV2 .kpi > .spacer { display: none; }
.main.realtimeDisplayMainInternal.filled .sidebar .kpiBoxV2 .kpi > h1 { font-size: 2vw; margin-bottom: 0; }
.main.realtimeDisplayMainInternal.filled .xyz { width: 70vw; height: calc(100vh - 50px); max-width: none; padding: 0; }
.main.realtimeDisplayMainInternal.filled .xyz .chart { width: 100%; /*height: 50vh;*/ padding: 0 20px 20px; }
.main.realtimeDisplayMainInternal.filled .xyz .chart h2 { margin: 20px 0; }
.main.realtimeDisplayMainInternal.filled .xyz .chart #monthlyPlantResultsChart {display: block; width: 100%; max-height: 40vh;}
.main.realtimeDisplayMainInternal.filled .xyz .downActionWrap { display: flex; width: 100%; height: calc(50vh - 60px); text-align: left;}
.main.realtimeDisplayMainInternal.filled .xyz .downActionWrap > div { flex-basis: 50%; padding: 20px; }
.main.realtimeDisplayMainInternal.filled .xyz .downActionWrap > div > div { margin-bottom: 15px; }
.main.realtimeDisplayMainInternal.filled .xyz #downtimeEvents { background: rgba(205, 62, 62, 0.30); }
.main.realtimeDisplayMainInternal.filled .xyz #openActions { background: #D9E9F9; }
.main.realtimeDisplayMainInternal.filled .xyz .downActionWrap .downActionTitle { font-size: 2vw; font-weight: 900; text-transform: uppercase; }
.main.realtimeDisplayMainInternal.filled .xyz #downtimeEvents .downActionTitle { background-color: #CD3E3E; color: transparent; text-shadow: 2px 2px 3px rgba(255,255,255,0.25); -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; }
.main.realtimeDisplayMainInternal.filled .xyz #openActions .downActionTitle { background-color: var(--msgblu); color: transparent; text-shadow: 2px 2px 3px rgba(255,255,255,0.25); -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; }
.main.realtimeDisplayMainInternal.filled .xyz .downActionWrap .daItemName { font-weight: 700; }
.main.realtimeDisplayMainInternal.filled .xyz .downActionWrap .daItemDetails { font-size: 0.8em; }
.main.realtimeDisplayMainInternal.filled .xyz .downActionWrap .daItemFooter { font-weight: 700; font-size: 0.8em; font-style: italic; }
.main.realtimeDisplayMainInternal.filled .xyz .downActionWrap #downtimeEvents span.daItemDivider { color: #D35F5F; font-weight: bold; }
.main.realtimeDisplayMainInternal.filled .xyz .downActionWrap #openActions span.daItemDivider { color: #3EBF46; }
.main.realtimeDisplayMainInternal.filled .xyz .downActionWrap div.kpiBoxV2 {font-weight: 700; text-align: center;width: 100%;flex-basis: 100%;/*height: 50vh;*/box-sizing: border-box;display: flex;align-content: center;justify-content: center;align-items: flex-start;}
.main.realtimeDisplayMainInternal.filled .xyz .downActionWrap div.kpiBoxV2.hidden {display: none;}
.main.realtimeDisplayMainInternal.filled .xyz .downActionWrap div.kpiBoxV2 span#coTimer {letter-spacing: 1vw; color: var(--primary); font-size: 10vw;}
.main.realtimeDisplayMainInternal.filled .xyz .downActionWrap div.kpiBoxV2 .kpi.red span#coTimer {animation: displayBlinker 1s linear infinite;}
.main.realtimeDisplayMainInternal.filled .xyz .downActionWrap div.kpiBoxV2 .kpi {display: flex; flex-direction: column-reverse;}
.main.realtimeDisplayMainInternal.filled .xyz .downActionWrap div.kpiBoxV2 .kpi h1{margin: 1vh;}
.main.realtimeDisplayMainInternal.filled #kpiRate.red{animation: displayBlinker 1s linear infinite;}

/*SSignature Pad*/
#peopleSignatureCanvas {text-align: center;display: block;margin-left: auto;margin-right: auto;}
#peopleSignatureCanvas canvas {border: 2px solid #bbbbbb;}
#peopleSignatureCanvas canvas:hover {border-color: #0D80A0;}


.scheduleMain{position: relative; padding: 0; height: 270px; max-height: 370px; width: 100%; display: grid; margin-bottom: 20px; box-sizing: border-box; overflow-x: auto; overflow-y: auto;}
.scheduleMain .row{position: relative; top: 30px; width: 100%; white-space: nowrap; border-top: #ccc solid 1px; text-align: left; box-sizing: border-box;}
.scheduleMain .row.second{top: 150px;}
.scheduleMain .row > div{position: absolute; display: inline-block;}
.scheduleMain .row > div .text{height: 100px; overflow: hidden; font-size: 12px; text-align: left; padding: 5px; box-sizing: border-box; white-space: nowrap; border-radius: 5px; box-sizing: border-box; white-space: nowrap; z-index: 1; border: 2px solid #999;}
.scheduleMain .row .record{margin: 5px 0 0 ;}
.scheduleMain .row .record:has(.candleOverlay){pointer-events: none;}
.scheduleMain .row .record:has(.candleOverlay):hover .text{border-color: var(--primary); opacity: 0.9;}
.scheduleMain .row .record .candleOverlay{pointer-events: auto; height: 20px; width: 100px; background: repeating-linear-gradient( -45deg, #84a7d3, #84a7d3 10px, #43699b 10px, #43699b 20px); position: absolute; left: -10px; top: 70px; border-radius: 3px; border: 1px solid #43699b; z-index: 3;}
.scheduleMain .row .record .candleOverlay:hover{cursor: pointer}
/*.scheduleMain .row > div{position: absolute;display: inline-block;border-radius: 10px; box-sizing: border-box; white-space: nowrap; z-index: 1;}*/
/*.scheduleMain .row > div .text{width: 100%; overflow: hidden; font-size: 12px; text-align: left; padding: 5px; box-sizing: border-box; white-space: nowrap;}*/
.scheduleMain .row > div .text:hover{cursor: pointer; border-color: #666666;}

.scheduleMain .row .label{position: sticky; left: 0; font-size: 13px; width: fit-content; text-align: center; padding: 5px 10px; box-sizing: border-box; white-space: nowrap; z-index: 2; background: #fff; border-radius: 0 0 5px 5px; border: 1px solid #ccc; border-top-width: 0; display: flex; align-items: center; gap: 8px;}

.scheduleMain .rowBG{position: absolute; width: 100%; white-space: nowrap; font-size: 12px; box-sizing: border-box; padding: 0}
.scheduleMain .rowBG > div{display: inline-block;}
.scheduleMain .rowBG > div.odd{background-color: #eee;}
.scheduleMain .rowBG > div.today{background-color: var(--light);}
.scheduleMain .rowBG > div .date{position: sticky; top: 0; height: 31px; padding: 5px 0; z-index: 10; background: #fff; border-bottom: 1px solid #ccc; box-sizing: border-box;}


.scheduleMain .row div.Created .text{background-color: #d5d5d5; color: #333333;}
.scheduleMain .row div.Planned .text{background-color: #84a7d3; color: #ffffff;}
.scheduleMain .row div.Released .text{background-color: #597599; color: #ffffff;}
.scheduleMain .row div.Active .text{background-color: var(--goodGreen); color: #ffffff;}
.scheduleMain .row div.Completed .text{background-color: #93c596; color: #ffffff;}
.scheduleMain .row div.Cancelled .text{background-color: var(--badRed);  color: #ffffff;}

.scheduleMain .row div.tan .text{background-color: #d5d5d5; color: #333333;}
.scheduleMain .row div.lightBlue .text{background-color: rgba(132, 167, 211, 0.7); color: #ffffff;}
.scheduleMain .row div.blue .text{background-color: rgba(89, 117, 153, 0.7); color: #ffffff;}
.scheduleMain .row div.green .text{background-color: var(--goodGreen); color: #ffffff;}
.scheduleMain .row div.lightGreen .text{background-color: #93c596; color: #ffffff;}
.scheduleMain .row div.red .text{background-color: var(--badRed);  color: #ffffff;}

.formRow .popUpBox.active .searchResult{width: 300px;}

.assistant h2{text-align: center;}
.assistant .recommendations{border: 1px solid #777; box-sizing: border-box; padding: 10px; border-radius: 3px; margin: 0 0 15px;}
.assistant .recommendations p{margin-top: 0; user-select: none;}
.assistant .assistantFeedback i{margin: 5px;}

/*--- V2  ---*/
.main{padding-top: 20px;}
.main.filled:not(.loginMain) section.pageHeader{padding-top: 0;}
/*.main.filled:not(.loginMain) section.pageHeader{align-content: flex-start; padding-top: 0;}*/
/*.main.filled:not(.loginMain) section.pageHeader h1{text-align: left;}*/
/*.main.filled section.pageHeader h2{text-align: left;}*/
/*.main.filled section.pageHeader h3{text-align: left;}*/
/*.main.filled section.pageHeader h4{text-align: left;}*/
.main.filled:not(.loginMain) section.pageHeaderV2{align-content: flex-start; padding-top: 0;}
.headerBar{box-shadow: none; background-color: #DDE7FF; border-bottom: 1px solid #255697; display: grid; grid-template-columns: 1fr auto 1fr; justify-content: space-between; overflow: unset;}
.headerBar .headerBar-outerSection{width: fit-content; display: flex; flex-wrap: nowrap;}
.headerBar .headerBar-outerSection.right{justify-self: right;}

section.block.short{column-gap: 10px; row-gap: 15px; justify-content: flex-start;}
section.block.short .shortBlockBtn {gap: 12px ; width: auto; flex: clamp(200px, 100% ,300px) 0 0; border-radius: 8px;font-size: 1rem; transition: background-color 100ms ease-in, border 100ms ease-in; display: flex;justify-content: flex-start;flex-direction: row;border: solid 1px #ffffff;align-items: center;min-height: 0;padding: 15px 20px;margin: 10px 5px;background-color: #ffffff; color: #273b61; max-width: unset;}
/*section.block.short .shortBlockBtn {gap: 15px; box-sizing: border-box; border-radius: 8px; transition: none; border: 1px solid #ffffff;}*/
section.block.short .shortBlockBtn div{display: flex; flex-direction: column; align-items: flex-start; row-gap: 2px;}
section.block.short .shortBlockBtn div .shortBlockBtn-title{font-weight: 600;text-align: left;}
section.block.short .shortBlockBtn div .shortBlockBtn-subTitle{font-size: 0.8em; text-align: left;}
section.block.short .shortBlockBtn:hover {background-color: #DDE7FF; border: 1px solid #255697;}
section.block.short .shortBlockBtn i{font-size: 2em; padding: 0; width: 50px; box-sizing: border-box;}

#rmsg.login{padding: 8px; border-radius: 8px;}

.main.filled section.pageHeaderV2 .headerActions .links .linkObjects i{color: var(--progressBlue);}

.formRow:hover:not(.formRow.red):not(.formRow.green):not(.formRow.yellow):not(.formRow.addRecordRow):not(.formRow.head),
.formRow:hover:not(.formRow.red):not(.formRow.green):not(.formRow.yellow):not(.formRow.addRecordRow):not(.formRow.head) > div,
.formRow:hover:not(.formRow.red):not(.formRow.green):not(.formRow.yellow):not(.formRow.addRecordRow):not(.formRow.head) > div select:not(.excludeFormPopRow),
.formRow:hover:not(.formRow.red):not(.formRow.green):not(.formRow.yellow):not(.formRow.addRecordRow):not(.formRow.head) > div input:not(.excludeFormPopRow),
.formRow.ultraLight:hover:not(.formRow.red):not(.formRow.yellow):not(.formRow.green),
.formRow.ultraLight:hover:not(.formRow.red):not(.formRow.yellow):not(.formRow.green) > div,
.formRow.ultraLight:hover:not(.formRow.red):not(.formRow.yellow):not(.formRow.green) > div select,
.formRow.ultraLight:hover:not(.formRow.red):not(.formRow.yellow):not(.formRow.green) > div input:not(.excludeFormPopRow)
{background-color: #e1e8f3;}

.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: #f6f6f6; color: #333;}

.apModalSelect{font-size: 1rem; margin-bottom: 10px; padding: 10px;}

/*.main .sectionBox.w100.actionPlanTasks{box-sizing: border-box; width: calc(100% - var(--actionPlanKpiWidth)); }*/
.main .sectionBox.w100.actionPlanTasks{box-sizing: border-box; width: 100%;}
.main .sectionBox.actionPlanKPIs{height: 200vh;}
.main .sectionBox.actionPlanKPIWrapper{width: var(--actionPlanKpiWidth); position: sticky; top: 165px; height: calc(100vh - 165px); overflow-y: auto;}
.main .sectionBox.actionPlanTaskContainer{display: grid; grid-template-columns: var(--actionPlanKpiWidth) calc(100% - var(--actionPlanKpiWidth)); gap: 10px; padding: 10px 0; width: 100%}

/*.main .sectionBox.w100.actionPlanTasks{left: var(--actionPlanKpiWidth); position: absolute; width: calc(100% - var(--actionPlanKpiWidth)); min-width: clamp(200px, 100%, 500px); box-sizing: border-box;}*/
/*.main .sectionBox.actionPlanKPIWrapper{width: var(--actionPlanKpiWidth); position: sticky; top: 165px; height: calc(100vh - 165px); overflow-y: auto;}*/


/*.main .sectionBox.actionPlanKPIs{width: var(--actionPlanKpiWidth); position: sticky; top: 165px; height: calc(100vh - 165px); overflow-y: auto;}*/
/*.main .sectionBox.actionPlanKPIs.smooth{transition: top 400ms;}*/
/*.main .sectionBox.actionPlanKPIs.active{top: 80px; height: calc(100vh - 100px);}*/
.actionPlanKPIWrapper{row-gap: 10px; position: sticky; top: 50px; height: calc(100vh - 80px); justify-content: flex-start; padding: 10px; overflow-y: auto;}

.main .sectionBox.collapsableV2ParentGrid{display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0;}
.main .sectionBox.collapsableV2ParentGrid-3{display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; padding: 0;}
/*.main .sectionBox.collapsableV2 > div > div{padding-top: 20px;}*/
.collapsableOuter .sectionBox{background-color: transparent;}

/*.main .sectionBox.actionPlanTaskContainer{display: flex; flex-wrap: nowrap; gap: 10px; padding: 10px 0;}*/
.main .sectionBox.actionPlanGeneralTasks{position: sticky; bottom: 0; padding: 10px 0; display: flex; flex-direction: row; background-color: #FFFFFF; border-top: solid 1px #ccc;}

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;}
}

.apKpiModal{width: 100%; display: grid; gap: 24px; grid-template-columns: 1fr 1fr; flex-wrap: wrap;}
.col-span-2{ grid-column: span 2;}
section.apDetail{margin-bottom: 0; padding: 0;}

.apScoreCardResult{display: flex; flex-direction: row; align-items: center; gap: 15px; justify-content: space-between;}
.apScoreCardResult.stacked{flex-direction: column-reverse; align-items: flex-end; gap: 0;}
.apScoreCardResult span:last-child{font-weight: 600;}
.apScoreCardResult span.green{color: var(--goodGreen);}
.apScoreCardResult span.red{color: var(--badRed);}
.apScoreCardResult span:first-child{font-size: 0.8rem; color: #666666;}

.main.filled section.pageHeaderV2.actionPlanning .hx{align-items: unset;}
section.block.long.formOPbjAsBtn{
	width: 180px; margin: 0; padding: 0;
	& > div{margin: 0; padding: 0; height: unset; min-height: 0;}
	section.block.long.narrow > div{padding-left: 0; padding-right: 0; }

	.longBlock.formInput select{border-width: 1px;border-radius: 3px;padding: 8px 12px;}
	.longBlock.formInput input{border-width: 1px;border-radius: 3px;padding: 8px 12px;}
}

/*Action plan additional text boxes*/
section.block.long.smallFontSize .longBlock.formInput textarea{
	height: calc(var(--collapsableVerticalHeight) - 55px);
	transition: height var(--collapsableVerticalHeightTransition), font-size 200ms;
}

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

/*@position-try --bottom {*/
/*	margin: var(--padding) 0 0 var(--padding);*/
/*	inset-area: bottom;*/
/*}*/

.formRow.scrollableV2{margin: 0;}


@media print {
	.headerBar{display: none;}
}

.headerBar .btn.locationSelection{
	padding: 0;
	text-align: left;
	min-width: 80px;
}

.headerBar .btn.locationSelection > span{font-size: 0.7em; display: flex; flex-direction: column; gap: 0; height: 100%; justify-content: center; padding: 0 10px;}
.headerBar .btn.locationSelection > span.large{font-size: 0.9em;}
.headerBar .btn.locationSelection > span > span:first-child{font-weight: 600;}

.modal-content {
	padding: 0;
	display: flex;
	min-height: 300px;
	max-width: 800px;
}

.nav-column {
	flex: 1;
	border-right: 1px solid #e9ecef;
	overflow-y: auto;
	max-height: 300px;
}

.nav-column:last-child {
	border-right: none;
}

/* Hide columns based on modal level */
.modal.level-1 .nav-column:nth-child(2),
.modal.level-1 .nav-column:nth-child(3) {
	display: none;
}

.modal.level-2 .nav-column:nth-child(3) {
	display: none;
}

.column-header {
	background: #f8f9fa;
	padding: 8px 20px;
	font-weight: 600;
	font-size: 14px;
	color: #495057;
	border-bottom: 1px solid #e9ecef;
	position: sticky;
	top: 0;
	z-index: 10;
}

.column-toggle {
	display: none;
}

.nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav-item {
	border-bottom: 1px solid #f1f3f4;
}

.nav-item:last-child {
	border-bottom: none;
}

.nav-link {
	display: block;
	padding: 15px 20px;
	color: #333;
	text-decoration: none;
	transition: all 0.2s ease;
	cursor: pointer;
	position: relative;
	text-align: left;
}

.nav-link:hover {
	background: #f8f9fa;
	color: #4a90e2;
	padding-left: 25px;
}

.nav-link.active {
	background: #e3f2fd;
	color: #4a90e2;
	border-left: 4px solid #4a90e2;
	font-weight: 500;
}

.nav-link.active:hover {
	padding-left: 20px;
}

.plant-name {
	font-weight: 500;
	font-size: 13px;
	/*margin-bottom: 4px;*/
}

.plant-info {
	font-size: 11px;
	color: #6c757d;
	line-height: 1.3;
}

.dept-name {
	font-weight: 500;
	font-size: 13px;
	/*margin-bottom: 2px;*/
}

.dept-count {
	font-size: 10px;
	color: #6c757d;
}

.resource-name {
	font-size: 13px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.resource-status {
	font-size: 9px;
	padding: 2px 6px;
	border-radius: 10px;
	font-weight: 500;
}

.status-active {
	background: #d4edda;
	color: #155724;
}

.status-maintenance {
	background: #fff3cd;
	color: #856404;
}

.status-offline {
	background: #f8d7da;
	color: #721c24;
}

/* Generic visibility classes for dynamic content */
.dept-item {
	display: none;
}

.dept-item.visible {
	display: block;
}

.resource-item {
	display: none;
}

.resource-item.visible {
	display: block;
}

.breadcrumb {
	display: flex;
	background: #f8f9fa;
	padding: 15px 25px;
	border-top: 1px solid #e9ecef;
	font-size: 13px;
	color: #6c757d;
	justify-content: space-between;
	align-items: center;
}

.breadcrumb-path {
	font-weight: 500;
	color: #495057;
}

.select-btn {
	background: var(--msggre);
	color: white;
	border: none;
	padding: 8px 16px;
	border-radius: 6px;
	font-size: 12px;
	cursor: pointer;
	float: right;
	transition: background 0.2s ease;
}

.select-btn:hover {
	background: var(--msggrehi);
}

.select-btn:disabled {
	background: #6c757d;
	cursor: not-allowed;
}

.empty-state {
	padding: 40px 20px;
	text-align: center;
	color: #6c757d;
	font-style: italic;
	display: block;
}

.empty-state.hidden {
	display: none;
}

.demo-text {
	margin-bottom: 30px;
	color: #666;
	line-height: 1.5;
}

.selected-result {
	margin-top: 30px;
	padding: 20px;
	background: #e8f5e8;
	border-radius: 8px;
	border-left: 4px solid #28a745;
	display: none;
}

.result-label {
	font-weight: 600;
	margin-bottom: 5px;
	color: #155724;
}

.result-path {
	font-family: monospace;
	color: #155724;
	font-size: 14px;
}

@media (max-width: 768px) {
	.button-group {
		flex-direction: column;
		align-items: center;
	}

	.modal {
		width: 95%;
		margin: 10px;
	}

	.modal-content {
		flex-direction: column;
		min-height: auto;
	}

	.nav-column {
		border-right: none;
		border-bottom: 1px solid #e9ecef;
		max-height: none;
	}

	.nav-column:last-child {
		border-bottom: none;
	}

	/* Mobile collapsible functionality */
	.column-header {
		cursor: pointer;
		user-select: none;
		display: flex;
		justify-content: space-between;
		align-items: center;
		transition: background 0.2s ease;
	}

	.column-header:hover {
		background: #e9ecef;
	}

	.column-toggle {
		display: block;
		font-size: 12px;
		transition: transform 0.3s ease;
		color: #6c757d;
	}

	.nav-column.collapsed .column-toggle {
		transform: rotate(180deg);
	}

	.nav-column .nav-list,
	.nav-column .empty-state {
		max-height: 200px;
		overflow-y: auto;
		transition: all 0.3s ease;
	}

	.nav-column.collapsed .nav-list,
	.nav-column.collapsed .empty-state {
		max-height: 0;
		overflow: hidden;
		padding: 0;
		border: none;
	}

	.nav-column.collapsed .empty-state {
		padding: 0;
	}

	/* Auto-expand when items are visible */
	.nav-column.has-visible-items {
		max-height: none;
	}

	.nav-column.has-visible-items .nav-list {
		max-height: 250px;
	}
}