/* Layout */

body {
	background-color: #ffffff;
	font-size: 1.4em;
}

th {
	white-space: normal;
	font-size: 80%;
}

.error-message {
	background: #fcebea;
    color: #cc1f1a;
    border-color: #ef5753;
}

.index table th {
	font-size: 75%;
	padding: 5px;
	background-color: #919191;
	color: #ffffff;
}

.index table th a {
	color: #ffffff;
}

.index table td {
	padding: 5px;
}

.index table tr:nth-child(even) {
  background-color: #eeeeee;
}

.top-nav-title a {
  display: block;
  width: 100%;
  height: 85px;
}

.main {
    min-height: 100vh;
}

.menu-toggle {
	display: none;
}

.grayed, .disallowed {
	cursor: not-allowed;
	color: #cccccc !important;
	background-color: #eeeeee !important;
	border-color: #cccccc !important;
	pointer-events: none;
	display: inline-block;	
}

.ui-widget-header {
	background: #0095DA !important;
	color: #ffffff !important;
	font-size: 1.3rem;
}

.top-nav-links, .side-nav, h1, h2, h3, h4, h5, h6 {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h1 {
	font-size: 3.6rem;
}

.small {
	font-size: 75%;
}

.paginator .pagination {
	float: left;
	width: 50%;
	font-weight: 600;
}

.paginator {
	margin-top: 20px;
	margin-bottom: 20px;
	min-height: 20px;
}

.paginator p {
	float: right;
	width: 50%;
	font-weight: 600;
}

.container {
	max-width: 100% !important;	
}

.pagination {
	justify-content: left !important;	
}

.page-counter {
	float: right;
	font-weight: bold;
}

.pagination .active a {
	cursor: not-allowed;
	color: #333333;
	pointer-events: none;
	display: inline-block
}

td {
	vertical-align: top;	
}

footer {
	margin-top: 25px;
	background-color: #f3ad2e;
}

footer p {
	width: 100%;
	text-align: center;
	padding: 10px;
	color: #eeeeee;
}

footer a, footer a:hover {
	color: #eeeeee;	
}

/* Buttons */

.ajax-add-btn {
	width: 100% !important;
	line-height: 18px !important;
	background-color: #9cc4f3 !important;
	color: #2084f7 !important;
	font-weight: 600;
	border: 3px solid #2084f7 !important;
	border-radius: 10px;
	padding: 5px;
}

.related h4 .button {
 margin-top: -5px;
}

form#ExportReportForm {
	float: left;
	width: 200px;
	clear: none;
}

a.reset-bttn {
	background-color: #666666;
	border: 0.1rem solid #333333;
	border-radius: .4rem;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-size: 1.1rem;
	font-weight: 700;
	height: 3.8rem;
	letter-spacing: .1rem;
	line-height: 3.8rem;
	padding: 0 3.0rem;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	margin-bottom: 1.5rem;
}

.button, button,
input[type="button"],
input[type="reset"], 
input[type="submit"] {
	background-color: #f3ad2e;
	border: 0.1rem solid #f3ad2e;
}

.btn-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  margin-top: 20px;
  margin-bottom: 20px;
}

.home-page-bttn {
	flex: 33.33%;
}

.home-page-bttn a {
	display: block;
	width: 200px;
	height: 50px;
	text-align: center;
	background-color: #e79603;
	border: 3px solid #f3ad2e;
	border-radius: 4px;
	color: #ffffff;
	font-size: 18px;
	line-height: 48px;
	margin: 10px auto 10px auto;
}

.home-page-bttn a:hover {
	background-color: #f3ad2e;
	border: 3px solid #e79603;
}

.blue-button {
	font-size: 1rem !important;
	font-weight: 600 !important;
	background-color: #0095DA !important;
	border: 1px solid #0095DA !important;
	line-height: 3.8rem !important;
	letter-spacing: .1rem !important;
}

.ajax-add-btn.disallowed {
	background-color: #cccccc !important;
	border-color: #bbbbbb !important;
}

.icon-button {
	border: 1px solid #dddddd !important;
	padding: 5px !important;
	line-height: 20px;
	float: right !important;
}

td.action-buttons.wide {
	width: 200px;	
}

th.actions {
	width: 145px !important;
}

.action-buttons a,
td.actions a {
	display: block;
	float: left !important;
	width: auto;
	height: 30px;
	padding: 10px;
	border: 1px solid #dddddd;
	background-color: #eeeeee;
	text-decoration: none;
	font-size: 0.9em;
	margin-right: 10px;
	text-align: center;
	border-radius: 10px;
}

.action-buttons a:hover {
	background-color:#cccccc; 
}

td.action-buttons a {
	padding: 3px;
	margin-bottom: 0px;
	margin-top: 0px;
}

.searchFormButtons {
	display: flex;	
}

.searchFormButtons .flex-search-bttn {
	margin-right: 25px;	
}

.fa-backspace {
	color: #ed1c24;
	font-size: 1.2em;
}

.form span.add-row,
a.add-row,
.actions a.add-row {
	background-color: #0095da;
	border: 0.1rem solid #0095da;
	border-radius: .4rem;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-size: 1.1rem;
	font-weight: 700;
	height: 3.8rem;
	letter-spacing: .1rem;
	line-height: 3.8rem;
	padding: 0 2.0rem;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	margin-left: 25px;
}

/** Navigation **/

.top-nav {
	max-width: 100% !important;
	background-color: #f3ad2e;
}

.top-nav-title {
	background: url(../img/TAGWO-logo.png) no-repeat;
	position: relative;
	text-indent: -9999px;
	height: 85px;
	width: 443px;
}

div#user-info {
	text-align: right;
	color: #ffffff;
}

.top-nav-links a {
	color: #ffffff !important;	
}

.top-nav-links a:hover {
	color: #dddddd !important;	
}

div#user-info a:hover {
	color: #dddddd;
}

div#main-submenu {
	margin-top: 10px;
}

div#main-submenu ul ul {
	display: none;
}

div#main-submenu ul li:hover > ul {
	display: block;
}
	
div#main-submenu ul {
	background: #919191; 
	padding: 0 20px;
	list-style: none;
	position: relative;
	display: inline-table;
}

div#main-submenu ul:after {
	content: ""; clear: both; display: block;
}

div#main-submenu ul li {
	float: left;
}


div#main-submenu ul li:hover a {
	color: #fff;
}

div#main-submenu ul li a {
	display: block; padding: 12px 40px;
	color: #444444; text-decoration: none;
}

div#main-submenu ul ul {
	background: #919191; border-radius: 0px; padding: 0;
	position: absolute; top: 100%;
	width: 200px;
	margin: 0px;
	z-index: 1000;
}

div#main-submenu ul ul li {
	float: none; 
	border-top: 1px solid #919191;
	border-bottom: 1px solid #919191;
	position: relative;
	margin: 0px;
	width: 170px;
}

div#main-submenu ul ul li a {
	padding: 10px 15px;
	color: #fff;
	width: 170px;
}

div#main-submenu ul ul li a:hover {
	color: #9ed5f7;
}

div#main-submenu ul ul ul {
	position: absolute; left: 100%; top:0;
}

div#main-submenu li.sub-menu-item {
	margin-bottom: 0px;	
}

/* Statuses */

.centered-cell {
	vertical-align: middle;
	text-align: center;
}

.status-cell {
	font-weight: bold;
}

.status-new {
	background-color: #75BBE4;
}

.status-scheduled {
	background-color: #1DE542;
}

.status-in-progress {
	background-color: #EAEF62;
}

.status-monitoring {
	background-color: #fbb630;
}

.status-completed {
	background-color: #F9A7B6;
}

/* Login and user data */

.login-form,
.welcome {
	width: 50%;
	margin-right: auto;
	margin-left: auto;
	border: 1px solid #333333;
	padding: 10px;
	border-radius: 10px;
	background-color: #ffffff;
}

.home-login-form {
	width: 65%;
	margin: 10px auto 25px auto;
	padding: 20px;
	background-color: #f8f8f8;
	border: 1px solid #eeeeee;
}

.home-login-form label {
	font-size: 95%;
}

/* Accordion */

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
	background-color: #F3AD2E !important;
	border: 1px solid #F3AD2E !important;	
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
	background-color: #F3AD2E !important;
	border: 1px solid #F3AD2E !important;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
	background-color: #e79603 !important;
	border: 1px solid #e79603 !important;
}

.accordion-form-table th,
.meta-form-table th {
 	width: 150px;
 	white-space: normal;
 }
 
 /* Search */

.checkdown {
	display: block;
	padding: 0px;	
}

.checkdown .checkbox {
	display: inline-block;
	padding: 0px;
	line-height: 10px;	
}

.checkdown .select {
	display: inline;
}

.search-form label {
	font-size: 75% !important;
	font-weight: normal !important;
	margin-bottom: 5px !important;
}

.search-form table td {
	vertical-align: top;
}

/* View */

.order-created {
	text-align: right;
	float: right;
	font-size: 12px;
	letter-spacing: 0rem !important;
	margin-bottom: 20px;	
}

.related h4 {
	background-color: #dddddd;
	padding: 15px;
}

/* Mobile Layout */

@media screen and (max-width:950px) {
	#menuToggle {
		display: none;
	}
	
	.menu-toggle {
		display: block;
		position: relative;
		background-color: #333;
		width: 100%;
	}
	
	.top-nav-links {
		display: none;
	}
	
	.menu-flex {
		display: flex;
		flex-direction: column;
	}
	
	.menu-toggle #user-info {
		text-align: left;
		padding: 15px;
	}
	
	.menu-toggle #user-info a {
		display: inline;
	}
	
	.menu-flex div#main-submenu ul {
		width: 100%
	}
	.menu-flex div#main-submenu ul li {
		float: none;
		width: 100%;
	}
	
	.menu-flex #main-submenu ul li a {
		width: 100%;
		padding: 12px 12px;
		font-weight: bold;
	}
	
	.menu-flex #main-submenu ul li a:hover {
		color: #333333;
	}
	
	.menu-flex div#main-submenu ul ul {
		position: relative;
		display: block;
	}
	
	.menu-flex div#main-submenu ul ul li a {
		font-weight: normal;
		padding: 12px 40px;
	}
	
	.menu-flex div#main-submenu ul ul li a:hover {
		color: #333333;
	}
	
	/* Style navigation menu links */
	.menu-toggle a {
	  color: white;
	  padding: 14px 18px;
	  text-decoration: none;
	  font-size: 17px;
	  display: block;
	}
	
	/* Style the hamburger menu */
	.menu-toggle a.icon {
	  background: #333333;
	  display: block;
	  position: absolute;
	  right: 0;
	  top: -27px;
	}
	
	.add-new {
		text-indent: -9999px;
		line-height: 12px;
	}

	.add-new::after {
		content: "+";
		text-indent: 0;
		display: block;
	}
	
	.order-view.row {
		flex-direction: column;
	}
	
	.order-view.row .column-responsive.column-60 {
		flex: 0 0 100%;
		max-width: 100%;
	}
	
	th {
	  white-space: normal;
	  vertical-align: top;
	}
	
}