@font-face {
  font-family: "StickyNotesDare";
  src: url("/app/javax.faces.resource/fonts/StickyNotesDare.ttf?ln=ultima-layout");
}
@font-face {
  font-family: "StickyNotes";
  src: url("/app/javax.faces.resource/fonts/StickyNotes.ttf?ln=ultima-layout");
}
@font-face {
  font-family: "LettersForLearners";
  src: url("/app/javax.faces.resource/fonts/LettersForLearners.ttf?ln=ultima-layout");
}
@font-face {
  font-family: "LettersForLearnersOutlineBold";
  src: url("/app/javax.faces.resource/fonts/LettersForLearnersOutlineBold.ttf?ln=ultima-layout");
}
@font-face {
  font-family: "Headlines-Bold";
  src: url("/app/javax.faces.resource/fonts/Headlines-Bold.otf?ln=ultima-layout");
}
@font-face {
  font-family: "BebasNeue-Regular";
  src: url("/app/javax.faces.resource/fonts/BebasNeue-Regular.ttf?ln=ultima-layout");
}
.layout-wrapper.menu-layout-static .layout-main {
    margin-left: 0px !IMPORTANT;
    text-align: center !IMPORTANT;
    vertical-align: middle !IMPORTANT;
}
.layout-wrapper .layout-main {
    padding: 0px !IMPORTANT;
}
.layout-wrapper .layout-main .layout-content {
    padding: 0px !IMPORTANT;
    flex: 0 !IMPORTANT;
    text-align: center !IMPORTANT;
    vertical-align: middle !IMPORTANT;
    min-height: 100vh;
}
.layout-wrapper .layout-main{
    display: block !IMPORTANT;
}
.fondo-template {
  background: url("/app/javax.faces.resource/images/login/login.png?ln=ultima-layout") top left no-repeat #f7f7f7; 
  /*background: orange;*/
  background-size: 100% 100%;
  background-attachment: fixed;
  background-position: center;
}
.dialogoCargando{
    box-shadow: 0px -1px 0px -7px rgb(0 0 0 / 20%) !IMPORTANT;
    background: transparent !IMPORTANT;
}
.dialogoCargando .ui-dialog-content {
    background: transparent !IMPORTANT;
}
.imagenPrincipal {
  min-height: 50px;
  min-width: 50px; 
  width: 50%;
  margin: 1rem;
}
.imagenCargando{
	width: 300px;
	height: 300px;
}
.dialogoPrivacidad{
    box-shadow: 0px -1px 0px -7px rgb(0 0 0 / 20%) !IMPORTANT;
    background: transparent !IMPORTANT;
    width: 100% !IMPORTANT;
    height: 100% !IMPORTANT;
    left: 0px !IMPORTANT;
    top: 0px !IMPORTANT;
}
.dialogoPrivacidad .ui-dialog-content {
    background: transparent !IMPORTANT;
    width: 100% !IMPORTANT;
    height: 100% !IMPORTANT;
    padding: 0px !IMPORTANT;
}
.imagenSinInternet{
	width: 100% !IMPORTANT;
	height: 100% !IMPORTANT;
	background: white !IMPORTANT;
}
.tablaOriginal{
  padding-top: 25px;
  width: 100% !IMPORTANT;
  height: 100% !IMPORTANT;
  min-height: 25vh;
}
.tablaImagenSwitch{
  width: 100% !IMPORTANT;
  border: 0px !IMPORTANT;
  background: transparent !IMPORTANT;
}
.tablaContenido{
  width: 50% !IMPORTANT;
  border: 0px !IMPORTANT;
  background: transparent !IMPORTANT;
  position: relative;
  left: 25%;
}
.columnaTablaOriginal{
  min-height: 50px;
  min-width: 50px; 
  height: 10%; 
  width: 33%;
}
.columnaBotonesMenu{
  padding: 2.7rem 0rem;
}
.columnaIzquierda{
    text-align: right;
}
.columnaDerecha{
    text-align: left;
}
.piePagina{
  padding: 15px;
  position: fixed;
  bottom:0;
  right:0px;
  font-family: StickyNotesDare !IMPORTANT;
  font-size: 25px !IMPORTANT;
  text-shadow: -1px -1px 16px #ffffff;
}
.headerPagina{
    position: fixed;
    top: 0;
    right: 0;
    padding: 25px;
}
.botonPrincipal{
  font-weight: bolder !IMPORTANT;
  font-size: 25px !IMPORTANT;
  color: #B70CFA !IMPORTANT;
  margin: 5px !IMPORTANT;
  border-radius: 35px !IMPORTANT;
  /*
  background: #914692 !IMPORTANT;
  background: linear-gradient(to bottom, rgba(146,105,198,1) 0%, rgba(86,22,167,1) 100%) !IMPORTANT;
  background: linear-gradient(135deg, rgba(221,161,230,1) 0%, rgba(148,120,184,1) 47%, rgba(76,45,117,1) 79%, rgba(46,5,99,1) 100%) !IMPORTANT;
  background: linear-gradient(135deg, rgba(221,161,230,1) 0%, rgba(133,72,212,1) 30%, rgba(76,45,117,1) 60%, rgba(46,5,99,1) 100%)  !IMPORTANT;
  background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%) !IMPORTANT;
  */
  background: TRANSPARENT !IMPORTANT;
  border-radius: 100px !IMPORTANT;
  border: 10px solid #B70CFA !IMPORTANT;
  box-shadow: 4px 9px 20px 0px #8d158d;
  text-shadow: 1px 2px 4px #ffffff;
}
.textoVistaPrevia{
   font-family: StickyNotesDare !IMPORTANT;
   font-size: 2rem !IMPORTANT;
/*    color: #AD3C07 !IMPORTANT; */
/*    text-shadow: 2px 2px 9px #979694 !IMPORTANT  */
    text-shadow: 2px 2px 20px #af4c05 !IMPORTANT;
}
.textoVistaPreviaTitulo {
   font-family: BebasNeue-Regular !IMPORTANT;
   font-weight: bolder !IMPORTANT;
   font-size: 3em !IMPORTANT;
   color: #f3d6ff !IMPORTANT;
   text-shadow: 2px 2px 20px #210738 !important;
   text-align: center;
   background: linear-gradient(to bottom, rgb(126 0 191) 0%, rgb(81 4 120) 100%) !IMPORTANT;
   /* background: #c2a8cd; */
   overflow: hidden;
   padding: 0.5rem 3rem;
   -webkit-border-radius: 35px 0px 35px 0px;
   border: 2px solid #5e0781;
   box-shadow: 2px 2px 15px 0px #8d158d;
}
.imagenVistaPrevia {
   -webkit-border-radius: 35px 0px 35px 0px;
   border: 2px solid #f7a469;
   box-shadow: 2px 2px 15px 0px #b54b00;
   overflow: hidden;
}
.imagenVistaPreviaRotar {
	-webkit-transform: rotateY(180deg);
	-webkit-transform-style: preserve-3d;
	transform: rotateY(180deg);
	transform-style: preserve-3d;
}
.imagenVistaPreviaSwitchResp {
   -webkit-border-radius: 35px 0px 35px 0px;
   border: 2px solid #f7a469;
   box-shadow: 2px 2px 15px 0px #b54b00;
   overflow: hidden;
}
.imagenVistaPreviaSwitch {
   -webkit-border-radius: 35px 0px 35px 0px;
   border: 2px solid #f7a469;
   box-shadow: 2px 2px 15px 0px #b54b00;
   overflow: hidden;
}
.imagenVistaPreviaSwitch:hover {
   border: 0px solid !IMPORTANT;
   box-shadow: 0px !IMPORTANT;
/*    filter: blur(1px); */
   filter: saturate(120%);
   -webkit-transition: all .5s ease-in-out;
   transition:all .5s ease-in-out;
   -webkit-transform: scale(1.1);
}
.imagenVistaPreviaSwitch:focus {
	-webkit-transform: rotateY(180deg);
	-webkit-transform-style: preserve-3d;
	transform: rotateY(180deg);
	transform-style: preserve-3d;
}
.imagenVistaPreviaSwitch:active {
	-webkit-transform: rotateY(180deg);
	-webkit-transform-style: preserve-3d;
	transform: rotateY(180deg);
	transform-style: preserve-3d;
}
.filaTransparente{
    border: 0px !IMPORTANT;
    background: transparent !IMPORTANT;
}
.columnaTransparente{
    border: 0px !IMPORTANT;
    background: transparent !IMPORTANT;
    padding: 0.7rem 0.3rem !IMPORTANT;
}
video {
    box-shadow: 0px 0px 6px 0px #b54b00;
}
.scrollHechos{
	min-width:250px;
    max-height:70px;
	background: transparent !IMPORTANT;
}
.scrolImagenPrevia {
    width: 100% !IMPORTANT;
    max-height: 98%!IMPORTANT;
    background: transparent !IMPORTANT;
}
.scrollVistaPrevia{
    max-height:500px;
	background: transparent !IMPORTANT;
}
.botonCapitulos{
  background: url("/app/javax.faces.resource/images/login/Boton.png?ln=ultima-layout") top left no-repeat #ffffff00;
  background-size: 100% 100%;
  color: #FFFFFF !IMPORTANT;
  text-shadow: 1px 2px 4px #2b005a;
  font-family: StickyNotesDare !IMPORTANT;
  font-size: 3.5rem !IMPORTANT;
  padding: 2rem 4rem;
/*   padding: 2rem 4rem 3rem 4rem; */
}
.botonCapitulos:hover{
  background: url("/app/javax.faces.resource/images/login/BotonFocus.png?ln=ultima-layout") top left no-repeat #ffffff00;
  background-size: 100% 100%;
  font-size: 4rem !IMPORTANT;
  padding: 2rem 5rem;
/*   padding: 2rem 5rem 3rem 5rem; */
}
.botonSeleccionado{
  background: url("/app/javax.faces.resource/images/login/BotonSeleccionado.png?ln=ultima-layout") top left no-repeat #ffffff00;
  background-size: 100% 100%;
  color: #FFFFFF !IMPORTANT;
  text-shadow: 1px 2px 4px #2b005a;
  font-family: StickyNotesDare !IMPORTANT;
  font-size: 3.5rem !IMPORTANT;
  padding: 2rem 4rem;
/*   padding: 2rem 4rem 3rem 4rem; */
}
.botonSeleccionado:hover{
  background: url("/app/javax.faces.resource/images/login/BotonSeleccionadoFocus.png?ln=ultima-layout") top left no-repeat #ffffff00;
  background-size: 100% 100%;
  font-size: 4rem !IMPORTANT;
  padding: 2rem 5rem;
/*   padding: 2rem 5rem 3rem 5rem; */
}
.botonSecundario{
  background: url("/app/javax.faces.resource/images/login/botonSecundario.png?ln=ultima-layout") top left no-repeat #ffffff00;
  background-size: 100% 100%;
  color: #FFFFFF !IMPORTANT;
  text-shadow: 1px 2px 4px #2b005a;
  font-family: StickyNotesDare !IMPORTANT;
  font-size: 2.5rem !IMPORTANT;
  line-height: 80px;
  padding: 2rem 4rem;
/*   padding: 2rem 4rem 3rem 4rem; */
}
.botonSecundario:hover{
  font-size: 2.7rem !IMPORTANT;
  padding: 2rem 5rem;
/*   padding: 2rem 5rem 3rem 5rem; */
}
.botonSecundarioSeleccionado{
  background: url("/app/javax.faces.resource/images/login/botonSecundarioSeleccionado.png?ln=ultima-layout") top left no-repeat #ffffff00;
  background-size: 100% 100%;
  color: #FFFFFF !IMPORTANT;
  text-shadow: 1px 2px 4px #2b005a;
  font-family: StickyNotesDare !IMPORTANT;
  font-size: 2.5rem !IMPORTANT;
  padding: 2rem 4rem;
/*   padding: 2rem 4rem 3rem 4rem; */
}
.botonSecundarioSeleccionado:hover{
  font-size: 2.7rem !IMPORTANT;
  padding: 2rem 5rem;
/*   padding: 2rem 5rem 3rem 5rem; */
}
.botonRegresar {
   font-family: BebasNeue-Regular !IMPORTANT;
   color: #f3d6ff !IMPORTANT;
   text-shadow: 2px 2px 20px #210738 !important;
   text-align: center;
   background: linear-gradient(to bottom, rgb(126 0 191) 0%, rgb(81 4 120) 100%) !IMPORTANT;
   overflow: hidden;
   -webkit-border-radius: 35px 0px 35px 0px;
   border: 2px solid #5e0781;
   box-shadow: 2px 2px 15px 0px #8d158d;
}
.carruselSecundario{
	width: 100% !IMPORTANT; 
	max-width: 100% !IMPORTANT;
    border: 0px !IMPORTANT;
    background: transparent !IMPORTANT;
}
body .ui-carousel .ui-carousel-header{
    border: 0px !IMPORTANT;
    background: transparent !IMPORTANT;
}
body .ui-carousel .ui-carousel-viewport {
    border: 0px !IMPORTANT;
    background: transparent !IMPORTANT;
}
.ui-carousel .ui-carousel-viewport .ui-carousel-items .ui-carousel-item{
    border: 0px !IMPORTANT;
  	padding: 2.5rem 3rem !IMPORTANT; 
  	width: 100% !IMPORTANT; 
}
.ui-carousel .ui-carousel-viewport .ui-carousel-items {
	width: 100% !IMPORTANT; 
	max-width: 100% !IMPORTANT;
    border: 0px !IMPORTANT;
    background: transparent !IMPORTANT;
}
.scrollPrincipal{
/*     height: 900px !IMPORTANT; */
    max-height: 100% !IMPORTANT;
    background: transparent !IMPORTANT;
}
.layout-wrapper .topbar-items > li .topbar-icon {
    font-size: 45px !IMPORTANT;
    color: #cf1d1d !IMPORTANT;
    transition: color 0.2s !IMPORTANT;
    text-shadow: 2px 3px 6px #ffffff !IMPORTANT;
    font-weight: bolder !IMPORTANT;
}
.barraEspacio{
	border-width: 0px !IMPORTANT;
    margin: 0.3rem !IMPORTANT;
}

.imagenSwitchCondResp {
   -webkit-border-radius: 15px 15px 15px 15px;
   box-shadow: 2px 2px 15px 0px #b54b00;
   overflow: hidden;
   margin: 5px;
}
.imagenSwitchCondActivo {    
	box-shadow: 2px 2px 15px 0px #ff833a;
    border: 3px solid #ffffff;
}
.imagenSwitchCondActivoError {
    box-shadow: 2px 2px 15px 0px #b50000;
    border: 1px solid #b50000;
    animation: vibrate 50ms linear infinite forwards;
}
@keyframes vibrate{
    0% {
        transform: translateX(-0.5px) translateY(0.5px);
    }
    50% {
        transform: translateX(0.5px) translateY(0px);
    }
    100% {
        transform: translateX(1px) translateY(-1px);
    }
}
.textoVistaPreviaScroll{
   font-family: StickyNotesDare !IMPORTANT;
   font-size: 2rem !IMPORTANT;
   text-shadow: 2px 2px 9px #979694 !IMPORTANT;
   text-align: justify !IMPORTANT;
}
.scrollContenidoSwCond{
    width: 100% !IMPORTANT;
    max-height: 150px !IMPORTANT;
    background: transparent !IMPORTANT;
}
.scrollContenidoSwCond::-webkit-scrollbar {
    -webkit-appearance: none;
}
.scrollContenidoSwCond::-webkit-scrollbar:vertical {
    width:10px;
}
.scrollContenidoSwCond::-webkit-scrollbar-button:increment,.contenedor::-webkit-scrollbar-button {
    display: none;
} 
.scrollContenidoSwCond::-webkit-scrollbar:horizontal {
    height: 10px;
}
.scrollContenidoSwCond::-webkit-scrollbar-thumb {
    background-color: #797979;
    border-radius: 20px;
    border: 2px solid #f1f2f3;
}
.scrollContenidoSwCond::-webkit-scrollbar-track {
    border-radius: 10px;  
}
.scrollRespuestaSwCond{
    width: 100% !IMPORTANT;
    max-height: 250px !IMPORTANT;
    background: transparent !IMPORTANT;
}
.scrollRespuestaSwCond::-webkit-scrollbar {
    -webkit-appearance: none;
}
.scrollRespuestaSwCond::-webkit-scrollbar:vertical {
    width:10px;
}
.scrollRespuestaSwCond::-webkit-scrollbar-button:increment,.contenedor::-webkit-scrollbar-button {
    display: none;
} 
.scrollRespuestaSwCond::-webkit-scrollbar:horizontal {
    height: 10px;
}
.scrollRespuestaSwCond::-webkit-scrollbar-thumb {
    background-color: #797979;
    border-radius: 20px;
    border: 2px solid #f1f2f3;
}
.scrollRespuestaSwCond::-webkit-scrollbar-track {
    border-radius: 10px;  
}
.botonReproductorVideoPantallaCompleta {
}
.botonReproductorVideo {
   font-weight: bolder !IMPORTANT;
   color: #f3d6ff !IMPORTANT;
   text-shadow: 2px 2px 20px #210738 !important;
   text-align: center;
   background: linear-gradient(to bottom, rgb(126 0 191) 0%, rgb(81 4 120) 100%) !IMPORTANT;
   overflow: hidden;
   padding: 0rem 0rem;
   -webkit-border-radius: 35px 0px 35px 0px;
   border: 2px solid #5e0781;
   box-shadow: 2px 2px 15px 0px #8d158d;
   margin: 0.3rem !IMPORTANT;
}
.botonPantallaCompleta {
    font-weight: bolder !IMPORTANT;
    color: #b400ff !IMPORTANT;
    text-shadow: 2px 2px 20px #210738 !important;
    text-align: center;
    background: #ebdeff!important;
    overflow: hidden;
    padding: 0rem 0rem;
    box-shadow: 1px 2px 7px 0px #8d158d;
    margin: 0.3rem !IMPORTANT;
    border-radius: 3rem !IMPORTANT;
    position: absolute;
    margin-left: 15px !IMPORTANT;
}
body .ui-button.ui-button-text-only .ui-button-text {
   padding: 0.5rem 0.5rem;
   font-family: StickyNotesDare !IMPORTANT;
   font-weight: normal !IMPORTANT;
   font-size: 2rem !IMPORTANT;
}
body .ui-button.ui-button-text-icon-left .ui-button-text {
   padding: 0.7rem 1rem 0.7rem 4rem;
   font-family: StickyNotesDare !IMPORTANT;
   font-weight: normal !IMPORTANT;
   font-size: 2rem !IMPORTANT;
}
body .ui-button.ui-button-text-icon-left .ui-icon, body .ui-button.ui-linkbutton.ui-button-text-icon-left .ui-icon {
  left: 1rem;
  background: white !IMPORTANT;
  color: #4107f1;
  border-radius: 50%;
  padding: 5px;
  margin: 0px auto;
  padding: 3%;
  font-size: 1.5rem !IMPORTANT
}
body .ui-button.ui-button-text-icon-left .ui-icon {
  top: 15%  !important;
}



body .ui-panel .ui-panel-content {
  background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
  font-family: LettersForLearners !IMPORTANT;
  font-size: 1.5rem !IMPORTANT;
}
body .ui-panel .ui-panel-titlebar {
  background: #744F86 !IMPORTANT;
  color: #FFFFFF !IMPORTANT;
  text-shadow: 1px 2px 4px #85470e !IMPORTANT;
  font-family: LettersForLearners !IMPORTANT;
  padding: 1rem !IMPORTANT;
}
body .ui-panel .ui-panel-title {
  font-size: 1.7rem !IMPORTANT;
}
body .ui-panel .ui-panel-footer {
    background: #b0aabd !IMPORTANT;
}
body .ui-inputswitch {
    background: rgb(255 182 108 / 38%) !IMPORTANT;
}
body .ui-inputswitch.ui-inputswitch-checked {
    background: rgb(137 115 203 / 50%) !IMPORTANT;
}
body .ui-inputswitch .ui-inputswitch-handle {
   background: #ffd199 !IMPORTANT;
}
body .ui-inputswitch.ui-inputswitch-checked .ui-inputswitch-handle {
   background: #744f86 !IMPORTANT;
}
body .ui-datepicker.ui-input-overlay{
  background: #744F86 !IMPORTANT;
}
body .ui-datepicker .ui-datepicker-title select {
    border-radius: 0.5rem;
    padding: 0.3rem;
}
body .ui-datepicker .ui-datepicker-calendar td{
  background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
}
body .ui-datepicker .ui-datepicker-calendar th {
  background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
}
body .ui-datepicker .ui-datepicker-header {
    background: transparent !IMPORTANT;
}
body .ui-datepicker .ui-datepicker-next, body .ui-datepicker .ui-datepicker-prev {
	color: #ffffff;
}
body .ui-radiobutton .ui-radiobutton-box.ui-state-active {
    border-color: #744f86 !IMPORTANT;
    color: #744f86 !IMPORTANT;
}
body .ui-radiobutton .ui-radiobutton-box.ui-state-active .ui-icon-bullet {
    background: #744f86 !IMPORTANT;
}
body .ui-chkbox .ui-chkbox-box.ui-state-active {
    border-color: #744f86 !IMPORTANT;
    background: #744f86 !IMPORTANT;
}
.tablaPrincipal{
	width: 100% !IMPORTANT;
    border: 0px !IMPORTANT;
}
.columnaTituloCuestionario{
	width: 30% !IMPORTANT;
	font-weight: bolder !IMPORTANT;
	text-align: left !IMPORTANT;
	font-family: LettersForLearners !IMPORTANT;
}
.columnaInputCuestionario{
	text-align: left !IMPORTANT;
	width: 70% !IMPORTANT;
	font-family: LettersForLearners !IMPORTANT;
/*     border: 0px !important; */
/*     background: transparent !important */
}
.inputCuestionario{
	width: 100% !IMPORTANT;
}
.ui-inputfield {
	width: 100% !IMPORTANT;
}
.obligatorio{
	color: red;
}
.fadeInDown {
   color: #ffffff00 !IMPORTANT;
}
.botonGuardar{
	font-size: 1rem !IMPORTANT;
    text-decoration: none !IMPORTANT;
}

.botonVolverCuestionario {
  background: url("/app/javax.faces.resource/images/login/Boton.png?ln=ultima-layout") top left no-repeat #ffffff00;
  background-size: 100% 100%;
  color: #FFFFFF !IMPORTANT;
  text-shadow: 1px 2px 4px #2b005a;
  font-family: StickyNotesDare !IMPORTANT;
  font-size: 2rem !IMPORTANT;
  padding: 1.7rem 3rem;
}

.botonCuestionario {
 position: relative;
 padding: 19px 36px;
 display: block;
 text-decoration: none;
 text-transform: uppercase;
 overflow: hidden;
 border-radius: 40px;
 border: none;
}

.botonCuestionario span {
 position: relative;
 color: #fff;
 font-family: Arial;
 letter-spacing: 8px;
 z-index: 1;
}

.botonCuestionario .liquid {
 position: absolute;
 top: -80px;
 left: 0;
 width: 100%;
 height: 200px;
 background: #6a2a89;
 box-shadow: inset 0 0 50px rgba(0, 0, 0, .5);
 transition: .5s;
}

.botonCuestionario .liquid::after,
.botonCuestionario .liquid::before {
 content: '';
 width: 200%;
 height: 200%;
 position: absolute;
 top: 0;
 left: 50%;
 transform: translate(-50%, -75%);
 background: #fff;
}

.botonCuestionario .liquid::before {
 border-radius: 45%;
 background: rgb(70 16 141/ 70%);
 animation: animate 5s linear infinite;
}

.botonCuestionario .liquid::after {
 border-radius: 40%;
 background: rgb(56 14 88 / 50%);
 animation: animate 10s linear infinite;
}

.botonCuestionario:hover .liquid {
 top: -120px;
 filter: saturate(120%);
}

@keyframes animate {
 0% {
  transform: translate(-50%, -75%) rotate(0deg);
 }

 100% {
  transform: translate(-50%, -75%) rotate(360deg);
 }
}


@media (max-width: 1400px) and (min-width: 1000px) {
	.tablaContenido{
	  width: 60% !IMPORTANT;
	  left: 20%;
	}	
}
@media (max-width: 1000px) and (min-width: 700px) {
	.tablaContenido{
	  width: 70% !IMPORTANT;
	  left: 15%;
	}	
}
@media (max-width: 700px) and (min-width: 0px){
	.tablaContenido{
	  width: 90% !IMPORTANT;
	  left: 5%;
	}	
}

.imageChat{
	width: 80px;
	height: 80px;
	background-color: #744F86;
	border-radius: 45px;
	position: absolute;
	color: white;
	bottom: 60px; right: 40px;
}

.imageChat i{
	color: white;
}

.imageChat i:hover{
	color: #744F86;
}
        	
.imageChat:hover{
	background-color: white;
	transition: all 1s ;
	box-shadow: 0px 0px 23px 3px rgba(116,79,134,0.87);
}

.containet-formChat{
	height: 100vh;
	widh: 100vw;
	display: flex;
    justify-content: center;
    align-items: center;
}

.form-chat{
	background-color: rgba(255,255,255, 0.5);
	border-radius: 15px;
	padding: 20px 15px;
	min-width: 50%;
	height: 500px; 
}	

.form-chat-title{
	font-family: StickyNotesDare !IMPORTANT;
	color: #744F86;
	font-size:3rem !IMPORTANT;
}

.form-chat-saludo{
	font-family: StickyNotesDare !IMPORTANT;
	text-aling: left;
	font-size:2rem !IMPORTANT;
	margin-bottom: 2rem;
}

.contenedor-enviomsj{
	display: none;
	height: 80%;
}

.contenedorBotones{
	margin-top: auto;
}

.chat-mensaje{
	font-family: StickyNotesDare !IMPORTANT;
	font-size:2rem !IMPORTANT;
}

.contenedorEnviarMsj {
	display: none;
}

#tablaMensajes{
	width: 100%;
	height: 90%;
	min-width: 250px;
	flex-direction: column;
	overflow-y: auto;
}

.col1-chats{
	flex:1;
}

.msg-row{
	display: flex;
	margin: 20px;
}

.msg-row2{
	justify-content: flex-end;
}

.incoming-msg, .outgoing-msg{
	flex-basis: 60%;
}

.msg-name {
	color: #744F86;
	font-family: StickyNotesDare !IMPORTANT;
	font-weight: 300;
	font-size: 1.5rem;
	margin-bottom: 0.3rem;
	text-align: left;
} 

.incoming-msg-text {
	background-color: rgba(116, 79, 134, 0.8);
	color: white;
	text-align: left;
	padding: 5px 10px;
	border-radius: 0.7rem;
}

.outgoing-msg-text {
	color: white;
	text-align: left;
	background-color: rgba(247, 148, 29, 0.8);
	padding: 5px 10px;
	border-radius: 0.7rem;
}

.useritem-list{
	cursor: pointer;
	height: 20px;
	margin-bottom: 5px;
}