.neumorphic_round_control
{
    --neu-round-diam: 110px;
    --neu-round-bd-width: 5px;
    --dial-dot-diam: 8px;
    --neu-gd-light: rgba(250, 250, 250, 1);
    --neu-ctl-light: rgba(250, 250, 250, 1);
    --neu-ctl-dark: rgba(50, 100, 0, 1);  
    width: calc(var(--neu-round-diam) - 2*var(--neu-round-bd-width));
    height: calc(var(--neu-round-diam) - 2*var(--neu-round-bd-width));
    border-radius: calc(1/2*var(--neu-round-diam) + var(--neu-round-bd-width));
    border: var(--neu-round-bd-width) solid var(--neu-border-receptive);
    background: linear-gradient(135deg, var(--neu-gd-light), var(--neu-gd-dark));
    box-shadow: var(--neu-round-light-disp) var(--neu-round-light-disp) var(--neu-round-light-spread) 2px var(--neu-bg-light),
                2px 1px var(--neu-round-dark-spread) 2px var(--neu-bg-dark);
    margin: var(--neu-round-margin);
    font-family: arial;
    font-weight: bold;
    font-size: var(--neu-font-size);
    color: var(--neu-text-color);

    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    
    visibility: hidden;
    transform: scale(0.1);
    opacity: 0;

    position: absolute;
    transition: transform var(--neu-trans-delta),
                visibility var(--neu-trans-delta),
                opacity var(--neu-trans-delta),
                background var(--neu-push-trans-delta),
                border-color var(--neu-push-trans-delta),
                color var(--neu-push-trans-delta); 
}

.neumorphic_round_control.dial_active
{
    visibility: visible;
    transform: translate(0,0);
    opacity: 1;
}

.button_frame
{
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.neumorphic_round_control.dial_active.control_dormant
{
    background: linear-gradient(135deg, var(--neu-bg-light), var(--neu-bg-dark));
    border: var(--neu-round-bd-width) solid var(--neu-border-dormant);
}

.neumorphic_round_control.dial_active.control_dormant .inner_frame
{
    background: linear-gradient(135deg, var(--neu-bg-light), var(--neu-bg-dark));
    border: 1px solid var(--neu-border-dormant);

}

.neumorphic_round_control.dial_active.control_dormant .dial_shortcut
{
    text-shadow: none;
    opacity: 0.5;
}

.neumorphic_round_control.dial_active.control_dormant .control_dot
{
    opacity: 0.3;
}

.neumorphic_round_control.dial_active.control_dormant .name_place
{
    text-shadow: none;
    opacity: 0.3;
}

.button_frame .name_place.dial_button_selected
{
    background: linear-gradient(135deg, var(--neu-ctl-dark),  var(--neu-ctl-light));
    color: white;
    text-shadow: 0px 0px 3px black;
}

.inner_frame
{
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    width: calc(100% - 27px);
    height: calc(100% - 27px);
    border-radius: calc(1/2*(100%));
    border: 1px solid rgba(100, 100, 10, 1);
    background:  linear-gradient(135deg, var(--neu-ctl-light), var(--neu-ctl-dark));
}

.name_place_frame
{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.dial_markers
{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.dial_shortcut
{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 8px;
    font-size: 10px;
    color: rgba(30, 30, 30, 1);
    text-shadow: 0px 0px 2px gray;
}

.name_place
{
    --name-place-size: 40px;
    --name-place-bg: rgba(0,0,0,0.1);
    width: calc(var(--name-place-size));
    height: calc(var(--name-place-size));
    border-radius: calc(1/2*var(--name-place-size));
    font-size: 13px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--name-place-bg);
}

.control_dot
{
    width: var(--dial-dot-diam);
    height: var(--dial-dot-diam);
    background:  linear-gradient(135deg, rgba(60, 5, 5, 1), var(--neu-gd-light));
    border-radius: calc(1/2*var(--dial-dot-diam));
    box-shadow: -1px -1px 2px 2px rgba(50, 50, 50, 1), 1px 1px 2px 2px white;
}

.swing_arm
{
    width: 86%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transform: rotate(0deg);
    
}