@import url('https://cdn.jsdelivr.net/npm/thedatepicker@latest/dist/the-datepicker.css');
@import url('../datepicker/css/DatePickerX.min.css');
@import url('../cardjs/card.css');

.bookingapp-cont {
    padding-bottom: 2rem;
        position: relative;
        background-color: #fff;
    }
    .bookingapp-inner {
        min-height: 400px;
        position: relative;
        background-color: #fff;
    }
    .bookingapp-searchwidget {
        --inputbtn-height: 60px;
    }
    .bookingapp-searchwidget .btn-datepicker, .roomselectbox, .btn-roomdropdown, .btn-booksearch {
        min-height: var(--inputbtn-height);
    border-radius: 6px !important;
        width: 100%;
    }
    .form-floating .form-control.roomselectbox {
            border-color: var(--darkgold);
            
    }
    .bookroom-list li {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #ddd;
        align-items: center;
        padding: 5px 10px;
    }
    .roomguestcount {
        position: relative;
        max-width: 75px;
    }
    .roomguestcount .input-group {
        display: flex;
        flex-wrap: nowrap;
        border: 1px solid #ddd;
    }
    .roomguestcount .input-group .btn {
        padding: 0px 5px;
        height: auto;
        line-height: inherit;
        font-size: 10px;
    }
    .spinner-labelninput {
        position: relative;
    }
    .spinner-labelninput label {
        position: absolute;
        bottom: 0;
        font-size: 11px;
        left: 0;
        right: 0;
        text-align: center;
    }
    .roomguestcount .input-group .form-control {
        padding: 2px 2px 10px 2px;
        min-width: 35px;
        width: 100%;
        text-align: center;
        height: 30px;
        border-top-color: transparent;
        border-bottom-color: transparent;
    }
    .datepicker-cont.bookdatepicker-cont .btndates {
        text-align: center;
        justify-content: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 100%;
    }
    .datepicker-cont.bookdatepicker-cont .btn-month {
        font-size: 12px;
        display: flex;
        white-space: nowrap;
        align-items: center;
    }
    .datepicker-cont.bookdatepicker-cont .btn-day {
        font-size: 24px;
        line-height: 18px;
    }
    .slide-fadeinup-enter-active {
      transition: all 0.3s ease-out;
    }
    
    .slide-fadeinup-leave-active {
      transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
    }
    
    .slide-fadeinup-enter-from,
    .slide-fadeinup-leave-to {
      transform: translateY(20px);
      opacity: 0;
    }
    .bookresultbox {
        border: 1px solid #ddd;
        border-radius: 8px;
        overflow: hidden;
        margin-bottom: 1.5rem;
    }
    .bookingbox-roomimg {
        position: relative;
        overflow: hidden;
    }
    .bookingbox-roomimg a {
        display: flex;
        position: absolute;
        z-index: 4;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        color: #fff;
        background-color: #00000087;
        opacity: 0;
        -webkit-transition: all 600ms ease-in-out;
        -moz-transition: all 600ms ease-in-out;
        -ms-transition: all 600ms ease-in-out;
        -o-transition: all 600ms ease-in-out;
        transition: all 600ms ease-in-out;
        width: 100%;
        justify-content: center;
        align-items: center;
    }
    .bookresultbox:hover .bookingbox-roomimg a {
        opacity: 1;
    }
    .booksearching-box {
        display: flex;
        flex-direction: column;
        position: relative;
        justify-content: center;
        align-items: center;
        text-align: center;
        margin-top: 2rem;
        padding: 2rem 1rem;
        color: var(--darkgold);
    }
    .booksearching-box  .booksearching-loadicon {
    font-size: 24px;
    }
    .booksearching-box  h4 {
        margin: 0;
        color: var(--darkgold);
    }
    .bookfixedbasket {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 99;
        background-color: #fff;
        padding: 1rem;
        box-shadow: 0px -1px 10px #46230926;
    }
    .bookfixedbasket .btn-darkgold {
        padding: 4px 8px;
        border-radius: 4px;
        margin-right: 5px;
        font-size: 12px;
    }
    .bookfixedbasket .btn.btn-roomremove {
        padding: 0;
        width: 25px;
        height: 25px;
        background-color: #120e0e26;
        color: #fff;
        border-radius: 50%;
        line-height: 10px;
    }
    .guestinforoom-box {
        background-color: #fff;
        padding: 1rem;
    }
    .guestinforoom-box.guestinforoom-box-dark {
        background-color: #f7f4f4;
    }
    .selectedroom-info {
        margin-bottom: 1rem;
    }
    .selectedroom-info h4 {
        font-size: 18px;
        font-weight: 700;
    }
    .guestinforoomguest-box {
        margin-bottom: 2rem;
    }
    .roomguest-number {
        margin-bottom: 0.6rem;
        font-size: 18px;
        font-weight: 700;
    }
    .reservationinfo-box .form-floating>.form-control, .reservationinfo-box .form-floating>.form-select {
        padding: 1rem 0.75rem;
        height: calc(3rem + 2px);
        border-radius: 4px !important;
    }
    .reservationinfo-box .form-floating>label {
        padding: 0.7rem 0.75rem;
    }
    .reservationinfo-box .form-floating>.form-control:focus~label, .reservationinfo-box .form-floating>.form-select~label, .reservationinfo-box .form-floating>.form-control:not(:placeholder-shown)~label {
        transform: scale(.7) translateY(-0.5rem) translateX(0.15rem);
        padding-bottom: 0;
    }
    .pricedetaildays-box {
        background-color: #f7f7f2;
        text-align: center;
        padding: 1rem 0.5rem;
    }
    .pricedetaildays-box h5, .pricedetaildays-box h6 {
       margin-bottom: 0.5rem;
    }
    .date-picker-x {
        background: #f9f9f9;
        box-shadow: 2px 2px 6px #00000038;
        color: #444;
        font-family: var(--bs-body-font-family);
    }
    .date-picker-x::before {
        border-color: #f9f9f9 transparent;
        left: 45%;
    
    }
    .date-picker-x .dpx-next, .date-picker-x .dpx-prev {
        color: var(--darkgold);
    }
    .date-picker-x .dpx-current {
        box-shadow: none!important;
    }
    .date-picker-x .dpx-selected {
        background: var(--darkgold);
        color: #fff;
    }
    .date-picker-x .dpx-weekend {
        color: inherit;
    }
    .date-picker-x button:focus-visible, .date-picker-x button:hover {
        box-shadow: none;
        background: var(--darkgold);
        color: #fff;
    }
    .date-picker-x button:disabled {
        opacity: 0.3;
    }
    .date-picker-x-input {
        cursor: pointer;
    }
    .credidcardform .form-control {
        border-color: var(--darkgold);
        border-radius: 8px !important;
    }
    .credidcardform .form-control:focus {
        border-color: var(--darkgold);
        box-shadow: 0 0 0 0.25rem #c19b7721;
    }
    h3.payment-title {
        margin-bottom: 0.5rem;
        padding-top: 1.5rem;
        font-size: 24px;
    }
    .bookresult-title {
        margin-top: 2rem;
        margin-bottom: 1.5rem;
        border-bottom: 1px solid #ddd;
        padding-bottom: 0.4rem;
    }
    small.badge {
        --bs-badge-padding-x: 0.5em;
        --bs-badge-padding-y: 0.3em;
        --bs-badge-font-size: 0.6em;
        --bs-badge-font-weight: 400;
    }
    .btn-group-xs>.btn, .btn-xs {
        --bs-btn-padding-y: 0.1rem;
        --bs-btn-padding-x: 0.2rem;
        --bs-btn-font-size: 0.7rem;
        --bs-btn-border-radius: 0.45rem;
    }
    .date-picker-x.active {
        z-index: 9999;
        left: -33%;
    }
    .is-invalid.invalid-format~.invalid-feedback .isempty {
    display: none;
    }
    .is-invalid~.invalid-feedback .iswrong {
       display: none;
    }
    .is-invalid.invalid-format~.invalid-feedback .iswrong {
       display: block;
    }
    .taksitlist-inner {
        display: flex;
        overflow-y: auto;
    }
    .taksitlist-loop {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-width: 150px;
        margin-right: 5px;
        background-color: #f9f6eb;
        border-radius: 8px;
        padding: 10px;
    }
    .taksitlist-loop:hover {
        background-color: #f5edd2;
    }
    .taksitfiyat-cont {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .taksitbanka-cont {
        background-color: #747a141f;
        margin-left: -10px;
        margin-right: -10px;
        padding: 5px 5px;
        margin-bottom: 5px;
    }
    .taksitbanka-isim {
        font-size: 11px;
    
        text-align: center;
    }
    
    .taksitnum-cont {
        text-align: center;
        border-bottom: 1px solid #5a4b1426;
        margin-bottom: 5px;
    }
    .taksitfiyat-oran {
        text-align: center;
        margin-left: -10px;
        margin-right: -10px;
        background-color: #4a450c1c;
    }
    .taksitfiyat-totaltext {
        font-size: 12px;
    }
    .taksitfiyat-cont {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px 0;
    }
    .taksitnum {
        font-size: 18px;
        font-weight: 700;
        margin-top: 10px;
    }
    .taksitlist-loop.selectedinstalment {
        background-color: #30937d;
        color: #fff;
    }
    .loader svg {
      position: absolute;
      margin: auto;
    }
    
    #mask {
            animation: mask 975ms ease infinite;
        }
        @keyframes mask {
            from {transform: translateX(0)}
            to {transform: translateX(280px)}
        }
        .loader {
            position: relative;
            width: 100%;
            height: 150px;
        }
        h5.bookroompricebox.oldprice {
            font-size: 14px;
            margin: 0;
            text-decoration: line-through;
            color: #c38181;
        }
        label.bdaypickeropen {
            position: absolute;
            right: 1px;
            display: flex;
            top: 1px;
            transform: none !important;
            z-index: 999 !important;
            width: 50px;
            font-size: 25px;
            background-color: #fff;
            opacity: 1 !important;
            left: auto;
            bottom: 53px;
            align-items: center;
            justify-content: center;
            height: 40px;
            pointer-events: auto;
            cursor: pointer;
        }