#signature{
    border: 1px solid #eee;
    border-radius: 6px;
    overflow: hidden;
    width: 100%;
    height: 15rem;
    display: block;
}

.night #signature{
    border: 1px solid #444;
}

/***************************************************/

.action-bar button:nth-child(4){
    background-color: #FF9800;
}

.action-bar button:nth-child(5){
    background-color: #607D8B;
}

@media screen and (max-width: 460px){
    .action-bar button:nth-child(1){
        width: calc(50% - 0.25rem);
        float: left;
    }
    .action-bar button:nth-child(2){
        width: calc(50% - 0.25rem);
        float: right;
    }
    .action-bar button:nth-child(3){
        width: calc(50% - 0.25rem);
        float: left;
        margin-top: 0.5rem;
    }
    .action-bar button:nth-child(4){
        width: calc(50% - 0.25rem);
        float: right;
        margin-top: 0.5rem;
    }
    .action-bar button:nth-child(5){
        width: 100%;
        margin-top: 0.5rem;
    }
}

@media screen and (max-width: 390px){
    .action-bar button:nth-child(1){
        width: calc(50% - 0.25rem);
        float: left;
    }
    .action-bar button:nth-child(2){
        width: calc(50% - 0.25rem);
        float: right;
    }
    .action-bar button:nth-child(3){
        width: calc(50% - 0.25rem);
        float: left;
        margin-top: 0.5rem;
    }
    .action-bar button:nth-child(4){
        width: calc(50% - 0.25rem);
        float: right;
        margin-top: 0.5rem;
    }
    .action-bar button:nth-child(5){
        width: 100%;
        margin-top: 0.5rem;
    }
}
