:root {
    --atc-gray: #eee;
    --atc-light-gray-hover: #ccc;
    --atc-black: #000;
}

.nav-pills .nav-item.show .nav-link,
.nav-pills .nav-link:hover {
    
    background-color: var(--atc-light-gray-hover) !important;
    color: var(--atc-black) !important;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-item.show .nav-link {
    
    background-color: var(--atc-light-gray-hover) !important;
    color: var(--atc-black) !important;
}

.nav-pills .nav-item.show .nav-link,
.nav-pills .nav-link.active {
    font-weight: bold !important;
    background-color: var(--atc-gray) !important;
    color: var(--atc-black) !important;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    font-weight: bold !important;
    background-color: var(--atc-gray) !important;
    color: var(--atc-black) !important;
}

.nav-menu-tab.active{
    border-bottom: 1px solid var(--atc-gray) !important;
}

.atc-menu {
    right: auto;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    width:25vw !important;
}

@media (max-width: 700px) {
    .nav-menu-tab.active{
        border-bottom: none !important;
    }
    
    .atc-menu {
        right: auto;
        left: 0;
        
        transform: none !important;
        width:100vw !important;
    }

}