/* Custom styles for Custom WebApps (Department Review and Strategic Goals.*/

/* MyTVCC Box */
.myTVCCbox {
	border: 1px #999999 solid; 
	margin-bottom: 40px;	
}

.myTVCCheader {
	width:100%; 
	background-color:#ececec; 
	text-align:center; 
	border-bottom: 1px #999999 solid; 
	padding: 5px 0 5px 0;
	overflow: hidden;
	display: inline-block;
}

.myTVCCcontent {
	width:100%;  
	padding: 10px 10px 10px 10px;
	display: inline-block;
}

.full {
    float: left;
    width: 99%;
    margin-right: 5%;
    margin-bottom: 1em;
    margin-left: 1em;
}

.col-half-page {
	width: 50%;
	float: left;
	position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.imageleft-bulletlist {
	margin-right: 20px; 
	border: none;
	max-width: 250px;    
    float: left;
}

.imageleft-bulletlist img {
	object-fit: cover; 
	width: 250px; 
	height: 150px;	
}

.imageright-bulletlist {
	margin-left: 20px; 
	border: none;
	max-width: 250px;    
    float: right;
}

.imageright-bulletlist img {
	object-fit: cover; 
	width: 250px; 
	height: 150px;	
}


/* Default styles for forms and elements */
FORM {margin:0;}
.formText {color: #727272; font-family: Verdana, Arial, Helvetica, sans serif; background-color: #ffffff;}
input[type=text] {padding: 2px 5px 2px 5px; background-color:#fffef0; }
input[type=password] {padding: 2px 5px 2px 5px; background-color:#fffef0; }
/*
input[type=button], input[type=submit], input[type=reset] {padding: 0px 5px 0px 5px; background-color:#474e58; color: #ffffff;}
*/
textarea {background-color:#fffef0;}
textarea.full { width: 98%; }
select {background-color: #d9d9d9;}

/* TVCC LIST #3 */
#bulletlist3 {padding-left: 10px; }
#bulletlist3 ul { list-style-image: url("/_resources/images/icons/blackstar.gif"); color:#777; font-size:18px; }
#bulletlist3 ul li {  }
.bulletlist-none {padding-left: 10px;list-style:none; text-align:left; }


/* Styles for wow slider used on login box */
.slideshow-row:after {
  content: "";
  display: table;
  clear: both;
}

.slideshow-container {
  max-width: 1080px;
  position: relative;
  margin: auto;
  float: left;
  width: 66%;
  padding: 0px;
  overflow: hidden;
}

.slideshow-left-column {
  float: left;
  width: 66%;
  padding: 0 0 0 0;
  vertical-align: top; 
}

.slideshow-right-column {
  float: left;
  width: 33%;
  padding: 0px 10px 10px 80px;
  vertical-align: top; 
}

.webapp_header {  
	-moz-border-radius: 10px;
  -webkit-border-radius: 10px;
	border-radius: 10px;
  border: 1px solid #F6892E;
  padding: 5px;
  width: 90%;
  height: auto;
	overflow:auto;
  background-color: #F6F6F6;
	font-size:24px;
	color: #004A93;
	font-weight:bold;
	font-style:italic;
	font-family:"Times New Roman", Times, serif;	
}

.webapp_contentbox {
background: #ffffff;
width: 90%;
height: auto;
text-align:left;
overflow:auto;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-moz-box-shadow: 1px 1px 1px 0 grey;
-webkit-box-shadow: 1px 1px 1px 0 grey;
border-radius: 10px;
border: #F78527 thin solid;
padding: 15px;
margin: 0px 0;
display: inline-block;
box-shadow: 1px 1px 1px 0 grey;
behavior: url(PIE.htc);
}

.tvccdefaultbox {
background: #F6F6F6;
padding: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-moz-box-shadow: 1px 1px 1px 0 grey;
-webkit-box-shadow: 1px 1px 1px 0 grey;
border: #F78527 thin solid;
border-radius: 10px;
margin: 12px 0;
display: inline-block;
box-shadow: 1px 1px 1px 0 grey;
behavior: url(PIE.htc);
}

#featured_left75 { 
margin: 0px auto 0px auto; max-width: 1920px; width: 70%; background: #fff; padding: 0px 0; min-height: 100%; height:100%;
border: 0px dotted #000;
float: left; 
}
#featured_right25 { 
margin: 0px auto 0px auto; max-width: 1280px; width: 25%; background: #fff; padding: 0px 0; min-height: 100%; height:100%;
border: 0px dotted #000;
float: right;
min-width:300px;
}

.tableHeader {color: #ffffff; background-color: #1A5C94; text-align: center; font-weight: bold;}

.tvccdefaultbox h1, h2, h3, h4 {
font-family: Arial, Helvetica, sans-serif;
color:#474e58;
font-weight: bold;
}

.tvccdefaultbox p {
font-size: .8em;
margin: 5px 0;
color: #4B4B4B;
}

.tvccdefaultbox a 				{ padding-left: 10px; color: #474e58; text-decoration: none; font-size: 16px; }
.tvccdefaultbox a:visited 		{ color: #474e58; text-decoration: none; font-size: 16px; }
.tvccdefaultbox a:hover			{ color: #000000; text-decoration: none; background: #fff; font-size: 16px }
.tvccdefaultbox a:active		{ color: #474e58; text-decoration: none; font-size: 16px; }

.PBwrapper {width: 90%;	}
.progress-bar {	width: 100%;
				background-color: #e0e0e0;
				padding: 3px;
				border-radius: 3px;
				box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
			}
.progress-bar-fill {display: block;
				height: 22px;
				background-color: #659cef;
				border-radius: 3px;				
				transition: width 500ms ease-in-out;
			}

#SP_ObjectiveDescription {
    display: none; /* Initially hidden */
    padding: 10px;
    border: 1px solid #ccc;
    margin-top: 10px;    
    background-color:#f8facd;
  }
  

/*------------------------------
****  CARD BOX with BUTTON  ***
------------------------------*/
.leftalign {text-align:left; vertical-align:middle;}
.centeralign {text-align:center; vertical-align:middle;}
.rightalign {text-align:right; vertical-align:middle;}

/* renamed from card to card_box because conflicts with according */
.card_box {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 300px;  
  min-width: 250px;
  max-height: 300px;  
  text-align: center;
  font-family: arial;
  padding-bottom: 0px;
  margin-right: 20px;
  margin-bottom: 20px;
  float: left;  
}

.card_title {  
  font-size: 18px;
  color: #fff;  
  background: #1A5C94;
  margin: 0;
  padding: 15px;
}

.card_text {  
  font-size: 16px;
  color: #000;  
  background: #fff;
  padding: 15px;
}

button_full {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 100%;
  font-size: 18px;
}

button_full:hover, a:hover {
  opacity: 0.7;
}

table.center {
	margin-left: auto;
	margin-right: auto;
}


.infocard {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  min-height: 350px;  
  min-width: 250px;  
  text-align: left;
  font-family: arial;
  padding-bottom: 0px;
  padding-left: 10px;
  padding-right: 10px;
  margin-right: 20px;
  margin-bottom: 20px;
  float: left;  
}

A.colheader:link {color: #ffffff; font-size: 8pt; Font-family: verdana;  text-decoration: none}
A.colheader:active {color: #ffffff; font-size: 8pt; Font-family: verdana; background: none transparent;}
A.colheader:visited {color: #ffffff; font-size: 8pt; Font-family: verdana; text-decoration: none}
A.colheader:hover {color: #000000; font-size: 8pt; Font-family: verdana; background: #ffffff; text-decoration: underline}

.facilities_workorder_column {}
.facilities_workorder_column_ipad {}
.facilities_workorder_column_phone {}



/* -------------------------------------------------------------------------------------------------------
Styles for the Intervention early alert web application
---------------------------------------------------------------------------------------------------------*/
/* Popup container */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  color: #1A5C94;
}

/* The actual popup (appears on top) */
.popup .popuptext {
  visibility: hidden;
  width: 600px;
  background-color: #555;
  color: #fff;
  font-size: 12px;
  text-align: left;
  border-radius: 6px;
  padding: 8px 0 0 8px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}
	

.styled-select {
	height: 40px;
	overflow: hidden;
	width: 280px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background-color: #fffef0 !important;
	color: #000;
	padding: 5px;
}

.styled-select select, select.active, select:hover {
	background-color: #fffef0 !important;
	color: #000;
}



/* -------------------------------------------------------------------------------------------------------
Section 13:  Media Query used for ipads in portait mode
---------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 990px) {
	
	.facilities_workorder_column_ipad {
	display:none;	
	}
		
	.slideshow-container {
    width: 100%;
    max-width: 100%;
  	}
  	
  	.slideshow-left-column {
  	margin-top:15px;
  	padding: 5px 5px 5px 5px;
    width: 100%;
    }
    
    .slideshow-right-column {
  	margin-top:15px;
  	padding: 5px 5px 5px 5px;
    width: 100%;
    }
	 .slide-container{			
	width: 100%;
	height: 100%;
		}
		.slide-container .slides img{
			object-fit:unset;
		}
}	

@media screen and (max-width: 600px)  {	
	.facilities_workorder_column_phone {
	display:none;	
	}
	
	.styled-select {
		width: 95% !important;        
        max-width: 100%;
	}
}