/*================*/
/*== FlowPlayer ==*/
/*================*/
/*#region Flowplayer*/
@media (max-width: 1270px) {
    .Chapter.container {
        width: inherit !important;
        margin-left:15px;
        margin-right:15px;
    }
}

.flowplayer {
      height: 470px;
      width: 100% !important;
      background-color: none !important;
      background-image:none !important;
      direction: ltr !important;
      display:block;
      border-radius:0!important;
}


.flowplayer .fp-player{background-image:none !important; background-color:white !important; height:470px;}
.flowplayer.is-fullscreen .fp-player{height:auto;}

.smartphone .flowplayer, .free-videos-page .flowplayer{height:auto!important;}
.smartphone .fp-player, .free-videos-page .fp-player{height:auto!important;}

.flowplayer .iosMask{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}


.flowplayer.is-playing, .flowplayer.is-playing .fp-player {background-color: transparent!important; background-image:none!important;}
.flowplayer.is-splash, .flowplayer.fp-message, .flowplayer .fp-header {background-color: transparent!important; background-image:none!important;}
.flowplayer.is-paused .fp-ui, .flowplayer.is-mouseover .fp-ui, .flowplayer.fp-ui-shown .fp-ui {}



.flowplayer .fp-header{display:none;}

.fp-fullscreen {
    top: initial !important;
    bottom: 0 !important;
    z-index: 998 !important;
    background: none !important;
}
/*#endregion Flowplayer*/

/*============*/
/* Video list */
/*============*/
/*#region Video list*/
#player-frame{overflow-x:hidden;}

#videos-frame .panel-body,
#videos-frame.col-lg-3 .panel-body{ height:542px;overflow-y:auto;}
#videos-frame .panel-body .topics-list{height:100%!important; width:100%;}
.panel-body{overflow-y:hidden!important; padding:10px 5px;}
.panel-body .topics-list{overflow-y:auto;}
.panel-body .videos-list li {
    padding: 0 10px;
    color: #898989;
    cursor: pointer;
}
    .panel-body .videos-list > li.active {
        color: #c93737;
    }
    .col-md-12 .videos-list > li {
        float: right;
        width: 33%;
    }
    .videos-list li i.fa{margin-left:5px;}

.free-videos-page .panel-body{height:auto!important; max-height:542px;}
.free-videos-page .panel-footer .liScreenSize{display:none;}

.col-md-4 > .panel > .panel-body > ul {
    overflow-x: hidden;
    overflow-y: auto;
}
/*#endregion Video list*/

/*========================*/
/*== Next video ==*/
/*========================*/
/*#region Next video*/
.flowplayer .endscreen {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 80%;
  height: 60%;
  
  background-color: #aaa;
  border:solid 1px #777;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  
  text-align: center;
  font-size: 14px;

  /* do not show endscreen by default - a simpler, non-animated alternative would be: display: none; */
  opacity: 0;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  -webkit-transition: opacity .5s;
  -moz-transition: opacity .5s;
  transition: opacity .5s;
}
    .flowplayer .endscreen h3 {
      font-size: 160%;
      font-weight: bold;
      color: #000;
      margin-top: 10%;
    }
    .flowplayer .endscreen h4 {
      font-size: 120%;
      font-weight:bold;
      color: #333;
    }

.flowplayer.is-finished .endscreen {
  /* the player UI has z-index: 11, overlay it */
  z-index: 12;
 
  /* show endscreen - a simpler alternative would be:  display: block; */
  opacity: 1;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
}

.flowplayer .endscreen #next-video {
    background-color: #00a6bc;
    padding: 20px 30px;
    margin: 15px 0;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    border-radius: 60px;
    font-size: 110%;
    color: #eee;
    cursor: pointer;
    display: inline-block;
    -webkit-transition: background-color .1s;
    -moz-transition: background-color .1s;
    transition: background-color .1s;
}
.flowplayer .endscreen #next-video:hover {background-color: #00afc6;}
.flowplayer .endscreen #next-video:active {background-color: #009db2;}
.flowplayer .endscreen #next-video:focus{outline-width: 0;}

    
.flowplayer.fp-full .endscreen h3{font-size:140%; margin-top:4%;}
.flowplayer.fp-full .endscreen h4{margin-bottom:5px;}
.flowplayer.fp-full .endscreen #next-video{padding:10px 30px; margin:5px 0;}

#player-frame #next-ctrl .text-info{cursor:pointer;}

/*== bottom link ==*/
#player-frame .next-view{
    position:relative!important;
    top:initial!important;
    left:initial!important;
    right:initial!important;
    height:auto!important;
    
}
    #player-frame .next-view .text-center{
        padding-top:0!important;
    }
    #player-frame .next-view .text-info{
        background-image:none!important;
        background-color:initial!important;
        height:auto!important;
        width:auto!important;
        font:inherit!important;
        color:#31708f;
        text-decoration:underline;
    }


/*#endregion Next video*/
     
/*==========================*/
/*== Flowplayer Controls  ==*/
/*==========================*/
/*#region Controls*/

.flowplayer .fp-timeline:hover{cursor:pointer!important;}

.panel-footer small{margin:auto 5px;}
.panel-footer .popover.top {
    max-width: 100%; /* Max Width of the popover (depending on the container!) */
}
.panel-footer .popover.top kbd{
    background-color:#ffffbe;
    color:black;
    text-decoration:none;
    border:none;
    box-shadow:none;
}

.panel-footer .popover .popover-title{
    color:#333;
}

.smartphone .panel-footer{padding:5px 15px;}
.ios .panel-footer{display:block;}
.ios .panel-footer .liScreenSize .playerToggleFullWidth{display:none;}


    .smartphone .panel-footer ul.list-inline{
        margin-bottom:0;
        padding-bottom:0;
    }
        .smartphone .panel-footer ul.list-inline li.full{
            display: block;
            margin-top: 5px;
            margin-bottom: 5px;
            width:100%;
        }
            .smartphone .panel-footer ul.list-inline li select{
                width:auto;
                clear:none;
                display:inline;
                margin-right:10px;
                margin-bottom:0;
            }
.smartphone .smartphone-hide{display:none!important;}

/*#endregion Controls*/
    
/*=========================*/
/*== Add to cart buttons ==*/
/*=========================*/
/*#region Add to cart*/
.add-to-cart .first{text-align:left;}
.add-to-cart .btn-group{width: 250px; margin-bottom: 10px;}
.add-to-cart .btn-group button{width:100%;}
@media (max-width:768px) {
    .add-to-cart .btn-group {
        width: 100% !important;
        text-align: center !important;
    }
}
/*#endregion Add to cart*/

/*==========================================================*/
/*== About us popup screen when right click on the player ==*/
/*==========================================================*/
/*#region Context menu*/
.flowplayer * {
    font-weight: inherit;
    font-family: inherit;
    font-style: inherit;
    text-decoration: inherit;
    font-size: 100%;
    padding: 0;
    border: 0;
    margin: 0;
    list-style-type: none;
}

.flowplayer .fp-context-menu {
    position: absolute;
    display: none;
    z-index: 1001;
    background-color: #fff;
    padding: 10px;
    border: 1px solid #aaa;
    -webkit-box-shadow: 0 0 4px #888;
    -moz-box-shadow: 0 0 4px #888;
    box-shadow: 0 0 4px #888;
    width: 170px;
}
    flowplayer .fp-context-menu.fp-active {
        display: block;
    }

    .flowplayer .fp-context-menu li {
        text-align: center !important;
        padding: 10px;
        color: #444 !important;
        font-size: 11px !important;
        margin: 0 -10px 0 -10px;
    }
        .flowplayer .fp-context-menu li:hover {
            background-color:#eee;
        }

    .flowplayer .fp-context-menu li a {
        color: #00a7c8 !important;
        font-size: 12px !important;
        background-color:transparent!important;
    }
    .flowplayer .fp-context-menu li a:hover{background-color:transparent!important;}
/*#endregion Context menu*/


/*#region videoFullScreen*/
.videoFullScreen{
    width:100%;
    height:100%;
    position:fixed;
    background:white;
    top:0;
    left:0;
    z-index:100000;
    border:inset 2px black;
}

.videoFullScreen .close{
    width:36px;
    height:36px;
    line-height:36px;
    font-size:24px;
    padding:0;
    margin:0;
    text-align:center;
    position:absolute;
    top:0;
    left:0;
    border:solid 1px black;
    font-weight:bold;
}

    .videoFullScreen .video {
        width:calc(100% - 38px);
        padding:5px;
        position:absolute;
        top:0;
        right:0;
        overflow:hidden;
    }

    .videoFullScreen .video .fp-player{
        max-width:calc(100% -2px);
        max-height:calc(100% -2px);
    }

.is-fullscreen video {
    background-color: #fff;
}

/*#endregion videoFullScreen*/

/*TBD !!!*/
.innerbody.hocnhuy.Chapter {width:auto!important;}
.innerbody.hocnhuy.Chapter .content.ltr{width:1270px; margin-left:auto; margin-right:auto;}
.innerbody.hocnhuy.Chapter .content.ltr .page-header{margin-top:15px;}
.innerbody.hocnhuy.Chapter .content.ltr #player-frame {float: right;}
.innerbody.hocnhuy.Chapter .content.ltr .panel-body{height:525px!important;}

.innerbody.hocnhuy.Chapter #books-frame .panel-body{height:auto!important; padding:10px;}