.mdotcar-selector-wrapper {
    position: relative;
}

span.capacity-min-notice {
    font-size: 10px;
}

.mdotcar-selector-screen {
    width: 100%;
}

.mdotcar-selector-screen.is-hiding {
    animation: selectorFadeOut 0.25s ease forwards;
}

.mdotcar-selector-screen.is-showing {
    animation: selectorFadeIn 0.3s ease forwards;
}

@keyframes selectorFadeOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(20px);
    }
}

@keyframes selectorFadeIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.carwash-request-items {
    display: flex;
    flex-direction: row;
    gap: 16px;
}

.mdotcar-selector-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 16px 12px;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
    font-size: 0;
}

.mdotcar-selector-item>div {
    display: flex;
    align-items: center;
    gap: 16px;
}

.mdotcar-selector-item img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.mdotcar-selector-item:hover,
.mdotcar-selector-item.selected {
    border-color: #3F51B5;
    background-color: #F4F5F7;
}

.mdotcar-selector-item.selected .organization-title,
.mdotcar-selector-item:hover .organization-title {
    color: #1A237E;
}

.mdotcar-selector-container .mdotcar-footer>div {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.mdotcar-footer button.btn-disabled,
.mdotcar-footer button.btn-disabled:hover {
    background: #E4E8EE !important;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none !important;
    color: #9CA5B0 !important;
}

.mdotcar-form-org .steps,
.mdotcar-form-org .mdotcar-selector-container .steps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.mdotcar-form-org .steps-completed.step-step-3-5 { width: 20%  !important; }
.mdotcar-form-org .steps-completed.step-4        { width: 40%  !important; }
.mdotcar-form-org .steps-completed.step-1        { width: 60%  !important; }
.mdotcar-form-org .steps-completed.step-2        { width: 80%  !important; }
.mdotcar-form-org .steps-completed.step-5        { width: 100% !important; }

.mdotcar-step.active[data-step="step-3-5"] {
    display: flex !important;
    flex-direction: column;
}

.mdotcar-form-org .mdotcar-form-container.pos-1 .mdotcar-cancel,
.mdotcar-form-personal .mdotcar-form-container.pos-1 .mdotcar-cancel {
    border: 1px solid #5A5FCC;
    border-radius: 4px;
}

.organization-detail {
    display: flex;
    flex-direction: column;
    line-height: 20px;
    font-size: 12px;
    font-weight: 400;
}

.organization-title {
    font-size: 14px;
    font-weight: 500;
    color: #212121;
    line-height: 24px;
}

.organization-location {
    font-size: 12px;
    font-weight: 400;
    color: #757575;
    line-height: 18px;
}

.capacity-modal {
    position: fixed;
    width: 100%;
    right: calc(50% - 360px);
    bottom: 0;
    max-width: 720px;
    z-index: 200;
}

@media (max-width: 767px) {
    .capacity-modal {
        right: 0;
        max-width: 100%;
    }
}

.capacity-modal-content {
    position: relative;
    z-index: 210;
    background: white;
    box-shadow: 0px 1px 5px 0px #0000001F;
    border-radius: 16px 16px 0 0;
    animation: capacitySlideUp 0.3s ease forwards;
}

@keyframes capacitySlideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.capacity-backdrop {
    z-index: 205 !important;
    background: rgba(0, 0, 0, 0.15) !important;
    backdrop-filter: blur(1px) !important;
}

.capacity-header {
    align-items: flex-start !important;
    gap: 8px;
    padding: 16px 24px;
}

.capacity-header-titles {
    display: flex;
    flex-direction: column;
}

.capacity-date-title {
    font-size: 14px;
    font-weight: 500;
    color: #212121;
    line-height: 22px;
}

.capacity-min-notice {
    font-size: 12px;
    font-weight: 400;
    color: #757575;
    line-height: 18px;
}

.capacity-body {
    padding: 42px 24px !important;
    display: flex;
    flex-direction: column;
    gap: 36px;
}

.capacity-slots {
    display: flex;
    flex-direction: row;
    gap: 8px;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
}

.capacity-slot {
    width: calc((100% - 48px) / 7);
    max-width: 56px;
    min-width: 32px;
    height: auto;
    object-fit: contain;
}

.capacity-legend {
    display: flex;
    flex-direction: row;
    gap: 16px;
    justify-content: flex-start;
}

.capacity-legend-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
}

.capacity-legend-item img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.capacity-legend-booked-label,
.capacity-legend-selected-label,
.capacity-legend-free-label {
    font-size: 10px;
    font-weight: 400;
    color: black;
    line-height: 16px;
}

.capacity-footer {
    border-top: 1px solid #F5F5F5;
    padding: 16px 24px;
}

.cancel-capacity {
    width: 40%;
    color: #5C6BC0;
    border: 1px solid #9FA8DA;
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
    border-radius: 8px;
    padding: 8px;
    text-align: center;
    cursor: pointer;
}

.save-capacity {
    background: #5C6BC0;
    box-shadow: 0px 1px 5px 0px #0000001F;
    color: white;
    width: 60%;
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
    border-radius: 8px;
    padding: 8px;
    text-align: center;
    cursor: pointer;
}

span.capacity-legend-item.legend-booked:before {
    background: black;
}

span.capacity-legend-item:before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 2px
}

span.capacity-legend-item.legend-free:before {
    border: 1px solid #474747;
}

span.capacity-legend-item.legend-selected:before {
    background: #FFC107;
}