body {
  font-family: 'Muli', sans-serif;
}

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  clear: both;
  float: none;
  margin-bottom: 10px;
}

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}

@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

.container .col {
  background: lightblue;
}

.container.error .col {
  background: black;
  color: white;
}

.container.warning .col {
  background: #ffc107;
  color: black;
}

.container.success .col {
  background: #28a745;
  color: black;
}

.container.neutral .col {
  background: #6c757d;
  color: black;
}

.container .col p {
  padding: .25rem .75rem;
}


/* 2 columns (600px) */

@media only screen and (min-width:600px) {
  .container .col {
    float: left;
    width: 50%;
  }
}


/* 3 columns (768px) */

@media only screen and (min-width:768px) {
  .container .col {
    width: 33.333%;
  }
}


/* 4 columns (992px) */

@media only screen and (min-width:992px) {
  .container .col { width: 25%; }
  .container .col.expand4 { width: 100%; }
  .container .col.expand3 { width: 75%; }
  .container .col.expand2 { width: 50%; }
  .container .col.expand1 { width: 25%; }
}






/* card */

.courses-container {
  
}

.courses-container .course {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
  display: flex;
  max-width: 100%;
  margin: 20px;
  overflow: hidden;
  width: 700px;
}

.courses-container .course h6 {
  opacity: 0.6;
  margin: 0;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.courses-container .course p {
  opacity: 0.6;
  margin: 0;
  font-size: 0.8em;
}

.courses-container .course h2 {
  letter-spacing: 1px;
  margin: 10px 0;
}

.courses-container .course-preview {
  background-color: #2A265F;
  color: #fff;
  padding: 30px;
  width: 30%;
}

.courses-container.error .course-preview { background-color: black; color: white; }
.courses-container.danger .course-preview { background-color: #dc3545; color: white; }
.courses-container.warning .course-preview { background-color: #ffc107; }
.courses-container.success .course-preview { background-color: #28a745; color: white; }
.courses-container.neutral .course-preview { background-color: #6c757d; color: white; }

.courses-container .course-preview a {
  color: #fff;
  display: inline-block;
  font-size: 12px;
  opacity: 0.6;
  margin-top: 30px;
  text-decoration: none;
}

.courses-container .course-info {
  padding: 30px;
  position: relative;
  width: 70%;
}

.courses-container .progress-container {
  position: absolute;
  top: 30px;
  right: 30px;
  text-align: right;
  width: 150px;
}

.courses-container .progress {
  background-color: #ddd;
  border-radius: 3px;
  height: 5px;
  width: 100%;
}

.courses-container .progress::after {
  border-radius: 3px;
  background-color: #2A265F;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 5px;
  width: 50%;
}


.courses-container .progress.n0::after { width: 0%; }
.courses-container .progress.n1::after { width: 10%; }
.courses-container .progress.n2::after { width: 20%; }
.courses-container .progress.n3::after { width: 30%; }
.courses-container .progress.n4::after { width: 40%; }
.courses-container .progress.n5::after { width: 50%; }
.courses-container .progress.n6::after { width: 60%; }
.courses-container .progress.n7::after { width: 70%; }
.courses-container .progress.n8::after { width: 80%; }
.courses-container .progress.n9::after { width: 90%; }
.courses-container .progress.n10::after { width: 100%; }

.courses-container .progress-text {
  font-size: 10px;
  opacity: 0.6;
  letter-spacing: 1px;
}

/* end card */

/* trafficlight */

.trafficlight {
  background-color: #2c3e50;
  border-radius: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  padding: 15px 0;
  height: 200px;
  width: 70px;
  transform: scale(0.5);
}

.trafficlight .circle {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 100%;
  position: relative;
  height: 40px;
  width: 40px;
}

.trafficlight .circle::after {
  border-right: 4px solid rgba(255, 255, 255, 0.6);
  border-radius: 100%;
  content: ' ';
  position: absolute;
  top: 5px;
  left: 0px;
  width: 30px;
  height: 30px;
}

.trafficlight .circle.darkred {
  background-color: #721D0A;
  box-shadow: 0 0 20px 5px #721D0A;
}

.trafficlight .circle.red {
  background-color: #c0392b;
  box-shadow: 0 0 20px 5px #c0392b;
}

.trafficlight .circle.red {
  background-color: #c0392b;
  box-shadow: 0 0 20px 5px #c0392b;
}

.trafficlight .circle.yellow {
  background-color: #f1c40f;
  box-shadow: 0 0 20px 5px #f1c40f;
}

.trafficlight .circle.green {
  background-color: #2ecc71;
  box-shadow: 0 0 20px 5px #2ecc71;
}

/* end trafficlight */