.annotate {
    font-style: italic;
    color: #366ed4;
}

.hidden {
    display: none !important;
}

[role="button"] {
    cursor: pointer;
}

    [role="button"]:focus,
    [role="button"] *:focus,
    [role="button"] [tabindex="0"]:focus {
        outline: #000000;
        outline-style: dotted;
        outline-width: 2px;
    }

[aria-sort="ascending"] {
    position: relative;
}

    [aria-sort="ascending"]::after {
        content: " ";
        border-bottom: 0.4em solid black;
        border-left: 0.4em solid transparent;
        border-right: 0.4em solid transparent;
        position: absolute;
        right: 1em;
        top: 0.8em;
    }

[aria-sort="descending"] {
    position: relative;
}

    [aria-sort="descending"]::after {
        content: " ";
        border-left: 0.4em solid transparent;
        border-right: 0.4em solid transparent;
        border-top: 0.4em solid black;
        position: absolute;
        right: 1em;
        top: 0.8em;
    }

.edit-text-button {
    display: block;
    position: relative;
    height: 30px;
    padding: 5px;
    background-color: white;
}

    .edit-text-button::after {
        background-image: url('../img/pencil-icon.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 40px;
        content: " ";
        height: 17px;
        opacity: 0.6;
        position: absolute;
        right: 3px;
        width: 20px;
    }

    .edit-text-button:hover,
    .edit-text-button:focus {
        color: black;
    }

        .edit-text-button:hover::after,
        .edit-text-button:focus::after {
            opacity: 1;
        }

.selected-textbox {
    user-select: all;
}

[role="gridcell"]:focus,
[role="gridcell"] *:focus,
[role="grid"] [tabindex="0"]:focus {
    outline: #000000;
    outline-style: dotted;
    outline-width: 2px;
}

#arrow-keys-indicator {
    bottom: 10px;
    left: 0;
    position: fixed;
    height: 65px;
    width: 85px;
    background: url("../imgs/black_keys.png") no-repeat;
    background-size: contain;
}

@media screen and (max-width: 1000px) {
    #arrow-keys-indicator {
        display: none;
    }
}

input[type="radio"] {
    margin-right: 8px !important;
}

[role="radiogroup"] td:focus-within,
[role="radiogroup"] > span:focus-within,
[role="radiogroup"] td:focus,
[role="radiogroup"] > span:focus {
    outline: #000000 !important;
    outline-style: dotted !important;
    outline-width: 2px !important;
}

.breadcrumb-item:focus-within a {
    outline: #000000 !important;
    outline-style: dotted !important;
    outline-width: 2px !important;
}

.nav-link {
    display: block !important;
}

    .nav-link:focus {
        border: 0px !important;
        display: inline-block;
        outline: #000000 !important;
        outline-style: dotted !important;
        outline-width: 2px !important;
        box-shadow: 0 0 0 0 !important;
        outline-offset: -2px !important;
    }

[role="link"] {
    color: #01689b;
    background: transparent;
    text-decoration: underline;
}
    [role="link"]:focus,
    /*[role="link"]:focus::before,*/
    [role="link"] [tabindex="-1"]:focus {
        cursor: pointer;
        outline: #000000;
        outline-style: dotted;
        outline-width: 2px;
    }

[role="checkboxgroup"] td:focus-within,
[role="checkboxgroup"] > span:focus-within,
[role="checkboxgroup"] td:focus,
[role="checkboxgroup"] > span:focus {
    outline: 2px dotted #000000;
}

td:has(.checkboxsingle):focus-within,
td:has(.checkboxsingle):focus {
    outline: 2px dotted #000000;
}

input[type="checkbox"] {
    margin-right: 8px !important;
}

[role="textbox"]:focus-within,
[role="textbox"]:focus {
    outline: #000000;
    outline-style: dotted;
    outline-width: 2px;
}

[role="listbox"]::selection, 
[role="listbox"]:focus-within,
[role="listbox"] > option:focus {
    outline: #000000;
    outline-style: dotted;
    outline-width: 2px;
}

[role="alert"]:focus,
[role="alert"]:focus-within {
    outline: #000000;
    outline-style: dotted;
    outline-width: 2px;
}