/*TODO Fix layout*/


.hero-container {
    position: relative;
    /*    max-height: 75svh; */
    max-height: 75svh;
    /*default 69.4svh*/
    /*45svh*/
    min-height: 45svh;
    background-color: rebeccapurple;
    z-index: -1;
    background-image: url("src/dynacle_bus_hero_1.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.overlay {
    border-image-source: linear-gradient( rgb(0, 0, 0, 0.40), rgb(0, 0, 0, 0.40));
    /*    border-image-source: linear-gradient(to right, lavender, #ffceb8);*/
    border-width: 0;
    border-style: solid;
    border-image-slice: fill 1;
}

.hero-img {
    width: 100%;
    max-height: 65svh;
    min-height: 40svh;
    /*    display:block;*/
    position: relative;
    display: none;
    z-index:-1;
}

.hero-content-wrapper {
/*    color: black;*/
    position: absolute;
    top: 15%;
    left: 5%;
}


.bookingbar-container {
    border-radius: 30px;
    background-color: white;
    display: block;
    max-width: 100%;
    /*    min-width: 100%;*/
    margin-right: 5%;
    margin-left: 5%;
    z-index: 1;
/*    margin-top: -1.7%;*/
    margin-top: -40px;
}

.bookingbar-wrapper {
    padding: 0.5rem;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.bookingbar-item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
}

.bookingbar-location-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

.bookingbar-location-container {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 5px;
    overflow: hidden;
    border: solid 0.1px #cfcfcf;
    border-radius: 3rem;
}

.bookingbar-location-1 {
    /*    border: solid 0.1px #cfcfcf;
    border-start-start-radius:3em;
    border-end-start-radius:3em;*/
}

.bookingbar-location-divider {
    max-width: inherit;
}


.bookingbar-location-icon {
}

.bookingbar-location-2 {
    /*    border: solid 0.1px #cfcfcf;
    border-start-end-radius:3em;
    border-end-end-radius:3em;*/
    width: inherit;
}

.bookingbar-location {
    background-color: transparent;
}

.bookingbar-location-input {
    background-color: transparent;
    border: none;
}

.map-popup {
    min-width: 500px;
    margin-left: -60px;
}


.bookingbar-price {
    /*    border:2px solid red;*/
    display: flex;
    flex-wrap: nowrap;
    font-size: 1.8rem;
    font-weight: 500;
    align-self: center;
    justify-content: center;
    min-width: 7rem;
    max-width: 7rem;
}

.feature-container {
    margin-top: auto;
}

.feature-wrapper {
    display: flex;
    background-image: linear-gradient(to right, lavender, #ffceb8);
    border-radius: 20px;
    margin-top: 50px;
    justify-content: space-between;
    width: 90%;
    padding-left: 10px;
    padding-right: 10px;
    justify-items: center;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    z-index: -1;
}

    .feature-wrapper div {
        border-radius: 20px;
        padding: 20px;
    }

    .feature-wrapper > div > img {
        width: 50px;
        height: 50px;
        margin-bottom: 10px;
    }

.feature-title {
    font-weight: 700;
    font-size: 24px;
    margin-bottom: auto;
}

.feature-subtitle {
    font-size: 14px;
}

.quotation-content-wrapper {
    border-radius: 20px;
    padding: 20px;
}

.customer-quote-container {
    position: relative;
    align-self: center;
    margin-left: 10%;
    margin-right: 10%;
    left: 0;
    right: 0;
}

.customer-quote-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

    .customer-quote-wrapper > div {
        border-radius: 10px;
        padding: 30px;
        background-color: white;
        overflow: hidden;
    }

.customer-quote-icon {
    margin-bottom: 10px;
}

.customer-quote-content {
    font-size: 12px;
    text-align: justify;
    padding: 1rem;
}

.customer-quote-bottom-wrapper {
    display: block;
    align-content: center;
}

.customer-quote-user-wrapper {
    align-content: center;
}

.customer-quote-user-image {
    height: 35px;
    width: fit-content;
}

.customer-quote-username {
    font-size: 14px;
    margin-bottom: -2px;
}

.customer-quote-coorporate {
    font-size: 12px;
}

/*Booking page google map*/
.map-canvas {
    max-width: 100%;
    min-width: 100%;
    height: 300px;
}

/*Booking page input*/
.booking-input-container {
    margin-top: 2rem;
    display: flex;
    gap: 10px;
    max-width: 670px;
}

.booking-input-wrapper {
    width: 100%;
}

.remove-location {
    align-self: end;
    cursor: pointer;
    max-width: 10px;
    min-width: 10px;
}

.location-input-wrapper {
    display: grid;
    gap: 2px;
    grid-template-columns: auto 24px;
}

.location-input-wrapper-2 {
    display: flex;
    gap: 2px;
}

.pickup-location-wrapper {
    width: 100%;
    display: grid;
    grid-template-columns: auto auto;
    gap: 10px;
}

.pickup-location-wrapper-2 {
    width: 100%;
    display: grid;
    grid-template-columns: auto 0px;
    gap: 10px;
}

.pickup-location-input {
    /*    display: grid;
    grid-template-columns: auto 20px;*/
}

    .pickup-location-input > input {
        /*        border: none;*/
    }

    .pickup-location-input > img {
        /*        position: relative;
        align-self: center;*/
    }


.add-new-location {
    display: flex;
    gap: 15px;
    align-items: start;
    align-content: center;
    margin: 1rem 0;
    align-content: center;
    align-items: center;
}

    .add-new-location:hover {
    }

    .add-new-location > a {
        text-decoration: none;
        cursor: pointer;
        user-select: none;
        position: relative;
    }

        .add-new-location > a:hover {
            color: red;
        }

    .add-new-location > img {
        border-radius: 50%;
        background-color: transparent;
        margin-left: -1px;
        width: 20px;
        height: 20px;
    }

.pickup-item-list {
    counter-reset: item;
    list-style: none;
}

    .pickup-item-list > li {
        position: relative;
        margin-bottom: 0;
        list-style: none;
    }

        .pickup-item-list > li::after {
            content: url(src/ic_pin_location_red_32dp.svg);
            position: absolute;
            top: 0px;
            left: -40px;
        }

.dropoff-item-list {
    counter-reset: item;
    display: flex;
    flex-direction: column-reverse;
    /*    margin-top: 1rem;*/
}

    .dropoff-item-list > li {
        position: relative;
        margin-bottom: 0;
        list-style: none;
    }

        .dropoff-item-list > li:after {
            content: url(src/ic_pin_location_blue_32dp.svg);
            position: absolute;
            top: 0px;
            left: -40px;
        }



.disposal-item-list {
    counter-reset: item;
    list-style: none;
}

    .disposal-item-list > li {
        position: relative;
        margin-bottom: 0;
        list-style: none;
    }

        .disposal-item-list > li:after {
            content: url(src/ic_pin_location_red_32dp.svg);
            position: absolute;
            top: 0px;
            left: -40px;
        }

.btn-confirm-location {
    border: none;
    float: right;
    border-radius: 2rem;
    height: 2.5rem;
    width: 12rem;
    margin-top: 2rem;
}

/*Booking page*/
#bookingDetailParent {
    padding: 30px;
    margin-left: 80px;
    margin-right: 80px;
}

.booking-page-title-header {
    text-align: start;
    margin-left: 0px;
}

.booking-content-container {
    /*    display: grid;*/
    /*    grid-template-columns: 1fr auto 1fr;*/
    padding: 0px;
    margin-left: 0px;
    margin-right: 0px;
    align-self: center;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0 1.5rem;
    gap: 2rem;
}

    .booking-content-container > div {
        /*        flex-grow: 2;
        flex-shrink: 1;
        flex-basis: 25%;*/
        flex: 1;
    }

.booking-location-wrapper {
    display: block;
    position: relative;
}

.booking-detail-wrapper {
    display: block;
    position: relative;
}

.booking-service-type {
    display: flex;
    gap: 1rem;
}

.booking-input-passenger-container {
    display: grid;
    grid-template-columns: repeat(2,50%);
    gap: 1rem;
    min-width: 100%;
}

.alert {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 10px;
}

    .alert > img {
        margin-top: 2px;
    }

.booking-input-passenger-wrapper {
    display: flex;
}

    .booking-input-passenger-wrapper > img {
        margin-right: 20px;
    }

/*booking type of fleet*/
.booking-type-of-fleet-wrapper {
    margin-top: 10px;
    width: 100%;
}

.type-of-fleet-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-column-gap: 2px;
    grid-row-gap: 10px;
}

.type-of-fleet-item {
    width: 100%;
    height: 100%;
    max-width: 100%;
    background-color: #F8F9FA;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    position: relative;
}

.type-of-fleet-item-header {
    display: flex;
    width: 100%;
    padding: 10px;
    justify-content: center;
    align-content: space-around;
}

    /*40x40*/
    .type-of-fleet-item-header > img {
        width: 40px;
        height: 40px;
        max-width: 40px;
        min-height: 40px;
        margin-right: 10px;
    }

    .type-of-fleet-item-header > div {
        position: relative;
    }

        .type-of-fleet-item-header > div > h6 {
            width: 100%;
            position: relative;
            margin-bottom: -5px;
        }

.type-of-fleet-item-title-wrapper {
}

.type-of-fleet-item-title {
}

.type-of-fleet-item-button-wrapper {
    margin-top: 10px;
    margin-bottom: 10px;
    justify-items: center;
    display: grid;
    grid-template-columns: auto auto auto;
}

.type-of-fleet-item-disabled {
    position: absolute;
    background-color: rgb(0, 0, 0, 0.4);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    animation: colorChange 0.3s ease;
}

/*booking additional service*/
.booking-additional-service-wrapper {
    margin-top: 10px;
    justify-content: start;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

    .booking-additional-service-wrapper > div {
        /*        font-size: 14px;*/
        display: inline;
        min-width: 150px;
    }

/* View Divider */
.form-divider-vertical {
    width: 1px;
    max-width: 1px;
    min-height: 90%;
    border-left: 1px;
    border-width: 1px;
    border-color: #acacac;
    border-style: dashed;
    margin-right: 5vw;
}

.form-divider-horizontal {
    width: 100%;
    min-height: 1px;
    border-width: 1px;
    border-color: #acacac;
    border-style: dashed;
    margin-top: 30px;
    margin-bottom: 30px;
}

.horizontal-line {
    width: 100%;
    min-height: 0.1px;
    border-width: 0.1px;
    border-color: #acacac;
    border-style: solid;
    margin-top: 2px;
    margin-bottom: 2px;
}


.payment-container {
}

.payment-wrapper {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: space-between;
    /*    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));*/
    gap: 3rem;
    width: 100%;
    margin-top: 4rem;
}

    .payment-wrapper > img {
        flex-grow: 1;
        flex-shrink: 0;
        max-height: 80px;
    }

/*Footer Home*/
.footer-home-container {
    background-color: darkblue;
    position: absolute;
    padding: 2rem;
    min-width: 100%;
    max-width: 100%;
    margin-top: 5rem;
    color: white;
}

.footer-home-wrapper {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 5rem;
    justify-items: start;
    justify-content: space-around;
    /*    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));*/
}

    .footer-home-wrapper > div {
        flex-basis: auto;
        min-width: 10%;
    }


.footer-address {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
    /*    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));*/
    /*grid-template-columns:repeat(3, 1fr);*/
}

    .footer-address > div {
        font-size: 14px;
        /*        border: solid 5px green;*/
        flex-grow: 1;
        flex-shrink: 1;
        /*        flex-basis:10cm;*/
    }

.footer-booking-button {
    height: 75px;
}

.booking-wrapper {
    min-height: 100%;
    max-height: 100%;
}

/*Utils*/
.btn-remove {
    /*    position: absolute;*/
    /*    z-index: 1;*/
    /*    top: 3rem;*/
    right: 0;
    background-color: transparent;
    border: none;
    width: 5rem;
}

    .btn-remove > img {
        width: 30px;
        height: 30px;
    }

.show-form {
    visibility: visible;
    -moz-animation: show 0.3s ease;
    -o-animation: show 0.3s ease;
    -webkit-animation: show 0.3s ease;
    animation: show 0.3s ease;
}

.hide-form {
    visibility: collapse;
    opacity: 0;
    transition: visibility 0s ease 0.1s, opacity 0.1s ease;
}

.errorMessage-container {
    padding: 1rem;
}

.errorMessage {
    max-width: 35%;
}

/*Keyframe*/
@keyframes color-change-disabled {
    from {
        background-color: transparent;
    }

    to {
        background-color: rgb(0, 0, 0, 0.4);
    }
}

@keyframes show {
    from {
        visibility: collapse;
        opacity: 0;
    }

    to {
        visibility: visible;
        opacity: 1;
    }
}

@keyframes hide {
    from {
        opacity: 1;
        visibility: visible;
    }

    to {
        opacity: 0;
        visibility: collapse;
    }
}