.navigation-tool {
    color: var(--main-color-dark);
    cursor: pointer;
    font-size: 24px;
    height: 50px;
    padding: 13px 8px;
    text-align: center;
    width: 40px;
}
.navigation-tool:hover {
    color: var(--main-color-highlight);
}
.navigation-tool:active {
    color: var(--main-color-light);
}
.navigation-tool.disabled {
    color: #aebabd;
    pointer-events: none;
}

.navigation-tools-icon {
    fill: var(--main-color-dark);
    height: 24px;
    width: 24px;
}
.navigation-tools-icon:hover {
    fill: var(--main-color-highlight);
}
.navigation-tools-icon:active {
    fill: var(--main-color-light);
}
.navigation-tools-icon.disabled {
    fill: #aebabd;
    display: block !important;
    pointer-events: none;
}

div.wcag-tool {
    line-height: 1em;
}
div.wcag-tool.active {
    background-color: #2196F3;
    color: #fff;
}
div.wcag-tool.active svg {
    fill: #fff;
}
#wcag-font-size-x-large {
    width: 54px;
}