:root {
    --webhelper-blue: #007bff;
    --webhelper-dark-gray: rgb(34, 34, 34);
    --webhelper-white: rgb(255, 255, 255);
    --thammit-red: rgb(184, 15, 34);
}

#openModalBtn {
    right: 0.625rem;
    bottom: 0.625rem;
    position: fixed;
    z-index: 1030;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 3.75rem;
    height: 3.75rem;
    font-size: 175%;

    border: none;
    -webkit-appearance: none;

    color: var(--webhelper-white);
    background-color: var(--webhelper-blue);

    filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.15));
    line-height: 1;

    border-radius: 50%;
    overflow: clip;
    cursor: pointer;
}
#openModalBtn:focus,
#openModalBtn:hover {
    background: var(--thammit-red);
    img {
        filter: invert(1);
    }
}

#thammWebhelperModal {
    display: none;
    position: fixed;
    bottom: 0;
    right: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 9999;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    max-height: 100%;
    overflow-y: scroll;
    box-shadow: 0 13px 27px -5px rgba(3, 6, 9, 0.26);
    .modal-content {
        background: rgb(245, 245, 245);
        color: var(--webhelper-dark-gray);
        padding: 32px 16px;
        min-width: 300px;
        position: relative;
        display: block;
    }
    #closeModalBtn {
        margin-top: 16px;
        padding: 8px 16px;
        position: absolute;
        top: -16px;
        right: 8px;
        color: var(--webhelper-dark-gray);
        font-weight: bold;
        width: 40px;
        height: 40px;
        text-align: center;
        border: none;
        border-radius: 8px;
        font-size: 32px;
        background-color: transparent;
    }
    .btn {
        width: 100%;
    }
    .btn.disabled {
        background-color: #ccc !important;
        color: #666 !important;
        cursor: not-allowed !important;
    }
    .thamm-webhelper.btn {
        font-weight: bold;
        font-size: 16px !important;
        padding: 8px 16px !important;
        /* margin: 2px !important; */
        /* border: 1px solid #000000; */
        text-align: left;
        border-radius: 6px;
        text-transform: initial;
        background-color: transparent;
        .bi {
            float: right;
            font-size: 200%;
            margin-top: -10px;
            margin-bottom: -10px;
        }
    }
    .thamm-webhelper-wrapper {
        background-color: var(--webhelper-white);
        border: 1px solid var(--webhelper-dark-gray);
        display: inline-block;
        border-radius: 6px;
        width: 100%;
        margin-bottom: 8px;
        .visualrangerwrapper {
            padding: 0 16px !important;
        }
    }
    .thamm-webhelper-wrapper:focus,
    .thamm-webhelper-wrapper:focus-within,
    .thamm-webhelper-wrapper:hover {
        border: 1px solid var(--webhelper-blue);
        box-shadow: inset 0px 0px 0 1px var(--webhelper-blue);
    }
    .visualranger {
        width: 100%;
        padding: 10px 0;
    }

    p,
    a,
    button,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: "Open Sans - Regular", Open Sans, sans-serif !important;
    }
    h2 {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 8px;
    }
    h3 {
        font-size: 19px;
        font-weight: bold;
        padding-top: 30px;
        padding-bottom: 20px;
        i {
            border: 1px solid var(--webhelper-dark-gray);
            border-radius: 6px;

            padding: 2px 5px;
            margin-right: 10px;
        }
    }
    p {
        margin-bottom: 0;
    }

    .fontsizewrapper,
    .lineheightwrapper {
        display: none;
    }
    #fontsize.activated ~ .fontsizewrapper {
        display: block;
    }
    #lineheight.activated ~ .lineheightwrapper {
        display: block;
    }
    .visualrangerwrapper {
        display: none;
    }
    .visualmode.activated ~ .visualrangerwrapper {
        display: block;
    }

    .ti-float-right {
        float: right;
    }
    .thamm-webhelper-wrapper.resetwrapper {
        margin-top: 25px;
        background-color: var(--webhelper-dark-gray);
        color: var(--webhelper-white);
        .thamm-webhelper.btn {
            color: var(--webhelper-white);
            background-color: var(--webhelper-dark-gray);
            text-align: center;
        }
    }
}
@media only screen and (min-width: 500px) {
    #thammWebhelperModal {
        max-height: 80%;
        bottom: 50px;
        right: 16px;
        left: unset;
        top: unset;
        width: 400px;
        border-radius: 8px;
    }
}

p.thamm-webhelper {
    margin-bottom: 16px;
}
.thamm-webhelper.activated {
    /* background-color: #007bff !important; */
    /* color: #fff !important; */
}
body.easyfont
    :not(.icon):not(.fas):not(.fab):not(.far):not(.fa):not(.glyphicon):not(
        .material-icons
    ):not(.ab-icon):not(.mkdf-icon-font-elegant):not(style):not(script):not(
        meta
    ):not(i) {
    font-family: "Open Sans - Regular", Open Sans, sans-serif !important;
}

body.dyslexicfont
    :not(.icon):not(.fas):not(.fab):not(.far):not(.fa):not(.glyphicon):not(
        .material-icons
    ):not(.ab-icon):not(.mkdf-icon-font-elegant):not(style):not(script):not(
        meta
    ):not(i) {
    font-family: OpenDyslexic, sans-serif !important;
}
body.highlightLinks a {
    border: 2px solid var(--webhelper-blue) !important;
}
body.highlightHeadlines {
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .h1,
    .h2,
    .h3,
    .h4,
    .h5,
    .h6 {
        border: 2px solid var(--webhelper-blue) !important;
    }
}
.sprachausgabe p,
.sprachausgabe a,
.sprachausgabe .btn,
.sprachausgabe h1,
.sprachausgabe h2,
.sprachausgabe h3,
.sprachausgabe h4,
.sprachausgabe h5,
.sprachausgabe h6 {
    transition: all 0.5s ease;
    transition-delay: 500ms;
    outline: transparent 5px solid !important;
}
.sprachausgabe p:hover,
.sprachausgabe a:hover,
.sprachausgabe .btn:hover,
.sprachausgabe h1:hover,
.sprachausgabe h2:hover,
.sprachausgabe h3:hover,
.sprachausgabe h4:hover,
.sprachausgabe h5:hover,
.sprachausgabe h6:hover {
    outline: var(--webhelper-blue) 5px solid !important;
}
