/* Tab navigation */
/* Inner navigation (inside single module) */
.film_menu_track
{
    /*height:30px;*/
    display:flex;
}
.film_menu_track>a
{    
    border:1px solid #cccccc;
    padding:4px 10px;
    border-bottom: none;
    cursor:pointer;    
}
.film_menu_track>a:hover
{
    background-color: rgba(178, 200, 226, 0.3);
}
.film_menu_track p
{
    color:#9facb3;
    margin:0;
    user-select:none;
}

.selected_page_menu
{    
    background-color:#0d81b7;
    color:white;
}
.selected_page_menu p
{    
    color:white;
}
.films_content
{
    padding:15px 10px;
    border:1px solid #cccccc;
    box-sizing: border-box;
}
.film_container
{
    border: 1px solid #cccccc;
    border-radius: 5px;
    height:100px;
    width:330px;
    display:flex; 
    justify-content: center;
    align-items: center;
    margin:10px 5px;
    box-shadow: 0 0 5px #cccccc;
    position:relative;
    /*z-index: 5;*/
    user-select:none;
}
.film_container p
{
    margin:auto;
}

/* Left part of single film - thumbnail and offline download */
.film_left_container
{    
    flex: 1 1 30%;
    height:100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position:relative;
    box-sizing: border-box;
    /*padding:5px;*/
    border-right: 1px dotted black;
}
.film_thumbnail_container
{
    flex: 1 1 auto;
    justify-content: center;
    align-items: center;
    position:relative;
    display:flex;
    flex-direction: column;
}
.film_thumbnail
{
    height:100%;
    width:100%;
}
.play_film_button_containter
{
    position: absolute;  
    width:100%;
    height:100%;
    display:flex;
    top:0;
    left:0;
    justify-content: center;
    align-items: center;
    background-color:rgba(0,0,0, 0.1);
}
.play_film_button
{
  /*margin: 0 auto;
  top: 25%;*/
  
  /*border-style: solid;*/
  /*border-width: 1em 0 1em 2em;
  border-color: transparent transparent transparent #000;*/
  opacity: .75; 
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 30px solid black;
  /*display:none;*/
}
.play_film_button_containter:hover
{
    cursor: pointer;
    /*border-radius: 200px;*/
    /*border:2px solid black;*/
    background-color:rgba(0,0,0, 0.1);
}

.play_film_button_containter:hover div
{
    border-left-color: #0e82b8;
    display:block;
}
.offline_view_container
{
    flex:0 0 15px;
    /*font-size: 0.9em;*/    
    color:#ababab;
    cursor:context-menu;
}
.film_download_button
{
    padding:auto 5px;
}
.film_download_button:hover
{
    color:black;
    text-decoration: underline;
}

.film_right_container
{
    flex: 1 1 70%;
    height:100%;
    display:flex;
    flex-direction: column;
}
.film_name
{
    /*border-bottom: 1px solid #cccccc;*/
    display:flex;
    padding:10px 5px;
    text-align: center;
    align-items: center;
    flex:1 1 auto;
    
}
.film_more_container
{
    flex: 0 0 25px;
    display:flex;
    justify-content: center;
    text-align: center;
}
.film_more
{
    padding-top:2px;
    border-top:1px solid #cccccc; 
    width:80px;
    color:#ababab;
    cursor: pointer;
}
.film_more:hover 
{
    color:black;
}
.film_more:hover *
{
    border-top-color:black;
    border-left-color:transparent;
    border-right-color:transparent;
}

.film_more_arrow
{
    display:inline-block;
    vertical-align: middle;
    border-top: 5px solid #cccccc;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    height:0;
    width: 0;
}
#video_1
{
    display:none;
}
.film_details_container
{
    display:none;
    position:absolute;
    width:90%;
    left:5%;
    top:100%;
    background-color:white;
    border:2px solid #0e82b8;
    /*border-top: none;*/
    z-index: 10;
    padding:5px;
}
.film_details_container li
{
    padding:3px;
    box-sizing: border-box;
}