body
{
	min-width : 100%;
	font-family :  AvenirLT-Roman, arial, verdana, helvetica, sans-serif;
	font-size : 10pt;
	color : #333;
	background : #FAFAFA;
	margin : 0px;
	padding-bottom : 20px; /* allow for footer overlap*/
}

html
{
	box-sizing: border-box;
}

p
{
	line-height : 30px;
	font-weight : normal;
}

div
{
	box-sizing: border-box;
}

a
{
	text-decoration : none;
}
a:link,a:visited
{
	text-decoration : none;
	color : #FFF;
}

label, .text_label
{
	min-width : 140px !important;
	display : inline-block;
	line-height : 24px;
}

.hide_label
{
	display : none;
}

/* ------------------------------------------------------ HEADER ----------------------------- */
#product_logo
{
	height : 80px;
	width : 100%;
	background : rgba(55,74,91,0.95); 
	color : #333;
	position : fixed;
	top : 0;
	left  :0;
	 
}

#product_logo_bottom
{
	height : 20px;
	width : 100%;
	background : rgba(55,74,91,0.95); 
	color : rgba(55,74,91,0.95);
	position : fixed;
	bottom : 0;
	left  :0;
	 
}

.logo_img
{
	height : 40px;
}
#header_bottom
{
	height : 30px;
	width : 100%;
	background : #83bb21;
	color : #333;
}

.accordion
{
	line-height : 34px;
	text-align : left;
	padding : 7px;
	margin : 10px 5px;
	display : block;
	width : 95%;
	border-radius : 0px;
}

.accordion:after 
{
    content: '\02795'; /* Unicode character for "plus" sign (+) */
    font-size: 13px;
    color: #FFF;
    float: right;
    margin-left: 20px;
}
	
.accordion.active:after 
{
    content: ""; /* Unicode character for "minus" sign (-) */
}

/* ------------------------------------- NAVBAR ---------------------------- */

.navbar
{
	background : rgba(55,74,91,0.95); 
	font-size : 11pt;
}

.navbar-inverse .navbar-nav .nav-link
{
	color : rgba(250,250,250,.9) ;
	margin : 0px 0px 0px 30px;
}

.navbar-inverse .navbar-nav .nav-link:focus,
.navbar-inverse .navbar-nav .nav-link:hover,
.navbar-inverse .navbar-nav .nav-link:active
{
	color : #1da897;
}

.navbar-inverse .navbar-toggler , .navbar-inverse .navbar-toggler:active
{
    border-color: #1da897;
}

.dropdown-menu
{
	background : #051D33;
	border-radius : 0px;
	width : 100%;
	left : 30px;
	top : 37px;
	
	
}

.dropdown-menu .dropdown-item
{
	font-size : 11pt;
	color : rgba(250,250,250,1) ;
	line-height : 35px;
}

a.dropdown-item:hover
{
	color : #1da897;
	background : #051D33;
}


/* ---- FULL SCREEN --- */
@media (min-width: 992px)
{
	.logo_img
	{
		height : 60px;
	}


	.navbar-toggleable-md .navbar-collapse
	{
		position : fixed;
		top : 45px;
		left : 210px;
	}
	
	.dropdown-menu
	{
		background : #051D33;
		border-radius : 0px;
		width : 250px;
		left : 30px;
		top : 37px;
	}

	.button_submit
	{
		display: inline-block;
		width : 250px;
		margin : 10px;
		font-size : 11pt;
		cursor : pointer;
		border-radius : 3px;
	}

	.accordion
	{
		line-height : 34px;
		text-align : left;
		padding : 7px;
		margin : 10px 5px;
		display : block;
		border-radius : 0px;
	}

	

}

/* ----------------------------------------------- COMMON INTERFACE PARTS ------------------------------- */
#content
{
	margin : 10px 10px 10px 10px;

}

.pagetitle
{
	line-height : 60px;
	font-size : 20pt;
}

input[type=text], input[type=date], input[type=password] , select
{
	border : 1px solid #D2D2D2;
	width : 250px;
	height : 30px;
	padding : 5px;
}

.short_text
{
	width : 112px !important;
}

#loader
{
	height: 200px;
	width : 200px;
	display : none;
	font-weight : bold;
	text-align : center;
	background : #FFF;
	border :  1px solid #AAA;
	margin-left:auto;
	margin-right:auto;
}
#modal
{
	height: 200px;
	width : 400px;
	display : none;
	background : #FFF;
	border :  1px solid #AAA;
	
}
#modal_header
{
	width : 100%;
	background : #EEE;
	font-size : 12pt;
	font-weight : bold;
	text-align : center;
	line-height : 40px;

}
#modal_text
{
	margin : 10px;
	margin-bottom : 40px;
	font-size : 11pt;
	line-height : 24px;
}

#modal_text_sizer
{
	position : fixed;
	left:-1000px;
	margin : 10px;
	margin-bottom : 40px;
	font-size : 11pt;
	line-height : 24px;
	width : 360px;
}

#modal_buttons
{
	width : 100%;
	text-align : center;
}
.modal_button
{
	margin : 0 auto !important;
}

#spinner 
{
	margin : 0 auto;
	margin-top : 20px;
	margin-bottom : 40px;
	background-image: url("/vportal/style/images/green_1.png");
	background-size : 50px 50px;
	background-repeat : no-repeat;
	height:50px;
	width:50px;
	
	animation-name: spinnerRotate;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@keyframes spinnerRotate 
{
	from 
	{
		transform:rotate(0deg);
	}
	to 
	{
		transform:rotate(360deg);
	}
}

.button_submit
{
	display: inline-block;
	line-height : 36px;
	text-align : center;
	width : 200px;
	margin : 10px;
	font-size : 11pt;
	cursor : pointer;
	border-radius : 3px;
}

.button_submit:hover
{
	background : #660099;
}
.button_submit:active
{
	background : #C2C2C2;
}

.short_button
{
	width : 120px !important;
	line-height : 29px;
	border-radius : 4px;
	display : inline-block !important;
}

.field_container_title
{
	margin-top : 20px;
	font-size : 14pt;
	color : #83bb21;
}

.field_container
{
	background : #FFF;
	border : 1px solid #CCC;
	width : 100%;
	margin : 10px 0;
	padding : 10px 0;
}

.field_subcontainer_title
{
	margin : 10px 0 0 10px;
	font-size : 12pt;
	color : #83bb21;
	
}

.field_subcontainer
{
	background : #FFF;
	border : 1px solid #CCC;
	width : 98%;
	margin : 10px;
	padding : 10px 0 10px 0;
}

.half_width
{
	width : 45%;
	min-width : 400px;
	margin : 10px;
	padding : 10px 0;
	display : inline-block;
}

.text_input
{
	display : inline-block;
	margin : 5px 0;
}

.form_field_container
{
	display : inline-block;
}

.form_label,.form_label_left,.form_label_right
{
	display : inline-block;
	width : 180px;
	text-align : right;
	margin-right : 20px;

}
.form_label_left
{
	text-align : left;
	margin-left : 20px;
}

.form_label_right
{
	text-align : right;
	margin-right : 20px;
}
.checkbox
{
	margin-right:5px;
}
.checkbox_list
{
	width : 230px;
	display : inline-block;
	margin : 4px 0 4px 6px;
	font-weight : normal;
}
.checkbox_container
{
	width : 40px;
	display : inline-block !important;
}
.checkbox_label
{
	display : inline-block !important;
}
/* ----------------------------------------------- TITLES --------------------------------------------- */
.toggle_title
{
	cursor : pointer;
}



/* -------------------------------------------------- COLOUR THEMES ------------------------------------ */
.t_purple
{
	background-color : #00677f;
	color : #FFF;
}
.t_purple:hover
{
	background-color : #1a728d;
	color : #FFF;
}
.t_purple:active
{
	background : #1d6378;
	color : #FFF;
}
.text_purple
{
	color : #00677f !important;
}

.t_grey
{
	background : #AAA;
	color : #FFF;
}
.t_grey:hover
{
	background-color : #BBB;
	color : #FFF;
}
.t_grey:active
{
	background : #A1A1A1;
	color : #FFF;
}

.t_lightgrey
{
	background : #444;
	color : #FFF;
}
.t_lightgrey:hover
{
	background-color : #555;
	color : #FFF;
}
.t_lightgrey:active
{
	background : #414141;
	color : #FFF;
}

.text_grey
{
	color : #AAA;
}

.t_teal
{
	background : #1da897;
	color : #FFF;
}
.t_teal:hover
{
	background-color : #24B8A6;
	color : #FFF;
}
.t_teal:active
{
	background : #1B9A8A;
	color : #FFF;
}
.text_teal
{
	color : #1da897;
}

/* ------------------------------------ RESPONSIVE TABLE LAYOUTS -------------------------------------------- */

table
{
	font-size : 10pt;
}
tr:nth-child(even) 
{
	background: #EFEFEF;
}
tr:nth-child(odd) 
{
	background: transparent;
}
td
{
	padding : 0px 10px 0px 10px;
}

td.data_cell
{
	min-width : 200px !important;
}
.store_active
{
	color : #444;
}
.store_inactive
{
	color : #bbb;
}

table 
{
	  border: 1px solid #ccc;
	  border-collapse: collapse;
	  margin: 0;
	  padding: 0;
	  width: 100%;
	  table-layout: fixed;
}

table caption 
{
	  font-size: 1.5em;
	  margin: .5em 0 .75em;
}

table tr 
{
	  background: #f8f8f8;
	  border: 1px solid #ddd;
	  padding: .35em;
}

table th, table td 
{
	  padding: .625em;
	  text-align: center;
}

table th 
{
	  font-size: .85em;
	  letter-spacing: .1em;
	  text-transform: uppercase;
}
@media screen and (max-width: 700px) 
{
  table 
  {
    border: 0;
  }
  
  table caption 
  {
    font-size: 1.3em;
  }
  
  table .thead 
  {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  table tr 
  {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: .625em;
  }
  
  table td 
  {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: right;
  }
  
  table td:before 
  {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  
  table td:last-child 
  {
    border-bottom: 0;
  }
  
  .button_submit
	{
		display: block;
		width : 92%;
	}
  
}}



/* ------------------------------------- JQUERY TWEAKS ----------------------------------------------------- */

.ui-datepicker
{
    background: #F1F1F1 none;
    border : 1px solid #454545;
}