@import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,700');

/*--- General ---*/

body {
   margin: 0;
   font-family: "Noto Sans", "Arial", "Helvetica", sans-serif;
   background: url(/images/bg.png) repeat-x;
   font-size: 10pt;
}

#content {
   padding: 15px 30px 30px 30px;
   clear: left;
}

input#sidebar-toggle:checked ~ div#content {
   margin-left: 18em;
   transition: margin-left 200ms;
   -webkit-transition: margin-left 200ms;
   transition-timing-function: ease-in-out;
}

input#sidebar-toggle:not(:checked) ~ div#content {
   margin-left: 0;
   transition: margin-left 200ms;
   -webkit-transition: margin-left 200ms;
   transition-timing-function: ease-in-out;
}

div.banner {
   box-shadow: 0 0 12px 0 #acf;
   background: no-repeat 1em 50%;
   padding: 1em 1em 1em 2.5em;
   font-size: 10pt;
   margin-bottom: 1em;
}

div.map-disabled {
   box-shadow: 0 0 12px 0 #acf;
   background: 1em 1.3em;
   padding: 0 2.5em;
   line-height: 2;
   font-size: 16pt;
   height: 100%;
}

div#success-banner {
   border: 1px solid #0a0;
   background-color: #efe;
   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAXElEQVQoU43Q0Q2AMAhF0ctuzuAIDuUInaG71bxgIza0yldDTh4U408Vmn26QpNZwxtRVzAgTixPHJCPVnMPKyTogXoJT5DDg8YW/l5BO43X8EbHE/Q+j3CS1JMv8+cdwhI0u8AAAAAASUVORK5CYII=);
}

div#info-banner {
   border: 1px solid #b3b300;
   background-color: #ffff99;
   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAASElEQVQoU2NkQAIyUgz/kflPnjEwwvhwBkgRsgRIAbIYWCGyAMxUmCaYHCO6SegKYQbRQSGyr2FskHOI9wyyLoLBg6wYV4ADADjtPd818mu5AAAAAElFTkSuQmCC);
}

div#error-banner {
   border: 1px solid #faa;
   background-color: #fee;
   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAW0lEQVQoU2WP0RHAIAhDw2p1brsavWBjI/X8QHyBJCaQF4Coe54Ekp1QUQ8D1b9Xv/BSCHRgALFXOEiYEwi8ws9Hn2DTV+kAg7jHw5NWdI87nXv4haGqA/KivwdRJCZ+CP987AAAAABJRU5ErkJggg==);
}

li a:link, li a:visited {
   font-weight: bold;
   color: #00c;
   text-decoration: none;
}

li a:hover, li a:active {
   font-weight: bold;
   color: #00f;
   text-decoration: underline;
}

.center {
    text-align: center;
}

.big {
    font-size: 12pt;
}


/*
------------ Sidebar ------------
*/
#sidebar {
   z-index: 15;
   height: 100%;
   width: 18em;
   position: fixed;
   top: 0;
   background-color: white;
   border-right: 5px solid #006ABC;
}

input#sidebar-toggle:checked ~ #sidebar {
   left: 0;
   transition: left 200ms;
   -webkit-transition: left 200ms;
   transition-timing-function: ease-in-out;
}

input#sidebar-toggle:not(:checked) ~ #sidebar {
   left: -18em;
   transition: left 200ms;
   -webkit-transition: left 200ms;
   transition-timing-function: ease-in-out;
}

span.sidebar_button_span {
   position: absolute;
   top: 50%;
   left: 17.3em;
   margin-top: -21px;
}

input#sidebar-toggle:checked ~ div#sidebar label#sidebar-label span#open_button {
   display: none;
}

.sidebar_button {
	background-color:#7892c2;
	border-radius:42px;
      -moz-border-radius:42px;
      -webkit-border-radius:42px;
	border:1px solid #4e6096;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
   font-family: Arial, serif;
	font-size:17px;
	font-weight:bold;
	padding:10px 5px;
	text-decoration:none;
	text-shadow:0 1px 0 #283966;
}

.sidebar_button:hover {
	background-color:#476e9e;
}

.sidebar_button:active {
	position:relative;
	top:1px;
}

div#top {
   position: relative;
   left: 18px;
   top: 8px;
}

div#top div#logo {
   float: left;
   margin-top: 12px;
   width: 17em;
   height: 4em;
   background: url(/images/portal.png) no-repeat;
}

div#login {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 445px;
    height: 280px;
    margin-left: -223px;
    margin-top: -200px;
}

div#login-logo {
    width: 100%;
    height: 110px;
    background: url(/images/login_banner.png) no-repeat 50% 50%;
}

div#dev-login-logo {
    width: 100%;
    height: 110px;
    background: url(/images/dev_login_banner.png) no-repeat 50% 50%;
}

div#sidebar div#clock p {
   text-align: center;
   color: blue;
   font-weight: bold;
}

div#nav ul {
   padding-left: 0;
}

div#nav ul li {
   list-style: none;
}

div#nav ul li ul li a {
   font-size: 10pt;
   padding: 3px 0 3px 2em;
}

div#nav a {
   padding: 8px 8px 8px 8px;
   text-decoration: none;
   font-size: 20px;
   color: blue;
   display: block;
}

div#nav a:link, #nav a:visited {
   background: white;
}

div#nav a:hover {
   color: black;
   background: #f0f0f0;
}

div#nav a:active {
   color: black;
}

div#nav ul.menu-list a.current {
   background: #ccddff;
   color: black;
   font-weight: bold;
}

div#nav ul.menu-list a.current-parent {
   background: #ccddff;
   color: black;
   font-weight: bold;
}

div#nav ul.menu-list ul.menu-list a.current {
   background: #d0d0d0;
}

/*
------------ Top Menu Bar -------------
*/

div#top-menu {
   position: sticky;
   top: 0;
   z-index: 5;
   margin-bottom: 2em;
   background: white;
   border-bottom: 3px solid #acf;
   text-transform: uppercase;
   font-weight: bold;
   overflow: auto;
}

div#top-menu:empty {
   display: none;
}

input#sidebar-toggle:checked ~ div#top-menu {
   margin-left: 18em;
   transition: margin-left 200ms;
   -webkit-transition: margin-left 200ms;
   transition-timing-function: ease-in-out;
}

input#sidebar-toggle:not(:checked) ~ div#top-menu {
   margin-left: 0;
   transition: margin-left 200ms;
   -webkit-transition: margin-left 200ms;
   transition-timing-function: ease-in-out;
}

div#top-menu ul {
   border-left: 1px solid #acf;
   margin: 0;
   padding: 0 18em 0 1.25em;
   list-style-type: none;
}

div#top-menu ul li {
   float: left;
   line-height: 18pt;
}

div#top-menu ul li a {
   display: block;
   border-right: 1px solid #acf;
   background: white;
   padding: 0 1em;
   color: black;
   text-decoration: none;
}

div#top-menu ul li:last-child a {
   border-right: none;
}

div#top-menu ul li a:hover, div#top-menu ul li a:active {
   color: #008;
   background-color: #acf;
}

div#top-menu ul.top-menu-list a.current {
   background: #ccddff;
   color: black;
   font-weight: bold;
}

#top-menu-content {
   position: fixed;
   top: 3px;
   right: 1em;
}

/*
------------ Sections ------------
*/
#toolbar {
   overflow: auto;
}

div.section {
   overflow: auto;
   margin-bottom: 1.5em;
}

div.section h1 {
   text-transform: uppercase;
   margin: 2pt;
   font-size: 10pt;
   font-weight: bold;
}

div.section-content h2 {
   color: black;
   text-transform: uppercase;
   font-weight: bold;
   font-size: 10pt;
   padding: 2pt;
   border-bottom: 1px solid #ACF;
   margin-top: 0;
   margin-bottom: 1em;
}

div.section div.section-content {
   box-shadow: 0 0 12px 0 #ACF;
   background: white;
   overflow: auto;
   padding: 1em;
   border: 1px solid #006ABC;
}


/*
------------ Forms ------------
*/

#company-logo {
   width:100%;
}

.no-breaks {
   white-space: nowrap;
}

div.form-header {
   background: white;
   color: black;
   border-bottom: 1px solid #acf;
   font-weight: bold;
   padding: 2pt;
   font-size: 8pt;
   text-transform: uppercase;
   margin-bottom: 1em;
}

DIV.form-row {
	clear: left;
	overflow: auto;
	padding-bottom: 0.5em;
	margin-bottom: 0.5em;
}

DIV.form-row .label {
	float: left;
	display: block;
	color: #00A;
	padding-top: 0.8em;
	line-height: 100%;
	margin-right: 1.2em;
	text-align: right;
}

DIV.form-row .container {
   padding-top: 3px;
	float: left;
}

DIV.form-row .container SPAN, DIV.form-row .container a {
	line-height: 200%;
}


DIV.form-break {
	height: 1.5em;
}

INPUT, SELECT {
	font-family: "Noto Sans", "Arial", "Helvetica", sans-serif;
	font-size: 9pt;
}

INPUT.checkbox, INPUT.radiobutton {
	position: relative;
	top: 2px;
	margin-bottom: 0.5em;
}

.checklistbox {
   border: 1px solid #006abc;
   background: #fcfcff;
   margin: 0 3px 3px 0;
   box-shadow: 0 0 5px 0 #acf;
   overflow-y: scroll;
   width: 388px;
}

.checklistbox .inner {
   padding: 9px;
}

INPUT.text, TEXTAREA, INPUT[type=search]
{
	border: 1px solid #006ABC;
	background: #FCFCFF;
	padding: 4px;
	margin-top: 3px;
	margin-bottom: 3px;
	box-shadow: 0 0 5px 0 #ACF;
}

INPUT.checklistsearch {
   width: 380px;
   padding: 4px;
   margin: 0;
   border-bottom: none;
}

INPUT.text:focus, TEXTAREA:focus
{
	outline: none;
}

SELECT
{
	border: 1px solid #006ABC;
	background: #FCFCFF;
	padding: 4px;
	margin-top: 3px;
	margin-bottom: 3px;
	box-shadow: 0 0 5px 0 #ACF;
}

SELECT:focus
{
	outline: none;
}

.button, INPUT.link
{
	appearance: button;
}

div.tankShapeRow {
   display: none;
}

.horizontal-scroll {
   overflow-x: scroll;
   max-height: 5.5in;
}

.float-left {
   float:left;
}

.MenuHelp {
   float:right;
}

#map {
   z-index: 3;
   float:right;
   width: 400px;
   height: 400px;
   margin: 2em;
   box-shadow: 0 0 4px 4px rgba(0,0,0,0.2);
}

div#full-map {
   width: 100%;
   height: 4in;
   margin-bottom: 2em;
}

/*---- Emails ----*/

input#enable_daily:not(:checked) ~ div.daily_reports {
   display: none;
}
input#enable_weekly:not(:checked) ~ div.weekly_reports {
   display: none;
}


/*----- Toolbars -----*/

.toolbar {
   margin: -12px -12px -12px -12px;
   padding: 12px;
}

.toolbar .right-side {
   float: right;
   overflow: auto;
   width: 45%;
}

.toolbar .right-side input, .toolbar .right-side a {
   float: right;
   margin-left: 12px;
}

/*----- Fancy Buttons -----*/

input.button,
a:link.link-button, a:visited.link-button,
a:hover.link-button, a:active.link-button {
   font-size: 10pt;
   color: black;
   border-radius: 2px;
   border: 1px solid #999;
   background: #e8e8e8; /* Old browsers */
   background: -moz-linear-gradient(top, #e8e8e8 2%, #f7f7f7 10%, #dbdbdb 100%, #e2e2e2 100%); /* FF3.6-15 */
   background: -webkit-linear-gradient(top, #e8e8e8 2%,#f7f7f7 10%,#dbdbdb 100%,#e2e2e2 100%); /* Chrome10-25,Safari5.1-6 */
   background: linear-gradient(to bottom, #e8e8e8 2%,#f7f7f7 10%,#dbdbdb 100%,#e2e2e2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#e2e2e2',GradientType=0 ); /* IE6-9 */
   text-decoration: none;
   padding: 3px 8px;
   margin-left: 12px;
   cursor: default;
}

input.button:active,
a:active.link-button {
   background: #e2e2e2; /* Old browsers */
   background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 0%, #f7f7f7 90%, #e8e8e8 98%); /* FF3.6-15 */
   background: -webkit-linear-gradient(top, #e2e2e2 0%,#dbdbdb 0%,#f7f7f7 90%,#e8e8e8 98%); /* Chrome10-25,Safari5.1-6 */
   background: linear-gradient(to bottom, #e2e2e2 0%,#dbdbdb 0%,#f7f7f7 90%,#e8e8e8 98%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#e8e8e8',GradientType=0 ); /* IE6-9 */
   cursor: default;
}

/*---Toggle Header---*/

div.toggleHeader {
   padding-left: 2em;
   margin-left: 1em;
   margin-right: 3em;
   text-transform: capitalize;
   border-radius: 5px;
}

div.downarrow {
   position:relative;
   margin: 0;
   left: -17px;
   top: 13px;
   height: 10px;
   width: 10px;
   content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAASUlEQVQoU2NkIBIwgtRN6ZnyH5/6nJIcRtIU/v/////U3qlYDc0uzmZgBAGQLEkKQRrQTQWZBgIoJpKkEFkxzDSsJhJUSEyYAwCYAzILhc256AAAAABJRU5ErkJggg==);
}

div.uparrow {
   position:relative;
   margin: 0;
   left: -17px;
   top: 13px;
   height: 10px;
   width: 10px;
   content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAS0lEQVQoU2NkIBIwgtT9////P0z91N6pYGZ2cTbcCEYQIEshzDSYUTBTMUwkSiG6ImRTUUwkSuGUnilwX2MLrZySHIiviVZITJgDAFxdMgu3kjByAAAAAElFTkSuQmCC);
}

span.permission.headerSpan {
   float: right;
   margin: 0 0 0 0;
   padding-bottom: 1px;
}

div.toggleHeader:hover {
   cursor: pointer;
   background-color: #eee;
}


/*--Tank Levels---*/

div.tank-box-separator {
   float: left;
   margin: 0;
   width: 1px;
   height: 100%;
   background: #acf;
}

div.tank-box-container {
   float: left;
   margin: 0 1em 1em 0;
   padding: 0.5em 0.5em 0.5em 1em;
   border-right: 1px solid #acf;
}

div.tank-box-container:last-child {
   border: none;
}

div.tank-box-container h4 {
   margin: 0;
   text-align: center;
   font-size: 11pt;
   font-weight: bold;
}

div.tank-box-container h3 {
   margin: 6pt 0 10pt 0;
   text-align: center;
   font-size: 9pt;
   font-weight: normal;
}

div.tank-box {
   float: right;
   width: 60px;
   height: 100px;
   background: url(/images/tanklines.png) no-repeat 41px 50%;
}

div.tank-unfilled,
div.tank-filled {
   width: 16px;
   margin-left: 22px;
   margin-right: 22px;
   border: 1px solid #00a;
}

div.tank-filled {
   background: #00a;
}

div.light {
   color: #999;
}

table.tank-data {
   float: left;
   border-collapse: collapse;
   margin-top: 1em;
   margin-bottom: 1em;
}

table.tank-data tr td {
   font-size: 8pt;
   padding-top: 0.25em;
   padding-bottom: 0.25em;
}

table.tank-data tr:nth-child(2n-1) {
   background: #fcfcfc;
}

table.tank-data tr td:first-child {
   padding-right: 0.55em;
   text-align: right;
   color: #008;
   width: 50%;
   font-weight: bold;
}

table.tank-data tr td:last-child {
   padding-left: 0.3em;
   text-align: left;
   width: 50%;
}


/*
------------ Tables ------------
*/

td.min-cell {
   white-space: nowrap;
   width: 1%;
}

.sticky-header, .sticky-header tr td {
   position: -webkit-sticky;
   position: sticky;
   top: 0;
   background: white;
   border-right: 2px solid #acf;
}

.sticky-header tr:last-child td {
   top: 2em;
}

table a:visited {
   color: blue;
}

table.row-shading tbody tr:nth-child(2n-1) {
   background-color: #FAFAFA;
}

table.tablesorter thead tr:last-child .tablesorter-header {
   cursor: pointer;
   background: white url(/images/black/no-sort.gif) no-repeat center right;
   padding-right: 1.5em;
}

table.tablesorter thead tr:last-child .tablesorter-headerAsc {
   background-image: url(/images/black/asc.gif);
}

table.tablesorter thead tr:last-child .tablesorter-headerDesc {
   background-image: url(/images/black/desc.gif);
}

table.tablesorter thead tr:last-child .sorter-false {
   background-image: none;
}


table.data tbody tr:nth-child(2n-1) {
   background: #fafafa;
}

table.data thead tr td {
   color: black;
   font-weight: bold;
   padding: 4px;
}

table.data thead tr:last-child td {
   border-bottom: 2px solid #acf;
}

table.data thead tr td.double-header-top {
   text-align: center;
   border-bottom: none;
   border-left: 2px solid #acf;
   border-right: 2px solid #acf;
}

table.data thead tr td.double-header-top.last {
   border-right: none;
}

table.data thead tr td.double-header-bottom.first {
   border-left: 2px solid #acf;
}

table.data thead tr td.double-header-bottom.last {
   border-right: 2px solid #acf;
}

table.data tbody tr td {
   padding: 4px;
}

table.data tbody tr.error td {
   background: #fee;
}

.highlight {
   background: #dfd;
}

table.data tbody tr td.border-left {
   border-left: 2px solid #acf;
}

.fb-slave td:first-child:before {
   content: '\2022\00a0\00a0';
}

.fb-slave td:first-child{
   padding-left: 18px;
   /*background: url(/images/node.png) no-repeat 8px 4px;*/
}

.fb-slave-last td:first-child{
   /*background: url(/images/lastnode.png) no-repeat 8px 4px;*/
}
*/

/*------ DataTables Extension -----*/

.dataTables_info::after {
   content: ". ";
}

.dataTables_length label::after {
   content: " per page.";
}

.dataTables_length {
   margin-left: 0.5em;
   line-height: 3;
}

/*------ Accounts table ------*/

.permission {
   cursor: default;
   padding: 5px;
   margin: 3px 2px;
   font-size: 8pt;
   white-space: nowrap;
   border-radius:5px;
}

span.permission.allow {
   background: #e8ffe8;
}

span.permission.deny {
   background: #ffe8e8;
}

span.permission.maybe {
   background: #ffc;
}

span.permission span.number {
   font-weight: bold;
   padding-right: 2px;
   color: black;
}

span.permission span.name {
   font-weight: normal;
   color: black;
}

div.product-container {
   overflow: auto;
}

div.product-wrapper {
   float: left;
   width: 25%;
   height: 135px;
}

div.product-display {
   margin: 0.5em;
}

div.product-display h1 {
   text-align: center;
   font-size: 12pt;
   font-weight: bold;
   margin: 0 0 0.3em 0;
}

div.product-display h2 {
   background: none;
   text-align: center;
   font-size: 10pt;
   font-weight: normal;
   margin: 0 0 0.5em 0;
   border: none;
   color: black;
}

div.product-display p {
   text-align: center;
   margin: 0;
}

div.product-display p.totalizer {
   font-weight: bold;
   font-size: 10pt;
}

/*------ Info-Table ------*/

div.info-table {
}

table.data tbody tr.top-separator td {
   border-top: 1px solid #00a;
}

div.info-table div.label, div.info-table div.text {
   display: block;
   float: left;
   margin-bottom: 0.6em;
}

div.info-table div.label {
   width: 17em;
   text-align: right;
   text-transform: uppercase;
   font-size: 8pt;
   padding-right: 18px;
   line-height: 26px;
   color: #008;
}

div.info-table div.text {
   line-height: 24px;
   margin-right: 18px;
}

div.info-table br {
   clear: left;
}

/*------ Report Table -----*/

#reporttable div h2 {
   display: block;
}

#reporttable-selector {
   display: none;
   position: absolute;
   right: 44px;
   top: 130px;
   width: 16em;
   height: 3in;
   background: white;
   z-index: 10000;
   overflow-y: scroll;
   border: 4px solid #eee;
   outline: 1px solid #00a;
}

#reporttable-selector div.container {
   padding: 8px;
   background: white;
   overflow: auto;
}

/* ----- Delivery Table ----- */
#deliverytable {
   border-collapse: collapse;
}

#deliverytable td:not(:last-child) {
   border-right: 2px solid #acf;
}

table.vertical-separators tbody tr td {
   border-left: 1px solid #eee;
}

table.data tbody tr td.border-left {
   border-left: 2px solid #acf;
}

table.data tbody tr td.border-right {
   border-right: 4px solid #acf !important;
}

/*
------------ Pop-up Help Menues ------------
*/
div.section .menu-help {
   float: left;
   width: 22em;
   margin: 0 0.5em;
}

div.section .menu-help h1 {
   background: none;
   color: #00A;
   border: none;
   padding: 0;
}

div.section .menu-help p {
   margin: 0.5em 0.5em 1em 0.5em;
   padding: 0;
}

.arrow_box {
   float: right;
   clear: right;
   margin-left: 1em;
   position: relative;
   background: #FFFFDE;
   border: 1px solid #000000;
   padding: 4px;
}

.arrow_box:after, .arrow_box:before {
   right: 100%;
   top: 50%;
   border: solid transparent;
   content: " ";
   height: 0;
   width: 0;
   position: absolute;
   pointer-events: none;
}

.arrow_box:after {
   border: 7px rgba(255, 255, 222, 0);
   border-right-color: #FFFFDE;
   margin-top: -7px;
}

.arrow_box:before {
   border: 8px rgba(0, 0, 0, 0);
   border-right-color: #000000;
   margin-top: -8px;
}

.arrow_box.form-error {
   background: #FEE;
}

.arrow_box.form-error:after {
   border-right-color: #FEE;
}

ul.tree, ul.tree ul.tree {
   /*background: url(/images/vline.png) repeat-y;*/
   background: transparent;
   padding: 0;
   margin: 0;
}

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

ul.tree li {
   list-style-type: none;
   padding-left: 12px;
   line-height: 15px;
   /*background: url(/images/node.png) no-repeat;*/
   background: transparent;
}

ul.tree li:last-child {
   /*background: white url(/images/lastnode.png) no-repeat;*/
   background: transparent;
}

/*
 ------ XML Syntax Highlighting ---------
*/

pre.code {
   background-color: #ffffff;
}

.code-xml-symbol {
   color: #0036d9;
}

.code-xml-version-tag {
   color: #1a0066;
}

.code-xml-tag {
   color: #0040ff;
}

.code-xml-closing-tag {
   color: #0040ff;
}

.code-xml-attr-name {
   color: #00b32d;
}

.code-xml-attr-value {
   color: #00d9a3;
}

.code-xml-brackets {
}