* {
	padding: 0;
	margin: 0;
	box-sizing:border-box;
}

:root {
	--main-color: #8377FC;
	--head-color: #aeabb5;
	--menu-color: #938F9C;
	--logo-color: #d5c211;
	--gris-color: #ECE9DF;
	--letra-gris: #474747;
  }

input:invalid+span:after {
	content: '✖';
	padding-left: 5px;
  }
  
  input:valid+span:after {
	content: '✓';
	padding-left: 5px;
  }

body {
	background: #fff;
	font-family: 'Raleway';
}

/* Set the size of the div element that contains the map */
#map {
	height: 400px;
	/* The height is 400 pixels */
	width: 100%;
	/* The width is the width of the web page */
  }

.colTabla {
    border: 1px solid blue;
    width: 100px;
    word-wrap: break-word;
}

.contenedorP {
	margin-left: 80px;
	background-color: #fff;

}


.contenedor article {
	line-height: 28px;
}

.contenedor article h1 {
	font-size: 30px;
	text-align: left;
	padding: 50px 0;
}

.contenedor article p {
	margin-bottom: 20px;
}

.contenedor article .btn-abrir-popup {
	padding: 0 20px;
	margin-bottom: 20px;
	height: 40px;
	line-height: 40px;
	border: none;
	color: #fff;
	background: #5E7DE3;
	border-radius: 3px;
	font-family: 'Raleway', sans-serif;
	font-size: 16px;
	cursor: pointer;
	transition: .3s ease all;
	cursor: pointer;
}

.contenedor article .btn-abrir-popup:hover {
	background: rgba(94,125,227, .9);
}

/* ------------------------- */
/* POPUP */
/* ------------------------- */

.overlay {
	background: rgba(0,0,0,.3);
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	align-items: center;
	justify-content: center;
	display: flex;
	visibility: hidden;
}

.overlay.active {
	visibility: visible;
}

.popup {
	background: #F8F8F8;
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
	border-radius: 3px;
	font-family: 'Raleway', sans-serif;
	padding: 20px;
	text-align: center;
	width: 600px;
	
	transition: .3s ease all;
	transform: scale(0.7);
	opacity: 0;
}

.popup .btn-cerrar-popup {
	font-size: 16px;
	line-height: 16px;
	display: block;
	text-align: right;
	transition: .3s ease all;
	color: #BBBBBB;
}

.popup .btn-cerrar-popup:hover {
	color: #000;
}

.popup h3 {
	font-size: 36px;
	font-weight: 600;
	margin-bottom: 10px;
	opacity: 0;
}

.popup h4 {
	font-size: 26px;
	font-weight: 300;
	margin-bottom: 40px;
	opacity: 0;
}

.popup form .contenedor-inputs {
	opacity: 0;
}

.popup form .contenedor-inputs input {
	width: 100%;
	margin-bottom: 20px;
	height: 52px;
	font-size: 18px;
	line-height: 52px;
	text-align: center;
	border: 1px solid #BBBBBB;
}

.popup form .btn-submit {
	padding: 0 20px;
	height: 40px;
	line-height: 40px;
	border: none;
	color: #fff;
	background: #5E7DE3;
	border-radius: 3px;
	font-family: 'Raleway', sans-serif;
	font-size: 16px;
	cursor: pointer;
	transition: .3s ease all;
}

.popup form .btn-submit:hover {
	background: rgba(94,125,227, .9);
}

/* ------------------------- */
/* ANIMACIONES */
/* ------------------------- */
.popup.active {	transform: scale(1); opacity: 1; }
.popup.active h3 { animation: entradaTitulo .8s ease .5s forwards; }
.popup.active h4 { animation: entradaSubtitulo .8s ease .5s forwards; }
.popup.active .contenedor-inputs { animation: entradaInputs 1s linear 1s forwards; }


.theadAlt {
	
	color:black;
	font-size:12px; 
	font-family:Raleway;
	background: linear-gradient(to top, #F2F2F2, white);
}

.tituloLista {
	font-size:28px;
	font-family: Raleway;
	color: white;
}

.subTituloLista {
	font-size:22px;
	font-family: Raleway;
	color: white;
}

.gris {
	background-color: #FFF;
}

.grisModal {
	background-color: #d7cfcf;
}

.grisTexto {
	color: #464343;
}

.bannerFondoBlue {
	background-image: url("../img/Fokus-imagen-banner.04dd0e0ce8e7.png");
	background-size: 100% 100%;
	
}

.bannerFondoYellow {
	background-image: url("../img/Fokus-imagen-banner-yellow2.01c32ffe2f21.png");
	background-size: 100% 100%;
}

.bannerFondoFK {
	background-image: url("../img/BannerFokusVerde.1f46b146b9fd.jpg");
	background-size: 100% 100%;
}

.bannerFondoTrabajo {
	background-image: url("../img/BannerFokusVerde_X.4d4fee2e811a.jpg");
	background-size: 100% 100%;
}

.colorT {
	color:#6d6a66;
}

.cuadrito {
	text-align:center;
	color:white;
	margin-top:5px;
}

.cuadro {
	background-size: 100% 85%;
	background-attachment:fixed;
}

.cuadroLateral {
	border-width:1px; 
	width:80px;
	height:80px;
    margin-right:20px;
}

.cuadroFormulario { 
	border:solid;
	border-color: #A6ACAF;
	border-width:1px; 
    box-shadow: -5px 5px 8px 0 rgba(0, 0, 0, 0.12); 
	border-radius:1px;
	background-color: #ebeae4;
}

.cuadroFormularioB { 
	border:solid;
	border-color: #A6ACAF;
	border-width:1px; 
    box-shadow: -5px 5px 8px 0 rgba(0, 0, 0, 0.12); 
	border-radius:3px;
}

.parrafo {
	color:var(--letra-gris);
	font-size: 18px;
	font-family: Poppins;
}

.titulo {
	font-size:30px;
	font-family: Poppins;
	color: var(--letra-gris);
}

.tituloSec {
	font-size:30px;
	font-family: Poppins;
	color:hsl(238, 74%, 65%);
}

.tituloInv {
	font-size:30px;
	font-family: Poppins;
	color: #FFF;
}

.texto {
	font-size:20px;
	font-family: Poppins;
	color:var(--letra-gris);
}

.textoInv {
	font-size:18px;
	font-family: Poppins;
	color: #FFF;
}

.info {
	min-height:600px; 
	color:#545453; 
	font-family:Poppins; 
	margin-top:50p;
}

.modal-content {
	border-radius: 4px;
}

.mi-modal-ancho {
	max-width:500px !important;
}

.modal-color {
	color:grey;
}
.modal-footer{
	text-align:center !important;
}

.cuadroPestaña { 
	border:solid;
	border-color: #A6ACAF;
	background-color: rgb(243, 23, 206);
	border-width:1px; 
    box-shadow: -5px 5px 8px 0 rgba(0, 0, 0, 0.12); 
	border-radius:3px;
}

.cuadroInteriorPestaña { 
	margin:60px -16px -1px -16px;
	border:solid;
	background-color: white;
	border-color: #A6ACAF;
	border-width:1px; 
	border-radius:0px 0px 3px 3px;
}

.cuadroRegistrarse {
	border:solid #9D73E1; 
	width:110px;
	border-width:1px; 
	background-color:#9D73E1;
	border-radius:10px 10px 10px 0px;
	box-shadow: -5px 5px 8px 0 rgba(0, 0, 0, 0.15);
	margin-top:15px;
	font-size:16px;
	text-align:right; 
	margin-right:15px;
	color:white;


}

.cuadroMapa {
	border:solid 1px #C6C4C4;
	border-radius:3px; 
	box-shadow: -5px 5px 8px 0 rgba(0, 0, 0, 0.12); 
	
}


.botonLogin {
	background-color:yellow; 
	font-family: Raleway;
	color:white;
	box-shadow: -5px 5px 8px 0 rgba(0, 0, 0, 0.12);
	border:1px solid #7E24F0;
	border-radius:3px 8px 8px 3px;
}

.sombra {
	box-shadow: -5px 5px 8px 0 rgba(0, 0, 0, 0.17);
}

.botoncito {
	box-shadow: -5px 5px 8px 0 rgba(0, 0, 0, 0.17);
	width:32px;
	border-radius:3px;
}

.botonGuardar {
	
	font-family: Raleway;
	color:white;
	box-shadow: -5px 5px 8px 0 rgba(0, 0, 0, 0.12);
	border:1px solid hsl(238, 74%, 65%);
	border-radius:2px;
	width:100px;
	background-color: hsl(238, 74%, 65%);
	
}

.botonRegresar {
	font-family: Raleway;
	color:white;
	box-shadow: -5px 5px 8px 0 rgba(0, 0, 0, 0.12);
	border:1px solid orange;
	border-radius:3px;
	width:100px;
	background-color: orange;
}

.botonLimpiar {
	
	font-family: Raleway;
	color:black;
	box-shadow: -5px 5px 8px 0 rgba(0, 0, 0, 0.12);
	border:1px solid #A4A4A4;
	border-radius:3px;
	width:120px;
	background: linear-gradient(to top, #A9F5A9, white);
}


.botonIngreso {
	font-family: Raleway;
	color:white;
	box-shadow: -5px 5px 8px 0 rgba(0, 0, 0, 0.12);
	border-radius:3px;
	width:70px;
	
}

p {
	margin:20px;
	font-size:18px;
}

.footer {
	background-color: rgb(197, 197, 197);
 }

table {
	 font-family: Helvetica;;
 }

	/* Create a container using CSS properties */
	.containerB {
		
		left: 40%;
		position: relative;
	
		transform: translate(-100%, -20%);
	}

	/* Apply CSS properties to ui-widgets class */
	.ui-widgets {
		position: relative;
		display: inline-block;
		width: 10rem;
		height: 10rem;
		border-radius: 9rem;
		margin: 1.5rem;
		border: 1.2rem solid palegreen;
		box-shadow: inset 0 0 7px grey;
		border-left-color: palegreen;
		border-top-color: chartreuse;
		border-right-color: darkgreen;
		border-bottom-color: white;
		text-align: center;
		box-sizing: border-box;
	}

	/*  Apply css properties to the second 
		child of ui-widgets class */
	.ui-widgets:nth-child(2) {
		border-top-color: chartreuse;
		border-right-color: white;
		border-left-color: palegreen;
		border-bottom-color: white;
	}

	/*  Apply css properties to ui-widgets class 
		and ui-values class*/
	.ui-widgets .ui-values {
		top: 40px;
		position: absolute;
		left: 10px;
		right: 0;
		font-weight: 700;
		font-size: 2.0rem;

	}

	/*  Apply css properties to ui-widgets 
		class and ui-labels class*/
	.ui-widgets .ui-labels {

		left: 0;
		bottom: -16px;
		text-shadow: 0 0 4px grey;
		color: black;
		position: absolute;
		width: 100%;
		font-size: 16px;
	}
   
@keyframes entradaTitulo {
	from {
		opacity: 0;
		transform: translateY(-25px);
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes entradaSubtitulo {
	from {
		opacity: 0;
		transform: translateY(25px);
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes entradaInputs {
	from { opacity: 0; }
	to { opacity: 1; }
}

.ocultar-div{
    display:none;
}

@media screen and (max-width: 600px) {
    .ocultar-div{
        display:none;
    }
}