/* Lessons */

#package-title-link {
  cursor: pointer;
  color: var(--light-grey-color);
}
#package-title-link:hover {
  color: var(--highlight-color);
}

.lesson-section {
  margin-top: 10px;
}
@media screen and (max-width: 420px) { /* Large Phone */
  .lesson-section {
    padding: 0;
  }
}

.lesson-text {

}

div.col-md-7.col-sm-12{
  background: var(--less-transparent-bg);
  border-right: 2px solid grey;
  border-left: 2px solid grey;
}

.dan-text > .media-body > p, .aria-text > .media-body > p {
  max-width: 70%;
  margin: 1% 0;

}
@media screen and (max-width: 769px) { /*Tablet */
  .dan-text > .media-body > p, .aria-text > .media-body > p {
    max-width: 80%;
    margin: 2% 0;
  }
}
@media screen and (max-width: 325px) { /* Small Phone */
  .dan-text > .media-body > p, .aria-text > .media-body > p {
    max-width: 90%;
  }
}

.dan-text img, .aria-text img {
  width: 40px;
}
@media screen and (max-width: 769px) { /*Tablet */
  .dan-text img, .aria-text img {
    width: 50px;
  }
}

.aria-text > .media-body > p {
  text-align: right;
  font-style: italic;
  margin-left: 30%;
}
@media screen and (max-width: 769px) { /*Tablet */
  .aria-text > .media-body > p {
    margin-left: 20%;
  }
}
@media screen and (max-width: 325px) { /* Small Phone */
  .aria-text > .media-body > p {
    margin-left: 10%;
  }
}

.lesson-img {
  width: 60%;
  margin: 0 20%;
  border-radius: var(--border-radius);
  transition: all 1s ease-out;
}
.lesson-img:hover {
  width: 100%;
  margin: 0 0;
}
@media screen and (max-width: 769px) { /*Tablet */
  .lesson-img {
    width: 90%;
    margin: 2% 5%;
    border-radius: var(--border-radius-mobile);
  }
  .lesson-img:hover {
    width: 100%;
    margin: 2% 0;
  }
}
@media screen and (max-width: 420px) { /* Large Phone */
  .lesson-img {
    width: 100%;
    margin: 2% 0%;
  }
}

.lesson-img-dual {
  width: 48%;
  margin: 0 0%;
  border-radius: var(--border-radius);
}
@media screen and (max-width: 769px) { /*Tablet */
  .lesson-img-dual {
    width: 90%;
    margin: 2% 5%;
    border-radius: var(--border-radius-mobile);
  }
}
@media screen and (max-width: 420px) { /* Large Phone */
  .lesson-img-dual {
    width: 100%;
    margin: 2% 0%;
  }
}

.lesson-img-caption {
  text-align: center;
  font-weight: bold;
  margin: 10px 0;
}

.in-lesson-list {

}

.in-lesson-list li {

}

/*  Video */
.lesson-video{

}

/*  Code */
pre {
  counter-reset: line;
  word-break: normal;
  word-wrap: normal;
  width: 90%;
  margin-left: 5%;
}
@media screen and (max-width: 769px) { /*Tablet */
  pre {
    width: 100%;
    margin-left: 0%;
  }
}

.reduced-width-code {
  width: 55%;
  float: left;
}

code {
  counter-increment: line;
  -webkit-user-select: text;
  margin-left: -4vw;
}
@media screen and (max-width: 420px) { /* Large Phone */
  code {
    margin-left: -12vw;
  }
}

code::before {
  content: counter(line);
  display: inline-block;
  width: 2em;
  border-right: 1px solid #ddd;
  margin-right: .5em;
  color: #888;
  -webkit-user-select: none;
}

code input {
  outline: initial;
  width: 90%;
}

code input:focus {
  outline: initial;
}

.custom-css-input {
  width: initial;
}

.compiled-code-example {
  padding: 2% 2% 3% 2%;
}

.compiled-code-example img {
  width: 50%;
  margin: 0 25%;
}

/*  Edit Code */
.lesson-edit-single {
  width: 40%;
  margin: 1% 5%;
  padding: 1%;
  height: 40px;
  float: left;
}

.lesson-edit-single-feedback {
  width: 40%;
  height: 50px;
  float: right;
  line-height: 20px;
}

.lesson-edit-single-feedback {
  width: 80%;
  height: 50px;
  margin: 1% 10%;
}

.valid-entry {
  outline: 3px solid green !important;
}

.invalid-entry {
  outline: 3px solid red !important;
}

/*  Individual Styling */

#css-intro-hover {
  width: 100%;
  text-align: left;
  text-decoration: none;
}

#css-intro-hover:hover {
  width: 100%;
  text-align: center;
  text-decoration: underline;
  color: red;
}

.lesson-example-box {
  height: 300px;
  width: 100%;
  margin: 0%;
  border: solid 3px var(--dark-grey-color);
  overflow: hidden;
}

.height-lesson-img {
  width: auto;
  border-radius: var(--border-radius);
}
@media screen and (max-width: 769px) { /*Tablet */
  .height-lesson-img {
    margin: 0 5%;
  }
}

.width-lesson-img {
  height: auto;
  border-radius: var(--border-radius);
}
@media screen and (max-width: 769px) { /*Tablet */
  .width-lesson-img {
    margin: 0 5%;
  }
}

.font-family-example {
  width: 35%;
  margin-left: 65%;
  padding-top: 1%;
  line-height: 0.9em;
}