body { background-color: #F8F9FA; }
#header { height: 50px; background-color: #FFF; }
.bg-light { background-color: #FFF!important; }
#alertBar p.date { background-color: #F8F9FA; border: 0px; }
/*#header #logo a { background: url('../images/MoDot-Logo.png') top left no-repeat; display: block; background-size: 88px; width: 205px; height: 50px; }*/
#Table_01, #Table_01 tr, #Table_01 tr td { font-size: 0px; border-spacing: 0px; line-height: 0.5; }
#Table_01 .mapImage:hover { outline: 3px solid #bb0400; }
.radioPadding label { margin-right: 20px; }
.radioPadding label.lastRadio { margin-right: 0px; }
#grid-source-img, #tableGridOverlay{position: absolute;}
a#logo {
    background: url('../images/MODOT-Logo-Color.png') top left no-repeat;
    display: block;
    background-size: 88px;
    width: 90px;
    height: 50px;
}
#header a { color: #005990; }
#header a:hover { color: #000; }
/* For some reason common45 added this in and we copied it into this project and it screwed something up so I override
   it here. Gotta use important here because that style used important. */
#header a:focus {
    color: #005990 !important;
}
.dropdown-toggle::after { margin-left: 5px; vertical-align: middle; }
.navbar-nav>li>a { font-size: 1em; }
.navbar-brand { margin-right: 2px; }
.navbar-collapse {
    z-index: 2;
    color: red;
}
.sticky-top{
    z-index: 1;
}
.globalFindA, .localFindA{
    margin-right: 10px;
}
@media (min-width: 992px) { .navbar-expand-lg .navbar-nav .nav-link { padding-left: 0.8rem; padding-right: 0.8rem; } }
li.active { border-bottom: 3px solid #005990; }
.navbar { padding: 0rem; }
.darkTealButton { background-color: #005990; color: #FFF; border-color: #032e48; }
.darkTealButton:hover { background-color: #032e48; }
.tableButton.blueButton { font-size: .9em; padding: 0em 0.5em; min-height: 23px; line-height: .9em; }

/**Dashboard page*/
.message-display-container {
    background-color: #C1D6E4;
    margin: 5px 0px 5px 0px;
    padding: 5px;
    border-radius: 10px;
}
.display-message-div{
    vertical-align:top;
}
#nameSearchDataTable{ margin: 5px}
/************************************************************
 DAMAGE IMAGE
 ************************************************************/
#grid-overlay { position: relative; }
#grid-overlay td.selected { background-color: rgba(100,0,0,0.5)!important; }
#grid-overlay td.unselected { background-color: transparent!important; }
#grid-overlay td.selected:hover { background-color: rgba(100,0,0,0.7)!important; }
#grid-overlay td.unselected:hover { background-color: rgba(0,0,0,0.2)!important; }
.checkBoxVehicleDamage{
    display:flex;
    justify-content: center;
    align-items: center;
    height: 99px;
}
    .checkBoxVehicleDamage p {
        background-color: black;
        color: white;
        border-radius: 55%;
        padding: .5em;
        width: 36px;
        height: 36px;
        text-align: center;
        margin: 0;
    }
 
 /*Top and Bottom rows, by column*/
.part2, .part14{ width: 6%;}
.part3, .part13 {
    width: 24%
}
.part4, .part12 {
    width: 26%
}

.part5, .part11 {
    width: 18%
}
.part6, .part10 {
    width: 20%
}
.part7, .part9 {
    width: 6%
}

/*Middle row, by column*/
.part1{width: 6%}
.part15 {
    width: 24%
}
.part16 {
    width: 46%
}

.part17 {
    width: 16%
}
.part8 {
    width: 8%
}
/************************************************************
 NAVIGATION
 ************************************************************/
#navbarSupportedContent li a:hover {
    background-color: #005990;
    color: #FFF;
}
.fixedDisplay{
    position: fixed;
    z-index: 1;
}
.padding-0{
    padding: 0;
}

/* Add color #005990 with important to override what newNavigation.css is doing that sets the color to white with important */
body[id='Dashboard'] #navbarSupportedContent li a[href*='LETS_Dashboard'] { color: #005990; border-bottom: 3px solid #005990; font-weight: bold; color: #005990 !important; }
body[id='Dashboard'] #navbarSupportedContent li a[href*='LETS_Dashboard']:hover { color: #000; background-color: #C1D6E4; }
body[id='Dashboard'] #navbarSupportedContent li a[href*='LETS_Dashboard'] .submenu-indicator-chevron { border-color: transparent #FFF #FFF transparent; }

body[id*='CrashSearch'] #navbarSupportedContent li a[href*='LETS_CrashSearch'] { border-bottom: 3px solid #005990; font-weight: bold; color: #005990 !important; }
body[id*='CrashSearch'] #navbarSupportedContent li a[href*='LETS_CrashSearch']:hover { color: #000; background-color: #C1D6E4; }
body[id*='CrashSearch'] #navbarSupportedContent li a[href*='LETS_CrashSearch'] .submenu-indicator-chevron { border-color: transparent #FFF #FFF transparent; }

body[id*='NameSearch'] #navbarSupportedContent li a[href*='LETS_NameSearch'] { border-bottom: 3px solid #005990; font-weight: bold; color: #005990 !important; }
body[id*='NameSearch'] #navbarSupportedContent li a[href*='LETS_NameSearch']:hover { color: #000; background-color: #C1D6E4; }
body[id*='NameSearch'] #navbarSupportedContent li a[href*='LETS_NameSearch'] .submenu-indicator-chevron { border-color: transparent #FFF #FFF transparent; }

body[id='NewQuick'] #navbarSupportedContent li a[href*='LETS_New_Quick'] { border-bottom: 3px solid #005990; font-weight: bold; color: #005990 !important; }
body[id='NewQuick'] #navbarSupportedContent li a[href*='LETS_New_Quick']:hover { color: #000; background-color: #C1D6E4; }
body[id='NewQuick'] #navbarSupportedContent li a[href*='LETS_New_Quick'] .submenu-indicator-chevron { border-color: transparent #FFF #FFF transparent; }

body[id='NewReport'] #navbarSupportedContent li a#dropdownNew { border-bottom: 3px solid #005990; font-weight: bold; color: #005990 !important; }
body[id='NewReport'] #navbarSupportedContent li a#dropdownNew:hover { color: #000; background-color: #C1D6E4; }
body[id='NewReport'] #navbarSupportedContent li a#dropdownNew .submenu-indicator-chevron { border-color: transparent #FFF #FFF transparent; }

body[id='StatisticalReport'] #navbarSupportedContent li a#dropdownReports { border-bottom: 3px solid #005990; font-weight: bold; color: #005990 !important; }
body[id='StatisticalReport'] #navbarSupportedContent li a#dropdownReports:hover { color: #000; background-color: #C1D6E4; }
body[id='StatisticalReport'] #navbarSupportedContent li a#dropdownReports .submenu-indicator-chevron { border-color: transparent #FFF #FFF transparent; }

body[id*='ResetPassword'] #navbarSupportedContent li a[href*='LETS_CrashSearch'] { border-bottom: 3px solid #005990; font-weight: bold; color: #005990 !important; }
body[id*='ResetPassword'] #navbarSupportedContent li a[href*='LETS_CrashSearch']:hover { color: #000; background-color: #C1D6E4; }
body[id*='ResetPassword'] #navbarSupportedContent li a[href*='LETS_CrashSearch'] .submenu-indicator-chevron { border-color: transparent #FFF #FFF transparent; }

body[id='Admin'] #navbarSupportedContent li a#dropdownAdmin { border-bottom: 3px solid #005990; font-weight: bold; color: #005990 !important; }
body[id='Admin'] #navbarSupportedContent li a#dropdownAdmin:hover { color: #000; background-color: #C1D6E4; }
body[id='Admin'] #navbarSupportedContent li a#dropdownAdmin .submenu-indicator-chevron { border-color: transparent #FFF #FFF transparent; }

body[id='SysAdmin'] #navbarSupportedContent li a#dropdownSysAdmin { border-bottom: 3px solid #005990; font-weight: bold; color: #005990 !important; }
body[id='SysAdmin'] #navbarSupportedContent li a#dropdownSysAdmin:hover { color: #000; background-color: #C1D6E4; }
body[id='SysAdmin'] #navbarSupportedContent li a#dropdownSysAdmin .submenu-indicator-chevron { border-color: transparent #FFF #FFF transparent; }

body[id*='Help'] #navbarSupportedContent li a[href*='LETS_Help'] { border-bottom: 3px solid #005990; font-weight: bold; color: #005990 !important; }
body[id*='Help'] #navbarSupportedContent li a[href*='LETS_Help']:hover { color: #000; background-color: #C1D6E4; }
body[id*='Help'] #navbarSupportedContent li a[href*='LETS_Help'] .submenu-indicator-chevron { border-color: transparent #FFF #FFF transparent; }

body[id*='Notify'] #navbarSupportedContent li a[href*='LETS_LETSNotify'] { border-bottom: 3px solid #005990; font-weight: bold; color: #005990 !important; }
body[id*='Notify'] #navbarSupportedContent li a[href*='LETS_LETSNotify']:hover { color: #000; background-color: #C1D6E4; }
body[id*='Notify'] #navbarSupportedContent li a[href*='LETS_LETSNotify'] .submenu-indicator-chevron { border-color: transparent #FFF #FFF transparent; }

body[id*='Login'] #navbarSupportedContent li a[href*='LETS_Login'] { border-bottom: 3px solid #005990; font-weight: bold; color: #005990 !important; }
body[id*='Login'] #navbarSupportedContent li a[href*='LETS_Login']:hover { color: #000; background-color: #C1D6E4; }
body[id*='Login'] #navbarSupportedContent li a[href*='LETS_Login'] .submenu-indicator-chevron { border-color: transparent #FFF #FFF transparent; }

body[id='MyInfo'] #navbarSupportedContent li a#dropdownUser { border-bottom: 3px solid #005990; font-weight: bold; color: #005990 !important; }
body[id='MyInfo'] #navbarSupportedContent li a#dropdownUser:hover { color: #000; background-color: #C1D6E4; }
body[id='MyInfo'] #navbarSupportedContent li a#dropdownUser .submenu-indicator-chevron { border-color: transparent #FFF #FFF transparent; }

body[id*='SwitchAgency'] #navbarSupportedContent li a[href*='LETS_SwitchAgency'] { border-bottom: 3px solid #005990; font-weight: bold; color: #005990 !important; }
body[id*='SwitchAgency'] #navbarSupportedContent li a[href*='LETS_SwitchAgency']:hover { color: #000; background-color: #C1D6E4; }
body[id*='SwitchAgency'] #navbarSupportedContent li a[href*='LETS_SwitchAgency'] .submenu-indicator-chevron { border-color: transparent #FFF #FFF transparent; }

/******* 508 *******/
.form-control:focus { outline: 2px solid -webkit-focus-ring-color!important; box-shadow: none; border: 1px solid #bb0400; outline-offset: 0px; }
.form-control:required:focus { box-shadow: -5px 0 0 #000; }
/*input:required, textarea:required, select:required { box-shadow: -5px 0 0 #bb0400; margin-left: 5px; border-left: none; }
input:required:focus, textarea:required:focus, select:required:focus { outline: 2px auto -webkit-focus-ring-color; box-shadow: -5px 0 0 #bb0400!important; }
input.optionallyRequired:required, textarea.optionallyRequired:required, select.optionallyRequired:required {box-shadow: -5px 0 0 #bb0400!important;}*/
/*input:required:valid, textarea:required:valid, select:required:valid { box-shadow: -5px 0 0 #19647E; }*/
input:valid:not([type='file']):focus { border-left: 1px solid #80bdff!important; outline: 2px auto -webkit-focus-ring-color; }
input[type=checkbox]:checked, [type=radio]:checked { filter: hue-rotate(-15deg) grayscale(60%)!important; }
.card-header, .card-inner-header { background-color: #C1D6E4; }
:focus-visible, input:focus-visible, input:required:invalid:focus-visible, input:required:valid:focus-visible { outline-offset: 0px !important; }

/*
option { min-height: 1.5em; }
input::-ms-clear { display: none; width : 0; height: 0; }
.form-control { border: 1px solid #a2a2a2;font-style: normal; }
.requiredRadio { border: 1px solid #CCC; border-radius: 5px; padding: 10px 0px 6px 8px; border-left: 5px solid #bb0400; width: 100px; display: inline; }
.requiredRadio.reqFilled  { border: none; border-left: none; }
.requiredAsterisk:after { content: '\f069'; color: #bb0400; font-family: "Font Awesome 5 Pro"; padding-right: 10px; font-weight: bold; font-size: 8px; padding-left: 6px; vertical-align: super; }
.hiddenClass:after { content: '\f070'; color: #929292; font-family: "Font Awesome 5 Pro"; padding-right: 10px; font-weight: bold; padding-left: 6px; }
.hiddenClass { color: #929292; }
.skipClass:after { content: '\f343'; font-family: "Font Awesome 5 Pro"; padding-right: 10px; font-weight: bold; padding-left: 6px; }
.skipClass { color: #517e96; }
input:required.error, select.error { background-color: #f9e8e8; }
input:valid:not([type='file']) { border-left: 1px solid #a2a2a2!important; }
.dataTables_filter input:valid:not([type='file']) { border-left: 1px solid #585858!important; }*/
.subject-info-box-1, .subject-info-box-2 { float: left; width: 45%; max-width: 350px; }
.subject-info-box-1 select, .subject-info-box-2 select { height: 300px !important; min-width: 40%; min-width: 300px; padding: 0; }
.subject-info-box-1 select option, .subject-info-box-2 select option { padding: 4px 10px 4px 10px; }
.subject-info-box-1 select option:hover, .subject-info-box-2 select option:hover { background: #EEEEEE; }
.subject-info-arrows { float: left; width: 10%; }
.subject-info-arrows input { width: 70%; margin-bottom: 5px; }
.form-check-flex{
    display: inline-flex;
  flex-direction: row;
  align-items: center;
}
.form-check-flex input{
    margin-right: .5em;
}
form .row{
    align-items: end;
}
.listBox{
    height: 350px !important;
}
.w-182{
    width: 182.88px;
}
.w-186{
    width: 186.02px;
}
.w-190{
    width: 190px;
}
/* #vehicleSearchResult td{
    min-width: 300px;
} */

/*Override datatablesONE settings*/
table.dataTable > thead > tr > th,
table.dataTable > thead > tr > td {
    padding: 5px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}

table.dataTable > tbody > tr > th,
table.dataTable > tbody > tr > td {
    padding: 4px 5px;
}
#vehicleSearchResult > tbody > tr > td > button {
    padding: 1px 8px;
    font-size: 1em;
    min-height: 27px;
}
/* use v1 colors for selected row */
:root {
    --dt-row-selected: 176, 190, 217;
    --dt-row-selected-text: 0, 0, 0;
    --dt-row-selected-link: 12, 101, 146;
}
/* still need greenButton for a dropdown */
input[type="button"].greenButton { color: #346534; background-color: #dff0d8; padding: .35rem 0.5rem 0.3rem 0.5rem; border: 1px solid #a6c18e; border-radius: 4px; min-height: 38px; }
input[type="button"].amberButton { color: #612C00; background-color: #fcf8e3; padding: .35rem 0.5rem 0.3rem 0.5rem; border: 1px solid #a6c18e; border-radius: 4px; min-height: 38px; }

/* Used for the row-reorder drag handle. DataTables also has a class for this which changes your cursor as you hover,
    but I want to change its color also. */
td.reorder {
    color: #999999;
}

/* In the scenario where sorting is disabled in a datatable, this removes the sorting arrow (▲ or ▼) for all columns
    with the noTableSorting class. Useful in the situation where orderable is set to false in the column but this
    arrow wants to be removed. */
table.dataTable th.noTableSorting span.dt-column-order {
    display: none;
}

/*
 Use this to left-align numeric columns.  Datatables 2 added data type detection which
 sets text-align: right for all numeric columns.  Data type detection can be turned 
 off, but that will also turn off numeric sorting.  So use this class to override 
 the alignment part of dt-type-numeric.
*/
.LETS-left {
    text-align: left !important;
}