.showbutton {
    display: inline-flex;
    background-color: #1e1e1e;
    border: 2px solid #3a3a3a;
    border-radius: 6px;
    text-decoration: none;
    color: #dff;
    margin: 5px;
    padding: 5px;
    font-size: 20px;
    cursor: default;
    align-items: center;
}
.showbutton:hover {
    background-color: #252525;
    border-color: #505050;
}

.showbutton.red {
    color: #dff;
    background-color: #3a1818;
    border-color: #7d3232;
}
.showbutton.red:hover {
    background-color: #4a1e1e;
    border-color: #a64444;
}

.showbutton.green {
    color: #dff;
    background-color: #163a2a;
    border-color: #2f7d55;
}
.showbutton.green:hover {
    background-color: #1d4a35;
    border-color: #3da66d;
}

.showbutton.click {
    cursor: pointer;
}
.showbutton.edit {
    cursor: text;
}
.showbutton.noclick, .disabled {
    cursor: not-allowed !important;
    opacity: 0.7;
}
.showbutton img {
    height: 25px;
    vertical-align: middle;
}
.showbutton span {
    vertical-align: middle;
}