/* ----------DASHBOARD---------- */

:root {
  --dashboard-home-overview-icon: url(../img/dashboard-home-overview-icon.svg);
  --dashboard-course-icon: url(../img/dashboard-course-icon.svg);
  --dashboard-survey-icon: url(../img/dashboard-survey-icon.svg);
  --dashboard-image-placeholder: url(../img/image-placeholder-purple.svg);
}

/* DASHBOARD HERO */
#dashboard-hero {
  background-color: #104760;
  color: #ffffff;
}

#dashboard-hero .left {
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  margin: -3rem 0;
  padding-right: 21rem;
  box-sizing: border-box;
}

#dashboard-hero .right {
  display: inline-block;
  vertical-align: middle;
  width: 18rem;
  margin: -3rem 0 -3rem -18rem;
  text-align: right;
}

#dashboard-hero .left > .inner {
  margin: 3rem 0;
  max-width: 90rem;
}

#dashboard-hero .right > .inner {
  margin: 3rem 0;
}

#dashboard-hero .button {
  display: block;
  margin: 2rem 0;
  border: 0.1rem solid #ffffff;
}

#dashboard-hero .button.sign-in {
  background-color: #0058a6;
}

#dashboard-hero .button.sign-in:hover {
  color: #0058a6;
}

#dashboard-hero .button.sign-in:before {
  position: absolute;
  top: -0.1rem;
  bottom: -0.1rem;
  left: -0.1rem;
  right: -0.1rem;
  border-color: #0058a6;
}

#dashboard-hero .button.sign-in:after {
  content: "\f4ff";
  font-family: icon-font;
  font-weight: 400;
  margin-left: 1rem;
}

#dashboard-hero .button.sign-up {
  background-color: #f6ae28;
  color: #000000;
}

#dashboard-hero .button.sign-up:before {
  position: absolute;
  top: -0.1rem;
  bottom: -0.1rem;
  left: -0.1rem;
  right: -0.1rem;
  border-color: #f6ae28;
}

#dashboard-hero .button.sign-up:after {
  content: "\f105";
  font-family: icon-font;
  margin-left: 1rem;
}

@media screen and (max-width: 60em) {
  #dashboard-hero .left,
  #dashboard-hero .right {
    display: block;
    width: auto;
    margin: 0;
    padding: 0;
  }
  #dashboard-hero .buttons {
    margin: 3rem 0;
  }
}

/* DASHBOARD HOME OVERVIEW */
#dashboard-home .overview {
  margin: 5rem 0;
}

#dashboard-home .overview .heading {
  font-weight: 400;
}

#dashboard-home .overview .stats {
  margin: 3rem 0;
  padding: 3rem 0 3rem 14rem;
  position: relative;
  background-color: #f3f5f9;
  box-sizing: border-box;
}

#dashboard-home .overview .stats:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 14rem;
  height: 100%;
  background-color: #165673;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
  background-image: var(--dashboard-home-overview-icon);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

#dashboard-home .overview .stats table {
  width: 100%;
}

#dashboard-home .overview .stats table td {
  text-align: center;
}

#dashboard-home .overview .stats table td:not(:last-of-type) {
  border-right: 0.1rem solid #c6c6c7;
}

#dashboard-home .overview .stats table td span {
  display: inline-block;
  vertical-align: middle;
  text-align: right;
  max-width: 8rem;
  margin-right: 1rem;
}

#dashboard-home .overview .stats table td strong {
  display: inline-block;
  vertical-align: middle;
  font-weight: 600;
  font-size: 6rem;
  line-height: 1em;
}

@media screen and (max-width: 60em) {
  #dashboard-home .overview .stats {
    padding: 3rem 0;
  }
  #dashboard-home .overview .stats:before {
    display: none;
  }
  #dashboard-home .overview .stats table td span {
    display: block;
    max-width: none;
    text-align: inherit;
  }
  #dashboard-home .overview .stats table td strong {
    display: block;
    font-size: 4rem;
    line-height: 1em;
  }
}

@media screen and (max-width: 40em) {
  #dashboard-home .overview .stats {
    padding: 0 3rem;
  }
  #dashboard-home .overview .stats table td {
    display: block;
    padding: 2rem 0;
  }
  #dashboard-home .overview .stats table td:not(:last-of-type) {
    border-right: 0;
    border-bottom: 0.1rem solid #c6c6c7;
  }
}

/* DASHBOARD HOME NEWEST COURSE */
#dashboard-home .newest-course {
  margin: 5rem 0;
}

#dashboard-home .newest-course .heading {
  font-weight: 400;
}

#dashboard-home .newest-course article {
  padding-right: 50%;
  overflow: hidden;
  position: relative;
  background-color: #165673;
  color: #ffffff;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
}

#dashboard-home .newest-course article:hover {
  box-shadow: 0rem 0rem 1rem rgba(0, 0, 0, 0.4);
}

#dashboard-home .newest-course article:focus-within {
  box-shadow: 0rem 0rem 1rem rgba(0, 0, 0, 0.4);
}

#dashboard-home .newest-course article .thumbnail {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background-color: #104760;
  background-image: var(--dashboard-image-placeholder);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

#dashboard-home .newest-course article .thumbnail > .inner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  min-height: 100%;
  padding-bottom: 60%;
  box-sizing: border-box;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#dashboard-home .newest-course article .thumbnail img {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  width: auto;
  max-width: none;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#dashboard-home .newest-course article .content {
  min-height: 25rem;
}

#dashboard-home .newest-course article .content > .inner {
  margin: 3rem 0;
  padding: 0 3rem;
}

#dashboard-home .newest-course article h3 {
  margin: 1rem 0;
}

#dashboard-home .newest-course article a {
  font-size: 2rem;
  line-height: 1.5em;
  color: inherit;
  text-decoration: none;
}

#dashboard-home .newest-course article a:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

#dashboard-home .newest-course article a:hover,
#dashboard-home .newest-course article a:focus {
  text-decoration: underline;
}

#dashboard-home .newest-course article .time {
  display: block;
  margin: 3rem 0;
}

#dashboard-home .newest-course article .time:before {
  content: "\f017";
  font-family: icon-font;
  font-weight: 400;
  margin-right: 1rem;
}

@media screen and (max-width: 50em) {
  #dashboard-home .newest-course article {
    padding-right: 0;
  }
  #dashboard-home .newest-course article .thumbnail {
    position: relative;
    width: 100%;
    height: auto;
    padding-bottom: 60%;
  }
  #dashboard-home .newest-course article .content {
    min-height: 0;
  }
}

/* DASHBOARD HOME COURSES */
#dashboard-home .courses {
  margin: 5rem 0;
}

#dashboard-home .courses .heading {
  font-weight: 400;
}

#dashboard-home .courses .grid {
  margin: 3rem 0;
  overflow: visible;
}

#dashboard-home .courses .grid > .inner {
  margin: -1.5rem;
}

#dashboard-home .courses .grid-item {
  width: 33.33%;
}

#dashboard-home .courses .grid-item > .inner {
  margin: 1.5rem 0;
}

#dashboard-home .courses article {
  padding-top: 60%;
  overflow: hidden;
  position: relative;
  box-shadow: 0rem 0rem 1rem rgba(0, 0, 0, 0.2);
  color: #ffffff;
  background-color: #165673;
}

#dashboard-home .courses article:hover {
  box-shadow: 0rem 0rem 1rem rgba(0, 0, 0, 0.4);
}

#dashboard-home .courses article:focus-within {
  box-shadow: 0rem 0rem 1rem rgba(0, 0, 0, 0.4);
}

#dashboard-home .courses .grid-item:nth-child(even) article {
  background-color: #0058a6;
}

#dashboard-home .courses article .thumbnail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding-bottom: 60%;
  background-color: #104760;
  background-image: var(--dashboard-image-placeholder);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

#dashboard-home .courses article .thumbnail img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#dashboard-home .courses article .content {
  margin: 3rem 0;
  padding: 0 3rem;
}

#dashboard-home .courses article h4 {
  margin: 1rem 0;
}

#dashboard-home .courses article a {
  font-size: 2rem;
  line-height: 1.5em;
  color: inherit;
  text-decoration: none;
}

#dashboard-home .courses article a {
  color: inherit;
  text-decoration: none;
}

#dashboard-home .courses article a:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

#dashboard-home .courses article a:hover,
#dashboard-home .courses article a:focus {
  text-decoration: underline;
}

#dashboard-home .courses article .details {
  margin: 3rem 0;
  padding: 0 3rem;
}

#dashboard-home .courses article .details .time {
  display: inline-block;
  vertical-align: bottom;
  width: 50%;
}

#dashboard-home .courses article .details .time:before {
  content: "\f017";
  font-family: icon-font;
  font-weight: 400;
  margin-right: 1rem;
}

#dashboard-home .courses article .details .num-modules {
  display: inline-block;
  vertical-align: bottom;
  width: 50%;
  text-align: right;
}

#dashboard-home .courses article .details .date:before {
  content: "\f133";
  font-family: icon-font;
  font-weight: 400;
  margin-right: 1rem;
}

#dashboard-home .courses .sign-up {
  margin: 5rem 0;
  text-align: center;
}

#dashboard-home .courses .sign-up .button {
  border: 0.1rem solid #ffffff;
  background-color: #f6ae28;
  color: #000000;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
}

#dashboard-home .courses .sign-up .button:before {
  position: absolute;
  top: -0.1rem;
  bottom: -0.1rem;
  left: -0.1rem;
  right: -0.1rem;
  border-color: #f6ae28;
}

#dashboard-home .courses .sign-up .button:after {
  content: "\f105";
  font-family: icon-font;
  margin-left: 1rem;
}

@media screen and (max-width: 60em) {
  #dashboard-home .courses .grid-item {
    width: 50%;
  }
}

@media screen and (max-width: 40em) {
  #dashboard-home .courses .grid-item {
    width: 100%;
  }
}

/* DASHBOARD HOME TESTIMONIALS */
#dashboard-home .testimonials {
  margin: 5rem 0;
}

#dashboard-home .testimonials .heading {
  font-weight: 400;
}

#dashboard-home .testimonials .swiper-container {
  overflow: hidden;
}

#dashboard-home .testimonials .swiper-slide {
  margin: 0;
}

#dashboard-home .testimonials blockquote {
  min-height: 4rem;
  margin: 0;
  padding: 0 0 0 10rem;
  border: 0;
  background-color: transparent;
  background-image: none;
  color: #0058a6;
}

#dashboard-home .testimonials blockquote:before {
  top: 0;
}

#dashboard-home .testimonials figcaption {
  margin-bottom: 0;
  padding-left: 10rem;
}

#dashboard-home .testimonials .controls {
  text-align: center;
  margin: 3rem 0;
}

#dashboard-home .testimonials .controls > .inner {
  margin: -1rem;
}

#dashboard-home .testimonials .controls button {
  padding: 1rem;
  border: 0;
  background-color: transparent;
}

#dashboard-home .testimonials .controls button::before {
  content: "";
  display: block;
  position: static;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  border: none;
  background-color: #165673;
  -webkit-transform: none;
  -moz-transform: none;
  -ms-transform: none;
  -o-transform: none;
  transform: none;
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  -o-transition: none;
  transition: none;
}

#dashboard-home .testimonials .controls button:hover::before,
#dashboard-home .testimonials .controls button:focus:before {
  background-color: #0058a6;
}

#dashboard-home .testimonials .controls button.current::before {
  background-color: #70bbc6;
}

#dashboard-home .testimonials .controls button span {
  display: none;
}

@media screen and (max-width: 60em) {
  #dashboard-home .testimonials figcaption {
    text-align: inherit;
  }
}

/* DASHBOARD FOOTER */
#dashboard-footer {
  background-color: #f3f5f9;
}

#dashboard-footer .heading {
  font-weight: 400;
}

/* DASHBOARD USER OVERVIEW */
#dashboard-user .overview {
  margin: 5rem 0;
}

#dashboard-user .overview .heading:before {
  content: "\f3fd";
  font-family: icon-font;
  font-weight: 400;
  margin-right: 1rem;
}

#dashboard-user .overview .heading .name {
  color: #0058a6;
}

#dashboard-user .overview .stats {
  margin: 3rem 0;
  padding: 3rem 0 3rem 14rem;
  position: relative;
  background-color: #f3f5f9;
  box-sizing: border-box;
}

#dashboard-user .overview .stats:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 14rem;
  height: 100%;
  background-color: #165673;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
  background-image: var(--dashboard-course-icon);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

#dashboard-user .overview .stats table {
  width: 100%;
}

#dashboard-user .overview .stats table td {
  text-align: center;
}

#dashboard-user .overview .stats table td:not(:last-of-type) {
  border-right: 0.1rem solid #c6c6c7;
}

#dashboard-user .overview .stats table td span {
  display: inline-block;
  vertical-align: middle;
  text-align: right;
  max-width: 10rem;
  margin-right: 1rem;
}

#dashboard-user .overview .stats table td strong {
  display: inline-block;
  vertical-align: middle;
  font-weight: 600;
  font-size: 6rem;
  line-height: 1em;
}

@media screen and (max-width: 60em) {
  #dashboard-user .overview .stats {
    padding: 3rem 0;
  }
  #dashboard-user .overview .stats:before {
    display: none;
  }
  #dashboard-user .overview .stats table td span {
    display: block;
    max-width: none;
    text-align: inherit;
  }
  #dashboard-user .overview .stats table td strong {
    display: block;
    font-size: 4rem;
    line-height: 1em;
  }
}

@media screen and (max-width: 40em) {
  #dashboard-user .overview .stats {
    padding: 0 3rem;
  }
  #dashboard-user .overview .stats table td {
    display: block;
    padding: 2rem 0;
  }
  #dashboard-user .overview .stats table td:not(:last-of-type) {
    border-right: 0;
    border-bottom: 0.1rem solid #c6c6c7;
  }
}

/* DASHBOARD USER CURRENT MODULE */
#dashboard-user .current-module {
  margin: 5rem 0;
}

#dashboard-user .current-module .heading {
  font-weight: 400;
}

#dashboard-user .current-module article {
  background-color: #165673;
  color: #ffffff;
  padding-right: 50%;
  overflow: hidden;
  position: relative;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
}

#dashboard-user .current-module article:hover {
  box-shadow: 0rem 0rem 1rem rgba(0, 0, 0, 0.4);
}

#dashboard-user .current-module article:focus-within {
  box-shadow: 0rem 0rem 1rem rgba(0, 0, 0, 0.4);
}

#dashboard-user .current-module article .thumbnail {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background-color: #104760;
  background-image: var(--dashboard-image-placeholder);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

#dashboard-user .current-module article .thumbnail > .inner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  min-height: 100%;
  padding-bottom: 60%;
  box-sizing: border-box;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#dashboard-user .current-module article .thumbnail img {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  width: auto;
  max-width: none;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#dashboard-user .current-module article .content {
  min-height: 20rem;
}

#dashboard-user .current-module article .content > .inner {
  margin: 3rem 0;
  padding: 0 3rem;
}

#dashboard-user .current-module article h3 {
  margin: 1rem 0;
}

#dashboard-user .current-module article a {
  font-size: 2rem;
  line-height: 1.5em;
  color: inherit;
  text-decoration: none;
}

#dashboard-user .current-module article a:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

#dashboard-user .current-module article a:hover,
#dashboard-user .current-module article a:focus {
  text-decoration: underline;
}

#dashboard-user .current-module article .time {
  display: block;
  margin: 3rem 0;
}

#dashboard-user .current-module article .time:before {
  content: "\f017";
  font-family: icon-font;
  font-weight: 400;
  margin-right: 1rem;
}

#dashboard-user .current-module article .results {
  background-color: #2b2e33;
  padding: 0 1rem;
}

#dashboard-user .current-module article .results .left {
  display: inline-block;
  vertical-align: top;
  width: 50%;
  padding: 1rem;
  box-sizing: border-box;
}

#dashboard-user .current-module article .results .right {
  display: inline-block;
  vertical-align: top;
  width: 50%;
  text-align: right;
  padding: 1rem;
  box-sizing: border-box;
}

#dashboard-user .current-module article .results .left > .inner,
#dashboard-user .current-module article .results .right > .inner {
  display: inline-block;
  text-align: center;
}

#dashboard-user .current-module article .status {
  display: block;
  color: #f6ae28;
}

#dashboard-user .current-module article .status:after {
  content: "\f058";
  font-family: icon-font;
  font-weight: 400;
  margin-left: 0.5rem;
}

#dashboard-user .current-module article .score {
  display: block;
}

@media screen and (max-width: 50em) {
  #dashboard-user .current-module article {
    padding-right: 0;
  }
  #dashboard-user .current-module article .thumbnail {
    position: relative;
    width: 100%;
    height: auto;
    padding-bottom: 60%;
  }
  #dashboard-user .current-module article .content {
    min-height: 0;
  }
}

/* DASHBOARD USER COURSES */
#dashboard-user .courses {
  margin: 5rem 0;
}

#dashboard-user .courses .heading {
  font-weight: 400;
}

#dashboard-user .courses .grid {
  margin: 3rem 0;
  overflow: visible;
}

#dashboard-user .courses .grid > .inner {
  margin: -1.5rem;
}

#dashboard-user .courses .grid-item {
  width: 33.33%;
}

#dashboard-user .courses .grid-item > .inner {
  margin: 1.5rem 0;
}

#dashboard-user .courses article {
  padding-top: 60%;
  overflow: hidden;
  position: relative;
  box-shadow: 0rem 0rem 1rem rgba(0, 0, 0, 0.2);
  color: #ffffff;
  background-color: #165673;
}

#dashboard-user .courses article:hover {
  box-shadow: 0rem 0rem 1rem rgba(0, 0, 0, 0.4);
}

#dashboard-user .courses article:focus-within {
  box-shadow: 0rem 0rem 1rem rgba(0, 0, 0, 0.4);
}

#dashboard-user .courses .grid-item:nth-child(even) article {
  background-color: #0058a6;
}

#dashboard-user .courses article .thumbnail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding-bottom: 60%;
  background-color: #104760;
  background-image: var(--dashboard-image-placeholder);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

#dashboard-user .courses article.completed .thumbnail {
  border-bottom: 0.5rem solid #5ac6aa;
}

#dashboard-user .courses article.in-progress .thumbnail {
  border-bottom: 0.5rem solid #f6ae28;
}

#dashboard-user .courses article.failed .thumbnail {
  border-bottom: 0.5rem solid #ff6399;
}

#dashboard-user .courses article .thumbnail img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#dashboard-user .courses article .content {
  margin: 3rem 0;
  padding: 0 3rem;
}

#dashboard-user .courses article h4 {
  margin: 1rem 0;
}

#dashboard-user .courses article a {
  font-size: 2rem;
  line-height: 1.5em;
  color: inherit;
  text-decoration: none;
}

#dashboard-user .courses article a:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

#dashboard-user .courses article a:hover,
#dashboard-user .courses article a:focus {
  text-decoration: underline;
}

#dashboard-user .courses article .details {
  margin: 3rem 0;
  padding: 0 3rem;
}

#dashboard-user .courses article .details .time {
  display: inline-block;
  vertical-align: bottom;
  width: 50%;
}

#dashboard-user .courses article .details .time:before {
  content: "\f017";
  font-family: icon-font;
  font-weight: 400;
  margin-right: 1rem;
}

#dashboard-user .courses article .details .num-modules {
  display: inline-block;
  vertical-align: bottom;
  width: 50%;
  text-align: right;
}

#dashboard-user .courses article .details .date:before {
  content: "\f133";
  font-family: icon-font;
  font-weight: 400;
  margin-right: 1rem;
}

#dashboard-user .courses article .results {
  background-color: #2b2e33;
  padding: 0 1rem;
}

#dashboard-user .courses article .results .left {
  display: inline-block;
  vertical-align: top;
  width: 50%;
  padding: 1rem;
  box-sizing: border-box;
}

#dashboard-user .courses article .results .right {
  display: inline-block;
  vertical-align: top;
  width: 50%;
  text-align: right;
  padding: 1rem;
  box-sizing: border-box;
}

#dashboard-user .courses article .results .left > .inner,
#dashboard-user .courses article .results .right > .inner {
  display: inline-block;
  text-align: center;
}

#dashboard-user .courses article .status,
#dashboard-user .courses article .score {
  display: block;
}

#dashboard-user .courses article.completed .status,
#dashboard-user .courses article.completed .score {
  color: #5ac6aa;
}

#dashboard-user .courses article.in-progress .status {
  color: #f6ae28;
}

#dashboard-user .courses article.failed .status,
#dashboard-user .courses article.failed .score {
  color: #ff6399;
}

#dashboard-user .courses article.in-progress .status:after,
#dashboard-user .courses article.completed .status:after {
  content: "\f058";
  font-family: icon-font;
  font-weight: 400;
  margin-left: 0.5rem;
}

#dashboard-user .courses article.failed .status:after {
  content: "\f057";
  font-family: icon-font;
  font-weight: 400;
  margin-left: 0.5rem;
}

#dashboard-user .courses article .score {
  display: block;
}

@media screen and (max-width: 70em) {
  #dashboard-user .courses .grid-item {
    width: 50%;
  }
}

@media screen and (max-width: 45em) {
  #dashboard-user .courses .grid-item {
    width: 100%;
  }
}

/* DASHBOARD FEEDBACK */
#dashboard-feedback {
  text-align: center;
  font-size: 2.4rem;
  line-height: 1.5em;
  background-color: #70bbc6;
}

#dashboard-feedback > .inner {
  max-width: 90rem;
}

#dashboard-feedback .heading:before {
  content: "\f658";
  font-family: icon-font;
  font-weight: 400;
  margin-right: 1rem;
}

#dashboard-feedback a {
  color: inherit;
  text-decoration: none;
}

#dashboard-feedback a:hover,
#dashboard-feedback a:focus {
  text-decoration: underline;
}

/* DASHBOARD COURSE OVERVIEW */
#dashboard-course .overview {
  margin: 5rem 0;
}

#dashboard-course .overview .course-link {
  font-size: 2rem;
  line-height: 1.5em;
  color: #0058a6;
  text-decoration: none;
}

#dashboard-course .overview .course-link:hover,
#dashboard-course .overview .course-link:focus {
  text-decoration: underline;
}

#dashboard-course .overview .dashboard-link {
  font-size: 2rem;
  line-height: 1.5em;
  color: #0058a6;
  text-decoration: none;
}

#dashboard-course .overview .dashboard-link:hover,
#dashboard-course .overview .dashboard-link:focus {
  text-decoration: underline;
}

#dashboard-course .overview .dashboard-link:after {
  content: "\f3fd";
  font-family: icon-font;
  font-weight: 400;
  margin-left: 0.5rem;
}

#dashboard-course .overview .heading .name {
  color: #0058a6;
}

#dashboard-course .overview .stats {
  margin: 3rem 0;
  padding: 3rem 0 3rem 14rem;
  position: relative;
  background-color: #f3f5f9;
  box-sizing: border-box;
}

#dashboard-course .overview .stats:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 14rem;
  height: 100%;
  background-color: #165673;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
  background-image: var(--dashboard-course-icon);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

#dashboard-course.completed .overview .stats:before {
  background-color: #5ac6aa;
}

#dashboard-course.in-progress .overview .stats:before {
  background-color: #f6ae28;
}

#dashboard-course.failed .overview .stats:before {
  background-color: #ff6399;
}

#dashboard-course .overview .stats table {
  width: 100%;
}

#dashboard-course .overview .stats table td {
  text-align: center;
}

#dashboard-course .overview .stats table td:not(:last-of-type) {
  border-right: 0.1rem solid #c6c6c7;
}

#dashboard-course .overview .stats table td span {
  display: inline-block;
  vertical-align: middle;
  text-align: right;
  max-width: 10rem;
  margin-right: 1rem;
}

#dashboard-course .overview .stats table td strong {
  display: inline-block;
  vertical-align: middle;
  font-weight: 600;
  font-size: 6rem;
  line-height: 1em;
}

#dashboard-course .overview .certificate-link {
  margin: 3rem 0;
  font-size: 2rem;
  line-height: 1.5em;
  color: #0058a6;
  text-decoration: none;
}

#dashboard-course .overview .certificate-link:hover,
#dashboard-course .overview .certificate-link:focus {
  text-decoration: underline;
}

#dashboard-course .overview .certificate-link:before {
  content: "\f5f3";
  font-family: icon-font;
  font-weight: 400;
  margin-right: 0.5rem;
}

@media screen and (max-width: 60em) {
  #dashboard-course .overview .stats {
    padding: 3rem 0;
  }
  #dashboard-course .overview .stats:before {
    display: none;
  }
  #dashboard-course .overview .stats table td span {
    display: block;
    max-width: none;
    text-align: inherit;
  }
  #dashboard-course .overview .stats table td strong {
    display: block;
    font-size: 4rem;
    line-height: 1em;
  }
}

@media screen and (max-width: 40em) {
  #dashboard-course .overview .stats {
    padding: 0 3rem;
  }
  #dashboard-course .overview .stats table td {
    display: block;
    padding: 2rem 0;
  }
  #dashboard-course .overview .stats table td:not(:last-of-type) {
    border-right: 0;
    border-bottom: 0.1rem solid #c6c6c7;
  }
}

/* DASHBOARD COURSE SURVEY */
#dashboard-course .survey {
  margin: 5rem 0;
  padding-right: 14rem;
  background-color: #f6ae28;
  box-shadow: 0rem 0rem 1rem rgba(0, 0, 0, 0.2);
  overflow: hidden;
  position: relative;
}

#dashboard-course .survey:hover {
  box-shadow: 0rem 0rem 1rem rgba(0, 0, 0, 0.4);
}

#dashboard-course .survey:focus-within {
  box-shadow: 0rem 0rem 1rem rgba(0, 0, 0, 0.4);
}

#dashboard-course .survey:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 14rem;
  height: 100%;
  background-color: #f6ae28;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
  background-image: var(--dashboard-survey-icon);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

#dashboard-course .survey > .inner {
  margin: 3rem 0;
  padding: 0 3rem;
}

#dashboard-course .survey h3 {
  margin: 0;
}

#dashboard-course .survey a {
  font-size: 2rem;
  line-height: 1.5em;
  color: inherit;
  text-decoration: none;
}

#dashboard-course .survey a:hover,
#dashboard-course .survey a:focus {
  text-decoration: underline;
}

#dashboard-course .survey a:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#dashboard-course .survey .time {
  margin: 1rem 0;
}

#dashboard-course .survey .time:before {
  content: "\f017";
  font-family: icon-font;
  font-weight: 400;
  margin-right: 1rem;
}

@media screen and (max-width: 40em) {
  #dashboard-course .survey {
    padding: 0;
  }
  #dashboard-course .survey:before {
    display: none;
  }
}

/* DASHBOARD COURSE MODULES */
#dashboard-course .modules {
  margin: 5rem 0;
}

#dashboard-course .modules.disabled {
  position: relative;
  opacity: 0.2;
}

#dashboard-course .modules.disabled:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#dashboard-course .modules .heading {
  font-weight: 400;
}

#dashboard-course .modules .grid {
  margin: 3rem 0;
  overflow: visible;
}

#dashboard-course .modules .grid > .inner {
  margin: -1.5rem;
}

#dashboard-course .modules .grid-item {
  width: 33.33%;
}

#dashboard-course .modules .grid-item > .inner {
  margin: 1.5rem 0;
}

#dashboard-course .modules article {
  padding-top: 60%;
  overflow: hidden;
  position: relative;
  box-shadow: 0rem 0rem 1rem rgba(0, 0, 0, 0.2);
  background-color: #f3f5f9;
}

#dashboard-course .modules article:hover {
  box-shadow: 0rem 0rem 1rem rgba(0, 0, 0, 0.4);
}

#dashboard-course .modules article:focus-within {
  box-shadow: 0rem 0rem 1rem rgba(0, 0, 0, 0.4);
}

#dashboard-course .modules article .thumbnail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding-bottom: 60%;
  background-color: #104760;
  background-image: var(--dashboard-image-placeholder);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

#dashboard-course .modules article.completed .thumbnail {
  border-bottom: 0.5rem solid #5ac6aa;
}

#dashboard-course .modules article.in-progress .thumbnail {
  border-bottom: 0.5rem solid #f6ae28;
}

#dashboard-course .modules article.failed .thumbnail {
  border-bottom: 0.5rem solid #ff6399;
}

#dashboard-course .modules article .thumbnail img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#dashboard-course .modules article .content {
  margin: 3rem 0;
  padding: 0 3rem;
}

#dashboard-course .modules article h4 {
  margin: 1rem 0;
}

#dashboard-course .modules article a {
  font-size: 2rem;
  line-height: 1.5em;
  color: inherit;
  text-decoration: none;
}

#dashboard-course .modules article a:hover,
#dashboard-course .modules article a:focus {
  text-decoration: underline;
}

#dashboard-course .modules article a:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

#dashboard-course .modules article .time {
  margin: 3rem 0;
}

#dashboard-course .modules article .time:before {
  content: "\f017";
  font-family: icon-font;
  font-weight: 400;
  margin-right: 1rem;
}

#dashboard-course .modules article .details .date:before {
  content: "\f133";
  font-family: icon-font;
  font-weight: 400;
  margin-right: 1rem;
}

#dashboard-course .modules article .results {
  background-color: #2b2e33;
  color: #ffffff;
  padding: 0 1rem;
}

#dashboard-course .modules article .results .left {
  display: inline-block;
  vertical-align: top;
  width: 50%;
  padding: 1rem;
  box-sizing: border-box;
}

#dashboard-course .modules article .results .right {
  display: inline-block;
  vertical-align: top;
  width: 50%;
  text-align: right;
  padding: 1rem;
  box-sizing: border-box;
}

#dashboard-course .modules article .results .left > .inner,
#dashboard-course .modules article .results .right > .inner {
  display: inline-block;
  text-align: center;
}

#dashboard-course .modules article .status,
#dashboard-course .modules article .score {
  display: block;
}

#dashboard-course .modules article.completed .status,
#dashboard-course .modules article.completed .score {
  color: #5ac6aa;
}

#dashboard-course .modules article.in-progress .status {
  color: #f6ae28;
}

#dashboard-course .modules article.failed .status,
#dashboard-course .modules article.failed .score {
  color: #ff6399;
}

#dashboard-course .modules article.in-progress .status:after,
#dashboard-course .modules article.completed .status:after {
  content: "\f058";
  font-family: icon-font;
  font-weight: 400;
  margin-left: 0.5rem;
}

#dashboard-course .modules article.failed .status:after {
  content: "\f057";
  font-family: icon-font;
  font-weight: 400;
  margin-left: 0.5rem;
}

#dashboard-course .modules article .score {
  display: block;
}

@media screen and (max-width: 70em) {
  #dashboard-course .modules .grid-item {
    width: 50%;
  }
}

@media screen and (max-width: 45em) {
  #dashboard-course .modules .grid-item {
    width: 100%;
  }
}

/* DASHBOARD COURSE RESOURCES */
#dashboard-course .resources {
  margin: 5rem 0;
}

#dashboard-course .resources .heading {
  font-weight: 400;
}

#dashboard-course .resources table {
  width: 100%;
}

#dashboard-course .resources table tr {
  background-color: #f1f3f6;
}

#dashboard-course .resources table tr:nth-child(even) {
  background-color: #f8f9fa;
}

#dashboard-course .resources table th {
  font-weight: 400;
  text-align: left;
  padding: 1rem 1rem 1rem 2rem;
}

#dashboard-course .resources table td {
  text-align: right;
  padding: 1rem 2rem 1rem 1rem;
}

#dashboard-course .resources table td a {
  color: #0058a6;
  text-decoration: none;
}

#dashboard-course .resources table td a:hover,
#dashboard-course .resources table td a:focus {
  text-decoration: underline;
}

/* DASHBOARD COURSE CERTIFICATE */
#dashboard-course .dashboard-certificate {
  margin: 5rem 0;
}

#dashboard-course .dashboard-certificate .print {
  margin: 5rem 0;
  /*    text-align: center; */
  padding-left: 100px;
}

@media print {
  #dashboard-course .dashboard-certificate .print {
    display: none;
  }
  div.certificate-course-title {
    padding-top: 100px;
  }
  div.certificate-date {
    top: 568px;
  }
}

@media screen {
  div.certificate-course-title {
    padding-top: 49px;
  }

  div.certificate-date {
    top: 670px;
  }

  .certificate {
    padding-top: 120px;
  }
}

#dashboard-course .dashboard-certificate .print button {
  border: 0.1rem solid #ffffff;
  background-color: #f6ae28;
  color: #000000;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
}

#dashboard-course .dashboard-certificate .print button:before {
  position: absolute;
  top: -0.1rem;
  bottom: -0.1rem;
  left: -0.1rem;
  right: -0.1rem;
  border-color: #f6ae28;
}

#dashboard-course .dashboard-certificate .print button:after {
  content: "\f105";
  font-family: icon-font;
  margin-left: 1rem;
}