/* this has to divide into two parts: lesson dir styles and styles for each lesson  */
 ul {
   list-style-type: none;
   padding: 0px;
   margin: 0px;
 }

 li {
   word-wrap: break-word;
 }

 a {
   text-decoration: none;
   word-wrap: break-word;
 }

 .myTit {
   text-align: center;
 }

 input {
   margin: 12px;
 }

 .left-img {
   float: left;
 }

 .right-img {
   float: right;
 }

 .lesson-box {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
   padding-top: 100px;
   padding-bottom: 36px;
   width: 95%;
   margin-left: auto;
   margin-right: auto;
 }

 .flex-item {
   display: block;
   /* because <a> is used for whole item clickable*/
   width: 100%;
   box-sizing: border-box;
   margin: 0px;
   margin-bottom: 16px;
   margin-top: 16px;
   padding: 16px;
   cursor: pointer;
   /* border: 3px solid;*/
 }

 .thumb-back {
   display: block;
   width: 100%;
   height: 150px;
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   /*expect for the margins, everything includes part of the sizing*/
   background-color: black;
 }

 .flex-thumb {
   position: relative;
   background-position: center;
   background-repeat: no-repeat;
   left: 50%;
   transform: translate(-50%, 0);
   -ms-transform: translate(-50%, 0);
   cursor: pointer;
 }

 .flex-item:hover,
 .flex-thumb:hover {
   box-shadow: 0 0 2px 2px rgba(0, 140, 186, 0.5);
 }

 .flex-thumb:hover>.thumb-play {
   -webkit-filter: drop-shadow(2px 2px 2px #000);
   filter: drop-shadow(2px 2px 2px #000);
 }

 .thumb-play {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
   width: 64px;
   height: 64px;
 }

 .flex-desc {
   /* border: 2px solid red;*/
   width: 100%;
   margin: 0;
   padding: 16px;
   box-sizing: border-box;
 }

 #interactionEl {
   max-width: 900px;
   margin: 24px auto;
   height: 100%;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
 }

 @media only screen and (min-width: 630px) {
   .flex-item {
     width: 46%;
     margin-right: 2%;

   }

   .flex-desc {
     width: 100%;
   }
 }

 @media only screen and (min-width: 993px) {
   /* .lesson-box{
    margin-left: 169px;
  } */
 }

 @media only screen and (min-width: 1360px) {
   .lesson-box {
     max-width: 1400px;
     /* margin-left: 169px; */
     /* margin: auto;  */
     /* margin-top: 100px; */
   }

   .flex-item {
     width: 46%;
     margin-right: 2%;
   }

   .thumb-back {
     display: inline-block;
     vertical-align: middle;
     width: 50%;
   }

   .flex-thumb {
     max-width: 268px;
   }

   .flex-desc {
     display: inline-block;
     vertical-align: middle;
     width: 50%;
   }

 }

 .desc-item-icon {
   display: inline-block;
   width: 24px;
   height: auto;
   overflow: auto;
   margin-right: 2px;

 }

 #overlay,
 #consent {
   position: fixed;
   display: none;
   top: 0px;
   left: 0px;
   right: 0px;
   bottom: 0px;
   z-index: 5;
   background-color: rgba(0, 0, 0, 0.8);
 }

 #consContent {
   max-width: 800px;
   width: 100%;
   position: absolute;
   top: 0;
   left: 50%;
   transform: translate(-50%, 0);
   -ms-transform: translate(-50%, 0);
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 16px;
   padding: 16px;
   background-color: coral;
   -webkit-overflow-scrolling: touch;
   z-index: 6;
 }

 .consent-btns {
   display: inline-block !important;

 }

 #my-player {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
   z-index: 5;
 }

 #my-article {
   /* position: absolute; */
   position: relative;
   width: 80%;
   max-width: 1100px;
   height: 100%;
   top: 0;
   margin-top: 16px;
   margin-bottom: 32px;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   left: 50%;
   transform: translate(-50%, 0);
   -ms-transform: translate(-50%, 0);
   /* z-index: 5; */
 }

 .button {
   padding: 1px 12px;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   font-size: 24px;
   margin: 4px 2px;
   border-radius: 10px;
   -webkit-transition-duration: 0.4s;
   /* Safari */
   transition-duration: 0.4s;
   cursor: pointer;
 }

 #video-cross-button {
   position: absolute;
   top: 0;
   left: 12px;
   background-color: rgba(255, 255, 255, 0.8);
   color: black;
   border: 2px solid #f44336;
   z-index: 6;
 }

 #video-cross-button:hover {
   background-color: #f44336;
   color: white;
 }

 div>.vjs-text-track-display>div {
   font-size: initial;
 }

 div>.vjs-text-track-display>div>div {
   background-color: rgba(0, 0, 0, 0.5);
   width: fit-content !important;
   width: intrinsic !important;
   /* Safari/WebKit uses a non-standard name */
   width: -moz-max-content !important;
   /* Firefox/Gecko */
   width: -webkit-max-content !important;
   height: auto !important;
   max-width: 98% !important;
   left: 0 !important;
   right: 0 !important;
   margin-left: auto !important;
   margin-right: auto !important;
   margin-top: -5px;
   /* fix subtitle height cutout on mozilla */
   padding: 5px 5px;
   --text-size: 1.3em;
   /* No need for change of the following three lines. */
   font-family: var(--bo-family) !important;
   line-height: var(--bo-lHeight) !important;
   font-size: calc(var(--bo-factor, 1) *var(--text-size, 1em)) !important;

 }

 div>.vjs-text-track-display>div>div>div {
   background-color: rgba(0, 0, 0, 0) !important;
 }

 /*show video styles*/
 .slide {
   position: relative;
   width: 85%;
   left: 50%;
   transform: translate(-50%, 0);
   -ms-transform: translate(-50%, 0);
   z-index: 1;
   /*opacity: 0;*/
   display: none;
   transition: opacity 0.5s;
 }

 @media only screen and (max-width: 620px) {
   .slide {
     width: 100%;
   }

   #interactionEl {
     width: 100%;
   }

   #my-article {
     width: 100%;
   }
 }

 .active-slide {
   /*opacity: 1;*/
   display: block;
   z-index: 2;
 }

 .quiz-header {
   padding: 16px;
   padding-left: 32px;
   font-size: 1.3em;
 }

 .qh-item {
   padding: 0 16px 0 16px;
   align-self: center;
 }

 .qh-item-right {
   margin-left: auto;
 }

 .answer {
   position: relative;
   padding-left: 8px;

   width: fit-content;
   width: -moz-fit-content;

 }

 .marked {
   position: absolute;
   top: 0;
   left: 0;
 }

 .task {
   margin: 4px;
   padding: 16px;
   font-size: 1.3em;
 }

 .codeArea {
   border: 2px solid green;
 }

 .demoArea {
   border: 2px solid blue;
   margin-right: 16px;
   margin-bottom: 16px;
 }

 .codeDemo {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   align-items: center;
   margin: 0;
 }

 .cd-item {
   box-sizing: border-box;
   width: 100%;
   max-width: 540px;
   min-width: 312px;
 }

 .result-item {
   position: relative;
   padding-left: 26px;
   padding-top: 8px;
   margin: 8px;
 }

 .marks {
   position: absolute;
   top: 0;
   left: 0;
   width: 24px;
 }

 .result {
   border: 2px coral solid;
   padding: 12px;
   margin: 4px;
 }

 .language-css {
   font-size: 1.2em;
 }

 #os0r6 {
   background: url('../imgs/thumbs/os0r5.jpg') -1px -1px;
   width: 268px;
   height: 151px;
 }

 .artLink:link {
   background-color: yellow;
 }

 .artLink:visited {
   background-color: cyan;
 }

 .artLink:hover {
   background-color: lightgreen;
 }

 .artLink:active {
   background-color: hotpink;
 }