/* 
 * @import url('https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/fontawesome.min.css');
 * @import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); 
 * 
 * @import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap');
 * @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
 * 
 */


* {
	box-sizing: border-box;
	/* border: 1px solid red; */
}

:root {
	--square_side: min(24vw, 31vh);
	--two_sides: calc-size(2 * var(--square_side));
}

.is_hidden {
	display: none;
}

.no_padding {
	padding:0px;
}

@font-face {
	font-family: tc_icons_font;
	src: url(../fonts/SiBibliaIcons.ttf);
}

.has_icons {
	font-family: tc_icons_font;
	font-size: 1.2em;
	/*border: 1px solid red;*/
}

h1, h2, h3, h4, h5, h6 {
	scroll-margin-top: 15vh;
}

/*.fa,
 * .fas,
 * .fa-solid {
 *  border: 1px solid red;
 * }*/

.has_icons {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	display: var(--fa-display, inline-block);
	font-style: normal;
	font-variant: normal;
	/*line-height: 1;*/
	line-height: inherit; 
	text-rendering: auto; 
}

.icon-white-trash::before { content: "\004C"; }
.icon-white-square-plus::before { content: "\004D"; }
.icon-white-circle-no-check::before { content: "\004E"; }
.icon-white-circle-check::before { content: "\004F"; }
.icon-white-circle-check::before { content: "\004F"; }
.icon-white-square-check::before { content: "\0050"; }
.icon-white-eye::before { content: "\0051"; }
.icon-white-no-eye::before { content: "\0052"; }
.icon-white-copy-clipboard::before { content: "\0053"; }
.icon-copy::before { content: "\005E"; }
.icon-eye::before { content: "\005F"; }
.icon-no-eye::before { content: "\0060"; }
.icon-side-menu::before { content: "\0061"; }
.icon-book::before { content: "\0062"; }
.icon-download::before { content: "\0063"; }
.icon-media::before { content: "\0064"; }
.icon-schema::before { content: "\0065"; }
.icon-info::before { content: "\0066"; }
.icon-tips::before { content: "\0067"; }
.icon-menu::before { content: "\0068"; }
.icon-pin::before { content: "\0069"; }
.icon-home::before { content: "\006A"; }
.icon-checked::before { content: "\006B"; }
.icon-language::before { content: "\006C"; }
.icon-globe::before { content: "\006D"; }
.icon-undo-2::before { content: "\006E"; }
.icon-save::before { content: "\006F"; }
.icon-open::before { content: "\0070"; }
.icon-undo::before { content: "\0071"; }
.icon-bible::before { content: "\0072"; }
.icon-save-3::before { content: "\0073"; }
.icon-delete-3::before { content: "\0074"; }
.icon-delete-2::before { content: "\0075"; }
.icon-save-2::before { content: "\0076"; }
.icon-open-2::before { content: "\0077"; }
.icon-undo-3::before { content: "\0078"; }
.icon-delete::before { content: "\0079"; }
.icon-open-3::before { content: "\007A"; }
.icon-undo-4::before { content: "\007B"; }
.icon-undo-5::before { content: "\007C"; }
.icon-logout::before { content: "\007D"; }
.icon-square-check::before { content: "\007E"; }
.icon-square-no-check::before { content: "\007F"; }

.hebreo:lang(he) { direction: rtl; }
.griego:lang(el) { direction: ltr; }

body {
	background-color: #13234c;
	color: white;
	font-family: Arial, Helvetica, sans-serif;
	/*font-family: 'Roboto', sans-serif;*/
	/*font-family: 'Architects Daughter', cursive;*/
	font-size: 17px;
	margin: 0;
}

.big_title{
	font-size: 6vw;
	text-align: center;  
}

@media screen and (max-width: 600px) {
	.big_title{
		font-size: 300%;
		text-align: center;  
	}
}

.in_center{
	text-align: center;  
}

.img_center {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 60%;
}

.adapt_menu_bar {
	display: grid;
	grid-template-columns: 1fr 6vh;
	grid-template-rows: 1fr;

	background-color: #0b142c;
	border: 2px solid #23418c;
	position: fixed;
	top: 0em;
	width: 100%;
	z-index: 100;
}

.adapt_menu {
	font-size: 3vh;
	height: 10vh;

	overflow: hidden;
	
	grid-column: 1;
	grid-row: 1;	
}

.adapt_item {
	color: #f2f2f2;
	text-align: center;
	text-decoration: none;

	display: flex;
	height: 10vh;
	float: left;
	align-items: center;  
	align-content: center;
	padding: 0vw 2vw 0vw 2vw;
	font-size: 3vh;
}

.adapt_item:hover {
	background-color: #ddd;
	color: black;
}

.adapt_item.active {
	background-color: #04AA6D;
	color: white;
}

.adapt_menu_pop {
	height: 10vh;
	align-items: center;  
	align-content: center;
	padding: 0em 1em 0em 1em;
	font-size: 3vh;

	grid-column: 2;
	grid-row: 1;	
}

.end_of_content {
	height: 100vh;
}

/*border: 1em solid black;*/

.exam {
	float: none;
	font-size:1em;
	display: block;
	background-color: #254795;
	/*background-color: red;*/
	color: white;
}

.exam,h1 {
	font-size:1.1em;
}

/*
.exam.pos {
	font-size:0.8em;
	display: inline-block;
	height: 100%;
}
*/

.exam_content {
	display: block;
	float: none;
	top: 10vh;
	height: 90vh;
	overflow-y: scroll;
	position: fixed;
	width: 100%;
	z-index: 50;
}

.exam_ref {
	background-color: #254795;
}

a.exam_ref {
	color: yellow;
}

a.exam_ref:hover {
	color: black;
	background-color: white;
}

.exam_title {
	display: block;
	font-size: 150%;
	text-align: center;  
	margin-bottom: 0.5em;
}

.exam a {
	background-color: #254795;
	color: yellow;
}

.exam a:hover {
	color: black;
	background-color: white;
}

.is_word {
	display: inline-block;
}

.has_border {
	margin-top: 2vw;
	border: 0.1vw solid white;
}

.has_border > div* {
	border: 0.1vw solid white;
	border-radius: 1em;
}

.is_qnum {
	display: inline-block;
	margin-right: 1vw;
	border: 0.1vw solid white;
	border-radius: 1em;
	background-color: #142d55;
	padding-left: 0.4em;
	padding-right: 0.4em;
}

.is_qnum:hover,.is_qnum:hover>* {
	background-color: #ddd;
	color: black;
}

.has_margin_top {
	margin-top: 2vh;
}

.has_margin_bot {
	margin-bottom: 2vh;
}

.space_top {
	margin-top: 3em;
}

.space_bot {
	margin-bottom: 3em;
}

.is_align_right {
	text-align: right;
}

.is_align_left {
	text-align: left;
}

.is_button {
	border: 0.2vw solid white;
	background-color: #1c396f;
	text-align: center;
}

.is_button:hover,.is_button:hover>* {
	background-color: #ddd;
	color: black;
}

.is_button.active {
	background-color: #04AA6D;
	color: white;
}

.has_big_margin_top {
	margin-top: 5vh;
	padding-top: 5vh;
}

.has_big_margin_bot {
	margin-bottom: 5vh;
	padding-bottom: 5vh;
}

.has_big_margin_left {
	margin-left: 5vh;
}

.has_big_margin_right {
	margin-right: 5vh;
}

.has_big_margins {
	margin: 5vh 5vh 5vh 5vh;
}

.is_big_button {
	border: 0.2vw solid white;
	height: 15vh;
	border-radius: 1em;
	margin: 5vh 5vh 5vh 5vh;
	background-color: #1c396f;
	text-align: center;
	align-content: center;
}

.is_big_button:hover,.is_big_button:hover>* {
	background-color: #ddd;
	color: black;
}

.is_big_button.active {
	background-color: #04AA6D;
	color: white;
}


.stm {
	display: flex;
	width: 100%;
	height: 100%;
}

.observ_stm {
	display: block;
	width: 100%;
	height: 80%;
	overflow-y: scroll;
}

.observ_ok {
	display: block;
	width: 100%;
}

.msg {
	display: inline-block;
	flex-grow: 100;
	margin: 1vh;
}

.observ_msg {
	display: inline-block;
	flex-grow: 100;
	margin: 1vh;
}

.is_observ {
	margin-top: max(1vw, 1vh);
	border: 0.5vw solid #ffff00;
}

.has_round_border {
	border-radius: 1em;	
}

.has_top_padding {
	padding-top: 1em;
}

.observ_color {
	background-color: #13234c;
	color: #ffff00;
}

.pos_inter {
	display: block;
	width: 100%;
}

.is_block {
	position: relative;	
	display: block;
	margin-top: 0.5vh;
	margin-bottom: 0.5vh;
}

.is_simple_block {
	position: relative;	
	display: block;
}

.margin_top_bot {
	margin-top: 0.5vh;
	margin-bottom: 0.5vh;
}

.grid_4col {
	display: grid;
	grid-template-columns: repeat(4, var(--square_side)) 1fr;	
	grid-auto-rows: auto;
}

.grid_1col {
	display: grid;
	grid-template-columns: 1fr;
	grid-auto-rows: auto;
}

.to_center {
	text-align: center;
}

.grid_item {
	grid-column: auto;
	grid-row: auto;	
	background-color: transparent;
	text-align: center;
}

.grid_img_answer {
	display: grid;
	padding: 0.5em 0.5em 0.5em 0.5em;
	grid-template-columns: 1fr;
	grid-template-rows: var(--two_sides) 1fr;
	background-color: transparent;
}

.grid_item_left {
	grid-column: 1 / span 2;
	grid-row: 1;	
	text-align: right;
	background-color: transparent;
}

.grid_item_center {
	grid-column: 2 / span 2;
	grid-row: 1;	
	text-align: center;
	background-color: transparent;
}

.grid_item_right {
	grid-column: 3 / span 2;
	grid-row: 1;	
	text-align: left;
	background-color: transparent;
}

.grid_item_extra {
	grid-column: 1 / -1;
	grid-row: auto;	
	text-align: left;
	background-color: transparent;
}

@media (min-width: 600px) and (orientation:landscape) {
	.grid_item_extra {
		grid-column: 5;
		grid-row: auto;	
		text-align: center;
		align-content: center;
		background-color: transparent;
	}
}

.grid_item_all_col {
	grid-column: 1 / -1;
	grid-row: auto;	
	text-align: left;
}

.item_can_select {
	border: 0.2vw solid white;
	padding: 0.5em 0.5em 0.5em 0.5em;
	border-radius: 0.3em;
	background-color: transparent;
}

.item_can_select:hover {
	border: 0.5vw solid white;
}

.user_data {
	display: block;
	margin-top: 2vw;
	margin-left: 10vw;
	margin-right: auto;
	margin-bottom: 2vw;
}

.img_observ {
	display: block;
	margin-top: 2vw;
	margin-left: 10vw;
	margin-right: auto;
	width: 27vw;
}

.is_answ_img {
	background-color: transparent;
	width: 100%;
}

.selected {
	background-color: #13234c;
}

.selected:hover,.selected:hover>* {
	background-color: #0c142c;
}

.upper {
	text-transform: uppercase;
}

.is_contradiction {
	background-color: #616100;
}

.is_contradiction:hover,.is_contradiction:hover>*  {
	background-color: #a8a800;
}

.is_option {
	display: inline-block;
	margin: 0.5vw;
	border: 0.2vw solid white;
	border-radius: 0.3em;
}

.is_option:hover,.is_option:hover>* {
	background-color: #ddd;
	color: black;
}

.is_citation_item {
	display: inline-block;
	margin: 0.5vw;
}

.is_ed_verse {
	display: inline-block;
	margin: 0.5vh;
}

.qr_code_img {
	width:300px; 
	height:300px; 
	margin-top:2vw;
	margin-left:10vw;
}

.is_big{
	font-size: 1.5em;
	text-align: center;  
	padding-left: 0.5em;
	padding-right: 0.5em;
}

.has_left_padding {
	padding-left: 4vw;
}

.very_big_font {
	font-size: 200%;
}

.big_font {
	font-size: 150%;
}

.bold_font {
	font-weight: bold;
}

.small_font {
	font-size: 0.5em;
}

.medium_font {
	font-size: 0.8em;
}

.normal_font {
	font-size: 1em;
}


.grid_user_info {
	display: grid;
	grid-template-columns: max-content repeat(10, 10fr) 5fr;
	grid-auto-rows: auto;
	border: 1px solid white;
	gap: 1vh;
	margin: 4vh;
}

.grid_item_auto_auto {
	grid-column: auto;
	grid-row: auto;
	border: 1px solid white;
}

.grid_item_user {
	grid-column-start: 1;
	grid-row: auto;	
	border: 1px solid white;
}

@media (min-width: 600px) and (orientation:landscape) {
	.grid_item_user {
		grid-column-start: auto;	
		grid-row: auto;	
		border: 1px solid white;
	}
}

.grid_item_auto_rest {
	grid-column: auto / -1;
	grid-row: auto;	
	background-color: transparent;
}

.big_item {
	font-size: 1.5em;
	padding: 0.5em 0.5em 0.5em 0.5em;
}

.mid_item {
	font-size: 1.2em;
	padding: 0.1em 0.1em 0.1em 0.1em;
}

.grid_results {
	display: grid;
	grid-template-columns: repeat(100, 1fr);	
	grid-auto-rows: auto;
}

.results_item {
	margin-top: 0.2em;
	margin-bottom: 0.2em;
	grid-row: auto;	
	font-size:0.7em;
}

.results_data {
	margin-top: 0.2em;
	margin-bottom: 0.2em;
	font-size:0.7em;
}

.results_title {
	margin-top: 0.2em;
	margin-bottom: 0.2em;
	font-size:1em;
	text-align: center;  
	z-index: 60;
}

.is_color_grey {
	color: #a7a7a7;
}

.background_red {
	font-weight: bold;
	color: #12244a;
	border: 0.3em solid #ff0000;
	background-color: #ff0000;
}

.background_green {
	font-weight: bold;
	color: #12244a;
	border: 0.3em solid #00ff00;
	background-color: #00ff00;
}

.border_red {
	border: 0.3em solid #ff0000;
}

.grid_user_tit {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 6vh 1fr;
}

.img_user {
	background-color: #ffffff;
	//width: 8vh;
	//height: 8vh;
	//grid-row: 1;
	width: auto;
	height:100%;
}

.img_ico_user {
	background-color: #ffffff;
	width: 8vh;
	height: 8vh;
}

.img_user_cont {
	grid-row: 1;
	width: auto;
	height:100%;
}

.nam_user {
	grid-row: 2;
	font-size: 2vh;
}

.grid_verse {
	display: grid;
	grid-template-columns: 10fr 0.5fr;
	grid-auto-rows: auto;
}

.brown_background {
	background-color: #aa5500;
}


/*
	align-content: center center;
	align-items: stretch;
	aspect-ratio: 1;
	aspect-ratio: 1;
	border: 1px solid red;
	border: 1px solid white;
	border: 1px solid white;
	border: 0.1vw solid red;
	border-radius: 1em;
	border: 0.2vw solid #ff0000;
	border: 0.2vw solid #ffff00;
	border: 0.2vw solid #ff0000;
	border: 0.2vw solid #00ff00;
	color: red;
	display: inline-block;
	display: block;
	display: inline-flex;
	float: left;
	grid-column: auto / -1;
	height: 6vh;
	height: 6vh;
	height: 6vh;
	margin: 0.2vw 0.2vw 0.2vw 0.2vw;
	margin: 0.7vw;
	margin-left: 1vh;
	margin: 1vw;
	margin: 0.7vw;
	padding: 1em 1em;
	padding-left: 1vw;
	position: relative;	


*/