.book {
    background: #556677 !important;
}

/* General Styling */
body {
    font-family: 'Arial', sans-serif !important;
    color: #333 !important;
    background-color: #ffffff !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Header Styling */
#events h3 {
    font-size: 1.5em !important;
    color: #5f6368 !important;
    margin-bottom: 15px !important;
}

#events p.duration, #events div.duration {
    font-size: 1em !important;
    color: #888 !important;
}

#events p.description, #events div.description {
    font-size: 1em !important;
    color: #444 !important;
    line-height: 1.6 !important;
}

/* Event Selection */
#events .selectedEvent {
    background-color: #cce5ff !important;
    color: #0056b3 !important;
    border: 2px solid #0056b3 !important;
    padding: 10px !important;
    border-radius: 5px !important;
    font-weight: bold !important;
}

/* Buttons */
#events input.reserve_time_btn,
#events input.select_another_btn {
    background-color: #007bff !important;
    color: white !important;
    border: none !important;
    padding: 12px 20px !important;
    margin-top: 20px !important;
    border-radius: 5px !important;
    font-size: 1em !important;
    cursor: pointer !important;
    transition: background-color 0.3s !important;
}

#events input.reserve_time_btn:hover,
#events input.select_another_btn:hover {
    background-color: #0056b3 !important;
}

/* Event Form Header */
#eventForm #start_date-block-container h3, 
#eventForm #timeline-container h3 {
    font-size: 1.8em !important;
    color: #333 !important;
    margin-bottom: 20px !important;
}

/* Event Form Save Button */
#eventForm #save_button {
    background-color: #28a745 !important;
    color: white !important;
    padding: 14px 25px !important;
    border-radius: 5px !important;
    border: none !important;
    font-size: 1.2em !important;
    cursor: pointer !important;
    transition: background-color 0.3s !important;
}

#eventForm #save_button:hover {
    background-color: #218838 !important;
}

/* UI Widget */
div.ui-widget-content {
    background-color: #ffffff !important;
    border: 1px solid #ddd !important;
    border-radius: 5px !important;
    padding: 15px !important;
}

div.ui-widget-header {
    background-color: #007bff !important;
    color: white !important;
    padding: 10px 20px !important;
    border-radius: 5px !important;
}

/* Timeline Table */
#timeline-container table.timeline {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-top: 20px !important;
}

.timeline td {
    padding: 15px !important;
    text-align: center !important;
    font-size: 1em !important;
}

.timeline td.not_worked_time {
    background-color: #f1f1f1 !important;
    color: #ccc !important;
}

.timeline td.free_time {
    background-color: #e9f7ef !important;
    color: #28a745 !important;
}

.timeline td.selected_time {
    background-color: #f7d1d1 !important;
    color: #d9534f !important;
}

.timeline td.reserved_time {
    background-color: #d1ecf1 !important;
    color: #17a2b8 !important;
}

/* Loading Spinner */
div#loading {
    background-color: rgba(255, 255, 255, 0.8) !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 9999 !important;
}

div#loading::after {
    content: 'Loading...' !important;
    font-size: 2em !important;
    color: #007bff !important;
}

/* Date Block Styling */
#start_date-block-container .zend_form dt,
#start_date-block-container .zend_form dt b,
#start_date-block-container .zend_form dd label {
    font-size: 1.2em !important;
    color: #333 !important;
}

/* Mobile Responsiveness */
.col-md-4.col-sm-6 {
    width: 100% !important;
}

.hidden-sm, .hidden-xs {
    display: none !important;
}

.top-date-select {
    max-width: 400px !important;
    margin: 0 auto !important;
    text-align: center !important;
    font-size: 1.2em !important;
}

/* Form Inputs and Selectors */
input[type="text"], input[type="email"], select {
    font-size: 1.1em !important;
    padding: 10px !important;
    border-radius: 5px !important;
    border: 1px solid #ccc !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 10px !important;
}

input[type="text"]:focus, input[type="email"]:focus, select:focus {
    outline: none !important;
    border-color: #007bff !important;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5) !important;
}

/* Tooltip and Help Icons */
.sb-tooltip {
    color: #007bff !important;
}

.sb-tooltip:hover {
    color: #0056b3 !important;
}