html {
 font-family: Arial, Sans-Serif;
 display: inline-block;
 margin: 0px auto;
 text-align: center;
}
h1 {
	transition: .8s;
	color: #000;
	font-size: 3rem;
	text-shadow: 0px 0px 1px #102005;
}
h1:hover{
	transition: .8s;
	color: #000;
	text-shadow: 0px 0px 2px #153010;
}
h2 {
	font-size: 1.5rem;
	margin: 0.8rem;
}
p {
	font-size: 1.0rem;
	margin: 0.7rem;
	/*background-color: #999;*/
}
span{
	font-size: 1rem;
}
form { 
	font-size: 1.5rem; 
	margin: 0px auto;
	text-align: center;
}
ul{
	list-style-type: none;
	background-color: #192;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
}
label{
	padding: 0px;
	margin: 0px 0px 0px 0px;
	/*float:right;*/
}

table{
	color: #142;
	margin: 0px;
	border-collapse: collapse;
	border: 2px solid;
	border-color: #142;
	justify-content: left;	
	margin-left: auto;
	margin-right: auto;
	width: 80%;
}
th, td{
	padding: 5px;
	border-collapse: collapse;
	border: 1px solid;
	border-color: #142;
	justify-content: left;
}
td{
	color: #142;
}
tr:hover { 
	background-color: #D6EEEE;
}

.form-label{
	float: right;
}

.error-message{
	width: 100%;
	margin: auto;
	color: #c31;
	font-size: .85rem;
}
.col30{
	float:left;
	width:25%;
	text-align:right;
}
.col40{
	float:left;
	width:50%;
}
.err-col{
	float:right;
	width:25%;
}
.err-row{
	display:block;
	width:90%;
}
.row::after{
	content:"";
	display: table;
	clear: both;
}
.err-col-mark{
	color: #c31;
	font-size: .85rem;
	float:left;
	margin-left:25px;  	
}

#email_err_msg{
	position: relative;
	top: -10px;
}

#pwrd_err_msg{
	position: relative;
	top: -10px;
}

#pwrd_email_invalid{
	position: relative;
	top: -10px;
}

form{
	align-items: center;
	justify-content: center;	
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}


div.col40 > input {
	margin-left: 10px;
	width: 100%;
	float:left;
	font-size:1.25rem;
}

input[type="button"], input[type="submit"]{

    background-color: #192;
	color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 2.0rem;
    cursor: pointer;
	padding: 20px;
    transition: 0.25s;
	margin: 45px 0px 0px 0px;
}
input[type="button"]:hover, input[type="submit"]:hover{
	margin: 45px 0px 0px 0px;
	background-color: #172;
    color: #e0f8ec;
}


ul.nav-menu{
	
	display: flex;
	flex-direction: row-reverse;
}

ul.nav-menu-vertical{
	height: 100%;
	max-width: 100%;
	display: flex;
	flex-direction: column;
}

ul.nav-menu > li {
    transition: 0.3s;
	/*display: block;*/
	float: right;
	color: #ccc;
	padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 0px;
	padding-right: 0px;
}
ul.nav-menu-vertical > li {
    transition: 0.3s;
	/*display: block;*/
	float: right;
	color: #ccc;
	padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 0px;
	padding-right: 0px;
}
li > a {
    color: #fff;
    text-decoration: none;
	text-align: center;
    font-size: 1rem;
    transition: 0.3s;
	padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 10px;
	padding-right: 10px;
	overflow-x: clip;
}

li > a:hover {
    color: #e0f8ec;
}

li > a.active {
    color: #e0f8ec;
}

li.vertical-nav-link {

}

a.vertical-nav-link {
	color: #fff;
    text-decoration: none;
	text-align: center;
    font-size: 1rem;
	white-space: nowrap;
    transition: 0.3s;
    padding-left: 140px;
    padding-right: 500px;
	padding-top: 15px;
	padding-bottom: 15px;
    position: relative;
    left: -18%;
	overflow-x: clip;
}

ul.nav-menu > li:hover {
    /*background-color: #232 /*#a0a0a8;*/
	background-color: #172;
}
ul.nav-menu > li.active {
	background-color: #152;
}

ul.nav-menu-vertical > li:hover {
    /*background-color: #232 /*#a0a0a8;*/
	background-color: #172;
}
ul.nav-menu-vertical > li.active {
	background-color: #152;
}

/*sector command buttons and others*/
button{
	background-color: #192;
	color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 2.0rem;
    cursor: pointer;
	padding: 20px;
    transition: 0.25s;
}
button:disabled{
	background-color: #566;
	color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 2.0rem;
    cursor: default;
	padding: 20px;
    transition: 0.25s;
}
button:hover{
	background-color: #172;
    color: #e0f8ec;
}
button:disabled:hover{
	background-color: #666;
    color: #e0f8ec;
}
button.nav-menu-toggle{
	position: fixed;
	top: 10px;
	right: 10px;
	background-color: #192;
	color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 1.0rem;
    cursor: pointer;
	padding: 10px;
    transition: 0.25s;
}

button.nav-menu-toggle:hover{
	background-color: #172;
    color: #e0f8ec;
}

div.sensor_data_tables{
	align-items:center;
}

p.instructions{
	/*padding: 0px 15% 0px 15%;*/
	padding: 20px;
	width: 80%;
	margin: auto;
	text-align: left;
	background-color: #e0f8ec;
}

span.instructions{
	margin: 50px;
	justify-content: left;
}

#permission-bar{
	display: grid;
	grid-template-columns: 3fr 1fr 2fr 20fr;
	grid-gap:10px;
	text-align: left;
	margin:10px;
	padding:5px;
	border: solid;
	border-width: 3px; 
	border-color:#152;
	background-color:lightYellow;
}

#permission-drawer-container{
	display: block;
	text-align: center; 
	margin: 0px; 
	padding: 5px; 
	border: solid; 
	border-width: 2px; 
	border-radius: 4px; 
	border-color: #152; 
	background-color: lightYellow;
}

@media (max-width: 800px){
	ul.nav-menu{
		/*flex-direction: column;*/
		visibility: hidden;
	}
	/*
	#permission-bar{
		display: none;
		visibility: hidden;
	}
	*/
}
@media (min-width: 801px){

	button.nav-menu-toggle{
		visibility: hidden;
	}
	/*
	#permission-drawer-container{
		display: none;
		visibility: hidden;
	}
	*/
}

/* sidebar popover nav*/
[popover] {
  
  /*box-sizing: border-box;*/
  transition: inset 0.3s, display 0.3s allow-discrete;
  inset: 0 -100% 0 auto; /* 3. Transitions back to this */
  
  min-width: 150px;
  max-width: 70%;
  border: none;
  height: 100%;
  background: #192;
  list-style-position: inside;
  
  &:popover-open {
	  inset: 0 0px 0 auto; /* 2. Transitions to this */
	  @starting-style {
		inset: 0 -100% 0 auto; /* 1. Starts like this */
	  }
  }

}

/* labels for editing names*/
.name-label {
	font-size: 18px;
}
/* labels for editing names*/

/* toggle switch */

.offscreen {
  display: none;
  visibility: hidden;
  position: absolute;
  left: 150px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 90px;
  height: 48px;
}

.slider {
  position: absolute;
  display: inline;
  /*cursor: pointer;*/
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 70px;
  height: 100%;
  background-color: #ccc;
  border-radius: 14px;
  -webkit-transition: .4s;
  transition: .4s;
  box-shadow: 0 0 5px #152 inset;
}

.slider.disabled {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #909090;
  border-radius: 12px;
  -webkit-transition: .4s;
  transition: .4s;
  box-shadow: 0 0 5px #152 inset;
}

.slider:before {
  position: absolute;
  content: "";
  height: 62px;
  width: 62px;
  left: 4px;
  bottom: 4px;
  background-color: #585;
  border-radius: 12px;
  -webkit-transition: .4s;
  transition: .4s;
  box-shadow: 0 0 3px #555, 0px 0px 10px 5px #272 inset;
}

.slider.disabled:before {
  position: absolute;
  content: "";
  height: 62px;
  width: 62px;
  left: 4px;
  bottom: 4px;
  background-color: #ABA;
  border-radius: 9px;
  -webkit-transition: .4s;
  transition: .4s;
  box-shadow: 0px 0px 0px 0px #DFE, 0px 0px 10px 5px #686 inset;
}

input:checked + .slider {
  position: absolute;
  content: "";
  height: 100%;
  width: 70px;
  left: 0px;
  bottom: 0px;
  background-color: #888;
  border-radius: 12px;
  -webkit-transition: .4s;
  transition: .4s;
  box-shadow: 0px 0px 0px 0px #DFE, 0px 0px 10px 5px #686 inset;
 /* box-shadow: 0px 0px 10px #4A6 inset ; */
}

input:checked + .slider:before {
  position: absolute;
  content: "";
  height: 62px;
  width: 62px;
  left: 4px;
  bottom: 4px;
  background-color: #8FB;
  border-radius: 12px;
  -webkit-transition: .4s;
  transition: .4s;
  box-shadow: 0px 0px 20px 15px #DFE, 0px 0px 10px 5px #6B8 inset;
  /* box-shadow: 0px 0px 10px #4A6 inset ; */
}

input:checked + .slider.disabled {
  background-color: #759580;
}

input:focus + .slider {
  /*box-shadow: 0 0 2px #2196F3*/;
}
/*
input:checked + .slider:before {
  -webkit-transform: translateX(42px);
  -ms-transform: translateX(42px);
  transform: translateX(42px);
}
*/

ul.homeList {
	text-align: left;
	list-style-type: disc;
	list-style-position: inside;
	background-color: #e0f8ec;
	color: #152;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
}

li.homeItem {
	background-color: #e0f8ec;
	margin: 5px 5px 5px 10%;
}

li.homeItem > a {
	color: #152;
    text-decoration: none;
    font-size: 1.2rem;
    transition: 0.3s;
	text-align: center;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-right: 0px;
	overflow-x: clip;
}
li.homeItem > a:hover {
    /*color: #1a2; #a0a0a8;*/
    /*color: #ebebf8 /*#a0a0a8;*/
    color: #2a4;
}

.modules-drop-down-menu {
	font-size:18px;
	width: 50%;
	max-width: 300px;
}

/* notification modal*/
.modal {
	display: none;
	/*display: block;*/
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	left: 0%;
	top: 0%;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(103 110 125 / 0.75);
	background-color: #676E7DC0;
	padding-top: 0%;
}

.modal-title-bar {
	display: block;
	position: relative;
	height: 46px;
	width: 100%;
	background-color: #CCC;
}

.modalCloseX{
	float: right;
	cursor: pointer;
	color: black;
	background-color: #C44;
	padding: 0px 8px 0px 8px;
	margin: 5px;
	border:none;
	border-radius:5px;
	font-size:2.0rem;
}

.modal-contents {
	position: relative;
	z-index: 2; /* Sit on top */
	width: 80%; /* Full width */
	/*height: 60%;  Full height */
	border: solid;
	border-width: 3px;
	border-radius: 3px;
	border-color: #CCC;
	background-color: #FDFDFF;
	margin: 5% auto 10% auto;
}

/* Modal Box */
p.modalMessage{
	position: static;
	font-size:2.5rem;
	margin: 5% 1% 5% 1%;
	color:black;
}

.modalCloseX:hover{
	background-color:red;
}
.modalCancelBtn {
	position: static;
	width: 48%;
	margin: 4% 1% 4% 1%;
}
.modalOkBtn {
	position: static;
	width: 42%;
	margin: 4% 1% 4% 1%;
}

input[type=submit].modalConfirmBtn{
	position: static;
	width: 48%;
	margin: 4% 1% 4% 1%;
}
input[type=submit].modalConfirmBtn:hover{
	position: static;
	width: 48%;
	margin: 4% 1% 4% 1%;
}
/* notification modal*/

/* Module Box*/
.module-box {
	border: solid;
	border-width: 3px;
	border-color: #192;
	border-radius: 5px;
	display: block;
	visibility: hidden;
	background-color: #e0f8ec;
	width: 90%;
	margin: auto;
}
.box-title-main {
	display: block;
	color: white;
	font-size: 24px;
	padding: 10px;
	background-color: #192;
}
.sub-module-box {
	margin: auto;
	margin-top: 10px;
	width: 90%;
	border: solid;
	border-color: #a0e0ac;
	border-width: 2px;
	border-radius: 4px;
	min-width: 200px;
	max-width: 1600px;
	background-color: #e0f8ec;
}
.box-title-sub {
	display: block;
	padding: 5px;
	font-size: 18px;
	background-color:#a0e0ac
}

.sector-command-button {
	margin: 5px;
	width: 200px;
	height: 62px;
	font-size: 22px;
}
.sector-command-button:disabled {
	margin: 5px;
	width: 200px;
	height: 62px;
	font-size: 22px;
	color: lightGray;
}

/*module box*/
/*sector irrigation indicator*/
/*selector div*/
.selector-div {
	position: relative;
	display: grid;
	grid-template-columns: 3fr 7fr;
	grid-gap:10px;
	vertical-align: top;
	min-width: 220px;
	height: 70px;
	/*jump here*/
}
.sector-state-label {
	font-size:20px;
}
/*sector irrigation indicator*/
/* user feedback and comm status */
.user-feedback-div {
	display: block;
	padding: 5px;
}
.user-feedback-label {
	display: inline-block;
	font-size:12px;
	min-width: 200px;
	width: 40%;
	margin-top: 40px;
}
.comm-error {
	display: block;
	padding: 5px;
}
.comm-status-label {
	display: inline-block;
	font-size:12px;
	min-width: 200px;
	width: 40%;
}
/* user feedback and comm status */

/*gauge canvas*/
.gauge-div {
	position: relative;
	display: inline-block;
	min-width: 200px;
	width: 40%;
	height: auto;
}
.gauge-canvas-label {
	font-size:20px;
}
/*gauge canvas*/

@media screen and (max-width: 800px) {
  .modalCancelBtn, input[type=submit].modalConfirmBtn {
     width: 100%;
	 margin: 4% 1% 4% 1%;
  }
  .modalCancelBtn:hover, input[type=submit].modalConfirmBtn:hover {
     width: 100%;
	 margin: 4% 1% 4% 1%;
  }
}

.module-picture-section{
	background-color: #e0f8ec;
	margin: auto;
	padding: 2% 2% 1px 2%;
	max-width: 1000px;
}

.module-decr-section{
	display: block;
	text-align: left;
	background-color: #e0f8ec;
	margin: auto;
	padding: 1px 2% 2% 2%;
	max-width: 1000px;
}

/*slideshow css*/
.slideshow-container {
	position: relative;
	height: 80vh;
	overflow: hidden;
}

.slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/*height: 90vh;*/
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 1s ease-in-out;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
}

.slide::before {
	content: "";
	position: absolute;
	top: -10%;
	left: -10%;
	right: -10%;
	bottom: -10%;
	background-image: inherit;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	animation: slowGrow 30s ease-out infinite;
	z-index: 0;
}

.slide::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 1;
}

@keyframes slowGrow {
	0% {
		transform: scale(0.8);
	}
	100% {
		transform: scale(1.0);
	}
}

.slide.active {
	opacity: 1;
}

.slide:nth-child(1) {
	background-image: url("https://picsum.photos/seed/albu/1920/1080?random=1");
}

.slide:nth-child(2) {
	background-image: url("https://picsum.photos/seed/querque1920/1080?random=2");
}

.slide:nth-child(3) {
	background-image: url("https://picsum.photos/seed/smart/1920/1080?random=3");
}

.slide:nth-child(4) {
	background-image: url("https://picsum.photos/seed/drop/1920/1080?random=4");
}

.slide:nth-child(5) {
	background-image: url("https://picsum.photos/seed/aquapulse/1920/1080?random=5");
}

/* Motion blur background elements */
.blur-element {
	position: absolute;
	border-radius: 50%;
	filter: blur(20px);
	opacity: 0.3;
	animation: float 6s ease-in-out infinite;
	z-index: 2;
}

.blur-element:nth-child(1) {
	width: 300px;
	height: 300px;
	background: rgba(255, 255, 255, 0.2);
	top: 20%;
	left: -10%;
	animation-delay: 0s;
}

.blur-element:nth-child(2) {
	width: 200px;
	height: 200px;
	background: rgba(255, 255, 255, 0.15);
	top: 60%;
	right: -5%;
	animation-delay: 2s;
}

.blur-element:nth-child(3) {
	width: 150px;
	height: 150px;
	background: rgba(255, 255, 255, 0.1);
	bottom: 20%;
	left: 20%;
	animation-delay: 4s;
}

@keyframes float {
	0%,
	100% {
		transform: translateY(0px) rotate(0deg);
	}
	50% {
		transform: translateY(-20px) rotate(180deg);
	}
}

/* Central content that stays fixed */
.central-content {
	position: relative;
	top: 0%;
	left: 50%;
	transform: translate(-50%, 0%);
	z-index: 10;
	text-align: center;
	color: white;
	transition: all 0.5s ease;
}

.portfolio-item {
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(20px);
	border-radius: 20px;
	padding: 20px 40px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	min-width: 200px;
	transform: scale(0.8);
	transition: transform 0.3s ease;
}

.portfolio-item:hover {
	transform: scale(.9);
}

/* Text animations */
.portfolio-number {
	font-size: 14px;
	letter-spacing: 2px;
	opacity: 0;
	margin-bottom: 10px;
	animation: fadeInUp 0.6s ease-out 0.3s forwards;
}

.portfolio-title {
	font-size: 36px;
	font-weight: bold;
	margin-bottom: 20px;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
	opacity: 0;
	animation: fadeInUp 0.7s ease-out 0.3s forwards;
}

.portfolio-description {
	font-size: 16px;
	line-height: 1.6;
	opacity: 0;
	margin-bottom: 30px;
	animation: fadeInUp 0.8s ease-out 0.3s forwards;
}

.portfolio-button {
	display: inline-block;
	padding: 8px 20px;
	background: rgba(255, 255, 255, 0.2);
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-radius: 30px;
	color: white;
	text-decoration: none;
	font-weight: 500;
	opacity: 0;
	transform: translateY(20px);
	animation: floatIn 0.5s ease-out 0.5s forwards;
	transition: all 0.3s ease;
}

.portfolio-button:hover {
	background: rgba(255, 255, 255, 0.3);
	transform: translateY(-2px);
}

/* Animation keyframes */
@keyframes slideInFromTop {
	0% {
		opacity: 0;
		transform: translateY(-30px);
	}
	100% {
		opacity: 0.7;
		transform: translateY(0);
	}
}

@keyframes bounceIn {
	0% {
		opacity: 0;
		transform: scale(0.3) translateY(50px);
	}
	80% {
		opacity: 1;
		transform: scale(1.05) translateY(0);
	}
	100% {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

@keyframes fadeInUp {
	0% {
		opacity: 0;
		transform: translateY(30px);
	}
	100% {
		opacity: 0.9;
		transform: translateY(0);
	}
}

@keyframes floatIn {
	0% {
		opacity: 0;
		transform: translateY(20px) scale(0.9);
	}
	50% {
		opacity: 1;
		transform: translateY(0px) scale(1.05);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* Animation states for transitions */
.text-exit {
	animation: fadeOutDown 0.4s ease-in forwards;
}

.text-enter {
	animation-delay: 0.4s;
}

@keyframes fadeOutDown {
	0% {
		opacity: 1;
		transform: translateY(0);
	}
	100% {
		opacity: 0;
		transform: translateY(30px);
	}
}

/* Navigation dots */
.nav-dots {
	position: absolute;
	right: 30px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 20;
}

.dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.4);
	margin: 15px 0;
	cursor: pointer;
	transition: all 0.3s ease;
}

.dot.active {
	background: white;
	transform: scale(1.2);
}

/* Scroll indicator */
.scroll-indicator {
	position: absolute;
	bottom: 30px;
	left: 50%;
	transform: translateX(-50%);
	color: white;
	opacity: 0.7;
	font-size: 14px;
	z-index: 20;
	animation: pulse 2s infinite;
}

@keyframes pulse {
	0%,
	100% {
		opacity: 0.7;
	}
	50% {
		opacity: 0.3;
	}
}

/* Responsive */
@media (max-width: 768px) {
	.portfolio-item {
		min-width: 200px;
		padding: 40px 30px;
	}

	.portfolio-title {
		font-size: 32px;
	}

	.nav-dots {
		right: 20px;
	}
}

/*slideshow css*/