@import url('https://fonts.googleapis.com/css2?family=Anonymous+Pro&display=swap');

.style-lesson-is-cool {
    
}

.blue-color {
    color:var(--color-blue)!important;
}

.green-color {
    color:var(--color-green)!important;
}

.neutral-color {
    color:var(--color-neutral)!important;
}

.red-color {
    color:var(--color-red)!important;
}

.orange-color {
    color:#FF6200!important;
}

.th {
    background-color: var(--color-background-light);
}

/*
common
*/

article.lesson > form {
    position: relative;
    display: block;
}

article.lesson .table {
    position: relative;;
    display: table;
}

.table.fixsize {
    table-layout: fixed;
}

article.lesson .table.border {
    border-bottom: solid 1px var(--color-light);
}

article.lesson .table.border-top {
    border-top: solid 1px var(--color-light);
}

article.lesson .table.full {
    width: 100%;
}

.spaced,
article.lesson .table.spaced {
    padding:10px!important;
}

.spaced.big {
    padding: 40px!important;
}

article.lesson .drag-me {
    position: absolute;
}

article.lesson .table  > .col {
    position: relative;;
    display: table-cell;
    vertical-align: middle;
}

article.lesson .table  > .col.button-list,
article.lesson .table  > .col.thumb-gallery {
    position: relative;
    padding-right: 40px;
    padding-left: 40px;
    padding-top: 12px;
    padding-bottom: 12px;
}

article.lesson .table  > .col.thumb-gallery > span {
    position: relative;
    display: inline-block;
    width: 20%;
}

article.lesson .table  > .col.thumb-gallery > span  > figure {
    position: relative;
    display:block;
    padding: 20px 5px;
    opacity: .3;
}

article.lesson .table  > .col.thumb-gallery > span.active  > figure {
    opacity: 1;
}

article.lesson .table  > .col  > .thumb-gallery > span > figure > img {
    position: relative;
    max-width: 100%;
}

article.lesson .table  > .col.top {
    vertical-align: top;
}

article.lesson .table  > .col.spaced {
    padding: 20px;
}

article.lesson .table  > .col.bottom {
    vertical-align: bottom;
}

article.lesson .table.fixed {
    table-layout: fixed;
}

article.lesson .table  > .col.two {
    width: 50%;
}

article.lesson .table  > .col.three {
    width: 33%;
}

article.lesson .table  > .col.three-half {
    width: 40%;
}

article.lesson .table  > .col.three-half .row {
    padding: 5px 10px;
}

article.lesson .table  > .col.four {
    width: 25%;
}

article.lesson .table  > .col.five {
    width: 20%;
}

article.lesson .table  > .col.then {
    width: 10%;
}

article.lesson .table  > .col.third:first-child {
    width: 30%;
}

article.lesson .table  > .col.third:last-child {
    width: 70%;
}

article.lesson .table  > .col.third-invert:first-child {
    width: 60%;
}

article.lesson .table  > .col.third-invert:last-child {
    width: 40%;
}

article.lesson .table  > .col.fourth:first-child {
    width: 25%;
}

article.lesson .table  > .col.fourth:last-child {
    width: 75%;
}

article.lesson .table  > .col.fifth:first-child {
    width: 20%;
}

article.lesson .table  > .col.sixty:first-child {
    width: 16%;
}

article.lesson .table  > .col.six {
    width: 16%;
}

article.lesson .table  > .col.sixth:first-child {
    width: 10%;
}

article.lesson .table  > .col.seventh:first-child {
    width: 5%;
}

article.lesson .table  > .col.seven {
    width: 14%;
}

article.lesson .table  > .col.eight {
    width: 10%;
}

article.lesson .table  > .col.sixth-invert:first-child {
    width: 80%;
}

article.lesson .table  > .col.sixth-invert:last-child {
    width: 20%;
}

article.lesson .table  > .col.fifth:last-child {
    width: 80%;
}

article.lesson .table  > .col.border {
    border-right: solid 1px var(--color-light);
}

article.lesson .table  > .col.border:last-child {
    border-right: none;
} 

article.lesson .table .row {
    position: relative;
    display: block;
    padding: 15px;
    width: 100%;
}

.dark-color {
    background-color: #D5D5D5;
}

article.lesson .table .row.compact {
    padding: 5px 10px;
    min-height: 52px;
}

article.lesson .table .row.border {
    border-bottom: solid 1px var(--color-light);
}

article.lesson .table .row.border-top {
    border-top: solid 1px var(--color-light);
}

article.lesson .table:not(.show-last-border) .row.border:last-child {
    border-bottom: none;
}

.align-center {
    text-align: center;
}

.align-right {
    text-align: right;
}

.align-left {
    text-align: left;
}

figure {
    position: relative;
    display: table;
    margin: 0 auto;
}

figure.left-align {
    margin: 0;
}

figure.spacer {
    padding: 5px 0px;
}

figure.spaced {
    padding: 10px;
}

figure > img {
    position: relative;
    display: table;
    max-width: 100%;
    margin: 0 auto;
}

figure.overflowed {
    position: relative;
    display: table;
    margin: 0 auto;
    height: 140px;
    text-align: left;
    width: 100%;
}

figure.overflowed  > img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: initial;
    max-width: none;
    left: 0px;
}

article.lesson .table .row.compress {
    padding: 0px 10px;
}

article.lesson .table .row.ultra.compress {
    padding: 0px 10px;
}

article.lesson .table .row.compress.fields span.drop-line > input {
   /* margin: 0px!important;*/
}

article.lesson .table .row.compress.fields > span > span {
    width: 20px!important;
    height:20px;
    line-height: 20px;
    font-size: 14px;
    
}

article.lesson .table .row.compress.fields > span > input {
    padding:6px;
    margin-top: 2px!important;
}

article.lesson .table .row.ultra.compress.fields > span {
    padding: 1px;
}

article.lesson  .table.blue .row.fields > span > span  {
    background-color: var(--color-blue);
}

article.lesson  .table.green .row.fields > span > span  {
    background-color: var(--color-green);
}

article.lesson  .table.orange .row.fields > span > span  {
    background-color:  #FF6200;
}

article.lesson  .table.expand-input .fields > span.no-full {
    width: 100%;
}

article.lesson  .table.expand-input .fields > span.no-full > input {
    width: 90%;
}

article.lesson .table .row.border.active {
    background-color: #D8D8D8;
}

.col.compare:not(.basic) >  .row  > span > span {
    color: transparent;
    background-color: #777C7F;
}

.col.pick >  .row.ok  > span > span ,
.col.compare >  .row.ok  > span > span {
    pointer-events: none;
    opacity: .4;
}

.boolean {
    position: relative;
    background-color: #D5D5D5;
    border-radius: 10px;
    display: table!important;
    overflow: hidden;
}

.boolean > span {
    position: relative;
    display: table-cell;
    padding: 15px 20px;
    font-size: 16px;
    font-weight: bold;
    color:#fff;
    cursor: pointer;

}

.boolean > span:hover {
    background-color: #777C7F;
}

.boolean > span.wrong {
    background-color: #ED1E4A;
}

.boolean > span.not-wrong {
    background-color: #07DCA2;
}

.boolean.clicked > span {
    pointer-events: none;
}

.boolean.small {
    display: inline-block!important;
    vertical-align: middle!important;
}

.boolean.small > span {
    font-size: 12px!important;
    padding: 8px !important;
}

.multiple-choice {
    position: relative;
    border-radius: 10px;
    display: table-cell;
    vertical-align: middle;
    overflow: hidden;
}

.multiple-choice > ul {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    padding: 0px;
}

.multiple-choice > label {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    font-size: 16px;
    padding: 0px 10px;
    font-weight: bold;
    color: var(--color-neutral);
}


.multiple-choice > ul > li {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    padding: 2px 0px;
    
}
.multiple-choice > ul > li > span {
    background-color: #707070;
    font-size: 16px;
    font-weight: bold;
    color:#fff;
    cursor: pointer;
    text-align: center;
    padding: 3px 30px;
    margin: 5px;
    border-radius: 20px;
}

.multiple-choice > ul > li:hover > span {
    background-color: #777C7F;
}

.multiple-choice > ul > li.wrong  > span{
    background-color: #ED1E4A;
}

.multiple-choice > ul > li.not-wrong > span {
    background-color: #07DCA2;
}

.multiple-choice > ul.clicked  > li {
    pointer-events: none;
}

.multiple-choice > span:not(.dot) {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    padding: 0px;
    padding-left: 30px;
}

.multiple-choice > span > label {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-weight: 300;
    font-size: 14px;
    font-weight: bold;
    font-weight: normal;
    color: var(--color-neutral);
}

.multiple-choice > span > div {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    height: 28px;
    width: 140px !important;
    border: dashed 1px #525659;
    background-color: #fff;
    border-radius: 15px;
    cursor: pointer;
    font-size: 14px;
    text-align: center;
    font-weight: bold;
    vertical-align: middle;
    line-height: 28px;
}

.multiple-choice > span > div.wrong {
    background-color: var(--color-red);;
    color:#fff;
}

.multiple-choice > span > div.not-wrong {
    background-color: var(--color-green);;
    color:#fff;
}

/*
main
*/

.lesson-container  {
    position: relative;
    display: none;
}

.lesson-container.active  {
    position: relative;
    display: block;
}

article.lesson  {
    position: relative;
    /*display: none;*/
    display: block;
    width: 1280px;
    background-color: var(--color-background);
    background-image: url(../../../../files/img/lesson/common/bg.svg);
}

article.lesson.active {
    position: relative;
    display: block;

    /* scroll */
    overflow-y: auto;
    max-height: 90vh;
}

article.lesson > div {
    position: relative;
    display: block;
}

.validating > article {
    opacity: .2;

    background: rgba(0, 153, 255, 1);
    /*animation: bgg 16087ms ease-in alternate infinite;*/
    pointer-events: none;
}

.validating:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: 30px;
    color: #000000;
    /*content:'corrigindo';*/
    text-transform: uppercase;
    content: ' ';
    /*background: rgba(0, 153, 255, 1);*/
    /*animation: bgg 16087ms ease-in alternate infinite;*/
    background-color: var(--highlight-color);
    width: 100%;
    height: 100%;
    z-index: -1;
}

.correcting .input {
    pointer-events: none;
}

.correcting .option {
    pointer-events: none;
}

/*
loader w10
*/

@keyframes bgg {
    0% { background: rgba(0, 153, 255, 1); }
    50% { background: rgba(41, 255, 121, 1); }
    100% { background: rgba(255, 74, 88, 1); }
  }
  .loader-w10 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 50px;
    height: 50px;
    margin: auto;
  }
  .loader-w10 .circle {
    position: absolute;
    width: 38px;
    height: 38px;
    opacity: 0;
    transform: rotate(225deg);
    animation-iteration-count: infinite;
    animation-name: orbit;
    animation-duration: 5.5s;
  }
  .loader-w10 > span {
    position: absolute;
    width: 300px;
    text-align: center;
    left: 50%;
    top: 50px;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: bold;
    color: var(--text-color);
  }
  .loader-w10 .circle:after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 0 9px rgba(255, 255, 255, .7);
  }
  .loader-w10 .circle:nth-child(2) {
    animation-delay: 240ms;
  }
  .loader-w10 .circle:nth-child(3) {
    animation-delay: 480ms;
  }
  .loader-w10 .circle:nth-child(4) {
    animation-delay: 720ms;
  }
  .loader-w10 .circle:nth-child(5) {
    animation-delay: 960ms;
  }
  .loader-w10 .bg {
    position: absolute;
    width: 70px;
    height: 70px;
    margin-left: -16px;
    margin-top: -16px;
    border-radius: 13px;
    /*background-color: rgba(0, 153, 255, 0.69);
    animation: bgg 16087ms ease-in alternate infinite;*/
  }
  @keyframes orbit {
    0% {
      transform: rotate(225deg);
      opacity: 1;
      animation-timing-function: ease-out;
    }
    7% {
      transform: rotate(345deg);
      animation-timing-function: linear;
    }
    30% {
      transform: rotate(455deg);
      animation-timing-function: ease-in-out;
    }
    39% {
      transform: rotate(690deg);
      animation-timing-function: linear;
    }
    70% {
      transform: rotate(815deg);
      opacity: 1;
      animation-timing-function: ease-out;
    }
    75% {
      transform: rotate(945deg);
      animation-timing-function: ease-out;
    }
    76% {
      transform: rotate(945deg);
      opacity: 0;
    }
    100% {
      transform: rotate(945deg);
      opacity: 0;
    }
  }


/*
header
*/

article.lesson .header {
    position: relative;
    display: table;
    width: 100%;
    background-color: var(--color-background);
    padding: 20px 60px 20px 40px;
}

article.lesson .header > .ico {
    position: relative;
    display: table-cell;
    vertical-align: middle;   
}

article.lesson .header > .ico > figure {
    position: relative;
    display: inline-block;
    width: 55px;
    height: 55px;
    border-radius: 100%;
    background-color: var(--color-green);
    vertical-align: middle;
    margin-right: 10px;
}

article.lesson .header > .ico > figure > img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    width: 65%;
}

article.lesson .header > .ico > span {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

article.lesson .header > .ico > span > h1 {
    position: relative;
    display: block;
    font-size: 30px;
    line-height: 110%;
    letter-spacing: 0;
    padding: 0px;
    text-transform: uppercase;
    font-weight: bold;
    color:var(--color-green);
}

article.lesson .header > .ico > span > h2 {
    position: relative;
    display: block;
    font-size: 18px;
    line-height: 110%;
    letter-spacing: 0;
    padding: 0px;
    text-transform: uppercase;
    font-weight: bold;
    color:var(--color-neutral);
}

article.lesson .header > .title {
    position: relative;
    display: table-cell;
    vertical-align: middle;   
    text-align:left;
}

article.lesson .header > .title > h1 {
    position: relative;
    display: block;
    font-size: 28px;
    line-height: 110%;
    letter-spacing: 0;
    padding: 0px;
    text-transform: uppercase;
    font-weight: bolder;
    color:var(--color-green);
}

article.lesson .header > .title > h1 > span {
    font-weight: normal;
    color:var(--color-neutral);
    padding-left: 5px;
    font-size: inherit;
    line-height: inherit;
    display: inline-block;;
    vertical-align: middle;
    font-size:16px;
    line-height: 90%;
    line-height: inherit;
}

article.lesson .header > .action {
    position: relative;
    display: table-cell;
    vertical-align: middle;   
    text-align: right;
}

article.lesson .header > .title:last-child > h1 {
    text-align: right;
    font-size: 20px;
}

article.lesson .header > .action > a {
    position: relative;
    display: inline-block;
    border-radius: 50px;
    padding: 13px 60px;
    font-style: normal;
    font-size: 18px;
    font-weight: bold;
    line-height: 20px;
    text-align: center;
    color: #ffffff;
    background-color: var(--color-blue);
    transition: 5s;
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
}

article.lesson .header > .action > a:hover {
    background-color: var(--color-neutral);
}

/*
content
*/

article.lesson .content {
    position: relative;
    display: table;
    width: 100%;
    height: 600px;
    text-align: left;
}

article.lesson .content > figure {
    display: table-cell;
    vertical-align: middle;
}

article.lesson .content > .container {
    position: relative;
    display: table-cell;
    vertical-align: middle;
}

article.lesson .content > .container  .box {
    position: relative;
    display: block;
    vertical-align: middle;
    margin: 0px 40px;
    /*min-height: 522px;*/
    background-color: var(--color-background);
    border-radius: 20px;
    overflow: hidden;
    border: solid 1px #E4E4E4;;
    -webkit-box-shadow: 1px 1px 6px 0px rgba(0,0,0,0.39);
    -moz-box-shadow: 1px 1px 6px 0px rgba(0,0,0,0.39);
    box-shadow: 1px 1px 6px 0px rgba(0,0,0,0.39);
}

.col-box {
    background-color: var(--color-background);
    border-radius: 20px;
    overflow: hidden;
    border: solid 1px #E4E4E4;;
    -webkit-box-shadow: 1px 1px 6px 0px rgba(0,0,0,0.39);
    -moz-box-shadow: 1px 1px 6px 0px rgba(0,0,0,0.39);
    box-shadow: 1px 1px 6px 0px rgba(0,0,0,0.39);
    margin: 10px;
}

article.lesson .content > .container  .box > h1 {
    position: relative;
    display: block;
    width: 100%;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    padding: 10px;
    background-color: var(--color-green);
}

article.lesson .content > .container  .box.opc {
    background-color: transparent!important;
}

article.lesson .content > .container  .box.clean {
    background-color: transparent!important;
    box-shadow: none;
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    border: none;
    border-radius: none;
}

article.lesson .content > .container  .box.clean.spaced {
    padding: 10px 0px;
}


/* 
text 
*/

article.lesson h5 {
    position: relative;
    display: block;
    width: auto;
    padding: 0px 0px;
    font-size: 18px;
    font-weight: bold;
    color:var(--color-neutral);
}

article.lesson h5 * {
    color:inherit;
    font-size: inherit;
    font-weight: inherit;
    display: inline;
    line-height: 120%;
}



article.lesson h5.small {
    font-size: 16px!important;
}

article.lesson h5 > span > span,
article.lesson h5 > span {
    font-size: inherit;
    font-weight: inherit;
    display: inline-block;
    color:inherit;
    /*
    vertical-align: top;
    vertical-align: middle;
    */
    line-height: inherit;
}

article.lesson h5 > span {
    max-width: 90%;
}

span.mark,
article.lesson h5 > span.mark {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 20px !important;
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    background-color: #0069B4;
    color:#fff;
    border-radius: 100%;
    text-align: center;
    font-weight: bold;
    margin-right: 5px;
    vertical-align: top;
}

span.mark.big,
article.lesson h5 > span.mark.big {
    width: 24px!important;
    height: 24px!important;
    font-size: 16px;
    line-height: 24px;
}

span.mark.red,
article.lesson h5 > span.mark.red {
    background-color: var(--color-red);
}

span.mark.green,
article.lesson h5 > span.mark.green {
    background-color: var(--color-green);
}

span.mark.orange,
article.lesson h5 > span.mark.orange {
    background-color: #FF6200;
}

article.lesson h6 {
    position: relative;
    display: block;
    width: auto;
    padding: 0px 0px;
    font-size: 18px;
    font-weight: normal;
    color:var(--color-neutral);
}

article.lesson h6.audio:before {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 30px;
    height: 30px;
    background-color: var(--color-green);
    border-radius: 100%;
    content: '';
    background-image: url(../../../../files/img/lesson/common/ico-audio.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 70%;
    margin-right: 10px;
}

article.lesson text {
    position: relative;
    display: block;
    width: auto;
    padding: 0px 0px;
    font-size: 14px;
    color:var(--color-neutral);
}

article.lesson > form > .content > h5 {
    padding: 20px 40px 0px 40px;
}

article.lesson > form > .content > h5 + div {
    margin-top: 20px!important;
}

article.lesson > form > .content > .container > h5 {
    padding: 20px 40px 0px 40px;
}



article.lesson > form > .content > .container > h5 + div:not(.auto-fill-options) {
    margin-top: 20px!important;
}

/*
footer
*/

article.lesson .footer {
    position: relative;
    display: table;
    width: 100%;
    background-color: #E8E8E8;
}

article.lesson .footer > .action {
    position: relative;
    display: table-cell;
    vertical-align: middle;   
    text-align: left;
}

article.lesson .footer > .action:last-child {
    text-align: right;
}

article.lesson .footer > .action > a {
    position: relative;
    display: inline-block;
    padding: 15px 30px;
    font-size: 18px;
    background-color: var(--color-blue);
    color: #ffffff;
}

article.lesson .footer > .action.audio > a {
    background-color: var(--color-green);
}

article.lesson .footer > .action.audio > a  .green-audio-player .controls {
    bottom: 0px;
}

article.lesson .footer > .action > a:before {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    background-color: #fff;
    font-size: 20px;
    font-family: "Material Icons";
    text-align: center;
    line-height: 100%;
    border-radius: 100%;
    margin-right: 10px;

}

article.lesson .footer > .action.send > a:before {
    color: var(--color-blue);
    content:''; /* send  */
}

article.lesson .footer > .action.orange > a {
    background-color: #FF6200;
}

article.lesson .footer > .action.orange > a:before {
    color:#FF6200;
}


article.lesson .footer > .action.audio > a:before {
    content:''; /* audio */
    content:'';
    color: var(--color-green);
    display: none;
}

/*
columns
*/

article.lesson ul.columns {
    position: relative;
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 500px;
}

article.lesson ul.columns > li {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    opacity: 0.5;
}

article.lesson ul.columns > li.active {
    opacity: 1;
}

article.lesson ul.columns > li.col-green {
    background-color: #009640;
}

article.lesson ul.columns > li.col-red {
    background-color: #E30613;
}

article.lesson ul.columns > li.col-yellow {
    background-color: #FFED00;
}

article.lesson ul.columns > li.col-black {
    background-color: #000000;
}

article.lesson ul.columns > li.col-black > div {
    color:#fff!important;
}

article.lesson ul.columns > li.col-white {
    background-color: #ffffff;
}

article.lesson ul.columns > li.col-blue {
    background-color: #0069B4;
}

article.lesson ul.columns > li.col-gray {
    background-color: #777C7F;
}

article.lesson ul.columns > li > div.audio:before {
    position: relative;
    display: block;
    vertical-align: bottom;
   
    margin:10px auto;
    
    width: 30px;
    height: 30px;
    background-color: var(--color-green);
    border-radius: 100%;
    content: '';
    background-image: url(../../../../files/img/lesson/common/ico-audio.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 70%;
}

article.lesson ul.columns > li > div.audio {
    position: relative;
    display: block;
    vertical-align: middle;
    text-align: center;
    padding: 20px;
    font-size: 20px;
    color: #ffffff;
    background-color: rgba(0,0,0,.2);
}

/* audio columns
*/

.column-audio .green-audio-player,
.audio-player.column-audio {
   width: 100%!important;
    min-width: 0 !important;
    margin: 0 auto;
    background-color: rgba(0,0,0,.2) !important;
    padding: 10px 0px;
}

.audio-player.column-audio > span {
    background-color: transparent!important;
    box-shadow: none!important;
    display: table !important;
}

.audio-player.column-audio .controls > .controls__slider  {
   display: none!important;
}

.audio-player.column-audio .green-audio-player .holder {
    position: relative;
    display: block;

}

.audio-player.column-audio .controls,
.audio-player.column-audio .green-audio-player .holder .play-pause-btn,
.audio-player.column-audio  .media-name {
    position: relative!important;
    display: block!important;
    top:initial!important;
    left: initial!important;
    margin: 0 auto!important;
    transform: none!important;
    padding: 5px !important;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
}

audio-player.column-audio  .green-audio-player img, 
.audio-player.column-audio .green-audio-player svg {
    width: 20px;
    height: 20px;
    padding: 15px;
    margin: 0 auto;
    color:#fff!important

}

/* audio big-block
*/

ul.big-block {
    position: relative;
    display: block;
    padding: 20px;
}

ul.big-block  > li {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 20%;
    padding: 5px;
    opacity: .5;
}

ul.big-block  > li.active {
    opacity: 1;
}

ul.big-block  > li.active > span {
    
    border: solid 1px var(--color-green);
}

ul.big-block  > li > span {
    position: relative;
    background-color: #E4E4E4;
    border-radius: 10px;
}

ul.big-block > li > span > span {
    position: absolute;
    top: 2px;
    left: 2px;
}

ul.big-block  > li > span > div {
    position: relative;
    display: table;
    padding: 20px;
    font-size: 38px;
    color: #525659;
    font-weight: bold;
    text-align: center;
    margin: 0 auto;
}

.block-audio .green-audio-player,
.audio-player.block-audio {
   width: 30px!important;
    min-width: 0 !important;
    margin: 0 auto;
    background-color: transparent !important;
    padding: 10px 0px;
    height: 30px!important;
}

.audio-player.block-audio > span {
    background-color: transparent!important;
    box-shadow: none!important;
    display: table !important;
    padding: 0px;
    border: 0px;
}

.audio-player.block-audio .controls > .controls__slider  {
   display: none!important;
}

.audio-player.block-audio .green-audio-player .holder {
    position: relative;
    display: block;
}

.audio-player.block-audio .controls,
.audio-player.block-audio .green-audio-player .holder .play-pause-btn,
.audio-player.block-audio  .media-name {
    position: relative!important;
    display: block!important;
    top:initial!important;
    left: initial!important;
    margin: 0 auto!important;
    transform: none!important;
    padding: 5px !important;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
}

audio-player.block-audio  .green-audio-player img, 
.audio-player.block-audio .green-audio-player svg {
    width: 10px;
    height: 10px;
    padding: 5px;
    margin: 0 auto;
    color:#fff!important

}

/*
small-block
*/

/* audio small-block
*/

ul.small-block {
    position: relative;
    display: block;
}

ul.small-block  > li {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 20%;
    padding: 8px;
    border: solid 1px #e4e4e4;
}

ul.small-block  > li > span {
    position: relative;
   /* background-color: #E4E4E4;*/
    border-radius: 10px;
}

ul.small-block > li > span > span {
    position: absolute;
    top: 2px;
    left: 2px;
}

ul.small-block  > li > span > div {
    position: relative;
    display: table;
    padding: 15px;
    font-size: 20px;
    color: #525659;
    font-weight: bold;
    text-align: center;
    margin: 0 auto;
}

ul.small-block  > li:nth-child(n+1):nth-child(-n+5) > span > div {
    color:#E30613;
}

ul.small-block  > li:nth-child(n+6):nth-child(-n+10) > span > div {
    color:#0069B4;
}

ul.small-block  > li:nth-child(n+11):nth-child(-n+15) > span > div {
    color:#009640;
}

ul.small-block  > li:nth-child(n+16):nth-child(-n+20) > span > div {
    color:#FF9900;
}

ul.small-block  > li:nth-child(n+21):nth-child(-n+25) > span > div {
    color:#525659;
}

ul.small-block  > li:nth-child(n+26):nth-child(-n+30) > span > div {
    color:#F21693;
}

ul.small-block  > li:nth-child(n+31):nth-child(-n+35) > span > div {
    color:#469B98;
}

/*
typer */

ul.typer {
    position: relative;
    display: block;
}

ul.typer > li {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 48px;
    padding: 5px;
}

ul.typer > li > input {
    position: relative;
    display: block;
    background-color: #fff!important;
    text-align: center;
}

/* 
form 
*/
 
.fields > span { 
    position: relative;
    display: table;
    width: 100%;
    padding: 5px 0px;
}


.fields  > input,
.fields > span > div > input,
.fields > span > div > textarea,
.fields > span > input,
.fields > span > textarea {
    position: relative;
    display: table-cell;
    color:var(--color-neutral);
    border: solid 1px var(--color-light);
    box-shadow: none;
    opacity: 0.9;
    box-sizing: border-box;
    border-radius: 10px;
    font-size: 15px;
    line-height: 18px;
    padding: 8px;
    background-color: transparent !important;
    width: 100%;
}

.fields > span.full-force > input {
    min-width: 750px;
}

.fields > label {
    position: relative;
    display: table;
    font-weight: 300;
    font-size:14px;
    font-weight: bold;
    color:var(--color-neutral);
}

.fields > span > span {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 30px!important;
    height: 30px;
    background-color: red;
    border-radius: 100%;
    text-align: center;
    line-height: 30px;
    font-weight: bold;
    font-size: 18px;
}

.fields > span > label {
    position: relative;
    display: table-cell;
    font-weight: 300;
    font-size:14px;
    font-weight: bold;
    font-weight: normal;
    color:var(--color-neutral);
    vertical-align: middle;
}

.fields.center > span > label {
    text-align: center!important;
}

.fields > span > label:not(.left-align):last-child {
    text-align: right;
}

.fields > span > label.left-align {
    width: 90%;
}

.fields.right-fix > span > label {
    width: 140px;
    text-align: right;
    font-weight: normal;
    padding-right: 10px;
}

.fields > span.no-full {
    width: auto;
    
}

.fields > span.no-full.center {
    margin: 0 auto;
}

.fields > span.no-full > * {
    margin-right: 5px;
    display: inline-block;
    width: auto;
    vertical-align: middle;
    
}

.fields > span.no-full.block {
    width: 100%!important;
    padding: 2px;
}

.fields > span.no-full.block > label {
    width: 20%;
    display: inline-block;
    padding-left: 40px;
}

.fields > span.no-full.block > input {
    width: 74%;
    display: inline-block;
}

.fields > span.no-full.block-2 {
    width: 100%!important;
    padding: 2px;
}

.fields > span.no-full.block-2 > label {
    width: 20%;
    display: inline-block;
}

.fields > span.no-full.block-2 > input {
    width: 74%;
    display: inline-block;
}

.fields > span.no-full.block-3 {
    width: 100%!important;
    padding: 2px;
}

.fields > span.no-full.block-3 > label {
    width: 10%;
    display: inline-block;
}

.fields > span.no-full.block-3 > input {
    width: 74%;
    display: inline-block;
}

.fields.spaced {
    padding: 0px 10px;
}

.fields.single-line > span.no-full > * {
    max-width: 33%;
}

.fields.single-line > span.no-full.xpand > * {
    max-width: 55%;
}

.fields > span.drop-line {
    width: 100%;
}

.fields > span.drop-line > span,
.fields > span.drop-line > label {
    margin-right: 5px;
    display: inline-block;
    width: auto;
}

.fields > span.drop-line > input {
    display: block;
    width: 100%;
    margin: 10px 0px 0px 0px;
}

.fields > span.drop-line > div:not(.boolean) {
    position: relative;
    display: block;
    padding: 5px 0px;
}

.fields > span.drop-line > div > input,
.fields > span.drop-line > div > label {
    margin-right: 5px;
    display: inline-block;
    width: auto;
    color: var(--color-neutral);
    vertical-align: middle;
}

.fields > span.drop-line > div > input {
    width: 80%;
}

.big-textarea {
    position: relative;
    display: block;
    min-height: 400px;
    padding: 20px;
}



article.lesson .ok {
    position: relative;
    border-color:var(--color-ok);
    background-image: url(../../../../files/img/lesson/common/ico-ok.svg);
    background-repeat: no-repeat;
    background-position: right 10px center;
}

article.lesson .error {
    position: relative;
    border-color:var(--color-error);
    background-image: url(../../../../files/img/lesson/common/ico-error.svg);
    background-repeat: no-repeat;
    background-position: right 10px center;
}

article.lesson .ok.check-set > .option.selected > h6:before {
    background-color: var(--color-ok)!important;
}

article.lesson .error.check-set > .option.selected > h6:before {
    background-color: var(--color-error)!important;
}

article.lesson .check-set.ok,
article.lesson .check-set.error {
    background-position: top 20px right 10px;
}

article.lesson .check-set.ok > .th,
article.lesson .check-set.error > .th {
    background-color: transparent!important;
}

.check-set {
    position: relative;
}

.check-set > .option {
    position: relative;
    cursor: pointer;
}

.check-set > .option.spaced {
    padding: 20px;
}

.check-set > .option > h6 {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.check-set > .option > h6:before {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 22px;
    height: 22px;
    
    border-radius: 100%;
    border: solid 1px var(--color-neutral);
    font-size: 14px;
    text-align: center;
    font-weight: bold;
    content:'';
    margin-right: 8px;
}

.check-set > .option[check="1"] > h6:before,
.check-set > .option.selected > h6:before,
.check-set > .option:hover > h6:before {
    background-color: var(--color-neutral);
}

.check-set > .option.ok > h6:before {
    background-color: var(--color-ok);
    border-color: var(--color-ok);
}

.check-set > .option.error > h6:before {
    background-color: var(--color-error);
    border-color: var(--color-error);
}

.check-set > .option.ok > h6,
.check-set > .option.error > h6 {
    font-weight: bold;
}

.check-set.horizontal > .row.option {
    position: relative;
    display: inline-block;
    cursor: pointer;
    width: auto;
    max-width: 33%;
}

.check-set.horizontal > .row.option.line {
    max-width: unset;
    display: block;
    padding: 8px 15px;
}

.check-set.horizontal > .row.option.line > h6 {
    font-size: 14px;
}

ul.compare {
    position: relative;
    display: block;
}

ul.compare > li {
    position: relative;
    display: block;
    padding: 2px 5px;
}

ul.compare > li > a {
    position: relative;
    display: block;
    padding: 5px;
    font-size: 16px;
    text-align: center;
    width: 100%;
    color:var(--color-neutral);
    background-color: var(--color-light);
    border-radius: 15px;
    min-width: 180px;
}

ul.compare > li:hover > a,
ul.compare > li.active > a {
    border:solid 2px #000
}

ul.compare > li.error > a {
    background-color: var(--color-error);
}

ul.compare > li.ok {
    pointer-events: none;
}

ul.compare > li.ok > a {
    background-color: var(--color-ok);
}

.corrector {
    position: relative;
    display: inline-block;
    text-align: right;
    padding: px ;
    font-size: 10px;
    color: #fff;
    /*width: 1px;
    height: 1px;
    margin-left: -80px;*/
    opacity: .8;
}

.corrector > span {
    position: relative;
    display: inline-block;
    padding: 3px;
    background-color: #fff;
    border: solid 2px #fff;
    border-radius: 5px;
    z-index: 1;
    font-size: 10px;
    text-align: left;
}

.corrector  > span > input {
    text-align: right;
    padding: 0px;
    display: inline-block;
    vertical-align: middle;
    width: auto;
    margin-right: 5px;
    margin-bottom: 5px;
    width: 15px;
    height: 15px;
}

.corrector  > span > label {
    display: inline-block;
    vertical-align: middle;
    font-size: inherit;
}


/*
figure cartoon
*/

article.lesson figure.cartoon > span {
    position: absolute;
    top: 20px;
    left: 20px;
    
    border-radius: 10px;

    color:#525659;
    font-size: 16px;
    text-align: left;

    -webkit-box-shadow: 1px 1px 6px 0px rgba(0,0,0,0.39);
    -moz-box-shadow: 1px 1px 6px 0px rgba(0,0,0,0.39);
    box-shadow: 1px 1px 6px 0px rgba(0,0,0,0.39);
}

article.lesson figure.cartoon > span.top:after {
	bottom: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(249, 249, 249, 0);
	border-bottom-color: #F9F9F9;
	border-width: 10px;
	margin-left: -10px;
}


article.lesson figure.cartoon > span.right:after {
	left: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(249, 249, 249, 0);
	border-left-color: #F9F9F9;
	border-width: 10px;
	margin-top: -10px;
}

article.lesson figure.cartoon > span.bottom:after {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(249, 249, 249, 0);
	border-top-color: #F9F9F9;
	border-width: 10px;
	margin-left: -10px;
}

article.lesson figure.cartoon > span.left:after {
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(249, 249, 249, 0);
	border-right-color: #F9F9F9;
	border-width: 10px;
	margin-top: -10px;
}

article.lesson figure.cartoon > span.left.up:after,
article.lesson figure.cartoon > span.right.up:after {
    top: 30px;
}

article.lesson figure.cartoon > span.left.down:after,
article.lesson figure.cartoon > span.right.down:after {
    top: 75%;
}

article.lesson figure.cartoon > span.top.up:after,
article.lesson figure.cartoon > span.bottom.up:after {
    left: 30px;
}

article.lesson figure.cartoon > span.top.down:after,
article.lesson figure.cartoon > span.bottom.down:after {
    left: 75%;
}

article.lesson figure.cartoon > span > div {
    position: relative;
    display: table;
    width: 100%;
    padding: 8px;
    
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    overflow: hidden;
    background-color: #F9F9F9;

    -o-transition:.5s;
	-ms-transition:.5s;
	-moz-transition:.5s;
	-webkit-transition:.5s;
	transition:.5s;
}

article.lesson figure.cartoon > span > div:nth-child(1) {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
   
}

article.lesson figure.cartoon > span > div:nth-child(4),
article.lesson figure.cartoon > span > div:nth-child(2) {
    padding-top: 30px;
    margin-top:-20px;
 
    background-color: #D8D8D8;
}

article.lesson figure.cartoon > span > div:nth-child(3) {
    padding-top: 30px;
    margin-top:-20px;
  
}

article.lesson figure.cartoon > span > div:nth-child(1) {
    z-index: 4;
}

article.lesson figure.cartoon > span > div:nth-child(2) {
    z-index: 3;
}

article.lesson figure.cartoon > span > div:nth-child(3) {
    z-index: 2;
}

article.lesson figure.cartoon > span > div:nth-child(4) {
    z-index: 1;
}

article.lesson figure.cartoon > span > div.active  {
    background-color: #E8E8E8;
}

article.lesson figure.cartoon > span > div.active > div > p {
    font-weight: bold;
    opacity: 1;
}

article.lesson figure.cartoon > span > div > div {
    position: relative;
    display: table-cell;
    vertical-align: middle;
}

article.lesson figure.cartoon > span > div > div > p {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    color:var(--color-neutral);
    max-width: calc(100% - 48px);
    padding: 7px;
    white-space: nowrap;
    margin-right: 6px;
    opacity: 1;

    -o-transition:.5s;
	-ms-transition:.5s;
	-moz-transition:.5s;
	-webkit-transition:.5s;
	transition:.5s;
}

article.lesson figure.cartoon > span > div > div:first-child {
    vertical-align: top;
  
    width: 40px;;
}

article.lesson figure.cartoon > span > div > div:last-child {
    display: table-cell;

    width: calc(100% - 40px);
    vertical-align: top;
}

article.lesson figure.cartoon > span > div > div > a.audio {
    position: relative;
    display: inline-block;
    vertical-align: bottom;
    height: 30px;
    width: 20px;
}

article.lesson figure.cartoon > span > div > div > a.audio:before {
    position: relative;
    display: inline-block;
    vertical-align: bottom;
    top: 50%;
    transform: translateY(-50%);
    left: 0px;
    width: 30px;
    height: 30px;
    background-color: var(--color-green);
    border-radius: 100%;
    content: '';
    background-image: url(../../../../files/img/lesson/common/ico-audio.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 70%;
}

a.audio {
    position: relative;
    display: inline-block;
    vertical-align: bottom;
    height: 30px;
    width: 20px;
}

a.audio.text-side {
    width:20px!important;
    height: 20px!important;
    margin-right: 5px;
}

a.audio.text-side:before {
    width:20px!important;
    height: 20px!important;
}

 a.audio:before {
    position: relative;
    display: inline-block;
    vertical-align: bottom;
    top: 50%;
    transform: translateY(-50%);
    left: 0px;
    width: 30px;
    height: 30px;
    background-color: var(--color-green);
    border-radius: 100%;
    content: '';
    background-image: url(../../../../files/img/lesson/common/ico-audio.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 70%;
}

article.lesson figure.cartoon > span > div > div > span {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 30px;
    height: 30px;
    background-color: var(--color-green);
    border-radius: 100%;
    color: var(--color-background);
    font-size:14px;
    text-align: center;
    vertical-align: middle;
    line-height: 30px;
    font-weight: bold;
}

/*
game selector
*/

a.game-selector {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    background-color: var(--color-blue);
    color:#fff;
    font-size: 14px;
    text-align: center;
    padding: 10px 30px;
    margin: 5px;
    border-radius: 20px;
    box-shadow: 0 4px 6px 0 rgba(0,0,0,.2);
}

ul.game-image-selector {
    position: relative;;
    display: block;
    padding: 20px 0px;
}

ul.game-image-selector > li {
    position: relative;;
    display: inline-block;
    width: 12%;
    vertical-align: middle;
    padding: 10px;
    opacity: .5;
    cursor: pointer;
}

ul.game-image-selector > li.active {
    opacity: 1;
}

ul.game-image-selector > li.ok {
    pointer-events: none;
    opacity: 1;
    background-image: none;
}

ul.game-image-selector > li.ok > span {
    border: solid 3px var(--color-green);
}

ul.game-image-selector > li.error {
    opacity: 1;
    background-image: none;
}

ul.game-image-selector > li.error > span {
    border: solid 3px var(--color-red);
}


ul.game-image-selector > li > span {
    position: relative;;
    display: block;
    border: solid 1px var(--color-blue);
    border-radius: 20px;
    overflow: hidden;
}

ul.game-image-selector > li > span > figure {
    position: relative;
    display: block;
    width: 100%;
}

ul.game-image-selector > li > span > figure > img {
    position: relative;
    display: block;
   max-width: 100%;
}

ul.game-image-selector > li > span > figcaption {
    position: relative;
    display: block;
   max-width: 100%;
   text-align: center;
   padding: 10px;
   font-size: 12px;
   text-transform: uppercase;
    color: #525659;
    border-top: solid 1px var(--color-blue);
}

/*
mozaic */


ul.mozaic {
    position: relative;;
    display: block;
    width: 100%;
}

ul.mozaic > li {
    position: relative;;
    display: inline-block;
    width: 20%;
    vertical-align: middle;
    padding: 10px;
    cursor: pointer;
    border: solid 1px #D8D8D8;
}

ul.mozaic.third > li {
    width: 33.3%;
}

ul.mozaic.sixer > li {
    width: 16.6%;
}


ul.mozaic.quarter > li {
    width: 25%;
}

ul.mozaic > li.doble {
    width: 40%;
}

ul.mozaic.seven > li {
    width:14.2%;
}


ul.mozaic.eight > li {
    width:12.5%;
}

ul.mozaic.eight > li.doble {
    width: 25%;
}

ul.mozaic.nine > li {
    width:11.1%;
}

ul.mozaic.nine > li.doble {
    width: 22%;
}


ul.mozaic > li.active {
    opacity: 1;
    border:solid 1px var(--color-green);
}

ul.mozaic > li > span {
    position: relative;;
    display: block;
  
 
    overflow: hidden;
}

ul.mozaic.make-me-breathe > li {
    padding: 40px;
}

ul.mozaic > li > span > figure {
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
}

ul.mozaic > li > span > figure > img {
    position: relative;
    display: block;
   max-width: 100%;
   margin: 0 auto;
   height: 70px;
}

ul.mozaic.medium > li > span > figure > img {
    height: 100px;
}

ul.mozaic > li > span > figcaption {
    position: relative;
    display: block;
   max-width: 100%;
   text-align: center;
   padding: 0px;
   font-size: 11px;
   text-transform: uppercase;
    color: #525659;
    min-height: 32px;
    letter-spacing: -1px;
    font-weight: bold;
}

/*
autofill
*/

.auto-fill-options {
    position: relative;
    display: block;
    margin-top: 0px!important;
    padding: 10px 40px 10px 40px;
    opacity: .5;
}

.auto-fill-options.no-space {
    padding: 0px;
}

.auto-fill-options.selecting {
    opacity: 1;
}

.auto-fill-options > ul {
    position: relative;
    display: block;
}

.auto-fill-options > ul > li  {
    position: relative;
    display: table-cell;
    padding: 2px;
}

.auto-fill-options.dragg {
    z-index: 4;
}

.auto-fill-options.dragg > ul {
    text-align: center;
    
}

.auto-fill-options.dragg > ul > li  {
    position: relative;
    display: inline-block;
    z-index: 4;
    vertical-align: middle;
}


.auto-fill-options > ul > li > span  {
    position: relative;
    display: block;
    font-weight: 300;
    font-size: 16px;
    font-weight: bold;
    font-weight: normal;
    background-color: #E4E4E4;
    color: #525659;
    padding: 6px 15px;
    border-radius: 15px;
    cursor: pointer;
}

.auto-fill-options > ul > li > span:hover  {
    background-color:#777C7F;
    color: #fff;
}

.auto-fill {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    height: 28px;
    width: 140px!important;
    border: dashed 1px #525659;
    background-color: #fff;;
    border-radius: 15px;
    cursor: pointer;
    font-size: 14px;
    text-align: center;

    font-weight: bold;
    vertical-align: middle;
    line-height: 28px;
}

.auto-fill.big {
    width: 200px!important;
}

.compact-auto-fill .auto-fill {
    width: 100px!important;
}

.extend-auto-fill .auto-fill {
    width: 240px!important;
}


.auto-fill.dropped {
    font-size: 12px;
}

.auto-fill.wrong {
    background-color: #ED1E4A;
    color: #fff;
    border: none;
}

.auto-fill.not-wrong {
    background-color: #07DCA2;
    color: #fff;
    border: none;
}

article.lesson .table .row.border.auto-fill-select {
    background-color: #D8D8D8;
}

/*
audio-listening
*/

article.lesson  div.audio-listening {
    position: relative;
    display: table;
    overflow: hidden;
    width: 100%;
}

article.lesson  div.audio-listening  .audio-player {
    align-items: normal!important;
    height: auto!important;
    width: 240px !important;
    min-width: 240px !important;
}

article.lesson  div.audio-listening .audio-player .media-name {
    color:var(--color-green);
    bottom: 30px;
    font-size: 24px;
    top: initial;
}

article.lesson  div.audio-listening  .audio-player img, 
article.lesson  div.audio-listening  .audio-player svg {
    width: 30px;
    height: 30px;
    padding: 20px;
}

article.lesson  div.audio-listening  .audio-player img, 
article.lesson  div.audio-listening  .audio-player svg path {
    fill: #fff;
}

article.lesson  div.audio-listening  .audio-player .controls .controls__slider {
    margin-bottom: -35px !important;
}

article.lesson  div.audio-listening > .head {
    position: relative;
    display: table;
    width: 100%;
    background-color: var(--color-background);
}

article.lesson  div.audio-listening > .head > div {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    text-align: left;
    border-right:solid 2px #E9E9E9;
    padding: 20px 20px;
}

article.lesson  div.audio-listening > .head > div:first-child {
    width: 220px;
}

article.lesson  div.audio-listening > .content {
    position: relative;
    display: table;
    table-layout: fixed;
    padding: 20px;
}

article.lesson  div.audio-listening > .content > div {
    position: relative;
    display: table-cell;
    vertical-align: top;
}

article.lesson  div.audio-listening > .content > div > ul {
    position: relative;
    display: table;
    margin: 10px;
    border-radius: 20px;
    overflow: hidden;
}

article.lesson  div.audio-listening > .content > div > ul > li   {
    position: relative;
    display: table;
    border-bottom:solid 2px var(--color-light);
    width: 100%;
    background-color: var(--color-background);
    transition:5s;
	-o-transition:.5s;
	-ms-transition:.5s;
	-moz-transition:.5s;
   -webkit-transition:.5s;
}

article.lesson  div.audio-listening > .content > div > ul > li.active   {
    background-color: var(--color-light);
}

article.lesson  div.audio-listening > .content > div > ul > li > figure  {
    position: relative;
    display: table;
    width: 100%;
}

article.lesson > div.audio-listening > .content > div > ul > li > figure > img {
    position: relative;
    display: table;
    max-width: 100%;
}

article.lesson  div.audio-listening > .content > div > ul > li > span {
    position: relative;
    display: table;
    font-size: 16px;
    color:var(--color-neutral);
    text-align: left;
    padding: 15px 20px;
}

article.lesson  div.audio-listening > .content > div > ul > li > span > span {
    position: relative;
    vertical-align: middle;
    display: table-cell;
}

article.lesson  div.audio-listening > .content > div > ul > li > span > span  > span {
    position: relative;
    vertical-align: middle;
    content:'1';
    font-size:20px;
    color:var(--color-background);
    background-color: var(--color-green);
    border-radius: 100%;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    text-align: center;
    padding: 5px;
    vertical-align: middle;
    line-height: 20px;
}

/* content audio */

article.lesson  .content-audio .green-audio-player {
    background-color: transparent!important;
    box-shadow: none!important;
    width: 600px!important;
    min-width: initial!important;
}

article.lesson  .content-audio .green-audio-player  .media-name {
    color:#525659;
    bottom: 0px;
    font-size: 16px;
    bottom: -5px;
    top: initial;
    transform: none!important;
}

article.lesson  .content-audio .green-audio-player  .controls .controls__slider {
    margin-bottom: -25px !important;
}

/* button audio */

article.lesson  .footer .audio-player {
    background-color: transparent!important;
    box-shadow: none!important;
    /*width: 200px!important;*/
    width: 200px;
    min-width: initial!important;
}

article.lesson  .footer .green-audio-player {
    background-color: transparent!important;
    box-shadow: none!important;
    width: 200px!important;
    min-width: initial!important;
    height: 53px!important;
}

article.lesson  .footer .green-audio-player  .media-name {
    color:#fff;
    bottom: 0px;
    font-size: 16px;
    bottom: -5px;
    top: initial;
    transform: none!important;
}

article.lesson  .footer .green-audio-player  .controls .controls__slider {
    margin-bottom: -25px !important;
}

article.lesson  .footer .green-audio-player img, 
article.lesson  .footer  .green-audio-player svg {
    background-color: #fff!important;
}

.tiny-field input {
    max-width: 80px!important;
}

.large-field  input {
    max-width: initial !important;
    width: 160px!important;
}

.center,
.center > * {
    text-align: center;
}

.height-space,
.height-space > * {
    margin: 5px 0px!important;
}

.drag-me {
    z-index: 5;
}

.pad-left {
    margin-left: 20px;
}

div.input-fake {
    position: relative;
    display: inline-block;
    height: 33px;
}

em {
    font-size: inherit;
    font-size: inherit;
    color: inherit;
    font-family: inherit;
    font-style: normal;
}

.square-input {
    background-image: url(../../../../files/img/lesson/common/square-box.png);
    width: 1170px;
    background-size: 50px;
    font-size: 25px;
    letter-spacing: 36.5px;
    border: none !important;
    box-shadow: none !important;
    font-family: 'Anonymous Pro', monospace !important;
    color: #333;
    line-height: 50px;
    height: 150px;
    padding: 0px 0px 0px 15px;
    display: block;
    overflow: hidden;
    word-spacing: 0px;
    white-space: normal;
    text-transform: uppercase;
}




.tiny-fields input {
    max-width: 120px!important;
}

textarea.some-height {
    min-height: 260px;
}

.center-align {
    text-align:center;
}

.left-align-text,
.left-align {
    text-align:left!important;
}


.left-align-text > figure ,
.left-align > figure {
    margin: 0;
}

.right-align {
    text-align:right;
}

.big-word-spacing {
    word-spacing: 40px;
}

label.spaced {
    padding: 5px 5px;
}

article.lesson .table .row.compress.fields > span {
    width: auto;
}

article.lesson .table .row.compress.fields.full > span {
    width: 100%;
}

.table.content-space {
    margin: 20px;
}

.highlight-box {
    background-color: #D5D5D5;
    width: 90%;
    border-radius: 20px;
    color:#fff;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    padding: 13px;
    min-width: 380px;
    margin: 10px 0px;
}

.img-comparator div.cap {
    text-align: center;
    
}

.img-comparator div.cap.xolo > span {
    width: 100%!important;
    padding: 15px !important;
}

.img-comparator div.cap.xolo > span > label {
    background-color: #D5D5D5;
    border-radius: 10px;
    width: auto;
    padding: 8px;
}

.empty-field {
    position: relative;
display: inline-block;
vertical-align: middle;
height: 28px;
width: 300px !important;
border: dashed 1px #525659;
background-color: #fff;
border-radius: 15px;
cursor: pointer;
font-size: 14px;
text-align: center;
font-weight: bold;
vertical-align: middle;
line-height: 28px;
color: #525659;
margin: 0px 10px;
}

.img-comparator div.cap > figure,
.img-comparator div.cap > span {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: auto;
    
}

.img-comparator div.cap > figure {
    width: 180px;
}


.img-comparator div.cap > figure > img {
    position: relative;
    display: block;
    max-height: 70px;
}

.img-comparator div.cap > figure > figcaption {
    position: relative;
    display: block;
    font-weight: 300;
    font-size: 14px;
    font-weight: bold;
    font-weight: normal;
    color: var(--color-neutral);
    text-align:center;
    margin: 0 auto;
}

.img-comparator.table > .col.compare > .row {
    height: 70px;
}

.img-comparator .table > .col > .row {
    cursor: pointer;
}

.img-comparator .table > .col.pick > .row > span > span {
    background-color: #07DCA2;
}

.img-comparator .table > .col.pick > .row.active > span > span,
.img-comparator .table > .col.pick > .row:hover > span > span {
    border: solid 4px #D5D5D5;
}

.img-comparator .table > .col.compare > .row:hover > span > span  {
    border: solid 4px #D5D5D5;
}

article.lesson ol.choice {
    position: relative;
    display: inline-block;
}

article.lesson ol.choice > li {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    padding: 3px 10px;
    border: solid 1px #525659;
    background-color: #E9E9E9;
    color:#525659;
    border-radius: 16px;
    cursor: pointer;
    font-size: 13px;
    text-align: center;
    font-weight: bold;
    vertical-align: middle;
    line-height: 28px;
    vertical-align: middle;
    margin: 2px;
}

article.lesson ol.choice > li.ok {
    border-color: #07DCA2;
    background-color: rgba(7,220,162,.20);
    background-image: none;
}

article.lesson ol.choice > li.error {
    border-color: #ED1E4A;
    background-color: rgba(237,30,74,.20);
    background-image: none;
}

.bold-text {
    font-weight: bold!important;
}

.text-spacer {
    padding: 0px 40px 0px 0px;
}

label.text-spacer  {
    color: var(--color-neutral);
    font-weight: bold;
    font-weight: 16px;
    line-height: 120%;
}

.table.expand-full > .col > .row > span {
    width: 100%!important;
}

.table.expand-full > .col > .row > span > input {
    display: table-cell;
    width: 95%;
}

.big-red {
    position: absolute;
    display: block;
    bottom: 0px;
    left: 0px;
    width: inherit;
    padding: 10px 60px;
    font-size: 16px;
    font-weight: bold;
    color:#ffffff;
    background-color: #ED1E4A;
}

article.lesson figure.cartoon > span > div.hh {
    background-color: #ED1E4A;
}

article.lesson figure.cartoon > span > div.hh > div > p {
    color:#fff!important;
    font-weight: bold;
}

.comment-box {
    background-color: #fff;
    position: relative;
    display: block;
    max-width: 600px;
    margin: 5px;
    padding: 5px;
    filter: drop-shadow(0px 0px 1px #000);
}

.comment-box.full {
    width: 100%!important;
    max-width: initial;
}

.comment-box .fields > span {
    padding: 0px;
}

.comment-box.left-bottom:after {
    content: '';
    position: absolute;
    display: block;
    width: 0;
    z-index: 1;
    border-style: solid;
    border-width: 0 0 20px 61px;
    border-color: transparent transparent #fff transparent;
    top: 49%;
    left: -61px;
    margin-top: -10px;
}

.comment-box.left-top:after {
    content: '';
    position: absolute;
    display: block;
    width: 0;
    z-index: 1;
    border-style: solid;
    border-width: 0 61px 20px 0;
    border-color: transparent #fff transparent transparent;
    top: 49%;
    left: -61px;
    margin-top: -10px;
}

.comment-box.right-top:after {
    content: '';
    position: absolute;
    display: block;
    width: 0;
    z-index: 1;
    border-style: solid;
    border-width: 20px 61px 0 0;
    border-color: #fff transparent transparent transparent;
    top: 49%;
    right: -61px;
    margin-top: -10px;
}

.comment-box.right-bottom:after {
    content: '';
    position: absolute;
    display: block;
    width: 0;
    z-index: 1;
    border-style: solid;
    border-width: 20px 0 0 61px;
    border-color: transparent transparent transparent #fff;
    top: 49%;
    right: -61px;
    margin-top: -10px;
}

.col.right-align > .comment-box {
    float: right;
}

.col.mozaic > .col {
    display: inline-block;
    width: 50%;
}

.col.mozaic div.cap > figure > img {
    max-height: initial!important;
}

.cap.active {
    opacity: .5;
}

.img-comparator .pick,
.img-comparator .compareme  {
    cursor: pointer;
}

.img-comparator .pick:hover,
.img-comparator .compareme:hover  {
    opacity: .6;
}

.th.doble-space {
    padding: 20px!important;
}

.doble-space {
    padding: 15px 20px!important;
}

.table.boxed {
    border-spacing: 20px;
    border-collapse: separate;
}


.table.full-fields .fields > span {
    width: 100%!important;
}

.table.full-fields .fields > span .input{
    width: 50%;
}


.full-text {
    position: relative;
    display: block;
    padding: 40px!important;
    min-height: 400px;
    vertical-align: middle;
}

.full-text text {
    padding: 20px 0px!important;
    font-size: 18px!important;
    line-height: 120%!important;
}

.big-text {
    position: relative;
    display: block;
    text-align: center;
    font-size: 38px;
    font-weight: bold;
    padding: 40px 0px;
    margin-top: 0px!important;
    margin-bottom: 0px!important;
}

.medium-text {
    position: relative;
    display: block;
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    padding: 20px 0px;
    margin-top: 0px!important;
    margin-bottom: 0px!important;
}

.big-text.comp {
    padding: 10px 0px;
}

.table.space-me > .col > figure > img,
.table.space-me > .col > figure,
.table.space-me > .col,
.table.space-me {
    width: 100%;
}

.top-align {
    vertical-align: top!important;
}

.box.small-padding {
    padding: 2px!important;
}

.box.small-padding > .row {
    padding: 2px!important;
}

.box.small-padding > .row > span {
    padding: 2px!important;
}

.color-text > span {
    background-color: transparent!important;

}

.color-text.green-color > span {
    color:var(--color-green)!important;
}

.color-text.red-color > span {
    color:var(--color-red)!important;
}

.color-text > input {
    font-size: 12px !important;
    padding: 2px !important;
    width: 80px;
}

ul.notes-one {
    position: relative;
}

ul.notes-one > li:first-child {
    width: 33.3%;
}

ul.notes-one > li {
    position: relative;
    display: inline-block;
    width: 16.6% ;
    text-align: center;
    padding: 5px 0px;
}

ul.notes-one > li:nth-child(6) {
    margin-left: 33.3%;
}

ul.notes-one .notes {
    position: absolute;
    width: 250px;
    display: table;
    margin: 0 auto;
    padding: 10px;
    background-color: #F9F9F9;
    border-radius: 10px;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);

    -webkit-box-shadow: 1px 1px 6px 0px rgba(0,0,0,0.39);
-moz-box-shadow: 1px 1px 6px 0px rgba(0,0,0,0.39);
box-shadow: 1px 1px 6px 0px rgba(0,0,0,0.39);
}

ul.notes-one .notes h2 {
    position: relative;
    display: block;
    padding: 5px 0px;
    font-size: 14px;
    text-transform: uppercase;
    color:var(--color-green);
    font-weight: bold;
    text-align: left;
}

ul.notes-one .notes text {
    font-size: 14px;
    display: block;
    text-align: left;
    padding: 5px 0px;
    color:#333
}

ul.notes-one .ordering {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 30px;
    height: 30px;
    border: solid 1px #333;
    background-color: #fff;
    z-index: 1;
    border-radius: 100%;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    color: #fff;
    cursor: pointer;
    line-height: 30px;
}

ul.notes-one .ordering.ok {
    background-color: #22DB7F;
    border-color: #22DB7F;;
}

ul.notes-one .ordering.error {
    background-color: #CA0912; 
    border-color: #CA0912;
}

.box-box {
    position: relative;
    display: block;
    padding: 0px 20px 30px 20px;
    border: none;
}

.box-box > textarea {
    position: relative;
    display: block;
    height: 160px;
    background-color: #F9F9F9!important;
    margin: 0 auto;
    padding: 10px;
    border: none;
    margin-top: 10px;
}

.inbox {
    position: relative;
    vertical-align: top!important;
}

.inbox > div {
    position: relative;
    display: block;
    padding: 40px;
}

.inbox > div > text {
    position: relative;
    display: block;
    font-size: 18px;
    padding: 5px 0px;
    font-weight: normal;
}

.inbox > div > text.small {
    font-size: 14px!important;
}

.inbox > div > text.hh {
    position: relative;
    display: block;
    font-size: 18px;
    padding: 16px 0px;
    font-weight: bold;
    border-bottom: solid 2px #000;
    margin-bottom: 10px;
}

.inbox > div > text > span {
    font-weight: bold;
    font-size: inherit;
    display: inline;
    color:var(--color-green);
}

.inbox > div > fieldset {
    position: relative;
    display: block;
    border: none;
}

.inbox > div fieldset.hh {
    border-bottom: solid 2px #000;
}

.inbox > div  fieldset > label {
    position: relative;
    display: block;
    width: auto;
    padding: 0px 0px;
    font-size: 18px;
    font-weight: bold;
    color: var(--color-neutral);
    text-transform: uppercase;

    display: inline-block;
    vertical-align: middle;
    padding: 5px 0px;
}

.inbox > div  fieldset > textarea,
.inbox > div fieldset > input {
    position: relative;
    display: block;
    
    background-color: #F9F9F9!important;
    margin: 0 auto;
    padding: 10px;
    border: none;
    display: inline-block;
    vertical-align: middle;

    box-shadow: none;
    border: solid 1px #c4c4c4;
}

.inbox > div > fieldset > textarea {
    height: 100px;
}

.big-f-text {
    position: relative;
    display: block;
    font-size: 20px!important;
    font-weight: bold!important;
    text-align:center!important;
}

.true-false {
    position: relative;
    display: block;
    text-align: center;
    margin:0 auto;
    background-color: #fff;
    border: solid 1px #d3d3d3;
    width: 40px!important;
    height: 40px;;
    border-radius: 100%;

}

.true-false.ok {
    background-color: var(--color-green);
}


.true-false.error {
    background-color: var(--color-red);
}

.bigger {
    width: 800px!important;
}

article.lesson .table .col.then .row.compress.fields > span > input {
    width: 80px!important;
}

.fix-size {
    height: 80px;
    padding-top: 20px;
}

.auto-fill.small {
    width: 50px!important;
}

textarea.absolute {
    position: absolute;
    top: 200px;
    left: 30px;
    z-index: 2;
    width: 92%;
    height: 312px;
    background-color: #F9F9F9 !important;
    margin: 0 auto;
    padding: 10px;
    border: none;
    display: inline-block;
    vertical-align: middle;
    box-shadow: none;
    border: solid 1px #c4c4c4;
}

.input.big-input {
    width: 600px!important;
}

.big-bi .auto-fill {
    width: 120px!important;
    height: 80px!important;
    line-height: 120%;
    vertical-align: middle;
    padding: 10px 5px;
}

.big-bi .fields > span > span {
    display: block;
    margin-bottom: 5px;
}

.square .auto-fill {
    width: 30px!important;
}

.square .auto-fill-options.dragg > ul > li {
    width: 50%;
    text-align: center;
    padding: 10px 0px;
}

.square .auto-fill-options.dragg > ul > li > span {
    width: auto;
    display: table;
    text-align: center;
    margin-bottom: 0 auto;
    font-size: 40px;
    font-weight: bold;
    margin:0 auto;

    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 100%;
    padding: 0px;
}

.square figure {
    width: 120px!important;
}

.thb {
   background-color: #D5D5D5; 
   font-size: 20px;
   padding-top: 10px;
   padding-bottom: 10px;
}

.strongg input {
    width: 40px!important;
}

.strongg label {
    font-weight: bold!important;
}

.enormous fieldset textarea {
    height: 400px!important;
}

.enormous-width fieldset textarea {
    width: 900px !important;
}

.big-width  textarea {
    width: 600px !important;
}

span.dotter {
    position: absolute;
    top: 0px;
    right:0px;
    width: 30px;
    height: 30px;
    background-color: var(--color-red);
    border-radius: 100%;
    color: #fff;
    text-align: center;
    line-height: 30px;
    font-size: 20px;
    font-weight: bold;
}

span.dotter.green {
    background-color: var(--color-green);
}

span.dotter.blue {
    background-color: var(--color-blue);
}


.auto-fill-options > ul.small-font > li > span {
    font-size: 13px!important;
}

.center-align {
    text-align: center!important;
    margin: 0 auto!important;
}

.all-to-left {
    text-align: left!important;
}

.all-to-left * {
    margin-left: 0px!important;
}

.make-left-align {
    text-align: left!important;
    padding-left: 10px;
    line-height: 120%;
    padding: 0px 0px 10px 10px;
    vertical-align: middle;
}

.spaced-top {
    padding: 10px 0px!important;
}

textarea.large {
    position: relative!important;
    display: block!important;
    width: 100%!important;
    margin: 5px 0px!important;
    height: 40px;
}




.inline-show {
    position: relative;
    display: inline-block;
    margin: 0px 5px;
    vertical-align: middle;
}

.inline-show.top {
    vertical-align: top;
}

textarea.inline-show,
input.inline-show {
  
}

.nocase {
    text-transform: none!important;
}

.col.ro {
    padding-right: 10px;
}

.aron-bg {
    position: relative;
    background-image: url(../../../../files/img/lesson/content/book4/unit45s/aro.png);
    background-position: center;
    background-size: 80%;
    background-repeat: no-repeat;
}

.gor {
    color:black;
    font-weight: bold;
    text-align: right;
    width: 120px;
}

.whole-lota-of-word {
    position: relative;
}

.whole-lota-of-word span.worder {
    font-size: inherit;
    color: inherit;
    display: initial;
    font-weight: inherit;
    cursor: pointer;
}

.whole-lota-of-word span.worder:hover {
    text-decoration: underline;
}

.whole-lota-of-word span.worder.is_error {
    color:var(--color-red)!important;
    font-weight: bold!important;
}

.whole-lota-of-word span.worder.is_ok {
    color:var(--color-green)!important;
    font-weight: bold!important;
}