/* Kinno Sistema */ * { padding: 0; margin: 0;} body { font-family: 'Exo', Helvetica, arial, sans-serif ; font-weight: 300; background: white url('images/back.gif'); } a, a img { border: none; text-decoration: none; } a.rightup { float:right; margin-left:10px; cursor:pointer; } a.remove {cursor: pointer; } pre { white-space: pre-wrap;} .animado { transition: all .4s ease-in-out; -webkit-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; } .boxpadding,header, label, input, section, .alerta, textarea, form.notificacion { -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */} /* CONTENIDO */ section { width: 100%; padding: 30px 70px 100px 120px; } h2.seccion { font-weight: 300; margin-bottom: 30px; text-transform: uppercase; } h2 small a { text-decoration: underline; } small {font-size: .5em; vertical-align: middle;} h4 { clear: both; } @media only screen and (max-width: 1024px){ section { padding-right: 40px; } } .smallimg {width: 15px !important; display: inline-block; vertical-align:top;} /* HEADER */ header.header {margin-top: 5px; height: 80px; width: 100%; display: block; overflow: hidden; background-color: #FFFFFF; padding: 10px; border-bottom: 1px solid #f0f0f0;} h1 { font-weight: 300; font-size: 25px; margin-top: 3px} h1 img { display: inline; vertical-align: middle; width: 200px;} /* MENÚ */ aside { margin-top:10px; position: absolute; z-index: 3;} aside.fixedbaby { position: fixed; top:0;} aside li { width: 65px; height: 58px; list-style: none; margin: 0 10px; line-height: 1em; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out;} aside li span { display: none; } aside li img { display: inline; vertical-align: middle; width: 53px; margin: 10px 0; } aside li:hover img { -webkit-filter: invert(20%); } aside li ul.drop, aside li ul.drop li ul.drop2 { position: absolute; display: none; opacity: 0; } aside li ul.drop { margin:-58px 0 0 62px; padding-left: 13px; background: url('images/menu/back.png?v2') no-repeat top left; } aside li ul.drop li ul.drop2 { margin: -25px 0 0 150px; } aside li:hover ul.drop { display: block; opacity: 1; } aside li ul.drop li:hover ul.drop2 { display: block; opacity: 1; } aside li ul.drop li, aside li ul.drop li ul.drop2 li:first-child { padding: 10px; background-color: black; border-top: 1px solid white; margin: 0; font-size: 14px; width:140px; height: auto; } aside li ul.drop li.off { background-color: #666; } aside li ul.drop li:first-child { background-color: #9c9b9b; letter-spacing: 5px; text-align: center; } aside li ul.drop li ul.drop2 li:first-child { letter-spacing:normal; text-align: left;} aside li ul.drop li:hover, aside li ul.drop li ul.drop2 li:hover { background-color: #e30a18; } aside li ul.drop li.off:hover { background-color: #666; } aside li ul.drop li a { color: white; font-size:13px; width: 100%; height: 100%; display: block; } /*contador de notificaciones */ aside li.notcount { background-color: red; width: 53px; height: 53px; margin: 12px 0 0 10px; -webkit-border-radius: 5em; -moz-border-radius: 5em; border-radius: 5em; } aside li.notcount a.wrap {display: table-cell; width: 53px; height: 53px; vertical-align: middle; text-align:center; color: white; font-size: 19px;} aside li.notcount:hover { background-color: #FF4D4D; } /* CONTROL BAR */ #controlbar { width: 300px; height: auto; display: block; background-color: #E5EAEA;} #controlbar.right { position: fixed; z-index: 2000; top:0; right: -280px; border: 1px solid #ccc;} #controlbar p { padding: 10px; color: #666; text-align: center;} #controlbar .box { width: 78px; height: 80px; display: table-cell; vertical-align: middle; margin:40px 8px; background-color: white; float: left; text-align: center; border: 1px solid #ccc; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; overflow:hidde;} #controlbar .box { font-size: 40px; line-height: 2em;} #controlbar .box small {width: 100%; font-size: 9px; line-height: 1em; margin: -13px auto 0 0; float: left; text-align: center;} #controlbar .not { width: 302px; height: auto; background-color: #ccc; float: left; position: relative; border-top: 1px solid white; padding-bottom: 10px; margin-bottom:5px; -webkit-box-shadow: 1px 1px 2px 0px rgba(50, 50, 50, 0.24); -moz-box-shadow: 1px 1px 2px 0px rgba(50, 50, 50, 0.24); box-shadow: 1px 1px 2px 0px rgba(50, 50, 50, 0.24);} #controlbar .not h2 { width: 100%; background-color: #3F3F3F; height: 24px; font-size: 12px; padding-left: 10px; line-height: 1.7em; color: white; font-weight:300; padding-top:2px;} #controlbar .not h2 small { float: right; font-size:12px; color: #f0f0f0} #controlbar .not.d h2 a.close {background: transparent; padding: 0 4px; margin:0 5px 0 0; -webkit-box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.3); -moz-box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.3); display:block;} #controlbar .not.d h2 a.close:hover { background-color: #333;} #controlbar .not.d { background-color: #f6f6f6; } #controlbar .not p { text-align: left; font-size: 12px; padding:10px 15px; display: block;} #controlbar .not span.level { width: 6px; height: 100%; display: block; position: absolute; left: 0; top: 0;} .not span.level.green, .not span.level.green{background:#9ecb2d;/* Old browsers */ background:-moz-linear-gradient(left,#9ecb2d 0%,#72aa00 100%);/* FF3.6+ */ background:-webkit-gradient(linear,left top,right top,color-stop(0%,#9ecb2d),color-stop(100%,#72aa00));/* Chrome,Safari4+ */ background:-webkit-linear-gradient(left,#9ecb2d 0%,#72aa00 100%);/* Chrome10+,Safari5.1+ */ background:-o-linear-gradient(left,#9ecb2d 0%,#72aa00 100%);/* Opera 11.10+ */ background:-ms-linear-gradient(left,#9ecb2d 0%,#72aa00 100%);/* IE10+ */ background:linear-gradient(to right,#9ecb2d 0%,#72aa00 100%);/* W3C */} .not span.level.red { background: #ff3019; /* Old browsers */ background: -moz-linear-gradient(left, #ff3019 0%, #cf0404 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff3019), color-stop(100%,#cf0404)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, #ff3019 0%,#cf0404 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, #ff3019 0%,#cf0404 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, #ff3019 0%,#cf0404 100%); /* IE10+ */ } .not span.level.blue {background: #3690f0; /* Old browsers */ background: -moz-linear-gradient(left, #3690f0 0%, #1e69de 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,#3690f0), color-stop(100%,#1e69de)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, #3690f0 0%,#1e69de 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, #3690f0 0%,#1e69de 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, #3690f0 0%,#1e69de 100%); /* IE10+ */ background: linear-gradient(to right, #3690f0 0%,#1e69de 100%); /* W3C */} .not span.level.yellow {background: #fefcea; /* Old browsers */ background: -moz-linear-gradient(left, #fefcea 0%, #f1da36 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,#fefcea), color-stop(100%,#f1da36)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, #fefcea 0%,#f1da36 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, #fefcea 0%,#f1da36 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, #fefcea 0%,#f1da36 100%); /* IE10+ */ background: linear-gradient(to right, #fefcea 0%,#f1da36 100%); /* W3C */} .not span.level.olds {opacity: .5} @media only screen and (max-width: 1024px){ #controlbar { display: none } } /* Panel de Notificaciones */ #controlbar.panel {position: relative; background:none; width: 600px; display:block} #controlbar.panel .not.d { width: 700px; padding: 0;} #controlbar.panel .not.d p a { margin: -18px 0 8px 10px;} h3.float { float: left; margin: 10px 0 } .nolinks a { display: none } /* FORM */ form.basico { width: 550px; height: auto; margin: 0 auto 0 auto; background-color: #f3f3f3; border: 1px solid #f0f0f0; /*#eaeaea*/ padding: 40px 20px 20px 20px; overflow:hidden; position:relative;} form.basico h3 { margin: -20px 0 20px 0; text-transform: uppercase;} form.basico h4 { margin: 0 0 5px 0; line-height: 2.5em; color: #333} form p.info { font-size: 11.5px; margin: 5px 0 20px 0; padding: 10px 0 10px 30px; background: url(images/normal.png?v3) no-repeat top 10px left; line-height: 1.5em; border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; clear:both;} form.basico label { width: 30%; height:35px; float:left; padding: 3px 15px 3px 0; margin: 3px 0; font-size: 12px; text-align: right; font-weight: 500; line-height:2.5em; clear: left;} form.basico input, form.basico textarea, form.basico select { width: 70%; border: 1px solid #ccc; float:left; height:35px; padding: 3px 10px; margin: 3px 0;} form.basico select { -webkit-appearance:none; background: white url(../images/select.png) no-repeat center right 8px; border-radius: 0; position: relative; background-size: 20px;} input.tcant { width:80px; height: 30px: text-align: center !important;} form.basico label.masuno { width: 25%; padding: 3px 10px 3px 0;} form.basico select.masuno { width: 57%; padding: 3px 0 3px 10px;} /**** Cotizaciónes ****/ form.basico.cotizacion { width: 800px; } form p.infocliente { font-size: 12px; margin: 5px 0 20px 0; padding: 10px 0 10px 30px; background: url(images/info.png?v2) no-repeat top 11px left 7px; line-height: 1.5em; border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; clear:both; } /***DESCUENTOS ESPECÍFICOS ***/ #descuentos { width: 40%; overflow: hidden; background-color: white; padding: 10px; float:right;} #descuentos label.desc { width: 70%; clear:both;} #descgral { position:absolute; width: 60%; bottom:0;} #descgral label { width: 20%; } form.basico.rango {background-color: transparent; border:none; width: 100%; display: block; padding: 10px; float: left; clear: both;} form.basico.rango label {width: 60px; float: left; clear: none;} form.basico.rango input[type=text] { max-width: 16%; float: left; clear: none; margin-right: 0; } form.basico.rango select { max-width: 30%; float: left; clear: none; margin-right: 0;} .boton.clean {margin: 10px 5px 0 0; float: right; background-color: #CCC;} form.basico.rango input[type=submit], form.basico.rango .boton.clean { float: left; clear: none; margin: -15px 0 35px 20px;} /* Formulario de idcode */ form.detpro {float: right; margin-top: -42px; } form.detpro input[type=image], form.detpro input[type=text] { margin:0; border: none; float: left; height: 30px; } form.detpro input[type=text] { border-top: 1px solid #999; border-left: 1px solid #999; border-bottom: 1px solid #999; padding-left: 10px; width: 110px;} form.detpro input[type=image] { } form.detpro.code { margin-right: 160px;} @media only screen and (min-width: 1025px){ form.detpro { margin-right: 20px; } form.detpro.code { margin-right: 180px;} } /*BOTONES */ h4 small a, h2 small a, a.add, a.boton, div .not p a {-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;} h4 small a, h2 small a, a.add, a.boton { margin:5px 0 0 10px; padding: 10px 10px 8px 30px; background-color: #000; border: none; color: white; float: right; font-size:11px; cursor: pointer;} /*boton arriba*/ h2 small a { float: none; text-transform: none; text-decoration: none; padding: 6px 8px 5px 28px; margin-left: 6px; display: inline-block; position: relative; margin-top: -10px;} /*boton tablas */ h4 small a, div .not p a { font-size: 10px; float: none; text-transform: none; text-decoration: none; padding: 3px 8px 2px 25px; background-color: white; color: #333; border: 1px solid #999; margin-left: 10px; } div .not p a { float: right; padding-left:8px; margin-top: 10px;} h4 small a:hover, div .not p a:hover { background-color: #E5EAEA;} h2 small, h4 small { display:inline-block; vertical-align: middle; } /* Alineación vertical */ h2 small a:hover, a.add:hover, a.boton:hover, form.basico input[type=submit]:hover { background-color: #666;} .boton.borrar {float: left; position: absolute; bottom: 10px; left:0; background-color: red;} form.basico textarea { height: 100px; } form.basico input[type=text]:disabled, form.basico input[type=email]:disabled, form.basico input[type=phone]:disabled, form.basico input[type=date]:disabled, form.basico textarea:disabled, form.basico select:disabled { background-color: #E5EAEA; font-size:13px; border:none; color: black;} form.basico input.codigo { border: 1px solid #f0f0f0; font-weight: 500; font-size: 13px; border: 2px solid #999;} form.basico input[type=submit] { margin: 10px 0; padding: 10px 10px 8px 30px; background-color: #000; border: none; color: white; float: right; cursor: pointer; width: auto;} /* Notificación */ form.notificacion { background-color: #f0f0f0; position: relative; padding: 80px 30px 20px 30px;} form.notificacion h3 { font-weight: 400; margin: 0 0 30px 0; } form.notificacion .fecha { position: absolute; top:15px; right: 15px } form.notificacion p { padding: 20px 0; font-size:15px; line-height:1.5em;} form p.totales { font-size: 19px; text-align: right; margin-top:20px;} form p.totales small { font-size: .6em; margin-left: 10px;} form p.totales small.dos { font-size: .8em; color: #666; } /* reporte */ form.reporte { background-color: white; padding-top: 10px; min-width: 750px; position: relative;} form.reporte h3 { position: absolute; right: 10px; top: 10px; margin: 0; text-align: right;} form.reporte h4.titulo { margin-top: 30px; color: black;} form.reporte .fecha { position: absolute; top:60px; right: 15px } table.datos { margin-top: 30px; } form p.leyenda {font-size: 12px; line-height: 1.5em; } /* Alertas */ p.alerta { font-size: 12px; width: 100%; display: block; position: relative; color: #333; margin-bottom: 15px; clear: both; } p.alerta span.good,p.alerta span.bad,p.alerta span.normal { display: block; padding: 2px 6px 2px 30px; line-height: 2em; border: 1px solid white;} p.alerta span.load { display: block; padding: 2px 6px 2px 30px; line-height: 2em; border: none; } /* alertas */ .bad { background: url(images/bad.png?v1) no-repeat top left; background-color: #FFB6C1; } /*lightping*/ .good {background: url(images/good.png?v2) no-repeat top left; background-color: #90EE90;} /*lightgren*/ .normal {background: url(images/normal.png?v1) no-repeat top left; background-color: #FFFFE0 } /*lightyellow*/ .load {background: url(images/load.gif?v1) no-repeat top left; background-color: none; border: none; } /* Tablas */ /******************** * Estilos de Tablas ******************** */ div.half { float:left; width: 48%; display:block; margin: 0 1% 20px 1%; clear:left;} div.half:nth-child(odd) { float:left; width: 48%; display:block; margin: 0 1% 20px 1%; clear:none;} table { width: 100%; text-align: center; border-spacing: 0; background-color: white; -webkit-box-shadow: 1px 1px 2px 0px rgba(50, 50, 50, 0.24); -moz-box-shadow: 1px 1px 2px 0px rgba(50, 50, 50, 0.24); box-shadow: 1px 1px 2px 0px rgba(50, 50, 50, 0.24);} /*border: 1px solid #3F3F3F;*/ table.vertical th { width: 30%; text-align: left; border-bottom: 1px solid white; } h4 { font-weight: 400; font-size: 17px; line-height: 2em; color: #e30a18; } p.info { font-size: 13px; margin-bottom: 10px; font-weight: 300;} a.accion img { width: 20px } table tbody td, table thead th { border-right: 1px solid white; border-top: none; } table th:last-child { border-right: none;} table th, table thead th { font-weight: 400; } table thead th, table th { font-size: 12px; text-align: center; background-color: #3F3F3F; color:white; padding: 10px 6px; } table th, table td { box-sizing: border-box; -webkit-box-sizing:border-box; -moz-box-sizing: border-box; } table td:first-child { font-weight: 500;} table td { font-size: 11px; font-weight: 400; padding: 8px; } table td b { font-size:1.2em; font-weight: 500; } table tr td { background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.01);} table tr:nth-child(odd) td{ background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.04);} /*table tr:hover { background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.06);}*/ table tr:hover td { } .alignleft { text-align: left;} .mayus {text-transform: uppercase;} /*Date Time Table icons*/ .dtticons { width: 10px; } /* color */ .red { color: #e30a18;} .redred { color: red; } .green { color: #00CC00;} .red,.redred,.green { font-weight: 500;} /* Paginado */ p.paginado { text-align: center; color: #999; font-size: 13px;} p.paginado a { color: blue; } table#items {border: none; background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.02);} table#items th, table#items td{ border: none; } table#items td {border-bottom: 1px solid #E5EAEA; } table#items td { } table#items input[type=number] { height: 32px; width: 70px; text-align: center;} /*Pop up */ #popup { margin-top: -8px; position: absolute; z-index: 9000; /*background-image: url(images/pointer.png);*/ background-repeat: no-repeat; background-position: left center; color: #000;} .lin { position:absolute; z-index: 9000; display: block; } .lalala { color: #000; font-size:11px; font-weight: 400; text-align: left; max-width: 330px; padding: 10px 10px 10px 30px; line-height: 1.5em; border: 1px solid white; background: lightyellow url(images/normal.png?v3) no-repeat center left; -webkit-box-shadow: 2px 1px 4px rgba(50, 50, 50, 0.20); -moz-box-shadow: 2px 1px 4px rgba(50, 50, 50, 0.20); box-shadow: 2px 1px 4px rgba(50, 50, 50, 0.20);} .lalala ul { padding-left: 18px;} .lalala li { padding-top: 7px; background-position: 5px 5px;} .lalala.left { margin:0 9px 0 0; } .lalala.blackmamba { padding: 10px 20px; color: #f0f0f0; border: 1px solid black; background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.8);} #popup.left { background-position: right center; } /** Nueva requisición de compra **/ #items { width: 100%; display:block; clear: both; float:left;} /*#item { width: 180px; height: 160px; padding:0 10px; background-color: #f0f0f0; margin:10px; display:block; overflow: hidden; float: left; position: relative; color: #333; background-color: #f6f6f6;} #item.salida { height: 110px;} #item label { width: 100px; height: 40px; display:inline;} #item input[type=number]{width: 80px; height: 40px; padding: 0 10px 0 5px; display:inline;} #item .peso, #item .volumen { width: 89px; height: 60px; margin:0; padding: 0; float: left; overflow: hidden; display: block; text-align: center; border-top: 2px solid white;} #item .peso { border-left: 1px solid white; } #item .volumen { border-right: 1px solid white; } #item .remove { position: absolute; right: 5px; top: 5px; cursor: pointer; background-color: #f9f9f9; color: #333; border: 1px solid white; padding:0 3px; line-height: 1em; } #item .remove:hover { color: #f9f9f9; background-color: #333; }*/ /**Login**/ section#login { background-color:white; height: 100%; width: 100%; position:absolute; padding: 0; display:block; overflow: hidden; z-index: 10000000000000} form.login { position:absolute; top:50%; left:50%; margin:-130px 0 0 -275px; width: 550px; } @media only screen and (max-width: 768px){ form.login { width: 50%; margin: 0 auto; left:0; } } @media only screen and (max-width: 450px){ form.login { width: 90%; left: 1%; } } /** COMBO BOC */ .custom-combobox { position: relative; } .custom-combobox-toggle { position: absolute; top: 0; bottom: 0; margin-left: -1px; padding: 0; } .custom-combobox-input { } .ui-autocomplete.ui-front.ui-menu.ui-widget.ui-widget-content{ background-color: white; display: block; position: absolute; list-style: none; } .ui-button.ui-widget.ui-state-default.ui-button-icon-only.custom-combobox-toggle.ui-corner-right{ display: none; } .ui-menu-item { padding: 3px 4px; border-bottom: 1px solid #f6f6f6; font-size: 12px; cursor: pointer;} .ui-menu-item:hover, .ui-state-focus { background-color: gray; color: white;} .ui-helper-hidden-accessible{ display: none;} input.ui-autocomplete-input { position: relative; } /* Fuentes - Thanks google webfonts */ /* latin-ext */ @font-face { font-family: 'Exo'; font-style: normal; font-weight: 300; src: local('Exo Light'), local('Exo-Light'), url(fonts/4oKgrQ7RuzNhc8S26wnOnevvDin1pK8aKteLpeZ5c0A.woff) format('woff'); } /* latin-ext */ @font-face { font-family: 'Exo'; font-style: normal; font-weight: 400; src: local('Exo Regular'), local('Exo-Regular'), url(fonts/NbJxgWx1N-ZYTkl-8nz_VQ.woff) format('woff'); } /* latin-ext */ @font-face { font-family: 'Exo'; font-style: normal; font-weight: 500; src: local('Exo Medium'), local('Exo-Medium'), url(fonts/mNQj8_95yNUgKZlvdPNV7-vvDin1pK8aKteLpeZ5c0A.woff) format('woff'); }