:root {
    --collection-background: #fafafa;
    --collection-border: #ccc;
    --collection-buttons-background: #e5e5e5;
}

.settings {
    flex-direction: column;
    text-align: left;
    align-self: flex-start;
    padding-left: .5rem;
    padding-top: 1rem;
    flex: 1;
}
    .settings .category {
        margin-bottom: 2.5rem;
    }
        .settings .category .header {
            font-size: 1.75rem;
            font-weight: 700;
            border-bottom: 1px solid var(--accent-border);
            padding-bottom: .5rem;
            margin: 0;
            margin-bottom: 1rem;
            min-width: 25rem; max-width: 35rem;
        }
        .settings .category > .component {
            margin-bottom: .75rem;
            max-width: 25rem;
        }

    .settings .category .collection {
        display: flex; flex-direction: column;
        margin-bottom: 1.25rem;
    }
        .settings .collection .name {
            font-size: 1.15rem;
            font-weight: 500;
            margin-bottom: .5rem;
        }
        .settings .collection .content {
            background-color: var(--collection-background);
            border-radius: .25rem;
            border: 1px solid var(--border);
            min-width: 25rem; width: 25rem; max-width: 50rem;
            min-height: 10rem; height: 10rem; max-height: 30rem;
            display: flex;
            resize: both;
            overflow: auto;
        }
            .settings .collection .content .items {
                flex: 1;
            }
            .settings .collection .content .buttons {
                min-width: 8rem; width: 8rem; max-width: 8rem;
                display: flex; flex-direction: column;
                border-left: 1px solid var(--border);
                background-color: var(--collection-buttons-background);
                padding: .5rem;
            }
                .settings .collection .content .buttons .component:not(:last-child) {
                    margin-bottom: .25rem;
                }

    .settings .subcat {
        display: flex;
    }
        .settings .subcat .subcat-line {
            background-color: var(--border);
            max-width: 1px; width: 1px;
            flex: 1;
            margin-bottom: .75rem;
            margin-right: .75rem;
        }
        .settings .subcat .content {
            display: flex; flex-direction: column;
        }
        .settings .subcat .content > .component {
            margin-bottom: .75rem;
        }

    .settings > .save {
        margin: 1rem 0;
        font-size: 1.2rem;
        width: 10rem;
        height: 2.5rem;
    }


#call-category-form .header {
    font-size: 1.25rem;
    font-weight: 500;
    width: 80%;
    align-self: center;
}
#call-category-form .call-category {
    align-self: flex-start;
    align-items: flex-start;
    flex-direction: column;
    width: 100%;
}
#call-category-form .buttons {
    display: flex;
    align-self: stretch;
}
#call-category-form .buttons .button {
    flex: 1;
}
    #call-category-form .buttons .button:first-child {
        margin-right: 2rem;
    }