@import "variables.css";

.active-navi {
    color: var(--tab-active-color) !important;
    border-bottom: var(--tab-active-border) !important;
    background-color: transparent;
    border: none;
    font: var(--tab-font);   
    text-transform: uppercase;
}

.basic-navi {
    color: var(--tab-basic-color) !important;
    border-bottom: var(--tab-basic-border) !important;
    background-color: transparent;
    border: none;
    font: var(--tab-font);
    background: none !important;
    text-transform: uppercase;
}

.basic-navi:hover {
    color: var(--tab-active-color) !important;
}

.nav-tabs {
    border-bottom: none;
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
    color: var(--tab-active-color) !important;
    border-bottom: var(--tab-active-border) !important;
    background-color: transparent;
    border: none;
    font: var(--tab-font);
}

.nav-tabs > li {
    float: left;
    margin-bottom: -1px;
}

.nav-link {
    display: block;
    padding: 0.5rem 1rem;
    color: var(--tab-basic-color);
    font: var(--tab-font);
    border: none !important;
}

.nav-link:hover {
    display: block;
    padding: 0.5rem 1rem;
    color: var(--tab-basic-color);
    font: var(--tab-font);
    border: none !important;
}

.mx-tab-btn {
    padding: 10px;
    background-color: #ffffff;
    border: none;
    text-transform: uppercase;
    font-weight: bold;
    color: #5c5c5c;
}

.mx-tab-btn.active {
    padding: 10px;
    background-color: #ffffff;
    border: none;
    border-bottom: 2px solid #3197A9;
    text-transform: uppercase;
    font-weight: bold;
    color: #000000;
}