@charset "UTF-8";
/* --- help center view --- */

/* Hide dropdown button by default */
.c_dropdown-btn {
    display: none;
}

/* Show dropdown content when dropdown button is clicked */
.c_dropdown-btn:focus + .c_dropdown-content {
    display: block;
}

:root {
    /*--black-thin-outline: medium solid #000;*/
    /*--black-outline: thick solid #000;*/
    /*--lime-thin-outline: thin solid lawngreen;*/
    /*--lime-outline: thick solid lawngreen;*/
    /*--cyan-outline: thick solid cyan;*/
    /*--blue-thin-outline: thin solid blue;*/
    /*--gray-thin-outline: #d0d0d0 thin solid;*/
    /*--blue-outline: thick solid blue;*/
    /*--red-outline: thick solid rgb(197, 50, 50);*/
}

/*IDs*/
.c_1_container {
    margin: 0 auto;
    display: grid;
    height: 90vh;
    width: 90vw;
    max-width: 60rem;
    /*column-gap: 2rem;*/
    grid-template-columns: 0fr 10fr;
    grid-template-rows:
            0.05fr      /*--- Header ---*/
            0.75fr      /*--- Outline & Content ---*/
            0.1fr; 	/*--- Bottom Bar ---*/
    grid-template-areas:
            "i_4_header i_4_header"
            "i_6_subcontent i_5_content"
            "i_7_bottombar i_7_bottombar";
}

#i_3_search {
    font-family: var(--font-Roboto);
    background-color: var(--color-glass);
    height: 2rem;
    padding-right: 0.5rem;
    padding-left: 1.5rem;
    /* margin: 0.3rem 4rem; */
    border-radius: 1rem;
    color: dimgrey;
    text-decoration: none;
    /* text-align: right; */
    opacity: .8;
    /* float: right; */
    border: thin var(--color-gray-3) solid;
}
#i_4_header {
    grid-area: i_4_header;
    border: var(--red-outline);
    /*margin-left: 30px;*/
    /*margin-right: 30px;*/
}
#i_7_bottombar {
    grid-area: i_7_bottombar;
    text-align:center;
    padding-top: 0.5rem;
    padding-bottom: 20px;
    border-top: #d0d0d0 thin solid;
}

/* --- Elements --- */
h4 {
    margin-bottom: var(--px-10);
}
li.c_style_subtitle_menu {
    margin-bottom: 5px;
    font-size: var(--font-14);
    /*margin: 0;*/
}
li.c_style_subtitle_menu::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 0.5rem;
    height: 0.5rem;
    margin-right: 0.5rem;
    border: 2px solid var(--color-gray-3);
    border-radius: 50%;
}
li.c_style_subtitle_menu:hover::before {
    cursor: pointer;
    border: 2px solid var(--color-white);
    box-shadow: 0 0 0 2px var(--secondary-blue-color);
    /*border-radius: 50%;*/
    /*box-sizing: border-box;*/
}
ul.no-indent {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}