[data-bs-theme=dark] {
    --closet-frame: var(--bs-light);
    --closet-component: var(--bs-info);
}

.closet-frame {
    fill: none;
    stroke: var(--closet-frame);
    stroke-width: 2;
}

.divider, .shelf {
    stroke: var(--closet-component);
    stroke-width: 2;
}

.rod {
    stroke: var(--closet-component);
    stroke-width: 4;
}

.drawer {
    fill: none;
    stroke: var(--closet-component);
    stroke-width: 2;
}

.drawer-handle {
    stroke: var(--closet-component);
    stroke-width: 3;
}

.measurement {
    fill: var(--bs-light);
    font-size: 12px;
    text-anchor: middle;
}

.mobile-measurement {
    font-size: 8px;
}

@media (min-width: 768px) {
    .measurement {
        font-size: 14px;
    }
}

#closetLayout {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.layout-container {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    margin: 1rem -15px;
    padding: 0 15px 1rem;
    max-width: 100vw;
    max-height: 70vh;
}

@media (min-width: 576px) {
    .layout-container {
        margin: 1rem 0;
        padding: 0;
    }
}


.form-container {
    max-width: 100%;
    padding: 0 15px;
    margin: 0 auto;
}

@media (min-width: 576px) {
    .form-container {
        max-width: 540px;
        padding: 0;
    }
}

#optimizations .list-group-item {
    padding: 0.75rem;
}

@media (max-width: 576px) {
    .container {
        padding: 0.5rem;
    }

    h1 {
        font-size: 1.75rem;
        margin-bottom: 1rem;
    }

    .list-group-item {
        padding: 0.5rem;
        font-size: 0.9rem;
    }
}