:root {
--highlight_color:#93bf37;
--highlight-color:var(--highlight_color);

}   
.sidebar-logo { 
    height: 50px;
    display: block;
}
.lab-label {
    color: rgb(145,190,55);
    margin-top: -3px;
    padding-left: 20px;
}

          .affix {
    top: 0;
    width: 100%;
    z-index: 9999 !important;
  }

  .affix + .container-fluid {
    padding-top: 70px;
  }
  pre.code-example {
      background-color: #444;
      padding: 10px 20px;
      border-radius: 5px;
      color: #fff;
  }
  .html-tag { color:rgb(95, 143, 233) }
  .html-tag-attribute-name {
      color: #4dc9df;
  }
  .html-tag-attribute-value {
      color: #e7955e;
  }

  .html-example-emphasis { 
      font-weight: 900;
      border: 2px dotted #0c0;
      padding: 0px 3px;
      background-color: rgb(0, 220, 0, 0.1);
      border-radius: 5px;

  }
  .css-property {
      color: #4dc9df;
      font-weight: bold;
  }
  .css-property-value {
    color: rgb(145,190,55);
    font-weight: bold;
  }

  .css-property-important {
    color: #ff0000;
    font-weight: bold;
  }
  .css-comment, .html-comment {
      color: rgb(207, 134, 207);
      font-style: italic;
  }


  .lab-links {
      position: sticky;
      top: 30px;
      z-index: 999999;
      max-height: calc(100vh - 30px);
      overflow-x: hidden;
      overflow-y: auto;
  }

  .tab-pane h4:not(:first-of-type) {
      margin-top: 50px;
  }

  .tab-pane h5:not(:first-of-type) {
      margin-top: 50px;
  }

  .tab-pane {
      padding-bottom: 100px;
  }
  .card-container { display: flex; }
  .card { max-width: 550px; }


  .card { margin-bottom: 20px; }
  
  .card.lab6-figure13 { max-width: 250px; }
  .card .card-body { background-color: #eeeeee;}
  .card .card-body p { margin-bottom: 0px; font-weight: bold; font-size: .8em; }
  .card.figure-8-explanation p { margin-bottom: 10px;}
  .card.full-width { max-width: 100%; }
  .card.max-700 { max-width: 700px;}
  .card.max-150 { max-width: 150px; }
  .card.max-200 { max-width: 200px; }

  .card.max-250 { max-width: 250px; }

  .card.max-300 { max-width: 300px; }
  .card.max-350 { max-width: 350px; }
  .card.max-400 { max-width: 400px; }

  .clear-right { clear: right; }
/*
  .assignment-section:nth-of-type(even) .card .card-body { background-color: #aaa;}
*/
@media (max-width: 1200px) {
    .container { max-width: 100%; }
}

.bootstrap-setup-options {
    list-style-type: lower-alpha;
}
.bootstrap-setup-options > li { margin-bottom: 20px;}

/* light / dark mode */


#light-dark-mode-buttons {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 9999;
}

#assistive-mode-buttons {
    position: fixed;
    top: 10px;
    right: 150px;
    z-index: 9999;
}

/* this is applied to the body tag */
.dark-mode {
  background-color: #222;
  color: #ccc;
}

/* adjust the color of particular elements */
.dark-mode .link-dark {
  color: #ccc;
}

.dark-mode .table-striped { color: #ccc; }
.dark-mode .table-striped>tbody>tr:nth-of-type(odd), .dark-mode .table-striped>tbody>tr:nth-of-type(odd)>* {
    color: #aaa;
}

.btn {
    --bs-btn-active-border-color: #ccc;
    --bs-btn-active-color: var(--highlight-color);
} 
.btn.btn-outline-default { border: 1px solid #eee; background-color: #fff;  color: var(--highlight_color); font-weight: bold; }
.btn.btn-outline-dark { border: 1px solid #eee; background-color: #fff;  }
.btn.btn-outline-dark:hover { border: 1px solid #ccc; background-color: #333;  }
.dark-mode .btn.btn-outline-default { border: 1px solid #222;  color: #ccc; font-weight: normal; background-color: #aaa; 


}
.dark-mode .btn.btn-outline-dark { border: 1px solid #ccc; font-weight: bold; color: var(--highlight_color); 
  
    border-color: #222;} 
/* 
.btn.btn-outline-assistive { border: 1px solid #333; background-color: #fff;  color: #93bf37; font-weight: bold; }
.btn.btn-outline-assistive {  color: #000000;  }

body .btn.btn-outline-assistive.btn-assistive-off { font-weight: bold; color: #93bf37; }

body .btn.btn-outline-assistive.btn-assistive-font { font-weight: normal; color: #000; }
body .btn.btn-outline-assistive.btn-assistive-bionic { font-weight: normal; color: #000; }

body.assistive-bionic-mode .btn.btn-outline-assistive.btn-assistive-off { font-weight: normal; color: #000; }
body.assistive-font-mode .btn.btn-outline-assistive.btn-assistive-off { font-weight: normal; color: #000; }

body.assistive-font-mode .btn.btn-outline-assistive.btn-assistive-font { font-weight: bold; color: #93bf37; }
body.assistive-bionic-mode .btn.btn-outline-assistive.btn-assistive-bionic { font-weight: bold; color: #93bf37; } */


.assignment-section {
    padding-bottom: 100px;
    padding-top: 50px;
    padding-left: 20px;
    padding-right: 20px;
   /* background: linear-gradient(#eee, #fff); */
   /* border-top: 2px solid #93bf37; */
    min-height: 50vh;
    filter: blur(1px) grayscale(100%) opacity(20%);
    transition:
	  -webkit-filter .3s ease,
	  filter .3s ease,
	  padding-top .3s ease,
	  margin-top .3s ease
	;
    
    
}

.assignment-section.in-view {
    filter: blur(0px) grayscale(0%) opacity(100%);
}

.hidden { display: none; }
.tab-content { margin-bottom: 200px; }
.nav-item .material-icons {
    font-size: 1.3em;
    color: #198754;
    margin-top: 7px;
    float: left;
    margin-left: 8px; margin-right: -50px;
    z-index: 5;
    position: relative;
}

.dark-mode .assignment-section:nth-of-type(even) {
    background-color: #333;
    color: #ddd;
    /* background: linear-gradient(#eee, #fff); */
}

.btn-primary .material-icons { display: none; }
.btn-success .material-icons {
    display: inline-block;
    font-size: 1.3em;
    padding-bottom: 2px;
    vertical-align: bottom;
}
footer { position: fixed; bottom: 0; left: 0; width: 100%; border-top: 1px solid #ccc; height: 10px;  z-index: 999; }
footer .progress { height: 10px; border-radius: 0px;  }
footer .progress-bar { background-color:var(--highlight_color); } 

.btn-success, .btn-success.disabled, .btn-success:disabled {
    background-color:var(--highlight_color);
    border-color: var(--highlight_color);
}
/* 
bionic { display: inline !important; }

body.assistive-font-mode {
    font-family: 'OpenDyslexic', cursive;
    font-size: .9em;
}

body.assistive-bionic-mode bionic {
    font-weight: 600;
} */

.menu-wrapper {
    position: relative;
    z-index: 1;
    background-color: white;
}


.menu-wrapper ul.nav { display: block; }

#offcanvas-toggler {
    position: fixed;
    top: 10px;
    background-color: #fff;
    padding-bottom: 8px;
    padding-top: 8px;
  
}

.dark-mode .menu-wrapper, .dark-mode .offcanvas-lg {
    background-color: #333;
    --bs-offcanvas-bg:#333;
}


#light-dark-mode-buttons label { background-color: #fff;}
.dark-mode #light-dark-mode-buttons label { background-color: #333;}

.dark-mode #offcanvas-toggler { background-color: #333; color: #ccc; }
/* 
.nav-row {
    position: relative;
    z-index: 99999;
}
*/

.offcanvas-header {
    justify-content: end;
}

.assignment-section ol li {
    margin-bottom: 10px;

}

keyword {
    font-family:'Source Code Pro', Courier, monospace;
    font-weight: bold;
}
a[target="_blank"] i { font-size: .8em; vertical-align: text-top;}

.tutorial-video {
    float: right;
    margin-left: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
}