/* Website template by freewebsitetemplates.com */
/*------------------------- Layout styles ------------------------*/
body {
  font-family: arial,sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.4em;
}
.site-logo-wrap	{
/*	width: 160px;*/
	padding: 10px 20px;
}
.site-logo-wrap .logo-image	{
	float: left;
	width: 200px;
}
.site-logo-wrap .logout-image	{
	float: right;
	width: 40px;
	padding: 10px 0 0 0;
}

.container {
/*	max-width: 800px;*/
	margin: 30px;
	margin-bottom: 40px;
/*	padding-bottom: 20px;*/
	border: 1px solid #cccccc;
	box-shadow: 5px 10px #cccccc;
	background-color: #f9f9f9;
	/*min-height:100vh;*/
}
.container.admin {
	max-width:800px;
}
.container-small	{
	margin: 30px auto;
	width: 60%;
	min-width: 600px;
	text-align: center;
	border: 1px solid #cccccc;
	box-shadow: 5px 10px #cccccc;
	background-color: #f9f9f9;
}
.container-small h2	{
	margin: 0;
}
.head {
	background-color:#66c399;
	color:#ffffff;
	margin-bottom: 20px;
}
.container.admin .head {
	background-color:#889fb9;
}
.container-body	{
	padding: 0 20px;
}
h2 {
  text-align: center;
  padding: 15px 0;
  font-size: 1.2em;
}
h4 {
  text-align:center;
  padding: 0;
  margin: 10px 0;
  font-size: 1.0em;
}
h4.sub {
  text-align:center;
  padding: 0;
  margin: 25px 0 10px;
  font-size: 1.0em;
}
h5	{
	margin: 10px;
}
.header-label	{
	padding: 0;
	margin-top: 15px;
	margin-bottom: 10px;
}
hr	{
  border-top: 2px dashed #cccccc;
  border-bottom: none;
}
hr.divider	{
	margin: 20px 0;
}
.container h2	{
	font-weight: normal;
	margin: 0;
}
table td
{
	font-size: 1.2em;
}
input, select {
	margin-top: 5px;
	margin-bottom:5px;
}
textarea {
	height:100px;
	margin-bottom:10px;
}
.login input:first-of-type
{
	margin-top:35px;
}
input, textarea, select {
	font-size: 1em;
	font-family: arial,sans-serif;
	border: 1px solid #cecece;
	color:#000000;
	padding: 5px 10px 5px;
	max-width: 600px;
}
::-webkit-input-placeholder {
   color: #737373;
}
:-moz-placeholder {
   color: #737373;  
}
::-moz-placeholder {
   color: #737373; 
}
:-ms-input-placeholder {  
   color: #737373;  
}
.login input	{
	min-width: 300px;
	width: 60%;
 	padding: 15px 10px 10px;
}
.login .forgot-password	{
	margin: 20px auto;
}

button {
	background-color: #0098aa;
	border: none;
	color: white;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 1em;
	margin: 15px 10px;
	min-width: 100px;
	cursor: pointer;
/*	width: 20%;*/
}
button:hover, .button:hover {
	background-color: rgba(0,152,170,0.8);
}
button.first	{
	margin-left: 0px !important;
}
button.last	{
	margin-right: 0px !important;
}
.container.admin button, #control-box button {
	background-color:#889fb9;
}
.container.admin button:hover, .container.admin button:hover, #control-box button:hover {
  background:#6b7f96;
}
button.small	{
	padding: 5px;
	margin: 5px;
	min-width: 60px;
}
button i.fa	{
	font-size: 19px;
}
.full-btn
{
	width: auto;
}
.input-short	{
	width: 100px;
}
.input-medium	{
	width: 200px;
}
.input-long	{
	width: 300px;
}

div.lbl {
	clear: both;
    font-family:arial,sans-serif;
    font-size:1em;
    display:block;
    float:left;
    padding-top:10px;
    padding-bottom:10px;
    width: 25%;
    margin:auto;
    margin-left: 10%;
    text-align: left;
}
div.fld {
    font-family:arial,sans-serif;
    font-size:1em;
    display:block;
    float:left;
    padding-top:10px;
    padding-bottom:10px;
    width: 50%;
    margin:auto;
    text-align: left;
}
#divMsg	{
	position: fixed;
	bottom: 50px;
	width: 100%;
	text-align: center;
	display: none;
}
#divMsg .close-btn	{
	display: inline-block;
	vertical-align: -5px;
}
#divMsg .msg	{
	color:	#66c399;
}
#divMsg .err	{
	color:	#f79549;
}
label.error {
    font-family: arial,sans-serif;
    font-size: 1em;
    display: inline-block;
    padding:10px 20px;
    background-color:#f79549;
    min-width: 60%;
    margin:auto;
    color: #ffffff;
    text-align: center;
}

label.message {
    font-family: arial,sans-serif;
    font-size: 1em;
    display: inline-block;
    padding:10px 20px;
    background-color:#66c399;
    min-width: 60%;
    margin:auto;
    color: #ffffff;
    text-align: center;
}

div.fld label.error {
	margin-left: 0px;
}

.center-align-container	{
	text-align: center;
	padding: 20px;
}

#totalTable	{
	margin: 20px;
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}


/* Table css */
table
{
	border-collapse: collapse;
	font-size: 12px;
/*	margin: auto;*/
}
.container table.grid, .container.admin table.grid	{
}
td
{
	padding: 10px 10px;
}

td.header, tr.selected td.header
{
	background: #ccc;
/*	font-weight: bold;*/
	text-align: left;
	vertical-align: middle;
}
td.header.center-align	{
	text-align: center;
}
table.grid
{
	border: 2px solid #ccc;
}
table.grid td
{
	border: 1px solid #ccc;
}
table.grid td.header
{
	border: 1px solid #fff;
}
table.grid tr.empty-row td	{
	border: 0;
}

table.no-grid
{
	border: none;
}
table.no-grid td
{
	border: none;
}

table.small td	{
	padding: 2px 5px;
}
table.small input, table.small select {
	margin-top: 2px;
	margin-bottom:2px;
	padding: 3px 10px;
}
table.selection {
	border: 2px solid #98c0c5;
	margin: 40px 0;
}
table.selection td {
	border-bottom: 1px solid #98c0c5;
	padding: 2px 20px;
	text-align: left;
}
table.selection td.header {
	background-color: #98c0c5;
	border-bottom: 1px solid #ffffff;
}
table.selection input, table.selection textarea, table.selection select	{
	border: 1px solid #98c0c5;
}
table.selection button	{
	padding: 7px;
	margin: 5px 10px;
}
tr.alt td	{
	background-color: #efefef;
}
tr.alt td.header	{
	background-color: #bdbdbd;
}
tr.selected td	{
	background-color: #c6daf0;
}
.header-index	{
	font-size: 1.8em;
	padding: 20px;
}
.container.admin table.selection {
	border: 2px solid #889fb9;
}
.container.admin table.selection td {
	border-bottom: 1px solid #889fb9;
}
.container.admin table.selection td.header {
	background-color: #889fb9;
	border-bottom: 1px solid #ffffff;
	color: #ffffff;
}
.container.admin table.selection input,
	.container.admin table.selection textarea,
	.container.admin table.selection select	{
	border: 1px solid #889fb9;
}

td.extra-padding	{
	padding-top: 10px !important;
	padding-bottom: 10px !important;
}
table.thin-padding td	{
	padding: 2px 20px;
}
td.empty	{
	background-color: transparent !important;
}
tr.group-row	{
	border-top: 5px solid #aaa;
	background-color: #e2e2e2;
}
tr.group-row.first	{
	border-top: none;
}
.invisible	{
	visibility: hidden;
}
.hidden	{
	display: none !important;
}
.hidden-div	{
	width: 0;
	height: 0;
	overflow: hidden;
}
.display-block	{
	display: block;
}
.left-align	{
	text-align: left;
}
.center-align	{
	text-align: center;
}
.middle-align	{
	vertical-align: middle;
}
.mainview	{
	overflow-y: scroll;
	height: 200px;
}
.asset-edit	{
	margin-top: 40px;
}
.back-link	{
	margin: 20px;
}
.action-link	{
	padding: 2px 10px;
}

a {
	color: #2a4f78;
	outline:none;
}
a:hover	{
	color: #80b0e5;
}
a img {
	border:0;
	display:block;
}
a img:hover {
	filter:alpha(opacity=80);/* Needed for IE7 */
	opacity:0.8;
}
p a:hover {
	color:#388070!important;
}
a.remove	{
	color: #ff0000;
	font-size: 18px;
	text-decoration: none;
}
ul	{
	margin: 0 20px;
	padding: 0;
}
ul li	{
	list-style: none;
	margin: 0;
	padding: 0;
}
ol li	{
	list-style: decimal;
}
.data-row i.fa	{
	font-size: 20px;
}
i.remove	{
	color: #EC571F;
}
i.edit	{
	color: #24A512;
}
.page {
	width:960px;
	margin:0 auto;
	padding:22px 0 0;
}
.datepicker	{
	width: 140px;
}
.note	{
	font-style: italic;
	color: #666666;
}
.label-01	{
	font-size: 0.6em;
	color: #666666;
	text-transform: uppercase;
	padding: 0 2px 0 0;
	margin: 0;
}
.positive	{
	color: #24A512;
}
.negative	{
	color: #EC571F;
}
.prev	{
	background-color: #EED49D;
}

.form-invalid	{
	border: 2px dashed #ff0000;
}
.form-sub-box	{
	padding: 10px 15px;
}

.chk-btn	{
	display: inline-block;
	float: left;
	padding: 10px;
	margin: 10px;
	width: 160px;
	border: 2px solid #0098aa;
	text-align: center;
	font-weight: bold;
}
.chk-btn.wide	{
	width: 260px;
}
.chk-btn.checked	{
	background: #0098aa url('../images/bg-tick-50.png');
	background-repeat: no-repeat;
	background-size: 30px;
	background-position: 10px center;
	border: 2px solid #0098aa;
	color: #fff;
}
.chk-btn.unchecked	{
	color: #0098aa;
}
.app-row.selected	{
	background-color: orange;
}

/*------------------------- Top Nav -------------------------*/
/* Add a black background color to the top navigation */
.topnav {
	background-color: #586064;
	overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
	float: left;
	display: block;
	color: #f2f2f2;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 17px;
}

.topnav .logo a	{
	padding: 10px;
}

.topnav .username	{
	float: right;
	color: #fff;
	padding:20px 16px;
}

.topnav a.navlink	{
	padding: 20px 16px;
}
/* Add an active class to highlight the current page */
.active {
	background-color: #66c399;
	color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
	display: none;
	padding: 10px;
}
#menu-popup	{
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	padding-bottom: 5px;
	z-index: 1;
}
#menu-popup .menu-item {
	display: block;
	margin: 5px 15px 0 15px;
}
#menu-popup #title-bar	{
	background-color: #80a4d9;
	color: #fff;
	padding: 5px 10px;
}
#menu-popup #title-bar a	{
	float: right;
	margin: 0 0 0 15px;
}

/* Dropdown container - needed to position the dropdown content */
.dropdown {
	float: left;
	overflow: hidden;
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
	font-size: 17px; 
	border: none;
	outline: none;
	color: white;
	padding: 20px 16px;
	background-color: inherit;
	font-family: inherit;
	margin: 0;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
}

/* Style the links inside the dropdown */
.dropdown-content a {
	float: none;
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	text-align: left;
}

/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
	background-color: #3e3e3e;
	color: white;
}

/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
	background-color: #ddd;
	color: black;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
/*	display: block;*/
}

.dropdown-visible	{
	display: block;
}

.down-arrow	{
	font-size: 12px;
	margin-left: 2px;
}

ul.btn	{
	margin: 0;
	padding: 0;
}
ul.btn li	{
	display: block;
	float: left;
	padding: 5px 10px;
	margin: 0;
}
.ui-sortable-helper ul.btn li	{
	display: none;
}
tr.ui-sortable-helper	{
	background: #ffffff;
}

/*------------------------- Footer -------------------------*/
.footer {
	visibility: hidden;
	background: #282828;
	color: #ffffff;
/*	margin-top: 20px;*/
	padding: 20px;
	text-align: center;
	font-size: 1.0em;
}

.footer.fixed	{
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
}

.footer.relative	{
/*	display: none;*/
}

.footer.shown	{
	visibility: visible;
}

.footer a	{
	color: #0098aa;
	text-decoration: none;
}

.footer ul li	{
	display: inline;
	list-style: none;
	margin: 7px 20px 7px 0;
}

/*------------------------- Overlay -------------------------*/
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    z-index: 10000;
}

#loading-icon	{
	position: fixed;
	top: calc(50% - 50px);
	left: calc(50% - 50px);
	z-index: 10001;
}

.alert	{
	background-color: #FFB233;
}
ul.item-list	{
	margin: 0 20px;
	padding: 0;
}
ul.item-list li	{
	list-style: none;
	margin: 10px 0;
	padding: 0;
}
ul.buttons	{
	margin: 0;
	padding: 0;
}
ul.buttons li	{
	float: left;
/*	margin: 0 20px 0 0;*/
}
.ni	{
	color: #B12D26;
}

.success {
	color: #1080F0;
}
.error {
	color: #E97D27;
}
.message {
	color: #000000;
}
.warning {
	background-color: #d5a010;
}
.hide	{
	display: none;
}

/*------------------------- media queries -------------------------*/
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
	.topnav a:not(:first-child), .dropdown .dropbtn {
		display: none;
	}
	.topnav a.icon {
		float: right;
		display: block;
		color: #fff;
		position: relative;
		width: 40px;
		height: 40px;
	}
	.topnav a.icon span	{
		left: 15px;
	}
	.topnav a.icon span,
	.topnav a.icon span:before,
	.topnav a.icon span:after {
	  -moz-transition: all 0.4s;
	  -o-transition: all 0.4s;
	  -webkit-transition: all 0.4s;
	  transition: all 0.4s;
	  background-color: white;
	  display: block;
	  position: absolute;
	  width: 30px;
	  height: 3px;
	  top: 29px;
	}
	.topnav a.icon span:before,
	.topnav a.icon span:after {
	  content: "";
	}
	.topnav a.icon span {
/*	  top: 10px;*/
	}
	.topnav a.icon span:before {
	  -moz-transform-origin: 33% 100%;
	  -ms-transform-origin: 33% 100%;
	  -webkit-transform-origin: 33% 100%;
	  transform-origin: 33% 100%;
	  top: -10px;
	  z-index: 10;
	}
	.topnav a.icon span:after {
	  -moz-transform-origin: 33% 0;
	  -ms-transform-origin: 33% 0;
	  -webkit-transform-origin: 33% 0;
	  transform-origin: 33% 0;
	  top: 10px;
	}
	.topnav a.icon.open span,
	.topnav a.icon.open span:before,
	.topnav a.icon.open span:after {
	  background-color: transparent;
	}
	.topnav a.icon.open span:before {
	  -moz-transform: translateY(4px) translateX(1px) rotate(45deg);
	  -ms-transform: translateY(4px) translateX(1px) rotate(45deg);
	  -webkit-transform: translateY(4px) translateX(1px) rotate(45deg);
	  transform: translateY(4px) translateX(1px) rotate(45deg);
	  background-color: white;
	}
	.topnav a.icon.open span:after {
	  -moz-transform: translateY(-8px) translateX(1px) rotate(-45deg);
	  -ms-transform: translateY(-8px) translateX(1px) rotate(-45deg);
	  -webkit-transform: translateY(-8px) translateX(1px) rotate(-45deg);
	  transform: translateY(-8px) translateX(1px) rotate(-45deg);
	  background-color: white;
	}
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
	.topnav.responsive {position: relative;}
	.topnav.responsive a.icon {
		position: absolute;
		right: 0;
		top: 0;
	}
	.topnav.responsive a {
		float: none;
		display: block;
		text-align: left;
	}
	.topnav.responsive .dropdown {float: none;}
	.topnav.responsive .dropdown-content {position: relative;}
	.topnav.responsive .dropdown .dropbtn {
		display: block;
		width: 100%;
		text-align: left;
	}
}

@media screen and (max-width: 700px) {
	label.error {
		width: 90%;
	 }
	
	input, textarea {
    	/*width: 90%;*/
  	}
  	button {
/*    	width:90%;*/
  	}
  	body {
  		/*padding-top:10px;*/
  	}
	.footer ul li	{
		display: block;
	}

	.container, .container.admin {
		max-width: 100%;
		box-shadow: none;
	}
	.footer	{
		
	}
}