/*CSS for the Eye-Able quick access buttons*/
    .eyeAbleButton {
        width: 70px;
        height: 70px;
        position: fixed;
        z-index: 9999;
        filter: drop-shadow(2px 2px 3px darkgrey);
    }

    .eyeAbleButton:focus {
        outline: 3px solid black;
    }

    /*
    Control the positions of the icons using the following parameters
     */
    #eA_fontsize {
        bottom: 115px;
        left: 30px;
    }

    #eA_contrast {
        bottom: 195px;
        left: 30px;
    }

    #eA_screenreader {
        bottom: 275px;
        left: 30px;
    }

    /*
    Remove this to prevent the change of directions for smaller viewports
     */
    @media only screen and (max-width: 1460px) and (min-width: 800px) {
        #eA_fontsize {
            bottom: 115px;
            left: 30px;
        }

        #eA_contrast {
            bottom: 115px;
            left: 110px;
        }

        #eA_screenreader {
            bottom: 115px;
            left: 190px;
        }
    }

    @media only screen and (max-width: 800px) {
        #eyeAble_onSiteButtons {
            display: none !important;
        }
    }

    /*Icon active styling - keep it black and white*/
    .onSiteButton_Active > .stEyeAble0 {
        stroke: black;
        stroke-miterlimit: 10;
        fill: white;
    }
    .onSiteButton_Active > .stEyeAble1 {
        fill: black;
    }

    /*Icon border*/
    .stEyeAble0 {
        stroke: white;
        stroke-miterlimit: 10;
        fill: black; /*Change color here!*/
    }
    /*Icon center*/
    .stEyeAble1 {
        fill: white;
    }