/* controls-button */
.controls-button {
    position: relative;
    display: block;
    margin: 0.25em 0;
    padding: 0 0.5em;
    height: 1.75em;
    overflow: hidden; 
    background: #2d2d2d;
    cursor: pointer;
    transition: background-color 0.3s;
    
}

.controls-button input[type="button"],
.controls-button button {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    outline: none;
    border: 1px solid red;
    -webkit-appearance: none;
    opacity: 0;
    filter: alpha(opacity=0);
}

.controls-button > span {
    display: block;
    overflow: hidden;
 /*   white-space: nowrap; */
   text-transform: uppercase; 
    text-align: center;
    font-size: 0.75em;
    line-height: 2.333em;
    font-weight: 400;
    color: #fff;
}

.controls-button.controls-follow {
    border: 1px solid red;
    color: #FFF;
    background: none;
    font-size: 0.9375em;
}

.controls-button.controls-follow.active,
.controls-button.controls-follow:hover {
    border: 1px solid red;
    background: #66cc9a;
}

.controls-button.controls-follow.active:hover {
    border: 1px solid red;
    background: none;
}

.controls-button.controls-follow > span {
    word-wrap: break-word;
    font-size: 0.6875em;
    line-height: 1.8888em;
}


.controls-button.controls-block {
    border: 1px solid red;
    color: red;
    background: none;
    font-size: 0.9375em;
}

.controls-button.controls-block.active,
.controls-button.controls-block:hover {
    border: 1px solid red;
    background: #ff4d4d;
}

.controls-button.controls-block.active:hover {
    border: 1px solid red;
    background: none;
}

.controls-button.controls-block > span {
    word-wrap: break-word;
    font-size: 0.6875em;
    line-height: 1.8888em;
}



.controls-button[data-color="mykey"] {
    background: #66cc9a;
}

.controls-button[data-color="red"] {
    background: #ff4d4d;
}

.controls-button[data-color="grey"] {
    background: #2c2c2c;
}

.controls-button:hover {
    background: red;
}