/*
  TaxiRates.ca visual refresh
  CSS-only presentation layer for the existing ASP.NET MVC application.
  No fare logic, Google Maps logic, form fields, URLs, or backend code changed.
*/

:root {
    --tr-navy: #122033;
    --tr-navy-2: #1b2f47;
    --tr-blue: #0787b8;
    --tr-blue-dark: #056f98;
    --tr-cyan-soft: #eaf7fb;
    --tr-text: #1f2937;
    --tr-muted: #64748b;
    --tr-border: #dbe4ec;
    --tr-surface: #ffffff;
    --tr-page: #f6f8fb;
    --tr-success: #157f65;
}

html {
    background: var(--tr-page);
}

body {
    background: var(--tr-page);
    color: var(--tr-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

a {
    color: var(--tr-blue-dark);
    transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

a:hover,
a:focus {
    color: var(--tr-blue);
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
}

/* Header */
.info-bar {
    background: var(--tr-surface);
    border-bottom: 1px solid var(--tr-border);
    box-shadow: 0 2px 10px rgba(18, 32, 51, .04);
}

.info-bar > .container > .row {
    display: flex;
    align-items: center;
    min-height: 84px;
}

.info-bar .logo-box,
.info-bar .info-box {
    float: none;
}

.info-bar .logo-box .logo {
    display: inline-flex;
    align-items: center;
}

.info-bar .logo-box img {
    max-height: 58px;
    width: auto;
}

/* The old template contains placeholder address/phone information. Hide it
   rather than presenting fake contact details. */
.info-bar > .container > .row > .col-sm-2.m0top {
    display: none !important;
}

.info-bar .info-box {
    margin-left: auto;
}

.info-bar .info-media,
.info-bar .info-media .media-body {
    overflow: visible;
}

.social-lists-wSearch.topsocial {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.social-lists-wSearch.topsocial > li {
    float: none;
    margin: 0 !important;
}

.social-lists-wSearch.topsocial form {
    position: relative;
}

.social-lists-wSearch.topsocial input[type="text"] {
    width: 250px;
    height: 40px;
    padding: 8px 42px 8px 13px;
    border: 1px solid var(--tr-border);
    border-radius: 8px;
    background: #f8fafc;
    color: var(--tr-text);
    box-shadow: none;
}

.social-lists-wSearch.topsocial input[type="text"]:focus {
    border-color: #8ac9de;
    background: #fff;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(7, 135, 184, .10);
}

.social-lists-wSearch .search-pop {
    position: absolute;
    right: 2px;
    top: 1px;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--tr-blue-dark);
}

.social-lists-wSearch kbd {
    display: inline-block;
    padding: 9px 14px;
    border-radius: 8px;
    background: var(--tr-navy);
    color: #fff;
    font-family: inherit;
    font-weight: 700;
    box-shadow: none;
}

/* Main navigation */
.main-navigation.navbar {
    min-height: 52px;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: var(--tr-navy);
}

.main-navigation .navbar-nav > li > a {
    padding-top: 16px;
    padding-bottom: 16px;
    color: rgba(255,255,255,.86) !important;
    font-size: 14px;
    font-weight: 650;
    letter-spacing: .01em;
    text-transform: none;
}

.main-navigation .navbar-nav > li > a:hover,
.main-navigation .navbar-nav > li > a:focus,
.main-navigation .navbar-nav > .active > a,
.main-navigation .navbar-nav > .active > a:hover,
.main-navigation .navbar-nav > .active > a:focus {
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
}

.navbar-toggle.nav-hider {
    margin: 0;
    border: 1px solid var(--tr-border);
    border-radius: 8px;
    background: #fff;
    color: var(--tr-navy);
}

/* Hero / page header */
.page-cover {
    position: relative;
    min-height: 250px;
    background-size: cover !important;
    background-position: center top !important;
    background-color: var(--tr-navy) !important;
    background-blend-mode: multiply;
}

.page-cover > .container {
    padding-top: 48px;
    padding-bottom: 42px;
}

.page-cover .page-title {
    margin-top: 0;
    margin-bottom: 10px;
    color: #fff;
    font-weight: 700;
    line-height: 1.25;
    text-shadow: 0 2px 12px rgba(0,0,0,.28);
}

.page-cover h1.page-title {
    font-size: clamp(28px, 4vw, 42px);
}

.page-cover h2.page-title {
    max-width: 900px;
    color: rgba(255,255,255,.88);
    font-size: clamp(17px, 2vw, 21px);
    font-weight: 500;
}

.page-cover .breadcrumb {
    padding: 0;
    margin: 10px 0 0;
    background: transparent;
    color: rgba(255,255,255,.78);
}

.page-cover .breadcrumb a {
    color: #fff;
}

/* Main page surfaces */
.wrapper-about,
.wrapper-fleet {
    padding-top: 34px;
    padding-bottom: 34px;
    background: var(--tr-page);
}

.wrapper-about + .wrapper-about {
    padding-top: 8px;
}

.wrapper-about > .container,
.wrapper-fleet > .container,
body > .container {
    max-width: 1170px;
}

.section-title .this-main,
.introduction .section-title h2,
.introduction .section-title h3 {
    color: var(--tr-navy);
    font-weight: 700;
}

.section-title .this-top {
    color: var(--tr-blue-dark);
    font-weight: 700;
    letter-spacing: .02em;
}

/* Fare search forms: preserve all existing form markup and JavaScript. */
#searchform {
    position: relative;
}

#searchform > div:first-child {
    padding: 24px !important;
    border: 1px solid var(--tr-border);
    border-radius: 14px;
    background: var(--tr-surface) !important;
    box-shadow: 0 12px 30px rgba(18, 32, 51, .09);
}

#searchform .this-title {
    margin: 0 0 6px;
    color: var(--tr-navy);
    font-size: 24px;
    font-weight: 750;
    letter-spacing: -.02em;
}

#searchform .this-title img {
    max-height: 28px;
    width: auto;
    vertical-align: -5px;
}

#searchform > div:first-child > p.h3 {
    margin: 0 0 19px;
    color: var(--tr-muted);
    font-size: 15px;
    font-weight: 500;
}

#searchform .fr-it {
    margin-right: -8px !important;
    margin-left: -8px !important;
}

#searchform .fr-it > [class*="col-"] {
    padding-right: 8px;
    padding-left: 8px;
    margin-bottom: 12px;
}

#searchform .form-control,
#searchform select.form-control,
#searchform input.form-control {
    height: 48px;
    border: 1px solid #cfd9e3;
    border-radius: 8px;
    background: #fff;
    color: var(--tr-text);
    font-size: 15px;
    box-shadow: none;
}

#searchform .form-control:focus {
    border-color: #74bdd8;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(7, 135, 184, .11);
}

#searchform .input-group .form-control {
    border-radius: 8px 0 0 8px;
}

#searchform .input-group-addon {
    min-width: 46px;
    border: 1px solid #cfd9e3;
    border-left: 0;
    border-radius: 0 8px 8px 0;
    background: var(--tr-cyan-soft);
    color: var(--tr-blue-dark);
}

#searchform .btn-primary {
    min-width: 150px;
    height: 48px;
    padding: 10px 22px;
    border: 1px solid var(--tr-blue-dark);
    border-radius: 8px !important;
    background: var(--tr-blue-dark);
    color: #fff;
    font-size: 15px;
    font-weight: 750;
    line-height: 1.2 !important;
    box-shadow: 0 8px 18px rgba(5, 111, 152, .18);
}

#searchform .btn-primary:hover,
#searchform .btn-primary:focus {
    border-color: #045d80;
    background: #045d80;
    color: #fff;
}

/* Compact search form used on results and inner pages. */
.wrapper-fleet > .container > div:first-child,
body > .container > div:first-child {
    border-radius: 14px;
}

.wrapper-fleet #searchform,
body > .container #searchform {
    padding: 6px 0 0;
}

.wrapper-fleet #searchform > div:first-child,
body > .container #searchform > div:first-child {
    padding: 14px !important;
    box-shadow: none;
}

.wrapper-fleet #searchform > div:first-child > [class*="col-"],
body > .container #searchform > div:first-child > [class*="col-"] {
    margin-bottom: 10px;
}

.wrapper-fleet #searchform .btn-primary,
body > .container #searchform .btn-primary {
    width: 100%;
    min-width: 0;
}

/* Home content */
.introduction,
.introduction2 {
    margin-bottom: 20px;
}

.introduction .section-title,
.introduction2 {
    height: auto !important;
    padding: 25px;
    border: 1px solid var(--tr-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(18, 32, 51, .04);
}

.introduction2 .this-title {
    margin-top: 0;
    color: var(--tr-navy);
    font-weight: 700;
}

.mission-nav > li > a,
.mission-nav > li {
    padding-top: 7px;
    padding-bottom: 7px;
}

.popular-tabs-row {
    margin: 0;
}

.popular-fleets-tabs {
    border-bottom: 1px solid var(--tr-border);
    background: transparent !important;
}

.popular-fleets-tabs > li > a {
    margin-right: 6px;
    padding: 11px 16px;
    border: 1px solid transparent;
    border-radius: 8px 8px 0 0;
    color: var(--tr-muted);
    font-weight: 700;
}

.popular-fleets-tabs > li.active > a,
.popular-fleets-tabs > li.active > a:hover,
.popular-fleets-tabs > li.active > a:focus {
    border: 1px solid var(--tr-border);
    border-bottom-color: #fff;
    background: #fff;
    color: var(--tr-navy);
}

.tab-content {
    padding-top: 18px;
}

.feature .media-body {
    padding: 21px;
    border: 1px solid var(--tr-border);
    border-radius: 12px;
    background: #fff;
}

.feature .this-title {
    color: var(--tr-navy);
    font-weight: 700;
}

.cityitem {
    padding: 6px 8px !important;
    background: transparent !important;
}

.cityitem > a {
    display: block;
    min-height: 46px;
    padding: 11px 13px;
    border: 1px solid var(--tr-border);
    border-radius: 8px;
    background: #fff;
    color: var(--tr-navy);
    font-weight: 650;
    box-shadow: 0 2px 8px rgba(18, 32, 51, .03);
}

.cityitem > a:hover,
.cityitem > a:focus {
    border-color: #a9d9e8;
    background: var(--tr-cyan-soft);
    color: var(--tr-blue-dark);
}

.latest-blog .newssep {
    padding: 13px 0;
    border-bottom: 1px solid var(--tr-border);
}

/* Search results */
.fleet-sidebar .widget {
    margin-bottom: 16px;
    overflow: hidden;
    border: 1px solid var(--tr-border);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(18, 32, 51, .04);
}

.fleet-sidebar .widget-title {
    padding: 13px 16px;
    margin: 0;
    border-bottom: 1px solid var(--tr-border);
    background: #f8fafc;
    color: var(--tr-navy);
    font-size: 15px;
    font-weight: 750;
}

.fleet-sidebar .widget-inner {
    padding: 12px 16px 15px;
}

.fleet-sidebar .widget-inner label {
    display: block;
    padding: 5px 0 5px 26px;
    color: var(--tr-text);
    font-weight: 500;
}

.fleet-section .pagi-info.style2 {
    width: 100%;
    padding: 14px 17px;
    margin-bottom: 17px;
    border: 1px solid var(--tr-border);
    border-radius: 10px;
    background: #fff;
}

.fleet-section .pagi-info.style2 h5 {
    margin: 0;
    color: var(--tr-muted);
    font-size: 14px;
    line-height: 1.6;
}

.fleet-section .pagi-info.style2 strong {
    color: var(--tr-text);
}

.fleet.fleet-list {
    overflow: hidden;
    margin-bottom: 18px;
    border: 1px solid var(--tr-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 7px 20px rgba(18, 32, 51, .06);
}

.fleet.fleet-list > .row {
    margin: 0;
    padding: 21px 18px 8px;
}

.fleet.fleet-list .img-circle {
    padding: 4px;
    border: 1px solid var(--tr-border);
    background: #fff;
}

/* Driver earnings are not useful to a passenger fare comparison and the
   historic value can be misleading. Hide the presentation only. */
.dricerearn {
    display: none !important;
}

.fleet.fleet-list .vehicle-title {
    margin-top: 0;
    color: var(--tr-navy);
    font-size: 22px;
    font-weight: 750;
}

.fleet.fleet-list .rent {
    color: var(--tr-blue-dark);
    font-size: 28px;
    font-weight: 800;
}

.fleet.fleet-list .this-header {
    padding: 0;
}

.fleet.fleet-list .this-header .table {
    border: 1px solid #e5ebf1;
    border-radius: 8px;
    background: #fafcfd;
}

.fleet.fleet-list .this-header .table > tbody > tr > td {
    padding: 7px 9px;
    border-top-color: #e6edf3;
    font-size: 13px;
}

.fleet.fleet-list .specification {
    min-height: 0;
    padding: 12px 18px;
    border-top: 1px solid var(--tr-border);
    background: #f8fafc;
}

.fleet.fleet-list .detail-btn {
    min-height: 38px;
    margin: 3px 6px 3px 0;
    border-radius: 7px;
    background: var(--tr-navy);
    color: #fff;
    font-weight: 650;
}

.fleet.fleet-list .detail-btn:hover,
.fleet.fleet-list .detail-btn:focus {
    background: var(--tr-blue-dark);
    color: #fff;
}

.fleet.fleet-list .feature-banner span {
    background: var(--tr-success);
}

.modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 12px;
    box-shadow: 0 18px 60px rgba(18, 32, 51, .24);
}

/* Generic inner-page content */
body > .container > section.row,
body > .container > .row {
    margin-left: 0;
    margin-right: 0;
}

body > .container > section.row {
    padding-top: 20px;
    padding-bottom: 28px;
}

body > .container h1,
body > .container h2,
body > .container h3,
body > .container h4 {
    color: var(--tr-navy);
}

/* Footer */
.site-footer {
    margin-top: 12px;
    background: var(--tr-navy);
}

.site-footer .top-footer {
    padding-top: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,.09);
}

.site-footer .ft {
    margin: 0;
}

.site-footer .widget-links > div {
    padding: 4px 13px !important;
}

.site-footer .widget-links a {
    color: rgba(255,255,255,.78);
    font-weight: 550;
}

.site-footer .widget-links a:hover,
.site-footer .widget-links a:focus {
    color: #fff;
}

.site-footer .widget-links .fa {
    margin-right: 5px;
    color: #67c2df;
}

.bottom-footer {
    padding-top: 17px;
    padding-bottom: 18px;
    color: rgba(255,255,255,.62);
    font-size: 13px;
}

.bottom-footer .topsocial {
    display: none !important;
}

.bottom-footer a {
    color: rgba(255,255,255,.82) !important;
}

/* Date picker */
.ui-datepicker {
    border: 1px solid var(--tr-border) !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 34px rgba(18, 32, 51, .18);
}

/* Tablet */
@media (min-width: 768px) {
    .info-bar .logo-box {
        width: 38%;
    }

    .info-bar .info-box {
        width: 62%;
    }
}

/* Mobile */
@media (max-width: 767px) {
    body {
        font-size: 15px;
    }

    .info-bar > .container > .row {
        display: flex;
        min-height: 70px;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .info-bar .logo-box {
        width: 55%;
        text-align: left;
    }

    .info-bar .logo-box img {
        max-height: 48px;
    }

    .info-bar .info-box {
        width: 45%;
        padding-left: 5px;
    }

    .social-lists-wSearch.topsocial > li {
        display: none;
    }

    .social-lists-wSearch.topsocial > li:last-child {
        display: none;
    }

    .navbar-toggle.nav-hider {
        display: block !important;
        float: right;
    }

    .main-navigation .navbar-collapse {
        border-top: 0;
        box-shadow: none;
    }

    .main-navigation .navbar-nav {
        margin-top: 4px;
        margin-bottom: 8px;
    }

    .main-navigation .navbar-nav > li > a {
        padding: 12px 15px;
    }

    .page-cover {
        min-height: 220px;
        background-position: center top !important;
    }

    .page-cover > .container {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .page-cover h1.page-title {
        font-size: 28px;
    }

    .page-cover h2.page-title {
        font-size: 17px;
    }

    .wrapper-about,
    .wrapper-fleet {
        padding-top: 22px;
        padding-bottom: 22px;
    }

    #searchform > div:first-child {
        padding: 17px !important;
        border-radius: 11px;
    }

    #searchform .this-title {
        font-size: 21px;
    }

    #searchform .fr-it > [class*="col-"] {
        margin-bottom: 10px;
    }

    #searchform .btn-primary {
        width: calc(100% - 30px);
        margin-right: 15px;
        margin-left: 15px;
    }

    .popular-fleets-tabs > li {
        float: none;
    }

    .popular-fleets-tabs > li > a {
        margin: 0 0 4px;
        border-radius: 7px;
        background: #fff;
    }

    .popular-fleets-tabs > li.active > a,
    .popular-fleets-tabs > li.active > a:hover,
    .popular-fleets-tabs > li.active > a:focus {
        border-bottom-color: var(--tr-border);
        background: var(--tr-cyan-soft);
    }

    .fleet-sidebar {
        margin-bottom: 20px;
    }

    .fleet.fleet-list > .row {
        padding: 17px 12px 8px;
    }

    .fleet.fleet-list .media.this-header,
    .fleet.fleet-list .media.this-header > .media-body,
    .fleet.fleet-list .media.this-header > .media-right {
        display: block;
        width: 100%;
    }

    .fleet.fleet-list .this-header .table {
        width: 100% !important;
        margin-top: 14px;
    }

    .fleet.fleet-list .specification {
        padding: 10px 12px;
    }

    .fleet.fleet-list .detail-btn {
        width: 100%;
        margin-right: 0;
    }

    .cityitem {
        width: 100%;
    }

    .site-footer .widget-links {
        display: block !important;
        text-align: left;
    }

    .site-footer .widget-links > div {
        display: inline-block;
        width: 49%;
        vertical-align: top;
    }
}

@media (max-width: 420px) {
    .info-bar .logo-box {
        width: 62%;
    }

    .info-bar .info-box {
        width: 38%;
    }

    .page-cover h1.page-title {
        font-size: 25px;
    }

    #searchform > div:first-child {
        padding: 14px !important;
    }

    .site-footer .widget-links > div {
        width: 100%;
    }
}

/* V3: compact fare widget on CityList, CityRates and results pages.
   This partial shares #searchform with the homepage, so these rules
   deliberately override the larger homepage card treatment only when
   the compact partial's .quick-search-bar wrapper is present. */
.quick-search-bar {
    margin: 20px 0 !important;
    padding: 18px 18px 8px !important;
    border: 1px solid var(--tr-border) !important;
    border-radius: 14px;
    background: #fff !important;
    box-shadow: 0 8px 24px rgba(18, 32, 51, .07);
}

.quick-search-bar #searchform {
    margin-right: -8px;
    margin-left: -8px;
    padding: 0 !important;
}

.quick-search-bar #searchform > div:first-child {
    display: flow-root;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.quick-search-bar #searchform > div:first-child > [class*="col-"] {
    margin-bottom: 10px;
    padding-right: 8px;
    padding-left: 8px;
}

.quick-search-bar #searchform .input-group {
    width: 100%;
}

.quick-search-bar #searchform .form-control,
.quick-search-bar #searchform select.form-control,
.quick-search-bar #searchform input.form-control {
    width: 100%;
    height: 44px;
    margin: 0;
}

.quick-search-bar #searchform .input-group-addon {
    height: 44px;
}

.quick-search-bar #searchform .col-md-3 > .col-sm-4,
.quick-search-bar #searchform .col-md-3 > .col-xs-4,
.quick-search-bar #searchform .col-md-3 > .col-md-4 {
    padding-right: 4px;
    padding-left: 4px !important;
}

.quick-search-bar #searchform .col-md-3 > .col-sm-4:first-child,
.quick-search-bar #searchform .col-md-3 > .col-xs-4:first-child,
.quick-search-bar #searchform .col-md-3 > .col-md-4:first-child {
    padding-left: 0 !important;
}

.quick-search-bar #searchform .col-md-3 > .col-sm-4:last-child,
.quick-search-bar #searchform .col-md-3 > .col-xs-4:last-child,
.quick-search-bar #searchform .col-md-3 > .col-md-4:last-child {
    padding-right: 0;
}

.quick-search-bar #searchform .btn-primary {
    width: 100% !important;
    min-width: 0;
    height: 44px;
    margin: 0 !important;
    padding: 8px 10px;
}

@media (max-width: 991px) {
    .quick-search-bar {
        padding: 16px 14px 6px !important;
    }

    .quick-search-bar #searchform > div:first-child > [class*="col-"] {
        margin-bottom: 10px;
    }
}

@media (max-width: 767px) {
    .quick-search-bar {
        margin: 16px 0 !important;
        padding: 14px 12px 4px !important;
        border-radius: 11px;
    }

    .quick-search-bar #searchform {
        margin-right: -6px;
        margin-left: -6px;
    }

    .quick-search-bar #searchform > div:first-child > [class*="col-"] {
        padding-right: 6px;
        padding-left: 6px;
    }

    .quick-search-bar #searchform .form-control,
    .quick-search-bar #searchform select.form-control,
    .quick-search-bar #searchform input.form-control,
    .quick-search-bar #searchform .btn-primary {
        height: 46px;
    }
}

/* V4: Supported Cities uses its own grid.
   Keep it independent from .cityitem, which is used by the main city listings. */
.info-bar .supported-cities-grid {
    display: flex;
    flex-wrap: wrap;
    margin: 2px -8px 12px;
}

.info-bar .supported-city-item {
    float: none;
    display: flex;
    padding: 8px !important;
}

.info-bar .supported-city-item > a {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;
    padding: 11px 14px;
    border: 1px solid var(--tr-border);
    border-radius: 8px;
    background: #fff;
    color: var(--tr-navy);
    font-weight: 650;
    line-height: 1.35;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(18, 32, 51, .03);
}

.info-bar .supported-city-item > a:hover,
.info-bar .supported-city-item > a:focus {
    border-color: #a9d9e8;
    background: var(--tr-cyan-soft);
    color: var(--tr-blue-dark);
    text-decoration: none;
}

@media (max-width: 767px) {
    .info-bar .supported-cities-grid {
        margin-left: 0;
        margin-right: 0;
    }

    .info-bar .supported-city-item {
        width: 100%;
        padding: 5px 0 !important;
    }
}

/* V8 mobile header/menu compatibility fixes.
   Keep desktop design and V7 Google Maps behaviour unchanged. */
@media (max-width: 767px) {
    /* Give the header room for the Knowledge Base search and Add Company
       controls instead of hiding them on phones. */
    .info-bar > .container > .row {
        position: relative;
        flex-wrap: wrap;
        align-items: flex-start;
        min-height: 128px;
        padding-top: 10px;
        padding-bottom: 60px;
    }

    .info-bar .logo-box {
        width: 68%;
        padding-right: 5px;
    }

    .info-bar .info-box {
        width: 32%;
        padding-left: 0;
    }

    .info-bar .info-box .media,
    .info-bar .info-box .media-body {
        position: static;
        width: 100%;
    }

    /* The old theme positions this button at top:60px. Reset that on mobile
       so the hamburger is always visible inside the header. */
    .navbar-toggle.nav-hider {
        position: static !important;
        top: auto !important;
        right: auto !important;
        display: block !important;
        float: right;
        margin: 5px 0 0 !important;
        padding: 4px 9px !important;
        line-height: 1;
        z-index: 1100;
    }

    .navbar-toggle.nav-hider .ion-android-menu {
        display: block;
        font-size: 30px;
        line-height: 34px;
    }

    /* Re-enable the two useful header tools and place them in a full-width
       row beneath the logo/hamburger. */
    .info-bar .social-lists-wSearch.topsocial {
        position: absolute;
        left: 15px;
        right: 15px;
        bottom: 10px;
        display: flex !important;
        width: auto;
        gap: 8px;
        margin: 0;
        padding: 0;
        align-items: center;
        justify-content: stretch;
    }

    .info-bar .social-lists-wSearch.topsocial > li,
    .info-bar .social-lists-wSearch.topsocial > li:last-child {
        display: block !important;
        float: none;
        margin: 0 !important;
        border: 0 !important;
    }

    .info-bar .social-lists-wSearch.topsocial > li:first-child {
        flex: 1 1 auto;
        width: auto !important;
        min-width: 0;
    }

    .info-bar .social-lists-wSearch.topsocial > li:last-child {
        flex: 0 0 auto;
    }

    .info-bar .social-lists-wSearch.topsocial form {
        width: 100%;
        margin: 0;
    }

    .info-bar .social-lists-wSearch.topsocial input[type="text"] {
        width: 100% !important;
        height: 40px;
        margin: 0;
        padding-right: 40px;
        font-size: 14px;
    }

    .info-bar .social-lists-wSearch.topsocial kbd {
        white-space: nowrap;
        padding: 9px 10px;
        font-size: 12px;
        line-height: 20px;
    }

    /* The menu lives inside the hero in this legacy template. Put it in
       normal flow on phones, so an opened menu pushes hero content down
       instead of covering/cropping the top of the banner. */
    .page-cover .main-navigation.navbar {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100%;
        min-height: 0;
        margin: 0;
        border: 0;
        background: transparent;
        z-index: 1050;
    }

    .page-cover .main-navigation #main-nav {
        width: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        background: var(--tr-navy);
        box-shadow: 0 12px 24px rgba(18, 32, 51, .18);
    }

    .page-cover .main-navigation #main-nav.collapse {
        display: none !important;
    }

    .page-cover .main-navigation #main-nav.collapse.in,
    .page-cover .main-navigation #main-nav.collapsing {
        display: block !important;
    }

    .page-cover .main-navigation #main-nav .navbar-nav {
        display: block;
        float: none;
        width: 100% !important;
        margin: 0;
        box-shadow: none;
    }

    .page-cover .main-navigation #main-nav .navbar-nav:before,
    .page-cover .main-navigation #main-nav .navbar-nav:after {
        display: none !important;
        content: none !important;
    }

    .page-cover .main-navigation #main-nav .navbar-nav > li {
        float: none;
        width: 100%;
        text-align: left;
        border-bottom: 1px solid rgba(255,255,255,.08);
    }

    .page-cover .main-navigation #main-nav .navbar-nav > li:last-child {
        border-bottom: 0;
    }

    .page-cover .main-navigation #main-nav .navbar-nav > li > a {
        display: block;
        width: 100%;
        padding: 12px 16px !important;
        line-height: 22px !important;
        text-align: left;
        color: #fff !important;
    }

    /* Keep the hero content fully below the mobile menu area and anchor
       the source image at its top edge. */
    .page-cover {
        min-height: 220px;
        background-position: center top !important;
    }

    .page-cover > .container {
        padding-top: 34px;
        padding-bottom: 32px;
    }
}

@media (max-width: 420px) {
    .info-bar > .container > .row {
        min-height: 132px;
    }

    .info-bar .logo-box {
        width: 65%;
    }

    .info-bar .info-box {
        width: 35%;
    }

    .info-bar .social-lists-wSearch.topsocial kbd {
        padding-right: 8px;
        padding-left: 8px;
        font-size: 11px;
    }
}

/* V9 mobile header flow reset.
   Overrides V8's absolute-positioned utility row so logo, hamburger,
   knowledge-base search and Add Company cannot overlap. */
@media (max-width: 767px) {
    .info-bar > .container > .row {
        display: block !important;
        position: relative !important;
        min-height: 0 !important;
        height: auto !important;
        padding-top: 10px !important;
        padding-bottom: 12px !important;
    }

    .info-bar .logo-box {
        display: block !important;
        float: none !important;
        width: 100% !important;
        min-height: 52px;
        padding-right: 58px !important;
        padding-left: 15px !important;
    }

    .info-bar .logo-box .logo,
    .info-bar .logo-box .logo img {
        display: block;
        max-width: 100%;
    }

    .info-bar .info-box {
        display: block !important;
        float: none !important;
        position: static !important;
        width: 100% !important;
        padding: 0 15px !important;
        clear: both;
    }

    .info-bar .info-box .media,
    .info-bar .info-box .media-body {
        display: block !important;
        position: static !important;
        float: none !important;
        width: 100% !important;
        overflow: visible !important;
    }

    .navbar-toggle.nav-hider {
        position: absolute !important;
        top: 10px !important;
        right: 15px !important;
        left: auto !important;
        float: none !important;
        display: block !important;
        width: 42px;
        height: 42px;
        margin: 0 !important;
        padding: 3px 8px !important;
        z-index: 20;
    }

    .info-bar .social-lists-wSearch.topsocial {
        display: block !important;
        position: static !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        width: 100% !important;
        margin: 8px 0 0 !important;
        padding: 0 !important;
        clear: both;
    }

    .info-bar .social-lists-wSearch.topsocial > li,
    .info-bar .social-lists-wSearch.topsocial > li:first-child,
    .info-bar .social-lists-wSearch.topsocial > li:last-child {
        display: block !important;
        float: none !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 0 8px !important;
        padding: 0 !important;
        border: 0 !important;
        clear: both;
    }

    .info-bar .social-lists-wSearch.topsocial > li:last-child {
        margin-bottom: 0 !important;
    }

    .info-bar .social-lists-wSearch.topsocial form {
        display: block !important;
        position: relative;
        width: 100% !important;
        margin: 0 !important;
    }

    .info-bar .social-lists-wSearch.topsocial input[type="text"] {
        display: block !important;
        width: 100% !important;
        height: 42px !important;
        margin: 0 !important;
        padding: 8px 44px 8px 12px !important;
        box-sizing: border-box;
    }

    .info-bar .social-lists-wSearch .search-pop {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        left: auto !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 42px !important;
        height: 42px !important;
        margin: 0 !important;
    }

    .info-bar .social-lists-wSearch.topsocial > li:last-child > a {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        text-align: center;
        text-decoration: none !important;
    }

    .info-bar .social-lists-wSearch.topsocial kbd {
        display: block !important;
        width: 100% !important;
        min-height: 40px;
        margin: 0 !important;
        padding: 9px 12px !important;
        box-sizing: border-box;
        white-space: normal;
        text-align: center;
    }

    /* Main navigation remains in normal flow above the hero content. */
    .page-cover .main-navigation.navbar {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        margin: 0 !important;
    }

    .page-cover {
        background-position: center top !important;
    }
}

@media (max-width: 420px) {
    .info-bar > .container > .row {
        min-height: 0 !important;
        height: auto !important;
    }

    .info-bar .logo-box,
    .info-bar .info-box {
        width: 100% !important;
    }
}