body{
    /* cocc colors */
  --cocc-blue: #2d637f;
  --yellow: #EEB111;
  --dark-blue: #2c5367;
  --cocc-green: #78A12E;
  --cocc-purple: #956d8e;
  --light-blue: #91B7DB;
  --bright-blue: #0096d6;
  --darker-grey: #333;
  --dark-grey: #4A4A4A;
  --cocc-grey: #545861;
  --lighter-grey: #E6E7E8;
  --cocc-red: #d82a23;
  }
/*updates contrast to links in main text body and font boost*/
  .show-content a {color: #0000ee;}
  .show-content a:hover {color: #006397;}

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

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

  .imgborder {border: solid lightgrey 1px;}

  /* Heading Banners*/
  #h2_dark{
      background-color: var(--dark-blue); 
      color: white;
      text-align: center;
      padding: 8px;
      margin: 10px 0;      
  }
  #h3_dark{
      background-color: #377189;
      color: white;
      text-align: center;
      padding: 8px;
      margin: 10px 0;
  }
  
  #h2_light{
      background-color: var(--cocc-blue);
      color: white;
      text-align: center;
      padding: 8px;
      margin: 10px 0;
  }
  #h3_light{
      background-color: whitesmoke;
      color: var(--darker-grey);
      text-align: center;
      padding: 8px;
      margin: 10px 0;
  }
  #bars {
    color: var(--dark-blue);
    border-top: 3px solid var(--dark-blue);
    border-bottom: 3px solid var(--dark-blue);
    padding: 8px; 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;
  }
  /* Columns */
  .colcontainer{
    display:flex;
    flex-flow: row wrap;
  }
  
  #col {flex: 1; min-width:200px; padding: 8px;}
  
  /* For specific two or three column layouts with fixed size */
  #twocol{
    flex-basis: 50%;
    flex: 1;
    padding: 8px;
    min-width: 350px;
  }
  #threecol{
    flex-basis: 30%;
    flex: 1;
    padding: 8px;
    min-width: 300px;
  }
  
  /* 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 Style 1*/
  #bluebox {
      background-color: #2D637F;
      color: white;
      text-align: center;
      font-size: 24px;
      padding: 10px;
    }
    
    #bluebox:hover {
      background-color: whitesmoke;
      color: var(--darker-grey);
      cursor: pointer;
    }
    
    /* Accordion Style 2 */
    
    #blueborder {
      border:#2D637F solid 1px;
      text-align: center;
      color: #2D637F;
      font-size: 18px;
      padding: 12px;
    }
    
    #blueborder:hover {
      background-color: whitesmoke;
      font-weight: 700;
      border: none;
      cursor: pointer;
    }
    
    /* Accordion Style 3 */
    #noborder {
      text-align: center;
      text-transform: uppercase;
      color: #2D637F;
      font-size: 18px;
      margin: 8px 0;
    }
    
    #noborder:hover {
      color:#0096d6;
      cursor: pointer;
    }
  
  /* Accordion 4 */
  #accordion {
    background-color: whitesmoke;
    text-align: left;
    color: #333;
    font-size: 18px;
    padding: 12px;
    display: flex;
    justify-content: space-between;
  }
  
  #accordion:hover {
    background-color: lightgrey;
    cursor: pointer;
  }
  
  #accordion::marker {
    content: ' ';
  }
  
  #accordion:after {
    content: '+';
    /* transition: 0.2s; */
  }
  
  details[open] > #accordion::after {
    content: "\0336";
    margin-right: .25em;
  }
  
  details[open] > #accordion{
    background-color: lightgrey;
  }
    
  details {
      background-color: white;
      margin: 10px 20px;
      position: relative;
    }
    
    details p {
      margin: 10px 10px;
    }
    
    details ul {
      margin-left: 30px;
    }
    
    details li {line-height: 1.5; list-style-type: disc;}
  
  /* Lecture Nav Buttons */
  .nav_buttons {
      display: flex; 
      flex-flow: row wrap;
      justify-content: center;
      gap: .5rem;
  }
  
  .nav_buttons .button {
      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;
  }
  
  
   /* Resource Page Buttons */
  nav.resources_menu {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    gap: 10px;
    margin: 20px 0;
  }
  .ui-icon-extlink {display:none !important;}
  
  nav.resources_menu a {
    padding: 10px;
    text-decoration: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    color: white;
    text-align: center;
    height: 100%;
  }
  
  #primary:hover, #secondary:hover, #full_purple:hover{
    background-color: #1c4a62;
    color: white;
  }
  
  #full:hover {
    background-color: #1c4a62;
    color: white;
  }
  
  #primary {
    font-size: 22px;
    min-width: 220px;
    background-color: #2D637F;
    flex: 1 0 30%;
    height: 100px;
  }
  
  #secondary {
    color: #012E41;
    font-size: 18px;
    min-width: 160px;
    background-color: #98AEC8;
    flex: 1 1 20%;
    height: 50px; 
  }
  
  #full_purple {
    font-size: 18px;
    min-width: 300px;
    background-color: #956D8E;
    flex: 1;
    height: 50px; 
  }
  #full {
    font-size: 18px;
    min-width: 300px;
    background-color: #EEB111;
    color: #012E41;
    flex: 1;
    height: 50px; 
  }
  
  @media all and (min-width: 760px) and (max-width: 840px) {
    #full_purple {font-size: 16px;}
  }
  
  @media all and (max-width: 470px) {
    #full_purple {font-size: 16px;}
    #secondary {font-size:18px;}
  }
  
  .code {
    background-color: whitesmoke; 
    padding: 10px; 
    margin: 10px; 
    font-family: 'Courier New', Courier, monospace; 
    border-radius: 3px;
    line-height: 1.5;
  }
  


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

/* 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:#2c5367;
  color: white;
  padding: 1rem;
}
.container-page-content {
  border: solid #2c5367 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;
}

/* John's test */

div[title=" Open Dyslexic"],
div[title=" Open Dyslexic Mono"] {
	display: none !important;
}

/* End John's test */


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