/**
Fonts
 */

@font-face {
    font-family: 'ToyotaType-Book';
    font-style: normal;
    font-weight: normal;
    src: local('ToyotaType-Book'), url('../../fonts/toyota/ToyotaType-Book.otf') format('otf');
}

@font-face {
    font-family: 'ToyotaType-BookIt';
    font-style: normal;
    font-weight: normal;
    src: local('ToyotaType-BookIt'), url('../../fonts/toyota/ToyotaType-BookIt.otf') format('otf');
}

@font-face {
    font-family: 'ToyotaType-Light';
    font-style: normal;
    font-weight: normal;
    src: local('ToyotaType-Light'), url('../../fonts/toyota/ToyotaType-Light.otf') format('otf');
}

@font-face {
    font-family: 'ToyotaType-LightIt';
    font-style: normal;
    font-weight: normal;
    src: local('ToyotaType-LightIt'), url('../../fonts/toyota/ToyotaType-LightIt.otf') format('otf');
}

@font-face {
    font-family: 'ToyotaType-Regular';
    font-style: normal;
    font-weight: normal;
    src: local('ToyotaType-Regular'), url('../../fonts/toyota/ToyotaType-Regular.otf') format('otf');
}

@font-face {
    font-family: 'ToyotaType-RegularIt';
    font-style: normal;
    font-weight: normal;
    src: local('ToyotaType-RegularIt'), url('../../fonts/toyota/ToyotaType-RegularIt.otf') format('otf');
}

@font-face {
    font-family: 'ToyotaType-Semibold';
    font-style: normal;
    font-weight: normal;
    src: local('ToyotaType-Semibold'), url('../../fonts/toyota/ToyotaType-Semibold.otf') format('otf');
}

@font-face {
    font-family: 'ToyotaType-SemiboldIt';
    font-style: normal;
    font-weight: normal;
    src: local('ToyotaType-SemiboldIt'), url('../../fonts/toyota/ToyotaType-SemiboldIt.otf') format('otf');
}

/**
Colors:

Base Red: #ff0022
Hover: #719987

 */


body, p {
    font-family: 'ToyotaType-Light', 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
}

body {
    background: #fff;
}

.section-overlay-2 {
    margin-top: 460px;
    padding-top: 32px;
    height: 120px;
}

@media (max-width: 768px) {
    .img-logo {
        height: 64px !important;
    }

    .section-overlay-2 {
        margin-top: 140px;
        background: transparent !important;
    }
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
    font-family: 'ToyotaType-Book', 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.1em;
    word-break: break-word;
    letter-spacing: 2px;
    text-transform: none;
}

h1 {
    font-size: 3.6em;
}

h2 {
    font-size: 2.4em;
}

h3 {
    font-size: 2.2em;
}

h3.small {
    font-size: 1.8em;
}

p {
    margin-top: 5px;
    font-size: 1.3em;
}

p.small {
    font-size: 1.1em;
}

p.big {
    font-size: 1.6em;
}

.text-underline, .text-underline:visited {
    text-decoration: underline;
    font-weight: bold;
    color: #282830 !important;
}

.mt-6 {
    margin-top: 64px !important;
}

.row.offset-top {
    margin-top: 100px;
}

.rounded {
    border-radius: 20px;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

nav.navbar {
    border: none;
    padding-bottom: 0;
}

nav.navbar .container {
    border-bottom: 1px solid #28283000027;
    height: 60px;
}

nav.navbar .navbar-right a {
    color: #282830;
}

nav.navbar .navbar-right a:hover, nav.navbar .navbar-right a:focus {
    color: #ff0022 !important;
}

.bg-primary, .bg-primary .container, .bg-primary .row {
    background: #ff0022 !important;
    color: #fff !important;
}

.bg-white{
    background: #fff;
}

.bg-transparent, .bg-transparent .row {
    background: transparent;
    color: #fff;
}

.bg-transparent-half {
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
}

.bg-transparent-half .row {
    background: transparent;
    color: #fff;
}

.bg-black {
    background: #282830 !important;
    color: #fff;
}

.text-primary {
    color: #ff0022 !important;
}

.text-lighter {
    opacity: 70%;
}

.text-left {
    text-align: left;
}

.text-justify {
    text-align: justify;
}

.results-item {
    min-height: 440px;
}

strong {
    font-family: 'ToyotaType-Book', 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
    font-weight: bold;
}

i.f-icon {
    width: 10px;
    height: 20px;
    display: inline-block;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    opacity: 0.8;
}

.f-icon.arrow-right {
    background: url('../img/design/500e-2020/arrow_right.png');
}

.bg-dark, .bg-dark .container, .bg-dark .row {
    background: #282830 !important;
    color: #fff !important;
}

.bg-dark .modal-body div, .bg-dark .modal-header {
    color: #282830 !important;
}

.float-left {
    float: left;
}

.btn {
    font-family: 'ToyotaType-Light', 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
    border-radius: 32px !important;
}

.btn.btn-primary {
    color: #fff !important;
    background: #ff0022 !important;
    text-transform: none;
    border: 2px solid #ff0022;
    box-shadow: none !important;
    font-size: 1em;
}

.btn.btn-secondary {
    color: #282830 !important;
    background: rgb(236, 238, 238);
    text-transform: none;
    font-size: 1em;
    border: 2px solid rgb(236, 238, 238);
}

.btn.btn-secondary:hover, .btn.btn-secondary:focus {
    color: #fff !important;
    background: #ff0022;
    border: 2px solid #ff0022;
}

.btn.btn-primary-light {
    background: rgb(236, 238, 238) !important;
    border: 1px solid rgb(236, 238, 238) !important;
}

.btn.btn-primary:hover, .btn.btn-primary:focus {
    border: 2px solid #282830 !important;
    background: #282830 !important;
    color: #fff !important;
    box-shadow: none !important;
}

.btn.btn-primary-light:hover, .btn.btn-primary-light:focus {
    background: #ff0022 !important;
    color: #fff !important;
    border: 1px solid #fff !important;
}

.btn.action-step-1 {
    padding-top: 14px;
    padding-bottom: 14px;
    padding-left: 40px;
    padding-right: 40px;
}

.btn.btn-round {
    border-radius: 20px;
}

a, a:visited, .text-orange {
    font-family: 'ToyotaType-Light', 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
    color: #ff0022;
}

a:hover, a:focus {
    color: #ff0022;
}

.text-light, .text-light a {
    color: #fff !important;
}

.progress-header {
    background: rgb(236, 238, 238);
    border-radius: 32px;
    font-size: 1.5em !important;
    color: black;
}

.btn.btn-secondary.progress-header:hover, .btn.btn-secondary.progress-header:focus, .btn.btn-secondary.progress-header:active {
    background: rgb(236, 238, 238) !important;
    border-color: rgb(236, 238, 238) !important;
    color: black !important;
    cursor: default !important;
    box-shadow: none !important;
}

.bg-primary-muted-1 {
    background: rgb(236, 238, 238);
    border-radius: 32px;
}

.bg-primary-muted-2 {
    background: rgb(236, 238, 238);
    border-radius: 32px;
}

.d-none {
    display: none;
}

.slot-selection-container .bootstrap-datetimepicker-widget {
    top: 60px !important;
    left: 60px !important;
    background: transparent;
    box-shadow: none;
    -webkit-box-shadow: none;
}

.day.new:not(.disabled)  div{
    color: #2b282b !important;
}

@media (max-width: 1920px) {
    .slot-selection-container .bootstrap-datetimepicker-widget {
        left: 50% !important;
        margin-left: -130px !important;
    }
}

@media (max-width: 778px) {
    .d-step-4 .col-md-9 {
        padding-left: 32px;
        padding-right: 32px;
    }

    #list-wrapper {
        padding-left: 38px;
        padding-right: 38px;
    }

    .slot-list-group {
        margin-left: 32px;
        margin-right: 32px;
    }

    .info-scroller {
        padding-left: 16px;
        padding-right: 16px;
    }

    h3 {
        font-size: 1.6em;
    }

    .bg-primary-muted-1, .bg-primary-muted-2  {
        margin-top: 32px;
        margin-left: 32px;
        margin-right: 32px;
    }

    #select-slot {
        padding-left: 0 !important;
    }
}

.navbar-nav {
    float: left !important;
    margin: 0;
}

.navbar-header {
    float: left !important;
}

@media (min-width: 448px) {
    .navbar-right {
        float: right !important;
        margin-right: -15px;
    }
}

.navbar-nav > li {
    float: left;
}

.slot-selection-container .bootstrap-datetimepicker-widget thead tr:last-child {
    color: #1e2924 !important;
}

.slot-selection-container .bootstrap-datetimepicker-widget thead tr:last-child th {
    color: #1e2924 !important;
}

.slot-selection-container .bootstrap-datetimepicker-widget thead tr:last-child th:first-child {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    padding-left: 10px;
}

.slot-selection-container .bootstrap-datetimepicker-widget thead tr:last-child th:last-child {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    padding-right: 10px;
}

.slot-selection-container .bootstrap-datetimepicker-widget tr {
    border-top: 4px solid transparent;
}

.bootstrap-datetimepicker-widget table td.active > div, .bootstrap-datetimepicker-widget table td.active:hover > div {
    background: #ff0022 !important;
    box-shadow: none !important;
}

.leaflet-popup-content-wrapper {
    font-family: 'ToyotaType-Light', 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
    border-radius: 8px;
    color: #1e2924;
    background: #fff;
    opacity: 0.8;
    min-width: 240px;
}

.leaflet-popup-tip {
    display: none;
}

.leaflet-touch .leaflet-control-attribution {
    background: #ff0022;
    color: #fff;
}

.leaflet-touch .leaflet-control-attribution a {
    color: #fff;
}

.row-grey {
    background: #333;
    padding-bottom: 00px;
}

section.separate-section {
    position: relative;
    padding: 10em;
    background: #ff0022;
    color: white;
    text-align: center;
}

.ss-style-doublediagonal {
    background: #333;
}

.ss-style-doublediagonal::before {
    background: #333;
}

.models-wrapper {
    align-items: center;
    justify-content: center;
}

.row-map {
    background: #fff url('{{ asset(' img/design/jeep-map.png ') }}');
    background-repeat: repeat;
}

.row-map td.slot-choice {
    border-radius: 20px !important;
    border-color: transparent !important;
    background: transparent !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: 40px !important;
    opacity: 0.9;
}

.row-map td.slot-choice span.label {
    background: transparent !important;
    color: #282830;
    font-weight: normal;
}

.row-map td.reserved, .row-map td:disabled {
    background: #282830 !important;
    border: 2px solid transparent !important;
    border-radius: 30px !important;
}

.row-map th {
    border: none !important;
}

.row-map td.reserved.complete, .row-map td.reserved.complete:disabled {
    background: transparent !important;
    color: #282830 !important;
}


@media (min-width: 768px) {

    .row-map td.slot-choice:hover, .row-map td.slot-choice.active, .row-map td.slot-choice:focus {
        background: #ff0022 !important;
        color: #fff !important;
    }

    .row-map td.slot-choice:hover span.label, .row-map td.slot-choice.active span.label, .row-map td.slot-choice:focus, span.label {
        font-size: 1.2em !important;
    }

    .row-map td.slot-choice.active {
        background: #ff0022 !important;
        color: #fff !important;
    }
}


@media (max-width: 768px) {
    .row-map td.reserved span, .row-map td:disabled span, .row-map td, .row-map th {
        font-size: 1.2em !important;
    }

    .row-map td.slot-choice:hover, .row-map td.slot-choice:focus {
        background: #ff0022 !important;
        color: #fff !important;
    }

    .row-map td.slot-choice.active {
        background: #ff0022 !important;
        color: #fff !important;
    }

    .row-map td.slot-choice.active span.label {
        font-size: 1.2em !important;
    }
}

@media (pointer: coarse) {
    .row-map td.reserved span, .row-map td:disabled span, .row-map td, .row-map th {
        font-size: 1.2em !important;
    }

    .row-map td.slot-choice:hover, .row-map td.slot-choice:focus {
        background: #ff0022 !important;
        color: #fff !important;
    }

    .row-map td.slot-choice.active {
        background: #ff0022 !important;
        color: #fff !important;
    }
}

.row-map td.reserved span {
    color: white !important;
    text-transform: none !important;
    font-size: 0.8em !important;
    font-family: 'ToyotaType-Light', 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
    font-weight: lighter;
}

.row-map td.slot-choice.active span.label, .row-map td.slot-choice:hover span.label, .row-map td.slot-choice:focus span.label {
    color: #fff !important;
}

#map {
    margin-top: 0;
}

.list-group, .list-group-item {
    background: none;
    border-radius: 0 !important;
}

.list-group-item {
    margin-bottom: 12px;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}

form input, form select, form label, form checkbox {
    font-family: 'ToyotaType-Light', 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
}


.form-control,
.form-group .form-control,
.form-control[disabled],
.bootstrap-select {
    border-bottom: 1px solid #282830 !important;
    outline: none !important;
    background-image: none !important;
}

.form-group.text-left.date-group {
    margin-bottom: 40px;
}

.select-with-transition {
    background-image: none !important;
}

.form-group.is-focused .form-control {
    border: 0 !important;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background-color: rgba(3, 117, 134, 0.08);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ff0022), to(#ff0022)), -webkit-gradient(linear, left top, left bottom, from(#D2D2D2), to(#D2D2D2)) !important;
    background-image: linear-gradient(#ff0022, #ff0022), linear-gradient(#D2D2D2, #D2D2D2) !important;
}

.form-group.has-error .form-control {
    background-color: rgba(213, 0, 0, 0.08);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#D50000), to(#D50000)), -webkit-gradient(linear, left top, left bottom, from(#D2D2D2), to(#D2D2D2)) !important;
    background-image: linear-gradient(#D50000, #D50000), linear-gradient(#D2D2D2, #D2D2D2) !important;
    border: 0 !important;
}

.dropdown-menu li a:hover, .dropdown-menu li a:focus, .dropdown-menu li a:active {
    background-color: #58585a !important;
    color: white !important;
}

.filter-control.form-control {
    color: #fff !important;
    border-bottom-color: #fff !important;
    border-bottom-width: 1px !important;
    padding: 5px;
}

.filter-control.form-control option {
    color: #282830 !important;
}

.model-details {
    background: transparent;
}

.model-image {
    margin-top: 24px;
    margin-bottom: 24px;
}

.text-#1a171b {
    color: #1a171b;
}

.lds-dual-ring:after {
    border: 5px solid #ff0022;
    border-color: #ff0022 transparent #ff0022 transparent;
    animation: lds-dual-ring 1.2s linear infinite;
}

.branding-footer a {
    text-decoration: underline;
    color: white !important;
}

.form-group label.control-label {
    font-size: 16px;
    color: #1a171b;
}

section.section-suzuki {
    box-shadow: 0px 0px 23px #8a8a8a;
}

.ss-style-triangles-shadow::after {
    left: 50%;
    width: 100px;
    height: 100px;
    -webkit-transform: translateX(-50%) rotate(45deg);
    transform: translateX(-50%) rotate(45deg);
    box-shadow: 13px 15px 20px 0px #e8e8e8;
}

.nav-tabs li a {
    color: #1a171b !important;
    padding: 5px;
}

.nav-tabs li.active a {
    color: #1a171b !important;
}

.nav-tabs li a:hover {
    color: #1a171b !important;
    padding: 5px;
}

.nav-tabs li.active {
    border-bottom: 3px solid #ff0022;
}

.cc-color-override-382972913 .cc-link, .cc-color-override-382972913 .cc-link:active, .cc-color-override-382972913 .cc-link:visited {
    color: rgb(214, 214, 214) !important;
}

.datepicker table td, .datepicker table td div {
    color: #1a171b;
}

.datepicker table td.disabled div {
    color: #CFD8D7;
}

.datepicker table thead {
    color: #1a171b;
}

.card [data-background-color="branded"] {
    background: #ff0022;
}

.label.label-primary {
    background: #ff0022;
}


.btn-info i {
    color: white !important;
}

.btn-info {
    background: #12283b !important;
}

.btn-info:hover, .btn-info:focus {
    background: #ff0022 !important;
    color: white !important;
}

.cc-btn.cc-dismiss {
    background: #ff0022 !important;
    color: white !important;
}


.cc-window {
    background: #58585a !important;
}

.form-group.has-error .form-check label {
    background-color: rgba(213, 0, 0, 0.08);
    border-bottom: 2px solid #D50000 !important;
}

.info-desc p {
    padding: 0 !important;
}