:root{
    --ButtonPadding: 0.5em;
    --ButtonIconSize: calc(var(--naviSize) / 2.5);
}

.button {
    background: none;
    border: 0px solid transparent;
    border-radius: 2em;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    color: rgb(var(--colUIText03));
    padding: 0.7em;
    position: relative;
    transition: background-color 0.1s, border-color 0.1s;
}

.noTouch .button:hover{
    background-color: rgba(var(--colBG),0.7);

}

.button:active{
    background-color: rgba(var(--colUIText04),0.7) !important;
    border-color: rgba(var(--colUIText04), 0.7) !important;
}

.entry.button {
    padding: 0px;
    width: 100%;
    flex-wrap: nowrap;
}

    .button.button--pasteAnything,
    .button.button--addAnything{
        position: relative;
    }

    .button.button--addAnything::before{
        content: "+";
        position: absolute;
        top: 0px;
        right: 0.3em;
    }

    .button.button--pasteAnything::before{
        content: "🠗";
        position: absolute;
        font-size: 1.3em;
        top: 0px;
        right: 0px;
    }

    .button.button--normal{
        padding: 0.5em 0.5em 0.5em 0.75em;
        margin: 0.25em 0px;
        width: 100%;
        justify-content: left;
        height: fit-content;
    }

    .button.button--silent{
        align-items: center;
        justify-content: left;
        padding-left: 0px;
        }

    .noTouch .button.button--silent:hover {
        background: none !important;
        border-color: transparent;
    }

    .button--simple{
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0.125em;
        border-radius: 2em;
        padding: var(--ButtonPadding);
        height: fit-content;
        width: fit-content;
    }

    .button.button--centered{
        justify-content: center;
    }

    .noTouch .button.button--normal:hover,
    .noTouch .button.button--simple:hover,
    .noTouch .button.button--silent:hover>.button--simple{
        background-color: rgb(var(--colUIBack04));
        border-color: rgb(var(--colUIBack04));
    }

        .noTouch .button.button--active:not(.button.button--special):hover{
            background-color: rgb(var(--colUIText01));
            border-color: rgb(var(--colUIText01));
        }

    .button.button--accent:not(.inactive){
        background-color: rgb(var(--colAccent01));
        border-color: rgb(var(--colAccent01));
        color: rgb(255,255,255);
    }

        .noTouch .button.button--accent:hover{
            background-color: rgba(var(--colAccent01));
            border-color: rgb(var(--colAccent01));
            filter: brightness(1.2) saturate(0.9);
            color: rgb(255,255,255);
        }

        .button.button--accent>.button__icon{
            stroke: rgb(255,255,255);
        }

        /* ---- this is for save warning only ---- */
    .button.button--highlight:after{
        content: "";
        width: 0.5em;
        height: 0.5em;
        background-color: rgb(var(--colAccent01));
        border-radius: 0.5em;
        margin-left: 0.25em;
        transform: translateY(-0.5em);
    }


    .button.button--grey{
        background-color: rgb(var(--colUIBack02));
        border-color: rgb(var(--colUIBack02));
        color: rgb(var(--colUIText02));
    }
        .noTouch .button.button--grey:hover {
            background: rgba(var(--colUIBack02),0.6);
            border-color: rgba(var(--colUIBack02),0.6);
        }

        .button.button--grey>svg{
            stroke: rgb(var(--colUIText02));
        }

    .button.button--green{
        background-color: rgb(var(--colPro01));
        border-color: rgb(var(--colPro01));
        color: rgb(240,240,240);
    }
        .noTouch .button.button--green:hover, .button.button--green.focus{
            background-color: rgba(var(--colPro01),0.6);
        }

    .button.button--red{
        background-color: rgb(var(--colContra01));
        border-color: rgb(var(--colContra01));
        color: rgb(240,240,240);
    }
        .noTouch .button.button--red:hover, .button.button--red.focus{
            background-color: rgba(var(--colContra01),0.6);
        }

    .button.button--yellow{
        background-color: rgb(var(--colAttention01));
        border-color: rgb(var(--colAttention01));
        color: rgb(var(--colUIBack05));
        font-weight: 400;
    }
        .noTouch .button.button--yellow:hover, .button.button--yellow.focus{
            background-color: rgba(var(--colAttention01),0.6);
        }

    .button.button--dark{
        background-color: rgb(var(--colUIBack04));
    }
    .noTouch .button.button--dark:hover{
        background-color: rgba(var(--colUIBack04),0.6);
    }

    .button.button--bordered{
        border: 1px solid rgb(var(--colUIText03));
    }
        .noTouch .button.button--bordered:hover{
            background-color: rgba(var(--colUIText03),0.2);
            border-color: rgb(var(--colUIText03));
            color: rgb(var(--colUIText01));
        }
            .noTouch .button.button--bordered:hover svg{
                stroke: rgb(var(--colUIText01));
            }


    .button.button--spaced{
        margin: 0.3em;
        flex-grow: 1;
    }

    .button.button--wide{
        flex-grow: 1;
    }

    .button.button--full{
        width: 100%;
    }

    .button.button--small{
        padding: 0.5em;
        border: none;
        width: 2em;
        height: 2em;
    }

    .button.button--table{
        padding: 0px 0.2em;
    }

    .button__tab{
        margin-top: 0.25em;
        margin-bottom: -1.5em;
        font-weight: 300;
        font-size: 0.9em;
        padding: 0.4em 0.6em;
        background: rgb(var(--colUIBack03));
        border-right: 1px dotted rgba(var(--colUIBack05),0.5);
        border-radius:  0em 0em 0.45em 0.45em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        justify-content: flex-start;
        }

        /* .button__tab>*{
            margin-right: 0.5em;
        } */

        .button__tab--bottom{
            margin-top: -1.5em;
            margin-bottom: 0.25em;
            border-radius: 0.45em 0.45em 0em 0em;
            }

        .noTouch .button__tab:hover{
            background: rgb(var(--colUIBack02));
            margin-top: 0em;
            margin-bottom: -1.75em;
            transition: margin 0.1s ease;
            overflow: visible;
            }

        .noTouch .button__tab.button__tab--bottom:hover{
            margin-top: -1.75em;
            margin-bottom: 0em;
            }

        .button__tab.button__tab--active,
        .noTouch .button__tab.button__tab--active:hover{
            background: rgb(var(--colAccent01));
            color: rgb(var(--colUIText05));
            transition: color,background 0.1s ease;
            -webkit-box-shadow: 1px 3px 3px rgb(0 0 0 / 60%);
            -moz-box-shadow: 1px 3px 3px rgb(0 0 0 / 60%);
            box-shadow: 1px 3px 3px rgb(0 0 0 / 60%);
            margin-top: 0em;
            margin-bottom: -1.75em;
            z-index: 2;
            overflow: visible;
            cursor: pointer;
            }

            .button__tab.button__tab--bottom.button__tab--active,
            .noTouch .button__tab.button__tab--bottom.button__tab--bottom:hover,
            .noTouch .button__tab.button__tab--bottombutton__tab--active:hover{
                margin-top: -1.75em;
                margin-bottom: 0em;
            }


    .button--active,
    .button--waiting,
    .noTouch .button.button--silent:hover>.button--simple.button--active{
        background-color: rgb(var(--colUIText03));
        color: rgb(var(--colUIText04));
    }

        .button.button--active>.button__icon>.UIcolorWeak{
            stroke: rgba(var(--colUIText04),0.6);
        }

    .noTouch .button.button--activeDeaf,
    .noTouch .button.button--activeDeaf:hover{
        background-color: rgb(var(--colUIText03));
        color: rgb(var(--colUIText04));
        pointer-events: none;
    }

    .button.button--activeDouble{
         background-color: rgba(var(--colUIText03),0.2);
        -webkit-box-shadow: inset -3px 0px 0px 0px rgb(var(--colUIText03));
        -moz-box-shadow: inset -3px 0px 0px 0px rgb(var(--colUIText03));
        box-shadow: inset -3px 0px 0px 0px rgb(var(--colUIText03));
        -webkit-box-shadow: inset -3px 0px 0px 0px rgb(var(--colUIText03));
        -moz-box-shadow: inset -3px 0px 0px 0px rgb(var(--colUIText03));
        box-shadow: inset -3px 0px 0px 0px rgb(var(--colUIText03));
    }

    .button--mirrorHor{
        transform: scaleX(-1);
    }

    .button--mirrorVert{
        transform: scaleY(-1);
    }

    #beweislast.button>.SVGIcon{
        transition: transform 0.2s ;
    }

    .noTouch #beweislast.button:hover>.SVGIcon{
        transform: scaleX(-1);
    }

    .button.button--waiting{
        animation: buttonWaiting 1s infinite;
    }

        @keyframes buttonWaiting {
            0%   { background-color: rgba(var(--colUIText03),0.5) }
            50%   { background-color: rgba(var(--colUIText03),1.0) }
            100%   { background-color: rgba(var(--colUIText03),0.5) }
        }

    .button__icon{
        background-color: transparent;
        height: var(--ButtonIconSize);
        width: var(--ButtonIconSize);
        flex-shrink: 0;
    }

    .button--active>.button__icon>svg,
    .button--waiting>.button__icon>svg,
    .button--active>.button__icon,
    .button--waiting>.button__icon {
        stroke: rgb(var(--colUIText04));
    }

    .button--attention,
    .noTouch .button--attention:hover{
        stroke: rgb(var(--colUIText02));
        color: rgb(var(--colUIText02));
    }

    .button__mainMenu {
        aspect-ratio: 1;
    }

    .button__mainMenu,
    .button--normal{
        margin: 0.38em 0px;
    }

    /* .button__mainMenu.button--active{
        -webkit-box-shadow: 3px 1px 3px rgba(var(--boxShadow));
        -moz-box-shadow: 3px 1px 3px rgba(var(--boxShadow));
        box-shadow: 3px 1px 3px rgba(var(--boxShadow));
        -webkit-box-shadow: 3px 1px 3px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 3px 1px 3px rgba(0, 0, 0, 0.4);
        box-shadow: 3px 1px 3px rgba(0, 0, 0, 0.4);
    } */

    .button--onBG:hover{
        filter: contrast(110%);
    }


    .button__sideBar{
        flex-grow: 1;
        transition: opacity 0.1s 0.1s linear;
        margin: 0.25em 0.5em;
        padding: 0px;
        border-radius: 2em;
        border-width: 0px;
    }

        .button__sideBar>svg{
            height: var(--ButtonIconSize);
            width: var(--ButtonIconSize);
            flex-grow: 1;
            z-index: 5;
        }


    .button__sideBar--focus,
    .noTouch .button__sideBar--focus:hover{
        -webkit-box-shadow: 3px 1px 3px rgba(var(--boxShadow));
        -moz-box-shadow: 3px 1px 3px rgba(var(--boxShadow));
        box-shadow: 3px 1px 3px rgba(var(--boxShadow));
        -webkit-box-shadow: 3px 1px 3px rgba(0,0,0,0.4);
        -moz-box-shadow: 3px 1px 3px rgba(0,0,0,0.4);
        box-shadow: 3px 1px 3px rgba(0,0,0,0.4);
        background-color: rgb(var(--colUIBack03));
        margin: 0.25em 0.5em 0.25em 0px;
        border-radius: 0px 2em 2em 0px;
    }

    .button__sideBar--focus{
        animation: sideBarButtonSwitch 1s ease-out 0s 1;
    }

    .button__sideBar--focus>svg{
        stroke: rgb(var(--colOpener));
        margin-left: -0.2em;
    }

    .button__sideBar--focus::before{
        --arrowSize: calc(var(--lineHeight) * 0.2375em);
        content: "";
        width: 0px;
        height: 0px;
        border: 0px solid transparent;
        border-top: var(--arrowSize) solid rgb(var(--colOpener));
        border-left: var(--arrowSize) solid transparent;
        border-right: var(--arrowSize) solid transparent;
        transform: rotate(90deg);
    }

    @supports (-webkit-touch-callout: none){
        .button__sideBar--focus,
        .noTouch .button__sideBar--focus:hover{
            -webkit-box-shadow: 3px 1px 3px rgba(0,0,0,0.4);
            -moz-box-shadow: 3px 1px 3px rgba(0,0,0,0.4);
            box-shadow: 3px 1px 3px rgba(0,0,0,0.4);
        }
    }

    @keyframes sideBarButtonSwitch {
        0%   {box-shadow: inset -3px 0px 0px 0px rgba(var(--colUIText02),0), 3px 1px 3px rgba(0,0,0,0.4);}
        50%   {box-shadow: inset -3px 0px 0px 0px rgba(var(--colUIText02),1), 3px 1px 3px rgba(0,0,0,0.4);}
        100%   {box-shadow: inset -3px 0px 0px 0px rgba(var(--colUIText02),0), 3px 1px 3px rgba(0,0,0,0.4);}
    }

    .button__sideBar--highlight{
        -webkit-box-shadow: 5px 0px 0px 0px rgb(var(--colAccent01));
        -moz-box-shadow: 5px 0px 0px 0px rgb(var(--colAccent01));
        box-shadow: 5px 0px 0px 0px rgb(var(--colAccent01));
    }

    .button__sideBar--focus.button__sideBar--highlight{
        -webkit-box-shadow: inset -3px 0px 0px 0px rgb(var(--colAccent01)), 3px 0px 3px rgb(0 0 0 / 40%);
        -moz-box-shadow: inset -3px 0px 0px 0px rgb(var(--colAccent01)), 3px 0px 3px rgb(0 0 0 / 40%);
        box-shadow: inset -3px 0px 0px 0px rgb(var(--colAccent01)), 3px 0px 3px rgb(0 0 0 / 40%);
    }


    .button__sideBar--highlightAnimated{
        -webkit-box-shadow: 5px 0px 0px 0px rgb(var(--colAccent01));
        -moz-box-shadow: 5px 0px 0px 0px rgb(var(--colAccent01));
        box-shadow: 5px 0px 0px 0px rgb(var(--colAccent01));
        -webkit-animation: sideBarButtonAlert 4s ease infinite;
        -moz-animation: sideBarButtonAlert 4s ease infinite;
        animation: sideBarButtonAlert 4s ease infinite;
    }

   @keyframes sideBarButtonAlert {
            0%   {box-shadow: 5px 0px 0px 0px rgba(var(--colAccent01),0);}
            50%   {box-shadow: 5px 0px 0px 0px rgba(var(--colAccent01),1);}
            100%   {box-shadow: 5px 0px 0px 0px rgba(var(--colAccent01),0);}
        }

    .button__subTab{
        padding: unset;
        border: none;
    }

        .button__subTab--active{
            color: rgb(var(--colAccent01));
        }

    .button__subTab--inactive{
        pointer-events: none;
    }







.contentUI{
    display: flex;
    position: relative;
    height: 100%;
    width: 100%;
    pointer-events: none;
}

.contentUI__bg{
    display: flex;
    position: absolute;
    flex-direction: column-reverse;
    justify-content: space-evenly;
    padding: 0.5em;
    top: 0px;
    background-color: rgba(var(--colBG),0.7);
    border-radius: 0px 0px 2em 0px;
}

.contentUI__back{
    top: 0px;
    left: 0px;
    border-radius: 0px 0px 2em 0px;
}

.contentUI__TAMap{
    top: 0px;
    right: 0px;
    border-radius: 0px 0px 0px 2em;
}

.contentUI__zoom{
    height: 10.6em;
    padding: 0px 0.5em;
    top: calc(50% - 5.3em);
    border-radius: 0px 2em 2em 0px;
}

.contentUI__focus{
    top: unset;
    bottom: 0px;
    border-radius: 0px 2em 0px 0px;
}

.contentUI__help{
    right: 0px;
    top: unset;
    bottom: 0px;
    border-radius: 2em 0px 0px 0px;
}

.contentUI__quickSave{
    right: 50%;
    top: unset;
    bottom: 0.3em;
    transform: translateX(50%);
    border-radius: 0.75em;
}


    .contentUI__button{
        display: flex;
        align-items: center;
        justify-content: center;
        width: fit-content;
        padding: var(--ButtonPadding);
        cursor: pointer;
        align-items: center;
        pointer-events: all;
        -webkit-touch-callout: none;
    }

        .noTouch .contentUI__button:hover{
            background-color: rgb(var(--colUIBack03));
        }

        .contentUI__button:active>.contentUI__icon{
            stroke: rgb(var(--colUIText01));
            -webkit-filter: drop-shadow(0 0 2px rgb(var(--colUIText01),1));
            filter: drop-shadow( 0 0 0.3em rgb(var(--colUIText01),1));
        }

        .fadeOut>.contentUI__button{
            pointer-events: none;
        }

        .fadeOut>.contentUI__button{
            pointer-events: none;
        }

    .contentUI__icon{
        visibility: visible;
        height: var(--ButtonIconSize);
        width: var(--ButtonIconSize);
        flex-shrink: 0;
        flex-shrink: 0;
        opacity: 1;
        transition: opacity 1s;
        --strokeWidth: 0.03em;
        fill: none;
        -webkit-touch-callout:none;
        stroke: rgb(var(--colUIText03));
        -moz-stroke: rgb(var(--colUIText03));
        stroke-width: var(--strokeWidth);
        -moz-stroke-width: var(--strokeWidth);
        stroke-linecap: round;
        -moz-stroke-linecap: round;
        stroke-linejoin: round;
        -moz-stroke-linejoin: round;
        border-radius: 0.25em;
    }

    .contentUI__button>span{
        font-size: 0.9em;
        white-space: nowrap;
        letter-spacing: 1px;
        padding: 0px 0.5em;
    }