.courseBreadcrumbs {
    margin-bottom: 5px;
}

.course_link_complete a:link {
    color: white;
}
.course_link_complete a:visited {
    color: white;
}
.course_link_complete a:active {
    color: white;
}
.course_link_complete a {
  display: block;
  width: 100%;
  text-align: center;
  border: solid 1px #5b5b5b;
  background: #5b5b5b;
}

.course_link_complete:hover a {
  color: white;
  width: 100%;
  background: #343434;
  border-color: #5b5b5b;
  transition: all 0.2s ease-in-out;
}

.course_link_continue a:link {
    color: white;
}
.course_link_continue a:visited {
    color: white;
}
.course_link_continue a:active {
    color: white;
}
.course_link_continue a {
  display: block;
  width: 100%;
  text-align: center;
  color: white;
  border: solid 1px #72c02c;
  background: #72c02c;
}

.course_link_continue:hover a {
  color: white;
  width: 100%;
  background: #579f19;
  border-color: #72c02c;
  transition: all 0.2s ease-in-out;
}

.course_link_enroll a:link {
    color: white;
}
.course_link_enroll a:visited {
    color: white;
}
.course_link_enroll a:active {
    color: white;
}
.course_link_enroll a {
  display: block;
  width: 100%;
  text-align: center;
  color: white;
  background: #3688a3;
  border: solid 1px #125585;
}

.course_link_enroll:hover a {
  color: white;
  width: 100%;
  background: #125585;
  border-color: #125585;
  transition: all 0.2s ease-in-out;
}


.course_type {
    color:#777;
}

.courseFeedbackForm {
    width:80%;
}

.courseProgress {
    display: block;
    margin-top: 1em;
    padding: 1em;
    background: #d6d6d6;
    border-radius: 10px;
    text-align: center;
}

.courseNavigation {
    margin-left: auto;
    margin-right: auto;
}

.courseNavigation td {
    padding: 2px;
}

.centered-cell {
  vertical-align: middle;
}

.courseNavigation form,.courseNavigation div {
    display:inline-block;
    vertical-align: top;
    text-align: center;
    width: 100%;
}

.courseNavigation form button[type="submit"] {
  width: 100%; /* Make the button take up 100% of its parent's width */
  box-sizing: border-box; /* Include padding and border in the element's total width */
}

.courseMenu {
    display: block;
    text-align: center;
}

#courseMenuButton {
    width: 100%;
}

#submitcomplete {
    display: block;
    width: 100%;
}

#unitCompete {
    text-align:center;
}

#courseTimer {
    font-size: 0.75rem;
    line-height: normal;
    text-align:center;
    color:black;
}

#courseTimer:hover {
    color:#c00;
}

.quiz-container {
    padding: 1em;
    max-width: 100%;
    margin: 1em auto;
}

.quiz-container a {
    text-decoration: none;
    color: #333;
}

.quiz-header,
.quiz-start-screen,
.quiz-results-screen,
.quiz-counter {
    text-align: center;
}

.question {
    display: block;
    padding: 0.5em 1em;
    margin-bottom: 0.5em;
    font-size: 1.5em;
    text-align: center;
    line-height: normal;
}

.flashcard-question {
    display: block;
    font-size: 6em;
    text-align: center;
    line-height: normal;
}

.flashcard-reveal {
    display: block;
    padding: 0.5em 1em;
    margin-bottom: 0.5em;
    background: #fff;
    border-radius: 10px;
    text-align: center;
}

.answer {
    display: block;
    padding: 0.5em 1em;
    margin-bottom: 0.5em;
    background: #fff;
    border-radius: 10px;
    text-align: center;
}

.flashcard-answer .videocontent {
    margin-top: 0;
    padding-top: 0;
}

.fillin-correct {
    background: #090;
}
.fillin-incorrect {
    background: #c00;
}

.answers {
    list-style: none;
    padding: 0;
}

.answers a {
    display: block;
    padding: 0.5em 1em;
    margin-bottom: 0.5em;
    background: #fff;
    border-radius: 10px;
    text-align: center;
}

.answers a.correct {
    background: #090;
}
.answers a.incorrect {
    background: #c00;
}

.answers a.correct,
.answers a.incorrect {
    color: #fff;
}

.quiz-controls {
    background: #333;
    color: #fff;
    padding: 0.5em 1em;
    text-align: center;
    border-radius: 10px;
}

.quiz-response {
    color: #fff;
}

.quiz-results {
    font-size: 1.25em;
}

.quiz-buttons a,
.quiz-container .quiz-button {
    display: inline-block;
    padding: 0.5em 1em;
    background: #333;
    color: #fff;
    border-radius: 10px;
}
.quiz-buttons a {
    background: #fff;
    color: #333;
}

.quiz-start-screen a:link,
.quiz-start-screen a:visited,
.quiz-start-screen a:active { text-decoration:none; color:rgb(194, 241, 194); font-weight:bold;}
.quiz-start-screen a:hover{ text-decoration:underline; }

.fillin {border: 1px solid #ccc; padding: 7px 14px 9px; transition: 0.4s;}
.fillin ~ .focus-border:before,
.fillin ~ .focus-border:after{content: ""; position: absolute; top: 0; left: 0; width: 0; height: 2px; background-color: #4caf50; transition: 0.3s;}
.fillin ~ .focus-border:after{top: auto; bottom: 0; left: auto; right: 0;}
.fillin ~ .focus-border i:before,
.fillin ~ .focus-border i:after{content: ""; position: absolute; top: 0; left: 0; width: 2px; height: 0; background-color: #4caf50; transition: 0.4s;}
.fillin ~ .focus-border i:after{left: auto; right: 0; top: auto; bottom: 0;}
.fillin:focus ~ .focus-border:before,
.fillin:focus ~ .focus-border:after{width: 100%; transition: 0.3s;}
.fillin:focus ~ .focus-border i:before,
.fillin:focus ~ .focus-border i:after{height: 100%; transition: 0.4s;}

/* Quiz State Overrides */

.quiz-results-state .quiz-controls {
    background: none;
    padding: 0;
}
.quiz-results-state .quiz-buttons a {
    background: #333;
    color: #fff;
}

.course-header {
 border: 3px solid #d0cbb7;   
}

/* Slides */

.slide {
    text-align: center;
    border-color: rgb(170, 170, 170);
    border-style: solid;
    border-width: 1px;
    background-color: white;
}

.slide-top {
    text-align: center;
    display: block;  /* Prevents extra space below the image */
}

.slide-top img {
    width: 10%;
    height: auto;
}

.slide-middle {
    min-height: 600px;
    display: flex;
    flex-direction: column; /* Stacks children vertically */
    justify-content: flex-start; /* Aligns content to the end (bottom) of the flex container */
}

.slide-body {
    min-height: 400px;
    display: flex;
    flex-direction: column; /* Stacks children vertically */
    justify-content: center; /* Aligns content to the end (bottom) of the flex container */
}

.slide-bottom img {
    max-width: 100%; /* Ensures the image doesn't exceed the div's width */
    height: auto;    /* Adjusts height proportionally to maintain aspect ratio */
    display: block;  /* Prevents extra space below the image */
}

.slide-header {
    max-width: max-content;
    margin: 0 auto;
    padding: 2px 10px;
    color: white;
    background-color: #329434;
    box-shadow: 2px 2px 2px black;
    display: block;
    font-size:1.5em;
}

.slide-title {
    margin-top:1em;
    margin-bottom:1em;
    font-size:2.5em;
    font-weight:bold;
    color: black;
}

.slide-content {
    margin-top:10px;
    font-size:1.3em;
    font-weight:bold;
}

.slide-narration {
    margin-top:1em;
    margin-bottom:1em;
    font-size:1.25m;
}

.slide-button {
color: #000!important;
background-color: #d6d6d6!important;
}

.slide-button:hover {
color: #000!important;
background-color: #b8b8b8!important;
}

.slide-button {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: none;
display: inline-block;
padding: 8px 16px;
vertical-align: middle;
overflow: hidden;
text-decoration: none;
color: inherit;
background-color: inherit;
text-align: center;
cursor: pointer;
white-space: nowrap;
}

#ToggleCourseSpeak {
    display: inline-block;
}

#slide-speakToggle {
background-color: transparent;
padding:1px;
}

#slide-speakToggle:hover {
    padding:0px;
    border: 1px solid #b8b8b8;
    border-radius: 10px;
    background-color: transparent;
}

#slide-speakToggle {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: none;
display: inline-block;
font-size: 24px;
vertical-align: middle;
overflow: hidden;
text-decoration: none;
color: inherit;
background-color: inherit;
text-align: center;
cursor: pointer;
white-space: nowrap;
}

.slide-navigation {
    text-align: center!important;
    margin-top: 16px!important;
    margin-bottom: 16px!important;
}