/* Student portal White Label tokens */

body {
    background-color: var(--sg-body-bg, #f8f9fa) !important;
    color: var(--sg-body-text, #52606d);
    font-family: var(--sg-body-font, inherit);
    font-size: var(--sg-body-size, 16px);
}

.page {
    background-color: var(--sg-body-bg, #f8f9fa);
}

/* Login / registration use the same body surface */
.page-center,
.page-center .container-tight {
    background-color: transparent;
}

.page-center .card {
    background-color: var(--sg-card-bg, #ffffff);
}

.page-center .card .h2,
.page-center .card h2 {
    font-family: var(--sg-h2-font, var(--sg-body-font, inherit));
    font-size: var(--sg-h2-size, 1.5rem);
    line-height: var(--sg-h2-lh, 1.3);
    letter-spacing: var(--sg-h2-ls, 0);
    color: var(--sg-h2-color, #1f2933);
}

.page-center .card,
.page-center .card .form-label,
.page-center .card .form-control,
.page-center .card .card-body {
    color: var(--sg-card-body-color, var(--sg-body-text, #52606d));
    font-family: var(--sg-card-body-font, var(--sg-body-font, inherit));
}

.page-center .btn-primary,
.login-form .btn-primary {
    background-color: var(--sg-btn-bg, #273b09) !important;
    border-color: var(--sg-btn-border, #273b09) !important;
    color: var(--sg-btn-text, #ffffff) !important;
}

.page-center .btn-primary:hover,
.login-form .btn-primary:hover {
    background-color: var(--sg-btn-hover-bg, #1f2e07) !important;
    border-color: var(--sg-btn-hover-border, #1f2e07) !important;
    color: var(--sg-btn-hover-text, #ffffff) !important;
}

/* Header / menu */
header.navbar {
    background-color: var(--sg-header-bg, #ffffff) !important;
    color: var(--sg-header-text, #1f2933);
    font-family: var(--sg-header-font, inherit);
    font-size: var(--sg-header-size, 14px);
}

html.sg-header-sticky header.navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
}

header.navbar .nav-link,
header.navbar .nav-link-title,
header.navbar .navbar-brand,
header.navbar .nav-link-icon {
    color: var(--sg-header-text, #1f2933) !important;
}

header.navbar .btn-primary {
    background-color: var(--sg-header-btn-bg, #273b09) !important;
    border-color: var(--sg-header-btn-border, #273b09) !important;
    color: var(--sg-header-btn-text, #ffffff) !important;
}

header.navbar .btn-primary:hover {
    background-color: var(--sg-header-btn-hover-bg, #1f2e07) !important;
    border-color: var(--sg-header-btn-hover-border, #1f2e07) !important;
    color: var(--sg-header-btn-hover-text, #ffffff) !important;
}

/* Body headings + buttons */
h1, .h1 {
    font-family: var(--sg-h1-font, inherit);
    font-size: var(--sg-h1-size, 2rem);
    line-height: var(--sg-h1-lh, 1.25);
    letter-spacing: var(--sg-h1-ls, 0);
    color: var(--sg-h1-color, #1f2933);
}

h2, .h2 {
    font-family: var(--sg-h2-font, inherit);
    font-size: var(--sg-h2-size, 1.5rem);
    line-height: var(--sg-h2-lh, 1.3);
    letter-spacing: var(--sg-h2-ls, 0);
    color: var(--sg-h2-color, #1f2933);
}

h3, .h3 {
    font-family: var(--sg-h3-font, inherit);
    font-size: var(--sg-h3-size, 1.25rem);
    line-height: var(--sg-h3-lh, 1.35);
    letter-spacing: var(--sg-h3-ls, 0);
    color: var(--sg-h3-color, #1f2933);
}

.btn-primary {
    background-color: var(--sg-btn-bg, #273b09);
    border-color: var(--sg-btn-border, #273b09);
    color: var(--sg-btn-text, #ffffff);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--sg-btn-hover-bg, #1f2e07);
    border-color: var(--sg-btn-hover-border, #1f2e07);
    color: var(--sg-btn-hover-text, #ffffff);
}

.btn-outline-primary {
    color: var(--sg-btn-bg, #273b09);
    border-color: color-mix(in srgb, var(--sg-btn-bg, #273b09) 45%, transparent);
    background: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    color: var(--sg-btn-bg, #273b09);
    border-color: var(--sg-btn-bg, #273b09);
    background: color-mix(in srgb, var(--sg-btn-bg, #273b09) 10%, transparent);
}

/* Cards / sections */
.card,
.course-section,
.preview-course .card {
    background-color: var(--sg-card-bg, #ffffff);
}

.card .card-title,
.course-section__header h2,
.course-section__header h3,
.wl-card-title {
    font-family: var(--sg-card-title-font, inherit);
    font-size: var(--sg-card-title-size, 1.25rem);
    line-height: var(--sg-card-title-lh, 1.3);
    letter-spacing: var(--sg-card-title-ls, 0);
    color: var(--sg-card-title-color, #1f2933);
}

.card .card-body,
.course-section__body,
.preview-course {
    color: var(--sg-card-body-color, var(--sg-body-text, #52606d));
}

.preview-course {
    background-color: var(--sg-body-bg, #f8f9fa);
    font-family: var(--sg-body-font, inherit);
    font-size: var(--sg-body-size, 16px);
}

/* Footer */
footer.footer {
    background-color: var(--sg-footer-bg, #ffffff) !important;
    color: var(--sg-footer-text, #52606d);
    font-family: var(--sg-footer-font, inherit);
    font-size: var(--sg-footer-size, 14px);
}

footer.footer,
footer.footer .text-secondary {
    color: var(--sg-footer-text, #52606d) !important;
}

footer.footer a,
footer.footer .link-secondary {
    color: var(--sg-footer-link, #667382) !important;
}

footer.footer a:hover,
footer.footer a:focus,
footer.footer a.active,
footer.footer .link-secondary:hover {
    color: var(--sg-footer-link-active, #273b09) !important;
}