body{
    /* cocc colors */
  --yellow: #EEB111;
  --cocc-dark-blue: #2c5367;
  --web-blue: #2B637F;
  --cocc-green: #78A12E;
  --cocc-purple: #956d8e;
  --cocc-light-blue: #98aec8;
  --bright-blue: #0096d6;
  --grey-text: #333;
  --cocc-grey:#58595b;
  --cocc-red: #d82a23;
  --lightgrey: lightgrey;
  --dark-grey: #231f20;
  }
/*updates contrast to links in main text body and font boost*/
  .show-content a {color: #0000ee;}
  .show-content a:hover {color: var(--web-blue);}

  #section-tabs li {font-size: 16.5px;}
  /* .menu-item__text {font-size: 16.5px;} */

/*widens main nav bar from 84px*/
  body.primary-nav-expanded .ic-app-header {width: 90px;}
  body.primary-nav-expanded .ic-app-header__logomark {height: 91px;}

/*removes external link icon and youtube embed thumbnails */
.ui-icon-extlink {display:none !important;}
.external_link_icon {display:none !important;}
.youtubed > .media_comment_thumbnail {display: none !important;}

/*removes inaccessible fonts*/
div[title=" Architect's Daughter"],
div[title=" Courier New"],
div[title=" Courier"],
div[title=" Georgia"],
div[title=" Times New Roman"] {
  display: none !important;
}

*[style*="Architects Daughter"],
*[style*="Courier"],
*[style*="Georgia"],
*[style*="Times New Roman"] {
  font-family: "Lato Extended", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

/*hides inaccessible text selection choices*/
/* --- TEXT COLOR: keep only the bottom 3 rows --- */
body:has(.tox-split-button[aria-expanded="true"][title="Text color"]) .tox-menu .tox-swatches__row:not(:nth-last-child(-n+3)),
body:has(.tox-split-button[aria-expanded="true"][aria-label="Text color"]) .tox-menu .tox-swatches__row:not(:nth-last-child(-n+3)) {
  display: none !important;
}

/* --- BACKGROUND COLOR: keep only the first and the last row --- */
body:has(.tox-split-button[aria-expanded="true"][title="Background color"]) .tox-menu .tox-swatches__row:not(:first-child):not(:last-child),
body:has(.tox-split-button[aria-expanded="true"][aria-label="Background color"]) .tox-menu .tox-swatches__row:not(:first-child):not(:last-child) {
  display: none !important;
}

/* general styling */
a.btn {
  color: var(--dark-grey);
}

.code {
  background-color: whitesmoke; 
  padding: 10px; 
  margin: 10px; 
  font-family: 'Courier New', Courier, monospace; 
  border-radius: 3px;
  line-height: 1.5;
}

.hr_blue {
  margin: 1em; border: var(--cocc-dark-blue) solid 2px;
}

.imgborder {border: solid lightgrey 1px;}

/* Heading Banners*/
.lg-header-dark{
    background-color: var(--cocc-dark-blue); 
    color: white;
    text-align: center;
    padding: 8px;
    margin: 10px 0;      
}
.sm-header-dark{
    background-color: var(--cocc-grey);
    color: white;
    text-align: center;
    padding: 8px;
    margin: 10px 0;
}

.lg-header-light{
    background-color: #006397;
    color: white;
    text-align: center;
    padding: 8px;
    margin: 10px 0;
}
.sm-header-light{
    background-color: whitesmoke;
    color: var(--grey-text);
    text-align: center;
    padding: 8px;
    margin: 10px 0;
}
.header-bars {
  color: var(--cocc-dark-blue);
  border-top: 3px solid var(--cocc-dark-blue);
  border-bottom: 3px solid var(--cocc-dark-blue);
  padding: 6px; margin: 10px 0;
}

/* Very basic callout box */
.borderbox {
    text-align: center; 
    border: solid 2px; 
    font-size: 20px; 
    margin: 12px; 
    padding: 8px;
}

.quotebox {
  text-align: center; 
  border: lightgrey dashed 2px; 
  font-size: 18px; 
  margin: 12px; 
  padding: 8px;
}

/* Adds grey background */
.grey {
    background-color: whitesmoke;
    padding: 8px;
}

/* Grid option for column layouts */
.grid{
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(200px, auto));
}
  .grid img {
  max-width: 100%; /* Ensure images don't exceed their parent container width */
  height: auto;
  display: block;
}

.grid > div {
  padding: 8px;
}

.center {
text-align: center;
}

.center img {  
  display: block;
  margin-left: auto;
  margin-right: auto;
}
/* Accordion Styling */ 
details {
  background-color: white;
  margin: 10px;
}

details p {
  margin: 10px;
}

details ul {
  margin-left: 30px;
}

details li {
  line-height: 1.5;
  list-style-type: disc;
}

/* Base Accordion Style */
.accordion {
font-size: 18px;
padding: 12px;
text-align: left;
cursor: pointer;
}

details[open] > .accordion {
background-color: var(--lightgrey);
color: var(--dark-grey);
border: none;
}

/* Shared marker override */
.accordion::marker {
content: ' ';
}

/* Shared expand/collapse icon */
.accordion:after {
content: '  +';
}

details[open] > .accordion:after {
content: "\0336";
margin-left: .5rem;
}

/* hover effects */
.accordion.solid-blue:hover {
background-color: var(--lightgrey);
color: var(--darker-grey);
}

.accordion.blue-border:hover {
background-color: var(--lightgrey);
color: var(--dark-grey);
border: none;
}

.accordion.bottom-border:hover {
background-color: var(--lightgrey);
color: var(--dark-grey);
border: none;
}
.accordion.grey:hover {
background-color: var(--lightgrey);
}

/* Style 1 - Solid Blue */
.accordion.solid-blue {
background-color: var(--web-blue);
color: white;
font-size: 24px;
text-align: center;
padding: 10px;
}

/* Style 2 - Blue Border */
.accordion.blue-border {
border: 2px solid var(--web-blue);
text-align: center;
}

/* Style 3 - Bottom Border */
.accordion.bottom-border {
padding-left: .25rem;
border-bottom: 2px solid var(--cocc-dark-blue);
text-transform: uppercase;
color: var(--cocc-dark-blue);
display: flex;
justify-content: space-between;
}

/* Style 4 - Grey Accordion */
.accordion.grey{
background-color: whitesmoke;
color: var(--grey-text);
display: flex;
justify-content: space-between;
}

/* Resources Menu */
.resources_menu {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 10px;
margin: 20px 0;
}

/* Base Button */
a.cocc-btn {
padding: 10px;
text-decoration: none !important;
color: var(--dark-grey)
display: flex;
flex-flow: row wrap;
align-items: center;
align-content: center;
border-radius: 5px;
text-align: center;
height: 100%;
cursor: pointer;
border: none;
flex: 1 1 auto;
}

/* Hover */
a.cocc-btn:hover {
background-color: var(--cocc-dark-blue);
color: white;
}

/* Variants */
.cocc-btn.btn-primary {
font-size: 22px;
min-width: 220px;
background-color: var(--web-blue);
color: white !important;
flex: 1 0 30%;
height: 100px;
}

.cocc-btn.btn-secondary {
font-size: 18px;
min-width: 160px;
background-color: var(--cocc-light-blue);
color: var(--dark-grey);
height: 50px;
flex: 1 1 20%;
}

.cocc-btn.btn-green {
font-size: 18px;
min-width: 300px;
background-color: var(--cocc-green);
color: var(--dark-grey);
height: 50px;
flex: 1 0 auto;
}

.cocc-btn.btn-yellow{
font-size: 18px;
min-width: 300px;
background-color: var(--yellow);
color: var(--dark-grey);
height: 50px;
flex: 1 0 auto;
}

/* Responsive Tweaks */
@media (min-width: 760px) and (max-width: 840px),
       (max-width: 470px) {
  .cocc-btn.btn-green {
    font-size: 16px;
  }
}

@media (max-width: 470px) {
  .cocc-btn.btn-secondary {
    font-size: 18px;
  }
}

  /* Callouts */
.callout {
    position: relative;
    margin: 0 0 1rem 0;
    padding: 1rem;
    border: 1px solid rgba(10, 10, 10, 0.25);
    border-radius: 0;
    background-color: white;
    color: #0a0a0a;
}

.callout.primary {
    background-color: #d9eaf2;
    color: #0a0a0a;
}

.callout.secondary {
    background-color: #e6e6e6;
    color: #0a0a0a;
}

.callout.success {
    background-color: #e6f7d2;
    color: #0a0a0a;
}

.callout.warning {
    background-color: #fef2d6;
    color: #0a0a0a;
}

.callout.alert {
    background-color: #ffc9c9;
    color: #0a0a0a;
}

.callout.small {
    padding-top: 0.5rem;
    padding-right: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0.5rem;
}

.callout.large {
    padding-top: 3rem;
    padding-right: 3rem;
    padding-bottom: 3rem;
    padding-left: 3rem;
}

/* Lecture Page Container */
.page-container {
  margin: 1rem 0;
  margin-inline: auto;
  display: flex;
  flex-flow: column wrap;
}
.container-title h2 {font-size: clamp(2rem, 2vw, 3rem);}
.container-title {
  background-color:var(--cocc-dark-blue);
  color: white;
  padding: 1rem;
}
.container-page-content {
  border: solid var(--cocc-dark-blue) 2px;
  padding: .5rem 1rem;
}

.container-button-row{
  display: flex;
  flex-flow: row wrap;
  margin: .5rem 0;
  gap: .5rem;
  justify-content: space-evenly;
}

.container-button-row > .btn {
flex:1;
min-width: 10rem;
display: flex;
flex-flow: row wrap;
align-items: center;
align-content: center;
}
 
/* Lecture Nav Buttons */
.nav_buttons {
    display: flex; 
    flex-flow: row wrap;
    justify-content: center;
    gap: .5rem;
}

.nav_buttons .btn {
    flex:1;
    padding: .5rem 1rem;
    text-align: center;
    min-width: 10rem;
}

.nav_buttons ul li, .nav_buttons a {
    text-decoration: none;
    list-style-type: none;
}

.nav_buttons a:hover {
    background-color: #2D637F;
    color: white;
    font-weight: 500;
}


/* Course Evaluation Widget */

@import 'https://cocc.evaluationkit.com/canvas/css';
// Add some custom css to the head the first time 
if (!styleAdded) { 
$('head').append(iconCSS); 
styleAdded = true; 
}