.botonera-principal {
    menuitem {
        display: inline-block;
        height: 130px;
        text-align: center;
        width: 180px;
        @media (max-width: 576px) {
            width: 100%;
        }
        @media (min-width: 992px) and (max-width: 1200px){
            width: 150px;
        }
    }
    button {
        background-image: url('../img/botonera.png');
        border-radius: 12px;
        border-width: 0;
        height: 90px;
        position: relative;
        width: 90px;
        span {
            left: 0;
            position: absolute;
            text-align: center;
            top: 90px;
            width: 100%;
            font-size: 12px;
            color: #777777;
        }
    }
    &-menu {
        width: 100%;
        padding-left: 90px;
        @media (max-width: 576px) {
            padding: 0;
        }
    }
    &-logo {
        width: 100%;
        margin-left: 50%;
        opacity: .8;
        @media (max-width: 576px) {
            width: 180%;
            margin-left: 20%;
        }
    }
    &-vacio {
        & button {
            background-position: -4380px 0;
            &:hover {
                background-position: -4380px -90px;
            }
        }
    }
    &-abrir-turno {
        & button {
            background-position: 0 0;
            &:hover {
                background-position: 0 -90px;
            }
        }
    }
    &-cerrar-turno {
        & button {
            background-position: -90px 0;
            &:hover {
                background-position: -90px -90px;
            }
        }
    }
    &-caja {
        & button {
            background-position: -180px 0;
            &:hover {
                background-position: -180px -90px;
            }
        }
    }
    &-estado-cisterna {
        & button {
            background-image: url('../img/control_stock.png');
            background-size: 90px 90px;
            &:hover {
                background-color: rgb(250,250,250);
            }
        }
    }
    &-logistica {
        & button {
            background-image: url('../img/logistica.png');
            background-size: 90px 90px;
            &:hover {
                background-color: rgb(250,250,250);
            }
        }
    }
    &-facturador {
        & button {
            background-position: -270px 0px;
            &:hover {
                background-position: -270px -90px;
            }
        }
    }
    &-nota-pedido {
        & button {
            background-image: url('../img/notaPedido.png');
            background-size: 90px 90px;
            &:hover {
                background-color: rgb(250,250,250);
            }
        }
    }
    &-remito {
        & button {
            background-image: url('../img/remito.png');
            background-size: 90px 90px;
            &:hover {
                background-color: rgb(250,250,250);
            }
        }
    }
    &-hoja-ruta {
        & button {
            background-image: url('../img/hoja-ruta.png');
            background-size: 86px 90px;
            &:hover {
                background-color: rgb(250,250,250);
            }
        }
    }
    &-hoja-ruta-transportista {
        & button {
            background-image: url('../img/hojaRutaVolante.png');
            background-size: 90px 90px;
            &:hover {
                background-color: rgb(250,250,250);
            }
        }
    }
    &-seguimiento {
        & button {
            background-image: url('../img/seguimientoNotaPedido.png');
            background-size: 90px 90px;
            // background-position: 15px 10px;
            &:hover {
                background-color: rgb(250,250,250);
            }
        }
    }
    &-seguimiento-hoja-ruta {
        & button {
            background-image: url('../img/seguimientoHojaRuta.png');
            background-size: 90px 90px;
            // background-position: 15px 10px;
            &:hover {
                background-color: rgb(250,250,250);
            }
        }
    }
    &-cobranzas {
        & button {
            background-image: url('../img/cobranzas.png');
            background-size: 90px 90px;
            // background-position: 15px 10px; 
            &:hover {
                background-color: rgb(250,250,250);
            }
        }
    }
    &-seguimiento-cobranzas {
        & button {
            background-image: url('../img/seguimientoCobranza.png');
            background-size: 90px 90px;
            // background-position: 15px 10px; 
            &:hover {
                background-color: rgb(250,250,250);
            }
        }
    }
    &-vehiculo {
        & button {
            background-image: url('../img/abmVehiculos.png');
            background-size: 90px 90px;
            &:hover {
                background-color: rgb(250,250,250);
            }
        }
    }
    &-precio-condicion {
        & button {
            background-image: url('../img/abmPrecios.png');
            background-size: 90px 90px;
            &:hover {
                background-color: rgb(250,250,250);
            }
        }
    }
    &-chofer {
        & button {
            background-image: url('../img/abmChofer.png');
            background-size: 90px 90px;
            &:hover {
                background-color: rgb(250,250,250);
            }
        }
    }
    &-agendar-visita {
        & button {
            background-image: url('../img/agendarVisita.png');
            background-size: 90px 90px;
            &:hover {
                box-shadow: 2px;
                background-color: rgb(250,250,250);
            }
        }
    }
    &-informes {
        & button {
            background-image: url('../img/informes.png');
            background-size: 90px 90px;
            &:hover {
                background-color: rgb(250,250,250);
            }
        }
    }
    &-vendedor-cobrador {
        & button {
            background-image: url('../img/abmVendedorCobrador.png');
            background-size: 90px 90px;
            &:hover {
                background-color: rgb(250,250,250);
            }
        }
    }
    &-autorizar-nota {
        & button {
            background-image: url('../img/autorizarNota.png');
            background-size: 90px 90px;
            &:hover {
                background-color: rgb(250,250,250);
            }
        }
    }
    .swiper-pagination {
        bottom: 0px !important;
    }

    .swiper-button-next {
        background-image: url('../img/derecha.png');
    }

    .swiper-button-prev {
        background-image: url('../img/izquierda.png');
    }

    @media (min-width: 992px){
        a{
            margin-top: 2.5rem;
        }
    }
}