CSSTestMichiganOnline.css

/* Generated by less 3.11.1 */
@import url('https://raw.githubusercontent.com/i-taylor/michigan-online/refs/heads/main/sandbox.css?token=GHSAT0AAAAAADFHCZPI732OV5VCTVAFJFU22CUDOKA');
.fullImage {
  width: 100%;
}
.header {
  display: flex;
  align-items: flex-start;
  justify-content: left;
  font-family: "Atkinson Hyperlegible", Arial;
}
.header h2 {
  text-align: left;
  margin: 0;
  padding-left: 0;
  width: 100%;
  line-height: 1;
  margin-top: 5px;
  color: hotpink;
}
.header img {
  width: 40px;
  margin-right: 10px;
  float: left;
}
.canvasPageCon {
  max-width: 1240px;
  font-family: "Atkinson Hyperlegible", Arial;
}
.canvasPageCon h2 {
  color: #00274C;
  font-weight: bold;
  font-size: 1.76rem;
  text-align: left;
  font-family: "Atkinson Hyperlegible", Arial;
}
.canvasPageCon h3 {
  color: #00274C;
  font-weight: bold;
  font-size: 1.4rem;
  text-align: left;
}
.pageBody {
  padding: 0 35px;
  font-family: "Atkinson Hyperlegible", Arial;
}
.pageBody p {
  padding-bottom: 0;
}
.pageBody ol {
  margin-top: 12px;
  margin-bottom: 12px;
}
.pageBody ul {
  margin-top: 12px;
  margin-bottom: 12px;
}
.pageBody h2 {
  color: #00274C;
  font-weight: bold;
  font-size: 1.76rem;
  text-align: left;
  font-family: "Atkinson Hyperlegible", Arial;
}
.pageBody h3 {
  color: #707070;
  font-weight: bold;
  font-size: 1.4rem;
  text-align: left;
  font-family: "Atkinson Hyperlegible", Arial;
}
.pageBody h4 {
  color: #414042;
  font-weight: bold;
  font-size: 1.1rem;
  text-align: left;
  font-family: "Atkinson Hyperlegible", Arial;
}
.pageBody h5 {
  color: #100591;
  font-size: 1rem;
  text-align: left;
  font-family: "Atkinson Hyperlegible", Arial;
}
.pageBody h5 span {
  color: black;
  font-size: 1rem;
  font-weight: 400;
  text-align: left;
  font-family: "Atkinson Hyperlegible", Arial;
}
.pageBody hr {
  border-bottom: 2px solid #FFCB05;
  margin-bottom: 20px;
  margin-top: 20px;
}
/* Landing Page Styles */
.landingPageHeader {
  background-color: #00274C;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-top: 6px solid #FFCB03;
  font-family: "Atkinson Hyperlegible", Arial;
}
.landingPageHeaderTitle {
  width: 80%;
}
.landingPageHeaderTitle h2 {
  font-size: 2em;
  font-weight: bold;
  color: white;
  margin: 5px;
  font-family: "Atkinson Hyperlegible", Arial;
}
.landingPageHeaderTitle p {
  font-size: medium;
  color: white;
  margin: 5px;
  font-family: "Atkinson Hyperlegible", Arial;
}
.landingPageHeader img {
  display: flex;
  max-width: 15%;
  height: auto;
  float: right;
  align-self: flex-start;
  border: 1px solid white;
  justify-content: space-around;
}
@media (max-width: 800px) {
  .landingPageHeader h2 {
    font-size: 1em;
  }
  .landingPageHeader img {
    max-width: 20%;
  }
  .landingPageHeader p {
    font-size: 0.8em;
  }
}
.landingPageNavCon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.landingPageNavButtons {
  display: flex;
  justify-content: space-around;
  text-align: center;
  align-items: center;
  height: 50px;
  font-weight: bold;
  font-size: 18px;
  text-decoration: none !important;
  background-color: #0B57D0;
  border-top: 3px solid #58B5F7;
  color: white;
  flex: 1 1 20%;
  white-space: normal;
  transition-duration: 0.4s;
  cursor: pointer;
  border-radius: 3px;
}
.landingPageNavButtons:hover {
  font-size: 20px;
  color: white;
  text-decoration-color: white;
}
.landingPageNavButtons a {
  justify-content: center;
  text-align: center;
}
@media (max-width: 500px) {
  .landingPageNavButtons {
    flex: 1 1 80%;
    font-size: 18px;
  }
}
/* Landing Page Nav Buttons 4 */
.landingPageNavButtons4 {
  display: flex;
  justify-content: space-around;
  text-align: center;
  align-items: center;
  height: 50px;
  font-weight: bold;
  font-size: 18px;
  text-decoration: none !important;
  background-color: #f542bf;
  border-top: 3px solid #87f542;
  color: blue;
  flex: 1 1 20%;
  white-space: normal;
  transition-duration: 0.4s;
  cursor: pointer;
  border-radius: 3px;
}
.landingPageNavButtons4 a {
  justify-content: center;
  text-align: center;
}
@media (max-width: 1240px) {
  .landingPageNavCon {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 10px;
  }
  .landingPageNavButtons4 {
    flex: 1 1 45%;
    white-space: normal;
    height: 50px;
    font-size: 18px;
  }
}
@media (max-width: 500px) {
  .landingPageNavButtons4 {
    flex: 1 1 80%;
    font-size: 18px;
    padding: 8px 15px;
  }
}
.landingPageNavButtons4:hover {
  font-size: 20px;
  color: white;
}
/* Landing Page 5 buttons */
.landingPageNavCon5 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 1240px;
  margin: 0 auto;
  align-items: center;
  margin-top: 10px;
}
.landingPageNavButtons5 {
  display: flex;
  justify-content: space-around;
  text-align: center;
  align-items: center;
  height: 50px;
  font-weight: bold;
  font-size: 18px;
  text-decoration: none !important;
  background-color: #0B57D0;
  border-top: 3px solid #58B5F7;
  color: white;
  flex: 1 1 10%;
  white-space: normal;
  transition-duration: 0.4s;
  cursor: pointer;
  border-radius: 3px;
}
.landingPageNavButtons5 a {
  justify-content: center;
  text-align: center;
}
@media (max-width: 1240px) {
  .landingPageNavCon {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 10px;
  }
  .landingPageNavButtons5 {
    flex: 1 1 45%;
    white-space: normal;
    height: 50px;
    font-size: 18px;
    flex: 1 1 calc(33.33% - 15px);
  }
}
@media (max-width: 500px) {
  .landingPageNavButtons5 {
    flex: 1 1 80%;
    font-size: 18px;
    padding: 8px 15px;
  }
}
.landingPageNavButtons5:hover {
  font-size: 20px;
  color: white;
}
.moduleNavCon {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 auto;
  height: auto;
  justify-content: center;
}
.moduleNavButtons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  width: 100%;
  cursor: pointer;
  text-decoration: none !important;
  margin-bottom: 20px;
}
.moduleNavButtons a:hover {
  font-size: 19px;
  color: white;
}
.moduleNavButtons a {
  background-color: #0B57D0;
  padding: 15px;
  height: 20px;
  font-size: 18px;
  cursor: pointer;
  text-align: center;
  color: white;
  text-decoration: none !important;
  border-top: 3px solid #58B5F7;
  transition-duration: 0.4s;
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 800px) {
  .moduleNavButtons a {
    font-size: 14px;
  }
  .moduleNavButtons a:hover {
    font-size: 15px;
  }
}
@media (max-width: 667px) {
  .moduleNavButtons a {
    font-size: 14px;
    align-items: center;
    display: flex;
  }
  .moduleNavButtons a:hover {
    font-size: 15px;
  }
}
/* Landing Page People Intro */
.courseFacilitatorCon {
  padding: 20px;
}
.courseFacilitatorCon h2 {
  color: #0B57D0;
  font-weight: 700;
  text-align: left;
}
.courseFacilitatorIntro {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.courseFacilitatorPerson {
  display: flex;
  gap: 15px;
  align-items: flex-start;
  width: 45%;
}
@media (max-width: 768px) {
  .courseFacilitatorPerson {
    width: 100%;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .courseFacilitatorPerson img {
    width: 120px;
    float: none;
  }
  .courseFacilitatorPerson h2 {
    padding-bottom: 10px;
    text-align: center;
  }
  .courseFacilitatorPerson h1,
  .courseFacilitatorPerson p {
    text-align: center;
  }
  .courseFacilitatorPerson div hr {
    width: 150px;
    align-content: center;
    margin: 0 auto;
  }
}
.courseFacilitatorPerson img {
  width: 150px;
  float: left;
}
.courseFacilitatorPerson h2 {
  color: #6c757d;
  font-weight: bold;
  font-size: 16px;
  text-align: left;
  margin: 0px;
}
.courseFacilitatorPerson h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  font-style: italic;
  color: #6c757d;
}
.courseFacilitatorPerson p {
  color: #0B57D0;
  font-size: 14px;
  font-weight: 400;
}
.courseFacilitatorPerson p a {
  color: #0B57D0;
  font-size: 14px;
  font-weight: 400;
}
.courseFacilitatorPerson hr {
  width: 50px;
  border: 1px solid #FFCB05;
  margin: 10px 0;
}
.divisionLineYellow {
  border-bottom: 2px solid #FFCB05;
  margin-bottom: 20px;
  margin-top: 20px;
}
/* added 2025-05-15 need padding below yellow line */
p.divisionLineYellow {
  padding-bottom: 20px;
}
.divisionLineYellowTop {
  border-top: 2px solid #FFCB05;
  margin-bottom: 20px;
  margin-top: 20px;
}
.landingPageFooter {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  border-top: 2px solid #FFCB05;
}
.landingPageFooter img {
  display: flex;
  width: 40%;
}
.landingPageFooter p {
  display: flex;
  align-self: flex-end;
}
@media (max-width: 840px) {
  .landingPageFooter {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    position: relative;
    border-top: 2px solid #FFCB05;
  }
  .landingPageFooter img {
    display: flex;
    width: 50%;
    justify-content: left;
    align-content: flex-start;
    justify-content: flex-start;
  }
  .landingPageFooter p {
    font-size: 14px;
    text-align: center;
    display: flex;
    align-self: center;
  }
}
/* banners of different colors */
.darkBluePageHeader {
  width: 100%;
  background-color: #100591;
  height: 30px;
  border-top: 5px solid #4184F5;
  padding: 0px;
  margin-bottom: 5px;
}
.darkBluePageHeader h2 {
  color: white;
  font-weight: bold;
  font-size: 2.25rem;
  padding: 0 15px 15px 20px;
}
.darkBluePageHeader p {
  color: white;
  font-weight: bold;
  font-size: 1rem;
  padding: 5px 0 0 20px;
}
.darkBluePageHeader img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: center;
  overflow: hidden;
}
.bluePageHeader {
  width: 100%;
  background-color: #00274C;
  height: 30px;
  border-top: 5px solid #FFCB05;
  padding: 0px;
  margin-bottom: 10px;
}
.bluePageHeader h2 {
  color: white;
  font-weight: bold;
  font-size: 2.25rem;
  padding: 0 15px 15px 20px;
}
.bluePageHeader p {
  color: white;
  font-weight: bold;
  font-size: 1rem;
  padding: 5px 0 0 20px;
}
.bluePageHeader img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: center;
  overflow: hidden;
}
.lightBluePageHeader {
  width: 100%;
  background-color: #305CDE;
  height: 30px;
  border-top: 5px solid #59B5F7;
  padding: 0px;
  margin-bottom: 5px;
}
.lightBluePageHeader h2 {
  color: white;
  font-weight: bold;
  font-size: 2.25rem;
  padding: 0 15px 15px 20px;
}
.lightBluePageHeader p {
  color: white;
  font-weight: bold;
  font-size: 1rem;
  padding: 5px 0 0 20px;
}
.lightBluePageHeader img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: center;
  overflow: hidden;
}
/* Media Page Styles */
.photoGallery {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  align-self: center;
  justify-content: center;
  gap: 1%;
  margin-bottom: 20px;
}
.photoGallery img {
  width: 49%;
  height: 300px;
  display: flex;
  overflow: hidden;
  object-fit: cover;
  object-position: center;
}
.videoCon {
  border: 2px solid #FFCB05;
  padding: 15px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.videoCon img {
  width: 40px;
  margin-right: 10px;
  float: left;
}
.videoCon iframe {
  display: flex;
  align-self: center;
  align-items: center;
  margin: 0 auto;
}
.videoCon li {
  line-height: 1.5rem;
}
.videoCon hr {
  border-bottom: 2px solid #FFCB05;
  margin-bottom: 20px;
  margin-top: 20px;
}
/* Point to Note Float Right */
.pointToNoteCon {
  margin-bottom: 20px;
  overflow: hidden;
}
.pointToNoteCon p {
  margin: 0 0 10px 0;
  line-height: 1.5;
  clear: left;
  font-size: 16px;
}
.pointToNote {
  display: flex;
  flex-direction: column;
  align-self: flex-end;
  background-color: #0B57D0;
  color: white;
  padding: 20px;
  float: right;
  clear: right;
  width: 30%;
  border-top: #40ABD7 5px solid;
  margin: 0 0 0 20px;
}
.pointToNote h2 {
  color: white;
  margin-top: 0;
  font-size: 18px;
}
.pointToNote ul {
  padding-left: 20px;
  margin: 0;
}
@media (max-width: 768px) {
  .pointToNote {
    float: none;
    width: auto;
    margin: 20px 0 0 0;
    order: 2;
  }
  .pointToNoteCon {
    display: flex;
    flex-direction: column;
  }
  .pointToNoteText {
    order: 1;
  }
}
/* Point to Note Float Left */
.pointToNoteLeftCon {
  margin-bottom: 20px;
  overflow: hidden;
}
.pointToNoteLeftCon p {
  margin: 0 0 10px 0;
  line-height: 1.5;
  clear: right;
  font-size: 16px;
}
.pointToNoteLeft {
  display: flex;
  flex-direction: column;
  background-color: #0B57D0;
  color: white;
  padding: 20px;
  float: left;
  width: 30%;
  border-top: #40ABD7 5px solid;
  margin: 0 20px 0 0;
}
.pointToNoteLeft h2 {
  color: white;
  margin-top: 0;
  font-size: 18px;
}
.pointToNoteLeft ul {
  padding-left: 20px;
  margin: 0;
}
@media (max-width: 768px) {
  .pointToNoteLeft {
    float: none;
    width: auto;
    margin: 20px 0 0 0;
    order: 2;
  }
  .pointToNoteLeftCon {
    display: flex;
    flex-direction: column;
  }
  .pointToNoteLeftText {
    order: 1;
  }
}
/* Call out Box Full Width */
.fullCallOutBoxCon {
  margin-bottom: 20px;
}
.fullCallOutBoxCon p {
  line-height: 1.5;
  clear: left;
  font-size: 16px;
}
.fullCallOutBox {
  display: flex;
  flex-direction: column;
  background-color: #0B57D0;
  color: white;
  padding: 20px;
  border-top: #40ABD7 5px solid;
}
.fullCallOutBox h2 {
  color: white;
  margin-top: 0;
  font-size: 18px;
}
.fullCallOutBox ul {
  padding-left: 20px;
  margin: 0;
}
/* Side by Side Call Out Box */
.sideBySideCallOutCon {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.sideBySideCallOut {
  flex: 1;
  min-width: 250px;
  background-color: #fffae6;
  border-top: 5px solid #2F65A7;
  padding: 20px;
}
.sideBySideCallOut h2 {
  margin-top: 0;
}
.clearfix::after {
  content: "";
  display: table;
}
.healthBehaviorsDiagram {
  width: 100%;
  border: 1px solid black;
}
/* Overview and Objectives */
.quote-container {
  margin-bottom: 40px;
  background-color: white;
  border-radius: 10px;
  padding: 30px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  font-family: "noto serif", Arial;
}
.quote {
  display: flex;
  flex-direction: column;
  position: relative;
  font-family: "noto serif", Arial;
}
.quote p {
  color: #707070;
  font-size: 16px;
  font-style: italic;
  margin-bottom: 1rem;
  margin-left: 120px;
  font-weight: 300;
}
.quoteAuthor {
  color: #5f5f5f;
  font-weight: bold;
  font-size: 16px;
  margin-top: auto;
  align-self: flex-end;
  margin-bottom: 5px;
}
.quote img {
  float: left;
  width: 100px;
  height: auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 20px;
}
/* Classic Blockquote Style DELETED -  2025-05-19*/
/* Modern Minimalist Style DELETED -  2025-05-19*/
/* Artistic Quote Style DELETED -  2025-05-19*/
/* Vintage Quote Style DELETED -  2025-05-19*/
/*  Buddy Quote - Light Blue - Image on Left DELETED -  2025-05-19*/
/*  Buddy Quote - Light Blue - Image on right DELETED -  2025-05-19*/
/*  Buddy Quote - Light Yellow - Image on Left  DELETED -  2025-05-19*/
/* NEW GRADIENT BREAKS - 2025-05-12 */
.gradientBreak {
  padding: 30px 0;
}
.breakBlue {
  width: 66%;
  height: 4px;
  background: linear-gradient(to right, rgba(0, 39, 76, 0), #00274C, rgba(0, 39, 76, 0));
  margin: 0 auto;
}
.breakYellow {
  width: 66%;
  height: 4px;
  background: linear-gradient(to right, rgba(255, 203, 5, 0), #FFCB05, rgba(255, 203, 5, 0));
  margin: 0 auto;
}
/* NEW CALL OUT BOXES TEST - 2025-05-13*/
.sideBySideCallOutCon {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: flex-start;
  /* default */
  align-items: flex-start;
  /* Prevents height equalization */
  margin-top: 10px;
  color: #000000;
  /* added color black because of dark mode 2025-05-23*/
}
/* Center the callout if there’s only one */
.sideBySideCallOutCon:has(.sideBySideCallOut:only-child) {
  justify-content: center;
}
.sideBySideCallOut {
  flex: 1 1 300px;
  background-color: #D7DEF7;
  border-top: 5px solid #305CDE;
  padding: 20px;
  box-sizing: border-box;
}
.sideBySideCallOut p,
.sideBySideCallOut h2 {
  color: #000000;
  /* added color black because of dark mode 2025-05-23*/
}
/* Responsive stacking for narrower viewports */
@media (max-width: 600px) {
  .sideBySideCallOutCon {
    flex-direction: column;
    align-items: center;
  }
  .sideBySideCallOut {
    width: 100%;
    max-width: 500px;
  }
}
/* ADDED 2025-06-24 - SIDE BY SIDE CALLOUTS STRETCH WHILE OTHERS ARE NORMAL OR STRETCH */
/* ✅ NEW: Neutral styling class */
.sideBySideCallOut.neutralCallout {
  background: none;
  border-top: none;
}
/* ✅ NEW: Stretch align-items only if exactly 2 styled callouts */
.sideBySideCallOutCon:has( .sideBySideCallOut:not(.neutralCallout)):has( .sideBySideCallOut:not(.neutralCallout):nth-of-type(2):last-child) {
  align-items: stretch;
}
/* NEW BUDDY QUOTES - DELETED XINTIAN ORIGINAL - REFER TO MICHIGANONLINE22.CSS */
.quoteBox {
  display: flex;
  align-items: stretch;
  width: 100%;
  margin: 2em 0;
  font-family: "noto serif", Arial;
  color: #000000;
  /* added color black because of dark mode 2025-05-23*/
}
.imgWrapper {
  width: 150px;
  flex-shrink: 0;
  display: flex;
}
.imgWrapper::before {
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 1;
  /* Enforces square shape */
}
.imgWrapper img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.imgWrapper {
  position: relative;
}
/* The quote text */
.quoteContent {
  flex: 1 1 0;
  padding: 20px;
  box-sizing: border-box;
}
.quoteContent blockquote {
  font-weight: normal;
  font-size: 1.2em;
  margin: 0 0 10px 0;
  padding-left: 0;
  border-left: none;
  /* color: #000000;  */
  /* added color black because of dark mode 2025-05-23*/
}
.quoteContent cite {
  font-style: italic;
  font-size: 0.9em;
  display: block;
  /* color: #000000;  */
  /* added color black because of dark mode 2025-05-23*/
}
/* Background colors */
.quoteStyle1 {
  background-color: #D7DEF7;
}
.quoteStyle2 {
  background-color: #FDEDAF;
}
/* Responsive fallback */
@media (max-width: 600px) {
  .quoteBox {
    flex-direction: column;
  }
  .imgWrapper {
    width: 100%;
  }
  .imgWrapper::before {
    aspect-ratio: auto;
    padding-top: 56.25%;
    /* 16:9 as fallback */
  }
}
/* TABLES SIMPLIFIED DELETED OLD ALTERNATING VERSIONS FROM 22 - 2025-05-19 */
/* table 1 row nth.child() */
.umich-table-row-stripe {
  width: 100%;
  border-collapse: collapse;
  /* font-family: inherit;  */
  text-align: left;
  font-family: "Atkinson Hyperlegible", Arial;
}
.umich-table-row-stripe th {
  background-color: #00274C;
  /* UM Blue */
  color: #FFFFFF;
  padding: 0.5em;
}
.umich-table-row-stripe td {
  padding: 0.5em;
  border: 2px solid #FFFFFF;
  color: #000000;
}
.umich-table-row-stripe tbody tr:nth-child(odd) {
  background-color: #D7DEF7;
  /* light blue */
}
.umich-table-row-stripe tbody tr:nth-child(even) {
  background-color: #FCF5CE;
  /* light yellow */
}
/* table 2 col nth.child() */
.umich-table-col-stripe {
  width: 100%;
  border-collapse: collapse;
  /* font-family: inherit; */
  /* border: 2px solid #FFFFFF; */
  font-family: "Atkinson Hyperlegible", Arial;
  text-align: left;
}
.umich-table-col-stripe th {
  background-color: #00274C;
  /* UM Blue */
  color: #FFFFFF;
  padding: 0.5em;
}
.umich-table-col-stripe td {
  padding: 0.5em;
  border: 2px solid #FFFFFF;
  color: #000000;
}
/* Column striping only in tbody */
.umich-table-col-stripe tbody td:nth-child(odd) {
  background-color: #D7DEF7;
  /* light blue */
}
.umich-table-col-stripe tbody td:nth-child(even) {
  background-color: #FCF5CE;
  /* light yellow */
}
/* NEW TABLE REQUEST FROM 2026-01-24 THURSDAY - CREATED 2026-01-23 FRIDAY - ONLY HEADER BLUE */
.umich-table-plain {
  width: 100%;
  border-collapse: collapse;
  /* font-family: inherit;  */
  text-align: left;
  font-family: "Atkinson Hyperlegible", Arial;
}
/*table, td, th {
  border: 3px solid red;
}*/
.umich-table-plain th {
  background-color: #00274C;
  /* UM Blue */
  color: #FFFFFF;
  padding: 0.5em;
  border: 1px solid #00274C;
}
.umich-table-plain td {
  padding: 0.5em;
  border: 2px solid #FFFFFF;
  color: #000000;
  border: 1px solid #00274C;
}
/* ACCORDION UPDATED AND REMOVED ORIGINAL - USING NTH.CHILD - ADDED UMICH */
/* Base accordion styles */
.umich-accordion-a,
.umich-accordion-b {
  margin: 2em 0;
  /* font-family: sans-serif; */
  font-family: "Atkinson Hyperlegible", Arial;
  color: #000000;
  /* added color black because of dark mode 2025-05-23*/
}
.umich-accordion-a > div:first-child,
.umich-accordion-b > div:first-child {
  background-color: #00274C;
  /* UM Blue */
  color: #ffffff;
  padding: 1em;
  font-weight: bold;
  font-size: 1.2em;
}
details {
  margin-bottom: 2px;
}
summary {
  cursor: pointer;
  padding: 1em;
  font-weight: bold;
}
details > div {
  padding: 0.2em 1em;
  margin: 0;
}
/* Accordion A - alternating colors */
.umich-accordion-a details:nth-of-type(odd) {
  background-color: #D7DEF7;
  /* Blue row */
}
.umich-accordion-a details:nth-of-type(even) {
  background-color: #FCF5CE;
  /* Yellow row */
}
/* Accordion B */
.umich-accordion-b details {
  background-color: #D7DEF7;
  border-top: 4px solid #305CDE;
}
/* paragraphs in accordians  2025-05-23 may be able to do .umich-accordion-a 
    .umich-accordion-a details > div > p,
    .umich-accordion-b details > div > p
    will target specifically the <p> after details in the child div */
.umich-accordion-a p,
.umich-accordion-b p {
  color: #000000;
}
/*  2025-05-19
testing revert pre font back to default
all: revert; resets all properties to the user-agent or stylesheet default.
Follow up with font-family: monospace; to ensure cross-browser consistency.
*/
/* holding this for later. 
https://umich.instructure.com/courses/794703/pages/template-quotes 
uses wrong font but other pages use correct pre font  */
/* pre {
  all: revert;
 } */
@media (prefers-color-scheme: dark) {
  /* this changed the course title on homepage to green */
  /* .canvasPageCon h2{
    color: #17ea00;
    font-weight: bold;
    font-size: 1.76rem;
    text-align: left;
    font-family: "Atkinson Hyperlegible", Arial;
    } */
  /* .pageBody h2 {
    color: #fff000;
    font-weight: bold;
    font-size: 1.76rem;
    text-align: left;
    font-family: "Atkinson Hyperlegible", Arial;
    } */
}
/* homepage continue learning button */
.continueButton {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 12px 24px;
  font-weight: bold;
  font-size: 18px;
  text-decoration: none !important;
  background-color: #0B57D0;
  border-top: 3px solid #58B5F7;
  color: white;
  white-space: nowrap;
  transition: font-size 0.4s ease;
  cursor: pointer;
  border-radius: 3px;
  margin: 20px auto;
}
.continueButton:hover {
  font-size: 20px;
  color: white;
  text-decoration-color: white;
}
@media (max-width: 500px) {
  .continueButton {
    font-size: 18px;
    padding: 10px 20px;
  }
  .continueButton:hover {
    font-size: 20px;
  }
}