/*************************************************************************************
* css/media.css                                                                      *
**************************************************************************************
* Software Name: MvSoft Comercios                                                    *
* Software URL: https://www.comercios.mvsoft.me                                           *
* Software Support: soporte@comercios.mvsoft.me                                           *
* Software Version: 1                                                                *
* Software Release: 21/06/2023                                                       *
* Developer Name: MvSoft                                                             *
* Developer URL: https://www.mvsoft.ar                                               *
* Developer Support: soporte@mvsoft.ar                                               *
**************************************************************************************
*                   Copyright 2023 - Todos los derechos reservados                   *
*************************************************************************************/

@media screen and (min-width: 1120px) and (max-width: 1449px) {
    /* LOGIN */
    section#login .box {
        margin: 8% 0 0 5%;
    }

    section#login .slogan {
        margin: 8% 5% 0 0;
    }

    section#login .slogan h2, section#login .slogan h2 strong {
        font-size: 75px;
    }

    /* HEADER */
    header .logo img {
        width: 180px;
    }

    header nav {
        padding: 18px 0;
    }

    /* SIDENAV */
    #sidenav {
        top: 65px;
        width: 70px;
    }

    #sidenav ul li a {
        padding: 10px 0;
    }

    /* SUBNAV */
    .subnav {
        position: fixed;
        top: 80px;
        max-height: 80%;
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* CONTENT SECTION */
    #content-section {
        width: 90%;
        margin: 65px 40px 15px 120px;
    }

    /* FACTURADOR */
    section#facturador .lt form li input {
        width: 75%;
    }

    section#facturador .lt #articulos-nueva-factura .item .center .cantidad input[type="tel"] {
        width: 20px;
    }

    section#facturador .rt {
        top: 65px;
    }

    section#facturador .rt .top {
        margin: 15px auto 0 auto;
    }
    
    section#facturador .rt .top ul {
        padding: 18px 0 !important;
    }

    section#facturador .rt .top ul.sp-2 {
        width: 92%;
    }

    section#facturador .rt .carrito .item, section#facturador .rt .carrito .datos {
        padding: 5px 0;
    }

    section#facturador .rt .carrito .item .info h2, section#facturador .rt .carrito .datos .info h2, section#facturador .rt .carrito .item .precio p, section#facturador .rt .carrito .datos .precio p {
        font-size: 13px;
    }

    section#facturador .rt .bottom {
        padding: 10px 0;
    }

    .btn-facturar a.primary {
        width: 88% !important;
    }

    /* MODAL */
    .modal-content {
        width: 60%;
    }

    /* MI CUENTA */
    #sidebar {
        top: 0;
        margin-top: 0;
        width: 22%;
        left: 0;
    }

    #content-sub-section {
        width: 75%;
        margin: 0 auto;
    }

    #content-sub-section .titulo h4 {
        padding: 0 0 15px 0;
    }

    /* RESULTADOS */
    .resultados .filtros .box {
        width: 40%;
    }
}

@media screen and (min-width: 960px) and (max-width: 1199px) {
    /* LOGIN */
    section#login .box {
        margin: 5% 0 0 5%;
    }

    section#login .slogan {
        margin: 5% 5% 0 0;
    }

    section#login .slogan h2, section#login .slogan h2 strong {
        font-size: 68px;
    }

    /* HEADER */
    header .logo img {
        width: 160px;
    }

    header nav {
        padding: 16px 0;
    }

    header nav a {
        width: 24px;
        height: 24px;
    }

    /* SIDENAV */
    #sidenav {
        top: 60px;
        width: 60px;
    }

    #sidenav ul li a {
        padding: 8px 0;
    }

    #sidenav ul li a img {
        width: 20px;
        height: 20px;
    }

    /* SUBNAV */
    .subnav {
        position: fixed;
        top: 90px;
        max-height: 80%;
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* CONTENT SECTION */
    #content-section {
        width: 88%;
        margin: 60px 40px 15px 120px;
    }

    /* FACTURADOR */
    section#facturador .lt {
        width: 65%;
    }

    section#facturador .lt h2 {
        font-size: 18px;
    }

    section#facturador .lt form li input {
        width: 70%;
    }

    section#facturador .lt #articulos-nueva-factura .item .center .cantidad a {
        padding: 10px 5px;
    }

    section#facturador .lt #articulos-nueva-factura .item .center .cantidad input[type="tel"] {
        width: 20px;
    }

    section#facturador .rt {
        top: 60px;
    }

    section#facturador .rt .top {
        margin: 8px auto 0 auto;
    }

    section#facturador .rt .top h2 {
        font-size: 15px;
    }

    section#facturador .rt .top .accesos a {
        width: 18px;
        height: 18px;
    }
    
    section#facturador .rt .top ul {
        padding: 16px 0 !important;
    }

    section#facturador .rt .top ul input, section#facturador .rt .top ul select {
        padding: 8px 0 8px 35px;
    }

    section#facturador .rt .top ul.sp-2 {
        width: 92%;
    }

    section#facturador .rt .carrito .item, section#facturador .rt .carrito .datos {
        padding: 5px 0;
    }

    section#facturador .rt .carrito .item .info h2, section#facturador .rt .carrito .datos .info h2, section#facturador .rt .carrito .item .precio p, section#facturador .rt .carrito .datos .precio p {
        font-size: 13px;
    }

    section#facturador .rt .bottom {
        padding: 10px 0;
    }

    section#facturador .lt .sin-resultados, .sin-resultados {
        font-size: 11px;
    }

    section#facturador .rt .bottom .content .general li {
        margin: 6px auto;
    }

    section#facturador .rt .bottom .content .general li p, section#facturador .rt .bottom .content .total li p {
        font-size: 11px;
    }

    section#facturador .rt .bottom .content .general li span, section#facturador .rt .bottom .content .total li span {
        font-size: 11px;
    }

    section#facturador .rt .bottom .content .total {
        padding: 20px 0 20px 4%;
    }

    section#facturador .rt .bottom .content .total li p, section#facturador .rt .bottom .content .total li span {
        font-size: 13px;
    }

    section#facturador .rt .bottom .content a {
        margin: 8px 0 0 0;
    }

    .btn-facturar a.primary {
        width: 88% !important;
    }

    /* RESULTADOS */
    .resultados .filtros form {
        width: 25%;
    }

    /* MODAL */
    .modal-content {
        width: 60%;
    }

    /* MI CUENTA */
    #sidebar {
        top: 0;
        margin-top: 0;
        width: 28%;
        left: 0;
    }

    #content-sub-section {
        width: 70%;
        margin: 0 auto;
    }

    #content-sub-section .titulo h4 {
        padding: 0 0 15px 0;
    }

    /* PLANES */
    .planes li {
        float: none;
        width: 80%;
        margin: 0 auto 120px auto;
    }

    /* ABM */
    section#facturador .lt nav a, section#abm #content-sub-section .box-content nav a, nav.tabs a {
        padding: 12px 15px;
    }

    section#abm #content-sub-section {
        width: 70%;
    }

    /* RESULTADOS */
    .resultados .filtros .box {
        width: 40%;
    }
}

@media screen and (min-width: 800px) and (max-width: 959px) {
    /* LOGIN */
    section#login .box {
        margin: 2.5% auto 0 auto;
        width: 60%;
        float: none;
    }

    section#login .slogan {
        display: none;
    }

    /* HEADER */
    header .logo {
        padding: 8px;
    }

    header .logo img {
        width: 140px;
    }

    header nav {
        padding: 16px 0;
    }

    header nav a {
        width: 18px;
        height: 18px;
        font-size: 13px;
    }

    /* SIDENAV */
    #sidenav {
        top: 50px;
        width: 50px;
    }

    #sidenav ul li {
        margin: 5px 0;
    }

    #sidenav ul li a {
        padding: 8px 0;
    }

    #sidenav ul li a img {
        width: 16px;
        height: 16px;
    }

    /* SUBNAV */
    .subnav {
        position: fixed;
        top: 80px;
        max-height: 80%;
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* CONTENT SECTION */
    #content-section {
        width: 88%;
        margin: 50px 40px 15px 120px;
    }

    /* FACTURADOR */
    section#facturador .lt {
        width: 100%;
    }

    section#facturador .lt form li {
        width: 75%;
    }

    section#facturador .lt form li input {
        width: 65%;
    }

    section#facturador .lt form .resultados-buscar-articulo {
        width: 74%;
    }

    section#facturador .lt #articulos-nueva-factura .item .center {
        margin: 0 0 0 15px;
    }

    section#facturador .lt #articulos-nueva-factura .item .center .cantidad a {
        padding: 10px 5px;
    }

    section#facturador .lt #articulos-nueva-factura .item .center .cantidad input[type="tel"] {
        padding: 10px 8px;
        width: 20px;
    }

    section#facturador .rt {
        width: 100%;
        position: relative;
        display: table;
        border-left: none;
        border-top: 1px solid #eee;
    }

    section#facturador .rt ul.sp-2 li input {
        width: 86% !important;
    }

    section#facturador .rt .bottom {
        position: relative;
        width: 100%;
    }

    .btn-facturar a.primary {
        width: 88% !important;
    }

    /* MODAL */
    .modal-content {
        width: 80%;
    }

    /* MI CUENTA */
    #sidebar {
        top: 0;
        margin-top: 0;
        width: 28%;
        left: 0;
    }

    #content-sub-section {
        width: 70%;
        margin: 0 auto;
    }

    #content-sub-section .titulo h4 {
        padding: 0 0 15px 0;
    }

    /* PLANES */
    .planes li {
        float: none;
        width: 80%;
        margin: 0 auto 120px auto;
    }

    /* ABM */
    section#abm #sidebar {
        display: none;
    }

    section#abm #content-sub-section {
        width: 100%;
    }

    section#abm #content-sub-section .box-content .botones {
        display: block;
    }
}

@media screen and (min-width: 650px) and (max-width: 799px) {
    /* LOGIN */
    section#login .box {
        margin: 2.5% auto 0 auto;
        width: 60%;
        float: none;
    }

    section#login .box .top h2 {
        font-size: 24px;
    }

    section#login .box .top h2 img {
        width: 48px;
        margin-bottom: -15px;
    }

    section#login .box .content form li a, section#login .box .footer a {
        font-size: 13px;
    }

    section#login .slogan {
        display: none;
    }

    /* HEADER */
    header .logo {
        padding: 8px;
    }

    header .logo img {
        width: 140px;
    }

    header nav {
        padding: 16px 0;
    }

    header nav a {
        width: 18px;
        height: 18px;
        font-size: 13px;
    }

    /* SIDENAV */
    #sidenav {
        display: none;
    }

    /* CONTENT SECTION */
    #content-section {
        width: 88%;
        margin: 50px 15px 15px 120px;
    }

    /* FACTURADOR */
    section#facturador .lt {
        width: 100%;
    }

    section#facturador .lt form li {
        width: 75%;
    }

    section#facturador .lt form li input {
        width: 65%;
    }

    section#facturador .lt form .resultados-buscar-articulo {
        width: 74%;
    }

    section#facturador .lt #articulos-nueva-factura .item .center {
        margin: 0 0 0 15px;
    }

    section#facturador .lt #articulos-nueva-factura .item .center .cantidad a {
        padding: 10px 5px;
    }

    section#facturador .lt #articulos-nueva-factura .item .center .cantidad input[type="tel"] {
        padding: 10px 8px;
        width: 20px;
    }

    section#facturador .rt {
        width: 100%;
        position: relative;
        display: table;
        border-left: none;
        border-top: 1px solid #eee;
    }

    section#facturador .rt ul.sp-2 li input {
        width: 86% !important;
    }

    section#facturador .rt .bottom {
        position: relative;
        width: 100%;
    }

    .btn-facturar a.primary {
        width: 88% !important;
    }

    /* RESULTADOS */
    .resultados .filtros form {
        width: 25%;
    }

    .resultados .filtros .box {
        width: 50%;
    }
    
    .resultados .filtros a.btn.filtro {
        padding: 10px 12px;
    }

    .resultados .filtros .botones.no-resp {
        display: none;
    }

    .resultados .filtros .botones.resp {
        display: block;
    }

    /* MODAL */
    .modal-content {
        width: 80%;
    }

    /* SEPARADORES */
    ul.sp-1, ul.sp-2 {
        padding: 0;
    }

    ul.sp-1 li, ul.sp-2 li {
        width: 100% !important;
        padding: 25px 0;
    }

    ul.sp-1 li input, ul.sp-1 li textarea, ul.sp-2 li input, ul.sp-2 li textarea {
        width: 92% !important;
    }

    ul.sp-1 li label, ul.sp-2 li label {
        bottom: 39px;
    }

    ul.sp-1 li label.fade, ul.sp-2 li label.fade {
        bottom: 0;
    }

    i {
        top: 37px;
    }

    /* ESTADISTICAS */
    .menu-estadisticas {
        width: 100%;
        position: relative;
        float: left;
    }

    .menu-estadisticas a {
        float: left;
        width: 30%;
        margin: 12px 3% 12px 0;
    }

    .content-estadisticas {
        width: 100%;
    }

    /* MI CUENTA */
    #sidebar {
        top: 0;
        margin-top: 0;
        width: 28%;
        left: 0;
    }

    #sidebar a .content img {
        width: 14px;
    }

    #sidebar a .content p {
        font-size: 11px;
    }

    #content-sub-section {
        width: 65%;
        margin: 0 0 0 15px;
        float: left;
    }

    #content-sub-section .titulo h4 {
        padding: 0 0 15px 0;
    }

    /* PLANES */
    .planes li {
        float: none;
        width: 80%;
        margin: 0 auto 120px auto;
    }

    /* TUTORIALES */
    #tutoriales .index-tutoriales .categorias-tutoriales .categoria-tutoriales ul li a {
        width: 85%;
    }

    /* RESUMEN */
    .resumen .lt, .resumen .rt {
        width: 100% !important;
    }

    .resumen .lt {
        margin: 0 0 20px 0;
    }

    .box-home {
        width: 100%;
    }

    /* ABM */
    section#abm #sidebar {
        display: none;
    }

    section#abm #content-sub-section {
        width: 100%;
    }

    section#facturador .lt nav a, section#abm #content-sub-section .box-content nav a, nav.tabs a {
        padding: 12px 15px;
    }

    section#abm #content-sub-section .box-content .botones {
        display: block;
    }

    /* REGISTRO */
    section#registro {
        width: 100%;
    }

    /* ALTA CUENTA */
    nav.alta-cuenta a {
        float: none;
        margin: 8px auto;
    }

    .planes a.btn {
        padding: 12px 0;
    }

    header nav.no-resp {
        padding: 0 !important;
    }

    header nav.no-resp a {
        font-size: 28px !important;
    }
}

@media screen and (max-width: 649px) {
    /* LOGIN */
    section#login .box {
        margin: 2% auto 0 auto;
        width: 80%;
        float: none;
    }

    section#login .box .top h2 {
        font-size: 24px;
    }

    section#login .box .top h2 img {
        width: 48px;
        margin-bottom: -15px;
    }

    section#login .box .content form li a, section#login .box .footer a {
        font-size: 13px;
    }

    section#login .slogan {
        display: none;
    }

    /* HEADER */
    header {
        position: absolute;
    }

    header .logo img {
        width: 120px;
    }

    header nav {
        float: left;
        padding: 12px 0 12px 20px;
    }

    header nav a {
        margin: 0;
    }

    header nav.resp {
        display: block;
    }

    header nav.no-resp {
        display: none;
    }

    header nav a img {
        width: 24px;
    }

    /* MODAL */
    .modal-content {
        width: 100%;
    }

    .modal .modal-content .modal-header {
        padding: 12px 0;
    }

    .modal .modal-content .modal-header .content a {
        font-size: 28px;
        padding: 0;
    }

    .modal .modal-content .modal-header .content h2 {
        font-size: 28px;
    }

    /* SIDENAV */
    #sidenav {
        display: none;
    }

    /* CONTENT SECTION */
    #content-section {
        width: 95%;
        margin: 60px auto;
        float: none;
    }

    /* FACTURADOR */
    section#facturador .lt {
        width: 100%;
    }

    section#facturador .lt form li {
        width: 100%;
        margin: 12px 0 0 0;
    }

    section#facturador .lt form li a {
        width: 100%;
        margin: 12px 0 0 0;
        padding: 10px 0;
    }
    
    section#facturador .lt form .resultados-buscar-articulo {
        width: 100%;
        left: 0;
        top: 110px;
    }

    section#facturador .lt form .resultados-buscar-articulo li a span {
        width: 100%;
        text-align: center;
    }

    section#facturador .lt #articulos-nueva-factura .item .left {
        width: 100%;
    }

    section#facturador .lt #articulos-nueva-factura .item .left input {
        width: 100%;
    }

    section#facturador .lt #articulos-nueva-factura .item .center {
        width: 100%;
        margin: 0;
    }

    section#facturador .lt #articulos-nueva-factura .item .center .cantidad a {
        padding: 10px 5px;
    }

    section#facturador .lt #articulos-nueva-factura .item .center .cantidad input[type="tel"] {
        width: 20px;
    }

    section#facturador .lt #articulos-nueva-factura .item .right {
        width: 100%;
    }

    section#facturador .lt #articulos-nueva-factura .item .right p, section#facturador .lt #articulos-nueva-factura .item .right a {
        float: none;
        text-align: center;
        display: table;
        width: 100%;
    }

    section#facturador .lt #articulos-nueva-factura .item .right a {
        padding: 0;
    }

    section#facturador .rt {
        position: relative;
        width: 100%;
        margin: 20px 0;
        display: table;
        height: auto;
        border-left: none;
        border-top: 1px solid #eee;
    }

    section#facturador .rt .bottom {
        position: relative;
        width: 100%;
        margin: 0 0 50px 0;
    }

    section#facturador .rt .bottom .content .general {
        width: 100%;
    }

    section#facturador .rt .bottom .content .total {
        width: 100%;
        border-left: none;
        border-top: 1px solid #ccc;
    }

    section#facturador .rt .bottom .content a {
        margin: 0;
    }

     /* SEPARADORES */
     ul.sp-1, ul.sp-2 {
        padding: 0;
     }

     ul.sp-1 li, ul.sp-2 li {
        width: 100% !important;
        padding: 25px 0;
    }

    ul.sp-1 li input, ul.sp-1 li textarea, ul.sp-2 li input, ul.sp-2 li textarea, .modal .modal-content .modal-body .content form ul.sp-1 input {
        width: 84% !important;
    }

    ul.sp-1 li label, ul.sp-2 li label {
        bottom: 39px;
    }

    ul.sp-1 li label.fade, ul.sp-2 li label.fade {
        bottom: 0;
    }

    i {
        top: 37px;
    }

    /* RESULTADOS */
    .resultados .filtros a.btn.filtro {
        background: #fff;
        margin: 0 auto 12px auto;
        color: #333;
        width: 90%;
        border-color: #ccc;
        padding: 10px 0;
        display: table;
        float: none !important;
    }

    .resultados .filtros form {
        width: 90%;
        margin: 0 auto 12px auto;
        display: table;
        float: none;
    }

    .resultados .filtros form input[type="text"] {
        width: 100%;
        padding: 10px 0;
        text-align: center;
    }

    .resultados .filtros form input[type="text"]:focus {
        width: 100%;
    }

    .resultados .filtros .botones.no-resp {
        display: none;
    }

    .resultados .filtros .botones.resp {
        display: table;
        margin: 0 auto;
        float: none;
        width: auto;
    }

    .resultados .filtros .box {
        position: fixed;
        top: 0;
        left: 0;
        box-shadow: none;
        height: 100%;
        width: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        z-index: 9999;
    }

    .resultados .filtros a {
        float: left !important;
    }

    .resultados .filtros a.btn {
        padding: 10px 12px;
        width: auto;
    }

    /* BOTONES */
    .btn {
        padding: 10px 0;
        width: 100%;
        margin: 8px 0;
        text-align: center;
        float: left !important;
    }

    /* ESTADISTICAS */
    .menu-estadisticas {
        width: 100%;
        position: relative;
        float: left;
    }

    .menu-estadisticas a {
        float: left;
        width: 100%;
        margin: 12px 0;
    }

    .content-estadisticas {
        width: 100%;
    }

    /* MI CUENTA */
    #sidebar {
        width: 100%;
        position: relative;
        top: 0;
        left: 0;
        height: auto;
    }

    #content-sub-section {
        width: 100%;
    }

    .box-pagar-ahora-mi-cuenta .lt, .box-pagar-ahora-mi-cuenta .rt {
        width: 100%;
    }

    /* PLANES */
    .planes li {
        float: none;
        width: 100%;
        margin: 0 auto 120px auto !important;
    }

    .planes a.btn {
        width: 100% !important;
    }

    /* TUTORIALES */
    #tutoriales .index-tutoriales .categorias-tutoriales .categoria-tutoriales ul li {
        width: 100%;
    }
    
    .ver-articulo .info .lt {
        float: none;
        display: table;
        margin: 0 auto 12px auto;
    }

    .ver-articulo .info .rt {
        width: 100%;
        text-align: center;
    }

    /* RESUMEN */
    .resumen .lt, .resumen .rt {
        width: 100% !important;
    }

    .resumen .lt {
        margin: 0 0 20px 0;
    }

    .resumen .rt ul a {
        width: 100%;
    }

    .box-home {
        width: 100%;
    }

    .box-home .title h2 {
        text-align: center;
    }

    /* ABM */
    section#abm #sidebar {
        display: none;
    }

    section#abm #content-sub-section {
        width: 100%;
    }

    section#facturador .lt nav a, section#abm #content-sub-section .box-content nav a, nav.tabs a {
        width: 100%;
        padding: 12px 0;
        text-align: center;
    }

    section#abm #content-sub-section .box-content .botones {
        display: block;
        width: 100%;
    }

    /* REGISTRO */
    section#registro {
        width: 100%;
    }

    /* ALTA CUENTA */
    nav.alta-cuenta a {
        float: none;
        margin: 8px auto;
    }

    .planes a.btn {
        padding: 12px 0;
    }

    header nav.no-resp {
        padding: 0 !important;
    }

    header nav.no-resp a {
        font-size: 28px !important;
    }
}