/*
Media interaction
*/
@media (max-width: 2200px) 
{
    .navbar-buttons .btn .hide_when_small 
    {
        display: none;
    }
}

@media screen and (min-width: 600px) /* If screen size is more than 600px wide, set the font-size of <div> to 80px */
{
    div.example 
    {
        font-size: 80px;
    }
}

@media screen and (max-width: 600px) /* If screen size is 600px wide, or less, set the font-size of <div> to 30px */
{
    div.example 
    {
        font-size: 30px;
    }
}

@media all and (min-width: 600px) 
{
    .media-bar-aside { flex: 1 0 0; }
}

@media all and (min-width: 800px) 
{
    .media-bar-main         { flex: 3 0px; }
    .media-bar-aside-left   { order: 1; } 
    .media-bar-main         { order: 2; }
    .media-bar-aside-right  { order: 3; }
    .media-bar-footer       { order: 4; }
}

.alpha-header {
font-size: 14px;
background-color: #e74c3c;
/*#c21807*/
}

.display-none
{
    display: none !important;
}

.default-font
{
    color: white;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}
body {
height: 100vh;
background-color: #000000;
}

/* unvisited link */
a:link {
color: white;
text-decoration: none;
}

/* visited link */
a:visited {
color: white;
text-decoration: none;
}

/* mouse over link */
a:hover {
color: #ffa500;
text-decoration: none;
}

/* selected link */
a:active {
color: #ffa500;
text-decoration: none;
}

select {
color: white;
background-color: rgba(0, 0, 0, 0.3);
}

select option {
color: black;
background: white;
}

.bd-navbar {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1071;
}


.nav-bar-height {
height: 44px;
min-height: 44px;
max-height: 44px;
}

#bar {
display: flex;
width: 100%;
background-color: rgb(41, 41, 41);
}

#logo {
display: inline-block;
margin-left: 22px;
margin-top: 2px;
margin-bottom: 2px;
margin-right: 22px;
width: 29px;
}

#logo img {
filter: invert(1);
}

#logo_name {
display: inline-block;
}

.no-border {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}

#searchbar {
}

.searchbar-input {
width: 400px !important;
background-color: #fff !important;
color: rgb(17, 17, 17) !important;
padding: 5px 0px 5px 5px;
border: 1px solid rgb(17, 17, 17);
min-height: 32px;
}

#searchbar input[type=text] {
-webkit-transition: all 0.10s ease-in-out !important;
-moz-transition: all 0.10s ease-in-out !important;
-ms-transition: all 0.10s ease-in-out !important;
-o-transition: all 0.10s ease-in-out !important;
outline: none !important;
}

#searchbar input[type=text]:focus {
padding: 7px 0px 7px 7px;
border: 1px solid rgb(17, 17, 17);
}

#channel_interaction {
display: inline-block;
}

.chess-board-svg img
{ 
width:20%; 
width: 29px; 
margin-bottom: 5px;
filter: invert(1);
shape-rendering: geometricPrecision;
}

#channel_buttons .btn {
outline: none;
box-shadow: none;
}

.rotate-45 {
-webkit-animation: rotate-45 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: rotate-45 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes rotate-45 {
0%   { -webkit-transform: rotate(0);     transform: rotate(0);     }
100% { -webkit-transform: rotate(45deg); transform: rotate(45deg); }
}
@keyframes rotate-45 {
0%   { -webkit-transform: rotate(0);     transform: rotate(0);     }
100% { -webkit-transform: rotate(45deg); transform: rotate(45deg); }
}

.rotate-90 {
-webkit-animation: rotate-90 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: rotate-90 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes rotate-90 {
0%   { -webkit-transform: rotate(45deg);     transform: rotate(45deg);     }
100% { -webkit-transform: rotate(90deg); transform: rotate(90deg); }
}
@keyframes rotate-90 {
0%   { -webkit-transform: rotate(45deg);     transform: rotate(45deg);     }
100% { -webkit-transform: rotate(90deg); transform: rotate(90deg); }
}

.rotate-135 {
-webkit-animation: rotate-135 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: rotate-135 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes rotate-135 {
0%   { -webkit-transform: rotate(90deg);      transform: rotate(90deg);      }
100% { -webkit-transform: rotate(135deg); transform: rotate(135deg); }
}
@keyframes rotate-135 {
0%   { -webkit-transform: rotate(90deg);      transform: rotate(90deg);      }
100% { -webkit-transform: rotate(135deg); transform: rotate(135deg); }
}

.rotate-180 {
-webkit-animation: rotate-180 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: rotate-180 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes rotate-180 {
0%   { -webkit-transform: rotate(135deg);      transform: rotate(135deg);      }
100% { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
}
@keyframes rotate-180 {
0%   { -webkit-transform: rotate(135deg);      transform: rotate(135deg);      }
100% { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
}

.rotate-225 {
-webkit-animation: rotate-225 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: rotate-225 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes rotate-225 {
0%   { -webkit-transform: rotate(180deg);      transform: rotate(180deg);      }
100% { -webkit-transform: rotate(225deg); transform: rotate(225deg); }
}
@keyframes rotate-225 {
0%   { -webkit-transform: rotate(180deg);      transform: rotate(180deg);      }
100% { -webkit-transform: rotate(225deg); transform: rotate(225deg); }
}

.rotate-270 {
-webkit-animation: rotate-270 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: rotate-270 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes rotate-270 {
0%   { -webkit-transform: rotate(225deg);      transform: rotate(225deg);      }
100% { -webkit-transform: rotate(270deg); transform: rotate(270deg); }
}
@keyframes rotate-270 {
0%   { -webkit-transform: rotate(225deg);      transform: rotate(225deg);      }
100% { -webkit-transform: rotate(270deg); transform: rotate(270deg); }
}

.rotate-315 {
-webkit-animation: rotate-315 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: rotate-315 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes rotate-315 {
0%   { -webkit-transform: rotate(270deg);      transform: rotate(270deg);      }
100% { -webkit-transform: rotate(315deg); transform: rotate(315deg); }
}
@keyframes rotate-315 {
0%   { -webkit-transform: rotate(270deg);      transform: rotate(270deg);      }
100% { -webkit-transform: rotate(315deg); transform: rotate(315deg); }
}

.rotate-360 {
-webkit-animation: rotate-360 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: rotate-360 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes rotate-360 {
0%   { -webkit-transform: rotate(315deg);      transform: rotate(315deg);      }
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes rotate-360 {
0%   { -webkit-transform: rotate(315deg);      transform: rotate(315deg);      }
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}


.channel-description-poster {
-webkit-box-shadow: 0px 0px 9px 3px rgba(0, 0, 0, 1);
-moz-box-shadow: 0px 0px 9px 3px rgba(0, 0, 0, 1);
box-shadow: 0px 0px 9px 3px rgba(0, 0, 0, 1);

margin: 10px 10px 10px 10px;
}

.center-cropped {
width: 100px;
height: 100px;
background-position: center center;
background-repeat: no-repeat;
overflow: hidden;
}

/* Set the image to fill its parent and make transparent */
.center-cropped img {
min-height: 100%;
min-width: 100%;
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
/* IE 5-7 */
filter: alpha(opacity=0);
/* modern browsers */
opacity: 0;
}

.get-relative-position {
position: relative;
}

.set-floating-categories-row {
position: absolute;
width: 100%;
top: -20px;
z-index: 9999;
}

#categories-content-row {
padding: 25px;

background-color: rgba(0, 0, 0, 0.8);
}

#channel_categories {
margin-top: 10px;
display: inline-block;
width: 100%;
vertical-align: top;
overflow: auto;
}

#channel_categories::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
background-color: rgba(245, 245, 245, 0);
}

#channel_categories::-webkit-scrollbar {
width: 2px;
background-color: rgba(245, 245, 245, 0);
}

#channel_categories::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 1);
}

.debug1 {
background-color: rgba(255, 0, 179, 1) !important;
}

.debug2 {
background-color: rgb(0, 255, 115) !important;
}

.debug3 {
background-color: rgb(0, 4, 255) !important;
}

/*fixing rows*/
.row {
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: 0px;
margin-left: 0px;
}

[style*="--aspect-ratio"]> :first-child {
width: 100%;
}

[style*="--aspect-ratio"]>img {
height: auto;
}

@supports (--custom:property) {
[style*="--aspect-ratio"] {
position: relative;
}

[style*="--aspect-ratio"]::before {
content: "";
display: block;
padding-bottom: calc(100% / (var(--aspect-ratio)));
}

[style*="--aspect-ratio"]> :first-child {
position: absolute;
top: 0;
left: 0;
height: 100%;
}
}

/*adjustments*/
.list-group-item-action {
filter: blur(0);
width: 100%;
color: #ffffff;
text-align: inherit;
}

.list-group-item-action:hover,
.list-group-item-action:focus,
.list-group-item-action:active,
.list-group-item-action:visited {
z-index: 1;
color: #ffffff;

border: 0px;
border-left: 2px solid;
border-color: rgb(187, 187, 187);

-webkit-transition: all 0.10s ease-in-out;
-moz-transition: all 0.10s ease-in-out;
-ms-transition: all 0.10s ease-in-out;
-o-transition: all 0.10s ease-in-out;
}

.list-group-item.active {
z-index: 1;
color: #ffffff;

border: 0px;
border-left: 2px solid;
border-color: #ffffff;
}

.list-group-item {
position: relative;
display: block;
padding: 0.25rem 1rem;
margin-bottom: -1px;
background-color: #fff;
border: 0px;
}

.list-group-item:first-child {
border-top-left-radius: 0rem;
border-top-right-radius: 0rem;
}

.list-group-item:last-child {
margin-bottom: 0;
border-bottom-right-radius: 0rem;
border-bottom-left-radius: 0rem;
}

.list-group-item.disabled,
.list-group-item:disabled {
color: #6c757d;
pointer-events: none;
background-color: #fff;
}

.list-group.list-group-striped a:nth-of-type(odd) {
background: linear-gradient(to right, rgba(220, 238, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
}

.list-group.list-group-striped a:nth-of-type(even) {
background: rgba(0, 0, 0, 0)
}

.list-group.list-group-hover a:hover {
color: white;
}

.star-container-black {
color: black;
}

.star-container-white {
color: white;

filter: invert(1);
}


#content {
width: 100%;
height: 100%;
position: fixed;
}

#main_row {
    background: url("") no-repeat scroll center center / cover;
width: 100%;
position: fixed;
height: 100%;
min-height: 100%;
max-height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}

#user_left_col, #channel_left_col {
min-width: 200px;
max-width: 200px;
height: 100%;
min-height: 100%;
max-height: 100%;
position: fixed;
overflow: hidden;
}
    
#channel_center_column {
height: 100%;
position: fixed;
overflow: hidden;
min-height: 100%;
max-height: 100%;
min-width: calc(100vw - 200px - 25vw);
max-width: calc(100vw - 200px - 25vw);
left: 200px;
}

#right_col {
left: 75vw;
width: 25vw;
min-width: 25vw;
max-width: 25vw;
height: 100%;
min-height: 100%;
max-height: 100%;
position: fixed;
}

#channel_categories_description {
margin-left: 10px;
height: 100%;
color: #ffffff;
}

#channel_categories_description h6{
color: #cecece;
margin-block-start: -10px;
}

.navbar-center-col {
width: 400px;
display: flex;
justify-content: space-between;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}

.navbar-right-col {
left: 75vw;
min-width: 25vw;
max-width: 25vw;
}

#header_bar_interaction #header_bar_menu_buttons {
position: absolute;
top: 7px;
}

#social_media_interaction {
position: absolute;
}

.navbar-buttons {
top: 25px;
height: 100%;
position: relative;
margin: 0 auto;
}


.navbar-buttons-middle {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}

.navbar-buttons .btn {
padding: 5px;
color: #ffffff;
outline: none;
box-shadow: none;
border: none;
border-radius: 0px;
border-bottom: 0px solid;

-webkit-transition: all 0.0s ease-in-out;
-moz-transition: all 0.0s ease-in-out;
-ms-transition: all 0.0s ease-in-out;
-o-transition: all 0.0s ease-in-out;
}



.navbar-buttons .navbar-button:active,
.navbar-buttons .navbar-button.active,
.navbar-buttons .navbar-button.focus,
.navbar-buttons .navbar-button:focus {
border-bottom: 2px solid;
border-color: #ffffff;
}

.navbar-buttons .navbar-button.hover,
.navbar-buttons .navbar-button:hover {
border-bottom: 2px solid;
border-color: #8b8b8b;
}

iframe {
display: block;
width: 100%;
}

.twitter-post-style .twitter-tweet {
margin: -5px 0px 0px 0px !important;
}

#episodes_and_description {
color: #ffffff;
}

#channel_entries {
display: inline-block;
width: 100%;
vertical-align: top;
overflow: auto;
}


#channel_entries .list-group.list-group-striped a:nth-of-type(odd) {
background: linear-gradient(to right, rgba(220, 238, 255, 0.2) 0%, rgba(255, 255, 255, 0) 20%);
}

#channel_entries_description {
margin-left: 10px;
color: #ffffff;
display: inline-block;
vertical-align: top;
width: 100%;
height: 100%;
overflow: auto;
}

#channel_entries_description h6 {
color: #cecece;
margin-block-start: -10px;
}

.scroll-area-bottom-spacer {
padding-top: 40px;
padding-bottom: 80px;
margin-bottom: 100px;
}

.spacer-10
{
margin-top: 20px !important;
margin-bottom: 20px !important;
}
/*
*  scroll bar style
*/

#channel_entries_description::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
background-color: rgba(245, 245, 245, 0);
}

#channel_entries_description::-webkit-scrollbar {
width: 2px;
background-color: rgba(245, 245, 245, 0);
}

#channel_entries_description::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 1);
}

#channel_entries::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
background-color: rgba(245, 245, 245, 0);
}

#channel_entries::-webkit-scrollbar {
width: 2px;
background-color: rgba(245, 245, 245, 0);
}

#channel_entries::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 1);
}



#channel_description {
margin-left: 10px;
height: 100%;
color: #ffffff;
}

#channel_description_rating {

margin: 5px calc(50% - 50px);
}

#channel_description_rating .rating-star {
color: orange;
}

#channel_description_rating .rating-star-half {
color: white;
}

#channel_description_rating .rating-star-empty {
color: white;
}



#channel_description_title {
color: #ffffff;
text-align: left;
-webkit-transition: -webkit-transform 1s linear;
}

#channel_description_top {
min-height: 315px;
max-height: 315px;
height: 315px;
}

#channel_description_more_info table {    
color: #ffffff;
border-collapse: collapse;
margin-top: 0px;
margin-bottom: 10px;
}
#channel_description_more_info td {
text-align: left;
padding-right: 20px;
}
#channel_description_more_info label {
text-align: left;
padding: 0px;
}

#channel_description_more_info i {
text-align: left;
padding-right: 7px;
}

#channel_buttons i {
text-align: left;
padding-right: 7px;
font-size: 2em;
}

#channel_description_text {
max-height: 145px;
overflow: auto;
}


#channel_description_text::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
background-color: rgba(245, 245, 245, 0);
}

#channel_description_text::-webkit-scrollbar {
width: 2px;
background-color: rgba(245, 245, 245, 0);
}

#channel_description_text::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 1);
}



.flip-in-ver-left {
-webkit-animation: flip-in-ver-left 1.0s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: flip-in-ver-left 1.0s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.slide-in-top {
-webkit-animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.slide-in-left {
-webkit-animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/* ----------------------------------------------
* Generated by Animista on 2019-6-29 18:32:56
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */

/**
* ----------------------------------------
* animation slide-in-top
* ----------------------------------------
*/
@-webkit-keyframes slide-in-top {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}

100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}

@keyframes slide-in-top {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}

100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}

/* ----------------------------------------------
* Generated by Animista on 2019-6-29 18:49:3
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */

/**
* ----------------------------------------
* animation slide-in-left
* ----------------------------------------
*/
@-webkit-keyframes slide-in-left {
0% {
-webkit-transform: translateX(-1000px);
transform: translateX(-1000px);
opacity: 0;
}

100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}

@keyframes slide-in-left {
0% {
-webkit-transform: translateX(-1000px);
transform: translateX(-1000px);
opacity: 0;
}

100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}

/* ----------------------------------------------
* Generated by Animista on 2019-6-29 18:28:21
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */

/**
* ----------------------------------------
* animation flip-in-ver-left
* ----------------------------------------
*/
@-webkit-keyframes flip-in-ver-left {
0% {
-webkit-transform: rotateY(80deg);
transform: rotateY(80deg);
opacity: 1;
}

100% {
-webkit-transform: rotateY(0);
transform: rotateY(0);
opacity: 1;
}
}

@keyframes flip-in-ver-left {
0% {
-webkit-transform: rotateY(80deg);
transform: rotateY(80deg);
opacity: 1;
}

100% {
-webkit-transform: rotateY(0);
transform: rotateY(0);
opacity: 1;
}
}


.bounce-in-top {
-webkit-animation: bounce-in-top 0.9s 1s both;
animation: bounce-in-top 0.9s 1s both;
}

/* ----------------------------------------------
* Generated by Animista on 2019-6-29 18:13:53
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */

/**
* ----------------------------------------
* animation bounce-in-top
* ----------------------------------------
*/
@-webkit-keyframes bounce-in-top {
0% {
-webkit-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}

38% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
opacity: 1;
}

55% {
-webkit-transform: translateY(-25px);
transform: translateY(-25px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}

72% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}

81% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}

90% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}

95% {
-webkit-transform: translateY(-3px);
transform: translateY(-3px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}

100% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}

@keyframes bounce-in-top {
0% {
-webkit-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}

38% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
opacity: 1;
}

55% {
-webkit-transform: translateY(-25px);
transform: translateY(-25px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}

72% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}

81% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}

90% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}

95% {
-webkit-transform: translateY(-3px);
transform: translateY(-3px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}

100% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}


.rating-star {
max-width: 16px;
max-height: 16px;
color: #000000;
vertical-align: middle;
}

.rating-star-half {
max-width: 16px;
max-height: 16px;
color: #000000;
vertical-align: middle;
}

.rating-star-half-empty {
max-width: 16px;
max-height: 16px;
color: #000000;
vertical-align: middle;
}

.rating-star-empty {
max-width: 16px;
max-height: 16px;
color: #000000;
vertical-align: middle;
}

.rating-star-half-container {
width: 1em;
height: 1em;
line-height: 1em;
vertical-align: middle;
}

.rating-value {
font-size: 1em;
color: #fff;
float: right;
}

.title {
color: #000000;
line-height: 1.5em;
height: 3em;       
overflow: hidden;  
}

.year {
font-size: 0.85em;
color: #000000;
display: inline;
}

.rating-number {
font-size: 0.85em;
color: #000000;
display: inline;
}

#channel_latest_content {
text-align: center;
color: #ffffff;
overflow: hidden;
}

#channel_latest_content_videos {
justify-content: center;
display: flex !important;
flex-wrap: wrap;
overflow: hidden;
max-height: 210px;
color: #ffffff;
}


#channel_all_media {
min-height: 100%;
max-height: 100%;
min-width: calc(100vw - 200px);
max-width: calc(100vw - 200px);
overflow: auto;
top: 90px;
left: 200px;
position: absolute;
justify-content: center;

}

#channel_all_media_container {
display: flex;
flex-wrap: wrap;
overflow: auto;
margin: auto;
}

#channel_all_media::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
background-color: rgba(245, 245, 245, 0);
}

#channel_all_media::-webkit-scrollbar {
width: 2px;
background-color: rgba(245, 245, 245, 0);
}

#channel_all_media::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 1);
}

#channel_media_player {
position: absolute;
left: 0px;
top: 0px;

width: calc(100vw - 200px - 25vw);
}

#video_container {
    background-color: black;
    width: 100%;
    padding-top: min(100vh - 200px, 56.25%); /* 16:9 Aspect Ratio TODO: until a maximum to leave space for the lower-bar*/
    height: 0px;
    position: relative;
}

#video_container video 
{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

#video_progress_bar {
background-color: #e74c3c;
height: 3px;
}

#loading_balls {
width: 100%;
position: absolute;
top: calc(50% - 50px);
text-align: center;
}

.stop-animation {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
animation-play-state: paused;
}

.posters_center_column {
color: #ffffff;
min-height: calc(100vh - 50px);
max-height: calc(100vh - 50px);
overflow: auto;
min-width: 100vw;
max-width: 100vw;
}

.posters_center_column::-webkit-scrollbar-track  { -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3); background-color: rgba(245, 245, 245, 0); }
.posters_center_column::-webkit-scrollbar        { width: 2px; background-color: rgba(245, 245, 245, 0); }
.posters_center_column::-webkit-scrollbar-thumb  { background-color: rgba(0, 0, 0, 1); }

.posters-page-row {
align-items: flex-end;
justify-content: center;
align-content: flex-start;
display: flex;
flex-wrap: wrap;
overflow: auto;
}

.narrow_posters_content {
max-width: calc((138px  + 5px) * 10);
margin: auto;
}

#all_featured_channels_container, 
#trending_featured_channels_container {
min-height: 210px;
max-height: 210px;
}

#all_subscriptions_channels_container {
min-height: calc(210px * 2);
max-height: calc(210px * 2);
}

#all_subscriptions_channels_latest_videos {
min-height: calc(210px * 3);
max-height: calc(210px * 3);
}

#trending_featured_videos_container {
min-height: calc(210px * 4);
max-height: calc(210px * 4);
}

.posters_subscriptions_content {
min-width: 100%;
max-width: 100%;
margin: 0 auto;
}

.channel-poster-small {
cursor: pointer;
min-width: 173px;
width: 173px;
max-width: 173px;
min-height: 259px;
height: 259px;
max-height: 259px;
}

.channel-home-poster {
cursor: pointer;
min-width: 138px;
width: 138px;
max-width: 138px;
min-height: 207px;
height: 207px;
max-height: 207px;
}

.channel-video-preview-size {
cursor: pointer;
border-radius: 2px;
min-width: 210px;
width: 210px;
max-width: 210px;
min-height: 118px;
height: 118px;
max-height: 118px;
}

.channel-poster {
cursor: pointer;
min-width: 173px;
max-width: 173px;
min-height: 259px;
max-height: 259px;
}

.channel_main_info-init {
-webkit-transform: translateX(-1000px);
transform: translateX(-1000px);
opacity: 0;
}

.channel_main_info-end {
-webkit-transform: translateX(0px);
transform: translateX(0px);
opacity: 1;
}




.slit-in-vertical{-webkit-animation:slit-in-vertical .45s ease-out both;animation:slit-in-vertical .45s ease-out both}
/* ----------------------------------------------
* Generated by Animista on 2019-7-18 21:34:22
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */

@-webkit-keyframes slit-in-vertical{0%{-webkit-transform:translateZ(-800px) rotateY(90deg);transform:translateZ(-800px) rotateY(90deg);opacity:0}54%{-webkit-transform:translateZ(-160px) rotateY(87deg);transform:translateZ(-160px) rotateY(87deg);opacity:1}100%{-webkit-transform:translateZ(0) rotateY(0);transform:translateZ(0) rotateY(0)}}@keyframes slit-in-vertical{0%{-webkit-transform:translateZ(-800px) rotateY(90deg);transform:translateZ(-800px) rotateY(90deg);opacity:0}54%{-webkit-transform:translateZ(-160px) rotateY(87deg);transform:translateZ(-160px) rotateY(87deg);opacity:1}100%{-webkit-transform:translateZ(0) rotateY(0);transform:translateZ(0) rotateY(0)}}


#all_featured_channels_title, 
#all_subscriptions_channels_title, 
#all_subscriptions_channels_latest_videos_title,
#trending_featured_channels_title,
#trending_featured_videos_title {
    margin-top: 10px;
    margin-left: 10px;
}

.thing_to_overlay_video_poster {
opacity: 1;
display: block;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}

.thing_for_overlay_video_poster {
max-height: 80px;
min-height: 80px;
height: 80px;
cursor: auto;
color: white;
background-color: transparent;
border-radius: 0px;
text-align: center;
opacity: 1;
}


.channel-video-title-box {
padding-top: 3px;
height: 48px;
min-height: 48px;
max-height: 48px;
overflow: hidden;
font-size: 0.9em;
}

.fade-txt {
position: relative;
height: 2.0em; /* exactly three lines */
}

.fade-txt:after {
content: "";
text-align: right;
position: absolute;
bottom: 0;
right: 0;
width: 20%;
height: 1.5em;
background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1) 50%);
}

.container_for_overlay_stuff {
padding: 5px;
position: relative;
}

.container_for_overlay_stuff:hover .channel-video-preview-size { -webkit-filter: blur(1px); filter: blur(1px); }
.container_for_overlay_stuff:hover .thing_to_overlay  { opacity:   1; -webkit-filter: brightness(1.1); filter: brightness(1.1); }
.container_for_overlay_stuff:hover .thing_for_overlay { opacity: 0.5; }
.container_for_overlay_stuff:hover .thing_for_overlay_metadata { opacity: 1.0; }

.container_for_overlay_stuff_sm_padding {
padding: 2px;
position: relative;
min-height: 210px;
max-height: 210px;
height: 210px;
}

.container_for_overlay_stuff_sm_padding:hover .channel-home-poster { -webkit-filter: blur(1px); filter: blur(1px); }
.container_for_overlay_stuff_sm_padding:hover .thing_to_overlay_channel_video  { opacity:   1; -webkit-filter: brightness(1.1); filter: brightness(1.1); }
.container_for_overlay_stuff_sm_padding:hover .thing_for_overlay_channel_video { opacity: 0.5; }
.container_for_overlay_stuff_sm_padding:hover .thing_for_overlay_channel_video_metadata { opacity: 1.0; }

.thing_to_overlay_channel_video {
opacity: 1;
display: inline-block;
position: relative;
overflow: hidden;
}

.thing_for_overlay_channel_video {
background-color: white;
opacity: 0;
text-align: center;
border-radius: 2px;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}

.thing_for_overlay_channel_video_metadata {
background-color: transparent;
opacity: 0;
text-align: center;

position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}

.thing_to_overlay {
opacity: 1;
display: inline-block;
position: relative;
overflow: hidden;
}

.thing_for_overlay {
border-color: transparent;
background-color: white;
opacity: 0;
text-align: center;
border-radius: 2px;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}

.thing_for_overlay_metadata {
background-color: transparent;
opacity: 0;
text-align: center;
border-radius: 2px;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}


.metadatas {
font-weight: bolder;
}

.metadatas_channel_video_poster {
font-weight: normal;
}

.metadatas-for-channel-poster {
min-width: 100%;
font-weight: bolder;

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}

#map {
min-height: 100%;
max-height: 100%;
}


#map iframe {
min-height: 100%;
max-height: 100%;
}

.slide-out-bck-center{-webkit-animation:slide-out-bck-center .5s cubic-bezier(.55,.085,.68,.53) .5s both;animation:slide-out-bck-center .5s cubic-bezier(.55,.085,.68,.53) .15s both}

/* ----------------------------------------------
* Generated by Animista on 2019-7-20 18:27:10
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */

@-webkit-keyframes slide-out-bck-center{0%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}100%{-webkit-transform:translateZ(-1100px);transform:translateZ(-1100px);opacity:0}}@keyframes slide-out-bck-center{0%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}100%{-webkit-transform:translateZ(-1100px);transform:translateZ(-1100px);opacity:0}}

.scale-down-center{-webkit-animation:scale-down-center .15s cubic-bezier(.175,.885,.32,5.275) both;animation:scale-down-center .15s cubic-bezier(.175,.885,.32,5.275) both}
/* ----------------------------------------------
* Generated by Animista on 2019-7-20 18:42:52
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */

@-webkit-keyframes scale-down-center{0%{-webkit-transform:scale(1);transform:scale(1)}100%{-webkit-transform:scale(.95);transform:scale(.95)}}@keyframes scale-down-center{0%{-webkit-transform:scale(1);transform:scale(1)}100%{-webkit-transform:scale(.95);transform:scale(.95)}}

.btn-click-fx{-webkit-animation:btn-click-fx .15s cubic-bezier(.175,.885,.32,5.275) both;animation:btn-click-fx .15s cubic-bezier(.175,.885,.32,5.275) both}
/* ----------------------------------------------
* Generated by Animista on 2019-7-20 18:42:52
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */

@-webkit-keyframes btn-click-fx{0%{-webkit-transform:scale(1);transform:scale(1)}100%{-webkit-transform:scale(.90);transform:scale(.90)}}@keyframes btn-click-fx{0%{-webkit-transform:scale(1);transform:scale(1)}100%{-webkit-transform:scale(.90);transform:scale(.90)}}

#user_data {
min-width: 100%;
max-width: 100%;
}


#user_center_column {
overflow: auto;
}

#user_center_column::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
background-color: rgba(245, 245, 245, 0);
}

#user_center_column::-webkit-scrollbar {
width: 2px;
background-color: rgba(245, 245, 245, 0);
}

#user_center_column::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 1);
}

#user #input_user_id {
    display: none;
}

#user {
min-width: 100%;
max-width: 100%;
color: white;
display: flex;

overflow: auto;
}

#user::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
background-color: rgba(245, 245, 245, 0);
}

#user::-webkit-scrollbar {
width: 2px;
background-color: rgba(245, 245, 245, 0);
}

#user::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 1);
}

#edit_channel .handle {
cursor: grab;
color: #000000;
}

.finger {
cursor: pointer;
}
.finger_active {
cursor: pointer;
}

#edit_channel .finger {
color: #000000;
}

#edit_channel .finger_active {
color: white;
}

#edit_channel_categories_entries {
min-width: 100%;
}
#edit_channel_categories_left {
display: flex;
}

#edit_channel_categories_left a {
display: flex;
}

#edit_channel_categories_right {
display: flex;
}

#edit_channel_categories_right a {
display: flex;
}

input {
border:none;
min-height: 22px;
max-height: 22px;
background: transparent !important;
color: white;
border: none;
color: white;
-webkit-transition: all 0.10s ease-in-out;
-moz-transition: all 0.10s ease-in-out;
-ms-transition: all 0.10s ease-in-out;
-o-transition: all 0.10s ease-in-out;
outline: none;
}


input:focus {
padding: 9px 0px 9px 9px;
}


input::placeholder {
color: black;
outline: none;
}

input, input:focus {
}

/* this is broken in Chrome
input,
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
input:-webkit-autofill:selected,
input:-internal-autofill,
input:-internal-autofill:hover,
input:-internal-autofill:focus,
input:-internal-autofill:selected,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus
{
border: none !important;
-webkit-text-fill-color: white !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
*/

label {
color: white;
}

button, button:focus {
background: transparent;
border: none;
color: white;
outline: none;
}


input[type="checkbox"] {
    width: 22px;
}

    
#user_center_column {
position: absolute;
left: 200px;
height: 100%;
width: calc(100vw - 200px);
}

#user_center_column textarea {
min-width: 100%;
max-width: 100%;
color: white;
background-color: rgba(0, 0, 0, 0.3);
}

#user_delete_account_content {
position: absolute;
width: 100%;
height: 100%;
}

#user_edit_content {
width: 100%;
height: 100%;
}

#user_categories_and_entries_content {
position: absolute;
left: 0px;
min-width: calc(100vw - 200px);
max-width: calc(100vw - 200px);
}

#user_global_configuration_content {
position: absolute;
left: 0px;
min-width: calc(100vw - 200px);
max-width: calc(100vw - 200px);
}

#user_data_left {
position: absolute;
left: 0px;
min-width: calc(50vw - 200px);
max-width: calc(50vw - 200px);
}

#user_data_right {
position: absolute;
left: calc(50vw - 200px);
min-width: 50vw;
max-width: 50vw;
}


#edit_channel_categories_entries_right, #edit_channel_categories_entries_left, #edit_channel_categories_entries, #edit_channel, #user_data_left, #user_data_right {
height: 100%;
}

#edit_channel_entry_editor label 
{
    min-width: 100%;
    display: block;
}

#edit_channel_entry_editor input
{
    min-width: 100%;
    display: block;
}

#edit_channel_entry_editor textarea
{
    min-width: 100%;
    display: block;
}

#edit_channel_entry_editor input[type="checkbox"] 
{
    
}

#login_container {
min-width: 100%;
}

#login_content {
display: flex;           /* establish flex container */
flex-direction: column;  /* make main axis vertical */
justify-content: center; /* center items vertically, in this case */
align-items: center;     /* center items horizontally, in this case */
height: 300px;
}

#form_login, #form_login_pin {
width: 500px;
margin: 5px;
text-align: center;     /* will center text in <p>, which is not a flex item */
}

#login {
min-width: 100%;
}

.vertical-center {
margin: 0;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}

.horizontal-center {
margin: 0;
position: absolute;
left: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}

.vertical-up-center {
margin: 0;
position: absolute;
top: 25%;
-ms-transform: translateY(-25%);
transform: translateY(-25%);
}

/*
Page effects
*/
.fade-in{-webkit-animation:fade-in .3s cubic-bezier(.39,.575,.565,1.000) both;animation:fade-in .3s cubic-bezier(.39,.575,.565,1.000) both}
@-webkit-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}

.fade-out{-webkit-animation:fade-out .3s ease-out both;animation:fade-out .3s ease-out both}
@-webkit-keyframes fade-out{0%{opacity:1}100%{opacity:0}}@keyframes fade-out{0%{opacity:1}100%{opacity:0}}

.fade-out-300-300{-webkit-animation:fade-out-300-300 .3s ease-out .2s both;animation:fade-out-300-300 .3s ease-out .2s both}
@-webkit-keyframes fade-out-300-300{0%{opacity:1}100%{opacity:0}}@keyframes fade-out-300-300{0%{opacity:1}100%{opacity:0}}

.slit-in-vertical-300{-webkit-animation:slit-in-vertical .3s ease-out both;animation:slit-in-vertical .3s ease-out both}
 @-webkit-keyframes slit-in-vertical-300{0%{-webkit-transform:translateZ(-800px) rotateY(90deg);transform:translateZ(-800px) rotateY(90deg);opacity:0}54%{-webkit-transform:translateZ(-160px) rotateY(87deg);transform:translateZ(-160px) rotateY(87deg);opacity:1}100%{-webkit-transform:translateZ(0) rotateY(0);transform:translateZ(0) rotateY(0)}}@keyframes slit-in-vertical{0%{-webkit-transform:translateZ(-800px) rotateY(90deg);transform:translateZ(-800px) rotateY(90deg);opacity:0}54%{-webkit-transform:translateZ(-160px) rotateY(87deg);transform:translateZ(-160px) rotateY(87deg);opacity:1}100%{-webkit-transform:translateZ(0) rotateY(0);transform:translateZ(0) rotateY(0)}}

.slit-in-vertical-1{-webkit-animation:slit-in-vertical .45s ease-out both;animation:slit-in-vertical .45s ease-out .1s both}
.slit-in-vertical-2{-webkit-animation:slit-in-vertical .45s ease-out both;animation:slit-in-vertical .45s ease-out .15s both}
.slit-in-vertical-3{-webkit-animation:slit-in-vertical .45s ease-out both;animation:slit-in-vertical .45s ease-out .19s both}
.slit-in-vertical-4{-webkit-animation:slit-in-vertical .45s ease-out both;animation:slit-in-vertical .45s ease-out .21s both}
.slit-in-vertical-5{-webkit-animation:slit-in-vertical .45s ease-out both;animation:slit-in-vertical .45s ease-out .32s both}

@-webkit-keyframes slit-in-vertical-1{0%{-webkit-transform:translateZ(-800px) rotateY(90deg);transform:translateZ(-800px) rotateY(90deg);opacity:0}54%{-webkit-transform:translateZ(-160px) rotateY(87deg);transform:translateZ(-160px) rotateY(87deg);opacity:1}100%{-webkit-transform:translateZ(0) rotateY(0);transform:translateZ(0) rotateY(0)}}@keyframes slit-in-vertical{0%{-webkit-transform:translateZ(-800px) rotateY(90deg);transform:translateZ(-800px) rotateY(90deg);opacity:0}54%{-webkit-transform:translateZ(-160px) rotateY(87deg);transform:translateZ(-160px) rotateY(87deg);opacity:1}100%{-webkit-transform:translateZ(0) rotateY(0);transform:translateZ(0) rotateY(0)}}
@-webkit-keyframes slit-in-vertical-2{0%{-webkit-transform:translateZ(-800px) rotateY(90deg);transform:translateZ(-800px) rotateY(90deg);opacity:0}54%{-webkit-transform:translateZ(-160px) rotateY(87deg);transform:translateZ(-160px) rotateY(87deg);opacity:1}100%{-webkit-transform:translateZ(0) rotateY(0);transform:translateZ(0) rotateY(0)}}@keyframes slit-in-vertical{0%{-webkit-transform:translateZ(-800px) rotateY(90deg);transform:translateZ(-800px) rotateY(90deg);opacity:0}54%{-webkit-transform:translateZ(-160px) rotateY(87deg);transform:translateZ(-160px) rotateY(87deg);opacity:1}100%{-webkit-transform:translateZ(0) rotateY(0);transform:translateZ(0) rotateY(0)}}
@-webkit-keyframes slit-in-vertical-3{0%{-webkit-transform:translateZ(-800px) rotateY(90deg);transform:translateZ(-800px) rotateY(90deg);opacity:0}54%{-webkit-transform:translateZ(-160px) rotateY(87deg);transform:translateZ(-160px) rotateY(87deg);opacity:1}100%{-webkit-transform:translateZ(0) rotateY(0);transform:translateZ(0) rotateY(0)}}@keyframes slit-in-vertical{0%{-webkit-transform:translateZ(-800px) rotateY(90deg);transform:translateZ(-800px) rotateY(90deg);opacity:0}54%{-webkit-transform:translateZ(-160px) rotateY(87deg);transform:translateZ(-160px) rotateY(87deg);opacity:1}100%{-webkit-transform:translateZ(0) rotateY(0);transform:translateZ(0) rotateY(0)}}
@-webkit-keyframes slit-in-vertical-4{0%{-webkit-transform:translateZ(-800px) rotateY(90deg);transform:translateZ(-800px) rotateY(90deg);opacity:0}54%{-webkit-transform:translateZ(-160px) rotateY(87deg);transform:translateZ(-160px) rotateY(87deg);opacity:1}100%{-webkit-transform:translateZ(0) rotateY(0);transform:translateZ(0) rotateY(0)}}@keyframes slit-in-vertical{0%{-webkit-transform:translateZ(-800px) rotateY(90deg);transform:translateZ(-800px) rotateY(90deg);opacity:0}54%{-webkit-transform:translateZ(-160px) rotateY(87deg);transform:translateZ(-160px) rotateY(87deg);opacity:1}100%{-webkit-transform:translateZ(0) rotateY(0);transform:translateZ(0) rotateY(0)}}
@-webkit-keyframes slit-in-vertical-5{0%{-webkit-transform:translateZ(-800px) rotateY(90deg);transform:translateZ(-800px) rotateY(90deg);opacity:0}54%{-webkit-transform:translateZ(-160px) rotateY(87deg);transform:translateZ(-160px) rotateY(87deg);opacity:1}100%{-webkit-transform:translateZ(0) rotateY(0);transform:translateZ(0) rotateY(0)}}@keyframes slit-in-vertical{0%{-webkit-transform:translateZ(-800px) rotateY(90deg);transform:translateZ(-800px) rotateY(90deg);opacity:0}54%{-webkit-transform:translateZ(-160px) rotateY(87deg);transform:translateZ(-160px) rotateY(87deg);opacity:1}100%{-webkit-transform:translateZ(0) rotateY(0);transform:translateZ(0) rotateY(0)}}

/*
Media bar
*/
.container_for_overlay_stuff {
margin: 0px !important;
padding: 0px !important;
position: relative;
}

.thing_to_overlay_stuff {
opacity: 0;
display: inline-block;
position: relative;
overflow: hidden;
}

.thing_for_overlay_stuff {
background-color: black;
opacity: 0.0;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}

.thing_for_overlay_stuff_metadata {
background-color: transparent;
opacity: 0;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 2;
}

.blur-3 {
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
}

#media_bar {
cursor: pointer;
color: white;
position: absolute;
width: 0%;
height: 0%;
top: 0;
left: 0;
}

.media-bar-wrapper {
display: flex;  
flex-flow: row wrap;
font-weight: bold;
text-align: center;
align-content: stretch;
}

.media-bar-wrapper > * {
flex: 1 100%;
}

.media-bar-main {
text-align: left;
/*background: deepskyblue;*/
max-height: 70px;
padding-left: 10px;
padding-right: 10px;
}

.media-bar-aside-left {
/*background: gold;*/
min-width: 40px;
max-width: 80px;
max-height: 70px;
}

.media-bar-aside-right {
/*background: hotpink;*/
min-width: 40px;
max-width: 80px;
max-height: 70px;
}

.media-bar-aside span {
font-size: 0.6em;
padding-left: 10px;
}

#media_bar_media_info {
    display: flex;  
    text-align: left;
    flex-direction: column;
}

#media_bar_like_dislike {
    display: flex;  
    text-align: center;
    flex-direction: column;
}

#media_bar_like_dislike i {
    font-size: 1.5em;
    padding-top: 5px;
    padding-bottom: 5px;
}

.media-bar-rect {
cursor: pointer;
width: 100%;
height: 150px;
}

/*
#media_player:hover .thing_to_overlay_stuff  { opacity:   1; -webkit-filter: brightness(1.1); filter: brightness(1.1); }
#media_player:hover .thing_for_overlay_stuff { opacity: 0.2; }
#media_player:hover .thing_for_overlay_stuff_metadata { opacity: 1.0; }
*/

/* INIT - NO VIDEO OVERLAY VERSION */
.thing_to_overlay_stuff  { opacity:   1; -webkit-filter: brightness(1.1); filter: brightness(1.1); }
.thing_for_overlay_stuff { opacity: 0.2; }
.thing_for_overlay_stuff_metadata { opacity: 1.0; }

#media_bar {
position: relative;
cursor: pointer;
width: 100%;
height: 100%;
}
.thing_for_overlay_stuff {
filter: blur(1px);
}
/* END - NO VIDEO OVERLAY VERSION */

.debug_rich_srt{
width: 100%;
padding:20px;
box-sizing:border-box;
}

#debug_rich_srt_result{
width:100%;
}

#debug_rich_srt_result,
#debug_rich_srt_result td {
border: 1px solid #000;
}