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);
}
/* 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 */
/* START styling for Buttons-Block*/
.button_container
{
    display: grid;
    grid-template-rows: repeat(4, auto);
    grid-template-columns: 10% repeat(7, auto) 30%;
    grid-template-areas:
        "element_id summary     notes       save        evidences   rec         rule        safety      .";
    grid-row-gap: 3px;
}
.button_bonus_container
{   
    display: grid;
    grid-template-rows: repeat(4, auto);
    grid-template-columns: 10% repeat(7, auto) 30%;
    grid-template-areas:
        "element_id sum_comment sum_comment sum_comment sum_comment sum_comment sum_comment . ."
        "element_id ev_table    ev_table    ev_table    ev_table    ev_table    ev_table    . ."
        "element_id sum_text    sum_text    sum_text    sum_text    sum_text    sum_text    . .";
    grid-row-gap: 3px;
    margin: 0 0 20px 0;
}
.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;
}
.ev_table
{
    grid-area: ev_table;
}
.sum_text
{
    grid-area: sum_text;
}
/* END styling for Button-Block*/
.progress-bar-container
{
    height: 1.125rem;
    background-color: #CCC;
    display: none;
    position: relative;
    border-radius: 4px;
    z-index: 500;
    margin: 20px 0 20px 0;
}
.progress-bar-container .progress-bar
{
    position: absolute;
    height: 100%;
    background-color: #1c3356;
    border-radius: 3px;
}


/* START styling for PC-Block*/
.pc_container 
{
    display: grid;
    grid-template-rows: repeat(5, auto);
    grid-template-columns: 10% 5fr 5fr 5fr 5fr 5fr 4fr 5fr 6fr;
    grid-template-areas:
        "pcid   text      text      text      text      text      text         text text"
        "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;
    grid-row-gap: 3px;
}
.pcid
{
    grid-area: pcid;
}
.text
{
    grid-area: text;
}
.score-container
{
    grid-area: scores;
}
.score_form
{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-areas: "n-rating  p-rating  l-rating  f-rating  na-rating";
}
.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;
}
.note
{
    grid-area: note;
    margin-bottom: 10px;
}
.context
{
    grid-area: context;
    margin-bottom: 10px;
}
.help
{
    grid-area: help;
    margin-bottom: 10px;
}
/* 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%;
    left: 15px;
}


#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;
}
.rec_container, .rule_container
{
    display: none;
}
.other_comments_container
{
    padding: 10px 0px;
    margin: 10px 0px;
    min-height: 20px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10pt;
}
: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;
}
/* END General Styling */
/* START small screen styling */
@media only screen and (max-width: 1200px) 
{
    .button_container
    {
        grid-template-columns: 10% repeat(7, auto) 15%;
    }
    .button_bonus_container
    {   
        grid-template-columns: 10% 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: 10% repeat(7, auto) 5%;
    }
    .button_bonus_container
    {   
        grid-template-columns: 10% 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;
}
/* END error styling */