/* home page */

#threats_home_content{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: var(--website-width);
}

.threats_home_section{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.threats_home_section:not(:last-child){
    margin-bottom: 1rem;
}

.threats_home_section_title{
    width: min(250px, 80vw);
    margin-top: 0;
    margin-bottom: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    border: 1px solid var(--light-border-color);
    border-radius: .5rem;
    background-color: var(--light-background-color-white);
    text-align: center;
}

.threats_home_section_buttons{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content:  center;
}

.threats_home_button_box{
    flex: 1;
    max-width: calc(var(--website-width) / 4 - 1rem);
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    border: 1px solid var(--light-border-color);
    border-radius: .5rem;
    background-color: rgba(255, 255, 255, 0.8);
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: lighten;
}

.threats_home_button_box:hover{
    background-color: rgba(255, 255, 255, 0.9);
}

#threat_home_button_box_techniques{
    background-image: url("images/home-page-techniques.jpg");
    background-position: 50% 45%;
}

#threat_home_button_box_mitigations{
    background-image: url("images/home-page-mitigations.jpg");
    background-position: 50% 20%;
}

#threat_home_button_box_operations{
    background-image: url("images/home-page-operations.jpg");
    background-position: 50% 0%;
}

#threat_home_button_box_about{
    background-image: url("images/home-page-about.jpg");
    background-position: 50% 0%;
}

#threat_home_button_box_tutorial{
    background-image: url("images/home-page-tutorial.jpg");
    background-position: 50% 50%;
}

#threat_home_button_box_zine{
    background-image: url("images/home-page-zine.jpg");
    background-position: 50% 0%;
}

.threats_home_button_box_content{
    padding: 1rem;
}

.threats_home_button_title{
    margin-top: 0;
    margin-bottom: 0;
    text-align: center;
}

.threats_home_button_description{
    margin-top: 0.5rem;
    text-align: center;
    text-wrap: balance;
}

/* matrix content */

#matrix_content{
    width: 1200px;
    padding-top: 0;
}

#matrix_content > .breadcrumb{
    margin-left: .5rem;
}

/* matrix sidebar and matrix */

#matrix_sidebar_and_matrix{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

/* matrix sidebar */

#matrix_sidebar{
    width: 240px;
    flex-shrink: 0;
    margin: .5rem;
}

#matrix_sidebar_javascript_disabled_warning{
    padding: .5rem;
}

.matrix_sidebar_section{
    border: 1px solid var(--light-border-color);
    background-color: var(--light-background-color-white);
}

.matrix_sidebar_section:not(:last-child){
    margin-bottom: 1rem;
}

.matrix_sidebar_entry{
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    width: 100%;
    border: 0;
    background-color: var(--light-background-color-white);
    text-align: start;
}

.matrix_sidebar_entry:not(:last-child){
    border-bottom: 1px solid var(--light-border-color);
}

.matrix_sidebar_entry_text{
    padding: .5rem;
}

.matrix_sidebar_entry_text_small{
    padding: .3rem;
    padding-left: 1.5rem;
    font-size: 0.9rem;
    pointer-events: none;
}

.matrix_sidebar_entry_tooltip{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-left: .5rem;
    padding-right: .5rem;
    z-index: 1;
}

.matrix_sidebar_button{
    cursor: pointer;
    user-select: none;
}

.matrix_sidebar_button_inactive{
    opacity: 55%;
    cursor: default;
}

.matrix_sidebar_button:not(.matrix_sidebar_button_inactive):hover{
    background-color: var(--light-background-color-grey);
}

.matrix_sidebar_button:not(.matrix_sidebar_button_inactive):active{
    background-color: var(--light-border-color);
}

#matrix_sidebar_and_matrix.matrix_sidebar_and_matrix_select_mode #matrix_sidebar_select_mode_button{
    background-color: var(--light-border-color);
}

#matrix_sidebar_select_unselect_all_button_unselect_text,
#matrix_sidebar_select_mode_button_stop_text{
    display: none;
}

/* matrix */

#matrix{
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    align-items: flex-start;
    margin: .5rem;
}

@media screen and (max-width: 900px){
    #matrix{
        flex-direction: column;
        align-items: stretch;
    }
}

.matrix_column{
    display: flex;
    flex-direction: column;
    flex: 1 1 0px;
    border: 1px solid var(--light-border-color);
    border-radius: .5rem;
    background-color: var(--light-background-color-white);
    overflow: clip;
}

@media screen and (min-width: 901px){
    .matrix_column:not(:last-child){
        margin-right: 1rem;
    }
}

@media screen and (max-width: 900px){
    .matrix_column:not(:last-child){
        margin-bottom: 1rem;
    }
}

.matrix_tactic{
    padding: 0.5rem;
    font-size: 1.3rem;
    text-align: center;
    border-bottom: 1px solid var(--light-border-color);
    font-weight: bold;
}

.matrix_tactic_number_of_techniques{
    margin-top: .3rem;
    font-size: 0.9rem;
    color: var(--light-color-dim);
}

.matrix_technique_selected{
    background-color: var(--light-border-color);
}

.matrix_parent_technique.matrix_technique_hidden{
    opacity: 55%;
}

.matrix_parent_technique:not(.matrix_technique_hidden) .matrix_sub_technique.matrix_technique_hidden{
    opacity: 55%;
}

.matrix_parent_technique{
    margin-bottom: -1px;
}

.matrix_parent_technique_text{
    padding-left: .5rem;
    padding-right: .5rem;
    padding-top: .3rem;
}

.matrix_parent_technique:not(.matrix_parent_technique_with_subtechniques) > .matrix_parent_technique_text{
    padding-bottom: .3rem;
}

.matrix_parent_technique:first-child > .matrix_parent_technique_text{
    padding-top: .6rem;
}

.matrix_parent_technique:last-child:not(.matrix_parent_technique_with_subtechniques) > .matrix_parent_technique_text{
    padding-bottom: .6rem;
}

.matrix_parent_technique:last-child.matrix_parent_technique_with_subtechniques > .matrix_technique_sub_techniques{
    padding-bottom: .6rem;
}

.matrix_parent_technique:last-child.matrix_parent_technique_with_subtechniques > .matrix_technique_sub_techniques[open]{
    padding-bottom: 0;
}

.matrix_parent_technique:last-child.matrix_parent_technique_with_subtechniques > .matrix_technique_sub_techniques[open] .matrix_sub_technique:last-child{
    padding-bottom: .6rem;
}

.matrix_technique_sub_techniques{
    font-size: 0.9rem;
}

.matrix_technique_sub_techniques_button{
    padding-left: 2.5rem;
    cursor: pointer;
    user-select: none;
}

.matrix_sub_technique{
    padding-left: 2.5rem;
}

/* matrix in select mode */

#matrix_sidebar_and_matrix.matrix_sidebar_and_matrix_select_mode .matrix_technique_link{
    border: 0;
    pointer-events: none;
}

#matrix_sidebar_and_matrix.matrix_sidebar_and_matrix_select_mode .matrix_technique{
    cursor: pointer;
}

#matrix_sidebar_and_matrix.matrix_sidebar_and_matrix_select_mode .matrix_parent_technique_text:hover,
#matrix_sidebar_and_matrix.matrix_sidebar_and_matrix_select_mode .matrix_sub_technique:hover,
#matrix_sidebar_and_matrix.matrix_sidebar_and_matrix_select_mode .matrix_parent_technique_text:active,
#matrix_sidebar_and_matrix.matrix_sidebar_and_matrix_select_mode .matrix_sub_technique:active{
    background-color: var(--light-background-color-grey);
}

/* threats item table */

.threats_item_table td > p:first-child{
    margin-top: 0;
}

.threats_item_table td > p:last-child{
    margin-bottom: 0;
}

.threats_item_table th:nth-child(1), .threats_item_table td:nth-child(1){
    width: 25%;
}

.threats_item_table th:nth-child(2), .threats_item_table td:nth-child(2){
    width: 75%;
}

/* threats item table displaying techniques */

.threats_item_table_techniques_parent_row td:nth-child(1){
    border-bottom: none;
}

.threats_item_table_techniques_sub_row td:nth-child(1){
    width: 5%;
    border: none;
}

.threats_item_table_techniques_sub_row td:nth-child(2){
    width: 20%;
}

.threats_item_table_techniques_sub_row td:nth-child(3){
    width: 75%;
}

/* threats item list displaying operations */

.threats_item_table_operations th:nth-child(1), .threats_item_table_operations td:nth-child(1){
    width: 20%;
}

.threats_item_table_operations th:nth-child(2), .threats_item_table_operations td:nth-child(2){
    width: 15%;
}

.threats_item_table_operations th:nth-child(3), .threats_item_table_operations td:nth-child(3){
    width: 16%;
}

.threats_item_table_operations th:nth-child(4), .threats_item_table_operations td:nth-child(4){
    width: 49%;
}

/* threats item list displaying operations in a country */

.threats_item_table_operations_in_country th:nth-child(1), .threats_item_table_operations_in_country td:nth-child(1){
    width: 20%;
}

.threats_item_table_operations_in_country th:nth-child(2), .threats_item_table_operations_in_country td:nth-child(2){
    width: 16%;
}

.threats_item_table_operations_in_country th:nth-child(3), .threats_item_table_operations_in_country td:nth-child(3){
    width: 64%;
}

/* world map */

#world_map{
    width: 100%;
}

#world_map_breadcrumb{
    max-width: var(--website-width);
    margin: auto;
}

#world_map_container{
    position: relative;
    container-type: size;
}

#world_map_image{
    display: block;
    position: absolute;
    width: calc(100% - 12%);
    left: 6%;
    bottom: 0px;
}

.world_map_country_box{
    position: absolute;
    width: max-content;
    padding: 0.4cqw;
    border-left: 1px solid var(--light-color-dim);
    border-right: 1px solid var(--light-color-dim);
    border-bottom: 1px solid var(--light-color-dim);
    border-radius: 0.5cqw;
    border-top: 1px solid var(--light-color-dim);
    background-color: var(--light-background-color-white);
    font-size: 0.8cqw;
    line-height: 1cqw;
}

.world_map_country_box_line{
    position: absolute;
    height: 0;
    border-bottom: 1px solid var(--light-color-dim);
    background-color: black;
    transform-origin: center left;
}

.world_map_country_box_name{
    margin-bottom: 0.25cqw;
    text-align: center;
    font-weight: bold;
}

.world_map_country_box_operations_link_container + .world_map_country_box_operations_link_container{
    margin-top: 0.35cqw;
}