/*
 * Accessibility button (core plg_system_accessibility / ranbuch "accessibility" library).
 * The library writes size, colours and position as inline styles and skews the icon (skewX(18deg)),
 * so !important is needed to override them.
 */

/* Position: fixed top-right, like the live J3 site (negishim.com widget), 25px lower so it clears the logo */
._access-icon {
    top: 105px !important;
    right: 20px !important;
    bottom: auto !important;
    left: auto !important;
}

/* Icon: Font Awesome 4.7 fa-universal-access (template css/font-awesome.min.css) instead of the library's ♿ emoji */
._access-icon {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50%;
    background-color: rgb(0, 82, 133) !important;
    color: #fff !important;
    font-size: 0 !important; /* hides the emoji text node */
    line-height: 50px !important;
    text-indent: 0 !important;
    text-align: center;
    transform: none !important; /* the library's <style> is injected at runtime, after this file */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

._access-icon::before {
    content: "\f29a";
    font: normal normal normal 34px/50px FontAwesome;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

._access-icon:hover,
._access-icon:focus-visible {
    background-color: rgb(0, 62, 101) !important;
}