/* Generic Properties Start */

/*
	MCS TSM logo colours from darkest to lightest (the S in TSM).
	021b4f
	043566
	2a507e
	38638e
	628bb3
	a9cced
	c2e5fe

	7cbee7 # Primary colour in T and M
*/

html, body {
	width:auto;
	height:100%;
	margin:0;
	padding:0;
	overflow-x:hidden;
}

body {
	font-family: Verdana, Arial, sans-serif;
	font-size: 12px;
	background-color:transparent;
	color: #333333;
	text-align: left;
}

h1 {
	font-size:14pt;
	margin: 0 0 10px 0;
	font-variant: small-caps;
	color: #ffffff;
}

h2 {
	font-size:14pt;
	margin:10px 0 10px 0;
	color:#021b4f;
}

h3 {
	padding-left:0;
	font-size:14pt;
	font-weight: normal;
	color:#021b4f;
}

h4 {
	color:#021b4f;
	padding:0;
	margin:0;
}

h5 {
	font-size:14px;
	color:#021b4f;
	margin-top:0;
	padding-top:0;
}

p {
	padding-right:10px;
}

.red {
	color:#ff0000;
}

.green {
	color:#008d14;
}

.white {
	color:#ffffff;
}

.pale-blue {
	color:#7cbee7;
}

.background-red {
	background-color:#ff0000 !important;
}

.background-green {
	background-color:#008d14 !important;
}

.background-pale-blue {
	background-color:#7cbee7;
}

a {
	color:#021b4f;
}

a:focus {
	outline:none;
}

.clear-both {
	clear:both;
}

.clear-left {
	clear:left;
}

.clear-right {
	clear:right;
}

.clear-none {
	clear:none;
}

.float-left {
	float:left;
}

.float-right {
	float:right;
}

.left {
	text-align:left;
}

.center {
	text-align:center;
}

.right {
	text-align:right;
}

.italic {
	font-style:italic;
}

.pointer {
	cursor:pointer;
}

.inline-block {
	display:inline-block !important;
}

.display-none {
	display:none;
}

img {
	border:0;
}

.border-top {
	border-top:2px solid #021b4f;
}

.border-right {
	border-right:2px solid #021b4f;
}

.border-bottom {
	border-bottom:2px solid #021b4f;
}

.border-left {
	border-left:2px solid #021b4f;
}

.border {
	border:2px solid #021b4f;
}

.no-border {
	border:0;
}

#accordion {
	width:960px;
}

.mcs-icon {
	float:left;
	text-align:center;
	margin:0 12px 10px 12px;
	width:95px;
}

form  {
	border: 1px solid rgba(2, 27, 79, 0.1);
}

.bold {
	font-weight:bold;
}

.full-width {
	width:100%;
}

.margin-top {
	margin-top: 10px;
}

.margin-right {
	margin-right: 10px;
}

.margin-bottom {
	margin-bottom: 10px;
}

.margin-left {
	margin-left: 10px;
}

.delete-form {
	border:none;
}

/*input {*/
/*border:1px solid #043566;*/
/*border-radius:5px;*/
/*box-shadow:2px 2px 2px #021b4f;*/
/*height:25px;*/
/*line-height:normal;*/
/*width:100%;*/
/*}*/

/*select {*/
/*width:100%;*/
/*box-shadow:2px 2px 2px #021b4f;*/
/*}*/
/* Generic Properties End */

/* Header Properties Start */

.header-bg a {
	color:#ffffff;
}

#header {
	width:980px;
	margin:0 auto;
	position:relative;
	color:#ffffff;
}

div.bannerDiv {
	float:right;
	width:100%;
	height:60px;
	vertical-align: middle;
	margin:0;
	padding:0;
}

#message_centre {
	float:right;
	position:relative;
	width:70%;
	margin:10px 0 0 0;
	padding:0;
	height:98px;
}

.company-title {
	float:left;
	padding:0 0 0 1%;
	margin:10px 0 0 0;
	width:29%;
	font-size:12px;
	text-align:left;
	height:98px;
}

.bfa-title {
	margin-top: 60px;
	height:auto;
	overflow: hidden;
}

#logo {
	float:left;
	top:0;
	left:0;
	position:relative;
	text-align:center;
}

#logo img {
	border-radius:0 0 10px 10px;
}

#logo img#bfa-logo {
	border-radius:0;
}

#powered_by {
	padding:0;
	float:left;
	margin:5px 0 0 0;
}

#powered_by_img {
	float:left;
	margin:0 0 0 5px;
}
/* Header Properties End */

/* Toolbar Properties Start */
#toolbar {
	position:relative;
	height:0;
	padding:0;
	margin:0 auto;
	color:#ffffff;
	min-width:980px;
	width:980px;
}

#toolbar .tools {
	width:960px;
	height:105px;
	display:none;
	padding:10px;
	background-color:#021b4f;
	border-radius:0 0 10px 10px;
}

.update-type {
	color:#ff0000;
	font-weight:bold;
}
/* Toolbar Properties End */

/* Content Properties Start */
.wrapper {
	min-height:100%;
	height:auto !important;
	height:100%;
	margin:0 auto -80px;
}

div.container {
	width:980px;
	min-width:980px;
	/*overflow: hidden;*/
	margin: 0 auto;
}

div.content {
	width:980px;
	display: block;
	margin:10px;
	padding:0;
	vertical-align: top;
	position: inherit;
}

.section-header {
	width:960px;
	height:33px;
	font-size:14pt;
	font-weight:bold;
	color:#fff;
	background-color:#043566;
	border-radius:10px;
	cursor:pointer;
	margin:1px 0 1px 0;
}

.section-header:hover {
	background-color:#628bb3;
}

.section-header p {
	padding:5px 5px 5px 10px;
	margin:0;
}

.section {
	margin:0;
	padding:10px 0 10px 0;
}

.section.open {
	display:block;
}

.section.closed {
	display:none;
}
/* Content Properties End */

/* Footer Properties Start */
#footer, .push {
	height:50px;
}

#footer {
	position:relative;
	background-color:#021b4f;
	color:#ffffff;
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNWU1ZTUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #021b4f 0%, #7cbee7 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#021b4f), color-stop(100%,#7cbee7)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #021b4f 0%,#7cbee7 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #021b4f 0%,#7cbee7 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #021b4f 0%,#7cbee7 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #021b4f 0%,#7cbee7 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#021b4f', endColorstr='#7cbee7',GradientType=0 ); /* IE6-8 */
	border-top:10px solid #628bb3;
}

#footer a {
	color:#ffffff;
}

#footer #footer_box {
	width:984px;
	height:80px;
	margin:0 auto;
	padding:0 0 0 4px;
	position:relative;
}

#footer #footer_box .footer-segment {
	width:316px;
	height:80px;
	border:2px solid #021b4f;
	border-radius:10px;
	float:left;
	margin:25px 0 10px 0;
	color:#333333;
	font-size:16px;
	font-weight:bold;
	text-align:center;
}

#footer #footer_box .footer-segment a {
	display:block;
	text-decoration:none;
	color:#021b4f;
	text-align:center;
	width:316px;
	height:80px;
	background-color:transparent;
	border-radius:8px;
}

#footer #footer_box .footer-segment.middle {
	margin-left:10px;
	margin-right:10px;
}

#footer #footer_box #lang_flags {
	list-style-type: none;
	margin:0;
	padding:10px 0 5px;
	text-align:left;
}

#footer #footer_box #lang_flags li {
	display:inline;
	margin:0 10px 0 0;
}

#footer #footer_box #translate_tz {
	text-align:left;
}

#footer #footer_box #translate_tz a {
	text-decoration:none;
}

#footer #footer_box #translate_tz a:hover {
	text-decoration:underline;
}

ul#footer_nav {
	position:absolute;
	top:0;
	right:0;
	list-style-type:none;
	margin:0;
	padding:0;
}

ul#footer_nav li {
	float:left;
	display:block;
}

ul#footer_nav li a {
	display:block;
	text-decoration:none;
	padding:12px;
	color:#021b4f;
	float:left;
	font-size:12px;
	border-radius:0 0 10px 10px;
	background-color:#628bb3;
}

ul#footer_nav li a:hover {
	background-color:#7cbee7;
}
/* Footer Properties End */

/* Generic Table Properties Start */
table {
	width:960px;
}

table th, table td {
	padding:10px;
	/*border-bottom:1px solid #021b4f;*/
	border:1px solid #021b4f;
}

table th.no-border, table td.no-border {
	border-bottom:none;
	padding:10px;
}

table th {
	background-color:#628bb3;
	color:#021b4f;
	text-align:left;
}

table td {
	background-color:#a9cced;
	color:#021b4f;
}

table td a {
	color:#021b4f;
}

table td a:hover {
	text-decoration:none;
}

table .extra {
	display:none;
}

table tr.even td {
	background-color:#c2e5fe;
}

div .details-left {
	float:left;
	width:450px;
}

div .details-right {
	float:left;
	width:450px;
	margin-left:15px;
}

#show_more_less {
	margin:5px;
}

#accordion table tr td {
	border-right:1px solid #021b4f;
}
/* Generic Table Properties End */

/* Custom Table Properties Start */
table#tank_flow_table td {
	background-color:#a9cced;
}

table#tank_flow_table tr.total td {
	color:#ffffff;
	background-color:#333333;
}
/* Custom Table Properties End */

/* Generic jQuery UI Properties Start */
.ui-widget-content td a {
	color:#021b4f;
}

.ui-helper-reset {
	font-size:12px !important;
}

.ui-autocomplete {
	max-height: 300px;
	min-width:230px;
	overflow-y:auto;
	/* prevent horizontal scrollbar */
	overflow-x:auto;
}

.ui-widget {
	font-size:12px !important;
}

.ui-timepicker {
	width:100%;
}

#ui-timepicker-div {
	background-color:transparent !important;
}

.ui-pg-div {
	color:#ffffff;
	padding:0 5px 0 5px !important;
}

.ui-pg-button:hover {
	border:0 none !important;
	color:#021b4f !important;
}

.ui-pg-table td {
	color:#ffffff;
}
/* Generic jQuery UI Properties End */

/* Generic Button Properties Start */
.button {
	background-color:#628bb3;
	color:#021b4f;
	border-style:none;
	border-radius:10px;
	padding:5px 30px 5px 30px;
	font-size:12px;
	text-decoration:none;
	box-shadow:none;
	width:auto;
	display: inline-block;
	margin-top: 5px;
}

.button:hover {
	background-color:#7cbee7;
}

.button.no-bg-hover:hover {
	background-color:#628bb3;
}
/* Generic Button Properties end */

/* Loader Icon Properties Start */
div.basicDialogText {
	color:#333333;
	margin-top:10px;
	line-height:1.5em;
}
/* Loader Icon Properties End */

/* Card Search/Status Form Properties Start */
#card_search_form {
	margin-bottom:10px;
}

#card_search_form .log {
	float:left;
	padding-top:5px;
	margin-left:15px;
	position:relative;
}

#card_search_form .form-field-container {
	width:100%;
}

#card_search_form .form-field-container .form-label {
	width:100px;
	min-width:100px;
}

#card_search_form .loader {
	float:left;
	padding-top:5px;
	display:none;
	position:absolute;
	top:0;
	left:10px;
}

#card_search_form p {
	padding:0;
	margin:0 0 0 35px;
}

#cards_status_bulk_update_form {
	margin-bottom:10px;
}

#cards_status_bulk_update_form .log {
	float:left;
	margin-left:10px;
	line-height:22px;
}

#cards_status_bulk_update_form .loader {
	float:right;
	margin:3px 0 3px 0;
	display:none;
}

#cards_status_bulk_update_form p {
	padding:0;
	margin:0;
}

#cards_status_bulk_update_form .form-field-container {
	width:100%;
}

#cards_status_bulk_update_form .form-field-container .form-label {
	width:210px;
}

#cards_status_bulk_update_form .form-field-container .form-help-text {
	margin:5px 0 0 25px;
}

/* Card Search/Status Form Properties End */

/* Default Dialog Properties Start */
.dialog-confirm {
	display:none;
}

.dialog-error {
	display:none;
}

.dialog-success {
	display:none;
}

.ui-dialog-titlebar-close {
	visibility:hidden;
}
/* Default Dialog Properties End */

#nav_container {
	font-family:Arial,Helvetica,sans-serif;
	font-size:14px;
}

ul#nav {
	padding:0;
	float:right;
	margin:0;
	list-style-type:none;
}

ul#nav li {
	float:left;
	display:block;
	position:relative;
	z-index:100;
}

ul#nav li a {
	display:block;
	text-decoration:none;
	padding:14px;
	color:#021b4f;
	float:left;
	font-size:14px;
	border-radius:0 0 10px 10px;
}

ul#nav li a:hover {
	background-color:#7cbee7;
}

ul#nav li:hover a {
	background-color:#7cbee7;
}

/*ul#nav li:hover ul.sub-nav {*/
/*display:block;*/
/*}*/

ul#nav li ul.sub-nav {
	list-style: none;
	position: absolute;
	left:0;
	top:44px;
	background: #7cbee7;
	margin:0;
	padding:0;
	display:none;
	float:left;
	border-top:1px solid #628bb3;
}

ul#nav li ul.sub-nav li {
	margin:0;
	padding:0;
	clear:both;
	display:block;
	z-index:100;
}

ul#nav li ul.sub-nav li a {
	float: left;
	width: 140px;
	border-bottom: 1px solid #628bb3;
	border-radius:0;
}

ul#nav li ul.sub-nav li a:hover {
	background-color:#c2e5fe;
}

ul#nav li a.first {
	border-left:none;
}

ul#nav li a.last {
}

ul#nav li ul.sub-nav.company-nav {
	left:-126px;
}

ul#nav li ul.sub-nav.customer-nav {
	left:-126px;
}

ul#nav li a.submenu-link img {
	border-style:none;
}

ul#nav li a:focus {
	outline:none;
}

ul#bottom_nav {
	position:absolute;
	bottom:0;
	right:0;
	list-style-type:none;
	margin:0;
	padding:0;
}

ul#bottom_nav li {
	float:left;
	display:block;
}

ul#bottom_nav li a {
	display:block;
	text-decoration:none;
	padding:12px;
	color:#021b4f;
	float:left;
	font-size:12px;
	border-radius:10px 10px 0 0;
	background-color:#628bb3;
}

ul#bottom_nav li a:hover {
	background-color:#7cbee7;
}

#settings_icon {
	width:14px;
	height:14px;
}

/* Notification feed */
#notification_feed {
	float:right;
	width:190px;
	margin:0;
	padding:0;
	text-align:center;
}

#notification_feed h4 {
	margin:0;
	padding:0;
}

#notification_feed p {
	margin:0;
	padding:0;
}

#notification_feed p a {
	text-decoration:none;
	color:#ffffff;
	padding:10px;
	display:block;
	border:2px solid #021b4f;
	border-radius:5px;
	background-color:#628BB3;
}

#notification_feed p a:hover {
	background-color:#7cbee7;
}

#notification_feed p a span {
	margin-right:5px;
}

.ui-icon.ui-icon-mail-closed {
	height:13px;
}

/* Notifications view */
#notifications {
	padding:0;
	width:960px;
}

#notifications table {
	border-collapse:collapse;
	margin:0 auto;
}

#notifications table th, #notifications table td {
	padding:10px;
	text-align:center;
}

#notifications table tr.odd {
	background-color:#eeeeee;
}

#notifications table tr.even {
	background-color:transparent;
}

#notifications table tr.unread {
	font-weight:bold;
}

/* Notification view */
#notification {
	padding:0;
	width:960px;
}

#notification table {
	border-collapse:collapse;
	margin:0 auto;
}

#notification table td {
	width:400px;
}

#notification table th, #notification table td {
	padding:10px;
}

/* Django messages */
.messages {
	float:right;
	max-width:500px;
	background-color:transparent;
	border-radius:5px;
	border:2px solid #021b4f;
	list-style-type: none;
	margin:0 3px 0 0;
	padding:0;
}

.messages li {
	padding:10px;
}

.messages li.debug {
	background-color:#e0ffff;
}

.messages li.info {
	background-color:#628bb3;
}

.messages li.success {
	background-color:#90bb90;
}

.messages li.warning {
	background-color:#ffd700;
}

.messages li.error {
	background-color:#dc143c;
	color:#ffffff;
}

.messages li.first {
	border-radius:3px 3px 0 0;
}

.messages li.last {
	border-radius:0 0 3px 3px;
}

.messages li.first.last {
	border-radius:3px;
}

/* Groups Properties Start */
#groups p {
	margin:0;
	padding:5px 0 5px 0;
}

#groups p.hr {
	border-bottom:2px solid #628bb3;
	margin:5px;
	padding:0;
}

#groups p.hr img.loader {
	position:absolute;
	right:5px;
	top:2px;
	display:none;
}

#group_types {
	float:left;
	width:200px;
}

#groups ul {
	list-style-type:none;
	margin:0;
	padding:0;
}

#groups ul li {
	margin:0;
	padding:0;
}

#groups ul li a {
	display:block;
	padding:10px;
	text-decoration:none;
	color:#021b4f;
}

#groups ul li.odd {
	background-color:#628bb3;
}

#groups ul li.even {
	background-color:#a9cced;
}

#groups ul li:hover {
	background-color:#7cbee7;
}

#groups ul.group-types {
	float:left;
	width:200px;
}

#group_select_assign {
	float:left;
	width:746px;
	border-left:2px solid #021b4f;
	border-right:2px solid #021b4f;
	border-bottom:2px solid #021b4f;
	margin-left:10px;
	display:none;
	background-color:#021b4f;
	position:relative;
}

#group_select_assign p {
	margin:0;
	padding:5px;
	color:#eeeeee;
}

#unassigned_groups {
	float:left;
	width:367px;
	padding:0;
	margin:0 0 0 5px;
	overflow: auto; /* Note this is a ff fix */
}

#assigned_groups {
	float:right;
	width:367px;
	padding:0;
	margin:0 5px 0 0;
	overflow: auto; /* Note this is a ff fix */
}

#unassigned_groups p {
	padding:0;
	margin:0;
}

#assigned_groups p {
	padding:0;
	margin:0;
}

#groups #assigned_sortable, #groups #unassigned_sortable {
	min-height:1800px;
}

#groups #assigned_sortable li, #groups #unassigned_sortable li {
	padding:10px;
	cursor:pointer;
	height:16px;
	color:#ffffff;
}

#groups .ui-state-highlight, #groups .ui-widget-content #groups .ui-state-highlight, #groups .ui-widget-header #groups .ui-state-highlight {
	border:1px solid #021b4f !important;
	background: #7cbee7 !important;
}

#dialog_group_error {
	display:none;
}

#groups #group_select_assign .pagination {
	padding:5px 0 5px 0;
	color:#ffffff;
}

#groups #group_select_assign .pagination a {
	color:#ffffff;
}
/* Groups Properties End */

/* User Alert Properties Start */
.alerts {
	margin:0;
	padding:0;
	width:100%;
}

.alerts ul {
	float:left;
	width:200px;
	list-style-type:none;
	margin:0;
	padding:0;
}

.alerts ul li {
	margin:0;
	padding:0;
}

.alerts ul li a {
	display:block;
	padding:10px;
	text-decoration:none;
	color:#021b4f;
}

.alerts ul li.odd {
	background-color:#628bb3;
}

.alerts ul li.even {
	background-color:#a9cced;
}

.alerts ul li:hover {
	background-color:#7cbee7;
}

.alerts ul.sites, .alerts ul.tanks {
	margin-left:10px;
}

.alerts ul.sites li.site, .alerts ul.tanks li.tank {
	display:none;
}

.alerts .user-preference {
	float:left;
	width:285px;
	margin-left:10px;
}

.alerts .user-preference .preference-form {
	width:260px;
	border:1px solid rgba(2, 27, 79, 0.1);
	border-radius:5px 5px 5px 5px;
	box-shadow:0 1px 2px rgba(2, 27, 79, 0.1);
	padding:10px;
}

.alerts .user-preference .preference-form .form-field-container, .alerts .user-preference .preference-form .form-field-container .form-field {
	width:250px;
	min-width:250px;
}

.update-alert-img {
	display:none;
}
/* User Alert Properties End */

/* Loading Dialog Start*/
#loading_dialog, #pre_loading_dialog {
	display:none;
	text-align:center;
}
/* Loading Dialog End */

.ordering-buttons {
	float:right;
}

#download, div.download {
	float:left;
	margin:10px 0 10px 0;
}

.transactions-table, #cards, #companies, #customers, #sites, #vehicles, #drivers {
	overflow-x:auto;
	overflow-y:auto;
	-webkit-overflow-scrolling:touch;
}

.gdpr-update {
	background-color: #333;
	padding: 5px 0;
	text-align: center;
	color: #e6e6e6;
}

.gdpr-update a {
	color: #e6e6e6;
}