html { 	
	background-color: #EEF0F2; 
	} 

body {
 	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px; 
	
	/*  Makes Background Responsive */ 
	background-image: url("Assets/Background.png"); 
  	background-repeat: no-repeat; 
    background-position: top; 
	background-size: auto; 
	background-color: #EEF0F2;
	color:#474E5A; 

	font-weight: normal; 
	line-height: 1.6em; 
	margin:0; 
	}

  /*removes hyperlink underline & blue highlight*/
a {
  	border:none;
  	outline:none;
  	text-decoration:none;
  	color:#474E5A;
	}
	
a:hover {
  	text-decoration:underline;
	color:#0E839F;
	}

	/*  Menu  */ 
.topnav {	
	overflow: hidden;
 	background-color: #464D5A;
	/*  Sticky Menu  */ 
	position: fixed;
    top: 0;
	width: 100%;
	}

		/*  Responsive Menu  */ 

@media screen and (max-width: 1100px) {
  .topnav {
    content: "TESTING";
	  padding: 20px 10px !important;
	   float: none;
    display: block;
    text-align: left;
  }

	
  .logo {
    float: left;
  }
	
}	
	
	
.topnav a {
  	float: right;
  	display: block;
  	color: #FFFFFF;
  	text-align: center;
  	padding: 15px 10px;
	text-decoration: none;
	margin: 0px 10px;
  	font-size: 17px;
	}	

.topnav a:hover {
  	background-color: #ddd;
  	color: black;
	}
	
.logo {	
 	float: left;
	}	
	
h1 {
	color: #FFFFFF;
	font-weight: 100;
	font-size: 30px;
	}
	
	
h2 {
	color: #0E4D8E;
	font-size: 22px;
	}
	

h3 {
	color:#0E4D8E;
	font-size: 18px;
	}
	
h4 {
	color: #FFFFFF;
	font-size: 16px;
	}
		
	

	
	
.content-area{
	width:85%;
	margin:auto;
	min-width: 400px;
} 
		

.status-area {
	/*Extra spacing above Content*/
	padding: 75px 0px;
		
	}
	
	
	

/*Button Sapcing*/

.button{ 
	margin: 15px 0px 0px 20px;
	} 
	

/*Button UI*/
.button a { 
  	width: 40px;
    height: 20px;
    padding: 5px 10px;    
    border: 4px solid #0E839F;
	text-decoration:none;
	color: #0E839F;
	} 
	
/*Button UI - changes when hovered over*/
.button a:hover { 
  	text-decoration:none;
	color: white;
	background-color: #0E839F;
	border-color: #0E839F;
	} 
	

	
	
	
.grid-container {
	/*Makes grid wrap around*/
	display: grid;

	grid-template-columns: 25% 25% 25% 25%;
	grid-template-rows: auto auto;
	grid-gap: 10px;
  	padding: 10px;
	}
	
	
	
	/* Responsive layout - makes a three column-layout instead of four columns */
@media screen and (max-width: 1465px) {
    .grid-container {
	grid-template-columns: 33.3% 33.3% 33.3% ;
	grid-template-rows: auto auto auto;
    }

}
	
	
		
	/* Responsive layout - makes a 2 column-layout instead of 3 columns */
@media screen and (max-width: 1290px) {
    .grid-container {
	grid-template-columns: 50% 50% ;
	grid-template-rows: auto auto auto auto;
    }
	
	/* Increase empty space above status area */
	.status-area{
		margin-top: 60px;
	}
}
	
		/* Responsive layout - makes a 1 column-layout instead of 3 columns */
@media screen and (max-width: 735px) {
    .grid-container {
	grid-template-columns: 100% ;
	grid-template-rows: auto auto auto auto auto auto auto;
    }
	/* Increase empty space above status area */
	.status-area{
		margin-top: 150px;
	}
}
	
	
.box-total {
	background-color: #31E820;
	width: 100%;
	height: 100%; 
	box-sizing: border-box;
	}
	
.box-top	{
	box-sizing: border-box;
	display:block;
	text-align: left;
	padding: 15px;
	font-size: 30px;
	width: 100%;
	height: 70px;
	min-width: 200px;
	} 
	
.box-bottom	{
	box-sizing: border-box;
	display:block;
	background-color: #FFFFFF;
	text-align: left;
	padding: 15px;
	width: 100%;
	
	} 
	
.box-headers {
	display:inline;
	padding: 5px 0;
	/*Vertically aligned images*/
	
	font-weight: 200;
	} 



	#site_header{
		background-color:#363B48;
	}
	.category h6{
		margin-left: 40px;
	}
	.category h3{
		margin-left: 60px;
	}

	.category.Calculators{
		background-color: #1B3A7C;

		background-repeat: no-repeat; 
		background-size: auto; 
		background-origin: content-box;

	}
	.category.Design_Center{
		background-color: #6B0B3C;

		background-repeat: no-repeat; 
		background-size: auto; 
		background-origin: content-box;
	}

	.category.Package_Configurators{
		background-color: #26718E;

		background-repeat: no-repeat; 
		background-size: auto; 
		background-origin: content-box;
	}
	.category.Performance_Reporting{
		background-color: #372D5A;

		background-repeat: no-repeat; 
		background-size: auto; 
		background-origin: content-box;
	}
	          
	.category.Product_Management{
		background-color: #338F7F;

		background-repeat: no-repeat; 
		background-size: auto; 
		background-origin: content-box;
	}

	.category.Site_Administration{
		background-color: #373C48;

		background-repeat: no-repeat; 
		background-size: auto; 
		background-origin: content-box;
	}
	.category.Status_Reporting{
		background-color: #D07D20;

		background-repeat: no-repeat; 
		background-size: auto; 
		background-origin: content-box;
	}

	.dashboard.application.link{
		color: #474E5A;
		list-style: none;
	}
	.dashboard.application a{
		color: red;
		padding:16px;
	}

	.dblbox-btn {
		border-width: thin !important;
		margin-top:5px;
	}


	.feedback { font-size: 1.4em; }
  .doublebox{border: none;}
   .selectable ul {}
  .availableFieldsConnected{border: none;}
  .selectable .ui-selecting { background: #0E839F; }
  .selectable .ui-selected { background: #0E4D8E; color: white; }
  .availableFieldsConnected {list-style-type: none; border: 1px solid black;    padding-left: 0;}


.btn-primary {
    color: #fff;
    background-color: #0f4c8d;
}


.btn-secondary:hover {
	background-color: #053360;
}

.dblbox-btn {
    color: #0E839F;
    background-color: transparent;
    border-color: #007bff;
	border: 4px solid #0E839F;
}

.dblbox-btn:hover {
    color: white;
	background-color: #0E839F;
	
}

.dblbox-btn img {
    fill: #0E839F;
}

.dblbox-btn:hover {
    fill: white;
}

.btn-white{
	color:#4A4F5B;
	background-color: #F0F4F5;
	border: 0px solid #F0F4F5;
}


#body_content {
	width: 85%;

}

.box-headers {
	color: #FFFFFF;
}
.box-headers h1 {
	display: inline;
}
.userIcon{
  background-image:url("skin/strap/amkor/user.png") ;
  background-repeat: no-repeat;
  padding-left: 35px;
  background-position: 0px 15px;
}

.keyIcon{
  background-image:url("skin/strap/amkor/key.png") ;
  background-repeat: no-repeat;
  padding-left: 35px;
  background-position: 3px 15px;
}
.form-signin .form-control {
  position: relative;
  box-sizing: border-box;
  height: auto;
  padding: 10px;
  font-size: 16px;
  margin-top:15px;
}

#browser_warning {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:1000;
	background-color:white;
	color:white;
}
#browser_warning_inner {
	padding:60px;
	max-width:600px;
}

@media only all {
	#browser_warning { display:none; }
}

.icon {
  color: #0E4D8E;
}


.icon {
  color: #0f4c8d;
    margin: 2px;
    height: 24px;
    width: 24px;
}

.icon-badge{
  height:auto;
  width:auto;
  color:white;
}

.badge-primary{
  background-color: #0E4D8E;
}

.loading{
  position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:100;
  background-color:#ffffffb0
}

.blur{
  filter: blur(4px);
  -webkit-filter: blur(4px);
  -moz-filter: blur(4px);
  -ms-filter: blur(4px);
  -o-filter: blur(4px);
  filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='4');
  filter: url(#blur); 

}

html, body {
  height: 100%;
}

#body_content {
  overflow:auto;
  padding-bottom:20px; /* this needs to be bigger than footer height*/
}

.footerWrap {
  min-height: 100vh;
  padding-bottom:20px;
}

footer {
    position: relative;
    bottom: 0;
    width: 100%;
    height: 20px;
    line-height: 20px;
    margin-top: -25px;
}

.fileHeader a h3 span:hover{
  text-decoration:none;
}

.overlayText{
  font-size: small;
  color:#354D8D;
}

.bootstrap-duallistbox-container{
	width:100%;
	padding-left:15px;
}


@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	/* IE10+ CSS styles go here */
	.blur{
		opacity: .3;
		 };
}