.console-screen {
    /*position: fixed;
    top: 50px;
    left: 50px;
    right: 50px;
    bottom: 50px;
    z-index: 5001;
    background-color: white;
    border: solid 1px gray;
    box-shadow: 1px 8px 12px 2px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;*/
    /* box-shadow: 1px 1px 1px 2px rgba(150, 150, 150, .2); */
}
.console-screen .header {
    height: fit-content;
    background-color: lightgray;
    padding: 5px;
    width: auto;
    border-bottom: solid 1px gray;
    /* font-weight: bold; */
    display:none;
}
.console-screen .footer {
    height: 5px;
    background-color: gray;
    display:none;
}
.console-screen .body {
    position: absolute;
    top: 50px;
    left: 50px;
    right: 50px;
    bottom: 50px;
    flex:1;
    /*background-color: white;*/
    overflow: auto;
    
    position: absolute;
    top: 0px;
    left: 320px;
    right: 0px;
    bottom: 0px;
    flex: 1;
    /* background-color: white; */
    overflow: auto;
    border: solid 1px #333;
}
.console-screen .body .items .item {
    font-size: 1rem;
    padding: 5px;
    white-space: nowrap;
    border-bottom: solid 1px #333;
}
.console-screen .body .items .item:nth-child(odd) {
}
.console-screen .body .items .item.debug {
    color:green;
}
.console-screen .body .items .item.log {
    color:green;
}
.console-screen .body .items .item.info {
    color:green;
}
.console-screen .body .items .item.warning {
    color:orange;
}
.console-screen .body .items .item.error {
    color:red;
}
.console-screen .body .items .item.exception {
    color:red;
}

.current-info {
    color: red;
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 5000;
    /*font-size: 1rem;
    line-height: normal;*/
    user-select: none;
    pointer-events: none;
}
.current-info-row {
    display: flex;
    align-items: center;
    white-space: nowrap;
    user-select: none;
    font-size: 12px;
    font-family: sans-serif;
}
.current-info label {
   white-space: nowrap;
    user-select:none;
}
.current-info-row label {
    padding-left:5px;
    user-select:none;
}

.library-group-details .preview-container {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: .5s;
    opacity:0;
}
.library-group-details .preview-container.reveal {
    opacity:1;
    background-color: black;
}
.library-group-details .preview-control {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}
.library-group-details .preview-control .loader-io {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.library-group-details .video-container {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: black;
}
.library-group-details iframe {
    position: absolute;
    left: 10%;
    top: 0;
    right: 10%;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 80%;
    height: 100%;
    background-color: black;
}
.library-group-details video {
    position: absolute;
    height: 100%;
    width: 100%;
    /*object-fit: cover;*/
}

.library-group-details .image > .play-button {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    display: flex;
    cursor: default !important;
    transition: .3s;
    z-index:500;
}
/*.library-groups-selected-item.has-playback .library-group-details .image {
    cursor: pointer;
}*/
.library-group-details .image > button.play {
    font-size: 15vh;
    opacity: 0 !important;
    position: absolute;
    z-index: 500;
    padding: 0 !important;
    margin: 0 !important;
    height: fit-content;
    line-height: 0;
    text-shadow: -1px 1px 2px rgb(0 0 0);
    color: white;
    width: 65%;
    height: 100%;
    z-index: 0;
}
.no-shadow .library-group-details .image > button.play {
    text-shadow: none;
}
.library-groups-selected-item.has-playback.is-paused .library-group-details .image > button.play {
    opacity: .7 !important;
}
body:not(.mobile-device) .library-group-details .image > button.play:hover {
    opacity: .7 !important;
}
.library-group-details .image > button.play:active {
    opacity: 1 !important;
}
/*.library-groups-selected-item.has-playback.is-paused .library-group-details .image > button.play {
    opacity: .5 !important;
}
.library-groups-selected-item.has-playback.is-paused .library-group-details .image > button.play:hover {
    opacity: .7 !important;
}
.library-groups-selected-item.has-playback.is-paused .library-group-details .image > button.play:active {
    opacity: 1 !important;
}*/

.library-groups-selected-item .library-group-details .image > button.play {
    display: none;
}
.library-groups-selected-item.has-playback .library-group-details .image > button.play {
    display: none;
}
.library-groups-selected-item:not(.has-playback).has-preview .library-group-details .image > button.play {
    display: none;
    opacity: .0 !important;
}
.library-groups-selected-item.has-playback .library-group-details .image > .play-button {
    display: none;
}
.library-groups-selected-item:not(.has-playback).has-preview .library-group-details .image > .play-button {
    display: none;
}
body:not(.mobile-device) .library-groups-selected-item:not(.has-playback).has-preview:hover .library-group-details .image > button.play {
    opacity: .7 !important;
}
.library-groups-selected-item:not(.has-playback).has-preview:active .library-group-details .image > button.play {
    opacity: 1 !important;
}

.vail {
    position: fixed;
    bottom: 0;
    left: 0;
    top: 0;
    right: 0;
    background-color: rgba(0, 0, 0, .3);
    background-color: !important;
    opacity: 0 !important;
}
.vail.show {
    opacity: 1 !important;
}
.vail-container {
    width:100%;
    /*height:100%;*/
    display:flex;
    flex-direction:column;
    align-items:center;
}

#player-controls {
    position: absolute;
    bottom: 0;
    left: 0;
}
video {
    background-color:black;
   /* width:100%;
    height:100%;*/
    outline:0;
    border:none;
}

.player.view {
    position: fixed;
    background-color: black;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 600;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /*overflow: hidden;*/
}
body.playback .player.view.show {
    display: flex;
    position: absolute;
}

body.playback .player.view.playback {
    display: flex;
}
.player.playback {
    background-color: black;
}
.player.playback-attached.view {
    display: flex;
    position: absolute;
}
.fullscreen .player.view {
    position: fixed !important;
}

#chat {
    z-index: 499;
    z-index: 600;
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0rem;
    right: -30%;
    width: 30%;
    bottom: 0rem;
    transition: .3s ease-in-out;
    background-color: black;
    border-left: 1px solid #444;
    color: white;
    /*min-width: 350px;*/
}
#chat.show {
    right: 0;
}
.no-transition #chat 
{
    transition:none;
}
.webcam-mute-button {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    font-size: 2rem;
}
.chat-header {
    display: flex;
    width: 100%;
    min-height: 2rem;
}
.chat-header-seperator {
    flex: 1;
    text-align: left;
    justify-content: center;
    display: flex;
    align-items: flex-end;
    margin: 0rem 1rem;
    border-bottom: solid 1px #444;
    padding-bottom: 5px;
    padding-top: 1rem;
    margin-bottom: 1.25rem;
}
.chat-show-button {
    position: absolute;
    background-color: black;
    border: solid 1px #444;
    border-right-color: black;
    padding: .5rem .2rem;
    top: 14px;
    left: -17px;
}
.chat-camera-button {
    position: absolute;
    padding: .5rem;
    margin: 0px;
    height: fit-content;
    right: 1rem;
    top: .25rem;
    right: .5rem;
}
.chat-cameras {
    padding: 1rem;
    padding-top: 0;
    overflow: auto;
}
.chat-camera {
    border: 1px #333 solid;
    position:relative
}
.chat-camera video {
    width: 100%;
    height: 300px;
}
.chat-camera .loader-io {    
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#chat textarea {
    resize: none;
    background-color: transparent;
    border-color: dimgray !important;
}
#chat.has-items .chat-show-button i {
    color: #2196F3;
   /* font-weight:900 !important;*/
}
.chat-show-button:focus {
    border-color: #2196F3;
    border-right-color: black;
    /* font-weight:900 !important;*/
}
.chat-show-button i.showing {
    display:none;
}
#chat.show .chat-show-button i.showing {
    display: block;
    position: relative;
    left: 2px;
}
.chat-show-button i.hiding {
    display: block;
}
#chat.show .chat-show-button i.hiding {
    display: none;
}
#chat.show .chat-show-button {
    opacity: 1;
}
.chat-close-button {
    padding: 1rem 1.5rem;
    font-size: 1.4rem;
    display:none;
}
.chat-video-id {
}
.chat-items {
    flex: 1;
    width: 100%;
    overflow: auto;
}
.chat-item {
    padding-bottom: 1.5rem;
}
.chat-item-user-id {
    display:none;
}
.chat-item-user-disc {
    color: white;
    background: white;
    width: 5px;
    height: 5px;
    margin-right: .5rem;
    border-radius: 1rem;
    opacity: .7;
}
.chat-item-user-email {

}
.chat-item-ip-address {
    display:none;
    padding-left: .7rem;
    padding-right: .7rem;
}
.chat-item-info {
    display: flex;
    margin-left: 2rem;
    align-items: center;
}
.chat-item-date {
    margin-left: 2rem;
    margin-top: 5px;
}
.chat-item-text {
    background-color: #0d6efd;
    padding: 1rem;
    margin: .3rem 1.5rem;
    border-radius: 2rem;
}
.chat-item.is-local .chat-item-text {
    background-color: #1C1C22;
}
.chat-status-container {
    position: relative;
}
.chat-message {
    background-color: #1A1A1A;
    min-height: 10rem;
    width: 100%;
    height:100%;
    padding: 1rem;
}
.chat-message textarea {    
    background-color: transparent;
    width: 100%;
    height: 100%;
    outline:none;
}
.chat-status {
    background-color: black;
    position: absolute;
    top: -1.75rem;
    left: 0;
    right: 0;
    padding: .5rem 1rem;
    transition: .3s ease-in-out;
    z-index: -1;
}
/*#chat.connected .chat-status {
    top: 0;
}*/
#chat.disconnected .chat-status {
    top: -1.75rem;
    color: red;
}

.new-version-available {
    z-index: 9999;
    display: flex;
    position: absolute;
    right: 13rem;
    transition: .3s ease-in-out;
    top: -3rem;
    display:none;
}
.new-version-available.show {
    top: 0;
}
.new-version-available-contents {
    background-color: black;
    padding: .7rem 1rem;
    padding-top: .8rem;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border: solid 1px #444;
}
.new-version-available-message {
    margin-left: .25rem;
    margin-right: .5rem;
}
.new-version-available-update {
    color: cornflowerblue;
    font-weight: bold;
    margin-left: 1rem;
    margin-right: 1rem;
    opacity: .8;
    transition: .2s;
}
.no-transition .new-version-available-update {
    transition:none !important;
}
body:not(.mobile-device) .new-version-available-update:hover {
    color: #A1C2FA;
    opacity: 1;
}
.new-version-available-update:focus {
    color: #A1C2FA;
    opacity:1;
}
.new-version-available-close {
    font-weight: bold;
    margin-left: .5rem;
    margin-right: .5rem;
    opacity: .8;
    transition: .2s;
}
.no-transition .new-version-available-close {
    transition: none !important;
}
body:not(.mobile-device) .new-version-available-close:hover {
    opacity: 1;
}
.new-version-available-close:focus {
    opacity: 1;
}
#playerBufferInfo {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
/*#playerBufferInfo.show {
    display: flex;
}*/
.playerBufferInfo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: absolute;
    left: 0;
    padding-top: 1.5rem;
}
.player-buffering {
    width: 33%;
    height: 3px;
    border: 1px solid lightgray;
    border-color: rgba(255, 255, 255, .1);
    position: relative;
    top: -2%;
    margin: auto;
    z-index: 1000;
}
.player-buffering-indicator {
    background-image: linear-gradient(to right, gray, lightgray);
    height: 100%;
}

.progress-bar-ex {
    height: 4px;
    background-color: rgba(5, 114, 206, 0.1);
    width: 105%;
    overflow: hidden;
    position: relative;
    top: -1px;
    left: -1px;
    height: 6px !important;
    border: solid 1px rgba(255, 255, 255, .1);
}
.progress-bar-ex-complete {
    height: 100%;
    background-color: dodgerblue;
}

.progress-bar-ex-value {
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to right, gray, lightgray);
    opacity: .5;
    animation: indeterminateAnimation 1s infinite linear;
    transform-origin: 0% 50%;
}

@keyframes indeterminateAnimation {
    0% {
        transform: translateX(0) scaleX(0);
    }

    40% {
        transform: translateX(0) scaleX(0.4);
    }

    100% {
        transform: translateX(100%) scaleX(0.5);
    }
}


#playerDataInfo {
    opacity: 0;
    transition: .3s;
}
body.no-transition #playerDataInfo {
    transition: none !important;
}
#playerDataInfo.paused
{
    opacity: 1;
}
#player.audio #playerDataInfo
{
    opacity: 1 !important;
}
.metadata-item-header {
    display: flex;
    padding-left: 3.5rem;
    flex: 1;
    margin-top: 2rem;
}
#videoPlayback {
    text-align: center;
    display: flex;
    vertical-align: middle;
    align-items: center;
    justify-content: center;
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
}
#videoPlayback.fit-to-window
{
    width: 100%;
    height: 100%;
}

#videoPlayback.quarter {
    /*transform: scale(.25);*/
    transform: matrix(.25, 0, 0, .25, 0, 0);
}
#videoPlayback.half
{
    /*transform:scale(.5);*/
    transform: matrix(.5, 0, 0, .5, 0, 0);
}
#videoPlayback.original
{
    /*transform: scale(1);*/
    transform: matrix(1.0, 0, 0, 1.0, 0, 0);
}
#videoPlayback.larger
{
    /*transform: scale(1.5);*/
    transform: matrix(1.5, 0, 0, 1.5, 0, 0);
}
#videoPlayback.double
{
    /*transform: scale(2);*/
    transform: matrix(2.0, 0, 0, 2.0, 0, 0);
}
#videoPlayback.paused
{
    opacity:.7;
    opacity: 1 !important;
}
body.is-safari #videoPlayback {
    opacity: 1 !important;
}

#videoPlayback img {

}

#videoPlayback.audio {
    width: unset !important;
    height: unset !important;
   /* transform: scale(1) !important;*/
    transform: matrix(1.0, 0, 0, 1.0, 0, 0) !important;
    opacity: 1 !important;
}

.video-preview-container {
    /*display: none;*/
    /* border: solid 1px black;*/
    cursor: none;
    position: absolute;
    /*height: 120px;
    width: 160px;*/
    display: flex;
    transition: opacity .2s;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /*background-color: rgba(0,0,0,.3);*/
    padding: 0px;
    opacity: 0;
    z-index: -1;
    /* min-height: 120px;
    min-width: 160px;
    max-height: 120px;
    max-width: 160px;
    height: 120px;
    width: 160px;*/
    pointer-events: none;
    /*display: none;*/
    bottom: 93px;
    bottom: 28px;
    /* height: 120px;
    width: 160px;*/
    /* min-height: 33px;
    min-width: 95px;*/
    max-height: 320px;
    height: 240px;
    max-width: 320px;
    min-width: 320px;
}
.video-preview-container.trim-time {    
    bottom: 135px;
}
body.mobile-device .video-preview-container {
    display: none !important;
}
body.no-transition .video-preview-container {
    transition: none !important;
}
.video-preview-container.has-frame {
   /* min-height: 240px;*/
    /*min-width: 320px;*/
}
.video-preview-container.show {
    display: flex;
    z-index: 603;
    opacity:1;
}
.video-preview-position {
    /*background-color: black;*/
    padding: 3px;
    /*padding-top: 10px;*/
    color: white;
    position: absolute;
    bottom: 0px;
    bottom: -5px;
    text-shadow: 0px 0px 1px rgba(0, 0, 0);
    font-size: 1.4rem;
    order: 5;
}
.no-shadow .video-preview-position {
    text-shadow: none;
}
.preview-container.video .video-preview-position {
    position: absolute;
    z-index:5;
}
.video-preview {
    display: none;
    cursor: none;
    object-fit: contain;
    /* max-height: 240px; */
    max-width: 320px;
    min-width: 320px;
    border: solid 1px black;
}
.image-preview {
    display: none;
    cursor: none;
    /*max-height: 240px;*/
    width: 100%;
}

#videoPreview.video .video-preview {
    display: block;
}

#videoPreview.image .image-preview {
    display: block;
}

/*.video-preview-container.show .video-preview {
    display: block;
}*/

/* added to center volume in header */

#volume-bar-container {
    justify-content: center;
    display: flex;
   /* flex: 1;*/
}
.volume-bar {
    display: none;
    flex: 1;
    /*cursor: pointer;*/
    /*width:100px;*/
    -webkit-appearance: none;
    width: 100%;
    margin: 4.5px 0;
    padding: 0 3px;
    background-color: transparent;
    justify-content: center
}

.volume-bar.show {
    display: flex;
}
.mobile-view .volume-bar {
    display: none !important;
}

.volume-bar div {
    /*cursor: default;*/
}

.volume-bar-area {
    display: flex;
    /*height: 2px;
    flex: 1;*/
    cursor: pointer;
    max-width: 180px;
    min-width: 75px;
    height: 15px;
    width: 100%;
}

.volume-bar-area-on {
    display: flex;
    border: solid 1px gray;
    background-color: gray;
    height: 2px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    align-self: center;
    border-top: inset 1px darkgray;
    border-left: inset 1px darkgray;
    position: relative;
    left: 7px;
    cursor: pointer;
}

.volume-bar-area-off {
    display: flex;
    border: solid 1px darkgray;
    background-color: darkgray;
    height: 2px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    align-self: center;
    position: relative;
    border-top: inset 1px lightgray;
    border-right: inset 1px gray;
    flex: 1;
    cursor: pointer;
}

.volume-bar-area-ball {
    border: 0;
    margin: 0;
    padding: 0;
    outline: 0;
    display: flex;
    background-color: gainsboro;
    border-radius: 10px;
    align-self: center;
    z-index: 5;
    position: relative;
    left: 2px;
    cursor: pointer;
    border: solid 1px gray;
    width: 14px;
    height: 14px;
    min-width: 14px;
    min-height: 14px;
    left: 2px;
    cursor: pointer;
    transition:.2s;
}
body.no-transition .volume-bar-area-ball {
    transition: none !important;
}

body:not(.mobile-device) .volume-bar-area-ball:hover {
    background-color: white;
}
.volume-bar-area-ball:focus {
    background-color:white;
}

.volume-bar-area-ball:active {
    background-color:white;
    cursor:pointer;
}

.volume-bar-area-ball.resize {
    background-color:white;
    cursor:pointer;
}

.library-groups-selected-item .metadata-item-header-info-container {
    display:none;
    padding-top:1.3rem;
}
.library-groups-selected-item.new-release .metadata-item-header-info-container {
    display:block;
}

.metadata-item-header-info {
    padding-left: 10px;
    order: 1;
    padding-left: 0px;
    padding-bottom: 1.5rem;
}
#playerControls #playerDataSummary3 {
    padding-bottom: 5px;
}
#playerControls #playerDataSummary4 {
    padding-bottom: 5px;
    padding-top: 4px;
}
#playerControls #playerDataSummary5 {
    padding-bottom: 5px;
    padding-top: 2px;
}
#playerControls .metadata-item-header-info-description {
    padding-top: 1rem;
    font-size: 2.8vh;
    line-height: 2.2rem;
    /* font-size: 2.4vh;*/
    line-height: 2.7rem;
    padding: 0rem;
    transition: .1s;
    text-shadow: -1px 1px 2px rgba(0, 0, 0, .5);
    text-align: left;
    margin-right: 5rem;
    flex-direction: column;
    max-height: 500px;
    overflow: hidden;
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 10;
    -webkit-box-orient: vertical;
    display:none;
}
.no-shadow #playerControls .metadata-item-header-info-description {
    text-shadow: none;
}
#playerControls .metadata-item-header-info-description p {
    margin-bottom:0px !important;
}
#playerControls .metadata-item-header-info-description a {
    pointer-events:all;
    text-decoration:underline !important;
}
body.no-transition #playerControls .metadata-item-header-info-description {
    transition: none !important;
}
#playerControls .metadata-item-header-info a {
    color: white !important;
}
#playerControls .metadata-item-header-info {
    padding-top: .25rem;
    padding-left: 2.5rem !important;
    padding-right: 2.5rem !important;
    /*display:none !important;*/
/*    max-height: 500px;
    overflow: hidden;
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;*/
}
#playerControls .metadata-item-header-info .metadata-item-header-info-genre {
    padding-top: 0rem;
    line-height: normal;
}
#playerControls .metadata-item-image {
    /*display: none;*/
    padding-left: .5rem;
    /*opacity: .9;*/
    display: block;
    /*min-width:250px;*/
    /*padding-top: 8px;*/
}
.has-up-next-items #playerControls .metadata-item-image img {
    display:none;
}

.metadata-item-header-info-name {
    padding-bottom: 5px;
    font-size: 1em;
    font-weight: bold;
}

.metadata-item-header-info-description {
    font-size: .8em;
    /*text-align: justify;*/
    padding-top: 5px;
    padding-bottom: 10px;
    display: none;
    line-height:1.1rem;
}

.metadata-item-header-info-description.show {
    display: flex;
}

.metadata-item-header-info-data
{
    font-size: .8em;
    /* text-align: justify; */
    padding-top: 2px;
    padding-bottom: 6px;
    display: none;
    position: relative;
    left: -6px;
}

    .metadata-item-header-info-data.show
    {
        display: flex;
    }

.metadata-item-header-info-src {
    font-size: .8em;
    padding-top: 5px;
    color: blue;
    cursor: pointer;
}

.metadata-item-image {
    text-align: center;
}

#playerControls.video .metadata-item-image {
    height: 600px;
}
.metadata-item-image img {
    max-width: 300px;
    max-height: 300px;
    max-width: 480px;
    max-height: 480px;
    max-width: 600px;
    max-height: 600px;
    /*box-shadow: 0px 3px 6px 2px rgba(163, 157, 163, 0.1);*/
    transition:.3s;
}
body.no-transition .metadata-item-image img {
    transition: none !important;
}

.metadata-item-header-info-year-container {
    display: none;
    font-size: .90em;
    padding-top: 1px;
}

.metadata-item-header-info-year-container.show {
    display: flex;
}

.metadata-item-header-info-year {
    display: none;
}

.metadata-item-header-info-year.show {
    display: flex;
}

.metadata-item-header-info-seperator {
    height: 2px;
    border: 1px solid darkgray;
    border-radius: 100px;
    background-color: darkgray;
    width: 2px;
    align-self: center;
    margin-left: 7px;
    margin-right: 2px;
    position: relative;
    top: -1px;
    display: none;
}

.metadata-item-header-info-seperator.show {
    display: flex;
}

.metadata-item-header-info-duration {
    padding-left: 5px;
    display: none;
}

.metadata-item-header-info-duration.show {
    display: flex;
}

.metadata-item-header-info-rating-stars {
    padding-top: .5rem;
    padding-bottom: .5rem;
    display: flex;
}

.metadata-item-header-info-rating-star {
    padding-left: .1rem;
    padding-right: .1rem;
}

.metadata-item-header-info-rating-star-image {
    min-width: 13px;
    min-height: 13px;
    background-image: url(/site/images/rating_sm.png);
    background-position-x: 0px;
    background-position-y: 0px;
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 13px;
    cursor: pointer;
    transition: .3s;
}

body.no-transition .metadata-item-header-info-rating-star-image {
    transition: none !important;
}
body:not(.mobile-device) .metadata-item-header-info-rating-star-image:hover {
    background-image: url(/site/images/rating_sm_selected.png);
}

.metadata-item-header-info-rating-star-image.selected {
    background-image: url(/site/images/rating_sm_selected.png);
}

.metadata-item-header-info-rating-container {
    font-size: 1rem;
    padding-bottom: 0.8rem;
    text-align: left;
    display: flex;
}

.metadata-item-header-info-rating-count {
    display: flex;
}

.metadata-item-header-info-rating {
    padding-left: .5rem;
}

.metadata-item-header-info-artist {
    font-size: .8em;
    padding-bottom: 5px;
    display: none;
    font-size: 1.2rem;
    color: lightgray;
    line-height: 1.4;
}

.metadata-item-header-info-artist.show {
    display: flex;
}

.metadata-item-header-info-artists {
    font-size: .8em;
    padding-bottom: 5px;
    display: none;
    font-size: 1.2rem;
    color: lightgray;
    line-height: 1.4;
}

.metadata-item-header-info-artists.show {
    display: flex;
}

.metadata-item-header-info-trackArtists {
    font-size: .8em;
    padding-bottom: 5px;
    display: none;
    font-size: 1.2rem;
    color: lightgray;
    line-height: 1.4;
}

.metadata-item-header-info-trackArtists.show {
    display: flex;
}

.metadata-item-header-info-genre {
    font-size: .8em;
    padding-bottom: 5px;
    display: none;
    font-size: 1.2rem;
    color: lightgray;
    line-height: 1.4;
}

.metadata-item-header-info-genre.show {
    display: flex;
}

#playerControls .metadata-item-header-info .metadata-item-header-info-genre {
    display: none;
}
#playerControls.new-release .metadata-item-header-info .metadata-item-header-info-genre.show {
    display: flex;
}

.metadata-item-header-info-genre-label {
    padding-right: .5rem;
    width: 130px;
    text-align: right;
}

.metadata-item-header-info-genre-info {}

.metadata-item-header-info-category {
    font-size: .8em;
    padding-bottom: 5px;
    display: none;
    font-size: 1.2rem;
    color: lightgray;
    line-height: 1.4;
    line-height: normal;
}
/*
.metadata-item-header-info-category.show {
    display: flex;
}*/
.metadata-item-header-info-category-label {
    padding-right: .5rem;
    width: 130px;
    text-align: right;
}

.metadata-item-header-info-category-info {}

.metadata-item-header-info-cast {
    font-size: .8em;
    padding-bottom: 5px;
    display: none;
    font-size: 1.2rem;
    color: lightgray;
    line-height: 1.4;
    line-height: normal;
}

.metadata-item-header-info-cast.show {
    display: flex;
}

#playerControls .metadata-item-header-info .metadata-item-header-info-cast {
    display: none;
}
#playerControls.new-release .metadata-item-header-info .metadata-item-header-info-cast.show {
    display: flex;
}

.metadata-item-header-info-cast-label {
    padding-right: .5rem;
    width: 130px;
    text-align: right;
}

.metadata-item-header-info-cast-info {}

.metadata-item-header-info-director {
    font-size: .8em;
    padding-bottom: 5px;
    display: none;
    font-size: 1.2rem;
    color: lightgray;
    line-height: 1.4;
    line-height: normal;
}

.metadata-item-header-info-director.show {
    display: flex;
}

#playerControls .metadata-item-header-info .metadata-item-header-info-director {
    display: none;
}
#playerControls.new-release .metadata-item-header-info .metadata-item-header-info-director.show {
    display: flex;
}

.metadata-item-header-info-director-label {
    padding-right: .5rem;
    width: 130px;
    text-align: right;
}

.metadata-item-header-info-director-info {}

.metadata-item-header-info-writer {
    font-size: .8em;
    padding-bottom: 5px;
    display: none;
    font-size: 1.2rem;
    color: lightgray;
    line-height: 1.4;
    line-height: normal;
}

.metadata-item-header-info-writer.show {
    display: flex;
}

#playerControls .metadata-item-header-info .metadata-item-header-info-writer {
    display: none;
}
#playerControls.new-release .metadata-item-header-info .metadata-item-header-info-writer.show {
    display: flex;
}

.metadata-item-header-info-writer-label {
    padding-right: .5rem;
    width: 130px;
    text-align: right;
}

.metadata-item-header-info-writer-info {}

.metadata-item-header-info-composer {
    font-size: .8em;
    padding-bottom: 5px;
    display: none;
    font-size: 1.2rem;
    color: lightgray;
    line-height: 1.2;
    line-height: normal;
}

.metadata-item-header-info-composer.show {
    display: flex;
}

#playerControls .metadata-item-header-info .metadata-item-header-info-composer {
    display: none;
}
#playerControls.new-release .metadata-item-header-info .metadata-item-header-info-composer.show {
    display: flex;
}

.metadata-item-header-info-composer-label {
    padding-right: .5rem;
    width: 130px;
    text-align: right;
}

.metadata-item-header-info-composer-info {}

#playerData {
    display: flex;
    flex-direction: column;
    flex: 1;
    /*line-height: 1;*/
    text-align: left;
}
.player-data-header {
    color: #fff;
    margin: 30px;
    margin-bottom: 0;
    display: flex;
    z-index: 50;
    padding-right: 150px;
    margin-top: 30px;
    margin-left: 18px;
    flex-direction:column;
}
.player-data-summary {
    flex: 1;
    margin: .2rem;
    text-shadow: 0px 0px 1px rgba(0, 0, 0);
    margin-top: .5rem;
    margin-left: 1.25rem;
    transition: .3s;
}
.no-shadow .player-data-summary {
    text-shadow: none;
}
.player-data-channel {
    display: flex;
    align-items: flex-end;
    margin-bottom: 5px;
    position: absolute;
    right: 40px;
    bottom: 40px;
    align-items: center;
    direction: rtl;
    opacity:.7;
}
#playerDataChannelName {
    font-size: .9rem;
    text-shadow: 0px 0px 1px rgba(0, 0, 0);
    margin-right: 1rem;
}
.no-shadow #playerDataChannelName {
    text-shadow: none;
}
#playerDataChannelImage {
    max-height: 3rem;
}
#playerDataSummary0 {
    font-size: .9rem;
    margin-bottom: 5px;
    text-shadow: 0px 0px 1px rgba(0, 0, 0);
    /* line-height: 2.4rem;*/
    transition: .3s;
}
.no-shadow #playerDataSummary0 {
    text-shadow: none;
}
#playerDataSummary1 {
    font-size: 2rem;
    margin-bottom: 4px;
    text-shadow: 0px 0px 1px rgba(0, 0, 0);
   /* line-height: 2.4rem;*/
   transition:.3s;
}
.no-shadow #playerDataSummary1 {
    text-shadow: none;
}
#playerDataSummary2 {
    font-size: 1.1rem;
    margin-bottom: 7px;
    margin-left: 2px;
    text-shadow: 0px 0px 1px rgba(0, 0, 0);
    line-height: inherit;
    transition: .3s;
}
.no-shadow #playerDataSummary2 {
    text-shadow: none;
}
#playerDataSummary3 {
    font-size: .9rem;
    margin-left: 2px;
    text-shadow: 0px 0px 1px rgba(0, 0, 0);
    line-height: inherit;
    transition: .3s;
}
.no-shadow #playerDataSummary3 {
    text-shadow: none;
}
#playerDataSummary4 {
    font-size: .9rem;
    margin-left: 2px;
    text-shadow: 0px 0px 1px rgba(0, 0, 0);
    line-height: inherit;
    transition: .3s;
}
.no-shadow #playerDataSummary4 {
    text-shadow: none;
}
#playerDataSummary5 {
    font-size: .9rem;
    margin-left: 2px;
    text-shadow: 0px 0px 1px rgba(0, 0, 0);
    line-height: inherit;
    transition: .3s;
}
.no-shadow #playerDataSummary5 {
    text-shadow: none;
}
.player-data-controls
{
    display:flex;
    align-items:flex-start;
}

#playerDataControls {
    transition: .3s ease-in-out;
    position: absolute;
    top: 25px;
    right: 15px;
    display: flex;
    flex-direction: column;
    z-index: 1000;
  /*  right: 32px;*/
}
body.no-transition #playerDataControls {
    transition: none !important;
}
.playerDataControls-top {
    display:flex;
    align-items:center;
}
/*body.mobile-device .playerDataControls-top {
    display:none;
}*/
#playerDataControls.disable-navigation .playerDataControls-top {
    display:none;
}
.playerDataControls-bottom {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
#playerDataMute {
    cursor: pointer;
    color: #fff;
    font-size: 1.2rem;
    border: 0;
    margin: 1rem;
    padding: 5px;
    margin-right: 5px;
    margin-left: 25px;
    margin-right: 0;
    margin-left: 0;
    background-color: transparent;
    transition: .2s;
    opacity: .7;
    opacity: 1;
    transform: matrix(1.0, 0, 0, 1.0, 0, 0);
    margin-right: 1rem;
}
body:not(.mobile-device) #playerDataMute:hover {
    opacity: 1;
    /* transform: scale(1.2);*/
}
body:not(.mobile-device) #playerDataMute:focus-visible {
    opacity: 1;
   /* transform: scale(1.2);*/
}
body:not(.mobile-device) #playerDataMute:active {
    opacity: .8;
   /* transform: scale(1.1);*/
   /* transition: .1s;*/
}
body:not(.mobile-device) #playerDataMute:hover {
   /* transform: scale(1.2);*/
   /* transform: matrix(1.2, 0, 0, 1.2, 0, 0);*/
}
body:not(.mobile-device) #playerDataMute:focus-visible {
    /*transform: scale(1.2);*/
   /* transform: matrix(1.2, 0, 0, 1.2, 0, 0);*/
}
body:not(.mobile-device) #playerDataMute:active {
    /*transform: scale(1.1);*/
    /*transform: matrix(1.2, 0, 0, 1.2, 0, 0);*/
}
body.is-safari #playerDataMute {
    display: none !important;
}
#playerDataMute i {
    position: relative;
    min-width:47px;
   /* top:.5px;*/
}
/*.muted #playerDataMute i {
    left: 2px;
}*/
body.no-transition #playerDataMute {
    transition: none !important;
    transform: none !important;
}
#playerDataMute:focus {
    /*outline: #0d6efd auto 1px;*/
    /*background-color: rgba(255,255,255,.2);*/
}
.no-player-hilite #playerDataMute:focus {
    background-color: unset;
}

/*.paused #playerDataControls {
    opacity: .7 !important;
}*/
/*.muted #playerDataControls {
    opacity: 1 !important;
}*/
#playerDataClose {
    cursor: pointer;
    color: #fff;
    font-size: 1.4rem;
    border: 0;
    margin: 1rem;
    padding: 10px 15px;
    /* margin-left: .5rem; */
    margin-right: 23px;
    background-color: transparent;
    transition: .3s;
    opacity: .7;
    opacity: 1;
    transform: matrix(1.0, 0, 0, 1.0, 0, 0);
    text-shadow: 0px 0px 1px rgba(0, 0, 0);
    margin-right: 15px;
    margin-top: 5px;
}
.is-safari #playerDataClose {
    text-shadow: 0px 0px 1px rgba(0, 0, 0);
}
.no-shadow #playerDataClose {
    text-shadow: none;
}
body:not(.mobile-device) #playerDataClose:hover {
  /*  transform: scale(1.4);*/
    /*transform: matrix(1.2, 0, 0, 1.2, 0, 0);*/
    opacity: 1;
    /* top: 2px;*/
}
body:not(.mobile-device) #playerDataClose:focus-visible {
   /* transform: scale(1.4);*/
    /*transform: matrix(1.2, 0, 0, 1.2, 0, 0);*/
    opacity: 1;
    /*top: 2px;*/
}
body:not(.mobile-device) #playerDataClose:active {
    /*transform: scale(1.1);*/
   /* transform: matrix(1.2, 0, 0, 1.2, 0, 0);*/
    opacity: .8;
    /*transition: .1s;*/
}
/*body.is-safari #playerDataClose {
    transform: matrix(1.0, 0, 0, 1.0, 0, 0) !important;
}*/
body.no-transition #playerDataClose {
    transition: none !important;
    transform: none !important;
}
#playerDataClose:focus {
    /* outline: #0d6efd auto 1px;*/
    /*background-color: rgba(255,255,255,.2);*/
}
.no-player-hilite #playerDataClose:focus {
    background-color: unset;
}

#playerDataBack {
    cursor: pointer;
    color: #fff;
    font-size: 1.2rem;
    border: 0;
    margin: 1rem;
    padding: 11px 16px;
    /* margin-left: .5rem; */
    margin-right: 2rem;
    background-color: transparent;
    transition: .3s;
    opacity: .7;
    transform: matrix(1.0, 0, 0, 1.0, 0, 0);
    text-shadow: 0px 0px 1px rgba(0, 0, 0);
}
.is-safari #playerDataBack {
    text-shadow: 0px 0px 1px rgba(0, 0, 0);
}
.no-shadow #playerDataBack {
    text-shadow: none;
}
body:not(.mobile-device) #playerDataBack:hover {
    /* transform: scale(1.4);*/
    opacity: 1;
}
#playerDataBack:focus {
    /* transform: scale(1.4);*/
    opacity: 1;
}
#playerDataBack:active {
    /*transform: scale(1.1);*/
    opacity: .8;
    transition: .1s;
}
body:not(.mobile-device) #playerDataBack:hover {
    /*transform: scale(1.4);*/
    transform: matrix(1.4, 0, 0, 1.4, 0, 0);
}
#playerDataBack:focus {
    /*transform: scale(1.4);*/
    transform: matrix(1.4, 0, 0, 1.4, 0, 0);
}
#playerDataBack:active {
  /*  transform: scale(1.1);*/
    transform: matrix(1.1, 0, 0, 1.1, 0, 0);
}
body.no-transition #playerDataBack {
    transition: none !important;
    transform: none !important;
}
#playerDataBack:focus {
    /*  outline: #0d6efd auto 1px;*/
    background-color: rgba(255,255,255,.2);
}
.no-player-hilite #playerDataBack:focus {
    background-color: unset;
}
#playerDataBack i {
    position: relative;
    left: -2px;
}

.player-data-footer {
    color: #fff;
    align-items: center;
    display: flex;
    text-align: right;
    margin: 20px;
    font-size: .9rem;
}
.player-data-upNext {
    flex: 1;
    position: relative;
    top: 9px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.player-data-upNext-buttonContainer {
    display:flex;
    align-items:center;
}
#playerDataUpNext {
    align-items: center;
    display: none;
    flex: 1;
    position: absolute;
    right: 39px;
    bottom: 105px;
    width: 100%;
}
#playerDataUpNext.show {
    display: flex;
}
/*#player.playing #playerDataUpNext {
    display: none !important;
}*/
#playerDataUpNextLabel {
    padding-bottom: 3px;
    padding-top: 3px;
    /* font-weight: bold;*/
    /* font-family: "muli-bold", sans-serif;*/
    text-shadow: 0px 0px 1px rgba(0, 0, 0);
    padding-bottom: 2px;
    padding-top: 2px;
    margin-bottom: 0px;
    /* font-weight: bold; */
    font-size: 2rem;
    /*letter-spacing: .1rem;*/
    position: relative;
    left: 0px;
    font-size: 1.4rem;
    margin-right: .25rem;
    padding-bottom: 0;
}
.is-safari #playerDataUpNextLabel {
    text-shadow: 0px 0px 1px rgba(0, 0, 0);
}
.no-shadow #playerDataUpNextLabel {
    text-shadow: none;
}
#playerDataUpNext1 {
    font-size: 1.2rem;
    padding-bottom: 2px;
    padding-top: 2px;
    text-shadow: 0px 0px 1px rgba(0, 0, 0);
    padding-bottom: 0px;
    padding-top: 4px;
    margin-bottom: 0px;
    font-size: 1.2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 90%;
    line-height:inherit;
}
.no-shadow #playerDataUpNext1 {
    text-shadow: none;
}
#playerDataUpNext2 {
    padding-bottom: 2px;
    padding-top: 2px;
    font-size: 1rem;
    text-shadow: 0px 0px 1px rgba(0, 0, 0);
    padding-bottom: 3px;
    padding-top: 4px;
    margin-bottom: 0px;
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 90%;
    line-height: inherit;
}
.no-shadow #playerDataUpNext2 {
    text-shadow: none;
}
#playerDataUpNext3 {
    padding-bottom: 2px;
    padding-top: 2px;
    font-size: .9rem;
    text-shadow: 0px 0px 1px rgba(0, 0, 0);
    padding-bottom: 3px;
    padding-top: 3px;
    margin-bottom: 0px;
    font-size: .9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 90%;
    line-height: inherit;
}
.no-shadow #playerDataUpNext3 {
    text-shadow: none;
}
#playerDataUpNext4 {
    padding-bottom: 2px;
    padding-top: 2px;
    font-size: .9rem;
    text-shadow: 0px 0px 1px rgba(0, 0, 0);
    padding-bottom: 2px;
    padding-top: 3px;
    font-size: .9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 90%;
    line-height: inherit;
}
.no-shadow #playerDataUpNext4 {
    text-shadow: none;
}
#playerDataUpNextButton {
    border: 0;
    padding: 0;
    margin: 0;
    outline: 0;
    background-color: transparent;
    margin-left: 10px;
    font-size: 2rem;
    padding: 7px;
    line-height: inherit;
    display: flex;
    align-items: center;
    margin-right: -.5rem;
    margin-left: 0;
}
#playerDataUpNextButton i {
    transition:.3s;
    text-shadow: 0px 0px 1px rgba(0, 0, 0);
}
.is-safari #playerDataUpNextButton i {
    text-shadow: -1px 1px 2px rgba(0, 0, 0, .5);
}
.no-shadow #playerDataUpNextButton i {
    text-shadow: none;
}
body.no-transition #playerDataUpNextButton i {
    transition: none !important;
}
#playerDataUpNextButton:focus {
   /* transform: scale(1.2);*/
   opacity:1;
}
body:not(.mobile-device) #playerDataUpNextButton:hover {
    /*  transform: scale(1.2);*/
    opacity: 1;
}
    #playerDataUpNextButton:active {
        transition: .1s;
        opacity: .8;
    }
    #playerDataUpNextButton:active i {
        /*   transform: scale(1.1);*/
        transform: matrix(1.1, 0, 0, 1.1, 0, 0);
    }
    #playerDataUpNextButton:focus i {
        /*transform: scale(1.2);*/
        transform: matrix(1.2, 0, 0, 1.2, 0, 0);
    }
body:not(.mobile-device) #playerDataUpNextButton:hover i {
    /*transform: scale(1.2);*/
    transform: matrix(1.2, 0, 0, 1.2, 0, 0);
}
    #playerDataUpNextButton:active i {
        /*transform: scale(1.1);*/
        transform: matrix(1.1, 0, 0, 1.1, 0, 0);
    }
body.no-transition #playerDataUpNextButton {
    transition: none !important;
    transform: none !important;
}
#playerDataUpNextButton:focus {
    /*outline: #0d6efd auto 1px;*/
    /*background-color: rgba(255,255,255,.2);*/
}
.no-player-hilite #playerDataUpNextButton:focus {
    background-color: unset;
}

.player-data-upNext-button {
    margin-top: 1rem;
    margin-left: 1rem;
    font-size: 2rem;
}
.player-data-upNext-button i {
    cursor: pointer !important;
    transition: .2s;
    color: #fff;
}
body.no-transition .player-data-upNext-button i {
    transition: none !important;
}
body:not(.mobile-device) .player-data-upNext-button i:hover {
    opacity: .8;
}
.player-data-upNext-button i:active
{
    opacity: .6;
}


.player-data-image {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    opacity: 0;
    transition: .3s ease-in-out;
    pointer-events: none;
/*    display: none !important;*/
}
body.no-transition .player-data-image {
    transition: none !important;
}
#player.audio .player-data-image {
    opacity: 1;
}
#player.paused .player-data-image {
    opacity: 1;
}
#player.stopped .player-data-image {
    opacity: 1;
}
#player.image .player-data-image {
    display:none;
}
#player.needs-subscription .player-data-image {
    display: none !important;
}
#player:not(.audio).playing .player-data-image,
#player.loading .player-data-image,
#player.is-loading .player-data-image,
#player:not(.audio).is-buffering .player-data-image {
    display: none !important;
}


#playerLogo {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    opacity: 0;
    transition: .2s ease-in-out;
    pointer-events:none;
    z-index:1001;
}
body.no-transition #playerLogo {
    transition: none !important;
}
#player.playing #playerLogo {
    opacity:1;
}
#player.showing-controls #playerLogo {
    opacity: 0;
}
.player.show-ad #playerLogo {
    opacity: 1 !important;
}


/*#videoPoster .videoPosterImage {
    position: absolute;
    left: -1000px;
    top: -1000px;
    right: -1000px;
    bottom: -1000px;
    filter: blur(50px);
    transform: scale(1.2);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0% 0%;
    opacity: 1;
}*/

#playerControls {
    display: flex;
    flex-direction: column;
    flex: 1;
    /*background-color: #171717;
    background-color: rgba(23, 23, 23, .3);
    background-image: linear-gradient(rgba(23, 23, 23, .3), rgba(255,255,255,.2));
        */
    transition: .3s ease-in-out;
    top: 0;
    bottom: 0;
    width: 100%;
}
body.no-transition #playerControls {
    transition: none !important;
}
.paused #playerControls {
    opacity: 1 !important;
}
#player-upnext-container-vail {
    position: fixed;
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    z-index: 5000;
    /*transition: .3s;*/
    background-color: transparent;
    /* opacity: 0;
    pointer-events: none;*/
    display: none;
}
/*body.no-transition #player-upnext-container-vail {
    transition: none !important;
}*/
#player.showing-upnext #player-upnext-container-vail {
    display:block;
}
#player-upnext-container {
    position: fixed;
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 5001;
    transition: .3s;
    bottom: -300px;
    color: white;
}
body.no-transition #player-upnext-container {
    transition: none !important;
}
#player.showing-upnext #player-upnext-container {
    bottom: 0px;
}
#player-upnext-container .player-upnext-header {
    
    display: flex;
    align-items: center;
    justify-content: center;
}
#player-upnext-container .player-upnext-header-item-container {
    
    background-color: rgba(16, 16, 16, .9);
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    font-size: 1.2rem;
}
#player-upnext-container .player-upnext-header-item {
    width: 100%;
    padding: 0px 15px;
    transform: matrix(1.0, 0, 0, 1.0, 0, 0);
}
#player-upnext-container button.player-upnext-header-item {
    transition:.3s;
}
body:not(.mobile-device) #player-upnext-container button.player-upnext-header-item:hover {
    opacity: 1;
   /* transform: scale(1.2);*/
    transform: matrix(1.2, 0, 0, 1.2, 0, 0);
}
#player-upnext-container button.player-upnext-header-item:focus {
    opacity: 1;
   /* transform: scale(1.2);*/
    transform: matrix(1.2, 0, 0, 1.2, 0, 0);
    color: deepskyblue;
}
#player-upnext-container button.player-upnext-header-item:active {
    opacity: .7;
   /* transform: scale(1.1);*/
    transform: matrix(1.1, 0, 0, 1.1, 0, 0);
    transition: none !important;
}
#player-upnext-container button.player-upnext-header-item.selected {
    opacity: 1 !important;
   /* transform: scale(1.2);*/
    transform: matrix(1.2, 0, 0, 1.2, 0, 0);
    color: deepskyblue;
}
body.no-transition #player-upnext-container button.player-upnext-header-item {
    transition: none !important;
    transform: none !important;
}

#player-upnext-container .player-upnext-items {
    display: flex;
    min-height: 250px;
    /*align-items: center;*/
    /*  justify-content: center;*/
    background-color: rgba(16, 16, 16, .9);
    overflow: hidden;
    padding: 1rem 2rem;
}
#player-upnext-container .player-upnext-item-container {
    padding: 0px;
    max-width: 350px;
    margin: 15px;
    margin-right: 0px;
    display: none;
    min-width: 255px;
    height: 155px;
    padding-right: 15px;
}
#player-upnext-container .player-upnext-item-container.has-sibling {
    border-right: solid 1px rgba(256, 256, 256, .1);
}
#player-upnext-container .player-upnext-item-container.show {  
    display:flex;
}
#player-upnext-container .player-upnext-item {
    text-align: left;
    /*width: 100%;*/
    white-space: nowrap;
    text-overflow: ellipsis;
    /*overflow: hidden;
    justify-content: normal;
    display: flex;*/
    flex-direction: column;
    transform: none !important;
    min-width: 25%;
    margin-right: 0rem;
}
#player-upnext-container .player-upnext-item > button > i {
    display:none;
}
#player-upnext-container .player-upnext-item > button > label {
    font-size: 1.2rem;
    font-weight: bold;
}
/*#player-upnext-container .player-upnext-item:focus {
    opacity: 1 !important;
    color: deepskyblue;
}
#player-upnext-container .player-upnext-item.selected {
    opacity: 1 !important;
    color: deepskyblue;
}
#player-upnext-container .player-upnext-item:active {
    opacity:.8 !important;
    transition: none !important;
}*/
#player-upnext-container .player-upnext-item-details {
    display:flex;
}
#player-upnext-container .player-upnext-item-line1 {
    font-size: 1.2rem;
    margin-bottom: 4px;
    width: 100%;
    white-space: normal;
    text-overflow: ellipsis;
    overflow: hidden;
    max-height: 50px;
    max-width: 20rem;
}
#player-upnext-container .player-upnext-item-line2 {
    font-size: 1rem;
    margin-top: 1px;
    margin-bottom: 3px;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 20rem;
}
#player-upnext-container .player-upnext-item-line3 {
    font-size: .9rem;
    margin-top: 2px;
    margin-bottom: 3px;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 20rem;
}
#player-upnext-container .player-upnext-item-line4 {
    font-size: .8rem;
    margin-top: 4px;
    margin-bottom: 3px;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 20rem;
}
#player-upnext-container .player-upnext-item-line5 {
    font-size: .8rem;
    margin-top: 5px;
    margin-bottom: 2px;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #FFAB15 !important;
    font-weight: bold;
    max-width: 20rem;
    min-height: 20px;
}
#player-controls-container {
    padding-top: 5px;
    z-index: 2;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}
#player.showing-upnext #player-controls-container {
    display:none !important;
}
#player-controls-container.light-hilite {
    background-color: rgba(0,0,0,.1);
}
#player-controls-container.medium-hilite {
    background-color: rgba(0,0,0,.2);
}
#player-controls-container.strong-hilite {
    background-color: rgba(0,0,0,.3);
}
#player-controls-container.heavy-hilite {
    background-color: rgba(0,0,0,.5);
}
#player.live.event #position-container {
    pointer-events: none !important;
}
#playerControls #position-container {
    display: flex;
    /*padding-top: 2px;
    padding-bottom: 3px;*/
    /*max-height: 20px;*/
    /*position: absolute;*/
    /*left: 0;
    right: 0;
    bottom: 65px;*/
    align-items: center;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-top: 5px;
}
#player.no-time #position-container {
    pointer-events:none;
    cursor:default;
}
#player.no-time #position-level-selector {
    opacity:.5
}
#playerControls #position-completed {
    font-size: .7rem;
    color: white;
   /* width: 50px;*/
    min-width: 50px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: right;
    top: 1px;
    /*direction:rtl;*/
    z-index: 1;
    white-space: nowrap;
    flex: .01;
    position: relative;
   /* top: -4px;*/
}
#player.no-time #position-completed {
    opacity: .5;
}
#playerControls #position-uncompleted {
    font-size: .7rem;
    color: white;
   /* width: 50px;*/
    min-width: 50px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 1px;
    z-index: 1;
    text-align: left;
    white-space: nowrap;
    flex: .01;
    position: relative;
    /*top: -4px;*/
}
#player.no-time #position-uncompleted {
    opacity: .5;
}
#playerControls #position-level {
    display: flex;
    flex: 1;
    min-height: 1px;
    max-height: 15px;
    position: relative;
    cursor: pointer;
     /*margin-top: 2px; 
     margin-bottom: 5px; 
    top: -1px;*/
    align-items:center;
}
#player-controls-container #position-event-info {
    display: none;
    color: #FFAB15;
    font-size: 1.2rem;
    letter-spacing: 1px;
    margin-left: 3.3rem;
    margin-bottom: 0.3rem;
}
body:not(.is-safari) #player.live #player-controls-container #position-event-info,
body:not(.is-safari) #player.event #player-controls-container #position-event-info {
    display: flex;
}
#playerControls #position-level-buffer {
    position: absolute;
    /*left: 0;
    top: 7px;
    bottom: 1px;
    width: 0%;*/
    height: 4px;
    /*background-color: rgba(0, 105, 217,.7);
    background-color: rgba(0, 102, 153,.2);*/
    background-color: rgba(255,255,255,.4);
    transition: .3s;
    border-radius: 5px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    overflow: hidden;
}
body.no-transition #playerControls #position-level-buffer {
    transition: none !important;
}
#playerControls #position-level.focused #position-level-buffer {
    /*top: 5px;*/
    transform: scaleY(2);
    /*background-color: rgba(17,119, 170, .8);*/
}
body.no-transition #playerControls #position-level.focused #position-level-buffer {
    transform: none !important;
}
#playerControls #position-level-on {
    background-color: rgba(255,255,255,.5);
    /*position: relative;
    top: 7px;*/
    height: 4px;
    min-height: 4px;
    width: 0px;
    transition: .3s background-color;
    border-radius: 5px;
    overflow: hidden;
    opacity: 1;
}
#playerControls #position-level-on.show {
    /*opacity:1;*/
}
body .no-transition #playerControls #position-level-on {
    transition: none !important;
}
#player.live #playerControls #position-level-on,
#player.event #playerControls #position-level-on {
    background-color: #FFAB15;
    box-shadow: 1px 1px 7px 1px rgb(255 171 21 / 50%);
}
#playerControls #position-level.focused #position-level-on {
    background-color: rgba(17,119, 170, 1);
    transform: scaleY(2);
}
body.no-transition #playerControls #position-level.focused #position-level-on {
    transform: none !important;
}
#playerControls #position-level-selector {
    border: 0;
    margin: 0;
    padding: 0;
    outline: 0;
    background-color: gainsboro;
    display: flex;
   /* min-width: 4px;
    min-height: 12px;
    max-width: 4px;
    max-height: 12px;*/
    width: 4px;
    height: 12px;
    /*position: relative;*/
    /*top: 3px;*/
    z-index: 10;
    border: none;
    opacity: 1;
    cursor: pointer;
    transition: .2s;
    border-radius: 5px;
}
#playerControls #position-level-active {
    flex: 1;
    background-color: #FFAB15;
    display: flex;
    /* background-color: rgba(255,255,255,.5); */
    height: 4px;
    /* width: 0px; */
    transition: background-color .3s, transform .3s;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
#playerControls #position-container.disabled {
    pointer-events:none;
    opacity:.5;
}
#playerControls #position-container.disabled #position-level-active {
    background-color: rgba(255,255,255,.3);
}
body.no-transition #playerControls #position-level-selector {
    transition: none !important;
}
#player.live #playerControls #position-level-selector,
#player.event #playerControls #position-level-selector {
    background-color: rgb(255 171 21);
}
#playerControls #position-level-selector {
    /* min-width: 6px !important;
    max-width: 6px !important;*/
    width: 6px !important;
   /* transform: matrix(1.0, 0, 0, 1.0, 0, 0);*/
}
body:not(.mobile-device) #playerControls #position-level-selector:focus-visible {
    background-color: white !important;
    opacity: 1;
    /*transform: scale(1.4);*/
    /*transform: matrix(1.2, 0, 0, 1.2, 0, 0);*/
}
body:not(.mobile-device) #playerControls #position-level-selector:hover {
    background-color: white;
    opacity: 1;
   /* transform: matrix(1.2, 0, 0, 1.2, 0, 0);*/
}
#playerControls #position-level-selector.hide {
    display:none;
}

body:not(.mobile-device) #playerControls #position-level-selector:active {
    /* opacity: .7;*/
    background-color: whitesmoke !important;
    /*border: solid 1px white;*/
    /*transform: matrix(1.2, 0, 0, 1.2, 0, 0);*/
}

#playerControls #position-level-selector.select {
    opacity: 1;
    background-color: white !important;
    /*border: solid 1px white;*/
}

#playerControls #position-level-off {
    display: flex;
    flex: 1;
    background-color: rgba(255,255,255,.5);
    /*position: relative;
    top: 7px;*/
    height: 4px;
    min-height: 4px;
    width: 0px;
    transition: .3s background-color;
    border-radius: 5px;
    overflow: hidden;
    opacity: 1;
}

#playerControls.trim-time #position-level-on {
    background-color: rgba(255,255,255,.3) !important;
}
#playerControls.trim-time #position-level-off {
    width:0%;
    flex:unset;
}
#playerControls #position-level.focused #position-level-off {
    transform: scaleY(2);
}
body.no-transition #playerControls #position-level-off {
    transition: none !important;
    transform: none !important;
}

#playerControls #controls-container {
    display: flex;
    height: 60px;
    padding-top: 0px;
    padding-bottom: 10px;
    /*position: absolute;*/
    bottom: 0px;
    left: 0;
    right: 0;
    padding-bottom: 5px !important;
    /*background-color: rgba(0,0,0,.3);*/
}
#playerControls #volume-bar-container {
    align-items: center;
    display: flex;
    /* flex: .85;*/
    width: 100%;
    margin-left: 0rem;
    margin-right: 0rem;
}
#playerControls.video #volume-bar-container {
    /*flex: .76;
    flex: .79;*/
}
/*body.mobile-device .volume-bar {
    display: none !important;
}*/

body.is-safari #playerControls #volume-bar-container {
    display: none !important;
}

#playerControls .volume-bar {
    display: flex;
    flex: 1;
    /*cursor: pointer;*/
    /*width:100px;*/
    -webkit-appearance: none;
    margin: 4.5px 0;
    padding: 0 3px;
    background-color: transparent;
    align-items: center;
    margin-left: 0px;
    margin-right: 20px;
    position: relative;
    top: -2px;
}

#playerControls .volume-bar.show {
    display:flex;
}
#playerControls .volume-bar div {
    /*cursor:default;*/
}

#playerControls #player-control-buttons {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    /*NOTE: center to video*/
    margin-right: 8px;
}
body.is-safari #playerControls #player-control-buttons {
    display: none !important;
}


#playerControls #player-control-buttons .control-button {
    border: 0;
    padding: 5px;
    margin: 0;
    background-color: transparent;
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    margin-right: 10px;
    transition: .2s;
    cursor: pointer;
    opacity: .7;
    opacity: 1;
    /*transform: scale(1.2);*/
    transform: matrix(1.2, 0, 0, 1.2, 0, 0);
    line-height: 0px;
}
#player.no-time #player-control-buttons .control-button.previous-chapter {
    opacity: .5;
    cursor: default;
}
#player.no-time #player-control-buttons .control-button.next-chapter {
    opacity: .5;
    cursor: default;
}
body:not(.mobile-device) #playerControls #player-control-buttons .control-button:hover {
    opacity: 1;
}
body:not(.mobile-device) #playerControls #player-control-buttons .control-button:hover {
    /*transform: matrix(1.4, 0, 0, 1.4, 0, 0);*/
}
/*body:not(.mobile-device) #playerControls #player-control-buttons .control-button:focus {
    opacity: 1;
    transform: scale(1.6);
}*/
body:not(.mobile-device) #playerControls #player-control-buttons .control-button:focus {
    /*transform: scale(1.6);*/
    /*transform: matrix(1.6, 0, 0, 1.6, 0, 0);*/
}
body:not(.mobile-device) #playerControls #player-control-buttons .control-button:active {
    opacity: .8;
    /*transform: matrix(1.2, 0, 0, 1.2, 0, 0);*/
}

#playerControls #player-control-buttons .control-button:last-of-type {
    margin-right:0;
}
body.no-transition #playerControls #player-control-buttons .control-button {
    transition: none !important;
    transform: none !important;
}
#player #playerControls #player-control-buttons .control-button:focus {
    /*outline: #0d6efd auto 1px;*/
    /*background-color: rgba(255,255,255,.2);*/
}
/*#player.no-player-hilite #playerControls #player-control-buttons .control-button:focus {
    background-color: unset;*/
    /*transform: scale(1.5);*/
    /*transform: matrix(1.5, 0, 0, 1.5, 0, 0);
}*/

#playerControls #player-control-buttons .control-button .shape-fill {
    fill: #fff;
    stroke: #fff;
}

#playerControls #player-control-buttons .previous .svg-icon {
    height: 14px;
    display: inline-block;
    vertical-align: middle;
}

#playerControls #player-control-buttons .previous:active .shape-fill {
    fill: #D9D9D9;
    stroke: #D9D9D9;
}

#playerControls #player-control-buttons .previous-chapter .svg-icon {
    height: 14px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    left: 3px;
}

#playerControls #player-control-buttons .previous-chapter:active .shape-fill {
    fill: #D9D9D9;
    stroke: #D9D9D9;
}

#playerControls #player-control-buttons .play-pause-toggle {
    padding: 7px 8px;
    position: relative;
    top: 1px;
}
/*#player.playing #playerControls #player-control-buttons .play-pause-toggle {
    padding: 10px 8px;
}*/
/*#player.no-time #playerControls #player-control-buttons .play-pause-toggle {
    opacity:.5;
    cursor:default;
}*/

#playerControls #player-control-buttons .play-pause-toggle .play {
    display: block;
    position: relative;
    left: 0px;
    top: 0px;
}
#playerControls #player-control-buttons .play-pause-toggle .play.hide {
    display: none;
}


#playerControls #player-control-buttons .play-pause-toggle .pause {
    display: none;
    position: relative;
    left: 0px;
    top: 0px;
    /*transform: scale(1.2)*/;
    transform: matrix(1.0, 0, 0, 1.0, 0, 0);
    /*padding:3px;*/
}
#playerControls #player-control-buttons .play-pause-toggle .pause.show {
    display: block;
}

    #playerControls #player-control-buttons .play-pause-toggle .svg-icon {
        width: 25px;
    }

#playerControls #player-control-buttons .play-pause-toggle:active .shape-fill {
    fill: #D9D9D9;
    stroke: #D9D9D9;
}

/* #player-control-buttons .play-pause-toggle .play {
    margin-left: 3px;
    margin-top: 3px;
}

#player-control-buttons .play-pause-toggle .pause {
    margin-top: 3px;
} */

#playerControls #player-control-buttons .next-chapter .svg-icon {
    height: 14px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    left: -4px;
}

#playerControls #player-control-buttons .next-chapter:active .shape-fill {
    fill: #D9D9D9;
    stroke: #D9D9D9;
}

#playerControls #player-control-buttons .next .svg-icon {
    height: 14px;
    display: inline-block;
    vertical-align: middle;
}

#playerControls #player-control-buttons .next:active .shape-fill {
    fill: #D9D9D9;
    stroke: #D9D9D9;
}

#playerControls #player-control-buttons .previous {
    padding: 10px;
}
#playerControls #player-control-buttons .previous-chapter {
    padding: 10px;
}
#playerControls #player-control-buttons .next-chapter {
    padding: 10px;
}
#playerControls #player-control-buttons .next {
    padding: 10px;
}

#playerControls #player-options-container {
    display: flex;
    /* justify-content: flex-end; */
    flex: 1;
    align-items: center;
    margin-left: 11px;
    margin-right: 1rem;
}

#player-options-menu {
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    background-color: #101215;
    border: solid 1px #2e3138;
    /* opacity: 1 !important; */
    left: 29px;
    padding: 1rem .5rem;
    font-size: 1.2rem;
    color: white;
    bottom: 65px;
    /* border-radius: 5px;*/
    /*  width: 127px;*/
    opacity: 1;
    padding: 0;
    z-index: 5031;
    display: none;
    /*transition:.3s;*/
}
body.no-transition #player-options-menu {
    transition: none !important;
}
#player-options-menu.show {
    display: flex;
}
#playerOptionFullscreen i {
    /*position: relative;
    right: -2px;
    top: 2px;*/
    font-size: 1.2rem;
}
#playerSelectOptions i {
    /*position: relative;
    right: -2px;
    top: 2px;*/
    font-size: 1.2rem;
    text-shadow: 0px 0px 1px rgba(0, 0, 0);
}
.is-safari #playerSelectOptions i {
    text-shadow: 0px 0px 1px rgba(0, 0, 0);
}
.no-shadow #playerSelectOptions i {
    text-shadow: none;
}
#playerSelectOptionsCurtain {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: black;
    opacity: 0;
    transition: .3s;
    z-index: 5030;
}
body.no-transition #playerSelectOptionsCurtain {
    transition: none !important;
}
#playerSelectOptionsCurtain.show {
    display: block;
}
/*
body:not(.mobile-device) #playerControls #playerSelectSubtitles:hover
{
    opacity:1;
}

#playerControls #playerSelectSubtitles:focus
{
    opacity:1;
}

#playerControls #playerSelectSubtitles:active
{
    opacity:.8;
}*/

#player-options-menu button {
    padding: 1rem;
    flex: 1;
    display: flex;
    width: 100%;
    margin: 0;
    border: 0;
    background-color: #101215;
    cursor: pointer;
    transition: .2s;
    opacity: .7;
    /*padding-left:5px;*/
    display: flex;
    align-items: center;
    justify-content: flex-start;
    outline:none;
}
body.no-transition #player-options-menu button {
    transition: none !important;
}
/*#player-options-menu button:first-of-type {
    padding-top:1.5rem;
}
#player-options-menu button:last-of-type {
    padding-bottom:1.5rem;
}*/
body:not(.mobile-device) #player-options-menu button:hover {
    background-color: #2e3138;
    background-color: rgba(96, 99, 96, .2);
    opacity: 1;
}
#player-options-menu button:focus {
    opacity:1;
    background-color: #2e3138;
}
#player-options-menu button:active {
    opacity:1;
    background-color: #2e3138;
}
#player-options-menu button.selected {
    background-color:#2e3138;
    opacity:1;
}
#player-options-menu button label {
    flex: 1;
    text-align: left;
    text-transform: uppercase;
    font-size: 1rem;
    cursor:inherit;
}
#player-options-menu button label.no-transform {
    text-transform:none !important;
}
#player-options-menu button i {
    margin-right: .7rem;
    width:25px;
}
#player-options-menu button i.fa-check {
    height: 19px;
    margin-right: 0rem;
    margin-left: .7rem;
}
#player-options-menu button i.fa-check:before {
 opacity:0;
}
#player-options-menu button.checked i.fa-check:before {
 opacity:1;
}
#player-options-menu button i.option-arrow {
    margin-right: 0rem;
    margin-left: 2rem;
    position: relative;
    left: -5px;
    width: 0;
    opacity:0;
}
#player-options-menu button.disabled {
    opacity: .5;
}

body:not(.mobile-device) #player-options-menu button:hover {
    opacity: 1;
}
#player-options-menu button:focus {
    opacity: 1;    
}
#player-options-menu button.selected {
    opacity: 1 !important;
}
#player-options-menu button.selected i.option-arrow {
    opacity: 1;    
}
body:not(.mobile-device) #player-options-menu button:hover i.option-arrow {
    opacity: 1;
}
#player-options-menu button:focus i.option-arrow {
    opacity: 1;    
}
#player-options-menu button i.pip {
    transform: rotateZ( 90deg );  
}
#playerSelectSubtitleTimeDelay {
    margin-left: 1.4rem;
    font-size: .9rem;
    margin-right: .5rem;
    position: relative;
    left: .7rem;
    text-align: center;
}

.player-options-menu {
    /*position: absolute;
    left: 178px;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    background-color: #101215;
    border: solid 1px #2e3138;*/
    /* opacity: 1 !important; */
    /* right: -13px; */
    /*padding: 1rem .5rem;
    font-size: 1.2rem;
    color: white;*/
    /* border-radius: 5px; */
    /* width: 127px; */
    /*padding: 0;*/
    /* opacity:0;*/
    /*transition: none !important;*/
    display: flex;
    flex-direction: column;
    align-items: baseline;
    border-top: solid 1px rgba(100, 100, 100, .7);
    margin-top: .5rem;
    padding-top: .75rem;
    padding-left: 3px;
}
body.no-transition .player-options-menu {
    transition: none !important;
}
.player-options-menu > button > i {
    margin-left:.5rem;
    display:none;
}
.player-options-menu > button.checked > i {
    display: inline-block;
}
.player-options-menu > button {
    margin-bottom: .5rem;
    font-size: 1rem;
}
/*.player-options-menu.show {*/
   /* opacity: 1;*/
    /*display:block;
}*/
.player-options-menu-filter {
    bottom: 103px;
}
.player-options-menu-subtitles {
    bottom: 51px;
    bottom: .5px;
}
.player-options-menu-picture {
    bottom: -1px;
}
.player-options-menu-audio {
    bottom: 154px;
}
.player-options-menu-video {
    bottom: 103px;
}
.player-options-menu-divider {
    flex: 1;
    height: 1px;
    background-color: #2e3138;
    margin-left: .7rem;
    margin-right: .7rem;
    margin-top: .1rem;
    margin-bottom: .1rem;
    display:none;
}

/*#player-options-menu {
    left: 0;
    bottom: 0;
    height: 15rem;
    right: 0;
    background-color: rgba(20, 20, 20, .7);
    border-left: none;
    border-bottom: none;
    border-right: none;
}
#player-options-menu button {
    flex: unset;
    background-color: transparent;
    width: unset;
}
.player-options-menu.show {
    bottom: unset;
    position: absolute;
    left: 3rem;
    top: 3rem;
    background: none;
    border: none;
}*/


#playerSelectOptions {
    margin-right: .5rem;
    margin-left: 1.4rem;
    position: relative;
    /* top: 1px; */
    padding: 8px;
    transition: .2s;
    opacity: .7;
    opacity: 1;
    font-size: 1.4rem;
    /* padding-top: 6px; */
    /* padding-right: 6px;*/
    /* display: flex;
    align-items: center;
    justify-content: center;*/
    line-height: 0px;
    transform: matrix(1.0, 0, 0, 1.0, 0, 0);
    margin-left: 1.25rem;
    margin-right: 1.25rem;
}
body.is-safari:not(.mobile-device) #playerSelectOptions {
    font-size: 18px;
}
body:not(.mobile-device) #playerSelectOptions:hover {
    opacity: 1;
}
body:not(.mobile-device) #playerSelectOptions:focus-visible {
    opacity: 1;
    /*transform: scale(1.2);*/
}
body:not(.mobile-device) #playerSelectOptions:active {
    opacity: .8;
}
/*#playerSelectOptions.selected {
    opacity: 1 !important;
    transform: scale(1.2);
}*/
body:not(.mobile-device) #playerSelectOptions:hover {
    /* transform: scale(1.2);*/
    /*transform: matrix(1.2, 0, 0, 1.2, 0, 0);*/
}
body:not(.mobile-device) #playerSelectOptions:focus-visible {
    /*transform: scale(1.2);*/
    /*transform: matrix(1.2, 0, 0, 1.2, 0, 0);*/
}
body:not(.mobile-device) #playerSelectOptions:active {
    /*transform: scale(1.1);*/
    /*transform: matrix(1.2, 0, 0, 1.2, 0, 0);*/
}
/*#playerSelectOptions.selected {
    transform: scale(1.2);
    transform: matrix(1.2, 0, 0, 1.2, 0, 0);
}*/
/*body.is-safari #playerSelectOptions {
     transform: scale(1.2);
    transform: matrix(1.0, 0, 0, 1.0, 0, 0) !important;
}*/
body.no-transition #playerSelectOptions {
    transition: none !important;
    transform: none !important;
}
/*body.mobile-device #playerSelectOptions {
    margin-right: 0;
}*/
#playerSelectOptions:focus {
    /*outline: #0d6efd auto 1px;*/
    /*background-color: rgba(255,255,255,.2);*/
}
.no-player-hilite #playerSelectOptions:focus {
   /* background-color: unset;*/
}

#playerControls #player-options-container .speech-subtitles {
    width: 30px;
    height: 20px;
}

#playerControls #player-options-container .speech-subtitles .speech-bubble
{
    fill: none;
    stroke: #fff;
}
.mobile-view #playerControls #player-options-container .speech-subtitles .speech-bubble {
    display: none !important;
}


#playerControls #player-options-container .speech-subtitles .subtitle
{
    stroke: #fff;
}

#playerControls #player-options-container .speech-subtitles:active .shape-fill
{
    stroke: #D9D9D9;
}

#playerControls #player-view-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    transition: .3s;
    margin-left: 1rem;
    margin-right: 15px;
    margin-left: 0rem;
    margin-left: 1rem;
   /* margin-right: 48px;*/
}

body.no-transition #playerControls #player-view-container {
    transition: none !important;
}

#playerControls #playlistItems {
    margin-right: 1rem;
    position: relative;
    top: 0px;
    padding: 8px;
    transition: .3s;
    opacity: .7;
    font-size: 1.4rem;
    line-height: 0px;
    transform: matrix(1.0, 0, 0, 1.0, 0, 0);
    text-shadow: 0px 0px 1px rgba(0, 0, 0);
}
.is-safari #playerControls #playlistItems {
    text-shadow: 0px 0px 1px rgba(0, 0, 0);
}
.no-shadow #playerControls #playlistItems {
    text-shadow: none;
}
.disable-upNextQueue #playerControls #playlistItems {
    display:none !important;
}
#playerControls #playlistItems:focus {
    opacity: 1;
    /*transform: scale(1.2);*/
    /*top:0px;*/
}
body:not(.mobile-device) #playerControls #playlistItems:hover {
    /*transform: scale(1.2);*/
    transform: matrix(1.2, 0, 0, 1.2, 0, 0);
}
#playerControls #playlistItems:focus {
    /*transform: scale(1.2);*/
    transform: matrix(1.2, 0, 0, 1.2, 0, 0);
}
#playerControls #playlistItems:active {
    /*transform: scale(1.1);*/
    transform: matrix(1.1, 0, 0, 1.1, 0, 0);
}
#playerControls #playlistItems:focus {
    /*transform: scale(1.2);*/
    transform: matrix(1.2, 0, 0, 1.2, 0, 0);
}
body:not(.mobile-device) #playerControls #playlistItems:hover {
    opacity: 1;
}
#playerControls #playlistItems:focus {
    opacity:1;
}
#playerControls #playlistItems:active {
    opacity:.8;
}
body.no-transition #playerControls #playlistItems {
    transition: none !important;
    transform:none !important;
}
body.mobile-device #playerControls #playlistItems {
    margin-right:0;
}
#playerControls #playlistItems:focus {
    /*outline: #0d6efd auto 1px;*/
    /*background-color: rgba(255,255,255,.2);*/
}
.no-player-hilite #playerControls #playlistItems:focus {
    background-color: unset;
}

#playerControls #playlistItems i {
    position:relative;
    top:1px;
}

.icons button {
    padding: 0;
    margin: 0;
    border: 0;
    outline: 0;
    background-color: transparent;
    cursor: pointer;
    /*margin-right: 1.5rem;*/
}
.icons {
    display: flex;
    align-items: center;
}
#playerMode {
    opacity: .7;
    cursor: pointer;
    margin-right: .8rem;
    margin-left: 1.8rem;
    padding: 5px;
    position: relative;
    top: 1px;
    transition: .2s;
}
body.no-transition #playerMode {
    transition: none !important;
}
/*#player #playerMode:focus {*/
    /*outline: #0d6efd auto 1px;*/
    /*background-color: rgba(255,255,255,.2);
}*/
#playerMode.selected {
    opacity: 1;
}
#playerMode:active {
    opacity: .8;
}
#playerControls:not(video) #playerMode {
    margin-left: 5px;
    margin-right: 20px;
}

.icons .repeat {
    height: 12px;
    width: auto;
    fill: #FFF;
    position: relative;
    top: 1px;
}
/*.icons .repeat.selected .shape-fill {
    fill: #0069D9;
}*/
.icons .repeat.single .shape-fill {
    fill: red !important;
}

#playerShuffle {
    opacity: .7;
    cursor: pointer;
    padding: 5px;
    position: relative;
    top: 1px;
    transition:.2s;
}
body.no-transition #playerShuffle {
    transition: none !important;
}
/*#player #playerShuffle:focus {*/
    /*outline: #0d6efd auto 1px;*/
    /*background-color: rgba(255,255,255,.2);
}*/
#playerShuffle.selected {
    opacity: 1;
}
#playerShuffle:active {
    opacity: .8;
}
.icons .shuffle {
    height: 11px;
    width: auto;
    fill: #FFF;
}
.icons .shuffle.selected .shape-fill {
    fill: #0069D9;
}

#player-view-container .icons {
    /*width: 101px;*/
    margin-left: 30px;
    margin-left: 2px;
    margin-left: 0px;
    justify-content: flex-end;
}

body.is-safari #player-view-container .icons {
    display: none !important;
}

#playerOptionPictureInPicture {
    display: none;
    padding: 5px;
    margin: 0;
    border: 0;
    background-color: transparent;
    cursor: pointer;
    transition: .3s;
    opacity: .7;
    margin-right: 30px;
    margin-left: 25px;
    position: relative;
    top: 0px;
    font-size: 1.2rem;
}
body.no-transition #playerOptionPictureInPicture {
    transition: none !important;
}
body.mobile-device #player #playerOptionPictureInPicture {
    display:none;
}
    /*#player #playerOptionPictureInPicture:focus {*/
        /*outline: #0d6efd auto 1px;*/
        /*background-color: rgba(255,255,255,.2);
    }*/
body:not(.mobile-device) #playerOptionPictureInPicture:hover {
    opacity: 1;
}
#playerOptionPictureInPicture:focus {
    opacity:1;    
}
#playerOptionPictureInPicture:active {
    opacity:.7;    
}
#playerOptionPictureInPicture > i {

    color: white;
    transform: rotateZ(90deg);
}
#playerControls.video #playerOptionPictureInPicture {
    display:block;
}


#playerOptionCast {
    display: block;
    padding: 5px;
    margin: 0;
    border: 0;
    background-color: transparent;
    cursor: pointer;
    transition: .3s;
    opacity: .7;
    margin-right: 15px;
    margin-left: 15px;
    position: relative;
    top: 1px;
    font-size: 1.3rem;
}
body.no-transition #playerOptionCast {
    transition: none !important;
}
body.mobile-device #player #playerOptionCast {
    display:none;
}
/*#player #playerOptionCast:focus {*/
    /*outline: #0d6efd auto 1px;*/
    /*background-color: rgba(255,255,255,.2);
}*/
body:not(.mobile-device) #playerOptionCast:hover {
    opacity: 1;
}
#playerOptionCast:focus {
    opacity:1;    
}
#playerOptionCast:active {
    opacity:.7;    
}
#playerOptionCast > i {

    color: white;
}
#playerControls.video #playerOptionCast {
    display:block;
}

#playoptions-messagebox-container {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1001;
    opacity: 0;
    transition: .2s;
}

.playoptions-messagebox-vail {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: black;
    opacity: .3;
}

body.no-transition #playoptions-messagebox-container {
    transition: none;
}

#playoptions-messagebox-container.show {
    opacity: 1;
}


.playoptions-messagebox {
    border: solid 1px #444444;
    background-color: white;
    background-color: #1C1C22 !important;
    /* background: linear-gradient(#12121A, #121216) !important;*/
    background-color: inherit !important;
    -webkit-box-shadow: 7px 7px 7px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 7px 7px 7px 0px rgba(0,0,0,0.1);
    box-shadow: 7px 7px 7px 0px rgba(0,0,0,.1);
    position: relative;
    top: -3rem;
    padding: .5rem 1rem;
    background-color: black !important;
    border-radius: 6px;
}

    .playoptions-messagebox .playoptions-messagebox-header {
        display: none;
        align-items: center;
    }

        .playoptions-messagebox .playoptions-messagebox-header span {
            font-size: .9rem;
            flex: 1;
            margin-left: .5rem;
            margin-right: .5rem;
        }

        .playoptions-messagebox .playoptions-messagebox-header button {
            border: 0;
            padding: 0;
            margin: 0;
            outline: 0;
            background-color: transparent;
            cursor: pointer;
            opacity: .7;
            transition: .3s;
        }

body.no-transition .playoptions-messagebox .playoptions-messagebox-header button {
    transition: none;
}

.playoptions-messagebox .playoptions-messagebox-header i {
    font-size: 1rem;
    padding: .5rem;
    margin-left: .3rem;
    margin-right: .3rem;
    margin-top: .1rem;
}

body:not(.mobile-device) .playoptions-messagebox .playoptions-messagebox-header button:hover {
    opacity: 1;
}

.playoptions-messagebox .playoptions-messagebox-header button:focus {
    opacity: 1;
}

.playoptions-messagebox .playoptions-messagebox-header button:active {
    opacity: 8;
}

.playoptions-messagebox .playoptions-messagebox-body {
    text-align: center;
    padding: 1rem;
    padding-bottom: .7rem;
    font-size: 1rem;
    text-transform: uppercase;
    color: #FFAB15;
    color: white;
}

.playoptions-messagebox .playoptions-messagebox-message {
}

.playoptions-messagebox .playoptions-messagebox-footer {
    display: flex;
    flex-direction: column;
    padding-bottom: .5rem;
}

.playoptions-messagebox button {
    border: 0;
    outline: 0;
    margin: 0;
    background-color: transparent;
    color: white;
    font-size: 1rem;
    /* opacity: .7; */
    cursor: pointer;
    /* padding: 0rem .5rem; */
    /* margin-right: 1rem; */
    /* padding-top: .3rem; */
    /* margin-right: .3rem; */
    transition: .3s;
    background-color: #323232;
    /* padding-bottom: .5rem; */
    /* margin-left: 5px; */
    /* margin-right: 5px; */
    color: #FDFEFE;
    padding: .5rem 1rem;
    margin-left: .3rem;
    white-space: nowrap;
    cursor: pointer;
    margin: .1rem .5rem;
}
.playoptions-messagebox button {
    border-radius: 3px;
}

body.no-transition .playoptions-messagebox button {
    transition: none;
}

.playoptions-messagebox button:last-of-type {
    margin-top: .5rem;
}

.playoptions-messagebox button i {
    margin-right: 5px;
}

body:not(.mobile-device) .playoptions-messagebox button:hover {
    background-color: #444444;
}

.playoptions-messagebox button:focus {
    background-color: #0d6efd;
}

.playoptions-messagebox button:active {
    background-color: #0d6efd;
}


#player #playerControls .share-button {
    padding: 8px;
    margin: 0;
    border: 0;
    background-color: transparent;
    cursor: pointer;
    margin-right: 1.25rem;
    margin-left: 1.25rem;
    margin-top: 0px;
    transition: .2s;
    opacity: .7;
    opacity: 1;
    font-size: 1.2rem;
    position: relative;
    top: 0px;
    line-height: 0px;
    transform: matrix(1.0, 0, 0, 1.0, 0, 0);
    pointer-events: all;
}
#player #playerControls .share-button i {
    transform: rotateZ(270deg);
}
body.is-safari:not(.mobile-device) #player #playerControls .share-button {
    margin-right: -2px;
}
body:not(.mobile-device) #player #playerControls .share-button:hover {
    opacity: 1;
}
body:not(.mobile-device) #player #playerControls .share-button:focus-visible {
    opacity: 1;
}
body:not(.mobile-device) #player #playerControls .share-button:active {
    opacity: .8;
}
body:not(.mobile-device) #player #playerControls .share-button:hover {
    /*transform: scale(1.2)*/
    /*transform: matrix(1.2, 0, 0, 1.2, 0, 0);*/
}
body:not(.mobile-device) #player #playerControls .share-button:focus-visible {
    /*   transform:scale(1.2)*/
    /*transform: matrix(1.2, 0, 0, 1.2, 0, 0);*/
}
body:not(.mobile-device) #player #playerControls .share-button:active {
    /*    transform: scale(1.1)*/
 /*   transform: matrix(1.2, 0, 0, 1.2, 0, 0);*/
}
/*body:not(.mobile-device) #player #playerControls .share-button.selected {*/
    /*  transform: scale(1.2)*/
    /*transform: matrix(1.2, 0, 0, 1.2, 0, 0);
}*/
.fullscreen #player #playerControls .share-button .restore,
.maximized #player #playerControls .share-button .restore {
    display: none;
}
#player #playerControls .share-button .fullscreen {
    display: none;
}
.fullscreen #player #playerControls .share-button .fullscreen,
.maximized #player #playerControls .share-button .fullscreen {
    display: block;
}
body.no-transition #player #playerControls .share-button {
    transition: none !important;
    transform: none !important;
}
/*body.mobile-device #player #playerControls .share-button {
    display:none;
}*/
#player #playerControls .share-button:focus {
    /*outline: #0d6efd auto 1px;*/
    /*background-color: rgba(255,255,255,.2);*/
}
.no-player-hilite #player #playerControls .share-button:focus {
    background-color: unset;
}


#player #playerControls .details-button {
    padding: 8px;
    margin: 0;
    border: 0;
    background-color: transparent;
    cursor: pointer;
    margin-right: 1.25rem;
    margin-left: 1.25rem;
    margin-top: 0px;
    transition: .2s;
    opacity: .7;
    opacity: 1;
    font-size: 1.2rem;
    position: relative;
    top: 0px;
    line-height: 0px;
    transform: matrix(1.0, 0, 0, 1.0, 0, 0);
    pointer-events: all;
}
body:not(.mobile-device) #player #playerControls .details-button:hover {
    opacity: 1;
}
body:not(.mobile-device) #player #playerControls .details-button:focus {
    opacity: 1;
}
body:not(.mobile-device) #player #playerControls .details-button:active {
    opacity: .8;
}
body.is-safari:not(.mobile-device) #player #playerControls .share-button {
    margin-right: 3px;
    margin-left: 0px;
    font-size: 18px;
}
body.is-safari:not(.mobile-device) #player #playerControls .details-button {
    margin-right:9px;
    margin-left:0px;
    font-size:18px;
}
body:not(.mobile-device) #player #playerControls .details-button:hover {
    /*  transform: scale(1.2)*/
   /* transform: matrix(1.2, 0, 0, 1.2, 0, 0);*/
}
body:not(.mobile-device) #player #playerControls .details-button:focus {
    /*   transform:scale(1.2)*/
   /* transform: matrix(1.2, 0, 0, 1.2, 0, 0);*/
}
body:not(.mobile-device) #player #playerControls .details-button:active {
    /* transform: scale(1.1)*/
    /*transform: matrix(1.2, 0, 0, 1.2, 0, 0);*/
}
/*#player #playerControls .details-button.selected {*/
 /*   transform: scale(1.2)*/
    /*transform: matrix(1.2, 0, 0, 1.2, 0, 0);
}
body.is-safari #player #playerControls .details-button {
    transform: matrix(1.0, 0, 0, 1.0, 0, 0) !important;
}
body.is-safari #player #playerControls .share-button {
    transform: matrix(1.0, 0, 0, 1.0, 0, 0) !important;
}*/
.fullscreen #player #playerControls .details-button .restore,
.maximized #player #playerControls .details-button .restore {
    display: none;
}
#player #playerControls .details-button .fullscreen {
    display: none;
}
.fullscreen #player #playerControls .details-button .fullscreen,
.maximized #player #playerControls .details-button .fullscreen {
    display: block;
}
body.no-transition #player #playerControls .details-button {
    transition: none !important;
    transform: none !important;
}
/*body.mobile-device #player #playerControls .details-button {
    display:none;
}*/
#player #playerControls .details-button:focus {
    /*outline: #0d6efd auto 1px;*/
    /*background-color: rgba(255,255,255,.2);*/
}
.no-player-hilite #player #playerControls .details-button:focus {
    background-color: unset;
}

#playerOptionFullscreen {
    padding: 8px;
    margin: 0;
    border: 0;
    background-color: transparent;
    cursor: pointer;
    margin-right: 1.25rem;
    margin-left: 1.25rem;
    margin-top: 0px;
    transition: .2s;
    opacity: .7;
    opacity: 1;
    font-size: 1.4rem;
    position: relative;
    top: 0px;
    line-height: 0px;
    transform: matrix(1.0, 0, 0, 1.0, 0, 0);
}
body:not(.mobile-device) #playerOptionFullscreen:hover {
    opacity: 1;
}
body:not(.mobile-device) #playerOptionFullscreen:focus-visible {
    opacity: 1;
}
body:not(.mobile-device) #playerOptionFullscreen:active {
    opacity: .8;
}
body:not(.mobile-device) #playerOptionFullscreen:hover {
    /*    transform: scale(1.2)*/
 /*   transform: matrix(1.2, 0, 0, 1.2, 0, 0);*/
}
body:not(.mobile-device) #playerOptionFullscreen:focus-visible {
    /*  transform: scale(1.2) */
    /*transform: matrix(1.2, 0, 0, 1.2, 0, 0);*/
}
body:not(.mobile-device) #playerOptionFullscreen:active {
    /* transform: scale(1.1) */
   /* transform: matrix(1.2, 0, 0, 1.2, 0, 0);*/
}
/*#playerOptionFullscreen.selected {
    transform: scale(1.2)
    transform: matrix(1.2, 0, 0, 1.2, 0, 0);
}*/
.fullscreen #playerOptionFullscreen .restore,
.maximized #playerOptionFullscreen .restore {
    display: none;
}
#playerOptionFullscreen .fullscreen {
    display: none;
}
.fullscreen #playerOptionFullscreen .fullscreen,
.maximized #playerOptionFullscreen .fullscreen {
    display: block;
}
body.no-transition #playerOptionFullscreen {
    transition: none !important;
    transform: none !important;
}
/*body.mobile-device #playerOptionFullscreen {
    display:none;
}*/
#playerOptionFullscreen:focus {
    /*outline: #0d6efd auto 1px;*/
    /*background-color: rgba(255,255,255,.2);*/
}
.no-player-hilite #playerOptionFullscreen:focus {
    background-color: unset;
}

.playerOptionFullscreen {
    padding: 5px;
    margin: 0;
    outline: 0;
    border: 0;
    background-color: transparent;
    cursor: pointer;
    margin-right: 16px;
    margin-left: 5px;
    margin-top: 0px;
    transition: .3s;
    opacity: .7;
    opacity: 1;
    /* padding-right: 1rem; */
    color: #999999;
}
body.no-transition .playerOptionFullscreen {
    transition: none !important;
}
/*body:not(.mobile-device) .playerOptionFullscreen:hover {
    opacity: 1;
}
.playerOptionFullscreen:focus {
    opacity:1;    
    color: lightgray;  
}
.playerOptionFullscreen:active {
    opacity:.7;  
    color: lightgray;    */
}
.fullscreen .playerOptionFullscreen .restore,
.maximized .playerOptionFullscreen .restore {
    display: none;
}
.playerOptionFullscreen .fullscreen {
    display: none;
}
.fullscreen .playerOptionFullscreen .fullscreen,
.maximized .playerOptionFullscreen .fullscreen {
    display: block;
}


#playerControls #player-view-container .expanding-arrows {
    width: 14px;
    height: 14px;
}
#playerControls #player-view-container .expanding-arrows .shape-fill{
    stroke:#fff;
}
#playerControls #player-view-container .expanding-arrows:active .shape-fill
{
    stroke:#D9D9D9;
}
#playerControls #player-view-container .collapsing-arrows {
    width: 14px;
    height: 14px;
}
#playerControls #player-view-container .collapsing-arrows .shape-fill{
    stroke:#fff;
}
#playerControls #player-view-container .collapsing-arrows:active .shape-fill
{
    stroke:#D9D9D9;
}

@media only screen and (max-width: 600px) {
    #playerOptionFullscreen {
        display: none;
    }
    #playerControls #player-view-container {
        margin-left: 1.5rem;
    }
    #playerControls #player-control-buttons {
        margin-left: .5rem;
    }
}

@media only screen and (max-width: 450px) {
    .project-layout .edit-layout-button {
        display:none;
    }
}
/*
@media only screen and (max-width: 2000px) {
    .related-container .library-group {
        width: 201px !important;
        min-width: 201px !important;
    }
}
*/


#playerSubtitlesDelay {
    padding: 5px 15px;
    display: flex;
    /* flex: 1; */
    position: absolute;
    top: 40px;
    /* flex: 1; */
    /* left: 0; */
    /* right: 0; */
    justify-content: center;
    color: white;
    opacity: 1;
    background-color: transparent;
    font-size: 48px;
    top: 8rem;
    /* text-shadow: #FC0 1px 0 10px; */
    text-shadow: 0px 0px 1px rgba(0, 0, 0);
    text-shadow: -1px 1px 2px rgb(0 0 0);
    text-align: center;
    opacity: 0;
    transition: .5s ease-in-out;
    z-index: 5000;
    /*background-color: rgba(1,1,1,.6);*/
    pointer-events: none;
}
.no-shadow #playerSubtitlesDelay {
    text-shadow: none;
}
/*body.no-transition #playerSubtitlesDelay {
    transition: none !important;
}*/

#playerSubtitlesDelay.show {
    opacity: 1;
}


#playerSubtitles {
    padding: 5px;
    display: none;
    flex: 1;
    position: absolute;
    bottom: 45px;
    flex: 1;
    left: 5rem;
    right: 5rem;
    justify-content: center;
    z-index: 2;
    /*transition-delay: .5s;
    transition-property:bottom;*/
    transition: .1s;
    transition: none;
    pointer-events: none;
}

    #playerSubtitles.show {
        display: flex;
    }

body.is-safari #player #playerSubtitles {
    bottom: 2rem;
}
    #player.showing-controls #playerSubtitles {
        bottom: 145px;
    }
body.is-safari #player.showing-controls #playerSubtitles {
    bottom: 4rem;
}
body.mobile-device #player.paused #playerSubtitles {
    display: none;
}
#player.showing-upnext #playerSubtitles {
    bottom: 135px !important;
}
body:not(.mobile-device) #player.showing-controls.has-up-next #playerSubtitles {
    bottom: 215px;
}


#player.is-buffering #playerSubtitles {
    display: none;
}

#playerSubtitlesInfo {
    color: white;
    opacity: 1;
    background-color: transparent;
    font-size: 48px;
    /*text-shadow: #FC0 1px 0 10px;*/
    text-shadow: 0px 0px 1px rgba(0, 0, 0);
    text-shadow: -1px 1px 2px rgb(0 0 0);
    max-width: 80%;
    text-align: center;
    opacity: 1;
    line-height: 125%;
    transition: .5s;
    display: none;
}
.no-shadow #playerControls #playerSubtitlesInfo {
    text-shadow: none;
}
body.no-transition #playerSubtitlesInfo {
    transition: none !important;
}
#playerSubtitlesInfo.show {
    opacity:.9;
}
#player.paused #playerSubtitlesInfo {
    display: unset !important;
}
#player.playing #playerSubtitlesInfo {
    display: unset !important;
}
/*#player.preview-player.paused #playerSubtitlesInfo {
    display: unset !important;
}*/
#player.updating-subtitle-delay #playerSubtitlesInfo {
    display: unset !important;
}


#playerControlsDisabled {
    padding: 5px;
    display: none;
    flex: 1;
    position: absolute;
    bottom: 35px;
    flex: 1;
    /*left: 5rem;
    right: 5rem;*/
    justify-content: center;
    z-index: 2;
    /*transition-delay: .5s;
    transition-property:bottom;*/
    transition: .1s;
    display: flex;
    display: flex;
    color: white;
    opacity: 1;
    background-color: transparent;
    font-size: 48px;
    /* text-shadow: #FC0 1px 0 10px; */
    text-shadow: 0px 0px 1px rgba(0, 0, 0);
    max-width: 80%;
    text-align: center;
    opacity: 1;
    line-height: 125%;
    transition: .5s;
    /* display: none; */
    background: rgba(100, 100, 100, .3);
    padding: .5rem 1.5rem;
    border-radius: 6px;
    border: solid 1px rgba(100, 100, 100, 1);
    font-size: 32px;
    pointer-events: none;
    opacity: 0;
    display:none;
}
.no-shadow #playerControlsDisabled {
    text-shadow: none;
}
#player.event #playerControlsDisabled {
    display: flex;
}
#playerControlsDisabled.show {
    opacity:1;
}
#player.showing-controls #playerControlsDisabled {
    bottom: 135px;
}

/*
#player {
    display:none;
}
.playback #player {
    display:flex;
}*/

/*#player button {
    line-height:0px;
}*/

#playerDataControls button {
    line-height: 0px;
}

#player.showing-controls {
    cursor: default;
}
/*#player:not(.showing-controls) {
    cursor: none;
}*/
#player:not(.showing-controls).playing #playerData {
    cursor: none;
    pointer-events:none;
}
#player.showing-controls #playerData {
    cursor: default;
}
#player.showing-controls #videoPlayback {
    cursor: default;
}
#player:not(.showing-controls) #videoPlayback {
    cursor: none;
}
#player.showing-controls #playerControls {
    cursor: default;
    opacity: 1;
}
#player:not(.showing-controls) #playerControls {
    cursor: none;
    opacity: 0;
}
#player.showing-controls #playerDataControls {
    cursor: default;
    opacity: 1;
}
#player:not(.showing-controls) #playerDataControls {
    cursor: none;
    opacity: 0;
    pointer-events: none;
}
#player.show-access-code #playerDataControls {
    cursor: default;
    opacity: 1;
}
#player.audio #playerDataControls {
    cursor: default;
    opacity: 1;
}
/*body.is-safari #playerDataControls {
    display: none !important;
}*/
body.is-safari #playerControls {
    background-color:unset !important;
    pointer-events:none;
}
#player.use-vimeo #playerControls {
    cursor: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

#player.loading #videoPlayback {
    display: none !important;
}
.player.playback-attached #videoPlayback {
    cursor: default;
}
#player.show-access-code {
    cursor: default !important;
}
.player.show-access-code #playerControls {
    pointer-events: unset;
    opacity: 1 !important;
    z-index:7;
}
#player.show-access-code #player-controls-container {
    /*pointer-events: none;
    opacity: 0 !important;*/
}
#player.show-access-code #player-controls-container #position-event-info,
#player.show-access-code #player-controls-container #position-container,
#player.show-access-code #player-controls-container #player-control-buttons {
    display: none !important;
}
#player.show-access-code.playing:not(.preview) #player-controls-container {
    pointer-events: unset;
    opacity: 1 !important;
}
/*#player.showing-controls #playerDataControls.no-time {
    cursor: default !important;
    opacity: 1 !important;
}*/
.player.show-ad #playerDataControls {
    cursor: default !important;
    opacity: 1 !important;
}
#player.showing-controls #position-container {
    z-index:0;
}
/*#player:not(.showing-controls) #position-container {
    z-index: -1;
}*/
#player.audio #position-container {
    z-index: 0;
}
#player.showing-controls #controlsContainer-container {
    z-index: 0;
}
#player:not(.showing-controls) #controlsContainer-container {
    z-index: -1;
}
/*#player.url #playerControls {
    display:none;
}*/
body.is-safari #player #position-container {
    z-index: 0;
    display: none !important;
}

#playerDataControls {
    top: 3rem;
    right: unset;
    left: -3px;
}

.player-data-summary {
    margin-left: 3rem;
    margin-top: 1.4rem;
}
body:not(.mobile-device) .player.disable-upNextQueue .player-data-summary {
    margin-left: 1.5rem;
}


::cue {
    display: none !important;
    visibility: hidden;
    color: black;
    opacity: 1;
    background-color: transparent;
    font-size: 32px;
    /*text-shadow: #FC0 1px 0 10px;*/
    text-shadow: -1px 1px 2px rgba(150, 150, 150, 1);
}
.no-shadow ::cue {
    text-shadow: none;
}




.library-group-info-wrapper {
    /*box-shadow: -20px -20px 50px 66px #181818;*/
    position: relative;
    z-index: 5;
    /*  margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;*/
    padding-left: 0rem;
    /*padding-right: .5rem;*/
    height: 100%;
    /*overflow: hidden;*/
    display: flex;
    flex-direction: column;
    flex:1;
    /*overflow: hidden;*/
}

.library-group-info-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-top: -4.5rem;
    padding-left: .5rem;
    position: absolute;
    height: calc(100% + 4.5rem) !important;
}

.library-item-editor {
    display: flex;
    justify-content: flex-end;
}

.library-item-editor div {
    padding-left:1rem;
    padding-right:1rem;
}

#library-groups {
    flex: 1;
}

.library-groups {
    display: flex;
    list-style: none;
    /* overflow: auto; */
    /* height: 100%;*/
    /* flex-wrap: wrap; */
    padding-bottom: 1rem;
    margin-right: 0;
    overflow: hidden;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    align-items: flex-start;
}

.library-spacer {
    padding: 0;
    margin: 0;
    border: 0;
    outline: 0;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    min-width: 30px;
    width: 30px;
    height: 10px;
    min-height: 10px;
    /* display:none;*/
}
.library-spacer .container {
    min-width: 30px;
    width: 30px;
    height: 10px;
    min-height: 10px;
}
.library-loader {
    padding: 0;
    margin: 0;
    border: 0;
    outline: 0;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.library-loader .container {
    width:200px;
    display:none;
}
.library-loader.loading .container {
    margin-top:0;
}
.library-loader .loader-io { 
    width: 100px;
    height: 100px;
}
.library-loader .loader-io > div { 
    display:none;
}
    .library-loader.loading .loader-io > div {
        display: flex;
    }

.library-loader .name {
    padding: 10px 5px;
    background-color: transparent;
    border: 0;
    outline: 0;
    cursor: pointer;
    white-space: nowrap;
    font-size: 1.4rem;
    color: white;
    opacity: .7;
    transition: .3s;
    /* padding-left: .5rem; */
    margin-right: 0px;
    margin-left: 0px;
    padding-left: 1rem;
    padding-right: 1rem;
    border-radius: 3px;
}
body.no-transition .library-loader .name {
    transition: none !important;
}
.library-loader .name.focused {
    opacity:1;
    background-color: #444444;
}
.library-loader .name:focus {
    opacity:1;
    background-color: #444444;
   /* outline: #FF0062 auto 1px !important;*/
}
body:not(.mobile-device) .library-loader .name:hover {
    opacity: 1;
    background-color: #888888;
}
.library-loader .name.selected {
    opacity: 1;
}
.library-loader .name.selected .underline {
    opacity: 1;
}
.library-loader .name.selected:focus .underline {
    opacity: 1;
}
.library-loader .name.selected:focus {
    background-color: #0d6efd !important;
}

.library-loader.library-loader-ex .name {
    display:none;
}
.recent-grouping .library-groups .library-loader.library-loader-ex {
    padding-top: 3rem;
    /*padding-top: 0rem;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;*/
}

.library-group {
    padding: 0;
    margin: 0;
    border: 0;
    outline: 0;
    margin: 15px;
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
    padding-bottom: 0px;
    width: 312px;
    min-width: 312px;
    min-height: 240px;
    overflow: hidden;
    cursor: pointer;
    transition: .3s;
    /*transform: scale(1);*/
    transform: matrix(1.0, 0, 0, 1.0, 0, 0);
    z-index: 3;
    /* background-color: black;*/
    border: solid 2px transparent;
   /* border:none;*/
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 7%), 0 2px 4px rgba(0, 0, 0, 25%), 0 4px 8px rgba(0, 0, 0, 7%), 0 8px 16px rgba(0, 0, 0, 7%), 0 16px 32px rgba(0, 0, 0, 7%), 0 32px 64px rgba(0, 0, 0, 7%);
    position: relative;
    /*top: 0;*/
    /*backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-appearance: none;*/
    text-rendering: optimizeLegibility;
}
.mobile-device .library-group {
    box-shadow: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/*body.edit-layout .library-group {
    width: 305px;
    min-width: 305px;
}

body.edit-layout .dmsProjectChannelScheduleItem .library-group {
    width: 260px;
    min-width: 260px;
}*/

body:not(.mobile-device) .library-group:hover {
    /*  top:.5rem;*/
    /*transform: scale(1.05);*/
     transform: matrix(1.05, 0, 0, 1.05, 0, 0);
    z-index: 5;
    /*border: solid 1px #FF0062;*/
}
/*.library-group:focus-visible,
.library-group.selected {
    outline: solid 1px #FF0062 !important;
}*/
.library-group:focus-visible,
.library-group.selected {
   /* border: solid 2px #1177AA;
    border: solid 2px #FF0062;*/
    /*outline: solid 2px #FF0062 !important;*/
    /* top:.5rem;*/
    /* transform: scale(1.03);*/
    transform: matrix(1.03, 0, 0, 1.03, 0, 0);
    z-index: 4;
}
body:not(.mobile-device) .library-group:focus,
body:not(.mobile-device) .library-group.focused,
body:not(.mobile-device) .library-group:focus-visible,
body:not(.mobile-device) .library-group:active,
body:not(.mobile-device) .library-group.selected {
    /* border: solid 2px #1177AA;*/
    border: solid 2px #FF0062 !important;
}
body.no-transition .library-group {
    transition: none;
    transform: matrix(1.0, 0, 0, 1.0, 0, 0) !important;
}

body.tv-device .library-group:focus {
    border: solid 1px #FF0062;
}
body.no-transition .library-group {
    transition: none !important;
}
.library-group.upload-item {
    border-color: rgba(100,100,100,.5);
    border-style: dashed !important;
    border-width: thick !important;    
}
.library-group.uploading,
.library-group.uploaded {
    border-style: solid !important;
    border-width: thin !important;
}
.library-group.upload-item:focus,
.library-group.upload-item.selected {
    border-color: #FF0062;  
}
.app-form-field-media-item .library-group.upload-item {
    transform: none !important;
    cursor: pointer;
    background-color: rgba(0, 0, 0, .3);
    margin: 0 !important;
}
.app-form-field-media-item .library-group.upload-item .container {
    display:none;
}


#up-next-info.clean .library-group {
    background-color: transparent !important;
    width: unset;
}
.library-group .images {
    position: relative;
    width: 274px;
    height: 274px;
}
.media-selection {
    position: fixed;
    left:0;
    top:0;
   /* transition: .3s;*/
}
.media-selection.no-transition {
    transition: none !important;
}
.media-selection.show {
    top: 2rem;
    bottom: 0;
    transform: translateX(50%);
    width: 50%;
    background-color: #444;
    z-index: 50000;
    border-radius: 6px;
    border-color: transparent;
    background: #181818;
    color: white;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 7%), 0 2px 4px rgba(0, 0, 0, 7%), 0 4px 8px rgba(0, 0, 0, 7%), 0 8px 16px rgba(0, 0, 0, 7%), 0 16px 32px rgba(0, 0, 0, 7%), 0 32px 64px rgba(0, 0, 0, 7%);
    position: fixed;
    overflow: hidden;
    top: 2rem;
   /* width: 850px;*/
    max-width: 80%;
    height: 97vh;
    max-height: 100% !important;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    overflow: auto;
}
.library-group .images .media-display {
    position: absolute;
}
.library-group .image-container {
    position: relative;
    /*width: 100%;
    height: 100%;
    overflow: hidden;
    flex-grow: 1;*/
}
.library-group .image-container .play {
    position: absolute;
    color: white;
    bottom: 0;
    right: 0;
    opacity: .7;
    transition: .3s;
}
body.no-transition .library-group .image-container .play {
    transition: none !important;
}
.library-group .image {
    width: 312px;
    height: 312px;
    display: flex;
    /* flex-direction: column; */
    position: relative;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /*background-repeat: no-repeat;
    background-position: center;
    background-size: cover;*/
    cursor: pointer;
    z-index: 1;
    transition: .3s;
    background-color: black;
}
.library-group.upload-item .image {
    background-color: transparent;
    flex-direction: column;
}
.library-group.upload-item .image .svg {
    font-size: 8rem;
    color: whitesmoke;
    position:initial !important;
}
.library-group.created-item .image .svg {
    color: dodgerblue !important;
}
.library-group.upload-item .image span {
    display: block !important;
    font-size: 2rem !important;
    position: relative !important;
    top: 1.5rem;
}
body.no-transition .library-group .image {
    transition: none !important;
}
#up-next-info.clean .library-group .image {
    /*width: 300px;
    height: 300px;*/
    width: unset;
    height: unset;
}
.library-group .image.no-image {
    background: #181818; /* Old browsers */
    background: linear-gradient(to bottom, #000 0%,#181818 100%);
    background: #0d6efd;
    background: -moz-linear-gradient(top, #0d6efd 0%, #7db9e8 100%);
    background: -webkit-linear-gradient(top, #0d6efd 0%,#7db9e8 100%);
    background: linear-gradient(to bottom, #0d6efd 0%,#7db9e8 100%);
}

#recent-info {
    width: 100%;
   /* margin-top: -6rem;*/
    margin-top: 0rem;
    /*padding-bottom: 2.5rem;*/
    padding-bottom: 0;
}
.tab-page:not(.has-quickaccess) #recent-info {
    padding-top: .5rem;
}
.tab-page:not(.has-quickaccess) #recent-info.show-names {
    padding-top: .5rem;
}


.library-group .image .pause {
    position: absolute;
    right: 10px;
    bottom: 10px;
    font-size: 1.4rem;
    display: none;
    border-radius: 10px;
    box-shadow: 0 0 10px 1px rgba(0,0,0,.3);
    opacity: .7;
    transition:.3s;
    z-index:5;
}
body.no-transition .library-group .image .pause {
    transition: none !important;
}
body:not(.mobile-device) .library-group .image .pause:hover {
    opacity: 1;
}

#player.playing .library-group.on-now .image .pause {
    display: block;
}
#player.playing .library-group.now-playing .image .pause {
    display: block;
}
#up-next-info .library-group .image .pause {
    color:#fff;
}
.library-group .image .play {
    position: absolute;
    right: 10px;
    bottom: 10px;
    font-size: 1.4rem;
    display: none;
    border-radius: 10px;
    box-shadow: 0 0 10px 1px rgba(0,0,0,.3);
    opacity: .7;
    transition:.3s;
    z-index:5;
}
body.no-transition .library-group .image .play {
    transition: none !important;
}
body:not(.mobile-device) .library-group .image .play:hover {
    opacity: 1;
}

.library-group.on-now .image .play {
    display: block;
}
.library-group.now-playing .image .play {
    display: block;
}
#up-next-info .library-group .image .play {
    color:#fff;
}
#player.playing .library-group.on-now .image .play {
    display: none;
}
#player.playing .library-group.now-playing .image .play {
    display: none;
}
.library-group .background {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    /* z-index: 0; */
    right: 0;
    bottom: 0;
    -webkit-filter: blur(30px);
    filter: blur(30px);
    transform: scale(1.1);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0% 0%;
    opacity: .7;
    display:none !important;
}
.library-group .image.not-available .background {
    display:none !important;
}
.library-group .image.not-available img {
    opacity: .3 !important;
}
#up-next-info.clean .library-group .background {
    display: none;
}
/*.library-group .show {
    width: 100%;
    height: 100%;
    max-width: 215px;
    max-height: 200px;
    padding: 12px;
}*/
/*.library-group.album > button .image {
    width: 300px;
    height: 300px;
}*/
.library-group img {
    max-width: 312px;
    max-height: 312px;
    z-index: 3;
    transition: .3s;

    /*position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    object-fit: cover;*/
}
.library-group img {
    display: none;
}
.library-group img.show {
    display:unset;
}
.library-group.uploading img {
    display: none !important;
}
body.no-transition .library-group img {
    transition: none !important;
}
.library-group .image.no-image > img {
    display:none !important;
}
/*.library-group.album > button img {
    max-width: 300px;
    max-height: 300px;
}*/
#up-next-info.clean .library-group img {
    max-width: 360px;
    max-height: 360px;
}
#up-next-info.clean .library-group .container {
    max-width: 360px;
}

.library-group .container {
    position: relative;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 7px;
    padding-bottom: 10px;
    transition: all .2s;
    /*min-height: 58px;*/
    cursor: pointer;
    /* background-color: black;*/
    width: 100%;
    background-color: transparent;
    display: flex;
    flex-direction: column;
    padding: .5rem;
    padding-top: .5rem;
    /* line-height: normal;*/
    flex: 1;
    padding-bottom: 1rem;
}
.checkout-screen .library-group .container {
    padding: 1rem 1.5rem;
    padding-top: 0.8rem;
}
.library-group.upload-item .container {
    background-color: transparent;
    padding-top: 0 !important;
}
body.no-transition .library-group .container {
    transition: none !important;
}

#up-next-info.clean .library-group .container {
    background-color: transparent !important;
    padding-top: 7px;
    padding-left: 7px;
    padding-right: 7px;
    padding-bottom: 7px;
}

.library-group .container label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    line-height: inherit;
    vertical-align: text-top;
    line-height: 1.4;
}
#up-next-info.clean .library-group .container label {
    text-shadow: 0px 0px 1px rgba(0, 0, 0);
    opacity: .8;
    cursor: pointer;
    transition: all .2s;
}
.no-shadow #up-next-info.clean .library-group .container label {
    text-shadow: none;
}
body.no-transition #up-next-info.clean .library-group .container label {
    transition: none !important;
}
body:not(.mobile-device) #up-next-info.clean .library-group:hover .container label {
    opacity: 1;
}
#up-next-info.clean .library-group.selected .container label {
    opacity: .9;
}

#cache-screen .library-group .container {
    padding-bottom: 7px;
}
.library-group .image span {
    font-size: 1.6rem;
    white-space: normal;
    color: #fff;
    padding: 5px;
    display: none;
    position: absolute;
    z-index: 5;
}
.library-group .image span.not-available {
    display:block;
    color: red;
   /* font-size: 4rem;*/
    /*text-shadow: -1px 1px 2px rgb(255 0 0);*/
}
.library-group .image.no-image span {
    display:block;
}
.library-group .image.not-available span:not(.not-available) {
    display: none;
}
.library-group .name {
    text-align: left;
    color: white;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 1.1rem;
    padding-top: 2px;
    line-height: inherit;
    padding-bottom: 2px;
}
.library-group.show-tagline .name {
    font-weight:bold;
}
.library-group .name-container {
    display: flex;
    align-items: center;
}
.library-group .name-container .name-info {
    padding-left: 1.5rem;
    font-size: 3rem;
    text-transform: uppercase;
}
#up-next-info.clean .library-group .name {
    text-align: center;
    font-size: 1.1rem;
    white-space: normal;
}
.library-group .name2 {
    text-align: left;
    font-size: .9rem;
    color: white;
    opacity: 1;
    padding-top: 0px;
    padding-bottom: 4px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height:inherit;
}
#up-next-info.clean .library-group .name2 {
    display: none;
}
.library-group .name3 {
    text-align: left;
    font-size: .8rem;
    color: white;
    opacity: 1;
    padding-top: 0px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 1rem;
    line-height: inherit;
}
#up-next-info.clean .library-group .name3 {
    display: none;
}
.library-group .name4 {
    text-align: left;
    font-size: .8rem;
    color: white;
    opacity: 1;
    padding-top: 0px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 1rem;
    line-height: inherit;
}

#up-next-info.clean .library-group .name4 {
    display: none;
}
.library-group .live {
    text-align: left;
    font-size: .8rem;
    color: #FFAB15;
    opacity: 1;
    padding-top: 2px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.library-group .live.remind-me 
{
    text-overflow:unset;
    display:flex;
    align-items:center;
    position:relative;
    overflow: visible;
}
.library-group .live.remind-me .remind-me-container
{
    display: flex;
    align-items: center;
    position: absolute;
    font-size: .9rem;
    line-height:1.4;
    color: white;
    display:none;
}
.library-group .live.remind-me .remind-me-container i
{
    margin-right:3px;
}
.library-group .live-time {
    text-align: left;
    font-size: .8rem;
    color: #FFAB15;
    opacity: 1;
    padding-top: 0px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.library-group .live-location {
    text-align: left;
    font-size: .8rem;
    color: #FFAB15;
    opacity: 1;
    padding-top: 0px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.library-group .info {
    font-size: .9rem;
    text-align: left;
    padding-top: 0px;
    display:flex;
    color: white;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height:inherit;
}
#up-next-info.clean .library-group .info {
    /*display: none;*/
    text-align: center;
    justify-content: center;
  /*  max-width: 230px;*/
}
.library-group .expires {
    font-size: .9rem;
    text-align: left;
    padding-top: 5px;
    display: flex;
    color: white;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    align-items: center;
    color: #FFAB15 !important;
    font-weight:bold;
}
.library-group .expires label {
}
.library-group .time {
    font-size: .9rem;
    text-align: left;
    padding-top: 7px;
    display: flex;
    color: white;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    align-items: center;
}
.library-group .time > label {
    opacity: .9;
    color: #FFAB15 !important;
    font-weight: bold;
}
.library-group:focus .time > label {
    opacity: 1;
}
body:not(.mobile-device) .library-group:hover .time > label {
    opacity: 1;
}
.library-group .time .seperator {
    opacity: .7;
}
.library-group:focus .time .seperator {
    opacity: 1;
}
body:not(.mobile-device) .library-group:hover .time .seperator {
    opacity: 1;
}
.library-group.on-now .time > label {
    display: none;
}
.library-group.playing .time > label {
    display: none;
}
.library-group .time label.on-now {
    display:none;
}
.library-group .time label.now-playing {
    display: none;
}
.library-group.playing .time label.now-playing {
    display: block;
    color: #FFAB15 !important;
    font-weight: bold;
    opacity: 1;
}
.library-group.on-now .time label.now-playing {
    display:none;
}
.library-group .position {
    display: none;
    position: absolute;
    top: -1px;
    left: 0;
    height: 3px;
    background-color: #FFAB15;
    z-index:5;
}
.library-group.on-now .position,
.library-group .position.on-now {
    display: block;
}
.library-group.on-now .time label.on-now {
    display: block;
    color: #FFAB15 !important;
    font-weight: bold;
    opacity: 1;
}
body:not(.mobile-device) .library-group:hover .position,
.library-group:active .position,
.library-group:focus .position,
.library-group:focus.selected .position,
.library-group.selected .position {
    top: -1px;
}


.library-group-details .live {
    display: flex;
    text-align: left;
    /* width: 100%; */
    padding: 1rem 1.5rem;
    padding-top: 5px;
    padding-bottom: 3px;
    color: whitesmoke;
    /* font-weight: bold; */
    font-size: 1.2rem;
    align-items: center;
    color: #FFAB15 !important
}
.library-group-details .live > label {
    color: #FFAB15 !important;
    padding-top: 1px;
}
.library-group-details .live .seperator {
    width: 1px;
    background-color: lightgray;
    margin: 0px 15px;
    position: relative;
    top: -1px;
    border-radius: 1px;
    /* border: solid 1px; */
    /* transform: scale(.5); */
    top: 1px;
    height: 12px;
    display:none;
}
.library-group-details .container > .live {
    padding: 0;
    font-size: 1rem;
    line-height: inherit;
    padding-top: 6px;
    font-weight: 500;
}
.library-group-details .library-group-info-container > .live {
    flex-direction: column;
    align-items: baseline;
   /* padding: 0 .6rem;*/
    padding-top: 2px;
}

.library-group .info .info0 {
    display: flex;
    align-items: center;
    opacity: .7;
    opacity: 1;
    transition: .3s;
}
.library-group.selected .info .info0 {
    opacity: 1;
}
.library-group:focus .info .info0 {
    opacity: 1;
}
body:not(.mobile-device) .library-group:hover .info .info0 {
    opacity: 1;
}
/*.library-group.on-now .info .info0 {
    opacity: 1;
}*/
.library-group .info .info1 {
    display: flex;
    align-items: center;
    opacity: .7;
    opacity: 1;
    transition: .3s;
    /* padding-top: 2px;*/
}
.library-group.selected .info .info1 {
    opacity: 1;
}
.library-group:focus .info .info1 {
    opacity: 1;
}
body:not(.mobile-device) .library-group:hover .info .info1 {
    opacity: 1;
}
/*.library-group.on-now .info .info1 {
    opacity: 1;
}*/
.library-group .info .info2 {
    display: flex;
    align-items: center;
    opacity: .7;
    opacity: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: .3s;
}
.library-group.selected .info .info2 {
    opacity: 1;
}
.library-group:focus .info .info2 {
    opacity: 1;
}
body:not(.mobile-device) .library-group:hover .info .info2 {
    opacity: 1;
}
/*.library-group.on-now .info .info2 {
    opacity: 1;
}*/
.library-group .info .info3 {
    display: flex;
    align-items: center;
    opacity: .7;
    opacity: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: .3s;
}
.library-group.selected .info .info3 {
    opacity: 1;
}
.library-group:focus .info .info3 {
    opacity: 1;
}
body:not(.mobile-device) .library-group:hover .info .info3 {
    opacity: 1;
}
/*.library-group.on-now .info .info3 {
    opacity: 1;
}*/
.library-group .info .info4 {
    display: flex;
    align-items: center;
    opacity: .7;
    opacity: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: .3s;
}
.library-group.selected .info .info4 {
    opacity: 1;
}
.library-group:focus .info .info4 {
    opacity: 1;
}
body:not(.mobile-device) .library-group:hover .info .info4 {
    opacity: 1;
}
/*.library-group.on-now .info .info4 {
    opacity: 1;
}*/
.library-group .info .seperator {
    width: 1px;
    background-color: white;
    position: relative;
    top: 0px;
    height: 12px;
    margin-left: 10px;
    margin-right: 10px;
}

/*.library-group.selected .container {
    background-color: #444;
}*/
.library-group.on-now .container {
    background-color: #444444;
}
/*.library-group:hover .container {
    background-color: #666666;
}*/
body:not(.mobile-device) .library-group:hover .name2 {
    opacity: 1;
}
body:not(.mobile-device) .library-group:hover .info {
    opacity: 1;
}
/*.library-group:focus .container {
    background-color: #0d6efd;
}*/
.library-group:focus .name2 {
    opacity: 1;
}
.library-group:focus .info {
    opacity: 1;
}
/*.library-group:active .container {
    background-color: #0d6efd;
}*/
.library-group:focus .name2 {
    opacity: 1;
}
.library-group:focus .info {
    opacity: 1;
}
.library-group.selected .name2 {
    opacity: 1;
}
.library-group.selected .info {
    opacity: 1;
}

#cache-info {
    margin-top: 1rem;
    overflow: hidden;
    flex: 1;
    flex-direction: column;
    display: flex;
}

.library-item .playback-indicator {
    display:none;
}
.library-item.now-playing .playback-indicator {
    display: block;
    position: absolute;
    color: #0077BB;
    top: 10px;
    left: 3px;
}

/*.library-group .container .library-item {
    display:none;
}*/
.library-group.uploading .container .library-item {
    display: block;
    margin-left: -0.7rem;
    padding-top: 0rem;
    margin-right: -0.3rem;
}
.library-group.transcode-item .container .library-item {
    display: block;
    margin-left: -0.7rem;
    padding-top: 0.5rem;
    margin-right: -0.3rem;
}

.library-group .image-header-ex {
    display:none;
}


#up-next-info {
    z-index: -1;
    display: flex;
    position: absolute;
    left: 0;
    /* flex-direction: column; */
    align-items: center;
    /* justify-content: center; */
    /* position: relative; */
    /* left: 0; */
    /* top: 0; */
    /* bottom: 0; */
    /*transition: .3s;*/
    opacity: 0;
    right: 0;
    overflow: hidden;
}
#player.playing #up-next-info {
    display: none;
}
#player.audio #up-next-info {
    z-index: 601;
    opacity: 1;
    display: flex;
}
#player.paused #up-next-info {
    z-index: 601;
    opacity: 1;
    display: flex;
}
#player.loading #up-next-info {
    display: none !important;
}

#up-next-info .library-groups {
    overflow: visible;
    margin-top: 2.4rem;
    margin-bottom: 2.4rem;
}
#up-next-info.clean .library-groups {
    padding-bottom: 0;
    align-items:baseline;
}
#up-next-info .library-group {
    transition: .3s;
    position: relative;
    align-items: center;
    border: none;
    min-width: unset;
}
#up-next-info .library-group.selected {
    transform: scale(1.1);
   /* background-color:cornflowerblue;*/
    z-index: 5;
}
/*#up-next-info .library-group.selected {
    transform: scale(1.2);*/
   /* background-color:cornflowerblue;*/
    /*z-index: 5;
}*/
body:not(.mobile-device) #up-next-info .library-group:hover {
    transform: scale(1.2);
    /* background-color:cornflowerblue;*/
    z-index: 5;
}
#up-next-info .library-group:focus {
    transform: scale(1.2);
   /* background-color:cornflowerblue;*/
    z-index: 5;
}
body.no-transition #up-next-info .library-group {
    transition: none !important;
}

#up-next-info .library-group:focus {
  /*  outline: #0d6efd auto 1px;*/
    background-color: #0d6efd;
}


/*#up-next-info .library-group.selected {
    transform: scale(1.2);*/
   /* background-color:cornflowerblue;*/
    /*z-index: 5;
}*/
#up-next-info .library-types-scroll-button {
    z-index: 605;
    height: 120px;
    border: 0;
    outline: 0;
    background-color: transparent;
    /* cursor: pointer; */
    backface-visibility: hidden;
    white-space: nowrap;
}
#up-next-info .library-types-scroll-button.left {
    position:sticky;
}
#up-next-info .library-types-scroll-button.right {
    position:sticky;
}

.no-scroll #up-next-info .library-types-scroll-button {
    display: block !important;
    opacity:0;
    cursor:pointer;
}
.no-scroll-left #up-next-info .library-types-scroll-button.left {
    display: block !important;
    opacity: 0;
    cursor: default;
}
.no-scroll-right #up-next-info .library-types-scroll-button.right {
    display: block !important;
    opacity: 0;
    cursor: default;
}

#up-next-info.clean .library-types-scroll-button {
    margin-bottom: 5rem;
}
/*.mobile-device #up-next-info .library-types-scroll-button.left {
    display: none !important;
}
.mobile-device #up-next-info .library-types-scroll-button.right {
    display: none !important;
}
.mobile-device #up-next-info .library-groups {
    width: 100%;
    justify-content: center;
}*/

#videoPlayback {
    cursor: none;
    text-align: center;
    display: flex;
    vertical-align: middle;
    align-items: center;
    justify-content: center;
    transition: opacity .3s;
   /* z-index: 1;*/
    background: black;
}
#player.video.showing-controls #videoPlayback {
    cursor: default;
}
#player.no-player-hilite.video.showing-controls #videoPlayback {
    opacity: .7;
}
#player.image #videoPlayback {
    cursor: default;
    opacity: 1;
}
body.no-transition #videoPlayback {
    transition: none !important;
}
body.no-transition #player.video.showing-controls #videoPlayback {
    opacity: 1 !important;
}
/*#videoPlayback.fit-to-window video {
    width: 100%;
    height: 100%;
}
#videoPlayback.ignore-width video {
    width: unset;
}
#videoPlayback.fill-window video {
    object-fit: cover;
}*/
/*#videoPlayback.fit-to-window video {
    object-fit: cover;
}*/

#videoPlayback.quarter {
    transform: scale(.25);
}
#videoPlayback.half
{
    transform:scale(.5);
}
#videoPlayback.original
{
    transform: scale(1);
}
#videoPlayback.larger
{
    transform: scale(1.5);
}
#videoPlayback.double
{
    transform: scale(2);
}
/*#videoPlayback.paused
{
    opacity:.5;
}*/
#player.image #videoPlayback.paused {
    opacity: 1;
}
#videoPlayback img {

}



.preview-window {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 50000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all .2s;
    background-color: black;
}
.preview-window.trailer-attached {
    background-color: rgba(0,0,0,.3);
}
body.no-transition .preview-window {
    transition: none;
}
.preview-window-container {
    display: flex;
    /* flex: 1; */
    width: calc(100% - 100px);
    height: calc(100% - 200px);
}
.preview-window.trailer-attached .preview-window-container {
    position: relative;
    /*  width: 50%;
    height: 60%;*/
    box-shadow: 0 1px 2px rgba(0, 0, 0, 7%), 0 2px 4px rgba(0, 0, 0, 7%), 0 4px 8px rgba(0, 0, 0, 7%), 0 8px 16px rgba(0, 0, 0, 7%), 0 16px 32px rgba(0, 0, 0, 7%), 0 32px 64px rgba(0, 0, 0, 7%);
}
.preview-window-container iframe {
   width:100%;
   height:100%;
}
.preview-window-close-button {
    position: absolute;
    right: 2rem;
    top: 1.2rem;
    z-index: 1000;
}
.preview-window-close-button i {
    color:white;
    font-size:2rem;

}

.ytp-chrome-top-buttons {
    display:none !important;
}

#videoPlayback.audio {
    width: unset !important;
    height: unset !important;
    transform: scale(1) !important;
    opacity: 1 !important;
}

#videoPlayback iframe {
    flex: 1;
    height: 100%;
    width: 100%;
}

#videoPoster {
    /*transition: .2s;*/
    position: fixed;
    left: -100px;
    top: -100px;
    right: -100px;
    bottom: -100px;
    transition:.3s;
    overflow:hidden;
}
.player.playback-attached #videoPoster {
    position: absolute;
}
.player.playback-attached #videoPoster {
    position: absolute;
}
.player.view.playback-attached #videoPoster {
    position: absolute;
}
.player.view.playback-attached.is-buffering #videoPoster {
    opacity:0;
}
.fullscreen #videoPoster {
    position: fixed !important;
}
body.no-transition #videoPoster {
    transition: none !important;
}
.player.playback-attached .up-next-selection-vail {
    position: absolute;
}
.player.view.playback-attached .up-next-selection-vail {
    position: absolute;
}
.fullscreen .up-next-selection-vail {
    position: fixed !important;
}

.library-group-details #speaker-controls {
    display:none;
}
.library-group-details .background {
    pointer-events: none;
}

.library-group-details .image .playback-info #position-level {
    position: absolute;
    bottom: -5px;
    width: 100%;
    left: 0;
    right: 0;
    top: unset;
}

.library-group-details .image .playback-info .main {
    position: absolute;
    bottom: 0.5rem;
    left: 1.5rem;
    right: 1.5rem;
    display: flex;
    flex: 1;
    justify-content: space-between;
}

.up-next-selection {
    z-index: 5000;
}
.up-next-selection-vail {
    z-index: 4999;
}
.revealer {
    display: none;
    opacity: 0;
    transition: .2s;
    transition-property: opacity;
}
.revealer.show {
    display: flex;
}
.revealer.reveal {
    opacity: 1;
}

.library-groups-selected-item {
    display: none;
    /*opacity: 0;*/
    /*transition: .1s;
    transition-property: opacity;*/
}
.library-groups-selected-item.show {
    display: flex;
    transition:.3s;
}
/*.library-groups-selected-item.reveal {
    opacity: 1;
}*/

#player.video #videoPoster {
    display: none !important;
}
#player:not(.show-access-code).video.has-data:not(.is-loading) #videoPoster {
    opacity: 0;
}
#player.video.has-data.paused #videoPoster {
    opacity: 0;
}
#player.has-up-next-items.video.has-data.paused #videoPoster {
    opacity: 0;
}
#player.image #videoPoster {
    display: none !important;
}

#player.playing #videoPoster {
    display: none !important;
}

#player.audio #videoPoster {
    opacity: 1 !important;
    display:block !important;
}
/*#player.no-time #videoPoster {
    display: none !important;
}*/
/*#player.url #videoPoster {
    display: none !important;
}*/
#player #videoPoster {
  /*  display: none !important;*/
}
#player.loading #videoPoster {
    display: none !important;
}
/*#player.loading #videoPoster,
#player.is-buffering #videoPoster {
    display: none !important;
}

*/
body.is-safari #player #videoPoster {
    display: none !important;
}
#player.show-access-code #videoPoster,
body.is-safari #player.show-access-code #videoPoster {
    display: block !important;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    z-index:5;
}

#videoPoster .videoPosterImage {
    position: absolute;
    left: -1000px;
    top: -1000px;
    right: -1000px;
    bottom: -1000px;
    filter: blur(50px);
    transform: scale(1.2);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0% 0%;
    opacity: 1;
    transition: .3s;
}
body.no-transition #videoPoster .videoPosterImage {
    transition: none !important;
}
#player.show-access-code #videoPoster .videoPosterImage {
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    filter: none;
    transform: none;
}

#videoPoster .videoPosterBkgd {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: black;
    opacity: 1;
}

#videoPoster .videoPosterFilter {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: black;
    opacity: .5;
}
.flex-row {
    display: flex;
    align-items: center;
    display: flex;
    align-items: center;
    flex-direction: row !important;
}
.flex-row.wrap {
    flex-wrap: wrap;
}

#player .fade {
    all:unset !important;
}

.align-items-center {
    align-items: center !important;
}
.align-items-start {
    align-items: start !important;
}

.justify-content-end {
    justify-content:flex-end;    
}

#playerControls {
    display: flex;
    flex-direction: column;
    flex: 1;
    /*background-color: #171717;
    background-color: rgba(23, 23, 23, .3);
    background-image: linear-gradient(rgba(23, 23, 23, .3), rgba(255,255,255,.2));
        */
    transition: .3s ease-in-out;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    color: #fff;
}
body:not(.is-safari) #playerControls {
    background: linear-gradient(0deg, rgba(0, 0, 0, .9), transparent 15%);
}
body:not(.is-safari, .mobile-view) #playerControls {
    background: linear-gradient(0deg, rgba(0, 0, 0, .3), transparent 15%);
}
body.no-transition #playerControls {
    transition: none !important;
}
.paused #playerControls {
    opacity: 1 !important;
    background-color: rgba(0,0,0,.3);
}
body:not(.is-safari) .paused #playerControls {
    opacity: 1 !important;
    background-color: rgba(0,0,0,.1);
}
body:not(.is-safari, .mobile-view) #player.showing-controls #playerControls {
    background-color: rgba(0,0,0,.2);
}
body:not(.is-safari, .mobile-view) .paused #playerControls,
body:not(.is-safari, .mobile-view) #player.paused #playerControls {
    opacity: 1 !important;
    background-color: rgba(0,0,0,.3);
}
body:not(.is-safari) #player.show-access-code #playerControls {
    opacity: 1 !important;
    background-color: rgba(0,0,0,0);
}
body.is-safari .paused #playerControls {
    opacity: 1 !important;
    pointer-events: none;
}
body.is-safari:not(.mobile-device) .paused #playerControls {
    background-image: linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,0));
}
/*#player.no-time #playerControls {
    display:none;
}*/
#player.loading #playerControls {
    display: flex;
}
#player.is-buffering #playerControls {
  /*  cursor: none;*/
    /*opacity: 0 !important;*/
}
#playerControls .volume-bar {
    display: flex;
    flex: 1;
    /*cursor: pointer;*/
    /*width:100px;*/
    margin: 4.5px 0;
    padding: 0 3px;
    background-color: transparent;
    align-items: center;
    margin-left: 0px;
    margin-right: 20px;
    width: 100%;
    justify-content: flex-start;
    transition: none;
}

#playerControls .volume-bar.show {
    display:flex;
}
#playerControls .volume-bar div {
    /*cursor:default;*/
}
#playerControls .volume-bar-area {
    display: flex;
    height: 2px;
    cursor: pointer;
    max-width: 200px;
    min-width: 100px;
    width: 100%;
    height: 15px;
    transition:none;
    /*transform: matrix(1.0, 0, 0, 1.0, 0, 0);*/
    background-color: transparent;
}
#playerControls .volume-bar-area-on {
    display: flex;
    /*border: solid 1px black;
    background-color: darkgray;
    border: solid 1px gray;*/
    /* background-color: gray;*/
    height: 3px;
    /* border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;*/
    align-self: center;
    /*border-top: 1px black;
    border-left: 1px black;
    border-top: inset 1px darkgray;
    border-left: inset 1px darkgray;*/
    position: relative;
    left: 7px;
    width: 0%;
    cursor: pointer;
    border: none;
    /*transition: background-color .3s;*/
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
    overflow: hidden;
    transition: none;
    background-color: lightgray;
    border-radius: 5px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    overflow: hidden;
    opacity: 1;
}
.player.muted #playerControls .volume-bar-area-on {
    transition:.1s;
}
body.no-transition #playerControls .volume-bar-area-on {
    transition: none !important;
    transform: none !important;
}
#playerControls .volume-bar-area.focused .volume-bar-area-on {
    transform: scaleY(2);
}
#playerControls .volume-bar-area.selected .volume-bar-area-on {
    background-color: rgba(17,119, 170, 1);
    transform: scaleY(2);
}
#playerControls .volume-bar-area-off {
    display: flex;
    /*  border: solid 1px darkgray;
    background-color: darkgray;*/
    height: 3px;
    /*border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;*/
    align-self: center;
    position: relative;
    /* border-top: inset 1px lightgray;
    border-right: inset 1px gray;*/
    flex: 1;
    cursor: pointer;
    border: none;
    /*transition: background-color .3s;*/
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    overflow: hidden;
    transition: none;
    background-color: gray;
    background-color: darkgray;
    border-radius: 5px;
    overflow: hidden;
    opacity: 1;
}
body.no-transition #playerControls .volume-bar-area-off {
    transition: none !important;
    transform: none !important;
}
#playerControls .volume-bar-area.focused .volume-bar-area-off {
    /* background-color: rgba(255,255,255, .8);*/
    transform: scaleY(2);
}
#playerControls .volume-bar-area.selected .volume-bar-area-off {
    /* background-color: rgba(255,255,255, .8);*/
    transform: scaleY(2);
}
#playerControls .volume-bar-area-ball {
    display: flex;
    border: solid 1px gray;
    width: 14px;
    height: 14px;
    min-width: 14px;
    min-height: 14px;
    background-color: gainsboro;
    border-radius: 10px;
    align-self: center;
    /*z-index: 5;*/
    position: relative;
    left: 2px;
    cursor: pointer;
    /*transition: background-color .3s;*/ /*, transform .3s;*/
    border: none !important;
    transform: matrix(1.0, 0, 0, 1.0, 0, 0);
}

/*#playerControls .volume-bar-area.selected .volume-bar-area-ball {
    background-color: rgba(255,255,255, 1);
}*/
body.no-transition #playerControls .volume-bar-area-ball {
    transition: none !important;
}
body:not(.mobile-device) #playerControls .volume-bar-area-ball:focus-visible {
    background-color: white !important;
    /*  transform: scale(1.3);*/
    /*transform: matrix(1.2, 0, 0, 1.2, 0, 0);*/
    opacity: 1;
}
body:not(.mobile-device) #playerControls .volume-bar-area-ball:hover {
    background-color: white !important;
    /*  transform: scale(1.3);*/
    /*transform: matrix(1.2, 0, 0, 1.2, 0, 0);*/
    opacity: 1;
}
body:not(.mobile-device) #playerControls .volume-bar-area:focus-visible .volume-bar-area-ball {
    background-color: white !important;
    /*    transform: scale(1.4);*/
    /*transform: matrix(1.2, 0, 0, 1.2, 0, 0);*/
    opacity: 1;
}
body:not(.mobile-device) #playerControls .volume-bar-area-ball:active {
    background-color: whitesmoke !important;
    /*transform: matrix(1.2, 0, 0, 1.2, 0, 0);*/
}
#playerControls .volume-bar-area-ball.resize {
    background-color:white !important;
}

#playerBufferInfo {
    position: absolute;
    left: 15px;
    top: 0;
    right: 0;
    bottom: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events:none;
}
#playerBufferInfo .loader-io {  
    margin-left: 15px;
}
#player.playing.is-buffering #playerBufferInfo {
    display: flex;
}
.is-loading #playerBufferInfo,
#player.loading #playerBufferInfo {
    display: flex;
    background-color: black;
}
#player.show-access-code #playerBufferInfo,
.show-ad #playerBufferInfo {
    display: none !important;
}
.player-buffering {
    width: 33%;
    height: 4px;
    border: 1px solid lightgray;
    border-color: rgba(255, 255, 255, .1);
    position: relative;
    top: -2%;
    margin: auto;
    overflow: hidden;
    border: none !important;
    border-radius: 6px;
}
.player-buffering-indicator {
    background-image: linear-gradient(to right, gray, lightgray);
    height: 100%;
}



.drop-down {
    position: relative;
    width: fit-content;
    font-size: 1.2rem;
   /* background-color: #323232;*/
}
.drop-down.show {

}
.drop-down .selected-item {
    cursor:pointer;
    padding: .5rem 1rem;
    opacity:1;
    transition:.2s;
    background-color: #323232;
    width:100%;
    text-align: left;
    display: flex;
    align-items: center;
    
    background-color: transparent !important;
    border: solid 1px #444 !important;
    border: solid 1px rgba(100,100,100,.5) !important;
    border-radius: 6px;
    padding: 0.45rem 1rem !important;
    min-width: 150px;
    transition:.3s;
    padding-right: 2px !important;
    padding-left: 0.5rem !important;
/*    background-color: rgba(100,100,100,.1) !important;*/
    padding: 0.49rem 1rem !important;
    padding-left: 0.5rem !important;
    padding-right: 0.1rem !important;
}
body:not(.mobile-device) .drop-down .selected-item:hover {
    background-color: rgb(40,40,40);
}
body.no-transition .drop-down .selected-item {
    transition: none !important;
}
body:not(.mobile-device) .drop-down .selected-item:hover {
    opacity: 1;
    background-color: #505050;
}
.drop-down .selected-item:focus {
    opacity:1;
    background-color: #0d6efd;
}
.drop-down .selected-item:active {
    opacity:1;
    background-color: #0d6efd;
}
/*.drop-down .selected-item.selected {
    opacity:1;
    background-color: #0d6efd;
}*/
.drop-down .selected-item label {
    flex: 1;
    font-size: 1.1rem;
}
.drop-down .selected-item i {
    margin-left: .5rem;
    text-align: left;
    width: 44px;
    text-align: center;
    margin: 0;
    height: 100%;
}
.drop-down .items {
    display: none;
    flex-direction: column;
    align-items: baseline;
    /*position: absolute;*/
    overflow-y: auto;
    overflow-x: hidden;
    /*top: 3rem;
    border: solid 1px gray;
    left: 0rem;*/
    background-color: #1C1C22;
    background-color: #1D2125;
    padding: 0rem;
    /*width:100%;*/
    box-shadow: 1px 1px 3px 0px rgba(0,0,0,1);
    position: absolute;
    /*width: inherit;*/
    z-index: 500;
    min-width: 150px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    width: fit-content !important;
}
.drop-down.show .items {
    display: block;
    max-height: 300px;
}
.drop-down .items .item {
    padding: .5rem 1rem;
    width: 100%;
    text-align: left;
    opacity: .7;
    transition: .2s;
    text-overflow: ellipsis;
    /*overflow: hidden;*/
    white-space: nowrap;
    justify-content: flex-start;
    border-radius: 0;
}
body.no-transition .drop-down .items .item {
    transition: none !important;
}
body:not(.mobile-device) .drop-down .items .item:hover {
    opacity: 1;
    background-color: #0d6efd;
}
.drop-down .items .item:focus {
    opacity: 1;
    background-color: #0d6efd;
}
.drop-down .items .item:active {
    opacity: 1;
    background-color: #0d6efd;
    border-color: #0d6efd;
}
.drop-down .items .item.selected {
    opacity: 1;
    background-color: #0d6efd;
}
.drop-down select {
    padding: 3px;
    padding-left: 0px;
    font-size: .7em;
    /* background: linear-gradient(#EEEEEE, #CFCFCF); */
    color: black;
    font-size: 1.2em;
    line-height: normal;
    padding-left: .2rem;
    padding-right: .2rem;
    background-color: transparent;
    color: white;
    border: solid 1px darkgray;
}
.drop-down.list .selected-item {
    display:none;
}
.drop-down.list .items {
    display: flex;
    position: relative;
    box-shadow: none;
    border: 1px solid #444;
    border-radius: 3px;
    position: relative;
    z-index:0;
}
.drop-down .items .item {
    color:var(--bs-body-color);
    color:white;
}
.drop-down.list .items button,
.drop-down.has-checkboxes .items button {
    padding: 0.25rem 0.5rem;
    font-size: 1rem;
    display: flex;
    align-items: center;
    color: white;
    border-radius: 0;
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
}
.drop-down.list .items button.selected,
.drop-down.has-checkboxes .items button.selected {
    background-color: dodgerblue !important;
    color: white !important;
    opacity: 1;
}
.drop-down.list .items .form-check-input,
.drop-down.has-checkboxes .items .form-check-input{
    margin-top: 0;
    margin-right: 0.25rem;
}
.drop-down.list .items button label,
.drop-down.has-checkboxes .items button label {    
    flex: 1;
}
.drop-down.list .items button.expand-button,
.drop-down.has-checkboxes .items button.expand-button{  
    opacity: 1;
    color: white;
}
.drop-down.list .items button.expand-button i,
.drop-down.has-checkboxes .items button.expand-button i{   
    transform: rotateZ(180deg);
    transition: .2s;
}
.drop-down.list .items button.expand-button.expanded i,
.drop-down.has-checkboxes .items button.expand-button.expanded i{   
    transform: rotateZ(0deg);
}

#up-next-info .drop-down {
    position: fixed;
    bottom: 70%;
    /* padding: 0.5rem 1.5rem; */
    left: 4.2rem;
    background-color: transparent;
    /* border: solid 1px black; */
    /* margin-left: 1rem; */
    width: 175px;
    font-size: 1.2rem;
    background-color: rgba(0,0,0,.5);
}
#up-next-info .drop-down .selected-item {
    background-color: transparent;
    color: white;
    /*font-weight: bold;*/
    padding: .5rem 1rem;
    align-items: flex-end;
    padding-right: 1.25rem;
}
#up-next-info .drop-down .selected-item i {
    /*margin-left:.25rem;*/
}
#up-next-info .drop-down .items .item {
    padding: 1.5rem 1.5rem;
}

.app-form-field > .drop-down {
    font-size: 1.2rem;
   /* margin-bottom: 0.5rem;*/
    width:100%;
}
.app-form-field.no-padding > .drop-down {
    margin-bottom: 0.25rem;
}
.app-form-field > .drop-down:focus .selected-item,
.app-form-field > .drop-down.focused .selected-item,
.app-form-field > .drop-down.show .selected-item {
    border:solid 1px #1d8cf8 !important;
}
/*.app-form-field > .drop-down .selected-item {
    padding: 0.5rem 0.5rem !important;
}*/
.app-form-field > .drop-down .selected-item:focus {
    border:solid 1px #1d8cf8 !important;
}
.app-form-field > .drop-down.show .items {    
    width: 100%;
    border: solid 1px #1d8cf8;
}


.library-types-scroll-button {
    color: white;
    transition: .3s;
}
body:not(.mobile-device) .library-types-scroll-button:hover {
    opacity: 1;
}
.library-types-scroll-button:focus {
    opacity:1;
}
.library-types-scroll-button:active {
    opacity:.8;
}
.no-scroll .library-types-scroll-button {
    display:none;
}
.no-scroll-left .library-types-scroll-button.left {
    display: none;
}
.no-scroll-right .library-types-scroll-button.right {
    display: none;
}


.library-types-scroll-button.left {
   /* background-image: linear-gradient(to right, rgba(25,25,25,1), rgba(25,25,25,.3));*/
    left: 0;
    border-top-right-radius:5px;
    border-bottom-right-radius:5px;
}
/*.library-types-scroll-button.left {
    background-image: linear-gradient(to right, rgba(25,25,25,1), rgba(25,25,25,.7));
}*/
.library-types-scroll-button.right {
   /* background-image: linear-gradient(to right, rgba(25,25,25,.3), rgba(25,25,25,1));*/
    right: 0;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
/*.library-types-scroll-button.right {
    background-image: linear-gradient(to right, rgba(25,25,25,.7), rgba(25,25,25,1));
}*/
.library-types-scroll-button i {
    padding: 1rem 1.5rem;
}
.library-types-scroll-button.left i {
}
.library-types-scroll-button.right i {
}
.no-items .library-types-scroll-button {
    display:none;
}

.show-schedule .list-view-schedule {
    display: flex;
    z-index: 3;
}

.loading .list-view-schedule {
    display: none;
}

.list-view-schedule {
    display: none;
    flex-direction: column;
    flex: 1;
    position: absolute;
    left: 0px;
    right: 0px;
    /*bottom: 0px;
    top: 0px;*/
    width: 100%;
    padding: 0px;
    background-color: whitesmoke;
}

.list-view-schedule-hours {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 5;
}

.list-view-schedule-channels {
    display: flex;
    flex-direction: column;
}

.list-view-schedule-channel-item {
    display: flex;
}

.list-view-schedule-channel {
    display: flex;
    border-right: solid 1px rgba(0,0,0,.05);
    background-color: whitesmoke;
    color: gray;
    padding: 5px;
    display: flex;
    align-items: center;
    max-width: 120px;
    min-width: 120px;
    height: 50px;
    position: sticky;
    left: 0;
    justify-content: flex-end;
    font-size: .9rem;
    border-bottom: solid 1px rgba(0,0,0,.05);
    z-index: 5;
}

.list-view-schedule-channel-image {
    max-width:30px;
    max-height:30px;
}
.list-view-schedule-channel-name {
    margin-left: 5px;
    text-align: right;
    margin-right: 5px;
    width: min-content;
    overflow: hidden;
    text-overflow: ellipsis;
}

.list-view-schedule-channel-dates {
    display:flex;
}
.list-view-schedule-channel-date-item {
    display: flex;
}
.has-channels .list-view-schedule-date.data {
    display:none;
}

#player .library-groups-selected-item {
    -webkit-box-shadow: none;
    box-shadow: none;
    z-index: 1000;
    transform: none;
}
/*.library-groups-selected-item.single .library-item .cache-progress .cache-button {
    display: none;
}*/
.player.playback-attached .library-groups-selected-item {
    position: absolute;
}

.player.view.playback-attached .library-groups-selected-item {
    position: absolute;
}


.divider {
    overflow: auto;
    margin-left: 1.4rem;
    margin-top: .5rem;
    border-top: solid 1px rgba(100,100,100,.3);
    /* padding-top: .7rem; */
    margin-right: 1.4rem;
    position: relative;
}
.library-groups-selected-item .divider {
    overflow: visible;
    z-index: 500;
    margin-right: 1.8rem;
    margin-bottom: .5rem;
}
body.light-mode .divider {
    border-top: solid 1px lightgray;
}
.has-seasons .divider {
    display: none;
}
.has-discs .divider {
    display: none;
}
.list-view-schedule-channel.header {
    font-size: .8rem;
    height: 13px;
    background-color: #0069D9 !important;
    border-bottom: none;
}

.list-view-schedule-dates {
    display: flex;
    flex-direction: column;
}

.list-view-schedule-date-item {
    display: flex;
}

.list-view-schedule-date {
    white-space: nowrap;
    border-right: solid 1px rgba(0,0,0,.05);
    background-color: whitesmoke;
    color: gray;
    padding: 5px;
    display: flex;
    align-items: center;
    width: 80px;
    min-width: 80px;
    height: 50px;
    position: sticky;
    left: 0;
    justify-content: flex-end;
    font-size: .9rem;
    border-bottom: solid 1px rgba(0,0,0,.05);
    z-index: 5;
}

.list-view-schedule-date.header {
    font-size: .8rem;
    height: 13px;
    background-color: #0069D9 !important;
    border-bottom: none;
}
.has-channels .list-view-schedule-date.header {
    width: 120px;
    min-width: 120px;
    display:none;
}
.has-channels .list-view-schedule-date.header:first-of-type {
    display:unset !important;
}

.list-view-body.show-schedule {
    background-color: whitesmoke;
}

.list-view-schedule-hour {
    white-space: nowrap;
    border-right: solid 1px rgba(0,0,0,.03);
    /*background-color: #0069D9 !important;
    color: white;*/
    background-color: whitesmoke;
    color: gray;
    padding: 5px 0px;
    display: flex;
    align-items: flex-end;
    width: 240px;
    height: 50px;
    border-bottom: solid 1px rgba(0,0,0,.05);
}

    .list-view-schedule-hour.data {
        align-items: flex-start;
        /*background-color: #fff;*/
    }
    /*body:not(.mobile-device) .list-view-schedule-hour.data:hover {
    background-color: lightgray;
    color: whitesmoke;
}*/
    .list-view-schedule-hour.header {
        font-size: .8rem;
        height: 13px;
        background-color: #0069D9 !important;
        color: white;
        /*position: sticky;
    top: 0;*/
        border-bottom: none;
        position: relative;
        width: 240px;
        min-width: 240px;
    }

        .list-view-schedule-hour.header > span {
            padding-left: 5px;
            padding-right: 0px;
            text-transform: uppercase;
        }

        .list-view-schedule-hour.header.on-now > span {
            color: #FFAB15;
            font-weight: bold;
        }
.has-channels .list-view-schedule-hour {
    max-width: 240px;
    border-right: solid 1px rgba(0,0,0,.05);
}

.list-view-schedule-media {
    display: flex;
    border-left: solid 1px rgba(0,0,0,.1);
    position: relative;
    background-color: whitesmoke;
    height: 59px;
    top: -5px;
}

    .list-view-schedule-media.rollover {
        border-left: none;
    }

.list-view-schedule-media-info {
    border: solid 1px transparent;
    position: relative;
}

.list-view-schedule-media-name {
    font-size: .9rem;
    color: black;
    overflow: hidden;
    text-overflow: ellipsis;
    order: 0;
    padding: 0px 5px;
    padding-bottom: 5px;
    padding-right: 0;
}

.list-view-schedule-media-name2 {
    font-size: .7rem;
    color: dimgray;
    overflow: hidden;
    text-overflow: ellipsis;
    order: 3;
    padding: 0px 5px;
    padding-right: 0;
}

.list-view-schedule-media-time {
    display: flex;
    align-items: center;
}

.list-view-schedule-media-date {
    font-size: .8rem;
    padding-top: 4px;
    color: black;
    padding: 0px 5px;
    padding-bottom: 5px;
    padding-right: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.list-view-schedule-media-on-now {
    display: none;
    color: #FFAB15;
    font-weight: bold;
    opacity: 1;
    text-transform: uppercase;
    font-size: .8rem;
    padding-top: 4px;
    padding: 0px 5px;
    padding-bottom: 5px;
    padding-right: 0;
    overflow:hidden;
    text-overflow:ellipsis;
}

.list-view-schedule-media-on-now-spacer {
    display: none;
    margin-left: 7px;
    margin-right: 0px;
    font-size: .8rem;
    padding-left: 0;
    padding-bottom: 5px;
    padding-right: 0;
    overflow: hidden;
}

.list-view-schedule-media.on-now .list-view-schedule-media-on-now-spacer {
    display: block;
}

.list-view-schedule-media.on-now .list-view-schedule-media-on-now {
    display: block;
}

.list-view-schedule-media-position {
    display: none;
    position: absolute;
    bottom: -1px;
    left: 0;
    height: 2px;
    background-color: #FFAB15;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.list-view-schedule-media.on-now .list-view-schedule-media-position {
    display: block;
}

.list-view-schedule-media-image {
    max-height: 60px;
    display: none;
}

.list-view-schedule-media.rollover .list-view-schedule-media-image {
    display: none;
}

.list-view-schedule-media-info {
    display: flex;
    flex-direction: column;
    padding: 5px 0px;
    transition: .2s;
    cursor: pointer;
}
body.no-transition .list-view-schedule-media-info {
    transition: none !important;
}

body:not(.mobile-device) .list-view-schedule-media:hover .list-view-schedule-media-info {
    background-color: darkgray;
    /*border: solid 1px gray;*/
}

body:not(.mobile-device) .list-view-schedule-media:hover .list-view-schedule-media-name {
    color: black;
}

body:not(.mobile-device) .list-view-schedule-media:hover .list-view-schedule-media-name2 {
    color: black;
}

body:not(.mobile-device) .list-view-schedule-media:hover .list-view-schedule-media-date {
    color: black;
}

body:not(.mobile-device) .list-view-schedule-media:hover .list-view-schedule-media-on-now-spacer {
    color: black;
}

.list-view-schedule-media.selected .list-view-schedule-media-info {
    background-color: rgba(0, 105, 217, 1);
    border: 1px solid #0069D9;
}

body:not(.mobile-device) .list-view-schedule-media.selected:hover .list-view-schedule-media-info {
    background-color: rgba(0, 105, 217, .8);
    border: 1px solid #0069D9;
}

.list-view-schedule-media.selected .list-view-schedule-media-name {
    color: white;
}

.list-view-schedule-media.selected .list-view-schedule-media-name2 {
    color: whitesmoke;
}

.list-view-schedule-media.selected .list-view-schedule-media-date {
    color: white;
}

.list-view-schedule-media.selected .list-view-schedule-media-on-now-spacer {
    color: white;
}
/*.list-view-schedule-hour.on-now .list-view-group-item-on-now-spacer {
    display: block;
    margin-left:9px;
}
.list-view-schedule-hour.on-now .list-view-group-item-on-now {
    display: block;
}*/
/*.list-view-schedule-hour.on-now .list-view-group-item-position {
    display: block;
}*/





/* GRID */
/*html,
.scroll-container {
    overflow: scroll;
}

html,
.scroll-container {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion) {
    html,
    .scroll-container {
        scroll-behavior: auto;
    }
}*/

#library-schedule #grid-guide {
    /*-webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow: scroll;
    width: 100%;
    height: 100%;
    position: relative;
    background: #1c1c1c;
    touch-action: none;
    display: flex;
    flex-direction: column;*/
    /* background: #1c1c1c;
    background: #12121A;
    background: #141414;*/
    position: absolute;
    left: 0;
    top: 32px;
    right: 0;
    bottom: 0;
    display: flex;
    left: 70px;
    right: -70px;
}
body.library-selection #library-schedule #grid-guide {
    z-index: 500;
}

/*#grid-guide {
    position: relative;
    overflow: auto;
    width: 100%;
    margin-top: .5rem;
}*/

#library-schedule .grid_guide__container, .guide-content {
    outline: none;
}
#library-schedule .grid_guide__wrapper {
    pointer-events: auto;
    position:absolute;
    left:150px;
}
#library-schedule .grid_guide__container .grid_guide__wrapper {
    position: fixed;
}
#library-schedule .arrow-container {
    position: relative;
    width: 100vw;
    z-index: 2;
    top: 0;
}
#library-schedule .arrow-left-container {
    width: 80.5px;
    display: flex;
    justify-content: flex-end;
}
#library-schedule .arrow-container button.arrow {
    background: transparent;
    position: fixed;
    height: 32px;
    width: 32px;
    padding: 2px 0 0;
    color: #999;
    cursor: pointer;
    outline: none;
    border: none;
    transition: .2s;
}
body.tv-device #library-schedule .arrow-container button.arrow {
    transition: none !important;
}
#library-schedule .arrow-container button.arrow.left {
    text-align: right;
    padding-right: 9px;
    border-right: 2px solid #323232;
    background-color: #1C1C22;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}
#library-schedule .arrow-container button.arrow.right {
    right: 0;
    /* background-image: linear-gradient(90deg,rgba(40,38,31,.1),#1C1C22 40%);*/
    background-color: #1C1C22;
    border-left: 2px solid #323232;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

#library-schedule .arrow-container button.arrow:disabled {
    cursor: default;
}
#library-schedule .arrow-container button.arrow i {
    color: white;
    transition: .2s;
}
#library-schedule .arrow-container button.arrow:focus i {

}
#library-schedule .arrow-container button.arrow:active i {

}
body:not(.mobile-device) #library-schedule .arrow-container button.arrow:hover i {
}
#library-schedule .arrow-container button.arrow:focus {
    background-color: #0d6efd;
    opacity: 1;
}
#library-schedule .arrow-container button.arrow:active {
    background-color: #0d6efd;
    opacity: .8;
}
#library-schedule .arrow-container button.arrow.selected {
    background-color: #0d6efd;
    opacity: 1;
}
body:not(.mobile-device) #library-schedule .arrow-container button.arrow:hover {
    background-color: #444;
    opacity: 1;
}
#library-schedule .arrow-container button.arrow.left:focus {
    border-right-color: #0d6efd;
}
#library-schedule .arrow-container button.arrow.left:active {
    border-right-color: #0d6efd;
}
#library-schedule .arrow-container button.arrow.left.selected {
    border-right-color: #0d6efd;
}
body:not(.mobile-device) #library-schedule .arrow-container button.arrow.left:hover {
    border-right-color: #444;
}
#library-schedule .arrow-container button.arrow.right:focus {
    border-left-color: #0d6efd;
}
#library-schedule .arrow-container button.arrow.right:active {
    border-left-color: #0d6efd;
}
#library-schedule .arrow-container button.arrow.right.selected {
    border-left-color: #0d6efd;
}
body:not(.mobile-device) #library-schedule .arrow-container button.arrow.right:hover {
    border-left-color: #444;
}

.no-player-hilite #library-schedule .arrow-container button.arrow:focus i {
    transform: scale(1.4);
}
body:not(.mobile-device).no-player-hilite #library-schedule .arrow-container button.arrow:hover i {
    transform: scale(1.4);
}
.no-player-hilite #library-schedule .arrow-container button.arrow:active i {
    transform: scale(1.2);
}
body.no-transition #library-schedule .arrow-container button.arrow i {
    transition: none !important;
    transform: none !important;
}

#library-schedule .arrow-container button.arrow:disabled i {
    opacity:.3 !important;

}

#library-schedule .ruler-container {
    position: absolute;
    left: 150px;
    width: calc(100% - 150px);
    height: 35px;
    overflow: scroll;
    display:flex;
}
#library-schedule .ruler-container::-webkit-scrollbar {
    display: none;
}

#library-schedule .ruler-container .ruler-unit-container {
    display: flex;
}

#library-schedule .ruler-container .grid-guide-ruler {
    backface-visibility: hidden;
    position: relative;
}
#library-schedule .channel-data-items {
    position: relative;
    flex: 1;
}
#library-schedule .channel-data-scroller {
    height: 32px;
    min-height:32px;
    display: flex;
    position: absolute;
   /* background-color:red;*/
    pointer-events:none;
}
#library-schedule .ruler-container .grid-guide-ruler .ruler .ruler-unit {
    height: 32px;
    border-right: 2px solid #323232;
    /*background-color: #1C1C22;*/
    display: flex;
    justify-content: flex-end;
    FLEX-DIRECTION: column;
}
#library-schedule .ruler-container .grid-guide-ruler .ruler .ruler-unit.current {
    opacity: 1;
}
/*body:not(.mobile-device) #library-schedule .ruler-container .grid-guide-ruler .ruler .ruler-unit:hover {
    background-color: #3e3e3e !important;
}*/
#library-schedule .ruler-container .grid-guide-ruler .ruler-time {
    padding-left: 10px;
    font-size: 16px;
    /*color: #999;*/
    flex: 1;
    align-items: center;
    display: flex;
}
#library-schedule .ruler-container .grid-guide-ruler .ruler .ruler-unit.current .ruler-time {
    color: #FFAB15;
}
#library-schedule .ruler-container .grid-guide-ruler .current-time {
    display: none;
    width: 0%;
    height: 4px;
    background: #069;
    position:relative;
}
#library-schedule .ruler-container .grid-guide-ruler .ruler-unit.current .current-time {
    display:block;
}
#library-schedule .ruler-container .grid-guide-ruler .current-time .current-time-ball {
    height: 10px;
    width: 10px;
    border-radius: 10px;
    display: block;
    position: absolute;
    top: -3px;
    right: -9px;
    background-color: #069;
}

.library-group-details .expires {
    display: flex;
    text-align: left;
    /* width: 100%; */
    padding: 1rem 1.5rem;
    padding-top: 0px;
    padding-bottom: .3rem;
    color: #FFAB15;
    /* font-weight: bold; */
    font-size: 1.2rem;
    /* margin-left: 3px; */
    align-items: center;
    font-weight:bold;
}
.library-group-details .library-item-data .expires {
    padding: 0;
    padding-top: 3px;
    font-weight: bold;
}
.single .library-group-details .library-item-data .expires {
    display: none;
}

.library-item-data .info1 .name-info {
    padding-bottom:3px;
}

.library-item-categories {
    padding: 1rem 1.5rem;
}
.library-item-category {
    transition: .2s;
    margin-right: 1.5rem;
}

body.hide-dms-controls #player-controls-container {
    display: none !important;
}
body.hide-dms-controls .player-data-summary {
    display: none !important;
}
body.hide-dms-controls .playerDataControls-bottom {
    display: none !important;
}
body.hide-dms-controls #playerControls .metadata-item-header {
    margin-top: 0rem;
    padding-top: 0px;
}
body.hide-dms-controls #playerControls .metadata-item-header-info {
    display:none;
}
body.hide-dms-controls #playerControls .metadata-item-header {
    display: none;
}

body.hide-dms-controls #playerDataUpNext {
    top: 29% !important;
    bottom: unset;
}

#library-schedule .time-info {
    /*position:sticky;
    top:0px; 
    z-index: 2;*/
    height: 32px;
    z-index: 1;
    left: 70px;
    right: -70px;
    position: absolute;
}
body.library-selection #library-schedule .time-info {
    z-index: 500;
}
#library-schedule .channel-info {
    position:sticky;
    left:0px;
    flex: 1;
    display: flex;
}
#library-schedule .channel-unit-container {
    position: sticky;
    left: 0px;
    width: 150px;
    min-width: 150px;
    z-index: 2;
    overflow: scroll;
}
#library-schedule .channel-unit-container::-webkit-scrollbar {
    display: none;
}
#library-schedule .channel-units {
    width: 100%;
    z-index: 1;
}
#library-schedule .channel-unit {
    width: 100%;
    /* background-color: #1c1c1c;
    background-color: #12121A;
    background-color: #141414;*/
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 13px;
    transition: .2s;
    cursor: pointer;
    /*opacity:.8;*/
    text-align: center;
    font-size: 1rem;
    border-right: solid 2px rgba(100,100,100,.3);
    min-height: 75px;
    white-space: normal;
    height: 78px;
    height: 140px;
    overflow: hidden;
}
body.no-transition #library-schedule .channel-unit {
    transition: none !important;
}
#library-schedule .channel-unit:focus {
    color: #fff;
    border-color: #0d6efd;
    background: #0d6efd;
    opacity: 1;
}
#library-schedule .channel-unit.selected {
    color: #fff;
    border-color: #0d6efd;
    background: #3e3e3e;
    opacity: 1;
}
body:not(.mobile-device) #library-schedule .channel-unit:hover {
    background-color: #3e3e3e;
    opacity: 1;
    color: #fff;
}
#library-schedule .channel-unit:active {
    color: whitesmoke;
    border-color: #0d6efd;
    background: #0d6efd;
}



#library-schedule .channel-unit img {
    max-width: 115px;
    max-height: 115px;
}
#library-schedule .channel-unit .name {
    margin-top:5px;
    margin-bottom:5px;
}

#library-schedule .channel-data-container {
    /*position:relative;
    top: 32px;*/
    flex: 1;
    position: absolute;
    left: 150px;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    overflow: auto;
}
body.tv-device #library-schedule .channel-data-container {
    overflow:hidden;
}
#library-schedule .channel-data {
    width: 100%;
    overflow: hidden;
    display: flex;
    border-bottom: solid 1px #323232;
    height: 78px;
    height: 140px;
}
#library-schedule .channel-item {
    display: flex;
    align-items: center;
    color: white;
    background-color: #1c1c1c;
    background-color: #12121A;
    background-color: #141414;
    background: #12121A;
    background: #141414;
    border: solid 1px transparent;
    border-right: solid 1px #323232;
    transition: .2s;
    cursor: pointer;
    color: #999;
    position: relative;
}
#library-schedule .channel-item-container {
    display:flex;
}
#library-schedule .channel-item.on-now {
    color: lightgray;
    border-bottom: 0px;
}
#library-schedule .channel-item:active {
    color: whitesmoke;
    border-color: #3e3e3e;
    background: #323232;
    opacity:.9;
}
#library-schedule .channel-item.selected {
    color: whitesmoke;
    border-color: #323232;
    background: #323232;
}
body:not(.mobile-device) #library-schedule .channel-item:hover {
    color: #fff;
    border-color: #323232;
    background: #3e3e3e;
}
#library-schedule .channel-item:focus {
    color: #fff;
    border-color: #3e3e3e;
    background: #3e3e3e;
}
body.no-transition #library-schedule .channel-item {
    transition: none !important;
}
#library-schedule .channel-item-info {
    display: flex;
    flex-direction: column;
    padding: px 2px;
    padding-left: 5px;
    position: relative;
    text-align: left;
    /* line-height: 1rem; */
    font-size: 1.2em;
    flex: 1;
    height: 100%;
    justify-content: center;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}
#library-schedule .channel-item-name {
    font-size: 1em;
    color: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    order: 0;
    font-weight: bold;
    white-space:nowrap;
}
#library-schedule .channel-item-name2 {
    font-size: .8em;
    color: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-top: 0;
    padding-bottom: .2em;
}
#library-schedule .channel-item-time {
    display: flex;
    font-size: .9em;
    overflow: hidden;
    text-overflow: ellipsis;
}
#library-schedule .channel-item-time-date {
    font-size: .8em;
    color: #FFAB15;
    overflow: hidden;
    text-overflow: ellipsis;
}
#library-schedule .channel-item-time-on-now-spacer {
    display: none;
    font-size: .8em;
    padding-left: .5em;
    padding-right: .5em;
    overflow: hidden;
    text-overflow: ellipsis;
}
#library-schedule .channel-item.on-now .channel-item-time-on-now-spacer {
    display: flex;
}
#library-schedule .channel-item-time-on-now {
    display: none;
    font-size: .8em;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #FFAB15;
    font-weight: bold;
    opacity: 1;
    text-transform: uppercase;
}
#library-schedule .channel-item.on-now .channel-item-time-on-now {
    display: flex;
}
#library-schedule .channel-item-time-position {
    display: none;
    position: absolute;
    bottom: 0px;
    left: 0;
    height: 2px;
    background-color: #FFAB15;
    /*border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;*/
}
#library-schedule .channel-item-time-position-ball {
    height: 5px;
    width: 5px;
    border-radius: 10px;
    display: block;
    position: absolute;
    top: -1px;
    right: -2px;
    background-color: #FFAB15;
    display:none;
}
#library-schedule .channel-item.on-now .channel-item-time-position {
    display:flex;
}
/*#library-schedule .loader-container {
    position: absolute;
    z-index: 0;
    justify-content: flex-start;
    top: 13rem;
}*/
#library-schedule .loader-container {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

.ad-container {
    display: none;
    position: absolute;
    /*left: 0;
    top: 0;
    right: 0;
    bottom: 0;*/
    /* left: 0; */
    top: 100px;
    right: 100px;
    width: 25%;
    height:100%;
    max-height: 300px !important;
    /*z-index: 10000;*/
    z-index: 100;
    border: 0;
    margin: 0;
    background-color: black;
    transition:.3s;
    opacity:0;
}
.player.show-ad .ad-container {
    display: flex !important;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    opacity:1;
}

.ad-container-timer {
    display: none;
    position: absolute;
    /*top: 13px;
    left: 22px;*/
    top: 80px;
    right: 105px;
    color: white;
    /* background-color: black; */
    font-size: 12px;
    z-index: 10001;
    pointer-events: none;
    transition: .3s;
    opacity: 0;
}
.player.show-ad .ad-container-timer {
    display: flex;
    opacity: .9;
}

.ad-container iframe {
    display:block;
    width:100%;
    height:100%;
}

.adsbygoogle {
    display:block;
    width:100%;
    height:100%;
    text-align:center;
}

@media only screen and (min-width: 2400px) {
    #playerControls.video #volume-bar-container {
        flex: .87 !important;
    }
}

@media only screen and (max-height: 400px) {
    /*.player-data-header {
        margin-top: 20px;
    }*/
}

@media only screen and (max-height: 600px) {

    #playerControls .metadata-item-header-info {
        padding-left: 2rem;
        padding-right: 1rem;
        padding-top: 0rem;
    }

    #playerControls .metadata-item-header-info-description {
        font-size: 1rem !important;
        line-height: 1.6rem !important;
       /* line-height: 2.4rem !important;*/
        /*padding-top:2rem !important;*/
    }
}


@media only screen and (max-width: 800px) {
    #playerControls .volume-bar {
        margin-left: 0px;
    }
}
/*
@media only screen and (max-width: 1200px) {

    #playerSubtitlesInfo {
        font-size: 36px;
        line-height: 110%;
    }
}

@media only screen and (max-width: 800px) {

    #playerSubtitlesInfo {
        font-size: 24px;
        line-height: 100%;
    }
}

@media only screen and (max-height: 800px) {

    #playerSubtitlesInfo {
        font-size: 36px;
        line-height: 110%;
    }
}


@media only screen and (max-height: 400px) {

    #playerSubtitlesInfo {
        font-size: 24px;
        line-height: 110%;
    }
}

@media only screen and (max-height: 350px) {

    #playerSubtitlesInfo {
        font-size: 12px;
        line-height: 110%;
    }
    #playerSubtitlesDelay {
        font-size:24px;
    }
}*/


@media only screen and (max-height: 1000px) {
    #playerControls.video .metadata-item-image {
        height: 480px;
    }
    
    .metadata-item-image img {
        max-width: 480px !important;
        max-height: 480px !important;
    }
}

.player.view button {
    outline:none !important;
}

@media only screen and (max-width: 800px) {
    /*#playerControls.video #volume-bar-container, #playerControls #player-options-container, #playerControls #player-view-container {
        display: none;
    }*/
/*
    #playerControls #player-control-buttons .control-button.previous-chapter {
        display: none;
    }

    #playerControls #player-control-buttons .control-button.next-chapter {
        display: none;
    }*/

    #playerControls #playlistItems {
        margin-right: 0 !important;
    }
}
@media only screen and (max-width: 600px) {
    /*#playerControls #player-control-buttons {
        justify-content: flex-start;
        padding-left: 1rem;
        padding-right: 1.5rem;
        flex: unset;
    }
    #playerControls #player-control-buttons .control-button.previous {
        display: none;
    }
    #playerControls #player-control-buttons .control-button.next {
        display: none;
    }
    #playerControls #player-control-buttons {
        order: 0;
    }
    #playerControls #player-control-buttons .play-pause-toggle {
        margin-right:0;
    }
    #playerControls #player-options-container {
        margin-left: 0;
        margin-right: 0;
        order: 1;
        flex: unset;
    }
    #playerControls #controls-container {
        margin-left:20px;
    }

    #playerControls #player-view-container {
        margin-left: 0;
        margin-right: 0;
        order: 2;
    }*/
    #playerOptionFullscreen {
        margin-right: 5px;
    }
    #playerSelectOptions {
        margin-left:0.4rem;
    }
    #player-view-container .icons {
        margin-left:10px;
    }
    .player-data-header {
        margin-left: 1px;
    }
    #playerDataClose {
        margin-right: 8px;
    }

    

}
@media only screen and (max-width: 400px) {
    
}


@media only screen and (max-height: 800px) {

    .current-info-row {
        font-size: 12px;
    }
    #up-next-info {
        bottom: 23%;
    }

    #playerControls.video .metadata-item-image {
        height: 360px;
    }
    .metadata-item-image img {
        max-width: 360px !important;
        max-height: 360px !important;
    }
}

@media only screen and (max-height: 800px) {

    #up-next-info.clean .library-group img {
        max-width: 180px !important;
        max-height: 180px !important;
    }

    #up-next-info.clean .library-group .container {
        max-width: 180px;
    }

    #up-next-info.clean .library-group .name {
        font-size: .9rem;
    }

    #up-next-info.clean .library-group {
        margin: 6px;
    }

    #playerDataUpNext #playerDataUpNext1 {
        font-size: 1.1rem;
        padding-bottom: 5px;
    }

    #playerDataUpNext #playerDataUpNext2 {
        font-size: .8rem;
        padding-bottom: 4px;
    }

    #playerDataUpNext #playerDataUpNext3 {
        font-size: .7rem;
    }

    #playerDataUpNext #playerDataUpNext4 {
        font-size: .7rem;
    }
    .player-data-summary {
        margin-top: 1.7rem;
    }
    #playerControls #playerDataSummary1 {
        font-size: 1.4rem;
        line-height: 1.4;
    }

    #playerControls #playerDataSummary2 {
        font-size: .9rem;
        margin-bottom: 7px;
    }

    #playerControls #playerDataSummary3 {
        font-size: .8rem;
        padding-bottom: 2px;
    }

    #playerControls #playerDataSummary4 {
        font-size: .8rem;
    }

    #playerControls #playerDataSummary5 {
        font-size: .8rem;
    }

    #playerControls .metadata-item-header-info {
        padding-top: 0rem;
    }

    #playerControls .metadata-item-header-info-description {
        font-size: 1.3rem;
        line-height: 1.9rem;
        line-height: 2.4rem !important;
    }

}

@media only screen and (min-height: 1000px) {
    #up-next-info.clean .library-group img {
        max-width: 360px !important;
        max-height: 360px !important;
    }

    #up-next-info.clean .library-group .container {
        max-width: 360px;
    }

    #up-next-info.clean .library-group .name {
        font-size: 1.1rem;
    }

    #up-next-info.clean .library-group {
        margin: 10px;
    }

    #playerDataUpNext #playerDataUpNext1 {
        font-size: 1.6rem;
    }

    #playerDataUpNext #playerDataUpNext2 {
        font-size: 1rem;
    }

    #playerDataUpNext #playerDataUpNext3 {
        font-size: .9rem;
    }

    #playerDataUpNext #playerDataUpNext4 {
        font-size: .9rem;
    }

    #playerControls #playerDataSummary1 {
        font-size: 2rem;
    }

    #playerControls #playerDataSummary2 {
        font-size: 1.1rem;
        margin-bottom: 5px;
    }

    #playerControls #playerDataSummary3 {
        font-size: .9rem;
        padding-bottom: 2px;
    }

    #playerControls #playerDataSummary4 {
        font-size: .9rem;
    }
    #playerControls #playerDataSummary5 {
        font-size: .9rem;
    }
}

@media only screen and (max-width: 400px) {
    #up-next-info {
        bottom: 19% !important;
    }

        #up-next-info .library-group img {
            max-width: 180px !important;
            max-height: 180px !important;
        }

    #library-screen .library-groups {
        padding-left: 1rem !important;
    }

    #playlists-screen .library-groups {
        padding-left: .7rem !important;
        padding-top: 0 !important;
    }

    #playerControls .metadata-item-header-info-description {
        font-size: 1.1rem !important;
        line-height: 1.4rem !important;
        line-height: 2.4rem !important;
    }


}

@media only screen and (min-height: 801px) {
    #up-next-info {
        bottom: 33% !important;
    }

        #up-next-info.clean {
            bottom: 17% !important;
        }
    /*.mobile-device #up-next-info.clean {
        bottom: 29% !important;
    }*/
    }

@media only screen and (min-height: 1000px) {
    #up-next-info.clean {
        bottom: 19% !important;
    }
}

@media only screen and (max-height: 600px) {
    #playerControls.video .metadata-item-image {
        height: 300px;
    }
    .metadata-item-image img {
        max-width: 300px !important;
        max-height: 300px !important;
    }
}


/*@media only screen and (min-height: 1000px) {
    #up-next-info {
        bottom: 33%;
    }
}*/


@media only screen and (max-width: 800px) {

    #playerControls .metadata-item-header {
        padding-left: 0;
        justify-content: center;
    }
    #playerControls .metadata-item-header-info {
        display:none;
    }
    #playerControls .metadata-item-image {
        padding-left: 0;
    }
    #playerControls .volume-bar {
        margin-left: 0px;
    }
    .library-groups-selected-item.fixed-window {
        left: 0;
        transform: none;
        width: unset !important;
        margin-top: 0;
        padding-top: 0;
        top: 0;
        border-radius: 0;
        left: 0 !important;
        transform: none !important;
        left: 4rem !important;
        top: 0rem !important;
        border-radius: 0px !important;
    }
    .library-groups-selected-item.fixed-window .library-group-details {
        border-radius: 0px !important;
    }
    .library-groups-selected-item.fixed-window .library-group-details > .image {
        max-width: calc(100% - 4rem) !important;
    }
    .library-groups-selected-item.fixed-window .library-group-info-wrapper {
        max-width: calc(100% - 4rem) !important;
    }
    /*.related-container .library-group {
        width: 170px !important;
        min-width: 170px !important;
    }*/
}
@media only screen and (max-width: 600px) {
    #playerDataUpNext {
        right: 18px;
    }
    /*#playerDataMute {
        margin-right: -2px;
    }*/
    .section-grid .library-group {
        width: 370px !important;
        min-width: 370px !important;
    }
    .section-grid .library-group .image {
        width: 370px !important;
    }
    .section-grid .library-group .image img {
        max-width: 370px !important;
    }
}
@media only screen and (max-height: 600px) {

    .current-info-row {
        font-size: 10px;
    }
}
@media only screen and (max-height: 500px) {

    #playerControls .metadata-item-header {
      /*  padding-left: 0;
        justify-content: center;*/
         padding-top: 1rem;
    }
    body.hide-dms-controls #playerControls .metadata-item-header {
        margin-top: -3rem;
        padding-top: 0px;
    }
    body.hide-dms-controls #playerDataUpNext {
        top: 29% !important;
        bottom: unset;
    }

    #playerControls .metadata-item-header-info {
       /* display: none;*/
    }

    #playerControls .metadata-item-image {
        padding-left: 0;
    }
    .metadata-item-image img {
        max-width: 230px !important;
        max-height: 230px !important;
    }
}
@media only screen and (max-height: 400px) {
    .metadata-item-image img {
        max-width: 180px !important;
        max-height: 180px !important;
    }
    #playerControls.video .metadata-item-image {
        height: unset !important;
    }
    #playerControls .metadata-item-header {
        position: relative;
        top: -1rem;
    }
    /*#playerDataControls {
        top: 5px !important;
    }*/
    body:not(.mobile-device) .player-data-summary {
        margin-top: 0rem !important;
    }
}
@media only screen and (max-height: 340px) {
    .playerDataControls-bottom {
        display: none;
    }
}
@media only screen and (max-height: 300px) {
    .metadata-item-image img {
        max-width: 120px !important;
        max-height: 120px !important;
    }
}
@media only screen and (max-height: 250px) {
    #playerDataUpNext {
        display:none !important;
    }
    #playerDataUpNext.show {
        display:none !important;
    }
    .player-data-image {
        display: none !important;
    }
}
@media only screen and (max-height: 200px) {
    .metadata-item-image img {
        max-width: 90px !important;
        max-height: 90px !important;
    }
    #player-data-channel {
        right: 30px;
        bottom: 30px;
        transform:scale(.8);
    }
}
@media only screen and (max-height: 150px) {
    .player-data-header {
        display:none !important;
    }
    #player-data-channel {
        right: 20px;
        bottom: 20px;
        transform: scale(.7);
    }
}
@media only screen and (max-height: 125px) {
    #playerDataControls {
        display: none !important;
    }
    #player-data-channel {
        right: 10px;
        bottom: 10px;
        transform: scale(.6);
    }
}
/*@media only screen and (max-height: 950px) {

    .library-group-details > .image {
        max-height: 45%;
        min-height: 45%;
    }

    body.fullscreen .library-group-details > .image {
        max-height: 55%;
        min-height: 55%;
    }

}
*/
        /*
@media only screen and (max-height: 800px) {

    .library-group-details > .image {
        min-height: 170px !important;
    }
    .library-group-details > .image img {
        max-height:170px !important;
    }

}
@media only screen and (max-height: 600px) {
    
    .library-group-details > .image {
        min-height: 85px !important;
    }
    .library-group-details > .image img {
        max-height:85px !important;
    }
}


@media (prefers-reduced-motion) {
    html,
    .scroll-container {
        scroll-behavior: auto;
    }
}

*/


#videoPlayback .preload-control {
    display: none !important
}
#videoPlayback .remove-control {
    display: none !important
}



.dms-access-code {
    position: fixed;
    left: -100px;
    top: -100px;
    right: -100px;
    bottom: -100px;
    z-index: 701;
    display: none;
    justify-content: center;
    align-items: center;
    display: flex;
    pointer-events: none;
}
.preview-player .dms-access-code {
    position:absolute;
}
/*.playback.paused .dms-access-code {
    display: none;
}*/
.dms-access-code-form {
    text-align: center;
}
.dms-access-code-body {
    text-align: center;
}
.dms-access-code-message {
    font-size: 2em;
    padding: 1.2rem 2.5rem;
    padding-top: 0;
    text-align: center;
    text-transform: uppercase;
    padding-top: 0;
    padding-bottom: 3rem;
}
.dms-access-code-message.message-ex {
    font-size:2.4rem;    
}
.dms-access-code-input {
    font-size: 2rem !important;
    padding: 1rem !important;
    color: white !important;
    background-color: transparent !important;
    text-align: center !important;
    border-style: solid !important;
    outline: none !important;
    border-width: 1px !important;
    text-transform: uppercase !important;
}
.dms-access-code-submit {
    font-size: 2em !important;
    /* background-color: rgba(0,0,0,.1);*/
    padding: 1rem !important;
    /* border: solid 1px black;*/
    margin: 1rem !important;
    min-width: 27rem !important;
    justify-content: center !important;
    align-items: center !important;
    /*    opacity: .8;*/
    text-align: center !important;
}
.dms-access-code-submit:active {
    transition:none !important;
    opacity:.6 !important;
}

@media screen and (max-width: 600px) {
    .dms-access-code-message {
        font-size:1.2em;
    }
    .dms-access-code-input {
        font-size: 1em;
    }
    .dms-access-code-submit {
        font-size:1em;
        min-width:15rem;
    }
}

.dms-billing-details .iCardType {
    max-height: 45px;
    margin-left: .5rem;
    margin-right: 0rem;
}

.dms-on-demand {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 701;
    display: none;
    justify-content: center;
    align-items: center;
    display: flex;
    /*background-color: rgba(0,0,0,.6);
    background-color: rgba(30,30,30,.7);*/
    opacity: 0;
    transition:.2s;
}
.dms-on-demand.fixed {    
    background-color: rgba(0,0,0,.5);
}
.dms-on-demand.fullscreen {
    z-index:199;
}
.dms-on-demand.show,
.dms-on-demand.selected {
    opacity:1;
}
.dms-on-demand-form-close {
    pointer-events:all;
    font-size:1.5rem;
}
.dms-on-demand-form-close button {
    padding: .5rem;
    transform: matrix(1, 0, 0, 1, 0, 0);
}
body:not(.mobile-device) .dms-on-demand-form-close button:hover {
    /*transform: scale(1.3);*/
    transform: matrix(1.3, 0, 0, 1.3, 0, 0);
}
.dms-on-demand-form-close button:focus-visible {
    /*transform: scale(1.4);*/
    transform: matrix(1.3, 0, 0, 1.3, 0, 0);
}
.dms-on-demand-form-close button:active {
    /*transform: scale(1.2);*/
    transform: matrix(1, 0, 0, 1, 0, 0) !important;
}
body.is-safari .dms-on-demand-form-close button {
    transform: matrix(1.0, 0, 0, 1.0, 0, 0) !important;
}

.dms-on-demand-payment-type-label-ex {
    padding-top:.2rem;
}
.dms-on-demand-payment-selection-container {
    flex: 1;
    max-width: 420px;
    padding-bottom: .5rem;
    margin-left: 1.3rem;
    margin-right: .5rem;
}
.dms-on-demand-form-container {
    display: flex;
    max-height: 100vh;
}
.dms-on-demand-form {
    text-align: left;
    /* max-width: 700px;*/
  /*  background-color: #12121A;
    background-color: #141414;*/
    border-width: 1px;
    border-style: solid;
    border-color: #2A2A30;
    border-image: initial;
    padding: 1.5rem;
    padding-top: 1rem;
    margin: 1rem;
    /* box-shadow: 0px 3px 6px 2px rgba(163, 157, 163, 0.1);*/
    color: rgba(255,255,255,1);
    color: whitesmoke;
    /*line-height: 27px;*/
    overflow: auto;
    border-radius: 7px;
    /*line-height:1.25;*/
    position: relative;
}
.dms-on-demand.fullscreen .dms-on-demand-form-container {
    width: 100%;
    height: 100%;
}
.dms-on-demand.fullscreen .dms-on-demand-form {
   /* background: linear-gradient(transparent 0%, rgba(0,0,0,.3));*/
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border-radius: 0;
    border: none;
    align-items: center;
    display: flex;
    flex-direction: column;
    /*  padding-bottom: 3rem;*/
    overflow: unset;
    /*overflow-y: hidden;*/
    overflow-x: hidden;
}
.dms-on-demand-form #library-screen {
    overflow:hidden;
}
.dms-on-demand.subscribe-screen .dms-on-demand-form,
.dms-on-demand.login-screen .dms-on-demand-form {
    height: calc(100% + 2rem);
    height: unset;
    overflow-x: unset;
    border: none;
    padding: 0;
    margin: 0;
    flex:1;
}

.dms-on-demand.fullscreen .dms-on-demand-form-container {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    transition: .3s;
    flex-direction: column;
}

body.dark-mode .dms-on-demand-selection-section-signup-container .app-form-field-label {
    margin: 0.5rem 0.2rem !important;
    font-size: .8rem !important;
    color: whitesmoke !important;
    text-transform: uppercase !important;
    padding: 0 !important;
    display: block;
}

body.dark-mode .dms-on-demand-selection-section-signup-container input:not(.form-check-input) {
    border: solid 1px #2A2A30 !important;
}
body.dark-mode .dms-on-demand-selection-section-signup-container input:focus:not(.form-check-input) {
    border: solid 1px dodgerblue !important;
}
.dms-on-demand-actions .logo img {
    /*max-height: 42px;
    padding-right: 1rem;
    padding-right: 0rem;
    padding-left: 1rem;
    padding-top: 0rem !important;
    position: relative;
    top: 1px;
    top: 5px;
    left: -6px;
    padding-bottom: 0rem !important;*/
    /*padding-left: .5rem;*/
    /*top: 1px;*/
}
/*
@media only screen and (max-width: 800px) {

    .dms-on-demand-actions .logo img {
        padding-right: 0rem;
        padding-left: 0rem;
    }
}*/

.dms-on-demand-loader {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    justify-content: center;
    align-items: center;
    display: flex;
    background-color: rgba(0,0,0,.6);
    z-index: 6;
    /*transition:.2s;*/
}
.dms-on-demand-loader.fixed {
    position: fixed;
}
.dms-on-demand-loader.opaque {
    background-color: rgba(0,0,0,0);
}

.dms-on-demand-body {
    /* position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;*/
    transition: .3s;
    opacity: 0;
}
.dms-on-demand-body.show {
    opacity:1;
}
.dms-on-demand-info-selection-container {
    padding-left: 1rem;
    padding-right: .5rem;
   /* padding-bottom:1rem;*/
}
.dms-on-demand-payment-item .dms-on-demand-info-selection-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 325px;
}
.dms-on-demand-payment-options-selection-container {
    padding-left: 5px;
    padding-right: 5px;
}
.dms-on-demand-info-payment-container {
    display: flex;
}
.dms-on-demand-info-payment-info {
    flex: 1;
    width: 100%;
}
.dms-on-demand-info-qr-code-info {
    text-align: right;
}
.dms-on-demand-info-payment-amount {
    padding: 0rem .2rem;
    font-size: 1.4rem;
    padding-bottom: .0rem;
    line-height: 1.4;
}
.dms-on-demand-info-payment-email {
    padding: 0rem .5rem;
    font-size: 1.3rem;
    padding-bottom: .5rem;
    line-height: 1.4;
    padding-top: .5rem;
}
.dms-on-demand-info-access-code {
    padding: 0rem .5rem;
    font-size: 1.3rem;
    padding-bottom: .5rem;
    padding-top: .5rem;
}
.dms-on-demand-info-access-code .access-code-label {        
    font-size: 3rem;
    font-weight:bold;
    user-select: all !important;
}
.dms-on-demand-payment-complete-container .dms-on-demand-info-payment-amount {
    padding-top: .5rem;
    padding-bottom: .3rem;
    padding-left: 7px;
}
.dms-on-demand-header {
    font-size: 1.6rem;
    padding: 1.5rem;
    color: white;
    padding-bottom: 2rem;
    padding-top: 1rem;
    text-align: center;
}
.dms-on-demand-info-container {
    max-width: 330px;
    padding-bottom: .5rem;
}
.dms-on-demand-image {
    padding: 0rem 0rem;
    padding-right: 1.2rem;
    padding-left: .5rem;
    max-width: 310px;
    max-height: 180px;
    text-align:center;
}
.dms-on-demand-image img {
    max-width: 310px;
    max-height: 175px;
    object-fit: contain;
}
.dms-on-demand-info {
    font-size: 1rem;
    line-height: 1.25;
    padding: .5rem;
}
.dms-on-demand-info0 {
    font-size: 1.2rem;
    padding-bottom: 4px;
}
.dms-on-demand-info1 {
    padding-left: 1px;
    font-size: .9rem;
}
.dms-on-demand-info2 {
    padding-left: 1px;
    padding-top: 2px;
    font-size: .8rem;
}
.dms-on-demand-info3 {
    padding-left: 1px;
    padding-top: 3px;
    font-size: .7rem;
}
.dms-on-demand-info4 {
    padding-left: 1px;
    padding-top: 3px;
    font-size: .7rem;
}
.dms-on-demand-payment-amount {
    font-size: 1.3rem;
    padding-bottom: 0rem;
}
.dms-on-demand-payment-options {
    font-size: 1.1rem;
    line-height: 1.4;
    padding-top:.5rem;
    /*color: rgba(255,255,255, .7);*/
}
.dms-on-demand-payment-types {
    font-size: 1.2rem;
    padding-bottom: 0rem;
    padding-left: 0rem;
    color: white;
}
.dms-on-demand-payment-type {
    display: flex;
    align-items: flex-start;
    margin: .5rem !important;
    opacity: .8;
    transition: .2s;
}
.dms-on-demand-payment-type i {
    padding-right:.5rem;
    color: #4ea752;
    position: relative;
    top: 3px;
}
.dms-on-demand-payment-type:focus, body:not(.mobile-device) .dms-on-demand-payment-type:hover {
    color: white;
    opacity:1;
}
.dms-on-demand-payment-type.selected {
    color: white;
    opacity:1;
}
.dms-on-demand-payment-type.selected i {
    color:#FFAB15;
    color: #4ea752;
}
.dms-on-demand-subscription-selection-container {
    padding-left:5px;
    padding-right:5px;
}
.dms-on-demand-payment-item .dms-on-demand-subscription-selection-container {
    padding-left: 8px;
    padding-right: 8px;
}
.dms-on-demand-media-subscriptions {
    font-size: 1.2rem;
    padding-bottom: .5rem;
    color: white;
}
.dms-on-demand-media-subscription {
    align-items: center;
    margin: .5rem !important;
    margin-bottom: 0 !important;
    opacity: .8;
    text-align: left;
    transition: .2s;
}
.dms-on-demand-media-subscription i {
    padding-right:.5rem;
    color: green;
}
.dms-on-demand-media-subscription:focus, body:not(.mobile-device) .dms-on-demand-media-subscription:hover {
    color: white;
    opacity: 1;
}
.dms-on-demand-media-subscription.selected {
    color: white;
    opacity:1;
}
.dms-on-demand-media-subscription.selected i {
    color:#FFAB15;
    color: green;
}
.dms-on-demand-media-subscription-trial {
    font-size: .8rem;
    color: red;
    font-weight: 700;
    padding-left: 2rem;
    padding-top: .3rem;
}
.dms-on-demand-selection-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.dms-on-demand.fullscreen .dms-on-demand-selection-container {
    max-width: 100%;
    width: 100%;
    padding-bottom: .5rem;
    /*margin-bottom: 64px;*/
    overflow: auto;
    transition: .2s;
}
.dms-on-demand.fullscreen .dms-on-demand-selection-container.hide {
    opacity:0;    
}
.dms-on-demand.fullscreen .dms-on-demand-selection-container.show {
    opacity:1;    
}
.dms-on-demand.fullscreen .dms-on-demand-selection-checkout-complete {
    transition: .2s;
    max-width:60%;
}
.dms-on-demand.fullscreen .dms-on-demand-selection-checkout-complete.hide {
    opacity: 0;
}
.dms-on-demand.fullscreen .dms-on-demand-selection-checkout-complete.show {
    opacity: 1;
}
.dms-on-demand.fullscreen .dms-on-demand-selection-subscribe-complete {
    transition: .2s;
    max-width:60%;
    margin-top:3%;
}
.dms-on-demand.subscribe-screen .dms-on-demand-selection-subscribe-complete .dms-on-demand-info-payment-container {
    display:block;
}
.dms-on-demand.subscribe-screen .dms-on-demand-selection-subscribe-complete .dms-on-demand-info-payment-amount {
    display: block;
}
.dms-on-demand.fullscreen .dms-on-demand-selection-subscribe-complete.hide {
    opacity: 0;
}
.dms-on-demand.fullscreen .dms-on-demand-selection-subscribe-complete.show {
    opacity: 1;
}
.dms-on-demand-selection-sections {
    /* max-width: 60%;*/
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-bottom: 2rem;
}
.dms-on-demand-selection-section1 {
    /* flex: 1;*/
    margin: 1rem 2rem;
    flex: .8;
    /* margin: 1rem;
    margin-right: 3rem;*/
    flex: 1;
    padding-bottom: 0rem;
    display: flex;
    flex-direction: column;
    max-width: 40rem;
    min-width: 35rem;
}
.dms-on-demand-selection-section-title {
    font-size: 48px;
    /*margin-bottom: 1.5rem;*/
    font-weight: 700;
    text-shadow: -1px 1px 2px rgb(0 0 0);
    line-height: normal;
}
.no-shadow .dms-on-demand-selection-section-title {
    text-shadow: none;
}
.dms-on-demand-selection-section-description {
    font-size: 1.4rem;
    line-height: 1.4;
    margin-top: .5rem;
    text-shadow: -1px 1px 2px rgb(0 0 0);
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}
.no-shadow .dms-on-demand-selection-section-description {
    text-shadow: none;
}
.dms-on-demand-selection-section2 {
    flex: 1;
    padding: 2rem;
    border-radius: 6px;
    overflow: hidden;
    margin: 1rem 2rem;
    display: flex;
    flex-direction: column;
    height: fit-content;
    min-width: 40rem;
    max-width: 40rem;
}
body.dark-mode .dms-on-demand-selection-section2 {
    background-color: black;
    color: white;
}
body.light-mode .dms-on-demand-selection-section2 {
    background-color: white;
    color: black;
}
.dms-on-demand-payment-item {
    padding-bottom: 1rem;
}
.dms-on-demand-subscription-disabled {
    font-size: 1rem;
    padding: .5rem;
    padding-bottom: .5rem;
    line-height: 1.4;
    color: rgba(255,255,255,.7);
}
.dms-on-demand-selection-section-subscriptions {
    display: flex;
    flex-direction: column;
    /*margin-bottom: 1.7rem;
    border-bottom: solid 1px rgba(100,100,100,.3);
    padding-bottom: 1rem;*/
    margin-top: .5rem;
    display: flex;
    flex-direction: column;
    margin-bottom: .5rem;
    border-bottom: solid 1px rgba(100, 100, 100, .3);
    padding-bottom: .5rem;
    margin-top: 1rem;
}
.dms-on-demand-selection-section-subscription-item {
    padding: 1rem 1.5rem;
    padding-bottom:1.5rem;
    text-align: left;
    align-items: initial;
    background: rgba(100,100,100,.3);
    background: rgba(0,0,0,.7);
    border-radius: 5px;
    width: 100%;
    margin-bottom: 1rem;
    align-items: center;
    display: flex;
    transition: .3s;
}
.dms-on-demand-selection-section-subscription-item:focus {  
    background: rgba(0,0,0,.8);
}
body:not(.mobile-device) .dms-on-demand-selection-section-subscription-item:hover {
    background: rgba(0,0,0,.9);
}
.dms-on-demand-selection-section-subscription-item:active {  
    background: rgba(0,0,0,1);
    transition:.1s;
}
.dms-on-demand-selection-section-subscription-item:disabled {
    background: rgba(0,0,0,.1) !important;
    border: solid 1px rgba(100,100,100,.3) !important;
    cursor:default !important;
    opacity: .7 !important;
}
.dms-on-demand-selection-section-subscription-item:disabled {
    pointer-events:all !important;    
}
.dms-on-demand-selection-section-subscription-item label {
    flex:1;
    font-size: 1.4rem;
    margin-right: 2rem;
}
.dms-on-demand-selection-section-subscription-item i {
    transition:.2s;
    margin-right: .75rem;
}
.dms-on-demand-selection-section-subscription-item.selected i {
    transform:scale(1.3);
}
.dms-on-demand-selection-section-readMore-button {
    display: flex;
}
.dms-on-demand-selection-section-readMore-button label {
    display: flex;
    font-weight: bold;
    text-transform: uppercase;
    font-size: .9rem;
    margin-right:.5rem;
    text-shadow: -1px 1px 2px rgb(0 0 0);
}
.no-shadow .dms-on-demand-selection-section-readMore-button label {
    text-shadow: none;
}

.dms-on-demand-selection-section-readMore-button i {
    font-weight: bold;
    position: relative;
    top: -2px;
}
.dms-on-demand-selection-section-readMore {
    font-size: 1.2rem;
    line-height: 1.4;
    margin-bottom: 1rem;
}


.dms-on-demand-payment-item .dms-on-demand-payment-options-selection-container {
    padding-left: 8px;
    padding-right: 8px;
}
.dms-on-demand-payment-options-container {
    padding-bottom:.5rem;
}
.dms-on-demand-payment-options-items {
    font-size: 1.2rem;
    padding-bottom: 0rem;
    padding-left: 0rem;
    color: white;
}
.dms-on-demand-payment-option {
    align-items: center;
    margin: .5rem !important;
    margin-bottom: 0 !important;
    opacity: .8;
    text-align: left;
    transition: .2s;
}
.dms-on-demand-payment-option i {
    padding-right:.5rem;
    color: green;
}
.dms-on-demand-payment-option:focus, body:not(.mobile-device) .dms-on-demand-payment-option:hover {
    color: white;
    opacity:1;
}
.dms-on-demand-payment-option.selected {
    color: white;
    opacity:1;
}
.dms-on-demand-payment-option.selected i {
    color:#FFAB15;
    color: green;
}

.dms-on-demand-message {
    font-size: 1.4rem;
    padding: .5rem;
    padding-bottom: .5rem;
    line-height: 1.4;
    /*color: rgba(255,255,255, .7);*/
}
.dms-on-demand-message-ex {
    font-size: 1.4rem;
    padding: .5rem;
    padding-bottom: .5rem;
    line-height: 1.4;
    /* color: rgba(255,255,255, .7);*/
}
.dms-on-demand-note {
    font-size: 1rem;
    padding: .5rem;
    padding-bottom: .5rem;
    line-height: 1.4;
    /* color: rgba(255,255,255, .7);*/
}
.dms-on-demand-input {
   display:none;
}
.dms-on-demand-buttons {
    padding-top: .5rem;
    text-align: right;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    padding-right: .5rem;
}
.spacer {
    flex:1;
}
.dms-on-demand-payment-type button.fade {
    opacity: 1 !important;
}
.dms-on-demand-buttons button.default {
    margin-right: 3px;
}
.dms-on-demand-buttons button.default:last-of-type {
    margin-right: 0rem;
}
.dms-on-demand-submit {
}
.dms-on-demand-billing-details-container .dms-billing-details {
    padding-bottom: 1rem;
    max-width: 420px;
    padding: .5rem;
    padding-top: 0;
    padding-left: 1rem;
}
.dms-on-demand-billing-details-container .dms-on-demand-header {
    padding-bottom: .5rem;
    padding-top: 0;
    font-size: 1.2rem;
}
.dms-on-demand-payment-type-label-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-items: unset;
}
.dms-on-demand-payment-complete {
    max-width: 496px;
    padding-left: 1rem;
    padding-right: 0rem;
    padding-top: .5rem;
}
.dms-on-demand-payment-complete-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 400px;
}

.dms-on-demand-payment-complete-container .dms-on-demand-header {
    
    font-size: 1.4rem !important;
    text-align: left !important;
    padding: .5rem !important;
    padding-top: 0 !important;
    font-weight: bold;
}

.dms-on-demand-payment-complete-container .dms-on-demand-message {

}

    .dms-on-demand-payment-complete-container .dms-on-demand-message.access-code {
       font-size: 2rem;
    }

.dms-on-demand-payment-complete-container .dms-on-demand-message-ex {

}
.dms-on-demand-payment-complete-container .dms-on-demand-buttons {
    padding-top: 1rem;

}

.flex-row {
    display: flex;
    align-items: center;
}
.flex-row-group {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.flex-row-container {
    margin-right: .5rem;
}
.flex-row-group-row {
    display: flex;
    align-items: center;
}
.flex-row-group-label {
    margin: .5rem .2rem;
    font-size: .8rem;
}
.flex-row-group-validator {
    margin: .5rem .2rem;
    margin-bottom: 1px;
    font-size: .8rem;
    color: red;
    display: none;
}
.flex-row-group.invalid .flex-row-group-validator {
    display:block;
}
.flex-row-group.invalid input[type=text], .flex-row-group.invalid input[type=password] {
    border-color: red !important;
}
.flex-row-group.valid input[type=text], .flex-row-group.valid input[type=password] {
    border-color: green !important;
}

.dms-billing-details .flex-row {
    margin-bottom: .5rem;
}
.dms-billing-details .stripe-element-row {
    margin-bottom: 0px !important;
}
.dms-billing-details .flex-row-group-label {
    color: #8b92a9;
    text-transform:uppercase;
}

.dms-billing-details input[type=text] {
    width: 100%;
    border: solid 1px #2A2A30;
}

@media screen and (max-width: 600px) {
    
}

/*.dms-billing-details {
    max-width: 600px;
}*/
.dms-billing-details select {
    background-color: transparent !important;
   /* border: none;*/
    /* text-transform: uppercase; */
    width: 100%;
    margin-bottom: 0px;
    padding-bottom: 0px;
    outline: none;
    padding: .7rem .5rem !important;
    border-radius: 5px;
    background-image: none !important;
    font-size: 1rem;
    cursor: pointer;
    font-size: 100%;
    border: solid 1px #2A2A30;
}
body.dark-mode .dms-billing-details select {
    border: solid 1px #2A2A30;
    color: white;
}
body.light-mode .dms-billing-details select {
    border: solid 1px lightgray;
}
.dms-billing-details .filter-group select {
    font-size: 1.2em;
}
body.dark-mode .dms-billing-details select:focus {
    border-color: dodgerblue;
}
.dms-billing-details select:focus {
    border-color: dodgerblue;
}
.dms-billing-details select option {
    margin: 40px;
   /* background: #12121A;
    background: #141414;*/
    color: #fff;
    font-size: 100%;
    /*text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);*/
}
.dms-billing-details input[type=number] {
    background-color: transparent !important;
    border: solid 1px #2A2A30;
    border-radius: 5px;
    background-image: none !important;
    outline: none;
    padding: .7rem .5rem !important;
}
    .dms-billing-details input[type=number]:focus {
        border-color: dodgerblue;
    }
.dms-billing-details input[type=list] {
    background-color: transparent !important;
    border: solid 1px #2A2A30;
    border-radius: 5px;
    background-image: none !important;
    outline: none;
    padding: .7rem .5rem !important;
}
    .dms-billing-details input[type=list]:focus {
        border-color: dodgerblue;
    }
.dms-billing-details input[type=text] {
    background-color: transparent !important;
    border-radius: 5px;
    background-image: none !important;
    outline: none;
    padding: .7rem .5rem !important;
}
body.light-mode .dms-billing-details input[type=text] {
    border: solid 1px lightgray;
}
body.dark-mode .dms-billing-details input[type=text] {
    border: solid 1px #2A2A30;
}
.dms-billing-details input[type=text]:focus {
    border-color: dodgerblue;
}
body.dark-mode .dms-billing-details input[type=text]:focus {
    border-color: dodgerblue;
}
.dms-billing-details input[type=password] {
    background-color: transparent !important;
    border: solid 1px #2A2A30;
    border-radius: 5px;
    background-image: none !important;
    outline: none;
    padding: .7rem .5rem !important;
}
    .dms-billing-details input[type=password]:focus {
        border-color: dodgerblue;
    }
    
.dms-login-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 450px;
    padding-top: 0 !important;
    margin-top: 0 !important;
}
.dms-on-demand.login-handler .dms-login-details {
    max-width: unset;
}
.dms-on-demand.login-handler .dms-signup-details {
    max-width: unset;
}
.dms-on-demand.login-handler .dms-reset-password {
    max-width: unset;
}
.dms-on-demand.login-handler .dms-forgot-password {
    max-width: unset;
}
.dms-on-demand.login-handler .dms-login-access-code {
    max-width: unset;
}
.dms-on-demand.login-handler .dms-on-demand-selection-container {
   /* width: 100%;
    height: 100%;*/
    padding-top: 4rem;
    padding-bottom: 3rem;
}
.dms-on-demand.login-handler .dms-on-demand-selection-sections:not(.checkout-container) {
    /*max-width: unset;*/
    background-color: rgba(0,0,0,.8);
    color: white;
    padding-top: 2rem;
    border-radius: 5px;
    height: fit-content;
    padding-bottom: 2rem;
    /* margin-top: 2rem;*/
    max-width: 500px;
    box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0%), 0 6px 20px 0 rgba(0, 0, 0, 19%);
    margin-top: 1.25rem;
}
.dms-on-demand.login-handler .dms-on-demand-selection-sections.access-code {
    max-width: 72%;
    position: relative;
    background-color: rgba(0,0,0,.6);
    padding: 2rem;
    padding-bottom:4rem;
}
.dms-on-demand.login-handler .logo-name {
    opacity:1;
}
.dms-on-demand.info-screen .dms-on-demand-selection-container {
    width: 100%;
    height: 100%;
     padding-bottom: 0rem;
}
.dms-on-demand.info-screen .dms-on-demand-selection-sections {
    width: 100%;
    max-width: unset;
    height: 100%;
}
.dms-on-demand.info-screen .sections-container {
    width: 100%;
    display: flex;
    flex-direction: row;
}
.dms-on-demand.info-screen .sections-page > section {
    flex:0;
}
.dms-login-details-header {
    text-align: center;
    font-size: 1.4rem;
    padding-bottom: .5rem;
}

.dms-login-details .flex-row {
    flex: 1;
    width: 100%;
}
.dms-login-details .flex-row.checkbox .flex-row-group {
    font-size: 1.3rem;
    padding-left: 5px;
    font-weight: 500;
    position: relative;
    top: 1px;
    /* color: black; */
    flex-direction: row;
    align-items: center;
}
.dms-login-details .flex-row.checkbox .flex-row-group-label {
    margin-top: .2rem;
    margin-bottom: .2rem;
}
.dms-login-details-login-message {
    font-size: .8em;
    max-width: 450px;
    text-align: center;
    padding-bottom: .5rem;
    padding-bottom: 1rem;
    padding-top: 0rem;
    line-height: 1.5;
}
.dms-login-details.activate .dms-login-details-login-message {
    margin-top: 1rem;
    margin-bottom: .25rem;
}
.dms-login-details.activate .dms-login-details-requestAccessCode {
    padding-top: 1rem;
}

.dms-login-details-login-message a {
    cursor: pointer;
}
.dms-login-details-forgotPassword {
    padding-top: 3px;
   /* padding-bottom: 3px;*/
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 0rem;
    color: dodgerblue;
    font-weight: 700;
}
.dms-login-details-requestAccessCode {
    padding-top: 3px;
    padding-bottom: 3px;
    text-align: center;
    margin-top: 0.3rem;
    margin-bottom: 0rem;
    color: dodgerblue;
    font-weight: 700;
}
.dms-login-details-signup {
    display: flex;
    align-items: center;
    font-size: .8em;
    margin-top: 1rem;
}
.dms-login-details-signup-message {

}
.dms-login-details-signup-link {
    margin-left: .5rem;
    color: dodgerblue;
    font-weight: 700;
}
.dms-login-details-login-button {
    margin-right: 0 !important;
    min-width: 150px;
}
.dms-login-details .flex-row.checkbox {
    text-align: center;
    text-align: center;
    justify-content: center;
    padding-top: .5rem;
}
.dms-login-details input[type=text], .dms-login-details input[type=password] {
    padding: .75rem .5rem;
    border: 0;
    outline: 0;
    border: solid 1px lightgray;
    border-radius: 3px;
    color: black;
    font-family: sans-serif;
}
body:not(.mobile-device) .dms-login-details input[type=text]:hover, body:not(.mobile-device) .dms-login-details input[type=password]:hover {
    border-color: dodgerblue;
}
.dms-login-details input[type=text]:focus, .dms-login-details input[type=password]:focus {
    border-color:dodgerblue;
}
.dms-login-details a {
    color: dodgerblue;
    text-decoration: none;
  /*  font-weight: 700;*/
}
.dms-login-details input[type=checkbox] {
    width: 14px;
    height: 14px;
    margin-right: 3px;
}

.dms-signup-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 450px;
    padding-top: 0;
    margin-top: 0;
}
.dms-signup-details-header {
    text-align: center;
    font-size: 1.4rem;
    padding-bottom:.5rem;
}

.dms-signup-details .flex-row {
    flex: 1;
    width: 100%;
}
.dms-signup-details .flex-row.checkbox .flex-row-group {
    font-size: 1.3rem;
    padding-left: 5px;
    font-weight: 500;
    position: relative;
    top: 1px;
    /* color: black; */
    flex-direction: row;
    align-items: center;
}
.dms-signup-details-signup-message {
  /*  font-size: .8em;*/
    max-width: 450px;
    text-align: center;
    padding-bottom: .5rem;
    padding-bottom: 1rem;
    padding-top: 1rem;
    line-height: 1.5;
}
.dms-signup-details-forgotPassword {
    padding-top: 3px;
    padding-bottom: 3px;
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
    color: dodgerblue;
    font-weight: 700;
}
.dms-signup-details-signup {
    display: flex;
    align-items: center;
   /* font-size: .8em;*/
    padding-top: 1.5rem;
}
.dms-forgot-password .dms-signup-details-signup {
    justify-content: center;
    font-size: .9rem;
}
.dms-reset-password .dms-signup-details-signup {
    justify-content: center;
    font-size: .9rem;
}
.dms-forgot-password-actions {
    text-align:center;  
}
.dms-signup-details-signup-message {
}
.dms-signup-details-signup-link {
    margin-left: .5rem;
    color: dodgerblue;
    font-weight: 700;
}
.dms-signup-details-signup-button {
    margin-right: 0 !important;
    min-width: 150px;
}
.dms-signup-details .flex-row.checkbox {
    text-align: center;
    text-align: center;
    justify-content: center;
    padding-top: .5rem;
}
.dms-signup-details input[type=text], .dms-signup-details input[type=password] {
    padding: .75rem .5rem;
    border: 0;
    outline: 0;
    border: solid 1px lightgray;
    border-radius: 3px;
    color: black;
    font-family: sans-serif;
}
body:not(.mobile-device) .dms-signup-details input[type=text]:hover, body:not(.mobile-device) .dms-signup-details input[type=password]:hover {
    border-color: dodgerblue;
}
.dms-signup-details input[type=text]:focus, .dms-signup-details input[type=password]:focus {
    border-color:dodgerblue;
}
.dms-signup-details a {
    color: dodgerblue;
    text-decoration: none;
    font-weight: 700;
    cursor:pointer;
}
.dms-signup-details input[type=checkbox] {
    width: 14px;
    height: 14px;
    margin-right: 3px;
}


.dms-reset-password {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width:450px;
}
.dms-reset-password-header {
    text-align: center;
    font-size: 2rem;
    padding-bottom:.5rem;
}
.dms-reset-password-message {
    text-align: center;
    font-size: 1.2rem;
    padding-bottom: .5rem;
    line-height:1.4;
}
.dms-reset-password .flex-row {
    flex: 1;
    width: 100%;
}
.dms-reset-password .flex-row.checkbox .flex-row-group {
    font-size: 1.3rem;
    padding-left: 5px;
    font-weight: 500;
    position: relative;
    top: 1px;
    /* color: black; */
    flex-direction: row;
    align-items: center;
}
.dms-reset-password-login-message {
   /* font-size: .8em;*/
    max-width: 450px;
    text-align: center;
    padding-bottom: .5rem;
    padding-bottom: 0rem;
    padding-top: .5rem;
    line-height: 1.5;
}
.dms-reset-password-forgotPassword {
    padding-top: 3px;
    padding-bottom: 3px;
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
    color: dodgerblue;
    font-weight: 700;
}
.dms-reset-password-signup {
    display:flex;   
    align-items:center;
    font-size:.8rem;
}
.dms-reset-password-signup-message {

}
.dms-reset-password-signup-link {
    margin-left: .5rem;
    color: dodgerblue;
    font-weight: 700;
}
.dms-reset-password-login-button {
    margin-right: 0 !important;
    min-width: 150px;
}
.dms-reset-password .flex-row.checkbox {
    text-align: center;
    text-align: center;
    justify-content: center;
    padding-top: .5rem;
}
.dms-reset-password input[type=text], .dms-reset-password input[type=password] {
    padding: .75rem .5rem;
    border: 0;
    outline: 0;
    border: solid 1px lightgray;
    border-radius: 3px;
    color: black;
    font-family: sans-serif;
}
body:not(.mobile-device) .dms-reset-password input[type=text]:hover, body:not(.mobile-device) .dms-reset-password input[type=password]:hover {
    border-color: dodgerblue;
}
.dms-reset-password input[type=text]:focus, .dms-reset-password input[type=password]:focus {
    border-color:dodgerblue;
}
.dms-reset-password a {
    color: dodgerblue;
    text-decoration: none;
    font-weight: 700;
}
.dms-reset-password input[type=checkbox] {
    width: 14px;
    height: 14px;
    margin-right: 3px;
}

.dms-reset-password-send-email-button {
    margin-top: 1rem;
    margin-bottom: .5rem;
}
.dms-reset-password-button {
    margin-top: 1rem;
}

.dms-on-demand-actions {
    display: flex;
  /*  position: absolute;*/
    left: 0rem;
    top: .5rem;
    right: 0;
    padding: 0rem;
    padding-right:.5rem;
    z-index: 50;
}
.dms-on-demand.fullscreen .dms-on-demand-actions {
    top: 0rem;
    /*padding-left: 1rem;
    padding-right: 1rem;*/
    position: relative;
    /*position: absolute;*/
}
.dms-on-demand.login-handler .dms-on-demand-actions {
    position: absolute !important;
}
.dms-on-demand.default-screen .dms-on-demand-actions {
    display:none;
}
.dms-on-demand.default-screen .dms-on-demand-actions
.dms-on-demand.subscribe-screen .dms-on-demand-actions,
.dms-on-demand.login-screen .dms-on-demand-actions,
.dms-on-demand.checkout-screen .dms-on-demand-actions {
    position: absolute;
}
/*.dms-on-demand.login-screen .dms-on-demand-actions {
     padding-left: 11px;
}*/
.dms-on-demand.fullscreen .dms-on-demand-actions .logo {
    cursor: pointer;
    display: flex;
    align-items: center;
    padding-top: .5rem;
    padding-bottom: 0rem;
    padding-right: 1rem;
    padding-left: 3.5px;
}
.dms-on-demand.fullscreen .dms-on-demand-actions .logo-text {    
    display: flex;
    position:relative;
    left: -14px;
    top: -4px;
}
.dms-on-demand-actions.header > button {
    padding-bottom: 1.1rem;
    padding-top: 1.1rem;
}
.hide-header-links .dms-on-demand-actions.header > button {
    display:none;
}
.app-user-content-menu-items {
    width:100%;
}
.media-status-user-container button.app-user-content-menu-item {
    padding: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.media-status-user-container.selected button.button-user {
    opacity:1 !important;
}
.media-status-user-container:active button.button-user {
    opacity: 1 !important;
}

.dms-forgot-password {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width:450px;
}
.dms-forgot-password-header {
    text-align: center;
    font-size: 2rem;
    padding-bottom:.5rem;
}
.dms-forgot-password-message {
    text-align: center;
    font-size: 1.2rem;
    padding-bottom: .5rem;
    line-height: 1.4;
}
.dms-forgot-password .dms-forgot-password-section-submitted .dms-forgot-password-message {
    font-size: 1.4rem;
}
.dms-reset-password .dms-forgot-password-section-submitted .dms-forgot-password-message {
    font-size: 1.4rem;
    padding-bottom: 1rem;
}
.dms-forgot-password .flex-row {
    flex: 1;
    width: 100%;
}
.dms-forgot-password .flex-row.checkbox .flex-row-group {
    font-size: 1.3rem;
    padding-left: 5px;
    font-weight: 500;
    position: relative;
    top: 1px;
    /* color: black; */
    flex-direction: row;
    align-items: center;
}
.dms-forgot-password-login-message {
    /*font-size: .8em;*/
    max-width: 450px;
    text-align: center;
    padding-bottom: .5rem;
    padding-bottom: 0rem;
    padding-top: 1rem;
    line-height: 1.5;
}
.dms-forgot-password-forgotPassword {
    padding-top: 3px;
    padding-bottom: 3px;
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
    color: dodgerblue;
    font-weight: 700;
}
.dms-forgot-password-signup {
    display:flex;   
    align-items:center;
    font-size:.8rem;
}
.dms-forgot-password-signup-message {

}
.dms-forgot-password-signup-link {
    margin-left: .5rem;
    color: dodgerblue;
    font-weight: 700;
}
.dms-forgot-password-login-button {
    margin-right: 0 !important;
    min-width: 150px;
}
.dms-forgot-password .flex-row.checkbox {
    text-align: center;
    text-align: center;
    justify-content: center;
    padding-top: .5rem;
}
.dms-forgot-password input[type=text], .dms-forgot-password input[type=password] {
    padding: .75rem .5rem;
    border: 0;
    outline: 0;
    border: solid 1px lightgray;
    border-radius: 3px;
    color: black;
    font-family: sans-serif;
}
body:not(.mobile-device) .dms-forgot-password input[type=text]:hover, body:not(.mobile-device) .dms-forgot-password input[type=password]:hover {
    border-color: dodgerblue;
}
.dms-forgot-password input[type=text]:focus, .dms-forgot-password input[type=password]:focus {
    border-color:dodgerblue;
}
.dms-forgot-password a {
    color: dodgerblue;
    text-decoration: none;
    font-weight: 700;
}
.dms-forgot-password input[type=checkbox] {
    width: 14px;
    height: 14px;
    margin-right: 3px;
}

.dms-forgot-password-send-email-button {
    margin-top: 1rem;
    margin-bottom: .5rem;
}

.dms-login-access-code-request {
    text-align: center;
    font-size: 1.4rem;
    padding: .5rem 0rem;
}
.dms-login-access-code-url {
    text-align: center;
    font-size: 1.4rem;
    padding: .5rem 0rem;
}
.dms-login-access-code-error {
    font-size: 1.4rem;
    color: red;
    padding: .5rem 0rem;
    padding-bottom: 1.25rem;
    text-align: center;
}
.dms-login-access-code-value {
    font-size: 2.4rem;
    text-align: center;
    padding: .5rem;
    user-select:all;
}
.dms-login-access-code {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 450px;
    padding-top: 0 !important;
    margin-top: 0 !important;
}
.dms-login-access-code-header {
    text-align: center;
    font-size: 1.6rem;
    padding-bottom: .5rem;
}
.dms-login-access-code .dms-login-details-login-button {
    margin-bottom: 1rem;
}

.dms-login-access-code .flex-row {
    flex: 1;
    width: 100%;
}
.dms-login-access-code .flex-row.checkbox .flex-row-group {
    font-size: 1.3rem;
    padding-left: 5px;
    font-weight: 500;
    position: relative;
    top: 1px;
    /* color: black; */
    flex-direction: row;
    align-items: center;
}
.dms-login-access-code .flex-row.checkbox .flex-row-group-label {
    margin-top: .2rem;
    margin-bottom: .2rem;
}
.dms-login-access-code-login-message {
   /* font-size: .8em;*/
    max-width: 450px;
    text-align: center;
    padding-bottom: .5rem;
    padding-bottom: 1rem;
    padding-top: .5rem;
    line-height: 1.5;
}
.dms-login-access-code-forgotPassword {
    padding-top: 3px;
    padding-bottom: 3px;
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
    color: dodgerblue;
    font-weight: 700;
}
.dms-login-access-code-signup {
    display:flex;   
    align-items:center;
    font-size:.8rem;
}
.dms-login-access-code-signup-message {

}
.dms-login-access-code-signup-link {
    margin-left: .5rem;
    color: dodgerblue;
    font-weight: 700;
}
.dms-login-access-code-login-button {
    margin-right: 0 !important;
    min-width: 150px;
}
.dms-login-access-code .flex-row.checkbox {
    text-align: center;
    text-align: center;
    justify-content: center;
    padding-top: .5rem;
}
.dms-login-access-code input[type=text], .dms-login-access-code input[type=password] {
    padding: .75rem .5rem;
    border: 0;
    outline: 0;
    border: solid 1px lightgray;
    border-radius: 3px;
    color: black;
    font-family: sans-serif;
}
body:not(.mobile-device) .dms-login-access-code input[type=text]:hover, body:not(.mobile-device) .dms-login-access-code input[type=password]:hover {
    border-color: dodgerblue;
}
.dms-login-access-code input[type=text]:focus, .dms-login-access-code input[type=password]:focus {
    border-color:dodgerblue;
}
.dms-login-access-code a {
    color: dodgerblue;
    text-decoration: none;
    font-weight: 700;
}
.dms-login-access-code input[type=checkbox] {
    width: 14px;
    height: 14px;
    margin-right: 3px;
}

.dms-on-demand-payment-selection {
    display: flex;
    flex-direction: column;
}
.dms-on-demand-payment-container {
    max-width: 450px;
    padding-bottom: .5rem;
    height: 100%;
}
.dms-on-demand-info-selection-container > .dms-on-demand-payment-container > .dms-on-demand-payment-types {
    padding-left: 8px;
    padding-right: 8px;
}
.dms-on-demand-selection-section-readMore-button i {
    transform: rotateZ(180deg);
    top: 0px;
    transition:.3s;
}
.dms-on-demand-selection-section-readMore-button i.hidden {
    transform: rotateZ(0deg);
    top: -2px;
}
.dms-on-demand-selection-section-readMore {
    font-size: 1.2rem;
    line-height: 1.4;
    margin-bottom: 1rem;
}
.dms-on-demand-selection-section-trailer-button {
    padding: 1rem;
    background-color: rgba(100,100,100,.3);
    margin-top: 1.5rem;
    border-radius: 5px;
    transition:.3s;
}
.dms-on-demand-selection-section-trailer-button:focus {    
    background-color: rgba(100,100,100,.4);
    border-color:dodgerblue;
}
body:not(.mobile-device) .dms-on-demand-selection-section-trailer-button:hover {
    background-color: rgba(100,100,100,.5);
}
.dms-on-demand-selection-section-trailer-button:active {    
    background-color: rgba(100,100,100,.6);
    transition:.1s;
}
.dms-on-demand-selection-section-trailer-button label {
    margin-left:.5rem;
    font-size: 1.4rem;
    text-transform: uppercase;
}
.dms-on-demand-selection-section-signup-container {
}

.dms-on-demand-selection-section-signup-row {
    display:flex;
}
.dms-on-demand-selection-section-signup-row > .app-form-field:not(:last-child) {
    margin-right:.5rem;
}
.dms-on-demand-selection-container select:not(.pika-select) {
    color: whitesmoke;
    border: solid 1px #2A2A30 !important;
}


.dms-on-demand-selection-section-signup-message {
    font-size: 1.4rem;
    font-weight: bold;
    text-align: center;
    padding-bottom: .5rem;
}

.dms-on-demand-selection-section-signup-question-container {
    display: flex;
    padding-bottom: 1rem;
    align-items: center;
    justify-content: center;
    font-size:1rem;
}

.dms-on-demand-selection-section-signup-question {
    padding-right:.5rem;
}

.dms-on-demand-selection-section-signup-button {
    font-weight: bold;
    color: dodgerblue;
}

.dms-on-demand-selection-section-signup-login-container {
}

.dms-on-demand-selection-section-signup-email {
}
.dms-on-demand-selection-section-signup-email .app-form-field-label {
   /* color: black !important;*/
    font-size: 1rem !important;
    display:none;
}
.dms-on-demand-selection-section-signup-email .app-form-field-input {
   /* color: black !important;*/
    padding: 0.7rem 0.5rem;
    font-size: 1.2rem;
   /* border: solid 1px silver !important;*/
   
}

.dms-on-demand-selection-section-signup-container input:not(.w-button, .w-input, .form-check-input),
.dms-on-demand-selection-section-signup-container .app-form-field-input-proxy {
    padding: .7rem .5rem !important;
    font-size: 18px;
}
.dms-on-demand-selection-section-signup-container .app-form-field {
    padding-bottom: .25rem;
}

.dms-on-demand-selection-section-signup-password {
}

.dms-on-demand-selection-section-signup-password .app-form-field-label {
    /*color: black !important;*/
    font-size: 1rem !important;
    display:none;
}
.dms-on-demand-selection-section-signup-password .app-form-field-input {
   /* color: black !important;*/
    padding: 0.7rem 0.5rem;
    font-size: 1.2rem;
   /* border: solid 1px silver !important;*/
}


.dms-on-demand-selection-section-payment-card-name {
}

.dms-on-demand-selection-section-payment-card-name .app-form-field-label {
   /* color: black !important;*/
    font-size: 1rem !important;
    display:none;
}
.dms-on-demand-selection-section-payment-card-name .app-form-field-input {
    /*color: black !important;*/
    padding: 0.7rem 0.5rem;
    font-size: 1.2rem;
    /*border: solid 1px silver !important;*/
}
/*.dms-on-demand-selection-section2 input:-webkit-autofill,
body:not(.mobile-device) .dms-on-demand-selection-section2 input:-webkit-autofill:hover,
.dms-on-demand-selection-section2 input:-webkit-autofill:focus,
.dms-on-demand-selection-section2 textarea:-webkit-autofill,
body:not(.mobile-device) .dms-on-demand-selection-section2 textarea:-webkit-autofill:hover,
.dms-on-demand-selection-section2 textarea:-webkit-autofill:focus,
.dms-on-demand-selection-section2 select:-webkit-autofill,
body:not(.mobile-device) .dms-on-demand-selection-section2 select:-webkit-autofill:hover,
.dms-on-demand-selection-section2 select:-webkit-autofill:focus {
    -webkit-text-fill-color: unset !important;
    -webkit-box-shadow: unset !important;
}
*/
.dms-on-demand-selection-section-payment-promo-code {
}

.dms-on-demand-selection-section-payment-promo-code .app-form-field-label {
    /*color: black !important;*/
    font-size: 1rem !important;
    display:none;
}
.dms-on-demand-selection-section-payment-promo-code .app-form-field-input {
    /*color: black !important;*/
    padding: 0.7rem 0.5rem;
    font-size: 1.2rem;
   /* border: solid 1px silver !important;*/
}

.dms-on-demand-selection-section-receive-updates-container {
    /* padding-top: 0.5rem;*/
    /* text-align: center;
    justify-content: center;
    align-items: center;
    display: flex;*/
    
    /*NOTE: below is causing issues with the login widget*/
    /*border-bottom: solid 1px rgba(100, 100, 100, .5);
    margin-bottom: .75rem;
    padding-bottom: 1rem;*/
}
.dms-on-demand-selection-section-consent-message {
    font-size: 1rem;
    font-size: .9rem;
    line-height: 1.4;
    margin-bottom: .5rem;
}
.dms-on-demand-selection-section-receive-updates-button {
    display: flex;
    align-items: baseline;
    margin-top: 0rem;
    /*padding-bottom: 1rem;
    border-bottom: solid 1px rgba(100, 100, 100, .5);*/
    /*margin-bottom: .75rem;*/
    margin-left: .5rem;
    padding-left: .5rem;
    padding-bottom: .25rem;
    padding-right: .5rem;
    padding-top: .25rem;
}
.dms-on-demand-selection-section-receive-updates-button:first-of-type {
    padding-top: 0rem;
}
.dms-on-demand-selection-section-receive-updates-button:focus {
    
    border-color: dodgerblue;
    border-radius: 3px;
}
.dms-on-demand-selection-section-receive-updates-button i {
    /*color: rgba(100,100,100,.5);*/
    color:white;

}
body.dark-mode .dms-on-demand a {
    color:white;
    transition:.2s;
    text-decoration:none;
}
.dms-on-demand-selection-section-receive-updates-button span {
    white-space:normal;
    padding-left:.5rem;
    line-height:1.4;
    text-align:left;
}

.dms-login-details-login-button {
    border-radius: 3px;
}
.dms-forgot-password-send-email-button {
    border-radius: 3px;
}
.dms-signup-details-signup-button {
    border-radius: 3px;
}

.dms-on-demand-selection-section-receive-updates-button label {
    padding: 0.25rem;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: .25rem;
    white-space: normal;
    text-align: left;
}

.dms-login-details .dms-on-demand-selection-section-receive-updates-button {
    margin-bottom: 0.3rem;
    border-bottom: 0;
    padding-bottom: 0rem;
    font-size: 1rem;
    padding: 0;
    margin-top: 0.3rem;
    padding-left: 0.5rem;
    padding-top: 0.5rem;
    border-radius: 5px;
    border: solid 1px transparent;
}
.dms-login-details .dms-on-demand-selection-section-receive-updates-button:focus {
    border: solid 1px dodgerblue;
}

.dms-on-demand-selection-section-forgot-password-container {
    padding-top: 0.5rem;
    text-align: center;
    justify-content: center;
    align-items: center;
    display: flex;
    margin-bottom: 1rem;
}

.dms-on-demand-selection-section-forgot-password-button {
    display: flex;
    color: dodgerblue;
    font-weight: bold;
    justify-content: center;
    text-align: center;
    font-size: 1rem;
}

.dms-on-demand-selection-section-login-button {
    padding: 1rem;
    background-color: rgba(100,100,100,.3);
    margin-top: 1rem;
    border-radius: 5px;
    transition: .3s;
    width: 100%;
    margin-bottom: .5rem;
    /* color: white; */
    font-weight: bold;
}
.dms-on-demand-selection-section-login-button:focus {
    background-color: rgba(100,100,100,.4);
}
body:not(.mobile-device) .dms-on-demand-selection-section-login-button:hover {
    background-color: rgba(100,100,100,.5);
}
.dms-on-demand-selection-section-login-button:active {
    background-color: rgba(100,100,100,.6);
    transition: .1s;
}

.stripe-payment-element {
    width: 100%;
    position: relative;
    padding: 16px;
    border: solid 1px #2A2A30;
    border-radius: 5px;
    margin: 8px 0px;
    margin-top: 0px;
    min-height:49px;
    max-height: 57px;
}
.dms-on-demand-selection-section-payment-card-description {
    display: flex;
    border: solid 1px #2A2A30;
    color: dimgray;
    border-radius: 5px;
    padding: 0.9rem 1rem !important;
    align-items: center;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}
.dms-on-demand-selection-section-payment-card-image {
    max-height:26px;
}
.dms-on-demand-selection-section-payment-card-number {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.dms-on-demand-selection-section-payment-card-exp-spacer {
    flex: 1;
}
.dms-on-demand-selection-section-payment-card-exp-year {
}
.dms-on-demand-selection-section-payment-card-exp-splitter {
    padding-left: 1px;
    padding-right: 1px;
}
.dms-on-demand-selection-section-payment-card-exp-month {
}

.dms-on-demand-selection-section-payment-container {
    padding-top: .5rem;
    padding-bottom: .5rem;
    border-top: solid 1px rgba(100,100,100,.3);
    margin-top: .5rem;
}
.subscribe-screen .dms-on-demand-selection-section-summary-item.total {
    border-top: solid 1px rgba(100, 100, 100, .3);
    margin-top: 0.3rem;
    padding-top: 0.7rem;
}
.subscribe-screen.no-payment .dms-on-demand-selection-section-summary-item.total {
    border-top: 0;
    margin-top: 0;
}
.subscribe-screen.no-payment .dms-on-demand-selection-section-payment-container {
    display:none;
}
.subscribe-screen.no-payment .dms-on-demand-selection-section-summary-item.subtotal {
    display: none;
}
.subscribe-screen.no-payment .dms-on-demand-selection-section-summary-item.tax {
    display: none;
}

.dms-on-demand-selection-section-payment-message {
    font-size: 1.4rem;
    font-weight: bold;
    text-align: center;
    padding-bottom: 0.5rem;
    padding-top: 0.5rem;
}

.dms-on-demand-selection-section-summary-container {
}

.dms-on-demand-selection-section-summary-item {
    flex: 1;
    display: flex;
    padding-bottom: .5rem;
    align-items: baseline;
}
.dms-on-demand-selection-section-summary-item label {
    flex: 1;
    font-weight: bold;
}
.dms-on-demand-selection-section-summary-item span { 
    font-size: 1.4rem;
}
.dms-on-demand-selection-section-receive-updates-button .validator {
    color: red;
    font-weight: bold;
    font-size: 1.4rem;
    position: relative;
    left: 0px;
    top: 0px;
    margin-left:3px;
}
.dms-on-demand-selection-section-summary-agreement {
    line-height: 1.6;
    font-size: .8rem;
    padding-top: .5rem;
    text-align:center;
}
.dms-on-demand-selection-section-summary-agreement-ex {
    line-height: 1.6;
    font-size: .8rem;
    padding-top: .25rem;
    padding-bottom: 1rem;
    text-align: center;
}

.dms-cart-checkout-summary-row.promo-code {
    font-size: 1.4rem;
    text-align: center;
    font-weight:bold;
}

.dms-on-demand-selection-section-summary-submit-button {
    padding: 1rem;
    background-color: rgba(100,100,100,.3);
    margin-top: 0rem;
    border-radius: 5px;
    transition: .3s;
    width: 100%;
    margin-bottom: 1rem;
    /* color: white; */
    font-weight: bold;
    font-size: 1.4rem;
    text-transform: uppercase;
}
.dms-on-demand-selection-section-summary-submit-button:focus {
    background-color: rgba(100,100,100,.4);
    border-color:dodgerblue;
}
body:not(.mobile-device) .dms-on-demand-selection-section-summary-submit-button:hover {
    background-color: rgba(100,100,100,.5);
}
.dms-on-demand-selection-section-summary-submit-button:active {
    background-color: rgba(100,100,100,.6);
    transition: .1s;
}
.slide-show {
    z-index:50;
}
.purchase-window {
    z-index:6701;
}

body.dark-mode .dms-on-demand a:focus {
    border-color: dodgerblue;
    border: solid 1px;
    border-radius: 3px;
}
.dms-on-demand .dms-on-demand-selection-section-subscription-item:focus {
    border-color: dodgerblue;
}

.drop-down.userSubscriptionOptions .selected-item {
    min-width: unset !important;
}
.drop-down.userSubscriptionOptions .selected-item label {
    display:none;
}
.drop-down.userSubscriptionOptions .selected-item i {
    margin-left: 0;
}
/*.channel-item-container {
    display:flex;
}
.channel-item-container img {
    object-fit:contain;
    max-height:70px;
}*/

.dms-on-demand-selection-checkout-complete {
    padding: 1rem;
    background-color: rgba(0,0,0,.8);
    border-radius: 6px;
    opacity: 0;
    transition: .3s;
    padding-bottom:2rem;
}
.dms-on-demand-selection-checkout-complete.show {
    opacity: 1;
}
.dms-on-demand-selection-checkout-complete .dms-on-demand-info-payment-amount {
    padding-left: 0.5rem;
    padding-top: 0.5rem;
}
.dms-on-demand-selection-checkout-complete .dms-on-demand-selection-container2 {    
    max-width: 50%;
    padding-left: 1.5rem;
    display: flex;
    flex-direction: column;
}
/*.dms-on-demand-selection-checkout-complete .dms-on-demand-info-payment-container {    
    max-width: unset;
}*/
.dms-on-demand-selection-checkout-complete .dms-on-demand-selection-container2 .dms-on-demand-title {    
   padding: 0.5rem;
font-size: 2rem;   
text-shadow: 0px 0px 1px rgba(0, 0, 0);
}
    .dms-on-demand-selection-checkout-complete .dms-on-demand-selection-container2 .dms-on-demand-info-payment-container {
        text-shadow: 0px 0px 1px rgba(0, 0, 0);
    }
.dms-on-demand-selection-checkout-complete .dms-on-demand-selection-container2 .dms-on-demand-message {
    text-shadow: 0px 0px 1px rgba(0, 0, 0);
}
.dms-on-demand-selection-checkout-complete .dms-on-demand-selection-container2 .dms-on-demand-message-ex {    
text-shadow: 0px 0px 1px rgba(0, 0, 0);
}
.dms-on-demand-selection-checkout-complete .dms-on-demand-selection-container2 .dms-on-demand-note {    
text-shadow: 0px 0px 1px rgba(0, 0, 0);
}
.dms-on-demand-selection-checkout-complete .dms-on-demand-buttons {
    justify-content: flex-start;
    padding-top: 1.5rem;    
    padding-bottom: 0.5rem;
}
.checkout-screen .dms-on-demand-selection-section-freeTrial-info {
    padding-bottom:1rem;
    text-align:center;
  }
.checkout-screen .dms-on-demand-selection-section-title {
    display: none;
}
.checkout-screen .dms-on-demand-selection-section-subscription-item.yearly {
    margin-top: 0rem;
}

.checkout-screen .dms-on-demand-info-container {
    max-width: 100%;
    display: flex;
    justify-content: center;
/*    padding-bottom:0px;*/
}
.checkout-screen .dms-on-demand-selection-section-payment-container {
    border-bottom: none;
    margin-bottom: 0;
}
.checkout-screen .dms-on-demand-selection-section-summary-item.total {
    border-top: solid 1px rgba(100,100,100,.5);
    margin-top: 0.3rem;
    padding-top: 0.7rem;
}
.checkout-screen .dms-on-demand-selection-section-summary-item {
    align-items:baseline;
}
.checkout-screen .library-group {
    width: 100% !important;
    min-width: 312px !important;
    margin: 0 !important;
}
.checkout-screen .library-group:disabled {
    opacity: 1 !important;    
}
.checkout-screen .library-group .image {
    width: 100% !important;
    min-height:312px !important;
}
.checkout-screen .library-group img {
    /*  max-width: 100% !important;
    object-fit:unset !important;
   max-height: unset;
    height: 100%;
    object-fit: contain;*/
   /* max-height: unset;*/
}
.checkout-screen .dms-on-demand-info-container .library-group .image {
    width: 100% !important;
    min-height: 312px !important;
    height: unset;
    max-height: 412px;
}
.checkout-screen .dms-on-demand-info-container img {
}
.channel-item-container .channel-item-image {
    object-fit: contain;
    overflow: hidden;
    max-height: 82px;
    margin-right:5px;
    display:none;
}
.player-data-pricing {
    flex: 1;
    margin: 0.2rem;
    text-shadow: -1px 1px 2px rgb(0 0 0);
    margin-top: 0.5rem;
    margin-left: 1.5rem;
}
.player-data-pricing button .button-label {
    padding-right:5px;
}

.player-data-pricing button.purchase-button {
    color: #FFAB15 !important;
    text-shadow: -1px 1px 2px rgb(0 0 0);
    font-weight: bold !important;
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important;
}

.player-data-pricing button.rent-button {
    color: #FFAB15 !important;
    text-shadow: -1px 1px 2px rgb(0 0 0);
    font-weight: bold !important;
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important;
}

.player-data-pricing button.subscribe-button {
    color: #FFAB15;
    text-shadow: -1px 1px 2px rgb(0 0 0);
    font-weight: bold;
}

.player-data-pricing .subscription-container {
    display:none;
}
.player-data-pricing .purchase-buttons {
    display:none;
}
.player-data-summary .expires {
    display: none !important;
}

.player-data-pricing .subscription-button {
    text-shadow: -1px 1px 2px rgb(0 0 0);
    padding-top: 0.7rem;
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.5;
    color: white;
    padding-left: 2px;
    text-align: left;
    color: #FFAB15;
    opacity: 1;
    font-weight: bold;
    transition:.3s;
    padding-bottom:1rem;
}
body:not(.mobile-device) .player-data-pricing .subscription-button:hover,
.player-data-pricing .subscription-button:focus,
.player-data-pricing .subscription-button:active,
.player-data-pricing .subscription-button.selected {
    color:white;
}
.player-data-pricing .subscription-button .subscription-title {
    font-size: 2rem;
    text-transform:uppercase;
}
.player-data-pricing .subscription-button .subscription-info {
    font-size: 1.4rem;
    line-height: 2.2rem;
}
.player-data-summary .expires {
    display: flex;
    text-align: left;
    /* width: 100%; */
    padding: 1rem 1.5rem;
    padding-top: 0px;
    padding-bottom: 0.3rem;
    color: #FFAB15;
    /* font-weight: bold; */
    font-size: 1.2rem;
    /* margin-left: 3px; */
    align-items: center;
    padding: 0;
    font-weight: bold;
}

.dms-on-demand-selection-subscribe-complete .dms-on-demand-info-payment-container {
    display:block !important;
}
.dms-on-demand-selection-subscribe-complete {
    /*padding: 1rem;
    background-color: rgba(0,0,0,1);
    border-radius: 6px;*/
    opacity: 0;
    transition: .3s;
    justify-content: center;
    display: flex;
}
.dms-on-demand-selection-subscribe-complete.show  {
    opacity:1;    
}
.dms-on-demand-selection-subscribe-complete .dms-on-demand-info-payment-amount {
    padding-left: 0.5rem;
    padding-top: 0.5rem;
}
.dms-on-demand-selection-subscribe-complete .dms-on-demand-selection-container2 {    
    max-width: 60%;
    padding-left: 1rem;
    z-index:5;
}
.dms-on-demand.subscribe-screen .dms-on-demand-selection-subscribe-complete .dms-on-demand-selection-container2 {
    padding-bottom: 1rem;
    padding-right: 1rem;
    flex: 1;
}
/*.dms-on-demand-selection-subscribe-complete .dms-on-demand-info-payment-container {    
    max-width: unset;
}*/
.dms-on-demand-selection-subscribe-complete .dms-on-demand-selection-container2 .dms-on-demand-title {    
   padding: 0.5rem;
font-size: 2rem;   
text-shadow: 0px 0px 1px rgba(0, 0, 0);
}
    .dms-on-demand-selection-subscribe-complete .dms-on-demand-selection-container2 .dms-on-demand-info-payment-container {
        text-shadow: 0px 0px 1px rgba(0, 0, 0);
    }
.dms-on-demand-selection-subscribe-complete .dms-on-demand-selection-container2 .dms-on-demand-message {
    text-shadow: 0px 0px 1px rgba(0, 0, 0);
}
.dms-on-demand-selection-subscribe-complete .dms-on-demand-selection-container2 .dms-on-demand-message-ex {    
text-shadow: 0px 0px 1px rgba(0, 0, 0);
}
.dms-on-demand-selection-subscribe-complete .dms-on-demand-selection-container2 .dms-on-demand-note {    
text-shadow: 0px 0px 1px rgba(0, 0, 0);
}
.dms-on-demand-selection-subscribe-complete .dms-on-demand-buttons {
    justify-content: flex-start;
    padding-top: 1.5rem;    
    padding-bottom: 0.5rem;
}
.dms-on-demand-selection-subscribe-complete .dms-on-demand-selection-container {
    max-height:100% !important;
}
.dms-on-demand-selection-subscribe-complete .dms-on-demand-info-container video {
    max-width: 400px;
    max-height: 225px;
    object-fit: contain;
    background-color: transparent !important;
}
.dms-on-demand-selection-subscribe-complete .dms-on-demand-buttons button {
    min-width: 15rem;
    text-align: center;
    justify-content: center;
}
/*.subscription-card.user-subscription {

}
body.has-player-key .subscription-card.user-subscription {
    display: none;
}
.subscription-card.user-media-subscription {
    display: none;
}
body.has-player-key .subscription-card.user-media-subscription {
    display: block;
}*/
.subscription-card.user-media-subscription {
    background-color: transparent;
    padding: 0;
    border: none;
    box-shadow: none;
    margin: 0;
}
.checkout-screen .library-group .name {
    text-align: center;
    font-size: 1.4rem;
    display: flex;
    flex-wrap: wrap;
    white-space: normal;
    text-align: center;
    width: 100%;
    overflow: unset;
    flex-wrap: wrap;
    text-overflow: unset;
    justify-content: start;
}
.checkout-screen .library-group .name2 {
    text-align: center;
    font-size: 1.3rem;
}
.checkout-screen .library-group .name3 {
    text-align: center;
    font-size: 1.3rem;
}
.checkout-screen .library-group .name4 {
    text-align: center;
    font-size: 1.3rem;
}
.checkout-screen .library-group .live {
    text-align: center;
    font-size: 1.3rem;
}
.checkout-screen .library-group .live-time {
    text-align: center;
    font-size: 1.3rem;
}
.checkout-screen .library-group .live-location {
    text-align: center;
    font-size: 1.3rem;
}
.checkout-screen .library-group .info {
    justify-content: center;
    font-size: 1.2rem;
}
.checkout-screen .library-group .expires {
    justify-content: center;
    font-size: 1.2rem;
}
.checkout-screen .library-group .time {
    justify-content: center;
    font-size: 1.2rem;
}

.library-group.upload-item .library-item .cache-state .size,
.library-group.transcode-item .library-item .cache-state .size {
    display: flex;
    flex: 1;
    padding-left: 0.7rem;
    padding-right: 0.7rem;
}
.library-group.upload-item .library-item .cache-state .cached-container .delete,
.library-group.transcode-item .library-item .cache-state .cached-container .delete {
    padding: .5rem .3rem;
    color: red;
}

.player.playback .app-feedback {
    display: none !important;
}

body.force-metadata .app-feedback {
    z-index: 95200;
    display: flex !important;
}

.dms-on-demand-qr-code {
    background: white;
    padding: 5px;
    margin-top: 0.5rem;
}
.dms-access-code-qr-code-image-container {
    background: white;
    padding: 5px;
}

.event-ticket .ticket {
	margin: auto;
	display: flex;
	background: white;
	box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}

.event-ticket .left {
    display: flex;
}

.event-ticket .image {
    height: 250px;
    width: 250px;
    background-image: url("https://media.pitchfork.com/photos/60db53e71dfc7ddc9f5086f9/1:1/w_1656,h_1656,c_limit/Olivia-Rodrigo-Sour-Prom.jpg");
    background-size: contain;
    opacity: 0.85;
}

.event-ticket .admit-one {
    position: absolute;
    color: darkgray;
    height: 250px;
    padding: 0 10px;
    letter-spacing: 0.15em;
    display: flex;
    text-align: center;
    justify-content: space-around;
    writing-mode: vertical-rl;
    transform: rotate(-180deg);
}

.event-ticket .admit-one span:nth-child(2) {
	color: white;
	font-weight: 700;
}

.event-ticket .left .ticket-number {
	height: 250px;
	width: 250px;
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	padding: 5px;
}

.event-ticket .ticket-info {
    padding: 10px 30px;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: space-between;
    align-items: center;
}

.event-ticket .date {
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
    padding: 5px 0;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.event-ticket .date span {
	width: 100px;
}

.event-ticket .date span:first-child {
	text-align: left;
}

.event-ticket .date span:last-child {
	text-align: right;
}

.event-ticket .date .date-date {
	color: #d83565;
	font-size: 20px;
}

.event-ticket .show-name {
    font-size: 32px;
    color: #d83565;
}

.event-ticket .show-name h1 {
	font-size: 48px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: #4a437e;
}

.event-ticket .time {
    padding: 10px 0;
    color: #4a437e;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-weight: 700;
}

.event-ticket .time span {
	font-weight: 400;
	color: gray;
}

.event-ticket .left .time {
    font-size: 16px;
}


.event-ticket .location {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    padding-top: 8px;
    border-top: 1px solid gray;
}

.event-ticket .location .separator {
	font-size: 20px;
}

.event-ticket .right {
    width: 180px;
    border-left: 1px dashed #404040;
}

.event-ticket .right .admit-one {
	color: darkgray;
}

.event-ticket .right .admit-one span:nth-child(2) {
	color: gray;
}

.event-ticket .right .right-info-container {
	height: 250px;
	padding: 10px 10px 10px 35px;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
}

.event-ticket .right .show-name h1 {
	font-size: 18px;
}

.event-ticket .barcode {
    height: 100px;
}

.event-ticket .barcode img {
    height: 100%;
}

.event-ticket .right .ticket-number {
    color: gray;
}


#player .chat-camera-button {
    z-index: 100;
    top: 12.25rem;
    right: 2.5rem;
}
.header-menu #button-subscribe2 {
    order: 99999;
}
.header-menu #button-options2 {
    order: 99998;
}


@media only screen and (max-width: 600px) {
    /*#playerOptionFullscreen {
        display: none;
    }*/

   /* #playerControls #player-view-container {
        margin-left: 1.5rem;
    }

    #playerControls #player-control-buttons {
        margin-left: .5rem;
    }*/
}

@media only screen and (max-width: 450px) {
    .project-layout .edit-layout-button {
        display: none;
    }
}





#chat .media-container, #chat .media-container * {
    margin: 0;
    padding: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

#chat .media-container, #chat .media-container * {
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

#chat .media-container {
    width: 100%;
    display: inline-block;
   /* border: 1px solid rgb(0, 0, 0);
    border-radius: 4px;*/
    overflow: hidden;
    vertical-align: top;
/*    background: white;*/
    max-width: 100%;
    object-fit: contain;
    max-height: 100%;
}

#chat .media-box {
    background: black;
    border: 1px solid rgb(107, 107, 107);
    margin: 1px;
}

#chat .media-controls, #chat .volume-control {
    margin-top: 2px;
    position: absolute;
    margin-left: 5px;
    z-index: 100;
    opacity: 0;
}

#chat .media-controls .control, #chat .volume-control .control {
    width: 35px;
    height: 35px;
    background-position: center center;
    background-repeat: no-repeat;
    float: left;
    background-color: rgba(255, 255, 255, 0.84);
}

#chat .media-controls .control:first-child {
    border-bottom-left-radius: 5px;
}

#chat .volume-control .control:first-child {
    border-top-left-radius: 5px;
}

    body:not(.mobile-device) #chat .media-controls .control:hover, #chat .media-controls .selected, body:not(.mobile-device) .volume-control .control:hover {
        background-color: rgba(255, 255, 255, 0.74);
    }

#chat .media-controls .control:active, #chat .media-container .selected, .volume-control .control:active {
    background-color: rgba(255, 255, 255, 0.44)!important;
}

#chat .mute-audio {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTFH80I3AAACsUlEQVRYR92Xu2siURTGp0hnJRgVGVNtEcHOiI2taWIa3Vgpgu4qiKBoCpOgxgdofD8QTFYUXMRSRLstt9xyy/0Tttxyi9kz17mXq7majFED+8EH+p2Zub+5j4NygiC8q/8PDQaDn9LHw6rf739Sq9UCthQfRk9PT2Rg7Ha7/U0q71erA2OXy+X9AgQ/B3KsgbFZADc3N25clyL5SiaTKnqgdW40Gs8A4vE4ARD9+Pj4XSq9Ts1m8xf9gE0uFosIYDwezyaTCXnjVqvVpq+T4oWur6/5UChEiuFweOkinL/GeAnoDD0ENJ1Of7ByTqFQ8HQB+/7+vi3WWbV1fnh4eAYgWsxEQb8gWSQS+YjCk5MTJkA2m5UNUK1WyR4olUq/cW6z2cJidn5+foSz09PTBYBer2cCpNNp2QC1Wm1pE9I1WIIz8BGAoe+xWEwYjUY8p9PpmAB3d3dbLwEWvOUHXHO73WdiZjAYrDiDE8JzWq2WCZBKpWQDwNstAXg8HgJgtVoRgN1uJwAul2v9DGwDsDoD0D8IALw5AnA6nQTg8vKS5zQazc72QKVSWQIIBAIEwGw2IwCHw0EALi4ueE6lUjEB8vn8m2fAYrEQgKurKwRgMpkIgN/v58UBmAC5XE42wOopgGeQGswOAlAqlQggGAwKnU6H546Pj5kA8DZvApjP56QPGI1G1Aeg65I+AHtv0QfWnQLo67IBYNkQQK/Xm9H5bDZDANBzCACs/wIApoIJgIogVm2dWa0Yms1X9CAQnUvRy6JvesmFQoEsgfhd+ohEXxeNRstS/DrRN29yt9td2oRY9DVer1fe7wEsn89npx/Ecr1e3wiQSCT+StH2ogdcdSaTYQLsXMPh8A8LgPWTbG+CM29cBZBKh9Xt7e0XOPfvM/hOxPrHekgzw8NZ4P4BtGizy4jmqy8AAAAASUVORK5CYII=');
}

#chat .unmute-audio {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTFH80I3AAACY0lEQVRYR9WXS2/aQBDHfa9POaDGhKTpgTNIfICohfI4wC0HDuWdOCWQBKy24hmUBqduAjgVhx4Q50oIPk0/TQ/urhlbNplFEcWu+pd+EjszO7OyZweZ0zTtn4Ia3QQ1uslWNJ1OVVmWtU6n8xpM7ikSiVQ8Ho9mAGbnlcvlDq2FXT1AvV7/jRWnQIgzGg2GC6yoFQjdvsJv3ipYwVUgfHuKRt4dYYVYwLbnKxaL7WCJsu8zvHzbF8ST0ye+dUDa56vdbqOJvLsCrw5HwtXFJepnAWl1kdkgEU5gaUpRlGPCjb4gwwNNdHjwir9XvgnV8wrqZ6EnJQoGgynDlkgkjsDMpVKpgGEPBAIZTpIkWwID+gS+yndC+ewD6mcBdWhe8wCUeDzuTSaTL6y2QqGQ4brdrmmw4vPu8cOHgXBRqaJ+FlBfV7lclrAYSj6fX76CRqOBBhz49vnv6qNQu7xC/Sz0pBaRofVjNUYUxZ/g5rher2dzGuzv+XgyeDbuAavWxjSbTZvTgB6ANmGlfI76WUBaU1gMBdwc12q10ADh5S5/15eFs1MR9bOAtLpI99t6oFarmb+j0eiyB1gHoE04uH/YuAnT6bTtFhSLRS9pStstIFcywxxE9Ak8jtSNB1E4HDYPUCqVzDlQrVbNORAKhTLMJ0B74G9vwWKxkAhPJuF8Pj8mLF9BNpvdIdiSfP74SbvudPnbmy/O/xes02w2E/r9PlqIBWzdrsjgKGHFMGCLM8IKrgKhzmkymfzCChtAmPNi3R5wuyNyp6PW4n6/3/0PE6rxeKwSYrD8z4R9MLqHxv0BTZnWtpv+sYEAAAAASUVORK5CYII=');
}

#chat .mute-video {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwQAADsEBuJFr7QAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTFH80I3AAABoElEQVRYR2NgGAWDNARSge4qJxL7UN0PfHx8O5iZmW8CDSYGd1HdAXJycns4ODjuAQ3Ghz8D5f8D8SKqO0BfXz+Ll5e3FmgwPnyelg7gADqAE2gBPryEZg4gMkgXUtsBTEAD2UjAi6EOAIUEsj5GZA8A0xOTpKQkNnOZ0T0qCRRIJAEfhTrgGJoeQTQHSAMdgM1cY3QH2AAFXpOAf0AdAKKR9WmCDO7q6hIPCgrSEhISShQREcFmbg26AxyhBoKyFiVYF2RwW1tbrr+//zEWFpZrQIzNvDaaOsDGxqZdWVn5GyMj408cHqKNA9jY2EqApWg4Dw/PZk5OTnwhSTMHnGZiYjoA9PVjAlFJGweA4hsY7MSkIdo4gIQEPOqAYRoCwBxATAIEqaFNCADLgcdAR9wFWvBhQLIhOzt7K7AgygE6Yi+B0KBNCAAttQA6gNfAwGASsCqmf0kIDHZwZZSTk1Po4OBwBlgw3SK2MiK1OsZVdcOqYwNgdRzOzc3dyM/PT1R1rAJ0eB8VMKhhAwfAaNAANkiwmeuNXh2P8kdmCAAAkSPyEJegDaEAAAAASUVORK5CYII=');
}

#chat .unmute-video {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwQAADsEBuJFr7QAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTFH80I3AAACFUlEQVRYR2NgGIFgPtDPGQPlb5Dl/4H4PRBL4HNEKlCynEjsQ6RvYJZ/B6p3wKuHj49vBzMz802gImJwFxEOaID6HGS5B0H1cnJyezg4OO4BFeLDn6GGLiJgIGmWgwzT19fP4uXlrQUy8eHzRDigAKoGFO8RBH0OUwB0AAfQAZxAPj68hIADEpAsB7GpDhbicQCy5RXE2swEVMhGAl4MdQAoJJD1JSL5vAGYnpgkJSWxmcuM7jBJoABIM7H4KNSiY0h6+oDsH1DxBpAFQAdIAx2AzUxjdAfYAAVek4BhFoFokL6PQPwPZnlXV5d4UFCQlpCQUKKIiAg2c2vQHeCIFHSgVEsungMyuK2tLdff3/8YCwvLNSDGZlYbrRygCzLYxsamXVlZ+RsjI+NPHJ6hjQPY2NhKgKVoOA8Pz2ZOTk58oUgzB5xmYmI6APT1YwLRSBsHgOIbGOzEpB/aOICExDvqgGEaAsAcQEwCBKmhTQgAy4HHQEfcBVrwYUCyITs7eyuwIMoBOmIvgdCgTQgALbUAOoDXwMBgErAmpH9JCAx2cF2Qk5NT6ODgcAZYMN0itjKCVceglivI5aCqFdR+J6WKBqnVBDkAWB0bAKvjcG5u7kZ+fn6iqmMVoL4rUMt/A2lQiwfUwCAVgxo2cACMBg1ggwSbGd7o1fF0qOXEtd3RdVPIbxixloMCDpZViO84UBjcyNoBhLMZ3JbarLEAAAAASUVORK5CYII=');
}

#chat .record-audio {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTFH80I3AAACuUlEQVRYR72WTW8SURiFm9jquiGFhXahdWWl9bMWozQhIUaBahA/0spGKli1VC0EaqpSUIpWksoELcwaQrBCWLl073/xN4z3JXfIncuBIUZ8krOYM/e9z2SGCTOiaRqMGc1m81CtVsuUSqWMqqpTvO4L9KCS0o9qtXpgtVo1Ofx0T6AHlZReZDKZXSTX4/f7J/nSLqAHlRREOByeRlI5fHkX0INKCsLn891EQjnFYvEaHzEAPaikmCFL8/m86RD0oJKCmJubs8tiOewuKfF4fIaPGIAeVFIQTDDQIwiFQrf4iAHoQSWlH+y9V2RpIpHoP8SAHlRSEOwtOBOJRFRZricQCKjJZFItl8tn+YgB6EElBWGz2QZ6BMFgcDiPYNY+cwkJ5axGHs/zEQPQg0qKGbK0sPfZdAh6UElBeK7f8MlilHRqe5GPGIAeVFIQk0ePDfQbeLC0PJzfwMkTUwNdwNPVJ//mAjwez7K+Kfv//22fPj3QBWwmkovicaVSWfqrC0ilUpfFje7fvXdOPO6V798OFsTj9mYM6EElRUfcqNVqbd25Hej7PXDx/IVT0WdrTf34xfrzfb4V9qCSopNOp/dEQfbd+7H4Ruyn2Omh9QtXnWNypwM9qKSIiBsyeZ3d4olXyc3R2MsN9VFoRf2wk1O/Fr+MrjwMTYhr19eiab5FG+hBJUVEUZR5ceM3W69/8VMGxDXbb1PGTRjQg0qKjNPpHBcFlJ1sVivvlzR2Jww95dPH3XE+2gF6UElBsNfS9IPE6/UqhUJhOB8kRC6XO+5yua6wV7RL7na7Z/kyCPSgkmKGw+E4LMotFssRfqon0INKigz76Iyxr55OotFoQrwAFD7aAXpQSZFBArM0Go06H28DPaikyCCBWer1+g8+3gZ6UEmRQQKz8NEO0INKyjCAHlT+v2gjfwDNQh1izdJWJQAAAABJRU5ErkJggg==');
}

#chat .record-video {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwAAADsABataJCQAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTFH80I3AAACEElEQVRYR+2XvUscQRiHT89vSJEgWgSDBARTJIUELBQ8LZNaLCyCmCqICKZJ5T8QBSsr4UBE7QQFIW3wE2KKgEjiB1goCFEEEfxIzucnMzIst3vnMbjNLTzs7Ozs+/7mnXc+NpHJZBJxEqtzdfxeQOIRLzfiRQHFCLgRmCAPn2fJxVfUrfkkLAkvcbIEzQERb3lmvvgjTIB18hNnHVBmhDy6AAk5gn54CrEIkIgLGIVPPsMvW7mGIDjeh3EL8JqAhUSgKCCfCPwntCeQhm5ohw8wD+eg9/d2HpqEuQT8w/gmvAwsYPbxPYXfrgjfAjYw/ibEua2uMtP6rjMPFRA1DU8xWAslOQTodSVIbN4CtBCNQdRCtML7UiNgins23L1lOF8BWoo/Qq6leNrp+R830Zxyn9NmIR8B2oxSUG4+jNoL0rSpMRFo4L4bEDHLs8ZfVxLWowQUsh1/w2CT08NWysr4K5gDDY+9XlPYjhKgA8kz5wNb1IFEyl1+8KwEVIK+MxGw7bWVfwUbQdv7zxTO4NjHqfgJhsbhBmagMYtwW6XQKzLf4RqGfAjQtJNR5YvCPQkvQkS0UL9onGvI6nwIkK9q6IV9I0LHuUFoAw1bJ3yBZeNc58oUJH0JkAjNgB44AK33f2EHtmAPNOZaqlehCyr0kU8Bsqezo6bgCASn4S/qBqBePVfjUAFx/SHH/nd8C3srt2KeTS1mAAAAAElFTkSuQmCC');
}

#chat .stop-recording-audio {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTFH80I3AAADAUlEQVRYR7WWS08TURiGhxTULSGUhZKouBILXhGMFkNCjJaiwXoJlI1FKiqlSpteglpahSqSYJsq7awhTUUaVizd+xtcuDQmxkTdeRnP15xpzhzedhoiT/IkzDvnO+9kphNG0TQNakaxWLTk8/lENptNqKraxuOqwB4UktVYXV1ds1qtmiw/XRHYg0KyEolEYgGV6w4NDbXypVuAPSgkEePj4+2oVJYv3wLsQSGJcDqdl1GhbCaTucBHDMAeFJJmyKWLi4umQ7AHhSSiq6vLJhfLsruUDgaDHXzEAOxBIYlgBTU9Ao/Hc4WPGIA9KCSrwd77tFwaCoWqDzFgDwpJBHsLjnq9XlUu13W5XGo4HFZzudwxPmIA9qCQRLS0tNT0CEZHR3fmEXTaOk6jQtkJ751uPmIA9qCQNEMuTS29Mh2CPSgkEY6Ll5xyMTIemx3kIwZgDwpJROvefTX9BtzDIzvzGzh0sK2mC7g3cff/XIDD4RjRN2X//7/a2o/UdAGRUHhQPF5ZWRne1gXEYrEz4kY3r984Lh5X8t3btV7xuLQZA/agkNQRN9rY2Ji5dtVV9Xvg1ImTh333J4v68YMp/zLfCvegkNSJx+NLYsHc02cNwenAezHTpfW95+wNcqYDe1BIiogbsvICu8XN0XCkPvBwWr3tGVOfzyfVN5nX9WO3PM3i2qlJX5xvUQL2oJAUSafT3eLGj2cefeCnDIhrZp/EjJswYA8KSRm73d4oFpDzc3NabjmrsTthyMmXLxYa+WgZ2INCEsFeS9MPkoGBgXQqldqZDxIimUwe6OvrO8teUUNxNBrV+vv7O/kyCOxBIWlGT0/PLvECmpqadvNTFYE9KCRl2EdngH31lPX5fCHxAtxudygSiQT8fn/pPHt9A3y0DOxBISkjltXq+vp6gY+XgD0oJGVQgZmFQmGTj5eAPSgkZb7X1f0oLTfxo8XySZePloE9KCRF2NH+P4rymfnrt6L8/Kso39jfX/TSSvLxMrAHhdtWUfYwz5dFawxqyj+MRz2Y+XGHbwAAAABJRU5ErkJggg==');
}

#chat .stop-recording-video {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwAAADsABataJCQAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTFH80I3AAACAElEQVRYR+2XvUscQRiHT42aBCwU0SIoQRBioUUQLBROLWMtKSxEtBKRQGys/AsUrKwC14itoCDYip+gFoJIiAoWCoKKIIJfOZ+fzBzDcbv3weA2d/DA7M7uO8+887FzsWQyGYuSSBtXx1MCsXf8uRkvChQz4GZgjnn4JcNcbOHelk+CJuEDjazAtzSJdq5ZL/4IErCN7NNYHD4YkXcXkMgFDEM1RCIgiXuYhlGf6VesbEOQPt7nUQt4nYCFZKAokEsG/pPaa0hAP3TBICzCHag+FSffSZhN4IXge9CUtoHZyz4Kf10J3wI7BG8LaNze/miW9Vtn8hUIW4Y3BKyFkiwCqq4EyeYsoI1oBsI2og3qSyXwdrjKAHXut+V3rgLaikcg21Y8b3seIjDkZGcpFwF9jLqh3LwY9i1I8MxnMwQNARnQ+OtXBtthAoV8jlcJ2Oz0sMOVMMNjq1spHIUJ6EBS4wSzRR1IZO6yy7UmoCboD5MB+3xcEk4Gbe8nKNzCpY9TcRWBZuEZFuBrBnF7S6nvgDV4gl8+BLTsFFTz5RH+QGOAxHfuL5vGNWR1PgTU1icYgFMjoePcOHSChq0HJmHdNK5zZTeU+RKQhFbATzgD7fdX8A8O4QQ05tqqN6EXKvSSTwHF09mxAabgWPEdDiiPQb16rocDBaL6hxz5v+NXmoPQBeoNXQgAAAAASUVORK5CYII=');
}

#chat .stop {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTFH80I3AAAEzUlEQVRYR8VXWUhtZRS+Hud5xAk9TsccUBHRFNFMQUUCLRUjwUBxDpQjCE744AReE3FMSQ3SNBNyfOmpxx6CiKCX6EKjdIsLNyoiClbr+9n78J999j57Sxfa8HHYe69/rW+v/1vrX+cBET34PyGCW7x82M6X4c8IZARpgGcBDD8GbE0vEdsCAQQNYxQxRhkfMh4x/mSAPfA34zHjY8Y8o4YRqZA1JGKFAAK/wNiy2Wx3YWFhlJycTFlZWZSbm0t5eXkuZGdnU2pqKkVHR5O/v/8Thegr/BujZM6DiDcCNraOZ7zh4+PzNZyWl5fT+Pg4r/GumZWVFWpqaqKkpCQQuWMfa0r2sHVulxEBBM9kPAwMDPyloKCAZmZmTANrie3u7lJtbS2Fh4dji64YFdot0SMA8djBOiQk5Pf6+nq6uLi4d3CZTE9PD8XExKgknpdJ6BGAcGaCg4N/RRrN0m31/fDwsNAG+z5nZDFElWgJoITa/fz8vsd+W3Vu1a6zs5M4q39xjFlGiB6BWH74EcSD/dNzPDk5Sefn56bk1tbWdG1KSkqIq+k7jvMiwyZnAMLrZNH91tbWpru4q6uLoqKiKD8/n05PT3Vtbm9vqbKyUlTA2NiYh83CwoLwwbH2oAWZAErkg4SEBDo5OfFYCGeKmkXjycnJocvLSze76+trKi4uJl9fX2ETFxdHi4uLHr6KioqIS/tntkmRCdg5NU+N9v7s7Ew0HDhWgcajbtPNzY1oTOzY9T4zM5MODg48CAwMDBBnGnavygRa8XBwcNBwf4+OjsjhcLiRQBCkNS0tzS14RkYG7ezs6PqCn4iICPh5SyawiDa7tbXlVWCHh4eUkpLiRiI0NNTtPj09nfb39736iY2NxZpPZALHkZGRlpoO0pqYmOgWVN0WnAV6addWVHx8PNZ/KxN4H+qEkKzUdW9vr7qPLiJYv7S0ZGm9QuAHmcB7yIBW2Xpk9vb2xKknCw4ZgPqrq6vvQ+AbmcBDlBmce8vA9va2OI7lauDu5rrnLko1NTWmJFCi7ONTmcBrQUFBNDIyYrgY3Q1fLgdHPxgaGiJFVOIdH8HU2Nho6AcljWyzLWrUNRE5uA8YpnBjY0OUmhy8sLDQFWR+fp7QxNT3KOnm5mZdEqOjo4SPZdvXZQKY7x6hhV5dXek2D7XcQLSsrMzDRksCQtM7E7CWffzE8RwyAcx9TjBDz9fTQUtLC6FXeBPa7OysyATO/76+Pg8/6+vr6na9qz0LcDpmML5Eqo+Pj3VJTExMmApseXmZjOyqqqqIhfojx2nQnoYggLG6KyAg4HFdXZ1pICv9Qrbp7+9XDzTMiBh2PQYSPItmvIn97ujoeGYkpqamSGk+n7H/Uny9EQG8eI7xDvpCa2vrfybhdDpF6+bG9QX7fZkBwYtLFqH6DL8QZB7jkGfDfyoqKggN6L4pR1uHcJUB5HP2h/8IwXIgIwIqCYhyjkVzh0bT0NBAm5ubpkTQaDD/2e12nBd/sA8MotXyl5tlQH2PyTWU8RLjmok8RRmi+7W3t9P09DStrq4KzM3NUXd3N5WWlorpl4WMRvMVY5iRyMD/RY/LWwZkY+gCFVLHeJvxBM0Ihw96vwo8Uw4oDJ1OJTC20/ByEbjv/j5L+38BGxuYOLu/9/8AAAAASUVORK5CYII=');
}

#chat .take-snapshot {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAA8dJREFUWEftVktIW0EU1aq0BUGrYuL/WxF/UasmSm0SBbVqVCrGX0T8VFBpLSrBLxIjKkb8oAtR9xWhIAgtLXRfWorgqqtC/XTTLnTTRW2dnnnOG98zkdTfosULh7w3c+ee827u3BmXa/svbXp62rWrq+tmSkrKncbGxqTm5uZ7paWl3jExMa7M5fJtYWHBY3R09K7BYNCB6JFOp7PExsZu+vv7EwqFQjETGBioYO4Xs9XVVW98oSIxMVHZ3d1dAQJzWFjYEEjfpqam7iclJZGWlhbS09ND9Hq9IIDhPgtxdltfX88YGxurioqKmgsPD18D4UulUvkqOTn5q4SAJCQkkKmpKQJzoaivr+dzJSUlQxaLxYuFdG4TExO38aWtWVlZ70G4FRER8Q2kP2kwKYlIwEj4+OzsLIFYPhcSErKH91gW/tjm5+fd5ubmnthstscoliCkcZkuAJkA/H88CEVvby8nWVxclM2VlZUJc0tLSyQvL4+OHQK/GQ6AOEZ7bDU1NW7FxcV9mPwcHBxsQvHsNDU1cZKKigoZiThOIR2nwPrD6Ojo73jegPANfIAtLS3NaDabjZOTk36MUm61tbVuqF4qgAbYlRJQpKeny0hGRkbI+Pg4qaqqEt5BcoCC/IjnZZAtDgwMNMfFxXli+3larVYPRnO6SQVQYP+C94icVrM4LkVkZOQaauM5is4SFBTU2tfXl8HCnd3q6urcUDxcAAVNOxVAf3NzcwlqYwZF9BCFmI/9rNdoNMGoaOXKysotFub8JgpQqVT8ywMCAghSSNra2gh9Rpp/QNg+w94FoWTUR1ZdXS0UoVQAnHg2sPdJaGgof6cQ/U765ufn87nh4WG69WTrGAIZ9ZHRDKAGnjlwFGAymYTOhhbLx0QSCqkvtrBsrry8nM9JIBdQWVnpWlhYmIzKfYEtSCCGO2dnZxP832TEaiUdTzto8QnjDQ0NBE2KdHZ2cl8RarVamGtvbycatcZuHpALoIY0+6JLfUCRkczMTO6sQl+Pj48XRDyAmFNSelbYCzAajT4FBQXvHDhfBewFoNJR6MpfopNWq5X9lxeBTqtzLqCoqMgXR+eG6GQoNmCt44BnBWI7F4DBgBNOV4l/SEBOTg6y6Di1zoAbkl08hr8XIAbb+rJFtoGdrW2n2N3e4escxQSua8BeAA4jP2xDfo2+KqBNb6LH2N+McIdz7+/v16L3v3a08DxA297EDeuT+I7b0htc9XS4MbkzWrkNDg7eQEv2grPyMoBzxQe3aV/xHUe1F07VG4zu2mAuLn8AJ5n+SnkR0KgAAAAASUVORK5CYII=');
}

#chat .zoom-in {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAe1JREFUWEftl8tqwkAUhn2DPoV3vEaNikENaHAruhLUbUC87FwIbly5cKGbgNBdu3GbF+kTTf2HOSVTx7SL0Aj1wE+mkzP/+RzN5DQSZjDGxCikkACi0SjLZrO+isfjvsj7/f4ln8+zTCajXE9CLeRLAJqmsWKxyIUxyft3qVTyBdjtdma5XGaFQkHygMgbSiQS/gAQimEOVxLMRboyDoeDqeu6tI7G5I8dGgwGagBKzOVyH4vFYrNarSRdt3gj0u/Ger3eLJdLaR28KpUK9x4OhyydTqsBCMJxnDcxHVgYhuH2+32+C6lU6u8BRqORC+/QAEzT5ACoEQpAq9VyqcZjAuC7wWOGx+hyuThiOrCYz+fv8IdisdgtQBjxBHgCPAEeCwAHBL2vT6dT4Cdhr9fjJyFO2uvrnleWAOgmII7HY+AAjUbDhTeUTCbVAATxP19GuIHtAcD5fA4coNls/twPAAA/xmtzGThAu93+3Q5AaKun0ymbzWZsMpnwMVSr1V5F+t0Yj8df+SR4UPG7ALT9SEAHa1kWfyS9PT7ui3Rl0P8F8KI1JJrDVQmAhSiGK4p7F5EAJtKVsd1uTW8+BA+vD8bKthxFq9Uq63a7/JOiGAlQUKfT8QVA1Ot13lXRmu+Ct23btwBhxAMAsMgnlwgSabRVBN4AAAAASUVORK5CYII=');
}

#chat .zoom-out {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAglJREFUWEftV8lqAkEQzYd4EuK47ytueHA5OPgFjoIHEVzwYOIl4NWf8JKDl/xXPqPSr+nSUceZEYfEgA8Kpal686yqqWpf/gWCwSAlEgmKxWK02+3e1LEl4BsOh6W/OrofmqZRKpUiXdepXq9/qGNLpNNpgmWzWRoMBpo6vg+RSIS63a4krVQqtgKSySRlMhlvBdRqNcrn85K0XC7/vgCQ5nI5mVqnEsAX5YKAfr/vjQA0Hwjxy9wI4B7wTABn4BYB8C+VSu4FiDrrSB0eIuosDWR4nXAGUjcCuFnhz0IQZzbRyJev6Hg8lrUrFAqEpuNaMhEHu3kNO52O9OVYsyAYZoVyPwIC0OmNRkMGczbMRG4EcAO2Wq1DDMezRaPRSwGr1cq32WxoOp3SbDaztPl87jjdDMP4WiwWtFwuEfN9zgETz/pU7k888cQDYb1e+8SEMuwsFAoZyv0qxCS1jDVbr9e75JlMJofJd82wF5zuAzz97AwXHOV+BEaxlTOPT/5erVZtBZzHmj/ZLEex2ANyG55bPB4/IXCzjhGHfcCrGXFmzmKx6DjST4DUM5FbAfAX5fLmQoKa3ZIB+CEDYjE9BXgjQLy7khR1bbfbtgLQL7jYwH84HHojIBAIHDq72Ww6ZgB+EDAajbwR4Pf7pQCQbrfbd3VsCfwv5Gzt9/tXdfzAIKI/NHr5AU4kDfWD0WSsAAAAAElFTkSuQmCC');
}

#chat .media-box video {
    width: 100%;
    vertical-align: top;
    object-fit: contain;
}

#chat .media-box audio {
    height: 5em;
}

#chat .volume-control .volume-slider, #chat .media-controls .volume-slider {
    width: auto;
    background: rgba(255, 255, 255, 0.09) !important;
    border: 1px solid white;
    height: 33px;
}

#chat .volume-control .volume-slider input[type=range], #chat .media-controls .volume-slider  input[type=range] {
    margin-top: 9px;
    height: 15px;
    outline: none;
}

#chat input[type=range] {
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    background-color: rgb(83, 77, 77);
    width: 200px;
    height: 20px;
}

#chat input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    background-color: black;
    opacity: 0.5;
    width: 10px;
    height: 26px;
}

.app-form-field-media-item iframe {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#player .interactive-video {
    background: rgba(20, 20, 20, 0);
    position: absolute;
    left: 8rem;
    top: 7rem;
    border-radius: 6px;
    padding: 1rem;
    display: none;
    transition: 1s;
    -o-transition: 1s;
    -webkit-transition: 1s;
    opacity: 0;
    width: max-content;
    /* border: solid 1px rgba(20,20,20);*/
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /*  z-index: 702;*/
    pointer-events: none;
}
#player.playing .interactive-video {
    display: flex;
}
#player .interactive-video.fast,
.interactive-preview .interactive-video.fast {
    transition: .3s !important;
    -o-transition: .3s !important;
    -webkit-transition: .3s !important;
}
#player .interactive-video.show,
.interactive-preview .interactive-video.show {
    opacity: 1;
    pointer-events: unset;
}
#player .interactive-video.dragging,
.interactive-preview .interactive-video.dragging {
    transition: none !important;
    -o-transition: none !important;
    -webkit-transition: none !important;
    display: flex !important;
    opacity: 1 !important;
}

#player .interactive-video a,
.interactive-preview .interactive-video a {
    color: white;
    font-size: 2.2rem;
    padding: 1rem;
    color: #FFAB15;
    pointer-events: all;
}


/***USER USAGE*****/

.navbar-usage-container {
    /* position: absolute; */
    /* right: 0rem; */
    /* top: 8px; */
    display: flex;
    align-items: start;
    opacity: 1;
    transition: .3s;
    /* z-index: 10; */
    position: relative;
    flex-direction: column;
    width: 100%;
    padding: 1rem;
    padding-bottom: .5rem;
}
.navbar-usage-container.selected {
    background-color:black;    
}

/*.body:not(.mobile-device) navbar-usage-container:hover {
        opacity: 1;
    }

    .navbar-usage-container:focus {
        opacity: 1;
    }

    .navbar-usage-container:active {
        opacity: .7;
    }
*/
.navbar-usage-bar {
    width: 200px;
    height: 10px;
    border-radius: 5px;
    /*background: linear-gradient(#EEEEEE, #CFCFCF);*/
    /* border: 1px solid rgba(0, 0, 0, 0.125);*/
    border: 1px solid rgba(0, 0, 0, .3);
    border: 1px solid rgba(255, 255, 255, .1);
    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 20%), 0 1px 5px 0 rgb(0 0 0 / 12%);
    display: flex;
    align-items: center;
    overflow: hidden;
    /*cursor: pointer;*/
    position: relative;
    top: -1px;
}

/*body.dark-mode .navbar-usage-bar {
    background: linear-gradient(#12121A, #121216);
}*/
/*body:not(.mobile-device) .navbar-usage-container:hover .navbar-usage-bar {
    background-color: purple;
    border-color: mediumpurple;
    background: linear-gradient( 60deg, #7b1fa2, #913f9e) !important;
}*/
.navbar-usage-bar-used {
    background-color: dodgerblue;
    display: flex;
    height: 100%;
    transition: .3s;
}

    .navbar-usage-bar-used.ok {
        background: linear-gradient( 60deg, #288c6c, #4ea752);
    }

    .navbar-usage-bar-used.warning {
        background: linear-gradient( 60deg,#f5700c,#ff9800);
    }

    .navbar-usage-bar-used.error {
        background: linear-gradient( 60deg, #d22824, #da3a36);
    }

.navbar-usage-bar-available {
    background-color: lightgray;
    flex: 1;
    display: flex;
    height: 100%;
    display: none;
}

.navbar-usage-label {
    /* padding-right: .5rem; */
    text-transform: uppercase;
    color: dimgray;
    color: black;
    color: white;
    font-size: .7rem;
    /*cursor: pointer;*/
    transition: .3s;
    white-space: nowrap;
    padding-bottom: 3px;
    padding-top: 6px;
}

    .navbar-usage-label > span:first-of-type {
        padding-right: .5rem;
    }

#labelUsageLabel {
    padding-right: 5px;
}
#labelUsageAvailableLength {
    padding-left: 5px;
}
.iconUsageAvailable {
    padding-left: 0.25rem;
}
.navbar-usage {
    padding-top: 3px;
    padding-bottom: 5px;
}
.navbar-usage-label span {
    color: gray !important;
}

/*.navbar-usage-bar {
    width: 160px;
}*/

/*body:not(.mobile-device).dark-mode .navbar-usage-container:hover .navbar-usage-label {
    color: white;
}

body.dark-mode .navbar-usage-container:focus .navbar-usage-label {
    color: white;
}

body.dark-mode .navbar-usage-container:active .navbar-usage-label {
    color: whitesmoke;
}*/

.navbar-usage-total-length {
    padding-left: .5rem;
    text-transform: uppercase;
    color: dimgray;
    color: black;
    font-size: .7rem;
 /*   cursor: pointer;*/
    transition: .3s;
    white-space: nowrap;
}

body.dark-mode .navbar-usage-total-length {
    color: dimgray;
}

/*body:not(.mobile-device).dark-mode .navbar-usage-container:hover .navbar-usage-total-length {
    color: whitesmoke;
}

body.dark-mode .navbar-usage-container:focus .navbar-usage-total-length {
    color: whitesmoke;
}

body.dark-mode .navbar-usage-container:active .navbar-usage-total-length {
    color: dimgray;
}*/

.navbar-usage-upgrade-button {
    text-transform: uppercase;
    font-size: .8rem;
}

/******************/

/***HtmlEditorLoader*****/

#loading-screen {
    display: flex;
    flex-direction: column;
    height: 100%;
    align-items: center;
    justify-content: center;
    margin: 0rem;
    z-index: 9999;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: all .3s;
    background: rgba(0,0,0,1);
    background: linear-gradient(to bottom, #000, #111);
    /*background-color: black;*/
}

    /*body.no-transition #loading-screen > div {
            transition: none;
        }*/
    #loading-screen.show {
        opacity: 1;
    }
    #loading-screen.show.opaque {
        opacity: .6;
    }

.logo-image {
    text-align: center;
     padding-bottom: 1.5rem;
    padding-top: 1.5rem;
    /* min-height:170px;*/
}

    .logo-image img {
        /* width: 10rem;*/
        max-height: 10rem;
        transition: .3s;
        object-fit: contain;
    }

.logo-name {
    text-transform: uppercase;
    white-space: nowrap;
    transition: .3s ease-in-out;
    opacity: 0;
    color: white;
    text-align: center;
    font-size: 2rem;
    text-shadow: -1px 1px 2px rgb(0 0 0);
}
.no-shadow .logo-name {
    text-shadow: none;
}
    /*body.no-transition .logo-name {
            transition: none;
        }*/
    .logo-name.show {
        opacity: 0;
    }

@media only screen and (max-height: 600px) {
    #loading-screen .logo-image img {
        width: 8rem;
        max-height: 8rem;
    }
}

#loading-progress-bar {
    display: flex;
    flex-direction: column;
}

    #loading-progress-bar .loading-progress-bar-label {
        font-size: .7rem;
        text-shadow: -1px 1px 2px rgb(0 0 0);
    }
.no-shadow #loading-progress-bar .loading-progress-bar-label {
    text-shadow: none;
}

    #loading-progress-bar .loading-progress-bar-percent {
        width: 0%;
        height: 1px;
        background-color: rgba(100,100,100,.7);
        margin-top: 3px;
        transition: .3s;
    }

/******************/

/***StudioUpload*****/

#StudioUpload {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    color:white;
}
#StudioUpload .links-container {
    padding-left: 0.5rem;
    width: 100%;
    border-bottom: solid 1px rgba(100,100,100,.7);
    padding-bottom: 0.3rem;
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
    padding-left: 0.8rem;
}
#StudioUpload .links-warning-label {
    line-height: 1.6;
    text-transform: uppercase;
    font-size: .7rem;
    letter-spacing: 3px;
    padding-bottom: 7px;
    font-size: 1.4rem;
    padding-left: 1rem;
    padding-right: 1rem;
}
#StudioUpload .action-buttons {
    display: flex;
    padding: 0 0.5rem;
    padding: 0 !important;
    margin-bottom: 1rem;
    margin-left: 1rem;
    margin-right: 1rem;
}
#StudioUpload .upload-section-files {
    border-top: solid 1px rgba(100,100,100,.3);
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: auto;
    padding: 1rem;
}
#StudioUpload .upload-section-files-no-item {
    font-size: 1.4rem;
    padding: 1rem 0.1rem;
    padding-bottom: 0.5rem;
    color: #999;
    padding: 1rem;
    padding: 0.5rem 0;
    padding-top: 0;
}
#StudioUpload .upload-section-files-items {
    /* flex: 1; */
    position: relative;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}
#StudioUpload #StudioUploadFiles {    
    margin: 0rem;
    display: flex;
    flex-direction: column;
    flex:1;
    overflow: auto;
}
#StudioUpload .upload-section-files-spinner {
    font-size: 3rem;
    text-align: center;
    padding-bottom: 1rem;
    padding-right: 1rem;
    padding-left: 1rem;
}
#StudioUpload .upload-section-files-no-item {
    font-size: 1.4rem;
    padding: 1rem .1rem;
    padding-bottom: .5rem;
    padding-top: 0rem;
    color: #999;
}
#StudioUpload .upload-files .upload-section-files-no-item {
    padding: 1rem;
}
#StudioUpload .upload-section-files-items {
    /* flex: 1;*/
    position: relative;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}
/*.list-view-body.no-items .upload-section-files-items {
    display:none;
}*/
#StudioUpload .upload-section-file {
    position: relative;
    padding: 1rem;
    font-size: 1.6rem;
    border: solid 1px rgba(100,100,100,.3);
    margin: 1rem;
    border-radius: 5px;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
}
#StudioUpload .upload-section-file-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    /*justify-content: flex-end;*/
}
#StudioUpload .upload-section-file-field {
    padding: 1rem;
}
#StudioUpload .upload-section-file-select {
    display: none;
}
#StudioUpload .upload-section-file-select input {
    height: 18px;
    width: 18px;
    outline: none;
    position: relative;
    top: 3px;
}
#StudioUpload .upload-section-file-image {
    padding: 0;
    padding-left: 1rem;
    padding-right: 1rem;
    position: relative;
}
#StudioUpload .upload-section-file-image img {
    max-width: 160px;
    max-height: 160px;
}
#StudioUpload .upload-section-file-image video {
    max-width: 160px;
    max-height: 160px;
    min-width: unset;
}
#StudioUpload .upload-section-file-image i {
    font-size: 3rem;
    padding: 0 !important;
}
#StudioUpload .upload-section-file-name {
    flex: 1;
}
#StudioUpload .upload-section-file-type {
}
#StudioUpload .upload-section-file-size {
}
#StudioUpload .upload-section-file-status {
}
#StudioUpload .upload-section-file-percent-container {
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: 2px;
    width: 100%;
    display: flex;
    align-items: center;
}
#StudioUpload .upload-section-file-percent {
    flex: 1;
    height: 2px;
}
#StudioUpload .upload-section-file-percent.commit {
    flex: .2;
}
#StudioUpload .upload-section-file-percent-data {
    height: 2px;
    width: 0%;
    left: 0px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    transition:.3s;
}
#StudioUpload .upload-section-file-percent-upload {
    background-color: dodgerblue;
    border-color: dodgerblue;
}
#StudioUpload .upload-section-file-percent-transcode {
    background-color: goldenrod;
    border-color: goldenrod;
}
#StudioUpload .upload-section-file-percent-commit {
    background-color: purple;
    border-color: purple;
}
#StudioUpload .upload-section-file-percent-container.error .upload-section-file-percent-upload,
#StudioUpload .upload-section-file-percent-container.error .upload-section-file-percent-transcode,
#StudioUpload .upload-section-file-percent-container.error .upload-section-file-percent-commit {
    background-color: firebrick;
    border-color: firebrick;
}
#StudioUpload .upload-section-file-percent-container.success .upload-section-file-percent-upload,
#StudioUpload .upload-section-file-percent-container.success .upload-section-file-percent-transcode,
#StudioUpload .upload-section-file-percent-container.success .upload-section-file-percent-commit {
    background-color: forestgreen;
    border-color: forestgreen;
}
#StudioUpload .modal {
    z-index: 99999;
}

#StudioUpload .upload-section-file-buttons .btn .material-icons {
    font-size: 1.8rem !important;
}

#StudioUpload .upload-section-file-image {
    width: 195px;
    text-align: center;
}
#StudioUpload .upload-section-file-image .thumbnail {
    position: relative;
}
#StudioUpload .upload-section-file-image .thumbnail .preview {
    opacity: .8;
    cursor: pointer;
    transition: .2s;
}
body:not(.mobile-device) #StudioUpload .upload-section-file-image .thumbnail .preview:hover {
    opacity: 1;
}
#StudioUpload .upload-section-file-image .thumbnail .preview:active {
    opacity: .7;
}
#StudioUpload .upload-section-file-image .thumbnail .preview .bkgd {
    position: absolute;
    background-color: #373737;
    opacity: .3;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}
#StudioUpload .upload-section-file-image .thumbnail .preview .ctnr {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
#StudioUpload .upload-section-file-image .thumbnail .preview .ctnr i {
    color: whitesmoke;
    position: relative;
    top: -1px;
    font-size: 2rem;
}
#StudioUpload .upload-section-file-buttons {
    padding-right: 1rem;
    text-align: center;
    display: flex;
}
#StudioUpload .upload-section-file-buttons button {
    margin-left: 0rem;
    margin-right: 0rem;
}

#StudioUpload .upload-section-file-status {
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: .8rem;
    padding: .3rem .5rem;
}
#StudioUpload .upload-section-file.focused {
    border: solid 1px rgba(100,100,100,.7);
}
#StudioUpload .upload-section-file.selected {
    border-color: dodgerblue;
    background: rgba(100,100,100,.3);
}

#StudioUpload .upload-section-file-image > i {
    position: absolute;
    left: 0;
    top: -0.2rem;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#StudioUpload .drop-background {
    /* position: absolute; */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    user-select: none;
    pointer-events: none;
    padding: 2rem 1rem;
    padding-top: 3rem;
    text-align: center;
    /* height: 70%; */
    border: solid 7px rgba(100,100,100,.7);
    border-style: dashed;
    margin: 0 1rem;
    margin-bottom: 1rem;
    height: 100%;
    margin:0;
}
#StudioUpload .drop-background-container {
    display: flex;
    flex-direction: column;
    /* flex: 1; */
    justify-content: center;
    align-items: center;
    opacity: .5;
}
#StudioUpload .drop-background-container i {
    padding-bottom: 1.5rem;
    font-size: 5rem;
}
#StudioUpload .drop-background-container label {
    text-transform: uppercase;
    font-size: 3rem;
}

/******************/


/****#StudioMedia****/

#StudioMedia {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    color:white;
}
#StudioMedia .links-container {
    padding-left: 0.5rem;
    width: 100%;
    border-bottom: solid 1px rgba(100,100,100,.7);
    padding-bottom: 0.3rem;
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
    padding-left: 0.8rem;
}
#StudioMedia .links-warning-label {
    line-height: 1.6;
    text-transform: uppercase;
    font-size: .7rem;
    letter-spacing: 3px;
    padding-bottom: 7px;
    font-size: 1.4rem;
    padding-left: 1rem;
    padding-right: 1rem;
}
#StudioMedia .action-buttons {
    display: flex;
    padding: 0 0.5rem;
    padding: 0 !important;
    margin-bottom: 1rem;
    margin-left: 1rem;
    margin-right: 1rem;
}
#StudioMedia .media-section-files {
    border-top: solid 1px rgba(100,100,100,.3);
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: auto;
    padding: 0rem;
}
#StudioMedia .media-section-files-no-item {
    font-size: 1.4rem;
    padding: 1rem 0.1rem;
    padding-bottom: 0.5rem;
    color: #999;
    padding: 1rem;
    padding: 0.5rem 0;
    padding-top: 0;
}
#StudioMedia #StudioMediaItems {    
    margin: 0rem;
    display: flex;
    flex-direction: column;
    flex:1;
    overflow: auto;
}
#StudioMedia .media-section-files-spinner {
    font-size: 3rem;
    text-align: center;
    padding-bottom: 1rem;
    padding-right: 1rem;
    padding-left: 1rem;
}
#StudioMedia .media-section-files-no-item {
    font-size: 1.4rem;
    padding: 1rem;
    padding-bottom: .5rem;
    color: #999;
}
#StudioMedia .media-files .media-section-files-no-item {
    padding: 1rem;
}
#StudioMedia .media-section-files-items {
    /* flex: 1;*/
    position: relative;
    margin-left: 0rem;
    margin-right: 0rem;
    display: flex;
    flex-wrap: wrap;
}
/*.list-view-body.no-items .media-section-files-items {
    display:none;
}*/
#StudioMedia .media-section-file {
    position: relative;
    padding: 1rem;
    font-size: 1.6rem;
    border: solid 1px rgba(100,100,100,.3);
    margin: 1rem;
    border-radius: 5px;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
}
#StudioMedia .media-section-file-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    /*justify-content: flex-end;*/
}
#StudioMedia .media-section-file-field {
    padding: 1rem;
}
#StudioMedia .media-section-file-select {
    display: none;
}
#StudioMedia .media-section-file-select input {
    height: 18px;
    width: 18px;
    outline: none;
    position: relative;
    top: 3px;
}
#StudioMedia .media-section-file-image {
    padding: 0;
    padding-left: 1rem;
    padding-right: 1rem;
    position: relative;
}
#StudioMedia .media-section-file-image img {
    max-width: 160px;
    max-height: 160px;
}
#StudioMedia .media-section-file-image video {
    max-width: 160px;
    max-height: 160px;
    min-width: unset;
}
#StudioMedia .media-section-file-image i {
    font-size: 3rem;
    padding: 0 !important;
}
#StudioMedia .media-section-file-name {
    flex: 1;
}
#StudioMedia .media-section-file-type {
}
#StudioMedia .media-section-file-size {
}
#StudioMedia .media-section-file-status {
}
#StudioMedia .media-section-file-percent-container {
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: 2px;
    width: 100%;
    display: flex;
    align-items: center;
}
#StudioMedia .media-section-file-percent {
    flex: 1;
    height: 2px;
}
#StudioMedia .media-section-file-percent.commit {
    flex: .2;
}
#StudioMedia .media-section-file-percent-data {
    height: 2px;
    width: 0%;
    left: 0px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    transition:.3s;
}
#StudioMedia .media-section-file-percent-media {
    background-color: dodgerblue;
    border-color: dodgerblue;
}
#StudioMedia .media-section-file-percent-transcode {
    background-color: goldenrod;
    border-color: goldenrod;
}
#StudioMedia .media-section-file-percent-commit {
    background-color: purple;
    border-color: purple;
}
#StudioMedia .media-section-file-percent-container.error .media-section-file-percent-media,
#StudioMedia .media-section-file-percent-container.error .media-section-file-percent-transcode,
#StudioMedia .media-section-file-percent-container.error .media-section-file-percent-commit {
    background-color: firebrick;
    border-color: firebrick;
}
#StudioMedia .media-section-file-percent-container.success .media-section-file-percent-media,
#StudioMedia .media-section-file-percent-container.success .media-section-file-percent-transcode,
#StudioMedia .media-section-file-percent-container.success .media-section-file-percent-commit {
    background-color: forestgreen;
    border-color: forestgreen;
}
#StudioMedia .modal {
    z-index: 99999;
}

#StudioMedia .media-section-file-buttons .btn .material-icons {
    font-size: 1.8rem !important;
}

#StudioMedia .media-section-file-image {
    width: 195px;
    text-align: center;
}
#StudioMedia .media-section-file-image .thumbnail {
    position: relative;
}
#StudioMedia .media-section-file-image .thumbnail .preview {
    opacity: .8;
    cursor: pointer;
    transition: .2s;
}
body:not(.mobile-device) #StudioMedia .media-section-file-image .thumbnail .preview:hover {
    opacity: 1;
}
#StudioMedia .media-section-file-image .thumbnail .preview:active {
    opacity: .7;
}
#StudioMedia .media-section-file-image .thumbnail .preview .bkgd {
    position: absolute;
    background-color: #373737;
    opacity: .3;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}
#StudioMedia .media-section-file-image .thumbnail .preview .ctnr {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
#StudioMedia .media-section-file-image .thumbnail .preview .ctnr i {
    color: whitesmoke;
    position: relative;
    top: -1px;
    font-size: 2rem;
}
#StudioMedia .media-section-file-buttons {
    padding-right: 1rem;
    text-align: center;
    display: flex;
}
#StudioMedia .media-section-file-buttons button {
    margin-left: 0rem;
    margin-right: 0rem;
}

#StudioMedia .media-section-file-status {
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: .8rem;
    padding: .3rem .5rem;
}
#StudioMedia .media-section-file.focused {
    border: solid 1px rgba(100,100,100,.7);
}
#StudioMedia .media-section-file.selected {
    border-color: dodgerblue;
    background: rgba(100,100,100,.3);
}

#StudioMedia .media-section-file-image > i {
    position: absolute;
    left: 0;
    top: -0.2rem;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#StudioMedia .drop-background {
    /* position: absolute; */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    user-select: none;
    pointer-events: none;
    padding: 2rem 1rem;
    padding-top: 3rem;
    text-align: center;
    /* height: 70%; */
    border: solid 7px rgba(100,100,100,.7);
    border-style: dashed;
    margin: 0 1rem;
    margin-bottom: 1rem;
    height: 100%;
    margin:0;
}
#StudioMedia .drop-background-container {
    display: flex;
    flex-direction: column;
    /* flex: 1; */
    justify-content: center;
    align-items: center;
    opacity: .5;
}
#StudioMedia .drop-background-container i {
    padding-bottom: 1.5rem;
    font-size: 5rem;
}
#StudioMedia .drop-background-container label {
    text-transform: uppercase;
    font-size: 3rem;
}


/***LibrarySelectionElement*****/

.vail.fixed-window.library-groups-selected-item-vail {
    z-index: 499;
}

body.mobile-device .library-groups-selected-item-vail {
    background-color: rgba(0, 0, 0, .3);
    z-index: 499;
}

body.tv-device #player .library-groups-selected-item-vail {
    z-index: 601;
}

.library-groups-selected-item {
    display: none;
    position: fixed;
    right: 0;
    width: 40%;
    min-width: 500px;
    max-width: 850px;
    /*width: 555px;*/
    top: 0;
    bottom: 0;
    background-color: #1C1C22;
    /* background: linear-gradient(#12121A, #121216) !important;*/
    background-color: inherit !important;
    -webkit-box-shadow: -1px 1px 3px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: -1px 1px 3px 0px rgba(0,0,0,0.3);
    box-shadow: -1px 1px 3px 0px rgba(0,0,0,0.3);
    /*cursor: default;
    border-radius: 6px;
    border-color: transparent;
    background: inherit;
    color: white;
    position: fixed;
    overflow: hidden;
    top: 2rem;
    width: 850px;
    max-width: 80%;
    height: 97vh;
    max-height: 100% !important;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    z-index: 201 !important;
    overflow: auto;*/
}

    .library-groups-selected-item.fixed-window {
        /*overflow: auto;*/
        top: 2rem;
        max-width: unset;
        width: 50%;
        /*transform: translateX(50%);*/
        right: unset;
        border-radius: 6px;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
        border-color: transparent;
        background: inherit;
        color: white;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 7%), 0 2px 4px rgba(0, 0, 0, 7%), 0 4px 8px rgba(0, 0, 0, 7%), 0 8px 16px rgba(0, 0, 0, 7%), 0 16px 32px rgba(0, 0, 0, 7%), 0 32px 64px rgba(0, 0, 0, 7%);
        /*overflow-x: hidden;
        overflow: hidden;*/ 
        overflow-y: clip;
        z-index:1500;
    }

    .library-groups-selected-item.overflow {
        overflow-y:unset;
    }

@media only screen and (max-width: 500px) {
    .library-groups-selected-item {
        width: 100%;
    }

    .library-group-details .controls {
        padding-bottom: 5px;
    }

        .library-group-details .controls button {
            font-size: .8rem !important;
        }
}

.library-groups-selected-item.show {
    z-index: 500;
    display: block;
}

body.show-layout-menu .library-groups-selected-item.show {
    transform: translateX(1%);
}

.library-group-details {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

    .library-group-details .background {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        pointer-events: none;
        filter: blur(30px);
        transform: scale(1.1);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 0% 0%;
        opacity: .7;
        WIDTH: 100%;
        transition: .3s;
    }

    .library-group-details .image {
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: black;
    }

        .library-group-details .image button {
            font-size: 1.4rem;
            z-index: 100;
            cursor: pointer;
            transition: .3s;
            opacity: .7;
            background-color: transparent;
            border: none;
            outline: none;
            padding: .5rem;
        }

    .library-group-details > .image button.close-button {
        position: absolute;
        right: 1.5rem;
        top: 12px;
        font-size: 1.6rem;
    }

    body:not(.mobile-device) .library-group-details .image .navigation button:hover,
    body:not(.mobile-device) .library-group-details .image .close-button:hover {
        /*transform: scale(1.3);*/
        transform: matrix(1.3, 0, 0, 1.3, 0, 0);
    }

    .library-group-details .image .navigation button:focus,
    .library-group-details .image .close-button:focus {
        /*transform: scale(1.4);*/
        transform: matrix(1.4, 0, 0, 1.4, 0, 0);
    }

    .library-group-details .image .navigation button:active,
    .library-group-details .image .close-button:active {
        /*transform: scale(1.2);*/
        transform: matrix(1.2, 0, 0, 1.2, 0, 0);
        transition: .1s;
    }

body.no-transition .library-group-details .image button {
    transition: none;
    transform: none;
}

.library-group-details > .image .navigation {
    position: absolute;
    left: 25px;
    top: 1rem;
    z-index: 100;
}

    .library-group-details > .image .navigation button {
        margin-right: 20px;
    }

body:not(.mobile-device) .library-group-details .image button:hover {
    opacity: 1;
}

.library-group-details .image button:focus {
    opacity: 1;
 /*   transform:scale(1.4);*/
}

.library-group-details .image button:active {
    opacity: .8;
}

body.tv-device .library-group-details .image button.close-button {
    display: none;
}

.library-group-details > .image {
    min-height: 380px;
    max-height: 35%;
    min-height: 35%;
    transition: .3s;
    margin-bottom: 2rem;
}

body.fullscreen .library-group-details > .image {
    max-height: 40%;
    min-height: 40%;
}
.library-group-details.up-next-selection > .image {
    max-height: 35%;
    min-height: 35%;
}

body.fullscreen .library-group-details.up-next-selection > .image {
    max-height: 40%;
    min-height: 40%;
}

body.no-transition .library-group-details > .image {
    transition: none;
}

.library-group-details > .image iframe#player {
    position: absolute;
}

.library-group-details .image img {
    position: relative;
}

body:not(.mobile-device) .library-group-details .image button:hover {
    opacity: 1;
}

.library-group-details .image button:focus {
    opacity: 1;
}

.library-group-details .image button:active {
    opacity: .8;
}

.library-group-details > .image img {
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
    transition: .3s;
    height:100%;
}
/*body.no-transition .library-group-details > .image img {
    transition: none;
}*/
.library-group-details > .image.no-image img {
    display: none;
}

.library-group-details > .image span {
    font-size: 2.4rem;
    display: none;
    text-align: center;
    padding: 1rem;
}

.library-group-details > .image.no-image span {
    display: block;
}
/*.library-group-details .library-item .image img {
    max-height: 40px;
    min-height: 40px;
}*/
.library-group-details .image.no-image {
    background: linear-gradient(to bottom, #000 0%,#181818 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    background: #181818; /* Old browsers */
    background: linear-gradient(to bottom, #000 0%,#181818 100%);
    background: #0d6efd;
    background: -moz-linear-gradient(top, #0d6efd 0%, #7db9e8 100%);
    background: -webkit-linear-gradient(top, #0d6efd 0%,#7db9e8 100%);
    background: linear-gradient(to bottom, #0d6efd 0%,#7db9e8 100%);
}

.library-group-details .name {
    display: flex;
    flex-direction: column;
    text-align: left;
    /* width: 100%; */
    padding: 1rem 1.5rem;
    padding-bottom: 0rem;
    padding-top: 0rem;
    color: lightgray;
    /* font-weight: bold; */
    font-size: 1.2rem;
    position: relative;
}

    .library-group-details .name label {
        color: white;
        font-size: 1.8rem;
        font-size: 2.2rem;
        margin-left: 0px;
        text-shadow: -1px 1px 2px rgb(0, 0, 0);
        line-height: normal;
    }
.no-shadow .library-group-details .name label {
    text-shadow: none;
}

    .reduce-font-size .library-group-details .name label {
        font-size: 1.8rem;
    }

.library-group-details .name2 {
    display: flex;
    flex-direction: column;
    text-align: left;
    /* width: 100%; */
    padding: 1rem 1.5rem;
    padding-top: 3px;
    padding-bottom: 2px;
    color: lightgray;
    /* font-weight: bold; */
    font-size: 1.2rem;
   /* padding-left: 26px;*/
}

    .library-group-details .name2 label {
        color: whitesmoke;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-shadow: -1px 1px 2px rgb(0, 0, 0);
    }
.no-shadow .library-group-details .name2 label {
    text-shadow: none;
}

.library-group-details .name3 {
    display: flex;
    flex-direction: column;
    text-align: left;
    /* width: 100%; */
    padding: 1rem 1.5rem;
    padding-top: 2px;
    padding-bottom: 2px;
    color: lightgray;
    /* font-weight: bold; */
    font-size: 1rem;
}

    .library-group-details .name3 label {
        color: whitesmoke;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-shadow: -1px 1px 2px rgb(0, 0, 0);
    }
.no-shadow .library-group-details .name3 label {
    text-shadow: none;
}

.library-group-details .name4 {
    font-size: .9rem;
    padding-top: 2px;
    padding-bottom: 2px;
}

    .library-group-details .name4 label {
        color: whitesmoke;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-shadow: -1px 1px 2px rgb(0, 0, 0);
    }
.no-shadow .library-group-details .name4 label {
    text-shadow: none;
}
/*
.single .library-group-details .info {
    padding-top: 5px;
}
*/
/*.single .library-item-data .info {
    display: none;
}*/

.library-group-details .info {
    display: flex;
    text-align: left;
    /* width: 100%; */
    padding: 1rem 1.5rem;
    padding-top: 5px;
    padding-bottom: .3rem;
    color: whitesmoke;
    /* font-weight: bold; */
    font-size: 1.2rem;
    align-items: center;
    /*margin-left: 3px;
    margin-right: 3px;*/
}
    /*.library-groups-selected-item .library-group-details > .info {
    display:none;
}*/
    /*.library-groups-selected-item .library-group-details .item-count {
    display: none;
}*/
    .library-group-details .info .format-item .info {
        color: white;
    }

    .library-group-details .info .seperator {
        width: 1px;
        background-color: lightgray;
        margin: 0px 15px;
        position: relative;
        top: -1px;
        border-radius: 1px;
        /* border: solid 1px; */
        /* transform: scale(.5); */
        top: 1px;
        height: 12px;
    }

.library-group-details .info > div.time > label {
    color: #FFAB15;
}
.library-groups-selected-item.on-now .info .time > label {
    display: none;
    color: #FFAB15;
}

.library-groups-selected-item .info .time label.on-now {
    display: none;
}

.library-groups-selected-item .position {
    display: none;
    position: absolute;
    top: -1px;
    left: 0;
    height: 2px;
    background-color: #FFAB15;
    border-radius: 3px;
}

.library-groups-selected-item.on-now .position {
    display: block;
}

.library-groups-selected-item .info .expires label {
    color: #FFAB15;
}

.library-groups-selected-item.on-now .info .time label.on-now {
    display: block;
    color: #FFAB15;
    font-weight: bold;
    opacity: 1;
}

.library-group-details .info > label {
    text-shadow: -1px 1px 2px rgb(0, 0, 0);
}
.no-shadow .library-group-details .info > label {
    text-shadow: none;
}

.library-group-details .info > div {
    display: flex;
    white-space: nowrap;
    align-items: center;
}
.library-group-details .info > div.online {
    display:none;    
}

.library-group-details > .info > div {
    color: white;
}

.library-group-details .info .info1 {
}

.library-group-details .info .info2 {
}

.library-group-details .info .info3 {
}

.library-group-details .info .info4 {
}

.library-group-details .controls {
    display: flex;
    text-align: left;
    /* width: 100%; */
    padding: 1rem 1.5rem;
    padding-top: 0px;
    padding-bottom: 3px;
    color: lightgray;
    /* font-weight: bold; */
    font-size: 1.3rem;
    /* margin-left: -7px;*/
    /* border-top: solid 1px; */
    /* border-bottom: solid 1px; */
    /* padding-top: 12px; */
    /* padding-bottom: 12px; */
    margin-top: 3px;
    border-color: gray;
    align-items: center;
    flex-wrap: wrap;
    position: absolute;
    bottom: 3.5rem;
    left: 2rem;
    padding: 0;
    right: 2rem;
    flex-direction: column;
    align-items: flex-start;
    z-index: 100;
    pointer-events:none;
}

.library-group-details .controls-ex {
    left:unset;
    right:1.5rem;
}

.library-group-details .controls .buttons {
    display: flex;
    flex: 1;
    width: 100%;
    order: 2;
    margin-right: .8rem;
}


.library-group-details .controls .buttons button {
    border: solid 1px transparent;
    outline: 0;
    margin: 0;
    background-color: transparent;
    color: white;
    font-size: 1rem;
    /* opacity: .7; */
    cursor: pointer;
    /* padding: 0rem .5rem; */
    /* margin-right: 1rem; */
    /* padding-top: .3rem; */
    margin-right: .3rem;
    transition: .3s;
    background-color: #323232;
    /* padding-bottom: .5rem; */
    /* margin-left: 5px; */
    /* margin-right: 5px; */
    color: #FDFEFE;
    padding: .7rem 1.3rem;
    margin-right: .6rem;
    margin-top: 3px;
    margin-bottom: 3px;
    white-space: nowrap;
    cursor: pointer;
    /*opacity: 1;*/
    font-size: 1.4rem;
    background: rgba(100,100,100, .3);
    border-color: rgba(100,100,100, .5);
    border-radius: 5px;
    padding: 10px 30px;
    pointer-events:auto;
}

    .library-group-details .controls .buttons button.hide-label {
        padding: 0;
        background-color: transparent;
        border: none;
        font-size: 2rem;
        margin: .5rem;
    }

    .library-group-details .controls .buttons button.edit-button {
        margin-left: 1.5rem;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        margin-left: 1.25rem !important;
        margin-right: 0.25rem !important;
        margin-bottom: 0;
        margin-top: 0;
    }

    .library-group-details .controls .buttons button.edit-button i {
        font-size:20px;
    }

    .library-group-details .controls .buttons button.delete-button {
        margin-left: 1.5rem;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        margin-left: 0.5rem !important;
        margin-left: 0.5rem !important;
        margin-right: 0.5rem !important;
        margin-bottom: 0;
        margin-top: 0;
    }

    .library-group-details .controls .buttons button.delete-button i {
        font-size: 20px;
    }

    .library-group-details .controls .buttons button.cache-button {
        margin-left: .5rem;
    }
    .library-group-details .controls .buttons button.play-button {
        display: flex;
        align-items: center;
    }
   /* .library-groups-selected-item.single .library-group-details .controls .buttons button.cache-button {
        display:none;
    }*/

    .library-group-details .controls .buttons button.hide-label label {
        display: none;
    }
    body:not(.mobile-device) .library-group-details .controls .buttons button.delete-button:hover,
    body:not(.mobile-device) .library-group-details .controls .buttons button.edit-button:hover,
    body:not(.mobile-device) .library-group-details .controls .buttons button.love-button:hover,
    body:not(.mobile-device) .library-group-details .controls .buttons button.cache-button:hover {
        transform: scale(1.3);
    }
    .library-group-details .controls .buttons button.delete-button:focus,
    .library-group-details .controls .buttons button.edit-button:focus,
    .library-group-details .controls .buttons button.love-button:focus,
    .library-group-details .controls .buttons button.cache-button:focus {
        transform: scale(1.4);
    }
    .library-group-details .controls .buttons button.delete-button:active,
    .library-group-details .controls .buttons button.edit-button:active,
    .library-group-details .controls .buttons button.love-button:active,
    .library-group-details .controls .buttons button.cache-button:active {
        transform: scale(1.2);
    }
.library-group-details .library-seasons .library-season {
    transition:.3s;
}
.library-group-details .library-seasons .library-season > div {
    transition: .3s;
}
body:not(.mobile-device) .library-group-details .library-seasons .library-season:hover {
    border: solid 1px rgba(100,100,100,.3);
}
.library-group-details .library-seasons .library-season:focus {
    border: solid 1px rgba(100,100,100,.3);
}
.library-group-details .library-seasons .library-season:active,
.library-group-details .library-seasons .library-season.selected {
    border: solid 1px rgba(100,100,100,.3);
}
body:not(.mobile-device) .library-group-details .library-seasons .library-season:hover > div {
    transform: scale(1.3);
}
.library-group-details .library-seasons .library-season:focus > div {
    transform: scale(1.4);
}
.library-group-details .library-seasons .library-season:active > div,
.library-group-details .library-seasons .library-season.selected > div {
    transform: scale(1.2);
}
body.no-transition .library-item-details .controls .buttons button {
    transition: none;
    transform: none;
}
body.no-cache .library-group-details .controls button.cache-button {
    display:none;
}
.library-groups-selected-item.fixed-window::-webkit-scrollbar {
    width: 4px !important;
    height: 4px !important;
}

/*.library-item-details .controls button.play-button {
    top: 1px;
    position: relative;
}*/

.library-group-details > .controls > button > i {
    margin-right: 0px;
    position: relative;
    top: 0px;
}

.library-group-details .controls button.temp {
    color: blue;
}

.library-group-details .controls button.perm {
    color: green;
}

body:not(.mobile-device) .library-group-details .controls button:not(.hide-label):hover {
    background-color: rgba(13, 110, 253, .5);
    color: white;
}

.library-group-details .controls button:not(.hide-label):focus {
    background-color: rgba(13, 110, 253, .7);
    color: white;
}

.library-group-details .controls button:not(.hide-label):active {
    background-color: rgba(13, 110, 253, .7);
    color: white;
    opacity: .8;
    transition: .3s;
}

.library-group-details .controls .item-count2 {
    flex: 1;
    text-align: right;
    margin-right: 10px;
}

.library-group-details .description {
    display: flex;
    flex-direction: column;
    text-align: left;
    /* width: 100%; */
    padding: 1rem 2rem;
    padding-bottom: .7rem;
    padding-top: .2rem;
    color: lightgray;
    color: whitesmoke;
    /* font-weight: bold; */
    /* font-size: 0.2rem; */
    margin-left: 1px;
    white-space: normal;
    padding: 0;
    margin: 0;
    line-height: 1.4;
    padding-top: 5px;
    font-size: 1.2rem;
}
.library-group-details .description {
    padding-right: 10px;
    padding-bottom: 10px;
}

.reduce-font-size .library-groups-selected-item.single .library-group-details .description {
    font-size: 1.4rem;
    padding-top: 1rem;
    margin-left: 1.5rem;
    margin-right: 0.5rem;
    background-color: #444;
    background-color: rgba(100,100,100,.7);
    color:white;
    margin-top: 0rem;
    margin-right: 0.25rem;
    padding: .75rem 1rem;
    border-radius: 6px;
    font-size: 1.2rem;
    margin-left: -0.15rem;
    margin-left: 0.9rem !important;
    padding-left: 1rem !important;
    margin-right: 0rem !important;
    line-height: 1.5;
}

.library-item .container .library-item-data {
    padding-top: 0px;
}

    .library-group-details .description label {
        color: lightgray;
        font-size: 1.2rem;
        padding-bottom: 3px;
        padding-top: .5rem;
    }

.library-group-details .library-items-ex .description {
    color: white;
    text-shadow: -1px 1px 2px rgb(0 0 0);
}
.no-shadow .library-group-details .library-items-ex .description {
    text-shadow: none;
}

.library-group-details > .description {
    display: none;
}

.library-group-details .item-count:not(.search-count) {
    display: flex;
    align-items: center;
    text-align: left;
    /* width: 100%; */
    /* padding: 1.5rem 2.5rem; */
    /* padding-bottom: .7rem; */
    /* padding-top: .3rem; */
    color: lightgray;
    /* font-weight: bold; */
    /* font-size: 0.2rem; */
    /* margin-left: 1px; */
    padding: 0;
    margin: 0;
    margin-left: 1.5rem;
    margin-right: 1.5rem;
    border: none;
    border-bottom: solid 1px rgba(100,100,100,.3);
    padding: .5rem .2rem;
}

    .library-group-details .item-count label {
        color: lightgray;
        /* font-size: 1.4rem; */
        /* padding-bottom: 3px; */
        /* border-top: solid 1px; */
        /* border-bottom: solid 1px; */
        /* padding-top: 15px; */
        /* padding-bottom: 15px; */
        /* margin-top: 5px; */
        /* border-color: gray; */
        border: none;
        margin: 0;
        font-size: 1.4rem;
        /* flex: 1;
    color: white;*/
    }

.library-group-details .controls button.play-button label {
    padding-left: .5rem;
}

.library-item-list {
    overflow: auto;
    margin-left: 0rem;
    margin-top: 0;
    padding-top: 0px;
    padding-right: 0rem;
    /*height: 100%;*/
    flex: 1;
    position: relative;
    padding-right: .5rem;
}

body.tv-device .library-item-list {
    overflow: hidden;
}
/*.single .library-item-list .library-item {
    display:none;
}*/
/*.single .library-item-list {
    padding-top: 0;
}*/

    .single .library-item-list .library-item {
        border: none;
    }

    .single .library-item-list .library-item {
        border: none;
    }

.single .library-item-list .library-item > .library-item-details {
    background-color: inherit;
    margin: 0;
    padding: 0;
}

.single .library-item-list .library-item > .library-item-details > .controls {
    display: none;
}
.single .library-item-list .library-item.caching > .library-item-details > .controls,
.single .library-item-list .library-item.cached > .library-item-details > .controls {
    display: flex;
    order:1;
    margin-top:5px !important;
    padding-left:5px !important;
}
.single .library-item-list .library-item > .library-item-details > .controls > button,
.single .library-item-list .library-item > .library-item-details > .controls > .online {
    display:none !important;    
}
.single .library-item.caching .cache-progress .cached-container .cache-button,
.single .library-item.cached .cache-progress .cached-container .cache-button {
    display: flex !important;
}
.can-edit .single .library-item.caching .cache-progress .cached-container .size,
.can-edit .single .library-item.cached .cache-progress .cached-container .size {
    display: flex !important;
    top:-2px !important;
    font-size:1.1rem !important;
}
/*body.can-edit .single .library-item-list .library-item > .library-item-details > .controls {
    display: flex;
    padding-left: 0;
}
.single .library-item-list .library-item > .library-item-details > .controls > button,
.single .library-item-list .library-item > .library-item-details > .controls > .online {
    display: !important;

}*/
.library-item-list .library-item > .library-item-details > .cache-progress {
    display: none;
    margin-left: 29px;
    margin-right: 7px;
    /*margin-top: .2rem;*/
    /*display:flex;*/
    flex-direction: column;
    margin-top: 4px;
}

.single .library-item-list .library-item > .library-item-details > .cache-progress {
    display: flex !important;
    margin-left: -7px;
    margin-right: 17px;
    margin-top: 1rem;
}

.cached .library-item-list .library-item .library-item-details > .cache-progress,
.library-item-list .library-item.caching > .library-item-details > .cache-progress,
.library-item-list .library-item.cached > .library-item-details > .cache-progress,
.library-item-list .library-item.perm-cached > .library-item-details > .cache-progress,
.library-item-list .library-item.temp-cached > .library-item-details > .cache-progress {
    display: flex;
}

.library-item .cache-progress .cached-container button:focus {
    /* transform:scale(1.5);*/
    opacity: 1 !important;
}

.single .library-item .cache-progress .cached-container .cache-button {
    margin-right: .5rem !important;
    margin-left: .5rem !important;
    font-size: 1rem;
    width: 30px;
    height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0rem;
    display: none;
}

.single .library-item .cache-progress .cached-container .pause {
    margin-left: .5rem !important;
    margin-right: .5rem !important;
    font-size: .9rem;
    width: 30px;
    height: 28px;
    justify-content: center;
    align-items: center;
    padding: 0rem;
}
    .single .library-item .cache-progress .cached-container .pause i {
        position: relative;
        top: 0px;
        font-size:1.2rem;
    }


.single .library-item .cache-progress .cached-container .delete {
    margin-left: .5rem !important;
    margin-right: .5rem !important;
    font-size: 1.2rem;
    width: 30px;
    height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0rem;
}

    .single .library-item .cache-progress .cached-container .delete i {
        position: relative;
        top: 0px;
        font-size: 1.4rem;
    }

.library-item .cache-progress .cached-container .size {
    flex: 1;
    font-size: 1rem;
    position: relative;
    top: 0px;
    margin-right: 1.5rem;
    display: none;
}
body.can-edit .library-item .cache-progress .cached-container .size {
    display:block;
}
.single .library-item .cache-progress .cached-container .size {
    /*font-size: 1rem;*/
    color: lightgray;
    display: none !important;
}

.library-item .cache-progress .cache-container {
    flex: 1;
    width: 100%;
}

.single .library-item .cache-progress .cache-container .message {
    font-size: 1rem;
    margin-bottom: 0rem;
    margin-bottom: 1px;
    padding-left: 3px;
}

.library-item .cache-progress .cached-container {
    flex: 1;
    width: 100%;
    flex-flow: row !important;
    justify-content: flex-end;
    align-items: center;
    margin-top: .3rem;
    margin-right: 0px;
}

.single .library-item-list .library-item > .library-item-details > .description {
    display: flex;
    flex-direction: column;
    text-align: left;
    /* width: 100%; */
    padding: 1rem 2rem;
    padding-bottom: 0rem;
    padding-top: .2rem;
    color: whitesmoke;
    /* font-weight: bold; */
    /* font-size: 0.2rem; */
    margin-left: 1px;
    text-align: justify;
    line-height: 1.9rem;
    padding-top: .5rem;
    font-size: 1.3rem;
    padding-left: 24px;
    padding-right: 25px;
}

    .single .library-item-list .library-item > .library-item-details > .description label {
        color: whitesmoke;
        font-size: 1.2rem;
        padding-bottom: 3px;
        padding-top: .5rem;
        text-align: justify;
        line-height: 1.5rem;
    }

.library-seasons {
    margin-left: 1rem;
    display: flex;
    /*flex-direction: row-reverse;*/
    overflow: auto;
}

.library-season {
    padding: .5rem 1rem;
    color: #fff;
    transition: .3s;
    border-bottom: solid 1px transparent;
    border-radius: 6px;
    opacity: 1;
    cursor: default;
    margin-right:5px;
}

body.no-transition .library-season {
    transition: none;
}

.library-season.selected {
    border: solid 1px rgba(100,100,100,.3);
    background-color: rgb(30,30,30);
    opacity: 1;
    cursor: default;
    color: white;
    opacity: 1 !important;
}

.library-season:focus {
    background-color: rgb(40,40,40);
    /*border-color: #444;*/
    color: white;
    opacity: 1 !important;
}

.library-discs {
    margin-left: 1rem;
    display: flex;
    /*flex-direction: row-reverse;*/
    overflow: auto;
}

.library-disc {
    padding: .5rem 1rem;
    color: #fff;
    transition: .3s;
    border-bottom: solid 1px transparent;
    border-radius: 6px;
    opacity: 1;
    cursor: default;
}

body.no-transition .library-disc {
    transition: none;
}

.library-disc.selected {
    border: solid 1px rgba(100,100,100,.3);
    background-color: rgb(30,30,30);
    opacity: 1;
    cursor: default;
    color: white;
    opacity: 1 !important;
}

.library-disc:focus {
    background-color: rgb(40,40,40);
    /*border-color: #444;*/
    color: white;
    opacity: 1 !important;
}

#library-items {
    flex: 1;
}

.library-items {
    display: flex;
    flex-direction: column;
    list-style: none;
    /* height: 100%; */
    padding-top: 0rem;
    /*margin-bottom: 15px;*/
}
.library-group-info-container .library-items {
    width: 100%;
    /*height: 100%;*/
}
.library-group-info-container {
    width: 100%;
    height: 100%;
}


#cache-info .container .library-item {
    margin-bottom: 0;
}

.library-item .info .info1 {
    display: block !important;
    white-space:normal;
}

.library-item .info .info2 {
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    min-height: 80px;
}

.library-item .info .info3 {
    display: block !important;
}

.library-item .info .info4 {
    display: block !important;
}

.library-item .controls button label {
    display: none;
}
/*.library-groups-selected-item.love .library-group-details .controls button.love-button i {
    color: #FF0099;
    background: -webkit-linear-gradient(#f953c6, #b91d73);
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
}
.library-item.love .library-item-details .controls button.love-button {
    color: #FF0099;
    background: -webkit-linear-gradient(#f953c6, #b91d73);
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
}*/
.library-item-details .controls button.ok {
    color: green;
}

.library-item-details .controls button.warning {
    color: goldenrod;
}

.library-item-details .controls button.error {
    color: red;
}
/*.library-item-details .controls button.online-button {
    cursor: default !important;
}*/

.library-group-details .controls button.ok {
    color: green;
}

.library-group-details .controls button.warning {
    color: goldenrod;
}

.library-group-details .controls button.error {
    color: red;
}
/*.library-group-details .controls button.online-button {
    cursor: default !important;
}*/

.library-group-details .info > div.online .online-button {
    /*cursor: default !important;*/
    transition: .3s;
    position: relative;
    top: -1px;
   /* left: -8px;*/
}

    .library-group-details .info > div.online .online-button:focus {
        /*transform: scale(1.4);*/
        /*background-color:cornflowerblue;*/
        opacity: 1;
        color: white;
    }

    body:not(.mobile-device) .library-group-details .info > div.online .online-button:hover {
        transform: scale(1.3);
    }

    .library-group-details .info > div.online .online-button:focus {
        transform: scale(1.4);
    }

    .library-group-details .info > div.online .online-button:active {
        transform: scale(1.2);
    }

    .library-group-details .info > div.online .online-button.hide {
        opacity: 0 !important;
        transition: none;
        display: none;
    }

    .library-group-details .info > div.online .online-button.ok {
        color: green !important;
    }

    .library-group-details .info > div.online .online-button.warning {
        color: goldenrod !important;
    }

    .library-group-details .info > div.online .online-button.error {
        color: red !important;
    }

body.no-transition .library-group-details .info > div.online .online-button {
    transition: none;
    transform: none;
}

.library-group-details .info > div.online .online-loader .loader {
    font-size: 3px;
    margin: 0;
}

.library-item-details .controls .online-loader .loader {
    font-size: 3px;
    margin: 0;
    margin-left: .5rem;
    margin-right: .5rem;
}

    .library-item-details .controls .online-loader .loader:after {
        background: black;
    }

/*.library-item.perm-cached .library-item-details .controls button.cache-button i {
    color: green;
}
.library-item.temp-cached .library-item-details .controls button.cache-button i {
    color: #0d6efd;
}

.library-item.perm-cached .library-item-details .controls button.uncache-button {
    display:block;
}
.library-item.perm-cached .library-item-details .controls button.uncache-button i {
    color: green;
}
.library-item .library-item-details .controls button.uncache-button {
    display:none;
}
.library-item.temp-cached .library-item-details .controls button.uncache-button {
    display:block;
}
.library-item.temp-cached .library-item-details .controls button.uncache-button i {
    color: #0d6efd;
}*/
.library-item .library-item-details .controls .cache-button i {
    color: white;
    top: 0px;
    left: 0px;
    font-size: 1.2rem;
    position: relative;
}

.library-item .library-item-details .cache-progress .cached-container {
    margin-top: 0 !important;
}


.library-item.temp-cached .library-item-details .controls .cache-button i {
    color: dodgerblue;
}

.library-item.caching.temp-cached .library-item-details .controls .cache-button i {
    color: dodgerblue;
}
/*
.library-item.temp-cached .library-item-details .controls .cache-button {
    opacity: 1;
}
.library-item.perm-cached .library-item-details .controls .cache-button {
    opacity: 1;
}*/
.library-item.perm-cached .library-item-details .controls .cache-button i {
    color: green;
}

.library-item.caching.perm-cached .library-item-details .controls .cache-button i {
    color: limegreen;
}

.wizard-page .library-item.selected .description {
    color: white !important;
    text-shadow: -1px 1px 2px rgb(0 0 0) !important;
}
.wizard-page .library-item.selected > button {
    background-color: #0d6efd !important;
}
.wizard-page .library-item.selected .library-item-details {
    background-color: #0d6efd !important;
}


.library-group-details .info > div.previewPath .previewPath-button {
    /*cursor: default !important;*/
    transition: .3s;
    position: relative;
}

    .library-group-details .info > div.previewPath .previewPath-button:focus {
        /*transform: scale(1.4);*/
        /*background-color:cornflowerblue;*/
        opacity: 1;
        color: white;
    }

    body:not(.mobile-device) .library-group-details .info > div.previewPath .previewPath-button:hover {
        transform: scale(1.3);
    }

    .library-group-details .info > div.previewPath .previewPath-button:focus {
        transform: scale(1.4);
    }

    .library-group-details .info > div.previewPath .previewPath-button:active {
        transform: scale(1.2);
    }

    .library-group-details .info > div.previewPath .previewPath-button.hide {
        opacity: 0 !important;
        transition: none;
    }

body.no-transition .library-group-details .info > div.previewPath .previewPath-button {
    transition: none;
    transform: none;
}



.library-item > button {
    padding: 0;
    margin: 0;
    border: 0;
    outline: 0;
    background-color: transparent;
    margin: 10px;
    margin-bottom: 3px;
    margin-left: 15px;
    margin-top: 7px;
    /*margin-right: 15px;*/
    cursor: pointer;
    flex: 1;
    padding-left: 10px;
    margin-right: 0;
    margin-left: 0rem;
    padding-right: 10px;
    padding-bottom: 0px;
    padding-top: 15px;
    margin-bottom: 0;
    margin-top: 0;
    color: white;
    cursor: default;
    opacity: 1;
    transition: none;
    width: 100%;
}

    .library-item > button > .container {
        display: flex;
        width: 100%;
        padding-top: 0rem;
        padding-bottom: 1.5rem;
        align-items: flex-start;
        padding-top: 0px;
        padding-bottom:.5rem;
    }
.single .library-item > button > .container {
    padding: 0;
    padding-top: 0rem;
    font-size: 1.4rem;
}
/*.library-item.caching > button,*/
.library-item.selected > button {
}

.library-item.selected > button {
    /* background-color: black;*/
    background-color: #333;
    border-top-right-radius:6px;
    border-top-left-radius:6px;
}

.single .library-item > button {
    border-radius: unset !important;
    padding: 0 !important;
}

.single .library-item.selected > button {
    background-color: inherit !important;
    border-radius: unset;
    padding: 0;
}

body:not(.mobile-device) .library-item > button:hover .info {
    transition: all .3s;
}

body:not(.mobile-device).no-transition .library-item > button:hover .info {
    transition: none;
}
/*.library-item.caching > button .info,*/
.library-item.selected > button .info {
    color: white;
}

body:not(.mobile-device) .library-item > button:hover .info {
    color: white;
}

.library-item > button:focus .info {
    color: white;
}

.library-item.now-playing > button .info {
    color: #FFAB15;
}
.library-item.now-playing > button .index {
    color: #FFAB15;
}

.library-item > button .image {
    /* display: none;*/
    /* flex-direction: column; */
    /* position: relative; */
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
/*.up-next-selection .library-item > button .image {
    display:none;
}*/
/*.library-item.album > button .image {
    width: 280px;
    height: 280px;
}
.library-item > button img {
    max-width: 280px;
    max-height: 210px;
}
.library-item.album > button img {
    max-width: 280px;
    max-height: 280px;
}
*/
.library-item > button .index {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 1rem 2.5rem;
    font-size: 1.6rem;
    width: 50px;
    min-width: 50px;
    padding-right: 1rem;
    padding-left: 1rem;
    text-shadow: -1px 1px 2px rgb(0, 0, 0);
    color: whitesmoke;
}
.no-shadow .library-item > button .index {
    text-shadow: none;
}

.single .library-item > button .index {
    display:none;
}
.library-item.has-time > button .index {
    flex-direction: column;
    align-items: end;
    padding-right: 0.9rem;
    padding-top: 0.5rem;
    font-size: .9rem;
    color: #FFAB15;
}
.library-item > button .start-time-on-now {
    display: none;
}
/*.library-item.on-now > button .start-time-on-now {
    display: block;
}
.library-item.on-now > button .start-time,
.library-item.on-now > button .start-time-ex {
    display: none !important;
}*/
.library-item > button .start-time {
    position:relative;
    left: -3px;
}

.library-item > button .image {
    width: 150px;
    max-width: 150px;
    min-width: 150px;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    min-height: 80px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 7%), 0 2px 4px rgba(0, 0, 0, 7%), 0 4px 8px rgba(0, 0, 0, 7%), 0 8px 16px rgba(0, 0, 0, 7%), 0 16px 32px rgba(0, 0, 0, 7%), 0 32px 64px rgba(0, 0, 0, 7%);
    border: solid 1px rgba(100,100,100,.3);
    border-radius: 6px;
    margin-top: 5px;
}

.single .library-item > button .container > .image,
.single .library-item > button .container > .image-container {
    display: none;
}

.library-item > button .container > .image-container > .library-item-control-container {
    padding: .5rem;
    padding-top: 1rem;
    display: flex;
    opacity: .8;
    align-items: center;
    justify-content: center;
}
.library-item > button .container > .image-container > .library-item-control-container button {
    margin-right: .75rem;
    margin-left: .75rem;
}
.library-item > button .container > .image-container > .library-item-control-container i {
    font-size: 1rem;
}


.library-item > button .image img {
    object-fit: contain;
    width: 100%;
    height: 100%;
    z-index: 3;
    transition: .3s;
}

.library-item > button .image .library-item-icon-container {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    transition: .3s;
    opacity: .5;
    text-shadow: -1px 1px 2px rgb(0, 0, 0);
    z-index: 10;
    color: white;
    cursor: pointer;
}
.no-shadow .library-item > button .image .library-item-icon-container {
    text-shadow: none;
}
    body:not(.mobile-device) .library-item > button .image .library-item-icon-container:hover,
    .library-item > button .image .library-item-icon-container:focus {
        opacity: .7;
    }
.library-item > button .image .library-item-icon-container:active {
    opacity:1;
}

body:not(.mobile-device) .library-item > button:hover .library-item-icon-container {
    opacity: .5;
}

.library-item > button:active .library-item-icon-container {
    opacity: .5;
    transition-duration: 0;
}
.library-item > button .library-item-icon-container.show {
    opacity: .7;
}

.library-item > button:active .library-item-icon-container.show {
    opacity: .5;
    transition-duration: 0;
}
.library-item.now-playing > button .library-item-icon-container {
    opacity: .5;
}
body:not(.mobile-device) .library-item.now-playing > button:hover .library-item-icon-container {
    opacity: .7;
}

body:not(.mobile-device) .library-item > button:hover .image {
}

.library-item > button:active .image {
    opacity: 1;
    transition-duration: 0;
}

.library-item > button .add-icon-button {
    opacity: .7;
    transition: .3s;
}

body:not(.mobile-device) .library-item > button:hover .add-icon-button {
    opacity: 1;
}

.library-item > button:active .add-icon-button {
    opacity: .8;
    transition-duration: 0;
}

.library-item > button .icons {
    display: flex;
    position: absolute;
    top: 0;
    right: 1rem;
}

    .library-item > button .icons button {
        padding: .5rem;
    }

    .library-item > button .icons i {
        font-size: 20px !important;
    }

    .library-item > button .icons .edit-icon-button {
        color: cornflowerblue;
    }

    .library-item > button .icons .delete-icon-button {
        color: red;
    }

.library-item > button .icons {
    display: none;
    position: absolute;
    top: -1.5rem;
    right: 0rem;
}

body.edit-layout .library-item > button .icons {
    display: flex;
}


.library-item-data {
    padding-left: 1rem;
    padding-top: 1rem;
    width: 100%;
}

.single .library-item-data {
    padding: 0 !important;
}

.library-item-icon-container {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    transition: .3s;
    opacity: 0;
    text-shadow: -1px 1px 2px rgb(0, 0, 0);
}
.no-shadow .library-item-icon-container {
    text-shadow: none;
}

.library-item .info {
    font-size: 1.2rem;
    text-align: left;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 5px;
    padding-right: 5px;
    align-items: self-start;
}
    /*.playback .library-item .info {
    color: white;
}*/
    .library-item .info .info0 {
        display: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 2rem;
        text-align: right;
        justify-content: flex-end;
        margin-right: .5rem;
    }

.library-item.has-time .info .info0 {
    width: 5.5rem;
}

.library-item .info .info1 {
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    font-size: 1.4rem;
    padding: 0.5rem 0rem;
    flex: 1;
    padding-top: 0;
    text-shadow: -1px 1px 2px rgb(0, 0, 0);
    padding-bottom: 0px;
}
.no-shadow .library-item .info .info1 {
    text-shadow: none;
}

    .library-item .info .info1.spacer {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;
        margin-left: 1rem;
    }

.library-item .info .info2 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: .5rem;
    padding-right: .5rem;
    font-size: 1.1rem;
    position: relative;
    top: 5px;
}

.library-item .info .info3 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: none;
}

.library-item .info .info4 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: none;
}

.library-item-data .info {
    padding-left: 0px !important;
}

.library-items-selected-item {
    position: absolute;
    right: 0;
    width: 40%;
    top: 0;
    bottom: 0;
    background-color: #1C1C22;
    /* background: linear-gradient(#12121A, #121216) !important;*/
    background-color: inherit !important;
    -webkit-box-shadow: -1px 1px 5px 0px rgba(0,0,0,0.68);
    -moz-box-shadow: -1px 1px 5px 0px rgba(0,0,0,0.68);
    box-shadow: -1px 1px 5px 0px rgba(0,0,0,0.68);
}

.library-item-details {
    display: none;
    display: flex;
    flex-direction: column;
    margin-right: 0;
    margin-left: 0;
    padding-left: 37px;
    margin-right: 0;
    margin-left: 0rem;
    padding-right: 1rem;
    margin-bottom: .5rem;
    width: 100%;
    padding-bottom: .5rem;
    padding-top: 0rem;
    transition: none;
}
/*.library-item.caching .library-item-details,*/
.library-item.selected .library-item-details {
}

.library-item-details .controls .edit-button i {
    font-size: 16px;
    position: relative;
    top: 1px;
}

.library-item-details .controls .delete-button i {
    font-size: 18px;
    position: relative;
    top: 1px;
}

.library-item.selected .library-item-details {
    /* background-color: black;*/
    background-color: #333;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
}

.library-item-details .image {
    text-align: center;
    position: relative;
    overflow: hidden;
}

.library-item-details .background {
    position: absolute;
    top: -101px;
    left: -216px;
    z-index: 0;
    right: -20px;
    height: 200%;
    -webkit-filter: blur(15px);
    filter: blur(30px);
    /*transform: scale(1.1);*/
    transform: matrix(1.1, 0, 0, 1.1, 0, 0);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0% 0%;
    opacity: .5;
}

.library-item-details .image img {
    min-height: 340px;
    max-height: 340px;
    position: relative;
}

.library-item-details .name {
    display: flex;
    flex-direction: column;
    text-align: left;
    /* width: 100%; */
    padding: 1rem 2rem;
    padding-bottom: 0rem;
    color: lightgray;
    /* font-weight: bold; */
    font-size: 1.2rem;
}

    .library-item-details .name label {
        color: white;
        font-size: 2rem;
        padding-bottom: 3px;
        /*margin-left:-3px;*/
        white-space: nowrap;
    }

.library-item-details .name2 {
    display: flex;
    flex-direction: column;
    text-align: left;
    /* width: 100%; */
    padding: 1rem 2rem;
    padding-top: 2px;
    padding-bottom: .2rem;
    color: lightgray;
    /* font-weight: bold; */
    font-size: 1.2rem;
}

    .library-item-details .name2 label {
        color: white;
        white-space: nowrap;
    }

.library-item-details .info {
    display: flex;
    text-align: left;
    /* width: 100%; */
    padding: 1rem 2rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    color: lightgray;
    /* font-weight: bold; */
    font-size: 1.3rem;
    margin-left: 3px;
}

    .library-item-details .info .seperator {
        width: 2px;
        background-color: lightgray;
        margin: 5px 10px;
        position: relative;
        top: -2px;
        border-radius: 10px;
        border: solid 5px;
        transform: scale(.5);
        top: 1px;
    }

    .library-item-details .info > div {
        padding-bottom: 3px;
        display: flex;
        white-space: nowrap;
    }

    .library-item-details .info .info1 {
    }

    .library-item-details .info .info2 {
    }

    .library-item-details .info .info3 {
    }

    .library-item-details .info .info4 {
    }

.library-item-details .controls {
    display: flex;
    /* margin-left: 2rem; */
    /* justify-content: flex-end; */
    margin-right: .5rem;
    margin-top: 10px;
    margin-bottom: 0;
    padding-bottom: 0;
    margin-left: 0rem;
    padding-right: 0;
    padding-left: 30px;
    margin-right: 0rem;
    position: inherit;
    flex-direction: row;
    align-items: center;
}

.library-item-details > .controls > button:not(.app-button) {
    border: solid 1px transparent;
    outline: 0;
    margin: 0;
    background-color: transparent !important;
    color: white;
    font-size: 1.2rem;
    /* opacity: .7; */
    cursor: pointer;
    /* padding: 0rem .5rem; */
    /* margin-right: 1rem; */
    /* padding-top: .3rem; */
    margin-right: .3rem;
    transition: .3s;
    /*background-color: #323232;*/
    /* padding-bottom: .5rem; */
    /* margin-left: 5px; */
    /* margin-right: 5px; */
    /*  color: #FDFEFE;*/
    padding: .5rem .7rem;
    margin-right: .6rem;
    margin-top: 0px;
    margin-bottom: 0px;
    white-space: nowrap;
    cursor: pointer;
}

    .library-item-details > .controls > button:not(.app-button) > span {
        margin-left: 3px;
    }

    .library-item-details > .controls > button:not(.app-button) {
        margin-right: .5rem;
    }

.library-item-details > .controls > button.refresh-button {
    font-size: 1rem;
}

.library-item-details > .controls > .online {
    display:none;
}

body.no-transition .library-item-details .controls button {
    transition: none;
}
/*.library-item-details .controls button i {
    margin-right:5px;
}
body:not(.mobile-device) .library-item-details .controls button:hover {
  opacity:1; 
}
.library-item-details .controls button:focus {
    opacity: 1;
}
.library-item-details .controls button:active {
    opacity:.8; 
}*/

body:not(.mobile-device) .library-item-details .controls button:not(.app-button):hover {
    transform: scale(1.3)
}

.library-item-details .controls button:not(.app-button):focus {
    transform: scale(1.4)
}

.library-item-details .controls button:not(.app-button):active {
    transform: scale(.9)
}

.library-item-details .controls .item-count2 {
    flex: 1;
    text-align: right;
    margin-right: 10px;
}

.library-item-details .description {
    padding: .5rem 1.5rem;
    padding-bottom: 0;
    padding-right: 1rem;
    text-align: justify;
    /* padding-bottom: .2rem; */
    padding-top: 10px;
    line-height: 1.4rem;
    font-size: 1rem;
    padding-bottom: 0px;
}

.single .library-item-details .description {
    padding: 0rem 2rem;
}

.library-item-details .description label {
    color: lightgray;
    font-size: 1.1rem;
    padding-bottom: .5rem;
    padding-top: 0;
    white-space: normal;
}

.single .library-item-details .description label {
    padding-bottom: 3px;
    padding-top: .5rem;
}

.library-item-details .item-count {
    display: flex;
    flex-direction: column;
    text-align: left;
    /* width: 100%; */
    padding: 1.5rem 2.5rem;
    padding-bottom: .7rem;
    padding-top: .3rem;
    color: lightgray;
    /* font-weight: bold; */
    /* font-size: 0.2rem; */
    margin-left: 1px;
}

    .library-item-details .item-count label {
        color: lightgray;
        font-size: 1.4rem;
        padding-bottom: 3px;
        border-top: solid 1px;
        border-bottom: solid 1px;
        padding-top: 15px;
        padding-bottom: 15px;
        margin-top: 5px;
        border-color: gray;
    }



.library-item .cache-state,
.library-item .cache-progress {
    display: none;
    align-items: center;
    justify-content: flex-end;
    /* justify-content: flex-end; */
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    margin-bottom: 0;
   /* display: flex;*/
    align-items: center;
    justify-content: flex-end;
}

.library-item .cache-state {
}

.library-item .cache-progress {
    /*margin-left: 2.5rem;
    margin-right: 2rem;
     padding-top: .5rem; */
    flex: 1;
    text-align: end;
    margin-left: 0;
    margin-right: 0;
}

/*.library-item.caching .cache-state,
.library-item.caching .cache-progress {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}*/

/*.library-item.temp-cached .cache-state {
    display: flex;
    align-items: center;
    justify-content:flex-end;
}
.library-item.perm-cached .cache-state {
    display: flex;
    align-items: center;
    justify-content:flex-end;
}*/

#cache-info .container .library-item.cached {
    margin-top: 0;
}

#cache-info .container .library-item {
    margin-bottom: -3px !important;
    margin-top: .2rem;
}

.library-item .cache-state .cache-container,
.library-item .cache-progress .cache-container,
.library-item > .cache-container {
    display: none;
    flex-direction: column;
    text-align: left;
    position: relative;
    top: 0;
    padding-right: 0px;
    flex: 1;
    left: 7px;
}

.library-item .cache-progress .cache-container {
    margin-top: 0rem;
    margin-bottom: .1rem;
}

.library-item.caching .cache-state .cache-container,
.library-item.caching .cache-progress .cache-container,
.library-item.caching > .cache-container {
    display: flex;
}
.library-group.uploading .library-item .cache-state .cache-container,
.library-group.uploading .library-item .cache-progress .cache-container,
.library-group.uploading .library-item > .cache-container {
    display: flex;
}
.library-group.transcode-item .library-item .cache-state .cache-container,
.library-group.transcode-item .library-item .cache-progress .cache-container,
.library-group.transcode-item .library-item > .cache-container {
    display: flex;
}

.library-item > .cache-container {
    margin-top: 6px;
    margin-bottom: 4px;
    margin-right: 9px;
}

#cache-info .library-item > .cache-container {
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 0;
    width: 100%;
    left: 0;
}
#cache-info .container .library-item {
    margin-top: 0;
    margin-left: 0;
    padding-left: 0;
    border: none;
    PADDING-BOTTOM: 0;
    MARGIN-BOTTOM: 0;
}
    .library-item .cache-state .cache-container .message,
    .library-item .cache-progress .cache-container .message,
    .library-item > .cache-container .message {
        font-size: .8rem;
        color: black;
        padding-bottom: 6px;
        padding-top: 3px;
        color: lightgray;
    }
.library-item > .cache-container .message {
    padding-left: 4px;
}
.library-item .cache-state .cache-container .progress,
.library-item .cache-progress .cache-container .progress,
.library-item > .cache-container .progress {
    height: 6px;
    width: 100%;
    border: solid 1px rgba(100,100,100,.5);
    display: flex;
    opacity: 1;
    border-radius: 6px;
    overflow: hidden;
}

        .library-item .cache-state .cache-container .progress .percent,
        .library-item .cache-progress .cache-container .progress .percent,
        .library-item > .cache-container .progress .percent {
            background-color: dodgerblue;
            width: 3%;
            height: 6px;
        }

#cache-info .library-item .cache-state {
    width: 100%;
}
.library-item .pause {
    margin: 0;
    padding: .3rem;
    border: 0;
    outline: 0;
    background-color: transparent;
    opacity: .7;
    color: white;
    cursor: pointer;
    transition: .3s;
    font-size: 1rem;
    display: none;
    margin-right: 0.6rem !important;
    margin-left: 0.3rem;
}

body.no-transition .library-item .pause {
    transition: none;
}

.library-item.caching .pause {
    display: flex;
}

    .library-item.caching .pause.paused {
        color: #0066DD;
    }

body:not(.mobile-device) .library-item .pause:hover {
    opacity: 1;
}

.library-item .pause:focus {
    opacity: 1;
}

.library-item .pause:active {
    opacity: .8;
}



.library-item-details .controls button.delete {
    font-size: 1.3rem;
    margin-left: .3rem;
    margin-right: .3rem;
    color: red;
    position: relative;
    top: 0px;
    margin-left: 1rem !important;
    margin-right: 1rem !important;
    /* position:relative;
    top:2px;*/
}
/*.library-item-details .controls button.love-button {
    font-size: 1.2rem;
    margin-left: 3px;
    margin-right: 1px;
}*/
.library-item-details .controls button.online-button {
    font-size: .9rem;
    margin-right: 7px;
    /* margin-left: 7px; */
    padding: 9px 9px;
    padding: 0.5rem 0.7rem;
    margin-right: 0.6rem;
    margin-top: 5px;
    margin-bottom: 5px;
    background-color:transparent !important;
}

.library-item-details .controls .cache-state .cached-container button.pause {
    position: relative;
    top: 1px;
}
.library-item-details .controls .cache-state .cached-container button.delete {
    position: relative;
    top: 1px;
}

.library-item .cache-state .cached-container {
    display: flex;
    align-items: center;
    margin-left: .5rem;
    margin-right: .2rem;
   /* margin-top: .3rem;
    position: relative;
    top: 1px;*/
}

#cache-screen .library-item .cache-state .cached-container {
    margin-top: 0px;
}

#cache-screen .library-item.cached .cache-state .cached-container {
    top: 0;
    margin-top: 1px;
    margin-right: 0;
}

.library-item .cache-progress .cached-container {
    flex-flow: column;
    display: flex;
    position: relative;
    top: 6px;
}

    .library-item .cache-state .cached-container .cache-button,
    .library-item .cache-progress .cached-container .cache-button {
        margin: 0;
        padding: .3rem;
        border: 0;
        outline: 0;
        cursor: pointer;
        transition: .3s;
        font-size: 1rem;
        margin-right: 0rem;
        margin-left: 0rem;
        opacity: .7;
        transition: .3s;
        padding: 11px 11px;
        position: relative;
        margin-right: 5px;
    }

#cache-screen .library-item .cache-state .cached-container .cache-button i,
#cache-screen .library-item .cache-progress .cached-container .cache-button i {
    position: relative;
    top: 0px;
}

body:not(.mobile-device) .library-item .cache-state .cached-container .cache-button:hover,
body:not(.mobile-device) .library-item .cache-progress .cached-container .cache-button:hover {
    transform: scale(1.3)
}

.library-item .cache-state .cached-container .cache-button:focus,
.library-item .cache-progress .cached-container .cache-button:focus {
    transform: scale(1.4)
}

.library-item .cache-state .cached-container .cache-button:active,
.library-item .cache-progress .cached-container .cache-button:active {
    transform: scale(1.2)
}

body.no-transition .library-item .cache-state .cached-container .cache-button,
body.no-transition .library-item .cache-progress .cached-container .cache-button {
    transition: none;
    transform: none;
}

body:not(.mobile-device) .library-item .cache-state .cached-container .cache-button:hover,
body:not(.mobile-device) .library-item .cache-progress .cached-container .cache-button:hover {
    opacity: 1;
}

.library-item .cache-state .cached-container .cache-button:focus,
.library-item .cache-progress .cached-container .cache-button:focus {
    opacity: 1;
}

.library-item .cache-state .cached-container .cache-button:active,
.library-item .cache-progress .cached-container .cache-button:active {
    opacity: .8;
}
/*.library-item .cache-progress .cached-container .cache-button {
    display:none;
}*/
.library-item .cache-state .cached-container .cache-button i,
.library-item .cache-progress .cached-container .cache-button i {
    color: white;
}

.library-item.temp-cached .cache-state .cached-container .cache-button i,
.library-item.temp-cached .cache-progress .cached-container .cache-button i {
    color: dodgerblue;
    opacity: 1 !important;
}

.library-item.caching.temp-cached .cache-state .cached-container .cache-button i,
.library-item.caching.temp-cached .cache-progress .cached-container .cache-button i {
    color: dodgerblue;
    opacity: 1 !important;
}

.library-item.perm-cached .cache-state .cached-container .cache-button i,
.library-item.perm-cached .cache-progress .cached-container .cache-button i {
    color: green;
    opacity: 1 !important;
}

.library-item.caching.perm-cached .cache-state .cached-container .cache-button i,
.library-item.caching.perm-cached .cache-progress .cached-container .cache-button i {
    color: limegreen;
    opacity: 1 !important;
}

.library-item-details .cache-progress {
    position: relative;
    top: -7px;
}

/******************/

.loading-items-ex .table-loader-bkgd {
    display:none !important;
}
.loading-items-ex .table-loader {
    display: none !important;
}
.library-group-details .info > div.online .online-button {
    /* cursor: default !important; */
    transition: .3s;
    position: relative;
    /*top: -1px;
    left: -14px;*/
}
.list-view-group-item-options .has-preview {
    padding-left: 3px;
}
.list-view-group-item-options .has-preview i {
    position: relative;
    top: 0px;
    font-size: large;
    line-height:normal;
}
.library-group-details .info > div.preview .preview-button {
    /* cursor: default !important; */
    transition: .3s;
    position: relative;
    top: -1px;
   /* left: -14px;*/
   color:red;   
}
.library-group-details .info .preview .seperator {
    top: 0px;
}
/*.library-group-details .info > div.preview {
    position: relative;
    top: 0px;
    left: -26px;
}*/
body:not(.can-edit) .library-group-details .controls .buttons button.edit-button,
body:not(.can-edit) .library-group-details .controls .buttons button.delete-button,
body:not(.can-edit) .library-group-details .controls .buttons button.remove-button,
body:not(.can-edit) .library-group-details .info > div.online {
    display: none !important;
}

.library-group-details .info > div .preview-button i {
    position: relative;
    top: 1px;
}
body:not(.can-edit) .library-item-details .controls > button.edit-button,
body:not(.can-edit) .library-item-details .controls > button.delete-button,
body:not(.can-edit) .library-item-details .controls > button.refresh-button,
body:not(.can-edit) .library-item-details .controls > div.online {
    display: none !important;
}

.library-item-networks-info {
    align-items: center;
    padding-left: 1.5rem;
    /*padding-top: 0.8rem;*/
    padding-right: 1.5rem;
    display: flex;
    /*padding-bottom: .75rem;*/
    padding-top: 0.5rem;
    padding-bottom: .5rem;
}
body.hide-selection-networks .library-groups-selected-item .library-item-networks-info {
    display: none;
}
/*.artrela-ui-template.artrela-ui-font-sm {
    padding-bottom: 0rem;
}*/
/*body.allow-sharing .library-item-networks-info {
    display: flex;
}*/
.library-item-networks {
    display: flex;
    align-items: center;
    padding-left: 0.25rem;
    position: relative;
    top: 0px;
    padding-top: .25rem;
    padding-bottom: .5rem;
    margin-right: 1rem;
    overflow:hidden;
}
.library-item-network {
    display: flex;
    align-items: center;
    margin: 0rem;
    margin-left: 0;
    margin-right: 1.5rem;
    padding: 0;
    border: none;
    outline: none;
    /*position: relative;
    left: 0.15rem;
    top: -0.25rem;*/
}
.library-item-network-image {
    max-width: 32px;
    max-height: 32px;
    border-radius: 100px;
    min-width: 32px;
    min-height: 32px;
    object-fit: cover;
}
.library-item-network-label {
    margin-left: 0.5rem;
    font-size: 1rem;
    color: white;
    margin-left: 0.5rem;
    font-size: 1rem;
    color: white;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.library-item-tags {
    display: none;
    align-items: center;
    padding-left: 1.5rem;
    padding-bottom: 0.5rem;
    display: flex;
}
.library-item-tag, .library-item-share-button {
    border: solid 1px transparent;
    outline: 0;
    margin: 0;
    background-color: transparent;
    color: white;
    font-size: 1rem;
    /* opacity: .7; */
    cursor: pointer;
    /* padding: 0rem .5rem; */
    /* margin-right: 1rem; */
    /* padding-top: .3rem; */
    margin-right: .3rem;
    transition: .3s;
    background-color: #323232;
    /* padding-bottom: .5rem; */
    /* margin-left: 5px; */
    /* margin-right: 5px; */
    color: #FDFEFE;
    white-space: nowrap;
    cursor: pointer;
    /*opacity: 1;*/
    background: rgba(100,100,100, .3);
    border-color: rgba(100,100,100, .5);
    border-radius: 5px;
    padding: 0.5rem 1rem;
    font-size: .9rem;
}
.library-item-share-button {
    display:none;
}
body:not(.mobile-device) .library-item-tag:hover,
body:not(.mobile-device) .library-item-share-button:hover {
    background-color: #0d6efd;
    color: white;
}
.library-item-tag:focus,
.library-item-share-button:focus {
    background-color: #0d6efd;
    color: white;
}
.library-item-tag:active ,
.library-item-share-button:active {
    background-color: #0d6efd;
    color: white;
    opacity: .8;
    transition: .3s;
}

.library-item-share-button {
    padding: 0.5rem 1rem;
    margin: 0;
    height: fit-content;
    margin-top: .0rem;
    margin-bottom: 0rem;
    margin-right: .75rem;
}
.library-item-share-button i {

}
.library-item-share-button label {

}
.library-item-related-media {
    display: flex;
    padding-top: 2.5rem;
}
.library-item-related-media-label {

}
.library-item-related-media-items {

}
.library-item-related-mediaItem {

}
.app-form-body .slide-container .filters-container .card-description-container {
    margin-bottom: 0.5rem;
}
.list-view-loading-items .loading-items-background {
    background-color: rgba(0, 0, 0, .5);
}
.library-item-list .library-items-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-top:.5rem;
}
body.hide-selection-networks .library-groups-selected-item .library-item-list .library-items-container {
    padding-top: 0.8rem;
}
.related-container {
    padding: 0 0.5rem;
    padding-top: .75rem;
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.related-container .LoaderElement {
    position: relative;
    height: 100%;
}
.related-container .LoaderElement .dms-on-demand-loader {
    background-color:unset;
}
.related-container-no-items {
    padding: .5rem 1rem;
    color: gray;
}
.related-container-label {
    padding: 0 1rem;
    font-size: 1.4rem;
    color: lightgray;
}
.related-container-items {
    display: flex;
    flex-wrap: wrap;
    padding-left: 5px;
    padding-bottom: 1.5rem;
}
.related-container .library-group {
    /*width: 224px;
    min-width: 224px;*/
    margin-bottom: 0px;
    min-height:180px;
}
.related-container .library-group .image {
   /* width: 224px;
    height: 224px;
    min-width: 224px;*/
    min-height: 122px !important;
}

.related-container .library-group img {
   /* width: 224px;
    max-width: 224px;
    max-height: 224px;*/
    object-fit:contain;
    max-height:unset;
}

.related-container .library-group .name,
.related-container .library-group .name label {
    margin: 0px;
    padding: 0px;
    font-size: .9rem;
}
.related-container .library-group .info,
.related-container .library-group .info label {
    margin: 0px;
    padding: 0px;
    font-size: .8rem;
    padding-top:3px;
}
.related-container .library-group .name2,
.related-container .library-group .name2 label {
    margin:0px;
    padding:0px;
    font-size:.8rem;
}
.related-container .library-group .name3,
.related-container .library-group .name3 label {
    margin:0px;
    padding:0px;
    font-size:.8rem;
}
.related-container .library-group .name4,
.related-container .library-group .name4 label {
    margin:0px;
    padding:0px;
    font-size:.8rem;
}
.library-groups-selected-item.single .metadata-item-header-info-container .metadata-item-header-info {
    display: none;
}
.library-groups-selected-item.single .library-item-list .library-item > .library-item-details {
    display: none;
}

.library-group .live-time {
    padding-top: 0px;
    margin-bottom: 0px;
}
.library-group .container > .live-time {
    line-height: normal;
    padding-top: 4px;
    display:none;
}
.library-group .container > .live-location {
    line-height: normal;
    display: none;
}

button {
    cursor: pointer;
}
.btn-clear {
    background-color:transparent !important;
    border-color:transparent !important;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

/*.btn-grow {
    transition:.3s;
}
body:not(.mobile-device) .btn-grow:hover,
.btn-grow:focus {
    transform:scale(1.2);
}
.btn-grow:active {
    transform:scale(1.1);
}*/
.btn-gloss {
    border: solid 1px transparent;
    outline: 0;
    margin: 0;
    background-color: transparent;
    color: white;
    font-size: 1rem;
    /* opacity: .7; */
    cursor: pointer;
    /* padding: 0rem .5rem; */
    /* margin-right: 1rem; */
    /* padding-top: .3rem; */
    margin-right: .3rem;
    transition: .3s;
    background-color: #323232;
    /* padding-bottom: .5rem; */
    /* margin-left: 5px; */
    /* margin-right: 5px; */
    color: #FDFEFE;
    padding: .7rem 1.3rem;
    margin-right: .6rem;
    margin-top: 3px;
    margin-bottom: 3px;
    white-space: nowrap;
    cursor: pointer;
    opacity: 1;
    font-size: 1.4rem;
    background: rgba(100,100,100, .3);
    border-color: rgba(100,100,100, .5);
    border-radius: 5px;
    padding: 10px 30px;
    border-color: rgba(100, 100, 100, .7) !important;
}
body:not(.mobile-device) .btn-gloss:hover {
    background-color: #0d6efd;
    color: white;
}
.btn-gloss:focus {
    background-color: #0d6efd;
    color: white;
}
.btn-gloss:active {
    background-color: #0d6efd;
    color: white;
    opacity: .8;
}
.carousel-control-prev.btn,
.carousel-control-next.btn {
    max-height: 20vh;
    height: 20vh;
    padding: 0.75rem;
    position: absolute;
    top: 32vh;
    transition: .3s;
}
.carousel-control-prev.btn {
    border-left: none !important;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}
.carousel-control-next.btn {
    border-right: none !important;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    margin-right: 0px !important;
}
.preview-player #playerControls .metadata-item-header-info-description {
    flex-direction: column;
}
.library-item .info .info2 .buttons {
    display: flex;
    align-items: center;
}
.library-item .info .info2 .info-button {
    margin-right: 0.35rem;
    margin-left: 0.35rem;
    color: lightgray;
}
.library-item .info .info2 .info-button i {
    font-size: 21px;
    position: relative;
    top: -1px;
}
.library-item .info .info2 .love-button {
    margin-right: 0.35rem;
    margin-left: 0.35rem;
    color: lightgray;
}
.library-item .info .info2 .cache-button {
    margin-right: 0.35rem;
    margin-left: 0.35rem;
    color: lightgray;
}
body:not(.mobile-device) .library-item .info .info2 .info-button:hover,
body:not(.mobile-device) .library-item .info .info2 .love-button:hover,
body:not(.mobile-device) .library-item .info .info2 .cache-button:hover {
    transform: scale(1.3);
}
.library-item .info .info2 .info-button:focus,
.library-item .info .info2 .love-button:focus,
.library-item .info .info2 .cache-button:focus {
    transform: scale(1.4);
}
.library-item .info .info2 .info-button:active,
.library-item .info .info2 .love-button:active,
.library-item .info .info2 .cache-button:active {
    transform: scale(1.2);
}
body.dark-mode .library-group-details .description a {
    color: lightgray;
    text-decoration:underline !important;
    color:white !important;
}
.library-group .info .info1 .buttons {
    display: flex;
    position: relative;
    margin-bottom: 0px;
    margin-top: 2px;
    position: absolute;
    right: 0.65rem;
    bottom: 0.45rem;
    height: fit-content;
}
.library-group .info .info1 .buttons button {
    line-height: 0px;
    opacity:.7;
    transition:.3s;
    height: fit-content;
}
body:not(.mobile-device) .library-group .info .info1 .buttons button:hover,
body:not(.mobile-device) .library-group .info .info1 .buttons button:focus {
    opacity: 1;
}
.library-group .info .info1 .buttons button:active {
    opacity:.8;
}
.library-group .info .info1 .buttons button i {
    font-size: 20px;
}
.library-group .info .info1 .buttons button.info-button {

    top:1px;
}
.library-group .info .info1 .buttons button.info-button i {
    font-size: 19px;
    margin-right:.35rem;
}

.library-group.related-media .info .info1 .buttons button i {
    font-size: 17px;
}


.library-group .container .buttons {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    position: absolute;
    bottom: 0rem;
    margin-right: 0rem;
    right: 0;
}
.library-group .container .buttons button {
    line-height: 0px;
    opacity:.7;
    transition:.3s;
    height: fit-content;
}
body:not(.mobile-device) .library-group .container .buttons button:hover,
body:not(.mobile-device) .library-group .container .buttons button:focus {
    opacity: 1;
}
.library-group .container .buttons button:active {
    opacity: .8;
}
.library-group .container .buttons button i {
    font-size: 19px;
    /*line-height: 0;*/
    top: 0px;
    position:initial;
}
.library-group .container .buttons button.info-button {
    margin-right: .75rem;
}
.library-group .container .buttons button.info-button i {
    font-size: 17px;
    top: 0px;
    position: initial;
   /* line-height: 0;*/
}
.library-group:hover .container .buttons button.favorite-button i,
.library-group:focus .container .buttons button.favorite-button i,
.library-group:focus.selected .container .buttons.favorite-button i,
.library-group.selected .container .buttons button.favorite-button i {
    top: 0px;
}

.loader-io.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .7);
    margin: 0;
    justify-content: center;
    align-items: center;
}

#videoPreview.vtt .thumbnail-preview {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    /*bottom: 0;*/
    height: 180px;
}

.library-group  {
   /* overflow:visible;*/
}
.library-group .bottom-banner {
    position: absolute;
    bottom: 0px;
    z-index: 7;
    font-weight: 600;
    font-size: 1rem;
    display:flex;
    width:fit-content;
    overflow:hidden;
   /* font-family: "Funnel Display";*/
}
.related-container-items .library-group .bottom-banner {
    font-size: .8rem;
}
.library-group .bottom-banner .bottom-banner-text-1 {
    background-color: red;
    color: white;
    padding: .25rem .75rem;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
.library-group.is-live .bottom-banner .bottom-banner-text-1:before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: white; 
    border-radius: 50%; 
    margin-right: 8px; 
    vertical-align: middle; 
    position: relative;
    top: -1px;
}
.related-container-items .library-group .bottom-banner .bottom-banner-text-1 {
    padding: .15rem .5rem;
}
.library-group .bottom-banner .bottom-banner-text-1.has-sibling {
    border-top-right-radius: 0px;
}
.library-group .bottom-banner .bottom-banner-text-2 {
    background-color: white;
    color: black;
    padding: .25rem .75rem;
    border-top-right-radius: 3px;
}
.library-group .top-ribbon {
    position: absolute;
    top: 0px;
    right: 11px;
    background: red;
    color: white;
    z-index: 10;
    white-space: normal;
    text-align: center;
    text-transform: uppercase;
    padding: .25rem .5rem;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    font-family: "Funnel Display";
}
.library-group .top-ribbon .top-ribbon-text-1 {
    font-size: .7rem;
    font-weight: bold;
    line-height: 1;
   /* transform: scaleX(1.1);*/
}
.library-group .top-ribbon .top-ribbon-text-2 {
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 1;
    /*transform: scaleX(1.3);*/
}


.live-banner-ex {
    display: flex;
    flex-direction: column;
}
.live-banner .bottom-banner {
    font-weight: 600;
    font-size: 1.4rem;
    display: flex;
    width: fit-content;
    overflow: hidden;
    /* font-family: "Funnel Display"; */
    margin-bottom: 1rem;
    margin-top: .25rem;
    padding-left: 0px;
}
.project-quick-access .live-banner .bottom-banner {
    margin-top: .5rem;
    font-size: 2.2rem;
    margin-bottom: .75rem;
}

.live-banner .bottom-banner-ex {
    font-weight: 600;
    font-size: 1rem;
    display:flex;
    width:fit-content;
    overflow:hidden;
   /* font-family: "Funnel Display";*/
}
.live-banner .bottom-banner .bottom-banner-text-2 {
    margin-left:.5rem;
}


.live-banner .bottom-banner-ex .bottom-banner-text-1 {
    background-color: red;
    color: white;
    padding: .25rem .75rem;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}
.live-banner.is-live .bottom-banner-ex .bottom-banner-text-1:before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: white; 
    border-radius: 50%; 
    margin-right: 8px; 
    vertical-align: middle; 
    position: relative;
    top: -1px;
}
.live-banner .bottom-banner-ex .bottom-banner-text-1.has-sibling {
    border-top-right-radius: 0px;
}
.live-banner .bottom-banner-ex .bottom-banner-text-2 {
    background-color: white;
    color: black;
    padding: .25rem .75rem;
    border-top-right-radius: 3px;
}

.library-group-container,
.top-ten-category .library-groups > .library-group,
.top-ten-category .recent-grouping .library-groups > .library-group:first-child {
    position: relative;
    margin-left: 6.5rem !important;
    margin-right: .5rem;
    overflow: visible;
}
body.mobile-device .library-group-container,
body.mobile-device .top-ten-category .library-groups > .library-group,
body.mobile-device .top-ten-category .recent-grouping .library-groups > .library-group:first-child {
    position: relative;
    margin-left: 4.25rem !important;
    margin-right: .75rem;
    overflow: visible;
}
.top-ten-category .library-groups > .library-group > .image {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}
body.widescreen-artwork .top-ten-category .library-groups > .library-group > .image {
    width: 308px;
    height: 175px;
}
.top-ten-category .library-groups > .library-group > .container {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}
.library-group-container.ranking-1,
.top-ten-category .library-groups > .library-group.ranking-1 {   

}
.library-group-container.ranking-2,
.top-ten-category .library-groups > .library-group.ranking-2 {
}
.library-group-container.ranking-3,
.top-ten-category .library-groups > .library-group.ranking-3 {
}
.library-group-container.ranking-4,
.top-ten-category .library-groups > .library-group.ranking-4 {
}
.library-group-container.ranking-5,
.top-ten-category .library-groups > .library-group.ranking-5 {
}
.library-group-container.ranking-6,
.top-ten-category .library-groups > .library-group.ranking-6 {
}
.library-group-container.ranking-7,
.top-ten-category .library-groups > .library-group.ranking-7 {
}
.library-group-container.ranking-8,
.top-ten-category .library-groups > .library-group.ranking-8 {
}
.library-group-container.ranking-9,
.top-ten-category .library-groups > .library-group.ranking-9 {
}
.library-group-container.ranking-10,
.top-ten-category .library-groups > .library-group.ranking-10 {
    margin-left: 11rem !important;
}
body.mobile-device .library-group-container.ranking-10,
body.mobile-device .top-ten-category .library-groups > .library-group.ranking-10 {
    margin-left: 9rem !important;
}
.library-group-container .ranking,
.top-ten-category .library-groups > .library-group .ranking {
    position: absolute;
    left: -3.75rem;
    bottom: -2rem;
    /* z-index: 5; */
    font-size: 14vh;
    font-size: 9.5rem;
    -webkit-text-stroke: 2px #FF0062;
    color: black;
    /* font-weight: bold; */
    /* transform: rotate3d(25, 38, 71, 17deg); */
    transition: .5s ease-in-out;
    /* transform: rotateY(-33deg); */
    /* transform-origin: center; */
    /* left: -6rem; */
    /* transform: rotateY(-0deg); */
    font-family: "Funnel Display";
    font-weight: 900;
    color: rgba(255, 0, 98, 0);
    opacity: 1;
}
.library-groups > .library-group .ranking {
    display: none;
}
.top-ten-category .library-groups > .library-group .ranking {
    display:block;    
}
body:not(.mobile-device) .library-group-container:hover .ranking,
body:not(.mobile-device) .library-group-container:focus .ranking,
body:not(.mobile-device) .library-group-container.focused .ranking,
body:not(.mobile-device) .top-ten-category .library-groups > .library-group:hover .ranking,
body:not(.mobile-device) .top-ten-category .library-groups > .library-group:focus .ranking,
body:not(.mobile-device) .top-ten-category .library-groups > .library-group.focused .ranking {
    color: rgba(255, 0, 98, 1);
}
body:not(.mobile-device) .library-group-container:hover .ranking,
body:not(.mobile-device) .library-group-container:focus .ranking,
body:not(.mobile-device) .library-group-container.focused .ranking,
body:not(.mobile-device) .top-ten-category .library-groups > .library-group:hover .ranking,
body:not(.mobile-device) .top-ten-category .library-groups > .library-group:focus .ranking,
body:not(.mobile-device) .top-ten-category .library-groups > .library-group.focused .ranking {
    left: -5.5rem;
}
.library-group-container.ranking-1  .ranking,
.top-ten-category .library-groups > .library-group.ranking-1  .ranking {
    left: -2.75rem;
    left: -47px;
}
body:not(.mobile-device) .library-group-container.ranking-1:hover .ranking,
body:not(.mobile-device) .library-group-container.ranking-1:focus .ranking,
body:not(.mobile-device) .library-group-container.ranking-1.focused .ranking,
body:not(.mobile-device) .top-ten-category .library-groups > .library-group.ranking-1:hover .ranking,
body:not(.mobile-device) .top-ten-category .library-groups > .library-group.ranking-1:focus .ranking,
body:not(.mobile-device) .top-ten-category .library-groups > .library-group.ranking-1.focused .ranking {
    left: -67px;
}
.library-group-container.ranking-10 .ranking,
.top-ten-category .library-groups > .library-group.ranking-10 .ranking {
    left: -8.5rem;
    /*letter-spacing: -10px;*/
}
body:not(.mobile-device) .library-group-container.ranking-10:hover .ranking,
body:not(.mobile-device) .library-group-container.ranking-10:focus .ranking,
body:not(.mobile-device) .library-group-container.ranking-10.focused .ranking,
body:not(.mobile-device) .top-ten-category .library-groups > .library-group.ranking-10:hover .ranking,
body:not(.mobile-device) .top-ten-category .library-groups > .library-group.ranking-10:focus .ranking,
body:not(.mobile-device) .top-ten-category .library-groups > .library-group.ranking-10.focused .ranking {
    left: -10rem;
}
/*body.mobile-device .library-group-container.ranking-10 .ranking,
body.mobile-device .library-group-container.ranking-10:focus .ranking,
body.mobile-device .library-group-container.ranking-10.focused .ranking,
body.mobile-device .top-ten-category .library-groups > .library-group.ranking-10:hover .ranking,
body.mobile-device .top-ten-category .library-groups > .library-group.ranking-10:focus .ranking,
body.mobile-device .top-ten-category .library-groups > .library-group.ranking-10.focused .ranking {
    left: -7.25rem;
}*/
.recent-grouping .library-groups .library-group-container .library-group:last-child,
.top-ten-category .library-groups > .library-group:last-child {
    margin-right: 0rem;
}
.recent-grouping .library-groups .library-group-container:last-child,
.top-ten-category .library-groups > .library-group:last-child {
    margin-right: 2rem;
}
.recent-date.top-ten-category .name.section-button {
    /* -webkit-text-stroke: 2px #FF0062;*/
    color: black;
    /* font-weight: bold; */
    /* transform: rotate3d(25, 38, 71, 17deg); */
    transition: .3s ease-in-out;
    /* transform: rotateY(-33deg); */
    /* transform-origin: center; */
    /* left: -6rem; */
    /* transform: rotateY(-0deg); */
    font-family: "Roboto";
    font-weight: 900;
    color: rgba(255, 0, 98, 0);
    opacity: 1;
    /* color: #FF0062; */
    /* letter-spacing: -16px; */
    display: flex;
    font-size: 11vh;
    font-size: 7.5rem;
    /*font-size: 8vh;*/
    margin-left: 2rem;
    margin-left: 3.5rem;
    line-height: 1;
    /*background: linear-gradient(to bottom, #FF0062, transparent);
    background: linear-gradient(to bottom, #FF0062, #2A2A33);
    background: linear-gradient(90deg, #FF4D84 0%, #FF88A6 50%, #FFC0D6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);*/ /* Soft shadow for contrast */
    /*background: linear-gradient(180deg, #FF0062 0%, #FF3A7B 40%, #FF7095 70%, #2A2A33 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    background: linear-gradient(180deg, #FF0062 0%, #FF3A7B 40%, #FF7095 100%);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    background: linear-gradient(180deg, #FF0062 0%, #FF7095 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;*/
    text-align: center;
   /* margin-top: -.5rem;*/
}
.recent-date > .name-container {
    display: flex;
    align-items: center;
}
.recent-date > .name-container .name-info {
    margin-left: 2rem;
    text-transform: uppercase;
    font-size: 2.4rem;
    /*font-size: 2rem;*/
    font-family: "Roboto";
    font-family: inherit;
    font-weight: 900;
    text-align: justify;
    text-align-last: justify;
    letter-spacing: 12px;
    opacity: .8;
}


.library-group .media-item-page {
    text-align:left;
}
.library-group .media-item-page .media-title {
    font-size: 5.6rem;
    /* line-height: 1.2; */
    max-width: 50vw;
    line-height: 1;
    margin-bottom: 1rem;
    max-width: 600px;
    overflow: hidden;
    white-space: normal;
}
.library-group .media-item-page .media-options {
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    margin-bottom: 1rem;
    margin-left:.5rem;
}
.library-group .media-item-page .media-options > div {
    margin-right: 1rem;
}
.library-group .media-item-page:not(.media-event) .media-date,
.library-group .media-item-page:not(.media-event) .media-live {
    display: none;
}
.library-group .media-item-page.media-event .media-live {
   /* text-transform:uppercase;*/
}
.library-group .media-item-page:not(.media-event) .register-button,
.library-group .media-item-page.media-event.can-play .register-button,
.library-group .media-item-page.media-event:not(.can-play) .play-button {
    display: none;
}
.library-group .media-item-page .media-date,
.library-group .media-item-page .media-live {
    color: #FFAB15;
}

.library-group .media-item-page .media-buttons {
    display: flex;
    margin-bottom: 3rem;
    pointer-events: all;
    margin-top: 2rem;
}
.library-group .media-item-page .media-buttons button {
    margin-right: 1.5rem;
    padding: .75rem 5rem;
    border: solid 1px transparent;
    background: rgba(100, 100, 100, .3);
    border-color: rgba(100, 100, 100, .7);
}
body:not(.mobile-device) .library-group .media-item-page .media-buttons button:hover,
.library-group .media-item-page .media-buttons button:focus,
.library-group .media-item-page .media-buttons button.focused,
.library-group .media-item-page .media-buttons button:active {
    opacity:1;
}
.library-group .media-item-page .media-links {
    display: flex;
    font-size: 1rem;
    margin-bottom: 0rem;
    pointer-events: all;
}
.library-group .media-item-page .media-links button {
    margin-right: 1.5rem;
    padding: .25rem;
    border:none;
    background:none;
    border-radius: 6px;
}
body:not(.mobile-device) .library-group .media-item-page .media-links button:hover,
.library-group .media-item-page .media-links button:focus,
.library-group .media-item-page .media-links button.focused,
.library-group .media-item-page .media-links button:active {
    padding: .75rem 1.5rem;
    border: solid 1px transparent;
    background: rgba(100, 100, 100, .3);
    border-color: rgba(100, 100, 100, .7);
    opacity:1;
}
.library-group .media-item-page .media-links button label {
    display:none;
    margin-left:.5rem;
}
body:not(.mobile-device) .library-group .media-item-page .media-links button:hover label,
.library-group .media-item-page .media-links button:focus label,
.library-group .media-item-page .media-links button.focused label,
.library-group .media-item-page .media-links button:active label {
    display:block;
}
.library-group .media-item-page .media-links button.app-icons i:not(.material-icons) {
    padding-right: 5px;
    font-size: 1rem;
    position: relative;
    /* top: -1px; */
    padding-right: 0px;
    padding-bottom: 0px;
    font-size: 21px;
}
.library-group .media-item-page .media-tagline {
    margin-bottom: 2rem;
    font-size: 1.6rem;
    max-width: 50%;
    margin-top: 1rem;
    line-height: 1.5;
    max-width: 800px;
    overflow: hidden;
    white-space: normal;
}
.library-group .media-item-page .media-tags {
    display: flex;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    pointer-events: all;
}
.library-group .media-item-page .media-tags .media-tag {
    margin-right: 2rem;
    opacity:1;
    transition:.2s;
    color:white;
}
/*body:not(.mobile-device) .library-group .media-item-page .media-tags .media-tag:hover,
.library-group .media-item-page .media-tags .media-tag:focus {
    opacity:1;
}
.library-group .media-item-page .media-tags .media-tag:active {
    opacity:.9;
}*/
.library-group .media-item-page .media-networks {
    display: flex;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    pointer-events: all;
    display: flex;
    align-items: center;
}
.hide-selection-networks .library-group .media-item-page .media-networks {
    display:none;
}
.library-group .media-item-page .media-networks .media-network {
    margin-right: 1rem;
    display: flex;
    align-items: center;
}
.library-group .media-item-page .media-networks .media-network .media-network-image-container {
    border-radius: 100%;
    overflow: hidden;
    /* max-width: 16px; */
    width: 36px;
    height: 36px;
    display: flex;
    margin-right: .75rem;
}
.library-group .media-item-page .media-networks .media-network .media-network-image { 
    object-fit: contain;
}
.library-group .media-item-page .media-networks .media-network label {
    opacity:.7;
}
.library-group .container-ex {
    position: absolute;
    left: 8rem;
    bottom: 2rem;
    z-index: 5;
    text-shadow: -1px 1px 2px rgb(0 0 0);
}
.no-shadow .library-group .container-ex {
    text-shadow: none;
}
.library-group .media-background {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 100%);
    background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 60%);
    z-index: 5;
}
.recent-date.use-full-image .library-group img:not(.media-title-image) {
    right: 0;
    position: absolute;
    display:block;
}

.paywall-control {
    position:fixed;
    left:0;
    top:0;
    right:0;
    bottom:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background-color:rgba(0,0,0,.7);
    color:white;
    z-index:5000;
    opacity:0;
    transition:.2s;
    pointer-events:none;
}
.paywall-body {
    background-color: rgba(0, 0, 0, .7);
    padding: 1rem;
    border-radius: 6px;
}
.paywall-control.show {
    opacity:1;    
    pointer-events:all;
}
.paywall-control .paywall-title {
    font-size:1.5rem;
    text-align:center;
}
.paywall-control .paywall-footer {     
    display: flex;
    margin-left: .25rem;
    font-size: .9rem;
    text-align:center;
    justify-content:center;
}
.paywall-control .paywall-footer-question {    
    margin-right: .25rem;
}
.paywall-control .paywall-actions {
   padding-top: .25rem;
}
.paywall-control .paywall-actions .app-button {
    margin-right: .25rem;
    margin-left: .25rem;
}
.paywall-control .paywall-footer {
    padding-top: .5rem;
}

@media only screen and (max-height: 900px) {
    .current-info-row {
         font-size: 11px; 
    }
}

@media only screen and (max-height: 850px) {
    .current-info-row {
        font-size: 10px;
    }
}

@media only screen and (max-height: 800px) {
    .current-info-row {
        font-size: 9px;
    }
}

@media only screen and (max-height: 750px) {
    .current-info-row {
        font-size: 8px;
    }
}


.player-related-media-control {
    display:flex;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 5000;
    transition:.3s;
    opacity:0;
    pointer-events:none;
}
.player-related-media-control.show {
    opacity:1;
    pointer-events:all;
}

.metadata-item-header {
    flex-direction: column;
    padding-left: 1rem;
    margin-top: 0;
    position: absolute;
    bottom: 7rem;
}


#player .media-info {
    display:none;
}
#player .media-info .media-title {
    font-size: 5.6rem;
    /* line-height: 1.2; */
    max-width: 51vw;
    line-height: 1.05;
    margin-bottom: 1rem;
    margin-left: -.25rem;
}
#player .media-info .media-options {
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    margin-bottom: 1rem;
    margin-left:.25rem;
}
#player .media-info .media-options > div {
    margin-right: 1rem;
}

#player .media-info .media-buttons {
    display: flex;
    margin-bottom: 3rem;
    pointer-events: all;
    margin-top: 2rem;
}
.project-widget-media-page.media-layout-2 #player .media-info .media-buttons {
    margin-top: 0rem;
}
#player .media-info .media-buttons button {
    margin-right: 1.5rem;
    padding: .75rem 5rem;
    border: solid 1px transparent;
    background: rgba(100, 100, 100, .3);
    border-color: rgba(100, 100, 100, .7);
}
#player .media-info .media-buttons .button-container.padding-right {
    padding-right: 2rem;
}
#player .media-info .media-buttons .button-container:hover button,
#player .media-info .media-buttons button:hover,
#player .media-info .media-buttons button:focus,
#player .media-info .media-buttons button.focused,
#player .media-info .media-buttons button:active {
    opacity: 1;
}
.project-widget-media-page.media-layout-3 #player .media-info .media-buttons {
    margin-top: 0;
    margin-bottom: 0rem;
}
#player .media-info .media-links {
    display: flex;
    align-items: center;
    font-size: 1rem;
    margin-bottom: 0rem;
    pointer-events: all;
    margin-left: .25rem;
}
#player .media-info .media-links button {
    margin-right: 1.5rem;
    padding: .25rem;
    border:none;
    background:none;
    border-radius: 6px;
}
#player .media-info .media-links .button-container.padding-right {
    padding-right: 2rem;
}
#player .media-info .media-links .button-container:hover button,
#player .media-info .media-links button:hover,
#player .media-info .media-links button:focus,
#player .media-info .media-links button.focused,
#player .media-info .media-links button:active {
    padding: .75rem 1.5rem;
    border: solid 1px transparent;
    background: rgba(100, 100, 100, .3);
    border-color: rgba(100, 100, 100, .7);
    opacity:1;
}
#player .media-info .media-links button label {
    display:none;
    margin-left:.25rem;
}
#player .media-info .media-links .button-container:hover button label,
#player .media-info .media-links button:hover label,
#player .media-info .media-links button:focus label,
#player .media-info .media-links button.focused label,
#player .media-info .media-links button:active label {
    display:block;
}
#player .media-info .media-links button.app-icons i:not(.material-icons) {
    padding-right: 5px;
    font-size: 1rem;
    position: relative;
    top: -1px;/* this seems like its needed for the media page or else the button text doesnt line up evenly  */
    padding-right: 0px;
    padding-bottom: 0px;
    font-size: 21px;
}
#player .media-info .media-tagline {
    margin-bottom: 2rem;
    font-size: 1.6rem;
    max-width: 50%;
    margin-top: 1rem;
    line-height: 1.5;
    margin-left: .25rem;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow:hidden;
    pointer-events:all;
}
#player .media-info .media-tagline a {
    color: white !important;    
}
#player .media-info .media-tags {
    display: flex;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    pointer-events: all;
    margin-left: .25rem;
    display:none;
}
#player .media-info .media-tags .media-tag {
    margin-right: 2rem;
    opacity:1;
    transition:.2s;
    color:white;
}
/*#player .media-info .media-tags .media-tag:hover,
#player .media-info .media-tags .media-tag:focus {
    opacity:1;
}
#player .media-info .media-tags .media-tag:active {
    opacity:.9;
}*/
#player .media-info .media-networks {
    display: flex;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    pointer-events: all;
    display: flex;
    align-items: center;
    margin-left: .25rem;
}
.hide-selection-networks #player .media-info .media-networks {
    display:none;
}
#player .media-info .media-networks .media-network {
    margin-right: 1rem;
    display: flex;
    align-items: center;
}
#player .media-info .media-networks .media-network .media-network-image-container {
    border-radius: 100%;
    overflow: hidden;
    /* max-width: 16px; */
    width: 36px;
    height: 36px;
    display: flex;
    margin-right: .75rem;
}
#player .media-info .media-networks .media-network .media-network-image { 
    object-fit: contain;
}
#player .media-info .media-networks .media-network label {
    opacity:.7;
}



#player .media-details-vail {
    background: rgba(0,0,0,0);
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 10001;
    display: none;
}
#player .media-details-vail.show {
    display:block;   
}
#player .media-details {
    background: linear-gradient(180deg, #000, #222);
    background: linear-gradient(45deg, rgba(0, 0, 0, 1), rgba(68,68,68, 1));
    width: 35rem;
    height: 100vh;
    position: fixed;
    top: 0;
    right: -50rem;
    bottom: 0;
    z-index: 10002;
    transition: .3s right;
    overflow: auto;
    padding-bottom: 0rem;
    display: flex;
    flex-direction: column;
}
body.mobile-device #player .media-details {
    padding-bottom: 3rem;
}
#player .media-details.show {
    right: 0rem;
}
#player .media-details .media-details-header {
    display: flex;
    align-items: center;
    margin: .5rem;
}
    #player .media-details .media-details-header .close-button {
        font-size: 1.6rem;
        padding: .5rem;
        margin: .25rem;
        margin-right: .5rem;
    }
#player .media-details .media-details-data {
    margin: 0rem 2rem;
    padding-bottom:4rem;
}
body:not(.mobile-device) #player .media-details .media-details-data {
    padding-bottom: 0rem;
}
#player .media-details .media-details-title {
    font-size: 2rem;
    font-weight: 600;
    padding-bottom: .5rem;
    line-height: 2.4rem;
}

#player .media-details  .media-options {
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    margin-bottom: 1rem;
    margin-left: .0rem;
}
#player .media-details  .media-options > div {
    margin-right: 1rem;
}

#player .media-details .media-buttons {
    display: flex;
    flex-direction: column;
    pointer-events: all;
}
#player .media-details  .media-buttons button {
    margin-right: 0rem;
    padding: .75rem 5rem;
    border: solid 1px transparent;
    background: rgba(100, 100, 100, .3);
    border-color: rgba(100, 100, 100, .7);
 /*   margin-bottom: 1.5rem;*/
    justify-content: center;
}
#player .media-details .media-buttons > button {
    margin-bottom: .5rem;
    margin-top: 0rem;
}

#player .media-details  .media-buttons .button-container.padding-right {
    padding-right: 2rem;
}
#player .media-details  .media-buttons .button-container:hover button:not(.selected-accentButton),
#player .media-details  .media-buttons button:not(.selected-accentButton):hover,
#player .media-details  .media-buttons button:not(.selected-accentButton):focus,
#player .media-details  .media-buttons button:not(.selected-accentButton).focused,
#player .media-details  .media-buttons button:not(.selected-accentButton):active {
    opacity: 1;
}
#player .media-details .media-links {
    display: flex;
    align-items: center;
    font-size: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    pointer-events: all;
    margin-left: .25rem;
    min-height: 47px;
    margin-left: 0px;
    justify-content: center;
}
#player .media-details .media-links button {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
    padding: .5rem;
    border: none;
    background: none;
    border-radius: 6px;
    margin-bottom: 0;
    flex-direction:column !important;
}
#player .media-details  .media-links .button-container.padding-right {
    padding-right: 2rem;
}
#player .media-details  .media-links .button-container:hover button,
#player .media-details  .media-links button:hover,
#player .media-details  .media-links button:focus,
#player .media-details  .media-links button.focused,
#player .media-details  .media-links button:active {
    padding: .75rem 1.5rem;
    border: solid 1px transparent;
    background: rgba(100, 100, 100, .3);
    border-color: rgba(100, 100, 100, .7);
}
#player .media-details  .media-links .button-container:hover button,
#player .media-details  .media-links button:hover {
     opacity:.7;
}
#player .media-details  .media-links button:active {
     opacity:1;
}
#player .media-details  .media-links button label {
    margin-left: 0;
    margin-top: .5rem;
    font-size: .9rem;
}
#player .media-details  .media-links .button-container:hover button label,
#player .media-details  .media-links button:hover label,
#player .media-details  .media-links button:focus label,
#player .media-details  .media-links button.focused label,
#player .media-details  .media-links button:active label {
    display:block;
}

#player .media-details  .media-links .button-container:hover button label,
#player .media-details  .media-links button:hover label,
#player .media-details  .media-links button:focus label,
#player .media-details  .media-links button.focused label,
#player .media-details  .media-links button:active label {
    display:block;
}


    #player .media-details .media-links .button-container:hover button,
    #player .media-details .media-links button:hover,
    #player .media-details .media-links button:focus,
    #player .media-details .media-links button.focused,
    #player .media-details .media-links button:active {
        padding: .5rem;
        border: none !important;
        background: transparent !important;
    }

        #player .media-details .media-links .button-container:hover button label,
        #player .media-details .media-links button:hover label,
        #player .media-details .media-links button:focus label,
        #player .media-details .media-links button.focused label,
        #player .media-details .media-links button:active label {
            /*display: none;*/
        }

    #player .media-details .media-links .button-container.padding-right {
        padding-right: 0rem;
    }

#player .media-details  .media-links button.app-icons i:not(.material-icons) {
    padding-right: 5px;
    font-size: 1rem;
    position: relative;
    /* top: -1px; */
    padding-right: 0px;
    padding-bottom: 0px;
    font-size: 21px;
}
#player .media-details  .media-tagline { 
    font-size: 1.2rem;
    /* font-weight: 600; */
    padding-bottom: .5rem;
    line-height: 1.7rem;
}
#player .media-details  .media-tagline p a { 
    color:white !important;
}
#player .media-details  .media-tags {
    display: flex;
    font-size: 1rem;
    margin-bottom: 1rem;
    pointer-events: all;
    /* margin-left: .25rem; */
    flex-flow: wrap;
    margin-top: .5rem;
}
#player .media-details  .media-tags .media-tag {
    margin-right: 2rem;
    opacity:1;
    transition:.2s;
    color:white;
    margin-bottom:1rem;
}


.media-details-items {
    margin-bottom: 2rem;
}
.media-details-items-item {
    margin-bottom: .75rem;
    max-width: 100%;
    transition: .2s;
    border: solid 1px transparent;
    padding: .5rem;
    /* margin-bottom: 0; */
    border-radius: 3px;
    width: 100%;
    min-height:125px;
}
.media-details-items-item:last-of-type {
    margin-bottom: 2rem;
}
body:not(.mobile-device) .media-details-items-item.now-playing {
    background-color: rgba(100, 100, 100, .3);
    border: solid 1px rgba(100, 100, 100, .7);
}
body:not(.mobile-device) .media-details-items-item:hover {
    background-color: rgba(100, 100, 100, .3);
    border: solid 1px rgba(100, 100, 100, .7);
}
body:not(.mobile-device) .media-details-items-item:focus {
    background-color: rgba(100, 100, 100, .4);
    border: solid 1px rgba(100, 100, 100, .9);
}
body:not(.mobile-device) .media-details-items-item:active {
    background-color: rgba(100, 100, 100, .5);
    border: solid 1px rgba(100, 100, 100, 1);
}
.media-details-items-item .icon {
    pointer-events: none;
    opacity: 0;
    margin-left: 1rem;
    margin-right: 1rem;
    font-size: 1.2rem;
    padding-top: 1.5rem;
    display: none;
    position: absolute;
    /*top: 10px;*/
    left: 7px;
    bottom: 5px;
    left: 10px;
    margin: 0;
    padding: 0;
    transition: .2s;
    color: rgba(255, 255, 255, .7);
    display: block;
}
.media-details-items-item.now-playing .icon {
    opacity: 1;
}
.media-details-items-item:hover .icon,
.media-details-items-item:focus .icon,
.media-details-items-item.focused .icon,
.media-details-items-item.selected .icon {
    opacity: 1;
    color: rgba(255, 255, 255, 1);
}
.media-details-items-item .index {
    margin-right: .5rem;
    font-size: 1rem;
    padding-top: 1.3rem;
    font-weight: bold;
    display:none;
}
.media-details-items-item .position {
    height: 2px;
    position: absolute;
    left: 0;
    display: none;
    transition: .2s;
    bottom: -2px;
    max-width: 100%;
    border-radius: 3px;
}
.media-details-items-item.now-playing .position {
    display:block;
}
.media-details-items-item .image {
   position:relative;
}
.media-details-items-item .image img {
    max-width:140px;
    max-height:100px;
}
.media-details-items-item .info {    
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-left: .75rem;
    align-items: baseline;
}
.media-details-items-item .info .label1 { 
    font-size: 1.1rem;
    white-space: normal;
    text-align: left;
    padding-bottom: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 50px;
}
.media-details-items-item .info .label2 {    
    font-size:.8rem;
    opacity:.8;
}
.media-details-items-item .info .label3 {    
    font-size:.7rem;
    opacity:.8;
}
.media-details-items-item .info .label4 {    
    font-size:.7rem;
    opacity:.8;
}

.media-details-items-item.now-playing .info .label2,
.media-details-items-item.now-playing .info .label3,
.media-details-items-item.now-playing .info .label4 {
    opacity:1;
}

.media-details-pages {
    padding: 0rem 2rem;
    /* background-color: black;*/
    flex: 1;
    margin-top: 1.75rem;
    position: relative
}
.media-details-pages-blur {
   /* position: absolute;
    left: 0;
    right: 0;
    top: 3rem;
    box-shadow: -0px -20px 50px 66px black;
    z-index: -1;*/
}
.media-details-pages-tabs {
    border-bottom: solid 2px rgb(100, 100, 100, .7);
    position: relative;
    top: 1px;
}
.media-details-pages-tabs-item {
    margin-right: 3rem;
    border-bottom: solid 2px transparent;
    padding-bottom: 5px;
    padding-left: 1px;
    padding-right: 1px;
    position: relative;
    top: 1px;
}
.media-details-pages-tabs-item.selected {
    font-weight: bold;
    border-bottom: solid 2px white;
}
.media-details-pages-items {
    padding-top: .75rem;
    margin-left: -.5rem;
    margin-right: -.5rem;
}
.media-details-pages-items-item {
    max-width: 100%;
}
.media-details-pages-items-item .flex-row {
    display: flex;
    flex-wrap: nowrap;
    align-items:flex-start;
}
.media-details-pages-items .tagline {
    font-size: 1rem;
    margin: .5rem 0;
    opacity: .8;
    white-space: normal;
    text-align: left;
    line-height: 1.4;
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 43px;
}
.media-details-items-item.now-playing .tagline {
    opacity: 1;
}

.media-details-pages-items .tagline p {
    color:white !important;
}
.media-details-pages-items .tagline p:last-of-type {
    margin-bottom: 0 !important;
}
.media-details-pages-items .tagline span {
    color:white !important;
}
.media-details-pages-items .tagline a {
    color:white !important;
}

.player-item-links {
    display:flex;
    margin-top:.25rem;
    margin-left:0rem;
}
.player-item-links .button-container button {
    padding:.5rem;
    margin-right:.75rem;
    font-size: 1rem;
}
.player-item-links .button-container button.share-button i {
    transform: rotateZ(270deg);
}


.live-countdown {
    margin-bottom: .25rem;
    margin-bottom: 1rem;
}
.media-details-ex .live-countdown {
    margin-bottom: .25rem;
}
.live-countdown-header {
    font-size: .5rem;
    letter-spacing: 1px;
}
.live-countdown-label {
    text-transform: uppercase;
    margin-right: 1rem;
    text-align: center;
}
.live-countdown-body {
    font-size: 2rem;
    font-weight: bold;
}

.dms-access-code .live-countdown {
    margin-left: 1rem;
    margin-bottom: 1.5rem;
}
.dms-access-code .live-countdown-body {
    font-size: 3rem;
}
.dms-access-code .live-countdown-header {
    font-size: .9rem;
}
.dms-access-code .live-countdown-label {
    line-height: normal;
}