#accessWrapper{
    position: fixed;
    left: -5px;
    z-index: 990000;
    top: 10px;
    width: auto;
    font-size: 12px;
    line-height: 20px;
    text-align: left;
    pointer-events: none;


    padding: 10px;
    border-radius: 10px;
    display: flex;
    flex-direction: row-reverse;
}  
:focus-visible, .contrasted .form-control:focus
{
    border: 1px dashed white !important;
    outline-offset: 2px !important;    
    outline: 2px solid black !important;
}
#accessWrapper button,#accessWrapper a{
    font-family: Arial;
}
.accessNone{
    display:none;
}
html.accessed .accessNone{
    display: flex;
}
.accessActive{
    border-width:2px;
}
.accessCert {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    /* width: 90% !important; */
    white-space: nowrap;
    width: max-content !important;
    padding: 5px 10px !important;
}
#accessWrapper.active{
    background: white;  
    border: 2px solid #f1f1f1;
}
#accessWrapper li{
    cursor:pointer;
    list-style:none;
    padding:0;
    margin:0 5px 5px;
    float:left;


}
#accessWrapper a,#accessWrapper li{
    pointer-events: initial;
}
#accessWrapper button:hover{
    background:black;
    color:white;
}
.accessIcon{
    display:inline-block;
    position:relative;
    left:0;top:0;
}
.accessIcon:focus{
    border-bottom: 2px solid black;
}
.accessIcon:focus i{
    transform: scale(1.1);
    
}
.accessList{
    align-items: center;
}
.accessList ul{
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
}

#accessPage{
    overflow-y:auto;
    padding:10px;
    width:60%;
    height:40%;
    max-width:700px;
    width:700px !important;
    max-height:500px;
}
#accessWrapper button{
    background: white;
    border: 1px solid gray;
    /* width: 70px; */
    border-radius: 5px;
    cursor: pointer;
    padding: 5px 10px;
    color: black;
}
html[data-contrast=high] #accessWrapper button {
    filter: invert(1);
}
html[data-contrast=low] #accessWrapper button{
    filter: invert(0);
}
#accessWrapper button.red{
    color: red;
    border: 1px solid red;
    background: #ff000014;
    font-weight: bold;
}

#accessWrapper .btn.active,#accessWrapper button.active,#accessWrapper button.red:hover{
    background-color: #28a745;;
}
.contrasted #accessWrapper .btn.active,.contrasted #accessWrapper button.active{
    background-color: #333;
    color:white;
}
.contrasted .accessCert{
   background: white;
    color: black; 
}
#accessWrapper li.sep{
    background-color:gray;
    height:2px;
    overflow:hidden;

}
body.contrasted .blueBg{
    background-color:white;
}
body.contrasted h1, body.contrasted h2, body.contrasted a{
    color:black;
}
html {
    -moz-transition: -moz-filter .5s ease;
    -o-transition: -o-filter .5s ease;
    -webkit-transition: -webkit-filter .5s ease;
    transition: -webkit-filter .5s ease;
}

html[data-contrast="low"] {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' ><filter id='gray'><feColorMatrix in='SourceGraphic' type='saturate' values='0' /></filter></svg>#gray");
}

html[data-contrast="high"] {
    -webkit-filter: invert(1);
    -moz-filter: invert(1);
    -o-filter: invert(1);
    -ms-filter: invert(1);
    filter: invert(1);
}


.updates-wrapper input:focus + label {
    outline: none;
    border: 2px solid #4D90FE;
    -webkit-box-shadow: 0px 0px 5px #4D90FE;
    -moz-box-shadow: 0px 0px 5px #4D90FE;
    box-shadow: 0px 0px 5px #4D90FE;
}
#skipToContent{
    position: fixed;
    top: -200px;
    left: -2px;
    background: black;
    color: white;
    border-bottom-right-radius: 10px;
    padding: 5px 10px;
    z-index: 999999999;
    border: 1px solid white;
    box-shadow: 0 0 6px 5px black;
    
}    
#skipToContent:focus,#skipToContent:focus,#skipToContent:hover{
   display:block !important; 
   top: -2px;
    left: -2px; 
}
.accessed a{
    text-decoration: underline;
}
.accessed a:focus,.accessed button:focus{
    outline : 2px solid #fff !important;
    border: 2px dashed #000 !important;
}
#skipToContent{
  color:white !important;  
  font-size:20px;
  animation: pulse2 2s;
}
@media (max-width: 768px){
    #accessPage{
        overflow-y:auto;
        padding:10px;
        width:100%;
        height:40%;
        max-width:700px;
        width:100% !important;
        max-height:500px;
    }
}