@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");


/* Base styles using variables */
* {
    transition: background-color 0.1s ease, color 0.1s ease, border-color 0.1s ease;
    outline: none;
    box-sizing: border-box;
}

/*
html {
    height: 100%;
}
*/

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--body-font);
    margin: auto;
    font-size: 14px;
    padding-top: 20px;

    display:flex;
    flex-direction:column;
    width:100%;
    height:100%;
    min-height: 100vh;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;

}

a, a:visited, a:link {
    text-decoration:underline;
    text-decoration-color: var(--text-decoration-color);
    color: var(--text-primary);
}

a:hover, a:focus {
    color: var(--text-title);
    text-decoration:underline;
    text-decoration-color: var(--text-decoration-color);
}

/* Applies to all <h1>...</h1> elements. */
h1 {
  font-size: x-large;
  font-weight:medium;
  margin-top: 10px;
  text-align:center;
  color: var(--text-title);
}

/* used in javascript code */
.hidden {
    display:none;
}

.theme-toggle {
    border: none;
    background-color: var(--bg-secondary);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: transform 0.3s ease;
    justify-self: center;
    align-self: center;
    font-size: x-large;
    align-self: center;
    justify-self: center;
}

.theme-toggle {
    content: "🌘";
}

html.dark .theme-toggle {
    content: "☀️";
}

.theme-toggle:hover {
    opacity: 0.8;
}


list-style: square;

/* menu style */
header {
  background-color: var(--bg-secondary);
  min-height: var(--header-height);
  display:flex;
}


.nav_bar {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  background-color: var(--bg-secondary);
  justify-items: center;
  justify-content: center;
  display:flex;
  border-bottom: 1px solid var(--border-color);
}


.nav_bar_content {
  justify-items: center;
  justify-content: center;
  padding: 10px;
  background-color: var(--bg-secondary);
  justify-content: space-between;
  display: grid;
  grid-auto-flow: column;
}


#large_menu_section, #medium_menu_section {
  display: flex;
  flex-wrap: wrap;
  flex-direction:row;
  background-color: var(--bg-secondary);
  margin: 0;
  padding: 0;
  top: 0;
  width: 100%;
}

#medium_menu_section {
    display: none;
}

div.menu {
  display: flex;
  align-items: center;
  justify-items: center;
  margin-right: 5px;
  margin-top: 1px;
  margin-bottom: 1px;
}

a.menu {
  display: block;
  color: var(--text-title);
  text-align: center;
  padding: 5px 5px;
  margin: 0px;
  text-decoration: none;
  border-radius: 10px;
  font-size: medium;
}

a.menu:hover {
  background-color: var(--text-title);
  color: var(--bg-primary);
}

a.menu_highlight {
  display: block;
  color: var(--bg-primary);
  text-align: center;
  padding: 5px 5px;
  margin: 0px;
  text-decoration: none;
  background-color: var(--text-primary);
  border-radius: 10px;
  font-size: medium;
}

#drop_down_menu_section, #full_drop_down_menu_section {
    display: none;
    align-self: center;
    justify-self: center;
    margin-right: 20px;
    margin-left: 10px;
}

#drop_down_menu_icon, #full_drop_down_menu_icon {
    color: var(--text-secondary);
    font-size: xx-large;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-bottom: 0px;
    border: 0px;
}

#drop_down_menu, #full_drop_down_menu {
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    inline-size: auto;
    margin-left: 0px;
    margin-right: 10px;
    margin-top: 0px;
    opacity: 1;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 1rem;
    transition: 0.2s ease;
    display: none;
    grid-template-columns: 1fr 1fr;
    position: absolute;
    z-index: 5;
    border: 0px solid var(--text-primary);
    width: 20rem;
    border-radius: 5px;
}

div.menu_drop {
  display: flex;
  width: 100%;
  margin: 0px;
  border-radius: 5px;
}

div.menu_drop_highlight {
  display: flex;
  width: 100%;
  margin: 0px;
  border-radius: 5px;
  color: var(--bg-primary);
  background-color: var(--text-primary);
}

a.menu_drop {
  display: block;
  text-align: left;
  padding: 5px 5px;
  margin: 0px;
  text-decoration: none;
  color: var(--text-title);
  font-size: medium;
}

a.menu_drop_highlight {
  display: block;
  text-align: left;
  padding: 5px 5px;
  margin: 0px;
  text-decoration: none;
  color: var(--bg-primary);
  font-size: medium;
}

div.menu_drop:hover {
  background-color: var(--text-title);
  color: var(--bg-primary);
}

div.menu_drop:hover a.menu_drop {
  color: var(--bg-primary);
}

a.menu_drop:hover {
  color: var(--bg-primary);
}

a.logo_menu {
    display: flex;
    align-self: center;
    justify-self: center;
    font-size: large;
    font-weight: bold;
    margin-right: 10px;
    text-decoration:none;
}

a.logo_menu:hover {
    text-decoration:none;
    color: var(--highlight_color);
}


.emoji-fill {
  color: transparent;
  text-shadow: 0 0 0 var(--text-primary);
}

a.logo_menu:hover .emoji-fill{
  text-shadow: 0 0 0 var(--highlight_color);
}

img.logo_menu {
    width: 50px;
    margin: 0;
    padding: 0;
}

img.logo_menu:hover {
    opacity: 0.5;
}

img.search_icon {
    width: 30px;
    margin: 0;
    margin-right: 10px;
    padding: 0;
}

img.search_icon:hover {
    opacity: 0.5;
}

a.search_icon {
  display: flex;
  align-self: center;
  justify-self: center;
}

main {
    padding-top: var(--header-height);
    overflow:auto;/* i scroll if space too short */
    flex:1;/* fills whole space left */
    flex-grow:1;
}

/*

  padding: 70px 0 0 10px ;
*/

footer {
  min-height: var(--footer-height);
  background-color: var(--bg-secondary);
  display:flex;
}
/*
position: absolute;
  left: 0;
  bottom: 0;
*/
.footer {
  width: 100%;
  background-color: var(--bg-secondary);
  justify-items: center;
  justify-content: center;
  display:flex;
  flex-direction:column;
  border-top: 1px solid var(--border-color);
  align-self: center;

}

.footer-up {
  display:flex;
  flex-wrap: wrap;
  flex-direction:row;
  text-align: center;
  justify-items: center;
  justify-content: center;

}

.footer-deux-fleurs {
    display:flex;
    flex-direction:row;
    text-align: center;
    justify-items: center;
    justify-content: center;
}

.garage_img {
    margin-right: 20px;
}

.footer-copy {
    text-align: center;
}

.footer-descr {
    text-align: left;
    align-self: center;
    justify-content: center;
    margin-right: 20px;

}

.footer-menu {
    justify-items: center;
    justify-content: space-between;
}


nav.footer-menu {
    display:flex;
    justify-content: space-between;
    align-items:center;
    margin: 5px 0px;
}

li.footer-menu {
  float: left;
}

a.footer-menu {
  display: block;
  color: var(--text-secondary);
  text-align: center;
  padding: 5px 10px;
  margin: 10px 5px;
  text-decoration: none;
  border-radius: 10px;
}

a.footer-menu:hover {
  color: var(--text-decoration-color);
}


/* Solid border */
hr.solid {
  border-top: 1px solid var(--border-color);
  width: 50%;
}

/*
lang drop down menu
*/
.language-switcher {
    position: relative;
    display: inline-block;

    align-self: center;
    justify-self: center;
}

.lang-button {
    background: var(--lang-button-bg);
    color: var(--lang-button-text);
    border: 0px solid #ddd;
    padding: 8px 16px;
    cursor: pointer;
    border-radius: 4px;
    margin-right: 10px;
}

.lang-dropdown {
    display: none;
    position: absolute;
    background: var(--lang-button-bg);
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    z-index: 1;
    border-radius: 4px;
    text-decoration: none;
}

.language-switcher:hover .lang-dropdown {
    display: block;
}

a.lang-option {
    color: var(--lang-button-text);
    padding: 12px 16px;
    text-decoration: none;
    display: flex;
    flex-wrap: nowrap;
}

a.lang-option:hover {
    background-color: var(--lang-button-bg-hover);
    text-decoration: none;
}

.flag_lang_selection {
    padding-right: 5px;
    text-decoration: none;
}

/* RTL support */
[dir="rtl"] .lang-dropdown {
    left: auto;
    right: 0;
}



/* ------------------------------------------------------------------ */
/* ------------------------- SEARCH SECTION ------------------------- */
/* ------------------------------------------------------------------ */
.search_page {
            align-items: center;
            justify-content: center;
            display:flex;
            flex-direction:column;
            padding-bottom: 20px;
            padding-left: 10px;
            padding-right: 10px;

}
.search-box {
  margin: 20px;
  display:flex;
  flex-direction:column;
}
#all_filters {
  display:flex;
  flex-direction:column;
}

#toc_search {
    display:flex;
    flex-direction:column;
    border: solid var(--text-title) 1px;
    border-radius: 4px;
    margin: 10px;
    padding: 20px;
    font-weight: bold;
    background: var(--text-title_transparent);
    position: sticky;
    top: 1rem;
    align-self: start;
}

div.toc_search_entry {
    padding: 5px;
}

a.toc_search_entry {
    color: var(--text-title);
    text-decoration-color: var(--text-primary);
}

a.toc_search_entry:hover {
    color: var(--text-primary);
    text-decoration-color: var(--text-title);
}

a.go_up {
    font-weight: bold;
    font-size: xx-large;
    align-self: center;
    justify-self: center;
    display: flex;
    align-items: center;
    border: solid var(--text-title) 2px;
    border-radius: 30px;
    padding-right: 15px;
    padding-left: 15px;
    padding-bottom: 10px;
    margin-top: 10px;
    color: var(--text-title);
    background: var(--bg-primary);
    text-decoration:none;
}

a.go_up:hover {
    background: var(--text-title);
    color: var(--bg-primary);
}


.old_results {
    display: flex; flex-wrap: wrap; gap: 20px;
    align-items: center;
    justify-content: center;
}

.results_and_toc {
    display: grid;
    grid-template-columns: auto 1fr;
    width: 100%;
    margin: 0 auto;
    overflow: scroll;
    max-height: 1200px;
}

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

.group_results {
    display: flex; flex-wrap: wrap; gap: 20px;
    align-items: center;
    justify-content: center;
}

span.results_group_name {
    display: flex;
    align-items: center;
    margin-bottom:15px;
    margin-top: 20px;
    font-weight: bold;
    align-self: center;
    font-size: medium;
    padding: 5px;
    padding-left: 100px;
    padding-right: 100px;
    border: 1px solid var(--text-title);
    border-radius: 4px;
    background: var(--text-title);
    color: var(--bg-primary);
}

span.results_group_name:hover {
    color: var(--text-title);
    background: var(--bg-primary);
}

/*
span.results_group_name:before, span.results_group_name:after {
    content: "";
    height: 3px;
    flex-grow: 1;
    margin: 0 12px;
    background: var(--text-primary);
}

span.results_group_name:before {
    background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(var(--text-secondary)), to(transparent));
    background: linear-gradient(to right, var(--text-secondary), transparent);
}

span.results_group_name:after {
    background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(var(--text-secondary)), to(transparent));
    background: linear-gradient(to right, transparent, var(--text-secondary));
}
+/
/*
.results {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  grid-template-rows: masonry;
}
*/

#search_input, #sub_topics_search_input, #tags_search_input {
            width: 350px;
            align-self: center;
            justify-self: center;
}

#sub_topics_search_input, #tags_search_input {
    margin-bottom: 15px;

}

#search_in_options {
    display:flex;
    flex-direction:row;
    align-self: center;
    justify-self: center;
    margin-top: 5px;

}

#sort_by_selection, #group_by_selection {
            width: 200px;
            align-self: center;
            justify-self: center;
}


div.featured_sort_by_box {
    margin-left: 10px;
}

div.sort_by_box {
    display:flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction:row;
}

span.group_by, span.sort_by {
    margin-right: 10px;
}

span.sort_by {
    margin-left: 20px;
}


#categories_title_search, #langs_title_search, #topics_title_search, #tags_title_search {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1px;
    text-align: center;
    margin-top: 10px;
    font-size: medium;
    font-weight: bold;
    color: var(--text-title);

}

#category_title_nb, #lang_title_nb, #topics_title_nb, #tags_title_nb {
     font-weight: bold;
     margin-left: 3px;

}

#topics_title_search, #tags_title_search {
   margin-bottom: 10px;
}

#categories_title_search {
               display: none;
}

.categories_choice, .langs_choice {
               display: flex; flex-wrap: wrap;
               align-items: center;
               justify-content: center;

}

.topics_choice_box, .tags_choice_box {
               display: flex; flex-direction: column;
               align-items: center;
               justify-content: center;
}

.items_filtered {
               display: flex; flex-wrap: wrap;
               align-items: center;
               justify-content: center;
}

.filtered_items_box{
    border:1px solid var(--border-color);
    padding: 2px;
    border-radius: 10px;
    background: var(--bg-primary);
    display:flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction:row;
    margin: 10px;
}

.and_topics_group, .and_tags_group {
    display:flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction:row;
    border-left: 2px solid var(--border-color);
    border-right: 2px solid var(--border-color);
    border-radius: 0px;
    margin-right: 5px;
    margin-left: 5px;
    padding-right: 5px;
    padding-left: 5px;
}

#and_or_topic_select, #and_or_tag_select {
    margin-right: 5px;
}

.category-badge, .lang-badge, .topic-badge, .tag-badge-filter {
    display: inline-block;
    border-radius: 15px;
    margin: 5px;
    align-self: center;
    background: var(--bg-tertiary);
    color: var(--white);
    border: 1px solid var(--border-color);
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}

.category-badge  {
    background: var(--bg-senary);
    color: white;
    border: 1px solid var(--border-color);
}


.tag-badge-filter  {
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
}

.topic-badge {
    background: var(--bg-quinary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

/* box-shadow: 4px 4px 4px var(--border-color); */

.category-badge:hover, .lang-badge:hover, .topic-badge:hover, .tag-badge-filter:hover {
    background: var(--bg-quaternary);
    border: 1px solid var(--bg-quaternary);
    color: var(--text-primary);
}


.category_count, .category-filtered-count, .language_count, .language-filtered-count,
.topic_count, .topic-filtered-count, .tag_count, .tag-filtered-count {
            display: inline-block;
            border-radius: 40px;
            margin-left: 5px;
            align-self: center;
            background: var(--bg-primary);
            color: var(--text-primary);
            border: 0px solid var(--text-secondary);
            padding: 3px 8px;
            display: flex;
            justify-content: center;
            align-content: center;
            font-size: x-small;
            font-weight: normal;
}

.tag_count {
    background: var(--text-secondary);
    color: var(--bg-secondary);
    border: 0px solid var(--text-secondary);
}

/*.category-filtered-count, .language-filtered-count, .topic-filtered-count, .tag-filtered-count {
            background: var(--text-primary);
            color: var(--bg-secondary);
            border: 0px solid var(--text-secondary);
} */

.category-filtered-badge, .language-filtered-badge, .topic-filtered-badge, .tag-filtered-badge  {
    display: inline-block;
    border-radius: 15px;
    margin: 5px;
    align-self: center;
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--bg-primary);
}

.language-filtered-badge {
    color: var(--white);
}


.category-filtered-badge:hover, .language-filtered-badge:hover, .topic-filtered-badge:hover, .tag-filtered-badge:hover {
    background: var(--bg-quaternary);
    border: 1px solid var(--bg-quaternary);
    color: var(--text-primary);
}

.category-filtered-badge  {
    background: var(--bg-senary);
    color: white;
    border: 1px solid var(--border-color);
}

.tag-filtered-badge {
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
}

.topic-filtered-badge {
    background: var(--bg-quinary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.category_filter_closure, .language_filter_closure, .topic_filter_closure, .tag_filter_closure {
    margin-right: 5px;
}




#search_stats {
    padding-bottom:20px;
    font-weight: bold;
    font-size: medium;

}

/* src: https://savvy.co.il/en/blog/css/line-on-sides-headers/ */
span.hr_title {
    display: flex;
    align-items: center;
    margin-top:10px;
    margin-bottom:10px;
}

#active_filters_hr{
    display: none;
}

span.hr_title:before, span.hr_title:after {
    content: "";
    height: 3px;
    flex-grow: 1;
    margin: 0 12px;
    background: var(--text-primary);
}

span.hr_title:before {
    background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(var(--text-secondary)), to(transparent));
    background: linear-gradient(to right, var(--text-secondary), transparent);
}

span.hr_title:after {
    background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(var(--text-secondary)), to(transparent));
    background: linear-gradient(to right, transparent, var(--text-secondary));
}

#hr_filters_title, .hr_sort_by_title, #active_filters_hr {
    font-size: medium;
    color: var(--text-title);
}

#hr_filters_title:hover {
    color: var(--text-decoration-color);
    font-weight: bold;
}

#filters_hide_sign {
    margin-left: 10px;
}
/*

            align-items: center;
            justify-content: center;
            border:1px solid var(--text-secondary);
            border-radius: 10px;
            background: var(--bg-secondary);
*/

.resource-card {
    border-left:4px solid var(--border-color);
    border-radius: 2px;
    padding: 10px;
    background: var(--bg-secondary);
    opacity: 1;
    display:flex;
    flex-wrap: wrap;
    flex-direction:column;
    max-width:450px;
}

.coming_soon_outer, .about_outer {
    display:flex;
    flex-grow: 1;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;

}

.coming_soon_card, .about_card {
    border-left:4px solid var(--border-color);
    border-radius: 2px;
    padding: 20px;
    background: var(--bg-secondary);
    display:flex;
    flex-direction: column;
    justify-content: center;
    opacity: 1;
    margin-top: 4rem;
    margin-bottom: 4rem;
    margin-left: 1rem;
    margin-right: 1rem;
}

.highlight { background-color: var(--highlight_color);
}

.color_text_hl {
    color: var(--text-title);
}

a.search_more_info {
                    font-size: small;
                    margin-left: 8px;
                    margin-right: 3px;
                    color: var(--text-decoration-color);
                    text-decoration:none;
                    align-self: center;
}

a.search_more_info:hover {
                    text-decoration:none;
                    color: var(--text-primary);
                    opacity: 0.8;
}

/*
div.title_search {
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    margin-bottom: 10px;
    align-items: center;
    justify-content: center;
    text-align:center;
} */

div.title_search {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    justify-self: center;
    width: 100%;
}

div.title_subtitle {
    text-wrap: pretty;
    text-align:center;
    display:flex;
    flex-direction:column;
}

span.title_search {
    color: var(--text-title);
    font-weight: bold;
    font-size: medium;
    text-wrap: pretty;
    text-align:center;
}

span.subtitle_search {
    font-size: normal;
    font-style: italic;
}

a.title_search {
    color: var(--text-title);
}

a.title_search:hover {
    text-decoration:underline;
    text-decoration-color: var(--text-decoration-color);
    text-decoration-thickness: 3px;
}

a.parent_href_search {
    font-style: italic;
    text-decoration:none;
}

a.parent_href_search:hover {
                    text-decoration:underline;
                    text-decoration-color: var(--text-decoration-color);
                    text-decoration-thickness: 1px;
}

.short_description_in_card {
    display:inline-block;
    text-wrap: pretty;
    border-left: 2px solid var(--border-color-secondary);
    border-radius: 0px;
    margin-bottom: 10px;
    padding-left: 5px;
}

.person_title {
    text-decoration:underline;
}

.person_in_card {
    display:inline-block;
    text-wrap: pretty;
    text-align: left;
    border-left: 2px solid var(--border-color-secondary);
    border-radius: 0px;
    margin-right: 10px;
    padding-right: 5px;
    padding-left: 5px;
    margin-bottom: 2px;
}

.all_persons_box {
    display: flex; flex-wrap: wrap;
    margin-bottom: 10px;
}

.qualities_section_in_card {
    display:flex;
    justify-content: space-evenly;
    border-radius: 0px;
    margin-right: 5px;
    margin-left: 5px;
    margin-bottom: 10px;
    padding-right: 5px;
    padding-left: 5px;
}

/*.~ {
    color: var(--text-primary);
    font-size: medium;
    border: 1px solid var(--text-primary);
    padding-left: 4px;
    padding-right: 4px;
    padding-bottom: 1px;
    border-radius: 3px;
} */

.show_more_symbol {
    font-size: large;
    padding-left: 3px;
    padding-right: 5px;
}

.show_more_symbol:hover ~ .show_more_box {
    display: block;
    opacity: 1;
}

.show_more_box:hover {
    display: block;
    opacity: 1;
}

.show_more_symbol:focus-within ~ .show_more_box {
    display: block;
    opacity: 1;
}

.show_more_box {
    background-color: var(--bg-quinary);
    border-radius: 10px;
    inline-size: auto;
    margin-left: 10px;
    margin-right: 10px;
    opacity: 0;
    padding: 1rem;
    padding-left: 2rem;
    position: absolute;
    transition: 0.2s ease;
    display: none;
    z-index: 3;
    border: 1px solid var(--border-color);
}

input {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 2px;
}

::placeholder {
  color: var(--text-primary);;
  opacity: 1; /* Firefox */
}

::-ms-input-placeholder { /* Edge 12 -18 */
  color: var(--text-primary);;
}

/* Checkkboxes */

.episode_num_search {
    font-weight: bold;
}

.resource_topic_in_badge {
    font-weight: bold;
}

.tags-search {
   display: flex; flex-wrap: wrap;
   margin-left: 10px;
   margin-right: 10px;
   align-items: center;
   justify-content: center;
   justify-self: center;
   align-self: center;
   text-align:center;
}


.tags_margin {
   display: flex;
   justify-content: center;
   align-items: center;
   margin-top: 10px;

}

ul.qualities_flaws_list {
    padding: 0px;
    margin: 0px;
}

li.qualities_flaws_list {
    text-wrap: pretty;
}

.quality_flaw_title {
    font-weight: bold;

}

div.category-icon {
    display: flex;
    flex-direction:column;
    margin-right: 5px;
    align-self: center;

}
span.category-icon {
    display: inline-block;
    font-size: large;
}

span.featured_icon {
    display: inline-block;
    font-size: medium;
}

.tag-badge {
    display: inline-block;
    border-radius: 5px;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 2px;
    align-self: center;
    justify-self: center;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    padding: 3px;
    display: flex;
    justify-content: center;
}

.tag-badge:hover {
    background: var(--text-title);
    border: 1px solid var(--border-color);
    color: var(--bg-secondary);
}

/*
.topics_box {
        display: flex; flex-wrap: wrap;
        flex: 1;
        border:1px dashed var(--text-secondary);
        background: var(--bg-secondary);
        padding: 5px;
        border-radius: 2px;
        margin: 5px;
        align-self: center;
        justify-content: center;

}

.topics_box:hover {
    border:1px solid var(--text-secondary);
    margin-bottom: 10px;
}
*/

#info-topic-block-filter, #info-sub-topic-block-filter,
 #info-tag-block, #info-tag-block-filter, #info-sub-tag-block-filter{
    padding-bottom: 10px;
    margin-bottom: 5px;
}

#info-topic-block{
    border: 1px dashed var(--border-color);
    padding-bottom: 10px;
    margin-bottom: 0px;
    align-self: center;
    padding-left: 5px;
    padding-right: 5px;
}

.empty_grid_div {
    grid-column-start: 1;
    margin-right: auto;
 }

.empty_grid_div_2 {
    grid-column-start: 3;
    margin-left: auto;
 }


#info-topic-block-filter, #info-sub-topic-block-filter {
    border: 1px dashed var(--border-color);
}

#info-tag-block-filter {
    border: 1px solid var(--border-color);
}


.topic-marker > div {
    padding: 0 0px;
    margin-top: -0.8em;
}

.tag-marker > div {
    padding: 0 0px;
    margin-top: -0.8em;
}
.box-topic-title, .box-topic-title-filter, .box-tag-title, .box-tag-title-filter {
    display: inline-block;
    padding: 0 6px;
    margin-left: 0.5em;
    font-style: italic;
    font-size: small;
}

.box-topic-title, .box-tag-title {
    background: var(--bg-secondary) none repeat scroll 0 0;
}

.box-topic-title-filter, .box-tag-title-filter {
    background: var(--bg-primary) none repeat scroll 0 0;
}

.box-list-div, .box-list-div-sub-topics, .box-list-div-tags {
    display: flex;
    flex-direction:row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    text-align:center;
}

.box-list-div-sub-topics, .box-list-div-tags {
    overflow-y:auto;
    max-height: 200px;
}

.box-list-div {
    overflow-x:auto;
}

.topics_str_display{
    font-weight: bold;
    display: inline-block;
    border-radius: 5px;
    align-self: center;

    background: var(--bg-quinary);
    color: var(--text-primary);
    border: 1px solid var(--bg-tertiary);

    padding: 2px;
    margin-bottom: 2px;
    margin-right: 3px;
    margin-left: 3px;
    display: flex;
    justify-content: center;
}

.topics_str_display:hover {
    background: var(--bg-tertiary);
    color: var(--black);
    border: 1px solid var(--bg-quinary);
}

.category-name {
    margin-top: 5px;
    font-size: small;

    align-items: center;
    justify-content: center;
    text-align:center;

}

.langs_parent, .langs_topics, .langs_tags{
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    justify-self: center;
    width: 100%;
}

.langs_parent {
    margin-top: 10px;
}
.langs_topics {
    margin-bottom: 0px;
}

.langs_tags {
    margin-top: 10px;
}

.topic-block-div {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    justify-self: center;
}


.lang_flag {
  font-size: large;
  padding-right: 5px;
}

/* to center flags around tags, creat anoter class and fix margin-top to 12px for ex

    grid-column-start: 1;*/
.lang_flags {
    margin-right: auto;
}

.published_date {
    margin-left: auto;
    padding-left: 10px;
}

.parent_search {
    display: flex;
    align-self: center;
    text-align: center;
    justify-self: center;
    font-size: small;
}

@media screen and (max-width: 1300px) {
    #medium_menu_section {
        display: flex;
    }

    #large_menu_section {
        display: none;
    }

    #drop_down_menu_section {
        display: block;
    }

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

    #toc_search {
        display:flex;
        flex-direction:row;
        align-items: center;
        justify-content: center;
        position: static;
        align-self: center;
        width: 50%;
        flex-wrap: wrap;
        text-wrap: wrap;
    }

    .results_and_toc {
        max-height: none;
    }



}

@media screen and (max-width: 700px) {
    h1 {
        font-size: large;
    }
    body {
        font-size: small;
    }

    .box-topic-title, .box-topic-title-filter, .box-tag-title, .box-tag-title-filter {
        font-size: small;
    }

    #categories_title_search, #langs_title_search, #topics_title_search, #tags_title_search {
        font-size: small;
    }
    
    #search_stats { 
        font-size: small;
    }

    span.title_search {
        font-size: medium;
    }
    .lang_flag {
      font-size: medium;
    }
    
    .show_more_symbol {
      font-size: large;
    }

    #medium_menu_section {
        display: none;
    }

    #full_drop_down_menu_section {
        display: block;
    }

    #drop_down_menu_section {
        display: none;
    }
    
    .resource-card {
        width: 450px;
    }

    span.results_group_name {
        padding-left: 50px;
        padding-right: 50px;
    }
    

}

@media screen and (max-width: 450px) {
    h1 {
        font-size: medium;
    }
    body {
        font-size: small;
    }

    .box-topic-title, .box-topic-title-filter, .box-tag-title, .box-tag-title-filter {
        font-size: small;
    }

    #categories_title_search, #langs_title_search, #topics_title_search, #tags_title_search {
        font-size: small;
    }
    
    #search_stats { 
        font-size: medium;
    }

    span.title_search {
        font-size: medium;
    }
    .lang_flag {
      font-size: small;
    }

    .show_more_symbol {
      font-size: x-large;
    }

    .resource-card {
            max-width:350px;
    }

    #toc_search {
        width: 90%;
    }

    span.results_group_name {
        padding-left: 20px;
        padding-right: 20px;
    }
    a.go_up {
        font-size: x-large;
        padding-bottom: 5px;
    }
}