/*background: url(/icons/Icon-512.png);*/

/*Common In All VFD Pages*/
body {
	font-family:sans-serif;
	margin: 20px;
	background-color: #f5f5f5;
	user-select:none;
}

 p {
	 text-indent: 25px;
 }

/*Header*/
.header {
	background-color: #009688;
	margin: -20px;
	margin-bottom: 36px;
	padding: 16px;
	padding-bottom: 17px;
}

.header label {
	color:#FFFFFF;
	font-size: 1.25em;
}

.header div {
    float:right;
}

.header div a {
    text-decoration: none;
}

.header div span {
	color:white;
    border-radius: 0%;
	transition: all 0.1s ease-in-out;
	margin-left:20px;
	font-size:20px;
}

.header div span:hover, .selected{
	background-color: #008a7d;
	box-shadow: 0px 0px 0px 15px #008a7d;
	transform: scale(1.05);
}
/*End Of Common*/


/*Home Container*/
.container, .content{
	display:flex;
	align-items:center;
}

.home {
	margin-top:200px;
}

.content , .vfd, .code_table{
	margin-left:auto;
	margin-right:auto;
}


.left {
	/*background-color: #2196F3; /*color usefull when troubleshooting flow*/
	margin-left:auto;
}

.right {
	/*background-color: #04AA6D; /*color usefull when troubleshooting flow*/
	/*width:240px;*/
	margin-right:auto;
}


/* Img Buttons */
.home a{
	color: white;
}
.home img{
	height:255px;/*default 255px*/
	width:255px;/*default 255px*/
	padding: 10px;
	margin: 10px;
	border-radius: 3px;
	box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.home img:hover,.home img:active{
	background: #F1F1F1;
}
/*End Home Container*/


/*VFD Page Container*/
.vfd a{
	color: #009688;
}

.vfd {
	width: 80%;
}

.code_table {
	width: 90%;
	overflow: auto;
	border: 1px solid #ccc;
	/*border-top: none;*/
}

.vfd, .code_table{
	margin-top:75px;
}

.vfd .right{
	margin-left:50px;
}
.vfd span {
	font-size:1.25em;
}

/* Table */

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  border-top: none;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  /*border: 1px solid #ccc;*/
  /*border-top: none;*/
}

.paleBlueRows {
  font-family: "Times New Roman", Times, serif;
  border: 1px solid #FFFFFF;
  width: 100%;
  height: 90%;
  text-align: left;
  border-collapse: collapse;
}
.paleBlueRows td, table.paleBlueRows th {
  border: 1px solid #FFFFFF;
  padding: 3px 2px;
}
.paleBlueRows tbody td {
  font-size: 13px;
}
.paleBlueRows tr:nth-child(even) {
  background: #D0E4F5;
}
.paleBlueRows thead {
  background: #0B6FA4;
  border-bottom: 5px solid #FFFFFF;
}
.paleBlueRows thead th {
  font-size: 17px;
  font-weight: bold;
  color: #FFFFFF;
  text-align: center;
  border-left: 2px solid #FFFFFF;
}
.paleBlueRows thead th:first-child {
  border-left: none;
}

.paleBlueRows tfoot td {
  font-size: 14px;
}
/*End Table*/

/*End VFD Container*/



@media only screen and (min-width: 1020px) {
	.header span:Before {
		content:'PowerFlex ';
	}
}

@media screen and (max-width: 1300px) {
	.home img{
		height:200px;/*was 255px*/
		width:200px;/*was 255px*/
	}
}

@media screen and (max-width: 1020px) {
	.content{
		display:block;
	}
	.left, .right {
		width: 100%;
	}
	.vfd .right{
		margin-left:0px;
	}
}

@media only screen and (max-width: 820px) {
	/* For mobile phones: */
	.header {
		margin-bottom: 10px;
	}
	
}

@media screen and (max-width: 750px) {
	.content{
		margin-top:75px;
	}
	.home img{
		height:115px;/*was 200px*/
		width:115px;/*was 200px*/
		margin: 5px;
	}
	
}

@media screen and (max-width: 500px) {
	.content{
		margin-top:50px;
	}
	.home img{
	}
	.header label {
		display:none;
	}
	.header{
		padding-bottom:40px;
	}
}