.button_slide_bot,
.button_slide_top,
.button_fixed_center,
.button_slide_bot_active,
.button_slide_top_active,
.button_fixed_center_active
{
    --separator-width: var(--bf-border-width, 6px);
    --separator-color:  var(--bf-border-color, rgba(110, 25, 0, 1));
    --shadow-light: rgba(230, 140, 0, 1);
    --shadow-dark:  rgba(160, 55, 0, 1);
    --bg-color:  rgba(195, 85, 1, 1);
    --text-color:  rgba(200, 220, 255, 1);
    --active-text-color: white;
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    text-align: center;
    font-family: Montserrat, arial;
    color: var(--text-color);
    font-size: 10px;
    font-weight: bold;
    width: 100%;
    height: 100%;
    border-radius: 0px;
    background: var(--bg-color);
    z-index: 100;
}    

.button_slide_bot,
.button_slide_top,
.button_fixed_center
{
    box-shadow: -2px -2px 4px var(--shadow-dark) inset, 1px 1px 3px var(--shadow-light) inset;
}

.button_slide_bot_active,
.button_slide_top_active,
.button_fixed_center_active
{
    color: var(--active-text-color);
    box-shadow: 2px 2px 4px var(--shadow-dark) inset, -1px -1px 3px var(--shadow-light) inset;
}

.button_slide_bot:hover,
.button_slide_top:hover,
.button_fixed_center:hover
{
    cursor: grab;
}

.button_slide_bot_active:hover,
.button_slide_top_active:hover,
.button_fixed_center_active:hover
{
    cursor: grabbing;
}

.button_slide_bot,
.button_slide_bot_active
{
    border-top: var(--separator-width) solid var(--separator-color);
}

.button_slide_top,
.button_slide_top_active
{
    border-bottom: var(--separator-width) solid var(--separator-color);
}

.button_fixed_center,
.button_fixed_center_active
{

    border: var(--wn-border-width) solid var(--separator-color);
    border-radius: 6px;

}

.card_display_window,
.trick_display_window
{
    position: absolute;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    border: var(--wn-border-width, 3px) solid var(--bf-border-color, rgba(110, 25, 0, 1));
    border-radius: var(--wn-border-width, 3px);
    z-index: 100;
}

.trick_display_window
{
    height: calc(100% + var(--wn-border-width, 3px));
    top: calc(0px - 1/2*var(--wn-border-width, 3px));
}

/* order window on the card wheel */

.pf_lens_button,
.pf_lens_button_active,
.pf_lens_button_dead
{
    --shadow-dark: rgba(60, 60, 30, 1);
    --shadow-light: white;
    position: absolute;
    height: 100%;
    width: 100%;
    cursor: grab;
    z-index: 100;
}

.pf_lens_button
{
    box-shadow: -1px -1px 5px 1px var(--shadow-dark) inset, 1px 1px 1px 1px var(--shadow-light) inset, 2px 2px 5px var(--shadow-dark) inset;
    background: rgba(0, 0, 0, .1);

}

.pf_lens_button_active
{
    box-shadow: 2px 2px 2px 1px var(--shadow-dark) inset, -1px -1px 2px 3px var(--shadow-light) inset;
    background: rgba(0, 0, 0, .2);
    cursor: grabbing;
}

.pf_lens_button_dead
{
    box-shadow: 2px 2px 4px var(--shadow-dark) inset, -1px -1px 3px var(--shadow-light) inset;
    background: rgba(0, 0, 0, .1);
}


/* general `neumorphic' buttons */

.neumorphic_round:hover
{
    border: var(--neu-round-bd-width) solid var(--neu-border-focused);
}

.neumorphic_round:active
{
    background: linear-gradient(135deg, var(--neu-gd-dark), var(--neu-gd-light));
    border: var(--neu-round-bd-width) solid var(--neu-border-active);
    color: white;
    text-shadow: 0px 0px 3px 3px var(--neu-bg-dark);
    text-shadow: 0px 0px 3px 3px  black;
}

.neumorphic_round
{
    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: visible;
    opacity: 1;
    transform: translate(0,0);
    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.reddish_tint
{
    --neu-gd-dark: rgba(190, 40, 10, 1);
    --neu-gd-light: rgba(250, 250, 250, 1);
}

.neumorphic_round.greenish_tint
{
    --neu-gd-dark: rgba(50, 100, 0, 1);
    --neu-gd-light: rgba(250, 250, 250, 1);
}

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

.control_dormant.neumorphic_round:hover,
.control_dormant.neumorphic_round:active
{
    border: var(--neu-round-bd-width) solid var(--neu-border-dormant);
}

.control_dormant.neumorphic_round:active
{
    background: linear-gradient(135deg, var(--neu-bg-light), var(--neu-bg-dark));
    color: var(--neu-text-color);
    text-shadow: initial;
}

.disable_control.neumorphic_round
{
    visibility: hidden;
    transform: scale(0.1);
    opacity: 0;
}

.remove_control.neumorphic_round
{
    display: none;
}