:root{
    --a11y-blue:#0A58CA;
    --a11y-bg:#DEE2E6;
    --a11y-hover:#F8F9FA;
    --a11y-active:#E9ECEF;
    --a11y-fontbtn:#6C757D;

    --a11y-w:248px;
    --a11y-handle-w:40px;
    --a11y-radius:8px;
    --a11y-shadow:0 10px 30px rgba(0,0,0,.18);
}

#a11yWidget{
    position:fixed !important;
    right:0 !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    z-index:999999 !important;
}

#a11yWidget *,
#a11yWidget *::before,
#a11yWidget *::after{
    box-sizing:border-box !important;
}

#a11yWidget img{ display:block !important; }

#a11yWidget button{
    appearance:none !important;
    -webkit-appearance:none !important;
    border:0 !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
    font:inherit !important;
    color:inherit !important;
    line-height:1 !important;
}

#a11yWidget .a11y-drawer{
    position:fixed !important;
    top:50% !important;
    transform:translateY(-50%) !important;

    width:var(--a11y-w) !important;
    background:var(--a11y-bg) !important;

    border-left:4px solid var(--a11y-blue) !important;
    border-radius:var(--a11y-radius) 0 0 var(--a11y-radius) !important;
    box-shadow:var(--a11y-shadow) !important;

    overflow:visible !important;
    transition:right 200ms ease !important;

    /* CLOSED: move entire drawer out (body not visible) */
    right: calc(-1 * var(--a11y-w)) !important;
}

#a11yWidget .a11y-drawer.is-open{
    right:0 !important;
}

#a11yWidget .a11y-tab{
    position:absolute !important;
    left: calc(-1 * var(--a11y-handle-w)) !important;

    top:50% !important;
    transform:translateY(-50%) !important;

    width:var(--a11y-handle-w) !important;
    height:var(--a11y-handle-w) !important;

    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    padding:0 !important;
    gap:0 !important;

    z-index:3 !important;
}

#a11yWidget .a11y-tab__icon{
    width:var(--a11y-handle-w) !important;
    height:var(--a11y-handle-w) !important;

    padding:6px !important;
    border-radius:10px !important;
    background:var(--a11y-blue) !important;

    box-sizing:border-box !important;
}

#a11yWidget .a11y-tab:focus{ outline:none !important; }
#a11yWidget .a11y-tab:focus-visible{
    outline:3px solid var(--a11y-blue) !important;
    outline-offset:2px !important;
}

#a11yWidget .a11y-body{
    padding:0 !important;
}

#a11yWidget .a11y-top.row{
    align-items:center;
    padding:10px !important;
    margin:0 !important;

    background:var(--a11y-bg) !important;
    border-bottom:none !important;
}

#a11yWidget .a11y-top-btn.group-1{
    display:flex !important;
    gap:12px !important;
}

#a11yWidget .a11y-top-btn.group-1 > button{
    flex:1 1 0 !important;
    min-width:0 !important;
}

#a11yWidget .a11y-top-btn.group-2{
    display:flex !important;
    justify-content:flex-end !important;
}

#a11yWidget #increase-font,
#a11yWidget #decrease-font,
#a11yWidget #default-font{
    height:56px !important;
    border-radius:10px !important;
    background:var(--a11y-fontbtn) !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    user-select:none !important;
}

#a11yWidget #default-font{
    width:100% !important;
}

#a11yWidget #increase-font img,
#a11yWidget #decrease-font img,
#a11yWidget #default-font img{
    width:22px !important;
    height:22px !important;
}

#a11yWidget #increase-font:hover,
#a11yWidget #decrease-font:hover,
#a11yWidget #default-font:hover{
    filter:brightness(0.95) !important;
}
#a11yWidget #increase-font:active,
#a11yWidget #decrease-font:active,
#a11yWidget #default-font:active{
    filter:brightness(0.90) !important;
}

#a11yWidget #increase-font:focus,
#a11yWidget #decrease-font:focus,
#a11yWidget #default-font:focus{
    outline:none !important;
}
#a11yWidget #increase-font:focus-visible,
#a11yWidget #decrease-font:focus-visible,
#a11yWidget #default-font:focus-visible{
    outline:3px solid var(--a11y-blue) !important;
    outline-offset:2px !important;
}

#a11yWidget .a11y-list{
    padding:10px !important;
    padding-top:0 !important;
    padding-bottom: 0 !important;
}

#a11yWidget .a11y-item{
    width:100% !important;
    display:flex !important;
    align-items:center !important;
    gap:10px !important;

    background:#fff !important;
    border:1px solid rgba(0,0,0,.10) !important;
    border-radius:8px !important;

    padding:8px !important;
    margin:0 0 10px 0 !important;

    text-align:left !important;
}

#a11yWidget .a11y-item:hover{
    background:var(--a11y-hover) !important;
}

#a11yWidget .a11y-item:active{
    background:var(--a11y-active) !important;
}

#a11yWidget .a11y-item[aria-pressed="true"]{
    background:var(--a11y-active) !important;
    border-color:rgba(0,0,0,.14) !important;
}

#a11yWidget .a11y-item img.dim25{
    width:44px !important;
    height:44px !important;
    padding:15px !important;
    border-radius:6px !important;
    background:var(--a11y-blue) !important;
    box-sizing:border-box !important;
    flex:0 0 auto !important;
}

#a11yWidget .a11y-item__label{
    font-size:14px !important;
    color:#111 !important;
}

#a11yWidget .a11y-item:focus{ outline:none !important; }
#a11yWidget .a11y-item:focus-visible{
    outline:3px solid var(--a11y-blue) !important;
    outline-offset:2px !important;
}

@media (prefers-reduced-motion: reduce){
    #a11yWidget .a11y-drawer{
        transition:none !important;
    }
}

/* Stop rotation on click (active / expanded states) for the handle icon */
#a11yWidget #a11yToggle,
#a11yWidget #a11yToggle:active,
#a11yWidget #a11yToggle[aria-expanded="true"],
#a11yWidget #a11yToggle img,
#a11yWidget #a11yToggle:active img,
#a11yWidget #a11yToggle[aria-expanded="true"] img{
    transform:none !important;
    animation:none !important;
}

#a11yWidget #a11yToggle img{
    transition-property:none !important;
}

#a11yWidget .a11y-top{
    display:flex !important;
    align-items:center !important;
    gap:6px !important;
    padding:4px !important;
    padding-top:6px !important;
    padding-bottom:6px !important;
    background:var(--a11y-bg) !important;
    border-bottom:1px solid rgba(0,0,0,.08) !important;
    border-radius:6px !important;
}

#a11yWidget .a11y-top-btn.group-1{
    display:flex !important;
    gap:6px !important;
    flex:1 1 auto !important;
}

#a11yWidget .a11y-top-btn.group-1 > button{
    flex:1 1 0 !important;
    min-width:0 !important;
}

#a11yWidget .a11y-top-btn.group-2{
    display:flex !important;
    justify-content:flex-end !important;
    flex:0 0 auto !important;
}

#a11yWidget #increase-font,
#a11yWidget #decrease-font,
#a11yWidget #default-font{
    height:40px !important;
    border-radius:4px !important;
    background:var(--a11y-fontbtn) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 !important;
}

#a11yWidget #default-font{
    width:40px !important;
    flex:0 0 40px !important;
}

#a11yWidget #increase-font img,
#a11yWidget #decrease-font img,
#a11yWidget #default-font img{
    width:18px !important;
    height:18px !important;
}

#a11yWidget #increase-font:hover,
#a11yWidget #decrease-font:hover,
#a11yWidget #default-font:hover{
    filter:brightness(0.95) !important;
}
#a11yWidget #increase-font:active,
#a11yWidget #decrease-font:active,
#a11yWidget #default-font:active{
    filter:brightness(0.90) !important;
}

#a11yWidget #increase-font:focus,
#a11yWidget #decrease-font:focus,
#a11yWidget #default-font:focus{
    outline:none !important;
}

#a11yWidget #increase-font:focus-visible,
#a11yWidget #decrease-font:focus-visible,
#a11yWidget #default-font:focus-visible{
    outline:3px solid var(--a11y-blue) !important;
    outline-offset:2px !important;
}

.a11y-highlight-links a[href]{
    background: #ff0 !important;
}

.a11y-show-headings h1,
.a11y-show-headings h2,
.a11y-show-headings h3,
.a11y-show-headings h4,
.a11y-show-headings h5,
.a11y-show-headings h6{
    outline: 3px dashed #000 !important;
    outline-offset: 4px !important;
    position: relative !important;
}

.a11y-btn-active,
.a11y-btn-active:focus,
.a11y-btn-active:active{
    outline: 2px solid #000;
}