#menu{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
    background-color: var(--white-color);
    
    &>span.button{
        padding: 5px;
        border-radius: 3px;
        user-select: none;
        color: var(--black-color);
        text-shadow: 1px 1px 0px var(--shadow-color-grey);
        border: thin solid var(--shadow-color-grey);
        width: 72px;
        text-align: center;
        
        &.active{
            cursor: pointer;
            &:hover{ background-color: var(--shadow-color-grey); }
            &:active{ opacity: 0.65; }
        }
        &.disable{
            cursor: not-allowed;
            opacity: 0.55;
        }
        &.calc{
            display: flex;
            border-color: var(--main-color);
            align-items: baseline;
            justify-content: space-around;
            width: 90px;
            color: var(--white-color);
            font-weight: bold;
            background-color: var(--main-color);
            cursor: pointer;
            padding: 5px 5px;
            &:hover{ background-color: var(--info-color); }
            &:active{ opacity: 0.65; }
            
            &:after{
                content: 'ƒ(x)';
            }
        }
        
    }
    &>.separator{
        height: 24px;
        border-radius: 2px;
        border: 1px solid var(--shadow-color-light);
        box-shadow: 1px 1px 0px 1px rgba(34, 60, 80, 0.3);
    }
    &>.bubble{
        flex: 1 1 auto;
    }
    
    .shimmer {
        color: var(--white-color) !important;
        cursor: not-allowed;
        animation: 2s linear 0s infinite alternate fadeIn;
    }
    label{
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        flex-direction: row;
        span{
            margin: 0 10px 0 0;
            color: var(--raw-color);
            text-shadow: 1px 1px 0px var(--shadow-color-grey);
        }
        input{
            height: 20px;
            font-size: 120%;
            color: var(--raw-color);
            padding: 2px 3px 2px 5px;
            min-width: 0px;
            border-color: var(--shadow-color-grey);
            border-width: thin;
            border-radius: 3px;
            &:focus{ outline-color: var(--main-color); }
        }
    }
    span.period-text{
        user-select: none;
        color: var(--raw-color);
        text-shadow: 1px 1px 0px var(--shadow-color-grey);
        text-align: center;
    }
}
@keyframes fadeIn {
  from { background-color: var(--success-color); }
  to   { background-color: var(--error-color); }
}