#multiBaySheetControls {
    margin-top: 12px;
    display: none;
}

#multiBaySheetTitle {
    display: inline-block;
    margin-bottom: 8px;
    padding: 6px 10px;
    font-size: 14px;
}

#multiBaySheetControls .btn {
    margin: 0 4px 8px;
    min-width: 130px;
}

#multiBaySheetMaxBays,
#multiBaySheetTimeLimits {
    margin: 2px 0 0;
}

#multiBaySheetMaxTime {
    margin-left: 14px;
}

#multiBaySheetSelected {
    margin: 2px 0 0;
}

#bookingsheet.multi-bay-mode td {
    transition: opacity 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease;
}

#bookingsheet.multi-bay-mode {
    border: 3px solid #f0ad4e;
}

#bookingsheet.multi-bay-mode td:not(.time-col):not(.multi-bay-slot) {
    background-color: #b9b9b9 !important;
    color: #555 !important;
    opacity: 0.22;
    pointer-events: none;
}

#bookingsheet.multi-bay-mode .multi-bay-slot {
    cursor: pointer;
}

#bookingsheet.multi-bay-mode .multi-bay-disabled {
    background-color: #9a9a9a !important;
    color: #555 !important;
    opacity: 0.22 !important;
    cursor: not-allowed !important;
    pointer-events: none;
}

#bookingsheet.multi-bay-mode .multi-bay-maxed {
    background-color: #9a9a9a !important;
    color: #555 !important;
    opacity: 0.22 !important;
    cursor: not-allowed !important;
    pointer-events: none;
}

#bookingsheet.multi-bay-mode .multi-bay-selected {
    box-shadow: inset 0 0 0 4px #418BCA;
    opacity: 1 !important;
    position: relative;
}

.multi-bay-slot-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    justify-content: center;
    z-index: 10000;
    background: #ffffff;
    border: 1px solid #d6dbe1;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
    pointer-events: auto;
}

.multi-bay-slot-actions-selected {
    width: 100%;
    color: #333;
    font-size: 13px;
    line-height: 1.35;
    text-align: center;
}

.multi-bay-slot-actions-buttons {
    display: flex;
    gap: 18px;
    justify-content: center;
}

.multi-bay-slot-action {
    box-sizing: border-box;
    flex: 0 0 46px;
    width: 46px;
    min-width: 46px;
    max-width: 46px;
    height: 46px;
    border-radius: 4px;
    border: none;
    color: #fff;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    font-size: 17px;
    line-height: 28px;
    padding: 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.multi-bay-action-cancel {
    background: #EF6F6C;
}

.multi-bay-action-confirm {
    background: #01BC8C;
}

.multi-bay-action-clear {
    background: #F89A14;
}

body.multi-bay-sheet-actions-active {
    padding-bottom: 116px;
}

.multi-bay-slot-actions-desktop {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: min(780px, calc(100vw - 48px));
    padding: 18px 21px;
    border-radius: 6px;
}

.multi-bay-slot-actions-desktop .multi-bay-slot-actions-selected {
    font-size: 20px;
}

.multi-bay-slot-actions-desktop .multi-bay-slot-actions-buttons {
    gap: 15px;
}

.multi-bay-slot-actions-desktop .multi-bay-slot-action {
    flex: 0 0 51px;
    width: 51px;
    min-width: 51px;
    max-width: 51px;
    height: 51px;
    border-radius: 6px;
}

.multi-bay-slot-actions-desktop .multi-bay-slot-action .livicon,
.multi-bay-slot-actions-desktop .multi-bay-slot-action > i,
.multi-bay-slot-actions-desktop .multi-bay-slot-action > span,
.multi-bay-slot-actions-desktop .multi-bay-slot-action > div {
    display: grid !important;
    place-items: center;
    margin: 0 auto !important;
}

.multi-bay-slot-actions-desktop .multi-bay-slot-action .livicon {
    width: 33px;
    height: 33px;
}

.multi-bay-slot-actions-mobile {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    transform: none;
    width: auto;
    border-right: none;
    border-bottom: none;
    border-left: none;
    border-radius: 0;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
    box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.18);
}

.multi-bay-slot-actions-mobile .multi-bay-slot-action .livicon,
.multi-bay-slot-actions-mobile .multi-bay-slot-action svg,
.multi-bay-slot-actions-mobile .multi-bay-slot-action canvas {
    width: 22px !important;
    height: 22px !important;
}

@media (max-width: 767px) {
    body.multi-bay-sheet-actions-active {
        padding-bottom: 116px;
    }
}