:root {
    --font-family: 'Plus_Jakarta_Sans', sans-serif;
    /*--color-black-primary: #3a383f;*/
    --color-black-primary: #141414;
    --box-shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.05);
    --box-shadow-medium: 0 10px 30px rgba(0, 0, 0, 0.08);
    --box-shadow-overlay: 0 20px 50px rgba(0, 0, 0, 0.12);
    --box-shadow-premium: 0 2px 4px rgba(0, 0, 0, 0.02), 0 10px 20px rgba(0, 0, 0, 0.04), 0 20px 40px rgba(0, 0, 0, 0.06);


}

@font-face {
    font-family: "Plus_Jakarta_Sans";
    src: url('../fonts/Plus_Jakarta_Sans/PlusJakartaSans-VariableFont_wght.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto/Roboto-VariableFont_wdth,wght.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body {
    margin: 0px;
    font-family: var(--font-family);
}

p, h1, h2, h3, h4, h5, h6 {
    margin: 0px;
}

main > section {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    margin: auto;
    width: calc(100% - 40px);
    max-width: calc(1000px - 40px);
}

.table-wrapper {
    width: 100%;
    height: fit-content;
    outline: 1px solid #dcdcde;
    overflow-x: auto;
    border-radius: 10px;
}
.table-wrapper01 {
    width: 100%;
    height: fit-content;
    outline: 1px solid #dcdcde;
    overflow-x: auto;
}


.tbl00 {
    font-size: 11pt;
    outline: 1px solid #dcdcde;
    border-collapse: collapse;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
}

.tbl00 th, .tbl00 td {
    padding: 10px;
}
.tbl00 th:not(:last-child) {
    background: #fbfafd;
    text-align: left;
}
.tbl00 th:last-child {
    background: #fbfafd;
    text-align: right;
}
.tbl00 td {
    white-space: nowrap;
    border-top: 1px solid #dcdcde;
}
.tbl00 td.wrap {
    min-width: 50px;
    white-space: wrap;
}
.tbl00 td:last-child:not(:first-child) {
    text-align: right;
}
.tbl00 td > div {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}
.tbl00 label {
    color: white;
    background: lightseagreen;
    font-size: 8pt;
    padding: 5px;
    border-radius: 5px;
}



.tbl01 {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid black;
}
.tbl01 thead, .tbl01 tbody, .tbl01 tr {
    border: inherit;
}
.tbl01 th, .tbl01 td {
    padding: 5px;
    border: inherit;
}


.fieldset00 {
    display: flex;
    padding: 0px;
    border-radius: 7px;
    border: 1px solid #dcdcde;
    overflow: hidden;
}
.fieldset00:focus-within {
    border: 1px solid lightskyblue;
}
.fieldset00 > legend {
    color: #3a383f;
    font-size: 10pt;
    font-weight: bold;
    letter-spacing: 0.7px;
    margin-left: 10px;
    user-select: none;
}
.fieldset00 > input, .fieldset00 > textarea, .fieldset00 > select {
    font-family: var(--font-family);
    width: 100%;
    font-size: 11pt;
    padding: 5px 10px 10px 10px;
    border: none;
}
.fieldset00 > input:focus, .fieldset00 > textarea:focus, .fieldset00 > select:focus{
    outline: none;
}



.fieldset02 {
    display: flex;
    padding: 5px 10px 10px 10px;
    border-radius: 7px;
    border: 1px solid #dcdcde;
    overflow: hidden;
    gap: 10px;
    flex-wrap: wrap;
}
.fieldset02:focus-within {
    border: 1px solid lightskyblue;
}
.fieldset02 > legend {
    color: #3a383f;
    font-size: 10pt;
    font-weight: bold;
    letter-spacing: 0.7px;
    margin-left: 10px;
    user-select: none;
}
.fieldset02 > input, .fieldset02 > textarea, .fieldset02 > select {
    font-family: var(--font-family);
    width: 100%;
    font-size: 11pt;
    padding: 5px 10px 10px 10px;
    border: none;
}
.fieldset02 > input:focus, .fieldset02 > textarea:focus, .fieldset02 > select:focus{
    outline: none;
}




#divQuestions {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.question-box {
    display: flex;
    flex-direction: column;
    gap: 20px;
    border: 1px solid #e8e8ebff;
    padding: 20px;
    border-radius: 10px;
    transition: 0.2s;
}
.question-box:hover {
    box-shadow: var(--box-shadow-medium);
}
.question-box input, .question-box textarea, .question-box select {
    font-family: var(--font-family);
    padding: 10px;
    border: 1px solid #e8e8ebff;
    border-radius: 7px;
}
.question-box > label:has(input) {
    display: flex;
    gap: 10px;
}
.question-box input[type="checkbox"], .question-box input[type="radio"] {
    margin: 0px;
    width: 16px;
    height: 16px;
    cursor: pointer; /* Optional: improves user experience */
}
.question-box h4 > span {
    color: red;
}