@font-face {
  font-family: LexendDecaBold;
  src: url(/vendor/fonts/LexendDeca-Bold.ttf);
}
@font-face {
  font-family: LexendDecaMedium;
  src: url(/vendor/fonts/LexendDeca-Medium.ttf);
}
	body {
		height: 100%;

		width: 100%;
		padding: 20px;
		margin: 0;
		box-sizing: border-box;
		font-family: LexendDecaBold;
		font-weight: light;
		color: #2e3436;
	}
	div.main {
		width: 100%;
		max-width: 900px;
		height: auto;
		border-radius: 15px;
		overflow: hidden;
		margin: 0 auto;
		border: 5px solid #c3c3c3;
		position: relative;
	}
	div.navigation {
		width: 250px;
		height: 600px;
		background-color: #ebebeb;
		float: left;
		display: inline-block;
		position: relative;
		z-index: 501;
	}
	div.navigation.secondary {
	  position: absolute;
	  left: -250px;
	  top: 0;
	  overflow-y: auto;
	  z-index: 500;
	  transition-duration: .6s;
	  width: 500px;
	  backdrop-filter: blur(10px);
	  background-color: #ebebeb8c;
	  
	}
	div.navigation.secondary img {
	  width: 100px !important;
	}
	div.navigation>div, div.save-button {
		padding: 5px;
		margin: 10px;
		line-height: 30px;
		transition-duration: .4s;
		cursor: pointer;
		border-radius: 10px;
	}
	div.navigation>div:hover,div.navigation>div.active,div.navigation-footer,div.navigation-header,div.save-button:hover {
		background-color: #d2d2d2;
	}
	div.navigation div.navigation-header {
		text-align: center;
	}
	div.navigation div.navigation-header>div {
	  background-color: #fff;
	  border-radius: 0 0 7px 7px;
	  color: grey;
	  line-height: 20px;
	  font-size: 12px;
	}
	div.navigation>div>img:not(.infrago-logo),div.content div.save-button>img {
		width: 30px;
		max-height: 30px;
		margin-right:20px;
		vertical-align:middle;
		filter: contrast(0.3);
	}
	div.navigation>div>img.infrago-logo {
		width: 100%;
		display:block;
		margin-top: 15px;
	}
	div.content {
		width: calc(100% - 250px);
    float: right;
    display: inline-block;
    padding: 15px 20px;
    height: 600px;
    box-sizing: border-box;
    overflow-y: auto;
	    text-align: center;
	}
	
	div.content div.content-header {
		text-align: center;
		line-height: 30px;
		padding: 0;
		margin-bottom: 20px;
		display: block;
		font-size: 2em;
		margin-block-start: 0.67em;
		margin-block-end: 0.67em;
		margin-inline-start: 0px;
		margin-inline-end: 0px;
		font-weight: bold;
		unicode-bidi: isolate;
	}
	
	div.content img {
		width: 100%;
		margin: 0 auto;
		display: block;
	}
	div.navigation-footer {
		position: absolute;
		bottom:0;
		width: calc(100% - 40px);
    padding: 10px !important;
    cursor: auto !important;
	}
	div.connection-indicator {
		height: 15px;
		width: 15px;
		border-radius: 100%;
		float: left;
		vertical-align:middle;
		margin: 7.5px;
	}
	div.connection-indicator.true {
	  background-color: #2ec27e;
	}
	div.connection-indicator.unknown {
	  background-color: #f6d32d;
	}
	div.connection-indicator.false {
	  background-color: #ed333b;
	}
	


div.save-button img {
	display: inline-block;
}
div.save-button {
	background-color: #ebebeb
}

::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #ebebeb; 
}
 
/* Handle */
::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb:hover  {
  background: #d2d2d2; 
}


div.toggle-switch {
	width: 100%;
	height: 50px;
	margin-bottom: 10px;
	display: flex;
}
div.toggle-switch div {
	display: inline-block;
}
div.toggle-switch div:nth-child(1), div.toggle-switch div:nth-child(3) {
	width: 39%;
}
div.toggle-switch div:nth-child(2) {
	width: 20%;
	padding: 10px;
}


.switch {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 34px;

}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
      border-radius: 25px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 100%;
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

table.simple-devider th,table.simple-devider td  {
	padding: 15px;
	
}
table.simple-devider * {
	margin: 0;
	vertical-align: top;
}