.form-template-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 1em;
}

.view-form-template-content-section {
    padding: 1em;
    overflow: auto;
    max-height: 36em;
}

.form-template-name-label {
    font-weight: bold;
    font-style: italic;
    font-size: 1.2em;
}

.form-field-option-symbol-and-label-section {
    display: flex;
    gap: 1em;
    margin-top: 1em;
}

.form-field-option-edit-and-delete-section {
    display: flex;
    gap: 1em;
    margin-top: 1em;
    width: fit-content;
    margin-bottom: 2em;
}

.view-template-flex-item {
    flex: 1;
    /* width: 20%; */
    white-space: nowrap;
}

.square {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid black;
}

.circle {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid black;
    border-radius: 50%;
}

.field-option-square-placeholder {
    display: inline-block;
    width: 22px;
    height: 22px;
    border: 2px solid black;
}

.field-option-circle-placeholder {
    display: inline-block;
    width: 22px;
    height: 22px;
    border: 2px solid black;
    border-radius: 50%;
}

.form-field-with-options-user-input {
    display: flex;
    gap: 3em;
    margin-top: 1em;
    /* margin-bottom: 2em; */
}

.field-option-button {
    width: 100%;
    height: 100%;
    font-weight: bold;
    /* font-size: 1.5em; */
    box-sizing: border-box;
    background-color: transparent;
    border: none;
    /* border-radius: 50%; */
}

.field-option-square-user-input {
    display: inline-block;
    width: 22px;
    height: 22px;
    border: 2px solid #00a0d1;
}

.field-option-circle-user-input {
    display: inline-block;
    width: 22px;
    height: 22px;
    border: 2px solid #46be00;
    border-radius: 50%;
}

.green-square {
    background-color: #52e000;
}
.periwinkle-square {
    background-color: #82a9ff;
}
.white-square {
    background-color: white;
}
.gray-square {
    background-color: gray;
}
.yellow-square {
    background-color: yellow;
}
.orange-square {
    background-color: orange;
}
.light-blue-square {
    background-color: #3fd2ff;
}
.purple-square {
    background-color: #9d53ff;
}
.red-square {
    background-color: red;
}
.black-square {
    background-color: black;
}
.dark-green-square {
    background-color: green;
}
.dark-red-square {
    background-color: darkred;
}