/* Styling for the trip wizard booking pages */ 

#numPassengersOutput {
    font-weight: bold;
}

.form-section {
    margin-left: 5px;
    margin-right: -10px;
}

#WaypointsContainer > div {
    padding-right: 0;
}

.waypoint-ball {
    left: 50%;
    top: 50%;
    margin-top: -10px;
    margin-left: -10px;
    height: 20px;
    width: 20px;
    position: absolute;
    background: #fff;
    border-radius: 32px;
    border: solid 2px var(--colorSecondary);
}

.waypoint-line {
    right: 50%;
    top: 0;
    bottom: 0;
    position: absolute;
    border-right: dashed 2px var(--colorSecondary);
    margin-right: -1px;
}

.waypoint-marker {
    margin-bottom: 4px;
}

.waypoint div {
    margin-right: -10px;
}

.address-divider {
    border-top: 1px solid #cacaca;
    margin-left: -10px;
    margin-right: -10px;
}

.address-description {
    padding: 0px;
    font-weight: bold;
    outline: unset;
}

.collapsible-header {
    user-select: none;
    color: #404040;
    cursor: pointer;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 2px;
}

    .collapsible-header.active {
        background-color: #aaa;
        color: #FFF;
    }

        .collapsible-header.active .address-summary .address-description {
            color: #FFF;
        }


    .collapsible-header .col-form-label {
        margin-left: -5px;
        padding-top: 0px;
    }

    .collapsible-header.is-invalid {
        padding: 10px 10px 10px 5px;
    }

        .collapsible-header.is-invalid .address-summary {
            color: #dc3545
        }

    .collapsible-header.active.is-invalid .address-summary {
        color: #ebebeb;
    }

    .collapsible-header.active.is-invalid .invalid-feedback {
        color: #212529;
    }

.collapsible-body {
    background-color: white;
    padding-left: 10px;
    margin-left: -15px;
    padding-bottom: 0;
    overflow: hidden;
}

.collapsible-chevron {
    margin-top: -5px;
}

.collapsible-chevron i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#price-button {
    font-weight: 600;
    background: #404040;
    color: white;
    text-align: center;
    height: 50px;
    position: relative;
    overflow: hidden;
    padding-top: 12px
}

#price-loader {
    position: absolute;
    top: 0;
    height: 5px;
    background-color: var(--colorSecondary);
}

.vehicle-icon-container {
    margin-top: -8px;
}

#vehicle-options-container {
    padding-top: 15px;
}

    #vehicle-options-container > label {
        overflow: hidden;
    }

#trip-price-container {
    position: absolute;
    bottom: 72px;
    right: 20px;
    font-size: 1.5rem;
    font-weight: 600;
}

.card-input-element + .card > .card-img-overlay {
    color: #212529;
    padding: 0;
    font-size: 1.3rem;
    padding-top: 3px;
}

.card-input-element + .card.disabled > .card-img-overlay {
    color: #8d8d8d;
    cursor: default;
}

    .card-input-element + .card.disabled > .card-img-overlay > .card-text-small {
        color: #a8a8a8;
    }

.card-input-element + .card.disabled {
    background-color: transparent !important;
    border: 1px solid #8d8d8d;
}

.card-input-element:checked + .card > .card-img-overlay {
    color: white;
}

.card-input-element:checked + .card .card-text-small {
    color: white;
}

.card-input-element + .card {
    height: calc(36px + 2*1rem);
    color: var(--primary);
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 2px solid var(--colorPrimary);
    border-radius: 4px;
}

    .card-input-element + .card:hover {
        cursor: pointer;
    }

.card-input-element:hover + .card {
    border-color: var(--colorPrimary) !important;
}

.card-input-element:checked + .card {
    background-color: var(--colorPrimary) !important;
    border-color: var(--colorPrimary) !important;
    -webkit-transition: border .3s;
    -o-transition: border .3s;
    transition: border .3s;
}

    .card-input-element:checked + .card > .vehicle-icon-container {
        background-color: white;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        box-shadow: 3px 4px 4px 1px #372c47;
    }

.card-img-overlay > p {
    margin-bottom: -3px;
}

.card-overlay-right {
    right: 15px;
    left: auto;
    font-weight: 500;
}

.card-text-small {
    font-size: 0.9rem;
    color: #656565;
    margin-top: 1px;
}

.tc-payment-button {
    margin-top: 20px;
    width: 100%;
    height: 50px;
    border-color: var(--colorPrimary);
    padding: 0px;
}

#tripsDatePicker {
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;
}

.trips-header {
    padding-right: 0;
    font-size: 12px;
}

.trips-header > .container {
    padding-right: 0;
}

.trips-body {
    margin-left: 0px !important;
}

.trips-body .loader {
    margin: -9px;
}

.cancel-trip .card-footer .btn-group{
    height: 50px;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .collapsible-body {
        padding-top: 10px;
    }

    .collapsible-header {
        padding-top: 15px;
        padding-bottom: 10px;
    }

    #price-button {
        padding-top: 9px;
    }
}