body, table td, .gwt-TextBox, .gwt-TextArea, .gwt-DateBox, .gwt-PasswordTextBox, .gwt-ListBox, input {
   font-family: Arial !important;
   font-size: 16px !important;
}
   
.compliantText {
   color: #15a01c;
}

.noncompliantText {
   color: #CC0000;
}

.warnText {
   color: #ffe31b;
}

.header {
   font-weight: bold;
   font-size: 18px !important;
   text-align: center;
   margin-top: 6px;
   margin-bottom: 6px;
}

.subheader {
   font-weight: bold;
   text-align: center;
   margin-top: 4px;
   margin-bottom: 4px;
}

.mainContent {
   text-align: center;
   border-bottom: solid 1px gray;
}

.headerWest {
   background-image: url('bug-top-left.png');
   background-repeat: no-repeat;
}

.headerCenter {
   background-image: url('bug-top.png');
   background-repeat: repeat-x;
   text-align: center !important;
}

img.header {
   margin: auto !important;
}

a.logout {
   text-align: center;
   display: block;
   position: absolute;
   right: 0px;
   margin-top: -9px;
}

.envName {
   text-align: center;
   margin-top: -7px;
   margin-left: 200px;
}

a.reassignois {
   text-align: right;
   display: block;
   position: absolute;
   right: 0px;
   margin-top: -80px;
}

@media screen {
   .stationInfo {
      margin-top: 25px;
      height: 90px;
   }
}

.stationInfo {
   position: absolute;
   left: 0;
   text-align: left;
}

.headerEast {
   background-image: url('bug-top-right.png');
   background-repeat: no-repeat;
}

.footerWest {
   background-image: url('bug-bottom-left.png');
   background-repeat: no-repeat;
}

.footerCenter {
   background-image: url('bug-bottom.png');
   background-repeat: repeat-x;
   padding-bottom: 20px;
   color: gray;
}

.footerCenter td {
   font-size: 14px !important;
}

.footerEast {
   background-image: url('bug-bottom-right.png');
   background-repeat: no-repeat;
}

table.statusBar {
   width: 100%;
}

table.statusBar td:first-child {
   width: 120px;
}

.placeHints {
   text-align: center;
}

img.placeImage {
   width: 40px;
   height: 40px;
}

img.placeImageWide {
   width: 70px;
   height: 40px;
}

img.placeImageWideShort {
   width: 70px;
   height: 30px;
}

.placeText {
   margin-top: -6px;
}

.date {
   height: 100%;
   padding-bottom: 20px;
}

.date td {
   vertical-align: bottom !important;
   line-height: 1;
   padding-top: 0;
   padding-bottom: 0;
}

.gwt-DisclosurePanel .header {
   font-weight: normal;
   font-size: 16px !important;
}

.date .button {
   margin-top: 0;
}

table.inspectionProgress {
   margin-left: auto;
   margin-right: auto;
}

table.inspectionProgress td {
   width: 100px !important;
   text-align: center;
   vertical-align: top !important;
   line-height: 1;
   padding-top: 0;
   padding-bottom: 0;
}

.centerWest {
   background-image: url('bug-left.png');
   background-repeat: repeat-y;
}

.centerEast {
   background-image: url('bug-right.png');
   background-repeat: repeat-y;
}

.errorMessages {
   max-width: 600px;
   background-color: #FFCCCC;
   border: 2px solid #CC0000;
   padding: 3px;
}

.popupErrorMessage {
   background-color: #FFCCCC;
   border: 2px solid #CC0000;
   padding: 3px;
   text-align: left;
}

.errorPopup {
	max-width: 800px;
}

.inputError {
   background-color: #FFCCCC;
   border: 1px solid #CC0000;
}

.warning {
   background-color: #F1DFD2;
   border: 2px solid #FF6700;
   padding: 5px;
}

.viewTitle, .directions, .directionsCentered, .eula, .inputs, .inputsChecked, .timer {
   margin-bottom: 10px;
}

.inputsShort {
   margin-bottom: 8px;
}

.directions, .eula {
   max-width: 600px;
   margin-top: 10px;
   margin-right: auto;
   margin-left: auto;
   text-align: justify;
}

.directionsCentered {
   max-width: 600px;
   margin-top: 10px;
   margin-right: auto;
   margin-left: auto;
   text-align: center;
}

.eula {
   max-width: 800px !important;
}

.largeDirections {
   max-width: 600px;
   font-size: 20px;
   font-weight: bold;
   margin-top: 40px;
   margin-right: auto;
   margin-bottom: 40px;
   margin-left: auto;
   text-align: justify;
}

.largeDirectionsCentered {
   max-width: 600px;
   font-size: 20px;
   font-weight: bold;
   margin-top: 40px;
   margin-right: auto;
   margin-bottom: 40px;
   margin-left: auto;
   text-align: center;
}

.extraLargeDirections {
   max-width: 900px !important;
   font-size: 30px;
   font-weight: bold;
}

.viewTitle {
   font-size: 20px;
   font-weight: bold;
   color: #319e2b;
   border-top: solid 1px gray;
   border-bottom: solid 1px gray;
   background-color: #e7e7e7;
}

.mainContent table, .popupContent table {
   margin-left: auto;
   margin-right: auto;
}

.popupContent table.gwt-DatePicker {
   margin-left: 0;
   margin-right: 0;
}

/* right justify first column */
table.inputs td:first-child, table.inputsShort td:first-child {
   text-align: right;
}

table.inputs td:first-child+td, table.inputsShort td:first-child+td {
   text-align: left;
}

/*right justify third column */
table.inputs td:first-child+td+td, table.inputsShort td:first-child+td+td {
   text-align: right;
}

table.inputs td:first-child+td+td+td, table.inputsShort td:first-child+td+td+td {
   text-align: left;
}

table.left td {
   text-align: left;
}

table.review td {
   margin: 0;
   padding: 0;
}

table.review td:first-child {
   text-align: right;
}

table.review td:first-child+td {
   text-align: left;
}

table.vehicleData td {
   height: 36px;
}

div.system {
   border: solid 1px gray;
   width: 600px;
   padding: 8px;
   margin-top: 5px;
   margin-top: 5px;
   margin-right: auto;
   margin-left: auto;
}

.importantRow {
   font-weight: bold;
}

table.hours td:first-child {
   text-align: right;
}

table.hours tr:first-child td {
   font-weight: bold;
   text-align: center;
}

.versions td:first-child {
   text-align: right;
}

.versions div {
   font-size: 10px;
}

a {
   color: #319e2b !important;
   text-decoration: none;
}

a:hover, a:focus {
   color: #7dca07 !important;
   cursor: pointer;
}

a.graphicButton {
   width: 160px;
   height: 140px;
   padding-top: 15px;
   display: block;
   border: solid 2px white; /* preserves border space to prevent focus wiggle */
}

a.graphicButtonShort {
   width: 160px;
   height: 110px;
   padding-top: 15px;
   display: block;
   border: solid 2px white; /* preserves border space to prevent focus wiggle */
}

a.button {
   color: white !important;
   display: inline-block;
   height: 30px;
   text-decoration: none;
   text-align: center !important;
   margin: 5px;
   border: solid 2px white; /* preserves border space to prevent focus wiggle */
}

a.button span {
   display: block;
   font-size: 16px !important;
   margin-top: -28px;
}

a.button:focus, a.graphicButton:focus, a.graphicButtonShort:focus {
   border: solid 2px #7dca07;
}

/* Chromium browser adds its own outline on focus - use this to remove */
textarea:focus, a.button:focus, a.graphicButton:focus, a.graphicButtonShort:focus {
   outline: none;
}

a.disabledButton:hover {
   cursor: default;
}

a.disabledButton {
   color: #000000 !important;
}

a.graphicButton.disabledButton, a.graphicButtonShort.disabledButton {
   color: gray !important;
}

a.commandButton {
   background: url('commandButton_bg.png') no-repeat;
   width: 150px;
}

a.commandButton.disabledButton {
   background: url('disabled_commandButton_bg.png') no-repeat;
}

a.minorButton {
   background: url('minorButton_bg.png') no-repeat;
   width: 100px;
}

a.minorButton.disabledButton {
   background: url('disabled_minorButton_bg.png') no-repeat;
}

a.menuButton {
   background: url('menuButton_bg.png') no-repeat;
   width: 250px;
}

a.menuButton.disabledButton {
   background: url('disabled_menuButton_bg.png') no-repeat;
}

a.smallButton {
   background: url('smallButton_bg.png') no-repeat;
   margin: 0 !important;
   width: 50px;
}

a.smallButton.disabledButton {
   background: url('disabled_smallButton_bg.png') no-repeat;
}

table.menu {
   border: solid 1px gray;
   border-collapse: collapse;
}

table.menu td {
   vertical-align: middle;
   border: solid 1px gray;
}

table.menu span {
   clear: both;
   display: block;
   text-align: center;
}

table.menu img {
   clear: both;
   display: block;
   margin: auto;
}

.progressBar {
   border: 1px solid gray;
}

.progressBar div {
   background-color: #b3dc9a;
   margin: 2px 0;
   text-align: left;
}

.progressMessage {
   margin: 4px;
}

/* This overrides the inline style put in by visualizations so it can be centered */
.gwt-viz-container table[style] {
   margin-left: auto !important;
   margin-right: auto !important;
}

.rpmMeter {
   width: 375px;
}

table.dynamicDirections div.extraLargeDirections {
   margin-top: 40px;
}

/* Need to override a top vertical align that comes up inline from GWT */
table.dynamicOBD td:last-child[style] {
   margin-left: 20px;
   vertical-align: middle !important;
}

.obdProgress {
   margin-left: auto;
   margin-right: auto;
}

.currency {
   width: 50px;
   text-align: right;
}

.logTabs {
   width: 90%;
   margin-top: 8px;
}

.logTabs .gwt-TextArea {
   color: #000000; /* keeps read-only text areas from getting grayed out */
   width: 99% !important;
   height: 390px !important;
}

.logTabs .gwt-TabPanelBottom {
   height: 400px;
}

.messageArea {
   width: 730px;
   position: relative;
   left: 50%;
   margin-left: -350px;
   text-align: left;
   min-height: 150px !important;
}

@media print {
       .messageArea {
          width: auto;
          position: static;
          left: auto;
          margin-left: 15px;
          margin-right: 15px;
          text-align: left;
       }
}

.gwt-PasswordTextBox, .gwt-DateBox, .gwt-TextBox {
   width: 145px;
}

.gwt-TextBox-Error {
   border: 1px solid red !important;
}

.gwt-PopupPanel {
   border: 5px solid #7dca07 !important;
   padding: 5px !important;
   background: white;
   text-align: center;
}

/* Styling for gwt-advanced SuggestionBox */
.advanced-ListPopupPanel {
   border: 2px solid gray;
   padding: 1px;
   background: white;
   text-align: left;
   color: black;
}

.advanced-ListPopupPanel .selected-row {
   color: white;
   background-color: #26A0DA;
}

.gwt-TabBar .gwt-TabBarItem {
   background: #319e2b !important;
}

.gwt-TabBar .gwt-TabBarItem-selected {
   background: #7dca07 !important;
}

.gwt-TabPanelBottom {
   border-color: #7dca07 !important;
}

.repairs {
   width: 95%;
}

.gwt-TextArea {
   width: 500px;
   height: 175px;
}

.gwt-DisclosurePanel .content td {
   padding: 3px;
}

ul, ol {
   text-align: left;
   display: inline-block;
   list-style-position: inside;
   margin-right: auto;
   margin-left: auto;
}

ul ul, .indent {
   margin-left: 20px !important;
}

al {
   text-align: center;
   display: inline-block;
   list-style-position: inside;
   margin-right: auto;
   margin-left: auto;
}

al {
   margin-left: 16px !important;
}

.popupContent ul {
   margin-right: 0;
   margin-left: 0;
}

.bold {
   font-weight: bold;
}

.underline {
   text-decoration: underline;
}

@media print {
	body, table td, .gwt-TextBox, .gwt-TextArea, .gwt-DateBox,
		.gwt-PasswordTextBox, .gwt-ListBox, input {
		font-size: 14px !important;
	}
	
	.mainContent {
		border-bottom: none;
	}
	
	.cellTable {
		text-align: left;
	}
	
	.cellTable th {
		text-align: left;
	}
	
	.cellTable td {
		text-align: left;
	}
}

/* Styling for simple RPM gauge components */
/* --------------------------------------- */
.rpmGauge-Title {
   text-align: center;
   font-size: 45px;
   font-weight: bold;
}

.rpmGauge-Value {
   text-align: center;
   font-size: 45px;
   font-weight: bold;
}

.rpmGauge-Label {
   margin-left: 2px;
   text-align: left;
   font-size: 20px;
}

.rpmGauge-BadBarBase {
   background: #CC0000 !important;
   border: 0px;
}

.rpmGauge-GoodBarBase {
   background: #90EE90 !important;
   border: 0px;
}

.rpmGauge-TickOverlay {
   opacity: 1.0;
}

.rpmGauge-PointerOverlay {
   opacity: 1.0;
}

/* Direct Mode Styles                      */
/* --------------------------------------- */
.block-left {
   margin-left: 0 !important;
   margin-right: auto !important;
}

.block-right {
   margin-left: auto !important;
   margin-right: 0 !important;
}

.block-center {
   margin: 0 auto !important;
}

.direct-DisclosurePanel {
   width: 90%;
   border: 2px solid;
   border-color: gray;
   /*border-color: #319e2b;*/
   margin-top: 8px;
}

.direct-DisclosurePanel .header TD {
   width: 100%;
   color: #000000;
   font-weight: bold;
   text-align: left;
}

.direct-DisclosurePanel .content {
   width: 100%;
   padding: 0;
}

.direct-DisclosureSubPanel {
   width: 95%;
   border: 2px solid;
   border-color: lightgray;
   /*border-color: #7dca07;*/
   margin: 4px;
}

.direct-DisclosureSubPanel .header TD {
   width: 100%;
   color: #000000;
   font-weight: bold;
   text-align: left;
}

.direct-DisclosureSubPanel .content {
   width: 820px;
   margin: auto;
   padding: 0;
}

table.direct {
   border-collapse: collapse;
   padding: 0;
}

table.direct tr.border-top {
   border-top: 1px solid;
   border-color: lightgray;
   /*border-color: #7dca07;*/
}

table.direct td {
   width: auto;
   padding: 0;
}

table.direct td.sub-section-title {
   width: 160px;
   font-weight: bold;
   text-align: left !important;
   vertical-align: top !important;
   padding: 10px 5px 5px 5px;
}

table.direct td.align-left {
   width: auto;
   text-align: left !important;
   padding: 5px;
}

table.direct td.align-right {
   width: auto;
   text-align: right !important;
   padding: 5px;
}

table.direct td.align-right-label {
   width: 150px;
   text-align: right !important;
   padding: 5px;
}

table.direct td.align-top-left {
   width: auto;
   text-align: left !important;
   vertical-align: top !important;
   padding: 5px;
}

table.direct td.align-top-right {
   width: auto;
   vertical-align: top !important;
   text-align: right !important;
   padding: 5px;
}

table.direct td.align-bottom-right {
   width: auto;
   vertical-align: bottom !important;
   text-align: right !important;
   padding: 5px;
}

table.direct td.align-top-right-label {
   width: 150px;
   vertical-align: top !important;
   text-align: right !important;
   padding: 5px;
}

table.direct td.align-left-inner {
   width: auto;
   text-align: left !important;
   padding: 2px 0 2px 0;
}

table.direct td.align-right-inner {
   width: auto;
   text-align: right !important;
   padding: 2px 0 2px 0;
}

table.direct td.align-center-inner {
   width: auto;
   text-align: center !important;
   padding: 2px 5px 2px 5px;
}

table.direct td.fill {
   max-width: 99%;
   padding: 2px 0 2px 0;
}

table.direct td.fill-top {
   max-width: 99%;
   vertical-align: top !important;
   padding: 2px 0 2px 0;
}

table.direct td.button {
   width: 160px;
   vertical-align: top !important;
   padding: 0;
}

table.direct td.minor-button {
   width: 110px;
   vertical-align: top !important;
   padding: 0;
}

table.direct td.button-right {
   width: auto;
   text-align: right !important;
   vertical-align: top !important;
   padding: 0;
}

table.direct td.small-button {
   width: 60px;
   vertical-align: top !important;
   padding: 0;
}

table.direct td.spacer {
   padding: 0 10px 0 10px;
}

.short-TextBox {
   @extend .gwt-TextBox;
   width: 90px !important;
}

.direct-ListBox {
   @extend .gwt-ListBox;
   width: 151px !important;
   font-family: Arial !important;
   font-size: 16px !important;
}

.direct-short-ListBox {
   @extend .gwt-ListBox;
   width: 96px !important;
   font-family: Arial !important;
   font-size: 16px !important;
}

.direct-long-ListBox {
   @extend .gwt-ListBox;
   width: 261px !important;
   font-family: Arial !important;
   font-size: 16px !important;
}

.one-line-TextArea {
   @extend .gwt-TextArea;
   width: 145px !important;
   height: 18px !important;
   overflow: hidden;
   font-family: Arial !important;
   font-size: 16px !important;
}

.one-line-TextArea-Error {
   border: 2px solid red !important;
}

.two-line-TextArea {
   @extend .gwt-TextArea;
   width: 145px !important;
   height: 36px !important;
   word-wrap: break-word;
   overflow: hidden;
   font-family: Arial !important;
   font-size: 16px !important;
}

.two-line-TextArea-Error {
   border: 2px solid red !important;
}

.four-line-TextArea {
   @extend .gwt-TextArea;
   width: 145px !important;
   height: 72px !important;
   overflow-x: hidden;
   overflow-y: scroll;
   font-family: Courier New !important;
   font-size: 16px !important;
}

.four-line-TextArea-Error {
   border: 2px solid red !important;
}

/* Styling for safety inspection components */
/* ---------------------------------------- */
.safetySectionTitle {
   font-size: 20px;
   font-weight: bold;
   text-align: center;
   margin-top: 10px;
   margin-right: auto;
   margin-bottom: 10px;
   margin-left: auto;
}

.safetySubSectionTitle {
   font-weight: bold;
   text-align: left;
   margin-top: 10px;
   margin-bottom: 5px;
}

.safetySection {
   border: solid 1px black;
   margin-right: auto;
   margin-bottom: 10px;
   margin-left: auto;
   padding: 10px;
   vertical-align: top;
}

table.safetyMainGrid td {
   vertical-align: top;
}

table.inputsSafetyDetailSmall {
   box-sizing: border-box;
   width: 240px;
}

table.inputsSafetyDetailSmall td:first-child+td {
   text-align: left;
   width: 110px;
}

table.inputsSafetyDetail {
   box-sizing: border-box;
   width: 360px;
}

table.inputsSafetyDetail td:first-child+td {
   text-align: left;
   width: 140px;
}

table.inputsSafetyDetailLarge {
   box-sizing: border-box;
   width: 600px;
}

table.inputsSafetyDetailLarge td:first-child+td {
   text-align: left;
   width: 140px;
}

/* ---------------------------------------- */