/* the main_div is a container for both the suggestions and the results */

#main_div {
	display: flex;
	flex-direction: column;
	align-items: center;
	align-content: space-around;
	width: 100vw;
	min-height: 100%; /* https://stackoverflow.com/questions/8824831/make-div-stay-at-bottom-of-pages-content-all-the-time-even-when-there-are-scrol */
	font-family: Helvetica,Arial,Open-sans,Verdana,sans-serif;
}

#main_div:not(.leidraad_loaded) {
	padding-bottom: 100px; /* when leiddraad is loaded, this causes sticky bar to malfunction */
}


/* suggestions part */

#suggestions_div {
	width: 90%;
	max-width: 1200px;
	margin-top: 20px;
	margin-left: 0;
	border-width: 0; 
	border-radius: 5px;
	color: #000000;
	background-color: #FFFFFF;
	font-size: 1rem;
	min-height: 180px;
	max-height: 999999px; /* https://stackoverflow.com/questions/11289166/chrome-on-android-resizes-font */
}

#suggestions_div a.suggestion_item {
	line-height: 23px;
}

#suggestions_msg {
	padding: 7px;
	min-height: 100px; /* this prevents pagination_pane to move up and down when browsing */
	padding-bottom: 20px;
	color: #000000;
}

/* when many suggestions are given, pagination is needed */

#pagination_pane {
	display: flex;
	justify-content: center;
}

#pagination_pane #first_pagination {
	color: #000000;
	font-size: 90%;
	font-weight: bold;
	background-color: #d9d7cc;
	margin: 3px;
	border-width: 0;
}
#pagination_pane .left_pagination {
	color: #000000;
	font-size: 90%;
	font-weight: bold;
	background-color: #d9d7cc;
	margin: 3px;
	border-width: 0;
}
#pagination_pane .pagination_counter  {
	color: #000000;
	font-size: 90%;
	font-weight: bold;
	background-color: #d9d7cc;
	margin: 3px;
	border-width: 0;
}
#pagination_pane .central_button {
	color: #000000;
	font-size: 90%;
	font-weight: bold;
	background-color: #d9d7cc;
	margin: 3px;
	border-width: 0;
}
#pagination_pane .central_button_active {
	color: #FFFFFF !important;
	font-size: 90%;
	font-weight: bold;
	background-color: #005983 !important;
	margin: 3px;
	border-width: 0;
}
#pagination_pane .right_pagination {
	color: #000000;
	font-size: 90%;
	font-weight: bold;
	background-color: #d9d7cc;
	margin: 3px;
	border-width: 0;
}
#pagination_pane .last_pagination {
	color: #000000;
	font-size: 90%;
	font-weight: bold;
	background-color: #d9d7cc;
	margin: 3px;
	border-width: 0;
}

#pagination_pane .dots {
	display: none;
}

#pagination_pane .dots_active {
	display: inline;
	color: #000000;
	font-size: 90%;
	font-weight: bold;
	background-color: transparent;
	margin: 3px;
	border-width: 0;
}

a.suggestion_link {
	text-decoration: underline;
	text-decoration-style: dotted;
	color: #000000;
}

#did_you_mean_label {
	font-weight: bold;
	color: #005983;
}
#suggestion_label {
	font-weight: bold;
	color: #005983;
}


/* Results div for showing found lemma and paradigms */

#results_div {
	font-size: 1rem;
	width: 90%;
	max-width: 1200px;
	max-height: 999999px; /* https://stackoverflow.com/questions/11289166/chrome-on-android-resizes-font */
	margin-top: 10px;
	margin-bottom: 70px; /* less won't work well on mobile devices */
}



/* results consist of one of more lemmata */

/* a lemma_block contains a lemma_head (with lots of features)  and some paradigm_blocks */

div.lemma_block {
	font-size: 1rem;
	width: 100%;
	max-width: 1200px;
	margin-bottom: 35px;	
	border-color: #999;
	border-radius: 5px;
}
div.lemma_head {
	width: 100%;
	font-size: 1rem;
	min-height: 30px;
	border-radius: 5px;
	padding-left: 7px;
	padding-top: 7px;
	padding-bottom: 5px;
	color: #000000;
	background-color: #d9d7cc;
	display: inline-block; 
}

@media screen and (min-width: 1024px) {
	div.lemma_head {
		font-size: 1rem;
		min-height: 30px;
		border-radius: 5px;
		padding-left: 7px;
		padding-top: 7px;
		padding-bottom: 5px;
		color: #000000;
		background-color: #d9d7cc;
		display: flex; 
		flex-flow: row wrap;
		justify-content: space-between;
	}
}


span.lemma_head_cat {	
	font-size: 0.8rem;
	color: #000000;
}

span.lemma_head_pronounciation {
	font-size: 0.9rem;
	color: #000000;
	overflow-wrap: break-word;
}



div#gramglossdiv {
	display: flex;
}
div#gramdiv {
	width: 50%;
}
div#glossdiv {
	width: 50%;
}
span.lemma_head_gloss {
	font-size: 0.8rem;
	font-style: italic;
	color: #000000;
}
@media screen and (min-width: 1024px) {
	div#gramglossdiv {
		display: flex;
	}
	div#gramdiv {
		min-width: 45%; /* for large labels like 'voorzetsel / achterzetsel / onderschikkend voegwoord' */
	}
	div#glossdiv {
		width: 75%;
		padding-right: 25px; /* prevents long glosses to come too close to 'Zie ook' part */
	}
	span.lemma_head_gloss {
		font-size: 0.8rem;
		font-style: italic;
		color: #000000;
	}
}
span.lemma_head_gloss a {
	font-size: 1rem;
	color: #000000;
}



#zieook_ul {
	margin-top: 0px;
}

.zie_ook_item {   /* for variants, diminutives, word parts */
	font-size: 0.7rem;
	color: #000000;
}

span.zieook_title {  /* main 'Zie ook' label */
	font-size: 0.7rem;
	font-weight: bold;
	color: #000000;
}

.toelichting_title {  /* nuancerende opmerking label */
	font-family: Helvetica,Arial,Open-sans,Verdana,sans-serif;
	font-size: 0.9rem !important;
	font-weight: bold !important;
	color: #000000 !important;
	background-color: #d9d7cc !important;
	border: 1px solid #d9d7cc !important;
}

.toelichting_text {  /* nuancerende opmerking content */
	font-size: 0.7rem;
	color: #000000;
}

.ui-accordion-content {   /* needed to display the nuancerende opmerking content in some accordeon */
	padding: 10px !important;
	border-radius: 5px !important;
	margin-left: 5px !important;
	margin-bottom: 10px !important;
}


div.toelichting {  /* container for nuancerende opmerking both label and content */
	margin-top: 10px;
	margin-right: 15px;
	flex-basis: 100%;
}

@media screen and (min-width: 1024px) {
	
	.zie_ook_item {   /* for variants, diminutives, word parts */
		font-size: 0.9rem;
		color: #000000;
	}
	
	span.zieook_title {  /* main 'Zie ook' label */
		font-size: 0.9rem;
		font-weight: bold;
		color: #000000;
	}
	.toelichting_text {  /* nuancerende opmerking content */
		font-size: 0.9rem;
		color: #000000;
	}
}

span.lemma_head_language_advice {
	font-size: 1rem;
	font-weight: bold;
	float: right;
}
span.lemma_head_language_advice a {
	font-size: 1rem;
	color: #000000;
}

span.lemma_head_external_links {
	font-size: 1rem;
	font-weight: bold;
	float: right;
}
span.lemma_head_external_links a {	
	font-size: 1rem;
	color: #000000;
}

/* a lemma block consists of a lemma_region (left), a zieook_region (right) and a toelichting (bottom) */
#lemma_region {
	flex-basis: 65%;
}
#zieook_region {
	flex-basis: 35%;
}




/* Paradigm */

span.highlight {
	color: #017f76 !important;
}

/* container for the whole collection of paradigm sections */

div.paradigm_blocks {
	max-width: 100%;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
}

/* single section of the paradigm */

div.paradigm_block {
	width: 80%;
	display: inline-block;
	margin-top: 5px;
	background-color: #FEFFFF;	
	border-radius: 5px;
}
div.paradigm_block.infinitief {
	order: 1;
}
div.paradigm_block.tegenwoordige_tijd {
	order: 2;
}
div.paradigm_block.tegenwoordig_deelwoord {
	order: 3;
}
div.paradigm_block.verleden_tijd {
	order: 4;
}
div.paradigm_block.voltooid_deelwoord {
	order: 5;
}
div.paradigm_block.aanvoegende_wijs {
	order: 6;
}
div.paradigm_block.gebiedende_wijs {
	order: 7;
}
div.paradigm_block.grouped {
	display: none;
}
/* inside group */
div.paradigm_block.grouped > div.paradigm_subblock.infinitief {
	display: none;
}
div.paradigm_block.grouped > div.paradigm_subblock.gebiedende_wijs {
	display: none;
}
/* end of inside group */

@media screen and (min-width: 1024px) {
	div.paradigm_blocks {
		max-width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	div.paradigm_block {
		width: 30%;
		display: inline-block;
		margin-top: 5px;
		background-color: #FEFFFF;	
		border-radius: 5px;
	}
	div.paradigm_block.grouped {
		order: 1;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	/* inside group */
	div.paradigm_block.grouped > div.paradigm_subblock.infinitief {
		display: block;
		order: 1;
	}
	div.paradigm_block.grouped > div.paradigm_subblock.gebiedende_wijs {
		display: block;
		order: 2;
	}
	/* end of inside group */
	
	div.paradigm_block.tegenwoordige_tijd {
		order: 2;
	}
	div.paradigm_block.verleden_tijd {
		order: 3;
	}
	div.paradigm_block.aanvoegende_wijs {
		order: 4;
	}
	div.paradigm_block.tegenwoordig_deelwoord {
		order: 5;
	}
	div.paradigm_block.voltooid_deelwoord {
		order: 6;
	}
	/* outside group */
	div.paradigm_block.infinitief {
		display: none;
	}
	div.paradigm_block.gebiedende_wijs {
		display: none;
	}
}


/* if a paradigm block needs a title (like 'infinitief', 'tegenwoordige tijd', etc.), we put it in the paradigm_head */
div.paradigm_head {
	/*border-radius: 5px;*/
	height: 35px;
	padding: 5px;
	padding-left: 10px;
	padding-bottom: 10px;
	margin-bottom: 5px;
	background-color: #FFFFFF;	
	color: #182b49;
	border-bottom: 5px solid #d9d7cc;
}
@media screen and (min-width: 1024px) {
	div.paradigm_head {
		font-size: 90%;
		/*border-radius: 5px;*/
		height: 30px;
		padding: 5px;
		padding-bottom: 0px;
		margin-bottom: 5px;
		background-color: #FFFFFF;	
		color: #182b49;
		border-bottom: 2px solid #d9d7cc;
	}
}

/* a paradigm is arranged in a table */

table body {
	background-color: #FEFFFF;
}

/* in mobile mode, the td's of the paradigm table are deleted, */
/* in such a way that the content of each paradigm row can be left justified */

table body.mobile {
	display: block;
	margin-left: 10px;
}
table body.mobile div {
	display: inline;
}
table body.mobile div.div_hyph {
	padding-left: 5px;
}
table body.mobile td {
	padding-left: 20px;
}
table body.mobile span:not(.nopadding) {
	padding-left: 7px;
}
table body.mobile span.nopadding {
	padding-left: 0px;
}
table body.mobile div.div_label_normal {
	padding-right: 10px;
}
table body.desktop {
	display: none;
}

@media screen and (min-width: 1024px) {
	table body.mobile {
		display: none;
	}
	table body.desktop {
		display: block;
	}
	
	table body.desktop span:not(.nopadding) {
		padding-left: 2px;
	}
	table body.desktop span.nopadding {
		padding-left: 0px;
	}
}

td {
	/*min-width: 200px;*/
	background-color: #FEFFFF;
	white-space: nowrap;
}
@media screen and (min-width: 1024px) {
	td {
		min-width: 90px;
		background-color: #FEFFFF;
		white-space: nowrap;
	}
}

td.label_normal {
	text-align: left;
	vertical-align: middle;
}
span.label_normal {
	font-size: 0.9rem;
	color: #000000;
}
span.label_normal_repeated {
	display: inline;
	font-size: 0.9rem;
	color: #000000;
}
@media screen and (min-width: 1024px) {
	span.label_normal_repeated {
		display: none;
	}
}
td.label_adjective_s {
	text-align: right;
	vertical-align: middle;
}

td.label_normal_verb {
	vertical-align: middle;
	text-align: right;
}
span.label_normal_verb {
	font-size: 0.9rem;
	color: #182b49;
}

td.label_switched_verb {
	vertical-align: middle;
	text-align: left;
}
@media screen and (min-width: 1024px) {
	td.label_switched_verb {
		vertical-align: middle;
		text-align: left;
		min-width: 90px;
	}
}
span.label_switched_verb {
	font-size: 0.9rem;
	color: #182b49;
}

td.wordform_normal {
	text-align: left;
	vertical-align: middle;
	font-weight: bold;
}
@media screen and (min-width: 1024px) {
	td.wordform_normal {
		text-align: left;
		vertical-align: middle;
		font-weight: bold;
		min-width: 70px;
		padding-right: 5px;
	}
}
span.wordform_normal {
	font-size: 0.9rem;
	font-weight: bold;
	color: #182b49;
}

td.wordform_normal_verb {
	vertical-align: middle;
	text-align: left;
}
@media screen and (min-width: 1024px) {
	td.wordform_normal_verb {
		vertical-align: middle;
		text-align: left;
		min-width: 90px;
	}
}
span.wordform_normal_verb {
	font-size: 0.9rem;
	font-weight: bold;
	color: #182b49;
}

td.wordform_switched_verb {
	vertical-align: middle;
	text-align: right;
}
span.wordform_switched_verb {
	font-size: 0.9rem;
	font-weight: bold;
	color: #182b49;
}

/* last columns of the paradigm blocks */

td.hyph {
	vertical-align: middle;
	font-size: 0.9rem;
	color: #182b49;
	min-width: 50px;
}

@media screen and (min-width: 1024px) {
	
	td.hyph {
		vertical-align: middle;
		font-size: 0.9rem;
		color: #182b49;
		min-width: 0px; /* prevent table from getting too wide for nothing! */
	}
	
	/* this one is only in use, when a paradigm table is too broad, and we move the text content of td.hyph into a span.hyph inside the previous td */
	span.hyph {
		font-size: 0.85rem !important;
		color: #182b49  !important;
		min-width: 50px  !important;
	}
	td.moved_hyph {
		vertical-align: top;
	}
}



td.archaic {
	vertical-align: middle;
	font-size: 0.9rem;
	color: #182b49;
	min-width: 50px;
}
@media screen and (min-width: 1024px) {
	td.archaic {
		vertical-align: middle;
		font-size: 0.9rem;
		color: #182b49;
		min-width: 0px; /* prevent table from getting too wide for nothing! */
	}
}



/* Leidraad window */

.leidraad_main {
	width: 100%;
	height: 55vh;
	box-shadow: 0px 0px 10px 1px #888;
	border-radius: 5px;
}
@media screen and (min-width: 1024px) {
	.leidraad_main {
		max-width: 1200px;
		width: 100%;
		height: 65vh;
		box-shadow: 0px 0px 10px 1px #888;
		border-radius: 5px;
	}
}