:root {
    --blue: #4F7CAC;
    --blue-hover: #5D91C9;
    --blue-background: rgb(178, 206, 222, 0.4);
    --nested-card-hover: #DCE8E2;
    --nested-card-header: #CFDBD5;
    --nested-card-body: #E8EDDF;
    --teal: #3A6F79;
    --dark-teal: #2C535B;
    --teal-hover: #56A7B5;
    --teal-background: #E8F5F0;
    --teal-calendar-dark: #D9E8E8;
    --teal-calendar-light: #E8F5F0;
    --teal-calendar-section: #0049B8;
    --teal-calendar-lab: #12A443;
    --teal-calendar-holiday: #E8F5F0;
}

#bobRoss {
    float: left;
    width: 33.33%;
    padding-right: 5px;
    text-align: center;
}

body {
    position: relative;
}

.wrapper {
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 100px;
    /*min-width: 50ch;*/
    max-width: 200ch;
    padding-left: 1em;
    padding-right: 1em;
    padding-bottom: 150px;
}

.title-section {
    padding-bottom: 2em;
}

.section {
    border-top: 3px solid #ccc;
    padding-top: 2em;
    padding-bottom: 2em;
    page-break-inside: auto;
}

.section:first-child {
    border-top: none;
    padding-top: 0;
}

.subsection {
    margin-top: 1em;
    border-top: 1px solid #ccc;
    page-break-inside: auto;
}

.new {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
}

.title-section+.section:first-child {
    border-top: 3px solid #ccc;
}

@media print {
    /* Firefox hack?
     * https://stackoverflow.com/q/45414152/646543
     */

    .row {
        display: block;
    }

    .content {
        display: block;
    }
}

.page-navigator {
    display: inline-block;
}

.page-navigator.previous {
    float: left;
}

.page-navigator.next {
    float: right;
}

/*****************************
 * Parent link in nav/sidebar
 */

.parent-link {
    margin-bottom: 1em;
    background-color: var(--blue);
    border-radius: 0.2em;
    padding: 0.2em 0.5em;
    transition: background-color 100ms ease-out;
    text-align: center;
}

.parent-link:hover,
.parent-link:active,
.parent-link:focus {
    background-color: var(--blue-hover);
}

.parent-link a {
    display: block;
    width: 100%;
    color: #fff;
    text-decoration:none;
}

@media (min-width: 576px) {
    .parent-link {
        text-align: left;
    }
}


/**************
 * Nav/sidebar
 */
.navbar-brand {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    flex-shrink: 2;
    max-width: 70%;
}

.navbar-brand a {
    color: black;
    text-decoration: none;
    font-weight: 500;
}

#page-title {
    color: gray;
    font-size: 1.25rem;
    margin-left: 5px;
}

.top-nav {
    border-width: 0 0 2px 0;
    border-color: var(--teal);
    border-style: solid;
    background-color: white;
}

.top-nav .active a,
.top-nav .nav-item a,
.top-nav .nav-item a:hover {
    color: var(--dark-teal);
}

.nav-sidebar {
    overflow: auto;
    max-height: 80vh;
}

@media (max-width: 575.98px) {
    .nav-sidebar {
        flex: auto;
        height: auto;
    }
}

.nav-sidebar ul {
    list-style-type: none;
    padding-left: 0;
}

.nav-sidebar .nav-header {
    font-weight: bold;
}

.nav-sidebar li a {
    display: block;
    width: 100%;
    color: var(--dark-teal);
    font-size: 11pt;
}

.nav-sidebar li.active a,
.nav-sidebar li a:hover,
.nav-sidebar li a:focus,
.nav-sidebar a.nav-link.active {
    background-color: var(--teal);
    color: white;
    width: 100%;
}

.sticky {
    position: -webkit-sticky; /* for Safari */
    position: sticky;
    top: 60px;
    align-self: flex-start;
}

.nav-link {
    padding: 0.2em 0.5em;
}

@media print {
    .nav-sidebar {
        display: none;
    }
}

.side-nav-header:before {
    content: " ";
    display: block;
    height: 70px;
    margin-top: -70px;
    visibility: hidden;
}

.side-nav-1 {
    padding-left: 20px;
}

/*************
 * Typography
 */
.hidden {
    display: none;
}

ul {
    list-style-type: square;
}

ol ol,
ol ul,
ul ol,
ul ul {
    margin-bottom: 0.5em;
}

ul ul {
    list-style-type: circle;
}

p {
    margin-bottom: 0.5em;
}

h2 {
    margin-bottom: 0.5em;
}

h3 {
    font-size: 1.5em;
    margin-top: 1em;
    margin-bottom: 0.5em;
}

h4 {
    margin-top: 1em;
    font-size: 1.2em;
}

.heading-link {
    font-size: 0.5em;
}


@media print {
    .heading-link {
        display: none;
    }
}

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}

img.icon {
    position: relative;
    display: inline-block;
    width: 16px;
    height: 16px;
}

h3.hw-main {
    font-size: 1.1em;
    font-weight: bolder;
    margin-top: 0;
    padding-top: 0;
    border: none;
}

h3.no-border {
    margin-top: 0;
    padding-top: 0;
    border: none;
}

h4.hw-part {
    font-size: inherit;
}

blockquote {
    background-color: #dfdfdf;
    border-left: 0.5em solid black;
    padding: 1em;
}

.highlight {
    max-width: 95ch;
    background-color: #fff3cd;
    color: #856404;
    border-color: #856404;
    border-left: 0.5em solid;
    padding: 1em;
}

.faq-question {
    font-weight: bold;
}

.faq-question:before {
    content: "Q: ";
}

.faq-answer.first-faq-answer:before {
    content: "A: ";
}

/******************
 * Home page
 */
#home-wrapper {
    margin-top: 20px;
}

#home-bg {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
    height: 390px;
    object-fit: cover;
    object-position: 50% 39%;
}

#calendar-preview, 
#announcement-content {
    border: 3px solid var(--teal);
    border-radius: calc(.25rem - 1px) calc(.25rem - 1px);
}

#announcement-content .card-header {
    border-radius: 0;
    border: 0px;
}

#announcement-content .card {
    border: 0px;
    margin-bottom: 0px;
}

#announcement-content:first-child h3 {
    margin-top: 0;
}

.announcement-block {
    padding: 0px 20px 20px 20px;
    border-top: 1px solid #ccc;
}

#latest-announcement.announcement-block {
    border-top: 0px;
}

#announcement-extend {
    max-height: 500px;
    overflow-y: scroll;
}

#announcement-extend .announcement-block {
    background-color: var(--teal-background);
}

#calendar-preview .calendar .day {
    margin-left: 0px;
}

#calendar-preview .calendar {
    margin-bottom: 1em;
}

/***********
 * Diagrams
 */

.diagram img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/***********************
 * Office hours summary
 */

.office-hours-summary ul {
    list-style-type: none;
    padding-left: 0;
}

.office-hours-summary p {
    margin-bottom: 0.25em;
}

/********************
 * Responsive iFrame
 */

.responsive-iframe-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    box-shadow: none;
}

.responsive-iframe-container iframe,
.vresponsive-iframe-container object,
.vresponsive-iframe-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/******************
 * Calendar widget
 */

.calendar,
.calendar-grid {
    font-size: 0.8em;
    text-align: center;
    margin-bottom: 3em;
}

/* .calendar .week-title {
} */

.calendar .group {
    margin-top: 15px;
    font-weight: bold;
}

.calendar .week {
    font-weight: bold;
    font-size: 150%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

.calendar .week .references, 
.calendar .week .resources {
    font-size: 100%;
    margin-top: 0.8rem;
}

.calendar .day,
.calendar-grid .day,
.calendar .header {
    padding: 1em 10px;
    margin-bottom: 0.2em;
    margin-left: -10px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
}

.calendar .header {
    /* position: relative; */
    padding-bottom: 0;
    font-weight: bold;
    align-items: flex-end;
    color: #66686B;
    border-bottom: solid #66686B;
    border-bottom-width: 0.5px;
}

.calendar .header .references,
.calendar .header .resources,
.calendar .header .assignments {
    text-overflow: ellipsis;
    overflow: hidden;
}

.calendar .day .date,
.calendar-grid .day .date {
    margin-bottom: 3px;
}

.calendar .day .type,
.calendar-grid .day .type {
    text-transform: uppercase;
    color: white;
    border-radius: 3px;
    padding: 2px 4px;
}

.calendar-grid .day .type {
    justify-content: space-between; 
}

.calendar-grid .day {
    display: flex;
    justify-content: space-between; 
}

.calendar-grid .day a.date-jump {
	color: initial;
}

.calendar .lesson-day .type,
.calendar-grid .lesson-day .type {
    background-color: var(--teal);
}

.calendar .section-day .type,
.calendar-grid .section-day .type {
    background-color: var(--teal-calendar-section);
}

.calendar .lab-day .type,
.calendar-grid .lab-day .type {
    background-color: var(--teal-calendar-lab);
}

.calendar .holiday-day,
.calendar-grid .holiday-day {
    font-style: italic;
    opacity: 0.4;
}

table.calendar-grid {
    width: 100%;
    border: 1px solid black;
}

table.calendar-grid td,
table.calendar-grid th {
    border: 1px solid black;
    text-align: left;
    vertical-align: top;
}

.calendar-grid .flex-break {
	flex-basis: 100%;
	height: 0;
	margin: 0;
	padding: 0;
	border: none;
}

.calendar-grid .day {
    background-color: initial;
}

.calendar .day:nth-child(2n+1) {
    background-color: var(--teal-calendar-dark);
}

.calendar .day:nth-child(2n) {
    background-color: var(--teal-calendar-light);
}

.calendar .day.upcoming {
    opacity: 0.4;
}

.calendar .day#today {
    scroll-margin-top: 75px;
    border: 3px solid var(--dark-teal);
    filter: saturate(250%);
}

.calendar .date-and-type .date {
    font-size: 0.85em;
}

.calendar .date-and-type,
.calendar .topic,
.calendar .materials,
.calendar .references,
.calendar .resources,
.calendar .assignments {
    flex-shrink: 0;
    margin-left: 2px;
    margin-right: 5px;
    text-align: left;
}

.calendar .date-and-type {
    flex-basis: 12ch;
    flex-grow: 0;
}

.calendar .topic {
    flex-basis: 20ch;
    flex-grow: 1;
    max-width: 50ch;
}

.calendar .week .date-and-type {
    margin-top: 1em;
    margin-bottom: 0.5em;
    flex-grow: 1;
}

.calendar .day .objectives {
    text-align: left;
    font-weight: normal;
}

.calendar .objectives ul {
    list-style-type: disc;
    list-style-position: outside;
    padding-left: 2em;
}

.calendar .objectives li {
    display: list-item;
}

/* topic styling for different day types
.calendar .lecture-day .topic,
.calendar .midterm-day .topic {
    font-style: inherit;
    text-align: left;
}

.calendar .lecture-day .topic {}

.calendar .section-day .topic {
    font-style: inherit;
} */

.calendar ul,
.calendar-grid ul {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 0;
}

.calendar li {
    display: flex;
    flex-wrap: wrap;
}

.calendar li:not(:last-child) {
    margin-bottom: 0.2em;
}

.calendar .materials {
    flex-basis: 16ch;
    flex-grow: .3;
    text-align: left;
}

.calendar .references,
.calendar .resources,
.calendar .video,
.calendar .assignments {
    flex-basis: 8ch;
    flex-grow: .9;
}

@media (max-width: 767.98px) {
    .calendar .header {
        display: none;
    }
    .calendar .week {
        display: block;
    }

    /* .calendar .datedate-and-type,
    .calendar .topic {
        margin-left: 4px;
        margin-right: 4px;
    } */

    .calendar .date,
    .calendar .type {
        display: inline;
        white-space: nowrap;
    }

    .calendar .date-and-type,
    .calendar .topic,
    .calendar .materials,
    .calendar .references,
    .calendar .resources,
    .calendar .assignments {
        flex-basis: 100%;
        flex-grow: 1;
        margin-bottom: 0.2em;
    }

    .calendar ul {
        padding-left: 2ch;
    }

    .calendar .materials.empty,
    .calendar .references.empty,
    .calendar .resources.empty,
    .calendar .assignments.empty {
        display: none;
    }

    .calendar div.materials::before {
        content: "Materials:";
        display: block;
        margin-bottom: 0.2em;
    }
    .calendar div.references::before {
        content: "References:";
    }
    .calendar div.resources::before {
        content: "Resources:";
    }
    .calendar div.assignments::before {
        content: "Assignments:";
        display: block;
        margin-bottom: 0.2em;
    }
}

/* enable for inline materials
.calendar .materials ul,
.calendar .materials li {
    display: inline;
}

.calendar .materials li {
    padding-left: 0.2em;
    padding-right: 0.2em;
}
*/

.calendar .topic,
.calendar-grid .topic {
    font-weight: bold;
}

.calendar-grid a.styled-url {
	font-size: 85%;
}

.calendar-grid a.styled-url img.icon {
	display: none;
}



.label {
    padding: 0 0.2rem;
    border-style: none;
    border-width: 0.1rem;
    /* margin-top: 1.2rem; */
    margin-right: 0.1rem;
    font-weight: normal;
    font-style: italic;
}

a.styled-url {
    padding: 0 0.2rem;
    border-style: solid;
    border-width: 0.1rem;
    margin-top: 0.2rem;
    margin-right: 0.2rem;
    font-weight: normal;
}

a.styled-url:hover{
    color: white;
    background-color: inherit;
    text-decoration: none;
}

a.teal {
    border-color: var(--teal);
    color: var(--teal);
}

a.teal:hover {
    background-color: var(--teal);
}

a.teal-dark {
    background-color: var(--teal);
    color: white;
}

a.teal-dark:hover {
    border-color: var(--teal);
    color: var(--teal);
}

a.green {
    border-color: #12A443;
    color: #12A443;
}

a.green:hover {
    background-color: #12A443;
}

a.blue {
    border-color: #2689FF;
    color: #2689FF;
}

a.blue:hover {
    background-color: #2689FF;
}

a.blue-dark:hover {
    border-color: #2689FF;
    color: #2689FF;
}

a.blue-dark {
    background-color: #2689FF;
    color: white;
}

a.darkblue {
    border-color: #0049B8;
    color: #0049B8;
}

a.darkblue:hover {
    background-color: #0049B8;
}

a.darkblue-dark:hover {
    border-color: #0049B8;
    color: #0049B8;
}

a.darkblue-dark {
    background-color: #0049B8;
    color: white;
}


a.purple {
    border-color: #5A428C;
    color: #5A428C;
}

a.purple:hover {
    background-color: #5A428C;
}

a.purple-dark:hover  {
    border-color: #5A428C;
    color: #5A428C;
}

a.purple-dark {
    background-color: #5A428C;
    color: white;
}

a.pink {
    border-color: #9E3C7D;
    color: #9E3C7D;
}

a.pink:hover {
    background-color: #9E3C7D;
}

a.yellow {
    border-color: #8A6B00;
    color: #8A6B00;
}

a.yellow:hover {
    background-color: #8A6B00;
}

a.rounded {
    border-radius: 5px;
}

.calendar .topic li:first-child, .calendar .references li:first-child, .calendar .resources li:first-child, .calendar .assignments li:first-child  {
    margin-top: -0.2rem;
}
/********************
 * Staff list widget
 */
.course-staff {
    margin-top: 1em;
}

.course-staff .staff-member {
    border-bottom: 1px solid #ccc;
    padding-bottom: 1em;
    margin-bottom: 1em;
    margin-left: 1em;
    margin-right: 1em;
}

.course-staff .staff-member:last-of-type {
    border-bottom: 0;
}

.course-staff .staff-member.instructor {
    border-bottom: 0;
    margin-bottom: 2rem;
}

.course-staff .profile-pic {
    text-align: center;
}

.course-staff .profile-pic img {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    border: 0px solid white;
}

.course-staff ul {
    list-style-type: none;
    padding-left: 0;
}

.course-staff .name {
    font-weight: bold;
}

.course-staff ul.office-hours {
    list-style-type: circle;
    list-style-position: inside;
    padding-left: 1em;
}

/***********************
 * Homework icon styling
 */
.hw-icon {
    width: 100px;
    height: 100px;
}

ul.hw {
    list-style-type: none;
    padding-left: 0;
}

.hw li {
    margin-top: 20px;
    margin-bottom: 20px;
}

/**************************
 * Homework content styling
 */
pre {
    min-width: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
    text-align: justify;
}

code {
    word-wrap: break-word;
}

*[class*="alert-"] pre[class*="language-"] {
    padding: 0em;
    width: fit-content;
}

pre.code-sample {
    width: 85%;
}

pre.bad-code {
    background: rgba(255, 209, 209, 0.5);
}

pre.bad-code::before {
	content: "Bad Example";
	font-weight: bold;
	font-style: italic;
	display: block;
}

pre.good-code {
    background: rgba(209, 255, 211, 0.5);
}

pre.good-code::before {
	content: "Good Example";
	font-weight: bold;
	font-style: italic;
	display: block;
}

pre.okay-code {
    background: rgba(253, 255, 201, 0.5);
}

.output {
    max-width: 85ch;
}

.input {
    font-weight: bold;
    text-decoration: underline;
}

.tip {
    color: #856404;
    background-color: #fff3cd;
    border-color: #856404;
    border: 1px solid;
    border-left: 4px solid;

    margin: 0.25em;
    padding: 0.25em;
    float: right;
    width: 15%;
    font-size: 75%;
}

.tip::before {
    content: "\026A0";
    font-size: 120%;
}

.token.operator {
    background: inherit;
}
/*****************************************
 * Checkbox lists (for completion status)
 */
.checkboxes {
    list-style-type: none;
    list-style-position: outside;
    padding-left: 1em;
}

.checkboxes input {
    margin-right: 0.3em;
}

/*************
 * Flourishes
 */

.todo {
    color: red;
    font-weight: bold;
}

/*******************
 * Expandable cards
 */

.block {
    margin-bottom: 1em;
}

.block .card-header {
    background-color: var(--teal);
}

.block .card-body {
    background-color: var(--teal-background);
}

.block .card-header h4 {
    display: inline;
    color: white;
}

.block .card-header:focus,
.block .card-header:hover {
    cursor: pointer;
}

/*****************************
 * Expandable cards: warnings
 */

.block.warning .card-header {
    background-color: #ef4f4a;
}

.block.warning .card-header:focus,
.block.warning .card-header:hover {
    background-color: #ed8380;
}


.block.warning .card-body {
    background-color: #ffc6c4;
}

/*************************************************
 * Expandable cards: background info and examples
 */

.block.background .card-header {
    background-color: var(--teal);
}

.block.example .card-header {
    background-color: #e8843e;
}

.block.background .card-header:focus,
.block.background .card-header:hover {
    background-color: var(--teal-hover);
}

.block.example .card-header:focus,
.block.example .card-header:hover {
    background-color: #edad80;
}


.block.background .card-body {
    background-color: var(--teal-background);
}

.block.example .card-body {
    background-color: #ffe7d6;
}

/*********************
 * Expandable cards: nested
 */
.block.wordbank .card-header {
    background-color: var(--nested-card-header);
}

.block.wordbank .card-body {
    background-color: var(--nested-card-body);
}

.block.wordbank .card-header:focus,
.block.wordbank .card-header:hover {
    background-color: var(--nested-card-hover);
}

/********************
 * Definition blocks
 */

.definition {
    border: 3px solid #0BAA00;
    border-radius: 2px;
    padding: 0.5em;
    margin-bottom: 1em;
    background-color: #eef9ed;
}

.definition .term {
    font-weight: bold;
}

.definition .term:before {
    content: "Definition: ";
    font-style: italic;
    margin-right: 0.75em;
}

.definition .p:last-child {
    margin-bottom: 0em;
}

/*************************
 * Exam stuff
 */
.exam-row {
  display: flex;
}

.exam-column {
  flex: 50%;
}


/*************************
 * MathJax-related config
 */

.mathjax-definition-space {
    display: none;
}

.properties li {
    margin-bottom: 1.5em;
}

/*************************
 * Clarifications
 */
.clarifications {
    border: 1px black solid;
    font-size: 18pt;
    margin: 30px 0;
    padding: 10px;
    width: 80%;
}

.clarifications ul {
    margin: 0;
}

.clarifications li {
    padding: 5px;
}

.instructions {
    font-size: 16pt;
    line-height: 150%;
}

.penalty {
    color: red;
}

.rockit {
    font-size: 30px;
}

.rockit img {
    height: 40px;
    width: 40px;
    vertical-align: middle;
    display: inline;
}

/*************************
 * Misc
 */
#welcome h3 {
    padding-top: 0;
    border-top: none;
}

#pokemon-table {
    border: 1px solid black;
    width: 100%;
}

#cafewall-table caption {
    caption-side: top;
}

#pokemon-table th, #pokemon-table td{
    border: 1px solid black;
    padding: 5px;
    text-align: left;
}

#rubric td {
    font-size: 0.8rem;
}

#rubric ul {
    padding-left: 20px;
}

.card-header .card-title::after {
    content: "\f107";
    font-family: "FontAwesome";
    font-size: larger;
    float: right;
}

.card-header[aria-expanded="true"] .card-title::after {
    content: "\f106";
}