.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 {
        cursor: pointer;
        background-image: url("../img/botonera.png");
        border-radius: 12px;
        border-width: 0;
        height: 90px;
        position: relative;
        width: 90px;
        outline: 0;
        span {
            left: 0;
            position: absolute;
            text-align: center;
            top: 90px;
            width: 100%;
            font-size: 12px;
            color: #777777;
        }
        &:hover {
            background-color: rgb(250, 250, 250);
            filter: drop-shadow(4px 4px 4px gray);
        }
        &:active {
            background-color: rgb(230, 230, 230);
            filter: drop-shadow(4px 4px 4px gray);
        }
        &:focus {
            background-color: rgb(250, 250, 250);
            filter: drop-shadow(4px 4px 4px gray);
        }
    }
    &-menu {
        width: 100%;
        padding-left: 90px;
        @media (max-width: 576px) {
            padding: 0;
        }
    }
    &-logo {
        width: 100%;
        margin-left: 50%;
        opacity: 0.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;
        }
    }
    &-logistica {
        & button {
            background-image: url("../img/logistica.png");
            background-size: 90px 90px;
        }
    }
    &-facturador {
        & button {
            background-position: -270px 0px;
            &:hover {
                background-position: -270px -90px;
            }
        }
    }
    &-nota-pedido {
        & button {
            background-image: url("../img/notaPedido.png");
            background-size: 90px 90px;
        }
    }
    &-remito {
        & button {
            background-image: url("../img/remito.png");
            background-size: 90px 90px;
        }
    }
    &-hoja-ruta {
        & button {
            background-image: url("../img/hoja-ruta.png");
            background-size: 86px 90px;
        }
    }
    &-activar-hoja-ruta {
        & button {
            background-image: url("../img/activar_hoja.png");
            background-size: 90px 90px;
        }
    }
    &-hoja-ruta-transportista {
        & button {
            background-image: url("../img/hojaRutaVolante.png");
            background-size: 90px 90px;
        }
    }
    &-seguimiento {
        & button {
            background-image: url("../img/seguimientoNotaPedido.png");
            background-size: 90px 90px;
        }
    }
    &-seguimiento-hoja-ruta {
        & button {
            background-image: url("../img/seguimientoHojaRuta.png");
            background-size: 90px 90px;
        }
    }
    &-cobranzas {
        & button {
            background-image: url("../img/cobranzas.png");
            background-size: 90px 90px;
        }
    }
    &-seguimiento-cobranzas {
        & button {
            background-image: url("../img/seguimientoCobranza.png");
            background-size: 90px 90px;
        }
    }
    &-vehiculo {
        & button {
            background-image: url("../img/abmVehiculos.png");
            background-size: 90px 90px;
        }
    }
    &-precio-condicion {
        & button {
            background-image: url("../img/abmPrecios.png");
            background-size: 90px 90px;
        }
    }
    &-chofer {
        & button {
            background-image: url("../img/abmChofer.png");
            background-size: 90px 90px;
        }
    }
    &-agendar-visita {
        & button {
            background-image: url("../img/agendarVisita.png");
            background-size: 90px 90px;
        }
    }
    &-informes {
        & button {
            background-image: url("../img/informes.png");
            background-size: 90px 90px;
        }
    }
    &-vendedor-cobrador {
        & button {
            background-image: url("../img/abmVendedorCobrador.png");
            background-size: 90px 90px;
        }
    }
    &-autorizar-nota {
        & button {
            background-image: url("../img/autorizarNota.png");
            background-size: 90px 90px;
        }
    }

    &-cliente {
        & button {
            background-image: url("../img/clientePrincipal.png");
            background-size: 90px 90px;
        }
    }

    &-parametros {
        & button {
            background-image: url("../img/parametrizar.png");
            background-size: 90px 90px;
        }
    }

    &-factura {
        & button {
            background-image: url("../img/factura.png");
            background-size: 90px 90px;
        }
    }

    .swiper-pagination {
        bottom: 0px !important;
        background: none;
    }

    .swiper-button-next {
        background-image: url("../img/derecha.png");
        &:hover {
            filter: drop-shadow(4px 4px 4px gray);
        }
    }

    .swiper-button-prev {
        background-image: url("../img/izquierda.png");
        &:hover {
            filter: drop-shadow(4px 4px 4px gray);
        }
    }

    .btn-tareas-pausadas{
        background-color: #cd9035;
        border-color: #cd9035 !important;
        height: 30px;
        text-align: center;
        width: 280px;
        background-image: none;
        flood-color: #ffffff;
        &:hover {
            background-color: #cd9035;
        }
        &:focus {
            background-color: #cd9035;
        }
    }

    .dropdown-tareas-pausadas{
        background: linear-gradient(0 ,#ffffff, #e6e6e6);
        position: absolute;
        will-change: transform;
        top: 0px;
        left: 0px;
        transform: translate3d(0px, 0px, 0px);
        margin-bottom: 5px;
        padding: 0px;
        box-sizing: content-box;
        border-radius: 12px;
        font: small;
        transform: translate3d(0px, 30px, 0px);
    }

    .items-dropdown{
        background-color:rgba(0, 0, 0, 0);
        cursor: hand;
        &:hover {
            background-color: #e6e6e6;
            width: 98%;
            border-radius: 12px;
        }
    }

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