/*Place your CSS code here*/

/* Breadcrumb text color */
div.breadcrumb-x,
div.breadcrumb-x a,
div.breadcrumb-x span,
div.breadcrumb-x li,
div.breadcrumb-x .breadcrumb-item {
    color: #FFFFFF !important;
}

/* Breadcrumb separator */
div.breadcrumb-x .divider,
div.breadcrumb-x li::before,
div.breadcrumb-x .breadcrumb-item + .breadcrumb-item::before {
    color: #FFFFFF !important;
}

/* Force all breadcrumb separators to white */
div.breadcrumb-x *::before,
div.breadcrumb-x *::after {
    color: #FFFFFF !important;
}

/* Slash color change to white for admin & instructor */
.breadcrumb-x .ef-breadcrumb > li + li::before {
border-left-color: white !important;
}
/* Slash color change to white for learner */
span.before\:tw-border-gray-400::before {
border-color: white !important;
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');


/* ==========================================================
   HEADER NAVIGATION
   Purpose:
   - Change the top navigation menu text to black.
   - Applies to all navigation links (Login, All Courses,
     Gallery, Koha) and the Language selector.
   ========================================================== */

#ef-navbar #ef-navigation > li > a,
#ef-navbar #ef-navigation > li > button,
#ef-navbar #ef-language-select > button {
    color: #000000 !important;
}

/* ==========================================================
   HEADER NAVIGATION ICONS
   Purpose:
   - Change all Font Awesome icons in the navigation
     (e.g. Link icon) to black.
   ========================================================== */

#ef-navbar #ef-navigation .fa,
#ef-navbar #ef-navigation .fas,
#ef-navbar #ef-navigation .far,
#ef-navbar #ef-navigation .fal {
    color: #000000 !important;
}

/* ==========================================================
   HEADER NAVIGATION - HOVER STATE
   Purpose:
   - Keep navigation text black when the mouse hovers over
     or focuses on a menu item.
   ========================================================== */

#ef-navbar #ef-navigation > li > a:hover,
#ef-navbar #ef-navigation > li > a:focus,
#ef-navbar #ef-navigation > li > button:hover,
#ef-navbar #ef-navigation > li > button:focus {
    color: #000000 !important;
}


/* PUT CSS*/
.about-section {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px;
    font-family: Arial, sans-serif;
    color: #212529;
    font-size: 14px;
    line-height: 1.6;
}

.about-section p {
    margin: 0 0 18px;
}

.about-section h2 {
    margin: 28px 0 12px;
    color: #212529;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
}

.about-section ol {
    margin: 0 0 24px;
    padding-left: 24px;
}

.about-section ol > li {
    margin-bottom: 16px;
}

.about-section ul {
    margin: 6px 0 0;
    padding-left: 22px;
}

.about-section ul li {
    margin-bottom: 4px;
}

.about-section strong {
    color: #212529;
    font-weight: 700;
}

.about-section .download-link {
    color: #0d6efd;
    text-decoration: underline;
}

.about-section .download-link:hover {
    color: #0a58ca;
}
.about-section ol {
    list-style-type: decimal !important;
    list-style-position: outside !important;
    margin: 0 0 24px !important;
    padding-left: 24px !important;
}

.about-section ol > li {
    display: list-item !important;
    margin-bottom: 16px !important;
}

.about-section ul {
    list-style-type: disc !important;
    list-style-position: outside !important;
    margin: 6px 0 0 !important;
    padding-left: 24px !important;
}

.about-section ul > li {
    display: list-item !important;
    margin-bottom: 4px !important;
}

/* DO NOT ADD/EDIT AFTER THIS LINE */
#ef-navbar, #ef-navbar li a.dropdown-toggle[aria-expanded="true"]{background-color:#FFFFFF;border-color:#7AA94A;}
div.breadcrumb-x{background-color:#7AA94A;border-color:#7AA94A;}
*.btn.btn-primary, *.btn.btn-primary:not(.active), *.btn.btn-primary:hover, *.btn.btn-primary:hover:not(.active), *.btn.btn-primary:focus, *.btn.btn-primary:focus:not(.active){background-color:#000000;border-color:#000000;}
html.new-ui-html:root{--c-brand-primary:#7aa94a;--c-brand-primary-darken-5:#75a445;--c-brand-primary-darken-7:#73a243;--c-brand-primary-darken-10:#709f40;--c-brand-primary-darken-15:#6b9a3b;--c-brand-primary-darken-17:#699839;--c-brand-primary-darken-20:#669536;--c-brand-primary-darken-25:#619031;--c-brand-primary-lighten-7:#81b051;--c-brand-primary-lighten-40:#a2d172;}
html,body, body.new-ui.learner-user .ef-block, body.new-ui.learner-user #talentCraft-unit-footer, .ef-bg-color{background-color:#FFFFFF;}
div.ef-block, div.dashboard-panel div.panel-body, body.new-ui, body.new-ui.learner-user{background-color:#FFFFFF;--c-site-primary:#FFFFFF;}
html,body{background-color:#FFFFFF;}
body, h1, h2, h3, h4, h5, h6, p {
    font-family: 'Inter', sans-serif !important;
}
