@media screen and (max-device-width: 640px){

	:root{
		--navLeftClosed: 0px;
		--defaultNavLeftWidthClosed: 0px;
	}

	/* Login screen */
	.main.loginMain { min-width: unset; width: 100%; padding: 0; }
	.loginMain .main.filled section.pageHeader { padding: 20px 10px; }
	.loginMain .pageHeader img { height: auto!important; width: 80%; }
	#clientForm .card, #loginForm .card { max-width: 600px; width: 90vw; }
	#clientForm .card .row div, #loginForm .card .row div { padding: 10px 0; }
	#clientForm img, #loginForm img { max-height: 75px; }
	#clientForm  section.block > div, #loginForm section.block > div {padding: 0;}


	h2{font-size: 1.2em;}

	.main{padding: 30px 2px 0 2px; width: calc(100%); margin-left: 0}

	.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{ max-width: calc(100%); padding: 0 0 30px 0 ;}
	.main.center > div, .main.center > form{justify-content: center;}

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

	.main .sectionBox.w10{width: 50%;}
	.main .sectionBox.w20{width: 100%;}
	.main .sectionBox.w25{width: 50%;}
	.main .sectionBox.w30{width: 50%;}
	.main .sectionBox.w30.fullMobile{width: 100%;}
	.main .sectionBox.w33{width: 50%;}
	.main .sectionBox.w40{width: 100%;}
	.main .sectionBox.w50{width: 100%;}
	.main .sectionBox.w60{width: 100%;}
	.main .sectionBox.w70{width: 100%;}
	.main .sectionBox.w75{width: 100%;}
	.main .sectionBox.w80{width: 100%;}
	.main .sectionBox.w100{width: 100%;}

	.main .sectionBox.la{text-align: center;}
	.main .sectionBox.ra{text-align: center;}

	.headerBar .btn.noHover:has(img){display: none;}
	/*.headerBar{grid-template-columns: 1fr 1fr;}*/


	.navLeft{
		height: calc(100% - 50px);
		margin-top: 50px;
		width: var(--navLeftClosed);
		overflow: auto;
		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: 80vw; max-width: 350px;}
	.navLeft .btn { font-size: 18px; height: 3em; display: flex; }
	.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 .expand, .navLeft .childBtn { display: none; }

	.navRight.active{width: calc(100%);}
	.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: 1.2em;
		text-align: center;
	}

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

	.headerBar .btn.locationSelection{
		min-width: 55px;
		padding: 15px 5px;
		text-align: center;
	}

	.headerBar .btn.noIcon i, .headerBar .btn i {font-size: 20px;}
	.headerBar .btn.noIcon i {display: block;}
	.headerBar .btn.noIcon span { display: none; }

	.headerBar .btn:first-child{
		min-width: 50px;
		font-size: 1.2em;
		text-align: center;
	}

	/*section.block.long.xLargeCenter{height: initial;}*/
	section.block.long.xLargeCenter .longBlock.formInput{width: 100%; padding-left: 0; padding-right: 0;}
	section.block.long.xLargeCenter .longBlock.formInput input[type='text']{width: 100%;}
	section.block.long.xLargeCenter .longBlock.formInput .subject{align-items: center; margin-bottom: 20px;}
	section.block.long.xLargeCenter .longBlock.formInput .subject label{font-size: 1.2em}

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

	section{
		padding: 5px;
		width: 100%;
		margin-bottom: 5px;
		font-size: 16px;
	}

	section.half{width: calc(100%);}
	section.third{width: calc(100%);}
	section.forth{width: calc(100%);}
	section.forthMobileHalf{width: calc(50%);}
	section.fifth{width: calc(100%);}
	section.sixth{width: calc(100%);}

	.formBtn.inRow{margin: 5px;}

	section.block.long .longBlock{font-size: 16px;}
	section.block.long .longBlock .subject{padding: 0 5px}

	.popUpBox{display: none;position: fixed;width: calc(100% - 10px);margin: 100px 5px 0 5px; padding: 30px 20px 50px;min-height: 200px;max-height: calc(100vh - 200px);font-size: 16px;}
	.popUpBox.small{margin: 100px 5px 0 5px;}

	#rmsg{max-width: calc(100vw - 20px); margin: 15px 10px 0; font-size: 1.1em;}

	.scrollIndicator {position: fixed; display: flex; border-width: 0; padding: 0; margin: 0; justify-content: center; bottom: 0; z-index: 100; width: 100vw; height: 120px; background-color: rgba(0,0,0,0.85); opacity: 1; transition: opacity 1s;}
	.scrollIndicator.hide {opacity: 0;}
	/*box-shadow: 0 0 50px 70px #333;*/
	.scrollIndicator a {
		padding-top: 70px;
		padding-bottom: 30px;
		color: #ffffff;
		font-size: 1.2em;
		text-decoration: none;
		font-family: 'Spline Sans', sans-serif;
	}
	.scrollIndicator a span {
		position: absolute;
		top: 0;
		left: 50%;
		width: 30px;
		height: 30px;
		margin-left: -15px;
		border-left: 3px solid #fff;
		border-bottom: 3px solid #fff;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
		-webkit-animation: sdb05 1.5s infinite;
		animation: sdb05 1.5s infinite;
		box-sizing: border-box;
	}
	@-webkit-keyframes sdb05 {
		0% {
			-webkit-transform: rotate(-45deg) translate(0, 0);
			opacity: 0;
		}
		50% {
			opacity: 1;
		}
		100% {
			-webkit-transform: rotate(-45deg) translate(-20px, 20px);
			opacity: 0;
		}
	}
	@keyframes sdb05 {
		0% {
			transform: rotate(-45deg) translate(0, 0);
			opacity: 0;
		}
		50% {
			opacity: 1;
		}
		100% {
			transform: rotate(-45deg) translate(-20px, 20px);
			opacity: 0;
		}
	}

	/*menu option grid*/
	section.block.short{column-gap: 10px; row-gap: 5px; justify-content: center;}

	/* Live Remote Plant */
	.realtimeDisplayMainInternal #linesContainer h1 { font-size: 3vh; }
	.realtimeDisplayMainInternal #linesContainer .lineInfo { padding: 15px 0; flex-wrap: wrap; font-size: 2vh; }
	.realtimeDisplayMainInternal #linesContainer .lineNameTime > span { display: block; font-size: 2.5vh; }

	/* Live Remote Line */
	#liveRemoteLine .main.realtimeDisplayMainInternal.filled,
	.main.realtimeDisplayMainInternal.filled .sidebar .kpiBoxV2 .kpi > h1,
	.main.realtimeDisplayMainInternal.filled .xyz .downActionWrap .downActionTitle { font-size: 6vw; }
	.main.realtimeDisplayMainInternal.filled .sidebar h1 { font-size: 3vh; }
	.main.realtimeDisplayMainInternal.filled .sidebar .kpiBoxV2 .kpi > span { font-size: 10vw; }
	.main.realtimeDisplayMainInternal.filled .xyz .downActionWrap .daItemDetails { font-size: 5vw; }
}