/* The z-index list is just to help devs figure out the z-indexs used throughout this css file. If you update or add any z-indexs in the file, please update this list as well
z-index
- Session Expiry Panel : 100;
- Dialog: 80;
- Toast: 79;
- Bottom Sheet: 70;
*/

/* Uncomment this block to show which item currently selected/focused. This will help while testing AODA tasks*/
/*:focus{
  background: red !important;
  color: green !important;
  outline: 1px solid #13beb8 !important;
}*/

/* Material Tab Fix!! */
/* The Angular Material Library seems to have an issue with the last  tab overflowing to the next line (hidden)
This fix ensure that the last hidden tab doesn't WRAP to the next row.  This fixes the javascript left edge detection.
*/

md-tabs .md-tab {
  margin-left: -1px;
  overflow: visible;
  max-width: none !important; /* Overriding the 264px max width in angular-material to avoid certain long strings bleeding over onto the next tab */
}

.md-button-large {
  font-size: 30px;
  min-height: 48px;
  padding-left: 16px;
  padding-right: 16px;
}

/*  End Material Tabs Fix !! */


/*Material Icons*/

.md-18 md-icon {
  font-size: 18px;
  width: 18px;
  height: 18px;
}

.md-24 md-icon {
  font-size: 24px;
  width: 24px;
  height: 24px;
}

.md-36 md-icon, md-icon.md-36 {
  font-size: 36px;
  width: 36px;
  height: 36px;
}

.md-48 md-icon {
  font-size: 48px;
  width: 48px;
  height: 48px;
}

.md-dark md-icon {
  color: rgba(0, 0, 0, .54);
}

.md-dark.md-inactive md-icon {
  color: rgba(0, 0, 0, .26);
}

.md-light md-icon, md-icon.md-light {
  color: rgba(255, 255, 255, .8);
}

.md-light.md-inactive md-icon {
  color: rgba(255, 255, 255, .3);
}

.md-icon-button.md-no-padding {
  padding: 0;
}

.md-fab.md-accent > md-icon {
  color: rgba(255, 255, 255, .8) !important;
}

.md-icon-button.collapse-root-widget-chevron {
  left: 5px;
  position: relative;
}

/*Material Icons*/


/*Common*/

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #FFFFFF;
}

a {
  text-decoration: none;
}

md-dialog-actions.border-top {
  border-top: 1px solid #EBEBEB;
}

p {
  line-height: 1.6em;
}

md-menu-item > .md-button {
  display: inline;
}

._md-visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  text-transform: none;
  width: 1px;
}

.active-suspension {
  overflow: visible;
}

.active-suspension::after {
  content: "*";
  font-size: 40px;
  display: block;
  z-index: 1;
  width: 40px;
  height: 40px;
  line-height: 40px;
  position: absolute;
  top: -5px;
  left: -12px;
  color: red;
}

md-menu-item .active-suspension::after, md-list .active-suspension::after {
  font-size: 30px;
  display: block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  top: 7px;
  left: 13px;
}


/*styling bug in Angular Material*/

md-icon {
  min-height: 24px;
  min-width: 24px;
}

.md-button.md-icon-button {
  min-width: 40px;
}


/*styling bug in Angular Material*/

md-tooltip {
  z-index: 106;
  /*So that it above the Toast which is 105*/
}

md-toast .md-toast-content::before {
  min-height: 0;
}

md-toast .md-toast-text {
  padding-top: 6px;
  padding-bottom: 6px;
  line-height: 18px;
}

.multi-line-toast-msg {
  padding: 0 0 0 8px;
  line-height: 24px;
}

/* Unit Testing */

.unit-test-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 500px;
  height: 300px;
  overflow-y: auto;
  background: white;
  z-index: 500;
}


/* Unit Testing Ends*/


/* File Drop */

.drop-box {
  background: #F8F8F8;
  border: 5px dashed #DDDDDD;
  width: 200px;
  height: 65px;
  line-height: 65px;
  text-align: center;
  margin-top: 16px;
}


/* File Drop Ends*/

.condensed-text {
  font-family: "Open Sans Condensed", sans-serif;
}

.main-content-wrapper {
  position: relative;
  overflow: hidden;
  /* For Firefox*/
}

.main-content {
  overflow: hidden;
}

h1, h2 {
  margin: 0;
}

.md-label {
  word-break: break-word;
}

md-radio-button .md-label {
  display: flex;
  flex: 1;
  -webkit-box-flex: 1;
}

md-radio-button .md-label span {
  width: 100%;
}

.md-image-button {
  padding: 0;
}

.search-view-wrapper .md-whiteframe-1dp, .search-view-wrapper .md-whiteframe-z1 {
  box-shadow: 0 1px 1.5px rgba(0, 0, 0, .06), 0 1px 1px rgba(0, 0, 0, .12);
}

md-backdrop.md-sidenav-backdrop {
  z-index: 70;
}

md-sidenav {
  z-index: 71;
}

.rotate-90-clock {
      -ms-transform: rotate(90deg);
  /* IE 9 */
  -webkit-transform: rotate(90deg);
  /* Chrome, Safari, Opera */
          transform: rotate(90deg);
}

.rotate-90-counter-clock {
      -ms-transform: rotate(-90deg);
  /* IE 9 */
  -webkit-transform: rotate(-90deg);
  /* Chrome, Safari, Opera */
          transform: rotate(-90deg);
}

.rotate-180-counter-clock {
      -ms-transform: rotate(-180deg);
  /* IE 9 */
  -webkit-transform: rotate(-180deg);
  /* Chrome, Safari, Opera */
          transform: rotate(-180deg);
}

md-content {
  background: #FFFFFF;
}

.md-subheader {
  background-color: rgb(236, 236, 236);
}

md-list-item._md-button-wrap > .md-button:first-child .md-list-item-inner {
  width: auto;
}

md-input-container span.error {
  font-size: 14px;
  margin-top: 5px;
  display: inline-block;
  color: red;
}

.md-block .error span {
  color: red;
}

.slogan {
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
}

.stop-rows {
  cursor: pointer;
  padding: 10px 0;
}

.show-loader {
  margin: 20px 0;
}

#feedbackForm ng-messages {
  color: rgb(221, 44, 0);
  font-size: 12px;
}

.active .md-button {
  background: rgba(206, 206, 206, .24);
}

fieldset {
  padding: 12px;
}

/*Common*/


/*Utility*/

.error-text {
  color: red;
  font-size: 12px;
}

.md-errors-spacer {
  display: none;
}

.md-input-invalid .md-errors-spacer {
  display: block;
}

.block ~ .block {
  padding-top: 30px;
}

.block-header {
  padding: 16px 8px;
}

.block-body {
  padding: 0 8px;
}

.block-header md-checkbox, .block-header md-select {
  margin: 0 0 0 20px;
  color: rgba(0, 0, 0, .87);
}

.block-header md-select-value {
  padding: 0;
  min-height: 20px;
}

.block-header md-icon {
  margin-right: 8px;
}

/*Hide the asterisk created by angular*/
md-input-container label:not(.md-container-ignore).md-required:after, md-input-container:not(.md-input-has-value) md-select.ng-required:not(.md-no-asterisk) .md-select-value span:first-child:after, md-input-container:not(.md-input-has-value) md-select[required]:not(.md-no-asterisk) .md-select-value span:first-child:after, md-select.ng-required.ng-invalid:not(.md-no-asterisk) .md-select-value span:first-child:after, md-select[required].ng-invalid:not(.md-no-asterisk) .md-select-value span:first-child:after {
  content: "";
}

/*Utility Ends*/

/* Miscellanous */

.no-bottom-margin {
  margin-bottom: 0px;
}

.no-bottom-padding-hide-overflow {
  padding-bottom: 0px !important;
  overflow: hidden !important;
}

.padding-and-pointer {
  padding: 10px;
  cursor: pointer;
}

.full-width {
  width: 100%;
}

.interactive {
  cursor: pointer;
}

/* End Miscellanous */

/* reCAPTCHA */

.recaptcha-validation {
  color: rgb(221, 44, 0);
  font-size: 12px;
  line-height: 14px;
  padding-top: 5px;
}


/* End reCAPTCHA */


/*DatePicker*/

md-input-container.datepicker-input-container {
  display: block;
  min-width: 125px !important;
  padding-left: 0;
  padding-right: 0;
}

md-input-container.datepicker-input-container._md-datepicker-floating-label._md-datepicker-has-calendar-icon > label:not(.md-no-float):not(.md-container-ignore) {
  width: calc(100% - 40px);
  padding-left: 40px;
}

md-input-container.md-input-has-value.datepicker-input-container._md-datepicker-floating-label._md-datepicker-has-calendar-icon > label:not(.md-no-float):not(.md-container-ignore) {
  padding-left: 52px;
}

md-input-container.datepicker-input-container > md-datepicker .md-datepicker-triangle-button.md-button.md-icon-button {
  margin-right: 10px;
}

md-input-container.datepicker-input-container._md-datepicker-floating-label > md-datepicker .md-datepicker-button {
  margin: 0;
  top: 0;
  left: 2px;
  padding: 0;
  width: auto;
  height: auto;
  position: absolute;
  z-index: 1;
}

md-input-container.datepicker-input-container label, md-input-container.datepicker-input-container:not(.md-input-invalid).md-input-has-value label {
  padding-left: 50px;
  left: 0 !important;
}

md-input-container.datepicker-input-container md-datepicker .md-datepicker-calendar-pane {
  display: none;
}

md-input-container.datepicker-input-container md-datepicker .md-datepicker-input-container {
  width: 100%;
  padding-left: 36px;
  box-sizing: border-box;
  margin-left: 0;
}

.datepicker-input-container md-datepicker .md-datepicker-input-container input {
  max-width: none;
  min-width: 0;
}

.md-datepicker-calendar-icon {
  color: rgba(0, 0, 0, .54);
  margin: 0;
}

.md-datepicker-input-mask {
  height: 0;
}

.md-datepicker-input {
  font-size: 16px;
}


/*DatePicker Ends*/


/* Autocomplete */

md-autocomplete-title input:not(.md-input) {
  font-size: 14px;
  box-sizing: border-box;
  border: none;
  box-shadow: none;
  outline: none;
  background: transparent;
  width: 100%;
  padding: 0 15px;
  line-height: 40px;
  height: 40px;
}

md-autocomplete-title {
  background: rgba(255, 255, 255, .25);
}

md-autocomplete-title md-autocomplete-wrap button {
  position: relative;
  line-height: 20px;
  text-align: center;
  width: 30px;
  height: 30px;
  cursor: pointer;
  border: none;
  border-radius: 50%;
  padding: 0;
  font-size: 12px;
  background: transparent;
  margin: auto 5px;
}


/* Autocomplete Ends */


/*Hiding Elements until they are fully ready*/

md-sidenav {
  opacity: 0;
  z-index: 71;
}

body.isready md-sidenav {
  opacity: 1;
}

md-toolbar {
  opacity: 0;
}

.routeswidget-tab {
  opacity: 0;
}

body.isready .routeswidget-tab {
  opacity: 1;
}

body.isready md-toolbar {
  opacity: 1;
}

.main-content-wrapper {
  opacity: 0;
}

body.isready .main-content-wrapper {
  opacity: 1;
}

/*Bottom Sheet*/

md-bottom-sheet {
  -webkit-transform: translate3d(0, 0px, 0);
          transform: translate3d(0, 0px, 0);
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  border-top: 0;
}

.bottom-sheet-tab-loader path {
  stroke: rgba(255, 255, 255, .870588) !important;
}

body.nextdepartures md-bottom-sheet {
  max-height: calc(100% - 56px);
}

body.nextdepartures.came-from-widget md-bottom-sheet {
  min-height: calc(100% - 56px);
  transition: none;
}

body.nextdepartures.came-from-widget.delayed-is-ready md-bottom-sheet {
  transition: all .4s cubic-bezier(.25, .8, .25, 1);
}

body.tripplanning md-bottom-sheet {
  max-height: calc(100% - 104px);
}

body.tripplanning.itineraries.tall-window md-bottom-sheet {
  max-height: calc(66% - 80px);
}

.md-bottom-sheet-backdrop {
  display: none;
}

md-bottom-sheet .md-subheader {
  background-color: rgb(250, 250, 250);
}

.bottom-sheet-placeholder {
  z-index: 2;
  position: absolute;
  width: 100%;
  bottom: 0;
  padding: 0;
  cursor: pointer;
  color: rgba(255, 255, 255, .87);
  margin-top: 0;
}

.bottom-sheet-inner-placeholder {
  padding: 8px;
}

/* Prevent child icon buttons in the collapsed bottom sheet trigger from
   intercepting taps. On iOS VoiceOver, double-tap simulates a touch at
   the center of the focused element; without this, that touch can land
   on an icon button (e.g. alerts) instead of the parent trigger, opening
   the wrong dialog. pointer-events:none lets the touch pass through to
   the parent ng-click (showBottomSheet). The same buttons are fully
   accessible in the expanded bottom sheet view. */
#show-bottom-sheet-trigger:not([tabindex="-1"]) .md-icon-button {
  pointer-events: none;
}

.routeswidget-drawer-header input:placeholder-shown {
  font-size: 14px;
}

md-bottom-sheet .results-view-wrapper-header {
  cursor: pointer;
}


/*Bottom Sheet Ends*/


/*Top Toolbar*/

img.logo {
  height: 100%;
}

md-toolbar .active {
  background: rgba(206, 206, 206, .12);
}


/*Top Toolbar Ends*/

/*Navigation Menu*/

.menu-item {
  padding: 0px !important;
}

.menu-icon {
  padding-right: 32px;
}

/* Visual indicator for links that open in a new tab */
.external-link-icon {
  font-size: 16px !important; /* Match surrounding text size */
  margin-left: 4px;
  opacity: 0.7;
}

/*Navigation Menu Ends*/

/*SearchView*/

.search-view-wrapper {
  background: rgb(250, 250, 250);
  z-index: 3;
  width: 100%;
}

.routeswidget-drawer-header .Filters {
  padding-bottom: 4px;
}

.routeswidget-drawer-header .Filters md-input-container {
  margin: 2px 6px;
}

.routeswidget-drawer-header .Filters input,
.routeswidget-drawer-header .Filters md-select {
  background: rgba(255, 255, 255, .25);
  border: 1px solid rgba(0, 0, 0, 0.54);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7);
  border-radius: 2px;
}

.search-view-wrapper md-autocomplete md-autocomplete-wrap {
  border: 1px solid rgba(0, 0, 0, 0.54);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7) !important; /* WCAG 1.4.11 - overrides md-whiteframe-z1 */
  border-radius: 4px;
}

.routeswidget-drawer-header .Filters input:focus + label,
.routeswidget-drawer-header .Filters md-select:focus + span {
  opacity: 0;
}

.routeswidget-drawer-header .Filters input {
  padding-left: 10px;
}

.routeswidget-drawer-header .Filters md-select span {
  padding-left: 8px;
}

.routeswidget-drawer-header .Filters input,
.routeswidget-drawer-header .Filters input::placeholder,
.routeswidget-drawer-header .Filters md-select span {
  color: #fff;
  font-size: 16px;
}

md-autocomplete {
  background: rgba(255, 255, 255, .25);
}

.search-view-wrapper md-autocomplete.is-focused {
  background: rgb(255, 255, 255);
}

.search-view-wrapper md-autocomplete.is-focused {
  background: rgb(255, 255, 255);
}

.search-view-wrapper .search-icon {
  position: absolute;
  z-index: 2;
  top: 16px;
  left: 55px;
  fill: currentColor !important;
}

.search-view-wrapper .md-toolbar-tools {
  padding: 8px;
}

.search-view-wrapper .md-toolbar-tools-tripplanning {
  padding: 8px 8px 8px 0;
}

.tripplanning-autocomplete-column-row-wrapper .search-icon {
  position: absolute;
  z-index: 2;
  top: 8px;
  left: 15px;
}

.tripplanning-autocomplete-column-row-wrapper {
  position: relative;
}

.tripplanning-autocomplete-column-row-wrapper:nth-child(2) {
  margin-top: 8px;
}

.search-view-wrapper md-autocomplete md-autocomplete-wrap input {
  padding-left: 40px !important;
  color: #FFFFFF;
}

.search-view-wrapper md-autocomplete-title md-autocomplete-wrap input {
  padding-left: 60px !important;
  color: #FFFFFF;
}

.search-view-wrapper md-autocomplete.is-focused + .search-icon {
  color: rgba(0, 0, 0, .54);
}

.search-view-wrapper md-autocomplete.is-focused md-autocomplete-wrap input {
  color: #333333;
}

.search-view-wrapper md-autocomplete-wrap input::-webkit-input-placeholder {
  color: #EEEEEE;
}

.search-view-wrapper md-autocomplete-wrap input:-moz-placeholder {
  /* Firefox 18- */
  color: #EEEEEE;
}

.search-view-wrapper md-autocomplete-wrap input::-moz-placeholder {
  /* Firefox 19+ */
  color: #EEEEEE;
}

.search-view-wrapper md-autocomplete-wrap input:-ms-input-placeholder {
  color: #EEEEEE;
}

.search-view-wrapper md-autocomplete.is-focused input::-webkit-input-placeholder {
  color: rgba(0, 0, 0, .54);
}

.search-view-wrapper md-autocomplete.is-focused input:-moz-placeholder {
  /* Firefox 18- */
  color: rgba(0, 0, 0, .54);
}

.search-view-wrapper md-autocomplete.is-focused input::-moz-placeholder {
  /* Firefox 19+ */
  color: rgba(0, 0, 0, .54);
}

.search-view-wrapper md-autocomplete.is-focused input:-ms-input-placeholder {
  color: rgba(0, 0, 0, .54);
}

.search-view-wrapper md-autocomplete.not-focused button md-icon path {
  fill: #EEEEEE;
}

.search-view-wrapper.came-from-widget .md-toolbar-tools {
  padding-left: 16px;
  padding-right: 16px;
}


/*SearchView Ends*/


/*ResultsView*/

.results-view-wrapper {
  width: 100%;
  overflow: hidden;
  z-index: 2;
  position: relative;
}

.results-view-inner-wrapper {
  overflow: hidden;
}

.results-view-inner-wrapper md-content {
  overflow-x: hidden;
}

.street-view-360-desktop {
  width: 100%;
  height: 180px;
  display: none;
}

.street-view-360-mobile {
  width: 100%;
  height: 180px;
  display: none;
}

.street-view-static-image-mobile img {
  width: 100%;
}

.results-view-wrapper-header {
  color: #FFFFFF;
  padding: 8px;
  z-index: 3;
  /*sometimes the streetview does not work and an empty invisible div sits above the header element so z-index is req*/
}

.results-view-ptp-stop-pair {
  padding: 10px;
}
.results-view-ptp-routes {
  font-size: 14px;
  margin-left: 24px;
}
.results-view-ptp-table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 10px;
}
.results-view-ptp-table td {
  padding: 4px;
}
.results-view-ptp-table tr:nth-child(2n) {
  background-color: #dcdcdc;
}
.results-view-ptp-table tr:last-child {
  border-bottom: 1px solid black;
}

/*Remove the diagonal lines background that Datatables adds when Scroller is enabled*/
div.DTS div.dataTables_scrollBody {
  background: none !important;
}

.dataTables_wrapper {
  background-color: #FFFFFF;
}

#headway_table {
  margin-left: 0;
}

.headway-title-stop-number {
  font-weight: 500;
}

.headway-no-results {
  padding-top: 20px;
  padding-bottom: 20px;
}

.dataTables_scrollFoot table.dataTable.no-footer {
  border: none;
}

.stop-time {
  position: relative;
}

.stop-time .sa-cancelled {
  text-decoration: line-through;
  color: #979797;
}

.service-adjustment-icon {
  display: inline-block;
}

.dataTable .service-adjustment-icon {
  vertical-align: middle;
}

.datatable-scroll-arrow {
  pointer-events: none;
  position: absolute;
  right: -100px;
  top: 50%;
  width: 64px;
  height: 64px;
  background: rgba(0, 0, 0, .75);
  border-radius: 100%;
  -webkit-transition: right .25s;
     -moz-transition: right .25s;
      -ms-transition: right .25s;
       -o-transition: right .25s;
          transition: right .25s;
}

.datatable-scroll-arrow.visible {
  right: 20px;
  z-index: 2;
}

.datatable-scroll-arrow md-icon {
  font-size: 72px;
  color: white;
  text-shadow: 0 0 4px hsla(0, 0%, 0%, .75);
  font-weight: bold;
  margin-left: -3px;
  margin-top: -3px;
}

.service-adjustment-icon md-icon {
  font-size: 15px;
  color: red;
  font-weight: 700;
  width: 15px;
  height: 15px;
  min-width: inherit;
  min-height: inherit;
}

.line {
  color: #FFFFFF;
  padding: 0 5px;
  min-width: 24px;
  text-align: center;
}

.table-header-icons {
  line-height: 24px;
  text-align: right;
  margin-bottom: 4px;
}

.table-header-icons span img {
  width: 20px;
  margin-left: 8px;
  vertical-align: bottom;
}

.stop-time-icons {
  z-index: 1;
  position: relative;
}

.stop-time-icons span img {
  width: 20px;
  vertical-align: bottom;
  margin-left: 5px;
}

.DTFC_LeftWrapper {
  display: none;
}

.DTFC_LeftBodyLiner {
  border-top: 1px solid #E0E0E0;
}

.dataTables_wrapper th {
  min-width: 100px;
  white-space: nowrap;
  background-color: #FFFFFF;
  font-weight: 400 !important;
  border-bottom: 1px solid rgba(0, 0, 0, .12) !important;
}

.dataTables_scrollHeadInner th {
  padding: 10px 18px !important;
}

.dataTables_scrollHead caption {
  /*Hiding the caption from the view*/
  height: 0;
  overflow: hidden;
  width: 0;
}

.dataTables_wrapper.no-footer .dataTables_scrollBody {
  border-bottom: none !important;
}

table.dataTable thead th, table.dataTable thead td {
  text-align: right;
}

.dataTables_wrapper td {
  text-align: right;
  min-height: 75px !important;
  height: 75px !important;
  padding: 0 18px !important;
}

table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
  background-color: #EEEEEE;
}

.DTFC_LeftBodyWrapper, .DTFC_LeftHeadWrapper {
  box-shadow: rgba(0, 0, 0, .2) 0 2px 7px 0;
  background-color: white;
}

.print-time {
  display: none;
}

table caption {
  height: 0;
  overflow: hidden;
}

.DTFC_LeftHeadWrapper table th {
  border-bottom: none !important;
}

.dataTables_wrapper.no-footer .dataTables_scrollBody {
  border-bottom: none;
}

.accessibility-width {
  width: 55px;
}

.nextdepartures.routeheadway .routeswidget-tab, .nextdepartures.routestoptimes .routeswidget-tab, .nextdepartures.routeheadway .show-route-widget-menu {
  display: none;
}

.real-time-animation {
  transform: rotate(45deg);
  transform-origin: 5% 0;
  position: absolute;
  top: -11px;
  right: 0;
}

.real-time-icon {
  transform: rotate(45deg);
  color: rgb(0, 188, 180);
  font-size: 15px;
  font-weight: 700;
  width: 15px;
  height: 15px;
}

.icon-hidden {
  opacity: 0;
}

.material-icons + .real-time-animation {
  top: -13px;
}

.real-time-animation .circle {
  border-radius: 50%;
  background: transparent;
  border: 2px solid;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
  position: absolute;
  opacity: 0;
  animation: 2s infinite ease-in;
}

.no-animations .real-time-animation .circle {
  opacity: 1 !important;
  animation: none !important;
}

.real-time-animation .circle1 {
  width: 20px;
  height: 20px;
  animation-name: circle1;
}

.real-time-animation .circle2 {
  top: 4px;
  left: 3px;
  width: 14px;
  height: 14px;
  animation-name: circle2;
}

.real-time-animation .circle3 {
  top: 8px;
  left: 6px;
  width: 8px;
  height: 8px;
  animation-name: circle3;
}

@keyframes circle1 {
  0%, 25%, 50%, 100% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
}

@keyframes circle2 {
  0%, 25%, 100% {
    opacity: 0;
  }
  50%, 75% {
    opacity: 1;
  }
}

@keyframes circle3 {
  0%, 100% {
    opacity: 0;
  }
  25%, 50%, 75% {
    opacity: 1;
  }
}

.itinerary-details-fares-dialog {
  padding: 0px !important;
}

.itinerary-details-fares-table {
  padding: 20px;
  width: 100%;
}

.itinerary-details-fares-table th {
  text-align: left;
  min-width: 75px;
}

.itinerary-details-fares-table tr {
  padding-top: 10px;
  padding-bottom:10px;
}

.itinerary-begins-in-past p {
  color: red;
  font-size: 0.9em;
}

.itinerary-details-section {
  padding: 20px;
}

.itinerary-details-leg {
  min-height: 60px;
  position: relative;
}

.leg-line {
  border-left-width: 4px;
  position: relative;
}

.leg-line.walking {
  border-left-style: dotted;
}

.leg-line.walking-leg.walking-instructions-disabled {
  color: white !important;
}

.leg-line.dummy-same-stop {
  border-color: transparent;
}

.leg-line.bus, .leg-line.stay-in-seat-transfer {
  border-left-style: solid;
}

.leg-type-bus {
  padding-top: 20px;
}

.itinerary-details-end-circle {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: -6px;
  background: #CCCCCC;
}

.leg-start-circle {
  width: 8px;
  height: 8px;
  border: 6px solid;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: -12px;
  background: #FFFFFF;
  transform: rotate(-45deg);
}

.stay-in-seat-transfer-icon {
  width: 24px;
  height: 24px;
  border: 2px solid;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: -16px;
  background: #FFFFFF;
}

.stay-in-seat-transfer-icon > md-icon {
  width: 18px;
  height: 18px;
  font-size: 21px;
  line-height: 24px;
  margin-left: 2px;
}

.itinerary-start-marker {
  position: absolute;
  width: 30px;
  height: 30px;
  top: -7px;
  left: -17px;
  color: #006600;
  background: #FFFFFF;
}

.itinerary-end-marker {
  position: absolute;
  width: 30px;
  height: 30px;
  top: -7px;
  left: -13px;
  color: #800000;
  background: #FFFFFF;
}

.leg-description .line {
  /*vertical-align: super;*/
}

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

.leg-description > div {
  margin-bottom: 10px;
}

.leg-title {
  font-weight: 500;
  font-size: 15px !important;
}

.leg-notice {
  color: #e00;
}

.toggleContent {
  display: none;
}

.expanded .collapsed-icon {
  display: none;
}

.collapsed .expanded-icon {
  display: none;
}

.walking-instruction {
  border-botton: 1px solid #CCCCCC;
  padding: 5px 0;
}

/* Native button reset for walking instruction toggle */
button.walking-instruction-toggle {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
}

.stoproutes-results v-pane, .routesWidgetLines v-pane {
  transition: border-width .1s linear;
  border-width: 0 0 1px 5px !important;
}

.stoproutes-results v-pane.selected, .stoproutes-results v-pane:hover, .stoproutes-results v-pane:focus-within, .routesWidgetLines v-pane:hover, .routesWidgetLines v-pane:focus-within, .routesWidgetLines v-pane.selected {
  border-width: 0 0 1px 10px !important;
}

v-accordion.stoproutes-results.stay-open v-pane-content {
  max-height: none !important;
}

v-accordion.stoproutes-results.stay-open v-pane-content > div {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  -webkit-transition: all .5s;
          transition: all .5s;
}

v-accordion.stoproutes-results.stay-open v-pane-header > md-icon.arrow-down, v-accordion.stoproutes-results.stay-open v-pane-header > md-icon.arrow-up {
  display: none;
}

.stoproutes-results button {
  margin-right: 0;
}

.real-time-vehicle-info {
  z-index: 99;
  position: relative;
  width: 0px;
  display: inline;
  padding-left: 10px;
}

.real-time-vehicle-info md-icon {
  color: inherit;
  cursor: pointer;
}

.toggle-button {
  color: #FFFFFF;
}

.repeated-item md-switch.md-primary .md-bar {
  background-color: rgb(158, 158, 158);
}

.repeated-item md-switch.md-primary .md-thumb {
  background-color: rgb(250, 250, 250);
}

.repeated-item.selected md-switch.md-primary .md-bar {
  background-color: rgba(47, 52, 143, .5);
}

.repeated-item.selected md-switch.md-primary .md-thumb {
  background-color: rgb(47, 52, 143);
}


/*ResultsView*/


/*Info Popup*/

.main-content-wrapper md-toast {
  padding: 0;
  z-index: 79;
}

md-toast .md-toast-content {
  max-height: none;
}

.save-alert-toast .md-button {
  min-width: 60px;
  color: #333 !important;
}

.main-content-wrapper md-toast .info-popup {
  height: auto;
  background: #FFFFFF;
  color: rgba(0, 0, 0, .87);
  padding: 0;
}

.close-toast {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

.real-time-selected {
  font-weight: bold;
}


.stop-info-window-real-time-info {
  border-width: 1px 0 0;
  border-style: solid;
  border-color: rgba(0, 0, 0, .12);
  width: 100%;
  padding: 10px 0;
}

.stop-window-vehicle-icon {
  font-size: 32px;
  height: 32px;
  width: 32px;
  margin: 0px;
}

.vehicle-status.stop-window-vehicle-status {
  padding: 0 5px;
  color: #FFFFFF;
  margin-left: 0px;
}

.vehicle-status.early, .vehicle-status.onTime {
  background: green;
}

.vehicle-status.late {
  background: red;
}

.vehicle-status.na {
  background: #333333;
}

.vehicle-load-graph {
  position: relative;
}

.vehicle-load-graph div {
  text-align: center;
  font-weight: 600;
}

.vehicle-label-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Signage table structure for Direction/Time display */
.signage-table {
  width: calc(100% - 40px);
  margin: 0 20px;
  border-collapse: collapse;
}

.signage-header th {
  padding: 10px 0;
  font-size: 15px;
  font-weight: 500;
  text-align: left;
}

.signage-header th + th,
.signage-body td + td {
  padding-left: 10px;
}

.signage-body td {
  padding: 0;
  line-height: 22px;
}

.signage-display .schedule-btn {
  margin: 10px;
}

.signage-display > .stop-info-details-section {
  text-align: center;
  padding-left: 50px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.stop-time-display {
  white-space: nowrap;
}

.stop-time-row-display {
  margin-left: 10px; 
  padding-bottom: 5px;
}

.stop-info-details-section > button {
  display: flex;
  width: calc(100% - 10px);
  justify-content: center;
}

.bus-info-window-body-adherance {
  color: white;
  padding: 0 5px;
}
/*Info Popup Ends*/

/*Toast Tempalte*/
.toast-template {
  max-width: 100%;
  line-height: 20px;
}

.toast-template.error md-icon {
  color: #c52a2a;
  margin-right: 8px;
}

.toast-template.success md-icon {
  color: #0EA261;
  margin-right: 8px;
}

.toast-template.warn md-icon {
  margin-right: 8px;
}

/*Toast Tempalte*/


/* Language Selector  */

.language-flag {
  vertical-align: bottom;
  margin-right: 8px;
}


/* End Language Selector */


/* Phone Number styling Start */

.phone-input input::-webkit-input-placeholder {
  color: transparent;
}

.phone-input input::-moz-placeholder {
  color: transparent;
}

.phone-input input:-ms-input-placeholder {
  color: transparent;
}

.phone-input input:-moz-placeholder {
  color: transparent;
}


/* Phone Number styling End */


/*Bottom-Sheet*/

.bounce-up-arrow {
     -moz-animation: bounceup 2s infinite;
  -webkit-animation: bounceup 2s infinite;
          animation: bounceup 2s infinite;
}

@-moz-keyframes bounceup {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
         transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(30px);
         transform: translateY(30px);
  }
  60% {
    -moz-transform: translateY(15px);
         transform: translateY(15px);
  }
}

@-webkit-keyframes bounceup {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
            transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
            transform: translateY(-15px);
  }
}

@keyframes bounceup {
  0%, 20%, 50%, 80%, 100% {
       -moz-transform: translateY(0);
        -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  40% {
       -moz-transform: translateY(10px);
        -ms-transform: translateY(10px);
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  60% {
       -moz-transform: translateY(5px);
        -ms-transform: translateY(5px);
    -webkit-transform: translateY(5px);
            transform: translateY(5px);
  }
}


/*Bottom-Sheet End*/


/*On Boarding*/

.onboarding {
  background: transparent;
  box-shadow: none;
  height: 100%;
  max-height: 100%;
}

.onboarding md-tabs-wrapper {
  display: none;
}

.onboarding md-tab-content {
  text-align: center;
  background: transparent;
  color: #FFFFFF;
}

.onboarding md-tab-content > img {
  margin: 20px 0;
}

.onboarding-heading {
  padding-top: 8px;
}

.onboarding-dialog {
  width: 100%;
  max-width: 100%;
}

.onboarding .dots {
  margin: 30px 0 10px 0;
  cursor: pointer;
}

.onboarding .dots span {
  width: 10px;
  height: 10px;
  background: #CCCCCC;
  border-radius: 50%;
  margin: 0 5px;
  display: inline-block;
  vertical-align: middle;
}

.onboarding .dots .selectedScreen {
  width: 18px;
  height: 18px;
  background: #F0F0F0;
}

.skip-button {
  margin-right: 20px !important;
}

body.onboarding-dialog-is-showing .main-content-wrapper, body.onboarding-dialog-is-showing .desktoptoolbar-view-wrapper, body.onboarding-dialog-is-showing .routeswidget-tab {
  -webkit-filter: blur(5px);
     -moz-filter: blur(5px);
       -o-filter: blur(5px);
      -ms-filter: blur(5px);
          filter: blur(5px);
}

.onboarding md-select .onboarding-language-select-label {
  color: white !important;
}

.onboarding-chevron-class {
  position: absolute;
  color: white;
  top: 50%;
  width: 100px;
  height: 100px;
  cursor: pointer;
  z-index: 1;
  margin-top: -48px;
  font-size: 100px;
}

.onboarding-chevron-class.chevron-right {
  right: 8px;
}

.onboarding-chevron-class.chevron-left {
  left: 8px;
}

/*On Boarding Ends*/


/*MapView starts*/

.map-view-wrapper {
  z-index: 1;
  /*subtracting the height of the search bar*/
  height: calc(100% - 120px);
  width: 100%;
  position: absolute;
  /*Taking into account for the height of Bottom-sheet Placeholder*/
  top: 56px;
  left: 0;
}

.search-here-wrapper {
  position: absolute;
  top: 50px;
  left: 50%;
  z-index: 1;
  margin-left: -70px;
}

.search-here-wrapper.ng-enter, .search-here-crosshair.ng-enter {
  transition: .25s linear all;
  opacity: 0;
}

.search-here-wrapper.ng-enter.ng-enter-active, .search-here-crosshair.ng-enter.ng-enter-active {
  opacity: 1;
}

.search-here-wrapper.ng-leave, .search-here-crosshair.ng-leave {
  transition: .25s linear all;
  opacity: 1;
}

.search-here-wrapper.ng-leave.ng-leave-active, .search-here-crosshair.ng-leave.ng-leave-active {
  opacity: 0;
}

.search-here-crosshair {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -12px;
  margin-left: -12px;
  z-index: 1;
  background: rgba(0, 120, 255, .35);
  width: 24px;
  height: 24px;
  border-radius: 100%;
  border: 1px solid rgba(0, 120, 255, .35);
}

.map-view-inner-wrapper, .angular-google-map, .angular-google-map-container {
  height: 100%;
}

.custom-control {
  cursor: pointer;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);
}

.custom-control-inner-wrapper label {
  cursor: pointer;
}

.custom-control-inner-wrapper input {
  margin: 0;
  vertical-align: bottom;
}

.custom-control-location md-icon {
  color: #FFFFFF;
}


/* Map View options (Traffic/Satellite grouped together) */

.custom-control-map-options {
  display: none;
}

.custom-control-map-options .custom-control-inner-wrapper {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 8px;
  background: #ffffff;
  border-radius: 2px;
}

.custom-control-map-options .custom-control-option {
  display: flex;
  align-items: center;
  gap: 4px;
}

.custom-control-map-options .custom-control-option label {
  cursor: pointer;
  font-size: 11px;
  font-family: Roboto, Arial, sans-serif;
}

.custom-control-map-options .custom-control-option input[type="checkbox"] {
  cursor: pointer;
}


/*Trip Planning*/

.custom-control-trip-planning {
  bottom: 23px !important;
  margin-right: 10px;
  padding: 10px;
  border-radius: 50%;
  background: #FFFFFF;
}

.custom-control-trip-planning md-icon {
  color: inherit;
}

.clickable-list-item {
  outline: none;
}

md-list-item.active {
  background: rgba(206, 206, 206, .24);
}

button.view-details,
.view-details {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .010em;
  line-height: 24px;
  opacity: 0;
  height: 0;
  width: 0;
  position: absolute;
  margin-top: 10px;
  /* Button reset for native <button> element */
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
}

.active .view-details {
  opacity: 1;
  height: auto;
  width: auto;
  position: relative;
}


/*Hiding the Zoom and the StreetView icon on mobile*/
.gm-style .gmnoprint .gmnoprint, .gm-svpc {
  display: none;
}

/*MapView Ends*/

/*Social Media Icons Starts*/

.social-media-icons {
  margin-bottom: 20px;
  font-size: 14px;
}

.social-media-icons a {
  padding: 5px 5px 5px 26px;
  color: #FFFFFF !important;
  border-radius: 3px;
  margin-right: 20px;
  display: inline-block;
}

.twitter-icon {
  background: url("../Images/twitter.png") no-repeat 5px 5px #1B95E3;
}

.facebook-icon {
  background: url("../Images/facebook.png") no-repeat 1px 1px #395C98;
}


/*Social Media Icons Ends*/


/*Route Widget Starts*/

.routes-widget-search-filter {
  position: absolute;
  top: 11px;
  width: 130px;
  padding-left: 5px;
  z-index: 2;
  left: 56px;
  height: 34px;
  border-radius: 2px;
  border: none;
}

#routeswidget_drawer_content .repeated-item {
  border-bottom: 1px solid #D1D1D1;
  cursor: pointer;
}

.route-widget-border > div {
  width: 5px;
  background: #BBBBBB;
  transition: all .1s linear;
}

.selected .route-widget-border > div {
  width: 10px;
}

.line-result-abbr {
  margin-right: 10px;
  font-size: 18px;
}

.line-result-name {
  margin-top: 10px;
}

.line-disabled {
  opacity: 0.7;
  pointer-events: none;
}

.ellipsis-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toast-header-row-two {
  max-width: 120px;
  padding-right: 5px;
}

.line-result-direction md-switch {
  margin: 5px;
}

.line-result-direction md-switch:focus {
  outline: -webkit-focus-ring-color auto 5px; /* Only adding focus outline for Chrome to keep focus consistent, other browsers don't show focus outline */
}

md-switch.md-switch-reverse-label .md-container {
  order: 2;
  margin-left: 8px;
}

.animated {
  -webkit-animation-duration: 1s;
          animation-duration: .3s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.routeswidget-tab {
  font-size: 1.2rem;
  line-height: 1.2rem;
  text-align: center;
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 50%;
  box-shadow: -2px -2px 5px rgba(0, 0, 0, .3);
     -moz-transform: rotate(-90deg) translateX(50%) translateY(-100%);
      -ms-transform: rotate(-90deg) translateX(50%) translateY(-100%);
       -o-transform: rotate(-90deg) translateX(50%) translateY(-100%);
  -webkit-transform: rotate(-90deg) translateX(50%) translateY(-100%);
          transform: rotate(-90deg) translateX(50%) translateY(-100%);
     -moz-transform-origin: 100% 0 0;
      -ms-transform-origin: 100% 0 0;
       -o-transform-origin: 100% 0 0;
  -webkit-transform-origin: 100% 0 0;
          transform-origin: 100% 0 0;
  padding: .5rem .75rem;
  font-weight: 700;
  z-index: 7;
  color: rgba(255, 255, 255, .87);
  transition: top 0.3s, transform 0.3s;
}

.routeswidget-tab .routeswidget-tab-text-short {
  display: none;
}

@media (max-height: 475px) {
  .routeswidget-tab .routeswidget-tab-text {
    display: none;
  }

  .routeswidget-tab .routeswidget-tab-text-short {
    display: inline;
  }
}

@media (min-width: 960px) and (max-height: 675px) {
  .routeswidget-tab {
       -moz-transform: rotate(-90deg) translateY(-100%);
        -ms-transform: rotate(-90deg) translateY(-100%);
         -o-transform: rotate(-90deg) translateY(-100%);
    -webkit-transform: rotate(-90deg) translateY(-100%);
            transform: rotate(-90deg) translateY(-100%);
    top: 75px;
  }
}

@media (max-height: 525px) and (min-width: 960px) {
  .routeswidget-tab .routeswidget-tab-text {
    display: none;
  }

  .routeswidget-tab .routeswidget-tab-text-short {
    display: inline;
  }
}

.routeswidget-open {
          animation-name: hiderouteswidgettab;
  -webkit-animation-name: hiderouteswidgettab;
}

@keyframes hiderouteswidgettab {
  0% {
    transform: rotate(-90deg) translateX(50%) translateY(-95%);
  }
  30% {
    transform: rotate(-90deg) translateX(50%) translateY(-100%);
  }
  100% {
    transform: rotate(-90deg) translateX(50%) translateY(100%);
  }
}

.routeswidget-close {
          animation-name: showrouteswidgettab;
  -webkit-animation-name: showrouteswidgettab;
}

@keyframes showrouteswidgettab {
  0% {
    transform: rotate(-90deg) translateX(50%) translateY(0%);
  }
  80% {
    transform: rotate(-90deg) translateX(50%) translateY(-100%);
  }
  100% {
    transform: rotate(-90deg) translateX(50%) translateY(-95%);
  }
}

.routeswidget-view-wrapper md-sidenav {
  top: 66px;
}

.routeswidget-message {
  text-align: center;
  font-size: 13px;
  color: white;
  background-color: red;
  font-weight: bold;
  top: 10px;
}

.remark-exist-icon {
  padding-left:0;
  margin-left:0;
  border:none;
  border-left:none;
  background-color:transparent;
}

/*Route Widget Ends*/



/*Session Expiry Panel Starts*/

.session-expiry-dialog {
  background: white;
  border-radius: 4px;
  box-shadow: 0 7px 8px -4px rgba(0, 0, 0, .2),
  0 13px 19px 2px rgba(0, 0, 0, .14),
  0 5px 24px 4px rgba(0, 0, 0, .12);
  width: 500px;
}

/*Session Expiry Panel Ends*/



/*Dialog*/

.md-dialog-is-showing md-datepicker {
  margin-right: 0;
}

.largeWidthDialog {
  width: 65%;
  max-width: 65%;
  max-height: 80%;
}


/*Dialog*/


/*Generic Alerts*/

v-accordion {
  display: block;
}

v-pane {
  display: block;
  padding: 16px;
  overflow: hidden;
  border-bottom: 1px solid #E6E6E6;
}

v-pane:last-of-type {
  border-bottom: none;
}

.itinerary-details-section v-pane {
  padding: 0;
  border-bottom: none;
}

.scheduled-stop-subscriptions-title {
  padding-top: 8px;
  padding-bottom: 8px;
}

.stop-schedule-alerts v-pane {
  padding: 0;
}

.stop-schedule-alerts v-pane.is-expanded {
  background: #F5F5F5;
}

.stop-schedule-alerts v-pane-content, .stop-schedule-alerts v-pane-header {
  padding: 0 16px;
}

v-pane-header {
  display: block;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

v-pane-header:focus {
  outline: none;
}

v-pane-content {
  display: block;
  position: relative;
  overflow: hidden;
  max-height: 0;
  padding: 0 13px;
}

v-accordion.disable-animation v-pane v-pane-content {
          transition: none !important;
  -webkit-transition: none !important;
}

v-accordion v-pane-content > div {
  opacity: 0;
  -webkit-transform: translate3d(0, 30px, 0);
          transform: translate3d(0, 30px, 0);
  -webkit-transition: all .5s;
          transition: all .5s;
}

v-pane.is-expanded v-pane-content > div {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  -webkit-transition: all .5s;
          transition: all .5s;
}

v-pane-content > div > div {
  padding: 20px 0 0 0;
  line-height: 26px;
}

v-accordion .line-name {
  font-size: 20px;
}

v-accordion .line-abbr {
  font-size: 27px;
  margin-right: 10px;
  padding: 5px;
  background: #CCCCCC;
  min-width: 50px;
  text-align: center;
  color: #FFFFFF;
}

.effective-date {
  background: rgba(222, 222, 222, .47);
  padding: 2px 4px;
}

.is-expanded .arrow-up {
  display: inline-block;
}

.is-expanded .arrow-down {
  display: none;
}

.arrow-up {
  display: none;
}

v-accordion md-chips.md-default-theme .md-chips, md-chips .md-chips {
  box-shadow: none;
  min-width: 70px;
}

.is-expanded .general-alert-title {
  font-weight: 700;
}

.generic-route-alert-list {
  padding: 0;
}

.generic-route-alert-list li {
  margin: 10px 0;
  line-height: 24px;
}

.my-alerts md-list {
  padding: 0;
}

.subscription-status {
  background: red;
  color: #FFFFFF;
  margin: 0 8px;
  padding: 4px;
  font-size: 13px;
}

.subscription-status.subscribed {
  background: green;
}

.row-alert {
  padding: 5px 8px;
  border-bottom: 1px solid rgba(0,0,0,.12);
}

.row-alert md-icon {
  margin-right: 8px;
}

div.alerts-dialog-icons {
  margin-right: 20px;
}

/* TransitNow Activation Page */
div.activation-page {
  line-height: 0.9;
  color: var(--theme-accent-500);
  display: flex;
  align-items: center;
  font-size: 18px;
}

div.activation-page img {
  margin: 10px;
  vertical-align: middle;
}

div.activation-page a, a:hover, a:visited {
  font-weight: bold;
  text-decoration: underline;
  color: var(--theme-accent-500);
}

/*Generic Alerts*/


/*Multiple Dialog*/
.md-dialog-container + .md-dialog-container {
  z-index: 84;
}

/*Multiple Dialog End*/


/* My Profile*/

.modify-passwords-container {
  -webkit-transition: opacity .5s ease-in-out;
     -moz-transition: opacity .5s ease-in-out;
      -ms-transition: opacity .5s ease-in-out;
       -o-transition: opacity .5s ease-in-out;
          transition: opacity .5s ease-in-out;
}

.modify-passwords-container.ng-enter {
  opacity: 0;
}

.modify-passwords-container.ng-enter.ng-enter-active {
  opacity: 1;
}

.modify-passwords-container.ng-leave {
  opacity: 1;
}

.modify-passwords-container.ng-leave.ng-leave-active {
  opacity: 0;
}

.suspension-bar {
  background: red;
  color: #FFFFFF;
}


/*  End My Profile */

/*Show horizontal scrollbar when screen is less than 768px wide*/
@media only screen and (max-width: 767px) {
  .itinerary-details-fares-dialog::-webkit-scrollbar {
    -webkit-appearance: none;
  }
  .itinerary-details-fares-dialog::-webkit-scrollbar:vertical {
    width: 12px;
  }
  .itinerary-details-fares-dialog::-webkit-scrollbar:horizontal {
    height: 12px;
  }
  .itinerary-details-fares-dialog::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .5);
    border-radius: 10px;
    border: 2px solid #ffffff;
  }
  .itinerary-details-fares-dialog::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #ffffff;
  }
}

/*xs*/

@media only screen and (max-width: 599px) {
  md-dialog.onboarding .onboarding-language-select-label {
    display: none;
  }
  /*Location*/
  .custom-control-location {
    bottom: 79px !important;
    margin-right: 10px;
    padding: 10px;
    border-radius: 50%;
    background: inherit;
  }
  .dataTables_paginate > span {
    display: none;
  }
  .schedule-btn{
    width: 98%;
  }
  .signage-display .schedule-btn {
    width: 98%;
    margin: 10px 0;
    background: rgba(158,158,158,.2);
  }

  .row-alert .md-button {
    width: 100%;
  }
}


/*gt-xs*/

@media only screen and (min-width: 600px) {
}


/*sm*/

@media only screen and (min-width: 600px) and (max-width: 959px) {
  /*Location*/
  .custom-control-location {
    bottom: 79px !important;
    margin-right: 10px;
    padding: 10px;
    border-radius: 50%;
    background: inherit;
  }
  .schedule-btn{
    width: 98%;
  }
}


/*Up to SM*/

@media only screen and (max-width: 959px) {
  /* .tripplanning-options-datepicker-wrapper md-datepicker button.md-datepicker-button {
    margin-left: -6px;
  } */
  .map-view-wrapper.animating {
    /*-webkit-transition: height 1s ease-out;
    -moz-transition: height 1s ease-out;
    -ms-transition: height 1s ease-out;
    -o-transition: height 1s ease-out;
    transition: height 1s ease-out;*/
  }
  body.came-from-widget .map-view-wrapper {
    visibility: hidden;
  }
  body.came-from-widget.delayed-is-ready .map-view-wrapper {
    visibility: visible;
  }
  .custom-control-location.came-from-widget {
    bottom: 19px !important;
  }
  .bottom-sheet-placeholder.visible {
    height: auto;
  }
  #headway_table_paginate {
    float: none !important;
  }
  #headway_table_wrapper .pagination .dataTables_paginate {
    position: fixed;
    margin-bottom: 4px;
    bottom: 0;
  }
  #headway_table_wrapper .pagination {
    height: 53px;
  }
  .onboarding-chevron-class {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    text-transform: none;
    width: 1px;
  }

  .headway-column {
    min-width: 0px !important;
    width: 90vw !important;
    white-space: normal !important;
    text-overflow: ellipsis !important;
    padding: 10px 5px;
  }
}

@media only screen and (min-width: 0) and (max-width: 959px) and (orientation: landscape) {
  .md-toolbar-tools {
    height: 56px;
    max-height: 56px;
  }
  .md-toolbar-tools-tripplanning {
    height: 148px;
    max-height: 148px;
  }
}


/*gt-sm*/

@media only screen and (min-width: 960px) {
  #headway_table_wrapper .pagination .dataTables_paginate {
    margin-bottom: 4px;
    position: fixed;
    bottom: 9px;
  }
  .custom-control-location md-icon {
    color: rgba(0, 0, 0, .54);
  }
  .routeswidget-view-wrapper md-backdrop {
    display: none;
  }
  .main-content {
    padding: 8px;
  }
  .search-view-wrapper {
    max-width: 460px;
  }
  .search-view-wrapper .md-toolbar-tools {
    padding: 0 16px;
  }
  .search-view-wrapper .md-toolbar-tools-tripplanning {
    padding: 8px 8px;
  }
  .search-view-wrapper .search-icon {
    left: 30px;
    top: 20px;
  }
  .tripplanning-autocomplete-column-row-wrapper .search-icon {
    left: 15px;
    top: 8px;
  }
  .results-view-wrapper {
    margin-top: 8px;
    max-width: 460px;
  }
  .nextdepartures.routeheadway .results-view-wrapper {
    max-width: none;
  }
  .routes-widget-search-filter {
    top: 16px;
    width: 190px;
  }
  .headway-minimized #headway_table_wrapper {
    display: none;
  }
  .results-view-wrapper.headway-minimized {
    width: 460px;
  }
  .repeated-item:hover .route-widget-border > div {
    width: 10px;
    transition: all .1s linear;
  }
  .routeswidget-view-wrapper md-sidenav {
    top: 72px;
  }
  .main-content-wrapper md-toast {
    width: 600px;
    left: 50%;
    margin-left: -300px;
  }
  .main-content-wrapper md-toast .md-toast-content {
    max-height: inherit;
  }
  .map-view-wrapper {
    height: 100% !important;
    top: 0 !important;
  }
  .custom-control-trip-planning {
    display: none;
  }
  .custom-control-map-options {
    bottom: 24px !important;
    right: 50px !important;
    display: block;
  }
  .custom-control-location {
    margin-right: 10px;
    padding: 2px;
    border-radius: 2px;
    background-color: #FFFFFF !important;
  }
  .custom-control-location.came-from-widget {
    bottom: 25px !important;
  }
  .gm-style .gmnoprint .gmnoprint, .gm-svpc {
    display: block;
  }
  .came-from-widget .gm-style .gmnoprint .gmnoprint, .came-from-widget .gm-svpc {
    display: none !important;
  }
  .DTFC_LeftWrapper {
    display: block;
  }
  .routesWidgetContainer {
    display: flex;
  }
}


/*md*/

@media only screen and (min-width: 960px) and (max-width: 1279px) {
}


/*gt-md*/

@media only screen and (min-width: 1280px) {
}


/*lg*/

@media only screen and (min-width: 1280px) and (max-width: 1279px) {
}


/*gt-lg*/
@media only screen and (min-width: 1920px) {
}

@media print {
  @page {
    size: auto;
    margin: 20mm 20mm 20mm 20mm;
  }
  html, body {
    overflow: visible !important;
    height: auto !important;
    background-color: #FFFFFF !important;
  }
  .results-view-wrapper {
    display: block !important;
    position: relative !important;
    top: 0;
    box-shadow: none !important;
    order: 2;
  }
  .map-view-wrapper {
    top: 0 !important;
    display: block !important;
    position: relative !important;
    order: 1;
  }
  .main-content-wrapper {
    display: block !important;
    overflow: visible !important;
  }
  .main-content {
    overflow: visible !important;
    page-break-after: always;
  }
  .results-view-wrapper-header md-icon {
    display: none;
  }
  .routeswidget-tab, .bottom-sheet-placeholder, .search-view-wrapper, .md-subheader, .street-view-container {
    display: none !important;
  }
  .custom-control {
    display: none;
  }
  .desktoptoolbar-view-wrapper {
    display: none;
  }
  .results-view-wrapper-header {
    display: none;
  }
  body.itinerarydetails {
    display: block !important;
  }
  body.itinerarydetails .itinerary-details-section, body.itinerarydetails div.main-content, body.itinerarydetails .results-view-inner-wrapper {
    display: block;
  }
  div.itinerary-details-leg, div.leg-description {
    page-break-inside: avoid;
    page-break-after: auto;
  }
  body[browser="chrome"].itinerarydetails .results-view-inner-wrapper {
    zoom: 135%;
  }
  body[browser="firefox"].itinerarydetails .map-view-wrapper {
    transform-origin: left top;
  }
  body[browser="firefox"].itinerarydetails .results-view-wrapper {
    overflow: visible !important;
  }
  body[browser="firefox"].itinerarydetails .results-view-inner-wrapper {
    overflow: visible !important;
  }
}

md-autocomplete input:not(.md-input) {
  font-size: 16px;
}

md-autocomplete.search-autocomplete input:not(:focus),
md-autocomplete.tripplanning-destination-autocomplete input:not(:focus),
md-autocomplete.tripplanning-origin-autocomplete input:not(:focus) {
  text-shadow: 0 0 3px #000;
}

md-input-container.trip-planner-input-container {
  margin: 5px 0;
}

md-input-container.trip-planner-input-container,
.md-datepicker-input {
  font-size: 14px;
}

md-input-container.trip-planner-input-container .md-input {
  color: inherit;
  text-align: center;
}

md-input-container.trip-planner-input-container md-select:not([disabled]):focus .md-select-value {
  color: inherit;
}

md-input-container.trip-planner-input-container.datepicker-input-container {
  min-width: 60px !important; /* Using !important to override another !important =/ */
}

md-input-container.trip-planner-input-container.datepicker-input-container md-datepicker .md-datepicker-input-container {
  background-color: inherit; /* Angular MD sets this CSS rule 'background: none;', which resets the BG color to the browser's default and looks awful... */
  padding-left: 0;
}

md-dialog.tripplanning-options-simple-dialog {
  width: 350px;
}

md-dialog.tripplanning-options-simple-dialog md-input-container input {
  color: #000;
}

/* WCAG 1.4.11 - Dialog form field underlines must meet 3:1 contrast */
md-dialog md-input-container .md-input {
  border-bottom-color: rgba(0, 0, 0, 0.54) !important;
}

md-dialog md-input-container.md-input-focused .md-input {
  border-bottom-color: inherit !important;
}

md-dialog .md-datepicker-input-container {
  border-bottom-color: rgba(0, 0, 0, 0.54) !important;
}

/* ============================================================
   WCAG 2.4.7 - Focus Visible
   Generic keyboard focus indicators for accessibility compliance.

   All interactive elements must have a visible focus indicator
   when navigated via keyboard.

   Design:
   - Blue (#005fcc) outline on light backgrounds (6.5:1 on white)
   - White (#FFFFFF) outline on dark backgrounds
   - 2px solid outline for clear visibility

   Customer overrides can replace colors via outline-color in
   their Override CSS file.
   ============================================================ */

/* --- Global Focus Indicator --- */

*:focus-visible {
  outline: 2px solid #005fcc !important;
  outline-offset: 2px !important;
}

/* Fallback for browsers without :focus-visible support */
@supports not selector(:focus-visible) {
  a:focus,
  button:focus,
  input:focus,
  select:focus,
  textarea:focus,
  [tabindex]:focus,
  [role="button"]:focus,
  [role="link"]:focus,
  [role="tab"]:focus,
  [role="checkbox"]:focus,
  [role="option"]:focus,
  [role="combobox"]:focus,
  md-checkbox:focus {
    outline: 2px solid #005fcc !important;
    outline-offset: 2px !important;
  }
}

/* --- Override Focus Suppression from Reference CSS --- */

.clickable-list-item:focus-visible,
v-pane-header:focus-visible,
md-autocomplete-title input:not(.md-input):focus-visible {
  outline: 2px solid #005fcc !important;
  outline-offset: 2px !important;
}

/* --- Tab Focus Indicators (Issues #15, #27) --- */

md-tab-item:focus-visible,
md-tab-item.md-focused {
  outline: 2px solid #005fcc !important;
  outline-offset: 0px !important;
}

/* WCAG 1.4.3 - Inactive tab text must meet 4.5:1 contrast minimum.
   Angular Material uses rgba(0,0,0,0.54) (~4.48:1) — increase to 0.65 (~7:1).
   !important needed to override Angular Material inline theme styles. */
md-tab-item:not(.md-active) {
  color: rgba(0, 0, 0, 0.65) !important;
}

/* --- List Item / Clickable Item Focus (Issues #50, #64, #75) --- */

md-list-item:focus-visible,
md-list-item .md-button:focus-visible,
md-list-item .md-list-item-inner:focus-visible {
  outline: 2px solid #005fcc !important;
  outline-offset: 0px !important;
}

/* --- v-pane-header Focus (Issue #64, route accordions) --- */

v-pane-header:focus-visible {
  outline: 2px solid #005fcc !important;
  outline-offset: 0px !important;
}

/* --- Walking Instruction Toggle Focus (Issue #19) --- */
/* v-accordion.css sets outline:none on v-pane-header and its :focus state.
   The parent v-pane has overflow:hidden which clips outlines. Use inset
   box-shadow instead — not affected by overflow clipping. */
button.walking-instruction-toggle:focus-visible {
  outline: none !important;
  box-shadow: inset 0 0 0 2px #005fcc !important;
  padding: 2px 4px !important;
}

/* --- Route Toggle Chevron Focus (Issue #19) --- */
/* Inside v-pane with overflow:hidden — outline gets clipped.
   Use inset box-shadow like walking-instruction-toggle. */
button.route-toggle-btn:focus-visible {
  outline: none !important;
  box-shadow: inset 0 0 0 2px #005fcc !important;
}

/* --- Sidenav / Left Navigation Focus (Issue #75) --- */

md-sidenav md-list-item:focus-visible,
md-sidenav md-list-item .md-button:focus-visible,
md-sidenav .menu-item:focus-visible {
  outline: 2px solid #005fcc !important;
  outline-offset: 0px !important;
}

/* --- Button Focus Indicators --- */

.md-button:focus-visible,
md-icon-button:focus-visible,
.md-icon-button:focus-visible {
  outline: 2px solid #005fcc !important;
  outline-offset: 2px !important;
}

/* --- Checkbox Focus Indicators --- */

md-checkbox:focus-visible,
md-checkbox.md-focused .md-icon {
  outline: 2px solid #005fcc !important;
  outline-offset: 2px !important;
}

/* --- Dropdown/Select Focus Indicators --- */

md-select:focus-visible,
md-select .md-select-value:focus-visible {
  outline: 2px solid #005fcc !important;
  outline-offset: 2px !important;
}

/* --- Dark Background Focus (White) --- */
/* Must override component-specific blue outlines for elements on
   dark backgrounds (toolbar, search panel, sidenav header).
   Includes high-specificity selectors to beat component rules
   like .md-button:focus-visible (0,2,0). */

md-toolbar *:focus-visible,
md-toolbar:focus-visible,
md-toolbar .md-button:focus-visible,
md-toolbar md-icon-button:focus-visible,
md-toolbar .md-icon-button:focus-visible,
.md-toolbar-tools *:focus-visible,
.md-toolbar-tools .md-button:focus-visible,
.search-view-wrapper *:focus-visible,
.search-view-wrapper .md-button:focus-visible,
.search-view-wrapper md-select:focus-visible,
.search-view-wrapper md-select .md-select-value:focus-visible,
md-sidenav .sidenav-header *:focus-visible,
md-sidenav .sidenav-header .md-button:focus-visible,
.results-view-wrapper-header:focus-visible,
.results-view-wrapper-header *:focus-visible {
  outline: 2px solid #FFFFFF !important;
  outline-offset: 2px !important;
}

/* --- Routes Widget Tab Focus --- */
/* The tab is positioned at the viewport right edge. Parent/body overflow:hidden
   clips standard outlines. Use double-ring inset box-shadow for visibility
   on this narrow (40px) element: blue inner + white outer. */
.routeswidget-tab:focus-visible {
  outline: none !important;
  box-shadow: inset 0 0 0 3px #005fcc, inset 0 0 0 5px #FFFFFF !important;
}

/* --- Dialog Tab Pagination & Time Input Focus --- */
/* Angular Material tab pagination arrows (md-prev-button, md-next-button)
   render thin outlines by default. Time inputs inside dialogs may lack
   outlines entirely at small viewports. Ensure all get visible indicators. */
md-prev-button:focus-visible,
md-next-button:focus-visible,
md-dialog input[type='time']:focus-visible {
  outline: 2px solid #005fcc !important;
  outline-offset: 2px !important;
}

/* Required field instruction text for form dialogs */
.required-field-instruction {
  font-size: 12px;
  color: #666666;
  margin: 0 0 8px 0;
}

/* Screen reader only - visually hidden but accessible to assistive technology */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip navigation links — visible only when focused (WCAG 2.4.1)
   Background color uses the theme primary color exposed as a CSS custom property from theme.js */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  padding: 8px 16px;
  background: var(--theme-primary-500);
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  z-index: 10000;
  text-decoration: none;
  border-radius: 0 0 4px 4px;
  transition: top 0.2s ease;
}

.skip-link-map {
  left: 200px;
}

.skip-link:focus,
.skip-link:focus-visible {
  top: 0;
  outline: 2px solid #ffffff !important;
  outline-offset: 2px !important;
}

/* At small viewports, stack skip links vertically to prevent overflow */
@media only screen and (max-width: 599px) {
  .skip-link-map {
    left: 16px;
    top: -100%;
  }
  .skip-link-map:focus,
  .skip-link-map:focus-visible {
    top: 40px;
  }
}

/* Hide skip links entirely on mobile/tablet viewports.
   SC 2.4.1 Bypass Blocks is already satisfied on these viewports via ARIA landmarks
   (role="main", <header>) and heading hierarchy. Mobile screen readers provide native
   landmark/heading navigation, making the skip link redundant. Hiding with display:none
   prevents iOS VoiceOver from announcing the visually-off-screen link as a phantom control. */
@media only screen and (max-width: 959px) {
  .skip-link,
  .skip-link-map {
    display: none;
  }
}

/* Suppress focus ring when <body> receives programmatic focus after onboarding dialog
   closes — pairs with main.js onboarding-close handler that resets focus to document body
   so screen readers start from the beginning of the page. Scoped to body[tabindex] so a
   body that accidentally receives focus without a tabindex still shows a focus ring. */
body[tabindex]:focus {
  outline: none;
}

/* WCAG - Reset h3 heading styles for alert route/stop names */
md-dialog-content h3.line-name {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
  padding: 0;
}

/* Visually hidden day-of-week header for screen readers inside calendar grid */
.md-calendar-day-header-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Month label button styling */
.md-calendar-month-label-button {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  padding: 0;
  text-align: left;
}

.md-calendar-month-label-button:hover {
  text-decoration: underline;
}

/* Footer landmark */
.app-footer {
  text-align: center;
  padding: 8px 16px;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.65);
  background-color: #f5f5f5;
  border-top: 1px solid #e0e0e0;
  flex-shrink: 0;
}
.app-footer .footer-separator {
  margin: 0 4px;
}


/* WCAG 2.4.6 - Show page heading on mobile viewport for sighted user orientation.
   Overrides sr-only to make H1 visible at mobile widths. */
@media only screen and (max-width: 599px) {
  h1.sr-only {
    position: static;
    width: auto;
    height: auto;
    padding: 8px 16px;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    border: 0;
    font-size: 16px;
    font-weight: 500;
    background-color: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
  }
}

/* Trip summary definition list styling — maintain existing visual layout */
dl.trip-summary {
  margin: 0;
}

dl.trip-summary .trip-summary-item {
  display: flex;
  flex-wrap: wrap;
  gap: 0 4px;
}

dl.trip-summary dt {
  font-weight: normal;
  margin: 0;
}

dl.trip-summary dt::after {
  content: ":";
}

dl.trip-summary dd {
  margin: 0;
}

/* Validation error messages in Trip Planning Options dialog.
   Container is always in DOM (no ng-show) so screen readers monitor the
   live region. Visual styling only appears when errors are present. */
.trip-planning-validation-errors.has-errors {
  padding: 8px 16px;
  margin: 0 24px 8px;
  background-color: #fdecea;
  border-left: 4px solid #b71c1c;
  border-radius: 2px;
}

.trip-planning-validation-errors p {
  margin: 4px 0;
  color: #b71c1c;
  font-size: 13px;
}

.trip-planning-validation-errors md-icon {
  color: #b71c1c;
  font-size: 18px;
  min-width: 18px;
  min-height: 18px;
  width: 18px;
  height: 18px;
  vertical-align: middle;
  margin-right: 6px;
}

/* Autocomplete suggestions (non-dialog case) are inserted directly after the md-autocomplete
   element so iOS VoiceOver swipe reaches them next in DOM order. position:fixed makes the
   container viewport-relative so positionDropdown() coordinates are correct. The sibling
   .md-scroll-mask is given pointer-events:none at runtime in angular-material.js so it
   does not block clicks on options; pointer-events:auto here ensures the container itself
   stays interactive. Both declarations use !important because Angular Material's inline
   style="top:..." is applied with higher specificity. */
.md-autocomplete-fixed-container {
  position: fixed !important;
  pointer-events: auto !important;
}

/* Suggestions container may render inside an md-toolbar.md-accent on some pages; prevent
   the accent color (white) from being inherited by result item icons so they stay
   readable on the light suggestion background. */
.md-autocomplete-fixed-container .md-autocomplete-suggestions md-icon {
  color: rgba(0, 0, 0, 0.54) !important;
  fill: rgba(0, 0, 0, 0.54) !important;
}