body {
  color: #0c4a6d;
  font-family: 'Roboto', sans-serif;
  position: relative;
/*
  background: url(../images/backgrounds/towtruck.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
*/
}

#page-container {
  position: relative;
  min-height: 100vh;
}

#content-wrap {
  padding-bottom: 50px; /* Footer height */
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px; /* Footer height */
}

a { text-decoration:none;}
/*a:hover { color:inherit; text-shadow: 0px 0px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);  }*/
  a:hover {    text-shadow: 0px 0px 6px rgba(128,128,255,0.7);  }


.AutoMargin {
  margin: auto;
}
.BackColourBrown  {background-color:#8B4513; border-bottom:1px solid #444; color:#FFF;}
.BackColourGrey   {background-color:#777777; border-bottom:1px solid #444; color:#FFF;}
.BackColourLightGrey {  background-color: #CCC;  border-bottom: 1px solid #444;}
.BackColourWhite  {background-color:#FFFFFF; border-bottom:1px solid #444;}
.BackColourBlue   {background-color:#4169E1; border-bottom:1px solid #444; color:#FFF;}
.BackColourGreen  {background-color:#228B22; border-bottom:1px solid #444; color:#FFF;}
.BackColourYellow {background-color:#FFFACD; border-bottom:1px solid #444;}
.BackColourPaleYellow { background-color: #FFFACD; border:1px solid #333;}
.BackColourLeftMenu { background-color: #222D32; }
.BorderRadius3px  { border-radius: 3px; }
.BorderRadius10px { border-radius: 10px; }
.Border1pxSolid {border: 1px solid #0c4a6d; }
.BorderTop2pxSolid0c4a6d {  border-top: 2px solid #0c4a6d; }
.Capitalize { text-transform:uppercase; }
.CenteredContainer { position: absolute; top: 50%; left: 50%; -moz-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);}

.chkboxlist td {
  padding:5px 20px 5px 20px;
  white-space:nowrap;
}
.chkboxlist td input {
  margin-right: 10px;
}

.CheckBox input {
  font-size:x-large;
}
.CheckBox label {
  align-items: center;
  box-sizing: border-box;
  caption-side: bottom;
  color: rgb(33, 37, 41);
  display: inline;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  overflow-wrap: normal;
  padding-bottom: 6px;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 6px;
  text-align: center;
  text-transform: none;
  white-space: nowrap;
}

.DebugText { font-size:7pt; color: #F00; font-family:monospace; padding:2px; }
.DisplayNone { display:none; }
.lnkCreateNewJob {
  position: absolute;
  z-index: 10;
  top: -20px;
  right: 0;
  --bs-btn-color: #fff;
  --bs-btn-bg: #0d6efd;
  --bs-btn-border-color: #0d6efd;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0b5ed7;
  --bs-btn-hover-border-color: #0a58ca;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0a58ca;
  --bs-btn-active-border-color: #0a53be;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #0d6efd;
  --bs-btn-disabled-border-color: #0d6efd;
  margin:10px;
}
.LowerCase {  text-transform: lowercase; }
.CursorPointer { cursor: pointer; }
.DefaultTableCell {
  border: 1px solid #0c4a6d;
  vertical-align: top;
  width: 120px;
  text-align: center;
  white-space: nowrap;
  padding: 2px 5px 2px 5px;
  font-size: 14px;
  color: #0c4a6d;
}
.DisplayInline {display:inline-block;}
.DisplayBlock{display:block;}
.DriverOnDutyFree {
  background-color: #00C000;
  border-radius: 7px;
  padding: 10px 30px 10px 10px;
  display:inline-block;
  margin:2px;
}
.DriverOnDutyLight {
  background-color: #EC7C26;
  border-radius: 7px;
  padding: 10px 30px 10px 10px;
  display: inline-block;
  margin: 2px;
}
.DriverOnDutyHeavy {
  background-color: #C51D34;
  border-radius: 7px;
  padding: 10px 30px 10px 10px;
  display: inline-block;
  margin: 2px;
}
.FontBold {font-weight:bold;}
.FontSize8pt {font-size:8pt;}
.FontSize12pt {  font-size: 12pt; }
.FontSize14pt { font-size: 12pt; }
.FontSize20pt  { font-size: 20pt; }
.FontSize24pt { font-size: 24pt; }
.FontItalic {  font-style: italic; }
.FontStrikeThrough {  text-decoration: line-through; }

.FormTableHeaderCell {
  background-color: #0c4a6d;
  vertical-align: middle;
  width: 160px;
  text-align: right;
  white-space: nowrap;
  padding: 6px;
  font-size: 14px;
  font-weight:bold;
  color: #FFF;
}

.FormTableValueCell {
  background-color: #FFF;
  vertical-align: middle;
  width: 340px;
  text-align: left;
  white-space: nowrap;
  padding: 6px;
  font-size: 14px;
  font-weight: normal;
  color: #0c4a6d;
}


#footer { position: absolute; bottom: 0; width: 100%; height: 60px; background: #CCC; }
.GroupBox { display: inline-block; border-radius: 10px; border: 1px solid #CCC; padding: 20px; margin: auto; position:relative; margin-bottom:20px; }
.GroupBoxTitle { position:absolute; z-index:10; top:-10px; left:15px; background-color:#FFF; padding:0 10px 0 10px; font-weight:bold; font-size:12pt; }
h1 { color: #0c4a6d; font-weight:bold; font-size:16pt; }
h2 { color: #0c4a6d; font-weight:bold; font-size:14pt; }
h3 { color: #0c4a6d; font-weight:bold; font-size:13pt; }
.HeaderBackground {  background-color: #337AB7; }
.HeaderTableCell {
  background-color: #0c4a6d;
  border: 1px solid #FFF;
  vertical-align: top;
  width: 120px;
  text-align: center;
  white-space: nowrap;
  padding: 2px 5px 2px 5px;
  font-size: 14px;
  color: #FFF;
}

.Height32px { height: 32px !important; min-height: 32px; }
.Height38px { height: 38px !important; min-height: 38px; }
.Height580px { height: 580px; }
.Heigh100Percent { height:100%; }
i.ShiftCloseToEnd { position:absolute; z-index:10; top:7px; right:8px; font-size:18pt; }
.lblAmountOwed {margin-left:20px; border:1px solid #FFF; border-radius:4px; padding:1px 2px 1px 2px;}
.lnkExtendShift {
  position: absolute;
  z-index: 10;
  bottom: 7px;
  right: 8px;
  font-size: 12pt;
  padding: 0px 5px 0px 5px;
  font-weight: bolder;
}
.location_map_container {
  position: relative;
  width: 620px;
}

.LoginBox {background-color:#FFF;
           padding:20px; 
           border-radius:10px; 
           /*border:1px solid #0c4a6d;*/
           /*display: inline-block; */
           margin:auto;
           margin-bottom:10px;
}
.Logo {position:absolute; z-index:10; left:0;top:0;}
.Logout {  position: absolute;  bottom: 50%;  top: 50%;  margin: 0;  text-align: right;  right: 10px;  font-family: 'Roboto', sans-serif; text-decoration:none; }
.Margin10px {margin:10px;}
.MarginBottom10px { margin-bottom: 10px; }
.MarginBottom30px { margin-bottom: 30px; }
.MarginRight5px    { margin-right:  5px;  }
.MarginTop10px {margin-top:10px;}
.MarginTop20px {margin-top:20px;}
.MarginLeft20px {margin-left:20px;}
.MinWidth1024px { min-width:1024px; }
.MaxWidth50px {max-width:50px; overflow:clip; }
.MaxWidth120px {
  max-width:120px;
  width:120px;
  overflow:hidden;
  white-space:nowrap;
}
.MaxWidth200px {
  max-width: 200px;
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
}

.NoWrap { white-space: nowrap; }
.Padding2525 { padding: 2px 5px 2px 5px; }
.Padding2_10_2_10 {  padding: 2px 10px 2px 10px; }
.Padding2px { padding: 2px; }
.Padding5px {  padding: 5px;}
.Padding10px {padding:10px;}
.Padding20px {padding:20px;}
.PaddingBottom10px {padding-bottom:10px;}
.PaddingBottom20px {padding-bottom:20px;}
.PaddingLeft20px {padding-left:20px;}
.PaddingRight10px {padding-right:10px;}
.PaddingRight20px {padding-right:20px;}
.PaddingTop10px {padding-top:20px;}
.PaddingTop20px {padding-top:20px;}
.PageShell {width:990px; margin:auto;padding-top:20px;}
.PaleYellowBackground {background-color:#f6e398;}
.PaleGreenBackground  {background-color:#40FF40;}
.Panel {
  background-color: rgb(255, 255, 255);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  box-sizing: border-box;
  color: rgb(12, 74, 109);
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  margin-bottom: 10px;
/*  margin-left: 428px;
  margin-right: 428px;
*/  margin-top: 0px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  text-align: start;
  /*width: 1024px;*/
}
.PositionRelative {position:relative;}
.TableBorders {  border-collapse: collapse;}
td {  width: auto; }
td.min {    width: 1%;    white-space: nowrap;  }
td.CellPadding { padding:2px 10px; }
td.CellBorder {    border: 1px solid #EEE;  }
.text-left  { text-align:left;  }
.text-right { text-align:right; }
.text-justify { text-align:justify; }
.TextSearch { position: absolute;  z-index: 10;  top: 7px;  right: 10px; font-size:16pt; }
.tile_background {  background-color:cadetblue; }
.TopLeftAbsolute {position:absolute; z-index:10; top:0; left:0;}
.TopRightAbsolute {
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;
}
.VerticalAlignTop {vertical-align:top;}
.VerticalAlignMiddle {  vertical-align:middle; }
.VerticalAlignBottom {vertical-align: bottom;}
.UserMenu {
  display:none;
  position: absolute;
  top: 53px;
  right: 0;
  width: 200px;
  height: 45px;
  background-color: #FFF;
  z-index: 100;
  padding: 5px;
  border:1px solid #333;
}
.WhiteText {color:#FFF;}
.WhiteBackground { background-color:#FFF; }
.Width32px { width: 32px; }
.Width48px { width: 48px; }
.Width80px { width: 80px;}
.Width100px {width:100px;}
.Width120px {width:120px;}
.Width167px {width:167px;}
.Width200px {width:200px;}
.Width255px {width:255px;}
.Width300px {width:300px;}
.Width320px {  width: 320px; }
.Width480px { width: 480px; }
.Width521px { width: 521px; max-width:521px; text-wrap:normal; }
.Width800px {width: 800px;}
.Width990px {  width: 990px; }
.Width1024px {  width: 1024px;}
.Width100percent {width:100%;}
.WrapText { white-space:pre-wrap; }

.small-box h3 {
  font-size: 38px;
  font-weight: bold;
  margin: 0 0 10px 0;
  white-space: nowrap;
  padding: 0
}

@media only screen and (min-width: 20px) {
  .HeaderText {font-size:14pt;}
}

@media only screen and (min-width: 480px) {
  .HeaderText {font-size:20pt;}
}

/* The side navigation menu */
.sidenav {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: #111; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

  /* The navigation menu links */
  .sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
  }

    /* When you mouse over the navigation links, change their color */
    .sidenav a:hover {
      color: #f1f1f1;
    }

  /* Position and style the close button (top right corner) */
  .sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
  }

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
  transition: margin-left .5s;
  padding: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }

    .sidenav a {
      font-size: 18px;
    }
}