/* FONT STILL MISSING - UPLOAD AND EMBED FONT */


:root {
    --text_color:   #07773D;
    --shade:        #e0e0e0;
    --shade_button: #dadada;
    --background:   #F8F8F8;
    --name_color:   #F38606;
    --effect_color: #68A0D0;
    --taste_color:  #1D5596;
    --flavor_color: #6FBF28;
    
    --button_text:  #07773D;
    --button_background: #cde7b5;
    --select_text_color: #333;
    --text_shadow: 0 0.2em 0.2em var(--shade);
    --button_text_shadow: 0 0.2em 0.2em #b5cc9f;
    
    --box_shadow:       0em 0.3em 0.3em 0 var(--shade);
    --box_shadow_hover: 0em 0.3em 0.3em 0.3em var(--shade);
    
    --box_shadow_complex: 0em 0em 0.5em 0.8em var(--background), 
        0em 0em 0.4em 1em var(--shade), 
        0em 0em 0.5em 2em var(--background),
        0em 0em 0.5em 2em var(--shade);
    
    --box_shadow_complex_hover: 0em 0em 0.5em 1.3em var(--background), 
        0em 0em 1em 1.6em var(--shade), 
        0em 0em 1em 2.8em var(--background),
        0em 0em 1.5em 2.8em var(--shade);
    
    --box_shadow_complex_selector: 0em 0em 0em 0em var(--background),
        /*0.5em 1.3em 1em 0em var(--background),*/
        0em 0.2em 0.4em 0.4em var(--shade);
    
    --box_shadow_complex_selector_focus: 0em 0.1em 0.5em 0.8em var(--background),
        /*0.5em 1.3em 1em 0em var(--background),*/
        0em 0.1em 0.4em 1em var(--shade);
    
    --box_shadow_button:       0em 0.1em 0.3em 0 var(--shade_button);
    --box_shadow_button_hover: 0em 0.1em 0.1em 0 var(--shade_button);
}

body, html {
	background-color: var(--background);
    font-weight: bold;
    font-family: arial;
    color: var(--text_color);
}

body, html,
.floating_pdf_export,
.floating_pdf_export * {
    font-family: Arial;
}



.filter_container {
    position:   relative;
    display:    flex;
    justify-content: center;
    align-items:center;
    height:     50vh;
	flex-flow:	column;
}
.filter_container * {
    user-select: none;
}



.button_container {
    display: flex;
    justify-content: center;
}
.selection_showing .button_container {
    opacity: 0.1;
    filter: blur(3px);
}
.button {
    width: 8em;
    height: 8em;
    line-height: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8em;
    margin-left: 3.5em;
    margin-right: 3.5em;
    cursor: pointer;
    flex-flow: column nowrap;
    background-color: #FFF;
    position: relative;
    
    box-shadow: var(--box_shadow_complex);
   
    transition: box-shadow 0.7s;
}
.button::before {
    content: '';
    position: absolute;
    border-radius: inherit;
    width: inherit;
    height: inherit;
    
    box-shadow: var(--box_shadow);
    
    transition: inherit;
}
.button:hover {
    
    box-shadow: var(--box_shadow_complex_hover);
}
.button:hover::before {
    box-shadow: var(--box_shadow_hover);
}
.h1 {
    line-height: 120%;
    text-align: center;
    font-size: 1.2em;
    text-transform: uppercase;
    height: 2.4em;
    text-shadow: var(--text_shadow);
}
.button .h1 > span {
    display: block;
}
.button:nth-of-type(1) .h1,
.selector:nth-of-type(2) .h1 {
    color: var(--name_color);
}
.button:nth-of-type(2) .h1,
.selector:nth-of-type(3) .h1  {
    color: var(--effect_color);
}
.button:nth-of-type(3) .h1,
.selector:nth-of-type(4) .h1 {
    color: var(--taste_color);
}
.button:nth-of-type(4) .h1,
.selector:nth-of-type(5) .h1 {
    color: var(--flavor_color);
}
.button.has_selected .selection {
    line-height: 120%;
    text-align: center;
    height: 4.7em;
    overflow-y: auto;
    font-size: 0.73em;
    
    width: 135%;
    margin: 0% -35%;
    clip-path: circle(50% at 50% 10%);
    
    color: var(--select_text_color);
}
.button .selection > *::before {
    content: attr(filter_value);
}


.selection_container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    display: flex;
    flex-flow: column nowrap;
}
.selection_box {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
   /* background-color: rgba( 255, 255, 255, 0.1);
    backdrop-filter: blur(4px);*/
    flex-grow: 1;
    transform-style: preserve-3d;
    cursor: grab;
    position: relative;
}
.selector {
    position: absolute;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    
    background-color: #FFF;
    color: var(--select_text_color);
    margin: 0.5em;
    padding: 0.5em;
    height: 15em;
    width: 11em;
    padding-bottom: 0;
    
    border-radius: 2em;
    
    box-shadow: var(--box_shadow_complex_selector);
    
    transition: box-shadow 1.3s;
}
.selection_index0 .selector:nth-of-type(2) {
    box-shadow: var(--box_shadow_complex_selector_focus);
}
.selection_index1 .selector:nth-of-type(3) {
    box-shadow: var(--box_shadow_complex_selector_focus);
}
.selection_index2 .selector:nth-of-type(4) {
    box-shadow: var(--box_shadow_complex_selector_focus);
}
.selection_index3 .selector:nth-of-type(5) {
    box-shadow: var(--box_shadow_complex_selector_focus);
}
.spinning .selector {
    box-shadow: var(--box_shadow_complex_selector) !important;
}
.selector::before {
    content: '';
    position: absolute;
    border-radius: inherit;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: var(--box_shadow);
}
.selector .h1 {
    position: absolute;
    width: calc( 100% + 4em );
    top: -1em;
    margin: 0 -2em;
}
.selection_box ul {
    margin: 0;
    padding: 0;
    margin-top: 1em;
    max-height: 12.5em;
    overflow-y: auto;
    overflow-x: hidden;
    text-align: center;
    list-style-type: none;
    
    display: flex;
    flex-flow: column nowrap;
}

.selection_index0.selection_showing .selection_box:not(.spinning) .selector:nth-of-type(2) ul,
.selection_index0.selection_showing .selection_box:not(.spinning) .selector:nth-of-type(2) ul > *,
.selection_index1.selection_showing .selection_box:not(.spinning) .selector:nth-of-type(3) ul,
.selection_index1.selection_showing .selection_box:not(.spinning) .selector:nth-of-type(3) ul > *,
.selection_index2.selection_showing .selection_box:not(.spinning) .selector:nth-of-type(4) ul,
.selection_index2.selection_showing .selection_box:not(.spinning) .selector:nth-of-type(4) ul > *,
.selection_index3.selection_showing .selection_box:not(.spinning) .selector:nth-of-type(5) ul,
.selection_index3.selection_showing .selection_box:not(.spinning) .selector:nth-of-type(5) ul > * {
    pointer-events: visible; 
    z-index: 500;
}
.selection_box .long_list ul {
    max-height: 8.5em;
}
.selection_box .search {
    display: none;
    line-height: 0;
    height: 1.5em;
    margin-top: 1em;
    border-radius: 1em;
    box-shadow: inset 0.2em 0.2em 0.3em rgba(0,0,0,0.2);
    
    position: relative;
    
    align-items: center;
}
.selection_box .long_list .search {
    display: flex;
}
.selection_box .search input {
    border: none;
    background: transparent;
}
.selection_box .search .looking_glass {
    position: absolute;
    right: 6px;
    left: auto;
    cursor: pointer;
}
/*
.looking_glass::before {
    content: "\1F50D";
}*/
.selection_box .search input[type="text"] {
    width: calc( 100% - 2em);
    margin: 0.3em 1em 0em;
    color: var(--select_text_color);
    font-weight: bold;
}

.hide_scrollbar {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}
.hide_scrollbar::-webkit-scrollbar {
    display: none;  /* Safari and Chrome */
}
.selection_box li {
    cursor: pointer;
    border-radius: 0.4em;
    display: inline-block;
    padding: 0.1em;
    margin: 0.1em 0;
    filter: brightness(100%);
    transition: filter 0.3s;
}

.selection_box li.selected {
    color: #FFF;
}
.selection_box li:hover {
    filter: brightness(150%);
}

.selection_box [filter_target="name"] li.selected {
    background-color: var(--name_color);
}
.selection_box [filter_target="effect"] li.selected {
    background-color: var(--effect_color);
}
.selection_box [filter_target="taste"] li.selected {
    background-color: var(--taste_color);
}
.selection_box [filter_target="flavor"] li.selected {
    background-color: var(--flavor_color);
}

.arrow_box {
    height: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    transition: color 0.7s;
    z-index: 500;
    position: relative;
}
.selection_index0 .arrow_box {
    color: var(--name_color);
}
.selection_index1 .arrow_box {
    color: var(--effect_color);
}
.selection_index2 .arrow_box {
    color: var(--taste_color);
}
.selection_index3 .arrow_box {
    color: var(--flavor_color);
}
.arrow_box > * {
    cursor: pointer;
    padding: 0.3em;
    line-height: 0;
    text-shadow: var(--text_shadow);
}
.arrow_box .check {
    order: 2;
    position: relative;
    top: 1.8em;
}
/*
.arrow_box .check::before {
   content: '\01F5F8';
   font-weight: bold;
}
*/
.arrow_box .forward {
    order: 3;
}
/*
.arrow_box .forward::before {
   content: '\01F892';
    font-size: 1.8em;
   font-weight: bold;
}
*/
.arrow_box .backward {
    order: 1;
}
/*
.arrow_box .backward::before {
   content: '\01F890';
    font-size: 1.8em;
   font-weight: bold;
}
*/



.selection_showing .start,
.result_showing .start,
.start {
	display: none;
}
.selected_items:not(.selection_showing, .result_showing) .start {
	display: block;
	margin-top: 3em;
}


.hidden,
.empty_result .export.pdf,
.empty_result .result_container.filter_result .container {
    display: none !important;
}

.empty_result .noresult {
    display: block !important;
}


/* RESULT CSS */

.filter_result {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    
    flex-flow: column nowrap;
    color: var(--select_text_color);
}
.filter_result .container {
    display: table;
    font-weight: normal;
    border-spacing: 4px 0;
    
    color: #000;
    background-color: #FFF;
    
    padding: 20px;
}
.filter_result .row {
    display: table-row;
}
.filter_result .cell {
    display: table-cell;
    padding: 0.6em 1.2em;
    position: relative;
    text-align: center;
	
    white-space: normal;
	hyphens: auto;
}
.filter_result .cell * {
    white-space: normal;
	hyphens: auto;
}




.filter_result .cell.taste {
    width: 12.14%;
}
.filter_result .cell.flavor {
    width: 17.39%;
}
.filter_result .cell.taste > *,
.filter_result .cell.flavor > * {
	display:block;
}

.filter_result .cell.taste > div[strength="1"] {
    background-color: #bed6eb;
}
.filter_result .cell.taste > div[strength="2"] {
    background-color: #85b8f2;
}
.filter_result .cell.taste > div[strength="3"] {
    background-color: #014c72;
}



.filter_result .container .row .cell::after {
    content: '';
    display: block;
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0.5em;
    width: calc(100% - 1em);
    height: 2px;
    background-color: #FFF;
}
.filter_result .container .row:last-of-type .cell {
    padding-bottom: 5em;
}
.filter_result .container .row:last-of-type .cell::after {
    bottom: 4.5em;
}
.filter_result .container .row .cell:first-child::after {
    height: 1px;
    background-color: var(--text_color);
}

.cell.taste[strength="1"] {
    background-color: #E7F0F8;
}
.cell.taste[strength="2"] {
    background-color: #D2E5F8;
}
.cell.taste[strength="3"] {
    background-color: #A4C0CC;
}
.cell.flavor[strength="1"] {
    background-color: #D4ECC0;
}
.cell.flavor[strength="3"] {
    background-color: #B8CEBB;
}
.cell.flavor[strength="5"] {
    background-color: #A5B8AB;
}

.filter_result .container:not(:first-child) .row:nth-of-type(2) .cell {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.filter_result .container .row:first-child .cell,
.filter_result .container .header+.row .cell {
    border-top-left-radius: 0.5em;
    border-top-right-radius: 0.5em;
}
.filter_result .container .row:last-child .cell {
    border-bottom-right-radius: 0.5em;
    border-bottom-left-radius: 0.5em;
}





.filter_result .header .cell,
.filter_result .group .cell {
    text-align: center;
    font-size: 0.8em;
    color: #999;
    
    background-color: transparent !important;
    height: 1em;
}
.filter_result .group .cell {
    font-size: 2em;
    text-shadow: var(--text_shadow);
    color: var(--text_color);
    font-weight: bold;
    overflow: visible;
    text-align: center;
    height: 2em;
}
.filter_result .cell.name {
    text-align: right;
}
.filter_result .group .cell > span {
    display: block;
    text-align: center;
    width: calc(100% + 6em);
    margin: 0 -3em;
    
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    
    position: relative;
}
.filter_result .group .cell:nth-of-type(3) > span,
.filter_result .group .cell:nth-of-type(6) > span {
    background-color: #fff;
    z-index: 12;
}
.filter_result .group .cell:nth-of-type(2) > span,
.filter_result .group .cell:nth-of-type(5) > span,
.filter_result .group .cell:nth-of-type(4) > span,
.filter_result .group .cell:nth-of-type(7) > span {
    border-top: 1px solid var(--text_color);
    position: relative;
    width: 100%;
    margin: 0;
    top: 0.9em;
}
.filter_result .group .cell:nth-of-type(2) > span::before,
.filter_result .group .cell:nth-of-type(5) > span::before,
.filter_result .group .cell:nth-of-type(4) > span::after,
.filter_result .group .cell:nth-of-type(7) > span::after {
    content: '';
    height: 1em;
    position: absolute;
    top: 0;
    border-left: 1px solid var(--text_color);
}
.filter_result .group .cell:nth-of-type(2) > span::before,
.filter_result .group .cell:nth-of-type(5) > span::before {
    left: 0;
}
.filter_result .group .cell:nth-of-type(4) > span::after,
.filter_result .group .cell:nth-of-type(7) > span::after {
 right: 0;   
}
.filter_result .group .cell:nth-of-type(6) > span {
    position: relative;
    top: 1.2em;
}

.filter_result .group .cell:nth-of-type(3) .set {
    display: flex;
    flex-flow: column nowrap;
}
.filter_result .group .cell .groupset {
    display: block;
}
.filter_result .group .cell .groupset:nth-of-type(1) {
    order: 2;
}
.filter_result .container .row.group .cell::after,
.filter_result .container .row.header .cell::after {
    content: none;
}


.filter_container input[type="button"],
.filter_result input[type="button"]{
    padding: 0.6em 0.9em;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1.6em;
    margin: 0.8em;
    
    cursor: pointer;
    border-radius: 10em;
    border: none;
}

/* BUGGED IN CHROME - NOT USEABLE
.no_pointer_children * {
    pointer-events: none;
}
.no_pointer_children .dragplane {
    pointer-events: visible;
}
*/

/* PDF CONTAINER */
.floating_pdf_export {
	position: absolute;
	top: 0;
	left: 0;
	
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	height: 100%;
    width: 100%;
    overflow-y: auto;
}
.pdf_html_container {
	position: absolute;
	top: 0;
	left: 0;
	
	width: 1024px;
	background-color: #FFF;
	/* background-image: url("img/pdf_background.jpg"); */
	background-size: 100% auto;
	background-repeat: repeat-y;
	
	font-size: 0.75em;
}
.pdf_html_container * {
    box-sizing: border-box;
}
.pdf_html_container .table_container {
	height: calc(1024px * (29.7 / 21));/* DINA4 */
    min-height: calc(1024px * (29.7 / 21));/* DINA4 */
	width: 100%;
}
.pdf_html_container .table_container.no_stretch {
	height: auto;
    min-height: auto;
}
.datebox {
	position: absolute;
	top: 2px;
	left: auto;
	right: 2px;
    display: block;
    z-index: 80;
    color: #d3d3d3;
}
.pdf_html_container .table_container:last-child {
    min-height: auto;
    height: auto;
}
.pdf_html_container .cell .set {
    white-space: nowrap;
    hyphens: none;
}



/* SETTINGS */
#settings_gear {
 display:none;
}
.local_filter_data .settings .delete_backup::after {
    content: '\1F4BE';
}
.online_filter_data .settings .delete_backup::after {
    content: '\1F4E5';
}
.filter_data_loading_error .settings .delete_backup::after {
    content: '\26D4';
}

.settings {
    border: #DDD;
    background-color: #FFF;
    position: absolute;
    top: 0.2em;
    right: 0.2em;
    z-index: 599;
    border-radius: 3px;
    padding: 0.2em;
    
    display: none; /* DEACTIVATED AS NOT REQUESTED */
    /* display: flex; */
    flex-flow: column wrap;
    align-items: flex-end;
}
.settings label[for="settings_gear"] {
    cursor: pointer;
    line-height: 1;
    text-align: center;
    display: inline-block;
    font-size: 1.8em;
}
.settings label[for="settings_gear"]::before {
    content: "\2699";
    font-weight: bold;
    color: rgb( 155, 205, 255 );
    width: 1em;
}
.settings #settings_gear:checked~label[for="settings_gear"]::before {
    content: "\2715";/* X */
    color: red;
}
.settings .container {
    margin: 0.2em;
}
.settings .container:first-of-type {
    margin-top: 1em;
}
.settings .container:last-of-type {
    margin-bottom: 0.3em;
}
.settings .delete_backup {
    display: none;
    cursor: pointer;
}
.settings #settings_gear:checked~* {
    display: block;
}

*[usage="popup"] {
    position: fixed;
    width: 100%;
    height: 100%;
    
    backdrop-filter: blur(3px);
    background-color: rgba(0,0,0,0.2);
    
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
}
*[usage="popup"] > * {
    max-width: 300px;
    padding: 2em;
    background: #FFF;
    color: #000;
    border-radius: 1.2em;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    position: relative;
}
*[usage="popup"] input[type="button"] {
    cursor: pointer;
    margin: 0.2em;
}
*[usage="popup"] .close {
    cursor: pointer;
}
*[usage="popup"] .close::before {
    content: "\2715";/* X */
    color: red;
    
    font-size: 2em;
    position: absolute;
    top: -0.5em;
    right: -0.5em;
    
    background: #fff;
    border-radius: 0.6em;
    width: 1.5em;
    height: 1.5em;
    line-height: 1.5em;
    text-align: center;
}




input[type="button"] {
    color: var(--button_text);
    background-color: var(--button_background);
    text-shadow: var(--button_text_shadow);
    
    box-shadow: var(--box_shadow_button);
    
    transition: box-shadow 0.7s, padding 0.3s;
}
input[type="button"]:hover {
    box-shadow: var(--box_shadow_button_hover);
    padding-left: 2em;
    padding-right: 2em;
}

input {
    outline: none;
}