.feature-form {
    display: flex;
    align-items: center;
    justify-content: start;
    flex-wrap: wrap;
    border: 1px solid var(--text-color);
    padding: var(--medium-gap);
    gap: var(--large-gap);
}

    .feature-form > div > label {
        padding: 0;
        margin: 0;
    }

.function-list {
    display: flex;
    flex-direction: column;
    gap: var(--pill-gap);
}

.function {
    display: flex;
    align-items: center;
    justify-content: start;
    flex-wrap: wrap;
    border: 1px solid var(--text-color);
    padding: var(--pill-gap);
    gap: var(--pill-gap);
    background-color: var(--white-bg);
}

    .function > div:nth-child(1) {
        flex-grow: 2;
        padding: var(--pill-gap) 0;
    }

        .function > div:nth-child(1) > span {
            padding: var(--pill-gap);
            background-color: var(--text-color);
            color: var(--white-bg);
            border-radius: var(--pill-gap);
            margin-right: var(--medium-gap);
        }

.function-states {
    display: flex;
    align-items: center;
    gap: var(--large-gap);
    justify-content: end;
}

.function-state{
    display: flex;
    align-items:center;
    gap: var(--pill-gap);
    width: 20rem;
    flex-shrink: 1;
}

.fnc-icon {
    width: var(--pill-h-mini);
    height: var(--pill-h-mini);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fnc-icon-enabled {
    background-color: var(--success-color);
}

.fnc-icon-disabled {
    background-color: var(--danger-color);
}

.fnc-icon-public {
    background-color: var(--warning-color);
}

.fnc-icon-privat {
    background-color: var(--success-color);
}

@media (max-width: 850px) {
    .function-state {
        width: auto;
    }
}