﻿@media only screen and (max-width: 900px) {
    .d-display {
        display: none;
    }

    .m-display {
        display: block;
    }

    #kt_company_box {
        margin-top: -35px !important;
    }

    .section-search {
        margin-top:0px !important;
    }

    #total_days {
        display: none;
    }

    #pickup_date_widget, #dropoff_date_widget {
        width: 70% !important;
        padding-right: 0px !important;
        padding-left: 0px !important;
    }

    #pickup_hour_widget, #dropoff_hour_widget {
        width: 30% !important;
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
    .search-box-banner{
        padding: 5px 10px !important;
    }

    #kt_pickup_location, #kt_dropoff_location {
        width: 100% !important;
        display:block; 
        padding-right: 0px !important;
        padding-left: 0px !important;
    }

    #kt_one_location, #kt_two_location {
        padding-bottom: 0px !important;
    }

    #kt_diff_location {
        margin: 0px !important;
        padding-bottom: 0.5rem !important;
    }
    .date-time-gap{
        gap: 0.625rem;
    }

    .flex-item-left, .flex-item-right {
        flex: 100%;
    }

    .flex-item-center {
        display: none !important;
    }

    .date-mob {
        padding-right: 0px !important;
        padding-left: 0px !important;
        width: 100% !important;
    }

    #PickupDate, #DropoffDate {

        font-size: 15px !important;
    }

    #PickupHour, #DropoffHour {

        font-size: 15px !important;
    }

    #kt_search_button {
        padding: 0px !important;
        width: 100%;
        margin-top: 10px !important;
        display: block !important;
    }

    .btn.btn-success.btn-lg {
        display: block;
        width: 100%;
    }

    .center-text {
        padding: 0px !important;
    }
    .checkmark {
        height: 15px !important;
        width: 15px !important;
    }
    .custom_check {
        padding-left: 20px ;
        max-width:65%;
    }
    
    .age-country-text {
        font-size: 0.75rem;
        white-space: nowrap;
    }
    .age-country-select {
        flex-wrap: wrap;
    }
    .custom_check {
        margin-bottom: 0.5rem !important;
    }
    .dropoff-location-text{
        font-size: 0.75rem;
    }
    .dropoff-age-country {
        display: block;
        align-items: start;
    }

    #pickup_location, #dropoff_location {
        margin-bottom: 10px !important;
    }

    #kt_search_container {
        padding: 0px !important;
    }

    #kt_company_container {
        padding: 0px !important;
        border-radius: 0px !important;
    }

    #kt_search_box {
        margin-top: .0rem !important;
    }

    #kt_company_box {
        border-radius: 0px !important;
    }


    .form-label {
        font-size: 16px !important;
    }

    .fs-mob {
        font-size: 15px !important;
    }
    .search-fields {
        flex-direction: column;
        width: 100%;
    }

    .search-box-banner .group-img i {
        top: 15px !important;
    }
    .search-container  {
        display: flex;
        flex-direction: column;
        align-items: center;        
        justify-content: center; 
        width: 100%;    
    }
    .twitter-typeahead {
        height: 32px;
    }


    .input-svg-left {
        width: 12px;
        height: 12px;
    }
    .svg-icon svg {
        height: 1.15rem !important; 
        width: 1.15rem !important
    }
    #different_location_desktop {
        display: none;
    }
    #different_location_mobile {
        display: block;
    }
    .button-search {
        height: 32px;  
        line-height: 32px;
        padding: 0 15px; 
        font-size: 0.75rem;  
        text-align: center; 
        display: flex;
        align-items: center; 
        justify-content: center;
        background-color: #ffdd00;
        width: 100%;
        text-underline-offset: 4px;
        border: none; 
        border-radius: 0.5rem;
        outline: none; 
    }


    


    .pickup-date-55 {
        height: 32px;
        border-radius: 8px;
    }

    .pickup-date-45 {
        height: 32px;
        border-radius: 8px;
    }


    .input-label-top {
        font-size: 0.75rem;
    }
    .input-label-top-left {
        font-size: 0.75rem;
    }
    #kt_pickup_date {
        display: flex;
        flex-direction: row;
        justify-content: space-between ;
        align-items: center;
        width: 100%;
    }
    .date-field {
        width: 100%;
    }
    .time-field {
        width:100%;
    }

    #kt_dropoff_date {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    .search-date-time{
        display: flex;
        flex-direction: column;
        width: 100%;
        padding-right: 0;
    }

    .pickup-dropoff {
        display: flex;
        flex-direction: column;
        padding-bottom: 10px !important; 
        width: 100%;
        padding-right: 0; 
    }



    .search-btn {
        width: 100%;
        display: flex; 
        flex-direction: column;
        align-self: start;
        height: 32px;

    }

    .checkmark-section {
        display: block;
        width: 100%;
        position: relative;
    }

    

    .rental-period-section {
        width: 100%;
        text-align: center;
        margin-top: 10px;
    }


    .footer-section {
        flex-direction: row;
    }


    .rent {
        margin-bottom: .75rem !important;
    }

    .typeahead {
        font-size: 15px !important;
    }


    .search-box-banner {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        margin-bottom: 0px !important;
        box-shadow: none !important;
    }
    .top-banner-overlay{
        top: -150px;
    }

    .menu-header {
        padding-left: 0px !important;
    }

    .age-m {
        display: block !important;
    }

    .info-m {
        display: block !important;
    }

    .info-d {
        display: none;
    }

    .btn-i-fc {
        flex-direction: column !important;
    }

    .fl-d-m {
        display: none !important;
    }

    .f-col-m {
        flex-direction: column !important;
    }

    .l-m-w100, .dp-m-w100, .search-btn {
        width: 100% !important;
        padding-right: 0px !important;
    }

    .l-m-w100 {
        flex-direction: column !important;
        padding-bottom: 0px !important;
        margin-bottom: 0px !important;
    }

    .dp-m-w100 {
        flex-direction: column !important;
    }

    .date-form-group {
        padding-right: 0px !important;
        padding-bottom: 10px !important;
    }

    .date-w60 {
        width: 70% !important;
    }

    .time-w40 {
        width: 30% !important;
    }

    .dl-m-d-none {
        display: none !important;
    }

    .dl-d-d-none {
        display: flex !important;
        flex-direction: column !important;
    }

    #kt_dropoff_location .d-inline-block.autocomplete-box .typeahead.tt-hint,
    .dl-d-d {
        border-radius: .375rem;
    }

    #kt_dropoff_location {
        width: 100% !important;
    }

    .rental-period-line {
       position: absolute;
       top: 0;
       right: 0;
    }

    .m-w100 {
        padding-top: 0.75rem !important;
        width: 100% !important;
        justify-content: center !important;
    }


    .top-banner-overlay .item span{
        font-size: 12px;
    }

    .header {
        box-shadow: none !important;
        border-bottom: 1px solid white;
    }

    .np-m-none {
        display: none;
    }

    .lead.fs-4.text-secondary {
        font-size: 1.25rem !important;
    }

    .rental-days-text{
        font-size: 0.625rem;
    }
    .dropoff-location-text{
        font-size: 0.625rem;
    }

    .mb-m-4 {
        margin-bottom: 1.5rem !important;
    }

    .btn-m {
        position: relative;
        text-transform: initial;
        -webkit-transition: all 0.5s;
        transition: all 0.5s;
        display: block;
        width: 100%;
        color: #fff;
        background-color: #2F2F2F;
        margin-top: 1.5rem;
    }

    .d-none-m {
        display: none;
    }
}

@media only screen and (max-width: 380px) {
    
    .age-country-text{
        font-size: 0.625rem;
    }
    .custom_check {
        padding-left: 20px ;
        max-width:50%;
    }
    
}