#folder .folder_global_info{ padding: 20px 0px; position: relative; }

#folder .folder_global_info h1{ float: right; text-align: left; width: calc( 100% - 240px - 10px ); }
#folder .folder_global_info .previev{ display: block; position: relative; float: left; width: 240px; height: 350px; border: 1px solid #444444; overflow: hidden; }
#folder .folder_global_info .previev img{ height: 100%; border: none; }
#folder .folder_global_info .info   { display: block; position: relative; float: right; width: calc( 100% - 240px ); padding-left: 10px; }
#folder .folder_global_info .description{ margin: 20px 0px; font-size: 0.8em; text-align: justify; }
#folder .folder_global_info .description p{ margin-bottom: 20px; text-indent: 2em; }
#folder .folder_global_info .description p:last-of-type{ margin-bottom: 0px; }
#folder h2{ text-align: center; font-size: 1em; margin: 20px;}
#folder #list{ padding-bottom: 20px; }

#folder .video_config{ width: 100%; border: none; border-collapse: collapse; text-align: left; vertical-align: middle; margin: 10px 0px; }
#folder .video_config tr td{ width: 40px; border: none; border-collapse: collapse; text-align: center; vertical-align: middle; }
#folder .video_config tr td+td{ width: auto; text-align: left; }
#folder .video_config tr td input[type="checkbox"]{ width: 30px; height: 30px; }
#folder .video_config tr td label{ font-weight: bold; cursor: pointer; color: #003366; }

#folder .media_file{ padding: 0px; margin: 1px 0px 2px 0px; border: 1px solid #003366; border-radius: 3px; background: #BDDEFF; color: #003366; cursor: pointer; transition: color 0.2s, background-color 0.2s, border-color 0.2s; }
#folder .media_file:hover{ border-color: #009900; background-color: #D1FFD1; color: #004200;  }
#folder .media_file.active{ border-color: #A84300; background-color: #FFD4B8; color: #333333;  }
#folder .media_file.active:hover{ border-color: #6B0000; background-color: #FFBDBD; color: #6B0000;  }
#folder .media_file .download{ float: right; width: 40px; position: relative; right: 0px; top: 10px; }
#folder .media_file .download a{ font-size: 0.85em; display: block; width: 100%; padding: 10px; background: url(../img/download-flat.png) 50% 50% no-repeat; opacity: 0.6; }
#folder .media_file .download a:hover{ opacity: 1.0; background-image: url(../img/download-flat-green.png); }

#folder .media_file .file_name{ font-size: 0.85em; position: relative; width: calc( 100% - 40px ); padding: 10px; float: left; }
#folder .media_file .file_name .size{ display: inline-block; text-align: right; width: 120px; padding: 10px; color: #444444; position: absolute; right: 0px; top: 10px; }
#folder .media_file .file_name .filename{  }
#folder .media_file .file_name .resolution,
#folder .media_file .file_name .duration{ display: inline-block; margin-left: 10px; font-size: 0.75em; opacity: 0.75; }
#folder .media_file .file_name .duration{ margin-left: 30px; }
#folder .media_file .file_name .duration:before {content: 'Тривалість: ';}
#folder .media_file .file_name .duration:after {content: ' хв.';}

#folder .video{ text-align: center; min-height: 400px; margin-top: 10px; padding: 0px; background: #000000; }
#folder #videoplayer{ height: 100%; width: 100%; min-height: 400px; display: block; }


#folder .folder_global_info #edit{ display: block; width: 30px; height: 30px; position: absolute; top: 10px; right: 0px; background: transparent; z-index: 3; }
#folder .folder_global_info #edit a{ display: inline-block; height: 100%; width: 100%; background: url(../img/edit_30_30.png) 50% 50% no-repeat; }
#folder .folder_global_info #edit a img{ display: block; height: 100%; width: 100%; }

#folder .folder_global_info .tags{  }
#folder .folder_global_info .tags a.tag{ display: inline-block; margin-right: 10px; color: #333333; font-style: italic; font-size: 0.75em; }
#folder .folder_global_info .tags a.tag:hover{ color: #00478F; text-decoration: underline; }

#folder .folder_global_info .previev .imdb_rating{ position: absolute; display: inline-block; top: 10px; right: 10px; z-index: 4; width: 80px; background: #FFC300; color: #000000; font-size: 0.8em; font-weight: bold; padding: 3px; border: 1px solid #000000; box-shadow: 0px 0px 10px #000000; }
#folder .folder_global_info .previev .imdb_rating::before { content: 'IMDB: '; font-size: 0.85em; }

@media (hover:none) and (orientation: portrait),
    (hover:on-demand) and (orientation: portrait),
    (max-device-width: 680px)
{
    #folder .folder_global_info .previev,
    #folder .folder_global_info h1,
    #folder .folder_global_info .details,
    #folder .folder_global_info .info
    { float: none; clear: both; width: 100%; margin: 0px; position: relative; }
    #folder .folder_global_info .info{ padding: 10px; }
    #folder .folder_global_info .description{ margin: 10px 0px 10px 0px; }
    #folder .folder_global_info .previev{ border: none; height: auto; max-height: 400px; text-align: center; }
    #folder .folder_global_info h1{ text-align: center; }
    #folder .folder_global_info .tags{ text-align: center; }
    #folder .folder_global_info .previev img{ height: 100%; border: 1px solid #444444; }
    #folder #list{ padding: 10px; }
    #folder .media_file .download{ display: none; }
    #folder .media_file .file_name{ width: 100%; }
}


span.date[data-val]{ display: inline-block; position: relative; padding-left: 10px; color: #CCCCCC; font-weight: normal; font-size: 0.7em; }
span.date[data-val]::before { content: '('; }
span.date[data-val]::after { content: ')'; }
span.date[data-val=""]{ display: none; }