body {
    font-family: Roboto, sans-serif;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.9);
    padding: 0;
    margin: 0;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}


/* Chrome issue: remove outline for non-keyboard :focus */
*:focus:not(.focus-visible) {
    outline: none !important;
    box-shadow: none;
}

/* html tags */
/* use case: (1) using SummerNote WYSIWYG editor, it adds <p></p> and breaks the look in the UI with extra spaces */
p {
    padding: 0;
    margin: 0;
}

form {
    padding: 0;
    margin: 0;
}

.scroll-extraPadding {
    padding-right: 17px !important;
}

.background-icon {
    background-image: url(/images/logo-modal.png);
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.notification-undo {
    font-size: 16px;
    font-weight: bold;
    background-color: #FFFFA7;
}

.nav-title {
    font-size: 23px;
    font-weight: bold;
}

/* anchor links */
a.highlight:link, a.highlight:visited, a.highlight:active {
    color: inherit;
    text-decoration: none;
}

a.highlight.active {
    font-size: 1.3em;
    font-weight: bold;
    border-bottom: 2px solid #000000;
}


a.highlight:hover {
    font-weight: bold;
    color: rgba(0, 0, 0, 0.7);
}

a.highlight-light:link, a.highlight-light:visited, a.highlight-light:active {
    color: inherit;
    text-decoration: none;
}

a.highlight-light:hover {
    font-weight: bold;
    color: rgba(0, 0, 0, 0.7);
}

a.nav-highlight:link, a.nav-highlight:visited, a.nav-highlight:active {
    color: inherit;
    text-decoration: none;
}

a.nav-highlight.active .material-icons-outlined {
    color: #0066CC;
}

a.nav-highlight.active .svg-add-construction {
    background-image: url(/images/add-construction-icon-hover.svg);
    background-repeat: no-repeat;
}


a.nav-highlight:hover {
    font-weight: bold;
    color: #0066CC;
}

a.nav-highlight-light:link, a.nav-highlight-light:visited, a.nav-highlight-light:active {
    color: rgba(0, 0, 0, 0.5);
    text-decoration: none;
}

a.nav-highlight-light:hover {
    font-weight: bold;
    color: #0066CC;
}

a.nav-highlight-light.active .material-icons-outlined {
    color: #0066CC;
}

a.menu-highlight:link, a.menu-highlight:visited, a.menu-highlight:active {
    color: inherit;
    text-decoration: none;
}

a.menu-highlight.menu-active {
    font-weight: 600;
    color: #0066CC;
}

a.none:link, a.none:visited, a.none:active, a.none:hover {
    color: inherit;
    text-decoration: none;
}

a.reverse:link, a.reverse:visited, a.reverse:active {
    color: inherit;
    text-decoration: none;
}

a.reverse:hover {
    text-decoration: underline;
}

a.reverse-highlight:link, a.reverse-highlight:visited, a.reverse-highlight:active {
    color: inherit;
    text-decoration: none;
}

a.reverse-highlight:hover {
    text-decoration: underline;
}

a.reverse-highlight.active {
    font-weight: bold;
    color: #0066CC;
}

a.freeze-alert:link, a.freeze-alert:visited, a.freeze-alert:active {
    color: rgba(0, 0, 0, 0.5);
    text-decoration: none;
}

a.freeze-alert:hover {
    font-weight: bold;
    color: #0066CC;
}

a.freeze-alert.active .material-icons-outlined {
    color: #d43f3a;
}


a.warning:link, a.warning:visited, a.warning:active {
    color: #d43f3a;
    text-decoration: none;
}

a.warning:hover {
    text-decoration: underline;
}

.master-notification {
    z-index: 99999;
}

.message-item.active {
    background-color: #f0f8ff;
    border: 1px solid #0066CC !important;
    border-radius: 0.25rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

.toolbar-icon.active {
    color: #0066CC;
}

/* SVG icon */
.svg-pin {
    background-image: url(/images/pin-icon.svg);
    background-repeat: no-repeat;
}

.svg-unpin {
    background-image: url(/images/unpin-icon.svg);
    background-repeat: no-repeat;
}


/* SVG hover effect */
.svg-add-construction {
    background-image: url(/images/add-construction-icon.svg);
    background-repeat: no-repeat;
}

    .svg-add-construction:hover, .svg-add-construction:focus {
        background-image: url(/images/add-construction-icon-hover.svg);
        background-repeat: no-repeat;
    }


/* border */
.border-light {
    border: solid 1px #eee;
}

.border-light-bottom {
    border-bottom: solid 1px #eee;
}

.border-light-top {
    border-top: solid 1px #eee;
}

.border-light-left {
    border-left: solid 1px #eee;
}

.border-light-right {
    border-right: solid 1px #eee;
}

.border-dark {
    border: solid 1px #989697;
}

.border-dark-bottom {
    border-bottom: solid 1px #989697;
}

.border-dark-top {
    border-top: solid 1px #989697;
}

.border-dark-left {
    border-left: solid 1px #989697;
}

.border-dark-right {
    border-right: solid 1px #989697;
}


.border-ok {
    border-radius: 0.25rem;
    border: 1px solid #4cae4c;
}

.border-alert {
    border-radius: 0.25rem;
    border: 1px solid #d43f3a;
}

.overflow-hidden {
    overflow: hidden;
}

.overflow-auto {
    overflow: auto;
}

.overflow-x-auto {
    overflow-x: auto;
}

.overflow-x-hidden {
    overflow-x: hidden;
}

.overflow-y-auto {
    overflow-y: auto;
}

.overflow-y-hidden {
    overflow-y: hidden;
}

/* mouse cursor */
.clickable {
    cursor: pointer;
}

.moveable {
    cursor: move;
}

.highlight-item-col {
    font-weight: bold;
    color: #0066CC;
}

.highlight-background {
    background-color: #efefef;
}

.highlight-shadow {
    background-color: #efefef;
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 0.25rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

.active-shadow {
    color: #0066CC;
    background-color: #efefef;
    border: 1px solid rgba(0, 102, 204, 0.125);
    border-radius: 0.25rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 102, 204, 0.075) !important;
}


/* highlight the textbox by showing a blue outline */
.highlight-textbox {
    box-shadow: 0 0 5px #039be5;
    padding: 1px 0px 1px 1px;
    margin: 2px 1px 1px 0px;
    border: 1px solid #039be5;
}

.route-highlight {
    border-top: 3px solid #000000;
    border-bottom: 4px solid #000000;
    background-color: #000000;
    padding-right: 2px;
}

    .route-highlight .icon {
        color: #039be5;
    }


.road-item {
    display: flex;
    width: 100%;
    margin: 1px 0;
    padding: 2px 2px;
}
    .road-item.selected {
        border: 2px solid #039be5;
        border-radius: 0.25rem;
    }

    .road-item.active {
        background-color: #f0f8ff;
        border-radius: 0.25rem;
    }

    .road-item .item-position {
        display: inline-block;
        width: 25%;
    }

        .road-item .item-position .item-position-number {
            display: none;
            float: left;
            margin: 3px 2px;
            width: 18px;
            height: 18px;
            text-align: center;
            font-size: 10px;
            font-weight: bold;
            border: 2px solid #039be5;
            border-radius: 0.25rem;
        }

        .road-item .item-position .item-position-menu {
            display: inline-block;
            float: left;
            width: calc(100% - 37px);
            margin-left: 5px;
        }

    .road-item .item-name {
        display: inline-block;
        width: 75%;
    }


/* TOOLBAR BUTTON */

/* toolbar individual menu item link */
/*.toolbar-button-item {
    margin: 0;
    padding: 2px 2px;
    font-size: 14px;
}

    .toolbar-button-item .toolbar-button-item-name {
        display: inline-block;
    }
*/


/* LEFT COLUMN */

a.sction-add-link:link, a.sction-add-link:visited, a.sction-add-link:active {
    text-decoration: none;
}

a.sction-add-link:hover {
    color: #0066CC;
    border-color: #0066CC !important;
}

a.sction-anchor-link:link, a.sction-anchor-link:visited, a.sction-anchor-link:active {
    color: inherit;
    text-decoration: none;
}

a.sction-anchor-link:hover {
    /*color: #0066CC;*/
    color: #039be5;
    font-weight: bold;
}

.toolbar-button-item {
    float: left;
    line-height: 41px;
    color: rgba(0, 0, 0, 0.7);
}

.section-link, .section-sublink {
    display: inline-block;
    width: 100%;
    margin: 5px 0;
    color: rgba(0, 0, 0, 0.7);
}

    .section-link .section-anchor {
        display: inline-block;
        width: 100%;
        /*padding-top: 8px;*/
    }

        .section-link .section-anchor .section-anchor-icon {
            display: inline-block;
            font-size: 24px;
            max-height: 30px; /* assumption of material icon is md-24 */
            float: left;
            overflow: hidden;
        }

        .section-link .section-anchor .section-anchor-name {
            display: inline-block;
            max-height: 30px; /* assumption of material icon is md-24 */
        }

        .section-link .section-anchor .section-anchor-badge {
            display: inline-block;
            float: right;
            max-height: 30px; /* assumption of material icon is md-24 */
            margin-top: 5px;
            margin-right: 2px;
        }

    .section-sublink .section-anchor {
        display: inline-block;
        width: 100%;
        /*padding: 2px 0;*/
    }

        .section-sublink .section-anchor .section-anchor-icon {
            display: inline-block;
            font-size: 24px;
            max-height: 30px; /* assumption of material icon is md-24 */
            float: left;
            overflow: hidden;
        }

        .section-sublink .section-anchor .section-anchor-name {
            display: inline-block;
            max-height: 30px; /* assumption of material icon is md-24 */
        }

        .section-sublink .section-anchor .section-anchor-badge {
            display: inline-block;
            float: right;
            max-height: 30px; /* assumption of material icon is md-24 */
            margin-top: 3px;
        }


    .section-link > a:link, .section-link > a:visited, .section-link > a:active, .section-sublink > a:link, .section-sublink > a:visited, .section-sublink > a:active {
        color: inherit;
        text-decoration: none;
    }

    .section-link > a:hover, .section-sublink > a:hover {
        /*color: #0066CC;*/
        color: #039be5;
        font-weight: bold;
    }

.section-link-active {
    background-color: #f0f8ff;
}

    .section-link-active > a:link, .section-link-active > a:visited, .section-link-active > a:active, .section-link-active > a:hover {
        color: #0066CC;
        font-weight: bold;
        text-decoration: none;
    }

.section-sublink-active {
    color: #0066CC;
    font-weight: bold;
    text-decoration: none;
}

.section-link-body {
    padding: 8px 10px;
    background-color: #f0f8ff;
}

.section-link-first, .section-sublink-first {
    margin-top: 0 !important;
}

.section-link-last, .section-sublink-last {
    margin-bottom: 0 !important;
}



/* FONT SIZE / COLOR */
.font-dark {
    color: rgba(0, 0, 0, 1);
}

.font-light {
    color: rgba(0, 0, 0, 0.7);
}

.font-lightest {
    color: rgba(0, 0, 0, 0.5);
}

.font-bold {
    font-weight: bold;
}

.font-highlight {
    font-weight: bold;
    font-size: 16px;
    color: #039be5;
}

.font-highlight-go {
    font-weight: bold;
    font-size: 16px;
    color: #008000;
}

.font-highlight-slow {
    font-weight: bold;
    font-size: 16px;
    color: #daa520;
}

.font-highlight-stop {
    font-weight: bold;
    font-size: 16px;
    color: #bf1919;
}

.font-blink {
    animation: blinker 1s linear infinite;
    text-transform: uppercase;
    z-index: 10000;
}
@keyframes blinker {
    50% {
        opacity: 0;
    }
}

.font-ok {
    color: #4cae4c;
}

.font-alert {
    color: #d43f3a !important;
}

.font-primary {
    color: #007bff;     /* matches bootstrap primary button color */
}

.font-9 {
    font-size: 9px;
}

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

.font-11 {
    font-size: 11px;
}

.font-12 {
    font-size: 12px;
}

.font-13 {
    font-size: 13px;
}

.font-14 {
    font-size: 14px;
}

.font-15 {
    font-size: 15px;
}

.font-16 {
    font-size: 16px;
}
/* default */
.font-18 {
    font-size: 18px;
}

.font-21 {
    font-size: 21px;
}

.font-24 {
    font-size: 24px;
}

.font-30 {
    font-size: 30px;
}

.font-32 {
    font-size: 32px;
}

.font-36 {
    font-size: 36px;
}

.font-48 {
    font-size: 48px;
}


/* Google's Material Design Icons */
/* Rules for sizing the icon. */
.material-icons.md-12, .material-icons-outlined.md-12, .material-icons-two-tone.md-12, .material-icons-round.md-12, .material-icons-sharp.md-12 {
    font-size: 12px;
}

.material-icons.md-14, .material-icons-outlined.md-14, .material-icons-two-tone.md-14, .material-icons-round.md-14, .material-icons-sharp.md-14 {
    font-size: 14px;
}

.material-icons.md-16, .material-icons-outlined.md-16, .material-icons-two-tone.md-16, .material-icons-round.md-16, .material-icons-sharp.md-16 {
    font-size: 16px;
}

.material-icons.md-18, .material-icons-outlined.md-18, .material-icons-two-tone.md-18, .material-icons-round.md-18, .material-icons-sharp.md-18 {
    font-size: 18px;
}

.material-icons.md-21, .material-icons-outlined.md-21, .material-icons-two-tone.md-21, .material-icons-round.md-21, .material-icons-sharp.md-21 {
    font-size: 21px;
}

.material-icons.md-24, .material-icons-outlined.md-24, .material-icons-two-tone.md-24, .material-icons-round.md-24, .material-icons-sharp.md-24 {
    font-size: 24px;
}
/* default */
.material-icons.md-26, .material-icons-outlined.md-26, .material-icons-two-tone.md-26, .material-icons-round.md-26, .material-icons-sharp.md-26 {
    font-size: 26px;
}

.material-icons.md-28, .material-icons-outlined.md-28, .material-icons-two-tone.md-28, .material-icons-round.md-28, .material-icons-sharp.md-28 {
    font-size: 28px;
}

.material-icons.md-30, .material-icons-outlined.md-30, .material-icons-two-tone.md-30, .material-icons-round.md-30, .material-icons-sharp.md-30 {
    font-size: 30px;
}

.material-icons.md-32, .material-icons-outlined.md-32, .material-icons-two-tone.md-32, .material-icons-round.md-32, .material-icons-sharp.md-32 {
    font-size: 32px;
}

.material-icons.md-34, .material-icons-outlined.md-34, .material-icons-two-tone.md-34, .material-icons-round.md-34, .material-icons-sharp.md-34 {
    font-size: 34px;
}

.material-icons.md-36, .material-icons-outlined.md-36, .material-icons-two-tone.md-36, .material-icons-round.md-36, .material-icons-sharp.md-36 {
    font-size: 36px;
}

.material-icons.md-48, .material-icons-outlined.md-48, .material-icons-two-tone.md-48, .material-icons-round.md-48, .material-icons-sharp.md-48 {
    font-size: 48px;
}

/* Rules for using icons as black on a light background. */
.material-icons.md-dark, .material-icons-outlined.md-dark, .material-icons-two-tone.md-dark.material-icons-round.md-dark, .material-icons-sharp.md-dark {
    color: rgba(0, 0, 0, 0.54);
}

    .material-icons.md-dark.md-inactive, .material-icons-outlined.md-dark.md-inactive, .material-icons-two-tone.md-dark.md-inactive, .material-icons-round.md-dark.md-inactive, .material-icons-sharp.md-dark.md-inactive {
        color: rgba(0, 0, 0, 0.26);
    }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light, .material-icons-outlined.md-light, .material-icons-two-tone.md-light, .material-icons-round.md-light, .material-icons-sharp.md-light {
    color: rgba(255, 255, 255, 1);
}

    .material-icons.md-light.md-inactive, .material-icons-outlined.md-light.md-inactive, .material-icons-two-tone.md-light.md-inactive, .material-icons-round.md-light.md-inactive, .material-icons-sharp.md-light.md-inactive {
        color: rgba(255, 255, 255, 0.3);
    }

/* change the icon's color to highlighted */
.md-on {
    color: #039be5;
}

/* use case: (1) space delimitor using a fill circle dot to separate date/time within message UI */
.material-icons.dot, .material-icons-outlined.dot, .material-icons-two-tone.dot, .material-icons-round.dot, .material-icons-sharp.dot {
    font-size: 7px;
    color: rgba(0, 0, 0, 0.25);
    margin: 0 2px;
}

/* Font Awesome spinning icons, changed "fa-" to "md-" and added -counterclockwise */
.md-spin-lg {
    font-size: 150px
}

.md-spin-sm {
    font-size: 50px
}

.md-rotate-270 {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
}


.md-spin {
    -webkit-animation: md-spin 2s infinite linear;
    animation: md-spin 2s infinite linear;
}

.md-pulse {
    -webkit-animation: md-spin 1s infinite steps(8);
    animation: md-spin 1s infinite steps(8);
}

.md-spin-counterclockwise {
    -webkit-animation: md-spin-counterclockwise 2s infinite linear;
    animation: md-spin-counterclockwise 2s infinite linear;
}

.md-pulse-counterclockwise {
    -webkit-animation: md-spin-counterclockwise 1s infinite steps(8);
    animation: md-spin-counterclockwise 1s infinite steps(8);
}

@-webkit-keyframes md-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

@keyframes md-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

@-webkit-keyframes md-spin-counterclockwise {
    0% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }

    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

@keyframes md-spin-counterclockwise {
    0% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }

    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}


/* TABS related css (bootstrap) */

/* tab close button */
.nav-close-link {
    display: none;
}

/* add extra class to allow scrolling, without chaning the "nav" class */
.nav-scroll {
    white-space: nowrap;
    display: block !important;
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    /* hidding scrollbar in IE / Edge / Firefox */
    -webkit-overflow-scrolling: touch -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

    .nav-scroll li {
        display: inline-block;
    }

    /* selected tab item will have it's text bolded */
    .nav-scroll .nav-item > .active {
        font-weight: bold;
    }

    /* hide the scrollbar */
    .nav-scroll::-webkit-scrollbar {
        display: none;
    }

/* the highlighted tab */
/*.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    background: #f0f8ff;
    border-bottom: 2px solid #3076d5;
}*/

/* OVERWRITE OR NEW CSS CLASS RELATING TO JQUERY UI */


/* OVERWRITE OR NEW CSS CLASS RELATING TO BOOTSTRAP */

.form-control-xs {
    height: calc(1.5em + 0.25rem + 2px);
    padding: 0.15rem 0.15rem;
    font-size: 0.675rem;
    line-height: 1.5;
    border-radius: 0.2rem;
}

.btn-xs {
    padding: .25rem .4rem;
    font-size: .875rem;
    line-height: .5;
    border-radius: .2rem;
}

.btn-nav-link {
    padding: 1px 1px;
    margin: 2px 15px;
    color: rgba(0, 0, 0, 0.9);
    font-size: 18px;
}

.btn-nav-link.nobadge {
    margin: 2px 12px !important;
}

    .btn-nav-link:hover {
        color: #0066CC;
        font-weight: bold;
    }

    .btn-nav-link:focus, .btn-nav-link.focus {
        font-weight: bold;
        border-bottom: 2px solid #000000;
        border-radius: 0;
    }

    .btn-nav-link.disabled, .btn-nav-link:disabled {
        background-color: transparent;
    }

    .btn-nav-link:not(:disabled):not(.disabled):active, .btn-nav-link:not(:disabled):not(.disabled).active,
    .show > .btn-nav-link.dropdown-toggle {
        font-weight: bold;
        border-bottom: 2px solid #000000;
        border-radius: 0;
    }

        .btn-nav-link:not(:disabled):not(.disabled):active:focus, .btn-nav-link:not(:disabled):not(.disabled).active:focus,
        .show > .btn-nav-link.dropdown-toggle:focus {

        }


/* button colors to mimic severity (mimic bootstrap buttons) */

/* NORMAL THEME COLOR */
.btn-outline-extreme {
    color: #000000;
    border-color: #000000;
}

    .btn-outline-extreme:hover {
        color: #f1f1f1;
        border-color: #000000;
        background-color: #4e4e4e;
    }

    .btn-outline-extreme:focus, .btn-outline-extreme.focus {
        box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.5);
    }

    .btn-outline-extreme.disabled, .btn-outline-extreme:disabled {
        color: #4e4e4e;
        border-color: #4e4e4e;
        background-color: transparent;
    }

    .btn-outline-extreme:not(:disabled):not(.disabled):active, .btn-outline-extreme:not(:disabled):not(.disabled).active,
    .show > .btn-outline-extreme.dropdown-toggle {
        color: #212529;
        border-color: #000000;
        background-color: #4e4e4e;
    }

        .btn-outline-extreme:not(:disabled):not(.disabled):active:focus, .btn-outline-extreme:not(:disabled):not(.disabled).active:focus,
        .show > .btn-outline-extreme.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.5);
        }

.btn-outline-major {
    color: #bf1919;
    border-color: #bf1919;
}

    .btn-outline-major:hover {
        color: #212529;
        border-color: #bf1919;
        background-color: #fa5a5a;
    }

    .btn-outline-major:focus, .btn-outline-major.focus {
        box-shadow: 0 0 0 0.2rem rgba(191, 25, 25, 0.5);
    }

    .btn-outline-major.disabled, .btn-outline-major:disabled {
        color: #bf1919;
        background-color: transparent;
    }

    .btn-outline-major:not(:disabled):not(.disabled):active, .btn-outline-major:not(:disabled):not(.disabled).active,
    .show > .btn-outline-major.dropdown-toggle {
        color: #212529;
        border-color: #bf1919;
        background-color: #fa5a5a;
    }

        .btn-outline-major:not(:disabled):not(.disabled):active:focus, .btn-outline-major:not(:disabled):not(.disabled).active:focus,
        .show > .btn-outline-major.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(191, 25, 25, 0.5);
        }

.btn-outline-moderate {
    color: #D4AF37;
    border-color: #D4AF37;
}

    .btn-outline-moderate:hover {
        color: #212529;
        border-color: #D4AF37;
        background-color: #f0ed67;
    }

    .btn-outline-moderate:focus, .btn-outline-moderate.focus {
        box-shadow: 0 0 0 0.2rem rgba(255, 165, 0, 0.5);
    }

    .btn-outline-moderate.disabled, .btn-outline-moderate:disabled {
        color: #D4AF37;
        background-color: transparent;
    }

    .btn-outline-moderate:not(:disabled):not(.disabled):active, .btn-outline-moderate:not(:disabled):not(.disabled).active,
    .show > .btn-outline-moderate.dropdown-toggle {
        color: #212529;
        border-color: #D4AF37;
        background-color: #f0ed67;
    }

        .btn-outline-moderate:not(:disabled):not(.disabled):active:focus, .btn-outline-moderate:not(:disabled):not(.disabled).active:focus,
        .show > .btn-outline-moderate.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(255, 165, 0, 0.5);
        }

.btn-outline-minor {
    color: #28a745;
    border-color: #28a745;
}

    .btn-outline-minor:hover {
        color: #212529;
        border-color: #28a745;
        background-color: #54f672;
    }

    .btn-outline-minor:focus, .btn-outline-minor.focus {
        box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
    }

    .btn-outline-minor.disabled, .btn-outline-minor:disabled {
        color: #28a745;
        background-color: transparent;
    }

    .btn-outline-minor:not(:disabled):not(.disabled):active, .btn-outline-minor:not(:disabled):not(.disabled).active,
    .show > .btn-outline-minor.dropdown-toggle {
        color: #212529;
        border-color: #28a745;
        background-color: #54f672;
    }

        .btn-outline-minor:not(:disabled):not(.disabled):active:focus, .btn-outline-minor:not(:disabled):not(.disabled).active:focus,
        .show > .btn-outline-minor.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
        }

.btn-outline-freely {
    color: #008080;
    border-color: #008080; /*border-color: #008080;*/
}

    .btn-outline-freely:hover {
        color: #212529;
        border-color: #008080;
        background-color: #85AAA5;
    }

    .btn-outline-freely:focus, .btn-outline-freely.focus {
        box-shadow: 0 0 0 0.2rem rgba(0, 128, 128, 0.5);
    }

    .btn-outline-freely.disabled, .btn-outline-freely:disabled {
        color: #008080;
        background-color: transparent;
    }

    .btn-outline-freely:not(:disabled):not(.disabled):active, .btn-outline-freely:not(:disabled):not(.disabled).active,
    .show > .btn-outline-freely.dropdown-toggle {
        color: #212529;
        border-color: #008080;
        background-color: #85AAA5;
    }

        .btn-outline-freely:not(:disabled):not(.disabled):active:focus, .btn-outline-freely:not(:disabled):not(.disabled).active:focus,
        .show > .btn-outline-freely.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(0, 128, 128, 0.5);
        }

.btn-outline-advisory {
    color: #0c7bff;
    border-color: #0c7bff;
}

    .btn-outline-advisory:hover {
        color: #212529;
        border-color: #0c7bff;
        background-color: #54bff6;
    }

    .btn-outline-advisory:focus, .btn-outline-advisory.focus {
        box-shadow: 0 0 0 0.2rem rgba(12, 123, 255, 0.5);
    }

    .btn-outline-advisory.disabled, .btn-outline-advisory:disabled {
        color: #007bff;
        background-color: transparent;
    }

    .btn-outline-advisory:not(:disabled):not(.disabled):active, .btn-outline-advisory:not(:disabled):not(.disabled).active,
    .show > .btn-outline-advisory.dropdown-toggle {
        color: #212529;
        border-color: #0c7bff;
        background-color: #54bff6;
    }

        .btn-outline-advisory:not(:disabled):not(.disabled):active:focus, .btn-outline-advisory:not(:disabled):not(.disabled).active:focus,
        .show > .btn-outline-advisory.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(12, 123, 255, 0.5);
        }

.btn-outline-construction {
    color: #917128;
    border-color: #f19f00; /*border-color: #917128;*/
}

    .btn-outline-construction:hover {
        color: #212529;
        border-color: #f19f00;
        background-color: #f6bb54;
    }

    .btn-outline-construction:focus, .btn-outline-construction.focus {
        box-shadow: 0 0 0 0.2rem rgba(145, 113, 40, 0.5);
    }

    .btn-outline-construction.disabled, .btn-outline-construction:disabled {
        color: #f19f00; /*color: #917128;*/
        background-color: transparent;
    }

    .btn-outline-construction:not(:disabled):not(.disabled):active, .btn-outline-construction:not(:disabled):not(.disabled).active,
    .show > .btn-outline-construction.dropdown-toggle {
        color: #212529;
        border-color: #f19f00;
        background-color: #f6bb54;
    }

        .btn-outline-construction:not(:disabled):not(.disabled):active:focus, .btn-outline-construction:not(:disabled):not(.disabled).active:focus,
        .show > .btn-outline-construction.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(145, 113, 40, 0.5);
        }

.btn-outline-transit {
    color: #9D35A6;
    border-color: #9D35A6;
}

    .btn-outline-transit:hover {
        color: #f1f1f1; /*color: #212529;*/
        border-color: #9D35A6;
        background-color: #955ba4;
    }

    .btn-outline-transit:focus, .btn-outline-transit.focus {
        box-shadow: 0 0 0 0.2rem rgba(149, 91, 164, 0.5);
    }

    .btn-outline-transit.disabled, .btn-outline-transit:disabled {
        color: #9D35A6;
        background-color: transparent;
    }

    .btn-outline-transit:not(:disabled):not(.disabled):active, .btn-outline-transit:not(:disabled):not(.disabled).active,
    .show > .btn-outline-transit.dropdown-toggle {
        color: #212529;
        border-color: #9D35A6;
        background-color: #955ba4;
    }

        .btn-outline-transit:not(:disabled):not(.disabled):active:focus, .btn-outline-transit:not(:disabled):not(.disabled).active:focus,
        .show > .btn-outline-transit.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(149, 91, 164, 0.5);
        }


/* OVERRIDE THEME COLOR (light) */
.btn-outline-extreme-light {
    color: #000000;
    border-color: #000000;
}

    .btn-outline-extreme-light:hover {
        color: #212529;
        border-color: #000000;
        background-color: #c0c0c0;
    }

    .btn-outline-extreme-light:focus, .btn-outline-extreme-light.focus {
        box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.5);
    }

    .btn-outline-extreme-light.disabled, .btn-outline-extreme-light:disabled {
        color: #c0c0c0;
        border-color: #c0c0c0;
        background-color: transparent;
    }

    .btn-outline-extreme-light:not(:disabled):not(.disabled):active, .btn-outline-extreme-light:not(:disabled):not(.disabled).active,
    .show > .btn-outline-extreme-light.dropdown-toggle {
        color: #212529;
        border-color: #000000;
        background-color: #c0c0c0;
    }

        .btn-outline-extreme-light:not(:disabled):not(.disabled):active:focus, .btn-outline-extreme-light:not(:disabled):not(.disabled).active:focus,
        .show > .btn-outline-extreme-light.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.5);
        }

.btn-outline-major-light {
    color: #bf1919;
    border-color: #bf1919;
}

    .btn-outline-major-light:hover {
        color: #212529;
        background-color: #ffc1c1;
        border-color: #bf1919;
    }

    .btn-outline-major-light:focus, .btn-outline-major-light.focus {
        box-shadow: 0 0 0 0.2rem rgba(191, 25, 25, 0.5);
    }

    .btn-outline-major-light.disabled, .btn-outline-major-light:disabled {
        color: #bf1919;
        background-color: transparent;
    }

    .btn-outline-major-light:not(:disabled):not(.disabled):active, .btn-outline-major-light:not(:disabled):not(.disabled).active,
    .show > .btn-outline-major-light.dropdown-toggle {
        color: #212529;
        border-color: #bf1919;
        background-color: #ffc1c1;
    }

        .btn-outline-major-light:not(:disabled):not(.disabled):active:focus, .btn-outline-major-light:not(:disabled):not(.disabled).active:focus,
        .show > .btn-outline-major-light.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(191, 25, 25, 0.5);
        }

.btn-outline-moderate-light {
    color: #FFBF00;
    border-color: #FFBF00;
}

    .btn-outline-moderate-light:hover {
        color: #212529;
        border-color: #FFBF00;
        background-color: #FFFF8F;
    }

    .btn-outline-moderate-light:focus, .btn-outline-moderate-light.focus {
        box-shadow: 0 0 0 0.2rem rgba(255, 191, 0, 0.5);
    }

    .btn-outline-moderate-light.disabled, .btn-outline-moderate-light:disabled {
        color: #FFBF00;
        background-color: transparent;
    }

    .btn-outline-moderate-light:not(:disabled):not(.disabled):active, .btn-outline-moderate-light:not(:disabled):not(.disabled).active,
    .show > .btn-outline-moderate-light.dropdown-toggle {
        color: #212529;
        background-color: #FFFF8F;
        border-color: #FFBF00;
    }

        .btn-outline-moderate-light:not(:disabled):not(.disabled):active:focus, .btn-outline-moderate-light:not(:disabled):not(.disabled).active:focus,
        .show > .btn-outline-moderate.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(255, 191, 0, 0.5);
        }

.btn-outline-minor-light {
    color: #28a745;
    border-color: #28a745;
}

    .btn-outline-minor-light:hover {
        color: #212529;
        border-color: #28a745;
        background-color: #98FB98;
    }

    .btn-outline-minor-light:focus, .btn-outline-minor-light.focus {
        box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
    }

    .btn-outline-minor-light.disabled, .btn-outline-minor-light:disabled {
        color: #28a745;
        background-color: transparent;
    }

    .btn-outline-minor-light:not(:disabled):not(.disabled):active, .btn-outline-minor-light:not(:disabled):not(.disabled).active,
    .show > .btn-outline-minor-light.dropdown-toggle {
        color: #212529;
        border-color: #28a745;
        background-color: #98FB98;
    }

        .btn-outline-minor-light:not(:disabled):not(.disabled):active:focus, .btn-outline-minor-light:not(:disabled):not(.disabled).active:focus,
        .show > .btn-outline-minor-light.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
        }

.btn-outline-freely-light {
    color: #85AAA5;
    border-color: #85AAA5;
}

    .btn-outline-freely-light:hover {
        color: #212529;
        border-color: #85AAA5;
        background-color: #e5edec;
    }

    .btn-outline-freely-light:focus, .btn-outline-freely-light.focus {
        box-shadow: 0 0 0 0.2rem rgba(133, 170, 165, 0.5);
    }

    .btn-outline-freely-light.disabled, .btn-outline-freely-light:disabled {
        color: #85AAA5;
        background-color: transparent;
    }

    .btn-outline-freely-light:not(:disabled):not(.disabled):active, .btn-outline-freely-light:not(:disabled):not(.disabled).active,
    .show > .btn-outline-freely-light.dropdown-toggle {
        color: #212529;
        border-color: #85AAA5;
        background-color: #e5edec;
    }

        .btn-outline-freely-light:not(:disabled):not(.disabled):active:focus, .btn-outline-freely-light:not(:disabled):not(.disabled).active:focus,
        .show > .btn-outline-freely-light.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(133, 170, 165, 0.5);
        }

.btn-outline-advisory-light {
    color: #0c7bff;
    border-color: #0c7bff;
}

    .btn-outline-advisory-light:hover {
        color: #212529;
        border-color: #0c7bff;
        background-color: #ADD8E6;
    }

    .btn-outline-advisory-light:focus, .btn-outline-advisory-light.focus {
        box-shadow: 0 0 0 0.2rem rgba(12, 123, 255, 0.5);
    }

    .btn-outline-advisory-light.disabled, .btn-outline-advisory-light:disabled {
        color: #007bff;
        background-color: transparent;
    }

    .btn-outline-advisory-light:not(:disabled):not(.disabled):active, .btn-outline-advisory-light:not(:disabled):not(.disabled).active,
    .show > .btn-outline-advisory-light.dropdown-toggle {
        color: #212529;
        border-color: #0c7bff;
        background-color: #ADD8E6;
    }

        .btn-outline-advisory-light:not(:disabled):not(.disabled):active:focus, .btn-outline-advisory-light:not(:disabled):not(.disabled).active:focus,
        .show > .btn-outline-advisory-light.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(12, 123, 255, 0.5);
        }

.btn-outline-construction-light {
    color: #FF4500;
    border-color: #FF4500;
}

    .btn-outline-construction-light:hover {
        color: #212529;
        border-color: #FF4500;
        background-color: #FFE5B4;
    }

    .btn-outline-construction-light:focus, .btn-outline-construction-light.focus {
        box-shadow: 0 0 0 0.2rem rgba(255, 69, 0, 0.5);
    }

    .btn-outline-construction-light.disabled, .btn-outline-construction-light:disabled {
        color: #FF4500;
        background-color: transparent;
    }

    .btn-outline-construction-light:not(:disabled):not(.disabled):active, .btn-outline-construction-light:not(:disabled):not(.disabled).active,
    .show > .btn-outline-construction-light.dropdown-toggle {
        color: #212529;
        border-color: #FF4500;
        background-color: #FFE5B4;
    }

        .btn-outline-construction-light:not(:disabled):not(.disabled):active:focus, .btn-outline-construction-light:not(:disabled):not(.disabled).active:focus,
        .show > .btn-outline-construction-light.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(255, 69, 0, 0.5);
        }

.btn-outline-transit-light {
    color: #8B008B;
    border-color: #8B008B;
}

    .btn-outline-transit-light:hover {
        color: #212529;
        border-color: #8B008B;
        background-color: #DCA9DC;
    }

    .btn-outline-transit-light:focus, .btn-outline-transit-light.focus {
        box-shadow: 0 0 0 0.2rem rgba(139, 0, 139, 0.5);
    }

    .btn-outline-transit-light.disabled, .btn-outline-transit-light:disabled {
        color: #8B008B;
        background-color: transparent;
    }

    .btn-outline-transit-light:not(:disabled):not(.disabled):active, .btn-outline-transit-light:not(:disabled):not(.disabled).active,
    .show > .btn-outline-transit-light.dropdown-toggle {
        color: #212529;
        border-color: #8B008B;
        background-color: #DCA9DC;
    }

        .btn-outline-transit-light:not(:disabled):not(.disabled):active:focus, .btn-outline-transit-light:not(:disabled):not(.disabled).active:focus,
        .show > .btn-outline-transit-light.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(139, 0, 139, 0.5);
        }



/* make the collapse FAST, no slow transition */
.collapsing {
    -webkit-transition: none;
    transition: none;
    display: none;
}

.dropdown {
    position: fixed;
    z-index: 9999;
}

/* make sure modal has higher z-index than dropdown menus */
.modal {
    z-index: 99999;
}

.alert-sm {
    padding: 3px 10px;
}

/* remove the outline color focus/active for form controls and buttons (Chrome issue) */
.btn:focus, .btn:active, button:focus, button:active, .form-control:focus, .form-control:active {
    outline: none !important;
    box-shadow: none;
}

/* override bootstrap-select look/feel with the selection */
button[data-toggle="dropdown"].btn-default,
button[data-toggle="dropdown"] {
    background-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    border: 1px solid #dce4ec;
}

    /* remove the outline color focus/active for form controls */
    button[data-toggle="dropdown"].btn:active,
    button[data-toggle="dropdown"].btn:focus {
        outline: none !important;
        box-shadow: none;
    }

/* bootstrap-select position issue */
.bootstrap-select {
    position: relative !important;
}
    .bootstrap-select.form-control {
        z-index: inherit;
    }

.bs-searchbox > input {
    max-height: 30px !important;
}

/* bootstrap-select options too long text */
/* attach the "maxwidth" class to the select tag */
.bootstrap-select.maxwidth .dropdown-menu {
    max-width: 600px;
    overflow: hidden;
}

    .bootstrap-select.maxwidth .dropdown-menu li a span {
        width: inherit;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* add extra padding for each option within the select tag */
.bootstrap-select .dropdown-menu li a {
    padding: 3px 13px;
}

/* update the background color for disabled select option */
.bootstrap-select.disabled,
.bootstrap-select > .disabled {
    cursor: not-allowed;
    background-color: #e9ecef;
    opacity: 0.95;
    border-radius: 0.25rem;
    border: 1px solid #ced4da;
}

/* bootstrap-select: using data-header to give header text within the options list */
.bootstrap-select .popover-header {
    padding: 2px 12px;
}

/* progress bar to run infinitively  */
.progress-bar.indeterminate {
    position: relative;
    animation: progress-indeterminate 3s linear infinite;
}

@keyframes progress-indeterminate {
    from {
        left: -25%;
        width: 25%;
    }

    to {
        left: 100%;
        width: 25%;
    }
}

/* BAD MATH traffic design for traffic list */

/* active state for menu icons */
.menu-icon-active {
    color: #0066CC;
    opacity: 1.0 !important;
    font-weight: 500;
}

/* toggle effect for menu icons */
.menu-icon-highlight {
    color: #0066CC;
    opacity: 1.0 !important;
    font-weight: 500;
}

/* NORMAL THEME COLOR */
.severity-internal {
    border: 1px solid #d6d6d6;
    background-color: #ffffff;
    border-radius: 0.25rem;
}

    .severity-internal.hover {
        background-color: #ffffff !important;
    }

.severity-extreme {
    color: #f1f1f1;
    border: 1px solid #000000;
    background-color: #4e4e4e; /*background-color: #c0c0c0;*/
    border-radius: 0.25rem;
}

    .severity-extreme.hover {
        background-color: #5f5f5f !important;
    }

.severity-major {
    border: 1px solid #bf1919;
    background-color: #fa5a5a;
    border-radius: 0.25rem;
}

    .severity-major.hover {
        background-color: #fa6a6a !important;
    }

.severity-moderate {
    border: 1px solid #D4AF37;
    background-color: #f0ed67;
    border-radius: 0.25rem;
}

    .severity-moderate.hover {
        background-color: #eeec72 !important;
    }

.severity-minor {
    border: 1px solid #28a745;
    background-color: #54f672;
    border-radius: 0.25rem;
}

    .severity-minor.hover {
        background-color: #76f78e !important;
    }

.severity-freely {
    border: 1px solid #008080;
    background-color: #85AAA5;
    border-radius: 0.25rem;
}

    .severity-freely.hover {
        background-color: #91b2ae !important;
    }

.severity-advisory {
    border: 1px solid #0c7bff;
    background-color: #54bff6;
    border-radius: 0.25rem;
}

    .severity-advisory.hover {
        background-color: #76cbf7 !important;
    }

.severity-construction {
    border: 1px solid #f19f00;
    background-color: #f6bb54;
    border-radius: 0.25rem;
}

    .severity-construction.hover {
        background-color: #f7c876 !important;
    }

.severity-transit {
    border: 1px solid #9D35A6;
    background-color: #955ba4;
    border-radius: 0.25rem;
}

    .severity-transit.hover {
        background-color: #9f6bad !important;
    }

.font-severity-extreme {
    color: #4e4e4e;
    text-shadow: 0 0 1px #000000, 0 0 1px #000000;
}

.font-severity-major {
    color: #fa5a5a;
    text-shadow: 0 0 1px #bf1919, 0 0 1px #bf1919;
}

.font-severity-moderate {
    color: #f0ed67;
    text-shadow: 0 0 1px #D4AF37, 0 0 1px #D4AF37;
}

.font-severity-minor {
    color: #54f672;
    text-shadow: 0 0 1px #28a745, 0 0 1px #28a745;
}

.font-severity-freely {
    color: #85AAA5;
    text-shadow: 0 0 1px #008080, 0 0 1px #008080;
}

.font-severity-advisory {
    color: #54bff6;
    text-shadow: 0 0 1px #0c7bff, 0 0 1px #0c7bff;
}

.font-severity-construction {
    color: #f6bb54;
    text-shadow: 0 0 1px #f19f00, 0 0 1px #f19f00;
}

.font-severity-transit {
    color: #955ba4;
    text-shadow: 0 0 1px #9D35A6, 0 0 1px #9D35A6;
}

/* OVERRIDE THEME COLOR (light) */
.severity-internal-light {
    border: 1px solid #d6d6d6;
    background-color: #ffffff;
    border-radius: 0.25rem;
}

    .severity-internal-light.hover {
        background-color: #ffffff !important;
    }

.severity-extreme-light {
    color: #000000;
    border: 1px solid #000000;
    background-color: #c0c0c0;
    border-radius: 0.25rem;
}

    .severity-extreme-light.hover {
        background-color: #dadada !important;
    }

.severity-major-light {
    border: 1px solid #bf1919;
    background-color: #ffc1c1;
    border-radius: 0.25rem;
}

    .severity-major-light.hover {
        background-color: #ffd5d5 !important;
    }

.severity-moderate-light {
    border: 1px solid #FFBF00;
    background-color: #FFFF8F;
    border-radius: 0.25rem;
}

    .severity-moderate-light.hover {
        background-color: #ffffb6 !important;
    }

.severity-minor-light {
    border: 1px solid #28a745;
    background-color: #98FB98;
    border-radius: 0.25rem;
}

    .severity-minor-light.hover {
        background-color: #befcbe !important;
    }

.severity-freely-light {
    border: 1px solid #85AAA5;
    background-color: #e5edec;
    border-radius: 0.25rem;
}

    .severity-freely-light.hover {
        background-color: #f1f5f4 !important;
    }

.severity-advisory-light {
    border: 1px solid #0C7BFF;
    background-color: #ADD8E6;
    border-radius: 0.25rem;
}

    .severity-advisory-light.hover {
        background-color: #c1e1ec !important;
    }

.severity-construction-light {
    border: 1px solid #FF4500;
    background-color: #FFE5B4;
    border-radius: 0.25rem;
}

    .severity-construction-light.hover {
        background-color: #ffeece !important;
    }

.severity-transit-light {
    border: 1px solid #8B008B;
    background-color: #DCA9DC;
    border-radius: 0.25rem;
}

    .severity-transit-light.hover {
        background-color: #e3bbe3 !important;
    }

.font-severity-extreme-light {
    color: #c0c0c0;
    text-shadow: 0 0 1px #000000, 0 0 1px #000000;
}

.font-severity-major-light {
    color: #ffc1c1;
    text-shadow: 0 0 1px #bf1919, 0 0 1px #bf1919;
}

.font-severity-moderate-light {
    color: #FFFF8F;
    text-shadow: 0 0 1px #FFBF00, 0 0 1px #FFBF00;
}

.font-severity-minor-light {
    color: #98FB98;
    text-shadow: 0 0 1px #28a745, 0 0 1px #28a745;
}

.font-severity-freely-light {
    color: #e5edec;
    text-shadow: 0 0 1px #85AAA5, 0 0 1px #85AAA5;
}

.font-severity-advisory-light {
    color: #ADD8E6;
    text-shadow: 0 0 1px #0C7BFF, 0 0 1px #0C7BFF;
}

.font-severity-construction-light {
    color: #FFE5B4;
    text-shadow: 0 0 1px #FF4500, 0 0 1px #FF4500;
}

.font-severity-transit-light {
    color: #DCA9DC;
    text-shadow: 0 0 1px #8B008B, 0 0 1px #8B008B;
}

/* TABLE SCHEMA */
.eventTable, .readerTable {
    font-family: Roboto, sans-serif;
    border-top: white;
    border-bottom: black;
    margin: 13px;
    display: inline-block;
    width: 100%;
}

    .eventTable .row, .readerTable .row {
        border: 1px solid white;
        position: relative;
        display: inline-block;
        width: 100%;
        float: left;
    }

        .eventTable .row.expired, .readerTable .row.expired {
            background-image: url("/images/barberPole.png");
            -webkit-animation: barberPole 1.5s linear infinite normal;
            -moz-animation: barberPole 1.5s linear infinite normal;
            animation: barberPole 1.5s linear infinite normal;
        }

@keyframes barberPole {
    0% {
        background-position: left 0;
    }

    100% {
        background-position: left -10px;
    }
}

@-webkit-keyframes barberPole {
    0% {
        background-position: left 0;
    }

    100% {
        background-position: left -10px;
    }
}

@-moz-keyframes barberPole {
    0% {
        background-position: left 0;
    }

    100% {
        background-position: left -10px;
    }
}

.eventTable .tableHeader .row, .readerTable .tableHeader .row {
    border: none;
    font-size: 16px;
    color: #3a3a39;
}

.eventTable .tableHeader .border, .readerTable .tableHeader .border {
    border: solid 1px #eee !important;
}

.eventTable .row > input, .readerTable .row > input {
    position: absolute;
    top: 11px;
    left: 12px;
    margin: 0;
    padding: 0;
    z-index: 2;
}

.eventTable .row > .material-icons, .readerTable .row > .material-icons {
    position: absolute;
    top: 2px;
    left: 10px;
    margin: 0;
    padding: 0;
    z-index: 2;
}

.eventTable .row > .left-menu, .readerTable .row > .left-menu {
    position: absolute;
    top: 2px;
    left: 10px;
    margin: 0;
    padding: 0;
    z-index: 2;
    width: 45px;
}

.eventTable .row .wrapper {
    margin: 0;
    padding: 0;
}

.readerTable .row .wrapper {
    margin: 0;
    padding: 0;
}

    .eventTable .row .wrapper.assigned, .readerTable .row .wrapper.assigned {
        margin-left: 14px !important;
        width: calc(100% + 2px);
    }

    .eventTable .row .wrapper > .left-menu, .readerTable .row .wrapper > .left-menu {
        position: absolute;
        top: 2px;
        left: 10px;
        margin: 0;
        padding: 0;
        z-index: 2;
        width: 45px;
    }

    .eventTable .row .wrapper > input, .readerTable .row .wrapper > input {
        position: absolute;
        top: 11px;
        left: 12px;
        margin: 0;
        padding: 0;
        z-index: 2;
    }


.eventTable .row .rowContents {
    margin: 0 9px;
    padding: 1px 0 1px 41px; /*padding: 1px 0 1px 22px;*/ /* NOTE: added extra padding due to 2 icons before area column */
    zoom: 1;
    /*overflow: auto;*/
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 1;
}

.readerTable .row .rowContents {
    margin: 0 9px;
    padding: 1px 0 1px 22px;
    zoom: 1;
    /*overflow: auto;*/
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 1;
}

    .eventTable .row .rowContents > div, .readerTable .row .rowContents > div {
        float: left;
        padding: 2px 0.75%; /* original: padding: 7px 1%;*/
    }

        .eventTable .row .rowContents > div:first-child, .readerTable .row .rowContents > div:first-child {
            margin-left: 7px;
            padding-left: 7px;          /* original: padding-left: 0; I added to adjust for the star icon */
        }

.eventTable .tableHeader .row .rowContents > div, .readerTable .tableHeader .row .rowContents > div {
    border-left: 1px solid #dbdbdb;
    margin-left: -1px;
    padding-top: 1px;
    padding-bottom: 3px;
}

    .eventTable .tableHeader .row .rowContents > div:first-child, .readerTable .tableHeader .row .rowContents > div:first-child {
        margin-left: 7px;
        /*border-left: none;*/
    }

.eventTable .tableHeader .row > input, .readerTable .tableHeader .row > input {
    top: 7px;
}

.eventTable .tableHeader .row > .material-icons, .readerTable .tableHeader .row > .material-icons {
    padding-right: 2px;
    border-right: 1px solid #dbdbdb;
    padding-top: 1px;
    padding-bottom: 8px;
}

.eventTable .row.heading {
    font-weight: bold;
    font-size: 14px;
    /*font-style: italic;*/
    padding: 3px 9px 0 14px;    /*padding: 5px 9px 5px 14px;*/
    border-top: none;
    border-color: transparent #888 black #bbb;
    /* gradient background */
    background: #e2e2e2; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #d6d6d6 0%, #efefef 25%, #d6d6d6 50%, #efefef 75%, #d6d6d6 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#d6d6d6), color-stop(25%,#efefef), color-stop(50%,#d6d6d6), color-stop(75%,#efefef), color-stop(100%,#d6d6d6)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg, #d6d6d6 0%,#efefef 25%,#d6d6d6 50%,#efefef 75%,#d6d6d6 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg, #d6d6d6 0%,#efefef 25%,#d6d6d6 50%,#efefef 75%,#d6d6d6 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg, #d6d6d6 0%,#efefef 25%,#d6d6d6 50%,#efefef 75%,#d6d6d6 100%); /* IE10+ */
    background: linear-gradient(135deg, #d6d6d6 0%,#efefef 25%,#d6d6d6 50%,#efefef 75%,#d6d6d6 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6d6d6', endColorstr='#efefef',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.readerTable .row.heading {
    font-weight: bold;
    font-size: 14px;
    /*font-style: italic;*/
    padding: 3px 0 0 14px; /*padding: 5px 0 5px 14px;*/
    border-top: none;
    border-color: transparent #888 black #bbb;
    /* gradient background */
    background: #e2e2e2; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #d6d6d6 0%, #efefef 25%, #d6d6d6 50%, #efefef 75%, #d6d6d6 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#d6d6d6), color-stop(25%,#efefef), color-stop(50%,#d6d6d6), color-stop(75%,#efefef), color-stop(100%,#d6d6d6)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg, #d6d6d6 0%,#efefef 25%,#d6d6d6 50%,#efefef 75%,#d6d6d6 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg, #d6d6d6 0%,#efefef 25%,#d6d6d6 50%,#efefef 75%,#d6d6d6 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg, #d6d6d6 0%,#efefef 25%,#d6d6d6 50%,#efefef 75%,#d6d6d6 100%); /* IE10+ */
    background: linear-gradient(135deg, #d6d6d6 0%,#efefef 25%,#d6d6d6 50%,#efefef 75%,#d6d6d6 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6d6d6', endColorstr='#efefef',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

    .eventTable .row.heading > input, .readerTable .row.heading > input {
        position: relative;
        top: 1px;
        left: -3px;
        margin: 0;
        padding: 0;
        z-index: 2;
    }

/* NORMAL THEME COLOR */
.eventTable .row.extreme, .readerTable .row.extreme {
    color: #f1f1f1;
    background-color: #000000;
    border-top-color: #000000;
}

    .eventTable .row.extreme .svg-pin, .readerTable .row.extreme .svg-pin {
        background-image: url(/images/pin-icon-extreme.svg);
        background-repeat: no-repeat;
    }

    .eventTable .row.extreme .svg-unpin, .readerTable .row.extreme .svg-unpin {
        background-image: url(/images/unpin-icon-extreme.svg);
        background-repeat: no-repeat;
    }

    .eventTable .row.extreme .rowContents, .readerTable .row.extreme .rowContents {
        background-color: #4e4e4e;
        /*background-image: url("/images/extremeBG.gif");*/
    }

    .eventTable .row.extreme.hover .rowContents, .readerTable .row.extreme.hover .rowContents {
        background-color: #5f5f5f !important;
    }

    .eventTable .wrapper > .row.extreme .rowContents, .readerTable .wrapper > .row.extreme .rowContents {
        background-color: #4e4e4e;
        /*background-image: url("/images/extremeBG.gif");*/
    }

    .eventTable .row.extreme.hover .wrapper > .row .rowContents, .readerTable .row.extreme.hover .wrapper > .row .rowContents {
        background-color: #5f5f5f !important;
    }

.eventTable .row.major, .readerTable .row.major {
    border-top-color: #bf1919;
    background-color: #bf1919;
}

    .eventTable .row.major .rowContents, .readerTable .row.major .rowContents {
        background-color: #fa5a5a;
    }

    .eventTable .row.major.hover .rowContents, .readerTable .row.major.hover .rowContents {
        background-color: #fa6a6a !important;
    }

    .eventTable .wrapper > .row.major .rowContents, .readerTable .wrapper > .row.major .rowContents {
        background-color: #fa5a5a;
    }

    .eventTable .row.major.hover .wrapper > .row .rowContents, .readerTable .row.major.hover .wrapper > .row .rowContents {
        background-color: #fa6a6a !important;
    }

.eventTable .row.moderate, .readerTable .row.moderate {
    border-top-color: #D4AF37;
    background-color: #D4AF37;
}

    .eventTable .row.moderate .rowContents, .readerTable .row.moderate .rowContents {
        background-color: #eae850;
    }

    .eventTable .row.moderate.hover .rowContents, .readerTable .row.moderate.hover .rowContents {
        background-color: #eeec72 !important;
    }

    .eventTable .wrapper > .row.moderate .rowContents, .readerTable .wrapper > .row.moderate .rowContents {
        background-color: #eae850;
    }

    .eventTable .row.moderate.hover .wrapper > .row .rowContents, .readerTable .row.moderate.hover .wrapper > .row .rowContents {
        background-color: #eeec72 !important;
    }

.eventTable .row.minor, .readerTable .row.minor {
    border-top-color: #28a745;
    background-color: #28a745;
}

    .eventTable .row.minor .rowContents, .readerTable .row.minor .rowContents {
        background-color: #54f672;
    }

    .eventTable .row.minor.hover .rowContents, .readerTable .row.minor.hover .rowContents {
        background-color: #76f78e !important;
    }

    .eventTable .wrapper > .row.minor .rowContents, .readerTable .wrapper > .row.minor .rowContents {
        background-color: #54f672;
    }

    .eventTable .row.minor.hover .wrapper > .row .rowContents, .readerTable .row.minor.hover .wrapper > .row .rowContents {
        background-color: #76f78e !important;
    }

.eventTable .row.freely, .readerTable .row.freely {
    border-top-color: #008080;
    background-color: #008080;
}

    .eventTable .row.freely .rowContents, .readerTable .row.freely .rowContents {
        background-color: #85AAA5;
    }

    .eventTable .row.freely.hover .rowContents, .readerTable .row.freely.hover .rowContents {
        background-color: #91b2ae !important;
    }

    .eventTable .wrapper > .row.freely .rowContents, .readerTable .wrapper > .row.freely .rowContents {
        background-color: #85AAA5;
    }

    .eventTable .row.freely.hover .wrapper > .row .rowContents, .readerTable .row.freely.hover .wrapper > .row .rowContents {
        background-color: #91b2ae !important;
    }

.eventTable .row.construction, .readerTable .row.construction {
    border-top-color: #f19f00;
    background-color: #f19f00;
}

    .eventTable .row.construction .rowContents, .readerTable .row.construction .rowContents {
        background-color: #f6bb54;
    }

    .eventTable .row.construction.hover .rowContents, .readerTable .row.construction.hover .rowContents {
        background-color: #f7c876 !important;
    }

    .eventTable .wrapper > .row.construction .rowContents, .readerTable .wrapper > .row.construction .rowContents {
        background-color: #f6bb54;
    }

    .eventTable .row.construction.hover .wrapper > .row .rowContents, .readerTable .row.construction.hover .wrapper > .row .rowContents {
        background-color: #f7c876 !important;
    }

.eventTable .row.event, .readerTable .row.event {
    border-top-color: #3076d5;
    background-color: #3076d5;
}

    .eventTable .row.event .rowContents, .readerTable .row.event .rowContents {
        background-color: #54bff6;
    }

    .eventTable .row.event.hover .rowContents, .readerTable .row.event.hover .rowContents {
        background-color: #76cbf7 !important;
    }

    .eventTable .wrapper > .row.event .rowContents, .readerTable .wrapper > .row.event .rowContents {
        background-color: #54bff6;
    }

    .eventTable .row.event.hover .wrapper > .row .rowContents, .readerTable .row.event.hover .wrapper > .row .rowContents {
        background-color: #76cbf7 !important;
    }

.eventTable .row.advisory, .readerTable .row.advisory {
    border-top-color: #0c7bff;
    background-color: #0c7bff;
}

    .eventTable .row.advisory .rowContents, .readerTable .row.advisory .rowContents {
        background-color: #54bff6;
    }

    .eventTable .row.advisory.hover .rowContents, .readerTable .row.advisory.hover .rowContents {
        background-color: #76cbf7 !important;
    }

    .eventTable .wrapper > .row.advisory .rowContents, .readerTable .wrapper > .row.advisory .rowContents {
        background-color: #54bff6;
    }

    .eventTable .row.advisory.hover .wrapper > .row .rowContents, .readerTable .row.advisory.hover .wrapper > .row .rowContents {
        background-color: #76cbf7 !important;
    }

.eventTable .row.transit, .readerTable .row.transit {
    color: #f1f1f1;
    border-top-color: #9D35A6;
    background-color: #9D35A6;
}

    .eventTable .row.transit .svg-pin, .readerTable .row.transit .svg-pin {
        background-image: url(/images/pin-icon-extreme.svg);
        background-repeat: no-repeat;
    }

    .eventTable .row.transit .svg-unpin, .readerTable .row.transit .svg-unpin {
        background-image: url(/images/unpin-icon-extreme.svg);
        background-repeat: no-repeat;
    }

    .eventTable .row.transit .rowContents, .readerTable .row.transit .rowContents {
        background-color: #955ba4;
    }

    .eventTable .row.transit.hover .rowContents, .readerTable .row.transit.hover .rowContents {
        background-color: #9f6bad !important;
    }

    .eventTable .wrapper > .row.transit .rowContents, .readerTable .wrapper > .row.transit .rowContents {
        background-color: #955ba4;
    }

    .eventTable .row.transit.hover .wrapper > .row .rowContents, .readerTable .row.transit.hover .wrapper > .row .rowContents {
        background-color: #9f6bad !important;
    }

/* OVERRIDE THEME COLOR (light) */
.eventTable .row.extreme-light, .readerTable .row.extreme-light {
    color: #000000 !important;
    background-color: #000000 !important;
    border-top-color: #000000 !important;
}

    .eventTable .row.extreme-light .rowContents, .readerTable .row.extreme-light .rowContents {
        background-color: #c0c0c0 !important;
    }

    .eventTable .row.extreme-light.hover .rowContents, .readerTable .row.extreme-light.hover .rowContents {
        background-color: #dadada !important;
    }

    .eventTable .row.extreme-light .svg-pin, .readerTable .row.extreme-light .svg-pin {
        background-image: url(/images/pin-icon.svg) !important;
        background-repeat: no-repeat;
    }

    .eventTable .row.extreme-light .svg-unpin, .readerTable .row.extreme-light .svg-unpin {
        background-image: url(/images/unpin-icon.svg) !important;
        background-repeat: no-repeat;
    }

    .eventTable .wrapper > .row.extreme-light .rowContents, .readerTable .wrapper > .row.extreme-light .rowContents {
        background-color: #c0c0c0 !important;
    }

    .eventTable .row.extreme-light.hover .wrapper > .row .rowContents, .readerTable .row.extreme-light.hover .wrapper > .row .rowContents {
        background-color: #dadada !important;
    }

.eventTable .row.major-light, .readerTable .row.major-light {
    border-top-color: #bf1919 !important;
    background-color: #bf1919 !important;
}

    .eventTable .row.major-light .rowContents, .readerTable .row.major-light .rowContents {
        background-color: #ffc1c1 !important;
    }

    .eventTable .row.major-light.hover .rowContents, .readerTable .row.major-light.hover .rowContents {
        background-color: #ffd5d5 !important;
    }

    .eventTable .wrapper > .row.major-light .rowContents, .readerTable .wrapper > .row.major-light .rowContents {
        background-color: #ffc1c1 !important;
    }

    .eventTable .row.major-light.hover .wrapper > .row .rowContents, .readerTable .row.major-light.hover .wrapper > .row .rowContents {
        background-color: #ffd5d5 !important;
    }

.eventTable .row.moderate-light, .readerTable .row.moderate-light {
    border-top-color: #FFBF00 !important;
    background-color: #FFBF00 !important;
}

    .eventTable .row.moderate-light .rowContents, .readerTable .row.moderate-light .rowContents {
        background-color: #FFFF8F !important;
    }

    .eventTable .row.moderate-light.hover .rowContents, .readerTable .row.moderate-light.hover .rowContents {
        background-color: #ffffb6 !important;
    }

    .eventTable .wrapper > .row.moderate-light .rowContents, .readerTable .wrapper > .row.moderate-light .rowContents {
        background-color: #FFFF8F !important;
    }

    .eventTable .row.moderate-light.hover .wrapper > .row .rowContents, .readerTable .row.moderate-light.hover .wrapper > .row .rowContents {
        background-color: #ffffb6 !important;
    }

.eventTable .row.minor-light, .readerTable .row.minor-light {
    border-top-color: #28a745 !important;
    background-color: #28a745 !important;
}

    .eventTable .row.minor-light .rowContents, .readerTable .row.minor-light .rowContents {
        background-color: #98FB98 !important;
    }

    .eventTable .row.minor-light.hover .rowContents, .readerTable .row.minor-light.hover .rowContents {
        background-color: #befcbe !important;
    }

    .eventTable .wrapper > .row.minor-light .rowContents, .readerTable .wrapper > .row.minor-light .rowContents {
        background-color: #98FB98 !important;
    }

    .eventTable .row.minor-light.hover .wrapper > .row .rowContents, .readerTable .row.minor-light.hover .wrapper > .row .rowContents {
        background-color: #befcbe !important;
    }

.eventTable .row.freely-light, .readerTable .row.freely-light {
    border-top-color: #85AAA5 !important;
    background-color: #85AAA5 !important;
}

    .eventTable .row.freely-light .rowContents, .readerTable .row.freely-light .rowContents {
        background-color: #e5edec !important;
    }

    .eventTable .row.freely-light.hover .rowContents, .readerTable .row.freely-light.hover .rowContents {
        background-color: #f1f5f4 !important;
    }

    .eventTable .wrapper > .row.freely-light .rowContents, .readerTable .wrapper > .row.freely-light .rowContents {
        background-color: #e5edec !important;
    }

    .eventTable .row.freely-light.hover .wrapper > .row .rowContents, .readerTable .row.freely-light.hover .wrapper > .row .rowContents {
        background-color: #f1f5f4 !important;
    }

.eventTable .row.construction-light, .readerTable .row.construction-light {
    border-top-color: #FF4500 !important;
    background-color: #FF4500 !important;
}

    .eventTable .row.construction-light .rowContents, .readerTable .row.construction-light .rowContents {
        background-color: #FFE5B4 !important;
    }

    .eventTable .row.construction-light.hover .rowContents, .readerTable .row.construction-light.hover .rowContents {
        background-color: #ffeece !important;
    }

    .eventTable .wrapper > .row.construction-light .rowContents, .readerTable .wrapper > .row.construction-light .rowContents {
        background-color: #FFE5B4 !important;
    }

    .eventTable .row.construction-light.hover .wrapper > .row .rowContents, .readerTable .row.construction-light.hover .wrapper > .row .rowContents {
        background-color: #ffeece !important;
    }

.eventTable .row.event-light, .readerTable .row.event-light {
    border-top-color: #0C7BFF !important;
    background-color: #0C7BFF !important;
}

    .eventTable .row.event-light .rowContents, .readerTable .row.event-light .rowContents {
        background-color: #ADD8E6 !important;
    }

    .eventTable .row.event-light.hover .rowContents, .readerTable .row.event-light.hover .rowContents {
        background-color: #c1e1ec !important;
    }

    .eventTable .wrapper > .row.event-light .rowContents, .readerTable .wrapper > .row.event-light .rowContents {
        background-color: #ADD8E6 !important;
    }

    .eventTable .row.event-light.hover .wrapper > .row .rowContents, .readerTable .row.event-light.hover .wrapper > .row .rowContents {
        background-color: #c1e1ec !important;
    }

.eventTable .row.advisory-light, .readerTable .row.advisory-light {
    border-top-color: #0C7BFF !important;
    background-color: #0C7BFF !important;
}

    .eventTable .row.advisory-light .rowContents, .readerTable .row.advisory-light .rowContents {
        background-color: #ADD8E6 !important;
    }

    .eventTable .row.advisory-light.hover .rowContents, .readerTable .row.advisory-light.hover .rowContents {
        background-color: #c1e1ec !important;
    }

    .eventTable .wrapper > .row.advisory-light .rowContents, .readerTable .wrapper > .row.advisory-light .rowContents {
        background-color: #ADD8E6 !important;
    }

    .eventTable .row.advisory-light.hover .wrapper > .row .rowContents, .readerTable .row.advisory-light.hover .wrapper > .row .rowContents {
        background-color: #c1e1ec !important;
    }

.eventTable .row.transit-light, .readerTable .row.transit-light {
    color: #000000 !important;
    border-top-color: #8B008B !important;
    background-color: #8B008B !important;
}

    .eventTable .row.transit-light .svg-pin, .readerTable .row.transit-light .svg-pin {
        background-image: url(/images/pin-icon.svg) !important;
        background-repeat: no-repeat;
    }

    .eventTable .row.transit-light .svg-unpin, .readerTable .row.transit-light .svg-unpin {
        background-image: url(/images/unpin-icon.svg) !important;
        background-repeat: no-repeat;
    }

    .eventTable .row.transit-light .rowContents, .readerTable .row.transit-light .rowContents {
        background-color: #DCA9DC !important;
    }

    .eventTable .row.transit-light.hover .rowContents, .readerTable .row.transit-light.hover .rowContents {
        background-color: #e3bbe3 !important;
    }

    .eventTable .wrapper > .row.transit-light .rowContents, .readerTable .wrapper > .row.transit-light .rowContents {
        background-color: #DCA9DC !important;
    }

    .eventTable .row.transit-light.hover .wrapper > .row .rowContents, .readerTable .row.transit-light.hover .wrapper > .row .rowContents {
        background-color: #e3bbe3 !important;
    }

/* COLUMN WITDH */

/* note that room is left for 1% space on either side of each column, which is why these add up to 92% */
.eventTable .area {
    width: 11%;
}

    .eventTable .area .name {
        float: left;
        margin: 0;
        padding: 0;
    }

    .eventTable .area .speedoverride {
        float: left;
        cursor: default;
        margin-left: 7px;
        font-size: 20px;
    }

.eventTable .county {
    width: 11%;
}

.eventTable .eventType {
    width: 22%;
}

.eventTable .title {
    width: calc(63% - 7px);
}

.eventTable .description {
    width: calc(41% - 7px);
}

.eventTable .delay {
    width: calc(7% + 5px);
}

.eventTable .speed {
    width: calc(7% + 5px);
}

.eventTable .created {
    width: calc(7% + 13px);
}

.eventTable .updated {
    width: calc(7% + 13px);
}

.eventTable .travel {
    width: calc(7% + 13px);
}

.eventTable .deleted {
    width: calc(8% + 13px);
}

.eventTable .duration {
    width: calc(8% + 13px);
}

.eventTable .time {
    width: calc(8% + 13px);
}

    .eventTable .created .datevalue, .eventTable .updated .datevalue, .eventTable .deleted .datevalue, .eventTable .time .datevalue, .eventTable .travel .datevalue {
        display: inline-block;
    }

    .eventTable .created .timevalue, .eventTable .updated .timevalue, .eventTable .deleted .timevalue, .eventTable .time .timevalue, .eventTable .travel .timevalue {
        display: inline-block;
    }

/* wihtin the settings scheduler UI, the time column */
.eventTable .schedulertime {
    width: 15%;
}


    /* action menu options for the last columns */
    .eventTable .duration .traffic-menu, .eventTable .title .traffic-menu, .eventTable .description .traffic-menu, .eventTable .eventType .traffic-menu, .eventTable .county .traffic-menu, .eventTable .area .traffic-menu, .eventTable .travel .traffic-menu, .eventTable .deleted .traffic-menu, .eventTable .delay .traffic-menu, .eventTable .speed .traffic-menu, .eventTable .created .traffic-menu, .eventTable .updated .traffic-menu, .eventTable .time .traffic-menu {
        display: none;
        float: right;
        margin-right: -10px !important;
        width: 150px;
        max-height: 22px;
        overflow: hidden;
        text-align: right;
        opacity: 0.75;
    }

            .eventTable .duration .traffic-menu .traffic-menu-item, .eventTable .title .traffic-menu .traffic-menu-item, .eventTable .description .traffic-menu .traffic-menu-item, .eventTable .eventType .traffic-menu .traffic-menu-item, .eventTable .county .traffic-menu .traffic-menu-item, .eventTable .area .traffic-menu .traffic-menu-item, .eventTable .travel .traffic-menu .traffic-menu-item, .eventTable .deleted .traffic-menu .traffic-menu-item, .eventTable .delay .traffic-menu .traffic-menu-item, .eventTable .speed .traffic-menu .traffic-menu-item, .eventTable .created .traffic-menu .traffic-menu-item, .eventTable .updated .traffic-menu .traffic-menu-item, .eventTable .time .traffic-menu .traffic-menu-item {
                padding: 0 3px;
            }

            .eventTable .duration .traffic-menu .traffic-menu-item:first-child, .eventTable .title .traffic-menu .traffic-menu-item:first-child, .eventTable .description .traffic-menu .traffic-menu-item:first-child, .eventTable .eventType .traffic-menu .traffic-menu-item:first-child, .eventTable .county .traffic-menu .traffic-menu-item:first-child, .eventTable .area .traffic-menu .traffic-menu-item:first-child, .eventTable .travel .traffic-menu .traffic-menu-item:first-child, .eventTable .deleted .traffic-menu .traffic-menu-item:first-child, .eventTable .delay .traffic-menu .traffic-menu-item:first-child, .eventTable .speed .traffic-menu .traffic-menu-item:first-child, .eventTable .created .traffic-menu .traffic-menu-item:first-child, .eventTable .updated .traffic-menu .traffic-menu-item:first-child, .eventTable .time .traffic-menu .traffic-menu-item:first-child {
                padding-left: 0;
            }

            .eventTable .duration .traffic-menu .traffic-menu-item:last-child, .eventTable .title .traffic-menu .traffic-menu-item:last-child, .eventTable .description .traffic-menu .traffic-menu-item:last-child, .eventTable .eventType .traffic-menu .traffic-menu-item:last-child, .eventTable .county .traffic-menu .traffic-menu-item:last-child, .eventTable .area .traffic-menu .traffic-menu-item:last-child, .eventTable .travel .traffic-menu .traffic-menu-item:last-child, .eventTable .deleted .traffic-menu .traffic-menu-item:last-child, .eventTable .delay .traffic-menu .traffic-menu-item:last-child, .eventTable .speed .traffic-menu .traffic-menu-item:last-child, .eventTable .created .traffic-menu .traffic-menu-item:last-child, .eventTable .updated .traffic-menu .traffic-menu-item:last-child, .eventTable .time .traffic-menu .traffic-menu-item:last-child {
                padding-right: 0;
            }

    /* action menu options for the last columns */
    .eventTable .duration .preview-menu, .eventTable .title .preview-menu, .eventTable .description .preview-menu, .eventTable .eventType .preview-menu, .eventTable .county .preview-menu, .eventTable .area .preview-menu, .eventTable .travel .preview-menu, .eventTable .deleted .preview-menu, .eventTable .delay .preview-menu, .eventTable .speed .preview-menu, .eventTable .created .preview-menu, .eventTable .updated .preview-menu, .eventTable .time .preview-menu {
        display: none;
        float: right;
        margin-right: -10px !important;
        width: 150px;
        max-height: 22px;
        overflow: hidden;
        text-align: right;
        opacity: 0.75;
    }

        .eventTable .duration .preview-menu .preview-menu-item, .eventTable .title .preview-menu .preview-menu-item, .eventTable .description .preview-menu .preview-menu-item, .eventTable .eventType .preview-menu .preview-menu-item, .eventTable .county .preview-menu .preview-menu-item, .eventTable .area .preview-menu .preview-menu-item, .eventTable .travel .preview-menu .preview-menu-item, .eventTable .deleted .preview-menu .preview-menu-item, .eventTable .delay .preview-menu .preview-menu-item, .eventTable .speed .preview-menu .preview-menu-item, .eventTable .created .preview-menu .preview-menu-item, .eventTable .updated .preview-menu .preview-menu-item, .eventTable .time .preview-menu .preview-menu-item {
            padding: 0 3px;
        }

            .eventTable .duration .preview-menu .preview-menu-item:first-child, .eventTable .title .preview-menu .preview-menu-item:first-child, .eventTable .description .preview-menu .preview-menu-item:first-child, .eventTable .eventType .preview-menu .preview-menu-item:first-child, .eventTable .county .preview-menu .preview-menu-item:first-child, .eventTable .area .preview-menu .preview-menu-item:first-child, .eventTable .travel .preview-menu .preview-menu-item:first-child, .eventTable .deleted .preview-menu .preview-menu-item:first-child, .eventTable .delay .preview-menu .preview-menu-item:first-child, .eventTable .speed .preview-menu .preview-menu-item:first-child, .eventTable .created .preview-menu .preview-menu-item:first-child, .eventTable .updated .preview-menu .preview-menu-item:first-child, .eventTable .time .preview-menu .preview-menu-item:first-child {
                padding-left: 0;
            }

            .eventTable .duration .preview-menu .preview-menu-item:last-child, .eventTable .title .preview-menu .preview-menu-item:last-child, .eventTable .description .preview-menu .preview-menu-item:last-child, .eventTable .eventType .preview-menu .preview-menu-item:last-child, .eventTable .county .preview-menu .preview-menu-item:last-child, .eventTable .area .preview-menu .preview-menu-item:last-child, .eventTable .travel .preview-menu .preview-menu-item:last-child, .eventTable .deleted .preview-menu .preview-menu-item:last-child, .eventTable .delay .preview-menu .preview-menu-item:last-child, .eventTable .speed .preview-menu .preview-menu-item:last-child, .eventTable .created .preview-menu .preview-menu-item:last-child, .eventTable .updated .preview-menu .preview-menu-item:last-child, .eventTable .time .preview-menu .preview-menu-item:last-child {
                padding-right: 0;
            }

.readerTable .area {
    width: 11%; /* note 5px is due to the extra margin-left for the :first div, i.e. area column to separate from the star icon */
}
    .readerTable .area .name {
        float: left;
        margin: 0;
        padding: 0;
    }

    .readerTable .area .speedoverride {
        float: left;
        cursor: default;
        margin-left: 7px;
        font-size: 20px;
    }

.readerTable .county {
    width: 11%;
}

.readerTable .eventType {
    width: 22%;
}

.readerTable .title {
    width: calc(63% - 7px);
}

.readerTable .description {
    width: calc(41% - 7px);
}

.readerTable .delay {
    width: calc(7% + 5px);
}

.readerTable .speed {
    width: calc(7% + 5px);
}

.readerTable .created {
    width: calc(7% + 13px);
}

.readerTable .updated {
    width: calc(7% + 13px);
}

.readerTable .travel {
    width: calc(7% + 13px);
}

.readerTable .deleted {
    width: calc(8% + 13px);
}

.readerTable .duration {
    width: calc(8% + 13px);
}

.readerTable .time {
    width: calc(8% + 13px);
}

    .readerTable .created .datevalue, .readerTable .updated .datevalue, .readerTable .deleted .datevalue, .readerTable .time .datevalue, .readerTable .travel .datevalue {
        display: inline-block;
    }

    .readerTable .created .timevalue, .readerTable .updated .timevalue, .readerTable .deleted .timevalue, .readerTable .time .timevalue, .readerTable .travel .timevalue {
        display: inline-block;
    }


/* wihtin the settings scheduler UI, the time column */
.readerTable .schedulertime {
    width: 15%;
}


/* action menu options for the last columns */
.readerTable .duration .traffic-menu, .readerTable .title .traffic-menu, .readerTable .description .traffic-menu, .readerTable .eventType .traffic-menu, .readerTable .county .traffic-menu, .readerTable .area .traffic-menu, .readerTable .travel .traffic-menu, .readerTable .deleted .traffic-menu, .readerTable .delay .traffic-menu, .readerTable .speed .traffic-menu, .readerTable .created .traffic-menu, .readerTable .updated .traffic-menu, .readerTable .time .traffic-menu {
    display: none;
    float: right;
    margin-right: -10px !important;
    width: 150px;
    max-height: 22px;
    overflow: hidden;
    text-align: right;
    opacity: 0.75;
}

    .readerTable .duration .traffic-menu .traffic-menu-item, .readerTable .title .traffic-menu .traffic-menu-item, .readerTable .description .traffic-menu .traffic-menu-item, .readerTable .eventType .traffic-menu .traffic-menu-item, .readerTable .county .traffic-menu .traffic-menu-item, .readerTable .area .traffic-menu .traffic-menu-item, .readerTable .travel .traffic-menu .traffic-menu-item, .readerTable .deleted .traffic-menu .traffic-menu-item, .readerTable .delay .traffic-menu .traffic-menu-item, .readerTable .speed .traffic-menu .traffic-menu-item, .readerTable .created .traffic-menu .traffic-menu-item, .readerTable .updated .traffic-menu .traffic-menu-item, .readerTable .time .traffic-menu .traffic-menu-item {
        padding: 0 3px;
    }

        .readerTable .duration .traffic-menu .traffic-menu-item:first-child, .readerTable .title .traffic-menu .traffic-menu-item:first-child, .readerTable .description .traffic-menu .traffic-menu-item:first-child, .readerTable .eventType .traffic-menu .traffic-menu-item:first-child, .readerTable .county .traffic-menu .traffic-menu-item:first-child, .readerTable .area .traffic-menu .traffic-menu-item:first-child, .readerTable .travel .traffic-menu .traffic-menu-item:first-child, .readerTable .deleted .traffic-menu .traffic-menu-item:first-child, .readerTable .delay .traffic-menu .traffic-menu-item:first-child, .readerTable .speed .traffic-menu .traffic-menu-item:first-child, .readerTable .created .traffic-menu .traffic-menu-item:first-child, .readerTable .updated .traffic-menu .traffic-menu-item:first-child, .readerTable .time .traffic-menu .traffic-menu-item:first-child {
            padding-left: 0;
        }

        .readerTable .duration .traffic-menu .traffic-menu-item:last-child, .readerTable .title .traffic-menu .traffic-menu-item:last-child, .readerTable .description .traffic-menu .traffic-menu-item:last-child, .readerTable .eventType .traffic-menu .traffic-menu-item:last-child, .readerTable .county .traffic-menu .traffic-menu-item:last-child, .readerTable .area .traffic-menu .traffic-menu-item:last-child, .readerTable .travel .traffic-menu .traffic-menu-item:last-child, .readerTable .deleted .traffic-menu .traffic-menu-item:last-child, .readerTable .delay .traffic-menu .traffic-menu-item:last-child, .readerTable .speed .traffic-menu .traffic-menu-item:last-child, .readerTable .created .traffic-menu .traffic-menu-item:last-child, .readerTable .updated .traffic-menu .traffic-menu-item:last-child, .readerTable .time .traffic-menu .traffic-menu-item:last-child {
            padding-right: 0;
        }

/* action menu options for the last columns */
.readerTable .duration .preview-menu, .readerTable .title .preview-menu, .readerTable .description .preview-menu, .readerTable .eventType .preview-menu, .readerTable .county .preview-menu, .readerTable .area .preview-menu, .readerTable .travel .preview-menu, .readerTable .deleted .preview-menu, .readerTable .delay .preview-menu, .readerTable .speed .preview-menu, .readerTable .created .preview-menu, .readerTable .updated .preview-menu, .readerTable .time .preview-menu {
    display: none;
    float: right;
    margin-right: -10px !important;
    width: 150px;
    max-height: 22px;
    overflow: hidden;
    text-align: right;
    opacity: 0.75;
}

    .readerTable .duration .preview-menu .preview-menu-item, .readerTable .title .preview-menu .preview-menu-item, .readerTable .description .preview-menu .preview-menu-item, .readerTable .eventType .preview-menu .preview-menu-item, .readerTable .county .preview-menu .preview-menu-item, .readerTable .area .preview-menu .preview-menu-item, .readerTable .travel .preview-menu .preview-menu-item, .readerTable .deleted .preview-menu .preview-menu-item, .readerTable .delay .preview-menu .preview-menu-item, .readerTable .speed .preview-menu .preview-menu-item, .readerTable .created .preview-menu .preview-menu-item, .readerTable .updated .preview-menu .preview-menu-item, .readerTable .time .preview-menu .preview-menu-item {
        padding: 0 3px;
    }

        .readerTable .duration .preview-menu .preview-menu-item:first-child, .readerTable .title .preview-menu .preview-menu-item:first-child, .readerTable .description .preview-menu .preview-menu-item:first-child, .readerTable .eventType .preview-menu .preview-menu-item:first-child, .readerTable .county .preview-menu .preview-menu-item:first-child, .readerTable .area .preview-menu .preview-menu-item:first-child, .readerTable .travel .preview-menu .preview-menu-item:first-child, .readerTable .deleted .preview-menu .preview-menu-item:first-child, .readerTable .delay .preview-menu .preview-menu-item:first-child, .readerTable .speed .preview-menu .preview-menu-item:first-child, .readerTable .created .preview-menu .preview-menu-item:first-child, .readerTable .updated .preview-menu .preview-menu-item:first-child, .readerTable .time .preview-menu .preview-menu-item:first-child {
            padding-left: 0;
        }

        .readerTable .duration .preview-menu .preview-menu-item:last-child, .readerTable .title .preview-menu .preview-menu-item:last-child, .readerTable .description .preview-menu .preview-menu-item:last-child, .readerTable .eventType .preview-menu .preview-menu-item:last-child, .readerTable .county .preview-menu .preview-menu-item:last-child, .readerTable .area .preview-menu .preview-menu-item:last-child, .readerTable .travel .preview-menu .preview-menu-item:last-child, .readerTable .deleted .preview-menu .preview-menu-item:last-child, .readerTable .delay .preview-menu .preview-menu-item:last-child, .readerTable .speed .preview-menu .preview-menu-item:last-child, .readerTable .created .preview-menu .preview-menu-item:last-child, .readerTable .updated .preview-menu .preview-menu-item:last-child, .readerTable .time .preview-menu .preview-menu-item:last-child {
            padding-right: 0;
        }

.readerTable .notes-sentence {
    width: 95%;
}

.eventTable .tableBody .row .rowContents .area, .readerTable .tableBody .row .rowContents .area {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 14px;
}

.eventTable .tableBody .row .rowContents .street, .readerTable .tableBody .row .rowContents .street {
    font-weight: bold;
}

.eventTable .tableBody .row .rowContents .dir, .readerTable .tableBody .row .rowContents .dir {
    font-size: 16px;
}

.eventTable .tableBody .row .rowContents .county, .readerTable .tableBody .row .rowContents .county {
    font-size: 14px;
}

.eventTable .tableBody .row .rowContents .eventType, .readerTable .tableBody .row .rowContents .eventType {
    font-size: 14px;
    font-weight: bold;
}

.eventTable .tableBody .row .rowContents .title, .readerTable .tableBody .row .rowContents .title {
    font-size: 14px;
    font-weight: bold;
}

.eventTable .tableBody .row .rowContents .description, .readerTable .tableBody .row .rowContents .description {
    font-size: 14px;
}

    .eventTable .tableBody .row .rowContents .description .street, .readerTable .tableBody .row .rowContents .description .street {
        font-weight: bold;
    }

    .eventTable .tableBody .row .rowContents .description .dir, .readerTable .tableBody .row .rowContents .description .dir {
        font-size: 16px;
    }

.eventTable .tableBody .row .rowContents .delay, .eventTable .tableBody .row .rowContents .speed, .eventTable .tableBody .row .rowContents .created, .eventTable .tableBody .row .rowContents .updated, .eventTable .tableBody .row .rowContents .deleted, .eventTable .tableBody .row .rowContents .time, .readerTable .tableBody .row .rowContents .delay, .readerTable .tableBody .row .rowContents .created, .readerTable .tableBody .row .rowContents .updated, .readerTable .tableBody .row .rowContents .deleted, .readerTable .tableBody .row .rowContents .time {
    font-size: 12px;
}

    .eventTable .tableBody .row .rowContents .delay .num, .eventTable .tableBody .row .rowContents .speed .num, .eventTable .tableBody .row .rowContents .created .num, .eventTable .tableBody .row .rowContents .updated .num, .eventTable .tableBody .row .rowContents .deleted .num, .eventTable .tableBody .row .rowContents .time .num, .readerTable .tableBody .row .rowContents .delay .num, .readerTable .tableBody .row .rowContents .created .num, .readerTable .tableBody .row .rowContents .updated .num, .readerTable .tableBody .row .rowContents .deleted .num, .readerTable .tableBody .row .rowContents .time .num {
        font-weight: bold;
        font-size: 14px;
    }

.eventTable .tableBody .row .rowContents .duration, .eventTable .tableBody .row .rowContents .travel, .readerTable .tableBody .row .rowContents .duration, .readerTable .tableBody .row .rowContents .travel {
    font-size: 12px;
}

    .eventTable .tableBody .row .rowContents .duration .num, .eventTable .tableBody .row .rowContents .travel .num, .readerTable .tableBody .row .rowContents .duration .num, .readerTable .tableBody .row .rowContents .travel .num {
        font-weight: bold;
        font-size: 14px;
    }

/*.eventTable .tableBody .row .rowContents .secondary {
    font-size: 14px;
    clear: left;
    padding: 3px 6px;
    padding-left: 1% !important;
    margin: 0 13% 0 22%;  margin: 0 12% 5px 11%; 
    min-width: calc(65% - 75px);  for IE7 
    max-width: calc(65% - 75px);
}

.eventTable .tableBody .row .rowContents .notes {
    clear: left;
    padding: 6px;
    padding: 3px 6px;
    padding-left: 1% !important;
    border: 2px dashed;
    font-size: 13px;
    margin: 0 13% 0 22%;  margin: 0 12% 5px 11%; 
    min-width: calc(65% - 75px);  for IE7 
    max-width: calc(65% - 75px);
}

.readerTable .tableBody .row .rowContents .secondary {
    font-size: 14px;
    clear: left;
    padding: 3px 6px;
    padding-left: 15px !important;
    margin: 0 7% 0 26%;*/ /* margin: 0 5% 5px 19%; */
    /*min-width: 67%;*/ /* for IE7 */
    /*max-width: 67%;
}

.readerTable .tableBody .row .rowContents .notes {
    clear: left;
    padding: 3px 6px;
    padding-left: 15px !important;*/
    /*border: 2px dashed;*/
    /*font-size: 13px;
    margin: 0 7% 0 26%;*/ /* margin: 0 5% 5px 19%; */
    /*min-width: 67%;*/ /* for IE7 */
    /*max-width: 67%;
}*/

.eventTable .tableBody .row .rowContents .secondary {
    font-size: 14px;
    clear: none;
    float: right;
    padding: 3px 6px;
    padding-left: 0.75% !important;
    margin-right: calc(15% + 13px); /* matches up with amount for delay + duration */
    min-width: calc(63% - 7px); /* for IE7 */
    max-width: calc(63% - 7px);
}

.eventTable .tableBody .row .rowContents .notes {
    clear: none;
    float: right;
    padding: 3px 6px;
    padding-left: 0.75% !important;
    font-size: 13px;
    margin-right: calc(15% + 13px); /* matches up with amount for delay + duration */
    min-width: calc(63% - 7px); /* for IE7 */
    max-width: calc(63% - 7px);
}

.readerTable .tableBody .row .rowContents .secondary {
    font-size: 14px;
    clear: none;
    float: right;
    padding: 3px 6px;
    padding-left: 0.75% !important;
    margin-right: calc(15% + 13px); /* matches up with amount for delay */
    min-width: calc(63% - 7px); /* for IE7 */
    max-width: calc(63% - 7px);
}

.readerTable .tableBody .row .rowContents .notes {
    clear: none;
    float: right;
    padding: 3px 6px;
    padding-left: 0.75% !important;
    /*border: 2px dashed;*/
    font-size: 13px;
    margin-right: calc(15% + 15px); /* matches up with amount for delay */
    min-width: calc(63% - 7px); /* for IE7 */
    max-width: calc(63% - 7px);
}

/* If I need to distinguish the color between the whole record and the notes */
/*.eventTable .row.extreme .rowContents .notes, .readerTable .row.extreme .rowContents .notes {*/
    /*border-color: #000000;*/
    /*background-color: #4e4e4e;*/ /*background-color: #c0c0c0;*/
/*}

.eventTable .row.major .rowContents .notes, .readerTable .row.major .rowContents .notes {
    border-color: #fa5a5a;
}

.eventTable .row.moderate .rowContents .notes, .readerTable .row.moderate .rowContents .notes {
    border-color: #f0ed67;
}

.eventTable .row.minor .rowContents .notes, .readerTable .row.minor .rowContents .notes {
    border-color: #54f672;
}

.eventTable .row.freely .rowContents .notes, .readerTable .row.freely .rowContents .notes {
    border-color: #85AAA5;*/ /*border-color: #008080;*/
/*}

.eventTable .row.construction .rowContents .notes, .readerTable .row.construction .rowContents .notes {*/
    /* brown */
    /*border-color: #f6bb54;*/ /*border-color: #d6bf89;*/

    /* orange (previously used for moderate) */
    /*border-color: #fcc78d;*/
/*}

.eventTable .row.event .rowContents .notes, .readerTable .row.event .rowContents .notes {
    border-color: #54bff6;
}

.eventTable .row.advisory .rowContents .notes, .readerTable .row.advisory .rowContents .notes {
    border-color: #54bff6;
}

.eventTable .row.transit .rowContents .notes, .readerTable .row.transit .rowContents .notes {
    border-color: #955ba4;
}*/