body {
    background-color: var(--main-bg-color);
    color: var(--main-txt-color);
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

header {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10pt;
    text-decoration: none;
    color: var(--main-txt-color);
}

textarea {
    color: var(--main-txt-color);
    background-color: var(--main-bg-color);
}

select {
    background-color: var(--main-bg-color);
    color: var(--main-txt-color);
}

option {
    color: var(--main-txt-color);
}

legend {
    color: var(--main-head-color);
}

span.top_heading {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12pt;
    font-weight: bold;
    color: var(--main-txt-color);
}

span.heading {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10pt;
    font-weight: bold;
    color: var(--main-txt-color);
}

/* START styling for heading-block */
.heading_container {
    display: grid;
    grid-template-rows: repeat(2, auto);
    grid-template-columns: 19% 81%;
    grid-template-areas:
        "domain assessment  "
        "unit   description ";
    grid-row-gap: 22px;
    font-weight: bold;
    font-size: 13px;
    color: var(--main-txt-color);
    margin: 15px 0 30px 0;
}

.domain_name {
    grid-area: domain;
}

.assessment_title {
    grid-area: assessment;
}

.unit_name {
    grid-area: unit;
}

.unit_summary {
    grid-area: description;
}

/* END styling for heading-block */
.unit_header {
    font-size: 17px;
    /*margin: 25px 0px 0px 0px;*/
    font-weight: bold;
}

#instance_select {
    border: none;
    font-weight: bold;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 17px;
    cursor: pointer;
}

#instance_select:focus-visible {
    outline: none;
}

/* START styling for Buttons-Block*/
input[type="button"] {
    cursor: pointer;
}

.button_container {
    display: grid;
    /* grid-template-rows: repeat(4, auto); */
    grid-template-columns: repeat(8, max-content);
    /* grid-template-areas:
        "element_id summary     notes       save        evidences   rec         rule        safety      ."; */
    gap: 6px;
}

.button_bonus_container {
    display: grid;
    grid-template-rows: repeat(3, auto);
    grid-template-columns: 8% repeat(7, auto) 8%;
    grid-template-areas:
        ". sum_comment sum_comment sum_comment sum_comment sum_comment sum_comment ."
        ". ev_table    ev_table    ev_table    ev_table    ev_table    ev_table    ."
        ". sum_text    sum_text    sum_text    sum_text    sum_text    sum_text    .";
    grid-row-gap: 3px;
}

.element_id {
    grid-area: element_id;
}

.summary_button {
    grid-area: summary;
}

.all_notes {
    grid-area: notes;
}

.save_all {
    grid-area: save;
}

.toggle_evidences {
    grid-area: evidences;
}

.rec_button {
    grid-area: rec;
}

.rule_button {
    grid-area: rule;
}

.safety_button {
    grid-area: safety;
}

.sum_comment {
    grid-area: sum_comment;
    display: grid;
    grid-template-columns: 1fr;
}

.ev_table {
    grid-area: ev_table;
    width: 620px;
    padding-bottom: 10px;
}

.sum_text {
    grid-area: sum_text;
    padding-bottom: 10px;
}

/* END styling for Button-Block*/
.progress-bar-container {
    height: 1.125rem;
    background-color: var(--progressbar-background);
    display: none;
    position: relative;
    border-radius: 4px;
    z-index: 500;
}

.progress-bar-container .progress-bar {
    position: absolute;
    height: 100%;
    background-color: var(--main-txt-color);
    border-radius: 3px;
}


/* START styling for PC-Block*/
.pc_container {
    display: grid;
    grid-template-rows: repeat(5, auto);
    grid-template-columns: max-content 5fr 5fr 5fr 5fr 5fr 4fr 5fr 6fr;
    grid-template-areas:
        "pcid   text      text      text      text      text      text         text text"
        "pcid   sfscores    sfscores    sfscores    sfscores    sfscores  note-button  .  ."
        "pcid   scores    scores    scores    scores    scores    note-button  .    ."
        "pcid   note      note      note      note      note      .            .    ."
        "pcid   context   context   context   context   context   .            .    ."
        "pcid   help      help      help      help      help      .            .    .";
    margin-bottom: 20px;
    gap: 3px 15px;
}

.pcid {
    grid-area: pcid;
}

.text {
    grid-area: text;
}

.score-container {
    grid-area: scores;
}

.safety-score-container {
    grid-area: sfscores;
}

.score_form {
    display: grid;
    grid-template-columns: max-content repeat(4, 1fr) max-content;
    grid-template-areas: "icon n-rating  p-rating  l-rating  f-rating  na-rating";
}

.icon {
    grid-area: icon;
    display: grid;
    align-content: center;
    justify-content: center;

    font-weight: bold;
    font-size: 11px;
}

.n-rating {
    grid-area: n-rating;
    text-align: center;
}

.p-rating {
    grid-area: p-rating;
    text-align: center;
}

.l-rating {
    grid-area: l-rating;
    text-align: center;
}

.f-rating {
    grid-area: f-rating;
    text-align: center;
}

.na-rating {
    grid-area: na-rating;
    text-align: center;
}

.note-button {
    grid-area: note-button;
    text-align: center;
    align-content: center;
}

.note {
    grid-area: note;
    margin-bottom: 10px;
}

.context {
    grid-area: context;
    margin-bottom: 10px;
}

.help {
    grid-area: help;
    margin-bottom: 10px;
}

.outcome_container {
    display: flex;
    flex-direction: row;
    margin-bottom: 5px;
}

.outcome_element {
    position: relative;
    display: inline-block;
    margin-right: 10px;
}

.outcome_element .outcome_tooltip {
    visibility: hidden;
    max-width: 500px;
    min-width: 200px;

    background-color: var(--menu-bg-color);
    color: #fff;
    text-align: center;
    padding: 5px;

    /* Position the tooltip text */
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translate(-50%);
}

.outcome_element .outcome_tooltip::after {
    content: " ";
    position: absolute;
    top: 100%;
    /* At the bottom of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: var(--menu-bg-color) transparent transparent transparent;
}

.outcome_element:hover .outcome_tooltip {
    visibility: visible;
}

/* END styling for PC-Block*/
/* END List_Evidence Block */
.frametable {
    margin-left: 20px;
    margin-top: 10px;
    padding-left: 30px;
    padding-right: 10px;
    padding-bottom: 15px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    font-family: Helvetica, sans-serif;
    border-collapse: collapse;
    width: 666px;
}

.frametable th {
    padding-right: 33px;
    text-align: left;
}

.frametable .head {
    border: 1px solid #C0C0C0;
    padding-left: 10px;
}

.frametable th div {
    font-weight: normal;
    margin-bottom: 18px;
    margin-top: 20px;
    font-size: 18px;
    font-family: Helvetica, sans-serif;
}

.frametable td {
    padding-right: 16px;
}

.frametable .data {
    border-right: 2px solid #C0C0C0;
    padding-left: 10px;
}

.frametable .button {
    padding-top: 10px;
    padding-bottom: 5px;
}

/* END List_Evidence Block */
/* START General Styling */
.image_button {
    border: 2px solid var(--main-txt-color) !important;
    border-radius: 4px;
    color: var(--main-txt-color);
    background-color: var(--main-bg-color);
    margin: 3px;
    font-weight: bold;
}

.image_button:disabled {
    border: 2px solid var(--main-disabled-grey) !important;
    color: var(--main-disabled-grey);

}

.comment_grid {
    display: grid;
    grid-template-columns: 1fr 10fr;
}

.comment_button {
    position: relative;
    top: 50%;
    right: 7px;
}


#drag_show {
    display: none;
    border-top: none;
    border-left: 1px solid var(--main-txt-color);
    border-right: 1px solid var(--main-txt-color);
    border-bottom: 1px solid var(--main-txt-color);
    padding: 10px 20px;
}

#drag_show.highlight {
    height: 50px;
    border: 2px solid var(--main-txt-color) !important;
}

.main_practice_text {
    display: block;
    margin-bottom: 7px;
}

.aspice_recommendation_container,
.aspice_rule_container,
.safety_container {
    display: none;
}

.info_block_container {
    margin: 15px 0px;
}

.rcrl_general {
    margin-bottom: 7px;
}

.info_tag {
    color: var(--success-green);
}

.other_comments_container {
    padding: 10px 0px;
    margin: 10px 0px;
    min-height: 20px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10pt;
}

.other_comments_heading {
    display: inline-flex;
    gap: 2px;
    align-items: center;
}

.other_comments_container .other_comments_rating {
    display: inline-flex;
    width: 30px;
    height: 25px;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
}

:disabled {
    background: var(--main-bg-color);
    color: #000;
}

option:disabled {
    color: var(--main-disabled-grey);
}

input[type=radio]:disabled {
    /* remove standard background appearance */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* create custom radiobutton appearance */
    display: inline-block;
    width: 13px;
    height: 13px;
    padding: 0px;
    /* background-color only for content */
    background-clip: content-box;
    border: 1px solid #000;
    background-color: #e7e6e7;
    border-radius: 50%;
}

/* appearance for checked radiobutton */
input[type="radio"].N:checked:disabled {
    background-color: #cf1201;
}

input[type="radio"].P:checked:disabled {
    background-color: #ff7100;
}

input[type="radio"].L:checked:disabled {
    background-color: #f5dc23;
}

input[type="radio"].F:checked:disabled {
    background-color: #088f3e;
}

input[type="radio"].Not:checked:disabled {
    background-color: #000000;
}

#mbd_check:checked ~ .additional_infos_area .aspice_recommendation_container .mbd,
#mbd_check:checked ~ .additional_infos_area .aspice_recommendation_container .mbd+br,
#mbd_check:checked ~ .additional_infos_area .aspice_rule_container .mbd,
#mbd_check:checked ~ .additional_infos_area .aspice_rule_container .mbd+br {
    display: none;
}

#age_check:checked ~ .additional_infos_area .aspice_recommendation_container .agile,
#age_check:checked ~ .additional_infos_area .aspice_recommendation_container .agile+br,
#age_check:checked ~ .additional_infos_area .aspice_rule_container .agile,
#age_check:checked ~ .additional_infos_area .aspice_rule_container .agile+br {
    display: none;
}

#did_check:checked ~  .additional_infos_area .aspice_recommendation_container .dist,
#did_check:checked ~  .additional_infos_area .aspice_recommendation_container .dist+br,
#did_check:checked ~  .additional_infos_area .aspice_rule_container .dist,
#did_check:checked ~  .additional_infos_area .aspice_rule_container .dist+br {
    display: none;
}

#dex_check:checked ~  .additional_infos_area .aspice_recommendation_container .dex,
#dex_check:checked ~  .additional_infos_area .aspice_recommendation_container .dex+br,
#dex_check:checked ~  .additional_infos_area .aspice_rule_container .dex,
#dex_check:checked ~  .additional_infos_area .aspice_rule_container .dex+br {
    display: none;
}

#tps_check:checked ~  .additional_infos_area .aspice_recommendation_container .tps,
#tps_check:checked ~  .additional_infos_area .aspice_recommendation_container .tps+br,
#tps_check:checked ~  .additional_infos_area .aspice_rule_container .tps,
#tps_check:checked ~  .additional_infos_area .aspice_rule_container .tps+br {
    display: none;
}

#pls_check:checked ~  .additional_infos_area .aspice_recommendation_container .legacy,
#pls_check:checked ~  .additional_infos_area .aspice_recommendation_container .legacy+br,
#pls_check:checked ~  .additional_infos_area .aspice_rule_container .legacy,
#pls_check:checked ~  .additional_infos_area .aspice_rule_container .legacy+br {
    display: none;
}

#app_check:checked ~  .additional_infos_area .rec_continer .app,
#app_check:checked ~  .additional_infos_area .aspice_recommendation_container .app+br,
#app_check:checked ~  .additional_infos_area .aspice_rule_container .app,
#app_check:checked ~  .additional_infos_area .aspice_rule_container .app+br {
    display: none;
}

/* END General Styling */
/* START small screen styling */
@media only screen and (max-width: 1200px) {
    .button_container {
        /* grid-template-columns: repeat(7, auto) 15%; */
    }

    .pc_container {
        grid-template-columns: 12% 5fr 5fr 5fr 5fr 5fr 4fr 5fr 6fr;
    }
}

@media only screen and (max-width: 1000px) {
    .button_container {
        /* grid-template-columns: repeat(7, auto) 5%; */
    }

    .pc_container {
        grid-template-columns: 15% 5fr 5fr 5fr 5fr 5fr 4fr 5fr 6fr;
    }
}

/* END small screen styling */
/* START error styling */

.error_overlay {
    display: none;
    background-color: rgba(var(--main-bg-color-rgb), 0.8);
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 1000;
}

.error_grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr;
    width: 40%;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.grid-span-2 {
    grid-column: span 2;
}

.error_span {
    margin: 0 auto;
    font-size: 1rem;
}

.note_icon {
    height: 15px;
    margin: 0 3px 0 8px;
}

.popout-margin {
    margin: 20px 20px 20px 20px;
}

/* END error styling */