.checkbox_label {
    display: grid;
    grid-template-columns: 30px 1fr;
    row-gap: 5px;
}

.checkbox_label input {
    margin: 0px 5px;
}

.checkbox_label label {
    margin-bottom: 0px;
}

#file_input_form {
    display: grid;
    grid-template-areas: "label" "input" "counter" "button";
    grid-template-columns: 300px;
    row-gap: 5px;
    margin-bottom: 10px;
}

#content {
    margin-left: 15px;
    display: grid;
    grid-template-areas: "heading . . ."
        "file-area-heading requiredFields-heading optional-heading properties-heading"
        "file-area requiredFields optional properties"
        "rest1 requiredFields optional properties"
        ". requiredFields optional properties"
        ". requiredFields optional properties"
        "preview preview preview preview"
        "preview-2 preview-2 preview-2 preview-2"
        ". . . .";
    /* grid-template-areas:"heading . . ." 
                        "file-area-heading requiredFields-heading optional-heading categories-heading"
                        "file-area requiredFields optional categories"
                        "rest1 requiredFields optional categories"
                        ". requiredFields optional categories"
                        ". requiredFields optional categories"
                        "preview preview preview preview"
                        ". . . ."; */
    column-gap: 10px;
    row-gap: 10px;
}

#preview-container {
    overflow-x: auto;
    /* max-width: 90rem; */
    overflow-y: auto;
    max-height: 750px;
    grid-area: preview;
}

#preview-container-2 {
    overflow-x: auto;
    /* max-width: 90rem; */
    overflow-y: auto;
    max-height: 750px;
    grid-area: preview-2;
}

#preview,
#preview-2 {
    display: grid;
}

.preview_lines {
    display: contents;
}

.preview-grid-cell {
    padding: 5px;
    max-width: 250px;
    border: solid 1px;
}

.title-cell {
    position: sticky;
    top: 0;
    background-color: #007bff;
    color: #fff;
    cursor: pointer;
}

.fields {
    display: grid;
    grid-template-columns: 40px max-content 1fr;
    width: 500px;
    row-gap: 5px;
    column-gap: 5px;
    /* grid-template-rows: 50px; */
    grid-auto-rows: min-content;
}

.fields.properties .field-buttons {
    text-align: left !important;
}

#requiredFields input {
    /* width:200px */
    display: grid;
    grid-template-columns: auto auto auto;
}

#optionalFields input {
    /* width:200px; */
    display: grid;
    grid-template-columns: auto auto auto;
}

button {
    height: 38px;
}

.btn-info {
    color: #fff !important;
}

.setting-checkbox-group{
    display: grid;
  grid-template-columns: 0px 1fr;
  align-items: center;
  margin-bottom: 5px;
}