:root {
    --wcag-btn-bg: white;
    --wcag-btn-bg-hover: white;
    --wcag-btn-bg-checked: #868686;
    --wcag-btn-bg-checked: #6a8caf;
    --wcag-btn-bg-checked: #60a9a6;

    --wcag-btn-txt: black;
    --wcag-btn-txt-hover: black;


    --wcag-bxsh-normal: inset 0px 0px 0px 2px transparent;
    --wcag-bxsh-hover: inset 0px 0px 0px 2px #1a1a1a;
    --wcag-bxsh-current: inset 0px 0px 0px 2px var(--wcag-btn-bg-checked);

}

.wcag_container {
    font-family: 'Lato', 'Montserrat', sans-serif;

    display: flex;
    flex-direction: row;
    flex-grow: 1;
    align-self: flex-start;
    justify-content: flex-end;

    margin-top: 16px;
    height: auto;

    padding-right: var(--menu-buttons-div-padding-right);
}

.wcag_button {
    transition: box-shadow 0.3s linear;

    color: var(--wcag-btn-txt);
    background-color: var(--wcag-btn-bg);
    __box-shadow: inset 0px 0px 0px 2px transparent;
    box-shadow: var(--wcag-bxsh-normal);

    box-sizing: border-box;

    border: 2px solid white;
    border-radius: 2px;

    padding: 4px;
    padding-left: 8px;
    padding-right: 8px;

    margin-left: 4px;
    min-width: 46px;

    text-decoration: none;
    text-align: center;
    font-weight: bold;
}

.wcag_button:hover {
    color: var(--wcag-btn-txt-hover);
    background-color: var(--wcag-btn-bg-hover);
    __box-shadow: inset 0px 0px 0px 2px #1a1a1a;
    box-shadow: var(--wcag-bxsh-hover);
}

.wcag_container a.crr_btn {
    color: white;
    background-color: var(--wcag-btn-bg-checked);
    __box-shadow: inset 0px 0px 0px 2px var(--wcag-btn-bg-checked);
    box-shadow: var(--wcag-bxsh-current);
}