/* SETUP */
:root {
    --deep-grey: #262626;
    --deep-grey-transparent: #26262675;
    --grey: #4d4d4d;
    --grey-transparent: #4d4d4d90;
    --light-grey: #d0d0d0;
    --light-grey-transparent: #d0d0d090;
    --off-white: #ebebeb;
    --green: #157c17;
    --red: #c91b1b;
    --brown: #db9a4b;
    --light-brown: #f3d4ae;
    --light-blue: #cdd9e9;
    --large-margin: 100px;
    --small-margin: 25px;
}

* {
    box-sizing: border-box;
}

/* GENERAL */

html {
    font-family: "utopia-std-display", serif;
    font-weight: 400;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 18px;
    overflow-x: hidden;
}

input[type="text"] {
    width: 100%;
    border: none;
    background-color: #00000000;
    font-size: 16px;
}
input[type="text"]::placeholder {
    font-size: 16px;
}

ul {
    padding-left: 25px;
}

.bold {
    font-weight: 700;
}

.exit,
.open {
    cursor: pointer;
}

.flats_link {
    font-weight: 500;
    color: black;
}

.flats_link:visited {
    color: black;
}

.flats_link:hover {
    text-decoration: underline;
}

.utopia_std_reg {
    font-family: "utopia-std", serif;
    font-weight: 600;
}

.utopia_std_reg_light {
    font-family: "utopia-std", serif;
    font-weight: 400;
}

.freight_sans_light {
    font-family: "freight-sans-pro", sans-serif;
    font-weight: 300;
}

.freight_sans_med {
    font-family: "freight-sans-pro", sans-serif;
    font-weight: 500;
}

.freight_sans_bold {
    font-family: "freight-sans-pro", sans-serif;
    font-weight: 700;
}

.degular_bold {
    font-family: "degular", sans-serif;
    font-weight: 700;
}

.form_dark_bg {
    background-color: var(--deep-grey);
}

.form_grey_bg {
    background-color: var(--deep-grey-transparent);
}

.form_grey_bg,
.form_dark_bg {
    color: white;
}

.small_form {
    padding: 0px 15px;
    border-radius: 25px;
    max-width: 360px;
}

.form_with_results {
    display: flex;
    flex-direction: column;
}

.input_with_icon {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 45px;
    column-gap: 10px;
}

.input_black {
    background-color: var(--deep-grey);
}

.input_grey {
    background-color: var(--deep-grey-transparent);
}

.input_grey,
.input_grey::placeholder,
.input_black,
.input_black::placeholder {
    color: white;
    font-family: "freight-sans-pro", sans-serif;
    font-weight: 500;
}

.search_autocomplete_results {
}

.icon_button {
    background-color: #00000000;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    padding: 5px;
    border-radius: 100px;
}

.icon_button_dark_bg:hover {
    background-color: var(--grey-transparent);
}

.icon_button_light_bg:hover {
    background-color: var(--light-grey-transparent);
}

.white_icon {
    filter: brightness(0) invert(1);
}

.flats_button,
.flats_link_button {
    padding: 0em 3em;
    border-radius: 25px;
    border: none;
    font-family: "freight-sans-pro", sans-serif;
    font-weight: 300;
    height: 45px;
    font-size: 16px;
    cursor: pointer;
}

.flats_button_light {
    background-color: white;
}

.flats_button_light:hover {
    background-color: var(--off-white);
}

.flats_button_dark {
    background-color: var(--deep-grey);
    color: white;
}

.flats_button_dark:hover {
    background-color: var(--grey);
}

.flats_link_button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-decoration: none;
}

.flats_link_button p {
    margin: 0;
}

.photo_credit {
    margin: 0;
    padding: 8px;
    position: absolute;
    color: var(--light-grey);
    font-size: 14px;
    font-family: "freight-sans-pro", sans-serif;
    font-weight: 500;
}

.bottom_left {
    left: 0;
    bottom: 0;
}

.bottom_right {
    right: 0;
    bottom: 0;
}

.photo_credit_link:visited {
    color: var(--light-grey);
}

.main_section_header {
    font-family: "utopia-std-display", serif;
    font-weight: 400;
    font-size: 88px;
    margin-top: var(--large-margin);
    margin-bottom: 10px;
}

.sub_section_header {
    font-family: "freight-sans-pro", sans-serif;
    font-weight: 300;
    font-size: 24px;
    margin-top: 0px;
    margin-bottom: 80px;
}

.section {
    font-family: "freight-sans-pro", sans-serif;
    font-weight: 300;
}

.selectable_option_dark_bg:hover {
    cursor: pointer;
    background-color: var(--grey);
}

.pill {
    background-color: #ebeef2;
    width: 96px;
    height: 35px;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.pill p {
    margin: 0;
}

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

.collapsible {
    border-top: 1px solid black;
    display: flex;
    flex-direction: column;
    font-family: "freight-sans-pro", sans-serif;
    font-weight: 300;
}

.collapsible_header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.collapsible_content {
    margin: 0 0 16px 0;
}

.hidden {
    display: none;
}

.shown {
    display: inline-block;
}

.thumbnail_with_text,
.thumbnail_content {
    border-top-right-radius: 70px;
}

.thumbnail_with_text {
    height: 280px;
    width: 280px;
    color: white;
    text-decoration: none;
}

.thumbnail_content {
    height: 100%;
    width: 100%;
    padding: 30px;
    background: linear-gradient(0, #00000080, #00000060);
    display: flex;
    flex-direction: column;
    row-gap: 16px;
    justify-content: end;
}

.thumbnail_content h2 {
    font-size: 36px;
    font-weight: 400;
    margin: 0;
}

.thumbnail_content p {
    margin: 0;
}

/* NAV BAR */
#navbar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 3.5vh 2vw;
}

.navbar_group {
    display: flex;
    flex-direction: row;
    column-gap: 20px;
    align-items: center;
    height: 100%;
}

#navbar_open_menu {
    filter: invert(100);
    width: 24px;
    height: 24px;
}

#navbar_logo {
    height: 50px;
}

#navbar_right {
    justify-content: end;
}

/* FOOTER */
#flats_footer {
    display: flex;
    flex-direction: column;
    color: white;
    font-family: "freight-sans-pro", sans-serif;
    font-weight: 300;
}

#footer_content {
    background-image: url("/static/core/img/footer.svg");
    background-size: cover;
    display: flex;
    flex-direction: row;
    padding: 30px 0px;
    justify-content: space-around;
}

#footer_link_groups {
    display: flex;
    flex-direction: row;
    column-gap: 10vw;
}

.footer_link_group {
    display: flex;
    flex-direction: column;
    row-gap: 16px;
}

.footer_link_group a {
    text-decoration: none;
    color: white;
    display: inline-block;
}

.footer_link_group a:visited {
    color: white;
}

.footer_link_group a:hover {
    text-decoration: underline;
}

#footer_bottom {
    background-color: var(--deep-grey);
    text-align: center;
    margin: 0;
    font-size: 12px;
    padding: 6px 0;
}

/* USER MESSAGE */
#message_container {
    z-index: 5;
    background-color: white;
    position: fixed;
    top: 20px;
    right: 20px;
    display: none;
    flex-direction: row;
    column-gap: 20px;
    border-radius: 25px;
    padding: 10px 20px;
    align-items: center;
    box-shadow: 3px 3px 6px;
    max-width: 350px;
}

#message_user_close {
    align-self: flex-start;
}

#message_container_text {
    padding: 0;
    margin: 0;
}

.message_error {
    border: 1px solid var(--red);
}

.message_success {
    border: 1px solid var(--green);
}

/* NAV MENU */
#nav_menu_container {
    z-index: 2;
    display: none;
    background-color: #00000040;
    position: fixed;
    width: 100%;
    height: 100%;
}

#nav_menu {
    width: 60%;
    height: 100%;
    padding: 2vh 2vw;
    background-color: white;
    display: grid;
    grid-template-rows: auto 1fr;
    row-gap: 5vh;
    position: relative;
    transition: 0.25s all;
}

#nav_menu_header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

#nav_menu_content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.nav_menu_link_list {
    display: flex;
    flex-direction: column;
}

.nav_menu_big_link {
    font-size: 62px;
    color: black;
}

.nav_menu_small_link {
    font-size: 24px;
    color: var(--grey);
}

.header_screen {
    background: linear-gradient(0, #00000080, #00000010);
}

.header_heading {
    font-size: 4em;
    font-weight: 500;
}

/* ABOUT HEADER */
#about_header {
    position: relative;
    background-image: url("/static/core/img/canal_boat.svg");
    background-size: cover;
    background-position: 50% 70%;
    color: white;
}

#about_header_screen {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#ahs_content {
    display: flex;
    flex-direction: column;
    row-gap: 200px;
}

#ahs_main,
#ahs_bottom,
#ahs_school_search_container {
    align-self: center;
    justify-items: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#ahs_school_search {
    width: 100%;
    background-color: white;
}

#ahs_school_search_input::placeholder {
    font-family: "freight-sans-pro", sans-serif;
    font-weight: 300;
}

#ahs_main {
    margin-top: 100px;
}

#ahs_main h1 {
    text-align: center;
    width: 800px;
}

#ahs_school_search_container p {
    font-size: 24px;
}

#ahs_bottom {
    row-gap: 8px;
    padding-bottom: 20px;
}

#ahs_bottom p {
    font-size: 16px;
    margin: 0;
}

#ahs_bottom img {
    filter: invert(1);
}

#about_what_is {
    align-self: center;
    max-width: 600px;
    margin-bottom: var(--large-margin);
}

#about_what_is h4 {
    font-weight: 500;
    font-size: 17px;
    margin-bottom: 10px;
}

/* ABOUT SCHOOLS */
#about_schools {
    display: grid;
    grid-template-columns: 0.6fr 0.4fr;
    min-height: 800px;
}

#about_schools_left {
    display: flex;
    flex-direction: column;
    margin: 0 30%;
}

#about_schools_right {
    position: relative;
    background-image: url("/static/core/img/city_steps.svg");
    background-size: cover;
    background-position: 50% 70%;
}

#about_schools_next {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: var(--small-margin);
}

/* ABOUT LANGUAGES */
#about_languages {
    align-self: center;
    display: flex;
    flex-direction: column;
}

#about_lang_content_top,
#more_lang_explain,
.about_lang_content_small {
    width: 450px;
    align-self: center;
}

#about_lang_all_tests {
    font-family: "freight-sans-pro", sans-serif;
    font-weight: 300;
}

#lang_result_line {
    display: none;
}

#popular_lang_list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 16px;
    row-gap: 16px;
}

#about_lang_all_tests {
    display: none;
    flex-direction: column;
}

#swap_lang_list_button {
    margin: 16px 0px;
}

#full_lang_list {
    display: flex;
    flex-wrap: wrap;
    column-gap: 16px;
    row-gap: 16px;
}

.about_lang_content_full {
    width: 900px;
}

#popular_lang_list,
#full_lang_list {
    font-family: "freight-sans-pro", sans-serif;
    font-weight: 300;
    font-size: 17px;
}

.listed_lang {
    margin: 0;
}

/* PROCTORS */
#about_proctors {
    display: grid;
    grid-template-columns: 0.4fr 0.6fr;
}

#about_proctors_left {
    position: relative;
    background-image: url("/static/core/img/eastern_structure.svg");
    background-size: cover;
    background-position: 50% 92%;
    height: 1020px;
}

#about_proctors_right {
    display: flex;
    flex-direction: column;
    max-width: 420px;
    margin: 0 auto;
}

#about_proctors_how_chosen {
    margin-bottom: 108px;
}

#about_proctors_how_chosen h2 {
    font-size: 36px;
    font-weight: 400;
}

/* ABOUT SUMMARY */
#about_summary {
    margin-top: var(--large-margin);
}

#about_summary_images {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

#test_prep_thumbnail {
    background-image: url("/static/core/img/stone_structure.svg");
    background-size: cover;
    background-position: 40% 92%;
}

#faq_thumbnail {
    background-image: url("/static/core/img/tokyo_streets.svg");
    background-size: cover;
    background-position: 29% 92%;
}

#score_report_thumbnail {
    background-image: url("/static/core/img/city_view.svg");
    background-size: cover;
    background-position: 64% 92%;
}

#about_summary_register_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: var(--large-margin);
}

#about_summary_register_container h1 {
    font-size: 60px;
    width: 400px;
    text-align: center;
    margin-bottom: 48px;
}

/* TEST PREP */
#test_prep_header {
    position: relative;
    background-image: url("/static/core/img/stone_structure.svg");
    background-size: cover;
}

#test_prep_header_screen {
    display: flex;
    flex-direction: column;
    color: white;
}

#test_prep_header_screen h1 {
    margin-left: 10vw;
}

#test_prep_content {
    display: flex;
    flex-direction: column;
    margin: var(--large-margin) auto;
    max-width: 500px;
}

#test_prep_reg_button {
    margin-top: var(--small-margin);
    width: 176px;
}

/* REQUEST SCORE REPORT */
#req_score_rep_header {
    position: relative;
    background-image: url("/static/core/img/city_view.svg");
    background-size: cover;
}

#req_score_rep_header_screen {
    color: white;
    height: 100%;
    width: 100%;
}

#req_score_rep_header_screen h1 {
    margin-left: 10vw;
}

#req_score_rep_content {
    display: flex;
    flex-direction: column;
    width: 500px;
    margin: var(--large-margin) auto;
}

#req_score_rep_content input[type="text"],
#rsr_date input {
    border: 1px solid black;
    height: 50px;
    width: 300px;
    padding: 15px 25px;
    border-radius: 25px;
}

.rsr_input_group {
    display: flex;
    flex-direction: column;
    margin-top: 40px;
    row-gap: 8px;
}

#req_score_submit_button {
    margin-top: 40px;
}

.rsr_input_checkbox_group {
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 8px;
}

.rsr_input_checkbox_group input {
    width: 18px;
    height: 18px;
}

#rsr_captcha img {
    width: 150px;
    height: 50px;
}

/* FAQ pages */
#faq_header {
    background-image: url("/static/core/img/tokyo_streets.svg");
    background-size: cover;
    background-position: 50% 0%;
}

#faq_header,
#faq_header_screen {
    position: relative;
    width: 100%;
    height: 100%;
    color: white;
}

#faq_header_screen h1 {
    margin: var(--small-margin) 0 var(--large-margin) 10vw;
}

#faq_collapsibles {
    width: 650px;
    display: flex;
    flex-direction: column;
    margin: var(--large-margin) auto;
}

#faq_ready_to_reg {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: var(--large-margin);
}

/* SITE SEARCH */
#site_search_header #navbar #navbar_left button,
#site_search_header #navbar #navbar_left img {
    filter: invert(1);
}

#site_search_content_header {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#site_search_search_input,
#site_search_search_input::placeholder {
    color: white;
}

#site_search_search_img {
    filter: contrast(100) invert(1);
}

#site_search_results_container {
    max-width: 500px;
    margin: var(--large-margin) auto;
}

.site_search_result_wrapper {
    display: flex;
    flex-direction: column;
}

.site_search_result_wrapper p {
    font-family: "freight-sans-pro", sans-serif;
    font-weight: 300;
}

.site_search_result_header {
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 20px;
}

.site_search_result_img_container {
    width: 64px;
    height: 64px;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
}

.site_search_result_img_container img {
    width: auto;
    object-fit: cover;
    object-position: center;
}

.site_search_result_header h3 {
    font-size: 36px;
    font-weight: 400;
}

/* Test pages */
#exam_page {
    font-family: "libre-caslon-text", sans-serif;
    font-weight: 400;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
/* test header */
#exam_header {
    justify-content: space-between;
    padding: 20px 40px;
    background-color: var(--deep-grey);
}

#exam_header,
#exam_header_right {
    display: flex;
    flex-direction: row;
    align-items: center;
}

#exam_header_right {
    column-gap: 30px;
}

#exam_page_content {
    margin: 40px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.exam_outline {
    border: 1px solid var(--light-grey);
    border-radius: 8px;
}

.exam_content_spacing {
    padding: 5vh 5vw;
}

#exam_login_content,
#exam_proctor_verification_content {
    margin-bottom: var(--small-margin);
}

.exam_el_border_radius {
    border-radius: 8px;
}

#examinee_login_fields,
#proctor_verification_fields {
    display: flex;
    flex-direction: column;
    row-gap: 40px;
    margin: var(--small-margin) 0;
}

.exam_login_field {
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 20px;
}

.exam_login_field input[type="text"] {
    border: solid black 1px;
    border-radius: 8px;
    max-width: 450px;
    height: 40px;
}

.exam_login_field label {
    font-weight: 700;
}

#exam_login_welcome_p {
    margin-top: 0;
}

#examinee_login_button {
    width: 200px;
}

#examinee_post_login_content p {
    margin: 0;
}

#examinee_post_login_content {
    display: none;
    flex-direction: column;
    row-gap: 20px;
}

#start_exam_button {
    width: 180px;
    margin: 0 auto;
}

#exam_sections_progress_inner,
.exam_section_progress_wrapper {
    display: flex;
    flex-direction: row;
    column-gap: 35px;
    align-items: center;
}

#exam_sections_progress_outer {
    margin: var(--small-margin) 5vw;
    overflow-x: auto;
}

.section_progress {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    border-radius: 50%;
}

.section_progress_text {
    width: 90px;
}

.section_progress_completed img,
.section_progress_ongoing img {
    filter: contrast(100);
}

.section_progress_completed {
    background-color: var(--brown);
    border: 1px solid var(--brown);
}

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

.section_progress_not_started {
    border: 1px solid #9f9b9b;
}

#testlet_progress_wrapper {
    position: relative;
    border: 1px solid #d9d9d9;
    width: 100%;
    height: 40px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

#testlet_progress_bar {
    height: 100%;
    background-color: var(--light-blue);
}

#testlet_progress_percentage {
    position: absolute;
    right: 15px;
    top: 8px;
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}

#exam_testlet_header {
    margin-bottom: 35px;
}

#testlet_items {
    display: flex;
    flex-direction: column;
    row-gap: 35px;
}

.testlet_item {
    display: flex;
    flex-direction: row;
    column-gap: 35px;
}

.item_content {
    flex-grow: 1;
}

.multi_choice_options {
    display: flex;
    flex-direction: column;
    row-gap: 12px;
}

.multi_choice_option {
    border: 1px solid var(--light-grey);
    border-radius: 8px;
    padding: 15px 20px;
    max-width: 800px;
}

.multi_choice_option:hover {
    cursor: pointer;
    background-color: var(--grey-transparent);
    color: white;
}

.multi_choice_option[data-selected="False"] {
    color: black;
}

.multi_choice_option[data-selected="True"] {
    color: white;
    background-color: var(--grey);
}

#exam_page_primary_content {
    font-size: 20px;
}

.font_size_control {
    padding: 18px 55px;
}

#exam_controls {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 60px;
    margin-top: var(--small-margin);
}

#font_size_controls {
    display: flex;
    flex-direction: row;
    column-gap: 30px;
    justify-items: center;
}

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

.exam_control_inactive {
    background-color: white;
    border: 1px solid black;
}

.exam_control_inactive:hover,
.exam_control_active:hover {
    background-color: var(--light-grey);
    color: black;
}

.exam_nav_control,
.exam_nav_control_placeholder {
    width: 160px;
}

.exam_nav_control {
    background-color: var(--off-white);
    color: black;
    padding: 25px 60px;
    border-radius: 8px;
    border: none;
    font-weight: 600;
    font-size: 18px;
}

.exam_nav_control,
.font_size_control {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.exam_nav_control:hover {
    background-color: black;
    color: white;
}

#small_font_size_control {
    font-size: 16px;
}

#large_font_size_control {
    font-size: 20px;
}

.exam_content_large_font {
    font-size: 20px;
}

.exam_content_large_font h3 {
    font-size: 24px;
}

.exam_content_small_font {
    font-size: 16px;
}

.exam_content_small_font h3 {
    font-size: 20px;
}

/* exam log out */
#exam_logout_content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: var(--large-margin) auto;
}

#exam_logout_content button {
    margin-top: var(--large-margin);
}

/* proctor exam certification */
#proctor_certified_exam_page_content {
    display: flex;
    flex-direction: column;
    row-gap: var(--large-margin);
    justify-content: center;
    align-items: center;
}

#proctor_verify_success_content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 18px;
}

/* exam sections and testlets style */
#section_content,
#testlet_content {
    flex: 1;
}

#exam_section_intro_content,
#exam_testlet_content_wrapper {
    height: 100%;
}

#exam_testlet_content {
    margin: 50px;
}

.hidden_exam_el {
    display: none;
}

.multi_choice_media_option {
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 20px;
}

.multi_choice_radio_input {
    height: 20px;
    width: 20px;
}

.item_media_prompt,
.testlet_media_prompt {
    margin-bottom: 30px;
}

/* register page */
#register_body {
    display: grid;
    grid-template-columns: 300px 1fr;
    height: 100%;
}

#register_nav {
    background-color: var(--grey);
    color: white;
}

#register_title_and_content {
    display: flex;
    flex-direction: column;
}

#register_title {
    height: 100px;
    background-color: var(--brown);
    color: white;
}

/* MEDIA QUERIES */
@media (max-width: 1366px) {
    .nav_menu_big_link {
        font-size: 40px;
    }

    .nav_menu_small_link {
        font-size: 18px;
    }
}

@media (max-width: 950px) {
    .about_lang_content_full {
        width: 450px;
    }

    .thumbnail_with_text {
        width: 210px;
        height: 210px;
    }

    .thumbnail_with_text,
    .thumbnail_content {
        border-top-right-radius: 60px;
    }

    .thumbnail_content h2 {
        font-size: 28px;
    }
}

@media (max-width: 900px) {
    .header_heading {
        font-size: 3em;
        width: 500px;
    }

    audio {
        width: 180px;
    }

    #exam_page_content,
    #exam_testlet_content {
        margin: 20px;
    }

    .testlet_item {
        column-gap: 10px;
    }

    .item_content {
        flex-grow: 0;
        width: calc(100% - 24px);
    }

    #exam_controls {
        height: 40px;
    }

    #font_size_controls {
        column-gap: 15px;
    }

    .font_size_control {
        padding: 0px 20px;
    }

    .exam_nav_control {
        flex-direction: row;
        justify-content: center;
        padding: 0;
    }

    .exam_nav_control,
    .exam_nav_control_placeholder {
        width: 70px;
    }

    .exam_sections_progress_inner,
    .exam_section_progress_wrapper {
        column-gap: 15px;
    }

    .section_progress {
        padding: 5px;
    }
}

@media (max-width: 750px) {
    #faq_collapsibles {
        width: 450px;
    }
}

@media (max-width: 667px) {
    .nav_menu_big_link {
        font-size: 24px;
    }

    .nav_menu_small_link {
        font-size: 16px;
    }

    .thumbnail_with_text {
        width: 140px;
        height: 140px;
    }

    .thumbnail_with_text,
    .thumbnail_content {
        border-top-right-radius: 50px;
    }

    .thumbnail_content {
        padding: 10px;
        font-size: 14px;
    }

    .thumbnail_content h2 {
        font-size: 20px;
    }

    .main_section_header {
        font-size: 60px;
    }

    #footer_logo {
        display: none;
    }

    #footer_link_groups {
        padding: 0px 16px;
    }

    #req_score_rep_header_screen h1 {
        width: 360px;
    }
}

@media (max-width: 532px) {
    #test_prep_content,
    #req_score_rep_content {
        margin: var(--large-margin) 16px;
    }
}