/* 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;
}


/*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;
}

/*Translate*/

body.common, body.override {
  overflow-y: visible;
}

/* END Translate*/

/*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;
}

.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, .24);
}


/*Top Toolbar Ends*/

/*Navigation Menu*/

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

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

/*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-radius: 2px;
}

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

.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-header {
  padding: 10px 20px;
  font-size: 15px;
  font-weight: 500;
}

.signage-body {
  padding: 0 20px;
  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;
}


/*Traffic*/

.custom-control-traffic {
  padding: 8px;
  display: none;
  border-radius: 2px;
  background: #FFFFFF;
}


/*Satellite*/

.custom-control-satellite {
  padding: 8px;
  display: none;
  border-radius: 2px;
  background: #FFFFFF;
}


/*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);
}

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

.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: #b30036;
  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: #b30036;
}

/*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-traffic {
    bottom: 24px !important;
    right: 50px !important;
    display: block;
  }
  .custom-control-satellite {
    bottom: 24px !important;
    right: 128px !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;
}