.botonera-lateral {
    pointer-events: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 402px;
    &.teclado{
        top: 449px;
        z-index: 100000;
    }
    .row{
        margin: 0 !important;
        pointer-events: none;
    }

    .container{
        @media (min-width: 768px){
            display: grid !important;
        }
    }

    button{
        pointer-events: all;
        background-color: #DDD;
    }

    .teclado-activar {
        background-color: #17d236 !important;
        color: #FFF !important;
    }
    div[ladda]{
        background-color: #DDD;
    }

    button, .btn-group-toggle{
        background-color: #DDD;
        color: #000;
        text-transform: uppercase;
        min-width: 109px;
        &:hover{
            color: #FFF;
            .boton-activar-teclado{
                color: #FFF;
            }
            background-color: #000;
        }
    }
    
    
    .btn-group-toggle{
        pointer-events: all;
        &.active{
            background-color: $primary;
            .boton-activar-teclado{
                color: #FFF;
            }
        }
        
        .boton-activar-teclado{
            cursor: pointer;
            color: #000;
            background-color: transparent;
        }

        input{
            display: none;
        }
    }

    .guardado{
        animation:guardado 4s 1;
        -webkit-animation:guardado 4s 1; /* Safari and Chrome */
    }

    @keyframes guardado
    {
        0%      {background:#DDD; color: #000;}
        25%     {background:#28a745; color: #FFF;}
        75%     {background:#28a745; color: #FFF;}
        100%    {background:#DDD; color: #000;}
    }

    @-webkit-keyframes guardado /* Safari and Chrome */
    {
        0%      {background:#DDD; color: #000;}
        25%     {background:#28a745; color: #FFF;}
        75%     {background:#28a745; color: #FFF;}
        100%    {background:#DDD; color: #000;}
    }
}