/*************************************************************************************
* css/styles.css                                                                     *
**************************************************************************************
* Software Name: MvSoft Facturacion                                                  *
* Software URL: https://www.mvsoft.ar/software/mvsoft-facturacion                    *
* Software Support: soporte@mvsoft.ar                                                *
* Description: Software exclusivo de MvSoft · Todos los derechos reservados          *
* Author: MvSoft                                                                     *
* Author URL: https://www.mvsoft.ar                                                  *
* Copyright © 2020                                                                   *
*************************************************************************************/

/* GENERAL */
body {
    background: #fff;
    padding: 0;
    margin: 0;
}

* {
    font-family: 'Ubuntu', 'Open Sans', Arial;
}

ul, li {
	list-style: none;
	padding: 0;
	margin: 0;
}

a {
	text-decoration: none;
	cursor: pointer;
}

/* LOGIN */
section#login .left h2 {
	display: inline-block;
}

section#login .left h2 strong {
    font-weight: bold;
}



section#login .left p strong {
    font-weight: bold;
}

section#login .left h2 strong, section#login .left p strong {
	font-family: 'Ubuntu', 'Open Sans', Arial;
	font-weight: 100;
}

section#login .right h2 {
	text-align: center;
	font-family: 'Roboto', 'Open Sans', Arial;
	font-weight: 100;
	font-size: 34px;
	margin-top: 0;
	margin-bottom: 14px;
}

section#login .right form li {
	display: inline-block;
	width: 100%;
	margin: 10px 0;
	text-transform: uppercase;
}

section#login .right form li label {
	width: 100%;
	font-family: 'Roboto', 'Open Sans', Arial;
	font-weight: 100;
	color: #000;
}

section#login .right form li input[type="text"], section#login .right form li input[type="password"] {
	width: 100%;
	border: 1px solid #ccc;
	border-radius: 2px;
	padding: 10px 8px;
	margin-top: 8px;
	font-family: 'Ubuntu', 'Open Sans', Arial;
	font-weight: 100;
}

/* HEADER */
header .logo {
    float: left;
    display: block;
    width: 10%;
    padding: 12px 14px;
}

header .logo img {
    width: 100%;
}

header nav.no-resp, header nav.resp, header nav.no-resp li {
    float: left;
    width: auto;
    display: block;
}

header nav.no-resp li a {
    display: table;
    padding: 28px 14px;
    text-transform: uppercase;
    font-size: 14px;
    color: #fff;
    border-bottom: 3px solid #2471A3;
    transition: 0.5s;
}

header nav.no-resp li a:hover {
    background: rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.1);
}

header nav.no-resp li a.active {
    background: rgba(0, 0, 0, 0.2);
    border-color: orange;
}

header nav.resp select {
    border: 1px solid #eee;
    padding: 8px 10px;
    font-size: 12px;
    margin: 8px 0;
    font-family: 'Ubuntu', Arial;
    border-radius: 2px;
}

header .box-usuario {
    float: right;
}

header .box-usuario p {
    display: block;
    color: #fff;
    text-transform: uppercase;
    padding: 28px 14px;
    font-size: 14px;
    margin: 0;
}

/* BOTONES */
.btn {
	border-radius: 2px;
	font-size: 11px;
	font-weight: 400;
	font-family: 'Open Sans', Arial;
	padding: 10px 14px;
	border: none;
	margin-right: 5px;
	text-decoration: none;
    cursor: pointer;
    text-align: center;
    text-transform: uppercase;
}

.btn.blue {
	background: #4285f4;
	color: #fff;
}

.btn.gray {
	background: #ddd;
	color: #444;
}

.btn.green {
	background: #41B66F;
	color: #fff;
}

.btn-logout, .btn-setting {
    float: right;
    width: 24px;
    margin: 24px 3% 24px 0;
}

.btn-logout img, .btn-setting img {
    width: 100%;
}

/* SECCION GENERAL */
#content-section {
    display: table;
    width: 100%;
    margin: 85px auto 15px auto;
    border-radius: 2px;
    background: #fff;
}

.copy {
    width: 100%;
    display: table;
    margin: 0 auto;
    text-align: center;
    color: gray;
    font-size: 11px;
    text-transform: uppercase;
    font-family: 'Verdana', Arial;
    margin-bottom: 15px;
    line-height: 24px;
}

.copy a {
    color: #2471A3;
}

/* SOPORTE */
.soporte {
    position: fixed;
    bottom: 20px;
    right: 30px;
}

.soporte a {
    width: 64px;
    height: 64px;
    display: table;
    margin-top: 14px;
}

#btn-soporte-correo, #btn-soporte-wsp {
	width: 45px;
	height: 45px;
	margin-top: 14px;
	margin: 14px auto 0 auto;
}

.soporte a img {
    width: 100%;
}

/* BUSCADOR */
.buscador, .resultados {
    display: table;
    width: 95%;
    margin: 40px auto;
}

.buscador h2 {
    font-size: 34px;
    font-family: 'Roboto', Arial;
    text-transform: uppercase;
    width: 100%;
    text-align: center;
    margin: 0 0 20px 0;
    padding: 0;
}

.buscador ul {
    display: table;
    width: 97%;
}

.buscador ul li {
    float: left;
}

.buscador ul li.filtro {
    width: 28%;
}

.buscador ul li.texto {
    float: right;
    width: 70%
}

/* RESULTADOS */
table {
    width: 100%;
}

table.list {
    padding: 18px 0;
}

table tr {
    width: 100%;
    display: table;
}

table tr.encabezado {
    background: #34495E;
    border: 1px solid #34495E;
    border-radius: 2px 2px 0 0;
}

table tr.detalles, table tr.sin-resultados {
    transition: 0.5s;
    border-width: 0 1px 1px 1px;
    border-color: #eee;
    border-style: solid;
    display: table;
    width: 100%;
}

table tr.sin-resultados td {
    text-align: center;
    font-size: 12px;
    font-family: 'ubuntu', arial;
    color: #444;
    width: 100%;
    padding: 14px 10px;
    text-transform: uppercase;
    line-height: 24px;
}

table tr.detalles:hover {
    background: #EBF5FB !important;
}

table tr td {
    padding: 8px 10px;
    font-size: 13px;
    font-family: 'Ubuntu', Arial;
    font-weight: 100;
    color: #333;
    float: left;
}

table tr.encabezado td {
    color: #fff;
    text-transform: uppercase;
}

table tr.detalles td {
    font-size: 12px !important;
}

table td a img {
    width: 18px;
    height: 18px;
}

/* SEPARADORES */
ul.sp-1, ul.sp-1 li, ul.sp-2, ul.sp-2 li {
    display: table;
	float: left;
}

ul.sp-1, ul.sp-2 {
    width: 97%;
    padding: 8px 0;
}

ul.sp-1 li {
    width: 100%;
}

ul.sp-2 li {
    width: 48%;
}

input.sp-width {
    width: 90% !important;
}

input.sp-2-width {
    width: 80% !important;
}

ul.sp-1 li label, ul.sp-2 li label, .buscador ul li label {
    display: inline-block;
	width: 100%;
	font-size: 12px;
	font-weight: 400;
	font-family: 'Ubuntu', 'Open Sans', Arial;
    margin-bottom: 8px;
    color: gray;
    text-transform: uppercase;
}

ul.sp-1 li .no-label, ul.sp-2 li .no-label {
    float: left;
    width: auto;
    color: #333;
    margin-right: 8px;
    margin-top: 8px;
}

ul.sp-1 li input, ul.sp-1 li select, ul.sp-1 li textarea, ul.sp-2 li input, ul.sp-2 li select, ul.sp-2 li textarea, .buscador ul li input, .buscador ul li select {
    width: 95%;
	padding: 8px 12px;
	font-size: 13px;
	font-family: 'Ubuntu', 'Open Sans', Arial;
	font-weight: 100;
	color: #333;
	border-radius: 2px;
	border: 1px solid gray;
}

ul.btn {
	width: 100%;
    display: inline-block;
    padding: 8px 0;
}

ul.btn input[type="submit"], ul.btn input[type="reset"] {
    float: right;
    margin: 0;
}

/* ALERTAS */
.alert {
	width: 97%;
	text-align: center;
	font-size: 13px;
	font-family: 'Ubuntu', Arial;
	font-weight: 100;
	padding: 14px 0;
	margin: 8px auto;
	border-width: 1px;
    border-style: solid;
    border-color: transparent;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 24px;
}

.alert.yellow {
	background: #FDFFD1;
	color: gray;
	border-color: #FCFFB7;
}

.alert.blue {
	background: #D8E3F9;
	color: #2E92CF;
    border-color: #D8E3F9;
    font-size: 14px;
}

/* CHECKBOX Y RADIO BUTTOM */
.container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
  
.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
  
.checkmark {
    position: absolute;
    top: -5px;
    left: 4px;
    height: 25px;
    width: 25px;
    background-color: #eee;
}

.container:hover input ~ .checkmark {
    background-color: #ccc;
}
  
.container input:checked ~ .checkmark {
    background-color: #2196F3;
}
  
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
  
.container input:checked ~ .checkmark:after {
    display: block;
}
  
.container .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* SIDEBAR */
#sidebar {
    background: #eee;
    border-right: 1px solid #ccc;
    position: fixed;
    height: 100%;
    width: 20%;
    float: left;
    top: 142px;
}

#sidebar a {
    display: table;
    width: 88%;
    padding: 15px 14px;
    font-family: 'Ubuntu', Arial;
    font-size: 13px;
    color: #444;
    text-transform: uppercase;
    border-right: 3px solid transparent;
}

#sidebar a.active {
    background: rgba(0, 0, 0, 0.1);
    border-color: orangered;
}

/* CONTENT FACTURAS */
.content-facturas {
    width: 95% !important;
    margin: 0 auto;
}

.resp, .resp-administracion {
    display: none;
}

.resp-administracion {
    width: 95%;
    margin: 0 auto;
}

#content-sub-section .box-content .resp select, .resp-administracion select {
    width: 100%;
    padding: 12px 18px;
    font-size: 12px;
    font-family: 'Ubuntu', Arial;
    border: 1px solid #eee;
    border-radius: 2px;
    background: #f5f5f5;
    margin-top: 15px;
}

/* SUB SECCION */
#content-sub-section {
    background: #fff;
    width: 80%;
    float: right;
    margin-top: 65px;
}

.box-content {
    width: 95%;
    margin: 0 auto;
}

.sub-nav {
    background: #bbb;
    border-bottom: 1px solid #aaa;
    position: fixed;
    width: 98%;
    margin: 0;
    padding: 20px 15px;
    font-family: 'Roboto', Arial;
    font-size: 18px;
    z-index: 1;
    text-transform: uppercase;
}

/* TITLE */
h4.title {
    width: 100%;
    display: inline-block;
    margin: 28px 0 5px 0;
    color: #333;
    border-bottom: 3px solid #eee;
}

h4.title strong {
    width: auto;
    font-size: 15px;
    font-weight: 100;
    font-family: 'Ubuntu', Arial;
    border-bottom: 3px solid orangered;
    margin-bottom: -3px;
    padding: 0 5px 8px 0;
    display: table;
    text-transform: uppercase;
}

/* TOOLTIP */
.tooltips {
    position: relative;
    display: inline-block;
}
  
.tooltips .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 145%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
    text-transform: uppercase;
}
  
.tooltips .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}
  
.tooltips:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

/* RESUMEN */
.resumen-nueva-factura .lt {
    float: left;
    width: 48%;
}

.resumen-nueva-factura .rt {
    float: right;
    width: 48%;
}

/* TOTALES */
.total-nueva-factura {
    width: 100%;
    display: table;
}

.total-nueva-factura input {
    border: none;
    padding: 8px 14px;
    font-size: 24px;
    font-family: 'Roboto', Arial;
    font-weight: 100;
    width: 44%;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.total-nueva-factura input.left {
    float: left;
    text-align: left;
}

.total-nueva-factura input.right {
    float: right;
    text-align: right;
}

.total-nueva-factura input.center {
    width: 95%;
    text-align: center;
}

/* TOP */
.top {
    width: 95%;
    margin: 30px auto;
    display: table;
}

.top h4 {
    float: left;
    width: auto;
    padding: 0;
    margin: 0;
    font-size: 28px;
    font-family: 'Roboto', Arial;
    text-transform: uppercase;
    line-height: 40px;
}

.top .btn {
    float: right;
}

/* PIC */
.pic {
    width: 100%;
    display: table;
}

.pic img {
    width: 100%;
    height: 240px;
}

/* RESUMEN */
.resumen {
    width: 90%;
    display: table;
    margin: 40px auto;
}

.resumen h4 {
    font-size: 24px;
    font-family: 'Roboto', Arial;
    text-transform: uppercase;
    width: 100%;
    text-align: left;
    margin: 0 0 20px 0;
    padding: 0;
}

.resumen li {
    float: left !important;
    width: 18% !important;
    text-align: center;
    padding: 0 !important;
    padding: 0 20px !important;
    background: transparent;
    color: #fff;
    border-width: 0 0 0 14px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.2);
    cursor: pointer;
    margin-right: 1%;
}

.resumen li h2 {
    font-size: 48px;
    font-family: 'Ubuntu', Arial;
}

.resumen li p {
    font-size: 18px !important;
    font-family: 'Roboto', 'Open Sans', Arial;
    text-transform: uppercase;
}

/* ESTADISTICAS */
.box-estadisticas {
    float: left;
    width: 48%;
    margin: 8px 0;
    box-shadow: 0 0 10px rgb(12 12 12 / 5%);
    border-style: solid;
    border-color: #eee;
    border-width: 0 1px 1px 1px;
    border-top: 5px solid gainsboro;
}

.box-estadisticas .title {
    width: 100%;
    display: table;
    border-bottom: 1px solid #eee;
}

.box-estadisticas .title h2 {
    font-size: 24px;
    font-family: 'Roboto', Arial;
    font-weight: 100;
    color: #333;
    text-transform: uppercase;
    padding: 0;
    margin: 14px auto;
    text-align: left;
    width: 95%;
}

.box-estadisticas .content {
    width: 100%;
    display: table;
}

.box-estadisticas .content .stat {
    margin: 20px auto;
    display: table;
    width: 95%;
}

/* BUSCADOR CLIENTES */
.razonsocial-clientes, .fantasia-clientes {
    width: 18%;
}

.domicilio-clientes, .localidad-clientes, .telefono-clientes {
    width: 15%;
}

.acciones-clientes, .acciones-articulos {
    width: 8%;
}

/* BUSCADOR ARTICULOS */
.codigo-articulos {
    width: 15%;
}

.nombre-articulos {
    width: 30%;
}

.contado-articulos, .tarjeta-articulos, .lista-articulos {
    width: 10%;
}

/* BUSCADOR FACTURAS */
.fecha-facturas {
    width: 8%;
}

.comprobante-facturas, .nro-facturas, .total-facturas {
    width: 15%;
}

.razonsocial-facturas {
    width: 30%;
}

.acciones-facturas {
    width: 5%;
}

/* ARTICULOS FACTURA */
.cantidad-articulos-nueva-factura {
    width: 10%;
}

.codigo-articulos-nueva-factura, .precio-articulos-nueva-factura, .total-articulos-nueva-factura {
    width: 15%;
}

.nombre-articulos-nueva-factura {
    width: 30%;
}

/* AGREGADO ENTIDADES */
.tipo-telefonos, .tipo-correos, .tipo-direcciones {
    width: 15%;
}

.numero-telefonos, .correo-correos {
    width: 30%;
}

.descripcion-correos {
    width: 40%;
}

.localidad-direcciones {
    width: 18%;
}

.domicilio-direcciones {
    width: 25%;
}

.descripcion-telefonos, .drescripcion-correos {
    width: 40%;
}

.descripcion-direcciones {
    width: 25%;
}

.descripcion-observaciones-clientes, .descripcion-observaciones-articulos {
    width: 90%;
}

.acciones-telefonos, .acciones-correos, .acciones-observaciones-clientes, .acciones-observaciones-articulos {
    width: 5%;
}

.acciones-direcciones {
    width: 4%;
}

/* AGREGADO ARTICULOS */
.titulo-detalles {
    width: 30%;
}

.descripcion-detalles {
    width: 58%;
}

.rubro-rubros-alternativos, .sub-rubro-rubros-alternativos {
    width: 28%;
}

.tipo-codigos-alternativos {
    width: 15%;
}

.codigo-codigos-alternativos {
    width: 20%;
}

.descripcion-rubros-alternativos {
    width: 30%;
}

.descripcion-codigos-alternativos {
    width: 50%;
}

.acciones-rubros-alternativos, .acciones-codigos-alternativos, .acciones-detalles {
    width: 3%;
}

.razonsocial-proveedores, .correo-proveedores {
    width: 20%;
}

.doccuit-proveedores {
    width: 10%;
}

.localidad-proveedores, .telefono-proveedores {
    width: 15%;
}

.acciones-proveedores {
    width: 5%;
}

/* MOVIMIENTOS */
.fecha-mov, .cte-mov, .nro-mov, .debe-mov, .haber-mov {
    width: 10%;
}

.descripcion-mov {
    width: 30%;
}