.field-wrapper {
    width: 100%;
    height: auto;
    display: grid;
    position: relative;
    gap: 10px;
    padding: 0 16px;
}

.field-wrapper .line {
    margin-top: 10px;
}

.field-group {
    width: 100%;
    height: auto;
    display: flex;
    position: relative;
    gap: 10px;
}

.field {
    width: 100%;
    height: auto;
    display: grid;
    position: relative;
    justify-content: flex-start;
    grid-template-columns: auto 1fr;
    gap: 10px;
    grid-template-areas:
        "subject input"
        "subject msg";
}

.field .subject {
    background-color: var(--input-orange);
}

.field.error .subject {
    color: var(--btn-red-deep);
}

.field.read-only .subject {
    background-color: var(--input-gray-light);
}

.subject {
    width: 174px;
    height: 48px;
    display: inline-flex;
    position: relative;
    flex: 0 0 auto;
    align-items: center;
    border-radius: 10px;
    padding: 8px 10px;
    color: var(--blue-deep);
    font-weight: 500;
    font-size: 14px;
    grid-area: subject;
}

.field.required .subject::before {
    content: '＊';
    color: var(--btn-red);
    font-weight: 700;
    font-size: 14px;
}

.inputs {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    position: relative;
    gap: 10px;
    grid-area: input;
}

.inputs input:not(input[type="radio"]):not(input[type="checkbox"]) {
    width: 100%;
}

.radios {
    min-height: 48px;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
}

.field.error .inputs input {
    border-color: var(--btn-red-deep) !important;
    color: var(--btn-red-deep) !important;
}

.field.read-only .inputs input {
    background-color: var(--input-gray-light) !important;
}

.inputs textarea {
    width: 100%;
    resize: vertical;
}

.select {
    width: 100%;
    height: auto;
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
}

.select select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 48px;
    background-color: #fff;
    font-size: 14px;
    border-radius: 10px;
    border: 1px solid #0000001a;
    padding: 12px 20px;
    font-weight: 400;
    cursor: pointer;
}

.field.read-only .select select {
    background-color: var(--input-gray-light) !important;
}

.field.error .select select {
    border-color: var(--btn-red-deep);
    color: var(--btn-red-deep);
}

.select svg {
    position: absolute;
    top: 16px;
    right: 20px;
    pointer-events: none;
}

.field.read-only svg {
    display: none;
}

.field.error select~svg {
    color: var(--btn-red-deep);
}

.checkbox {
    width: 100%;
    height: auto;
    display: flex;
    position: relative;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
}

.checkbox label {
    margin-right: 5px;
}

.checkbox input[type="checkbox"] {
    accent-color: var(--bluedeep-new);
    width: 20px;
    height: 20px;
    cursor: pointer;
    transform: translateY(1px);
}

.field.read-only .checkbox input[type="checkbox"] {
    opacity: 0.5;
}

.field.read-only .checkbox label {
    color: var(--input-gray-light) !important;
}

.field.error .checkbox input[type="checkbox"]:required {
    accent-color: var(--btn-red-deep);
}

.field.error .checkbox input[type="checkbox"]:required~label {
    color: var(--btn-red-deep);
    cursor: pointer;
}

.radio {
    width: max-content;
    height: auto;
    display: flex;
    position: relative;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
}

.radio input[type="radio"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.radio label {
    width: max-content;
    margin-right: 5px;
    cursor: pointer;
}

.field.read-only .radio input[type="radio"] {
    opacity: 0.5;
}

.field.read-only .radio label {
    color: var(--input-gray-light) !important;
}

.field.error .radio input[type="radio"]:required {
    accent-color: var(--btn-red-deep);
}

.field.error .radio input[type="radio"]:required~label {
    color: var(--btn-red-deep);
    cursor: pointer;
}

.field-msg {
    width: 100%;
    height: auto;
    display: none;
    grid-area: msg;
}

.field-msg.active {
    display: block;
}

.field.error .field-msg p {
    color: var(--btn-red-deep);
}

.subtitle {
    display: flex;
    position: relative;
    justify-content: flex-start;
    align-items: center;
    color: var(--blue-deep);
}

.subtitle:not(:first-of-type) {
    margin-top: 10px;
}

.subtitle button {
    position: absolute;
    right: 0;
    padding: 10px 15px !important;
    font-size: 14px;
    height: 36px;
    line-height: 1;
}

.subtitle button img {
    width: 16px;
    height: 16px;
}

.formTableWrapper {
    width: 100%;
    height: auto;
    display: flex;
    position: relative;
    justify-content: flex-start;
    align-items: center;
    overflow-x: auto;
    background-color: var(--white);
    border-radius: 10px;
}

.formTableWrapper table {
    border-collapse: collapse;
    font-size: 14px;
    width: 100%;
    color: var(--blue-deep);
}

.formTableWrapper table thead {
    background-color: var(--input-gray-light);
}

.formTableWrapper table thead tr th,
.formTableWrapper table tbody tr td {
    padding: 5px 10px;
}

.formTableWrapper.nowrap table thead tr th,
.formTableWrapper.nowrap table tbody tr td {
    white-space: nowrap;
}

.formTableWrapper .fit-content {
    width: 1%;
}

.formTableWrapper .align-start {
    text-align: start;
}

.formTableWrapper .align-end {
    text-align: end;
}

.formTableWrapper .align-center {
    text-align: center;
}

.formTableWrapper .table-func {
    width: max-content;
    height: auto;
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.formTableWrapper .table-func button {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    outline: 0;
    cursor: pointer;
    border-width: 1px;
    border-style: solid;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 400;
    padding: 5px 10px;
}

.formTableWrapper .table-func button:active {
    opacity: 0.8;
}

.formTableWrapper .table-func button:disabled {
    opacity: 0.5;
}

.formTableWrapper .table-func button.default-primary {
    background-color: var(--bluedeep-new);
    color: #fff;
    border-color: var(--bluedeep-new);
}

.formTableWrapper .table-func button.default-secondary {
    background-color: transparent;
    color: var(--bluedeep-new);
    border-color: var(--bluedeep-new);
}

.formTableWrapper .table-func button.danger-primary {
    background-color: var(--btn-red-deep);
    color: #fff;
    border-color: var(--btn-red-deep);
}

.formTableWrapper .table-func button.danger-secondary {
    background-color: transparent;
    color: var(--btn-red-deep);
    border-color: var(--btn-red-deep);
}

dialog {
    margin: auto;
    z-index: 999;
    background-color: var(--white);
    border-color: var(--input-gray-light);
    border-radius: 10px;
    padding: 1.25rem 1rem;
}

dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}

dialog h2 {
    color: var(--blue-deep);
    margin-bottom: 10px;
}

dialog .dialog-close-btn {
    position: absolute;
    right: 1rem;
    top: 1.25rem;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    border: 0;
    outline: 0;
    padding: 0;
    cursor: pointer;
    background-color: transparent;
    font-size: 20px;
    line-height: 1;
}

dialog .error-msg {
    width: 100%;
    height: auto;
    display: flex;
    position: relative;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    background-color: #ffedee;
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 5px 10px;
    color: var(--btn-red-deep);
    ;
}

dialog .error-msg svg {
    width: 18px;
    height: 18px;
    transform: translateY(3px);
}

dialog .error-msg p {
    width: 100%;
    text-align: start;
    color: var(--btn-red-deep);
}

dialog .dialog-filter-wrapper {
    width: 100%;
    height: auto;
    display: grid;
    position: relative;
    gap: 10px;
    margin-bottom: 10px;
}

dialog .dialog-filter-wrapper .input-group {
    width: 100%;
    height: auto;
    display: flex;
    position: relative;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

dialog .dialog-filter-wrapper .input-group span {
    display: inline-block;
    width: 63px;
    font-size: 14px;
    text-align: right;
    font-weight: 700;
    flex: 0 0 auto;
    color: #324053;
}

dialog .dialog-funcs {
    width: 100%;
    height: auto;
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 10px;
}


@media only screen and (max-width: 767px) {
    .field-wrapper {
        padding: 0;
    }

    .field-group {
        flex-direction: column;
    }

    .subject {
        width: 104px;
    }

    dialog .dialog-filter-wrapper {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .field-group {
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
    }

    dialog .dialog-filter-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen and (min-width: 1025px) and (max-width: 1600px) {
    .field-group {
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
    }

    .formTableWrapper .table-func button:hover {
        opacity: 0.9;
    }

    dialog .dialog-filter-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen and (min-width: 1600px) {
    dialog .dialog-filter-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
}