/*
 * Flex Layout - https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
 */
html, body {
 margin: 0;
 height: 100%;
 }
body {
 display: flex;
 flex-direction: column;
 height: 100%;
// line-height: 1.42857143;
// line-height: 1.6;
 }
header,
nav,
footer {
 flex: none;
 }
main {
 flex: 1 0 auto;
 width: 100%;
 position: relative;
 }

/*
 * Main Styles
 */
body {
 -webkit-font-smoothing: antialiased;
 font: normal 14px 'Source Sans Pro', sans-serif;
/* line-height: 17px; */
 background-color: #eeeeee;
 }
header {
 margin-top: 10px;
 margin-bottom: 10px;
 color: #000000;
 }
footer {
 margin-top: 20px;
 padding-top: 20px;
 padding-bottom: 20px;
 background-color: #f5f5f5;
 }
#logo img {
 width: 220px;
 height: 147px;
 }
#title {
 font-family: 'Source Sans Pro', sans-serif;
 font-weight: 300;
 font-size: 48px;
 line-height: 67px;
 }
#tag {
 font-family: 'Source Sans Pro', sans-serif;
 font-weight: 300;
 font-size: 36px;			
 line-height: 43px;
 }
.content_title {
 margin: -10px -10px 0px -10px;
 padding: 5px 15px 0px 15px;
 height: 35px;
 background-color: #892836;
 -moz-border-radius: 20px 20px 0px 0px;
 -webkit-border-radius: 20px 20px 0px 0px;
 -khtml-border-radius: 20px 20px 0px 0px;
 border-radius: 20px 20px 0px 0px;
// font-family: 'Source Sans Pro', sans-serif;
 font-size: 20px;
// font-weight: 300;
/* line-height: 26px;*/
 color: #FFFFFF;
 white-space: no-wrap;
 overflow: hidden;
}
.content_subtitle {
 margin-bottom: 5px;
 border-bottom: 1px solid #892836;
 font-size: 16px;
 font-weight: 700;
}
.content {
 margin: 0px -10px 20px -10px;
 padding: 5px 10px 10px 10px;
 border: 1px solid #78787b;
 -moz-border-radius: 0px 0px 20px 20px;
 -webkit-border-radius: 0px 0px 20px 20px;
 -khtml-border-radius: 0px 0px 20px 20px;
 border-radius: 0px 0px 20px 20px;
 border-top: 0;
 background-color: #ffffff;
 }
.rowborder {
// border-bottom: 1px solid #78787b;
 margin-bottom: 10px;
 }

/*
 * Navigation
 */
nav {
 margin: 0;
 margin-bottom: 20px;
 }
.affix {
 position: fixed;
 top: 0;
 width: 100%;
 }
.navbar {
 border-top: 1px solid; /* #892836;*/
 border-bottom: 1px solid; /* #892836;*/
 border-radius: 0;
 }
.navbar-default {
 background-color: #ffffff;
// min-height: 70px;
 border-color: #892836;
 border-left: 0px;
 border-right: 0px;
 }
/*
.navbar-default.affix {
 background-color: rgba(255, 255, 255, 0.8);
 }
*/
/*
.navbar-default .navbar-toggle {
 margin: 17px 15px 17px 0;
 }
*/
.navbar-brand {
 display: none;
 padding: 5px 15px;
 }
.navbar-brand > a > img {
 height: 40px;
 }
.navbar-default .navbar-collapse:not(.collapsing):not(.in) .navbar-nav {
// margin: 9px 0;
 }
.navbar-default .navbar-nav li a {
// font-size: 13px;
 letter-spacing: 0px;
 }
@media (min-width: 768px) {
 .top-nav > li > a {
  padding-left: 5px;
  padding-right: 10px;
  }
}

/*
 * Caret Dropdown
 */
/* https://stackoverflow.com/a/28100001 */
.dropdown-toggle.dropdown-caret,
.dropdown-toggle.disabled {
 display: inline-block !important;
 }

/*
 * Tabs
 */
.works-nav {
 margin: 0px 15px 10px 15px;
 }
.works-nav > li > a {
 border: 1px solid #892836;
 border-radius: 8px 8px 0 0;
 color: #777777;
 }
.works-nav > li > a:hover {
 border: 1px solid #892836;
 color: #000000;
 }
.works-nav > li > a {
 background-color: #78787b;
 color: #ffffff;
 cursor: default;
 border: 1px solid #ddd;
 border-bottom-color: transparent;
 }
.works-nav > li > a:hover,
.works-nav > li > a:focus {
 background-color: #892836;
 color: #ffffff;
 cursor: default;
 }
.works-nav > li.active > a,
.works-nav > li.active > a:hover,
.works-nav > li.active > a:focus {
 background-color: #892836;
 color: #ffffff;
 cursor: default;
 border: 1px solid #ddd;
 border-bottom-color: transparent;
}

/*
 * Tables
 */
.table {
 margin-bottom: 0;
 }
tr.link {
 cursor: pointer;
 }
th.dateinput, td.dateinput {
 min-width: 100px;
 width: 100px;
 }
.dateinput input {
 width: 100px;
 }
th.qtyinput, td.qtyinput {
 min-width: 50px;
 width: 50px;
 }
.qtyinput input {
 width: 50px;
 text-align: center;
 }
th.costinput, td.costinput {
 min-width: 70px;
 width: 70px;
 }
td.costinput {
 text-align: right;
 }
.costinput input {
 width: 70px;
 text-align: right;
 }
th.textinput, td.textinput {
 min-width: 100px;
 width: 100px;
 }
.textinput input {
 width: 100px;
 }
th.doubleinput, td.doubleinput {
 min-width: 150px;
 width: 150px;
 }
.doubleinput select {
 float: left;
 display: inline-block;
 width: 70px;
 }
.doubleinput input {
 float: left;
 display: inline-block;
 width: 70px;
 }
th.noteinput, td.noteinput {
 min-width: 400px;
 width: 400px;
 }
.noteinput input {
 width: 400px;
 }
.control-label, 
.vone-label {
 font-weight: 700;
 }
textarea.form-control {
 min-height: 60px;
 }
.descriptiondiv input, 
.descriptiondiv textarea, 
.qtydiv input, 
.ratediv input, 
.doubleratediv input {
 width: 100% !important;
 }
.qtydiv {
 width: 10%;
 }
.doubleratediv {
 width: 20%;
 }
.ratediv {
 width: 15%;
 }
.valuediv {
 width: 10%;
 }
td.valuediv {
 text-align: right;
 }
.plusdiv {
 width: 5%;
 }

/*
 * Forms
 */
.input-group .form-control.shorter {
 width: 50%;
 }

/*
 * Font Awesome / Glyphs
 */
.fas,
.glyphicon {
 color: #892836;
 }
.fa-danger, 
.fas-danger {
 color: #a94442;
 }
.fa-success, 
.fas-success {
 color: #3c763d;
 }
.fa-red, 
.fas-red, 
.active:not(.tab-pane) .fas.fas-red {
 color: #ff0000;
 }
.fa-green, 
.fas-green,
.active:not(.tab-pane) .fas.fas-green {
 color: #00cc00;
 }
.active:not(.tab-pane) .fas,
.active:not(.tab-pane) .glyphicon {
 color: #ffffff;
 }
.glyphicon-ok, .glyphicon-ok-circle {
 color: green;
 }
.content_title > .glyphicon {
 color: white;
 }
.glyphicon-success {
 color: green;
 }

/*
 * Back To Top
 */
#back-to-top a {
 display: none;
 z-index: 500;
 width: 40px;
 height: 40px;
 text-align: center;
 font-size: 22px;
 position: fixed;
 bottom: -40px;
 right: 20px;
// color: #ffffff;
 line-height: 35px;
 -webkit-border-radius: 50%;
 -moz-border-radius: 50%;
 -ms-border-radius: 50%;
 border-radius: 50%;
 background-color: #892836;
 }
#back-to-top.show a {
 bottom: 20px;
 display: block;
 }
#back-to-top .fa {
 color: #ffffff;
 }

/*
 * Buttons
 */
.btn.disabled {
 opacity: .30;
 }
.btn.likedisabled, .btn-default[likedisabled] {
 cursor: not-allowed;
 filter: alpha(opacity=65);
 -webkit-box-shadow: none;
 box-shadow: none;
 opacity: .65;
 }
.btn-default.disabled.focus, 
.btn-default.likedisabled:focus, 
.btn-default.likedisabled:hover, 
.btn-default[likedisabled].focus, 
.btn-default[likedisabled]:focus, 
.btn-default[likedisabled]:hover {
 background-color: #fff;
 border-color: #ccc;
 }
.btn-primary {
 background-color: #892836;
 border-color: #892836;
 color: #ffffff;
 }
.btn-primary:hover {
  background-color: #78787b;
  border-color: #78787b;
  color: #ffffff;
 }
.btn-primary > span.fa, 
.btn-primary > span.fas, 
.btn-primary > span.glyphicon {
 color: #ffffff;
 }
.btn.disabled {
 opacity: .30;
 }
.btn-default.active {
 background-color: #892836;
 color: #ffffff;
 }
.input-group-btn .btn-group .btn {
 border-radius: 0;
 }
/* https://stackoverflow.com/a/38267914 */
.btn-matrix {
 width: 100%;
 }
.btn-matrix > .btn {
 width: 25%;
 padding-top: 20px;
 padding-bottom: 20px;
 }
.btn-matrix > .btn:nth-child(4n+5) {
 clear: left;
 margin-left: 0;
 }
.btn-matrix > .btn:nth-child(n+5) {
 margin-top: -1px;
 }
.btn-matrix > .btn:first-child {
 border-bottom-left-radius: 0;
 }
.btn-matrix > .btn:nth-child(4) {
 border-top-right-radius: 4px !important;
 }
.btn-matrix > .btn:nth-last-child(4) {
 border-bottom-left-radius: 4px !important;
 }
.btn-matrix > .btn:last-child {
 border-top-right-radius: 0;
 }


.vone {
 font-family: 'Open Sans', sans-serif;
 font-weight: 400;
 font-style: italic;
// line-height: inherit;
// color: #1e2f4a !important;
// color: #4f82e9 !important;
 color: #000 !important;
// color: #fff !important;
 text-transform: lowercase;
 }
.vone span {
 margin-left: 2px;
 font-weight: 700;
 font-style: normal;
// color: #163C88 !important;
 color: #365899 !important;
 text-transform: lowercase;
 }

.text-bold {
 font-weight: bold;
 }
a, span.link {
	text-decoration: none;
	font-weight: normal;
	color: #000000;
	}
a:hover, span.link:hover {
	color: #892836;
	}
img {
	border: 0;
	vertical-align: text-top;
	}
h1 {
	margin: 5px 0px 5px 0px;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 26px;
	font-weight: 300;
	line-height: 36px;
	}
#debug {
	font-size: 8pt;
	background-color: #000000;
	color: white;
	}

/*
 * Size Tweaks
 */
@media only screen and (max-width : 767px) {
 .toggle-xs {
  display: none;
  }
 #logo img {
  width: 159px;
  height: 106px;
  }
 .form-inline .input-group {
  display: inline-table;
  vertical-align: middle;
  }
 .form-inline .input-group .form-control, .form-inline .input-group .input-group-addon, .form-inline .input-group .input-group-btn {
  width: auto;
  }
}
@media only screen and (min-width : 768px) and (max-width : 1199px) {
 #logo img {
  width: 187px;
  height: 125px;
  }
 #title {
  font-size: 41px;
  line-height: 57px;
  }
 #tag {
  font-size: 31px;			
  line-height: 37px;
  }
 .form-inline .vone-label, 
 .form-horizontal .vone-label {
  text-align: right;
  padding-top: 7px;
  margin-bottom: 0;
  }
}
@media only screen and (min-width : 1200px) {
 .vone-label {
  text-align: right;
  }
}

.form-control, 
.input-group-addon,
.btn-default,
.btn-primary {
 border-color: #892836;
 border-color: #78787b;
}


.traffic { position: relative; }
.traffic:hover .traffic-light, .traffic:focus .traffic-light, .traffic:active .traffic-light { display: block; }
.traffic-light { height: 62px; width: auto; padding: 10px; position: absolute; top: -63px; left: -40px; box-shadow: 1px 1px 2px #cccccc, -1px 0 2px #eeeeee; border-radius: 44px 44px; display: none; background: #e7e7e7; border: 1px solid rgb(173, 173, 173); }
.traffic:hover .reaction, .traffic:focus .reaction, .traffic:active .reaction { opacity: 1; }
.light { list-style-type: none; cursor: pointer; display: table-cell; position: relative; text-align: center; padding-left: 5px; padding-right: 5px; }
.light-active-danger, .light-active-warning, .light-active-success, .light:hover { transform: scale(1.3, 1.3); top: 0; }
.light::before { display: inline-block; color: #ffffff; text-align: center; min-width: 80%; line-height: 17px; font-size: .6em; height: 17px; margin-left: auto; margin-right: auto; padding-left: 5px; padding-right: 5px; background-color: rgba(0, 0, 0, 1); border-radius: 20px; position: absolute; top: -20px; opacity: 0; transition: opacity .2s ease-in-out 0s; }
.light:hover::before, .light:focus::before, .light:active::before { opacity: 1 }
.light-danger:before { content: 'Health & Safety issues – Urgent Remedial Repairs required' }
.light-danger::after { font-family: 'Font Awesome 5 Free'; content: "\f111"; font-size: 2em; color: #bd0903;}
.light-active-danger::after, .light-danger:hover::after, .light-danger:focus::after, .light-danger:active::after { color: #fc625d;}
.light-warning::before { content: 'Caution – We will quote to replace' }
.light-warning::after { font-family: 'Font Awesome 5 Free'; content: "\f111"; font-size: 2em; color: #a26d02;}
.light-active-warning::after, .light-warning:hover::after, .light-warning:focus::after, .light-warning:active::after { color: #fdbe40;}
.light-success::before { content: 'To be monitored on next PPM inspection' }
.light-success::after { font-family: 'Font Awesome 5 Free'; content: "\f111"; font-size: 2em; color: #15511e;}
.light-active-success::after, .light-success:hover::after, .light-success:focus::after, .light-success:active::after { color: #34cb4a;}