.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;
}
.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;
}.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;
}

#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;
}

.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 {
   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;
}

.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;
}