html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {lidesk-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}

/* #353947 var(--color-ba) */

body{font-family: 'Rubik', sans-serif; font-size: 13px; font-weight: 400; line-height: 16px; background-color: var(--color-co); color: var(--color-t1); height: 100%;}

h1{font-size: 24px; line-height: 28px; color: var(--color-ba); margin: 0 0 24px 0; padding: 0; font-weight: 700; position: relative;  z-index: 3;}
h1 small{font-size: 16px; line-height: 20px; font-weight: 500;color: var(--color-ba);}
h2{font-size: 16px; line-height: 20px; color: var(--color-ba); margin: 0 0 24px 0; font-weight: 500; position: relative; z-index: 2;}
h2 .btn-add{text-decoration: none; font-size: 13px; background-color: var(--color-ba); color: var(--color-co); height: 24px; line-height: 24px; font-weight: normal; border-radius: 6px; padding: 0 10px; display: inline-block; position: relative; top: -2px; margin: 0 0 0 10px;}

h3{font-size: 16px; line-height: 16px; color: var(--color-ba); margin: 0 0 24px 0; font-weight: 500; position: relative; z-index: 1; }
h3 i{font-style: normal; margin: 0px 5px 0 0; background-color: #F8F9FA; color: var(--color-ba); font-size: 11px; padding: 0 7px; height: 18px; line-height: 18px; border-radius: 6px; display: inline-block; position: relative; top: -2px; }
h3 i.verde{background-color: #E6F4EA; color: #188038;}
h3 i.amarillo{background-color: #FEF7E0; color: #EA8600;}
h3 i.rojo{background-color: #FCE8E6; color: #C5221F;}

h3.nosp{margin: 0 !important;}
h4{font-size: 13px; line-height: 13px; color: var(--color-ba); margin: 0 0 0px 0; font-weight: 500; position: relative}
h4 span{position: absolute; right: 0; top: 50%; transform: translate(0,-50%);}


h2 span, h3 span{position: absolute; right: 0; top: calc(50% - 16px); z-index: 1;}
h2 span a, h3 span a{text-decoration: none !important; font-size: 13px; font-weight: 500; color: var(--color-ba);margin: 0 0 0 8px; padding: 8px 16px; display: inline-block;}

h2 span.control, h3 span.control{right: 0px; top: calc(50% - 19px) !important;}
h2 span.control a, h3 span.control a{display: inline-block;padding: 0;border: 0; width: 32px; height: 32px;}
h2 span.control a.nav-back, h3 span.control a.nav-back{background: url(../gui/ico/left-outline-on.svg) 50% 50% no-repeat; }
h2 span.control a.nav-next, h3 span.control a.nav-next{background: url(../gui/ico/right-outline-on.svg) 50% 50% no-repeat; }
h2 span.control a.opciones, h3 span.control a.opciones{background: url(../gui/ico/opciones-outline-on.svg) 50% 50% no-repeat; }
h2 span.control a.cerrar, h3 span.control a.cerrar{background: url(../gui/ico/del-outline-on.svg) 50% 50% no-repeat; }
h2 span.control a.filtro, h3 span.control a.filtro{background: url(../gui/ico/filtro-outline-on.svg) 50% 50% no-repeat; }


a{color: var(--color-ba); cursor: hand !important;text-decoration: none;}
a:hover{color: var(--color-t1); }
b { color: var(--color-ba); font-weight: 500;}
i{font-style: italic}
p{margin: 0 0 20px 0; line-height: 17px;}
p:last-child{margin: 0 0 0px 0 !important}
p span.inline{margin: 0 20px 0 0;}
hr { border: 0; border-bottom: 0.5px var(--color-b1) solid;margin: 30px -30px}
small{font-size: 11px; line-height: 11px !important; color: var(--color-t2) !important; font-weight: 300px;}
small.alerta{color: #EA4335;}
mark{border-left: 0.5px var(--color-b1) solid; background-color: transparent; color: var(--color-t1); padding: 0 0 0 10px; margin: 0 0 0 10px; font-weight: 300;}
s{color: #9ca7b3; font-style: italic}
.t-d{color: #AAA}

ol{margin: 0 0 0 20px; padding: 0;}
ol li{margin: 0; padding: 0px 0 10px 0;}

details{background-color: var(--color-co); border: 0.5px var(--color-b1) solid; border-radius: 6px;margin: 0 0 8px 0;}
details summary {background: url(../gui/ico/down-outline-on.svg) calc(100% - 8px) 50% no-repeat; background-size: 24px auto; outline: none; margin: 0 !important; padding: 12px 8px; text-indent: 0px; cursor: pointer; color: var(--color-ba); font-weight: 500; position: relative}
details summary span{position: absolute; top: 0; right: 32px; padding: 12px 8px; font-weight: 400;}
details[open] {background-color: var(--color-co); padding: 0px;}
details[open] summary{background: url(../gui/ico/up-outline-on.svg) calc(100% - 10px) 50% no-repeat; background-size: 24px auto; border-bottom: 1px var(--color-co) solid; background-color: var(--color-bg); border-radius: 6px 5px 0 0; margin: 0px;}

details summary::-webkit-details-marker {color: transparent;padding: 0; margin: 0;}

sup{position: relative; top: -3px; font-size: 10px;}

a[href^="tel:"] {
  color: var(--color-ba);
  text-decoration: none;
}

.a-l{text-align: left !important}
.a-c{text-align: center !important}
.a-r{text-align: right !important}

.np{padding: 0px !important;}
.nm{margin: 0px !important;}
.pt{padding-top: 24px !important;}
.pb{padding-bottom: 24px !important;}
.sp-all{margin: 24px !important;}
.sp{margin-bottom: 24px !important;}
.spu{margin-top: 24px !important;}

.sp-ft{margin-bottom: 8px !important;}

.c-t-r{position: absolute; top: 0; right: 0;}

.mostrar{display: block !important}
.ocultar{display: none !important}
.clear{clear: both}

@keyframes rotate {from {-webkit-transform:rotate(0deg);}to {  -webkit-transform:rotate(360deg);}}

@keyframes slide-in {0% {margin-top: -30px; opacity: 0;} 100% {opacity: 1;}}
@keyframes slide-out {0% {opacity: 1;} 100% {margin-top: -30px; opacity: 0;}}
 
@keyframes fade-in {0% {opacity: 0;} 100% {opacity: 1;}}
@keyframes fade-out {0% {opacity: 1;} 100% {opacity: 0;}}

:root {
  	--shadow-0: 0px 0px 10px rgba(0,0,0,0.08);
	--shadow-1: -4px 4px 16px rgba(0,0,0,0.1);
	--shadow-2: 0px 8px 24px rgba(0,0,0,0.2);
	--shadow-3: 5px 10px 20px rgba(0,0,0,0.2);
	--shadow-field: 0px 0px 10px #E9F4FE;
	--shadow-inset-1: inset 1px 2px 4px rgba(0,0,0,0.07);
	--shadow-inset-2: inset 2px 4px 8px rgba(0,0,0,0.1);
	--overlay: rgba(0,0,0,0.7);
  	--shadow-ke: -4px 4px 8px rgba(56,176,0,0.35);
}

/* Body ***************************************************************************************************************/

.body{position: fixed; top: 0px; left: 240px; right: 0px; bottom: 0px; z-index: 1; padding: 0px; overflow: auto; background-color: var(--color-co);}

/* Header ***************************************************************************************************************/

.body .header{position: relative; margin: 0 32px; padding: 16px 0; display: block; border-bottom: 0.5px solid var(--color-b1);}

.body .header .nav-launch{position: absolute; top: 10px; left: 0px; z-index: 12; height: 40px; line-height: 40px; display: none; transition: all 200ms ease-in-out;}

.body .header .nav-account{}
.body .header .nav-account a{display: inline-block; text-decoration: none; color: var(--color-ba); margin-right: 16px;}

.body footer{margin: 32px; padding: 16px 0; border-top: 0.5px solid var(--color-b1);}

/* Navegacion ***************************************************************************************************************/

.nav{position: fixed; top: 0px; left: 0px; bottom: 0px; z-index: 20; width: 240px; box-sizing: border-box; overflow-x: hidden; overflow-y: auto; background-color: var(--color-ho); border-right: 0.5px solid var(--color-b1);}
.nav  .logo{width: 136px; height: 24px; margin: 32px 32px 0px 32px; background: url(../gui/ademy_be_c.svg?v=3) 0% 0% no-repeat; background-size: auto 100%; text-indent: -6000px; display: inline-block;}
.nav .bx-nav-lat{padding: 24px !important; box-sizing: border-box;}
.nav .bx-nav-lat li{margin: 0; padding: 0; display: block; position: relative;}
.nav .bx-nav-lat li a{color: var(--color-ba); padding: 8px 8px; margin: 0; display: block; text-decoration: none;}
.nav .bx-nav-lat li .activo{color: var(--color-ba); font-weight: 500;}
.nav .bx-nav-lat li ul{display: none;padding: 0 0 0 32px;}
.nav .bx-nav-lat li ul li {display: block; margin: 0; padding: 0;}
.nav .bx-nav-lat li ul li a{}
.nav .bx-nav-lat li ul li .activo{border: 0;}
.nav .bx-nav-lat li.sp{margin: 0 0 30px 0}
.nav-lateral-open{left: -230px}

.nav .bx-nav-bottom{position: absolute; bottom: 0px; left: 0px; right: 0; z-index: 4; padding: 0px; background-color: var(--color-ba); display: none;}
.nav .bx-nav-bottom a{color: var(--color-co); height: 40px; line-height: 40px; padding: 0px 20px; margin: 0; display: block; text-decoration: none; font-size: 13px; font-weight: 400;border-bottom: 1px rgba(255,255,255,0.1) solid}
.nav .bx-nav-bottom .usuario{}
.nav .bx-nav-bottom .logout{}

/* Contenido ***************************************************************************************************************/

.body .contenido{position: relative; z-index: 10; -webkit-overflow-scrolling: touch; margin: 0px 32px;}

.body .contenido .bx{padding: 0px;}

.body .contenido .bx-narrow{width: 50%; margin: 0 auto;}

.body .contenido .nav-top {position: relative !important; margin: 0; padding: 0; min-height: 64px; box-sizing: border-box;}

.body .contenido .nav-top h1{font-size: 16px; line-height: 24px; font-weight: 500; color: var(--color-ba); width: 100%; margin: 0; padding: 20px 0; box-sizing: border-box;}
.body .contenido .nav-top h1 mark{}
.body .contenido .nav-top h1 a{text-decoration: none;}
.body .contenido .nav-top h1 a.back {background: url(../gui/ico/left-outline-off.svg) 50% 50% no-repeat; width: 24px; height: 24px; margin: 0 8px -6px 0; display: inline-block;}
.body .contenido .nav-top .menu-launch{background: url(../gui/ico/down-outline-on.svg) 50% 50% no-repeat; text-indent: -6000px; position: absolute; top: 10px; right: 20px; z-index: 4; width: 40px; height: 40px; background-color: #F1F3F4; border-radius: 6px; cursor: pointer; display: none}

.body .contenido .nav-top .bx-nav-top{position: relative; margin: 0px; padding: 0 0 32px 0; box-sizing: border-box; display: block;}
.body .contenido .nav-top .bx-nav-top li{margin: 0px; padding: 0; display: inline-block; position: relative; margin: 0 8px 0 0;}
.body .contenido .nav-top .bx-nav-top li a{display: inline-block; text-decoration: none; padding: 8px 16px; font-weight: 400; border-radius: 6px; cursor: pointer; color: var(--color-ba); background-color: var(--color-bg);}
.body .contenido .nav-top .bx-nav-top li input{}
.body .contenido .nav-top .bx-nav-top li .buscador{margin: 0px 0 0 0px; position: relative;}

.body .contenido .nav-top .bx-nav-top li .buscador{margin: 0px;}
.body .contenido .nav-top .bx-nav-top li .buscador input[type="text"]{ border-radius: 0px; height: 40px;font-size: 13px; min-width: 200px}
.body .contenido .nav-top .bx-nav-top li .buscador .limpiar{cursor: pointer; font-size: 18px; color: #80868B; position: absolute; top: 50%; right: 10px; transform: translate(0,-50%); display: none;}


.body .contenido .nav-top .bx-nav-inside{padding: 0 0 16px 0; box-sizing: border-box; white-space: nowrap;overflow-x: auto;-webkit-overflow-scrolling: touch;-ms-overflow-style: -ms-autohiding-scrollbar; position: relative; z-index: 10;}
.body .contenido .nav-top .bx-nav-inside::-webkit-scrollbar {display: none; }
.body .contenido .nav-top .bx-nav-inside li{margin: 0; padding: 0; list-style: none; display: inline-block; transform: translate(0,0px);}
.body .contenido .nav-top .bx-nav-inside li a{text-decoration: none; font-weight: 400; cursor: pointer; padding: 8px 16px; margin: 0; display: flex; position: relative; border-radius: 6px 4px 0 0; color: var(--color-t1);}
.body .contenido .nav-top .bx-nav-inside li a:hover{}
.body .contenido .nav-top .bx-nav-inside li a.activo{ background-color: var(--color-co); color: var(--color-ba); font-weight: 500; border-bottom: 3px solid var(--color-ke);}

.body .contenido .bx-filtro{position: fixed; top: 64px; left: 302px; z-index: 15; background-color: var(--color-co); width: 330px; margin: 0; padding: 0; box-sizing: border-box; display: none; box-shadow: var(--shadow-2); border-radius: 6px;}
.body .contenido .bx-filtro .bx-filtro-contenido{max-height: calc(100vh - 320px); overflow: auto; padding: 80px 24px;}
.body .contenido .bx-filtro h2{border-bottom: 0.5px var(--color-b1) solid; position: absolute; top: 0; left: 0; right: 0; height: 56px; line-height: 56px; background-color: transparent; text-indent: 24px}
.body .contenido .bx-filtro .ft{}
.body .contenido .bx-filtro .ffbc{position: absolute; bottom: 0; left: 0; right: 0; display: flex; border-top: 0.5px var(--color-b1) solid;}
.body .contenido .bx-filtro .ffbc .btn, .body .contenido .bx-filtro .ffbc input[type="submit"]{flex: 1; text-align: center; height: 56px; line-height: 56px; border-radius: 0; border: 0;  font-size: 13px; font-weight: 700; background-color: transparent;}
.body .contenido .bx-filtro .ffbc .btn-cancelar{border-right: 0.5px var(--color-b1) solid; font-weight: 400; color: var(--color-t1);}

.body .contenido .nav-bottom {display: grid; grid-gap: 24px; padding: 16px 0px 0px 0px; grid-template-columns: repeat(2, 1fr); grid-template-rows: auto}
.body .contenido .nav-bottom .col-der{}
.body .contenido .nav-bottom .col-izq{text-align:right}
.body .contenido .nav-bottom .registros{}
.body .contenido .nav-bottom .registros span{}
.body .contenido .nav-bottom .paginacion {text-align:right}
.body .contenido .nav-bottom .paginacion a{margin: 0 0 0 16px}
.body .contenido .nav-bottom .paginacion a:first-child{}
.body .contenido .nav-bottom .paginacion a:last-child{}
.body .contenido .nav-bottom .paginacion a.activo{color: var(--color-ba); font-weight: 700;}

.body .contenido .nav-bottom .cronometro{ text-align: center; width: 120px; height: 60px; display: inline-block; border-right: 1px var(--color-b1) solid}
.body .contenido .nav-bottom .cronometro .tiempo{font-size: 19px; font-weight: 700; margin: 15px 0 0 0;}
.body .contenido .nav-bottom .cronometro .label{}
.body .contenido .nav-bottom .cronometro-rojo .tiempo, .body .contenido .nav-bottom .cronometro-rojo .label{color: #EA4335;text-decoration: blink;-webkit-animation-name: blinker;-webkit-animation-duration: 0.5s;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:ease-in-out;-webkit-animation-direction: alternate;}

/* Lateral ***************************************************************************************************************/

.body .lateral{position: fixed; top: 0px; bottom: 0px; right: 0px; z-index: 20;overflow-y: auto; width: 560px; background-color: var(--color-co); display: none;border-radius: 0px; box-shadow: var(--shadow-0); border-left: 0px var(--color-b1) solid; -webkit-overflow-scrolling: touch;}
.body .lateral-doble{width: auto; left: 0px;}
.body .lateral .lateral-contenedor .bx-lateral{padding: 32px; box-sizing: border-box; position: absolute; top: 60px; left: 0; right: 0; bottom: 60px; overflow-y: auto; overflow-x: hidden; z-index: 1}
.body .lateral .lateral-contenedor h2{position: absolute; top: 0px; left: 0px; right: 0px; text-indent: 32px; background-color: var(--color-co); font-size: 16px; height: 60px; line-height: 60px; z-index: 2; border-bottom: 0.5px var(--color-b1) solid; margin: 0; padding: 0;}
.body .lateral .lateral-contenedor h2 span.control{right: 32px; top: calc(50% - 0px);}
.body .lateral .lateral-contenedor hr{margin: 32px -32px;}
.body .lateral .lateral-contenedor .ffbc{position: absolute; bottom: 0px; left: 0px; right: 0px; border-top: 0.5px var(--color-b1) solid; padding: 0px; z-index: 1; background-color: var(--color-co); box-shadow: 0 -10px 20px var(--color-co);}
.body .lateral .lateral-contenedor .ffbc .tci{padding: 0;}
.body .lateral .lateral-contenedor .ffbc .tcd{padding: 0;}
.body .lateral .lateral-contenedor .ffbc input[type="submit"], .btn{height:60px;line-height: 60px;}
.body .lateral .lateral-contenedor .ffbc .tcd .btn{}

.body .lateral .lateral-contenedor .ffbc .cronometro{background-color: #F4F5F6; color: var(--color-ba); text-align: center; width: 120px; height: 60px; display: inline-block; border-right: 1px var(--color-b1) solid}
.body .lateral .lateral-contenedor .ffbc .cronometro .tiempo{font-size: 19px; font-weight: 700; margin: 15px 0 0 0;}
.body .lateral .lateral-contenedor .ffbc .cronometro .label{}

@-webkit-keyframes blinker {from {opacity: 1.0;}to {opacity: 0.0;}}
.body .lateral .lateral-contenedor .ffbc .cronometro-rojo{color: #EA4335;text-decoration: blink;-webkit-animation-name: blinker;-webkit-animation-duration: 0.5s;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:ease-in-out;-webkit-animation-direction: alternate;}

.body .lateral .lateral-contenedor .bx-cta{background: var(--color-ba); padding: 20px; box-sizing: border-box; margin: 0; border-radius: 6px; box-shadow: var(--shadow-inset-2)}
.body .lateral .lateral-contenedor .bx-cta h3{color: var(--color-co)}

.body .lateral .lateral-contenedor .bx-t{box-shadow: none;}

.loading-lateral{background: url(../gui/ico_loading.svg) 50% 50% no-repeat; background-size: 40px auto; position: absolute; top: 0; right: 0; left: 0; bottom: 0;}


/* Grids ***************************************************************************************************************/

.bx-2 {display: grid; grid-gap: 20px; grid-template-columns: repeat(2, 1fr); grid-template-rows: auto}
.bx-2 .bx{padding: 0 !important; margin: 0 !important;}

.bx-3 {display: grid; grid-gap: 20px; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto}
.bx-3 .bx{padding: 0 !important; margin: 0 !important;}

.bx-4 {display: grid; grid-gap: 20px; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto}
.bx-4 .bx{padding: 0 !important; margin: 0 !important;}

.bx-1-1 {display: grid; grid-gap: 20px; grid-template-columns: repeat(2, 1fr); grid-template-rows: auto}
.bx-1-1 .bx{padding: 0 !important; margin: 0 !important;}

.bx-1-3 {display: grid; grid-gap: 20px; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto}
.bx-1-3 .bx{padding: 0 !important; grid-column: 2 / 5;}
.bx-1-3 .bx:first-child{grid-column: 1 / 2;}

/* Grid Generales ***************************************************************************************************************/

.bx-grid .bx-grid-bloque{position: absolute; top: 0px; left: 0; right: 0; bottom: 0px; overflow: auto; padding: 15px;}
.bx-grid .bx-grid-bloque-flat{position: absolute; top: 0px; left: 0; right: 0; bottom: 0px; overflow: auto; padding: 0px;}
.bx-grid .bx-grid-bloque-regular{position: absolute; top: 0px; left: 0; right: 0; bottom: 0px; overflow: auto; padding: 15px;}
.bx-grid .bx-grid-bloque-header{position: absolute; top: 50px; left: 0; right: 0; bottom: 0px; overflow: auto; padding: 15px;}
.bx-grid .bx-grid-bloque-header-flat{position: absolute; top: 50px; left: 0; right: 0; bottom: 0px; overflow: auto; padding: 0px;}
.bx-grid .bx-grid-bloque-header-flat .info{padding: 15px;color: #9AA0A6}
.bx-grid .bx-grid-bloque-form{position: absolute; top: 50px; left: 0; right: 0; bottom: 50px; overflow: auto; padding: 15px;}
.bx-grid hr{margin: 15px -15px;}

.bx-grid h2{position: absolute; top: 0; left: 0; right: 0; border-bottom: 1px var(--color-b1) solid; height: 50px; line-height: 50px; padding: 0 15px; margin: 0; background-color: var(--color-co); color: var(--color-ba);}
.bx-grid h2 span{right: 15px;}
.bx-grid h2.back {text-indent: 60px;}
.bx-grid h2.back a.back {background: url(../gui/ico/left-outline-on.svg) 50% 50% no-repeat; width: 60px; height: 60px; margin: 0; position: absolute; top: 0px; left: 0; background-color: var(--color-co); border-right: 1px var(--color-b1) solid}
.bx-grid .ffbc{position: absolute; bottom: 0px; left: 1px; right: 0px; border-top: 1px var(--color-b1) solid; padding: 0px; z-index: 1; }
.bx-grid .ffbc input[type="submit"], .bx-grid .ffbc .btn{height: 50px; line-height: 50px;}

.bx-grid .bx-grid-lateral h1{padding: 15px; margin: 0;}
.bx-grid .bx-grid-lateral .bx-grid-header-info{padding: 15px;}
.bx-grid .bx-grid-lateral ul.bx-grid-header-nav{ white-space: nowrap;overflow-x: auto;-webkit-overflow-scrolling: touch;-ms-overflow-style: -ms-autohiding-scrollbar; background-color: #F1F3F4; box-sizing: border-box; display: flex;}
.bx-grid .bx-grid-lateral ul.bx-grid-header-nav li{list-style: none; flex: 1; border-right: 1px var(--color-co) solid;}
.bx-grid .bx-grid-lateral ul.bx-grid-header-nav li:last-child{border-right: 0;}
.bx-grid .bx-grid-lateral ul.bx-grid-header-nav li a{height: 40px; line-height: 40px; text-align: center; display: block; padding: 0 10px; box-sizing: border-box; }
.bx-grid .bx-grid-lateral ul.bx-grid-header-nav li a:hover{background-color: #E8EAED; text-decoration: none}

.bx-grid ul.bx-registros{}
.bx-grid ul.bx-registros li{list-style: none; border-bottom: 1px var(--color-b1) solid;}
.bx-grid ul.bx-registros li a{padding: 15px; display: block; text-decoration: none; color: var(--color-ba); cursor: pointer}
.bx-grid ul.bx-registros li a:hover{background-color: #F8F9FA}
.bx-grid ul.bx-registros li a h3{margin: 0; padding: 0; font-size: 13px;}

/* Grid Flex ***************************************************************************************************************/

.bx-grid-flex{display: grid; grid-gap: 20px; padding: 20px 30px; grid-template-columns: repeat(3, 1fr); box-sizing: border-box;}
.bx-grid-flex .bx{position:relative;background-color: var(--color-co); border-radius: 6px; padding: 0 !important; margin: 0 !important; border: 1px solid var(--color-b1); height: calc(100vh - 230px);}

.bx-grid-flex .bx h2{position:absolute;top:0;left:15px;right: 15px; height: 50px; line-height: 50px;}
.bx-grid-flex .bx hr { border: 0; border-bottom: 1px var(--color-b1) solid;margin: 15px -15px}
.bx-grid-flex .bx .bx--buscador{position:absolute;top:50px;left:15px;right: 15px; height: 50px;}

.bx-grid-flex .bx .bx--buscador .buscador{position: relative; box-shadow: none;}
.bx-grid-flex .bx .bx--buscador .buscador input[type="text"]{background-color: var(--color-bg) !important; height: 50px; background: url(../gui/ico/buscar-outline-on.svg) 13px 50% no-repeat; background-size: auto 20px; text-indent: 46px; border-radius: 6px; border: 0; outline: none !important; box-shadow: none !important; font-size: 16px;}

.bx-grid-flex .bx .bloque{position:absolute;top: 0px; left: 0; right: 0; bottom: 0; overflow-y: auto; padding: 15px;}
.bx-grid-flex .bx .bloque-header{position:absolute;top: 50px; left: 0; right: 0; bottom: 0; overflow-y: auto; padding: 0 15px;}
.bx-grid-flex .bx .bloque-header-buscador{position:absolute;top: 100px; left: 0; right: 0; bottom: 0; overflow-y: auto; padding: 15px;}
.bx-grid-flex .bx .bloque-header-form{position:absolute;top: 50px; left: 0; right: 0; bottom: 50px; overflow-y: auto; padding: 0 15px;}
.bx-grid-flex .bx .ffbc{position:absolute;left: 0; right: 0; bottom: 0px; }

.bx-grid-flex ul.bx-registros{}
.bx-grid-flex ul.bx-registros li{list-style: none; border-bottom: 1px var(--color-b1) solid;}
.bx-grid-flex ul.bx-registros li a{padding: 10px 0; display: block; text-decoration: none; color: var(--color-ba); cursor: pointer}
.bx-grid-flex ul.bx-registros li a:hover{background-color: #F8F9FA}
.bx-grid-flex ul.bx-registros li a h3{margin: 0; padding: 0; font-size: 13px;}


.grid-kpi-24hs{display: flex; background-color: var(--color-co); border-radius: 6px; white-space: nowrap;overflow-x: auto;-webkit-overflow-scrolling: touch;-ms-overflow-style: -ms-autohiding-scrollbar;}
.grid-kpi-24hs .bx-hora{flex: 1; margin: 0 10px 0 0;}
.grid-kpi-24hs .bx-hora:last-child{margin: 0;}
.grid-kpi-24hs .bx-hora .info{text-align:center; font-size: 13px; color: var(--color-t2); margin: 5px 0 0 0;}
.grid-kpi-24hs .bx-hora .data-vertical{height: 120px;}

/* Full ***************************************************************************************************************/

.bx-full{}
.bx-full .bx{}

/* Nav Tab Vertical ***************************************************************************************************************/

.nav-tab-vertical{}

div.slick{position: -webkit-sticky;position: sticky;top: 0; left: 0; right: 0}

.nav-tab-vertical-menu{}
.nav-tab-vertical-menu li{padding: 0; list-style: none; display: block;}
.nav-tab-vertical-menu li a{text-decoration: none; font-weight: normal; cursor: pointer; height: 35px; line-height: 35px; padding: 0; margin: 0; display: flex; color: var(--color-ba); position: relative;}
.nav-tab-vertical-menu li a.activo{background-color: #F4F5F6; color: var(--color-ba); border-radius: 6px 4px 0 0;}

.nav-tab-vertical-contenido{}

/* Nav Tab Horizontal ***************************************************************************************************************/

.nav-tab-vertical{}

.slick{position: -webkit-sticky !important;position: sticky !important; top: 20px; display: block !important;}

.nav-tab-vertical-menu{}
.nav-tab-vertical-menu li{padding: 0; list-style: none; display: block;}
.nav-tab-vertical-menu li a{text-decoration: none; font-weight: normal; cursor: pointer; height: 35px; line-height: 35px; padding: 0; margin: 0; display: flex; color: var(--color-ba); position: relative;}
.nav-tab-vertical-menu li a.activo{background-color: #F4F5F6; color: var(--color-ba); border-radius: 6px 4px 0 0;}

.nav-tab-vertical-contenido{}

/* TABLERO ***************************************************************************************************************/

.tablero {padding: 32px 0px;}

/* Grafica ***************************************************************************************************************/

.grafica-contenedor{position: relative;border-radius: 6px; background-color: var(--color-co); border: 1px var(--color-b1) solid;}
.grafica-contenedor:before{content: ''; display: block; padding-top: 25%;}
.grafica{position: absolute; top: 10px; right: -5px; bottom: 5px; left: 0;}
.grafica .dygraph-legend{position: absolute; top: -10px !important; right: 0px !important; width: 140px; text-align: right; padding: 10px; color: var(--color-ba) !important}
.grafica .dygraph-legend b{font-size: 19px; color: var(--color-ba) !important}
.grafica .dygraph-axis-label{font-size: 10px; color: var(--color-ba)}

/* TABLA ***************************************************************************************************************/

.t{display:table;width:100%;border-collapse: collapse;margin: 0; padding: 0; color: var(--color-ba);}
.t .th{ display:table-row;text-align: left; border-bottom: 0.5px var(--color-b1) solid; cursor: default; font-weight: 500; color: var(--color-ba);}
.t .tr{display:table-row;text-align: left; }
.t a.tr{cursor: pointer !important; text-decoration: none; margin: 0; padding: 0; color: var(--color-t1);}
.t .trho{background-color: var(--color-ho)}
.t .trdis{color: var(--color-t2) !important}
.t .trhoall{background-color: var(--color-ho);}

.t .tc{display:table-cell;padding: 12px 6px;position: relative; vertical-align: top}
.t .tc .campo, .t .tci .campo, .t .tcd .campo{background-color: transparent !important; color: var(--color-t1); position: absolute; top: 0px; bottom: 0px; left: 0; right: 0; height: 40px; width: calc(100% - 0px); margin: 0px; padding: 0px 0 0 8px; border: 0; border-radius: 0px; box-shadow: none;}
.t .tcdi{border-left: 3px var(--color-b1) solid;}
.t .tcdd{border-right: 3px var(--color-b1) solid !important;}
.t .tct{height: 40px; line-height: 40px;}
.t .tci{display:table-cell;padding: 12px 6px 12px 0px;vertical-align: top;position: relative;}
.t .tcd{display:table-cell;padding: 12px 0px 12px 6px;vertical-align: top;position: relative;}

.t .novp{padding-top: 0 !important; padding-bottom: 0 !important;}
.t .notvp{padding-top: 0 !important; }
.t .nobvp{padding-bottom: 0 !important;}
.t .trnb{border-bottom: 0px !important;}

.t .tr .tc .ffc, .t .tr .tci .ffc, .t .tr .tcd .ffc{width: 100%;}

.t .ico-drag{background: url(../gui/ico_drag.svg) 50% 10px no-repeat; background-size: 16px auto; padding-left: 0; padding-right: 0; width: 30px}

.t .handle-th{width: 20px; height: 16px; background: url(../gui/ico_drag.svg) 50% 50% no-repeat; background-size: auto 11px;}
.t .handle{position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url(../gui/ico_drag.svg) 50% 50% no-repeat; background-size: auto 11px; cursor: ns-resize;}
.t .handle:hover {}
.t .handle:active{}

.px20{width: 20px}
.px30{width: 30px}
.px40{width: 40px}
.px50{width: 50px}
.px60{width: 60px}
.px70{width: 70px}
.px80{width: 80px}
.px90{width: 90px}
.px100{width: 100px}
.px110{width: 110px}
.px120{width: 120px}
.px130{width: 130px}
.px140{width: 140px}
.px150{width: 150px}
.px160{width: 160px}
.px170{width: 170px}
.px180{width: 180px}
.px190{width: 190px}
.px200{width: 200px}
.px210{width: 210px}
.px220{width: 220px}
.px230{width: 230px}
.px240{width: 240px}
.px250{width: 250px}
.px260{width: 260px}
.px270{width: 270px}
.px280{width: 280px}
.px290{width: 290px}
.px300{width: 300px}

.p33{width: 33.33333%}
.p50{width: 50%}
.p66{width: 66%}
.p100{width: 100%}

.bx-t{position: relative; overflow: auto; white-space:nowrap; margin: 0px; padding: 0px !important; border-radius: 6px; background-color: var(--color-co); border: 0.5px solid var(--color-b1);}

.bx-t-auto{height: auto !important; box-shadow: none; border: 1px var(--color-b1) solid}

.bx-t .t .tr:nth-child(even){}
.bx-t .t .tr:nth-child(odd){}
.bx-t .t .tr:hover{}
.bx-t .t .tr{border-bottom: 0.5px var(--color-b1) solid;}
.bx-t .t .tr:last-child{border-bottom: 0 !important;}
.bx-t .t .th .tc{border-right: 0px;}
.bx-t .t .tr .tc{border-right: 0px;}
.bx-t .t .trho:last-child{border-radius: 0 0 4px 4px !important;}
.bx-t .t .resalta{background-color: var(--color-bg) !important; }
.bx-t .t .resalta:hover{background-color: var(--color-bg) !important;}
.bx-t .t .tag{margin-top: -2px;}

.bx-t-details{position: relative; overflow: auto; white-space:nowrap; margin: 0px; padding: 0px !important; }
.bx-t-details .t .tr:nth-child(even){}
.bx-t-details .t .tr:nth-child(odd){}

.body .lateral .lateral-contenedor .bx-t{position: relative; overflow: auto; white-space:nowrap; margin: 0px; padding: 0; border: 1px var(--color-b1) solid; border-radius: 6px; background-color: var(--color-co);}

.bx-kpis-lineal{display: flex; background-color: var(--color-co); border-radius: 6px; white-space: nowrap;overflow-x: auto;-webkit-overflow-scrolling: touch;-ms-overflow-style: -ms-autohiding-scrollbar; border: 0.5px solid var(--color-b1);}
.bx-kpis-lineal .kpi{flex: 1; padding: 10px; margin: 0px 0px; border-right: 0.5px var(--color-b1) solid}
.bx-kpis-lineal .kpi:last-child{border: 0;}
.bx-kpis-lineal .kpi .data{font-size: 22px; line-height: 22px; font-weight: 500; color: var(--color-ba)}
.bx-kpis-lineal .kpi .data small{color: var(--color-ba); font-weight: 500;}
.bx-kpis-lineal .kpi .info{color: var(--color-t1)}
.bx-kpis-lineal .kpi-rojo .data, .bx-kpis-lineal .kpi-rojo .info{color: var(--color-ba)}

/* UL Bx Lista **************************************************************************************************************/

ul.bx-lista{margin: 0; padding: 0 12px; border: 0.5px var(--color-b1) solid; border-radius: 6px; background-color: var(--color-co); position: relative;}
ul.bx-lista h3{font-size: 13px; padding: 0 13px !important; margin: 0 !important;height: 40px; line-height: 40px; color: var(--color-ba); border-bottom: 1px var(--color-b1) solid}
ul.bx-lista h3 span{top: 0px; right: 7px}
ul.bx-lista li {margin: 0; padding: 12px 0; list-style: none; border-bottom: 0.5px var(--color-b1) solid; position: relative;}
ul.bx-lista li.np {padding: 0px;}
ul.bx-lista li.off {background-color: #FBFCFD; color: var(--color-ba)}
ul.bx-lista li.titulo {background-color: #f3f3f3; color: var(--color-ba); font-weight: 500}
ul.bx-lista li.alerta {background: url(../gui/ico_alerta.svg) 13px 50%; background-repeat: no-repeat; background-size: auto 16px; padding-left: 40px;}

ul.bx-lista li.holder{padding-left: calc(30% + 11px);}
ul.bx-lista li.holder h4{position: absolute; top: 0px; left: 0px; bottom: 0; width: 30%; padding: 11px 11px 11px 11px; font-weight: 400; box-sizing: border-box; text-transform: none; font-size: 13px; line-height: 17px; border-right: 1px var(--color-b1) solid; }
ul.bx-lista li span{float: right;}
ul.bx-lista li span div{display: inline-block;}
ul.bx-lista li  .separador{border-top: 1px var(--color-co) solid; margin-top: 10px; padding-top: 10px;}
ul.bx-lista li .titulo{font-weight: 700; font-size: 15px;}
ul.bx-lista li .descripcion{margin: 5px 0 0 0}
ul.bx-lista li .imagenes{margin: 10px 0 0 0;}
ul.bx-lista li .imagenes img{border-radius: 6px; height: auto; display: block; margin: 0 0 10px 0;}
ul.bx-lista li .imagenes img:last-child{margin: 0;}
ul.bx-lista li .tag{margin-top: -4px;}
ul.bx-lista li:last-child {border: 0;}

ul.bx-lista li.intable {margin: 0; padding: 0px; list-style: none;}
ul.bx-lista li.intable .t .tr{border: 0 !important;}

ul.bx-lista li .copiar-texto{}

ul.bx-lista li hr { border: 0; border-bottom: 1px var(--color-b1) solid;margin: 10px 0px}

ul.bx-lista li .handle{margin: 0px; padding: 0px 0px 0px 16px; background: url(../gui/ico_drag.svg) 0px 3px no-repeat; background-size: auto 11px; cursor: ns-resize;}
ul.bx-lista li .handle:hover {color: var(--color-ba);}
ul.bx-lista li .handle:active{color: var(--color-ba); background-color: var(--color-co);}
ul.bx-lista li .handle a{padding-left: 0px;}

ul.bx-lista li .ffc input[type="text"]{margin: 0; box-shadow: none; border-radius: 0; border: 0; border-left: 1px var(--color-b1) solid; background-color: transparent !important;}

ul.bx-lista li .btn-x{background: url(../gui/ico/del-outline-on.svg) 50% 50% no-repeat; background-size: 100% auto; display: inline-block; width: 24px; height: 24px; text-indent: -6000px; cursor: pointer; margin: 0 0 0 5px; transform: translate(0,-3px)}
ul.bx-lista li .btn-info{background: url(../gui/ico/info-outline-on.svg) 50% 50% no-repeat; background-size: 100% auto; display: inline-block; width: 24px; height: 24px; text-indent: -6000px; cursor: pointer;margin: 0 0 0 5px;transform: translate(0,-3px)}
ul.bx-lista li .btn-abrir{background: url(../gui/ico/abrir-outline-on.svg) 50% 50% no-repeat; background-size: 100% auto; display: inline-block; width: 24px; height: 24px; text-indent: -6000px; cursor: pointer;margin: 0 0 0 5px;transform: translate(0,-3px)}

ul.bx-lista .bx-radio-inline{position: absolute; top: 0; right: 0; border-left: 1px var(--color-b1) solid; border-radius: 0px; background-color: transparent; margin: 0; padding: 0 4px; box-shadow: none; border: 0;}
ul.bx-lista .radio-inline {height: 38px; padding: 4px 0px; box-sizing: border-box;}
ul.bx-lista .radio-inline input[type=radio]:checked + label{background-color: var(--color-ba) !important; color: var(--color-co);}
ul.bx-lista .radio-inline input[type=radio] + label {display: block !important; min-width: 50px !important; height: 30px; line-height: 30px; background-image: none !important; padding: 0px 0px !important; box-sizing: border-box !important; border-radius: 4 !important; text-align: center !important; color: var(--color-ba)}

/* UL Bx Imágenes ***************************************************************************************************************/

ul.bx-imgs{display: grid; grid-gap: 20px; grid-template-columns: repeat(2, auto); grid-template-rows: auto}
ul.bx-imgs li{list-style: none; border: 1px var(--color-b1) solid; border-radius: 6px;}
ul.bx-imgs li .img .over{background-color: var(--color-co); border-top: 1px solid var(--color-b1); border-radius: 0 0 5px 5px; width: 100%; height: 40px; position: relative; cursor: default !important;}
ul.bx-imgs li .img .over .btn-eliminar{position: absolute; right: 0px; bottom: 0px; text-decoration: none; height: 40px; line-height: 40px; padding: 0 11px;}
ul.bx-imgs li .img .over .btn-obs{position: absolute; left: 0px; bottom: 0px; text-decoration: none; height: 40px; line-height: 40px; padding: 0 10px;}
ul.bx-imgs li .img .over .btn-accion{position: absolute; left: 0px; top: 0px; padding: 0 11px; text-decoration: none; height: 40px; line-height: 40px;}
ul.bx-imgs li .img{background-size: cover !important; background-position: 50% 50% !important; background-repeat: no-repeat !important; border-radius: 6px;}
ul.bx-imgs li .img:before{content: ''; display: block; padding-top: 70%;}
ul.bx-imgs li .handle{cursor: move}

ul.bx-imgs-big{margin: 0; padding: 0;}
ul.bx-imgs-big li{margin: 5px; padding: 0; width: 300px; float: left; list-style: none;}
ul.bx-imgs-big li .img .over{background-color: rgba(255,255,255,0.8); width: 100%; height: 100%; opacity:0; position: relative;transition:opacity 0.2s linear;}
ul.bx-imgs-big li .img .over:hover{opacity:1;}
ul.bx-imgs-big li .img .over .btn-eliminar{position: absolute; right: 10px; bottom: 10px;}
ul.bx-imgs-big li .img{width: 100%; height: 220px;background-size: contain !important; border-radius: 6px;}
ul.bx-imgs-big li .handle{cursor: move;}

/* UL Bx Form *************************************************************************************************************/

ul.bx-form{margin: 0; padding: 0 11px; border: 1px var(--color-b1) solid; border-radius: 6px; background-color: var(--color-co);}
ul.bx-form li {margin: 0; padding: 0px; list-style: none; border-bottom: 1px var(--color-b1) solid; position: relative;}
ul.bx-form li a.accion{display: block; height: 45px; line-height: 45px; text-align:center; text-decoration: none; color: var(--color-ba); font-weight: 500;}
ul.bx-form li a.accion:hover{background-color: var(--color-b1)}

ul.bx-form li .ft{left:0 !important}
ul.bx-form li .ffc{margin:0 !important; padding: 0 !important;}
ul.bx-form li .ffc .ft-apoyo{float:left;width: 70%;margin: 0 !important; padding: 0 !important;}
ul.bx-form li .ffc input[type="text"]{margin: 0; padding-left: 0 !important; box-shadow: none; border-radius: 0; border: 0; background-color: transparent !important;}
ul.bx-form li .ffc textarea{margin: 0; padding-left: 0 !important; box-shadow: none; border-radius: 0; border: 0; background-color: transparent !important;}
ul.bx-form li .ffc select{margin: 0; padding-left: 0 !important; box-shadow: none; border-radius: 0; border: 0; }

ul.bx-form li h3{margin: 0 0 5px 0;  font-size: 10px; color: var(--color-ba); font-weight: normal;}
ul.bx-form li span{float: right}
ul.bx-form li:last-child {border: 0;}
ul.bx-form li.info {}
ul.bx-form li .accion-remover{background: url(../gui/ico/del-outline-on.svg) 50% 50% no-repeat; position: absolute; top: 0; right: 0; width: 40px; height: 40px;  color: var(--color-ba); text-indent: -6000px; }

ul.bx-form li.cols {position: relative; height: 50px;}
ul.bx-form li.cols .col-header{padding: 0 10px !important; line-height: 45px; box-sizing: border-box;}
ul.bx-form li.cols .ft{display: none;}
ul.bx-form li.cols .ffc{width: 100%;}
ul.bx-form li.cols .ffc input[type="text"]{border: 0; padding: 0; text-indent: 0;}
ul.bx-form li.cols select{border: none; box-shadow: none; background-color: transparent; width: 100%;}

ul.bx-form li.cols-30-70 .col{float: right; width: 70%; }
ul.bx-form li.cols-30-70 .col:first-child{float: left; width: 30%}

ul.bx-form li.cols-70-30 .col{float: right; width: 30%; }
ul.bx-form li.cols-70-30 .col:first-child{float: left; width: 70%}


ul.bx-form li.cols .col1{float: left; width: 30%}
ul.bx-form li.cols .col1 .coltx{height: 45px; line-height: 45px; padding: 0 10px;}
ul.bx-form li.cols .col2{float: right; width: 70%; }
ul.bx-form li.cols .col2-1{display: inline-block; width: 35%}
ul.bx-form li.cols .col2-2{display: inline-block; width: 35%}
ul.bx-form li.cols .col3{display: inline-block; width: 100%}
ul.bx-form li.cols .col3 .ffc input[type="text"]{border: 0;}

ul.bx-form li label.error{margin:10px 0 0 0px !important;color:var(--color-ba) !important; display: none !important}
ul.bx-form li .required.error{border: 1px var(--color-ba) solid !important }

.ul-footer{margin: 10px 0 0 0;}

/* UL Bx Links ***************************************************************************************************************/

ul.bx-links{margin: 0; padding: 0; border-radius: 6px; position: relative; border: 0.5px solid var(--color-b1);}
ul.bx-links li {list-style: none; position: relative;}
ul.bx-links li:last-child {margin: 0 !important;}
ul.bx-links li .roll-btn{position: absolute; top: 9px; right: 11px; height: 20px; font-size: 13px; line-height: 20px; border-radius: 20px; padding: 0 7px; display: none; cursor: pointer;}
ul.bx-links li:hover .roll-btn{background-color: var(--color-ba); color: var(--color-co); display: block}
ul.bx-links li a{color: var(--color-t1); padding: 12px; display: block; text-decoration: none; cursor: pointer; position: relative; border-bottom: 0.5px solid var(--color-b1);}
ul.bx-links li:last-child a{border-bottom: 0;}

ul.bx-links li a.ico-r{background-position: calc(100% - 13px) 50% !important; background-size: 16px auto !important; background-repeat: no-repeat !important; padding-right: 46px;}
ul.bx-links li a.checked{padding: 11px 11px 11px 42px; background: url(../gui/ico/checkbox-outline-on.svg) 15px 8px no-repeat; background-size: auto 24px;}
ul.bx-links li a.unchecked{padding: 11px 11px 11px 42px; background: url(../gui/ico/checkbox-outline-off.svg) 11px 8px no-repeat; background-size: auto 24px;}
ul.bx-links li a.activo{color: var(--color-co); background-color: var(--color-ba)}
ul.bx-links li a.accion{color: var(--color-ba); font-size: 13px; font-weight: 400;}
ul.bx-links li a.accion:hover{background-color: #F8F9FA;}
ul.bx-links li a.accion-div{border-right: 1px var(--color-b1) solid;}
ul.bx-links li a.disabled{color: #AAA}
ul.bx-links li a.fake{color: #9AA0A6 !important; cursor: default;}
ul.bx-links li a.fake:hover{background-color: #F1F3F4; color: #9AA0A6 !important}

ul.bx-links li a h3{text-align: left; margin: 0; padding: 0; font-size: 13px; line-height: 17px; font-weight: 500;}
ul.bx-links li a span{float: right; color: var(--color-ba);}
ul.bx-links li a span div{display: inline-block}
ul.bx-links li a span.add{border-left: 1px var(--color-b1) solid; color: var(--color-ba); font-size: 20px;font-weight: 700;  width: 45px; line-height: 38px; text-align: center; position: absolute; top: 0; right: 0; bottom: 0;}
ul.bx-links li a .separador{border-top: 1px var(--color-b1) solid; margin-top: 10px; padding-top: 10px;}
ul.bx-links li a .c-t-r{top: 11px; right: 11px;}
ul.bx-links li a .btn-accion{position: absolute; top: 7px; right: 7px; background-color: #B4B8C5}

ul.bx-links li a footer{margin: 5px 0 0 0;}

ul.bx-links li input[type="text"].buscar{border: 0; box-shadow: inset 0px 0px 0px;}

ul.bx-links li .swipe-target{background-color: var(--color-co); position: absolute; top: 1px; bottom: 1px; right: 1px; border-radius: 0 4px 4px 0; display: none; padding: 16px; border-left: 0.5px var(--color-b1) solid; width: 0px; transition: all 200ms;}
ul.bx-links li .swipe-target a{display: inline-block; padding: 0px; margin: 0 16px; height: auto; background-color: transparent !important; color: var(--color-ba); font-weight: 500; border: 0;}
ul.bx-links li .swipe-target a:first-child{margin: 0 5px 0 0;}
ul.bx-links li .swipe-target a:last-child{margin: 0 0 0 5px;}
ul.bx-links li .swipe-on{display: block; width: auto;}

ul.bx-links li .handle{padding-left: 40px; background: url(../gui/ico_drag.svg) 13px 15px no-repeat; background-size: auto 11px; cursor: ns-resize;}
ul.bx-links li .handle:hover {}
ul.bx-links li .handle:active{}
ul.bx-links li .handle a{padding-left: 11px;}

ul.bx-links li ul{margin: 5px 0px 0px 20px; }

ul.bx-links li .t{display: table;width:100%;border-collapse: collapse;margin: 0; padding: 0;}
ul.bx-links li .t .tr{display: table-row;}
ul.bx-links li .t .tr .tc{display: table-cell; padding: 0 0 0 0;}
ul.bx-links li .t .tr .tci{padding: 0 10px 0 0; border-right: 1px var(--color-b1) solid; width: 10px;}
ul.bx-links li .t .tr .tcc{padding: 0 0 0 10px;}
ul.bx-links li .t .tr .tcd{padding: 0 0 0 10px}

li.selected {background:yellow}

ul.bx-links-inv li a{border-radius: 6px; background-color: rgba(255,255,255,0.03); color: var(--color-co); padding: 11px; display: block; text-decoration: none; cursor: pointer; position: relative;}
ul.bx-links-inv li a:hover{background-color: rgba(255,255,255,0.05); color: #9AA0A6;}

/* UL Bx Links Big ***************************************************************************************************************/

ul.bx-links-big{margin: 0; padding: 0; border: 1px var(--color-b1) solid; border-radius: 6px; background-color: var(--color-co);position: relative;}
ul.bx-links-big li {margin: 0; list-style: none; border-bottom: 1px var(--color-b1) solid; position: relative;}
ul.bx-links-big li:last-child {border: 0 !important;}
ul.bx-links-big li a{font-size:16px; font-weight: 500; padding: 16px; display: block; text-decoration: none; cursor: pointer; position: relative}
ul.bx-links-big li a:hover{background-color: #F4F5F6}
ul.bx-links-big li a span{float: right}
ul.bx-links-big li a .info{font-size:13px; font-weight: 400;}

/* BX Items ***************************************************************************************************************/

.bx-item{border: 1px var(--color-b1) solid; width: 100%; display: block; padding: 0px; margin: 0 0 30px 0; border-radius: 6px; box-sizing: border-box; position: relative; display: flex; border-radius: 6px; background-color: var(--color-co);box-shadow: 1px 1px 2px var(--color-b1)}
.bx-item:last-child{margin: 0;}
.bx-item .grid-1{flex: 1; padding: 30px; box-sizing: border-box; }
.bx-item .grid-2{flex:2; padding: 30px; box-sizing: border-box; border-left: 1px var(--color-b1) solid}
.bx-item .grid-destaca{background-color: var(--color-b1);}
.bx-item .btns-accion{margin: 0 0 10px 0}
.bx-item .btns-accion a{margin: 0 5px 0 0;}

.bx-grid-card{display: grid; grid-gap: 20px; padding: 20px; grid-template-columns: repeat(4, 1fr); box-sizing: border-box;}
.bx-grid-card .bx{position:relative; border: 1px solid var(--color-b1); margin: 0 !important; padding: 10px !important; box-sizing: border-box;border-radius: 6px;}
.bx-grid-card .bx .cover{ width: calc(100% + 19px); background-size: cover !important; background-position: 50% 50% !important; background-color: var(--color-bg) !important; margin: -9px -9px 5px -9px; border-radius: 6px 4px 0 0;}
.bx-grid-card .bx .cover:before{content: ''; display: block; padding-top: 60%;}
.bx-grid-card .bx .privacidad{position: absolute; top: 7px; right: 7px; width: 26px; height: 26px; border-radius: 26px; background-size: 18px auto !important; background-repeat: no-repeat !important; background-position: 50% 50% !important;}
.bx-grid-card .bx .privacidad-on{background: url(../gui/ico/lock-outline-w.svg);background-color: var(--color-ba);}
.bx-grid-card .data-lineal{display: flex; border-top: 1px solid var(--color-b1);}
.bx-grid-card .data-lineal span{flex:1; color: var(--color-t2); font-size: 13px; padding-top: 5px;}

.bx-grid-card .bx-header{ grid-column: 1 / 5; }
.bx-grid-card .no-items{ grid-column: 1 / 5; }
/*

.bx-card{display: block; border-radius: 6px; background-color: #FBFCFD;box-shadow: 1px 1px 2px var(--color-b1); position: relative; padding-bottom: 40px;}
.bx-card .bx-card-img{padding-top: 70%; background-size: cover !important; background-repeat: no-repeat !important;border-radius: 6px 3px 0 0;}
.bx-card .bx-card-data{padding: 20px;}

.bx-card .bx-card-accion{display: flex; background-color: var(--color-co); position: absolute; bottom: 0; left: 0; right: 0;}
.bx-card .bx-card-accion a{flex: 1; text-align: center; height: 40px; line-height: 40px; text-decoration: none; border-right: 1px #FBFCFD solid}
.bx-card .bx-card-accion a:last-child{border: 0;}
.bx-card .bx-card-accion a:hover{color: var(--color-ba)}

*/

.bx-start-form{position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 300px; padding: 30px; box-sizing: border-box; border-radius: 6px; border: 1px var(--color-b1) solid; box-shadow: 0px 5px 15px rgba(51,56,66,0.15);}

.bx-modal-float{position: fixed; bottom: 30px; right: 30px; width: 320px; background-color: var(--color-ba); color: var(--color-co); padding: 20px; box-sizing: border-box; border-radius: 6px;}
.bx-modal-float h1, .bx-modal-float h2{color: var(--color-co);}
.bx-modal-float-alerta{background-color: #EA4335;}



/* Bloque ***************************************************************************************************************/

.bx-hero{background-color: var(--color-ba); color: var(--color-co); position: relative; padding: 20px; box-sizing: border-box; border-radius: 6px;}
.bx-hero h1, .bx-hero h2, .bx-hero h3, .bx-hero h4, .bx-hero b{color: var(--color-co)}
.bx-hero .ft{color: var(--color-co)}

.bx-cubo {display: grid; grid-gap: 24px; grid-template-columns: 1fr 1fr 1fr 1fr;}
.bx-cubo li{list-style: none;background-color: var(--color-co); border-radius: 6px;transition: all 200ms; border: 0.5px var(--color-b1) solid; }

.bx-cubo li.off{background-color: #F1F3F4; color: #9AA0A6 !important}
.bx-cubo li.off a{color: #9AA0A6 !important}
.bx-cubo li.on{background-color: var(--color-ba); border: 0 !important;}
.bx-cubo li.on a{border: 0 !important;}
.bx-cubo li.on a{color: var(--color-co);}
.bx-cubo li.on small{color: var(--color-co);}
.bx-cubo li a{display: block; position: relative; color: var(--color-ba); border: 0px var(--color-b1) solid; border-radius: 6px; }
.bx-cubo li:hover a{background-color: var(--color-ho) !important;}
.bx-cubo li.on:hover a{background-color: var(--color-ba) !important;}
.bx-cubo li a:before{content: ''; display: block; padding-top: 75%;}
.bx-cubo li a span{position: absolute; bottom: 30px; left: 15px; right: 15px; text-align: center; font-weight: 500;}
.bx-cubo li a .contador{position: absolute; top: -15px;right: -15px; background-color: var(--color-ke); color: var(--color-co); width: 30px; height: 30px; line-height: 29px; text-align: center; border-radius: 100px; font-weight: 700; border: 5px var(--color-co) solid}
.bx-cubo li a .flag-realizado{position: absolute; top: 15px;right: 15px; background: url(../gui/ico/listo-outline-w.svg) 50% 50% no-repeat;background-size: 20px auto; background-color: var(--color-ba); width: 30px; height: 30px; border-radius: 100px;}
.bx-cubo li a.fake{cursor: default;}

.bx-cubo li a.realizado{background: url(../gui/ico/listo-outline-on.svg) 50% 40% no-repeat;background-size: 20% auto}
.bx-cubo li a.realizado-w{background: url(../gui/ico/listo-outline-w.svg) 50% 40% no-repeat;background-size: 20% auto}
.bx-cubo li a.proceso{background: url(../gui/ico/checkbox-outline-w.svg) 50% 40% no-repeat;background-size: 20% auto}
.bx-cubo li a.lock{background: url(../gui/ico/lock-outline-off.svg) 50% 40% no-repeat;background-size: 20% auto}
.bx-cubo li a.unlock{background: url(../gui/ico/unlock-outline-on.svg) 50% 40% no-repeat;background-size: 20% auto}
.bx-cubo li a.unlock-w{background: url(../gui/ico/unlock-outline-w.svg) 50% 40% no-repeat;background-size: 20% auto}
.bx-cubo li a.unlock{background: url(../gui/ico/unlock-outline-on.svg) 50% 40% no-repeat;background-size: 20% auto}
.bx-cubo li a.empresa{background: url(../gui/ico_empresa.png) 50% 40% no-repeat;background-size: 20% auto}
.bx-cubo li a.pos{background: url(../gui/ico/tienda-outline-on.svg) 50% 40% no-repeat;background-size: 48px auto;}
.bx-cubo li a.pos-web{background: url(../gui/ico/carrito-outline-on.svg) 50% 40% no-repeat;background-size: 48px auto}
.bx-cubo li a.config{background: url(../gui/ico/ajustes-outline-on.svg) 50% 40% no-repeat;background-size: 48px auto}
.bx-cubo li a.favorito{background: url(../gui/ico/star-outline-on.svg) 50% 40% no-repeat;background-size: 48px auto}
.bx-cubo li a.mas{background: url(../gui/ico/add-outline-on.svg) 50% 40% no-repeat;background-size: 48px auto}
.bx-cubo li a.mesas{background: url(../gui/ico/mesas-outline-on.svg) 50% 40% no-repeat;background-size: 48px auto}
.bx-cubo li a.guardar{background: url(../gui/ico/guardar-outline-on.svg) 50% 40% no-repeat;background-size: 48px auto}
.bx-cubo li a.delivery{background: url(../gui/ico/delivery-outline-on.svg) 50% 40% no-repeat;background-size: auto 48px}
.bx-cubo li a.historial{background: url(../gui/ico_fecha.svg) 50% 40% no-repeat;background-size: 20% auto}
.bx-cubo li a.ingreso{background: url(../gui/ico/ingreso-outline-on.svg) 50% 40% no-repeat;background-size: 20% auto}
.bx-cubo li a.registro-ventas{background: url(../gui/ico/registro-outline-on.svg) 50% 40% no-repeat;background-size: 48px auto}
.bx-cubo li a.salida{background: url(../gui/ico/salida-outline-on.svg) 50% 40% no-repeat;background-size: 20% auto}
.bx-cubo li a.servicios-entrega{background: url(../gui/ico/entrega-outline-on.svg) 50% 40% no-repeat;background-size: 20% auto}
.bx-cubo li a.apartados{background: url(../gui/ico/doc-hart-outline-on.svg) 50% 40% no-repeat;background-size: 48px auto}
.bx-cubo li a.comisiones{background: url(../gui/ico/comision-outline-on.svg) 50% 40% no-repeat;background-size: 48px auto}
.bx-cubo li a.corte_caja{background: url(../gui/ico/corte-outline-on.svg) 50% 40% no-repeat;background-size: 48px auto}
.bx-cubo li a.movimiento_caja{background: url(../gui/ico/card-movimiento-outline-on.svg) 50% 40% no-repeat;background-size: auto 48px}
.bx-cubo li a.renta_disponible{background: url(../gui/ico_calendario.svg) 50% 40% no-repeat;background-size: 20% auto}
.bx-cubo li a.renta_control{background: url(../gui/ico_rentas.svg) 50% 40% no-repeat;background-size: 20% auto}
.bx-cubo li a.cotizacion{background: url(../gui/ico/doc-star-outline-on.svg) 50% 40% no-repeat;background-size: 48px auto}
.bx-cubo li a.pagos-anticipados{background: url(../gui/ico/card-realizado-outline-on.svg) 50% 40% no-repeat;background-size: 48px auto}
.bx-cubo li a.devoluciones{background: url(../gui/ico/devolucion-outline-on.svg) 50% 40% no-repeat;background-size: 48px auto}
.bx-cubo li a.imprimir{background: url(../gui/ico/print-outline-on.svg) 50% 40% no-repeat;background-size: 48px auto}

.bx-cubo li a.med-antecedentes{background: url(../gui/ico/med-antecedentes-outline-on.svg) 50% 40% no-repeat;background-size: 20% auto}
.bx-cubo li a.med-signos{background: url(../gui/ico/med-signos-outline-on.svg) 50% 40% no-repeat;background-size: 20% auto}
.bx-cubo li a.med-diagnostico{background: url(../gui/ico/med-diagnostico-outline-on.svg) 50% 40% no-repeat;background-size: 20% auto}
.bx-cubo li a.med-procedimientos{background: url(../gui/ico/med-procedimientos-outline-on.svg) 50% 40% no-repeat;background-size: 20% auto}
.bx-cubo li a.med-tratamiento{background: url(../gui/ico/med-tratamiento-outline-on.svg) 50% 40% no-repeat;background-size: 20% auto}
.bx-cubo li a.med-laboratorio{background: url(../gui/ico/med-laboratorio-outline-on.svg) 50% 40% no-repeat;background-size: 20% auto}
.bx-cubo li a.med-rx{background: url(../gui/ico/med-rx-outline-on.svg) 50% 40% no-repeat;background-size: 20% auto}
.bx-cubo li a.med-consumo{background: url(../gui/ico/med-consumo-outline-on.svg) 50% 40% no-repeat;background-size: 20% auto}
.bx-cubo li a.med-medicamentos{background: url(../gui/ico/med-medicamentos-outline-on.svg) 50% 40% no-repeat;background-size: 20% auto}
.bx-cubo li a.med-traslado{background: url(../gui/ico/med-traslado-outline-on.svg) 50% 40% no-repeat;background-size: 20% auto}
.bx-cubo li a.med-adicional{background: url(../gui/ico/adicional-outline-on.svg) 50% 40% no-repeat;background-size: 20% auto}
.bx-cubo li a.med-resend{background: url(../gui/ico/enviar-arrow-outline-on.svg) 50% 40% no-repeat;background-size: 20% auto}

.bx-scroll{border: 1px var(--color-b1) solid !important; background-color: var(--color-co); border-radius: 6px;box-sizing: border-box; position: relative; min-height: 216px;}
.bx-scroll-sp{margin: 0 0 30px 0}
.bx-scroll input:focus{outline:0px var(--color-ba) solid; border: 0px var(--color-ba) solid;}
.bx-scroll .buscar-div{position: absolute}
.bx-scroll .buscar-div{outline: 0 !important; border-top:0px !important; border-left:0px !important; border-right:0px !important; border-bottom:1px var(--color-b1) solid !important;border-radius:0px;color:var(--color-ba);margin:0;background-color:transparent;outline:none;font-size: 13px !important; width: 100%; height: 40px; text-indent: 30px;box-shadow: none;box-sizing: border-box; background: url(../gui/ico_buscar.svg) 10px 50% no-repeat; background-size: 16px auto}
.bx-scroll .data{overflow: auto; position: absolute; top: 50px; right: 10px; bottom: 10px; left: 10px;}
.bx-scroll .sb{top: 10px;}
.bx-scroll .sp{top: 0px; left: 0; right: 0; bottom: 0; margin: 0 !important;}
.bx-scroll .spcb{top: 40px; left: 0; right: 0; bottom: 0;}
.bx-scroll .data .bx-links {border: 0; box-shadow: none}
.bx-scroll .data .bx-lista {border: 0; box-shadow: none}

.bx-resumen-contenedor{display: grid; grid-template-columns: repeat(5, 1fr);  margin: -10px;}
.bx-resumen{background-color: var(--color-co); color: var(--color-ba); padding: 10px; border: 1px var(--color-b1) solid;  border-radius: 6px; margin: 0px;}
.bx-resumen-sp{margin: 0 0 30px 0;}
.bx-resumen .info{margin: 0 0 5px 0;}
.bx-resumen .url{margin: 5px 0 0 0;}
.bx-resumen .url a{color: var(--color-ba) !important; text-decoration: none;}
.bx-resumen .data{font-size: 23px; line-height: 23px; color: var(--color-ba)}
.bx-resumen .data span{font-size: 13px; color: var(--color-ba); font-weight: normal; margin: 0 0 0 10px;}

.bx-resumen .data-mini{text-align: center; font-size: 20px; font-weight: 700; height: 40px; line-height: 40px;color: var(--color-ba)}

.bx-info-doc{background-color: var(--color-co); margin: 0px -30px 30px -30px; padding: 0px; border-bottom: 1px var(--color-b1) solid}
.bx-info-doc .info-total{border-right: 1px #EEE solid; font-size: 16px; padding: 30px;}
.bx-info-doc .info-detalle{padding: 20px;}

.bx-buscador {position: relative;;}
.bx-buscador input[type="text"]{height: 60px !important; font-size: 16px !important; margin: 0px; border: 1px var(--color-b1) solid; text-indent: 20px; background-color: var(--color-co) !important; color: var(--color-ba);}
.bx-buscador input[type="submit"]{background: url(../gui/ico/buscar-outline-on.svg) 50% 50% no-repeat; background-size: auto 24px; text-indent: -6000px; position: absolute;top: 0px; right: 0px; width: 60px; height: 60px; padding: 0 20px !important; border-left: 0px; background-color: transparent; }
.bx-buscador .info{margin: 10px 0 0 0;}

.bx-big-input {position: relative;}
.bx-big-input .ft{display: none;}
.bx-big-input input[type="text"]{height: 60px !important;  font-size: 20px !important; margin: 0; background-color: var(--color-co) !important; border: 0 !important; color: var(--color-ba); border: 2px var(--color-b1) solid !important}
.bx-big-input input[type="submit"]{position: absolute;top: 4px; right: 4px; height: 52px; line-height: 52px; background-color: transparent !important; color: #202124 !important; border-radius: 3px;}
.bx-big-input a{display: inline-block; margin: 10px 15px 0 0; cursor: pointer;}

.bx-sb{position: fixed; bottom: 0; left: 0px; right: 0; z-index: 1; padding: 30px; background-color: var(--color-co)}

.bx-firma {position: relative;}
.bx-firma #firma{border: 1px var(--color-b1) dashed;}
.bx-firma .btn-firma-reset{position: absolute; bottom: 15px; left: 15px; background-color: #EFF2F5; color: var(--color-ba); font-size: 13px; display: block; height: 30px; line-height: 30px; padding: 0 10px; border-radius: 6px;}

.signature-pad-modal{position: fixed !important; top: 0; left: 0; right: 0; bottom: 0; z-index: 1000 !important; display: none; background-color: var(--color-co);}
.signature-pad {position: absolute !important; top: 0; left: 0; right: 0; bottom: 0; display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}

.signature-pad--body {position: relative !important;-webkit-box-flex: 1;-ms-flex: 1;flex: 1;}
.signature-pad--body .canvas-div{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 80%; background-color: #000}
.signature-pad--body .canvas-div:before{content: ''; display: block; padding-top: 50%;}
.signature-pad--body canvas {position: absolute !important;left: 0 !important;top: 0 !important; width: 100%; height: 100%; z-index: 1; border-bottom: 0px #000 solid;}
.signature-pad--body .close-firma{position: absolute; top: 40px; right: 40px; z-index: 2; width: 40px; height: 40px; background: url(../gui/ico/del-outline-on.svg) 50% 50% no-repeat; background-size: 32px auto; cursor: pointer;}

.signature-pad--footer {position: absolute; bottom: 40px; left: 40px; right: 40px; z-index: 2; height: 40px;}
.signature-pad--footer .tx-info{position: fixed; top: 40px; left: 40px; z-index: 2; height: 40px; line-height: 40px; color: #9AA0A6;-moz-user-select: -moz-none;-khtml-user-select: none;-webkit-user-select: none;-o-user-select: none;user-select: none;-webkit-touch-callout : none; }

.signature-pad--actions .tools{position: absolute; left: 0;}
.signature-pad--actions .tools button{width: 40px; height: 40px; background-color: transparent !important; background-repeat: no-repeat !important; background-position: 50% 50% !important; border: 0; text-indent: -6000px; cursor: pointer;-webkit-appearance:none;outline: none;}
.signature-pad--actions .tools .btn-borrar{background: url(../gui/ico/borrar-outline-on.svg)}
.signature-pad--actions .tools .btn-undo{background: url(../gui/ico/undo-outline-on.svg)}
.signature-pad--actions .tools .btn-color{background: url(../gui/ico/color-outline-on.svg)}
.signature-pad--actions .tools .btn-draw-negro{background: url(../gui/ico/draw-negro.svg)}
.signature-pad--actions .tools .btn-draw-rojo{background: url(../gui/ico/draw-rojo.svg)}
.signature-pad--actions .tools .btn-draw-verde{background: url(../gui/ico/draw-verde.svg)}
.signature-pad--actions .tools .btn-draw-azul{background: url(../gui/ico/draw-azul.svg)}
.signature-pad--actions .tools .btn-draw-amarillo{background: url(../gui/ico/draw-amarillo.svg)}
.signature-pad--actions .guardar{position: absolute; right: 0;}
.signature-pad--actions .guardar button{background-color: var(--color-ba); color: var(--color-co); border: 0; height: 40px; line-height: 40px; padding: 0 20px; border-radius: 6px; font-size: 13px;-webkit-appearance:none;outline: none; cursor: pointer}

.smileys-modal{position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 101; background-color: var(--color-ba);}
.smileys-modal ul.smileys-contenedor{position: absolute; top: 50%; left: 50%; z-index: 1; transform: translate(-50%,-50%); width: 90%; text-align: center !important;}
.smileys-modal ul.smileys-contenedor .pregunta{color: var(--color-co); text-align: center; font-size: 25px; line-height: 28px; margin: 0 0 30px 0}
.smileys-modal ul.smileys-contenedor .instrucciones{color: #9AA0A6; text-align: center; font-size: 16px; line-height: 19px; margin: 0 0 30px 0}
.smileys-modal ul.smileys-contenedor li{width: 150px; height: 150px; margin: 0 15px; display: inline-block; background-repeat: no-repeat !important; background-position: 50% 50% !important; background-size: auto 100% !important; cursor: pointer;}

.smileys-modal ul.smileys-contenedor li.ico-3-smileys-1{background: url(../gui/ico/smiley-1-outline-w.svg)}
.smileys-modal ul.smileys-contenedor li.ico-3-smileys-2{background: url(../gui/ico/smiley-2-outline-w.svg)}
.smileys-modal ul.smileys-contenedor li.ico-3-smileys-3{background: url(../gui/ico/smiley-3-outline-w.svg)}

.smileys-modal ul.smileys-contenedor li.ico-like-1{background: url(../gui/ico/like-outline-w.svg)}
.smileys-modal ul.smileys-contenedor li.ico-like-2{background: url(../gui/ico/dislike-outline-w.svg)}

.hero-modal{position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 200;background-color: var(--color-co); overflow-y: auto;}
.hero-modal .hero-contenedor{width: 40%; box-sizing: border-box; text-align: center !important; margin: 0 auto; padding: 60px 30px;}
.hero-modal .hero-contenedor h1, .hero-modal .hero-contenedor h2, .hero-modal .hero-contenedor h3, .hero-modal .hero-contenedor p{color: var(--color-ba)}
.hero-cerrar{position: absolute; top: 30px; right: 30px; background: url(../gui/ico/del-outline-on.svg) 50% 50% no-repeat; background-size: 24px auto; width: 40px; height: 40px;}

.btn-key{color: var(--color-ba); background-color: var(--color-ba); padding: 15px 30px; font-size: 16px; font-weight: 500; border-radius: 6px; display: inline-block;}

/* TABS ***************************************************************************************************************/

ul.tabs{margin: 0px;padding: 0px;box-sizing: border-box;list-style: none;border-bottom: 0.5px var(--color-b1) solid;  white-space: nowrap;overflow-x: auto;-webkit-overflow-scrolling: touch;-ms-overflow-style: -ms-autohiding-scrollbar;}
ul.tabs::-webkit-scrollbar {display: none; }
ul.tabs li{display: inline-block; text-decoration: none; text-align: center; cursor: pointer; padding: 8px 16px; margin: 0; position: relative;}
ul.tabs li:hover{}
ul.tabs li.activo{color: var(--color-ba); font-weight: 500; border-bottom: 3px var(--color-ba) solid;}
.tab-contenido{display: none;padding: 30px 0 0 0;}
.tab-contenido.activo{display: block;}

/* GMAPS ***************************************************************************************************************/

.gmaps{position: fixed; top: 60px; right: 0; bottom: 0px; left: 0;}
.gmaps .map-full{position: absolute; top: 60px; right: 0; bottom: 0; left: 0; z-index: 1;}
.gmaps .geocoder{position: absolute; top: 0px; left: 0px; right: 0px; z-index: 2; background-color: var(--color-co); height: 60px;border-bottom: 1px solid var(--color-b1);}

.gmaps .geocoder-big-input {position: relative;}
.gmaps .geocoder-big-input .ft{display: none;}
.gmaps .geocoder-big-input .ff{margin: 0; padding: 0;}
.gmaps .geocoder-big-input input[type="text"]{margin: 0; padding: 0; height: 60px !important;  font-size: 16px !important; background: url(../gui/ico/buscar-outline-on.svg) 20px 50% no-repeat; background-color: transparent !important; border: 0 !important; color: var(--color-ba); text-indent: 80px;}
.gmaps .geocoder-big-input input[type="submit"]{position: absolute;top: 0px; right: 0px; height: 60px; line-height: 60px; background-color: transparent !important; color: var(--color-ba) !important; font-weight: 500;}

.gmaps .geocoder-resultado {display: none;}
.gmaps .geocoder-resultado .target-direccion{color: var(--color-ba); font-size: 13px; position: absolute; bottom: 12px; left: 80px;}
.gmaps .geocoder-resultado .target-distancia{color: var(--color-ba); font-size: 16px; position: absolute; top: 12px; left: 80px;font-weight: 500;}
.gmaps .geocoder-resultado .target-importe{color: var(--color-ba); font-size: 19px; position: absolute; top: 12px; right: 15px; font-weight: 500;}
.gmaps .geocoder-resultado .target-zona{color: var(--color-t1); position: absolute; bottom: 12px; right: 15px; font-size: 13px;}
.gmaps .geocoder-resultado .btn-nuevo{background: url(../gui/ico/left-outline-on.svg) 50% 50% no-repeat; position: absolute; top: 0px; left: 0px; width: 60px; height: 60px; border-right: 1px solid var(--color-b1);}

.gmaps .geocoder-accion {display:none; position: absolute; top: 50px; left: 50%; background-color: var(--color-ba); color: var(--color-ba); font-weight: 500; height: 40px; line-height: 40px; padding: 0 20px; border-radius: 40px; transform: translate(-50%,0);}

/* POS ***************************************************************************************************************/

.bx-pos{position: fixed; top: 0; right: 0; bottom: 0; left: 240px; background-color: var(--color-co);}

.pos-tools{position: absolute; top: 0; bottom: 0; left: 0px; width: 320px; z-index: 2; background-color: var(--color-co); box-shadow: var(--shadow-0); border-right: 0.5px solid var(--color-b1);}

.pos-tools .bx-tools-top{ position: absolute; top: 0px; left: 0px; right: 0px; z-index: 2 !important;}
.pos-tools .bx-tools-top .tool-buscador{position: absolute; top: 24px; left: 32px; right: 32px;}
.pos-tools .bx-tools-top .tool-buscador input[type="text"]{background-color: var(--color-co) !important; box-shadow: none; }
.pos-tools .bx-tools-top .tool-buscador .buscar{height: 40px !important; border: 0 !important; outline: none !important; background-color: transparent; font-size: 16px !important; background: url(../gui/ico/buscar-outline-on.svg) 0px 50% no-repeat; background-size: auto 24px; text-indent: 32px;}

.pos-tools .bx-tools-top .tool-opciones{position: absolute; top: 5px; right: 5px; padding: 0px;}
.pos-tools .bx-tools-top .tool-opciones a{display: inline-block; height: 50px; line-height: 50px; padding: 0 20px; text-decoration: none; position: relative; font-size: 13px; font-weight: 500; border-radius: 6px; }
.pos-tools .bx-tools-top .tool-opciones .mesas{ background: url(../gui/ico/mesas-outline-on.svg) 20px 50% no-repeat; background-size: 20px auto; text-indent: 15px; padding: 0 20px 0 30px;}
.pos-tools .bx-tools-top .tool-opciones .delivery{ background: url(../gui/ico/delivery-outline-on.svg) 20px 50% no-repeat; background-size: 20px auto; text-indent: 15px; padding: 0 20px 0 30px;}
.pos-tools .bx-tools-top .tool-opciones a:hover{}
.bx-buscador-resultados-pos{position: absolute; top: 72px; left: 32px; width: 400px; z-index: 2 !important; padding: 24px; background-color: var(--color-co); display: none; overflow-y: auto; border-radius: 6px; box-shadow: var(--shadow-1)}

.pos-tools .bx-tools-menu { position: absolute; top: 56px; right: 0px; left: 0; z-index: 1; padding: 24px;}
.pos-tools .bx-tools-menu .ico{display: block; margin: 0; padding: 8px;}


.pos-cuenta{position: absolute; top: 0; right: 0; bottom: 0; left: 320px; padding: 32px 32px 112px 32px; overflow-y: auto;}
.pos-cuenta .pos-cuenta-detalle{padding: 0 0 32px 0}

.pos-cuenta .pos-resumen-items{ background-color: var(--color-co);}
.pos-cuenta .pos-resumen-items .show-count{padding: 16px; text-align: center;}
.pos-cuenta .pos-resumen-items .no-items{}
.pos-cuenta .pos-resumen-items .bx-links{}
.pos-cuenta .pos-resumen-items .bx-links li {}

.pos-cuenta .pos-resumen-items .bx-links li a{cursor: pointer; position: relative;}

.pos-acciones{ position: fixed; bottom: 32px; right: 32px; background-color: var(--color-ke); color: var(--color-co); display: flex; border-radius: 6px;}
.pos-acciones a{flex: 1; padding: 24px 32px; text-align: center; font-size: 16px; font-weight: 500; text-decoration: none; color: var(--color-co)}
.pos-acciones a.cobrar{}
.pos-acciones a.finalizar-comanda{background-color: var(--color-ba); border-radius: 6px;}
.pos-acciones a.imprimir{border-right: 1px var(--color-b1) solid; }
.pos-acciones a.cancelar{}
.pos-acciones a .tag-inline{color: var(--color-ba); margin: 0 10px; padding: 7px 15px;}

.pos-aplicar-pago-round{text-align: center; margin: 0 0 32px 0}
.pos-aplicar-pago-round a{display: inline-block; margin: 0 4px; padding: 8px 16px; cursor: default !important; background-color: var(--color-ba); color: var(--color-co) !important; border-radius: 6px; font-size: 13px;}

.pos-aplicar-pago {margin: 0;position: relative}
.pos-aplicar-pago input[type="text"].moneda{height: 48px !important; font-size: 16px !important; background: url(../gui/ico/moneda-outline-on.svg?v=1) 16px 50% no-repeat; background-size: auto 24px; text-indent: 48px;margin: 0}
.pos-aplicar-pago input[type="text"].codigo{height: 50px !important;  font-size: 16px !important; background: url(../gui/ico/qr-outline-on.svg) 15px 50% no-repeat; background-size: auto 24px; text-indent: 50px;margin: 8px 0 0 0}
.pos-aplicar-pago input[type="text"].info{height: 50px !important;  font-size: 16px !important; background: url(../gui/ico/referencia-outline-on.svg) 15px 50% no-repeat; background-size: 24px auto; text-indent: 50px; margin: 8px 0 0 0}
.pos-aplicar-pago input[type="text"].fecha{height: 50px !important;  font-size: 16px !important; background: url(../gui/ico/fecha-outline-off.svg) 15px 50% no-repeat; background-size: 24px auto; text-indent: 50px; margin: 8px 0 0 0}
.pos-aplicar-pago input[type="submit"]{position: absolute;top: 0px; right: 0px; background-color: transparent; color: var(--color-ba) !important; height: 48px; line-height: 48px;}
















.pos-comanda{position: fixed; top: 30px; left: 0px; right: 40%; bottom: 15px; padding: 60px; overflow-y: auto; transition: left 0.5s;}

.pos-categorias-productos{position: absolute; top: 130px; left: 0; right: calc(40% + 20px); bottom: 0; background-color: var(--color-co); border-radius: 6px; border: 1px var(--color-b1) solid}

.pos-productos{position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; overflow-y: hidden;}

.pos-productos-mosaico .titulo-categoria{position: absolute; top: 0; left: 0; right: 0; height: 50px; line-height: 50px; text-indent: 20px; border-bottom: 1px var(--color-b1) solid;}

.pos-productos-mosaico .scroll {position: absolute; top: 50px; left: 0; right: 0; bottom: 0px; overflow: auto;}

.pos-productos-mosaico ul {padding: 5px; box-sizing: border-box; box-sizing: border-box; display: grid; grid-gap: 5px; grid-template-columns: repeat(4, auto); grid-template-rows: auto 1fr 1fr;}

.pos-productos-mosaico li{list-style: none;}

.pos-productos-mosaico li a{display: block; background-color: #F1F3F4; border-radius: 6px; position: relative; color: var(--color-ba); cursor:hand; text-decoration: none;}
.pos-productos-mosaico li a:hover{background-color: var(--color-ba) !important; color: var(--color-co) !important}
.pos-productos-mosaico li a:hover .titulo{color: var(--color-co) !important}
.pos-productos-mosaico li a:hover .precio{color: var(--color-co) !important}
.pos-productos-mosaico li a:before{content: ''; display: block; padding-top: 60%;}

.pos-productos-mosaico li a span.titulo{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display:block;text-align: center; color: var(--color-ba); width: 90%;}
.pos-productos-mosaico li a span.titulo span.precio{color: var(--color-ba); display: block; margin: 0; }


.pos-productos-favoritos {padding: 0px; box-sizing: border-box; display: grid; grid-gap: 20px; grid-template-columns: repeat(6, 1fr); grid-template-rows: auto 1fr 1fr}
.pos-productos-favoritos li{list-style: none;background-color: var(--color-co); box-shadow: 3px 3px 10px var(--color-b1); border-radius: 6px;}
.pos-productos-favoritos li:hover{}
.pos-productos-favoritos li a, .pos-productos-favoritos li .handle{display: block; position: relative; color: var(--color-ba); cursor:hand;  text-decoration: none;}
.pos-productos-favoritos li .handle{cursor: move;}
.pos-productos-favoritos li a span.icono, .pos-productos-favoritos li .handle span.icono{position: relative; display: block;  font-size: 30px; background-color: #F4F5F6; text-align: center; color: var(--color-b1); background-size: cover !important; background-position: 50% 50% !important; border-radius: 6px 4px 0 0;}
.pos-productos-favoritos li a span.icono:before, .pos-productos-favoritos li .handle span.icono:before{content: ''; display: block; padding-top: 75%;}
.pos-productos-favoritos li a span.icono span, .pos-productos-favoritos li .handle span.icono span{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.pos-productos-favoritos li a span.titulo, .pos-productos-favoritos li span.titulo{display:block;text-align: center; padding: 20px;}
.pos-productos-favoritos li a.eliminar{display:block; width: 100% !important; text-align: center; padding: 0px 0px 20px 0px;}
.pos-productos-favoritos li a span.titulo span.precio{color: var(--color-ba); display: block; }
.pos-productos-favoritos .msg-aviso{grid-column: 1 / 2;}




.pos-auxiliar{border: 0px #f1f1f1 solid; position: fixed; width: 40px; top: 130px; right: 40px; bottom: 30px; }

.pos-vta-ops{}
.pos-vta-ops li{list-style: none; margin: 0 0 20px 0; padding: 0; text-align: center;}
.pos-vta-ops li a{text-decoration: none;  font-size: 9px; letter-spacing: 1px; color: #a4a4a4;}
.pos-vta-ops .op-vta{width: 40px; height: 40px; display: block; background-size: 80% auto !important; background-position: 50% 50% !important; background-repeat: no-repeat !important; color: #676767; text-decoration: none; margin: 0 0 0px 0}
.pos-vta-ops .op-vta-mesa{background: url(../gui/ico_mesa_servicio.svg)}
.pos-vta-ops .op-vta-nota{background: url(../gui/ico_nota.svg)}
.pos-vta-ops .op-vta-cupon{background: url(../gui/ico_cupon.svg)}
.pos-vta-ops .op-vta-buscar{background: url(../gui/ico_buscar.svg)}
.pos-vta-ops .op-vta-vendedor{background: url(../gui/ico_vendedor.svg)}



.pos-mesas-layout {}
.pos-mesas-layout{display: grid; grid-gap: 20px; grid-template-columns: repeat(6, 1fr); grid-template-rows: auto 1fr 1fr}
.pos-mesas-layout .mesa {}
.pos-mesas-layout .mesa input[type=radio] + label {position: relative; background-image: none !important; text-align: center !important; border-radius: 6px !important; transition : all 200ms; box-sizing: border-box; background-color: var(--color-co); border: 1px var(--color-b1) solid; font-size: 16px; padding: 0 !important}
.pos-mesas-layout .mesa input[type=radio] + label:before{content: ''; display: block; padding-top: 100%}
.pos-mesas-layout .mesa input[type=radio] + label span{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) }
.pos-mesas-layout .mesa input[type=radio]:checked + label {color: var(--color-co) !important; background-color: var(--color-ba);}
.pos-mesas-layout .mesa input[type=radio]:disabled + label {color: var(--color-co) !important; background-color: var(--color-ba)}

.pos-open-layout{display: grid; grid-gap: 20px; grid-template-columns: repeat(5, 1fr); grid-template-rows: auto 1fr 1fr}
.pos-open-layout .venta{background-color: var(--color-co); border-radius: 6px; position: relative; border: 1px var(--color-b1) solid;}
.pos-open-layout .venta:hover{background-color: #F1F3F4;}
.pos-open-layout .venta:before{content: ''; display: block; padding-top: 75%;}
.pos-open-layout .venta span{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 16px; text-align: center}
.pos-open-layout .venta span .data{font-size: 13px; margin-top: 5px;}
.pos-open-layout .venta .personas{position: absolute; top: 15px;right: 15px; background-color: var(--color-ba); color: var(--color-co); width: 30px; height: 30px; line-height: 29px; text-align: center; border-radius: 100px; font-weight: 700;box-shadow: var(--shadow-1)}
.pos-open-layout .venta-nueva{background: url(../gui/ico/add-outline-on.svg) 50% 50% no-repeat;background-size: 48px auto; background-color: var(--color-co)}
.pos-open-layout .pendiente{background-color: var(--color-co); }
.pos-open-layout .procesado{background-color: var(--color-ba); color: var(--color-ba);}
.pos-open-layout .procesado:hover{background-color: var(--color-ba); color: var(--color-co);}
.pos-open-layout .procesado .personas{}
.pos-open-layout .procesado b{color: var(--color-ba)}
.pos-open-layout .procesado .tag-procesado{position: absolute; top: -10px; left: 50%; transform: translate(-50%,0); padding: 0 9px; line-height: 20px; height: 20px; border-radius: 12px; color: var(--color-ba); background-color: var(--color-co); text-transform: uppercase; font-size: 13px; font-weight: 700;}

/* Controles de incremento ***************************************************************************************************************/

.controles-incremento{position: relative; height: 48px;-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;border: 0.5px var(--color-b1) solid; border-radius: 6px; background-color: var(--color-co)}

.controles-incremento div{text-align: center; height: 40px; cursor: pointer !important;}
.controles-incremento .menos{width: 40px; position: absolute; top: 4px; right: 4px; border-left: 0.5px var(--color-co) solid; border-radius: 6px; background: url(../gui/ico/minus-outline-on.svg) 50% 50% no-repeat; text-indent: -6000px;}
.controles-incremento .campo{width: 90px; height: 48px; text-align: center; padding: 0; text-indent: 0; position: absolute; left: 0;font-size: 20px !important; color: var(--color-ba); box-shadow: none; border-radius: 0; border: 0; background-color: transparent !important;}
.controles-incremento .mas{width: 40px; position: absolute; top: 4px; right: 48px;border-left: 0px var(--color-b1) solid;border-radius: 6px; background: url(../gui/ico/add-outline-on.svg) 50% 50% no-repeat; text-indent: -6000px;}

.controles-incremento-mini{position: relative; height: 38px;-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none; background-color: var(--color-co); border: 1px var(--color-b1) solid; border-radius: 6px;}
.controles-incremento-mini div{text-align: center; line-height: 38px; font-size: 20px; cursor: pointer !important; color: var(--color-ba);}
.controles-incremento-mini .incremento-menos{width: 38px; height: 38px; position: absolute; right: 38px; top: 0px; background: url(../gui/ico/minus-outline-off.svg) 50% 50% no-repeat; text-indent: -6000px; border-left: 1px var(--color-b1) solid; }
.controles-incremento-mini .incremento-campo{width: calc(100% - 90px); height: 38px; text-align: left; padding: 0px; text-indent: 10px; position: absolute; top: 0px; left: 0%; font-size: 13px !important; color: var(--color-ba); box-shadow: none; border-radius: 6px; border: 0; background-color: transparent !important;}
.controles-incremento-mini .incremento-mas{width: 38px; height: 38px; position: absolute; right: 0px; top: 0px; background: url(../gui/ico/add-outline-off.svg) 50% 50% no-repeat; text-indent: -6000px;}

/* POP ***************************************************************************************************************/

.pop{display:none; z-index: 3; background-color: var(--color-co) !important; border-radius: 6px !important; padding: 8px 16px !important; border: 0px solid var(--color-b1); box-shadow: var(--shadow-1);}
.pop-tr{position: absolute; top: calc(100% + 16px); right: 0px;}
.pop-tl{position: absolute; top: 0; left: 0;}
.pop li{position: relative; margin: 0 !important; padding: 0 !important; list-style: none !important; display: block !important; min-width: 120px; border-bottom: 0.5px solid var(--color-b1);}
.pop li:last-child{border-bottom: 0px solid var(--color-b1);}
.pop li a{text-align:left !important; margin: 0px !important; padding: 8px 0px !important; font-size: 13px !important; color: var(--color-ba) !important; display: block !important; background-color: transparent !important; height: auto !important; line-height: normal !important; border-radius: 0 !important; font-weight: 400 !important;}

/* Botonoes Tabs ***************************************************************************************************************/

ul.btns-tabs{background-color: var(--color-co); border-radius: 6px; display: inline-block; overflow: hidden; border: 1px solid var(--color-b1);}
ul.btns-tabs li{display: inline-block; border-right: 1px var(--color-b2) solid;}
ul.btns-tabs li:last-child{border: 0;}
ul.btns-tabs li a{height: 40px; line-height: 40px; padding: 0 15px; display: block; text-decoration: none; color: var(--color-t1)}
ul.btns-tabs li a:hover{color: var(--color-ba)}
ul.btns-tabs li a.activo{color: var(--color-ba); border-bottom: 3px var(--color-ba) solid; height: 37px; font-weight: 500;}

/* Calendario (no aplicado)***************************************************************************************************************/

.calendario-dia{}

.calendario-dia .nav-semana{}
.calendario-dia .nav-semana li{height: 45px; line-height: 45px; list-style: none; margin: 0 20px 0 0; display: inline-block}

.calendario-dia .t{position: relative; overflow: auto; white-space:nowrap; padding: 0 0px 0 0}
.calendario-dia .t .tr{margin: 0; padding: 0; border-top: 1px var(--color-b1) solid}
.calendario-dia .t .tc{margin: 0 !important; padding: 0 !important; position: relative; height: 40px;}
.calendario-dia .t .timeline{width: 100px; height: 40px;}
.calendario-dia .t .timeline .timeline-hora{position: absolute; top: -11px; background-color: var(--color-b1); color: var(--color-ba); height: 20px; line-height: 21px; padding: 0 3px; border-radius: 6px;font-size: 13px;}
.calendario-dia .t .timeline .hora_momento{background-color: #EA4335; color: var(--color-co);}
.calendario-dia .t .grupo-eventos{position: relative;}
.calendario-dia .t .tc .evento{background-color: var(--color-co); padding: 0; display: inline-block !important; width: 160px; height: 36px !important; position: relative;}

.calendario-dia .t .tc .evento a.info{margin: 2px; padding: 0px; box-sizing: border-box; width: calc(100% - 2px); background-color: var(--color-ba); color: rgba(255,255,255,0.8); display: block; border-radius: 6px;border-bottom: 3px rgba(0,0,0,0.2) solid}

.calendario-dia .t .tc .evento a.status-0{background-color: #EA4335;}
.calendario-dia .t .tc .evento a.status-1{background-color: #FDCA40;color: rgba(0,0,0,0.4) !important}
.calendario-dia .t .tc .evento a.status-1 .horas{color: rgba(0,0,0,0.4) !important}
.calendario-dia .t .tc .evento a.status-2{background-color: var(--color-ba);}
.calendario-dia .t .tc .evento a.status-3{background-color: var(--color-b1); color: var(--color-ba)}
.calendario-dia .t .tc .evento a.status-3 .horas{color: var(--color-ba) !important}
.calendario-dia .t .tc .evento a.status-4{background-color: var(--color-ba);}
.calendario-dia .t .tc .evento a.status-5{background-color: #34A853;}

.calendario-dia .t .tc .evento a.info .data{position: absolute; top: 7px; left: 10px; right: 10px; white-space: normal;}
.calendario-dia .t .tc .evento a.info .data .horas{font-size: 13px; color: rgba(255,255,255,0.6)}
.calendario-dia .t .tc .evento a.info .data .titulo{margin: -3px 0 0 0;}

.calendario-semana {display: grid; grid-gap: 0px; grid-template-columns: repeat(7, 1fr); grid-template-rows: auto; border-radius: 6px; background-color: var(--color-co)}
.calendario-semana .nav-semana{grid-column: 1 / 8; height: 45px; padding: 0 13px; border-bottom: 1px var(--color-b1) solid}
.calendario-semana .nav-semana li{height: 45px; line-height: 45px; list-style: none; margin: 0 20px 0 0; display: inline-block}
.calendario-semana .dia{border-right: 1px var(--color-b1) solid;}
.calendario-semana .dia:last-child{border: 0;}
.calendario-semana .dia .dia-header{border-bottom: 1px var(--color-b1) solid; padding: 13px; color: var(--color-ba);}
.calendario-semana .dia .dia-header .nombre{}
.calendario-semana .dia .dia-header .numero{font-size: 26px; margin-top: 5px;}
.calendario-semana .dia .evento{display: block; padding: 10px; box-sizing: border-box; border-radius: 6px; color: var(--color-ba);}
.calendario-semana .dia .evento-pendiente{color: var(--color-ro);}
.calendario-semana .dia .evento-realizado{color: var(--color-t2);}

/* Editor **************************************************************************************************************/

#editor{background-color: var(--color-co); padding: 40px; border: 1px solid var(--color-b1); border-radius: 6px;}

#editor .ce-header{margin: 0 0 20px 0 !important; padding: 0 !important}
#editor h1.ce-header {font-size: 38px !important; line-height: 41px !important;}
h2.ce-header {font-size: 22px !important; line-height: 25px;}
h3.ce-header {font-size: 16px !important; line-height: 19px;}
h4.ce-header {font-size: 16px !important; line-height: 19px;}
h5.ce-header {font-size: 16px !important; line-height: 19px;}
h6.ce-header {font-size: 16px !important; line-height: 19px;}

.cdx-marker{font-family: Menlo, Monaco, Consolas, Courier New, monospace; font-size: 0.9em; background-color: var(--color-ba) !important; color: var(--color-ba) !important; padding: 4px 6px !important; margin: 0 2px !important; border-radius: 6px;}

#editor .cdx-block{padding: 0; margin: 0 0 20px 0; font-size: 16px;}
.ce-inline-toolbar{background-color: var(--color-ba); margin-top: 20px;}
.ce-inline-toolbar:before{background-color: var(--color-ba)}
.ce-inline-tool {background-color: rgba(255,255,255,0.05); color: var(--color-co); width: 40px; height: 40px;}
.ce-inline-tool:hover {background-color: rgba(255,255,255,0.1);}
.ce-inline-tool--active{background-color: var(--color-ba)}
.ce-inline-tool--active:hover{background-color: var(--color-ba)}

.ce-inline-toolbar .ce-inline-toolbar__buttons .ce-inline-toolbar__dropdown{height:40px; border-right: 1px solid rgba(255,255,255,0.15); color: var(--color-co);}
.ce-inline-toolbar .ce-inline-toolbar__buttons .ce-inline-toolbar__dropdown:hover{background-color: rgba(255,255,255,0.05);}

.ce-inline-toolbar .ce-conversion-toolbar .ce-conversion-toolbar__tools .ce-conversion-tool--focused{background: var(--color-bg) !important}

.icon--dots{color: var(--color-ba);}
.ce-toolbar__plus{color: var(--color-ba);}
.ce-toolbar__actions{top: 0;}
.ce-toolbar__settings-btn .icon--dots{height: 40px !important}
.ce-settings{background-color: var(--color-ba); border-radius: 6px;}
.ce-settings:before{background-color: var(--color-ba)}
.ce-settings__button{background-color: rgba(255,255,255,0.05); color: var(--color-co);}
.ce-settings__button:hover{background-color: rgba(255,255,255,0.1);}

.cdx-settings-button{background-color: rgba(255,255,255,0.05); color: var(--color-co);}
.cdx-settings-button:hover{background-color: rgba(255,255,255,0.1);}
.cdx-settings-button--active{background-color: var(--color-ba)}

.ce-settings__button--delete:hover{background-color: #EA4335}
.ce-settings__button--confirm:hover{background-color: #EA4335 !important}

.ce-block--focused{background-color: #FBFCFD; border-radius: 6px;}

/* Mensajes ***************************************************************************************************************/

.banner-info{background-color: var(--color-az); color: var(--color-co); padding: 8px 16px; border-radius: 6px; display: block;}
.banner-aviso{background-color: var(--color-am); color: var(--color-ba); padding: 10px 16px; border-radius: 6px; display: block;}
.banner-alerta{background-color: var(--color-ro); color: var(--color-co); padding: 10px 16px; border-radius: 6px; display: block;}
.banner-listo{background-color: var(--color-ve); color: var(--color-co); padding: 10px 16px; border-radius: 6px; display: block;}

.banner-firma{background: url(../gui/ico/firma-outline-w.svg) 11px 11px no-repeat; background-size: 20px auto; background-color: #202124; color: var(--color-co); padding: 12px 12px 12px 40px; border-radius: 6px; display: block}
.banner-firma:hover{color: var(--color-co); text-decoration: none;}
.banner-firma b{color: var(--color-co);}

.msg-listo{background: url(../gui/icos/checkmark-circle-outline.svg) 50% 30px no-repeat; background-size: auto 60px; text-align: center; padding: 120px 30px 30px 30px; margin: -50px 0 0 0;}

.msg-seleccionar{background: url(../gui/ico/click-outline-on.svg) 50% 30px no-repeat; background-size: auto 60px; text-align: center; padding: 120px 30px 30px 30px; margin: -50px 0 0 0;}

.msg-alerta{background: url(../gui/ico/alerta-outline-on.svg) 50% 30px no-repeat; background-size: auto 60px; text-align: center; padding: 120px 30px 30px 30px; margin: -50px 0 0 0;}

.msg-hand-block{background: url(../gui/ico/hand-block-outline-on.svg) 50% 30px no-repeat; background-size: auto 60px; text-align: center; padding: 120px 30px 30px 30px; margin: -50px 0 0 0;}

.msg-regular{margin: 0 !important;}

.msg-update {background-color: var(--color-ba); color: var(--color-co); position: fixed; left: 0px; bottom: 0px; right: 0px; height: 60px; line-height: 60px; text-align: center; box-sizing: border-box; text-align: center; z-index: 102; border-radius: 0 0 4px 0; display: none}

.msg-sendmail{position: fixed; bottom: -200px; left: 20px; z-index: 102; background-color: var(--color-ba); color: var(--color-co); width: 300px; padding: 20px; box-sizing: border-box; border-radius: 6px; box-shadow: var(--shadow-2); cursor: default; transition: all 1s ease-in-out}
.msg-sendmail-show{position: fixed; bottom: 20px; left: 20px; z-index: 102;}


.global-overlay{position: fixed; top: 0px; right: 0px; bottom: 0px; left: 0px; z-index: 30; background: url(../gui/ico/loading_ball_b.svg) 50% 50% no-repeat; background-color: var(--overlay) !important;}


.msg-aviso{font-size: 13px; text-align: center; padding: 100px 0; width: 80%; margin: 0 auto; box-sizing: border-box}
.msg-aviso p{line-height: 17px;}
.msg-aviso .ico-msg-almacen{width: 80px; height: 80px; margin: 0 auto 30px auto; background: url(../gui/ico_almacen.svg) 50% 50% no-repeat; background-size: contain;}
.msg-aviso .ico-msg-proveedor{width: 80px; height: 80px; margin: 0 auto 30px auto; background: url(../gui/ico_proveedor.svg) 50% 50% no-repeat; background-size: contain;}
.msg-aviso .ico-msg-importar{width: 80px; height: 80px; margin: 0 auto 30px auto; background: url(../gui/ico_importar.svg) 50% 50% no-repeat; background-size: contain;}

.msg-error-login{display: none; color: var(--color-ro); padding: 0px 0 0 0}

.msg-norecords{padding: 60px; border-radius: 6px; background-color: var(--color-ho); text-align: center; color: #9AA0A6;}

.msg-bx-norecords{display: grid; align-items: center; justify-content: center; height: 100px; border-radius: 6px; background-color: var(--color-ho);}
.msg-bx-norecords span{font-size: 16px;}

.msg-bx-norecords-inside{position: relative; width: 100%; height: 100px; background-color: var(--color-bg); border-radius: 6px;}
.msg-bx-norecords-inside span{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 13px; text-align: center; color: #9AA0A6;}

.msg-no-internet{z-index: 200; background-color: var(--color-ba); color: var(--color-co); position: fixed; bottom: 0; left: 0; right: 0; text-align: center; height: 100px; line-height: 100px; font-size: 18px; display: none}



.tx-ico-info-16{background: url(../gui/ico_info.svg) 0% 0% no-repeat; background-size: 16px auto;padding-left: 26px; padding-top: 1px; min-height: 16px;}
.tx-ico-info-16-b{background: url(../gui/ico_info_b.svg) 0% 0% no-repeat; background-size: 16px auto;padding-left: 26px; padding-top: 1px; min-height: 16px;}
.tx-ico-usuario-16{background: url(../gui/ico_usuario.svg) 0% 0% no-repeat; background-size: 16px auto;padding-left: 26px; padding-top: 1px; min-height: 16px;}
.tx-ico-usuario-16-b{background: url(../gui/ico_usuario_b.svg) 0% 0% no-repeat; background-size: 16px auto;padding-left: 26px; padding-top: 1px; min-height: 16px;}
.tx-ico-logout-16-b{background: url(../gui/ico_logout.svg) 0% 0% no-repeat; background-size: 16px auto;padding-left: 26px; padding-top: 1px; min-height: 16px;}

.alerta-std{background: url(../gui/ico_alerta_c.svg) 13px 50% no-repeat; background-size: auto 16px; background-color: var(--color-co); color: var(--color-ba); border: 1px var(--color-ba) solid; padding: 13px 13px 13px 40px; border-radius: 6px; cursor: default;}

/* Iconos ***************************************************************************************************************/

.ico-tx{background-position: 0% -1px !important; background-repeat: no-repeat !important; background-size: auto 18px !important; padding: 0 10px 0 26px !important; display: inline-block; min-height: 18px !important;}
a.ico-tx:hover{}
.ico-tx-w {}

.ico-tx-add{background: url(../gui/ico/add-outline-on.svg)}
.ico-tx-add-w{background: url(../gui/ico/add-outline-w.svg)}
.ico-tx-add-doc{background: url(../gui/ico/add-doc-outline-on.svg)}
.ico-tx-add-doc-off{background: url(../gui/ico/add-doc-outline-off.svg)}
.ico-tx-add-doc-w{background: url(../gui/ico/add-doc-outline-w.svg)}
.ico-tx-adicional{background: url(../gui/ico/adicional-outline-on.svg)}
.ico-tx-alerta{background: url(../gui/ico/alerta-outline-on.svg)}
.ico-tx-back{background: url(../gui/ico/back-outline-on.svg)}
.ico-tx-back-off{background: url(../gui/ico/back-outline-off.svg)}
.ico-tx-back-w{background: url(../gui/ico/back-outline-w.svg)}
.ico-tx-borrar{background: url(../gui/ico/borrar-outline-on.svg)}
.ico-tx-del{background: url(../gui/ico/del-outline-on.svg)}
.ico-tx-del-off{background: url(../gui/ico/del-outline-off.svg)}
.ico-tx-del-w{background: url(../gui/ico/del-outline-w.svg)}
.ico-tx-doc-ver{background: url(../gui/ico/doc-ver-outline-on.svg)}
.ico-tx-editar{background: url(../gui/ico/editar-outline-on.svg)}
.ico-tx-editar-off{background: url(../gui/ico/editar-outline-off.svg)}
.ico-tx-editar-w{background: url(../gui/ico/editar-outline-w.svg)}
.ico-tx-egreso{background: url(../gui/ico/egreso-outline-on.svg)}
.ico-tx-egreso-off{background: url(../gui/ico/egreso-outline-off.svg)}
.ico-tx-egreso-w{background: url(../gui/ico/egreso-outline-w.svg)}
.ico-tx-med-diagnostico{background: url(../gui/ico/med-diagnostico-outline-on.svg)}
.ico-tx-diagnostico-off{background: url(../gui/ico/diagnostico-outline-off.svg)}
.ico-tx-diagnostico-w{background: url(../gui/ico/diagnostico-outline-w.svg)}
.ico-tx-historial{background: url(../gui/ico/historial-outline-off.svg)}
.ico-tx-hora{background: url(../gui/ico/hora-outline-on.svg)}
.ico-tx-hora-off{background: url(../gui/ico/hora-outline-off.svg)}
.ico-tx-hora-w{background: url(../gui/ico/hora-outline-w.svg)}
.ico-tx-ingreso{background: url(../gui/ico/ingreso-outline-on.svg)}
.ico-tx-ingreso-off{background: url(../gui/ico/ingreso-outline-off.svg)}
.ico-tx-ingreso-w{background: url(../gui/ico/ingreso-outline-w.svg)}
.ico-tx-link{background: url(../gui/ico/link-outline-on.svg)}
.ico-tx-link-off{background: url(../gui/ico/link-outline-off.svg)}
.ico-tx-link-w{background: url(../gui/ico/link-outline-w.svg)}
.ico-tx-open{background: url(../gui/ico/open-outline-on.svg)}
.ico-tx-open-off{background: url(../gui/ico/open-outline-off.svg)}
.ico-tx-open-w{background: url(../gui/ico/open-outline-w.svg)}
.ico-tx-print{background: url(../gui/ico/print-outline-on.svg)}
.ico-tx-print-off{background: url(../gui/ico/print-outline-off.svg)}
.ico-tx-print-w{background: url(../gui/ico/print-outline-w.svg)}

.ico-tx-star{background: url(../gui/ico/star-ribbon-outline-on.svg)}
.ico-tx-star-off{background: url(../gui/ico/star-ribbon-outline-off.svg)}

.ico-tx-tarjeta{background: url(../gui/icos/credit-card-outline.svg)}
.ico-tx-tarjeta-descuento{background: url(../gui/ico/card-descuento-outline-on.svg)}
.ico-tx-logout{background: url(../gui/ico/logout-outline-on.svg)}
.ico-tx-usuario{background: url(../gui/ico/usuario-outline-off.svg)}
.ico-tx-cliente{background: url(../gui/ico/cliente-outline-off.svg)}
.ico-tx-vendedor{background: url(../gui/ico/vendedor-outline-on.svg)}
.ico-tx-proveedor{background: url(../gui/ico/proveedor-outline-off.svg)}
.ico-tx-info{background: url(../gui/ico/info-outline-on.svg)}
.ico-tx-pin{background: url(../gui/ico/pin-outline-on.svg)}
.ico-tx-pin-off{background: url(../gui/ico/pin-outline-off.svg)}
.ico-tx-fecha{background: url(../gui/ico/fecha-outline-on.svg)}
.ico-tx-moneda{background: url(../gui/ico/moneda-outline-on.svg)}
.ico-tx-click{background: url(../gui/ico/click-outline-on.svg)}
.ico-tx-codigoqr{background: url(../gui/ico/qr-outline-on.svg)}
.ico-tx-download{background: url(../gui/ico/download-outline-on.svg)}
.ico-tx-w-download{background: url(../gui/ico/download-outline-w.svg)}
.ico-tx-add{background: url(../gui/ico/add-outline-on.svg)}
.ico-tx-copiar{background: url(../gui/ico/copiar-outline-on.svg)}
.ico-tx-filtro{background: url(../gui/ico/filtro-outline-off.svg)}
.ico-tx-carro-gas{background: url(../gui/ico/carro-gas-outline-off.svg)}
.ico-tx-carro-odometro{background: url(../gui/ico/carro-odometro-outline-off.svg)}

.bx-ico-tx .ico-tx{display: block !important;margin-bottom: 5px;}
.bx-ico-tx .ico-tx:last-child{margin-bottom: 0px;}

.ico-nav{background: url(../gui/ico/nav.svg)}
.ico-nav-w{background: url(../gui/ico/nav-w.svg)}

/* Tag ***************************************************************************************************************/

.tag-inline{background-color: #E8EAED; padding: 5px 7px; border-radius: 6px; margin-right: 5px;}

.tag{background-color: var(--color-ho); color: var(--color-t1); padding: 0px 6px; height: 20px; line-height: 20px; border-radius: 4px; margin: 0px 1px 0px 1px; font-size: 12px !important; font-weight: 400; position: relative; text-decoration: none !important;white-space:nowrap; display: inline-block}
a.tag:hover{text-decoration: none !important;}
.tag-verde{background-color: var(--color-ve); color: var(--color-co) !important}
.tag-amarillo{background-color: var(--color-am); color: var(--color-co) !important}
.tag-rojo{color: var(--color-co) !important; background-color: var(--color-ro);}
.tag-azul{background-color: var(--color-az); color: var(--color-co) !important}
.tag:last-child{margin-right: 0px;}

.tag-off{ background-color: var(--color-b1); color: var(--color-ba); border-radius: 6px; padding: 0 7px; height: 20px; line-height: 21px; display: inline-block; margin: 0 5px 0 0; font-size: 13px; text-decoration: none !important}
.tag-off:first-child{margin: 0 5px 0 0;}

.tag-preventivo{background-color: #FFE66D; color: #9E8B0B; border-radius: 6px; padding: 4px 7px; margin: 0 5px; font-size: 13px;text-decoration: none !important}
.tag-preventivo:first-child{margin: 0 5px 0 0;}
.tag-activo{background-color: #35B221; color: var(--color-co); border-radius: 6px; padding: 4px 7px; margin: 0 5px; font-size: 13px;text-decoration: none !important}
.tag-activo:first-child{margin: 0 5px 0 0;}

.dot-tc-alerta{background-color: var(--color-ba); width: 10px; height: 10px; border-radius: 10px; position: absolute; top: 12px; left: -6px;}

/* Modal ***************************************************************************************************************/

.reveal-modal-bg{position:fixed;top:0;left:0;right: 0; bottom: 0; background-color: var(--overlay);z-index:20;display:none;}
.reveal-modal{text-align:left;visibility:hidden;top:50%;left:50%;background-color:var(--color-co); position:absolute!important;z-index:104;padding:72px 24px 24px 24px; box-sizing: border-box; border-radius: 6px; transform: translate(-50%,-50%); box-shadow: var(--shadow-2); overflow: hidden;}
.reveal-modal .modal-bx-scroll{border: 0; overflow-y: auto; max-height: calc(100vh - 240px); margin: -24px; padding: 20px;}
.reveal-modal .modal-bx-scroll-buscador{border: 0; overflow-y: auto; max-height: calc(100vh - 480px); margin: 0px -24px 0px -24px; padding: 0px 24px 0px 24px;}
.reveal-modal input:focus{outline:0px; border-color: #4285F4; box-shadow: var(--shadow-field);}
.reveal-modal h1{position:absolute;left:0;top:0px;right:0!important;margin:0;padding:0px 24px; height: 50px; line-height: 51px; font-size:14px;text-align: left; border-bottom: 1px var(--color-b1) solid; background-color: var(--color-bg);}
.reveal-modal h1 span{position: absolute; top: 0; right: 50px;}
.reveal-modal h1 span a{font-size: 13px;padding: 4px 8px; background-color: var(--color-ba); color: var(--color-co); border-radius: 6px;}
.reveal-modal h5{color:var(--color-ba);line-height:28px;margin:-40px 0 0 0;padding:0 0 24px 0;font-size:24px;text-align: center; font-weight: 700;}
.reveal-modal h5 small{color: var(--color-ba) !important; font-size: 16px !important; font-weight: 500 !important;}
.reveal-modal h2{margin: 0 0 20px 0; padding: 0;color: var(--color-ba)}
.reveal-modal h3{color: var(--color-ba);}
.reveal-modal h4{color: var(--color-ba);}

.reveal-modal .buscador{margin: -24px -24px 24px -24px; border-bottom: 1px var(--color-b1) solid}
.reveal-modal .buscador input[type="text"]{ border-radius: 0px;}

.reveal-modal p{padding:0;margin:0 0 24px;}
.reveal-modal hr { border: 0; border-bottom: 1px var(--color-b1) solid;margin: 24px -24px !important;}
.reveal-modal ul.tabs{margin: 0px 0px 0px 0px;padding: 0 0px;box-sizing: border-box;list-style: none;}
.reveal-modal .ft{}
.reveal-modal .ffc{border: 0}
.reveal-modal .ffbc{margin: 24px -24px -24px -24px;}
.reveal-modal .ffbc input[type="submit"]{text-align: center; background-color: var(--color-ba); color: var(--color-co); height: 48px; line-height: 48px; border: 0; border-radius:0px 0px 4px 4px; width: 100%;}
.reveal-modal .ffbc .btn{background-color: var(--color-ba) !important; color: var(--color-co) !important; height: 50px; line-height: 50px; border: 0; border-radius: 0px 0px 5px 5px;box-sizing: border-box; width: 100%; text-align: center}
.reveal-modal .btn{background-color: var(--color-ba) !important; color: var(--color-co) !important; height: 40px; line-height: 40px; border: 0; border-radius: 6px;box-sizing: border-box}

.reveal-modal .ffbc .btn-off{background-color: transparent !important; color: var(--color-ba) !important; font-weight: 700;}

.reveal-modal.small{width:300px;}
.reveal-modal.medium{width:400px;}
.reveal-modal.large{width:600px;}
.reveal-modal.xlarge{width:800px;}
.reveal-modal .close-reveal-modal{ font-size:19px; font-weight: 500; padding:0;position:absolute;top:0px;right:0px; z-index: 4; width: 50px; height: 50px; line-height: 51px; text-align: center; color:var(--color-ba) !important; cursor:pointer; text-decoration: none;}
.reveal-modal label.error{margin:0px !important;background-color: transparent; color:#9AA0A6; display: inline-block; font-size: 13px; height: 20px; line-height: 20px; display: none !important}
.reveal-modal .required.error{border: 1px #EA4335 solid;}
.reveal-modal .pop{position: absolute !important; top: 28px; right: 60px;}
.reveal-modal .pop ul{left: auto !important; right: 0 !important;}

.reveal-modal .bx-upload {position: relative; height: 240px;}

.reveal-modal .bx-btn{margin: 20px -20px -20px -20px; border-radius: 0 0 6px 6px; border-top: 1px var(--color-b1) solid; display: flex;}
.reveal-modal .bx-btn .btn{flex: 1; height: 50px; line-height: 50px; background-color: transparent !important; color: var(--color-ba) !important; text-align: center; font-weight: 500; border-right: 1px solid var(--color-b1); border-radius: 0;}
.reveal-modal .bx-btn .btn:last-child{border-right: 0px}
.reveal-modal .bx-btn .btn-off{color: var(--color-t2) !important; font-weight: 400;}

.reveal-modal .bx-t{position: relative; overflow: auto; white-space:nowrap; margin: 0px; padding: 0px !important; border-radius: 6px; background-color: var(--color-co); border: 1px var(--color-b1) solid; box-shadow: none;}

.reveal-modal .bx-t .t .tr:last-child{border-bottom: 0 !important;}

/* Modal Simple ***************************************************************************************************************/

.modal-firma{position: fixed; top: 0; right: 0; bottom: 0; left: 0px; z-index: 100; background: rgba(51,56,66,0.5);display: none;}
.modal-firma .modal-firma-contenedor{background-color: var(--color-co); width: 300px; position: relative; padding: 70px 30px 30px 30px;border-radius: 6px;}
.modal-firma .modal-firma-contenedor h1{position: absolute; top: 0; left: 0; right: 0; font-size: 16px; margin: 0; padding: 0; height: 50px; line-height: 52px; text-indent: 30px; font-weight: 500; color: #273676; border-bottom: 1px #ECEFF1 solid;}
.modal-firma .modal-firma-contenedor p{color: var(--color-ba)}
.modal-firma .modal-firma-contenedor hr { border: 0; border-bottom: 1px #ECEFF1 solid;margin: 30px -30px 30px -30px !important}
.modal-firma .modal-firma-contenedor .modal-firma-close{position: absolute; top: 0px; right: 10px; z-index: 4; text-decoration: none; display: block; font-size: 28px; color: #273676; width: 50px; height: 50px; line-height: 50px; text-align: center; }

/* CBPN Loader */

.cbpn-loader-target{min-height: 45px; position: relative;}
.cbpn-loader{position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; opacity: 1; background-color: var(--color-co); border-radius: 6px;}
.cbpn-loader span{position: absolute; top: calc(50% - 12px); left: calc(50% - 12px); width: 24px; height: 24px; background: url(../gui/ico/loading.svg) 50% 50% no-repeat; background-size: 100% auto; animation-name: rotate;animation-duration: 2s;animation-iteration-count:infinite;}
.cbpn-loader-out{animation-name: fade-out;animation-duration: 300ms; opacity: 0.1;}

/* CBPN Sendmail */

.cbpn-sendmail{position: fixed; bottom: 20px; left: 20px; z-index: 102; background-color: var(--color-ba); color: var(--color-co); width: 300px; padding: 20px; box-sizing: border-box; border-radius: 6px; box-shadow: var(--shadow-2); cursor: default; animation-name: slide-in;animation-duration: 300ms;}
.cbpn-sendmail-error{background-color: var(--color-ro) !important}
.cbpn-sendmail-out{animation-name: slide-out;animation-duration: 300ms; opacity: 0;}

/* CBPN Modal */

.cbpn-modal-overlay{position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 40; background-color: rgba(0,0,0,0.5); animation-name: fade-in;animation-duration: 300ms; opacity: 1;}
.cbpn-modal-overlay-out{animation-name: fade-out;animation-duration: 300ms;opacity:0}

.cbpn-modal{position: fixed; top: 50%; left: 50%; z-index: 41; width: 400px; transform: translate(-50%,-50%); box-shadow: var(--shadow-1); border-radius: 9px; background-color: var(--color-co); overflow: hidden; animation-name: slide-in;animation-duration: 300ms;}
.cbpn-modal h1{margin:0px !important; height: 56px; line-height: 56px; text-indent: 24px; font-size: 16px; font-weight: 500; background-color: var(--color-bg);}
.cbpn-modal h1.alerta{background-color: var(--color-ro) !important; color: var(--color-co) !important;}
.cbpn-modal .modal-contenido{padding:24px; overflow-x: hidden; overflow-y: auto; max-height: calc(100vh - 280px);}
.cbpn-modal hr { border: 0; border-bottom: 0.5px var(--color-b1) solid;margin: 24px -24px}
.cbpn-modal .bx-btns{margin: 0px; border-top: 0.5px var(--color-b1) solid; display: flex;}
.cbpn-modal .bx-btns .btn{flex: 1; height: 56px; line-height: 56px; background-color: transparent !important; color: var(--color-ba) !important; text-align: center; font-weight: 500; border-right: 0.5px solid var(--color-b1); border-radius: 0;}
.cbpn-modal .bx-btns .btn:last-child{border-right: 0px}
.cbpn-modal .bx-btns .btn-off{color: var(--color-t2) !important; font-weight: 400;}
.cbpn-modal-out{animation-name: slide-out;animation-duration: 300ms; opacity: 0;}

/* CBPN Lateral */

.cbpn-lateral-overlay{position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 30; background-color: rgba(0,0,0,0.2); animation-name: fade-in;animation-duration: 300ms; opacity: 1;}
.cbpn-lateral-overlay-out{animation-name: fade-out;animation-duration: 300ms;opacity:0}

.cbpn-lateral{position: fixed; top: 50%; left: 50%; z-index: 31; width: 480px; transform: translate(-50%,-50%); box-shadow: var(--shadow-1); border-radius: 9px; background-color: var(--color-co); overflow: hidden; animation-name: slide-in;animation-duration: 300ms;}
.cbpn-lateral h2{margin:0px !important; height: 56px; line-height: 56px; font-size: 16px; text-indent: 24px; font-weight: 500; background-color: var(--color-bg);}
.cbpn-lateral .bx-lateral{padding:24px; max-height: calc(100vh - 300px); overflow: auto;}
.cbpn-lateral hr { border: 0; border-bottom: 0.5px var(--color-b1) solid;margin: 24px -24px}
.cbpn-lateral .bx-btns{margin: 0px; border-top: 0.5px var(--color-b1) solid; display: flex;}
.cbpn-lateral .bx-btns .btn{flex: 1; height: 56px; line-height: 56px; background-color: transparent !important; color: var(--color-ba) !important; text-align: center; font-weight: 500; border-right: 0.5px solid var(--color-b1); border-radius: 0;}
.cbpn-lateral .bx-btns .btn:last-child{border-right: 0px}
.cbpn-lateral .bx-btns .btn-off{color: var(--color-t2) !important; font-weight: 400;}
.cbpn-lateral-out{animation-name: slide-out;animation-duration: 300ms; opacity: 0;}

/* CBPN Bloques Columnas */

.cbpn-grid{display: grid; grid-gap: 24px; padding: 0px 0px 24px 0px !important;position: relative; z-index: 1;}
.cbpn-grid:last-child{padding: 0px;}

.cbpn-grid.grid-1 {grid-template-columns: 1fr;}
.cbpn-grid.grid-2 {grid-template-columns: 1fr 1fr}
.cbpn-grid.grid-3 {grid-template-columns: 1fr 1fr 1fr}
.cbpn-grid.grid-4 {grid-template-columns: 1fr 1fr 1fr 1fr}

.cbpn-grid .item{border: 0.5px solid var(--color-b1); padding: 16px; border-radius: 6px; position: relative; background-color: var(--color-ho) !important; min-height: 40px;}
.cbpn-grid .item .controles{padding: 8px 0 0 0}
.cbpn-grid .item .controles a{margin: 0 8px 0 0}
.cbpn-grid .item .bx-cover{position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; justify-content: center; align-items: center; z-index: 1;}
.cbpn-grid .item .btn-cover{position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; justify-content: center; align-items: center; z-index: 1;}

.handle{width: 100%;}

.bx-sort li {list-style: none !important}

/* CBPN Cards */

.cbpn-card-perfil{position:relative; width: 100%; background-color: var(--color-bg); border-radius: 6px;}
.cbpn-card-perfil:before{content:''; display: block; padding-top: 50%;}
.cbpn-card-perfil .cbpn-card-perfil-contenedor {border-radius: 6px !important;overflow: hidden !important;position: absolute;top: 0; right: 0; bottom: 0; left: 0;}
.cbpn-card-perfil .cbpn-card-perfil-contenedor .cbpn-card-perfil-contenedor-loading {position: absolute;top: 0; right: 0; bottom: 0; left: 0; z-index: 2; border-radius: 1000px !important; background-color: rgba(255,255,255,0.5);}
.cbpn-card-perfil .cbpn-card-perfil-contenedor .cbpn-card-perfil-contenedor-loading span{position: absolute; top: calc(50% - 12px); left: calc(50% - 12px); width: 24px; height: 24px; background: url(../gui/ico/loading.svg) 50% 50% no-repeat; background-size: 100% auto; animation-name: rotate;animation-duration: 2s;animation-iteration-count:infinite;}
.cbpn-card-perfil .cbpn-card-perfil-contenedor .cbpn-card-perfil-contenedor-img {position: absolute;top: 0; right: 0; bottom: 0; left: 0; z-index: 1; background-size: cover !important;}
.cbpn-card-perfil .cbpn-card-perfil-accion {position: absolute;bottom: 8px;right: 8px; z-index: 3; background-color: var(--color-ba);transition: all .3s cubic-bezier(.175, .885, .32, 1.275);width: 40px; height: 40px; border-radius: 40px;}
.cbpn-card-perfil .cbpn-card-perfil-accion:hover {transition: all .3s cubic-bezier(.175, .885, .32, 1.275);}
.cbpn-card-perfil .cbpn-card-perfil-accion .cbpn-card-perfil-accion-campo {display: none;}
.cbpn-card-perfil .cbpn-card-perfil-accion .cbpn-card-perfil-accion-btn {width: 40px; height: 40px; background: url(../gui/ico/camara-w.svg) 50% 50% no-repeat; background-size: 20px auto;}
.cbpn-card-perfil .cbpn-card-perfil-accion .cbpn-card-perfil-accion-btn:hover {transition: all .3s cubic-bezier(.175, .885, .32, 1.275);color: #999;}

/* Mini Editor */

.pell {box-sizing: border-box; border: 0.5px solid var(--color-b1); border-radius: 6px;}

.pell-content {box-sizing: border-box;height: 320px;outline: 0;overflow-y: auto;padding: 16px;}
.pell-actionbar {border-bottom: 0.5px solid var(--color-b1); padding: 4px;}
.pell-button {background-color: transparent;border: none;cursor: pointer;height: 32px;outline: 0;width: 40px;vertical-align: bottom; position: relative;}
.pell-button span{position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-size: 16px auto !important; background-position: 50% 50% !important; background-repeat: no-repeat !important;}
.pell-button-selected {background-color: var(--color-bg); border-radius: 6px;}

.pell-button-bold{background: url(../gui/editor/bold.svg)}
.pell-button-italic{background: url(../gui/editor/italic.svg)}
.pell-button-underline{background: url(../gui/editor/underline.svg)}
.pell-button-strike{background: url(../gui/editor/strike.svg)}
.pell-button-paragraph{background: url(../gui/editor/paragraph.svg)}
.pell-button-olist{background: url(../gui/editor/olist.svg)}
.pell-button-ulist{background: url(../gui/editor/ulist.svg)}
.pell-button-aleft{background: url(../gui/editor/aleft.svg)}
.pell-button-acenter{background: url(../gui/editor/acenter.svg)}
.pell-button-aright{background: url(../gui/editor/aright.svg)}
.pell-button-ajustify{background: url(../gui/editor/ajustify.svg)}
.pell-button-link{background: url(../gui/editor/link.svg)}
.pell-button-image{background: url(../gui/editor/image.svg)}
.pell-button-clear{background: url(../gui/editor/clear.svg)}
.pell-button-button{background: url(../gui/editor/button.svg)}
.pell-button-pdf{background: url(../gui/editor/pdf.svg)}
.pell-button-download{background: url(../gui/editor/download.svg)}

.pell-content h1 {
	font-size: 24px !important;
	background-color: transparent !important;
	height: auto !important;
	line-height: normal !important;
	text-indent: 0 !important;
	margin: 0px !important;
	padding: 0 0 16px 0;
}

.pell-content h2 {
	font-size: 20px !important;
	background-color: transparent !important;
	height: auto !important;
	line-height: normal !important;
	text-indent: 0 !important;
	margin: 0px !important;
	padding: 0 0 16px 0;
}

.pell-content h3 {
	font-size: 16px !important;
	background-color: transparent !important;
	height: auto !important;
	line-height: normal !important;
	text-indent: 0 !important;
	margin: 0px !important;
	padding: 0 0 16px 0;
}

.pell-content p {
	font-size: 12px !important;
	margin: 0px !important;
	padding: 0 0 16px 0 !important;
}

.pell-content ul, .pell-content ol {
	margin: 0 !important;
	padding: 0 0 16px 32px !important;
	height: auto !important;
	line-height: normal !important;
}

.pell-content ul li, .pell-content ol li{
	font-size: 12px !important;
	margin: 0 !important;
	padding: 0 !important;
	height: auto !important;
	line-height: normal !important;
}

.pell-content a {
	font-size: 12px !important;
	color: var(--color-ba) !important;
	text-decoration: underline !important;
}

.pell-content b {
	font-size: 12px !important;
	color: var(--color-ba) !important;
	font-weight: 700 !important;
}


.modal{position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: var(--overlay); z-index: 9999;display: none;}
.modal .modal-contenedor{background-color: var(--color-co); border: 0px #333842 solid; width: 300px; position: relative; padding: 70px 20px 20px 20px;border-radius: 6px; box-shadow: var(--shadow-2);}
.modal .modal-contenedor h1{position:absolute;left:0;top:0px;right:0!important;margin:0;padding:0px 20px; height: 50px; line-height: 52px; font-size:16px;text-align: left; border-bottom: 1px #ECEFF1 solid;}
.modal .modal-contenedor .modal-close{font-size:19px; font-weight: 500; padding:0;position:absolute;top:0px;right:0px; z-index: 4; width: 50px; height: 50px; line-height: 50px; text-align: center; color:var(--color-ba) !important; cursor:pointer; text-decoration: none;}
.modal .modal-contenedor .bx-btn{margin: 20px -20px -20px -20px; border-radius: 0 0 6px 6px; border-top: 1px #ECEFF1 solid}
.modal .modal-contenedor .bx-btn .btn{height: 50px; line-height: 50px;}

/* Datepicker ***************************************************************************************************************/

.datepicker-container {
  background-color: var(--color-co);
  color: var(--color-t1);
  direction: ltr;
  font-size: 12px;
  left: 0;
  line-height: 30px;
  position: fixed;
  -webkit-tap-highlight-color: transparent;
  top: 0;
  -ms-touch-action: none;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 210px;
  z-index: -1;
  border-radius: 9px;
  padding: 10px;
}

.datepicker-container::before,
.datepicker-container::after {
  border: 5px solid transparent;
  content: " ";
  display: block;
  height: 0;
  position: absolute;
  width: 0;
}

.datepicker-dropdown {
  border: 0px solid var(--color-b1);
  -webkit-box-shadow: var(--shadow-1);
  box-shadow: var(--shadow-1);
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  position: absolute;
  z-index: 1;
}

.datepicker-inline {
  position: static;
}


.datepicker-top-left::after,
.datepicker-top-right::after {
  border-bottom-color: var(--color-co);
  top: -4px;
}

.datepicker-bottom-left,
.datepicker-bottom-right {
  border-bottom-color: #39f;
}

.datepicker-bottom-left::before,
.datepicker-bottom-left::after,
.datepicker-bottom-right::before,
.datepicker-bottom-right::after {
  border-bottom: 0;
  bottom: -5px;
  left: 10px;
}

.datepicker-bottom-left::before,
.datepicker-bottom-right::before {
  border-top-color: #39f;
}

.datepicker-bottom-left::after,
.datepicker-bottom-right::after {
  border-top-color: var(--color-co);
  bottom: -4px;
}

.datepicker-top-right::before,
.datepicker-top-right::after,
.datepicker-bottom-right::before,
.datepicker-bottom-right::after {
  left: auto;
  right: 10px;
}

.datepicker-panel > ul {
  margin: 0;
  padding: 0;
  width: 102%;
}

.datepicker-panel > ul::before,
.datepicker-panel > ul::after {
  content: " ";
  display: table;
}

.datepicker-panel > ul::after {
  clear: both;
}

.datepicker-panel > ul > li {
  background-color: var(--color-co);
  cursor: pointer;
  float: left;
  height: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
  width: 30px;
  border-radius: 30px;
}

.datepicker-panel > ul > li:hover {
  background-color: var(--color-co);
}

.datepicker-panel > ul > li.muted,
.datepicker-panel > ul > li.muted:hover {
  color: rgba(0,0,0,0.2);
}

.datepicker-panel > ul > li.highlighted {
  background-color: var(--color-ke) !important;
  color: var(--color-co) !important;
}

.datepicker-panel > ul > li.highlighted:hover {
  background-color: rgb(204, 229, 255);
}

.datepicker-panel > ul > li.picked,
.datepicker-panel > ul > li.picked:hover {
  color: var(--color-co);
  background-color: var(--color-ka);
}

.datepicker-panel > ul > li.disabled,
.datepicker-panel > ul > li.disabled:hover {
  background-color: var(--color-co);
  color: rgba(0,0,0,0.1);
  cursor: default;
}

.datepicker-panel > ul > li.disabled.highlighted,
.datepicker-panel > ul > li.disabled:hover.highlighted {
  background-color: rgb(229, 242, 255);
}

.datepicker-panel > ul > li[data-view="years prev"],
.datepicker-panel > ul > li[data-view="year prev"],
.datepicker-panel > ul > li[data-view="month prev"],
.datepicker-panel > ul > li[data-view="years next"],
.datepicker-panel > ul > li[data-view="year next"],
.datepicker-panel > ul > li[data-view="month next"],
.datepicker-panel > ul > li[data-view="next"] {
  font-size: 18px;
}

.datepicker-panel > ul > li[data-view="years current"],
.datepicker-panel > ul > li[data-view="year current"],
.datepicker-panel > ul > li[data-view="month current"] {
  width: 150px;
}

.datepicker-panel > ul[data-view="years"] > li,
.datepicker-panel > ul[data-view="months"] > li {
  height: 52.5px;
  line-height: 52.5px;
  width: 52.5px;
}

.datepicker-panel > ul[data-view="week"] > li,
.datepicker-panel > ul[data-view="week"] > li:hover {
  background-color: var(--color-co);
  cursor: default;
}

.datepicker-hide {
  display: none;
}

/* Acceso **************************************************************************************************************/

.sitio {position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-size: auto 100%; background-color: var(--color-co);}


.sitio .bx-acceso{position: fixed; top: 50%; left: 50%; z-index: 101; transform: translate(-50%,-50%); width: 320px; box-sizing: border-box;}
.sitio .bx-acceso .bx-acceso-contenido{}
.sitio .bx-acceso .bx-acceso-contenido .logo{width: 111px; height: 32px;  margin: 0 auto 24px auto; background: url(../gui/ademy.svg?v=2) 50% 0% no-repeat; background-size: auto 100%;}
.sitio .bx-acceso .bx-acceso-contenido .logo-intro{display: block; text-align: center; padding: 0 0 24px 0; color: var(--color-ba); font-size: 16px; font-weight: 400;}

.sitio .bx-acceso .bx-acceso-contenido h2{}
.sitio .bx-acceso .bx-acceso-contenido p{}
.sitio .bx-acceso .bx-acceso-contenido .campos{background-color: var(--color-co); border: 0.5px solid var(--color-b1); border-radius: 8px; overflow: hidden;}
.sitio .bx-acceso .bx-acceso-contenido .campos input{border-bottom: 0.5px var(--color-b1) solid; border-radius: 0; background-color: transparent !important; height: 48px !important; text-indent: 16px !important;}
.sitio .bx-acceso .bx-acceso-contenido .campos input:last-child{border-bottom: 0px;}
.sitio .bx-acceso .bx-acceso-contenido .campos .btn-login {background-color: var(--color-ba); color: var(--color-co); height: 48px; line-height: 48px; border-radius: 0px; font-weight: 700; display: block; width: 100%; text-align: center;}

.sitio .bx-acceso .bx-acceso-contenido .msg-error-login{padding: 24px 0 0 0; text-align: center; font-size: 16px; color: var(--color-ba);}
.sitio .bx-acceso .bx-acceso-contenido .disclaimer{padding: 20px 0 0 0 !important; display: block}
.sitio .bx-acceso h2{font-size: 20px}
.sitio .bx-acceso .ft{}
.sitio .bx-acceso .ff{}
.sitio .bx-acceso .ffc{}

.sitio .bx-acceso input[type=text],  .bx-acceso input[type=password], .sitio .bx-acceso input[type=email]{border: 0; text-indent: 0; padding: 0; background-color: transparent !important; box-shadow: none !important;}
.sitio .bx-acceso input[type=submit] {background-color: var(--color-ba); color: var(--color-co); height: 48px; line-height: 48px; border-radius: 6px; font-weight: 700; display: block; width: 100%;}
.sitio .bx-acceso .recover-pass-link{}

.sitio .bx-acceso input:-webkit-autofill {
    -webkit-box-shadow: inset 0 0 0px 9999px var(--color-co);
    -webkit-text-fill-color: var(--color-ba);
}

/* PERFILES ***************************************************************************************************************/

.perfil-s .img{ width: 140px; height: 140px; background-size: cover !important; background-repeat: no-repeat !important; background-position: 50% 50% !important; margin: 0 auto; border: 2px var(--color-b1) solid; border-radius: 160px;}
.perfil-s .img-none{background: url(../gui/ico_camara.svg); width: 160px; height: 160px; background-size: 50px auto !important; background-repeat: no-repeat !important; background-position: 50% 50% !important; margin: 0 auto; border: 1px var(--color-b1) solid; border-radius: 160px;}
.perfil-s .titulo {text-align: center; margin: 20px 0 0 0; font-size: 16px;}

/* Tags Input ***************************************************************************************************************/

div.tagsinput { border:1px solid var(--color-b1); border-radius: 6px; background: var(--color-co); padding:0px 5px 0 0; width:100%; height:auto; overflow-y: auto;border-box;}
div.tagsinput span.tag { display: block; float: left; text-decoration:none; background: #528AFA; color: var(--color-co); font-size:13px; margin: 7px 0 0 7px}
div.tagsinput span.tag a { font-weight: bold; color: var(--color-co); text-decoration:none; } 
div.tagsinput input { width:80px; margin:0px; font-family: helvetica; font-size: 13px; border:1px solid transparent; padding:10px 5px 10px 5px; background: transparent; color: var(--color-ba); outline:0px;  margin-right:5px; margin-bottom:5px; }
div.tagsinput div { display:block; float: left; } 
.tags_clear { clear: both; width: 100%; height: 0px; }
.not_valid {background: var(--color-co) !important; color: #FF292F !important;}

/* Scroll ***************************************************************************************************************/

/*::-webkit-scrollbar {width: 10px; height: 10px; background-color: transparent;}
::-webkit-scrollbar-track {margin: 0px; }
::-webkit-scrollbar-thumb {-webkit-border-radius: 6px;border-radius: 6px; background-color: #9AA0A6;}
::-webkit-scrollbar-thumb:window-inactive {background-color: var(--color-b1);}*/

/* Formulario ***************************************************************************************************************/

input[type="text"],input[type="number"],input[type="password"],input[type="email"]{ border: 0.5px var(--color-b1) solid; border-radius: 6px;margin:0;background-color:var(--color-co) !important;outline:none;font-size: 13px; font-weight: 400; color: var(--color-t1); width: 100%; height: 48px; text-indent: 1px;box-sizing: border-box;-webkit-appearance:none;}

.big-input{border:1px var(--color-b1) solid;border-radius: 6px;margin:0;background-color:var(--color-co) !important;outline:none;font-size: 26px !important; color: var(--color-ba); width: 100%; height: 60px !important; text-indent: 10px;box-sizing: border-box; color: var(--color-t1) !important;-webkit-appearance:none;}

textarea{border: 0.5px var(--color-b1) solid; border-radius: 6px;margin:0;background-color:var(--color-co);outline:none;font-size: 13px !important; font-weight: 400; color: var(--color-t1); width: 100%; padding: 10px 10px 10px 9px; box-sizing: border-box;-webkit-appearance:none;}

select{background: url(../gui/ico/down-outline-on.svg) right 13px center no-repeat; background-size: 20px auto; border: 0.5px var(--color-b1) solid; border-radius: 6px;margin:0;background-color:var(--color-co);outline:none;font-size: 13px !important; font-weight: 400; color: var(--color-t1); width: 100%; height: 48px; text-indent: 2px;-webkit-appearance:none;}

.bx-radio{margin: 0 0 10px 0;}
input[type=radio] {display:none; }
input[type=radio] + label {display:block;padding: 5px 0px 5px 27px; vertical-align:middle;text-align:left; background: url(../gui/ico/radio1-outline-off.svg) 0px 4px no-repeat; background-size: 20px auto; line-height: 17px; cursor: pointer;}
input[type=radio]:checked + label {background: url(../gui/ico/radio1-outline-on.svg) 0px 4px no-repeat; background-size: 20px auto;}
input[type=radio] + label span{float: right;}

input[type=checkbox] {display:none; }
input[type=checkbox] + label {display:block;padding: 9px 0px 9px 26px; vertical-align:middle;text-align:left;margin: 0 0 1px 0 !important; background: url(../gui/ico/checkbox-outline-off.svg) 0px 8px no-repeat; background-size: 20px auto; border-radius: 6px;line-height: 17px; cursor: pointer;}
input[type=checkbox]:checked + label {background: url(../gui/ico/checkbox-outline-on.svg) 0px 8px no-repeat; background-size: 20px auto; margin: 0 0 1px 0 !important; }
input[type=checkbox] + label span{float: right}

.t-ck-th{width: 20px; height: 16px; background: url(../gui/icos/checkmark-circle-2-outline.svg) 50% 50% no-repeat; background-size: 24px auto;}
.t-ck {position: absolute; top: 0; bottom: 0; left: 0; right: 0;}
.t-ck input[type=checkbox] {display:none; }
.t-ck input[type=checkbox] + label {position: absolute; top: 0; bottom: 0; display:block; width: 20px; margin: 0; background: url(../gui/icos/checkmark-circle-2-outline.svg) 50% 50% no-repeat; background-size: 16px auto; cursor: pointer;}
.t-ck input[type=checkbox]:checked + label {background: url(../gui/icos/checkmark-circle-2.svg) 50% 50% no-repeat; background-size: 24px auto; }

.file-container {overflow: hidden;position: relative;color: var(--color-ba); border-radius: 6px;height: 60px; line-height: 60px;text-align: center; background-color: var(--color-co); border: 1px var(--color-b1) dashed; font-size: 13px; margin: 0 0 20px 0; cursor: pointer}
.file-container span{background: url(../gui/ico/upload-outline-on.svg) 0% 50% no-repeat; background-size: 20px auto; padding: 0 0 0 30px; font-weight: 500;}
.file-container:hover{background-color: #f3f3f3; color: var(--color-ba)}
.file-container [type=file] {cursor: inherit;display: block;font-size: 999px;filter: alpha(opacity=0);width: 100%;opacity: 0;position: absolute;right: 0;text-align: center;top: 0;}

.file-container-custom {position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden;background-color: #FBFCFD}
.file-container-custom:hover{}
.file-container-custom [type=file] {cursor: inherit;display: block;font-size: 999px;filter: alpha(opacity=0);width: 100%;opacity: 0;position: absolute;right: 0;text-align: center;top: 0;}

.bx-upload {position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden;}
.bx-upload:hover{}
.bx-upload [type=file] {cursor: inherit;display: block;font-size: 999px;filter: alpha(opacity=0);width: 100%;opacity: 0;position: absolute;right: 0;text-align: center;top: 0;}
.bx-upload-msg{background: url(../gui/ico/upload-outline-on.svg) 50% 0 no-repeat; background-size: 64px auto; padding: 80px 30px 30px 30px; text-align: center; position: absolute; top: 50%; left: 0; right: 0; transform: translate(0,-50%); color: var(--color-ba);}
.bx-upload-error{background: url(../gui/ico/alerta-outline-on.svg) 50% 0 no-repeat; background-size: 64px auto; padding: 80px 30px 30px 30px; text-align: center; position: absolute; top: 50%; left: 0; right: 0; transform: translate(0,-50%); color: var(--color-ba);}
.bx-upload-listo{background: url(../gui/ico/checkbox-outline-on.svg) 50% 0 no-repeat; background-size: 64px auto; padding: 80px 30px 30px 30px; text-align: center; position: absolute; top: 50%; left: 0; right: 0; transform: translate(0,-50%); color: var(--color-ba);}
.bx-upload-resultado{background: url(../gui/ico/checkbox-outline-on.svg) 50% 0 no-repeat; background-size: 64px auto; padding: 80px 30px 30px 30px; text-align: center; position: absolute; top: 50%; left: 0; right: 0; transform: translate(0,-50%); color: var(--color-ba);}

.perfil-file-container {overflow: hidden; position: relative;border: 3px var(--color-b1) solid;border-radius: 100%	; width: 160px; height: 160px; line-height: 160px;text-align: center; margin: 0px auto; background-size: cover !important; background-position: 50% 50% no-repeat; cursor: pointer}
.perfil-file-container:hover{background-color: #f3f3f3;}
.perfil-file-container [type=file] {cursor: inherit;display: block;font-size: 999px;filter: alpha(opacity=0);width: 100%;opacity: 0;position: absolute;right: 0;text-align: center;top: 0;}

.perfil-file-container-help {width: 100%; text-align: center}
.perfil-file-container-help span{background-color: rgba(255,255,255,0.5); color: #9AA0A6; height: 30px; line-height: 30px; padding: 0 15px; border-radius: 30px; margin: 20px 0; display: inline-block;}

.perfil-file-container-off {overflow: hidden; position: relative;border: 3px var(--color-b1) solid;border-radius: 100%;width: 160px; height: 160px; line-height: 160px;text-align: center; margin: 0px auto; background: url(../gui/ico_camara.svg) 50% 50% no-repeat; background-size: 40px auto !important; background-position: 50% 50% no-repeat;cursor: pointer}
.perfil-file-container-off:hover{background-color: #FBFCFD;}
.perfil-file-container-off [type=file] {cursor: inherit;display: block;font-size: 999px;filter: alpha(opacity=0);width: 100%;opacity: 0;position: absolute;right: 0;text-align: center;top: 0;}

.radio_custom_tabs {display:none; }
.radio_custom_tabs + label {display: inline-block !important; width: 100%; background-image: none !important; margin: 10px !important; padding: 10px !important; text-align:center !important;color: #AAA !important; border: 1px var(--color-b1) solid !important; border-radius: 6px; font-size: 13px; transition : border 200ms, color 200ms; box-sizing: border-box}
.radio_custom_tabs:checked + label {margin: 10px !important; border: 1px var(--color-ba) solid !important; color: var(--color-co) !important; background-color: var(--color-ba) !important}

.bx-radio-inv{border-radius: 6px; background-color: rgba(255,255,255,0.03);}
.bx-radio-inv h3{font-size: 13px; font-weight: 500; padding: 10px; margin: 0 !important; line-height: normal !important; border-bottom: 1px var(--color-b1) solid; color: var(--color-ba); text-align: left;}
.bx-radio-inv .radio {display:block; }
.bx-radio-inv .radio {border-bottom: 1px var(--color-ba) solid;}
.bx-radio-inv .radio:last-child {border: 0;}
.bx-radio-inv .radio input[type=radio] + label {color: var(--color-co); display: inline-block !important; width: 100%; background-image: none !important; padding: 11px !important; text-align:left !important;border-radius: 0 !important; transition : border 200ms, color 200ms, padding 200ms, background 200ms; box-sizing: border-box; background: url(../gui/ico/radio1-outline-w.svg) 19px 19px no-repeat !important; background-size: 0px auto !important;}
.bx-radio-inv .radio input[type=radio] + label b{font-weight: 500;color: var(--color-co) !important;}
.bx-radio-inv .radio input[type=radio]:checked + label { padding-left: 37px !important; background: url(../gui/ico/radio1-outline-w.svg) 10px 10px no-repeat !important; background-size: 20px auto !important; }
.bx-radio-inv .radio input[type=radio]:disabled + label {color: #9AA0A6; display: inline-block !important; width: 100%; background-image: none !important; padding: 11px !important; text-align:left !important;border-radius: 0 !important; transition : border 200ms, color 200ms, padding 200ms, background 200ms; box-sizing: border-box; background: url(../gui/ico/radio-outline-on.svg) 19px 19px no-repeat !important; background-size: 0px auto !important;}

.bx-radio .ft{padding: 10px 10px 0px 10px; box-sizing: border-box}
.bx-radio .ffc{padding: 0px 10px 0px 10px; box-sizing: border-box}

.radio-smileys {display:block; }

.radio-smileys .smiley-1{background: url(../gui/ico/smiley-1-outline-off.svg)}
.radio-smileys input[type=radio]:checked + label.smiley-1{background: url(../gui/ico/smiley-1-outline-on.svg)}

.radio-smileys .smiley-2{background: url(../gui/ico/smiley-2-outline-off.svg)}
.radio-smileys input[type=radio]:checked + label.smiley-2{background: url(../gui/ico/smiley-2-outline-on.svg)}

.radio-smileys .smiley-3{background: url(../gui/ico/smiley-3-outline-off.svg)}
.radio-smileys input[type=radio]:checked + label.smiley-3{background: url(../gui/ico/smiley-3-outline-on.svg)}

.radio-smileys input[type=radio] + label {display: inline-block !important; width: 60px !important; height: 60px !important; padding: 0 !important; margin: 0 !important; background-size: 40px 40px !important; text-indent: -6000px; background-position: 50% 50% !important; background-repeat: no-repeat !important;}
.radio-smileys input[type=radio]:checked + label {background-size: 60px 60px !important;}


.bx-radio-inline{border-radius: 6px; background-color: var(--color-co); margin: 0 0 16px 0;padding: 4px; border: 0.5px solid var(--color-b1);}
.radio-inline {display:inline-block; height: 38px; padding: 0px; box-sizing: border-box;}
.radio-inline input[type=radio]:checked + label{background-color: var(--color-ke) !important; color: var(--color-co); font-weight: 400; border-radius: 6px;}
.radio-inline input[type=radio] + label {display: inline-block !important; width: 100%; height: 38px; line-height: 38px; background-image: none !important; padding: 0px !important;border-radius: 4 !important; box-sizing: border-box; text-align: center !important; color: var(--color-t1)}

.bx-radio-inline-horizontal{border-radius: 6px; background-color: var(--color-bg); margin: 0 0 15px 0; padding: 5px;}
.radio-inline-horizontal {display:block; height: 40px; padding: 0px; box-sizing: border-box;}
.radio-inline-horizontal input[type=radio]:checked + label{background-color: var(--color-ba) !important; color: var(--color-co); font-weight: 400; border-radius: 6px;}
.radio-inline-horizontal input[type=radio] + label {display: block !important; width: 100%; height: 40px; line-height: 40px; background-image: none !important; padding: 0px 10px !important;border-radius: 4 !important; box-sizing: border-box; text-align: left !important; color: var(--color-ba)}


input:focus{outline:0px; border-color: var(--color-ke);}
select:focus{outline:0px;  border: 0.5px var(--color-ke) solid;}
textarea:focus{outline:0px;  border: 0.5px var(--color-ke) solid;}
input[type="text"].disabled{color:var(--color-t2)!important; border: 0.5px solid var(--color-b1);}
input[type="text"].moneda{background: url(../gui/ico/moneda-outline-off.svg) right 10px center no-repeat; background-size: auto 20px;}
input[type="text"].fecha{background: url(../gui/ico/fecha-outline-on.svg) right 10px center no-repeat; background-size: 20px auto; min-width: 70px !important;}
input[type="text"].fecha-anno{background: url(../gui/icos/calendar-outline.svg) right 10px center no-repeat; background-size: 20px auto;}
input[type="text"].fecha-mes-anno{background: url(../gui/icos/calendar-outline.svg) right 10px center no-repeat; background-size: 20px auto;}
input[type="text"].hora{background: url(../gui/ico/hora-outline-on.svg) right 10px center no-repeat; background-size: auto 20px;}
input[type="text"].barcode{background: url(../gui/ico/barcode-outline-off.svg) right 10px center no-repeat; background-size: auto 20px;}
select.hora{background: url(../gui/icos/clock-outline.svg) right 10px center no-repeat; background-size: auto 20px; background-color: var(--color-co)}
select.hora_select{background: url(../gui/icos/clock-outline.svg) right 10px center no-repeat; background-size: auto 20px;background-color: var(--color-co); min-width: 50px !important}

input[type="submit"], .btn{ border: 0px; border-radius: 0px; height: 50px; line-height: 50px; padding: 0 20px; box-sizing: border-box; text-decoration: none; display: inline-block; background-color: transparent; color: var(--color-ba); font-size: 13px;  font-weight: 600; -webkit-appearance:none;outline: none; cursor: pointer}

input[type="submit"]:disabled{background-color: #a4a4a4;}

.btn-mini{border: 0px; border-radius: 6px; height: 20px; line-height: 21px; padding: 0 7px; text-decoration: none; display: inline-block !important; background-color: var(--color-b1); color: var(--color-ba); font-size: 13px; -webkit-appearance:none;outline: none; cursor: pointer}

.btn-add{background-color: var(--color-ba) !important; color: var(--color-co) !important; width: 45px !important; height: 45px !important; line-height: 45px !important; border-radius: 45px !important; text-align: center !important; padding: 0 !important; font-style: 25px !important; font-weight: 700 !important}

.btn-back{display: block;height: 50px; line-height: 50px; margin: 0; border-radius: 0 0 6px 6px; text-align: center; background-color: #F1F3F4; color: var(--color-ba); border-top: 0px var(--color-b1) solid; font-size: 13px; -webkit-appearance:none;outline: none; cursor: pointer; font-weight: 500; text-decoration: none;}
.btn-back:hover{text-decoration: none !important; color: #5F6368}

.btn-filtro{border: 0px; border-radius: 30px; width: 40px !important; height: 40px !important; line-height: 40px !important; padding: 0 20px; text-decoration: none; display: inline-block !important; background: url(../gui/ico_arrow_left_simple.svg) 50% 50% no-repeat; background-size: auto 16px; text-indent: -6000px; background-color: var(--color-co) !important; color: var(--color-ba); font-size: 13px; -webkit-appearance:none;outline: none; margin: 0 10px 0 0; cursor: default; cursor: pointer; transform: translate(0,2px) rotate(180deg); border: 1px var(--color-b1) solid !important;}

.btn-wide{display: block !important; width: 100%; text-align: center;}

.btn-regular{height: 45px !important; line-height: 45px !important; border-radius: 6px !important; text-align: center; background-color: var(--color-ba) !important; color: var(--color-co) !important; font-weight: 500; display: inline-block; padding: 0 27px; text-decoration: none !important; box-sizing: border-box; cursor: pointer}
.btn-regular:hover{background-color: #E8EAED !important}

.btn-off{border: 0px; height: 30px; line-height: 29px; padding: 0 10px; text-decoration: none; font-weight: 400; display: inline-block !important; background-color: transparent !important; color: #80868B; font-size: 13px; -webkit-appearance:none;outline: none; cursor: default; cursor: pointer;}
.btn-off:hover{color: #3C4043;text-decoration: none;}

.btn-opt a{cursor: pointer;background-size: auto 20px !important; background-position: 0% 50% !important; background-repeat: no-repeat !important; height: 24px; line-height: 24px; padding: 0 0 0 30px; display: inline-block;}
.btn-opt-add{background: url(../gui/ico/add-outline-on.svg);}
.btn-opt-historial{background: url(../gui/ico/historial-outline-on.svg);}

.btn-big-box{background-color: #3C4043; height: 90px; line-height: 90px; text-align: center; font-size: 16px; color: var(--color-co); text-decoration: none; display: block; margin: -20px -30px 20px -30px; text-decoration: none !important}
.btn-big-box:hover{color: rgba(255,255,255,0.7)}
.btn-big-box-rojo{background-color: #EA4335;}
.btn-big-box-verde{background-color: #34A853;}

.btn-big{background-color: #EFF2F5; height: 60px; line-height: 60px; text-align: center; font-size: 16px; color: var(--color-ba); text-decoration: none; display: block; margin: 0px 0 5px 0; cursor: pointer; border-radius: 6px;}
.btn-big:last-child{margin: 0px;}
.btn-big:hover{text-decoration: none;}
.btn-big-high{background-color: var(--color-ba) !important; color: var(--color-ba) !important; font-weight: 500;}
.btn-big-high:hover{}

.btn-varios{margin: 0 10px;}

.ff-in-row{position: absolute;top: 0px; left: 0; height: 34px !important; box-shadow: none !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-radius: 0 !important; border-left: 3px var(--color-b1) solid !important; }

label.error{margin:0px !important;color:var(--color-ro); display: inline-block; font-size: 12px; padding: 8px 0;}
.required.error{border: 1px var(--color-ro) solid;}

.buscador{position: relative;}
.buscador .bx-buscador-resultados{position: absolute; top: 50px; right: 0px; padding: 20px; box-sizing: border-box; width: 100%; background-color: var(--color-co); z-index: 100; display: none; overflow-y: auto;}
.buscador input[type="text"]{background-color: var(--color-bg) !important; height: 50px; background: url(../gui/ico/buscar-outline-on.svg) 13px 50% no-repeat; background-size: auto 20px; text-indent: 46px; border-radius: 6px; border: 0; outline: none !important; box-shadow: none !important; font-size: 16px;}
.buscador .limpiar{cursor: pointer; font-size: 18px; color: #80868B; position: absolute; top: 50%; right: 20px; transform: translate(0,-50%); display: none;}
.buscable-contenido-no{display: none}
.buscable-modal-no{display: none}
.buscable-lateral-no{display: none}

.radio-indent{margin: 0 0 0 30px;}

::-webkit-input-placeholder {color: var(--color-t2);}

input:-webkit-autofill {
    -webkit-box-shadow: inset 0 0 0px 9999px white;
    -webkit-text-fill-color: var(--color-ba);
}

.ft{margin: 0; color: var(--color-t2);}
.ft-apoyo{margin: 8px 0 0 0; font-size: 11px; line-height: 13px !important; color: var(--color-t2);}
.ffc{margin: 0 0 12px 0 !important;width: 100%;}
.ffc:last-child{margin: 0px !important;width: 100%;}
.ffnota{margin: 0 0 12px 0;width: 100%;}

.ffbx{position:relative;}
.ffbx .ft{position:absolute; top: 7px; left: 9px; font-size: 12px; color: var(--color-t2)}
.ffbx .ffc input{padding-top: 20px}
.ffbx .ffc select{padding-top: 18px}
.ffbx .ffc textarea{padding-top: 25px}


/* Nuevas formas */

.checkbox {display: block;position: relative;margin-bottom: 8px !important; padding: 5px 0 5px 32px;cursor: pointer;font-size: 13px;font-weight: 400;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
.checkbox input {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;}
.checkmark {position: absolute;top: 0;left: 0;height: 22px;width: 22px;background-color: var(--color-co);border-radius: 6px; border: 0.5px solid var(--color-b1);}
.checkbox input:checked ~ .checkmark {background-color: var(--color-ke); border: 0.5px solid var(--color-ke);}
.checkmark:after {content: "";position: absolute;display: none;}
.checkbox input:checked ~ .checkmark:after {display: block;}
.checkbox .checkmark:after {left: 7px;top: 3px;width: 5px;height: 10px;border: solid var(--color-co);border-width: 0 3px 3px 0;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);}
.checkbox:last-child{margin-bottom:0;}

.radio {display: block;position: relative;padding: 4px 0 4px 35px;padding-bottom: 10px;cursor: pointer;font-size: 13px;font-weight: 400;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
.radio input {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;}
.radio .radiomark {position: absolute;top: 0;left: 0;height: 22px;width: 22px;background-color: var(--color-co);border-radius: 50%; border: 0.5px solid var(--color-b1);}
.radio input:checked ~ .radiomark {background-color: var(--color-ke); border: 0.5px solid var(--color-ke);}
.radio .radiomark:after {content: "";position: absolute;display: none;}
.radio input:checked ~ .radiomark:after {display: block;}
.radio .radiomark:after {top: 6px;left: 6px;width: 10px;height: 10px;border-radius: 50%;background: var(--color-co);}

.checkbox-eliminar {display: block;position: relative;padding: 0px; width: 60px; height: 60px; cursor: pointer;font-size: 13px;font-weight: 400;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none; text-indent: -6000px;}
.checkbox-eliminar input {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;}
.checkbox-eliminar .checkmark {position: absolute;top: 0;left: 0;height: 60px;width: 60px;background-color: var(--color-bg);border-radius: 6px; background: url(../gui/ico/basura-outline-on.svg) 50% 50% no-repeat !important; background-size: auto 24px !important; border: 0px !important; box-shadow: none;}
.checkbox-eliminar input:checked ~ .checkmark {background-color: var(--color-ba); background: url(../gui/ico/basura-outline-off.svg) 50% 50% no-repeat !important; background-size: auto 24px !important;}
.checkmark:after {content: "";position: absolute;display: none;}
.checkbox-eliminar input:checked ~ .checkmark:after {display: block;}
.checkbox-eliminar .checkmark:after {left: 8px;top: 3px;width: 5px;height: 10px;border: 0;border-width: 0 3px 3px 0;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);}
.checkbox-eliminar:last-child{margin-bottom:0;}

/* SLIDER RANGE ***************************************************************************************************************/

.slider-container {width: 100%; margin: 40px 0;}
.slider-container .back-bar {height: 10px;position: relative;}
.slider-container .back-bar .selected-bar {position: absolute;height: 100%;}
.slider-container .back-bar .pointer {position: absolute;width: 10px;height: 10px;background-color: red;cursor: col-resize;opacity: 1;z-index: 2;}
.slider-container .back-bar .pointer.last-active {z-index: 3;}
.slider-container .back-bar .pointer-label {position: absolute;top: -24px;font-size: 16px;background: white;white-space: nowrap;line-height: 1;}
.slider-container .back-bar .focused {z-index: 10;}
.slider-container .clickable-dummy {cursor: pointer;position: absolute;width: 100%;height: 100%;z-index: 1;}
.slider-container .scale {top: 2px;position: relative;}
.slider-container .scale span {position: absolute;height: 5px;border-left: 1px solid var(--color-ba);font-size: 0;}
.slider-container .scale ins {font-size: 13px;text-decoration: none;position: absolute;left: 0;top: 7px;color: var(--color-b1);line-height: 1;}
.slider-container.slider-readonly .clickable-dummy, .slider-container.slider-readonly .pointer {cursor: auto;}
.rango-tema .back-bar {height: 10px;border-radius: 6px;background-color: var(--color-b1);}
.rango-tema .back-bar .selected-bar {border-radius: 6px;background-color: var(--color-ba);}
.rango-tema .back-bar .pointer {width: 18px;height: 18px;top: -4px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;border-radius: 20px;border: 2px solid var(--color-co);background-color: var(--color-ba);}
.rango-tema .back-bar .pointer-label {color: #a4a4a4;}
.rango-tema .back-bar .focused {color: var(--color-ba);}
.rango-tema .scale span {border-left: 1px solid var(--color-b1);}
.rango-tema .scale ins {color: #a4a4a4;}

/* Extras **************************************************************************************************************/

.progreso-horizontal{position: relative; display: block; background-color: var(--color-ho); width: 100%; height: 20px; border-radius: 20px; overflow: hidden;}
.progreso-horizontal .progreso-barra{position: absolute; top: 0; left: 0; bottom: 0; z-index: 1; background-color: var(--color-ba);}
.progreso-horizontal .progreso-data{position: absolute; top: 50%; left: 50%; z-index: 2; transform: translate(-50%,-50%); color: var(--color-t2); font-size: 13px;}

.progreso-vertical{position: relative; display: block; background-color: var(--color-bg); height: 100%; width: 100%; border-radius: 60px; overflow: hidden;}
.progreso-vertical .progreso-barra{position: absolute; bottom: 0; left: 0; right: 0; z-index: 1; background-color: var(--color-ba);}
.progreso-vertical .progreso-data{position: absolute; top: 10px; left: 50%; z-index: 2; transform: translate(-50%,0%); color: var(--color-t2); font-size: 13px;}


progress[value] {-webkit-appearance: none;appearance: none;width: 100%;height: 15px;}
progress[value] span{position: relative;}
progress[value]::-webkit-progress-bar {background-color: var(--color-bg);border-radius: 6px;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) inset;}
progress[value]::-webkit-progress-value {background-color: var(--color-ba); border-radius: 6px;position: relative;}

.btn-inline{background-color: var(--color-ba); color: var(--color-co); text-decoration: none; padding: 2px 5px; border-radius: 6px;}
.link-inline{height: 40px; line-height: 40px; cursor: pointer; display: inline-block; text-decoration: none;}

.iframe-outside{position:absolute; top:0; left: -6000px;}


.siprint{display: none;}

@media screen and (max-width: 1024px){
	
	hr {margin: 20px -20px}
	
	.no-movil{display: none;}
	
	.body{padding: 60px 20px 20px 20px;}
	
	.body .contenido-horizontal .seccion{float: left; width: 315px; height: 100%; overflow-y: auto; border-right: 1px var(--color-b1) solid}
	.body .contenido-horizontal .seccion .seccion-contenedor{padding: 30px;width: 315px; box-sizing: border-box;}
	
	.body .contenido .bx-narrow{width: 100%; margin: 0 auto;}

	.body .contenido .nav-top h1{}
	.body .contenido .nav-top h1 a.back {display: none}
	.body .contenido .nav-top h1.back-space {text-indent: 0;}
	
	
	
	.body .lateral{position: fixed; top: 20px; bottom: 20px; right: 20px; z-index: 11;width: 560px;}
	
	
	
	.bx-1-3 {display: grid; grid-gap: 30px; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto 1fr 1fr}
	.bx-1-3 .bx{padding: 0 !important; grid-column: 2 / 4}
	.bx-1-3 .bx:first-child{grid-column: 1 / 2;}
	
	.grafica-contenedor:before{content: ''; display: block; padding-top: 50%;}

	.bx-resumen-contenedor{display: grid; grid-template-columns: repeat(1, 1fr);}
	
	.bx-cubo {display: grid; grid-gap: 20px; grid-template-columns: repeat(5, 1fr); grid-template-rows: auto 1fr 1fr}
	
	.reveal-modal.small{width:300px;}
	.reveal-modal.medium{width:400px;}
	.reveal-modal.large{width:600px;}
	.reveal-modal.xlarge{width:600px;}
	
	.modal{left: 0px;}
	
	
	.pos-mesas-layout{display: grid; grid-gap: 15px; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto 1fr 1fr}
	.pos-open-layout{display: grid; grid-gap: 15px; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto 1fr 1fr}
	
}

@media screen and (max-width: 769px){
	
	.body .contenido .bx-filtro{position: fixed; top: 80px; left: 20px; right: 20px; z-index: 11; background-color: var(--color-co); width: auto; margin: 0; padding: 60px 0; box-sizing: border-box; display: none; border-radius: 0 0 0 6px;box-shadow: var(--shadow-2); border-radius: 6px;}
	
	.bx-2 {display: grid; grid-gap: 30px; grid-template-columns: repeat(1, 1fr); grid-template-rows: auto}
	.bx-4 {grid-template-columns: repeat(2, 1fr);}
	
	
	
	.bx-cubo {display: grid; grid-gap: 20px; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto 1fr 1fr}
	
	.pos-mesas-layout{display: grid; grid-gap: 15px; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto 1fr 1fr}
	.pos-open-layout{display: grid; grid-gap: 15px; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto 1fr 1fr}
	
	.bx-pos{position: fixed; top: 140px; left: 20px; right: 20px; bottom: 20px;}
	.pos-comanda{position: fixed; top: 15px; left: 255px; right: 459px; bottom: 15px; padding: 25px; overflow-y: auto; transition: left 0.5s;}
	.pos-categorias-productos{position: absolute; top: 80px; left: 0; right: auto; width: calc(50vw - 30px); bottom: 0;}
	.pos-categorias{position: absolute; top: 0px; left: 0px; right: 0; bottom: auto; width: auto; height: 300px;}
	.pos-productos{position: absolute; top: 300px; left: 0px; right: 0px; bottom: 0px; overflow-y: auto; transition: left 0.5s;}
	.pos-cuenta .pos-cuenta-detalle{position: fixed; top: 60px; left: 0px; right: 0; height: 60px; background-color: var(--color-ba);}
	.pos-cuenta .pos-resumen-items{position: absolute; top: 80px; bottom: 80px; right: 0px; width: calc(50vw - 30px);}
	.pos-tools{position: absolute; top: 0px; left: 0px; right: 0px; z-index: 1 !important;}
	.bx-buscador-resultados-pos{position: absolute; top: 60px; left: 60px; right: 60px; z-index: -1 !important; }
	.pos-acciones{ position: absolute; bottom: 0px; right: 0px; width: calc(50vw - 30px);}
	
	.bx-sb{left: 0px;}
	
	
	ul.bx-imgs{display: grid; grid-gap: 15px; grid-template-columns: repeat(2, auto); grid-template-rows: auto}
	
	
	
	.reveal-modal.small{width: calc(100% - 40px);}
	.reveal-modal.medium{width: calc(100% - 40px);}
	.reveal-modal.large{width: calc(100% - 40px);}
	.reveal-modal.xlarge{width: calc(100% - 40px);}
	
	.reveal-modal{top:20px;transform: translate(-50%,0%);}
	
	.smileys-modal ul.smileys-contenedor li{width: 120px; height: 120px;}
	
	::-webkit-scrollbar {width: 0px; height: 0px; background-color: transparent}
	::-webkit-scrollbar-track {-webkit-border-radius: 0px;border-radius: 0px;margin: 0;}
	::-webkit-scrollbar-thumb {-webkit-border-radius: 0px;border-radius: 0px;background-color: #B0B8C0;}
	::-webkit-scrollbar-thumb:window-inactive {background-color: var(--color-b1);}
	
}

@media screen and (max-width: 669px){
	
	p span.inline{margin: 0; display: block}
	
	.body .header .nav-account{display: none}
	
	.body .nav{position: fixed; top: 60px; left: 0px; bottom: 0px; right: 0; width: auto !important; height: auto; box-sizing: border-box; z-index: 20; box-shadow: none; border-right: 0px var(--color-b1) solid; background-color: var(--color-co); display: none; border-radius: 0;}
	.body .nav .bx-nav-bottom{display: block;}
	.body .nav .bx-nav-lat{position: absolute; top: 0px; left: 0px; bottom: 80px; right: 0px; width: auto !important; z-index: 2; margin: 0; padding: 0px !important; overflow-y: auto; box-shadow: none}
	.body .nav .bx-nav-lat li ul{position: relative; top: 0px; left: 0px; z-index: 3; width: 100%; margin: 0px; padding: 10px 0px; display: none; background-color: #FBFCFD !important; border-radius: 0px !important; box-shadow: none !important;}
	.body .nav .bx-nav-lat li ul li a{padding: 0px 20px 0px 40px;}
	
	.body .contenido .bx{padding: 20px;}
	
	.body .contenido .nav-top {margin: 20px 20px 0px 20px;}
	.body .contenido .nav-top .menu-launch{display: block; cursor: pointer; top: -5px; right: 0;}
	.body .contenido .nav-top h1{width: calc(100% - 50px); }
	.body .contenido .nav-top .bx-nav-top{position: fixed; top: 120px !important; left: 20px; right: 20px !important; z-index: 11; margin: 0px; padding: 0px; box-sizing: border-box; background-color: var(--color-ba); border-radius: 6px; display: none;}
	
	.body .contenido .nav-top .bx-nav-top li{margin: 0; padding: 0; display: block; border-bottom: 1px rgba(255,255,255,0.1) solid}
	.body .contenido .nav-top .bx-nav-top li a{display: block; text-decoration: none; height: 40px; line-height: 40px; padding: 0px 20px; font-size: 13px; font-weight: 400; cursor: pointer; background-color: transparent; border-radius: 6px; color: var(--color-co)}
	.body .contenido .nav-top .bx-nav-top li a:hover{color: var(--color-co); background-color: transparent;}
	.body .contenido .nav-bottom {padding: 0px 20px 20px 20px;}
	
	.body .lateral{position: fixed; top: 0px; bottom: 0px; right: 0px; left: 0; z-index: 12;width: auto;border-radius: 0px; box-shadow: none;}
	
	.bx-cubo {display: grid; grid-gap: 20px; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto 1fr 1fr}
	
	.bx-pos{position: fixed; top: 140px; left: 20px; right: 20px; bottom: 20px;}
	.pos-comanda{position: fixed; top: 15px; left: 255px; right: 459px; bottom: 15px; padding: 25px; overflow-y: auto; transition: left 0.5s;}
	.pos-categorias-productos{display: none}
	.pos-categorias{}
	.pos-productos{}
	.pos-cuenta .pos-cuenta-detalle{position: fixed; top: 60px; left: 0px; right: 0; height: 60px; background-color: var(--color-ba);}
	.pos-cuenta .pos-resumen-items{position: absolute; top: 80px; bottom: 80px; right: 0px; left: 0; width: auto;}
	.pos-tools{z-index: 1;}
	.bx-buscador-resultados-pos{position: absolute; top: 60px; left: 0px; right: 0px; z-index: -1 !important; }
	.pos-acciones{ position: absolute; bottom: 0px; right: 0px; left: 0; width: auto;}
	
	.agenda-layout{position: fixed; top: 60px; left: 0px; right: 0px; bottom: 0px; background-color: var(--color-co); border-radius: 0px;  box-shadow: none;}
	.agenda-layout-lateral{position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; overflow: auto; width: auto; padding: 0px; box-sizing: border-box; display: none;}
	.agenda-layout-contenido{position: absolute; top: 0; right: 0px; left: 0; bottom: 0; padding: 0; overflow: auto; border-right: 1px #EDF1F5 solid}
	.agenda-layout-contenido h2 {position: absolute; top: 0; left: 0; right: 0; z-index: 1; height: 60px; line-height: 60px; text-indent: 20px; border-bottom: 1px #EDF1F5 solid}
	.agenda-layout-contenido h2 .control{display: block}
	
	.hero-modal .hero-contenedor{width: calc(100%);}
	
}

@media screen and (max-width: 376px){
	
	.bx-1-3 {display: grid; grid-gap: 30px; grid-template-columns: repeat(1, 1fr); grid-template-rows: auto}
	.bx-1-3 .bx{padding: 0 !important; grid-column: 1 / 2}
	.bx-1-3 .bx:first-child{grid-column: 1 / 2;}
	
	.bx-3 {grid-template-columns: repeat(1, 1fr);}
	
	.bx-4 {grid-template-columns: repeat(1, 1fr);}
	
	.bx-cubo {display: grid; grid-gap: 10px; grid-template-columns: repeat(2, 1fr); grid-template-rows: auto 1fr 1fr}
	.bx-cubo li a span{position: absolute; bottom: 10px; left: 10px; right: 10px; text-align: center; text-transform: uppercase; font-size: 13px; line-height: 11px; font-weight: 500;}
	
	.pos-mesas-layout{display: grid; grid-gap: 15px; grid-template-columns: repeat(2, 1fr); grid-template-rows: auto 1fr 1fr}
	.pos-open-layout{display: grid; grid-gap: 15px; grid-template-columns: repeat(2, 1fr); grid-template-rows: auto 1fr 1fr}
	}