:root{
    --primary-color: #004080;
    /* --primary-color: #00387B; */
    --secondary-color: var(--primary-color);
    --color_that_is_not_black:black;
    --category-color: #d0d0d0;

    --primary-font-color: #808080;

    --page_max_width: 1200px;

    --footer_starting_height: 40px;
    --footer_top_margin: 40px;
    --footer_max_width: var(--page_max_width);
    --footer_margin_top_on_mobile: 70px;

    --navbar_size: 120px;
    --navbar_starting_height: var(--navbar_size);
    --navbar_padding_block: 5px;
    --navbar_max_width: var(--page_max_width);
    --navbar_bottom_margin: 15px;

    --mobile_navbar_height: 40px;
    --mobile_navbar_disabled_button_color:  rgb(160, 160, 160);

    --category_background_color: rgba(193, 193, 193, 0.2);


    --decrease_amount_for_history: 0.1;
    --size_of_first_in_history: 105px;

    /* --color_that_is_not_black: rgb(74, 74, 74); */
    /* --color_that_is_not_black:#808080; */
    --box-shadow-color: #636363;
    --masik_szin: #7f7f7f;

    --level_display_margin_inline: 3px;
    --level_display_bottom_margin: 5px;
    --level_display_h2_line_height: max(6dvw, 24px);
    --history_level_display_bottom_margin: 4px;

    --category_grid_gap: 10px;
    --category_elements_transition_time: 200ms;
    --category_elements_shadow_size_x: 2px;
    --category_elements_shadow_size_y: 2px;
    /* --category_line_height: min(0.95dvw, 16px); */
    --category_element_p_padding_top: 0px;


    --row_gap_size_in_IDOMACEL_detailed: 5px;
    --col_gap_size_in_IDOMACEL_detailed: 13px;
    --space_between_top_bottom_part_in_IDOMACEL_detailed: 10px;
    --hole_size_in_detailed: 2px;

    --not_selected_opacity: 0.4;
    --haszlink_gap: 15px;

    --haszlink_color: #808080;

    --left_search_sidebar_bottom_margin: 25px;
    --space_between_search_results: 20px;

    --gap_after_image_in_OSHONOS_detailed: 20px;

    --left-sidebar-content-width: 250px;

    --gap-between-sidebar-and-main: 10px;

    --right-container-ratio: 1.5;
    --middle-container-ratio: 3;
    --gap-between-right-and-middle-container-ratio: 0.07;

    --main-container-height: calc(100dvh - var(--navbar_bottom_margin) - var(--navbar_starting_height) - var(--footer_top_margin) - var(--footer_starting_height));

    --space-between-container-and-scroll-thumb: 10px;
    --scrollbar-width: 8px;

    --header-blue-line-height: 4px;

    --header-gradient: linear-gradient(to bottom, #EAEAEA 62.501%, white 62.501%);

    --table-header-color: grey;

    --category-element-height: 100px;

    --default-font-family: Calibri, Verdana, Segoe, sans-serif;

    
}


@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/space-mono/SpaceMono-Bold.woff2) format('woff2'),
  url(/fonts/space-mono/SpaceMono-Bold.woff) format('woff');
}


h1 { 
    font-family: 'Courier Prime', Arial, Helvetica, sans-serif; 
    font-size: 26.2px; font-style: normal; 
    font-variant: normal; 
    font-weight: normal; 
    line-height: 26.4px; 
    font-weight: bold;
}
/* h2 { font-family: Calibri, Verdana, Segoe, sans-serif; font-size: 1rem; font-style: normal; font-variant: normal; font-weight: normal;  }  */
h2{font: inherit;font-family: Calibri, Verdana, Segoe, sans-serif;}
h3 { font-family: Calibri, Verdana, Segoe, sans-serif; font-size: 17.6px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 17.6px; }
h4 { font-family: Calibri, Verdana, Segoe, sans-serif; font-size: 17.6px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 17.6px; }
h5 { font-family: Calibri, Verdana, Segoe, sans-serif; font-size: 17.6px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 17.6px; }
p { font-family: Calibri, Verdana, Segoe, sans-serif; font-size: 17.6px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 22.8571px;  }
li { font-family: Calibri, Verdana, Segoe, sans-serif; font-style: normal; font-variant: normal; font-weight: normal;}
blockquote { font-family: Calibri, Verdana, Segoe, sans-serif; font-size: 23px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 30px; }
pre { font-family: Calibri, Verdana, Segoe, sans-serif; font-size: 17.6px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 22.8571px; }

*::-webkit-scrollbar {
    display: none;
}

*{
    -ms-overflow-style: none;
    scrollbar-width: none;

    box-sizing: border-box;
}

button, a{
    all: unset;
    cursor: pointer;
    box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  /* font: inherit; */
}

::-moz-selection {
  background-color: #b3d4fc;
  color: #000000;
  text-shadow: none;
}

::selection {
  background-color: #b3d4fc;
  color: #000000;
  text-shadow: none;
}

/* clears the ‘X’ from Internet Explorer */
input[type=search]::-ms-clear { display: none; width : 0; height: 0; }
input[type=search]::-ms-reveal { display: none; width : 0; height: 0; }
/* clears the ‘X’ from Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }


sub { vertical-align:text-bottom; font-size:75%; }
sup { vertical-align:text-top; font-size:75%; }

select{
    cursor: pointer;
}

.temporary{
    font-size: 1.2rem;
    /* margin-top: 20dvh; */
}

/* only needed because for some reason the scroll into view scrolls the html even though it is not scrollable */
html{
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

body{

    overflow-x: hidden;
    overflow-y: hidden;
    min-height: 100dvh;
    max-height: 100dvh;
    position: relative;
}

img, .szinkodok_szin_doboz {
    max-width: 100%;
    /* width: 100%; */
    height: auto;
    vertical-align: middle;
    font-style: italic;
    background-repeat: no-repeat;
    background-size:cover;
    shape-margin: 1rem;
}
.szinkodok_szin_doboz, .category_element img{
    height: 100%;
    aspect-ratio: 1;
}


.szinkodok_szin_doboz:fullscreen{
    width: 100dvw;
    height: 100dvh;
}

a {
    color: inherit;
    display: inline-block;
    text-decoration: none;
}


footer{
    color: white;
    background-color: var(--primary-color);
}


.HASZLINK{
    display: flex;
    flex-direction: column;
    row-gap: var(--haszlink_gap);
    color: var(--color_that_is_not_black);
}

.HASZLINK a>h3{
    font-weight: bold;
    font-size: 1.1rem;
    width: fit-content;
    color: var(--color_that_is_not_black);
}

.HASZLINK a{
    width: fit-content;
}

.HASZLINK>a> p{
    color: var(--haszlink_color);
    font-size: 1.1rem;
}





/* main>div{


    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    box-sizing: border-box;

    max-height: 100%;
    background-color: white;
} */

p{
    width: 100%;
    max-width: 100%;
    /* text-transform: capitalize; */
}


/* main{
    --elso_oszlop_szelesseg: 1.5;
    --masodik_oszlop_szelesseg: 4;
    --harmadik_oszlop_szelesseg: 1.5;
    --oszlop_gap: 0.3;

    display: grid;
    grid-template-columns: calc(var(--elso_oszlop_szelesseg) * 100% / (var(--elso_oszlop_szelesseg) + var(--masodik_oszlop_szelesseg) + 2 * var(--oszlop_gap) + var(--harmadik_oszlop_szelesseg)) + 4px) calc(var(--masodik_oszlop_szelesseg) * 100% / (var(--masodik_oszlop_szelesseg) + var(--elso_oszlop_szelesseg) + 2 * var(--oszlop_gap) + var(--harmadik_oszlop_szelesseg)) + 4px) calc(var(--harmadik_oszlop_szelesseg) * 100% / (var(--elso_oszlop_szelesseg) + var(--masodik_oszlop_szelesseg) + 2 * var(--oszlop_gap) + var(--harmadik_oszlop_szelesseg)) + 4px);
    column-gap: calc(var(--oszlop_gap) * 100% / (var(--elso_oszlop_szelesseg) + var(--masodik_oszlop_szelesseg) + var(--harmadik_oszlop_szelesseg)));
    max-width: var(--page_max_width);
    width: 100%;
    height: calc(100dvh - var(--footer_starting_height) - var(--footer_top_margin) - (var(--navbar_starting_height)) - var(--navbar_bottom_margin) );
    margin-inline: auto;
    padding-inline: 5px;
    margin-top: calc(var(--navbar_bottom_margin) );
    overflow-x: hidden;
    overflow-y: hidden;


} */

footer{
    position: absolute;
    bottom: 0;

    width: 100%;

    min-height: 200px;
    background-color: var(--secondary-color);

    transform: translateY(100%);

    transition: transform ease-in 350ms;
    cursor: pointer;
    z-index: 5;
}

footer:hover{
    transform: translateY(0);
}

footer>div{
    transform: translateY(-100%);
    height: var(--footer_starting_height);
    background-color: var(--secondary-color);
    width: 100%;

    display: block;
    margin-inline: auto;

    transition: transform 350ms ease-in;


}
footer>div>div{
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    margin-inline: auto;
    width: 100%;
    height: 100%;
    justify-content: space-between;
    max-width: var(--footer_max_width);
    align-items: center;

}

/* moves the elements in the footer when open down a bit */
/* footer:hover>div{
    transform: translateY(50%);
} */

footer p{
    font-size: 1.0rem;
    padding: 5px;
    width: fit-content;
}


header{
    position: relative;
    width: 100%;

    height: var(--navbar_size);
    z-index: 3;

}

header, header .inner_header, .image_holder{
    background: var(--header-gradient);

}

header::after, header .inner_header::after{
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    background-color: var(--primary-color);
    height: var(--header-blue-line-height);
    width: 100%;
    translate: 0 -100%;
}

header>div>div.image_holder{
    width: var(--left-sidebar-content-width);
    min-width: var(--left-sidebar-content-width);

    height: var(--navbar_size);

}


header>div>div.image_holder img{
    position: relative;
    z-index: 1;


    max-height: 100%;

    display: block;
}

header>div>div.image_holder>a{
    height: 100%;
    margin-inline: auto;
    width: fit-content;
    display: block;

}

header>div>div.image_holder img:hover{
    cursor: pointer;
}

header>div{
    position: relative;
    display: flex;
    flex-direction: row;

    width: 100%;
    max-width: var(--page_max_width);

    height: 100%;
    z-index: 3;

    margin-inline: auto;
    background-color: white;
}

header>div>.inner_header{
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    /* width: calc(100% - var(--left-sidebar-content-width)); */
    padding-left: var(--gap-between-sidebar-and-main);
    padding-right: calc(var(--scrollbar-width) + var(--space-between-container-and-scroll-thumb) + 5px);
}

header nav{
    display: flex;
    flex-direction: row;
    height: 50%;
    min-height: 50%;
    /* padding-bottom: 10px; */
    /* box-sizing: content-box; */
    align-items: center;
}

header nav>.title{
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    gap: 15px;
}

.inner_header>nav>img{
    max-height: 100%;

    padding-block: 5px;
    margin-right: 3px;
    border-radius: 6px;
}

header nav h1{
    font-family: "Space Mono",  monospace;
    font-weight: 700;

    text-transform: uppercase;
    color: var(--primary-color);
    font-size: 2rem;
    cursor: pointer;
}

header nav>.title>p{
    color: #7b7b7b;
    font-style: italic;
    font-weight: bold;
    width: fit-content;

    font-size: 1.1rem;
    line-height: 1.1rem;
}

.inner_header .icons{
    display: flex;
    column-gap: 10px;
}

nav#current_path{
    display: flex;
    align-items: center;
    padding-top: 14px;
}

header #current_path ol{
    display: flex;
    flex-direction: row;
    flex-grow: 1;

    flex-wrap: wrap;
    /* padding-bottom: 10px; */

    list-style: none;
}

header #current_path li{
    width: fit-content;
    white-space: nowrap;
    font-size: 1.25rem;
    color: #7F7F7F;
    font-weight: bold;
    /* text-transform: lowercase; */
}


header #current_path li>a:hover{
    text-decoration: underline;
    cursor: pointer;
}



header #current_path li[aria-current="page"]{
    color: var(--primary-color);
    cursor: default;
}


header #current_path li::after{
    content: ">";
    margin-inline: 10px;
}

nav#current_path li[aria-current="page"]::after {
    content: "";
    margin-inline: 0;
}

/* header #current_path svg:hover{
    cursor: default;
} */

/* header #current_path li>span>svg{
    fill: #7F7F7F;
} */
/* header #current_path li:not(:last-child)>span>svg:hover{
    cursor: pointer;
} */
/* header #current_path>:last-child svg{
    fill: var(--primary-color);
} */


div.left-sidebar{
    width: fit-content;

    z-index: 4;
}


div.left-sidebar-content{
    /* background-color: red; */
    width: var(--left-sidebar-content-width);
    min-width: var(--left-sidebar-content-width);
    border-inline: 1px solid rgba(193, 193, 193, 0.315);

}

/* div.right-container{
    border-inline: 1px solid rgba(193, 193, 193, 0.315);

} */
/* div.right-container{
    width: calc(100% / (var(--right-container-ratio) + var(--middle-container-ratio) + var(--gap-between-right-and-middle-container-ratio)) * var(--middle-container-ratio) - (100% / (var(--right-container-ratio) + var(--middle-container-ratio) + var(--gap-between-right-and-middle-container-ratio)) * var(--gap-between-right-and-middle-container-ratio)));
} */
div.middle-container, div.right-container, div.left-sidebar-content{
    position: relative;
    background-color: white;
}



.custom-scrollbar {
    position: absolute;
    right: 0;
    width: var(--scrollbar-width);

    top: var(--scroll-content-top, 50px);
    height: var(--scroll-content-height, 250px);
    /* translate: calc(100% + var(--space-between-container-and-scroll-thumb)) 0; */
}

/* Scrollbar thumb */
.scroll-thumb {
    opacity: 0;
    width: 100%;
    background-color: #66666684;
    border-radius: 4px;
    position: absolute;
    top: 0;
    height: var(--thumb-height, 0px); /* Default height if JS doesn't load */
    transition: opacity ease-in 200ms, background-color ease-out 200ms;
    transition-delay: 150ms;
}

.scroll-thumb:hover, .scroll-thumb.being_dragged{
    background-color: #666;
    cursor: pointer;
    opacity: 1;
}

.middle-container:has(.scrollable:hover, .custom-scrollbar:hover)>.custom-scrollbar>.scroll-thumb, .right-container:has(.scrollable:hover, .custom-scrollbar:hover)>.custom-scrollbar>.scroll-thumb{
    opacity: 1;
}


main{
    display: grid;
    grid-template-columns: calc(100% / (var(--right-container-ratio) + var(--middle-container-ratio) + var(--gap-between-right-and-middle-container-ratio)) * var(--middle-container-ratio))
                           calc(100% / (var(--right-container-ratio) + var(--middle-container-ratio) + var(--gap-between-right-and-middle-container-ratio)) * var(--right-container-ratio));
    /* background-color: green; */
    grid-template-rows: var(--main-container-height);
    flex-grow: 1;

    column-gap: calc(100% / (var(--right-container-ratio) + var(--middle-container-ratio) + var(--gap-between-right-and-middle-container-ratio)) * var(--gap-between-right-and-middle-container-ratio));
    overflow-x: hidden;
    overflow-y: hidden;

    padding-right: 5px;

    position: relative;

}



div.main-container{
    display: flex;
    flex-direction: row;
    /* background-color: blue; */
    max-width: var(--page_max_width);
    margin-inline: auto;

    height: var(--main-container-height);
    max-height: var(--main-container-height);

    margin-top: calc(var(--navbar_bottom_margin));

    column-gap: var(--gap-between-sidebar-and-main);
}

div.middle-container, div.right-container, main{
    max-height: 100%;
}

main, div.left-sidebar-content{
    height: 100%;
}

main>div{
    height: 100%;
    /* overflow-y: scroll; */
}


.content{
    height: 100%;
    overflow-y: hidden;
    padding-right: calc(var(--scrollbar-width) + var(--space-between-container-and-scroll-thumb));

}

.scrollable{
    height: 100%;
    overflow-y: scroll;
    max-height: 100%;
    position: relative;
}

.detailed:not(.scrollable){
    max-height: 100%;
    height: 100%;
}

.category{
    display: grid;
    width: 100%;
    gap: var(--category_grid_gap);

    /* overflow-y: scroll; */
    /* grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); */
    grid-template-columns: 1fr 1fr;

    /* padding-right: 5px; */
    height: fit-content;

}


/* .table{
    position: relative;
}
.table h3{
    font-size: 1rem;
}
.table p{
    font-size: 1rem;
    line-height: 1rem;
    padding-block: 5px;
} */

h2{
    /* width: 100%; */
    position: relative;
    display: inline-block;
    text-transform: uppercase;
}


.search{
    display: grid;
    /* flex-direction: row; */
    column-gap: var(--category_grid_gap);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    height: 100%;
}

.search:has(.search_results_holder>p) ~ nav[aria-label="Pagination"], #pagination_holder[aria-hidden="true"]{
    display: none;
}



.detailed .szinkodok_szin_doboz:hover{
    cursor: pointer;
}


.search>h4{
    margin-bottom: 25px;
}

.left_search_sidebar{
    margin-bottom: var(--left_search_sidebar_bottom_margin);
    width: 100%;
    max-width: 100%;
}

.left_search_sidebar input[type="search"]{
    width: 100%;

    font-size: 1.21rem;
    line-height: 1.21rem;


    flex-grow: 1;
    border: none;

    padding-right: 5px;
}

.left_search_sidebar input[type="search"]:focus-visible{
    border: none;
    outline: none;
}

div[role="search"]{
    margin-top: 5px;
    margin-bottom: 20px;


    display: flex;
    flex-direction: row;

    /* column-gap: 5px; */

    width: 100%;
    height: fit-content;

    border: 2px solid var(--primary-color);

    padding-block: 2px;
    padding-left: 5px;
    border-radius: 5px;

}

div[role="search"]>button{
    /* padding: 3.5px 8.5px 5.5px 6.5px; */
    padding-inline: 6px;
    padding-block: 3.5px 5.5px;
    /* border-radius: 50%; */
    /* background-color: #004080; */

    height: 29px;
    /* max-width: 29px; */
    max-height: 29px;
    /* width: 29px; */


    border-left: #0040805a 1px solid;
}

div[role="search"]>button>svg{
    height: 20px;
    width: 20px;

    color: var(--primary-color);
}

.search_results_holder{
    display: flex;
    flex-direction: column;
    row-gap: 10px;

    flex-grow: 1;

}

.left_search_sidebar #total-search-count{
    margin-bottom: 5px;
    font-size: 1.15rem;
    line-height: 1.5rem;
}

.search_right_sidebar{
    display: flex;
    flex-direction: column;

    height: 100%;
    max-width: 100%;

    flex-grow: 1;

}





.disclaimer{
    font-size: 0.9rem;
    line-height: 0.9rem;
    color: gray;
    padding-top: 5px;
}





.category_element{
    align-items: center;
    display: flex;
    flex-direction: row;
    height: var(--category-element-height);
    min-height: var(--category-element-height);
    max-height: var(--category-element-height);

    column-gap: 10px;
    /* background-color: var(--category_background_color); */
    /* background-color: #EAEAEA; */
    border-radius: 5px;
    transition: all 250ms ease-in-out;
    position: relative;
    overflow: hidden;

    /* background-image: linear-gradient(var(--category_background_color), rgba(109, 109, 109, 0.2)); */
    background-image: linear-gradient(to right, rgba(212, 212, 212, 0.2) 33.333% 0%,rgba(212, 212, 212, 0.2) 33.333%, var(--category_background_color) 33.333%, var(--category_background_color) 66.666%,  rgba(109, 109, 109, 0.2) 66.666%);
    background-position-x: center;
    background-size: 300% 100%;
}

.category_element:hover{
    /* background-color: rgba(212, 212, 212, 0.2); */
    background-position-x: 0%;
}

.category_element > p{
    flex-grow: 1;
    font-size: 1.1rem;
    line-height: 1.1rem;
    justify-content: center;
    word-break: break-word;
}

.category_element[data-selected="1"]{
    /* background-color: rgba(109, 109, 109, 0.2); */
    background-position-x: 100%;
}

.detailed>.table{
    --space-next-to-headers: 10px;

    display: flex;
    flex-direction: column;
    width: 100%;

    padding-bottom: 15px;
    margin-bottom: 20px;
}

.detailed>.table>.table-row{
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    column-gap: 5px;
}

.detailed>.table>.table-row:not(:has(.table-header, .table-main-header-holder, img, .szinkodok_szin_doboz)){
    border-bottom:  1px solid grey;
    padding-inline: 5px;
}

.detailed>.table>.table-row .table-header, .detailed>.table>.table-row>.szinkodok_szin_doboz, .detailed>.table>.table-row>img{
    grid-column: 1 / span 2;
    text-align: center;
    color: white;
}

.table-row>img, .table-row>.szinkodok_szin_doboz{
    aspect-ratio: 1;
    width: 60%;
    margin-inline: auto;
}

.detailed>.table>.table-row:has(.szinkodok_szin_doboz, img){
    background-color: white;
    margin-block: 10px;
}

.table-row>h3.table-header{
    color: white;
    font-size: 1.2rem;
    line-height: 1.2rem;

    padding-block: 3px 4px;
}

.detailed>.table>div.table-row:has(.table-main-header-holder){
    /* margin-bottom: var(--space-next-to-headers); */
    grid-template-columns: 10% 80% 10%;
    position: sticky;
    top: 0;
    background-color: white;

    column-gap: 0;
}

.detailed>.table>div.table-row:has(.table-main-header-holder)>button>svg{
    fill: var(--table-header-color);
}

.table-main-header-holder{
    height: var(--category-element-height);
    background-color: var(--table-header-color);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-inline: 5px;

    word-break: break-word;

}

.table-main-header-holder>h4, .table-main-header-holder>h3, .table-main-header-holder>p{
    color: white;
    width: fit-content;
}

.table-main-header-holder>.table-header{
    font-weight: bold;
    font-size: 1.4rem;
    line-height: 1.7rem;
}

/* .table-row>h4.table-header{
    font-size: 1.15rem;
    line-height: 1.15rem;

} */

.table-row:has(h4.table-header){
    margin-top: var(--space-next-to-headers);
    margin-bottom: 3px;
}

.table-row>.table-header{
    padding: 7px;


}

.table-row:has(>.table-header){
    margin-top: 15px;
    margin-bottom: 5px;
}

.table-row:has(.szinkodok_szin_doboz, img) + .table-row{
    margin-top: 0;
}


.table-row>p{
    padding-block: 2px;
}

.table-row>p:first-child{
    font-weight: bold;
}

.MERTVALTO .table-row>p:first-child{
    text-align: right;
    /* justify-content: end; */
}



/* .detailed>.table{
    --space-between-rows-in-table: 5px;

    border-spacing: 0 var(--space-between-rows-in-table);
    font-size: 1.1rem;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;

    background-color: rgba(212, 212, 212, 0.2);
}


.detailed>.table tr{
    margin-block: 2.5px;
    border-bottom: 1px solid black;
    padding-block: var(--space-between-rows-in-table);
}


.detailed>.table tr{
    margin-block: 2.5px;
}

.detailed>.table .table-header{
    padding-block: 2px;
    color: white;
    text-align: center;
}

.detailed>table :first-child>td{
    font-size: 1.2rem;
    background-color: var(--primary-color);

} */

button#toggleChartSize{
    display: block;
    width: 25px;
    height: 25px;
    position: absolute;
    top: 5px;
    right: 5px;

    transition: all 200ms ease-out;

    z-index: 1;
}

.right-container.big-view button#toggleChartSize{
    transform: rotate(45deg);
}

.oshonosfak.detailed{
    color: var(--color_that_is_not_black);

    margin-top: var(--gap_after_image_in_OSHONOS_detailed);
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
}

.oshonosfak.detailed>div{
    width: fit-content;
    margin-bottom: var(--haszlink_gap);
    break-inside: avoid;
}

.oshonosfak.detailed div>h3{
    font-size: 1.1rem;
    width: fit-content;
    color: black;
}

.oshonosfak.detailed p{
    color: var(--haszlink_color);
    font-size: 1.1rem;
    font-style: italic;
}


.mertvalto_selector_holder>div{
    display: flex;
    flex-direction: column;

    width: 100%;
    max-width: 100%;

    justify-self: end;

    row-gap: 10px;

}


.mertvalto_selector_holder{
    display: flex;

    flex-direction: column;
    justify-content: center;
    row-gap: 10px;
}

.mertvalto_selector_holder input{
    /* padding-right: 15px; */
    padding-left: 2px;

}


.mertvalto_selector_holder input, .mertvalto_selector_holder select{
    /* text-align: right; */
    padding-bottom: 2px;
    padding-top: 5px;
    /* box-shadow: var(--category_elements_shadow_size_x) var(--category_elements_shadow_size_y) var(--box-shadow-color);
    margin-left: auto;
    flex-grow: 1;
    width: 50px;
    height: fit-content; */

    width: 100%;

    border-radius: 3px;

    font-size: 1.1rem;
}

/* .mertvalto_data{
    display: grid;
    grid-template-columns: max-content 1fr max-content;
    width: calc(100% - 50px);
    margin-inline: auto;

    max-height: 100%;
    height: fit-content;
    padding-top: 20px;
} */


/* div.detailed.MERTVALTO{
    display: flex;
    flex-direction: column;

    height: 100%;
} */

/* .mertvalto_data.mertvalto_romai{
    display: block;
} */


#open_from_search_btn[data-shown="1"]{
    display: block;
}

#open_from_search_btn{
    position: fixed;
    bottom: 30px;
    right: 30px;
    transform: rotateY(180deg);
    display: none;
    z-index: 10;
}

.mobile_navbar{
    display: none;
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: gray;
    z-index: 10;

}

.mobile_navbar>div{
    display: flex;
    width: 100%;
    margin-inline: auto;
    justify-content: space-evenly;
    vertical-align: middle;
    gap: 20px;
    align-items: center;

}

.mobile_navbar button, .mobile_navbar button>svg{
    width: 25px;
    height: 25px;

}

.mobile_navbar #back_nav_button{
    transform: rotate(90deg)
}

.mobile_navbar button:disabled>svg{
    fill: var(--mobile_navbar_disabled_button_color);
    cursor: default;
}

.mertvalto_data, .oshonosfak.detailed{
    margin-top: var(--space_between_top_bottom_part_in_IDOMACEL_detailed);
    padding-top: 10px;

}

.detailed>.table>div.table-row:has(.table-main-header-holder)>button:disabled>svg{
    fill: var(--mobile_navbar_disabled_button_color);
    cursor: default;
}

.search_holder{
    max-height: 100%;
    height: 100%;
    position: relative;
    /* padding-bottom: 30px; */
}

nav[aria-label='Pagination']{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;

    font-size: 1.2rem;

    width: calc(50% - var(--category_grid_gap) / 2);
    position: absolute;
    right: 0;
    bottom: 0;

    background-color: white;
    padding-top: 18px;
}

.search.scrollable{
    padding-bottom: 60px;

}

nav[aria-label='Pagination'] button{
    display: inline-block;
    outline: none;

    font-weight: 600;

    border-radius: 13px;
    padding: 3px 13px;
    
    border: 1px solid #222222;
    transition: 0.2s ease 0s;
    transition-property: color, border-color, background;
    background: #fff;
    color: #222222;

}

nav[aria-label='Pagination'] button:disabled{
    color: var(--mobile_navbar_disabled_button_color);
    border-color: var(--mobile_navbar_disabled_button_color);
    cursor: default;
}

nav[aria-label='Pagination'] button:not(:disabled):hover {
    border-color: #000000;
    background: #f7f7f7;
}

nav[aria-label='Pagination'] #current_page{
    cursor: default;
}


#roman_value{
    font-family: 'Times New Roman', Times, serif;
}


/* SEARCH FILTERS STYLE-------------------------------------- */

.filter-sidebar{
    margin-bottom: 8px;

    padding: 0;
    border: 1px solid #e7e7e7;
    border-radius: 8px;
    background-color: #fff;

    max-width: 100%;

    box-sizing: border-box;
    position: relative;
    margin: 0 auto;
    width: 100%;
}

.filter-sidebar .filter-header{
    padding: 8px;
    border-bottom: 1px solid #e7e7e7;

    display: flex;
    flex-direction: column;
}

.filter-header>h2{
    font-size: 1.15rem;
    line-height: 1.5rem;
    font-weight: 700;
    font-family: var(--default-font-family);

    color: #1a1a1a;
    text-transform: none;
}

.filter-sidebar div[data-filters-group="types"]:not(:has(.filter-element)){
    display: none;
}

.filter-sidebar>div>.filter-group{
    padding: 12px 16px 8px 13px;
    max-width: 100%;

    box-sizing: border-box;
    position: relative;
    margin: 0 auto;
    width: 100%;
}

.filter-group>fieldset{
    border: none;
    padding: 0;
    margin: 0;
    min-inline-size: unset;
}

.filter-group>fieldset .expandButton{
    width: 100%;

    display: flex;
    align-items: center;

    font-family: var(--default-font-family);

    color: #1a1a1a;
}

.filter-group>fieldset .expandButton .filter-element{
    display: flex;
    gap: 8px;
}

.filter-group>fieldset .expandButton>:first-child{
    flex-grow: 1;
}

.filter-group>fieldset .expandButton legend{
    margin-bottom: 4px;
}

.filter-group .filter-group-label{
    font-size: 1.05rem;
    /* line-height: 1.5rem; */
    font-weight: 700;
    font-family: var(--default-font-family);

    color: #1a1a1a;
}

.filter-group>fieldset .expandButton>:last-child{
    color: #595959;
    fill: #595959;

    display: inline-block;
    height: 24px;
    margin-left: 16px;
    flex-shrink: 0;
    transition: transform 0.12s cubic-bezier(0.2,0,0.4,0.8);
    cursor: pointer
    
}

.filter-group>fieldset .expandButton[aria-expanded="true"]>:last-child{
    transform: rotate(180deg);
}

.filter-group>fieldset .expandButton svg{
    display: inline-block;
    vertical-align: top;
    height: 100%;
    width: auto;
}

.filter-group .filter-holder{
    transition: grid-template-rows 0.12s cubic-bezier(0,0,0.4,1);
    list-style-type: none;

    display: grid;
    grid-template-rows: 0fr;
}

.filter-group .expandButton[aria-expanded="true"] ~ .filter-holder{
    grid-template-rows: 1fr;
}

.filter-group .filter-holder>div{
    padding-block-start: 0 !important;
    overflow: hidden;

}

.filter-group .filter-holder>div>div{
    padding-left: 5px;

    box-sizing: border-box;
    position: relative;
    margin: 0 auto;
    width: 100%;
}

.filter-group .filter-element{
    padding-block: 5px;
    position: relative;

    border: 0;
    margin: 0;

    font-size: 1rem;
    line-height: 1.3rem;
    font-weight: 400;
    font-family: var(--default-font-family);
}

/* .filter-group .filter-element>input{
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    opacity: 0;
    inset-block-start: 0;
    inset-inline-start: 0;
    border: 0;
    margin: 0;

    color: #1a1a1a;
} */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;

    inset-block-start: 0;
    inset-inline-start: 0;
    opacity: 0;
}

.filter-group .filter-element>label{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: nowrap;
    
    list-style-type: none;
    height: initial;

    gap: 8px;
    padding: 0;
    margin: 0;
    
    cursor: pointer;
}

.filter-group .filter-element>label>:first-child{
    height: 20px;
    width: 20px;
    background-color: #fff;
    border: 1px solid #868686;
    border-radius: 4px;

    position: relative;
    color: #fff;

    box-sizing: border-box;
    flex-shrink: 0;
    transition: 0.12s cubic-bezier(0.2,0,0.4,0.8);
    transition-property: background-color, border-color;
}

.filter-group input[type="checkbox"]:checked ~ label>:first-child{
    border-color: var(--primary-color);
    background-color: var(--primary-color);
}


.filter-group .filter-element>label>span>span{
    position: absolute;
    left: 50%;
    inset-block-start: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.12s cubic-bezier(0.2,0,0.4,0.8);

    display: inline-block;
    fill: currentcolor;
    height: 16px;
}

.filter-group input[type="checkbox"]:checked ~ label>span>span{
    opacity: 1;
}

.filter-group .filter-element>label>span>span>svg{
    display: inline-block;
    vertical-align: top;
    height: 100%;
    width: auto;
}

.filter-group .filter-element>label>:last-child{
    flex-shrink: 1;
    flex-basis: 100%;
    flex-grow: 1;
    cursor: pointer;
}

.filter-group .filter-element>label>div{
    font-size: 1rem;
    line-height: 1.3rem;
    font-weight: 400;
    font-family: var(--default-font-family);

    color: #1a1a1a;
    cursor: pointer;
}

.filter-group .filter-element>label>span>div>div{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.filter-group .filter-element>label>div>div>div{
    font-size: 16px;
    font-family: var(--default-font-family);
    display: inline;
}

.filter-group .filter-element>label>div>div>span{
    margin-left: 4px;
    display: inline;
    color: #595959;
    unicode-bidi: plaintext;
    
    font-size: 1rem;
    line-height: 1.2rem;
    font-weight: 400;
    font-family: var(--default-font-family);
    

}



hr{
    background-color: #e7e7e7;
    height: 1px;
    width: initial;
    margin: 0;
    padding: 0;
}

/* SEARCH FILTERS STYLE END-----------------------------------*/

#total-search-count{
    display: flex;
    justify-content: space-between;
    padding-inline: 8px 13px;
    
    max-width: 100%;
}

div.SZAMSIKIDOM>div>button{
    padding-inline: 10px;
    padding-block: 5px;
    border: 1px solid #868686;
    border-radius: 5px;

    transition: 0.12s cubic-bezier(0.2,0,0.4,0.8);
    transition-property: background-color, color;

    text-align: center;
}

div.SZAMSIKIDOM>div>button:hover, div.SZAMSIKIDOM>div>button:focus{
    background-color: black;
    color: white;
}

div.SZAMSIKIDOM #variable_holder, 
div.SZAMSIKIDOM #evalution_results{
    display: flex;
    flex-direction: column;

    gap: 10px;

    margin-block: 20px;
}

div.SZAMSIKIDOM #variable_holder>div, 
div.SZAMSIKIDOM #evalution_results>div{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}

::view-transition-old(root),
::view-transition-new(root),
::view-transition-group(root),
::view-transition-old(right-container-with-detailed),
::view-transition-new(right-container-with-detailed),
::view-transition-group(right-container-with-detailed){
  animation: none;
}

@media screen and (min-width: 500px) {
    .right-container.big-view{
        position: absolute;

        top: 0;
        right: 5px;
        left: 0;
        bottom: 0;

    }

    .inner_header>nav>img{
        display: none;
    }
}


@media only screen and (max-width: 950px) and (min-width:501px){
    div.left-sidebar-content, header .image_holder{
        display: none;
    }

    div.middle-container{
        margin-left: var(--gap-between-sidebar-and-main);
    }

    header nav>.title>p{
        display: none;
    }

    .category{
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}


@media only screen and (max-width: 500px){
    header nav>.title>p{
        display: none;
    }

    header nav>.title{
        justify-content: center;
    }

    html{
        position: static;
    }

    .inner_header>nav h1{
        white-space: nowrap;
        font-size: clamp(1.2rem, 6dvw, 1.8rem);
    }

    body{
        display: block;
        flex-direction: column;
        max-height: unset;
        overflow-y: visible;
        /* height: fit-content; */
    }

    main{
        padding-right: 0;
    }

    .scrollable{
        overflow-y: visible;
    }

    .table{
        margin-top: calc(var(--category-element-height) - var(--navbar_size) / 2);
    }


    .detailed>.table>div.table-row:has(.table-main-header-holder){
        position: fixed;
        top: calc(var(--navbar_size) / 2 + var(--navbar_bottom_margin));
        left: 0;
        right: 0;

        padding-inline: var(--gap-between-sidebar-and-main);

        grid-template-columns: 0% 100% 0%;

        z-index: 6;
    }

    .table-main-header-holder{
        height: fit-content;
        padding-block: 10px;
        margin-inline: 0;
    }

    header #current_path{
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;

        inset-block-start: 0;
        inset-inline-start: 0;
        opacity: 0;
    }

    header #current_path li::after{
        all: unset;
    }

    /* header #current_path li{
        display: none;
    } */

    /* header #current_path li[aria-current="page"]{
        display: block;
        width: 100%;
        text-align: center;
        font-size: 1.4rem;
        background-color: var(--table-header-color);
        color: white;
        height: 100%;
    } */



    footer{
        position: static;
        margin-bottom: var(--mobile_navbar_height);
        margin-top: var(--footer_margin_top_on_mobile);
        padding-bottom: 5px;
        transform: unset;
        height: fit-content;
        /* margin-top: 30px; */
        min-height: unset;
        padding-bottom: 10px;
    }

    footer p{
        font-size: 1rem;
        line-height: 1rem;
        padding: 2px;
    }

    footer:hover{
        transform: unset;
    }

    footer:hover>div{
        transform: unset;
    }

    footer>div{
        transform: unset;
        height: fit-content;
    }

    footer>div>div{
        flex-direction: column;
    }

    .temporary{
        display: none;
    }


    header{
        position: fixed;
        top: 0;
    }

    header>div>.inner_header{
        /* padding-right: var(--gap-between-sidebar-and-main); */
        padding-inline: 5px;
    }

    header .icons>#home_nav_button, header .icons>#profile_nav_button{
        display: none;
    }

    .original-data-column, #original_display{
        display: none;
    }

    .mertvalto_data{
        display: flex;
        flex-direction: column;
        justify-content: end;
    }

    .mobile_navbar{
        display: flex;
        height: var(--mobile_navbar_height);
        padding: 5px;

    }

    div.main-container{
        margin-top: calc(var(--navbar_bottom_margin) + var(--navbar_size));

        width: 100%;
        padding-inline: var(--gap-between-sidebar-and-main);
        max-height: 100%;

        height: fit-content;

    }

    /* div.main-container *{
        overflow-y: visible;
    } */

    div.middle-container, div.right-container{
        max-height: unset;
        height: fit-content;

    }

    .category{
        grid-template-columns: 1fr;
    }


    main{
        display: block;
        /* grid-template-columns: 1fr; */
        min-height: calc(100dvh - var(--navbar_bottom_margin) - var(--navbar_starting_height) - var(--mobile_navbar_height));
    }

    .content{
        padding-right: 0;
    }

    .custom-scrollbar{
        display: none;
    }

    nav[aria-label='Pagination']{
        width: 100%;

        position: fixed;
        bottom: var(--mobile_navbar_height);

        padding: 5px;
    }


    div.left-sidebar-content, header .image_holder {
        z-index: 5;
        translate: -110% 0;
        background-color: white;
        transition: translate 1s;
    }

    header .image_holder{
        position: absolute;
    }

    div.left-sidebar-content{
        position: fixed;
        top: calc(var(--navbar_size));
        padding-top: var(--navbar_bottom_margin);
        left: 0;
    }

    div.left-sidebar.open div.left-sidebar-content, body:has(div.left-sidebar.open) header .image_holder{
        translate: 0;

    }
    div.left-sidebar{
        position: fixed;
    }


    div.left-sidebar.open  {
        width: unset;
        top: var(--navbar_size);
        bottom: 0;
        left: 0;
        right: 0;
    }


    .search{
        /* flex-direction: column; */
        grid-template-columns: 1fr;
    }

    .left_search_sidebar{
        width: 100%;
        max-width: 100%;
    }

    #search_bar{
        width: 100%;
        max-width: 100%;
    }


    /* SHOWS ONLY THE LAST PART (HOPEFULLY) */
        body:not(:has(.detailed)) .middle-container, .middle-container:has(.detailed), .right-container:has(.detailed){
            display: block;
        }

        div.middle-container, div.right-container{
            display: none;
        }


    @keyframes fade-in {
    from { opacity: 0; }
    }

    @keyframes fade-out {
    to { opacity: 0; }
    }

    @keyframes slide-from-right {
    from { transform: translateX(60%); }
    }

    @keyframes slide-to-left {
    to { transform: translateX(-60%); }
    }

    @keyframes slide-from-left {
    from { transform: translateX(-60%); }
    }

    @keyframes slide-to-right {
    to { transform: translateX(60%); }
    }

    header{
        view-transition-name: header;
    }

    html:active-view-transition-type(next, prev){
        :root{
            view-transition-name: none;
        }

        div.right-container:has(.detailed){
            view-transition-name: right-container-with-detailed;
        }
    }

    html:active-view-transition-type(next) {

        &::view-transition-old(right-container-with-detailed) {
            z-index: -1;
            animation: 210ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
            300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
        }

        &::view-transition-new(right-container-with-detailed) {
            animation: 210ms cubic-bezier(0, 0, 0.2, 1) both fade-in,
                300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
        }

    }

    html:active-view-transition-type(prev) {
        &::view-transition-old(right-container-with-detailed) {
            z-index: -1;
            animation: 210ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
            300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right;
        }

        &::view-transition-new(right-container-with-detailed) {
            animation: 210ms cubic-bezier(0, 0, 0.2, 1) both fade-in,
                300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left;
        }

    }

}