/* RESET *********************************************************************/

* {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
    -webkit-text-size-adjust: 100%;
    font-size: 16px;
}

body {
    width: min(100%, 1120px);
    margin: 0 auto;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8em;
}

p, input[type="checkbox"], input[type="radio"] {
    margin: 0;
    padding: 0;
}

a img {
    border: none; /* Some browsers may display a border around a linked image without this attribute set to _none_. */
}

/* DEFAULTS ******************************************************************/

:root {
    --color-error: #c7281d;
    --bg-info-text: #f8f8f8;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    font-style: normal;
    margin: 0 0 0.5em 0;
    padding: 0;
}

h1 {
    margin-top: 0;
    font-size: 1.4em;
    font-weight: normal;
}

h2 {
    font-size: 1.3em;
}

h3 {
    font-size: 1.2em;
}

h4 {
    font-size: 1.1em;
}

h5 {
    font-size: 1em;
}

h6 {
    font-size: 1em;
    font-weight: normal;
}

p.tall, div.tall {
    margin: 0.5em 0 0.5em 0;
    padding-bottom: 15px;
    line-height: 1.25em;
}

a {
    color: #80353E;
    text-decoration: underline;
}

a:hover {
    color: #000000;
    text-decoration: underline;
}

code {
    font-family: "Courier New", Courier, monospace; /* Usually defaulted to monospaced font anyway, but browwsers may vary which one is used, so giving exact alternatives helps visual consistenct */
    font-size: 1em; /* Setting this exact size may also help visual consistency */
}

table {
    font-size: 1em;
    margin: 0;
    padding: 0;
}

th, td {
    padding: 0;
}

ul, ol {
    margin: 0.75em 0 1em 2.5em;
    padding: 0;
}

ul ul, ol ul {
    margin: 0.3em 0 0.5em 1.3em;
}

ul ol, ol ol {
    margin: 0.3em 0 0.5em 1.9em;
}

li {
    margin: 0 0 0.3em 0;
    padding: 0;
    line-height: 1.25em;
}

dl {
    margin: 0.25em 0 0.25em 0;
    padding: 0;
}

dt, dd {
    font-style: normal;
    margin: 0 0 0.25em 0;
}

dt {
    font-weight: bold;
}

dd {
    margin: 0 1em 0.5em 2.5em;
}

form {
    margin: 0;
    padding: 0;
}

label {
    font-weight: bold;
    padding-right: 0.5em;
    white-space: nowrap;
}

input[type="checkbox"], input[type="radio"] {
    width: 1rem;
    height: 1rem;
    vertical-align: text-bottom;
}

input, select {
    font-family: Arial, Helvetica, sans-serif;
}

input.box {
    font-size: 1em;
}

textarea {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
}

optgroup {
    font-weight: bold;
    font-style: normal;
}

input.button, button, input.defaultbutton {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-align: center;
    vertical-align: middle;
    font-size: 0.8em;
    color: #343434;
}

input.box, textarea.box {
    width: 100%;
    border: 1px solid #A5ACB2;
    font-size: 1em;
}

div.input, div.textarea {
    margin: 0.5em 0 0.5em 0;
    padding: 0 0.25em 0 0.25em;
    border: 1px solid;
    border-color: #808080 #e0e0e0 #e0e0e0 #808080;
}

div.textarea {
    padding-right: 0;
}

div.input input, div.textarea textarea {
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
}

legend {
    font-weight: bold;
    color: #000000;
    padding: 0 0.25em 0 0.25em;
}

fieldset {
    border: 1px solid #ccccc3;
    padding: 0.5em;
}

fieldset label {
    color: #000000;
    float:left;
    width:25%;
    text-align:right;
    padding-right: 1em;
    padding-bottom: 0.3em;
}

fieldset br {
    clear: left;
}

fieldset input.button{
    margin-top: 0.5em;
}

hr {
    color: #ffffff;
    border: none;
    border-top: 1px solid #e0e0e0;
    height: 1px;
    margin: 0.35em 0 0.35em 0;
}

ins {
    color: #008000;
    text-decoration: none;
    border-bottom: 1px solid #00b000;
}

del {
    color: #d98078;
    text-decoration: line-through;
}

ins:hover, del:hover {
    background-color: #ffffff;
}

ins:hover {
    color: #006000;
    border-bottom: none;
}

del:hover {
    color: #852c25;
    text-decoration: none;
}

/* UTILITIES COMPATIBLE WITH TAILWIND CSS ************************************/

.block        { display: block; }
.inline-block { display: inline-block; }
.inline       { display: inline; }
.flex         { display: flex; }
.inline-flex  { display: inline-flex; }
.grid         { display: grid; }
.hidden       { display: none; }

/* spacing */
.m-0     { margin:        0px; }
.mx-0    { margin-left:   0px; margin-right:  0px; }
.my-0    { margin-top:    0px; margin-bottom: 0px; }
.mt-0    { margin-top:    0px; }
.mr-0    { margin-right:  0px; }
.mb-0    { margin-bottom: 0px; }
.ml-0    { margin-left:   0px; }
.m-px    { margin:        1px; }
.mx-px   { margin-left:   1px; margin-right:  1px; }
.my-px   { margin-top:    1px; margin-bottom: 1px; }
.mt-px   { margin-top:    1px; }
.mr-px   { margin-right:  1px; }
.mb-px   { margin-bottom: 1px; }
.ml-px   { margin-left:   1px; }
.m-0\.5  { margin:        0.125rem; }
.mx-0\.5 { margin-left:   0.125rem; margin-right:  0.125rem; }
.my-0\.5 { margin-top:    0.125rem; margin-bottom: 0.125rem; }
.mt-0\.5 { margin-top:    0.125rem; }
.mr-0\.5 { margin-right:  0.125rem; }
.mb-0\.5 { margin-bottom: 0.125rem; }
.ml-0\.5 { margin-left:   0.125rem; }
.m-1     { margin:        0.25rem; }
.mx-1    { margin-left:   0.25rem; margin-right:  0.25rem; }
.my-1    { margin-top:    0.25rem; margin-bottom: 0.25rem; }
.mt-1    { margin-top:    0.25rem; }
.mr-1    { margin-right:  0.25rem; }
.mb-1    { margin-bottom: 0.25rem; }
.ml-1    { margin-left:   0.25rem; }
.m-1\.5  { margin:        0.375rem; }
.mx-1\.5 { margin-left:   0.375rem; margin-right:  0.375rem; }
.my-1\.5 { margin-top:    0.375rem; margin-bottom: 0.375rem; }
.mt-1\.5 { margin-top:    0.375rem; }
.mr-1\.5 { margin-right:  0.375rem; }
.mb-1\.5 { margin-bottom: 0.375rem; }
.ml-1\.5 { margin-left:   0.375rem; }
.m-2     { margin:        0.5rem; }
.mx-2    { margin-left:   0.5rem; margin-right:  0.5rem; }
.my-2    { margin-top:    0.5rem; margin-bottom: 0.5rem; }
.mt-2    { margin-top:    0.5rem; }
.mr-2    { margin-right:  0.5rem; }
.mb-2    { margin-bottom: 0.5rem; }
.ml-2    { margin-left:   0.5rem; }
.m-4     { margin:        1rem; }
.mx-4    { margin-left:   1rem; margin-right:  1rem; }
.my-4    { margin-top:    1rem; margin-bottom: 1rem; }
.mt-4    { margin-top:    1rem; }
.mr-4    { margin-right:  1rem; }
.mb-4    { margin-bottom: 1rem; }
.ml-4    { margin-left:   1rem; }

.p-0     { padding:        0px; }
.px-0    { padding-left:   0px; padding-right:  0px; }
.py-0    { padding-top:    0px; padding-bottom: 0px; }
.pt-0    { padding-top:    0px; }
.pr-0    { padding-right:  0px; }
.pb-0    { padding-bottom: 0px; }
.pl-0    { padding-left:   0px; }
.p-px    { padding:        1px; }
.px-px   { padding-left:   1px; padding-right:  1px; }
.py-px   { padding-top:    1px; padding-bottom: 1px; }
.pt-px   { padding-top:    1px; }
.pr-px   { padding-right:  1px; }
.pb-px   { padding-bottom: 1px; }
.pl-px   { padding-left:   1px; }
.p-0\.5  { padding:        0.125rem; }
.px-0\.5 { padding-left:   0.125rem; padding-right:  0.125rem; }
.py-0\.5 { padding-top:    0.125rem; padding-bottom: 0.125rem; }
.pt-0\.5 { padding-top:    0.125rem; }
.pr-0\.5 { padding-right:  0.125rem; }
.pb-0\.5 { padding-bottom: 0.125rem; }
.pl-0\.5 { padding-left:   0.125rem; }
.p-1     { padding:        0.25rem; }
.px-1    { padding-left:   0.25rem; padding-right:  0.25rem; }
.py-1    { padding-top:    0.25rem; padding-bottom: 0.25rem; }
.pt-1    { padding-top:    0.25rem; }
.pr-1    { padding-right:  0.25rem; }
.pb-1    { padding-bottom: 0.25rem; }
.pl-1    { padding-left:   0.25rem; }
.p-1\.5  { padding:        0.375rem; }
.px-1\.5 { padding-left:   0.375rem; padding-right:  0.375rem; }
.py-1\.5 { padding-top:    0.375rem; padding-bottom: 0.375rem; }
.pt-1\.5 { padding-top:    0.375rem; }
.pr-1\.5 { padding-right:  0.375rem; }
.pb-1\.5 { padding-bottom: 0.375rem; }
.pl-1\.5 { padding-left:   0.375rem; }
.p-2     { padding:        0.5rem; }
.px-2    { padding-left:   0.5rem; padding-right:  0.5rem; }
.py-2    { padding-top:    0.5rem; padding-bottom: 0.5rem; }
.pt-2    { padding-top:    0.5rem; }
.pr-2    { padding-right:  0.5rem; }
.pb-2    { padding-bottom: 0.5rem; }
.pl-2    { padding-left:   0.5rem; }
.p-4     { padding:        1rem; }
.px-4    { padding-left:   1rem; padding-right:  1rem; }
.py-4    { padding-top:    1rem; padding-bottom: 1rem; }
.pt-4    { padding-top:    1rem; }
.pr-4    { padding-right:  1rem; }
.pb-4    { padding-bottom: 1rem; }
.pl-4    { padding-left:   1rem; }

/* size */
.w-full { width: 100%; }

/* color */
.text-gray-100 { color: rgb(243 244 246); }
.text-gray-200 { color: rgb(229 231 235); }
.text-gray-300 { color: rgb(209 213 219); }
.text-gray-400 { color: rgb(156 163 175); }
.text-gray-500 { color: rgb(107 114 128); }
.text-gray-600 { color: rgb(75 85 99); }
.text-gray-700 { color: rgb(55 65 81); }
.text-gray-800 { color: rgb(31 41 55); }
.text-gray-900 { color: rgb(17 24 39); }

/* text */
.text-xs   { font-size: 0.75rem;  /* line-height: 1rem;    */ }
.text-sm   { font-size: 0.875rem; /* line-height: 1.25rem; */ }
.text-base { font-size: 1rem;     /* line-height: 1.5rem;  */ }
.text-lg   { font-size: 1.125rem; /* line-height: 1.75rem; */ }
.text-xl   { font-size: 1.25rem;  /* line-height: 1.75rem; */ }
.text-2xl  { font-size: 1.5rem;   /* line-height: 2rem;    */ }
.text-left    { text-align: left; }
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.align-text-top { vertical-align: text-top; }
.align-middle   { vertical-align: middle; }
.align-baseline { vertical-align: baseline; }
.font-thin       { font-weight: 100; }
.font-extralight { font-weight: 200; }
.font-light      { font-weight: 300; }
.font-normal     { font-weight: 400; }
.font-medium     { font-weight: 500; }
.font-semibold   { font-weight: 600; }
.font-bold       { font-weight: 700; }
.font-extrabold  { font-weight: 800; }
.font-black      { font-weight: 900; }
.break-words { overflow-wrap: break-word; }

/* border */
.border-0 { border-width: 0px; }
.border   { border-width: 1px; }

/* flex, grid */
.flex-wrap { flex-wrap: wrap; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around; }
.items-start  { align-items: flex-start; }
.items-center { align-items: center; }
.items-end    { align-items: flex-end; }
.self-center { align-self: center; }

.gap-0       { gap:        0px; }
.gap-x-0     { column-gap: 0px; }
.gap-y-0     { row-gap:    0px; }
.gap-px      { gap:        1px; }
.gap-x-px    { column-gap: 1px; }
.gap-y-px    { row-gap:    1px; }
.gap-0\.5    { gap:        0.125rem; }
.gap-x-0\.5  { column-gap: 0.125rem; }
.gap-y-0\.5  { row-gap:    0.125rem; }
.gap-1       { gap:        0.25rem; }
.gap-x-1     { column-gap: 0.25rem; }
.gap-y-1     { row-gap:    0.25rem; }
.gap-1\.5    { gap:        0.375rem; }
.gap-x-1\.5  { column-gap: 0.375rem; }
.gap-y-1\.5  { row-gap:    0.375rem; }
.gap-2       { gap:        0.5rem; }
.gap-x-2     { column-gap: 0.5rem; }
.gap-y-2     { row-gap:    0.5rem; }
.gap-4       { gap:        1rem; }
.gap-x-4     { column-gap: 1rem; }
.gap-y-4     { row-gap:    1rem; }

/* table */
.table-fixed { table-layout: fixed; }
.border-collapse { border-collapse: collapse; }

/* UTILITIES NOT COMPATIBLE WITH TAILWINDCSS *********************************/
.block-gap-y-1 > * + * { margin-top: 0.25rem; }
.block-gap-y-2 > * + * { margin-top: 0.5rem; }
.block-gap-y-3 > * + * { margin-top: 0.75rem; }
.block-gap-y-4 > * + * { margin-top: 1rem; }

.table-reset {
    border-spacing: 0;
    border-collapse: collapse;
}
.table-reset > :where(tbody, thead) > :where(tr) > :where(td, th){
    border-width: 1px;
    border-style: solid;
    border-color: #999999;
}

:where(.cell-p-0\.5) > :where(tbody, thead) > tr > :where(td, th) { padding: 0.125rem; }
:where(.cell-px-0\.5) > :where(tbody, thead) > tr > :where(td, th) { padding-left: 0.125rem; padding-right: 0.125rem; }
:where(.cell-py-0\.5) > :where(tbody, thead) > tr > :where(td, th) { padding-top: 0.125rem; padding-bottom: 0.125rem; }

:where(.cell-p-1) > :where(tbody, thead) > tr > :where(td, th) { padding: 0.25rem; }
:where(.cell-px-1) > :where(tbody, thead) > tr > :where(td, th) { padding-left: 0.25rem; padding-right: 0.25rem; }
:where(.cell-py-1) > :where(tbody, thead) > tr > :where(td, th) { padding-top: 0.25rem; padding-bottom: 0.25rem; }

:where(.cell-p-2) > :where(tbody, thead) > tr > :where(td, th) { padding: 0.5rem; }
:where(.cell-px-2) > :where(tbody, thead) > tr > :where(td, th) { padding-left: 0.5rem; padding-right: 0.5rem; }
:where(.cell-py-2) > :where(tbody, thead) > tr > :where(td, th) { padding-top: 0.5rem; padding-bottom: 0.5rem; }

/* THEME *********************************************************************/
.color-error {
    color: var(--color-error);
}
.bg-info-text {
    background-color: var(--bg-info-text);
}

/* PAGE LAYOUT ***************************************************************/

div#page {
    margin-bottom: 1rem;
}
/* media query for desktop screens */
@media screen and (min-width: calc(1120px - 4px)) {
    div#page {
        border: 4px outset #CECEC2; /* inset outset ridge double solid */
    }
}


/* TOP MENU */
div#topmenu {
    --menu-height: 1.5rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #80353E;
}

div#topmenu ul {
    margin: 0;
    padding: 0;
    height: var(--menu-height);
}

div#topmenu > ul.left-menu {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
}

div#topmenu > ul.right-menu {
    flex: 0 0 max-content;
}

div#topmenu li {
    margin: 0;
    padding: 0 1rem;
    height: var(--menu-height);
    font-size: 0.85em;
    font-weight: bold;
    list-style-type: none;
    list-style-image: none;
    display: flex;
    align-items: center;
}

div#topmenu a {
    line-height: 0;
    color: #FFFFFF;
    text-decoration: none;
}

/* PATH */

div#path {
    padding: 0.5em 0.5em 0.5em 2em;
    font-size: 0.85em;
    text-align: right;
}

/* FLEX COLUMNS */

div#columns {
    display: flex;
    flex-wrap: wrap;
}

div#sidemenu {
    flex: 1 0 11.5rem;
    padding: 0.5rem 0.75rem;
}

div#main {
    flex: 9999 0 375px;
    padding: 0.5rem 0.75rem;
}

/* SIDE MENU */

div#sidemenu ul {
    list-style-type: none;
    margin: 0.5em 0 0.5em 0;
}

div#sidemenu ul li {
    margin: 0.25em 0 0.25em 0;
    list-style-type: none;
    list-style-image: none;
}

div#sidemenu h4 {
    margin: 0;
}

div#sidemenu h4 a {
    text-decoration: none;
}

/* MAIN AREA */

div#main h1 {
    font-size: 1.8em;
    font-weight: normal;
    padding-bottom: 25px;
    color: #000000;
    margin-bottom: 0;
}

div#main ul {
    padding: 0;
    margin: 0.75em 0 1em 1em;
    list-style-type: none;
}

div#main ul li {
    margin: 0 0 0.5rem 0.5rem;
    padding-right: 0.75rem;
    line-height: 1.25em;
}

/* COMPONENTS ****************************************************************/

.exam-item-text pre {
    margin: 0;
    padding: 0.25rem 0.25rem;
    font-family: "Courier New", Courier, monospace;
    background-color: var(--bg-info-text);
    border: 1px solid #e0e0e0;
    white-space: pre-wrap;
    overflow-wrap: break-word;
}
.exam-item-text pre:empty {
    margin: 0.125rem;
    padding: 0;
    background: none;
    border: none;
}

.exam-note-text {
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

.alert_yes {
    background-color: #F0C0C0;
}

.answer_correct_true {
    background-color: #C5E2DC;
}

.request_error {
    color: var(--color-error);
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

/* common key-value */
:where(.common_kv) {
    --gap: 0rem;
    --key-width: 10rem;
    --border-width: 1px;
    --padding: 0.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    width: 100%;
    border: solid #999999;
    border-width: var(--border-width) 0 0 var(--border-width);
}
:where(.common_kv) > :where(*){
    padding: var(--padding);
    border: solid #999999;
    border-width: 0 var(--border-width) var(--border-width) 0;
}
:where(.common_kv) > :where(:nth-child(odd)){
    flex: 1 0 var(--key-width);
    display: grid;              /* centering */
    place-items: center center; /* centering */
}
:where(.common_kv) > :where(:nth-child(even)){
    flex: 9999 0 max(375px, calc(100% - var(--key-width) - var(--gap)));
    width: 0; /* force break line when overflow-wrap: break-word; */
}

/* SURVEY SECTION */

.survey_section {
    border: 1px #002966 solid;
    padding: 1em 1em 1em 1em;
}

.section_heading {
    text-align: left;
    color:         #002966;
    padding-bottom: 1em;
    margin-bottom: 1em;
}

.RequiredField {
    color: red;
}

.survey_question {
    margin-bottom: 1em;
    width: 100%;
    background: #C5E2DC;
}

.question_text {
    text-align: left;
    width: 18em;
}

.question_choice {
    padding-left: 1em;
    padding-right: 1em;
    padding-bottom: 1em;
}

.question_choice label {
    text-align: center;
}

.question_choice input {
    position: relative;
}

.survey_section br {
    clear: left;
}

.badge {
    padding: 0 0.25rem;
    margin-right: 0.25rem;
    border: solid 1px #CCCCCC;
    border-radius: 0.125rem;
}

table.default {
    width: 100%;
    border-collapse: collapse;

    td, th {
        padding: 0.25rem 0.25rem;
        border: solid 1px #AAAAAA;
    }

    th {
        text-align: center;
        background-color: #E9E9E9;
    }
}

table.exam_item{
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;

    td, th {
        padding: 0.25rem 0.25rem;
        border: solid 1px #AAAAAA;
    }

    th {
        text-align: center;
        background-color: #E9E9E9;
    }
}

table.choice{
    border-collapse: collapse;
    border: 0.125rem solid transparent;
    width: 100%;

    th {
        padding: 0.25rem 0.25rem;
        font-weight: bold;
        text-align: center;
        vertical-align: middle;
        background-color: #FFFFFF;
        border: solid 1px #DDDDDD;
    }

    td {
        padding: 0.125rem 0.125rem;
        text-align: left;
        vertical-align: top;
        border: solid 1px #DDDDDD;
    }
}

table.exam_item_review{
    margin-bottom: 1rem;
    border-collapse: collapse;
    width: 100%;

    td, th {
        padding: 0.125rem 0.25rem;
        vertical-align: center;
        border: solid 1px #CCCCCC;
    }

    th {
        background-color: #E9E9E9;
        font-weight: 600;
        text-align: center;
    }
}

table.form-list{
    border-collapse: collapse;
    width: 100%;

    th, td {
      height: 2rem;
      padding: 0.25rem 0.25rem;
      text-align: center;
      vertical-align: middle;
      border: solid 1px #CCCCCC;
    }

    th {
      background-color: #E08080;
    }

    .exam {
      padding-left: 1.5rem;
      text-align: left;
      font-size: 1rem;
      font-weight: 600;
      background-color: #D8D8D8;
    }

    .name {
      text-align: left;
      white-space: pre-line;
      padding-left: 0.75rem;
    }
}

table.item_report {
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;
    text-align: center;

    tr {
        border: solid 1px #DDDDDD;

        &.key {
            background-color: #EEEEEE;
        }

        &.separator {
            height: 20px;
            border: none;
        }
    }

    th {
        padding: 0.25rem 0.25rem;
        font-weight: bold;
        text-align: center;
        vertical-align: middle;
        background-color: #E08080;

        .hover-visible {
            display: none;
        }
        &:hover .hover-visible {
            display: inline;
        }
    }

    td {
        padding: 0.25rem 0.25rem;
    }
}