@charset "UTF-8";
@import url("../images/boxicons/css/boxicons.css");
/*@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:opsz,wght@6..12,200&display=swap');

:root {	
	/* Colores base del Chat */	
	--first: #005596;
	--first-h: #0082e6;
	--first-o: #3165AD;
	/*--second: #04549c;*/
	--second: #00963C;
	--second-h: #00e65c;
	--second-o: #018FAC;
	/*--third: #04549c;*/
	--third: #00963C;
	--third-h: rgb(16, 213, 88);
	--third-o: rgba(183, 32, 46, .3);

	/* Colores Informativos */	
	--success: rgb(25, 135, 84);
	--success-h: rgba(25, 135, 84, .7);
	--success-o: rgba(25, 135, 84, .3);
	--info: rgb(67, 174, 217);
	--info-h: rgba(67, 174, 217, .7);
	--info-o: rgba(67, 174, 217, .3);
	--warning: rgb(242, 189, 29);
	--warning-h: rgba(242, 189, 29, .7);
	--warning-o: rgba(242, 189, 29, .3);
	--danger: rgb(224, 5, 45);
	--danger-h: rgba(224, 5, 45, .7);
	--danger-o: rgba(224, 5, 45, .3);
	--white: rgb(255, 255, 255);
	--white-h: rgba(255, 255, 255, .7);
	--white-o: rgba(255, 255, 255, .3);
	--light: rgb(215, 215, 215);
	--dark: #1E1E1E;
	--disabled: lightgray;
	--colorGrad: radial-gradient(50% 50% at 50% 50%, var(--first) 0%, var(--second) 100%);
	--colorGrad-h: radial-gradient(50% 50% at 50% 50%, var(--first-h) 0%, var(--second-h) 100%);

	/* Variables Generales */
	--bgBody: #F9F9F9;
	--urlImage: url(''); /*Imagen de fondo*/
	--urlImage-mobile: url(''); /*Imagen de fondo*/
	--borderBox: none; /*Defina si quiere que el contenedor tenga border*/
	--radiusBox: 0px; /*Defina si quiere que el contenedor tenga border radius*/
	--shadowBox: 0px 5px 15px rgba(0, 0, 0, 0.35); /*Defina si quiere que el contenedor tenga shadow*/

	/* Variables Inputs */
	--borderInputs : gainsboro;
	--colorInputs: var(--dark);
	--colorPlaceholder: var(--dark);
	--bgInputs: #F1F1F1;
	--outlineInputs: gainsboro;

	/* Variables CheckBox */
	--colorCheck: var(--first);
	--sizeCheck: 1.5rem;

	/* Variables Alerta */
	--bgFondo: #fff;
	--opacityFondo: .5;
	--bgContainer: var(--white);
	--borderContainer:  1px solid var(--light);
	--radiusConainer: 10px;
	--shadowContainer: 0 2px 5px 0 rgba(0, 0, 0, .5);
	--bgTitle: var(--white);
	--radiusTitle: 7px 7px 0 0;
	--colorTitle: var(--first);
	--shadowTitle: ;/*0 10px 10px -10px black;*/
	--colorTexto: var(--dark);	
	--iconAlert: "\f907";
	--colorIcon: var(--third);
	--borderBtn: none;
	--radiusBtn: 25px;
	--shadowBtn: 0px 4px 4px rgba(0, 0, 0, 0.25);
	--bgBtnOk: var(--first);
	--colorBtnOk: var(--white);
	--bgBtnHoverOk: var(--first-h);
	--colorBtnHoverOk: var(--white);
	--bgBtnCancel: var(--first);
	--colorBtnCancel: var(--white);
	--bgBtnHoverCancel: var(--first-h);
	--colorBtnHoverCancel: var(--white);
}


/*=============================================
=                 Reset                       =
=============================================*/
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-size: 1em;
	font-weight: 300;
}

*::before,
*::after {
	box-sizing:inherit
}

.body,
.main,
.form,
.footer,
.box,
.box-mod,
.headerBox,
.bodyBox,
.footerBox,
.e-footer,
button {
	display: flex;
	align-items: center;
	justify-content: center;
}

img,
video {
	height:auto;
	max-width:100%
}

iframe {
	border:0
}

a {
	text-decoration: none;
}

ul {
	list-style: none;
}

input[type=text],
select,
textarea {
	width: 100% !important;
}

/*=============================================
=                 Generales                   =
=============================================*/

.html{
	width: 100%;
	/*scrollbar-width: none;*/
	overflow-y: auto;
	overflow-x: hidden;	
}

/* Works on Firefox */
.html * {
	scrollbar-width: thin;
	scrollbar-color: #f3f3f3 #fff;
	/*font-family: 'Montserrat', sans-serif;*/
	font-family: 'Nunito Sans', sans-serif;
}

/* Works on Chrome, Edge, and Safari */
.html *::-webkit-scrollbar {
	width: 12px;
}

.html *::-webkit-scrollbar-track {
	background: #fff;
}

.html *::-webkit-scrollbar-thumb {
	background-color: #B1B1B1;
	border-radius: 25px;
	border: 2px solid #fff;
}

.body,
.main,
.form,
.box,
.box-mod,
.bodyBox {
	flex-direction: column;
}

.body {
	min-height: 100vh;
	width: 100%;
}

.main,
.box,
.bodyBox {
	flex-grow: 1;	
}

.main,
.box,
.bodyBox,
.headerBox,
.footerBox,
.footer,
.e-footer {
	width: 100%;
}

.box-mod {
	width: 100%;
	flex-grow: 1;
}

.footer {	
	padding: 1rem;
}

.footerBox {	
	padding: .5rem;
}

.main {
	padding: 1rem .5rem 0 .5rem;
}

.bodyBox,
.headerBox {
	padding: .5rem .5rem 0 .5rem;
}

/*.bodyBox {
	gap: 37px;
}*/

.headerBox-mod {
	justify-content: space-between;
}

.box,
.box-mod {
	padding: 1rem;
}

.border {
	border: var(--borderBox);
	border-radius: var(--radiusBox);
	box-shadow: var(--shadowBox);
}

.e-footer {
  padding: .5rem;
}

.e-footer img {
  height: 13px;
}

i {
	line-height: 0 !important;
}

.headerBox {
	position: relative;
	top: 9px;
	/*height: 70px;*/
}

#logo-policia {
	position: absolute;
	display:none;
	z-index: 3;
}

#img-corner{
	width:200px;
}

@media (min-width: 500px){
	.border-mod {
		border: var(--borderBox);
		border-radius: var(--radiusBox);
		box-shadow: var(--shadowBox);
	}
	.box-mod {
		flex-grow: 0;
	}
	
	#logo-policia {
		display:block;
		position: absolute;
		top: 30px;
		left:30px;
	}
}

/*=============================================
=                 Textos                      =
=============================================*/

.font-monospace {
	font-family: var(--bs-font-monospace) !important;
}

.xxs {
	font-size: xx-small !important;
}

.xs {
	font-size: x-small !important;
}

.sm {
	font-size: small !important;
}

.smr {
	font-size: 14px !important;
}

.md {
	font-size: medium !important;
}

.lg {
	font-size: large !important;
}

.lgr {
	font-size: 20px !important;
}

.xl {
	font-size: x-large !important;
}

.xxl {
	font-size: xx-large !important;
}

.fs-italic {
	font-style: italic !important;
}

.fs-normal {
	font-style: normal !important;
}

.fw-light {
	font-weight: 300 !important;
}

.fw-lighter {
	font-weight: lighter !important;
}

.fw-normal {
	font-weight: 400 !important;
}

.fw-bold {
	font-weight: 600 !important;
}

.fw-xbold{
	font-weight: 800 !important;
}

.fw-bolder {
	font-weight: bolder !important;
}

.center {
	text-align: center !important;
}

.justify {
	text-align: justify !important;
}

.left {
	text-align: left !important;
}

.right {
	text-align: right !important;
}

.fxc {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.fxr {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.fxj-start {
	justify-content: flex-start !important;
}

.fxj-center {
	justify-content: center !important;
}

.fxj-end {
	justify-content: flex-end !important;
}

.fxa-end {
	align-self: flex-end;
}

.fxa-start {
	align-self: flex-start;
}

.fxa-stretch {
	align-items: stretch !important;
}

.break-word{
	word-break: break-word;
}

strong {
    font-weight: 600;
}

img[src^="images/doctor"]{
	display: none;
}

@media (min-width: 500px){
	.lg {
		font-size: x-large !important;
	}
	
	.fxa-center {
		align-self: center;
	}
	
	img[src^="images/doctor"]{
		display: block;
		transform: translateY(40px)
	}	
}

@media (min-width: 769px){
	.fxc-mod {
		flex-direction: row;
	}

	.fxr-mod {
		flex-direction: column;
	}
}

/*=============================================
=                Color Textos                 =
=============================================*/

.first {
	color: var(--first) !important;
}

.second {
	color: var(--second) !important;
}

.third {
	color: var(--third) !important;
}

.success {
	color: var(--success) !important;
}

.info {
	color: var(--info) !important;
}

.warning {
	color: var(--warning) !important;
}

.danger {
	color: var(--danger) !important;
}

.white {
	color: var(--white) !important;
}

.light {
	color: var(--light) !important;
}

.dark {
	color: var(--dark) !important;
}

/*=============================================
=                 Radios                      =
=============================================*/

.r0 {
	border-radius: 0px;
}

.r3 {
	border-radius: 3px;
}

.r5 {
	border-radius: 5px;
}

.r7 {
	border-radius: 7px;
}

.r10 {
	border-radius: 10px;
}

.r15 {
	border-radius: 15px;
}

.r25 {
	border-radius: 25px;
}

/*=============================================
=                 Margin                      =
=============================================*/

.m-0 {
	margin: 0 !important;
}

.m-1 {
	margin: 0.25rem !important;
}

.m-2 {
	margin: 0.5rem !important;
}

.m-3 {
	margin: 1rem !important;
}

.m-4 {
	margin: 1.5rem !important;
}

.m-5 {
	margin: 3rem !important;
}

.m-auto {
	margin: auto !important;
}

.mxy-51 {
	margin: .5rem 1rem !important;
}

.mxy-52 {
	margin: .5rem 2rem !important;
}

.mxy-12 {
	margin: 1rem 2rem !important;
}

.mx-0 {
	margin-right: 0 !important;
	margin-left: 0 !important;
}

.mx-1 {
	margin-right: 0.25rem !important;
	margin-left: 0.25rem !important;
}

.mx-2 {
	margin-right: 0.5rem !important;
	margin-left: 0.5rem !important;
}

.mx-3 {
	margin-right: 1rem !important;
	margin-left: 1rem !important;
}

.mx-4 {
	margin-right: 1.5rem !important;
	margin-left: 1.5rem !important;
}

.mx-5 {
	margin-right: 3rem !important;
	margin-left: 3rem !important;
}

.mx-auto {
	margin-right: auto !important;
	margin-left: auto !important;
}

.my-0 {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.my-1 {
	margin-top: 0.25rem !important;
	margin-bottom: 0.25rem !important;
}

.my-2 {
	margin-top: 0.5rem !important;
	margin-bottom: 0.5rem !important;
}

.my-3 {
	margin-top: 1rem !important;
	margin-bottom: 1rem !important;
}

.my-4 {
	margin-top: 1.5rem !important;
	margin-bottom: 1.5rem !important;
}

.my-5 {
	margin-top: 3rem !important;
	margin-bottom: 3rem !important;
}

.my-auto {
	margin-top: auto !important;
	margin-bottom: auto !important;
}

.mt-0 {
	margin-top: 0 !important;
}

.mt-1 {
	margin-top: 0.25rem !important;
}

.mt-2 {
	margin-top: 0.5rem !important;
}

.mt-3 {
	margin-top: 1rem !important;
}

.mt-4 {
	margin-top: 1.5rem !important;
}

.mt-5 {
	margin-top: 3rem !important;
}

.mt-auto {
	margin-top: auto !important;
}

.mr-0 {
	margin-right: 0 !important;
}

.mr-1 {
	margin-right: 0.25rem !important;
}

.mr-2 {
	margin-right: 0.5rem !important;
}

.mr-3 {
	margin-right: 1rem !important;
}

.mr-4 {
	margin-right: 1.5rem !important;
}

.mr-5 {
	margin-right: 3rem !important;
}

.mr-auto {
	margin-right: auto !important;
}

.mb-0 {
	margin-bottom: 0 !important;
}

.mb-1 {
	margin-bottom: 0.25rem !important;
}

.mb-2 {
	margin-bottom: 0.5rem !important;
}

.mb-3 {
	margin-bottom: 1rem !important;
}

.mb-4 {
	margin-bottom: 1.5rem !important;
}

.mb-5 {
	margin-bottom: 3rem !important;
}

.mb-auto {
	margin-bottom: auto !important;
}

.ml-0 {
	margin-left: 0 !important;
}

.ml-1 {
	margin-left: 0.25rem !important;
}

.ml-2 {
	margin-left: 0.5rem !important;
}

.ml-3 {
	margin-left: 1rem !important;
}

.ml-4 {
	margin-left: 1.5rem !important;
}

.ml-5 {
	margin-left: 3rem !important;
}

.ml-auto {
	margin-left: auto !important;
}

/*=============================================
=                 Padding                     =
=============================================*/

.p-0 {
	padding: 0 !important;
}

.p-1 {
	padding: 0.25rem !important;
}

.p-2 {
	padding: 0.5rem !important;
}

.p-3 {
	padding: 1rem !important;
}

.p-4 {
	padding: 1.5rem !important;
}

.p-5 {
	padding: 3rem !important;
}

.pxy-51 {
	padding: .5rem 1rem !important;
}

.pxy-52 {
	padding: .5rem 2rem !important;
}

.pxy-12 {
	padding: 1rem 2rem !important;
}

.px-0 {
	padding-right: 0 !important;
	padding-left: 0 !important;
}

.px-1 {
	padding-right: 0.25rem !important;
	padding-left: 0.25rem !important;
}

.px-2 {
	padding-right: 0.5rem !important;
	padding-left: 0.5rem !important;
}

.px-3 {
	padding-right: 1rem !important;
	padding-left: 1rem !important;
}

.px-4 {
	padding-right: 1.5rem !important;
	padding-left: 1.5rem !important;
}

.px-5 {
	padding-right: 3rem !important;
	padding-left: 3rem !important;
}

.py-0 {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.py-1 {
	padding-top: 0.25rem !important;
	padding-bottom: 0.25rem !important;
}

.py-2 {
	padding-top: 0.5rem !important;
	padding-bottom: 0.5rem !important;
}

.py-3 {
	padding-top: 1rem !important;
	padding-bottom: 1rem !important;
}

.py-4 {
	padding-top: 1.5rem !important;
	padding-bottom: 1.5rem !important;
}

.py-5 {
	padding-top: 3rem !important;
	padding-bottom: 3rem !important;
}

.pt-0 {
	padding-top: 0 !important;
}

.pt-1 {
	padding-top: 0.25rem !important;
}

.pt-2 {
	padding-top: 0.5rem !important;
}

.pt-3 {
	padding-top: 1rem !important;
}

.pt-4 {
	padding-top: 1.5rem !important;
}

.pt-5 {
	padding-top: 3rem !important;
}

.pr-0 {
	padding-right: 0 !important;
}

.pr-1 {
	padding-right: 0.25rem !important;
}

.pr-2 {
	padding-right: 0.5rem !important;
}

.pr-3 {
	padding-right: 1rem !important;
}

.pr-4 {
	padding-right: 1.5rem !important;
}

.pr-5 {
	padding-right: 3rem !important;
}

.pb-0 {
	padding-bottom: 0 !important;
}

.pb-1 {
	padding-bottom: 0.25rem !important;
}

.pb-2 {
	padding-bottom: 0.5rem !important;
}

.pb-3 {
	padding-bottom: 1rem !important;
}

.pb-4 {
	padding-bottom: 1.5rem !important;
}

.pb-5 {
	padding-bottom: 3rem !important;
}

.pl-0 {
	padding-left: 0 !important;
}

.pl-1 {
	padding-left: 0.25rem !important;
}

.pl-2 {
	padding-left: 0.5rem !important;
}

.pl-3 {
	padding-left: 1rem !important;
}

.pl-4 {
	padding-left: 1.5rem !important;
}

.pl-5 {
	padding-left: 3rem !important;
}


@media screen and (max-width: 500px){
	.pm-0 {
		padding: 0 !important;
	}
}

/*=============================================
=                 Botones                     =
=============================================*/

.btn,
.btn-primary,
.btn-first,
.btn-second,
.btn-third,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger,
.btn-white,
.btn-dark,
.btn-outline-first,
.btn-outline-second,
.btn-outline-third,
.btn-outline-success,
.btn-outline-info,
.btn-outline-warning,
.btn-outline-danger,
.btn-outline-white,
.btn-outline-dark,
.btn-gradient {
	font-weight: 400;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	vertical-align: middle;
	cursor: pointer;
	-webkit-appearance: button;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	border: none;
	padding: 0.375rem 0.75rem;
	font-size: 1rem;
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-primary:disabled,
.btn-first:disabled,
.btn-second:disabled,
.btn-third:disabled,
.btn-success:disabled,
.btn-info:disabled,
.btn-warning:disabled,
.btn-danger:disabled,
.btn-white:disabled,
.btn-dark:disabled,
.btn-gradient:disabled {
	color: gray;
	background-color: var(--disabled);
	border-color: var(--disabled);
	pointer-events: none;
}

.btn-outline-first:disabled,
.btn-outline-second:disabled,
.btn-outline-third:disabled,
.btn-outline-success:disabled,
.btn-outline-info:disabled,
.btn-outline-warning:disabled,
.btn-outline-danger:disabled,
.btn-outline-white:disabled,
.btn-outline-dark:disabled {
	color: gray;
	background-color: #fff;
	border: 2px solid var(--disabled);
	pointer-events: none;
}

.btn {
	color: #fff;
	background-color: transparent;
}

.btn-primary,
.btn-first {
	color: #fff;
	background-color: var(--first);
}
.btn-primary:hover,
.btn-first:hover {
	color: #72B324;
	background-color: var(--first-h);
}
.btn-primary:focus,
.btn-first:focus {
	color: #fff;
	background-color: var(--first);
	box-shadow: 0 0 0 0.17rem var(--first-h);
	outline: 0;
}
.btn-primary:active,
.btn-first:active {
	color: #fff;
	background-color: var(--first);
}
.btn-primary:active:focus,
.btn-first:active:focus {
	box-shadow: 0 0 0 0.17rem var(--first-h);
}

.btn-second {
	color: #fff;
	background-color: var(--first);
}
.btn-second:hover {
	color: #fff;
	background-color: var(--first-h);
}
.btn-second:focus {
	color: #fff;
	background-color: var(--first);
	box-shadow: 0 0 0 0.17rem var(--first-h);
	outline: 0;
}
.btn-second:active {
	color: #fff;
	background-color: var(--first);
}
.btn-second:active:focus {
	box-shadow: 0 0 0 0.17rem var(first);
}

.btn-third {
	color: #fff;
	background-color: var(--third);
}
.btn-third:hover {
	color: #fff;
	background-color: var(--third-h);
}
.btn-third:focus {
	color: #fff;
	background-color: var(--third);
	box-shadow: 0 0 0 0.17rem var(--third-h);
	outline: 0;
}
.btn-third:active {
	color: #fff;
	background-color: var(--third);
}
.btn-third:active:focus {
	box-shadow: 0 0 0 0.17rem var(--third-h);
}

.btn-success {
	color: #fff;
	background-color: var(--success);
}
.btn-success:hover {
	color: #fff;
	background-color: var(--success-h);
}
.btn-success:focus {
	color: #fff;
	background-color: var(--success);
	box-shadow: 0 0 0 0.17rem var(--success-h);
	outline: 0;
}
.btn-success:active {
	color: #fff;
	background-color: var(--success);
}
.btn-success:active:focus {
	box-shadow: 0 0 0 0.17rem var(--success-h);
}

.btn-info {
	color: #fff;
	background-color: var(--info);
}
.btn-info:hover {
	color: #fff;
	background-color: var(--info-h);
}
.btn-info:focus {
	color: #fff;
	background-color: var(--info);
	box-shadow: 0 0 0 0.17rem var(--info-h);
	outline: 0;
}
.btn-info:active {
	color: #fff;
	background-color: var(--info);
}
.btn-info:active:focus {
	box-shadow: 0 0 0 0.17rem var(--info-h);
}

.btn-warning {
	color: #fff;
	background-color: var(--warning);
}
.btn-warning:hover {
	color: #fff;
	background-color: var(--warning-h);
}
.btn-warning:focus {
	color: #fff;
	background-color: var(--warning);
	box-shadow: 0 0 0 0.17rem var(--warning-h);
	outline: 0;
}
.btn-warning:active {
	color: #fff;
	background-color: var(--warning);
}
.btn-warning:active:focus {
	box-shadow: 0 0 0 0.17rem var(--warning-h);
}

.btn-danger {
	color: #fff;
	background-color: var(--danger);
}
.btn-danger:hover {
	color: #fff;
	background-color: var(--danger-h);
}
.btn-danger:focus {
	color: #fff;
	background-color: var(--danger);
	box-shadow: 0 0 0 0.17rem var(--danger-h);
	outline: 0;
}
.btn-danger:active {
	color: #fff;
	background-color: var(--danger);
}
.btn-danger:active:focus {
	box-shadow: 0 0 0 0.17rem var(--danger-h);
}

.btn-white {
	color: var(--first);
	background-color: var(--white);
}
.btn-white:hover {
	color: var(--first);
	background-color: var(--white-h);
}
.btn-white:focus {
	color: var(--first);
	background-color: var(--white);
	box-shadow: 0 0 0 0.17rem var(--white-h);
	outline: 0;
}
.btn-white:active {
	color: var(--first);
	background-color: var(--white);
}
.btn-white:active:focus {
	box-shadow: 0 0 0 0.17rem var(--white-h);
}

.btn-dark {
	color: #fff;
	background-color: var(--dark);
}
.btn-dark:hover {
	color: #fff;
	background-color: var(--light);
}
.btn-dark:focus {
	color: #fff;
	background-color: var(--dark);
	box-shadow: 0 0 0 0.17rem var(--light);
	outline: 0;
}
.btn-dark:active {
	color: #fff;
	background-color: var(--dark);
}
.btn-dark:active:focus {
	box-shadow: 0 0 0 0.17rem var(--light);
}

.btn-outline-first {
	color: var(--first);
	border: 2px solid var(--first);
	background-color: transparent;
}
.btn-outline-first:hover {
	color: #fff;
	background-color: var(--first);
	border: 2px solid var(--first);
}
.btn-outline-first:focus {
	box-shadow: 0 0 0 0.25rem var(--first-h);
	outline: 0;
}
.btn-outline-first:active {
	color: #fff;
	background-color: var(--first);
	border: 2px solid var(--first);
}
.btn-outline-first:active:focus {
	box-shadow: 0 0 0 0.25rem var(--first-h);
}

.btn-outline-second {
	color: var(--second);
	border: 2px solid var(--second);
	background-color: transparent;
}
.btn-outline-second:hover {
	color: #fff;
	background-color: var(--second);
	border: 2px solid var(--second);
}
.btn-outline-second:focus {
	box-shadow: 0 0 0 0.25rem var(--second-h);
	outline: 0;
}
.btn-outline-second:active {
	color: #fff;
	background-color: var(--second);
	border: 2px solid var(--second);
}
.btn-outline-second:active:focus {
	box-shadow: 0 0 0 0.25rem var(--second-h);
}

.btn-outline-third {
	color: var(--third);
	border: 2px solid var(--third);
	background-color: transparent;
}
.btn-outline-third:hover {
	color: #fff;
	background-color: var(--third);
	border: 2px solid var(--third);
}
.btn-outline-third:focus {
	box-shadow: 0 0 0 0.25rem var(--third-h);
	outline: 0;
}
.btn-outline-third:active {
	color: #fff;
	background-color: var(--third);
	border: 2px solid var(--third);
}
.btn-outline-third:active:focus {
	box-shadow: 0 0 0 0.25rem var(--third-h);
}

.btn-outline-success {
	color: var(--success);
	border: 2px solid var(--success);
	background-color: transparent;
}
.btn-outline-success:hover {
	color: #fff;
	background-color: var(--success);
	border: 2px solid var(--success);
}
.btn-outline-success:focus {
	box-shadow: 0 0 0 0.25rem var(--success-h);
	outline: 0;
}
.btn-outline-success:active {
	color: #fff;
	background-color: var(--success);
	border: 2px solid var(--success);
}
.btn-outline-success:active:focus {
	box-shadow: 0 0 0 0.25rem var(--success-h);
}

.btn-outline-info {
	color: var(--info);
	border: 2px solid var(--info);
	background-color: transparent;
}
.btn-outline-info:hover {
	color: #fff;
	background-color: var(--info);
	border: 2px solid var(--info);
}
.btn-outline-info:focus {
	box-shadow: 0 0 0 0.25rem var(--info-h);
	outline: 0;
}
.btn-outline-info:active {
	color: #fff;
	background-color: var(--info);
	border: 2px solid var(--info);
}
.btn-outline-info:active:focus {
	box-shadow: 0 0 0 0.25rem var(--info-h);
}

.btn-outline-warning {
	color: var(--warning);
	border: 2px solid var(--warning);
	background-color: transparent;
}
.btn-outline-warning:hover {
	color: #fff;
	background-color: var(--warning);
	border: 2px solid var(--warning);
}
.btn-outline-warning:focus {
	box-shadow: 0 0 0 0.25rem var(--warning-h);
	outline: 0;
}
.btn-outline-warning:active {
	color: #fff;
	background-color: var(--warning);
	border: 2px solid var(--warning);
}
.btn-outline-warning:active:focus {
	box-shadow: 0 0 0 0.25rem var(--warning-h);
}

.btn-outline-danger {
	color: var(--danger);
	border: 2px solid var(--danger);
	background-color: transparent;
}
.btn-outline-danger:hover {
	color: #fff;
	background-color: var(--danger);
	border: 2px solid var(--danger);
}
.btn-outline-danger:focus {
	box-shadow: 0 0 0 0.25rem var(--danger-h);
	outline: 0;
}
.btn-outline-danger:active {
	color: #fff;
	background-color: var(--danger);
	border: 2px solid var(--danger);
}
.btn-outline-danger:active:focus {
	box-shadow: 0 0 0 0.25rem var(--danger-h);
}

.btn-outline-white {
	color: var(--white);
	border: 2px solid var(--white);
	background-color: transparent;
}
.btn-outline-white:hover {
	color: #000;
	background-color: var(--white);
	border: 2px solid var(--white);
}
.btn-outline-white:focus {
	box-shadow: 0 0 0 0.25rem var(--white-h);
	outline: 0;
}
.btn-outline-white:active {
	color: #000;
	background-color: var(--white);
	border: 2px solid var(--white);
}
.btn-outline-white:active:focus {
	box-shadow: 0 0 0 0.25rem var(--white-h);
}

.btn-outline-dark {
	color: var(--dark);
	border: 2px solid var(--dark);
	background-color: transparent;
}
.btn-outline-dark:hover {
	color: #fff;
	background-color: var(--dark);
	border: 2px solid var(--dark);
}
.btn-outline-dark:focus {
	box-shadow: 0 0 0 0.25rem var(--light);
	outline: 0;
}
.btn-outline-dark:active {
	color: #fff;
	background-color: var(--dark);
	border: 2px solid var(--dark);
}
.btn-outline-dark:active:focus {
	box-shadow: 0 0 0 0.25rem var(--light);
}

.btn-gradient {
	color: #fff;
	background: radial-gradient(50% 50% at 50% 50%, var(--first) 0%, var(--second) 100%);
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.btn-gradient:hover {
	color: #fff;
	background: radial-gradient(50% 50% at 50% 50%, var(--first-h) 0%, var(--second-h) 100%);
}
.btn-gradient:focus {
	color: #fff;
	background: radial-gradient(50% 50% at 50% 50%, var(--first) 0%, var(--second) 100%);
	box-shadow: 0 0 0 0.17rem var(--second-h);
	outline: 0;
}
.btn-gradient:active {
	color: #fff;
	background: radial-gradient(50% 50% at 50% 50%, var(--first) 0%, var(--second) 100%);
}
.btn-gradient:active:focus {
	box-shadow: 0 0 0 0.17rem var(--second-h);
}


/*=============================================
=                  Alertas                    =
=============================================*/

.alert-first,
.alert-second,
.alert-third,
.alert-success,
.alert-info,
.alert-warning,
.alert-danger,
.alert-white,
.alert-light,
.alert-dark {
	padding: 0.5rem;
	margin-bottom: 0.5rem;
	border: none;
	border-radius: 0.25rem;
	width: 100%;
}

.alert-first {
	color: #235A7B;
	background-color: var(--first-h);
}

.alert-second {
	color: var(--second);
	background-color: var(--second-o);
}

.alert-third {
	color: var(--third);
	background-color: var(--third-o);
}

.alert-success {
	color: var(--success);
	background-color: var(--success-o);
}

.alert-info {
	color: var(--info);
	background-color: var(--info-o);
}

.alert-warning {
	color: var(--warning);
	background-color: var(--warning-o);
}

.alert-danger {
	color: var(--danger);
	background-color: var(--danger-o);
}

.alert-white {
	color: #636464;
	background-color: #fefefe;
}

.alert-light {
	color: #41464b;
	background-color: #e2e3e5;
}

.alert-dark {
	color: #141619;
	background-color: #d3d3d4;
}

/*=============================================
=                Background                   =
=============================================*/

.bg-white {
	background-color: var(--white);
}

.bg-first {
	background-color: var(--first);
}

.bg-second {
	background-color: var(--second);
}

.bg-third {
	background-color: var(--third);
}

.bg-success {
	background-color: var(--success-o);
}

.bg-info {
	background-color: var(--info-o);
}

.bg-warning {
	background-color: var(--warning-o);
}

.bg-danger {
	background-color: var(--danger-o);
}

.bg-body {
	background-color: var(--bgBody);
}

.bg-image {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.bg-image {
	background-image: var(--urlImage-mobile);
}

.bg-grad {
	background: linear-gradient(to bottom, var(--first), var(--second));
	background-repeat: no-repeat;
}

.bg-grad-mod,
.bg-image-mod {
	background-color: #fff;
}

.bg-fondo {
	height: 100px;
	background-color: var(--first);
}

.bg-fondo-mod {
	height: 120px;
	justify-content: space-between;
	background-color: var(--first);
}

.logo-mod{
	width: 200px;	
}

.logo-mod1{
	width: 250px;
	margin-right: auto;
	margin-left: 1em;
}

.espacio{
	width: 10px;
}

/*#textBtn {
	display: none;
}*/

@media screen and (min-width: 500px){
	.bg-grad-mod {
		background: linear-gradient(to bottom, var(--first), var(--second));
		background-repeat: no-repeat;
	}
	.bg-image {
		background-image: var(--urlImage);
	}
	.bg-image-mod {
		background-image: var(--urlImage);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
	}
	.bg-fondo {
		height: 120px;	
	}
	.bg-fondo-mod {
		height: 120px;
		background-position: center;	
	}
	.logo-mod{
		width: 300px;
	}
	.logo-mod1{
		width: 250px;
	}
}

@media screen and (min-width: 676px){
	#textBtn {
		display: block;
	}
}

@media (max-width: 370px){
	.bg-fondo {
		height: 75px;
	}
	.bg-fondo-mod {
		height: 70px;		
	}	
	.logo-mod{
		width: 200px;
	}
	.logo-mod1{
		width: 200px;
	}
}

/*=============================================
=                 Imagenes                    =
=============================================*/

.logo {
	flex-grow: 1;
	max-width: 180px;
}

.img-v,
.img-h {
	width: 100%;
	object-fit: cover;
	object-position: center;
}

@media (min-width: 500px){
	.img-v {
		width: 80%;
	}
	.img-h {
		width: 80%;
	}
}

@media (min-width: 800px){
	.img-v {
		width: 47%;
	}
	.img-h {
		width: 80%;
	}
}

@media (max-width: 370px){
	.logo{
		max-width: 180px;
	}
}

/*=============================================
=                 Slider                      =
=============================================*/

.slider,
.slider-2,
.slider-3,
.slider-4 {
	overflow: hidden;

}

.slider ul,
.slider-2 ul,
.slider-3 ul,
.slider-4 ul {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0;
}

.slider li,
.slider-2 li,
.slider-3 li,
.slider-4 li {
	width: 100%;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

.slider ul {
	width: 100%;
}

.slider-2 ul {
	width: 200%;
	animation: slide-2 10s infinite step-start;
}

@keyframes slide-2 {
	0%{margin-left: 0;}
	50%{margin-left: 0;}

	55%{margin-left: -100%;}
	100%{margin-left: -100%;}
}

.slider-3 ul {
	width: 300%;
	animation: slide-3 15s infinite step-start;
}

@keyframes slide-3 {
	0%{margin-left: 0;}
	30%{margin-left: 0;}

	35%{margin-left: -100%;}
	65%{margin-left: -100%;}

	70%{margin-left: -200%;}
	100%{margin-left: -200%;}
}

.slider-4 ul {
	width: 400%;
	animation: slide-4 20s infinite step-start;
}

@keyframes slide-4 {
	0%{margin-left: 0;}
	20%{margin-left: 0;}

	25%{margin-left: -100%;}
	45%{margin-left: -100%;}

	50%{margin-left: -200%;}
	70%{margin-left: -200%;}

	75%{margin-left: -300%;}
	100%{margin-left: -300%;}
}

/*=============================================
=              Alerta PopUp                   =
=============================================*/

#popup_overlay {
	background-color: var(--bgFondo) !important;
	opacity: var(--opacityFondo) !important;
}

#popup_container {
	background-color: var(--bgContainer);
	border: var(--borderContainer);
	border-radius: var(--radiusConainer);
	width: 90% !important;
	box-shadow: var(--shadowContainer);
	padding: 1rem !important;
}

#popup_title {
	color: var(--colorTitle);
	font-size: 1.2rem;
	font-weight: bold;
	padding: 1rem 1rem .5rem 1rem;
	text-align: center;
	width: 100%;
	border-radius: var(--radiusTitle);
	box-shadow: var(--shadowTitle); 
	background-color: var(--bgTitle);
}

#popup_content {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto;
	padding: 0 1rem 0 1rem;
	color: var(--colorTexto);
	text-align: center;
}

#popup_icon,
#popup_message {
	display: flex;
	justify-content:center;
	align-items: center;
}

#popup_icon {
	font-size: 2.5rem;
	color: var(--colorIcon);	
	grid-column: 1;
}

#popup_message {
	font-size: 1rem;
	padding: 1rem;
	grid-column: 2;
}


/*#popup_message::before {
  font-family: 'icomoon' !important;
  content: "\f907";
  color: var(--first);
  font-size: 2rem;
  text-align: center;
}*/


#popup_panel {
	text-align: center;	
	margin: .5rem 0 1rem 0;
	width: 100%;
	grid-column: 1 / 3;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: row;
	gap: 10px;
}

#popup_ok,
#popup_cancel {
	border: var(--borderBtn);
	border-radius: var(--radiusBtn);
	box-shadow: var(--shadowBtn);
	font-size: 1.1rem;
	padding: .5rem 1.5rem;
	cursor: pointer;
	outline: none;
}

#popup_ok {
	background: var(--bgBtnOk);
	color: var(--colorBtnOk);
	margin-left: .5rem;
}

#popup_ok:hover {
	background: var(--bgBtnHoverOk);
	color: var(--colorBtnHoverOk);
}

#popup_cancel {
	background: var(--bgBtnCancel);
	color: var(--colorBtnCancel);
}

#popup_cancel:hover {
	background: var(--bgBtnHoverCancel);
	color: var(--colorBtnHoverCancel);
}

/*#popup_content.confirm::before {
  font-family: 'icomoon' !important;
  content: "\e907";
  color: var(--main);
  font-size: 2rem;
  text-align: center;
}*/

@media screen and (min-width: 500px){
	#popup_container {
		width: 60% !important;
	}
}

@media screen and (min-width: 768px){
	#popup_container {
		width: 50% !important;
	}
}

@media screen and (min-width: 900px){
	#popup_container {
		width: 35% !important;
	}
}

@media screen and (max-width: 370px){
	#popup_panel {	
		flex-direction: column;
	}
	#popup_ok {
		margin-left: 0rem;
		margin-bottom: .5rem;
	}
}

/*=============================================
=              Width - Height                 =
=============================================*/

.w-25 {
	width: 25% !important;
}

.w-50 {
	width: 50% !important;
}

.w-75 {
	width: 75% !important;
}

.w-80 {
	width: 80% !important;
}

.w-90 {
	width: 90% !important;
}

.w-100 {
	width: 100% !important;
}

.w-auto {
	width: auto !important;
}

.mw-100 {
	max-width: 100% !important;
}

.vw-100 {
	width: 100vw !important;
}

.min-vw-100 {
	min-width: 100vw !important;
}

@media screen and (max-width: 500px){
	.wm-80 {
		width: 80% !important;
	}
	.wm-85 {
		width: 85% !important;
	}
	.wm-90 {
		width: 90% !important;
	}
	.wm-95 {
		width: 95% !important;
	}
	.wm-100 {
		width: 100% !important;
	}
}

@media screen and (min-width: 500px){	
	.wt-30 {
		width: 30% !important;
	}
	.wt-35 {
		width: 35% !important;
	}
	.wt-40 {
		width: 40% !important;
	}
	.wt-45 {
		width: 45% !important;
	}
	.wt-50 {
		width: 50% !important;
	}
	.wt-55 {
		width: 55% !important;
	}
	.wt-60 {
		width: 60% !important;
	}
	.wt-65 {
		width: 65% !important;
	}
	.wt-70 {
		width: 70% !important;
	}
	.wt-75 {
		width: 75% !important;
	}
	.wt-80 {
		width: 80% !important;
	}
	.wt-85 {
		width: 85% !important;
	}
	.wt-90 {
		width: 90% !important;
	}
	.wt-95 {
		width: 95% !important;
	}
	.wt-100 {
		width: 100% !important;
	}
}

@media screen and (min-width: 900px){
	.wd-25 {
		width: 25% !important;
	}
	.wd-30 {
		width: 30% !important;
	}
	.wd-35 {
		width: 35% !important;
	}
	.wd-38 {
		width: 38% !important;
	}
	.wd-40 {
		width: 40% !important;
	}
	.wd-45 {
		width: 45% !important;
	}
	.wd-50 {
		width: 50% !important;
	}
	.wd-55 {
		width: 55% !important;
	}
	.wd-60 {
		width: 60% !important;
	}
	.wd-65 {
		width: 65% !important;
	}
	.wd-70 {
		width: 70% !important;
	}
	.wd-75 {
		width: 75% !important;
	}
	.wd-80 {
		width: 80% !important;
	}
	.wd-85 {
		width: 85% !important;
	}
	.wd-90 {
		width: 90% !important;
	}
	.wd-95 {
		width: 95% !important;
	}
	.wd-100 {
		width: 100% !important;
	}
}


.h-25 {
	height: 25% !important;
}

.h-50 {
	height: 50% !important;
}

.h-75 {
	height: 75% !important;
}

.h-80 {
	height: 80% !important;
}

.h-90 {
	height: 90% !important;
}

.h-100 {
	height: 100% !important;
}

.h-auto {
	height: auto !important;
}

.mh-100 {
	max-height: 100% !important;
}

.vh-100 {
	height: 100vh !important;
}

.min-vh-100 {
	min-height: 100vh !important;
}

/*=============================================
=                 Forms                       =
=============================================*/

/**
 * Para usar los Estilo FIELD vea la sección de Comentarios Adicionales al final de este documento.
 */

.form {
	padding: 1rem;
	width: 100%;
}

.fields-1 {
	width: 100%;
}

.fields-1 .field {
	display: flex;
	align-items: center;
	width: 100% !important;
	margin: .3rem 0;
}

.fields-1 .field .inputs{
	width: 100%;
}

.fields-1 .field .inputs input,
.fields-1 .field .inputs select {
	padding: .5rem;
	border: 1px solid var(--borderInputs);
	border-radius: 3px;
	color: var(--colorInputs);
	outline-color: var(--borderInputs);
	background-color: var(--bgInputs);
	font-size: 1rem;
}

.fields-1 .field .inputs select {
	background-image: linear-gradient(to right, var(--borderInputs), var(--borderInputs));
	background-position: calc(100% - 1.3em) ;
	background-size: 1px 80%;
	background-repeat: no-repeat;
	cursor: pointer;
}

/*----------------------*/

.fields-2 {
	width: 100%;
}

.fields-2 .field {
	display: flex;
	align-items: center;
	width: 100%;
	margin: .7rem 0;
}

.fields-2 .field i{
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	width: 50px;
	background-color: var(--third);
	color: var(--white);
	border-radius: 25px 0 0 25px;
	font-size: 20px;
}

.fields-2 .field .inputs {
	width: 100%;
}

.fields-2 .field .inputs input,
.fields-2 .field .inputs select {
	padding: .7rem;
	border: none;
	border-radius: 0 25px 25px 0;
	background-color: var(--bgInputs);
	color: var(--colorInputs);
	outline-color: var(--outlineInputs);
}

.fields-2 .field .inputs select {
	background-image: linear-gradient(to right, var(--borderInputs), var(--borderInputs));
	background-position: calc(100% - 1.7em) ;
	background-size: 1px 80%;
	background-repeat: no-repeat;
	cursor: pointer;
}

.fields-2 .field .inputs .error {
	border: 2px solid var(--borderInputs);
}

/*----------------------*/

.fields-3 {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	grid-column-gap: 5px;
	grid-row-gap: 5px;
	padding: 1rem;
	width: 100%;
}

.fields-3 .field,
.fields-3 .field i,
.fields-3 .field .inputs {
	display: flex;
	align-items: center;
}

.fields-3 .field i {
	justify-content: center;
	font-size: 1.3rem;
	min-width: 40px;
	color: var(--first);
}

.fields-3 .field .inputs {
	width: 100%;
	position: relative;
	padding: 0.7rem 0rem;	
}

.fields-3 .field .inputs label {
	position: absolute;
	margin-left: 0.3rem;
	color: var(--first);
	z-index: 1;
}

.fields-3 .field .inputs label.texto {
	color: var(--third);
}

.fields-3 .field .inputs label.focus {
	top: -8;
	font-size: 0.75rem;
}

.fields-3 .field .inputs input,
.fields-3 .field .inputs select,
.fields-3 .field .inputs textarea {
	border: none;
	border-bottom: 1px solid var(--first);
	color: var(--dark) !important;
	font-size: 1rem;
	background-color: transparent;
	outline: none;
	z-index: 2;
}

.fields-3 .field .inputs input,
.fields-3 .field .inputs textarea {
	padding: 0 .3rem;
}

.fields-3 .field .inputs select {
	cursor: pointer;
}

.fields-3 .field .inputs textarea {
	resize: none;
}

.fields-3 .field .inputs *:focus {
	border: none;
	border-bottom: 2px solid var(--first);
}

/*.fields-3 .field .inputs .error {
	border: none;
	border-right: 1px solid var(--danger);
	border-bottom: 2px solid var(--danger);
}*/

.fields-3 .field .inputs .error {
	border: none;
	border-bottom: 2px solid var(--first);
}

@media screen and (min-width: 768px){
	.fields-3 {
		grid-template-columns: 1fr 1fr ;
	}
	#question {
	  grid-column: 1 / 3;
	}
	.field-3:last-child {
	  grid-column: 1 / 3;
	}
}


/*----------------------*/

.fields-4 {
	width: 100%;
}

.fields-4 .field {
	display: flex;
	flex-direction: column;
	width: 100% !important;
	margin: .3rem 0;
}

.fields-4 .field label{
	width: 100%;
	padding: .5rem 0;
}

.fields-4 .field .inputs{
	width: 100%;
}

.fields-4 .field .inputs input,
.fields-4 .field .inputs select {
	padding: .3rem;
	border: 1px solid var(--borderInputs);
	border-radius: 3px;
	color: var(--colorInputs);
	outline-color: var(--borderInputs);
	font-size: 1rem;
	background-color: #FFF;
}

.fields-4 .field .inputs select {
	background-image: linear-gradient(to right, var(--borderInputs), var(--borderInputs));
	background-position: calc(100% - 1.3em) ;
	background-size: 1px 80%;
	background-repeat: no-repeat;
	cursor: pointer;
}

::placeholder {
	color:  var(--colorPlaceholder);
	text-transform: none;
}

:-ms-input-placeholder {
	color:  var(--colorPlaceholder);
	text-transform: none;
}

::-ms-input-placeholder {
	color:  var(--colorPlaceholder);
	text-transform: none;
}

@media screen and (min-width: 900px){
	.fields-4 .field {
		flex-direction: row;
		align-items: center;
	}
	.fields-4 .field label{
		width: 30%;
		padding: 0;
	}

	.fields-4 .field .inputs{
		width: 70%;
	}
}

.singleInput {
	text-align: center; 
	border-radius: 5px; 
	height: 30px; 
	border: 1px solid var(--borderInputs);  
	line-height: 3;
	padding: 0 .3rem;
	outline: none;
	font-size: 1rem;
}

/*=============================================
=                 CheckBox                    =
=============================================*/

.check {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}

@media (max-width: 500px){
	.check-mod {
	  align-items: start;
	}
}

@media (min-width: 900px){
	.check {
		justify-content: center;
		width: auto;
	}	
}

.check-1,
.check-2,
.check-3,
.check-4 {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	font-family: 'boxicons' !important;    
	font-size: var(--sizeCheck);
	color: var(--colorCheck);
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: .35rem;
	cursor: pointer;
}

.check-label{
	cursor: pointer;
}

.check-1:focus,
.check-2:focus,
.check-3:focus,
.check-4:focus {
	outline: 1;
	outline-color: var(--first-h);
	/*opacity: .5;*/
}

.check-1:before {	
	content: "\ee88";	
}

.check-1:checked[type=checkbox]:before {
	content: "\ea25";
	color: var(--colorCheck);
}

.check-2:before {	
	content: "\eca5";	
}

.check-2:checked[type=checkbox]:before {
	content: "\ea21";
	font-weight: bold;
	color: var(--colorCheck);
}

.check-3:before {	
	content: "\ecbf";
}

.check-3:checked[type=checkbox]:before {
	content: "\ea23";
	color: var(--colorCheck);
}

.check-4:before {	
	content: "\f111";	
}

.check-4:checked[type=checkbox]:before {
	content: "\f058";
	color: var(--colorCheck);
}

.check-1:disabled,
.check-1:disabled ~ .check-label,
.check-2:disabled,
.check-2:disabled ~ .check-label,
.check-3:disabled,
.check-3:disabled ~ .check-label,
.check-4:disabled,
.check-4:disabled ~ .check-label {
  pointer-events: none;
  filter: none;
  color: var(--disabled);
}

/*=============================================
=                 RadioButton                 =
=============================================*/

.radio {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 100%;  
}

.radio-1,
.radio-2 {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	font-family: 'boxicons' !important;    
	font-size: 1.3rem;
	color: var(--first);
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: .35rem;
	cursor: pointer;

}

.radio-text{
	cursor: pointer;
}

.radio-1:focus,
.radio-2:focus  {
	outline: 0;
}

.radio-1:before {	
	content: "\ee36";	
}

.radio-1:checked[type=radio]:before {
	content: "\ee37";
	color: var(--first);
}

.radio-2:before {	
	content: "\ecbf";	
}

.radio-2:checked[type=radio]:before {
	content: "\ea23";
	color: var(--first);
}

.radio-1:disabled,
.radio-1:disabled ~ .radio-text,
.radio-2:disabled,
.radio-2:disabled ~ .radio-text {
	pointer-events: none;
	filter: none;
	color: var(--disabled);
}


/*=============================================
=                 Ellipsis                    =
=============================================*/

.lds-ellipsis {
	display: inline-block;
	position: relative;
	width: 64px;
	height: 64px;
}

.lds-ellipsis div {
	position: absolute;
	top: 27px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--third);
	-webkit-animation-timing-function: cubic-bezier(0, 1, 1, 0);
	animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1) {
	left: 6px;
	-webkit-animation: lds-ellipsis1 0.6s infinite;
	animation: lds-ellipsis1 0.6s infinite;
}

.lds-ellipsis div:nth-child(2) {
	left: 6px;
	-webkit-animation: lds-ellipsis2 0.6s infinite;
	animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(3) {
	left: 26px;
	-webkit-animation: lds-ellipsis2 0.6s infinite;
	animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(4) {
	left: 45px;
	-webkit-animation: lds-ellipsis3 0.6s infinite;
	animation: lds-ellipsis3 0.6s infinite;
}

@-webkit-keyframes lds-ellipsis1 {
	0% {
		-webkit-transform: scale(0);
		transform: scale(0);
	}
	100% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}

@keyframes lds-ellipsis1 {
	0% {
		-webkit-transform: scale(0);
		transform: scale(0);
	}
	100% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}

@-webkit-keyframes lds-ellipsis3 {
	0% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
	100% {
		-webkit-transform: scale(0);
		transform: scale(0);
	}
}

@keyframes lds-ellipsis3 {
	0% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
	100% {
		-webkit-transform: scale(0);
		transform: scale(0);
	}
}

@-webkit-keyframes lds-ellipsis2 {
	0% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}
	100% {
		-webkit-transform: translate(19px, 0);
		transform: translate(19px, 0);
	}
}

@keyframes lds-ellipsis2 {
	0% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}
	100% {
		-webkit-transform: translate(19px, 0);
		transform: translate(19px, 0);
	}
}

/*=============================================
=                 Chatmain                    =
=============================================*/

/*.btnSalir {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.btnSalir button {
  border: none;
  color: var(--first);
  cursor: pointer;
  margin-bottom: 5px;
  background-color: transparent;
}

.boxFrame {
	flex-grow: 1;
}

.boxFrame-mod {
	flex-grow: 1;
	overflow-y: auto;
	height: 100;
}

#ChatTextControl {
	width: 100%;
	display: flex;
	height: 70px;
}

#ChatTextControl form {
	flex-grow: 1;
	height: 100%;
}

.chatMainBoxUser {
	border: 1px solid var(--borderInputs);
	height: 100%;
	padding: .5rem;
	outline-color: var(--borderInputs);
	resize: none;
}

.typing {
	display: flex;
	justify-content: center;
	align-items: center;
}

#typingAgent,
#typingAgentTEMP {
	font-size: 0.8rem;
	font-style: italic;
	color: gray;
}

.buttons {
	display: flex;
	flex-direction: column;
	width: 25%;
}

.buttons button {
	margin: 0 7px 3px 7px;

}
*/
/*Para activar el Estilo 2 de textarea... 
Comente el código anterior de la sección Chatmain y descomente el siguiente codigo.
Adicional vea las configuraciones en los comentarios al final de este documento*/

.boxFrame {
	flex-grow: 1;
}

.boxFrame-mod {
	flex-grow: 1;
	overflow-y: auto;
	height: 100;
}

#ChatTextControl {
	display: flex;
	padding: 0 !important;
	width: 100%;	
	position: relative;
	height: 45px;
}

#ChatTextControl.close {
	display: none !important;
}

#ChatTextControl form {
	flex-grow: 1;
	position: relative;
	margin-right: 40px;
	height: 100%;
}

.chatMainBoxUser {
	border: 1px solid #F4F4F4;
	border-radius: 7px 0px 0px 7px;
	height: 40px;
	min-height:40px;
	max-height: 75px;	
	position: absolute;
	bottom: 0;
	left: 0;
	padding: .6rem 2.5rem 0rem 1rem !important;
	outline-color: var(--outlineInputs);
}

@media (max-width: 370px){
	.chatMainBoxUser {
		max-height: 65px;	
	}
}

.buttons {
	display: flex;
}

.buttons i {
	width: 40px;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;	
	position: absolute;
	cursor: pointer;
}

.buttons i:first-child {
	z-index: 1;
	bottom: 0;
	right: 45px;
	color: #87868A;
	font-size: 1.7rem;
}

.buttons i:last-child {
	background: var(--first);
	bottom: 0;
	right: 0;
	color: #fff;
	font-size: 1.5rem;
	border-radius: 0px 7px 7px 0px;
}

.buttons input {
	font-size: 1rem;
	padding: 0.5rem;
	margin-left: 10px;
}

.buttons input:nth-child(1) {
	margin-bottom: 0.3rem;
}

.typing {
	display: flex;
	justify-content: center;
	align-items: center;
}

#typingAgent,
#typingAgentTEMP{
	font-size: 0.8rem;
	font-style: italic;
	color: gray;
}

/*=============================================
=                 Yak                         =
=============================================*/

#conversation-text {
	padding: 0.5rem 1rem;
	flex-grow: 1;
	overflow-y: auto;
}
/* #conversation-text ::-webkit-scrollBar { */
	/* display: block !important; */
/* } */

#ytext {
	display: flex !important;
	flex-direction: column;
	font-size: 13px;
	color: #808080;
	text-align: center;
}

#ytext > div {
	margin-bottom: 7px;
}

.chat-announcement {
	font-style: italic;
	text-align: center;	
}

.text-muted {
	text-align: center;
	font-size: 11px;
	font-style: italic;
}

.chat-line {
	display: flex;	
}

.msj-client {	
	width: 100%;
	flex-direction: row-reverse;
}

.chat-client {
	border-radius: 15px;
	padding: .7rem 1.3rem;
	/*background-color: #D3D3D3;*/
	background-color: #cef1ca;
	width: auto;
	max-width: 80%;
	display: grid !important;
	grid-template-columns: 1fr auto;
	grid-template-rows: 2fr;	
	grid-row-gap: 2px;	
	position: relative;
	margin-right: 16px;
	word-break: break-all;
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.chat-client::before{
	width: 0;
	height: 0;
	content:"";
	top:25px;
	left:100%;
	position:absolute;
	border-style: solid;
	border-width: 14px 20px 0 0;
	/*border-color: #D3D3D3 transparent transparent transparent; */
	border-color: #cef1ca transparent transparent transparent; 
	display: block;
}  

.text-client {
	font-size: .875rem;
	text-align: left;
	margin: 0 !important;
	color: #000;	
	word-break: break-word;
	order: 3;
	grid-row: 2;
	grid-column: 1 / 3;
}

.client-name {
	font-size: .75rem;
	font-weight: 900 !important;
	text-align: left;
	/*color: #000;*/
	color: #1b890f;
	order: 1;
	grid-row: 1;
	grid-column: 1 / 2;
	word-break: break-word;
}

.time-client {
	font-size: 10px;
	font-style: italic;
	color: var(--dark);
	text-align: right;
	margin-top: 2px;
	margin-left: 5px;
	order: 2; 
	grid-row: 1;
	grid-column: 2 / 3;	
}

.avatar-client {
	background-image: url('../images/cliente.png');
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	width: 28px;
	height: 28px;
}

.msj-operator {
	width: 100%;
}

.chat-operator {
	border-radius: 15px;
	padding: .7rem 1.3rem;
	margin-right: 3px;
	background-color: #E0E9F2;
	width: auto;
	max-width: 80%;
	display: grid !important;
	grid-template-columns: auto 1fr;
	grid-template-rows: 2fr;	
	grid-row-gap: 2px;	
	position: relative;
	word-break: break-all;
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);	
}

.chat-operator::before{
	width: 0;
	height: 0;
	content:"";
	top:25px;
	left:-16px;
	position:absolute;
	border-style: solid;
	border-width: 0 16px 13px 0;
	border-color: transparent #E0E9F2 transparent transparent;            
	display: inline-block;
}

.text-operator {
	font-size: .875rem;
	text-align: left;
	margin: 0 !important;
	color: var(--dark);	
	word-break: break-word;
	order: 3;
	grid-row: 2;
	grid-column: 1 / 3;
}

.operator-name {
	font-size: .75rem;
	font-weight: bold;
	text-align: left;
	color: #054664;
	order: 1;
	grid-row: 1;
	grid-column: 1 / 2;
	word-break: break-word;
}

.time-operator {
	font-size: 10px;
	font-style: italic;
	color: var(--dark);
	text-align: left;
	margin-top: 2px;
	margin-left: 5px;
	order: 2;
	grid-row: 1;
	grid-column: 2 / 3;
}

.avatar-operator {
	background-image: url('../images/agente.png');
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	width: 28px;
	height: 28px;
	margin-right: 13px;
}

#dynamicButton,
#dynamicInput,
#dynamicDate {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-top: 0.25rem;
	order: 3;
	grid-row: 3;
	grid-column: 1 / 3;
}

#dynamicButton button {
	padding: 0.25rem;
	border: 1px solid var(--first);;
	border-radius: 5px;
	background-color: var(--first-o);;
	font-size: small;
	color: var(--white);
	margin-bottom: 0.25rem;
	cursor: pointer;
	text-align: left;
    word-break: break-word;
    min-width: 50px;
}

#dynamicButton button:hover {
	background-color: var(--first-h);
	color: var(--white);
}

#dynamicInput input,
#dynamicDate input {
	position: initial; 
	color: black;
	border: 1px solid gainsboro; 
	background-color: white;
	border-radius: 7px;
	padding: 0.3rem;
	outline-color: lightgray;
	text-align: center;
	margin-bottom: 5px;
}

.text-operator a {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0.5rem;
}

@media (max-width: 370px){
	.chat-client,
	.chat-operator	{
		/*max-width: 100%;*/
	}
	.avatar-client,
	.avatar-operator {
		/*display: none;*/
	}
}


/*=============================================
=         Transferencia de Archivos           =
=============================================*/

.archivo {
	background-color: #5cb85c;		
	display: flex;
	align-items: center;
	justify-content: center;	
	margin-top: 5px;
	padding: 0.5rem;
	border-radius: 7px;
	grid-row: 3;
	grid-column: 1 / 3;
}

.archivo a {
	text-decoration: none;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
}

.archivo a span{
	margin-right: 7px;
	word-break: break-word;
}

.flashing
{
    -webkit-animation: flashing 1.5s infinite linear;
            animation: flashing 1.5s infinite linear;
}

@-webkit-keyframes flashing
{
    0%
    {
        opacity: 1;
    }
    45%
    {
        opacity: 0;
    }
    90%
    {
        opacity: 1;
    }
}
@keyframes flashing
{
    0%
    {
        opacity: 1;
    }
    45%
    {
        opacity: 0;
    }
    90%
    {
        opacity: 1;
    }
}

/*=============================================
=               Transcriptmain                =
=============================================*/

.rating,
.iconRating,
.rating-star,
.rating-list,
.list-num  {
	display: flex;
	justify-content: center;
	align-items: center;
}


.iconRating {
	flex-direction: column;
}

.iconRating input {
	max-width: 50px;
	padding: 5px;	
}
/* Listado de Números */
.list-num {	
	border: none;
	color: #000;
	cursor: pointer;
	height: 35px;
	width: 25px;
}

.list-num-left {
	border-radius: 5px 0px 0px 5px;
}

.list-num-right {
	border-radius: 0px 5px 5px 0px;
}

.list-num:hover {
	background-color: #073e69 !important;
	color: #FFF;
}

.rating-list .selected {
	background-color: #073e69 !important;
	color: #FFF;
	outline: 4px solid #22aecd;
	z-index: 100;
}
.rating .selected {
	background-color: #F68D2E !important;
	border-radius: 5px ;
	color: #fff;
}

.opt-preguntas {
	display: flex;
	justify-content: space-between;
	align-items: center;	
	gap: 127px;
}

.opt-preguntas p {
	font-size: 13px !important;
	padding: 0.5rem 1rem !important;
	word-break: break-word !important;
	text-align: center !important;
}

.star {
	font-size: 2.5rem;
	padding: 3px;	
	cursor: pointer;
	color: #8E9089;
}

.rating-star .selected {
	color: #F68D2E;
}

.respuesta {
	text-align: center;
	margin: .5rem 0;
	height: 20px;
	color: #87868A;
	font-size: 14px;
}

.txtComentario {
	text-align: justify;
	border: 1px solid var(--borderInputs); 
	border-radius: 7px; 
	resize: none; 
	padding: 10px;
	outline-color: var(--outlineInputs);
}

.sectionCorreo {
	background-color:#EAE8EB;
	color:#575756;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.sectionCorreo div:nth-child(1) {
	text-align: justify;
}

.sectionCorreo div:nth-child(1) input {
	border: 1px solid var(--light);
	border-radius: 5px;
	padding: .3rem;
	outline: none;
}

.sectionCorreo div:nth-child(2) div{ 
	text-align: left !important;
	padding: .5rem 0;
}

.sectionCorreo div:nth-child(2) button{ 
	width: 100%;
}

@media screen and (min-width: 500px){
	.sectionCorreo {
	}

	.sectionCorreo div:nth-child(2){ 		
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.iconRating {
		max-width: 50px;
	}

	.sectionCorreo div:nth-child(2) button{ 
		margin-left: .5rem;
	}

}
@media screen and (max-width: 370px){
	.iconRating-mod {
		width: 25px;
	}
}

/*=============================================
=                Alerta Modal                 =
=============================================*/

#myModal {
	display: none;
	background-color: rgba(255, 255, 255, .5);
	width: 100%;
	height: 100%;
	position: absolute;
	justify-content: center;
	align-items: center;
	/*background-color: var(--bgFondo) !important;
	opacity: .5;*/
}

.modal {
  background-color: #fff;
  padding: 1rem;
  margin: 1rem;
  border: 1px solid gray;
   border-radius: 7px;
  -webkit-box-shadow: 3px 3px 5px 3px rgba(0,0,0,0.55);
  -moz-box-shadow: 3px 3px 5px 3px rgba(0,0,0,0.55);
  box-shadow: 3px 3px 5px 3px rgba(0,0,0,0.55);
  position: absolute;
  z-index: 100;
}

#myModal.active {
  display: flex;
}

.headerModal,
.bodyModal,
#closemodal {
  display: flex;
  justify-content: center;
  align-items: center;
}

.headerModal .title {
  flex-grow: 1;
  color: #0e2e86;
  text-align: center;
} 

.headerModal #closemodal {
  width: 30px;
  height: 30px;
  text-decoration: none;
  color: red;
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 1.5rem;
}

.bodyModal #message {
  text-align: center;
  padding: .5rem;
  color: #414141;
}

/*.error {
  border: 1px solid red !important;
}*/

/*=============================================
=         Comentarios Adicionales             =
=============================================*/

/**
=============================================
        Para usar el Estilo FIELD-1             
=============================================

1.Remplace en el formulario por este código.

	<div class="fields-1">						
	 <% Iterator fields = workgroupForm.getFields();
		while(fields.hasNext()){
			hasElements = true;
			FormField field = (FormField)fields.next();
			String label = field.getLabel();
			boolean required = field.isRequired();
			String requiredStr = required ? "&nbsp;<span class=\"error\">*</span>" : "";
			if(!field.getType().equals(FormField.TYPE_HIDDEN)){ %>
				<div class="field" id="<%= field.getVariable() %>">
					<div class="inputs">
						<%= FormUtils.createAnswers(field, request) %>							
					</div>
				</div>		
		 <% } 
		} %>
	</div>	

2. En el script TemaChat(), reemplace esta fracción de codigo para que los Inputs muestren los placeholder.	

	<% Iterator fieldsDesc = workgroupForm.getFields();
		while (fieldsDesc.hasNext()) {
			FormField fieldDesc = (FormField) fieldsDesc.next(); 
			if(fieldDesc.getType().equals("text-single")) { %>
				$('[name=<%=fieldDesc.getVariable()%>]').attr("placeholder", "<%= fieldDesc.getLabel()+(fieldDesc.isRequired()?" *":"") %>");
	<%		} else if(fieldDesc.getType().equals("list-single")) {%>
				$('[name=<%=fieldDesc.getVariable()%>]').prepend('<option value="" disabled="" selected=""><%=fieldDesc.getLabel()%></option>');
	<%		} %>

			$('[name=<%=fieldDesc.getVariable()%>]').blur(function() {
				if ($(this).val() != null && $(this).val() != '') {
					$(this).removeClass("error");
				}
			});

	<%	} %>

/**
=============================================
        Para usar el Estilo FIELD-2            
=============================================

1.Remplace en el formulario por este código.

	<div class="fields-2">						
	 <% Iterator fields = workgroupForm.getFields();
		while(fields.hasNext()){
			hasElements = true;
			FormField field = (FormField)fields.next();
			String label = field.getLabel();
			boolean required = field.isRequired();
			String requiredStr = required ? "&nbsp;<span class=\"error\">*</span>" : "";
			if(!field.getType().equals(FormField.TYPE_HIDDEN)){ %>
				<div class="field" id="<%= field.getVariable() %>">
					<i class="icon-<%= field.getVariable() %>"></i>
					<div class="inputs">
						<%= FormUtils.createAnswers(field, request) %>							
					</div>
				</div>		
		 <% } 
		} %>
	</div>		

2. En el script TemaChat(), reemplace esta fracción de codigo para que los Inputs muestren los placeholder.	

	<% Iterator fieldsDesc = workgroupForm.getFields();
		while (fieldsDesc.hasNext()) {
			FormField fieldDesc = (FormField) fieldsDesc.next(); 
			if(fieldDesc.getType().equals("text-single")) { %>
				$('[name=<%=fieldDesc.getVariable()%>]').attr("placeholder", "<%= fieldDesc.getLabel()+(fieldDesc.isRequired()?" *":"") %>");
	<%		} else if(fieldDesc.getType().equals("list-single")) {%>
				$('[name=<%=fieldDesc.getVariable()%>]').prepend('<option value="" disabled="" selected=""><%=fieldDesc.getLabel()%></option>');
	<%		} %>

			$('[name=<%=fieldDesc.getVariable()%>]').blur(function() {
				if ($(this).val() != null && $(this).val() != '') {
					$(this).removeClass("error");
				}
			});

	<%	} %>

3. En en archivo css/fonts/fonts.css busque los iconos que quiera colocar y agrege el nombre que tiene el <%= field.getVariable()%> 

	Por Ejemplo: ;
		.icon-user:before {
		  content: "\f007";
		}

		.icon-user:before,
		.icon-username:before {
		  content: "\f007";
		}

		**username es el nombre que tiene el <%= field.getVariable()%>

/**
=============================================
        Para usar el Estilo FIELD-3             
=============================================

1.Remplace en el formulario por este código.
  
  	<div class="fields-3">						
	 <% Iterator fields = workgroupForm.getFields();
		while(fields.hasNext()){
			hasElements = true;
			FormField field = (FormField)fields.next();
			String label = field.getLabel();
			boolean required = field.isRequired();
			String requiredStr = required ? "&nbsp;<span class=\"error\">*</span>" : "";
			if(!field.getType().equals(FormField.TYPE_HIDDEN)){ %>
				<div class="field" id="<%= field.getVariable() %>">
					<i class="icon-<%= field.getVariable() %>"></i>
					<div class="inputs">			
						<% if(!field.getType().equals("list-single")){%>		
								<label><%= field.getLabel() %></label>	
						<% } %>				
						<%= FormUtils.createAnswers(field, request) %>											
					</div>
				</div>		
		 <% } 
		} %>
	</div>		

2. En el script TemaChat(), reemplace esta fracción de codigo para que los Inputs no muestren los placeholder.

	<% Iterator fieldsDesc = workgroupForm.getFields();
		while (fieldsDesc.hasNext()) {
			FormField fieldDesc = (FormField) fieldsDesc.next(); 
			if(fieldDesc.getType().equals("list-single")) { %>
				$('[name=<%=fieldDesc.getVariable()%>]').prepend('<option value="" disabled="" selected=""><%=fieldDesc.getLabel()%></option>');
		 <%	} %>		
		    $('[name=<%=fieldDesc.getVariable()%>]').blur(function() {
				if ($(this).val() != null && $(this).val() != '') {
					$(this).removeClass("error");
				}
			});
	<%	} %>

3. En el script TemaChat(), agregue este código para darle la funcionalidad.

	// Animar Placeholder //

	const inputs = document.querySelectorAll('.inputs input');
	inputs.forEach( input => {
		input.onfocus = ()=> {
			input.previousElementSibling.classList.add('focus');
			input.previousElementSibling.classList.add('texto');
		};
		input.onblur = ()=> {
			if (input.value.trim().length == 0){
				input.previousElementSibling.classList.remove('focus');												
			}					
			input.previousElementSibling.classList.remove('texto');
		};
	});

	const textarea = document.querySelectorAll('.inputs textarea');
	textarea.forEach( textarea => {
		textarea.onfocus = ()=> {
			textarea.previousElementSibling.classList.add('focus');
			textarea.previousElementSibling.classList.add('texto');
		};
		textarea.onblur = ()=> {
			if (textarea.value.trim().length == 0){
				textarea.previousElementSibling.classList.remove('focus');
			}
			textarea.previousElementSibling.classList.remove('texto');
		};
	});	

4. En en archivo css/fonts/fonts.css busque los iconos que quiera colocar y agrege el nombre que tiene el <%= field.getVariable()%> 

	Por Ejemplo: ;
		.icon-user:before {
		  content: "\f007";
		}

		.icon-user:before,
		.icon-username:before {
		  content: "\f007";
		}

		**username es el nombre que tiene el <%= field.getVariable()%>

 *
/**
=============================================
        Para usar el Estilo FIELD-4             
=============================================

1.Remplace en el formulario por este código.

		<div class="fields-4">						
		 <% Iterator fields = workgroupForm.getFields();
			while(fields.hasNext()){
				hasElements = true;
				FormField field = (FormField)fields.next();
				String label = field.getLabel();
				boolean required = field.isRequired();
				String requiredStr = required ? "&nbsp;<span class=\"error\">*</span>" : "";
				if(!field.getType().equals(FormField.TYPE_HIDDEN)){ %>
					<div class="field" id="<%= field.getVariable() %>">
						<label class="dark"><%= field.getLabel() %> <span class="danger">*</span></label>
						<div class="inputs">										
							<%= FormUtils.createAnswers(field, request) %>						
						</div>
					</div>		
			 <% } 
			} %>
		</div>		

2. En el script TemaChat(), decida si quiere que los Inputs muestren los placeholder.


 */
/**
 * 

=============================================
            Estilo 2 del Chatmain             
=============================================

Una vez descomentado el código en la sección Chatmain, siga las siguientes configuraciones.

1. En el archivo Chatmain.jsp reemplace los botones de archivo y enviar por lo siguiente.

		<i class="icon-paperclip" onClick="return showTransferFiles(true)"></i>
		<i class="icon-send" onClick="javascript:submitMessage();"></i>

2. Aguegue el siguiente código o descomentelo de la function doit() del archivo Chatmain.jsp

		var textarea = document.querySelector('.chatMainBoxUser');
		textarea.addEventListener('keydown', autosize);
					             
		function autosize(){
		  var el = this;
		  setTimeout(function(){
		    el.style.cssText = 'height:auto;';
		    el.style.cssText = 'height:' + el.scrollHeight + 'px';
		  },0);
		}

3. Agregue o descomente la siguiente linea de código al final de la function submitMessage()
	 en el archivo Chatmain.jsp, para resetear el alto del textarea.

		chatbox.style.height = "auto";

4. Realice modificaciones adicionales según preferencias.


=============================================
            Estilo de Yak 2             
=============================================

#conversation-text {
	padding: 0.5rem 1rem;
	flex-grow: 1;
}

#ytext {
	display: flex !important;
	flex-direction: column;
	font-size: 13px;
	color: #808080;
	text-align: center;
}

#ytext > div {
	margin-bottom: 7px;
}

.chat-announcement {
	font-style: italic;
	text-align: center;	
}

.text-muted {
	text-align: center;
	font-size: 11px;
}

.chat-line {
	display: flex;
}

.msj-client {	
	width: 100%;
	flex-direction: row-reverse;
}

.chat-client {
	border-radius: 10px 0 10px 10px;
	padding: .7rem 1.3rem;
	margin-right: 1.7rem;
	background-color: #E0E0DE;
	width: auto;
	max-width: 80%;
	display: flex;
	flex-direction: column;
	position: relative;
	word-break: break-all;
}

.chat-client::before{
  font-family: 'icomoon' !important;
	content: "\f2bd";		
	top:0px;
	left: calc(100% + 3px);
	color: #58C18F;
	position:absolute;
	font-size: 1.5rem;
	font-style: normal;
}  

.text-client {
	font-size: .875rem;
	text-align: right;
	margin: 0 !important;
	color: #333333;	
}

.client-name {
	font-size: .75rem;
	text-align: right;
	color: #333333;
}

.time-client {
	font-size: 10px;
	color: #777777;
	text-align: right;
	margin-top: 3px; 
}

.msj-operator {
	width: 100%;
}

.chat-operator {
	border-radius: 0px 10px 10px 10px;
	padding: .7rem 1.3rem;
	margin-left: 1.7rem;
	background-color: #f1f1f1;
	width: auto;
	max-width: 80%;
	display: flex;
	flex-direction: column;
	position: relative;
	word-break: break-all;
}

.chat-operator::before{
  font-family: 'icomoon' !important;
	content: "\f2bd";
	top:0px;
	left: -1.7rem;	    	
	color: gray;
	position:absolute;
	font-size: 1.5rem;
	font-style: normal;
}

.text-operator {
	font-size: .875rem;
	text-align: left;
	margin: 0 !important;
	color: #808080;	
}

.operator-name {
	font-size: .75rem;
	text-align: left;
	color: #808080;
}

.time-operator {
	font-size: 10px;
	color: #808080;
	text-align: left;
	margin-top: 3px;
}

 *
 */