/**********************************************************************************

	Project Name: HST Pro
	Project Description: Web Application for HST Software
	Developer: DS NETWORK
	Author: AMIT PATEL
	Author URI: http://www.dsnetwork.ca
	Version: 1.0.0

**********************************************************************************/
/**********************************************************************************

	Project Name: HST Pro
	Project Description: Web Application for HST Software
	Developer: DS NETWORK
	Author: AMIT PATEL
	Author URI: http://www.dsnetwork.ca
	Version: 1.0.0
	
**********************************************************************************/
/***********************************************************************************************/
/* LESS Variables  */
/***********************************************************************************************/
/***********************************************************************************************/
/* LESS Mixins */
/***********************************************************************************************/
/* ******************************************************************************************* */
/* Body Styleing
/* ******************************************************************************************* */
html,
body {
  font: 14px/21px "Cabin", Helvetica, Arial, sans-serif !important;
  color: #454545;
  -webkit-font-smoothing: antialiased;
}
/**********************************************************************************

	Project Name: HST Pro
	Project Description: Web Application for HST Software
	Developer: DS NETWORK
	Author: AMIT PATEL
	Author URI: http://www.dsnetwork.ca
	Version: 1.0.0
	
**********************************************************************************/
/***********************************************************************************************/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
/***********************************************************************************************/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}
/***********************************************************************************************/
/* General Styling */
/***********************************************************************************************/
h1 {
  font: 36px/1.5em "Cabin", Helvetica, Arial, sans-serif;
}
h2 {
  font: 28px/1.5em "Cabin", Helvetica, Arial, sans-serif;
}
h3 {
  font: 21px/1.5em "Cabin", Helvetica, Arial, sans-serif;
}
h4 {
  font: 16px/1.5em "Cabin", Helvetica, Arial, sans-serif;
}
h5 {
  font: 14px/1.5em "Cabin", Helvetica, Arial, sans-serif;
}
h6 {
  font: 12px/1.5em "Cabin", Helvetica, Arial, sans-serif;
}
a {
  text-decoration: none;
  color: #454545;
}
input,
select {
  height: 32px;
  padding-left: 5px;
  margin: 0px;
  width: 65%;
  vertical-align: top;
}
input[type="text"],
input[type="password"] {
  border: 1px solid #dadada;
  background-color: #e8f5fd;
}
input[type="password"] {
  font: small-caption;
  font-size: 16px;
  font-weight: bold;
}
input.smallInput {
  width: 40%;
}
input.required {
  border-color: #cc3300;
}
.select2 {
  text-align: left !important;
}
label {
  margin: 0px;
}
textarea {
  width: 65%;
  border: 1px solid #dadada;
  background-color: #e8f5fd;
  min-height: 100px;
  overflow: hidden !important;
  resize: none !important;
  vertical-align: top;
}
.prel {
  position: relative;
}
.pabs {
  position: absolute;
}
.fl {
  display: block;
  float: left;
}
.fr {
  display: block;
  float: right;
}
.text-right {
  text-align: right;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-bold {
  font-weight: bold;
}
.hide-text {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
.mt-50 {
  margin-top: 50px;
}
.mt-30 {
  margin-top: 30px;
}
.mt-15 {
  margin-top: 15px !important;
}
.mt-10 {
  margin-top: 10px;
}
.mb-50 {
  margin-bottom: 50px;
}
.mb-15 {
  margin-bottom: 15px;
}
.pl-160 {
  padding-left: 160px !important;
}
.m-auto {
  margin: 0px auto;
}
.pl-20 {
  padding-left: 20px;
}
.pl-40 {
  padding-left: 40px;
}
.pl-0 {
  padding-left: 0px;
}
.pl-10 {
  padding-bottom: 10px !important;
}
.pt5 {
  padding-top: 5px !important;
}
.pr5 {
  padding-right: 5px !important;
}
/* //////////////////////////////////////////////////////////////////////////////////////
 * Bootstrap style modifications
 * ///////////////////////////////
 */
.container {
  padding-top: 130px;
  padding-bottom: 50px;
}
@media (min-width: 576px) {
  .container {
    max-width: 540px !important;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 720px !important;
  }
}
@media (min-width: 992px) {
  .container {
    max-width: 960px !important;
  }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1140px !important;
  }
}
@media (min-width: 1500px) {
  .container {
    max-width: 1440px !important;
  }
}
@media (min-width: 1900px) {
  .container {
    max-width: 1840px !important;
  }
}
/***********************************************************************************************/
/* ALERT MODAL DISPLAY */
/***********************************************************************************************/
.alertError {
  border-color: #cc0000 !important;
}
.alertError #popup_title {
  background-color: #cc0000;
}
.alertSuccess {
  border-color: #009933 !important;
}
.alertSuccess #popup_title {
  background-color: #009933;
}
.alertWarning {
  border-color: #ffaa00 !important;
}
.alertWarning #popup_title {
  background-color: #ffaa00;
}
.alertInfo {
  border-color: #0099cc !important;
}
.alertInfo #popup_title {
  background-color: #0099cc;
}
/***********************************************************************************************/
/* Auto Numeric styling
/***********************************************************************************************/
.autoNumeric-positive {
  color: #454545;
}
.autoNumeric-negative {
  color: #cc0000;
}
/***********************************************************************************************/
/* Class to show paid tickets in green in driver & broker bills
 	Class to show extra paid tickets in yellow in driver bills
/***********************************************************************************************/
.paidClass {
  background-color: rgba(0, 255, 0, 0.2) !important;
}
.partlyPaidClass {
  background-color: rgba(255, 255, 0, 0.2) !important;
}
.extraClass {
  background-color: rgba(0, 255, 255, 0.2) !important;
}
.printedClass {
  background-color: rgba(0, 255, 0, 0.2) !important;
}
.disabledClass {
  background-color: rgba(255, 0, 0, 0.2) !important;
}
/***********************************************************************************************/
/* Styles used for legend blocks
/***********************************************************************************************/
.legendBlock hr {
  border-color: black;
  width: 98%;
  text-align: center;
  margin: auto !important;
}
.legendBlock {
  font-weight: bold;
}
.legendSquare {
  border: 0.5px solid;
  border-color: black;
  display: inline-block;
  width: 50px;
  height: 25px;
  margin: 5px;
  vertical-align: middle;
}
/***********************************************************************************************/
/* Button Design
/***********************************************************************************************/
/*
//Large Square Button
.button-large {
	border: none;
	display: block;
	float: left;
	color: @color-text-white;
	cursor: pointer;
	height: 275px;
	width: 40%;
	padding: 10px;
	padding-top: 50px;
	margin: 0.5%;
	text-align: center;

	&:hover {
		font-weight: bold;
	}
}
.button-large h4 {
	font-size: 20px;
	line-height: 20px;
	font-weight: bold;
}

.button-medium {
	border: none;
	display: block;
	float: left;
	white-space: nowrap;
	color: @color-text-white;
	cursor: pointer;
	height: 200px;
	width: 22%;
	padding: 10px;
	padding-top: 30px;
	margin: 0.5%;
	text-align: center;

	&:hover {
		font-weight: bold;
	}
}
.button-medium h4 {
	font-size: 20px;
	line-height: 20px;
	font-weight: bold;
	margin: auto;
}

.button-small {
	border: none;
	display: block;
	float: left;
	white-space: nowrap;
	color: @color-text-white;
	cursor: pointer;
	height: 170px;
	width: 19%;
	padding: 10px;
	padding-top: 20px;
	margin: 0.5%;
	text-align: center;

	&:hover {
		font-weight: bold;
	}
}
.button-small h4 {
	font-size: 20px;
	line-height: 20px;
	font-weight: bold;
	margin: auto;
}
*/
/*
.bt2lineContainer {
	padding-top: 90px;
}
*/
.btrow {
  margin: 10px 0px 0px 0px !important;
  width: 100%;
  height: 52px;
  background-color: #fefefe;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#e5e5e5));
  background-image: -webkit-linear-gradient(top, #fefefe, #e5e5e5);
  background-image: -moz-linear-gradient(top, #fefefe, #e5e5e5);
  background-image: -o-linear-gradient(top, #fefefe, #e5e5e5);
  background-image: linear-gradient(to bottom, #fefefe, #e5e5e5);
  -webkit-box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.4);
}
.btrow .bt {
  display: inline-block;
  border: none;
  height: 50px;
  width: auto;
  min-width: 120px;
  text-align: center;
  padding: 0px 5px;
  line-height: 50px;
  float: right;
  font-weight: bold;
  cursor: pointer;
  margin: 0.15%;
  color: #fefefe;
}
.btrow .bt2line {
  line-height: 20px;
  padding: 5px;
}
.btrow2line {
  height: 103px;
}
.btrow-modal {
  width: 100%;
  height: 52px;
  background-color: #fefefe;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#e5e5e5));
  background-image: -webkit-linear-gradient(top, #fefefe, #e5e5e5);
  background-image: -moz-linear-gradient(top, #fefefe, #e5e5e5);
  background-image: -o-linear-gradient(top, #fefefe, #e5e5e5);
  background-image: linear-gradient(to bottom, #fefefe, #e5e5e5);
  -webkit-box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.4);
  margin-top: 10px;
}
.btrow-modal .bt {
  display: inline-block;
  height: 50px;
  width: auto;
  min-width: 120px;
  text-align: center;
  padding: 15px;
  line-height: 20px;
  float: right;
  font-weight: bold;
  cursor: pointer;
  margin: 0.15%;
  color: #fefefe;
}
.btrow-modal .bt2line {
  line-height: 20px;
  padding: 5px;
}
.btrow2line-modal {
  height: 104px;
}
.bt-filter {
  display: inline-block;
  border: none;
  height: 35px;
  width: auto;
  min-width: 80px;
  text-align: center;
  padding: 0px 5px;
  line-height: 35px;
  vertical-align: middle;
  font-weight: bold;
  cursor: pointer;
  color: #fefefe;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
.btSquare {
  display: inline-block;
  border: none;
  height: 100px;
  width: 100px;
  text-align: center;
  padding: 0px 5px;
  float: left;
  font-weight: bold;
  cursor: pointer;
  margin: 0.15%;
  color: #fefefe;
}
.borderButton {
  width: 32px !important;
  height: 32px !important;
  line-height: 32px !important;
  text-align: center !important;
  cursor: pointer !important;
}
.button-disabled {
  background-color: darkgrey !important;
  cursor: default !important;
}
.button-red {
  background-color: #cc3300;
}
.button-red:hover {
  background-color: #e63900;
}
.button-red:active {
  background-color: #a82a00;
}
.button-purple {
  background-color: #cc33ff;
}
.button-purple:hover {
  background-color: #d24dff;
}
.button-purple:active {
  background-color: #c30fff;
}
.button-blue {
  background-color: #0099ff;
}
.button-blue:hover {
  background-color: #1aa3ff;
}
.button-blue:active {
  background-color: #0084db;
}
.button-green {
  background-color: #009933;
}
.button-green:hover {
  background-color: #00b33c;
}
.button-green:active {
  background-color: #007527;
}
.button-magenta {
  background-color: #cc0066;
}
.button-magenta:hover {
  background-color: #e60073;
}
.button-magenta:active {
  background-color: #a80054;
}
.button-orange {
  background-color: #ff6600;
}
.button-orange:hover {
  background-color: #ff7b24;
}
.button-orange:active {
  background-color: #db5800;
}
.button-violet {
  background-color: #9933ff;
}
.button-violet:hover {
  background-color: #ab57ff;
}
.button-violet:active {
  background-color: #870fff;
}
.button-navyblue {
  background-color: #009999;
}
.button-navyblue:hover {
  background-color: #00bdbd;
}
.button-navyblue:active {
  background-color: #007575;
}
.button-yellow {
  background-color: #cca300;
}
.button-yellow:hover {
  background-color: #f0c000;
}
.button-yellow:active {
  background-color: #a88600;
}
.button1 {
  background-color: #979797;
  border: 2px solid #494949;
  font-weight: bold;
  color: #fefefe;
  font-size: 120%;
  height: 40px;
  padding: 5px;
}
.button1:hover {
  font-weight: bold;
  color: #979797;
  -webkit-box-shadow: 0 0 1px 0px rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 1px 0px rgba(0, 0, 0, 0.4);
}
.button3 {
  display: inline-block;
  padding: 0 10px;
  background-color: #0099ff;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#0099ff), to(#008ae6));
  background-image: -webkit-linear-gradient(top, #0099ff, #008ae6);
  background-image: -moz-linear-gradient(top, #0099ff, #008ae6);
  background-image: -o-linear-gradient(top, #0099ff, #008ae6);
  background-image: linear-gradient(to bottom, #0099ff, #008ae6);
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid #008ae6;
  height: 50px;
  width: 50px;
  line-height: 50px;
  font-weight: bold;
  text-transform: uppercase;
  color: white;
}
.button3:hover {
  color: #454545;
  background-color: #1aa3ff;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#1aa3ff), to(#0099ff));
  background-image: -webkit-linear-gradient(top, #1aa3ff, #0099ff);
  background-image: -moz-linear-gradient(top, #1aa3ff, #0099ff);
  background-image: -o-linear-gradient(top, #1aa3ff, #0099ff);
  background-image: linear-gradient(to bottom, #1aa3ff, #0099ff);
  cursor: pointer;
}
.button3:active {
  color: white;
  background-color: #0099ff;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#0099ff), to(#1aa3ff));
  background-image: -webkit-linear-gradient(top, #0099ff, #1aa3ff);
  background-image: -moz-linear-gradient(top, #0099ff, #1aa3ff);
  background-image: -o-linear-gradient(top, #0099ff, #1aa3ff);
  background-image: linear-gradient(to bottom, #0099ff, #1aa3ff);
}
/* //////////////////////////////////////////////////////////////////////////////////////
 * Menu Styles
 * ///////////////////////////////
 */
.logo {
  position: fixed;
  z-index: 900;
  top: 12px;
  left: 12px;
}
.logout {
  display: block;
  height: 100px;
  width: 100%;
  background-color: #494949;
  padding: 15px;
  position: fixed;
  top: 0;
  z-index: 690;
}
#logoutbtn {
  display: block;
  float: right;
  width: 120px;
  height: 40px;
  line-height: 40px;
}
.navigate {
  display: block;
  height: 30px;
  width: 100%;
  background-color: #979797;
  padding-left: 150px;
  position: fixed;
  top: 65px;
  z-index: 700;
}
.navigate li {
  float: left;
  display: block;
  height: 30px;
  line-height: 30px;
  width: 150px;
  text-align: center;
  background-color: #979797;
  color: #454545;
  margin: 0px 5px;
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
  margin-bottom: 5px;
}
.navigate li:hover {
  background-color: #979797;
  color: #fefefe;
}
.navigate ul li {
  height: 0px;
  display: block;
  overflow: hidden;
  width: 230px;
  background-color: #979797;
  margin: 0px;
  padding: 0px 5px;
}
.navigate ul li:hover {
  background-color: #494949;
}
.navigate ul li:hover a {
  color: #fefefe;
}
.b5 {
  border-bottom: 5px solid #494949;
}
.navigate ul {
  opacity: 1;
}
.navigate li:hover > ul {
  opacity: 1;
}
.navigate li:hover > ul li {
  height: 35px;
  overflow: visible;
}
/* //////////////////////////////////////////////////////////////////////////////////////
 * Footer Styles
 * ///////////////////////////////
 */
.foocontainer {
  background-color: #494949;
  height: 30px;
  position: fixed;
  overflow: hidden;
  bottom: 0;
  left: 0;
  width: 100%;
  border-top: 5px solid #979797;
  text-align: center;
  color: #fefefe;
  z-index: 999;
}
.foocontainer a {
  color: #fefefe;
}
.foocontainer a:hover {
  color: #979797;
}