/* ESTRUCTURA */

@font-face {
    font-family: 'bangot';

    src: url("../fonts/bangot.ttf") format("truetype"),
         url('../fonts/bangot.otf') format('opentype'),
         url('../fonts/bangot.svg') format('svg'),
         url('../fonts/bangot.woff2') format('woff2'),
         url('../fonts/bangot.woff') format('woff'),
         url('../fonts/bangot.eot') format('eot');
}

@font-face {
    font-family: 'exo';

    src: url("../fonts/exo.ttf") format("truetype"),
         url('../fonts/exo.otf') format('opentype'),
         url('../fonts/exo.svg') format('svg'),
         url('../fonts/exo.woff2') format('woff2'),
         url('../fonts/exo.woff') format('woff'),
         url('../fonts/exo.eot') format('eot');
}

@font-face {
    font-family: 'gou';

    src: url("../fonts/gou.ttf") format("truetype"),
         url('../fonts/gou.otf') format('opentype'),
         url('../fonts/gou.svg') format('svg'),
         url('../fonts/gou.woff2') format('woff2'),
         url('../fonts/gou.woff') format('woff'),
         url('../fonts/gou.eot') format('eot');
}






/* GENERAL */

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

a, img {
    text-decoration: none;
    outline: none;
    border: none;
}


/* BODY */

body {
    width: 100%;
    height: auto;
    padding-bottom: 8em;
    
    background-color: #E8E8E8;
    
    font-family: exo, verdana, arial, sans-serif;
    font-size: 15px;
    text-align: center;
}





/* TITULOS */

h1 {
    width: 100%;
    height: auto;
    padding: 1%;

    font-family: bangot, verdana, sans-serif;
    font-size: 3em;
    color: #FFF;
    text-align: center;

    background-color: #252525;
}

h1#mainH1 {
    background-color: unset;
}

h3.cargaClientesH3 {
    width: 100%;
    height: auto;
    padding: 1%;

    font-family: bangot, verdana, sans-serif;
    font-size: 1.25em;
    color: #FFF;


    background-color: #264961;
}

h3, h4 {
    width: 100%;
    margin: 1em 0;
    padding-top: 1%;
    clear: both;
}

h4 {
    font-size: 1.2em;
    color: #898989;
    text-align: center;
}





/* FORMS Y ELEMENTOS */

#logueo {
    width: 40%;
    height: auto;
    margin: 3em auto;
    overflow: hidden;
}

#logueo input, #logueo label {
    width: 100%;
}

form {
    padding: 0 2%;
}

input, label, select {
    float: left;
    width: 23%;
    height: 3em;
    margin: 0 1%;
    padding: 0.5%;

    font-size: 1em;
    text-align: center;
}

input[type="submit"] {
    float: right;
    width: 20%;
    height: 3em;
    margin: 1em auto;

    color: #FFF;

    background-color: #252525;
}

input[type="submit"]:hover {
    background-color: #151515;
}

input[type="submit"]:active {
    color: #000;

    background-color: #AFAFAF;
}

input[type="button"] {
    width: 20%;
    height: 3em;
    margin: 1em auto;
}

#contFecha {
    float: left;
    width: 23%;
    margin: 0 1%;
    overflow: hidden;
}

#contFecha div {
    float: left;
    width: 2%;
    padding-top: 5%;
}

#contFecha input {
    width: 30%;
}

textarea {
    width: 100%;
    
    font-size: 1em;
    resize: none;
}

.resaltado {
    font-weight: bold;
}




/* ERRORES Y EXITOS */

.estado {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2em;
    padding-top: 0.5em;

    text-align: center;
    font-size: 1.5em;
    font-weight: bold;

    background-color: rgba(0, 0, 0, .75);
}

.error {
    color: #E93E66;
}

.exito {
    color: #3EE966;
}

.docsLabels { /*  */
    width: 31.33%;
}

.cantidadElementos { /*  */
    margin: 2em auto;
}

#busquedaCliente {
    width: 75%;
    margin: 0 auto;
    overflow: hidden;
    margin-bottom: 4em;
}

#busquedaCliente button {/* ELEMENTO COMUN EN CABECERA CLIENTE */
    float: right;
    width: 23%;
    height: auto;
    margin: 0 1%;
    cursor: pointer;

    font-size: 2em;

    border: none;
}

.busquedaFacturas button {
    color: #59A130;

    background-color: #E5F5DC;
}

.busquedaCarga button {
    color: #3166a3;

    background-color: #E1E4FA;
}

.busquedaModifica button {
    color: #a64733;

    background-color: #FAE9E1;
}





/* HEADER */

header {
    width: 100%;
    height: auto;
    overflow: hidden;
    
    color: #FFF;

    background-color: #252525;
}

header h1 {
    float: left;
    width: auto;
    padding: 0.5em 2%;

    font-size: 3em;
    font-family: gou, verdana, arial, sans-serif;
    color: #F26324;
}

#version {
    float: right;
    width: auto;
    overflow: hidden;
    padding: 1%;

    color: #303030;
    font-size: 2em;
    font-weight: bold;
    font-family: verdana, sans-serif;
}

#contOptions {
    float: right;
    width: auto;
    height: auto;
}

#user {
    width: 100%;
    padding: 0.5em 5%;
    cursor: default;

    text-align: right;
}

#user span {
    font-weight: bold;
    color: #BFB924;
}

#cpMenu {
    float: right;
    width: 100%;
    height: 4em;
    cursor: pointer;

    background-color: #595959;
}

#cpMenu label {
    position: relative;
    float: left;
    width: 100%;
    height: auto;
    margin: 0;
    top: 50%;

    -webkit-transform: translateY(-50%);
    -khtml-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

#opciones {
    position: absolute;
    width: 100%;
    height: 7em;
    top: -7em;
    right: 0;
    z-index: 1000;

    -webkit-transition: top 0.2s;
    -khtml-transition: top 0.2s;
    -moz-transition: top 0.2s;
    -ms-transition: top 0.2s;
    -o-transition: top 0.2s;
    transition: top 0.2s;
}

#cpMenu:hover #opciones {
    top: 0;
}

.option {
    float: left;
    width: 14.285%;
    height: 100%;
    padding-top: 3em;

    color: #E6D961;

    background-color: rgba(56, 56, 56, 0.8);

    border-right: 1px solid #898989;

    -webkit-transition: background-color 0.2s;
    -khtml-transition: background-color 0.2s;
    -moz-transition: background-color 0.2s;
    -ms-transition: background-color 0.2s;
    -o-transition: background-color 0.2s;
    transition: background-color 0.2s;
}

.option:hover {
    color: #6196E6;

    background-color: rgba(25, 25, 25, 1);
}

.option:active {
    color: #6196E6;
}

.user .option {
    float: right;
    width: 100%;
    
    text-align: right;
}

/* NAV */

nav {
    width: 100%;
    min-width: 800px;
    height:auto;
    overflow: hidden;
    
    font-size: 1.2em;
    
    background-color: #264961;
}

.links {
    float: left;
    width: 14.285%;
    height: auto;
    padding: 1em 0;
    display: block;
    
    color: #FFF;
    font-weight: bold;
    
    transition: background-color 100ms, color 100ms;
}

.links:link {
    color: #FFF;
}

.links:visited {
    color: #FFF;
}

.links:hover {
    background-color: #202020;
}

.links:active {
    background-color: #151515;
}

/* SECTION */

main {
    width: 100%;
    min-width: 800px;
    height: auto;
    padding-top: 0;
    overflow: hidden;
    
    text-align: left;
}

/* FOOTER */

footer {
}



/* PAGINAS */




/* LOGUEO */

.resultadoLogueo {
    width: 100%;
    height: 200px;
    overflow: hidden;
    
    text-align: center;

    background-color: #E8E8E8;
}

/* COPIAS */

.aInicial {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

.aInicial#copias {
    background-image: url("imgs/aInicial/.jpg");
}

.aInicial#copias {
    background-image: url("imgs/aInicial/.jpg");
}

.aInicial#copias {
    background-image: url("imgs/aInicial/.jpg");
}

.aInicial#copias {
    background-image: url("imgs/aInicial/.jpg");
}

.aInicial#copias {
    background-image: url("imgs/aInicial/.jpg");
}

.aInicial#copias {
    background-image: url("imgs/aInicial/.jpg");
}

.aInicial#copias {
    background-image: url("imgs/aInicial/.jpg");
}

.aInicial div {
    float: left;
    width: 24%;
    height: 10em;
    margin: 5em 0.5% 1em 0.5%;
    padding: 0;
    overflow: hidden;
    cursor: pointer;

    font-family: bangot, exo, sans-serif;
    font-size: 1.5em;
    color: #FFF;
    text-align: center;

    background-color: #1e331e;

    -webkit-transition: background-color 0.2s;
    -khtml-transition: background-color 0.2s;
    -moz-transition: background-color 0.2s;
    -ms-transition: background-color 0.2s;
    -o-transition: background-color 0.2s;
    transition: background-color 0.2s;
}

.aInicial div:hover {
    background-color: #0e170e;
}

.aInicial div:active {
    background-color: #09240c;
}

.aInicial div label {
    position: relative;
    width: 70%;
    height: auto;
    margin: 0;
    padding: 2% 0 2% 40%;
    top: 50%;
    cursor: pointer;

    color: #FFF;
    text-align: left;

    background-color: #29472A;

    -webkit-transform: translateY(-50%);
    -khtml-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);

    -webkit-transition: padding 0.2s, width 0.2s;
    -khtml-transition: padding 0.2s, width 0.2s;
    -moz-transition: padding 0.2s, width 0.2s;
    -ms-transition: padding 0.2s, width 0.2s;
    -o-transition: padding 0.2s, width 0.2s;
    transition: padding 0.2s, width 0.2s;
}

.aInicial div:hover label {
    width: 100%;
    padding: 4% 0 4% 10%;
}





/* RECARGAS */

#crearCartuchos {
    float: left;
    width: 50%;
    height: auto;
    padding: 1%;
    overflow: hidden;

    border-right: 1px solid #898989;
}

#crearToners {
    float: right;
    width: 50%;
    height: auto;
    padding: 1%;
    overflow: hidden;
}

.trabajoInsumos {
    float: left;
    width: 50%;
    margin: 2em 0;
    overflow: hidden;
    
    font-size: 0.9em;
}

.trabajoInsumos > * {
    width: 100%;
}



/* SELLOS */

#crearSellos {
    width: 100%;
    height: auto;
    margin: 3em 0;
    overflow: hidden;
}

.contenedorSellos {
    float: left;
    width: 25%;
    height: auto;
}

.contenedorSellos * {
    width: 97%;
    margin: 0 3%;
}

.divLineas {
    width: 100%;
    height: auto;
    overflow: hidden;
}




/* VOL Y TARS */

#crearVolytars {
    width: 100%;
    height: auto;
    margin: 1em 0;
    overflow: hidden;
}

.inputInfo {
    width: 73%;
    float: right;
    padding: 0.5%;
}




/* GRAFICA */

#crearGraficas {
    width: 100%;
    height: auto;
    margin: 1em 0;
    overflow: hidden;
}

.divGraficas {
    float: left;
    width: 100%;
    height: auto;
}




/* FACTURAS */

#contenedorSearch {
    width: 100%;
    height: auto;
    overflow: hidden;
}

#contenedorSearch.busquedaFacturas {
    color: #E5F5DC;

    background-color: #29472A;
}

#contenedorSearch.busquedaCarga {
    color: #e1e4fa;

    background-color: #1C3342;
}

#contenedorSearch.busquedaModifica {
    color: #fae9e1;

    background-color: #4A302B;
}

#contenedorSearch > div {
    overflow: hidden;

    font-size: 1.5em;
}

#nuevoCliente {
    width: 15%;
    height: auto;
    margin: 1em auto;
    padding: 1%;
    cursor: pointer;
    overflow: hidden;

    color: rgba(0, 0, 0, 0.6);
    text-align: center;

    background-color: rgba(255, 255, 255, 0.6);
}

#nuevoCliente:hover {
    background-color: rgba(255, 255, 255, 0.9);
}

.celdaCentro {
    text-align: center;
}

.clearLeft {
    clear: left;
}




/* BUSCAR */

#contenedorBusqueda {
    width: 100%;
    height: auto;
    overflow: hidden;

    color: #FFF;

    background-color: #264961;
}

#busquedaTrabajos {
    width: 75%;
    margin: 0 auto;

    font-family: bangot, exo, verdana, sans-serif;
}

.fieldGroup {
    float: left;
    width: 25%;
    padding: 2%;
}

#busquedaTrabajos h1 {
    margin: 1em 0;
}

#busquedaTrabajos .titleTag {
    width: 100%;

    font-size: 1em;
    text-align: center;
}

#busquedaTrabajos select {
    float: left;
    width: 100%;

    font-family: bangot, exo, verdana, sans-serif;

    border: none;
}

#busquedaTrabajos select option {
    padding: 2%;
}

#busquedaTrabajos input {
    font-family: bangot, exo, verdana, sans-serif;

    border: none;
}

#busquedaTrabajos input[type="text"] {
    float: left;
    width: 100%;
    padding: 2%;
}

#busquedaTrabajos input[type="submit"] {
    float: right;

    color: #FFF;

    background-color: #252525;
}

#busquedaTrabajos input[type="submit"]:hover {
    background-color: #151515;
}

#busquedaTrabajos input[type="submit"]:active {
    color: #000;

    background-color: #AFAFAF;
}

#contenedorResultset {
    overflow: hidden;
}

.resultset {
    position: relative;
    float: left;
    width: 32.83%;
    height: 35em;
    margin: 0.25%;
    overflow: hidden;

    font-family: bangot, exo, verdana, sans-serif;
    font-size: 1em;
    color: #FFF;
}

.contenedorTipo {
    width: 100%;
    overflow: hidden;

    border-bottom: 1px solid #D2D3D5;
}

.contenedorTipo.tipo1 {
    height: 12.5%;

    background-color: #889FAC;
}
.contenedorTipo.tipo2 {
    height: 40%;

    background-color: #889FAC;
}
.contenedorTipo.tipo3 {
    height: 5%;

    background-color: #889FAC;

    border: none;
}
.contenedorTipo.tipo4 {
    height: 12.5%;

    background-color: #889FAC;
}
.contenedorTipo.tipo5 {
    height: 7.5%;

    background-color: #6B7D87;
}

.contenedorTipo.tipo6 {
    height: 15%;

    background-color: #6B7D87;
}

.contenedorTipo > div {
    position: relative;
    float: left;
    width: 50%;
    height: auto;
    top: 50%;

    -webkit-transform: translateY(-50%);
    -khtml-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.contenedorTipo.tipo2 > div {
    height: 100%;
}

.contenedorTipo.tipo2 > div:first-child {
    border-right: 1px solid #D2D3D5;
}

.contenedorTipo.tipo2 > div:last-child {
    border-left: 1px solid #D2D3D5;
}

.contenedorTipo.tipo3 > div {
    width: 33.33%;
    height: 100%;
}

.contenedorTipo.tipo4 > div {
    width: 33.33%;
    height: 100%;
}

.contenedorTipo.tipo5 > div {
    float: left;
    width: 50%;
}

.contenedorTipo.tipo6 > div {
    width: 100%;
}

.darkBlue {
    background-color: #6B7D87;
}

.lightBlue {   
    background-color: #889FAC;
}

.middleAlign > div {
    position: relative;
    top: 50%;

    -webkit-transform: translateY(-50%);
    -khtml-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.smallerText {
    font-size: 0.8em;
}

.biggerTitle {
    font-size: 2em;
}

.borders {
    border-right: 1px solid #D2D3D5;
}

.resultset form {
    width: 100%;
    padding: 1%;
    overflow: hidden;

    text-align: left;
}

.resultset select {
    float: left;
    width: 50%;
    height: 2em;

    font-family: bangot, exo, verdana, sans-serif;
    font-size: 1em;
    text-align: center;

    border: 1px solid #000;
}

.resultset input {
    height: 50%;
    margin: 0;
    padding: 0;

    font-family: bangot, exo, verdana, sans-serif;
}

.resultset input[type="text"] {
    width: 100%;
}

.resultset input[type="submit"] {
    float: right;
    width: 30%;
    height: 2em;
    margin: 0 5%;

    color: #FFF;

    background-color: #6B7D87;

    border: 1px solid #000;
}

input[type="text"].inputTotal {
    float: left;
    width: 30%;
}

input[type="text"].inputRequiriente {
    float: right;
    width: 60%;
}

input[type="text"].inputRazon {
    float: right;
    width: 100%;
}



/* MODIFICAR.PHP */

#cambioPass {
    width: 40%;
    height: auto;
    margin: 6em auto;
    overflow: hidden;
}

#cambioPass label, #cambioPass input {
    width: 100%;
}




/* CARGACLIENTES.PHP */

#cuitSearch {
    width: 50%;
    margin: 4em auto;
    overflow: hidden;
}

#cuitSearch label, #cuitSearch input {
    float: left;
    width: 50%;
    margin: 0;
}

#cuitSearch input[type="submit"] {
    float: right;
    margin: 2em 0;
}



/* CARGACLIENTES.PHP */

#cargaClientes {
    width: 80%;
    margin: 0 auto;
    padding: 2%;
    overflow: hidden;
}

#cargaClientes section {
    padding-bottom: 2em;
    overflow: hidden;
}

#cargaClientes input[type="submit"] {
   clear: both;
}


/* PRINT LAYOUT */

.printLayout {
    width: 100%;
    max-width: 1200px;
    height: auto;
    margin: 0 auto;
    overflow: hidden;

    font-size: 0.9em;

    background-image: url("../imgs/logo.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}

.printLayout div {
    width: 100%;
}

.printLayout h4 {
    margin: 0;
    padding-top: 0;

    color: #898989;
    line-height: 1.5em;

    background-color: #333;
}

.printLayout label {
    width: 25%;
    height: auto;
    margin: 0;
    padding: 0;

    line-height: 3em;

    border: 1px solid #898989;
}

.printLayout .footerImpresion {
    float: left;
    width: 50%;

    text-align: center;
    line-height: 3em;
}

hr#divisionImp {
    width: 100%;
    margin: 1em auto;
    clear: both;

    border-style: dashed;
}

div.amount {
    float: left;
    width: 50%;
    height: auto;
    overflow: hidden;
}

div.amount label {
    width: 100%;
    height: auto;
}

div.realizarSellos {
    width: 100%;
    height: auto;
    overflow: hidden;

    text-align: center;
}

div.realizarSellos label {
    width: 100%;
    height: auto;
}

div.impresionSellos {
    float: left;
    width: 25%;
    height: auto;
    overflow: hidden;
}

div.impresionSellos label {
    width: 100%;
    height: auto;
}