/* Navigation buttons */
.vis-navigation .vis-button {
    background-color: var(--ct-brand-medium) !important;
    border-color: var(--ct-brand-bold) !important;
}

    .vis-navigation .vis-button:hover {
        background-color: var(--ct-brand-bold) !important;
        box-shadow: 0 0 3px var(--ct-brand-medium) !important;
    }

    /* Navigation button icons */
    .vis-navigation .vis-button.vis-up,
    .vis-navigation .vis-button.vis-down,
    .vis-navigation .vis-button.vis-left,
    .vis-navigation .vis-button.vis-right,
    .vis-navigation .vis-button.vis-zoomIn,
    .vis-navigation .vis-button.vis-zoomOut,
    .vis-navigation .vis-button.vis-zoomExtends {
        background-image: none !important;
    }

    /* Custom icons using border */
    .vis-navigation .vis-button::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border: solid var(--ct-brand-white);
    }

    /* Custom icons using border */
    .vis-navigation .vis-button::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border: solid var(--ct-brand-white);
    }

    .vis-navigation .vis-button.vis-up::before {
        border-width: 0 2px 2px 0;
        transform: translate(-50%, -25%) rotate(-135deg);
        padding: 3px;
        width: 3px;
        height: 3px;
    }

    .vis-navigation .vis-button.vis-down::before {
        border-width: 0 2px 2px 0;
        transform: translate(-50%, -75%) rotate(45deg);
        padding: 3px;
        width: 3px;
        height: 3px;
    }

    .vis-navigation .vis-button.vis-left::before {
        border-width: 0 2px 2px 0;
        transform: translate(-25%, -50%) rotate(135deg);
        padding: 3px;
        width: 3px;
        height: 3px;
    }

    .vis-navigation .vis-button.vis-right::before {
        border-width: 0 2px 2px 0;
        transform: translate(-75%, -50%) rotate(-45deg);
        padding: 3px;
        width: 3px;
        height: 3px;
    }

    .vis-navigation .vis-button.vis-zoomIn::before {
        content: '+';
        border: none;
        color: var(--ct-brand-white);
        font-size: 16px;
        font-weight: bold;
    }

    .vis-navigation .vis-button.vis-zoomOut::before {
        content: '−';
        border: none;
        color: var(--ct-brand-white);
        font-size: 16px;
        font-weight: bold;
    }

    .vis-navigation .vis-button.vis-zoomExtends::before {
        content: '⤢';
        border: none;
        color: var(--ct-brand-white);
        font-size: 16px;
    }