@import url("reset.css");
@import url("quarantine.css");
/* Core Typography */
h1, h2, h3, h4, h5, h6, p, li, dt, dd, th, td {
    /*font-size: 1.2em;*/
    line-height: 1.5;
}

a, a:visited {
    cursor: pointer;
}

    a.blue {
        color: blue;
    }

    a.nolink {
        cursor: default;
    }

hr {
    width: 100%;
    border-top: solid 1px #b9b1a8;
    border-bottom: solid 1px #d9d5d0;
    border-width: 1px 0;
    height: 0px;
    margin: 1em 0 1em 0;
}

h1, h2, h3, h4, h5, h6 {
    display: inline;
}

p {
    margin: 0 0 0.5em 0;
}

/* Page Layout Setup */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    font: 62.5% Lato, arial, sans-serif;
    color: #393b3d;
    background: #f5f9fd; /*background: #e9e6e2;*/
}

div.mainflash {
    position: absolute;
    top: 106px;
    left: 20%;
    width: 60%;
}

    div.mainflash span.outer {
        display: block;
        text-align: center;
        padding-top: 0.5em;
        padding-bottom: 0.5em;
    }

        div.mainflash span.outer span {
            display: inline-block;
            font-size: 1.4em;
            background-color: #ffffb0;
            padding-left: 1em;
            padding-right: 1em;
            padding-top: 0.5em;
            padding-bottom: 0.5em;
            vertical-align: middle;
            margin: 0px auto;
        }

div.full-width {
    width: 100%;
}

span.Header {
    background: #fff;
    height: 100px;
    border-bottom: solid 1px #d7d2cd;
    position: relative;
}

span.Login {
    height: 500px;
    position: relative;
}

span.Footer {
    background: #fff;
    height: 600px;
    padding: 1em 12px 1em 0;
    border-top: solid 1px #d7d2cd;
}

    span.Footer p {
        font-size: 0.8em;
        letter-spacing: -0.02em;
        color: #9e9795; /* Light gray */
    }

span.Datestamp {
    font-size: 12px;
    font-weight: normal;
    color: #D1CCC9; /* Date on dark background*/
}

input.ButtonOnWhite, input.ButtonOnBody, input.ButtonOnEven, input.ButtonOnOdd {
    font-size: 11px;
    font-family: Verdana,sans-serif;
    font-weight: bold;
    color: #FFF;
    width: 105px;
    height: 22px;
}

input.LongButtonOnWhite, input.LongButtonOnBody, input.LongButtonOnEven, input.LongButtonOnOdd, input.ShortButtonOnBody {
    font-size: 11px;
    font-family: Verdana,sans-serif;
    font-weight: bold;
    color: #FFF;
    width: 155px;
    height: 22px;
}

input.FatButtonOnBody, input.FatButtonOnEven {
    font-size: 11px;
    font-family: Verdana,sans-serif;
    font-weight: bold;
    color: #FFF;
    width: 105px;
    height: 37px;
}

input.Number {
    /* Right-align numbers in forms */
    text-align: right;
}

span.Title {
    /* Screen title in page header */
    font-size: 1.5em;
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: -0.04em;
}

Span.Subtitle {
    /* In page header */
    font-size: 0.8em;
    color: #878282; /* Medium grey */
}

span.Minititle { 
    border: 0;
    font-weight: 200;
    font-size: 11px;
    color: #CC0000;
    padding: 2px;
    width: 50px;
    word-wrap: break-word;
    display: inline-block; 
}

span.EquipmentSubtitle {
    /* Used in Queue Detail and Search Detail */
    font-size: 12px;
    font-weight: bold;
}

span.EquipmentSubtitleInverse {
    border: 0;
    font-family: Lato, arial;
    font-weight: bold;
    font-size: 11px;
    color: #00CCCC;
}

span.FormTitle, span.FormRightTitle {
    /* Data entry form titles */
    font-size: 12px;
    font-weight: bold;
    padding-bottom: 0.3em;
    display: inline;
}

span.FormRightTitle {
    float: right;
    display: inline;
}

span.FormLabel {
    /* Data entry form labels */
    font-size: 12px;
    font-weight: normal;
}

span.FormComment, /* Data entry comments are dark, smaller */ div.FormComment {
    color: #627074;
    font-size: 11px;
}

div.FormComment {
    padding-top: 3em;
}

.ScrollablePanel {
    display: inline;
    /*width: 100%;*/ /*Remove width to prevent horizontal scroll bar on the page*/
    min-height: 200px; /* max-height: 600px; */
    background-color: #fefeff;    
}
.SearchFilterPanel {    
}

Table {
    border: 0;
    font-family: Lato, arial;
    font-size: 14px;
}

    Table th {
        /* Headers are white on dark */
        background-color: #627074;
        color: #FFFFFF;
        font-size: 1.0em;
    }

    Table td {
        padding: 3px;
    }

    Table.Summary, Table.Detail, Table.Admin, Table.AdminSmall, Table.AdminForm {
        width: 100%; /* border-bottom: solid 1px #bfb9b1; */
    }

    Table.Legend {
        /* Dashboard legends */
        width: 100%;
        background-color: #C7C1C0;
        border: 1px solid black;
        border-spacing: 5px;
        border-collapse: separate; /* To allow border-spacing to work */
    }

    Table.AdminSmall {
        font-size: 10px;
    }

    Table.Summary th {
        height: 36px;
    }

    Table.Summary th, Table.Summary td, Table.Detail th, Table.Detail td {
        padding: 7px 20px;
        vertical-align: middle;
    }

    Table.Summary th {
        /* Summary table header: center, font, borders & bg */
        font-size: 1.1em;
        text-align: center;
        border-left: solid 1px #978380;
        background-color: #393b3d;
    }

    /*Since we are removing Hover, New and Alternate rows from Drivewyze, we need to have a border*/
    Table.Summary tr {
        /*background-color: rgba(243, 246, 249, 0.50);*/
    }

    Table.Detail th {
        /* Detail table header: left, font, borders & bg */
        font-size: 12px;
        text-align: left;
        background-color: #393b3d;
    }

    Table.Detail td.Overview {
        /* Detail table image column 1 */
        padding: 0px 0px;
        vertical-align: top;
    }

    Table.AdminSmall th {
        /* Small admin table header: font, borders & bg */
        font-size: 12px;
        border-left: solid 1px #978380;
        background-color: #393b3d;
    }

    Table.Admin th {
        /* Admin table header: center, font, borders & bg */
        font-size: 12px;
        text-align: center;
        border-left: solid 1px #978380;
        background-color: #393b3d;
    }

    Table.Summary td {
        /* Summary table: most cells are centered & bold */
        padding-top: 5px;
        padding-bottom: 5px;
        border-left: solid 1px #ffffff;
        /*text-align: center;*/
        font-weight: bold;
    }
 
    Table.AdminSmall td {
        /* Admin table */
        padding-top: 5px;
        padding-bottom: 5px;
        border-left: solid 1px #ffffff;
    }

    Table.Admin td {
        /* Admin table: non-info cells are centered & bold */
        padding-top: 5px;
        padding-bottom: 5px;
        border-left: solid 1px #ffffff;
        text-align: center;
        font-weight: bold;
    }

        Table.Admin td.Info {
            /* Admin table: Info cells are left-justified, not bold */
            text-align: left;
            font-weight: normal;
        }

    Table.Summary td.Info {
        /* Summary table: Vehicle info and Alert info cells are left-justified, not bold */
        text-align: left;
        font-weight: normal;
    }

    Table.Summary td.Alert {
        /* Summary table: Alert info cells have different bg color */
        color: #000;
        font-size: 1em;
        line-height: 1.4;
        padding: 0.75em 0 0.75em 32px; /* background: #8b0000!important; /* Red for alerts. NB To override HTML styles, use "!important"  NB We no longer set color here; done in code instead */
    }

    Table.Detail th.AlertData, td.AlertData {
        /* Admin table: Alert cells have different bg color so use white text */
        color: #fff;
        font-size: 12px;
        border-bottom: solid 1px #fff;
        background: #8b0000; /* Red for alerts. To override HTML styles, use "!important" */
    }

    Table.Detail th.AlertName, td.AlertName {
        /* Admin table: Alert cells have different bg color so use white text */
        color: #fff;
        font-weight: bold;
        font-size: 12px;
        background: #8b0000; /* Red for alerts. To override HTML styles, use "!important" */
    }

    Table.Detail td.AlertName {
        border-bottom: solid 1px #fff;
    }

    Table.Detail th.AlertName {
        /* Admin table: Alert header cell has an icon as well */
        background: #8b0000 url(Images/ico-alert.gif) no-repeat 13px 50%; /* Red for alerts. To override HTML styles, use "!important" */
        padding: 0px 0px 0px 47px;
    }

    Table.Detail td.AlertData h4 {
        padding-left: 0.5em;
    }

    Table.Detail td.Wim {
        /* Detail Wim table */
        text-align: left;
        font-weight: normal;
        border-bottom: solid 1px #f5f9fd; /*border-bottom: solid 1px #e9e6e2;*/ /* Kluge to get rid of border */
    }

    Table.Summary td.first {
        border-left: none;
    }

    Table.Summary td.controls {
        font-size: 0.9em;
        line-height: 1;
        text-align: left;
    }

        Table.Summary td.controls input, Table.Summary td.controls a {
            float: left;
            margin-top: 0.2em;
            white-space: nowrap;
        }

        Table.Summary td.controls label {
            padding-left: 0.8em;
            margin-top: 0;
        }

    table.Form td.label {
        padding-right: 1em;
    }

    Table .SmallDate /* For date part of date/time on summary page */ {
        font-size: 10px;
    }
    
    Table .Time{
        font-size:14px;
        font-weight:700;
    }

    Table .FontLight{ 
        color: #f6f6f6;
    }
    Table .FontDark{
        color: #363740 
    }
    

    Table.Summary td h4 {
        padding-right: 15px;
    }

    Table.Summary td h4:empty {
        padding: 0;
        display: none;
    }

    Table span.Key /* For USDOT #, ISS, axle titles in Summary page */ {
        /*padding: 2px 5px 2px 2px;*/ /*If we increase the size of SmallFont we will go back to 5 px padding on the right side.*/
        padding: 2px;
        width: 50px;
        word-wrap:break-word;
        display: inline-block;
    }
    Table span.Value /* For USDOT #, ISS, axle titles in Summary page */ {
        padding: 2px;
        min-width:100px;
        word-wrap:break-word;
        display: inline-block; 
        cursor:default;
    }

    Table.Summary td span.StationClosed {
        /* Do not show red background */
       /* border-radius: 10px;
        background-color: #CD2649;
        color: #fff;
        padding: 4px 10px;
        text-align: center;
        */
        cursor:default;
    }

    Table.Summary td span.StationOpen {
        /* Do not show green background */
        /*border-radius: 10px;
        background-color: #116667;
        color: #fff;
        padding: 4px 10px;
        text-align: center;
        */
        cursor:default;
    }

    Table span.Highlight,
    Table td.Alert div.Highlight {
        border-radius: 10px;
        background: var(--ice-blue, #ECF6FC);
        color: #363740;
        padding:0px 7px;
        margin-top: 2px;
        margin-bottom: 1px;
        text-align:center;
        cursor:default;
        min-width:initial; /* Value class and Highlight class go together forcing min-width to be 100px. When highlighted that looks weird so we will set this property to initial */
    }

    Table span.RedFont /* For USDOT #, ISS, axle titles in Summary page */ {
        color: red;
    }

    Table span.SmallFont /* For USDOT #, ISS, axle titles in Summary page */ {
        /* Font size was 11px with no setting for font-weight. 
            Suggestion provided by UX team was to increase the font-size to 14px;
        */
        font-size: 11px;
        font-weight: 200;
    }

    Table span.MediumFont /* For axle info, ... */ {
        font-size: 14px;
    }

    Table tr.HeaderRow {
        position: sticky;
        top: 0;
    }

    Table tr.HoverNew, tr.NoHoverNew {
        /* New row, changes color on hover (or not) */ /*background-color: #D26262; */
        background-color: #FFFAB4;
    }

    Table tr.HoverOdd, td.HoverOdd, tr.NoHoverOdd, td.NoHoverOdd {
        /* Existing row (odd), changes color on hover (or not) */
        background-color: #cfcfcf;
    }

    Table tr.HoverErrorOdd {
        /* Existing error row (odd), changes color on hover */
        background-color: #F7F8AB; /* Light yellow */
    }

    Table tr.HoverEven, td.HoverEven, tr.NoHoverEven, td.NoHoverEven {
        /* Existing row (even), changes color on hover (or not) */ /*background-color: #D7D3CE;*/
        /*background-color: #f5f9fd;*/
        background-color: #fff;
        border-top: solid 1px #bfb9b1;
        border-bottom: solid 1px #bfb9b1;
    }

    Table tr.HoverErrorEven {
        /* Existing error row (even), changes color on hover */
        background-color: #FBDF7C; /* Wheat */
    }

    Table tr.HoverOdd:hover, tr.HoverEven:hover, tr.HoverNew:hover, tr.HoverErrorEven:hover, tr.HoverErrorOdd:hover {
        /*border: 2px inset #BEBE66 !important;*/ /*background-image: -webkit-gradient(     linear,     center bottom,    center top,     color-stop(1.5, #F5F5F5),     color-stop(.005, #bfb9b1));     background-image: -moz-linear-gradient(         center bottom,      #F5F5F5 150%,   ##bfb9b1 .5%);*/ /*box-shadow: inset 0 0 25px maroon !important;*/
        box-shadow: inset 0px 0px 6px 6px #6699cc !important;
        /*filter: brightness(.9);*/
    }

    Table tr.Hover2:hover {
        /* Used in ScreeningSettings */
        background-color: #DBF1CD !important; /* We can override HTML by using "!important" */
    }

    Table.QueueIcon, Table.QueueIconCurrent {
        /* Detail screen navigation icons - prev, current, next, top vehicle*/
        border: solid 1px #877E7B;
        width: 110px;
        height: 81px;
        vertical-align: top;
        text-align: center;
    }

/*Begin: New Show Details Button/LinkButton */
tr .ShowOnHover {
    visibility: hidden;
}

tr:hover .ShowOnHover {
    visibility: visible;
}

tr.LiveSummaryInspecting {
    /*background: coral !important;*/
    background: rgb(159, 232, 245) !important;
    /*Hex value #9fe8f5*/
}

input.ShowDetails, a.ShowDetails {
    text-decoration: none;
    font-style: normal;
    font-weight: 600;
    line-height: 22px; /* 169.231% */
    letter-spacing: 0.46px;
    text-transform: capitalize;
    font-size: 14px;
    display: flex;
    align-items: center;
    padding: 4px 10px;
    color: var(--light-text-primary, #363740);
    border-radius: 4px;
    -moz-border-radius: 4px;
    border: 1px solid var(--medium-grey, #979DAC);
    background: var(--ice-blue, #ECF6FC);
}

    input.ShowDetails:hover, a.ShowDetails:hover {
        cursor: pointer;
        /*color: #333;*/
    }

    input.ShowDetails:disabled {
        cursor: default;
        color: #aaa;
        border: #aaa 1px solid;
    }
/*End: New Show Details Button/LinkButton */

Table.QueueIcon {
    /* Detail screen navigation icons - prev, next, top vehicle*/
    background-color: #DCD8D4;
}

Table.QueueIconCurrent {
    /* Detail screen navigation icons - current vehicle */
    font-weight: bold;
    background-color: #BBB7B0;
}

    Table.QueueIcon td, Table.QueueIconCurrent td {
        /* Detail screen navigation icons - prev, current, next, top vehicle*/
        padding: 0;
        padding-left: 10px;
    }

Table.QueueIcon:hover {
    background-color: #BEB76B;
}

Table.RawData td {
    vertical-align: top;
}

Table.Detail h3 {
    display: inline;
    font-size: 12px;
}

Table.Detail h4 {
    display: inline;
    font-size: 24px;
    line-height: 1;
    letter-spacing: -0.02em;
    margin: 0.25em 0;
    vertical-align: top;
    padding-right: 10px;
}

    Table.Detail h4.missing-value {
        color: #A4A09A;
    }

Table.Detail img {
    border: solid 2px #aea5a2;
}

    Table.Detail img.NoBorder {
        border: none;
    }

Table.Detail:hover {
    /* Don't change color */
}

Table td.QueueDetailCell {
}

    Table td.QueueDetailCell:hover {
        /* Don't change color */
    }

Table.ReportOrRelease {
    background-color: #D7D3CE;
    margin-bottom: 2em;
}

/* Dashboard */

td.OnlineIcon, td.OfflineIcon, td.AlertIcon, td.NoAlertIcon, td.AlertType1Icon, td.AlertType2Icon, td.AlertType3Icon, td.AlertType4Icon, td.AlertType5Icon, td.AlertType6Icon, td.AlertType7Icon, td.AlertType8Icon, td.AlertType9Icon {
    font-weight: normal;
    font-size: 11px;
    text-align: center;
    padding-left: 48px;
    background-repeat: no-repeat;
    background-position: left;
}

td.OnlineIcon {
    background-image: url(Images/indicator_on.gif);
    background-position: 1em 50%;
}

td.OfflineIcon {
    background-image: url(Images/indicator_off.gif);
    background-position: 1em 50%;
}

td.AlertIcon {
    background-image: url(Images/alert.gif);
}

td.NoAlertIcon {
    background-image: url(Images/no_alert.gif);
}

td.AlertType1Icon {
    background-image: url(Images/alertType1.gif);
}

td.AlertType2Icon {
    background-image: url(Images/alertType2.gif);
}

td.AlertType3Icon {
    background-image: url(Images/alertType3.gif);
}

td.AlertType4Icon {
    background-image: url(Images/alertType4.gif);
}

td.AlertType5Icon {
    background-image: url(Images/alertType5.gif);
}

td.AlertType6Icon {
    background-image: url(Images/alertType6.gif);
}

td.AlertType7Icon {
    background-image: url(Images/alertType7.gif);
}

td.AlertType8Icon {
    background-image: url(Images/alertType8.gif);
}

td.AlertType9Icon {
    background-image: url(Images/alertType9.gif);
}

.scale .weight {
    font-weight: bold;
    font-size: 1.3333em; /* 16px */
    line-height: 1;
    color: #837b78;
}

.scale .spacing {
    font-weight: bold;
    font-size: 1.3333em; /* 16px */
    line-height: 1;
    color: #837b78;
}

.scale .overweight {
    font-weight: bold;
    font-size: 1.3333em; /* 16px */
    line-height: 1;
}

.scale .unit {
    font-size: 0.6em;
}

.scale .atis {
    /* used for ATIS axle info ("wheel", "hub", "tire", ... */
    font-weight: bold;
    text-align: right;
    font-size: 0.8em;
}

/* Bright Creative */

h1 span {
}
/* counteract span above, remove when no longer necessary */

#container {
    min-height: 100%;
}

#main {
    height: 100%; 
    padding-bottom: 2.5em;
}
#main div.control-header{
    float:right;
}

form {
    height: 99.9%; /* hack to get rid of a 1 pixel excuse to create a scrollbar */
}

#footer {
    /*    font: 62.5% Lato, arial, sans-serif; */
    color: #393b3d;
    background: #f5f9fd; /*background: #e9e6e2;*/
    position: relative;
    margin-top: -4.5em;
    width: 100%;
    height: 4.5em;
    clear: both;
    position: fixed;
    top: 100%;
}

hr {
    width: 100%;
    border-top: solid 1px #b9b1a8;
    border-bottom: solid 1px #d9d5d0;
    border-width: 1px 0;
    height: 0px;
    margin: 2em 0 2em 0;
}

    hr.vertical-space {
        width: 0%;
        margin: 2em;
    }

    hr.vertical-space-half {
        width: 0%;
        margin: 1em;
    }

    hr.vertical-space-quarter {
        width: 0%;
        margin: 0.5em;
    }

/* -- GLOBAL HEADER -- */
#header {
    background: #fff;
    height: 100px;
    position: relative;
    padding-left: 225px;
}

    #header .branding {
        position: absolute;
        top: 0;
        left: 12px;
        height: 80px;
        padding: 10px 0px;
    }

    #header h1 {
        font-size: 2.4em;
        line-height: 1.5;
        letter-spacing: -0.04em;
    }

        #header h1 span.FormComment {
            padding-left: 12px;
        }

    #header p, #header .logout-link {
        color: #9e9795;
        letter-spacing: -0.02em;
        margin: 0;
    }

        #header .logout-link:hover {
            color: #0000ff;
        }

    #header .titles, .displaySummary {
        display: block;
        float: left;
        padding-top: .35em;
        padding-right: 1.0em;
    }

        #header .titles p, .displaySummary p {
            line-height: 1.4;
        }

    #new-header .displaySummary,
    #header .displaySummary {
        color: #76716e; /* Slightly grayed-out text */
        background-color: #D9DAFC; /* Light blue-gray */
    }

/*    #header .inspectionStatusDisplay {
        width: 303px;
        margin-left: 5px;
        display: inline-block;
        height: 85px;
        background-color: #e3e3e3;
        font-size: 1.2em;
        padding: 5px;
        overflow: auto;
    }

*/
/*#header .inspectionStatusDisplay > div {
            margin: 3px 0;
        }*/

/*        #header .inspectionStatusDisplay span {
            display: inline-block;
            padding: 5px;
        }

        #header .inspectionStatusDisplay table { 
            border-collapse: separate;
            border-spacing: 3px;
            font-size: 9px;
        }

            #header .inspectionStatusDisplay span.inspect,
            #header .inspectionStatusDisplay a.inspect,
            #header .inspectionStatusDisplay input.inspect {
                display: inline-block;
                font-size: .9em;
                padding: 3px;
                margin: 0 3px;
            }

            #header .inspectionStatusDisplay span.inspect {
                cursor: default;
            }

        #header .inspectionStatusDisplay a.inspect,
        #header .inspectionStatusDisplay input.inspect {
            cursor: pointer
        }

        #header .inspectionStatusDisplay .success {
            background-color: #B9FAC2;
            border: 1px solid black;
        }

        #header .inspectionStatusDisplay .warn {
            background-color: #F7F19B;
            color: #888;
            border: 1px solid black;
        }

        #header .inspectionStatusDisplay .fail {
            background-color: #FAB9C2;
            color: #006dc5;
            border: 1px solid black;
        }

        #header .inspectionStatusDisplay .disable {
            background-color: #eee;
            color: #888;
            border: 1px solid #888;
            cursor: not-allowed !important;
        }

*/
    #new-header .controls,
    #header .controls {
        position: absolute;
        right: 12px; /* top: 38px; */ /* This centers the controls in the header */
        top: 65px;
    }

    #header .title-center {
        position: absolute;
        left: 400px;
        top: 38px;
    } 

    #new-header .dwbranding{
        display:inline;
    }
    #header .dwbranding {
        display: inline;
        width: 200px;
    }

    #new-header .srisbranding,
    #header .srisbranding {
        display: none;
    }

/* dividing header */
.dividing-header {
    color: #fff;
    letter-spacing: -0.02em;
    border-bottom: solid 1px #fff;
    background-color: #393b3d;
    padding: 0px 12px;
    /*position: relative;*/ /*Comment this to allow dividing header to go into background so User Profile Menu can be displayed properly*/
    height: 36px;
}

.doublehigh {
    /*height: 72px !important;*/
    height: auto;
}

.dividing-header .wrap {
    width: auto;
    overflow: hidden;
    display: block;
    padding: 8px 0px;
}

    .dividing-header .wrap .centering {
        width: 100%;
        overflow: hidden;
        display: block;
        text-align: center;
    }

.dividing-header .header-menu-right .wrap {
    display: block;
    overflow: hidden;
    padding: 8px 0;
    width: auto;
}

.dividing-header .wrap .rightside {
    display: inline-block;
    overflow: hidden;
    float: right;
}

    .dividing-header .wrap .rightside .control {
        display: inline;
        float: left;
        padding-left: 3em;
    }

        .dividing-header .wrap .rightside .control input {
            display: inline;
            padding-bottom: 2px;
            margin-right: 0;
        }

        .dividing-header .wrap .rightside .control .Dropdown {
            letter-spacing: normal;
        }

        .dividing-header .wrap .rightside .control label {
            padding-left: 1em;
        }

.dividing-header a.image-link {
    display: inline-block;
    float: right;
    width: 32px;
    height: 32px;
    background-repeat: no-repeat;
}

.dividing-header a.refresh {
    background-image: url(Images/refresh.png);
}

.dividing-header a.back {
    margin-top: 3px;
    margin-right: 4px;
    background-image: url(Images/back.png);
}

.dividing-header a.image-link:hover {
    background-position: 100% -32px;
}

.dividing-header a.image-link:active {
    background-position: 100% -64px;
}

.dividing-header .wrap .rightside .control .control-part {
    display: inline;
    font-size: 1.2em;
}

    .dividing-header .wrap .rightside .control .control-part input {
        display: inline;
    }

.dividing-header .wrap .rightside .control label.left {
    padding-right: 1em;
}

.dividing-header .Dropdown {
    display: block;
    float: right;
}

.dividing-header h2 {
    font-size: 1.2em;
    display: inline;
}

    .dividing-header h2.shared {
        float: left;
    }

.dividing-header p {
    margin: 0;
}

.dividing-header .context {
    color: #c7c1c0;
    font-weight: normal;
    padding-left: 0.5em;
}

.dividing-header .datestamp {
    font-size: 1.2em;
    color: #9c9c9c;
    margin-left: 12px;
}

.dividing-header .alerts {
    position: absolute;
    top: 0;
    right: 0;
    width: 35%;
    height: 100%;
    padding-left: 48px;
    color: #fff;
    background: #8b0000 url(Images/ui/header-alert-bg.gif) no-repeat 0 0;
}

    .dividing-header .alerts h3 {
        margin: 0;
        padding-top: 7px;
    }

.dividing-header .header-menu {
    float: right;
}

.dividing-header .header-menu-left {
    float: left;
    padding-left: 4px;
}

.dividing-header .header-menu-right {
    float: right;
    padding-right: 4px;
}


.dividing-header a, .dividing-header a.visited {
    color: #fff;
    text-decoration: none;
}

    .dividing-header a:hover {
        text-decoration: underline;
    }

/* form */
.alt {
    background: #d3cec7;
}

input, textarea {
    font: 1.2em Lato, arial, sans-serif;
    display: block;
    padding: 3px 2px;
    color: #584d4b;
    border: solid 1px #aea5a2;
}

    input:focus, textarea:focus {
        color: #000;
    }

    input.input-checkbox {
        padding: 0;
        border: none;
        display: inline;
        width: auto !important;
    }

label {
    font-size: 1.2em;
    line-height: 1.8;
}

.form-area {
    background-color: #fefeff;
    width: 100%;
    overflow: hidden;
    /* position: relative; -moz-box-shadow: inset 1px 1px 2px #a2a2a2;     -webkit-box-shadow: inset 1px 1px 2px #a2a2a2;     box-shadow: inset 1px 1px 2px #a2a2a2;*/
    border: 1px solid #a2a2a2;
    border-radius: 5px;
    -moz-border-radius: 5px;
}

    .form-area .form-area {
        background-color: transparent;
        border: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    .form-area .wrap {
        /*background: url(Images/ui/form-top.gif) no-repeat 50% 0;*/
        padding: 5px 0 0 0;
    }

    .form-area .wrap2 {
        /*background: url(Images/ui/form-bot.gif) no-repeat 50% 100%;*/
        padding: 0 0 5px 0;
    }

    .form-area .wrap3 {
        /*background: url(Images/ui/form-l.gif) repeat-y 0 0;*/
        padding: 16px 24px;
        padding-bottom: 30px;
    }

    .form-area .wrap4 {
        width: 100%;
        overflow: hidden;
    }


    .form-area.action {
        background: #fefeff;
        width: 100%;
        overflow: hidden;
        position: relative;
        border: none;
    }

        .form-area.action .wrap {
            padding: 12px 30px;
        }

        .form-area.action .wrap2 {
            width: 100%;
            overflow: hidden;
        }

        .form-area.action hr, .form-area hr {
            margin: 2em 0 0 0;
            display: block;
            height: 1px;
            border: 0;
            border-top: 1px solid #666;
        }

    .form-area .tl {
        display: block;
        position: absolute;
        top: 0;
        left: 0; /*background: url(Images/ui/form-top.gif) no-repeat 0 0;*/
        width: 5px;
        height: 5px;
    }

    .form-area .tr {
        display: block;
        position: absolute;
        top: 0;
        right: 0; /*background: url(Images/ui/form-top.gif) no-repeat 100% 0;*/
        width: 5px;
        height: 5px;
    }

    .form-area .bl {
        display: block;
        position: absolute;
        top: 100%;
        margin-top: -5px;
        left: 0; /*background: url(Images/ui/form-bot.gif) no-repeat 0 0;*/
        width: 5px;
        height: 5px;
    }

    .form-area .br {
        display: block;
        position: absolute;
        top: 100%;
        margin-top: -5px;
        right: 0; /*background: url(Images/ui/form-bot.gif) no-repeat 100% 0;*/
        width: 5px;
        height: 5px;
    }

    .form-area .form-row, .form-area .form-row-full, .form-area .form-row-double, .form-area .form-row-dynamic {
        width: 95%;
        overflow: hidden;
        padding: 1em 2em;
    }

    .form-area .form-row-radio, .form-area .form-row-selection, .form-area .form-row-minimal, .form-area .form-row-header {
        width: 98%;
        overflow: hidden;
        padding-left: 2em;
    }

    .form-area .form-row-radio, .form-area .form-row-header {
        padding-top: 1em;
    }

    .form-area .form-table-topper {
        overflow: hidden;
        padding-top: 1em;
        padding-left: 4px;
        padding-right: 4px;
    }

    .form-area .dependent {
        padding-left: 4em;
    }

    .form-area .form-row-minimal .checkbox-labelled {
        display: inline-block;
        padding-right: 3em;
        padding-top: 1.8em;
        float: none;
    }

    .form-area .form-row-selection {
        padding-top: 1.8em;
    }

        .form-area .form-row-selection .entry {
            display: inline-block;
        }

            .form-area .form-row-selection .entry table {
                display: inline;
            }

            .form-area .form-row-selection .entry.last-of-type {
                padding-right: 6em;
            }

            .form-area .form-row-selection .entry .Textbox {
                display: inline;
            }

            .form-area .form-row-selection .entry.initial label {
                width: 10em;
            }

            .form-area .form-row-selection .entry.initial select {
                min-width: 8em;
            }

            .form-area .form-row-selection .entry label.divider {
                padding-left: 3em;
                padding-right: 3em;
            }

    .form-area .form-row-half {
        width: 49.9%;
        float: left;
    }

    .form-area label, .admin-area .form-area span.entry .right-label {
        display: inline-block;
        padding-right: 0.8em;
        line-height: 1.8;
    }

span.align-top {
    vertical-align: top;
}

.form-area p {
    width: 40%;
    float: left;
    display: block;
    font-size: 1.2em;
    margin: 0;
}

.form-area .form-row input {
    float: right;
}

.form-area .form-row select {
    float: right;
}

.form-area .buttons, .form-area .buttons-small {
    float: right;
}

.form-area .buttons-entry {
    float: left;
}
/* full row, small form widths */
.form-area .form-row label {
    width: 40%;
}

.form-area .form-row input {
    width: 55%;
}

.form-area .form-row .validation-error {
    width: 55%;
    float: right;
}

.form-area .form-row select {
    width: 55.7%;
}
/* full row, large form widths */
.form-area .form-row-full label, .form-area .form-row-dynamic label {
    width: 12%;
}

.form-area .form-row-full input {
    display: inline;
    width: 83%;
}

.form-area .form-row-full select {
    display: inline;
    width: 83.7%;
}

.form-area .form-row-full textarea {
    display: inline;
    width: 83%;
}
/* half row, large form widths */
.form-area .form-row-half label {
    width: 24%;
}

.form-area .form-row-half input {
    display: inline;
    width: 60%;
}

.form-area .form-row-half select {
    display: inline;
    width: 60.8%;
}

    .form-area .form-row-half select.jurisdiction {
        width: 20em;
    }

    .form-area .form-row-half select.timezone {
        width: 60%;
    }

.form-area .form-row-half textarea {
    display: inline;
    width: 60%;
}

.form-area .form-row-full input.input-text-short {
    display: inline;
    width: 10%;
}

.form-area .form-row-half input.input-text-short {
    display: inline;
    margin-right: 1em;
    width: 20.5%;
}

.form-area .required {
    color: red;
    font-size: 150%;
    font-weight: bold;
    padding-left: 0.5em;
}

.form-area .form-title {
    font-size: 2em;
    letter-spacing: -0.04em;
}

.form-area span.entry label {
    padding-right: 1em;
}


/* -- Reusables -- */
th {
    color: #fff;
    background: #627074;
    text-align: left;
}

    th .context {
        color: #c7c1c0;
        font-weight: normal;
    }

.even td, tr.even {
    /*background-color: #f5f9fd;*/
    background-color: #fff;
    border-top: solid 1px #bfb9b1;
    border-bottom: solid 1px #bfb9b1;
}

.odd td, tr.odd {
    background-color: #CFCFCF;
}

.error-odd td, tr.error-odd {
    background-color: #FFFFC0; /* Light yellow */
}

.error-even td, tr.error-even {
    background-color: #FFEFA0; /* darker yellow */
}

.new td, tr.new {
    background-color: #d7f0ce;
}

td.disabled {
}

.alerts a, .alerts a:visited {
    color: #fff;
    font-weight: bold;
    text-decoration: none;
}

.alerts .view, .alerts .view:visited {
    font-weight: normal;
    color: #d19999;
}

input[disabled], input[readonly] {
    background: #ebebe4;
}

input[type='checkbox'][disabled] {
    background: #d9d3cc;
}

/* buttons */

.buttons li {
    display: block;
    float: left;
    color: #fff;
    text-decoration: none;
    margin: 0;
    margin-left: 4px;
    padding: 0;
    list-style: none;
}

    .buttons li:empty {
        margin: 0;
    }

.buttons-small li, .buttons-entry li {
    height: 21px; /*background: #886d6a url(Images/ui/button-brown-sm.gif) no-repeat 100% 0;*/
}

.buttons-large li {
    height: 37px; /*background: #886d6a url(Images/ui/button-brown-lg.gif) no-repeat 100% 0;*/
}

    /*  */
    /*,input.ButtonOnOdd:hover,input.ButtonOnWhite:hover, input.ButtonOnBody:hover,input.ButtonOnEven:hover */

    .buttons li input.button, .buttons-large li input.button, .buttons-small li input.button, .buttons-entry li input.button, .details-area .buttons li.large input.button, .data-table tr li input.button, input.LongButtonOnEven, input.LongButtonOnOdd, input.LongButtonOnBody, input.LongButtonOnWhite, input.ShortButtonOnBody, input.FatButtonOnBody, input.FatButtonOnEven, input.ButtonOnOdd, input.ButtonOnWhite, input.ButtonOnBody, input.ButtonOnEven {
        background-color: #008de5;
        -moz-box-shadow: inset 0 -5px 5px #006dc5;
        -webkit-box-shadow: inset 0 -3px 3px #006dc5;
        box-shadow: inset -2px -3px 3px #006dc5;
        border: 1px solid #006dc5;
        border-radius: 10px;
        -moz-border-radius: 10px;
        padding: 3px 7px;
        text-decoration: none;
        color: #f6f6f6;
    }

        .buttons li input.button:hover, .buttons li input.button:hover, .buttons-large li input.button:hover, .buttons-small li input.button:hover, .buttons-entry li input.button:hover, .details-area .buttons li.large input.button:hover, .data-table tr li input.button:hover, input.LongButtonOnEven:hover, input.LongButtonOnOdd:hover, input.LongButtonOnBody:hover, input.LongButtonOnWhite:hover, input.ShortButtonOnBody:hover, input.FatButtonOnBody:hover, input.FatButtonOnEven:hover, input.ButtonOnOdd:hover, input.ButtonOnWhite:hover, input.ButtonOnBody:hover, input.ButtonOnEven:hover {
            -moz-box-shadow: inset 0 -5px 5px #008de5;
            -webkit-box-shadow: inset 0 -3px 3px #008de5;
            box-shadow: inset -2px -3px 3px #008de5;
            background-color: #00ade5;
            border: 1px solid #008de5;
            color: #fff;
        }

    .buttons-large li input.disabled, .buttons-small li input.disabled, .buttons-entry li input.disabled, .details-area .buttons li.large input.disabled, .buttons-large li input.disabled:hover, .buttons-small li input.disabled:hover, .buttons-entry li input.disabled:hover, .details-area .buttons li.large input.disabled:hover, .buttons li input.disabled, .buttons li input.disabled:hover {
        background-color: #c9c9c9;
        -moz-box-shadow: inset 0 -5px 5px #a9a9a9;
        -webkit-box-shadow: inset 0 -5px 5px #a9a9a9;
        box-shadow: inset 0 -5px 5px #a9a9a9;
        border: 1px solid #a9a9a9;
        color: #f6f6f6;
    }

.buttons-small li input.button, .buttons-entry li input.button {
    font-size: 0.91665em; /* 11px */
    line-height: 20px;
    height: 21px;
    padding: 0 8px;
    margin-left: -1px;
}

.buttons-large li input.button {
    font-size: 1.5em; /* 18px */
    line-height: 37px;
    height: 37px;
    padding: 0 16px;
    margin-left: -1px;
}


/* -- USER LOGIN -- */
.user-login #header {
    border-bottom: solid 1px #d7d2cd;
}

    .user-login #header h1 {
        display: block;
        padding-top: 8px;
    }

#login {
    padding: 30px 12px;
}

    #login .wrap {
        width: 100%;
        overflow: hidden;
    }

    #login .col-1 {
        float: left;
        width: 500px;
        margin-left: 15%;
        margin-top: 4%;
    }

    #login .col-2 {
        float: left;
        width: 40%;
    }

    #login .form-area {
        margin-bottom: 2em;
    }

    #login .buttons {
        padding-top: 8px;
    }

/* -- Search -- */
div.search-criteria {
    padding: 15px 12px;
}

    div.search-criteria span.title {
        font-family: Lato, arial;
        font-size: 12px;
        font-weight: bold;
        padding-bottom: 0.5em;
        display: inline-block;
    }

    div.search-criteria span.title-comment {
        padding-left: 3em;
        padding-bottom: 2em;
    }

    div.search-criteria div {
        padding-top: 0.4em;
        padding-left: 2em;
        width: auto;
    }

    div.search-criteria span.name {
        display: inline-block;
        font-family: Lato, arial;
        font-size: 11px;
        color: #627074;
        width: 8em;
        text-align: left;
    }

    div.search-criteria span.value {
        font-family: Lato, arial;
        font-size: 11px;
        font-weight: bold;
        color: #CC0000;
        border: 0;
        padding-left: 2em;
    }

/* -- ADMINISTRATION TEMPLATES -- */
#admin #header {
    /*border-bottom: solid 1px #d7d2cd;*/
}

.admin-area {
    border-top: 1px solid #4868a0;
    padding: 15px 12px;
    padding-bottom: 20px;
}

    .admin-area .buttons {
        float: right;
        padding-bottom: 1em;
        background-color: inherit;
    }

    /*
.admin-area .buttons li input.button
{
    background-color: #008de5;
    border: 1px solid #006dc5;
    border-radius: 10px;
    padding: 5px 10px;
}
.admin-area .buttons li input.button:hover
{
    background-color: #00ade5;
}*/

    .admin-area .form-area {
        clear: both;
    }

        .admin-area .form-area td {
            font-size: 100%;
        }

        .admin-area .form-area h2 {
            margin-bottom: 1em;
        }

        .admin-area .form-area .Checkbox input {
            display: inline;
            width: auto;
            margin-top: 5px;
        }

        .admin-area .form-area .Dropdown {
            display: inline;
            width: auto;
            margin-top: 5px;
            margin-right: 2em;
        }

        .admin-area .form-area .RadioButton input {
            display: inline;
            width: auto;
            vertical-align: middle;
        }

        .admin-area .form-area .RadioButton label {
            width: auto;
            float: right;
        }

        .admin-area .form-area input.percentage {
            width: 5em;
        }

        .admin-area .form-area input.date {
            width: 11em;
        }

        .admin-area .form-area .right-label, .admin-area .form-area .Checkbox label {
            display: inline;
            width: auto;
            font-size: 1.2em;
            float: none;
            padding-left: 0.5em;
        }

        .admin-area .form-area .buttons-small, .admin-area .form-area .buttons-entry {
            display: inline;
            width: auto;
            font-size: 1em;
        }

            .admin-area .form-area .buttons-small li, .admin-area .form-area .buttons-entry li {
                width: 100%;
            }

                .admin-area .form-area .buttons-small li input.button, .admin-area .form-area .buttons-entry li input.button {
                    display: block;
                    white-space: nowrap;
                    color: #fff;
                    border-style: none;
                    font-size: 0.91665em; /* 11px */
                    line-height: 20px;
                    height: 20px;
                    padding: 0 8px;
                    width: 100%;
                }

    .admin-area [disabled] td {
        /*color: #a0a0a0;*/
    }

    .admin-area span[disabled] label {
        /*color: #a0a0a0;*/
    }

/* details (VehicleQueueDetail, VehicleSearchDetail) */
.vehicle-details #main .dividing-header {
    padding-right: 0px;
}

.vehicle-details .dividing-header span {
    margin-right: 1em;
    font-size: 110%;
}

.vehicle-details .dividing-header .header-menu-left {
    width: 60%;
    height: 100%;
}

.dividing-header .header-menu-right {
    padding-right: 0px;
    height: 100%;
    width: 39%;
}

.dividing-header .AlertName {
    color: #fff;
    font-weight: bold;
    font-size: 12px;
    background: #8b0000; /* Red for alerts. To override HTML styles, use "!important" */
}


.dividing-header .header-menu-right span {
    padding-left: 1em;
}

.vehicle-details .dividing-header .rightside {
    float: left;
    margin-top: 0;
}

    .vehicle-details .dividing-header .rightside span {
        margin-top: 0px;
    }

div.details-area {
    margin-left: 12px;
}

.details-area Table.Summary th, Table.Summary td, Table.Detail th, Table.Detail td {
    padding: 7px 8px;
}

.details-area .buttons li.large input.button {
    height: 37px;
    line-height: 37px;
    padding: 0 16px;
}

div.details-area .ReportOrRelease ul.buttons li, div.details-area .ReportOrRelease ul.buttons .button {
    margin-left: 0;
}

.details-area .buttons-small li input.button {
    font-size: 0.91665em; /* 11px */
    line-height: 20px;
    height: 20px;
    padding: 0 8px 2px; /*background: url(Images/ui/button-brown-sm-l.gif) no-repeat scroll 0 0 transparent;*/
    color: White;
    border-style: none;
}

.details-area .buttons-small li {
    display: block;
    float: left;
    height: 21px;
    color: #fff; /*background: #FFFFFF url(Images/ui/button-brown-sm.gif) no-repeat 100% 0;*/
    text-decoration: none;
    margin: 0;
    border-style: none;
}

.details-area table.ReportOrRelease {
    width: auto;
}

/* table */
.inline-table-small, .inline-table-medium, .inline-table-large {
    border: solid 2px #a0abb1;
    margin: 1em 0;
    overflow: auto;
    height: auto;
}

.inline-table-small {
    /* height: expression( this.scrollHeight > 199 ? "200px" : "auto" ); */
}

.inline-table-medium {
    /* height: expression( this.scrollHeight > 399 ? "400px" : "auto" ); */
}

.narrow {
    width: auto;
}

.inline-table-large {
    /* height: expression( this.scrollHeight > 799 ? "800px" : "auto" ); */
}

table.data-table {
    width: 100%;
    border: solid 1px #bfb9b1;
}

.data-table caption {
    display: none;
}

.data-table th, .data-table td {
    padding: 3px 5px;
    vertical-align: middle;
}

.data-table th {
    letter-spacing: -0.02em;
    border-left: solid 1px #978380;
    background-color: #393b3d;
}

    .data-table th.secondary {
        background: #627074;
    }

.data-table td {
    padding-top: 4px;
    padding-bottom: 4px;
    border-left: solid 1px #ffffff;
}

    .data-table td.first {
        border-left: none;
    }

    .data-table td.hidden, .data-table th.hidden {
        padding-left: 0;
        padding-right: 0;
    }

    .data-table td.disabled {
        background-color: #ffe4e1 !important; /* MistyRose */
        color: #393b3d !important;
    }

    .data-table td.enabled {
        background-color: #d7f0ce !important;
        color: #393b3d !important;
    }

    .data-table td.expired {
        background-color: #efc86b;
        color: #584d4b !important;
    }

    .data-table td a, .data-table td a:visited {
        color: #363740; /* was 584d4b for SRIS */
        text-decoration: none;
    }

        .data-table td a:hover {
            color: #363740; /* was 970109 for SRIS */
        }

        .data-table td a.more, .data-table td a.more:visited {
            color: blue;
            text-decoration: underline;
            float: right;
            font-size: 80%;
            padding-right: 0.5em;
        }

            .data-table td a.more:hover {
                color: #363740; /* was 970109 for SRIS */
            }

    .data-table td.centered, .data-table th.centered {
        width: 20px;
    }

.data-table li {
    display: inline;
    margin: auto 4px;
    padding: 0;
    list-style: none;
    background: none;
    display: block;
    float: left;
    height: 21px;
    color: #fff; /*background: #886d6a url(Images/ui/button-brown5-sm.gif) no-repeat 100% 0;*/
    text-decoration: none;
}

    .data-table li input.button {
        /* font-weight: bold; */
        white-space: nowrap;
        color: #fff;
        border-style: none;
        font-size: 0.75em;
        margin-left: -4px; /*background: url(Images/ui/button-brown5-sm-l.gif) no-repeat 0 0;*/
    }

.data-table tr:hover td {
    background-color: #6699cc; /*#4868a0;*/
    color: #ffffff;
}

.data-table tr.even li {
    /*background: #886d6a url(Images/ui/button-brown4-sm.gif) no-repeat 100% 0;*/
}

.data-table th.flag {
    width: 7em;
}

.data-table th.station-name, .data-table th.lane-name, .data-table th.location-name {
    width: 10em;
}

.data-table th.ip-address, .data-table input.ip-address {
    width: 8em;
}

.data-table th.ip-port, .data-table input.ip-port {
    width: 5em;
}

.data-table th.note, .data-table input.note {
    width: 99%;
}

/* -- DASHBOARD -- */
#header .titles .datestamp {
    color: #584D4B;
    position: absolute;
    right: 12px;
    top: 4px;
    font-size: 1em;
    font-weight: bold;
    letter-spacing: -0.04em;
}

    #header .titles .datestamp .year {
        font-weight: normal;
        color: #9E9795;
        padding-left: 0.2em;
    }

#dashboard .buttons {
    float: right;
    padding: 12px 30px;
}

    #dashboard .buttons a, #dashboard .buttons a:visited {
        background-image: url(Images/ui/button-brown2.gif);
    }

        #dashboard .buttons a span {
            background-image: url(Images/ui/button-brown2-l.gif);
        }

#dashboard .working-area {
    padding: 12px 12px;
}

/* -- Status screens -- */

#status {
    min-height: 100%;
}

    #status .working-area {
        padding: 12px 12px;
    }

        #status .working-area .main-title {
            font-size: 1.8em;
            /*background: #cfcfcf;*/
            padding: 5px 10px;
            border-radius: 5px;
        }

        #status .working-area .sub-title {
            display: block;
            padding-top: 1.0em;
            padding-bottom: 0.25em;
        }

        #status .working-area .ScrollablePanel {
            border-color: #b0bece;
            border-bottom: solid 1px #8fa3ac;
            border-width: 1px;
            border-style: solid;
        }

    #status th {
        border-color: #b0bece;
        border-bottom: solid 1px #8fa3ac;
        color: #13455b;
        background: #afb6ba;
    }

    #status td {
        font-size: 100%;
    }

/* table */
#dashboard .dividing-header {
    border-bottom: solid 1px #d1cdc9;
}

#dashboard table {
    padding: 12px 30px;
}

#dashboard td {
    padding-top: 4px;
    padding-bottom: 4px;
}

#dashboard th {
    border-color: #b0bece;
    border-bottom: solid 1px #8fa3ac;
    color: #13455b;
    background: #afb6ba;
}

#dashboard td, #dashboard th {
    padding-left: 1em;
}

    #dashboard td.good, #dashboard td.warn, #dashboard td.offline, #dashboard td.bad {
        font-weight: normal;
        font-size: 1.0em;
        padding-left: 48px;
    }

    #dashboard td.good {
        background-image: url(Images/indicator_good.png);
        background-repeat: no-repeat;
        background-position: 10px 50%;
    }

    #dashboard td.warn {
        background-image: url(Images/indicator_warn.png);
        background-repeat: no-repeat;
        background-position: 10px 50%;
    }

    #dashboard td.bad {
        background-image: url(Images/indicator_bad.png);
        background-repeat: no-repeat;
        background-position: 10px 50%;
    }

    #dashboard td.offline {
        background-image: url(Images/indicator_offline.png);
        background-repeat: no-repeat;
        background-position: 10px 50%;
    }

#col-status {
    width: 100px;
}

#dashboard table.invisiblebox {
    border-width: thin;
    border-top: 0px;
    border-bottom: 0px;
    border-left: 0px;
    border-right: 0px;
    border-color: #999;
    border-style: solid;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    width: 1%;
}

    #dashboard table.invisiblebox td {
        padding: 0;
        padding-right: 1em;
        padding-top: 1em;
    }

/* alert column */
td.alerts {
    width: 302px;
    font-size: 24px;
    font-weight: bold;
    letter-spacing: -0.02em;
}

.alert-ratio {
    width: 40px;
    padding-right: 8px;
    float: left;
    text-align: right;
}

.alert-count {
    color: #970109;
    float: left;
    width: 40px;
    text-align: right;
}

.alert-bar {
    margin-top: 8px;
    width: 204px;
    height: 26px;
    background: url(Images/ui/alert-bar-empty.gif) no-repeat 0 0;
    float: left;
    margin-right: 0px;
    position: relative;
}

    .alert-bar div {
        height: 26px;
        position: absolute;
        top: 0;
        right: 0;
        background: url(Images/ui/alert-bar-filled.gif) no-repeat 100% 0;
    }

    .alert-bar span {
        width: 1px;
        height: 26px;
        position: absolute;
        top: 0;
        background: url(Images/ui/alert-bar-highlight_white.gif) no-repeat 100% 0;
    }

    .alert-bar .alert-100 {
        width: 0;
    }

        .alert-bar .alert-100 span {
            display: none;
        }

    .alert-bar .alert-98 {
        width: 6px;
    }

        .alert-bar .alert-98 span {
            right: 6px;
        }

    .alert-bar .alert-96 {
        width: 10px;
    }

        .alert-bar .alert-96 span {
            right: 10px;
        }

    .alert-bar .alert-94 {
        width: 14px;
    }

        .alert-bar .alert-94 span {
            right: 14px;
        }

    .alert-bar .alert-92 {
        width: 18px;
    }

        .alert-bar .alert-92 span {
            right: 18px;
        }

    .alert-bar .alert-90 {
        width: 22px;
    }

        .alert-bar .alert-90 span {
            right: 22px;
        }

    .alert-bar .alert-88 {
        width: 26px;
    }

        .alert-bar .alert-88 span {
            right: 26px;
        }

    .alert-bar .alert-86 {
        width: 30px;
    }

        .alert-bar .alert-86 span {
            right: 30px;
        }

    .alert-bar .alert-84 {
        width: 34px;
    }

        .alert-bar .alert-84 span {
            right: 34px;
        }

    .alert-bar .alert-82 {
        width: 38px;
    }

        .alert-bar .alert-82 span {
            right: 38px;
        }

    .alert-bar .alert-80 {
        width: 42px;
    }

        .alert-bar .alert-80 span {
            right: 42px;
        }

    .alert-bar .alert-78 {
        width: 46px;
    }

        .alert-bar .alert-78 span {
            right: 46px;
        }

    .alert-bar .alert-76 {
        width: 50px;
    }

        .alert-bar .alert-76 span {
            right: 50px;
        }

    .alert-bar .alert-74 {
        width: 54px;
    }

        .alert-bar .alert-74 span {
            right: 54px;
        }

    .alert-bar .alert-72 {
        width: 58px;
    }

        .alert-bar .alert-72 span {
            right: 58px;
        }

    .alert-bar .alert-70 {
        width: 62px;
    }

        .alert-bar .alert-70 span {
            right: 62px;
        }

    .alert-bar .alert-68 {
        width: 66px;
    }

        .alert-bar .alert-68 span {
            right: 66px;
        }

    .alert-bar .alert-66 {
        width: 70px;
    }

        .alert-bar .alert-66 span {
            right: 70px;
        }

    .alert-bar .alert-64 {
        width: 74px;
    }

        .alert-bar .alert-64 span {
            right: 74px;
        }

    .alert-bar .alert-62 {
        width: 78px;
    }

        .alert-bar .alert-62 span {
            right: 78px;
        }

    .alert-bar .alert-60 {
        width: 82px;
    }

        .alert-bar .alert-60 span {
            right: 82px;
        }

    .alert-bar .alert-58 {
        width: 86px;
    }

        .alert-bar .alert-58 span {
            right: 86px;
        }

    .alert-bar .alert-56 {
        width: 90px;
    }

        .alert-bar .alert-56 span {
            right: 90px;
        }

    .alert-bar .alert-54 {
        width: 94px;
    }

        .alert-bar .alert-54 span {
            right: 94px;
        }

    .alert-bar .alert-52 {
        width: 98px;
    }

        .alert-bar .alert-52 span {
            right: 98px;
        }

    .alert-bar .alert-50 {
        width: 102px;
    }

        .alert-bar .alert-50 span {
            right: 102px;
        }

    .alert-bar .alert-48 {
        width: 106px;
    }

        .alert-bar .alert-48 span {
            right: 106px;
        }

    .alert-bar .alert-46 {
        width: 110px;
    }

        .alert-bar .alert-46 span {
            right: 110px;
        }

    .alert-bar .alert-44 {
        width: 114px;
    }

        .alert-bar .alert-44 span {
            right: 114px;
        }

    .alert-bar .alert-42 {
        width: 118px;
    }

        .alert-bar .alert-42 span {
            right: 118px;
        }

    .alert-bar .alert-40 {
        width: 122px;
    }

        .alert-bar .alert-40 span {
            right: 122px;
        }

    .alert-bar .alert-38 {
        width: 126px;
    }

        .alert-bar .alert-38 span {
            right: 126px;
        }

    .alert-bar .alert-36 {
        width: 130px;
    }

        .alert-bar .alert-36 span {
            right: 130px;
        }

    .alert-bar .alert-34 {
        width: 134px;
    }

        .alert-bar .alert-34 span {
            right: 134px;
        }

    .alert-bar .alert-32 {
        width: 138px;
    }

        .alert-bar .alert-32 span {
            right: 138px;
        }

    .alert-bar .alert-30 {
        width: 142px;
    }

        .alert-bar .alert-30 span {
            right: 142px;
        }

    .alert-bar .alert-28 {
        width: 146px;
    }

        .alert-bar .alert-28 span {
            right: 146px;
        }

    .alert-bar .alert-26 {
        width: 150px;
    }

        .alert-bar .alert-26 span {
            right: 150px;
        }

    .alert-bar .alert-24 {
        width: 154px;
    }

        .alert-bar .alert-24 span {
            right: 154px;
        }

    .alert-bar .alert-22 {
        width: 158px;
    }

        .alert-bar .alert-22 span {
            right: 158px;
        }

    .alert-bar .alert-20 {
        width: 162px;
    }

        .alert-bar .alert-20 span {
            right: 162px;
        }

    .alert-bar .alert-18 {
        width: 166px;
    }

        .alert-bar .alert-18 span {
            right: 166px;
        }

    .alert-bar .alert-16 {
        width: 170px;
    }

        .alert-bar .alert-16 span {
            right: 170px;
        }

    .alert-bar .alert-14 {
        width: 174px;
    }

        .alert-bar .alert-14 span {
            right: 174px;
        }

    .alert-bar .alert-12 {
        width: 178px;
    }

        .alert-bar .alert-12 span {
            right: 178px;
        }

    .alert-bar .alert-10 {
        width: 182px;
    }

        .alert-bar .alert-10 span {
            right: 182px;
        }

    .alert-bar .alert-8 {
        width: 186px;
    }

        .alert-bar .alert-8 span {
            right: 186px;
        }

    .alert-bar .alert-6 {
        width: 190px;
    }

        .alert-bar .alert-6 span {
            right: 190px;
        }

    .alert-bar .alert-4 {
        width: 194px;
    }

        .alert-bar .alert-4 span {
            right: 194px;
        }

    .alert-bar .alert-2 {
        width: 198px;
    }

        .alert-bar .alert-2 span {
            right: 198px;
        }

    .alert-bar .alert-0 {
        width: 202px;
    }

        .alert-bar .alert-0 span {
            display: none;
        }


    .alert-bar .alert-100-med {
        width: 0;
        background: url(Images/ui/alert-bar-filled_orange.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-100-med span {
            display: none;
        }

    .alert-bar .alert-98-med {
        width: 6px;
        background: url(Images/ui/alert-bar-filled_orange.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-98-med span {
            right: 6px;
        }

    .alert-bar .alert-96-med {
        width: 10px;
        background: url(Images/ui/alert-bar-filled_orange.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-96-med span {
            right: 10px;
        }

    .alert-bar .alert-94-med {
        width: 14px;
        background: url(Images/ui/alert-bar-filled_orange.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-94-med span {
            right: 14px;
        }

    .alert-bar .alert-92-med {
        width: 18px;
        background: url(Images/ui/alert-bar-filled_orange.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-92-med span {
            right: 18px;
        }

    .alert-bar .alert-90-med {
        width: 22px;
        background: url(Images/ui/alert-bar-filled_orange.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-90-med span {
            right: 22px;
        }

    .alert-bar .alert-88-med {
        width: 26px;
        background: url(Images/ui/alert-bar-filled_orange.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-88-med span {
            right: 26px;
        }

    .alert-bar .alert-86-med {
        width: 30px;
        background: url(Images/ui/alert-bar-filled_orange.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-86-med span {
            right: 30px;
        }

    .alert-bar .alert-84-med {
        width: 34px;
        background: url(Images/ui/alert-bar-filled_orange.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-84-med span {
            right: 34px;
        }

    .alert-bar .alert-82-med {
        width: 38px;
        background: url(Images/ui/alert-bar-filled_orange.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-82-med span {
            right: 38px;
        }

    .alert-bar .alert-80-med {
        width: 42px;
        background: url(Images/ui/alert-bar-filled_orange.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-80-med span {
            right: 42px;
        }

    .alert-bar .alert-78-med {
        width: 46px;
        background: url(Images/ui/alert-bar-filled_orange.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-78-med span {
            right: 46px;
        }

    .alert-bar .alert-76-med {
        width: 50px;
        background: url(Images/ui/alert-bar-filled_orange.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-76-med span {
            right: 50px;
        }

    .alert-bar .alert-74-med {
        width: 54px;
        background: url(Images/ui/alert-bar-filled_orange.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-74-med span {
            right: 54px;
        }

    .alert-bar .alert-72-med {
        width: 58px;
        background: url(Images/ui/alert-bar-filled_orange.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-72-med span {
            right: 58px;
        }

    .alert-bar .alert-70-med {
        width: 62px;
        background: url(Images/ui/alert-bar-filled_orange.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-70-med span {
            right: 62px;
        }

    .alert-bar .alert-68-med {
        width: 66px;
        background: url(Images/ui/alert-bar-filled_orange.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-68-med span {
            right: 66px;
        }

    .alert-bar .alert-66-med {
        width: 70px;
        background: url(Images/ui/alert-bar-filled_orange.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-66-med span {
            right: 70px;
        }

    .alert-bar .alert-64-med {
        width: 74px;
        background: url(Images/ui/alert-bar-filled_orange.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-64-med span {
            right: 74px;
        }

    .alert-bar .alert-62-med {
        width: 78px;
        background: url(Images/ui/alert-bar-filled_orange.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-62-med span {
            right: 78px;
        }

    .alert-bar .alert-60-med {
        width: 82px;
        background: url(Images/ui/alert-bar-filled_orange.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-60-med span {
            right: 82px;
        }

    .alert-bar .alert-58-med {
        width: 86px;
        background: url(Images/ui/alert-bar-filled_orange.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-58-med span {
            right: 86px;
        }

    .alert-bar .alert-56-med {
        width: 90px;
        background: url(Images/ui/alert-bar-filled_orange.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-56-med span {
            right: 90px;
        }

    .alert-bar .alert-54-med {
        width: 94px;
        background: url(Images/ui/alert-bar-filled_orange.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-54-med span {
            right: 94px;
        }

    .alert-bar .alert-52-med {
        width: 98px;
        background: url(Images/ui/alert-bar-filled_orange.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-52-med span {
            right: 98px;
        }

    .alert-bar .alert-50-med {
        width: 102px;
        background: url(Images/ui/alert-bar-filled_orange.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-50-med span {
            right: 102px;
        }

    .alert-bar .alert-48-med {
        width: 106px;
        background: url(Images/ui/alert-bar-filled_orange.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-48-med span {
            right: 106px;
        }

    .alert-bar .alert-46-med {
        width: 110px;
        background: url(Images/ui/alert-bar-filled_orange.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-46-med span {
            right: 110px;
        }

    .alert-bar .alert-44-med {
        width: 114px;
        background: url(Images/ui/alert-bar-filled_orange.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-44-med span {
            right: 114px;
        }

    .alert-bar .alert-42-med {
        width: 118px;
        background: url(Images/ui/alert-bar-filled_orange.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-42-med span {
            right: 118px;
        }

    .alert-bar .alert-40-med {
        width: 122px;
        background: url(Images/ui/alert-bar-filled_orange.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-40-med span {
            right: 122px;
        }

    .alert-bar .alert-38-med {
        width: 126px;
        background: url(Images/ui/alert-bar-filled_orange.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-38-med span {
            right: 126px;
        }

    .alert-bar .alert-36-med {
        width: 130px;
        background: url(Images/ui/alert-bar-filled_orange.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-36-med span {
            right: 130px;
        }

    .alert-bar .alert-34-med {
        width: 134px;
        background: url(Images/ui/alert-bar-filled_orange.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-34-med span {
            right: 134px;
        }

    .alert-bar .alert-32-med {
        width: 138px;
        background: url(Images/ui/alert-bar-filled_orange.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-32-med span {
            right: 138px;
        }

    .alert-bar .alert-30-med {
        width: 142px;
        background: url(Images/ui/alert-bar-filled_orange.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-30-med span {
            right: 142px;
        }

    .alert-bar .alert-28-med {
        width: 146px;
        background: url(Images/ui/alert-bar-filled_orange.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-28-med span {
            right: 146px;
        }

    .alert-bar .alert-26-med {
        width: 150px;
        background: url(Images/ui/alert-bar-filled_orange.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-26-med span {
            right: 150px;
        }

    .alert-bar .alert-24-med {
        width: 154px;
        background: url(Images/ui/alert-bar-filled_orange.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-24-med span {
            right: 154px;
        }

    .alert-bar .alert-22-med {
        width: 158px;
        background: url(Images/ui/alert-bar-filled_orange.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-22-med span {
            right: 158px;
        }

    .alert-bar .alert-20-med {
        width: 162px;
        background: url(Images/ui/alert-bar-filled_orange.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-20-med span {
            right: 162px;
        }

    .alert-bar .alert-18-med {
        width: 166px;
        background: url(Images/ui/alert-bar-filled_orange.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-18-med span {
            right: 166px;
        }

    .alert-bar .alert-16-med {
        width: 170px;
        background: url(Images/ui/alert-bar-filled_orange.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-16-med span {
            right: 170px;
        }

    .alert-bar .alert-14-med {
        width: 174px;
        background: url(Images/ui/alert-bar-filled_orange.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-14-med span {
            right: 174px;
        }

    .alert-bar .alert-12-med {
        width: 178px;
        background: url(Images/ui/alert-bar-filled_orange.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-12-med span {
            right: 178px;
        }

    .alert-bar .alert-10-med {
        width: 182px;
        background: url(Images/ui/alert-bar-filled_orange.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-10-med span {
            right: 182px;
        }

    .alert-bar .alert-8-med {
        width: 186px;
        background: url(Images/ui/alert-bar-filled_orange.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-8-med span {
            right: 186px;
        }

    .alert-bar .alert-6-med {
        width: 190px;
        background: url(Images/ui/alert-bar-filled_orange.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-6-med span {
            right: 190px;
        }

    .alert-bar .alert-4-med {
        width: 194px;
        background: url(Images/ui/alert-bar-filled_orange.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-4-med span {
            right: 194px;
        }

    .alert-bar .alert-2-med {
        width: 198px;
        background: url(Images/ui/alert-bar-filled_orange.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-2-med span {
            right: 198px;
        }

    .alert-bar .alert-0-med {
        width: 202px;
        background: url(Images/ui/alert-bar-filled_orange.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-0-med span {
            display: none;
        }

    .alert-bar .alert-100-low {
        width: 0;
        background: url(Images/ui/alert-bar-filled_yellow.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-100-low span {
            display: none;
        }

    .alert-bar .alert-98-low {
        width: 6px;
        background: url(Images/ui/alert-bar-filled_yellow.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-98-low span {
            right: 6px;
        }

    .alert-bar .alert-96-low {
        width: 10px;
        background: url(Images/ui/alert-bar-filled_yellow.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-96-low span {
            right: 10px;
        }

    .alert-bar .alert-94-low {
        width: 14px;
        background: url(Images/ui/alert-bar-filled_yellow.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-94-low span {
            right: 14px;
        }

    .alert-bar .alert-92-low {
        width: 18px;
        background: url(Images/ui/alert-bar-filled_yellow.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-92-low span {
            right: 18px;
        }

    .alert-bar .alert-90-low {
        width: 22px;
        background: url(Images/ui/alert-bar-filled_yellow.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-90-low span {
            right: 22px;
        }

    .alert-bar .alert-88-low {
        width: 26px;
        background: url(Images/ui/alert-bar-filled_yellow.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-88-low span {
            right: 26px;
        }

    .alert-bar .alert-86-low {
        width: 30px;
        background: url(Images/ui/alert-bar-filled_yellow.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-86-low span {
            right: 30px;
        }

    .alert-bar .alert-84-low {
        width: 34px;
        background: url(Images/ui/alert-bar-filled_yellow.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-84-low span {
            right: 34px;
        }

    .alert-bar .alert-82-low {
        width: 38px;
        background: url(Images/ui/alert-bar-filled_yellow.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-82-low span {
            right: 38px;
        }

    .alert-bar .alert-80-low {
        width: 42px;
        background: url(Images/ui/alert-bar-filled_yellow.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-80-low span {
            right: 42px;
        }

    .alert-bar .alert-78-low {
        width: 46px;
        background: url(Images/ui/alert-bar-filled_yellow.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-78-low span {
            right: 46px;
        }

    .alert-bar .alert-76-low {
        width: 50px;
        background: url(Images/ui/alert-bar-filled_yellow.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-76-low span {
            right: 50px;
        }

    .alert-bar .alert-74-low {
        width: 54px;
        background: url(Images/ui/alert-bar-filled_yellow.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-74-low span {
            right: 54px;
        }

    .alert-bar .alert-72-low {
        width: 58px;
        background: url(Images/ui/alert-bar-filled_yellow.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-72-low span {
            right: 58px;
        }

    .alert-bar .alert-70-low {
        width: 62px;
        background: url(Images/ui/alert-bar-filled_yellow.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-70-low span {
            right: 62px;
        }

    .alert-bar .alert-68-low {
        width: 66px;
        background: url(Images/ui/alert-bar-filled_yellow.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-68-low span {
            right: 66px;
        }

    .alert-bar .alert-66-low {
        width: 70px;
        background: url(Images/ui/alert-bar-filled_yellow.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-66-low span {
            right: 70px;
        }

    .alert-bar .alert-64-low {
        width: 74px;
        background: url(Images/ui/alert-bar-filled_yellow.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-64-low span {
            right: 74px;
        }

    .alert-bar .alert-62-low {
        width: 78px;
        background: url(Images/ui/alert-bar-filled_yellow.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-62-low span {
            right: 78px;
        }

    .alert-bar .alert-60-low {
        width: 82px;
        background: url(Images/ui/alert-bar-filled_yellow.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-60-low span {
            right: 82px;
        }

    .alert-bar .alert-58-low {
        width: 86px;
        background: url(Images/ui/alert-bar-filled_yellow.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-58-low span {
            right: 86px;
        }

    .alert-bar .alert-56-low {
        width: 90px;
        background: url(Images/ui/alert-bar-filled_yellow.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-56-low span {
            right: 90px;
        }

    .alert-bar .alert-54-low {
        width: 94px;
        background: url(Images/ui/alert-bar-filled_yellow.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-54-low span {
            right: 94px;
        }

    .alert-bar .alert-52-low {
        width: 98px;
        background: url(Images/ui/alert-bar-filled_yellow.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-52-low span {
            right: 98px;
        }

    .alert-bar .alert-50-low {
        width: 102px;
        background: url(Images/ui/alert-bar-filled_yellow.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-50-low span {
            right: 102px;
        }

    .alert-bar .alert-48-low {
        width: 106px;
        background: url(Images/ui/alert-bar-filled_yellow.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-48-low span {
            right: 106px;
        }

    .alert-bar .alert-46-low {
        width: 110px;
        background: url(Images/ui/alert-bar-filled_yellow.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-46-low span {
            right: 110px;
        }

    .alert-bar .alert-44-low {
        width: 114px;
        background: url(Images/ui/alert-bar-filled_yellow.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-44-low span {
            right: 114px;
        }

    .alert-bar .alert-42-low {
        width: 118px;
        background: url(Images/ui/alert-bar-filled_yellow.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-42-low span {
            right: 118px;
        }

    .alert-bar .alert-40-low {
        width: 122px;
        background: url(Images/ui/alert-bar-filled_yellow.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-40-low span {
            right: 122px;
        }

    .alert-bar .alert-38-low {
        width: 126px;
        background: url(Images/ui/alert-bar-filled_yellow.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-38-low span {
            right: 126px;
        }

    .alert-bar .alert-36-low {
        width: 130px;
        background: url(Images/ui/alert-bar-filled_yellow.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-36-low span {
            right: 130px;
        }

    .alert-bar .alert-34-low {
        width: 134px;
        background: url(Images/ui/alert-bar-filled_yellow.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-34-low span {
            right: 134px;
        }

    .alert-bar .alert-32-low {
        width: 138px;
        background: url(Images/ui/alert-bar-filled_yellow.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-32-low span {
            right: 138px;
        }

    .alert-bar .alert-30-low {
        width: 142px;
        background: url(Images/ui/alert-bar-filled_yellow.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-30-low span {
            right: 142px;
        }

    .alert-bar .alert-28-low {
        width: 146px;
        background: url(Images/ui/alert-bar-filled_yellow.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-28-low span {
            right: 146px;
        }

    .alert-bar .alert-26-low {
        width: 150px;
        background: url(Images/ui/alert-bar-filled_yellow.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-26-low span {
            right: 150px;
        }

    .alert-bar .alert-24-low {
        width: 154px;
        background: url(Images/ui/alert-bar-filled_yellow.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-24-low span {
            right: 154px;
        }

    .alert-bar .alert-22-low {
        width: 158px;
        background: url(Images/ui/alert-bar-filled_yellow.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-22-low span {
            right: 158px;
        }

    .alert-bar .alert-20-low {
        width: 162px;
        background: url(Images/ui/alert-bar-filled_yellow.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-20-low span {
            right: 162px;
        }

    .alert-bar .alert-18-low {
        width: 166px;
        background: url(Images/ui/alert-bar-filled_yellow.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-18-low span {
            right: 166px;
        }

    .alert-bar .alert-16-low {
        width: 170px;
        background: url(Images/ui/alert-bar-filled_yellow.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-16-low span {
            right: 170px;
        }

    .alert-bar .alert-14-low {
        width: 174px;
        background: url(Images/ui/alert-bar-filled_yellow.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-14-low span {
            right: 174px;
        }

    .alert-bar .alert-12-low {
        width: 178px;
        background: url(Images/ui/alert-bar-filled_yellow.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-12-low span {
            right: 178px;
        }

    .alert-bar .alert-10-low {
        width: 182px;
        background: url(Images/ui/alert-bar-filled_yellow.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-10-low span {
            right: 182px;
        }

    .alert-bar .alert-8-low {
        width: 186px;
        background: url(Images/ui/alert-bar-filled_yellow.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-8-low span {
            right: 186px;
        }

    .alert-bar .alert-6-low {
        width: 190px;
        background: url(Images/ui/alert-bar-filled_yellow.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-6-low span {
            right: 190px;
        }

    .alert-bar .alert-4-low {
        width: 194px;
        background: url(Images/ui/alert-bar-filled_yellow.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-4-low span {
            right: 194px;
        }

    .alert-bar .alert-2-low {
        width: 198px;
        background: url(Images/ui/alert-bar-filled_yellow.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-2-low span {
            right: 198px;
        }

    .alert-bar .alert-0-low {
        width: 202px;
        background: url(Images/ui/alert-bar-filled_yellow.gif) no-repeat 100% 0;
    }

        .alert-bar .alert-0-low span {
            display: none;
        }

/* -- GLOBAL FOOTER -- */
#footer {
    background: #fff;
    border-top: solid 1px #d7d2cd;
    overflow: hidden;
}

    #footer .branding {
        display: block;
        float: right;
    }

    #footer p {
        display: block;
        float: right;
        color: #9e9795;
        letter-spacing: -0.02em;
        padding: 1em 12px 1em 0;
        clear: both;
        text-align: right;
    }

    #footer span {
        padding-left: 1em;
        padding-right: 1em;
        vertical-align: top;
    }

    #footer img {
        padding-top: 2px;
    }

    #footer .controls {
        display: block;
        float: left;
        padding: 1em 0 1em 8px;
    }

    /* footer buttons */
    #footer #page-actions {
        float: left;
        margin: 12px 0 0 12px;
    }

    #footer #system-actions {
        float: right;
        margin: 12px 20px 0 0;
    }
/* -- Accessibility Tweaks -- */
#accessibility {
    position: absolute;
    top: -9999px;
    font-size: 1px;
}

.hide {
    display: none;
}


/* -- VEHICLE QUEUE DETAIL -- */
#queue-nav {
    position: absolute;
    right: 23px;
    top: 11px;
}

    #queue-nav li {
        float: left;
        text-align: center;
        width: 110px;
        height: 81px;
        margin-left: 12px;
        background: #dcd8d4 url(Images/vehicle-queue.gif) no-repeat;
        position: relative;
    }

        #queue-nav li.current {
            background: #bbb7b0 url(Images/vehicle-queue-current.gif) no-repeat;
        }

        #queue-nav li a, #vehicle-queue-detail #queue-nav li a:visited {
            display: block;
            width: 110px;
            height: 81px;
            color: #726966;
            text-decoration: none;
        }

        #queue-nav li.current a, #vehicle-queue-detail #queue-nav li.current a:visited {
            color: #584d4b;
        }

        #queue-nav li img {
            display: block;
            border: solid 1px #877e7b;
            position: absolute;
            top: 5px;
            left: 21px;
        }

        #queue-nav li a:hover img, #queue-nav li.current img {
            border-color: #fff;
        }

        #queue-nav li span {
            display: block;
            padding-top: 56px;
        }

Table.Summary th.controls {
    padding-top: 0;
    padding-bottom: 0;
    width: 60px;
}

.Summary th.controls a.image-link {
    display: inline-block;
    float: right;
    width: 32px;
    height: 32px;
    background-repeat: no-repeat;
}

.Summary th.controls a.refresh {
    background-image: url(Images/refresh.png);
    display: block;
    float: right;
}

.Summary th.controls a.image-link:hover {
    background-position: 100% -32px;
}

.Summary th.controls a.image-link:active {
    background-position: 100% -64px;
}

.displayMovingStickyButtons {
    position: fixed;
    right: 0px; /*min-width: 125px;*/
    height: 30px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    filter: alpha(opacity=60);
    opacity: .6;
    -moz-opacity: .6;
    background-color: #F5F5F5;
    border: solid 1px #999;
    padding: 7px 15px; /*background-color: #FFE5B6;     border: solid 2px #FF8E51;    */
    display: block;
}

    .displayMovingStickyButtons:hover {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: alpha(opacity=100);
        opacity: 1;
        -moz-opacity: 1;
        background-color: #F5F5F5;
        border: solid 1px #999;
    }

    .displayMovingStickyButtons div {
        height: 24px;
        max-height: 24px;
        color: #000;
        display: block;
        white-space: nowrap;
    }

.cognosIframeContainer {
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: visible;
}

.cognosIframe {
    width: 100%;
    min-height: 95%; /* to prevent vertical scroll bar */
    height: 95%;
    position: relative;
    margin: 0 auto;
}

table.displaySummary {
    border-collapse: separate;
    border-spacing: 3px;
    font-size: 9px;
    padding: 2px 2px 1px 2px; /* top right bottom left */
    text-align: right;
}

td.on {
    background-color: #B9FAC2; /* Light green */
    border: 1px solid black;
    text-align: center;
    min-width: 40px;
}

td.off {
    background-color: #FAB9C2; /* Light red */
    border: 1px solid black;
    text-align: center;
    min-width: 45px;
}

td.half_on {
    background-color: #F7F19B; /* Light yellow */
    border: 1px solid black;
    text-align: center;
    min-width: 40px;
}

td.link {
    cursor: pointer;
    cursor: hand;
    color: blue;
}

table.reports {
    font-size: 1.3em;
    border: 1px solid #726966;
    min-width: 400px;
    color: #333333;
    margin-top: 30px;
}

    table.reports th {
        padding: 5px 10px;
        color: #FFF !important;
        background-color: #393b3d !important;
        font-weight: bold;
    }

    table.reports td {
        padding: 2px 10px;
    }

    table.reports tr:nth-child(odd) {
        background-color: #cfcfcf;
    }

    table.reports tr:nth-child(even) {
        background-color: transparent;
    }

div.reportsLinkContainer {
    display: inline-block;
}

    div.reportsLinkContainer a {
        font-size: 1.3em;
        text-decoration: underline;
    }

        div.reportsLinkContainer a:hover {
            text-shadow: 0 0 0.1em #f5f5f5;
        }


div.displaySummaryOptions {
    display: none;
    top: -2px;
    left: 100%;
    margin: 2px;
    position: absolute;
    z-index: 200;
    background: #666;
    width: 70px;
    padding: 3px;
    border-radius: 4px;
}

    div.displaySummaryOptions input {
        display: inline-block;
        cursor: pointer;
        margin: 5px;
        padding: 4px;
    }

        div.displaySummaryOptions input:disabled {
            cursor: not-allowed;
            color: #bbb;
        }

#lastRefreshTime {
    font-size: 1.7em;
}

#dapDownMessage {
    display: none;
    width: 30%;
    max-height: 60px;
    position: absolute;
    left: 30%;
    top: 40%;
    margin: auto;
    text-align: center;
    padding: 7px;
    border-radius: 4px;
    z-index: 300;
    overflow: auto;
}

    #dapDownMessage.error {
        background-color: rgba(202, 0, 0, .8);
        color: #fff;
    }

    #dapDownMessage.warn {
        background-color: rgba(236, 236, 15, 0.8);
        color: #222;
    }

    #dapDownMessage .header {
        width: 100%;
        margin: 0 auto 10px auto;
        font-size: 1.8em;
        position: relative;
        min-height: 60px;
    }

        #dapDownMessage .header span {
            position: absolute;
            left: 0;
            top: 0;
            zoom: 2;
        }

        #dapDownMessage .header label {
            width: 90%;
            line-height: 1.5;
            float: right;
        }

    #dapDownMessage .detail {
        width: 100%;
        font-size: 1.3em;
    }


/* Some of the configuration screens in GUI have tabs now instead of collapsible sections (ScreeningSettings, DisplaySettings, and SystemSettings) */
#settingTabs {
}

    #settingTabs > div {
        border-style: solid;
        border-color: initial;
        border-width: 1px;
        min-width: 450px;
    }

    #settingTabs > ul {
        min-width: 450px;
    }

    #settingTabs .ui-corner-top {
        border-radius: 3px 3px 0 0;
    }

    #settingTabs .ui-state-default {
        border-style: solid;
        border-color: initial;
        border-width: 1px;
        float: left;
        padding: 5px;
        margin-right: -1px;
        margin-bottom: -1px;
        background-color: inherit;
    }

        #settingTabs .ui-state-default a {
            text-decoration: none;
            color: initial;
        }

    #settingTabs .ui-state-active {
        border-bottom: none;
        margin-bottom: -1px;
        padding-bottom: 6px;
        background-color: #fefeff;
    }

        #settingTabs .ui-state-active a {
            font-weight: bold;
        }


div.inspectionScreen {
    background-color: #a0a0a0;
    background-color: rgba(40, 40, 40, .4);
    text-align: center;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2000;
}

    div.inspectionScreen > div {
        display: inline-flex;
        background: #fff;
        margin-top: 15vh;
        border-radius:8px;
        max-height:70vh;
        overflow:auto;
    }


div.leftNavMain {
    display:block;
    height: 91vh;
    width: 80px;
    background: #004C76;
    position: fixed;
    top:50px;
    padding-top:76px; /*Leave space at the top so that icons align at the Vehicle Queue table level*/
}
    div.leftNavMain > div {
        width: 80px;
        text-align: center;
        font-size:14px;
        color:white;
        margin:auto;
        padding-bottom: 50px;
    }
        div.leftNavMain > div.active > a > img {
            background: rgba(217,217,217,0.3);
            padding: 1px 15px;
            border-radius: 15px;
        }
 
/* Used for all pages */
div.page-content {
    margin-left: 80px; /* Leave this much space to allow vertical side bar menu to show without overlapping */
}