@import 'constants.css';



body {
    font-family: "Lexand", sans-serif;
    font-size: 15px;
}


.mobile-menu-icon{
    color: var(--top-menu-text);
}
.breadcrumb {
    border-radius: 0px;
    background-color: var(--breadcrumb-menu-background);
    color: var(--breadcrumb-menu-text);
}

.bc-container {
    background-color: var(--breadcrumb-menu-background);
}

.home-icon {
    color: var(--breadcrumb-menu-text);
}

    .home-icon:hover, .home-icon:focus, .home-icon:active {
        color: var(--primary-button-background);
    }

.navbar-toggler {
    border: none;
}

.navbar-toggler {
    color: var(--top-menu-text);
}

.top-site-nav {
    background-color: var(--top-menu-background);
    padding: 42px 0 42px 0;
}

.navbar-light .navbar-nav .active > .nav-link {
    color: var(--top-menu-text) ;
    display: inline;
}

.navbar-light .navbar-nav .nav-link {
    color: var(--top-menu-text);
    display:inline;
}

    .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:active {
        color: var(--top-menu-text);
    }

.navbar-light .navbar-nav .active > a {
    color: var(--top-menu-text);
    text-decoration: none;
}

.navbar-light a {
    color: var(--top-menu-text);
    text-decoration: none;
}

    .navbar-light a:hover, .navbar-light a:focus, .navbar-light a:active {
        color: var(--top-menu-text);
        text-decoration: underline;
    }

.navbar-light .dropdown-menu {
    background-color: white;
    color: black;
}

    .navbar-light .dropdown-menu a {
        color: black;
    }

        .navbar-light .dropdown-menu a:active {
            background-color: #f7f7f9;
        }

a {
    color: var(--hyperlink-text);
    text-decoration: underline;
}
.link-default {
    color: var(--hyperlink-text) !important;
    text-decoration: underline;
}
.link-default:hover, .link-default:focus, .link-default:active {
    color: var(--hyperlink-text-hover) !important;
}
    .btn {
        text-decoration: none;
    }

.btn-group .dropdown-toggle {
    background-color: transparent;
    color: var(--top-menu-text);
}

    .btn-group .dropdown-toggle:hover, .btn-group .dropdown-toggle:focus, .btn-group .dropdown-toggle:active {
        background-color: transparent;
        color: var(--top-menu-text);
    }

a:hover, a:focus, a:active {
    color: var(--hyperlink-text-hover);
}

.footer .top-footer {
    background-color: var(--top-footer-background);
    color: var(--top-footer-text);
}

.bottom-footer {
    background-color: var(--bottom-footer-background);
    color: var(--bottom-footer-text);
}

.footer {
    background-color: var(--bottom-footer-background);
    color: var(--bottom-footer-text);
    height: var(--bottom-footer-height);
}

.footer-small {
    line-height: 18px;
    font-size: 13px;
    margin: 0 0 5px 0;
}

.btn-primary, .btn-default {
    color: var(--primary-button-text);
    background-color: var(--primary-button-background);
    border: 1px solid var(--primary-button-background);
}

    .btn-primary:hover, .btn-default:hover, .btn-primary:focus, .btn-default:focus, .btn-primary:active, .btn-default:active {
        background-color: var(--primary-button-background-hover);
        border: 1px solid var(--primary-button-background-hover);
        color: var(--primary-button-text);
    }

header .btn {
    color: var(--primary-button-text);
    background-color: var(--primary-button-background);
}

    header .btn:hover, header .btn:focus, header .btn:active {
        color: var(--primary-button-text);
        background-color: var(--primary-button-background-hover);
    }

.btn-secondary, .btn-info {
    background-color: var(--secondary-button-background);
    color: var(--secondary-button-text);
    border: 1px solid var(--secondary-button-background);
}

    .btn-secondary:hover, .btn-info:hover, .btn-secondary:focus, .btn-info:focus, .btn-secondary:active, .btn-info:active {
        background-color: var(--secondary-button-background-hover);
        border: 1px solid var(--secondary-button-background-hover);
        color: var(--secondary-button-text);
    }

.btn-tertiary {
    background-color: var(--tertiary-button-background);
    border: 1px solid var(--tertiary-button-background);
    color: var(--tertiary-button-text);
}

    .btn-tertiary:hover, .btn-tertiary:focus, .btn-tertiary:active {
        background-color: var(--tertiary-button-background-hover);
        border: 1px solid var(--tertiary-button-background-hover);
        color: var(--tertiary-button-text);
    }

.course-card .card-footer, .shopitem-card .card-footer {
    background-color: white;
}

.course-card .card-header, .card-header, .shopitem-card .card-header {
    background-color: var(--card-header-background);
    color: var(--card-header-text);
}
.course-card .showCourseDetail {
    cursor: pointer;
}

.btn-outline-primary {
    color: var(--primary-button-background);
    border-color: var(--primary-button-background);
}

    .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
        color: var(--primary-button-text);
        border-color: var(--primary-button-background);
        background-color: var(--primary-button-background);
    }

@media (max-width: 576px) {
    .navbar .container {
        margin-left: 8px;
        margin-right: 8px;
    }
}