.header_bottom{
background:linear-gradient(180deg, #1890D0 0%, rgb(24 144 208 / 99%) 100%) !important;padding:30px 0 20px;    border-radius: 0 0 20px 20px;
margin: 0 0 15px;
}

.suggestion-list {
position: absolute;
width: 442px;
max-height: 292px;
left:0px;
padding: 0;
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.24), 0px 8px 16px rgba(0, 0, 0, 0.12);
background-color: #fff;
overflow-y: scroll;
z-index: 4;
display: none;
}
ul.suggestion-list.active{
display: block;
}
.suggestion-list > li {
background-color: #fff;
padding:12px 16px;
font-size: 14px;
cursor: pointer;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

@media (max-width:767px) {

.outstation_reantal_form .form-group .form-control, 
.outstation_reantal_form .form-group input {
height: 40px;
font-size: 13px;
}

.car_outstation_form_list .trip_side {
height: 38px;
font-size: 13px;
}
.outstation_reantal_form .form-group {
margin-bottom: 10px;
}
.outstation_reantal_form .btn {
font-size: 13px;
padding: 10px 10px;
}

.car_outstation_price_content p{
font-size: 12px;
}
.coupon_code .form-group .btn {
height: 38px;
width:130px;
}
}

@media (max-width:600px) {
.suggestion-list {
width: 100%;  
}
}
.carCardActive {
border: 1px solid lightgreen;
}
.pac-item {
padding: 6px 4px !important;
}


@media (max-width:767px) {

}

.self_rentalc {
border: 1px solid #ccc;
color: #191919;
border-radius: 10px;
background-color: #fff;
text-decoration: none;
cursor: pointer;
overflow: hidden;
}
.self_rentalc .trip_side{
height: 38px;
display:flex;
align-items:center;
justify-content:center;
}
.self_rentalc .trip_side.active{
border-color: #000;
color:#fff;
background-color: #000;
}
.header_bottom ._title {
text-align: center;
font-size: 18px;
font-weight: 700;
color: #fff;
font-style: italic;
padding:0 10px;
text-transform:capitalize;
}

.more_resutl{font-size:13px;font-weight:600;}
.outstation_reantal_form.coupon_code {
margin-top: 0;
padding: 20px 0 10px;
}

.modal-open .modal-content{height: 100vh;overflow-x: auto;border-radius: 0;padding-bottom:50px;width:100%;margin:auto;border:0;}
body.modal-open{overflow:hidden;}
._modal_header{padding:0px 12px;background:linear-gradient(180deg, #1890D0 0%, rgb(24 144 208 / 99%) 100%) !important;color:#fff;margin-bottom:12px;}
._modal_header h3{font-size:15px;font-weight:500;color:#fff;}
._modal_header .close {font-size: 30px;display: block;cursor:pointer;}


.cureent_switch{padding:0 12px 15px;}
.cureent_switch p{font-size:13px;}
.cureent_switch ._title{font-size:14px;font-weight:500;}
.avialbe_destions .head_title{padding:0 15px;font-weight:600;font-size:16px;}

._modal_fix_btn a {
border: 1px solid #20bfdb;
border-radius: 5px;
display: block;
font-size: 14px;
text-align: center;
width: 100%;
padding:4px 10px;
color: #20bfdb;text-decoration:none;
}
._modal_fix_btn a:hover{background-color:#20bfdb;color:#fff;}
._modal_fix_btn a:hover svg{fill:#fff !important;}
._modal_fix_btn {
z-index: 1;
width: 100%;
padding:0 10px;
}


.custom_form_box {
background-color: #ffffff;
padding:10px 0 15px;
border-radius: 10px;
margin: 0 15px 20px;
box-shadow:0 0px 18px rgba(0,0,0,.18);position: relative;border:2px solid #20bfdb;
}
.custom_form_box .form-control{border:0 !important;padding:0 10px 0 30px !important;font-size:14px;background: transparent !important;outline:none !important;box-shadow:none !important;}
.custom_form_box span {
background-color: #f6f6f6;
font-size: 13px;
border-radius: 5px;
padding: 2px 10px;
display: block;
margin: -20px 0px 10px;
width: 98px;
text-align: center;
}
.custom_form_box > svg {
position: absolute;
left: 7px;
bottom: 18px;
fill: #1a91d0;cursor:pointer;
}

/* Modal container styling */
#mapModal {
display: none;
/* Hidden by default */
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5);
/* Black with opacity */
}

/* Modal content box */
.modal-content {
background-color: #fefefe;
margin: 2% auto;
padding: 2px;
border: 1px solid #888;
width: 80%;
position: relative;
border-radius: 5px;
min-height: 60vh;
overflow-y: auto;
}

/* Close button styling */
.close_modal {
color: red;
float: right;
font-size: 43px;
font-weight: bold;
cursor: pointer;
position: relative;
top: -17px;
right: -6px;
}

.close_modal:hover,
.close_modal:focus {
color: #000;
text-decoration: none;
}

/* Map container styling */
#map {
width: 100%;
height: 80vh;
/* Set a fixed height for the map */
background-color: #e0e0e0;
/* Placeholder background */
position: relative;
border-radius: 5px;
}

/* Displayed address styling */
.display_preview_address {
/* position: relative;
bottom: 10px;
left: 10px;
background-color: rgba(255, 255, 255, 0.8);
padding: 8px 12px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); */
font-size: 14px;
color: #333;
margin-bottom: 0px;
}

/* Modal footer styling */
.modal-footer_foot {
margin-top: 15px;
text-align: right;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
}

.modal-footer_foot button {
padding: 10px 20px;
margin-left: 10px;
border: none;
width: 49%;
border-radius: 5px;
background-color: #0d6efd;
color: #fff;
cursor: pointer;

}

.modal-footer_foot button:hover {
background-color: gray;
color: white;
}

.map_button {
display: flex;
gap: 15px;
}


@media(max-width:992px) {
#map {
width: 100%;
height: 100%;
}


.modal-content {
min-height: auto;
top: 0%;
margin: 0% auto;
padding: 0px;
width: 100%;
height: 100%;
}

.modal-footer_foot {
display: block;
text-align: left;
bottom: 8px;
width: 100%;
flex-direction: column;
position: absolute;background-color:#fff;
}

.display_preview_address {
font-size: 14px;
color: #333;
margin-bottom: 20px;
line-height: 19px;
}

.modal-footer_foot button {
margin-left: 0px;
}

.map_button {
display: flex;
gap: 15px;
width: 83%;
}
}



/*Loader CSS :: Start*/
#loader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.9);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
visibility: hidden;
opacity: 0;
transition: opacity 0.3s, visibility 0.3s;
}

#loader.active {
visibility: visible;
opacity: 1;
}

.skeleton-container {
width: 300px;
background: #fff;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 20px;
text-align: center;
}

.skeleton {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
border-radius: 4px;
height: 14px;
margin-bottom: 20px;
}

.skeleton-line {
width: 100%;
}

@keyframes shimmer {
0% {
background-position: -200% 0;
}

100% {
background-position: 200% 0;
}
}

.loading-text {
font-size: 24px;
color: #888;
font-weight: bold;
display: flex;
justify-content: center;
gap: 4px;
}

.loading-text span {
opacity: 0;
animation: fade-in 1.5s infinite;
}

.loading-text span:nth-child(1) {
animation-delay: 0s;
}

.loading-text span:nth-child(2) {
animation-delay: 0.2s;
}

.loading-text span:nth-child(3) {
animation-delay: 0.4s;
}

.loading-text span:nth-child(4) {
animation-delay: 0.6s;
}

.loading-text span:nth-child(5) {
animation-delay: 0.8s;
}

.loading-text span:nth-child(6) {
animation-delay: 1s;
}

.loading-text span:nth-child(7) {
animation-delay: 1.2s;
}

.loading-text span:nth-child(8) {
animation-delay: 1.4s;
}

.loading-text span:nth-child(9) {
animation-delay: 1.6s;
}

@keyframes fade-in {
0% {
opacity: 0;
}

50% {
opacity: 1;
}

100% {
opacity: 0;
}
}

/*Loader CSS :: End*/


div#mapModal .modal-content {
width: 100%;
margin: 0;
height: 100%;
}
.modal-footer_foot button{background:linear-gradient(90deg, #168DCC 0%, #10B3CB 100%);}
.modal-footer_foot ._close_btn{background:#ff0000;}
div#mapModal #map{height:90vh;}

@media(max-width:767px) {
#mapModal .modal-footer_foot{margin:0 !important;}
#mapModal .modal-footer_foot p#display_preview_address{display:none;}
#mapModal .map_button{width:100%;}
#mapModal .modal-footer_foot button{padding:6px 0;font-size:13px;}
div#mapModal #map{height:90vh;}
.mobile-bottom-bar{border-radius:20px 20px 0 0;padding:6px 5px 3px !important;}
.datetimepicker.datetimepicker-dropdown-bottom-right.dropdown-menu {
left: 0 !important;
right: 0 !important;
width: 269px;
margin: auto;
top: 69% !important;
transform: translate(0px, -70%);
}    
.datetimepicker .datetimepicker-days table thead tr:nth-child(1) th.prev{background:url(../img/arrow-next.svg) no-repeat center #1fbcda !important;visibility:visible !important;}
}


._footer{text-align:center;background-color:#ffffff;padding:10px 0;box-shadow: 0 -4px 13px rgba(0,0,0, .10);text-align:center;font-size:12px;margin-bottom:10px;}