:root
{
    --info-pane-bg-color: #E5F4FF;
    --info-pane-border-radius: 10px;
    --info-pane-border-color: var(--info-pane-bg-color);

    --heading-font-family: "Kanit", serif;
    --heading-font-optical-sizing: auto;
    --heading-font-weight-baseline: 500;
    --heading-font-weight-heavy: 600;
    --heading-font-style: normal;

    --body-font-family: "Manrope", serif;
    --body-font-weight: 400;
    --body-font-style: normal;

    --accent-color: #008BFF;
}

body
{
    font-family: var(--body-font-family);
    font-weight: var(--body-font-weight);
    font-style: var(--body-font-style);
}

h1, h2, h3, h4, h5, h6, .heading
{
    font-family: var(--heading-font-family);
    font-optical-sizing: var(--heading-font-optical-sizing);
    font-weight: var(--heading-font-weight-baseline);
    font-style: var(--heading-font-style);
}

.heading-heavy
{
    font-weight: var(--heading-font-weight-heavy);
}

.border-color-accent
{
    border-color: var(--accent-color);
}

.text-color-accent
{
    color: var(--accent-color);
}

.info-pane
{
    background-color: var(--info-pane-bg-color);
    border-radius: var(--info-pane-border-radius);
    border-color: var(--info-pane-border-color);
}

.bordered-btn, .bordered-btn:hover
{
    border-color: var(--accent-color);
    border-width: 2px;
}

.info-pane-header
{
    color: var(--accent-color);
    font-weight: var(--heading-font-weight-heavy);
    font-size: 36px;
}

/* Enrollment */
.enrollment-bg-color
{
    background-color: var(--info-pane-bg-color);
}

.missing-required
{
box-shadow: 0 0 0.5px 2px red !important;
}