#accessibility_open{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #660000;
    color: #fff;
    position: fixed;
    left: 0;
    top: 70px;
    z-index: 99999;
    padding:  1rem 1rem 1rem 0.5rem;
    border-top-right-radius: 3rem;
    border-bottom-right-radius: 3rem;
}

#accessibility_open:hover{
   background-color: #6f305f;
}

#accessibility_open svg{
    width: 2.5rem;
    height: 2.5rem;
}


@media screen and (max-width: 498px){
    #accessibility_open{
        top:45px;
    }
}

/*-------------------------------------------------------*/

.hidden{
    display: none;
}
#accessibility{
    position: fixed;
    left: 0;
    top: 0;
    width: 300px;
    background-color: var(--acc-bg);
    color: var(--acc-text);
    z-index: 999999;
    border-bottom-right-radius: .7rem;
    border-bottom-left-radius: .7rem;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.7), 0 4px 6px -4px rgba(0,0,0,0.7);

}

#accessibility a{
    color: var(--acc-text);
    font-weight: normal;
}

#accessibility a:focus,
#accessibility a:hover{
    color: var(--acc-hover);
}


.flex-1{
   flex: 1 1 0%;
}
.text-center{
   text-align: center;
}
#accessibility .title{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 36px;
    background-color: var(--acc-title);

}

#accessibility .line .icon,
#accessibility .accessibility_close{
    width: 24px;
    height: 24px;
    align-items: center;
    display: flex;
    justify-content: center;

}

#accessibility .line{
    direction: rtl;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 2rem;
    height: 24px;
    border-top: solid 1px #CCC;
}

#accessibility .textsize{
    display: flex;
}

#accessibility .textsize a{
    display: flex;
    width:30px;
    height:30px;
    align-items: center;
    justify-content: center;
    border: 1px #ccc solid;
    border-radius: 9999px;
    font-weight: bold;
}

/* ----------- Action ------------- */

.open-access{
    animation: openAcss 1s both;
}
.close-access{
    animation: closeAcss 1s both;
}

@keyframes openAcss {
    from {
        display: block;
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes closeAcss {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }
}