.media {
  &.component {
    // min-height: 90vh;    
    display: flex;
    display:-ms-flexbox;
    align-items: center;
    // background-color: #f2f2f2;
  }

  &__inner {
    width: 100%;
    height: 100%;  
  }
  // --------------------------------------------------
  // Transcript
  // --------------------------------------------------
  &__transcript-body-inline {
    display: none;
  }

  // --------------------------------------------------
  // Cross browser bug fixes
  // --------------------------------------------------
  .me-plugin {
    position: relative;
    width: 100%;
    height: 100% !important;

    object {
      width: 100% !important;
      height: 100% !important;
    }

    embed {
      width: 100% !important;
      height: 100% !important;
    }
  }
  // --------------------------------------------------

  // --------------------------------------------------
  // Vimeo fixes
  // --------------------------------------------------
  &__widget.video-vimeo {
    .mejs-controls {
      display: none !important;
      height: 0 !important;
    }

    .mejs-overlay-play {
      display: none !important;
    }
  }
  // --------------------------------------------------

  .external-source {
    .mejs-container {
      position: relative;
      overflow: hidden;
    }

    .mejs-container iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .mejs-overlay-button {
      display: none;
    }
  }

  // --------------------------------------------------
  // Overrides for mep.less
  // --------------------------------------------------
  .mejs-container {
    // The width set by mejs is always 100% of container, set in pixels.
    // Having a fixed pixel size prevents iOS from changing orientation without scaling.
    // width: 100% !important;
    background-color: transparent;
    max-width: 100%;
    //max-height: calc(98vh - 20px);
  }

  .mejs-container .mejs-controls .mejs-time {
    padding-right: 0;
    padding-left: 0;
  }

  .mejs-overlay {
    // Bug Fix for touch devices to override standard hover event in mep.less L119
    &:hover {
      .mejs-overlay-button {
        background-position: center;
      }
    }

    .no-touch &:hover {
      .mejs-overlay-button {
        // background-position: 0 -100px;
      }
    }
  }

  .mejs-overlay-button {
    background-image: url(course/en/images/icon/play_icon1.png);
    background-repeat: no-repeat;
    background-color: transparent;
    border-radius: 4px;
    background-size: contain;
    background-position: center !important;
  }

  .no-svg .mejs-overlay-button {
    background-image: url(course/en/images/icon/play_icon1.png);
  }

  .mejs-overlay-loading,
  .mejs-container .mejs-controls,
  .mejs-controls .mejs-volume-button .mejs-volume-slider,
  .mejs-controls .mejs-captions-button .mejs-captions-selector,
  .mejs-captions-text,
  .mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector,
  .mejs-postroll-layer,
  .mejs-postroll-close,
  .mejs-controls .mejs-speed-button .mejs-speed-selector {
    background-image: url(assets/background.png);
  }

  .mejs-overlay-loading span {
    background-image: url(assets/loading.gif);
  }

  .mejs-controls .mejs-button {
    &.mejs-jump-forward-button {
      background-image: url(assets/jumpforward.png);
    }

    &.mejs-skip-back-button {
      background-image: url(assets/skipback.png);
    }

    button {
      background-image: url(assets/controls.svg);
    }
  }

  .no-svg .mejs-controls .mejs-button button {
    background-image: url(assets/controls.png);
  }

  .mejs-container-fullscreen .mejs-mediaelement,
  .mejs-container-fullscreen video {
    width: 100% !important;
    height: 100% !important;
    background-color: black;
  }
  // --------------------------------------------------

  // --------------------------------------------------
  // Bug fix for missing control icons on iOS touch devices
  // required for Safari/Chrome iOS 11. Ref: https://caniuse.com/#feat=css-clip-path
  // --------------------------------------------------
  .mejs-offscreen {
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  }
  // --------------------------------------------------

  // --------------------------------------------------
  // Bug fix for CC button language selector still appearing when
  // toggleCaptionsButtonWhenOnlyOne: true
  // See https://github.com/adaptlearning/adapt_framework/issues/1883
  // --------------------------------------------------
  &.toggle-captions .mejs-captions-selector {
    display: none !important;
  }
  // --------------------------------------------------

  .media__transcript-container {
    /*padding: 2rem 2.5rem 5rem; */
    overflow: auto;
    margin: 1px 0 0 0;
  }

  .video-row-container {
    // min-height: 100vh;   
    @media screen and (max-width:850px) {
      flex-direction: column;
      justify-content: center;
  
    }
    .video-col {
      transition: all ease-in-out 300ms;
      background-color: #f1f1f1;
      .mejs-container {
        // height: 95vh !important;        
        transition: all ease-in-out 200ms;
      }
    }
    .trans-col{
      transition: all ease-in-out 300ms;
    }
    &.transcript-hidden {
      .video-col {
        width: 750px;
        // margin: 10px auto 0 auto;
        margin: 0px auto 0 auto;
        min-height:auto;
        background: transparent;
        border-radius: 10px;
        padding: 15px;
        position: relative;
      }
      .trans-col {
        width: 100%;
        background-color: #D9D9D9;
        @media screen and (max-width:850px) {
          width: 100vw;
        }
      }
    }

    &.transcript-show {
      .video-col {
        width: 750px;
        margin: 0px auto 0 auto;        
        background: transparent;
        border-radius: 10px;
        padding: 15px;
        position: relative;
        @media screen and (max-width:850px) {
          width: 100vw;
        }
      }
      .trans-col {
        width: 100%;
        @media screen and (max-width:850px) {
          width: 100vw;
        }
        button.media__transcript-btn {
         
      padding: 8px 10px;

      
      line-height: 1;
      border-radius: 0;
      width: 100%;
      min-width: 140px;
      transition: all ease-in-out 250ms;
      left: 0;
      margin: auto;
          .icon:before {
            content: "\e651";
          }
          
        }
      }
    }

    button.media__transcript-btn {
     
      padding: 8px 10px;
      line-height: 1;
      border-radius: 0;
      width: 100%;
      min-width: 140px;
      transition: all ease-in-out 250ms;
      left: 0;
      margin: auto;
      .icon:before {
        display: inline;
        vertical-align: middle;
        font-size: 1em;
      }
      @media screen and (max-width:850px) {
        position: static;
        .icon{
          display: none;
        }
      }

      &:hover {
        right: 0;
      }
    }

    button.media__transcript-btn:hover{
      opacity: 0.8;
    }

 
    .media__transcript-body-inline {
      margin-top: 0;
      padding: 0.5rem 1rem 10px;
      color: #000;
      height: auto;    
      // overflow-y: auto;
      // font-size: 1.5rem;
      background-color: #fff;
      @media screen and (max-width:850px) {
       padding: 1rem 1rem 1rem;
      }
      .media__transcript-body-inline-inner{
        p{
          margin-top: 0.5rem;
          margin-bottom: 0.5rem;
          font-size: 1.2rem;
          @media screen and (max-width:896px) {
            font-size: 1rem;
          }
        }
        ul{
          font-size: 1.2rem;
        }
      }
    }
  }
}

@media only screen and (min-device-width : 1024px) and (max-device-width : 1366px) and (orientation : portrait){
  .mr_media_wrapper .mediaPageWrapper .textHeading{
    width: 100%;
  }
  .media {
    &.component {
      // min-height: 90vh;    
      display: flex;
      display:-ms-flexbox;
      align-items: center;
      // background-color: #f2f2f2;
    }
  
   
  
    // --------------------------------------------------
    &.toggle-captions .mejs-captions-selector {
      display: none !important;
    }
    // --------------------------------------------------
  
    .media__transcript-container {
      /*padding: 2rem 2.5rem 5rem; */
      overflow: auto;
      margin: 1px 0 0 0;
    }
  
    .video-row-container {
      // min-height: 100vh;   
    
      .video-col {
        transition: all ease-in-out 300ms;
        background-color: #f1f1f1;
        .mejs-container {
          // height: 95vh !important;        
          transition: all ease-in-out 200ms;
        }
      }
      .trans-col{
        transition: all ease-in-out 300ms;
      }
      &.transcript-hidden {
        .video-col {
          width: 750px;
          margin: 10px auto 0 auto;
          min-height:auto;
          background: #FEF0E2;
          border-radius: 10px;
          padding: 15px;
          position: relative;
        }
        .trans-col {
          width: 100%;
          background-color: #D9D9D9;
         
        }
      }
  
      &.transcript-show {
        .video-col {
          width: 750px;
          margin: 20px auto 0 auto;        
          background: #FEF0E2;
          border-radius: 10px;
          padding: 15px;
          position: relative;
        
        }
        .trans-col {
          width: 100%;
         
          button.media__transcript-btn {
           
        padding: 8px 10px;
        line-height: 1;
        border-radius: 0;
        width: 100%;
        min-width: 140px;
        transition: all ease-in-out 250ms;
        left: 0;
        margin: auto;
            .icon:before {
              content: "\e651";
            }
            
          }
        }
      }
  
      button.media__transcript-btn {
       
        padding: 8px 10px;
        line-height: 1;
        border-radius: 0;
        width: 100%;
        min-width: 140px;
        transition: all ease-in-out 250ms;
        left: 0;
        margin: auto;
        .icon:before {
          display: inline;
          vertical-align: middle;
          font-size: 1em;
        }
     
  
        &:hover {
          right: 0;
        }
      }
  
      .media__transcript-body-inline {
        margin-top: 0;
        padding: 0.5rem 1rem 0;
        color: #000;
        height: auto;
        // min-height: 100px;
        // overflow-y: auto;
        // font-size: 1.5rem;
        // background-color: #D9D9D9;
      
        .media__transcript-body-inline-inner{
          p{
            margin-top: 0.5rem;
            margin-bottom: 0.5rem;
          }
        }
      }
    }
  }
}
