/* Variables */

:root{
	/* blue theme */
	--theme-color: #122C4A;
	--theme-color-2: #193E68;
	
	/* burgundy theme */
	/*--theme-color: #40070E;*/
	/*--theme-color-2: #500D12;*/

	--1vh: 1vh;
	--scale: 1.0;
	
	--bs-danger: #dc3545;
}

.light{
	--text-color: black;
	--bg-color: white;
	--border-color: rgb(222, 226, 230);
	
	--light: rgb(255, 255, 255);
	--light-hover: rgb(220, 220, 220);
	--light-active: rgb(175, 175, 175);
	
	--grey: rgb(220, 220, 220);

	--dark: rgb(0, 0, 0);
	--dark-hover: rgb(55, 55, 55);
	--dark-active: rgb(100, 100, 100);
	
	--link-color: #0d6efd;
	--verse-border-color: rgba(80, 79, 79, 0.2); /* Default for light theme */
	--verse-background-color: rgba(255, 243, 136, 0.8); /* Default for light theme */
	--icon-chapter-checked-color: green;
	--background-color: white;

}
.dark{
	--verse-border-color: rgba(255, 255, 255, 0.2); /* Default for dark theme */
	--text-color: white;
	--bg-color: #212529;
	--border-color: rgb(73, 80, 87);
	
	--light: rgb(33, 37, 41);
	--light-hover: rgb(55, 55, 55);
	--light-active: rgb(100, 100, 100);

	--grey: rgb(30, 30, 30);
	
	--dark: rgb(255, 255, 255);
	--dark-hover: rgb(220, 220, 220);
	--dark-active: rgb(175, 175, 175);
	--verse-background-color: rgba(82, 82, 82, 0.8); /* Default for dark theme */
	--link-color: #0d6efd;
	--icon-chapter-checked-color: green;
	--background-color: #212529;
}

/* Global Styles */

html, body{
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: calc(16px * var(--scale));
	padding: 0;
	margin: 0;
	line-height: 1.5;
	
	color: var(--text-color);
	background-color: var(--bg-color);
}

button{
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

/* text input */
/* input[type='text']{
	color: var(--text-color);
	background-color: var(--light);
	font-size: calc(16px * var(--scale));
} */

/* Prevent mobile blue highlight */
button, div{
	-webkit-tap-highlight-color: transparent;
}


#loading{
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	animation: show 1s ease-in forwards;
}

#loading > div{
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

@keyframes show {
  0%,
  25% { opacity: 0; }
  100% { opacity: 1; }
}

#loading > div > span {
  width: calc(50px * var(--scale));
  height: calc(50px * var(--scale));
  border: calc(3px * var(--scale)) solid rgba(0, 0, 0, .3);
  border-radius: 50%;
  border-top-color: #000;
  animation: spin 1s ease-in-out infinite;
  -webkit-animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
  to { -webkit-transform: rotate(360deg); }
}


#main-page{
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	display: none;
	flex-direction: column;
}

.header{
	height: calc(60px * var(--scale));
	background-color:var(--theme-color-2);
	color: white;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: calc(20px * var(--scale));
	font-weight: bold;
}

.fullscreen .header, .fullscreen .footer{
	display: none;
}

#main-version, #search-version{
	width: 0;
	flex-grow: 1;
	white-space: nowrap;
	color: white;
	font-size: calc(20px * var(--scale));
	font-weight: bold;
	background-color: transparent;
	height: 100%;
	padding-left: calc(16px * var(--scale));
	display: flex;
	align-items: center;
	border: none;
	cursor: pointer;
	text-align: start;
}

#main-book, #search-book{
	width: 0;
	flex-grow: 1;
	white-space: nowrap;
	color: white;
	font-size: calc(20px * var(--scale));
	font-weight: bold;
	background-color: transparent;
	height: 100%;
	padding-left: calc(16px * var(--scale));
	display: flex;
	align-items: center;
	border: none;
	cursor: pointer;
	text-align: start;
}


#main-version-text, #search-version-text {
	width:0;
	flex-grow:1;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: fit-content;
}

#main-version-arrow, #search-version-arrow{
	display: inline-block;
	margin-left: .255em;
	vertical-align: .255em;
	content: "";
	border-top: .3em solid;
	border-right: .3em solid transparent;
	border-bottom: 0;
	border-left: .3em solid transparent;
}

/* Version Menu */
#main-version-menu, #search-version-menu{
	display: none;
	position: fixed;
	top: calc(60px * var(--scale));
	left: calc(0 * var(--scale));
	width: calc(100% * var(--scale));
	background-color: var(--bg-color);
	border: calc(1px * var(--scale)) solid var(--border-color);
	border-radius: calc(4px * var(--scale));
	z-index: 200;
	color: var(--text-color);

	opacity: 0;
	animation: show-menu 100ms ease-in forwards;
}

@keyframes show-menu {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

#main-version-menu > button, #search-version-menu > button{
	transition: background-color 300ms;
	cursor: pointer;
	padding: calc(8px * var(--scale)) calc(12px * var(--scale));
	width: 100%;
	text-align: start;
	color: var(--text-color);
	background-color: var(--light);
	border: none;
}

#main-version-menu > button:hover, #search-version-menu > button:hover{
	background-color: var(--light-hover);
}

#main-version-menu > button:active, #search-version-menu > button:active{
	background-color: var(--light-active);
}

.open-main-menu-button{
	height: 100%;
	padding: 0 calc(16px * var(--scale));
	display: flex;
	align-items: center;
	border: none;
	background-color: transparent;
	color: white;
	cursor: pointer;
	font-size: calc(20px * var(--scale));
}

/* Main chapter container chapter scrolling */
#chapter-page-container{
	height: 0;
	flex-grow: 1;
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
}

#chapter-page-container::-webkit-scrollbar{
	display: none;
}

.chapter-page{
	width: calc(100% - 32px);
	height: calc(100% - 16px);
	min-width: calc(100% - 32px * var(--scale));
	scroll-snap-align: start;
	padding: calc(8px * var(--scale)) calc(16px * var(--scale));
	position:relative;
	overflow-y:auto;
}

#chapter-header{
	display: flex;
	justify-content: space-between;
	margin-bottom: calc(4px * var(--scale));
}

.fullscreen #chapter-header{
	margin-top: calc(env(safe-area-inset-top, 0));
}

.center-chapter .chapter-wrapper{
	min-width: calc(400px * var(--scale));
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
}

.tablet{
	/* Selector #main-page when body contains .window-visible class */
	#main-page{
		transition: right 250ms;
	}

	.window{
		left: unset !important;
		width: min(40vw, calc(600px * var(--scale))) !important;
		/* border-left: 4px solid #aaa; */
		box-shadow: 0 0 calc(10px * var(--scale)) rgba(0, 0, 0, .5);
	}

}

body.tablet:has(.window-visible) #main-page{
	right: min(40vw, calc(600px * var(--scale))) !important;
}

body.tablet:has(.window-visible) #video-container{
	right: min(40vw, calc(600px * var(--scale))) !important;
}

body:not(.developer-mode) .developer-mode-only{
	display: none;
}















.clear-button{
	transition: background-color 300ms;
	cursor: pointer;
	padding: calc(6px * var(--scale)) calc(8px * var(--scale));
}

.clear-button:hover{
	background-color:rgba(0, 0, 0, 0.1);
}

.clear-button:active{
	background-color:rgba(0, 0, 0, 0.3);
}

.footer{
	height: calc(48px * var(--scale));
	display:flex;
	border-top: calc(1px * var(--scale)) solid var(--border-color);
}

.footer-item{
	width: 0;
	flex-grow: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: background-color 300ms;
	cursor: pointer;
	flex-direction: column;
}

.footer-item svg{
	width: calc(24px * var(--scale));
	height: calc(24px * var(--scale));
}

.footer-item .subtitle{
	font-size: calc(10px * var(--scale));
}

.footer-item:hover{
	background-color:rgba(0, 0, 0, 0.1);
}

.footer-item:active{
	background-color:rgba(0, 0, 0, 0.3);
}


.px-safe-area{
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
}

.pb-safe-area{
	padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Menu */
.menu{
	position: fixed;
	top: calc(10px * var(--scale));
	right: calc(10px * var(--scale));
	width: calc(150px * var(--scale));
	background-color: var(--bg-color);
	border: calc(1px * var(--scale)) solid var(--border-color);
	border-radius: calc(2px * var(--scale));

	opacity: 0;
	animation: show-menu 100ms ease-in forwards;
}

.menu-item{
	transition: background-color 300ms;
	cursor: pointer;
	padding: calc(8px * var(--scale)) calc(12px * var(--scale));
}

.menu-item:hover{
	background-color:rgba(0, 0, 0, 0.1);
}

.menu-item:active{
	background-color:rgba(0, 0, 0, 0.3);
}


/* Main Menu */
.main-menu-wrapper{
	height: 100%;
	position: relative;
}

#main-menu{
	display: none;
	position: absolute;
	top: calc(10px * var(--scale));
	right: calc(10px * var(--scale));
	width: calc(150px * var(--scale));
	background-color: var(--bg-color);
	border: calc(1px * var(--scale)) solid var(--border-color);
	border-radius: calc(2px * var(--scale));

	opacity: 0;
	animation: show-menu 100ms ease-in forwards;
	z-index: 100;
}

#main-menu button{
	transition: background-color 300ms;
	cursor: pointer;
	padding: calc(8px * var(--scale)) calc(12px * var(--scale));
	color: var(--text-color);
	background-color: var(--light);
	border: none;
	width: 100%;
	text-align: start;
}

#main-menu button:hover{
	background-color: var(--light-hover);
}

#main-menu button:active{
	background-color: var(--light-active);
}

.basic-button{
	transition: background-color 300ms;
	cursor: pointer;
	padding: calc(6px * var(--scale)) calc(8px * var(--scale));
	border: calc(1px * var(--scale)) solid var(--border-color);
	border-radius: calc(4px * var(--scale));
}
.basic-button:hover{
	background-color:var(--light-hover);
}

.basic-button:active{
	background-color:var(--light-active);
}

.tab-container{
	display: flex;
	overflow-x: auto;
}

.tab{
	flex-grow: 1;
	text-align: center;
	background-color: var(--theme-color-2);
	color: white;
	padding: calc(10px * var(--scale)) calc(4px * var(--scale));
	cursor: pointer;
	border-bottom: calc(4px * var(--scale)) solid var(--theme-color-2);
	transition: border-bottom-color 200ms;
	font-size: calc(15px * var(--scale));
	display: flex;
	align-items: end;
}


.tab.active{
	border-bottom: calc(4px * var(--scale)) solid white;
}

input{
	border: calc(1px * var(--scale)) solid var(--border-color);
	border-radius: calc(4px * var(--scale));
	padding: calc(10px * var(--scale));
}

#search-result-list > div{
	display: flex;
	padding: calc(8px * var(--scale)) calc(16px * var(--scale));
	border-bottom: calc(1px * var(--scale)) solid var(--border-color);
	cursor: pointer;
	transition: background-color 300ms;
}

#search-result-list > div:hover{
	background-color: rgba(0, 0, 0, 0.1);
}


#search-result-list > div:active{
	background-color: rgba(0, 0, 0, 0.3);
}

#search-result-list > div > div:nth-child(1){
	/* font-weight: bold; */
	margin-right: calc(8px * var(--scale));
}

#first-line-list > div{
	display: flex;
	padding: calc(8px * var(--scale)) calc(16px * var(--scale));
	border-bottom: calc(1px * var(--scale)) solid var(--border-color);
	cursor: pointer;
	transition: background-color 300ms;
}

#first-line-list > div:hover{
	background-color: rgba(0, 0, 0, 0.1);
}

#first-line-list > div:active{
	background-color: rgba(0, 0, 0, 0.3);
}

#first-line-list > div > div:nth-child(1){
	font-weight: bold;
	margin-right: calc(8px * var(--scale));
}

#first-line-list.alphabetical > div > div:nth-child(1){
	min-width: calc(45px * var(--scale));
}

.first-line-sort{
	display: flex;
	border: calc(1px * var(--scale)) solid var(--border-color);
	margin: calc(8px * var(--scale));
	border-radius: calc(6px * var(--scale));
	background-color: var(--grey);
}

.first-line-sort > div{
	width: 0;
	flex-grow: 1;
	text-align: center;
	padding: calc(4px * var(--scale));
}

.first-line-sort > div > div{
	padding: calc(4px * var(--scale)) 0;
	cursor: pointer;
}

.first-line-sort > div > div.active{
	background-color: var(--light);
	border-radius: calc(6px * var(--scale));
}

.list > div{
	display: flex;
	padding: calc(8px * var(--scale)) calc(16px * var(--scale));
	border-bottom: calc(1px * var(--scale)) solid var(--border-color);
	cursor: pointer;
	transition: background-color 300ms;
}

.list > div:hover{
	background-color: rgba(0, 0, 0, 0.1);
}

.list > div:active{
	background-color: rgba(0, 0, 0, 0.3);
}

.list > div > div:nth-child(1){
	font-weight: bold;
	margin-right: calc(8px * var(--scale));
}


.window{
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background-color: var(--bg-color);
	display: none;
	z-index: 100;
}

.window-showing{
	display: block;
	opacity: 0;
	transform: translateX(calc(25px * var(--scale)));
	animation: show-window 200ms ease-out forwards;
}

.window-visible{
	display: block;
}

.window-hiding{
	display: block;
	animation: hide-window 200ms ease-out forwards;
	pointer-events: none;
}


@keyframes show-window {
  0% { opacity: 0; transform: translateX(calc(25px * var(--scale))) }
  100% { opacity: 1; transform: translateX(0px); }
}

@keyframes hide-window {
  0% { opacity: 1; transform: translateY(0px); }
  100% { opacity: 0; transform: translateY(calc(25px * var(--scale))) scale(0.9) }
}


.window-10{
	z-index: 200;
}

.window-20{
	z-index: 300;
}

/* General */
.btn-light, .btn-dark{
	text-align: center;
	padding: calc(6px * var(--scale)) calc(12px * var(--scale));
	border: calc(1px * var(--scale)) solid var(--border-color);
	border-radius: calc(6px * var(--scale));
	transition: background-color 300ms;
	cursor: pointer;
}

.btn-light{
	color: var(--dark);
	background-color: var(--light);
}
.btn-light:hover{
	background-color:var(--light-hover);
}

.btn-light:active{
	background-color:var(--light-active);
}

.btn-dark{
	color: var(--light);
	background-color: var(--dark);
}
.btn-dark:hover{
	background-color:var(--dark-hover);
}

.btn-dark:active{
	background-color:var(--dark-active);
}

input[type='checkbox'] {
    width: calc(20px * var(--scale));
    height: calc(20px * var(--scale));
	cursor: pointer;
}


/* Settings Window... */

.settings-list{
	border: calc(1px * var(--scale)) solid var(--border-color);
	border-radius: calc(4px * var(--scale));
}

.settings-list-item{
	padding: calc(12px * var(--scale)) calc(16px * var(--scale));
}

.settings-header{
	font-size: calc(20px * var(--scale));
	padding-bottom: calc(16px * var(--scale));
}

.settings-list-item:not(:last-child){
	border-bottom: calc(1px * var(--scale)) solid var(--border-color);
}

#current-theme{
	padding: calc(4px * var(--scale)) calc(12px * var(--scale));
	border: calc(1px * var(--scale)) solid var(--border-color);
	border-radius: calc(6px * var(--scale));
}

#overall-size-warning{
	color: rgb(102, 77, 3);
	background-color: rgb(255, 243, 205);
	padding: calc(6px * var(--scale)) calc(12px * var(--scale));
	margin-top: calc(10px * var(--scale));
	border-radius: calc(6px * var(--scale));
}

/* ...Settings Window */


/* Search Window... */

.search-tab-container{
	height:0;
	flex-grow:1;
	display:flex;
	overflow-x:scroll;
	scroll-snap-type:x mandatory
}

.search-tab-container::-webkit-scrollbar{
	display: none;
}

.search-tab-content{
	width: 100%;
	min-width: 100%;
	height: 100%;
	scroll-snap-align:start;
	display: flex;
	flex-direction: column;
}

.search-tab-content{
	width: 100%;
	min-width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.keypad > div{
	/*height: 60px;*/
	display: flex;
}

.keypad > div > button{
	width: 0;
	flex-grow: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: background-color 300ms;
	cursor: pointer;
	font-size: calc(36px * var(--scale));
	font-weight: bold;
	color: var(--dark);
	
	background-color: var(--light);
	border: none;
	
	padding: calc(4px * var(--scale));
}

.keypad > div > button[checked='true'] > div {
    color: var(--light);
    background-color: var(--dark);
	border-radius: calc(6px * var(--scale));
	padding: calc(4px * var(--scale)) calc(8px * var(--scale));
	
}

.keypad > div:last-child > button{
	background-color: var(--grey);
	border-radius: calc(6px * var(--scale));
	margin: calc(8px * var(--scale));
}

@media (hover: hover){
	.keypad > div > button:hover{
		background-color: var(--light-hover);
	}
}

.keypad > div > button:active{
	background-color: var(--light-active);
}


/* ...Search Window */



/* Panels... */

.panel{
	position: absolute;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: var(--bg-color);
}

.panel.showing{
	animation: panel-showing 200ms ease-in forwards;
	pointer-events: none;
}

.panel.hiding{
	animation: panel-hiding 200ms ease-out forwards;
	pointer-events: none;
}

.panel.hidden{
	opacity: 0;
	pointer-events: none;
}

@keyframes panel-showing {
  0% { opacity: 0; transform: translateY(calc(50px * var(--scale))) }
  100% { opacity: 1; transform: translateY(0px); }
}

@keyframes panel-hiding {
  0% { opacity: 1; transform: translateY(0px); }
  100% { opacity: 0; transform: translateY(calc(50px * var(--scale))) }
}

/* ...Panels */

.border-top{
	border-top: calc(1px * var(--scale)) solid var(--border-color);
}

.border-bottom{
	border-bottom: calc(1px * var(--scale)) solid var(--border-color);
}


.info-item{
	padding: calc(8px * var(--scale)) calc(16px * var(--scale));
}




#video-container{
	opacity: 0;
	position: absolute;
	right: 0;
	bottom: calc(calc(50px * var(--scale)) + env(safe-area-inset-bottom, 0));
	overflow: hidden;
	width: calc(40px * var(--scale));
	height: calc(40px * var(--scale));
	pointer-events: none;
}

.developer-mode #video-container{
	opacity: 0.1;
}

#video-container video {
	width: calc(40px * var(--scale));
	height: calc(40px * var(--scale));
}

.chapter-verse-reference-container{
	padding-left: calc(46px * var(--scale));
	display: flex;
	flex-wrap: wrap;
}

.chapter-verse-reference-item{
	color: var(--dark-hover) !important;
	padding: calc(2px * var(--scale)) calc(8px * var(--scale));
	cursor: pointer;
}
.chapter-verse-reference-item:hover{
	color: var(--text-color) !important;
}
.chapter-verse-reference-item:active{
	color: var(--link-color) !important;
}

.tune-item{
	background-color: var(--light-hover);
	padding: calc(2px * var(--scale)) calc(4px * var(--scale));
	border-radius: calc(4px * var(--scale));
	margin-bottom: calc(4px * var(--scale));
	cursor: pointer;
}
.tune-item:active{
	background-color: var(--light-active);
}

#versionmark-list > div{
	display: flex;
	padding: calc(8px * var(--scale)) calc(16px * var(--scale));
	border-bottom: calc(1px * var(--scale)) solid var(--border-color);
	cursor: pointer;
	transition: background-color 300ms;
}

#versionmark-list > div:hover{
	background-color: rgba(0, 0, 0, 0.1);
}

#versionmark-list > div:active{
	background-color: rgba(0, 0, 0, 0.3);
}

#versionmark-list > div > div:nth-child(1){
	font-weight: bold;
	margin-right: calc(8px * var(--scale));
}

#search-history-list > div{
	padding: calc(8px * var(--scale)) calc(16px * var(--scale));
	border-bottom: calc(1px * var(--scale)) solid var(--border-color);
	cursor: pointer;
	transition: background-color 300ms;
}

#search-history-list > div > div{
	display: flex;
	gap: calc(4px * var(--scale));
}

#search-history-list > div:hover{
	background-color: rgba(0, 0, 0, 0.1);
}

#search-history-list > div:active{
	background-color: rgba(0, 0, 0, 0.3);
}

#search-history-list > div > div > div:nth-child(1){
	font-weight: bold;
	margin-right: calc(8px * var(--scale));
}


#install-main button{
	border: none;
	color: white;
	font-size: 28px;
	width: 100%;
	height: 80px;
	margin-bottom: calc(12px * var(--scale));
	border-radius: 6px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

.install{
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
}

.install-header{
	height: 60px;
	background-color: var(--theme-color-2);
	color: white;
	font-size: 20px;
	display: flex;
	align-items: center;
}

.install-content{
	height: 0;
	flex-grow: 1;
	overflow-y: auto;
	padding: calc(24px * var(--scale));
}

.install-content .step{
	font-weight: bold;
	margin-bottom: calc(8px * var(--scale));
}

.install-content .image{
	display: flex;
	justify-content: center;
	margin-bottom: calc(16px * var(--scale));
}

.list-item{
	padding: calc(4px * var(--scale)) calc(8px * var(--scale));
	border-bottom: calc(1px * var(--scale)) solid var(--border-color);
	cursor: pointer;
	transition: background-color 300ms;
}

.list-item:hover{
	background-color: rgba(0, 0, 0, 0.1);
}

#search-bar {
    display: flex; /* Align input and button horizontally */
    align-items: center; /* Vertically center */
	gap: calc(4px * var(--scale));
}

#input-word {
    flex: 1; /* Input takes available space */
    margin-right: 0.5em; /* Fallback spacing if gap isn’t supported */
}

#search-bar button {
    padding: 0.5em 1em; /* Button padding for better tap target */
    font-size: calc(13px * var(--scale)); /* Match input font size */
}

.verse-icons {
    display: flex;
    flex-direction: row; /* Explicitly horizontal */
    gap: calc(8px * var(--scale)); /* Space between icons */
    align-self: flex-end; /* Right-align in parent flex column */
    margin-top: calc(4px * var(--scale)); /* Space below verse text */
}

.verse-icon {
    cursor: pointer;
}

.verse-icon svg {
    width: calc(16px * var(--scale));
    height: calc(16px * var(--scale));
}


/* Filtros */
.filter-wrapper {
    margin: 10px 0;
}

.toggle-filters-btn {
    display: none;
    background-color: rgb(13, 110, 253);
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    margin-bottom: 10px;
}

.toggle-filters-btn:hover {
    background-color: rgb(10, 90, 200);
}

.filter-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
}

.radioFilter {
    margin-right: 5px;
    vertical-align: middle;
}

.noSelect.pointer {
    cursor: pointer;
    vertical-align: middle;
    white-space: nowrap;
    font-size: 14px;
}

.input-label-pair {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    margin-right: 15px;
}

.radioFilter:checked + .noSelect.pointer {
    font-weight: bold;
    color: rgb(13, 110, 253);
}

@media (max-width: 600px) {
    .toggle-filters-btn {
        display: block;
    }

    .filter-container {
        display: none;
    }

    .filter-container.show-filters {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px;
    }

    .input-label-pair {
        margin-right: 15px;
    }

    .noSelect.pointer {
        font-size: 14px;
    }
}

.div-nao-selecionavel {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Padrão */
}

.checkedVerse{
	background-color: var(--verse-background-color);
}

    #books {
      max-width: 800px;
      margin: 0 auto;
      font-family: Arial, sans-serif;
    }

    .tab-container {
      display: flex;
      border-bottom: 1px solid rgba(0,0,0,0.1);
      margin: calc(10px * var(--scale));
    }

    .tab {
      flex: 1;
      text-align: center;
      padding: calc(10px * var(--scale));
      cursor: pointer;
      background-color: var(--light);
      border: 1px solid rgba(0,0,0,0.1);
      border-bottom: none;
      border-radius: calc(8px * var(--scale)) calc(8px * var(--scale)) 0 0;
      transition: background-color 0.3s, font-weight 0.3s;
	  color: var(--text-color);
    }

    .tab.active {
      background-color: var(--verse-background-color);
	  color: var(--text-color);
      font-weight: bold;
      border-bottom: 2px solid #007bff;
    }

    .tab-content {
      display: none;
      border: 1px solid rgba(0,0,0,0.1);
      border-radius: 0 0 calc(8px * var(--scale)) calc(8px * var(--scale));
      margin: 0 calc(10px * var(--scale));
      padding: calc(24px * var(--scale));
    }

    .tab-content.active {
      display: block;
    }

    .tab-content h3 {
      text-align: center;
      margin: 0 0 calc(20px * var(--scale));
    }

    .book-columns {
      display: flex;
      justify-content: space-between;
      height: 100%;
      flex-grow: 1;
    }

    .book-columns > div {
      width: 48%;
    }

    .list-item-book {
      /* padding: calc(8px * var(--scale)); */
      cursor: pointer;
      /* border-radius: calc(4px * var(--scale)); */
      /* margin-bottom: calc(4px * var(--scale)); */
      /* transition: background-color 0.2s; */
    }

    .list-item-book:hover {
      background-color: var(--light-hover);
    }

	.book-selected {
		background-color: var(--verse-background-color);
		font-weight: bold;
	}