.CategoryEditor_Container {
    display: grid;
    column-gap: 20px;
    row-gap: 40px;
    /* grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); */
    align-items: start;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

.CategoryEditor_Container .Hide {
    display: none !important;
}

.CategoryCard {
    padding: 10px;
    display: grid;
    gap: 10px;
}

.CategoryCard .NameBox .Content {
    display: grid;
    gap: 5px;
}
.CategoryCard .TopCategoryForm .NameBox .Content {
    grid-template-columns: 1fr 120px;
}
.CategoryCard .SubCategoryForm .NameBox .Content {
    grid-template-columns: auto 1fr 120px;
}

.CategoryCard .NameBox .Form {
    display: grid;
    gap: 5px;
    grid-template-columns: 1fr 120px;
}

.CategoryCard .TopCategoryForm, 
.CategoryCard .SubCategoryForm {
    width: 100%;
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: space-between;
    border-radius: 5px;
}
.CategoryCard .TopCategoryForm {
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    padding: 10px 10px;
}
.CategoryCard .SubCategoryForm {
    border: 1px solid #ddd;
    padding: 7px 10px;
}

.CategoryCard .TopCategoryForm .NameBox {
    flex-grow: 1;
    font-weight: bold;
    color: #333;
}
.CategoryCard .TopCategoryForm .NameBox .Content .Label {
    display: none;
}

.CategoryCard .SubCategory_Box {
    width: 90%;
    justify-self: end;

    display: grid;
    gap: 5px;
}
.CategoryCard .SubCategoryForm .NameBox {
    flex-grow: 1;
    font-size: 0.9em;
    font-weight: 300;
    color: #333;
}
.CategoryCard .SubCategoryForm .NameBox .Content .Label {
    color: #999;
}

.CategoryCard .SubCategoryInsertForm {
    border-radius: 5px;
    border: 1px dashed #ccc;
    padding: 10px 10px;
    display: flex;
    gap: 15px;
    justify-content: space-between;
}
.CategoryCard .SubCategoryInsertForm .InsertButton {
    flex-grow: 1;
    color: green;
    font-weight: 500;
    text-align: center;
}
.CategoryCard .SubCategoryInsertForm .Form {
    flex-grow: 1;
    display: grid;
    gap: 5px;
    grid-template-columns: 1fr 120px;
}

.CategoryCard .TopCategoryInsertForm {
    background-color: #f5f5f5;
    border-radius: 5px;
    border: 1px dashed #ccc;
    padding: 15px 10px;
    display: flex;
    gap: 15px;
    justify-content: space-between;
}
.CategoryCard .TopCategoryInsertForm .InsertButton {
    flex-grow: 1;
    color: green;
    font-weight: 500;
    text-align: center;
}
.CategoryCard .TopCategoryInsertForm .Form {
    flex-grow: 1;
    display: grid;
    gap: 5px;
    grid-template-columns: 1fr 120px;
}

.CategoryCard .ButtonBox .ModifyMode,
.CategoryCard .ButtonBox .EditMode
{
    display: flex;
    gap: 5px;
}

.CategoryCard .ButtonBox .CategoryFormButton {
    padding: 3px;
}
.CategoryCard .ButtonBox .EditButton {
    color: blue;
}
.CategoryCard .ButtonBox .DeleteButton {
    color: darkred;
}
.CategoryCard .ButtonBox .SubmitButton {
    color: green;
}
.CategoryCard .ButtonBox .CancelButton {
    color: gray;
}

.CategoryCard .NameBox .Content,
.CategoryCard .InsertButton,
.CategoryCard .ButtonBox .EditButton,
.CategoryCard .ButtonBox .DeleteButton, 
.CategoryCard .ButtonBox .SubmitButton,
.CategoryCard .ButtonBox .CancelButton,
.CategoryCard .ButtonBox .CancelButton {
    cursor: pointer;
}