@import url('https://fonts.googleapis.com/css?family=Ubuntu:400,400italic,500,700&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons&display=swap');

/* ++++++++++ COLORES +++++++++++++++++++++++++++++++++++++++

ELEMENTOS ------------------------------------------------------

200
300
600
800
D20

BOTONES --------------------------------------------------------

Botón Agregrra:	233 / 122
Botón Down:		922
Boton Add Prod:	E50
Línea Submenu:	F80
Menú Bloqueado: 765
Menú Activo:	DDC
Head Lista:		EED
Head Borde:		DCA
Usuario:		FA0
Botónes Inicio:	633
$BckHovLista:	FCFAEE

GENERALES ------------------------------------------------------

Delete/Remover: E00 / 900
Editar/Ver: 	08F / 034
Agregar:		0A0 / 030

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* BODY +++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

body { height:100vh; min-width:360px; font-family:'Ubuntu', sans-serif; font-size:12px; color:#333; }
.pane { background-image:url(../skin/imag/corp/bg-pane.jpg); background-size:cover; background-position:bottom center; }
.escr { background-image:url(../skin/imag/corp/bg-escr.jpg); background-size:cover; background-position:top center; }
.main { background-image:url(../skin/imag/corp/bg-main.svg); background-color:#212121; }
.escr-main {  }

#site { }
#header, #sidebar, #main { position:absolute; right:20px; left:20px; }
#header { height:80px; right:0px; left:0px }
#sidebar { top:122px; width:180px; background:#111; }
#main { min-height:400px; min-width:360px; top:80px; margin-left:180px; bottom:20px; background-color:#FFF; overflow:hidden; -webkit-border-radius:8px; border-radius:8px; -webkit-box-shadow:0px 0px 12px #000; box-shadow:0px 0px 12px #000; }

.opex { display:none; position:absolute; font-size:24px; color:#FFF; height:62px; padding:14px 10px; }
.exit { display:none; }

/* ++++++++++ HEADER ++++++++++++++++++++++++++++++++++++++++ */

#box-header { min-width:360px; }
#box-logo { float:left; margin:-15px 0 0 65px; }
#box-logo img { height:100px;  }
#box-top { height:28px; background:#000; width:100%; }
#box-fecha { margin:5px 25px; float:left; color:#6AD; }
#box-links { margin:5px 40px; float:right; color:#6AD; }
#box-links a { color:#CCC; }
#box-user { padding:11px; float:right; }
#box-user span { color:#FFF; }
#box-user a { font-size:14px; color:#CCC; display:inline-block; margin:0px 4px; padding:5px 12px 3px 10px; -webkit-border-radius:8px; border-radius:8px; }
#box-user a:first-child, #box-user a:first-child:hover { cursor:auto; background:#048; margin:0px 16px; }
#box-user a:hover { background:#000; }

/* ++++++++++ MAIN ++++++++++++++++++++++++++++++++++++++++++ */

#box-main { position:absolute; top:42px; left:0px; bottom:32px; right:0px; }

	/*----------- INICIO -------------------------------------*/

#aviso { margin-right:0px!important; max-width:650px; margin:0 20px 20px 0; font-size:14px; padding:13px 15px 10px 15px; background:#FFF; -webkit-border-radius:8px; border-radius:8px; }
#aviso p { color:#048!important; font-size: 14px!important; }
#aviso a { color:#048!important; font-weight:bold; }
#aviso a:hover { color:#000!important; }
#aviso .material-icons { font-size:20px; margin:-3px 2px 0 0; }
#inicio { margin-right:-20px!important; }
#inicio .material-icons { font-size:48px; color:#CCC; margin:0px; padding:16px 16px; background:#666; -webkit-border-radius:8px; border-radius:8px; }
#inicio .material-icons:hover { color:#DEF; background:#048; }
#icon-inicio { float:left; margin:0 20px 20px 0; }
#icon-inicio p { margin:2px 0px -2px 2px!important; color:#222!important; }
#icon-inicio p { display:none; }

	/*----------- TOOLS --------------------------------------*/

#tools { z-index:20; overflow:hidden; height:42px; background:#07B; }
#tools h3 { float:left; margin:8px 15px; }
#box-tools a { height:23px; float:right; margin:7px; display:inline-block; background:#444; -webkit-border-radius:5px; border-radius:5px; font-size:13px; color:#EEE; padding:5px 12px 0px 10px; }
#box-tools a:hover { color:#FFF; background:#333; }
#box-tools .material-icons { font-size:21px; margin:-2px 8px 0px 0px; }

/* ++++++++++ MENU ++++++++++++++++++++++++++++++++++++++++++ */

#menu-main a { box-sizing:border-box; display:block; height:40px; width:100%; background:#111; color:#CCC; font-size:14px; border-bottom:#444 1px solid; padding:10px 20px; }
#menu-main a:hover { background:#444; color:#FFF; }
#menu-main .material-icons { font-size:18px; margin:-3px 9px 0px 0px; }
#menu-main p { display:block; height:20px; width:100%; background:#111; color:#444; font-size:14px; border-bottom:#444 1px solid; padding:10px 20px; margin:0px }

.sub-menu h3 { float:left; margin:8px 15px; }
.sub-menu { z-index:20; overflow:hidden; height:40px; background:#06A; }
.sub-menu .material-icons { font-size:21px; margin:-1px 6px 0px 0px; }
.sub-menu a { font-size:14px; color:#FFF; float:right; margin:7px 8px 0 0; padding:5px 12px 5px 12px; border:1px #6AD solid; border-bottom:none; -webkit-border-radius:5px 5px 0 0; border-radius:5px 5px 0 0; }
.sub-menu #in-solapa { color:#DEF; background:#048; border:1px #048 solid; border-bottom:none; }
.sub-menu #in-solapa:hover { color:#FFF; background:#147; border:1px #147 solid; border-bottom:none; }
.sub-menu #ac-solapa { height:22px; border-bottom:1px solid #07B; background:#07B; }
.sub-menu .ln-solapa { margin-top:39px; height:10px; width:100%; background:#6AD; }

	/*----------- LISTA --------------------------------------*/

.box-lista { overflow-y:scroll; overflow-x:auto; height:100%; background:#FFF; }
.box-lista table { width:100%; }
.box-lista td { padding:4px 16px; border-bottom:#DDD 1px solid; border-left:#CCC 1px dotted; white-space:nowrap; }
.box-lista tr:hover { background:#F0F6FF; }
.box-lista td .material-icons { font-size:15px; margin:-2px 2px 0px 2px; color:#AAA; }
.box-lista th { font-weight:800; padding:8px 16px; white-space:nowrap; }
.box-lista #head { z-index:1; height:29px; position:absolute; left:0; right:17px; top:0; background:#EDF6FB; border-bottom:#ACD 1px solid; }
.box-lista #head-busc { z-index:1; height:29px; position:absolute; left:0; right:16px; top:0; background:#EDF6FB; border-bottom:#ACD 1px solid; }

.box-lista th div { z-index:1; position:absolute; top:0; font-weight:800; margin:0 -16px; padding:8px 16px 8px 15px; border-left:#ACD 1px solid; }
.box-lista th div .material-icons { font-size:15px; margin:0px 0px -2px -7px; color:#222; }
.box-lista div { white-space:normal; }

#id { text-align:center; }
#nm { max-width:100px; min-width:100px; overflow:hidden; white-space:nowrap; }
#edi, #del, #add, #rem, #ver, #ct, #fav, #pri, #cqr { padding:0px 6px!important; text-align:center; }
#edi .material-icons { color:#07B!important; }
#edi .material-icons:hover { color:#012!important; }
#del .material-icons { color:#E00!important; }
#del .material-icons:hover { color:#900!important; }
#rem .material-icons { color:#E00!important; }
#rem .material-icons:hover { color:#900!important; }
#add .material-icons { color:#0A0!important; }
#add .material-icons:hover { color:#030!important; }
#ver .material-icons { color:#08F!important; }
#ver .material-icons:hover { color:#034!important; }
#ct { border-left:transparent 1px solid!important; text-align:left; }
#ct .material-icons:hover { color:#666!important; }
#pri .material-icons { color:#3B3!important; }
#pri .material-icons:hover { color:#262!important; }
#cqr .material-icons { color:#444!important; }
#cqr .material-icons:hover { color:#000!important; }
#nm a { color:#048; font-weight:500; }
#nm a:hover { color:#012; }
#ur a { color:#333; }
#ur a:hover { color:#000; }
#edi, #del, #add, #ver, #rem, #ct, #nm, #fav, #pri { cursor:pointer; }

	/*----------- LISTADO -------------------------------------*/

.tab-titu { font-size:13px!important; text-transform:uppercase; font-weight:bold; margin:3px 0px 3px 5px!important; color:#AAA!important; }
.tab-cont { display:table; background:#FFF; color:#333; border:#CCC 1px solid; font-size:12px; margin:0px 0px 7px 0px; -webkit-border-radius:3px; border-radius:3px; }
.tab-fila { display:table-row; }
.tab-colu { display:table-cell; padding:2px 6px 3px 6px; border-bottom:1px solid #DDD; border-right:1px dotted #CCC; }
.tab-cont .head { background:#DEF; }
.tab-cont .head > div { border-bottom:1px solid #9AB!important; }
.tab-cont .prod { width:100%; }
.tab-cont .prod div { width:100%; height:16px; padding:0px!important; display:block!important; margin-right:-900px; border:none!important; overflow:hidden; white-space:nowrap; }
.tab-cont .last { border-right:none!important; }
.tab-cont .body:nth-last-child(2) div { border-bottom:none!important; }
.tab-cont .foot div { border-top:1px solid #AAA!important; border-bottom:none; font-weight:bold; }
.tab-cont .right { text-align:right; }
.tab-cont .material-icons { font-size:13px; margin:-1px -1px -1px -1px!important; }
.btn-lst { overflow:hidden; margin:5px 0!important; }

.btn-lst .btn { float:right!important; background:#4BB!important; color:#FFF; border:none; padding:5px 10px 4px 10px!important; }
.btn-lst .btn:hover { background:#299!important; }
.btn-lst .material-icons { margin:-1px 5px 0px -2px!important; }

.stok-aler { background:#FFC; }

	/*----------- POP LISTA -----------------------------------*/

.pop-lista { z-index:10; display:none; position:absolute; top:0; left:0px; right:360px; bottom:0px; padding-top:32px; width:auto; background:#EEE; border-left:10px solid #299; border-right:10px solid #299; }
.pop-lista h2 { box-sizing:border-box; height:30px; margin-top:-32px; margin-bottom:2px; padding:4px 0px 5px 16px; }
.pop-lista #buscprod { border:none; height:22px; margin:2px 0 0 0; max-width:180px; min-width:100px; width:auto; }
.pop-lista span { } 
.pop-lista #close { margin:-24px 10px;  }
.pop-lista .box-lista #id { padding-left:8px; padding-right:8px; }
.pop-lista .box-lista table { overflow:hidden; }
.pop-lista .box-lista { background:#EEE; }
.pop-lista #head, .pop-lista thead div { margin-top:30px; }
.pop-lista #id div { border-left:none; }

	/*----------- EDICION ------------------------------------*/
	
#edicion { overflow-y:scroll; overflow-x:auto; height:100%; background:#EEE; }
#box-edicion { padding:20px 20px; }
#close { float:right; margin:-12px -10px;  }
#close a { background:#258; -webkit-border-radius:5px; border-radius:5px; color:#EEE; padding:3px 1px 2px 1px }
#close a:hover { color:#FFF; background:#048; }
#close .material-icons { font-size:17px; margin:-3px 0px 0px 0px; }
#edicion h2 { margin:-20px -20px 12px -20px; padding:4px 0px 5px 16px; }
#edicion .f-input { width:100%; -webkit-border-radius:3px; border-radius:3px; margin-bottom:5px; }
#edicion label { margin:0 0 2px 0; }
#edicion p { font-size:11px; margin:0 0 1px 2px; color:#666; }
#edicion .c-envi { margin-top:16px; }



.a-datos { float:right; color:#999; padding:7px; margin:-6px -8px 0 0; }
.a-datos:hover { color:#666 }
.a-datos .material-icons { font-size:16px; }
.a-licencia, .a-suspension { position:absolute; color:#999; padding: 7px; margin:0px 0 0 86px; }
.a-licencia:hover, .a-suspension:hover { color:#666 }
.a-licencia .material-icons, .a-suspension .material-icons { font-size:16px; }
.d-licencia, .d-suspension { display:none; margin-top: 20px; position:absolute; background:#FFF; font-size:13px; color:#222; border:#CCC 1px solid; padding:4px 7px 5px 7px; border-top:none; -webkit-border-radius: 0 0 3px 3px; border-radius:0 0 3px 3px; -webkit-box-shadow:0 4px 4px 0 #999; box-shadow:0 4px 4px 0 #999; }

#edicion .recuadro { box-sizing:border-box; border:#CCC 1px solid; margin:16px 0; -webkit-border-radius:5px; border-radius:5px; padding:8px 10px 8px 10px; }
#edicion .recuadro-adya { margin-top:6px; }
#edicion .recuadro span { color:#666; }
#edicion .recuadro > p { color:#444; text-transform:uppercase; }
#edicion .recuadro > .dato { width:100%; margin-top:6px; padding-top:8px; border-top:#CCC 1px solid; }
#edicion .recuadro input { vertical-align:middle; margin-top:0px; }
#edicion .recuadro .radio { vertical-align:middle; margin-top:-4px; }

#edicion .categoria { z-index:10; position:absolute; width:185px; margin-top:-5px; display:none; padding:8px 8px 6px 8px; background:#FFF; border:#CCC 1px solid; -webkit-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; border-top:none; -webkit-box-shadow:0 4px 6px 0 #999; box-shadow:0 4px 6px 0 #999; }
#edicion .categoria .btn { float:right; padding:1px 2px; background:#AAA; }
#edicion .categoria .btn:hover { background:#888; }

	/*----------- CALCULOS ------------------------------------*/

.calc-camp { size:12px; color:#6AD; }
.calc-frmu { margin:18px 0 8px 1px; font-size:16px; color:#59C; padding-bottom:3px; border-bottom:1px solid #6AD }
.calc-sub-frmu { margin:0 0 1px 2px; font-size:14px; color:#666; }
.calc-sub-frmu span { font-weight:bold; float:right; }



	/*----------- POP UPS ------------------------------------*/
	
.pop-mensaje { z-index:30; display:none; position:absolute; top:15%; left:50%; margin-left:-172px; width:300px; min-height:100px; padding:20px; background:#EEE; border:#BBB 2px solid; -webkit-border-radius:8px; border-radius:8px; -webkit-box-shadow:0 0 10px 0 #999; box-shadow:0 0 10px 0 #999; }
#main > .pop-mensaje { margin-top:31px; }
.pop-mensaje .material-icons { float:left; font-size:48px; margin:-4px 16px 20px 0; }
.pop-mensaje p { font-size:13px; margin:0 5px 40px 64px; }
.pop-mensaje div { width:100%; margin:-20px -20px 20px -20px; position:absolute; bottom:0px; }
.pop-mensaje span { font-size:14px; font-weight:800; }
.pop-mensaje form { display:inline-block; }
.pop-mensaje .c-envi { margin:0 10px; }
.pop-edicion { z-index:10; width:100%; max-width:300px; position:absolute; top:0px; right:0px; bottom:0px; display:none; border-left:#07B 10px solid; }
.pop-edicion-w6 { max-width:600px; }
#lista-prec #va { display:block; }

	/*----------- PAGINADOR ----------------------------------*/

#dwn { float:left; padding:3px 10px }
#dwn .btn { background:#06A; border:none; }
#dwn .btn:hover { background:#048; }
#barra { z-index:20; position:absolute; left:0px; bottom:0px; right:0px; overflow:hidden; height:31px; border-top:#AAA 1px solid; background:#EEE; }
#paginador { margin:6px 16px; text-align:right; }
#paginador li { padding-left:10px; border-left:#BBB 1px solid; display:inline-block; margin-left:10px; }
#paginador li { color:#666; }
#paginador span { margin:0 3px; font-weight:800; color:#444; }
#paginador .f-input { width:40px; margin:-5px 0 0 2px; height:20px; font-size:11px; font-weight:800; color:#444; padding:0px 2px; -webkit-border-radius:4px; border-radius:4px; }
#paginador .material-icons { margin:-3px 0px 0px 0px; font-size:21; color:#444; }

/* ++++++++++ BUSCAR ++++++++++++++++++++++++++++++++++++++++ */

#busc { float:right; margin:8px; display:inline-block; }
#busc .material-icons { font-size:21px; margin:3px 0px 0px 6px; color:#999; position:relative; top:-3px; left:30px; }
#busc .f-input { width:240px; height:26px; padding-left:30px; }
#busc #busc-criterio {  z-index:30; position:absolute; width:214px; padding:6px 12px 10px 12px; color:#444; margin:-15px 0px 0px 29px; display:none; background:#FFF; border:#CCC 1px solid; -webkit-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; border-top:none; -webkit-box-shadow:0 5px 6px 0 #999; box-shadow:0 5px 6px 0 #999; }
#busc #busc-criterio p { color:#6AD; margin:0px 0px 8px 0px; padding-top:6px; border-top:#CCC 1px dotted; } 
#busc #busc-criterio span { color:#666; }
#busc #busc-criterio label { margin:2px 0; }
#busc #busc-criterio input { vertical-align:middle; margin-top:0px; } 
#busc-criterio .btn { display:inline; margin-top:2px; padding:0px; border:#999 0px solid; background:none; float:left; position:absolute; -webkit-border-radius:2px; border-radius:2px; }
#busc-criterio .btn:hover { background:none; }
#busc-criterio .btn .material-icons { margin:-2px 0 0 0; color:#888; font-size:15px; position:static }

/* ++++++++++ LOGIN +++++++++++++++++++++++++++++++++++++++++ */

#box-login { position:absolute; top:15%; left:15%; background:#07B; padding:20px; overflow:hidden; -webkit-border-radius:8px; border-radius:8px; }
#box-login .box-logo { margin:-20px -20px 12px -20px; padding:12px 20px; font-size:18px; line-height:18px; color:#FFF; font-weight:800; background:#048; -webkit-border-radius:8px 8px 8px 8px; border-radius:8px 8px 0px 0px; }
#box-login .box-logo img { height:36px; margin-right:10px; }
#box-login, #box-login .f-input { width:200px; border:none; }
#box-login p { color:#FFF; margin-bottom:16px; }
#box-login .c-envi { background:#444!important; float:right; }
#box-login .c-envi:hover { background:#333; }

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* PROD +++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.imag-mult { margin:10px 0 6px 0; border:1px solid #CCC; }
.imag-view img { width:100%; height:160px; object-fit:cover; -webkit-border-radius:3px; border-radius:3px; }

.imag-flot { position:fixed; z-index:100; padding:40px; margin:auto; top:0; left:0; right:0; bottom:0; background-color:rgba(0,0,0,0.75); display:none; }
.imag-flot > img { position:absolute; margin:auto; height:auto; width:auto; max-height:100%; max-width:100%; top:0; left:0; right:0; bottom:0; }

.bt-imag { position:relative; z-index:100; margin:-92px 6px 0 6px; width:24px; height:24px; padding:4px; background-color:rgba(0,0,0,0.3); overflow:hidden; box-sizing:border-box; cursor:pointer; }
.bt-imag img { height:100%!important; width:100%!important; display:block; }
.bt-re { float:left; }
.bt-av { float:right; }
.bt-ex { float:right; }

.zoomo { cursor:zoom-out; }
.zoomi { cursor:zoom-in; }

.imag-flot .bt-imag { display:block; margin-top:-20px; top:50%; width:40px; height:40px; padding:8px; }
.imag-flot .bt-ex { margin-top:0px; margin-right:-40px; top:0; }

.boto-foto { background:#6AD; }
.boto-dele { background:#C77 }

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ANIM +++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.tran { -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -ms-transition:all 0.3s ease-out; transition:all 0.3s ease-out; }
.rota { animation: rota 1s ease-in-out 2s infinite alternate; }
@keyframes rota { from{transform:rotate(-20deg)} to{transform:rotate(30deg)} }
.colo { animation: colo 1s ease-in-out 2s infinite alternate; }
@keyframes colo { from {background-color:#666;} to {background-color:#D00;} }

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ELEM +++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.icon { -webkit-mask:no-repeat center; mask:no-repeat center; }
.icon { cursor:pointer; }
.wait { position:relative; float:left; margin:-1px 6px -3px -4px; width:14px; height:14px; background:#0CC; }

/* ++++++++++ TEXTOS +++++++++++++++++++++++++++++++++++++++++ */

.material-icons { vertical-align:middle; margin:-2px 5px 0px 0px; }
.point { cursor:pointer; }

p { margin-bottom:08px; }

h1 { font-size:28px; color:#222; font-weight:400; word-spacing:-2.0px; letter-spacing:-1.2px; line-height:36px; margin-bottom:20px; }

h2 { font-size:16px; color:#FFF; font-weight:500; line-height:21px; text-transform:uppercase; background:#6AD; }
h3 { font-size:18px; color:#FFF; font-weight:800; word-spacing:-1.0px; letter-spacing:-0.2px; line-height:21px; margin-bottom:10px; }
h4 { font-size:13px; color:#E30; font-weight:500; margin-bottom:20px; }

h5 { font-size:14px; color:#222; font-weight:400; word-spacing:-0.0px; letter-spacing:-0.0px; line-height:16px; margin-bottom:05px; }
h6 { font-size:12px; color:#222; font-weight:400; word-spacing:-0.0px; letter-spacing:-0.0px; line-height:14px; margin-bottom:05px; }