/* Next Departures - Search placeholder text was white, could not see properly with grey background */
.search-view-wrapper .md-toolbar-tools .search-autocomplete ::-webkit-input-placeholder {
  color: black;
  text-shadow: none;
  opacity: 1;
}

.search-view-wrapper .md-toolbar-tools .search-autocomplete :-ms-input-placeholder {
  color: black;
  text-shadow: none;
  opacity: 1;
}

.search-view-wrapper .md-toolbar-tools .search-autocomplete ::-ms-input-placeholder {
  color: black;
  text-shadow: none;
  opacity: 1;
}

.search-view-wrapper .md-toolbar-tools .search-autocomplete ::placeholder {
  color: black;
  text-shadow: none;
  opacity: 1;
}

/* Next Departures - Input text was white, could not see properly with grey background */
/* Removed by TL
.search-view-wrapper .md-toolbar-tools .search-autocomplete input {
  color: black;
  text-shadow: none;
}
*/

/* Trip Planning - Search placeholder text was white, could not see properly with grey background */
.search-view-wrapper .tripplanning-search-autocompletes-column .tripplanning-autocomplete-column-row-wrapper ::-webkit-input-placeholder {
  color: black;
  text-shadow: none;
  opacity: 1;
}

.search-view-wrapper .tripplanning-search-autocompletes-column .tripplanning-autocomplete-column-row-wrapper :-ms-input-placeholder {
  color: black;
  text-shadow: none;
  opacity: 1;
}

.search-view-wrapper .tripplanning-search-autocompletes-column .tripplanning-autocomplete-column-row-wrapper ::-ms-input-placeholder {
  color: black;
  text-shadow: none;
  opacity: 1;
}

.search-view-wrapper .tripplanning-search-autocompletes-column .tripplanning-autocomplete-column-row-wrapper ::placeholder {
  color: black;
  text-shadow: none;
  opacity: 1;
}

/* Trip Planning - Input text was white, could not see properly with grey background */
.search-view-wrapper .tripplanning-search-autocompletes-column .tripplanning-autocomplete-column-row-wrapper input {
  color: black;
  text-shadow: none;
}

/* Trip Planning - Clear search icon was white, could not see properly with grey background */
/* This rule below does not yet work, Yasin to figure this out and update later */
.search-view-wrapper .tripplanning-search-autocompletes-column .tripplanning-autocomplete-column-row-wrapper button md-icon svg {
  stroke: black;
}

/* The "X" button within the search input after geocoding for a search has occurred is white on light gray, hard to see. Changing to black */
/*.search-view-wrapper .md-toolbar-tools button md-icon svg g path,
.search-view-wrapper .md-toolbar-tools-tripplanning button md-icon svg g path {
  fill: black;
}*/

/* Routes Widget - The icon was white, hard to see with grey background */
#routeswidget_tab md-icon {
  color: black;
}

/* Routes Widget - Hard to see the Details button besides the routes */
/* Modified by TL */
#routeswidget_drawer_content .schedule-btn {
  background-color: #005DAA;
  color: #ffffff;
}

/* Routes Widget - Click on a Stop - Hard to see the Route Details button inside the stop-info window after click on a stop */
.stop-info-schedule-btn {
  background-color: #005DAA;
  color: #FFFFFF !important;
}

.stop-info-schedule-btn:hover {
  background-color: #00355F !important;
}

/* Routes Widget - Click on a Stop - Hard to see the Route Details button text */
.stop-info-schedule-btn span {
  color: #000000;
}

/* Routes Widget - Click on a Stop - Signage header text was Yellow, hard to see on white background  */
.signage-header > div {
  color: #005daa;
}

/* Fare Dialog - Click on Fares button in itinerary details - Header was white/black text */
.itinerary-details-fares-table th {
  color: white;
  background-color: #666;
}

/* Main Top Navigation Bar - Links Were in Upper Case, Needs to be in Title Case Instead */
.desktoptoolbar-view-wrapper md-toolbar .md-toolbar-tools button.md-button span {
  text-transform: capitalize;
}

/* Removing the Route Number From the Itinerary Details Since TransLink's Destination Sign Already Has Route Number */
.results-view-wrapper .results-view-inner-wrapper .results-view-wrapper-body .itinerary-details-leg span.line {
  display: none;
}

/* Current view's button in navigation bar background colour updated as per TransLink's request in order to be more accessible 
TL Customization: Remove this CSS
.desktoptoolbar-view-wrapper md-toolbar button.active {
  background-color: #00355f;
}*/

/* Navigation bar header button background colour and text decoration updated as per TransLink's request in order to be more accessible */
.desktoptoolbar-view-wrapper md-toolbar button:hover {
  background-color: #00355f;
  text-decoration: underline;
}

/* Hiding the fast-forward icon when itinerary begins in past in the message section, the tpConfig seems to hide it everywhere else */
section.itinerary-begins-in-past md-card md-card-content p md-icon {
  display: none;
}

/* Setting the "View Details" text and down arrow within the view that contains the list of itineraries to #666 as out of box colour fails accessibility standards according to customer */
.results-view-wrapper .results-view-inner-wrapper md-content.results-view-wrapper-body .view-details span,
.results-view-wrapper .results-view-inner-wrapper md-content.results-view-wrapper-body .view-details span md-icon {
  color: #666;
}

/* Updating the colours within the table that shows the end user multiple fares as per TransLink's newest provided mockup */
table.itinerary-details-fares-table thead tr th,
table.itinerary-details-fares-table tbody tr:nth-child(2) td:first-child {
  background-color: #00355F;
}

table.itinerary-details-fares-table tbody tr:first-child td:first-child {
  background-color: #005DAA;
}

table.itinerary-details-fares-table tbody tr td:first-child {
  color: white;
}

table.itinerary-details-fares-table tbody tr:nth-child(2) td:nth-child(2),
table.itinerary-details-fares-table tbody tr:nth-child(2) td:nth-child(3) {
  background-color: #F2F5F7;
}

/* Updating the text within the table that shows the end user multiple fares to be centered as per the original provided mockup by TransLink*/
table.itinerary-details-fares-table thead tr th,
table.itinerary-details-fares-table tbody tr td {
  text-align: center;
}

/* Updating the table that shows the end user multiple fares to include some padding as per the original provided mockup by TransLink */
table.itinerary-details-fares-table thead tr th,
table.itinerary-details-fares-table tbody tr td {
  padding-top: 7px;
  padding-bottom: 7px;
}

#headway-sheet-header-mobile {
  max-width: 90%;
}

#headway-sheet-header {
  max-width: 40%;
}

#headway-sheet-header h1 {
  word-wrap: break-word;
}

/*Remove the effective time from all alerts */
.effective-date {
  display: none;
}

body *:focus {
  outline: solid 2px #0081C6 !important;
}

body:not([browser="ie"]) *:focus {
  outline-offset: -2px;
  outline: 2px solid #0081C6 !important;
}

ol > li {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: .01em;
}

/* TransLink Override */
md-toolbar.md-default-theme:not(.md-menu-toolbar), md-toolbar:not(.md-menu-toolbar) {
    background-color: #ffffff;
    color: #005DAA;
}

    md-toolbar.md-default-theme:not(.md-menu-toolbar) md-icon, md-toolbar:not(.md-menu-toolbar) md-icon,
    md-autocomplete.md-default-theme button md-icon path, md-autocomplete button md-icon path {
        color: #005DAA;
        fill: #005DAA;
    }

md-sidenav md-icon {
    color: #005DAA;
    fill: #005DAA;
}

md-sidenav p {
    color: #005DAA;
}

md-checkbox.md-default-theme.md-checked .md-icon, md-checkbox.md-checked .md-icon {
    background-color: #ffffff;
    border-color: rgba(0,0,0,0.54);
}

md-checkbox .md-container:after {
    top: -15px;
    right: -12px;
}

md-tabs[md-border-bottom] md-tabs-wrapper {
    border-top: 1px solid rgb(0, 0, 0, 0.12);
}

.routeswidget-tab {
    background-color: #FFD200 !important;
}

.routeswidget-view-wrapper md-toolbar:not(.md-menu-toolbar).md-accent md-icon {
    color: #ffffff;
    fill: #ffffff;
}

md-toolbar:not(.md-menu-toolbar).md-accent {
    background-color: #005DAA;
}

    md-toolbar:not(.md-menu-toolbar).md-accent .md-ink-ripple {
        color: #ffffff;
    }

md-autocomplete {
    background: #ffffff;
}

md-toolbar:not(.md-menu-toolbar).md-accent .tripplanning-search-toggle-directions-column md-icon {
    color: #ffffff;
}

.tripplanning-options-dialog .md-subheader {
    background-color: #005DAA;
    color: #ffffff;
}

md-tabs[md-border-bottom] md-tabs-wrapper {
    border: 1px 0 1px;
}

md-toast md-tabs {
    margin-bottom: 8px;
}

div.activation-page a, a, a:visited {
    font-weight: bold;
    text-decoration: underline;
    color: #005daa;
}

    a:hover {
        color: #00355F;
    }

.results-view-wrapper-header, .results-view-wrapper-header md-icon {
    color: #ffffff !important;
}

.bottom-sheet-inner-placeholder {
    color: #ffffff;
}

/* TL Customization: Hide bottom sheet in V21 */
/*.bottom-sheet-placeholder {
	display: none;
}*/

.md-light md-icon, md-icon.md-light {
    color: #ffffff;
}

.search-view-wrapper > md-toolbar:not(.md-menu-toolbar).md-accent md-icon:not(.search-icon) {
    color: #ffffff;
    fill: #ffffff;
}

/* TL Customization: Find Nearby Stops button */
.search-nearby-button {
  background-color: #005daa !important;
  color: #ffffff !important;
  bottom: 5%;
}

/* TL Customization: Route search input */
.routeswidget-drawer-header #routeSearch input::placeholder {
  color: #757575 !important;
  font-size: 16px;
  opacity: 1;
}

.routeswidget-drawer-header #routeSearch input {
  background-color: #ffffff !important;
  color: #000002 !important;
}

.desktoptoolbar-view-wrapper *:focus,
.menusidenav-view-wrapper md-list-item-inner:focus,
.menusidenav-view-wrapper md-list-item-inner:hover {
    text-decoration: underline;
    color: #005DAA;
}

.menusidenav-view-wrapper md-list-item > div:hover {
    background-color: rgba(158,158,158,0.2);
}

img.logo {
    height: 45px;
}

.search-view-wrapper .tripplanning-search-autocompletes-column .tripplanning-autocomplete-column-row-wrapper input,
.search-view-wrapper .md-toolbar-tools .search-autocomplete input,
.search-view-wrapper md-autocomplete.is-focused {
    color: #000000;
    text-shadow: none;
}

.search-view-wrapper .tripplanning-search-autocompletes-column .tripplanning-autocomplete-column-row-wrapper md-icon,
.search-view-wrapper md-autocomplete.not-focused button md-icon path,
.search-view-wrapper md-toolbar .md-toolbar-tools md-icon,
.search-view-wrapper md-autocomplete.is-focused + .search-icon {
  color: #005DAA !important;
  fill: #005DAA !important;
}

.search-view-wrapper md-toolbar .md-toolbar-tools .md-icon-button md-icon.material-icons {
  color: #ffffff !important;
}

.search-view-wrapper #search-autocomplete input::placeholder,
.search-view-wrapper #tripplanning-origin-autocomplete input::placeholder,
.search-view-wrapper #tripplanning-destination-autocomplete input::placeholder {
    color: #757575;
}

.search-view-wrapper .tripplanning-search-autocompletes-column .tripplanning-autocomplete-column-row-wrapper button md-icon svg {
    stroke: #005DAA;
}

.search-view-wrapper .md-toolbar-tools-tripplanning .tripplanning-autocomplete-column-row-wrapper .trip-planner-input-container span,
.search-view-wrapper .md-toolbar-tools-tripplanning .tripplanning-autocomplete-column-row-wrapper .trip-planner-input-container input,
.results-view-wrapper .results-view-inner-wrapper .results-view-wrapper-header .trip-planner-input-container span {
    color: #ffffff;
}

headway-sheet[view-orientation="v"] tr th:nth-child(2), headway-sheet[view-orientation="v"] tr td:nth-child(2) {
    display: none;
}

headway-sheet[view-orientation="v"] .dataTables_wrapper th {
    min-width: 140px;
    white-space: normal;
}

headway-sheet[view-orientation="v"] table.dataTable thead th, headway-sheet[view-orientation="v"] table.dataTable thead td {
    padding: 8px 10px 12px 10px;
}

.table-header-icons, .headway-title-stop-number {
    display: inline-block;
    margin-bottom: 0;
}

    .table-header-icons span img {
        vertical-align: text-top;
    }

headway-sheet-header > .headway-sheet-stop {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

md-toolbar .active, .sidenav-section-main .active p {
    text-decoration: underline;
    color: #005DAA;
}

.md-dialog-fullscreen ._md-toolbar-transitions {
    background-color: #ffffff;
    color: #005DAA;
    border-top: 1px solid grey;
    border-bottom: 1px solid grey;
}

    .md-dialog-fullscreen ._md-toolbar-transitions .md-toolbar-tools button md-icon {
        color: #005daa;
    }

.md-dialog-fullscreen:focus ._md-toolbar-transitions {
    border-left: 1px solid #0081c6;
    border-right: 1px solid #0081c6;
}

.md-dialog-fullscreen ._md-toolbar-transitions md-icon {
    color: #ffffff;
    fill: #ffffff;
}

.md-button.md-accent.md-raised {
    background-color: #005DAA;
    color: #ffffff;
}

    .md-button.md-accent.md-raised:not([disabled]):hover {
        background-color: #00355f;
    }

.vehicle-status.early, .vehicle-status.onTime {
    background-color: #008000;
    color: #ffffff;
    padding: 0 5px;
}

.vehicle-status.late {
    background-color: #d50000;
    color: #ffffff;
    padding: 0 5px;
}

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

.tripplanning-autocomplete-column-row-wrapper .trip-planner-input-container .md-select-value,
.trip-planner-input-container input,
.results-view-wrapper-header md-select .md-select-value {
    border-bottom-color: #ffffff !important;
}

.tripplanning-autocomplete-column-row-wrapper .md-button {
    text-transform: none;
}

.tripplanning-autocomplete-column-row-wrapper .trip-planner-input-container md-select:focus,
.tripplanning-autocomplete-column-row-wrapper .trip-planner-input-container input:focus,
.tripplanning-autocomplete-column-row-wrapper md-icon:focus,
.tripplanning-autocomplete-column-row-wrapper button:focus,
.tripplanning-search-toggle-directions-column button:focus,
.results-view-wrapper-header md-select:focus {
    outline: 2px solid #ffffff !important;
}

/* Tour Window */
.onboarding {
    height: auto;
}

md-dialog.md-dialog-fullscreen.onboarding {
    min-height: 0;
}

.onboarding-dialog md-tab-content > div > img {
    padding: 15px 10px;
    max-width: 310px;
    max-height: 310px;
}

.onboarding-component {
    padding: 0 10px;
}

.onboarding > md-dialog-actions {
    margin-bottom: 30px;
}

.md-button.md-accent.md-raised:not([disabled]).md-focused {
    background-color: #00355F;
}