:root {
    --e-learnex-color-basic: #009CDD;
    --e-learnex-color-medium:  #EC298A;
    --e-learnex-color-advanced:  #B5CF4F;
    --e-learnex-black-olive: #3e3b40;
    --e-learnex-color-none: rgba(211, 206, 206);
    --e-learnex-color-continue: #f8d756;
    --lightgray: #efefef;
    --blue: steelblue;
    --white: #fff;
    --black: rgba(0, 0, 0, 0.8);
    --bounceEasing: cubic-bezier(0.51, 0.92, 0.24, 1.15);
}
/* SPINER */
.loading {
    display: flex;
}
.loading .dot {
    position: relative;
    width: 2em;
    height: 2em;
    margin: 0.8em;
    border-radius: 50%;
}
.loading .dot::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: inherit;
    animation: wave 2s ease-out infinite;
}
.loading .dot:nth-child(1) {
    background: #7ef9ff;
}
.loading .dot:nth-child(1)::before {
    animation-delay: 0.2s;
}
.loading .dot:nth-child(2) {
    background: #89cff0;
}
.loading .dot:nth-child(2)::before {
    animation-delay: 0.4s;
}
.loading .dot:nth-child(3) {
    background: #4682b4;
}
.loading .dot:nth-child(3)::before {
    animation-delay: 0.6s;
}
.loading .dot:nth-child(4) {
    background: #0f52ba;
}
.loading .dot:nth-child(4)::before {
    animation-delay: 0.8s;
}
.loading .dot:nth-child(5) {
    background: #000080;
}
.loading .dot:nth-child(5)::before {
    animation-delay: 1s;
}
@keyframes wave {
    50%, 75% {
        transform: scale(2.5);
    }
    80%, 100% {
        opacity: 0;
    }
}
/* FIN SPINER */
section.content-lms {
    padding-top: 3rem;
    background-color: #212529;
    min-height: 820px;
}
/*TIME LINE*/
.tracking-detail {
padding:3rem 0
}
#tracking {
margin-bottom:1rem
}
[class*=tracking-status-] p {
margin:0;
font-size:1.1rem;
color:#fff;
text-transform:uppercase;
text-align:center
}
[class*=tracking-status-] {
padding:1.6rem 0
}
.tracking-status-intransit {
background-color:#65aee0
}
.tracking-status-outfordelivery {
background-color:#f5a551
}
.tracking-status-deliveryoffice {
background-color:#f7dc6f
}
.tracking-status-delivered {
background-color:#4cbb87
}
.tracking-status-attemptfail {
background-color:#b789c7
}
.tracking-status-error,.tracking-status-exception {
background-color:#d26759
}
.tracking-status-expired {
background-color:#616e7d
}
.tracking-status-pending {
background-color:#ccc
}
.tracking-status-inforeceived {
background-color:#214977
}
.tracking-list {
border:1px solid #e5e5e5
}
.tracking-item {
border-left:1px solid #e5e5e5;
position:relative;
padding:2rem 1.5rem .5rem 2.5rem;
font-size:.9rem;
margin-left:3rem;
min-height:5rem
}
.tracking-item:last-child {
padding-bottom:4rem
}
.tracking-item .tracking-date {
margin-bottom:.5rem
}
.tracking-item .tracking-date span {
color:#888;
font-size:85%;
padding-left:.4rem
}
.tracking-item .tracking-content {
padding:.5rem .8rem;
background-color:#f4f4f4;
border-radius:.5rem
}
.tracking-item .tracking-content span {
display:block;
color:#888;
font-size:85%
}
.tracking-item .tracking-icon {
line-height:2.6rem;
position:absolute;
left:-1.3rem;
width:2.6rem;
height:2.6rem;
text-align:center;
border-radius:50%;
font-size:1.1rem;
background-color:#fff;
color:#fff
}
.tracking-item .tracking-icon.status-sponsored {
background-color:#f68
}
.tracking-item .tracking-icon.status-delivered {
background-color:#4cbb87
}
.tracking-item .tracking-icon.status-outfordelivery {
background-color:#f5a551
}
.tracking-item .tracking-icon.status-deliveryoffice {
background-color:#f7dc6f
}
.tracking-item .tracking-icon.status-attemptfail {
background-color:#b789c7
}
.tracking-item .tracking-icon.status-exception {
background-color:#d26759
}
.tracking-item .tracking-icon.status-inforeceived {
background-color:#214977
}
.tracking-item .tracking-icon.status-intransit {
color:#e5e5e5;
border:1px solid #e5e5e5;
font-size:.6rem
}
@media(min-width:992px) {
.tracking-item {
    margin-left:10rem
}
.tracking-item .tracking-date {
    position:absolute;
    left:-10rem;
    width:7.5rem;
    text-align:right
}
.tracking-item .tracking-date span {
    display:block
}
.tracking-item .tracking-content {
    padding:0;
    background-color:transparent
}
}
.wrong { 
    color: red;
    font-size: 1rem;
}
.correct { 
    color: #B1CA34;
    font-size: 1rem;
}
.bg-dark {
    color: white;
}
.modal-header .close {
    color: white;
}
.bg-dark input[type="text"] {
    background: rgba(0,0,0,.25);
    color: white;
}
.comprehension_file {
    display: flex;
}
.vocabulary_file {
    display: flex;
}
.lnx-btn-units li.page-item {
    text-align: center;
    
}
.lnx-btn-units li.page-item a.active{
    background-color: #009CDD;
    color: #fff;
}
.lnx-btn-units li.page-item a.noactive{
    background-color: #fff;
    color: #009CDD;
}
.lmsline {
    display: flex;
    flex-direction: column;
    margin: 20px auto;
    position: relative;
}
img.img-modal-link-progress {
    width: 80px;
    padding-right: 3px;
}
.lmsline__event {
    margin-bottom: 20px;
    position: relative;
    display: flex;
    margin: 20px 0;
    border-radius: 6px;
    align-self: center;
    width: 50vw;
}
.lmsline__event:nth-child(2n + 1) {
    flex-direction: row-reverse;
}
.lmsline__event:nth-child(2n + 1) .lmsline__event__date {
    border-radius: 0 6px 6px 0;
}
.lmsline__event:nth-child(2n + 1) .lmsline__event__content {
    border-radius: 6px 0 0 6px;
}
.lmsline__event:nth-child(2n + 1) .lmsline__event__icon:before {
    content: "";
    width: 2px;
    height: 100%;
    position: absolute;
    top: 0%;
    left: 50%;
    right: auto;
    z-index: -1;
    transform: translateX(-50%);
    animation: fillTop 2s forwards 4s ease-in-out;
}
.lmsline__event:nth-child(2n + 1) .lmsline__event__icon:after {
    content: "";
    width: 100%;
    height: 2px;
    position: absolute;
    right: 0;
    z-index: -1;
    top: 50%;
    left: auto;
    transform: translateY(-50%);
    animation: fillLeft 2s forwards 4s ease-in-out;
}
.lmsline__event__title {
    font-size: 1.2rem;
    line-height: 1.4;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1.5px;
}
.lmsline__event__content {
    padding: 20px;
    box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.3), 0 -12px 36px -8px rgba(0, 0, 0, 0.025);
    background: #fff;
    width: calc(40vw - 84px);
    border-radius: 0 6px 6px 0;
}
.lmsline__event__date {
    font-size: 1.5rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    padding: 0 20px;
    border-radius: 6px 0 0 6px;
}
.lmsline__event__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    align-self: center;
    margin: 0 20px;
    border-radius: 100%;
    width: 40px;
    box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.3), 0 -12px 36px -8px rgba(0, 0, 0, 0.025);
    padding: 40px;
    height: 40px;
    position: relative;
}
.lmsline__event__icon i {
    font-size: 32px;
}
.lmsline__event__icon:before {
    content: "";
    width: 2px;
    height: 100%;
    position: absolute;
    top: 0%;
    z-index: -1;
    left: 50%;
    transform: translateX(-50%);
    animation: fillTop 2s forwards 4s ease-in-out;
}
.lmsline__event__icon:after {
    content: "";
    width: 100%;
    height: 2px;
    position: absolute;
    left: 0%;
    z-index: -1;
    top: 50%;
    transform: translateY(-50%);
    animation: fillLeftOdd 2s forwards 4s ease-in-out;
}
.lmsline__event__description {
    flex-basis: 60%;
  }
  /* basic */
  .lmsline__event--basic .lmsline__event__date {
    color: var(--white);
    background: var(--e-learnex-color-basic);
  }
  .lmsline__event--basic:nth-child(2n + 1) .lmsline__event__icon:before, .lmsline__event--basic:nth-child(2n + 1) .lmsline__event__icon:after {
    background: var(--e-learnex-color-basic);
  }
  .lmsline__event--basic .lmsline__event__icon {
    background: var(--e-learnex-color-basic);
    color: var(--white);
  }
  .lmsline__event--basic .lmsline__event__icon:before, .lmsline__event--basic .lmsline__event__icon:after {
    background: var(--e-learnex-color-basic);
  }
  .lmsline__event--basic .lmsline__event__title {
    color: var(--e-learnex-color-basic);
  }
  /* medium */
  .lmsline__event--medium .lmsline__event__date {
    color: var(--white);
    background: var(--e-learnex-color-medium);
  }
  .lmsline__event--medium:nth-child(2n + 1) .lmsline__event__icon:before, .lmsline__event--medium:nth-child(2n + 1) .lmsline__event__icon:after {
    background: var(--e-learnex-color-medium);
  }
  .lmsline__event--medium .lmsline__event__icon {
    background: var(--e-learnex-color-medium);
    color: var(--white);
  }
  .lmsline__event--medium .lmsline__event__icon:before, .lmsline__event--medium .lmsline__event__icon:after {
    background: var(--e-learnex-color-medium);
  }
  .lmsline__event--medium .lmsline__event__title {
    color: var(--e-learnex-color-medium);
  }
  /* advanced */
  .lmsline__event--advanced .lmsline__event__date {
    color: var(--white);
    background: var(--e-learnex-color-advanced);
  }
  .lmsline__event--advanced:nth-child(2n + 1) .lmsline__event__icon:before, .lmsline__event--advanced:nth-child(2n + 1) .lmsline__event__icon:after {
    background: var(--e-learnex-color-advanced);
  }
  .lmsline__event--advanced .lmsline__event__icon {
    background: var(--e-learnex-color-advanced);
    color: var(--white);
  }
  .lmsline__event--advanced .lmsline__event__icon:before, .lmsline__event--advanced .lmsline__event__icon:after {
    background: var(--e-learnex-color-advanced);
  }
  .lmsline__event--advanced .lmsline__event__title {
    color: var(--e-learnex-color-advanced);
  }
  /* none */
  .lmsline__event--none .lmsline__event__date {
    color: var(--white);
    background: var(--e-learnex-color-none);
  }
  .lmsline__event--none:nth-child(2n + 1) .lmsline__event__icon:before, .lmsline__event--none:nth-child(2n + 1) .lmsline__event__icon:after {
    background: var(--e-learnex-color-none);
  }
  .lmsline__event--none .lmsline__event__icon {
    background: var(--e-learnex-color-none);
    color: var(--white);
  }
  .lmsline__event--none .lmsline__event__icon:before, .lmsline__event--none .lmsline__event__icon:after {
    background: var(--e-learnex-color-none);
  }
  .lmsline__event--none .lmsline__event__title {
    color: var(--e-learnex-color-none);
  }
  /* continue */
  .lmsline__event--continue .lmsline__event__date {
    color: var(--white);
    background: var(--e-learnex-color-continue);
  }
  .lmsline__event--continue:nth-child(2n + 1) .lmsline__event__icon:before, .lmsline__event--continue:nth-child(2n + 1) .lmsline__event__icon:after {
    background: var(--e-learnex-color-continue);
  }
  .lmsline__event--continue .lmsline__event__icon {
    background: var(--e-learnex-color-continue);
    color: var(--white);
  }
  .lmsline__event--continue .lmsline__event__icon:before, .lmsline__event--continue .lmsline__event__icon:after {
    background: var(--e-learnex-color-continue);
  }
  .lmsline__event--continue .lmsline__event__title {
    color: var(--e-learnex-color-continue);
  }
  
  .lmsline__event:last-child .lmsline__event__icon:before {
    content: none;
  }