.ui-datepicker {
    background:rgb(224, 223, 223);
    border: 1px solid #dddddd;
}
.ui-datepicker-header {
    background: #f7f7f7;
    border-bottom: 1px solid #dddddd;
    color: #333333;
}

.ui-datepicker-prev, .ui-datepicker-next {
    cursor: pointer;
}
.ui-widget.ui-widget-content {
    z-index: 20000 !important;
}
.booking-engine-template input {
    width: 100%;
    max-width: 300px;
    margin-bottom: 10px;
}
.booking-engine-template{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction:column;
    padding: 20px;
    background: #ffffff;
    max-width: 1000px;
    position: relative;
    z-index:2;
    margin:auto;
}
@media only screen and (min-width: 768px) {
    .booking-engine-template {
        flex-direction:row;
    }
}
/* Allgemeine Stile für .input-item */
.input-item {
    display: flex;
    flex-direction: column;
    align-items: center; 
    padding: 10px;
}

/* Stile für Labels innerhalb von .input-item */
.input-item label {
    margin-bottom: 5px; 
    text-align: center; 
    text-transform: uppercase;
}

/* Stile für Eingabefelder innerhalb von .input-item */
.input-item input {
    padding: 14px !important;
    border: none;
    outline: none;
    background: aliceblue;
}

/* Stile für den Fokuszustand von Eingabefeldern */
.input-item input:focus {
    background: rgb(225, 223, 223);
}

/* Stile für sichtbaren Fokuszustand von Eingabefeldern */
.input-item input:focus-visible {
    border: 1px solid white !important;
    background: rgb(225, 223, 223);
    outline: none; 
}

/* Stile für aktiven Zustand von Eingabefeldern */
.input-item input:active {
    border: 1px solid white !important;
    background: rgb(225, 223, 223);
    outline: none;
}

/* Stile für Buttons innerhalb von .input-item */
.input-item button {
    text-transform: uppercase;
}
/* Stile für Buttons innerhalb von .input-item */
.input-item button {
    background-color: #4CAF50; 
    color: white; 
    padding: 10px 20px; 
    border: none; 
    border-radius: 5px; 
    text-transform: uppercase; 
    cursor: pointer; 
    transition: background-color 0.3s, transform 0.2s; 
}

.input-item button:hover {
    background-color: #45a049; 
    transform: scale(1.05); 
}

.input-item button:active {
    background-color: #3e8e41;
    transform: scale(0.95);
}
/*Dropdown styles*/
.occ-dropdown{
    display: flex;
    flex-direction: column;
    background: #f9f9f9;
    border: 1px solid #ccc;
    padding: 10px;
    width: 100%;
    position: absolute;
    z-index: 100;
    top: 26%;
    left: 30px;
    max-width: 280px;
    z-index:3;
}
@media only screen and (min-width: 768px) {
    .occ-dropdown {
        top: 75%;
    }
}
.room-item:first-child{
    margin-bottom: -14px;
}
.room-list{
    list-style: none !important;
    line-height: normal !important;
}
.room-list li{
    display: flex;
    flex-direction: column;
}

/* Dropdown Items */
.dropdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 5px 0;
}
.separator-hr{
    width: 100%;
    margin-top: -20px;
    border-bottom: 0;
    border-right: 0;
    border-left: 0;
}

.counter {
    display: flex;
    align-items: center;
}

.counter input {
    width: 40px;
    text-align: center;
    border: none;
    background: transparent;
}

.counter button {
    padding: 5px 10px;
    cursor: pointer;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 3px;
    margin: 0 5px;
}

.counter button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}
#remove-room {
    z-index: 20000; /* Stellen Sie sicher, dass der Button immer anklickbar ist */
}
/* Input Styling */
#occupancy {
    padding: 10px;
    width: 100%;
    cursor: pointer;
    position: relative;
}

#apply-selection {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    width: 100%;
    border-radius: 5px;
    margin-top: 20px;
}
.dropdown-controls {
    display: flex;
    flex-wrap:wrap;
    justify-content: space-between;
}


.room-head{
    font-size: 20px;
    font-weight: bold;
}
.bm-button{
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
}
.bm-booking-button{
    margin-top:26px;
}
.bm-button:hover {
    background-color: #45a049;
    transform: scale(1.05);
}
.bm-button:active {
    background-color: #3e8e41;
    transform: scale(0.95);
}
.txt-shortcode-inner pre {
    overflow: visible !important;
}