/* General */
	html{ position: relative; min-height: 100%; }
	body{ min-height: 100vh; font-family: 'Source Sans Pro', sans-serif; font-size: 14px; background-color: rgb(213,218,224); /*background-image: url(../img/bottom.png);*/ background-repeat: no-repeat; background-position: bottom; background-size: 100%; }
/* Navegacion */
	.BtnBack{ left: 0; top: 0; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; z-index: 9000; position: absolute; }
	.BtnBack svg{ width: 35%; fill: rgb(111,111,111); }
	.BtnMenu{ right: 0; top: 0; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; z-index: 9000; position: absolute; text-decoration: none !important;}
	.BtnMenu svg{ width: 35%; fill: rgb(111,111,111); }
	.Navegador{ height: 140px; background-color: rgb(255,255,255); background-image: url('../img/top.png'); background-repeat: no-repeat; background-size: 70px; background-position: top left; padding: 20px 0; }
	.ContentHead{ height: 100px; display: grid; grid-template-columns: 9% 5% 65%; justify-content: center; align-items: center; }
	.logo img{ width: 50%; margin: 0 auto; display: block; }
	.space{  }
	.topics{ position: relative; }
	.topics nav{ background-color: transparent!important; }
	.mininav{ position: absolute; top: -33px; right: 28px; display: inline-block; }
	.mininav a{ display: inline-flex; justify-content: center; align-items: center; padding: 0 10px; color: rgb(0,0,0); text-decoration: none!important; font-size: 12px; }
	.mininav a svg{ width: 29px; padding-right: 5px; }
	a.nav-link{ font-size: 19px; font-weight: 600; }
	.WhatsAction{ font-size: 30px; position: absolute; bottom: 3rem; right: 3rem; background-color: rgb(37,211,102); color: rgb(255,255,255); padding: 7px; border-radius: 50%; }
	.PicBottom{ width: 100%; position: absolute; bottom: 0; }
/* Login */
	.ContenedorPrincipal{ width: 90%; margin: 0 auto; background-color: rgba(255,255,255,0.6); }
	.ContentLogin{ min-height: 100%; overflow: hidden; overflow-y: scroll; /*background-image: url(../img/bottom.png); background-repeat: no-repeat; background-position: bottom; background-size: 100%;*/ }
	.ContentLogin img{ width: 60%; margin: 0 auto; display: block; }
	.LoginFrm{ padding: 1rem 3rem; text-align: center; }
	.LoginFrm h1{ color: rgb(0,48,93); font-weight: 700; font-size: 23px; margin: 0; padding: 15px 5px; text-align: left; margin-bottom: 1rem; }
	.GrupoInput{ background-color: var(--white); display: grid; grid-template-columns: 13% 87%; text-align: center; align-items: center; margin: 0 1rem; position:relative; }
	.GrupoInput svg{ display: block; margin: 0.5rem auto; width: 70%; fill: rgb(111,111,111); }
	.GrupoInput input{ height: 40px; font-size: 17px; border: 0; }
	.GrupoInput textarea{ height: 60px; font-size: 17px; border: 0; }
	.TxtRecordar{ text-align: center; color: rgb(180,14,33)!important; margin: 2rem 0 8px; display: block; text-decoration: none!important; }
	.enviarForm{ background-color: rgb(0,48,93); border: 0; color: rgb(255,255,255); text-align: center; padding: 12px; width: 50%; border-radius: 8px; }
	.ContactoFrm{ padding: 1rem 3rem; text-align: center; border-top: 10px solid rgb(250,231,0); }
	.ContLoginNew hr{ border-top: 2px solid rgba(66,59,59,0.5); width: 85%; margin: 0.7rem auto; }
	.ContLoginNew .enviarForm{ width: 80%; font-weight: 600; text-transform: uppercase; font-size: 23px; padding: 6px; }
	.ContLoginNew > img{ width: 65%; display: block; margin-left: 2.5rem; margin-bottom: 5rem; }
	.ContLoginNew .ContentLogin{ margin-bottom: 5rem; }
	.celasPic{ bottom: 0; right: 6rem; height: 90%; }
	.barraLogin{ position: absolute; bottom: -20px; width: calc(100% + 3px); left: -3px; }
/* Recordar Contraseña */
	.ContentRecordar{ min-height: 100%; overflow: hidden; overflow-y: scroll; background-image: url(../img/bottom.png); background-repeat: no-repeat; background-position: bottom; background-size: 100%; }
	.ContentRecordar > img{ width: 100%; border-bottom: 10px solid rgb(250,231,0); }
	.RecordarFrm{ padding: 1rem 3rem; text-align: center; }
	.RecordarFrm h1{ color: rgb(0,48,93); font-weight: 900; font-size: 22px; margin: 0; padding: 15px 5px; text-align: left; }
	.RecordarFrm button{ background-color: rgb(0,48,93); border: 0; color: rgb(255,255,255); text-align: center; padding: 12px; width: 50vw; border-radius: 8px; margin: 2rem 0 8px; }
	.TxtLogin{ text-align: center; color: rgb(186,193,190)!important; display: block; text-decoration: none!important; }
/* Cambiar Contraseña */
	.ContentCambiar{ min-height: 100%; overflow: hidden; overflow-y: scroll; background-image: url(../img/bottom.png); background-repeat: no-repeat; background-position: bottom; background-size: 100%; }
	.ContentCambiar > img{ width: 100%; border-bottom: 10px solid rgb(250,231,0); }
	.CambiarFrm{ padding: 1rem 3rem; text-align: center; }
	.CambiarFrm h1{ color: rgb(0,48,93); font-weight: 900; font-size: 22px; margin: 0; padding: 15px 5px; text-align: left; }
	.CambiarFrm button{ background-color: rgb(0,48,93); border: 0; color: rgb(255,255,255); text-align: center; padding: 12px; width: 50vw; border-radius: 8px; margin: 2rem 0 8px; }
/* Principal */
	.InicioContent{ width: 70%; margin: 0 auto; display: flex; justify-content: center; align-items: center; height: 80vh; }
	.ContentReportes{ display: grid; margin: 5px; grid-template-columns: 33% 33% 33%; grid-template-rows: 49% 49%; height: 55vh; justify-content: center; align-items: center; }
	.ItemReportes{ background: rgb(255,255,255); text-align: center; margin: 4px 5px; border-radius: 6px; padding: 2rem 1rem; color: rgb(61,61,61)!important; text-decoration: none!important; display: grid; grid-template-columns: 100%; justify-content: center; align-items: center; height: 90%; }
	.ItemReportes svg{ fill: rgb(0,48,93); width: 35%; margin: 0 auto; }
	.ItemReportes span{ display: block; font-size: 20px; font-weight: 900; }
	.ItemReportes2{ background: rgb(255,255,255); text-align: center; margin: 4px 5px; border-radius: 6px; padding: 2rem 1rem; color: rgb(61,61,61)!important; text-decoration: none!important; display: grid; grid-template-columns: 100%; justify-content: center; align-items: center; height: 90%; }
	.ItemReportes2 svg{ fill: rgb(0,48,93); width: 35%; margin: 0 auto; }
	.ItemReportes2 span{ display: block; font-size: 20px; font-weight: 900; }
/* Reportar */
	.ContentReportar{  }
	.ReportarFrm{ padding: 1rem 3rem; text-align: center; }
	.ReportarFrm h3{ color: rgb(0,48,93); font-weight: 900; font-size: 19px; margin: 0; padding: 0 0 10px; text-align: left; }
	.GrupoInputRep{ border-bottom: 1px solid rgb(186,193,190); display: grid; grid-template-columns: 100%; text-align: center; align-items: center; margin: 0.3em 0;  position:relative; }
	.GrupoInputRep input{ height: 40px; font-size: 17px; background: rgba(0,0,0,0); border: 0; }
	.GrupoInputRep select{ height: 40px; font-size: 17px; background: rgba(0,0,0,0); border: 0; }
	.GrupoInputRep textarea{ height: 140px; font-size: 17px; resize: none; background: rgba(0,0,0,0); border: 0; }
	.ReportarFrm > button{ background-color: rgb(0,48,93); border: 0; color: rgb(255,255,255); text-align: center; padding: 12px; width: 50%; border-radius: 8px; }
	.abrirOpciones{ display: flex; text-decoration: none !important; border-radius: 10px; margin-bottom: 10px; background: rgb(255,255,255)!important; margin: 0 auto 10px; width: 125px; height: 40px; justify-content: center; align-items: center; }
	.abrirOpciones svg{ fill: rgb(94,107,101); height: 80%; }
	#fotopreview{ padding: 0; margin: 0; list-style: none; display: grid!important; grid-template-columns: 33% 33% 33%; grid-column-gap: 3%; width: 100%; justify-content: center; text-align: center; }
	#fotopreview li{ width: 100%; height: 120px; position: relative; margin-bottom: 10px; }
	.quitar{ position: absolute; top: 0; right: 0; color: rgb(255, 255, 255) !important; background: rgb(0,0,0); width: 20px; height: 20px; display: flex; justify-content: center; align-items: center; text-decoration: none!important; }
	.FotoFig, .FotoFig1, .FotoFig2{ width: 100%; height: 100%; margin: 0; background-repeat: no-repeat; background-size: cover; border-radius: 0; background-position: center; }
	.upload-btn-wrapper{ position: relative; overflow: hidden; display: inline-block; }
	.botonupload{ border: 2px solid gray; color: gray; background-color: white; padding: 8px 20px; border-radius: 8px; font-size: 13px; display: inline-flex; justify-content: center; align-items: center; }
	.botonupload svg{ width: 20px; height: 20px; margin-right: 10px; }
	.upload-btn-wrapper input[type=file]{ font-size: 100px; position: absolute; left: 0; top: 0; opacity: 0; }
	.upload-btn-wrapper2{ position: relative; overflow: hidden; display: inline-block; }
	.botonupload2{ border: 2px solid gray; color: gray; background-color: white; padding: 8px 14px; border-radius: 8px; font-size: 13px; display: inline-flex; justify-content: center; align-items: center; }
	.botonupload2 svg{ width: 20px; height: 20px; }
	.upload-btn-wrapper2 input[type=file]{ font-size: 100px; position: absolute; left: 0; top: 0; opacity: 0; }
	.mh-main{ height: 77vh; }
	.btn-accept{ color: #fff; background-color: rgb(0,48,93); border-color: rgb(0,48,93); }
/* Notificaciones */
	.ContentNotificacion{ height: calc(100vh - 70px); overflow: hidden; overflow-y: scroll; }
	.ItemNotif{ display: grid; grid-template-columns: 10% 80% 10%; margin: 10px; height: 80px; background: rgb(255,255,255); border-radius: 8px; padding: 10px; overflow: hidden; justify-content: center; align-items: center; text-align: left; }
	.CircleNotif{ background: rgb(0,48,93); border-radius: 50%; width: 15px; height: 15px; margin: 0 auto; }
	.TxtNotif{ padding: 8px; font-size: 12px; position: relative; }
	.TxtNotif small{ display: block; color: rgb(0,0,0); font-weight: 500; font-size: 15px; }
	.InfoNotif{  }
	.FechaNoti{ position: absolute; top: 0; right: 0; color: rgb(134,134,134); }
	.InfoNotif a{ display: flex; justify-content: center; align-items: center; width: 100%; text-decoration: none!important; height: 100%; }
	.InfoNotif a svg{ width: 20%; fill: rgb(99,99,99); }
/* Historial */
	.ContList{ padding: 1rem 3rem; text-align: center; overflow: hidden; overflow-y: scroll; max-height: 73vh; }
	.ContList h1{ color: rgb(0,48,93); font-weight: 900; font-size: 22px; margin: 0; padding: 15px 5px; text-align: left; }
	.InfoPend{ display: grid; grid-template-columns: 40% 22% 23% 15%; justify-content: center; align-items: flex-start; }
	.ContentHistorial{ height: calc(100vh - 70px); overflow: hidden; overflow-y: scroll; }
	.ItemHistorial{ display: grid; grid-template-columns: 85% 15%; margin: 10px; background: rgb(255,255,255); padding: 10px; justify-content: center; align-items: center; border-bottom: 1px solid rgb(200,200,200); }
	.TxtHistorial{ padding: 8px; font-size: 13px; }
	.TxtHistorial strong{ display: block; color: rgb(69,69,69); font-weight: 900; }
	.TxtHistorial strong span{ color: rgb(69,69,69); font-weight: 400; }
	.InfoHistorial{ display: flex; justify-content: center; align-items: center; width: 100%; text-decoration: none!important; height: 100%; }
	.InfoHistorial svg{ width: 25%;  }
	.OkState{ fill: rgb(138,189,43); }
	.MidState{ fill: rgb(251,191,56); }
	.BadState{ fill: rgb(231,60,82); }
	.conversacion .usuario .enviado, .conversacion1 .usuario .enviado{ font-size: 10px; font-weight: bold; text-align: right; color: rgb(29,70,108); }
	.conversacion .usuario, .conversacion1 .usuario{ width: 60%; margin-left: 40%; background: rgb(220,226,222); border-radius: 10px; padding: 10px; box-sizing: border-box; font-size: 13px; margin-top: 10px; }
	.conversacion .nousuario, .conversacion1 .nousuario{ width: 60%; margin-right: 40%; background: rgb(255, 255, 255); border-radius: 10px; padding: 10px; box-sizing: border-box; font-size: 13px; margin-top: 10px; }
	.conversacion .nousuario .enviado, .conversacion1 .nousuario .enviado{ font-size: 10px; font-weight: bold; text-align: left; color: rgb(29,70,108); }
	.ItemPendiente{ display: grid; grid-template-columns: 85% 15%; margin: 10px; background: rgb(255,255,255); border-radius: 8px; padding: 10px; justify-content: center; align-items: center; border-bottom: 1px solid rgb(200,200,200); }
	.InfoPendiente{ display: flex; justify-content: center; align-items: flex-start; width: 100%; text-decoration: none!important; height: 100%; margin-top: 1rem; }
	.InfoPendiente svg{ width: 35%; margin: auto; }
	.tipopqrs{ font-size: 17px; color: rgb(0,48,93); font-weight: bold; padding: 5px 0px; display: block;}
	.lstPendientes{ height: 56vh; overflow: hidden; overflow-y: scroll; }
	.TxtCalifi{ margin: 0 8px; padding: 3px 12px; background-color: rgb(255,114,95); border-radius: 25px; color: rgb(255,255,255); font-weight: 600; }
	.estrella1, .estrella2{ color: rgb(234,234,27)!important; font-size: 19px; text-shadow: 0px 0px 3px black; }
/* Detalle */
	.imagen img{ width: 100%; margin: 5px auto; box-sizing: border-box; }
	.conversacion, .conversacion1{ margin: 0px; padding: 10px; height: calc(100vh - 110px); overflow: hidden; overflow-y: scroll; box-sizing: border-box; }
	.conversacion.extend{ height: calc(100vh - 60px) !important; }
	.Reportar1Frm{ width: 95%; box-sizing: border-box; display: grid; grid-template-columns: 70% 15% 15%; margin: 0 auto; justify-content: center; align-items: center; }
	.Reportar2Frm{ width: 95%; box-sizing: border-box; display: grid; grid-template-columns: 80% 20%; margin: 0 auto; }
	.imagenbajo{ width: 100%; background: rgb(255,255,255); height: 47px; border-top-right-radius: 15px; border-bottom-right-radius: 15px; display: flex; justify-content: center; align-items: center; }
	.comentariobajo{ width: 100%; height: 47px; position: relative; }
	.comentariobajo input{ width: 100%; height: 100%; border: 1px solid rgb(190,190,190); padding: 10px; box-sizing: border-box; border-radius: 15px; }
	.enviarbajo button{ background: rgb(0,48,93)!important; border: 0; height: 47px; width: 47px; border-radius: 50%; display: flex; margin: 0 auto; justify-content: center; align-items: center; }
	.enviarbajo button svg{ fill: rgb(255,255,255); width: 80%; }
	.enviarbajo{ width: 100%; height: 47px; text-align: center; }
	.abrirOpciones1{ display: flex; height: 47px; text-align: center; justify-content: center; align-items: center; }
	.abrirOpciones2{ display: flex; height: 47px; text-align: center; justify-content: center; align-items: center; }
	#fotopreview1, #fotopreview2{ position: absolute; display: none; height: 150px; width: 150px; bottom: 60px; margin: 0px; padding: 0px; right: 5px; }
	.nota{ font-size: 12px; padding: 0px 20px 20px; font-weight: bold; box-sizing: border-box; text-align: center; }
	#fotopreview1 li, #fotopreview2 li{ width: 100%; height: 100%; margin: 0 auto; list-style: none; }
	.abrirOpciones1 svg{ fill: rgb(150,150,150); width: 50%; }
	.abrirOpciones2 svg{ fill: rgb(150,150,150); width: 50%; }
	#txtAsunto{ display:none; }
	.nourgente{ font-weight:bold; }
	.urgente{ font-weight:bold; color: #FF0000; }
	.herramientas{ height: 40px; position: absolute; width: calc(100% - 4rem); top: 0; left: 1rem; }
	.cerrarCaso{ display: block; width: 100px; padding: 5px; float: right; margin-right: 20px; font-size: 12px; text-align: center; text-decoration: none !important; background: rgb(255,255,255); color: rgb(0,48,93) !important; border: 1px solid rgb(0,48,93); margin-top: 7px; }
	.ContentHistDetalle{ height: 90vh; overflow: hidden; overflow-y: scroll; position: relative; }
/* Menú */
	.ContentMenuLateral{ position: absolute; z-index: 9001; background: rgba(0,0,0,0.3); width: 100vw; height: 100vh; top: 0; left: 0; display: none; }
	.MenuLateral{ background: rgb(0,48,93); width: 70vw; position: absolute; top: 0; left: -100%; }
	.HeadMenu{  background: rgb(29,70,108); display: flex; width: 100%; height: 20vh; justify-content: center; align-items: center; }
	.HeadMenu img{ height: 80%; }
	.BodyMenu{ padding: 0; margin: 0; width: 100%; height: 80vh; overflow: hidden; overflow-y: scroll; }
	.BodyMenu li{ display: grid; grid-template-columns: 20% 80%; margin: 3px 20px; align-items: center; }
	.BodyMenu li svg{ width: 50%; margin: 0 auto; fill: rgb(255,255,255); }
	.BodyMenu li a{ display: block; border-bottom: 1px solid rgba(255,255,255,0.28); color: rgb(255,255,255); text-decoration: none; padding: 15px 10px; font-size: 0.9rem; }
	.BtnMenu svg .line{ opacity: 1; transform: rotate(0) translateY(0) translateX(0); transform-origin: 1em 1em; transition: transform 0.3s ease-in-out, opacity 0.2s ease-in-out; }
	.BtnMenu svg .line-1{ transform-origin: 8em 25em; }
	.BtnMenu svg .line-3{ transform-origin: 7em 37em; }
	.BtnMenu.abierto svg .line-1{ transform: rotate(45deg) translateY(0) translateX(0); }
	.BtnMenu.abierto svg .line-2{ opacity: 0; }
	.BtnMenu.abierto svg .line-3{ transform: rotate(-45deg) translateY(0em) translateX(0em); }
/* Textos */
	.sec_1{ text-align: left; }
	.cats{ display:none; }
	.picayuda{ max-width: 100%; height: calc(100vh - 170px); margin: 0 auto; }
/* Alertas */
	.ShowAlert{ display: flex!important; }
	.ContenedorAlertas{ display: none; position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 9999; background: rgb(241,243,242); background: -webkit-linear-gradient(-45deg, rgb(241,243,242) 47%,rgb(186,193,190) 100%); background: linear-gradient(135deg, rgb(241,243,242) 47%,rgb(186,193,190) 100%); justify-content: center; align-items: center; }
	.ContAlerta{ width: 80%; margin: 0 auto; text-align: center; height: auto; }
	.ImgAlerta{ width: 50%; margin: 1rem auto 4rem; display: block; }
	.TextAlerta{ margin: 15px 0; font-size: 28px; }
	.BtnsAlerta{ text-align: center; }
	.BtnFull{ width: 58%; display: block; text-align: center; margin: 5px auto; padding: 16px; text-decoration: none!important;  border-radius: 8px; }
	.BtnOk{ background: rgb(0,48,93)!important; color: rgb(255,255,255)!important; border: 1px solid rgb(0,48,93); }
	.BtnMid{ width: 40%; display: inline-block; text-align: center; margin: 5px 1%; padding: 14px 5px; text-decoration: none!important; border-radius: 8px; }
	.BtnCancel{ color: rgb(0,48,93)!important; background: rgb(255,255,255)!important; border: 1px solid rgb(0,48,93); }
	.alert-camara .cerrarDialogo{ position: absolute; display: flex; width: 25px; height: 25px; background: rgb(255,255,255); border-radius: 50%; top: 20px; right: 20px; border: 3px solid rgb(0,48,93); align-items: center; justify-content: center; text-decoration: none !important; font-size: 13px; font-weight: bold; color: rgb(0,48,93) !important; }
	.picModal{ display: block; width: 30%; margin: 1rem auto; }
	.bootbox-body{ font-size: 16px; text-align: center; }
	.estrella2{ color: rgb(200,200,2); font-size: 18px; }
/* Chat */
	.ContChat{ width: 100%; box-sizing: border-box; padding: 1rem; float: left; background-color: rgba(240,240,240,0.3); }
	.ContChat small{ display: block; font-weight: bold; color: rgb(90,90,90); }
	.ContChat small small{ color: rgb(130,130,130); font-weight: 400; }
	.ContChat img{ display: inline-block; width: 45%; margin: 5px 2% 0; }
	.ContChat span{ font-size: 14px; box-sizing: border-box; text-align: left; display: block; }
	.izquierda{ float: left; max-width: 180px; padding: 0 10px; background-color: rgb(168,212,247); border-radius: 8px; text-align: left; }
	.derecha{ float: right; max-width: 180px; padding: 0 10px; background-color: rgb(230,230,230); border-radius: 8px; text-align: right; }
	.ChatPendiente{ width: 100%; margin: 0 auto; display: grid; margin-bottom: 1em; height: 54vh; overflow: hidden; overflow-y: scroll; }
	.InfoPendiente{ width: 60%; margin: 0 auto; }
	.rating-xs{ font-size: 1.5em!important; }
	.usu_id .multiple{ width: 100%!important; }
/* Cuenta */
	.CuentaFrm{ padding: 1rem 3rem; text-align: center; }
	.CuentaFrm h3{ color: rgb(0,48,93); font-weight: 900; font-size: 19px; margin: 0; padding: 0 0 10px; text-align: left; }
	.Gridperfil{ display: grid; grid-template-columns: 50% 50%; justify-content: center; align-items: flex-start; grid-row-gap: 15px; grid-column-gap: 15px; }
/* Calificacion */
	.ChatCalif{ padding: 0.5rem; text-align: center; }
	.btnCalif{ border: 1px solid rgb(90,90,90); padding: 5px 20px; color: rgb(90,90,90); font-size: 16px; }