.red-button-1,.green-button-1,.green-button-2,.gray-button-1,.purple-button-1,.blue-button-1{

    position:relative;

    border-radius:4px;

    display:flex

}

.red-button-1::before,.green-button-1::before,.green-button-2::before,.gray-button-1::before,.purple-button-1::before,.blue-button-1::before{

    content:"";

    position:absolute;

    width:calc(100% - 10px);

    height:calc(100% - 10px);

    top:0;

    left:0;

    border-radius:3px 3px 0 0;

    margin:5px

}

.red-button-1::before{

    background:linear-gradient(#c45252 50%,transparent 50%)

}

.red-button-1{

    background:#b03e3e;

    border:1px solid #983636

}

.green-button-1{

    background: #4caf50;

    border: 1px solid #48ab4c;

}

.green-button-1::before{

    background: linear-gradient(#6cc16f 50%,transparent 50%);

}

.green-button-2::before{

    background:linear-gradient(rgb(112,196,110) 50%,transparent 50%)

}

.green-button-2{

    background:#59ba56;

    border:unset

}

.green-button-2:hover{

    background:#68c166

}

.green-button-2:hover:before{

    background:linear-gradient(rgb(125,202,124) 50%,transparent 50%)

}

.green-button-2:active{

    background:#55af52

}

.green-button-2:active:before{

    background:linear-gradient(rgb(92,189,89) 50%,transparent 50%)

}

.gray-button-1::before{

    background:linear-gradient(rgb(227,225,225) 50%,transparent 50%)

}

.gray-button-1{

    background:#d2d0d0;

    border:1px solid #000;

    box-shadow:0 1px #000;

    margin:0 0 1px

}

.gray-button-1:hover:before{

    background:linear-gradient(rgb(236,234,234) 50%,transparent 50%)

}

.gray-button-1:hover{

    background:#d8d6d6;

    cursor:pointer

}

.gray-button-1:active:before{

    background:linear-gradient(rgb(219,215,215) 50%,transparent 50%)

}

.gray-button-1:active{

    background:#c9c5c5

}

.purple-button-1::before{

    background:linear-gradient(rgb(129,74,168) 50%,transparent 50%)

}

.purple-button-1{

    background:#683c88;

    border:1px solid #573272

}

.purple-button-1:hover:before{

    background:linear-gradient(rgb(145,92,184) 50%,transparent 50%)

}

.purple-button-1:hover{

    background:#79469f;

    cursor:pointer

}

.purple-button-1:active:before{

    background:linear-gradient(rgb(125,72,162) 50%,transparent 50%)

}

.purple-button-1:active{

    background:#633982

}

.blue-button-1::before{
    background: linear-gradient(#56af59 50%,transparent 50%);
}

.blue-button-1{
    background: #3f9342;
    border: 1px solid #3f9342;
}

.yellow-button-1::before{

    background:linear-gradient(rgb(255,204,70) 50%,transparent 50%)

}

.yellow-button-1{

    background:#ffb900;

    border:1px solid #ecab00

}

.yellow-button-1:hover:before{

    background:linear-gradient(rgb(255,209,90) 50%,transparent 50%)

}

.yellow-button-1:hover{

    background:#ffc11d;

    cursor:pointer

}

.yellow-button-1:active:before{

    background:linear-gradient(rgb(240,192,67) 50%,transparent 50%)

}

.yellow-button-1:active{

    background:#f3b100

}

.green-button-1 label,.green-button-2 label,.gray-button-1 label,.purple-button-1 label,.blue-button-1 label,.yellow-button-1 label{

    pointer-events:none

}