#catalog{  }
#catalog .message{ text-align: center; color: #520000; padding: 50px; }

#catalog .catalog_media_frame{ border-bottom-style: solid; padding-top: 10px; padding-bottom: 10px; position: relative; }
#catalog .catalog_media_frame:last-of-type{ border: none; }
#catalog .catalog_media_frame h2{ float: right; text-align: left; width: calc( 100% - 240px - 10px ); }
#catalog .catalog_media_frame h2 a{ color: #333333; }

#catalog .catalog_media_frame .previev
{
	position: relative;
    display: block;
    text-align: center;
    position: relative;
    float: left;
    width: 240px;
    height: 350px;
    border: 1px solid #444444;
    overflow: hidden;
	z-index: 2; 
}
#catalog .telegram{ top: -30px; }
#catalog .catalog_media_frame .previev img{ height: 100%; border: none; z-index: 3;  }

#catalog .catalog_media_frame .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; }
#catalog .catalog_media_frame .previev .imdb_rating::before { content: 'IMDB: '; font-size: 0.85em; }

#catalog .catalog_media_frame .info   { display: block; position: relative; float: right; width: calc( 100% - 240px ); padding-left: 10px;  }
#catalog .catalog_media_frame .description{ margin: 20px 0px; font-size: 0.8em; text-align: justify; }
#catalog .catalog_media_frame .description p{ margin-bottom: 10px; }
#catalog .catalog_media_frame .description p:last-of-type{ margin-bottom: 0px; }
#catalog .catalog_media_frame .details
{
    --button-height: 50px;
    --button-font-size: 0.8em;
    display: block;
    height: var( --button-height );
    width: 200px;
}

@media (hover:none) and (orientation: portrait),
    (hover:on-demand) and (orientation: portrait),
    (max-device-width: 680px)
{
    #catalog .catalog_media_frame .previev,
    #catalog .catalog_media_frame h2,
    #catalog .catalog_media_frame .details,
    #catalog .catalog_media_frame .info
    { float: none; clear: both; width: 100%; margin: 0px; }
    #catalog .catalog_media_frame .info{ padding: 10px; }
    #catalog .catalog_media_frame .description{ margin: 10px 0px 10px 0px; }
    #catalog .catalog_media_frame .previev{ border: none; height: auto; max-height: 400px; }
    #catalog .catalog_media_frame h2{ text-align: center; }
    #catalog .catalog_media_frame .tags{ text-align: center; }
    #catalog .catalog_media_frame .previev img{ border: 1px solid #333333; }  
	#catalog .catalog_media_frame .previev .imdb_rating{ right: calc( ( 100% - 80px ) / 2 ); }
}


#catalog .catalog_media_frame .details a
{
    display: inline-block;
    background: #009900;
    color: #FFFFFF;
    height: 100%;
    width: 100%;
    text-align: center;
    border: 1px solid #009900;
    border-radius: 13px;
    text-transform: uppercase;
    font-size: var( --button-font-size );
    padding-top: calc( var(--button-height)/2 - (var(--button-font-size)/4)*3 );
}



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

#search{ border-bottom-style: solid; text-align: center; padding: 10px; }
#search table{ width: 100%; }
#search table td{ width: auto; }
#search table td + td{ width: 100px; }
#search [type="text"]{ width: 100%; text-align: left; height: 40px; padding: 0px 30px; font-size: 0.95em; border-radius: 30px; }
#search [type="submit"]{ width: 100%; height: 40px; border-radius: 30px; background-color: #FFFFFF; color: #333333; border-color: #333333; opacity: 1.0; }
#search [type="submit"]:hover{ background-color: #009900; color: #FFFFFF; border-color: #009900; opacity: 1.0; }

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


#alphabet{ border-bottom-style: solid; text-align: center; padding: 10px; }
#alphabet .ukrainian{}
#alphabet a{ display: inline-block; text-align: center; padding: 10px; min-width: 30px; margin: 3px 3px 3px 3px; border: 1px solid #555555; color: #555555; font-weight: bold; border-radius: 5px; font-size: 0.75em; text-transform: uppercase; }
#alphabet a:hover{ border-color: #009900; color: #FFFFFF; background-color: #009900; }

#alphabet[data-active="all"] a.all,
#alphabet[data-active="l49"] a.l49,
#alphabet[data-active="l50"] a.l50,
#alphabet[data-active="l51"] a.l51,
#alphabet[data-active="l52"] a.l52,
#alphabet[data-active="l53"] a.l53,
#alphabet[data-active="l54"] a.l54,
#alphabet[data-active="l55"] a.l55,
#alphabet[data-active="l56"] a.l56,
#alphabet[data-active="l57"] a.l57,
#alphabet[data-active="l48"] a.l48,
#alphabet[data-active="l97"] a.l97,
#alphabet[data-active="l98"] a.l98,
#alphabet[data-active="l99"] a.l99,
#alphabet[data-active="l100"] a.l100,
#alphabet[data-active="l101"] a.l101,
#alphabet[data-active="l102"] a.l102,
#alphabet[data-active="l103"] a.l103,
#alphabet[data-active="l104"] a.l104,
#alphabet[data-active="l105"] a.l105,
#alphabet[data-active="l106"] a.l106,
#alphabet[data-active="l103"] a.l103,
#alphabet[data-active="l107"] a.l107,
#alphabet[data-active="l108"] a.l108,
#alphabet[data-active="l109"] a.l109,
#alphabet[data-active="l110"] a.l110,
#alphabet[data-active="l111"] a.l111,
#alphabet[data-active="l114"] a.l114,
#alphabet[data-active="l113"] a.l113,
#alphabet[data-active="l115"] a.l115,
#alphabet[data-active="l116"] a.l116,
#alphabet[data-active="l117"] a.l117,
#alphabet[data-active="l118"] a.l118,
#alphabet[data-active="l119"] a.l119,
#alphabet[data-active="l120"] a.l120,
#alphabet[data-active="l121"] a.l121,
#alphabet[data-active="l122"] a.l122,
#alphabet[data-active="l224"] a.l224,
#alphabet[data-active="l225"] a.l225,
#alphabet[data-active="l226"] a.l226,
#alphabet[data-active="l227"] a.l227,
#alphabet[data-active="l180"] a.l180,
#alphabet[data-active="l228"] a.l228,
#alphabet[data-active="l229"] a.l229,
#alphabet[data-active="l186"] a.l186,
#alphabet[data-active="l230"] a.l230,
#alphabet[data-active="l231"] a.l231,
#alphabet[data-active="l232"] a.l232,
#alphabet[data-active="l179"] a.l179,
#alphabet[data-active="l191"] a.l191,
#alphabet[data-active="l233"] a.l233,
#alphabet[data-active="l234"] a.l234,
#alphabet[data-active="l235"] a.l235,
#alphabet[data-active="l236"] a.l236,
#alphabet[data-active="l237"] a.l237,
#alphabet[data-active="l238"] a.l238,
#alphabet[data-active="l239"] a.l239,
#alphabet[data-active="l240"] a.l240,
#alphabet[data-active="l241"] a.l241,
#alphabet[data-active="l242"] a.l242,
#alphabet[data-active="l243"] a.l243,
#alphabet[data-active="l244"] a.l244,
#alphabet[data-active="l245"] a.l245,
#alphabet[data-active="l246"] a.l246,
#alphabet[data-active="l247"] a.l247,
#alphabet[data-active="l248"] a.l248,
#alphabet[data-active="l249"] a.l249,
#alphabet[data-active="l252"] a.l252,
#alphabet[data-active="l254"] a.l254,
#alphabet[data-active="l255"] a.l255{ border-color: #003366; color: #FFFFFF; background-color: #003366; }


#tag_filter{ border-bottom-style: solid; text-align: center; padding: 10px; }
#tag_filter a{ display: inline-block; color: #555555; margin: 5px 5px; padding: 5px 5px; border: 1px solid #555555; border-radius: 3px;  }
#tag_filter a:hover{ color: #FFFFFF; border-color: #006600; background-color: #006600; }
#tag_filter a.selected{ color: #FFFFFF; border-color: #003366; background-color: #003366; }

#tag_filter a[href$="multfilm-001"],
#tag_filter a[href$="multfilm-002"],
#tag_filter a[href$="multfilm-010"],
#tag_filter a[href$="multfilm-011"]
{ display: none; }

#imdb_rating_filter{ border-bottom-style: solid; text-align: center; padding: 10px; }
#imdb_rating_filter.active{ background: #C2FFC4; }
#imdb_rating_filter input[type="range"]{ width: 100%; z-index: 2; cursor: pointer; }
#imdb_rating_filter .rating_nums{ width: 100%; z-index: 1; position: relative; top: -3px; padding: 0px 0px 0px 10px; }
#imdb_rating_filter .rating_nums span{ display: block; width: 10%; float: left; font-size: 0.75em; color: #555555; text-align: right; }

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

#sorter{ padding: 10px; text-align: center; border-bottom-style: solid; margin-bottom: 10px; font-size: 1.0em; }
#sorter .sorter{ display: inline-block; padding: 5px 15px; border: 1px solid #333333; border-radius: 5px; cursor: pointer; opacity: 0.75; color: #333333; }
#sorter .sorter:hover{ opacity: 1.0; border-color: #333333; color: #333333; background-color: #DDDDDD; }
#sorter .sorter.active{ border-color: #333333; color: #FFFFFF; background-color: #333333; opacity: 1.0; }