.ui-layout-pane {
   padding: 0;
}

.ui-layout-toggler-west {
   opacity: 0 !important;
}

.ui-layout-toggler-west-open {
   display: none !important;
}

.ui-layout-toggler {
   background-color: #FFFFFF;
   border: none;
}

.ui-layout-resizer {
   background: none repeat scroll 0 0 #FFFFFF;
   background-position: center;
   border: 0 solid #BBBBBB;
}

.ui-layout-resizer-west {
   background-image: url("images/horizontal-resizer-knob.png");
   background-repeat: no-repeat;
}

.ui-layout-resizer-dragging {
   /* CLONED resizer being dragged */
   border: 1px solid #BBB;
}

.ui-layout-resizer-closed-hover {
   /* hover-color to 'slide open' */
   background: #EBD5AA;
}

.ui-layout-resizer-sliding {
   /* resizer when pane is 'slid open' */
   opacity: .10; /* show only a slight shadow */
   filter: alpha(opacity=10);
}

.ui-layout-resizer-sliding-hover {
   /* sliding resizer - hover */
   opacity: 1.00; /* on-hover, show the resizer-bar normally */
   filter: alpha(opacity=100);
}

/* sliding resizer - add 'outside-border' to resizer on-hover
* this sample illustrates how to target specific panes and states */
.ui-layout-resizer-north-sliding-hover {
   border-bottom-width: 1px;
}

.ui-layout-resizer-south-sliding-hover {
   border-top-width: 1px;
}

.ui-layout-resizer-west-sliding-hover {
   border-right-width: 1px;
}

.ui-layout-resizer-east-sliding-hover {
   border-left-width: 1px;
}

.border-none {
   border: none
}

.border-left-right {
   border-left: 1px solid #BBB;
   border-right: 1px solid #BBB;
}

.padding-none {
   padding: 0
}

.margin-none {
   margin: 0
}body {
   margin: 0;
}

form {
   padding: 0;
   margin: 0;
}

hr {
   border-top: 1px solid #aaaaaa;
   border-color: -moz-use-text-color #FFFFFF;
   margin: 10px 0
}

/* Bootstrap sets max-width:100% for images. This causes shrunken images in Chrome.
   Setting max-width to none fixes the issue. A similar problem is described here: http://boulderinformationservices.wordpress.com/2013/01/18/chrome-shrinks-images-in-table-cells */
img {
   max-width: none;
}

div.inline {
   display: inline-block;
}

#mapCanvas {
   height: 100%;
}

#mapCanvas label {
   width: auto;
   display: inline;
}

/* Fix for a bug introduced by Twitter Bootstrap causing Google Map corruptions: https://github.com/twitter/bootstrap/issues/1552 */
#mapCanvas img {
   max-width: none;
}

#mapCanvas #detailMapContainer {
   margin-top: 0;
}

#detailMap label {
   width: auto;
   display: inline;
}

#detailMap img {
   max-width: none;
}

#genericErrorDisplay {
   -webkit-box-shadow: 0 0 1px 2px #E9CC92;
   -moz-box-shadow: 0 0 1px 2px #E9CC92;
   box-shadow: 0 0 1px 2px #E9CC92;
   border-radius: 5px;
   text-align: center;
   background-color: #F9EDBE;
   position: absolute;
   left: 50%;
   margin-left: -157px;
   top: 3%;
   z-index: 1000;
   padding: 10px 15px 10px 15px;
}

#genericErrorDisplay a {
   font-weight: bold;
   text-decoration: underline;
   color: black;
}

#genericErrorDisplay a:hover {
   color: black;

}

.genericErrorClose {
   position: absolute;
   right: -5px;
   text-decoration: none;
   top: -7px;
   cursor: pointer;
   color: #fff;
   border-radius: 30px;
   background: #605F61;
   font-size: 12px;
   font-weight: bold;
   line-height: 0;
   padding: 9px 6px;
}

/*
a, a:link, a:visited, a:hover, a:active {
    color: #2b2bff;
    text-decoration: none;
}
*/

.layer-selector-left {
   margin-left: 3px;
}

.layer-selector-right {
   margin-right: 3px;
}

#twitter-time-line-container {
   text-align: right;
}

.normalText {
   font-size: 1em;
}

.smallText {
   font-size: 0.8em;
}

.largeText {
   font-size: 1.2em;
}

.hintText {
   font-size: 0.8em;
   color: #999999;
}

.panel {
   margin: 10px;
}

.panel-marginTop {
   margin-top: 10px;
}

.panel-marginLeft {
   margin-left: 10px;
}

.panel-marginRight {
   margin-right: 10px;
}

.panel-marginBottom {
   margin-bottom: 10px;
}

.panelTitleText {
   font-size: 1.25em;
   font-weight: bold;
}

.fieldTitleText {
   font-size: 1em;
   font-weight: bold;
}

.mainMenuItem, .mainMenuItem:link, .mainMenuItem:visited, .mainMenuItem:hover, .mainMenuItem:active {
   font-size: 1.2em;
   font-weight: normal;
   color: #000000;
   text-decoration: none;
   text-transform: none;
   vertical-align: middle;
}

.mostPopularRouteItem {
   float: left;
   min-width: 50px;
   padding: 0 5px;
   font-size: 1.15em;
   font-weight: bold;
   white-space: nowrap;
}

.mapTitle {
   text-align: center;
   height: 29px;
   line-height: 28px;
   margin: 1px 0;
}

.layerCheckbox {
   margin-right: 10px;
}

.layersMenuItem-active {
   background-color: #E5F0FE;
}

.noReportsLabel {
   color: #a9a9a9;
   white-space: nowrap;
}

.criticalReportsLabel {
   color: #ff0000;
   white-space: nowrap;
}

.listItemHighlight {
   background-color: #fffff0;
}

.timeFrameOption {
   font-size: 1.15em;
   font-weight: bold;
   color: #000000;
}

.bannerMessage {
   font-size: 1.2em;
   font-weight: bold;
   color: #000000;
   cursor: pointer;
}

.floodgateTitle {
   font-size: 1.2em;
   font-weight: bold;
}

.floodgateMessage {
   font-size: 1.0em;
   font-weight: normal;
}

#mapHintDiv {
   color: white;
   background-color: black;
   opacity: .65;
   padding: 5px 10px;
   border-radius: 5px;
}

/**
 * If there is a parent dialog that spawns a child dialog, it can be helpful to declare a div in the parent
 * with this class.  Along with some JS, this greys-out the parent dialog when the child is being shown.
 */
.subDialogModalBackdrop {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: black;
   opacity: .4;
   z-index: 10000; /* In order to be above google maps in the parent dialog */
   display: none; /* Initially hidden */
}

/*------------------------ Left panel --------------------------- */

.navBar {
   height: 28px;
   border-top: 1px solid #ffffff;
   border-bottom: 1px solid #ffffff;
   padding: 1px 2px
}

.leftPanelContent {
   position: absolute;
   top: 28px;
   bottom: 0;
   width: 100%;
   overflow-y: auto;
}

/*------------------------ Legend --------------------------- */

.map-legend {
   position: absolute;
   width: 100%;
   bottom: 0;
   pointer-events: none;
}

/*
 * See custom.css for additional legend css
 * the custom.css may override some of the stuff here
 */
.map-legend-content {
   background-color: #ffffff;
   padding-top: 5px;
   z-index: 1000;
   position: relative;
   float: right;
   width: 100%;
   box-shadow: 1px -1px 9px 0 #1b1b1b;
   pointer-events: all;
}

.map-legend-content-item {
   float: left;
   padding: 5px 10px 5px 10px;
   height: 30px;
}

.map-legend-toggler {
   position: relative;
   cursor: pointer;
   float: right;
   margin-right: 25px;
   z-index: 1001;
   pointer-events: all;

}

.map-legend-toggler.open {
   background-image: url("images/legend-toggle-opened.png");
   width: 155px;
   height: 42px;
   box-shadow: 3px -4px 8px -2px #1B1B1B;
}

.map-legend-toggler.closed {
   background-image: url("images/legend-toggle-closed.png");
   width: 155px;
   height: 42px;
   margin-bottom: 22px;
   box-shadow: 3px 0 12px 1px #1B1B1B;
}

.map-legend-toggler.closed:hover {
   opacity: .90;
}

/*-------- Inactivity pop up -------------*/

#inactivityTimeoutPopup {
   width: 400px;
   margin-left: -200px;
   padding: 5px 10px;
}

/*-------- Floodgate pop up -------------*/

#statewideFloodgatePopup {
   width: 400px;
   margin-left: -200px;
}

/*-------- Date range selector pop up -------------*/

#dateRangeSelectorPopup {
   width: 580px;
}

/*-------- Critical events pop up -------------*/

#criticalEventsPopup {
   width: 600px;
   margin-left: -300px;
   background-color: #ffb6c1;
}

/*-------- Amber alert pop up -------------*/

#amberAlertPopup {
   width: 600px;
   margin-left: -300px;
}

/*-------- Account details pop up -------------*/

#account-details-popup {
   /*padding: 0px 20px 20px;*/
}

#account-details-popup .modal-header {
   border: none;
}

#account-details-alertd h5, #account-details-alertd h6 {
   margin-bottom: 0;
}

#account-details-popup fieldset,
#account-details-popup .alert {
   margin-bottom: 8px;
}

#account-details-popup .nav-tabs .error {
   color: #FF0000;
}

.alertActiveIcon {
   width: 20px;
   height: 20px;
}

.alertd-filter-section {
   padding-left: 10px;
}
.alertd-filter-section-title {
   color: #0088cc;
   font-size: 14px;
}

#alertd-report-level-warning {
   margin-top: 5px;
}

/*-------- HEADER --------------- */

#user-account-view {
   position: absolute;
   right: 10px;
   top: 25px;
   z-index: 100;
}

.user-name-text {
   display: inline;
   margin-right: 5px;
}

.user-name-text, .user-name-text a {
   color: #ffffff;
   text-align: right;
}

.user-name-text span {
   font-size: 1.3em;
}

.settings-dropdown {
   cursor: pointer;
   width: 20px;
   height: 20px;
}

.settings-dropdown img {
   margin-top: -5px;
}

#forgotPasswordPopup {
   width: 300px;
   margin-left: -150px;
   padding: 10px 20px;
}

/** ------------- Email share view ------------- **/

#email-share .form-inline {
   float: right;
   clear: right;
   margin-bottom: 8px;
}

#to_emails {
   width: 440px;
}

/** --- pick a route view --- **/

.waypointDesc {
   margin-left: 20px;
}

/* fix for the last of the control group children in a form to avoid */
.form-horizontal .control-group:last-child {
   margin-bottom: 0;
}

#account-details-popup .modal-body {
   overflow: hidden;
   max-height: 565px !important;
}

#account-details-popup .tab-content {
   max-height: 510px;
   overflow-y: auto;
}

#account-details-popup .tos-checkbox {
   margin-top: 7px;
}

#pickARouteSearchBtn {
   margin-left: 10px;
   margin-bottom: 10px;
}

#placeSearchBtn, #roadSearchBtn {
   margin-left: 23px;
}

#pickARouteWaypointsContainer label {
   display: inline-block !important;
   width: 18px;
}

.travel-mode-toggle {
   cursor: pointer;
}

#leftPanel .alert {
   width: 80%;
}

/** ------------- Driving directions views ------------- **/

#pickARouteResults {
   padding-right: 44px;
}

#drivingDirections {

}

.drivingDirectionsNumberColumn {
   font-weight: bold;
   vertical-align: top;
   text-align: right;
   padding-left: 42px;
}

.drivingDirectionsInstructionsColumn {
   vertical-align: top;
   padding-left: 10px;
   padding-right: 10px;
}

.drivingDirectionsDistanceColumn {
   vertical-align: top;
   white-space: nowrap;
}

.drivingDirectionsWaypointIcon {
   padding-left: 5px;
   padding-right: 5px;
}

.drivingDirectionsWaypointAddress {
   vertical-align: middle;
}

.drivingDirectionsMinorText {
   font-size: small;
   color: #808080;
}

.drivingDirectionsMinorText.drivingDirectionsImportant {
   color: #ff0000;
}

#directions-header-content {
   padding: 0 44px 0 0;
}

#directions-header-content h4 {
   margin-bottom: 4px;
}

#directions-header-content h5 {
   margin-top: 0;
   color: #656565;
}

.directions-delay-text {
   color: #FF0000;
}

/*------ Transit directions styling ------*/

.directions-instructions {
   font-size: 0.95em;
}

.directions-table td {
   vertical-align: top;
   padding-bottom: 7px;
}

.directions-table-abbreviated-transit td {
   color: #656565;
   font-weight: bold;
   padding-left: 0;
}

.directions-table-abbreviated-transit div {
   padding-bottom: 4px;
}

.step-metrics {
   font-size: 0.9em;
}

.step-index {
   padding: 0 14px 0 11px;
}

.directions-table-transit .step-index {
   padding-left: 0;
}

/*------ End Transit directions styling ------*/

/* tooltip styles */
.overlayTooltip {
   position: absolute;
   background-color: #FFFFCC;
   border: 1px solid gray;
   font-size: 12px;
   padding: 0 1px;
   z-index: 1000;
   box-shadow: 4px 2px 2px #888888;
}

.ferryRoutes {
   padding-left: 20px;
   font-size: 1.1em;
}

.ferryRoutes li {
   margin-bottom: 5px;
}

/* Google places autocomplete sizing to show full address in suggestion list */

.pac-item {
   width: 100%;
}

.pac-container {
   display: table;
}

/**----- Search context dropdown -----*/
.searchContextPicker {
   margin-right: 5px;
}

.searchContextPicker-wrapper {
   display: flex;
   margin: 10px;
   position: relative;
}

.searchContextPicker-wrapper .btn-group {
   position: initial; /* Make `dropdown-menu`s relative to `searchContextPicker-wrapper` */
}

.searchContextPicker-wrapper .dropdown-menu {
   /* We always want the dropdown to have area under the hamburger menu even if its aligned under the "show me more" menu. */
   min-width: 160px;
}
/* ie9+ svg hack to get svgs to resize somewhat better: https://gist.github.com/larrybotha/7881691 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   img[src$=".svg"] {
      width: initial !important;
      height: initial !important;
   }
}

/* @override */
p {
   margin: 0 0 .5rem 0;
}

/* @override */
.lead {
   font-size: 18px;
   line-height: 1.5;
}

.verticalAlignTop {
   vertical-align: top;
}

.verticalAlignMiddle {
   vertical-align: middle;
}

.tableNoBorders, .tableNoBorders table, .tableNoBorders tr, .tableNoBorders td {
   border: 0;
   padding: 0;
   margin: 0;
   border-collapse: collapse;
}

.fillSpace {
   width: 100%;
   height: 100%;
   position: absolute;
}

.checkboxGrid {
   *zoom: 1;
}

.checkboxGrid:before,
.checkboxGrid:after {
   display: table;
   line-height: 0;
   content: "";
}

.checkboxGrid:after {
   clear: both;
}

.checkboxGrid div {
   float: left;
   min-width: 70px;
   line-height: normal;
}

.checkboxGrid input {
   vertical-align: bottom;
   line-height: normal;
}

.checkboxGrid label {
   display: inline;
   padding-right: 20px;
   line-height: normal;
}

.fontFamily {
   font-family: arial, verdana, sans-serif;
}

.routeDropDownMenuColumn {
   width: 35px;
   vertical-align: top;
}

#pickARouteRegion {
   position: relative;
   margin-right: 10px;
}

#pickARouteRegion .btn-group {
   position: absolute;
   right: 0;
   top: 0;
}

.border-box, .border-box::before, .border-box::after, .border-box *, .border-box *::before, .border-box *::after {
   box-sizing: border-box;
}

.border-box .form-control {
   width: 100%;
   height: auto;
}

.p-0 {
   padding: 0 !important;
}

.p-2 {
   padding: .5rem !important;
}

.p-3 {
   padding: 1rem !important;
}

.py-2 {
   padding-top: .5rem !important;
   padding-bottom: .5rem !important;
}

.py-3 {
   padding-top: 1rem !important;
   padding-bottom: 1rem !important;
}

.px-3 {
   padding-left: 1rem !important;
   padding-right: 1rem !important;
}

.pt-2 {
   padding-top: .5rem !important;
}

.pt-3 {
   padding-top: 1rem !important;
}

.pt-4 {
   padding-top: 1.5rem !important;
}

.pb-0 {
   padding-bottom: 0 !important;
}

.pb-2 {
   padding-bottom: .5rem !important;
}

.pb-3 {
   padding-bottom: 1rem !important;
}

.pr-1 {
   padding-right: .25rem !important;
}

.pr-2 {
   padding-right: .5rem !important;
}

.pr-3 {
   padding-right: 1rem !important;
}

.pr-5 {
   padding-right: 3rem !important;
}

.pl-2 {
   padding-left: .5rem !important;
}

.pl-3 {
   padding-left: 1rem !important;
}

.pl-5 {
   padding-left: 3rem !important;
}

.m-0 {
   margin: 0 !important;
}

.m-2 {
   margin: .5rem !important;
}

.m-3 {
   margin: 1rem !important;
}

.my-2 {
   margin-top: .5rem !important;
   margin-bottom: .5rem !important;
}

.my-3 {
   margin-top: 1rem !important;
   margin-bottom: 1rem !important;
}

.mt-auto {
   margin-top: auto !important;
}

.ml-auto {
   margin-left: auto !important;
}

.mt-0 {
   margin-top: 0 !important;
}

.mt-2 {
   margin-top: .5rem !important;
}

.mt-3 {
   margin-top: 1rem !important;
}

.mb-0 {
   margin-bottom: 0 !important;
}

.mb-1 {
   margin-bottom: .25rem !important;
}

.mb-2 {
   margin-bottom: .5rem !important;
}

.mb-2_5 {
   margin-bottom: .75rem !important;
}

.mb-3 {
   margin-bottom: 1rem !important;
}

.mr-2 {
   margin-right: .5rem !important;
}

.d-flex {
   display: -ms-flexbox !important;
   display: flex !important;
}

.d-inline {
   display: inline !important;
}

.d-inline-block {
   display: inline-block !important;
}

.d-block {
   display: block !important;
}

.flex-fill {
   -ms-flex: 1 1 auto !important;
   flex: 1 1 auto !important;
}

.flex-column {
   -ms-flex-direction: column !important;
   flex-direction: column !important;
}

.align-items-start {
   -ms-flex-align: start !important;
   align-items: start !important;
}

.align-items-center {
   -ms-flex-align: center !important;
   align-items: center !important;
}

.align-items-stretch {
   -ms-flex-align: stretch !important;
   align-items: stretch !important;
}

.justify-content-center {
   -ms-flex-pack: center !important;
   justify-content: center !important;
}

.w-100 {
   width: 100% !important;
}

.h-50 {
   height: 50% !important;
}

.h-75 {
   height: 75% !important;
}

.h-100 {
   height: 100% !important;
}

.bg-white {
   background: #fff !important;
}

.bg-error-light {
   background: #fcdfdf !important;
}

.bg-success-light {
   background: #f3faee !important;
}

.bg-warning-light {
   background: #fef2e6 !important;
}

.border {
   border: 2px solid #bdbdbd;
}

.border-top {
   border-top: 2px solid #bdbdbd;
}

.border-bottom {
   border-bottom: 2px solid #bdbdbd;
}

.border-left {
   border: 2px solid #bdbdbd;
}

.border-right {
   border: 2px solid #bdbdbd;
}

.border-error {
   border-color: #EB2627 !important;
}

.border-success {
   border-color: #3FB079 !important;
}

.border-warning {
   border-color: #EDB51D !important;
}

/* @override */
.text-success {
   color: #3FB079 !important;
}

/* @override */
.text-error {
   color: #EB2627 !important;
}

/* @override */
.text-warning {
   color: #EDB51D !important;
}

.text-muted {
   color: #999999 !important;
}

.text-small {
   font-size: 80%;
}

.rounded {
   border-radius: .5rem;
}

.container-fluid {
   width: 100%;
   padding-right: 1rem;
   padding-left: 1rem;
   margin-right: auto;
   margin-left: auto;
}

.row {
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   margin-right: -1rem;
   margin-left: -1rem;
}

.no-gutters {
   margin-right: 0;
   margin-left: 0;
}

.no-gutters > .col,
.no-gutters > [class*="col-"] {
   padding-right: 0;
   padding-left: 0;
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col,
.col-auto {
   position: relative;
   width: 100%;
   min-height: 1px;
   padding-right: 1rem;
   padding-left: 1rem;
}

.col {
   -ms-flex-preferred-size: 0;
   flex-basis: 0;
   -ms-flex-positive: 1;
   flex-grow: 1;
   max-width: 100%;
}

.col-auto {
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
   width: auto;
   max-width: none;
}

.col-1 {
   -ms-flex: 0 0 8.333333%;
   flex: 0 0 8.333333%;
   max-width: 8.333333%;
}

.col-2 {
   -ms-flex: 0 0 16.666667%;
   flex: 0 0 16.666667%;
   max-width: 16.666667%;
}

.col-3 {
   -ms-flex: 0 0 25%;
   flex: 0 0 25%;
   max-width: 25%;
}

.col-4 {
   -ms-flex: 0 0 33.333333%;
   flex: 0 0 33.333333%;
   max-width: 33.333333%;
}

.col-5 {
   -ms-flex: 0 0 41.666667%;
   flex: 0 0 41.666667%;
   max-width: 41.666667%;
}

.col-6 {
   -ms-flex: 0 0 50%;
   flex: 0 0 50%;
   max-width: 50%;
}

.col-7 {
   -ms-flex: 0 0 58.333333%;
   flex: 0 0 58.333333%;
   max-width: 58.333333%;
}

.col-8 {
   -ms-flex: 0 0 66.666667%;
   flex: 0 0 66.666667%;
   max-width: 66.666667%;
}

.col-9 {
   -ms-flex: 0 0 75%;
   flex: 0 0 75%;
   max-width: 75%;
}

.col-10 {
   -ms-flex: 0 0 83.333333%;
   flex: 0 0 83.333333%;
   max-width: 83.333333%;
}

.col-11 {
   -ms-flex: 0 0 91.666667%;
   flex: 0 0 91.666667%;
   max-width: 91.666667%;
}

.col-12 {
   -ms-flex: 0 0 100%;
   flex: 0 0 100%;
   max-width: 100%;
}

.font-weight-light {
   font-weight: 300 !important;
}

.font-weight-normal {
   font-weight: 400 !important;
}

.font-weight-semi-bold {
   font-weight: 500 !important;
}

.font-family-system {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
/**
 * Additional selectize customization - based on bootstrap 2 theme
 * selectize.bootstrap2.css (v0.12.6) - Bootstrap 2 Theme
 */
.selectize-control.plugin-drag_drop.multi > .selectize-input > div.ui-sortable-placeholder {
   visibility: visible !important;
   background: #f2f2f2 !important;
   background: rgba(0, 0, 0, 0.06) !important;
   border: 0 none !important;
   box-shadow: inset 0 0 12px 4px #fff;
}

.selectize-control.plugin-drag_drop .ui-sortable-placeholder::after {
   content: '!';
   visibility: hidden;
}

.selectize-control.plugin-drag_drop .ui-sortable-helper {
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.selectize-dropdown-header {
   position: relative;
   padding: 3px 10px;
   border-bottom: 1px solid #d0d0d0;
   background: #f8f8f8;
   border-radius: 4px 4px 0 0;
}

.selectize-dropdown-header-close {
   position: absolute;
   right: 10px;
   top: 50%;
   color: #333;
   opacity: 0.4;
   margin-top: -12px;
   line-height: 20px;
   font-size: 20px !important;
}

.selectize-dropdown-header-close:hover {
   color: #000000;
}

.selectize-dropdown.plugin-optgroup_columns .optgroup {
   border-right: 1px solid #f2f2f2;
   border-top: 0 none;
   float: left;
   box-sizing: border-box;
}

.selectize-dropdown.plugin-optgroup_columns .optgroup:last-child {
   border-right: 0 none;
}

.selectize-dropdown.plugin-optgroup_columns .optgroup:before {
   display: none;
}

.selectize-dropdown.plugin-optgroup_columns .optgroup-header {
   border-top: 0 none;
}

.selectize-control.plugin-remove_button [data-value] {
   position: relative;
   padding-right: 24px !important;
}

.selectize-control.plugin-remove_button [data-value] .remove {
   z-index: 1;
   /* fixes ie bug (see #392) */
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   width: 17px;
   text-align: center;
   font-weight: bold;
   font-size: 12px;
   color: inherit;
   text-decoration: none;
   vertical-align: middle;
   display: inline-block;
   padding: 1px 0 0 0;
   border-left: 1px solid #ccc;
   border-radius: 0 2px 2px 0;
   box-sizing: border-box;
}

.selectize-control.plugin-remove_button [data-value] .remove:hover {
   background: rgba(0, 0, 0, 0.05);
}

.selectize-control.plugin-remove_button [data-value].active .remove {
   border-left-color: #0077b3;
}

.selectize-control.plugin-remove_button .disabled [data-value] .remove:hover {
   background: none;
}

.selectize-control.plugin-remove_button .disabled [data-value] .remove {
   border-left-color: #e0e0e0;
}

.selectize-control.plugin-remove_button .remove-single {
   position: absolute;
   right: 0;
   top: 0;
   font-size: 23px;
}

.selectize-control {
   position: relative;
}

.selectize-dropdown,
.selectize-input,
.selectize-input input {
   color: #333;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 14px;
}

.selectize-input,
.selectize-control.single .selectize-input.input-active {
   background: #fff;
   cursor: text;
   display: inline-block;
}

.selectize-input {
   border: 1px solid #d0d0d0;
   padding: 3px 6px;
   display: inline-block;
   width: 100%;
   overflow: hidden;
   position: relative;
   z-index: 1;
   box-sizing: border-box;
   box-shadow: none;
   border-radius: 4px;
}

.selectize-control.multi .selectize-input.has-items {
   padding: 3px 6px 1px;
}

.selectize-input.full {
   background-color: #fff;
}

.selectize-input.disabled,
.selectize-input.disabled * {
   cursor: default !important;
}

.selectize-input.focus {
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}

.selectize-input.dropdown-active {
   border-radius: 4px 4px 0 0;
}

.selectize-input > * {
   vertical-align: baseline;
   display: -moz-inline-stack;
   display: inline-block;
   zoom: 1;
   *display: inline;
}

.selectize-control.multi .selectize-input > div {
   cursor: pointer;
   margin: 0 2px 2px 0;
   padding: 1px 3px;
   background: #e6e6e6;
   color: #333;
   border: 1px solid #ccc;
}

.selectize-control.multi .selectize-input > div.active {
   background: #08c;
   color: #fff;
   border: 1px solid #0077b3;
}

.selectize-control.multi .selectize-input.disabled > div,
.selectize-control.multi .selectize-input.disabled > div.active {
   color: #474747;
   background: #fafafa;
   border: 1px solid #e0e0e0;
}

.selectize-input > input {
   display: inline-block !important;
   padding: 0 !important;
   min-height: 0 !important;
   max-height: none !important;
   max-width: 100% !important;
   margin: 0 0 2px !important;
   text-indent: 0 !important;
   border: 0 none !important;
   background: none !important;
   line-height: inherit !important;
   box-shadow: none !important;
}

.selectize-input > input::-ms-clear {
   display: none;
}

.selectize-input > input:focus {
   outline: none !important;
}

.selectize-input::after {
   content: ' ';
   display: block;
   clear: left;
}

.selectize-input.dropdown-active::before {
   content: ' ';
   display: block;
   position: absolute;
   background: #e5e5e5;
   height: 1px;
   bottom: 0;
   left: 0;
   right: 0;
}

.selectize-dropdown {
   position: absolute;
   z-index: 10;
   border: 1px solid #ccc;
   background: #fff;
   margin: -1px 0 0 0;
   border-top: 0 none;
   box-sizing: border-box;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   border-radius: 0 0 4px 4px;
}

.selectize-dropdown [data-selectable] {
   cursor: pointer;
   overflow: hidden;
}

.selectize-dropdown [data-selectable] .highlight {
   background: rgba(255, 237, 40, 0.4);
   border-radius: 1px;
}

.selectize-dropdown .option,
.selectize-dropdown .optgroup-header {
   padding: 3px 10px;
}

.selectize-dropdown .option,
.selectize-dropdown [data-disabled],
.selectize-dropdown [data-disabled] [data-selectable].option {
   cursor: inherit;
   opacity: 0.5;
}

.selectize-dropdown [data-selectable].option {
   opacity: 1;
}

.selectize-dropdown .optgroup:first-child .optgroup-header {
   border-top: 0 none;
}

.selectize-dropdown .optgroup-header {
   color: #999;
   background: #fff;
   cursor: default;
}

.selectize-dropdown .active {
   background-color: #08c;
   color: #fff;
}

.selectize-dropdown .active.create {
   color: #fff;
}

.selectize-dropdown .create {
   color: rgba(51, 51, 51, 0.5);
}

.selectize-dropdown-content {
   overflow-y: auto;
   overflow-x: hidden;
   max-height: 200px;
   -webkit-overflow-scrolling: touch;
}

.selectize-control.single .selectize-input,
.selectize-control.single .selectize-input input {
   cursor: pointer;
}

.selectize-control.single .selectize-input.input-active,
.selectize-control.single .selectize-input.input-active input {
   cursor: text;
}

.selectize-control.single .selectize-input:after {
   content: ' ';
   display: block;
   position: absolute;
   top: 50%;
   right: 15px;
   margin-top: -3px;
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 5px 5px 0 5px;
   border-color: #000 transparent transparent transparent;
}

.selectize-control.single .selectize-input.dropdown-active:after {
   margin-top: -4px;
   border-width: 0 5px 5px 5px;
   border-color: transparent transparent #000 transparent;
}

.selectize-control.rtl.single .selectize-input:after {
   left: 15px;
   right: auto;
}

.selectize-control.rtl .selectize-input > input {
   margin: 0 4px 0 -2px !important;
}

.selectize-control .selectize-input.disabled {
   opacity: 0.5;
   background-color: #fff;
}

.selectize-dropdown {
   margin: 2px 0 0 0;
   z-index: 1000;
   border: 1px solid rgba(0, 0, 0, 0.2);
   border-radius: 4px;
   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.selectize-dropdown .optgroup-header {
   font-size: 11px;
   font-weight: bold;
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
   text-transform: uppercase;
}

.selectize-dropdown .optgroup:first-child:before {
   display: none;
}

.selectize-dropdown .optgroup:before {
   content: ' ';
   display: block;
   *width: 100%;
   height: 1px;
   margin: 9px 1px;
   *margin: -5px 0 5px;
   overflow: hidden;
   background-color: #e5e5e5;
   border-bottom: 1px solid #fff;
   margin-left: -10px;
   margin-right: -10px;
}

.selectize-dropdown [data-selectable].active {
   background: #0081c2 linear-gradient(to bottom, #08c, #0077b3) repeat-x;
}

.selectize-dropdown-content {
   padding: 5px 0;
}

.selectize-dropdown-header {
   padding: 6px 10px;
}

.selectize-input {
   transition: border linear .2s, box-shadow linear .2s;
}

.selectize-input.dropdown-active {
   border-radius: 4px;
}

.selectize-input.dropdown-active::before {
   display: none;
}

.selectize-input.input-active,
.selectize-input.input-active:hover,
.selectize-control.multi .selectize-input.focus {
   background: #fff !important;
   border-color: rgba(82, 168, 236, 0.8) !important;
   outline: 0 !important;
   outline: thin dotted \9 !important;
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(82, 168, 236, .6) !important;
}

.selectize-control.single .selectize-input {
   color: #333;
   text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
   background: #f5f5f5 linear-gradient(to bottom, #fff, #e6e6e6) repeat-x;
   border-color: #e6e6e6 #e6e6e6 #bfbfbf;
   border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
   *background-color: #e6e6e6;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
}

.selectize-control.single .selectize-input:hover,
.selectize-control.single .selectize-input:focus,
.selectize-control.single .selectize-input:active,
.selectize-control.single .selectize-input.active,
.selectize-control.single .selectize-input.disabled,
.selectize-control.single .selectize-input[disabled] {
   color: #333;
   background-color: #e6e6e6;
   *background-color: #d9d9d9;
}

.selectize-control.single .selectize-input:active,
.selectize-control.single .selectize-input.active {
   background-color: #cccccc \9;
}

.selectize-control.single .selectize-input:hover {
   color: #333;
   text-decoration: none;
   background-position: 0 -15px;
   transition: background-position 0.1s linear;
}

.selectize-control.single .selectize-input.disabled {
   background: #e6e6e6 !important;
   box-shadow: none;
}

.selectize-control.multi .selectize-input {
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.selectize-control.multi .selectize-input.has-items {
   padding-left: 3px;
   padding-right: 3px;
}

.selectize-control.multi .selectize-input > div {
   color: #333;
   text-shadow: none;
   background: #f5f5f5 linear-gradient(to bottom, #fff, #e6e6e6) repeat-x;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
   border-color: #e6e6e6 #e6e6e6 #bfbfbf;
   border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
   *background-color: #e6e6e6;
   border: 1px solid #ccc;
   border-radius: 4px;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
}

.selectize-control.multi .selectize-input > div.active {
   box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
   color: #fff;
   text-shadow: none;
   background: #0081c2 linear-gradient(to bottom, #08c, #0077b3) repeat-x;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
   border-color: #0077b3 #0077b3 #004466;
   border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
   *background-color: #08c;
   border: 1px solid #08c;
}
.toolbar {
    background: #bed6f8 url("images/blue-toolbar-bg.png") repeat-x;
    border-top: 1px solid #bed6f8;
    border-bottom: 1px solid #bed6f8;
}

.toolbarLineSeparator {
    background: url("images/blue-lineSeparator-bg.gif") repeat-y center center;
    vertical-align:middle;
}

.toolbarDotSeparator {
    background: url("images/blue-dotSeparator-bg.gif") no-repeat center center;
    vertical-align:middle;
}

.navBar {
   background-color: #E6F1FF;
}

.pageMainContent {
    background-color: #F1F6FF;
}

.mapTitle {
    background-color: #D4E1FC;
}

.eventGalleryHeader-normalPriority {
   background-color: #E4EFFD;
}

.eventGalleryBody-normalPriority {
   background-color: #F0F0FD
}/* --------------------------- Gallery styles -------------------- */

.galleryItem {
   background-color: #F0F0FD;
   width: 100%;
   padding: 0; /*0 0 10px 0;*/
   position: relative;
}

.filmStripGalleryItem {
   background-color: #F0F0FD;
   width: 100%;
   padding: 0; /*0 0 10px 0;*/
   position: relative;
   height: 100%;
}

.filmStripHeader {
   background-color: #E4EFFD;
}

.galleryItem-body {
   height: 100%;
   padding: 0 45px;
   position: relative;
}

.galleryShareMenuItem {
   display: block;
   padding-left: 30px;
   line-height: 20px;
}

.galleryShareMenuItem-facebook {
   background: url("images/facebook-icon.png") no-repeat;
}

.galleryShareMenuItem-twitter {
   background: url("images/twitter-icon.png") no-repeat;
}

.galleryShareMenuItem-email {
   background: url("images/email-icon.gif") no-repeat;
}

.galleryItem-body {
   padding: 5px 45px;
}

.galleryItem-body h4 {
   margin: 5px 0 0;
}

.galleryItem-body .smallText {
   min-height: 20px;
}

.galleryItem-body p {
   line-height: 15px;
   margin-top: 10px;
}

.galleryItem-body .stillImage {
   width: 100%;
   height: 100%;
}

.galleryItem-body img {
   max-width: 100%;
}

.events-info {
   background-color: #D8DFFF;
   padding: 0 10px 10px 10px;
   font-size: 1em;
   line-height: 18px;
   overflow-y: auto;
   height: 100%;
   margin-bottom: 3px;
}

.events-info li {
   margin-bottom: 20px;
}

#detailMapContainer {
   height: 400px;
   margin-top: 10px;
}

.cameraViewContainer {
   margin-top: 9px;
}

/* Per TGWEB-697 (Cameras: please center camera images that are smaller than the available space) */
#cameraViewRegion {
   /* center horizontally */
   margin: auto;
   text-align: center;
   position: relative;
}

.featherlight-content #cameraViewRegion img {
   width: auto;
   height: auto;
}

.camera-view-not-available {
   height: 590px;
   width: 575px;
}

.camera-view-not-available#dynamicHeight {
   margin: auto;
   width: 90%;
}

.camera-view-not-available div {
   font-size: 16px;
   font-weight: bold;

   /* center horizontally */
   text-align: center;

   /* center vertically */
   position: relative;
   top: 50%;
   transform: translateY(-50%);
   -webkit-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
}

#cameraControlsRegion {
   width: 100%;
   position: absolute;
   bottom: 0;
}

#cameraViewControls {
   height: 30px;
}

#cameraViewControls select {
   width: 187px;
}

#cameraControlsRegion img {
   cursor: pointer;
}

#lastUpdatedDiv {
   text-align: right;
   position: absolute;
   right: 0;
   top: 0;
}

.no-margin-top {
   margin-top: -5px;
}

#video {
   height: auto;
   display: table-cell;
}

#cameraMultiView {
   width: 217px;
   /* For the sake of the layout, we must preserve the space this element would occupy, whether it's visible or not: */
   visibility: hidden;
}

#cameraImageControls,
#cameraVideoControls,
#cameraExternalPageControls {
   height: 30px;
   line-height: 30px; /* center the text vertically */
   position: absolute;
   top: 0;

   /* center horizontally without being 100% width, since that covers things up */
   left: 50%;
   transform: translateX(-50%);
}

/* if the window is small enough that the controls will overlap other things, switch to a static left value instead of centering */
@media (max-width: 1090px) {
   #cameraImageControls,
   #cameraVideoControls {
      left: 237px;
      transform: none;
   }
}

/* #cameraExternalPageControls is wider and needs to switch to static left sooner */
@media (max-width: 1190px) {
   #cameraExternalPageControls {
      left: 237px;
      transform: none;
   }
}

#cameraViewControls a {
   font-size: 1.3em;
   white-space: nowrap;
}

#cameraVideoControls .refreshLink {
   display: none;
}

iframe#externalPage {
   width: 590px;
   height: 431px;
}

/* This is the entire right-hand panel, comprising the header info (including mtn. pass data),
 * secondary content area, tertiary content area etc. */
.gallery-infoRegion {
   height: 474px;
}

.gallery-primaryContentRegion {
   position: relative;
   height: 100%;
}

.gallery-secondaryContentRegion {
   background-color: #ffffff;
}

.gallery-tertiaryContentRegion {
   max-height: 180px;
   overflow: auto;
}

.gallery-tertiaryContentRegion ul {
   padding-bottom: 0;
}

.eventGalleryMapCanvas {
   float: left;
   width: 100%;
}

.filmstripContainer {
   height: 28.5714286%;
   width: 100%;
   overflow-x: scroll;
   overflow-y: hidden;
   white-space: nowrap;
   display: inline-block;
}

.mapContainer {
   width: 70%;
   height: 100%;
   float: left;
}

.filmstripImage {
   max-width: 100%;
   max-height: 100%;
   display: block;
   margin-left: auto;
   margin-right: auto;
}

.filmstripImageDiv {
   max-width: 100%;
   max-height: 100%;
   height: 100%;
}

.filmstripAnchor {
   display: block;
}

.filmstrip {
   height: 100%;
}

.imageDivHorizontal {
   vertical-align: top;
   padding: 5px;
   height: calc(100% - 10px);
   width: auto;
   display: inline-block;
   position: relative;
}

.highlightedImageDiv {
   background: blue;
}

.horizontalFilmstripMap {
   width: 100%;
   height: 71.4285714% !important;
}

.snowPlowLabel {
   position: absolute;
   width: 50%;
   margin-left: 25%;
   text-align: center;
   top: 10%;
   color: orange;
   cursor: default;
}

/*for popout plow label*/
.featherlight-content .snowPlowLabel {
   font-size: 3vh;
}

.routeDesignatorLabel {
   font-size: 11px;
   position: absolute;
   text-align: center;
   top: 80%;
   color: floralwhite;
   overflow: hidden;
   /* Use rgba to set opacity on just background */
   background-color: rgba(90, 90, 90, .6);
   border-radius: 10px;
   border: 1px solid floralwhite;
   cursor: default;
   left: 5%;
   white-space: nowrap;
   text-overflow: ellipsis;
   width: 86%;
   padding-left: 2%;
   padding-right: 2%;
}

#cameraViewRegion .routeDesignatorLabel {
   top: 89%;
}

/*for popout filmstrip label don't use label*/
.featherlight-content .routeDesignatorLabel {
   display: none;
}

.plowImageIcon {
   position: absolute;
   width: 10%;
   left: 5%;
   text-align: left;
   top: 80%;
}

/* Override featherlight content styles to fix padding */
.featherlight .featherlight-content {
   padding: 5px 5px 0;
   border-bottom: 5px solid transparent;
   margin-left: 5%;
   margin-right: 5%;
   max-height: 95%;
}

/* Override margins */
.featherlight .featherlight-close-icon {
   line-height: 15px;
   width: 15px;
   margin-top: 10px;
   margin-right: 10px;
}

.featherlight .filmstripImage {
   height: 60vh;
}

.featherlight-inner {
   height: 100%;
}

/* ------------------------- PLOW ------------------------------- */

.mainImageRegion {
   vertical-align: middle;
   text-align: center;
}

.mainDescriptionRegion {
   vertical-align: middle;
   text-align: left;
}

.plowGalleryBodyText {
   font-size: 16px;
   margin-top: 10px;
   margin-right: 10px;
   height: 95%;
   overflow-y: auto;
   float: left;
   width: 30%;
}

/* ------------------------- RWIS ------------------------------- */

.weatherStationDataRegion {
   margin: 0 0 20px 0;
}

.galleryItem-body .rwis-last-updated {
   margin: 0;
}

.galleryItem-body .weatherStationDataRegion {
   margin-bottom: 10px;
}

.galleryItem-body .rwis-data-table {
   font-size: 1em;
   line-height: 18px;
}

.galleryItem-RWIS-Alert {
   background-color: #FFE6EE;
}

/* RWIS alert header section */
.rwis-gallery-header-alerts {
   display: inline-block;
   position: absolute;
   top: 2px;
   width: 870px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
}

.rwis-gallery-header-alerts * {
   display: inline;
}

.rwis-gallery-header-alerts img {
   position: relative;
   top: -2px;
}

.rwis-gallery-header-alerts ul {
   list-style: none;
   margin: 0;
   padding: 0;
}

.rwis-gallery-header-alerts li:after {
   content: ", ";
}

.rwis-gallery-header-alerts li:last-child:after {
   content: "";
}

.rwis-gallery-header-alerts-summary > li:last-child:after {
   content: ":";
}

.rwis-gallery-header-alerts li:nth-last-child(2):after {
   content: " and ";
}

.rwis-gallery-header-alerts li:nth-last-child(3) + li:after {
   content: ", and ";
}

.rwis-gallery-header-alerts-details {
   font-weight: normal;
}

.rwis-gallery-header-alerts-details ul {
   text-transform: lowercase;
}

/* RWIS data table */
.rwis-datum td:first-child {
   padding-left: 15px; /* leave room for rwis alert icon */
}

.rwis-datum-value, .rwis-datum-label {
   vertical-align: top;
}

.rwis-datum-alert {
   font-weight: bold;
}

.rwis-datum-alert td:first-child {
   background: transparent url(../images/rwis/data-item-alert-indicator.png) no-repeat center left;
}

.rwis-datum-value {
   padding: 0 0 0 12px;
}

.rwis-data-header {
   background: #D8DFFF;
   padding: 0 2%;
   margin: 0;
   height: 40px
}

.rwis-data-scroll-area {
   overflow: auto;
   padding: 10px 8px 0 8px;
}

.rwis-last-updated {
   font-size: 1em;
   margin: 0 0 30px 0;
   font-style: italic;
}

.rwis-moreDataLnk {
   font-size: 16px;
}

.rwis-no-data {
   font-size: 16px;
}

.rwis-disclaimer {
   font-size: 16px;
}

/* These two probably belong in tgweb.css */
.fill {
   height: 100%;
}

.icon {
   margin-top: -7px;
}

.galleryPopupModal {
   top: 5%;
   left: 0;
   width: 90%;
   height: 90%;
   margin-left: 5%;
   margin-right: 5%;
}

.smallText {
   font-size: .9em;
}

.featherlight-content.itemview-additions {
   min-height: 60%;
   overflow: hidden;
   background-color: #F0F0FD;
   height: 90%;
   width: 90%;
}

.featherlight-content .cameraViewContainer {
   margin: 0;
}

.featherlight-content .galleryItem-body {
   padding-top: 0;
}

.rest-area-gallery #detailMap {
   height: auto !important;
   width: auto !important;
   flex: 1;
   margin: .5rem;
}

.ra-prev {
   border-right: 0.0625rem solid #bdbdbd;
}
.ra-next {
   border-left: 0.0625rem solid #bdbdbd;
}

#signInPopup {
   padding: 14px 20px 20px;
}

#signInPopupTable {
}

#signInPopupTable td {
   width: 50%;
}

#signInPopup #forgotPassword {
   float: left;
   padding-top: 5px;
}

#signInPopup .modal-header {
   border-bottom: none;
   padding: 7px 10px;
}

#signInPopup .modal-header img {
   vertical-align: baseline;
}

.get-account-cell {
   background: #49AFCD;
   color: #FFFFFF;
}

#accountGetStartedButton {
   margin-top: 20px;
}body, table
{
   font-family:arial,verdana,sans-serif;
   font-size:14px;
}
/* Event report list */
.eventReportItem {
   cursor: pointer;
   padding: 5px 5px 5px 0;
}

.eventReportIconColumn {
   float: left;
   width: 60px;
   text-align: center;
}

.eventReportDescriptionColumn {
   overflow-x: hidden;
}

.eventReportFutureHeader {
   font-weight: bold;
   white-space: nowrap;
}

/* --------------------------- Event gallery styles -------------------- */
.eventGalleryItemView {
   position: relative;
}

.eventGalleryHeader {
   padding: 0 10px;
   font-size: 1.15em;
   font-weight: bold;
   min-height: 30px;
   vertical-align: middle;
   line-height: 30px;
}

.eventGalleryBody {
   /*
   Left padding is 30px because we use 15px for vox flag icons.  The "eventGallerySideMargin" CSS class gives non-vox
   elements the correct left margin. Right padding is 45px as usual.
   */
   padding: 0 45px 0 33px;
}

.eventGallerySideMargin {
   /*
   This is used to give non-vox event gallery elements the correct amount of left margin.
   We got rid of 15px of left padding in order to show the Vox flag icons properly.
   */
   margin-left: 15px;
   margin-right: 15px;
}

.eventGalleryBodyContainer {
   height: 100%;
}

.eventGalleryBodyText {
   font-size:16px;
   margin-top: 10px;
   height: 95%;
   overflow-y: auto;
   float:left;
   width:30%;
}

.eventIcon {
   max-width: 30px;
   max-height: 30px;
   vertical-align: middle;
}

.eventAgencyIcon {
   vertical-align: middle;
}

.detailMapContainer {
   width: 100%;
   height: 100%;
}

.share-btn-group {
   margin: 3px 30px;
}

.eventPrintContainer {
   padding-right: 10px;
   display: inline;
}

span.delayText {
   font-weight: bold;
}

/* ------------------------ Critical events popup styles -------------------- */
.criticalEventsPopupHeader {
   padding: 10px;
   font-size: 1.15em;
   font-weight: bold;
   border-radius: 6px 6px 0 0;
   /* Background and text colors are ops configurable in custom.css */
}

.criticalEventsPopupBody {
   padding: 10px;
   border-radius: 0 0 6px 6px;
   /* Background color is ops configurable in custom.css */
}

.camera-item, .plow-item {
   cursor: pointer;
   padding: 5px 5px 5px 0;
}

.camera-icon-column, .plow-icon-column {
   float: left;
   width: 60px;
   text-align: center;
}

.camera-description-column, .plow-description-column {
   overflow-x: hidden;
}

.camera-toggle-btn, .plow-toggle-btn {
   margin-right: 5px;
   float: right;
}

.camera-list-image, .plow-list-image {
   height: auto;
   width: 100%;
}

.camera-image-unavailable, .plow-image-unavailable {
   border: 1px solid black;
   background: white;
}
.customModuleGalleryHeader {
   padding: 0 10px;
   font-size: 1.15em;
   font-weight: bold;
   min-height: 30px;
   vertical-align: middle;
   line-height: 30px;
   background-color: #E4EFFD;
}

.customModuleGalleryBody {
   padding: 0 45px;
   height: 500px;
   background-color: #F0F0FD;
}

.galleryItem-body h4 {
   margin: 5px 0 0;
}

.gallery-secondaryContentRegion .custom-module-information-area {
   background: #FFFFFF;
   padding: 10px 8px;
}
.eventFeedbackHeaderPanel {
   vertical-align: middle;
}

.eventFeedbackPanel ul {
   margin-left: 70px;
}

.eventFeedbackPanel li {
   margin-top: 7px;
   list-style-image: url('../images/eventFeedback/feedback_bullet_point.png');
}

.eventFeedbackLink img {
   margin-right: 10px;
}

.eventFeedbackStatsTable {
   border: 0;
   margin-top: 10px;
}

.eventFeedbackStatsBadgeColumn {
   width: 44px;
   vertical-align: top;
   text-align: center;
}

.eventFeedbackStatsBadge {
   border: 2px solid #0079ff;
   border-radius: 5px;
   background-color: #b5b6b5;
   padding: 3px 5px;
   color: #0079ff;
   font-weight: 600;
}

.eventFeedbackStatsRow {
   font-size: 0.9em;
}

.eventFeedbackStatsCount {
   color: #0079ff;
}#drive-times-container * {
   padding: 0;
   margin: 0;
}

#drive-times-container {
   padding: 14px;
}

#drive-times-container h1 {
   font-size: 20px;
}

#drive-times-container h2 {
   font-size: 16px;
}

#drive-times-container p {
   font-size: 14px;
   line-height: 16px;
}

#drive-times-container p + p {
   margin-top: 1em;
}

#drive-times-container hr {
   margin-top: 1em;
   margin-bottom: 1em;
}

/* We want bold "bullets", so... */
#hotspot-select-list {
   counter-reset: hotspots;
}
#hotspot-select-list > li {
   counter-increment: hotspots;
   list-style-type: none;
}
#hotspot-select-list > li:before {
   content: counter(hotspots, upper-alpha) ".";
   display: inline-block;
   font-weight: bold;
   margin-right: 0.5em;
   text-align: right;
   width: 1em;
}
/* end of custom bullets */

#hotspot-select-list-from {
   color: #2b961e;
}
#hotspot-select-list-to {
   color: #ea3323;
}

#hotspot-select-list > li + li {
   margin-top: 0.5em;
}

#hotspots-clear-container {
   display: inline-block;
   float: right;
}

/** ------------- Sign list CSS ------------- **/

.signListItem {
   padding: 5px 5px 5px 0;
}

.signListIconColumn {
   float: left;
   width: 60px;
   text-align: center;
}

.signListNameColumn {
   overflow-x: hidden;
}

.disabledSignListNameColumn {
   color: dimgray;
}

/** ------------- Sign gallery CSS ------------- **/

.signGalleryHeader {
   background-color: #E4EFFD;
   padding: 0 10px;
   font-size: 1.15em;
   font-weight: bold;
   min-height: 30px;
   vertical-align: middle;
   line-height: 30px;
}

.signGalleryBody {
   background-color: #F0F0FD;
   padding: 0 45px;
   height: 500px;
}

.signDisplayTable {
   width: 90%;
   /* Center the table */
   margin-left: auto;
   margin-right: auto;
}

.signDataUnavailableDisplay {
   height: 200px;
   text-align: center;
   vertical-align: middle;
   color: black;
   font-size: 16pt;
   background-color: #C5D5FC;
}

.signMessageContainer {
   width: 100%;
   /* Define a minimum height of the sign displays (text is vertically centered in tall displays) */
   min-height: 200px;
}

.signTopRow {
   height: 13px;
}

.signTopLeftCell {
   background-image: url("images/signs/display_top_left.png");
}

.signTopCenterCell {
   background: url("images/signs/display_top.png") repeat-x;
}

.signTopRightCell {
   background-image: url("images/signs/display_top_right.png");
}

.signBottomRow {
   height: 13px;
}

.signBottomLeftCell {
   background-image: url("images/signs/display_bottom_left.png");
}

.signBottomCenterCell {
   background: url("images/signs/display_bottom.png") repeat-x;
}

.signBottomRightCell {
   background-image: url("images/signs/display_bottom_right.png");
}

.signLeftBorder {
   background: url("images/signs/display_left.png") repeat-y;
   width: 16px;
   /* Min-width is needed so that if the sign display is too wide and a scrollbar appears, the border is preserved */
   min-width: 16px;
}

.signRightBorder {
   background: url("images/signs/display_right.png") repeat-y;
   width: 15px;
   /* Min-width is needed so that if the sign display is too wide and a scrollbar appears, the border is preserved */
   min-width: 15px;
}

.signMessageCell {
   position: relative;
   padding: 8px;
   background-color: #333333;
}

.signWithMessage {
   color: #FFCC00;
}

.signWithNoMessage {
   color: #ffffff;
}

.signMessage {
   font-family: 'courier new', courier, sans-serif;
   line-height: normal;
   white-space: pre;
}

.signOverlayMessage {
    position: absolute;
    display: flex;
    float: left;
    top: calc(79% - 8px);
    left: 11%;
    height: 9%;
    width: 80%;
    color: #ffffff;
    font-family: 'courier new', courier, san-serif;
    font-weight: bold;
    font-size: 3.0vw;
}

.signOverlayMessageTravelTimeSingle {
    position: relative;
    display: inline-block;
    width: 20%;
    left: 30%;
    top: 14%;
    line-height: 1;
    text-align: center;
    align-self: center;
}

.signOverlayMessageTravelTimeDouble {
    position: relative;
    width: 100%;
}

.signOverlayMessageTravelTimeDoubleFirst {
    position: relative;
    float: left;
    display: inline-block;
    width: 20%;
    line-height: 1;
    text-align: center;
    align-self: center;
}

.signOverlayMessageTravelTimeDoubleSecond {
    position: relative;
    display: inline-block;
    width: 21%;
    left: 39%;
    line-height: 1;
    text-align: center;
    align-self: center;
}

.signCyclingIcon {
   margin-top: 5px;
   cursor: pointer;
}
/** ------------- Toll list CSS ------------- **/

.tollListItem {
   padding: 5px 5px 5px 0;
}

.tollListIconColumn {
   float: left;
   width: 60px;
   text-align: center;
}

.tollListNameColumn {
   overflow-x: hidden;
}

.disabledTollListNameColumn {
   color: dimgray;
}

/** ------------- Toll gallery CSS ------------- **/

.tollGalleryHeader {
   background-color: #E4EFFD;
   padding: 0 10px;
   font-size: 1.15em;
   font-weight: bold;
   min-height: 30px;
   vertical-align: middle;
   line-height: 30px;
}

.tollGalleryBody {
   background-color: #F0F0FD;
   padding: 0 45px;
   height: 500px;
}

.tollGalleryBody .lastUpdated {
   padding-left: 10px;
   font-weight: bold;
   margin-top: 0.5em;
}

.toll-v-center {
   position: relative;
   top: 50%;
   transform: translateY(-50%);
}

/* ----------- #tollSignBoard styles ------------- */

#tollSignBoard {
   color: white;
   background-color: #006f53;

   padding: 15px;

   border: 7px solid white;
   border-radius: 40px;
   -moz-border-radius: 40px;
   -webkit-border-radius: 40px;
}

/* ----------- #tollSignBoard table styles (for nested panel(s) in the sign) ------------- */

#tollSignBoard .noData {
   line-height: 1.25em;

   text-align: center;

   /* center vertically: */
   position: relative;
   top: 50%;
   -webkit-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
   transform: translateY(-50%);
}

#tollSignBoard table {
   width: 100%;

   font-size: 22px;
   line-height: 1.25;

   border-collapse: separate; /* to override global table setting (collapse) */
}


/* a skosh of padding at the bottom of the bottom row */
#tollSignBoard tbody tr:last-child td {
   padding-bottom: 15px;
}

/* ----------- #tollSignBoard table header styles ------------- */

#tollSignBoard thead {
   border-bottom: 2px solid white;
}

#tollSignBoard table thead td {
   text-align: center;
}

/* horizontal rules rules for table header */
#tollSignBoard table thead td hr {
   height: 0;
   border: 1px solid #fff;
   margin: 15px;
}

/* first & last columns in header, top row only */
#tollSignBoard table thead tr:first-child td:first-child,
#tollSignBoard table thead tr:first-child td:last-child {
   color: #006f53;
   background-color: white;
   padding: 2px;

   border-top-left-radius: 15px;
   border-top-right-radius: 15px;
   -moz-border-radius-topleft: 15px;
   -moz-border-radius-topright: 15px;
   -webkit-border-top-left-radius: 15px;
   -webkit-border-top-right-radius: 15px;
}

/* -------------- #tollSignBoard table body styles ----------------- */
/* NOTE: some of these styles are overridden below for "split" signs */

/** push all text towards top of cell */
#tollSignBoard tbody td {
   vertical-align: top;
}

/* first & last columns */
#tollSignBoard tbody td:first-child,
#tollSignBoard tbody td:last-child {
   padding: 0 15px;
}

/* first column */
#tollSignBoard table td:first-child {
   border-left: 2px solid white;
}

/* last column */
#tollSignBoard table td:last-child {
   border-right: 2px solid white;
}

/*  bottom row */
#tollSignBoard table tbody tr:last-child td {
   border-bottom: 2px solid white;
}

/* bottom row, first column */
#tollSignBoard table tbody tr:last-child td:first-child {
   border-bottom-left-radius: 15px;
   -moz-border-radius-bottomleft: 15px;
   -webkit-border-bottom-left-radius: 15px;
}

/* bottom row, last column */
#tollSignBoard table tbody tr:last-child td:last-child {
   border-bottom-right-radius: 15px;
   -moz-border-radius-bottomright: 15px;
   -webkit-border-bottom-right-radius: 15px;
}

/* ------- split (double-panel) sign styles --------- */

/* first & last columns */
#tollSignBoard table.split td:first-child,
#tollSignBoard table.split td:last-child {
   border-left: 2px solid white;
   border-right: 2px solid white;
}

/* bottom row, central column(s) (NOTE: left/right columns override this, in next block) */
#tollSignBoard table.split tbody tr:last-child td {
   border-bottom: none;
}

/* first/last columns in body: bottom row only */
#tollSignBoard table.split tbody tr:last-child td:first-child,
#tollSignBoard table.split tbody tr:last-child td:last-child {
   border-bottom: 2px solid white;
   border-bottom-left-radius: 15px;
   border-bottom-right-radius: 15px;
   -moz-border-radius-bottomleft: 15px;
   -moz-border-radius-bottomright: 15px;
   -webkit-border-bottom-left-radius: 15px;
   -webkit-border-bottom-right-radius: 15px;
}

/* ------- Large window styles --------- */

@media (min-width: 1025px) {
   #tollSignBoard {
      padding: 20px;
   }
   #tollSignBoard table {
      font-size: 28px;
   }
   #tollSignBoard table thead td hr {
      margin: 20px;
   }
   /* first & last columns */
   #tollSignBoard tbody td:first-child,
   #tollSignBoard tbody td:last-child {
      padding: 0 20px;
   }
}
#user-favorites {
   position: relative;
   min-height: 97%;
}

#user-favorites .sign-out {
   font-size: 12px;
}

#favoriteItems {
   list-style: none;
   margin-left: 4px;
   margin-bottom: 24px;
}

.user-favorite-item {
   padding: 3px 12px 3px 2px;
}

.user-favorite-item a {
   color: #000000;
}

.user-favorite-item button {
   margin: 0 3px 0 0;
}

#save-route-form {
   margin-bottom: 6px;
}

.favorite-trip-item-travel-mode-icon {
   padding: 2px 0 0 4px;
}

.favorite-trip-item-travel-mode-icon img {
   height: 22px;
   width: auto;
}

.favorite-trip-item-text {
   overflow-x: hidden;
   position: relative;
   padding-top: 2px;
   padding-left: 5px;
}

#user-trips-composite {
   margin-bottom: 14px;
}

.reorder-alert {
   margin-top: 12px !important;
}

#favorites-content-area {
   padding-bottom: 40px;
}

#routes-help {
   position: absolute;
   bottom: 0;
   padding: 10px;
}
#voxTitleTable {
   width: 100%;
}

#learnHowLinkParent {
   padding-left: 10px;
   text-align: right;
   white-space: nowrap;
}

.allVoxChoicesTable {
   width: 100%;
}

.allVoxChoicesTable > tbody > tr > td {
   vertical-align: top;
}

.voxChoicesTable {
   /* Simulate "cellspacing" */
   border-spacing: 3px;
   border-collapse: separate;

   margin-right: 10px;
}

.voxChoicesTableWithLeftBorder {
   border-left: 1px solid #BED6F8;
}

.voxChoicesTableWithLeftBorder td {
   padding-left: 10px;
}

.voxColumn {
   width: 33%;
}

.voxColumnTitle {
   font-weight: bold;
   margin-bottom: 10px;
}

.voxChoiceCell {
   cursor: pointer;

   min-width: 75px;
   /* We're specifying height to make all choice cells (including cells w/ icons) the same height.  Min-height doesn't seem to work here. */
   height: 27px;
   padding-left: 10px;
   padding-right: 10px;

   vertical-align: middle;

   /**
    * When a condition is moused over, a blue border shows around it and the background changes.  When it isn't moused
    * over, include a transparent border so that the text doesn't jump around.  For WEB-1216.
    */
   border: 1px solid transparent;
}

.voxChoiceIcon {
   cursor: pointer;
   margin-right: 3px;
}

.highlightedVoxChoiceCell {
   background: url('../images/vox/vox_clickable_div_background.png') repeat-x;
   border: 1px solid #D2E4FF;
}

.selectedVoxChoiceCell {
   font-weight: bold;

   background: url('../images/vox/vox_clickable_div_background.png') repeat-x;
   border: 1px solid #D2E4FF;
}

.voxTellUsMore {
   width: 95%;
   border: 1px solid #DBE8FB;
}

.voxThankYouImage {
   position: absolute;
   z-index: 1000;
}

.voxBlogEntriesTable {
   width: 100%;
}

.voxBlogEntriesTablePrinting {
   font-size: 0.98em;
}

.voxTellMeMorePanel {
   margin-right: 10px;
}

.voxBlogText {
   white-space: pre-wrap;
}

.voxBlogScreenName {
   font-style: italic;
}

.voxBlogTimestamp {
   white-space: nowrap;
   color: #ABABAB;
   text-align: right;
   padding-left: 15px;
}

.voxBlogTextarea {
   width: 98%;
}

.blogFlagColumn {
   width: 12px;
   text-align: center;
   vertical-align: top;
}

.flagBlogEntryIcon {
   cursor: pointer;
}.busRouteName {
   max-width: 300px;
   padding-right: 30px;
}

.busDirection {
   padding-right: 30px;
}

.busDepartureTime {
}

.busEtaTable td {
   border-bottom: 1px solid #777777;
   font-size: 12px;
}

.busEtaTableHeader {
   font-weight: bold;
}

.busRouteSquare {
   height: 15px;
   width: 15px;
   display: inline-block;
   vertical-align: middle;
   margin-right: 10px;
   margin-left: 10px;
}

.routeTableCheckboxColor {
   width: 50px;
}

.even {
   background-color: white;
}

.odd {
   background-color: #DDDDDD;
}

/**----- Picker dropdown -----*/
.providerPickerDropdown {
   top: auto;
   margin-left: 10px;
}

.providerPickerItem {
   padding-left: 10px;
   padding-right: 10px;
}

#selectNoneLink {
   margin-left: 10px;
}.alertScheduleCheckboxColumn {
   width: 20px;
   vertical-align: top;
   line-height:19px;
}

.alertScheduleCheckboxColumn > input {
   margin:0;
}

.alertScheduleLabelColumn {
   margin-left: 5px;
   border-collapse: collapse;
}

.alertScheduleRow {
   margin-top: 10px;
}

.alertScheduleRowNoMargin {
   margin-top: 0;
}

.alertScheduleLabelColumn > label {
   margin-bottom: 0;
}

.alertScheduleTable {
   border-collapse: separate;
   border-spacing: 0 19px;
   /* Negative top margin to prevent space before first row. */
   margin: -19px 0;
}

.inlineInput {
   margin: 0;
}

.blockInput {
   margin: 5px 0 0 0;
}

#travelTimeExceedsThreshold {
   width: 35px;
}

#alertTimeExceeds {
   /* Add margin-top because the label has an oversized input that changes line height */
   margin-top: 13px;
}

.alertScheduleLabelColumn > .checkboxGrid {
   margin-top:5px;
}

.myAlertsSettings {
   font-weight: bold;
   text-decoration: underline;
   color: #005580;
}.ra-next-ra-tooltip {
   opacity: 0;
   pointer-events: none;
   transition: opacity .2s;
   top: 110%;
   transform: translateX(-90%);
   font-size: 13px;
}

.ra-next-ra-tooltip .tooltip-inner, .ra-sms-tooltip .tooltip-inner, .ra-privately-owned-tooltip .tooltip-inner, .ra-filling-tooltip .tooltip-inner {
   background-color: #fff;
   border: solid .125rem #555;
   color: #333;
   box-shadow: -2px 2px 4px 0 rgba(0, 6, 85, 0.4);
   width: 18rem;
   max-width: none;
   padding: 1rem 1rem .5rem 1rem;
   text-align: initial;
   border-radius: initial;
}

.ra-next-ra-tooltip.bottom .tooltip-arrow, .ra-privately-owned-tooltip.bottom .tooltip-arrow, .ra-filling-tooltip.bottom .tooltip-arrow {
   border-top-color: #555;
}

.ra-tooltip-btn {
   position: relative;
}

.ra-tooltip-btn:hover .ra-sms-tooltip, .ra-tooltip-btn:focus .ra-sms-tooltip, .ra-tooltip-btn:hover .ra-next-ra-tooltip, .ra-tooltip-btn:focus .ra-next-ra-tooltip, .ra-tooltip-btn:hover .ra-privately-owned-tooltip, .ra-tooltip-btn:hover .ra-filling-tooltip, .ra-tooltip-btn:focus .ra-privately-owned-tooltip, .ra-tooltip-btn:focus .ra-filling-tooltip {
   opacity: 1;
}

.ra-sms-tooltip {
   opacity: 0;
   pointer-events: none;
   transition: opacity .2s;
   right: 100%;
   top: 50%;
   transform: translateY(-50%);
   font-size: 13px;
}

.ra-sms-tooltip.left .tooltip-arrow {
   border-left-color: #555;
}

.ra-sms-accordion-group, .ra-sms-accordion-inner {
   border-width: .125rem;
}

.ra-privately-owned-tooltip, .ra-filling-tooltip {
   opacity: 0;
   pointer-events: none;
   transition: opacity .2s;
   top: 110%;
   transform: translateX(-47%);
   font-size: 13px;
}