.centerBox{
			width: 500px;
			height: 100vh;/*
			position: absolute;
			top:-30%;
			bottom: 0;
			left: 0;
			right: 0;*/
			margin: auto;
		}
		.centerBoxAdmin{
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: center;
			align-content: space-between;
			width: 98%;
		}
		.adminStatusBox {
			background-color: white;
			border-radius: 8px;
			box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
			margin:20px;

		}
		.adminBox {
			background-color: white;
			border-radius: 8px;
			box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
			margin:20px;
			width: 655px;
		}
		.adminChartBox{
			    display: flex;
				flex-wrap: wrap;
				justify-content: space-around;
		}
		.adminAddDataTextBox{
			width: 18.5% !important;
			margin: .25% !important;
			padding: 0px !important;
			height: 30px !important;
			
		}
		#ports-list{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			width: 98%;
		}
		.adminPorts{
			width: 60px;
			height: 50px;
			background-color: green;
			border-radius: 5px;
			border: 3px solid green;
			color: white;
		}
		.adminPortsError{
			background-color: red !important;
			border: 3px solid red; !important;
		}
		
		.loginBox {
			background-color: white;
			border-radius: 8px;
			box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		}
		
		h1 {
			margin-top: 0px;
			font-weight: 100;
		}
		
		a {
			transition: 0.2s;
		}
		 a:link {color: rgb(68 81 94);}  
		 a:visited {color: rgb(68 81 94);}  
		 a:hover {color: rgb(121 140 159);}  
		 a:active {color: orange;}  
		
		.logoBox {
			text-align: center;
			padding-bottom: 10px;
			padding-top: 50px;
		}
		.loginBoxInside{
			padding: 30px;
			text-align: center;
		}
		
		#alertBox{
			background-color: rgb(255 236 236);
			width: 98%;
			padding-top: 20px;
			padding-bottom: 20px;
			margin-bottom: 20px;
			display: none;
		}
		
		input[type="text"], input[type="password"],  select, textarea{
			width:  400px;
			height: 40px;
			margin-bottom: 20px;
			font-family: 'Open Sans';font-size: 14px;
			border-color: rgb(198 202 206);
			border-radius: 5px;
			border: 1px solid rgb(198 202 206);
			padding-left: 15px;
			padding-right: 15px;
			-moz-appearance: none !important;
		}
		input[type="checkbox"]{
			height: 20px;
			width: 20px;
			margin-right: 10px;

		} 
		.contact-flex{
		    flex-grow: 2;
		    text-align: right;
		}
		
		.checkbox-lable{
			display: flex;
			align-items: center;
			width: 400px;
			padding-bottom: 20px;
			padding-left: 13px;
			padding-right: 13px;
			
		}

		textarea{
			height: 50px;
			padding-top: 10px;
		}
		
		.formError{
			border-color: red;
		}
		
		button{
			background-color: rgb(68 81 94);
			color: white;
			width: 432px;
			height: 40px;
			border-radius: 5px;
			margin-bottom: 20px;
			font-family: 'Open Sans';font-size: 15px;
		}
		button:hover {
			background-color:rgb(121 140 159);
			transition: 0.7s;
		}
		input:hover {
			  background-color:rgb(245 246 247);
			  transition: 0.7s;
		  }
		body {
			background-color: rgb(245 246 247);
			color: rgb(85 87 89);
			font-family: 'Open Sans';font-size: 15px;
			height: 100vh;
			margin: 0px;
			
			
			background-position: center bottom -40px;
			background-repeat: repeat-x;
			background-size: 500px;
			
			
			
		}
		#hiddenSuccess, #hiddenAlredyHasMFA{
			display: none;
		}
		
		.offsetMain{
			top:-55%;
		}
		.offsetMain2{
			top:-40%;
		}
		
		.footBox {
			padding-left: 5px;
			padding-right: 5px;
		}
		.column {
		  width: 33.33%; /* adjust to desired column width */
		  float: left;
		}
		.tl{
			text-align: left;
		}
		.tr{
			text-align: right;
		}
		
		 .footLinks{
			
		}
		.noBottomPad {
			margin-bottom: 0px;
		}
		.noTopPad {
			margin-top: 0px;
		}
		
.infoListButton{
	width: 25px;
	height: 25px;
    font-size: .9em;
	margin-bottom: 0px;
}		
.infoList{
  width: 97%;
  margin: 10px;
  text-align: left;
}		
.loadingWait {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50/* specify the width */;
  height: 50/* specify the height */;
  padding: 100%;
  background-color: #8080807d;
  display: none;
  z-index: 10;
}
#backButton{
	/*back  sits on top of other elements*/
    position: relative;
    top: -70px;
    left: 15px;
	
   width:20px ;
   height: 20px;
   margin-top: 0px;
   text-align: right;
   margin-left: calc(100% - 40px);
   background: aliceblue;
   padding: 5px;
   border-radius: 5px;
  border: 2px solid rgb(68 81 94);
}
#backButton:hover{
	background: rgb(121 140 159);
	transition: 0.7s;
	}  
	
.alredyLoggedinButton:hover{
	background: #f2f4f5;
	transition: 0.7s;
	}  
#loginForm{
	
}
#alredyLoggedIn{
   display: none;
}
.alredyLoggedinButton{
  background: aliceblue;
  padding: 20px;
  width: 50%;
  border-radius: 5px;
  border: 2px solid rgb(68 81 94);
  margin-left: calc(25% - 25px);
  margin-right: calc(25% - 25px);
}

.container{
  max-width:80%;
  margin: auto;
  height:100dvh;
  display: grid;
  flex-wrap: wrap;
  gap: 4rem;
  justify-content: center;
  padding: 4rem;
}
#portal, #api {
  display:none;
  cursor: pointer;
}
label{
  cursor: pointer;
}

.switch4-container{
  margin-bottom: .7rem;
}
.switch4
{
  background: aliceblue;
  position: relative;
  height:50px;
  display:flex;
  justify-content:space-around;
  margin-bottom:1rem;
  border-radius: 5px;
  border: 2px solid rgb(68 81 94);
  /*Disable the button*/
  display: none;
  visibility: hidden;

}
.switch4 label{
  padding: 1rem;
  z-index:1;
  width: 50%;
}
#active-label{
  position: absolute;
  left:0;
  width: 50%;
  height: 100%;
  color: white;
  background: rgb(180 199 219);
  /*border: 2px solid rgb(68 81 94);
  border-radius: 5px;*/
  
  transition: .5s left ease;
}
#portal:checked ~ #active-label{
  left:0%;
}
#api:checked ~ #active-label {
  left:50%;
}
#systemInfo {
    display: flex;
    flex-wrap: wrap;
	padding-right: 15%;
	padding-left: 15%;
}

/*admin pages*/
#systemInfo p {
	width: 50%;
	margin-top: 5px;
	margin-bottom: 5px;
}

#systemInfo div {
    width: 100%;
	text-align: left;
	display: flex;
}

.scrollDiv{
	height:500px;
    overflow:scroll;
    overflow-x:hidden;
	font-size: smaller;
}

.tabs{
	display: flex;
    justify-content: space-around;
	padding-right: 2px;
	padding-left: 2px;
	margin-right: 8px;
	margin-left: 8px;
}
.tabsButton{
	
	padding-left: 8px;
	padding-right: 8px;
	padding-top: 5px;
	padding-bottom: 5px;
	
	border-top-right-radius: 3px;
	border-top-left-radius: 4px;
	margin-right: 8px;
	background-color: rgb(201 201 201);
	/*z-index: -1;*/
	margin-top: 2px; /*active tab has a border insead of shadow that messes 
	with size this adds a gap to non active to adjust*/
	
}
.adminUploader{
	padding-bottom: 20px;
}

.adminImageUpload{
	border: grey;
    border-style: dashed;
	margin: 25px;
}

.adminImageUpload img{
	max-height: 200px;
	max-width: 400px;
}
.tabsButtonActive{
	background-color: white;
	z-index: 2;
	border-color: #8080801a;
	border-style:  solid solid none none ;
	margin-top: 0px;
	
	

}

#brandHide{
	display: none;
}