/*-- FUNCTIONALITY BEGIN --*/
div[hidden], span[hidden] {display: none !important;}

.card {position: fixed !important; top: 0; bottom: 0; left: 0; right: 0; display: flex;}
#qa, #content {flex: 1 1; display: flex; flex-flow: column nowrap; overflow: auto; margin: 0px;}

#fc2-title, #title {flex: 0 0; }
#fc2-scroll-area {flex: 1 1; display: flex; flex-flow: column nowrap; overflow: auto; position: relative;}
    #fc2-content {flex: 1 1; display: none;}
    #fc2-content-placeholder {flex: 1 1;}
    #fc2-additional {flex: 0 0; display: flex; flex-flow: column nowrap;}
        .additional-header {cursor: pointer; display: block;}
        .additional-content {display: block;}
        .additional-content * {pointer-events: none;}
#search-panel {z-index: 3; display: flex; flex-flow: row nowrap; margin: 2px; border-top: 1px solid var(--border); padding: 2px;}
    #search-field {flex: 1 1; height: 20px;}
    #search-btn {flex: 0 0; margin-left: 5px; padding: 2px; border: 1px solid var(--border); border-radius: 5px; font-size: 12px; line-height: 20px; background-color: var(--button-bg);}
    #search-btn:active {background-color: var(--fg-faint);}
#log-panel {z-index: 3; flex: initial; display: flex; flex-flow: column nowrap; height: 100px;
    font-size: 10px; background-color: #80000080; word-wrap: break-word;
    white-space: pre-wrap; overflow: auto; margin: 0px;}
#fc2-show-all {z-index: 3; flex: 0 0; cursor: pointer;}

#fc2-footer {z-index: 3; flex: 0 0;}
	#fc2-legend-footer {display: flex; flex-flow: row nowrap;}
		.fc2-legend-entry, #fc2-legend-entry {flex: 1 1;}
	#fc2-flag-footer {display: flex; flex-flow: row nowrap}
		.fc2-flag {flex: 1 1 100%;}

#nav-toggle-all {position: fixed; z-index: 2; top: 0; left: 0; right: 0;}
#nav-prev-cloze {position: fixed; z-index: 2; top: 0; left: 0; bottom: 0;}
#nav-next-cloze {position: fixed; z-index: 2; top: 0; right: 0; bottom: 0;}
.search-matches {position: absolute; z-index: 1; vertical-align: top;}
.search-match {position: absolute; z-index: 1; vertical-align: top;}
/*-- FUNCTIONALITY END --*/

/*-- CONFIGURATION BEGIN --*/
/* =======================================================
Look and feel configurations, changing/deleting will not break functionality (although incoherrent styling will make things look strange).
========================================================= */

/* NAVIGATION AREA CONFIGURATION ======================================
Top bar navigation area configuration, increase size by increasing height */
.nav-area-top
{ height: 30px; cursor: pointer; background-color: transparent; }

/* Top bar navigation area configuration, increase size by increasing width */
.nav-area-side
{ width: 30px; cursor: pointer; background-color: transparent; }

/* CARD GENERAL STYLING =========================================== */
.card
{ font-family: Arial; font-size: 20px;  color: var(--fg); background-color: var(--canvas-elevated); margin: 0px; }


/* TITLE FIELD STYLING ============================================= */
#fc2-title
{ border-bottom: solid var(--fg) 3px; text-transform: uppercase; font-weight: bold; margin: 10px 10px 0px 10px; }


/* TEXT FIELD STYLING ============================================= */
#fc2-content
{ margin: 10px; }


/* CLOZE STYLING =============================================== */
/* Clozes base look and feel, valid on front and back */
span.cloze, span.cloze-inactive
{ margin: 1px; padding : 5px; vertical-align: middle; min-width: 100px; min-height: 0.5em;
border: 1px solid var(--border-subtle); display: block; }

/* Display form and style of hide-state clozes (front and back), change to "inline" for a continuous line */
span.cloze.hide, span.cloze-inactive.hide
{ display: inline-block; }

/* Display form and style of active clozes on front */
.front span.cloze
{ background-color: #d8555580; }

/* Display form and style of active clozes on back */
.back span.cloze
{ background-color: #76b69d80; }

/* Display form and style of inactive clozes on front and back */
.front span.cloze-inactive, .back span.cloze-inactive
{ background-color: var(--canvas); }

/* SEARCH STYLING =============================================== */
/* Style search matches */
.search-matches {background-color: var(--selected-bg); color: var(--fg-faint);}
.search-match {background-color: var(--selected-bg);}

/* SHOW ALL BUTTON ============================================== */
/* Show all button/bar styling (and if visible or not) */
#fc2-show-all-btn
{ display: none;  background-color: var(--canvas); color: var(--fg); text-align: center;
text-transform: uppercase; font-size: 15px; font-weight: bold; padding: 5px;
border-bottom: 1px solid var(--fg); }

/* ADDITIONAL FIELD STYLING ========================================= */
/* Look and field of the additional field area */
#fc2-additional
{ border-top: 3px solid var(--fg); margin: 0px 10px 0px 10px; }

/* Additional field title look and feel */
.additional-header
{ padding-top: 5px; font-weight: bold; text-transform: uppercase; display: block; }

/* Additional field content look and feel */
.additional-content
{ margin-bottom: 10px; border: 1px solid; background-color: var(--canvas); padding: 5px; }


/* SYMBOL LEGEND FOOTER STYLING ===================================== */
/* Base symbol legend look and feel */
.fc2-legend-entry
{text-align: center; text-transform: uppercase; font-size: 10px; font-weight: bold; vertical-align: center; background-color: #465A65; color: white; border-left: 1px solid white;}

/* Specific styling of first entry/div (to avaid a white border on left in default styling) */
.fc2-legend-entry:first-child
{ border-left: unset; }

/* Specific styling of first letter in each entry (make symbol bigger) */
.fc2-legend-entry:first-letter
{ font-size: 150%; }


/* FLAG LEGEND FOOTER STYLING ======================================= */
/* Flag legend general look and feel */
#fc2-flag-footer
{text-align: center; text-transform: uppercase; font-size: 10px; font-weight: bold;
color: black;}

/* Red flag legend look and feel, set content to whatever value that should be displayed */
#fc2-flag-red, #fc2-flag-red::before
{ background-color: #FD7C6E; color: black; content: "Incorrect"; }

/* Orange flag legend look and feel, set content to whatever value that should be displayed */
#fc2-flag-orange, #fc2-flag-orange::before
{ background-color: #FAA76C; content: "Duplicate"; }

/* Green flag legend look and feel, set content to whatever value that should be displayed */
#fc2-flag-green, #fc2-flag-green::before
{background-color: #81A984; content: "Formating"; }

/* Blue flag legend look and feel, set content to whatever value that should be displayed */
#fc2-flag-blue, #fc2-flag-blue::before
{ background-color: #ADB9CA; content: "Rephrase"; }

/* Pink flag legend look and feel, set content to whatever value that should be displayed */
#fc2-flag-pink, #fc2-flag-pink::before
{ background-color: #D89B9B; content: "Discard"; }

/* Turquoise flag legend look and feel, set content to whatever value that should be displayed */
#fc2-flag-turquoise, #fc2-flag-turquoise::before
{ background-color: #33B3A6; content: "Consolidate"; }

/* Purple flag legend look and feel, set content to whatever value that should be displayed */
#fc2-flag-purple, #fc2-flag-purple::before
{ background-color: #A64CA6; content: "Mark"; }
/*-- CONFIGURATION END --*/


/* MISCELLANEOUS STYLING, HAS NOTHING TO DO WITH FLEXIBLE CLOZE ============== */
/* Highlight other text runs */
code, kbd, var, samp, tt
{ background-color: #80808080; }

/* reduce whitespace and indents for lists */
li
{ margin: 0; }
ul, ol
{ padding: 0em 0em 0em 2em; margin-top: 0.5em; margin-bottom: 0.5em; }

/* Reduce first list indent and spacing when a cloze begins with a list */
span.cloze > ul:first-child, span.cloze-inactive > ul:first-child
span.cloze > ol:first-child, span.cloze-inactive > ol:first-child
span.cloze > br:first-child + ul, span.cloze-inactive > br:first-child + ul,
span.cloze > br:first-child + ol, span.cloze-inactive > br:first-child + ol
{ padding: 0em 0em 0em 1em; margin-top: 0em; margin-bottom: 0em; }

/* Reduce list indents and spacing when in a table */
td ul, td ol, td ul ul, td ol ol, td ul ul ul, td ol ol ol
{ padding: 0em 0em 0em 1em; margin-top: 0em; margin-bottom: 0em; }

/* Default table formating */
table:not([class]) { border-collapse: collapse; width: 100%; margin-bottom: 20px; margin-top: 5px; }
th:not([class]) { border: 1px solid black; font-weight: bold; text-transform: uppercase; background-color: #80808080; }
td:not([class]) { border: 1px solid black; }

/* Default header formating */
h1, h2, h3, h4, h5, h6 { font-size: 20px; margin: 0px; }
h1:not(:first-child), h2:not(:first-child), h3:not(:first-child), h4:not(:first-child), h5:not(:first-child), h6:not(:first-child) { margin-top: 20px; }
h1 { font-weight: 900; text-transform: uppercase; }
h2 { font-weight: 900; }
h3 { font-weight: 900; font-style: italic; }
h4 { text-decoration: underline; }
h5 { font-style: italic; text-decoration: underline; }
h6 { font-style: italic }

/* Stronger bold weight */
b { font-weight: bolder; }

/* Definition lists formating */
dt { font-weight: bold; }
dd { margin-bottom: 10px; }