/*
Accessibility of links styles.
These colors were chosen to make links visible on both
a white background as well as the very light blue announcement
background   
*/
a:link {
  /*color: #3434b7;*/
  color: #337ab7;
  font-weight: 600;
}

a:visited {
  color: #337ab7;
  font-weight: 600;
}

h2 {
  margin-top: 30px;
}

/* 
Console:
Style for a pre tag with text that should look like a
console (aka terminal) */
.console {
  color: black;
  border-style: solid;
  border-radius: 5px;
  border-width: 1px;
  padding: 10px;
}



/**
Handout Styles:
This is the CSS class for a handout. A few notes:
The actual width of content is 700px. When the 
handout is wider than 900px this inclues up to 100px
padding on either side. To make the handout visible
it must be on a grey background (often the body has
greyBackground as a style class)
**/
.handout {
  background-color: white;
  padding: 100px;
  padding-top: 50px;
  max-width: 930px;
  margin-top: 20px;
  margin-bottom: 50px;
}

/* Style for the body of a handout page */
.greyBackground {
  background-color: #535659
}

/* When the handout drops bellow a threshold remove padding */
@media (max-width: 1000px) {
  .greyBackground {
    background-color: white;
  }

  .handout {
    /* Note: since padding drops from 100 to 15, max-width
       also drops. 760 = 930 - (100-15)*2 */
    max-width: 760px;
    padding-left: 15px;
    padding-right: 15px;
  }
}



/**
Blockquote: for nice looking quotations;
*/

.blockquote-cs106a {
  background: #f9f9f9;
  border-left: 5px solid #aaa;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
}


.handoutImg {
  max-width: min(500px, 100%)
}

.timeRow {
  display: inline-flex;
  align-items: center;
}

.beforeAfterWithArrow {
  display: flex;
  justify-content: center;
}

.beforeAfterArrow {
  padding-left: 5px;
  padding-right: 5px;
  align-items: center;
  display: flex;
}

.beforeAfter {
  flex-grow: 1;
  max-width: 45%;
}

.announcement {
  background-color: #EFF1FC;
  /*background-color: #F7F8FF;*/
  /*border-color: #bce8f1;*/
  border-style: none;
  margin-bottom: 20px;
}

.announcement-staff {
  background-color: #f0f5f2;
  /*border-color: #a1e8bd;*/
  margin-bottom: 20px;
}

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

.lectureVideo {
  width: 100%;
  height: 200px;
}

.announcementImg {
  width: 100%;
}

.lectureVideoSingle {
  width: 100%;
  height: 300px;
}

.exampleFrame {
  border-style: none;
  margin-top: 15px;
}

.scrollArrow {
  overflow: hidden;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  border: 0px;
  position: absolute;
  margin-left: 5px;
  margin-top: 5px;
  width: 50px;
  height: 50px;
  z-index: 2;
}

.disabled-text {
  color: grey;
}


.blue {
  color: #346df1;
  font-weight: bold;
}


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

.extra-body {
  padding: 1rem !important;
}

.nav-icon {
  /* padding-top: 2px;
    font-size: 1.5rem;
    padding-bottom: 0px;*/
}


p {
  /*text-align: justify;*/
}

h3 {
  margin-top: 30px;
}

pre {
  background-color: white;
}

li {
  /*text-align: justify;*/
  margin-bottom: 5px;
}

code {
  color: black;
  padding: 0px;
  border: 0px;
  background-color: transparent;
  font-weight: bold;
}

.lectureMaterials {
  margin-top: 5px;
}

.inOut {
  position: absolute;
  top: 90px;
  color: hsl(0, 0%, 60%);
}

.subtitle {
  color: #959595;
}

.classLinks {
  position: absolute;
  top: 80px;
  color: hsl(0, 0%, 60%);
}

.mapOverlay {
  background: transparent;
  position: relative;
  width: 100%;
  height: 450px;
  /* your iframe height */
  top: 450px;
  /* your iframe height */
  margin-top: -450px;
  /* your iframe height */
  z-index: 9999;
}

.subtleHeading {
  font-size: 14px;
  font-weight: 700;
  color: #959595;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 5px;
}

.nopadding {
  padding: 0px;
}

.caption {
  min-height: 98px;
}

.calendarCell {
  height: 150px;
  min-width: 120px;
  max-width: 250px;
  border: 1px solid black;
  vertical-align: top;
  padding: 5px;
}

@media (min-width: 500px) {}

.calendarWeekCell {
  max-width: 50px;
  vertical-align: top;
}

.overview-table {
  overflow: auto;
}

.overview-table-title {
  overflow: hidden;
}

.overview-table-list {
  padding-left: 0;
  list-style: none;
}

.overview-table-list-li {
  float: left;
  width: 33.3%;
  min-height: 150px;
  padding: 10px;
  background-color: #f9f9f9;
  border: 3px solid #fff;
  margin: 0px;
}

.overview-table-list-li-title {
  float: left;
  width: 33.3%;
  height: 30px;
  padding: 10px;
  text-align: center;
}

.overview-class-title {
  /*text-align:center !important;*/
}

.counting {
  background-color: aliceblue;
}

a:link:after,
a:visited:after {
  content: "";
}

pre {
  -moz-tab-size: 3;
}

/* Code for Firefox */
pre {
  -o-tab-size: 3;
}

/* Code for Opera 10.6-12.1 */
pre {
  tab-size: 3;
}

.comment {
  color: #006400;
  font-weight: bold;
}

.reading-body {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 15px;
}

.homeContainer {
  flex-wrap: wrap;
}

.info-col {
  position: sticky;
  top: min(10px, 100% - 1400px);
  width: 200px;
  /*height: 1400px;*/
  z-index: 20;
}

.announcement-col {
  flex: 2;
  padding-left: 0px;
  display: flex;
  justify-content: center;
}

.announcement-col-inner {
  max-width: 600px;
  /*max-height: 1400px;
  overflow-y: scroll;
  overflow-x: hidden;
  padding-right: 10px;*/
}

.extra-col {
  padding-left: 20px;
  width: 220px;
  /*height: 1170px;*/
  position: sticky;
  top: min(10px, 100% - 1170px);
}

.mobile-only {
  display: block;
}

.non-mobile-only {
  display: none;
}

.mobile-only-inline {
  display: inline;
}

.non-mobile-only-inline {
  display: none;
}

.non-mobile-only-tc {
  display: none;
}

.round-img {
  border-radius: 5px;
  max-width: min(45vw, 200px);
  width: 100%;
}

@media (min-width: 500px) {
  .mobile-only {
    display: none;
  }

  .non-mobile-only {
    display: block;
  }

  .non-mobile-only-inline {
    display: inline;
  }

  .mobile-only-inline {
    display: none;
  }

  .non-mobile-only-tc {
    display: table-cell;
  }

  .round-img {
    border-radius: 5px;
    max-width: min(45vw, 175px);
    width: 100%;
  }


}

@media (min-width: 1000px) {
  .extra-col {
    display: block
  }
}

.myTocContainer {
  display: none;
}

@media (min-width: 1160px) {
  .myTocContainer {
    display: block;
  }
}

@media (min-width: 500px) {

  .announcement-col {
    padding-left: 20px;
  }
}

.moment {
  font-style: italic;
  margin-bottom: 10px;
}

/* navbar
.navbar-inverse {
    background-color: #432109 !important;
    border-color: #432109 !important;
}
 */

/*.well{
    background-color: mintcream;
        border-color: #c0e184;
}*/

/*.well{
    background-color: white;
        border-color: #bce8f1;
}*/

.well {
  background-color: aliceblue;
  border-color: #bce8f1;
}

.secondHeading {
  margin-top: 20px;
  margin-bottom: 10px;
}

.input {
  color: blue;
  font-style: bold;
}

.sidebarOuter {
  position: relative;
}

@media (min-width: 800px) {
  .sidebar {
    width: 160px;
  }
}

/* INDEX */

.title {
  font-size: 30px;
  font-weight: bold;
}

.staffBox {
  text-align: left !important;
}

.logoImg {
  float: left;
  width: 120px;
}

.headerText {
  margin-left: 10px;
  float: left;
}

.newsfeedTitle {
  font-size: 16px;
  color: #3b5998;
  font-weight: bold;
  margin-bottom: 0px;
}

.sidebaricon {
  width: 15px !important;
  margin-right: 5px;
}

.newsfeedHeader {
  margin-bottom: 5px;
}

.google-maps {
  position: relative;
  padding-bottom: 75%;
  height: 0;
  overflow: hidden;
}

.google-maps iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

.staffImg {
  height: 120px;
}

.text-secondary {
  color: #6c757d !important;
}

.nopadding {
  padding: 3 !important;
  margin: 0 !important;
}

a {
  color: #337ab7;
  text-decoration: none;
}

.thumbnail {
  margin-bottom: 5px;
  white-space: nowrap;
}

.thumbnailTitle {
  text-align: center;
  color: black;
}

/* OVERVIEW */

.overviewIcon {
  margin-right: 7px;
}

/* This is all standard from tocbot example */

.toc {
  overflow-y: auto;
}

.toc>ul {
  overflow: hidden;
  position: relative;
}

.toc>ul li {
  list-style: none;
}

.toc-list {
  margin: 0;
  padding-left: 10px;
}

a.toc-link {
  color: currentColor;
  height: 100%;
}

.is-collapsible {
  max-height: 1000px;
  overflow: hidden;
  transition: all 300ms ease-in-out;
}

.is-collapsed {
  max-height: 0;
}

.is-position-fixed {
  position: fixed !important;
  top: 0;
}

.is-active-link {
  font-weight: 700;
}

.myToc>ul>li>.nav-link {
  color: #aaa !important;
  border-left: 2px solid #eee !important;
  margin-left: 2px !important;
}

.myTocTitle {
  color: #888;
  margin-left: 18px;
}

/* this puts light bar to the left of all links */

/* Tiny tweaks/customizations */

/* use larger font, light gray */
.myToc>ul {
  font-size: 110%;
  color: #aaaaaa;
}

/* Use cardinal red bar for active link */
.is-active-link::before {
  background-color: #8c1515;
}

/* spacing between items */
.toc>ul li:not(:last-child) {
  margin-bottom: 0.5em;
}

.myToc>ul>li {
  margin: 0px;
}

.myToc>ul>li>.nav-link {
  padding-left: 12px !important;
}

.myToc>ul>li>.nav-link:hover {
  padding-left: 12px !important;
  color: black !important;
}

.myToc>ul>li>.nav-link.active {
  color: #555 !important;
  font-weight: normal !important;
}