@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

body {
	background-color: #E3F8FF;
	padding: 0px;
	margin: 0px;
    width: 100%;
    margin: 0;
	box-sizing: border-box;
	overflow-y: auto;
	overflow-x: hidden;

}
p, button, a, h1, small, h2, svg, input, textarea, div {
font-family: "Plus Jakarta Sans", sans-serif;
font-optical-sizing: auto;
font-style: normal;
font-weight: 800;
}

.headerTop {
	width: 100%;
	padding: 5px;
	box-sizing: border-box;
	position: fixed;
	top: 0;
	left: 0;
	background-color: #BDEBFF;
	height: 7vh;
	display: flex;
	flex-direction: row;
	border: none;
	border-bottom: 3px solid #A6CFE0;
	z-index: 1000000;

}

.imageSVG {
	flex-direction: flex-start;
	height: 100%;
	width: auto;
}

.statusWords {
	font-weight: 600;
	font-size: 140%;
	margin-left: 4%;
	margin: auto;
	flex-direction: flex-end;
}

.imgHolder {
	height: 100%;
	display: inline-block;
	flex-direction: flex-start;
	display: flex;
	flex-direction: row;
	padding-right: 10px;
	gap: 10px;
	box-sizing: border-box;
}

.managementGenericOutage {
	width: 60%;
	padding: 15px;
	box-sizing: border-box;
	display: flex;
	margin: auto;
	flex-direction: column;
	background-color: #94c6f2;
	border: 3px solid #5d96c7;
	border-radius: 5px;
	margin-top: 3px;
}

.headDiv {
	display: flex;
		margin: auto;
		gap: 10px;
		box-sizing: border-box;
}

.titleP {
	font-weight: 500;
	font-size: 100%;
}

.buttonProducts {
	background-color: #94C2FF;
	font-size: 90%;
	font-weight: 800;
	height: 100%;
	border: 3px solid #7CA3D6;
	border-radius: 3px;
	transition: 0.15s ease;
   white-space: nowrap;
	box-sizing: border-box;
}

.buttonProducts:hover {
	background-color: #7397C7;
	border: 3px solid #5E7CA3;
}


.buttonMiniProducts {
	background-color: #94C2FF;
	font-size: 90%;
	font-weight: 600;
	padding: 15px;
	width: 100%;
	box-sizing: border-box;
	border: 3px solid #7CA3D6;
	border-radius: 5px;
	transition: 0.2s ease;
   white-space: nowrap;
   	margin-top: 1%;
	margin-bottom: 1%;

}

.buttonProducts:hover {
	background-color: #7397C7;
	border: 3px solid #5E7CA3;
}

.buttonHolder {
	position: absolute;
	right: 0.5%;
	top: 12.5%;
	height: 75%;
	display: flex;
	flex-direction: row;
	gap: 3px;
	max-width: 70%;
	overflow-y: hidden;
	overflow: auto;
}

.seperator {
	height: 100%;
	width: 1px;
	margin-left: 5px;
	margin-right: 5px;
	border: 2px solid #7CA3D6;
	border-radius: 5px;
	background-color: #7CA3D6;
	box-sizing: border-box;

}

.productButtonHidden {
	background-color: #94C2FF;
	font-size: 90%;
	font-weight: 600;
	height: 100%;
	border: 3px solid #7CA3D6;
	border-radius: 5px;
	transition: 0.2s ease;
   white-space: nowrap;
   display: none;

}

.menuButtonHolder {
	position: fixed;
	top: 8vh;
	right: 0.5%;
	
}

    @media (max-width: 1000px) { 
	.managementState {
		width: 75%;
	}
  }
  
      @media (max-width: 500px) { 
	.managementState {
		width: 97%;
	}
	.managementGenericOutage {
		width: 92%;
	}
	.holdServer {
		width: 92%;
	}
  }
  
  .imageAllOneTech {
	  height: 100%;
	  width: auto;
  }
  
  .imageHolder {
	  height: 100%;
	  width: auto;
	  display: flex;
	  margin: auto;
  }
  
  .holdServer {
	width: 60%;
	  border: 3px solid;
	  margin-top: 7.1vh;
	  display: flex;
	  margin-left: 20%;
	  flex-direction: row;
	  justify-content: center;
	  text-align: center;
	  padding: 10px;
	  box-sizing: border-box;
	  font-size: 20px;
	  font-weight: 800;
	  	background-color: #94c6f2;
	border: 3px solid #5d96c7;
	border-radius: 10px 10px 5px 5px;
  }