@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');
@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:700|Raleway:900');

@font-face {
  font-family: DancingScript;
  src:url('/css/fonts/DancingScript-Regular.ttf');
}

@font-face {
  font-family: Mada;
  src:url('/css/fonts/Mada-Regular.ttf');
}

:root{
	--colorA : darkblue;
	--colorB : #0000bb;
	--colorFondo: #f3f2ff;
	--color-cliente-primary: darkgreen;
	--color-cliente-secondary: lightgreen;
	--color-profesional-primary: darkblue;
	--color-profesional-secondary: lightblue;

}
/*ESTILOS GENERALES*/
.imgAviso{
	height:3em;
	vertical-align:middle;
}

.k-size-150{
	font-size: 1.5rem !important;
}

.k-h100{
	height: 100% !important;
}

.k-w100{
	width: 100% !important;
}

.k-mt400{
	margin-top:4rem !important;
}
.k-mt600{
	margin-top:6rem !important;
}
/*basic reset*/
* {margin: 0; padding: 0;}

.bg-darkblue{
	background-color:darkblue!important;
}

.color-darkblue{
	color:darkblue!important;
}

.color-gray{
	color:gray !important;
}


html {
	background:white;
	min-height:100%;
}

body {
	font-family: montserrat, arial, verdana;
	background-color: var(--colorFondo)!important;
	min-height:100%;
}

header{
	position:fixed;
	height:7rem;
	width:100%;
	margin:0;
	z-index:5;
	top:0;
	left:0;
}

header .cont1header{
	background-image:url(/archivos/fondo.png?v1);
	background-size:100% auto;
	/*background-color:var(--colorA);*/
}

body > .contenedor{
	min-height:100%;
	margin: 6rem auto 0 auto;
	width:100%;
	padding-bottom:2em;
}

header .btn-administrador,
header .btn-colaborador{
	position:absolute;
	bottom:-3.5em;
	right:1em;
	font-size:0.6em;
}

@media (max-width:768px){
	header .btn-administrador,
	header .btn-colaborador{
		margin-top:7em;
	}
}

header a{
	color:white;
}

nav a:visited{
	color:inherit;
	text-decoration:none;
}

nav a:hover{
	text-decoration:none;
}

nav .container{
	width:100%;
	margin:0;
	background-color:transparent;
}

header .session input{
	background-color:white !important;
	border-radius:5px;
	padding:3px;
	width:100%;
	font-size: 0.8em;
	border:solid 2px darkgray;
}

.session .row *{
	margin-right:0.5em;
}

.session .btn{
	font-size:0.6em;
}

.m-activo{
	border-bottom:solid 2px lightgray;
}

nav span:hover{
	font-weight:bold;
	cursor:pointer;
	color:white;
}

nav .contMenuResp > div{
	text-align:right;
}

header .logo{
	height: 5rem;
    text-align: center;
    margin-left: 0em;
    position: relative;
    top: -0.5em;
}

header .logo img{
	height:80%;
	margin-top:1%;
	height: 125%;
    margin-top: 0%;
	cursor:pointer;
}

header .img_perfil{
	height:2em;
	border-radius:1em;
	cursor:pointer;
}

header .name{
	display:inline-block;
	color:white;
}

.trianguloMenu{
	display:inline-block;
	margin-left:0.5em;
	width: 0; 
	height: 0; 
	border-top: 0.4em solid white;
	border-left: 0.4em solid transparent;
	border-right: 0.4em solid transparent; 
	margin-top:0.8em;
}

header .msjUser{
	display:inline-block;
	height:2em;
	margin-right:1.5em;
	position:relative;
	cursor:pointer;
}

header .msjUser img{
	height:1.5em;
	margin-top:0.3em;
}
header .contMenuUser{
	display:none;
	position: absolute;
    top: 5rem;
    height: 0;
    background-color: var(--colorB);
    color: white;
    box-sizing: border-box;
    overflow:hidden;
}

header .text-identificarse{
	color:white;
	font-family:Arial, verdana, sans-serif;
	margin-right:1em;
}

header .cont-resp-menu{
	position:absolute;
	right:0.5em;
	z-index:5;
	bottom: -0.5em;
}

header .verMenu{
	padding:0.5em 1em;
	display:flex;
	flex-direction: column;
	animation-name:verMenu;
	animation-fill-mode:forwards;
	animation-duration:0.5s;
}

@keyframes verMenu{
	to{transform:translateX(31%);}
}

header .hideMenu{
	padding:0;
	animation-name:hideMenu;
	animation-fill-mode:forwards;
	animation-duration:0.5s;
}

@keyframes hideMenu{
	to{transform:translateX(140%);}
}

header .verMenu2{
	padding:0.5em 1em;
	display:flex;
	flex-direction: column;
	animation-name:verMenu2;
	animation-fill-mode:forwards;
	animation-duration:0.5s;
}

@keyframes verMenu2{
	to{height:10em;}
}

header .hideMenu2{
	padding:0;
	animation-name:hideMenu2;
	animation-fill-mode:forwards;
	animation-duration:0.5s;
}

@keyframes hideMenu2{
	to{height:0;}
}

header .contMenuUser .itemMenuUser{
	display:block;
	padding:0.1em 0;
	cursor:pointer;
}

header .msjUser .nMsj{
	position: absolute;
    font-weight: bold;
    right: -0.8em;
    top: 0;
    border-radius: 0.7em;
    background-color: red;
    color: white;
    padding: 0;
    width: 1.5em;
    height: 1.5em;
    text-align: center;
    font-size: 0.7em;
    animation-name: parpadear;
    animation-duration: 4s;
    animation-fill-mode:initial;
    animation-iteration-count: infinite
}

footer{
	padding:0em;
	margin:0;
	width:100%;
	color: blue;
	position:relative;
}

footer
.condiciones > div{
	padding:1em 0.5em 0.5em 0.5em;
	cursor:pointer;
}

@media (max-width:768px){
	footer .condiciones > div{
		padding:0em 0.5em 0em 0.5em !important;
		line-height:1.2;
		width:100%;
		text-align:center;
	}

	footer .condiciones{
		padding-bottom: 0.5em;
		padding-top: 1.5em;
	}
}

footer
.copyright > div{
	padding:0em 1em;
	padding-bottom:1em;
	color:white;
	font-size:0.7em;
}

footer a{
	text-decoration:none;
	color:inherit;
}

footer a:visited{
	color:inherit;
}

footer .condiciones{
	background-color:white;
}

footer .condiciones a:hover{
	text-decoration:none;
	color:#000040;
}

footer .menuBajo a:hover{
	text-decoration:none;
	color:ligntblue;
}

footer
.menuBajo{
	background-color:darkblue;
}

footer
.menuBajo > div{
	padding:0.5em 1em;
	color:white;
	font-size:0.9em;
	cursor:pointer;
}

footer
.degradado{
	width:100%;
	padding:0;
	margin:0;
	height:0.5em;
	position:absolute;
	top:-0.5em;
	left:0;
	background:linear-gradient(to bottom, transparent, darkblue);
}

@keyframes parpadear{
	from{opacity:1;}
	40%{opacity:1;}
	50%{opacity:0;}
	60%{opacity:1}
	to{opacity:1}
}

.mResp{
	width:4em;
	height:4em;
	background: url(/archivos/menu_resp.png?v1);
	background-size:100% 100%;
	z-index:1;
	position: relative;
    top: -0.5em;
}

header .respTitulo img{
	height: 110%;
    margin-top: 0.5em!important;
}

@media (max-width: 768px) {
	header{
		height:7rem;
	}

	nav{
		position:absolute !important;
		top:0;
		right:0;
		height:0;
	}

	header .msjUser{
		margin-right: 0.7em;
		margin-top:1em;
	}

	header .contClick{
		margin-top:1em;
	}

	header .trianguloMenu{
		margin-left:0;
		margin-right:1em;
	}

	.contMenuResp{
		position: relative;
	    top: 4em;
	    background-color: #0000a7;
	    z-index: 1;
	    height: auto;
	    right: 0;
	    transform: translateX(140%);
	    padding-bottom: 2em!important;
	    width: 80%;
	}

	.contMenuResp > div{
		padding-top:0.3em;
		padding-bottom:0.3em;
		padding-left:2em;
		font-size:1.2em;
	}

	.session{
		position:relative;
		z-index:0;
	}

	header .contMenuUser{
		top:3.5rem;
	}

	.contSessionResp{
		position:relative;
		z-index:0;
	}
}

/*Olvido de contraseña*/
.olv{
	font-size:0.8em;
	color:blue;
	text-decoration:underline;
	cursor:pointer;
	font-family:Roboto;
}

[class*=truncated-]{
	opacity:0;
}

.headerCompact{
	animation-name: headerCompact;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
}

@keyframes headerCompact{
	to{height:4rem;}
}

.logoCompact{
	animation-name: logoCompact;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
}

@keyframes logoCompact{
	to{height:3rem; top:0.25rem;}
}

.returnHeader{
	animation-name: returnHeader;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
}

@keyframes returnHeader{
	from{height:4rem;}
	to{height:7rem;}
}

.returnLogo{
	animation-name: returnLogo;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
}

@keyframes returnLogo{
	from{height:3rem;}
	to{height:5rem; top:-0.5rem;}
}

._box .cerrar_setDato{
	position: absolute;
    top: 1em;
    right: 1em;
    width: 1em;
    height: auto;
    transform: rotate(45deg);
    cursor: pointer;
    filter: invert(0);
    opacity: 0.3;
}



/************************/
/**** CHAT CONSULTAS ****/
/************************/

.chatInfo{
	position:fixed;
	bottom:1em;
	right:1em;
	cursor:pointer;
	z-index:100001;
}

.chatInfo .icono{
	width:4em;
	height:4em;
	background-color:darkblue;
	padding:0.5em;
	border-radius:2em;
	background-image:url('/archivos/icono_chat.png');
	background-size:60% 60%;
	background-position:center center;
	background-repeat:no-repeat;
	box-shadow:0 0 4px white;
}


.cuadroChat{
	position:fixed;
	bottom: 5.5em;
	right:2em;
	border-radius:0.5em;
	width:20em;
	overflow:hidden;
	box-shadow:0 0 10px black;
	z-index:100001;
}

@media (max-width:768px){
	.cuadroChat{
		width:94%;
		right:3%;
	}
}

.cuadroChat .cabecera{
	background-color:darkblue;
	color:white;
	padding:1em;
	line-height:1.2;
	font-size:0.8em;
	position:relative;
}

.cuadroChat .input{
	padding:0.2em;
	text-align: left;
	background-color:white;
	position:relative;
}

.cuadroChat .input textarea{
	width:80%;
	border:none;
	padding:0.15em 0.2em;
	resize:none;
}

.cuadroChat .contenido{
	height:10em;
	background-color:white;
	border-bottom:solid 1px lightgray;
	width:100%;
	overflow:auto;
	position:relative;
}

.cuadroChat .btn-enviar-consulta{
	height: 1.5em;
    background-image: url(/archivos/enviar.png);
    width: 19%;
    background-size: auto 100%;
    background-position: 80% center;
    background-repeat: no-repeat;
    display: inline-block;
    position: absolute;
    bottom: 0.75em;
    right:0.5em;
    opacity: 0.75;
    cursor: pointer;
}

.cuadroChat .cerrarCuadroChat{
	position: absolute;
	right:0;
	top:0;
	background-image:url('/archivos/cerrar.png');
	background-position:center right;
	background-size:100% 100%;
	height:1.5em;
	width:1.5em;
	margin:0.5em 0.5em;
	cursor:pointer;
}

.cuadroChat .txtCabecera{
	width:90%;
}

.cuadroChat
.itemConsultaChat{
	padding:0.5em;
	border:solid 1px lightgray;
	box-shadow:2px 2px 2px gray;
	width:80%;
	box-sizing:border-box;
	font-size:0.7em;
	border-radius: 0.5em;
	margin:0.5em;
}

.cuadroChat
.itemConsultaChat.client{
	margin-left:18%;
	margin-right:2%;
}

.cuadroChat
.itemConsultaChat.admin{
	margin-right:18%;
	margin-left:2%;
	background-color:blue;
	color:white;
	border:none;
}

.cuadroChat
.itemConsultaChat.info{
	margin-right:2%;
	margin-left:2%;
	width:96%;
	background-color:orange;
	color:white;
	border:none;
}

.itemConsultaChat.cargando img{
	height:2em;
}

.cuadroChat .loadChat{
	position:absolute;
	bottom:0.5em;
	right:0.3em;
	height:3em;
}