@charset "UTF-8";
:root{
	--celema-azul: #0033a0;
}

body {
  background: var(--bs-gray-100);
  color: var(--bs-gray-600) !important;
  font-family: 'Source Sans Pro', sans-serif ;
}

body.background-login{
    background: url('../img/control_ingreso_visitantes.jpg') fixed;
    background-size: cover;
    background-position: center center;
}

body.tv{
    background: url('../img/visitantes.jpg') fixed;
    background-size: cover;
    background-position: center center;
}

body.tvEmpty{
    background: url('../img/visitantes_vacio.jpg') fixed;
    background-size: cover;
    background-position: center center;
}

select{
	color: var(--bs-gray-600) !important;
}

.card{
	border: 1px solid var(--bs-gray-200) !important;
}

.table{
	font-size: 0.7rem;
}

.text-celema{ color: var(--celema-azul) !important; }
.text-cyan{ color: var(--bs-cyan) !important; }
.text-red{ color: var(--bs-red) !important; }
.text-green{ color: var(--bs-green) !important; }
.text-gray-100{ color: var(--bs-gray-100) !important }
.text-gray-200{ color: var(--bs-gray-200) !important }
.text-gray-300{ color: var(--bs-gray-300) !important }
.text-gray-400{ color: var(--bs-gray-400) !important }
.text-gray-500{ color: var(--bs-gray-500) !important }
.text-gray-600{ color: var(--bs-gray-600) !important }
.text-gray-700{ color: var(--bs-gray-700) !important }
.text-gray-800{ color: var(--bs-gray-800) !important }
.text-gray-900{ color: var(--bs-gray-900) !important }


.bg-blue{ background: var(--celema-azul) !important; }
.bg-yellow{ background: var(--bs-yellow) !important; }
.bg-red{ background: var(--bs-red) !important; }
.bg-green{ background: var(--bs-green) !important }
.bg-gray-100{ background: var(--bs-gray-100) !important }
.bg-gray-200{ background: var(--bs-gray-200) !important }
.bg-gray-300{ background: var(--bs-gray-300) !important }
.bg-gray-400{ background: var(--bs-gray-400) !important }
.bg-gray-500{ background: var(--bs-gray-500) !important }
.bg-gray-600{ background: var(--bs-gray-600) !important }
.bg-gray-700{ background: var(--bs-gray-700) !important }
.bg-gray-800{ background: var(--bs-gray-800) !important }
.bg-gray-900{ background: var(--bs-gray-900) !important }
.bg-cyan{ background: var(--bs-cyan) !important; }

.btn-celema{
	background: var(--celema-azul) !important;
	color: #FFF !important;
}

.btn-celema:hover{
	background: #002b87 !important;
	color: #FFF !important;
	border: 1px solid #002b87 !important;
}

.btn-cyan{
	background: var(--bs-cyan) !important;
	color: #FFF !important;
}

.btn-cyan:hover{
	background: #5dd7f0 !important;
	color: #FFF !important;
	border: 1px solid #5dd7f0 !important;
}

.btn-red{
	background: var(--bs-red) !important;
	color: #FFF !important;
}

.btn-red:hover{
	background: #ca011c !important;
	color: #FFF !important;
}

.btn-cancelar{
	background: #FFF !important;
	color: var(--bs-gray-600) !important;
	border: 1px solid var(--bs-gray-400) !important;
}

.btn-cancelar:hover{
	background: var(--bs-gray-200) !important;
	color: var(--bs-gray-600) !important;
	border: 1px solid var(--bs-gray-200) !important;
}

header{
	background: #FFF !important;
	color: #FFF;
}

header .navbar{
	padding-top: 0;
	padding-bottom: 0;
}

header nav i{
	margin-right:6px !important;
}

header nav li a{
	height:70px;
	padding: 15px 20px !important;
	line-height: 40px;	
}

header nav ul li a.active{
	color: var(--bs-black) !important;
}

header nav ul li a:hover{
	background: var(--bs-gray-100) !important;
	color: var(--bs-gray-600) !important;
}

header nav ul li ul li a{
	height:40px;
	padding: 7px 12px !important;
	line-height: 28px;
	font-size: 1rem;
}

main{
	min-height: 75vh;
	padding-top:1.5rem;
}

main .titulo{
	margin: 0.5rem 1rem 1rem;
}

footer{
	background: #FFF;
	min-height: 12vh;
}

#loading{
	position: absolute;
	width:100%;
	height: 100vh;
	background: black;
	z-index: 1000;
	opacity: 0.5;
}

#loading .spinner-border{
	margin-top: 40vh;
	width: 5rem; 
	height: 5rem;
}

h5{
	color: var(--bs-gray-600) !important;
}

input:focus, select:focus, select, select.form-select:focus, input.form-control:focus, textarea.form-control:focus {
	border-color: var(--bs-gray-400) !important;
	/*border: 1px #DDD solid !important;	*/
	outline:none !important;
	outline-width: 0 !important;
	box-shadow: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
}

/*.form-control, .form-select{
	font-size: 0.7rem !important;
	padding: 0.3rem 0.5rem !important;
}*/


input[readonly=""], select[readonly=""], textarea.form-control[readonly=""]{
	background: var(--bs-gray-100) !important;
}

.input-group .input-group-text{
	background: #FFF !important;
	cursor: pointer;
	font-size: 0.8rem;
}

.input-group .input-group-text.readonly{
	background: var(--bs-gray-100) !important;
	cursor: pointer;
}

.continer-foto{
	width: 100%;
	min-height: 100px;
}

.card-pantalla-visitantes{
	min-height: 65vh;
}

.card-visitas .item-visita{
	font-size: 0.7rem !important;
	padding: 0.3rem !important;
	margin: 0.5rem 0 !important;
	cursor:pointer;
	position:relative;
}

.card-visitas .card-body{
	height: auto;
	max-height: 300px;
	overflow-y: auto;
	overflow-x: hidden;
}

.card-visitas .card-header label, .card-visitas .card-header i{
	font-size: 0.9rem !important;
}

.card-visitas .item-visita label{
	cursor:pointer;
}

.card-visitas .item-visita:hover{
	box-shadow: none !important;
	background: #fdfbef !important;	
}

.card-visitas .item-visita i{
	font-size: 1.8rem; 
	color: var(--bs-gray-300) !important;
}

.card-visitas .item-visita .badge-hora{
	position:absolute;
	top:0;
	bottom: 0;
	right:0;
	font-size:1rem; 
	background: var(--bs-gray-200) !important;
	border-radius: 0 0 7px 0;
	color: var(--bs-gray-700) !important;
	padding: 0.1rem 0.3rem;
}

.card-visitas .item-visita .badge-hora hr{
	margin: 0.3rem;
}

.card-visitas .card-body span{
	font-size: 0.8rem;
	color: var(--bs-gray-400);
}

.card-inicio{
	min-height: 130px;
	cursor:pointer;
	margin-bottom: 1rem;
	color: var(--bs-cyan) !important;
}

.card-inicio:hover{
	background: var(--bs-cyan) !important;
	color: #FFF !important;
	border: none !important;
}


.card-inicio .card-body{
	margin-top: 10px;
}

.card-inicio i{
	font-size: 45px; 
	color: inherit;
	padding-left: 0.5rem;	
}

.card-inicio .titulo{
	text-decoration: none;
	color: inherit;
	font-size: 20px;
	margin-left: 0px !important;
	align-self: center !important;
}

.scrollable{
	overflow-y: scroll;
	overflow-x: hidden;
}

#suggestionslist-empleados.scrollable{
	max-height: 45vh !important;
}

.scrollable::-webkit-scrollbar {
	width: 5px !important;
	background-color: #f5f5f5 !important;
	
  }

.scrollable::-webkit-scrollbar-thumb {
	background-color: var(--bs-gray-500) !important;
	background-image: -webkit-linear-gradient(
	  90deg,
	  rgba(255, 255, 255, 0.2) 25%,
   	  rgba(255, 255, 255, 0.2) 50%
	) !important;;
	border-radius: 15px;
  }

.custom-tooltip {
	--bs-tooltip-bg: var(--bs-gray-700) !important;
	font-size: 1rem !important;
}

.suggestionsbox {
	position: relative;
	margin-top: 0;
}

.suggestionslist {	
    background-color: #FFF;
	width: 100%;
	min-width: 320px;
	height: auto;
	max-height: 320px;
	overflow-y:scroll;
	z-index:9999999;
	cursor:pointer;	
	color: #333;     	    
}

.suggestionslist li{	
    font-size: 0.9rem;
}

#suggestionslist-empleados{
	font-size: 0.8rem !important;
}

#suggestionslist-empleados .row{
	padding-bottom: 0.5rem !important;
	margin-bottom: 0.5rem !important;
	border-bottom: 1px solid var(--bs-gray-200) !important;
}

.buscador input{
	border-left:0;
	border-right:0;	
}

.buscador span:first-child{
	border-radius: 20px 0 0 20px !important;
}

.buscador span:last-child{
	border-radius: 0 20px 20px 0;
}

.card-resultados .card-body{
	height: auto;
	max-height: 600px;
	overflow-y: auto;
	overflow-x: auto;
}

.archivos{
	margin-bottom:0.5rem;
}

.archivos i{
	font-size:1.3rem;
	cursor:pointer;
}

.archivos a:link, .archivos a:visited{
	text-decoration:none;
	color: var(--bs-gray-600);	
	font-weight: 600;
}

.archivos a:hover{
	text-decoration:underline;	
	color: var(--bs-gray-900);
}

#pdf-modal, #pdf-modal-iframe{
	width: 100%;
	height: 60vh;
}

.container-camara .camara{
	min-width: 320px;
	max-width: 380px;
}

.pointer{
	cursor: pointer;
}

@media (max-width: 575.98px) { 
	

	.card-login{
		margin-top: 4rem;
	}
}

@media (min-width: 576px) and (max-width: 767.98px) { 
	 .nav-link
	
}

@media (min-width: 768px) and (max-width: 991.98px) {   
	
  
}

@media (min-width: 992px) and (max-width: 1199.98px) { 
	
}

@media (min-width: 1200px) and (max-width: 1399.98px) { 
	
  
}


@media (max-width: 575.98px) {  }

/* `md` applies to small devices (landscape phones, less than 768px)-*/
@media (max-width: 767.98px) {  }

/* `lg` applies to medium devices (tablets, less than 992px)*/
@media (max-width: 991.98px) {  }

/* `xl` applies to large devices (desktops, less than 1200px)*/
@media (max-width: 1199.98px) { 
	header .navbar {
		padding-bottom: 0.8rem;	
	}
	header nav li a{
		height:40px;
		padding: 8px 15px !important;
		line-height: 28px;	
	}
	
	header nav ul li ul li a{
		height:30px;
		padding: 4px 8px !important;
		line-height: 28px;
		font-size: 1rem;
	}
 }

/* `xxl` applies to x-large devices (large desktops, less than 1400px)*/
@media (max-width: 1399.98px) { }