/*
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 {
  font-weight: 600;
}

.bold {
  font-weight: 600;
}

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

/* 
Bordered:
Style for a pre tag with text that should look like a
console (aka terminal) */
.bordered {
  border-style: solid;
  border-radius: 5px;
  border-width: 1px;
  padding:10px;
  overflow-x: scroll;
  overflow-y: hidden;
}

/* 
purpleBox:
*/
.purpleBox {
  /*border-top: 2px solid black;*/
  padding:20px;
  /*border-bottom: 2px solid black;*/

  background-color: #EFF1FC;
  margin-top:20px;
  margin-bottom: 30px;
  border-radius:0.25rem;
}

.mathFont {
  font-family: "Times New Roman", serif;
  font-size: 18px;
}

/***
Fancy Mobile / Desktop switching for the index page
**/
#index-wide {
  display: none;
}

/* When the handout goes above a threshold change visibilty */
@media (min-width: 767px) {
  #index-wide {
    display: block
  }
}

/**
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;
}
.handoutRow {
  display: flex;
  justify-content: center;
}
/* 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;
    margin-top:0px;
    padding-top:30px;
  }
}

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

.progress-icon i{
  font-size: 32px;
}

.progress-icon {
  text-align: center;
}

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

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

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

.image-container {
  width: 100%; /* Adjust this to your needs */
  padding-bottom: 100%; /* This makes it square */
  position: relative;
  overflow: hidden; /* This ensures that the image does not overflow the container */
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* This makes the image cover the container without distortion */
}

.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 {
  color:grey;
  cursor: not-allowed;
  opacity: 0.5;
  text-decoration: none;
}


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

.left-col {
    position: sticky;
    top:min(10px, 100% - 1450px);
    width: 200px;
    height:610px;
    z-index: 20;
    padding-bottom: 10px;
  }

  .teachingTeamIndexPhotos {
    display: flex;
    flex-wrap:wrap;
    justify-content: space-between;
  }

  .teachingTeamIndexPhoto {
    width:95px;
    
  }

  .teachingTeamIndexPhoto img {
    border-radius: 5px;
  }

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

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

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

.index-mobile {
  display: block;
}

.index-wide {
  display: none;
}

.tablet-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: 650px) {
  .index-wide {
    display: block;
  }

  .index-mobile {
    display: none;
  }
}

@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;
  line-height: 1.3;
}

.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: white #e3e3e3 !important;
  border-left: 2px solid #e3e3e3 !important;
  margin-left: 2px !important;
}

.myTocTitle {
  color: #ddd;
  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: white;
}

.myToc > ul > li > ul > li > a {
  color: #ddd !important;
  border-left: none;
}


.myToc > ul > li > a {
  color: #ddd !important;
}
/* Use cardinal red bar for active link */
.is-active-link::before {
  color: white;
}

/* 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: white !important;
}

.myToc > ul > li > .nav-link.active {
  color: white !important;
}


.mobileHomeCol {
  margin-left:-15px;
}