.rotary-container {
    padding: 4px;
}

.rotary-black-border {
    border: 1px solid #000;
}

.rotary-white-border {
    border: 2px solid #FFF;
}

.rotary-status-container {
    width: 100%;
    height: 20%;
}

.rotary-horizontal-vertical-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.rotary-horizontal-center {
    display: flex;    
    justify-content: center;    
}

.rotary-status {
    float: left;
    width: 34%;
    height: 100%;
    font-weight: bold;
    font-size : 75%;    
}

.rotary-status-empty {
    float: left;
    width: 32%;
}

.rotary-status-on {
    background-color: #0FFF00;
    opacity: 30%;
}

.rotary-status-off {
    background-color: #FF0000;
    opacity: 30%;
}

.rotary-status-active {
    transition: transform 0.4s ease;
    opacity: 100%;
}

.rotary-circle-container {
    width: 100%;
    height: 80%;
}

.rotary-circle {
    width: 70%;
    height: 88%;
    border-radius: 100%;
}

.rotary-button {
    width: 15%;
    height: 80%;
    background-color: #bdbdbd;
}

.rotary-button-top {
    width: 50%;
    height: 30%;
    background-color: #6e6e6e;
}

.rotary-button-state-on {
    transform: rotate(45deg);
}

.rotary-button-state-off {
    transform: rotate(-45deg);
}

.rotary-disabled{
    opacity: 0.5;
}