a{
    color:inherit;
    font-weight:bold;
    text-decoration:underline;
}

main{
    padding-top:50px;
    padding-left:50px;
}

#loadErrorNotice{
    margin-top:20px;
    display:none;
}

#splash{
    background: #8cffa1;
    background: -webkit-linear-gradient(150deg, rgba(140, 255, 161, 1) 0%, rgba(2, 235, 49, 1) 100%);
    background: -moz-linear-gradient(150deg, rgba(140, 255, 161, 1) 0%, rgba(2, 235, 49, 1) 100%);
    background: linear-gradient(150deg, rgba(140, 255, 161, 1) 0%, rgba(2, 235, 49, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#8CFFA1", endColorstr="#02EB31", GradientType=0);
    display:none;
    overflow:hidden;
}

#splashTable{
    display:table;
    width:100%;
    max-width:1800px;
    padding:10px;
    margin:auto;
    position: relative;
    z-index: 1;
}

.splashTableCell{
    display:table-cell;
    width:50%;
    vertical-align:middle;
    padding:20px;
}

#splashTable h2{
    font-size: 50px;
    margin: 0px 0px 15px 0px;
    padding:0px;
    color:#222;
    text-align:center;
}

#fanFavoriteBadges{
    text-align:center;
}

.fanFavoriteBadge{
    padding:3px;
    border-radius:999px;
    background:#222;
    color:#8cffa1;
    display:inline-block;
    font-weight:bold;
    position: relative;
    transform-style: preserve-3d;
    transform-origin: 50% 50%;
    perspective: 900px;
    will-change: transform;
    backface-visibility: hidden;
    cursor:pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    font: inherit;
    font-size:inherit;
    text-align:left;
}

.fanFavoriteBadge::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:999px;
    background:#444;                       /* solid back */
    transform: rotateX(180deg) translateZ(6px);
    backface-visibility: hidden;
    pointer-events:none;
}

.fanFavoriteBadge::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:999px;
    background:#111;                       /* edge/thickness */
    transform: translateZ(-6px);
    pointer-events:none;
}

.fanFavoriteBadge.is-spinning{
    animation: onAirSpinPhysics 1800ms forwards;
}

@keyframes onAirSpinPhysics{
    0%{
        transform: rotateX(0deg);
        animation-timing-function: cubic-bezier(.4,0,.6,.9); /* slow start */
    }
    35%{
        transform: rotateX(720deg); /* accelerate */
        animation-timing-function: cubic-bezier(.1,.7,.2,1);
    }
    75%{
        transform: rotateX(1080deg); /* strong decel */
        animation-timing-function: cubic-bezier(.3,0,.2,1);
    }
    85%{
        transform: rotateX(1110deg); /* wobble forward */
    }
    92%{
        transform: rotateX(1068deg); /* wobble back */
    }
    100%{
        transform: rotateX(1080deg); /* settle */
    }
}

@media (prefers-reduced-motion: reduce){
    .fanFavoriteBadge.is-spinning{
        animation:none;
    }
}

.fanFavoriteBadge .badgeIcon{
    height:40px;
    width:40px;
    border-radius:999px 5px 5px 999px;
    background:#8cffa1;
    color:#222;
    text-align:center;
    font-size:20px;
    line-height:100%;
}

.fanFavoriteBadge .fan-blades-icon{
    display:block;
    margin:auto;
}

#onAirBadge{
    text-decoration:none;
}

#onAirBadge span{
    text-decoration:underline;
}

.fanFavoriteBadge img{
    width:20px;
    -webkit-filter: invert(100%);
    filter: invert(100%);
    display: block;
    margin:auto;
}

.fanFavoriteBadge>.table>.cell:last-of-type{
    padding-left:10px;
    padding-right:10px;
    font-weight:bold;
}

#watchLivePseudoButton{
    display:none;
    padding:20px;
    font-size:20px;
    margin-top:15px;
    background:#fff;
    color:#222;
    border-radius:5px;
    text-decoration:none;
}

#watchLivePseudoButton:hover{
    text-decoration:underline;
    border:3px solid #fff;
    margin:12px -3px -3px -3px;
}

a.watchWithChatPseudoButton{
    background: #8cffa1;
    background: -webkit-linear-gradient(150deg, rgba(140, 255, 161, 1) 0%, rgba(2, 235, 49, 1) 100%);
    background: -moz-linear-gradient(150deg, rgba(140, 255, 161, 1) 0%, rgba(2, 235, 49, 1) 100%);
    background: linear-gradient(150deg, rgba(140, 255, 161, 1) 0%, rgba(2, 235, 49, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#8CFFA1", endColorstr="#02EB31", GradientType=0);
    color:#222;
}

a.watchWithChatPseudoButton:hover{
    background:#02EB31;
}

.vodBadge{
    background:#02EB31;
    color:#222;
}

#content{
    width: 700px;
    margin: 30px auto;
    box-sizing: border-box;
    background: #1a1a1a;
    max-width: 100%;
    border-radius: 10px;
    max-width:94%;
    position:relative;
    overflow:hidden;
    display:none;
}

#content>.fan-blades-icon{
    position:absolute;
    top:0px;
    right:0px;
    width:400px;
    height:400px;
    border:35px solid #111;
    margin:-200px -100px 0px 0px;
    background-image:url("/images/fan-blades-icon-111111.svg");
}

#frontLayerContent{
    padding: 20px;
    position:relative;
    z-index:1;
}

#frontLayerContent h2{
    margin: 0px;
    padding: 0px;
}

#frontLayerContent p{
    color:#999;
    font-weight: bold;
    margin: 6px 0px 20px 0px;
    font-size: 16px;
}

#noChannelsHereYetNotice{
    background:#222;
    padding:10px;
    border-radius:5px;
    font-style:italic;
}

#fanFavoritesBody{
    width:100%;
}

#fanFavoritesBody .row {
  text-decoration: none;
  cursor: pointer;
}

#fanFavoritesBody .row:hover .cell,
#fanFavoritesBody .row:has(a.rankedChannelName:focus-visible) .cell{
  background:rgba(255,255,255, 0.065);
}

#fanFavoritesBody .cell{
    font-weight:bold;
    padding:10px;
    border-bottom:1px solid #444;
}

#fanFavoritesBody .cell:nth-of-type(3){
    width:100%;
}

#fanFavoritesBody .cell:last-of-type{
    color:#fff;
}

#fanFavoritesBody .onAir .cell:last-of-type{
    color:#02EB31;
}


#fanFavoritesBody .row:last-of-type .cell{
    border-bottom:0px none transparent;
}

#fanFavoritesBody img{
    height:30px;
    border-radius:999px;
    background-color:#222;
    display:block;
}

#fanFavoritesBody .row:not(.onAir) img{
    filter: grayscale(100%); /* Current draft standard */
    -webkit-filter: grayscale(100%); /* New WebKit */
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%); 
    -o-filter: grayscale(100%); /* Not yet supported in Gecko, Opera or IE */ 
    filter: url(resources.svg#desaturate); /* Gecko */
    filter: gray; /* IE */
    -webkit-filter: grayscale(1); /* Old WebKit */
}

#fanFavoritesBody .onAir img{
    height:24px;
    border:3px solid #02EB31;
}

#fanFavoritesBody .row.onAir .rankedChannelName{
    color:#02EB31;
}

#fanFavoritesBody .row:not(.onAir) .rankedChannelName{
    color:#fff;
}

.rankedChannelName{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color:#ff615c;
}

#fanFavoritesBody .cell:last-of-type{
    text-align:right;
    white-space:nowrap;
}

#fanFavoritesBody .fan-blades-icon{
    zoom:0.7;
    margin-bottom:-6px;
    border-color:#fff;
    background-image:url("/images/fan-blades-icon-ffffff.svg");
}

#fanFavoritesBody .onAir .fan-blades-icon{
    border-color:#02EB31;
    background-image:url("/images/fan-blades-icon-02EB31.svg");
}

#loadingBeaconSection{
    height:150px;
}

#loadingBeaconContainer{
    margin-top:70px;
    height:150px;
    opacity:0.3;
}

@media screen and (max-width: 1200px) {
    .splashTableCell:first-of-type{
        width:30%;
    }
}

@media screen and (max-width: 900px) {
    #splashTable, .splashTableCell{
        display:block;
        width:100%;
        box-sizing:border-box;
        padding:0px;
    }
    
    #splashTable{
        padding:20px 10px 10px 10px;
    }
    
    .splashTableCell:first-of-type{
        width:100%;
    }
    
    #splashTable h2{
        font-size:30px;
        margin:20px 0px;
        padding:0px;
        text-align:center;
    }

    #activePlayerCardContainer{
        margin-top:20px;
    }
}

@media screen and (max-width: 500px) {
    main{
        padding-left:0px;
    }

    #frontLayerContent {
        padding-top:20px;
    }

    #fanFavoritesBody .cell{
        padding:4px;
        font-size:14px;
    }
}

@media screen and (max-width: 350px) {
    #fanFavoritesBody .cell{
        font-size:13px;
    }
}