:root{
	--anchoBase: 100vw;
	--anchoBaseP: 100vw;
	--paddingTop: 70px;
	--columnaAncho: 24%;
	--columnaMargen: 0.5%;
	--anchoRegular: 70%;
	--anchoRenglonCompletoInterno: 50%;
	--anchoNotificaciones: 60%;
	--anchoLogin: 400px;
	


}

html{
	background-color: #fff !important;
}
.contenedorFlex{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content:center;
	width: var(--anchoBaseP) !important;
	max-width: var(--anchoBase) !important;
	margin: auto;
	padding-top: var(--paddingTop);
}
.renglonCompleto{
	width: 100%;
}
.renglonCompletoInterno{
	width: var(--anchoRenglonCompletoInterno);
	margin: auto;
}
.renglonCompletoInterno .i_row90{
	width: 100% !important;
}

.header1{
	border-bottom-left-radius: 30px;
	border-bottom-right-radius:30px;
	height: 60px;
	width: var(--anchoBaseP) !important;
	max-width: var(--anchoBase) !important;
	margin: auto;
}
.i_row90{
	width: var(--columnaAncho);
	display: flex;
	flex-wrap: wrap;
	margin-left: var(--columnaMargen);
	margin-right: var(--columnaMargen);
	align-items: stretch;
	flex-shrink: 0; /* Prevent flex items from shrinking */
  align-self: flex-start;
}
.i_row90Boton{
	justify-content: center !important;
}
.i_col-80Boton{
	width: auto !important;
}
.nopaddingBoton{
	padding: 0 !important;
	margin: 0 !important;
	margin-left: 10px !important;
}
.i_row90Regular{
	width: var(--anchoRegular);
	margin: auto;
}
.notificaciones{
	border-radius: 19px;
	box-sizing: border-box;
	margin-bottom: 10px;
	width: var(--anchoNotificaciones) !important;
}
.notificacionesInterno
{
	padding:5px;
	box-sizing:border-box
}
.botonInferior{
	width: var(--anchoBaseP) !important;
	max-width: var(--anchoBase) !important;
}
.contenedorLogin{
	width: var(--anchoLogin) !important;
	margin:auto;
	border: 1px solid #cacaca;
}
.inputPas img {
    height: 21px;
    vertical-align: top;
    margin-top: -26px;
    margin-left: 265px;
    cursor: pointer;
}
.renglonCompletoInternoLogin{
	width: 95%;
	margin: auto;
}
.renglonCompletoInternoLogin .i_row90{
	width: 100% !important;
}
.contenedorLoaderPrincipal{
	position: fixed;
	background-color: #000;
	top:0;
	left:0;
	right: 0;
	bottom: 0;
	z-index: 1000;
}
.contenedorLoader{
  max-width: 400px !important;
  width: 100%;
	background-color: #000;
	position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -350px);
	z-index: 1001;
}

@media screen and (max-width: 1600px) {
	:root{
		--paddingTop: 70px;
		--columnaAncho: 32%;
		--columnaMargen: 0.5%;
		--anchoRegular: 80%;
		--anchoNotificaciones: 70%;
	}
}

@media screen and (max-width: 1000px) {
	:root{
		--paddingTop: 70px;
		--columnaAncho: 48%;
		--columnaMargen: 0.5%;
		--anchoRegular: 90%;
		--anchoRenglonCompletoInterno: 70%;
		--anchoNotificaciones: 80%;
	}
}

@media screen and (max-width: 600px) {
	:root{
		--paddingTop: 70px;
		--columnaAncho: 94%;
		--columnaMargen: 3%;
		--anchoRegular: 95%;
		--anchoRenglonCompletoInterno: 95%;
		--anchoNotificaciones: 95%;
		--anchoLogin: 98vw;
	}
	.inputPas img {
    margin-left: 65vw;
	}
	.contenedorLoader{
		width: 100%;
		top: 0vh;
		 transform: translate(-50%, 0);
	}
}






body
{
font-family: Arial !important;
line-height: 1.7rem;
color: #212529;
margin: 0px;

}



.backRecorder{
background: #000;
opacity: .8;
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
z-index: 250;



}



.recorder{
  position: fixed;
  background: #FFFFFF;
  width: 400px;
  height: 250px;
  z-index: 251;
  top: 30%;
  left: 50%;
  margin-left: -200px;
  border-radius: 20px;
  text-align: center;

}





.dropzoneImagen

{
width:100%; 
height:100%;

}



.botonAudio

{
background-color: #000;
color:#fff;
padding: 5px;
border: none;
font-size: 18px;

}

.botonAudioVerde

{
background-color: #00aa00;

}

.botonAudioRojo

{
background-color: #aa0000;



}

.audioBotones{
margin-top: 10px;
margin-bottom: 10px;
text-align: center;
width: 100%;

}

.audioControles{
margin-top: 10px;
margin-bottom: 10px;
text-align: center;
width: 100%;
padding-left: 50;



}

.closeWindow{
position: absolute;
top: 3px;
left: 435px;
cursor: pointer;

}



.closeWindow2{
position: absolute;
top: 15px;
left: 355px;
cursor: pointer;

}

.closeWindowAudio{
position: absolute;
top: 15px;
left: 355px;
cursor: pointer;

}



.closeWindow img{
width: 30px;
height: 30px;

}



.closeWindow2 img{
width: 25px;
height: 25px;

}



.closeWindowAudio img{
width: 25px;
height: 25px;

}



.imgLoad{
  position: fixed;
  background: #FFFFFF;
  width: 400px;
  height: 400px;
  z-index: 251;
  top: 30%;
  left: 50%;
  margin-left: -200px;
  border-radius: 20px;
  text-align: center;
  padding: 39px;

}





.hidden{
display: none;

}



.hidden2{
display: none;

}




.imgMMC{
width: auto;
height: 37px;

}



.fixedHeader{
position: fixed;
top: 0px;
z-index: 3;

}



.fixedBoton{
position: fixed;
bottom: 0px;
z-index: 201;

}



.fixedBotonChat{
position: fixed;
bottom: 0px;
z-index: 201;

}



.textocentrado{
text-align: center;

}



.fixedBotonChat input{
width: 90%;
height: 35px;
border: 1px solid #cacaca;
border-radius:8px;
padding-left: 5px;
padding-right:  5px;
vertical-align: middle;
margin-top: 15px;
font-size: 18px;

}



.inputlog{
width: 80%;
height: 35px;
border: 1px solid #cacaca;
border-radius:20px;
padding-left: 10px;
padding-right:  5px;
font-size: 18px;
margin-bottom: 17px;

}



.contenedorChatMain

{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
margin: auto;
width: 90%;

}

.contenedorChatImg

{
width: 35px;
margin-top: 14px;
cursor: pointer;

}

.inputlogChat

{
width: 100%;
height: 35px;
border: 1px solid #cacaca;
border-radius:20px;
padding-left: 10px;
padding-right:  5px;
font-size: 18px;
margin-top: 15px;

}



.inputPas{
width: 80%;
height: 35px;
border: 1px solid #cacaca;
border-radius:20px;
font-size: 18px;
margin: 0 auto;

}




.inputPas input{
border: 0px;
width: 85%;
height: 30px;
vertical-align: top;
margin-top: 3px;


  font-size: 18px;

}



.inputPas input:focus{
  outline: none;

}



.fixedBotonChat img{
vertical-align: middle;
height: 30px;
  margin-top: 15px;

}



.inline{
display: inline-block;
vertical-align: middle;

}



.i_mt5{ margin-top: 5px !important; }

.i_mt10{ margin-top: 10px !important; }

.i_mt15{ margin-top: 15px !important; }

.i_mb10{ margin-bottom: 10px !important; }

.i_mb20{ margin-bottom: 20px !important; }

.i_mtb20{ margin-top: 20px !important; margin-bottom: 20px !important; }



.i_colL-10{
width:10% !important;
text-align: left;
padding-left: 20px;
box-sizing: border-box;



}

.i_colR-10{
width:10% !important;
text-align: right;
padding-right: 20px;
box-sizing: border-box;



}

.i_col-10{
width:10% !important;
text-align: center;

}



.i_col-50{
width:50% !important;
text-align: center;

}

.i_col-80{
width:80% !important;
text-align: center;
height: 100% !important;

}

.i_col-80Responsive{
width:80% !important;
text-align: center;

}

.i_col-90{
width:90% !important;

}

.i_col-90{
width:90% !important;

}

.i_col-100{
width:100% !important;

}

.i_col-20{
width:20% !important;
text-align: center;

}

.i_col-70{
width:70% !important;
text-align: center;

}

.i_col-33{
width:33% !important;
text-align: center;

}

.i_col-100restante{
text-align:right;
flex-grow:100;
vertical-align: middle;

}

.i_padding10{
padding: 10px !important;

}

.i_paddingL10{
padding-left: 10px !important;

}



.i_colImagenPeque{
width: 80px;
height: 80px;

}

.circuloIF{
  border-radius: 100px;
  height: 80px;
  width: 80px;

}



.record{
width: 100px;



}



.i_col-60{
width:60% !important;
text-align: center;

}



.i_col-9{
width:9% !important;
text-align: center;

}



.circuloIF img{
  border-radius: 100px;
  height: 70px;
  width: 70px;
  margin-left: 5px;
  margin-top: 5px;
  object-fit: cover;



}





.i_colImagenPeque2{
width: 25px;
height: 25px;

}

.circuloIF2{
  height: 100%;
  width: 100%;

}

.circuloIF2 img{
  height: 100%;
  width: 100%;

}







.mypointer{
  cursor: pointer;

}



.notificacion{
position: relative;
width: 65%;
margin-top: -40px;
text-align: right;

}



.notificacionInside{
width: 25px;
height: 25px;
border-radius: 20px;
text-align: center;
margin-left: auto;
margin-right: 0;



}



.notificacion2{
position: absolute;
width: 25px;
height: 25px;
margin-top: 5px !important;
margin-left: 60px;

}





.titulo{
font-size: 24px;
text-align: center;

}

.tituloHeader{
font-size: 24px;
text-align: center;
line-height: 60px;

}

.subtitulo{
font-size: 20px;
text-align: center;



}



.texto{
font-size: 20px

}





.closedetalle

{

	width:28px;

	height:28px;

	position:absolute;

	top: 17px;

	right: 19px;

	margin-bottom:15px;

	overflow:hidden;

	cursor:pointer;

	background-image:url(imagenes/cerrar1.png);

	background-size:25px 25px;

	background-repeat:no-repeat;

	background-position:center;

}



.stop-scrolling {
height: 100%;
overflow: hidden;

}







.circleL{
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  padding-top: 8px;
  padding-bottom: 8px;

}





.circleR{
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  padding-top: 8px;
  padding-bottom: 8px;

}



.pildora{
font-size: 18px;
border-radius: 20px;
padding-top: 5px;
padding-bottom: 5px;
margin-right: 20px;
margin-left: 20px;
padding-left: 20px;
padding-right: 20px;

}



.linex{
display: inline-block;
width: 70

}





.icon{
  width: 20px;
  float: right !important;
  padding-top: 25px;

}

.iconPaloma{
  width: 25px;
  float: right !important;

}



.iconMini{
    width: 15px;

}







.nopadding {
 padding: 0 !important;
 margin: 0 !important;

}



.sesiones{
border-radius: 20px;
margin-bottom: 10px;

}



.leftSesion{
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
width: 25%;

}



.rightSesion{
width: 75%;
box-sizing: border-box;

}



.bigText{
font-size: 50px;
text-align: center;

}



.sesiontexto1{
text-align:left;
font-size: 20px;
min-height: 50px;
	font: var(--fb);

}



.sesiontexto2{
text-align:left;
min-height: 35px;

}

.sesiontexto2Paloma{
float: right;

}

.arrow-down {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
margin:auto;

}

.arrow-right {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;

}

.arrow-left {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;

}





.rightSesion2{
border-radius: 20px;

}



.iconCurva{
width: 30px;
height: 25px

}

.puntosVerticales

{
width: 30px;
height: 25px;
margin: auto;
margin-top: 10px !important;
margin-bottom: 10px !important;

}

.puntosHorizontales

{
width: 90%;
margin: auto;

}

.puntosHorizontales img{
  width: 100%;
  margin: 10px 0;

}





.sesion2texto2{
text-align:left;
margin-bottom: 10px;

}





.imagenreondeada{
  border-radius: 20px;
  width: 100%;
  height: auto;

}



.imagenreondeada2{
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  width: 100%;
  height: auto;
  margin-top: -20px;

}





.fotoTexto{
border-radius: 20px;

}

.iconFotoTexto{
position: relative;
width: 20px;
height: 20px;
top: 10px;
right: 10px;
float:right;

}

.textoFotoTexto

{



}

.textonormal{
text-align: left;

}



.barra10{
height: 50px

}



.barra4{
height: 70px

}



.barra1_10{
height: 35px;

/*  background-image: url("imagenes/progress_bar.png"); */
 background-size: 100% 100%;
background-repeat: no-repeat;
  background: rgb(199,189,86);

}



.progress_bar{
width: 100%;
height: 35px;
position: relative;
top: 0px;
left: 0px;
z-index: 200;

}



.progress_bar2{
height: 35px;
position: relative;
top: -35px;
right: : 0px;
z-index: 1;
float:right;
background-color: #fff;

}

.progress_bar_letras{
width: 100%;
font-size: 14px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
position: relative;
top: -35px;
right: : 0px;
color: #666666

}









.txtleft{
text-align: left;

}

.txtcenter{
text-align: center;

}

.txtright{
text-align: right;

}

.txtmiddle{
vertical-align: middle;

}







.iconplus{
  margin-top: 20px;
  width: 40px;

}



.iconplus2{
  margin-top: 15px;
  height: 50px;
  width: 50px;



}



.iconmenu{


  width: 25px;

}



.iconrowMenu{
  padding-top: 0px;
  padding-left: 34px;

}





.boton{
border-top-left-radius: 30px;
border-top-right-radius:30px;
height: 60px;
text-align: center;
cursor: pointer;
color: #ffffff;
font-size: 24px;

}



.margenInferiorBoton

{
margin-bottom: 80px;

}

.paddingInferiorChat

{
padding-bottom: 20px !important;

}









.chatInput{


height: 60px;
text-align: center;
cursor: pointer;
color: #ffffff;
font-size: 24px;
text-align: center;
background-color: #f2f2f2;

}



.globoContenedor

{
margin: auto;

}



.iconHeader{
width: 40px;

}









.headerContainerFirma{
height: 140px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
margin-bottom: 80px;
box-sizing: border-box;

}

.circuloFirma{
  border-radius: 100px;
  height: 140px;
  width: 140px;
  margin: 20px auto;

}





.circuloFirma img{
  border-radius: 100px;
  height: 130px;
  width: 130px;
  margin-top: 4px;



}









.chatFlecha{
width: 6px;
display: inline-block;

}



.chat0{
text-align: left;

}

.textochat0

{
display: inline-block;
border-radius: 10px;
max-width: 340px;
font-size: 18px;

}



.chat1{
text-align: right;

}

.textochat1

{
display: inline-block;
border-radius: 10px;
max-width: 340px;
font-size: 18px;
margin-right: -5px;

}





.fechachat{
font-size: 12px;

}







.notificacion_1{
  font-size: 20px;
  font-weight: bold;

}



.notificacion_2{
  font-size: 20px !important;

}



.notificacion_4{
  font-size: 13px;

}





.loadback

{

	position:fixed;
padding:0;
margin:0;
top:0;
left:0;
width: 100%;
height: 100%;

	overflow:hidden;

	background-image:url(imagenes/backfixed.png);

	text-align:center;

	z-index:10010;

	display:none;

}



.loadback img

{

	top: 50%;

	margin-top: -66px;

	position: absolute;

	left: 50%;

	margin-left: -66px;

}



#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #050505;

	opacity: 0.7;
  z-index: 800;
  height: 100%;
  width: 100%;
  display: table;

}



.no-js #preloader, .oldie #preloader {
  display: none;

}



#loader {
  display: table-cell;
  text-align: center;
  vertical-align: middle;

}



.line-scale-pulse-out > div {
  background-color: #ffffff;
  width: 4px;
  height: 35px;
  border-radius: 2px;
  margin: 2px;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  display: inline-block;
  -webkit-animation: line-scale-pulse-out 0.9s -0.6s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85);
  animation: line-scale-pulse-out 0.9s -0.6s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85);

}



.line-scale-pulse-out > div:nth-child(2), .line-scale-pulse-out > div:nth-child(4) {
  -webkit-animation-delay: -0.4s !important;
  animation-delay: -0.4s !important;

}



.line-scale-pulse-out > div:nth-child(1), .line-scale-pulse-out > div:nth-child(5) {
  -webkit-animation-delay: -0.2s !important;
  animation-delay: -0.2s !important;

}



@-webkit-keyframes line-scale-pulse-out {
  0% {
      -webkit-transform: scaley(1);
      transform: scaley(1);
  }
  50% {
      -webkit-transform: scaley(0.4);
      transform: scaley(0.4);
  }
  100% {
      -webkit-transform: scaley(1);
      transform: scaley(1);
  }

}



@keyframes line-scale-pulse-out {
  0% {
      -webkit-transform: scaley(1);
      transform: scaley(1);
  }
  50% {
      -webkit-transform: scaley(0.4);
      transform: scaley(0.4);
  }
  100% {
      -webkit-transform: scaley(1);
      transform: scaley(1);
  }

}









@media screen and (max-width: 700px) {

body

{
  line-height: 1.3rem;

}

.header1{
height: 50px;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;

}

.tituloHeader{
font-size: 16px !important;
line-height: 50px;

}

.titulo{
font-size: 20px !important;

}

.texto{
font-size: 16px !important;

}

.pildora{
font-size: 16px !important;

}

.iconHeader{
width: 25px;
margin-left: 3px;

}

.headerContainerFirma{
height: 100px !important;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
margin-bottom: 60px;

}

.circuloFirma{
  height: 100px;
  width: 100px;
  margin: 10px auto;

}

.circuloFirma img{
  height: 90px;
  width: 90px;
  margin-top: 5px;

}

.i_mtb20{
margin-bottom: 15px !important;

}

.subtitulo{
font-size: 15px !important;

}

.i_mt10{
margin-top: 7px !important;

}

.i_mt15{
margin-top: 12px !important;

}

.notificacion{
width: 70%;

}



.barra1_10{
height: 25px;

}

.progress_bar{
height: 25px;

}

.progress_bar2{
height: 25px;
top: -25px;

}

.progress_bar_letras{
font-size: 11px;
top: -25px;

}

.i_col-80Responsive{
width:60% !important;

}



.i_col-80{
width:70% !important;

}





.i_col-10{
width:15% !important;

}



.boton{
border-top-left-radius: 25px;
border-top-right-radius:25px;
height: 50px;

}

.margenInferiorBoton

{
margin-bottom: 50px;

}







.recorder{
  width: 320px;
  height: 300px;
  top: 30%;
  left: 50%;
  margin-left: -160px;

}



.audioControles

{
padding-left: 10px;
margin:auto;

}



.closeWindowAudio{
position: absolute;
top: 15px;
left: 280px;
cursor: pointer;

}

.inputPas input{ width:80%; }







.contenedorChatImg

{
width: 30px;
margin-top: 10px;

}

.inputlogChat

{


margin-top: 8px;

}

}





@media screen and (max-width: 400px) {
.notificacion{
  width: 75%;
}
.i_col-80Responsive{
  width:60% !important;
}
.inputPas input{ width:70%; }



}