/*****************
 * Overall layout
 */

: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;
}

.wrapper {
    margin-top: 1em;
    margin-left: auto;
    margin-right: auto;
    min-width: 50ch;
    max-width: 125ch;
    padding-left: 1em;
    padding-right: 1em;
}

.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;
}

.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;
    }
}

/*****************************
 * 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
 */

.nav-sidebar {
    flex: 0 0 160px;
}

@media (max-width: 575.98px) {
    .nav-sidebar {
        flex: 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%;
    /*border-left: 0.2em solid #fff;
    transition: border 100ms ease-out;*/
}

.nav-sidebar li a i {
    margin-right: 0.1em;
}

.nav-sidebar li.active a,
.nav-sidebar li a:hover,
.nav-sidebar li a:focus,
.nav-sidebar li a:active {
    /*border-left: 0.2em solid #aaa;*/
    font-weight: bold;
    text-decoration: none;
}

/* .nav-sidebar li.active a:hover,
.nav-sidebar li.active a:focus,
.nav-sidebar li.active a:active {
    border-left: 0.2em solid #000;
} */

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


/*************
 * Typography
 */

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;
    padding-top: 1em;
    margin-bottom: 0.5em;
    border-top: 1px solid #ccc;
}

h4 {
    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%;
}

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;
}

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

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

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

/***********
 * 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;
}


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

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

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

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

.calendar .week {
    font-weight: bold;
}


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

.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 .assignments {
    text-overflow: ellipsis;
    overflow: hidden;
}

.calendar .day:nth-child(odd) {
    background-color: #f2f7ff;
}

.calendar .day:nth-child(even) {
    background-color: #e8edf4;
}

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

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

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

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

.calendar .topic {
    flex-basis: 16ch;
    flex-grow: 1;
}

/* 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 {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 0;
}

.calendar li {
    text-indent: -1.5ch;
    padding-left: 1.5ch;
}

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

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

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

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

    /* .calendar .date-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 .assignments {
        flex-basis: 100%;
        flex-grow: 1;
        margin-bottom: 0.2em;
    }

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

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

    .calendar .materials.empty,
    .calendar .references.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.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;
}
*/

/********************
 * Staff list widget
 */

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

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

.course-staff .profile-pic img {
    width: 100%;
}

.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;
}

/*****************************************
 * 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(--blue);
}

.block .card-body {
    background-color: var(--blue-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(--blue);
}

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

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

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


.block.background .card-body {
    background-color: var(--blue-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 {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

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

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