:root{
	--primero: #323643;
	--segundo: #606470;
	--tercero: #93DEFF;
	--cuarto: #F7F7F7;
}

body{
	margin: 0;
	padding: 0;
	border: 0;
}

h1, h2, h3, h4, h5, h6{
	color: var(--tercero) !important;
	font-weight: bold;
	padding: 4px;
}

hr{
	border-color: var(--tercero) !important;
}

a:link{
	background-color: transparent !important;
	color: var(--tercero) !important;
	text-decoration: none;
	border: none !important;
	border-radius: 5px;
}

a:visited{
	text-decoration: none;
	color: var(--tercero) !important;
	border-radius: 5px;
}

a:hover{
	text-decoration: none !important;
	background-color: var(--cuarto) !important;
	color: var(--tercero) !important;
	border-radius: 5px;
}

li{
	background-color: transparent !important;
	color: var(--tercero) !important;
	border-radius: 5px;
	border: none !important;
}

li:hover{
	text-decoration: none !important;
	background-color: var(--cuarto) !important;
	color: var(--tercero) !important;
	border-radius: 5px;
}

select{
	display: block;
	width: 100%;
	padding: 0.375rem 2.25rem 0.375rem 0.75rem;
	-moz-padding-start: calc(0.75rem - 3px);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--cuarto);
	background-color: var(--segundo);
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 16px 12px;
	border: 1px solid var(--cuarto);
	border-radius: 0.375rem;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;

	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
	padding-left: 0.5rem;
	font-size: 0.875rem;
	border-radius: 0.25rem;
}

label{
	font-weight: bold;
	color: var(--tercero) !important;
}

.text-size-10{
	font-size: 10px;
}

.text-titulos{
	font-weight: bold;
	color: var(--tercero) !important;
}

.text-parrafo{
	color: var(--cuarto);
}

.text-bold{
	font-weight: bold;
}

.text-italic{
	font-style: italic;
}

.text-normal{
	font-weight: normal !important;
}

.text-button{
	width: auto;
	padding: 3px;
	margin: 2px;
	border-radius: 5px;
	background-color: var(--cuarto);
	color: var(--segundo);
}

.btn-tercero{
	background-color: var(--segundo);
	color: var(--cuarto);
}

.btn-switAlert {
	/* Estilos del botón btn-info de Bootstrap */
	background-color: var(--tercero);
	border-color: var(--tercero);
	color: var(--segundo);
  }

.bg-versiculo{
	--bs-alert-color: #F7F7F7 !important;
  	--bs-alert-bg: #606470 !important;
  	--bs-alert-border-color: #606470 !important;
	font-style: italic;
}

.list-dark{
	background-color: var(--segundo);
	color: var(--bs-alert-color);
}

.bg-fondo{
	background-color: var(--primero);
}

.bg-panel{
	background-color: var(--segundo);
}

.bg-bronce{
	background-color: #CD7F32 !important;
}
.text-bronce{
	color: #CD7F32 !important;
}
.btn-bronce {
	--bs-btn-color: #000;
	--bs-btn-bg: #CD7F32;
	--bs-btn-border-color: #A67B5B;
	--bs-btn-hover-color: #000;
	--bs-btn-hover-bg: #A67B5B;
	--bs-btn-hover-border-color: #A67B5B;
	--bs-btn-focus-shadow-rgb: 11, 172, 204;
	--bs-btn-active-color: #000;
	--bs-btn-active-bg: #CD7F32;
	--bs-btn-active-border-color: #CD7F32;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(205, 127, 50, 0.125) !important;
	--bs-btn-disabled-color: #000;
	--bs-btn-disabled-bg: #CD7F32;
	--bs-btn-disabled-border-color: #CD7F32;
}

.bg-plata{
	background-color: #C0C0C0 !important;
}
.text-plata{
	color: #C0C0C0 !important;
}
.btn-plata {
	--bs-btn-color: #000;
	--bs-btn-bg: #C0C0C0;
	--bs-btn-border-color: #C0C0C0;
	--bs-btn-hover-color: #000;
	--bs-btn-hover-bg: #A9A9A9;
	--bs-btn-hover-border-color: #A9A9A9;
	--bs-btn-focus-shadow-rgb: 11, 172, 204;
	--bs-btn-active-color: #000;
	--bs-btn-active-bg: #C0C0C0;
	--bs-btn-active-border-color: #C0C0C0;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #000;
	--bs-btn-disabled-bg: #C0C0C0;
	--bs-btn-disabled-border-color: #C0C0C0;
}

.bg-oro{
	background-color: #FFD700 !important;
}
.text-oro{
	color: #FFD700 !important;
}
.btn-oro {
	--bs-btn-color: #000;
	--bs-btn-bg: #FFD700;
	--bs-btn-border-color: #FFD700;
	--bs-btn-hover-color: #000;
	--bs-btn-hover-bg: #B8860B;
	--bs-btn-hover-border-color: #B8860B;
	--bs-btn-focus-shadow-rgb: 11, 172, 204;
	--bs-btn-active-color: #000;
	--bs-btn-active-bg: #FFD700;
	--bs-btn-active-border-color: #FFD700;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #000;
	--bs-btn-disabled-bg: #FFD700;
	--bs-btn-disabled-border-color: #FFD700;
}

.bg-rubi{
	background-color: #E0115F !important;
}
.text-rubi{
	color: #E0115F !important;
}
.btn-rubi {
	--bs-btn-color: #000;
	--bs-btn-bg: #E0115F;
	--bs-btn-border-color: #E0115F;
	--bs-btn-hover-color: #000;
	--bs-btn-hover-bg: #9C0B37;
	--bs-btn-hover-border-color: #9C0B37;
	--bs-btn-focus-shadow-rgb: 11, 172, 204;
	--bs-btn-active-color: #000;
	--bs-btn-active-bg: #E0115F;
	--bs-btn-active-border-color: #E0115F;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #000;
	--bs-btn-disabled-bg: #E0115F;
	--bs-btn-disabled-border-color: #E0115F;
}

.border-editor{
	border: solid;
	border-width: 3px !important; 
	border-color: var(--segundo) !important;
	color: var(--cuarto) !important;
}

.contenedor {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* Cambia el número de columnas según tus necesidades */
    gap: 10px; /* Espacio entre las celdas */
}

.capitulo {
    background-color: var(--cuarto);
    border-radius: 5px;
    text-decoration: none !important;
    text-align: center;
    padding: 10px;
    color: var(--primero);
}

.panel-predica{
	background-color: var(--segundo);
	border-radius: 10px;
}

.buscar{
	background-color: var(--segundo) !important;
	color: var(--cuarto) !important;
	border-color: var(--tercero) !important;
}

.buscar::placeholder{
	color: var(--cuarto) !important;
}

.planes-contect{
	border: solid var(--tercero);
	border-radius: 10px;
}

/* Clases para pantallas grandes*/
@media (min-width: 768px) {
	.panel{
	  	position: relative;
	  	height: calc(100vh - 55px);
	  	overflow-x: hidden;
	  	font-size: 14px;
	}

	.panel-predica-md{
		position: relative;
		width: 24%;
		height: auto;
	}

	.editor{
	  	position: relative;
	  	height: calc(100vh - 105px);
	  	overflow-x: hidden;
	  	font-size: 14px;
	  	outline: none;
	}

	.menuPanelDerecho-md{
		position: relative;
		height: calc(100vh - 80px);
		overflow-x: hidden;
		font-size: 14px;
		outline: none;
  	}

	.desplasa-y{
		height: calc(100vh - 55px);
		overflow-y: auto;
	}

	.sideBarMenu{
		height: calc(100vh - 80px);
		overflow-y: auto;
	}

	.logueo{
		position: absolute;
		top: 20%;
		left: 25%;
		width: 50%;
	}

	.logueo-panel-derecho{
		position: relative;
		height: calc(100vh - 300px);
		border-top-right-radius: 10px;
		border-bottom-right-radius: 10px;
		background-color: var(--cuarto) !important;
	}

	.logueo-panel-izquierdo{
		position: relative;
		height: calc(100vh - 300px);
		border-top-left-radius: 10px;
		border-bottom-left-radius: 10px;
		background-color: var(--segundo) !important;
	}

	.logueo-panel-izquierdo-titulo{
		position: relative;
		padding-top: 120px;
	}

	.logueo-panel-izquierdo-detalles{
		position: relative;
		padding-top: 80px;
	}

	.logueo-panel-derecho-titulo{
		position: relative;
		padding-top: 80px;
	}

	.registro-panel-derecho{
		position: relative;
		padding-top: 30px;
		border-top-right-radius: 10px;
		border-bottom-right-radius: 10px;
		background-color: var(--cuarto) !important;
	}

	.registro-panel-izquierdo{
		position: relative;
		border-top-left-radius: 10px;
		border-bottom-left-radius: 10px;
		background-color: var(--segundo) !important;
	}

	.registro-panel-izquierdo-titulo{
		position: relative;
		padding-top: 120px;
	}

	.registro-panel-izquierdo-detalles{
		position: relative;
		padding-top: 80px;
	}
}

/* Clases para celulares*/
@media (max-width: 768px) {
	.navbar-expand-jd {
    	flex-wrap: wrap;
    	justify-content: flex-start;
	}
	.navbar-expand-jd .navbar-nav {
    	flex-direction: row;
	}
	.navbar-expand-jd .navbar-nav .dropdown-menu {
    	position: absolute;
	}
	.navbar-expand-jd .navbar-nav .nav-link {
    	padding-right: var(--bs-navbar-nav-link-padding-x);
    	padding-left: var(--bs-navbar-nav-link-padding-x);
	}
	.navbar-expand-jd .navbar-nav-scroll {
    	overflow: visible;
	}
	.navbar-expand-jd .navbar-collapse {
    	display: flex !important;
    	flex-basis: auto;
	}
	.navbar-expand-jd .navbar-toggler {
    	display: none;
	}
	.editor-sm{
		height: 200px;
		overflow-x: hidden;
		font-size: 14px;
		outline: none;
  	}

  	.menuPanelDerecho-sm{
		overflow-x: hidden;
		font-size: 14px;
		outline: none;
	}

	.mt-sm{
		margin-top: 5px;
	}

	.logueo-panel-izquierdo{
		position: relative;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		background-color: var(--segundo) !important;
	}

	.logueo-panel-izquierdo-titulo{
		position: relative;
		padding: 20px;
	}

	.logueo-panel-izquierdo-detalles{
		position: relative;
		padding: 10px;
	}
	
	.logueo-panel-derecho{
		position: relative;
		border-bottom-right-radius: 10px;
		border-bottom-right-radius: 10px;
		background-color: var(--cuarto) !important;
	}

	.logueo-panel-derecho-titulo{
		position: relative;
		padding-top: 20px;
	}

	.logueo-panel-derecho-form{
		position: relative;
		padding-bottom: 20px;	
	}
}