.image_profile{
    width: 125px;
}
.card{
    padding: 15px 15px 15px 15px;
}

.from-input{
    padding: 5px;
}



.sr-only{
    color:#000000  !important;
}

.closeX{
    background-color: inherit;
    color: white;
}

.closebtn{
    background-color: inherit;
    color: white;
    display: inline !important;
}


.main_news_det_header {
    height: 300px;
    background-image: url(../images/staff-jobs-bg-small.png) !important;
    color: #ffffff;
}

.main_header_wrapper .box_wrapper .main_title span , .main_header_wrapper.centered .box_wrapper .main_title{
    color: #ffffff;
}

.news_img2{
    height: 195px !important;
    overflow: hidden;
}


.news_header{
    height: 300px;
    background-image: url(../images/news-bg-small.png) !important;
}


.serv_header{
    height: 300px;
    background-image: url(../images/about-us-small.png) !important;
}

.news_image{
    max-width: 100%;
}

.cars_search{
    background-image:url(../images/trips-bg.png) !important;
}


.main_header_wrapper.staff_jobs{
    height: 300px !important;
    background-image: url(../images/staff-jobs-bg-small.png) !important;
}

.experince{
    display: flow-root;
}

.copyright{
    color:#67e8fb;
}
.copyright:hover{
    color: #7b0c32;
}

.main_header_wrapper.offers_header{
    height: 300px !important;

}

.modelHeader{
    display: block;
}

.main_header_wrapper.staff_header{
    background-image: url(../images/staff-bg-small.png);
    height: 300px !important;
}


.main_header_wrapper .box_wrapper .search_form_wrapper .tab-content{
    padding: 20px;
    height: auto;
    background-color: rgba(255, 255, 255, .85);
    border-radius: 15px;
    border-top-right-radius: 0;
    display: block;
    align-items: center;
}



.select2-selection{
    padding-right: 10px;
    height: 47px !important;
    border-radius: 8px !important;
    border-color: #017f8d !important;
    padding-inline-start: 35px;
    box-shadow: 0 0 15px rgba(0, 0, 0, .08) !important;
    align-content: center;
    padding-top: 9px;
}

.select2-selection__arrow{
    margin-top: 10px;
}

.select2-selection__clear{
    display: none;
}



.flyform{
    width: 200px !important;
}

.flyselect{
    width: 200px !important;
}

.main_header_wrapper .box_wrapper .search_form_wrapper .tab-content .tabs_form_wrapper .form_flex_wrapper .form-group.submit_wrapper .icon_wrapper .icon{
    width: 15px;
    height: 15px;
}
.main_header_wrapper .box_wrapper .search_form_wrapper .tab-content .tabs_form_wrapper .form_flex_wrapper .form-group.submit_wrapper .icon_wrapper{
    width: 35px;
    height: 35px;
}
.main_header_wrapper .box_wrapper .search_form_wrapper .tab-content .tabs_form_wrapper .form_flex_wrapper .form-group.submit_wrapper .btn{
    padding: 6px;
    margin: 5px;
}
.flight_search_wrapper .search_results_wrapper .results_wrapper.flight_wrapper .accordion-item .accordion-header .basic_info .info_wrapper .flex_wrapper .wrapper{
    width: 166px;
}

/*.select2-dropdown{*/
/*    width: 255px !important;*/
/*}*/

/*.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable:hover{*/
/*    background: #017f8d;*/
/*    color: #ffffff;*/
/*}*/
/*.select2-container--default .select2-selection--multiple .select2-selection__choice{*/
/*    background-color: transparent;*/
/*}*/
/*.align-left .select2-results__option {*/
/*    text-align: left;*/
/*}*/
/*.select2-container--default .select2-search--inline .select2-search__field{*/
/*    padding-right: 27px !important;*/
/*    font-family: 'Tajawal' !important;*/
/*}*/


.custom-input {
    position: relative;
}

.custom-input input {
    width: 100%;
    padding: 5px;
    font-size: 14px;
}

.custom-input datalist {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    z-index: 999;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.custom-input option {
    padding: 5px;
    white-space: nowrap;
}

.custom-input option span {
    float: left;
    margin-right: 10px;
}

.selectbtn{

    display: flex;
    align-items: center;
    width: 100%;
    padding: 1rem 1.25rem;
    font-size: 1rem;
    color: #212529;
    text-align: right;
    background-color: #fff;
    border: 0;
    border-radius: 0;
    overflow-anchor: none;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,border-radius .15s ease;

    background-color: #76ccf2;
    color: #fff;
    justify-content: center;
    border-radius: 10px;
    box-shadow: none;
    position: relative;

}

.alert-p{
    color: #dd5356 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

.marginaxis20{
    margin-right: 20px;
    margin-left: 20px;
}


.airport_wrapper{
    width: 180px;
}








.dropdownSearch {
    position: relative;
    display: inline-block;
}

.dropdownSearch .dropdownSearch-options {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #fff;
    border: 1px solid #ccc;
    max-height: 200px;
    overflow-y: auto;
    display: none;
    z-index: 9999 !important; /* Adjust the z-index value to make the dropdown appear above other elements */
}

.dropdownSearch.open .dropdownSearch-options {
    display: block;
}

.dropdownSearch-options .option {
    padding: 5px;
    cursor: pointer;
}

.dropdownSearch-options .option.highlight {
    background-color: #3f51b5;
    color: #fff;
}

.dropdownSearch-options .option:hover {
    background-color: #ccc;
    color: #fff;
}


.dropdownSearch .form_control{

    border-color: #017f8d !important;
    height: 47px;
    border-radius: 8px;
    border-color: #017f8d;
    padding-inline-start: 35px;
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    padding-inline-start: 0.75rem !important;
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
    padding-inline-start: 35px !important;

}

.dropdownSearch .form_control:focus{
    border-color: #017f8d;
}

.h3Title{
    text-align: center;
    margin-top: 10%;
}


.btn-refresh{
    padding: 12px 25px;
    min-width: 150px;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 0;
    box-shadow: none !important;
    outline: unset !important;
     color: #fff;
    background-color: #068f9e !important;
    border-radius: 10px;
    transition: all .25s;
}

.btn-refresh:hover{
    background-color: #068f9e !important;
    color: #fff;
}

.hide{
    display: none;
}

.childsCountRow{
    min-width: 50px;
}

.main_header_wrapper .box_wrapper .search_form_wrapper .tab-content{
    overflow-y: scroll;
    max-height: 500px;
}

/* Styling the scrollbar thumb (the draggable part of the scrollbar) */
div::-webkit-scrollbar-thumb {
    background-color: #017f8d; /* Change the scrollbar color to "#017f8d" */
    border-radius: 4px; /* Add some border radius for a nicer look */
}

/* Styling the scrollbar track (the background of the scrollbar) */
div::-webkit-scrollbar {
    width: 8px; /* Adjust the width of the scrollbar */
}



/* Apply this CSS to the dropdown options to make it appear above other elements */
.dropdownSearch-options {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 9999; /* Adjust the z-index value as needed */
    background-color: #fff; /* Set a background color for the dropdown options */
    border: 1px solid #ccc; /* Add a border to the dropdown options for better visibility */
    max-height: 200px; /* Set a maximum height for the dropdown to make it scrollable if necessary */
    overflow-y: auto; /* Enable vertical scrolling for the dropdown options if the content exceeds the max height */
}

/* Add padding to the dropdown options to separate them from the dropdownSearch input */
.dropdownSearch-options .option {
    padding: 8px;
}

/* Apply this CSS to the scrollable div containing the dropdownSearch input */
.main_header_wrapper .box_wrapper .search_form_wrapper .tab-content {
    overflow-y: scroll;
    max-height: 500px;
    position: relative; /* Set the position to relative to create a stacking context */
    min-height:300px;
}

/* Apply this CSS to the dropdownSearch input to avoid it being cut off */
.dropdownSearch {
    position: relative; /* Set the position to relative */
    z-index: 1; /* Adjust the z-index value as needed */
}


.fasilityBG{
    background-color: #017f8d;
    border-color: #017f8d;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 25px !important;
    border: 1px solid #ddd;
    cursor: pointer;
    transition: all .25s;
    padding: 1px 15px;
    margin-inline-end: 5px;
    margin-bottom: 5px;
    color: #fff;
    /*margin-top: 5px;*/
}

.hotelslider{
    margin-top: 10%;
}
.hotelslider .slick-slide{
    margin: 5px;
}





.gallery-wrapper {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;
}

.gallery-wrapper img {
    max-width: 100%;
    transition: all 0.2s ease-in-out;
}

.gallery-wrapper .gallery-img img {
    cursor: pointer;
}

.gallery-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 2;
    position: relative;
}

.gallery-popup.active + .gallery-overlay {
    content: "";
    position: fixed;
    width: 100%;
    height: 100%;
    inset: 0;
    background-color: rgb(0 0 0 / 75%);
    z-index: 5;
    overflow: hidden;
}

.gallery-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 48px);
    height: calc(100% - 80px);
    padding: 0px;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 6;
    animation: showPopUp 0.45s linear;
}

.gallery-popup .close,
.gallery-popup .next,
.gallery-popup .prev {
    position: absolute;
    top: 0;
    right: 2rem;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-popup img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-popup .close {
    width: 30px;
    height: 30px;
    cursor: pointer;
    top: -40px;
    right: 0;
}

.gallery-popup .next {
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 20px;
    font-size: 20px;
    cursor: pointer;
    padding: 10px;
    background-color: rgb(255 255 255 / 75%);
}

.gallery-popup .prev {
    left: 0px;
    right: auto;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 20px;
    font-size: 20px;
    cursor: pointer;
    padding: 10px;
    background-color: rgb(255 255 255 / 75%);
}

.gallery-wrapper .gallery-inner {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, 1fr);
    position: relative;
    z-index: 4;
}

@keyframes showPopUp {
    0% {
        opacity: 0;
        visibility: hidden;
    }
    50% {
        opacity: 0.5;
        visibility: visible;
    }
    100% {
        opacity: 1;
        visibility: visible;
    }
}

@keyframes imgTransitionNext {
    0% {
        transform: translateX(100vw);
        opacity: 0;
    }

    5% {
        transform: translateX(95vw);
        opacity: 0.15
    }

    10% {
        transform: translateX(90vw);
        opacity: 0.1;
    }

    15% {
        transform: translateX(85vw)
        opacity: 0.20
    }

    20% {
        transform: translateX(80vw);
        opacity: 0.2;
    }

    25% {
        transform: translateX(75vw)
        opacity: 0.20
    }

    30% {
        transform: translateX(70vw);
        opacity: 0.3;
    }

    35%{
        transform: translateX(75vw)
        opacity: 0.35;
    }

    40% {
        transform: translateX(60vw);
        opacity: 0.4;
    }

    45%{
        transform: translateX(55vw)
        opacity: 0.45;
    }

    50% {
        transform: translateX(50vw);
        opacity: 0.5;
    }

    55%{
        transform: translateX(45vw)
        opacity: 0.55;
    }

    60% {
        transform: translateX(40vw);
        opacity: 0.6;
    }

    65%{
        transform: translateX(65vw)
        opacity: 0.65;
    }

    70% {
        transform: translateX(30vw);
        opacity: 0.7;
    }

    75%{
        transform: translateX(25vw)
        opacity: 0.75;
    }

    80% {
        transform: translateX(20vw);
        opacity: 0.8;
    }

    85%{
        transform: translateX(15vw)
        opacity: 0.85;
    }

    90% {
        transform: translateX(10vw);
        opacity: 0.9;
    }

    95%{
        transform: translateX(5vw)
        opacity: 0.95;
    }

    100%{
        transform: translateX(0vw);
        opacity: 1;
    }
}


@keyframes imgTransitionPrev {
    0% {
        transform: translateX(-100vw);
        opacity: 0;
    }

    5% {
        transform: translateX(-95vw);
        opacity: 0.15
    }

    10% {
        transform: translateX(-90vw);
        opacity: 0.1;
    }

    15% {
        transform: translateX(-85vw)
        opacity: 0.20
    }

    20% {
        transform: translateX(-80vw);
        opacity: 0.2;
    }

    25% {
        transform: translateX(-75vw)
        opacity: 0.20
    }

    30% {
        transform: translateX(-70vw);
        opacity: 0.3;
    }

    35%{
        transform: translateX(-75vw)
        opacity: 0.35;
    }

    40% {
        transform: translateX(-60vw);
        opacity: 0.4;
    }

    45%{
        transform: translateX(-55vw)
        opacity: 0.45;
    }

    50% {
        transform: translateX(-50vw);
        opacity: 0.5;
    }

    55%{
        transform: translateX(-45vw)
        opacity: 0.55;
    }

    60% {
        transform: translateX(-40vw);
        opacity: 0.6;
    }

    65%{
        transform: translateX(-65vw)
        opacity: 0.65;
    }

    70% {
        transform: translateX(-30vw);
        opacity: 0.7;
    }

    75%{
        transform: translateX(-25vw)
        opacity: 0.75;
    }

    80% {
        transform: translateX(-20vw);
        opacity: 0.8;
    }

    85%{
        transform: translateX(-15vw)
        opacity: 0.85;
    }

    90% {
        transform: translateX(-10vw);
        opacity: 0.9;
    }

    95%{
        transform: translateX(-5vw)
        opacity: 0.95;
    }

    100%{
        transform: translateX(0vw);
        opacity: 1;
    }
}

@media only screen and (max-width: 1280px) {
    .gallery-wrapper .gallery-inner {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media only screen and (max-width: 768px) {
    .gallery-wrapper .gallery-inner {
        grid-template-columns: repeat(2, 1fr);
    }

    .gallery-popup .next {
        right: 0px;
    }
    .gallery-popup .prev {
        left: 0px;
    }

    .gallery-popup {
        top: 60px !important;
        left: 50% !important;
        transform: translate(-50%, 0%);
        height: calc(350px - 60px)
    }
}

@media only screen and (max-width: 600px) {
    .gallery-wrapper .gallery-inner {
        grid-template-columns: repeat(1, 1fr);
    }
}

.hotelfac{
    background-color: #76ccf2;
    border-color: #76ccf2;
    color: #000;
}

.hotel_rating_wrapper .items_wrapper .card_wrapper .basic_info .line .rating{
    margin: auto;
}


input::placeholder {
    font-size: 14px; /* Set your desired font size here */
}


.select20{
    width: 20px;
    height: 20px;
}

.slider_header {
    height: 250px;
}

.carImageView{
    width: 350px;
}
.details_after_checkout {
    margin-top: 10%;
}

/* Apply padding to the top and bottom of each .wrapper element */
.car_details .wrapper {
    margin-left: 50px;
}

.inlineinput{
    flex-wrap: nowrap;
}