/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS and IE text size adjust after device orientation change,
 *    without disabling user zoom.
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    outline: none;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, textarea, select {
    margin: 0;
    padding: 0;
    border: 0;
  /*  line-height: normal;*/
}
p {
    /*margin: 0;*/
    padding: 0;
    border: 0;
}

html {
    font-family: sans-serif; /* 1 */
    -ms-text-size-adjust: 100%; /* 2 */
    -webkit-text-size-adjust: 100%; /* 2 */
}

span {
    cursor: inherit;
}

/**
 * Remove default margin.
 */

body {
    margin: 0;
    overflow: hidden;
    line-height: 1;
}

/* HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */

audio,
canvas,
progress,
video {
    display: inline-block; /* 1 */
    vertical-align: baseline; /* 2 */
}

    /**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

    audio:not([controls]) {
        display: none;
        height: 0;
    }

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
 */

[hidden],
template {
    display: none !important;
}

/* Links
   ========================================================================== */

/**
 * Remove the gray background color from active links in IE 10.
 */

a {
    background-color: transparent;
}

    /**
 * Improve readability of focused elements when they are also in an
 * active/hover state.
 */

    a:active,
    a:hover {
        outline: 0;
    }

/* Text-level semantics
   ========================================================================== */

/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */

abbr[title] {
    border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */

b,
strong {
    font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */

dfn {
    font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9.
 */

mark {
    background: #ff0;
    color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
    font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove border when inside `a` element in IE 8/9/10.
 */

img {
    border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */

svg:not(:root) {
    overflow: hidden;
}

/* Grouping content
   ========================================================================== */

/**
 * Address margin not present in IE 8/9 and Safari.
 */

figure {
    margin: 1em 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */

hr {
    box-sizing: content-box;
    height: 0;
}

/**
 * Contain overflow in all browsers.
 */

pre {
    overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */

code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    font-size: 1em;
}

/* Forms
   ========================================================================== */

/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */

/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */

button,
input,
optgroup,
select,
textarea {
    color: inherit; /* 1 */
    font: inherit; /* 2 */
    margin: 0; /* 3 */
}

.no-select {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */

button {
    overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */

button,
select {
    text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button; /* 2 */
    /* cursor: pointer;  3 */
}

    /**
 * Re-set default cursor for disabled elements. 
 */

    button[disabled],
    html input[disabled] {
        cursor: default;
    }

    /**
 * Remove inner padding and border in Firefox 4+.
 */

    button::-moz-focus-inner,
    input::-moz-focus-inner {
        border: 0;
        padding: 0;
    }

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

input {
    line-height: normal;
}

    /**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */

    input[type="checkbox"],
    input[type="radio"] {
        box-sizing: border-box; /* 1 */
        padding: 0; /* 2 */
    }

    /**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */

    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button {
        height: auto;
    }

    /**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
 */

    input[type="search"] {
        -webkit-appearance: textfield; /* 1 */
        box-sizing: content-box; /* 2 */
    }

        /**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */

        input[type="search"]::-webkit-search-cancel-button,
        input[type="search"]::-webkit-search-decoration {
            -webkit-appearance: none;
        }

/**
 * Define consistent border, margin, and padding.
 */

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
    border: 0; /* 1 */
    padding: 0; /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */

textarea {
    overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */

optgroup {
    font-weight: bold;
}

/* Tables
   ========================================================================== */

/**
 * Remove most spacing between table cells.
 */

table {
    border-collapse: collapse;
    border-spacing: 0;
}

td,
th {
    padding: 0;
}

/*
@import url("../../../site/css/fonts.css");
*/
body {
    margin: 0;
    padding: 0;
    color: #fff;
    background: black;
    /* position: fixed;*/
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: 18px;
    line-height: 27px;
    overflow: hidden;
    overflow-y: auto !important;
    font-family: 'Montserrat', sans-serif;
    line-height: 1.2;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "pnum";
    font-variant-numeric: proportional-nums;
}
body.dark-mode {
    background:black;
    color: #fff;
}
body.light-mode {
    background:white;
    color: black;
}

hr {
    margin:0;
}

ol, ul, dl {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0rem;
    padding-right: 0rem;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active {
    /*border: solid 1px #2A2A30 !important;*/
    -webkit-text-fill-color: #fff !important;
    -webkit-box-shadow: 0 0 0px 1000px black inset !important;
    transition: background-color 1s 5000s;
    font-family: sans-serif !important;
    font-size: 18px !important;
}


/* NOTE:
// having a hard time setting the stripe and autocomplete styling
// the following is working on conjunction with /artrela-ui-stripe.ts
// sans-serif is used to stick to singel font-family
*/
.dms-on-demand-selection-section-payment-card-description {
    font-family: sans-serif !important;
    font-size: 18px !important;
}
.dms-billing-details input[type=text] {
    font-family: sans-serif !important;
    font-size: 18px !important;
}
/* Base styles for all states */
.stripe-base,
.stripe-complete,
.stripe-invalid,
.stripe-empty,
.stripe-focus {
    -webkit-text-fill-color: #fff !important;
    -webkit-box-shadow: 0 0 0px 1000px black inset !important;
    transition: background-color 1s 5000s;
    color: white;
    font-family: sans-serif !important;
    font-size: 18px !important;
}

.light-mode input:-webkit-autofill,
.light-mode input:-webkit-autofill:hover,
.light-mode input:-webkit-autofill:focus,
.light-mode input:-webkit-autofill:active,
.light-mode textarea:-webkit-autofill,
.light-mode textarea:-webkit-autofill:hover,
.light-mode textarea:-webkit-autofill:focus,
.light-mode textarea:-webkit-autofill:active,
.light-mode select:-webkit-autofill,
.light-mode select:-webkit-autofill:hover,
.light-mode select:-webkit-autofill:focus,
.light-mode select:-webkit-autofill:active {
    /*border: solid 1px #2A2A30 !important;*/
    -webkit-text-fill-color: #000 !important;
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}

a,
button,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
}

::placeholder {
    color: #9BACC8,
}


/*body.is-television {
    min-width: 960px;
    max-width: 960px;
    width: 960px;
    min-height: 540px;
    max-height: 540px;
    background: pink !important;
    height: 540px;

}*/
:not(:root):fullscreen::backdrop {
    background: #222 !important;
}

@media (any-pointer: coarse) {
    body, input {
        -webkit-tap-highlight-color: transparent;
    }
}

body, input {
    font-size: 18px;
}

[data-title]:hover:after {
    opacity: 1;
    visibility: visible;
    display: block;
}

[data-title].show {
    opacity: 1;
    visibility: visible;
    display: block;
}

[data-title]:after {
    content: attr(data-title);
    position: absolute;
    bottom: -3.2em;
    left: 0px;
    padding: 10px;
    font-size: 12px !important;
    white-space: nowrap;
    border-radius: 4px;
    background: #191919;
    color: #fff;
    text-align: center;
    opacity: 0;
    z-index: 99999;
    visibility: hidden;
    transition: all 0.1s ease 0.5s;
    visibility: visible;
    display: block;
    transform: translate(-26%, 10px);
    pointer-events:none;
}

[data-title] {
    position: relative;
}


html ::-webkit-scrollbar {
    display: block;
    width: 14px;
    height: 14px;
}
html body.mobile-device ::-webkit-scrollbar {
    width: 1px;
    height: 1px;
}

::-webkit-scrollbar {
    -webkit-appearance: none;
}

::-webkit-scrollbar-corner,
::-webkit-scrollbar-track {
    color: #323232;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
}

::-webkit-scrollbar-thumb {
    background-color: #323232;
    border-radius: 10px;
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background-color: #323232;
    border-radius: 10px;
}



label {
    cursor: inherit;
}

article,
aside,
footer,
header,
nav,
section {
    display: block;
}

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

figcaption,
figure,
main {
    display: block;
}

figure {
    margin: 1em 40px;
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
}

pre {
    font-family: monospace, monospace;
    font-size: 1em;
}

a {
    background-color: transparent;
    color:dodgerblue;
    -webkit-text-decoration-skip: objects;
    cursor:pointer;
}

    a:active,
    a:hover {
        outline-width: 0;
    }

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted;
}

b,
strong {
    font-weight: inherit;
}

b,
strong {
    font-weight: bolder;
}

code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em;
}

dfn {
    font-style: italic;
}

mark {
    background-color: #ff0;
    color: #000;
}

small {
    font-size: 80%;
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

audio,
video {
    display: inline-block;
}

    audio:not([controls]) {
        display: none;
        height: 0;
    }

img {
    border-style: none;
    /*backface-visibility: hidden;*/
}

svg:not(:root) {
    overflow: hidden;
}

button,
input,
optgroup,
select,
textarea {
    font-size: 100%;
    line-height: 1.25;
    margin: 0;
}

button,
input {
    overflow: visible;
}

button,
select {
    text-transform: none;
}

button,
html [type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
}

    button::-moz-focus-inner,
    [type="button"]::-moz-focus-inner,
    [type="reset"]::-moz-focus-inner,
    [type="submit"]::-moz-focus-inner {
        border-style: none;
        padding: 0;
    }

    button:-moz-focusring,
    [type="button"]:-moz-focusring,
    [type="reset"]:-moz-focusring,
    [type="submit"]:-moz-focusring {
        outline: 1px dotted ButtonText;
    }

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal;
}

progress {
    display: inline-block;
    vertical-align: baseline;
}

textarea {
    overflow: auto;
}

[type="checkbox"],
[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

[type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
}

    [type="search"]::-webkit-search-cancel-button,
    [type="search"]::-webkit-search-decoration {
        -webkit-appearance: none;
    }

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}

details,
menu {
    display: block;
}

summary {
    display: list-item;
}

canvas {
    display: inline-block;
}

template {
    display: none;
}

[hidden] {
    display: none;
}

button {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background-color: transparent;
    cursor: pointer;
    backface-visibility: hidden;
    white-space: nowrap;
    /*padding: 0.1rem 0.2rem;*/
   /* border-radius: 3px;*/
}
/*button:focus {
    border-color: dodgerblue;
}*/
button.btn-fade {
    transition: .3s;
    opacity:1;
}
button.btn-fade:hover {
    opacity:.8;
}
button.btn-fade.selected-accentButton:hover {
    opacity:1;
}
button.btn-fade.selected-accentButton:active {
    opacity:.8;
    transition: .1s;
   /* transition: none;*/
}
button.btn-fade:focus {
    opacity:1;
}
button.btn-fade:active {
    opacity:.8;
    transition: .1s;
    /*transition: none;*/
}
body.is-safari button.btn-fade {
    opacity:1 !important;
}
button:disabled {
    opacity:.5 !important;
    pointer-events:none;
}
.no-player-hilite button.transform:hover {
    transform: scale(1.4);
}
.no-player-hilite button.transform:focus {
    transform: scale(1.4);
}
.no-player-hilite button.transform:active {
    transform: scale(1.2);
    transition: .1s;
}
body.no-transition button.fade {
    transition: none;
    transform:none;
}
body.no-transition button.transform {
    transition: none;
    transform: none;
}
button.default {
    background-color: rgb(50,50,50);
    color:white;
    padding: 1rem 1.5rem;
    margin-right:.5rem;
}
button.default:last-of-type {
    margin-right: 0;
}
body:not(.mobile-device) button.default:hover {
    background-color: #0d6efd;
}

button.default:focus {
    background-color: #0d6efd;
}
button.default:active {
    background-color: #0d6efd;
    transition: .1s;
}
button.default:disabled,
button.default.disabled {
    background-color: rgb(50,50,50) !important;
    opacity: .7 !important;
    color: rgba(100,100,100);
    cursor: default !important;
}
button.inline {
    display: inline-flex;
    align-items: center;
}
.invisible {
    visibility: unset !important;
}
.vail.invisible {
    opacity: 0 !important;
    visibility:unset !important;
}

a.fade {
    transition: .3s !important;
    opacity: .7 !important;
}
a.fade:hover {
    opacity:1 !important;
}
a.fade:focus {
    opacity:1 !important;
}
a.fade:active {
    opacity:.8 !important;
    transition: none !important;
}
.align-icons {
    display:flex;
    align-items:center;
}
.align-icons i {
    padding-right: 5px;
}
.sp-original-input-container .sp-add-on {
    width: 40px !important;
    border-top-left-radius: 3px !important;
    border-bottom-left-radius: 3px !important
}
.fit-content-width {
    width: fit-content;
}
ul, li {
    list-style-type: none;
}
.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}
.carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}


*[data-title]:hover::after {
    content: attr(data-title);
    /* Add your custom styles here */
}

.btn:focus-visible {
    box-shadow: none;
}

body.show-ruler::before {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    background-size: 10px 10px;
    background-image: linear-gradient(to right, rgba(254, 0, 0, 1) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 0, 0, 1) 1px, transparent 1px);
    z-index: 9999;
}

.app-container {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.app-navigation {
    color: black;
    display: flex;
    flex-direction: column;
    width: 275px;
    /* background-image: linear-gradient( 0deg, rgb(51, 88, 244) 0%, rgb(29, 140, 248) 100%);*/
    box-shadow: 0 16px 38px -12px rgb(0 0 0 / 56%), 0 4px 25px 0 rgb(0 0 0 / 12%), 0 8px 10px -5px rgb(0 0 0 / 20%);
    background-color: white;
    overflow: auto;
    /*transition: .3s;*/
    flex: 1;
}
body.dark-mode .app-navigation {
    /*background-color: rgba(0,0,0, .05);*/
    background: #1C1C22;
}
.app-navigation-container.hide .app-navigation {
    width: 78px;
}

.app-form-field-time-menu-items.time-zones .app-form-field-time-menu-item {
    text-align: left;
}


.app-navigation a {
    padding: 10px 0px;
    padding-left: 6px;
    display: flex;
    align-items: center;
    /*  margin: 10px 0px;*/
    background-color: transparent;
    border: solid 1px transparent;
    text-decoration: none;
    transition: .2s;
    /* margin-left: 0;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;*/
}
body.light-mode .app-navigation a {
    color: #000;
}

    body.light-mode .app-navigation a:hover, body.light-mode .app-navigation.select > a {
        background-color: lightgray;
        border: solid 1px lightgray;
    }

body.dark-mode .app-navigation a {
    color: whitesmoke;
}

    body.dark-mode .app-navigation a:hover, body.dark-mode .app-navigation.select > a {
        background-color: rgba(200, 200, 200, 0.2);
        border: solid 1px transparent;
    }

/*.app-navigation a:focus {
    background-color: lightgray;
    border: solid 1px lightgray;
}
*/
.app-navigation-item > a:hover, .app-navigation-item.select > a {
    background-color: lightgray;
    border: solid 1px lightgray;
}

/*.app-navigation-item.context-menu > a {
    background-color: lightgray;
    border: solid 1px lightgray;
}*/

body.dark-mode .app-navigation-item > a {
    color: whitesmoke;
}

    /*body.dark-mode .app-navigation-item > a:focus {
        background-color: rgba(200, 200, 200, 0.2);
        border: solid 1px transparent;
    }
*/
body.dark-mode .app-navigation-item > a:hover, body.dark-mode .app-navigation-item.select > a {
    background-color: rgba(200, 200, 200, 0.2);
    border: solid 1px transparent;
}
/*
.app-navigation a:active {
    background-color: #288c6c;
    background: linear-gradient( 60deg, #288c6c, #4ea752);
    box-shadow: 0 4px 20px 0px rgb(0 0 0 / 14%), 0 7px 10px -5px rgb(76 175 80 / 40%);
    color: white !important;
}

    .app-navigation a:active .app-navigation-icon {
        color: white !important;
    }
*/
.app-navigation a.selected {
    background-color: #4ea752;
    background: linear-gradient( 60deg, #288c6c, #4ea752) !important;
    box-shadow: 0 4px 20px 0px rgb(0 0 0 / 14%), 0 7px 10px -5px rgb(76 175 80 / 40%) !important;
    color: white !important;
}

    .app-navigation a.selected .app-navigation-icon {
        color: white !important;
    }
.app-navigation-subitems-loading-item {
    padding-left: 29px;
    position: relative;
    top: 0px;
    font-size: .9rem;
    padding-top: 5px;
    padding-bottom: 5px;
    display:none !important;
}
.app-navigation-subitems-loading-item.show {
    display:flex !important;
}
/*.app-navigation-item:not(.expanded) app-navigation-subitems-loading-item {
    display:none !important;
}*/
.app-navigation-subitems-loading-item .app-span {
    padding-left: 10px;
    font-style: italic;
}
body.dark-mode .app-navigation-subitems-loading-item .app-span {
    color:white;
}
.app-navigation-profile-link {
}

.app-navigation-container.hide .app-navigation-profile-link {
    justify-content: center;
}

.app-navigation-profile-link-image {
    width: 34px;
    height: 34px;
    min-height: 34px;
    min-width: 34px;
    overflow: hidden;
    float: left;
    position: relative;
    /* top: -8px; */
    z-index: 5;
    margin-right: 5px;
    border-radius: 50%;
    margin-left: 12px;
    margin-left: 8px;
    box-shadow: 0 16px 38px -12px rgb(0 0 0 / 56%), 0 4px 25px 0 rgb(0 0 0 / 12%), 0 8px 10px -5px rgb(0 0 0 / 20%);
}
.app-navigation-container.hide .app-navigation .app-navigation-profile-link-image {
    margin-left: 0px;
    margin-right: 0px;
}
.app-navigation-profile-link-image i {
    align-items: center;
    justify-content: center;
    font-size: 2.1em;
    color: gray;
}
.app-navigation-profile-link-image img {
    display: none;
}

.app-navigation-container {
    display: flex;
    flex-direction: column;
    position: relative;
}
body.dark-mode .app-container {
    background: linear-gradient(#1E1E2F, #1E1E25);
    background: #131313;
    background: #191919;
    background: #1C1C22;
}

.app-navigation-slider {
    position: absolute;
    top: 10px;
    right: -29px;
    padding: .5rem;
    top: 21px;
    right: -26px;
    padding: .4rem;
    font-size: 1rem;
    color: white;
    background-color: black;
    border-radius: 5px;
    border: solid 1px transparent;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    /* background: linear-gradient( 
60deg, #288c6c, #4ea752) !important; */
    /* background: linear-gradient( 
60deg, #7b1fa2, #913f9e); */
    /* background-color: rgba(255, 255, 255, 0.3); */
    color: #C4D4D7;
    background-color: transparent;
    /* background: linear-gradient(#12121A, #121216) !important; */
   /* border: solid 1px #121216;*/
    cursor: pointer;
    z-index: 10;
}
body.hide-side-nav .app-navigation-slider {
    display:none;
}
/*body.hide-side-nav .app-navigation {
    display: none;
}*/
body.dark-mode .app-navigation-slider {
    background: #1E1E2F;
    background: #131313;
    background: #1C1C22;
}
body.light-mode .app-navigation-slider {
   /* border-color: lightgray;*/
    color: gray;
}
body.light-mode .app-navigation-slider:hover {    
    background-color: lightgray;
}
body.dark-mode .app-navigation-slider:hover {
    background: #12121A;
    background: #191919;
    background: #1C1C22;
}
body.dark-mode .app-navigation-slider:active {
    background-color: rgba(0,0,0, .05);
    color: white;
    transition: 0;
}
body.light-mode .app-navigation-slider:active {
    background-color: rgba(0,0,0, .05);
    /*color: white;*/
    transition: 0;
}
/*.app-navigation-container.hide .app-navigation-slider {
    display: none;
}*/
.app-navigation-slider i {

}
.app-navigation-container.hide .app-navigation-slider i {
    transform: rotateZ( 180deg );
}
.app-navigation-container.hide .splitter {
    display: none !important;
}

.app-navigation-profile-link label {
    font-size: .9rem;
    margin-left: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.app-navigation-container.hide .app-navigation .app-navigation-profile-link label {
    display: none;
    transition-delay: 0;
}

.app-navigation a:active .app-navigation-profile-link i {
    color: white !important;
}

.app-navigation-profile-link:active i {
    color: white !important;
}

.app-navigation-profile-link.selected i {
    color: white;
}

body.dark-mode .app-navigation-profile-link-image i {
    color: white !important;
}

.app-navigation-seperator {
    height: 1px;
    min-height: 1px;
    background-color: lightgray;
    margin-left: 20px;
    margin-right: 20px;
}

body.dark-mode .app-navigation-seperator {
    background-color: rgba(180, 180, 180, 0.3);
}

.app-navigation-seperator.logo {
    margin: 0;
    height: 2px;
    background-image: linear-gradient( 90deg, #752877 0%, #ff5860 100%);
    background-image: linear-gradient( 90deg, #752877 0%, #ff5860 60%, #1C6688 100%);
    -webkit-box-shadow: 0 0 20px 0 rgb(255 88 96 / 50%);
    box-shadow: 0 0 20px 0 rgb(255 88 96 / 50%);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.app-navigation-item ul {
    display: none;
    margin-top: -.5rem;
    margin-top:0;
}
.app-navigation-item.expanded ul.show {
    display:flex;
    flex-direction:column;
}

.app-navigation-item a {
   /* margin: 10px 15px;*/
    border-radius: 0px;
    color: #000;
    padding: 10px;
    padding-left: 16px;
    padding-right: 10px;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    margin-left: 0;
    margin-right: 0;
    /*   transition:.2s;*/
   /* margin: 5px 0px;*/ 
    border: solid 1px transparent;
}
.app-navigation-item a .app-navigation-icon > .app-image {
    max-width: 44px;
    max-height: 22px;
    position: relative;
   /* top: -3px;*/
}
.app-navigation-item a .app-navigation-icon > span {
    position:relative;
 /*   top:-2px;*/
}

.app-navigation-icon {
    font-size: 24px;
    float: left;
    margin-right: 7px;
    line-height: 30px;
    width: 30px;
    text-align: center;
    color: gray;
}
.app-navigation-container.hide .app-navigation-icon {
    margin-right: 0 !important;
}

.app-navigation-item a.selected .app-navigation-icon {
    color: white !important;
}

body.dark-mode .app-navigation-icon {
    color: whitesmoke;
}

.app-navigation-item a label {
    margin: 0;
    font-size: 1.1rem;
    position: relative;
    height: auto;
    white-space: nowrap;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}
.app-navigation-container.hide .app-navigation .app-navigation-item a label {
    display: none;
}
.app-navigation-container.hide .app-navigation .app-navigation-item a .app-navigation-spinner {
    display: none;
}

body.dark-mode .app-navigation-item a {
    color: #fff;
}


.app-navigation-subitems {
    display:none;
}
.app-navigation-subitems.show {
    display: block;
}
.app-navigation-subitems .app-navigation-item > a {
    margin-top: 3px !important;
    margin-bottom: 3px !important;
    margin-left: 0px;
    margin-right: 0px !important;
    padding-left: 0px;
    padding-right: 0px !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    max-width: calc(100% - 0px);
}
.app-navigation-container.hide .app-navigation a {
    padding-left: 0px !important;
}
.app-navigation-container.hide .app-navigation-subitems .app-navigation-item > a {
    padding-left: 0px !important;
}
.app-navigation-container.hide .app-navigation-item a {
    padding-left: 10px !important;
}

.app-navigation-subitems .app-navigation-item > a .app-navigation-icon {
    margin-right: 0px !important;
    justify-content: center;
}

.app-navigation-subitems .app-navigation-item > a .app-navigation-spinner {
    order: -1;
}
.app-navigation-subitems .app-navigation-item > a .app-label {
    margin-left: 5px;
}
.app-navigation-view {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.app-navigation-view.manage-view {  
    padding: 0rem 1.5rem;
    margin: 1rem 1rem;
    margin-top:0rem;
    border-radius: 5px;
    /* background-color: white; */
   /* border: solid 1px lightgray;
    box-shadow: 0 1px 20px 0 rgb(0 0 0 / 10%);
    border: solid 1px lightgray;*/
    border-radius: 5px;
    overflow:hidden;
    margin-bottom: 0;
    margin-right: 0;
    border-bottom-left-radius:0;
    border-top-right-radius:0;
    border-bottom:none;
}
body.dark-mode .app-navigation-view.manage-view {
    /* background: linear-gradient(#12121A, #121216) !important;*/
    border: solid 1px #121216;
    border: none !important;
    box-shadow:none;
}

.app-form-window {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.3);
    z-index: 5001;
}
.app-form-window-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    position: relative;
    margin: 2rem;
}

.app-form-window-container .app-form {
    margin: 0;
    background-color: white;
    border-radius: 5px !important;
    overflow:auto;
    height: 92vh;
}

.app-form-views {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.app-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    /* height: calc(100vh); */
    position: relative;
   /* padding-top: 7px;*/
}

/*body.dark-mode .app-body {
    background-color: #191919;
}
*/
.app-body-header {
    display: flex;
    min-height: 50px;
    padding: 1rem;
    padding-bottom: 0;
    padding-top: 0;
}

.app-body-header-container {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
    padding-right: 20px;
    padding-top: 10px;
    transition: .2s;
    padding-left: 25px;
    display: flex;
    text-transform: uppercase;
    font-size: .9em;
    position: relative;
   /* padding-bottom:17px;*/
    /*background-color: black;
    box-shadow: 0 16px 38px -12px rgb(0 0 0 / 56%), 0 4px 25px 0 rgb(0 0 0 / 12%), 0 8px 10px -5px rgb(0 0 0 / 20%);*/
}

.app-body-header-left-wrapper {
    padding-top: .3rem;
    display: flex;
    align-items: center;
    padding-top: 10px;
    /*padding-bottom: 16px;*/
}
.app-breadcrumb-info .record-display {
    display: flex;
    padding-left: 1rem;
    white-space: nowrap;
    padding-right: 6rem;
}
.app-breadcrumb-info .recordCount {
    padding-right: 8px;
    text-transform: none;
    font-size: 1.2rem;
}
body.dark-mode .app-breadcrumb-info .recordCount {
    color: whitesmoke;
}
.app-breadcrumb-info .totalRecordsLabel {
    text-transform: none;
    color: dimgray;
    font-size: 1.2rem;
}
body.dark-mode .app-breadcrumb-info .totalRecordsLabel {
    color: lightgray;
}

.app-body-header-right-wrapper {
    display: flex;
    /* align-items: center; */
    /* position: relative; 
    top: -3px;*/
    flex-direction: column;
    align-items: flex-end;
    /* position: absolute;
    right: 0;
    top: 0;*/
    order: 1;
    /*padding-left: .5rem;*/
   padding-right: 1rem;
}

.app-menubar {
    color: #1C1C22;
    padding: 0;
    padding-bottom: 0;
    /* border-right: solid 1px #d0d0d0;
    border-left: solid 1px #d0d0d0;*/
    padding: 3px;
    /* border-bottom: solid 1px #d0d0d0; */
    border-color: rgba(0,0,0, .05);
    padding-left: 5px;
    padding-right: 5px;
    display: flex;
    align-items: center;
    flex-wrap:wrap;
}

/*body.dark-mode .app-menubar {*/
    /*background: #1E1E2F;
    background: #131313;*/
    /*background: #191919;*/
   /*background: #1C1C22;
}*/

body.light-mode .app-menubar {
    color: white;
}

.app-menubar ul {
    padding: 0;
    margin: 0;
    font-size: .8rem;
    list-style: none;
    display: flex;
    flex: 1;
    text-align: center;
    justify-content: center;
    padding: 4px;
    margin: 0;
    font-size: 1rem;
    list-style: none;
    display: flex;
    /* flex-wrap: wrap;*/
    /*display: none;*/
}

body.dark-mode .app-menubar ul {
    color: #fff;
}

/*body.light-mode .app-menubar ul {
    color: #000;
}*/

.app-menubar ul li {
    display: inline-block;
    padding: 6px;
    cursor: default;
    position: relative;
    padding-top: 7px;
    padding-bottom: 5px;
}

.app-menubar ul li {
    display: inline-block;
    padding: 20px;
    cursor: default;
    position: relative;
    padding-top: 13px;
    padding-bottom: 10px;
}

    .app-menubar ul li:hover {
        /*background-color: #858585;*/
        color: white;
    }

body.dark-mode .app-menubar ul li:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.app-menubar ul li:hover > label,
.app-menubar ul li.selected > label {
    color: #fff;
}

.app-menubar ul li.selected {
    /*background-color: #676767;*/
    color: white;
}

.app-menubar ul li:last-of-type {
    margin-right: 0;
}

.app-menubar ul li:first-of-type {
    margin-left: 0;
}


#app-menu {
    display: flex;
    align-items: center;
    margin-right: 10px;
    margin-left: 10px;
    min-width: 40px;
}

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

    #app-menu {
        margin-right: 10px;
    }
}

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

    #app-menu {
        margin-right: 0px;
    }
}

.app-window {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
  /*  overflow: hidden;*/
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
}
body.dark-mode .app-window {
    background-color: #2b2b31;
}
body.light-mode .app-window {
    background-color: white;
}

.app-menu {
    border: solid 1px rgba(100,100,100,.3);
    box-shadow: 0 10px 16px 0 rgba(0,0,0,0),0 6px 20px 0 rgba(0,0,0,0.19) !important;
    position: absolute;
    z-index: 15100;
    display: none;
    padding-top: 1px;
    padding-bottom: 1px;
    line-height: 11px;
    border-radius: 5px;
    overflow:hidden;
}
.app-header .app-menu {
    border:none;
    box-shadow:none;
}

.app-menu.show {
    display: block;
}

/*body.dark-mode .app-menu {
    background-color: #1C1C22;
    color: rgba(255,255,255,.9);
    border: solid 1px #1C1C22;
}*/

.app-menu-item {
     font-size: .9rem;
    white-space: nowrap;
    display: flex;
    position: relative;
}
body.light-mode .app-menu-item {
}

.app-menu-item-divider-checkbox {
    width: 2rem;
    border-top: solid 1px transparent;
    border-bottom: solid 1px transparent;
}
body.light-mode .app-menu-item-divider-checkbox {
    background-color: #F0F0F0;
}
body.dark-mode .app-menu-item-divider-checkbox {
  /*  background-color: #1C1C22;*/
}

.app-menu-item-divider {
    height: 1px;
    background-color: #BDBDBD;
    margin: 3px 3px 3px 5px;
    flex: 1;
}
body.dark-mode .app-menu-item-divider {
    background-color: #444;
}

.app-menu-item-checkbox {
    width: 2rem;
    min-width: 2rem;
    border-top: solid 1px transparent;
    border-bottom: solid 1px transparent;
}
body.light-mode .app-menu-item-checkbox {
    background-color: #F0F0F0;
}
body.dark-mode .app-menu-item-checkbox {
    /*background-color: #1C1C22;*/
}

body.light-mode .app-menu-item:hover > .app-menu-item-checkbox {
    background-color: #B5D7F3;
    border-top: solid 1px #0078D7;
    border-bottom: solid 1px #0078D7;
}
body.dark-mode .app-menu-item:hover > .app-menu-item-checkbox {
    background-color: #0d6efd;
    border-top: solid 1px #0d6efd;
    border-bottom: solid 1px #0d6efd;
}


.app-menu-item-checkbox-area {
    background-color: #B5D7F3;
    border: solid 1px #0078D7;
    width: 29px;
    height: 29px;
    margin: 1px;
    display: none;
    text-align: center;
    align-items: center;
    justify-content: center;
}
body.light-mode .app-menu-item-checkbox-area {
    background-color: #B5D7F3;
    border: solid 1px #0078D7;
}
body.dark-mode .app-menu-item-checkbox-area {
    background-color: #0d6efd;
    border: solid 1px #0d6efd;
    border: solid 1px transparent;
}

body.light-mode .app-menu-item:hover > .app-menu-item-checkbox > .app-menu-item-checkbox-area {
    background-color: #80BCEB;
}
body.dark-mode .app-menu-item:hover > .app-menu-item-checkbox > .app-menu-item-checkbox-area {
    background-color: #0d6efd;
}


.app-menu-item.checked > .app-menu-item-checkbox > .app-menu-item-checkbox-area {
    display: flex;
}

/*.app-menu-item-checkbox-image {
    position: relative;
    top: 3px;
}*/

.app-menu-item.disabled > .app-menu-item-checkbox > .app-menu-item-checkbox-area > .app-menu-item-checkbox-image {
    color: #7B858D;
}

.app-menu-item-label {
    padding: 10px 5px;
    padding-right: 25px;
    border-top: solid 1px transparent;
    border-bottom: solid 1px transparent;
    flex: 1;
    color:black;
}
body.dark-mode .app-menu-item-label {
    color: #fff;
}

body.light-mode .app-menu-item:hover > .app-menu-item-label {
    background-color: #B5D7F3;
    border-top: solid 1px #0078D7;
    border-bottom: solid 1px #0078D7;
}

body.dark-mode .app-menu-item:hover > .app-menu-item-label {
    background-color: #0d6efd;
    border-top: solid 1px #0d6efd;
    border-bottom: solid 1px #0d6efd;
}

.app-menu-item.disabled > .app-menu-item-label {
    color: gray;
}

body.dark-mode .app-menu-item.disabled > .app-menu-item-label {
    color: #7B858D;
}


.app-menu-item-hotkey {
    padding: 10px 5px;
    padding-left: 15px;
    padding-right: 15px;
    border-top: solid 1px transparent;
    border-bottom: solid 1px transparent;
    text-align: right;
    color: transparent !important;
}

body.light-mode .app-menu-item:hover > .app-menu-item-hotkey {
    background-color: #B5D7F3;
    border-top: solid 1px #0078D7;
    border-bottom: solid 1px #0078D7;
}

body.dark-mode .app-menu-item:hover > .app-menu-item-hotkey {
    background-color: #0d6efd;
    border-top: solid 1px #0d6efd;
    border-bottom: solid 1px #0d6efd;
}

.app-menu-item.disabled > .app-menu-item-hotkey {
    color: #7B858D;
}

.app-menu-item-arrow {
    padding: 10px 5px;
    padding-right: 10px;
    border-top: solid 1px transparent;
    border-bottom: solid 1px transparent;
    text-align: right;
    display: none;
}

    .app-menu-item-arrow.show {
        display: block;
    }

body.light-mode .app-menu-item:hover > .app-menu-item-arrow {
    background-color: #B5D7F3;
    border-top: solid 1px #0078D7;
    border-bottom: solid 1px #0078D7;
}

body.dark-mode .app-menu-item:hover > .app-menu-item-arrow {
    background-color: #0d6efd;
    border-top: solid 1px #0d6efd;
    border-bottom: solid 1px #0d6efd;
}

.app-menu-item.disabled > .app-menu-item-arrow {
    color: #7B858D;
}

.app-menu-item-arrow > i {
    position: relative;
    top: -1px;
}



.app-logo-link {
    position: relative;
   /* left: 20px;
    top: -5px;
    display:none;*/
}

    .app-logo-link a {
        transition: .2s;
        display: flex;
        padding-right: 1em;
        opacity: 1;
        margin-bottom: 0;
        /*padding-bottom: 13px;
        padding-top: 8px;*/
        cursor: default;
    }

.app-header-panel {
    display: flex;
    align-items: center;
    position: relative;
    padding: .5rem;
}
.app-header-panel .app-form-field-select {    
    max-width: 22rem;
}
body.light-mode .app-header-panel  .app-form-select {    
    background: white;
    font-size:1.8rem;
}
.app-logo-link a:hover {
    opacity: 1;
}

    .app-logo-link img {
        opacity: 1;
        float: left;
        width: 39px;
        text-align: center;
        margin-left: 12px;
       /* margin-right: 15px;*/
    }

    .app-logo-link label {
        display: block;
        opacity: 1;
        transform: translate3d(0px, 0, 0);
        font-size: 17px;
        position: relative;
        top: 1px;
        /* letter-spacing: 4px; */
        color: rgb(32, 33, 36);
        text-transform: uppercase;
        left: -10px;
        display:none;
    }
.app-navigation-container.hide .app-logo-link label {
    display:none;
}
.app-navigation-container.hide .app-navigation-subitems {
    display:none !important;
}
body.dark-mode .app-logo-link label {
    color: whitesmoke;
}

.app-breadcrumbs {
    transition: .2s;
    padding-left: 0px;
    padding-right: 10px;
    margin-left: 0px;
    display: flex;
    text-transform: uppercase;
    font-size: .9em;
    min-height: 42px;
    align-items: flex-end;
    position: relative;
    top: 12px;
}
.app-view.root .app-breadcrumbs {
    top: -2px;
}

.app-breadcrumb-item {
    display: flex;
    align-items: flex-start;
}
.app-breadcrumb-item .html-link {
    
    /*position: relative;
    top: -2px;*/
}

    .app-breadcrumb-item a {
        transition: .2s;
        color: black;
        opacity: .8;
        transition: .2s;
        font-weight: 300;
        font-size: 1.8rem;
        /*opacity: 1;*/
      /*  text-decoration: underline !important;*/
    }

body.dark-mode .app-breadcrumb-item a {
    color: #fff;
}

.app-breadcrumb-item a:hover {
    opacity: 1;
}

.app-breadcrumb-item i {
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 10px;
    font-size: 1rem;
    color: gray;
}

body.dark-mode .app-breadcrumb-item i {
    color: whitesmoke;
}
body.light-mode .app-breadcrumb-item i {
    color: dimgray;
}
.app-breadcrumb-info {
    padding-right: 1rem;
    position: relative;
    top: -4px;
    padding-left: 2rem;
}
.app-breadcrumb-item label {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 300;
    color: #444;
}

body.dark-mode .app-breadcrumb-item label {
    color: whitesmoke;
}

.app-body-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: auto;
    /* height: calc(100vh); */
    /*position: absolute;*/
    /*left: 0;
    top: 45px;
    right: 0;
    bottom: -1px;*/
    /*border-bottom: solid 1px lightgray;*/
    /*  overflow: hidden;*/
    /* padding-top: 20px; */
    /* padding-top: 20px;*/
    /*padding-top: 12px;*/
}

.app-form-view {
    /*overflow: auto;*/
    /*padding-top: 10px;*/
    /*height: 100%; */
    display: flex;
    flex-direction: column;
    flex: 1;
}

.app-body-footer {
    display: flex;
    height: 50px;
}


.app-footer {
    max-height: 22px;
    min-height: 22px;
    background: linear-gradient(to bottom, #e4e5e5 0, #d9d9d9 100%);
    border: solid 1px #d0d0d0;
    text-overflow: ellipsis;
    overflow: hidden;
    display: flex;
    justify-content: center;
    font-size: .75em;
    align-items: center;
    border-color: rgba(0,0,0, .05);
}

body.dark-mode .app-footer {
    background: linear-gradient(#12121A, #121216);
    background: #1E1E25;
    background: #131313;
    color: lightgray;
}

.app-form-buttons {
    display: flex;
    align-items: center;
    padding-top: .5rem;
}
/*.slide-container > .app-form-buttons {
    margin-left:-1rem;
}*/
.app-form-buttons .actions {
    display: flex;
    align-items: center;
}
/*.filters-container .app-form-buttons {
    padding-top: 0 !important;
}*/
.filters-container .app-form-filters .app-form-field {
    padding-bottom: 7px !important;
}
/*.filters-container.form-attached {
    margin-top:-1.5rem;
}*/
.app-view > .app-form-header > button > .app-form-label {
    color:dimgray;
}
/*body.light-mode .app-form {
    box-shadow: 0 1px 20px 0 rgb(0 0 0 / 10%);
    border: solid 1px lightgray;
}*/
body.dark-mode .app-form {
    color: #C4D4D7;
    /*border: solid 1px rgba(0,0,0,.1);
    border: solid 1px rgba(0,0,0,.2);
    background-color: rgba(0,0,0, .05);*/
    /* background-color: #27293D;
    background: linear-gradient(#12121A, #121216) !important;*/
    /* border: solid 1px #121216;*/
    /* border:none;
    box-shadow:none;*/
}

.app-form-body .slide-container {
    position:relative;
}
.app-form-body .description-controls {
    position: absolute;
    top: 5px;
    right: 0px;
}

.app-form-header {
    display: flex;
    position: relative;
    align-items: flex-end;
    /* top: -25px;
    margin-left: 10px;*/
}
.app-form-header.form-attached {
    top:0px;
    justify-content: flex-end;
    position: absolute;
    right: 3rem;
}

.app-form-fields > .app-form-header {
    display: flex;
    position: relative;
    /* padding-bottom: .5rem; */
    align-items: center;
    /*margin-left: -17px;
    margin-right: -17px;*/
    padding-left: 2rem;
    padding-top: 20px;
    padding-bottom: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
    top: 0px;
    background: linear-gradient(to bottom, #0d6efd 0%,#7db9e8 100%);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-top: none;
    border-right: none;
    margin-bottom: .5rem;
    min-height: 141px;
    max-height: 200px;
}
.app-form-fields > .app-form-header.has-background-image {
    overflow: hidden;
    background: none;
}
body.dark-mode .app-form-fields > .app-form-header {
    border-bottom: none;
}
body.light-mode .app-form-fields > .app-form-header {
    border-bottom: none;
    border-radius: unset;
}

.app-form-buttons .navigation {
    display: flex;
    align-items: center;
}
/*.app-form-header .app-form-image-container.has-image {
    display:flex;
}*/

body.dark-mode .app-form-header .app-form-image-container {
   /* border: solid 1px #913f9e;
    background: linear-gradient( 60deg, #7b1fa2, #913f9e);
    color: white;*/
    /*background-image: linear-gradient(to bottom left,#344675,#263148,#344675);
   background-color: #344675;
    background-image: linear-gradient(to bottom left,#344675,#263148,#344675);
    background-color: #344675;*/
   /* border: 1px solid transparent;
    box-shadow: none !important;*/
}
body.dark-mode .app-form-header .app-form-image-container > div {
  /*  display:none !important;*/
    width:80px;
}
body.dark-mode .app-form-header .app-form-image-container > div.show {
    display:block !important;
}

.app-form-header .app-form-labels {
    flex:1;
    padding-left: .5rem;
}

.app-form-header .app-form-image-container img {
    max-width: 150px;
    max-height: 120px;
    vertical-align: middle;
    border-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .2s;
}
.app-form-header .app-form-image-container.has-image {
    border: none !important;
    background-color: transparent !important;
    background: none !important;
    /*min-width: unset;
    min-height: unset;*/
    z-index:1;
}
.app-form-header .app-form-image-container.has-image img {
    box-shadow: 0 4px 20px 0px rgb(0 0 0 / 14%), 0 7px 10px -5px rgb(100 100 100 / 40%);
}
.app-form-header .app-form-image-container.default-artwork img {
    box-shadow: none;
}

.app-form-header .app-form-label {
    font-weight: 500;
    margin-bottom: 10px;
    text-transform: uppercase;
    margin-left: 5rem;
    margin-bottom: 0;
    text-transform: none;
    flex: 1;
    margin-bottom: 0;
    text-transform: none;
    flex: 1;
    font-size: 1.125rem;
    line-height: 1.4em;
    color: dimgray;
    font-weight: 500;
    margin-left: 10px;
    position: relative;
    padding-bottom: 2px;
   /* top: -20px;*/
}
body.dark-mode .app-form-header .app-form-label {
    color:white;
}

.app-form-table .card-description-container {
    font-size: 1.2rem;
    border-bottom: solid 1px #2A2A30;
    border-bottom: solid 1px #444;
    border-bottom: solid 1px silver;
    display: flex;
    margin-bottom: 1rem;
    align-items: center;
}

.app-form-table  .record-display {
    display: flex;
    align-items: center;
}

.app-form-table .totalRecords {
    display: flex;
    align-items: center;
    margin-top: 0px;
    margin-bottom: 0px;
    /* margin-left: 7px; */
    margin-right: 30px;
    font-size: 1.125rem;
    line-height: 1.4em;
    /*    position: relative;
    top: -15px;
    left: -2px;*/
}
.app-form-table .totalRecords.form-attached {
    position: relative;
    top: 12px;
    margin-right: 0px;
}

.app-form-table .totalRecordsLabel {
    color: dimgray;
    color: whitesmoke;
    padding-left: 5px;
    opacity: .9;
}

.app-view .slide-container .filters-container {
    padding-top: 0.5rem;
}
.app-tab-view .slide-container .app-form-buttons {
    /*padding-top: 0px !important;*/
    padding-bottom: 0.5rem;
    /*padding-bottom: 1rem;*/
}

.app-tab-view .card-description-container {
    font-size: 1.2rem;
    border-bottom: solid 1px #2A2A30;
    border-bottom: solid 1px #444;
    padding-bottom: .2rem;
    display: flex;
    margin-bottom: 1rem;
    align-items: center;
   /* display:none !important;*/
}

.app-tab-view .app-form-header .record-display {
    display: flex;
    align-items: center;
}

.app-tab-view .app-form-header .totalRecords {
    display: flex;
    align-items: center;
    margin-top: 2px;
    margin-bottom: 0px;
    /* margin-left: 7px; */
    margin-right: 8px;
    font-size: 1.125rem;
    line-height: 1.4em;
    /*    position: relative;
    top: -15px;
    left: -2px;*/
}

.app-form-grid {
    display: flex;
    flex-wrap: wrap;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 2rem;
    padding-top: .5rem;
  /*  border-top: solid 1px rgba(100,100,100,.3);*/
}

    .app-form-grid .app-navigation-view.manage-view {
        margin-left: .5rem;
        margin-right: .5rem;
    }

.app-form-grid .list-view-groups {
    position:initial;
}
.app-form-grid .list-view-container {
    display:flex;
}

.app-tab-view .app-form-header .totalRecordsLabel {
    color: dimgray;
    padding-left: 5px;
}

.app-form-view .app-form-body {
    padding-top: 0rem;
    padding-bottom: .5rem;
}
.app-form-view .app-form-table .app-form-body {
    padding-top: 1rem;
    padding-bottom: 0rem;
}
.app-form-body.form-attached > .table-container {
    padding-top:1rem;
}

.app-form-grid .list-view-header {
    display: none;
}
.app-form-grid .app-navigation-view.list-view-container .list-view-body {
    padding:0;
    padding-bottom:.5rem;
}

/*body.dark-mode .app-view .table {
    background-color: #27293D;
    background: linear-gradient(#12121A, #121216) !important;
}*/
.app-view .table img {
    max-width: 200px;
    max-height: 60px;
    min-height: 45px;
    margin: 0.5rem;
    object-fit: contain;
}
.app-view .table-loader-bkgd {
    position: fixed;
    top: -1rem;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,.2);
    display: flex;
    flex-direction: column;
    z-index: 1;
    opacity: 0;
    transition: .3s;
    pointer-events: none;
    border-top-left-radius: 5px;
    z-index:5;
}
body.dark-mode .app-view .table-loader-bkgd {
    background-color: rgba(0,0,0,.4);
}
body.dark-mode .app-view .table-loader-bkgd.barely-show {
    background-color: rgba(0,0,0,.1);
}
body.dark-mode .app-view .table-loader-bkgd.no-show {
    background-color: rgba(0,0,0,0);
}
.app-view .table-loader-bkgd.show {
    opacity: 1;
   /* pointer-events: all;*/
}

.app-view .table-loader {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    z-index: 300;
    user-select: none;
    pointer-events: none;
    justify-content: center;
}

.app-form-field-series {
    display: flex;
    align-items: flex-end;
}
.app-form-field-series .series-end {
    display: flex;
    flex-direction:row !important; 
    align-items:center;

}
.app-form-field-series .series-end .app-form-field-label {
    padding-right:5px;
}
.app-form-field {
    display: flex;
    flex-direction: column;
    padding: .5rem 0;
    padding-top: 0;
    padding-bottom: .7rem;
    flex:1;
    position:relative;
}
.app-form-field.margin-right {
    margin-right:.5rem;    
}
.app-form-table .app-form-field {
    padding-bottom: .5rem;
}
.app-form-field.slim-padding {    
    padding-bottom: .1rem;
}
.app-form-field.no-padding {    
    padding-bottom: 0rem;
}
.app-field-group {
   /* flex: 1;*/
    padding-right: .5rem;
    padding-left: .5rem;
    display:flex;
}
.app-field-group.flex-row {
    padding-right: .5rem !important;
}
.app-page-row-data.groups .properties-groups {
    margin-right: .5rem;
}

.app-field-form-range {
    border-color: transparent !important;
}

body.dark-mode .app-form-field {
    color: whitesmoke;
}

.app-form-field-label-container {
    display:flex;
}

.app-form-field-image-container {
    display: flex;
    margin-bottom: 5px;
    padding-bottom: 0px;
    -webkit-user-select: none;
    display: flex;
    flex-direction: row;
    flex: 1;
    justify-content: center;
    border: solid 1px #444 !important;
    padding: 1rem;
    border-radius: 5px;
    overflow: auto;
    /* max-height: 53vh;*/ 
    min-height: 2.7rem;
}
body.dark-mode .app-form-field-image-container {
    border: solid 1px #444 !important;
}
body.light-mode .app-form-field-image-container {
    border: solid 1px silver !important;
}
body.light-mode .app-form-field-image-container:focus {
    border: solid 1px dodgerblue !important;
}
body.dark-mode .app-form-field-image-container:focus {
    border: solid 1px #0d6efd !important;
}
/*.app-form-field.app-form-field-image {
    padding-bottom:.2rem !important;
}
*/
.flex > .app-form-field {
    padding-right: .5rem;
    flex: 1;
}
.app-form-field-input {
    min-width: 125px;
    width: 100%;
    flex: 1;
}

.app-form-field-label {
    padding-bottom: 5px;
    padding-left: 3px;
    user-select: none;
    padding-left: 3px;
    text-transform: uppercase;
    font-size: .7rem !important;
    font-weight: 500;
    white-space: nowrap;
}

body.dark-mode .app-form-field-label {
    color: white !important;
}

.app-form-check.app-form-field {
    flex-direction: row;
    align-items: center;
    cursor: pointer;
}

.app-form-field-checkbox .app-form-check-input {
    margin-left: initial !important;
    width: .5em !important;
    height: 1em;
    padding: .5em;
    margin: 0;
    cursor: inherit;
}

.app-form-check .app-form-field-label {
    padding-bottom: 0;
    padding-left: 7px;
    cursor: inherit;
}

.app-form-content {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: auto;
}

.app-form-footer {
    padding-top: 0rem;
    padding-bottom: 0rem;
    display: flex;
    flex-direction:column;
    padding-left:.5rem;
    padding-right:.5rem;
}
/*.app-form-table .app-form-footer {
    padding-top:1rem;
}*/
.app-button label {
    margin-bottom: 0rem;
    font-weight: 500;
}
.app-button-rose {
    color: whitesmoke !important;
    background: linear-gradient( 20deg, #F13F60, #CF3E75) !important;
}


textarea {
    border: solid 1px silver;
    color: black;
    background-color: transparent;
    border-radius: 5px;
    outline: none;
    transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
    padding: .5rem 1rem;
    font-size: 1.1rem;
    min-height: 100px;
    border: solid 1px silver !important;
    padding: .7rem .5rem !important;
    border-radius: 5px !important;
    min-height: 150px;
    /*line-height: 1.6rem;*/
}

textarea:focus {
    border-color: dodgerblue !important;
}

body.dark-mode textarea {
    color: white !important;
    border: solid 1px #444 !important;
}
body.dark-mode textarea:focus {
    border-color: #0d6efd !important;
}
body.dark-mode textarea::placeholder {
    color: lightgray !important;
    font-size: .9rem !important;
}
body.light-mode textarea {
    background-color:white;
}


textarea[disabled],
textarea[readonly] {
    cursor: default !important;
}

body.light-mode textarea[disabled],
body.light-mode textarea[readonly] {
    background-color: whitesmoke !important;
    color: dimgray !important;
}

body.dark-mode textarea[disabled],
body.dark-mode textarea[readonly] {
    background-color: #1d253b !important;
    color: #344675 !important;
}

input {
    border: solid 1px silver;
    border-radius: 5px;
    outline: none;
    /* transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;*/
    transition: color 0.3s, border-color 0.3s, background-color 0.3s;
    padding: 7px .5rem;
    font-size: 1.1rem;
}

body.light-mode select {
    color: black;
}
body.light-mode input {
    color:black;
}
    body.light-mode input:focus {
        border-color: dodgerblue;
    }

.form-check-input[type=radio] {
    padding:0 !important;
}

body.dark-mode input:not(.w-button, .w-input, .form-check-input),
body.dark-mode .app-form-field-input-proxy {
    border: solid 1px #444;
    color: whitesmoke;
    background-color: transparent;
    padding: .7rem .5rem;
    border-radius: 5px;
    font-size: 1.1rem;
}

body.dark-mode input.w-input {
    border: solid 1px #444;
}

body.dark-mode input:focus:not(.form-check-input),
body.dark-mode .app-form-field-input-proxy:focus,
body.dark-mode .app-form-field-input-proxy.focus,
body.dark-mode .app-form-field-input-proxy.focused {
    border-color: #e14eca;
    border-color: #0d6efd;
}


input[disabled], input[readonly] {
    background-color: lightgray;
    color: dimgray;
    border-color: silver;
}
body.light-mode input[disabled], body.light-mode input[readonly] {
    background-color: lightgray;
    color: dimgray;
    border-color: silver;
}

body.dark-mode input[disabled], body.dark-mode input[readonly] {
    color: rgb(105, 105, 105);
    background-color: rgba(100,100,100,.1);
    color: rgba(255, 255, 255, .7);
    background-color: rgba(100, 100, 100, .2);
}

body.dark-mode input[type=checkbox][disabled], body.dark-mode input[type=checkbox][readonly] {
    background-color: rgb(105, 105, 105) !important;
    border-color: rgb(105, 105, 105);
}

.app-form-buttons-row {
    position: relative;
    top: -7px;
}
.app-form-buttons-row .app-icons i.material-icons {
    
    font-size: unset;
    position: relative;
    top: 1px;
}

.flex {
    display: flex;
    flex-wrap: wrap;
}

button {
    background:none;
    background-color: transparent;
    border: 1px solid transparent;
    outline: none !important;
}

.app-buttons {
    /*padding-bottom:.5rem;*/
}
.app-button {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    color: #525f7f;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: initial;
    padding: 11px 40px;
    font-size: .875rem;
    line-height: 1.35em;
    border-radius: 5px;
    border: none;
    position: relative;
    overflow: hidden;
    margin: 4px 2px;
    cursor: pointer;
    /* background-size: 210% 210%;
    background-position: 100% 0;*/
    /*    background: #e14eca;
    background-image: linear-gradient(to bottom left,#e14eca,#ba54f5,#e14eca);
    background-size: 210% 210%;
    background-position: 100% 0;
    background-color: #e14eca;
    transition: all .15s ease;
    box-shadow: none;
    color: #fff;
    margin: 0 .1rem;*/
    position: relative;
    outline: none;
    padding-right: 2rem;
    padding-left: 2rem;
    border-color: #e14eca;
    border-radius: 5px;
    font-size: 1.1rem;
    background: linear-gradient(#EEEEEE, #CFCFCF);
    border: solid 1px silver;
    color: #181818;
    font-weight: 500;
    transition: .2s;
    font-weight: 500 !important;
    overflow: visible;
    /*border: 1px solid transparent;*/
    background: lightgray;
    flex-wrap: nowrap !important;
}

body:not(.mobile-device).light-mode .app-button:hover {    
    background: silver;
}
/*body.light-mode .app-button:focus {
    background: #0d6efd;
    border-color: #0d6efd;
    color: white;
    text-shadow: -1px 1px 2px rgb(0, 0, 0);
}
body.no-shadow .app-button:focus {
    text-shadow: none;
}
body.light-mode .app-button.focused {
    background: #0d6efd;
    border-color: #0d6efd;
    color: white;
    text-shadow: -1px 1px 2px rgb(0, 0, 0);
}*/
/*body.no-shadow .app-button.focused {
    text-shadow: none;
}*/
body.light-mode .app-button:active {
    border-color: #0d6efd;
    background: rgba(0, 105, 217, .7);
    color: white;
    text-shadow: -1px 1px 2px rgb(0, 0, 0);
}
body.no-shadow .app-button:active {
    text-shadow: none;
}

body:not(.mobile-device) .dark-mode .app-button:hover {
    background: #0d6efd;
    border-color: #0d6efd;
    color:white;
    opacity:1;
}
/*body.dark-mode .app-button:focus {
    background: #0d6efd;
    border-color: #0d6efd;
    color: white;
    opacity: 1;
}
body.dark-mode .app-button.focused {
    background: #0d6efd;
    border-color: #0d6efd;
    color: white;
    opacity: 1;
}
*/
body.dark-mode .app-button:active {
    border-color: #0d6efd;
    background-color: rgba(0, 102, 153, .7);
    color: white;
    text-shadow: -1px 1px 2px rgb(0, 0, 0);
}
body.no-shadow .app-button:active {
    text-shadow: none;
}


.app-button-append {
    /*background: #802091 linear-gradient( 180deg, #9342a1, #802091) repeat-x;
    */
    /* box-shadow: none; */
    /* color: #fff; */
    /* background: linear-gradient(#EEEEEE, #CFCFCF); */
    /* color: black !important; */
    /* font-weight: 300; */
    /* border: 1px solid lightgray; */
    display: flex;
    /*padding: 0.5rem 0.7rem;*/
    /* border-radius: 3px; */
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    height: 100%;
    align-items: center;
    justify-content: center;
    width: 46px;
    /* border-left: none; */
    border: solid 1px #444;
    border-left-color: rgb(33, 37, 41);
    color: white;
}
/*body.dark-mode .app-button-append {
    border-color: lightgray;
    border-color: #444;
}*/
body.light-mode .app-button-append {
    background: linear-gradient(#EEEEEE, #CFCFCF);
    border-color: silver;
    color: gray;
    width: 45px;
}
.app-form-field-append-container .input-group input {
    border-right:none !important;
}
body .light-mode .app-form-field-append-container:focus .app-button-append {
    background-color: #0d6efd !important;
    background: #0d6efd !important;
    color: white;
    transition-delay: 0;
    border-color: #0d6efd;
}
body.light-mode .app-form-field-append-container.focused .app-button-append {
    background-color: #0d6efd !important;
    background: #0d6efd !important;
    color: white;
    transition-delay: 0;
    border-color: #0d6efd;
}
body:not(.mobile-device).light-mode .app-form-field-append-container .app-button-append:hover {
    opacity: 1;
}
/*body.light-mode .app-form-field-append-container .app-button-append:focus {
    opacity: 1;
    background-color: #0d6efd !important;
    background: #0d6efd !important;
    color: white !important;
    transition-delay: 0;
    border-color: #0d6efd;
}
body.light-mode .app-form-field-append-container .app-button-append.focused {
    opacity: 1;
    background-color: #0d6efd !important;
    background: #0d6efd !important;
    color: white;
    transition-delay: 0;
    border-color: #0d6efd;
}*/
body.light-mode .app-form-field-append-container .app-button-append:active {
    opacity: .8;
}
.app-form-field-append-container .app-form-field-input {
    border-right:none;
    border-top-right-radius:0px;
    border-bottom-right-radius:0px;
}

/*.app-button-secondary {
    background: unset !important;
    font-weight: 500 !important;
    color: #fff !important;
    background-color: dimgray !important;
}
*/
.app-button label {
    font-size: inherit !important;
}

.app-button-fade {
    opacity: .7;
    transition: .2s opacity;
}
body:not(.mobile-device) .app-button-fade:hover,
.app-button-fade:focus {
    opacity: 1;
}

app-button-fade:active {
    opacity: .8 !important;
    transition-delay: 0;
}

.app-button.disabled, .app-button:disabled {
    color: dimgray !important;
    border-color: #1C1C22 !important;
    background-color: #1C1C22 !important;
    background-image: none !important;
    opacity: 0.65 !important;
    box-shadow: none !important;
    cursor: default !important;
    top: 0 !important;
}
    .app-button i {
        position: relative;
        top: 0px;
    }
    
.app-icons-reverse i {
    padding-left: 5px;
    font-size: 1rem;
    position: relative;
   /*  top: -1px; */
}
.app-icons-reverse i.material-icons {
    padding-left: 5px;
    font-size: 1.4rem;
    position: relative;
   /* top: 2px;*/
}
.app-icons i:not(.material-icons) {
    padding-right: 5px;
    font-size: 1rem;
    position: relative;
    /*  top: -1px; */
}
.app-icons i.material-icons {
    /*padding-right: 5px;*/
    /* font-size: 1.4rem;*/
    font-size: 1rem;
    position: relative;
    /* top: 2px;*/
}
table .app-icons i.material-icons {
    font-size:unset;
}

button.app-button-xsm i {
    font-size: .8rem;
}
button.app-icons.app-button-xsm i:not(.material-icons) {
    font-size: .8rem;
}

.app-icon-span.app-icons i {
    padding-right: 7px;
    font-size: 1.1em;
    position: relative;
    /* top: -1px; */
}
.app-navigation-spinner {
    background-color: transparent;
    border: 1px solid transparent;
    outline: none;
    background: none;
    padding: 0;
    /*transition: .2s;*/
    position: relative;
    height: 1.5rem;
    width: 1rem !important;
    text-align: center;
}
.app-navigation-spinner i {
    padding:0 !important;
}
.app-navigation-item.expanded > a > .app-navigation-spinner {
    transform: rotate( 90deg) ;
}

.app-navigation-item.no-items .app-navigation-spinner {
    opacity: 0;
    pointer-events:none;
}

body.dark-mode .app-button {
    background-color: #344675;
    background: linear-gradient(to bottom left,#344675,#263148,#344675);
    background: #802091 linear-gradient( 180deg, #9342a1, #802091) repeat-x;
    box-shadow: none;
    color: #fff;
    font-weight: 300;
    border: 1px solid transparent;
    background: #444;
    /*background: #222;*/
    border: 1px solid #444;
    /* background: rgb(33, 37, 41);
    border: 1px solid rgb(33, 37, 41);*/
}

.app-button-sm {
    font-size: .8rem !important;
    padding: .6rem 1.2rem;
}
.app-button-smx,
.app-button-xsm {
    font-size: .7rem !important;
    padding: .5rem 1rem;
}
.app-button-smxx,
.app-button-xxsm {
    font-size: .6rem !important;
    padding: .4rem .8rem !important;
}

.app-button-invisible {
    background-color: transparent !important;
    border: 1px solid transparent !important;
    outline: none;
    background: none;
}

body.dark-mode .app-button.app-button-invisible {
    background-color: transparent !important;
    border: 1px solid transparent !important;
    outline: none;
    background: none;
}
/*
button:hover {
    opacity: 1;
}

button:active {
    opacity: .9;
}
*/
/*.app-button-bounce:hover {
    transform: translateY(-2px);
    -webkit-transform: translateY(-2px);
}

.app-button-bounce:active {
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
}
*/
button i {
    /*padding-right: 3px;*/
    cursor: inherit;
}

button label {
   /* padding-left: 3px;*/
    cursor: inherit;
}
button i + label {
    margin-left: 3px;
}

.app-form-field-checkbox input[type=checkbox] {
    width: 20px;
    height: 20px;
}

select:not(.pika-select) {
    background-color: transparent;
    border: none;
    outline: none;
    border: solid 1px lightgray;
    transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
    padding: .6rem 1rem;
    padding-left: 0.5rem;
    font-size: 1.1rem;
    border-radius: 5px;
    /*box-sizing: content-box;*/
}

body.dark-mode select:not(.pika-select) {
    color: whitesmoke;
    border: solid 1px #444;
}

.app-form-select {
    background-color: transparent;
    border: none;
    outline: none;
    border: solid 1px lightgray;
    transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
    font-size: 1.1rem;
    border-radius: 5px;
    padding: 0.45rem 1rem;
    padding-left: 0.5rem;
}

body.dark-mode .app-form-select {
    color: whitesmoke;
    border: solid 1px #444;
    /*background-color: rgba(66,66,66,.3);*/
}
/*body.dark-mode .app-form-select:not(:disabled) {
    background-color: #333 !important;
    background: linear-gradient(rgba(20,20,20,.1), rgba(20,20,20,.7));
}*/

.app-form-select:focus {
    box-shadow: none;
    border-color: #0d6efd;
}

body.dark-mode .app-form-select:focus {
    border-color: #0d6efd !important;
}
body.light-mode .app-form-select:focus {
    border-color: dodgerblue !important;
}

.app-form-switch .app-form-check-input {
    margin-left: 0 !important;
}

.app-form-switch .app-form-check-label {
    position: relative;
    top: 2px;
    opacity: .8;
    transition: .2s;
}

body:not(.mobile-device) .app-form-switch .app-form-check-label:hover {
    opacity: 1;
}
/*.app-form-field-select {
    margin-right: .5rem;
}
*/



.app-form-status {
    display: flex;
    flex: 1;
}


.form-check.app-body-header-dark-mode {
    text-transform: uppercase;
    /*top: 3px;*/
    /* position:relative;*/
   /* padding-right: 1.5rem !important;*/
    font-size: .7rem !important;
}
.app-body-header-dark-mode .app-form-field-label {
    padding-left: 5px;
    font-size: .7rem !important;
}
.app-body-header-dark-mode .form-check-input {
    width: 25px !important;
    height: 12px !important;
}

body.dark-mode .app-body-header-dark-mode .app-form-field-label {
    color: dimgray;
}



.app-form-status {
    font-weight: 500;
    /*  padding: .5em;*/
    padding-bottom: 0;
    display: flex;
    align-items: baseline;
    flex: 1;
    padding: .5rem;
    padding-left: 1rem;
    padding-right: 1rem;
}
body.dark-mode .app-form-status {
    color: white;
}


    .app-form-status > .app-form-status-status {
        padding: 1em;
        padding-bottom: .5em;
        background-color: firebrick;
        color: white;
        font-weight: 500;
        border: solid 1px darkred;
        border-radius: 5px;
    }

        .app-form-status > .app-form-status-status > ul {
            margin-left: 1.5em;
        }

            .app-form-status > .app-form-status-status > ul > li {
                display: list-item;
                list-style: disc;
                margin: 0;
                padding: 0;
            }

    .app-form-status > .app-form-status-summary {
        padding-left: .5em;
        padding-right: .5em;
    }

.app-form-status > .app-form-status-message {
    margin-bottom: 0;
    padding-left: .5em;
    position: relative;
    top: -2px;
    font-style: italic;
}
/* Loading indicator */
.app-form-status-spinner, .loader, .loading-spinner {
    /*border: 1px solid darkgray;*/
    /* Light grey */
    border-top: 1px solid #0079CB;
    /* Blue */
    border-radius: 100%;
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    max-width: 16px;
    max-height: 16px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


.app-form-view.player {
    padding: 1rem;
}

.app-view {
    display: flex;
    flex-direction: column;
}
.app-view.artwork {
    height: 100%;
}
.app-view.description {
    height: 100%;
}
.app-view.tagline {
    height: 100%;
}
.app-view.subtitles {
    height: 100%;
}

.app-form-body {
    padding: 0rem .5rem;
    padding-top: .5rem;
    overflow: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
}

body:not(.mobile-device) .table-hover > tbody > tr.empty-row:hover {
    --bs-table-accent-bg: unset;
    color: unset;
}

.app-tab-view .app-form {
    margin: 0 !important;
    padding: 0 !important;
    margin-top: 4rem !important;
    border: none !important;
}
.app-tab-view .app-form.app-form-table {
    margin-top: -.5rem !important;
    box-shadow:none !important;
    position: relative;
}
.app-tab-view .app-form.app-form-table .app-form-header .app-form-image-container {
    min-width: 50px;
    min-height: 55px;
}
.app-tab-view .app-form.app-form-table .table-container {
    margin-left: -.5rem !important;
    margin-right: -.5rem !important;
}

body.light-mode .app-tab-view .table-container tbody tr {
    border-bottom: solid 1px lightgray;
}

.app-tabs {
    border-radius: 0.1875rem;
    border-radius: 5px;
    padding: 0.9375rem;
    margin-bottom: 1.2rem;
    margin-bottom: .5rem;
    padding: .5rem;
    margin-top: 0;
    padding-top: 0px;
}

body.light-mode .app-tabs {
    /* background: linear-gradient( 
60deg, #7b1fa2, #913f9e); */
    /* background: linear-gradient(#EEEEEE, #CFCFCF); */
    border: solid 1px lightgray;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
}
body.dark-mode .app-tabs {
    /* background: linear-gradient( 60deg, #7b1fa2, #913f9e);*/
    color: white;
    /* box-shadow: 0 4px 20px 0px rgb(0 0 0 / 14%), 0 7px 10px -5px rgb(156 39 176 / 40%);
    border: solid 1px lightgray;
    border-color: #7b1fa2 !important;*/
    /* background-image: linear-gradient(to bottom left,#344675,#263148,#344675);
    background-color: #344675;*/
    /*border: 1px solid transparent !important;*/
    border-bottom: 1px solid rgba(100,100,100, .5);
    border-radius:0;
}
body.light-mode .app-tabs {
    margin-bottom: .8rem;
}

.app-tabs ul {
    display: flex;
    flex-wrap: wrap;
}

app-tab-item {
    padding-top:3px;
}

.app-tab-item a {
    /*border-radius: 0.25rem;*/
    text-transform: uppercase;
    font-size: 0.75rem;
    padding: 0.625rem 0.9375rem;
    transition: 0.3s background-color 0s;
    font-weight: 500;
    transition: 0.2s;
    display: flex;
    align-items: center;
    color: dimgray;
    user-select: none;
    cursor: pointer;
    margin: 0px;
    border-radius: 0px;
}
.app-tab-item:first-of-type a {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.app-tab-item:last-of-type a {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

body:not(.mobile-device) .app-tab-item a:hover {
    background-color: rgba(0,0,0,.1);
    /*color: dimgray;*/
}

body:not(.mobile-device).dark-mode .app-tab-item a:hover {
    background-color: rgba(255, 255, 255, 0.3);
    color: whitesmoke;
}

.app-tab-item a:active,
.app-tab-item.selected a {
    background-color: rgba(0,0,0,.3);
    color: white;
    background-color: #0d6efd !important;
    border-color: #0d6efd;
    color: white !important;
}


body.dark-mode .app-tab-item a:active,
body.dark-mode .app-tab-item.selected a {
    background-color: #0d6efd;
    color: white;
}

    .app-tab-item a i {
        padding-right: 5px;
        cursor: inherit;
    }

        .app-tab-item a i.fal, .app-tab-item a i.fa {
            /*font-size: 22px;*/
        }

a i {
    cursor: inherit;
}

a span {
    user-select: none;
    cursor: inherit;
}

a label {
    user-select: none;
    cursor: inherit;
}


body.dark-mode .app-tab-item a {
    color: white;
}

.app-form-filters {
    display: flex;
    flex-wrap: wrap;
}


    .app-form-filters .app-form-field-label {
        padding-bottom: 5px;
        padding-left: 3px;
        user-select: none;
        padding-left: 5px;
        text-transform: uppercase;
        font-size: .7rem;
        font-weight: 500;
        color: dimgray;
    }

.app-form-buttons .app-button {
    font-size: 0.9rem;
    text-transform: uppercase;
    font-weight: 500;
    font-size: .8rem !important;
    padding: .7rem 1rem;
}
.app-form-buttons .app-button i.material-icons {
    font-size: 18px;
}

/*
.app-form-buttons .app-button:hover,
.app-form-buttons .app-button:focus,
.app-form-buttons .app-button.focused {
    top: -1px;
}

.app-form-buttons .app-button:active {
    top: 0px;
}
*/
.app-form-actions .app-button {
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 500;
}
.app-form-actions .app-button i.material-icons {
font-size: 18px;
}

.filters-container .card-description-container {
    font-size: 1.2rem;
    border-bottom: solid 1px #2A2A30;
    border-bottom: solid 1px #444;
    border-bottom: solid 1px #d0d0d0;
    display: flex;
    margin-bottom: 1rem;
    align-items: center;
    margin-right: 2rem;
    margin-right: 0rem;
    padding-bottom: 0.2rem;
}
.filters-container .card-description-container .card-description-label {
    flex:1;
}
body.dark-mode .filters-container .card-description-container {
    border-bottom: solid 1px rgba(100,100,100,.3);
}
.app-body .slide-container {
    position: relative;
    padding-bottom: 1.3rem;
    padding-bottom: .5rem;
    padding-top: 1rem;
    /* margin-left:-1rem;
    margin-right:-1rem;*/
}
/*.app-form-body > .slide-container {
     margin-left:-1rem;
    margin-right:-1rem;
}
*/
.app-body .card-description-container .card-description-label {
    flex: .8;
    color: dimgray;
    line-height: 1.4;
    text-transform: uppercase;
    font-size: .7rem;
    letter-spacing: 3px;
    padding-bottom: 7px;
}

.app-body .description-controls {
    position: absolute;
    top: -26px;
    right: 21px;
    display: flex;
    align-items: center;
}

.app-body .grid-button {
    transition: .3s;
    padding: .5rem;
}

.app-body .card-description-slider {
    padding: .5rem;
}
body.light-mode .app-body .card-description-slider {
    color: dimgray;
}

.app-body .hide-filters .card-description-slider > i {
    transform: rotateZ( 180deg );
    transition: .3s;
}

.app-paginator {
    display: flex;
    align-items: center;
    padding-bottom: .5rem;
    padding-right: .5rem;
    padding-left: .5rem;
    justify-content: flex-end;
}

    .app-paginator .app-pagination {
        display: flex;
        align-items: center;
    }

        .app-paginator .app-pagination .row-count-container {
            display: flex;
            align-items: center;
        }

        .app-paginator .app-pagination .navigation {
            display: flex;
            align-items: center;
        }

        .app-paginator .app-pagination .navigation .app-button-icon {
            padding: 7px 15px;
        }
        
        .app-paginator .app-pagination .row-count-title {
            font-size: .875rem;
            font-weight: 500;
        }

        .app-paginator .app-pagination .row-count {
            max-width: 50px;
            margin-right: 10px;
            margin-left: 10px;
            text-align: center;
            padding-left: 0;
            padding-right: 0;
            font-size: 14px;
        }

        .app-paginator .app-pagination .app-button {
            font-size: .8rem;
            padding: .5rem 1rem;
            margin: 0;
        }

.app-form-filters .filter-group {
    padding-left: 10px;
    padding-right: 10px;
    padding-left: 0px;
    padding-right: 20px;
    padding-right: 0px;
}

.flex-row {
    display: flex;
    align-items: center;
    flex-wrap:wrap;
}
.flex-row.justify-start {
    justify-content:flex-start;
}
.flex-row.justify-content-end {
    justify-content:end;    
}
.padding-bottom {
    padding-bottom:.5rem;
}
.padding-bottom-xsm {
    padding-bottom: .2rem;
}

.flex-row-group {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.flex-end-row-container {
    display:flex;
    align-items:flex-end;
}
.flex-end-row-container .app-form-field {
    padding-right: 0;    
}

.app-form-select.fit-content {
    width:fit-content !important;
}

.flex-row-container {
    padding-right: 1rem;
    flex: 1;
    max-width: 50%;
}

    .flex-row-container:last-of-type {
        padding-right: 0 !important;
        margin-right: 0 !important;
    }

.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;
}

.filter-group .app-form-checkbox {
    padding-top: 5px;
    left: -13px;
}

    .filter-group .app-form-checkbox div {
        color: dimgray !important;
        font-size: .8rem !important;
        user-select: none;
    }


.form-switch .form-check-input {
    margin-left: 0 !important;
    margin: 0 !important;
    float: none !important;
}

.form-check {
    margin: 0 !important;
    min-height: unset;
   /* padding: 0 !important;*/
}

.app-form-field.form-check {
    display: flex;
    align-items: center;
    flex-direction: row;
    flex: inherit;
}

.app-form-fields .app-form-field.form-check {
    padding-right: 1.5rem !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    position: relative;
    top: -1px;
    padding-left: 4px !important;
    flex:0;
}
.app-form-fields .app-tab-view.app-form-table .app-form-field.form-check {
    padding:0 !important;
    top:-3px;
}
.app-form-fields .app-form-table .app-form-field.form-check {
    padding: 0 !important;
    top: -3px;
}
.app-form-fields .app-form-field.form-check.add-padding {
    padding-bottom: 0.7rem !important;
}

.app-view .table .app-form-field.form-check {
    flex-direction: column;
    justify-content: center;
}

.app-form-field.form-check .app-form-field-label {
    padding-bottom: 0px !important;
    margin-bottom: 0px !important;
    padding-left: .5rem;
}

.app-header {
    display: flex;
    flex-direction: column;
    /*  display:none;*/
    background: #111C25;
    background: #191919;
}

body.dark-mode .app-header {
    background:black;
}

/*
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, .col-xl-auto {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

@media (min-width: 1200px) {
    .col-xl-4 {
        flex: 0 0 33.33333%;
        max-width: 33.33333%;
    }
}
*/
body:not(.mobile-device).light-mode .table-hover > tbody > tr:hover {
    --bs-table-accent-bg: transparent !important;
    color: var(--bs-table-hover-color);
}

.app-view .table th {
    font-weight: 500 !important;
    cursor: pointer;
    color: inherit;
}
body.dark-mode .app-view .table th {
    color: white !important;
}
.datepicker table th {
    color: black !important;
}
.pika-single abbr[title] {
    border-bottom: none;
    text-decoration: none !important;
    cursor:default !important;
    font-weight:500 !important;
}
/*
.app-view .table-container .table tbody tr {
    transition: .2s;
}*/
/*body.dark-mode .app-view .table-container .table tbody tr {
    background-color: #202940;
}
body.light-mode .app-view .table-container .table tbody tr {
    background-color: white;
    border-bottom: solid 1px lightgray;
}*/


.app-view .table td.right, .card table th.right {
    text-align: right;
}
.app-view .table td.center, .card table th.center {
    text-align: center;
}
.app-view .table td.delete, .app-view .table th.delete {
    text-align: center;
    width: 60px;
}
.app-view .table td.actions, .app-view .table th.actions {
    text-align: center;
    min-width: 180px;
    white-space: nowrap;
}
.app-view .table td.select, .app-view .table th.select {
    text-align: center;
    width: 60px !important;
    padding-left:0px;
    padding-right:0px;
}
.app-view .table td, .app-view .table th, .app-view .table-all td, .app-view .table-all th {
    /*vertical-align: baseline;*/
    vertical-align: inherit;
}
.app-view .table td.thumblogo, .app-view .table th.thumblogo {
    text-align: center;
    /*vertical-align: baseline;*/
width:30px;
}
.app-view .table td.thumbnail, .app-view .table th.thumbnail {
    text-align: center;
    vertical-align: middle;
width:60px;
min-width:60px;
}
.app-view .table td.thumbnail .svg {
    padding-top:10px;
    padding-bottom:10px;
}
.app-view .table td.thumbnail .svg svg {
    width: 100%;
    max-height: 55px;
}
.app-view .table td.ellipsis, .app-view .table th.ellipsis {
    /*vertical-align: middle !important;*/
}
    .app-view .table td.thumblogo {
        min-height: 20px;
        min-width: 20px;
        padding: 0 !important;
    }
.app-view .table td.thumblogo .row-artwork
{
    padding:0 !important;
    position:relative;
display:inline-block;
}
.app-view .table td.thumblogo .row-artwork > img
{
    max-width:30px;
    margin: 0;
    margin-top:.5rem;
}
.app-view .table td.thumblogo .row-artwork.thumblogo-list > img {
    margin:0;
}
.app-view .table td.thumbnail
{
    min-height: 20px;
    min-width: 20px;
    padding-top: 0!important;
    padding-bottom: 0 !important;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
}
.app-view .table td.thumbnail .row-artwork
{
    padding:0 !important;
    position:relative;
    display:inline-block; 
    min-height: 68px;
}
.app-view .table td.thumbnail .row-artwork > img
{ 
    margin: .5rem;
    box-shadow: 0 5px 8px 0 rgb(0 0 0 / 10%), 0 3px 10px 0 rgb(0 0 0 / 10%) !important;
}
.app-view .table td.thumbnail .row-artwork > img.default-artwork
{ 
    box-shadow: none !important;
}
.app-view .table td.thumbnail .row-artwork.thumbnail-list > img {
    margin:0;
}
.app-view .table td.thumbnail .row-artwork > div.preview {
    opacity:0;
    cursor:pointer;
    transition:.1s ease-in-out;
}
body:not(.mobile-device) .app-view .table td.thumbnail .row-artwork > div.preview:hover {
    opacity: 1;
}
.app-view .table td.thumbnail .row-artwork > div.preview:active {
    opacity:.7;
}
    .app-view .table td.thumbnail .row-artwork > div.preview > div.bkgd {
        position: absolute;
        background-color: #373737;
        opacity: .3;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
    }
.app-view .table td.thumbnail .row-artwork > div.preview > div.ctnr {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.app-view .table td.thumbnail .row-artwork > div.preview > div.ctnr > i {
    color: whitesmoke;
    position:relative;
    top:-1px;
    font-size:2rem;
}
.app-view .table td a,
.app-view .table td span,
.app-view .table td label {
    font-size:.9rem;
}
.app-view .table td button label {
    font-size: inherit;
}
body.dark-mode .app-view .table td a,
body.dark-mode .app-view .table td span,
body.dark-mode .app-view .table td label {
    color: white;
}
body.dark-mode .app-view .table td.nowrap a {
    white-space:nowrap;
}
/*
.app-view .table td.center .form-checkbox:not(.select) {
    left: 10px;
}
*/
.app-view .table th {
    vertical-align: middle;
    text-transform: uppercase;
    font-size: .8rem;
    font-weight: 500 !important;
    cursor: default;
    border-top: solid 1px;
    border-bottom: solid 1px;
    vertical-align: middle;
    white-space: nowrap;
    border-color: lightgray;
    border-bottom-color: lightgray !important;
}

.app-view .table thead th.sort {
    cursor: pointer;
}


body.light-mode .app-view .table thead th {
    background-image: linear-gradient(to bottom, lightgray, gainsboro);
    /*border-right: solid 1px silver;*/
}
body:not(.mobile-device).light-mode .app-view .table thead th.sort:hover {
    background-image: linear-gradient(to bottom, gainsboro, lightgray);
}

body.light-mode .app-view .table tbody tr {
    border-bottom: solid 1px lightgray;
}
body:not(.mobile-device).light-mode .app-view .table tbody tr.sort:hover {
    --bs-table-accent-bg: rgba(154,181,213,.1) !important;
}

body.dark-mode .app-view .table th {
    color: dimgray;
    border-color: rgba(0,0,0,.3) !important;
    background: rgba(0,0,0,.3) !important;
}
.app-view .table th > div {
    display: flex;
    justify-content: left;
    align-items: center;
}

    .app-view .table th > div i {
        padding-left: 10px;
        display: none;
        padding-left: 8px;
        display: none;
        position: relative;
        cursor:pointer;
    }

    .app-view .table th > div.sort-up.show i {
        display: flex;
    }

    .app-view .table th > div.sort-down.show i {
        display: flex;
    }

.app-view .table th.center {
    text-align: center;
}

    .app-view .table th.center > div {
        justify-content: center;
    }

.app-view .table th.right {
    text-align: right;
}

    .app-view .table th.right > div {
        justify-content: right;
    }

.app-view .table td {
    vertical-align: middle;
    font-size: 1.1rem;
    word-break: break-all;
}

.app-view .table td.nowrap {
    word-break:keep-all;
    white-space:nowrap;
}
.app-view .table td.no-wrap {
    word-break: keep-all;
    white-space:nowrap;
}

body.dark-mode .app-view .table td {
    color: white;
}

body.dark-mode .app-view .table td {
    color: dimgray;
    border-color: rgba(180, 180, 180, 0.1) !important;
    border-top: solid 1px;
    border-bottom: solid 1px;
}

    body.dark-mode .app-view .table td a {
        color: white !important;
        cursor: pointer;
    }

body:not(.mobile-device) .app-view .table td a:hover,
.app-view .table td a:focus {
    text-decoration: underline !important;
}

.app-view .table td.center {
    text-align: center;
}

.app-view .table td.right {
    text-align: right;
}

body.dark-mode .app-view .table tr {
    border-left: 1px solid transparent !important;
    border-right: 1px solid transparent !important;
}
body.dark-mode .app-view .table tr.selected {
    color: #212121 !important;
    /* background-color: rgba(0,0,0,.3) !important; */
    background-color: rgba(154,181,213,.1) !important;
    border-left: 1px solid #0d6efd !important;
    border-right: 1px solid #0d6efd !important;
}
body.light-mode .app-view .table tr.selected {
    color: #212121 !important;
    /* background-color: rgba(0,0,0,.3) !important; */
    background-color: rgba(154,181,213,.1) !important;
    border-left: 1px solid dodgerblue !important;
    border-right: 1px solid dodgerblue !important;
}

.app-view .table-container {
    /*margin-left: -2rem;
    margin-right: -2rem;*/
    /*margin-left: -1.5rem;
    margin-right: -1.5rem;*/
    height: 100%;
}
.list-view-body .table-container {
  /*  margin-left: -.5rem;
    margin-right: -.5rem;*/
    width: 100%;
}
.app-tab-view .table-container {
    /*   margin-left: 0rem;
    margin-right: 0rem;*/
    margin-bottom: 0.5rem;
    overflow: auto;
    position: relative;
    height: 100%;
    border: solid 1px rgba(100,100,100,.3);
}
.app-tab-view .table-container .table {
    position: absolute;
}

.form-check .form-check-input {
    margin-left: 0 !important;
    margin-top: 0 !important;
}

.app-view .table td.xxx-small {
    min-width: 5px;
}

.app-view .table td.xx-small {
    min-width: 25px;
}

.app-view .table td.x-small {
    min-width: 50px;
}

.app-view .table td.select {
    min-width: 75px;
}

.app-view .table td.small {
    min-width: 110px;
}

.app-view .table td.medium {
    min-width: 200px;
}

/*.app-view .table td.date {
    min-width: 200px;
}
*/
.app-view .table td.date-time {
    min-width: 250px;
}

.app-view .table td.expand {
    width: 100%;
}

.app-view .table td.italics {
    font-style: italic;
}

.app-view .table td.spacer {
    display: table-cell !important;
}




.app-view .table th.xxx-small {
    min-width: 5px;
}
.app-view .table th.xx-small {
    min-width: 25px;
}

.app-view .table th.x-small {
    min-width: 50px;
}

.app-view .table th.select {
    min-width: 75px;
}

.app-view .table th.small {
    min-width: 110px;
}

.app-view .table th.medium {
    min-width: 200px;
}
.app-view .table th.large {
    min-width: 400px;
}

/*.app-view .table th.date {
    min-width: 200px;
}
*/
.app-view .table th.date-time {
    min-width: 250px;
}

.app-view .table th.expand {
    width: 100%;
}

.app-view .table th.italics {
    font-style: italic;
}

.app-view .table th.spacer {
    display: table-cell !important;
}


.app-view .table thead tr th > div {
    white-space: nowrap;
    font-size: .8rem !important;
    text-transform: uppercase;
    font-weight: 700;
    position: relative
}
body.dark-mode .app-view .table thead tr th > div {
    color: whitesmoke;
}
.app-view .table thead tr th > div.sort-up,
.app-view .table thead tr th > div.sort-down {
    cursor:pointer;
}
.app-view .table thead tr th > div.sort-up i {
    font-size: 1.2rem;
    top: 3px;
    margin-left: .5rem;
}
.app-view .table thead tr th > div.sort-down i {
    
    font-size: 1.2rem;
    top: -5px;
    margin-left: .5rem;
}

.btn.text-danger {
    color:red;
}

.btn.text-info {
    color:dodgerblue !important;
}

.app-view .table .actions-container {
    display:flex;
}
.app-view .table .actions-container .options-container {
    flex:1;
}
.app-view .table .actions {
    text-align: right;
    padding-top: 0;
    flex: 1;
    padding-top: .5rem;
    padding-bottom: .5rem;
}
.app-view .table .actions .btn i.fa {
    font-size: 1.4em !important;
    position: relative;
    top: -1px;
    padding-right: 7px;
}
.app-view .table .actions.preview-link {
    padding-top:0px;
}
.app-view .table .actions-container .actions .preview-link {
    background-color: transparent;
    border: none;
    color: lightgray;
    font-size: 2em;
    transition: .2s;
    outline: none;
    margin-right: .5em;
}
body:not(.mobile-device) .app-view .table .actions-container .actions .preview-link:hover {
    color: white;
}
.app-view .table.metadata .actions {
    padding-top: .5em;
}
.app-view .table td.ellipsis {
    max-width: 15rem;
    min-width:200px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.app-view .table td.small {
    font-size: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.app-view .table td.expand {
    font-size: 100%;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.app-view .table td.nowrap {
    white-space: nowrap;
}


body.dark-mode select:disabled, select[readonly] {
    background-color: #1a2035 !important;
    background-color: rgba(100,100,100,.1) !important;
    color: gray !important;
    cursor: default !important;
}

body.light-mode select:disabled, select[readonly] {
    background: lightgray !important;
    color: gray !important;
    cursor: default !important;
}

option {
    margin: 40px;
    /*text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);*/
}

body.dark-mode select option {
    background: black;
    color: #fff;
}




.form-check {
    display: block;
    min-height: 1.5rem;
    /*padding-left: 1.5em;*/
    margin-bottom: .125rem
}

    .form-check .form-check-input {
        float: left;
        margin-left: -1.5em
    }

.form-check-input {
    width: 1em;
    height: 1em;
    margin-top: .25em;
    vertical-align: top;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 1px solid rgba(0,0,0,.25);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
}

    .form-check-input[type=checkbox] {
        border-radius: .25em;
        border-radius: 5px;
    }

    .form-check-input[type=radio] {
        border-radius: 50%
    }

    .form-check-input:active {
        filter: brightness(90%)
    }

    .form-check-input:focus {
        border-color: #86b7fe;
        outline: 0;
        box-shadow: 0 0 0 .25rem rgba(13,110,253,.25)
    }

    .form-check-input:checked {
        background-color: #0d6efd;
        border-color: #0d6efd
    }

        .form-check-input:checked[type=checkbox] {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e")
        }

        .form-check-input:checked[type=radio] {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e")
        }

    .form-check-input[type=checkbox]:indeterminate {
        background-color: #0d6efd;
        border-color: #0d6efd;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e")
    }

    .form-check-input:disabled {
        pointer-events: none;
        filter: none;
        opacity: .5
    }

        .form-check-input:disabled ~ .form-check-label, .form-check-input[disabled] ~ .form-check-label {
            opacity: .5
        }

.form-switch {
    padding-left: 2.5em;
    margin-bottom: 0.7rem !important;
}

    .form-switch .form-check-input {
        width: 2em;
        margin-left: -2.5em;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
        background-position: left center;
        border-radius: 2em;
        border-radius: 5px;
        border-radius: 8px;
        transition: background-position .15s ease-in-out;
    }

/*@media (prefers-reduced-motion:reduce) {
    .form-switch .form-check-input {
        transition: none
    }
}*/

.form-switch .form-check-input:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2386b7fe'/%3e%3c/svg%3e")
}

.form-switch .form-check-input:checked {
    background-position: right center;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e")
}

.form-check-inline {
    display: inline-block;
    margin-right: 1rem
}

.btn-check {
    position: absolute;
    clip: rect(0,0,0,0);
    pointer-events: none
}

    .btn-check:disabled + .btn, .btn-check[disabled] + .btn {
        pointer-events: none;
        filter: none;
        opacity: .65
    }

.form-range {
    width: 100%;
    height: 1.5rem;
    padding: 0;
    background-color: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

    .form-range:focus {
        outline: 0
    }

        .form-range:focus::-webkit-slider-thumb {
            box-shadow: 0 0 0 1px #fff,0 0 0 .25rem rgba(13,110,253,.25)
        }

        .form-range:focus::-moz-range-thumb {
            box-shadow: 0 0 0 1px #fff,0 0 0 .25rem rgba(13,110,253,.25)
        }

    .form-range::-moz-focus-outer {
        border: 0
    }

    .form-range::-webkit-slider-thumb {
        width: 1rem;
        height: 1rem;
        margin-top: -.25rem;
        background-color: #0d6efd;
        border: 0;
        border-radius: 1rem;
        -webkit-transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
        transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
        -webkit-appearance: none;
        appearance: none
    }

/*@media (prefers-reduced-motion:reduce) {
    .form-range::-webkit-slider-thumb {
        -webkit-transition: none;
        transition: none
    }
}*/

.form-range::-webkit-slider-thumb:active {
    background-color: #b6d4fe
}

.form-range::-webkit-slider-runnable-track {
    width: 100%;
    height: .5rem;
    color: transparent;
    cursor: pointer;
    background-color: #dee2e6;
    border-color: transparent;
    border-radius: 1rem
}

.form-range::-moz-range-thumb {
    width: 1rem;
    height: 1rem;
    background-color: #0d6efd;
    border: 0;
    border-radius: 1rem;
    -moz-transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    -moz-appearance: none;
    appearance: none
}

/*@media (prefers-reduced-motion:reduce) {
    .form-range::-moz-range-thumb {
        -moz-transition: none;
        transition: none
    }
}*/

.form-range::-moz-range-thumb:active {
    background-color: #b6d4fe
}

.form-range::-moz-range-track {
    width: 100%;
    height: .5rem;
    color: transparent;
    cursor: pointer;
    background-color: #dee2e6;
    border-color: transparent;
    border-radius: 1rem
}

.form-range:disabled {
    pointer-events: none
}

    .form-range:disabled::-webkit-slider-thumb {
        background-color: #adb5bd
    }

    .form-range:disabled::-moz-range-thumb {
        background-color: #adb5bd
    }







.spacer {
    flex:1;
}


.app-form-field-autocomplete-disabler {
    display:none;
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    z-index:5;
    background:rgba(0,0,0,.3);
}
.app-form-field.disabled .app-form-field-autocomplete-disabler {
    display: flex;
}
.app-form-field-autocomplete-container {
    background-color: transparent !important;
    /*padding: 1px 0rem !important;*/
    border-radius: 5px;
    background-image: none !important;
    display: flex;
    align-items: center;
    position: relative;
    transition: .3s;
    /*border-color: rgba(100,100,100,.5) !important;*/
    border: solid 1px silver;
    overflow:hidden;
}
body.dark-mode .app-form-field-autocomplete-container {
    border: solid 1px #444;
}
body.dark-mode .app-form-field-autocomplete-container:focus {
    border-color: #0d6efd;
}
body.dark-mode .app-form-field-autocomplete-container.focused {
    border-color: #0d6efd;
}
body.light-mode .app-form-field-autocomplete-container {
    border: solid 1px silver;
    background-color: white !important;
}
body.light-mode .app-form-field-autocomplete-container:focus {
    border-color: dodgerblue;
}
body.light-mode .app-form-field-autocomplete-container.focused {
    border-color: dodgerblue;
}
.app-form-field-autocomplete-search-button {
    /*font-size: .7rem;
    background: linear-gradient(#EEEEEE, #CFCFCF);
    border: solid 1px silver;*/
    /* margin-top: -3px; */
    /* margin-bottom: -6px; */
    /* height: 100%;
    margin-right: 0px;*/
    /* background: #802091 linear-gradient( 
180deg, #9342a1, #802091) repeat-x; */
    /*   box-shadow: none;
    color: #fff;
    font-weight: 300;
    border: 1px solid lightgray;*/
    display: flex;
    /* padding: .5rem .7rem;
    border-color: lightgray;
    border-radius: 3px;
    height: calc(100% + 2px);*/
    border-radius: 3px;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    align-items: center;
    justify-content: center;
    color: white;
    border-bottom: none;
    border-top: none;
    border-right: none;
    width: 44px;
    /*opacity: .8;
    transition: .2s opacity;*/
    background: transparent !important;
    border-color: transparent !important;
    font-size: .7rem !important;
    justify-content: center;
    display: flex;
    position: absolute;
    right: 0;
    /*background: black !important;*/
}
body.light-mode .app-form-field-autocomplete-search-button {
    border-color:silver;
}
body .light-mode .app-form-field-autocomplete-container:focus .app-form-field-autocomplete-search-button {
    background-color: #006699 !important;
    background: #0d6efd !important;
    color: white;
    transition-delay: 0;
    border-color: #0d6efd;
    opacity:1;
}
body.light-mode .app-form-field-autocomplete-container.focused .app-form-field-autocomplete-search-button {
    background-color: #0d6efd !important;
    background: #0d6efd !important;
    color: white;
    transition-delay: 0;
    border-color: #0d6efd;
    opacity: 1;
}
body:not(.mobile-device).light-mode .app-form-field-autocomplete-search-button:hover {
    opacity: 1;
}
body.light-mode .app-form-field-autocomplete-search-button:focus {
    opacity: 1;
    background-color: #0d6efd !important;
    background: #0d6efd !important;
    color: white;
    transition-delay: 0;
    border-color: #0d6efd;
}
body.light-mode .app-form-field-autocomplete-search-button.focused {
    opacity: 1;
    background-color: #0d6efd !important;
    background: #0d6efd !important;
    color: white;
    transition-delay: 0;
    border-color: #0d6efd;
}
body.light-mode .app-form-field-autocomplete-search-button:active {
    opacity: .8;
}


body .dark-mode .app-form-field-autocomplete-container:focus .app-form-field-autocomplete-search-button {
    background-color: #0d6efd !important;
    background: #0d6efd !important;
    color: white;
    transition-delay: 0;
    border-color: #0d6efd;
    opacity: 1;
}
body:not(.mobile-device).dark-mode .app-form-field-autocomplete-search-button:hover {
    opacity: 1;
}
body.dark-mode .app-form-field-autocomplete-search-button:focus {
    opacity: 1;
    background-color: #0d6efd !important;
    background: #0d6efd !important;
    color: white;
    transition-delay: 0;
    border-color: #0d6efd;
}
body.dark-mode .app-form-field-autocomplete-search-button.focused {
    opacity: 1;
    background-color: #0d6efd !important;
    background: #0d6efd !important;
    color: white;
    transition-delay: 0;
    border-color: #0d6efd !important;
}
body.dark-mode .app-form-field-autocomplete-search-button:active {
    opacity: .8;
}



.app-form-field-autocomplete-selection {
    position: absolute;
    left: 0;
    right: 0;
    min-height: 100px;
    top: 67px;
    z-index: 10;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    overflow: auto;
    max-height: 300px;
    z-index: 25;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    margin-left: 1px;
    margin-right: 1px;
}
body.dark-mode .app-form-field-autocomplete-selection {
    border: solid 1px #0d6efd;
    background-color: #1C1C22;
}
body.light-mode .app-form-field-autocomplete-selection {
    border: solid 1px dodgerblue;
    background-color: white;
}
.app-form-field-autocomplete-selection.show {
    display: flex;
}
.app-form-field-autocomplete-selection-loading-item {
    display: flex;
    padding: .7rem .7rem;
    align-items: center;
    color: white !important;
    font-style:italic;
}
body.dark-mode .app-form-field-autocomplete-selection-loading-item {
    color: white;
}
body.light-mode .app-form-field-autocomplete-selection-loading-item {
    color: black;
}
.app-form-field-autocomplete-selection-loading-item input {    
    padding-left: 5px;
    padding-right: 5px;
}
.app-form-field-autocomplete-selection-loading-item span {
    padding-left: 5px;
    font-style: italic;
    font-size: .9rem;
}
.app-form-field-autocomplete-selection-item {
    padding: .5rem;
    outline: 0 !important;
    border: none;
    width: 100%;
    text-align: left;
}
body.dark-mode .app-form-field-autocomplete-selection-item {
    color: white;
}
body:not(.mobile-device).dark-mode .app-form-field-autocomplete-selection-item:hover {
    background-color: #0d6efd !important;
}
body.dark-mode .app-form-field-autocomplete-selection-item.focused {
    background-color: #0d6efd !important;
}
body.dark-mode .app-form-field-autocomplete-selection-item:focus {
    background-color: #0d6efd !important;
}
body.light-mode .app-form-field-autocomplete-selection-item {
    background-color: white;
}
body.light-mode .app-form-field-autocomplete-selection-item:hover {
    background-color: #0d6efd !important;
    color: white !important;
}
body.light-mode .app-form-field-autocomplete-selection-item.focused {
    background-color: dodgerblue !important;
    color: white !important;
}
body.light-mode .app-form-field-autocomplete-selection-item:focus {
    background-color: dodgerblue !important;
    color: white !important;
}
.app-form-field-autocomplete-selection-item span {
    padding-left: 5px;
}
.app-form-field-autocomplete-selection-item span.dark-highlight {
    padding-left: 0px;
    font-weight: 500;
}
.app-form-field-autocomplete-selection-item span.light-highlight {
    padding-left: 0px;
    font-weight: 100;
    color: dimgray !important;
}
.app-form-field-autocomplete-selection-item input[type=checkbox] {
    margin-left: .5rem !important;
    margin-right: .5rem !important;
    width: 18px;
    height: 18px;
    position: relative;
    top: 4px;
}

.form-pill {
    display: flex;
    background-color: #0d6efd;
    /* padding: 1rem .5rem; */
    border: solid 1px #0d6efd;
    border-radius: 20px;
    align-items: center;
    justify-content: center;
    padding: 2px 5px !important;
    transition: .1s;
    cursor: pointer;
    margin-right: .2rem;
    outline: 0 !important;
    margin-left: .2rem;
    color: white !important;
}
body.dark-mode .form-pill {
    background-color: #444;
    border: solid 1px #444;
}
    body.dark-mode .form-pill:hover {
        background-color: #0d6efd;
        border-color: #0d6efd;
        opacity: 1;
        color: white !important;
    }
    body.dark-mode .form-pill:focus {
        background-color: #0d6efd;
        border-color: #0d6efd;
        opacity: 1;
        color: white !important;
    }
    body.dark-mode .form-pill:active {
        background-color: #0d6efd;
        border-color: #0d6efd;
        color:white !important;
    }
.form-pill-label {
    font-size: .9rem;
    padding: 3px 5px;
    font-weight: 500;
    position: relative;
    top: 0px;
    cursor:inherit;
}
.form-pill-close {
    font-size: .8rem;
    position: relative;
    top: 0px;
    transition: .1s;
    padding: 3px 5px;
    cursor: inherit;
}
.form-pill-close:hover {
    color:red;
}
body.light-mode .form-pill {
    background-color: whitesmoke;
    border: solid 1px lightgray;
    color: black !important;
}
body.light-mode .form-pill:hover {
    background-color:#0d6efd;
    border-color:#0d6efd;
    color: white !important;
}
body.light-mode .form-pill:focus {
    background-color:dodgerblue;
    border-color:#0d6efd;
    color: white !important;
}
body.light-mode .form-pill:active {
    background-color:dodgerblue;
    border-color:dodgerblue;
    color:whitesmoke !important;
}
.app-form-field-autocomplete-container input {
    /*width:unset;*/
    border: none !important;
    font-size: 1rem;
}


/*the container must be positioned relative:*/
.autocomplete-text {
  position: relative;
  display: inline-block;
}

.autocomplete-text input {
    border: 1px solid transparent;
    background-color: #f1f1f1;
    padding: 10px;
    font-size: 16px;
}

.autocomplete-text input[type=text] {
    background-color: #f1f1f1;
    width: 100%;
}

.autocomplete-text input[type=submit] {
    background-color: DodgerBlue;
    color: #fff;
    cursor: pointer;
}

.autocomplete-text .autocomplete-items {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 99;
    /*position the autocomplete items to be the same width as the container:*/
    top: 100%;
    left: 0;
    right: 0;
}

.autocomplete-text .autocomplete-items div {
    padding: 10px;
    cursor: pointer;
    background-color: #fff;
    border-bottom: 1px solid #d4d4d4;
}

/*when hovering an item:*/
.autocomplete-text .autocomplete-items div:hover {
    background-color: #e9e9e9;
}

/*when navigating through the items using the arrow keys:*/
.autocomplete-text .autocomplete-active {
    background-color: DodgerBlue !important;
    color: #ffffff;
}


.app-form-field-image-container .app-form-field-img {
    object-fit: none;
    /*  height: 100%;
    max-width: 100%;*/
    /*width: 100%;*/
    /*  box-shadow: 0 5px 8px 0 rgb(0 0 0 / 10%), 0 3px 10px 0 rgb(0 0 0 / 10%) !important;*/
}
.app-form-field-image-container.default-artwork .app-form-field-img {
    box-shadow:none !important;
}

.app-feedback {
    position: fixed;
    padding: 1.25rem .9375rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 5px;
    border: 0;
    line-height: 20px;
    background-color: #fff;
    color: #6c757d;
    opacity: 0;
    transition: .5s;
    right: 39px;
    z-index: 5200;
    top: -96px;
    min-width: 275px;
    display: flex;
    box-shadow: 0 4px 20px 0 rgb(0 0 0 / 14%), 0 7px 10px -5px rgb(76 175 80 / 40%);
    background-image: linear-gradient( 195deg,#66bb6a,#43a047);
    color: white;
    padding-bottom: 0.8rem;
}
.app-feedback.show {
    opacity:1;
    top: 47px;
}
.app-feedback.error, 
.app-feedback.success, 
.app-feedback.warning {
    color:white;

}

.app-feedback.success {
    background-color: #55b559;
    background: linear-gradient( 60deg,#288c6c,#4ea752);
}

.app-feedback.error {
    color: #285b2a;
    background: #69bc6c linear-gradient( 180deg,#80c682,#69bc6c) repeat-x;
    border-color: #cde9ce;
}
.app-feedback .app-button-icon {
    position: relative;
    top: -10px;
}
.app-feedback .app-label {
    padding-right: 25px;
}


.grid-button {
    color: rgba(0,0,0,.5) !important;
    font-size: 2em;
    align-items: center;
    justify-content: center;
    display: flex;
    position: relative;
    left: 0px;
    border: solid 1px transparent;
    border-radius: 5px;
    padding: 0px;
    transition:.2s;
}
body.dark-mode .grid-button {
    color: rgba(255,255,255,.5) !important;
}
.grid-button:hover {
    background-color: rgba(0,0,0,.7);
    border: solid 1px rgba(0,0,0,.7);
    color: rgba(0,0,0,.7) !important;
}
body.dark-mode .grid-button:hover {
    background-color: rgba(255,255,255,.7);
    border: solid 1px rgba(255,255,255,.7);
    color: rgba(255,255,255,.7) !important;
}
.grid-button.selected {
    background-color: rgba(0,0,0,.3);
    border: solid 1px rgba(0,0,0,.3);
    color: dimgray !important;
}
body.dark-mode .grid-button.selected {
    background-color: rgba(255,255,255,.3);
    border: solid 1px rgba(255,255,255,.3);
    color: white !important;
}
.grid-button:active {
    background-color: rgba(0,0,0,.3);
    border: solid 1px rgba(0,0,0,.3);
    color: rgba(0,0,0,.5) !important;
}
body.dark-mode .grid-button:active {
    background-color: rgba(255,255,255,.3);
    border: solid 1px rgba(255,255,255,.3);
    color: rgba(255,255,255,.5) !important;
}


.grid-button i {
    font-size: 2rem;
}


/* BEGIN SLIDESHOW */

.slide-show {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 0 !important;
    display: flex;
    overflow: visible;
    align-items: center;
    background-color: #000000;
   /* background-image: linear-gradient( 0deg, #000000 0%, #151f20 74%);*/
   transition:.3s;
}
.slide-show .spinner-container {   
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    display: flex;
}
.slide-show .slide-show-container {   
    width: 100%;
    height: 100%;
}
.slide-show .slide-show-items {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
}
.slide-show .slide-show-items::after {
    display: block;
    clear: both;
    content: ""
}

.slide-show .slide-show-item {
    position: relative;
    display: none;
    float: left;
    width: 100%;
  /*  height: 100%;*/
    margin-right: -100%;
    /*-webkit-backface-visibility: hidden;
    backface-visibility: hidden;*/
    transition: -webkit-transform .6s ease-in-out;
    transition: transform .6s ease-in-out;
    transition: transform .6s ease-in-out,-webkit-transform .6s ease-in-out;
    -webkit-transition: transform .6s ease-in-out,-webkit-transform .6s ease-in-out;
    text-align: center;
}
/*
@media (prefers-reduced-motion:reduce) {
    .slide-show-item {
        transition: none;
        -webkit-transition: none;
    }
}
*/
.slide-show-item-next, .slide-show-item-prev, .slide-show-item.active {
    display: block !important;
    text-align: center;
}

.active.slide-show-item-right, .slide-show-item-next:not(.slide-show-item-left) {
    -webkit-transform: translateX(100%);
    transform: translateX(100%)
}

.active.slide-show-item-left, .slide-show-item-prev:not(.slide-show-item-right) {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}

.slide-show .slide-show-item img {
    /*object-fit: cover; */
    /*height: 100%;
    width: 100%;*/

    max-width: 100%;
    object-fit: contain;
    /* max-height: 100%;*/
    min-height: 100%;
    align-items: center;
    text-align: center;
   /* min-height: 100%;
    min-width: 100%;*/
    max-height: 100%;
}

.slide-show .slnext {
    display: none;
}

.slide-show .slnext {
    position: fixed;
    right: 0;
    top: 0;
    /* bottom: 0; */
    width: 50px;
    font-size: 2rem;
    display: flex;
    align-items: center;
    padding: 0.5rem;
    background-color: rgba(100,100,100,.1);
    padding-left: 1rem;
    top: 39%;
    height: 20%;
    min-height: 50px;
    color: lightgray;
    transition: .2s;
    opacity: 0;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.slide-show .slnext:hover {
    color: white;
    opacity: 1;
}

.slide-show .slnext:active {
    opacity: .8;
}

.slide-show .slprev {
    display: none;
}

.slide-show .slprev {
    position: fixed;
    left: 0;
    top: 0;
    /* bottom: 0; */
    width: 50px;
    font-size: 2rem;
    display: flex;
    align-items: center;
    padding: 0.5rem;
    background-color: rgba(100,100,100,.1);
    padding-left: 1rem;
    top: 39%;
    height: 20%;
    min-height: 50px;
    color: lightgray;
    transition: .2s;
    opacity: 0;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.slide-show .slprev:hover {
    color: white;
    opacity: 1;
}

.slide-show .slprev:active {
    opacity: .8;
}

.slide-show .pitch-links {
    display: flex;
    align-items: center;
    position: fixed;
    bottom: 1rem;
    /* transform: translateX(50%); */
    left: 0;
    right: 0;
    text-align: center;
    justify-content: center;
    z-index: 50;
    transition:.3s;
}

.slide-show .pitch-link {
    width: 0.5rem;
    height: 0.5rem;
    background-color: rgba(100,100,100,.3);
    border-radius: 100px;
    padding: 0.2rem;
    cursor: pointer;
    margin: 0.5rem;
    transition:.3s;
}
.slide-show .pitch-link.selected {    
    background-color: rgba(100,100,100,.5);
}


/* END SLIDESHOW */

.app-form-field-text .app-form-field-span {
    color: black;
    padding: 10px 3px;
    /* padding: 0.5rem; */
    border-radius: 5px;
    font-size: 1.1rem;
}
.app-form-field-text .app-form-field-container {
    display: flex;
    padding-top: 7px;
}
.app-form-field-text .app-form-field-container img {
    padding-top: 3px;
    padding-right: 7px;
    margin-left: -5px;
}

.drop-container {
    display:none;
}
.drop-container.show {
    display: block;
}

.app-form.slim-header .app-form-header {
    min-width: unset;
    min-height: unset;
    padding-top: 1rem;
    padding-bottom: 1rem;
    max-width: 45px;
    max-height: 45px;
    margin: 0.5rem;
}
.app-form.slim-header .app-form-header .app-form-image {
    max-width: 45px;
    max-height: 45px;
}

.app-form-field.formats {
    z-index: 50000;
    position: absolute;
    left: 3px;
    top: -2px;
}
.app-form-field.formats .app-form-select { 
    font-size: .9rem;
    padding: 0.2rem 0.5rem;
   /* max-width: 91px;*/
}

.input-group.field-container {
    border: solid 1px #444;
    border-radius: 5px;
}
.input-group.field-container .app-form-field-input {
    border: none;
}
.input-group.field-container .app-button-icon { 
    background: transparent !important;
    border-color: transparent !important;
    height: 100%;
}
.input-group.field-container .app-button-icon i { 
    font-size: .7rem;
}
.app-tab-view .app-form-field-image-container .app-form-field-img {
    /* object-fit: contain;
    max-height: 100vh;*/
    /*max-width: 100vw;*/
    max-height: 55vh;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    width: fit-content;
    height: fit-content;
}
.modal.fade {
   transition:.2s;
}
.modal.show {
    opacity:1;
}

/* LoaderElement-Begin */
.LoaderElement {
    opacity: 0;
    pointer-events: none;
    transition: .3s;
}

.LoaderElement.show {
    opacity: 1;
    pointer-events: all;
}

/* LoaderElement-End */


/* BEGIN CAROUSEL */

.carousel {
    position: relative
}

    .carousel.pointer-event {
        -ms-touch-action: pan-y;
        touch-action: pan-y
    }

.carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
    min-height: 500px;
    min-height: 98vh;
    height: 98vh;
}

    .carousel-inner::after {
        display: block;
        clear: both;
        content: ""
    }

.carousel-item {
    min-height: 500px;
}

.carousel-control-next, .carousel-control-prev {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 15%;
    color: #fff;
    text-align: center;
    opacity: .5;
    transition: opacity .15s ease
}
/*
@media (prefers-reduced-motion:reduce) {
    .carousel-control-next, .carousel-control-prev {
        transition: none
    }
}*/

.carousel-control-next:focus, .carousel-control-next:hover, .carousel-control-prev:focus, .carousel-control-prev:hover {
    color: #fff;
    text-decoration: none;
    outline: 0;
    opacity: .9
}

.carousel-control-prev {
    left: 0
}

.carousel-control-next {
    right: 0
}

.carousel-control-next-icon, .carousel-control-prev-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: no-repeat 50%/100% 100%
}

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e") !important
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e") !important
}

.carousel-control-prev-icon-ex,
.carousel-control-next-icon-ex {
    font-size: 50px;
}

.carousel-indicators {
    position: absolute;
    right: 0;
    bottom: 2.5rem;
    left: 0;
    z-index: 15;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    padding-left: 0;
    margin-right: 16%;
    margin-left: 15%;
    list-style: none
}

    .carousel-indicators li {
        box-sizing: content-box;
        -ms-flex: 0 1 auto;
        flex: 0 1 auto;
        width: 30px;
        height: 3px;
        margin-right: 3px;
        margin-left: 3px;
        text-indent: -999px;
        cursor: pointer;
        background-color: #fff;
        background-clip: padding-box;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        opacity: .5;
        transition: opacity .6s ease
    }

/*@media (prefers-reduced-motion:reduce) {
    .carousel-indicators li {
        transition: none
    }
}
*/
.carousel-indicators .active {
    opacity: 1
}

.carousel-caption {
    position: absolute;
    right: 15%;
    bottom: 20px;
    left: 15%;
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #fff;
    text-align: center
}

@-webkit-keyframes spinner-border {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes spinner-border {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

.carousel-control-next-icon, .carousel-control-prev-icon {
    width: 40px;
    height: 40px;
}

.carousel .w-100 {
    width: 100%;
}

/* END CAROUSEL */


.app-form-field-range {
    border-bottom: none !important;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    padding-top: 16px !important;
}
.app-form-field-input.form-range {
    border-top: none !important;
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
}
.app-form-field-input.form-range.focused {
    border-color: #0d6efd;
}
.app-form-field-curtain {
    display: block;
    opacity: 0;
    background-color: black;
    position: fixed;
    inset: 0px;
    z-index: 15000;
    transition-duration: 0.2s;
    transition-property: opacity;
    cursor: default;
}

.form-window-content .app-form-field.app-form-field-image {
    flex:1;
}


#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: 99999;
}
.messagebox-vail {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    background-color: black;
    opacity: .3;
    transition: .2s;
}
body.dark-mode .messagebox-vail {
    opacity: .5;
}
.messagebox {
    position: relative;
    top: -3rem;
    font-size: 1rem;
    max-width: 90%;
    max-height: 90%;
    display: flex;
    flex-direction: column;
    border-radius:6px;
}
body.light-mode .messagebox {
    background-color: black;
    border: solid 1px cornflowerblue;
    background: linear-gradient(#EEEEEE, #CFCFCF);
    box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0%), 0 6px 20px 0 rgba(0, 0, 0, 19%);
}
body.dark-mode .messagebox {
    border: solid 1px #2A2A30;
    background-color: white;
    background-color: black !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);
}
.messagebox .messagebox-header {
    display:flex;
    align-items:center;
}
body.light-mode .messagebox .messagebox-header {
    background: linear-gradient(to bottom, #e6e6e6 0,#d0d0d0 100%);
    border-bottom: solid 1px #aeaeae;
}
.messagebox .messagebox-header span {
    font-size:.9rem;
    flex:1;
    margin-left: .5rem;
    margin-right: .5rem;
}
body.dark-mode .messagebox .messagebox-header span {
    color: whitesmoke;
}
body.light-mode .messagebox .messagebox-header span {
    color: dimgray;
}
.messagebox .messagebox-header button {
    border: 0;
    padding: 0;
    margin: 0;
    outline: 0;
    background-color: transparent;
    cursor: pointer;
    opacity: .7;
    transition: .3s;
}
body.no-transition .messagebox .messagebox-header button {
    transition: none;
}
.messagebox .messagebox-header i {
    font-size: 1rem;
    padding: .5rem;
    margin-left: .3rem;
    margin-right: .3rem;
   /* margin-top: .1rem;*/
   color:inherit
}
.messagebox .messagebox-header button:hover {
    opacity:1;
}
.messagebox .messagebox-header button:focus {
    opacity:1;
}
.messagebox .messagebox-header button:active {
    opacity:.8;
}
body.dark-mode .messagebox .messagebox-header button {
    color: whitesmoke;
}
body.light-mode .messagebox .messagebox-header button {
    color: dimgray;
}
body.light-mode .messagebox .messagebox-header button:active {
    color: lightgray;
}

.messagebox .messagebox-body {
    text-align: center;
    padding: 1.5rem 2rem;
    min-width: 13rem;
    overflow:auto;
}
body.dark-mode .messagebox .messagebox-body {
    color: white;
}

body.light-mode .messagebox .messagebox-body {
    color: black;
}

.messagebox .messagebox-message {
}
.messagebox .messagebox-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: .5rem;
}
.messagebox .messagebox-footer button {
    border: 0;
    outline: 0;
    margin: 0;
    background-color: transparent;
    color: white;
    font-size: .8em;
    /* 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: .1rem;
    white-space: nowrap;
    cursor: pointer;
    font-size: 1.4vh;
}
body.no-transition .messagebox .messagebox-footer button {
    transition: none;
}
.messagebox .messagebox-footer button i {
    margin-right:5px;
}
/*.messagebox .messagebox-footer button:hover {
   background-color: #2A2A30;   
}
.messagebox .messagebox-footer button:focus {
    background-color: #2A2A30;   
}
.messagebox .messagebox-footer button:active {
    background-color: #2A2A30;
}*/
/*.messagebox .messagebox-footer button.app-button-primary {
    color: black;
    font-weight: 500 !important;
}*/
body.dark-mode .messagebox .messagebox-footer button.app-button-primary {
    color: white;
}

body.dark-mode .messagebox .messagebox-header #messagebox-close:hover {
    background-color: firebrick;
}
body.dark-mode .messagebox .messagebox-header #messagebox-close:focus {
    background-color: firebrick;
}
body.dark-mode .messagebox .messagebox-header #messagebox-close:active {
    background-color: red;
}

body.light-mode .messagebox .messagebox-header #messagebox-close:hover {
    background-color: firebrick;
}

body.light-mode .messagebox .messagebox-header #messagebox-close:focus {
    background-color: firebrick;
}

body.light-mode .messagebox .messagebox-header #messagebox-close:active {
    background-color: red;
}

body.light-mode .messagebox .messagebox-header #messagebox-close:hover {
    background-color: red;
    color: white;
    opacity: 1;
}

body.light-mode .messagebox .messagebox-header #messagebox-close:focus {
    background-color: red;
    color: white;
    opacity: 1;
}

body.light-mode .messagebox .messagebox-header #messagebox-close:active {
    background-color: red;
    color: white;
    opacity:.8;
}


.messagebox #messagebox-message {
    font-size: 1.2rem;
    /*font-size: 2vh;*/
}
body.light-mode .messagebox #messagebox-message {
    color: black;
}
body.dark-mode .messagebox #messagebox-message {
    color: white;
}


body.light-mode .messagebox .messagebox-footer button {
    background: linear-gradient(#EEEEEE, #CFCFCF);
    border: solid 1px silver;
    color: dimgray;
    font-size: .8rem;
    transition: .2s;
    font-weight:500 !important;
}
body.light-mode .messagebox .messagebox-footer button.select {
    border-color: #0069D9;
    color: #0069D9;
}
body.light-mode .messagebox .messagebox-footer button:hover {
    border-color: #0069D9;
    color: #0069D9;
}
body.light-mode .messagebox .messagebox-footer button:focus {
    background: #0069D9 !important;
    border-color: #0069D9;
    color: white;
    /*color: white;*/
}
body.light-mode .messagebox .messagebox-footer button:active {
    background: #0069D9 !important;
    border-color: #0069D9;
    color: white;
    transition: none;
}

.app-form-field-password-container {
    position: relative;
    display: flex;
    align-items: center;
}
.app-form-field-password-visible {
    position: absolute;
    right: .5rem;
    font-size: .8rem;
    min-width:15px;
}

.fit-width {
    width: fit-content !important;
    min-width: unset !important;
}


.form-window-background {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: black;
    z-index: 6100;
    opacity: 0;
    transition: all .2s;
}
.form-window-background.show {
    opacity: .5;
}
.form-window {
    display:none;
    flex-direction:column;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 6101;
    opacity: 0;
    overflow:auto;
}
.form-window.show
{
    opacity: 1;
}
.form-window-top {
    flex:1;
}
.form-window-bottom {
    flex: 1;
}
.form-window-content {
    min-width: 15%;
    /*background-color: white;*/
    /* height: 100px; */
    text-align: center;
    align-self: center;
    box-shadow: 0 1px 2px rgb(0 0 0 / 7%), 0 2px 4px rgb(0 0 0 / 7%), 0 4px 8px rgb(0 0 0 / 7%), 0 8px 16px rgb(0 0 0 / 7%), 0 16px 32px rgb(0 0 0 / 7%), 0 32px 64px rgb(0 0 0 / 7%);
    border-radius:6px;
}

.form-window table {
    margin-bottom: 0;
}
.form-window .header {
    display: flex;
    align-items: center;
    padding: .5rem 1.5rem;
    border-bottom: solid 1px lightgray;
    margin-bottom: 1rem;
    padding-bottom: 0 !important;
}
.form-window .header h3 {
    margin: 0;
    padding: 0;
    color: #373737;
    /*user-select:none;*/
}
.form-window .header i {
    padding: .5rem;
    padding-right: .5rem;
    padding-left: 0;
    /* padding-bottom: 1rem; */
    color: #373737;
    font-size: 1.4rem;
    position: relative;
    top: -3px;
}
.form-window .form-window-content {
    min-width: 80%;
    max-width: 80%;
    max-height: 90%;
    text-align: initial;
    background-color: #f9fafc;
    border: solid 1px gray;
    /* border-radius: .5rem;*/
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    overflow: visible;
    border: solid 1px rgba(100,100,100,.3);
    background: #EEEEEE;
    background: white;
    flex-direction: column;
    border-radius: 6px;
    box-shadow: 7px 7px 7px 0px rgb(0 0 0 / 10%);
}
.form-window .form-window-content .content
{
    min-height: 200px;
    width:100%;
}
.form-window #search-wrapper .form-window-content .content > .container {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.form-window .form-window-content .content > .container
{
    padding: 0;
    width:100%;
}
.form-window.full-window .form-window-content {
    left: 0 !important;
    top: 0 !important;
    position: fixed;
    bottom: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    border: none;
}
.form-window.full-window .form-window-content > .form-section {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.form-window.full-window .footer .form-buttons {
    border-top: none;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
}
.form-window.full-window .title-bar {
    display:none;
}
.form-window.full-window .form-window-content .content {
    flex: 1;
    overflow:auto;
}
.form-window.full-window .header {
    padding: 2.5rem 3.5rem;
    margin-bottom: 0rem !important;
    padding-bottom: 1rem !important;
    top: 0px;
}
.form-window.full-window .header i {
    top:0px;
    padding-right: 1rem;
}
.form-window.full-window .header h3 {
    font-size: 1.8rem;

}


.form-window-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    position: relative;
}

.form-window-content > .content
{
    overflow: auto;
    flex: 1;
    display: flex;
    background-color: #fff;
}
.form-window-content > .content.overflow-hidden {
        overflow:hidden !important;
}

.form-window-content > footer > .actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 5px;
}

.form-window-content > footer > .actions .action
{
    display: inline-flex;
    align-items: center;
    font-size: .75em;
    -webkit-user-select: none;
    margin-left: 5px;
    margin-top:5px;
}


.form-window-content > footer > .actions .navigation .action .svg-icon
{
    width: 12px;
    height: auto;
}

.form-window-content > footer > .actions .navigation .action .svg-icon .shape-fill
{
    fill: #737373;
}

.form-window-content > footer > .actions .navigation .action.disabled .svg-icon .shape-fill
{
    fill: #b3b3b3;
}

.form-window-content > footer > .actions .navigation .back
{
    margin-right: -6px;
}

.form-window-content > footer > .actions .results .action
{
    min-width: 50px;
    justify-content: center;
}

.form-window-content > footer > .form-buttons.actions .action
{
    font-size: .9em !important;
}

.form-window-content .loading-content
{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.form-window-content .loading-container {
    display: flex;
    align-items: center;
}

.form-window-content .loading-label {
    padding-left: 3px;
}

.form-window-content #views .view.library .container {
    border: none !important;
}
.form-window-content #views .view.library section.library {
    flex: 1;
}
.form-window-content > footer > .actions {
    padding-left: 15px !important;
    padding-right: 15px !important;
}
.form-window-content > footer {
    border-top: solid 1px lightgray;
}
.form-window-content .form-spinner {
    width: 5em !important;
    height: 5em !important;
}

.form-window-content #views .view.library section.library .subsection > header {
    text-align: center;
    padding-top: 5px;
    padding-bottom: 3px;
}
/*.form-window-content #views .view.library section.library .subsection .items .item.smart-playlist > button .icon-container {
    margin-left: 0;
}*/
.form-window-content #views .view.library section.library .subsection > header {
    position: sticky;
    top: 0;
}

.form-window-content .form-window-buttons {
    display: flex;
    justify-content: flex-end;
    flex:1;
}


.form-window-content .form-window-header {
   display:flex;
    margin-left: 1rem;
    margin-right: 1rem;
}

.form-window-content .form-window-header .form-window-title {
    font-size: 1.2rem;
    flex: 1;
    color:black;
    display: flex;
    align-items: center;
}

.form-window-content .form-window-header button {
    color: dimgray;
    color: black;
}
.form-window-content .form-window-header button {
    font-size: 1.2rem;
    padding: .5rem 1rem;
    /* margin-top: .1rem; */
    color: inherit;
    border-radius:3px;
}


.form-window-content .form-window-header .close-button:hover {
    background-color: firebrick;
}

.form-window-content .form-window-header .close-button:focus {
    background-color: firebrick;
}

.form-window-content .form-window-header .close-button:active {
    background-color: red;
}

.form-window-content .form-window-header .close-button:hover {
    background-color: firebrick;
}

.form-window-content .form-window-header .close-button:focus {
    background-color: firebrick;
}

.form-window-content .form-window-header .close-button:active {
    background-color: red;
}

.form-window-content .form-window-header .close-button:hover {
    background-color: red;
    color: white;
    opacity: 1;
}

.form-window-content .form-window-header .close-button:focus {
    background-color: red;
    color: white;
    opacity: 1;
}

.form-window-content .form-window-header .close-button:active {
    background-color: red;
    color: white;
    opacity: .8;
}
.form-window-content .form-window-header {
    padding: 0.5rem 0;
    margin-bottom: .5rem;
    padding-bottom: 0.3rem;
}
body.light-mode .form-window-content .form-window-header {
    background: linear-gradient(to bottom, #e6e6e6 0,#d0d0d0 100%);
    border-bottom: solid 1px lightgrey;
    background: white;
    border-bottom: solid 1px lightgrey;
}



.form-window-content .form-window-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: .5rem;
    border-top: solid 1px lightgrey;
    z-index:1;
    /*margin-top:.5rem;*/
}
.form-window-content .form-window-footer {
}
body.dark-mode .form-window-content .form-window-footer {
    border-color: #444;
}
.form-window-content .form-window-footer button {
    /*border: 0;
    outline: 0;
    margin: 0;
    background-color: transparent;
    color: white;
    font-size: .8em;*/
    /* 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;
    margin-left: .3rem;
    white-space: nowrap;
    cursor: pointer;
    font-size: 1.4vh;*/
    padding: .5rem 1rem;
    margin-right: 0.25rem;
    font-size: 1rem;
}
/*body.no-transition .form-window-content .form-window-footer button {
    transition: none;
}
.form-window-content .form-window-footer button i {
    margin-right:5px;
}*/
/*.form-window-content .form-window-footer button:hover {
   background-color: #2A2A30;   
}
.form-window-content .form-window-footer button:focus {
    background-color: #2A2A30;   
}
.form-window-content .form-window-footer button:active {
    background-color: #2A2A30;
}*/
/*.form-window-content .form-window-footer button.app-button-primary {
    color: black;
    font-weight: 500 !important;
}*/
/*body.dark-mode .form-window-content .form-window-footer button.app-button-primary {
    color: white;
}*/
body.dark-mode .messagebox .messagebox-header #messagebox-close:hover {
    background-color: firebrick;
}
body.dark-mode .messagebox .messagebox-header #messagebox-close:focus {
    background-color: firebrick;
}
body.dark-mode .messagebox .messagebox-header #messagebox-close:active {
    background-color: red;
}

body.light-mode .messagebox .messagebox-header #messagebox-close:hover {
    background-color: firebrick;
}

body.light-mode .messagebox .messagebox-header #messagebox-close:focus {
    background-color: firebrick;
}

body.light-mode .messagebox .messagebox-header #messagebox-close:active {
    background-color: red;
}

body.light-mode .messagebox .messagebox-header #messagebox-close:hover {
    background-color: red;
    color: white;
    opacity: 1;
}

body.light-mode .messagebox .messagebox-header #messagebox-close:focus {
    background-color: red;
    color: white;
    opacity: 1;
}

body.light-mode .messagebox .messagebox-header #messagebox-close:active {
    background-color: red;
    color: white;
    opacity:.8;
}


.messagebox #messagebox-message {
    font-size: 1.2rem;
    /*font-size: 2vh;*/
}

/*body.light-mode .form-window-content .form-window-footer button {
    background: linear-gradient(#EEEEEE, #CFCFCF);
    border: solid 1px silver;
    color: dimgray;
    font-size: .8rem;
    transition: .2s;
    font-weight:500 !important;
}
body.light-mode .form-window-content .form-window-footer button.select {
    border-color: #0069D9;
    color: #0069D9;
}
body.light-mode .form-window-content .form-window-footer button:hover {
    border-color: #0069D9;
    color: #0069D9;
}
body.light-mode .form-window-content .form-window-footer button:focus {
    background: #0069D9 !important;
    border-color: #0069D9;
    color: white;*/
    /*color: white;*/
/*}
body.light-mode .form-window-content .form-window-footer button:active {
    background: #0069D9 !important;
    border-color: #0069D9;
    color: white;
    transition: none;
}*/
.form-window-content .app-navigation-item a {
    border: solid 1px transparent;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

    .form-window-content .app-navigation-item a.selected {
        background: #0d6efd !important;
        /*background-color: #4ea752;
        background: linear-gradient( 60deg, #288c6c, #4ea752) !important;
        box-shadow: 0 4px 20px 0px rgb(0 0 0 / 14%), 0 7px 10px -5px rgb(76 175 80 / 40%) !important;*/
        color: white !important;
    }

.form-window-content .app-navigation-item a.selected .app-navigation-icon {
    color: white !important;
}

.form-window .app-navigation-subitems.show {
    flex-direction: column;
    display:flex;   
}
.form-window .form-window-content .app-navigation-items {
    height: 100%;
    padding: 1rem;
    padding-top:0;
}
.form-window.form-window-view .form-window-content {
    min-width: unset;
   /* max-width: unset;*/
    width: 450px;
    /* min-width: 45%;
    min-height: 80%;*/
}
.form-window.select-mediaItemTypes-view .form-window-content {
    min-width: unset;
    /*max-width: unset;*/
    width: 450px;
   /* min-width: 45%;
    min-height: 80%;*/
}
.form-window.select-playlists-view .form-window-content {
    min-width: unset;
    /*max-width: unset;*/
    width: 450px;
}
.form-window.fixed-window {
    z-index: 6001;
}
.form-window.fixed-window .form-window-content {
    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;
}
.form-window .form-window-content .content > .container > section {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
}
.form-window .form-window-content .content > .container > section > .subsection {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
}
.form-window .form-window-content .content > .container > section > .subsection.flex-0 {
    flex: 0;
}
.form-window .form-window-content .content > .container > section > .subsection > .app-view {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
    margin-left: 0;
    border-radius: unset;
    padding: 0;
}

.form-window .app-tabs ul {
    justify-content:center;
}
/*
.form-window.select-mediaItemTypes-view .form-window-footer {
    display: none;
}*/

.form-window-footer .add-button {
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    border-radius:3px;
}
body.light-mode .form-window-footer .add-button label {
    color: black;
}
.form-window-footer .add-button:hover {
    background-color: rgba(100,100,100,.3);
}
.form-window-footer .add-button:active {
    color:white;
}
body.light-mode .form-window-footer .add-button:active {
    border-color: #0069D9;
    background: #0069D9;
    color: white;
}
body.light-mode .form-window-footer .add-button:active label {
    color: white;
}

.info-control {
    margin: 0 0.5rem;
  /*  color: dimgray;*/
}
.app-form-field .info-control {
    font-size: .7rem;
}

.form-window-actions {
    display:flex;
    align-items:center;
    justify-content:flex-end;
}
.form-window-body {
    padding:.5rem 1rem;
}
.form-window-body .app-form-field-image {
    padding-top: 0.5rem;
    padding-top: 0rem;
    padding-bottom: 0 !important;
}
.form-window-body .app-form-field-image-container .app-form-field-img {
    max-height: 200px;
    max-width: 200px;
    box-shadow:none !important;
    object-fit: contain;
}

.form-window-background.fixed-window.show {
    opacity: .7;
}
.form-window.fixed-window .form-window-content {
    border-radius: 6px;
    border-color: transparent;
    background: #181818;
    color: white;
    box-shadow: 0 1px 2px rgb(0 0 0 / 7%), 0 2px 4px rgb(0 0 0 / 7%), 0 4px 8px rgb(0 0 0 / 7%), 0 8px 16px rgb(0 0 0 / 7%), 0 16px 32px rgb(0 0 0 / 7%), 0 32px 64px rgb(0 0 0 / 7%);
}
.form-window.fixed-window .form-window-content .form-window-header {
    background: unset;
    border-bottom: solid 1px rgba(100,100,100,.3);
    margin-left: 2rem;
    margin-right: 2rem;
    margin-bottom: 1rem;
}

.form-window.fixed-window .form-window-content > .content {
    background: unset;
}
.form-window.fixed-window .form-window-content .form-window-header .form-window-title {
    color: white;
    margin: 0;
    font-size: 1.8rem !important;
}
.form-window.fixed-window .form-window-content .form-window-header button {
    color: white;
    margin: 0;
    padding-bottom: 0.5rem;
    font-size: 1.4rem;
}
/*.form-window.fixed-window .form-window-images {
    display: flex;
}
.form-window.fixed-window .form-window-image {
    flex: 1;
    width: 100%;
    margin-bottom: 1rem;
    margin-top: 0.5rem;
    margin-right: 1.5rem;
}*/
.form-window.fixed-window .form-window-image:last-of-type {
    margin-right: 0rem;
}
.form-window.fixed-window .form-window-image .app-button-sm {
    padding: 0.6rem 0.8rem;
}
.form-window-background.fixed-window {
    background-color: black;
    z-index:6000;
}
.form-window.fixed-window .form-window-header-bar {
    display: flex;
    justify-content: flex-end;
    margin: 1rem;
    margin-bottom: 0;
}
.form-window.fixed-window .form-window-header-bar button {
    font-size: 1.6rem;
    margin-bottom: 0;
}
.form-window.fixed-window .form-window-body {
    padding-left:2.5rem;
    padding-right:2.5rem;
}
.form-window.fixed-window input {
    background-color: transparent;
    border-color: rgba(100,100,100,.3);
    color: white !important;
}
.form-window.fixed-window textarea {
    background-color: transparent;
    border-color: rgba(100,100,100,.3) !important;
    color: white !important;
}
.form-window.fixed-window .app-form-field-image-container {
    border-color: rgba(100,100,100,.3) !important;
}
.form-window.fixed-window .app-form-field {
    padding-bottom: .7rem !important;
}
.form-window.fixed-window .app-form-field.form-check {
    display: flex;
    align-items: center;
    flex-direction: row;
    flex: inherit;
    padding: 0.5rem 0.2rem !important;
    padding-bottom: 0.7rem !important;
    padding-top: 0 !important;
}
.form-window.fixed-window .form-window-content .form-window-footer {
    margin: 1rem 2.5rem;
    padding-bottom: 0.5rem;
    padding-top: 1rem;
    border-color: rgba(100,100,100,.3);
}
.form-window.fixed-window .form-window-body .app-form-field-image {
    padding-bottom: 0 !important;
}
.form-window.fixed-window .form-window-footer .add-button label {
    color:white;
}
.form-window.fixed-window .form-window-tab-items {
    font-size: 150%;
    margin-left: 2.5rem;
    margin-right: 2.5rem;
    margin-bottom: 1rem;
    display:flex;
    align-items:center;
}
.form-window.fixed-window .form-window-tab-item {
    display: flex;
    align-items: center;
    padding: 0.5rem;
}


.form-window.fixed-window .form-window-tab-items button {
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    border-radius: 0px;
    padding: 0.4rem 0.8rem;
    color: white;
}
.form-window.fixed-window .form-window-tab-items button:hover {
    background-color: rgba(100,100,100,.3);
}
.form-window.fixed-window .form-window-tab-items button:active,
.form-window.fixed-window .form-window-tab-items button.selected {
    border-color: #0069D9;
    background: #0069D9;
    color: white;
    opacity: 1 !important;
}

.form-window.fixed-window .form-window-background-image {
    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;
    z-index: -1;
    WIDTH: 100%;
    height: 82px;
}

.form-window-message-container {
    margin-left: 2.5rem;
    margin-right: 2.5rem;
}

.form-window-message {
    font-size: 1.4rem;
    margin-top: 0rem;
    margin-bottom: 1rem;
}




.floating-window {
    z-index: 6003;
}
.floating-window .form-window-content {
   /* 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;*/
}

.form-window-background.floating-window.show {
    opacity: .3;
}
.floating-window .form-window-content {
    background: #181818;
    color: white;
    width: 100%;
    flex: 1;
    max-width: unset;
    max-height: unset;
    box-shadow: 0 1px 2px rgb(0 0 0 / 7%), 0 2px 4px rgb(0 0 0 / 7%), 0 4px 8px rgb(0 0 0 / 7%), 0 8px 16px rgb(0 0 0 / 7%), 0 16px 32px rgb(0 0 0 / 7%), 0 32px 64px rgb(0 0 0 / 7%);
    border-radius: 6px;
    border: none;
}
.floating-window .app-form-field-autocomplete-selection .form-window-content {
    box-shadow: none;
    border-radius: unset;
}
.floating-window .form-window-content .form-window-header {
    background: unset;
    border-bottom: solid 1px rgba(100,100,100,.3);
    margin-left: 2rem;
    margin-right: 2rem;
    margin-bottom: 1rem;
    margin-top: 1rem;
}

.floating-window .form-window-content > .content {
    background: unset;
}
.floating-window .form-window-content .form-window-header .form-window-title {
    color: white;
    margin: 0;
    font-size: 1.8rem !important;
}
.floating-window .form-window-content .form-window-header button {
    color: white;
    margin: 0;
    padding-bottom: 0.5rem;
    font-size: 1.4rem;
}
/*.floating-window .form-window-images {
    display: flex;
}
.floating-window .form-window-image {
    flex: 1;
    width: 100%;
    margin-bottom: 1rem;
    margin-top: 0.5rem;
    margin-right: 1.5rem;
}*/
.floating-window .form-window-image:last-of-type {
    margin-right: 0rem;
}
.floating-window .form-window-image .app-button-sm {
    padding: 0.6rem 0.8rem;
}
.form-window-background.floating-window {
    background-color: black;
    z-index:6002;
}
.floating-window .form-window-header-bar {
    display: flex;
    justify-content: flex-end;
    margin: 1rem;
    margin-bottom: 0;
}
.floating-window .form-window-header-bar button {
    font-size: 1.6rem;
    margin-bottom: 0;
}
.floating-window .form-window-body {
    padding-left:2.5rem;
    padding-right:2.5rem;
}
.floating-window input {
    background-color: transparent;
    border-color: rgba(100,100,100,.3);
    color: white !important;
}
.floating-window .app-form-field-autocomplete-container input:focus,
.floating-window .app-form-field-autocomplete-container input.focused {
    border-color: dodgerblue !important;
}
.floating-window textarea {
    background-color: transparent;
    border-color: rgba(100,100,100,.3) !important;
    color: white !important;
}
.floating-window .app-form-field-image-container {
    border-color: rgba(100,100,100,.3) !important;
}
.floating-window .app-form-field {
    padding-bottom: .7rem !important;
}
.floating-window .app-form-field.form-check {
    display: flex;
    align-items: center;
    flex-direction: row;
    flex: inherit;
    padding: 0.5rem 0.2rem !important;
    padding-bottom: 0.7rem !important;
    padding-top: 0 !important;
}
.floating-window .form-window-content .form-window-footer {
    margin: 1rem 2.5rem;
    padding-bottom: 0.5rem;
    padding-top: 1rem;
    border-color: rgba(100,100,100,.3);
    margin-top:0;
}
.floating-window .form-window-body .app-form-field-image {
    padding-bottom: 0 !important;
}
.floating-window .form-window-footer .add-button label {
    color:white;
}
.floating-window .form-window-tab-items {
    font-size: 150%;
    margin-left: 2.5rem;
    margin-right: 2.5rem;
    margin-bottom: 1rem;
    display:flex;
    align-items:center;
}
.floating-window .form-window-tab-item {
    display: flex;
    align-items: center;
    padding: 0.5rem;
}


.floating-window .form-window-tab-items button {
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    border-radius: 0px;
    padding: 0.4rem 0.8rem;
    color: white;
}
.floating-window .form-window-tab-items button:hover {
    background-color: rgba(100,100,100,.3);
}
.floating-window .form-window-tab-items button:active,
.floating-window .form-window-tab-items button.selected {
    border-color: #0069D9;
    background: #0069D9;
    color: white;
    opacity: 1 !important;
}

.floating-window .form-window-background-image {
    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;
    z-index: -1;
    WIDTH: 100%;
    height: 82px;
}

.app-form-field .html-display {
    font-size: 1.1rem;
    padding: 0.75rem 0.5rem;
    height: 100%;
    border: solid 1px rgba(100,100,100,.5) !important;
    border-radius: 6px;
    margin: 0;
}
.form-window .form-window-content .content > .container {
    max-width: unset;
    padding: 0 .5rem;
}
.app-icons i.material-icons {
    padding-right:3px;
}
:root {
    --player-version: '2.4.15';
}

.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;
    margin-left: 2.5rem;
    margin-bottom: .6rem;
}
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;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    width: fit-content;
}
#player-controls-container #position-event-info-time {
    font-size: .7rem;
}
#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 #videoPlayback {
    z-index: 6;
}
#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:6;
    transition:.3s;
    opacity:1;
}
#player.show-access-code.preview.playing #videoPoster,
body.is-safari #player.show-access-code.preview.playing #videoPoster {
    opacity: 0;
}

#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 30%);
}
/*body:not(.is-safari, .mobile-view) #playerControls {
    background: linear-gradient(0deg, rgba(0, 0, 0, .3), transparent 30%);
}*/
body:not(.is-safari, .mobile-view) #player.showing-controls #playerData {
    background: linear-gradient(180deg, rgba(0, 0, 0, .9), transparent 30%);
}
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:not(.use-vimeo) #playerControls,
body:not(.is-safari, .mobile-view) #player.paused:not(.use-vimeo) #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: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    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-message.message-ex {
        font-size: 1.8rem;
    }
    .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;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.paywall-control.show {
    opacity:1;    
    pointer-events:all;
}
.paywall-control .paywall-title {
    font-size: 1.5rem;
    text-align: center;
    padding: .5rem;
}
.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;
}


:root {
    --project-version: '2.5.23';
}

#MaintenancePage {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    background-color: black;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#MaintenancePage .maintenance-title {
    font-size:2rem;
}
#MaintenancePage .app-button {
    margin-top:1rem;
}


.app-button-icon-label {
    flex-wrap: nowrap;
}

.loader-container {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

.library-page .loader-container {
    z-index:5;
}
#body-container > .body > #loader.loader-container {
    /*Commented out the z-index below but doesn't show up if not set to at least 3*/
    z-index: 3;
    position: fixed;
    /*Got tired of seeing everything while loading, not sure if this will work*/
    z-index: 6;
    background-color: rgba(0, 0, 0, 1);
}

#main-screen.related .media-layout-grid .recent-date > .recent-grouping > .loader-io,
#main-screen.brand .media-layout-grid .recent-date > .recent-grouping > .loader-io,
#main-screen.category .media-layout-grid .recent-date > .recent-grouping > .loader-io {
    min-height: 250px;
}

.blank-sound {
    pointer-events: none;
}

.sections-container-privacy-message {
    display: flex;
    flex-direction: column;
    line-height: 1.6;
    margin: 1rem 2rem;
    align-items: center;
    justify-content: center;
}

    .sections-container-privacy-message > .container {
        max-width: 50%;
    }

.sections-container-terms-message {
    display: flex;
    flex-direction: column;
    line-height: 1.6;
    margin: 1rem 2rem;
    align-items: center;
  /*  justify-content: center;*/
}

    .sections-container-terms-message > .container {
        max-width: 50%;
    }

.sections-container-section {
    display: flex;
    flex-direction: column;
    line-height: 1.6;
    margin: 1rem 2rem;
    align-items: center;
    justify-content: center;
}

    .sections-container-section > .container {
        max-width: 50%;
    }

.subsection-noItems {
    font-size: .8rem;
    margin-left: 0.5rem;
    padding-bottom: 0.5rem;
    font-style: italic;
}

/*.rent-button .rent-price {
    padding-left: .5rem;
}

.purchase-button .purchase-price {
    padding-left: .5rem;
}

.subscribe-button .subscribe-price {
    padding-left: .5rem;
}*/

.layout-screen {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: normal;
    transition: .2s;
}

.subscribe-screen-container {
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
}

#default-screen {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: normal;
}

.default-screen-container {
    height: 100%;
    text-align: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
}

.offscreen-icon {
    position: absolute;
    left: -10000px;
    top: -10000px;
}

.parallax-mirror {
    visibility: visible;
    z-index: -100;
    position: fixed;
    top: 0px;
    left: 0px;
    overflow: hidden;
    transform: translate3d(0px, 0px, 0px);
    height: 100%;
    width: 100%;
    display: flex;
    /* object-fit: cover; */
    justify-content: center;
    align-items: baseline;
    pointer-events: none;
}

.parallax-slider {
    /* transform: translate3d(0px, 0px, 0px);
    position: absolute;
    top: 0px;
    left: 0px;
    height: 1268px;
    width: 1903px;
    max-width: none;*/
    object-fit: cover;
}

#button-access-code {
    outline: 0;
    color: white;
    border-color: #ffffff;
    /* margin: 0 .6rem 1.2rem; */
    padding: .5rem 2.2rem;
    min-width: 188px;
    border-width: 1px;
    background-color: transparent;
    margin-top: 1rem;
    border-style: solid;
    cursor: pointer;
    transition: .3s;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 1rem;
    margin-right: 1rem;
    min-width: 250px;
}

body.no-transition #button-access-code {
    transition: none;
}

body:not(.mobile-device) #button-access-code:hover,
#button-access-code:focus {
    background-color: white;
    color: black;
    opacity: .8;
    border-color: white;
}

#button-access-code:active {
    background-color: rgba(255,255,255,.3);
    color: white;
    opacity: 1;
}

#button-access-code i {
    font-size: .9rem;
    margin-right: .5rem;
}

#button-login {
    outline: 0;
    color: white;
    border-color: #ffffff;
    /* margin: 0 .6rem 1.2rem; */
    padding: .5rem 2.2rem;
    min-width: 188px;
    border-width: 1px;
    background-color: transparent;
    margin-top: 1rem;
    border-style: solid;
    cursor: pointer;
    transition: .3s;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 1rem;
    margin-right: 1rem;
    min-width: 250px;
}

body.no-transition #button-login {
    transition: none;
}


body:not(.mobile-device) #button-login:hover,
#button-login:focus {
    background-color: white;
    color: black;
    opacity: .8;
    border-color: white;
}

#button-login:active {
    background-color: rgba(255,255,255,.3);
    color: white;
    opacity: 1;
}

#button-login i {
    font-size: .9rem;
    margin-right: .5rem;
}

#login-screen {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: normal;
}

.login-container {
    position: relative;
    top: 0px;
    height: 700px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#login-back-button {
    padding: 1rem;
    margin: 0;
    border: 0;
    outline: 0;
    background-color: transparent;
    position: absolute;
    top: 1rem;
    left: 2rem;
    color: white;
    cursor: pointer;
    transition: .3s;
    opacity: .7;
    font-size: 3rem;
}

body.no-transition #login-back-button {
    transition: none;
}

body:not(.mobile-device) #login-back-button:hover {
    opacity: 1;
}

#login-back-button:focus {
    opacity: 1;
}

#login-back-button:active {
    opacity: .8;
}

.login-logo {
    margin: 1rem;
    text-align: center;
}

.login-message-container {
    text-align: center;
}

#login-title {
    font-size: 3.2rem;
    font-weight: 600;
}

#login-message {
    font-size: 2rem;
    margin-left: 2rem;
    margin-right: 2rem;
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
    line-height: 1.4;
}

#login-request {
    font-size: 3rem;
}

#login-url {
    font-size: 2.4rem;
    margin-bottom: .2rem;
    font-size: 2.4rem;
    margin-bottom: 1.5rem;
    margin-top: 0rem;
}

    #login-url a {
        color: white;
        text-decoration: none;
    }

#login-access-code {
    font-size: 3rem;
    user-select: text;
    letter-spacing: 2px;
    font-weight: bold;
}

#login-error {
    font-size: 3rem;
    color: red;
    margin-top: 1.2rem;
}

.login-loader {
    text-align: center;
    align-items: center;
    justify-content: center;
    display: flex;
}


#main-screen {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: inherit;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity:0;
    transition:.2s;
}
#main-screen.show {
    opacity:1;    
}
/*body.is-television #main-screen {
    min-width: 960px;
    max-width: 960px;
    width: 960px;
    min-height: 540px;
    max-height: 540px;
    height: 540px;
}*/

.playback #main-screen,
.playback .project-base-screen {
    display: none !important;
}

#chat {
    z-index: 499;
    z-index: 600;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0rem;
    right: -30%;
    width: 30%;
    bottom: 0rem;
    transition: .3s ease-in-out;
    background-color: black;
    border-left: 1px solid #444;
}

    #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;
}

#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 !important;
}

.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: #FF0062;
    padding: 1rem;
    margin: .3rem 1.5rem;
    border-radius: 2rem;
}

.chat-item.is-local .chat-item-text {
    background-color: #1C1C22;
    /* background: linear-gradient(#12121A, #121216) !important;*/
    background-color: inherit !important;
}

.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: -2.5rem;
    left: .5rem;
    right: 0;
    padding: .25rem .5rem;
    transition: .3s ease-in-out;
    z-index: -1;
}

/*#chat.connected .chat-status {
    top: 0;
}
*/

#chat.disconnected .chat-status {
    top: -2.5rem;
    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: .3s;
}

.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: .3s;
}

.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;
}

.app-project-header {
    background-color: transparent;
    min-height: 4rem;
    min-height: 66px;
    width: calc(100% - 1rem);
    margin-right: .7rem;
    width: 100%;
    margin-right: 0rem;
    /*width: calc(100% - 10px);*/
    /* align-items: center; */
    /* justify-content: center; */
    display: flex;
    align-items: center;
    padding-left: 1.75rem;
    padding-left: 3.5rem;
    padding-right: 1.9rem;
    padding-right: 2.75rem;
    /*padding-right: 1rem;*/
    transition: .4s all;
    z-index: 11;
    /*  z-index: 2;*/
    /* position:absolute;*/
    position: relative;
    top: 0;
    left: 0px;
    pointer-events: none;
}
body:not(.mobile-device) .app-project-header {
    padding-left: 3.6rem;
}
.app-project-header > button {
    pointer-events:all;
}
body.mobile-device .app-project-header > button {
    touch-action: manipulation;
}
body.is-safari:not(.mobile-device) .app-project-header > button > div {
    position:relative;
   /* top:1px;*/
}
.app-project-header .header-options {
    pointer-events:all;
}

/*.app-project-header .header-background {
    position: absolute;
    left: 0;
    right: 0;*/
    /* bottom: 0; */
    /*top: -90px;
    opacity: 1;*/
    /* background-color: inherit; */
    /* min-height: 5rem; */
    /*background-color: rgba(0, 0, 0, .9);*/
    /* background-color: rgba(0, 0, 0, .7); */
    /* background: linear-gradient(180deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, .1)); */
    /*transition: .5s ease-in-out;
    pointer-events: none;
    box-shadow: 0px 0px 120px 120px #141414 !important;
}*/
.app-project-header .header-background {
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    top:0;
    opacity:1;
    /* background-color: inherit;*/
    /* min-height:5rem;*/
    background-color: rgba(0, 0, 0, .9);
    background-color: rgba(0, 0, 0, 0);
    background: linear-gradient(180deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, 0));
    transition:.5s ease-in-out;
    pointer-events:none;
}
.app-project-header.sticky .header-background {
    opacity: 1;
    background-color: rgba(0, 0, 0, .9);
    background: linear-gradient(180deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, .7));
}
.app-project-header.header-ex {     
    top: 4rem;
}
.app-project-header.header-ex.sticky {
   /* background-color: inherit;*/ 
  /*  min-height: 6rem;
    top:0;*/
}

.app-project-header.header-ex.drop-image {
    border: solid 1px;
    border-style: dashed;
}

body.no-transition .app-project-header {
    transition: none;
}

#main-screen > .app-project-header > .logo {
    padding-right: .25rem;
}
/*body.is-hosted #main-screen > .app-project-header > .logo {
    display: none !important;
}*/

.header-seperator {
    flex: 1;
}
/*.app-project-header .logo {
    margin-right: 1rem;
}*/
.app-project-header > button.logo {
    padding-top: .5rem;
    padding-left: 1px;
    top: 0px;
    height: 70%;
    font-size: 1rem;
    background: transparent;
    border-color: transparent;
    padding-right: .25rem;
    margin-right: .5rem;
    position: relative;
    display: flex !important;
    border: none;
    align-items: center;
    padding-bottom: 0;hhhhgggggggg
}
/*.app-project-header > button.logo:hover {    
    background-color: black;
}*/
.app-project-header img {
    max-height: 42px;
    max-height: 38px;
    padding-right: 1rem;
    padding-left: 0px;
    padding-top: 0rem;
    position: relative;
    top: 0px;
}

/*.app-project-header #header-title {
    display: none;
    flex: 1;
}*/

.header-left {
    flex: 0;
    transition: .3s;
}
.header.header-ex .header-left {
    flex: .33;
}
.header-right {
    flex: 0;
    transition:.3s;
}
.header.header-ex .header-right {
    flex: .3;
}
.header-options {
    display: flex;
    align-items: baseline;
    position: relative;
    align-items: center;
    /* top: -3px;*/
}
.header.header-ex .header-options {
    position: fixed;
    right: 10px;
    top: 6px;
}
.navbar-social-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-right:2rem;
}
.navbar-social-links ul {
    display:flex;
    padding-top: 8px;
}
.navbar-social-links ul li a p {
    display: none;
}
.navbar-social-links ul li a {
    color: white;
    opacity: .8;
    transition: .2s;
    line-height: 1.6;
    margin: 0px 3px;
    padding: 10px 15px;
    opacity: .8;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 600;
    display: block;
    padding: 0.5rem 1rem;
}


.app-project-header > button:not(#button-subscribe, .logo) {
    border: 0;
    outline: 0;
    background-color: transparent;
    color: white;
    font-size: 1.2rem;
    padding-left: 1.4rem;
    padding-right: 1.4rem;
    transition: .3s;
    cursor: pointer;
    text-transform: uppercase;
    border-bottom: solid 2px transparent;
}
.app-project-header > button:active {
    transition:.1s;
}

.dms-on-demand .app-project-header > button.button-user {
    padding: 0;
    font-size: 2.2rem;
    margin-right: 1rem;
    position: relative;
    top: 2px;
}

.app-project-header > button {
    border-bottom: solid 2px transparent;
    height: 100%;
}

    .app-project-header > button.selected {
        color: white;
        cursor: default;
        border-color: #FF0062;
        opacity: 1;
        /*background-color: #191919;*/
    }

    body:not(.mobile-device) .app-project-header > button:hover {
        /* background-color:#191919;*/
        color: white;
    }

    .app-project-header > button:focus {
        background-color: #FF0062;
        color: white;
    }

    .app-project-header > button:active {
        background-color: #FF0062;
        color: white;
        opacity: .9;
    }

    body:not(.mobile-device) .app-project-header > button.logo:hover {
        background-color: unset;
    }

    .app-project-header > button.logo:focus {
        background-color: unset;
    }

    .app-project-header > button.logo:active {
        background-color: unset;
    }

    .app-project-header > button.selected:focus {
        background-color: #FF0062;
        opacity: .9;
    }

body.no-transition .app-project-header > button {
    transition: none;
}

.app-project-header > button > div {
    position: relative;
    top:0px;
    /*text-transform: uppercase;*/
    text-shadow: -1px 1px 2px rgb(0 0 0);
    font-size:120%;
}
.no-shadow .app-project-header > button > div {
    text-shadow: none;
}
/*.app-project-header > button#button-subscribe > div {
    top: 3px;
}*/
.app-project-header #button-options {
    font-size: 1.8rem;
    opacity: 1;
    transition: .2s;
    cursor: pointer;
    padding: .5rem;
    /* padding-bottom: .25rem;*/
    margin-right: 1rem;
    margin-left: 1rem;
    transform: matrix(1.0, 0, 0, 1.0, 0, 0);
    border: none;
    border-bottom: solid 2px transparent;
}

/*body:not(.mobile-device) .app-project-header #button-options:hover {*/
    /*transform: scale(1.3);*/
    /*transform: matrix(1.3, 0, 0, 1.3, 0, 0);
    transform: matrix(1.2, 0, 0, 1.2, 0, 0);
}

.app-project-header #button-options:focus-visible {*/
    /* transform: scale(1.4);*/
    /*transform: matrix(1.1, 0, 0, 1.1, 0, 0);
    transform: matrix(1.2, 0, 0, 1.2, 0, 0);
}

.app-project-header #button-options:active {*/
    /* transform: scale(1.2);*/
    /*transition: .1s;*/
    /*transform: matrix(1.0, 0, 0, 1.0, 0, 0) !important;
}*/


.dms-on-demand.default-screen .app-project-header #button-options,
.dms-on-demand.checkout-screen .app-project-header #button-options,
.dms-on-demand.login-screen .app-project-header #button-options,
.dms-on-demand.subscribe-screen .app-project-header #button-options,
.dms-on-demand.terms-screen .app-project-header #button-options,
.dms-on-demand.privacy-screen .app-project-header #button-options,
.dms-on-demand.contact-screen .app-project-header #button-options {
    /*font-size: 1.6rem;
    cursor: pointer;
    padding: 0.5rem;*/
    /* margin-right: 0.5rem; */
    /* padding-left: 1.5rem; */
    /* padding-right: 1.5rem; */
    /*padding-top: 1rem;
    padding-right: .5rem;*/
}

.dms-on-demand.login-screen .dms-login-details-header {
    line-height: 1.4;
}
.dms-on-demand.subscribe-screen,
.dms-on-demand.login-screen {
/*    position: relative;
    flex: 1;
    align-items: baseline;*/
}
.dms-on-demand.subscribe-screen .dms-on-demand-form-container,
.dms-on-demand.login-screen .dms-on-demand-form-container {
    max-height: unset;
    flex-direction: column;
    flex: 1;   
   /* min-height: 100vh;*/
    height: 100%;
}

.dms-on-demand.subscribe-screen .dms-on-demand-selection-container,
.dms-on-demand.checkout-screen .dms-on-demand-selection-container {
    /*  max-height: calc(100% - 100px);*/
    /*margin-top: 6vh;*/
}
.dms-on-demand.subscribe-screen .dms-on-demand-selection-container {
    padding-top: 4rem;
    padding-top: 0rem;
    padding-bottom: 0rem;
}
.dms-on-demand.login-screen .dms-on-demand-selection-container {
    padding-top: 4rem;
    padding-bottom: 4rem;
}


.dms-on-demand.default-screen .app-project-header #button-options {
    display: none;
}

.dms-on-demand.subscriptions-screen .app-project-header #button-options {
    /*font-size: 1.6rem;
    cursor: pointer;
    padding: 0.5rem;*/
    /* margin-right: 0.5rem; */
    /*padding-left: 1.5rem;*/
    /* padding-right: 1.5rem; */
    /*padding-top: 1rem;
    padding-right: 1rem;*/
}
.dms-on-demand.subscriptions-screen.login-handler .app-project-header #button-options {
    display: none !important;
}
.dms-on-demand.subscriptions-screen.login-handler .app-project-header .dms-on-demand-form-close {
    display: none !important;
}

.dms-on-demand.admin-screen .app-project-header #button-options {
    padding-top: 1rem;
}

.app-project-header #button-options:focus {
    color: white;
    opacity: 1;
    /*transform:scale(1.4);*/
}

.app-project-header #button-options:active {
    background-color: transparent;
    /*opacity: .8;*/
}

.app-project-header #button-options.selected {
    /* color: white;*/
    opacity: 1;
     border-bottom: solid 2px #FF0062 !important;
}

body:not(.mobile-device) .app-project-header #button-options:hover {
    /*opacity: .9;*/
    border-bottom: solid 2px #FF0062 !important;
}
.app-project-header #button-options:active {
    /* opacity: .7;*/
    border-bottom: solid 2px #FF0062 !important;
}

/*.app-project-header #button-options > i {
    position: relative;
    font-size: 1.8rem;*/
    /* top: 1px;*/
    /*}*/

    .body-container {
    flex: 1;
    display: flex;
    /*flex-direction: column;*/
    overflow: hidden;
    margin-top: 0px;
    margin-top: 0px;
    margin-left: 0rem;
    /* transition: .3s;*/
}

#body-container.body-container {
    flex-direction: column;
    width: 100%;
    /*  z-index: 12;*/
}
/*#main-screen.channels #body-container.body-container {
     z-index: 12;
}
*/
/*#main-screen.sticky .body-container {
    margin-top: -90px;
}*/
#main-screen.preferences .body-container {
    margin-top: 0px;
}
#main-screen.terms .body-container {
    margin-top: 0px;
}
#main-screen.terms .body-container {
    margin-top: 0px;
}

#spacer-screen {
    margin-top: 64px;
    flex-direction: column;
    align-items: center;
    margin-left: 4rem;
}

    #spacer-screen.selected {
        display: flex;
    }

    #spacer-screen .spacer-container {
        max-width: 60%;
        display: none;
    }

body.can-edit #spacer-screen .spacer-container {
    display: initial;
}

#spacer-screen .spacer-header {
    font-size: 3.4rem;
    padding-bottom: 1rem;
}

#spacer-screen .spacer-message {
    font-size: 2.2rem;
    padding-bottom: 1rem;
}

#spacer-screen .spacer-options {
    font-size: 1.8rem;
    padding-bottom: 1rem;
}

#spacer-screen .spacer-option {
    display: flex;
    line-height: 1.4;
    padding-bottom: 0.5rem;
}

#spacer-screen .spacer-options a {
    display: flex;
    line-height: 1.4;
    padding-bottom: 0.5rem;
    color: dodgerblue;
}

#spacer-screen .spacer-option .spacer-number {
    min-width: 2rem;
    text-align: right;
    padding-right: 0.5rem;
}

.body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}
/*#main-screen.search .body {
    margin-left: 20rem;
}*/
body.tv-device .body {
    overflow: hidden;
}

.body .tab-page {
    display: none;
    background: #1C1C22;
    /*background: linear-gradient(#12121A, #121216) !important;*/
    background: inherit;
    /*min-height: 100%;*/
    /*overflow: auto;*/
    flex: 1;
}

    .body .tab-page.no-quickaccess {
        overflow: hidden;
    }

    .body .tab-page#recent-screen {
        overflow: visible;
    }

    .body .tab-page.selected {
        display: block;
    }
    .body #cache-screen {
        overflow:unset;    
    }
    .body #cache-screen.selected {
        display:flex;
    }


.header-menu {
    display: none;
    /*box-shadow: 2px 0 8px rgba(0,0,0,.3); */
    flex-direction: column;
    flex-grow: 1;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
    transition: width .3s;
    position: absolute;
    top: .5rem;
    left: 0;
    bottom: 0;
    /*width: 4.5rem;*/
    align-items: center;
    z-index: 2;
}
body.no-transition .header-menu {
    transition: none;
}

body.mobile-device .header-menu {
    bottom: 0;
    position: absolute !important;
    left: unset !important;
}

.header-menu button {
    border: 0;
    outline: 0;
    background-color: transparent;
    color: lightgray;
    font-size: 1.2rem;
    transition: .3s;
    border-right: solid 2px #2a2a2a;
    border-right: solid 2px transparent;
    /*border-left: solid 2px #2a2a2a;*/
    width: 4rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    opacity: .7;
    cursor: pointer;
}

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

body:not(.mobile-device) .header-menu button:hover {
    background-color: #191919;
    border-right-color: #191919;
    color: white;
    opacity: 1;
}

.header-menu button:focus {
    background-color: #191919;
    border-right-color: #191919;
    color: white;
    opacity: 1;
}

.header-menu button:active {
    background-color: #191919;
    border-right-color: #FF0062;
    color: white;
    opacity: 1;
}

.header-menu button.selected {
    background-color: #191919;
    border-right-color: #FF0062;
    color: white;
    opacity: 1;
    cursor: default;
}

.app-project-footer {
    background-color: transparent;
    width: 100%;
    display: flex;
    justify-content: center;
    transition: .3s;
    width: 100%;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-right: 1rem;
    bottom: 0;
    display: flex;
    align-items: center;
    z-index: 11;
    position: absolute;
    pointer-events: none;
    display: none !important;
}
.app-project-footer button {
    pointer-events:auto;
}
.unavailable-screen .app-project-footer {
    display: none !important;
}

.app-project-footer .background {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    /* transition: .3s;*/
}

.app-project-footer.sticky .background {
    opacity: 1;
}

body.no-transition .app-project-footer {
    transition: none;
}

body.mobile-device .footer {
    display: none;
}

.app-project-footer .links {
    display: flex;
    padding-left: 2rem;
    padding-right: 2rem;
    align-items: center;
    padding-bottom: 1rem;
    padding-top: 1rem;
    display:none;
}
    /*.app-project-footer .links > div {
    display:none;
}*/
    .app-project-footer .links button {
        border: 0;
        outline: 0;
        background-color: transparent;
        color: lightgray;
        font-size: .9rem;
        /* padding-left: 1rem; */
        margin-right: .7rem;
        margin-left: .7rem;
        cursor: pointer;
        transition: .3s;
        white-space: nowrap;
        padding: 0.3rem 0.3rem;
    }

.app-project-footer .account {
    z-index: 3;
}

.app-project-footer .terms {
    z-index: 3;
}

.app-project-footer .privacy {
    z-index: 3;
}

.app-project-footer .contact {
    z-index: 3;
}

.app-project-footer .help {
    z-index: 3;
}

.app-project-footer .copyright {
    z-index: 3;
}

.app-project-footer .appVersion {
    z-index: 3;
}

.app-project-footer .playerOptionFullscreen {
    z-index: 3;
}

body.no-transition .app-project-footer .links button {
    transition: none;
}

body:not(.mobile-device) .app-project-footer .links button:hover {
    color: white;
}

.app-project-footer .links button:focus {
    color: white;
}

.app-project-footer .links button:active {
    opacity: .8;
}
/*body.is-hosted .app-project-footer .links .account {
    display:none;
}
body.is-hosted .app-project-footer .links .terms {
    display: none;
}
body.is-hosted .app-project-footer .links .privacy {
    display: none;
}
body.is-hosted .app-project-footer .links .contact {
    display: none;
}
body.is-hosted .app-project-footer .links .help {
    display: none;
}
body.is-hosted .app-project-footer .copyright > div {
    display: none;
}*/

.app-project-footer .appVersion {
    color: lightgray;
    font-size: .8rem;
    padding-left: 1rem;
    padding-right: 1rem;
    white-space: nowrap;
    position: relative;
    top: 2px;
    opacity: .3;
    display:none;
}

.app-project-footer .copyright {
    color: lightgray;
    font-size: .9rem;
    padding-left: 2rem;
    padding-right: 1rem;
    white-space: nowrap;
    position: relative;
    top: 2px;
    top: 2.6px;
    opacity: .3;
    display: none;
}
/*.app-project-footer .copyright > div { 
    display:none;
}*/

.app-project-footer {
    /* padding-top: 1rem; */
    /* min-height: 3rem;
    align-items: center;
    flex-direction: row;
    justify-content: initial;*/
}

    .app-project-footer .links {
        padding-top: 0;
        padding-bottom: 0;
        padding-right: 1rem;
        padding-left: 1rem;
    }

        .app-project-footer .links button {
            font-size: .9rem;
        }

    .app-project-footer .copyright {
        width: 100%;
        text-align: right;
        font-size: .8rem;
        padding-left: 0rem;
        padding-right: 1rem;
    }
/*
.navbar-usage-container.horizontal-display {
    padding-bottom: 0rem;
    align-items: end;
    padding-right: 1rem;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    width: unset;
}

    .navbar-usage-container.horizontal-display .navbar-usage-bar {
        height: 10px;
        width: 160px;
    }

    .navbar-usage-container.horizontal-display .navbar-usage-label {
        flex-direction: row;
        font-size: .6rem;
        padding-top: 0;
        padding-bottom: 0;
    }

        .navbar-usage-container.horizontal-display .navbar-usage-label > span {
            padding-right: .3rem;
        }

    .navbar-usage-container.horizontal-display #labelUsageLabel {
        padding-right: .3rem;
    }

    .navbar-usage-container.horizontal-display .navbar-usage {
        padding-bottom: 0;
        padding-left: 0.3rem;
        padding-top: 0.3rem;
        padding-right: 0.6rem;
    }

    .navbar-usage-container.horizontal-display .navbar-usage-bar-used {
        height: 100%;
    }

.app-project-footer .copyright {
    width: unset;
    padding-left: 3rem;
}

.navbar-usage-container {
    display: none;
}

body.can-edit .navbar-usage-container {
    display:flex;
}*/
/*
.edit-button {
    display:none;
}
.can-edit .edit-button {
    display:initial;
}
*/
#input-search {
    background-color: rgb(20, 20, 20);
    color: rgb(255, 255, 255);
    border: 0;
    outline: 0;
    padding: 1rem;
    letter-spacing: .5px;
    padding-bottom: .5rem;
    margin-left: 1.5rem;
    margin-right: .5rem;
    width: 300px;
    height: inherit;
    /*min-width: 200px;*/
    border-bottom: solid 2px #FF0062;
    display: none;
}


@media only screen and (max-width: 1000px) {
    #playerControls.video #volume-bar-container {
        flex: .5;
    }
    /*#playerControls.video .volume-bar {
        display:none;
    }*/
}

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

    #volume-bar-container {
        display: none !important;
    }

    .app-project-footer .links > div {
        display: none;
    }

    /*.app-project-footer .copyright {
        display: none;
    }
*/
}

@media only screen and (min-height: 1200px) {
    #up-next-info .library-group .container {
        padding-top: 12px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        padding-bottom: 12px !important;
    }

    #up-next-info .library-group {
        width: 480px !important;
        min-width: 480px !important;
    }

        #up-next-info .library-group .image {
            width: 480px !important;
            height: 480px !important;
        }

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

        #up-next-info .library-group .name {
            font-size: 1.2rem !important;
        }

        #up-next-info .library-group .name2 {
            font-size: 1.1rem !important;
            padding-top: 3px;
        }

        #up-next-info .library-group .info {
            font-size: 1.1rem !important;
            padding-top: 5px !important;
        }
    /*#up-next-info .library-types-scroll-button {
        top: 80px !important;
    }*/
}

.player-data-channel {
    display: flex;
    align-items: flex-end;
    margin-bottom: 5px;
    position: absolute;
    bottom: 40px;
}

.recent-date > .name, .recent-date .name.section-button.disable-link {
    cursor: default !important;
}

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

    #search-keys {
        top: 3rem !important;
        left: 3rem !important;
        bottom: 2rem !important;
    }

    #back-to-player {
        font-size: .8rem !important;
    }

    .recent-date > .name, .recent-date .name.section-button {
        margin-left: 1.1rem !important;
    }

    .recent-date .header-info > .name {
        margin-left: 1rem !important;
    }

    .recent-grouping .library-group:first-of-type {
        margin-left: 1rem !important;
    }

    #cache-screen .recent-grouping .wrap-items .library-group:first-of-type {
        margin-left: 0 !important;
    }

    #cache-screen .recent-grouping .library-groups.wrap-items {
        margin-left: 1rem !important;
    }

    /*.search-section > .name {
        margin-left: 1rem !important;
    }*/

    /*.search-grouping .library-group:first-of-type {
        margin-left: 1rem !important;
    }*/
    #library-screen .library-types {
        margin-top: 1rem !important;
    }

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

    #channels-screen .library-types {
        margin-top: 1rem !important;
    }

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

    #genres-screen .genre-types {
        margin-top: 1rem !important;
    }

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

    .carousel-indicators {
        /*bottom: 13% !important;*/
    }
    .project-quick-access.full-info .project-layout-page-data {
        /*padding-left: 2rem !important;*/
    }

    /*.header {
        height: 3rem;
        min-height: 3rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        left: 1.3rem;
        left: 2rem;
        width: calc(100% - 4rem);
        width: 100%;
        left: 0;
        padding-left: 0px !important;
    }*/
    .app-project-header.sticky {
       /* min-height: 3rem;*/
    }
    /*.app-project-header #button-options {
        padding-left: .5rem;
        padding-left: 0rem;
    }*/
    .header .app-user-content-button-icon {
        font-size: 1.8rem;
        font-size: 1.4rem;
    }

    .header img {
        height: 1.8rem;
        /*padding-right: 1rem;*/
    }
        /*.header > button.logo {
            top: 0px;
        }*/

        .header #header-title {
            display: block;
            position: relative;
            top: 2px;
            font-size: 1rem;
            text-transform: uppercase;
            opacity: .8;
        }

    .header #button-options {
        font-size: 1.6rem;
        /* display: none; */
        top: -3px;
        position: relative;
    }

        .header > button:not(#button-options) {
            display: none;
        }

        /*.header > button.logo {
            padding-left: 1rem;
        }
*/
    #input-search {
        padding: .5rem;
    }

    .header-menu {
        display: flex !important;
        flex-direction: column;
        box-shadow: none;
        position: absolute !important;
        left: unset !important;
        display: none !important;
    }

    .project-layout-page-background-image-container {
       /* background: none !important;*/
    }

    .body {
        padding-left: 0;
        margin-left: 0rem;
        margin-left: 0rem;
    }

    /*#main-screen.search .body {
        padding-left: 0;
        margin-left: 23rem;
    }
*/
    #recent-dates {
        padding-top: 0rem !important;
        padding-bottom: .5rem !important;
    }

    .recent-date > .name, .recent-date .name.section-button {
        padding-bottom: 0rem !important;
    }

    .recent-date .header-info > .name {
        padding-bottom: .5rem !important;
    }
    /*.search-section > .name {
        padding-bottom:.5rem !important;
    }*/
    .app-project-footer {
        /* padding-top: 1rem; */
        height: 2rem;
        align-items: center;
        flex-direction: row;
        justify-content: initial;
    }
    .app-project-header {
        padding-right: .5rem;
    }
        .app-project-footer .links {
            padding-top: 0;
            padding-bottom: 0;
            padding-right: 1rem;
            padding-left: 1rem;
        }

            .app-project-footer .links button {
                font-size: .7rem;
            }

        .app-project-footer .copyright {
            width: 100%;
            text-align: right;
            font-size: .7rem;
            padding-left: 0rem;
            padding-right: 1rem;
        }

        .app-project-footer .appVersion {
            display: none;
        }

    /*.sections-tab {
        width: 14rem !important;
    }*/
    /*
    .sections-pages {
        padding: 2rem 2rem !important;
    }
*/
    .sections-page.log {
        left: 0px !important;
    }
/*
    .project-layout-page-title label {
        line-height: 3.5rem;
        text-align: center;
    }
    .project-quick-access.full-info .project-layout-page-data {
        max-width: unset !important;
    }
    .project-layout-page-title {
        position:relative;
        left:-1rem;
    }*/

}

@media only screen and (min-height: 1050px) {
    #up-next-info .drop-down {
        bottom: 64% !important;
    }
}

@media only screen and (min-height: 800px) {
    #up-next-info .library-group .container {
        padding-top: 10px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        padding-bottom: 10px !important;
    }
    /*#up-next-info .library-group {
        width: 380px !important;
    }
    #up-next-info .library-group .image {
        width: 380px !important;
        height: 285px  !important;
    }*/
    /*#up-next-info .library-group img {
        max-width: 380px !important;
        max-height: 285px !important;
    }*/
    #up-next-info .library-group .name {
        font-size: 1.1rem !important;
    }

    #up-next-info .library-group .name2 {
        font-size: 1rem !important;
    }

    #up-next-info .library-group .info {
        font-size: 1rem !important;
        padding-top: 3px !important;
    }
    /*#up-next-info .library-types-scroll-button {
        top: 80px !important;
    }*/
}

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

    /*.library-group-details > .image {
        min-height: 460px;
    }

        .library-group-details > .image img {
            max-height: 460px;
        }*/
}

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

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

}

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

    /*.library-types-scroll-button {
        top: 40px !important;
    }*/

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

    #download-info.expanded .downloader-items {
        height: 300px !important;
    }
}

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

    /*.library-types-scroll-button {
        top: 60px !important;
    }*/

   /* .library-group {
        width: 208px !important;
        min-width: 208px !important;
    }*/

        .library-group .container {
            padding-top: 8px !important;
            padding-left: 8px !important;
            padding-right: 8px !important;
            padding-bottom: 8px !important;
            /*min-height: 45px !important;*/
        }

        .library-group .image span {
            font-size: 1.2rem !important;
        }

    #up-next-info .library-group {
        width: unset !important;
        min-width: unset !important;
    }
/*
    .library-group .image {
        width: 208px !important;
        height: 208px !important;
    }

    .library-group img {
        max-width: 208px !important;
        max-height: 208px !important;
    }*/

    #up-next-info .library-group .image {
        width: unset !important;
        height: unset !important;
    }

    .library-group .name {
        font-size: .8rem !important;
    }

    .library-group .name2 {
        font-size: .7rem !important;
    }

    .library-group .info {
        font-size: .7rem !important;
        padding-top: 2px !important;
    }

    .library-group .expires {
        font-size: .7rem !important;
        padding-top: 2px !important;
    }

    .library-group .time {
        font-size: .7rem !important;
        padding-top: 2px !important;
    }

    .library-group .size {
        font-size: 0.7rem !important;
    }

    #download-info.expanded .downloader-items {
        height: 200px !important;
    }

    .recent-date > .name, .recent-date .name.section-button {
      /*  margin-left: 1rem !important;*/
    }

    .recent-date .header-info > .name {
      /*  margin-left: 1rem !important;*/
    }

    .recent-grouping .library-group:first-of-type {
       /* margin-left: 1rem !important;*/
    }

    #cache-screen .recent-grouping .wrap-items .library-group:first-of-type {
       /* margin-left: 0 !important;*/
    }

    #cache-screen .recent-grouping .library-groups.wrap-items {
    /*    margin-left: 1rem !important;*/
    }

    /*.search-section > .name {
        margin-left: 1rem !important;
    }
    .search-grouping .library-group:first-of-type {
        margin-left: 1rem !important;
    }*/
    #library-screen .library-types {
        margin-top: 1rem !important;
    }

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

    #playlists-screen .library-types {
        margin-top: 1rem !important;
    }

    #playlists-screen .library-groups {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    #channels-screen .library-types {
        margin-top: .5rem !important;
    }

    #channels-screen .library-groups {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    #genres-screen .genre-types {
        margin-top: 1rem !important;
    }

    #genres-screen .genre-groups {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    #recent-dates {
        padding-top: 0rem !important;
        padding-bottom: .5rem !important;
    }

    .recent-date > .name, .recent-date .name.section-button {
        padding-bottom: 0rem !important;
    }

    .recent-date .header-info > .name {
        padding-bottom: .5rem !important;
    }
    /*.search-section > .name {
        padding-bottom: .5rem !important;
    }*/

    .login-container .logo-image {
        padding-bottom: .5rem;
        padding-top: 1rem;
    }

        .login-container .logo-image img {
           /* width: 7rem;*/
            max-height: 7rem;
        }

    .login-container .logo-name {
        display: none;
    }

    #login-error {
        font-size: 2rem;
    }

    #login-title {
        font-size: 2.2rem;
        font-weight: 600;
    }

    .login-container #login-message {
        font-size: 1.2rem;
        line-height: 1.6rem;
    }

    .login-container #login-url {
        font-size: 1.1rem;
        margin-bottom: .2rem;
    }

    .login-container #login-access-code {
        font-size: 2.4rem;
    }

    .login-container #login-request {
        font-size: 1.6rem;
    }

    .login-container .loader {
        margin: 0;
        margin-top: 1rem;
        font-size: 6px;
    }
/*
    #options-info .sections-container {
        flex-direction: column;
    }

    #options-info .sections-tabs {
        flex-direction: row;
        padding: 0;
        box-shadow:none;
    }

    #options-info .sections-tabs button {
        text-align: center;
        width: unset;
    }*/
}

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

    /*.library-group-details > .image {
        min-height: 85px !important;
    }
    .library-group-details > .image img {
        max-height:85px !important;
    }*/
    #up-next-info {
        position: unset;
    }

        #up-next-info .library-group {
            display: none;
        }

            #up-next-info .library-group.selected {
                width: unset !important;
                min-width: unset !important;
                display: block;
            }

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

        #up-next-info .library-group .container {
            display: none;
        }


    .login-container #login-title {
        font-size: 1.8rem;
    }

    .login-container #login-error {
        font-size: 2rem;
    }

    .login-container .logo-image {
        padding-bottom: .5rem;
        padding-top: 1rem;
    }

        .login-container .logo-image img {
           /* width: 7rem;*/
            max-height: 7rem;
        }

    .login-container .logo-name {
        display: none;
    }

    .login-container #login-message {
        font-size: 1.1rem;
        line-height: 1.6rem;
    }

    .login-container #login-url {
        font-size: 1.1rem;
        margin-bottom: .2rem;
    }

    .login-container #login-access-code {
        font-size: 2.4rem;
    }

    .login-container #login-request {
        font-size: 1.6rem;
    }

    .login-container .loader {
        margin: 0;
        margin-top: 1rem;
        font-size: 6px;
    }
}

@media only screen and (max-height: 400px) and (max-width: 600px) {
    #volume-bar-container {
        display: none !important;
    }
}

@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: .7rem !important;
        padding-top: 0 !important;
    }

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

    #genres-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;
    }

    .library-groups-selected-item {
        min-width: 100% !important;
    }

    .library-group-details .controls {
        justify-content: space-around;
        padding-left: 0 !important;
        margin-left: .5rem !important;
        margin-right: .5rem !important;
    }

        .library-group-details .controls button {
            margin-right: 0px !important;
        }

    .recent-date .header-info {
        flex-direction: column !important;
    }

        .recent-date .header-info button {
            margin-left: 1.5rem !important;
            margin-right: 1.5rem !important;
        }

    .recent-date .header-info {
        align-items: normal !important;
    }

        .recent-date .header-info > .name {
            text-align: center !important;
            width: 100% !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
            margin-right: 0 !important;
            margin-left: 0 !important;
        }

    .genre-options {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }

    #genres-screen .drop-down {
        width: 100% !important;
    }

    .login-container #login-title {
        font-size: 1.8rem;
    }

    .login-container #login-error {
        font-size: 2rem;
    }


    .login-container .logo-image {
        padding-bottom: .5rem;
        padding-top: 1rem;
    }

        .login-container .logo-image img {
          /*  width: 7rem;*/
            max-height: 7rem;
        }

    .login-container .logo-name {
        display: none;
    }

    .login-container #login-message {
        font-size: 1.1rem;
        line-height: 1.6rem;
    }

    .login-container #login-url {
        font-size: 1.1rem;
        margin-bottom: .2rem;
    }

    .login-container #login-access-code {
        font-size: 2.4rem;
    }

    .login-container #login-request {
        font-size: 1.6rem;
    }

    .login-container .loader {
        margin: 0;
        margin-top: 1rem;
        font-size: 6px;
    }
/*
    #options-info .sections-container {
        flex-direction: column;
    }

    #options-info .sections-tabs {
        flex-direction: row;
        padding: 0;
    }

        #options-info .sections-tabs button {
            text-align: center;
            width: unset;
        }*/
}

@media only screen and (max-height: 275px) {
    #up-next-info .library-group.selected {
        display: none;
    }
}

#user-info {
    display: none;
}

#library-types {
    position: relative;
    display: flex;
    align-items: center;
    /*padding-left: 1.5rem;
    padding-right: 3rem;*/
    /*justify-content:center;*/
}

.tab-single #library-types {
    display: none;
}

.library-types-container {
    display: flex;
    align-items: center;
}

.library-types {
    display: flex;
    /* flex-wrap: wrap; */
    list-style: none;
    padding: 0;
    align-items: center;
    margin-top: 1rem;
    margin-bottom: .5rem;
    overflow: hidden;
    /* transition: .5s;*/
    position: relative;
    left: 0px;
    padding-left: 2.25rem;
  /*  padding-right: 2.5rem;
    margin-right: 3rem;*/
}

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

#library-screen .library-types {
    /*margin-bottom: 0;*/
}

#library-buttons {
    display: flex;
    justify-content: center;
}

#channels-screen #library-buttons > button {
    min-width: 115px;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0px;
}

    body:not(.mobile-device) #channels-screen #library-buttons > button:hover,
    #channels-screen #library-buttons > button:active,
    #channels-screen #library-buttons > button:focus {
        border-radius: 3px;
    }

/*#channels-screen .library-types {
    margin-top: .5rem;
}*/

.channels-only #channels-screen.lineup #library-types {
    display: none;
}

.channels-only #channels-screen.schedule #library-types {
    display: none;
}

.channels-only #channels-screen.lineup #library-types {
    display: flex;
}

.channels-only #channels-screen #library-buttons {
    min-height: 1rem;
}

    .channels-only #channels-screen #library-buttons button {
        display: none;
    }
/*.channels-only #library-listing .library-groups {
    height: calc(100% - 1rem);
}
.channels-only #channels-screen #library-listing {
    height: calc(100% - 0rem);
}*/
/*.channels-only #channels-screen .library-grouping {
    margin-top: 1rem;
}*/
#library-buttons 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;
    border-bottom: solid 2px transparent;
    padding: .7rem 1.3rem;
    margin-right: .8rem;
    white-space: nowrap;
    cursor: pointer;
    text-transform: uppercase;
    margin: .8rem .8rem;
    /* margin-top: .4rem; */
    margin-bottom: .6rem;
    opacity: .7;
    font-size: .9rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

body.no-transition #library-buttons button {
    transition: none;
}

#library-buttons button i {
    margin-right: 5px;
}

#library-buttons button:focus {
    background-color: #444444;
    opacity: 1;
}

body:not(.mobile-device) #library-buttons button:hover {
    background-color: #888888;
    opacity: 1;
}

#library-buttons button:active {
    opacity: .8;
    border-color: #FF0062 !important;
    background-color: #FF0062 !important;
    /*transition:none;*/
}

#library-buttons button.selected {
    border-color: #FF0062 !important;
    opacity: 1;
}

    #library-buttons button.selected:focus {
        background-color: #FF0062 !important;
    }

#library-options {
    margin-left: 2.6rem;
    margin-right: 2.6rem;
    margin-top: .5rem;
    margin-bottom: .5rem;
}

    #library-options 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: .7rem 1.3rem;
        margin-right: .8rem;
        white-space: nowrap;
        cursor: pointer;
    }

body.no-transition #library-options button {
    transition: none;
}

#library-options button i {
    margin-right: 5px;
}

#library-options button.temp {
    color: blue;
}

#library-options button.perm {
    color: green;
}

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

#library-options button:focus {
    background-color: #FF0062;
}

#library-options button:active {
    background-color: #FF0062;
    /*opacity:.8;*/
    transition: none;
}

.library-types-scroller {
    display: flex;
    flex: 1;
    overflow: auto;
}

.library-types-scroll-button {
    border: 0;
    outline: 0;
    background-color: transparent;
    color: white;
    cursor: pointer;
    transition: .3s;
    padding: 0;
    z-index: 7;
    position: absolute;
    opacity: .7;
    transition: .2s;
    top: 1.2rem;
}
body.mobile-device .library-types-scroll-button {
    display: none !important;
}
    /*body.no-transition .library-types-scroll-button {
    transition: none;
}*/
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 !important;
    }


.library-types-scroll-button:disabled {
    opacity: .5 !important;
    pointer-events: all;
}

.library-types-scroll-button.left {
    background-image: linear-gradient(to right, rgba(25,25,25,1), rgba(25,25,25,.1));
    left: 0;
}

body:not(.mobile-device) .library-types-scroll-button.left:hover {
    background-image: linear-gradient(to right, rgba(25,25,25,1), rgba(25,25,25,.5));
}

.library-types-scroll-button.right {
    background-image: linear-gradient(to right, rgba(25,25,25,.1), rgba(25,25,25,1));
    right: 0;
}

body:not(.mobile-device) .library-types-scroll-button.right:hover {
    background-image: linear-gradient(to right, rgba(25,25,25,.5), rgba(25,25,25,1));
}

.library-types-scroll-button i {
    padding: 1rem 1rem;
}

.library-types-scroll-button.left i {
}

.library-types-scroll-button.right i {
}

.no-items .library-types-scroll-button {
    display: none;
}

#library-types.hide-categories > .library-types-scroll-button,
#library-types.hide-categories > .library-types {
    display:none;
}

/*
.mobile-device #up-next-info .library-group {
    display: none;
}
.mobile-device #up-next-info .library-group.selected {
    width: unset !important;
    display: block;
}
.mobile-device #up-next-info .library-group .container {
    display: none;
}
.mobile-device #up-next-info .library-group .info {
    display: none;
}*/
body.no-transition #up-next-info .library-types-scroll-button {
    display: none;
}
/*body.mobile-device #up-next-info .library-group:focus {
    outline: -webkit-focus-ring-color auto 1px;
}*/

/*#genres-screen .library-type {
    display: none;
}*/
#genres-screen .library-type:last-of-type {
    margin-right: 0;
}

#genres-screen.show-unknown .library-type {
    display: block;
}

#genres-screen.show-audio .library-type.audio {
    display: block;
}

#genres-screen.show-video .library-type.video {
    display: block;
}

#genres-screen.show-image .library-type.image {
    display: block;
}

#genres-screen.show-url .library-type.url {
    display: block;
}

/*#genres-screen .library-grouping {
    display:none;
}
#genres-screen.show-unknown .library-grouping {
    display: flex;
}
#genres-screen.show-audio .library-grouping.audio {
    display: flex;
}
#genres-screen.show-video .library-grouping.video {
    display: flex;
}
#genres-screen.show-image .library-grouping.image {
    display: flex;
}
#genres-screen.show-url .library-grouping.url {
    display: flex;
}*/

.library-type {
    padding: 10px 5px;
    background-color: transparent;
    border: 0;
    outline: 0;
    cursor: pointer;
    white-space: nowrap;
    font-size: 1.6rem;
    color: white;
    opacity: .7;
    transition: .3s;
    /* padding-left: .5rem; */
    margin-right: 15px;
    margin-left: 0px;
    padding-left: 1rem;
    padding-right: 1rem;
    border-radius: 3px;
}

    .library-type.selected {
        opacity: 1;
        background-color: #444;
    }
    /*.library-type.focused {
    opacity:1;
    background-color: #444444;
}*/
    .library-type:focus {
        opacity: 1;
        background-color: #FF0062;
        /* outline: #1177AA auto 1px !important;*/
    }

body:not(.mobile-device) .library-type:hover {
    opacity: 1;
    background-color: #888888;
}

    .library-type.selected .underline {
        opacity: 1;
    }

    .library-type.selected:focus .underline {
        opacity: 1;
    }

    .library-type.selected:focus,
    .library-type.focused {
        background-color: #FF0062 !important;
    }

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

.library-type .image {
    display: none;
}

.library-type img {
    max-width: 60px;
    max-height: 60px;
}

.underline {
    width: 0%;
    height: 3px;
    transition: all .3s;
    margin-top: 7px;
    margin-left: -1px;
    margin-right: 1px;
    opacity: .7;
    display: flex;
    width: 100%;
    justify-content: center;
    display:none;
}

body.no-transition .underline {
    transition: none;
}

.underline .dot {
    border-color: #17B6EF;
    background-color: #17B6EF;
    width: 4px;
    height: 4px;
    border-radius: 100px;
    margin-left: 2px;
    margin-right: 2px;
}

.library-type label {
    cursor: pointer;
}

body:not(.mobile-device) .library-type:hover label {
    cursor: pointer;
}

.library-grouping {
    height: 100%;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
}

.section-quickaccess {
    /*min-height: 64px;
    max-height: 64px;*/
}

.tab-page.has-quickaccess .section-quickaccess {
    min-height: calc(100vh - 0px);
}

.section-grid {
    min-height: calc(100vh - 88px);
   /* box-shadow: 0 0 10px 10px inherit;
    box-shadow: 0 0 10px 10px #181818;*/
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
    display: none;
}

.tab-page.has-categories .section-grid {
    display: flex;
}

.body .tab-page.project-layout .section-row {
    min-height: 500px; /* calc(100vh - 88px);*/
    /*box-shadow: 0 0 10px 10px inherit;
    box-shadow: 0 0 40px 40px #0D0D10;*/
    margin-bottom: 2.5rem;
}

#main-screen.related .body .tab-page.project-layout .section-row,
#main-screen.media .body .tab-page.project-layout .section-row,
#main-screen.brand .body .tab-page.project-layout .section-row,
#main-screen.categoy .body .tab-page.project-layout .section-row {
    min-height: unset;
}
#main-screen.related .section-row.section-content > #recent-info > #recent-dates,
#main-screen.media .section-row.section-content > #recent-info > #recent-dates,
#main-screen.brand .section-row.section-content > #recent-info > #recent-dates,
#main-screen.category .section-row.section-content > #recent-info > #recent-dates {
    min-height: unset;
}

.tab-page.has-categories .section-row {
    display: flex;
    /*  NOTE: this may screw something up but is not scrolling corrrectly for P90x;*/
    margin-bottom: 0rem !important;
}
body.fullscreen-quickaccess:not(.has-quick-access-items) .tab-page.has-categories .section-row {
    padding-top: 10.25rem;
}
body.fullscreen-quickaccess:not(.mobile-device, .has-quick-access-items) .tab-page.has-categories .section-row {
    padding-top: 11rem;
}

#library-groups {
    flex: 1;
    /*  position: absolute;*/
    left: 0;
    top: 0;
    right: 0;
    bottom: 0px;
    overflow: auto;
    height: 100%;
}
body.library-selection #library-screen .library-groups {
    z-index: 499;
}
body.library-selection #recent-screen .recent-grouping .library-groups {
    z-index: 499;
}
/*body.library-selection #recent-screen #recent-dates {
    z-index: 499;
}
body.library-selection .app-project-header {
    z-index: 499;
}

body.library-selection #recent-screen #recent-info .vail.fixed-window.library-groups-selected-item-vail {
    z-index: 49;
}*/

body.tv-device #library-groups {
    overflow: hidden;
}

#playlists-screen #library-groups {
    top: 86px;
}

.tab-single #library-groups {
    top: 24px !important;
}

#library-screen.tab-single #library-groups {
    top: 61px !important;
}

#library-screen.tab-single #library-options {
    margin-top: 1rem !important;
}

.app-project-footer .buttonFullscreen {
    margin-left: 1rem;
    margin-right: 1rem;
}

.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;
    /*position:absolute;*/
}

#channels-screen #library-pages {
    height: 100%;
    display: flex;
    flex-direction: column;
}

#library-screen .library-groups {
    flex-wrap: wrap;
    justify-content: flex-start;
    padding-left: 1.5rem;
    padding-right: .5rem;
    /*height: calc(100% - 8.5rem);
    overflow: auto;*/
    /*height: calc(100% - 0rem);
    overflow: auto;*/
    margin-bottom: 0;
}
body.edit-layout #library-screen .library-groups {
    padding-left: .5rem;
}

.recent-date.purchases-category #library-screen .library-groups {
    padding-left: 0;
}

.section-grid .library-groups {
    padding-bottom: 5rem;
    /* height: calc(100% - 5rem);*/
   /* flex:1;*/
    overflow: auto;
}

.library-grouping .loader-container {
    position: fixed;
    z-index: 5;
    top: 8rem;
}

#library-listing .library-groups {
    flex-wrap: wrap;
    justify-content: flex-start;
    padding-left: 2rem;
    padding-right: .5rem;
    /* height: calc(100% - 0rem);
    overflow: auto;*/
}

#playlists-screen .library-groups {
    flex-wrap: wrap;
    justify-content: flex-start;
    padding-left: 2rem;
    padding-right: .5rem;
    /* height: calc(100% - 5rem);
    overflow: auto;*/
}

/*#channels-screen .library-pages {
    flex-wrap: wrap;
    padding-left: 2rem;
    padding-right: .5rem;
    height: calc(100% - 5rem);
    overflow: auto;
}*/
#channels-screen .library-page {
    flex-wrap: wrap;
    flex: 1;
    position: absolute;
    left: 0;
    top: 145px;
    right: 0;
    bottom: 0px;
    overflow: auto;
}

body.tv-device #channels-screen .library-page {
    overflow: hidden;
}

#channels-screen.tab-single .library-page {
    top: 50px !important;
}
/*.channels-only #channels-screen .library-page {
    height: calc(100% - 6rem);
}*/
#channels-screen .library-groups {
    overflow-x: hidden;
}
body.library-selection #channels-screen .library-groups {
    z-index: 500;
}

#channels-screen #library-schedule {
    display: none;
    flex-wrap: wrap;
    /* height: calc(100% - 4rem);
    overflow: hidden;
    position: relative;*/
    /*z-index:2;*/
}
/*.channels-only #channels-screen #library-schedule {
    height: calc(100% - 1rem);
}*/
#channels-screen.schedule #library-schedule {
    display: flex;
    flex: 1;
    position: absolute;
    left: 0;
    top: 70px;
    right: 0;
    bottom: 0px;
    overflow: auto;
    z-index: 1;
    overflow-x: clip;
}
body.library-selection #channels-screen.schedule #library-schedule {
    z-index: 500;
}

#channels-screen.schedule #library-types {
    display: none;
}

#channels-screen.schedule #library-pages {
    display: none;
}

#channels-screen #library-listing {
    display: none;
    flex-wrap: wrap;
    flex: 1;
    position: absolute;
    left: 0;
    top: 63px;
    right: 0;
    bottom: 0px;
    overflow: auto;
}

body.tv-device #channels-screen #library-listing {
    overflow: hidden;
}

#channels-screen.listing #library-listing {
    display: flex;
}

#channels-screen.listing #library-types {
    display: none;
}

#channels-screen.listing #library-pages {
    display: none;
}

#library-screen {
    /* padding-left: 1rem; */
    /*overflow: hidden;*/
    height: 100%;
    width: 100%;
    /* position: relative;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;*/
}

#playlists-screen {
    /*overflow: hidden;*/
    height: 100%;
}

#channels-screen {
    /*padding-left:1rem;*/
    /*  overflow: hidden;*/
    /*height: 100%;
    padding-top: 77px;*/
    flex-direction: column;
    overflow: hidden;
}
#channels-screen.selected {
    display:flex;    
}

    #channels-screen.schedule {
        height: 100%;
    }


#genres-screen {
    /*padding-left:1rem;*/
    /*overflow: hidden;*/
    height: 100%;
    /*min-height:18rem;*/
}

#genre-types {
    position: relative;
    display: flex;
    align-items: center;
}

.genre-options {
    padding-top: 0.5rem;
    padding-bottom: 0;
    padding-left: 2.5rem !important;
    padding-right: 2.5rem !important;
}

.genre-types-container {
    display: flex;
    align-items: center;
}

.genre-types {
    display: flex;
    /* flex-wrap: wrap; */
    list-style: none;
    padding: 0;
    align-items: center;
    margin-top: 1rem;
    margin-bottom: .5rem;
    overflow: hidden;
    /*  transition: .5s;*/
    position: relative;
    left: 0px;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    margin-right: 0rem;
}

body.no-transition .genre-types {
    transition: none;
}

#genre-groups {
    flex: 1;
    /*position: absolute;*/
    left: 0;
    top: 0px;
    right: 0;
    bottom: 0px;
    overflow: auto;
    position:relative;
}

body.tv-device #genre-groups {
    overflow: hidden;
}

.genre-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: 0;
}

#genres-screen .library-groups {
    flex-wrap: wrap;
    padding-left: 2rem;
    padding-right: 1rem;
}

#recent-dates {
    /* padding-top: 1rem; */

    padding: 0rem 0rem;
    /* background: linear-gradient(#12121A, #121216) !important;*/
    background: inherit;
}
#recent-dates .recent-date {
    padding-bottom: 2rem;    
}
.section-row.section-content > #recent-info > #recent-dates {
    min-height: 500px;
}

.has-quickaccess-items,
.has-quickaccess-item {
    margin-bottom: 2.5rem;
}

.recent-grouping {
    min-height: 250px;
    min-height: 35vh;
    position: relative;
}
.recent-date.editing .recent-grouping {
    min-height: 440px;
}
.default-page-widget-2 .section-items .recent-grouping {
    min-height: 250px;
    display:flex;
    justify-content:center;
}

#channels-screen .recent-grouping {
    display: flex;
}

.library-selection .recent-date.cached-items,
.library-selection .recent-date.caching-items {
    z-index: 499;
}

.recent-grouping .library-groups {
    /*padding-bottom: 0rem;*/
    margin-bottom: 0rem;
    /*margin-right: 2rem;*/
    /*scroll-behavior:smooth;*/
    padding-top: 5px;
    padding-bottom: .5rem;
}

.recent-grouping:not(.regular-margin) .library-groups .library-group:first-child {
    margin-left: 2.25rem;
    margin-left: 4rem;
    margin-left: 3.6rem;
}

.recent-grouping:not(.regular-margin) .library-groups .library-group:last-child {
    margin-right: 2.25rem;
    margin-right: 4rem;
}

.recent-date.use-full-image .recent-grouping:not(.regular-margin) .library-groups .library-group:first-child {
    margin-left:0rem;
}

.recent-date.use-full-image .recent-grouping:not(.regular-margin) .library-groups .library-group:last-child {
    margin-right:0rem;
}

#cache-screen .recent-grouping .library-groups.wrap-items {
    flex-wrap: wrap;
    margin-left: 2rem;
}

.recent-grouping.no-items .library-groups {
    display: none;
}

.recent-grouping .library-groups .library-loader {
    padding-top: 1rem;
}
/*.recent-grouping .library-group:first-of-type {
    margin-left: 2.7rem;
}
.recent-grouping .library-group:last-of-type {
    margin-right: 2.7rem;
}*/
#cache-screen .recent-grouping .wrap-items .library-group:first-of-type {
    margin-left: 10px !important;
}

#cache-screen .library-group .size {
    font-size: 0.9rem;
    text-align: left;
    display: flex;
    color: white;
    opacity: 0.7;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

#cache-screen .library-group .size {
    flex: 1;
    padding-top: 3px;
    padding-right: 12px;
    padding-left: 1px;
}

.recent-date > .name, .recent-date .name.section-button {
    font-size: 1.6rem;
    opacity: .7;
    padding: 1rem;
    padding-left: 0rem;
    padding-right: 0rem;
    padding-top: 0rem;
    padding-bottom: 0rem;
    /*padding: .5rem;
    position: relative;
    top: -.25rem;
    top: 0rem;
    left: -.25rem;*/
    width: fit-content;
    margin-left: 2rem;
    opacity: 1;
    letter-spacing: 1px;
    letter-spacing: 0px;
    font-size: 1.8rem;
    font-weight: 500;
    color: #E5E5E5;
    transition: .3s;
}
body.mobile-device .recent-date > .name, .recent-date .name.section-button {
    transition: 0;
    touch-action: manipulation; 
}
.recent-date > button.section-button.name:disabled {
    opacity:.7 !important;
}
.recent-date:not(.top-ten-category) .name.section-button .name-container-label {
    display: flex;
    align-items: baseline;
}
.recent-date .name.section-button .name-container-label .name-explore-all {
    margin-left: .5rem;
    font-size: 1.2rem;
    position: relative;
    top: -1px;
    left: -20px;
    transition: .3s;
    opacity: 0;
    color:white !important;
}
.recent-date .name.section-button.enable-link:active {
    opacity: 1;
    left: 0px;
    color: #FF0062 !important;
    opacity:.8;
    transition:0;
}
body:not(.mobile-device) .recent-date .name.section-button.enable-link:hover .name-container-label .name-explore-all,
.recent-date .name.section-button.enable-link:focus .name-container-label .name-explore-all,
.recent-date .name.section-button.enable-link:active .name-container-label .name-explore-all {
    opacity: 1;
    left: 0px;
}
.recent-date .name.section-button.enable-link:active .name-container-label .name-explore-all {
    opacity: 1;
    left: 0px;
    color: #FF0062 !important;
}
.recent-date.top-ten-category .name.section-button .name-container-label .name-explore-all {
    display:none !important;
}

#channels-screen .recent-date > .name {
    padding-left: .5rem;
    margin-left: 2.5rem;
    font-size: 1.4rem;
    opacity: .9;
    font-size: 1.6rem;
    opacity: .7;
    transition: .3s;
    padding-bottom: .25rem;
    padding-top: .3rem !important;
}

body.no-transition #channels-screen .recent-date > .name {
    transition: none;
}

body:not(.mobile-device) #channels-screen .recent-date > .name.schedule:hover {
    opacity: 9;
}

#channels-screen .recent-date > .name.schedule:active {
    opacity: 1;
}

.recent-date .header-info {
    display: flex;
    align-items: baseline;
}

    .recent-date .header-info > .name {
        padding: 1rem;
        font-size: 1.6rem;
        opacity: .7;
        padding-left: .5rem;
        padding-right: .5rem;
        padding-top: .7rem;
        width: fit-content;
        margin-left: 2rem;
        margin-right: .5rem;
    }

    .recent-date .header-info button.default {
        padding: .7rem 1rem;
    }


#recent-screen .library-types-scroll-button {
    top: 100px;
    width: 80px;
    height: 160px;
    width: 60px;
    height: 120px;
}

#channels-screen .recent-date .library-types-scroll-button {
    top: 100px;
    width: 80px;
    height: 160px;
}

/*#channels-screen .library-groups-no-items {
    top: 14rem;
    bottom: 16rem;
}
*/
#recent-screen .library-groups-no-items {
    top: 2rem;
    bottom: unset;
}

    #recent-screen .library-groups-no-items > div {
        font-size: 1.4rem;
        padding: 0 !important;
        font-size: 1.8rem;
        padding: 0 !important;
        opacity: 1;
        color: #E5E5E5;
    }

#search-screen.selected {
    display: flex !important;
    overflow: hidden;
    height: 100%;
}

#search-sections {
    position: relative;
    display: flex;
    flex: 1;
    overflow: auto;
   /* padding-top: 64px;*/
}
#sections-container {
    flex: 1;
}
.sections-container {
    /*position: absolute;*/
    width: 100%;
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.sections-container-upload {
    padding: 0 1rem;
    padding-right: 2rem;
}
.search-sections-container {
    position: absolute;
    width: 100%;
    /*height: 100%;*/
    flex: 1;
}

#search-screen {
    padding-top: .5rem;
}
#search-sections {
    padding-top: 1rem;
}
.search-section {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.search-container {
    display: flex;
    /*border-top: solid 1px rgba(100,100,100,.3);*/
    flex: 1;
   /* padding-top: 64px;
    padding-bottom: 38px;*/
}

#search-keys {
    display: flex;
    background-color: #1C1C22;
    /*background: linear-gradient(#12121A, #121216) !important;*/
    background-color: inherit !important;
    box-shadow: 2px 0 8px rgba(0,0,0,.3);
    flex-direction: column;
    /*flex-grow: 1;*/
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
    transition: width .3s;
    /*position: absolute;*/
    top: 4rem;
    left: 0;
    bottom: 3rem;
    align-items: center;
    /* z-index: 1;*/
    width: 20rem;
    min-width: 20rem;
    padding: 0rem;
    overflow: hidden;
    /*padding-top: 64px;*/
    height: 100%;
}

body.no-transition #search-keys {
    transition: none;
}
/*#search-keys .input-container {
    display: flex;
    flex-direction: column;
}*/
#search-keys input {
    /* background-color: rgb(20, 20,20);*/
    color: rgb(255, 255, 255);
    border: 0;
    outline: 0;
    padding: 1rem;
    letter-spacing: .5px;
    padding-bottom: .5rem;
    margin-left: 1.5rem;
    margin-right: .5rem;
    height: inherit;
    /* min-width: 200px; */
    border-bottom: solid 2px #FF0062;
    border-left: solid 1px #1C1C22;
    margin: 0;
    width: 18rem;
    /* height: 3rem; */
    line-height: 2rem;
    border-radius: 0px;
    border-left: none;
}

#search-keys .input-keys {
    display: flex;
    justify-content: space-between;
    flex-flow: wrap;
    margin: .5rem;
    margin-bottom: 0;
}

    #search-keys .input-keys button {
        padding: .5rem .5rem;
        white-space: nowrap;
        width: 45px;
        border: solid 1px transparent;
        border-radius: 6px;
    }

body:not(.mobile-device) #search-keys .input-keys button:hover {
    background-color: #FF0062;
}

        #search-keys .input-keys button:focus {
            border: solid 1px #FF0062;
            background-color: #FF0062;
        }

        #search-keys .input-keys button:active {
            background-color: #FF0062;
        }
/*#search-keys .input-keys-container {
    transition: .3s;
    height: 285px;
    min-height: 285px;
    overflow: hidden;
}*/
body.no-transition #search-keys .input-keys-container {
    transition: none;
}

#search-keys .input-keys-container.hide {
    height: 0px;
    min-height: 0px;
}

#search-keys .input-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    #search-keys .input-options button {
        background-color: transparent;
        padding: .5rem;
        margin: .5rem;
        padding-top: .75rem;
        padding-bottom: .75rem;
        margin-top: .5rem;
        margin-bottom: .2rem;
        width: 100%;
        border-radius: 6px;
    }

body:not(.mobile-device) #search-keys .input-options button:hover {
    background-color: #FF0062;
}

        #search-keys .input-options button:focus {
            background-color: #FF0062;
        }

        #search-keys .input-options button:active {
            background-color: #FF0062;
        }

        #search-keys .input-options button.input-option-back {
            margin: 0;
            font-size: 2rem;
            margin-top: .5rem;
            margin-bottom: .2rem;
            padding-top: .25rem;
            padding-bottom: .25rem;
        }
        
        #search-keys .input-options button.input-option-back i {
            position: relative;
            top: 1px;
            left: -2px;
        }
        
#search-keys .input-searches-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    align-items: baseline;
    margin: .5rem;
    margin-left: 0;
    margin-right: 0;
}

.search-section.header-input #search-keys .input-searches-container {
    margin-top: 1.2rem;
}

#search-keys .input-searches-label {
    padding-left: .2rem;
    padding-right: .2rem;
    padding-bottom: .4rem;
    margin-left: .5rem;
    margin-right: .5rem;
}

#search-keys .input-searches-results {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: baseline;
    overflow: auto;
}

    #search-keys .input-searches-results button {
        padding: .5rem;
        margin: 0;
        margin-top: 0;
        margin-bottom: 0;
        background-color: transparent;
        font-size: 1rem;
        width: 100%;
        width: calc(100% - .5rem);
        text-align: left;
        padding-left: 1rem;
        padding-right: 1rem;
        /*border-radius: 6px;*/
    }

        #search-keys .input-searches-results button > i {
            margin-right: .5rem;
        }

        #search-keys .input-searches-results button > label {
        }

body:not(.mobile-device) #search-keys .input-searches-results button:hover {
    background-color: #FF0062;
    color: white;
}

        #search-keys .input-searches-results button:focus {
            background-color: #FF0062;
            color: white;
        }

        #search-keys .input-searches-results button:active {
            background-color: #FF0062;
            color: white;
        }

#search-keys .input-searches-options {
    width: 100%;
    padding-top: .2rem;
}

    #search-keys .input-searches-options button {
        padding: .5rem;
        margin: 0;
        margin-top: 0;
        margin-bottom: 0;
        background-color: transparent;
        font-size: 1rem;
        width: 100%;
        width: calc(100% - .5rem);
        text-align: left;
        padding-top: .7rem;
        padding-left: 1rem;
        padding-right: 1rem;
        border-radius: 6px;
    }

        #search-keys .input-searches-options button > i {
            margin-right: .5rem;
        }

        #search-keys .input-searches-options button > label {
        }

        #search-keys .input-searches-options button.input-searches-option-clear {
            color: goldenrod;
        }

body:not(.mobile-device) #search-keys .input-searches-options button:hover {
    background-color: #FF0062;
    color: white;
}

        #search-keys .input-searches-options button:focus {
            background-color: #FF0062;
            color: white;
        }

        #search-keys .input-searches-options button:active {
            background-color: #FF0062;
            color: white;
        }

#search-keys .sections-container {
    flex: 1;
}
/*.sections-container {
    margin-left: 1rem !important;
}*/

.search-grouping {
    min-height: 10rem;
    position: relative;
}
body:not(.mobile-device) .search-grouping {
    margin-left: 1.5rem;
}
body:not(.mobile-device) .search-grouping  .library-groups {
    margin-left: unset !important;
}

    .search-grouping .library-groups {
        padding-bottom: .5rem;
        margin-bottom: 0rem;
    }
/*
        .search-grouping .library-groups .library-group:first-of-type {
            margin-left: 2rem;
        }

        .search-grouping .library-groups .library-group:last-of-type {
            margin-right: 2rem;
        }
*/
.search-section > .name {
    padding: 1rem;
    font-size: 1.6rem;
    opacity: .7;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: .7rem;
    width: fit-content;
    margin-left: 2rem;
    margin-left: .5rem;
    padding-bottom: .5rem;
    padding-top: 1rem;
}
.search-section > div.name {
    opacity: 1;
}
.search-section > div.name > label {
    color: #E5E5E5;
}

#search-screen .library-types-scroll-button {
    top: 20%;
    width: 80px;
    height: 160px;
}


#cache-screen .library-group {
    position: relative;
}

body:not(.mobile-device) #cache-screen .library-group:hover .container {
    background-color: black;
}

body:not(.mobile-device) #cache-screen .library-group:hover .name2 {
    opacity: 1;
}

body:not(.mobile-device) #cache-screen .library-group:hover .info {
    opacity: .7;
}

    #cache-screen .library-group:focus .container {
        background-color: black;
    }

    #cache-screen .library-group:focus .name2 {
        opacity: 1;
    }
    /*#cache-screen .library-group:focus .info {
    opacity: .7;
}*/
    #cache-screen .library-group:active .container {
        background-color: black;
    }

    #cache-screen .library-group:focus .name2 {
        opacity: 1;
    }
    /*#cache-screen .library-group:focus .info {
    opacity: .7;
}*/
    #cache-screen .library-group.selected .container {
        background-color: black;
    }

    #cache-screen .library-group.selected .name2 {
        opacity: 1;
    }

    #cache-screen .library-group.selected .info {
        opacity: .7;
    }

.caching-items .library-group {
    cursor: default;
    z-index: 0 !important;
}

    .caching-items .library-group .image {
        cursor: default;
    }

#cache-screen .cached-items .loader-io {
    margin-top: 4rem;
}

#cache-screen .library-group button.delete {
    margin-left: .5rem;
    margin-right: .5rem;
    font-size: 1.2rem;
    color:red;
}

.library-groups-no-items {
    position: absolute;
    left: 0;
    top: 0rem;
    right: 0;
    bottom: 10rem;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    text-transform: uppercase;
    padding: 2rem 0;
}

#cache-screen .library-groups-no-items {
    top: 3rem;
}
/*#channels-screen .library-groups-no-items {
    top: 12rem;
}*/
.library-groups-no-items > div {
    font-size: 1.6rem;
    opacity: .8;
    text-align: center;
    padding: 2rem;
}

.playback #library-items {
    position: fixed;
    /*height: 100%;*/
    /* background-color: white; */
    /* border: solid 1px lightgray; */
    /* bottom: 0; */
    /*right: 0;*/
    /* width: 50%; */
    z-index: 1000;
    left: 0;
    top: calc(50% - 200px);
}



#back-to-player {
    position: fixed;
    bottom: 3rem;
    left: .5rem;
    padding: .5rem;
    z-index: 100;
    transition: .3s;
    border: 0;
    outline: 0;
    margin: 0;
    background-color: transparent;
    color: white;
    cursor: pointer;
    font-size: 1.2rem;
    opacity: .7;
    transition: .3s;
    position: unset;
    padding-left: 0;
    font-size: .9rem;
    padding-right: 1rem;
    padding-bottom: 0px;
    position: relative;
    top: -4px;
    left: 0px;
}

body.no-transition #back-to-player {
    transition: none;
}

body:not(.mobile-device) #back-to-player:hover {
    opacity: 1;
}

#back-to-player:focus {
    opacity: 1;
    /* transform:scale(1.4);
     left:2rem;*/
}

body.device-playback #back-to-player:focus {
    background-color: #FF0062;
}

#back-to-player:active {
    opacity: .8;
}

#back-to-player span {
    margin-left: .5rem;
    cursor: pointer;
}

/*.dms-on-demand .footer #back-to-player {
    display: none !important;
}*/
/*.dms-on-demand .footer .account {
    display: none !important;
}*/
/*.dms-on-demand .footer .buttonFullscreen {
    display: none !important;
}*/
/*
.dms-on-demand .footer .appVersion {
    display: none !important;
}*/
/*
.dms-on-demand .footer .links button {
    font-size: .7rem;
}*/

.dms-on-demand .footer .copyright {
    font-size: .7rem;
}

#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: 71001;
}

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

body.dark-mode .messagebox-vail {
    opacity: .7;
}

.messagebox {
    border: solid 1px #444444;
    background-color: white;
    background-color: #1C1C22;
    /*background: linear-gradient(#12121A, #121216) !important;*/
    background-color: inherit;
    -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;
}

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

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

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

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

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

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

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

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

.messagebox .messagebox-body {
    text-align: center;
    padding: 0.5rem 1.5rem;
    padding-bottom: 0;
    MIN-WIDTH: 10vw;
}
.messagebox #messagebox-message {
}
.messagebox .messagebox-prompt {
    padding-bottom: 0;
    padding-top: 0.1rem;
}

.messagebox .messagebox-message {
}

.messagebox .messagebox-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 1rem;
}

.messagebox button {
    border: 0;
    outline: 0;
    margin: 0;
    background-color: transparent;
    color: white;
    font-size: .8em;
    /* 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;
}

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

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

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

.messagebox button:focus {
    background-color: #FF0062;
}

.messagebox button:active {
    background-color: #FF0062;
}





#options-screen .settings .drop-down {
    width: fit-content;
    font-size: 1.4rem;
}

    #options-screen .settings .drop-down .selected-item label {
        opacity: 1 !important;
    }

#options-screen .drop-down.playChannelAtStartupChannelId button {
    width: 300px;
}

#options-screen .drop-down.playChannelAtStartupChannelId .items {
    width: 300px;
}

#options-screen .drop-down.videoScale button {
    width: 350px;
}

#options-screen {
    overflow: hidden;
    height: 100%;
    /*margin-top: 3.75rem !important;*/
}
body:not(.mobile-device) #options-screen {
    margin-top: 0.75rem !important;
}

#options-info {
    display: flex;
    height: 100%;
    /*padding-top: 64px;*/
}

    #options-info .sections-container {
        margin-left: 0 !important;
        display: flex;
        flex: 1;
        /*overflow:auto;*/
        flex-direction: row;
    }
    #options-info .sections-page > section {
        flex:unset;
    }
    #options-info .sections-page > section.section-spacer {
        padding-top:1rem;   
    }

    .sections-tabs {
        background-color: #242424;
        /*background: linear-gradient(#12121A, #121216) !important;*/
        background-color: inherit !important;
       /* box-shadow: 2px 0 0px rgba(0,0,0,.3);*/
        padding-top: 0rem;
        display: flex;
        flex-direction: column;
        z-index: 1;
        transition:none;
    }

.sections-tab {
    width: 20rem;
    width: 17rem;
    width: 15rem;
    text-align: right;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.sections-tabs .view.library button {
    background-color: unset !important;
    /*padding: 1.5rem 1.5rem;*/
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    align-items: center;
    padding: 5px 15px;
    color: whitesmoke;
    padding-right: 8px;
}
.sections-tabs button.default
{
    background-color: unset !important;    
}
.sections-tabs button i {
    display:none;
}

.sections-tabs button > span.name {
    flex:1;
    text-align: left;
}
#options-screen .sections-tabs button {
    border: solid 2px transparent;
    border-radius: 0;
    padding: 1rem;
    padding: .5rem 1rem;
    margin-bottom: .25rem;
    margin-top: .25rem;
    position:relative
}
#options-screen .sections-tabs button:hover {
    background-color: #FF0062 !important;
}
body.is-safari #options-screen .sections-tabs button label {
    position:relative;
    top:1px;
}
.sections-tabs button .sections-tab-highlight {
    position: absolute;
    right: 0px;
    top: 1px;
    bottom: 1px;
    width: 2px;
    background-color: #FF0062;
    opacity: 0;
    transition: .3s;
}

section-log-header {
    min-height: 1rem;
    display: flex;
    width: 100%;
}
section-log-footer {
    min-height: 3rem;
    display: flex;
    width: 100%;
}

.sections-tabs button.selected {
    border-right: solid 2px #FF0062 !important;
    border-right: solid 2px transparent !important;
    /*background-color: rgb(50,50,50) !important;*/
    opacity: 1;
}
body:not(.mobile-device) .sections-tabs button:hover {
    border-right: solid 2px transparent !important;
}
.sections-tabs button.selected .sections-tab-highlight {
    opacity:1;
}

body:not(.mobile-device) .sections-tabs button:hover,
body:not(.mobile-device) .sections-tabs button.selected:hover {
    /*background-color: rgb(50,50,50) !important;*/
    opacity: 1;
}

body:not(.mobile-device) .sections-tabs button:hover .sections-tab-highlight,
body:not(.mobile-device) .sections-tabs button.selected:hover .sections-tab-highlight {
    opacity: 1;
}

.sections-tabs button.selected.focused {
    /*background-color: rgb(50,50,50) !important;*/
    background-color: transparent !important;
}

.sections-tabs button.selected:focus {
    /*   background-color: #FF0062 !important;*/
    background-color: transparent !important;
}

    .sections-tabs button:focus-visible {
        background-color: #FF0062 !important;
        opacity: 1;
    }
    .sections-tabs button:focus-visible .sections-tab-highlight {
        opacity: 1;
    }

    .sections-tabs button.expand {
        background-color: transparent !important;
    }

.sections-pages {
    margin: 0;
    flex: 1;
    /*background-color: #1C1C1C;*/
    /*background: #1C1C22 !important;*/
    /* background: linear-gradient(#12121A, #121216) !important;*/
    background-color: inherit !important;
    overflow: auto;
    position: relative;
}
.sections-pages .app-form-field-label {
    padding-left: 1px;
}

body.tv-device .sections-pages {
    overflow: hidden;
}

.sections-pages .filters-row {
    padding-left: 3rem;
    padding-right: 2rem;
    padding-top: 0.5rem;
}

.sections-page {
    padding: 2rem 2rem;
    padding-top: 1rem;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
}

    .sections-page.about {
        padding-left: 5rem;
        padding-top: 0rem;
    }

        .sections-page.about > div {
            width: fit-content;
        }

        .sections-page.about .logo-image {
            padding-bottom: 0.5rem;
            padding-top: 0rem;
        }

        .sections-page.about .logo-name {
            opacity: 1;
            text-align: center;
        }

  /*  .sections-page section.settings {
        padding-top: 2rem;
    }*/

    .sections-page .account-message {
        /*padding-top: .5rem;*/
        font-size: 1.2rem;
        color: white;
        /*padding-bottom: 1rem;*/
        line-height: 1.6;
        /*background-color: rgba(100, 100, 100, .3);*/
        width: fit-content;
        /* padding: .5rem 1rem;*/
        border-radius: 6px;
        margin: .5rem 0;
        margin-bottom: .25rem;
        max-width: 700px;
    }

    .sections-page .section-header {
       /* padding-left: .2rem;*/
        padding-bottom: .25rem;
        font-size: 1.4rem;
        text-shadow: -1px 1px 2px rgb(0 0 0);
       /* font-weight: bold;*/
        opacity: .9;
    }
    .no-shadow .sections-page .section-header {
        text-shadow: none;
    }
    .sections-page .subscription-message {
        /*padding-top: .5rem;*/
        font-size: 1.2rem;
        color: white;
        /*padding-bottom: 1rem;*/
        line-height: 1.6;
        /*background-color: rgba(100, 100, 100, .3);*/
        width: fit-content;
        /* padding: .5rem 1rem;*/
        border-radius: 6px;
        margin: .5rem 0;
        margin-bottom: .25rem;
        max-width:700px;
    }
    .sections-page .section-header-padding {
        padding-top: 1.5rem;
    }

.sections-page .section-row {
    padding: .25rem;
    padding-top: .7rem;
    padding-bottom: .2rem;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    min-height: unset;
    box-shadow: unset;
    margin-bottom: unset;
    padding-left: 0;
}

        .sections-page .section-row.section-checkbox {
            padding-top: 1.1rem;
        }

body.mobile-device .sections-page .section-row.application-skin {
    display: none !important;
}

.sections-page .section-row label {
    padding-right: .5rem;
    opacity: .7;
    white-space: nowrap;
}

.sections-page .section-row .drop-down label {
    opacity: 1;
}

.sections-page .settings .section-row label {
    /*min-width:315px;
    text-align:right;*/
}

.sections-page .section-row span {
    padding-right: .5rem;
    white-space: nowrap;
}

.sections-page .section-options {
    padding-top: 1rem;
   
}
.sections-page .section-options > button {
    margin-bottom:.5rem;
}

.sections-page section button {
}

    .sections-page section button:not(.app-form-field-password-visible, .selected-item) i {
        margin-right: .5rem;
        display: none;
    }
.sections-page section .drop-down > button.selected-item > i {
    display: block;
}

.section-row-message {
    padding: .5rem;
    line-height: 2rem;
}

.section-row-percent {
    display: flex;
    align-items: center;
    padding: .5rem;
    padding-top: .7rem;
}

.bkgd-storage-percent {
    background-color: #444444;
    height: 4px;
    width: 35rem;
}

.value-storage-percent {
    background-color: #FF0062;
    width: 20%;
    height: 100%;
}

    .value-storage-percent.error {
        background-color: red !important;
    }

.section-media-options {
    padding: .5rem;
}

.section-image-options {
    padding: .5rem;
}

.section-log-options {
    padding: .5rem;
}

.section-app-options {
    padding: .5rem;
}

.section-row.payment-type {
}

    .section-row.payment-type img {
        max-height: 3rem;
        max-width: 5rem;
        margin-right: 0.5rem;
    }

    .section-row.payment-type .payment-type-card-type {
        margin-right: 0.5rem;
    }

    .section-row.payment-type .payment-type-card-number {
        margin-right: 0.5rem;
    }


/* ON/OFF Switch */
.onoffswitch {
    position: relative;
    width: 55px;
    display: inline-block;
    font-size: 80%;
}

    .onoffswitch .onoffswitch-label {
        display: block;
        overflow: hidden;
        cursor: pointer;
        border: 1px solid black;
        -moz-border-radius: 20px;
        -webkit-border-radius: 20px;
        border-radius: 20px;
        margin: 0;
    }

    .onoffswitch .onoffswitch-inner {
        width: 200%;
        margin-left: -100%;
        -webkit-transition: margin 0.15s ease-in-out;
        -o-transition: margin 0.15s ease-in-out;
        -moz-transition: margin 0.15s ease-in-out;
        transition: margin 0.15s ease-in-out;
    }

        .onoffswitch .onoffswitch-inner:before,
        .onoffswitch .onoffswitch-inner:after {
            float: left;
            width: 50%;
            height: 24px;
            padding: 0;
            line-height: 24px;
            font-size: 80%;
            color: hsl(0, 0%, 100%);
            font-weight: normal;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

        .onoffswitch .onoffswitch-inner:before {
            content: "ON";
            padding-left: 10px;
            background-color: hsl(203, 100%, 39.1569%);
            color: hsl(0, 0%, 100%);
        }

        .onoffswitch .onoffswitch-inner:after {
            content: "OFF";
            padding-right: 10px;
            background-color: hsl(0, 0%, 98%);
            color: hsl(0, 0%, 24%);
            text-align: right;
        }

    .onoffswitch .onoffswitch-switch {
        width: 22px;
        height: 22px;
        margin: 0;
        background: hsl(0, 0%, 100%);
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        position: absolute;
        top: 2px;
        bottom: 0;
        right: 35px;
        -webkit-transition: right 0.15s ease-in-out;
        -o-transition: right 0.15s ease-in-out;
        -moz-transition: right 0.15s ease-in-out;
        transition: right 0.15s ease-in-out;
    }

.toggle-group {
    position: relative;
}

    .toggle-group input[type=checkbox] {
        position: absolute;
        left: 10px;
    }

        .toggle-group input[type=checkbox]:checked ~ .onoffswitch .onoffswitch-label .onoffswitch-inner {
            margin-left: 0;
        }

        .toggle-group input[type=checkbox]:checked ~ .onoffswitch .onoffswitch-label .onoffswitch-switch {
            right: 1px;
            box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
        }

        .toggle-group input[type=checkbox]:focus ~ .onoffswitch {
            outline: thin dotted #333;
            outline: 0;
        }

    .toggle-group label {
        position: absolute;
        cursor: pointer;
        padding-left: 65px;
        display: inline-block;
        text-align: left;
        line-height: 24px;
        width: 100%;
        z-index: 1;
        height: 24px;
        font-weight: 200;
    }
/* ==== Accessibility ===== */
.aural {
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute;
    width: 1px;
}

    .aural:focus {
        clip: rect(0, 0, 0, 0);
        font-size: 1em;
        height: auto;
        outline: thin dotted;
        position: static !important;
        width: auto;
        overflow: visible;
    }

*,
*:before,
*:after {
    box-sizing: border-box;
}

.switch-container {
    padding-left: .2rem;
    padding-right: .2rem;
}

.switch {
    /*margin: 4rem auto;*/
}
/* main styles */
.switch {
    position: relative;
}

    .switch input {
        position: absolute;
        top: 0;
        z-index: 2;
        opacity: 0;
        cursor: pointer;
    }

        .switch input:checked {
            z-index: 1;
        }

            .switch input:checked + label {
                opacity: 1;
                cursor: default;
            }

body:not(.mobile-device) .switch input:not(:checked) + label:hover {
    opacity: 0.5;
}

    .switch label {
        color: #fff;
        opacity: 0.33;
        transition: opacity 0.25s ease;
        cursor: pointer;
    }

    .switch .toggle-outside {
        height: 100%;
        border-radius: 2rem;
        padding: 0.25rem;
        overflow: hidden;
        transition: 0.25s ease all;
    }

    .switch .toggle-inside {
        border-radius: 5rem;
        background: #4a4a4a;
        position: absolute;
        transition: 0.25s ease all;
    }

.switch-container .switch .toggle-inside {
}

.switch--horizontal {
    height: 2rem;
}

    .switch--horizontal input {
        height: 2rem;
        width: 5rem;
        margin: 0;
    }

    .switch--horizontal label {
        font-size: 1.5rem;
        line-height: 3rem;
        display: inline-block;
        width: 5rem;
        height: 100%;
        margin: 0;
        text-align: center;
    }

        .switch--horizontal label:last-of-type {
            margin-left: 6rem;
        }

    .switch--horizontal .toggle-outside {
        background: #fff;
        position: absolute;
        width: 5rem;
        display: flex;
        align-items: center;
        padding-left: 0.5rem;
        font-size: 1.2rem;
    }

.switch-container.on .switch--horizontal .toggle-outside {
    background: #FF0062;
    background-color: #4a4a4a;
}

.switch--horizontal .toggle-inside {
    height: 1.5rem;
    width: 1.5rem;
}

.switch--horizontal .toggle-label.switch-off {
    position: relative;
    color: black;
    z-index: 0;
    opacity: 1;
    transition: .3s;
    font-size: 1.2rem;
    padding-right: 0;
    top: 5px;
    left: 2.4rem;
    font-weight: bold;
}

.switch-container.on .switch--horizontal .toggle-label.switch-off {
    opacity: 0;
}

.switch-container.on .switch--horizontal .toggle-inside {
    background: #fff;
}

.switch--horizontal input:checked ~ .toggle-outside .toggle-inside {
    left: 0.25rem;
}

.switch--horizontal input ~ input:checked ~ .toggle-outside .toggle-inside {
    left: 3.25rem;
}

.switch--vertical {
    width: 12rem;
    height: 6rem;
}

    .switch--vertical input {
        height: 100%;
        width: 3rem;
        right: 0;
        margin: 0;
    }

    .switch--vertical label {
        font-size: 1.5rem;
        line-height: 3rem;
        display: block;
        width: 8rem;
        height: 50%;
        margin: 0;
        text-align: center;
    }

    .switch--vertical .toggle-outside {
        background: #fff;
        position: absolute;
        width: 3rem;
        height: 100%;
        right: 0;
        top: 0;
    }

    .switch--vertical .toggle-inside {
        height: 2.5rem;
        left: 0.25rem;
        top: 0.25rem;
        width: 2.5rem;
    }

    .switch--vertical input:checked ~ .toggle-outside .toggle-inside {
        top: 0.25rem;
    }

    .switch--vertical input ~ input:checked ~ .toggle-outside .toggle-inside {
        top: 3.25rem;
    }

.switch--no-label label {
    width: 0;
    height: 0;
    visibility: hidden;
    overflow: hidden;
}

.switch--no-label input:checked ~ .toggle-outside .toggle-inside {
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(0,0,0,0.2);
}

.switch--no-label input ~ input:checked ~ .toggle-outside {
    background: #fff;
}

    .switch--no-label input ~ input:checked ~ .toggle-outside .toggle-inside {
        background: #2ecc71;
    }

.switch--no-label.switch--vertical {
    width: 3rem;
}

.switch--no-label.switch--horizontal {
    width: 6rem;
}

    .switch--no-label.switch--horizontal input,
    .switch--no-label.switch--horizontal .toggle-outside {
        left: 0;
    }

body:not(.mobile-device) .switch--expanding-inner input:checked + label:hover ~ .toggle-outside .toggle-inside {
    height: 2.5rem;
    width: 2.5rem;
}

body:not(.mobile-device) .switch--expanding-inner.switch--horizontal input:hover ~ .toggle-outside .toggle-inside {
    width: 3.5rem;
}

body:not(.mobile-device) .switch--expanding-inner.switch--horizontal input:hover ~ input:checked ~ .toggle-outside .toggle-inside {
    left: 2.25rem;
}

body:not(.mobile-device) .switch--expanding-inner.switch--vertical input:hover ~ .toggle-outside .toggle-inside {
    height: 3.5rem;
}

body:not(.mobile-device) .switch--expanding-inner.switch--vertical input:hover ~ input:checked ~ .toggle-outside .toggle-inside {
    top: 2.25rem;
}
/* mixin */


#sharemedia-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;
}

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

body.no-transition .sharemedia-messagebox-vail {
    transition: none;
}

.sharemedia-messagebox-vail.show {
    opacity: .3;
}

.sharemedia-messagebox-vail.hide {
    opacity: 0;
}

.sharemedia-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;
    background-color: black !important;
    border-radius: 6px;
    border-color: #222;
    min-width: 40rem;
    padding: 1rem;
}

.sharemedia-messagebox .sharemedia-messagebox-header {
    /* display: none;*/
    align-items: center;
    display: flex;
    align-items: end;
}

        .sharemedia-messagebox .sharemedia-messagebox-header span {
            font-size: .9rem;
            flex: 1;
            margin-left: .5rem;
            margin-right: .5rem;
            font-size: 1.1rem;
            margin-top: 0.25rem;
            color: white;
        }

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

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

.sharemedia-messagebox button {
    border-radius:6px;
}

.sharemedia-messagebox .sharemedia-messagebox-header i {
    font-size: 1rem;
    padding: .5rem;
    padding: 0.5rem 0.75rem;
    /*margin-left: .3rem;
    margin-right: .3rem;
    margin-top: .1rem;*/
}

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

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

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

.sharemedia-messagebox .sharemedia-messagebox-body {
    text-align: center;
    padding: 1rem .25rem;
    padding-bottom: 1.7rem;
    font-size: 1rem;
    text-transform: uppercase;
    /*color: #FFAB15;*/
    padding-top: 0.5rem;
    border-top: solid 1px rgba(100, 100, 100, .3);
    margin-top: 1rem;
}
.sharemedia-messagebox .sharemedia-messagebox-body input {
    width:100%;
}

.sharemedia-messagebox .sharemedia-messagebox-links {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .5rem;
    padding-bottom: 1rem;
}

.sharemedia-messagebox .sharemedia-messagebox-links button {
    border-radius: 100%;
    background-color: #444;
    margin: 0 .25rem;
    padding: .5rem;
}

.sharemedia-messagebox .sharemedia-messagebox-links button.email {
    background-color: #444;
}

.sharemedia-messagebox .sharemedia-messagebox-links button i {
    font-size: 2rem;
    padding: .5rem;
    min-width:48px;
    min-height:48px;
}

.sharemedia-messagebox .sharemedia-messagebox-links button .sharemedia-messagebox-label {
    display: none;
}

.sharemedia-messagebox .sharemedia-messagebox-url {
    display: flex;
    align-items: center;
    background: black;
    border: solid 1px rgba(100, 100, 100, .5);
    padding: .5rem .5rem;
    border-radius: 5px;
}

.sharemedia-messagebox .sharemedia-messagebox-message {
    background: transparent !important;
    color: white !important;
    border: none !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

.sharemedia-messagebox .sharemedia-messagebox-url button {
    display: flex;
    align-items: center;
    padding: .5rem;
}

.sharemedia-messagebox .sharemedia-messagebox-url button .sharemedia-messagebox-label {
    margin-left: 5px;
}

.sharemedia-messagebox .sharemedia-messagebox-footer {
    display: flex;
    padding-bottom: .75rem;
    justify-content: center;
}

.sharemedia-messagebox-footer 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;
    margin-right: 0px;
    display: flex;
    align-items: center;
}
.sharemedia-messagebox .sharemedia-messagebox-footer button i {
    margin-right: .25rem;
}
.sharemedia-messagebox-footer button i.fa-link {
    font-size: .9rem;
}
body.no-transition .sharemedia-messagebox-footer button {
    transition: none;
}

.sharemedia-messagebox-footer button i {
    /*  margin-right: 5px;*/
}

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

.sharemedia-messagebox-footer button:focus {
    background-color: #FF0062;
}

.sharemedia-messagebox-footer button:active {
    background-color: #FF0062;
}
.sharemedia-messagebox-footer button:last-of-type {
    /* margin-top: 0.5rem; */
    margin-right: 0.25rem;
}

.sharemedia-messagebox-footer button:first-of-type {
    margin-left: 0.25rem;
}

.sharemedia-messagebox-ok i {
    font-size: .9rem;
}

body:not(.mobile-device) #sharemedia-messagebox-close:hover {
    background-color: red;
}

#sharemedia-messagebox-close:focus {
    background-color: red;
}

#sharemedia-messagebox-close:active {
    background-color: red;
}



.calendarmedia-messagebox-container .sharemedia-messagebox-message {
    text-transform: none;
    font-size: 1.4rem;
    padding: 1rem;
    line-height: 1.6;
    white-space:normal !important;
    max-width: 35rem;
}
.calendarmedia-messagebox-container .sharemedia-messagebox {
    min-width: 20rem;
}
.calendarmedia-messagebox-container .sharemedia-messagebox .sharemedia-messagebox-body {
    padding-bottom: 1rem;
}

.calendarmedia-messagebox-container .sharemedia-messagebox .sharemedia-messagebox-title {
    flex: 1;
}

.calendarmedia-messagebox-container .sharemedia-messagebox .sharemedia-messagebox-links button {
    margin: .5rem .5rem;
}

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

    body.mobile-device .calendarmedia-messagebox-container .sharemedia-messagebox-message {
        font-size: 1.2rem;
        line-height: 1.4;
    }
    body.mobile-device .calendarmedia-messagebox-container .sharemedia-messagebox .sharemedia-messagebox-links button i {
        font-size: 1.4rem;
        padding: .5rem;
        min-width: 36px;
        min-height: 36px;
    }

}


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

#player.url #videoPoster {
    display: none;
}

#player.url #playerControls {
    display: none;
}


/* PLAYER UI */

#playerControls #position-completed {
    width: 60px !important;
    min-width: 60px !important;
}

#playerControls #position-uncompleted {
    width: 60px !important;
    min-width: 60px !important;
}
#player.live #playerControls #position-uncompleted {
    opacity: 0 !important;
    width: 0px !important;
    min-width: 0px !important;
    padding-right: 3px;
}
#player.live #playerControls #position-completed {
    opacity: 0;
    min-width: 0px !important;
    width: 0px !important;
    padding-left: 7px;
}
#player.live #playerControls #position-level-selector, 
#player.event #playerControls #position-level-selector {
    display:none !important;
}
#playerControls #player-control-buttons .control-button.disabled {
    opacity: .7 !important;
    cursor: default !important;
}

#playerDataUpNextButton {
    font-size: 2rem;
}

.vail {
    cursor: default;
    z-index: 1;
}

    .vail.fixed-window {
        cursor: default;
        background-color: rgba(0, 0, 0, .7);
        z-index: 5;
    }

.up-next-selection-vail {
    background-color: rgba(0, 0, 0, .3);
}

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

.vail.dmsProjectChannelSchedule {
    display:none !important;
}

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;*/
    transition:.5s;
    opacity:0;
}

    .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;
        text-rendering: optimizeLegibility;
    }

    .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.reveal {
    opacity: 1;
}
.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%;
    overflow: hidden;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

    .library-group-details .background {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        pointer-events: none;
        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: .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;
            transform: matrix(1.0, 0, 0, 1.0, 0, 0);
        }

body.is-safari .library-group-details .image button {
    opacity: 1 !important;
    transform: matrix(1.0, 0, 0, 1.0, 0, 0) !important;
}

    .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 .navigation button,
body.no-transition .library-group-details .image .close-button {
    transition: none;
    transform: none;
    transform: matrix(1.0, 0, 0, 1.0, 0, 0) !important;
}

.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;
}
/*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: #FF0062;
    background: -moz-linear-gradient(top, #FF0062 0%, #7db9e8 100%);
    background: -webkit-linear-gradient(top, #FF0062 0%,#7db9e8 100%);
    background: linear-gradient(to bottom, #FF0062 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 .name2 {
    display: flex;
    flex-direction: column;
    text-align: left;
    /* width: 100%; */
    padding: 1rem 1.5rem;
    padding-top: 4px;
    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.6rem;
    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 {
    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: 600;
}

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


.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;
}

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

    .library-group-details .controls .buttons button.info-button i {
        font-size: 25px;
        position: relative;
        top: -.5px;
    }

    .library-group-details .controls .buttons button i.material-icons {
        font-size: 28px;
    }

    .library-group-details .controls .buttons button.edit-button {
        margin-left: 1.5rem;
    }

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

    .library-group-details .controls .buttons button.delete-button {
        margin-left: 1.5rem;
    }

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

    .library-group-details .controls .buttons button.cache-button {
        margin-left: .5rem;
    }
   /* .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.mute-button:hover,
body:not(.mobile-device) .library-group-details .controls .buttons button.info-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.mute-button:focus,
    .library-group-details .controls .buttons button.info-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.mute-button:active,
    .library-group-details .controls .buttons button.info-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,.7);
}
.library-group-details .library-seasons .library-season:focus {
    border: solid 1px rgba(100,100,100,.7);
}
.library-group-details .library-seasons .library-season:active,
.library-group-details .library-seasons .library-season.selected {
    border: solid 1px rgba(100,100,100,1);
}
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: #FF0062;
    color: white;
}

.library-group-details .controls button:not(.hide-label):focus {
    background-color: #FF0062;
    color: white;
}

.library-group-details .controls button:not(.hide-label):active {
    background-color: #FF0062;
    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;
    /* font-weight: bold; */
    /* font-size: 0.2rem; */
    margin-left: 1px;
    white-space: normal;
    padding: 0;
    margin: 0;
    line-height: 1.4;
    padding-top: 2px;
    font-size: 1.2rem;
    /*  margin-left: 1px;
    padding-right: 5px;*/
    padding-right: 1rem;
}
.library-group-details .info1 .description {
    padding-left: 0;
}

.library-groups-selected-item.single .library-group-details .description {
    /*font-size: 1.2rem;*/
    /*padding-top: 1rem;*/
    /* margin-left: 1.5rem;
    margin-right: 0.5rem;*/
    /* max-height:350px;*/
    /*margin-left: 0;
    margin-right: 0;
    margin-top: .25rem;
    padding-left: 1.35rem;*/
    font-size: 1.6rem;
    padding-left: 1rem;
}

.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 .description p {
    /*padding-bottom: 0 !important;
    margin-bottom: 0 !important;*/
}

.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;
    margin-right: 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: 8px;
}
body.allow-sharing .single .library-item-list {
    padding-top: 0px;
}*/

    .single .library-item-list .library-item {
        border: none;
        padding-top: 0rem !important;
        margin-bottom: .5rem !important;
    }

    .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%;
}

.library-items .library-item {
    /* height: fit-content;*/
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 1.5rem 1rem;
    padding-right: 0px;
    background-color: transparent;
    transition: none;
    align-items: flex-start;
    margin-bottom: 0rem;
    border-bottom: solid 1px rgba(100,100,100,.3);
    margin-left: .5rem;
    margin-right: 0rem;
    padding-left: 0;
    padding-right: .75rem;
    padding-bottom: .5rem;
    padding-top: .5rem;
}
    .library-items .library-item:first-of-type {
        padding-top: 0rem;
    }
    .library-items .library-item:last-of-type {
        margin-bottom: 1rem;
    }
.library-item .container .library-item-data .library-item .info {
    padding-right: 0px !important;
}

.library-items .library-item:last-of-type {
    margin-bottom: 1rem;
}

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

.library-item .info .info1 {
    display: block !important;
    white-space:normal;
}
.single .library-item .info .info1 > div:first-of-type {
    display:none;
}
/*
.library-item .info .info2 {
    display: block !important;
}
*/
.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: -2px;*/
}

    .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: #FF0062;
}

.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: #FF0062;
}*/
.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: #FF0062 !important;
}
.wizard-page .library-item.selected .library-item-details {
    background-color: #FF0062 !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: 1rem;
        padding-bottom: .25rem;
        padding-top: 0;
    }
.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.selected > button {
    background-color: inherit !important;
    border-radius: unset;
    padding: 0;
}

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

body.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;
}

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

.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:hover .library-item-icon-container {
    opacity: 1;
}

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

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

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:active,*/
.library-item > button.selected {
    background-color: #333;
    border-radius: 6px;
}

.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;
    }

.project-quick-access-subitem-icons .edit-icon-button {
    color: #0066DD;
    margin: .5rem;
}

.app-anchor.selected .project-quick-access-subitem-icons .edit-icon-button {
    color: white;
}

.project-quick-access-subitem-icons .delete-icon-button {
    color: red;
    margin: .5rem;
}

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

body.edit-layout .library-item > button .icons {
    display: flex;
}
/*body.edit-layout .project-category-section-item-subitem-icons button {
    padding:0px;
}*/
.project-layout .library-item > button .icons i {
    font-size: 14px !important;
}

.project-layout-header-logo-image-container .project-category-section-item-subitem-icons {
    top: -27px !important;
    right: unset !important;
}

.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: 10px;
    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;
    padding-left: .25rem;
    padding-right: .5rem;
    font-size: 1.1rem;
    position: relative;
    top: 5px;
}
.single .library-item .info .info2 {
    display: none !important;
}

.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: 0px;
    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;
    }

body.no-transition .library-item-details .controls button {
    transition: none;
}
/*.library-item-details .controls button i {
    margin-right:5px;
}
.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)*/
    transform: matrix(1.3, 0, 0, 1.3, 0, 0);
}

.library-item-details .controls button:not(.app-button):focus {
   /* transform: scale(1.4);*/
    transform: matrix(1.4, 0, 0, 1.4, 0, 0);
}

.library-item-details .controls button:not(.app-button):active {
    /*transform: scale(.9);*/
    transform: matrix(.9, 0, 0, .9, 0, 0);
}

body.no-transition .library-item-details .controls button:not(.app-button) {
    transition: none;
    transform: matrix(1.0, 0, 0, 1.0, 0, 0) !important;
}

.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;
    padding-left: 0.5rem;
}

.library-item .cache-progress .cache-container .progress-info {
    display: flex;
    align-items: center;
    line-height: 0px;
    position: relative;
}

.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: 2px;
        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: 94%;
    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;
    position: absolute;
    right: 10px;
}

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;
}

.library-item .cache-state .cached-container .cache-button:hover,
.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;
}

.library-item .cache-state .cached-container .cache-button:hover,
.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;
}

#library-options .drop-down {
    /* width: 288px;*/
    /* margin-left: 1px;*/
}

    #library-options .drop-down .items {
        /* width: 287px;
    margin-left: 1px;*/
    }

    #library-options .drop-down button {
        padding: .5rem 1rem;
       /* opacity: .9 !important;*/
        width: 220px;
        margin-right: 0;
    }

        #library-options .drop-down button.item {
            background-color: black !important;
        }

            #library-options .drop-down button.item:focus {
                background-color: #444444 !important;
            }

            #library-options .drop-down button.item:hover {
                background-color: #8888 !important;
            }
    /*#library-options .drop-down button.item:active {
    background-color:#FF0062 !important;
    opacity:1 !important;
}*/
    #library-options .drop-down.show button.selected-item {
        background-color: #FF0062 !important;
        opacity: 1 !important;
    }

    #library-options .drop-down button:focus {
        background-color: #FF0062 !important;
        opacity: 1 !important;
    }

    #library-options .drop-down label {
        font-size: 1.4rem;
    }

    #library-options .drop-down i {
        font-size: 1.4rem;
    }


#genres-screen .drop-down {
    /* width: 288px;*/
    /*margin-left: 1px;*/
}

    #genres-screen .drop-down .items {
        /*width: 287px;*/
    }

    #genres-screen .drop-down button {
        padding: .5rem 1rem;
        opacity: .9 !important;
        width: 200px;
    }

        #genres-screen .drop-down button.item {
            background-color: black !important;
        }

            #genres-screen .drop-down button.item:focus {
                background-color: #444444 !important;
            }

            #genres-screen .drop-down button.item:hover {
                background-color: #8888 !important;
            }
    /*#genres-screen .drop-down button.item:active {
    background-color:#FF0062 !important;
    opacity:1 !important;
}*/
    #genres-screen .drop-down.show button.selected-item {
        background-color: #FF0062 !important;
        opacity: 1 !important;
    }

    #genres-screen .drop-down button:focus {
        background-color: #FF0062 !important;
        opacity: 1 !important;
    }

    #genres-screen .drop-down label {
        font-size: 1.4rem;
    }

    #genres-screen .drop-down i {
        font-size: 1.4rem;
    }

.sections-page .section-row label.custom-checkbox {
    opacity: 1;
}
/* Customize the label (the container) */
.custom-checkbox {
    display: block;
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    top: -6px;
    transition: .3s;
}

body.no-transition .custom-checkbox {
    transition: none;
}
/* Hide the browser's default checkbox */
.custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
    display: none;
}

/* Create a custom checkbox */
.custom-checkbox .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    background-color: rgb(50,50,50);
    opacity: .8;
    transition: .3s;
   /* background-color: rgb(30,30,30) !important;*/
    border: solid 1px rgba(100,100,100,.3) !important;
    border-radius: 6px;
}

body.no-transition .custom-checkbox .checkmark {
    transition: none;
}

.custom-checkbox:hover {
    opacity: 1;
}

.custom-checkbox:focus {
    opacity: 1;
}

/* On mouse-over, add a grey background color */
.custom-checkbox:hover input ~ .checkmark {
    background-color: #ccc;
    background-color: #505050;
    opacity: 1;
}

/* When the checkbox is checked, add a blue background */
/*.custom-checkbox input:checked ~ .checkmark {
    background-color: #2196F3;
}*/
.custom-checkbox input:focus ~ .checkmark {
    background-color: #2196F3;
    opacity: 1;
}

.custom-checkbox:focus .checkmark {
    background-color: #2196F3;
    opacity: 1;
}

/* Create the checkmark/indicator (hidden when not checked) */
.custom-checkbox .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.custom-checkbox input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.custom-checkbox .checkmark:after {
    left: 9px;
    top: 5px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.sections-page.log {
    position: absolute;
    top: 1rem;
    left: 0px;
    right: 0px;
    bottom: 3rem;
    flex: 1;
    /* background-color: white; */
    overflow: auto;
    /*border: solid 1px #333;*/
    padding: 0;
    height:unset;
}
    .sections-page.log section {
        display: flex;
    }

.sections-page.about .section-row {
    justify-content: center !important;
    font-size: 1.2rem !important;
}

    .sections-page.about .section-row a {
        color: white;
    }

    .sections-page.about .section-row.current-version {
        padding-top: 1.2rem;
    }

    .sections-page.about .section-row.new-version {
        padding-top: .7rem;
    }

    .sections-page.about .section-row.update-version {
        padding-top: .3rem;
    }

    .sections-page.about .section-row.copyright {
        padding-top: 1.2rem;
    }

    .sections-page.about .section-row.sponsors {
        padding-top: 1.2rem;
    }

    .sections-page.about .section-row label {
        white-space: normal;
        text-align: center;
    }

#options-screen .log .items {
    flex: 1;
}

    #options-screen .log .items .item {
        font-size: 1rem;
        padding: 10px;
        white-space: nowrap;
        border-bottom: solid 1px #333;
        width: 100%;
        text-align: left;
    }

        #options-screen .log .items .item:focus {
            background-color: #444;
        }

        #options-screen .log .items .item:nth-child(odd) {
        }

        #options-screen .log .items .item.debug {
            color: green;
        }

        #options-screen .log .items .item.log {
            color: green;
        }

        #options-screen .log .items .item.info {
            color: green;
        }

        #options-screen .log .items .item.warning {
            color: orange;
        }

        #options-screen .log .items .item.error {
            color: red;
        }

        #options-screen .log .items .item.exception {
            color: red;
        }

.library-center-loader .loader-io {
    position: absolute;
    left: 0;
    top: 2rem;
    right: 0;
    bottom: 0;
    z-index: 5;
}
.loader-io.absolute {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    align-items: center;
}


.formats {
    display: flex;
    flex-direction: column;
    padding: 0rem;
    margin-top: 3px;
}

    .formats .format-item {
        display: flex;
        align-items: center;
        /* padding: .5em; */
        flex-direction: column;
        width: 100%;
        justify-content: center;
        border: 1px solid transparent;
        background-color: transparent;
        border-radius: 6px;
        padding: .5rem;
        background-color: transparent;
        transition:.2s;
    }

        .formats .format-item.selected {
            background-color: rgba(100,100,100,.3);
            border: 1px solid dodgerblue;
        }

    .formats .format-item-type {
        margin-left: 1em;
        flex: 1;
    }

.format-item-bitrate.ok {
    color:green;
}
.format-item-bitrate.warning {
    color:goldenrod;
}
.format-item-bitrate.error {
    color:red;
}

.format-item > button {
    padding-bottom: 0px;
    padding-top: 7px;
    margin-bottom: 5px;
    margin-top: 0;
    color: white;
    cursor: default;
    opacity: 1;
    /* background-color: rgba(154, 181, 213, .2); */
    /* border: 1px solid #94ADCB; */
    /* border-bottom: none; */
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: transparent;
    border: none;
}

    .format-item > button:focus {
        outline-color: none;
    }

    .format-item > button .image {
        display: none;
        /* flex-direction: column; */
        /* position: relative; */
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

.format-item.album > button .image {
    width: 280px;
    height: 280px;
}

.format-item > button img {
    max-width: 280px;
    max-height: 210px;
}

.format-item.album > button img {
    max-width: 280px;
    max-height: 280px;
}

.format-item .format-item-details button:hover {
   /* transform: scale(1.3);*/
    transform: matrix(1.3, 0, 0, 1.3, 0, 0);
}

.format-item .format-item-details button:focus {
    /*transform: scale(1.4);*/
    transform: matrix(1.4, 0, 0, 1.4, 0, 0);
}

.format-item .format-item-details button:active {
    /*transform: scale(1.2);*/
    transform: matrix(1.2, 0, 0, 1.2, 0, 0);
}

.format-item .info {
    font-size: 1.1rem;
    text-align: left;
    padding-top: 7px !important;
    padding-bottom: 3px;
    padding-left: 7px;
    padding-right: 16px;
    line-height: 1.4rem;
}

.playback .format-item .info {
    color: white;
}

.format-item-details {
    display: none;
    flex-direction: column;
    margin-right: 0px;
    margin-left: 0px;
    padding-bottom: 0px;
    background-color: transparent;
    border: none;
    border-top: none;
    width: 100%;
}

.format-item.selected .format-item-details,
body.can-edit .format-item-details {
    display: flex;
}

.format-item-details .image {
    text-align: center;
    position: relative;
    overflow: hidden;
}

.format-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;
}

.format-item-details .image img {
    min-height: 340px;
    max-height: 340px;
    position: relative;
}

.format-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;
}

    .format-item-details .name label {
        color: white;
        font-size: 2rem;
        padding-bottom: 3px;
        /*margin-left:-3px;*/
        white-space: nowrap;
    }

.format-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;
}

    .format-item-details .name2 label {
        color: white;
        white-space: nowrap;
    }

.format-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;
}

    .format-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;
    }

    .format-item-details .info > div {
        padding-bottom: 3px;
        display: flex;
        white-space: nowrap;
    }

    .format-item-details .info .info1 {
    }

    .format-item-details .info .info2 {
    }

    .format-item-details .info .info3 {
    }

    .format-item-details .info .info4 {
    }

.format-item-details-controls {
    display: flex;
    margin-top: 3px;
    padding-top: 0;
    margin-bottom: 3px;
    padding-bottom: 0;
    margin-left: 0rem;
    margin-right: 0rem;
    padding-left: 0;
    padding-right: 5px;
    justify-content: flex-end;
    display:none;
}
body.can-edit .format-item-details-controls {
    display:flex;
}

.format-item-details-controls button {
    border: 0;
    outline: 0;
    margin: 0;
    background-color: transparent !important;
    color: white;
    font-size: 1rem;
    cursor: pointer;
    margin-right: .3rem;
    transition: .3s;
    /*opacity: .7;*/
    padding: .7rem 1.3rem;
    margin-right: .8rem;
    white-space: nowrap;
    cursor: pointer;
    margin: 0;
    padding: .3rem;
    /* padding-left: .5rem; */
    /* padding-right: .5rem; */
    margin-left: 5px;
    margin-right: 5px;
}

body.no-transition .format-item-details-controls button {
    transition: none;
}

.format-item-details-controls > button > label {
    display: none;
}

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

.format-item-details .description {
    padding: .5rem 1.5rem;
    padding-bottom: 0;
    padding-top: 0;
    padding-right: 12px;
    text-align: justify;
    /* padding-bottom: .2rem; */
    padding-left: 14px;
}

.format-item-details-controls button i {
    margin-right: 0px;
}

.single .format-item-details .description {
    padding: 0rem 2rem;
}

.format-item-details .description label {
    color: #666666;
    font-size: 1rem;
    padding-bottom: 1px;
    padding-top: 3px;
    line-height: 1.25rem;
    /* margin-left: 2rem; */
    /* margin-right: 1rem; */
    padding-bottom: 3px;
}

.single .format-item-details .description label {
    padding-bottom: 3px;
    padding-top: .5rem;
}

.format-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;
}

    .format-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;
    }



.format-item .cache-state,
.format-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;
}

.format-item .cache-state {
}

.format-item .cache-progress {
    margin-left: 2.5rem;
    margin-right: 2rem;
    padding-top: .5rem;
    display: none;
}

    /*.format-item.caching .cache-state,
.format-item.caching .cache-progress {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}*/

    /*.format-item.temp-cached .cache-state {
    display: flex;
    align-items: center;
    justify-content:flex-end;
}
.format-item.perm-cached .cache-state {
    display: flex;
    align-items: center;
    justify-content:flex-end;
}*/

    .format-item .cache-state .cache-container,
    .format-item .cache-progress .cache-container,
    .format-item > .cache-container {
        display: none;
        flex-direction: column;
        text-align: left;
        position: relative;
        top: 0;
        margin-right: .2rem;
        flex: 1;
    }

.format-item.caching .cache-state .cache-container,
.format-item.caching .cache-progress .cache-container,
.format-item.caching > .cache-container {
    display: flex;
}

.format-item > .cache-container {
    margin-top: 6px;
    margin-bottom: 4px;
    margin-right: 9px;
}

    .format-item .cache-state .cache-container .message,
    .format-item .cache-progress .cache-container .message,
    .format-item > .cache-container .message {
        font-size: .8rem;
        color: black;
        padding-bottom: .2rem;
        color: #666666;
    }

    .format-item .cache-state .cache-container .progress,
    .format-item .cache-progress .cache-container .progress,
    .format-item > .cache-container .progress {
        height: 4px;
        width: 100%;
        border: solid 1px lightgray;
        display: flex;
        opacity: 1;
    }

        .format-item .cache-state .cache-container .progress .percent,
        .format-item .cache-progress .cache-container .progress .percent,
        .format-item > .cache-container .progress .percent {
            background-color: #0069D9;
        }

.format-item .delete {
    color: red;
    background-color: transparent;
    border: none;
    margin-left: 10px !important;
}
/*.format-item .cache-button {
    margin-left: 10px !important;
}*/
.format-item .pause {
    margin: 0;
    padding: .3rem;
    border: 0;
    outline: 0;
    background-color: transparent;
    opacity: .7;
    color: #0069D9;
    cursor: pointer;
    transition: .3s;
    font-size: 1rem;
    display: none;
    margin-left: 13px !important;
    margin-right: 4px !important;
}

body.no-transition .format-item .pause {
    transition: none;
}

.format-item.caching .pause {
    display: block;
}

    .format-item.caching .pause.paused {
        color: red;
    }

.format-item .pause:hover {
    opacity: 1;
}

.format-item .pause:focus {
    opacity: 1;
}

.format-item .pause:active {
    opacity: .8;
}

.format-item .cache-state .pause {
    margin-left: .3rem;
}

.format-item .cache-progress .cached-container {
    flex-flow: column;
}

    .format-item .cache-state .cached-container .cache-button i,
    .format-item .cache-progress .cached-container .cache-button i {
        color: #0069D9;
    }

.format-item.temp-cached .cache-state .cached-container .cache-button i,
.format-item.temp-cached .cache-progress .cached-container .cache-button i {
    color: #0069D9;
}

.format-item.caching.temp-cached .cache-state .cached-container .cache-button i,
.format-item.caching.temp-cached .cache-progress .cached-container .cache-button i {
    color: #0069D9;
}

.format-item.perm-cached .cache-state .cached-container .cache-button i,
.format-item.perm-cached .cache-progress .cached-container .cache-button i {
    color: green;
}

.format-item.caching.perm-cached .cache-state .cached-container .cache-button i,
.format-item.caching.perm-cached .cache-progress .cached-container .cache-button i {
    color: green;
}

.format-item .default-spacer {
    /*  flex:1;*/
}

.format-item .default-button {
    margin-left: 11px;
    margin-right: 3px;
}

.format-item .default-button-on {
    display: none !important;
}

.format-item.default .default-button-off {
    display: none !important;
}

.format-item.default .default-button-on {
    display: block !important;
}

.format-item .default-button i {
    font-size: 1.2rem;
}

.format-item.default .default-button i {
    color: limegreen;
}

.format-item.selected .info {
    color: white !important;
}

.formats-container {
    min-height: 1.5rem;
}

.formats-header {
    margin-left: 1.5rem;
    margin-right: 15px;
    text-align: right;
    padding-top: .5rem;
    margin-bottom: 5px;
}

.formats-button {
    cursor: pointer;
    transition: .3s;
    background-color: transparent;
    border: none;
    outline: none;
    color: dimgray;
    padding: 5px;
    padding-left: 10px !important;
}

body.no-transition .formats-button {
    transition: none;
    transform: none;
}

.formats-button > label {
    font-size: 1rem;
    margin-right: 1rem;
}

.formats-button > i {
    margin-left: 5px;
    position: relative;
    top: 1px;
}

.formats-button:hover {
    color: #0069D9;
}

.formats-button:focus {
    /*transform: scale(1.4);*/
    /*background-color:cornflowerblue;*/
    /*color: #0069D9;*/
    color: white;
}

.formats-button:active {
    /*transform: scale(1.4);*/
    /*background-color:cornflowerblue;*/
    opacity: .8;
    color: #0069D9;
}

.format-item-dimensions {
    min-width: 120px;
}

.formats-button:focus i {
    /*transform: scale(1.3);*/
    transform: matrix(1.3, 0, 0, 1.3, 0, 0);
}

.format-item-details-controls button.default-button {
    position: relative;
    top: 0px;
    margin-right: .5rem;
    margin-left: .5rem;
}

.sponsor-list {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

    .sponsor-list a {
        padding: 5px;
    }

        .sponsor-list a.svg {
            width: 200px;
            margin: 15px;
        }

        .sponsor-list a > div {
            max-width: 200px;
        }

        .sponsor-list a > label {
            font-family: "Open Sans", "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
            font-size: 60px;
            font-weight: 300;
        }

#search-keys .input-container {
    display: flex;
    position: relative;
}

#search-keys .input-search-icon {
    padding: .5rem 1rem;
    padding-right: .5rem;
    display:none;
}

#search-keys .input-clear-icon {
    padding: .5rem 1rem;
    padding-left: .5rem;
    display: none;
}

#search-keys .input-keys-toggle-keyboard {
    display: none;
}

body.tv-device #search-keys .input-keys-toggle-keyboard {
    display: block;
    position: absolute;
    right: 0;
    font-size: 1.4rem;
    padding: 1rem;
}

#playlists-screen .library-type:last-of-type {
    margin-right: 0;
}
/*#playlists-screen .library-types .library-spacer {
    min-width: 20px;
    width: 20px;
}
#playlists-screen .library-types .library-spacer .container {
    min-width: 20px;
    width: 20px;
}
*/


.library-item-details > .controls .cached-container > button {
    margin-left: .6rem;
    margin-right: 0;
}
/*
#default-screen .parallax-slider {
    width: 100%;
    height: 100%;
    opacity: .5;
}
#default-screen .logo-name {
    display:none;
}
#default-screen .logo-image {
    padding:0;
}
*/
#login-refresh {
    padding: 15px;
    background-color: transparent;
    border: 0;
    outline: 0;
    cursor: pointer;
    white-space: nowrap;
    font-size: 1.6rem;
    color: white;
    opacity: .7;
    transition: .3s;
    /* padding-left: .5rem; */
    margin-right: 40px;
    margin-left: 0px;
    padding-left: 2rem;
    padding-right: 2rem;
    margin-right: 0px;
    margin-top: 1rem;
    background-color: #444444;
}

body.tv-device #login-refresh {
    transition: none;
}

#login-refresh:focus {
    opacity: 1;
    background-color: #FF0062;
    /* outline: #1177AA auto 1px !important;*/
}

#login-refresh:hover {
    opacity: 1;
    background-color: #8888;
}

body.tv-device #login-back-button {
    display: none;
}

.library-item-list .loader-container {
    display: unset;
    top: 2rem;
    /* position: unset;*/
    position: absolute !important;
}

body.tv-device .drop-down.show button.selected-item {
    opacity: 1 !important;
    color: white !important;
    opacity: .7;
}

    body.tv-device .drop-down.show button.selected-item label {
        opacity: 1 !important;
        color: white !important;
    }

    body.tv-device .drop-down.show button.selected-item i {
        opacity: 1 !important;
        color: white !important;
    }

body.tv-device .drop-down button label {
    color: white !important;
}

body.tv-device .drop-down button:focus label {
    color: white !important;
}

body.tv-device .drop-down button i {
    color: white !important;
}

body.tv-device .drop-down button:focus i {
    color: white !important;
}

body.tv-device .header > button:hover {
    background-color: unset;
    color: unset;
}
/*
body.tv-device .header > button:focus {
    background-color: #191919;
    color: white;
}

body.tv-device .header > button.selected:focus {
    background-color: #FF0062;
    color: white;
}
*/
body.tv-device .library-type.selected {
    opacity: 1;
    background-color: unset;
}

body.tv-device .library-type:focus {
    opacity: 1 !important;
    background-color: #444444 !important;
}

body.tv-device .library-type.selected:focus {
    opacity: 1 !important;
    background-color: #FF0062 !important;
}

body.tv-device .header > button.logo:focus {
    background-color: black !important;
}

body.tv-device .single .library-item .cache-progress .cached-container button:focus {
    background-color: #FF0062 !important;
}

body.tv-device .library-item-details .controls button:focus {
    background-color: #FF0062 !important;
}

body.tv-device #playerControls #position-container {
    /* background-color: rgba(0,0,0,.5);*/
    padding-top: 7px;
}

body.tv-device #playerControls #controls-container {
    /*background-color: rgba(0,0,0,.5);*/
}

@media only screen and (max-width: 960px) {
    body.tv-device #playerDataClose {
        margin-right: 49px;
    }

    body.tv-device .library-type:hover {
        opacity: unset;
        background-color: unset;
    }

    body.tv-device #search-keys {
        bottom: 0;
    }

        body.tv-device #search-keys .input-keys button:hover {
            background-color: unset;
        }

        body.tv-device #search-keys .input-keys button {
            padding: 4px !important;
            white-space: nowrap !important;
            width: 25px !important;
            border: solid 1px transparent !important;
            align-items: center !important;
            justify-content: center !important;
            display: flex !important;
        }

        body.tv-device #search-keys .input-searches-label {
            font-size: 1.2rem !important;
        }

        body.tv-device #search-keys input {
            line-height: 1rem !important;
        }

        body.tv-device #search-keys .input-options button {
            padding: .5rem !important;
            margin: .5rem !important;
            padding-top: .5rem !important;
            padding-bottom: .5rem !important;
            margin-top: 0 !important;
            margin-bottom: 0 !important;
            font-size: 1rem !important;
        }

            body.tv-device #search-keys .input-options button.input-option-back {
                margin: 0 !important;
                font-size: 1.6rem !important;
                margin-top: 0 !important;
                margin-bottom: 0 !important;
                padding-top: .3rem !important;
                padding-bottom: .3rem !important;
            }

    body.tv-device .library-group .info {
        font-size: .7rem !important;
        padding-top: 2px !important;
        padding-bottom: 2px !important;
    }

    body.tv-device .library-group .name2 {
        font-size: .7rem !important;
    }

    body.tv-device .library-group .name3 {
        font-size: .7rem !important;
        padding-top: 0px !important;
    }

    body.tv-device #library-groups {
        top: 125px;
    }

    body.tv-device .recent-date > .name, body.tv-device .recent-date .name.section-button {
        padding-top: 0rem !important;
        padding-bottom: .3rem !important;
    }

        body.tv-device .recent-date > .name label,
        body.tv-device .recent-date .name.section-button label {
            font-size: 1.3rem !important;
        }

    body.tv-device .recent-grouping .library-groups {
        padding-bottom: 1rem !important;
    }

    body.tv-device #channels-screen .library-page {
        top: 105px !important;
    }

    body.tv-device .library-items {
        padding-top: 0px;
    }

    body.tv-device .single .library-item-list .library-item > .library-item-details > .description {
        padding: 0 1em !important;
        padding-right: .5rem !important;
        text-align: justify !important;
        margin-left: 0px !important;
        padding-top: .2rem !important;
    }

    body.tv-device #login-screen .loader-io {
        margin-bottom: 1rem;
    }

    body.tv-device .login-container .logo-image img {
        /*width: 9rem;*/
        max-height: 9rem;
    }

    body.tv-device .library-type {
        font-size: 1.3rem !important;
        margin-left: 10px;
        margin-right: 10px;
    }

    body.tv-device .header {
        padding-left: .5rem !important;
        padding-right: .5rem !important
    }

        body.tv-device .header button {
            font-size: 1rem !important;
            padding-left: 1.3rem !important;
            padding-right: 1.4rem !important;
        }

        body.tv-device .header #button-options {
            font-size: 1.4rem !important;
        }

            body.tv-device .header #button-options i {
                padding-top: 2px;
            }

    body.tv-device #playerControls #position-level-selector {
        background-color: whitesmoke;
    }
    /*body.tv-device .library-group .image {
        display:none;
    }
    body.tv-device .library-group.show .image {
        display: flex;
    }
    body.tv-device .library-group .container {
        display: none;
    }*/

    body.tv-device .library-group.show .container {
        display: block;
        width: 208px !important;
    }

    body.tv-device .header > button.logo {
        padding-left: 0rem !important;
        padding-right: .2rem !important;
        margin-right: 0rem !important;
    }

    body.tv-device .recent-grouping .library-group:first-of-type {
        margin-left: 10px !important;
    }

    body.tv-device #channels-screen .library-groups {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
        padding-bottom: .5rem !important;
    }

    body.tv-device #channels-screen .recent-library .library-groups {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
        padding-bottom: 1rem !important;
    }

    body.tv-device #playlists-screen #library-groups {
        top: 75px;
    }

    body.tv-device #library-screen .library-types {
        margin-top: 1rem !important;
    }

    body.tv-device #library-group {
        margin-top: 1px;
        margin-bottom: 15px;
        border: solid 1px #1C1C22;
    }

    body.tv-device .header #button-options {
        font-size: 1.4rem !important;
        margin-right: 0rem !important;
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    body.tv-device #library-options {
        margin-left: 2.1rem !important;
        margin-right: 2.1rem !important;
        margin-top: 2px !important;
        margin-bottom: 0rem !important;
    }

    body.tv-device .library-types {
        /* left: -6px !important;*/
        left: 0px !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        padding-right: 1.5rem !important;
        padding-left: 1.5rem !important;
        margin-top: 1rem !important;
        margin-bottom: .7rem !important;
    }
    /*body.tv-device .metadata-item-image img {
        box-shadow:none;
    }*/
    body.tv-device .library-group.on-now .time > label {
        color: #FFAB15 !important;
    }

    body.tv-device .recent-grouping .library-groups .library-loader {
        padding-top: 2rem !important;
    }

    body.tv-device .library-group-details {
        overflow: hidden !important;
    }

        body.tv-device .library-group-details .name {
            padding: .5rem 1rem !important;
            padding-bottom: 1px !important;
        }

            body.tv-device .library-group-details .name label {
                font-size: 1.4rem !important;
            }

        body.tv-device .library-group-details .name2 {
            display: none !important;
            padding: .5rem 1rem !important;
            padding-top: 2px !important;
            padding-bottom: 0 !important;
        }

    body.tv-device .library-item-details .controls button.pause {
        top: 0px !important;
    }

    body.tv-device .library-group-details .controls button.pause i {
        font-size: .8rem !important;
        top: 1px !important;
    }

    body.tv-device .library-item-details .controls button.delete {
        margin-left: 0 !important;
        margin-right: 0 !important;
        top: 0px !important;
    }

    body.tv-device .library-group-details .controls button.delete i {
        font-size: 1.2rem !important;
        top: 1px !important;
    }

    body.tv-device .library-item .library-item-details .controls .cache-button i {
        font-size: 1rem !important;
    }

    body.tv-device .single .library-item .cache-progress .cached-container button {
        padding-right: 0 !important;
        width: 32px;
        height: 28px;
    }

        body.tv-device .single .library-item .cache-progress .cached-container button i {
            font-size: 1rem !important;
        }

        body.tv-device .single .library-item .cache-progress .cached-container button.pause {
            top: 0px !important;
        }

            body.tv-device .single .library-item .cache-progress .cached-container button.pause i {
                font-size: .8rem !important;
                top: 1px !important;
            }

        body.tv-device .single .library-item .cache-progress .cached-container button.delete {
            margin-left: 0 !important;
            margin-right: 0 !important;
            top: 0px !important;
        }

            body.tv-device .single .library-item .cache-progress .cached-container button.delete i {
                font-size: 1.2rem !important;
                top: 1px !important;
            }

    body.tv-device .divider {
        display: block !important;
        margin-left: 1rem !important;
        margin-right: 1rem !important;
        margin-top: .7rem !important;
        margin-bottom: 3px !important;
    }

    body.tv-device .sections-page.about .sponsor-list a.svg {
        width: 110px;
        margin: 5px;
    }

    body.tv-device .sections-page.about .sponsor-list a > div {
        max-width: 110px;
    }

    body.tv-device .sections-page.about .sponsor-list img.discogs {
        max-width: 70px;
    }

    body.tv-device .sections-page.about .sponsor-list img.open-subtitles {
        max-width: 120px;
    }

    body.tv-device .sections-page.about {
        padding-top: 1.5rem;
    }

        body.tv-device .sections-page.about .section-row.current-version {
            padding-top: 1rem;
        }

        body.tv-device .sections-page.about .section-row.new-version {
            padding-top: .7rem;
        }

        body.tv-device .sections-page.about .section-row.update-version {
            padding-top: .3rem;
        }

        body.tv-device .sections-page.about .section-row.copyright {
            padding-top: 1rem;
        }

        body.tv-device .sections-page.about .section-row.sponsors {
            padding-top: 1rem;
        }

        body.tv-device .sections-page.about .logo-image img {
       /*     width: 6rem;*/
            max-height: 6rem;
        }

        body.tv-device .sections-page.about .section-row {
            font-size: 1rem !important;
        }
    /*body.tv-device .sections-page.about > div {
        width: 100% !important;
    }*/
    body.tv-device .library-group {
        margin-top: 3px !important;
        margin-bottom: 10px !important;
        overflow: hidden !important;
        min-width: 208px !important;
        width: 208px !important;
        min-height: 270px !important;
    }

        body.tv-device .library-group.selected {
            border: solid 1px #1177AA !important;
        }

        body.tv-device .library-group:focus {
            border: solid 1px #1177AA !important;
        }

    body.tv-device .has-seasons .divider {
    }

    body.tv-device .has-discs .divider {
    }

    body.tv-device .library-group-details .name2 label {
        font-size: 1.1rem !important;
    }

    body.tv-device .library-group-details .info div {
        color: unset !important;
    }

    body.tv-device .library-group-details .name3 {
        font-size: .9rem !important;
        padding-left: 1rem !important;
        padding-bottom: 2px !important;
        padding-top: 2px !important;
    }

    body.tv-device .library-group-details > .info {
        padding: .5rem 1rem !important;
        padding-top: 3px !important;
        padding-bottom: .1rem !important;
        font-size: .8rem !important;
    }

    body.tv-device .library-group-details .info > div {
        color: white !important;
    }

    body.tv-device .library-group-details .library-item .info > div {
        color: lightgray !important;
    }

    body.tv-device .library-group-details .library-item.selected .info > div {
        color: white !important;
    }

    body.tv-device .library-group-details > .info .seperator {
        top: 0px !important;
        height: 10px !important;
    }

    body.tv-device .library-group-details > .info > div.online .online-button {
        top: 0px !important;
    }

    body.tv-device .library-group-details .info > div.online {
        display: none !important;
    }

    body.tv-device .library-item-details .controls button.delete {
        margin-left: .3rem !important;
        margin-right: .3rem !important;
        position: relative !important;
        top: 0px !important;
    }

    body.tv-device .library-group-details > .controls {
        padding: .5rem 1rem !important;
        padding-top: 7px !important;
        padding-bottom: 0px !important;
        font-size: 1rem !important;
        margin: 0 !important;
    }

        body.tv-device .library-group-details > .controls button {
            padding: .5rem 1rem !important;
            margin-right: .5rem !important;
        }

            body.tv-device .library-group-details > .controls button label {
                font-size: .9rem !important;
            }

            body.tv-device .library-group-details > .controls button i {
                font-size: .9rem !important;
            }

    body.tv-device .library-group-details .item-count {
        margin-left: 1rem !important;
        margin-right: 1rem !important;
        padding: 5px !important;
        padding-bottom: 8px !important;
        border-bottom: none !important;
        margin-top: 3px !important;
        padding-top: 3px !IMPORTANT;
    }

        body.tv-device .library-group-details .item-count.seasons {
            padding-bottom: 6px !important;
        }

        body.tv-device .library-group-details .item-count label {
            font-size: .9rem !important;
        }

    body.tv-device .library-group-details .library-season {
        font-size: .9rem !important;
        padding: .4rem .8rem !important;
    }

    body.tv-device .library-group-details .library-disc {
        font-size: .9rem !important;
        padding: .4rem .8rem !important;
    }

    body.tv-device .library-seasons {
        overflow: hidden !important;
    }

    body.tv-device .library-discs {
        overflow: hidden !important;
    }

    body.tv-device .library-item-list {
        margin-left: 0px !important;
        margin-top: 0px !important;
        padding-top: 0px !important;
        margin-right: 0px !important;
        padding-right: 0px !important;
    }

    body.tv-device .library-item-list {
        overflow: unset !important;
    }

    body.tv-device .library-item > button {
        margin: 0 !important;
        margin-top: 0px !important;
        margin-bottom: 0px !important;
        margin-left: 0 !important;
        padding-left: .5rem !important;
        padding-top: 5px !important;
        padding-bottom: 2px !important;
    }

    body.tv-device .library-item.selected > button {
        padding-top: 5px !important;
    }

    body.tv-device .library-group-details .library-item .info {
        padding: .5rem 1rem !important;
        padding-top: 0px !important;
        padding-bottom: 0rem !important;
        padding-right: 1rem !important;
        padding-left: 0rem !important;
        font-size: .9rem !important;
    }

    body.tv-device .library-item-details {
        margin-left: 0rem !important;
        margin-right: .0rem !important;
        padding-right: 1rem !important;
        padding-left: .5rem !important;
        padding-bottom: 5px !important;
        padding-top: 2px !important;
    }

    body.tv-device .library-item .cache-state .cached-container .cache-button,
    body.tv-device .library-item .cache-progress .cached-container .cache-button {
        padding-right: 0px !important;
        position: relative !important;
        top: 0px !important;
    }

    body.tv-device .library-item .cache-state .cache-container .message,
    body.tv-device .library-item .cache-progress .cache-container .message,
    body.tv-device .library-item > .cache-container .message {
        font-size: .7rem !important;
        padding-bottom: 1px !important;
        color: lightgray !important;
        opacity: .8 !important;
    }

    body.tv-device .library-item-details .description {
        padding: .2rem 1rem !important;
        padding-bottom: 6px !important;
        padding-left: 39px !important;
        padding-top: 0px !important;
        /* max-height: 110px !important; */
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: .8rem !important;
        line-height: 1.2rem !important;
        padding-right: 7px !important;
    }
    /*body.tv-device .library-item .cache-progress .cached-container .size {
        top: 0px !important;
    }*/
    body.tv-device .library-item.caching {
        padding-top: 2px !important;
        padding-bottom: 2px !important;
    }

        body.tv-device .library-item.caching > button {
            padding-top: 5px !important;
        }

    body.tv-device .library-item-list .library-item > .library-item-details > .cache-progress {
        margin-left: 2.5rem !important;
        margin-right: .5rem !important;
        padding-bottom: 0px !important;
    }

    body.tv-device .single .library-item-list .library-item > .library-item-details > .cache-progress {
        margin-left: 1rem !important;
        margin-top: .5rem !important;
    }

        body.tv-device .single .library-item-list .library-item > .library-item-details > .cache-progress .cached-container .size {
            margin-right: 1rem !important;
            font-size: 1rem !important;
            top: 0px !important;
        }

    body.tv-device .library-item .cache-progress .cached-container .size {
        margin-right: 1rem !important;
    }

    body.tv-device .library-item-details .controls {
        margin-left: 35px !important;
        padding-top: 2px !important;
        padding-bottom: 0px !important;
        margin-right: 8px !important;
    }

        body.tv-device .library-item-details .controls button {
            padding-right: 0 !important;
            width: 32px;
            height: 28px;
        }

    body.tv-device .library-item-details label {
        padding-bottom: 0 !important;
    }

    body.tv-device .library-group .info .seperator {
        height: 10px !important;
        margin-left: 8px !important;
        margin-right: 8px !important;
        opacity: .8 !important;
    }

    body.tv-device #playerControls #volume-bar-container {
        flex: .78 !important;
    }

    body.tv-device #player.video #playerControls #volume-bar-container {
        flex: .55 !important;
    }

    body.tv-device #playerControls #playlistItems {
        font-size: 1.4rem !important;
        left: 7px !important;
    }

    body.tv-device #playerDataControls {
        right: -.5rem !important;
    }

    body.tv-device .player-data-channel {
        opacity: .5 !important;
    }

    body.tv-device #playerControls .metadata-item-image img {
        max-width: 290px;
        max-height: 290px;
    }

    body.tv-device #playerControls .metadata-item-header {
        padding-top: 3rem;
    }

    body.tv-device #playerControls .metadata-item-header-info-description {
        font-size: 1.2rem !important;
        line-height: 1.5rem !important;
        text-align: justify !important;
        margin-right: 65px;
    }

    body.tv-device .player-data-info {
        padding-top: 1rem !important;
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }

    body.tv-device #up-next-info {
        display: none !important;
    }

    body.tv-device .library-group .container {
        padding-top: 5px !important;
        padding-left: 7px !important;
        padding-bottom: 5px !important;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;
        width: inherit;
    }

    body.tv-device #channels-screen .recent-date > .name {
        padding-left: 1.2rem !important;
    }

    body.tv-device #playlists-screen .library-groups {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
        margin-bottom: 0rem !important;
        padding-bottom: 1rem !important;
    }

    body.tv-device #playerControls #playerDataUpNextLabel {
        padding-bottom: 2px !important;
        padding-top: 2px !important;
        margin-bottom: 2px !important;
        text-shadow: -1px 1px 2px rgba(0, 0, 0, .5);
    }
    .no-shadow.tv-device #playerControls #playerDataUpNextLabel {
        text-shadow: none;
    }

    body.tv-device #playerControls #playerDataUpNext1 {
        padding-bottom: 2px !important;
        padding-top: 2px !important;
        margin-bottom: 2px !important;
        text-shadow: -1px 1px 2px rgba(0, 0, 0, .5);
    }
    .no-shadow.tv-device #playerControls #playerDataUpNext1 {
        text-shadow: none;
    }

    body.tv-device #playerControls #playerDataUpNext2 {
        padding-bottom: 2px !important;
        padding-top: 2px !important;
        margin-bottom: 2px !important;
        text-shadow: -1px 1px 2px rgba(0, 0, 0, .5);
    }
    .no-shadow.tv-device #playerControls #playerDataUpNext2 {
        text-shadow: none;
    }

    body.tv-device #playerControls #playerDataUpNext3 {
        padding-bottom: 2px !important;
        padding-top: 2px !important;
        margin-bottom: 2px !important;
        text-shadow: -1px 1px 2px rgba(0, 0, 0, .5);
    }
    .no-shadow.tv-device #playerControls #playerDataUpNext3 {
        text-shadow: none;
    }

    body.tv-device #playerControls #playerDataSummary1 {
        padding-bottom: 2px !important;
        padding-top: 2px !important;
        margin-bottom: 2px !important;
        margin-left: 0px !important;
        text-shadow: -1px 1px 2px rgba(0, 0, 0, .5);
    }
    .no-shadow.tv-device #playerControls #playerDataSummary1 {
        text-shadow: none;
    }

    body.tv-device #playerControls #playerDataSummary2 {
        padding-bottom: 2px !important;
        padding-top: 2px !important;
        margin-bottom: 2px !important;
        margin-left: 0px !important;
        text-shadow: -1px 1px 2px rgba(0, 0, 0, .5);
    }
    .no-shadow.tv-device #playerControls #playerDataSummary2 {
        text-shadow: none;
    }

    body.tv-device #playerControls #playerDataSummary3 {
        padding-bottom: 2px !important;
        padding-top: 2px !important;
        margin-bottom: 2px !important;
        margin-left: 0px !important;
        text-shadow: -1px 1px 2px rgba(0, 0, 0, .5);
    }
    .no-shadow.tv-device #playerControls #playerDataSummary3 {
        text-shadow: none;
    }


    body.tv-device #playerControls #playerDataSummary4 {
        padding-bottom: 2px !important;
        padding-top: 2px !important;
        margin-bottom: 2px !important;
        margin-left: 0px !important;
        text-shadow: -1px 1px 2px rgba(0, 0, 0, .5);
    }
    .no-shadow.tv-device #playerControls #playerDataSummary4 {
        text-shadow: none;
    }

    body.tv-device #playerControls .metadata-item-image {
        display: block !important;
        padding-left: 0px;
    }

    body.tv-device #playerDataUpNext {
        margin-right: 2px !important;
        padding-left: 10px;
    }

    body.tv-device #playerDataMute {
        font-size: 1.8rem !important;
        margin-right: 42px !important;
    }

    body.tv-device #playerDataUpNextButton {
        margin-left: 10px !important;
    }

    body.tv-device #playerControls .metadata-item-header-info {
        padding-left: 2rem !important;
        padding-right: 0rem !important;
        margin-right: 0 !important;
    }

    body.tv-device #videoPlayback.paused {
        opacity: 1 !important;
    }

    body.tv-device #player #videoPoster {
        transition: none;
    }

    body.tv-device #player.paused #videoPoster {
        opacity: .7 !important;
    }

    body.tv-device #player #videoPlayback video {
        display: none !important;
    }

    body.tv-device #player.video.has-data #videoPlayback video {
        display: flex !important;
    }

    body.tv-device #player #videoPreview video {
        display: none !important;
    }

    body.tv-device #player.video.is-cached #videoPreview video {
        display: flex !important;
    }

    body.tv-device #player.video.has-data #videoPoster .videoPosterImage {
        display: none !important;
    }
    /*body.tv-device #videoPoster .videoPosterFilter {
        display: none;
    }*/
    body.tv-device #playerDataInfo {
        transition: .5s !important;
    }

    body.tv-device .drop-down .items {
        width: 150px !important;
    }

    body.tv-device .drop-down {
        width: 150px !important;
    }

        body.tv-device .drop-down button {
            padding: .6rem .6rem !important;
        }

        body.tv-device .drop-down.show button.selected-item {
            opacity: 1 !important;
            color: white !important;
            opacity: .7;
        }

            body.tv-device .drop-down.show button.selected-item label {
                opacity: 1 !important;
                color: white !important;
            }

            body.tv-device .drop-down.show button.selected-item i {
                opacity: 1 !important;
                color: white !important;
            }
        /*body.tv-device .drop-down button:focus {
        outline: #1177AA auto 1px !important;
    }*/
        body.tv-device .drop-down button label {
            font-size: 1rem !important;
            position: relative !important;
            top: 1px !important;
            color: white !important;
        }

        body.tv-device .drop-down button:focus label {
            color: white !important;
        }

        body.tv-device .drop-down button i {
            font-size: .9rem !important;
            position: relative !important;
            top: 0px !important;
            color: white !important;
        }

        body.tv-device .drop-down button:focus i {
            color: white !important;
        }

    body.tv-device #library-screen .library-groups {
        margin-bottom: 0 !important;
    }

    body.tv-device .current-info {
        bottom: 3px;
        left: 5px;
    }

    body.tv-device #options-screen .sections-container {
        flex-direction: row;
    }

    body.tv-device #options-screen .sections-tabs {
        padding-top: 1rem;
        flex-direction: column;
    }

        body.tv-device #options-screen .sections-tabs button {
            width: 16rem;
            text-align: right;
        }

    body.tv-device #options-screen .sections-page .section-row {
        padding-left: 5px;
    }

    body.tv-device #options-screen .sections-page.log {
        left: 0px;
    }

    body.tv-device #options-screen .log .items .item {
        font-size: .9rem;
        white-space: normal;
    }

    body.tv-device .player-data-upNext {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    body.tv-device #library-buttons button {
        padding: .5rem !important;
        margin: .5rem !important;
        margin-bottom: 0rem !important;
    }
}

@media only screen and (max-height: 400px) {
    .metadata-item-image img {
        max-width: 180px !important;
        max-height: 180px !important;
    }

    .logo-name {
        font-size: 1.6rem;
    }

    .logo-image {
        padding-bottom: 1rem;
    }

    #loading-screen .logo-image img {
      /*  width: 6rem;*/
        max-height: 6rem;
    }

    .loader-io {
     /*   transform: scale(.8);*/
        transform: matrix(.8, 0, 0, .8, 0, 0);
        /*margin: 1rem;*/
    }
}


.onDemand-button .onDemand-price {
    padding-left: 5px;
}






/****PROJECT LAYOUT****/


.publishLabel-container {
}

#project-window {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.7);
    z-index: 201;
    display: flex;
    flex-direction: column;
    /* overflow: auto;*/
    align-items: center;
}

#project-section .publishLabel-container {
    color: #8b92a9;
    font-size: 1.2rem;
    font-style: italic;
    flex: 1;
    position: relative;
    top: -13px;
    left: 5px;
}

body.dark-mode #project-section .publishLabel {
    color: white;
}

body.light-mode #project-section .publishLabel {
    color: black;
}

#project-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    max-width: 900px;
    width: 100%;
    position: relative;
}

    #project-section .search-section {
        position: relative;
        display: flex;
        flex-direction: column;
        min-width: 0;
        word-wrap: break-word;
        background-color: white;
        background-clip: border-box;
        border: 1px solid rgba(0, 0, 0, 0.125);
        border-radius: 5px;
        font-size: .875rem;
        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%);
        margin: 1rem;
        margin-top: 1rem;
        padding: 0rem 1.5rem;
        /* padding-bottom: 1rem;
    padding-bottom: 1rem;*/
        margin-bottom: 0rem;
        display: flex;
        flex-direction: column;
        flex: 1;
        padding: 0;
        border: transparent;
        max-height: 97vh;
        max-height: 100vh;
        overflow: hidden;
    }

body.dark-mode #project-section .search-section {
    background: #1C1C22 !important;
}

#project-section .search-section .views {
    flex: 1;
    display: flex;
    flex-direction: column;
}

    #project-section .search-section .views .view {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

        #project-section .search-section .views .view .list-view-container {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

            #project-section .search-section .views .view .list-view-container .list-view-body {
                flex: 1;
                display: flex;
                flex-direction: column;
                position: relative;
                margin: 0;
            }

                #project-section .search-section .views .view .list-view-container .list-view-body .list-view-no-items {
                    flex: 1;
                    display: none;
                    flex-direction: column;
                }

.flex-column-1 {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.project-section-header {
    text-align: right;
}

.project-section-close-button {
    font-size: 2rem;
    background-color: transparent;
    border: solid 1px transparent;
    outline: 0 !important;
    opacity: .8;
    transition: .3s;
    position: absolute;
    top: -3px;
    right: 47px;
    z-index: 1;
    color: red;
}

body.dark-mode .project-section-close-button {
    color: white;
}

.project-section-close-button:hover {
    opacity: 1;
}

.project-section-close-button:active {
    opacity: .9;
}

#project-section .app-form-field.form-check .app-form-field-label {
    margin-left: 3px;
}

.project-layout-menu .form-check {
    margin-bottom: 0px !important;
    padding-left: 0px !important;
}

.project-layout-menu .subsection header .form-check {
    margin-bottom: 0px !important;
}

.project-layout-menu .app-navigation-item .form-check {
    margin-bottom: 0px !important;
    flex: unset;
    margin-left: -1rem !important;
}

#project-section .fields-section {
    padding: 0 1.5rem;
    /* border-top: solid 1px #2A2A30; */
    border-bottom: solid 1px #2A2A30;
    padding-top: 10px;
    padding-bottom: 10px;
}

body.light-mode #project-section .fields-section {
    border-bottom: solid 1px lightgray;
}

#project-section .app-form-footer .app-form-buttons {
    padding-bottom: 1rem;
    margin-left: 1rem;
    margin-right: 1rem;
}

.app-form-body {
}

#project-section .app-form-body {
    padding: 0rem 2rem;
    /*overflow: hidden;*/
}

#project-section .app-tabs ul {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    justify-content: center;
}

#project-section .app-form-footer {
    padding-left: 1rem;
    padding-right: 1rem;
}

#project-section .app-view.summary .app-form-content {
    align-items: center;
}

#project-section .app-view.summary .app-tabs {
    margin-bottom: 1.8rem;
    width: 100%;
}

#project-section .app-view.mediaItems-table {
    height: 100%;
}

#project-section .app-form-label.label1 {
    font-size: 2rem;
}

#project-section .app-form-field-image-container.default-artwork .app-form-field-img {
    max-height: 15vh !important;
}


.project-layout {
    /*  position: fixed;*/
    /*left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(20,20,20);
    overflow: auto;
    overflow-x: hidden;
    z-index: 1;
    color: white;
    display: flex;
    flex-direction: column;*/
}

.project-layout-editor-menu {
    z-index: 201;
    display: none !important;
}

body.can-edit .project-layout-editor-menu {
    display: block !important;
}

/*body.is-loading .project-layout-editor-menu,*/
body.playback .project-layout-editor-menu {
    display: none !important;
}

.project-layout-menu {
    position: fixed;
    top: 0rem;
    bottom: 0rem;
    /* border-right: solid 1px rgba(100,100,100,.3);*/
    padding: .5rem;
    /* flex-direction: column;*/
    z-index: 200;
    transition: .3s;
    display: flex;
    width: 35rem;
    left: -35rem;
    overflow: hidden;
    padding: 0;
    /*box-shadow: 0 1px 2px rgb(0 0 0 / 7%), 0 2px 4px rgb(0 0 0 / 7%), 0 4px 8px rgb(0 0 0 / 7%), 0 8px 16px rgb(0 0 0 / 7%), 0 16px 32px rgb(0 0 0 / 7%), 0 32px 64px rgb(0 0 0 / 7%);*/
}

body.edit-layout .project-layout-menu {
    left: 0;
    width: 4.5rem;
}

body.show-layout-menu .project-layout-menu {
    left: 0;
    width: 35rem;
    width: 30rem;
    /* width: 41rem;*/
}

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

    body.edit-layout .project-layout-menu {
        width: 35rem !important;
        left: -35rem !important;
    }
    body.edit-layout #main-screen,
    body.edit-layout .project-base-screen {
        left: 0rem !important;
    }
}

.project-layout .back-button {
    padding: 0.5rem;
    font-size: 1.4rem;
    position: fixed;
    top: 0;
    z-index: 201;
    padding-left: 0.8rem;
    padding-right: 0.6rem;
}

.project-layout .sp-original-input-container .sp-add-on .sp-colorize {
    border: solid 1px lightgray;
    border-top-right-radius: 3px !important;
    border-bottom-right-radius: 3px !important;
}

.project-layout-header {
    padding: 1rem 4.3rem;
    display: flex;
    align-items: center;
    padding-right: 2.2rem;
    padding-bottom: 2rem;
    position: fixed;
    width: 100%;
    top: 0;
    padding-bottom: 0.5rem;
    padding-top: 0.5rem;
    transition: .3s;
    z-index: 5;
    background-color: black;
}

    .project-layout-header.sticky {
        background-color: transparent !important;
        /*background-color: rgba(0,0,0,.1) !important;*/
    }

.project-layout-pages {
    display: flex;
    flex-direction: column;
    flex: 1;
    transition: .3s;
}

body.show-layout-menu .project-layout-pages {
    padding-left: 35rem;
}

.project-layout-page {
    display: flex;
    flex-direction: column;
    flex: 1;
}
/*.project-header-page-header {
    height: 100vh;
    overflow: hidden;
    width: 100%;
}*/
.project-layout-header .project-layout-header-logo img {
    max-width: 500px;
    max-height: 28px;
}

.project-layout-header .media-status-user-container {
    margin-left: .5rem;
    margin-right: 1rem;
    display: flex;
    align-items: center;
    position: relative;
    margin-top: 0rem;
    margin-bottom: 0.2rem;
}

.project-layout-header .media-status-notify-container {
    margin-left: 1rem;
    margin-right: 0rem;
    display: flex;
    align-items: center;
    position: relative;
    order: 0;
    margin-top: .3rem;
}

.project-layout-header .app-user-content-button-icon {
    margin: 0.5rem;
    font-size: 2rem;
    color: white;
    position: relative;
    top: 2px;
}

.project-layout-header .media-status-notify-container .app-notify-content-button-icon {
    font-weight: 900 !important;
}

.project-layout-page-items {
    display: flex;
    align-items: center;
    padding: 0 1rem;
    padding-left: 2rem;
}

.project-layout-page-item {
    padding: .5rem;
    font-size: 1.2rem;
}

    .project-layout-page-item.selected {
        opacity: 1 !important;
    }

.project-layout-header .add-page-button {
    padding: .5rem 2rem;
    display: none;
}

body.edit-layout .project-layout-header .add-page-button {
    display: flex;
}

.project-layout .add-quick-access-button {
    padding: .5rem 2rem;
    display: none;
    position: relative;
    top: -3px;
}

body.edit-layout .project-layout .add-quick-access-button {
    display: flex;
}

.project-layout-page-header {
    padding: 1rem 6rem;
    display: flex;
    align-items: baseline;
    padding-right: 1.5rem;
    padding-top: 0;
    padding-bottom: 4rem;
}

.project-layout-page-name {
    font-size: 38px;
    line-height: 38px;
    font-weight: 700;
    margin-right: 15px;
}


.project-layout-page-background-image,
.dms-on-demand .project-layout-page-background-image {
    position: absolute;
    left: -100px;
    top: -100px;
    right: -100px;
    bottom: -100px;
    /*left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;*/
    pointer-events: none;
    filter: blur(30px);
    /*transform: scale(1);*/
    transform: matrix(1.0, 0, 0, 1.0, 0, 0);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 0%;
    opacity: .7;
    z-index: -2;
}
.dms-on-demand.subscriptions-screen .project-layout-page-background-image {
    filter: blur(10px);
}

.project-layout-page-background-image.no-blur,
.dms-on-demand .project-layout-page-background-image.no-blur {    
    filter: blur(0px);
}

.project-quick-access.no-opacity .project-layout-page-background-image,
.dms-on-demand .no-opacity .project-layout-page-background-image {
    opacity: 1;
}

.project-quick-access:not(.blur-image).no-blur-image .project-layout-page-background-image,
.dms-on-demand :not(.blur-image).no-blur-image .project-layout-page-background-image {
    filter: blur(0px);
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
}

.project-quick-access.blur-image .project-layout-page-background-image,
.dms-on-demand .blur-image .project-layout-page-background-image {
    display: initial;
}
.project-layout-page-background-image.show {
    display: flex;
}

.project-layout-page-default-video,
.project-layout-page-unavailable-video {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.project-layout-page-default-image,
.dms-on-demand .project-layout-page-default-image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.project-layout-page-default-image-container {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.project-layout-page-default-image-container .project-layout-page-default-image,
.dms-on-demand .project-layout-page-default-image-container .project-layout-page-default-image {
    position: absolute;
    top: -100px;
    left: -100px;
    right: -100px;
    bottom: -100px;
    object-fit: cover;
    width:unset;
    height:unset;
    z-index:unset;
}
.project-layout-page-default-image.hide,
.dms-on-demand .project-layout-page-default-image.hide {
    display: none;
}

.dms-on-demand-form .dms-on-demand-selection-form {
    background-color: rgba(0, 0, 0, 1);
    color: white;
    padding-top: 2rem;
    border-radius: 5px;
    height: fit-content;
    padding-bottom: 2rem;
    max-width: 50vw;
    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-selection-container-ex {
    display: flex;
}

/*.section-quickaccess .project-layout-page-default-image {
    display: none;
}
.section-quickaccess .project-layout-page-default-image.show {
    display: block;
}*/
.project-quick-access.no-blur-image .project-layout-page-default-image,
.dms-on-demand .no-blur-image .project-layout-page-default-image {
    display: none;
}


.project-quick-access.blur-image .project-layout-page-default-image,
.dms-on-demand .blur-image .project-layout-page-default-image {
    opacity: .7;
}

.project-layout-page-info {
    padding: 1rem;
    font-size: 1.8rem;
    max-width: 65%;
    padding-top: 4vh;
    padding-top: 3vh;
}
.center-page-title .project-layout-page-info {
    padding-right: 5%;
    max-width: unset;
    display: flex;
   /* justify-content: center;*/
    flex-direction: column;
    justify-content: unset;
    align-items: center;
    padding-top:0px;
}
.center-page-title.has-image .project-layout-page-image-container {

}
.center-page-title.has-image .project-layout-page-image-container img {
    display:unset;
    max-width: 45vw;
    max-height: 45vw;
    max-width: 58rem;
    max-height: 11rem;
    padding-bottom:0;
}
.center-page-title .project-layout-page-image-container {
    height:unset;
}
.center-page-title .project-layout-page-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 65%;
}
.center-page-title .project-layout-page-title {
    font-size: 6.5vh;
    text-align: center;
    padding-top:0px;
}
.center-page-title .project-layout-page-message {
    text-align: center;
    font-size: 5vh;
    font-weight: 600;
    padding-top: 1rem;
    font-size: 4vh;
    font-size: 2.17vw;
    font-size: 2.8rem;
    font-weight: 600;
    font-weight: normal;
    padding-top: 1rem;
    padding-bottom: 1.5rem;
    line-height: 1.4;
}

.project-quick-access.full-info .project-layout-page-info {
    max-width: unset;
    display: flex;
}

.project-layout-page-title {
    font-weight: 900;
    font-size: 2.8rem;
    padding-bottom: 0rem;
    padding-top: 2rem;
    text-shadow: -1px 1px 2px rgb(0, 0, 0);
    max-width: 900px;
}
.no-shadow .project-layout-page-title {
    text-shadow: none;
}

.project-layout-page-info.has-image .project-layout-page-title {
    font-size: 2.8rem;
    padding-bottom: 0rem;
    padding-bottom: .5rem;
}

.project-layout-page-info.no-image .project-layout-page-title {
    font-size: 2.8rem;
    padding-bottom: 0rem;
    padding-bottom: .5rem;
}

.project-layout-page-image {
    /* padding-bottom: 2rem;*/
    margin-bottom: 0rem;
    margin-bottom: 2rem;
}

.project-quick-access.full-info .project-layout-page-image {
    object-fit: contain;
    max-height: 62vh;
}

.project-quick-access .project-layout-page-image.use-shadow,
.project-quick-access .project-layout-page-image.light-shadow {
    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%);
}

.project-quick-access .project-layout-page-image.heavy-shadow {
    box-shadow: 0 4px 20px 0px rgb(0 0 0 / 14%), 0 7px 10px -5px rgb(100 100 100 / 40%);
}

.project-layout-page-image-container {
     height: 120px;
    overflow: hidden;
    /*display: none;*/
}

    .project-layout-page-image-container img {
        display: none;
    }

.project-layout-page-info.has-image .project-layout-page-image-container {
    max-width: 685px;
    height: 280px;
    overflow: hidden;
}

.project-layout-page-info.hide-image .project-layout-page-image-container {
    height: 120px;
   /* display: none;*/
}

.project-layout-page-info.has-image .project-layout-page-image-container img {
    display: initial;
}

.project-layout-page-info.hide-image .project-layout-page-image-container img {
    display: none !important;
}

.project-layout-page-info.no-image .project-layout-page-image-container {
    height: 120px;
}

    .project-layout-page-info.no-image .project-layout-page-image-container img {
        display: none;
    }

.project-quick-access.full-info .project-layout-page-image-container {
    width: unset;
    height: unset;
    overflow: visible;
}

.project-quick-access.full-info .project-layout-page-data {
    padding-left: 3rem;
    padding-left: 2.7rem;
    /*padding-right: 10rem;*/
}

.project-quick-access.full-info .project-layout-page-message {
    -webkit-line-clamp: 13;
}

.project-layout-page-item-header {
    height: 94vh;
    height: 100vh;
    height: calc(100vh - 0px);
    /*overflow: hidden;*/
    width: 100%;
    position: relative;
    display: none;
}

.tab-page.has-quickaccess .project-layout-page-item-header {
    display: block !important;
}

.project-layout-page-item-header-container {
    padding-top: 6rem;
    padding-left: 52px;
    position: relative;
    width: 100%;
    height: 100%;
    transition: .3s;
}

body.edit-layout .project-layout-page-item-header-container {
    padding-left: 3.2rem;
}

.project-layout-page-name {
    padding: 1rem;
    display: none;
}

.project-layout.show-name .project-layout-page-name {
    display: inherit;
}



.project-layout-page-quick-access-menus {
    justify-content: center;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 3rem;
    z-index: 6;
}

.project-layout-page-quick-access-menus {
    display: flex;
    align-items: center;
}

.project-layout-page-quick-access-menu-item {
    padding: .3rem;
    margin: 0 2px;
    transition: background-color 0.6s ease;
}

/*body.edit-layout .project-layout-page-quick-access-menu-item {
    padding: .3rem 1.5rem;
}*/

.project-layout-page-quick-access-menu-item-container .project-quick-access-item-icons {
    top: -2.2rem;
    display: none !important;
}

.project-layout-page-quick-access-menu-item.selected {
    opacity: 1 !important;
}

.project-layout-page-quick-access-menu-item > div {
    height: 15px;
    width: 15px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
}

.slprev, .slnext {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 1;
    cursor: pointer;
    position: absolute;
    top: 0;
    width: auto;
    padding: 50px 16px;
    top: 50%;
    margin-top: -100px;
    color: #fff;
    font-weight: bold;
    font-size: 18px;
    transition: background-color 0.6s ease;
    border-radius: 0 3px 3px 0;
    font-size: 2rem;
    display: block;
}

.slnext {
    right: 0;
    border-radius: 3px 0 0 3px;
}

    .slprev:hover, .slnext:hover {
        color: white;
        background-color: rgba(100,100,100,0.3);
    }

.body.sticky .slprev, .body.sticky .slnext {
    display: none;
}

.slprev i, .slnext i {
    transition: .3s;
}

.slprev:hover i, .slnext:hover i {
    transform: scale(1.3);
}

.project-layout-page-message {
    max-height: 500px;
    overflow: hidden;
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.project-layout-page-message {
    max-width: 36vw;
    max-width: 80%;
}

.project-layout-page-message-info {
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: -1px 1px 2px rgb(0, 0, 0);
}
.no-shadow .project-layout-page-message-info {
    text-shadow: none;
}

.project-layout-page-title-options .options-message {
    text-shadow: -1px 1px 2px rgb(0, 0, 0);
    padding-top: 0.7rem;
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.5;
    font-size: 1.6vh;
    color: white;
    padding-left: 2px;
    width: fit-content;
    cursor: pointer;
    transition:.1s;
}
.no-shadow .project-layout-page-title-options .options-message {
    text-shadow: none;
}
    .project-layout-page-title-options .options-message:hover {
        color: dodgerblue;
    }
.center-page-title .options-message br {
    display:none;    
}

.project-layout-page-title-options .browse-button-container {
    display: flex;
    padding-top: 0.2rem;
}
.center-page-title .project-layout-page-title-options .browse-button-container {
    justify-content: center;
    padding-top: 0.5rem;
}
.center-page-title .project-layout-page-title-options .browse-button-container .browse-button {    
    font-size: 1.6rem;
}
.center-page-title .project-layout-page-title-options .options-message {
    width: unset;
    text-align: center;
}
.project-layout-page-title-options .browse-button-container .browse-button {
    text-shadow: -1px 1px 2px rgb(0, 0, 0);
    padding-top: 0rem;
    font-size: 1.1rem;
    font-weight: bold;
    line-height: 1.5;
    color: white;
    color: dodgerblue;
}
.no-shadow .project-layout-page-title-options .browse-button-container .browse-button {
    text-shadow: none;
}


.project-layout-page-title-info {
    position: absolute;
    /*position: fixed;*/
    right: 0;
    bottom: 17%;
    border: solid 3px #dcdcdc;
    border-style: none none none solid;
    background-color: rgba(51,51,51,.6);
    font-size: 1.2rem;
    padding: 1rem 3.5rem 1rem 0.8rem;
    /* border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;*/
    z-index:3;
}

.project-quick-access {
    position: relative;
    width: 100%;
    min-height: 100%;
    scroll-behavior: smooth;
    overflow: hidden;
}



.project-layout-page-quick-access-items-container {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

.project-layout-page-quick-access-items {
    display: flex;
    height: 100%;
    overflow: hidden;
    /* overflow-y: hidden;*/
    scroll-behavior: smooth;
}

.project-layout-page-body {
    width: 100%;
    /*min-height: 100px;*/
    /* padding: 1.5rem 4.5rem;*/
    /*    background-color: inherit;*/
    padding-top: 0px;
    margin-top: 0rem;
    box-shadow: 0 0 10px 10px inherit;
}

.project-header-page-header {
    padding-top: 18vh;
    padding-top: 12vh;
    padding-left: 5vw;
    width: 100%;
    height: 100%;
    /*transition: .3s;*/
    z-index: 1;
}

.dms-on-demand.fullscreen .project-header-page-header {
    padding-top: 15%;
    padding-left: 5%;
    width: 100%;
    height: 100%;
    /*transition: .3s;*/
    /*z-index:5;*/
}
.dms-on-demand.default-screen .project-header-page-header {
    position: absolute;
    z-index: 2;
}
.dms-on-demand.fullscreen {
    overflow:hidden;
}
.dms-on-demand.fullscreen.relative {
    position: unset;
    overflow-y: auto;
}
/*.mobile-device  .dms-on-demand.fullscreen.relative {
    overflow-y: visible;
}*/
.dms-on-demand.fullscreen.relative .dms-on-demand-form-container {
    position:unset;
    max-height:unset;
}
.dms-on-demand.fullscreen.relative .dms-on-demand-form {
    min-height:85vh;
 /*   width: 100vw;*/
}
.dms-on-demand.default-screen .app-project-footer {
    display:none;
}



.tab-page.has-quickaccess-items .project-header-page-header {
    padding-left: 54px;
    padding-left: 7vw;
}

body.edit-layout .project-header-page-header {
    padding-left: 6rem;
}

.project-layout-page-title-actions {
    display: flex;
    padding-top: .5rem;
}

.dms-on-demand .project-layout-page-title-actions {
    padding-top: .7rem;
}
.center-page-title .project-layout-page-title-actions {
    padding-top: 1.2rem;
    padding-bottom: 0.5rem;
}
.bottom-shadow .project-header-page-header {
    box-shadow: inset 0 -200px 100px -10px #000000
}
.dms-on-demand .project-layout-page-title-actions .app-button {
    padding-bottom: .7rem !important;
    padding-top: .7rem !important;
}

    /*.dms-on-demand .project-layout-page-title-actions .app-button {*/
        /*background-color: rgba(20,20,20,.7);
        border-color: rgba(100,100,100,.5);*/
        /*border-radius: 6px;
        font-weight: bold;
        color: white;
    }
        .dms-on-demand .project-layout-page-title-actions .app-button:hover {
            background: #FF0062;
            border-color: dodgerblue;
            color: white;
        }
        .dms-on-demand .project-layout-page-title-actions .app-button:focus {
            background-color: rgba(20,20,20,.5);
            border-color: dodgerblue;
        }
        .dms-on-demand .project-layout-page-title-actions .app-button:active {
            background: rgba(100,100,100, .5);
        }*/

.project-layout-page-title-actions button {
    margin-right: .5rem;
    font-size: 1.4rem;
    border-radius: 6px;
    /*background-color: rgba(255,255,255,.4);*/
    padding: 0.75rem 1.5rem;
    flex-wrap:nowrap;
}

    .project-layout-page-title-actions button label {
        font-size: 1.4rem !important;
    }

    .project-layout-page-title-actions button > i {
        font-size: 1.2rem;
    }
.app-icons.share-button i.material-icons {
    /* padding-right: 5px; */
    /* font-size: 1.4rem; */
    font-size: 23px;
    position: relative;
    /* top: 2px; */
    left: -3px;
    top: -2px;
    left: -4px;
    top: -1px;
}
.app-icons.share-button i {
    transform: rotateZ(270deg);
}
.project-layout-page-info .media-links .button-container .app-icons.share-button i,
.project-layout-page-data .media-links .button-container .app-icons.share-button i,
.media-info-container .media-links .button-container .app-icons.share-button i {
    top: -1.5px;
}

    .project-layout-page-title-actions button.button-more-info i {
        top: 0px !important;
        font-size: 1.2rem;
    }

    .project-layout-page-title-actions button.browse-button i {
        top: 0px !important;
        font-size: 1.4rem;
    }

    .project-layout-page-title-actions button.button i {
        font-size: 1.4rem !important;
        padding-right: 3px;
    }

    .project-layout-page-title-actions button.button-play {
        /*background-color:white;
    color:black;*/
    }

.project-layout-footer {
    width: 100%;
    padding: .5rem;
    transition: .3s;
}

body.show-layout-menu .project-layout-footer {
    padding-left: 35rem;
}

body.show-layout-menu .project-layout-header {
    padding-left: 38.9rem;
}

.project-layout-footer .app-footer-link a {
    color: white;
}

.project-layout-page-item-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.project-quick-access-item-icons {
    display: none;
    position: absolute;
    top: -1rem;
    right: unset;
}

body.edit-layout .project-quick-access-item-icons {
    display: flex;
}
body.edit-layout button.selected .project-quick-access-item-icons {
    margin-right: 1rem;
}
/*body.edit-layout .project-quick-access-item-icons button {
    padding:0px;
}*/
.project-quick-access-item-icons i {
    font-size: 14px !important;
}

.project-layout-header-logo-image-container .project-quick-access-item-icons {
    top: -27px !important;
    right: unset !important;
}

.project-layout-header-logo-image-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}


/* SUBSCRIPTION PLAN */

.dms-on-demand-presentation-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/*.dms-on-demand-presentation-sections {
    max-width: 80%;
}
*/
.dms-on-demand-presentation-section-top {
    margin: 3rem;
    margin-bottom:2.5rem;
    text-align:center;
}

.dms-on-demand-presentation-section-title {
    font-size: 4rem;
    font-weight: bold;
    text-shadow: -1px 1px 2px rgb(0 0 0);
}
.no-shadow .dms-on-demand-presentation-section-title {
    text-shadow: none;
}


.dms-on-demand-presentation-section-message {
    font-size: 2rem;
    margin: .5rem;
    text-shadow: -1px 1px 2px rgb(0 0 0);
}
.no-shadow .dms-on-demand-presentation-section-message {
    text-shadow: none;
}

.dms-on-demand-presentation-section-planType > label {
    font-size: 2rem;
    padding: 1rem;
}
/*.dms-on-demand-presentation-section-planType > .drop-down {
    margin: 0.5rem 1rem;
}*/
.dms-on-demand-presentation-section-planType > .drop-down .selected-item {
    width: 100%;
    font-size: 1.2rem;
    /* padding: 0.5rem 0.5rem !important;*/
    color: rgb(255, 171, 21);
    opacity:1;
}
.dms-on-demand-presentation-section-planType > .drop-down .items {
    width: unset;
}
.dms-on-demand-presentation-section-planType > .drop-down {
    width: 100%;
    margin-bottom: 0.5rem;
}
.dms-on-demand-presentation-section-body {
    margin: 0 2.5rem;
    flex-wrap: wrap;
   /* display:flex;*/
}
.dms-on-demand-presentation-section-cards {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
    justify-content: space-evenly;
}
.dms-on-demand-presentation-section-card {
    margin: 1rem;
    border: solid 1px rgba(100,100,100,.3);
    padding: 1.5rem 2rem;
    border-radius: 5px;
    flex: 1;
    display: flex;
    flex-direction: column;
    line-height: 1.4;
    box-shadow: 7px 7px 7px 0px rgb(0 0 0 / 10%);
    background-color: rgba(0,0,0,.7);
    transition:.2s;
}
.dms-on-demand-presentation-section-card.selected {
    transform: scale(1.1);
}
.dms-on-demand-presentation-section-card-body {
    margin-bottom: 1rem;
    flex: 1;
}
.dms-on-demand-presentation-section-card-label {
    font-size: 2rem;
    font-weight: bold;
}
.dms-on-demand-presentation-section-card-availableSpace {
    font-size: 1.6rem;
}
.dms-on-demand-presentation-section-card-amount-container {
    font-size: 1.2rem;
    margin: 0.2rem;
    display: flex;
    align-items: baseline;
}
.dms-on-demand-presentation-section-card-amount {
    font-size: 2rem;
    padding-right:.3rem;
}
.dms-on-demand-presentation-section-card-submit {
    font-size: 1.6rem !important;
    justify-content: center;
}
.dms-on-demand-presentation-section-warning {
    margin: 0 1rem;
    display:none;
}
.dms-on-demand-presentation-section-warning-label {
    color: red;
    font-style: italic;
    margin-top: .5rem;
}
.dms-on-demand-presentation-section-warning-button {
    font-size: .9rem;
    text-decoration: underline;
    margin-left: 0.2rem;
}
.dms-on-demand-presentation-section-card-freeTrial {
    font-size: 1rem;
    font-weight: bold;
    color: dodgerblue;
    margin-top: 0.5rem;
    margin-left: 0.2rem;
}
.dms-on-demand-presentation-section-planType {
    border-bottom: solid 1px rgba(100,100,100,.3);
    padding-bottom: 0.5rem;
    margin-bottom: 0.8rem;
}
.dms-on-demand-presentation-section-card-amount-type {
    white-space:nowrap;
}
.dms-on-demand-presentation-section-card-amount-seperator {
    padding-left: .5rem;
    padding-right: .5rem;
}
.dms-on-demand.subscriptions-screen .project-layout-page-background-image {
    z-index:unset;
    display:flex;
}
.dms-on-demand-presentation-section-card-support-message {
    font-size: 1.4rem;
    color: rgb(255, 171, 21);
}

.dms-on-demand-presentation-section-card-features {
}
.dms-on-demand-presentation-section-card-features-icon {
    display: flex;
    align-items: center;
}
.dms-on-demand-presentation-section-card-features-icon-seperator {
    height: 1px;
    background-color: rgba(100,100,100,.3);
    flex: 1;
}
.dms-on-demand-presentation-section-card-features-icon button {
    margin: 0.5rem 1rem;
}
.dms-on-demand-presentation-section-card-features-icon button i {
    font-size: .9rem;
    transition:.3s;
}
.dms-on-demand-presentation-section-card-features-icon button label {
    margin-left: 0.5rem;
    font-size: .9rem;
}
.dms-on-demand-presentation-section-card-features-list {
    height: 0px;
    overflow: hidden;
    transition: .3s;
    font-size: 1.2rem;
    line-height: 1.4;
    margin-bottom: 1rem;
    text-shadow: -1px 1px 2px rgb(0 0 0);
}
.no-shadow .dms-on-demand-presentation-section-card-features-list {
    text-shadow: none;
}
.dms-on-demand-presentation-section-card-feature {

}
.dms-on-demand-presentation-section-feature-label {
    font-size: 1rem;
    margin: 0.1rem;
}
.dms-on-demand-presentation-section-cards.show-features .dms-on-demand-presentation-section-card-features-list {
    height:255px;
}
.dms-on-demand-presentation-section-cards.show-features .dms-on-demand-presentation-section-card-features-icon button i {
    transform: rotateZ( 180deg);
}
.dms-on-demand.subscriptions-screen .dms-on-demand-selection-container {
    width:100%;
}
/*.dms-on-demand.subscriptions-screen .dms-on-demand-selection-container {
    position: absolute;
    padding-top: 4% !important;
}*/
.dms-on-demand.clear-screen .dms-on-demand-selection-sections {
    background-color: rgba(0,0,0,1) !important;
}
.dms-on-demand.subscriptions-screen .dms-on-demand-selection-section-subscription-item {
    background: rgba(0,0,0,.7);
}
.dms-on-demand.subscriptions-screen .dms-on-demand-selection-section-subscription-item.selected {
    transform: scale(1.05);
}
.dms-on-demand.subscriptions-screen .dms-on-demand-selection-section-subscriptions {
    border-bottom: solid 1px rgba(100,100,100,.3);
}
.dms-on-demand.subscriptions-screen .drop-down.subscription-plans {
    /*z-index: 500;*/
}
.dms-on-demand.subscriptions-screen .drop-down.subscription-plans .selected-item {
    background-color: transparent !important;
    color: white;
    opacity: 1;
    font-size: 3rem;
    font-weight: bold;
    padding-left: 0 !important;
    padding-bottom: 0 !important;
    border-color:transparent !important;
    text-shadow: -1px 1px 2px rgb(0 0 0);
}
.no-shadow .dms-on-demand.subscriptions-screen .drop-down.subscription-plans .selected-item {
    text-shadow: none;
}
.dms-on-demand.subscriptions-screen .drop-down.subscription-plans .items {
   /* margin-top: -13px;*/
}
.dms-on-demand.subscriptions-screen .drop-down.subscription-plans .items .item {
    opacity: 1;
    font-size: 2rem;
}
.dms-on-demand.subscriptions-screen .dms-on-demand-selection-section-title {
    margin-bottom: 0rem;
    text-shadow: -1px 1px 2px rgb(0 0 0);
}
.no-shadow .dms-on-demand.subscriptions-screen .dms-on-demand-selection-section-title {
    text-shadow: none;
}
.dms-on-demand.subscriptions-screen .dms-on-demand-selection-section-title-info {
    font-size: 2.2rem;
    text-shadow: -1px 1px 2px rgb(0 0 0);
}
.no-shadow .dms-on-demand.subscriptions-screen .dms-on-demand-selection-section-title-info {
    text-shadow: none;
}
.dms-on-demand .dms-on-demand-selection-section-freeTrial-info {
    font-size: 2rem;
    font-weight: bold;
    color: dodgerblue;
    margin-top: 0.5rem;
    margin-left: 0.2rem;
    text-shadow: -1px 1px 2px rgb(0 0 0);
}
.no-shadow .dms-on-demand .dms-on-demand-selection-section-freeTrial-info {
    text-shadow: none;
}
.dms-on-demand .dms-on-demand-presentation-section-card-pricing-container {
    display: flex;
    width: 100%;
    align-items: baseline;
    font-size: 1.2rem;
    margin: 0.2rem;
    display: flex;
    align-items: baseline;
    flex: 1;
}
.dms-on-demand .dms-on-demand-presentation-section-card-amount-container {
    flex: 1;
}
.dms-on-demand .dms-on-demand-selection-section-description {
    text-shadow: -1px 1px 2px rgb(0 0 0);
}
.no-shadow .dms-on-demand-selection-section-description {
    text-shadow: none;
}
.dms-on-demand .dms-on-demand-selection-section-useCardOnFile-container {
   /* padding: 1rem;*/
    padding-top: .5rem;
    padding-bottom: 0;
}

.dms-on-demand .dms-on-demand-selection-section-useCardOnFile-button {
    padding: 0.1rem 0.2rem;
    border-radius: 5px;
}
.dms-on-demand .dms-on-demand-selection-section-useCardOnFile-button:focus {
    border-color: dodgerblue;
}
.dms-on-demand .dms-on-demand-selection-section-useCardOnFile-button label {
    padding-left:.5rem;
}
.dms-on-demand .dms-on-demand-selection-section-subscription-item {
    flex-direction: column;
    align-items: baseline;
    width: 100%;
}
.dms-on-demand .dms-on-demand-selection-section-subscription-item.selected {
   /* transform: scale(1.05);      */  
}
.dms-on-demand .dms-on-demand-selection-section-subscription-item.yearly {
    margin-top: 1rem;
}
.dms-on-demand .dms-on-demand-presentation-section-card-pricing-type {
    padding: 0.2rem 0.5rem;
    padding-bottom: 0;
    font-size: 1.2rem;
    color: rgb(255, 171, 21);
}


.dms-on-demand-selection-section1.show-features .dms-on-demand-presentation-section-card-features-list {
    height: 255px;
}

.dms-on-demand-selection-section1.show-features .dms-on-demand-presentation-section-card-features-icon button i {
    transform: rotateZ( 180deg);
}
.dms-on-demand-selection-section1 .dms-on-demand-presentation-section-feature-label {
    text-shadow: -1px 1px 2px rgb(0 0 0);
    margin: 0.1rem;
    font-size: 1rem;
    line-height: 1.4;
}
.no-shadow .dms-on-demand-selection-section1 .dms-on-demand-presentation-section-feature-label {
    text-shadow: none;
}

.media-status-user-container {
    /*margin-left: .5rem;
    margin-right: .5rem;
    display: flex;
    align-items: center;*/
    position: relative;
    margin-right: 1rem;
    margin-top: 0rem;
}
.dms-on-demand-actions.header.app-project-header > .media-status-user-container {
    top: -2px;
    pointer-events: all;
}
.app-user-content-button {
    display: flex;
    align-items: center;
}

.app-user-content-button-icon {
    margin: .5rem;
    font-size: 1.9rem;
    color: white;
}

body.dark-mode .app-search-content-button input {
    border: none;
    color: black;
}

.dms-on-demand-actions .dms-on-demand-form-close {
    margin-left: .5rem;
    margin-bottom: .1rem;
    margin-right: .5rem;
}

.app-user-content-menu {
    position: absolute;
    background-color: white;
    border: solid 1px lightgray;
    top: 59px;
    /* width: 200px; */
    /* overflow: hidden;*/
    padding: .5rem;
    border-radius: 6px;
    /* box-shadow: 0 10px 16px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%) !important; */
    border-radius: .1875rem;
    background-color: #fff;
    background-clip: padding-box;
    color: #1a2e3b;
    box-shadow: 0 3px 5px 0 rgb(0 0 0 / 10%);
    box-sizing: border-box;
    display: flex;
    min-width: 160px;
    border: 1px solid #eef1f2;
    flex-direction: column;
    text-align: left;
    align-items: baseline;
    transform: none;
    right: -6px;
    left: auto;
    opacity: 0;
    display: none;
    transition: all 0.2s ease 0s;
    transition-property: opacity;
    cursor: default;
    padding: 0;
    background-color: black;
    border-color: black;
    border-radius: 6px;
}

    .app-user-content-menu.show {
        display: flex;
    }

    .app-user-content-menu.reveal {
        opacity: 1;
    }

    .app-user-content-menu::before {
        display: block;
        content: " ";
        position: absolute;
        bottom: 100%;
        right: 20px;
        margin-left: -10px;
        border-width: 10px;
        border-style: solid;
        border-color: transparent transparent #F5F5F5 transparent;
        border-color: transparent transparent black transparent;
    }

.app-user-content-menu-item {
    /* font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;*/
    font-weight: 400;
    color: #1a2e3b;
    max-width: 44rem;
    letter-spacing: .01rem;
    margin: 0;
    font-size: 13px;
    line-height: 30px;
    list-style: none;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
    transition: .3s;
    color: dimgray;
    display: flex;
    align-items: center;
    color: gray;
    width: 100%;
}

button.app-user-content-menu-item:hover {
    background-color: rgba(0,0,0,.1);
}

.app-user-content-menu-item-label {
    overflow: hidden;
    display: inline-block;
    text-overflow: ellipsis;
    vertical-align: middle;
    box-sizing: content-box;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    height: 20px;
    padding-left: 5px;
    padding-right: 5px;
}

    .app-user-content-menu-item-label i {
        padding-right: .5rem;
        width: 38px;
        text-align: center;
    }

    .app-user-content-menu-item-label span {
        flex: 1;
        color: black;
    }


button.app-user-content-menu-item .app-user-content-menu-item-label {
    color: black;
    color:white;
}

.app-user-content-menu-item-seperator {
    background: lightgray;
    background: black;
    margin-bottom: 5px;
    margin-top: 5px;
    height: 1px;
    max-height: 1px;
    width: 100%;
}


.app-notify-content-menu {
    position: absolute;
    background-color: white;
    border: solid 1px lightgray;
    top: 50px;
    /* width: 200px; */
    /*overflow: hidden;*/
    padding: .5rem;
    border-radius: 5px;
    /* box-shadow: 0 10px 16px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%) !important; */
    border-radius: .1875rem;
    background-color: #fff;
    background-clip: padding-box;
    color: #1a2e3b;
    box-shadow: 0 3px 5px 0 rgb(0 0 0 / 10%);
    box-sizing: border-box;
    display: flex;
    min-width: 160px;
    border: 1px solid #eef1f2;
    flex-direction: column;
    text-align: left;
    align-items: baseline;
    transform: none;
    right: -169px;
    left: auto;
    display: none;
    opacity: 0;
    transition: all 0.2s ease 0s;
    transition-property: opacity;
    cursor: default;
}

    .app-notify-content-menu.show {
        display: flex;
    }

    .app-notify-content-menu.reveal {
        opacity: 1;
    }

    .app-notify-content-menu::before {
        display: block;
        content: " ";
        position: absolute;
        bottom: 100%;
        right: 177px;
        margin-left: -10px;
        border-width: 10px;
        border-style: solid;
        border-color: transparent transparent #F5F5F5 transparent;
    }

    .app-notify-content-menu.show {
        opacity: 1;
    }

.app-notify-content-menu-item {
}

button.app-notify-content-menu-item:hover {
}

.app-notify-content-menu-item-label {
}











.layout-screen.force-relative .section-grid .library-groups {
    padding-bottom: 0rem;
}

/*.layout-screen.force-relative .section-quickaccess {
    min-height: unset;
}*/

/*.layout-screen.force-relative .app-project-footer {
    position: relative;
    z-index:unset;
}*/

body.library-selection .layout-screen.force-relative .app-project-footer {
    z-index:499;
}

.layout-screen.force-relative .header-menu {
    position: relative;
}
.layout-screen.force-relative .body-container {
    margin-top: 0px;
}
.layout-screen.force-relative .section-grid {
    min-height: unset;
    margin-bottom: 0;
    padding-top: 0.3rem;
}

.project-layout-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.slide-show .buttonFullscreen {
    position: fixed;
    right: 2rem;
    bottom: 1rem;
    color: dimgray;
    z-index: 51;
}


.my-player #button-subscribe {
    display:none;
}

.footer .buttonFullscreen i {
    font-size: 100%;
    position: relative;
    top: 1px;
}

#options-screen .sections-tabs {
    padding-top:.5rem;
}
.library-group-details .controls button .button-label {
    padding-right:5px;
}

.library-group-details .controls 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: 0rem !important;
}
.no-shadow .library-group-details .controls button.purchase-button {
    text-shadow: none;
}

.library-group-details .controls .purchase-buttons button.purchase-button {
    opacity: 1;
}

.library-group-details .controls 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: 0rem !important;
}
.no-shadow .library-group-details .controls button.rent-button {
    text-shadow: none;
}


.library-group-details .controls .purchase-buttons button.rent-button {
    opacity: 1;
}

.library-group-details .controls button.subscribe-button {
    color: #FFAB15;
    text-shadow: -1px 1px 2px rgb(0 0 0);
    font-weight: bold;
}
.no-shadow .library-group-details .controls button.subscribe-button {
    text-shadow: none;
}

.library-group-details .controls .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;
    pointer-events: all;
}
.no-shadow .library-group-details .controls .subscription-button {
    text-shadow: none;
}

.library-group-details .controls .subscription-button:hover,
.library-group-details .controls .subscription-button:focus,
.library-group-details .controls .subscription-button:active,
.library-group-details .controls .subscription-button.selected {
    color:white;
}
.library-group-details .controls .subscription-button .subscription-title {
    font-size: 2rem;
    text-transform:uppercase;
}
.library-group-details .controls .subscription-button .subscription-info {
    font-size: 1.6rem;
    line-height: 2.2rem;
    font-size: 1.4rem;
    line-height: 2rem;
}
.dms-on-demand-buttons button {
    border-radius:3px;
}
.app-project-header > #button-subscribe,
.app-project-header > #button-signup {
    margin-left: 1rem;
    margin-right: 2rem;
    background-color: transparent;
    border-color: transparent;
}
.app-project-header > #button-subscribe > div,
.app-project-header > #button-signup > div {
    /*color: #FFAB15;*/
    /*font-weight: bold;*/
    /*transition:.3s;*/
}
.app-project-header > #button-subscribe:hover > div,
.app-project-header > #button-signup:hover > div {
    color: white !important;
}
body.is-updating .app-project-header > #button-subscribe,
body.is-loading .app-project-header > #button-subscribe,
body.is-updating .app-project-header > #button-signup,
body.is-loading .app-project-header > #button-signup {
    display: none !important;
}

#main-screen .media-status-user-container {
    /* margin-top: 0;*/
    /* margin-top: 5px;
    margin-right: 1rem;*/
    top: 2px;
}
#main-screen .header .dms-on-demand-form-close {
    transition: .3s;
    opacity: 0;
    pointer-events: none;
    position: relative;
    top: 0px;
    pointer-events: none;
    padding: 0;
    margin-left: 1rem;
    margin-right: -45px;
}
#main-screen .header .dms-on-demand-form-close.show {
    opacity:1;
    pointer-events:all;    
    margin-right: 1rem;
    margin-left: 1.5rem;
}

.sections-page section button {
    border-radius: 3px;
}
#options-info .subscription-container .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;
}
.no-shadow #options-info .subscription-container .subscription-button {
    text-shadow: none;
}
#options-info .subscription-container {
}
#options-info .subscription-container .subscription-button .subscription-title {
    font-size: 2rem;
    text-transform: uppercase;
}
#options-info .subscription-container .subscription-button .subscription-title {
    font-size: 2rem;
    text-transform: uppercase;
}
#options-info .subscription-container .subscription-button .subscription-info {
    font-size: 1.6rem;
    line-height: 2.2rem;
}
.dms-on-demand-cancel-subscription-container .dms-signup-details-header {
    font-size: 1.6rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.subscription-card {
    background-color: rgba(0,0,0,.3);
    padding: 1rem;
    border-radius: 6px;
    border: solid 1px rgba(0,0,0,1);
    /* display: flex; */
    box-shadow: 0 1px 2px rgb(0 0 0 / 7%), 0 2px 4px rgb(0 0 0 / 7%), 0 4px 8px rgb(0 0 0 / 7%), 0 8px 16px rgb(0 0 0 / 7%), 0 16px 32px rgb(0 0 0 / 7%), 0 32px 64px rgb(0 0 0 / 7%);
    margin-bottom:1rem;
}
.subscription-card .section-image {
    max-height: 80px;
    padding: 5px;
    padding-bottom: 15px;  
    display:none;
}
.subscription-card.user-subscription .section-image {
    max-height: 110px;
    padding: 6px;
    padding-top: 0px;
    padding-right:1.5rem;
}
.subscription-card.user-subscription {
   /* display:flex;
    align-items: flex-start;*/
}
.payout-account-header-label {
    padding-left: 0.2rem;
    padding-bottom: 0.2rem;
    font-size: 2.4rem;
    text-shadow: -1px 1px 2px rgb(0 0 0);
    font-weight: bold;
    opacity: .9;
}
.no-shadow .payout-account-header-label {
    text-shadow: none;
}
.payout-account-info {
    border-radius: 5px;
    padding: 20px 135px 20px 25px;
    background: url(/site/images/stripe-grey.svg) right 25px center no-repeat;
    background-size: 80px auto;
    border: solid 1px rgba(0,0,0,1);
    /* display: flex; */
    box-shadow: 0 1px 2px rgb(0 0 0 / 7%), 0 2px 4px rgb(0 0 0 / 7%), 0 4px 8px rgb(0 0 0 / 7%), 0 8px 16px rgb(0 0 0 / 7%), 0 16px 32px rgb(0 0 0 / 7%), 0 32px 64px rgb(0 0 0 / 7%);
    background-color: black;
    max-width: 40rem;
    font-size: 1.2rem;
    line-height: 1.4;
    margin-top: .5rem;
}

.subscription-card.user-media-subscription {
    transition:.1s;
}
.subscription-card.user-media-subscription.hide {
    opacity:0; 
}

.page-subscription-cancel {
    transition: .1s opacity;
    opacity: 0;
}
.page-subscription-cancel.show {
    opacity: 1;
}
.page-subscription-cancel-header {
}
.page-subscription-cancel-title {
    padding-left: 0rem;
    padding-bottom: .2rem;
    font-size: 1.4rem;
    text-shadow: -1px 1px 2px rgb(0 0 0);
   /* font-weight: bold;*/
    opacity: .9;
    text-transform: uppercase;
}
.no-shadow .page-subscription-cancel-title {
    text-shadow: none;
}
.page-subscription-cancel-body {
}
.page-subscription-cancel-message {
    /*padding-top: .5rem;*/
    font-size: 1.2rem;
    color: white;
    /*padding-bottom: 1rem;*/
    line-height: 1.6;
    /*background-color: rgba(100, 100, 100, .3);*/
    width: fit-content;
    /* padding: .5rem 1rem;*/
    border-radius: 6px;
    margin: .5rem 0;
    margin-bottom: 1rem;
    max-width: 90%;
}
body:not(.mobile-device) .page-subscription-cancel-message {
    max-width: 69rem;
}
.page-subscription-cancel-form {
    max-width: 400px;
}
.page-subscription-cancel-input {
}
.page-subscription-cancel-footer {
   margin-top:0rem;
    display:flex;
    align-items:center;
}


.section-account-info {
    transition: .1s opacity;
}
.section-account-info.hide {
    opacity:0; 
}

.page-account-delete {
    transition: .1s opacity;
    opacity: 0;
}
.page-account-delete.show {
    opacity: 1;
}
.page-account-delete-header {
}
.page-account-delete-title {
    padding-left: 0rem;
    padding-bottom: .2rem;
    font-size: 1.4rem;
    text-shadow: -1px 1px 2px rgb(0 0 0);
    /* font-weight: bold;*/
    opacity: .9;
    text-transform:uppercase;
}
.no-shadow .page-account-delete-title {
    text-shadow: none;
}
.page-account-delete-body {
}
.page-account-delete-message {
    /*padding-top: .5rem;*/
    font-size: 1.2rem;
    color: white;
    /*padding-bottom: 1rem;*/
    line-height: 1.6;
    /*background-color: rgba(100, 100, 100, .3);*/
    width: fit-content;
    /* padding: .5rem 1rem;*/
    border-radius: 6px;
    margin: .5rem 0;
    margin-bottom: 1rem;
    max-width: 90%;
}
.page-account-delete-form {
    max-width: 400px;
}
.page-account-delete-input {
}
.page-account-delete-footer {
   margin-top:0rem;
    display:flex;
    align-items:center;
}


.page-password-update {
    transition: .1s opacity;
    opacity: 0;
}
.page-password-update.show {
    opacity: 1;
}
.page-password-update-header {
}
.page-password-update-title {
    padding-left: 0rem;
    padding-bottom: .2rem;
    font-size: 1.4rem;
    text-shadow: -1px 1px 2px rgb(0 0 0);
    /* font-weight: bold;*/
    opacity: .9;
    text-transform: uppercase;
}
.no-shadow .page-password-update-title {
    text-shadow: none;
}
.page-password-update-body {
}
.page-password-update-message {
    /*padding-top: .5rem;*/
    font-size: 1.2rem;
    color: white;
    /*padding-bottom: 1rem;*/
    line-height: 1.6;
    /*background-color: rgba(100, 100, 100, .3);*/
    width: fit-content;
    /* padding: .5rem 1rem;*/
    border-radius: 6px;
    margin: .5rem 0;
    margin-bottom: 1rem;
    max-width: 90%;
}
.page-password-update-form {
    max-width: 400px;
}
.page-password-update-input {
}
.page-password-update-footer {
   margin-top:0rem;
    display:flex;
    align-items:center;
}


.page-email-update {
    transition: .1s opacity;
    opacity: 0;
}
.page-email-update.show {
    opacity: 1;
}
.page-email-update-header {
}
.page-email-update-title {
    padding-left: 0rem;
    padding-bottom: .2rem;
    font-size: 1.4rem;
    text-shadow: -1px 1px 2px rgb(0 0 0);
    /* font-weight: bold;*/
    opacity: .9;
    text-transform: uppercase;
}
.no-shadow .page-email-update-title {
    text-shadow: none;
}
.page-email-update-body {
}
.page-email-update-message {
    /*padding-top: .5rem;*/
    font-size: 1.2rem;
    color: white;
    /*padding-bottom: 1rem;*/
    line-height: 1.6;
    /*background-color: rgba(100, 100, 100, .3);*/
    width: fit-content;
    /* padding: .5rem 1rem;*/
    border-radius: 6px;
    margin: .5rem 0;
    margin-bottom: 1rem;
    max-width: 90%;
}
.page-email-update-form {
    max-width: 400px;
}
.page-email-update-input {
}
.page-email-update-footer {
   margin-top:0rem;
    display:flex;
    align-items:center;
}

.page-details-update {
    transition: .1s opacity;
    opacity: 0;
}
.page-details-update.show {
    opacity: 1;
}
.page-details-update-header {
}
.page-details-update-title {
    padding-left: 0rem;
    padding-bottom: .2rem;
    font-size: 1.4rem;
    text-shadow: -1px 1px 2px rgb(0 0 0);
    /*  font-weight: bold;*/
    opacity: .9;
    text-transform: uppercase;
}
.no-shadow .page-details-update-title {
    text-shadow: none;
}
.page-details-update-body {
}
.page-details-update-message {
    /*padding-top: .5rem;*/
    font-size: 1.2rem;
    color: white;
    /*padding-bottom: 1rem;*/
    line-height: 1.6;
    /*background-color: rgba(100, 100, 100, .3);*/
    width: fit-content;
    /* padding: .5rem 1rem;*/
    border-radius: 6px;
    margin: .5rem 0;
    margin-bottom: 1rem;
    max-width: 90%;
}
.page-details-update-form {
    max-width: 400px;
}
.page-details-update-form .app-form-field.form-check {
    padding-top: .25rem;
    padding-bottom: .75rem;
}
.page-details-update-input {
}
.page-details-update-footer {
   margin-top:0rem;
    display:flex;
    align-items:center;
}


.section-support-info {
    transition: .1s opacity;
}
.section-support-info.hide {
    opacity:0; 
}

.page-support-contact {
    transition: .1s opacity;
    opacity: 0;
}
.page-support-contact.show {
    opacity: 1;
}
.page-support-contact-header {
}
.page-support-contact-title {
    padding-left: 0rem;
    padding-bottom: .2rem;
    font-size: 1.4rem;
    text-shadow: -1px 1px 2px rgb(0 0 0);
    /*font-weight: bold;*/
    opacity: .9;
    text-transform:uppercase;
}
.no-shadow .page-support-contact-title {
    text-shadow: none;
}
.page-support-contact-body {
}
.page-support-contact-message {
    /*padding-top: .5rem;*/
    font-size: 1.2rem;
    color: white;
    /*padding-bottom: 1rem;*/
    line-height: 1.6;
    /*background-color: rgba(100, 100, 100, .3);*/
    width: fit-content;
    /* padding: .5rem 1rem;*/
    border-radius: 6px;
    margin: .5rem 0;
    margin-bottom: 1rem;
    max-width: 90%;
}
.page-support-contact-form {
    max-width: 400px;
}
.page-support-contact-input {
}
.page-support-contact-footer {
   margin-top:0rem;
    display:flex;
    align-items:center;
}



.payout-account-container {
    display: flex;
    padding-top: 1rem;
    flex-wrap: wrap;
}
.payout-account-container.padding-left {
    padding-left:1rem;    
}
.payout-account-user {
    /* width: 100%; */
    min-width: 600px;
    /*max-width: 1200px;*/
    padding: 20px 0;
    border: solid 1px rgba(0,0,0,1);
    /* display: flex; */
    box-shadow: 0 1px 2px rgb(0 0 0 / 7%), 0 2px 4px rgb(0 0 0 / 7%), 0 4px 8px rgb(0 0 0 / 7%), 0 8px 16px rgb(0 0 0 / 7%), 0 16px 32px rgb(0 0 0 / 7%), 0 32px 64px rgb(0 0 0 / 7%);
    background-color: black;
    padding: 1rem;
    border-radius: 6px;
    margin-top: 0.5rem;
    margin-top: 0.5rem;
    padding: 1rem 1.5rem;
}
.payout-account-user .block.profile {
    flex: 1;
    padding-left: 65px;
}
.payout-account-user .block section {    
    display: flex;
    align-items: center;
    position: relative;
    top: -6px;
}
.payout-account-user .block {
    position: relative;
}
.payout-account-user .block.profile .photo {
    position: absolute;
    font-size: 3rem;
    width: 50px;
    height: 50px;
    top: 36%;
    left: 0;
    margin-top: -25px;
    border-radius: 50%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: 0 2px 5px -1px rgb(50 50 93 / 25%), 0 1px 3px -1px rgb(0 0 0 / 30%);
}
.payout-account-image-svg {
    /* position: absolute; */
    width: 110px;
    height: 45px;
    /* top: 36%; */
    /* left: 0; */
    /* margin-top: -25px; */
    /* border-radius: 50%; */
    background-image: url(/site/images/stripe.svg);
    /* box-shadow: 0 2px 5px -1px rgb(50 50 93 / 25%), 0 1px 3px -1px rgb(0 0 0 / 30%); */
    background: url(/site/images/stripe-grey.svg) center no-repeat;
    background-size: contain;
}
.payout-account-user .block p {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 7px;
    text-transform: uppercase;
}
.payout-account-user .block.stripe p {
    text-align: center;
}
.payout-account-user .block.stripe p a {
        padding-top:1rem;
}
.payout-account-user .block h1 {
    font-size: 24px;
    font-weight: 400;
    margin: 0.57em 0;
}
.payout-account-user .block.updated h1 {
    margin-bottom: 4px;
}
.payout-account-user .block section i {
    margin-left:.5rem;
}
.payout-account-user .block section.error {
    color:red;
}
.payout-account-user .block section.ok {
    color:green;
}
.payout-account-user .block section.warn {
    color: goldenrod;
}
.payout-account-user .block h2 {
    color: #8898aa;
    font-size: 13px;
    font-weight: 500;
    margin-top: 8px;
}
.payout-account-user .block + .block {
    margin-left: 40px;
}
.payout-account-user .payout-now-link {
    margin-top: 1rem;
}
.sections-page .payout-account-user .section-options {
    padding-top: 0rem;
}
.payout-account-image-logo {
    max-height: 50px;
}
.payout-account-image-plus {
    padding: 0px 1rem;
    font-size: 4rem;
    opacity: .8;
    color: whitesmoke;
}
.payout-account-image {
    display: flex;
    align-items: center;
}

.app-view .table-container {
    /*margin-left: -2rem;
    margin-right: -2rem;*/
    margin-left: -1.5rem;
    margin-right: -1.5rem;
}

.list-view-body .table-container {
    margin-left: -.5rem;
    margin-right: -.5rem;
    width: 100%;
}
.app-form {
    margin: 1rem;
    margin-top: 1.5rem;
    padding: 1rem;
    padding-top: 0rem;
    border-radius: 5px;
    position: relative;
    margin-right: 0;
    border-top-right-radius: 0;
    /* border-right: 0; */
    margin-bottom: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
   /* margin-left: 1.5rem;*/
   overflow:hidden;
}
.app-form.app-view {    
    margin-top: 0rem;
}
.app-form-header {
    display: none;
}
.app-form-header .app-form-image-container {
    min-width: 40px;
    min-height: 40px;
    width: 40px;
    /* position: absolute;
        top: -48px;
        left: 5px;
        background-color: purple;
    border: solid 1px purple;
        position: absolute;*/
    /*box-shadow: 0 4px 20px 0px rgb(0 0 0 / 14%), 0 7px 10px -5px rgb(156 39 176 / 40%);
    box-shadow: 0 4px 20px 0px rgb(0 0 0 / 14%), 0 7px 10px -5px rgb(100 100 100 / 40%);
    background: linear-gradient( 60deg, #7b1fa2, #913f9e);
    border: solid 1px #913f9e;
    background: linear-gradient(#EEEEEE, #CFCFCF);
    border-color: silver;*/
    border-radius: 5px;
    align-items: center;
    justify-content: center;
    display: flex;
    font-size: 1.8rem;
    color: rgba(0,0,0,.7);
    color: gray;
    position: relative;
    top: 0px;
    padding-left: 2rem;
    padding-right: .5rem;
    margin-right: 10px;
    /*margin-left: 20px;*/
    display: flex;
}
.app-form-header .app-form-image-container.has-image {
    min-width: 120px;
    min-height: 120px;
    width: unset;
}

.app-page-row-data .properties-groups {
    margin-right:.5rem;
}

.checkout-screen .dms-on-demand-presentation-section-card-pricing-type {
    color:unset;
}
.checkout-screen .dms-on-demand-presentation-section-card-amount-type {
    font-size: 2rem;
    margin-right: 1rem;
}
.checkout-screen .dms-on-demand-selection-section-subscription-item {
   transition:.3s;
}
.checkout-screen .dms-on-demand-selection-section-subscription-item.selected {
    color: rgb(255, 171, 21);
    opacity: 1 !important;
}
.checkout-screen .dms-on-demand-selection-section-useCardOnFile-container.checkoutAsGuest {
    padding-top: 0;
    margin-bottom: .5rem;
}
/*.dms-on-demand.checkout-screen .app-form-field {
    padding-bottom: 0.3rem;
}*/
.dms-on-demand.checkout-screen .dms-on-demand-selection-section1 .image-container {
    position: relative;
    max-width: 100%;
    max-height: 200px;
    margin-top: 1rem;
    border-radius: 6px;
}
.dms-on-demand.checkout-screen .dms-on-demand-selection-section1 img {
    object-fit: contain;
    width:100%;
    height:100%;
    max-width:unset;
}
.dms-on-demand.checkout-screen .dms-on-demand-selection-section1 .backgroundImage-container {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    overflow: hidden;
    border-radius: 6px;
}
.dms-on-demand.checkout-screen .dms-on-demand-selection-section1 .backgroundImage {
    position: absolute;
    left: -100px;
    top: -100px;
    right: -100px;
    bottom: -100px;
    filter: blur(30px);
    opacity: .7;
    object-fit: cover;
    border-radius: 6px;
}
.dms-on-demand.checkout-screen .dms-on-demand-selection-checkout-complete .dms-on-demand-selection-container1 img {
    object-fit: contain;
    width: 100%;
    height: 100%;
    max-width: unset;
}

#chat {
    z-index: 1050;
}
.project-layout-editor-menu {
    z-index: 1050;
}
body.dark-mode .app-form-field-input-proxy {
     min-height: 40px;
}
body.playback .project-layout-editor-menu {
    display:none !important;
}

.recent-date > .recent-grouping > .loader-io {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 5rem;
    z-index: 5;
    display: flex;
    align-items: center;
}

#player .app-button {
    position:relative;
    top:0px;
}
#player .app-button:active {
    position: relative;
    top: 3px;
}

#player .app-button,
body.dark-mode .tab-page .app-button,
.dms-on-demand .project-layout-page-title-actions .app-button,
.library-item-details .app-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;
}


.library-item-details .app-button {
    padding: 0.5rem 1rem !important;
    font-size: 1rem !important;
}


/*
#player .app-button:hover,
body.dark-mode .tab-page .app-button:not(.hide-label):hover,
.dms-on-demand .project-layout-page-title-actions .app-button:hover,
.library-item-details > .controls > button.app-button:hover {
    background-color: rgba(30, 144, 255, .5);
    background-color: rgba(13, 110, 253, .5);
    color: white;
}

#player .app-button:focus,
body.dark-mode .tab-page .app-button:not(.hide-label):focus,
.dms-on-demand .project-layout-page-title-actions .app-button:focus,
.library-item-details > .controls > button.app-button:focus {
    background-color: rgba(30, 144, 255, .7);
    background-color: rgba(13, 110, 253, .7);
    color: white;
}

#player .app-button:active,
body.dark-mode .tab-page .app-button:not(.hide-label):active,
.dms-on-demand .project-layout-page-title-actions .app-button:active,
.library-item-details > .controls > button.app-button:active {
    background-color: rgba(30, 144, 255, .7);
    background-color: rgba(13, 110, 253, .7);
    color: white;
    opacity: .8;
}*/

.tab-page .app-button.hide-label {
    padding: 0;
    background-color: transparent;
    border: none;
    font-size: 2rem;
    margin: .5rem;
}

.tab-page .app-button.edit-button {
    margin-left: 1rem;
}

.tab-page .app-button.cache-button {
    margin-left: 1rem;
}

.tab-page .app-button.hide-label label {
    display: none;
}

body.no-transition .tab-page .app-button {
    transition: none;
    transform: none;
}

.tab-page .app-button.edit-button {
    display: none;
}

body.edit-layout .tab-page .app-button.edit-button {
    display: flex;
}

.caching-items .header-info button {
    padding: 0.5rem 1rem !important;
    font-size: 1.2rem !important;
}
.cached-items .header-info button {
    padding: 0.5rem 1rem !important;
    font-size: 1.2rem !important;
}
/*body.edit-layout .library-groups-selected-item.show {
    transform: translateX(0%);
}*/
body.edit-layout > .library-groups-selected-item.show {
    transform: translateX(50%);
}
body.show-layout-menu > .library-groups-selected-item.show {
    transform: translateX(60%);
}
.library-group > .image-header {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    z-index: 5;
    display: flex;
    padding: .2rem .5rem;
}
.library-group > .ranking {
    display:none;
}
.library-group > .image-header > button i {
    padding:.5rem;
    font-size: 1.4rem;    
}
.library-group > .image-header > button i.upload-image {
    color:dodgerblue;  
}

/*.navbar-usage-container.selected {
    background: #FF0062 !important;*/
   /* border-top-left-radius: 6px;
    border-top-right-radius: 6px;*/
/*}*/
.subscriptions-screen .dms-on-demand-selection-section-title-info {
    padding: 0.5rem;
}


/* BEGIN FOOTER */

.app-project-footer-ex.footer {
    /* background-color: #0b1011;
    background-attachment: fixed;
    color: #66615b;
    font-size: 14px;
    font-weight: 300;
    font-family: 'Montserrat', "Helvetica", Arial, sans-serif;
    margin:0;    
    text-align: left;
    background-color: #fff;*/
    font-size: 14px;
    font-weight: 300;
    position: relative;
    line-height: 30px;
    width: 100%;
    order: 99999;
    /*display:none;*/ 
    padding-bottom: 2rem;
}

.app-project-footer-ex.footer > .container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    padding-top: 5rem;
    padding-bottom: 0px;
}

@media (min-width: 576px) {
    .app-project-footer-ex.footer > .container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .app-project-footer-ex.footer > .container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .app-project-footer-ex.footer > .container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .app-project-footer-ex.footer > .container {
        max-width: 1140px;
    }
}

.app-project-footer-ex.footer .row {
    display: -ms-flexbox !important;
    display: flex !important;
    margin-right: -15px !important;
    margin-left: -15px !important;
}

.app-project-footer-ex.footer .row .col-9,
.app-project-footer-ex.footer .row .col-6 {
    width:unset;
}

.app-project-footer-ex.footer .ml-auto {
    margin-left: auto!important;
    margin-right: auto!important;
    flex: 0 0 75%;
    max-width: 75%;
}
.app-project-footer-ex.footer .links ul {
    white-space: normal;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    max-height: 100px;
    overflow: hidden;
}
.app-project-footer-ex.footer .links ul a:not(.btn) {
    font-size: 1em;
    margin-left: 3px;
    margin-right: 3px;
    margin-bottom: 3px;
    font-weight: 500;
   /* text-transform: uppercase;*/
    margin-top: 10px;
    color: #A49E9E;
    white-space:nowrap;
    text-decoration: none;
}
.app-project-footer-ex.footer .links ul a:not(.btn):hover, 
.app-project-footer-ex.footer .links ul a:not(.btn):focus {    
   /* color: forestgreen;*/
}
.app-project-footer-ex.footer .contact-links .contact-link {
    text-align: right;
}
.app-project-footer-ex.footer .contact-links a:not(.btn) {
    color: #A49E9E;
    text-align: right;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: unset !important;
    font-weight: 500;
    padding-bottom: .5rem;
}
.app-project-footer-ex.footer hr {
    border: none;
    border-top: solid 1px rgba(255,255,255,.7);
    margin: .5rem 0;
}
.app-project-footer-ex.footer .col-md-3 {
    flex: 1;
}
.app-project-footer-ex.footer .social-area {
    display: flex;
    text-align: right;
    margin-bottom: 5px;
    justify-content: end;
}

.app-project-footer-ex.footer .col-md-3 .links ul {
    text-align: right;
}


.app-project-footer-ex.footer .btn-just-icon {
    border-radius: 50px;
    height: 40px;
    width: 40px;
    min-width: 40px;
    padding: 8px;
    margin-left: 5px;
}

.app-project-footer-ex.footer .btn-just-icon i {
    font-size: 16px;
    padding: 2px 0px;
}

.app-project-footer-ex.footer .btn-twitter {
    color: #55acee !important;
}

.app-project-footer-ex.footer .btn-facebook {
    color: #3b5998 !important;
}

.app-project-footer-ex.footer .btn-instagram {
    color: orange !important;
    opacity: .8;
}

.app-project-footer-ex.footer .btn-youtube {
    color: #e52d27 !important;
    opacity: .8;
}


.twitter, .sharemedia-messagebox button.twitter {
    /* background-color: #4c9eec;*/
    background-color: #55acee;
}

.facebook, .sharemedia-messagebox button.facebook {
    background-color: #3b5998;
}

.instagram, .sharemedia-messagebox button.instagram {
    background-color: orange;
}

.youtube, .sharemedia-messagebox button.youtube {
    background-color: #e52d27;
}

.pinterest, .sharemedia-messagebox button.pinterest {
    background-color: #e60023;
}

.linkedin, .sharemedia-messagebox button.linkedin {
    background-color: #3375b0;
}


/*.app-project-footer-ex.footer .copyright-area {
    padding: 10px 0px;
    margin: 15px 3px;
}
*/
.app-project-footer-ex.footer .pull-left {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9em;
    color: #A49E9E;
    font-weight: 500;
}

.app-project-footer-ex.footer .copyright {
    margin-left: 5px;
    margin-right: 5px;
}

.app-project-footer-ex.footer img.logo {
    /*max-width: 18px;*/
    max-height: 11px;
    margin-right: 3px;
    margin-left: 5px;
}

.app-project-footer-ex.footer span.logo {
    margin-right:5px;
}

.app-project-footer-ex.footer .version {
    margin-left: 5px;
    margin-right: 5px;
    display:none;
}

.app-project-footer-ex.footer .pull-right.links {
    display: none;
}

.app-project-footer-ex.footer .pull-right ul {
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-project-footer-ex.footer .pull-right ul > div {
    margin-left: 5px;
    margin-right: 5px;
}

/* END FOOTER */

/* BEGIN HEADER */

.app-project-header-ex.header {
    min-height: 65px;
    width: 100%;
    border: 0;
    font-size: 14px;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    padding: 0;
    box-shadow: 0 6px 10px -4px rgb(0 0 0 / 15%);
    background: rgba(11, 16, 17,.9);
    color: white;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 10;
    /*z-index: 1030;*/
}
.app-project-header-ex.header.transparent {
    background: transparent !important;
    padding-top: 25px;
    box-shadow: none;
}

.app-project-header-ex.header > .container {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px) {
    .app-project-header-ex.header > .container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .app-project-header-ex.header > .container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .app-project-header-ex.header > .container {
        max-width: 960px;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }
}

@media (min-width: 1200px) {
    .app-project-header-ex.header > .container {
        max-width: 1140px;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }
}

.app-project-header-ex.header.transparent .navbar-brand {
    color: #FFFFFF;
}

.app-project-header-ex.header .navbar-brand {
    font-weight: 600;
    margin: 5px 0px;
    padding: 20px 15px;
    font-size: 14px;
    color: #66615B;
    text-transform: uppercase;
    /*color: forestgreen !important;*/
    opacity: .8;
    transition: .2s;
    display: flex;
    align-items: center;
    white-space: nowrap;
    cursor: pointer;
    position: relative;
    top: 10px;
}

.app-project-header-ex.header .navbar-brand:focus,
.app-project-header-ex.header .navbar-brand:hover {
    opacity:1;    
}
.app-project-header-ex.header .navbar-brand:active {
    opacity:.9;    
}

.app-project-header-ex.header .navbar-brand img {
    margin-right:5px;
    max-width:22px;
    max-height:22px;
}

.app-project-header-ex.header .navbar-collapse {
    border-left: none !important;
    -ms-flex-pack: end !important;
    justify-content: flex-end !important;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-align: center;
    align-items: center;
}

.app-project-header-ex.header .navbar-collapse:not(.show) {
    display: none;
}

@media (min-width: 992px) {
    .app-project-header-ex.header .navbar-collapse {
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
    }
}

.app-project-header-ex.header .navbar-collapse > ul {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

@media (min-width: 992px) {
    .app-project-header-ex.header .navbar-collapse > ul {
        -ms-flex-direction: row;
        flex-direction: row;
    }
}

.app-project-header-ex.header.transparent a:not(.btn),
.app-project-header-ex.header [class*="bg"] a:not(.btn) {
    color: #FFFFFF;
    border-color: #FFFFFF;
}

.app-project-header-ex.header.transparent a {
    color: #FFFFFF;
}

.app-project-header-ex.header a {
    color: white;
    opacity: .8;
    transition: .2s;
    line-height: 1.6;
    margin: 15px 3px;
    padding: 10px 15px;
    opacity: .8;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 600;
    display: block;
    padding: 0.5rem 1rem;
}

.app-project-header-ex.header a:focus,
.app-project-header-ex.header a:hover {
    opacity: 1;
}

.app-project-header-ex.header a:active {
    opacity: .9;
}

.app-project-header-ex.header a p {
    display: inline;
}

.app-project-header-ex.header a p {
    margin: 0px 0px;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 12px;
    line-height: 1.5em;
    padding: 15px 0;
}

@media (min-width: 992px) {
    .app-project-header-ex.header a .d-lg-none {
        display: none !important;
    }
}

/* END HEADER */

/* BEGIN BANNER */

.section-banner {
    background-color: black;
}

.section-banner .body-header {
    background-position: center center;
    background-size: cover;
    min-height: 100vh;
    max-height: 999px;
    overflow: hidden;
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom:2rem;
    padding-bottom:0rem;
}
.section-banner.cart .body-header {
    display: none;
}
.section-banner.checkout.body-header {
    display: none;
}
.section-banner.summary .body-header {
    display: none;
}
.section-banner .body-header .filter {
    background-color: rgba(0, 0, 0);
    opacity:.6;
    content: "";
    display: block;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    width: 100%;
    z-index: 1;
}
.section-banner .body-header .page-video {
    position: absolute;
    width: 100%;
    height:100%;
}
.section-banner .body-header .page-video video {
    object-fit: cover;
    width: 100%;
    height: 100%;
    background-color: black;
}

.section-banner .body-header .motto {
    text-align: left;
    z-index: 3;
    color: #fff;
    position: relative;
    text-align: center !important;
}

.section-banner .body-header > .container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px) {
    .section-banner .body-header > .container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .section-banner .body-header > .container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .section-banner .body-header > .container {
        max-width: 960px;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }
}

@media (min-width: 1200px) {
    .section-banner .body-header > .container {
        max-width: 1140px;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }
}

.section-banner .body-header h1 {
    font-weight: bold;
    font-size: 3.6em;
    margin: 30px 0 0;
    text-shadow: -1px 1px 2px rgb(0 0 0);
}
.no-shadow .section-banner .body-header h1 {
    text-shadow: none;
}

.section-banner .body-header h2 {
    font-weight: bold;
    font-size: 2.8em;
    margin: 10px 0 0;
    text-shadow: -1px 1px 2px rgb(0 0 0);
}
.no-shadow .section-banner .body-header h2 {
    text-shadow: none;
}




.section-banner .body-header button {
    border-radius: 0.3rem;
    line-height: 1.75;
    text-transform: uppercase;
    opacity: .8;
    transition: .2s;
    margin-top: 30px;
    white-space: nowrap;
    background-color: forestgreen;
    border: solid 2px forestgreen;
    background: rgba(100,100,100, .3);
    border-color: rgba(100,100,100, .5);
    color: #FFFFFF;
    font-size: 14px;
    padding: 11px 30px;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.4rem;
    opacity: 1;
    margin-top: 20px;
    border-radius: 50px;
    box-shadow: 7px 7px 7px 0px rgba(0,0,0,.1);
    margin-left: .3rem;
    margin-right: .3rem;
}

.section-banner .body-header button:focus {
    opacity: 1;
/*    background-color:white;*/
    color:black;
}

.section-banner .body-header button:hover {
    opacity: 1;
/*    background-color:white;*/
    color:black;
}

.section-banner .body-header button:active {
    transition: 0;
    opacity: .9 !important;
   /* background-color: forestgreen;*/
    box-shadow: none !important;
}

.section-banner .body-header button i {
    margin-right:5px;    
}

/* END BANNER */

/* BEGIN CAROUSEL */

.section-carousel {
    padding-top: 1rem;
    background-color: black;
    margin-bottom: 2.5rem;
    position:relative;
  /*  height: 100%;*/
}

/* END CAROUSEL */

/* BEGIN COLLECT EMAIL */

.section-collect-email input:not(.form-check-input),
.section-collect-email .app-form-field-input-proxy {
    border-color: lightgray !important;
    transition: .2s !important;
}

.section-collect-email input:focus {
    border-color: dodgerblue !important;
}

.section-collect-email .app-form-field-input-proxy.focus {
    border-color: dodgerblue !important;
}


.section-collect-email {
    /*min-height: calc(100vh - 30px);
    box-shadow: 0 0 10px 10px inherit;*/
    /* box-shadow: 0 0 40px 40px #181818; */
    /* margin-bottom: 2.5rem; */
    /* display: flex; */
    /*position: relative;
    overflow: hidden;
    margin-top: 2.5rem;
    background-color: white;*/
    color: #0b1011;
    padding: 70px 0;
    position: relative;
    background-color: #FFFFFF;
    width: 100%;
    min-height: 5rem;
    max-height: 93vh;
    overflow: hidden;
    /* margin-top: 0rem;*/
    /*margin-bottom: 2rem;*/
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.section-collect-email .ml-auto,
.section-collect-email .mx-auto {
    margin-left: auto !important;
}

.section-collect-email .mr-auto,
.section-collect-email .mx-auto {
    margin-right: auto !important;
}

@media (min-width: 768px) {
    .section-collect-email .col-md-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }
}

.section-collect-email .row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.section-collect-email h2 {
    font-weight: bold;
    text-align: center !important;
    font-size: 2.8em;
    margin: 30px 0 0;
    line-height: 1.2;
}

.section-collect-email h5 {
    color: #0b1011;
    font-weight: 500;
    padding-top: 20px;
    text-align: center;
    font-size: 1.35em;
    line-height: 1.4em;
}

@media (min-width: 768px) {
    .section-collect-email .col-md-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.section-collect-email .ml-auto,
.section-collect-email .mx-auto {
    margin-left: auto !important;
    text-align: center;
}

.section-collect-email .mr-auto,
.section-collect-email .mx-auto {
    margin-right: auto !important;
}

@media (min-width: 768px) {
    .section-collect-email .col-md-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}

.section-collect-email .contact-form label {
    font-weight: 700;
    color: #0b1011;
    margin-top: 10px;
    display: inline-block;
    margin-bottom: 0.2rem;
}

.section-collect-email .contact-form .info {
    text-align: left;
}

.section-collect-email .contact-form input {
    color: black;
}

    .section-collect-email .row {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-right: -15px;
        margin-left: -15px;
    }
    .section-collect-email .container {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: justify;
        justify-content: space-between;
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
    }

@media (min-width: 576px) {
    .section-collect-email .container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .section-collect-email .container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .section-collect-email .container {
        max-width: 960px;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }
}

@media (min-width: 1200px) {
    .section-collect-email .container {
        max-width: 1140px;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }
}

@media (min-width: 1600px) {
    .section-collect-email .container {
        max-width: 1440px;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }
}

.section-collect-email button {
    border-radius: 0.3rem;
    line-height: 1.75;
    text-transform: uppercase;
    opacity: .8;
    transition: .2s;
    margin-top: 30px;
    white-space: nowrap;
    background-color: forestgreen;
    border: solid 2px forestgreen;
    background: rgba(100,100,100, .3);
    border-color: rgba(100,100,100, .5);
    color: #FFFFFF;
    border-width: 1px;
    color: #FFFFFF;
    background: #e9ecef;
    border-color: gray;
    color: dimgray;
    font-size: 14px;
    padding: 11px 30px;
    cursor: pointer;
    font-weight: bold;
    font-size: 1rem;
    opacity: 1;
    margin-top: 20px;
    border-radius: 50px;
    box-shadow: 7px 7px 7px 0px rgba(0,0,0,.1);
    margin-left: .3rem;
    margin-right: .3rem;
}

    .section-collect-email button:focus {
        opacity: 1;
       /* background-color: white;*/
        color: black;
    }

    .section-collect-email button:hover {
        opacity: 1;
        /*background-color: white;*/
        color: black;
    }

    .section-collect-email button:active {
        transition: 0;
        opacity: .9 !important;
        /*background-color: forestgreen;*/
        box-shadow: none !important;
    }

    .section-collect-email button i {
        margin-right: 5px;
    }

.section-collect-email .contact-form label {
    margin-bottom: 0rem;
    font-size: 1rem !important;
    color: black !important;
}

.section-collect-email .input-group-prepend {
    min-width: 30px;
    display: flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: gray;
    text-align: center;
    white-space: nowrap;
    background-color: #e9ecef;
    transition: .2s;
    border: solid 1px lightgray;
    border-radius: 3px;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    border-right: none;
}
.section-collect-email .input-group-prepend i {    
    font-size: 1.4rem;
}

.section-collect-email .input-group.focused .input-group-prepend {
    border-color: dodgerblue;
    background-color: dodgerblue;
    color: white;
}

.section-collect-email .input-group .app-form-field-input {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    color: black !important;
}

/* END COLLECT EMAIL */

/* BEGIN VIDEO */

.section-video {
    min-height: calc(100vh - 30px);
    box-shadow: 0 0 10px 10px inherit;
    /* box-shadow: 0 0 40px 40px #181818; */
    /* margin-bottom: 2.5rem; */
    /* display: flex; */
    position: relative;
    overflow: hidden;
}
.section-video .background {
    /*filter: blur(10px);*/
  /*  transform: scale(1.2);*/
    transform: matrix(1.2, 0, 0, 1.2, 0, 0);
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
   /* opacity: .4;*/
    pointer-events:none;
    background-size: cover;
}
.section-video .container {
    margin-top:8rem;
    padding-top: 1rem;
    padding-bottom: 5rem;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    text-align: center;
    margin-bottom: 5rem;
}
.section-video .container .logo {
    display: flex;
    align-items: center;
    justify-content: center;    
}

@media (min-width: 576px) {
    .section-video .container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .section-video .container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .section-video .container {
        max-width: 960px;
    }
}
@media (min-width: 1200px) {
    .section-video .container {
        max-width: 1140px;
    }
}


.section-video .row {
}
.section-video .column {
}

.section-video .logo img {
    top: 9px;
    height: 4rem;
    left: -15px;
    position: relative;
    left: -25px;
    top: 18px;
}
.section-video .logo span {
    color: white;
    font-size: 3.6em;
    margin: 30px 0 0;
    font-weight: 100;
    left: -15px;
    position: relative;
}

.section-video .title {
    font-weight: bold;
    margin-top: 0px;
    margin-bottom: 25px;
    min-height: 32px;
    font-size: 3.6rem;
}

.section-video .row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}
.section-video .column {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
}

.section-video .card-video {
    position:relative;
}

.section-video video {
   /* object-fit: cover;*/
    width: 100%;
    max-height:40vh;
}
.section-video .video-button {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    background-color: rgba(0,0,0,.7);
    cursor: pointer;
    /*display: none;*/
    transition: .3s;
}
.section-video .video-button.hide {
    opacity:0;
    pointer-events: none;
}
/*.section-video .card-video:hover .video-button {
    opacity: .7;
    pointer-events: unset !important;
}
*/
.section-video .card-body {
    text-align: center;
}

.section-video .card-message {
    opacity: .8;
    font-weight: bold;
    min-height: 32px;
    font-size: 2.8em;
    margin: 30px 0 0;
    margin-top: 15px;
    margin-bottom: 25px;
}

.section-video .card-message-ex {
    opacity: .8;
    margin-bottom: 5px;
    margin-top: 15px;
    font-size: 1.825em;
    line-height: 1.4;
    margin: 20px 0 0px;
    font-weight:400;
}


.section-video .video-button button {
    font-size: 10rem;
    opacity: .7;
    transition:.2s;
}

.section-video .video-button button:focus {
    opacity: 1;
}

.section-video .video-button button:hover {
    opacity: 1;
}

.section-video .video-button button:active {
    transition: 0;
    opacity: .9 !important;
}


/* END VIDEO */

/* BEGIN PRODUCTS */

.section-products {
    min-height: calc(100vh - 30px);
    box-shadow: 0 0 10px 10px inherit;
    /* box-shadow: 0 0 40px 40px #181818; */
    /* margin-bottom: 2.5rem; */
    /* display: flex; */
    position: relative;
    overflow: hidden;
    /*margin-top: 2.5rem;*/
    margin-top: 1rem;
}
.section-products .products {
    background-color: black !important;
    color: white !important;
    max-height: unset !important;
    display: flex;
   /* position: absolute;*/
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    min-height: 100Vh;
}

    .section-products .products .background {
        /* filter: blur(10px);*/
      /*  transform: scale(1.2);*/
        transform: matrix(1.2, 0, 0, 1.2, 0, 0);
        background-repeat: no-repeat;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        /*opacity: .4;*/
        pointer-events: none;
    }

    .section-products .products .container {
        padding-top: 3rem;
        padding-bottom: 5rem;
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
        display: flex;
        flex-direction: column;
        z-index: 1;
    }

@media (min-width: 576px) {
    .section-products .products .container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .section-products .products .container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .section-products .products .container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .section-products .products .container {
        max-width: 1140px;
    }
}


.section-products .products .title {
    margin-top: 30px;
    /*margin-bottom: 20px;*/
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-products .products .title .app-button-icon {
    margin-left: 2rem;
}

.section-products .products .title h1 {
    font-size: 3.4rem;
    margin: 0.67em 0;
    font-weight: bold;
}

.section-products .products .row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
    justify-content: center;
}

.section-products .products .card-event {
    width: 70%;
    background-color: rgba(255,255,255,.1);
    box-shadow: none;
    border-radius: 12px;
    color: #333333;
    margin-bottom: 100px;
    position: relative;
    z-index: 1;
    border: 0 none;
    -webkit-transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 200ms ease;
    -moz-transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 200ms ease;
    -o-transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 200ms ease;
    -ms-transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 200ms ease;
    transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 200ms ease;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-clip: border-box;
    padding: 0;
}

    .section-products .products .card-event:hover {
        box-shadow: 0px 12px 19px -7px rgb(0 0 0 / 30%);
        transform: translateY(-10px);
        -webkit-transform: translateY(-10px);
        -ms-transform: translateY(-10px);
        -moz-transform: translateY(-10px);
    }

    .section-products .products .card-event img {
        max-width: 100%;
        height: auto;
        border-radius: 12px 12px 0 0;
        opacity: .9;
        max-height: 500px;
        max-height: 48vh;
        object-fit: contain;
        position: relative;
    }

.section-products .products .card-body {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1.25rem;
    padding: 20px;
    color: white;
    font-size: 2rem;
}


    .section-products .products .card-body button {
        border-radius: 0.3rem;
        line-height: 1.75;
        text-transform: uppercase;
        opacity: .8;
        transition: .2s;
        margin-top: 30px;
        white-space: nowrap;
        background-color: forestgreen;
        border: solid 2px forestgreen;
        background: rgba(100,100,100, .3);
        border-color: rgba(100,100,100, .5);
        color: #FFFFFF;
        font-size: 14px;
        padding: 11px 30px;
        cursor: pointer;
        font-weight: bold;
        font-size: 1rem;
        opacity: 1;
        margin-top: 20px;
        border-radius: 50px;
        box-shadow: 7px 7px 7px 0px rgba(0,0,0,.1);
        margin-left: .3rem;
        margin-right: .3rem;
    }

.section-products .products .card-body button:focus {
    opacity: 1;
   /* background-color: white;*/
    color: black;
}

.section-products .products .card-body button:hover {
    opacity: 1;
   /* background-color: white;*/
    color: black;
}

.section-products .products .card-body button:active {
    transition: 0;
    opacity: .9 !important;
   /* background-color: forestgreen;*/
    box-shadow: none !important;
}

.section-products .products .card-body button i {
    margin-right: 5px;
}

.section-products .products .card-body .card-title {
    margin: 5px 0 0 0;
    font-weight: bold;
    padding-bottom: 0px;
    padding-top: 0px;
    margin-top: 0;
}

.section-products .products .card-body .card-text {
}

.section-products .products .card-body .card-text1 {
    font-weight: 500;
    font-size: 1.8rem;
    padding-bottom: 5px;
}

.section-products .products .card-body .card-text2 {
    font-weight: 500;
    padding-bottom: 5px;
    font-size: 1.4rem;
    color: #FFAB15 !important;
}

.section-products .products .card-body .card-text3 {
    font-weight: 500;
    padding-bottom: 5px;
    font-size: 1.4rem;
    color: #FFAB15 !important;
}

.section-products .products .card-body .card-text4 {
    font-weight: 500;
    padding-bottom: 5px;
    font-size: 1.4rem;
    color: #FFAB15 !important;
}

.section-products .products .card-body .buttons {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}


/* END PRODUCTS */



/* START STORE SECTION */


/* BEGIN BANNER */

.section-store .body-header {
    background-position: center center;
    background-size: cover;
    min-height: 100vh;
    max-height: 999px;
    overflow: hidden;
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom:2rem;
}
.section-store.cart .body-header {
    display: none;
}
.section-store.checkout.body-header {
    display: none;
}
.section-store.summary .body-header {
    display: none;
}
.section-store .body-header .filter::after {
    background-color: rgba(0, 0, 0, 0.6);
    content: "";
    display: block;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    width: 100%;
    z-index: 1;
}
.section-store .body-header .page-video {
    position: absolute;
    width: 100%;
}
.section-store .body-header .page-video video {
    object-fit: contain;
    width: 100%;
    background-color: black;
}

.section-store .body-header .motto {
    text-align: left;
    z-index: 3;
    color: #fff;
    position: relative;
    text-align: center !important;
}

.section-store .body-header > .container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px) {
    .section-store .body-header > .container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .section-store .body-header > .container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .section-store .body-header > .container {
        max-width: 960px;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }
}

@media (min-width: 1200px) {
    .section-store .body-header > .container {
        max-width: 1140px;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }
}

.section-store .body-header h1 {
    font-weight: bold;
    font-size: 3.6em;
    margin: 30px 0 0;
    text-shadow: -1px 1px 2px rgb(0 0 0);
}
.no-shadow .section-store .body-header h1 {
    text-shadow: none;
}

.section-store .body-header h2 {
    font-weight: bold;
    font-size: 2.8em;
    margin: 30px 0 0;
    text-shadow: -1px 1px 2px rgb(0 0 0);
}
.no-shadow .section-store .body-header h2 {
    text-shadow: none;
}




.section-store .body-header button {
    border-radius: 0.3rem;
    line-height: 1.75;
    text-transform: uppercase;
    opacity: .8;
    transition: .2s;
    margin-top: 30px;
    white-space: nowrap;
    background-color: forestgreen;
    border: solid 2px forestgreen;
    background: rgba(100,100,100, .3);
    border-color: rgba(100,100,100, .5);
    color: #FFFFFF;
    font-size: 14px;
    padding: 11px 30px;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.4rem;
    opacity: 1;
    margin-top: 20px;
    border-radius: 50px;
    box-shadow: 7px 7px 7px 0px rgba(0,0,0,.1);
    margin-left: .3rem;
    margin-right: .3rem;
}

.section-store .body-header button:focus {
    opacity: 1;
   /* background-color:white;*/
    color:black;
}

.section-store .body-header button:hover {
    opacity: 1;
/*    background-color:white;*/
    color:black;
}

.section-store .body-header button:active {
    transition: 0;
    opacity: .9 !important;
   /* background-color: forestgreen;*/
    box-shadow: none !important;
}

.section-store .body-header button i {
    margin-right:5px;    
}

/* END BANNER */

/* BEGIN ADD EMAIL */

.section-store input:not(.form-check-input),
.section-store .app-form-field-input-proxy {
    border-color: lightgray !important;
    transition: .2s !important;
}

.section-store input:focus {
    border-color: dodgerblue !important;
}

.section-store .app-form-field-input-proxy.focus {
    border-color: dodgerblue !important;
}


.section-store {
    /*min-height: calc(100vh - 30px);
    box-shadow: 0 0 10px 10px inherit;*/
    /* box-shadow: 0 0 40px 40px #181818; */
    /* margin-bottom: 2.5rem; */
    /* display: flex; */
    /*position: relative;
    overflow: hidden;
    margin-top: 2.5rem;
    background-color: white;*/
    color: #0b1011;
    padding: 70px 0;
    position: relative;
    background-color: #FFFFFF;
    width: 100%;
    min-height: 5rem;
    max-height: 93vh;
    overflow: hidden;
   /* margin-top: 0rem;*/
    /*margin-bottom: 2rem;*/
}

.section-store .ml-auto,
.section-store .mx-auto {
    margin-left: auto !important;
}

.section-store .mr-auto,
.section-store .mx-auto {
    margin-right: auto !important;
}

@media (min-width: 768px) {
    .section-store .col-md-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }
}

.section-store .row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.section-store h2 {
    font-weight: bold;
    text-align: center !important;
    font-size: 2.8em;
    margin: 30px 0 0;
    line-height: 1.2;
}

.section-store h5 {
    color: #0b1011;
    font-weight: 500;
    padding-top: 20px;
    text-align: center;
    font-size: 1.35em;
    line-height: 1.4em;
}

@media (min-width: 768px) {
    .section-store .col-md-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.section-store .ml-auto,
.section-store .mx-auto {
    margin-left: auto !important;
    text-align: center;
}

.section-store .mr-auto,
.section-store .mx-auto {
    margin-right: auto !important;
}

@media (min-width: 768px) {
    .section-store .col-md-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}

.section-store .contact-form label {
    font-weight: 700;
    color: #0b1011;
    margin-top: 15px;
    display: inline-block;
    margin-bottom: 0.2rem;
}

.section-store .contact-form .info {
    text-align: left;
}

.section-store .contact-form input {
    color: black;
}

    .section-store .row {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-right: -15px;
        margin-left: -15px;
    }
    .section-store .container {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: justify;
        justify-content: space-between;
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
    }

@media (min-width: 576px) {
    .section-store .container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .section-store .container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .section-store .container {
        max-width: 960px;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }
}

@media (min-width: 1200px) {
    .section-store .container {
        max-width: 1140px;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }
}

@media (min-width: 1600px) {
    .section-store .container {
        max-width: 1440px;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }
}

.section-store button {
    border-radius: 0.3rem;
    line-height: 1.75;
    text-transform: uppercase;
    opacity: .8;
    transition: .2s;
    margin-top: 30px;
    white-space: nowrap;
    background-color: forestgreen;
    border: solid 2px forestgreen;
    background: rgba(100,100,100, .3);
    border-color: rgba(100,100,100, .5);
    color: #FFFFFF;
    font-size: 14px;
    padding: 11px 30px;
    cursor: pointer;
    font-weight: bold;
    font-size: 1rem;
    opacity: 1;
    margin-top: 20px;
    border-radius: 50px;
    box-shadow: 7px 7px 7px 0px rgba(0,0,0,.1);
    margin-left: .3rem;
    margin-right: .3rem;
}

    .section-store button:focus {
        opacity: 1;
       /* background-color: white;*/
        color: black;
    }

    .section-store button:hover {
        opacity: 1;
        /*background-color: white;*/
        color: black;
    }

    .section-store button:active {
        transition: 0;
        opacity: .9 !important;
     /*   background-color: forestgreen;*/
        box-shadow: none !important;
    }

    .section-store button i {
        margin-right: 5px;
    }

.section-store .contact-form label {
    margin-bottom: 0rem;
    font-size: 1rem !important;
    color: black !important;
}

.section-store .input-group-prepend {
    min-width: 30px;
    display: flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: gray;
    text-align: center;
    white-space: nowrap;
    background-color: #e9ecef;
    transition: .2s;
    border: solid 1px lightgray;
    border-radius: 3px;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    border-right: none;
}

.section-store .input-group.focused .input-group-prepend {
    border-color: dodgerblue;
    background-color: dodgerblue;
    color: white;
}

.section-store .input-group .app-form-field-input {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    color:black !important;
}

/* END ADD EMAIL */

/* BEGIN VIDEO */

.section-store {
    min-height: calc(100vh - 30px);
    box-shadow: 0 0 10px 10px inherit;
    /* box-shadow: 0 0 40px 40px #181818; */
    /* margin-bottom: 2.5rem; */
    /* display: flex; */
    position: relative;
    overflow: hidden;
    margin-top: 2.5rem;
}
.section-store .background {
    filter: blur(10px);
    transform: scale(1.2);
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    opacity: .4;
    pointer-events:none;
}
.section-store .container {
    margin-top:2rem;
    padding-top: 3rem;
    padding-bottom: 5rem;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    text-align: center;
}

@media (min-width: 576px) {
    .section-store .container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .section-store .container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .section-store .container {
        max-width: 960px;
    }
}
@media (min-width: 1200px) {
    .section-store .container {
        max-width: 1140px;
    }
}


.section-store .row {
}
.section-store .column {
}

.section-store .logo img {
    top: 9px;
    left: -11px;
    height: 4rem;
    position: relative;
}
.section-store .logo span {
    color: white;
    font-size: 3.6em;
    margin: 30px 0 0;
    font-weight: 100;
}

.section-store .title {
    font-weight: bold;
    margin-top: 18px;
    margin-bottom: 25px;
    min-height: 32px;
    font-size: 3.6rem;
}

.section-store .row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}
.section-store .column {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
}

.section-store .card-video {
    position:relative;
}

.section-store video {
    object-fit: contain;
    width: 100%;
    max-height:40vh;
}
.section-store .video-button {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    background-color: rgba(0,0,0,.7);
    cursor: pointer;
    /*display: none;*/
    transition: .2s;
}
.section-store .video-button.hide {
    opacity:0;    
}

.section-store .card-body {
    text-align: center;
}

.section-store .card-message {
    opacity: .8;
    font-weight: bold;
    min-height: 32px;
    font-size: 2.8em;
    margin: 30px 0 0;
    margin-top: 40px;
    margin-bottom: 25px;
}

.section-store .card-message-ex {
    opacity: .8;
    margin-bottom: 5px;
    margin-top: 15px;
    font-size: 1.825em;
    line-height: 1.4;
    margin: 20px 0 0px;
    font-weight:400;
}


.section-store .video-button button {
    font-size: 10rem;
    opacity: .7;
    transition:.2s;
}

.section-store .video-button button:focus {
    opacity: 1;
}

.section-store .video-button button:hover {
    opacity: 1;
}

.section-store .video-button button:active {
    transition: 0;
    opacity: .9 !important;
}


/* END VIDEO */

/* BEGIN CARD EVENT */

.section-store {
    min-height: calc(100vh - 30px);
    box-shadow: 0 0 10px 10px inherit;
    /* box-shadow: 0 0 40px 40px #181818; */
    /* margin-bottom: 2.5rem; */
    /* display: flex; */
    position: relative;
    overflow: hidden;
    /*margin-top: 2.5rem;*/
}
.section-store .products {
    background-color: black !important;
    color: white !important;
    max-height: unset !important;
    display: flex;
}

    .section-store .products .background {
        filter: blur(10px);
        transform: scale(1.2);
        background-repeat: no-repeat;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        opacity: .4;
        pointer-events: none;
    }

    .section-store .products .container {
        padding-top: 3rem;
        padding-bottom: 5rem;
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
        display: flex;
        flex-direction: column;
        z-index: 1;
    }

@media (min-width: 576px) {
    .section-store .products .container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .section-store .products .container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .section-store .products .container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .section-store .products .container {
        max-width: 1140px;
    }
}


.section-store .products .title {
    margin-top: 30px;
    margin-bottom: 20px;
    min-height: 32px;
}

    .section-store .products .title h1 {
        font-size: 3.4rem;
        margin: 0.67em 0;
        font-weight: bold;
    }

.section-store .products .row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
    justify-content: center;
}

.section-store .products .card-event {
    width: 70%;
    background-color: rgba(255,255,255,.1);
    box-shadow: none;
    border-radius: 12px;
    color: #333333;
    margin-bottom: 100px;
    position: relative;
    z-index: 1;
    border: 0 none;
    -webkit-transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 200ms ease;
    -moz-transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 200ms ease;
    -o-transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 200ms ease;
    -ms-transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 200ms ease;
    transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 200ms ease;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-clip: border-box;
}

    .section-store .products .card-event:hover {
        box-shadow: 0px 12px 19px -7px rgb(0 0 0 / 30%);
        transform: translateY(-10px);
        -webkit-transform: translateY(-10px);
        -ms-transform: translateY(-10px);
        -moz-transform: translateY(-10px);
    }

    .section-store .products .card-event img {
        width: 100%;
        max-width: 100%;
        height: auto;
        border-radius: 12px 12px 0 0;
        opacity: .7;
    }

.section-store .products .card-body {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1.25rem;
    padding: 20px;
    color: white;
    font-size: 2rem;
}


    .section-store .products .card-body button {
        border-radius: 0.3rem;
        line-height: 1.75;
        text-transform: uppercase;
        opacity: .8;
        transition: .2s;
        margin-top: 30px;
        white-space: nowrap;
        background-color: forestgreen;
        border: solid 2px forestgreen;
        background: rgba(100,100,100, .3);
        border-color: rgba(100,100,100, .5);
        color: #FFFFFF;
        font-size: 14px;
        padding: 11px 30px;
        cursor: pointer;
        font-weight: bold;
        font-size: 1rem;
        opacity: 1;
        margin-top: 20px;
        border-radius: 50px;
        box-shadow: 7px 7px 7px 0px rgba(0,0,0,.1);
        margin-left: .3rem;
        margin-right: .3rem;
    }

.section-store .products .card-body button:focus {
    opacity: 1;
  /*  background-color: white;*/
    color: black;
}

.section-store .products .card-body button:hover {
    opacity: 1;
   /* background-color: white;*/
    color: black;
}

.section-store .products .card-body button:active {
    transition: 0;
    opacity: .9 !important;
  /*  background-color: forestgreen;*/
    box-shadow: none !important;
}

.section-store .products .card-body button i {
    margin-right: 5px;
}

.section-store .products .card-body .card-title {
    margin: 5px 0 0 0;
    font-weight: bold;
    padding-bottom: 3px;
    padding-top: 0px;
    margin-top: 0;
}

.section-store .products .card-body .card-text {
}

.section-store .products .card-body .card-text1 {
    font-weight: 500;
    font-size: 1.8rem;
    padding-bottom: 5px;
}

.section-store .products .card-body .card-text2 {
    font-weight: 500;
    padding-bottom: 5px;
    font-size: 1.4rem;
}

.section-store .products .card-body .card-text3 {
    font-weight: 500;
    padding-bottom: 5px;
    font-size: 1.4rem;
}

.section-store .products .card-body .buttons {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}


/* END CARD EVENT */

#storefront-template .body-cart .cart-section {
    min-height: 48vh;
}
#storefront-template .body-cart .cart-items-no-items {
    text-align: center;
    font-size: 4rem;
    height: 100%;
    padding-top: 8rem;
}


/* BEGIN DUAL INFO */

.section-dual-info input:not(.form-check-input),
.section-dual-info .app-form-field-input-proxy {
    border-color: lightgray !important;
    transition: .2s !important;
}

.section-dual-info input:focus {
    border-color: dodgerblue !important;
}

.section-dual-info .app-form-field-input-proxy.focus {
    border-color: dodgerblue !important;
}


.section-dual-info {
    /*min-height: calc(100vh - 30px);
    box-shadow: 0 0 10px 10px inherit;*/
    /* box-shadow: 0 0 40px 40px #181818; */
    /* margin-bottom: 2.5rem; */
    /* display: flex; */
    /*position: relative;
    overflow: hidden;
    margin-top: 2.5rem;
    background-color: white;*/
    color: #0b1011;
    padding: 70px 0;
    position: relative;
    background-color: #FFFFFF;
    width: 100%;
    min-height: 20rem;
    max-height: 93vh;
    overflow: hidden;
    /* margin-top: 0rem;*/
    /*margin-bottom: 2rem;*/
    margin-top: 1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    background-image: linear-gradient(140deg, #BC70A4 50%, #BFD641 100%);
    color: white;
}

.section-dual-info .ml-auto,
.section-dual-info .mx-auto {
    margin-left: auto !important;
}

.section-dual-info .mr-auto,
.section-dual-info .mx-auto {
    margin-right: auto !important;
}

@media (min-width: 768px) {
    .section-dual-info .col-md-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }
}

.section-dual-info .row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.section-dual-info h2 {
    font-weight: bold;
    text-align: center !important;
    font-size: 2.8em;
    margin: 30px 0 0;
    line-height: 1.2;
}

.section-dual-info h5 {
    font-weight: 500;
    padding-top: 10px;
    text-align: center;
    font-size: 3.35em;
    line-height: 1.4em;
}

.section-dual-info .left {
    padding-right: 3rem;
}

.section-dual-info .right {
    padding-left: 3rem;
}

@media (min-width: 768px) {
    .section-dual-info .col-md-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.section-dual-info .ml-auto,
.section-dual-info .mx-auto {
    margin-left: auto !important;
    text-align: center;
}

.section-dual-info .mr-auto,
.section-dual-info .mx-auto {
    margin-right: auto !important;
}

@media (min-width: 768px) {
    .section-dual-info .col-md-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}

.section-dual-info .contact-form label {
    font-weight: 700;
    color: #0b1011;
    margin-top: 15px;
    display: inline-block;
    margin-bottom: 0.2rem;
}

.section-dual-info .contact-form .info {
    text-align: left;
}

.section-dual-info .contact-form input {
    color: black;
}

    .section-dual-info .row {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-right: -15px;
        margin-left: -15px;
    }
    .section-dual-info .container {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: justify;
        justify-content: space-between;
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
    }

@media (min-width: 576px) {
    .section-dual-info .container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .section-dual-info .container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .section-dual-info .container {
        max-width: 960px;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }
}

@media (min-width: 1200px) {
    .section-dual-info .container {
        max-width: 1140px;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }
}

@media (min-width: 1600px) {
    .section-dual-info .container {
        max-width: 1440px;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }
}

.section-dual-info button {
    border-radius: 0.3rem;
    line-height: 1.75;
    text-transform: uppercase;
    opacity: .8;
    transition: .2s;
    margin-top: 30px;
    white-space: nowrap;
    background-color: forestgreen;
    border: solid 2px forestgreen;
    background: rgba(100,100,100, .3);
    border-color: rgba(100,100,100, .5);
    color: #FFFFFF;
    border-width: 1px;
    color: #FFFFFF;
    background: #e9ecef;
    border-color: gray;
    color: dimgray;
    font-size: 14px;
    padding: 11px 30px;
    cursor: pointer;
    font-weight: bold;
    font-size: 1rem;
    opacity: 1;
    margin-top: 20px;
    border-radius: 50px;
    box-shadow: 7px 7px 7px 0px rgba(0,0,0,.1);
    margin-left: .3rem;
    margin-right: .3rem;
}

    .section-dual-info button:focus {
        opacity: 1;
       /* background-color: white;*/
        color: black;
    }

    .section-dual-info button:hover {
        opacity: 1;
        /*background-color: white;*/
        color: black;
    }

    .section-dual-info button:active {
        transition: 0;
        opacity: .9 !important;
        /*background-color: forestgreen;*/
        box-shadow: none !important;
    }

    .section-dual-info button i {
        margin-right: 5px;
    }

.section-dual-info .contact-form label {
    margin-bottom: 0rem;
    font-size: 1rem !important;
    color: black !important;
}

.section-dual-info .input-group-prepend {
    min-width: 30px;
    display: flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: gray;
    text-align: center;
    white-space: nowrap;
    background-color: #e9ecef;
    transition: .2s;
    border: solid 1px lightgray;
    border-radius: 3px;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    border-right: none;
}

.section-dual-info .input-group.focused .input-group-prepend {
    border-color: dodgerblue;
    background-color: dodgerblue;
    color: white;
}

.section-dual-info .input-group .app-form-field-input {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    color:black !important;
}

.section-dual-info .row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex: 1;
    height:100%;
}
.section-dual-info .row .mr-auto {
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;    
}
.section-dual-info .divider {
    width: 3px;
    min-width: 3px;
    height: 100%;
    padding-top: 7rem;
    padding-bottom: 7rem;
    margin-top: 7rem;
    margin-bottom: 7rem;
    background-color: white;
    opacity: .7;
}

/* END DUAL INFO */

.dms-access-code-body {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.dms-access-code-qr-code-image {
    max-width: 300px;
    padding-bottom: 1rem;
    padding-top: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding-bottom: 3rem;
    margin-top: -1.5rem;
}

.section-products .products .card-event .edit-buttons {
    position: absolute;
    top: 0;
    right: 0;
    padding: 1rem;
}
.section-products .products .card-event .edit-buttons .btn {
    padding: 1rem;
}
.section-products .products #add-button {
    display: none;
}
body.edit-layout .section-products .products #add-button {
    display: inline-flex;
}
.section-products .products .edit-buttons {
    display:none;
}
body.edit-layout .section-products .products .edit-buttons {
    display: flex;
}


/* BEGIN LIVE EVENT SCHEDULE */

.section-live-event-schedule input:not(.form-check-input),
.section-live-event-schedule .app-form-field-input-proxy {
    border-color: lightgray !important;
    transition: .2s !important;
}

.section-live-event-schedule input:focus {
    border-color: dodgerblue !important;
}

.section-live-event-schedule .app-form-field-input-proxy.focus {
    border-color: dodgerblue !important;
}


.section-live-event-schedule {
    /*min-height: calc(100vh - 30px);
    box-shadow: 0 0 10px 10px inherit;*/
    /* box-shadow: 0 0 40px 40px #181818; */
    /* margin-bottom: 2.5rem; */
    /* display: flex; */
    /*position: relative;
    overflow: hidden;
    margin-top: 2.5rem;
    background-color: white;*/
    color: #0b1011;
    padding: 70px 0;
    position: relative;
    background-color: #FFFFFF;
    width: 100%;
    min-height: 50rem;
    overflow: hidden;
    /* margin-top: 0rem;*/
    /*margin-bottom: 2rem;*/
    margin-top: 1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    background-image: linear-gradient(140deg, #BC70A4 50%, #BFD641 100%);
    color: white;
}

.section-live-event-schedule .ml-auto,
.section-live-event-schedule .mx-auto {
    margin-left: auto !important;
}

.section-live-event-schedule .mr-auto,
.section-live-event-schedule .mx-auto {
    margin-right: auto !important;
}

@media (min-width: 768px) {
    .section-live-event-schedule .col-md-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }
}

.section-live-event-schedule .row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.section-live-event-schedule .left {
    display: flex;
    align-items: center;
    margin: 30px 0 0;
}
.section-live-event-schedule .right {
    width: 120%;
}

.section-live-event-schedule h2 {
    font-weight: bold;
    text-align: center !important;
    font-size: 3.35em;
    line-height: 1.2;
    margin-bottom: 0;
}
.section-live-event-schedule h2 input {
    font-weight: bold !important;
    text-align: center !important;
    font-size: 3.8rem !important;
    position: relative;
    top: 0rem;
}
.section-live-event-schedule .left #add-button {
    margin-left:2rem;
}

.section-live-event-schedule h5 {
    font-weight: 400;
    padding-top: 10px;
    text-align: center;
    line-height: 1.4em;
    font-size: 2.6em;
    padding-top: 1.5rem;
    padding-bottom: 0.5rem;
    margin-bottom: 0rem;
}
.section-live-event-schedule h5 input {
    text-align: center !important;
    font-size: 3rem !important;
    position: relative;
    top: 0rem;
}

@media (min-width: 768px) {
    .section-live-event-schedule .col-md-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.section-live-event-schedule .ml-auto,
.section-live-event-schedule .mx-auto {
    margin-left: auto !important;
    text-align: center;
}

.section-live-event-schedule .mr-auto,
.section-live-event-schedule .mx-auto {
    margin-right: auto !important;
}

@media (min-width: 768px) {
    .section-live-event-schedule .col-md-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}

.section-live-event-schedule .contact-form label {
    font-weight: 700;
    color: #0b1011;
    margin-top: 15px;
    display: inline-block;
    margin-bottom: 0.2rem;
}

.section-live-event-schedule .contact-form .info {
    text-align: left;
}

.section-live-event-schedule .contact-form input {
    color: black;
}

    .section-live-event-schedule .row {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-right: -15px;
        margin-left: -15px;
    }
    .section-live-event-schedule .container {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: justify;
        justify-content: space-between;
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
    }

@media (min-width: 576px) {
    .section-live-event-schedule .container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .section-live-event-schedule .container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .section-live-event-schedule .container {
        max-width: 960px;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }
}

@media (min-width: 1200px) {
    .section-live-event-schedule .container {
        max-width: 1140px;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }
}

@media (min-width: 1600px) {
    .section-live-event-schedule .container {
        max-width: 1440px;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }
}

.section-live-event-schedule .contact-form label {
    margin-bottom: 0rem;
    font-size: 1rem !important;
    color: black !important;
}

.section-live-event-schedule .input-group-prepend {
    min-width: 30px;
    display: flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: gray;
    text-align: center;
    white-space: nowrap;
    background-color: #e9ecef;
    transition: .2s;
    border: solid 1px lightgray;
    border-radius: 3px;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    border-right: none;
}

.section-live-event-schedule .input-group.focused .input-group-prepend {
    border-color: dodgerblue;
    background-color: dodgerblue;
    color: white;
}

.section-live-event-schedule .input-group .app-form-field-input {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    color:black !important;
}

.section-live-event-schedule .row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex: 1;
    height:100%;
}
.section-live-event-schedule .row .mr-auto {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;    
}
.section-live-event-schedule .divider {
    width: 125%;
    height: 3px;
    background-color: white;
    opacity: .7;
    margin-top: 2rem;
    margin-bottom: 1.5rem;
}
.section-live-event-schedule .schedule-items {
    margin-top: 2rem;
    margin-bottom: 2rem;
    min-width: 115%;
}

/* END LIVE EVENT SCHEDULE */



.dmsProjectLiveEventScheduleItem {
    display: flex;
    padding-bottom: 1.2rem;
    text-align: center;
}

.live-event-schedule #add-button {
    display: none;
}
body.edit-layout .live-event-schedule #add-button {
    display: block;
}

.dmsProjectLiveEventScheduleItem .button {
    border-radius: 0.3rem;
    line-height: 1.75;
    text-transform: uppercase;
    opacity: .8;
    transition: .2s;
    white-space: nowrap;
    background-color: forestgreen;
    border: solid 2px forestgreen;
    background: rgba(100,100,100, .3);
    border-color: rgba(100,100,100, .5);
    color: #FFFFFF;
    font-size: 14px;
    padding: 11px 30px;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.4rem;
    opacity: 1;
    border-radius: 50px;
    box-shadow: 7px 7px 7px 0px rgba(0,0,0,.1);
    font-size: .8rem;
}

.dmsProjectLiveEventScheduleItem .button:focus {
    opacity: 1;
/*    background-color:white;*/
    color:black;
}

.dmsProjectLiveEventScheduleItem .button:hover {
    opacity: 1;
/*    background-color:white;*/
    color:black;
}

.dmsProjectLiveEventScheduleItem .button:active {
    transition: 0;
    opacity: .9 !important;
   /* background-color: forestgreen;*/
    box-shadow: none !important;
}

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

.dmsProjectLiveEventScheduleItem .date {
    display: flex;
    align-items: center;
    min-width: 8rem;
    min-width: 13rem;
    justify-content: end;
    margin-right: 1.5rem;
    margin-left: -1rem;
}
.dmsProjectLiveEventScheduleItem .date-label {
    font-size: 4rem;
}
.dmsProjectLiveEventScheduleItem .day-label { 
    font-size: 1rem;
    padding: 0 5px;
   /* opacity: .7;*/
    text-align: left;
}
.dmsProjectLiveEventScheduleItem .month-label { 
    text-transform: uppercase;
    font-size: 1.4rem;
    padding: 0 5px;
    padding-top: 4px;
}
.dmsProjectLiveEventScheduleItem .info {
    flex:1;    
    text-align: left;
    padding-left: 1rem;
    padding-right: 1rem;
}
.dmsProjectLiveEventScheduleItem .info .time {        
    font-size: 2.2rem;
}
.dmsProjectLiveEventScheduleItem .info .location {      
    font-size: 1rem;
    padding-left: 3px;
    padding-top: 6px;
}
.dmsProjectLiveEventScheduleItem .buttons {
    padding-bottom: 0.5rem;
    position: relative;
    display: flex;
    align-items: center;
}
.dmsProjectLiveEventScheduleItem .edit-buttons {
    display:none;
    position: absolute;
    top: -2.5rem;
    width: 100%;
    align-items:center;
}
body.edit-layout .dmsProjectLiveEventScheduleItem .edit-buttons { 
    display:flex;
}
.dmsProjectLiveEventScheduleItem .remove-button {
    padding: .5rem;
    margin-left: 1rem;
    display: none;
}
body.edit-layout .dmsProjectLiveEventScheduleItem .remove-button {
    display: inline-flex;
}
.dmsProjectLiveEventScheduleItem .edit-date {

}
.dmsProjectLiveEventScheduleItem .edit-date input {
    font-size: 2rem !important;
}

#button-publish {
    display: none;
    position: absolute;
    top: 5rem;
    right: 0.5rem;
    padding: 0.5rem 1rem;
}
body.edit-layout #button-publish {
    display: block;
}

.body .tab-page .section-documentation {
    width:100%;
    height:100%;
}
.body .tab-page .section-documentation .project-layout-page.documentation {
    width:100%;
    height:100%;
    display:flex;
    flex-direction:row;
}
.body .tab-page .section-documentation .left-menu {
    width: 300px;
    height: 100%;
    border-right:1px solid black;
    padding-top:1rem;
}
.body .tab-page .section-documentation .right-body {
    width: 100%;
    height: 100%;
}
.body .tab-page .section-documentation .documentation-pages {
    padding-left:1rem;
}
.body .tab-page .section-documentation .app-navigation-item a.selected {
    background-color: #4ea752;
    background: linear-gradient( 60deg, #288c6c, #4ea752) !important;
    box-shadow: 0 4px 20px 0px rgb(0 0 0 / 14%), 0 7px 10px -5px rgb(76 175 80 / 40%) !important;
    color: white !important;
}
.body .tab-page .section-documentation .app-navigation-item a.selected .app-navigation-icon {
    color: white !important;
}
.body .tab-page .section-documentation h1 {
    margin: .5rem  0 !important;
    margin-bottom: 1rem !important;
}
.body .tab-page .section-documentation h2 {
    margin: .5rem  0 !important;
    margin-bottom: 1rem !important;
}
.body .tab-page .section-documentation p {
    margin: .5rem  0 !important;
}

.body .tab-page .section-documentation .documentation-type {
    padding: 1rem;
    background-color: white;
    color: black;
    margin: 1rem;
    border: solid 1px;
    border-radius: 5px;
    background-color: rgba(64,64,64);
    border: 1px solid rgba(64,64,64);
    color: forestgreen;
    font-weight: bold;
    background: rgba(64,64,64);
    color: rgb(230,230,230);
    margin: 1rem 0;
    margin-right: 1rem;
}
.body .tab-page .section-documentation .documentation-type .name {
    font-size: 1.8rem;
    font-weight: 100;
}
.body .tab-page .section-documentation .documentation-method {
    padding: 1rem;
    background-color: white;
    color: black;
    margin: 1rem 0;
    border: solid 1px;
    border-radius: 5px;
    background-color: #e7f6ec;
    border: 1px solid #c3e8d1;
    color: forestgreen;
    font-weight: bold;    
    font-weight: 100;
    background-color: rgba(47,47,47);
    border-color: rgba(47,47,47);
    font-size: 1.2rem;
    line-height: 1.4;
    color: rgba(260,260,260);
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.media-status-search-input {
    display: flex;
    border: solid 1px rgba(255,255,255,.2);
    border-radius: 28px;
    padding: 0rem;
    margin-right: 3rem;
    font-size: 1.4rem;
    color: rgba(255,255,255,.4);
    margin-top: 0.5rem;
    margin-left: 2.5rem;
    margin-right: 3.5rem;
}
.media-status-search-input .icons {
    padding-left: .8rem;
    position:relative;
    top:2px;
}
.media-status-search-input .app-search-content-button-input {    
    border: none !important;
    font-size: 1.2rem !important;
    color: rgba(255,255,255,.8) !important;
   /* padding:0.3rem !important;*/ 
    min-width: 300px;
}



@media only screen and (max-height: 540px) and (max-width: 960px) and (min-height: 540px) and (min-width: 960px) {
    .dms-on-demand.login-handler .dms-on-demand-selection-sections:not(.checkout-container) {
        margin-top: 1.5rem;
        padding-bottom: 1rem;
    }

    body.is-native-app .dms-on-demand.login-handler .media-status-user-container.default-screen {
        display: none !important;
    }

    body.is-native-app .dms-on-demand.login-handler .dms-on-demand-form.access-code .dms-on-demand-actions.app-project-header {
        display: none;
    }

    body.is-native-app .dms-on-demand.login-handler .dms-on-demand-selection-sections.access-code {
        background-color: transparent;
        border: none;
        padding: 0;
        max-width: 100%;
        position: initial;
        border-radius: unset;
        box-shadow: none;
        margin: 0;
    }

    body.is-native-app .dms-on-demand.login-handler .dms-on-demand-form.access-code .login-logo {
        margin: 0;
    }

    body.is-native-app .dms-on-demand.login-handler .dms-on-demand-form.access-code .logo-image {
        padding-top: 0;
    }

    body.is-native-app .dms-on-demand.login-handler .dms-on-demand-form.access-code .logo-name {
        display: none;
    }

    body.is-native-app .dms-on-demand.login-handler .dms-on-demand-form.access-code #login-title {
        font-size: 3.2rem;
        font-weight: 600;
    }

    body.is-native-app .dms-on-demand.login-handler .dms-on-demand-form.access-code #login-message {
        font-size: 1.6rem;
    }
    body.is-native-app .dms-on-demand.login-handler .dms-on-demand-form.access-code #login-error {
        font-size: 1.8rem;
    }


    .app-project-header > button > div {
        position: relative;
        top: 1px;
        /*text-transform: uppercase;*/
        text-shadow: -1px 1px 2px rgb(0 0 0);
        font-size: 80%;
    }

    .no-shadow .app-project-header > button > div {
        text-shadow: none;
    }
}
/*
#library-types.hide-categories {
    display:none !important;
}*/
.project-layout-page-background-image-container video {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    object-fit: cover;
    width: 100%;
    height: 100%;
    opacity:0;
    transition:2s;
}
.project-layout-page-background-image-container video.show {
    opacity:1;   
}
.app-project-header > button.hidden {
    display: none;
}

.app-project-header > button.selected {
    display: unset;
}
.app-project-header > button.hidden-ex {
    display: none !important;
}

.subsection-options > .app-form-field-checkbox {
    margin-bottom:8px !important;
}


.section-quickaccess .carousel-indicators {
		/*bottom: 10%;*/
}

.section-quickaccess .carousel-item {
		height: 100vh;
}

.section-quickaccess .carousel-inner {
		min-height: 100vh;
		height: 100vh;
}

.carousel.no-delay .carousel-item {
    transition: none !important;
}
.carousel-inner {
    display: flex;
    overflow: hidden;
    align-items: center;
}

.carousel-control-prev, .carousel-control-next {
    width: unset;
}
label[contenteditable] { 
    line-height:inherit;
}

body.updating-project-image #main-screen .body-container .body {
    overflow:hidden !important;
}
/*.editable-content {
    line-height: inherit;
    all:inherit;
}*/



/* VIEW OPTIONS */


body.fadein-quickaccess #main-screen .project-layout-page-background-image-container {
    position: absolute;
    /*    top: -100px;
    left: -100px;
    width: calc(100% + 200px);
    height: calc(100% + 200px);*/
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
    background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 60%);
    background: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, .1) 60%);
}

#main-screen .project-layout-page-title-actions .app-button {
    border-color: rgba(100,100,100, .7) !important;
}

#main-screen .body-container {
    margin-top: 0px !important;
    /* padding-top: .25rem;*/
}
#main-screen.allow-relative .body-container {
    margin-top: -88px !important;
}

#main-screen .app-project-header > button.logo {
    top: 1px;
    padding-top: .5rem;
    padding-left: 1px;
    top: 0px;
}
/*#main-screen .app-project-header > button#button-signup:active,
#main-screen .app-project-header > button#button-signup:focus {
    background-color:transparent;
}*/

#options-info .subscription-container .subscription-button:hover {
    /* background-color: #191919; */
    color: white !important;
}
#options-info .subscription-container .subscription-button:active {
    color: white !important;
    opacity: .7;
}

#main-screen .recent-grouping {
    min-height: 250px;
}

#main-screen .tab-page.has-categories #recent-dates .recent-date.display-round-image {
    min-height: 290px;
}
#main-screen .recent-date.display-round-image .recent-grouping {
    min-height: 290px;
}
body:not(.mobile-device) #main-screen .tab-page.has-categories #recent-dates .recent-date.display-round-image {
    min-height: 290px;
}
body:not(.mobile-device) #main-screen .recent-date.display-round-image .recent-grouping {
    min-height: 290px;
}



#main-screen .tab-page.has-categories #recent-dates .recent-date.top-ten-category {
    min-height: 317px;
}
#main-screen .recent-date.top-ten-category .recent-grouping {
    min-height: 317px;
}

body:not(.mobile-device) #main-screen .tab-page.has-categories #recent-dates .recent-date.top-ten-category {
    min-height: 317px;
}
body:not(.mobile-device) #main-screen .recent-date.top-ten-category .recent-grouping {
    min-height: 317px;
}


#main-screen .tab-page.has-categories #recent-dates .recent-date.use-large-image {
    min-height: 495px;
}
#main-screen .recent-date.use-large-image .recent-grouping {
    min-height: 495px;
}

body:not(.mobile-device) #main-screen .tab-page.has-categories #recent-dates .recent-date.use-large-image {
    min-height: 495px;
}
body:not(.mobile-device) #main-screen .recent-date.use-large-image .recent-grouping {
    min-height: 495px;
}

/*

body:not(.mobile-device) #main-screen .tab-page.has-categories #recent-dates .recent-date.display-round-image {
    min-height: 180px;
}
body:not(.mobile-device) #main-screen .recent-date.display-round-image .recent-grouping {
    min-height: 180px;
}

body:not(.mobile-device) #main-screen .tab-page.has-categories #recent-dates .recent-date.top-ten-category {
    min-height: 330px;
}
body:not(.mobile-device) #main-screen .recent-date.top-ten-category .recent-grouping {
    min-height: 330px;
}

body:not(.mobile-device) #main-screen .tab-page.has-categories #recent-dates .recent-date.use-large-image {
    min-height: 495px;
}
body:not(.mobile-device) #main-screen .recent-date.use-large-image .recent-grouping {
    min-height: 495px;
}

*/


body.reduce-font-size #main-screen .app-project-header > button > div {
     text-shadow: unset !important;
    font-size: 100% !important;
}
body.no-shadow.reduce-font-size #main-screen .app-project-header > button > div {
    text-shadow: none;
}

#main-screen .app-project-header > button {
    height: 70%;
    font-size: 1rem;
    background: transparent;
    border-color: transparent;
    padding-left: .5rem;
    padding-right: .5rem;
    /* margin-left: .5rem; */
    margin-right: 1.5rem;
}
#main-screen .app-project-header > button:not(#button-subscribe) {
    border-radius: 0;
} 
#main-screen .app-project-header #button-subscribe {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    height:60%;
    margin-right:3rem;
}
body:not(.mobile-device) #main-screen .app-project-header #button-subscribe {
    margin-right: 2.75rem;
}
body.hide-header-buttons .app-project-header > button {
    display:none;
}

body.reduce-font-size #main-screen .app-project-header img {
    max-height: 38px;
    padding-right: 1.5rem;
}

#main-screen .project-layout-page-info {
    z-index: 1;
    position: relative;
}

#main-screen .project-quick-access.full-info .project-layout-page-data {
    /*max-width: 60rem;*/
}

#main-screen .project-layout-page-title label {
    line-height: 3.5rem;
}

#main-screen .project-layout-page-message-info {
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: -1px 1px 2px rgb(0, 0, 0);
}
.no-shadow #main-screen .project-layout-page-message-info {
    text-shadow: none;
}

    #main-screen .project-layout-page-message-info label {
        line-height: 1.4;
    }

#main-screen .project-layout-page-message-info {
    font-size: 1.6rem;
}

#main-screen .body .tab-page.project-layout .section-row {
    z-index: 2;
    position: relative;
}

#main-screen .carousel-control-prev, #main-screen .carousel-control-next {
    width: unset;
}
/*
                #main-screen .carousel-item {
                    height: calc(100vh - 120px);
                }
*/
#main-screen .tab-page.has-quickaccess .section-quickaccess {
    min-height: calc(100vh - 120px);
}

.has-quickaccess #main-screen .section-quickaccess .carousel-item {
    height: calc(100vh - 88px);
}

.topscreen-quickaccess #main-screen .tab-page.has-quickaccess .carousel-item {
    min-height: calc(100vh - 0px);
}

.fullscreen-quickaccess #main-screen .tab-page.has-quickaccess .carousel-item {
    min-height: calc(100vh + 22px);
}

.fullscreen-quickaccess #main-screen .tab-page.has-quickaccess .section-quickaccess,
.topscreen-quickaccess #main-screen .tab-page.has-quickaccess .section-quickaccess {
    min-height: calc(100vh - 0px);
}

.fullscreen-quickaccess #main-screen .tab-page.has-quickaccess.project-widget-media-page .section-quickaccess,
.topscreen-quickaccess #main-screen .tab-page.has-quickaccess.project-widget-media-page .section-quickaccess {
    min-height: unset;
    height: unset;
}
.project-widget-media-page .section-quickaccess .carousel-inner {
    min-height: unset;
    height: unset;
}
.fullscreen-quickaccess #main-screen .tab-page.has-quickaccess.project-widget-media-page .carousel-item,
.topscreen-quickaccess #main-screen .tab-page.has-quickaccess.project-widget-media-page .carousel-item {
    min-height: unset;
    height: unset;
}
.project-widget-media-page .project-quick-access {
    min-height: unset;
    height: unset;
}
#main-screen .project-widget-media-page .project-header-page-header {
    min-height: unset;
    height: unset;
}
.project-widget-media-page #media-image {
    width: 250px;
    min-width: 250px;
    height: 250px;
    min-height: 250px;
    object-fit: cover;
    border-radius: 100%;
    /* background-color: black; */
    margin-right: 2rem;
    opacity: 0;
    transition: .3s;
}
.project-widget-media-page #media-image.show {
    opacity:1;
}
#main-screen .project-widget-media-page .project-layout-media-page .project-header-page-header {
    height: unset;
    padding-top: 8rem;
}
#main-screen .project-widget-media-page .project-layout-media-page .media-info-container {
    display: flex;
    padding-left: 3rem;
    margin-bottom: 3rem;
    margin-top: .3rem;
    align-items: center;
}
#main-screen .project-widget-media-page .project-layout-media-page .media-info-container .media-info {    
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height:310px;
}
#main-screen .project-widget-media-page .project-layout-page-background-image {
    background-position: 50% 43%;
    transition: .3s;
}
.project-widget-media-page .project-layout-media-page .media-title {
    font-size: 2.6rem;
    max-width: unset;
    line-height: unset;
    margin: 0;
}
.project-widget-media-page .project-layout-media-page .media-tagline {
    font-size: 1.4rem;
    max-width: 80%;
    max-height: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    color:white !important;
}
.project-widget-media-page .project-layout-media-page .media-tagline p,
.project-widget-media-page .project-layout-media-page .media-tagline span {
    color: white !important;
}
.project-widget-media-page .project-layout-media-page .media-tagline p:last-of-type {
    padding-bottom:0 !important;
    margin-bottom:0 !important;
}
.project-widget-media-page .project-layout-media-page .media-options {
    display: none !important;
}

.fullscreen-quickaccess #main-screen .body-container {
    margin-top: -66px !important;
    padding-top: 0rem;
}

.has-quickaccess.fullscreen-quickaccess #main-screen .body-container,
.has-quickaccess.topscreen-quickaccess #main-screen .body-container {
    margin-top: -88px !important;
    margin-top: -66px !important;
    padding-top: 0rem;
}

#main-screen .project-header-page-header {
    padding-top: 20vh;
}

.topscreen-quickaccess #main-screen .project-header-page-header {
    padding-top: 19vh;
}

.fullscreen-quickaccess #main-screen .project-header-page-header {
    padding-top: 20.25vh;
}

.has-quickaccess #main-screen #recent-info {
    margin-top: -6rem;
}

.fullscreen-quickaccess #main-screen #recent-info {
    margin-top: 0rem;
}

#main-screen .project-quick-access.full-info .project-layout-page-info {
    max-width: 65%;
    max-width: 100%;
    display: flex;
}

.fullscreen-quickaccess .project-layout-page-title-info {
    bottom: 13%;
}

#main-screen .carousel-control-prev.btn,
#main-screen .carousel-control-next.btn {
  /* display:none;*/
}

.carousel-control-next:focus,
.carousel-control-next:hover,
.carousel-control-prev:focus,
.carousel-control-prev:hover {
    opacity: 1;
}

.topscreen-quickaccess #main-screen .carousel-control-prev.btn,
.topscreen-quickaccess #main-screen .carousel-control-next.btn {
    top: 38vh;
}

.fullscreen-quickaccess #main-screen .carousel-control-prev.btn,
.fullscreen-quickaccess #main-screen .carousel-control-next.btn {
    top: 40.25vh;
}

.topscreen-quickaccess #main-screen .section-quickaccess .carousel-indicators {
    bottom: 11%;
    bottom: 7.5rem;
    bottom: 11.5rem;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    z-index:3;
}

.fullscreen-quickaccess #main-screen .section-quickaccess .carousel-indicators {
    bottom: 7%;
    bottom: 8rem;
    /*    width: 100vw;*/
    bottom: 11.5rem;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

#main-screen .project-layout-page-data {
    color: white;
}

#main-screen .related-container-items {
    display: flex;
    flex-wrap: wrap;
    /* margin-left: 0.5rem;*/ /* margin-left: 0.5rem; */
    grid-template-columns: repeat(auto-fit, minmax(233px, 1fr));
    display: grid;
}


#main-screen #library-schedule .ruler-container .grid-guide-ruler .ruler-time {
    color: white;
}

body.widescreen-artwork #main-screen #recent-screen .library-types-scroll-button {
    top: 53px;
    top: 23px;
    top: 43px;
}

body.widescreen-artwork #main-screen #recent-screen .recent-date.use-large-image .library-types-scroll-button {
    top: 115px;
}

body.widescreen-artwork #main-screen #recent-screen .recent-date.use-vertical-image .library-types-scroll-button {
    top: 138px;
}

#main-screen #recent-dates .recent-date {
    padding-bottom: 0px;
    position: relative;
    /*  min-height:340px;*/
}

body.has-quickaccess #main-screen #recent-dates .recent-date {
    top: -5rem;
}
body.has-quickaccess #main-screen .media-layout-grid #recent-dates .recent-date {
    top: 0rem;
}

#main-screen.related #recent-dates .recent-date,
#main-screen.media #recent-dates .recent-date,
#main-screen.brand #recent-dates .recent-date,
#main-screen.category #recent-dates .recent-date {
    min-height: 300px;
}

#main-screen .tab-page.has-categories #recent-dates .recent-date {
      min-height:340px;
    /*  padding-bottom:2rem;*/
}


/*#main-screen .tab-page.has-categories #recent-dates .recent-date.top-ten-category {
    padding-bottom:3rem;
}*/

#main-screen #recent-screen .recent-date.channel .library-types-scroll-button {
    top: 100px;
}

#main-screen .section-quickaccess {
    min-height: calc(100vh - 120px);
}

#main-screen #channels-screen .recent-date .library-types-scroll-button {
    top: 80px;
}

#main-screen #recent-screen .section-quickaccess .carousel-inner {
    min-height: unset;
    height: unset;
}

#main-screen .project-layout-page-message-info {
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: -1px 1px 2px rgb(0, 0, 0);
    font-size: 1.8rem;
    max-width: 240px;
    margin-top: 15rem;
    padding-bottom: 1rem;
    max-width: 100%;
    line-height: 1.4;
}
.no-shadow #main-screen .project-layout-page-message-info {
    text-shadow: none;
}

#main-screen .center-page-title .project-layout-page-message {
    padding-top: 2rem;
    max-width: 500px;
    white-space: normal;
    padding-bottom: 1rem;
}

/*#main-screen .project-quick-access.blur-image .project-layout-page-default-image,
                #main-screen .dms-on-demand .blur-image .project-layout-page-default-image {
                    opacity: .5;
                }

                #main-screen .project-quick-access.blur-image .project-layout-page-background-image-container .project-layout-page-default-image,
                #main-screen .dms-on-demand .blur-image .project-layout-page-background-image-container .project-layout-page-default-image {*/
/* filter: blur(30px) !important;*/
/*filter: blur(30px);
                }

                #main-screen .center-page-title .project-layout-page-info {
                    padding-right: 5%;
                    max-width: unset;
                    display: flex;
                    justify-content: center;
                    display: flex;
                    flex-direction: column;
                    text-align: center;
                    justify-content: center;
                    align-items: center;
                }
                #main-screen .project-layout-page-image {*/
/* padding-bottom: 2rem;*/
/*margin-bottom: 0rem;
                }*/
/*
                #main-screen .project-layout-page-image-container img {
                    display: flex;
                    flex-direction: column;
                    max-height: 8rem;
                }
        */
#main-screen .project-layout-page-quick-access-menus {
    justify-content: center;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 3rem;
    bottom: 8rem;
    z-index: 6;
}


#main-screen .slprev,
#main-screen .slnext {
    top: 35%;
    margin-top: 0px;
}

    #main-screen .slprev:focus,
    #main-screen .slnext:focus {
        color: white;
        background-color: rgba(13, 110, 253,0.7);
    }


/*body.widescreen-artwork .related-container .library-group {
    width: 217px;
    min-width: 217px;
}body.widescreen-artwork .related-container .library-group img {
    width: 224px;
    max-width: 224px;
    max-height: 224px;
}
    body.widescreen-artwork .related-container .library-group .image {
    width: 224px;
    height: 125px;
    min-width: 224px;
}
    body.widescreen-artwork .related-container .library-group .image {
        width: 217px;
        height: 123px;
    }*/

body.widescreen-artwork .library-group .image {
    width: 312px;
    height: 175px;
}
/*body:not(.mobile-device).widescreen-artwork .top-ten-category .library-groups > .library-group .image {
    width: 308px;
    height: 175px;
}*/

body.widescreen-artwork .recent-date.use-full-image .library-group {
    width: 100%;
    min-width: 100%;
    min-height: 70vh;
    /*transform: scale(1) !important;*/
    transform: matrix(1.0, 0, 0, 1.0, 0, 0) !important;
    cursor: default;
    margin-left: 0;
    border-radius: 0;
    border: none !important;
}
body.widescreen-artwork .recent-date.use-full-image .library-group .image {
    width: 100vw;
    height: unset;
    flex: 1;
    cursor:default;
}
.recent-date.use-full-image .library-group img:not(.media-title-image) {
    /*max-width: 90vw;
    max-height: 70vh;
    object-fit: contain;*/
    max-width: 100vw;
    max-height: unset;
    object-fit: contain;
    width: 100vw;
    right: 0rem;
}
.recent-date.use-full-image .library-group img.media-title-image {
    display: block;
    max-width: 600px;
    margin-bottom: 2rem;
}
.recent-date.use-full-image .library-group .bottom-banner {
    font-size: 1.5rem;
}
.recent-date.use-full-image .library-group .name {
    font-size: 1.4rem;
}
.recent-date.use-full-image .library-group .name2 {
    font-size: 1.3rem;
}
.recent-date.use-full-image .library-group .name3,
.recent-date.use-full-image .library-group .name4,
.recent-date.use-full-image .library-group .name5 {
    font-size: 1.2rem;
}
.recent-date.use-full-image .library-group .info {
    font-size: 1.3rem;
}
.recent-date.use-full-image .library-group .info .info1 .buttons  {
    bottom: 1rem;
}
.recent-date.use-full-image .library-group .info .info1 .buttons button i {
    font-size: 22px;
}
.recent-date.use-full-image .library-group .container {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 5;
    background: transparent;
    width:fit-content;
}
.recent-date.use-full-image .library-types-scroll-button {
    top: 295px !important;
    display:none;
}
.recent-date.use-full-image.can-scroll .library-types-scroll-button {
    display: flex;
}
.recent-date.use-full-image > .name-container {
    opacity: 0;
    pointer-events: none;
    display:none;
}
#main-screen .recent-date.use-full-image .recent-grouping {
    margin-bottom: 2rem;
}



body.widescreen-artwork .recent-date.use-vertical-image .library-group {
    width: 277px;
    min-width: 277px;
}

body.widescreen-artwork .recent-date.use-vertical-image .library-group .image {
    width: 277px;
    height: 416px;
}

.recent-date.use-vertical-image .library-group img {
    max-width: 277px;
    max-height: 416px;
}
.recent-date.use-vertical-image .library-group-container .ranking,
.recent-date.use-vertical-image .library-groups > .library-group .ranking {
    top: 17rem;
}

body.widescreen-artwork .recent-date.use-large-image .library-group {
    width: 628px;
    min-width: 628px;
    margin-right: 15px;
}
    body.widescreen-artwork .recent-date.use-large-image .library-group .image {
        width: 628px;
        height: 354px;
    }
.recent-date.use-large-image .library-group img {
    max-width: 628px;
    max-height: 628px;
}
.recent-date.use-large-image .library-group .bottom-banner {
    font-size: 1.3rem;
}
.recent-date.use-large-image .library-group .name {
    font-size: 1.2rem;
}
.recent-date.use-large-image .library-group .name2 {
    font-size: 1.1rem;
}
.recent-date.use-large-image .library-group .name3,
.recent-date.use-large-image .library-group .name4,
.recent-date.use-large-image .library-group .name5 {
    font-size: 1rem;
}
.recent-date.use-large-image .library-group .info {
    font-size: 1.1rem;
}
.recent-date.use-large-image .library-group .info .info1 .buttons  {
    bottom: 1rem;
}
.recent-date.use-large-image .library-group .info .info1 .buttons button i {
    font-size: 22px;
}

body.widescreen-artwork .recent-date.display-round-image .library-group {
    width: 225px;
    min-width: 225px;
    min-height:unset;
    border-radius: 100%;
    margin-left: 1rem;
}
body.widescreen-artwork .recent-date.display-round-image .library-group:first-child {
    margin-left: 3rem;
}

body.widescreen-artwork .recent-date.display-round-image .library-group .image {
    width: 225px;
    height: 225px;
}
.recent-date.display-round-image .library-group img {
    max-width: 225px;
    max-height: 225px;
}
.recent-date.display-round-image .library-group .bottom-banner {
    display:none;
}
.recent-date.display-round-image .library-group .container {
    display: none;
}

body.widescreen-artwork .library-group.channel .image {
    height: 312px;
}

body.widescreen-artwork .recent-date.channel .image {
    height: 312px;
}

/*
            body.widescreen-artwork .library-group .image img {
                max-width: 312px;
                max-height: 175px;
            }*/

.library-group-details .controls .buttons button.edit-button,
.library-group-details .controls .buttons button.delete-button {
    display: none;
}
body.edit-layout .library-group-details .controls .buttons button.edit-button,
body.edit-layout .library-group-details .controls .buttons button.delete-button {
    display: block;
}

.library-item > button .container > .image-container > .library-item-control-container {
    display: none;
}
body.edit-layout .library-item > button .container > .image-container > .library-item-control-container {
    display: flex;
}


@media only screen and (max-width: 600px) {
    body.can-edit .app-project-header:not(.sm) {
        padding-left: 2.5rem !important;
    }
    .header .app-user-content-button-icon {
        font-size: 1.2rem;
    }
    .header #button-options {
       /* padding-right: 0;*/
        font-size: 1rem;
        position: relative;
        /*top: 3px;*/
    }
    #main-screen .app-project-header > button.logo {
        top: 1px;
        padding-top: 0rem;
    }
    body.reduce-font-size #main-screen .app-project-header img {
        height: 22px;
        padding-right: 1.5rem;
    }
    .project-layout .edit-layout-button {
        top: .3rem !important;
    }
    .project-layout .edit-layout-button .material-icons {
        font-size: 1.2rem;
    }
}

.footer-links {
    display: flex;
    align-items: baseline;
    margin-left: auto;
    margin-right: auto;
    font-size: .9rem;
    /* font-weight: 400; */
    /* font-size: 13px; */
    margin-top: 1.5rem;
    padding-bottom: 2rem;
    margin-top: 3.5rem;
    margin-top: 0rem;
    padding-bottom: 3rem;
    /*display:none;*/
    order: 1000;
    /* width: 100vw;*/
    justify-content: center;
}
#main-screen.media .footer-links,
#main-screen.brand .footer-links,
#main-screen.related .footer-links,
#main-screen.category .footer-links {
    z-index: 3;
}
#main-screen.library .footer-links {
    padding-bottom: 1rem;
}
.footer-links > .copyright {
    position: relative;
    top: 2px;

}
.footer-links > .link-items {

    display: flex;
    align-items: baseline;
    margin-left: 5rem;
    margin-right: 5rem;
}
.footer-links > .link-items-ex {
    display: flex;
    align-items: baseline;
    margin-left: 5rem;
    margin-right: 5rem;
}
.footer-links a {
    display:flex;
    white-space:nowrap;
    text-decoration:none;
    color:white;
    transition:.2s opacity color;
}
.footer-links > .link-items a {
    margin-left:1rem;
    margin-right:1rem;
    border:solid 1px transparent;
}
.footer-links > .link-items-ex a {
    margin-left: 1rem;
    margin-right: 1rem;
    border: solid 1px transparent;
}
.footer-links > .button-items {

}

#main-screen.preferences .footer-links,
#main-screen.search .footer-links {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 1rem;
    padding-right: 1.25rem;
    padding-left: 0rem;
    margin-left:0px;
    margin-right:0px;
}
body.is-safari:not(.mobile-device) #main-screen.preferences .footer-links,
body.is-safari:not(.mobile-device) #main-screen.search .footer-links {
    padding-right: 4.25rem;
    padding-left: 3rem;
}
#main-screen.preferences .footer-links > .copyright,
#main-screen.search .footer-links > .copyright {
    order: 10;
    font-size: .8rem;
    margin-top: 0px;
    top:0px;
}
#main-screen.preferences .footer-links > .link-items,
#main-screen.search .footer-links > .link-items {
    display: none;
}
#main-screen.preferences .footer-links > .link-items-ex,
#main-screen.search .footer-links > .link-items-ex {
     margin-bottom: 0; 
    flex-wrap: wrap;
    justify-content: center;
    margin-left: 0;
    margin-right: 0;
}
#main-screen.preferences .footer-links > .button-items,
#main-screen.search .footer-links > .button-items {
    display: none;
}
#main-screen.preferences .footer-links > .link-items-ex a,
#main-screen.search .footer-links > .link-items-ex a {
    margin-bottom: 0;
    font-size: .8rem;
    transition:.2s color opacity;
}
#main-screen.preferences .footer-links .app-button,
#main-screen.search .footer-links .app-button {
    display: none;
}

#main-screen .project-layout-media-page .project-quick-access.full-info .project-layout-page-info {
    flex-direction: column;
    width: 100%;
    z-index: 5;
    margin-bottom: 2rem;
    pointer-events: none;
    margin-right: 1.5rem;
}

#main-screen .project-layout-media-page .project-quick-access .project-layout-page-no-items {
    display:none;
}

#main-screen .project-layout.no-items .project-quick-access .project-layout-page-no-items {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
    /* justify-content: center; */
    align-items: center;
}

#main-screen .project-layout.no-items .project-quick-access .project-layout-page-no-items-label {
    font-size: 3.5rem;
    color: white;
    max-width: 80%;
    margin-top: 3rem;
}

#main-screen .project-layout-media-page:not(.loaded) .project-quick-access.full-info .project-layout-page-info,
#main-screen .project-layout.no-items .project-quick-access.full-info .project-layout-page-info {
    display: none;
}
#main-screen .project-layout.no-items .project-layout-page-background-image-container {
    display:none;
}

#main-screen .project-layout.no-items.media-layout-2 .project-quick-access .project-layout-page-no-items-label,
#main-screen .project-layout.no-items.media-layout-3 .project-quick-access .project-layout-page-no-items-label {
    margin-top: 5rem;
}

#main-screen .project-layout.no-items.media-layout-2 .project-quick-access .project-layout-page-no-items,
#main-screen .project-layout.no-items.media-layout-3 .project-quick-access .project-layout-page-no-items {
    padding-bottom: 13rem;
}

#main-screen .project-layout-media-page .project-header-page-header {
    height: 85vh;
    display: flex;
    align-items: end;
    padding-left: 2rem;
    padding-left: 2.7rem;
}

.project-layout-media-page .media-title {
    font-size: 5.6rem;
    /* line-height: 1.2; */
    max-width: 60vw;
    line-height: 1.2;
    margin-bottom: 1rem;
    /* margin-left: -.25rem;*/
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 225px;
}
.project-layout-media-page .media-options {
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    margin-left:.25rem;
}
.project-layout-media-page .media-options > div {
    margin-right: 1rem;
    margin-bottom: 1rem;
}
.media-options > div.media-duration {
    display:none;
}

.project-layout-media-page .media-buttons {
    display: flex;
    margin-bottom: 3rem;
    pointer-events: all;
    margin-top: 2rem;
}
.project-widget-media-page.media-layout-2 .project-layout-media-page .media-buttons {
    margin-top: 0rem;
}
.project-layout-media-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);
}
.project-layout-media-page .media-buttons .button-container.padding-right {
    padding-right: 2rem;
}
/*.project-layout-media-page .media-buttons button:focus,
.project-layout-media-page .media-buttons button.focused {
    opacity: .8;
}
.project-layout-media-page .media-buttons .button-container:hover button,
.project-layout-media-page .media-buttons button:hover {
    opacity: 1;
}
.project-layout-media-page .media-buttons button:active {
    opacity: .7;
}*/
.project-widget-media-page.media-layout-3 .project-layout-media-page .media-buttons {
    margin-top: 0;
    margin-bottom: 0rem;
}
.project-layout-media-page .media-links {
    display: flex;
    align-items: center;
    font-size: 1rem;
    margin-bottom: 0rem;
    pointer-events: all;
    margin-left: .25rem;
}
.project-layout-media-page .media-links button {
    margin-right: 1.5rem;
    margin-left: 1rem;
    padding: .5rem;
    border:none;
    background:none;
    border-radius: 6px;
}
.project-layout-media-page .media-links .button-container.padding-right {
    padding-right: 2rem;
}
body:not(.mobile-device) .project-layout-media-page .media-links .button-container:hover button,
body:not(.mobile-device) .project-layout-media-page .media-links button:hover,
body:not(.mobile-device) .project-layout-media-page .media-links button:focus,
body:not(.mobile-device) .project-layout-media-page .media-links button.focused,
body:not(.mobile-device) .project-layout-media-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);
}
body:not(.mobile-device) .project-layout-media-page .media-links .button-container:hover button,
body:not(.mobile-device) .project-layout-media-page .media-links button:hover,
.project-layout-media-page .media-links button:focus,
.project-layout-media-page .media-links button.focused,
.project-layout-media-page .media-links button:active {
    opacity: 1;
}
.project-layout-media-page .media-links button label {
    display:none;
    margin-left:.25rem;
}
body:not(.mobile-device) .project-layout-media-page .media-links .button-container:hover button label,
body:not(.mobile-device) .project-layout-media-page .media-links button:hover label,
body:not(.mobile-device) .project-layout-media-page .media-links button:focus label,
body:not(.mobile-device) .project-layout-media-page .media-links button.focused label,
body:not(.mobile-device) .project-layout-media-page .media-links button:active label {
    display: block;
}
.project-layout-media-page .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;
}
.project-layout-media-page .media-tagline {
    margin-bottom: 2rem;
    font-size: 1.6rem;
    max-width: 50%;
    margin-top: 1rem;
    line-height: 1.6;
    /*margin-left: .25rem;*/
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    pointer-events: all;
    max-height: 180px;
}
body:not(.mobile-device) .project-layout-media-page .media-tagline {
    /*font-size: 2rem;*/
    margin-top: 1.5rem;
}
.project-layout-media-page .media-tagline a {
    color: white !important;    
}
.project-layout-media-page .media-tags {
    display: flex;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    pointer-events: all;
    margin-left: .25rem;
    display:none;
}
.project-layout-media-page .media-tags .media-tag {
    margin-right: 2rem;
    opacity:1;
    transition:.2s;
    color:white;
}
/*.project-layout-media-page .media-tags .media-tag:hover,
.project-layout-media-page .media-tags .media-tag:focus {
    opacity:1;
}
.project-layout-media-page .media-tags .media-tag:active {
    opacity:.9;
}*/
.project-layout-media-page .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 .project-layout-media-page .media-networks {
    display:none;
}
.project-layout-media-page .media-networks .media-network {
    margin-right: 1rem;
    display: flex;
    align-items: center;
}
.project-layout-media-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;
}
.project-layout-media-page .media-networks .media-network .media-network-image { 
    object-fit: contain;
}
.project-layout-media-page .media-networks .media-network label {
    opacity:.7;
}
.media-layout-grid .media-pages {
    top: -11.5rem;
    position: relative;
}
.media-layout-grid.media-layout-0.no-items .media-pages {
    /* top: -30.5rem;*/
    position: relative;
    margin-top: -16rem;
}
.media-layout-grid.media-layout-3 .media-pages,
.media-layout-grid.media-layout-2 .media-pages {
    top: -2.5rem;
}
.media-layout-grid .media-tabs {
    border-bottom: solid 1px rgba(255, 255, 255, .5);
    margin-bottom: .25rem;
    margin-left: 3.8rem;
    margin-right: .7rem;
    margin-right: 3.8rem;
    z-index: 5;
    position: relative;
}
.project-widget-media-page.media-layout-2 .media-layout-grid .media-tabs,
.project-widget-media-page.media-layout-3 .media-layout-grid .media-tabs {
    margin-bottom: 2.25rem;
}
.project-widget-media-page.media-layout-1 .media-layout-grid .media-tabs {
    opacity: 0;
    margin-bottom: 2rem;
    pointer-events: none;
}
.project-widget-media-page.media-layout-1 .media-layout-grid .media-tabs button {
    display:none
}
.media-layout-grid .media-tabs button {
    font-size: 1.4rem;
    margin-right: 5rem;
    padding-bottom: .5rem;
    position: relative;
    top: 2px;
    pointer-events: all;
    transition:.3s;
    border:none;
    border-bottom: solid 3px transparent;
}
.media-layout-grid .media-tabs button.selected {
    /*font-weight:bold;*/
    border-bottom: solid 3px #fff;
}
.fullscreen-quickaccess #main-screen.media #recent-info {
    margin-top: 0rem;
}
/*#main-screen .body .tab-page.project-layout .section-row {
    padding-top: 11rem;
}
#main-screen .body .tab-page.project-layout .section-row,*/
#main-screen.media .body .tab-page.project-layout .section-row,
#main-screen.brand .body .tab-page.project-layout .section-row,
#main-screen.related .body .tab-page.project-layout .section-row,
#main-screen.category .body .tab-page.project-layout .section-row {
    top: 0rem;
    min-height: 0px;
    margin-bottom: 0px;
}
/*#main-screen .section-row.section-content > #recent-info > #recent-dates,*/
#main-screen.media .section-row.section-content > #recent-info > #recent-dates,
#main-screen.brand .section-row.section-content > #recent-info > #recent-dates,
#main-screen.related .section-row.section-content > #recent-info > #recent-dates,
#main-screen.category .section-row.section-content > #recent-info > #recent-dates {
    min-height: 0px;
    min-height: 50px;
}
/*.has-quickaccess.fullscreen-quickaccess #main-screen .body-container,
.has-quickaccess.topscreen-quickaccess #main-screen .body-container,*/
.has-quickaccess.fullscreen-quickaccess #main-screen.media .body-container,
.has-quickaccess.topscreen-quickaccess #main-screen.media .body-container,
.has-quickaccess.fullscreen-quickaccess #main-screen.brand .body-container,
.has-quickaccess.topscreen-quickaccess #main-screen.brand .body-container,
.has-quickaccess.fullscreen-quickaccess #main-screen.related .body-container,
.has-quickaccess.topscreen-quickaccess #main-screen.related .body-container,
.has-quickaccess.fullscreen-quickaccess #main-screen.category .body-container,
.has-quickaccess.topscreen-quickaccess #main-screen.category .body-container {
    margin-top: -88px !important;
    margin-top: -66px !important;
    padding-top: 0rem;
}
/*#main-screen .section-row .section-background,*/
#main-screen.media .section-row .section-background,
#main-screen.brand .section-row .section-background,
#main-screen.related .section-row .section-background,
#main-screen.category .section-row .section-background {
    position: relative;
    top: -5rem;
    min-height: 0rem;
}
body:not(.mobile-device) #main-screen.media .section-row .section-background {
    top: 4rem;
}
body:not(.mobile-device) #main-screen.related .section-row .section-background {
    top: 6rem;
}
/*#main-screen .library-types-scroll-button.left,
#main-screen .library-types-scroll-button.right {
    min-height: 8rem;
    top: 3rem;
}*/
#main-screen.media .library-types-scroll-button.left,
#main-screen.media .library-types-scroll-button.right {
    min-height: 8rem;
    top: 3rem;
    display:none;
}
#main-screen.related .library-types-scroll-button.left,
#main-screen.related .library-types-scroll-button.right {
    min-height: 8rem;
    top: 3rem;
    display: none;
}
#main-screen.brand .library-types-scroll-button.left,
#main-screen.brand .library-types-scroll-button.right {
    min-height: 8rem;
    top: 3rem;
    display: none;
}
#main-screen.category .library-types-scroll-button.left,
#main-screen.category .library-types-scroll-button.right {
    min-height: 8rem;
    top: 3rem;
    display: none;
}
/*#main-screen.media .library-group {
    border-radius: 0 !important;
}*/
/*#main-screen.media .library-group .name {
    font-weight: 600;
    letter-spacing: .5px;
}
#main-screen.media .library-group .info {
    font-size: 1rem;
}*/
#main-screen.media .library-group .info .info1 .buttons {
    /* bottom: unset; 
    padding: 0;
    margin: 0;*/
}
#main-screen.media .library-group .container .tagline,
#main-screen.related .library-group .container .tagline,
#main-screen.brand .library-group .container .tagline,
#main-screen.category .library-group .container .tagline {
    padding-top: 6px;
    font-size: .9rem;
}
#main-screen.media .library-group .container .tagline label,
#main-screen.related .library-group .container .tagline label,
#main-screen.brand .library-group .container .tagline label,
#main-screen.category .library-group .container .tagline label {
    white-space: normal;
    text-align: left;
    letter-spacing: 1px;
}
#main-screen.media .project-layout-page-background-image-container,
#main-screen.related .project-layout-page-background-image-container,
#main-screen.brand .project-layout-page-background-image-container,
#main-screen.category .project-layout-page-background-image-container {
    pointer-events: none;
}

body .media-details-ex-vail {
    background: rgba(0,0,0,0);
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 49;
    z-index: 200;
    display: none;
}
body .media-details-ex-vail.show {
    display:block;   
}
body .media-details-ex {
    background: linear-gradient(180deg, #000, #222);
    background: linear-gradient(45deg, rgba(20, 20, 20, 1), rgba(68,68,68, 1));
    width: 35rem;
    height: 100vh;
    position: fixed;
    top: 0;
    right: -40rem;
    bottom: 0;
    z-index: 50;
    z-index: 201;
    transition: .3s right;
    overflow: auto;
    padding-bottom: 0rem;
    max-width: 100vw;
}
body.no-transition .media-details-ex {
    transition:none !important;
}
body .media-details-ex.show {
    right: 0rem;
}
body .media-details-ex .media-details-header {
    display: flex;
    align-items: center;
    margin: .5rem;
}
body .media-details-ex .media-details-header .close-button {
    font-size: 1.6rem;
    padding: .5rem;
    margin: .25rem;
    margin-right: .5rem;
}
body .media-details-ex .media-details-header .close-button:active {
    color: #FF0062 !important;
    opacity:.8;
    transition:.1s;
}
body .media-details-ex .media-details-data {
    margin: 0rem 2rem;
    padding-bottom:4rem;
}
body .media-details-ex .media-details-title {
    font-size: 2rem;
    font-weight: 600;
    padding-bottom: .5rem;
    line-height: 2.8rem;
}

body .media-details-ex  .media-options {
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    margin-bottom: 0rem;
    margin-left: .0rem;
}
body .media-details-ex  .media-options > div {
    margin-right: 1rem;
    margin-bottom: 1rem;
}

body .media-details-ex  .media-buttons {
    display: flex;
    flex-direction:column;
    pointer-events: all;
}
body:not(.mobile-device) .media-details-ex .media-buttons {
    padding-top: 1rem;
}
body .media-details-ex  .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);
    justify-content: center;
}
body .media-details-ex  .media-buttons > button {
    margin-bottom:.5rem;
}

body .media-details-ex  .media-buttons .button-container.padding-right {
    padding-right: 2rem;
}
body .media-details-ex  .media-buttons .button-container:hover button:not(.selected-accentButton),
body .media-details-ex  .media-buttons button:not(.selected-accentButton):hover,
body .media-details-ex  .media-buttons button:not(.selected-accentButton):focus,
body .media-details-ex  .media-buttons button:not(.selected-accentButton).focused,
body .media-details-ex  .media-buttons button:not(.selected-accentButton):active {
    opacity: 1;
}
body .media-details-ex .media-links {
    display: flex;
    align-items: center;
    font-size: 1rem;
    margin-top:1rem;
    margin-bottom: 4rem;
    pointer-events: all;
    margin-left: .25rem;
    min-height: 47px;
    margin-left:0px;
    justify-content:center;
}
body .media-details-ex  .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;
}
body .media-details-ex  .media-links button:active {
    color: #FF0062 !important;
    opacity: .8;
    transition: .1s;
}
body .media-details-ex  .media-links .button-container.padding-right {
    padding-right: 2rem;
}
body .media-details-ex  .media-links .button-container:hover button,
body .media-details-ex  .media-links button:hover,
body .media-details-ex  .media-links button:focus,
body .media-details-ex  .media-links button.focused,
body .media-details-ex  .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;
}
body .media-details-ex  .media-links button label {
    margin-left: 0;
    margin-top: .5rem;
    font-size: .9rem;
}
body .media-details-ex  .media-links .button-container:hover button label,
body .media-details-ex  .media-links button:hover label,
body .media-details-ex  .media-links button:focus label,
body .media-details-ex  .media-links button.focused label,
body .media-details-ex  .media-links button:active label {
    display:block;
}


    body .media-details-ex .media-links .button-container:hover button,
    body .media-details-ex .media-links button:hover,
    body .media-details-ex .media-links button:focus,
    body .media-details-ex .media-links button.focused,
    body .media-details-ex .media-links button:active {
        padding: .5rem;
        border: none !important;
        background: transparent !important;
    }

    body .media-details-ex .media-links .button-container:hover button,
    body .media-details-ex .media-links button:hover {
        opacity:.8;
    }

    body .media-details-ex .media-links button:active {
        opacity: 1 !important;
    }

        body .media-details-ex .media-links .button-container:hover button label,
        body .media-details-ex .media-links button:hover label,
        body .media-details-ex .media-links button:focus label,
        body .media-details-ex .media-links button.focused label,
        body .media-details-ex .media-links button:active label {
           /* display: none;*/
        }

    body .media-details-ex .media-links .button-container.padding-right {
        padding-right: 0rem;
    }

body .media-details-ex  .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;
}
body .media-details-ex  .media-tagline { 
    font-size: 1.2rem;
    /* font-weight: 600; */
    padding-bottom: .5rem;
    line-height: 1.7rem;
}
body .media-details-ex .media-tagline a {
    color: white !important;    
}
body:not(.mobile-device) .media-details-ex .media-tagline {
    padding-bottom: 1.5rem;
    padding-top: 1rem;
}
body:not(.mobile-device) .media-details-ex .live-banner {
    padding-top: .25rem;
}

.media-details-ex .live-banner .bottom-banner {
    margin-bottom: .75rem;
}

.media-details-ex .live-banner .live-countdown-header {
    font-size: .4rem;
}
.media-details-ex .live-banner .live-countdown-body {
    font-size: 1.6rem;
}
body .media-details-ex  .media-tagline p a { 
    color:white !important;
}
body .media-details-ex  .media-tagline p:last-of-type { 
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
body .media-details-ex  .media-tags {
    display: flex;
    font-size: 1rem;
    margin-bottom: 1rem;
    pointer-events: all;
    /* margin-left: .25rem; */
    flex-flow: wrap;
    margin-top: .5rem;
}
body:not(.mobile-device) .media-details-ex .media-tags {
    margin-top: .75rem;
    margin-bottom: .5rem;
}
body .media-details-ex  .media-tags .media-tag {
    margin-right: 2rem;
    opacity:1;
    transition:.2s;
    color:white;
    margin-bottom:1rem;
}

.live-banner-ex {
    display:none;
}
.media-layout-event .live-banner-ex,
.media-details-ex.is-live .live-banner-ex,
.project-quick-access.is-live .live-banner-ex {
    display: flex;
}
.media-details-ex .live-banner-ex {
    padding-top: .5rem;
}
.project-quick-access .live-banner-ex .bottom-banner {
    margin-bottom: 1rem;
}



.project-layout-page.carousel .project-quick-access {

}

.project-layout-page.carousel .carousel-control-next,
.project-layout-page.carousel .carousel-control-prev {
    opacity: 0;
}
.project-layout-page.carousel .carousel-control-next span,
.project-layout-page.carousel .carousel-control-prev span {
    font-size: 22px;
}
.project-layout-page.carousel:hover .carousel-control-next,
.project-layout-page.carousel:hover .carousel-control-prev {
    opacity:.7;
}
.project-layout-page.carousel .carousel-control-next:hover,
.project-layout-page.carousel .carousel-control-next:focus,
.project-layout-page.carousel .carousel-control-prev:hover,
.project-layout-page.carousel .carousel-control-next:focus {
    opacity: 1;
}
.project-layout-page.carousel:hover .carousel-control-next:active,
.project-layout-page.carousel:hover .carousel-control-prev:active {
    opacity: .8;
}
.project-layout-page.carousel .project-header-page-header {
    height: 100vh;
    padding-top: 0;
    justify-content: end;
    display: flex;
    flex-direction: column;
    padding-left: 0;
}
.project-layout-page.carousel .project-layout-page-info {
    padding-top: 0;
    padding-bottom: 10rem;
    padding-bottom: 14rem;
}
.project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title,
.project-layout-page.carousel .project-layout-page-info.hide-image .project-layout-page-title,
.project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title {
    font-size: 5.6rem;
    /* line-height: 1.2; */
    max-width: 60vw;
    line-height: 1.2;
    margin-bottom: 1rem;
    margin-left: -.15rem;
    font-weight: 400;
    padding-bottom:0;
}
#main-screen .project-layout-page.carousel .project-layout-page-info .project-layout-page-message {
    max-width: 800px;
}
#main-screen .project-layout-page.carousel .project-layout-page-info .project-layout-page-message-info {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    font-size:2rem;
    line-height:1.6;
    /*  max-width: 800px;*/
    text-shadow: -1px 1px 2px rgb(0 0 0);
}
body:not(.mobile-device) #main-screen .project-layout-page.carousel .project-layout-page-info .project-layout-page-message-info {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* pointer-events: all; */
    max-height: 210px;
    margin-bottom:1.5rem;
    padding-bottom: 0;
}
   
#main-screen .project-layout-page.carousel .project-layout-page-info .project-layout-page-message-info p,
#main-screen .project-layout-page.carousel .project-layout-page-info .project-layout-page-message-info span,
#main-screen .project-layout-page.carousel .project-layout-page-info .project-layout-page-message-info a {
    color: white !important;    
}
#main-screen .project-layout-page.carousel .project-layout-page-info .project-layout-page-message-info p:last-of-type {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.no-shadow #main-screen .project-layout-page.carousel .project-layout-page-info .project-layout-page-message-info {
    text-shadow: none;
}


.project-layout-page.carousel .project-layout-page-title-actions button label {
    font-size: 1rem !important;
}
.project-layout-page.carousel .carousel-indicators [data-bs-target] {
    width: 6px;
    height: 6px;
    border-radius: 100%;
    margin: .4rem;
    padding: .1rem;
    transition: .2s;
}


.project-layout-page.carousel .media-options {
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    margin-left: .25rem;
}
.project-layout-page.carousel .media-options > div {
    margin-right: 1rem;
    text-shadow: -1px 1px 2px rgb(0 0 0);
    margin-bottom: 1rem;
}
.no-shadow .project-layout-page.carousel .media-options > div {
    text-shadow: none;
}


.project-layout-page.carousel .media-buttons {
    display: flex;
    margin-bottom: 3rem;
    pointer-events: all;
    margin-top: 2rem;
}
.project-layout-page.carousel .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);
/*    text-shadow: -1px 1px 2px rgb(0, 0, 0);*/
}
.project-layout-page.carousel .media-buttons .button-container.padding-right {
    padding-right: 2rem;
}
.project-layout-page.carousel .media-buttons .button-container:hover button,
.project-layout-page.carousel .media-buttons button:hover,
.project-layout-page.carousel .media-buttons button:focus,
.project-layout-page.carousel .media-buttons button.focused,
.project-layout-page.carousel .media-buttons button:active {
    /*opacity: 1;*/
}
.project-layout-page.carousel .media-links {
    display: flex;
    align-items: center;
    font-size: 1rem;
    margin-bottom: 0rem;
    pointer-events: all;
    margin-left: .25rem;
}
.project-layout-page.carousel .media-links button {
    margin-right: 1.5rem;
    margin-left: 1rem;
    padding: .5rem;
    border:none;
    background:none;
    border-radius: 6px;
}
.project-layout-page.carousel .media-links .button-container.padding-right {
    padding-right: 2rem;
}
body:not(.mobile-device) .project-layout-page.carousel .media-links .button-container:hover button,
body:not(.mobile-device) .project-layout-page.carousel .media-links button:hover,
body:not(.mobile-device) .project-layout-page.carousel .media-links button:focus,
body:not(.mobile-device) .project-layout-page.carousel .media-links button.focused {
    padding: .75rem 1.5rem;
    border: solid 1px transparent;
    background: rgba(100, 100, 100, .3);
    border-color: rgba(100, 100, 100, .7);
    opacity: 1;
}
.project-layout-page.carousel .media-links .button-container:hover button,
body:not(.mobile-device) .project-layout-page.carousel .media-links button:hover,
.project-layout-page.carousel .media-links button:focus,
.project-layout-page.carousel .media-links button.focused {
    opacity: 1;
}
.project-layout-page.carousel .media-links button:active {
    opacity:.8;
}
.project-layout-page.carousel .media-links button label {
    display:none;
    margin-left:.25rem;
}
body:not(.mobile-device) .project-layout-page.carousel .media-links .button-container:hover button label,
body:not(.mobile-device) .project-layout-page.carousel .media-links button:hover label,
body:not(.mobile-device) .project-layout-page.carousel .media-links button:focus label,
body:not(.mobile-device) .project-layout-page.carousel .media-links button.focused label,
body:not(.mobile-device) .project-layout-page.carousel .media-links button:active label {
    display: block;
}
.project-layout-page.carousel .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;
}
.project-layout-page.carousel .media-tagline {
    margin-bottom: 2rem;
    font-size: 1.6rem;
    max-width: 50%;
    margin-top: 1rem;
    line-height: 1.5;
    margin-left: .25rem;
}
.project-layout-page.carousel .media-tags {
    display: flex;
    font-size: 1.1rem;
    margin-bottom: 2.5rem;
    margin-top: .5rem;
    pointer-events: all;
    margin-left: .25rem;
    display:none;
}
.project-layout-page.carousel .media-tags .media-tag {
    margin-right: 2rem;
    opacity:1;
    transition:.2s;
    color:white;
    text-shadow: -1px 1px 2px rgb(0, 0, 0);
}
.no-shadow .project-layout-page.carousel .media-tags .media-tag {
    text-shadow: none;
}

/*.app-project-header {
    background: linear-gradient(to bottom, rgba(0, 0, 0, .7), transparent);
}*/

.project-layout-grid-media {

}
.project-layout-grid-media .carousel-item {
    min-height:unset;
}
.project-layout-grid-media  .project-layout-page-background-image,
.dms-on-demand .project-layout-grid-media .project-layout-page-background-image {
    background-position: 50% 40%;
    transition:.3s;
}
#main-screen .project-layout-grid-media .project-header-page-header {
    padding-top: 0vh;
    height: 40vh;
    padding-top: 8vh;
    height: 40vh;
    padding-top: 10vh;
    height: 41vh;
    min-height: 41vh;
}
#main-screen .project-layout-grid-media .project-quick-access.full-info .project-layout-page-info {
    margin-left: 5rem;
    padding-bottom: 0rem;
    display: flex;
    height: 100%;
    align-items: center;
}

.project-layout-grid-media .project-quick-access {

}
.project-layout-grid-media .background-gradient {
    background: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, .1) 60%);
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
}

.project-layout-grid-media #media-image {
    width: 250px;
    min-width: 250px;
    height: 250px;
    min-height: 250px;
    object-fit: cover;
    border-radius: 100%;
    /* background-color: black; */
    margin-right: 2rem;
    opacity: 0;
    transition: .3s;
}
.project-layout-grid-media #media-image.show {
    opacity: 1;
}
.project-layout-grid-media #media-image.hide {
    opacity:0;
    transition:none !important;
}
.project-layout-grid-media .media-info .media-title {
    font-size:2.6rem;
}
.project-layout-grid-media .media-info .media-tagline {
    font-size: 1.4rem;
    max-width: 90%;
    max-height: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
}

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

    /*.mobile-device .project-layout-media-page .media-title {
        font-size: 4.6rem;
    }

    .mobile-device .project-layout-grid-media .media-info .media-title {
        font-size: 2.0rem;
    }

    .mobile-device .project-layout-grid-media .media-info .media-tagline {
        font-size: 1.3rem;
        max-height: 170px;
    }

    .mobile-device .project-layout-grid-media #media-image {
        width: 200px;
        min-width: 200px;
        height: 200px;
        min-height: 200px;
    }
    .mobile-device .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title,
    .mobile-device .project-layout-page.carousel .project-layout-page-info.hide-image .project-layout-page-title,
    .mobile-device .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title {
        font-size: 4.6rem;
    }*/
}

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

    body.widescreen-artwork .library-grouping .library-groups .library-group {
        width: 289px;
        min-width: 289px;
    }
    
    body.widescreen-artwork .library-grouping .library-groups .library-group .image {
        max-width: 289px !important;
        /*height: 289px;*/
    }

    /*.library-group img {
        max-width: 289px;
        max-height: 289px;
    }*/
}


.project-layout-grid-media .media-info .media-tagline,
.project-layout-grid-media .media-info .media-tagline a,
.project-layout-grid-media .media-info .media-tagline span,
.project-layout-grid-media .media-info .media-tagline div,
.project-layout-grid-media .media-info .media-tagline p {
    color: white !important;
}

.project-layout-grid-media .carousel-control-next,
.project-layout-grid-media .carousel-control-prev {
    opacity: 0;
}
.project-layout-grid-media .carousel-control-next span,
.project-layout-grid-media .carousel-control-prev span {
    font-size: 22px;
}
.project-layout-grid-media:hover .carousel-control-next,
.project-layout-grid-media:hover .carousel-control-prev {
    opacity:.7;
}
.project-layout-grid-media .carousel-control-next:hover,
.project-layout-grid-media .carousel-control-next:focus,
.project-layout-grid-media .carousel-control-prev:hover,
.project-layout-grid-media .carousel-control-next:focus {
    opacity: 1;
}
.project-layout-grid-media:hover .carousel-control-next:active,
.project-layout-grid-media:hover .carousel-control-prev:active {
    opacity: .8;
}
.project-layout-grid-media .project-header-page-header {
    height: 100vh;
    padding-top: 0;
    justify-content: end;
    display: flex;
    flex-direction: column;
    padding-left: 0;
}
.project-layout-grid-media .project-layout-page-info {
    padding-top: 0;
    padding-bottom: 10rem;
}
.project-layout-grid-media .project-layout-page-info.has-image .project-layout-page-title,
.project-layout-grid-media .project-layout-page-info.hide-image .project-layout-page-title,
.project-layout-grid-media .project-layout-page-info.has-image .project-layout-page-title {
    font-size: 5.6rem;
    /* line-height: 1.2; */
    max-width: 50vw;
    line-height: 1.1;
    margin-bottom: 1rem;
    margin-left: -.25rem;
    font-weight: 400;
    padding-bottom:0;
}
#main-screen .project-layout-grid-media .project-layout-page-info .project-layout-page-message {
    max-width: 800px;
}
#main-screen .project-layout-grid-media .project-layout-page-info .project-layout-page-message-info {
    margin-top: 1rem;
    font-size:1.6rem;
    line-height:1.5;
  /*  max-width: 800px;*/
}
.project-layout-grid-media .project-layout-page-title-actions button label {
    font-size: 1rem !important;
}
.project-layout-grid-media .carousel-indicators [data-bs-target] {
    width: 6px;
    height: 6px;
    border-radius: 100%;
    margin: .4rem;
    padding: .1rem;
    transition: .2s;
}


.project-layout-grid-media .media-options {
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    margin-bottom: 1rem;
    margin-left: .25rem;
}
.project-layout-grid-media .media-options > div {
    margin-right: 1rem;
}

.project-layout-grid-media .media-buttons {
    display: flex;
    margin-bottom: 3rem;
    pointer-events: all;
    margin-top: 2rem;
}
.project-layout-grid-media .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);
}
.project-layout-grid-media .media-buttons .button-container.padding-right {
    padding-right: 2rem;
}
.project-layout-grid-media .media-buttons .button-container:hover button,
.project-layout-grid-media .media-buttons button:hover,
.project-layout-grid-media .media-buttons button:focus,
.project-layout-grid-media .media-buttons button.focused,
.project-layout-grid-media .media-buttons button:active {
    opacity: 1;
}
.project-layout-grid-media .media-links {
    display: flex;
    align-items: center;
    font-size: 1rem;
    margin-bottom: 0rem;
    pointer-events: all;
    margin-left: .25rem;
}
.project-layout-grid-media .media-links button {
    margin-right: 1.5rem;
    padding: .25rem;
    border:none;
    background:none;
    border-radius: 6px;
}
.project-layout-grid-media .media-links .button-container.padding-right {
    padding-right: 2rem;
}
.project-layout-grid-media .media-links .button-container:hover button,
.project-layout-grid-media .media-links button:hover,
.project-layout-grid-media .media-links button:focus,
.project-layout-grid-media .media-links button.focused {
    padding: .75rem 1.5rem;
    border: solid 1px transparent;
    background: rgba(100, 100, 100, .3);
    border-color: rgba(100, 100, 100, .7);
    opacity:1;
}
.project-layout-grid-media .media-links button:active {
    opacity:.8;
}
.project-layout-grid-media .media-links button label {
    display:none;
    margin-left:.25rem;
}
.project-layout-grid-media .media-links .button-container:hover button label,
.project-layout-grid-media .media-links button:hover label,
.project-layout-grid-media .media-links button:focus label,
.project-layout-grid-media .media-links button.focused label,
.project-layout-grid-media .media-links button:active label {
    display:block;
}
.project-layout-grid-media .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;
}
.project-layout-grid-media .media-tagline {
    margin-bottom: 2rem;
    font-size: 1.6rem;
    max-width: 50%;
    margin-top: 1rem;
    line-height: 1.5;
    margin-left: .25rem;
}
.project-layout-grid-media .media-tags {
    display: flex;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    pointer-events: all;
    margin-left: .25rem;
}
.project-layout-grid-media .media-tags .media-tag {
    margin-right: 2rem;
    opacity:1;
    transition:.2s;
    color:white;
}

.recent-date.top-ten-category button.section-button:disabled {
    opacity: 1 !important;
    pointer-events: none;
}

.recent-grouping .library-groups {
    opacity:0;
    transition:.3s opacity;
}
.recent-grouping .library-groups.show {
    opacity: 1;
}

/*.dms-on-demand.subscribe-screen .dms-on-demand-actions .logo img {
    padding-left: .4rem;
}*/
.dms-on-demand.subscribe-screen .dms-on-demand-actions .media-status-user-container,
.dms-on-demand.subscribe-screen .dms-on-demand-actions #button-options {
    display: none;
}
/*.dms-on-demand.subscribe-screen .dms-on-demand-actions .dms-on-demand-form-close {*/
   /* margin-right: 1.5rem;*/
    /*pointer-events:all;
}*/
.project-form-plugin {
    display:flex;
}
.project-form-plugin .image-container {
    display:flex;
    flex-direction:column;
    padding:.5rem;
}
.project-form-plugin .name-container {
    flex:1;
    display:flex;
    flex-direction:column;
    padding:.5rem;
}
.project-form-plugin .name-container .name-header {
    font-weight:bold;
    padding-bottom:3px;
}
.project-form-plugin .account-container {
    flex: .75;
    display: flex;
    flex-direction: column;
    padding: .5rem 1.5rem;
}
.project-form-plugin .account-container .account-header {
    font-weight:bold;
    padding-bottom:3px;
}
.project-form-plugin .actions-container {
    display:flex;
    flex-direction:column;
    padding:.5rem;
}
.project-form-plugin .actions-container .connect {
    display:none !important;
}
.project-form-plugin .actions-container .disconnect {
    display:none !important;
}
.project-form-plugin.disconnected .actions-container .connect {
    display:flex !important;
}
.project-form-plugin.connected .actions-container .disconnect {
    display:flex !important;
}
.project-form-plugin .image-container {
    width: 60px;
    height: 60px;
    border: none;
    padding-top: 1rem;
}
.project-form-plugin .actions-container .app-icons {
    padding: .7rem 1.5rem;
    font-size: .8rem;
}
.project-form-plugin .actions-container .app-icons i {
    display:none;
}

#messageList {
    position: absolute;
    right: 2rem;
    bottom: 2rem;
    background-color: black;
    padding: 1rem 1.5rem;
    border: solid 1px rgba(100, 100, 100, .2);
    border-radius: 6px;
    z-index: 50000;
    color: white;
    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%);
    pointer-events:none;
    opacity:0;
    transition:.5s;
}
#messageList.show {
    opacity:1;
}


.default-page-widget-1 {
    padding: 3rem;
    z-index: 1;
    padding-top: 0;
}
.default-page-widget-1 .section { 
    display: flex;
    align-items: baseline;
    margin: auto;
    justify-content: center;
    line-height: 1.4;
    max-width: 80vw;
    max-width: 75vw;
}

.default-page-widget-1 .section-item { 
    padding: 1rem 2rem;
    max-width: 25vw;
}
.default-page-widget-1 .section-item:first-of-type { 
    padding-left: 0rem;
}
.default-page-widget-1 .section-item:last-of-type { 
    padding-right: 0rem;
}
.default-page-widget-1 .section-item-title {
    font-size: 2.4rem;
    font-weight: bold;
    margin-bottom: 1rem;
}
.default-page-widget-1 .section-item-description {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, .7);
    padding-left: 2px;
    padding-right: 2px;
}


.default-page-widget-2 {
    padding: 3rem;
     padding-top: 2rem;
    z-index: 2;
}
.default-page-widget-2 .section { 
    display: flex;
    align-items: baseline;
    align-items: center;
    margin: auto;
    justify-content: center;
    line-height: 1.4;
    max-width: 72vw;
    overflow: hidden;
    flex-direction: column;
    max-width: 75vw;
}
.default-page-widget-2 .section-items { 
    flex: 1;
    min-height: 16rem;
    width: 100%;
    position: relative;
   /* left: -.5rem;
    width: calc(100% + 1rem);*/
}
.default-page-widget-2 .section-items .recent-grouping {
   /* min-height:unset;*/
   /* margin-left:-.5rem;*/
}
.default-page-widget-2 .section-title {
    font-size: 2.4rem;
    flex: 1;
    color: white;
}
.default-page-widget-2 .section-button {
    flex: 1;
    justify-content: center;
    width: 100%;
    display: flex;
}
.default-page-widget-2 .section-button .button-more-info {
    margin-left: 0rem;
}


.default-page-widget-3 {
    padding: 3rem;
   /* padding-top: 0;*/
   padding-bottom:6rem;
}
.default-page-widget-3 .section { 
    display: flex;
    align-items: baseline;
    margin: auto;
    justify-content: center;
    line-height: 1.4;
    max-width: 75vw;
    overflow: hidden;
}
.default-page-widget-3 .section-item { 
    padding: 1rem 2rem;
    display: flex;
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 12rem;
}
.default-page-widget-3 .section-item-video { 
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
}
.default-page-widget-3 .section-item-video video { 
    height: 100%;
    object-fit: cover;
    width: 100%;
}
.default-page-widget-3 .section-item-title {
    font-size: 2rem;
    flex: 1;
    color: white;
    z-index: 5;
    display: flex;
    align-items: center;
    margin-left: 4rem;
}
.default-page-widget-3 .section-item-button {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: end;
    margin-right: 5rem;

}


.default-page-widget-4 {
    padding: 3rem;
   /* padding-top: 0;*/
}
.default-page-widget-4 .section { 
    display: flex;
    align-items: baseline;
    margin: auto;
    justify-content: center;
    line-height: 1.4;
    max-width: 72vw;
    overflow: hidden;
    flex-direction: column;
    align-items: center;
}
.default-page-widget-4 .section-title {
    font-size: 5rem;
    flex: 1;
    color: white;
    font-weight: bold;
}
.default-page-widget-4 .section-description {
    font-size: 1.4rem;
    max-width: 600px;
    text-align: center;
    padding: 0rem;
}
.default-page-widget-4 .section-links {
    padding: 2rem 0;

}
.default-page-widget-4 .section-link {
    padding:1rem;

}
.default-page-widget-4 .section-link > div {
    position:relative;
    transition:.2s;
    top:0rem;

}
.default-page-widget-4 .section-link:hover > div {
    top:-.25rem;
}
.default-page-widget-4 .section-link:active > div {
    top:-.15rem;
}
.default-page-widget-4 .section-link svg path {
    fill:#fff !important;
    transition:.2s;
}
.default-page-widget-4 .section-devices {
    padding-bottom: 3rem;
    position:relative;
}
.default-page-widget-4 .section-devices .row-1 {

}
.default-page-widget-4 .section-device.tv {    
    background: url(https://1020-ec743525-cb7d-4721-8c0c-5a4146e20f0f.artrela.tv/project/1079-a33765b4-8485-46be-a88e-bf5ad1660d70/thumbnail-hd~v4.jpg);
    background-repeat: no-repeat;
    background-position-x: 50%;
    background-position-y: 22%;
    background-size: contain;
}
.default-page-widget-4 .section-devices .row-2 {
    position: absolute;
    bottom: 0rem;
    display:flex;
}
.default-page-widget-4 .section-device.tablet {    
    background: url(https://1020-ec743525-cb7d-4721-8c0c-5a4146e20f0f.artrela.tv/project/1079-a33765b4-8485-46be-a88e-bf5ad1660d70/thumbnail-hd~v4.jpg);
    background-repeat: no-repeat;
    /* background-position-x: 50%; */
    background-position-y: 46%;
    background-size: contain;
    position: relative;
    display: flex;
    max-width: fit-content;
    background-color: black;
    border-radius: 15px;
}
.default-page-widget-4 .section-device.phone {    
    background: url(https://1020-ec743525-cb7d-4721-8c0c-5a4146e20f0f.artrela.tv/project/1079-a33765b4-8485-46be-a88e-bf5ad1660d70/thumbnail-hd~v4.jpg);
    background-repeat: no-repeat;
    /* background-position-x: 50%; */
    background-position-y: 46%;
    background-size: contain;
    position: relative;
    display: flex;
    max-width: fit-content;
    background-color: black;
    border-radius: 15px;
}
.default-page-widget-4 .section-device.laptop {    
    background: url(https://1020-ec743525-cb7d-4721-8c0c-5a4146e20f0f.artrela.tv/project/1079-a33765b4-8485-46be-a88e-bf5ad1660d70/thumbnail-hd~v4.jpg);
    background-repeat: no-repeat;
    /* background-position-x: 50%; */
    background-position-y: 46%;
    background-size: contain;
    position: relative;
    display: flex;
    max-width: fit-content;
    background-color: black;
    border-radius: 15px;
}

.default-page-widget-2 .library-types-scroll-button {
    height: 7rem;
    top: 3rem;
}

.items-page .items-page-data {
    margin-left: 0rem;
    margin-top: 0rem;
}
.items-page .items-page-data .recent-date > .name, .recent-date .name.section-button {
    margin-left: 2.25rem;
    margin-left: 4rem;
    margin-left: 3.6rem;
}


.sections-page section button.edit-details i {
    font-size:1rem;
}


.project-widget-media-page.media-layout-2 #media-image {
    display: none !important;
}
#main-screen .project-widget-media-page.media-layout-3 .project-layout-media-page .media-info-container {
    /*margin-bottom: 4rem;*/
}
#main-screen .project-widget-media-page.media-layout-2 .project-layout-media-page .media-info-container {
    padding-left: 0rem;
}
#main-screen .project-widget-media-page .project-layout-media-page .media-info-container {
    padding-left: 0rem;
}
#main-screen .project-widget-media-page.media-layout-3 .project-layout-media-page .media-info-container .media-info {
}

#main-screen .project-widget-media-page.media-layout-2 .project-layout-media-page .media-info-container .media-info {
   /* min-height: 170px;
    padding-top: 2rem;*/
}
.project-widget-media-page.media-layout-2 .project-layout-media-page .media-title {
    font-size: 3.6rem;
}
.project-widget-media-page.media-layout-2 .project-layout-media-page .media-tagline {
    /*font-size: 1.8rem;
    margin-bottom: 1rem;*/
}
.project-widget-media-page.media-layout-3 .project-layout-media-page .media-tagline {
    /*margin-bottom: 1rem;*/
}

.media-layout-grid .library-groups {
    flex-flow: wrap;
    margin-left: 3rem;
    margin-right: 1rem;
    margin-right: 2.5rem;
    margin-right: 3.1rem;
    grid-template-columns: repeat(auto-fill, minmax(312px, 1fr));
    /*grid-template-columns: 312px 1fr max-content minmax(min-content, 1fr);*/
    display: grid;
}
.media-layout-grid .recent-grouping .library-groups .library-group:first-child {
    margin-left:10px;
}

.media-layout-grid .library-group {
    min-width: unset;
    width: unset;
    max-width: unset;
    /*note:the following created extra space below
    aspect-ratio: 313 / 240;*/
}
    .media-layout-grid .library-group .image {
        width: 100% !important;
        height: auto !important;
        min-height: 168px;
    }
.media-layout-grid .library-group img {
    max-width: 100% !important;
    height: auto !important;
    max-height:unset;    
}

.media-layout-grid .recent-date > .recent-grouping > .loader-io {
    min-height: 100px;
}

.mobile-device .app-project-header-ex2-items {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.mobile-device .app-project-header-ex2-items::-webkit-scrollbar {
    width: 1px;
    height: 0px;
    opacity: 0;
    display: none;
}
.mobile-device .library-groups {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.mobile-device .library-groups::-webkit-scrollbar {
    width: 1px;
    height: 0px;
    opacity: 0;
    display: none;
}
.mobile-device .library-types-scroll-button {
    display:none;
}

@media only screen and (max-width: 1900px) {
    .dms-on-demand-selection-container-ex {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .dms-on-demand-selection-subscribe-complete .dms-on-demand-info-container video {
        display:none;
    }
    .dms-on-demand.subscribe-screen .dms-on-demand-selection-subscribe-complete .dms-on-demand-selection-container2 {
        text-align: center;
    }
    .dms-on-demand-selection-subscribe-complete .dms-on-demand-buttons {
        justify-content: center;
    }
    .dms-on-demand-selection-subscribe-complete .dms-on-demand-buttons button {
        margin-left:3px;
        margin-right:3px;
    }
}

@media only screen and (max-width: 1000px) {
    .media-layout-grid .library-groups {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
        grid-template-columns: repeat(auto-fit, minmax(276px, 1fr)) !important;
    }
}

@media only screen and (max-width: 750px) {
    .media-layout-grid .library-groups {
        grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)) !important;
    }
}

@media only screen and (max-width: 650px) {
    .media-layout-grid .library-groups {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
    }
}

@media only screen and (max-width: 550px) {
    .media-layout-grid .library-groups {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    }
}

@media only screen and (max-height: 1000px) {
    .media-layout-grid .library-group .image {
        min-height: 145px;
    }
}

.app-project-header-ex2 {
    display: flex;
    align-items: center;
    overflow: hidden;
    padding-left: 1rem;
    padding-right: .1rem;
    display: none;
    transition: .3s;
    padding-top: .5rem;
    z-index: 7;
    /*  justify-content: center;
    align-items: center;
    width: 100%;*/
    position: relative;
    min-height: fit-content;
    opacity:0;
}
body.is-ready .app-project-header-ex2 {
    opacity: 1;
}
.app-project-header-ex2-items {
    display: flex;
    align-items: center;
    transition:.5s;
    opacity:1;
}
#main-screen.scrolling .app-project-header-ex2-items {
    opacity: 0 !important;
}
.mobile-device .app-project-header-ex2-items {
    overflow-y: hidden;
    overflow-x: auto;
}
.mobile-device .app-project-header-ex2-items {
    overflow-y: hidden;
    overflow-x: auto;
}
.app-project-header-ex2-items > button {
    padding-left: .5rem;
    padding-right: .5rem;
    transition: .3s;
    border: none;
    border-bottom: solid 2px transparent;
    padding-bottom: .25rem;
    margin-right: .25rem;
    padding: .5rem;
    padding-top: .75rem;
   /* padding-bottom: .25rem;*/
    text-transform: uppercase;
    text-shadow: -1px 1px 2px rgb(0 0 0);
}
.no-shadow .app-project-header-ex2-items > button {
    text-shadow: none;
}
.app-project-header-ex2-items > button.hidden {
    display:none;
}



.library-group .container .buttons button.favorite-button {
    display: none;
}

.library-group .container .buttons button.info-button {
    margin-right: 0 !important;
    padding: .5rem;
}
.library-group .container .buttons button.info-button:active {
    color: #FF0062 !important;
    opacity: .8;
    transition: .1s;
}

.library-group .container .buttons button.info-button i {
    font-size: 19px;
   /* position: absolute;
    right: -7px;
    top: 1px;*/
}
/*.library-group .container .buttons {
    top: unset;
    bottom:.5rem;
}*/
/*.library-group .top-ribbon {
    font-family: 'HelveticaNeueLTStd-Bd' !important;
}
.library-group-container .ranking, .top-ten-category .library-groups > .library-group .ranking {
    font-family: 'HelveticaNeueLTStd-Bd' !important;
}
*/
.is-safari:not(.mobile-device) #playerDataUpNext {
    pointer-events: all;
    margin-right: 20px;
    right: 0px;
}
.is-safari:not(.mobile-device) #playerDataClose {
    margin: 0px;
    pointer-events: all;
    margin-left:5px;
}
.is-safari:not(.mobile-device) #playerControls #playlistItems {
    pointer-events: all;
    margin-right: 8px;
}
.is-safari:not(.mobile-device) #playerControls #playlistItems i {
    top: 0px;
}
.is-safari:not(.mobile-device) #playerControls #playerSelectOptions {
    margin-left: 0px;
    pointer-events: all;
}
.is-safari:not(.mobile-device) #playerControls #playerSelectOptions i {
    /*font-size:18px;*/
}
.is-safari:not(.mobile-device) .player-data-header {
    margin-top: 2.5rem;
}
.is-safari:not(.mobile-device) .player-data-summary {
    margin-left: 2.5rem;
}
.is-safari:not(.mobile-device) #playerDataControls {
    top: 61px;
    right: unset;
    left: 0px;
}
.is-safari:not(.mobile-device) #playerControls #player-options-container {
    margin-left: 2px;
    margin-right: 0px;
}
.is-safari:not(.mobile-device) #player-controls-container {
    bottom: 30px;
    left: 8px;
}
.is-safari:not(.mobile-device) #playerControls #player-view-container {
    margin-left: 0;
    margin-right: 5px;
}
.is-safari:not(.mobile-device) #playerSubtitles {
    bottom: 3rem;
}
.is-safari:not(.mobile-device) #player.showing-controls #playerSubtitles {
    bottom: 4rem;
}
.is-safari:not(.mobile-device) #player.showing-controls.has-up-next #playerSubtitles {
    bottom: 5rem;
}


.dms-on-demand.default-screen.center-page-title .project-layout-page-info {
    padding-left: 0;
    padding-right: 0;
}

.dms-on-demand.default-screen .project-header-page-header {
    padding-left: 2rem;
    padding-right: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 5%;
    overflow: hidden;
}
.dms-on-demand.default-screen.center-page-title .project-layout-page-message {
    transition: .2s;
}
.dms-on-demand.default-screen.center-page-title.has-image .project-layout-page-image-container img {
    transition:.2s;
}
.dms-on-demand.default-screen.center-page-title .project-layout-page-data {
    max-width: 100%;
}
.dms-on-demand.default-screen.center-page-title .project-layout-page-title-actions .app-button {
    margin-left:.25rem;
    margin-right:.25rem;
    font-size:1.4rem;
}
.dms-on-demand.default-screen.fullscreen.relative .dms-on-demand-form {
    min-height: 85vh;
    transition: .2s;
}

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

    body:not(.mobile-device) .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title,
    body:not(.mobile-device) .project-layout-page.carousel .project-layout-page-info.hide-image .project-layout-page-title,
    body:not(.mobile-device) .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title {
        font-size: 5.2rem;
    }
}
@media only screen and (max-width: 1800px) {

    body:not(.mobile-device) .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title,
    body:not(.mobile-device) .project-layout-page.carousel .project-layout-page-info.hide-image .project-layout-page-title,
    body:not(.mobile-device) .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title {
        font-size: 4.6rem;
    }
}
@media only screen and (max-width: 1700px) {

    .dms-on-demand.default-screen.center-page-title .project-layout-page-message {

    }
    .dms-on-demand.default-screen.center-page-title.has-image .project-layout-page-image-container img {
       
    }
    .default-page-widget-1 .section-item-title {
        font-size: 2.3rem;
        margin-bottom: .75rem;
    }
    .default-page-widget-1 .section-item-description {
        font-size: 1.15rem;
    }
    .default-page-widget-2 .section-title {
        font-size: 2.3rem;
    }
    .default-page-widget-3 .section-item-title {
        font-size: 1.7rem;
    }
    .footer-links {
        margin-top: 0;
        margin-top: 0rem;
        padding-bottom: 3rem;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 5;
        margin-left: unset;
        margin-right: unset;
    }
    .footer-links > .copyright {
        order: 10;
        margin-top: 1.5rem;
    }
    .footer-links > .link-items { 
        margin-bottom: 1.5rem; 
        flex-wrap: wrap;
        justify-content: center;
        margin-left: 0;
        margin-right: 0;
    }
    .footer-links > .link-items a {
        margin-bottom: .5rem;
       /* margin-left: .5rem;
        margin-right: .5rem;*/
    }
    .footer-links > .link-items-ex { 
        margin-bottom: 1.5rem; 
        flex-wrap: wrap;
        justify-content: center;
        margin-left: 0;
        margin-right: 0;
    }
    .footer-links > .link-items-ex a {
        margin-bottom: .5rem;
       /* margin-left: .5rem;
        margin-right: .5rem;*/
    }
    body.dark-mode .footer-links .app-button {
      /*  font-size: 1rem;*/
        /*padding: 10px 30px;*/
    }
    #playerSubtitlesDelay,
    #playerSubtitlesInfo {
        font-size: 46px;
    }
}
@media only screen and (max-width: 1600px) {
    .dms-on-demand.default-screen.center-page-title.has-image .project-layout-page-image-container img {
       
    }
    #playerSubtitlesDelay,
    #playerSubtitlesInfo {
        font-size: 44px;
    }
}
@media only screen and (max-width: 1500px) {
    .dms-on-demand.default-screen.center-page-title.has-image .project-layout-page-image-container img {
        max-width: 50rem;
    }
    .dms-on-demand.default-screen.center-page-title .project-layout-page-message {
        font-size: 2.4rem;
    }
    .dms-on-demand.default-screen.center-page-title .project-layout-page-title-actions {
        padding-top: 1rem;
    }
    .default-page-widget-1 .section-item-title {
        font-size: 2.1rem;
        margin-bottom: .5rem;
    }
    .default-page-widget-1 .section-item-description {
        font-size: 1.1rem;
    }
    .default-page-widget-2 .section-title {
        font-size: 2.1rem;
    }
    #playerSubtitlesDelay,
    #playerSubtitlesInfo {
        font-size: 42px;
    }
    #player.showing-controls #playerSubtitles {
        bottom: 145px;
    }
    body:not(.mobile-device) .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title,
    body:not(.mobile-device) .project-layout-page.carousel .project-layout-page-info.hide-image .project-layout-page-title,
    body:not(.mobile-device) .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title {
        max-width: 80vw;
        font-size: 4.6rem;
    }
    body:not(.mobile-device) #main-screen .project-layout-page.carousel .project-layout-page-info .project-layout-page-message-info {
        font-size: 1.8rem;
        max-height: 190px;
    }
}
@media only screen and (max-width: 1400px) {
    .dms-on-demand.default-screen.center-page-title.has-image .project-layout-page-image-container img {     

    }

    #main-screen .app-project-header > button {
        height: 70%;
        font-size: 1rem;
       /* padding-left: 1rem;
        padding-right: 1rem;*/
    }
    .default-page-widget-1 .section-item-title {
        font-size: 2rem;
        margin-bottom: .5rem;
    }
    .default-page-widget-1 .section-item-description {
        font-size: 1.05rem;
    }
    .default-page-widget-2 .section-title {
        font-size: 2rem;
    }
    #playerSubtitlesDelay,
    #playerSubtitlesInfo {
        font-size: 40px;
    }
}
@media only screen and (max-width: 1300px) {
    .dms-on-demand.default-screen.fullscreen.relative .dms-on-demand-form {
        min-height: 83vh;
    }
    .default-page-widget-1 .section-item-title {
        font-size: 1.7rem;
        margin-bottom: .5rem;
    }
    .default-page-widget-1 .section-item-description {

    }
    .default-page-widget-2 .section-title {
        font-size: 1.7rem;
    }
    #playerSubtitlesDelay,
    #playerSubtitlesInfo {
        font-size: 38px;
    }
}
@media only screen and (max-width: 1200px) {

    .project-layout-media-page .media-title {
        max-width: 80%;
        font-size: 5.2rem;
    }
    .project-layout-media-page .media-tagline {
        max-width: 80%;
    }

    .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title,
    .project-layout-page.carousel .project-layout-page-info.hide-image .project-layout-page-title,
    .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title,
    .project-layout-media-page .media-title {
        max-width: 80%;
        font-size: 5.2rem;
    }
    .dms-on-demand.default-screen.center-page-title.has-image .project-layout-page-image-container img {
        max-width: 47rem;
    }

    .dms-on-demand.default-screen.center-page-title .project-layout-page-message,
    .project-layout-media-page .media-tagline {
        font-size: 2.2rem;
    }
    .default-page-widget-1 .section {
        max-width: unset;
    }
    .default-page-widget-1 .section-item {
        padding: .5rem 1rem;
        max-width: 30vw;
    }
    .default-page-widget-1 .section-item-title {
        font-size: 1.4rem;
        margin-bottom: .5rem;
    }
    .default-page-widget-1 .section-item-description {
        font-size: 1rem;
    }

    .default-page-widget-2 {
        padding-left: 0rem;
        padding-right: 0rem;
    }
    .default-page-widget-2 .section {
        max-width: 100%;
        margin-left: .5rem;
        margin-left: 0rem;
        /*width: 100vw;*/
        max-width: unset;
    }
    .default-page-widget-2 .section-title {
        font-size: 1.6rem; 
       /* position: relative;
        left: .25rem;
        margin-left: .25rem; */
        width: 100%;
        text-align: center;
        font-weight: bold;
        position: relative;
        left: 0rem;
        margin-bottom: .25rem;
    }
    .default-page-widget-2 .section-button {
        padding-right: 0rem;
        margin-top: .5rem;
    }
    /*.default-page-widget-2 .app-button {
        padding: 10px 30px;
        font-size: 1rem;
        position: relative;
        left: 0rem;
    }*/
    .default-page-widget-2 .library-group {
        width: 312px;
        min-width: 312px;
        min-height: 240px;
        margin-bottom:0px;
    }
    .default-page-widget-2 .library-group img {
        max-width: 312px;
        max-height: 312px;
    }
    body.widescreen-artwork .default-page-widget-2 .library-group .image {
        width: 312px;
        height: 175px;
    }

    .default-page-widget-2 .recent-grouping .library-group:last-of-type {
        margin-right: 1rem !important;
    }

    .default-page-widget-2 .recent-grouping .library-group:first-of-type {
        margin-left: 1rem !important;
    }
    .default-page-widget-3 {
        padding-left: 0;
        padding-right: 0;
        z-index: 15;
    }
    .default-page-widget-3 .section {
        max-width: 100vw;  
        margin: unset;     
    }
    .default-page-widget-3 .section-item {
        /*min-height: unset;*/
        min-height: 12rem;
    }
    .default-page-widget-3 .section-item-title {    
        font-size: 1.4rem;
    }
    .default-page-widget-3 .section-item-button {      

    }
    body.dark-mode .default-page-widget-3 .app-button {
        /*padding: 10px 25px;
        font-size: 1rem;*/
        margin-right: 0;
    }

    body.dark-mode .default-page-widget-3 .app-button {
        /*padding: 10px 25px;
        font-size: 1rem;*/
    }

    .default-page-widget-3 .section-item-title {
        margin-left: 2rem;
    }
    .default-page-widget-3 .section-item-button {
        margin-right: 3rem;
    }
    #playerSubtitlesDelay,
    #playerSubtitlesInfo {
        font-size: 36px;
    }
}
@media only screen and (max-width: 1100px) {

    body:not(.mobile-device) .search-grouping {
        margin-left: .75rem;
    }

    body.widescreen-artwork .recent-date.display-round-image .library-group {
        width: 175px;
        min-width: 175px;
    }
    body.widescreen-artwork .recent-date.display-round-image .library-group .image {
        width: 175px;
        height: 175px;
    }
    .recent-date.display-round-image .library-group img {
        max-width: 175px;
        max-height: 175px;
    }
    #main-screen .tab-page.has-categories #recent-dates .recent-date.display-round-image {
        max-height: 270px;
        min-height: unset;
    }
    #main-screen .recent-date.display-round-image .recent-grouping {
        min-height: 270px;
    }

    .project-layout-media-page .media-title {
        max-width: 80%;

    }
    .project-layout-media-page .media-tagline {

    }

    .topscreen-quickaccess #main-screen .section-quickaccess .carousel-indicators {
      /*  bottom: 12%;*/
    }
    .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title,
    .project-layout-page.carousel .project-layout-page-info.hide-image .project-layout-page-title,
    .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title,
    .project-layout-media-page .media-title {
        max-width: 80%;
    }
    .dms-on-demand.default-screen.center-page-title.has-image .project-layout-page-image-container img {

    }
    .header > button:not(#button-options) {
        display: none;
    }
    .app-project-header {
        padding-right: 0rem;
        padding-right: 0rem;
        padding-left: .7rem;
    }
    .app-project-header-ex2 {
        display: flex;
        transition: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        padding-left: 1rem;
        padding-right: 1rem;
        justify-content: center;
        width: 100vw;
        width: 100vw;
    }
    .app-project-header-ex2-items > button {
        margin-left: .75rem;
        margin-right: .75rem;
        font-size: 1.1rem;
    }
    #main-screen:not(.home, .media, .related, .brand, .category, .event) .body .tab-page {
        margin-top: 3.5rem;
    }
    /*#main-screen.home .project-quick-access.full-info .project-layout-page-data {*/
        /* max-width: 60rem; */
        /*display: none;
    }*/
    #main-screen.media .app-project-header-ex2,
    #main-screen.brand .app-project-header-ex2,
    #main-screen.related .app-project-header-ex2,
    #main-screen.category .app-project-header-ex2 {
        position: absolute;
        left: 0;
        right: 0;
        top: 4.15rem;
    }
    body.topscreen-quickaccess.has-quickaccess .app-project-header-ex2,
    body.fullscreen-quickaccess.has-quickaccess .app-project-header-ex2,
    body.fullscreen-quickaccess.has-quickaccess #main-screen.media .app-project-header-ex2,
    body.fullscreen-quickaccess.has-quickaccess #main-screen.brand .app-project-header-ex2,
    body.fullscreen-quickaccess.has-quickaccess #main-screen.related .app-project-header-ex2,
    body.fullscreen-quickaccess.has-quickaccess #main-screen.category .app-project-header-ex2 {
        position: absolute;
        left: 0;
        right: 0;
        top: 5.5rem;
        top: 66px;
    }
    .app-project-header-ex2 > button {
        font-size: 15px;
    }
    .items-page .items-page-data .recent-date > .name, .recent-date .name.section-button {
        margin-left: 1.5rem;
    }
    .recent-grouping:not(.regular-margin) .library-groups .library-group:first-child {
        margin-left: 1.5rem;
    }
    .recent-grouping .library-group {
        margin-top: .5rem;
 }

    .recent-date > .name, .recent-date .name.section-button {
        font-size:1.6rem;
    }
    .recent-date .name.section-button .name-container-label .name-explore-all {
        font-size:1.1rem;
        top: -1px;
    }
    .sections-tab {
        width: 12rem;
    }

    body .media-details-ex {
        width: 32rem;
    }
    body .media-details-ex .media-details-title {
        font-size: 1.8rem;
        padding-bottom: .25rem;
         /*line-height: 2.2rem; */
    }
    body .media-details-ex .media-tagline {
        font-size: 1.1rem;
    }
    body .media-details-ex .media-tags {
        font-size: .9rem;
    }
    body .media-details-ex .media-details-header .close-button {
        font-size: 1.5rem;
    }
    
    #player .media-details {
        width: 32rem;
    }
    #player .media-details .media-details-title {
        font-size: 1.8rem;
        padding-bottom: .25rem;
         /*line-height: 2.2rem; */
    }
    #player .media-details .media-tagline {
        font-size: 1.1rem;
    }
    #player .media-details .media-tags {
        font-size: .9rem;
    }
    #player .media-details .media-details-header .close-button {
        font-size: 1.5rem;
    }
    #playerSubtitlesDelay,
    #playerSubtitlesInfo {
        font-size: 34px;
    }
    #main-screen .header .dms-on-demand-form-close.show {
        opacity: 1;
        pointer-events: all;
        margin-right: .75rem;
        margin-left: .75rem;
        font-size: 1.3rem;
        top: -1px;
    }
    .app-project-header #button-options {
        /*font-size: 1.6rem;*/
    }
    .project-layout-page.carousel .project-layout-page-info {

        padding-bottom: 11rem;
    }
    body:not(.mobile-device) .project-layout-page.carousel .project-layout-page-info {
        padding-bottom: 12rem;
    }
    .project-quick-access.full-info .project-layout-page-data {
        padding-left: 3rem;
        padding-bottom: 1rem;
    }

    
    .search-container {
        flex-direction: column;
    }

    #search-keys {
        width: 100vw;
        height: unset;
        min-height: unset;
        flex-direction: row;
        max-width: 32rem;
        justify-content: center;
        align-items: center;
        margin: auto;
    }

    .no-shadow #search-keys {
        box-shadow: none;
    }

    #search-keys .input-container {
        background-color: rgba(0, 0, 0, .3);
        border-radius: 6px;
        border: solid 1px black;
        margin-top: 1rem;
        padding: 0;
        flex: 1;
        margin-left: .5rem;
        margin-right: .5rem;
        border-color: rgba(100, 100, 100, .3);
        margin-bottom: .25rem;
        margin-top: 1rem;
        margin-left: 1rem;
        margin-right: 1rem;
    }

    #search-keys input {
        padding: .5rem .25rem;
        border-bottom: none;
        width: 100%;
    }

        #search-keys input::placeholder {
            color: whitesmoke;
            opacity: .7;
        }

    #search-keys .input-keys-toggle-keyboard {
        display: none;
    }

    #search-keys .input-keys-container {
        display: none;
    }

    #search-keys .input-searches-container {
        display: none;
    }

    body:not(.mobile-device) #search-screen .library-groups-no-items {
        /*bottom: unset;*/
        padding: .5rem 0;
    }
    body.mobile-device #search-screen .library-groups-no-items {
        bottom: unset;
        padding: .5rem 0;
    }


        #search-screen .library-groups-no-items > div {
            font-size: 1.1rem;
        }

    #search-screen .search-section > div.name {
        padding: .75rem .5rem;
        font-size: 1.4rem;
        padding-bottom: 0rem;
        padding-left:.8rem;
    }

    #search-screen .search-grouping {
        min-height: unset;
    }

    #search-screen .library-groups {
        margin-left: .5rem;
        margin-right: .5rem;
    }

    #search-screen .loader-container {
        z-index: 5;
        position: fixed;
    }

    #search-keys .input-search-icon {
        font-size: 1rem;
        display: block;
    }

        #search-keys .input-search-icon i {
            position: relative;
            top: 1px;
        }

    #search-keys .input-clear-icon {
        font-size: 1rem;
        display: block;
    }

    .media-layout-grid .library-groups {
        margin-left: 1rem;
        margin-right: 1rem;
    }
    .media-layout-grid .recent-grouping .library-groups .library-group:first-child {
        margin-left: 10px;
    }

   /* .media-layout-grid .media-tabs {
        margin-left: .1rem;
        margin-right: .7rem;
    }*/
    #main-screen .project-layout-media-page .project-header-page-header {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    #main-screen .project-layout-media-page .project-quick-access.full-info .project-layout-page-info {
        margin-right: 0rem;
    }
    .media-layout-grid .media-tabs {
        margin-left: .1rem;
        margin-right: .1rem;
        margin-left: 2rem;
        margin-right: 2rem;
        margin-bottom: .75rem;
    }
    .project-widget-media-page .project-layout-media-page .media-title {
        font-size: 2rem;
    }
    .project-widget-media-page #media-image {
        width: 225px;
        min-width: 225px;
        height: 225px;
        min-height: 225px;
    }
    .project-widget-media-page .project-layout-media-page .media-tagline {
        font-size: 1.2rem;
    }
    body.reduce-font-size #main-screen .app-project-header img {
        max-height: 36px;
    }
    .recent-grouping .library-groups {
        padding-top: 0px;
    }

    .project-layout-media-page .media-tagline {
        max-width: 70%;
    }
}

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

    /*#playerSubtitlesDelay {
        font-size: 46px;
    }*/
    .dms-on-demand.default-screen.fullscreen.relative .dms-on-demand-form {
        min-height: 80vh;
    }

    #player.showing-controls #playerSubtitles {
        bottom: 140px;
    }
}

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

    .project-layout-page.carousel .project-layout-page-info {
        padding-bottom: 12rem;
    }
    .project-layout-page-info {
        padding-top: 1rem;
    }
    .project-widget-media-page .project-layout-media-page .media-tagline {
    }
    .project-widget-media-page .project-layout-media-page .media-title {
        margin-top: .5rem;
    }
    .project-widget-media-page #media-image {
        width: 180px;
        min-width: 180px;
        height: 180px;
        min-height: 180px;
    }
    .project-widget-media-page .project-layout-media-page .media-tagline {
        text-align: center;
        margin-bottom: 1rem;
        margin-bottom: 1.75rem;
    }
    .media-layout-grid .media-tabs button {
        font-size: 1.2rem;
    }
    .media-layout-grid .library-group .image {
        min-height: 140px;
    }
    #main-screen .project-widget-media-page .project-layout-media-page .media-info-container .media-info {
        align-items: center;
        margin-top:1rem;
    }

    #main-screen .project-widget-media-page.media-layout-3 .project-layout-media-page .media-info-container {
        display: flex;
        flex-direction: column;
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 2.5rem;
    }

    .project-widget-media-page #media-image {
        margin-right: 0;
    }
    .project-widget-media-page.media-layout-3 .project-layout-media-page .media-buttons {
        flex-direction: column;
    }
    .project-widget-media-page.media-layout-3 .project-layout-media-page .media-buttons button {
        margin-right: 0rem;
        margin-left: 0rem;
    }
    .project-widget-media-page.media-layout-3 .project-layout-media-page .media-links {
        margin-left: 0;
        margin-right: 0;
        justify-content: center;
        margin-top: 1rem;
    }
    .project-widget-media-page.media-layout-3 .project-layout-media-page .media-buttons .media-links button {
        margin-right: 1.5rem;
        margin-left: 1.5rem;
    }
    .project-widget-media-page.media-layout-3 .project-layout-media-page .media-links .button-container.padding-right {
        padding-right: 0rem;
    }

    .project-layout-media-page .media-title {
        font-size: 3.6rem;
    }
    .project-layout-media-page .media-tagline {
        font-size: 1.6rem;
        max-width: 80%;
    }
    .project-layout-media-page .media-tags {
        margin-bottom: 1rem;
    }

    .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title,
    .project-layout-page.carousel .project-layout-page-info.hide-image .project-layout-page-title,
    .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title,
    .project-layout-media-page .media-title {
        font-size: 3.6rem;
    }

    #main-screen .project-layout-page.carousel .project-layout-page-info .project-layout-page-message-info,
    .project-layout-media-page .media-tagline {
        font-size: 1.6rem;
    }

    #main-screen .project-layout-page.carousel .project-layout-page-info .project-layout-page-message,
    .project-layout-media-page .media-tagline {
        max-width: 80%;
    }

    body:not(.mobile-device) .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title,
    body:not(.mobile-device) .project-layout-page.carousel .project-layout-page-info.hide-image .project-layout-page-title,
    body:not(.mobile-device) .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title {
        max-width: 80vw;
        font-size: 3.6rem;
    }

    body:not(.mobile-device) #main-screen .project-layout-page.carousel .project-layout-page-info .project-layout-page-message-info {
        font-size: 1.6rem;
        max-height: 190px;
    }

    #main-screen .project-layout-page.carousel .project-layout-page-info .project-layout-page-message-info {
        margin-top: 1rem;
        margin-bottom: 0;
    }

    .dms-on-demand.default-screen.center-page-title .project-layout-page-title-actions {
        flex-direction:column;
    }

    .dms-on-demand.default-screen.center-page-title .project-layout-page-title-actions {
        flex-direction: column;
    }
    .dms-on-demand.default-screen.center-page-title .project-layout-page-title-actions .app-button {
        min-width: 15rem;
        justify-content: center;
        margin-bottom: .5rem;
    }

    body.dark-mode input:not(.w-button, .w-input, .form-check-input), body.dark-mode .app-form-field-input-proxy {
        font-size: 1.1rem;
    }
    select:not(.pika-select) {
        font-size: 1rem;
    }
    .sections-tabs button {
        font-size: 1rem;
        padding: 1rem 1rem;
    }
    .sections-page .section-header,
    .page-support-contact-title,
    .page-subscription-cancel-title,
    .page-details-update-title,
    .page-email-update-title,
    .page-password-update-title {
        font-size: 1.3rem;
    }
    .page-subscription-cancel-message,
    .page-details-update-message,
    .page-email-update-message,
    .page-password-update-message,
    .page-support-contact-message {
        font-size: 1.1rem;
    }
    .sections-page .section-row {
        font-size: 1.1rem;
        padding-top: .5rem;
    }
    .sections-page section button {
        font-size: 1rem;
    }
    .sections-page .section-options {
        padding-top: .75rem;
    }

    .dms-on-demand-form .dms-on-demand-selection-form {
        max-width: 50rem;
    }
    .dms-on-demand.default-screen.center-page-title.has-image .project-layout-page-image-container img {
        max-width: 44rem;
    }

    .dms-on-demand.default-screen.center-page-title .project-layout-page-message {
        font-size: 2rem;
    }
    .default-page-widget-3 .section-item-title {
        font-size: 1.4rem;
    }
    .app-project-header-ex2 {
        padding-left: .5rem;
        padding-right: .5rem;
        padding-top: 0rem;
    }
    .app-project-header-ex2-items > button {
        font-size: 1rem;
        margin-left: .5rem;
        margin-right: .5rem;
    }
    .recent-date > .name, .recent-date .name.section-button {
        font-size: 1.5rem;
    }
    .recent-date .name.section-button .name-container-label .name-explore-all {
        font-size:1.0rem;
        top: -1px;
    }


    /*.mobile-device #playerDataSummary1,
    .mobile-device #playerDataSummary2,
    .mobile-device #playerDataSummary3,
    .mobile-device #playerDataSummary4,
    .mobile-device #playerDataSummary5 {
        text-shadow: none;
    }*/

    .mobile-device.is-safari #playerDataUpNext {
        pointer-events: all;
    }
    .mobile-device.is-safari #playerDataClose {
        margin: 0px;
        pointer-events:all;
    }
    .mobile-device.is-safari #playerControls #playlistItems {
        font-size: 18px;
        pointer-events: all;
    }
    .mobile-device.is-safari #playerControls #playlistItems i {
        top: 0px;
    }
    .mobile-device.is-safari #playerControls #playerSelectOptions {
        margin-left: 0px;
        pointer-events: all;
    }
    .mobile-device.is-safari #playerControls #playerSelectOptions i {
        font-size:18px;
    }
    .mobile-device.is-safari .player-data-header {
        margin-top: 2.5rem;
    }
    .mobile-device.is-safari .player-data-summary {
        margin-left: 3rem;
    }
    .mobile-device.is-safari #playerDataControls {
        top: 3rem;
        right: unset;
        left: -3px;
    }
    .mobile-device.is-safari #playerControls #player-options-container {
        margin-left: 2px;
        margin-right: 0px;
    }
    .mobile-device.is-safari #player-controls-container {
        bottom: 21px;
    }
    .mobile-device.is-safari #playerControls #player-view-container {
        margin-left: 0;
        margin-right: 5px;
    }
    #playerSubtitlesDelay,
    #playerSubtitlesInfo {
        font-size: 32px;
    }
}

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

    .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title,
    .project-layout-page.carousel .project-layout-page-info.hide-image .project-layout-page-title,
    .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title,
    .project-layout-media-page .media-title {
        font-size: 4.6rem;
        line-height: 1.2;
        max-height: 300px;
       /* padding-top: 0px;*/
        /*display: -webkit-box;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;*/
    }
/*
    #main-screen .project-layout-page.carousel .project-layout-page-info .project-layout-page-message,
    .project-layout-media-page .media-tagline {
        max-width: 80%;
    }
*/
    #main-screen .project-layout-page.carousel .project-layout-page-info .project-layout-page-message-info {
        margin-top: 1rem;
        margin-bottom: 0;
    }

    #playerSubtitlesDelay {
        font-size: 44px;
        top: 7.5rem;
    }

    #playerSubtitlesInfo {
        font-size: 44px;
    }

    #player.showing-controls #playerSubtitles {
        bottom: 135px;
    }
}

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

    body.reduce-font-size #main-screen .app-project-header img {
        max-height: 32px;
    }
    #main-screen .app-project-header > button.logo {
        padding-top: 0px;
    }
    .header-options {
        top: -3px;
    }
    .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title,
    .project-layout-page.carousel .project-layout-page-info.hide-image .project-layout-page-title,
    .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title,
    .project-layout-media-page .media-title {
        font-size: 3.6rem;
    }

    #main-screen .project-layout-page.carousel .project-layout-page-info .project-layout-page-message-info,
    .project-layout-media-page .media-tagline {
        font-size: 1.6rem;
    }

    .project-layout-page.carousel .media-buttons {
        margin-top: 1rem;
    }

    .project-layout-page.carousel .media-tags {
        font-size: 1rem;
    }

    .sections-page .section-options {
        display: flex;
        flex-direction: column;
    }
    .sections-page section .section-options button {
        max-width: 15rem;
        justify-content: center;
    }

    .dms-on-demand.default-screen.center-page-title.has-image .project-layout-page-image-container img {
        max-width: 40rem;
    }

    .dms-on-demand.default-screen.center-page-title .project-layout-page-message {
        font-size: 1.8rem;
    }
    
    .default-page-widget-1 {
        padding: 0rem;
    }
    .default-page-widget-1 .section {
        margin-left: .5rem;
        margin-right: .5rem;
        margin-left: 0;
        margin-right: 0;
        max-width: 100%;
        flex-direction: column;
        margin-top: -1rem;
        align-items: center;
        max-width: 100vw;
        /*width: 100vw;*/
    }
    .default-page-widget-1 .section-item,
    .default-page-widget-1 .section-item:first-of-type,
    .default-page-widget-1 .section-item:last-of-type {
        padding: .5rem;
        max-width: unset;
        padding-bottom: 1rem;
        max-width: 70%;
        padding-bottom: 2rem;
    }

    .default-page-widget-1 .section-item-title {
        font-size: 1.7rem;
        margin-bottom: .5rem;
        text-align: center;
    }

    .default-page-widget-1 .section-item-description {
        font-size: 1.05rem;
        text-align: center;
    }

    .default-page-widget-2 {
        padding: 0rem;
        /* padding-top: 1rem; */
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    #playerControls #volume-bar-container {
        display:none;
    }
    body:not(.is-safari) #player #playerControls .share-button {
        display:none;
    }
    #playerSubtitlesDelay,
    #playerSubtitlesInfo {
        font-size: 30px;
    }
}

@media only screen and (max-height: 900px) {
    .project-layout-media-page .media-buttons {
        margin-bottom: 2rem;
    }
    .project-layout-media-page .media-tags {
        margin-bottom: .5rem;
    }

    .project-layout-media-page .media-tagline {
        margin-bottom: 1.75rem;
    }

    .project-layout-page.carousel .project-layout-page-info {
        padding-bottom: 12rem;
    }
    .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title,
    .project-layout-page.carousel .project-layout-page-info.hide-image .project-layout-page-title,
    .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title,
    .project-layout-media-page .media-title {
        font-size: 3.2rem;
    }

    #main-screen .project-layout-page.carousel .project-layout-page-info .project-layout-page-message-info,
    .project-layout-media-page .media-tagline {
        font-size: 1.6rem;
    }

    #main-screen .app-project-header > button {
        font-size: .9rem;
     /*   padding:10px 30px;*/
    }
    .project-layout-page.carousel .media-buttons {
        margin-top: 1rem;
        /*margin-bottom:1rem;*/
    }

    .project-layout-page.carousel .media-tags {
        font-size: 1rem;
    }


    .default-page-widget-1,
    .default-page-widget-2 {
        padding-bottom: 2rem;
    }

    /*.footer-links {
        margin-top: 2rem;
    }
*/

    #playerSubtitlesDelay {
        font-size: 40px;
        top: 7rem;
    }

    #playerSubtitlesInfo {
        font-size: 40px;
    }

    #player.showing-controls #playerSubtitles {
        bottom: 130px;
    }
}

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

    body:not(.mobile-device) .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title,
    body:not(.mobile-device) .project-layout-page.carousel .project-layout-page-info.hide-image .project-layout-page-title,
    body:not(.mobile-device) .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title {
        font-size: 3.6rem;
    }
}

@media only screen and (max-height: 850px) and (max-width: 1100px) {

    body:not(.mobile-device) .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title,
    body:not(.mobile-device) .project-layout-page.carousel .project-layout-page-info.hide-image .project-layout-page-title,
    body:not(.mobile-device) .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title {
        font-size: 2.1rem;
    }
}

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

    .project-quick-access .live-banner-ex {
        flex-direction: column;
        align-items: center;
    }
    .project-quick-access .live-banner-ex .bottom-banner {
        font-size: 2rem;
    }
    .project-quick-access .live-banner-ex .bottom-banner .bottom-banner-text-1 {
        text-align: center;
    }
    .project-quick-access .live-banner-ex .live-countdown {
        margin-left: 1rem;
    }
    .media-layout-grid .library-group.is-live .bottom-banner .bottom-banner-text-1:before {
        width: 8px;
        height: 8px;
        margin-right: 4px;
    }

    body:not(.mobile-device) .project-layout-page.carousel .media-links .button-container:hover button label,
    body:not(.mobile-device) .project-layout-page.carousel .media-links button:hover label,
    body:not(.mobile-device) .project-layout-page.carousel .media-links button:focus label,
    body:not(.mobile-device) .project-layout-page.carousel .media-links button.focused label,
    body:not(.mobile-device) .project-layout-page.carousel .media-links button:active label {
        display: none !important;
    }
    body:not(.mobile-device) .project-layout-page.carousel .media-links .button-container:hover button,
    body:not(.mobile-device) .project-layout-page.carousel .media-links button:hover,
    body:not(.mobile-device) .project-layout-page.carousel .media-links button:focus,
    body:not(.mobile-device) .project-layout-page.carousel .media-links button.focused {
        padding: .5rem;
        opacity: 1;
    }

    body:not(.mobile-device) .project-layout-media-page .media-links .button-container:hover button label,
    body:not(.mobile-device) .project-layout-media-page .media-links button:hover label,
    body:not(.mobile-device) .project-layout-media-page .media-links button:focus label,
    body:not(.mobile-device) .project-layout-media-page .media-links button.focused label,
    body:not(.mobile-device) .project-layout-media-page .media-links button:active label {
        display: none !important;
    }
    body:not(.mobile-device) .project-layout-media-page .media-links .button-container:hover button,
    body:not(.mobile-device) .project-layout-media-page .media-links button:hover,
    body:not(.mobile-device) .project-layout-media-page .media-links button:focus,
    body:not(.mobile-device) .project-layout-media-page .media-links button.focused,
    body:not(.mobile-device) .project-layout-media-page .media-links button:active {
        padding: .5rem;
        opacity: 1;
    }

    .sections-tab {
        width: 12.5rem;
    }
    #search-screen .search-section > div.name {
        font-size: 1.4rem;
        padding-left: .8rem;
    }

    .project-layout-media-page .media-tagline {
        max-width: 80%;
    }
    #options-screen .sections-tabs button {
        padding: .5rem 1rem;
        margin-bottom: .5rem;
        margin-top: .5rem;
    }

    .sections-page .section-header,
    .page-support-contact-title,
    .page-subscription-cancel-title,
    .page-details-update-title,
    .page-email-update-title,
    .page-password-update-title {
        font-size: 1.2rem;
    }
    .page-subscription-cancel-message, .page-details-update-message, .page-email-update-message, .page-password-update-message, .page-support-contact-message {
        font-size: 1rem;
    }
    .sections-page .account-message {
        font-size: 1rem;
    }
    .sections-page .section-row {
        font-size: 1rem;
        padding-top: .35rem;
    }
    .sections-page .subscription-message {
        font-size: 1rem;
    }
    /*.page-subscription-cancel-message,
    .page-details-update-message,
    .page-email-update-message,
    .page-password-update-message,
    .page-support-contact-message {
        font-size: .9rem;
    }*/
/*
    .sections-page .section-row {
        font-size: .9rem;
        padding-top: .25rem;
    }
*/
    /*.sections-page section button {
        font-size: .9rem;
    }*/

    .header img {
        top:-3px;
    }
    .project-layout-page.carousel .project-layout-page-info {
        padding-left: 1rem;
        padding-right: 1rem;
        justify-content: center;
        max-width: 100vw;
    }
    .topscreen-quickaccess #main-screen .section-quickaccess .carousel-indicators {
        max-width: 100vw;
        width:100%;
    }
    .dms-on-demand-actions .dms-on-demand-form-close {
        font-size: 1.4rem;
        margin-right: 25px;
        top: -5px;
        position: relative;
    }
    .app-project-header > button.logo {
        padding-bottom: 0;
        padding-top: .2rem;
        top: 0px;
        padding-top: 0px;
        padding-left: 0px;
        height: 70%;
        font-size: 1rem;
    }
    .app-project-header #button-options {
        font-size: 1.5rem;
        padding-top:.25rem;
    }
    #main-screen .header .dms-on-demand-form-close.show {
        font-size: 1.1rem;
        position: relative;
        /* top: 1px;*/ 
        margin-right: .5rem;
        margin-left: .25rem;
        top:0px;
    }

    .dms-on-demand.default-screen.center-page-title.has-image .project-layout-page-image-container img {
        max-width: 36rem;
    }

    .dms-on-demand.default-screen.center-page-title .project-layout-page-message {
        font-size: 1.75rem;
    }


    .project-quick-access.full-info .project-layout-page-data {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }

    .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title,
    .project-layout-page.carousel .project-layout-page-info.hide-image .project-layout-page-title,
    .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title,
    .project-layout-media-page .media-title  {
        max-width: 100%;
        text-align: center;
        margin-left: 0;
    }

    #main-screen .project-layout-page.carousel .project-layout-page-info .project-layout-page-message,
    .project-layout-media-page .media-tagline {
        max-width: 80%;
        max-width: 100%;
        text-align: center;
    }

    .project-layout-media-page .media-tags {
        justify-content: center;
        margin-left: 0px;
        margin-bottom: 1rem;
        margin-bottom: 0rem;
        flex-wrap: wrap;
    }

    .project-layout-media-page .media-tags .media-tag{
        margin-right: 1.5rem;
        margin-left: 1.5rem;
        margin-bottom: 1.5rem;
        font-size:1rem;
    }

    .project-layout-page.carousel .media-buttons,
    .project-layout-media-page .media-buttons {
        flex-direction: column;
        align-items: center;
    }
    .project-layout-page.carousel .media-buttons button,
    .project-layout-media-page .media-buttons button {
        margin-right: 0rem;
        margin-bottom: 1rem;
    }

    .project-layout-media-page .media-buttons {
        margin-bottom: 1rem;
        margin-top: .5rem;
    }
    /*.project-layout-media-page .media-tagline {
       font-size:1.2rem;
    }
    .project-layout-media-page .media-title {
        font-size: 3rem;
    }*/


    .project-layout-page.carousel .media-links,
    .project-layout-media-page .media-links {
        margin-left: 0rem;
        margin-top: 1rem;
    }

    .project-layout-page.carousel .media-links .button-container.padding-right,
    .project-layout-media-page .media-links .button-container.padding-right {
        padding-right: 0rem;
    }

    .project-layout-page.carousel .media-links button,
    .project-layout-media-page .media-links button {
        margin-right: 2rem;
        margin-left: 2rem;
        margin-right: 1.5rem;
        margin-left: 1.5rem;
    }

    .project-layout-page.carousel .media-links .button-container:hover button,
    .project-layout-page.carousel .media-links button:hover,
    .project-layout-page.carousel .media-links button:focus,
    .project-layout-page.carousel .media-links button.focused {
        padding: .5rem;
        border: none !important;
        background: transparent !important;
    }
    
    .project-layout-media-page .media-links .button-container:hover button,
    .project-layout-media-page .media-links button:hover,
    .project-layout-media-page .media-links button:focus,
    .project-layout-media-page .media-links button.focused {
        padding: .5rem;
        border: none !important;
        background: transparent !important;
    }

    .project-layout-page.carousel .media-links .button-container:hover button label,
    .project-layout-page.carousel .media-links button:hover label,
    .project-layout-page.carousel .media-links button:focus label,
    .project-layout-page.carousel .media-links button.focused label,
    .project-layout-page.carousel .media-links button:active label {
        display: none;
    }
    
    .project-layout-media-page .media-links .button-container:hover button label,
    .project-layout-media-page .media-links button:hover label,
    .project-layout-media-page .media-links button:focus label,
    .project-layout-media-page .media-links button.focused label,
    .project-layout-media-page .media-links button:active label {
        display: none;
    }

    body.fadein-quickaccess #main-screen .project-layout-page-background-image-container {
        background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)) !important;
        background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 60%) !important;
        background: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, .1) 60%) !important;
       /* background: linear-gradient(to left, rgba(0, 0, 0, .3), rgba(0, 0, 0, .5)) !important;*/
    }

    body.mobile-device #main-screen.home .header #button-options,
    body.mobile-device #main-screen.media .header #button-options,
    body.mobile-device #main-screen.brand .header #button-options,
    body.mobile-device #main-screen.related .header #button-options,
    body.mobile-device #main-screen.category .header #button-options {
    /* margin-right: .5rem;*/
    }

    body:not(.mobile-device) #main-screen.home .header #button-options,
    body:not(.mobile-device) #main-screen.media .header #button-options,
    body:not(.mobile-device) #main-screen.brand .header #button-options,
    body:not(.mobile-device) #main-screen.related .header #button-options,
    body:not(.mobile-device) #main-screen.category .header #button-options {
    /* margin-right: 1.5rem;*/
    }




    .dms-on-demand.default-screen.fullscreen.relative .dms-on-demand-form {
        min-height: 82vh;
    }
    .default-page-widget-3 .section-item-title {
        font-size: 1.4rem;
    }
    .default-page-widget-3 .section-item-title {
        margin-left: 1rem;
    }

    .default-page-widget-3 .section-item-button {
        margin-right: 1rem;
    }

    .app-project-header-ex2 {
        padding-left: .5rem;
        padding-right: .5rem;
        padding-top: 0rem;
    }
   /* .sections-page {
        padding: 1rem 1.5rem;
    }*/
/*
    .app-project-header-ex2-items > button {
        font-size: 14px;
        margin-left: .5rem;
        margin-right: .5rem;
    }
*/
    .recent-date > .name, .recent-date .name.section-button {
        font-size: 1.5rem;
    }

        .recent-date .name.section-button .name-container-label .name-explore-all {
            font-size: 1.0rem;
            top: -1px;
        }


    /*.mobile-device #playerDataSummary1,
    .mobile-device #playerDataSummary2,
    .mobile-device #playerDataSummary3,
    .mobile-device #playerDataSummary4,
    .mobile-device #playerDataSummary5 {
        text-shadow: none;
    }*/

    .mobile-device.is-safari #playerDataUpNext {
        pointer-events: all;
    }

    .mobile-device.is-safari #playerDataClose {
        margin: 0px;
        pointer-events: all;
    }

    .mobile-device.is-safari #playerControls #playlistItems {
        font-size: 18px;
        pointer-events: all;
    }

        .mobile-device.is-safari #playerControls #playlistItems i {
            top: 0px;
        }

    .mobile-device.is-safari #playerControls #playerSelectOptions {
        margin-left: 0px;
        pointer-events: all;
    }

        .mobile-device.is-safari #playerControls #playerSelectOptions i {
            font-size: 18px;
        }

    .mobile-device.is-safari .player-data-header {
        margin-top: 2.5rem;
    }

    .mobile-device.is-safari .player-data-summary {
        margin-left: 3rem;
    }

    .mobile-device.is-safari #playerDataControls {
        top: 3rem;
        right: unset;
        left: -3px;
    }

    .mobile-device.is-safari #playerControls #player-options-container {
        margin-left: 2px;
        margin-right: 0px;
    }

    .mobile-device.is-safari #player-controls-container {
        bottom: 21px;
    }

    .mobile-device.is-safari #playerControls #player-view-container {
        margin-left: 0;
        margin-right: 5px;
    }

    #playerSubtitlesDelay,
    #playerSubtitlesInfo {
        font-size: 28px;
    }

    .media-layout-grid .library-groups {
        margin-left: 0rem;
        margin-right: 0rem;
    }
    .media-layout-grid .media-tabs {
        margin-left: 1.2rem;
        margin-right: 1rem;
        margin-bottom: .75rem;
    }
}

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

    .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title,
    .project-layout-page.carousel .project-layout-page-info.hide-image .project-layout-page-title,
    .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title,
    .project-layout-media-page .media-title {
        font-size: 2.6rem;
    }

    #main-screen .project-layout-page.carousel .project-layout-page-info .project-layout-page-message-info,
    .project-layout-media-page .media-tagline {
        font-size: 1.4rem;
    }

    #playerSubtitlesDelay {
        font-size: 36px;
        top: 6.5rem;
    }

    #playerSubtitlesInfo {
        font-size: 36px;
    }

    #player.showing-controls #playerSubtitles {
        bottom: 125px;
    }
}

@media only screen and (max-height: 800px) and (max-width: 1100px) {
    .project-quick-access.full-info .project-layout-page-data {
        padding-bottom: 0rem;
    }

    .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title,
    .project-layout-page.carousel .project-layout-page-info.hide-image .project-layout-page-title,
    .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title,
    .project-layout-media-page .media-title {
        font-size: 2.2rem;
    }

    #main-screen .project-layout-page.carousel .project-layout-page-info .project-layout-page-message-info,
    .project-layout-media-page .media-tagline {
        font-size: 1.2rem;
        margin-top: 0rem;
        padding-bottom: 0;
    }

    .project-layout-page.carousel .media-tags {
        font-size: .9rem;
    }

    #playerSubtitlesDelay {
        font-size: 36px;
        top: 6.5rem;
    }

    #playerSubtitlesInfo {
        font-size: 36px;
    }

    #player.showing-controls #playerSubtitles {
        bottom: 125px;
    }
}

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

    .dms-on-demand.default-screen.fullscreen.relative .dms-on-demand-form {
        min-height: 78vh;
    }
}
@media only screen and (max-width: 700px) {
    body:not(.mobile-device) .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title, body:not(.mobile-device) .project-layout-page.carousel .project-layout-page-info.hide-image .project-layout-page-title, body:not(.mobile-device) .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title {
        max-width: 80vw;
        font-size: 3.2rem;
    }

    body:not(.mobile-device) #main-screen .project-layout-page.carousel .project-layout-page-info .project-layout-page-message-info {
        font-size: 1.5rem;
        max-height: 190px;
    }

    body:not(.mobile-device) .app-project-header {
        padding-left: 1.6rem;
        padding-left: 1.4rem;
    }
    #player-upnext-container .player-upnext-item {
        min-width: unset;
        flex: 1;
    }
    .sharemedia-messagebox {
        min-width:unset;
        overflow:hidden;
        max-width:80%;
    }
    .sharemedia-messagebox .sharemedia-messagebox-body {
        padding-left: 7px;
        padding-right: 7px;
    }
    .sharemedia-messagebox-footer button {
        margin-bottom: .5rem;
        min-width: 11.25rem;
        justify-content: center;
        margin-left: 0.25rem;
        margin-right: 0.25rem;
    }
    .sharemedia-messagebox .sharemedia-messagebox-footer {
        flex-wrap: wrap;
    }
    .sharemedia-messagebox-footer button:first-of-type {
        margin-left: 0.25rem;
        margin-right: 0.25rem;
    }
    .sharemedia-messagebox .sharemedia-messagebox-header span {
        font-size: 1rem;
        margin-bottom: .25rem;
    }

    .app-project-header-ex2-items > button {
        font-size: 14px;
        margin-left: .5rem;
        margin-right: .5rem;
    }

    /*.project-layout-page.carousel .project-layout-page-info {
        padding-bottom: 10rem;
    }*/

    .dms-on-demand.default-screen.center-page-title.has-image .project-layout-page-image-container img {
        max-width: 32rem;
        margin-bottom: 1.5rem;
    }

    .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title,
    .project-layout-page.carousel .project-layout-page-info.hide-image .project-layout-page-title,
    .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title,
    .project-layout-media-page .media-title {
        font-size: 2.6rem;
    }

    #main-screen .project-layout-page.carousel .project-layout-page-info .project-layout-page-message-info,
    .project-layout-media-page .media-tagline {
        font-size: 1.4rem;
    }

    .dms-on-demand.default-screen.center-page-title .project-layout-page-message {
        font-size: 1.7rem;
        padding-bottom: 1rem;
    }
    .dms-on-demand.default-screen.fullscreen.relative .dms-on-demand-form {
        min-height: 73vh;
    }
    body .media-details-ex.show,
    #player .media-details.show {
        width: 100vw;
    }
    #playerControls #playerDataSummary1 {
        font-size: 1.6rem;
        line-height: 1.4;
    }
    #playerControls #playerDataSummary2 {
        font-size: 1rem;
    }
    #playerControls #playerDataSummary3,
    #playerControls #playerDataSummary4,
    #playerControls #playerDataSummary5 {
        font-size: .9rem;
    }

    #playerSubtitlesDelay,
    #playerSubtitlesInfo {
        font-size: 26px;
    }
    #playerDataUpNext #playerDataUpNext1 {
        font-size: 1.4rem;
    }


    #options-screen .sections-tabs {
        max-width: 3.25rem;
        overflow: hidden;
        flex-direction: column;
        box-shadow: none;
        padding-top: .5rem;
    }

    #options-screen .sections-container.expand .sections-tabs {
        max-width: 10rem;
        width: 10rem;
        position: absolute;
    }

    #options-screen .sections-tabs button {
        width: 100% !important;
        padding: .5rem;
    }

        #options-screen .sections-tabs button label {
            display: none;
        }

    #options-screen .sections-container.expand .sections-tabs button label {
        display: block;
    }

    #options-screen .sections-tabs button i {
        display: block;
    }

    #options-screen .sections-container.expand .sections-tabs button i {
        display: none;
    }
    .sections-page {
        padding: 1rem 1.5rem;
        padding-top: .5rem;
    }
}

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

    body:not(.mobile-device) .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title,
    body:not(.mobile-device) .project-layout-page.carousel .project-layout-page-info.hide-image .project-layout-page-title,
    body:not(.mobile-device) .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title {
        font-size: 1.8rem;
    }
}

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

    .project-widget-media-page .project-layout-media-page .media-tagline {
        max-width: 90%;
    }
    .project-layout-page.carousel .project-layout-page-info {
        padding-bottom: 12rem;
    }
    .project-quick-access.full-info .project-layout-page-data {
        padding-bottom: 0rem;
    }
    .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title,
    .project-layout-page.carousel .project-layout-page-info.hide-image .project-layout-page-title,
    .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title,
    .project-layout-media-page .media-title {
        font-size: 2.2rem;
    }

    #main-screen .project-layout-page.carousel .project-layout-page-info .project-layout-page-message-info,
    .project-layout-media-page .media-tagline {
        font-size: 1.2rem;
        margin-top: 0rem;
        padding-bottom: 0;
    }

    .project-layout-page.carousel .media-tags {
        font-size: .9rem;
    }

    #playerSubtitlesDelay {
        font-size: 32px;
        top: 6rem;
    }

    #playerSubtitlesInfo {
        font-size: 32px;
    }

    #player.showing-controls #playerSubtitles {
        bottom: 120px;
    }
}

@media only screen and (max-height: 700px) and (max-width: 1100px) {
    #options-screen {
        margin-top: 4.25rem !important;
    }

    #options-screen .sections-tabs {
        padding-top: .75rem;
    }
    .sections-tab {
        width: 12.5rem;
    }
    .project-quick-access.full-info .project-layout-page-data {
        padding-bottom: 0rem;
    }
    .topscreen-quickaccess #main-screen .section-quickaccess .carousel-indicators {
        bottom: 10.5rem;
    }
    .project-layout-page.carousel .project-layout-page-info {
        padding-bottom: 13rem;
    }
    .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title,
    .project-layout-page.carousel .project-layout-page-info.hide-image .project-layout-page-title,
    .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title,
    .project-layout-media-page .media-title {
        font-size: 2.2rem;
    }

    #main-screen .project-layout-page.carousel .project-layout-page-info .project-layout-page-message-info,
    .project-layout-media-page .media-tagline {
        font-size: 1.2rem;
        margin-top: 0rem;
        padding-bottom: 0;
    }

    .project-layout-page.carousel .media-tags {
        font-size: .9rem;
    }
}

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

    .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title,
    .project-layout-page.carousel .project-layout-page-info.hide-image .project-layout-page-title,
    .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title,
    .project-layout-media-page .media-title {
        font-size: 1.8rem;
    }

    #main-screen .project-layout-page.carousel .project-layout-page-info .project-layout-page-message-info,
    .project-layout-media-page .media-tagline {
        font-size: 1rem;
    }

    .project-layout-page.carousel .project-layout-page-info {
        padding-bottom: 9rem;
    }
}

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

    .dms-on-demand.default-screen.center-page-title.has-image .project-layout-page-image-container img {
        max-width: 28rem;
    }

    .dms-on-demand.default-screen.center-page-title .project-layout-page-message {
        font-size: 1.4rem;
    }
    .dms-on-demand.default-screen.fullscreen.relative .dms-on-demand-form {
        min-height: 68vh;
    }
    .default-page-widget-1 .section-item-title {
        font-size: 1.6rem;
    }

    .default-page-widget-1 .section-item-description {
        font-size: 1rem;
    }
}
@media only screen and (max-width: 600px) {

    #main-screen .project-layout.no-items .project-quick-access .project-layout-page-no-items-label {
        font-size: 1.4rem;
        margin-top: 0rem;
        line-height: 1.2;
    }
    #player-controls-container #position-event-info {
        font-size: 1rem;
        margin-left: 1.5rem;
    }

    body.mobile-device .project-quick-access .live-banner-ex .live-countdown-body {
        font-size: 1.8rem;
    }
    body.mobile-device .project-quick-access .live-banner-ex .bottom-banner .bottom-banner-text-1 {
        font-size: 1.6rem;
    }

    body:not(.mobile-device) .library-group .container .buttons button.info-button {
        padding-right: .0rem;
    }
    body.mobile-device .media-details-ex .live-banner {
        padding-bottom: 1rem;
    }

    body:not(.mobile-device) .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title,
    body:not(.mobile-device) .project-layout-page.carousel .project-layout-page-info.hide-image .project-layout-page-title,
    body:not(.mobile-device) .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title {
        max-width: 80vw;
        font-size: 2.8rem;
        font-size: 2.3rem;
    }

    body:not(.mobile-device) #main-screen .project-layout-page.carousel .project-layout-page-info .project-layout-page-message-info {
        font-size: 1.4rem;
        max-height: 190px;
    }

    body.fullscreen-quickaccess:not(.has-quick-access-items) .tab-page.has-categories .section-row {
        padding-top: 10.25rem;
    }
    .project-layout-page.carousel .project-layout-page-info {
        padding-bottom: 9rem;
    }

    .dms-on-demand.default-screen.center-page-title.has-image .project-layout-page-image-container img {
        max-width: 26rem;
    }

    .dms-on-demand.default-screen.center-page-title .project-layout-page-message {
        max-width: 100%;
    }
    .dms-on-demand.default-screen.center-page-title .project-layout-page-title-actions .app-button {
        font-size:1.1rem;
    }
    .dms-on-demand.default-screen.fullscreen.relative .dms-on-demand-form {
        min-height: 63vh;
    }
    .default-page-widget-1 .section-item-title {
        font-size: 1.5rem;
    }

    .default-page-widget-1 .section-item-description {
        font-size: .95rem;
    }
    .default-page-widget-3 .section-item-title {
        font-size: 1.2rem;
    }
    .default-page-widget-3 .section-item-title {
        margin-left: .5rem;
    }

    .default-page-widget-3 .section-item-button {
        margin-right: .5rem;
    }

    /*.app-project-header {
        padding-right: 0rem !important;
        padding-left: 1rem !important;
        padding-left: 5px !important;
        margin-right: 0;
        padding-top: 1px;
        margin-bottom: 0px;
        padding-right: .5rem !important;
    }*/

    #main-screen .header .dms-on-demand-form-close.show {
        margin-left: .25rem;
        top: 0px;
        font-size: 17px;
    }

    .app-project-header-ex2 {
        padding-top: .5rem;
        padding-left: .25rem;
        padding-right: .25rem;
        padding-top: 0px;
        padding-bottom: 0px;
        width: 100vw;
        justify-content: center;
        margin-top: 0px;
    }
    .project-widget-media-page .project-layout-media-page .media-title {
        margin-top: .25rem;
        font-size: 1.7rem;
    }
    .project-widget-media-page.media-layout-3 .project-layout-media-page .media-tagline {
        /* margin-bottom: 1rem; */
        font-size: 1rem;
        line-height: 1.4;
        /* font-weight: unset; */
        margin-bottom: 1.5rem;
        margin-top: 1rem;
    }
    #main-screen .project-widget-media-page.media-layout-3 .project-layout-media-page .media-info-container {
        margin-bottom: 1rem;
    }
    .project-widget-media-page.media-layout-2 .project-layout-media-page .media-title {
        font-size: 2.6rem;
        margin-bottom: .5rem;
    }

    .project-widget-media-page #media-image {
        width: 160px;
        min-width: 160px;
        height: 160px;
        min-height: 160px;
    }

    .app-project-header-ex2-items > button {
        font-size: 13px;
        margin-left: .25rem;
        margin-right: .25rem;
    }

    .recent-date > .name, .recent-date .name.section-button {
        font-size: 1.4rem;
    }

        .recent-date .name.section-button .name-container-label .name-explore-all {
            font-size: .9rem;
            top: -1px;
        }

    .library-group .container {
        padding: .5rem;
        padding-top: .25rem;
    }

    .library-group {
        width: 189px;
        min-width: 189px;
        min-height: 140px;
        width: 230px;
        min-width: 230px;
        min-height: 129px;
        margin-left: 7px;
        margin-right: 7px;
    }

    .mobile-device .library-group {
        transform: matrix(1, 0, 0, 1, 0, 0) !important;
    }

    body.widescreen-artwork .library-group .image {
        width: 187px;
        height: 105px;
        width: 226px;
        height: 129px;
    }

    body.widescreen-artwork .top-ten-category .library-groups > .library-group > .image {
        width: 187px;
        height: 105px;
        width: 226px;
        height: 129px;
    }

    .library-group img {
        max-width: 187px;
        max-height: 187px;
    }

    .library-group img {
        max-width: 230px;
        max-height: 230px;
    }

    #main-screen .tab-page.has-categories #recent-dates .recent-date {
        min-height: 210px;
    }

    body:not(.mobile-device) #main-screen .tab-page.has-categories #recent-dates .recent-date {
        min-height: 240px;
    }

    #main-screen .recent-grouping {
        min-height: 210px;
    }

    body:not(.mobile-device) #main-screen .recent-grouping {
        min-height: 240px;
    }

    #main-screen .tab-page.has-categories #recent-dates .recent-date.top-ten-category {
        min-height: 210px;
    }

    #main-screen .recent-date.top-ten-category .recent-grouping {
        min-height: 210px;
    }


    body:not(.mobile-device) #main-screen .tab-page.has-categories #recent-dates .recent-date.use-large-image {
        min-height: 275px;
    }

    body:not(.mobile-device) #main-screen .recent-date.use-large-image .recent-grouping {
        min-height: 275px;
    }

    body:not(.mobile-device) #main-screen .recent-date.display-round-image .recent-grouping {
        min-height: 180px;
    }

    body:not(.mobile-device) #main-screen .tab-page.has-categories #recent-dates .recent-date.display-round-image {
        min-height: 180px;
    }

    body:not(.mobile-device) #main-screen .recent-date.top-ten-category .recent-grouping {
        min-height: 250px;
    }

    body:not(.mobile-device) #main-screen .tab-page.has-categories #recent-dates .recent-date.top-ten-category {
        min-height: 250px;
    }

    body.widescreen-artwork #main-screen #recent-screen .library-types-scroll-button {
        top: 23px;
    }

    body:not(.mobile-device).widescreen-artwork #main-screen #recent-screen .library-types-scroll-button {
        top: 35px;
    }

    #recent-screen .library-types-scroll-button {
        width: 35px;
        height: 80px;
    }

    .recent-grouping .library-groups .library-loader {
        padding-top: 0rem;
    }

        .recent-grouping .library-groups .library-loader .loader-io {
            transform: matrix(.8, 0, 0, .8, 0, 0);
        }

    .library-group .name {
        font-size: 1rem;
    }

    .library-group .name2 {
        font-size: .8rem;
    }

    .library-group .name3,
    .library-group .name4 {
        font-size: .7rem;
    }

    .library-group .info {
        font-size: .8rem;
    }

    body:not(.mobile-device) .library-group .info {
        font-size: .8rem;
    }

    body:not(.mobile-device) .recent-date.use-large-image .library-group .info {
        font-size: .8rem;
    }

    .library-group .container .buttons {
        margin-right: 0rem;
    }

        .library-group .container .buttons button.info-button i {
            font-size: 15px;
            margin-right: .5rem;
        }

        .library-group .container .buttons button i {
            font-size: 17px;
        }

    .library-group .info .info1 .buttons {
        margin-top: 0px;
        bottom: 0.5rem;
    }

        .library-group .info .info1 .buttons button i {
            font-size: 17px;
        }

    .tab-page:not(.has-quickaccess) #recent-info.show-names {
        padding-top: .5rem;
    }

    .header #button-options {
        font-size: 20px;
    }

  /*  .app-project-header #button-options > i {
        top: 0px;
    }*/

    .recent-date > .name, .recent-date .name.section-button {
        margin-left: .75rem !important;
    }

    .recent-grouping .library-group:first-of-type {
        margin-left: .75rem !important;
    }

    .library-groups-selected-item.fixed-window .library-group-details > .image {
        max-width: 100% !important;
    }

    .library-groups-selected-item.fixed-window .library-group-info-wrapper {
        max-width: 100% !important;
    }

    .library-groups-selected-item.fixed-window {
        left: 0rem !important;
    }

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

    .library-item .info {
        padding-right: 0px;
    }

    .library-group-details .name {
        padding-left: .5rem;
        padding-right: .5rem;
    }

    .library-group-details .info {
        padding-left: .5rem;
        padding-right: .5rem;
    }

    .library-groups-selected-item .divider {
        margin-left: .5rem;
        margin-right: .5rem;
    }

    .reduce-font-size .library-groups-selected-item.single .library-group-details .description {
        margin-left: 0px !important;
        font-size: 1rem;
        margin-right: 0px !important;
    }

    .single .library-item-list .library-item {
        padding-right: .25rem;
    }

    .library-group-details > .image .navigation {
        left: 1rem;
    }

    .library-group-details > .image button.close-button {
        right: 1.25rem;
    }

    .dms-on-demand.default-screen .dms-on-demand-actions {
        display: none;
    }

    .dms-on-demand.default-screen .project-header-page-header {
        /* padding-left: 0;
        padding-top: 0;
        z-index: 5;*/
    }

    .dms-on-demand:not(.default-screen).center-page-title .project-layout-page-info {
        justify-content: center;
        height: 100%;
        flex: 1;
        align-items: center;
        padding-right: 1rem;
    }

    .dms-on-demand:not(.default-screen).center-page-title .project-layout-page-data {
        max-width: 80%;
    }

    .dms-on-demand:not(.default-screen).center-page-title.has-image .project-layout-page-image-container img {
        max-width: 60vw;
    }

    .dms-on-demand:not(.default-screen).center-page-title .project-layout-page-title {
        font-size: 6.5vh;
        text-align: center;
        padding-top: 0px;
    }

    .dms-on-demand:not(.default-screen).center-page-title .project-layout-page-message {
        padding-top: 0;
        max-width: 100%;
    }

    .dms-on-demand:not(.default-screen).center-page-title .project-layout-page-title-actions {
        padding-top: 1.2rem;
        padding-bottom: 0.5rem;
        flex-direction: column;
        align-items: center;
    }

    .dms-on-demand:not(.default-screen) .project-layout-page-title-actions .app-button {
        margin-right: 0 !important;
        min-width: 20rem;
        text-align: center;
        justify-content: center;
        font-size: 1.2rem;
        margin-bottom: .5rem;
    }
    /*.default-page-widget-1 {
        padding: 0rem;
    }
    .default-page-widget-1 .section {
        margin-left: .5rem;
        margin-right: .5rem;
        max-width: 100%;
        flex-direction: column;
        margin-top: -1rem;
    }
    .default-page-widget-1 .section-item {
        padding: .5rem;
        max-width: unset;
        padding-bottom: 1rem;
    }
    .default-page-widget-1 .section-item-title {      
        font-size: 1.1rem;
        font-size: 1.4rem;
        margin-bottom: .25rem;
        text-align: center;
    }
    .default-page-widget-1 .section-item-description {
        font-size: .9rem;
        font-size: 1rem;
        text-align: center;
    }*/
    /*.default-page-widget-1 .section-item-middle {*/
    /*  margin-left: .5rem;
        margin-right: .75rem;
        padding:0;*/
    /*}*/
    /*.default-page-widget-2 {
        padding: 0rem;
        padding-top: 1rem;
        padding-top: 2rem;
        padding-bottom: 1rem;
    }
    .default-page-widget-2 .section {
        max-width: 100%;
        margin-left: .5rem;
        margin-left: 0rem;
    }
    .default-page-widget-2 .section-title {
        font-size: 1.4rem;*/
    /* position: relative;
        left: .25rem;
        margin-left: .25rem; */
    /*width: 100%;
        text-align: center;
        font-weight: bold;
        position: relative;
        left: 0rem;
    }
    .default-page-widget-2 .section-button {
        padding-right: 0rem; 
    }
    .mobile-device .default-page-widget-2 .section-button {
        padding-top: .25rem;
    }
    body.dark-mode .default-page-widget-2 .app-button {
        padding: 10px 30px;
        font-size: 1rem;
        position: relative;
        left: 0rem;
    }*/
    /*.default-page-widget-2 .library-types-scroll-button {
        height: 80px;
        top: 3rem;
    }*/
    /*.default-page-widget-2 .library-group {
        width: 312px;
        min-width: 312px;
        min-height: 240px;
        margin-bottom:0px;
    }
    .default-page-widget-2 .library-group img {
        max-width: 312px;
        max-height: 312px;
    }
    body.widescreen-artwork .default-page-widget-2 .library-group .image {
        width: 312px;
        height: 175px;
    }*/
    /*  .default-page-widget-3 {
        padding: 0;
         display: none; 
        z-index: 15;
    }
    .default-page-widget-3 .section {
        max-width: 100%;       
    }
    .default-page-widget-3 .section-item {
        min-height: 10rem;
    }
    .default-page-widget-3 .section-item {
        min-height: 10rem;
    }
    .default-page-widget-3 .section-item-title {    
        font-size: 1.2rem;
        margin-left: 0;
    }
    .default-page-widget-3 .section-item-button {        
        margin-right: 0;
    }
    body.dark-mode .default-page-widget-3 .app-button {
        padding: 10px 25px;
       font-size: 1rem;
    }*/
    /*.footer-links {
        margin-top: 0;
        margin-top: 3rem;
        padding-bottom: 3rem;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 5;
        margin-left: unset;
        margin-right: unset;
    }
    .footer-links > .copyright {
        order: 10;
        margin-top: 1rem;
    }
    .footer-links > .link-items { 
        margin-bottom: 1rem; 
        flex-wrap: wrap;
        justify-content: center;
        margin-left: 0;
        margin-right: 0;
    }
    .footer-links > .link-items a {
        margin-bottom: .5rem;
        margin-left: .5rem;
        margin-right: .5rem;
    }
    .footer-links > .link-items-ex { 
        margin-bottom: 1rem; 
        flex-wrap: wrap;
        justify-content: center;
        margin-left: 0;
        margin-right: 0;
    }
    .footer-links > .link-items-ex a {
        margin-bottom: .5rem;
        margin-left: .5rem;
        margin-right: .5rem;
    }
    body.dark-mode .footer-links .app-button {
        font-size: 1rem;*/
    /*padding: 10px 30px;*/
    /*}
    .default-page-widget-2 .recent-grouping .library-group:last-of-type {
        margin-right: 1rem !important;
    }
    .default-page-widget-2 .recent-grouping .library-group:first-of-type {
        margin-left: 1rem !important;
    }
    .default-page-widget-2 .section-items {
        left: 0rem;
    }*/

    .dms-on-demand.login-screen .dms-on-demand-form-container {
        background-color: rgba(0, 0, 0, .8);
        background: linear-gradient(0deg, #141414 70%, #FF0062);
        background: linear-gradient(20deg, black 25%, #333);
        background: linear-gradient(20deg, #141414 50%, #333);
    }

    .dms-on-demand.login-handler .dms-on-demand-selection-container {
    }

    .dms-on-demand.login-handler .dms-on-demand-selection-sections,
    .dms-on-demand.login-handler .dms-on-demand-selection-sections:not(.checkout-container) {
        border-radius: 0;
        flex: 1;
        margin-bottom: 0;
        background: transparent;
        border: none;
        box-shadow: none;
        margin-top: 0;
        padding-top: 0;
    }

    .project-layout-page-default-image, .dms-on-demand .project-layout-page-default-image {
        display: none;
    }

    .dms-on-demand.subscribe-screen {
        flex-direction: column;
    }

        .dms-on-demand.subscribe-screen .dms-on-demand-form-container {
            background: linear-gradient(20deg, #141414 50%, #333);
        }

    .subscribe-screen .dms-on-demand-selection-sections {
        max-width: unset;
        flex-direction: column;
    }

    .subscribe-screen .dms-on-demand-selection-section1 {
        margin: 0;
        flex: unset;
        max-width: calc(100vw - 1px);
        padding-left: .5rem;
        padding-right: .5rem;
    }

    .subscribe-screen .dms-on-demand-form-container {
        flex: 1;
        width: 100%;
    }

    .subscribe-screen .dms-on-demand-selection-section-title {
        text-shadow: none;
        font-size: 28px;
        text-align: center;
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }

    .no-shadow .subscribe-screen .dms-on-demand-selection-section-title {
        text-shadow: none;
    }

    .mobile-device .subscribe-screen .dms-on-demand-selection-section-title {
        font-size: 26px;
        padding-left: 0;
        padding-right: 0;
    }

    .dms-on-demand.subscribe-screen .dms-on-demand-selection-section-subscription-item {
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: .75rem;
        margin-bottom: .75rem;
        padding-bottom: 1.25rem;
    }

    .dms-on-demand.subscribe-screen .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.subscribe-screen .dms-on-demand-presentation-section-card-pricing-container {
        align-items: center;
    }

    .dms-on-demand.subscribe-screen .dms-on-demand-selection-section-description {
        text-shadow: none;
        font-size: 1.1rem;
        margin: .5rem .25rem;
        text-align: center;
    }

    .no-shadow .dms-on-demand.subscribe-screen .dms-on-demand-selection-section-description {
        text-shadow: none;
    }

    .dms-on-demand.subscribe-screen .dms-on-demand-presentation-section-card-pricing-type {
        padding: 0 .25rem;
        font-size: 1.1rem;
    }

    .dms-on-demand.subscribe-screen .dms-on-demand-presentation-section-card-amount {
        font-size: 1.4rem;
    }

    .dms-on-demand.subscribe-screen .dms-on-demand-selection-section-subscription-item i {
        margin-right: 1rem;
        font-size: 1.4rem;
    }

    .dms-on-demand.subscribe-screen.no-payment .dms-on-demand-selection-section-subscription-item {
        transform: scale(1) !important;
    }

    .dms-on-demand.subscribe-screen.no-payment .dms-on-demand-selection-section-subscriptions {
        margin-top: .75rem;
        padding-bottom: .25rem;
    }

    .dms-on-demand.subscribe-screen .dms-on-demand-selection-section2 {
        padding: 0;
        background: transparent;
        margin: .5rem 0;
        padding-top: 0;
        max-width: calc(100vw - 1px);
        padding-left: .5rem;
        padding-right: .5rem;
    }

    .dms-on-demand.subscribe-screen .dms-on-demand-selection-section-signup-container {
        padding: 1rem;
        margin-top: .5rem;
        padding: 0;
    }

    .dms-on-demand.subscribe-screen .dms-on-demand-selection-section-summary-item.total {
        margin-left: .25rem;
        margin-right: .25rem;
        padding-top: .5rem;
    }

    .dms-on-demand.subscribe-screen .dms-on-demand-selection-section-consent-message {
        margin-left: .25rem;
        margin-right: .25rem;
        margin-bottom: .75rem;
    }

    .dms-on-demand.subscribe-screen .dms-on-demand-selection-section-summary-agreement {
        padding-top: .75rem;
    }

    .dms-on-demand.subscribe-screen .dms-on-demand-selection-section-receive-updates-button {
        margin-bottom: .25rem;
    }

    .dms-on-demand.subscribe-screen .dms-on-demand-selection-section-signup-message {
        font-size: 1.2rem;
        line-height: 1.4;
    }

    .dms-on-demand.subscribe-screen .dms-on-demand-selection-container {
        padding-top: 0rem;
        /*padding-bottom: 3rem;*/
    }

    .dms-on-demand.subscribe-screen .dms-on-demand-actions {
        position: relative;
        margin-bottom: 1rem;
    }

    .dms-on-demand.subscribe-screen .dms-on-demand-selection-subscribe-complete .dms-on-demand-selection-container2 {
        text-align: center;
        max-width: unset;
    }

    .dms-on-demand.subscribe-screen .dms-on-demand-selection-subscribe-complete .dms-on-demand-selection-container1 {
        display: flex;
        align-items: center;
    }

    .dms-on-demand.subscribe-screen .dms-on-demand-selection-subscribe-complete .dms-on-demand-header {
        padding-bottom: 1rem;
        padding-bottom: 0rem;
        line-height: 1.4;
    }

    .dms-on-demand-form .dms-on-demand-selection-form {
        background-color: unset;
        color: unset;
        padding-top: unset;
        border-radius: unset;
        height: unset;
        padding-bottom: unset;
        max-width: unset;
        box-shadow: unset;
        margin-top: unset;
    }

    .dms-on-demand-selection-subscribe-complete .dms-on-demand-buttons {
        justify-content: center;
        flex-direction: column;
        padding-right: 0;
        margin-right: 0;
    }

        .dms-on-demand-selection-subscribe-complete .dms-on-demand-buttons > button {
            margin-right: 0 !important;
            margin-bottom: .5rem;
            min-width: 20rem;
            text-align: center;
            justify-content: center;
        }

    .dms-on-demand .dms-on-demand-actions .logo {
        padding-bottom: 0;
        padding-top: .2rem;
        top: 1px;
        padding-top: 6px;
        padding-left: 8px;
        height: 70%;
        font-size: 1rem;
    }

        .dms-on-demand .dms-on-demand-actions .logo img {
            height: 1.4rem;
            height: 22px;
            padding-right: 1.5rem;
            max-height: 38px;
        }

    .dms-on-demand-selection-subscribe-complete .dms-on-demand-selection-container2 .dms-on-demand-title {
        font-size: 1.7rem;
    }

    .dms-on-demand.subscribe-screen .dms-on-demand-selection-subscribe-complete .dms-on-demand-info-payment-amount {
        font-size: 1.2rem;
    }

    .dms-on-demand.subscribe-screen .dms-on-demand-selection-subscribe-complete .dms-on-demand-info-payment-email {
        font-size: 1.2rem;
    }

    .no-shadow .dms-on-demand-selection-subscribe-complete .dms-on-demand-selection-container2 .dms-on-demand-message,
    .no-shadow .dms-on-demand-selection-subscribe-complete .dms-on-demand-selection-container2 .dms-on-demand-message-ex {
        text-shadow: none;
    }

    .dms-on-demand-selection-subscribe-complete .dms-on-demand-selection-container2 .dms-on-demand-message {
        font-size: 1.2rem;
        font-size: 1rem;
    }

    .dms-on-demand-selection-subscribe-complete .dms-on-demand-selection-container2 .dms-on-demand-message-ex {
        font-size: 1.2rem;
        font-size: 1rem;
        padding-bottom: 0;
    }

    .dms-on-demand.subscribe-screen .dms-on-demand-loader {
        position: fixed;
    }

    .dms-on-demand.login-screen .dms-on-demand-loader {
        position: fixed;
    }

    .dms-on-demand.login-screen .dms-login-details-header {
        padding-bottom: 1rem;
    }

    .dms-on-demand.subscribe-screen .dms-on-demand-selection-section-summary-item span {
        font-size: 18px;
    }

    #main-screen .header .dms-on-demand-form-close {
        font-size: 17px;
        position: relative;
       /* top: 1px;*/
    }

            #main-screen .header .dms-on-demand-form-close.show {
                margin-right: .25rem;
                margin-left: 0;
            }
/*
    #options-screen .sections-tabs {
        max-width: 3rem;
        overflow: hidden;
        flex-direction: column;
        box-shadow: none;
        padding-top: .5rem;
    }

    #options-screen .sections-container.expand .sections-tabs {
        max-width: 10rem;
        width: 10rem;
        position: absolute;
    }

    #options-screen .sections-tabs button {
        width: 100% !important;
        padding: .5rem;
    }

        #options-screen .sections-tabs button label {
            display: none;
        }

    #options-screen .sections-container.expand .sections-tabs button label {
        display: block;
    }

    #options-screen .sections-tabs button i {
        display: block;
    }

    #options-screen .sections-container.expand .sections-tabs button i {
        display: none;
    }
*/
    #options-screen .sections-page > section {
        padding-bottom: 0px;
    }

    #options-screen .sections-page .section-header {
        font-size: 1.1rem;
        margin-left: 2px;
    }

    #options-screen .sections-page .section-row {
        padding-top: .25rem;
        font-size: 1rem;
    }
/*
        #options-screen .sections-page .section-row:not(.section-row-checkbox) {
            padding-top: .0rem;
            font-size: .9rem;
            flex-direction: column;
            display: flex;
            align-items: start;
            padding-left: 2px;
            padding-bottom: .25rem;
        }
*/
    #options-screen .sections-page.settings .section-row:not(.section-row-checkbox) {
        padding-left: 3px;
    }

    #options-screen .sections-page {
        padding: .5rem 1rem;
    }

        #options-screen .sections-page .section-options {
            padding-top: .5rem;
        }

            #options-screen .sections-page .section-options > button:not(.custom-checkbox) {
                font-size: .9rem;
                /*padding: .75rem 1.25rem;*/
            }

    #options-screen .page-subscription-cancel-title {
        font-size: 1.1rem;
        margin-left: 2px;
    }

    #options-screen .page-support-contact-title {
        font-size: 1.1rem;
        margin-left: 2px;
    }

    #options-screen .page-details-update .app-form-field.form-check .app-form-field-label {
        padding-left: .25rem;
    }

    #options-screen .page-details-update-title,
    #options-screen .page-email-update-title,
    #options-screen .page-password-update-title {
        font-size: 1.1rem;
        margin-left: 2px;
    }

    #options-screen .page-details-update-message,
    #options-screen .page-email-update-message,
    #options-screen .page-password-update-message {
        margin-top: .25rem;
        font-size: .9rem;
        line-height: 1.4;
        padding-left: 2px;
        margin-bottom: .75rem;
        color: whitesmoke;
    }

    #options-screen .sections-page .account-message {
        margin-top: .25rem;
        font-size: .9rem;
        line-height: 1.4;
        padding-left: 2px;
        margin-bottom: .25rem;
        color: whitesmoke;
    }

    #options-screen .sections-page .subscription-message {
        margin-top: .25rem;
        font-size: .9rem;
        line-height: 1.4;
        padding-left: 2px;
        margin-bottom: .25rem;
        color: whitesmoke;
    }

    #options-screen .page-subscription-cancel-message {
        margin-top: .25rem;
        font-size: .9rem;
        line-height: 1.4;
        padding-left: 2px;
        margin-bottom: .75rem;
        color: whitesmoke;
    }

    #options-screen .page-support-contact-message {
        margin-top: .25rem;
        font-size: .9rem;
        line-height: 1.4;
        padding-left: 2px;
        color: whitesmoke;
        margin-bottom: .75rem;
    }

    #options-screen .page-support-contact-form .app-form-field-input {
        font-size: 1rem;
    }

    #options-screen .page-support-contact-form .app-form-field {
        padding-bottom: .5rem;
    }

    #options-screen .page-subscription-cancel-body .app-form-field-input {
        font-size: 1rem;
    }

    #options-screen .page-support-contact-body .app-form-field-input {
        font-size: 1rem;
    }

    #options-screen .page-email-update .app-form-field {
        padding-bottom: .5rem;
    }

    #options-screen .page-password-update-form .app-form-field {
        padding-bottom: .5rem;
    }

    #options-screen .page-details-update-body .app-form-field-input,
    #options-screen .page-details-update-body .app-form-select,
    #options-screen .page-email-update-body .app-form-field-input,
    #options-screen .page-email-update-body .app-form-select,
    #options-screen .page-password-update-body .app-form-field-input,
    #options-screen .page-password-update-body .app-form-select {
        font-size: 1rem;
    }

    #options-screen .page-details-update-footer,
    #options-screen .page-details-email-footer,
    #options-screen .page-details-password-footer {
        margin-top: .25rem;
        padding-bottom: 1.25rem;
    }

        #options-screen .page-details-update-footer button:not(.custom-checkbox),
        #options-screen .page-email-update-footer button:not(.custom-checkbox),
        #options-screen .page-password-update-footer button:not(.custom-checkbox) {
            font-size: .9rem;
            padding: .75rem 1.25rem;
        }

    #options-screen .page-email-update-footer,
    #options-screen .page-password-update-footer {
        margin-top: .15rem;
    }

    #options-screen .page-support-contact-footer {
        margin-top: .15rem;
    }

        #options-screen .page-support-contact-footer button:not(.custom-checkbox) {
            font-size: .9rem;
            padding: .75rem 1.25rem;
        }

    #options-screen .sections-page .section-support-info .section-header {
        font-size: 1.1rem;
        margin-left: 2px;
        /*padding-bottom: 0;*/
    }

    #options-screen .sections-page .section-support-info .section-row {
       /* padding-top: .0rem;*/
        font-size: .9rem;
        flex-direction: column;
        display: flex;
        align-items: start;
        padding-left: 3px;
        /*padding-bottom: .25rem;*/
    }
    #options-screen .sections-page .section-row label {
        margin-bottom: 2px;
    }
        #options-screen .sections-page .section-support-info .section-row span {
            white-space: normal;
            padding-top: 2px;
            padding-bottom: 2px;
        }

    #options-screen .sections-page .section-support-info .section-options > button:not(.custom-checkbox) {
        min-width: 15rem;
        justify-content: center;
    }

    #options-screen .sections-page.account .section-options > button:not(.custom-checkbox) {
        min-width: 15rem;
        justify-content: center;
    }

    #options-screen .page-subscription-cancel-footer {
        margin-top: .15rem;
    }

    #options-screen .page-subscription-cancel-input {
        padding-bottom: .5rem;
    }

    #options-screen .page-subscription-cancel-footer button:not(.custom-checkbox) {
        font-size: .9rem;
        padding: .75rem 1.25rem;
    }

    #options-info .subscription-container button:not(.custom-checkbox) {
        font-size: .9rem;
        padding: .75rem 1.25rem;
    }

    #options-info .subscription-container {
        padding-top: 0rem;
        padding-top: .5rem;
    }

    #options-info .subscription-card .subscription-container {
        padding-top: 0rem;
    }

    .custom-checkbox {
        top: -5px;
    }

        .custom-checkbox .checkmark {
            height: 20px;
            width: 20px;
        }

            .custom-checkbox .checkmark:after {
                left: 6px;
                top: 3px;
            }

    #options-screen .drop-down.videoScale button {
        min-height: unset;
        width: 100%;
        font-size: .9rem;
    }

    #options-screen .settings .drop-down {
        width: fit-content;
        font-size: .9rem;
        padding-top: .25rem;
    }

        #options-screen .settings .drop-down .items {
            width: unset;
        }

        #options-screen .settings .drop-down .selected-item label {
            font-size: .9rem;
        }

    #options-screen .sections-page .section-row.section-row-checkbox {
        margin-top: .1rem;
    }

    #options-screen .sections-page.account .section-row.section-row-checkbox {
        margin-top: 1px;
        padding-top: .0rem;
        font-size: .9rem;
        padding-left: 2px;
        padding-bottom: .25rem;
    }

    #options-screen .drop-down .selected-item i {
        width: 24px;
        margin-right: 0px;
    }

    .subscribe-screen .dms-on-demand-actions .dms-on-demand-form-close,
    .login-screen .dms-on-demand-actions .dms-on-demand-form-close {
        margin-bottom: .15rem;
        font-size: 17px;
    }
    /*body:not(.mobile-device) .app-project-header-ex2-items {
        justify-content: center;
        width: 100%;
    }*/
    /*.mobile-device .body .tab-page {
        margin-top: 2.5rem;
    }
*/
    .mobile-device .app-project-header-ex2 {
        padding: 0px;
        /* NOTE: this isn't great but seems to work on Safari; */
        min-height: 30px;
    }

    .mobile-device.is-ready:not(.is-loading) .app-project-header-ex2 {
        opacity: 1 !important;
    }

    .mobile-device .app-project-header-ex2-items {
        padding-left: .5rem;
        padding-right: .5rem;
        padding-top: .75rem;
        padding-bottom: 5px;
        margin-bottom: 2px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

        .mobile-device .app-project-header-ex2-items::-webkit-scrollbar {
            width: 1px;
            height: 0px;
            opacity: 0;
            display: none;
        }

        .mobile-device .app-project-header-ex2-items > button {
            padding-left: .5rem;
            padding-right: .5rem;
            padding-bottom: 0;
            padding-bottom: .25rem;
            font-weight: bold;
        }

    .mobile-device .media-status-user-container {
        margin-right: .75rem;
    }

    .mobile-device .app-project-header #button-options {
        margin-right: .5rem;
    }

    .app-user-content-menu {
        top: 41px;
        right: -12px;
    }

    #main-screen.home .recent-grouping .library-groups {
        padding-top: 0px;
    }

    #main-screen.home .recent-date > .name, .recent-date .name.section-button {
        font-size: 1.2rem;
    }

    body:not(.mobile-device) #main-screen.home .recent-date > .name, .recent-date .name.section-button {
        font-size: 1.3rem;
    }

    #main-screen.home .tab-page.has-categories #recent-dates .recent-date {
        padding-bottom: 0px;
    }

    #main-screen.home .recent-grouping .library-groups {
        padding-bottom: 0rem;
    }

    .has-quickaccess #main-screen.home #recent-info {
        margin-top: -1rem;
    }

    body.widescreen-artwork .recent-date.display-round-image .library-group {
        width: 125px;
        min-width: 125px;
    }

        body.widescreen-artwork .recent-date.display-round-image .library-group .image {
            width: 125px;
            height: 125px;
        }

    .recent-date.display-round-image .library-group img {
        max-width: 125px;
        max-height: 125px;
    }

    .has-quickaccess-items, .has-quickaccess-item {
        margin-bottom: 0rem;
    }

    body.widescreen-artwork .recent-date.use-large-image .library-group {
        width: 314px;
        min-width: 314px;
        margin-right: 10px;
    }

        body.widescreen-artwork .recent-date.use-large-image .library-group .image {
            width: 312px;
            height: 175px;
        }

    .recent-date.use-large-image .library-group img {
        max-width: 312px;
        max-height: 312px;
    }

    #main-screen.home .tab-page.has-categories #recent-dates .recent-date.use-large-image {
        padding-bottom: 15px;
    }

    .library-group .info .info1 .buttons {
        margin-top: 2px;
        bottom: 0.4rem;
        right: .45rem;
    }

        .library-group .info .info1 .buttons button i {
            font-size: 16px;
        }

    .recent-date.use-large-image .library-group .name {
        font-size: 1rem;
    }

    .recent-date.use-large-image .library-group .name2,
    .recent-date.use-large-image .library-group .name3,
    .recent-date.use-large-image .library-group .name4 {
        font-size: .9rem;
    }

    .library-group .top-ribbon .top-ribbon-text-1 {
        font-size: .5rem;
    }

    .library-group .top-ribbon .top-ribbon-text-2 {
        font-size: .9rem;
    }

    .library-group .bottom-banner {
        font-size: .9rem;
    }
    .media-layout-grid .library-group .bottom-banner {
        font-size: .8rem;
    }
    body.mobile-device .media-layout-grid .library-group .bottom-banner {
        font-size: .7rem;
    }
    .library-group .bottom-banner .bottom-banner-text-1 {
        padding: .25rem .75rem;
    }

    .recent-date.use-large-image .library-group .top-ribbon .top-ribbon-text-1 {
        font-size: .6rem;
    }

    .recent-date.use-large-image .library-group .top-ribbon .top-ribbon-text-2 {
        font-size: 1rem;
    }

    .recent-date.use-large-image .library-group .bottom-banner {
        font-size: 1rem;
    }

        .recent-date.use-large-image .library-group .bottom-banner .bottom-banner-text-1 {
            padding: .25rem .75rem;
        }

    .recent-date.use-large-image .library-group .info .info1 .buttons {
        bottom: .45rem;
        right: .5rem;
    }

        .recent-date.use-large-image .library-group .info .info1 .buttons button i {
            font-size: 18px;
        }

    #main-screen .recent-date.display-round-image .recent-grouping {
        min-height: 180px;
    }
    #main-screen .tab-page.has-categories #recent-dates .recent-date.display-round-image {
        min-height: 180px;
    }

    #main-screen .recent-date.use-large-image .recent-grouping {
        min-height: 275px;
    }
    #main-screen .tab-page.has-categories #recent-dates .recent-date.use-large-image {
        min-height: 275px;
    }

    .recent-date.top-ten-category .name.section-button {
        font-size: 3rem;
        margin-left: 2rem;
    }

    .recent-date > .name-container .name-info {
        margin-left: 1.25rem;
        font-size: 1.1rem;
        letter-spacing: 10px;
    }

    .mobile-device .library-groups {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

        .mobile-device .library-groups::-webkit-scrollbar {
            width: 1px;
            height: 0px;
            opacity: 0;
            display: none;
        }

    .library-group-container .ranking,
    .top-ten-category .library-groups > .library-group .ranking {
        /*bottom: -1.25rem;*/
        /* top: 4rem; */
        /*top: unset;*/
    }

    /*.recent-date.top-ten-category > .name-container {
        top: -.5rem;
        position: relative;
    }*/

    .library-groups > .library-group:last-child,
    .library-groups > .library-spacer {
        margin-right: .5rem !important;
    }

    .top-ten-category .library-groups > .library-group {
        margin-left: 3.5rem !important;
        margin-right: .5rem;
        margin-top: .25rem;
    }

    .top-ten-category .recent-grouping .library-groups > .library-group:first-child {
        margin-left: 3rem !important;
    }

    .library-group-container .ranking,
    .top-ten-category .library-groups > .library-group .ranking {
       /* left: -3.5rem;*/
    }
    .library-group-container .ranking, .top-ten-category .library-groups > .library-group .ranking {
        font-size: 6.5rem;
        bottom: -1.5rem;
        left: -54px;
    }

    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);
        left: -54px;
    }

    .library-group-container.ranking-1 .ranking,
    .top-ten-category .library-groups > .library-group.ranking-1 .ranking {
        left: -33px;
    }

    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: -33px;
    }

    .library-group-container.ranking-10,
    .top-ten-category .library-groups > .library-group.ranking-10 {
        margin-left: 6.5rem !important;
    }

        .library-group-container.ranking-10 .ranking,
        .top-ten-category .library-groups > .library-group.ranking-10 .ranking {
            left: -6.5rem !important;
            /*letter-spacing: -2px;*/
        }

    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: -6.5rem !important;
    }

   /* #main-screen.home .tab-page.has-categories #recent-dates .recent-date.top-ten-category {
        padding-top: .25rem;
    }
*/

    /*.project-layout-page.carousel .project-layout-page-info {
        padding-top: 0;
        padding-bottom: 10rem;
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .carousel-indicators {
        bottom: 14% !important;
    }

    .project-quick-access.full-info .project-layout-page-data {
        padding-left: 0rem !important;
        padding-right: 0rem;
        padding-bottom: 0rem;
        max-width: 100vw !important;
    }

    .project-layout-page.carousel .media-options > div {
        margin-left: .5rem;
        margin-right: .5rem;
    }

    .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title, .project-layout-page.carousel .project-layout-page-info.hide-image .project-layout-page-title, .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title {
        margin-bottom: 1rem;
        padding-bottom: 0;
        text-align: center;
        font-size: 2.4rem;
        line-height: 1.2;
        margin-left: 0;*/
        /* margin-right: 0; */
        /*margin-bottom: .5rem;
        padding-left: 0rem;
        padding-right: 0rem;
        padding-top: 3rem;
        max-width: unset;
        left: 0;
        max-height: 300px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        text-shadow: none;
    }

    .library-group-container .ranking, .top-ten-category .library-groups > .library-group .ranking {*/
        /* font-size: 14vh;*/
    /*}

    #main-screen .tab-page.has-categories #recent-dates .recent-date.top-ten-category {
        min-height: 210px;
    }

    #main-screen .recent-date.top-ten-category .recent-grouping {
        min-height: 210px;
    }

    #main-screen .tab-page.has-categories #recent-dates .recent-date.use-large-image {
        min-height: 310px;
    }*/
    /*.project-layout-page.carousel .media-buttons button {
        opacity: .7;
    }*/
    /*.project-layout-page.carousel .media-options {
        display: flex;
        align-items: center;
        font-size: 1.2rem;
        text-align: center;
        width: 100%;
        justify-content: center;
        margin-left: 0;
        margin-bottom: .25rem;
        text-shadow: none;
    }

    #main-screen .project-layout-page.carousel .project-layout-page-info .project-layout-page-message {
        max-width: 100%;
    }

    .project-quick-access.full-info .project-layout-page-message {
        -webkit-line-clamp: 4;
    }

    #main-screen .project-layout-page.carousel .project-layout-page-info .project-layout-page-message-info {
        margin-top: 1rem;
        line-height: 1.5;
        font-size: 1.2rem;
        margin-top: .5rem;
        text-align: center;
        max-width: 100vw;
        padding: .25rem 1rem;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        text-shadow: none;
    }

    .project-layout-page.carousel .media-tags {
        margin-left: 0rem;
        justify-content: center;
        flex-wrap: wrap;
        margin-top: 1rem;
        font-size: .9rem;
        padding: .25rem 1rem;
        padding-bottom: 0;
        margin-bottom: 1.25rem;
        display: none;
    }

        .project-layout-page.carousel .media-tags .media-tag {
            margin-left: .75rem;
            margin-right: .75rem;
            margin-bottom: .75rem;
            text-shadow: -1px 1px 2px rgb(0, 0, 0);
            text-decoration: underline;
            text-shadow: none;
        }

    .project-layout-page.carousel .media-buttons {
        font-size: 1rem;
        padding: 0;*/
        /*margin: 0;*/
        /*justify-content: center;
        flex-direction: column;
        align-items: center;
        margin-bottom: 1.75rem;
    }

        .project-layout-page.carousel .media-buttons > button {
            padding: .75rem 2rem;
            margin-bottom: 1.5rem;
            margin-right: 0rem;
            justify-content: center;
            min-width: 15rem;
        }

    .project-layout-page.carousel .media-links {
        margin-left: 0rem;
        margin-top: .5rem;
    }

        .project-layout-page.carousel .media-links .button-container.padding-right {
            padding-right: 0rem;
        }

        .project-layout-page.carousel .media-links button {
            margin-right: 2rem;
            margin-left: 2rem;
        }

            .project-layout-page.carousel .media-links .button-container:hover button,
            .project-layout-page.carousel .media-links button:hover,
            .project-layout-page.carousel .media-links button:focus,
            .project-layout-page.carousel .media-links button.focused {
                padding: .25rem;
                border: none !important;
                background: transparent !important;
            }

                .project-layout-page.carousel .media-links .button-container:hover button label,
                .project-layout-page.carousel .media-links button:hover label,
                .project-layout-page.carousel .media-links button:focus label,
                .project-layout-page.carousel .media-links button.focused label,
                .project-layout-page.carousel .media-links button:active label {
                    display: none;
                }

    body.fadein-quickaccess #main-screen .project-layout-page-background-image-container {
        background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)) !important;
        background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 60%) !important;
        background: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, .1) 60%) !important;
        background: linear-gradient(to left, rgba(0, 0, 0, .3), rgba(0, 0, 0, .5)) !important;
    }

    body.mobile-device #main-screen.home .header #button-options,
    body.mobile-device #main-screen.media .header #button-options,
    body.mobile-device #main-screen.brand .header #button-options,
    body.mobile-device #main-screen.related .header #button-options,
    body.mobile-device #main-screen.category .header #button-options {*/
       /* margin-right: .5rem;*/
    /*}

    body:not(.mobile-device) #main-screen.home .header #button-options,
    body:not(.mobile-device) #main-screen.media .header #button-options,
    body:not(.mobile-device) #main-screen.brand .header #button-options,
    body:not(.mobile-device) #main-screen.related .header #button-options,
    body:not(.mobile-device) #main-screen.category .header #button-options {*/
       /* margin-right: 1.5rem;*/
    /*}

    #main-screen .media-details {
        width: 100vw;
    }

        #main-screen .media-details .media-details-data {
            margin: 0rem 1rem;
            margin-bottom: 1rem;
        }

        #main-screen .media-details .media-details-header {*/
            /*margin: 0rem .5rem;*/
        /*}

            #main-screen .media-details .media-details-header .close-button {
                margin-bottom: 0;
            }

        #main-screen .media-details .media-tags {
            margin-top: .25rem;*/
            /*font-weight: bold;
        text-decoration: underline;*/
            /*font-size: 1.1rem;
        }

        #main-screen .media-details .media-links {
            justify-content: center;
            margin-left: 0rem;
            margin-top: .75rem;
        }

            #main-screen .media-details .media-links button {
                margin-right: 2rem;
                margin-left: 2rem;
            }

            #main-screen .media-details .media-links .button-container.padding-right {
                padding-right: 0rem !important;
            }

    #main-screen .recent-date.display-round-image .recent-grouping {
        min-height: 165px;
        min-height: 175px;
    }

    #main-screen.home .tab-page.has-categories #recent-dates .recent-date.display-round-image {
        min-height: 165px;
    }

    #recent-screen .library-groups-no-items > div {
        font-size: 1.4rem;
    }

    #main-screen .project-layout-media-page .project-header-page-header {
        padding-left: 0;
    }

    #main-screen .project-layout-media-page .project-quick-access.full-info .project-layout-page-info {
        margin-right: 0;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }*/

    /*#main-screen .project-widget-media-page.media-layout-3 .project-layout-media-page .project-quick-access.full-info .project-layout-page-info {
        flex-direction: column;
        margin-top: 0;
        padding-top: 0;
    }

    #main-screen .project-widget-media-page.media-layout-3 .project-layout-media-page .media-info-container {
        margin-left: 0;
        padding-left: 0;
        margin-bottom: 0;
        margin-top: 2rem;
        flex-direction: column;
    }

    #main-screen .project-widget-media-page.media-layout-3 .project-layout-media-page #media-image {
        margin-right: 0px;
        width: 175px;
        max-width: 175px;
        min-height: 175px;
        height: 175px;
        min-width: 175px;
    }

    #main-screen .project-widget-media-page.media-layout-3 .project-layout-media-page .media-info-container .media-info {
        min-height: unset;
    }

    #main-screen .project-widget-media-page.media-layout-3 .project-layout-media-page .media-title {
        font-size: 2.4rem;
        margin-top: 1rem;
    }

    #main-screen .project-widget-media-page.media-layout-3 .project-layout-media-page .media-tagline {
        max-width: unset;
        font-size: 1.2rem;
        max-height: unset;
        -webkit-line-clamp: 4;
    }

    .project-layout-media-page .media-title {
        margin-bottom: 1rem;
        padding-bottom: 0;
        text-align: center;
        font-size: 2.4rem;
        line-height: 1.2;
        margin-left: 0;*/
        /* margin-right: 0; */
        /*margin-bottom: .5rem;
        padding-left: 0rem;
        padding-right: 0rem;
        max-width: unset;
        left: 0;
        max-height: 300px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        text-shadow: none;
    }

    .project-layout-media-page .media-options {
        display: flex;
        align-items: center;
        font-size: 1.2rem;
        text-align: center;
        width: 100%;
        justify-content: center;
        margin-left: 0;
        margin-bottom: .25rem;
        text-shadow: none;
    }

    .project-layout-media-page .media-tagline {
        margin-top: 1rem;
        line-height: 1.5;
        font-size: 1.2rem;
        margin-top: .5rem;
        text-align: center;
        max-width: 100vw;
        padding: .25rem 0rem;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        text-shadow: none;
        margin-left: 0px;
        margin-bottom: 1.5rem;
    }

    .project-layout-media-page .media-tags {
        display: none;
    }

    .project-layout-media-page .media-buttons {
        font-size: 1rem;
        padding: 0;*/
        /* margin: 0; */
        /*justify-content: center;
        flex-direction: column;
        align-items: center;
        margin-bottom: 3.5rem;
        margin-top: 0px;
    }

        .project-layout-media-page .media-buttons > button {
            padding: .75rem 2rem;
            margin-bottom: 2rem;
            margin-right: 0rem;
            justify-content: center;
            min-width: 15rem;
        }

    #main-screen .media-details .media-details-title {*/
        /*text-align: center;*/
    /*}*/

    /*.sharemedia-messagebox {
        width: 90%;
        max-width: 100vw;
        min-width: unset;
    }

    .project-layout-media-page .media-links {
        margin-left: 0;
    }

        .project-layout-media-page .media-links .button-container > button {
            margin-right: 2rem;
            margin-left: 2rem;
        }

            .project-layout-media-page .media-links .button-container > button:active {
                opacity: .7;
            }

        .project-layout-media-page .media-links .button-container.padding-right {
            padding-right: 0;
        }

    .project-layout-media-page .media-options > div {
        margin-left: .5rem;
        margin-right: .5rem;
    }

    #main-screen.media .section-row .section-background,
    #main-screen.brand .section-row .section-background,
    #main-screen.related .section-row .section-background,
    #main-screen.category .section-row .section-background {
        top: 5rem;
    }

    .project-layout-media-page .media-links .button-container:hover button,
    .project-layout-media-page .media-links button:hover,
    .project-layout-media-page .media-links button:focus,
    .project-layout-media-page .media-links button.focused,
    .project-layout-media-page .media-links button:active {
        padding: .25rem;
        border: none !important;
        background: transparent !important;
    }

        .project-layout-media-page .media-links .button-container:hover button label,
        .project-layout-media-page .media-links button:hover label,
        .project-layout-media-page .media-links button:focus label,
        .project-layout-media-page .media-links button.focused label,
        .project-layout-media-page .media-links button:active label {
            display: none;
        }

    .media-layout-grid .media-tabs {
        margin-left: -.75rem;
        width: calc(100% + 1.5rem);
        margin-bottom: 3.5rem;
    }

    .project-layout.media-layout-grid .library-groups {
        margin-left: 0;
        margin-right: 0;
    }

    .media-layout-grid .media-tabs button {
        font-size: 1.2rem;
    }

    .project-layout.media-layout-grid .library-group:first-child {
        margin-left: .5rem !important;
    }

    .fullscreen-quickaccess #main-screen.media .project-layout.media-layout-grid #recent-info {
        margin-top: -2rem;
    }

    .project-layout-media-page .media-buttons {
        margin-bottom: 3.5rem;
    }

    .project-layout.media-layout-grid .library-group .image {
        min-height: 110px;
    }

    .media-layout-grid .media-tabs button {
        margin-right: 3rem;
    }

    .media-layout-grid .media-tabs button {
        margin-bottom: 1px;
    }

    .recent-date > .recent-grouping > .loader-io {
        bottom: 4.5rem;
    }

    #main-screen .project-widget-media-page.media-layout-2 .project-layout-media-page .media-info-container {
        padding-left: 0rem;
    }

    .project-widget-media-page.media-layout-2 .project-layout-media-page .media-title {
        font-size: 2.4rem;
    }

    .project-widget-media-page.media-layout-2 .project-layout-media-page .media-tagline {
        font-size: 1.2rem;
        margin-left: 0;
        max-width: unset;
        max-height: unset;
    }

    .project-widget-media-page.media-layout-2 .project-layout-media-page .media-buttons {
        margin-top: 0rem;
        margin-bottom: 0;
    }

    .project-widget-media-page.media-layout-3 .project-layout-media-page .media-buttons {
        margin-bottom: 3rem;
    }

    .project-layout-page.carousel .project-header-page-header {
        height: 96vh;
    }*/
    /*body.mobile-device #main-screen .project-layout-media-page .project-header-page-header {
        height: unset !important;
    }*/

    .project-widget-media-page .project-layout-media-page .media-tagline {
        max-width: 90%;
    }
    #main-screen .project-layout-media-page .project-header-page-header {
        padding-left: 0rem;
        padding-right: 0rem;
    }
    .media-layout-grid .library-groups {
        margin-left: 0rem;
        margin-right: 0rem;
    }
    .media-layout-grid .library-group .image {
        min-height: 118px;
    }

    #main-screen .project-widget-media-page.media-layout-3 .project-layout-media-page .media-info-container {
        margin-bottom: 2rem;
    }

    .player-data-summary {
        line-height: 1.3;
    }
    
    body:not(.mobile-device) .player-data-summary {
        line-height: 1.3;
        margin-left: 4.5rem;
        margin-top: 1.6rem;
    }

    .player-data-upNext {
        line-height: 1.3;
    }

    #playerControls.video .metadata-item-image {
        display: none;
    }

    #playerDataUpNext1 {
        white-space: normal;
        max-width: 70%;
    }

    #playerControls #playerDataSummary2 {
        margin-left: 1px;
        margin-top: 2px;
    }

    .player-data-header {
        padding-right: 3rem;
    }

    #playerDataUpNextLabel {
        font-size: 1rem;
        font-weight: bold;
        padding-bottom: 1px;
        /* text-shadow:none;*/
    }

    #playerControls #player-control-buttons .control-button {
        transform: matrix(1.0, 0, 0, 1.0, 0, 0);
        margin-left: 5px;
        margin-right: 5px;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

        #playerControls #player-control-buttons .control-button:hover {
            transform: matrix(1.2, 0, 0, 1.2, 0, 0);
        }

        #playerControls #player-control-buttons .control-button:focus {
            transform: matrix(1.3, 0, 0, 1.3, 0, 0);
        }

    #player.no-player-hilite #playerControls #player-control-buttons .control-button:focus {
        transform: matrix(1.3, 0, 0, 1.3, 0, 0);
    }

    #playerControls #player-view-container {
        margin-left: 0rem;
        margin-right: 12px;
    }

    #playerDataUpNext {
        right: 10px;
    }

        #playerDataUpNext #playerDataUpNext1 {
            font-size: 1.1rem;
            padding-bottom: 2px;
            padding-top: 1px;
        }

    #playerDataMute {
        margin-left: 0rem;
        margin-right: 0rem;
    }

    #playerSelectOptions {
        margin-left: 0rem;
        margin-right: 0rem;
    }

    #playerControls #player-options-container {
        margin-right: 0rem;
        margin-left: 14px;
    }

    #playerControls #player-control-buttons {
        margin-left: 0rem;
    }

    #playerDataMute {
        font-size: unset;
    }

        #playerDataMute i {
            top: 1px;
            top: .5px;
            font-size: 1.3rem;
        }

    #playerControls #player-control-buttons .control-button:last-of-type {
        margin-right: 5px;
    }

    #playerSelectOptions i {
        font-size: 1.2rem;
    }

    #playerControls #playlistItems {
        font-size: 1.2rem;
    }

    #playerOptionFullscreen {
        margin-left: 0rem;
        margin-right: 0rem;
        display: block;
    }

        #playerOptionFullscreen i {
            font-size: 1.2rem;
        }

    #playerControls #position-completed {
        width: 47px !important;
        min-width: 47px !important;
    }

    #playerControls #position-uncompleted {
        width: 50px !important;
        min-width: 50px !important;
    }

    #player-view-container .icons {
        margin-left: 18px;
        margin-right: 5px;
    }

    #playerControls #position-container {
        padding-left: 5px;
        padding-right: 5px;
    }

    #playerControls #playlistItems i {
        top: .5px;
    }

    .mobile-device.is-safari #playerControls #playlistItems i {
        top: 0px;
    }

    .player-data-header {
       /* margin-left: 0;
        margin-top: 1rem;*/
    }

    #playerDataClose {
       /* margin: 0px;*/
    }

    #playerControls #player-control-buttons .play-pause-toggle {
        top: 0px;
    }

    #player-options-menu {
        left: 3px;
        bottom: 56px;
    }

    #playerControls.video #volume-bar-container {
        display: none !important;
        position: absolute;
        transform: rotateZ(90deg);
        left: .25rem;
        flex: unset;
        height: fit-content;
        margin: 0;
        padding: 0;
        max-width: 150px;
        /* right: 3rem; */
        top: -2.25rem;
        pointer-events: none;
    }

    #playerControls .volume-bar-area-off {
        height: 2px;
    }

    #playerControls .volume-bar {
        background: rgba(0, 0, 0, 1);
        border-radius: 5px;
        padding: .5rem;
        left: -4px;
        top: 0px;
    }

    #playerControls .volume-bar-area {
        pointer-events: all;
    }

    #playerDataUpNext #playerDataUpNext2 {
        font-size: .9rem;
        padding-bottom: 2px;
        padding-top: 2px;
    }

    #playerDataUpNext #playerDataUpNext3,
    #playerDataUpNext #playerDataUpNext4,
    #playerDataUpNext #playerDataUpNext5 {
        font-size: .8rem;
    }
/*
    body.topscreen-quickaccess:not(.mobile-device) #main-screen .project-header-page-header {
        padding-top: 15vh;
        height: unset;
    }

    body.topscreen-quickaccess:not(.mobile-device) #main-screen .project-layout-page.carousel {
        min-height: 100vh;
    }

    body:not(.mobile-device) .project-widget-media-page.media-layout-3 .project-layout-media-page .media-buttons {
        margin-bottom: 1.5rem;
    }
*/
    .mobile-device #playerControls #position-container {
        padding-left: 0px;
        padding-right: 0px;
    }

    #playerDataUpNext {
        right: 0;
        margin-right: 1.5rem;
    }

    #playerDataUpNextButton {
        font-size: 1.8rem;
        align-items: center;
        margin-right: -.5rem;
    }

    #playerDataUpNextLabel {
        font-size: 1rem;
        margin-right: .25rem;
    }

    /*#playerControls #player-control-buttons .play-pause-toggle .svg-icon.play {
        left: 2px;
    }*/
    body.mobile-device #playerControls #player-control-buttons .previous {
        display: none;
    }

    body.mobile-device #playerControls #player-control-buttons .next {
        display: none;
    }


    .mobile-device .player-data-header {
        margin-top: .75rem;
    }

    .mobile-device.is-safari .player-data-header {
        margin-top: 2.5rem;
    }

    .mobile-device .player-data-summary {
        margin-left: 1rem;
    }

    .mobile-device.is-safari .player-data-summary {
        margin-left: 3rem;
    }

    .mobile-device #playerDataUpNextButton {
        font-size: 1.6rem;
    }

    .mobile-device #playerDataControls {
        top: .75rem;
        right: .25rem;
    }

    .mobile-device #playerControls #position-container {
        padding-left: 0px;
        padding-right: 0px;
    }

    .mobile-device #playerControls #position-completed {
        width: 40px !important;
        min-width: 40px !important;
        padding-left: 0;
        padding-right: 5px;
        margin-left: 0rem;
    }

    .mobile-device #playerControls #position-uncompleted {
        width: 48px !important;
        min-width: 48px !important;
        padding-left: 5px;
        padding-right: 0;
        margin-right: 0rem;
    }

    .mobile-device #playerSelectOptions,
    .mobile-device body.mobile-device #playerSelectOptions {
        margin-left: 5px;
        margin-right: 19px;
    }

        .mobile-device #playerSelectOptions i {
            font-size: 1.4rem;
            position: relative;
            top: 1px;
        }

    .mobile-device #playerDataMute i {
        font-size: 1.4rem;
        min-width: unset;
        position: relative;
        top: 1px;
    }

    .mobile-device #playerControls #player-control-buttons .previous {
        display: none;
    }

        .mobile-device #playerControls #player-control-buttons .previous .svg-icon {
            height: 14px;
        }

    .mobile-device #playerControls #player-control-buttons .previous-chapter {
        margin-right: 10px;
    }

        .mobile-device #playerControls #player-control-buttons .previous-chapter .svg-icon {
            height: 14px;
            left: 0px;
        }

    .mobile-device #playerControls #player-control-buttons .control-button {
        font-size: 1.4rem;
    }

    .mobile-device #playerControls #player-control-buttons .play-pause-toggle .svg-icon {
        width: 30px;
        height: 28px;
    }

        .mobile-device #playerControls #player-control-buttons .play-pause-toggle .svg-icon.play {
            left: 2px;
        }

    .mobile-device #playerControls #player-control-buttons .next {
        display: none;
    }

        .mobile-device #playerControls #player-control-buttons .next .svg-icon {
            height: 14px;
        }

    .mobile-device #playerControls #player-control-buttons .next-chapter {
        margin-left: 11px;
        margin-right: 6px;
    }

        .mobile-device #playerControls #player-control-buttons .next-chapter .svg-icon {
            height: 14px;
            left: 0px;
        }

    .mobile-device #playerControls #playlistItems {
        font-size: 1.4rem;
    }

    .mobile-device #playerOptionFullscreen {
        font-size: 1.4rem;
        margin-left: 21px;
        margin-right: 0px;
    }

        .mobile-device #playerOptionFullscreen i {
            font-size: 1.4rem;
        }

    .mobile-device #playerControls #player-options-container {
        margin-left: .65rem;
        margin-right: .25rem;
    }

    .mobile-device #playerControls #player-control-buttons {
        margin-left: 0rem;
        margin-right: 0rem;
        padding-left: 0px;
    }

    .mobile-device #player-view-container .icons {
        margin-left: 0px;
        margin-right: 0px;
    }

    .mobile-device #playerControls #player-view-container {
        margin-left: .25rem;
        margin-right: .75rem;
    }

    .mobile-device #playerControls #playerDataSummary1 {
        font-size: 1.4rem;
        line-height: 1.4;
    }

    .mobile-device #playerDataUpNext #playerDataUpNext1 {
        font-size: 1.2rem;
    }

    .mobile-device #playerDataControls button {
        font-size: 28px;
    }

    .mobile-device #playerDataUpNext {
        right: 0;
        margin-right: 1.25rem;
    }

    .mobile-device #playerControls #playerDataSummary2 {
        font-size: 1rem;
    }

    .mobile-device #playerControls #playerDataSummary3,
    .mobile-device #playerControls #playerDataSummary4,
    .mobile-device #playerControls #playerDataSummary5 {
        font-size: .9rem;
    }

    .mobile-device #player-upnext-container .player-upnext-items {
        overflow: auto;
    }

    .mobile-device #player-upnext-container .player-upnext-item-container {
        align-items: flex-start;
    }

    .mobile-device #player-upnext-container .player-upnext-item-line1 {
        margin-top: 7px;
        font-size: 1.4rem;
        max-height: 100px;
    }

    .mobile-device #player-upnext-container .player-upnext-item-line2 {
        font-size: 1.1rem;
    }

    .mobile-device #player-upnext-container .player-upnext-item-line3,
    .mobile-device #player-upnext-container .player-upnext-item-line4,
    .mobile-device #player-upnext-container .player-upnext-item-line5 {
        font-size: 1rem;
    }

    .mobile-device #playerDataUpNextLabel {
        font-size: 1.2rem;
        margin-right: 0rem;
    }

    .mobile-device #playerDataUpNextButton {
        font-size: 1.6rem;
    }

    .mobile-device #playerControls #controls-container {
        padding-bottom: 1.25rem !important;
    }

    .mobile-device #playerControls #position-level {
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
    }

    .recent-grouping .library-groups {
        padding-top: 0;
    }

    #main-screen.home .recent-grouping .library-groups .library-group {
        margin-top: 5px;
    }
    
    body:not(.mobile-device) #main-screen.home .recent-grouping .library-groups .library-group {
         margin-top: .5rem; 
    }
    /*.search-container {
        flex-direction: column;
    }

    #search-keys {
        width: 100%;
        height: unset;
        min-height: unset;
        flex-direction: row;
    }

    .no-shadow #search-keys {
        box-shadow: none;
    }

    #search-keys .input-container {
        background-color: rgba(0, 0, 0, .3);
        border-radius: 6px;
        border: solid 1px black;
        margin-top: 1rem;
        padding: 0;
        flex: 1;
        margin-left: .5rem;
        margin-right: .5rem;
        border-color: rgba(100, 100, 100, .3);
        margin-bottom: .25rem;
        margin-top: 1rem;
        margin-left: 1rem;
        margin-right: 1rem;
    }

    #search-keys input {
        padding: .5rem .25rem;
        border-bottom: none;
        width: 100%;
    }

        #search-keys input::placeholder {
            color: whitesmoke;
            opacity: .7;
        }

    #search-keys .input-keys-toggle-keyboard {
        display: none;
    }

    #search-keys .input-keys-container {
        display: none;
    }

    #search-keys .input-searches-container {
        display: none;
    }

    #search-screen .library-groups-no-items {
        bottom: unset;
        padding: 1rem 0;
    }

        #search-screen .library-groups-no-items > div {
            font-size: 1.1rem;
        }

    #search-screen .search-section > div.name {
        padding: .75rem .5rem;
        font-size: 1.2rem;
        padding-bottom: 0;
    }

    #search-screen .search-grouping {
        min-height: unset;
    }

    #search-screen .library-groups {
        margin-left: .5rem;
        margin-right: .5rem;
    }

    #search-screen .loader-container {
        z-index: 5;
        position: fixed;
    }

    #search-keys .input-search-icon {
        font-size: 1rem;
        display: block;
    }

        #search-keys .input-search-icon i {
            position: relative;
            top: 1px;
        }

    #search-keys .input-clear-icon {
        font-size: 1rem;
        display: block;
    }
*/

    .mobile-device.is-safari #playerDataUpNext {
        pointer-events: all;
    }

    .mobile-device.is-safari #playerDataClose {
        pointer-events: all;
    }

    .mobile-device.is-safari #playerControls #playlistItems {
        pointer-events: all;
    }

        .mobile-device.is-safari #playerControls #playlistItems i {
            top: 0px;
        }

    .mobile-device.is-safari #playerControls #playerSelectOptions {
        pointer-events: all;
    }

    .mobile-device.is-safari .player-data-header {
        margin-top: 2.5rem;
    }

    .mobile-device.is-safari .player-data-summary {
        margin-left: 3.25rem;
    }

    .mobile-device.is-safari #playerDataControls {
        top: 2.75rem;
        right: unset;
        left: -3px;
    }

    .mobile-device.is-safari #playerControls #player-options-container {
        margin-left: 2px;
        margin-right: 0px;
    }

    .mobile-device.is-safari #player-controls-container {
        bottom: 12px;
    }

    .mobile-device.is-safari #playerControls #player-view-container {
        margin-left: 0;
        margin-right: 5px;
    }



    .default-page-widget-2 .section-button {
        padding-top: 0rem;
    }

    .library-group .container .buttons button.info-button i {
        font-size: 16px;
    }

    .dms-on-demand.fullscreen.relative .dms-on-demand-form {
        min-height: 80vh;
    }

    .default-page-widget-2 .library-group .name {
        font-size: 1rem;
        padding-bottom: 1px;
    }

    .default-page-widget-2 .library-group .info .info0 {
        font-size: .9rem;
    }

    .library-group .container {
        padding: .65rem;
        padding-top: .4rem;
    }
    body:not(.mobile-devie) .media-layout-grid .library-group .container {
        padding: .5rem;
    }
        .library-group .container .buttons {
            padding-top: 3px;
        }

            .library-group .container .buttons button.info-button {
                margin-right: .4rem;
            }

    #main-screen .media-details .media-links .button-container:hover button,
    #main-screen .media-details .media-links button:hover,
    #main-screen .media-details .media-links button:focus,
    #main-screen .media-details .media-links button.focused,
    #main-screen .media-details .media-links button:active {
        padding: .25rem;
        border: none !important;
        background: transparent !important;
    }
    /* #main-screen .media-details .media-links .button-container:hover button label,
    #main-screen .media-details .media-links button:hover label,
    #main-screen .media-details .media-links button:focus label,
    #main-screen .media-details .media-links button.focused label,
    #main-screen .media-details .media-links button:active label {
        display: none;
    }*/

    body:not(.mobile-device) #player #playerControls .share-button {
        display: none;
        pointer-events: all;
    }

    #player #playerControls .details-button {
        margin-left: 0;
        margin-right: 0;
        pointer-events: all;
    }

    #player .media-details {
        width: 100vw;
    }

        #player .media-details .media-links {
            justify-content: center;
            margin-left: 0;
        }

            #player .media-details .media-links button {
                margin-right: 1.5rem;
                margin-left: 1.5rem;
                padding: .5rem;
                border: none;
                background: none;
                border-radius: 6px;
                margin-bottom: 0;
            }

            #player .media-details .media-links .button-container.padding-right {
                padding-right: 0rem;
            }

            #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-details-data {
            margin: 0rem 1rem;
        }*/

    .media-details-pages {
        padding: 0rem 1.25rem;
        margin-top: 1.5rem;
    }

    .app-button {
        font-size: 1rem;
    }

    #playerControls #playerDataSummary1 {
        font-size: 1.4rem;
        line-height: 1.4;
    }
    #playerControls #playerDataSummary2 {
        font-size: .9rem;
    }

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

    #playerSubtitlesDelay,
    #playerSubtitlesInfo {
        font-size: 24px;
    }

    #player.showing-controls #playerSubtitles {
        bottom: 115px;
    }

    body:not(.mobile-device) #player.showing-controls #playerSubtitles {
        bottom: 165px;
    }

    body:not(.mobile-device) #player.showing-controls.has-up-next #playerSubtitles {
        bottom: 215px;
    }

    .header-options {
        top: -2px;
    }

    #main-screen:not(.home, .media, .related, .brand, .category, .event) .body .tab-page {
        margin-top: 3.25rem;
    }
    body:not(.mobile-device) #main-screen.search .body .tab-page {
        margin-top: 2.25rem;
    }

    .recent-date.top-ten-category > .name,
    .recent-date.top-ten-category .name.section-button {
        padding-bottom:0rem !important;
    }

}

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

    body:not(.mobile-device) .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title,
    body:not(.mobile-device) .project-layout-page.carousel .project-layout-page-info.hide-image .project-layout-page-title,
    body:not(.mobile-device) .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title {
        font-size: 1.6rem;
    }
    body:not(.mobile-device) .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-message,
    body:not(.mobile-device) .project-layout-page.carousel .project-layout-page-info.hide-image .project-layout-page-message,
    body:not(.mobile-device) .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-message {
       display:none;
    }
    body:not(.mobile-device) .project-layout-page.carousel .media-buttons {
        margin-top:.5rem;
    }
}

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

    .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title,
    .project-layout-page.carousel .project-layout-page-info.hide-image .project-layout-page-title,
    .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title {
        font-size: 1.8rem;
    }

    #main-screen .project-layout-page.carousel .project-layout-page-info .project-layout-page-message-info {
        font-size: 1rem;
    }
/*
    .project-layout-page.carousel .media-buttons {
        margin-bottom: 2rem;
    }
*/
    .project-layout-page.carousel .project-layout-page-info {
        padding-top: 0;
        padding-bottom: 12rem;
        display: none;
    }

    .project-layout-page.carousel .media-tags {
        font-size: .8rem;
        display: none;
    }

    #playerSubtitlesDelay {
        font-size: 28px;
        top: 5.5rem;
    }

    #playerSubtitlesInfo {
        font-size: 28px;
    }

    #player.showing-controls #playerSubtitles {
        bottom: 115px;
    }
}

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


    #main-screen .project-layout-page.carousel .project-layout-page-info .project-layout-page-message {
        max-width: 100%;
    }
    .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title,
    .project-layout-page.carousel .project-layout-page-info.hide-image .project-layout-page-title,
    .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title {
        font-size: 1.6rem;
        margin-left: 0rem;
        max-width: 100%;
    }

}

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

    .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title,
    .project-layout-page.carousel .project-layout-page-info.hide-image .project-layout-page-title,
    .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title {
        font-size: 1.8rem;
    }

    #main-screen .project-layout-page.carousel .project-layout-page-info .project-layout-page-message-info {
        font-size: 1rem;
    }
    .project-layout-page.carousel .project-layout-page-info {
        padding-bottom: 8rem;
    }
}

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

    body:not(.mobile-device) .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title,
    body:not(.mobile-device) .project-layout-page.carousel .project-layout-page-info.hide-image .project-layout-page-title,
    body:not(.mobile-device) .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title {
        display: none;
    }
}
@media only screen and (max-height: 575px) and (max-width: 800px) {

    #main-screen .project-layout-page.carousel .project-layout-page-info .project-layout-page-message-info {
        display: none;
    }
}
@media only screen and (max-width: 550px) {

    .dms-on-demand.default-screen.center-page-title.has-image .project-layout-page-image-container img {
        max-width: 25rem;
    }

    .dms-on-demand.default-screen.center-page-title .project-layout-page-message {
    }
}

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

    body:not(.mobile-device) .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title,
    body:not(.mobile-device) .project-layout-page.carousel .project-layout-page-info.hide-image .project-layout-page-title,
    body:not(.mobile-device) .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title {
       display:none;
    }

    .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title,
    .project-layout-page.carousel .project-layout-page-info.hide-image .project-layout-page-title,
    .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title {
        font-size: 1.6rem;
        margin-left: 0rem;
    }

    .default-page-widget-1 {
        padding-bottom: 1rem;
    }

    .dms-on-demand.default-screen.center-page-title .project-layout-page-message {
        font-size: 1.4rem;
        padding-bottom: 1rem;
        font-weight: unset;
    }

    .dms-on-demand.default-screen.center-page-title.has-image .project-layout-page-image-container img {
        max-width: 25rem;
        margin-bottom: 1rem;
    }

    .default-page-widget-1 .section-item-title {
        font-size: 2rem;
        margin-bottom: .75rem;
    }

    .default-page-widget-1 .section-item-description {
        font-size: 1.1rem;
    }

    .dms-on-demand.default-screen.center-page-title .project-layout-page-title-actions .app-button {
        font-size: 1.1rem;
    }

    .app-button {
        font-size: 1.1rem;
    }
}

@media only screen and (max-height: 550px) and (min-width: 1100px) {

    .default-page-widget-1 .section-item-title {
        font-size: 2rem;
        margin-bottom: .75rem;
    }

}

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

    #main-screen .project-layout-page.carousel .project-layout-page-info .project-layout-page-message-info {
        font-size: .9rem;
    }

    .dms-on-demand.default-screen.center-page-title .project-layout-page-message {
        font-size: 1.1rem;
        padding-bottom: .5rem;
        font-weight: unset;
    }

    .dms-on-demand.default-screen.center-page-title.has-image .project-layout-page-image-container img {
        max-width: 15rem;
        margin-bottom: .5rem;
    }

    .default-page-widget-1 .section-item-title {
        font-size: 1.2rem;
        margin-bottom: .5rem;
    }

    .default-page-widget-1 .section-item-description {
        font-size: 1rem;
    }

    .dms-on-demand.default-screen.center-page-title .project-layout-page-title-actions .app-button {
        font-size: 1rem;
    }

    .app-button {
        font-size: 1rem;
    }

    .dms-on-demand.default-screen .project-header-page-header {
        padding-top: 1%;
    }
}

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

    #playerSubtitlesDelay,
    #playerSubtitlesInfo {
        font-size: 22px;
    }
}

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

    .project-layout-page.carousel .media-buttons {
        margin-bottom: 3rem;
    }

    .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title,
    .project-layout-page.carousel .project-layout-page-info.hide-image .project-layout-page-title,
    .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title {
        font-size: 1.4rem;
        margin-bottom: .25rem;
    }

    #main-screen .project-layout-page.carousel .project-layout-page-info .project-layout-page-message-info {
        display: none;
    }

    .project-layout-page.carousel .project-layout-page-info {
        padding-top: 0;
        padding-bottom: 12rem;
       /* display: none;*/
    }

    .project-layout-page.carousel .media-tags {
        display: none;
    }

    .default-page-widget-3 {
        padding-bottom: 1.5rem;
        padding-top: 1.5rem;
    }

    #playerSubtitlesDelay {
        font-size: 24px;
        top: 5rem;
    }

    #playerSubtitlesInfo {
        font-size: 24px;
    }

    #player.showing-controls #playerSubtitles {
        bottom: 110px;
    }
}

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

    .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title,
    .project-layout-page.carousel .project-layout-page-info.hide-image .project-layout-page-title,
    .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title {
        font-size: 1.6rem;
        margin-bottom: .25rem;
       /* display: none;*/
    }

    .project-layout-page.carousel .project-layout-page-info {
        padding-bottom: 8rem;
    }
}

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

    .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title,
    .project-layout-page.carousel .project-layout-page-info.hide-image .project-layout-page-title,
    .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title {
       /* display:none;*/
    }

}

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

    .mobile-device #playerSubtitlesDelay {
        font-size: 1rem;
        top: 10rem;
    }
    .mobile-device .dms-access-code-message.message-ex {
        font-size: 1rem;
        padding: 0px;
    }
    .mobile-device #player.event #playerControlsDisabled {
        font-size: .9rem;
        line-height: 1.6;
    }
    .mobile-device #player-controls-container #position-event-info {
        font-size: .7rem;
        margin-left: .75rem;
        margin-bottom: 0;
    }
    .mobile-device #playerControls #position-level {
        padding-top: .75rem;
        padding-bottom: .75rem;
    }
    #main-screen .project-layout.no-items .project-quick-access .project-layout-page-no-items-label {
        font-size: 1.2rem;
    }

    .dms-on-demand.default-screen.center-page-title.has-image .project-layout-page-image-container img {
        max-width: 24rem;
    }

    .dms-on-demand.default-screen.center-page-title .project-layout-page-message {
        font-size: 1.3rem;
    }
    .dms-on-demand.default-screen.fullscreen.relative .dms-on-demand-form {
        min-height: 79vh;
    }
}

@media only screen and (max-height: 450px) and (max-width: 1100px) {
    /*
    .topscreen-quickaccess #main-screen .section-quickaccess .carousel-indicators {
        display: none;
    }
*/
    .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title,
    .project-layout-page.carousel .project-layout-page-info.hide-image .project-layout-page-title,
    .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title {
        display: none;
    }
    /*
    #main-screen .project-quick-access.full-info .project-layout-page-data {
        display: none;
    }*/
}

@media only screen and (max-width: 400px) {
    
    body.mobile-device #main-screen .project-layout-media-page.is-live .project-header-page-header {
        height: 94vh;
    }
    body.mobile-device .media-layout-event .media-pages {
        top: -7.5rem !important;
    }
    body.mobile-device #main-screen .project-layout-media-page.is-live .media-tagline {
        margin-bottom:.5rem;
    }
    body.mobile-device .project-layout-media-page.is-live .media-title {
        font-size: 1.6rem;
    }

    body.mobile-device .project-quick-access .live-banner-ex .live-countdown-header {
        font-size: .4rem;
    }
    body.mobile-device .project-quick-access .live-banner-ex .live-countdown-body {
        font-size: 1.4rem;
    }
    body.mobile-device .project-quick-access .live-banner-ex .bottom-banner {
        font-size: 1.4rem;
    }
    body.mobile-device .project-quick-access .live-banner-ex .bottom-banner .bottom-banner-text-1 {
        font-size: 1.1rem;
    }

    .library-group-container .ranking,
    .top-ten-category .library-groups > .library-group .ranking {
        left: -2.75rem;
    }

    .library-group-container:hover .ranking,
    .library-group-container:focus .ranking,
    .library-group-container.focused .ranking,
    .top-ten-category .library-groups > .library-group:hover .ranking,
    .top-ten-category .library-groups > .library-group:focus .ranking,
    .top-ten-category .library-groups > .library-group.focused .ranking {
        color: rgba(255, 0, 98, 1);
        left: -2.75rem;
    }

    .library-group-container.ranking-1 .ranking,
    .top-ten-category .library-groups > .library-group.ranking-1 .ranking {
        left: -28px;
    }

    .library-group-container.ranking-1:hover .ranking,
    .library-group-container.ranking-1:focus .ranking,
    .library-group-container.ranking-1.focused .ranking,
    .top-ten-category .library-groups > .library-group.ranking-1:hover .ranking,
    .top-ten-category .library-groups > .library-group.ranking-1:focus .ranking,
    .top-ten-category .library-groups > .library-group.ranking-1.focused .ranking {
        left: -28px;
    }

    .library-group-container.ranking-10,
    .top-ten-category .library-groups > .library-group.ranking-10 {
        margin-left: 6rem !important;
    }

        .library-group-container.ranking-10 .ranking,
        .top-ten-category .library-groups > .library-group.ranking-10 .ranking {
            left: -5.5rem !important;
            letter-spacing: 0px;
        }

        .library-group-container.ranking-10:hover .ranking,
        .library-group-container.ranking-10:focus .ranking,
        .library-group-container.ranking-10.focused .ranking,
        .top-ten-category .library-groups > .library-group.ranking-10:hover .ranking,
        .top-ten-category .library-groups > .library-group.ranking-10:focus .ranking,
        .top-ten-category .library-groups > .library-group.ranking-10.focused .ranking {
            left: -5.5rem !important;
        }

    .dms-on-demand .project-layout-page-title-actions .app-button {
        min-width: 15rem;
    }

    .default-page-widget-2 .recent-grouping .library-group:first-of-type {
        margin-left: .8rem !important;
    }

    .default-page-widget-2 .recent-grouping .library-group:last-of-type {
        margin-right: .8rem !important;
    }

    .dms-on-demand.login-screen .dms-login-details-header {
        padding-bottom: .25rem;
    }

    .dms-on-demand-selection-subscribe-complete .dms-on-demand-buttons .app-button {
        min-width: 15rem;
    }

    .dms-on-demand .project-layout-page-title-actions .app-button {
        min-width: 15rem;
    }

    .dms-on-demand-selection-subscribe-complete .dms-on-demand-buttons > button {
        min-width: 15rem;
    }

    #main-screen .tab-page.has-categories #recent-dates .recent-date {
        min-height: 200px;
    }

    #main-screen .recent-grouping {
        min-height: 200px;
    }

    #main-screen .recent-date.use-large-image .recent-grouping {
        min-height: 265px;
    }

    #main-screen .recent-date.top-ten-category .recent-grouping {
        min-height: 190px;
    }

    #main-screen .project-layout-page.carousel .project-layout-page-info .project-layout-page-message-info {
        font-size: 1rem;
    }

    .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title, .project-layout-page.carousel .project-layout-page-info.hide-image .project-layout-page-title, .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title {
        font-size: 2rem;
    }

    .project-layout-page.carousel .media-buttons {
        margin-bottom: .25rem;
    }

    #main-screen .recent-date.display-round-image .recent-grouping {
        min-height: 155px;
    }

    #main-screen.home .tab-page.has-categories #recent-dates .recent-date.display-round-image {
        min-height: 155px;
    }

    .project-quick-access.full-info .project-layout-page-message {
        -webkit-line-clamp: 3;
    }

    .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title, .project-layout-page.carousel .project-layout-page-info.hide-image .project-layout-page-title, .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title {
        -webkit-line-clamp: 2;
    }

    .app-project-header-ex2 {
        min-height: 45px;
    }

    .project-layout-media-page .media-buttons {
        margin-bottom: 1.5rem;
    }

    .project-layout-media-page .media-links {
        margin-top: .5rem;
    }

    #main-screen.media .section-row .section-background,
    #main-screen.brand .section-row .section-background,
    #main-screen.related .section-row .section-background,
    #main-screen.category .section-row .section-background {
        top: 10rem;
    }
    /*.project-layout-media-page .media-layout-grid .library-groups {
        grid-template-columns: repeat(auto-fit, minmax(167px, 1fr)) !important;
    }
    .project-layout.media-layout-grid .media-layout-grid .library-group {
        min-height: 86px;
    }
    .project-layout.media-layout-grid .media-layout-grid .library-group .image {
        min-height: 86px;
    }*/
    .media-layout-grid .media-tabs {
        margin-bottom: 1.5rem;
    }

    .fullscreen-quickaccess #main-screen.media
    .project-layout.media-layout-grid #recent-info {
        margin-top: 0rem;
    }

    .project-layout-media-page .media-buttons {
        margin-bottom: 1rem;
    }

    .project-layout-media-page .media-title {
        font-size: 2.1rem;
    }

    .project-layout-media-page .media-tagline {
        font-size: 1.1rem;
    }

    .project-layout-media-page .media-options {
        font-size: 1.1rem;
    }

    .carousel-indicators {
        bottom: 15% !important;
    }

    .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title, .project-layout-page.carousel .project-layout-page-info.hide-image .project-layout-page-title, .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title {
        line-height: 1.3;
    }

    .recent-grouping .library-groups {
        padding-top: 0;
    }

    #main-screen .media-layout-0 .project-layout-media-page .media-buttons > button {
        margin-bottom: 1.5rem;
    }

    #main-screen .media-layout-0 .project-layout-media-page .media-buttons {
        margin-bottom: 3.5rem;
        margin-bottom: 2rem;
    }

    #main-screen .media-layout-0 .project-layout-media-page .project-quick-access.full-info .project-layout-page-info {
        padding-top: 0;
    }

    .fullscreen-quickaccess #main-screen .project-header-page-header {
        padding-top: 22.5vh;
    }

    .project-layout-page.carousel .project-header-page-header {
        height: unset;
    }

    .topscreen-quickaccess #main-screen .project-header-page-header {
        padding-top: 15vh;
    }

    .has-quickaccess #main-screen.home #recent-info {
        margin-top: -1.5rem;
    }

    .recent-date > .recent-grouping > .loader-io {
        bottom: 3.5rem;
    }

    .project-widget-media-page.media-layout-3 .project-layout-media-page .media-buttons {
        margin-bottom: 3rem;
    }

    #main-screen .project-widget-media-page.media-layout-3 .project-layout-media-page #media-image {
        width: 150px;
        max-width: 150px;
        min-width: 150px;
        min-height: 150px;
        max-height: 150px;
        height: 150px;
    }


    .mobile-device .player-data-header {
        margin-top: .75rem;
    }

    .mobile-device .player-data-summary {
        margin-left: 1rem;
    }

    .mobile-device #playerDataUpNextButton {
        font-size: 1.4rem;
    }

    .mobile-device #playerDataControls {
        top: .75rem;
        right: .25rem;
    }

    .mobile-device.is-safari #playerDataControls {
        top: 2.75rem;
        right: unset;
        left: -3px;
    }

    .mobile-device #playerControls #position-container {
        padding-left: 0px;
        padding-right: 0px;
    }

    .mobile-device #playerControls #position-completed {
        width: 40px !important;
        min-width: 40px !important;
        padding-left: 0;
        padding-right: 5px;
        margin-left: 0rem;
    }

    .mobile-device #playerControls #position-uncompleted {
        width: 48px !important;
        min-width: 48px !important;
        padding-left: 5px;
        padding-right: 0;
        margin-right: 0rem;
    }

    .mobile-device #playerSelectOptions,
    body.mobile-device #playerSelectOptions {
        margin-right: 13px;
        margin-left: 0;
    }

        .mobile-device #playerSelectOptions i {
            font-size: 16px;
        }

    .mobile-device #playerDataMute i {
        font-size: 15px;
        min-width: unset;
    }

    .mobile-device #playerControls #player-control-buttons .previous {
        display: none;
    }

        .mobile-device #playerControls #player-control-buttons .previous .svg-icon {
            height: 12px;
        }

    .mobile-device #playerControls #player-control-buttons .previous-chapter {
        margin-right: 8px;
        margin-left: 5px;
    }

        .mobile-device #playerControls #player-control-buttons .previous-chapter .svg-icon {
            height: 12px;
            left: 0px;
        }

    .mobile-device #playerControls #player-control-buttons .control-button {
        font-size: 1rem;
    }

    .mobile-device #playerControls #player-control-buttons .play-pause-toggle .svg-icon {
        width: 21px;
        height: 19px;
    }

        .mobile-device #playerControls #player-control-buttons .play-pause-toggle .svg-icon.play {
            left: 2px;
        }

        .mobile-device #playerControls #player-control-buttons .play-pause-toggle .svg-icon.pause {
            top: .5px;
        }

    .mobile-device #playerControls #player-control-buttons .next {
        display: none;
    }

        .mobile-device #playerControls #player-control-buttons .next .svg-icon {
            height: 12px;
        }

    .mobile-device #playerControls #player-control-buttons .next-chapter {
        margin-left: 9px;
        margin-right: 6px;
    }

        .mobile-device #playerControls #player-control-buttons .next-chapter .svg-icon {
            height: 12px;
            left: 0px;
        }

    .mobile-device #playerControls #playlistItems {
        font-size: 16px;
    }

    .mobile-device #playerOptionFullscreen {
        font-size: 16px;
        margin-left: 18px;
        margin-left: 15px;
        margin-right: 0rem;
    }

        .mobile-device #playerOptionFullscreen i {
            font-size: 16px;
        }

    .mobile-device #playerControls #player-options-container {
        margin-left: .65rem;
        margin-right: .25rem;
    }

    .mobile-device.is-safari #playerControls #player-options-container {
        margin-left: 2px;
        margin-right: 0px;
    }

    .mobile-device.is-safari #player-controls-container {
        bottom: 12px;
    }

    .mobile-device #playerControls #player-control-buttons {
        margin-left: 0rem;
        margin-right: 0rem;
        padding-left: 0px;
    }

    .mobile-device #player-view-container .icons {
        margin-left: 0px;
        margin-right: 0px;
    }

    .mobile-device #playerControls #player-view-container {
        margin-left: .25rem;
        margin-right: .75rem;
    }

    .mobile-device.is-safari #playerControls #player-view-container {
        margin-left: 0;
        margin-right: 5px;
    }

    .mobile-device #playerControls #playerDataSummary1 {
        font-size: 1.2rem;
        line-height: 1.2;
    }

    .mobile-device #playerDataUpNext #playerDataUpNext1 {
        font-size: 1rem;
    }

    .mobile-device #playerDataControls button {
        font-size: 20px;
    }

    .mobile-device #playerDataUpNext {
        right: 0;
        margin-right: 1rem;
        bottom: 107px;
    }

    .mobile-device #playerControls #playerDataSummary2 {
        font-size: .8rem;
    }

    .mobile-device #playerControls #playerDataSummary3,
    .mobile-device #playerControls #playerDataSummary4,
    .mobile-device #playerControls #playerDataSummary5 {
        font-size: .7rem;
    }

    .mobile-device #player-upnext-container .player-upnext-items {
        overflow: auto;
    }

    .mobile-device #player-upnext-container .player-upnext-item-container {
        align-items: flex-start;
    }

    .mobile-device #player-upnext-container .player-upnext-item-line1 {
        margin-top: 7px;
        font-size: 1.1rem;
        max-height: 100px;
    }

    .mobile-device #player-upnext-container .player-upnext-item-line2 {
        font-size: .9rem;
    }

    .mobile-device #player-upnext-container .player-upnext-item-line3,
    .mobile-device #player-upnext-container .player-upnext-item-line4,
    .mobile-device #player-upnext-container .player-upnext-item-line5 {
        font-size: .8rem;
    }

    .mobile-device #playerDataUpNextLabel {
        font-size: 1rem;
        margin-right: 0rem;
    }

    .mobile-device #playerDataUpNextButton {
        font-size: 1.3rem;
    }


    .mobile-device.is-safari #playerDataUpNext {
        pointer-events: all;
    }

    .mobile-device.is-safari #playerDataClose {
        pointer-events: all;
    }

    .mobile-device.is-safari #playerControls #playlistItems {
        pointer-events: all;
    }

    .mobile-device.is-safari #playerControls #playerSelectOptions {
        pointer-events: all;
    }

    .dms-on-demand.fullscreen.relative .dms-on-demand-form {
        min-height: 82vh;
    }


    #playerSubtitlesDelay,
    #playerSubtitlesInfo {
        font-size: 20px;
    }

}

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

    body:not(.mobile-device) #main-screen .project-layout-page-data {
        display: none;
    }

    .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title,
    .project-layout-page.carousel .project-layout-page-info.hide-image .project-layout-page-title,
    .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title {
        display:none;
    }
    #main-screen .project-layout-page.carousel .project-layout-page-info .project-layout-page-message-info {
        font-size: 1.1rem;
        margin-top: .5rem;
        margin-bottom: .15rem;
        display: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .project-layout-page.carousel .project-layout-page-info {
        padding-top: 0;
        padding-bottom: 9rem;
        display: none;
    }

    .project-layout-page.carousel .media-tags {
        font-size: .8rem;
        display: none;
    }

    .dms-on-demand.default-screen.fullscreen.relative .dms-on-demand-form {
        min-height: 100vh;
    }
    .default-page-widget-1 {
        display: none;
    }
    .default-page-widget-2 {
        display:none;
    }
    .default-page-widget-3 {
        display: none;
    }
    .footer-links {
        display:none;
    }

    #playerSubtitlesDelay {
        font-size: 20px;
        top: 4rem;
    }
    #playerSubtitlesInfo {
        font-size: 20px;
    }

    #player.showing-controls #playerSubtitles {
        bottom: 105px;
    }
    #playerDataControls {
        top: 20px;
    }
}

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

    body.is-ready .app-project-header-ex2 {
        opacity: 0;
    }

    .topscreen-quickaccess #main-screen .section-quickaccess .carousel-indicators {
        display: none;
    }
}

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

    body:not(.mobile-device) #main-screen .project-layout-page-data {
        display: none;
    }
}

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

    .project-layout-page.carousel .media-buttons {
        margin-bottom: 1.5rem;
    }

    .topscreen-quickaccess #main-screen .section-quickaccess .carousel-indicators {
        display: none;
    }
}

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

    .project-layout-page.carousel .media-buttons {
        margin-bottom: 2rem;
    }

/*
    #main-screen .project-quick-access.full-info .project-layout-page-data {
        display: none;
    }
*/
}

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

    #main-screen .project-quick-access.full-info .project-layout-page-data {
        display: none;
    }

    #playerSubtitlesDelay {
        font-size: 18px;
        top: 3rem;
    }
    #playerSubtitlesInfo {
        font-size: 18px;
    }
    #player.showing-controls #playerSubtitles {
        bottom: 100px;
    }
}

@media only screen and (max-height: 325px) and (max-width: 1100px) {

    .project-layout-page.carousel .media-buttons {
        margin-bottom: 1.5rem;
    }

}

@media only screen and (max-height: 300px) and (max-width: 1100px) {

    .project-layout-page.carousel .media-buttons {
        margin-bottom: 1.5rem;
    }

    #main-screen .project-quick-access.full-info .project-layout-page-data {
        display: none;
    }

/*
    body.is-ready .app-project-header-ex2 {
        opacity: 0;
    }*/
}

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

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

    #main-screen .project-quick-access.full-info .project-layout-page-data {
        display: none;
    }

    #playerSubtitlesDelay {
        font-size: 16px;
        top: 2rem;
    }
    #playerSubtitlesInfo {
        font-size: 16px;
        display: none;
    }
    #player.showing-controls #playerSubtitles {
        bottom: 95px;
    }
    .player-data-header {
        margin-top: 10px;
    }

    #playerDataControls {
        top: 10px;
    }
}

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

    .player-data-header {
        margin-top: 10px;
    }

    #playerDataControls {
        top: 10px;
    }
    #playerSubtitlesDelay {
       display:none;
    }
    #playerSubtitlesInfo {
        font-size: 14px;
    }
}

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

    #player.showing-controls #playerSubtitles {
        display: none;
    }
}


/*.ipad vertical*/
@media only screen and (max-width: 768px) and (max-height: 921px) {
}

/*.ipad horizontal*/
@media only screen and (max-width: 1020px) and (max-height: 665px) {
}


/*ipad vertical*/
@media only screen and (min-width: 700px) and (max-width: 1100px) and (min-height: 900px) {


    body.mobile-device .project-layout-media-page .media-title {
        font-size: 3.2rem;
        max-height: 210px;
    }

    body.mobile-device .project-layout-media-page .media-tagline {
        font-size: 1.2rem;
        line-height: 1.4;
        -webkit-line-clamp: 6;
        max-height: 156px;
    }


    body.mobile-device .header-options {
        top: -5px;
    }
    body.mobile-device #main-screen .tab-page.has-categories #recent-dates .recent-date.top-ten-category {
        min-height: 308px;
    }
    body.mobile-device #main-screen .recent-date.top-ten-category .recent-grouping {
        min-height: 308px;
    }
    body.mobile-device .recent-date.top-ten-category .recent-grouping .library-groups .library-loader {
        padding-top: 1rem;
    }

    body.mobile-device .library-group-container .ranking,
    body.mobile-device .top-ten-category .library-groups > .library-group .ranking {
        font-size: 9rem;
    }

    body.mobile-device .recent-date.top-ten-category .name.section-button {
        font-size: 7rem;
        padding-bottom:.5rem;
    }

    body.mobile-device .sections-tab {
        width: 10.25rem;
    }
    body.mobile-device .sections-page {
        padding: 1.5rem;
        padding-top:1rem;
    }
    body.mobile-device #options-screen .sections-tabs button {
        padding: .5rem .75rem;
        margin-bottom: .5rem;
        margin-top: .5rem;
    }

    body.mobile-device .media-details-ex .media-details-title {
        line-height: 2.6rem;
    }
    body.mobile-device .recent-date > .name, .recent-date .name.section-button {
        top: 0rem;
    }
    body.mobile-device .project-widget-media-page.media-layout-2 .project-layout-media-page .media-title {
        font-size: 3rem;
    }
    body.mobile-device #button-options {
        position:relative;
        top:0px;
        padding-bottom:.25rem;
    }
    body.mobile-device .app-project-header {
        padding-left:15px;
    }
    body.mobile-device .app-project-header .header-background {
        bottom: .5rem;
    }
    body.mobile-device .project-widget-media-page .project-layout-media-page .media-tagline {
        max-height: 165px;
        -webkit-line-clamp: 6;
        max-width:90%;
    }

    body.mobile-device .library-group-container.ranking-10 .ranking,
    body.mobile-device .top-ten-category .library-groups > .library-group.ranking-10 .ranking {
        left: -7.5rem;
    }
    body.mobile-device .library-group-container.ranking-10,
    body.mobile-device .top-ten-category .library-groups > .library-group.ranking-10 {
        margin-left: 8.25rem !important;
    }
    /*.mobile-device .dms-on-demand.fullscreen.relative .dms-on-demand-form {
        min-height: 80vh;
    }
    .mobile-device .dms-on-demand.fullscreen .project-header-page-header {*/
        /*padding-top: 33%;
        left:0%;*/
    /*}
    .mobile-device .center-page-title .project-layout-page-data {
        max-width: unset;
    }*/
    /*.center-page-title.has-image .project-layout-page-image-container img {
        max-width: 60vw;
        max-height: 60vw;
    }*/
    /*.mobile-device .center-page-title .project-layout-page-message {*/
        /* font-size: 2rem;
        padding-bottom: 2rem;*/
    /*}*/
    /*.default-page-widget-1 {
        padding: 0;
    }
    .default-page-widget-1 .section {
        max-width: unset;
    }
    .default-page-widget-1 .section-item {
        padding: .5rem 1rem;
        max-width: 30vw;
    }
    .default-page-widget-1 .section-item-title {
        font-size: 1.4rem;
        margin-bottom: .5rem;
    }
    .default-page-widget-1 .section-item-description {
        font-size: 1rem;
    }*/

/*    .mobile-device .recent-grouping .library-groups {
        padding-top: 0px;
    }
    .mobile-device .library-groups::-webkit-scrollbar {
        width: 1px;
        height: 0px;
        opacity: 0;
        display: none;
    }
    .mobile-device .app-project-header {
        margin-right: 0rem;
    }
    .mobile-device .header-options {
        top: 0px;
    }
    .mobile-device .header img {
        top: -3px;
    }*/
    /*.tab-page:not(.has-quickaccess) #recent-info.show-names {
        padding-top: 5.25rem;
    }*/


    /*.default-page-widget-2 {
        padding: 0rem;
        padding-top: 1rem;
        padding-top: 2rem;
        padding-bottom: 1rem;
    }
    .default-page-widget-2 .section {
        max-width: 100%;
        margin-left: .5rem;
        margin-left: 0rem;
    }
    .default-page-widget-2 .section-title {
        font-size: 1.4rem;*/ 
       /* position: relative;
        left: .25rem;
        margin-left: .25rem; */
        /*width: 100%;
        text-align: center;
        font-weight: bold;
        position: relative;
        left: 0rem;
    }
    .default-page-widget-2 .section-button {
        padding-right: 0rem; 
        padding-top: 1.5rem;
    }
    .mobile-device .default-page-widget-2 .section-button {
        padding-top: .5rem;
    }
    body.dark-mode .default-page-widget-2 .app-button {
        padding: 10px 30px;
        font-size: 1rem;
        position: relative;
        left: 0rem;
    }*/
    /*.default-page-widget-2 .library-types-scroll-button {
        height: 80px;
        top: 3rem;
    }*/
    /*.default-page-widget-2 .library-group {
        width: 312px;
        min-width: 312px;
        min-height: 240px;
        margin-bottom:0px;
    }
    .default-page-widget-2 .library-group img {
        max-width: 312px;
        max-height: 312px;
    }
    body.widescreen-artwork .default-page-widget-2 .library-group .image {
        width: 312px;
        height: 175px;
    }*/
    /*.default-page-widget-3 {
        padding: 0;
         display: none; 
        z-index: 15;
    }
    .default-page-widget-3 .section {
        max-width: 100%;       
    }
    .default-page-widget-3 .section-item {
        min-height: unset;
    }
    .default-page-widget-3 .section-item-title {*/    
       /* font-size: 1.2rem;*/
        /*margin-left: 0;
    }
    .default-page-widget-3 .section-item-button {        
        margin-right: 0;
    }
    body.dark-mode .default-page-widget-3 .app-button {*/
        /*padding: 10px 25px;
        font-size: 1rem;*/
        /*margin-right: 0;
    }
    .default-page-widget-3 .section {
        max-width: 100%;
    }

    body.dark-mode .default-page-widget-3 .app-button {*/
        /*padding: 10px 25px;
        font-size: 1rem;*/
    /*}
    .footer-links {
        margin-top: 0;
        margin-top: 2rem;
        padding-bottom: 3rem;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 5;
        margin-left: unset;
        margin-right: unset;
    }
    .footer-links > .copyright {
        order: 10;
        margin-top: 1rem;
    }
    .footer-links > .link-items { 
        margin-bottom: 1rem; 
        flex-wrap: wrap;
        justify-content: center;
        margin-left: 0;
        margin-right: 0;
    }
    .footer-links > .link-items a {
        margin-bottom: .5rem;
        margin-left: .5rem;
        margin-right: .5rem;
    }
    .footer-links > .link-items-ex { 
        margin-bottom: 1rem; 
        flex-wrap: wrap;
        justify-content: center;
        margin-left: 0;
        margin-right: 0;
    }
    .footer-links > .link-items-ex a {
        margin-bottom: .5rem;
        margin-left: .5rem;
        margin-right: .5rem;
    }
    body.dark-mode .footer-links .app-button {*/
      /*  font-size: 1rem;
        padding: 10px 30px;*/
    /*}*/
    /*.default-page-widget-2 .recent-grouping .library-group:last-of-type {
        margin-right: 1rem !important;
    }
    .default-page-widget-2 .recent-grouping .library-group:first-of-type {
        margin-left: 1rem !important;
    }
    .default-page-widget-2 .section-items {
        left: 0rem;
    }*/
    /*.mobile-device .header #button-options {
        margin-right: 0px;
    }
    .mobile-device #main-screen .header .dms-on-demand-form-close {
        margin-right: -8px;
        padding-left: .6rem;
    }
    .mobile-device  #main-screen .header .dms-on-demand-form-close.show {
        padding-left: .6rem;
    }
    .mobile-device .dms-on-demand-form-close button {
        position: relative;
        top: 2px;
    }

    .mobile-device .app-project-header-ex2 {
        padding-top: 1rem;
        justify-content: center;
        width: 100vw;
    }
    .mobile-device .app-project-header-ex2-items > button {
        font-size: 16px;
        margin-left: .5rem;
        margin-right: .5rem;
        padding-top: .25rem;
    }
    .mobile-device .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title,
    .mobile-device .project-layout-page.carousel .project-layout-page-info.hide-image .project-layout-page-title,
    .mobile-device .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title {
        font-size: 2.8rem;
        max-width: 70vw;
        margin-left: 0.75rem;
    }
    .mobile-device .project-layout-page.carousel .media-buttons {
        margin-bottom: 7rem;
    }
    .mobile-device #main-screen .project-layout-page.carousel .project-layout-page-info .project-layout-page-message {
        max-width: 90%;
    }
    .mobile-device #main-screen .project-layout-page.carousel .project-layout-page-info .project-layout-page-message-info {
        line-height: 1.4;
    }
*/
    /*.mobile-device #main-screen .tab-page.has-categories #recent-dates .recent-date.top-ten-category {
        padding-bottom: 2rem;*/
        /* margin-top: -.5rem;*/
    /*}
    .mobile-device #main-screen #recent-dates .recent-date,
    .mobile-device #main-screen .tab-page.has-categories #recent-dates .recent-date {
        min-height: 315px;
    }
    .mobile-device #main-screen #recent-dates .recent-date.use-large-image, 
    .mobile-device #main-screen .tab-page.has-categories #recent-dates .recent-date.use-large-image {
        min-height: 500px;
    }

    body.mobile-device.widescreen-artwork .recent-date.display-round-image .library-group {
        width: 177px;
        min-width: 177px;
    }
    body.mobile-device.widescreen-artwork .recent-date.display-round-image .library-group .image {
        width: 175px;
        height: 175px;
    }
    body.mobile-device .recent-date.display-round-image .library-group img {
        max-width: 175px;
        max-height: 175px;
    }
    body.mobile-device #main-screen .recent-date.display-round-image .recent-grouping {
        min-height: 190px;
    }
    body.mobile-device #main-screen .tab-page.has-categories #recent-dates .recent-date.display-round-image {
        min-height: 260px;
        max-height: 260px;
    }

    body.mobile-device .search-container {
        flex-direction: column;
    }
    body.mobile-device #search-keys {
        width: 80%;
        height: unset;
        min-height: unset;
        flex-direction: row;
        margin: auto;
    }
    body.mobile-device #search-keys .input-container {
        background-color: rgba(0, 0, 0, .3);
        border-radius: 6px;
        border: solid 1px black;
        margin-top: 1rem;
        padding: 0;
        flex: 1;
        margin-left: .5rem;
        margin-right: .5rem;
        border-color: rgba(100, 100, 100, .3);
        margin-bottom: .25rem;
        margin-top: 1rem;
    }
   body.mobile-device  #search-keys input {        
        padding: .5rem .25rem;
        border-bottom: none;
        width: 100%;
    }
   body.mobile-device #search-keys input::placeholder {
        color: whitesmoke; 
        opacity: .7;
    }
    body.mobile-device #search-keys .input-keys-toggle-keyboard {
        display: none;
    }
    body.mobile-device #search-keys .input-keys-container {
        display: none;
    }
    body.mobile-device #search-keys .input-searches-container {
        display: none;
    }
    body.mobile-device #search-screen .library-groups-no-items {
        bottom: unset;
        padding: 1rem 0;
    }
    body.mobile-device #search-screen .library-groups-no-items > div {
        font-size: 1.1rem;
    }
    body.mobile-device #search-screen .search-section > div.name {
        padding: .75rem .5rem;
        font-size: 1.2rem;
        padding-bottom: 0;
    }
    body.mobile-device #search-screen .search-grouping {
        min-height: unset;
    }
    body.mobile-device #search-screen .library-groups {
        margin-left: .5rem;
        margin-right: .5rem;
    }
    body.mobile-device #search-screen .loader-container {
        z-index: 5;
        position: fixed;
    }
    body.mobile-device #search-keys .input-search-icon {
        font-size: 1rem;
        display: block;
    }
    body.mobile-device #search-keys .input-search-icon i {
        position: relative;
        top: 1px;
    }
    body.mobile-device #search-keys .input-clear-icon {
        font-size: 1rem;
        display: block;
    }

    body.mobile-device #main-screen:not(.home, .media, .related, .brand, .category, .event) .body .tab-page {
        margin-top: 3rem;
    }

    body.mobile-device .sections-tab {
        width: 10rem !important;
        font-size: 1rem;
        margin: 0 !important;
        padding: 1rem 1rem !important;
    }
    body.mobile-device .sections-page .section-header {
        font-size: 1.2rem;
    }
    body.mobile-device .sections-page .section-row {
        padding-top: .5rem;
        font-size: 1.2rem;
        padding-left: 1px;
    }
    body.mobile-device .sections-page {
        padding: 1.5rem;
        padding-top: .75rem;
    }
    body.mobile-device .sections-page .section-options {
        padding-top: .75rem;
    }
   body.mobile-device  .sections-page .section-options > button {
        font-size:1.1rem;
        padding: 1rem 1.5rem;
    }
    body.mobile-device .page-subscription-cancel-title {
        font-size: 1.2rem;
    }
    body.mobile-device .page-subscription-cancel-message {
        font-size: 1rem;*/
        /* line-height: 1.4; */
        /*margin-top: .25rem;
        margin-bottom: .75rem;
        left: 1px;
    }
    body.mobile-device .page-subscription-cancel-footer {
        margin-top: .25rem;
    }
    body.mobile-device .page-subscription-cancel-footer > button {
        font-size: 1.1rem;
        padding: 1rem 1.5rem;
    }
    body.mobile-device .page-support-contact-title {
        font-size: 1.2rem;
    }
    body.mobile-device .page-support-contact-message {
        font-size: 1rem;*/
        /* line-height: 1.4; */
        /*margin-top: .25rem;
        margin-bottom: .75rem;
        left: 1px;
        position: relative;
    }
    body.mobile-device .page-support-contact-footer {
        margin-top: .25rem;
    }
    body.mobile-device .page-support-contact-footer > button {
        font-size: 1.1rem;
        padding: 1rem 1.5rem;
    }
    body.mobile-device .page-details-update-title {
        font-size: 1.2rem;
    }
    body.mobile-device .page-details-update-message {
        font-size: 1rem;*/
        /* line-height: 1.4; */
        /*margin-top: .25rem;
        margin-bottom: .75rem;
        left: 1px;
        position: relative;
    }
    body.mobile-device .page-details-update-footer {
        margin-top: .5rem;
    }
    body.mobile-device .page-details-update-footer > button {
        font-size: 1.1rem;
        padding: 1rem 1.5rem;
    }
    body.mobile-device .page-email-update-title {
        font-size: 1.2rem;
    }
    body.mobile-device .page-email-update-message {
        font-size: 1rem;*/
        /* line-height: 1.4; */
        /*margin-top: .25rem;
        margin-bottom: .75rem;
        left: 1px;
        position: relative;
    }
    body.mobile-device .page-email-update-footer {
        margin-top: .25rem;
    }
    body.mobile-device .page-email-update-footer > button {
        font-size: 1.1rem;
        padding: 1rem 1.5rem;
    }
    body.mobile-device .page-password-update-title {
        font-size: 1.2rem;
    }
    body.mobile-device .page-password-update-message {
        font-size: 1rem;*/
        /* line-height: 1.4; */
        /*margin-top: .25rem;
        margin-bottom: .75rem;
        left: 1px;
        position: relative;
    }
    body.mobile-device .page-password-update-footer {
        margin-top: .25rem;
    }
    body.mobile-device .page-password-update-footer > button {
        font-size: 1.1rem;
        padding: 1rem 1.5rem;
    }*/

    
   /* .dms-on-demand.login-screen .dms-on-demand-form-container {
        background-color: rgba(0, 0, 0, .8);
        background: linear-gradient(0deg, #141414 70%, #FF0062);
        background: linear-gradient(20deg, black 25%, #333);
        background: linear-gradient(20deg, #141414 50%, #333);
    }
    .dms-on-demand.login-handler .dms-on-demand-selection-container {

    }
    .dms-on-demand.login-handler .dms-on-demand-selection-sections,
    .dms-on-demand.login-handler .dms-on-demand-selection-sections:not(.checkout-container) {
        border-radius: 0;
        flex: 1;
        margin-bottom: 0;
        background: transparent;
        border: none;
        box-shadow: none;
        margin-top: 0;
        padding-top:0;
    }
    .project-layout-page-default-image, .dms-on-demand .project-layout-page-default-image {
        display:none;
    }*/

    /*body.mobile-device .dms-on-demand.subscribe-screen {
        flex-direction: column;
    }
    body.mobile-device .dms-on-demand.subscribe-screen .dms-on-demand-form-container {
        background: linear-gradient(20deg, #141414 50%, #333);
    }
    body.mobile-device .subscribe-screen .dms-on-demand-selection-sections {
        max-width: unset;
        flex-direction: column;
    }
    body.mobile-device .subscribe-screen .dms-on-demand-selection-section1 {
        margin: 0;
        flex: unset;
        max-width: calc(100vw - 1px);
        padding-left: .5rem;
        padding-right: .5rem;
    }
    body.mobile-device .subscribe-screen .dms-on-demand-form-container {
        flex: 1;
        width: 100%;
    }
    body.mobile-device .subscribe-screen .dms-on-demand-selection-section-title {
        text-shadow: none;
        font-size: 28px;
        text-align: center;
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
    body.mobile-device .mobile-device .subscribe-screen .dms-on-demand-selection-section-title {
        font-size: 26px;
        padding-left: 0;
        padding-right: 0;
    }
    body.mobile-device .dms-on-demand.subscribe-screen .dms-on-demand-selection-section-subscription-item {
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: .75rem;
        margin-bottom: .75rem;
    }
    body.mobile-device .dms-on-demand.subscribe-screen .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;*/
    /*}
    body.mobile-device .dms-on-demand.subscribe-screen .dms-on-demand-presentation-section-card-pricing-container {
        align-items: center;
    }
    body.mobile-device .dms-on-demand.subscribe-screen .dms-on-demand-selection-section-description {
        text-shadow: none;
        font-size: 1.1rem;
        margin: .5rem .25rem;
        text-align: center;
    }
    body.mobile-device .dms-on-demand.subscribe-screen .dms-on-demand-presentation-section-card-pricing-type {
        padding: 0 .25rem;
        font-size: 1.1rem;
    }
    body.mobile-device .dms-on-demand.subscribe-screen .dms-on-demand-presentation-section-card-amount {
        font-size: 1.4rem;
    }
    body.mobile-device .dms-on-demand.subscribe-screen .dms-on-demand-selection-section-subscription-item i {
        margin-right: 1rem;
        font-size: 1.4rem;
    }
    body.mobile-device .dms-on-demand.subscribe-screen.no-payment .dms-on-demand-selection-section-subscription-item {
        transform: scale(1) !important;
    }
    body.mobile-device .dms-on-demand.subscribe-screen.no-payment .dms-on-demand-selection-section-subscriptions {
        margin-top: .75rem;
        padding-bottom: .25rem;
    }
    body.mobile-device .dms-on-demand.subscribe-screen .dms-on-demand-selection-section2 {
        padding: 0;
        background: transparent;
        margin: .5rem 0;
        padding-top: 0;
        max-width: calc(100vw - 1px);
        padding-left: .5rem;
        padding-right: .5rem;
    }
    body.mobile-device .dms-on-demand.subscribe-screen .dms-on-demand-selection-section-signup-container {
        padding: 1rem;
        margin-top: .5rem;
        padding: 0;
    }
    body.mobile-device .dms-on-demand.subscribe-screen .dms-on-demand-selection-section-summary-item.total {
        margin-left: .25rem;
        margin-right: .25rem;
        padding-top: .5rem;
    }
    body.mobile-device .dms-on-demand.subscribe-screen .dms-on-demand-selection-section-consent-message {
        margin-left: .25rem;
        margin-right: .25rem;
        margin-bottom: .75rem;
    }
    body.mobile-device .dms-on-demand.subscribe-screen .dms-on-demand-selection-section-summary-agreement {
        padding-top: .75rem;
    }
    body.mobile-device .dms-on-demand.subscribe-screen .dms-on-demand-selection-section-receive-updates-button {
        margin-bottom: .25rem;
    }
    body.mobile-device .dms-on-demand.subscribe-screen .dms-on-demand-selection-section-signup-message {
        font-size: 1.2rem;
        line-height: 1.4;
    }
    body.mobile-device .dms-on-demand.subscribe-screen .dms-on-demand-selection-container {
        padding-top: 0rem;*/
        /*padding-bottom: 3rem;*/
    /*}
    body.mobile-device .dms-on-demand.subscribe-screen .dms-on-demand-actions {
        position: relative;
        margin-bottom: 1rem;
    }
    body.mobile-device .dms-on-demand.subscribe-screen .dms-on-demand-selection-subscribe-complete .dms-on-demand-selection-container2 {
        text-align: center;
        max-width: unset;
    }
    body.mobile-device .dms-on-demand.subscribe-screen .dms-on-demand-selection-subscribe-complete .dms-on-demand-selection-container1 {
        display: flex;
        align-items: center;
    }
    body.mobile-device .dms-on-demand.subscribe-screen .dms-on-demand-selection-subscribe-complete .dms-on-demand-header {
        padding-bottom: 1rem;
        padding-bottom: 0rem;
        line-height: 1.4;
    }
    body.mobile-device .dms-on-demand-form .dms-on-demand-selection-form {
        background-color: unset;
        color: unset;
        padding-top: unset;
        border-radius: unset;
        height: unset;
        padding-bottom: unset;
        max-width: unset;
        box-shadow: unset;
        margin-top: unset;
    }
    body.mobile-device .dms-on-demand-selection-subscribe-complete .dms-on-demand-buttons {
        justify-content: center;
        flex-direction: column;
        padding-right: 0;
        margin-right: 0;
    }
    body.mobile-device .dms-on-demand-selection-subscribe-complete .dms-on-demand-buttons > button {
        margin-right: 0 !important;
        margin-bottom: .5rem;
        min-width: 20rem;
        text-align: center;
        justify-content: center;
    }
    .mobile-device .dms-on-demand .dms-on-demand-actions .logo {
        padding-bottom: 0;
        padding-top: .2rem;
        top: 1px;
        padding-top: 0rem;
        padding-left: 1px;
        height: 70%;
        font-size: 1rem;
    }
   .mobile-device  .dms-on-demand .dms-on-demand-actions .logo img {
        height: 1.4rem;
        height: 22px;
        padding-right: 1.5rem;
        max-height: 38px;
    }
    body.mobile-device .dms-on-demand-selection-subscribe-complete .dms-on-demand-selection-container2 .dms-on-demand-title {
        font-size: 1.7rem;
    }
    body.mobile-device .dms-on-demand.subscribe-screen .dms-on-demand-selection-subscribe-complete .dms-on-demand-info-payment-amount {
        font-size: 1.2rem;
    }
    body.mobile-device .dms-on-demand.subscribe-screen .dms-on-demand-selection-subscribe-complete .dms-on-demand-info-payment-email {
        font-size: 1.2rem;
    }*/
    /*.mobile-device .dms-on-demand-selection-subscribe-complete .dms-on-demand-selection-container2 .dms-on-demand-message,
    .mobile-device .dms-on-demand-selection-subscribe-complete .dms-on-demand-selection-container2 .dms-on-demand-message-ex {
        text-shadow: none;
    }*/
    /*body.mobile-device .dms-on-demand-selection-subscribe-complete .dms-on-demand-selection-container2 .dms-on-demand-message {
        font-size: 1.2rem;
        font-size: 1rem;
    }
    body.mobile-device .dms-on-demand-selection-subscribe-complete .dms-on-demand-selection-container2 .dms-on-demand-message-ex {
        font-size: 1.2rem;
        font-size: 1rem;
        padding-bottom: 0;
    }
    body.mobile-device .dms-on-demand.subscribe-screen .dms-on-demand-loader {
        position: fixed;
    }
    body.mobile-device .dms-on-demand.login-screen .dms-on-demand-loader {
        position: fixed;
    }*/
    /*.dms-on-demand.login-screen .dms-login-details-header {
        padding-bottom: 1rem;
    }*/
    /*body.mobile-device .dms-on-demand.subscribe-screen .dms-on-demand-selection-section-summary-item span {
        font-size: 18px;
    }

    body.mobile-device.fadein-quickaccess #main-screen .project-layout-page-background-image-container {
        background: linear-gradient(to left, rgba(0, 0, 0, .3), rgba(0, 0, 0, .5)) !important;
    }
    .mobile-device .app-user-content-menu {
        top: 49px;
        right: -10px;
    }
    .mobile-device .dms-on-demand .dms-on-demand-actions .logo {
        padding-top: .5rem;
        padding-left: 1px;
        top: 0px;
    }
    .mobile-device .dms-on-demand .dms-on-demand-actions .logo img {
        height: 1.8rem;
    }
    .mobile-device .dms-on-demand-actions .dms-on-demand-form-close {
        margin-left: .5rem;
        margin-bottom: .1rem;
        margin-right: 1.5rem;*/
        /* margin-top: 11.5px; */
        /*position: relative;
        top: -1px;
    }

    .mobile-device .library-groups-selected-item.fixed-window .library-group-details > .image {
        max-width: 100% !important;
    }
    .mobile-device .library-groups-selected-item.fixed-window {
        width: 100% !important;
        left: 0 !important;
    }
    .mobile-device .library-groups-selected-item.fixed-window .library-group-info-wrapper {
        max-width: 100% !important;
    }
    .mobile-device .library-group-info-container {
        padding-left: 0;
    }

    .mobile-device #player-view-container .icons {
        margin-left: 35px;
    }
    .mobile-device #playerDataMute {
        margin-left: 15px;
        font-size: 1.4rem;
    }
    .mobile-device #playerSubtitlesDelay {
        top: 8rem;
        font-size: 2.4rem;
    }
    .mobile-device #playerDataSummary2 {
        margin-top: 1px;
    }
    .mobile-device #playerControls #player-control-buttons .play-pause-toggle .svg-icon {
        width: 25px;
        height: 25px;
    }
    .mobile-device #playerControls #player-control-buttons .play-pause-toggle .pause {
        top: -1px;
    }

    .mobile-device #main-screen .project-layout-media-page .project-header-page-header {
        padding-left: 0rem;
    }
    .mobile-device .project-layout-media-page .media-title {
        font-size: 3.4rem;
        max-width: 70%;
        line-height: 1.2;
    }
    .mobile-device .project-layout-media-page .media-tagline {
        max-width: 100%;
        margin-bottom: 1rem;
    }
    .mobile-device .project-header-page-header {
        padding-left: 0rem;
    }
    .mobile-device #main-screen .project-quick-access.full-info .project-layout-page-info {
        margin-right: 0;
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .mobile-device .media-layout-grid .library-groups {
        margin-left: .5rem;
        margin-right: 1rem;
    }
    .mobile-device #main-screen .project-layout-media-page .project-quick-access.full-info .project-layout-page-info {
        margin-right: 0rem;
    }
    .mobile-device #main-screen .project-widget-media-page.media-layout-3 .project-layout-media-page .media-info-container,
    .mobile-device #main-screen .project-widget-media-page.media-layout-2 .project-layout-media-page .media-info-container {
        padding-left: 0;
        padding-right: 0;
        flex-direction: column;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
    .mobile-device .project-widget-media-page #media-image {
        width: 225px;
        min-width: 225px;
        height: 225px;
        min-height: 225px;
        margin-right: 0;
    }
    .mobile-device #main-screen .project-widget-media-page.media-layout-3 .project-layout-media-page .media-info-container .media-info,
    .mobile-device #main-screen .project-widget-media-page.media-layout-2 .project-layout-media-page .media-info-container .media-info {
        text-align: center;
        margin-top: 1rem;
    }
    .mobile-device .project-widget-media-page.media-layout-3 .project-layout-media-page .media-tagline,
    .mobile-device .project-widget-media-page.media-layout-2 .project-layout-media-page .media-tagline {
        max-width: 100%;
    }
    .mobile-device .project-widget-media-page.media-layout-3 .project-layout-media-page .media-buttons,
    .mobile-device .project-widget-media-page.media-layout-2 .project-layout-media-page .media-buttons {
        margin-top: 0;
        margin-bottom: 0rem;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-right: 0;
    }
    .mobile-device #main-screen .project-widget-media-page.media-layout-3 .media-buttons button,
    .mobile-device #main-screen .project-widget-media-page.media-layout-2 .media-buttons button {
        max-width: 20rem;
        margin-right: 0;
        margin-bottom: 2rem;
    }
    .mobile-device #main-screen .project-widget-media-page.media-layout-3 .media-links .button-container.padding-right,
    .mobile-device #main-screen .project-widget-media-page.media-layout-2 .media-links .button-container.padding-right {
        padding-right: 0rem;
    }*/

    body.mobile-device #playerSubtitlesDelay {
        top: 10.5rem;
    }
    body.is-safari #player #playerSubtitles {
        bottom: 4rem;
    }
    body.is-safari #player.showing-controls #playerSubtitles {
        bottom: 9rem;
    }
    body.is-safari #player.showing-controls.has-up-next #playerSubtitles {
        bottom: 14rem;
    }

    .mobile-device.is-safari #player #playerControls .share-button {
        font-size: 17px;
        margin-left: 0px;
        margin-right: -2px;
        position:relative;
        top:-1px;
    }

    .mobile-device.is-safari #player #playerControls .details-button {
        margin-left: 0;
        margin-right: 1px;
        font-size: 17px;
    }

    .mobile-device.is-safari #playerControls #playerSelectOptions i {
        font-size: 17px;
    }
    .mobile-device.is-safari #playerDataClose {
        font-size:22px;
    }
    .mobile-device.is-safari #main-screen.related #recent-info {
        margin-top: -1.75rem;
    }
    .mobile-device.is-safari #playerDataControls {
        top: 3rem;
    }


    .mobile-device.is-safari .player-data-summary {
        margin-left: 1.4rem;
        margin-top:.6rem;
    }

    .mobile-device.is-safari #playerControls #playerSelectOptions {
        margin-left: 4px;
    }

    .mobile-device.is-safari .library-group .container .buttons button.info-button i {
        font-size: 16px;
        margin-right:0px;
    }
    .mobile-device.is-safari #main-screen .app-project-header img {
        height: 24px;
    }
    .mobile-device.is-safari #main-screen:not(.home, .media, .related, .brand, .category, .event) .body .tab-page {
        margin-top: 3rem;
    }
    .mobile-device.is-safari .app-project-header-ex2-items > button {
        padding-top: .25rem;
    }
}

/*ipad horizontal*/
@media only screen and (min-width: 800px) and (max-width: 1200px) and (min-height: 500px) {

    body.mobile-device .player-data-header {
        margin-top: 27px;
    }

    body.mobile-device .project-layout-media-page .media-tagline {
        font-size: 1.2rem;
        margin-top: 0rem;
        padding-bottom: 0;
        line-height: 1.4;
        max-height: 105px;
    }

    body.mobile-device .project-layout-media-page .media-buttons {
        margin-top: .25rem;
        margin-bottom: 5.5rem;
    }

    body.mobile-device #main-screen .tab-page.has-categories #recent-dates .recent-date.top-ten-category {
        min-height: 308px;
    }

    body.mobile-device #main-screen .recent-date.top-ten-category .recent-grouping {
        min-height: 308px;
    }
    body.mobile-device .recent-date.top-ten-category .recent-grouping .library-groups .library-loader {
        padding-top: 1rem;
    }

    body.mobile-device .app-project-header {
        padding-left: 22px !important;
        padding-right: 10px !important;
    }
    body.mobile-device #playerDataClose {
        margin-left: 0rem;
    }
    body.mobile-device .player-data-summary {
        margin-top: 1.9rem;
        margin-left: 1.5rem;
    }

    body.mobile-device #playerControls #controls-container {
        padding-bottom: 50px !important;
    }

    body.mobile-device #playerControls #player-options-container {
        margin-left: 0px;
        margin-right: 0rem;
    }

    body.mobile-device #playerSelectOptions {
        margin-left: .4rem;
    }

    body.mobile-device #playerControls #player-view-container {
        margin-right: 0px;
    }

    body.mobile-device #player #playerControls .details-button {
        margin-right: 10px;
        margin-left: 5px;
        font-size: 17px;
        padding: .25rem
    }
    body.mobile-device #player #playerControls .share-button {
        margin-right: 1px;
        margin-left: 5px;
        font-size: 17px;
        padding:.25rem
    }
    body.mobile-device #player #playerControls .share-button i {
        position:relative;
        top:-1px;
    }
    body.mobile-device .recent-date > .name, .recent-date .name.section-button {
        top:.5rem;
    }

    body.mobile-device #main-screen.preferences .footer-links,
    body.mobile-device #main-screen.search .footer-links {
        padding-right: 1.75rem;
        padding-left: .5rem;
    }
}


/*.iphone vertical*/
@media only screen and (max-width: 440px) and (max-height: 760px) {
}

/*.iphone horizontal*/
@media only screen and (max-width: 956px) and (max-height: 390px) {
}


/*iphone vertical*/
@media only screen and (min-width: 375px) and (max-width: 600px) and (min-height: 500px) and (max-height: 1200px) {

    .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title,
    .project-layout-page.carousel .project-layout-page-info.hide-image .project-layout-page-title,
    .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title,
    .project-layout-media-page .media-title {
        font-size: 2.1rem;
        line-height: 1.4;
    }

    .mobile-device #playerDataUpNext {
        margin-right:1rem;
        bottom:95px;
    }
    .mobile-device #playerDataUpNextLabel {
        font-size: 1.1rem;
    }
    .mobile-device #playerDataUpNextButton {
        font-size: 1.4rem;
    }
    .mobile-device #playerDataUpNext .player-data-upNext {
        line-height:1.4;
    }
    .mobile-device #playerDataUpNext #playerDataUpNext1 {
        font-size: 1rem;
    }
    .mobile-device #playerDataUpNext #playerDataUpNext2 {
        font-size: .8rem;
    }
    .mobile-device #playerDataUpNext #playerDataUpNext3,
    .mobile-device #playerDataUpNext #playerDataUpNext4 {
        font-size: .7rem;
    }

    body.mobile-device .library-group .container {
        padding: .5rem;
        padding-top: .4rem;
    }

    body.mobile-device .recent-date .library-group .info {
        padding-bottom: 0px;
        font-size: .9rem;
    }

    body.mobile-device .recent-date.use-large-image .library-group .info {
        font-size: .9rem;
    }

    .mobile-device .app-project-header-ex2 {
        margin-top: .25rem;
    }

    body.mobile-device .project-layout-media-page .media-title {
        font-size: 2.2rem;
    }

    body.mobile-device .project-layout-media-page .media-tagline {
        max-height: 125px;
    }

    body.mobile-device .project-quick-access.full-info .project-layout-page-message {
        -webkit-line-clamp: 4;
        max-height: 125px;
    }

    body.mobile-device #search-screen .library-groups {
        margin-left: 6px;
        margin-right: 6px;
    }

    body.mobile-device .media-details-ex .media-tags {
        margin-bottom: .5rem;
    }

    body.mobile-device #options-info {
        padding-top: .5rem;
    }

    body.mobile-device #options-screen .page-support-contact-message {
        padding-left: 0px;
    }

    body.mobile-device #options-screen .page-support-contact-title {
        font-size: 1.1rem;
        margin-left: 0px;
    }

    body.mobile-device #options-screen .app-form-field-label {
        padding-left: 1px;
        font-size: .6rem !important;
    }

    body.mobile-device .dms-forgot-password {
        padding-top: .25rem;
    }

    body.mobile-device .dms-forgot-password-header {
        padding-bottom: 1rem;
        font-size: 1.5rem;
    }

    body.mobile-device .dms-forgot-password-message {
        font-size: 1rem;
    }

    body.mobile-device .dms-login-details-forgotPassword {
        font-weight: normal;
    }

    body.mobile-device .dms-login-details-signup-link {
        font-weight: normal;
    }

    body.mobile-device .dms-signup-details-signup-link {
        font-weight: normal;
    }

    body.mobile-device .app-form-select {
        font-size: 1.1rem;
        padding: .7rem .5rem;
    }

    body.mobile-device .dms-on-demand-selection-section-summary-submit-button {
        font-weight: normal;
    }

    body.mobile-device #options-screen .page-details-update-body .app-form-field-input,
    body.mobile-device #options-screen .page-details-update-body .app-form-select,
    body.mobile-device #options-screen .page-email-update-body .app-form-field-input,
    body.mobile-device #options-screen .page-email-update-body .app-form-select,
    body.mobile-device #options-screen .page-password-update-body .app-form-field-input,
    body.mobile-device #options-screen .page-password-update-body .app-form-select {
        font-size: .9rem;
    }

    body.mobile-device #options-screen .page-details-update-footer,
    body.mobile-device #options-screen .page-details-email-footer,
    body.mobile-device #options-screen .page-details-password-footer {
        margin-top: 0rem;
        padding-bottom: 1.25rem;
    }

    body.mobile-device #options-screen .page-details-update-title,
    body.mobile-device #options-screen .page-email-update-title,
    body.mobile-device #options-screen .page-password-update-title {
        margin-left: 0px;
        padding-left: 0px;
    }

    body.mobile-device #options-screen .page-details-update-message,
    body.mobile-device #options-screen .page-email-update-message,
    body.mobile-device #options-screen .page-password-update-message {
        margin-left: 0px;
        padding-left: 0px;
    }

    body.mobile-device #options-screen .sections-page .account-message {
        margin-left: 0px;
        padding-left: 0px;
    }

    body.mobile-device #options-screen .sections-page .subscription-message {
        margin-left: 0px;
        padding-left: 0px;
    }

    body.mobile-device #options-screen .page-subscription-cancel-message {
        margin-left: 0px;
        padding-left: 0px;
    }

    body.mobile-device #options-screen .page-support-contact-message {
        margin-left: 0px;
        padding-left: 0px;
    }

    body.mobile-device #options-screen .sections-page .section-support-info .section-row {
        /* padding-top: .0rem;*/
        font-size: .9rem;
        flex-direction: column;
        display: flex;
        align-items: start;
        padding-left: 0px;
        /*padding-bottom: .25rem;*/
    }

    body.mobile-device #options-screen .sections-page .section-account-info .section-row {
        /* padding-top: .0rem;*/
        font-size: .9rem;
        flex-direction: column;
        display: flex;
        align-items: start;
        padding-left: 0px;
        /*padding-bottom: .25rem;*/
    }

    body.mobile-device #search-keys .input-container {
        margin-left: .75rem;
        margin-right: .75rem;
    }

    body.mobile-device #search-sections {
        padding-top: 1.5rem;
    }

    body.mobile-device #search-screen .search-section > div.name {
        padding-top: 0px;
        font-size: 1.3rem;
        padding-left: .5rem;
    }

    body.mobile-device #main-screen.preferences .footer-links > .link-items-ex a,
    body.mobile-device #main-screen.search .footer-links > .link-items-ex a {
        font-size: .7rem;
        margin-right: 1.5rem;
        margin-left: 0rem;
    }

    body.mobile-device #main-screen.preferences .footer-links,
    body.mobile-device #main-screen.search .footer-links {
        padding-bottom: 1rem;
        padding-right: 1rem;
        padding-left: 1rem;
    }

        body.mobile-device #main-screen.preferences .footer-links > .copyright,
        body.mobile-device #main-screen.search .footer-links > .copyright {
            font-size: .7rem;
            margin-left: 1rem;
            margin-right: .25rem;
        }

    body.mobile-device .subscribe-screen .dms-on-demand-selection-section1 {
        min-width: unset;
    }

    body.mobile-device .dms-on-demand .dms-on-demand-actions .logo {
        padding-bottom: 0;
        padding-top: 0;
        top: 0;
        padding-top: 0;
        padding-left: 0;
        height: 70%;
        font-size: 1rem;
    }

    body.mobile-device .dms-on-demand .dms-on-demand-actions .logo {
        top: 1px;
        padding-left: 1px;
    }

        body.mobile-device .dms-on-demand .dms-on-demand-actions .logo img {
            height: 21px;
        }

    body.mobile-device .app-project-header {
        min-height: 59px;
    }

    body.mobile-device .dms-on-demand-actions .dms-on-demand-form-close {
        margin-right: 12px;
        top: -3px;
    }

    body.mobile-device .dms-on-demand.subscribe-screen .dms-on-demand-selection-section2 {
        min-width: unset;
    }

    body.mobile-device .player-data-header,
    .mobile-device.is-safari .player-data-header {
        margin-top: 37px;
    }

    body.mobile-device #player #playerSubtitles {
        bottom: 4rem !important;
    }

    body.mobile-device #player.showing-controls #playerSubtitles {
        bottom: 7.5rem !important;
    }

    body.mobile-device #player.showing-controls.has-up-next #playerSubtitles {
        bottom: 12.5rem !important;
    }

    body.mobile-device #playerSubtitlesDelay {
        font-size: 24px !important;
        top: 9rem !important;
    }



    body.mobile-device .library-group .name {
        font-size: 16px;
    }

    body.mobile-device .recent-date .name.section-button {
        font-size: 1.3rem;
        margin-left: .5rem !important;
    }

    body.mobile-device #search-screen {
        padding-top: 0rem;
    }

    body.mobile-device .media-details-ex .media-details-title {
        line-height: 2.6rem;
    }

    body.mobile-device .recent-grouping .library-group:first-of-type {
        margin-left: 7px !important;
    }

    body.mobile-device .items-page .recent-grouping .library-group:first-of-type {
        margin-left: 7px !important;
    }

    body.mobile-device #recent-dates {
        margin-left: 6px !important;
        margin-right: 6px !important;
    }

    body.mobile-device .media-layout-grid .media-tabs {
        margin-bottom: .5rem;
        margin-left: 1rem;
    }
    body.mobile-device #related-screen.media-layout-grid .media-tabs {
        margin-bottom: 2rem;
    }
    body.mobile-device #main-screen #related-screen.project-layout-media-page .project-header-page-header {
        height: 85vh;
    }


    body.mobile-device.fullscreen-quickaccess:not(.has-quick-access-items) .tab-page.has-categories .section-row {
        padding-top: 10.25rem;
    }

    body.mobile-device .media-details-ex .media-tagline {
        padding-bottom: 1rem;
    }

    body.mobile-device .media-layout-grid .library-group .image {
        min-height: 106px;
        /*height: 106px;*/
    }

    body.mobile-device #options-screen .sections-tabs button {
        margin-top: 5px;
        margin-bottom: 5px;
        padding: .25rem 1rem;
    }

    body.mobile-device .media-details-ex .media-buttons {
        padding-top: .5rem;
    }

    body.mobile-device #main-screen .project-widget-media-page.media-layout-3 .project-layout-media-page .media-info-container {
        margin-bottom: 1.5rem;
    }

    body.mobile-device #options-screen .sections-page .section-support-info .section-row {
        padding-left: 0px;
    }

    body.mobile-device #options-screen .sections-tabs {
        padding-top: 0rem;
    }

    body.mobile-device #options-screen .sections-page {
        padding: .5rem 1.5rem;
    }

        body.mobile-device #options-screen .sections-page .section-header {
            font-size: 1.1rem;
            margin-left: 0px;
        }

    body.mobile-device .media-layout-grid .media-tabs button {
        margin-right: 3.5rem;
    }

    body.mobile-device #recent-screen .library-groups-no-items > div {
        font-size: 1rem;
    }

    body.mobile-device .header-options {
        top: -2px;
    }

    body.mobile-device .app-project-header #button-options {
        padding-bottom: .25rem;
    }

    body.mobile-device #main-screen .project-widget-media-page .project-layout-media-page .project-header-page-header {
        padding-top: 6.5rem;
    }


    body.mobile-device #main-screen .tab-page.has-categories #recent-dates .recent-date {
        min-height: 240px;
    }

    body.mobile-device #main-screen .recent-date .recent-grouping {
        min-height: 240px;
    }

    body.mobile-device #main-screen .tab-page.has-categories #recent-dates .recent-date.top-ten-category {
        min-height: 250px;
    }

    body.mobile-device #main-screen .recent-date.top-ten-category .recent-grouping {
        min-height: 250px;
    }

    body.mobile-device #main-screen .tab-page.has-categories #recent-dates .recent-date.use-large-image {
        min-height: 275px;
    }

    body.mobile-device #main-screen .recent-date.use-large-image .recent-grouping {
        min-height: 275px;
    }

    body.mobile-device #main-screen .recent-date.display-round-image .recent-grouping {
        min-height: 180px;
    }

    body.mobile-device #main-screen .tab-page.has-categories #recent-dates .recent-date.display-round-image {
        min-height: 180px;
    }

    body.mobile-device #main-screen.home .recent-grouping .library-groups .library-group {
        margin-top: 10px;
    }

    body.mobile-device .recent-date.top-ten-category > .name,
    body.mobile-device .recent-date.top-ten-category .name.section-button {
        padding-bottom: .5rem !important;
        font-size: 4rem;
    }

    body.mobile-device .recent-date > .name-container .name-info {
        font-size: 1.4rem;
        margin-bottom: .5rem;
    }

    body.mobile-device .recent-date.display-round-image > .name-container {
        /* margin-bottom: .25rem;*/
    }

    .mobile-device .app-project-header-ex2-items {
        padding-left: .5rem;
        padding-right: .5rem;
        padding-top: .5rem;
        padding-bottom: .5rem;
        margin-bottom: 0px;
    }


    body.mobile-device .library-group-container,
    body.mobile-device .top-ten-category .library-groups > .library-group {
        margin-left: 3.75rem !important;
    }

    body.mobile-device .top-ten-category .recent-grouping .library-groups > .library-group:first-child {
        margin-left: 3.25rem !important;
    }

    body.mobile-device .library-group-container.ranking-10,
    body.mobile-device .top-ten-category .library-groups > .library-group.ranking-10 {
        margin-left: 7rem !important;
    }

    .mobile-device .player-data-summary {
        margin-top: .7rem;
    }

    #main-screen .project-layout-page.carousel .project-layout-page-info .project-layout-page-message-info,
    .project-layout-media-page .media-tagline {
        font-size: 1.2rem;
    }

    .project-layout-page.carousel .project-layout-page-info {
        padding-bottom: 10rem;
    }

    .topscreen-quickaccess #main-screen .section-quickaccess .carousel-indicators {
        bottom: 8.75rem;
    }

    .has-quickaccess #main-screen.home #recent-info {
        margin-top: -3rem;
    }


    .mobile-device #playerSubtitles {
        bottom: 2rem !important;
        left: 0 !important;
        right: 0 !important;
    }

    .mobile-device #player.showing-controls #playerSubtitles {
        bottom: 5rem !important;
    }

    body:not(.mobile-device) #player.showing-controls #playerSubtitles {
        /* bottom: 7rem !important;*/
    }

    .mobile-device #playerSubtitlesDelay {
        font-size: 16px !important;
        top: 1rem !important;
    }

    .mobile-device #playerSubtitlesInfo {
        font-size: 1.2rem !important;
        line-height: 1.6rem !important;
    }

    /*.default-page-widget-2 {
        padding-top: 3rem;
        padding-bottom: 2rem
    }
*/
    .mobile-device.is-safari #player #playerControls .share-button {
        font-size: 17px;
        margin-left: 0px;
        margin-right: -2px;
        position: relative;
        top: -1px;
    }

    .mobile-device.is-safari #player #playerControls .details-button {
        margin-left: 0;
        margin-right: 1px;
        font-size: 17px;
    }

    .mobile-device.is-safari #playerControls #playerSelectOptions i {
        font-size: 17px;
    }

    .mobile-device.is-safari #playerDataClose {
        font-size: 22px;
    }

    .mobile-device.is-safari #main-screen.related #recent-info {
        margin-top: -1.75rem;
    }

    .mobile-device.is-safari .player-data-summary {
        margin-left: 2.5rem;
    }

    .mobile-device.is-safari #playerControls #playerSelectOptions {
        margin-left: 4px;
    }

    .mobile-device.is-safari .library-group .container .buttons button.info-button i {
        font-size: 16px;
        margin-right: 0px;
    }

    .mobile-device.is-safari #main-screen .app-project-header img {
        height: 21px;
    }

    .mobile-device.is-safari #main-screen:not(.home, .media, .related, .brand, .category, .event) .body .tab-page {
        margin-top: 3.75rem;
    }

    .mobile-device.is-safari .app-project-header-ex2-items > button {
        padding-top: .25rem;
    }

    .mobile-device .app-project-header #button-options i {
        font-size: 1.3rem;
    }
}


/*iphone horizontal*/
@media only screen and (min-width: 500px) and (max-width: 1200px) and (min-height: 375px) and (max-height: 600px) {
}

/*iphone horizontal*/
@media only screen and (max-width: 1000px) and (max-height: 500px) {

    .mobile-device #playerSubtitles {
        bottom: 2.5rem !important;
    }

    .mobile-device #player.showing-controls #playerSubtitles {
        bottom: 3.5rem !important;
    }

    .mobile-device #player.showing-controls.has-up-next #playerSubtitles {
        bottom: 4.5rem !important;
    }

    .mobile-device #playerSubtitlesDelay {
        font-size: 16px !important;
        top: 1rem !important;
    }

    .mobile-device #playerSubtitlesInfo {
        font-size: 1.2rem !important;
        line-height: 1.4rem !important;
    }

    .mobile-device.is-safari #videoPlayback {
        padding: 1rem !important;
    }

    .mobile-device.is-safari .player-data-header {
        margin-top: 3.5rem !important;
    }

    .mobile-device.is-safari .player-data-summary {
        font-size: 1rem !important;
    }

    .mobile-device.is-safari #playerControls #playerDataSummary1 {
        font-size: 1.2rem !important;
        line-height: 1.2 !important;
        margin-bottom: 2px !important;
    }

    .mobile-device.is-safari #playerControls #playerDataSummary2 {
        font-size: .8rem !important;
    }

    .mobile-device.is-safari #playerControls #playerDataSummary3,
    .mobile-device.is-safari #playerControls #playerDataSummary4,
    .mobile-device.is-safari #playerControls #playerDataSummary5 {
        font-size: .7rem !important;
    }

    .mobile-device.is-safari #playerDataControls {
        top: 4rem !important;
        left: 11px !important;
    }

    .mobile-device.is-safari #playerDataUpNext {
        right: 56px !important;
        bottom: 105px !important;
    }

        .mobile-device.is-safari #playerDataUpNext #playerDataUpNext1 {
            max-width: 30%;
            white-space: normal;
        }

    .mobile-device.is-safari #playerDataUpNextLabel {
        font-size: 1.2rem !important;
    }

    .mobile-device.is-safari #playerDataUpNextButton {
        font-size: 1.6rem !important;
    }

    .mobile-device.is-safari #player-controls-container {
        bottom: 43px !important;
        left: 1rem !important;
        right: 17px !important;
    }
    .mobile-device.is-safari #player #playerControls .share-button {
        font-size: 17px;
        margin-left: 0px;
        margin-right: -1px;
    }
    .mobile-device.is-safari #player #playerControls .details-button {
        margin-left: 0;
        margin-right: 0;
        font-size:17px
    }
    .mobile-device.is-safari #playerDataClose {
        margin-left:2rem;
    }
    .mobile-device.is-safari .player-data-summary {
        margin-left: 4.5rem;
        margin-top:1.1rem;
    }

    /*.default-page-widget-2 {
        padding-top: 3rem;
    }
*/

    .mobile-device .dms-on-demand:not(.default-screen).fullscreen .project-header-page-header {
        padding-top: 6%;
    }
    .mobile-device .dms-on-demand:not(.default-screen).center-page-title .project-layout-page-message {
        font-size: 1.4rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
        line-height: 1.4;
    }
    .mobile-device .dms-on-demand:not(.default-screen).center-page-title .project-layout-page-data {
        max-width: 80%;
    }
    .mobile-device .dms-on-demand:not(.default-screen).fullscreen.relative .dms-on-demand-form {
        min-height: 95vh;
    }
    .mobile-device .dms-on-demand:not(.default-screen).center-page-title.has-image .project-layout-page-image-container img {
        margin-bottom: 1.5rem;
    }
    /*.default-page-widget-1 {
        padding: 0rem;
    }
    .default-page-widget-1 .section { 
        margin-top:-2rem;
    }
    .default-page-widget-1 .section-item { 
        padding: .5rem 2rem;
        max-width: 30rem;
    }
    .default-page-widget-1 .section-item-title {
        font-size: 1.4rem;
        margin-bottom: .5rem;
    }
    .default-page-widget-1 .section-item-description {
        font-size: 1.1rem;
    }
    .default-page-widget-2 .section-title {
        font-size: 1.5rem;
        font-weight: bold;
        margin-bottom: .25rem;
        text-align:center;
        width:100%;
    }
    .default-page-widget-2 {
        padding: 3rem 0rem;
        padding-bottom:2rem;
    }
    .default-page-widget-2 .recent-grouping .library-groups {
        padding-bottom: .25rem;
    }
    .default-page-widget-2 .section {
        max-width: 100vw;
    }
    
    .default-page-widget-2 .library-group .name {
        font-size:1rem !important;
        padding-bottom:1px;
    }
    .default-page-widget-2 .library-group .info .info1 {
        font-size: .9rem !important;
    }*/
    .mobile-device .library-group .container {
        padding: .75rem;
        padding-top: .4rem;
    }
    .mobile-device .library-group .container .buttons {
        padding-top:3px;
    }
    .mobile-device .library-group .container .buttons button.info-button {
        margin-right: .75rem;
    }
    /*.default-page-widget-3 {
        padding:0;
    }
    .default-page-widget-3 .section {
        max-width: 100vw;
    }*/
    
    /*.footer-links {
        margin-top: 0;
        margin-top: 2rem;
        padding-bottom: 3rem;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 5;
        margin-left: unset;
        margin-right: unset;
    }
    .footer-links > .copyright {
        order: 10;
        margin-top: 1rem;
    }
    .footer-links > .link-items { 
        margin-bottom: 1rem; 
        flex-wrap: wrap;
        justify-content: center;
        margin-left: 0;
        margin-right: 0;
    }
    .footer-links > .link-items a {
        margin-bottom: .5rem;
        margin-left: .5rem;
        margin-right: .5rem;
    }
    .footer-links > .link-items-ex { 
        margin-bottom: 1rem; 
        flex-wrap: wrap;
        justify-content: center;
        margin-left: 0;
        margin-right: 0;
    }
    .footer-links > .link-items-ex a {
        margin-bottom: .5rem;
        margin-left: .5rem;
        margin-right: .5rem;
    }
    body.dark-mode .footer-links .app-button {
        font-size: 1rem;
        padding: 10px 30px;
    }*/
}

/*iphone horizontal*/
@media only screen and (max-width: 800px) and (max-height: 400px) {

    .mobile-device #playerSubtitles {
        bottom: 2rem !important;
    }

    .mobile-device #player.showing-controls #playerSubtitles {
        bottom: 3rem !important;
    }

    .mobile-device #player.showing-controls.has-up-next #playerSubtitles {
        bottom: 4rem !important;
    }

    .mobile-device #playerSubtitlesDelay {
        font-size: 16px !important;
        top: 1rem !important;
    }

    .mobile-device #playerSubtitlesInfo {
        font-size: 1.2rem !important;
        line-height: 1.4rem !important;
    }
    
}


/* android vertical */
@media only screen and (min-width: 300px) and (max-width: 400px) and (min-height: 500px) and (max-height: 750px) {

    body.mobile-device .dms-forgot-password-send-email-button {
        min-width: 15rem;
    }
    body.mobile-device .dms-forgot-password-message {
        text-align: center;
        font-size: .9rem;
        padding-bottom: .5rem;
        line-height: 1.4;
        padding-top: .5rem;
    }
    body.mobile-device .dms-forgot-password-header {
        font-size: 1.4rem;
    }
    body.mobile-device .dms-forgot-password .dms-signup-details-signup {
        flex-direction: column;
    }
    body.mobile-device .dms-signup-details-signup-link {
        margin-left: 0rem;
        font-weight: unset;
        margin-top:.5rem;
    }

    body.mobile-device .dms-on-demand-selection-section1,
    body.mobile-device .dms-on-demand-selection-section2 {
        min-width: unset;
    }

    body.mobile-device.topscreen-quickaccess #main-screen .project-header-page-header {
        padding-top: 0;
        min-height: 100vh;
        padding-bottom: 1.5rem;
    }
    /*body.mobile-device .project-quick-access.full-info .project-layout-page-info {
        padding-bottom: 0;
    }*/
    body.mobile-device.fullscreen-quickaccess:not(.has-quick-access-items) .tab-page.has-categories .section-row {
        padding-top: 9rem;
    }
    /*body.mobile-device.widescreen-artwork .library-group .image {
        width: 100%;
        height: 105px;
        max-width: 230px;
        height: 129px;
    }*/
    body.mobile-device .top-ten-category .library-groups > .library-group {
        margin-left: 3.2rem !important;
    }
    body.mobile-device .top-ten-category .recent-grouping .library-groups > .library-group:first-child {
        margin-left: 2.7rem !important;
    }

    body.mobile-device .dms-on-demand.subscribe-screen .dms-on-demand-presentation-section-card-amount {
        font-size: 1.2rem;
    }
    body.mobile-device .dms-on-demand.subscribe-screen .dms-on-demand-presentation-section-card-pricing-type {
        font-size: 1rem;
    }
    body.mobile-device .dms-on-demand.subscribe-screen .dms-on-demand-selection-section-subscription-item i {
        font-size: 1.2rem;
    }
    body.mobile-device .dms-on-demand.subscribe-screen .dms-on-demand-selection-section-description {
        font-size: 1rem;
        text-align: left;
    }
    body.mobile-device .dms-on-demand-selection-section-signup-button {
        font-weight: unset;
    }
    body.mobile-device .dms-on-demand.subscribe-screen .dms-on-demand-selection-section-consent-message {
        font-size: .8rem;
    }
    body.mobile-device .dms-on-demand-selection-section-summary-submit-button {
        font-weight: unset;
        font-size: 1.2rem;
    }
    body.mobile-device .dms-on-demand.subscribe-screen .dms-on-demand-selection-section-signup-message {
        font-weight: unset;
    }
    body.mobile-device #options-screen {
        margin-top: 56px !important
    }
    body.mobile-device #options-screen .sections-page .section-header {
        font-size: 1rem;
        margin-left: 0px;
    }
    body.mobile-device #options-screen .sections-page .section-support-info .section-row {
        padding-left: 0px;
        font-size: .8rem;
    }
    body.mobile-device #options-screen .page-support-contact-title {
        font-size: 1rem;
        margin-left: 0px;
    }
    body.mobile-device #options-screen .page-support-contact-message {
        font-size: .8rem;
        line-height: 1.4;
        margin-bottom: 1rem;
        padding-left:0px;
    }
    #options-screen .sections-page .section-row {
        padding-top: .25rem;
        font-size: 1rem;
        font-size: .8rem;
        flex-direction: column;
        align-items: flex-start;
    }
    body.mobile-device #options-screen .sections-pages .app-form-field-label {
        padding-left: 0px;
        font-size: .7rem !important;
        text-transform: capitalize;
    }
    body.mobile-device #options-screen .page-support-contact-body .app-form-field-input {
        font-size: .8rem;
    }
    body.mobile-device #options-screen .sections-page .section-options > button:not(.custom-checkbox) {
        font-size: .8rem;
        padding: .75rem 1.25rem !important; 
        border-radius: 6px;
    }
    body.mobile-device #options-screen .page-support-contact-footer {
        margin-top: 0rem;
    }
    body.mobile-device #options-screen .page-subscription-cancel-message {
        font-size: .8rem;
        line-height: 1.4;
        margin-bottom: 1rem;
        padding-left: 0px;
    }
    body.mobile-device #options-screen .page-subscription-cancel-title {
        font-size: 1rem;
        margin-left: 0px;
    }
    body.mobile-device #options-screen .sections-page {
        padding: .5rem .7rem;
    }
    body.mobile-device #options-screen .page-subscription-cancel-footer button:not(.custom-checkbox) {
        font-size: .8rem;
        padding: .75rem 1.25rem !important;
        border-radius: 6px;
    }
    body.mobile-device #options-screen .page-support-contact-footer button:not(.custom-checkbox) {
        font-size: .8rem;
        padding: .75rem 1.25rem !important;
        border-radius: 6px;
    }
    body.mobile-device #options-screen .page-subscription-cancel-body .app-form-field-input {
        font-size: .8rem;
    }
    body.mobile-device #options-screen .sections-page .section-support-info .section-row span {
        line-height: 1.4;
    }
    body.mobile-device .messagebox #messagebox-message {
        font-size: 1rem;
        line-height: 1.4;
    }
    body.mobile-device .messagebox .messagebox-header span {
        font-size: .8rem;
    }
    body.mobile-device #options-screen .page-details-update-title,
    body.mobile-device #options-screen .page-email-update-title,
    body.mobile-device #options-screen .page-password-update-title {
        font-size: 1rem;
        margin-left: 0px;
    }
    body.mobile-device #options-screen .page-details-update-message,
    body.mobile-device #options-screen .page-email-update-message,
    body.mobile-device #options-screen .page-password-update-message {
        font-size: .8rem;
        line-height: 1.4;
        padding-left: 0px;
    }
    body.mobile-device #options-screen .page-details-update-body .app-form-field-input,
    body.mobile-device #options-screen .page-details-update-body .app-form-select,
    body.mobile-device #options-screen .page-email-update-body .app-form-field-input,
    body.mobile-device #options-screen .page-email-update-body .app-form-select,
    body.mobile-device #options-screen .page-password-update-body .app-form-field-input,
    body.mobile-device #options-screen .page-password-update-body .app-form-select {
        font-size: .8rem;
    }
    body.mobile-device #options-screen .page-details-update-footer button:not(.custom-checkbox),
    body.mobile-device #options-screen .page-email-update-footer button:not(.custom-checkbox),
    body.mobile-device #options-screen .page-password-update-footer button:not(.custom-checkbox) {
        font-size: .8rem;
        padding: .75rem 1.25rem !important;
        border-radius: 6px;
    }
    body.mobile-device #options-screen .page-details-update-footer,
    body.mobile-device #options-screen .page-details-email-footer,
    body.mobile-device #options-screen .page-details-password-footer {
        margin-top: 0;
        padding-bottom: 1.25rem;
    }
    body.mobile-device .sections-page section button.app-form-field-password-visible {
        font-size: .8rem;
    }

    .mobile-device #playerControls #position-completed {
        width: 40px !important;
        min-width: 40px !important;
        font-size: .6rem;
    }
    .mobile-device #playerControls #position-uncompleted {
        width: 43px !important;
        min-width: 43px !important;
        font-size: .6rem;
    }
    .mobile-device #playerDataControls {
        top: 1.75rem;
    }
    .mobile-device .player-data-summary {
        margin-left: 2.5rem;
    }
    .mobile-device .player-data-header {
        padding-right: 0rem;
        margin-right: 2rem;
    }
    .mobile-device:not(.is-safari) #player #playerControls .details-button {
        padding: 5px;
        font-size: 15px;
    }
    .mobile-device:not(.is-safari) #player #playerControls .share-button {
        padding: 5px;
        font-size: 15px;
    }
    .mobile-device #playerDataControls button {
        font-size: 20px;
        margin-left:0px;
    }
    .mobile-device #playerSelectOptions, 
    body.mobile-device #playerSelectOptions {
        margin-right: 20px;
    }
    .mobile-device #playerSelectOptions i {
        font-size: 15px;
    }
    .mobile-device #playerDataMute i {
        font-size: 14px;
        top: 0px;
    }
    .mobile-device #playerControls #player-control-buttons .previous-chapter .svg-icon {
        height: 11px;
    }
    .mobile-device #playerControls #player-control-buttons .control-button {
        font-size: .9rem;
    }
    .mobile-device #playerControls #player-control-buttons .next-chapter .svg-icon {
        height: 11px;
    }
    .mobile-device #playerOptionFullscreen {
        margin-left: 23px;
    }
    .mobile-device #playerOptionFullscreen i {
        font-size: 15px;
    }
    .mobile-device #playerControls #player-view-container {
        margin-left: .25rem;
        margin-right: .75rem;
    }
    .mobile-device #playerControls #player-control-buttons {
        margin-left: 0px;
        margin-right: 0rem;
        padding-left: 0px;
    }
    .mobile-device #player .media-details .media-tags {
        display:none;
    }
    .mobile-device #player .media-details .media-tagline {
        font-size: 1rem;
        line-height: 1.5;
    }
    .mobile-device #player .media-details .media-details-header {
        margin-bottom: 0;
    }
    .mobile-device #player .media-details .media-buttons {
        margin-top: .5rem;
    }
    .mobile-device #player .media-details .media-links button {
        margin-right: 1.15rem;
        margin-left: 1.15rem;
    }
    .mobile-device #player #playerSubtitles,
    .mobile-device #player.showing-controls #playerSubtitles {
        min-width: 100%;
        left: 0;
        right: 0;
    }
    #playerSubtitlesInfo {
        font-size: 16px;
        line-height: 1.5;
    }

    body.mobile-device .dms-on-demand-actions .dms-on-demand-form-close {
        /* margin-bottom: .15rem; */
        font-size: 17px;
        top: -7px;
        margin-right: .75rem;
        margin-left: 0;
        margin-bottom: 0;
    }
    body.mobile-device .login-screen .dms-on-demand-actions .dms-on-demand-form-close {
        /* margin-bottom: .15rem; */
        font-size: 17px;
        top: -7px;
        margin-right: .75rem;
        margin-left: 0;
        margin-bottom: 0;
    }
    body.mobile-device .dms-on-demand .dms-on-demand-actions .logo {
        padding-bottom: 0;
        padding-top: 0;
        top: 0;
        padding-top: 0;
        padding-left: 0;
        height: 70%;
        font-size: 1rem;
        padding-bottom: 0;
        padding-top: 0;
        top: 0px;
        padding-top: 0px;
        padding-left: 0px;
        height: 70%;
        font-size: 1rem;
    }
    body.mobile-device .dms-login-details-signup-message {
        margin-bottom: .25rem;
    }
    body.mobile-device .dms-login-details-signup-link {
        margin-left: 0;
         font-weight: unset;
    }
    body.mobile-device .dms-login-details-requestAccessCode,
    body.mobile-device .dms-login-details-forgotPassword {
        font-weight: unset;
    }
    body.mobile-device .dms-login-details-signup {
        flex-direction: column;
    }
    body.mobile-device .dms-login-details-login-button {
        min-width: 15rem;
    }

    body.mobile-device .dms-on-demand.default-screen.center-page-title.has-image .project-layout-page-image-container img {
        max-width: 17rem;
        margin-bottom: .5rem;
    }
    body.mobile-device .dms-on-demand.default-screen.center-page-title .project-layout-page-message {
        font-size: 1.1rem;
        padding-bottom: .5rem;
    }
    body.mobile-device .dms-on-demand.default-screen .project-header-page-header {
        padding-top: 13%;
    }
    body.mobile-device .default-page-widget-1 .section-item,
    body.mobile-device .default-page-widget-1 .section-item:first-of-type,
    body.mobile-device .default-page-widget-1 .section-item:last-of-type {
        max-width: 90%;
    }

    body.mobile-device .default-page-widget-1 {
        padding-top: 0rem;
        padding-bottom: 1rem;
    }

    body.mobile-device .default-page-widget-2 {
        padding-top: 1.5rem;
        padding-bottom: 2rem;
    }
    body.mobile-device .default-page-widget-2 .section-title {
        margin-bottom: 5px;
        font-size: 1.5rem;
    }
    body.mobile-device .default-page-widget-2 .section-button {
        padding-right: 0rem;
        margin-top: .25rem;
    }
    body.mobile-device .default-page-widget-3 .section-item {
        flex-direction: column;
        align-items: center;
    }
    body.mobile-device .default-page-widget-3 .section-item-title {
        margin-left: 0;
        text-align: center;
    }
    body.mobile-device .footer-links > .link-items {
        margin-bottom: 0rem;
    }
    body.mobile-device .footer-links > .link-items a {
        margin-bottom: 1.5rem;
    }
    body.mobile-device .footer-links > .link-items-ex {
        margin-bottom: 1rem;
    }

    body.mobile-device .recent-date.top-ten-category > .name,
    body.mobile-device .recent-date.top-ten-category .name.section-button {
        padding-bottom: 3px !important;
    }
    body.mobile-device .library-group .container .buttons {
        padding-top: 0px;
    }
    body.mobile-device .library-group .container .buttons button.info-button i {
        margin-right: 0rem;
    }
    body.mobile-device .recent-date > .name-container .name-info {
        margin-left: 1rem;
        font-size: 1.4rem;
        letter-spacing: 5px;
        margin-bottom: 5px;
    }
    body.mobile-device .recent-date.top-ten-category .name.section-button {
        font-size: 3.6rem;
        margin-left: 2rem;
    }
    body.mobile-device #main-screen.home .recent-grouping .library-groups .library-group {
        margin-top: 7px;
    }
    /*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 {
        margin-left: 3rem !important;
    }*/
    body.mobile-device .library-group .name {
        font-size: .9rem;
    }
    body.mobile-device .library-group .info {
        font-size: .7rem;
    }
    body.mobile-device .media-details-ex .media-details-header {
         margin-bottom: 0; 
    }
    body.mobile-device .media-details-ex .media-details-data {
        margin: 0rem 1.25rem;
        padding-bottom: 4rem;
    }
    body.mobile-device .media-details-ex .media-tagline {
        font-size: 1rem;
        padding-bottom: 1rem;
        line-height: 1.6;
    }
    body.mobile-device .media-details-ex .media-tags .media-tag {
        margin-bottom: 1.25rem;
        margin-right: 2.25rem;
    }
    body.mobile-device .media-details-ex.show,
    body.mobile-device #player .media-details.show {
        width: 100vw;
        max-width: 100vw;
    }
    body.mobile-device .media-details-ex .media-tags {
        margin-bottom: .75rem;
        margin-top: .75rem;
    }
    body.mobile-device .media-details-ex .media-links button {
        margin-left: 1.15rem;
        margin-right: 1.15rem;
    }
    /*body.mobile-device .media-details-ex .media-links .button-container {
        flex:1;
    }*/
    body.mobile-device .media-details-ex .media-buttons {
        padding-top: 1rem;
    }
    body.mobile-device .media-details-ex .media-tags {
        display:none;
    }
    body.mobile-device .media-details-ex .media-details-header {
        margin: .5rem;
        /*margin-bottom: 0;*/
    }
    body.mobile-device .media-details-ex .media-details-header .close-button {
        font-size: 1.4rem;
        margin: 0;
        margin-right: .5rem;
    }
    body.mobile-device .media-details-ex .media-details-title {
        padding-bottom: .0rem;
        font-size: 1.6rem;
        line-height: 1.5;
    }
    body.mobile-device #search-keys .input-container {
        margin-left: 12px;
        margin-right: 14px;
        margin-bottom: .25rem;
        margin-top: 5px;
    }
    body.mobile-device #search-screen {
        padding-top: 0rem;
    }
    body.mobile-device .app-project-header #button-options {
        margin-right: .25rem;
    }
    body.mobile-device #search-screen .library-groups {
        margin-left: 5px;
        margin-right: 5px;
    }
    body.mobile-device #search-screen .library-groups .library-group {
        margin-right: 8px;
    }
    body.mobile-device #options-screen .sections-tabs {
        padding-top: 0rem;
    }
    body.mobile-device #options-screen .sections-tabs button {
        margin-bottom: .25rem;
        margin-top: .25rem;
        padding:.25rem .75rem;
        padding-left:12px;
    }

    body.mobile-device .library-group {
        margin-right: 4px;
    }
   /* body.mobile-device .recent-grouping .library-group {
        margin-left: 1rem !important;
    }*/
    body.mobile-device #main-screen .tab-page.has-categories #recent-dates .recent-date {
        margin-top: 5px;
    }
    body.mobile-device #main-screen .recent-grouping {
        min-height: 230px;
    }
    body.mobile-device .library-group-container .ranking,
    body.mobile-device .top-ten-category .library-groups > .library-group .ranking {
        font-size: 6.5rem;
        bottom: -1.25rem;
        left: -54px;
    }
    .library-group .container .buttons button.info-button i {
        font-size: 15px;
    }
    body.mobile-device .library-group-container .ranking,
    body.mobile-device .library-group-container:hover .ranking,
    body.mobile-device .library-group-container:focus .ranking,
    body.mobile-device .library-group-container.focused .ranking,
    body.mobile-device .top-ten-category .library-groups > .library-group .ranking,
    body.mobile-device .top-ten-category .library-groups > .library-group:hover .ranking,
    body.mobile-device .top-ten-category .library-groups > .library-group:focus .ranking,
    body.mobile-device .top-ten-category .library-groups > .library-group.focused .ranking {
        font-size: 6rem;
        left: -51px;
        color:transparent !important;
    }
    body.mobile-device .library-group-container.ranking-1 .ranking,
    body.mobile-device .library-group-container.ranking-1:hover .ranking,
    body.mobile-device .library-group-container.ranking-1:focus .ranking,
    body.mobile-device .library-group-container.ranking-1.focused .ranking,
    body.mobile-device .top-ten-category .library-groups > .library-group.ranking-1 .ranking,
    body.mobile-device .top-ten-category .library-groups > .library-group.ranking-1:hover .ranking,
    body.mobile-device .top-ten-category .library-groups > .library-group.ranking-1:focus .ranking,
    body.mobile-device .top-ten-category .library-groups > .library-group.ranking-1.focused .ranking {
        left: -31px;
    }
    body.mobile-device .library-group-container.ranking-10,
    body.mobile-device .top-ten-category .library-groups > .library-group.ranking-10 {
        margin-left: 5.5rem !important;
    }

    body.mobile-device #main-screen .tab-page.has-categories #recent-dates .recent-date.top-ten-category {
        min-height: 235px;
    }
    body.mobile-device #main-screen .recent-date.top-ten-category .recent-grouping {
        min-height: 235px;
    }

    body.mobile-device #main-screen .recent-date.display-round-image {
        margin-top: -5px;
    }
    body.mobile-device #main-screen .recent-date.display-round-image .recent-grouping {
        min-height: 175px;
    }
    body.mobile-device #main-screen .tab-page.has-categories #recent-dates .recent-date.display-round-image {
        min-height: 175px;
    }

    body.mobile-device #main-screen .recent-date.use-large-image {
        margin-top: -5px;
    }
    body.mobile-device #main-screen .recent-date.use-large-image .recent-grouping {
        min-height: 270px;
    }
    body.mobile-device #main-screen .tab-page.has-categories #recent-dates .recent-date.use-large-image {
        min-height: 270px;
    }

    body.mobile-device.topscreen-quickaccess #main-screen .section-quickaccess .carousel-indicators {
        bottom: 6.5rem !important;
    }
    
    body.mobile-device #recent-screen .library-groups-no-items > div {
        font-size: 1rem;
    }

    body.mobile-device #main-screen .project-widget-media-page .project-layout-media-page .project-header-page-header {
        padding-top: 6rem;
    }
    body.mobile-device #main-screen .project-widget-media-page.media-layout-3 .project-layout-media-page #media-image {
        width: 125px;
        max-width: 125px;
        min-width: 125px;
        min-height: 125px;
        max-height: 125px;
        height: 125px;
    }
    body.mobile-device .project-widget-media-page.media-layout-3 .project-layout-media-page .media-buttons {
        margin-bottom: 0rem;
    }
    body.mobile-device .media-layout-grid .media-tabs {
        margin-bottom: .25rem;
        flex-wrap: nowrap;
        display: flex;
        margin-left: 13px;
        margin-right: 13px;
    }
    body.mobile-device .media-layout-grid .media-tabs button {
        font-size: 1rem;
        margin-right: 2.5rem;
    }
    body.mobile-device #main-screen .project-widget-media-page.media-layout-3 .project-layout-media-page .media-info-container {
        margin-bottom: 1rem;
        margin-top: 1rem;
    }
    body.mobile-device .project-widget-media-page .project-layout-media-page .media-title {
        font-size: 1.6rem;
        margin-top: 0;
    }
    body.mobile-device .project-widget-media-page.media-layout-3 .project-layout-media-page .media-tagline {
        /* margin-bottom: 1rem; */
        font-size: .9rem;
        line-height: 1.4;
        /* font-weight: unset; */
        margin-bottom: 1.5rem;
        margin-top: 1rem;
    }

    body.mobile-device #media-screen.media-layout-0.media-layout-grid .media-pages {
        top: -7.5rem;
        position: relative;
    }
    body.mobile-device.fullscreen-quickaccess #media-screen.media-layout-0 .project-header-page-header {
        padding-top: 0;
        min-height: 100vh;
        padding-bottom: 2.5rem;
    }
    body.mobile-device #media-screen.media-layout-0 .project-layout-media-page .media-tagline {
        font-size: 1rem;
        /* line-height: 1.5; */
        margin-bottom: 1rem;
    }
    body.mobile-device #media-screen.media-layout-0 .project-layout-media-page .media-title {
        line-height: 1.4;
        font-size: 1.6rem;
    }

    .mobile-device #playerControls #playerDataSummary1 {
        font-size: 1.2rem;
        line-height: 1.4;
    }
    .mobile-device #media-screen .project-layout-media-page .media-tagline {
        max-height: 105px;
    }
    .mobile-device #player.showing-controls #playerSubtitles {
        bottom: 215px;
    }
    .mobile-device #playerDataUpNextLabel {
        font-weight:unset;
    }
    body.mobile-device #player .media-details .media-details-data {
        margin: 0rem 1.25rem;
        padding-bottom: 0rem;
        padding-bottom: 4rem;
    }
    body.mobile-device .media-details-items-item .info .label1 {
        font-size: 1rem;
        padding-bottom: 3px;
        -webkit-line-clamp: 3;
        max-height: 63px;
    }
    body.mobile-device .media-details-items-item .info .label2 {
        font-size: .8rem;
    }
    body.mobile-device .media-details-items-item .info .label3 {
        font-size: .7rem;
    }
    body.mobile-device .media-details-items-item .info .label4 {
        font-size: .7rem;
    }
    body.mobile-device .media-details-pages-items .tagline {
        font-size: .9rem;
    }
    body.mobile-device .project-widget-media-page.media-layout-2 .project-layout-media-page .media-tagline {
        font-size: .9rem;
        margin-top: .5rem;
        margin-bottom: .5rem;
    }
    body.mobile-device .paywall-control .paywall-actions {
        align-items: center;
        display: flex;
        justify-content: center;
    }
    body.mobile-device .paywall-control .paywall-actions .app-button {
        font-size: .8rem;
        padding: .75rem 1.25rem !important;
    }
    body.mobile-device .paywall-body {
        background-color: rgba(0, 0, 0, 1);
        padding: 1.5rem 1rem;
        border-radius: 6px;
        margin: 1rem;
    }
    body.mobile-device .paywall-control .paywall-footer {
        align-items: center;
    }

    /*body.mobile-device .recent-grouping .library-group {
        margin-bottom: 8px !important;
    }
    body.mobile-device .recent-grouping .library-group:first-of-type {
        margin-left: 5px !important;
    }*/
    body.mobile-device .media-pages > .section-content {
        margin-left: 5px;
        margin-right: 5px;
    }
    body.mobile-device .library-group .container .buttons button.info-button i {
        font-size: 14px;
    }

    body.mobile-device #main-screen:not(.home, .media, .related, .brand, .category, .event) .body .tab-page {
        margin-top: 3.75rem;
    }
    body.mobile-device #main-screen .project-widget-media-page.media-layout-2 .project-layout-media-page .media-info-container {
        margin-bottom: 0rem;
    }
    body.mobile-device .media-layout-grid .recent-grouping .library-groups .library-group:first-child {
        margin-left: 5px !important;
    }
    body.mobile-device .project-widget-media-page.media-layout-2 .project-layout-media-page .media-buttons {
        margin-top: 1rem;
        margin-bottom:0rem;
    }
    body.mobile-device #search-keys input {
        font-size: 1rem;
    }

    body.mobile-device .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title,
    body.mobile-device .project-layout-page.carousel .project-layout-page-info.hide-image .project-layout-page-title,
    body.mobile-device .project-layout-page.carousel .project-layout-page-info.has-image .project-layout-page-title {
        line-height: 1.4;
        font-size: 1.6rem;
    }
    body.mobile-device .topscreen-quickaccess #main-screen .project-header-page-header {
        padding-top: 9rem;
    }
    body.mobile-device #main-screen .project-layout-page.carousel .project-layout-page-info .project-layout-page-message-info {
        font-size: 1rem;
    }

    body.mobile-device .app-project-header {
        min-height: 59px;
        padding-top: .25rem;
        padding-right: .25rem;
        padding-left: 12px;
    }

    .mobile-device .app-project-header-ex2-items {
        padding-left: 1px;
        padding-right: .3rem;
        padding-top: 0rem;
        padding-bottom: 0rem;
    }

    .mobile-device .app-project-header-ex2-items > button {
        padding-left: .5rem;
        padding-right: .5rem;
        padding-bottom: .5rem;
        padding-top: .5rem;
        margin-top: .25rem;
    }

    body.mobile-device #search-screen .search-section > div.name {
        font-size: 1.2rem;
        padding-left: 10px;
        padding-top: 10px;
        display:none;
    }

    #main-screen.preferences .footer-links, #main-screen.search .footer-links {
        display:none !important;
    }

    /*body.mobile-device #main-screen.search .footer-links {
        margin-left: 0px;
        padding-right: 15px;
        padding-left: 5px;
    }
    body.mobile-device .footer-links > .copyright {
        font-size: .6rem !important;
    }
    body.mobile-device .footer-links > .link-items-ex a {
        font-size: .6rem !important;
        margin-left: .5rem;
        margin-right: .5rem;
    }
*/
   /* body.mobile-device.topscreen-quickaccess.has-quickaccess .app-project-header-ex2,
    body.mobile-device.fullscreen-quickaccess.has-quickaccess .app-project-header-ex2,
    body.mobile-device.fullscreen-quickaccess.has-quickaccess #main-screen.media .app-project-header-ex2,
    body.mobile-device.fullscreen-quickaccess.has-quickaccess #main-screen.brand .app-project-header-ex2,
    body.mobile-device.fullscreen-quickaccess.has-quickaccess #main-screen.related .app-project-header-ex2,
    body.mobile-device.fullscreen-quickaccess.has-quickaccess #main-screen.category .app-project-header-ex2 {
        top: 59px;
    }*/
}


.mobile-device .library-types-scroll-button {
    display: none;
}

.mobile-device .library-groups {
    overflow: auto;
    overflow-x: visible;
    overflow-y: hidden;
}

.mobile-device .library-types-scroll-button {
    display: none !important;
}
.mobile-device .recent-grouping .library-groups {
    overflow-x: visible;
    overflow-y: hidden;
}

.mobile-device .recent-date .name.section-button .name-container-label .name-explore-all {
    display: none !important;
}

#playerControls.video .metadata-item-image {
    display: none;
}

.sections-pages .sections-page .section-row .app-form-field.form-switch {
    padding-left: .5rem;
    margin-bottom: 0 !important;
    position: relative;
    top: 4px;
}

.sp-original-input-container .sp-add-on .sp-colorize {
    margin-left: 0px !important;
    width: calc(100%) !important;
    margin-top: 0px !important;
    height: calc(100%) !important;
}


.project-layout .edit-layout-button {
    padding: 0.5rem;
    position: fixed;
    top: .7rem;
    z-index: 201;
    left: 0rem;
    transition: .3s !important;
    white-space: normal;
    max-width: 64px;
    color: dimgray;
}

body.edit-layout .project-layout .edit-layout-button {
    display: none;
}

.project-layout .edit-layout-button > div {
    font-size: .7rem;
    display: none;
    white-space: normal;
    font-weight: bold;
}

body.edit-layout .project-layout .edit-layout-button > div {
    display: block;
}

.project-layout .edit-project-button > div {
    font-size: .7rem;
}

body.edit-layout .project-layout .edit-layout-button {
    color: #0d6efd;
}
/*body.show-layout-menu .project-layout .edit-layout-button {
    left: 2.5rem;
    top: 0.1rem;
}*/
.project-layout-menu-buttons2 {
    display: none;
    align-items: center;
    flex-direction: column;
    /*display: flex;
    position: absolute;
    top: 0;
    left: 5rem;*/
    z-index: 201;
    padding-top: 17px;
    transition: .3s;
    width: 0px;
    overflow: hidden;
    border-right: solid 1px black;
    /*margin-left: -1px;
    margin-right: -1px;*/
}

/*body.dark-mode .project-layout-menu-buttons2 {
    background-color: rgba(20,20,20,1);
    background-color: rgba(0,0,0,.7);
    background-color: black;
}
*/
body.show-layout-menu .project-layout-menu-buttons2 {
    display: flex;
    width: 69px;
    overflow-y:auto;
    /*border-right: solid 1px rgba(100,100,100,.3);*/
}


.project-layout-menu-buttons {
    display: none;
    align-items: center;
    flex-direction: column;
    /*display: flex;
    position: absolute;
    top: 0;
    left: 5rem;*/
    overflow-y: auto;
    overflow-x: hidden;
    max-width: 4.5rem;
    min-width: 4.5rem;
    box-shadow: 0 1px 2px rgb(0 0 0 / 7%), 0 2px 4px rgb(0 0 0 / 7%), 0 4px 8px rgb(0 0 0 / 7%), 0 8px 16px rgb(0 0 0 / 7%), 0 16px 32px rgb(0 0 0 / 7%), 0 32px 64px rgb(0 0 0 / 7%);
}

body.edit-layout .project-layout-menu-buttons {
    display: flex;
    z-index: 201;
    padding-top: 13px;
    transition: .3s;
}
/*
body.dark-mode.show-layout-menu .project-layout-menu-buttons {
    background-color: black;
}*/

.project-layout-menu-buttons > button {
    padding: .5rem;
    white-space: normal;
    font-size: .7rem;
    width: 100%;
    /* max-width: 72px;
    width: 72px;*/
    /* height: 73px;*/
    /*border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;*/
}
/*.project-layout-menu-buttons > button > div {
    display:none;    
}*/
.project-layout-menu-buttons .select-project-button .fa-sitemap {
    font-size: 19px;
    margin-bottom: 7px;
}

.project-layout-menu-buttons > button.selected {
    opacity: 1 !important;
    background-color: rgba(20,20,20,1);
    background-color: rgba(0,0,0,.7);
    background-color: black;
    background: #0d6efd;
    border-right: solid 1px rgba(20,20,20,1);
    /* position: relative;
    left: -2px;*/
}

/*.has-select-all .app-navigation-subitems .app-navigation-item a {
    margin-left: -0.5rem;
}*/
/*.app-navigation-subitems .app-navigation-item > a .app-navigation-icon {
    display: none !important;
}*/

.project-layout-menu {
    font-family: 'Montserrat', sans-serif;
}

.project-layout-menu-content {
    width: 100%;
    height: 100%;
    display: none;
    width: 417px;
    background: black;
}
body.show-layout-menu .project-layout-menu-content {
    display:block;
}

.media-item-artwork .delete-icon-button {
    color: red;
    position: absolute;
    right: 0.3rem;
    top: 0.3rem;
}

body.dark-mode .project-layout-menu-content {
    /*background-color: rgba(20,20,20,1);
    background-color: rgba(0,0,0,.7);
    background-color: black;
    border-right: solid 1px rgba(100,100,100,.3);*/
}

.project-layout-menu .project-layout-menu-content-view {
    width: 100%;
    height: 100%;
}

.project-layout-menu .form-window-content {
    text-align: left;
    height: 100%;
}

body.light-mode .project-layout-menu {
    color: black;
    background-color: white;
}

body.dark-mode .project-layout-menu {
    color: white;
    /*background-color: rgba(20,20,20,1);*/ 
}

body.light-mode .project-layout-menu .form-window-content {
    color: black;
    background-color: white;
}

body.dark-mode .project-layout-menu .form-window-content {
    color: white;
    background-color: inherit;
}

body.light-mode .project-layout-menu .form-window-content {
    color: black;
    background-color: white;
}

body.dark-mode .project-layout-menu .form-window-content {
    color: white;
    background-color: inherit;
}

body.dark-mode .form-window-content .form-window-header {
    border-bottom: solid 1px rgba(100,100,100,.3);
}

body.light-mode .form-window-content .form-window-header button {
}

body.dark-mode .form-window-content .form-window-header button {
    color: white;
}

body.dark-mode .form-window-content > .content {
    background-color: inherit;
}

body.dark-mode .form-window-content .app-form-field-label {
    color: lightgray !important;
}
.form-window-content .app-form-field-label {
    padding-top:5px;
}

body.dark-mode #metadata-section textarea[disabled], body.dark-mode #metadata-section textarea[readonly] {
    color: #666 !important;
    background-color:transparent !important;
}

.project-layout-menu-content {
    position: relative;
}

    .project-layout-menu-content .loading-content {
        position: absolute;
        /*position: fixed;*/
        left: 0;
        top: 0;
        right: 0;
        background-color: rgba(0,0,0,.7);
        z-index: 5;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .project-layout-menu-content.save-all .loading-content {
        position: fixed;
    }

.project-layout .pad-top {
    padding-top: 1rem;
}

.project-layout .pad-top-sm {
    padding-top: .5rem;
}

.project-layout .pad-bottom {
    padding-bottom: 1rem;
}

.project-layout .form-window-fields-section {
    margin-bottom: 7px;
}

.project-layout .form-window-fields-section-header {
    display: flex;
    border-bottom: solid 1px #444;
    margin-bottom: 1rem;
    align-items: baseline;
    margin-left: 3px;
    margin-right: 3px;
}

.project-layout .form-window-fields-section.slim-header .form-window-fields-section-header {
    margin-bottom: .5rem;
}

.project-layout .form-window-fields-section-header label {
    text-transform: uppercase;
    font-size: .8rem !important;
    font-weight: bold;
    white-space: nowrap;
    flex: 1;
    margin-bottom: 5px;
    color: whitesmoke;
}

.form-window-fields-section .form-window-fields-section-header button {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 4px;
}

.project-layout .form-window-fields-section-header button i {
    font-size: .8rem !important;
    position: relative;
}
/*
.form-window-fields-section.is-hiding .form-window-fields-section-header button i {
    transform: rotateZ(180deg);
    position: relative;
    left: 0px;
    top: 0px;
    transition: .2s;
}
*/
.project-layout .form-window-fields-section-body {
    position: relative;
}

.project-layout .form-window-fields-section-body .subsection-options {
    padding-top: 12px;
    margin-left: 3px;
}

.project-layout .form-window-fields-section-body .subsection-noItems {
    margin-left: 0 !important;
}

.project-layout .form-window-fields-section-body header button {
    margin: .5rem;
    margin-bottom: 0;
}

    .project-layout .form-window-fields-section-body header button i.fa-plus {
        font-size: 1.1rem !important;
        position: relative;
        left: 2px;
    }

    .project-layout .form-window-fields-section-body header button i.fa-trash {
        font-size: 1rem !important;
    }

.project-layout .form-window-fields-section-body .library header {
    display: flex;
    align-items: flex-end;
    margin-bottom: 5px;
    margin-right: 5px;
    margin-left: 3px;
}

.project-layout .form-window-content .app-navigation-item .app-navigation-icon {
    display: none;
}

.project-layout .form-window-content .app-navigation-items.app-navigation-subitems {
    border: solid 1px #444;
    border-radius: 5px;
    max-height: 400px;
    overflow: auto;
    min-height: 40px;
    padding: 0rem;
}

.project-layout .form-window-content > .content > .container > .library {
    padding-top: 1rem;
}

    .project-layout .form-window-content > .content > .container > .library .subsection {
        margin-bottom: 1rem;
    }

    .project-layout .form-window-content > .content > .container > .library header {
        display: flex;
        flex: 1;
        padding: 0.2rem 1.4rem;
        align-items: end;
    }

        .project-layout .form-window-content > .content > .container > .library header label {
            font-size: .8rem;
            padding-bottom: 5px;
            /* padding-left: 3px; */
            user-select: none;
            /* padding-left: 5px; */
            text-transform: uppercase;
            font-size: .7rem !important;
            font-weight: 500;
            white-space: nowrap;
            flex: 1;
        }

body.dark-mode .project-layout .form-window-content > .content > .container > .library header label {
    color: lightgray !important;
}

body.light-mode .project-layout-menu .form-window-content .form-window-header {
    color: black;
    background-color: white;
}

body.dark-mode .project-layout-menu .form-window-content .form-window-header {
    color: white;
    background-color: inherit;
}

body.light-mode .form-window-content .form-window-header .form-window-title {
    color: black;
}

body.dark-mode .form-window-content .form-window-header .form-window-title {
    color: white;
}


.project-layout-menu .form-window-actions {
    flex-wrap: wrap;
}

.project-layout-menu .form-window-body .project-layout-menu button {
    margin-bottom: 0;
}

.project-layout .form-window-content > .content > .container {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 0;
}

    .project-layout .form-window-content > .content > .container > .library {
        width: 100%;
        display: flex;
        flex-direction: column;
        flex: 1;
    }

.project-layout-menu .form-window-content .app-navigation-item {
    flex: 1;
    display: flex;
}

.project-layout-page-category-items {
    display: flex;
    flex-direction: column;
    color: white;
    flex: 1;
}

.media-selection-icons {
    display: none;
    position: absolute;
    right: unset;
    top: -2.5rem;
}

body.edit-layout .media-selection-icons {
    display: flex;
}

.media-selection-icons button {
    padding: .5rem;
}

.media-selection-icons i {
    font-size: 20px !important;
}

.media-selection-icons .edit-icon-button {
    color: cornflowerblue;
}

.media-selection-icons .delete-icon-button {
    color: red;
}

.project-layout .add-category-button-container {
    padding: 0.5rem;
    display: none;
    margin-left: 4rem;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

body.edit-layout .project-layout .add-category-button-container {
    display: block;
}

.project-layout .project-category {
    padding: 2rem 0rem;
    padding-top: 0;
    padding-bottom: 0;
}

body.edit-layout .project-layout .project-category {
    padding-top: 2rem;
}

.project-layout-page-category-menu-item-container {
    position: relative;
    display: flex;
    align-items: baseline;
    transition: .3s;
    padding: 1.5rem 3.5rem;
    padding-top: 0px;
    padding-bottom: 0px;
}

.project-layout-page-category-menu-item {
    display: flex;
    align-items: baseline;
    opacity: 1;
}

.project-layout-page-category-menu-item-label {
    letter-spacing: 1px;
    font-size: 1.8rem;
    font-weight: 600;
    color: #E5E5E5;
}

.project-layout-page-category-menu-item:hover .project-layout-page-category-menu-item-label {
    color: white;
}

.project-layout-page-category-menu-item-link {
    display: flex;
    align-items: baseline;
    position: relative;
}

.project-layout-page-category-menu-item-link-label {
    transition: .5s;
    font-size: 1.2rem;
    padding-left: 1rem;
    opacity: 0;
    text-transform: uppercase;
}

.project-layout-page-category-menu-item:hover .project-layout-page-category-menu-item-link-label {
    opacity: 1;
}

.project-layout-page-category-menu-item-link-icon {
    transition: .5s;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    position: absolute;
    left: 0rem;
    top: 4px;
    font-size: 1rem;
}

.project-layout-page-category-menu-item:hover .project-layout-page-category-menu-item-link-icon {
    opacity: 1;
    left: 9.5rem;
}

.project-category-section-menu {
    display: flex;
    align-items: center;
    background-color: rgba(100,100,100,.1);
}

.project-category-section-menu-item-container {
    padding: 1px;
}

.project-category-section-menu-item {
    width: 1.5rem;
    height: 0.2rem;
    background-color: rgba(100,100,100,.3);
    border: solid 1px rgba(100,100,100,.3);
    padding: 1px;
}

.project-category-section-menu-item-container.selected {
    opacity: 1 !important;
}

    .project-category-section-menu-item-container.selected .project-category-section-menu-item {
        background-color: rgba(100,100,100,.5);
        border: solid 1px rgba(100,100,100,.5);
    }

.project-layout-page-category-container {
    display: flex;
    position: relative;
    align-items: center;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    /*overflow:hidden;*/
}

    .project-layout-page-category-container .slprev, .project-layout-page-category-container .slnext {
        display: flex !important;
        position: sticky;
        top: unset;
        margin: 0;
        padding: 4rem 1rem;
    }

    .project-layout-page-category-container .slprev {
        position: absolute;
        top: 0;
        left: 0;
        height: 295px;
        padding-top: 0;
        padding-bottom: 0;
        align-items: center;
    }

    .project-layout-page-category-container .slnext {
        position: absolute;
        top: 0;
        right: 0;
        height: 295px;
        padding-top: 0;
        padding-bottom: 0;
        align-items: center;
    }

    .project-layout-page-category-container .loader-io {
        flex: 1;
    }

.project-category-section {
    flex: 1;
    display: flex;
    align-items: center;
    padding-left: 3.5rem;
}

.media-selection {
    /* transition: .3s;*/
    border-radius: 5px;
    margin-right: 2px;
    margin-left: 2px;
    position: relative;
    width: 295px;
    height: 295px;
    /*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%);*/
}

    .media-selection.slow-transition {
        transition: none !important;
        z-index: 201;
    }
    /*.media-selection.is-ready {
    cursor: pointer;
    
}*/
    .media-selection.is-ready:hover,
    .media-selection.is-ready:focus,
    .media-selection.has-playback {
        transform: scale(1.1);
        z-index: 10;
    }

    /*.media-selection.fixed-window {
        transform: translateX(50%) !important;
        overflow: auto;
    }*/
    /*.media-selection.is-ready {
    background-color: transparent !important;
    box-shadow:none;
}*/
    .media-selection .image {
        background: rgba(50,50,50,.2);
        background: #1A1A1A;
        /*border: solid 1px #1A1A1A;*/
        overflow: hidden;
        position: relative;
        width: 295px;
        height: 295px;
        /*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-radius: 5px;
        display: flex;
    }

    .media-selection.is-ready:hover .image,
    .media-selection.is-ready:focus .image {
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
    }

    .media-selection.selected .image {
        background: rgba(100,100,100,.2);
        background: #242424;
    }

    .media-selection img {
        object-fit: contain;
        width: 100%;
        height: 100%;
        z-index: 3;
        transition: .3s;
    }

    .media-selection.fixed-window > .image.pad-image img {
        margin-top: 1rem;
        padding-bottom: 5.5rem;
    }

    .media-selection.fixed-window > image.contain-data img {
        margin-top: 0rem;
        padding-bottom: 0rem;
        position: absolute;
        width: unset;
        height: unset;
        bottom: 7rem;
        left: 2rem;
        max-width: 26rem;
    }

    .media-selection.has-playback > .image img {
        opacity: 0 !important;
        pointer-events: none;
    }

    .media-selection > .image.no-image > img {
        display: none !important;
    }

    .media-selection .background-image {
        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;
    }

    .media-selection.fixed-window > .image.contain-data .background-image {
        pointer-events: initial;
        transform: none;
        filter: none;
        opacity: 1;
    }

    .media-selection.has-playback > .image .background-image {
        opacity: 0 !important;
    }

    .media-selection > .image.no-image span {
        display: block;
    }

    .media-selection > .image span {
        font-size: 1.6rem;
        white-space: normal;
        color: #fff;
        padding: 5px;
        display: none;
    }

    .media-selection > .image .play-container {
        opacity: 0;
        transition: .1s;
    }

    .media-selection.is-ready:hover > .image .play-container,
    .media-selection.is-ready:focus > .image .play-container,
    .media-selection.has-playback > .image .play-container,
    .media-selection.fixed-window > .image .play-container {
        opacity: 1;
    }

    .media-selection > .image .play {
        position: absolute;
        left: 10px;
        bottom: 10px;
        font-size: 1.4rem;
        border-radius: 10px;
        /*box-shadow: 0 0 10px 1px rgb(0 0 0 / 30%);*/
        opacity: .7;
        transition: .3s;
        z-index: 5;
        display: none;
    }

    .media-selection.is-ready:hover > .image .play,
    .media-selection.is-ready:focus > .image .play,
    .media-selection.has-playback > .image .play {
        display: flex;
    }

    .media-selection.fixed-window > .image .play {
        display: none !important;
    }

    .media-selection > .image .info-container {
        opacity: 0;
        transition: .1s;
    }

    .media-selection.fixed-window > .image .info-container {
        display: none !important;
    }

    .media-selection.is-ready:hover > .image .info-container,
    .media-selection.is-ready:focus > .image .info-container,
    .media-selection.has-playback > .image .info-container {
        opacity: 1;
    }

    .media-selection > .image .info {
        position: absolute;
        right: 10px;
        bottom: 10px;
        font-size: 1.4rem;
        border-radius: 10px;
        /*box-shadow: 0 0 10px 1px rgb(0 0 0 / 30%);*/
        opacity: .7;
        transition: .3s;
        z-index: 5;
        display: none;
    }

    .media-selection.is-ready:hover > .image .info,
    .media-selection.is-ready:focus > .image .info,
    .media-selection.has-playback > .image .info {
        display: flex;
    }


    .media-selection > .image .close-container {
        opacity: 0;
        transition: .1s;
    }

    .media-selection.is-ready:hover > .image .close-container,
    .media-selection.is-ready:focus > .image .close-container,
    .media-selection.has-playback > .image .close-container,
    .media-selection.fixed-window > .image .close-container {
        opacity: 1;
    }

    .media-selection > .image .close {
        position: absolute;
        right: 10px;
        top: 10px;
        font-size: 1.4rem;
        border-radius: 10px;
        /* box-shadow: 0 0 10px 1px rgb(0 0 0 / 30%);*/
        opacity: .7;
        transition: .3s;
        z-index: 5;
        display: none;
    }

    .media-selection.fixed-window > .image .close {
        display: flex;
    }

    .media-selection > .wrapper .container {
        position: relative;
        padding-top: 10px;
        padding-left: 10px;
        padding-right: 7px;
        padding-bottom: 10px;
        transition: all .1s;
        /* min-height: 58px; */
        cursor: pointer;
        background-color: black;
        /*border: solid 1px #1A1A1A;*/
        width: 100%;
        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-radius: 5px;
        opacity: 0;
        pointer-events: none;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        margin-top: -1px;
    }

    .media-selection.fixed-window > .wrapper .container {
        opacity: 1;
        pointer-events: initial;
        box-shadow: none;
        background-color: transparent;
        cursor: default;
        height: 100%;
        box-shadow: none;
        margin-top: -5px;
        padding-left: 2rem;
        padding-right: 2rem;
        font-size: 2rem;
        padding-top: 0;
        margin-top: 0rem;
        top: -2rem;
        position: absolute;
        line-height: 1.1;
    }

    .media-selection.fixed-window > .wrapper {
        box-shadow: -20px -20px 40px 40px inherit;
        box-shadow: -20px -20px 75px 91px inherit;
        box-shadow: -20px -20px 50px 66px inherit;
        position: relative;
        z-index: 5;
    }

    .media-selection.is-ready:hover > .wrapper .container,
    .media-selection.is-ready:focus > .wrapper .container,
    .media-selection.has-playback > .wrapper .container {
        opacity: 1;
        pointer-events: initial;
    }

    .media-selection > .wrapper .container .name {
        font-size: 1.1rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .media-selection.fixed-window > .wrapper .container .name {
        font-size: 2.4rem;
        white-space: normal;
    }

    .media-selection > .wrapper .container .name2 {
        font-size: 1.6rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .media-selection > .wrapper .container .name3 {
        font-size: 1.4rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .media-selection > .wrapper .container .info {
        font-size: .8rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        padding-top: 2px;
    }

    .media-selection.fixed-window > .wrapper .container .info {
        display: none;
    }

    .media-selection iframe {
        position: absolute;
    }

/*.media-selection.fixed-window {
        border-radius: 6px;
        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%);
        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;
    }
*/
.project-layout-curtain {
    display: none;
    position: fixed;
    z-index: 200;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.7);
    opacity: 0;
    pointer-events: none;
    transition: .3s;
}

    .project-layout-curtain.show {
        display: flex;
    }

    .project-layout-curtain.reveal {
        opacity: 1;
        pointer-events: initial;
    }

.media-selection.fixed-window > .image {
    width: 100% !important;
    height: 55% !important;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    margin-bottom: 0.5rem;
}

.media-selection.fixed-window .background-gradient {
    background: linear-gradient(to top,inherit,transparent 50%);
}

.media-selection-info {
    display: none;
    position: absolute;
    left: 0;
    top: 73%;
}

.media-selection.fixed-window .media-selection-info {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    top: 80%;
    padding-left: 2rem;
    padding-right: 2rem;
    z-index: 10;
    top: unset;
    bottom: 3rem;
}

.media-selection.fixed-window .media-selection-data {
    width: 100%;
}

.media-selection-actions {
    display: flex;
    align-items: center;
    z-index: 5;
}

    .media-selection-actions .button-play {
        border-radius: 5px;
        color: black;
        background-color: white;
    }

        .media-selection-actions .button-play label {
            font-size: 1.4rem !important;
        }

    .media-selection-actions .button-love {
        font-size: 2rem;
        margin-left: 0.7rem;
        margin-right: 0.5rem;
    }

    .media-selection-actions .button-like {
        font-size: 2rem;
        margin-left: 0rem;
        margin-right: 0rem;
    }

.media-selection .container .header {
    display: none;
}

.media-selection.fixed-window .container .header {
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    padding-bottom: 0.5rem;
    padding-top: 0.5rem;
}

.media-selection.fixed-window .container .header-item {
    margin-left: 0rem !important;
    margin-right: 1rem !important;
    display: flex;
    align-items: center;
}

    .media-selection.fixed-window .container .header-item.rating label {
        border: solid 1px rgba(100,100,100.3);
        padding: 0.1rem 0.3rem;
        font-size: 1rem;
    }

    .media-selection.fixed-window .container .header-item.quality label {
        border: solid 1px rgba(100,100,100.3);
        padding: 0.1rem 0.3rem;
        font-size: .9rem;
        padding-top: 0.2rem;
        letter-spacing: 1px;
        border-radius: 5px;
    }

.media-selection .media-selection-description {
    display: none;
}

.media-selection.fixed-window .media-selection-description {
    display: block;
}

    .media-selection.fixed-window .media-selection-description > label {
        font-size: 1.2rem;
        line-height: 1.4;
        padding-top: 0.5rem;
        color: lightgray;
    }

.subsection .app-form-field {
    padding-bottom: .3rem;
}

.media-selection.fixed-window .app-form-edit-field.name .app-form-field {
    background-color: transparent;
}

.media-selection.fixed-window .app-form-edit-field.name .app-form-field-input {
    font-size: 2rem;
    background-color: transparent;
    color: inherit;
    padding: 0.5rem !important;
    border-color: rgba(100,100,100,.5) !important;
}

.media-selection.fixed-window .media-selection-description .app-form-field {
    background-color: transparent;
    height: 200px;
}

.media-selection.fixed-window .media-selection-description .app-form-field-input {
    font-size: 1.4rem;
    line-height: 1.4;
    background-color: transparent;
    color: inherit;
    padding: 0.5rem !important;
    border-color: rgba(100,100,100,.5) !important;
}

.media-selection.fixed-window .media-selection-description .app-form-field-input {
    font-size: 1.4rem;
    line-height: 1.4;
    background-color: transparent;
    color: inherit;
    padding: 0.5rem !important;
    border-color: rgba(100,100,100,.5) !important;
}

.media-selection-subitems {
    display: none;
}

.media-selection.fixed-window .media-selection-subitems {
    display: block;
}

.media-selection-subitems-header {
    padding-top: 2rem;
    border-bottom: solid 1px rgba(100,100,100,.3);
    margin-bottom: 1.6rem;
    padding-bottom: 0.7rem;
    display: flex;
    align-items: end;
}

.media-selection-subitems-header-title {
    font-size: 1.8rem;
    flex: 1;
}

.media-selection-subitems-header-selector-item {
    font-size: 1.2rem;
    background-color: rgb(30,30,30);
    padding: 0.7rem 1rem;
    border: solid 1px rgba(100,100,100,.3);
    cursor: pointer;
    border-radius: 5px;
    transition: .3s;
}

    .media-selection-subitems-header-selector-item:hover {
        background-color: rgb(40,40,40);
    }

    .media-selection-subitems-header-selector-item label {
        padding-right: 2rem;
    }

body.dark-mode .media-selection .app-button {
    background: rgba(100,100,100, .5);
    border-color: rgba(100,100,100, .5);
}

    body.dark-mode .media-selection .app-button:hover {
        background: rgb(100,100,100);
        border-color: rgb(100,100,100);
    }

    body.dark-mode .media-selection .app-button:focus {
        background: rgb(80,80,80);
        border-color: rgb(80,80,80);
    }

    body.dark-mode .media-selection .app-button:active {
        background: rgb(40,40,40);
        border-color: rgb(40,40,40);
    }



.project-quick-access-list {
}

.project-quick-access-items {
}

.project-quick-access-item {
    display: flex;
    overflow: hidden;
    position: relative;
    padding: 1.5rem 1rem;
    border-radius: 5px;
    background-color: transparent;
    transition: .3s;
    align-items: center;
    margin-bottom: .5rem;
}

.project-quick-access-item-index-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2.5rem;
    font-size: 2rem;
    width: 50px;
    min-width: 50px;
    padding-right: 3rem;
    padding-left: 2rem;
}

.project-quick-access-item-index {
}

.project-quick-access-item-image-container {
    width: 200px;
}

.project-quick-access-item-image {
    max-width: 150px;
    max-height: 150px;
    transition: .3s;
}

.project-quick-access-item-background-image {
    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;
    z-index: -1;
    WIDTH: 100%;
    height: 100%;
    background-color: black;
}

.project-quick-access-item-data-container {
    padding-left: 1rem;
}

.project-quick-access-item-title-container {
    display: flex;
}

.project-quick-access-item-title {
    font-size: 1.4rem;
    padding: 0.5rem 0rem;
    flex: 1;
    padding-top: 0;
}

.project-quick-access-item-info {
}

.project-quick-access-item-message {
    min-height: 7px;
    max-height: 5rem;
    overflow: auto;
}

.project-quick-access-item-image-container {
    position: relative;
}

.project-quick-access-item-icon-container {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    transition: .3s;
    opacity: 0;
}

.project-quick-access-item:hover .project-quick-access-item-icon-container {
    opacity: 1;
}

.project-quick-access-item:active .project-quick-access-item-icon-container {
    opacity: .7;
    transition-duration: 0;
}

.project-quick-access-item:hover .project-quick-access-item-image {
}

.project-quick-access-item:active .project-quick-access-item-image {
    opacity: 1;
    transition-duration: 0;
}

.project-quick-access-item .add-icon-button {
    opacity: .7;
    transition: .3s;
}

.project-quick-access-item:hover .add-icon-button {
    opacity: 1;
}

.project-quick-access-item:active .add-icon-button {
    opacity: .8;
    transition-duration: 0;
}

.project-quick-access-item:active,
.project-quick-access-item.selected {
    background-color: #333;
}

.project-quick-access-item-icons {
    display: flex;
    position: absolute;
    top: 0;
    right: 1rem;
}

.library-item .project-quick-access-item-icons {
    top: .5rem;
}

.project-quick-access-item-icons button {
    margin: .5rem;
}

    .project-quick-access-item-icons i {
        font-size: 20px !important;
    }

    .project-quick-access-item-icons .edit-icon-button {
        color: cornflowerblue;
    }

    .project-quick-access-item-icons .delete-icon-button {
        color: red;
    }

.project-layout .project-quick-access-item-icons {
    display: none;
    position: absolute;
    top: -1rem;
    right: unset;
}

body.edit-layout .project-layout .project-quick-access-item-icons {
    display: flex;
    display:none;
}
/*body.edit-layout .project-layout .project-quick-access-item-icons button {
    padding:0px;
}*/
.project-layout .project-quick-access-item-icons i {
    font-size: 14px !important;
}

.project-layout .project-layout-header-logo-image-container .project-quick-access-item-icons {
    top: -27px !important;
    right: unset !important;
}



.media-selection-spacer {
    display: none;
}

.media-selection.fixed-window .media-selection-spacer {
    display: block;
    height: 5rem;
    width: 100%;
}

.project-category-section-list {
}

.media-selection-subitems {
}

.media-selection-subitem {
    display: flex;
    overflow: hidden;
    position: relative;
    padding: 1.5rem 1rem;
    background-color: transparent;
    transition: .3s;
    align-items: flex-start;
    margin-bottom: .5rem;
    border-bottom: solid 1px rgba(100,100,100,.3);
}

.media-selection-subitem-index-container {
    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;
}

.media-selection-subitem-index {
}

.media-selection-subitem-image-container {
    width: 150px;
    max-width: 150px;
    min-width: 150px;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.media-selection-subitem-image {
    border-radius: 5px;
    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);
}

.media-selection-subitem-data-container {
    padding-left: 1rem;
}

.media-selection-subitem-title-container {
    display: flex;
    align-items: baseline;
}

.media-selection-subitem-title {
    font-size: 1.4rem;
    padding: 0.5rem 0rem;
    flex: 1;
    padding-top: 0;
    text-shadow: -1px 1px 2px rgb(0, 0, 0);
}

.media-selection-subitem-info {
    font-size: 1rem;
}

.media-selection-subitem-message {
    min-height: 7px;
    max-height: 10rem;
    overflow: auto;
    font-size: 1rem;
    line-height: 1.4;
    color: lightgray;
}

.media-selection-subitem-image-container {
    position: relative;
}

.media-selection-subitem-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);
}

.media-selection-subitem:hover .media-selection-subitem-icon-container {
    opacity: .5;
}

.media-selection-subitem:active .media-selection-subitem-icon-container {
    opacity: .5;
    transition-duration: 0;
}

.media-selection-subitem:hover .media-selection-subitem-image {
}

.media-selection-subitem:active .media-selection-subitem-image {
    opacity: 1;
    transition-duration: 0;
}

.media-selection-subitem .add-icon-button {
    opacity: .7;
    transition: .3s;
}

.media-selection-subitem:hover .add-icon-button {
    opacity: 1;
}

.media-selection-subitem:active .add-icon-button {
    opacity: .8;
    transition-duration: 0;
}

.media-selection-subitem:active,
.media-selection-subitem.selected {
    background-color: #333;
    border-radius: 5px;
}

.media-selection-subitem-icons {
    display: flex;
    position: absolute;
    top: 0;
    right: 1rem;
}

    .media-selection-subitem-icons button {
        padding: .5rem;
    }

    .media-selection-subitem-icons i {
        font-size: 20px !important;
    }

    .media-selection-subitem-icons .edit-icon-button {
        color: cornflowerblue;
    }

    .media-selection-subitem-icons .delete-icon-button {
        color: red;
    }

.project-layout .media-selection-subitem-icons {
    display: none;
    position: absolute;
    top: -1.5rem;
    right: 0rem;
}

body.edit-layout .project-layout .media-selection-subitem-icons {
    display: flex;
}
/*body.edit-layout .project-layout .media-selection-subitem-icons button {
    padding:0px;
}*/
.project-layout .media-selection-subitem-icons i {
    font-size: 14px !important;
}

.project-layout .project-layout-header-logo-image-container .media-selection-subitem-icons {
    top: -27px !important;
    right: unset !important;
}

.media-selection.fixed-window::-webkit-scrollbar {
    width: 4px !important;
    height: 4px !important;
}

.media-selection-subitem-details {
    display: none;
}
.app-navigation-subitems .app-navigation-item > a .app-navigation-spinner {
    margin-left: 0.5rem;
    margin-right: 0.2rem;
    padding: 0;
    background-color: transparent;
}

.form-window-content .app-navigation-subitems .app-navigation-item > a .app-navigation-icon {
    margin-right: 0.5rem !important;
    margin-left: 0.75rem;
    /* display: none;*/
    display: flex;
    justify-content: center;
    align-items: center;
}
/*
.form-window-content .app-navigation-item .button-edit {
    margin-left:1rem;
    margin-right:.5rem;
}
.form-window-content .app-navigation-item .button-delete {
    margin-left: .5rem;
    margin-right: 1rem;
}
*/
.form-window-content .app-navigation-item a .app-navigation-icon > span {
    position: relative;
    top: 3px;
}

.media-item-artwork img {
    object-fit: contain;
    width: 100%;
    height: 100%;
    max-height: 200px;
    max-width: 200px;
}

/*
.project-layout .form-window-fields-section-body header button.refresh-button {
    margin-left: .9rem;
}
*/
.app-sharing-content-buttons {
    display: flex;
    align-items: center;
    position: absolute;
    right: 1rem;
    top: 1rem;
    right: 10rem;
    top: -10rem;
    transition: .3s;
}

body.edit-layout .app-sharing-content-buttons {
    top: -2px;
}

.app-sharing-content-button {
    display: flex;
    align-items: center;
    padding: .3rem 1rem;
    border: solid 1px #0069D9;
    background-color: #0069D9;
    background-color: #1C1C22;
    border-color: #1C1C22;
    color: white;
    margin-left: 0rem;
    margin-right: 0rem;
    white-space: nowrap;
    cursor: pointer;
}

    .app-sharing-content-button:first-of-type {
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
    }

    .app-sharing-content-button:last-of-type {
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
    }

    .app-sharing-content-button > div {
        flex: 1;
        padding-right: 5px;
    }

    .app-sharing-content-button > i {
        padding: 5px;
        cursor: pointer;
    }





#search-wrapper {
    /*width:330px;*/
    flex: 1;
    background-color: #F5F5F5;
    /*border:solid 1px #c6c6c6;*/
    display: flex;
    flex-direction: column;
    color: #404040;
    font-size: 16px;
    border-top: none;
}

    #search-wrapper > .header {
        padding: 10px 20px;
        display: flex;
        padding-top: 0px;
    }

    #search-wrapper .tab-page > .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 10px;
        margin: 0 15px 5px 15px;
        border-bottom: solid 1px #d9d9d9;
        margin-bottom: 0;
    }

    #search-wrapper .actions .buffer {
        width: 40px;
    }

    #search-wrapper .actions {
        display: flex;
        flex-direction: column;
        padding-bottom: 10px;
    }

.app-header #search-wrapper .actions button {
    font-size: .7rem;
    border: solid 1px #b3b3b3;
    background-color: #fff;
    border-radius: 5px;
    padding: 1px 5px;
    padding-top: 3px;
    padding-bottom: 3px;
    margin-top: 5px;
}

    .app-header #search-wrapper .actions button:hover {
        color: #0069D9;
        border-color: #0069D9;
    }

    .app-header #search-wrapper .actions button:active {
        color: #fff;
        background-color: #0069D9;
    }

#search-wrapper .tab-page > section {
    overflow-y: auto;
    flex: 1;
    text-align: left;
}

#search-wrapper .item-count {
    color: #9a9aa2;
    font-size: .8rem;
    padding-bottom: 4px;
}


#search-wrapper .header .title {
    display: flex;
    flex-direction: column;
    text-align: left;
}

#search-wrapper section.main {
    flex: 1;
    display: flex;
    flex-direction: column;
    /*text-align:left;*/
}

/*#search-wrapper .label {
    font-size: .95em;
}
*/
#search-wrapper .media-no-items {
}

    #search-wrapper .media-no-items.hide {
        display: none;
    }

    #search-wrapper .media-no-items .media-item {
        justify-content: center;
        font-size: .75em;
    }

#search-wrapper .media-items {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 14px;
    cursor: default;
    margin-top: .5rem;
}

    #search-wrapper .media-items > li {
        margin-bottom: .5rem;
    }

#search-wrapper .media-item {
    display: flex;
    align-items: center;
    padding: 5px;
    position: relative;
    border-top: solid 1px transparent;
    border-bottom: solid 1px transparent;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 10px;
    width: 100%;
    cursor: default !important;
}

    #search-wrapper .media-item.hide {
        display: none;
    }

#search-wrapper .selected .media-item {
    color: #fff;
    background-color: #0069D9;
}

#search-wrapper .media-item .library-item-details {
    font-size: .7rem;
    /* text-align: right;*/
    display: none;
}

    #search-wrapper .media-item .library-item-details button {
        margin-left: 5px;
        margin-right: 5px;
    }

#search-wrapper .media-item .playback-indicator {
    width: 10px;
    padding-left: 3px;
    padding-right: 3px;
    display: none;
}

    #search-wrapper .media-item .playback-indicator img {
        display: none;
    }

#search-wrapper .media-item.playing .playback-indicator img {
    display: block;
}

#search-wrapper .media-item .artwork {
    margin-right: .7rem;
    margin-left: 0rem;
    max-width: 120px;
    box-shadow: 0px 3px 6px 2px rgba(163,157,163,0.31);
    /*border: solid 1px #D3D3D3;*/
    box-shadow: 0 1px 2px rgb(0 0 0 / 7%), 0 2px 4px rgb(0 0 0 / 7%), 0 4px 8px rgb(0 0 0 / 7%), 0 8px 16px rgb(0 0 0 / 7%), 0 16px 32px rgb(0 0 0 / 7%), 0 32px 64px rgb(0 0 0 / 7%);
}

#search-wrapper .media-item .artwork-list {
    position: relative;
    z-index: 5;
    margin-right: .7rem;
    left: -2px;
    top: -2px;
}

    #search-wrapper .media-item .artwork-list img {
        max-width: 120px;
        /*box-shadow: 0px 3px 6px 2px rgba(163,157,163,0.31);*/
        border: solid 1px #D3D3D3;
    }

    #search-wrapper .media-item .artwork-list.single-image img {
        box-shadow: 0px 3px 6px 2px rgba(163,157,163,0.31);
    }

    #search-wrapper .media-item .artwork-list img.before {
        left: 3px;
        top: 3px;
        z-index: -1;
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #eee;
    }

    #search-wrapper .media-item .artwork-list.double-image img.before {
        box-shadow: 0 5px 8px 0 rgba(0,0,0,0.1),0 3px 10px 0 rgba(0,0,0,0.1) !important;
    }

    #search-wrapper .media-item .artwork-list.single-image img.before {
        display: none;
    }

    #search-wrapper .media-item .artwork-list img.after {
        left: 6px;
        top: 6px;
        z-index: -2;
        box-shadow: 0 5px 8px 0 rgba(0,0,0,0.1),0 3px 10px 0 rgba(0,0,0,0.1) !important;
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #eee;
    }

    #search-wrapper .media-item .artwork-list.double-image img.after {
        display: none;
    }

    #search-wrapper .media-item .artwork-list.single-image img.after {
        display: none;
    }

#search-wrapper .media-item .media-info {
    flex: 1;
    text-align: left;
    width: 29rem;
    line-height:normal;
}

    #search-wrapper .media-item .media-info span {
        margin-right: 3px;
    }

        #search-wrapper .media-item .media-info span:last-child {
            margin-right: 0;
        }

    #search-wrapper .media-item .media-info .big {
        font-size: 1rem;
        white-space: nowrap;
        overflow-x: hidden;
        text-overflow: ellipsis;
        overflow: hidden;
        padding: 1px;
        /*max-width: 275px;*/
       /* max-width: 460px;*/
    }

    #search-wrapper .media-item .media-info .small {
        font-size: .9rem;
        /*color: dimgray;*/
        padding: 1px;
        padding-top: 3px;
        white-space: nowrap;
        overflow-x: hidden;
        text-overflow: ellipsis;
        overflow: hidden;
      /*  max-width: 275px;*/
    }

#search-wrapper .media-item.selected .media-info .small {
    color: inherit;
}

#search-wrapper .media-item .media-info .big .time {
    padding-left: 7px;
    font-size: .7em;
    color: dimgray;
    padding-top: 3px;
}

#search-wrapper .media-item .media-info .name, .media-item .media-info .album-name {
}

#search-wrapper .media-item .media-info > section {
    color: #9a9aa2;
}

#search-wrapper .media-item.selected .media-info > section {
    color: #fff;
}

#search-wrapper .media-item .remove-button {
    position: absolute;
    left: 2px;
    top: 20px;
    font-size: 1.1em;
    background-color: #d0d0d0;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    cursor: pointer;
}

#search-wrapper .media-item.selected .remove-button {
    background-color: #999;
}

#search-wrapper .media-item .remove-button .glyph {
    position: absolute;
    left: 2.5px;
    top: -3px;
    -webkit-user-select: none;
    user-select: none;
}

#search-wrapper .media-item .default {
    display: none;
}

#search-wrapper .no-items .media-item .default {
    display: block;
}

#search-wrapper .media-item .context-menu-button {
    position: absolute;
    right: 10px;
    top: 25px;
    font-size: 1.2em;
    width: 15px;
    height: 15px;
    color: #0069D9;
    display: none !important;
}

#search-wrapper .media-item.selected .context-menu-button {
    color: #fff;
}

#search-wrapper .media-item .context-menu-button .glyph {
    position: absolute;
    left: 1.5px;
    top: -6px;
    -webkit-user-select: none;
    user-select: none;
    display: none !important;
}

#search-wrapper .media-item .hover-button {
    display: none;
}

#search-wrapper .media-item:hover .hover-button {
    display: none !important;
}

#search-wrapper .media-item .hover-button.selected {
    display: none !important;
}

#search-wrapper .media-item:hover .hover-button:hover, .media-item:hover .hover-button.open {
}

#search-wrapper .media-item.selected .hover-button:hover, .media-item.selected:hover .hover-button.open {
    color: #fff;
}


#search-wrapper .media-item .cache-state {
    /*position: absolute;*/
    z-index: 5;
    /* display: flex; */
    /* flex: 1; */
    /*width: 200px;*/
    display: block;
    margin-right: 10px;
    position: relative;
    top: 0px;
    padding-top: 5px;
}

#search-wrapper .media-item.caching .cache-state {
    display: block;
}

#search-wrapper .media-item.temp-cached .cache-state {
    display: block;
}

#search-wrapper .media-item.perm-cached .cache-state {
    display: block;
}

#search-wrapper .media-item .cache-state .container {
    display: none;
    flex-direction: column;
}

#search-wrapper .media-item.caching .cache-state .container {
    display: flex;
}

#search-wrapper .media-item .cache-state .container .message {
    font-size: 9px;
    /*color: black;*/
    padding-bottom: 2px;
}

#search-wrapper .selected .media-item .cache-state .container .message {
    /* color:lightgray;*/
}

#search-wrapper .media-item .cache-state .container .progress {
    height: 4px;
    width: 100%;
    border: solid 1px lightgray;
    display: flex;
}

    #search-wrapper .media-item .cache-state .container .progress .percent {
        background-color: cornflowerblue;
    }

#search-wrapper .media-item .cache-state .cached-container {
    display: flex;
    flex-flow: column;
    align-items: flex-end;
}


    #search-wrapper .media-item .cache-state .cached-container .uncached {
        display: flex;
        font-size: 12px;
        color: gray;
        text-align: right;
        cursor: pointer;
    }

#search-wrapper .media-item.temp-cached .cache-state .cached-container .uncached {
    display: none;
}

#search-wrapper .media-item.perm-cached .cache-state .cached-container .uncached {
    display: none;
}

#search-wrapper .media-item.caching .cache-state .cached-container .uncached {
    display: none;
}

#search-wrapper .media-item.pre-cache .cache-state .cached-container .uncached {
    display: none;
}

#search-wrapper .media-item.selected .cache-state .cached-container .uncached {
    color: #fff;
}


#search-wrapper .media-item .cache-state .cached-container .caching {
    display: none;
    font-size: 12px;
    color: #1d8cf8;
    text-align: right;
    cursor: pointer;
}

#search-wrapper .media-item.temp-cached .cache-state .cached-container .caching {
    color: #1d8cf8;
}

#search-wrapper .media-item.perm-cached .cache-state .cached-container .caching {
    color: green;
}

#search-wrapper .media-item.pre-cache .cache-state .cached-container .caching {
    display: flex;
}

#search-wrapper .media-item.selected .cache-state .cached-container .caching {
    color: #fff;
}


#search-wrapper .media-item .cache-state .cached-container .cached {
    display: none;
    font-size: 12px;
    color: #1d8cf8;
    text-align: right;
    cursor: pointer;
}

#search-wrapper .media-item.temp-cached .cache-state .cached-container .cached {
    display: flex;
}

#search-wrapper .media-item.perm-cached .cache-state .cached-container .cached {
    display: flex;
    color: green;
}

#search-wrapper .media-item.pre-cache .cache-state .cached-container .cached {
    display: none !important;
}

#search-wrapper .media-item.caching .cache-state .cached-container .cached {
    display: none !important;
}

#search-wrapper .media-item.selected .cache-state .cached-container .cached {
    color: #fff;
}



#search-wrapper .app-header-info {
    display: none;
    flex: 1;
    justify-content: center;
    padding-top: 0px;
}

#search-wrapper .app-header-tab {
    padding-left: 10px;
    padding-right: 10px;
    border: solid 1px silver;
    background-color: rgb(221, 221, 221);
    padding-top: 3px;
    padding-bottom: 3px;
    text-align: center;
    font-size: .75em;
    transition: .2s ease-in-out;
}

    #search-wrapper .app-header-tab:hover {
        background-color: silver;
    }

    #search-wrapper .app-header-tab.select {
        background-color: #0069D9;
        border-color: #0069D9;
        color: white;
    }

    #search-wrapper .app-header-tab.left {
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        border-right: none;
    }

    #search-wrapper .app-header-tab.right {
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        border-left: none;
    }

#search-wrapper .section-header-label {
    font-size: 1rem;
    padding: .5rem;
    padding-bottom: 5px;
    padding-top: 0;
    padding-left:1rem;
    display:none;
}

#search-wrapper .section-header-info {
    padding: .5rem 0;
    font-size: .8rem;
    font-style: italic;
    /*padding-top:10px;*/
    display: none;
}

#search-wrapper.no-items .section-header-info {
    display: block;
}

#search-wrapper.is-searching .section-header-info {
    display: block;
}

#search-wrapper .has-items .section-header-info {
    display: block;
    padding: 0;
}

#search-wrapper .section-header-info > span.more-items {
    color: royalblue;
    text-decoration: underline;
    font-style: normal;
}

#search-wrapper .section-header-info > span.all-items {
    font-style: normal;
}

#search-wrapper .section-header-info > span.all-items {
    font-style: normal;
}

#search-wrapper .section-items {
}

#search-wrapper .section-item {
}

#search-wrapper .section-container {
    padding-top: 10px;
    padding-left: 0px;
}

.loading-content .loading-container {
    padding-top: 5px;
    display: flex;
    align-items: center;
    font-style: italic;
}
.loading-content.static {
    position: absolute;
    background-color: rgba(0,0,0,.3);
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index:100;
}
    .loading-content .loading-container label {
        padding-left: 5px;
        padding-top: 2px;
    }



#search-queue-container {
    display: none;
    opacity: 1;
    color: #fff;
    text-align: center;
    margin: 5px 0;
    border-radius: 5px;
    position: absolute;
    z-index: 15001;
    top: 48px;
    left: 0px;
    border: solid 0px lightgray;
    /*border-left:none;
    border-right:none;*/
    box-shadow: 0px 3px 6px 2px rgba(163, 157, 163, 0.25);
    margin-bottom: 3px;
    background-color: #1C1C22;
}

body.light-mode #search-queue-container {
    background-color: whitesmoke;
}
body.dark-mode #search-queue-container {
    box-shadow: 0 1px 2px rgb(0 0 0 / 7%), 0 2px 4px rgb(0 0 0 / 7%), 0 4px 8px rgb(0 0 0 / 7%), 0 8px 16px rgb(0 0 0 / 7%), 0 16px 32px rgb(0 0 0 / 7%), 0 32px 64px rgb(0 0 0 / 7%);
    box-shadow: 0 16px 38px -12px rgb(0 0 0 / 56%), 0 4px 25px 0 rgb(0 0 0 / 12%), 0 8px 10px -5px rgb(0 0 0 / 20%);
}

    #search-queue-container.show {
        display: flex;
        opacity:1;
    }

    #search-queue-container.reveal {
        opacity: 1;
    }

#search-queue-container .before {
    display: block;
    content: " ";
    position: absolute;
    bottom: 100%;
    /* At the top of the tooltip */
    left: 50%;
    right: unset;
    margin-left: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent #1C1C22 transparent;
    pointer-events: none;
}


#search-wrapper .main > .header {
    display: flex;
    /*align-items: center;*/
    justify-content: space-between;
    /*padding-bottom: 8px;*/
    margin: 0 15px 5px 15px;
    border-bottom: solid 1px #d9d9d9;
    margin-bottom: 0;
    align-items: baseline;
    padding-left: 0.5rem;
}

#search-wrapper .main section.content {
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    text-align: left;
    min-width: 400px;
    max-height: 450px;
    min-height: 450px;
    padding-left: 0px;
    padding-bottom: 10px;
}

#search-wrapper .item-count {
    color: #9a9aa2;
    font-size: .7rem;
}


#search-wrapper header .title {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#search-wrapper header .description {
    padding-left: 4px;
}

#search-wrapper section.main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

#search-wrapper .tab-page {
    opacity: 0;
}

    #search-wrapper .tab-page.show {
        opacity: 1;
    }

#search-wrapper header .title {
    color: #404040;
    margin-bottom: 2px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 12px;
}

#search-wrapper .label {
    font-size: 1.2rem;
    /* padding-top: 1px; */
    text-align: left;
    padding-left: 0px;
    padding-top: 5px;
}

#search-wrapper .section-header-info .showMoreLink {
    display: none;
}

#search-wrapper.no-items .section-header-info .showMoreLink {
    display: block;
    padding-top: 3px;
    font-size: .9rem;
}

#search-wrapper .section-header-info .loading-status {
    display: none;
}

#search-wrapper.is-searching .section-header-info .loading-status {
    display: block;
}

#search-wrapper.is-searching .section-header-info .showMoreLink {
    display: none;
}

#search-wrapper .section-header-info .loading-container {
    justify-content: center;
}



#search-wrapper {
    background-color: unset;
    color: white;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

    #search-wrapper .item-count {
        color: white;
    }

    #search-wrapper header .title {
        color: white;
    }

/*.app-form-field-autocomplete-selection {
    max-height: 500px;
    height: 500px;
}*/

    .app-form-field-autocomplete-selection .form-window-body {
        padding-left: 0rem;
        padding-right: 0rem;
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 0px;
    }

#search-wrapper .main section.content {
    min-width: 30.5vw;
    max-height: unset;
    overflow: unset;
    min-height: unset;
    overflow: auto;
    position: relative;
}
.form-window-content #search-wrapper {
    margin-left: 0rem; 
    margin-right: 0rem;
}
.form-window-content #search-wrapper .main section.content {
    min-width: unset;
    overflow-x: hidden;
}

.form-window-content .form-window-footer {
    margin-left: .5rem;
    margin-right: .5rem;
    padding-bottom: 0;
    margin-bottom: 0.5rem;
}

.media-field-search .app-page-row-textbox > .media-item .artwork {
    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%);
}

#search-queue-container {
    display: none;
}

#search-wrapper .main > .header {
    border-color: rgba(100,100,100,.3);
}

.app-search-content-button-icon-down {
    display: none;
}

#search-wrapper .content-items {
    position: absolute;
    width: 100%;
}

.media-field-search {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
}

    .media-field-search .form-window-content .content > .container {
        display: flex;
        flex-direction: column;
        flex: 1;
        max-width:100%;
    }

    .media-field-search .media-item {
        display: flex;
    }



    .media-field-search .app-page-row-textbox > .media-item {
        display: flex;
        align-items: center;
        padding: 5px;
        position: relative;
        border-top: solid 1px transparent;
        border-bottom: solid 1px transparent;
        padding-top: 7px;
        padding-bottom: 7px;
        padding-left: 10px;
        width: 100%;
        cursor: default !important;
    }

        .media-field-search .app-page-row-textbox > .media-item.hide {
            display: none;
        }

#search-wrapper .selected .media-item {
    color: #fff;
    background-color: #0069D9;
}

.media-field-search .app-page-row-textbox > .media-item .library-item-details {
    font-size: .7rem;
    /* text-align: right;*/
    display: none;
}

    .media-field-search .app-page-row-textbox > .media-item .library-item-details button {
        margin-left: 5px;
        margin-right: 5px;
    }

.media-field-search .app-page-row-textbox > .media-item .playback-indicator {
    width: 10px;
    padding-left: 3px;
    padding-right: 3px;
    display: none;
}

    .media-field-search .app-page-row-textbox > .media-item .playback-indicator img {
        display: none;
    }

.media-field-search .app-page-row-textbox > .media-item.playing .playback-indicator img {
    display: block;
}

.media-field-search .app-page-row-textbox > .media-item .artwork {
    margin-right: .7rem;
    margin-left: 0rem;
    max-width: 68px;
    box-shadow: 0px 3px 6px 2px rgba(163,157,163,0.31);
    /*border: solid 1px #D3D3D3;*/
}

.media-field-search .app-page-row-textbox > .media-item .artwork-list {
    position: relative;
    z-index: 5;
    margin-right: .7rem;
    left: -2px;
    top: -2px;
}

    .media-field-search.app-page-row-textbox > .media-item .artwork-list img {
        max-width: 60px;
        /*box-shadow: 0px 3px 6px 2px rgba(163,157,163,0.31);*/
        border: solid 1px #D3D3D3;
    }

    .media-field-search .app-page-row-textbox > .media-item .artwork-list.single-image img {
        box-shadow: 0px 3px 6px 2px rgba(163,157,163,0.31);
        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%);
    }

    .media-field-search .app-page-row-textbox > .media-item .artwork-list img.before {
        left: 3px;
        top: 3px;
        z-index: -1;
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #eee;
    }

    .media-field-search .app-page-row-textbox > .media-item .artwork-list.double-image img.before {
        box-shadow: 0 5px 8px 0 rgba(0,0,0,0.1),0 3px 10px 0 rgba(0,0,0,0.1) !important;
    }

    .media-field-search .app-page-row-textbox > .media-item .artwork-list.single-image img.before {
        display: none;
    }

    .media-field-search .app-page-row-textbox > .media-item .artwork-list img.after {
        left: 6px;
        top: 6px;
        z-index: -2;
        box-shadow: 0 5px 8px 0 rgba(0,0,0,0.1),0 3px 10px 0 rgba(0,0,0,0.1) !important;
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #eee;
    }

    .media-field-search .app-page-row-textbox > .media-item .artwork-list.double-image img.after {
        display: none;
    }

    .media-field-search .app-page-row-textbox > .media-item .artwork-list.single-image img.after {
        display: none;
    }

.media-field-search .app-page-row-textbox > .media-item .media-info {
    flex: 1;
    text-align: left;
}

    .media-field-search .app-page-row-textbox > .media-item .media-info span {
        margin-right: 3px;
    }

        .media-field-search .app-page-row-textbox > .media-item .media-info span:last-child {
            margin-right: 0;
        }

    .media-field-search .app-page-row-textbox > .media-item .media-info .big {
        font-size: 1rem;
        white-space: nowrap;
        overflow-x: hidden;
        text-overflow: ellipsis;
        overflow: hidden;
        padding: 1px;
        max-width: 275px;
    }

    .media-field-search .app-page-row-textbox > .media-item .media-info .small {
        font-size: .9rem;
        /*color: dimgray;*/
        padding: 1px;
        padding-top: 3px;
        white-space: nowrap;
        overflow-x: hidden;
        text-overflow: ellipsis;
        overflow: hidden;
        max-width: 275px;
    }

.media-field-search .app-page-row-textbox > .media-item.selected .media-info .small {
    color: inherit;
}

.media-field-search .app-page-row-textbox > .media-item .media-info .big .time {
    padding-left: 7px;
    font-size: .7em;
    color: dimgray;
    padding-top: 3px;
}

.media-field-search .app-page-row-textbox > .media-item .media-info .name, .media-item .media-info .album-name {
}

.media-field-search .app-page-row-textbox > .media-item .media-info > section {
    color: #9a9aa2;
}

.media-field-search .app-page-row-textbox > .media-item.selected .media-info > section {
    color: #fff;
}

.media-field-search .app-page-row-textbox > .media-item .remove-button {
    position: absolute;
    left: 2px;
    top: 20px;
    font-size: 1.1em;
    background-color: #d0d0d0;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    cursor: pointer;
}

.media-field-search .app-page-row-textbox > .media-item.selected .remove-button {
    background-color: #999;
}

.media-field-search .app-page-row-textbox > .media-item .remove-button .glyph {
    position: absolute;
    left: 2.5px;
    top: -3px;
    -webkit-user-select: none;
    user-select: none;
}

.media-field-search .app-page-row-textbox > .media-item .default {
    display: none;
}

#search-wrapper .no-items .media-item .default {
    display: block;
}

.media-field-search .app-page-row-textbox > .media-item .context-menu-button {
    position: absolute;
    right: 10px;
    top: 25px;
    font-size: 1.2em;
    width: 15px;
    height: 15px;
    color: #0069D9;
    display: none !important;
}

.media-field-search .app-page-row-textbox > .media-item.selected .context-menu-button {
    color: #fff;
}

.media-field-search .app-page-row-textbox > .media-item .context-menu-button .glyph {
    position: absolute;
    left: 1.5px;
    top: -6px;
    -webkit-user-select: none;
    user-select: none;
    display: none !important;
}

.media-field-search .app-page-row-textbox > .media-item .hover-button {
    display: none;
}

.media-field-search .app-page-row-textbox > .media-item:hover .hover-button {
    display: none !important;
}

.media-field-search .app-page-row-textbox > .media-item .hover-button.selected {
    display: none !important;
}

.media-field-search .app-page-row-textbox > .media-item:hover .hover-button:hover, .media-item:hover .hover-button.open {
}

.media-field-search .app-page-row-textbox > .media-item.selected .hover-button:hover, .media-item.selected:hover .hover-button.open {
    color: #fff;
}


.media-field-search .app-page-row-textbox > .media-item .cache-state {
    /*position: absolute;*/
    z-index: 5;
    /* display: flex; */
    /* flex: 1; */
    /*width: 200px;*/
    display: block;
    margin-right: 10px;
    position: relative;
    top: 0px;
    padding-top: 5px;
}

.media-field-search .app-page-row-textbox > .media-item.caching .cache-state {
    display: block;
}

.media-field-search .app-page-row-textbox > .media-item.temp-cached .cache-state {
    display: block;
}

.media-field-search .app-page-row-textbox > .media-item.perm-cached .cache-state {
    display: block;
}

.media-field-search .app-page-row-textbox > .media-item .cache-state .container {
    display: none;
    flex-direction: column;
}

.media-field-search .app-page-row-textbox > .media-item.caching .cache-state .container {
    display: flex;
}

.media-field-search .app-page-row-textbox > .media-item .cache-state .container .message {
    font-size: 9px;
    /*color: black;*/
    padding-bottom: 2px;
}

#search-wrapper .selected .media-item .cache-state .container .message {
    /* color:lightgray;*/
}

.media-field-search .app-page-row-textbox > .media-item .cache-state .container .progress {
    height: 4px;
    width: 100%;
    border: solid 1px lightgray;
    display: flex;
}

    .media-field-search .app-page-row-textbox > .media-item .cache-state .container .progress .percent {
        background-color: cornflowerblue;
    }

.media-field-search .app-page-row-textbox > .media-item .cache-state .cached-container {
    display: flex;
    flex-flow: column;
    align-items: flex-end;
}


    .media-field-search .app-page-row-textbox > .media-item .cache-state .cached-container .uncached {
        display: flex;
        font-size: 12px;
        color: gray;
        text-align: right;
        cursor: pointer;
    }

.media-field-search .app-page-row-textbox > .media-item.temp-cached .cache-state .cached-container .uncached {
    display: none;
}

.media-field-search .app-page-row-textbox > .media-item.perm-cached .cache-state .cached-container .uncached {
    display: none;
}

.media-field-search .app-page-row-textbox > .media-item.caching .cache-state .cached-container .uncached {
    display: none;
}

.media-field-search .app-page-row-textbox > .media-item.pre-cache .cache-state .cached-container .uncached {
    display: none;
}

.media-field-search .app-page-row-textbox > .media-item.selected .cache-state .cached-container .uncached {
    color: #fff;
}


.media-field-search .app-page-row-textbox > .media-item .cache-state .cached-container .caching {
    display: none;
    font-size: 12px;
    color: #1d8cf8;
    text-align: right;
    cursor: pointer;
}

.media-field-search .app-page-row-textbox > .media-item.temp-cached .cache-state .cached-container .caching {
    color: #1d8cf8;
}

.media-field-search .app-page-row-textbox > .media-item.perm-cached .cache-state .cached-container .caching {
    color: green;
}

.media-field-search .app-page-row-textbox > .media-item.pre-cache .cache-state .cached-container .caching {
    display: flex;
}

.media-field-search .app-page-row-textbox > .media-item.selected .cache-state .cached-container .caching {
    color: #fff;
}


.media-field-search .app-page-row-textbox > .media-item .cache-state .cached-container .cached {
    display: none;
    font-size: 12px;
    color: #1d8cf8;
    text-align: right;
    cursor: pointer;
}

.media-field-search .app-page-row-textbox > .media-item.temp-cached .cache-state .cached-container .cached {
    display: flex;
}

.media-field-search .app-page-row-textbox > .media-item.perm-cached .cache-state .cached-container .cached {
    display: flex;
    color: green;
}

.media-field-search .app-page-row-textbox > .media-item.pre-cache .cache-state .cached-container .cached {
    display: none !important;
}

.media-field-search .app-page-row-textbox > .media-item.caching .cache-state .cached-container .cached {
    display: none !important;
}

.media-field-search .app-page-row-textbox > .media-item.selected .cache-state .cached-container .cached {
    color: #fff;
}


.app-form-field-media {
}

    .app-form-field-media .app-form-field-autocomplete-container {
    }

    .app-form-field-media .app-form-field-media-item {
        padding: 0.5rem;
        flex: 1;
        /*  padding-right: 3rem;*/
        padding-top: 0px;
        border: solid 1px #444;
        border-top: none;
        border-bottom-left-radius: 3px;
        border-bottom-right-radius: 3px;
        min-height: 100px;
        padding-top: 0.5rem;
    }
    .app-form-field-media.hide-item .app-form-field-media-item {
        display:none;
    }

    .app-form-field-media .app-form-field-autocomplete-search-button {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0px;
        height: unset;
    }

    .app-form-field-media .app-form-field-autocomplete-search-button.clear-button {
        right: 2.5rem;
    }

body.dark-mode .app-form-field-media .app-form-field-autocomplete-search-button {
   /* background: #444;
    border-color: #444;*/
    color: #fff;
}

.app-form-field-media #search-wrapper .main > .header {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.app-form-field-media .app-form-field-autocomplete-container input {
    flex: 1;
    padding-right: 5.5rem !important;
}

.app-form-field-media .app-form-field-autocomplete-container:focus,
.app-form-field-media .app-form-field-autocomplete-container.focused {
    border-color: #0d6efd !important;
}

.app-form-field-media textarea {
    background-color: transparent !important;
}

    .app-form-field-media textarea:focus,
    .app-form-field-media textarea.focused {
        border-color: #0d6efd !important;
    }

.app-form-field-media .app-form-field-autocomplete-container input::placeholder {
    font-style: italic;
}

.app-form-field-media #search-wrapper section.main {
    padding-top: .5rem;
}

.app-form-field-media .app-page-row-textbox > .no-item-selected {
    padding-top: 0.5rem;
    font-style: italic;
    display:none;
}

.subsection textarea::placeholder {
    font-style: italic;
    color: gray !important;
    font-size: 80%;
}

.subsection .publish-url input::placeholder {
    font-style: italic;
    color: gray;
    font-size: 80%;
}



.app-form-field-media #search-wrapper .media-item .artwork {
    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%);
}

.app-form-field-media .form-window-content {
    width: 100%;
}
.form-window .app-form-field-media .form-window-content {
    max-width: 100%;
    width: 100% !important;
    max-height: 100%;
    height: 100% !important;
}
.form-window #search-wrapper {
    margin:0;
}

.app-form-field-media .app-form-field-autocomplete-selection {
    max-height: 70vh;
    height: 50vh;
    left:.1rem;
    right:.1rem;
}

.app-form-field-media .media-field-search .media-item {
    display: block;
}

.app-form-field-media #search-wrapper .content {
    max-height: 300px;
}

.app-form-field-autocomplete-container {
    /*border-color: #444 !important;
    border-color: rgba(100,100,100,.5) !important;*/
    /*background-color: transparent !important;
    border:solid 1px silver;*/
}

#search-queue-container::before {
    display: none !important;
}

.app-search-content-button {
    border-color: rgba(100,100,100,.3);
    background-color: transparent;
    color: white;
    margin-top: 1rem !important;
    margin-right: 1rem !important;
    margin-left: 1rem !important;
    margin-bottom: 0.5rem !important;
    display: none;
}


.media-field-search .form-window-content .form-window-footer {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.app-form-field-media-item .media-item > .media-item-artwork {
    text-align: center;
    position:relative;
}

.app-form-field-media-item .media-item > .media-info {
    text-align: center;
}


.project-layout-menu .app-navigation-item a label {
    /*line-height: 35px;*/
    font-size: 1rem;
}
.selected .btn.text-info {
    color:white;
}
.select-project-item.app-navigation-item a .app-navigation-icon > .app-image {
    max-width: 36px;
    max-height: 36px;
    max-width: 48px;
    max-height: 48px;
    border: solid 1px black;
    border-radius: 4px;
}
.select-project-item.app-navigation-item .app-navigation-subitems .app-navigation-item > a .app-label {
    margin-left: .5rem;
}
/*.select-project-item.app-navigation-item > a .app-label {
    margin-left: .5rem;
    font-size: 1.4rem;
}*/
.project-layout-menu .app-navigation-subitems .app-navigation-item > a .app-label {
    margin-left: -1rem;
}
.project-layout-menu .has-select-all .app-navigation-subitems .app-navigation-item > a .app-label {
    margin-left: .5rem !important;
}






.project-layout-menu-buttons2 > button {
    padding: .5rem;
    max-width: 72px;
    white-space: normal;
    font-size: .7rem;
    width: 72px;
    height: 73px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.project-layout-menu-buttons2 > button.selected {
    opacity: 1 !important;
    background-color:black;
    background: #0d6efd;
}

body.show-layout-menu .project-layout-menu-buttons2 {
    display: flex;
    display: none;
}

/*body.edit-layout .body-container {
    margin-left: 4rem;
}

body.show-layout-menu .body-container {
    margin-left: 70rem;
}
*/
body.can-edit .app-project-header:not(.sm) {
    /*todo:add-back-in;*/
    padding-left: 3.3rem;
    padding-right: 1rem;
}
body.edit-layout .app-project-header:not(.sm) {
    padding-left: 0rem;
}

/*
body.edit-layout .header {
    padding-left: 5rem;
}

body.show-layout-menu .header {
    padding-left: 35rem;
     padding-right: 2rem;
}*/
body.edit-layout #main-screen {
    left: 4.5rem;
}
body.show-layout-menu #main-screen {
    left: 30rem;
}
body.edit-layout .project-base-screen {
    left: 4.5rem;
    /*width: calc(100% - 4.5rem);*/
}
body.show-layout-menu .project-base-screen {
    left: 30rem;
    /*width: calc(100% - 30rem);*/
}

body.can-edit .dms-on-demand.fullscreen .dms-on-demand-actions {
    /*todo: add-back-below;*/
    /*padding-left: 3rem;
    padding-right: .5rem;*/
    /*padding-left: .7rem;*/
    /*padding-right: 0rem;*/
}
/*
body.edit-layout .dms-on-demand.fullscreen .dms-on-demand-actions {
    padding-left: 1rem;
}*/
@media only screen and (max-width: 800px) {

    body.edit-layout .dms-on-demand.fullscreen .dms-on-demand-actions {
        padding-left: 0rem;
        padding-right: 1.5rem;
    }
}


body.show-layout-menu .dms-on-demand.fullscreen .dms-on-demand-actions {
    /* padding-left: 31rem;*/
    /* padding-right: 2rem;*/
}

/*body.show-layout-menu .footer {
    padding-left: .5rem;
}
body.edit-layout .footer {
    padding-left: 2rem;
    padding-right: 1rem;
}
body.show-layout-menu .footer {
    padding-left: 20rem;
    padding-right: 15rem;
}*/

body.edit-layout .dms-on-demand .app-project-header {
    padding-left: 0rem;
}

body.show-layout-menu .dms-on-demand .app-project-header {
    padding-left: .5rem;
}

body.show-layout-menu .dms-on-demand .app-project-footer {
    padding-left: 0rem;
}

/*
body.edit-layout .dms-on-demand.fullscreen .dms-on-demand-form-container {
    left: 4.3rem;
    width: calc(100% - 4.3rem);
}

body.show-layout-menu .dms-on-demand.fullscreen .dms-on-demand-form-container {
    left: 35rem;
    width: calc(100% - 35rem);
}
*/
/*@media only screen and (max-width: 800px) {

    body.edit-layout .dms-on-demand.fullscreen .dms-on-demand-form-container {
        left: 0;
        width: 100%;
    }
}
*/
.dms-on-demand.content-screen .dms-on-demand-selection-container {
    width: 100%;
    height: 100%;
}


.app-form-table.upload-table .card-description-label {
    font-size: 1.4rem;
}
body.dark-mode .app-form-table.upload-table .card-description-label {
    color: white !important;
}
.app-form-table.upload-table .card-description-span {
    font-size: 0.9rem;
    text-transform: uppercase;
    line-height: 1.5;
    padding-top: .5rem;
    padding-bottom: 5px;
}
.app-form-table.upload-table .card-description-container {
    flex-direction: column;
    align-items: flex-start !important;
    margin-bottom: .5rem !important;
    margin-left: -1rem;
    padding-left: 1rem;
}
body.dark-mode .app-form-table.upload-table .card-description-span {
    color: #999;
}
.upload-section .card-table .table-container.card-body {
    padding-top: 0;
}
.app-view.upload-section .card-description-container .card-description-label {
    padding-bottom: .5rem;
}

.dms-on-demand.content-screen .dms-on-demand-selection-sections {
    flex-direction: column;
    display:block;
    max-width: 100%;
    width: 100%;
    padding: 0rem 0rem;
    padding-top:.5rem;
    padding-right:0;
    flex:1;
    order:1;
}
.dms-on-demand.content-screen .dms-on-demand-selection-sections .action-buttons {
    display: flex;
    padding: 0 0.5rem;
    margin-bottom: 1rem;
}
.upload-section-files {
    border-top: solid 1px rgba(100,100,100,.3);
    display: flex;
    flex-direction: column;
    flex: 1;
    /*margin-left: -1.5rem;
    margin-right: -1.5rem;*/
}
.upload-section-files-spinner {
    font-size: 3rem;
    text-align: center;
    padding-bottom: 1rem;
    padding-right: 1rem;
    padding-left: 1rem;
}
.upload-section-files-no-item {
    font-size: 1.4rem;
    padding: 1rem .1rem;
    padding-bottom: .5rem;
    color: #999;
    padding-left: 1rem;
    padding-top: 0;
}
.upload-files .upload-section-files-no-item {
    padding: 1rem;
}
.upload-section-files-items-window {
    position: fixed;
    right: 11rem;
    transition: .2s ease-in-out;
    height: 0vh;
    bottom: 0px;
    width: 30vw;
    right: 11rem;
    box-shadow: 0 1px 2px rgb(0 0 0 / 7%), 0 2px 4px rgb(0 0 0 / 7%), 0 4px 8px rgb(0 0 0 / 7%), 0 8px 16px rgb(0 0 0 / 7%), 0 16px 32px rgb(0 0 0 / 7%), 0 32px 64px rgb(0 0 0 / 7%);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border: solid 1px #444;
    background-color:black;
    z-index: 5002;
}
.upload-section-files-items-window.processing {
    height: 4vh;
}
.upload-section-files-items-window.show {
    height: 70vh;
}
.upload-section-files-items-window.hide {
    height: 0vh !important;
}
.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;
}*/
.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;
}
.upload-section-file:first-of-type {
    margin-top:0px !important;
}
.upload-section-file-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
   /*justify-content: flex-end;*/
}
.upload-section-file-field {
    padding: 1rem;
}
.upload-section-file-select {
    display:none;
}
.upload-section-file-select input {
    height: 18px;
    width: 18px;
    outline: none;
    position: relative;
    top: 3px;
}
.upload-section-file-image {
    padding: 0;
    /*padding-left: 1rem;
    padding-right: 1rem;*/
    position: relative;
    background: black;
		color:whitesmoke;
}
.upload-section-file-image img {
 /*   max-width: 160px;
    max-height: 160px;
    max-width: 163px;
    max-height: 90px;
    max-width: 212px;
    max-height: 90px; */
    max-width: 100%;
}
.upload-section-file-image video {
    max-width: 160px;
    max-height: 160px;
    max-width: 163px;
    max-height: 90px;
    max-width: 212px;
    max-height: 90px;
}
.upload-section-file-image i {
    font-size: 3rem;
    padding: 0 !important;
}
.upload-section-file-name {
    flex: 1;
}
.upload-section-file-type {

}
.upload-section-file-size {

}
.upload-section-file-status {

}
.upload-section-file-percent-container {
    position: absolute;
    bottom: 0px;
    left:0px;
    height: 2px;
    width: 100%;
    display:flex;
    align-items:center;
}
.upload-section-file-percent {
    flex: 1;
    height: 2px;
}
.upload-section-file-percent.commit {
    flex: .2;
}
.needs-transcoding .upload-section-file-percent {
    flex: 33%;
}
.needs-transcoding .upload-section-file-percent.commit {
    flex: 33%;
}
.upload-section-file-percent-data {
    height: 2px;
    width: 0%;
    left: 0px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.upload-section-file-percent-upload {
    background-color: #0d6efd;
    border-color: #0d6efd;
}
.upload-section-file-percent-transcode {
    background-color: goldenrod;
    border-color: goldenrod;
}
.upload-section-file-percent-commit {
    background-color: purple;
    border-color: purple;
}
.upload-section-file-percent-container.error .upload-section-file-percent-upload,
.upload-section-file-percent-container.error .upload-section-file-percent-transcode,
.upload-section-file-percent-container.error .upload-section-file-percent-commit {
    background-color: firebrick;
    border-color: firebrick;
}
.upload-section-file-percent-container.success .upload-section-file-percent-upload,
.upload-section-file-percent-container.success .upload-section-file-percent-transcode,
.upload-section-file-percent-container.success .upload-section-file-percent-commit {
    background-color: forestgreen;
    border-color: forestgreen;
}
.modal {
    z-index: 99999;
}

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

.upload-section-file-image {
    width: 195px;
    text-align: center;
    width: 163px;
    text-align: center;
    height: 90px;
    overflow: hidden;
    margin-left: .5rem;
}
.upload-section-file-image .thumbnail {
   /* position:relative;*/ 
    display: flex;
    align-items: center; 
    height: 100%;
}
.upload-section-file-image .thumbnail .preview {
    opacity:.8;
    cursor:pointer;
    transition:.2s;
    display:none
}
.upload-section-file-image .thumbnail.can-preview .preview {
    display:block;
}
.upload-section-file-image .thumbnail .preview:hover {
    opacity:1;
}
.upload-section-file-image .thumbnail .preview:active {
    opacity:.7;
}
.upload-section-file-image .thumbnail .preview .bkgd {
    position: absolute;
    background-color: #373737;
    opacity: .3;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}
.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;
}
.upload-section-file-image .thumbnail .preview .ctnr i {
    color: whitesmoke;
    position: relative;
    top: -1px;
    font-size: 2rem;
}
.upload-section-file-buttons {
   padding-right:1rem;
    text-align:center;
    display:flex;
}
.upload-section-file-buttons button {
    margin-left: 1rem;
    margin-right: 1rem;
}

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

.upload-section-file-image > i {
    position: absolute;
    left: 0px;
    top: .1rem;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 500;
}


.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%;*/
}
.drop-background-container {
    display: flex;
    flex-direction: column;
    /* flex: 1; */
    justify-content: center;
    align-items: center;
    opacity: .5;
}
.drop-background-container i {
    padding-bottom:1.5rem;
    font-size: 5rem;
}
.drop-background-container label {
    text-transform:uppercase;
    font-size: 3rem;
}


.modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1060;
    display: none;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0
}

.modal-dialog {
    position: relative;
    width: auto;
    margin: .5rem;
    pointer-events: none
}

.modal.fade .modal-dialog {
    transition: transform .3s ease-out;
    transform: translate(0,-50px)
}

/*@media (prefers-reduced-motion:reduce) {
    .modal.fade .modal-dialog {
        transition: none
    }
}*/

.modal.show .modal-dialog {
    transform: none
}

.modal.modal-static .modal-dialog {
    transform: scale(1.02)
}

.modal-dialog-scrollable {
    height: calc(100% - 1rem)
}

    .modal-dialog-scrollable .modal-content {
        max-height: 100%;
        overflow: hidden
    }

    .modal-dialog-scrollable .modal-body {
        overflow-y: auto
    }

.modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - 1rem)
}

.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 5px;
    outline: 0;
    box-shadow: 7px 7px 7px 0px rgba(0,0,0,.1);
}
body.dark-mode .modal-content {
    background-color: #1C1C22;
}

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    width: 100vw;
    height: 100vh;
    background-color: #000
}

    .modal-backdrop.fade {
        opacity: 0
    }

    .modal-backdrop.show {
        opacity: .5
    }

.modal-header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1rem;
    border-bottom: 1px solid #dee2e6;
    border-top-left-radius: calc(.3rem - 1px);
    border-top-right-radius: calc(.3rem - 1px);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

    .modal-header .btn-close {
        padding: .5rem .5rem;
        margin: -.5rem -.5rem -.5rem auto
    }

.modal-title {
    margin-bottom: 0;
    line-height: 1.5
}

.modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: 1rem
}

.modal-footer {
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 0;
    align-items: center;
    justify-content: flex-end;
    padding: .75rem;
    border-top: 1px solid #dee2e6;
    border-bottom-right-radius: calc(.3rem - 1px);
    border-bottom-left-radius: calc(.3rem - 1px);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

    .modal-footer > * {
        margin: .25rem
    }

@media (min-width:576px) {
    .modal-dialog {
        max-width: 500px;
        margin: 1.75rem auto
    }

    .modal-dialog-scrollable {
        height: calc(100% - 3.5rem)
    }

    .modal-dialog-centered {
        min-height: calc(100% - 3.5rem)
    }

    .modal-sm {
        max-width: 300px
    }
}

@media (min-width:992px) {
    .modal-lg, .modal-xl {
        max-width: 800px
    }
}

@media (min-width:1200px) {
    .modal-xl {
        max-width: 1140px
    }
}

.modal-fullscreen {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0
}

    .modal-fullscreen .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0
    }

    .modal-fullscreen .modal-header {
        border-radius: 0
    }

    .modal-fullscreen .modal-body {
        overflow-y: auto
    }

    .modal-fullscreen .modal-footer {
        border-radius: 0
    }

@media (max-width:575.98px) {
    .modal-fullscreen-sm-down {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0
    }

        .modal-fullscreen-sm-down .modal-content {
            height: 100%;
            border: 0;
            border-radius: 0
        }

        .modal-fullscreen-sm-down .modal-header {
            border-radius: 0
        }

        .modal-fullscreen-sm-down .modal-body {
            overflow-y: auto
        }

        .modal-fullscreen-sm-down .modal-footer {
            border-radius: 0
        }
}

@media (max-width:767.98px) {
    .modal-fullscreen-md-down {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0
    }

        .modal-fullscreen-md-down .modal-content {
            height: 100%;
            border: 0;
            border-radius: 0
        }

        .modal-fullscreen-md-down .modal-header {
            border-radius: 0
        }

        .modal-fullscreen-md-down .modal-body {
            overflow-y: auto
        }

        .modal-fullscreen-md-down .modal-footer {
            border-radius: 0
        }
}

@media (max-width:991.98px) {
    .modal-fullscreen-lg-down {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0
    }

        .modal-fullscreen-lg-down .modal-content {
            height: 100%;
            border: 0;
            border-radius: 0
        }

        .modal-fullscreen-lg-down .modal-header {
            border-radius: 0
        }

        .modal-fullscreen-lg-down .modal-body {
            overflow-y: auto
        }

        .modal-fullscreen-lg-down .modal-footer {
            border-radius: 0
        }
}

@media (max-width:1199.98px) {
    .modal-fullscreen-xl-down {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0
    }

        .modal-fullscreen-xl-down .modal-content {
            height: 100%;
            border: 0;
            border-radius: 0
        }

        .modal-fullscreen-xl-down .modal-header {
            border-radius: 0
        }

        .modal-fullscreen-xl-down .modal-body {
            overflow-y: auto
        }

        .modal-fullscreen-xl-down .modal-footer {
            border-radius: 0
        }
}

@media (max-width:1399.98px) {
    .modal-fullscreen-xxl-down {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0
    }

        .modal-fullscreen-xxl-down .modal-content {
            height: 100%;
            border: 0;
            border-radius: 0
        }

        .modal-fullscreen-xxl-down .modal-header {
            border-radius: 0
        }

        .modal-fullscreen-xxl-down .modal-body {
            overflow-y: auto
        }

        .modal-fullscreen-xxl-down .modal-footer {
            border-radius: 0
        }
}

.modal {
    display: none;
    transition: .2s;
    opacity:0;
}
body.dark-mode .modal {
    background-color: rgba(0,0,0,.7);
}
.modal.show {
    display: block;
}
.modal.fade-in {
    opacity:1;
}
.modal .modal-dialog {
    transition:.2s;
}
.modal .modal-title {
    justify-content: center;
    flex: 1;
}
.modal .modal-header button.close {
    position: absolute;
    right: 1rem;
    padding: 0;
    background-color: transparent;
}
body.dark-mode .modal .form-check label {
    line-height: 17px;
    color: white;
    color: #aaa;
    font-weight: 400;
    font-size: 1.2em !important;
}
body.light-mode .modal .form-check label {
    /* line-height: 17px; */
    color: white;
    color: gray;
    font-weight: 400;
    font-size: 1.2em !important;
    display: flex;
    align-items: center;
    padding: .5rem 0rem;
}

body.light-mode .modal .form-check label .form-check-input {
    margin-right:.5rem;
}

.modal .modal-body .form-group .row .form-check-input-label {
    padding-left:1.5rem;
}
body.dark-mode .modal .modal-body .form-group .row .form-check-input-label {
    color:white;
}
/*body.dark-mode .modal .modal-content {
    background-color:#181818;
}*/
.modal .modal-body .form-group .row {
    padding: 1rem 0;
}
.modal .modal-body p {
    line-height: 1.4;
}

.links-container {
    display: flex;
    padding-bottom: 1rem;
    align-items: baseline;
}
.links-title-label {
    margin: 0;
    font-size: 2rem;
    font-weight: 300;
    margin-right: 4rem;
    position: relative;
    top: 1px;
}
.links-info-container {
}
.links-info-label {
    text-transform: none;
    color: lightgray;
    font-size: 1.2rem;
}
body.light-mode .links-info-label {
    color: darkgray;
}
.links-info-count {
    padding-right: 8px;
    text-transform: none;
    font-size: 1.2rem;
}
.links-warning-label {
    line-height: 1.6;
    text-transform: uppercase;
    font-size: .7rem;
    letter-spacing: 3px;
    padding-bottom: 7px;
    font-size: 1.4rem;
}






#lookup-metadata-window {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.7);
    z-index: 5002;
    display: flex;
    flex-direction: column;
   /* overflow: auto;*/
}
#lookup-metadata-section {
    flex: 1;
    display: flex;
    flex-direction:column;

}
#lookup-metadata-section .search-section .card-header {
    
    padding: 0.75rem 1.25rem;
    margin-bottom: 0;
    background-color: rgba(0, 0, 0, 0.03);
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
    padding: 1rem 0rem;
    margin-bottom: 0;
    padding-top: 0;
    background-color: rgba(0,0,0,.03);
    border-bottom: 1px solid rgba(0,0,0,.125);
    background: transparent;
    display: flex;
    padding: 0.75rem 2.75rem;
}
body.dark-mode #lookup-metadata-section .search-section .card-header {
    color: #ffffff;
    margin-top:-1rem;
}
#lookup-metadata-section .card .card-header.card-header-primary .card-icon,
#lookup-metadata-section .card .card-header.card-header-primary .card-text,
#lookup-metadata-section .card .card-header.card-header-primary:not(.card-header-icon):not(.card-header-text) {
    box-shadow: 0 4px 20px 0px rgb(0 0 0 / 14%), 0 7px 10px -5px rgb(100 100 100 / 40%);
}
#lookup-metadata-section .card .card-header.card-header-primary .card-icon i {    
    font-size: 1.4rem;
}
/*
#lookup-metadata-section .card .card-header-primary .card-icon,
#lookup-metadata-section .card .card-header-primary .card-text,
#lookup-metadata-section .card .card-header-primary:not(.card-header-icon):not(.card-header-text),
#lookup-metadata-section .card.bg-primary,
#lookup-metadata-section .card.card-rotate.bg-primary .front,
#lookup-metadata-section .card.card-rotate.bg-primary .back {
    background: linear-gradient( 60deg, #7b1fa2, #913f9e);
}*/

#lookup-metadata-section .card [class*="card-header-"] .card-icon,
#lookup-metadata-section .card [class*="card-header-"] .card-text {
    border-radius: 0.1875rem;
    background-color: #444;
    padding: 0.9375rem;
    margin-top: -5px;
    margin-right: 0.9375rem;
    float: left;
    display:none;
}
body.light-mode #lookup-metadata-section .card [class*="card-header-"] .card-icon {
    background: linear-gradient(#EEEEEE, #CFCFCF);
    border-color: silver;
    color: gray;
    box-shadow: 0 4px 20px 0px rgb(0 0 0 / 14%), 0 7px 10px -5px rgb(100 100 100 / 40%);
}
#lookup-metadata-section .card .card-header.card-header-icon .card-title,
#lookup-metadata-section .card .card-header.card-header-text .card-title {
    color: #999 !important;
}
#lookup-metadata-section .card .card-header.card-header-icon .card-title,
#lookup-metadata-section .card .card-header.card-header-text .card-title {
    margin-top: 15px;
    color: #3C4858;
    margin-bottom: 3px;
    font-size: 2rem;
}
#lookup-metadata-section .card .card-header.card-header-icon h4,
#lookup-metadata-section .card .card-header.card-header-text h4 {
    font-weight: 300;
}
#lookup-metadata-section .card-table .card-title.flex {
    flex: 1;
}
body.dark-mode #lookup-metadata-section .card .card-title {
    color: #ffffff;
}
#lookup-metadata-section .card .card-header .card-title {
    color: #999;
    white-space:nowrap;
}
#lookup-metadata-section .card .totalRecords {
    display: flex;
    align-items: center;
    margin-top: 15px;
    margin-bottom: 3px;
    margin-left: 5px;
    margin-right: 45px;
    font-size: 1.125rem;
    line-height: 1.4em;
}
#lookup-metadata-section .card .recordCount {
    padding-left: 5px;
    padding-right: 5px;
}
#lookup-metadata-section .card .totalRecordsLabel {
    color: #999;
    white-space:nowrap;
}
#lookup-metadata-section .card-title {
    margin-bottom: 0.75rem;
}

#lookup-metadata-section .search-section {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: whitesmoke;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 5px;
    font-size: .875rem;
    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%);
    margin: 1rem;
    margin-top: 1rem;
    /*padding: 0rem 1.5rem;*/
   /* padding-bottom: 1rem;
    padding-bottom: 1rem;*/
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}
body.dark-mode #lookup-metadata-section .search-section {
    background: #1C1C22 !important;
    background-color: rgb(29, 33, 37) !important;
}
#lookup-metadata-section .search-section .views {
    flex: 1;
    display: flex;
    flex-direction: column;
}
#lookup-metadata-section .search-section .views .view {
    flex:1;
    display: flex;
    flex-direction: column;
}
#lookup-metadata-section .search-section .views .view .list-view-container {
    flex:1;
    display: flex;
    flex-direction: column;
}
#lookup-metadata-section .search-section .views .view .list-view-container .list-view-body {
    flex:1;
    display: flex;
    flex-direction: column;
    position: relative;
    margin:0;
}
#lookup-metadata-section .search-section .views .view .list-view-container .list-view-body .list-view-no-items {
    flex:1;
    display: none;
    flex-direction: column;
}
.flex-column-1 {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.lookup-metadata-section-header {
    text-align: right;
}
.lookup-metadata-section-close-button {
    font-size: 2rem;
    background-color: transparent;
    border: solid 1px transparent;
    outline: 0 !important;
    opacity: .8;
    transition: .2s;
    position: absolute;
    top: 13px;
    right: 39px;
    z-index: 1;
    color: red;
}
body.dark-mode .lookup-metadata-section-close-button {
    color: white;
}
.lookup-metadata-section-close-button:hover {
    opacity: 1;
}
.lookup-metadata-section-close-button:active {
    opacity:.9;
}

td.center .app-form-field.form-check {
    justify-content: center;
}

#lookup-metadata-section .app-form-field.form-check .app-form-field-label {
    margin-left: 3px;
}
#lookup-metadata-section .fields-section {
    padding: 0 1.5rem;
    /* border-top: solid 1px #2A2A30; */
    border-bottom: solid 1px #2A2A30;
    padding-top: 10px;
    padding-bottom: 10px;
}
body.light-mode #lookup-metadata-section .fields-section {
    border-bottom: solid 1px lightgray;
}
#lookup-metadata-section .app-form-field {
    display: flex;
    align-items: center;
    flex-direction: row;
    flex: 1;
    padding-bottom: 10px;
    white-space: nowrap;
}
#lookup-metadata-section .flex-row.justify-start .app-form-field {
    flex: unset !important;
    padding-bottom:0px;
}
#lookup-metadata-section .flex-row.justify-start .app-form-field:not(.discNumber, .seasonNumber) label {    
    min-width: 0px;
    padding-left: 1.5rem;
}
#lookup-metadata-section.movie .flex-row.justify-start .app-form-field.year label {
    min-width: 105px;
    padding-left: unset;
}
/*#lookup-metadata-section .app-form-field.select {
        justify-content:center !important;
    }*/
#lookup-metadata-section .app-form-field.select input[type=checkbox] {
    margin-left: 22px !important;
}
    #lookup-metadata-section .app-form-field > label {
        padding-left: 5px;
        text-transform: uppercase;
        font-size: .7rem !important;
        font-weight: 700;
        color: #999;
        padding-right: 1rem;
        padding-bottom: 0 !important;
        margin-bottom: 0px;
        text-align: right;
        min-width: 105px;
    }
    #lookup-metadata-section button .app-form-field label {
        color:white;
    }
#lookup-metadata-section .card-views {
    display:flex;
    flex-direction:column;
    flex:1;
}
/*#lookup-metadata-section .search-button {
    font-size: .7rem;
    padding: .6rem 1.2rem;
    padding: 9px 15px !important;
    margin: 0;
    margin-left: 10px;
    margin-right: 10px;
    text-transform: uppercase;
    position: relative;
    top: -1px;
}*/
#lookup-metadata-section .app-form-field-select select {
    max-width: 150px;
    min-width: 150px;
}
/*body.light-mode #lookup-metadata-section .app-form-field-select select {
    color: dimgray;
}*/
#lookup-metadata-section .app-form-field-number input {
    max-width: 150px;
}
#lookup-metadata-section .app-form-field-text.show {
    display: none;
}
#lookup-metadata-section.show .app-form-field-text.show {
    display: flex;
}
#lookup-metadata-section .app-form-field-number.seasonNumber {
    display: none;
}
#lookup-metadata-section.show .app-form-field-number.seasonNumber {
    display: flex;
}
#lookup-metadata-section .app-form-field-number.episodeNumber {
    display: none;
}
#lookup-metadata-section.show .app-form-field-number.episodeNumber {
    display: flex;
}
#lookup-metadata-section .app-form-field-text.album {
    display: none;
}
#lookup-metadata-section.album .app-form-field-text.album {
    display: flex;
}
#lookup-metadata-section .app-form-field-text.artist {
    display: none;
}
#lookup-metadata-section.album .app-form-field-text.artist {
    display: flex;
}
#lookup-metadata-section .app-form-field-number.discNumber {
    display: none;
}
#lookup-metadata-section.album .app-form-field-number.discNumber {
    display: flex;
}
#lookup-metadata-section .app-form-field-number.trackNumber {
    display: none;
}
#lookup-metadata-section.album .app-form-field-number.trackNumber {
    display: flex;
}
#lookup-metadata-section .app-form-field-text.discogsId {
    display: none;
}
#lookup-metadata-section .app-form-field-text.discogsId input {
    max-width:150px;
}
#lookup-metadata-section.album .app-form-field-text.discogsId {
    display: flex;
}
#lookup-metadata-section .app-form-field-text.imdbId {
    display: none;
}
#lookup-metadata-section .app-form-field-text.imdbId input {
    max-width:150px;
}
#lookup-metadata-section.movie .app-form-field-text.imdbId {
    display: flex;
}
#lookup-metadata-section.show .app-form-field-text.imdbId {
    display: flex;
}
#lookup-metadata-section .footer {
    /*padding: 0rem 1.5rem;
    border-top: solid 1px #2A2A30;
    padding-top: 10px;*/
   /* position: absolute;*/
   flex:1;
    bottom: 0;
    right: 0;
}
#lookup-metadata-section .labelResults {
    display: flex;
    flex: 1;
    align-items: flex-end;
    font-size: 1.5rem;
}
#lookup-metadata-section .list-view-no-items-container {
    min-height: 100px;
    justify-content: center;
    align-items: center;
    align-content: center;
    display: flex;
    flex: 1;
    font-size: 1.4rem;
    text-transform: uppercase;
    color: #999;
    /*    border-top: solid 1px #2A2A30;
    border-bottom: solid 1px #2A2A30;*/
    margin: 0 1.5rem;
    margin-bottom: 1rem;
    margin-top: 1rem;
}
#lookup-metadata-section .md-form-group .md-label-static {
    font-size: .8rem !important;
    font-weight: 500;
}
#lookup-metadata-section .form-checkbox {
    padding-left: 3px;
    padding-top: 5px;
    padding-bottom: 3px !important;
}
#lookup-metadata-section .form-check-label {
    /*color: #999 !important;*/
    font-size: .9rem !important;
}

#lookup-metadata-section .force-update {
    display: none;
    margin-left: 6.5rem;
    padding-left: 1.5rem !important;
}
#lookup-metadata-section .force-update.show {
    display: unset;
}
#lookup-metadata-section .buttonSearch {
    /* margin-top: .7rem; */
    /* margin-bottom: 1.2rem; */
    /* margin-left: 105px; */
    margin-left: 15px;
    padding: 9px 15px !important;
    margin: 0;
    margin-left: 15px;
}


#lookup-metadata-section .metadata-item-header-select .form-checkbox {
    width: 80px;
    padding-left: 35px;
}
#lookup-metadata-section .list-view-no-items-image {
    display: none;
}
#lookup-metadata-section .list-view-body.loading-items .list-view-no-items-image {
    display: unset;
}
#lookup-metadata-section .list-view-body.loading-items .list-view-no-items,
#lookup-metadata-section .list-view-body.no-items .list-view-no-items {
    display: flex !important;
}
#lookup-metadata-section .list-view-body.loading-items .list-view-groups,
#lookup-metadata-section .list-view-body.no-items .list-view-groups {
    display: none;
}
#lookup-metadata-section .list-view-groups {
    /* border-top: solid 1px #2A2A30;
    border-bottom: solid 1px #2A2A30;
    margin-bottom: 1rem;*/
    /*margin-left: 1.5rem;
    margin-right: 1.5rem;*/
    display: flex;
    flex: 1;
   /* flex-direction: column;*/
    overflow: auto;
    /*height: 800px;*/
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
}

#lookup-metadata-section .metadata-item-container {
    padding: 7px;
    margin: 7px;
    padding-top: 0;
    padding-bottom: 10px;
}

/*body.can-edit .header-menu {
    top: 4rem;
}*/
body.edit-layout .header-menu {
    left: 4.5rem;
}
/*body.edit-layout .footer {
    left: 2.5rem;
}
*/
#lookup-metadata-section .metadata-item {
    padding: 7px;
    /* background-color: #0069D9; */
    margin: 0px;
    /* background-color: rgb(221, 221, 221); */
    transition-property: background-color;
    transition: .1s ease-in-out;
    /* border-radius: 3px; */
    /* opacity: .4; */
    border: 1px solid transparent;
    /*flex:1;*/
    padding-bottom: 0px;
    width:100%;
}
body.light-mode #lookup-metadata-section .metadata-item.select {
    background-color: rgba(154,181,213,.1);
    border: 1px solid #0d6efd;
}
body.dark-mode #lookup-metadata-section .metadata-item.select {
    border: 1px solid #0d6efd;
    background-color: rgba(100,100,100,.3);
}
#lookup-metadata-section .metadata-item-body {
    display: flex;
}
body.dark-mode #lookup-metadata-section .metadata-item-body {
    color: #fff;
}
#lookup-metadata-section .metadata-item-header {
    display: flex;
    padding-right: 15px;
    flex: 1;
    padding-left: 1.5rem !important;
}
#lookup-metadata-section .metadata-item-header-select {
    padding-top: 13px;
    padding-right: 23px;
    padding-left: 4px;
}
#lookup-metadata-section .metadata-item-header-select input {

}

#lookup-metadata-section .metadata-item-header-info-container {
    display: flex;
    flex-direction: column;
}
#lookup-metadata-section .metadata-item-header-info {
    padding-top: 10px;
    padding-left: 10px;
    flex: 1;
}
#lookup-metadata-section .metadata-item-header-info-album {
    padding-top: 5px;
}
#lookup-metadata-section .metadata-item-header-info-show {
    padding-top: 5px;
}
#lookup-metadata-section .metadata-item-header-info-name {
    font-size: 1.4rem;
    font-weight: 500;
}
#lookup-metadata-section .metadata-item-header-info-description {
    font-size: .9rem;
    /*text-align: justify;*/
    padding-top: 5px;
    padding-bottom: 15px;
    padding-right: 40px;
    flex: 1;
    display: none;
    line-height:1.4;
}
#lookup-metadata-section .metadata-item-header-info-description.show {
    display:flex;
}
#lookup-metadata-section .metadata-item-header-info-src {
    font-size: .9rem;
    padding-top: 5px;
    color: blue;
    cursor: pointer;
}
#lookup-metadata-section .metadata-item-header-info-rated {
    padding-left: 5px;
}
#lookup-metadata-section .metadata-item-image {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 2rem;
    padding-bottom:0;
}
#lookup-metadata-section .metadata-item-image img {
    max-width: 360px !important;
    max-height: 360px !important;
}
#lookup-metadata-section .metadata-item-trailer {
    margin-top: 10px;
    font-size: 1rem;
}
#lookup-metadata-section .metadata-item-imdb {
    margin-top: 5px;
    font-size: 1rem;
}
#lookup-metadata-section .metadata-item-discogs {
    margin-top: 5px;
    font-size: 1rem;
}

#lookup-metadata-section .metadata-item-footer {
    padding-top: 0px;
    padding-left: 10px;
    /*height: 20px;*/
    /* position: relative;
    top: -15px;*/
}
#lookup-metadata-section .metadata-item-spinner {
    display: flex;
    align-items: center;
}
    #lookup-metadata-section .metadata-item-spinner .loader {
        /* width: 14px; */
        /* height: 14px; */
        top: -2px;
        margin-right: 5px;
        min-width: unset;
        max-width: unset;
        min-height: unset;
        max-height: unset;
        top: 0;
        margin: 0;
        margin-right: 5px;
    }
    #lookup-metadata-section .metadata-item-spinner .status {
        font-size: .9rem;
        padding-left: 5px;
        padding-right: 5px;
    }
body.dark-mode #lookup-metadata-section .metadata-item-spinner .status {
    color: #fff;
}
#lookup-metadata-section .metadata-item-getItems {
    font-size: 1.1rem;
}
body.dark-mode #lookup-metadata-section .metadata-item-getItems {
    color: #9c27b0;
    color: white;
    margin-bottom:.5rem;
}
#lookup-metadata-section .metadata-item-getItems i {
    padding-right:10px;
}
#lookup-metadata-section .metadata-item-header-select .app-form-field-checkbox input[type=checkbox] {
    width: 20px;
    height: 20px;
    border-color: rgba(96, 100, 119, 0.5);
}
#lookup-metadata-section .metadata-item-header-info-year-container {
    font-size: .9rem;
    padding-top: 7px;
    padding-bottom: 7px;
    display: flex;
}
#lookup-metadata-section .metadata-item-footer-container {
    display: flex;
    align-items: center;
    padding: .5rem;
    padding-left: 46px;
}
#lookup-metadata-section .metadata-item-header-info-year {
    display: flex;
}

#lookup-metadata-section .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: flex;
}

#lookup-metadata-section .metadata-item-header-info-duration {
    padding-left: 5px;
    display: flex;
}

#lookup-metadata-section .metadata-item-header-info-rating-stars {
    display: none;
    padding-top: 1px;
    padding-bottom: 8px;
}

#lookup-metadata-section .metadata-item-header-info-rating-star {
    padding-left: 1px;
    padding-right: 1px;
}

#lookup-metadata-section .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: .2s;
}

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

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


#lookup-metadata-section .metadata-item-header-info-rating-container {
    display: flex;
    font-size: .75rem;
    padding-bottom: 5px;
    display: none;
}
#lookup-metadata-section .metadata-item-header-info-rating-count {
}
#lookup-metadata-section .metadata-item-header-info-rating {
    padding-left: 5px;
}
#lookup-metadata-section .metadata-item-header-info-imdb {
    font-size: .9rem;
    padding-bottom: 5px;
    display: none;
    color: white;
}
    #lookup-metadata-section .metadata-item-header-info-imdb.show {
        display: flex;
    }

#lookup-metadata-section .metadata-item-header-info-imdb-label {
    padding-right: 5px;
    width: 115px;
    text-align: right;
}

#lookup-metadata-section .metadata-item-header-info-imdb-info {
}
#lookup-metadata-section .metadata-item-header-info-artist {
    font-size: .9rem;
    padding-bottom: 5px;
    display: none;
    color: white;
}
    #lookup-metadata-section .metadata-item-header-info-artist.show {
        display: flex;
    }

#lookup-metadata-section .metadata-item-header-info-artist-label {
    padding-right: 5px;
    width: 115px;
    text-align: right;
}

#lookup-metadata-section .metadata-item-header-info-artist-info {
}
#lookup-metadata-section .metadata-item-header-info-discogs {
    font-size: .9rem;
    padding-bottom: 5px;
    display: none;
    color: white;
}
    #lookup-metadata-section .metadata-item-header-info-discogs.show {
        display: flex;
    }

#lookup-metadata-section .metadata-item-header-info-discogs-label {
    padding-right: 5px;
    width: 115px;
    text-align: right;
}

#lookup-metadata-section .metadata-item-header-info-discogs-info {
}
#lookup-metadata-section .metadata-item-header-info-artists {
    font-size: .9rem;
    padding-bottom: 5px;
    display: none;
    color: white;
}
    #lookup-metadata-section .metadata-item-header-info-artists.show {
        display: flex;
    }

#lookup-metadata-section .metadata-item-header-info-artists-label {
    padding-right: 5px;
    width: 115px;
    text-align: right;
}

#lookup-metadata-section .metadata-item-header-info-artists-info {
}
#lookup-metadata-section .metadata-item-header-info-trackArtists {
    font-size: .9rem;
    padding-bottom: 5px;
    display: none;
    color: white;
}
#lookup-metadata-section .metadata-item-header-info-trackArtists.show {
    display: flex;
}

#lookup-metadata-section .metadata-item-header-info-trackArtists-label {
    padding-right: 5px;
    width: 115px;
    text-align: right;
}

#lookup-metadata-section .metadata-item-header-info-trackArtists-info {
}
#lookup-metadata-section .metadata-item-header-info-genre {
    font-size: .9rem;
    padding-bottom: 5px;
    display: none;
    color:white;
}
#lookup-metadata-section .metadata-item-header-info-genre.show {
    display: flex;
}

#lookup-metadata-section .metadata-item-header-info-genre-label {
    padding-right: 5px;
    width: 115px;
    text-align: right;
}

#lookup-metadata-section .metadata-item-header-info-genre-info {
}
#lookup-metadata-section .metadata-item-header-info-category {
    font-size: .9rem;
    padding-bottom: 5px;
    display: none;
    color: white;
}

    #lookup-metadata-section .metadata-item-header-info-category.show {
        display: flex;
    }

#lookup-metadata-section .metadata-item-header-info-category-label {
    padding-right: 5px;
    width: 115px;
    text-align: right;
}

#lookup-metadata-section .metadata-item-header-info-category-info {
}
#lookup-metadata-section .metadata-item-header-info-cast {
    font-size: .9rem;
    padding-bottom: 5px;
    display: none;
    color: white;
}
    #lookup-metadata-section .metadata-item-header-info-cast.show {
        display: flex;
    }
#lookup-metadata-section .metadata-item-header-info-cast-label {
    padding-right: 5px;
    width: 115px;
    text-align: right;
}
#lookup-metadata-section .metadata-item-header-info-cast-info {
}
#lookup-metadata-section .metadata-item-header-info-director {
    font-size: .9rem;
    padding-bottom: 5px;
    display: none;
    color: white;
}
    #lookup-metadata-section .metadata-item-header-info-director.show {
        display: flex;
    }
#lookup-metadata-section .metadata-item-header-info-director-label {
    padding-right: 5px;
    width: 115px;
    text-align: right;
}
#lookup-metadata-section .metadata-item-header-info-director-info {

}
#lookup-metadata-section .metadata-item-header-info-writer {
    font-size: .9rem;
    padding-bottom: 5px;
    display: none;
    color: white;
}
#lookup-metadata-section .metadata-item-header-info-writer.show {
    display: flex;
}
#lookup-metadata-section .metadata-item-header-info-writer-label {
    padding-right: 5px;
    width: 115px;
    text-align: right;
}
#lookup-metadata-section .metadata-item-header-info-writer-info {

}
#lookup-metadata-section .metadata-item-header-info-composer {
    font-size: .9rem;
    padding-bottom: 5px;
    display: none;
    color: white;
}
#lookup-metadata-section .metadata-item-header-info-composer.show {
    display: flex;
}
#lookup-metadata-section .metadata-item-header-info-composer-label {
    padding-right: 5px;
    width: 115px;
    text-align: right;
}
#lookup-metadata-section .metadata-item-header-info-composer-info {

}

#lookup-metadata-section .metadata-item-extra-images {
    padding-bottom:5px;
}

#lookup-metadata-section .metadata-item-extra-images-header {
    text-align: right;
}

#lookup-metadata-section .metadata-item-extra-images-header-label {
    padding-right: 15px;
    font-size: 1rem;
    display: inline-block;
}

.has-images #lookup-metadata-section .metadata-item-extra-images-header-label {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}

#lookup-metadata-section .metadata-item-extra-images-items {
    display: none;
}

#lookup-metadata-section .metadata-item-extra-images-items.show {
    display: block;
}

#lookup-metadata-section .metadata-item-subtitles {
    /*flex-direction:column;
    display:flex;*/
    width: 100%;
    margin-top: .2rem;
    margin-left: 18px;
    margin-right: 18px;
    max-width:98%;
}
body.light-mode #lookup-metadata-section .metadata-item-subtitles.table {
    background-color: inherit !important;
}
body.dark-mode #lookup-metadata-section .metadata-item-subtitles {
    color: white !important;
}
#lookup-metadata-section .metadata-item-subtitles th {
    border-top: none !important;
}
#lookup-metadata-section .metadata-item-subtitles td {
    border-top:none !important;
    border-bottom: solid 1px lightgray;
}
body.dark-mode #lookup-metadata-section .metadata-item-subtitles td {
    border-bottom: solid 1px #2A2A30;
}
#lookup-metadata-section .metadata-item-subtitles td .form-checkbox {
    padding-left: 10px;
}
#lookup-metadata-section .metadata-item-subtitles tr:last-of-type td {
    border-bottom: none;
}
#lookup-metadata-section .metadata-item-subtitles th, #lookup-metadata-section .metadata-item-subtitles td {
    padding: 10px 10px;
    vertical-align: middle !important;
    text-align: left;
    white-space: nowrap;
    padding: 0px !important;
}
td.metadata-item-subtitles-row-foreignPartsOnly {
    width:100px;
}
#lookup-metadata-section .metadata-item-subtitles a {
    font-weight: 700;
}
#lookup-metadata-section .metadata-item-subtitles a:hover {
    font-weight:700;
    text-decoration:none;
}
#lookup-metadata-section .metadata-item-subtitles-row {
    /*display:flex;*/
}
#lookup-metadata-section .metadata-item-subtitles .form-field label {
    /*display:flex;*/
}
#lookup-metadata-section .metadata-item-subtitles-row label {
    text-align: center;
    min-width: unset;
    text-transform: uppercase;
    font-size: .8rem;
}
body.light-mode #lookup-metadata-section .metadata-item-subtitles-row label {
    color: #999;
}
#lookup-metadata-section .metadata-item-subtitles-row.header {
    margin-top: 6px;
    margin-bottom: 4px;
    background: linear-gradient(to bottom, lightgray, gainsboro);
    border: solid 1px silver;
}
body.dark-mode #lookup-metadata-section .metadata-item-subtitles-row.header {
    background-color: #9c27b0;
    border: solid 1px #9c27b0;
    background: #444;
    border-color: #444;
    border-color: rgba(0,0,0,.3);
    background-color: rgba(0,0,0,.3);
}
#lookup-metadata-section .metadata-item-subtitles-row > div {
    white-space: nowrap;
    overflow: hidden;
    font-size: 16px;
    padding: 5px 15px;
}
#lookup-metadata-section .metadata-item-subtitles-row.header > div {
    font-size: 14px;
}
#lookup-metadata-section .metadata-item-subtitles-row-select {
    width:21px;
}
#lookup-metadata-section .metadata-item-subtitles-row-encoding {
    width:75px;
}
#lookup-metadata-section .metadata-item-subtitles-row-format {
    width: 75px;
}
#lookup-metadata-section .metadata-item-subtitles-row-fps {
    width: 100px;
}
#lookup-metadata-section .metadata-item-subtitles-row-hd {
    width: 75px;
}
#lookup-metadata-section .metadata-item-subtitles-row-hearing-impared {
    width: 125px;
}
#lookup-metadata-section .metadata-item-subtitles-row-language {
    width: 100px;
}
#lookup-metadata-section .metadata-item-subtitles-row-score {
    width: 100px;
}
#lookup-metadata-section .metadata-item-subtitles-row-points {
    width: 100px;
}
#lookup-metadata-section .metadata-item-subtitles-row-rating {
    width: 75px;
}
#lookup-metadata-section .metadata-item-subtitles-row-last-time-stamp {
    width: 100px;
}
#lookup-metadata-section .metadata-item-subtitles-row-year {
    width: 75px;
}
#lookup-metadata-section .metadata-item-subtitles-row-view {
    width: 94px;
}
#lookup-metadata-section .list-view-subtitles-container {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
    padding: 1.5rem;
    display: none;
    background: linear-gradient(#12121A, #121216) !important;
    color: white;
    z-index:1200;
}
#lookup-metadata-section .subtitles .list-view-subtitles-container {
    display: block !important;
}
#lookup-metadata-section .list-view-subtitles-close {
    position: fixed;
    right: 3rem;
    color: red;
    font-size: 2.4rem;
}
#lookup-metadata-section .list-view-subtitles {
    user-select: text;
    font-size: 1.4rem;
}
#lookup-metadata-section button.metadata-item-trailer {
    margin: 0px !important;
    padding: 3px 5px;
    padding-top: 10px;
    font-size: 1.7rem;
    /*position: relative;
    top: -15px;*/
    width: fit-content;
}


.media-fields .card-icon {
    padding: 0;
}
.media-fields .card-icon.has-image i {
    display:none;
}
.media-fields .card-icon img {
    max-width: 150px;
    max-height: 80px;
}
.media-fields .subtitles-footer {
    display:flex;
}
.media-fields .subtitles_useSubtitleDelay {
    padding-left: 0px !important;
    padding-bottom: 0 !important;
}
.media-fields .form-tab-table section.subtitle-delay {
    flex-direction: column;
    padding: 5px !important;
}
.media-fields section.subtitle-delay .subtitles_subtitleDelay .form-group {
   /* padding-bottom: 0 !important;*/
    left: -3px;
}
.media-fields section.subtitle-delay .subtitles_subtitleDelay .form-group .md-label-static {
    display:none !important;
}
.form-tab-table.subscriptions .actions {
    padding-top: 0;
    padding-bottom: 0;
}

.media-section h4.card-title {
    user-select:text;
}
.media-section .card-table .table-container.card-body {
    overflow:visible;
}
.media-section .card-table .table-container.card-body .table {
    background: linear-gradient(#12121A, #121216) !important;
}
.media-fields .card-table .table-container.card-body .table .md-form-group.select { 
    padding-right: 0px !important;
}



.media-fields > .app-form-footer,
.app-form-fields > .app-form-footer {
    flex-direction: column;
}
.media-fields .row,
.app-form-fields .row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}
.media-fields .app-field-row,
.app-form-fields .app-field-row {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
}
.media-fields .app-field-row .column.primary,
.app-form-fields .app-field-row .column.primary {
    flex:1;
}
.media-fields .app-field-row .column.aside,
.app-form-fields .app-field-row .column.aside {
    flex:.2;
}

.app-field-row .column .app-form-field-date,
.app-field-row .column .app-form-field-time {
    max-width: unset;
}


.media-fields .subtitle-options .subtitleDelay .app-form-field-label {
    display:none !important;
}

/*body.light-mode .media-fields .app-form-body {
    color: gray;
}*/
body.dark-mode .media-fields .app-form-body {
    color: white;
}
.media-fields section .column {
    padding-bottom: 1rem;
}
.media-fields .media-data {
    padding: 1em;
    padding-top:0;
    display: flex;
    flex-wrap: wrap;
}
.media-fields.summary > .media-data {
    padding-top: 1rem;
}
.media-fields .file-data {
    padding: 1em;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    flex-wrap: wrap;
    /*    flex-direction: column;*/
}
.app-form-field-description {
    justify-content: left;
    flex-direction: row;
    display: flex;
    margin-bottom: 5px;
    padding-bottom: 0px;
    -webkit-user-select: none;
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: center;
    padding-bottom: 5px;
}
.app-form-field-description .app-label {    
    /* font-weight: 600; */
    font-size: 1em;
    display: block;
    color: white;
    display: flex;
    flex-direction: column;
    min-width: 180px;
    text-align: right;
    text-transform: uppercase;
    padding-right: 10px;
    text-align: right !important;
    color: lightgray;
    font-size: 1rem;
    font-weight:500;
}
.app-form-field-description .app-span {
    min-width: 350px;
    flex: 1;
    display: flex;
    font-size: 1rem;
}
.summary.media-fields .app-form-field-description .app-span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-view .summary.media-fields .app-label-span {
    max-width: 600px;
    overflow: hidden;
}


.media-section {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.media-fields.preview {    
    display: flex;
    flex-direction: column;
    flex: 1;
}
.media-fields.preview .app-form-content {    
    display: flex;
    flex-direction: column;
    flex: 1;
}
.media-fields.preview .app-form-body {   
    flex: 1;
    display: flex;
    flex-direction: column;
}
.media-fields.preview .app-tab-view {  
    flex: 1;
    display: flex;
    flex-direction: column;
}
.media-fields .app-tab-view.preview .app-field-group {  
    flex: 0;
}
.media-fields .app-tab-view.preview .preview-container {
    flex: 1;
    position: relative;
    border: solid 1px black;
    margin-bottom: .5rem;
    margin-left: .5rem;
    margin-right: .5rem;
}

.media-fields .app-tab-view.options .preview-link {

    font-size: 2rem;
    position: absolute;
    bottom: -30px;
    padding: 0;
    right: -1px;
    z-index:10;
    color:white;
}
body.light-mode .media-fields .app-tab-view.options .preview-link {
    color:red;
}
.media-fields .app-tab-view.options .comments {
    padding-bottom: 8px;
    padding-top: 3px;
}

.media-fields .app-tab-item .fa-credit-card {    
    font-size: 21px;
    padding-top: 2px;
    padding-right: 8px;
}
.media-fields .html-display {
    padding: .7rem .5rem;
    border: solid 1px lightgray;
    border-radius: 5px;
    height: 100%;
    color: whitesmoke;
    font-size: 1.2rem;
}
.media-fields .html-display p {
    margin-bottom: 0px !important;
}

.media-section .app-form-fields > .app-form-header {
    display:flex;
}

.metadata-window {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.7);
    background-color: rgba(20,20,20,0.7);
    z-index: 5002;
    display: flex;
    flex-direction: column;
    /* overflow: auto;*/
    font-family: 'Montserrat', sans-serif;
}
body.show-checkout-page .metadata-window,
body.show-subscribe-page .metadata-window {
    display: none;
}
body.show-metadata .metadata-window {
    display: flex;
}
/*body.playback .metadata-window {
    display: none;
}*/
body.force-metadata .metadata-window {
    display: flex !important;
}
.metadata-window.dmsProjectLibraryMetadataWindow {
    z-index: 5003;
}
#UploadWindow.metadata-window {
    z-index: 499;
}


#metadata-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    /*justify-content: flex-end;*/
}

    #metadata-section .search-section {
        position: relative;
        display: flex;
        flex-direction: column;
        min-width: 0;
        word-wrap: break-word;
        background-color: white;
        background-clip: border-box;
        border: 1px solid rgba(0, 0, 0, 0.125);
        border-radius: 5px;
        font-size: .875rem;
        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%);
        margin: 1rem;
        margin-top: 1rem;
        padding: 0rem 1.5rem;
        /* padding-bottom: 1rem;
    padding-bottom: 1rem;*/
        margin-bottom: 0rem;
        display: flex;
        flex-direction: column;
        flex: 1;
        padding: 0;
        border: transparent;
        max-height: 97vh;
        overflow: hidden;
        width:80%;
    }
body.dark-mode #metadata-section .search-section {
    background: #1C1C22 !important;
}
#metadata-section .search-section .views {
    flex: 1;
    display: flex;
    flex-direction: column;
}
#metadata-section .search-section .views .view {
    flex:1;
    display: flex;
    flex-direction: column;
}
#metadata-section .search-section .views .view .list-view-container {
    flex:1;
    display: flex;
    flex-direction: column;
}
#metadata-section .search-section .views .view .list-view-container .list-view-body {
    flex:1;
    display: flex;
    flex-direction: column;
    position: relative;
    margin:0;
}
#metadata-section .search-section .views .view .list-view-container .list-view-body .list-view-no-items {
    flex:1;
    display: none;
    flex-direction: column;
}
.flex-column-1 {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.metadata-section-header {
    text-align: right;
}
.metadata-section-close-button {
    font-size: 2rem;
    font-size: 1.8rem;
    background-color: transparent;
    border: solid 1px transparent;
    outline: 0 !important;
    opacity: .8;
    transition: .2s;
    position: absolute;
    top: -3px;
    top: 1.5rem;
    right: 12%;
    z-index: 1;
    color: red;
    text-shadow: -1px 1px 2px rgb(0 0 0);
    text-shadow: 0px 1px 1px rgb(0 0 0);
}
body.dark-mode .metadata-section-close-button {
    color: white;
}
.metadata-section-close-button:hover {
    opacity: 1;
}
.metadata-section-close-button:active {
    opacity:.7;
}

#metadata-section .app-form-field.form-check .app-form-field-label {
    margin-left: 0px;
}
#metadata-section .fields-section {
    padding: 0 1.5rem;
    /* border-top: solid 1px #2A2A30; */
    border-bottom: solid 1px #2A2A30;
    padding-top: 10px;
    padding-bottom: 10px;
}
body.light-mode #metadata-section .fields-section {
    border-bottom: solid 1px lightgray;
}
#metadata-section .app-form-footer .app-form-buttons {
    padding-bottom: 1rem;
    margin-left: 1rem;
    margin-right: 1rem;
    border-top: 1px solid rgba(100,100,100, .5);
    margin-top: 0.5rem;
    padding-top: 13px;
}
#metadata-section .app-form-body {
    padding: 0rem .5rem;
    /*overflow: hidden;*/
    width:100%;
}
#metadata-section .app-form-body.large-padding-bottom {
    padding-bottom: 10rem;
}
#metadata-section .app-tabs ul {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    justify-content: center;
}
#metadata-section .app-form-footer {
    padding-left: 1rem;
    padding-right: 1rem;
}
/*#metadata-section .table-view .app-form-footer {
    border-top: solid 1px rgba(100,100,100,.3);
}*/
#metadata-section .table-view .app-form-footer .app-paginator {
    border-top: none;
}
.app-view.table-view .table img {
    max-width: 80px;
    max-height: 45px;
    min-height: 45px;
    object-fit: contain;
}
.app-view.table-view .table .svg-icon {
    max-width: 80px;
    max-height: 45px;
    min-height: 45px;
    object-fit: contain;
}
#metadata-section .app-tab-view .app-form-footer {
    flex-direction: row;
    justify-content: flex-end;
}
#metadata-section .app-view.summary .app-form-content {
    align-items: center;
}
#metadata-section .app-view.summary .app-tabs {
    margin-bottom: 1.8rem;
    width:100%;
}
#metadata-section .app-view.mediaItems-table {
    height: 100%;
    flex: unset;
    height: auto;
    margin-left: .5rem !important;
    min-height: 180px;
}
#metadata-section .app-view.mediaItems-table .app-form-footer .app-form-buttons {    
    margin: 0 !important;
    padding: 0 !important;
    border: none;
}
#metadata-section .app-view.mediaItems-table img {
    max-height:60px; 
}
#metadata-section .app-view.mediaItems-table td.thumbnail {
    padding-bottom: .5rem !important;
    padding-top: .25rem !important;
}
#metadata-section .app-view.mediaItems-table .app-form-footer  {
    padding-left: 0rem;
    padding-right: 0rem;
}

#metadata-section .app-form-live-status {
    position:absolute;
    bottom:.5rem;
    right:1.5rem;
}
#metadata-section .app-form-live-status-container {
    position: relative;
    display:flex;
    align-items:center;
}
#metadata-section .app-form-live-status-label {
    color: white;
    font-weight: 400;
    text-shadow: 0px 1px 2px rgb(0 0 0);
    /* animation: textPulse .3s linear infinite; */
    font-size: 3rem;
}

#metadata-section .app-form-live-status-indicator {
    background-color: red;
    border-radius: 100%;
    animation: statusIndicator 3s infinite;
    margin-right: 1rem;
    height: 1rem;
    width: 1rem;
    border: solid 1px firebrick;
    box-shadow: 0px 0px 10px rgb(255 0 0);
}

@keyframes statusIndicator {
    0% {
        border: solid 1px rgb(255, 49, 49);
        box-shadow: 0px 0px 50px rgb(255 0 0);
    }

    25% {
        border: solid 1px rgb(255, 25, 25);
        box-shadow: 0px 0px 25px rgb(255 0 0);
    }

    50% {
        border: solid 1px rgb(255, 0, 0);
        box-shadow: 0px 0px 0px rgb(255 0 0);
    }

    75% {
        border: solid 1px rgb(255, 25, 25);
        box-shadow: 0px 0px 25px rgb(255 0 0);
    }

    100% {
        border: solid 1px rgb(255, 49, 49);
        box-shadow: 0px 0px 50px rgb(255 0 0);
    }
}


#metadata-section .upload-section-file-status {
    color: white;
    text-shadow: -1px 1px 2px rgb(0 0 0);
    text-shadow: 0px 1px 1px rgb(0 0 0);
    padding-right: 1rem;
    font-size: 1.2rem;
}
#metadata-section .upload-section-files-spinner {
    font-size: 4rem;
    text-align: center;
    padding-bottom: 1rem;
    position: absolute;
    right: 4rem;
    color: white;
    text-shadow: -1px 1px 2px rgb(0 0 0);
    text-shadow: 0px 1px 1px rgb(0 0 0);
}





.app-form-image-background {
    position: absolute;
    top: -20px;
    left: -10px;
    z-index: 0;
    right: -20px;
    height: 150%;
    -webkit-filter: blur(15px);
    filter: blur(30px);
    transform: scale(1.1);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    transition: .2s;
    opacity:.7;
}
.app-form-labels .app-form-label {
    padding-bottom:0px;
}
.app-form-labels .app-form-label.label1 {
    font-size: 1.25rem;
    letter-spacing: 1px;
    color: white;
}

.app-form-labels .app-form-label.label2 {
    font-size: .9rem;
    color: whitesmoke;
   /* padding-top: 5px;*/
    line-height: 1.5;
}
body.dark-mode .list-view-header-data2 {
    color: whitesmoke;
}

.app-form-labels .app-form-label.label3 {
    font-size: .9rem;
    color: whitesmoke;
   /* padding-top: 5px;*/
    line-height: 1.5;
}
body.dark-mode .list-view-header-data3 {
    color: whitesmoke;
}

.app-form-labels .app-form-label.label4 {
    font-size: .9rem;
    color: whitesmoke;
   /* padding-top: 5px;*/
    line-height: 1.5;
}
body.dark-mode .list-view-header-data4 {
    color: whitesmoke;
}

.app-form-labels .app-form-label.label5 {
    font-size: .9rem;
    color: whitesmoke;
   /* padding-top: 5px;*/
    line-height: 1.5;
}
body.dark-mode .list-view-header-data5 {
    color: whitesmoke;
}

.app-form-labels .app-form-label.label6 {
    font-size: .9rem;
    color: whitesmoke;
   /* padding-top: 5px;*/
    line-height: 1.4;
}
body.dark-mode .list-view-header-data6 {
    color: whitesmoke;
}


.app-form-labels {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    text-shadow: -1px 1px 2px rgb(0 0 0);
    text-shadow: 0px 1px 1px rgb(0 0 0);
}

.input-group {
    display:flex;
}
.app-tab-view .table-container .table {
    width: calc(100% - 2px);
}
.app-view.mediaPurchases-table {
    height: 100%;
}
.app-view.mediaHistory-table {
    height: 100%;
}
.app-view.trailer {
    height: 100%;
}

#search-wrapper .actions button {
    font-size: .7rem;
    padding: 1px 10px;
    padding-top: 3px;
    padding-bottom: 3px;
    margin-top: 5px;
    justify-content: center;
}

/*#search-wrapper .actions button:hover
{
    color: #0069D9;
    border-color: #0069D9;
}

#search-wrapper .actions button:active
{
    color: #fff;
    background-color: #0069D9;
}

#search-wrapper .actions button.select
{
    color: #fff;
    background-color: #0069D9;
    border-color: #0069D9;
}*/

.app-navigation-seperator {
    height: 1px;
    min-height: 1px;
    background-color: lightgray;
    margin-left: 20px;
    margin-right: 20px;
}

body.dark-mode .app-navigation-seperator {
    background-color: rgba(180, 180, 180, 0.3);
}

.app-navigation-seperator.logo {
    margin: 0;
    height: 2px;
    background-image: linear-gradient( 90deg, #752877 0%, #ff5860 100%);
    background-image: linear-gradient( 90deg, #752877 0%, #ff5860 60%, #1C6688 100%);
    -webkit-box-shadow: 0 0 20px 0 rgb(255 88 96 / 50%);
    box-shadow: 0 0 20px 0 rgb(255 88 96 / 50%);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0 !important;
    margin: 0;
    max-height: 2px;
    overflow: hidden;
}


body.edit-layout .slide-show {
    left: 4.5rem;
}
body.show-layout-menu .slide-show {
    left: 35rem;
}
body.edit-layout .slide-show .slprev {
    left: 4.5rem;
}
body.show-layout-menu .slide-show .slprev {
    left: 35rem;
}
body.edit-layout .slide-show .pitch-links {
    left: 4.5rem;
}
body.show-layout-menu .slide-show .pitch-links {
    left: 35rem;
}

.dms-on-demand.admin-screen .app-search-content-button {
    display: flex;
    font-size: 2rem;
    align-items: baseline;
    margin-top: 0 !important;
}
.dms-on-demand.admin-screen .app-search-content-button input {
    font-size: 2.4rem;
    color: white;
    letter-spacing: .1rem;
    width: 100%;
    margin-left: 0.7rem;
    margin-bottom: 0;
    padding-bottom: 0;
}
.dms-on-demand.admin-screen .app-project-footer {
    position: initial;
}

.dms-on-demand.admin-screen .dms-on-demand-selection-container {
    padding-bottom: 0px;
    flex-direction: column;
    flex-wrap: nowrap;
    margin-top: 0.5rem;
}
.dms-on-demand.content-screen .sections-container-mediaItemTypes {
    flex-direction: row;
    padding: 0;
}
.dms-on-demand.content-screen .sections-container-playlists {
    flex-direction: row;
    padding: 0;
}
.dms-on-demand.content-screen .sections-container-channels {
    flex-direction: row;
    padding: 0;
}
.sections-container-search .links-container {
    padding-left: 1rem;
}
.sections-container-bridge .links-container {
    padding-left: 1rem;
}
.sections-container-bridge #search-keys .input-searches-options button.input-searches-option-clear {
    color:#0d6efd;
}
.sections-container-bridge #search-keys .input-searches-options button.input-searches-option-clear:hover,
.sections-container-bridge #search-keys .input-searches-options button.input-searches-option-clear:focus {
    color: white;
}
/*.sections-container-search {
    flex-direction: row;
}*/
.sections-container-analytics{
    flex-direction: row;
}
.sections-container-reports {
    flex-direction: row;
}
.sections-container-bridge {
    flex-direction: row;
}
.sections-container-reports .sections-tab {
    width: 20rem;
}
.sections-container-bridge .sections-tab {
    width: 20rem;
}

.dashboard-cards .dashboard-chart-item {
    padding-right: 0 !important;
    padding-left: 0 !important;
    display: flex;
    padding-top: 0rem;
}
@media (min-width: 768px) {
    .col-md-4 {
        flex: 0 0 33.33333% !important;
        max-width: 33.33333% !important;
    }
}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, .col-xl-auto {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}
@media (min-width: 768px) {
    .col-md-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }
}
.dashboard-cards {
    display: flex;
    flex-wrap: wrap;
    border-top: solid 1px rgba(100,100,100,.3);
    padding-top: 0.5rem;
    margin-left: -1rem;
}
.dashboard-cards .dashboard-chart-item {    
    padding-right: 0 !important;
    padding-left: 0 !important;
    display: flex;
    padding-top: 0rem;
}
.dashboard-section .card .card-body {
    color: #8b92a9;
    position: relative;
    display:flex;
}

.dashboard-section .card .card-body,
.dashboard-section .card .card-footer {
    padding: 0.9375rem 1.25rem;
}

.dashboard-section .card-body {
    flex: 1 1 auto;
    min-height: 1px;
    padding: 1.25rem;
    color: #202940;
}


.dashboard-section .card {
    margin: 1.875rem auto;
    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%);
    font-size: .875rem;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 520px;
    word-wrap: break-word;
    background-color: black;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, 0.125);
    font-size: .875rem;
    margin: 1rem;
    color: white;
    margin-top: 2.5rem;
    border-radius: 5px;
    box-shadow: 0 1px 2px rgb(0 0 0 / 7%), 0 2px 4px rgb(0 0 0 / 7%), 0 4px 8px rgb(0 0 0 / 7%), 0 8px 16px rgb(0 0 0 / 7%), 0 16px 32px rgb(0 0 0 / 7%), 0 32px 64px rgb(0 0 0 / 7%);
}

@media (min-width: 768px) {
    .col-md-4 {
        flex: 0 0 33.33333% !important;
        max-width: 33.33333% !important;
    }
}

.dashboard-section .ct-chart svg > g {
    width: 100% !important;
}
.dashboard-chart-subscribers .card-header {
    background-image: linear-gradient( -20deg, #fc6076 0%, #ff9a44 100%) !important;
    /*background-image: linear-gradient(-20deg, #c79081 0%, #dfa579 100%) !important;
    background-color: #FF9A8B !important;
    background-image: linear-gradient(20deg, #FF9A8B 0%, #FF6A88 55%, #FF99AC 100%) !important;*/

    background: #F13F60 !important;
    background: linear-gradient( 20deg, #F13F60, #CF3E75) !important;
}

.dashboard-chart-purchases .card-header {
    background-image: linear-gradient( -20deg, #fc6076 0%, #ff9a44 100%) !important;
    background: #00B4DB !important;
    background: -webkit-linear-gradient(to right, #0083B0, #00B4DB) !important;
    background: linear-gradient( 20deg, #0083B0, #00B4DB) !important;
}
/*.dashboard-chart-revenue .card-header {
    background-image: linear-gradient( -20deg, #fc6076 0%, #ff9a44 100%) !important;
    background-image: linear-gradient(-20deg, #c79081 0%, #dfa579 100%) !important;
    background-color: #FBAB7E !important;
    background-image: linear-gradient(20deg, #FBAB7E 0%, #F7CE68 100%) !important;
}*/
.dashboard-chart-media .card-header {
    background-color: #a7a6cb !important;
    background-image: linear-gradient(-20deg, #a7a6cb 0%, #8989ba 100%) !important;
}
/*.dashboard-chart-views .card-header {
    background-image: linear-gradient(-20deg, #845EC2 0%, #A178DF 100%) !important;
    background-color: #A9C9FF !important;
    background-image: linear-gradient(20deg, #A9C9FF 0%, #FFBBEC 100%) !important;
}*/

.dashboard-section .card .card-body {
    color: #8b92a9;
    position: relative;
    flex: 1 1 auto;
    min-height: 1px;
    padding: 1.25rem;
    padding-top: 1rem;
    padding-bottom: .7rem;
    color: #202940;
}
.dashboard-section .card .card-body {
    padding: 0.9375rem 1.25rem;
}
.dashboard-section .card .card-footer {
    padding: 1rem !important;
    border-top: 1px solid rgba(181, 181, 181, 0.1);
}
.dashboard-section .card .card-footer .stats {
    display: flex;
    align-items: center;
}
.dashboard-section .card .card-footer .stats i {
    padding-right: .5rem;
    font-size: 26px !important;
}
.dashboard-section .card .card-actions {
}

.dashboard-section .card .card-footer .stats .material-icons {
    position: relative;
    top: 0px;
    font-size: 1rem;
    margin-right: 0px;
    margin-left: 3px;
    font-size: 1.125rem;
}
.dashboard-section .card .card-footer .stats label {
    font-size: 1rem;
    flex: 1;
    color: white;
    opacity:1;
}
.dashboard-section .card .card-body .card-category,
.dashboard-section .card .card-body .card-title {
    color: white;
}
.dashboard-section .card .card-body .card-category {
    font-size: 1.6em;
    color: white;
    margin: 0;
}
.dashboard-section .card .card-body .card-category label {
    
    font-size: 14px;
    color: white;
    opacity:1;
}
.dashboard-section .card .card-body .card-category i {
    margin-right: .5rem;
}
body.dark-mode .dashboard-section .card .card-title {
    color: #ffffff;
}
.flex-1 {
    flex: 1;
}
.dashboard-section .card-title-container {
    padding-bottom: 1.5rem;
}
.dashboard-section .card-title {
    margin-bottom: 5px;
    font-size: 1.4rem;
    color: white !important;
    font-size: 1.125rem;
    line-height: 1.4em;
}
.dashboard-section .card .card-header {
    padding: .5rem 1rem;
    margin-bottom: 0;
    background-color: rgba(0,0,0,.03);
    border-bottom: 1px solid rgba(0,0,0,.125);
    border-radius: 5px;
    margin: 0rem 1rem;
    margin-top: -2rem;
    padding: 0.9375rem;
    padding-top: 1rem;
    padding-bottom: 0;
    padding-left: 2rem;
    padding-right: 2rem;
    text-shadow: -1px 1px 2px rgb(0 0 0);
    text-shadow: 0px 1px 1px rgb(0 0 0);
}
.dashboard-section .card.card-chart .ct-chart .ct-grid {
    stroke: rgba(255, 255, 255, 0.2);
}
.dashboard-section .ct-chart .ct-grid {
    stroke: rgba(181, 181, 181, 0.1);
    stroke-width: 1px;
    stroke-dasharray: 2px;
}
.dashboard-section .ct-grid {
    stroke: rgba(0, 0, 0, 0.2);
    stroke-width: 1px;
    stroke-dasharray: 2px;
}
.dashboard-section .card .card-header.card-header-primary .card-icon,
.dashboard-section .card .card-header.card-header-primary .card-text,
.dashboard-section .card .card-header.card-header-primary:not(.card-header-icon):not(.card-header-text) {
    box-shadow: 0 4px 20px 0px rgb(0 0 0 / 14%), 0 7px 10px -5px rgb(156 39 176 / 40%);
}
.dashboard-section .card .card-header-primary .card-icon,
.dashboard-section .card .card-header-primary .card-text,
.dashboard-section .card .card-header-primary:not(.card-header-icon):not(.card-header-text),
.dashboard-section .card.bg-primary,
.dashboard-section .card.card-rotate.bg-primary .front,
.dashboard-section .card.card-rotate.bg-primary .back {
    background: linear-gradient( 60deg, #7b1fa2, #913f9e) !important;
}
.dashboard-section .dashboard-chart-media .card-header {
    background-color: #a7a6cb;
    background-image: linear-gradient( -20deg, #a7a6cb 0%, #8989ba 100%);
}
.dashboard-section .card .card-header.card-header-rose .card-icon,
.dashboard-section .card .card-header.card-header-rose .card-text,
.dashboard-section .card .card-header.card-header-rose:not(.card-header-icon):not(.card-header-text) {
    box-shadow: 0 4px 20px 0px rgb(0 0 0 / 14%), 0 7px 10px -5px rgb(233 30 99 / 40%);
}

.dashboard-section .card .card-header-rose .card-icon,
.dashboard-section .card .card-header-rose .card-text,
.dashboard-section .card .card-header-rose:not(.card-header-icon):not(.card-header-text),
.dashboard-section .card.bg-rose,
.dashboard-section .card.card-rotate.bg-rose .front,
.dashboard-section .card.card-rotate.bg-rose .back {
    background: linear-gradient( 60deg, #ec407a, #d81b60) !important;
}
.dashboard-section .card .card-header.card-header-success .card-icon,
.dashboard-section .card .card-header.card-header-success .card-text,
.dashboard-section .card .card-header.card-header-success:not(.card-header-icon):not(.card-header-text) {
    box-shadow: 0 4px 20px 0px rgb(0 0 0 / 14%), 0 7px 10px -5px rgb(76 175 80 / 40%);
}

.dashboard-section .card .card-header-success .card-icon,
.dashboard-section .card .card-header-success .card-text,
.dashboard-section .card .card-header-success:not(.card-header-icon):not(.card-header-text),
.dashboard-section .card.bg-success,
.dashboard-section .card.card-rotate.bg-success .front,
.dashboard-section .card.card-rotate.bg-success .back {
    background: linear-gradient( 60deg, #288c6c, #4ea752) !important;
}
.dashboard-section .card .card-header.card-header-warning .card-icon,
.dashboard-section .card .card-header.card-header-warning .card-text,
.dashboard-section .card .card-header.card-header-warning:not(.card-header-icon):not(.card-header-text) {
    box-shadow: 0 4px 20px 0px rgb(0 0 0 / 14%), 0 7px 10px -5px rgb(255 152 0 / 40%);
}

.dashboard-section .card .card-header-warning .card-icon,
.dashboard-section .card .card-header-warning .card-text,
.dashboard-section .card .card-header-warning:not(.card-header-icon):not(.card-header-text),
.dashboard-section .card.bg-warning, .card.card-rotate.bg-warning .front,
.dashboard-section .card.card-rotate.bg-warning .back {
    background: linear-gradient( 60deg, #f5700c, #ff9800) !important;
}


.dashboard-section .card .card-header.card-header-rentals .card-icon,
.dashboard-section .card .card-header.card-header-rentals .card-text,
.dashboard-section .card .card-header.card-header-rentals:not(.card-header-icon):not(.card-header-text) {
    box-shadow: 0 4px 20px 0px rgb(0 0 0 / 14%), 0 7px 10px -5px rgb(76 175 80 / 40%);
    box-shadow: 0 4px 20px 0 rgba(0,0,0,.14),0 7px 10px -5px rgba(64,64,64,.4);
}

.dashboard-section .card .card-header-rentals .card-icon,
.dashboard-section .card .card-header-rentals .card-text,
.dashboard-section .card .card-header-rentals:not(.card-header-icon):not(.card-header-text),
.dashboard-section .card.bg-rentals,
.dashboard-section .card.card-rotate.bg-rentals .front,
.dashboard-section .card.card-rotate.bg-rentals .back {
    background: linear-gradient( 60deg, #288c6c, #4ea752) !important;
    background: linear-gradient( 195deg,#323a54,#1a2035) !important;
}


.dashboard-section .card .card-header.card-header-info .card-icon,
.dashboard-section .card .card-header.card-header-info .card-text,
.dashboard-section .card .card-header.card-header-info:not(.card-header-icon):not(.card-header-text) {
    box-shadow: 0 1px 2px rgb(0 0 0 / 7%), 0 2px 4px rgb(0 0 0 / 7%), 0 4px 8px rgb(0 0 0 / 7%), 0 8px 16px rgb(0 0 0 / 7%), 0 16px 32px rgb(0 0 0 / 7%), 0 32px 64px rgb(0 0 0 / 7%) !important;
}

.dashboard-section .card .card-header-info .card-icon,
.dashboard-section .card .card-header-info .card-text,
.dashboard-section .card .card-header-info:not(.card-header-icon):not(.card-header-text),
.dashboard-section .card.bg-info,
.dashboard-section .card.card-rotate.bg-info .front,
.dashboard-section .card.card-rotate.bg-info .back {
    background: linear-gradient( 20deg, #0083B0, #00B4DB) !important;
}


.dashboard-section .card.card-chart .ct-chart .ct-series-a .ct-bar {
    stroke-width: 10px;
}

.dashboard-section .card.card-chart .ct-chart .ct-series-a .ct-bar,
.dashboard-section .card.card-chart .ct-chart .ct-series-a .ct-line,
.dashboard-section .card.card-chart .ct-chart .ct-series-a .ct-point,
.dashboard-section .card.card-chart .ct-chart .ct-series-a .ct-slice-donut {
    stroke: rgba(255, 255, 255, 0.8);
    fill: rgba(255, 255, 255, 0.8);
}

.dashboard-section .ct-chart .ct-series-a .ct-point,
.dashboard-section .ct-chart .ct-series-a .ct-line,
.dashboard-section .ct-chart .ct-series-a .ct-bar,
.dashboard-section .ct-chart .ct-series-a .ct-slice-donut,
.dashboard-section .ct-chart .ct-series-a .ct-slice-pie,
.dashboard-section .ct-chart .ct-series-a .ct-slice-donut-solid,
.dashboard-section .ct-chart .ct-series-a .ct-area {
    stroke: #00bcd4;
}

.dashboard-section .ct-chart .ct-bar {
    fill: none;
    stroke-width: 10px;
}

.dashboard-section .ct-series-a .ct-point,
.dashboard-section .ct-series-a .ct-line,
.dashboard-section .ct-series-a .ct-bar,
.dashboard-section .ct-series-a .ct-slice-donut {
    stroke: #d70206;
}

.dashboard-section .ct-bar {
    fill: none;
    stroke-width: 10px;
}
.dashboard-section .card.card-chart .ct-chart .ct-label {
    color: rgba(255, 255, 255, 0.7);
}

.dashboard-section .ct-chart-bar .ct-label.ct-horizontal.ct-end {
    align-items: flex-start;
    justify-content: center;
    text-align: center;
    text-anchor: start;
}

.dashboard-section .ct-label.ct-horizontal.ct-end {
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    text-anchor: start;
}

.dashboard-section .ct-chart .ct-label {
    fill: rgba(0, 0, 0, 0.4);
    color: #8b92a9;
    display: flex;
}

.dashboard-section .ct-chart-line .ct-label,
.dashboard-section .ct-chart-bar .ct-label {
    display: block;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    left: 10px;
    position:relative;
}
.dashboard-section .ct-chart .ct-label.ct-vertical {
    position: relative;
    top: 15px;
}
.dashboard-section .ct-label {
    fill: rgba(0, 0, 0, 0.4);
    color: rgba(0, 0, 0, 0.4);
    font-size: 1rem;
    line-height: 1;
}
.sections-page.dashboard .section-header {
    padding-left: 1rem;
    padding-bottom: 1rem;
    font-size: 1.4rem;
}
.sections-page.dashboard .section-row {
    padding: 0;
    margin: 0;
}
.dashboard-section {
    position: absolute;
    overflow: auto;
}

/*.sections-page.revenue {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
    padding-right: 0;
}*/
.sections-page.revenue .app-body-container {
   /* flex: 1;*/
    border-top: solid 1px rgba(100,100,100,.3);
    margin-top: 1rem;
    padding-top: 1rem;
    position: relative;
    /* overflow: auto;*/
    flex: 1;
}
.sections-page.revenue .media-data {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
    margin-left: -.5rem;
    /*margin-right: -1rem;*/ 
    overflow: auto;
    position: absolute;
}
    .sections-page.revenue .media-data .column {
        margin: 1rem;
        border: solid 1px rgba(100,100,100,.1);
        padding: 1.5rem 2rem;
        border-radius: 5px;
        flex: 1;
        display: flex;
        flex-direction: column;
        line-height: 1.4;
        box-shadow: 7px 7px 7px 0px rgb(0 0 0 / 10%);
        box-shadow: 0 1px 2px rgb(0 0 0 / 7%), 0 2px 4px rgb(0 0 0 / 7%), 0 4px 8px rgb(0 0 0 / 7%), 0 8px 16px rgb(0 0 0 / 7%), 0 16px 32px rgb(0 0 0 / 7%), 0 32px 64px rgb(0 0 0 / 7%);
        background-color: rgba(0,0,0,.7);
        text-shadow: -1px 1px 2px rgb(0 0 0);
        text-shadow: 0px 1px 1px rgb(0 0 0);
    }
.sections-page.revenue .media-data .column.totals {
    background: linear-gradient( 60deg, #288c6c, #4ea752);
}
.sections-page.revenue .media-data .column.subscribed.monthly {
    background: linear-gradient(20deg, #F13F60, #CF3E75);
}
.sections-page.revenue .media-data .column.subscribed.yearly {
    background: linear-gradient( 20deg, #0083B0, #00B4DB);
}
.sections-page.revenue .media-data .column.purchase {
    background: linear-gradient( 60deg, #7b1fa2, #913f9e);
}
.sections-page.revenue .media-data .column.rented {
    background: linear-gradient( 195deg,#323a54,#1a2035)
}
/*.sections-page.revenue .section-row {
    border-top: solid 1px rgba(100,100,100,.3);
    padding-top: 1rem;
    margin-top: 0.5rem;
}
.sections-page.subscribers .section-row {
    border-top: solid 1px rgba(100,100,100,.3);
    padding-top: 1rem;
    margin-top: 0.5rem;
}*/
.sections-page > section {
    display: flex;
    flex-direction: column;
    flex: 1;
    /*padding-bottom: 1rem;*/
}
.uppercase {
    text-transform:uppercase;
}
.app-form-field-data-header {
    text-shadow: -1px 1px 2px rgb(0 0 0);
    text-shadow: 0px 1px 1px rgb(0 0 0);
    font-weight: bold;
    font-size: 1.4rem;
    white-space: nowrap;
    padding-bottom: 0.5rem;
}
.app-form-field-data {
    font-size: 1.2rem;
    padding-bottom:3px;
}
/*.app-form-field-data.fees {
    color: rgb(255, 171, 21);    
}
.app-form-field-data.positive {
    color:green;  
}*/
.app-form-field-data.total {
    border-top: solid 1px rgba(0,0,0,.3);
    padding-top: 0.5rem;
    margin-top: 0.2rem;
}
.app-form-field-data .app-label {
    display: flex;
    flex-direction: column;
    min-width: 180px;
    text-align: right;
    text-transform: uppercase;
    padding-right: 10px;
    text-align: right !important;
    opacity: 1;
}
.app-form-field-data .app-span {
    display: flex;
    flex:1;
    text-transform: uppercase;
    padding-right: 10px;
}
.column.subscribed .app-label {
    min-width: 265px;
}
.column.rented .app-label {
    min-width: 192px;
}
.column.purchase .app-label {
    min-width: 229px;
}
.column.usage .app-label {
    min-width: 149px;
}
.column.totals .app-label {
    min-width: 271px;
}
.column .app-form-field-data {
    flex-wrap: nowrap;
}
.column .app-label {
    text-transform: none !important;
    white-space: nowrap;
    text-align: left !important;
}
.sections-page section button.download-button {
    font-size: 1rem;
    color: #0d6efd;
    text-decoration: underline;
    opacity: 1 !important;
}
.revenue-summary {
    padding: 1rem;
    /* width: 100%; */
    background-color: black;
    background-clip: border-box;
    /* border: 1px solid rgba(0, 0, 0, 0.125); */
    /* border-radius: 0.25rem; */
    /* font-size: .875rem; */
    /* margin: 1rem; */
    color: white;
    /* margin-top: 2.5rem; */
    border-radius: 5px;
    box-shadow: 0 1px 2px rgb(0 0 0 / 7%), 0 2px 4px rgb(0 0 0 / 7%), 0 4px 8px rgb(0 0 0 / 7%), 0 8px 16px rgb(0 0 0 / 7%), 0 16px 32px rgb(0 0 0 / 7%), 0 32px 64px rgb(0 0 0 / 7%);
    margin: 1rem;
    margin-left: 1REM;
    margin-top: 0;
    MARGIN-RIGHT: 1rem;
    text-shadow: -1px 1px 2px rgb(0 0 0);
    text-shadow: 0px 1px 1px rgb(0 0 0);
    background: linear-gradient(to bottom, #0d6efd 0%,#7db9e8 100%);
    border-bottom: 1px solid rgba(0,0,0,.125);
    align-items: center;
    display: flex;
    flex-direction: column;
}
.revenue-summary-title-container {
}
.revenue-summary-title {
    font-size: 2.4rem;
    font-weight: bold;
}
.revenue-summary-project-container {
    display:flex;
    padding:.5rem;
}
.revenue-summary-date-container {
    display: flex;
    padding: .5rem;
}
.revenue-summary-lastStatement {
}
.revenue-summary-dateRange {
    padding-left:2rem;
    padding-right:2rem;
}
.revenue-summary-nextStatement {
}
.revenue-summary-totals-container {
    display:flex;
}
.revenue-summary-totalPayout-container {
}
.revenue-summary-totalPayout {
    font-size:3rem;
}
.revenue-summary-totalPayout.payout {
    color: #0d6efd;
}
.revenue-summary-totalPayoutLabel {
    font-size: 1rem;
    padding-left: 2rem;
}
.subscribers-summary .revenue-summary-totalPayoutLabel {
    padding-left:0;
}
.purchases-summary .revenue-summary-totalPayoutLabel {
    padding-left: 0;
}
.products-summary .revenue-summary-totalPayoutLabel {
    padding-left: 0;
}
.revenue-summary-totalFees-container {
    padding-left: 3rem;
    padding-right: 3rem;
}
.revenue-summary-totalFees {
    font-size: 3rem;
}
.revenue-summary-totalFees.fees {
    color: rgb(255, 171, 21);
}
.revenue-summary-totalFeesLabel {
    font-size: 1rem;
    padding-left: 2rem;
}
.subscribers-summary .revenue-summary-totalFeesLabel {
    padding-left: 0;
}
.purchases-summary .revenue-summary-totalFeesLabel {
    padding-left: 0;
}
.products-summary .revenue-summary-totalFeesLabel {
    padding-left: 0;
}
.revenue-summary-totalAmount-container {
}
.revenue-summary-totalAmount {
    font-size: 3rem;
}
.revenue-summary-totalAmount.positive {
    color:limegreen;
}
.revenue-summary-totalAmountLabel {
    font-size: 1rem;
    padding-left: 2rem;
    display:flex;
}
.subscribers-summary .revenue-summary-totalAmountLabel {
    padding-left:1rem;
}
.purchases-summary .revenue-summary-totalAmountLabel {
    padding-left: 1rem;
}


.dashboard-map-widget {
    height: 300px;
    width: 500px;
    text-align: end;
}
.jvectormap-legend-cnt-h {
    bottom: 0;
    right: 0;
}
.jvectormap-legend-cnt-v {
    top: 0;
    right: 0;
}

.jvectormap-legend-cnt {
    position: absolute;
}
.jvectormap-zoomin {
    top: 10px;
}
.jvectormap-zoomout {
    top: 30px;
}
.jvectormap-zoomin, .jvectormap-zoomout {
    width: 10px;
    height: 10px;
}
.jvectormap-goback, .jvectormap-zoomin, .jvectormap-zoomout {
    position: absolute;
    left: 10px;
    border-radius: 5px;
    background: #292929;
    padding: 3px;
    color: #fff;
    cursor: pointer;
    line-height: 10px;
    text-align: center;
    box-sizing: content-box;
}
.jvectormap-container {
    width: 100%;
    min-width:300px;
    height: 100%;
    min-height:200px;
    position: relative;
    overflow: hidden;
    touch-action: none;
}
.dashboard-map {
    padding: 1rem;
    /* width: 100%;*/
    background-color: black;
    background-clip: border-box;
    /*  border: 1px solid rgba(0, 0, 0, 0.125);*/
    /* border-radius: 0.25rem;*/
    /* font-size: .875rem; */
    /* margin: 1rem; */
    color: white;
    /* margin-top: 2.5rem; */
    border-radius: 5px;
    box-shadow: 0 1px 2px rgb(0 0 0 / 7%), 0 2px 4px rgb(0 0 0 / 7%), 0 4px 8px rgb(0 0 0 / 7%), 0 8px 16px rgb(0 0 0 / 7%), 0 16px 32px rgb(0 0 0 / 7%), 0 32px 64px rgb(0 0 0 / 7%);
    margin: 1rem;
    margin-left: 1REM;
    margin-top: 0;
    MARGIN-RIGHT: 1.9rem;
    text-shadow: -1px 1px 2px rgb(0 0 0);
    text-shadow: 0px 1px 1px rgb(0 0 0);
    background: linear-gradient(to bottom, #0d6efd 0%,#7db9e8 100%);
    border-bottom: 1px solid rgba(0,0,0,.125);
}
.dashboard-map-title-container {
    display: flex;
}
.dashboard-map-icon {
    border-radius: 5px;
    background-color: #999;
    padding: 15px;
    margin-top: -20px;
    margin-right: 15px;
    float: left;
    box-shadow: 0 4px 20px 0 rgb(0 0 0 / 14%), 0 7px 10px -5px rgb(76 175 80 / 40%);
    background: linear-gradient( 60deg,#66bb6a,#43a047);
    display: none;
}
.dashboard-map-title {
    padding-left:1rem;
    font-size:2rem;
    font-weight:bold;
}
.dashboard-map-item-container {
    display: flex;
    justify-content: space-between;
}
.dashboard-map-countries-container {
    margin-right:2rem;
}
.dashboard-map-container {

}
.dashboard-map-countries {
    padding: 1rem 0;
    position: relative;
    flex: 1;
}
.dashboard-map-countries table {
    width:100%;
}
.dashboard-map-countries table.scrollable {    
    overflow: auto;
    position: absolute;
}
.dashboard-map-countries table th {
    border-bottom: solid 1px rgba(100,100,100,.3);
    text-transform: uppercase;
    font-size: 1rem;
    padding: .5rem 1rem;
}
.dashboard-map-countries table td {
    font-size: 1rem;
    padding: .5rem 1rem;

}
.dashboard-map-countries table td.center,
.dashboard-map-countries table td.center > div,
.dashboard-map-countries table th.center{
    text-align:center;    
}
.dashboard-map-countries table td.right,
.dashboard-map-countries table td.right > div,
.dashboard-map-countries table th.right{
    text-align:right;
}
.dashboard-subscriber-actions {
    display:flex;
}
.dashboard-subscriber-actions button {
    margin: 0 1rem;
}

.dashboard-subscriber-error .warning {
    color: goldenrod;
}
.dashboard-subscriber-error .ok {
    color:green;
}
.dashboard-subscriber-error .error {
    color: red;
}
.dashboard-subscriber-artwork {
    text-align: center;
}
.dashboard-subscriber-artwork img {
    max-width: 125px;
    max-height: 125px;
}
.app-tab-view.product {
    flex-direction: row;
    position: relative;
    overflow: hidden;
    justify-content: center;
}
.app-tab-view.product .app-form-field-image-container {
 /*   border-color: transparent !important;
    padding: 0;*/
    min-width: 400px;
}
.app-tab-view.product .app-form-field-image-container .app-form-field-img {
    max-width:500px;
    max-height:300px;
}
.app-tab-view.product .product-info {
    flex:1;
    display:flex;
}
.app-tab-view.product .product-pricing {
    flex:1;
}
.app-tab-view.product .product-data {
    flex: 1;
    margin: 0.25rem;    
}
.app-tab-view.product .product-image {
    flex: 1;
    margin: 0.25rem;    
}
.app-tab-view.product .app-form-field-textarea.productDescription textarea {
    min-height: 150px;
}
.app-tab-view.product .app-form-field-textarea.productTitle textarea {
    min-height: 50px;
}
.app-tab-view.product .app-form-actions {    
    display: flex;
   /* margin-top: -10px;*/
    padding-bottom: 10px;
}
.sections-container-user .app-icon-span.verified {
    color: green;
    padding-top: 0.5rem;
    font-size: 1rem;
}
.sections-container-user .app-button-icon.edit {
    font-size: 1rem;
    color: #0d6efd;
    padding-left: 1rem;
}
.sections-container-user .email-field-body {
    font-size: 1.6rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.sections-container-user .email-field-body label {
    opacity: 1;
}
.sections-container-user .login-email input {
    font-size: 1.6rem;
    min-width: 700px;
}
.sections-container-analytics .sections-page {
    padding-top:0rem;
}




#views .view.library  {
    height: 100%;
}


#views .view.library .container {
    flex: 1;
    display: flex;
    overflow: hidden;
    height:100%;
    position:relative;
}

    #views .view.library .container > .display {
        flex: 1;
        display: flex;
        overflow: hidden;
        position: absolute;
        right: 0;
        left: 0;
        top: 0;
        bottom: 0;
    }


.sections-container .splitter {
    width: 1px;
    /* background-color: #d0d0d0;*/
    cursor: ew-resize !important;
    position: relative;
}

.sections-container .splitter-helper {
    z-index: 10;
    position: absolute;
    left: -5px;
    right: -5px;
    top: 0px;
    bottom: 0px;
    cursor: ew-resize !important;
    display: flex;
}

    .sections-container .splitter-helper.hidden {
        display: none;
    }


#views .view.library section {
    overflow: auto;
}

    #views .view.library section.hidden {
        display: none;
    }

    #views .view.library section.library {
      /*  background-color: whitesmoke;*/
        color: rgb(83, 79, 91);
        /*font-weight:bold;*/
        width:100%;
        margin-left:5px;
    }

        #views .view.library section.library .subsection {
            display: flex;
            flex-direction: column;
            padding-bottom: 0px;
            width:100%;
        }

            #views .view.library section.library .subsection > label {
                color: rgb(120, 118, 119);
                font-size: .7em;
                display: flex;
                align-items: center;
                flex: 1;
                padding: 5px 10px;
                padding-left: 12px;
                padding-bottom: 3px;
            }

            #views .view.library section.library .subsection.drop > button {
                border-bottom: 2px solid black;
            }

            #views .view.library section.library .subsection > button .expand {
                transition: transform linear 100ms;
                padding: 3px;
                padding-right: 0px;
                position: relative;
                top: -1px;
                color: white;
                padding-left: 5px;
                padding-right: 5px;
            }

                #views .view.library section.library .subsection > button .expand.expanded {
                    transform: rotate(90deg) translateY(2px) translateX(-1px);
                }

            #views .view.library section.library .subsection > button .expand .svg-icon {
                width: 6px;
                height: auto;
            }

            #views .view.library section.library .subsection > label .name {
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                font-size: 1em;
                color: white;
                flex: 1;
                text-align: left;
            }

            #views .view.library section.library .subsection .items {
                display: flex;
                flex-direction: column;
                flex: 1;
            }

                #views .view.library section.library .subsection .items.hide {
                    display: none;
                }

                #views .view.library section.library .subsection .items .item {
                    display: flex;
                    flex-direction: column;
                    flex: 1;
                    /*overflow:hidden;*/
                }

                    #views .view.library section.library .subsection .items .item.is-hidden {
                        display: none;
                    }

                    #views .view.library section.library .subsection .items .item > button {
                        display: flex;
                        align-items: center;
                        flex: 1;
                        /*cursor: default;*/
                        font-size: 1rem;
                        padding: 10px;
                        padding-left: 17px;
                        color: white;
                        /*border-radius: 3px;*/
                    }

                    #views .view.library section.library .subsection .items .item > button {
                        padding-left: 10px;
                    }

                    #views .view.library section.library .subsection .items .item.drop > button {
                        border-bottom: 2px solid white;
                    }

                    #views .view.library section.library .subsection .items .item > button:hover {
                        background-color: rgba(100,100,100,.1);
                    }

                    #views .view.library section.library .subsection .items .item.hilite-drop > button {
                        background-color: rgba(100,100,100,.1);
                    }

                #views .view.library section.library .subsection .items .hilite.item > button {
                    background-color: rgba(100,100,100,.1);
                }

                #views .view.library section.library .subsection .items .select.item > button {
                    background-color: rgba(100,100,100,.7) !important;
                    color: white !important;
                    background: #0d6efd !important;
             /*       box-shadow: 0 4px 20px 0px rgb(0 0 0 / 14%), 0 7px 10px -5px rgb(76 175 80 / 40%) !important;*/
                    border-right-width: 3px;
                }
                #views .view.library section.library .subsection .items .item:not(.select) > button:hover {
                    background-color: rgb(50,50,50) !important;
                    opacity: 1;
                    border-right-color: #0d6efd;
                }
            #views .view.library section.library .subsection > button {
                padding:10px;
            }
            #views .view.library section.library .subsection > button.context-menu {
                background-color: rgba(100,100,100,.7) !important;
                color: white !important;
            }


            #views .view.library section.library .subsection.select > button {
                background-color: rgba(100,100,100,.7) !important;
                color: white !important;
                background: #0d6efd !important;
                /*box-shadow: 0 4px 20px 0px rgb(0 0 0 / 14%), 0 7px 10px -5px rgb(76 175 80 / 40%) !important;*/
                border-right-width: 3px;
            }
            #views .view.library section.library .subsection:not(.select) > button:hover {
                background-color: rgb(50,50,50) !important;
                opacity: 1;
                border-right-color:  #0d6efd;
            }
            body.light-mode #views .view.library section.library .subsection:not(.select) > button:hover {
                background-color: rgba(154, 181, 213, .2) !important;
                opacity: 1;
                border-right-color:  #0d6efd;
            }

                #views .view.library section.library .subsection .items .context-menu.item > button {
                    background-color: rgba(100,100,100,.7) !important;
                    color: white !important;
                }

                    #views .view.library section.library .subsection .items .context-menu.item > button.selected {
                        background-color: #1C1C22 !important;
                    }

                #views .view.library section.library .subsection .items .item > button > .icon-container {
                    width: 0;
                    min-width: 18px;
                    display: flex;
                    justify-content: center;
                }
                #views .view.library section.library .subsection .items .item.no-item > button .icon-container {
                    margin-left: 5px;
                }
                #views .view.library section.library .subsection .items .item > button .icon {
                    min-width: 28px;
                    max-width: 28px;
                    max-height: 56px;
                }

                    #views .view.library section.library .subsection .items .item > button .icon.hide {
                        display: none;
                    }

                #views .view.library section.library .subsection .items .item > button .icon-container .svg-container {
                    flex: 1;
                    min-width: 28px;
                    max-width: 28px;
                    max-height: 28px;
                    display: flex;
                }

                    #views .view.library section.library .subsection .items .item > button .icon-container .svg-container svg {
                        flex: 1;
                        min-width: 28px;
                        max-width: 28px;
                        min-height: 28px;
                        max-height: 28px;
                    }

                #views .view.library section.library .subsection .items .item > button .name {
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    margin-left: .8rem;
                }

                /*#views .view.library section.library .resize .subsection .items .item>button {
    cursor: ew-resize;
}

#views .view.library section.library.resize {
    cursor: ew-resize;
}*/

            #views .view.library section.library .subsection .items .item .expand {
                /*width: auto !important;
    text-align: right;
    padding-right: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: transform linear 100ms;
    margin-left: -3px;
    font-size: .8em;*/
                width: 12px;
                text-align: right;
                /*  font-weight: bold;*/
                cursor: pointer;
                transition: transform linear 100ms;
                font-size: .8em;
                margin-left: -7px;
                margin-right: .5rem;
                padding: 5px;
            }
.tab-container #views .view.library section.library .subsection .items .item .expand {
    margin-left: 7px;
    margin-right: 0rem;
}
#views .view.library section.library .subsection .items .item .expand.nonvisible {
    visibility: hidden;
}

                    #views .view.library section.library .subsection .items .item .expand.expanded {
                        transform: rotate(90deg) translateY(0px) translateX(-4px);
                    }

                    #views .view.library section.library .subsection .items .item .expand .svg-icon {
                        width: 6px;
                        height: 6px;
                    }
.tab-container #views .view.library section.library .subsection .items .item .expand .svg-icon {
    width: 10px;
    height: 10px;
}

                        #views .view.library section.library .subsection .items .item .expand .svg-icon .shape-fill {
                            fill: black;
                            stroke: black;
                        }
.tab-container #views .view.library section.library .subsection .items .item .expand .svg-icon .shape-fill {
    fill: #fff;
    stroke: #fff;
}

#views .view.library section.library .subsection .items .item.select > button .expand .svg-icon .shape-fill {
    fill: #fff;
    stroke: #fff;
}

                /*#views .view.library section.library.resize .subsection .items .item>button {
    cursor: ew-resize !important;
}

#views .view.library section.library.resize .subsection .items .item {
    cursor: ew-resize !important;
}*/

                #views .view.library section.library .subsection .items .item .items {
                    display: none;
                    flex-direction: column;
                    flex: 1;
                }

                    #views .view.library section.library .subsection .items .item .items.expanded {
                        display: flex;
                    }


    /*#views .view.library section.library .subsection > .items .item .items .item>button
{
    padding:2px 10px 2px 26px;
}*/


    /*##hovercolor #289552*/

    #views .view.library section.content {
        flex: 1;
    }



#library-information-bar {
    max-height: 22px;
    min-height: 22px;
    background: linear-gradient(to bottom, #e4e5e5 0, #d9d9d9 100%);
    border: solid 1px #d0d0d0;
    text-overflow: ellipsis;
    overflow: hidden;
    display: flex;
    justify-content: center;
    font-size: .75em;
    align-items: center;
    border-color: rgba(0,0,0, .05);
}

    #library-information-bar.hidden {
        max-height: 0px;
        min-height: 0px;
        border-top: none;
    }

.playback #library-information-bar {
    display: none;
}

.fullscreen #library-information-bar {
    display: none;
}



.view.list {
    display: flex !important;
    flex: 1 !important;
    overflow: auto;
    margin-left: 0px;
    position: relative;
    height:100%;
}

.view.hidden {
    display: none;
}

.view.list .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;
}

.drag-image {
    position: absolute;
    opacity: 0;
    left: -1000px;
    top: -1000px;
}

    .drag-image > div {
        position: relative;
        width: 100%;
        height: 100%;
    }

        .drag-image > div img {
            position: absolute;
            max-width: 180px;
            max-height: 180px;
        }

    .drag-image .drag-square {
        position: absolute;
        background-color: #0D7AFF;
        border: solid 1px #0D7AFF;
        padding: 10px;
        left: 44px;
        top: 50px;
        color: white;
    }

.list-view-container {
    display: none;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    position: relative;
}

    .list-view-container.show {
        display: flex;
    }

.list-view-header {
    display: flex;
    /*max-height: 115px;
    min-height: 115px;*/
    /*  background-color: whitesmoke;*/
    border-bottom: solid 1px rgba(100,100,100,.3);
    align-items: center;
    position: relative;
    /*   border-color: rgba(0,0,0, .05);*/
    min-height: 200px;
    overflow: auto;
}
/*.clients .list-view-header {
    padding-top:6px;
}*/

.list-view-header-left-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.list-view-header-item-container {
    display: flex;
    align-items: center;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    height:100%;
}
.upload-files .list-view-header-item-container {
    display: flex;
    height:unset;
    flex-direction: column;
    align-items: baseline;
    padding: 0 1rem;
}
.upload-files .links-warning-label {
    padding-left:.6rem;
}

.list-view-header-links {
    /*position: absolute;
    top: .5rem;
    left: .5rem;*/
    font-size: .9rem;
    padding: 10px;
    padding-top: 3px;
    padding-bottom: 3px;
    z-index: 5;
    display: flex;
    align-items: baseline;
}

    /*.clients .list-view-header-links {
    top: 10px;
}*/

    .list-view-header-links a {
        margin-left: .3rem;
        margin-right: .3rem;
        color: #373737;
    }

        .list-view-header-links a.html-link {
            margin-left: 1rem;
            margin-right: 0;
            cursor: pointer;
            opacity: .8;
            transition: .2s;
            color:white;
        }

            .list-view-header-links a.html-link:hover {
                opacity: 1;
            }

            .list-view-header-links a.html-link:active {
                opacity: .8;
            }

    .list-view-header-links i {
        font-size: .5rem;
        color: whitesmoke;
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }

    .list-view-header-links a > i {
        color: white;
        position: relative;
        top: 0px;
        margin-left: 0px;
        font-size: .9rem;
    }

.no-info .list-view-header {
    max-height: 0px;
    min-height: 0px;
    border-bottom: none;
    overflow: hidden;
}

.list-view-header-artwork {
    display: flex;
    /* width: 115px; */
    /* height: 115px; */
    align-items: center;
    justify-content: center;
    padding-left: 35px;
    padding-right: 15px;
}

.list-view-header-images {
    display: flex;
}

.client-item .list-view-header-images {
    top: .5rem;
    position: relative;
    transform: scale(.9);
}

.client-item .list-view-header-artwork {
    padding-right: 0px !important;
}

.client-item .list-view-header-data {
    padding-top: .5rem;
}

.list-view-header-img,
.list-view-header-svg {
    max-height: 100px;
    max-width: 100px;
    /*border: solid 1px lightgray;
    box-shadow: 0px 3px 6px 2px rgba(163, 157, 163, 0.3);*/
}

.list-view-header-img {
    box-shadow: 0px 3px 6px 2px rgba(163, 157, 163, 0.3);
    box-shadow: 7px 7px 7px 0px rgb(0 0 0 / 10%);
}

.default-artwork .list-view-header-img {
    box-shadow: none;
}

.list-view-header-img.default-artwork {
    box-shadow: none;
}

.playlists .list-view-header-img {
    box-shadow: none;
}

.channels .list-view-header-img {
    box-shadow: none;
}

.clients .list-view-header-img {
    box-shadow: none;
}

.list-view-header-img.hide {
    display: none;
}

.device .list-view-header-img {
    border: none;
}

.device-folder .list-view-header-img {
    border: none;
}

.list-view-header-images svg {
    width: 100%;
    max-height: 85px;
}

.list-view-header-data1 {
    font-size: 1.25em;
    letter-spacing: 1px;
}

.list-view-header-data2 {
    font-size: .75em;
 /*   color: gray;*/
    padding-top: 5px;
}

.list-view-header-data3 {
    font-size: .75em;
   /* color: gray;*/
    padding-top: 5px;
}

.list-view-header-data4 {
    font-size: .75em;
    /*color: gray;*/
    padding-top: 5px;
}

.list-view-header-data > div:empty {
    padding-top: 0;
}

.list-view-header-search {
    /* padding: 0px 15px;
    border-left: solid 1px lightgray;
    margin: 1rem;*/
    font-size: .9rem;
    flex: 1;
    display: flex;
  /*  position: absolute;*/
    /* transition: .75s;*/
    right: -600px;
    transition:.3s;
    /*background-color: whitesmoke;*/
    padding: 10px;
    padding-bottom: 5px;
    padding-right: 0;
    padding-left: 0;
    /*z-index: 5;*/
}
/*.list-view-container.reports .list-view-header-search {
    right: -1091px;
}*/
.list-view-header-search-options {
    justify-content: space-between;
    display: flex;
    /*flex-direction: column;*/
    position: relative;
    flex: 1;
    align-items: flex-end;
    justify-content: end;
}
.list-view-header-search-options button {
    margin:.5rem 1rem;     
}

.list-view-header-search-options-details {
    /*width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    border: 1px solid gray;*/
}
/*.list-view-header-search-options-details-dot {
    width: 1px;
    height: 1px;
    border: 2px solid;
    border-radius: 100px;
    background-color: gray;
    color: gray;
}*/

.show-search-options .list-view-header-search {
    right: -1px;
}

.sortBy-search-options .list-view-header-search {
    right: -1px;
}
/*.show-search-options .list-view-container.analytics .list-view-header-search {
    right: unset;
    left: 122px;
    top: 13px;
}*/
.list-view-header-search-field {
    display: flex;
    align-items: center;
    padding-bottom: 5px;
}

    .list-view-header-search-field span {
        padding-right:.5rem;
        min-width: 68px;
        text-align: right;
        white-space:nowrap;
    }

.list-view-header-search-thumbnails {
    display: flex;
    justify-content: space-between;
    padding-top: 2px;
}

.list-view-header-search-thumbnails-container {
    position: relative;
    left: -17px;
    display: flex;
    align-items: center;
}

.list-view-header-search-subfolders-container {
    position: relative;
    left: -9px;
    display: flex;
    align-items: center;
    padding-top: 5px;
}

.list-view-header-search-checkbox {
    display: flex;
    justify-content: space-between;
    padding-top: 2px;
}

.list-view-header-search-checkbox-container {
    position: relative;
    left: -14px;
    display: flex;
    align-items: center;
}

.list-view-header-search-data {
    padding-right: 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.list-view-header-search-data-1 {
    border-left: solid 1px lightgray;
    padding-left: 10px;
    margin-left: 10px;
    border-color: rgba(100,100,100, .3);
}
/*.list-view-container.analytics .list-view-header-search-data-1 {
    border-left: none;
}
*/
.list-view-header-search-data-2 {
    /* padding-top: 17px;*/
    order: 1;
}

.list-view-header-search-actions {
   /* position: absolute;*/
    right: 21px;
    bottom: 21px;
    display: flex;
    align-items: baseline;
}

.list-view-header-search input[type=text] {
    min-width: 175px !important;
}

.list-view-header-search-actions button {
    margin-left: 5px;
}

.list-view-header-search-data-3 {
    /* padding-top: 17px;*/
}

.list-view-header-search-data-4 {
    /* padding-top: 17px;*/
    order: 2;
}

.list-view-header-search-data-5 {
    /* padding-top: 17px;*/
    order: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.list-view-header-search-data-2 .list-view-header-search-field span {
    min-width: 131px;
}

.list-view-header-search-data-3 .list-view-header-search-field span {
    min-width: 45px;
}

.list-view-container.reports .list-view-header-search-data-2 .list-view-header-search-field span {
    min-width: 54px;
}
/*.list-view-container.reports .list-view-header-search-data-3 .list-view-header-search-field span {
    min-width: 71px;
}*/
.list-view-container.reports .list-view-header-search-data-4 .list-view-header-search-field span {
    min-width: 29px;
}

.list-view-container.reports .list-view-header-search-data-5 .list-view-header-search-field span {
    min-width: 78px;
}

.list-view-container.reports .list-view-header-search-subfolders-container {
    left: 0px;
}

.list-view-container.reports .list-view-header-search-checkbox-container {
    left: 0px;
}

.list-view-container.reports .list-view-header-search-actions {
    /*bottom: 10px;*/
    bottom: unset;
    padding-top: 2px;
}

.list-view-header-search-field select {
    font-size: inherit !important;
}

.list-view-header-search-field input[type="checkbox"] {
    position: relative;
    top: -1px;
}
.list-view-container.reports .list-view-header-search-field input[type="checkbox"] {
    order:1;
}
.list-view-container.reports .app-form-field.form-check .app-form-field-label {
    padding-left: 0px;
    padding-right: .5rem;
    text-transform: none;
    font-size: .9rem !important;
}


.list-view-container.clients .list-view-header-search-checkboxes .list-view-header-search-field input[type="checkbox"] {
    order: 1;
}

.list-view-container.clients .list-view-header-search-checkboxes .list-view-header-search-subfolders {
    padding-right: 11px;
}

.list-view-container.clients .list-view-header-search-checkboxes {
    padding-right: 12px;
}

.list-view-container.clients .list-view-header-search-checkboxes .app-form-field.form-check .app-form-field-label {
    padding-left: 0px;
    padding-right: .5rem;
    text-transform: none;
    font-size: .9rem !important;
}

.list-view-header-search-show-non-streamable {
    padding-top: 5px;
}

.list-view-header-search-header {
    color: whitesmoke;
    padding: 5px;
    position: relative;
    top: -6px;
    left: 15px;
}

    .list-view-header-search-header span {
        font-size: .5rem;
        text-transform: uppercase;
        letter-spacing: 2px;
    }

.list-view-header-search-show {
    padding: 5px;
    height: fit-content;
}

.show-search-options .list-view-header-search-show {
    display: none;
}

.list-view-header-search-hide {
    padding: 5px;
    height: fit-content;
    display: none;
}

.show-search-options .list-view-header-search-hide {
    display: block;
}

.list-view-header-search-data-4 .list-view-header-search-checkbox span {
    min-width: 90px;
}

.list-view-body {
    display: flex;
    flex-direction: column;
    overflow: auto;
    flex: 1;
    /*width: calc(100% - 1px);*/
    position: relative;
}
.list-view-body.upload {
    overflow:visible;    
}

/*.list-view-body.item-details {
    overflow:unset;
}*/

.list-view-loading-button {
    display: none;
    color: red;
    cursor: pointer;
    opacity: .7;
    transition: .3s ease-in-out;
}

    .list-view-loading-button:hover {
        opacity: 1;
    }

    .list-view-loading-button:active {
        opacity: .9;
        transition: none;
    }

.list-view-groups {
    display: flex;
    flex: 1;
  /*  background-color: white;*/
    flex-wrap: wrap;
    /*overflow:auto;*/
    align-content: flex-start;
    /*height:100%*/
    /*padding-left: 1px;
    padding-top: 1px;*/
    /*justify-content: space-around;*/
}
.view.list .list-view-groups {
    position: absolute;
}

.group-lists .list-view-groups {
    display: block !important;
    flex-wrap: nowrap;
}

.group-lists .list-view-groups-top {
    width: 100%;
}

.group-lists .list-view-groups-bottom {
    width: 100%;
}

.list-view-container.channels .list-view-groups {
    flex-wrap: nowrap;
}

.list-view-container.channels .list-view-groups.force-wrap {
    flex-wrap: wrap;
}


.list-view-body.group-lists {
    flex-direction: column;
}

.item-details .list-view-groups {
    display: none;
}

.no-items .list-view-groups {
    display: none;
}

.not-ready .list-view-groups {
    display: none;
}

.show-schedule .list-view-groups {
    display: none;
}

.sortBy-schedule .list-view-groups {
    display: none;
}
/*.loading-items .list-view-groups {
    display:none;
}
.loading-items .list-view-group-list {
    display: none;
}*/

.list-view-group {
    display: flex;
    flex-direction: column;
    padding: 5px !important;
    border: solid 1px transparent !important;
    position: relative;
    cursor: default !important;
    z-index: 3;
    height:fit-content;
}

    .list-view-group.is-hidden {
        display: none;
    }

    .list-view-group.is-filtered {
        display: none;
    }

.show-streamable-files .list-view-group.non-streamable-file {
    display: none;
}

.show-non-streamable-files .list-view-group.streamable-file {
    display: none;
}

.show-missing-files .list-view-group.non-missing-file {
    display: none;
}

.show-files-in-cloud .list-view-group.file-not-in-cloud {
    display: none;
}

.show-files-not-in-cloud .list-view-group.file-in-cloud {
    display: none;
}

.show-audio .list-view-group:not(.audio) {
    display: none;
}

.show-video .list-view-group:not(.video) {
    display: none;
}

.show-images .list-view-group:not(.image) {
    display: none;
}

.show-urls .list-view-group:not(.url) {
    display: none;
}

.show-subtitles .list-view-group:not(.subtitles) {
    display: none;
}

.list-view-group.device, .list-view-group.device-folder {
    display: flex !important;
}

.list-view-group.show-always {
    display: flex !important;
}

.list-view-group.expander {
    display: none;
    flex-direction: row;
    position: relative;
    overflow: hidden;
    border-top: solid 1px lightgray !important;
    border-bottom: solid 1px lightgray !important;
    width: calc(100% + 1px);
    margin-left: -1px;
    margin-right: -1px;
    max-height: 0;
}

    .list-view-group.expander > .image {
        position: absolute;
        top: 0;
        left: 0;
        /* z-index: 0; */
        right: 0;
        bottom: 0;
        background-color: black;
    }

        .list-view-group.expander > .image .background {
            position: absolute;
            top: 0;
            left: 0;
            /* z-index: 0; */
            right: 0;
            bottom: 0;
            -webkit-filter: blur(15px);
            filter: blur(30px);
            transform: scale(1.1);
            background-repeat: no-repeat;
            background-size: cover;
            background-position: 0% 30%;
            opacity: .7;
        }

/*.show-groups .list-view-group {
    display: flex;
}*/
.list-view-group.show {
    display: flex !important;
}

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

.group-lists .list-view-group {
    flex-direction: row;
}

.groups .list-view-group:hover {
}

/*.group-lists .list-view-group.select {
    background-color: #333;
    border: 1px solid #333;
}*/
.groups .list-view-group.select .list-view-group-item {
    background-color: rgb(40, 46, 51);
    border: solid 1px #0d6efd;
    /*background-color: rgba(154, 181, 213, .2);
    border: 1px solid #94ADCB;*/
}

.list-view-group.expanded {
    display: none;
    width: 100%;
    height: auto;
    flex-direction: row;
    background-color: rgb(221, 221, 221);
    margin: 0px;
    padding: 0px;
    height: 0px;
    border: 0px;
    backface-visibility: hidden;
}

.groups .list-view-group.expanded {
    display: flex;
    margin-top: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    height: auto;
}

.groups .list-view-group.hide {
    display: none;
}


.list-view-group-item {
    display: flex;
    flex-direction: column;
    cursor: default;
    align-items: baseline;
    /*padding: 5px;
    padding-bottom: 10px;*/
    overflow: hidden;
    text-overflow: ellipsis;
    /*transition-property: background-color;
    transition: .2s;*/
    border: 1px solid transparent;
    backface-visibility: hidden;
    position: relative;
    border-radius: 5px;
    box-shadow: 0px 3px 6px 2px rgb(163 157 163 / 31%);
    color: black;
    margin-top: 10px;
    margin-left: 10px;
    padding: 0;
    padding-bottom: 0.5rem;
    align-items:center;
}
body.dark-mode .list-view-group-item {
    box-shadow: 0 1px 2px rgb(0 0 0 / 7%), 0 2px 4px rgb(0 0 0 / 7%), 0 4px 8px rgb(0 0 0 / 7%), 0 8px 16px rgb(0 0 0 / 7%), 0 16px 32px rgb(0 0 0 / 7%), 0 32px 64px rgb(0 0 0 / 7%);
}

.list-view-group.needs-approval .list-view-group-item {
/*    border-color: rgba(255, 171, 21, .7);*/
}

.expanded .list-view-group-item {
    order: 2;
}

/*.resize .list-view-group-item {
    cursor: ew-resize;
}*/

.button-list {
    text-align:right;
}
.list-view-header-search-details {
    color: #0069D9;
    padding: 0.5rem;
    position: relative;
    top: 2px;
    margin: 0 0.2rem;
}
body.dark-mode .list-view-header-search-details {
    color: #0d6efd;
}
.list-view-header-search-details i {
    font-weight: normal;
    font-size: 1.4rem;
}
.list-view-group.is-missing .list-view-group-item-image {
    opacity:.2;
}

.list-view-details {
    display: flex;
    flex: 1;
    /*background-color: white;*/
    flex-wrap: wrap;
    /*overflow:auto;*/
    align-content: flex-start;
    /*height:100%*/
    /*padding-left: 1px;
    padding-top: 1px;*/
    /*justify-content: space-around;*/
    position: absolute;
    width: 100%;
    height: 100%;
}
.app-view .app-form-table {
    position: relative;
    width: 100%;
    height: 100%;
}
.app-view .table-container.absolute {
    overflow: auto;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

.list-view-group-item-image {
    width: 260px;
    height: 260px;
    text-align: center;
    /* padding-top: 10px;
    padding-bottom: 10px;*/
    /*overflow: hidden;*/
    position: relative;
    display: flex;
    justify-content: center;
    /* padding-top: 5px;
    padding-bottom: 10px;*/
    overflow: hidden;
    background-color: black;
    margin-bottom: 10px;
   /* padding-bottom: 10px;*/
}
.default-artwork .list-view-group-item-image {
    background: linear-gradient(to bottom, #0d6efd 0%,#7db9e8 100%);
    /*background: white;*/
    border-bottom: solid 1px lightgray;
    background: transparent;
    border-bottom: solid 1px rgba(100,100,100,.3);
}
.default-artwork-gradient .list-view-group-item-image {
    background: linear-gradient(to bottom, #0d6efd 0%,#7db9e8 100%);
    /*background: white;*/
}
.groups .list-view-group-item-image > div > .preview {
    display:none !important;
}
.list-view-group-item-image-background {
    position: absolute;
    top: 0;
    left: 0;
    /* z-index: 0; */
    right: 0;
    bottom: 0;
    -webkit-filter: blur(15px);
    filter: blur(30px);
    transform: scale(1.1);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0% 0%;
    opacity: .7;
    /* NOTE: this was turned off in the player for safari because it seemed to be giving hell on perforamnce and hardly ever visible */
    display: none;
}
.default-artwork .list-view-group-item-image-background {
    display:none;
}
.channels .list-view-group-item-image-background,
.playlists .list-view-group-item-image-background {
    display: none;
}
.channels .list-view-group-item-image,
.playlists .list-view-group-item-image {
    background-color: transparent;
    border-bottom: solid 1px rgba(100,100,100,.3);
}
.channels .list-view-group-item-image img,
.playlists .list-view-group-item-image img {
    box-shadow:none !important;    
}
.expander .list-view-group-item-image {
    width: 360px;
    height: 360px;
}

.artwork-size-0 .list-view-group-item-image {
    display: none;
}

.artwork-size-1 .list-view-group-item-image
{
    width: 20px;
    height: 20px;
}

.artwork-size-2 .list-view-group-item-image
{
    width: 38px;
    height: 38px;
}

.artwork-size-3 .list-view-group-item-image
{
    width: 56px;
    height: 56px;
}

.artwork-size-4 .list-view-group-item-image
{
    width: 74px;
    height: 74px;
}

.artwork-size-5 .list-view-group-item-image
{
    width: 92px;
    height: 92px;
}

.artwork-size-6 .list-view-group-item-image
{
    width: 110px;
    height: 110px;
}

.artwork-size-7 .list-view-group-item-image
{
    width: 128px;
    height: 128px;
}

.artwork-size-8 .list-view-group-item-image
{
    width: 146px;
    height: 146px;
}

.artwork-size-9 .list-view-group-item-image
{
    width: 164px;
    height: 164px;
}

.artwork-size-10 .list-view-group-item-image
{
    width: 180px;
    height: 180px;
}


.list-view-group-item-image-area
{
}

.list-view-group-item-image > div > div
{
    position: relative;
}
.list-view-group-item-image2 {
    display: flex;
    align-items: center;
    justify-content: center;
    /*height: -webkit-fill-available;*/
    z-index: 1;
}
.list-view-group-item-image2 .svg svg {
    width: 100%;
    max-height: 125px;
}

.list-view-group-item-image img {
    max-width: 260px;
    max-height: 260px;
    /*border: solid 1px #D3D3D3;*/
    /*backface-visibility: hidden;*/
    vertical-align: middle;
    border-color: transparent;
    box-shadow: 0px 3px 6px 2px rgba(163,157,163,0.31);
    box-shadow: 0 1px 2px rgb(0 0 0 / 7%), 0 2px 4px rgb(0 0 0 / 7%), 0 4px 8px rgb(0 0 0 / 7%), 0 8px 16px rgb(0 0 0 / 7%), 0 16px 32px rgb(0 0 0 / 7%), 0 32px 64px rgb(0 0 0 / 7%);
}
.list-view-group-item-image img.hide {
    display:none;
}
body.dark-mode .list-view-group-item-image img {
    box-shadow: none;
    box-shadow: 0 1px 2px rgb(0 0 0 / 7%), 0 2px 4px rgb(0 0 0 / 7%), 0 4px 8px rgb(0 0 0 / 7%), 0 8px 16px rgb(0 0 0 / 7%), 0 16px 32px rgb(0 0 0 / 7%), 0 32px 64px rgb(0 0 0 / 7%);
}
.default-artwork .list-view-group-item-image img {
    box-shadow: none !important;
    position: relative;
    top: 0.5rem;
    padding: 0.5rem;
}
.expander .list-view-group-item-image img {
    max-width: 360px;
    max-height: 360px;
}

.artwork-size-0 .list-view-group-item-image, .artwork-size-0 .list-view-group-item-image img
{
    display: none;
}

.artwork-size-1 .list-view-group-item-image, .artwork-size-1 .list-view-group-item-image img
{
    max-width: 20px;
    max-height: 20px;
}

.artwork-size-2 .list-view-group-item-image, .artwork-size-2 .list-view-group-item-image img
{
    max-width: 38px;
    max-height: 38px;
}

.artwork-size-3 .list-view-group-item-image, .artwork-size-3 .list-view-group-item-image img
{
    max-width: 56px;
    max-height: 56px;
}

.artwork-size-4 .list-view-group-item-image, .artwork-size-4 .list-view-group-item-image img
{
    max-width: 74px;
    max-height: 74px;
}

.artwork-size-5 .list-view-group-item-image, .artwork-size-5 .list-view-group-item-image img
{
    max-width: 92px;
    max-height: 92px;
}

.artwork-size-6 .list-view-group-item-image, .artwork-size-6 .list-view-group-item-image img
{
    max-width: 110px;
    max-height: 110px;
}

.artwork-size-7 .list-view-group-item-image, .artwork-size-7 .list-view-group-item-image img
{
    max-width: 128px;
    max-height: 128px;
}

.artwork-size-8 .list-view-group-item-image, .artwork-size-8 .list-view-group-item-image img
{
    max-width: 146px;
    max-height: 146px;
}

.artwork-size-9 .list-view-group-item-image, .artwork-size-9 .list-view-group-item-image img
{
    max-width: 164px;
    max-height: 164px;
}

.artwork-size-10 .list-view-group-item-image, .artwork-size-10 .list-view-group-item-image img
{
    max-width: 180px;
    max-height: 180px;
}


.list-view-group .artwork-list
{
    position: relative;
    z-index: 5;
    margin-right: .7rem;
    left:-2px;
    top:-2px;
}

.list-view-group .artwork-list img
{
    /*box-shadow: 0px 3px 6px 2px rgba(163,157,163,0.31);*/
    border: solid 1px #D3D3D3;
    max-width: 160px;
    max-height: 160px;
    box-shadow:none;
}

    .list-view-group .artwork-list.single-image img
    {
        box-shadow: 0px 3px 6px 2px rgba(163,157,163,0.31);
    }

.list-view-group .artwork-list img.before
{
    left: 3px;
    top: 3px;
    z-index: -1;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #eee;
    box-shadow:none;
}

    .list-view-group .artwork-list.double-image img.before
    {
        box-shadow: 0 5px 8px 0 rgba(0,0,0,0.1),0 3px 10px 0 rgba(0,0,0,0.1) !important;
    }

    .list-view-group .artwork-list.single-image img.before
    {
        display: none;
    }

.list-view-group .artwork-list img.after
{
    left: 6px;
    top: 6px;
    z-index: -2;
    box-shadow: 0 5px 8px 0 rgba(0,0,0,0.1),0 3px 10px 0 rgba(0,0,0,0.1) !important;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #eee;
}

.list-view-group .artwork-list.double-image img.after
{
    display: none;
}

    .list-view-group .artwork-list.single-image img.after {
        display: none;
    }

.artwork-size-1 .artwork-list img {
    max-width: 6px;
    max-height: 6px;
}

.artwork-size-2 .artwork-list img {
    max-width: 18px;
    max-height: 18px;
}

.artwork-size-3 .artwork-list img {
    max-width: 36px;
    max-height: 36px;
}

.artwork-size-4 .artwork-list img {
    max-width: 54px;
    max-height: 54px;
}

.artwork-size-5 .artwork-list img {
    max-width: 72px;
    max-height: 72px;
}

.artwork-size-6 .artwork-list img {
    max-width: 90px;
    max-height: 90px;
}

.artwork-size-7 .artwork-list img {
    max-width: 108px;
    max-height: 108px;
}

.artwork-size-8 .artwork-list img {
    max-width: 126px;
    max-height: 126px;
}

.artwork-size-9 .artwork-list img {
    max-width: 144px;
    max-height: 144px;
}

.artwork-size-10 .artwork-list img {
    max-width: 160px;
    max-height: 160px;
}

.app-form-labels {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    text-shadow: -1px 1px 2px rgb(0 0 0);
    text-shadow: 0px 1px 1px rgb(0 0 0)
}

.expanded .list-view-group-item-image
,[class*="artwork-size-"] .expanded .list-view-group-item-image {
    max-width: 256px;
    max-height: 256px;
    display:block;
    width: 256px;
    height: 256px;
    padding-bottom: 0px;
    padding-top: 8px;
}

.expanded .list-view-group-item-image img 
,[class*="artwork-size-"] .expanded .list-view-group-item-image img {
    max-width: 256px;
    max-height: 256px;
    display:inline;
    max-width: 256px;
    max-height: 256px;
    backface-visibility: hidden;
}

.list-view-group-item-fileName {
    white-space: nowrap;
    font-size: .8rem;
    padding-top: 0px;
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 260px;
    padding: 2px 0px;
    white-space: normal;
    line-height: 1rem;
    display: none;
}
.show-fileName .device-file .list-view-group-item-fileName {
    display: block;
}
.sortBy-fileName .device-file .list-view-group-item-fileName {
    display: block;
}

.list-view-container.channels .list-view-groups:not(.force-wrap) .list-view-group {
    padding: 0px !important;
    /*border-right: solid 1px lightgray !important;*/
    border: none !important;
}
.list-view-container.channels .list-view-groups:not(.force-wrap) .list-view-group-item {
    margin: 5px;
    /* border-right-color: lightgray;*/
}
.list-view-group-time {
    height: 20px;
    background-color: whitesmoke;
    width: 100%;
    text-align: left;
    margin: 0px;
    font-size: .7rem;
    display: flex;
    align-items: center;
    color: gray;
    /* background-color: #0d6efd; */
    width: 100%;
    text-align: center;
    margin: 0px;
    font-size: .8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    border-bottom: 1px solid #94ADCB;
    background-color: #94ADCB !important;
    background-color: #0069D9 !important;
    position: relative;
}
.list-view-group-time span {
    padding:2px 5px;
}

.list-view-group-item-time {
    white-space: nowrap;
    font-size: .7rem;
    padding-top: 0px;
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 260px;
    padding: 2px 0px;
    white-space: normal;
    line-height: 1rem;
    order: 99;
    color: gray;
    color: #FFAB15;
    font-size: .9rem;
    padding-top: 7px;
}
.channels .list-view-group-item-time {
    display: block;
}
.show-startTime .list-view-group-item-time {
    display: block;
    order: 0;
    color: #FFAB15;
    font-family: 'Nunito Medium', sans-serif;
    opacity: 1;
    text-transform: uppercase;
    font-size:.8rem;
}

.list-view-group-item-on-now {
    display: none;
    color: #FFAB15;
    /*    font-weight: bold;*/
    font-family: 'Nunito Medium', sans-serif;
    opacity: 1;
    text-transform: uppercase;
}
.list-view-group-item-on-now-spacer {
    display: none;
    margin-left: 5px;
    margin-right: 9px;
}
.list-view-group.on-now .list-view-group-item-on-now-spacer{
    display:block;
}
.list-view-group.on-now .list-view-group-item-on-now {
    display:block;
}
/*.list-view-group.on-now .list-view-group-time > span {
    display:none;
}*/
.list-view-group-item-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-group.on-now .list-view-group-item-position {
    display: block;
}
.list-view-group-item-sortOrder {
    white-space: nowrap;
    font-size: .8rem;
    padding-top: 0px;
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 260px;
    padding: 2px 0px;
    white-space: normal;
    line-height: 1rem;
    display: none;
    order: 99;
    color: black;
}
/*body.dark-mode .list-view-group-item-sortOrder {
    color:whitesmoke;
}
*/
.playlists .list-view-group-item-sortOrder {
    display: block;
}

.show-sortOrder .list-view-group-item-sortOrder {
    /*font-size: .8rem;*/
    color: unset;
    order: unset;
    display: block;
    color: #FFAB15;
    font-family: 'Nunito Medium', sans-serif;
    opacity: 1;
    text-transform: uppercase;
}
.sortBy-sortOrder .list-view-group-item-sortOrder {
    /*font-size: .8rem;*/
    color: unset;
    order: unset;
}

.list-view-group-item-data1 {
    white-space: nowrap;
    font-size: 1.2rem;
    padding-top: 0px;
    /*text-align: left;*/
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 260px;
    padding: 3px 10px;
    white-space: normal;
}
.show-fileName .device-file .list-view-group-item-data1 {
    white-space: nowrap;
    font-size: 1.2rem;
    padding-top: 3px;
    /*text-align: left;*/
    text-overflow: ellipsis;
    max-width: 260px;
    overflow: hidden;
    color: black;
    padding: 2px 0px;
    line-height: initial;
}
.sortBy-fileName .device-file .list-view-group-item-data1 {
    white-space: nowrap;
    font-size: 1.2rem;
    padding-top: 3px;
    /*text-align: left;*/
    text-overflow: ellipsis;
    max-width: 260px;
    overflow: hidden;
    color: black;
    padding: 2px 0px;
    line-height: initial;
}

body.dark-mode .list-view-group-item-data1 {
    color: whitesmoke;
}

/*.clients .list-view-group-item-data1 {
}*/

/*.list-view-group.select .list-view-group-item-data1 {
    white-space: normal !important; 
}*/

.list-view-group-item-data2 {
    white-space: nowrap;
    font-size: .9rem;
   /* text-align: left;*/
    text-overflow: ellipsis;
    max-width: 260px;
    overflow: hidden;
    color: black;
    padding: 2px 10px;
}
body.dark-mode .list-view-group-item-data2 {
    color:whitesmoke;
}

.list-view-group-item-data3 {
    white-space: nowrap;
    font-size: .9rem;
    padding-top: 0px;
    /*text-align: left;*/
    text-overflow: ellipsis;
    max-width: 260px;
    overflow: hidden;
    color: black;
    padding: 2px 10px;
}
body.dark-mode .list-view-group-item-data3 {
    color: whitesmoke;
}

.list-view-group-item-data4 {
    white-space: nowrap;
    font-size: .9rem;
    padding-top: 0px;
   /* text-align: left;*/
    text-overflow: ellipsis;
    max-width: 260px;
    overflow: hidden;
    color: black;
    padding: 2px 10px;
}
body.dark-mode .list-view-group-item-data4 {
    color: whitesmoke;
}

.list-view-group-item-data5 {
    white-space: nowrap;
    font-size: .9rem;
    padding-top: 0px;
  /*  text-align: left;*/
    text-overflow: ellipsis;
    max-width: 260px;
    overflow: hidden;
    color: black;
    padding: 2px 10px;
}
body.dark-mode .list-view-group-item-data5 {
    color: whitesmoke;
}

.group-lists .list-view-group-item-data1 {
    display: none;
}

.group-lists .list-view-group-item-data2 {
    display: none;
}

.group-lists .list-view-group-item-data3
{
    display: none;
}

.list-view-group-item-process {
    display: none;
    white-space: nowrap;
    font-size: .8rem;
    text-align: center;
    text-overflow: ellipsis;
    width: 75%;
    overflow: hidden;
    color: gray;
    padding: 0;
    height: 3px;
    margin: 0 0rem;
    position: absolute;
    bottom: 3px;
    border-radius: 5px;
}
.list-view-group.processing .list-view-group-item-process {
    display: flex;
    flex-direction: column;
}
.list-view-group-item-process-bkgd {
    height: 4px;
    /* border-color: rgba(5, 114, 206, 0.1); */
    width: 100%;
    /* overflow: hidden; */
    /* border-radius: 6px; */
    flex: 1;
    /* border: solid 1px #1A86CF; */
    display: flex;
    background-color: rgba(100,100,100,.3);
    border-radius: 5px;
}
.list-view-group-item-process-bkgd-complete {
    background-color: rgba(5, 114, 206, 0.5);
    background-color: #0d6efd;
    /* background-color: #1A86CF; */
    height: 6px;
    /* opacity: .4; */
    transition: .3s;
    border: solid 1px rgba(100,100,100,.3);
    position: relative;
    top: -1px;
    left: -2px;
    border-radius: 5px;
}
.list-view-group-item-process-bkgd-incomplete {
    height: -webkit-fill-available;
}
.list-view-group-item-process-bkgd-value {
    display: none;
}

.list-view-group-list {
    display: none;
    flex: 1;
}

.expander .list-view-group-list {
    display: flex;
    flex: 1;
    background-color: black;
}

.group-lists .list-view-group-list {
    display: block;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
}

.device .list-view-group-item-image img {
    box-shadow:none;
}

.device-folder .list-view-group-item-image img {
    box-shadow: none;
}



.list-view-group-list-header {
    display: flex;
    padding-left: 3px;
    padding-bottom: 3px;
    padding-top: 2px;
    border-bottom: solid 1px lightgray;
    margin-bottom: 5px;
}

.list-view-group-list-header-playback-indicator {
    width: 10px;
    padding-left: 3px;
}

.playing .list-view-group-list-header-playback-indicator {
    background: url('/site/images/playbackIndicator.png');
    background-repeat: no-repeat;
    background-position-x: 3px;
    background-position-y: 3px;
}

.list-view-group-list-header-data1 {
}

.list-view-group-list-header-data2 {
    font-size: .85em;
    align-self: center;
    color: #484848;
    padding-top: 1px;
}

.list-view-group-list-header-data-seperator {
    display: none;
    background-color: #484848;
    border: solid 1px #484848;
    border-radius: 100px;
    height: 2px;
    width: 2px;
    opacity: .7;
    align-self: center;
    margin-left: 6px;
    margin-right: 5px;
}

    .list-view-group-list-header-data-seperator.show {
        display: block;
    }

.list-view-group-list-header-options {
}

.list-view-group-list-header-love {
}

.list-view-group-list-header-duration {
    flex: 1;
    text-align: right;
    font-size: .8em;
    align-self: center;
    padding-top: 1px;
    padding-right: 10px;
}

.list-view-group-list-items {
    display: none;
    flex-direction: column;
}

    .list-view-group-list-items.show {
        display: flex;
    }

    .list-view-group-list-items.hide {
        display: none;
    }

.list-view-group-list-item {
    display: flex;
}

    .list-view-group-list-item:active {
        background-color: rgba(154, 181, 213, .2);
        /*font-weight: bold;*/
    }

    .list-view-group-list-item.select {
        background-color: rgba(154, 181, 213, .2);
        /*font-weight: bold;*/
        /*border-left: 1px solid #94ADCB;
    border-right: 1px solid #94ADCB;*/
    }

        .list-view-group-list-item.select:first-of-type {
            /*border-top: 1px solid #94ADCB;*/
        }

        .list-view-group-list-item.select:last-of-type {
            /*border-bottom: 1px solid #94ADCB;*/
        }

.list-view-group-list-item-container {
    display: flex;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: .8em;
    cursor: default;
    flex: 1;
}

.single .list-view-group-list-item-container {
    display: none;
}

.list-view-group-list-item-playback-indicator {
    width: 10px;
    padding-left: 3px;
}

.playing .list-view-group-list-item-playback-indicator {
    background: url('/site/images/playbackIndicator.png');
    background-repeat: no-repeat;
    background-position-x: 3px;
    background-position-y: 3px;
}

.list-view-group-list-item-trackNumber {
    padding-right: 10px;
    text-align: right;
    width: 15px;
}

.single .list-view-group-list-item-trackNumber {
    display: none;
}

.list-view-group-list-item-name {
    flex: 1;
}

.list-view-group-list-item-duration {
    padding-right: 10px;
    text-align: right;
}

.loading-items .list-view-loading-items {
    display: flex;
}

.loading-items-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index:1;
}

.list-view-loading-items {
    display: none;
    flex: 1;
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    padding: 0px;
    z-index: 3;
    /*pointer-events:none;*/
}

.loading-items-background {
    /*background-color: whitesmoke;*/ /*#d1e3f7;*/
    background-color: rgba(0, 0, 0, .3);
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
}

.list-view-body.v-scroll .loading-items {
    right: 19px;
}

.list-view-body.h-scroll .loading-items {
    bottom: 43px;
}

.view.list .loading-items-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

    .view.list .loading-items-container .loading-image {
        display: none;
        margin-right: 6px;
    }

.view.list loading-items-container .loading-image img {
    max-width: 250px;
}


.view.list .loading-items-container .cancel {
    display: none;
    background-color: transparent;
    border: none;
    height: 18px;
}

    .view.list .loading-items-container .cancel .circle-x {
        height: 17px;
        width: 17px;
    }

        .view.list .loading-items-container .cancel .circle-x .circle {
            fill: #9e9e9e;
        }

        .view.list .loading-items-container .cancel .circle-x .x {
            stroke: #fff;
        }

    .view.list .loading-items-container .cancel:hover .circle-x .circle {
        fill: red;
    }

    .view.list .loading-items-container .cancel:hover .circle-x .x {
        stroke: #fff;
    }

    .view.list .loading-items-container .cancel:active,
    .view.list .loading-items-container .cancel:focus {
        outline: none;
    }

.view.list .loading-items-container .cancel {
    background-color: #616161;
    border: none;
    border-radius: 50%;
    opacity: .5;
    text-transform: lowercase;
    color: #fff;
}

    .view.list .loading-items-container .cancel:hover {
        opacity: 1;
    }

    .view.list .loading-items-container .cancel:focus {
        outline: none;
        opacity: 1;
    }

.current-item {
    padding-top: 5px;
    font-size: .85em;
    display: none;
}

.list-view-no-items {
    display: none;
    flex: 1;
    overflow: auto;
}

.no-items .list-view-no-items {
    display: flex;
    justify-content: center;
}

.not-ready .list-view-no-items {
    display: flex;
    justify-content: center;
}

.loading-items .list-view-no-items {
    display: none !important;
}

.list-view-no-items-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

.list-view-no-items-image {
    position: relative;
    top: -20px;
}

    .list-view-no-items-image img {
        max-width: 250px;
        /*box-shadow: 0px 3px 6px 2px rgba(163, 157, 163, 0.5);*/
    }

        .list-view-no-items-image img.hide {
            display: none;
        }

    .list-view-no-items-image .svg-container svg {
        width: 250px;
        max-width: 250px;
        min-width: 250px;
    }

.list-view-no-items-label {
    font-size: 1.6rem;
   /* color: gray;*/
    /* font-weight: bold; */
    /*position: relative;
    top: -10px;*/
}

    .list-view-no-items-label a {
        text-decoration: underline;
        color: blue;
        cursor: pointer;
    }

.list-view-no-items-options {
    display: none;
    position: relative;
    right: -100px;
    top: 12px;
    color: goldenrod;
    z-index: 5;
    font-size: 2.6rem;
}

.list-view-no-items.is-missing .list-view-no-items-options {
    display: block;
}

.list-view-items {
    display: none;
    flex: 1;
}

.list-view-hilite {
    position: absolute;
    z-index: 1;
    background-color: rgba(154, 181, 213, .5);
    border: 1px solid #94ADCB;
}

.item-details .list-view-items {
    display: flex;
    flex: 1;
    position: relative;
}

#playerControls.audio .player-data-info {
    display: none;
}

.no-items .list-view-items {
    display: none;
}

/*.loading-items .list-view-items {
    display:none;
}*/

.list-view-columns {
    display: none;
}

.item-details .list-view-details {
    overflow: auto;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.item-details .list-view-columns {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 2;
}

.no-items .list-view-details {
    display: none !important;
}

.no-items .list-view-columns {
    display: none;
}

/*.loading-items .list-view-columns {
    display:none;
}*/

.list-view-column {
}

    .list-view-column.last {
        flex: 1;
    }

    .list-view-column.hidden {
        display: none;
    }

.list-view-column-menu {
    overflow: auto;
}

.list-view-column-item {
    border-right: solid 1px lightgray;
    border-bottom: solid 1px lightgray;
    padding: 3px;
    padding-left: 5px;
    padding-right: 5px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
    white-space: nowrap;
    display: flex;
}

    .list-view-column-item.sortable:hover {
        background: linear-gradient(to bottom, rgba(237, 237, 237, 1) 100%, rgba(246, 246, 246, 1) 47%, rgba(255, 255, 255, 1) 0%);
    }

    .list-view-column-item.sortable:active {
        background: linear-gradient(to bottom, rgba(254, 254, 254, 1) 0%, rgba(209, 209, 209, 1) 49%, rgba(226, 226, 226, 1) 100%);
    }

/*.list-view-column.resize
    {
        cursor: ew-resize !important;
    }*/

.first .list-view-column-item {
    padding-right: 0;
}

.last .list-view-column-item {
    border-right: none;
}

.list-view-column-item-sort {
    padding-left: 7px;
    padding-right: 3px;
    position: relative;
    top: 3px;
    font-size: .6rem !important;
    display: none !important;
}

.list-view-column.sort-up .list-view-column-item-sort {
    display: inline-block !important;
    top: 5px;
}

.list-view-column.sort-down .list-view-column-item-sort {
    display: inline-block !important;
    top: 1px;
}

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

.list-view-no-items-link {
    text-decoration: underline;
    color: blue;
}

.list-view-item {
    padding: 2px;
    /*max-height:22px;
    height:22px;*/
    overflow: hidden;
    border-bottom: solid 1px lightgray;
}

    .list-view-item.select {
        /*background-color: #e0eff9;*/
        color: #fff;
        background-color: #0069D9;
    }

.list-view-item-last {
    flex: 1;
}

.list-view-column-item-name {
    padding: 1px;
    padding-top: 3px;
    font-size: .7em;
    flex: 1;
}

.list-view-item-name {
    font-size: .7em;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    /*padding-top: 2px;*/
    display: flex;
    align-items: center;
    position: relative;
}

    .list-view-item-name.artwork {
        justify-content: center;
    }

    .list-view-item-name img {
        max-width: 60px;
        /*margin: 1rem;
    margin-top: .5rem;*/
        box-shadow: 0 5px 8px 0 rgba(0,0,0,0.1),0 3px 10px 0 rgba(0,0,0,0.1) !important;
        border-style: none;
        backface-visibility: hidden;
        vertical-align: middle;
        border: solid 1px lightgray;
    }

    .list-view-item-name img {
        box-shadow: none !important;
        border-color: transparent !important;
    }

    .list-view-item-name span {
        padding: 3px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

.list-view-item.right .list-view-item-name {
    flex-direction: row-reverse;
}

.show-wizard i {
    font-size: 1.4rem;
    padding-bottom: 5px;
}

#views .view.library section.library .subsection .loading-container {
    display: none;
    align-items: center;
    flex: 1;
    cursor: default;
    font-size: .9rem;
    padding: 5px 10px;
    padding-left: 23px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: white;
}

#views .view.library section.library .subsection.media-item-type .loading-container {
    padding-left: 36px;
}

#views .view.library section.library .subsection.playlists .loading-container {
    padding-left: 36px;
}

#views .view.library section.library .subsection .loading-container.show {
    display: flex;
}

.loading-container .loading-image {
    margin-right: .2rem;
}


/* Loading indicator */

.loader, .loading-spinner {
    /*border: 1px solid darkgray;*/
    /* Light grey */
    border-top: 1px solid #0079CB;
    /* Blue */
    border-radius: 100%;
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    max-width: 16px;
    max-height: 16px;
    animation: spin 1s linear infinite;
}
.loading-container.xl .loading-spinner {    
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    max-width: 32px;
    max-height: 32px;
}
.loading-container .loading-label {
    margin-left:.25rem;
}
.loading-container.xl .loading-label {
    font-size: 2rem;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.listViewLoadingTime {
    display: flex;
    font-size: 8px;
    position: relative;
    top: 14px;
    margin-left: 1px;
   /* color: gray;*/
    letter-spacing: 1px;
}

.listViewLoadingProgress {
    display: flex;
    width: 180px;
    position: relative;
    /*left: -15px;*/
    /* top: -1px; */
}

.progress-bar-ex, .listViewLoadingProgressBar
{
    height: -webkit-fill-available;
    width: 100%;
    border-radius:100px;
}

.progress-bar-ex-incomplete, .listViewLoadingProgressBarIncomplete
{
    height: -webkit-fill-available;
}

.progress-bar-ex-complete, .listViewLoadingProgressBarComplete {
    background-color: #0d6efd;
    /*background-color: #1A86CF;*/
    height: -webkit-fill-available;
    width: 0%;
    /*opacity: .4;*/
    transition: .3s;
}

.progress-bar-ex .value
,.listViewLoadingProgressBarValue {
    display: none;
}

.view.list .loading-items-container .progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* margin-right: 10px; */
    /* width: 300px; */
    /* min-width: 30%; */
    flex: 1;
    width: 100%;
}

.progress-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.progress-bar-ex-container {
    height: 4px;
    width: 100%;
    border: solid 1px rgba(100,100,100,.3);
    border-radius: 5px;
}

.progress-bar-ex-container .progress-bar-ex {
    height: 4px !important;
    background-color: rgba(100,100,100,.3);
    border-radius: 5px;
}
.progress-bar-ex-container .progress-bar-ex-complete {
    background-color: #0d6efd !important;
}
.progress-bar-ex-container .progress .description {
    padding-top: 1px;
    font-size: .9rem;
    width: 30%;
    padding: 3px;
    opacity: 1;
}
.loading-items-container .progress-label {
    min-width: 250px;
}

.list-view-loading-footer {
}


.list-view-loading-footer-button 
{
    font-size: .7em;
    position: relative;
    left: 10px;
    top: 0px;
}


/* -- Known Skin Icons styling -- */

.check .shape-fill {
    fill: #000;
}

.group-lists .shape-fill.light {
    fill: #D4D4D4;
}

.group-lists .shape-fill.dark {
    fill: #676767;
}

.groups .shape-fill.light {
    fill: #D4D4D4;
}

.groups .shape-fill.dark {
    fill: #676767;
}

.groups .shape-fill.line.dark {
    fill: none;
    stroke: #676767;
}

.single-music-note .shape-fill {
    fill: #676767;
}

.film-strip .shape-fill.background {
    fill: #676767;
}

.film-strip .shape-fill.dot,
.film-strip .shape-fill.frame {
    fill: #E1E1E1;
}

.music-note .shape-fill {
    fill: #676767;
}

.playlist-folder .bottom {
    fill: #D1D1D1;
}

.playlist-folder .top {
    fill: #EFEFEF;
}

.playlist-folder .shape-outline {
    fill: #676767;
}

.svg-icon.playlist .shape-fill {
    fill: #676767;
}

.tv .screen {
    fill: #E1E1E1;
}

.tv .border,
.tv .stand {
    fill: #676767;
}

.smart-playlist .shape-fill {
    fill: #676767;
}

.clock .shape-fill {
    fill: none;
    stroke: #616161;
}

.custom-library .shape-fill.light {
    fill: #D4D4D4;
}

.custom-library .shape-fill.dark {
    fill: #676767;
}

.custom-library .shape-fill.line.dark {
    fill: none;
    stroke: #676767;
}

.user .shape-fill {
    fill: #676767;
}

/*.library .subsection .item.select .music-note .shape-fill,
.library .subsection .item.select>button .playlist .shape-fill,
.library .subsection .item.select>button .smart-playlist .shape-fill {
    fill: #fff;
}
*/
.library .subsection .item .film-strip,
.svg-container .film-strip {
    width: 16px;
    height: 17px;
    max-height: initial;
    max-width: initial;
}
/*
.library .subsection .item.select .film-strip .shape-fill.background {
    fill: #fff;
}

.library .subsection .item.select .film-strip .shape-fill.dot,
.library .subsection .item.select .film-strip .shape-fill.frame {
    fill: #0069D9;
}*/

.library .subsection .item .tv,
.svg-container .tv {
    width: 18px;
    height: 13px;
    max-height: initial;
    max-width: initial;
}

/*.library .subsection .item.select .tv .screen {
    fill: #519FFC;
}

.library .subsection .item.select .tv .border,
.library .subsection .item.select .tv .stand {
    fill: #fff;
}

.library .subsection .item.select .playlist-folder .bottom {
    fill: none;
}

.library .subsection .item.select .playlist-folder .top {
    fill: none;
}

.library .subsection .item.select .playlist-folder .shape-outline {
    fill: #fff;
}

.library .subsection .item.select .custom-library .dark {
    fill: #fff;
}

.library .subsection .item.select .custom-library .line {
    stroke: #fff;
}

.library .subsection .item.select .custom-library .light {
    fill: #519FFC;
}

.library .subsection .item.select .clock .shape-fill {
    stroke: #fff;
    fill: #519FFC;
}
*/

/* -- End known Skin Icons styling -- */

.list-view-group-list-item-year-container {
    display: flex;
}

.list-view-group-list-item-year {}

.list-view-group-list-item-duration {}

.list-view-group-list-item-rating-container {
    display: flex;
}

.list-view-group-list-item-rating {}

.list-view-group-list-item-rating-count {}

.list-view-group-list-item-cast {
    display: flex;
}

.list-view-group-list-item-cast-label {}

.list-view-group-list-item-cast-info {}

.list-view-group-list-item-director {
    display: flex;
}

.list-view-group-list-item-director-label {}

.list-view-group-list-item-director-info {}

.list-view-group-list-item-writer {
    display: flex;
}

.list-view-group-list-item-writer-label {}

.list-view-group-list-item-writer-info {}

.list-view-group-list-item-composer {
    display: flex;
}

.list-view-group-list-item-composer-label {}

.list-view-group-list-item-composer-info {}

/* scroll list styles */

.scroll-list .scroll-item > div
{
    display:none;
} 

/* groups */
.groups .scroll-list .scroll-item.visible > .list-view-group-item
{
    display:flex;
} 

/* group-lists */
.group-lists .scroll-list .scroll-item.visible > div
{
    display:flex;
}

.list-view-header-search-options button.list-view-header-search-details {
    font-size: 1.4rem;
    /* color: #0069D9;*/
    color: white;
    margin: .5rem;
    /*opacity: 1 !important;*/
    top: 12px;
}
/*#views .view.library section.library .subsection .items .item.no-items > button .icon-container {
    margin-left:2px;
}*/
#views .view.library section.library .subsection .items .item.no-items .expand {
    display:none;
}
#views .view.library section.library .subsection .items .item .expander {
    min-width: 8px !important;
    max-width: 8px !important;
    display: none;
}
#views .view.library section.library .subsection .items .item.no-items .expander {
    display: block;
}
#views .view.library section.library .subsection .items .item.no-items .expand {
    /*min-width: 6px !important;
    max-width: 6px !important;*/
}
#views .view.library section.library .subsection .items .item.no-items .expand > i {
    display:none;
}

.list-view-container.clients .list-view-footer
{
    display:none;
}

#miniplayer-window 
{
    display:none;
}

.list-view-group-item-name {
    position: absolute;
    /* transform: translate(50%, 50%); */
    /* left: 0; */
    /* top: 0; */
    /* right: 0; */
    /* bottom: 0; */
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 2rem;
    max-width: 260px;
    height: 100%;
    overflow: hidden;
    white-space: normal;
}
.list-view-group-item-options {
    display: none;
    align-items: center;
    flex: 1;
    width: 100%;
    justify-content: space-around;
    height: 36px;
    min-height: 36px;
    padding-bottom: 0.5rem;
    padding-top: 0.2rem;
}
.list-view-group.upload-file .list-view-group-item-options {
    display: flex;
}
.list-view-group.device-file .list-view-group-item-options {
    display: flex;
}
.list-view-group.device-folder .list-view-group-item-options {
    display: flex;
}
.list-view-group.device .list-view-group-item-options {
    display: flex;
}
.list-view-group-item-options-right {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 150%;
}
.list-view-group-item-options-right > button {
    margin-left: .4rem;
    margin-right: .4rem;
}
.list-view-group-item-options-left {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:150%;
}
.list-view-group-item-options-left > button {
    margin-left: .4rem;
    margin-right: .4rem;
}
    /*.list-view-group.Url .list-view-group-item-options {
    display:none;
}*/
.list-view-group-item-options .is-missing {
    color: goldenrod;
    font-size: .9rem;
    margin-left: 0.3rem;
    margin-right: 0.3rem;
}
.list-view-group-item-options .in-cloud {
    color:#0D7AFF;
    /*display:none;*/
}
.list-view-group-item-options .in-cloud i {  
    font-size: 18px;
    position: relative;
    top: 2px;
    margin-right: 2px;
}
.list-view-group-item-options .processing {
    color: lightgray;
    font-size: 75%;
    margin-left: 0.3rem;
    margin-right: 0.3rem;
}
.list-view-group.in-cloud .list-view-group-item-options .in-cloud {
    display: none;
}
.list-view-group-item-options .in-cloud.ok {
    color:green;
}
.list-view-group-item-options .in-cloud.error {
    color:red;
}
.list-view-group-item-options .has-highdef {
    color: white;
    margin-left: .3rem;
    margin-right: .3rem;
}
.list-view-group-item-options .has-highdef i {
    font-size: 22px;
    position: relative;
    top: 3px;
}
.list-view-group-item-options .has-standarddef {
    color: white;
    margin-left: .3rem;
    margin-right: .3rem;
}
.list-view-group-item-options .has-standarddef i {
    font-size: 22px;
    position: relative;
    top: 3px;
}
.list-view-group-item-options .has-subtitles {
    color: white;
    margin-left: .1rem !important;
    margin-right: .1rem !important;
}
.list-view-group-item-options .has-subtitles i {
    font-size: 25px;
    position: relative;
    top: 2px;
}
.list-view-group-item-options .encrypted {
    color: goldenrod;
    color: #FFAB15;
    margin-left: .3rem;
    margin-right: .3rem;
}
.list-view-group-item-options .encrypted i {
    position: relative;
    top: 2px;
    font-size: 19px;
}
.list-view-group-item-options .has-preview {
    margin-left: .3rem;
    margin-right: .3rem;
    color: red;
}
.list-view-group-item-options-left .loader-container {
    padding-top: 4px;
    padding-left: 3px;
}
.list-view-group-item-options .needs-approval {
    margin-left: .3rem !important;
    margin-right: .3rem !important;
}
.list-view-group-item-options .needs-approval i {
    position: relative;
    top: 2px;
    font-size: 19px;
    color: #FFAB15 !important;
}

.option-checkboxes {
    display: flex;
    padding-left: 1rem;
    padding-bottom: 1rem;
}
.option-checkbox-column.column1 {
    padding-right: 4rem;
}
.app-form-view-message {
    font-size: 1.6rem;
    justify-content: center;
    display: flex;
    padding: 1rem;
    padding-bottom: 0;
}
.app-form-header .app-form-image-container > button {
    opacity:1 !important;
}
.app-form-header .app-button-fade {
    opacity: 1 !important;
}
.app-tab-view > .container {
    display: flex;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
}
.app-tab-view > .container .media-data {
    padding-bottom: 1rem;
    display: flex;
}
.app-tab-view > .container .file-data {
    padding-bottom: 1rem;
    display: flex;
}
.app-tab-view.summary > .container .column .app-label {
    text-align: right !important;
    min-width: 205px;
}
.app-form-field-description {
    flex-wrap: nowrap;
}
.field-group.error .content .value {
    color: red !important;
}
.field-group.connected .content .value {
    color:green !important;
}
.field-group.not-connected .content .value {
    color: red !important;
}

.app-tab-view.summary > .container .column .app-label {
    color: lightgray !important;
}
.app-tab-view.summary .app-form-field-description .app-span {
    color: white !important;
    max-width: 350px;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.list-view-container.reports .list-view-header input[type=text] {
    width: 100px;
}

.list-view-report {
    display: flex;
    flex-direction: column;
    flex: 1;
   /* margin: 1rem;*/
   height:100%;
}
.list-view-report-header {
    margin-bottom: 1.5rem;
    display: none;
}
.list-view-report-info {
    margin: .2rem;
    display: flex;
    font-size: 90%;
    /* font-weight: bold;*/
    margin-top: 1rem;
    margin-bottom: .5rem;
    font-size: 90%;
}
.list-view-report-date {
    margin-bottom: 0rem;
    display:flex;
}
.list-view-report-date-title {
    margin-right:.5rem;
}
.list-view-report-dates {
    display: flex;
}
.list-view-report-dates-seperator {
    flex:1;
}
.list-view-report-dates-export {
    color: #0d6efd;
    padding-right: 1rem;
}
.list-view-report-dates-title {
    display:none;
}
.list-view-report-dates-from {
    display: flex;
    margin-left: 2rem;
}
.list-view-report-dates-from-title {
    margin-right: .5rem;
}
.list-view-report-dates-to {
    display: flex;
    margin-left: 2rem;
}
.list-view-report-dates-to-title {
    margin-right: .5rem;
}
.list-view-report-dates-count {
    display: flex;
    margin-left: 2rem;
}
.list-view-report-dates-count-title {
    margin-right: .5rem;
}
.list-view-report-body {
    /*padding-right: 1rem;*/
   /* position: absolute;*/
    left: 10px;
    bottom: 10px;
    right: 10px;
    top: 40px;
    height:100%;
}
.list-view-report-body img {
    max-height: 50px;
    max-width: 50px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0px 3px 6px 2px rgb(163 157 163 / 31%);
    box-shadow: 7px 7px 7px 0px rgba(0,0,0,.1);
}
.list-view-report-body img.default-artwork {
    box-shadow:none;
}
.list-view-report-body table {
    width: 100%;
   /* border-bottom: solid 1px lightgray;*/
}
.list-view-report-body tr {
  /*  border-left: solid 1px lightgray;
    border-right: solid 1px lightgray;
    background-color: whitesmoke;*/
    white-space:nowrap;
}
.list-view-report-body tr:nth-child(even) {
    background-color: rgba(100,100,100,.3);
}
.list-view-report-body tr.select {    
    background-color: #0069D9 !important;
    color: white !important;
}
    .list-view-report-body td {
        font-size: 80%;
        padding: .5rem 1rem;
        white-space: nowrap;
    }
    .list-view-report-body td.no-records {
        font-size: 100%;
        
    }
.list-view-report-body span {
    pointer-events:none;
}
.list-view-report-body thead {
    border: solid 1px #444;
    border-bottom: none;
}
.list-view-report-body thead tr {
    background-color: rgba(100,100,100,.3);    
    border: solid 1px rgba(100,100,100,.3);
    border-bottom: none;
}
.list-view-report-body thead td {
    padding: .5rem 1rem;
    /*font-size: 75%;*/
   /* font-weight: bold;*/
    text-transform: uppercase;
}
.list-view-report-body iframe {
    width: 100%;
    height: 100%;
    background-color:whitesmoke;
}
.list-view-container.reports .list-view-header-search-code {
    font-size: 1rem;
    /*position: absolute;*/
    bottom: 0px;
    right: 37px;
}
.list-view-container.reports .list-view-header-search-code i {
    font-size: .95rem;
}
.list-view-container.reports .list-view-header-search-columns {
  /*  position: absolute;*/
    bottom: 0px;
    right: 0px;
}
.list-view-container.reports .list-view-header-search-columns i {
    font-size: 1rem;
}
.list-view-container.reports .list-view-header-search-download {
/*    position: absolute;*/
    bottom: 0px;
    right: 75px;
}
.list-view-container.reports .list-view-header-search-download i {
    font-size: .95rem;
}
.list-view-container.reports .list-view-header-img {
    box-shadow:none !important;
}

.new-version-available {
    display: none;
}

.report-columns-window {
    flex-direction:column;
}
.report-columns-window.message-box .app-header {
    margin-bottom:0px !important;
}
.report-columns-window.show {
    display: flex !important;
}
.report-columns-container {
    flex: 1;
}
.report-columns-content {
    display: flex;
    /* height: 100%; */
    /* padding-left: 15px; */
    /* padding-right: 15px; */
  /*  position: absolute;*/
    right: 15px;
    left: 15px;
    bottom: 45px;
    top: 200px;
}
.report-columns-content-from-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    height: 69vh;
    overflow: auto;
}
.report-columns-content-from-header {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background-color: rgba(100,100,100,.3);
    border: solid 1px rgba(100,100,100,.3);
    border-bottom: none;
}
.report-columns-content-from-header input {
    margin: 5px;
    margin-left: 5px;
    margin-top: 5px;
    cursor: pointer;
}
.report-columns-content-from-header .form-check .form-check-input {
    margin-left: 5px !important;
    margin-top: 5px !important;
}
.report-columns-content-from {
    /*background-color: white;*/
    flex: 1;
    display: flex;
    flex-direction: column;
    border: solid 1px rgba(100,100,100,.7);
    overflow: auto;
}
.report-columns-content-item {
    text-align: left;
    color: white !important;
    border-bottom: solid 1px rgba(100,100,100,.3) !important;
    opacity: .9 !important;
    padding: 5px 5px !important;
    font-size: .9rem;
    display: flex;
    align-items: center;
}
.report-columns-content-item:not(.canEdit):hover {
    background-color:rgba(100,100,100,.5) !important;
}
.report-columns-content-item:not(.canEdit).selected {
    background-color:rgba(100,100,100,.7) !important;
}
.report-columns-content-item input {
    margin-right:5px;
    cursor:pointer;
}
.report-columns-content .app-form-field.app-form-field-checkbox.form-check {
    padding-right: 0.5rem !important;
}
.report-columns-content-actions {
    display: flex;
    flex-direction: column;
    padding: 2px;
    padding-top: 8%;
}
.report-columns-content-actions button {
    margin: 0.5rem 1rem;
    font-size: 2rem;
}
.report-columns-content-to-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    height: 69vh;
}
.report-columns-content-to-header {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background-color: rgba(100,100,100,.3);
    border: solid 1px rgba(100,100,100,.3);
    border-bottom: none;
}
.report-columns-content-to-header input {
    margin: 5px;
    margin-left: 5px;
    margin-top: 5px;
    cursor: pointer;
}
.report-columns-content-to-header .form-check .form-check-input {
    margin-left: 5px !important;
    margin-top: 5px !important;
}
.report-columns-content-to {
   /* background-color: white;*/
    flex: 1;
    display: flex;
    flex-direction: column;
    border: solid 1px rgba(100,100,100,.7);
    overflow: auto;
}
.report-columns-footer .form-buttons {
    padding: 8px 17px !important;
    margin-top: 3px !important;
    padding-bottom: 9px !important;
}
.window-gripper {
    position: absolute;
    right: 1px;
    bottom: 1px;
    transform: rotate( -90deg );
    /* padding-right: 3px; */
    opacity: .7;
    cursor:pointer !important;
}
.window-gripper-row {
    display:flex;
    cursor:inherit;
}
.window-gripper-row-item {
    background-color: gray;
    border: solid 1px gray;
    border-radius: 100%;
    margin: 1px;
    cursor: inherit;
}

.list-view-body.reports .list-view-groups {
    width: 100%;
    height: 100%;
}
.list-view-header-search-subfolders {
    padding-top:5px;
}
.app-form-table.reportFiles-table {
    flex: 1;
}

.tab-container {
    display: flex;
    flex: 1;
}
.tab-container .tab-button {
    display: flex;
    align-items:center;
    padding: 1rem 1.5rem;
    width: 100%;
    align-items: center;
    /*justify-content: flex-end;*/
    transition:.2s;
}
.tab-container .tab-button.selected {
    background-color: rgba(100,100,100,.3);
    color: #FFAB15;
    color: #0d6efd;
    color:white;
    opacity: 1 !important;
    
}
.tab-container .tab-page {
    flex:1;
}
.tab-container .tab-label {
    margin-left:.5rem;
}
.tab-container .tab-buttons {
    border-right: solid 1px rgba(100,100,100,.3);
    /* padding: 0.5rem;*/
    justify-content: initial;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    background: linear-gradient( +90deg, rgba(0,0,0,.3), transparent) !important;
}

.app-player-content-menu {
    padding: 0rem;
    align-items: baseline;
    line-height: 1.4;
    position: absolute;
    background-color: white;
    border: solid 1px rgba(100,100,100,.3) !important;
    box-shadow: 0 3px 5px 0 rgb(0 0 0 / 10%) !important;
    border-radius: 5px;
    left: -195px;
    top: 54px;
    display: none;
    opacity: 0;
    transition: .1s;
    transition-property: opacity;
    cursor: default;
}
.app-player-content-menu.show {
    display: flex;
}
.app-player-content-menu.reveal {
    opacity: 1;
}
.app-player-content-menu::before {
    display: block;
    content: " ";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent  rgba(100,100,100,.3) transparent;
}

/*.app-form-buttons .app-button.sortType {
    padding-left:10px;
    padding-right:10px;
    position:relative;
    left:-5px;
    border-left:none;
}*/
/*.app-form-buttons .app-button.sortType .app-label {
    display:none;
}
*/
.app-form-buttons .app-button.sortType i {
    padding-right:0px;
}

.app-upload-content-menu {
    display: flex;
    padding: .5rem;
    align-items: baseline;
    line-height: 1.4;
    position: absolute;
    background-color: white;
    border: solid 1px lightgray;
    box-shadow: 0 3px 5px 0 rgb(0 0 0 / 10%);
    border-radius: 5px;
    left: -10px;
    /*left: -283px;
    top: -1px;*/
}

.app-upload-content-menu::before {
    display: block;
    content: " ";
    position: absolute;
    bottom: 100%;
    left: 80px;
    margin-left: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent #F5F5F5 transparent;
}

.app-upload-content-menu-section {
    /*padding-right: 1rem;
    padding-left: 0.5rem;
    width: 285px;*/
    white-space: nowrap;
}

.app-upload-content-menu-item-label {
    font-size: 1rem;
    border-bottom: solid 1px dimgray;
    padding-bottom: 0rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
    padding: 5px 5px;
}
.app-upload-content-menu-items {
    display: flex;
    flex-direction: column;
    align-items: baseline;
}
.app-upload-content-menu-item-link {
    padding: 5px 10px;
    padding-right: 2rem;
    transition: .2s;
    text-align: left;
    border-radius: 5px;
    display: flex;
    align-items: center;
    color: gray;
    width: 100%;
}
.app-upload-content-menu-item-link:hover,
.app-upload-content-menu-item-link:focus {
    background-color:rgba(0,0,0,.1);
}
.app-upload-content-menu-item-link:active {
    background-color:rgba(0,0,0,.3);
    color:white;
}
.app-upload-content-menu-item-link i {
    padding-right:.5rem;
    width: 38px; 
    text-align: center;
}
.app-upload-content-menu-item-link span {
    flex:1;
    color:black;
}


.app-help-content-menu {
    display: flex;
    padding: 1rem;
    align-items: baseline;
    line-height: 1.4;
    position: absolute;
    background-color: white;
    border: solid 1px lightgray;
    box-shadow: 0 3px 5px 0 rgb(0 0 0 / 10%);
    border-radius: 5px;
    left: -283px;
    top: -1px;
}
.app-help-content-menu::before {
    display: block;
    content: " ";
    position: absolute;
    bottom: 100%;
    left: 324px;
    margin-left: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent #F5F5F5 transparent;
}

.app-menu-icons-bar ul {
    display: flex;
    align-items: center;
}

.app-help-content-menu-section {
    padding-right: 1rem;
    padding-left: 0.5rem;
    white-space: nowrap;
    width: 285px;
}

.app-help-content-menu-item-label {
    font-size: 1rem;
    border-bottom: solid 1px dimgray;
    padding-bottom: 0rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
    padding: 5px 5px;
}
.app-help-content-menu-items {
    display: flex;
    flex-direction: column;
    align-items: baseline;
}
.app-help-content-menu-item-link {
    padding: 5px 5px;
    width: 100%;
    transition: .2s;
    text-align: left;
    border-radius: 5px;
}
.app-help-content-menu-item-link:hover,
.app-help-content-menu-item-link:focus {
    background-color:rgba(0,0,0,.1);
}
.app-help-content-menu-item-link:active {
    background-color:rgba(0,0,0,.3);
    color:white;
}

.app-project-header .up-next-queue {
    margin-right:1rem;
}
.app-project-header .up-next-queue .media-status-queue {    
    font-size: 1.4rem;
    padding: 1.1rem;
    position: relative;
    top: 4px;
}

.media-status-volume {
    color: white;
    margin: 0.5rem 0.9rem;
    font-size: 1.4rem;
    position: relative;
    top: 4px;
    width: 55px;
    text-align: center;
    left: 5px;
}
.media-status-volume-container {
    position:relative;
}
.app-volume-content-menu {
    padding: 0rem;
    align-items: baseline;
    line-height: 1.4;
    position: absolute;
    background-color: white;
    border: solid 1px rgba(100,100,100,.3);
    box-shadow: 0 3px 5px 0 rgb(0 0 0 / 10%);
    border-radius: 5px;
    left: -57px;
    top: 54px;
    display: none;
    opacity: 1;
    transition: .1s;
    transition-property: opacity;
    cursor: default;
    width: 200px;
    z-index: 5;
    padding-left: 5px;
    padding-right: 10px;
}
.app-volume-content-menu.show {
    display: flex;
}
.app-volume-content-menu.reveal {
    opacity: 1;
}
.app-volume-content-menu::before {
    display: block;
    content: " ";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent  rgba(100,100,100,.3) transparent;
}
.app-volume-content-menu .volume-bar-container {    
    width: 100%;
    display: flex;
    align-items: center;
}
.app-volume-content-menu .volume-bar-container .mute-icon {
    padding: 5px;
    font-size: 1.2rem;
    padding-right: 0;
}



.media-status-sort-container {
    position:relative;
}
.app-sort-content-menu {
    padding: 0rem;
    align-items: baseline;
    line-height: 1.4;
    position: absolute;
    background-color: white;
    border: solid 1px rgba(100,100,100,.3);
    box-shadow: 0 3px 5px 0 rgb(0 0 0 / 10%);
    /*border-radius: 5px;*/
    /* left: -74px;
    top: 54px;*/
    display: none;
    opacity: 1;
    transition: .1s;
    transition-property: opacity;
    cursor: default;
    z-index: 5;
    /*    width: 200px;
    padding-left: 5px;
    padding-right: 10px;*/
}
.app-sort-content-menu.show {
    display: flex;
}
.app-sort-content-menu.reveal {
    opacity: 1;
}
/*.app-sort-content-menu::before {
    display: block;
    content: " ";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent #F5F5F5 transparent;
}*/



#player-bar {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    justify-content: space-between;
    max-width: 500px;
    /*height: 200px;*/
}
body.dark-mode #player-bar {
    background-color: #282828;
}
body.light-mode #player-bar {
    background-color: whitesmoke;
}

#player-bar .playback-info {
    display: flex;
    /* align-items: center;*/
    flex: .29;
    padding: 10px;
}

#player-bar .playback-info .media-art {
    max-width: 150px;
    max-height: 150px;
    margin-right: 15px;
}
    
#player-bar .playback-info .description
{
    white-space: nowrap;
    overflow:hidden;
    text-overflow: ellipsis;
    max-width:260px;
}
body.dark-mode #player-bar .playback-info .description {
    color: rgba(255,255,255, 1);
}

#player-bar .playback-info .supplemental-info {
    font-size: 1rem;
    opacity: .9;
}

#player-bar .playback-info .supplemental-info2
{
    overflow:hidden;
    text-overflow: ellipsis;
    font-size:.9rem;
    opacity:.9;
}

#player-bar .playback-info .supplemental-info3
{
    overflow:hidden;
    text-overflow: ellipsis;
    font-size:.9rem;
    opacity:.9;
}

#player-bar .playback-info .supplemental-info4 {
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .9rem;
    opacity: .9;
}

#player-bar .player-controls {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding-bottom:.5rem;
}

#player-bar .player-controls .player-buttons
{
    display:flex;
    justify-content: center;
    padding:5px;
    padding-top: 10px;
}

#player-bar .player-controls .player-buttons button
{
    margin-left:20px;
    margin-right:20px;
}
body.dark-mode #player-bar .player-controls .player-buttons button {
    color: white;
}

#player-bar .player-controls .player-buttons .play-pause-toggle {
    align-items: center;
    justify-content: center;
    display: flex;
    font-size: 34px;
}
body.dark-mode #player-bar .player-controls .player-buttons .play-pause-toggle {
    color: white;
}


#player-bar .player-controls .player-buttons .play-pause-toggle .play > i {
    
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
#player-bar .player-controls .player-buttons .play-pause-toggle .play > i > i {
    position: absolute;
    font-size: 13px;
    left: 1px;
    right: -2px;
    top: 11px;
    bottom: 0;
}
#player-bar .player-controls .player-buttons .play-pause-toggle .play > i i.pause {
    right: 1px;
    display:none;    
}
#player-bar .player-controls.playing .player-buttons .play-pause-toggle .play > i i.play {
    display: none;
}
#player-bar .player-controls.playing .player-buttons .play-pause-toggle .play > i i.pause {
    display: initial;
}


#player-bar #position 
{
    display: flex;
    max-height: 20px;
    margin: 0 auto;
    width: 100%;
    align-items: center;
    cursor: pointer;
    padding: 5px 10px;
}
#player-bar #position .completed 
{
    font-size:.7em;
    width:50px;
    padding-right:10px;
    text-align:right;
    flex: .1;
}
body.dark-mode #player-bar #position .completed {
    color: white;
}
#player-bar #position .uncompleted {
    font-size: .7em;
    width: 50px;
    padding-left: 10px;
    flex: .12;
}
body.dark-mode #player-bar #position .uncompleted {
    color: white;
}
#player-bar #position .level {
    display: flex;
    flex: 1;
    min-height: 1px;
    max-height: 15px;
    /* position: relative;
    top: -1px;*/
    cursor: pointer;
    align-items:center;
    position: relative;
    left: 5px;
}
#player-bar #position .level .on 
{ 
    display:flex;
    background-color: #b3b3b3;
    border-radius: 5px;
    height: 4px;
    width: 0%;
    z-index:1;
}
#player-bar #position:hover .level .on
{ 
    background-color: #1bd665;
}
#player-bar #position .level .selector {
    display: none;
    background: #999;
    min-width: 11px;
    min-height: 11px;
    max-width: 11px;
    max-height: 11px;
    position: relative;
    left: -5px;
    z-index: 5;
    border-radius: 50%;
    transition: .20s;
    position: relative;
    left: -5px;
}

body.dark-mode #player-bar #position .level .selector {
    background: white;
}
    
#player-bar #position:hover .level .selector
{ 
    display:flex;
}
#player-bar #position .level .selector:active 
{
    background: linear-gradient(#B1B1B1, #D9D9D9);
}
    
#player-bar #position .level .selector.select 
{
    background: linear-gradient(#B1B1B1, #D9D9D9);
}
    
#player-bar #position .level .off 
{ 
    display:flex;
    flex:1;
    height:4px;
    background-color: #404040;
    border-radius: 5px;
    position: relative;
    left: -5px;
}

#player-bar #misc-controls
{
    display: none;
    align-items: center;
    justify-content: space-between;
    width:100%;
    padding:10px;
}

#player-bar #misc-controls .closedCaptioning {    
    padding: 5px;
    margin-right: 20px;
}

#player-bar #misc-controls .fullscreen {    
    padding: 5px;
    margin-left: 10px;
}

#player-bar #misc-controls .pictureInPicture {    
    padding: 5px;
    margin-left: 10px;
    transform: rotateZ(90deg);
}


#player-bar #volume-bar-container {
    justify-content: flex-end;
    max-width: 200px;
    min-width: 100px;
}

#player-bar .volume-speaker 
{
    color: white;
}
#player-bar .volume-bar 
{
    display: flex;
    flex: 1;
    align-items: center;
    margin:0;
    padding:0;
}
#player-bar .volume-bar .track
{
    display:flex;
    height:2px;
    flex:1;
    cursor:pointer;
    padding: 5px;
}
    #player-bar .volume-bar .track .on {
        display: flex;
        background-color: #b3b3b3;
        height: 4px;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        align-self: center;
        z-index: 1;
        /*position: relative;
    left:5px;*/
    }
#player-bar .volume-bar:hover .track .on 
{
    background-color: #1bd665;
}
    #player-bar .volume-bar .track .off {
        display: flex;
        background-color: #404040;
        height: 4px;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        align-self: center;
        /*position: relative;
    left:-5px;*/
        flex: 1;
    }
#player-bar .volume-bar .track .thumb 
{
    display: none;
    width: 11px;
    height: 11px;
    min-width: 11px;
    min-height: 11px;
    border-radius: 10px;
    align-self: center;
    z-index: 5;
    /*position: relative;
    left: -5px;
    top: -1px;*/
    transition: ease-in-out;
    background-color: #999;
}
body.dark-mode #player-bar .volume-bar .track .thumb {
    background-color: white;
}
#player-bar .volume-bar:hover .track .thumb 
{
    display: flex;
}
#player-bar .volume-bar .track .thumb:active 
{
    background-color:gainsboro;
}
#player-bar .volume-bar .track .thumb.resize 
{
    background-color:gainsboro;
}

#player-bar .misc-controls .svg-icon
{
    width:16px;
    height:auto;
}

#player-bar .misc-controls .speech-subtitles
{
    margin-right:20px;
}

#player-bar .misc-controls .speech-subtitles .shape-fill
{
    fill:none;
}
#player-bar .misc-controls .speech-subtitles:hover .shape-fill
{
    stroke:#fff;
}

#player-bar .misc-controls .expanding-arrows:hover .shape-fill
{
    stroke:#fff;
}


.tab-page-container {
    padding-left: 0.5rem;
}
.tab-page-container #views .view.library section.library .subsection .items .item > button {    
    flex: 0;
}
.tab-page-container #views .view.library section.library .subsection > header {
    position:initial;
    padding: 0.7rem;
    padding-bottom:.2rem;
    color:white;
    text-align:left;
}
.tab-page-container #views .view section .subsection .items .item > button .icon-container {
    margin-left: 1.2rem;
}
.tab-pages {
    flex:1;
}
.tab-page-container {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.tab-page-container #views .view.library section.library .subsection .items .item > button {
    background-color:transparent !important;
}
.tab-page-container #views .view.library section.library .subsection .items .select.item > button {
    background-color:transparent !important;
}
.tab-page-container #views .view.library section.library .subsection .items .item > button:hover {
    background-color:transparent !important;
}
.form-window-header.app-form-fields {
    margin: 0;
    padding: 0;
    position: relative;
}
.form-window-header.app-form-fields .app-form-header {
    flex: 1;
    padding: 1rem;
    margin-bottom:0;
}
.form-window-header.app-form-fields > button {
    position: absolute;
    right: 0;
}
.tab-page-container > .content {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}
.tab-page-container > .content > #views {
    
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    flex: 1;
}
.tab-page-container .option-checkboxes {
    padding-top: .5rem;
    padding-bottom: 0.5rem;
}
.tab-page-container .option-checkboxes .app-form-field.form-check {
    padding: 0.2rem 0 !important;
}
.tab-page-container .option-fields {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.3rem;
}
.sections-tabs-footer button {
    padding: 0.5rem;
    color: #0d6efd;
    /*  font-size: 80%;*/
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}
.sections-tabs-footer > a {
    display: flex;
    white-space: nowrap;
    user-select: unset;
    flex:1;
}
.sections-tabs-footer button:focus,
.sections-tabs-footer button:active,
.sections-tabs-footer button:hover,
.sections-tabs-footer button.selected{
    color: white;
}
.sections-tabs-footer button label {
    margin-left:.5rem;
}
.app-view.client-fields .app-tab-view.settings {
    max-width: 100%;
    /* justify-content: center; */
    /* align-items: center; */
    margin-left: auto;
    margin-right: auto;
    width: 40%;
    min-width:200px;
}
.app-view.client-fields .app-tab-view.settings .app-button {
    width:min-content;
}
.column .app-label-span .image-container {
    min-width: 350px;
    flex: 1;
}
.column .app-label-span .image-container img {
    max-height:120px;
}
.summary_certificateInfo {
    align-items:baseline !important;
}
.app-tab-view.logs {
    height: 100%;
}
.console.logs-items {
    background-color: black;
    color: green;
    padding: 1rem;
    border-radius: 5px;
    overflow: auto;
    height: 100%;
    width: 100%;
    margin-top: 1rem;
}
.console.logs-items .log-item {
    padding: 0 .2rem;
    display: flex;
    font-size: 1.2rem;
    line-height: 1.6;
    white-space: nowrap;
}
.media-status-play-container {
    position:relative;
}
.media-status-play-container .media-status-play {
    padding-right: 1.5rem;
    padding-left: 1rem;
    font-size: 1.4rem;
    top: 4px;
    position: relative;
}

.client-search-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    position: relative;
    padding: 0 1.5rem;
}

.client-search-message {
    padding-top: 1rem;
    font-size: 1.6rem;
    padding-bottom: 1rem;
}

.client-search-loader {
   /* position: fixed;
    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: 1;*/
}

.app-tab-view .app-table thead tr {
    text-align: left;
    font-size: 1.4rem;
    background-color: rgba(100,100,100,.3);
    white-space: nowrap;
}
.app-tab-view .app-table thead th {
    padding:.5rem 1rem;
}

.app-tab-view .app-table tbody tr {
    text-align: left;
    font-size: 1.2rem;
    border-bottom: solid 1px rgba(100,100,100,.3);
}

.app-tab-view .app-table tbody td {
    padding: .5rem 1rem;
    vertical-align: baseline;
}
.drivers-header-label {
    font-size: 1.6rem;
    padding-bottom: 0.2rem;
}
.installedFiles-header-label {
    font-size: 1.6rem;
    padding-bottom: 0.2rem;
    padding-top: 1rem;
}

#views .view.library section.library .subsection .items .item.no-items button > .icon-container {
    margin-left: 5px;
}

.app-view.media-fields .app-tab-view.summary > div,
.app-view.media-fields .app-tab-view.input .media-fields {
    margin-left: auto;
    margin-right: auto;
}
.app-view.media-fields .app-tab-view.input .event-fields {
    margin-left: auto;
    margin-right: auto;
    min-width: 60%;
}
.app-view.media-fields .app-tab-view.summary .column .app-label,
.app-view.media-fields .app-tab-view.input .column .app-label {
    text-align: right !important;
}
#metadata-section .app-view.summary .app-tabs {
    margin-bottom:1rem;
}
#metadata-section .app-view.summary .format-data {
    padding-bottom: 1.8rem;
}
#metadata-section .app-view.input .format-data {
    padding-bottom: 1rem;
}
.sections-tabs-footer {
    display: flex;
    justify-content: space-evenly;
}

#winform-menu-bar {
   /* background-color: whitesmoke;
    color: #1C1C22;*/
    padding: 0;
    padding-bottom: 0;
/*    border-right: solid 1px #d0d0d0;
    border-left: solid 1px #d0d0d0;
*/    padding: 3px;
   /* border-bottom: solid 1px #d0d0d0;*/ 
   /* border-color: rgba(0,0,0, .05);*/
}
#winform-menu-bar.hidden
{
    display:none;
}
#winform-menus
{
    padding:0;
    margin:0;
    font-size:.8rem;
    color:whitesmoke;
    list-style: none;
}

#winform-menus .winform-menu
{
    display:inline-block;
    padding:7px;
    cursor:default;
    position:relative;
    padding-top:3px;
    padding-bottom:3px;
}
#winform-menus .winform-menu:hover
{
    background-color:#858585;
    color:white;
}
#winform-menus .winform-menu:hover > .title
,#winform-menus .winform-menu.selected > .title
{
    color:#fff;
}
#winform-menus .winform-menu.selected
{
    background-color:#676767;
    color:white;
}
#winform-menus .winform-menu:last-of-type
{
    margin-right:0;
}
#winform-menus .winform-menu:first-of-type
{
    margin-left:0;
}











#control-panel {
    display: none;
    background: linear-gradient(to bottom, #e6e6e6 0, #d0d0d0 100%);
    /*  border-bottom: solid 1px #d0d0d0;*/
    display: flex;
    height: 50px;
    /*overflow: hidden;*/
    transition: .2s;
    /*  height: 45px;
    min-height: 45px;
    max-height: 45px;*/
}
/*.dms-on-demand:not(.bridge) #control-panel {
    display: none !important;
}*/
#control-panel.hide {
    height: 0px;
}
body.dark-mode #control-panel {
    color: #3f3f3f;
    color: white;
    background: #191919;
    background: #131313;
    background: #181818;
}

/*#app-container.fullscreen #control-panel {
    display: none !important;
}*/
/*body.playback #control-panel {
    display: none !important;
}
*/
#media-controls {
    /*padding:0 5px;*/
    display: flex;
    justify-content: space-between;
    flex: 7.3;
}

#media-controls.has-media {
    flex: 6.5;
}

#media-controls .alignment-container {
    display: flex;
    padding-left: 5px;
}
#media-controls .alignment-container .logo {
    display: flex;
    align-items: center;
    justify-content: center;
}
#media-controls .alignment-container .logo img {
    max-height: 27px;
    padding-left: 12px;
}



#control-buttons {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 91px;
    padding-bottom: 2px;
    margin-left: -0.3rem;
}

#control-buttons .control-button {
    display: inline-block;
    vertical-align: middle;
    cursor:pointer;
}

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

#control-buttons .control-button.play-pause-toggle > div.hide { 
    display:none;
}


#control-buttons .skip-back .svg-icon {
    width: 20px;
    height: 14px;
    display: inline-block;
    vertical-align: middle;
}

#control-buttons .skip-back.enabled .shape-fill {
    fill: #fff;
    stroke: #fff;
}
body.dark-mode #control-buttons .skip-back.enabled .shape-fill {
    fill: whitesmoke;
    stroke: whitesmoke;
}
#control-buttons .skip-back.enabled:active .shape-fill {
    fill: #616161;
    stroke: #616161;
}

#control-buttons .play-pause-toggle .play,
#control-buttons .play-pause-toggle .pause {
    display: none;
}

#control-buttons .play-pause-toggle .play.show,
#control-buttons .play-pause-toggle .pause.show {
    display: block;
}

#control-buttons .play-pause-toggle .svg-icon {
    width: 19px;
    height: 22px;
}

#control-buttons .play-pause-toggle.enabled .shape-fill {
    fill: #fff;
    stroke: #fff;
}
body.dark-mode #control-buttons .play-pause-toggle.enabled .shape-fill {
    fill: whitesmoke;
    stroke: whitesmoke;
}

#control-buttons .play-pause-toggle.enabled:active .shape-fill {
    fill: #fff;
    stroke: #fff;
}

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

#control-buttons .play-pause-toggle .pause {
    margin-top: 2px;
}

#control-buttons .skip-forward .svg-icon {
    width: 20px;
    height: 14px;
    display: inline-block;
    vertical-align: middle;
}

#control-buttons .skip-forward.enabled .shape-fill {
    fill: #2c2c2c;
    stroke: #2c2c2c;
}
body.dark-mode #control-buttons .skip-forward.enabled .shape-fill {
    fill: whitesmoke;
    stroke: whitesmoke;
}
#control-buttons .skip-forward.enabled:active .shape-fill {
    fill: #616161;
    stroke: #616161;
}

#speaker-controls {
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    margin: 0;
}


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

    #speaker-controls {
        margin: 0 20px;
    }

}

#media-status-bar {
    flex: 10;
    background: linear-gradient(to bottom, #f1f1f1 0, #e6e6e6 100%);
    /*border:solid 1px #cecece;*/
    border-top: none;
    border-bottom: none;
    display: flex;
    justify-content: space-between;
    cursor: default;
}
body.dark-mode #media-status-bar {
    background: none;
}

#media-status-bar .svg-icon .shape-fill {
    fill: #646464;
}

#media-status-bar.media .media-art {
    width: auto;
    /*height: 45px;*/
    /*max-width: 45px;*/
    height:100%
}


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

    #media-status-bar .media-art {
        display: none;
    }
}

.icon-checkbox.love {
    position: relative;
    top: -2px;
}
#media-status-bar.no-media .media-art {
    display: none;
}

#media-status-bar.media .artrela-logo {
    display: none;
}

.library-group-details .name .playback-info {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

#media-status-bar .playback-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    position:relative;
}

#media-status-bar .playback-info .main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    flex: 1;
    margin-bottom: 0px;    
    min-height: 42px;
    max-height: 42px;
    overflow:hidden;
}

#media-status-bar .playback-info .left {
    margin-left: 5px;
    min-width: 35px;
    align-self: flex-start;
    padding-top: 2px;
}

#media-status-bar .playback-info .left .icons {
    display: flex;
    align-items:center;
    margin-bottom: 3px;
}
/*#control-panel.url #media-status-bar .playback-info .left .icons {
    display:none;
}*/
/*#control-panel.url #media-status-bar .playback-info .left .playback-time {
    display: none;
}*/

    #media-status-bar .playback-info .left .minimize
    {
        display:none;
        height: 15px;
        width: auto;
        margin-right: 7px;
        transform: scale(.8);
    }
#media-status-bar .playback-info .left .minimize:hover .shape-fill {
    fill: #1d8cf8;
}

    #media-status-bar .playback-info .left .shuffle {
        height: 9px;
        width: auto;
        transform: scale(.95);
        cursor:pointer;
    }
#media-status-bar .playback-info .left .shuffle:hover .shape-fill
,#media-status-bar .playback-info .left .shuffle.selected .shape-fill
{ 
    fill: #1d8cf8;
}


#media-status-bar.no-media .playback-info .left .playback-time {
    display: none;
}

#media-status-bar.no-media .playback-info .description {
    display: none;
}

#media-status-bar .playback-info .description {
    margin-top: 5px;
    margin-left: 10px;
    margin-right: 7px;
    flex: 1;
}
#media-status-bar .playback-info .description > .title {
    font-size:12px;
    text-align: center;
   /* color: #3f3f3f;*/
    margin-top: 2px;
    margin-bottom: 2px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#media-status-bar .playback-info .description .supplemental-info {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: center;
    margin-bottom: 2px;
    margin-top:2px;
}

#media-status-bar.buffering .playback-info .description .supplemental-info {
    display:none;
}

@media only screen and (max-width: 700px) {
    #media-status-bar .playback-info .description .supplemental-info {
        display: none;
    }
}

#media-status-bar .playback-info .description .supplemental-info2 {
    /*white-space: nowrap;*/
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: center;
}

#media-status-bar.buffering .playback-info .description .supplemental-info2 {
    display: none;
}

@media only screen and (max-width: 700px) {
    #media-status-bar .playback-info .description .supplemental-info2 {
        display: none;
    }
}

#media-status-bar .playback-info .description .field-group.buffer-progress 
{
    display:none;
    flex-direction: row;
}
#media-status-bar.buffering .playback-info .description .field-group.buffer-progress 
{
    display:flex;
}

#media-status-bar .playback-info .description .field-group.buffer-progress .title
{
    margin-right:5px;
}

#media-status-bar .playback-info .description .field-group.buffer-progress .content {
    display:flex;
    flex-direction: row;
    align-items: center;
}

#media-status-bar .playback-info .description .field-group.buffer-progress .content progress {
    -webkit-appearance: none;
    height: 5px;
}

#media-status-bar .playback-info .description .field-group.buffer-progress .content .display {
    margin-right:10px;
}

#media-status-bar .playback-info .description .field-group.buffer-progress .content progress::-webkit-progress-bar {
    background-color: #ccc;
}

#media-status-bar .playback-info .description .field-group.buffer-progress .content progress::-webkit-progress-value {
    background-color: #1d8cf8;
}

#media-status-bar .playback-info .right {
    /*min-width: 50px;*/
    /*margin-right: 5px;
    align-self: flex-start;
    padding-top: 4px;*/ 
    margin-right: 5px;
    min-width: 35px;
    align-self: flex-start;
}

#media-status-bar .playback-info .right .icons {
    /*display: flex;
    justify-content: flex-end;
    margin-bottom: 5px;*/
    /*padding-top: 2px;*/
}
#media-status-bar .playback-info .right .icons .love span {
    font-size: 17px;
    padding: 2px 5px;
    padding-left: 0;
    margin-right: 5px;
    cursor: pointer;
    position: relative;
    top: 3px;
}
body.light-mode #media-status-bar .playback-info .right .icons .love span {
    color: dimgray;
}
#media-status-bar .playback-info .right .icons .up-next-queue span {
    font-size: 23px;
    color: gray;
}
#media-status-bar .playback-info .right .icons .up-next-queue {    
    position: relative;
    top: -2px;
    padding-right: 5px;
}

   

#media-status-bar .playback-info .right .remaining-time {
    text-align: right;
    /* padding-right: 2px; */
    /* padding-top: 2px; */
    position: absolute;
    right: 10px;
    bottom: 9px;
}

#control-panel.no-time #media-status-bar .playback-info .right .remaining-time {
    display:none;
}

#media-status-bar.no-media .playback-info .right .remaining-time {
    display: none;
}

#app-container .winform-options-button {
display:none;
}
/* begin position-level */
#media-status-bar #position-level {
    display: flex;
    /* flex: 1; */
    /* min-height: 7px; */
    /* max-height: 7px; */
    /* align-items: center; */
    cursor: pointer;
    position: relative;
    /*top: 5px;*/
    padding-left: 0px;
    padding-right: 0;
    margin-left: -1px;
    margin-right: -1px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    right: 0;
}
#media-status-bar #position-level .position-level-bkgd {
    
    position: absolute;
    left: 0;
    right: 0;
    top: -4px;
    bottom: -4px;
}
#media-status-bar .icons button.repeat-button .material-icons {
    font-size: 14px;
    padding: 5px 5px;
    padding-left: 0;
}
body.light-mode #media-status-bar .icons button.repeat-button .material-icons {
    color: dimgray;
}
#media-status-bar .icons button.repeat-button.selected .material-icons {
    background-color: #0d6efd;
}
#media-status-bar .icons button.shuffle-button .material-icons {
    font-size: 14px;
    padding: 5px 5px;
    /* padding-left: 0; */
}
body.light-mode #media-status-bar .icons button.shuffle-button .material-icons {
    color: dimgray;
}
.icons button.shuffle-button.selected .material-icons {
    background-color: #0d6efd;
}
/*
.playback-time {
    /* padding-left: 2px; */
    /* padding-top: 2px; */
/*position: absolute;
    bottom: 0;
    left: 7px;
    bottom: 5px;
}
*/

.no-media #media-status-bar #position-level {
    display: none;
}

#media-status-bar #position-level-on {
    display: flex;
    background-color: #FFAB15;
    position: relative;
    height: 2px;
    top: 0px;
    width: 1px;
   /* box-shadow: 1px 1px 15px 1px #ffab15;*/
}

#media-status-bar #position-level-selector {
    display: flex;
    background: #FFAB15;
    width: 0px;
    height: 0px;
    position: relative;
    top: 0px;
    z-index: 10;
    border: solid 1px #FFAB15;
    transition: .20s;
}

#media-status-bar #position-level-selector.hide {
    display: none;
}

/*#media-status-bar #position-level-selector:active {
    background: linear-gradient(#B1B1B1, #D9D9D9);
}

#media-status-bar #position-level-selector.select {
    background: linear-gradient(#B1B1B1, #D9D9D9);
}*/

#media-status-bar #position-level-off {
    display: flex;
    flex: 1;
    height: 2px;
    position: relative;
    top: 0px;
    background-color: transparent;
}


/* end position-level */


.list-view-status {
    text-align: left;
    flex: 1;
    font-size: .9rem;
    display:none;
}

.media-status-play {
    color: whitesmoke;
    margin: 0.5rem;
    font-size: 1.6rem;
    position: relative;
    top: 3px;
    margin-right: 0.6rem;
    margin-left: 1rem;
}

.app-menubar-item.project .app-menubar-item-label {
    max-width: 200px;
    text-overflow: ellipsis;
    overflow: hidden;
}

.media-status-play-container {
    position: relative;
}
.app-player-content-menu {
    padding: 0rem;
    align-items: baseline;
    line-height: 1.4;
    position: absolute;
    background-color: white;
    border: solid 1px #eef1f2 !important;
    box-shadow: 0 3px 5px 0 rgb(0 0 0 / 10%) !important;
    border-radius: 5px;
    left: -196px;
    top: 54px;
    display: none;
    opacity: 0;
    transition: .1s;
    transition-property: opacity;
    cursor: default;
}
.app-player-content-menu.show {
    display: flex;
}
.app-player-content-menu.reveal {
    opacity: 1;
}
.app-player-content-menu::before {
    display: block;
    content: " ";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent #F5F5F5 transparent;
}

/*.app-form-buttons .app-button.sortType {
    padding-left:10px;
    padding-right:10px;
    position:relative;
    left:-5px;
    border-left:none;
}*/
/*.app-form-buttons .app-button.sortType .app-label {
    display:none;
}
*/
.app-form-buttons .app-button.sortType i {
    padding-right:0px;
}

.app-upload-content-menu {
    display: flex;
    padding: .5rem;
    align-items: baseline;
    line-height: 1.4;
    position: absolute;
    background-color: white;
    border: solid 1px lightgray;
    box-shadow: 0 3px 5px 0 rgb(0 0 0 / 10%);
    border-radius: 5px;
    left: -10px;
    /*left: -283px;
    top: -1px;*/
}

.app-upload-content-menu::before {
    display: block;
    content: " ";
    position: absolute;
    bottom: 100%;
    left: 80px;
    margin-left: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent #F5F5F5 transparent;
}

.app-upload-content-menu-section {
    /*padding-right: 1rem;
    padding-left: 0.5rem;
    width: 285px;*/
    white-space: nowrap;
}

.app-upload-content-menu-item-label {
    font-size: 1rem;
    border-bottom: solid 1px dimgray;
    padding-bottom: 0rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
    padding: 5px 5px;
}
.app-upload-content-menu-items {
    display: flex;
    flex-direction: column;
    align-items: baseline;
}
.app-upload-content-menu-item-link {
    padding: 5px 10px;
    padding-right: 2rem;
    transition: .2s;
    text-align: left;
    border-radius: 5px;
    display: flex;
    align-items: center;
    color: gray;
    width: 100%;
}
.app-upload-content-menu-item-link:hover,
.app-upload-content-menu-item-link:focus {
    background-color:rgba(0,0,0,.1);
}
.app-upload-content-menu-item-link:active {
    background-color:rgba(0,0,0,.3);
    color:white;
}
.app-upload-content-menu-item-link i {
    padding-right:.5rem;
    width: 38px; 
    text-align: center;
}
.app-upload-content-menu-item-link span {
    flex:1;
    color:black;
}


.app-help-content-menu {
    display: flex;
    padding: 1rem;
    align-items: baseline;
    line-height: 1.4;
    position: absolute;
    background-color: white;
    border: solid 1px lightgray;
    box-shadow: 0 3px 5px 0 rgb(0 0 0 / 10%);
    border-radius: 5px;
    left: -283px;
    top: -1px;
}
.app-help-content-menu::before {
    display: block;
    content: " ";
    position: absolute;
    bottom: 100%;
    left: 324px;
    margin-left: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent #F5F5F5 transparent;
}

.app-menu-icons-bar ul {
    display: flex;
    align-items: center;
}

.app-help-content-menu-section {
    padding-right: 1rem;
    padding-left: 0.5rem;
    white-space: nowrap;
    width: 285px;
}

.app-help-content-menu-item-label {
    font-size: 1rem;
    border-bottom: solid 1px dimgray;
    padding-bottom: 0rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
    padding: 5px 5px;
}
.app-help-content-menu-items {
    display: flex;
    flex-direction: column;
    align-items: baseline;
}
.app-help-content-menu-item-link {
    padding: 5px 5px;
    width: 100%;
    transition: .2s;
    text-align: left;
    border-radius: 5px;
}
.app-help-content-menu-item-link:hover,
.app-help-content-menu-item-link:focus {
    background-color:rgba(0,0,0,.1);
}
.app-help-content-menu-item-link:active {
    background-color:rgba(0,0,0,.3);
    color:white;
}


.media-status-volume {
    color: white;
    margin: 0.5rem;
    font-size: 1.6rem;
    position: relative;
    top: 3px;
    width: 55px;
    text-align: center;
    left: 5px;
}
.media-status-volume-container {
    position:relative;
}
.app-volume-content-menu {
    padding: 0rem;
    align-items: baseline;
    line-height: 1.4;
    position: absolute;
    background-color: white;
    border: solid 1px lightgray;
    box-shadow: 0 3px 5px 0 rgb(0 0 0 / 10%);
    border-radius: 5px;
    left: -63px;
    top: 54px;
    display: none;
    opacity: 1;
    transition: .1s;
    transition-property: opacity;
    cursor: default;
    width: 200px;
    z-index: 5;
    padding-left: 5px;
    padding-right: 10px;
}
.app-volume-content-menu.show {
    display: flex;
}
.app-volume-content-menu.reveal {
    opacity: 1;
}
.app-volume-content-menu::before {
    display: block;
    content: " ";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent #F5F5F5 transparent;
}
.app-volume-content-menu .volume-bar-container {    
    width: 100%;
    display: flex;
    align-items: center;
}
.app-volume-content-menu .volume-bar-container .mute-icon {
    padding: 5px;
    font-size: 1.2rem;
    padding-right: 0;
}



.media-status-sort-container {
    position:relative;
}
.app-sort-content-menu {
    padding: 0rem;
    align-items: baseline;
    line-height: 1.4;
    position: absolute;
    background-color: white;
    border: solid 1px lightgray;
    box-shadow: 0 3px 5px 0 rgb(0 0 0 / 10%);
    /*border-radius: 5px;*/
    /* left: -74px;
    top: 54px;*/
    display: none;
    opacity: 1;
    transition: .1s;
    transition-property: opacity;
    cursor: default;
    z-index: 5;
/*    width: 200px;
    padding-left: 5px;
    padding-right: 10px;*/
}
.app-sort-content-menu.show {
    display: flex;
}
.app-sort-content-menu.reveal {
    opacity: 1;
}
/*.app-sort-content-menu::before {
    display: block;
    content: " ";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent #F5F5F5 transparent;
}*/


#miscellaneous-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 7.5;
}
#control-panel .app-user-content-button-icon {
    margin: 0;
    font-size: 2.2rem;
}

#winform-controls {
    margin-right: 0px !important;
    align-self: flex-start;
}

#account-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px !important;
    margin-left: 20px !important;
    margin-right: 20px !important;
    cursor: pointer;
}

#account-menu .user {
    height: 15px;
    width: 15px;
    margin-right: 5px;
}

#account-menu .user .shape-fill.head{
    fill:none;
    stroke:#404040;
}
#account-menu:hover .user .shape-fill.head{
    stroke:#0D7AFF;
}
#account-menu:hover .user .shape-fill.body{
    fill:#0D7AFF;
}
#account-menu:active .user .shape-fill.head{
    stroke:#616161;
}
#account-menu:active .user .shape-fill.body{
    fill:#616161;
}
#account-menu.select .user .shape-fill.head{
    stroke:#0D7AFF !important;
}
#account-menu.select .user .shape-fill.body{
    fill:#0D7AFF !important;
}
#account-menu.logged-in .user .shape-fill.head{
    stroke:#0D7AFF !important;
}
#account-menu.logged-in .user .shape-fill.body {
    fill: #0D7AFF !important;
}

#account-menu .hidden .svg-icon {
    display: none;
}

#account-menu .hidden #account-menu .user {
    display: none;
}

#account-menu #userEmail {
    color: #404040;
    margin-right: 5px;
    font-size: 14px;
}

#account-menu .icon-chevron-down {
    width: 7px;
    height: 7px;
}

#account-menu .user .shape-fill,
#account-menu .icon-chevron-down .shape-fill {
    fill: #404040;
}

#search-menu {
    flex: 1;
    max-width: 350px;
    padding-right: 10px;
    position: relative;
}
@media only screen and (max-width: 550px) {
    #search-menu {
        display:none;
    }
}

@media only screen and (max-width: 1700px) {
    .app-search-content-button {
         border: none !important; 
        background-color: transparent !important;
        color:white !important;
        margin-right:0 !important;
        padding-right:0 !important;
    }
    .app-search-content-button .icons {
        font-size: 140%;
    }
    .app-search-content-button input {
        display:none;
    }
    .app-header-panel .up-next-queue {
        margin-right:1rem !important;
    }
}

@media only screen and (max-width: 1550px) {
    .app-menubar ul li.help {
        display:none;
    }
    .app-logo-link a {
        padding-right: 0 !important;
    }
}

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

    .app-breadcrumb-info {
        display: none;
    }
    .app-menubar ul li.analytics {
        display: none;
    }
}


@media only screen and (max-width: 1300px) {
    .app-menubar ul li.content {
        display: none;
    }
}
@media only screen and (max-width: 1200px) {
}

@media only screen and (max-width: 1150px) {
    .app-menubar ul li.upload {
        display: none;
    }
}
@media only screen and (max-width: 950px) {
    .media-status-volume-container {
        display: none;
    }
}
@media only screen and (max-width: 850px) {
    .media-status-play-container {
        display: none;
    }
}
@media only screen and (max-width: 820px) {
    .up-next-queue {
        display: none;
    }
}
@media only screen and (max-width: 750px) {
    .app-search-content-button {
        display: none !important;
    }
}







#search-menu.hidden {
    display: none;
}

#search-menu .search-box {
    background-color: #fff;
    border: solid 1px silver;
    border-radius: 5px;
    min-height: 22px;
    display: flex;
    align-items: center;
    white-space: nowrap;
   /* z-index: 1000;
    position: relative;*/
}

body.dark-mode #search-menu .search-box {
    border-radius:15px;
}
#search-menu.showing-search .search-box {
    z-index: 50000;
    position: sticky;
}

#search-menu .search-box.focused {
    border: solid 5px #99c0e9;
    box-shadow: rgba(0, 0, 0, .2) 0 0 5px 1px inset;
}

#search-menu .icons {
    margin: 0 5px;
    margin-top: 2px;
    cursor:pointer;
}

#search-menu .icon-magnifying-glass {
    transform: scaleX(-1);
    width: 12px;
    height: 12px;
}

#search-menu .icon-chevron-down {
    width: 7px;
    height: 7px;
    margin-right: 3px;
    margin-bottom: 3px;
}

#search-menu .icon-magnifying-glass .shape-fill,
#search-menu .icon-chevron-down .shape-fill {
    fill: #757575;
}

#search-menu .search-box input[type="search"] {
    margin: 0;
    padding: 0;
    border: none;
    font-size: 13px;
    flex: 1;
    margin-right: 10px;
    margin-top: 0px;
    color: #484848;
    width: 100%;
    padding: .3rem;
}
 
#search-menu .search-box input[type="search"]:focus {
    outline: none;
}

#winform-controls {
    margin-left: 10px;
}

body.dark-mode #search-menu .search-box input[type="search"] {
    padding: .2rem;
    min-width: 220px;
}
.nav-area #search-menu .search-box input[type="search"] {
    padding: .2rem;
    min-width: 220px;
}





#up-next-queue-container {
    display: none;
    opacity: 1;
    background-color: #F5F5F5;
    color: #fff;
    text-align: center;
    margin: 5px 0;
    border-radius: 5px;
    position: absolute;
    z-index: 15001;
    top: 36px;
    left: 0px;
    border: solid 0px lightgray;
    /*border-left:none;
    border-right:none;*/
    box-shadow: 0px 3px 6px 2px rgba(163, 157, 163, 0.25);
    margin-bottom: 3px;
}
body.dark-mode #up-next-queue-container {
    box-shadow: 0 1px 2px rgb(0 0 0 / 7%), 0 2px 4px rgb(0 0 0 / 7%), 0 4px 8px rgb(0 0 0 / 7%), 0 8px 16px rgb(0 0 0 / 7%), 0 16px 32px rgb(0 0 0 / 7%), 0 32px 64px rgb(0 0 0 / 7%);
    box-shadow: 0 16px 38px -12px rgb(0 0 0 / 56%), 0 4px 25px 0 rgb(0 0 0 / 12%), 0 8px 10px -5px rgb(0 0 0 / 20%);
}
body.dark-mode #up-next-wrapper {
    color: white;
}
#up-next-queue-container .before {
    display: block;
    content: " ";
    position: absolute;
    bottom: 100%;
    /* At the top of the tooltip */
    left: 50%;
    right: unset;
    margin-left: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent #1C1C22 transparent;
    pointer-events: none;
}

.app-header-panel .up-next-queue {
    margin: 0px 1.5rem;
    margin-top: 3px;
}

.app-header-panel .up-next-queue .media-status-queue {
    color: white;
    font-size: 1.6rem;
    opacity: 1 !important;
}
/*.app-header-panel .up-next-queue .media-status-queue.has-items {
    color: #0d6efd;
}
*/
body.playback #up-next-queue-container::before {
    display: block;
    content: " ";
    position: absolute;
    top: 100%;
    left: unset;
    right: 56px;
    margin-left: 0px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent #F5F5F5 transparent;
    transform: rotate(180deg);
}
body.playback .video #up-next-queue-container::before {
    right: 130px;
}

.library #up-next-queue-container {
    top: 40px;
    right: 302px;
    left: unset;
    bottom: unset;
}
.playback #up-next-queue-container {
    top: unset;
    right: 20px;
    left: unset;
    bottom: 60px;
}

#up-next-queue-container.show {
    display: flex;
}



#up-next-wrapper {
    /*width:330px;*/
    flex: 1;
    /* background-color: #F5F5F5;*/
    /*border:solid 1px #c6c6c6;*/
    display: flex;
    flex-direction: column;
    font-size: 16px;
    border-top: none;
    border-radius: 5px;
    /*box-shadow: 7px 7px 7px 0px rgb(0 0 0 / 10%);*/
    background-color: #1C1C22;
}

/*.playback #up-next-wrapper {
    flex-direction: column-reverse;
}*/

#up-next-wrapper > header {
    padding: 5px;
    display: flex;
    padding-top: 0px;
}

#up-next-wrapper .tab-buttons
{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

#up-next-wrapper .tab-buttons .tab-button
{
    padding: 5px 10px;
    border-radius: 5px;
    margin-right: 5px;
    font-size: 12px;
  /*  font-weight: bold;*/
}

#up-next-wrapper .tab-buttons .tab-button:hover
{
    background-color: #d7d7d7;
}

#up-next-wrapper .tab-buttons .tab-button.selected
{
    background-color: #2687fb;
    color: #fff;
}

    #up-next-wrapper .tabs
    {
        display: flex;
        flex-direction: column;
        flex: 1;
    }
#up-next-wrapper .tabs .tab-page
{
    display: none;
}

#up-next-wrapper .tabs .tab-page.selected
{
    display: block;
}

    #up-next-wrapper .tabs .tab-page.show
    {
        display: flex;
        flex-direction: column;
        flex: 1;
    }

#up-next-wrapper .tab-page > header
{
    display: flex;
    /*align-items: center;*/
    justify-content: space-between;
    padding-bottom: 8px;
    margin: 0 15px 5px 15px;
    border-bottom: solid 1px #d9d9d9;
    border-bottom: solid 1px rgba(100,100,100,.3);
    margin-bottom:0;
    min-height:82px;
    margin-bottom: 5px;
    padding-bottom: 8px;
}
/*.playback #up-next-wrapper .tab-page > header {
    margin-top: 5px;
    border-bottom-color:transparent;
}*/
#up-next-wrapper .tab-page.cache > header {
    padding-top: 4px;
    padding-bottom: 1rem;

}

#up-next-wrapper .actions {
    display: flex;
    flex-direction: column;
}

#up-next-wrapper .actions .buffer
{
    width: 40px;
}

    #up-next-wrapper .actions button {
        font-size: .7rem;
        padding: 1px 10px;
        padding-top: 3px;
        padding-bottom: 3px;
        margin-top: 5px;
        justify-content: center;
    }

/*#up-next-wrapper .actions button:hover
{
    color: #0069D9;
    border-color: #0069D9;
}

#up-next-wrapper .actions button:active
{
    color: #fff;
    background-color: #0069D9;
}

#up-next-wrapper .actions button.select
{
    color: #fff;
    background-color: #0069D9;
    border-color: #0069D9;
}*/

    #up-next-wrapper .tab-page > section {
        overflow-y: auto;
        flex: 1;
        text-align: left;
        min-width: 25vw;
        /*max-width: 420px;
        max-height: 450px;
        min-height: 450px;*/
    }

    #up-next-wrapper .content-loading-container {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px;
        font-style: italic;
    }
    #up-next-wrapper .content-loading-container label {
        padding-left:5px;
    }

    #up-next-wrapper .item-count
    {
        color: #9a9aa2;
        font-size: .8em;
        padding-bottom: .3rem;
    }


    #up-next-wrapper header .title
    {
        display: flex;
        flex-direction: column-reverse;
        justify-content:center;
    }

    #up-next-wrapper header .description {
        margin:0px !important;
    }

    #up-next-wrapper header .current-storage {
        /*margin-bottom: 5px;*/
        margin-top: 6px;
    }

    #up-next-wrapper header .available-storage {
        /*margin-bottom: 7px;*/
        margin-top: 10px;
    }

#up-next-wrapper section.main
{
    flex: 1;
    display: flex;
    flex-direction: column;
}
#up-next-wrapper .tab-page {
    display:none;
}
#up-next-wrapper .tab-page.show {
    display:block;
}
/*.playback #up-next-wrapper .tab-page {
    display: flex;
    flex-direction: column;
    flex-flow: column-reverse;
}*/

#up-next-wrapper .label {
    font-size: 1.6em;
    /* padding-top: 1px; */
    text-align: left;
    padding-left: 5px;
    /*padding-top: 2px;*/
}

#up-next-wrapper .media-no-items
{
}

#up-next-wrapper .media-no-items.hide
{
    display: none;
}

#up-next-wrapper .media-no-items .media-item
{
    justify-content: center;
    font-size: .75em;
}

    #up-next-wrapper .media-items
    {
        list-style: none;
        padding: 0;
        margin: 0;
        font-size: 14px;
        cursor: default;
        margin-top: .5rem;
    }

    #up-next-wrapper .queue-item {
        min-height: 80px;
        /*display: none;*/
    }

    #up-next-wrapper .media-items > li
    {
        margin-bottom: .5rem;
    }

    #up-next-wrapper .media-item
    {
        display: flex;
        flex-direction:column;
        align-items: baseline;
        padding: 5px;
        position: relative;
        border-top: solid 1px transparent;
        border-bottom: solid 1px transparent;
        padding-top: 7px;
        padding-bottom: 10px;
        padding-left:0px;
        width:100%;
        cursor:default !important;
    }

#up-next-wrapper .media-item.hide {
    display: none;
}

#up-next-wrapper .selected .media-item {
    color: #fff;
    background-color: #0069D9;
}

#up-next-wrapper .selected .media-item
{
    color: #fff;
    background-color: #0069D9;
}

#up-next-wrapper .media-item > .container {
    display: flex;
    align-items: center;

}
#up-next-wrapper .media-item .footer {
    display: flex;
    flex-direction:column;
    width: 100%;
    /*position: absolute;
    bottom: -2px;
    left: 92px;
    width: calc(100% - 113px);*/
    /*position: absolute;
    bottom: 6px;
    right: 6px;*/
    /*position: absolute;
    bottom: 8px;
    right: 0px;*/
}

#up-next-wrapper .media-item .library-item-details {   
   display:none;
   justify-content:flex-end;
}

#up-next-wrapper .media-item .library-item-details button {
    margin-left: 5px;
    margin-right: 5px;
    color: #444444;
}

#up-next-wrapper .media-item .playback-indicator
{
    width: 10px;
    padding-left: 3px;
    padding-right: 3px;
    display:none;
}

#up-next-wrapper .media-item .playback-indicator img
{
    display: none;
}

#up-next-wrapper .media-item.playing .playback-indicator img
{
    display: block;
}

#up-next-wrapper .media-item .artwork
{
    margin-right: .7rem;
    margin-left: 0rem;
    max-width: 90px;
    box-shadow: 0px 3px 6px 2px rgba(163,157,163,0.31);
    /*border: solid 1px #D3D3D3;*/
}
body.dark-mode #up-next-wrapper .media-item .artwork {
    box-shadow: 0 1px 2px rgb(0 0 0 / 7%), 0 2px 4px rgb(0 0 0 / 7%), 0 4px 8px rgb(0 0 0 / 7%), 0 8px 16px rgb(0 0 0 / 7%), 0 16px 32px rgb(0 0 0 / 7%), 0 32px 64px rgb(0 0 0 / 7%);
}

#up-next-wrapper .media-item.default-artwork .artwork {
    box-shadow: none !important;
}

#up-next-wrapper .media-item .artwork-list
{
    position: relative;
    z-index: 5;
    margin-right: .7rem;
    left:-2px;
    top:-2px;
}

#up-next-wrapper .media-item .artwork-list img
{
    max-width: 60px;
    /*box-shadow: 0px 3px 6px 2px rgba(163,157,163,0.31);*/
    border: solid 1px #D3D3D3;
}

    #up-next-wrapper .media-item .artwork-list.single-image img
    {
        box-shadow: 0px 3px 6px 2px rgba(163,157,163,0.31);
    }

#up-next-wrapper .media-item .artwork-list img.before
{
    left: 3px;
    top: 3px;
    z-index: -1;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #eee;
}

    #up-next-wrapper .media-item .artwork-list.double-image img.before
    {
        box-shadow: 0 5px 8px 0 rgba(0,0,0,0.1),0 3px 10px 0 rgba(0,0,0,0.1) !important;
    }

    #up-next-wrapper .media-item .artwork-list.single-image img.before
    {
        display: none;
    }

#up-next-wrapper .media-item .artwork-list img.after
{
    left: 6px;
    top: 6px;
    z-index: -2;
    box-shadow: 0 5px 8px 0 rgba(0,0,0,0.1),0 3px 10px 0 rgba(0,0,0,0.1) !important;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #eee;
}

#up-next-wrapper .media-item .artwork-list.double-image img.after
{
    display: none;
}

#up-next-wrapper .media-item .artwork-list.single-image img.after
{
    display:none;
}

#up-next-wrapper .media-item .media-info
{
    flex:1;
    text-align:left;
}

#up-next-wrapper .media-item .media-info span
{
    margin-right: 3px;
}

#up-next-wrapper .media-item .media-info span:last-child
{
    margin-right: 0;
}

    #up-next-wrapper .media-item .media-info .big {
        font-size: 1rem;
        white-space: nowrap;
        overflow-x: hidden;
        text-overflow: ellipsis;
        overflow: hidden;
        padding: 1px;
        max-width: 300px;
    }

    #up-next-wrapper .media-item .media-info .small {
        font-size: .8rem;
        /*color: dimgray;*/
        padding: 1px;
        padding-top: 3px;
        white-space: nowrap;
        overflow-x: hidden;
        text-overflow: ellipsis;
        overflow: hidden;
        max-width: 300px;
    }

#up-next-wrapper .media-item.selected .media-info .small {
    color: inherit;
}

#up-next-wrapper .media-item .media-info .big .time
{
    padding-left: 7px;
    font-size: .7em;
    color: dimgray;
    padding-top: 3px;
}

    #up-next-wrapper .media-item .media-info .name, .media-item .media-info .album-name {
         font-weight: bold;
        /*font-family: 'Nunito Medium', sans-serif;*/
    }

#up-next-wrapper .media-item .media-info > section
{
    color: #9a9aa2;
}

#up-next-wrapper .media-item.selected .media-info > section
{
    color: #fff;
}

#up-next-wrapper .media-item .remove-button
{
    position: absolute;
    left: 2px;
    top: 20px;
  /*  font-weight: bold;*/
    font-size: 1.1em;
    background-color: #d0d0d0;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    cursor: pointer;
}

#up-next-wrapper .media-item.selected .remove-button
{
    background-color: #999;
}

#up-next-wrapper .media-item .remove-button .glyph
{
    position: absolute;
    left: 2.5px;
    top: -3px;
    -webkit-user-select: none;
    user-select: none;
}

#up-next-wrapper .media-item .default
{
    display: none;
}

#up-next-wrapper .no-items .media-item .default
{
    display: block;
}

#up-next-wrapper .media-item .context-menu-button
{
    position: absolute;
    right: 10px;
    top: 25px;
    font-size: 1.2em;
    width: 15px;
    height: 15px;
    color: #0069D9;
    display:none !important;
}

#up-next-wrapper .media-item.selected .context-menu-button
{
    color: #fff;
}

    #up-next-wrapper .media-item .context-menu-button .glyph
    {
        position: absolute;
        left: 1.5px;
        top: -6px;
        -webkit-user-select: none;
        user-select: none;
        display: none !important;
    }

#up-next-wrapper .media-item .hover-button
{
    display: none;
}

    #up-next-wrapper .media-item:hover .hover-button
    {
        display: none !important;
    }

    #up-next-wrapper .media-item .hover-button.selected
    {
        display: none !important;
    }

#up-next-wrapper .media-item:hover .hover-button:hover, .media-item:hover .hover-button.open
{
}

#up-next-wrapper .media-item.selected .hover-button:hover, .media-item.selected:hover .hover-button.open
{
    color: #fff;
}


#up-next-wrapper .media-item .cache-state {
    /*position: absolute;*/
    z-index: 5;
    /* display: flex; */
    /* flex: 1; */
    /*width: 200px;*/
    /*display: block;*/
    /*margin-right:10px;
    margin-left:85px;*/
    /*position: relative;
    top: 16px;*/
    padding-top:0px;
}

#up-next-wrapper .media-item.caching .cache-state {
    position: absolute;
    display:block;
    right: 10px;
    bottom: 11px;
}

#up-next-wrapper .media-item.temp-cached .cache-state {
    display:block;
}
#up-next-wrapper .media-item.perm-cached .cache-state {
    display:block;
}

#up-next-wrapper .media-item .footer-container {
    flex-direction: column;
    align-items: unset;
    margin-top: 10px;
    padding-left: 15px;
    padding-right: 10px;
}
#up-next-wrapper .media-item .cache-state .container {
    display: none;
    flex-direction: column;
    align-items: flex-end;
}
#up-next-wrapper .media-item.caching .cache-state .container {
    display: flex;
}
#up-next-wrapper .media-item .cache-state .container .message {
    font-size: 9px;
    /*color: black;*/
    padding-bottom: 2px;
    margin-right:2px;
}
#up-next-wrapper .selected .media-item .cache-state .container .message {
   /* color:lightgray;*/
    
}
#up-next-wrapper .media-item .cache-state .container .progress {
    height: 2px;
    width: 100%;
    border: solid 1px lightgray;
    display: flex;
}
#up-next-wrapper .media-item .cache-state .container .progress .percent {
    background-color: #0069D9;
}

/*#up-next-wrapper .media-item .cache-state .cached-container .cache-button {
    position: relative;
    top: -1px;
}*/
#up-next-wrapper .media-item .cache-state .cached-container .uncached {
    display: flex;
    font-size: 12px;
    color: gray;
    text-align: right;
    cursor: pointer;
}
#up-next-wrapper .media-item.temp-cached .cache-state .cached-container .uncached {
   display: none;
}
#up-next-wrapper .media-item.perm-cached .cache-state .cached-container .uncached {
   display: none;
}
#up-next-wrapper .media-item.caching .cache-state .cached-container .uncached {
   display: none;
}
#up-next-wrapper .media-item.pre-cache .cache-state .cached-container .uncached {
   display: none;
}
#up-next-wrapper .media-item.selected .cache-state .cached-container .uncached {
    color: #fff;
}


#up-next-wrapper .media-item .cache-state .cached-container .caching {
    display: none;
    font-size: 12px;
    color: #1d8cf8;
    text-align: right;
    cursor: pointer;
}
#up-next-wrapper .media-item.temp-cached .cache-state .cached-container .caching {
    color: #1d8cf8;
}
#up-next-wrapper .media-item.perm-cached .cache-state .cached-container .caching {
    color: green;
}
#up-next-wrapper .media-item.pre-cache .cache-state .cached-container .caching {
   display: flex;
}
#up-next-wrapper .media-item.selected .cache-state .cached-container .caching {
    color: #fff;
}


#up-next-wrapper .media-item .cache-state .cached-container{
    display:flex;
}

#up-next-wrapper .media-item .cache-state .cached-container .cached {
    display: none;
    font-size: 12px;
    color: #1d8cf8;
    text-align: right;
    cursor: pointer;
}
#up-next-wrapper .media-item.temp-cached .cache-state .cached-container .cached {
   display: flex;
}
#up-next-wrapper .media-item.perm-cached .cache-state .cached-container .cached {
   display: flex;
    color: green;
}
#up-next-wrapper .media-item.pre-cache .cache-state .cached-container .cached {
   display: none !important;
}
#up-next-wrapper .media-item.caching .cache-state .cached-container .cached {
   display: none !important;
}
#up-next-wrapper .media-item.selected .cache-state .cached-container .cached {
    color: #fff;
}

#up-next-wrapper .media-item .library-item > .cache-container {
     margin-bottom: 0 !important;
}


#up-next-wrapper .media-item .footer .library-item .cache-container {
    order: 1;   
    position: relative;
    top: 3px;
    margin-top: 0px;
    width:100%;
}

#up-next-wrapper .app-header-info
{
    display: flex;
    flex: 1;
    justify-content: center;
    padding-top: 5px;
}

#up-next-wrapper .app-header-tab
{
    padding-left: 10px;
    padding-right: 10px;
    border: solid 1px silver;
    background-color: rgb(221, 221, 221);
    padding-top: 3px;
    padding-bottom: 3px;
    text-align: center;
    font-size: .75em;
    transition: .2s ease-in-out;
}

body.dark-mode #up-next-wrapper .app-header-tab {
    background: rgba(100,100,100, .7);
    border-color: rgba(100,100,100, .5);
    color: white;
}

#up-next-wrapper .app-header-tab:hover
{
    background-color: silver;
}

body.dark-mode #up-next-wrapper .app-header-tab:hover {
    background: #0d6efd;
    border-color: #0d6efd;
}

#up-next-wrapper .app-header-tab.select
{
    background-color: #0069D9;
    border-color: #0069D9;
    color: white;
}

body.dark-mode #up-next-wrapper .app-header-tab.select {
    background-color: #0d6efd;
    border-color: #0d6efd;
    color: white;
}

#up-next-wrapper .app-header-tab.left {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-right: none;
}

#up-next-wrapper .app-header-tab.right {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-left: none;
}

#up-next-wrapper .section-header-label
{
    font-size: 1rem;
    padding: .5rem;
    padding-bottom: 0;
    padding-top:0;
}

#up-next-wrapper .section-header-info
{
    padding: .5rem;
    font-size: .8rem;
    font-style:italic;
    padding-top:0;
}
    #up-next-wrapper .section-header-info > span.more-items
    {
        color: royalblue;
        text-decoration: underline;
        font-style: normal;
    }

    #up-next-wrapper .section-header-info > span.all-items
    {
        font-style: normal;
    }
#up-next-wrapper .section-header-info > span.all-items
{
    font-style:normal;
}
#up-next-wrapper .section-items {
    display:flex;
    flex-direction:column;
}

#up-next-wrapper .loading-container
{
    display: flex;
    align-items: center;
    font-style: italic;
}

#up-next-wrapper header {
    margin-top:3px;
    margin-left:0px;
    margin-right:7px;
    padding-bottom: 0px;
}
/*.playback #up-next-wrapper header {
    margin-top: 5px;
    padding-bottom: 1px;
}
.playback #up-next-wrapper .tab-page > section {
    border-bottom: solid 1px lightgray;
}*/
#up-next-wrapper header > .title {
    color: #404040;
    color:white;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 12px;
    /*margin-bottom: 2px;*/ 
    margin-top: 2px;
}

.playback-icon {
    color: #1d8cf8;
    font-size: 12px;
    margin-left: 0px;
    margin-right: 0px;
    position: relative;
    top: -2px;
    left: 3px;
    display:none;
}
.playing .playback-icon {
    display: block;
    opacity: 1;
}
.selected .playback-icon {
    color:#fff;
}
#up-next-wrapper .playback-icon {
   /* position:unset;*/
    padding-left:5px;
    padding-right:5px;
}
/*#up-next-wrapper .media-item .container > .image {
    margin-left: 1.5rem;
}*/
#up-next-wrapper .playing .media-item .container > .image {

}

.storage-count {
    display: flex;
    flex-direction: column;
    font-size: .7rem;
    padding-bottom: 3px;
}
.storage-count .value {
    padding-bottom: 5px;
}
.storage-count .description {
    padding-bottom: 5px;
}



/* media-status-queue */

.media-status-queue {
    /*position: relative;
    top: 5px;
    left: -5px;*/
    cursor: pointer;
}

.media-status-queue.no-media {
    padding-top: 5px;
    padding-right: 5px;
}

.media-status-queue.has-items {
    top: 2px;
    left: 0px;
}

.media-status-queue-line {
    display: flex;
    padding-bottom: 2px;
}

.media-status-queue-line-left {
    width: 2px;
    height: 1px;
    background-color: #777777;
    /*transition: .2s ease-in-out;*/
}

.media-status-queue-line-left:hover {
    background-color: #1d8cf8;
}

.media-status-queue-line-left:active {
    background-color: #1d8cf8;
}

.media-status-queue.selected .media-status-queue-line-left {
    background-color: #1d8cf8;
}

.has-items .media-status-queue-line-left {
    background-color: #1d8cf8;
}

.add-item .media-status-queue-line-left {
    background-color: #1d8cf8;
}

.media-status-queue-line-right {
    width: 13px;
    height: 1px;
    margin-left: 2px;
    background-color: #777777;
    /*transition: .2s ease-in-out;*/
}

.media-status-queue-line-right:hover {
    background-color: #1d8cf8;
}

.media-status-queue-line-right:active {
    background-color: #1d8cf8;
}

.media-status-queue.selected .media-status-queue-line-right {
    background-color: #1d8cf8;
}

.has-items .media-status-queue-line-right {
    background-color: #1d8cf8;
}

.add-item .media-status-queue-line-right {
    background-color: #1d8cf8;
}

.media-status-queue-line-right.arrow-right {
    position: relative;
    top: 4px;
    width: 12px;
}

.media-status-queue-line-left-arrow-right {
    width: 0;
    height: 0;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-left: 3px solid #777777;
    z-index: 1;
    position: relative;
}
.media-status-queue-line-left-arrow-right:hover {
    border-left-color: #1d8cf8;
}

.media-status-queue-line-left-arrow-right:active {
    border-left-color: #1d8cf8;
}

.media-status-queue.selected .media-status-queue-line-left-arrow-right {
    border-left-color: #1d8cf8;
}

.has-items .media-status-queue-line-left-arrow-right {
    border-left-color: #1d8cf8;
}

.add-item .media-status-queue-line-left-arrow-right {
    border-left-color: #1d8cf8;
}


#media-controls .svg-icon.apple-halfbox {
    margin-right: 3px;
}

#media-controls .svg-icon.apple-halfbox .shape-fill,
#media-controls .svg-icon.delta-down .shape-fill {
    fill: #4f4f4f;
}

#control-buttons {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 91px;
padding-bottom:2px;
}

#control-buttons .control-button {
    display: inline-block;
    vertical-align: middle;
    cursor:pointer;
}

#control-buttons .control-button .shape-fill {
    fill: #9f9f9f;
    stroke: #9f9f9f;
}

#control-buttons .control-button.play-pause-toggle > div.hide { 
    display:none;
}


#control-buttons .skip-back .svg-icon {
    width: 20px;
    height: 14px;
    display: inline-block;
    vertical-align: middle;
}

#control-buttons .skip-back.enabled .shape-fill {
    fill: #2c2c2c;
    stroke: #2c2c2c;
}
#control-buttons .skip-back.enabled:active .shape-fill {
    fill: #616161;
    stroke: #616161;
}

#control-buttons .play-pause-toggle .play,
#control-buttons .play-pause-toggle .pause {
    display: none;
}

#control-buttons .play-pause-toggle .play.show,
#control-buttons .play-pause-toggle .pause.show {
    display: block;
}

#control-buttons .play-pause-toggle .svg-icon {
    width: 19px;
    height: 22px;
}

#control-buttons .play-pause-toggle.enabled .shape-fill {
    fill: #2c2c2c;
    stroke: #2c2c2c;
}

#control-buttons .play-pause-toggle.enabled:active .shape-fill {
    fill: #616161;
    stroke: #616161;
}

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

#control-buttons .play-pause-toggle .pause {
    margin-top: 2px;
}

#control-buttons .skip-forward .svg-icon {
    width: 20px;
    height: 14px;
    display: inline-block;
    vertical-align: middle;
}

#control-buttons .skip-forward.enabled .shape-fill {
    fill: #2c2c2c;
    stroke: #2c2c2c;
}
#control-buttons .skip-forward.enabled:active .shape-fill {
    fill: #616161;
    stroke: #616161;
}

#speaker-controls {
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    margin: 0;
}


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

    #speaker-controls {
        margin: 0 20px;
    }

}

/*#speaker-controls .volume-bar 
{
  -webkit-appearance: none;
  width: 100%;
  margin: 4.5px 0;
  padding:0 3px;
  background-color:transparent;
  max-width:200px;
}
#speaker-controls .volume-bar:focus
{
  outline: none;
}
#speaker-controls .volume-bar::-webkit-slider-runnable-track
{
  width: 100%;
  height: 4px;
  box-shadow: 1px 1px 1px rgba(0,0,0,.4) inset;
  background: #ababab;
  border-radius: 5px;
  border: 0 solid rgba(1, 1, 1, 0);
}
#speaker-controls .volume-bar::-webkit-slider-thumb
{
    height: 15.515152px;
    width: 15.515152px;
    -webkit-appearance: none;
    background-image:url(/site/images/svgs/apple.volume.thumb.svg);
    background-repeat:no-repeat;
    margin-top: -5px;
    margin-left:-1px;
}
#speaker-controls .volume-bar::-webkit-slider-thumb:active
{
    background-image:url(/site/images/svgs/apple.volume.thumb.active.svg);
}*/


/* added to center volume in header */

#control-panel #volume-bar-container {
    justify-content: center;
    display: flex;
    flex: 1;
}

#control-panel .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
}

#control-panel .volume-bar.show {
    display: flex;
}

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

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

#control-panel .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;
   /* border:none;*/
}

#control-panel .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;
    /*border: none;*/
}

#control-panel .volume-bar-area-ball {
    display: flex;
    border: solid 1px gray !important;
    width: 14px;
    height: 14px;
    min-width: 14px;
    min-height: 14px;
    background-color: white !important;
    border-radius: 10px;
    align-self: center;
    z-index: 5;
    position: relative;
    left: 2px;
    cursor: pointer;
    transition: .3s;
    /*box-shadow: 0px 3px 6px 2px rgba(163,157,163,0.25);*/
}

#control-panel .volume-bar-area-ball:active {
    background-color: gainsboro !important;
    cursor:pointer !important;
}

#control-panel .volume-bar-area-ball.resize {
    background-color: gainsboro !important;
    cursor:pointer !important;
}

#media-status-bar {
    flex: 10;
    background: linear-gradient(to bottom, #f1f1f1 0, #e6e6e6 100%);
    /*border:solid 1px #cecece;*/
    border-top: none;
    border-bottom: none;
    display: flex;
    justify-content: space-between;
    cursor: default;
}

#media-status-bar .svg-icon .shape-fill {
    fill: #646464;
}

#media-status-bar.media .media-art {
    width: auto;
    height: 45px;
    /*max-width: 45px;*/
}


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

    #media-status-bar .media-art {
        display: none;
    }
}

#media-status-bar.no-media .media-art {
    display: none;
}

#media-status-bar.no-media .artrela-logo {
    width: 38px;
    height: 38px;
    align-self: center;
    background-image: url(/site/icons/logo.png);
    background-size: contain;
    opacity: .2;
    transition-duration: 3s;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

#media-status-bar.media .artrela-logo {
    display: none;
}

#media-status-bar .playback-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

#media-status-bar .playback-info .main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    flex: 1;
    margin-bottom: 0px;    
    min-height: 43px;
    max-height: 43px;
}

#media-status-bar .playback-info .left {
    margin-left: 5px;
    min-width: 35px;
    align-self: flex-start;
    padding-top: 5px;
}

#media-status-bar .playback-info .left .playback-time {
    position: relative;
    top: 1px;
}
#media-status-bar .playback-info .left .icons {
    display: flex;
    align-items: center;
    margin-bottom: 7px;
}
/*#control-panel.url #media-status-bar .playback-info .left .icons {
    display:none;
}*/
/*#control-panel.url #media-status-bar .playback-info .left .playback-time {
    display: none;
}*/

    #media-status-bar .playback-info .left .minimize
    {
        display:none;
        height: 15px;
        width: auto;
        margin-right: 7px;
        transform: scale(.8);
    }
#media-status-bar .playback-info .left .minimize:hover .shape-fill {
    fill: #0D7AFF;
}

    #media-status-bar .playback-info .left .shuffle {
        height: 9px;
        width: auto;
        transform: scale(.95);
        cursor:pointer;
    }
#media-status-bar .playback-info .left .shuffle:hover .shape-fill
,#media-status-bar .playback-info .left .shuffle.selected .shape-fill
{ 
    fill: #0D7AFF;
}


#media-status-bar.no-media .playback-info .left .playback-time {
    display: none;
}

#media-status-bar.no-media .playback-info .description {
    display: none;
}

#media-status-bar .playback-info .description {
    margin-top:0px;
    margin-left:10px;
    margin-right:7px;
}
#media-status-bar .playback-info .description > .title {
    font-weight: bold;
   /* font-family: 'Nunito Medium', sans-serif;*/
    font-size:12px;
    text-align: center;
   /* color: #3f3f3f;*/
    padding-bottom: 2px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#media-status-bar .playback-info .description .supplemental-info {
    /*white-space: nowrap;*/
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: center;
    padding-bottom: 2px;
    padding-top:2px;
    max-height:24px;
}

#media-status-bar.buffering .playback-info .description .supplemental-info {
    display:none;
}

@media only screen and (max-width: 700px) {
    #media-status-bar .playback-info .description .supplemental-info {
        display: none;
    }
}

#media-status-bar .playback-info .description .supplemental-info2 {
    /*white-space: nowrap;*/
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: center;
}

#media-status-bar.buffering .playback-info .description .supplemental-info2 {
    display: none;
}

@media only screen and (max-width: 700px) {
    #media-status-bar .playback-info .description .supplemental-info2 {
        display: none;
    }
}

#media-status-bar .playback-info .description .field-group.buffer-progress 
{
    display:none;
    flex-direction: row;
}
#media-status-bar.buffering .playback-info .description .field-group.buffer-progress 
{
    display:flex;
}

#media-status-bar .playback-info .description .field-group.buffer-progress .title
{
    margin-right:5px;
}

#media-status-bar .playback-info .description .field-group.buffer-progress .content {
    display:flex;
    flex-direction: row;
    align-items: center;
}

#media-status-bar .playback-info .description .field-group.buffer-progress .content progress {
    -webkit-appearance: none;
    height: 5px;
}

#media-status-bar .playback-info .description .field-group.buffer-progress .content .display {
    margin-right:10px;
}

#media-status-bar .playback-info .description .field-group.buffer-progress .content progress::-webkit-progress-bar {
    background-color: #ccc;
}

#media-status-bar .playback-info .description .field-group.buffer-progress .content progress::-webkit-progress-value {
    background-color: #0D7AFF;
}

#media-status-bar .playback-info .right {
    margin-right: 5px;
    /*min-width: 50px;*/
    align-self: flex-start;
    padding-top: 0px;
}

#media-status-bar .playback-info .right .icons {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0px;
}

    #media-status-bar .playback-info .icons .repeat {
        height: 11px;
        width: auto;
        margin-left: 1px;
        margin-right: 6px;
        transform: scale(.80);
        position: relative;
        left: -2px;
        cursor:pointer;
    }
#media-status-bar .playback-info .icons .repeat:hover .shape-fill
,#media-status-bar .playback-info .icons .repeat.selected .shape-fill {
    fill: #0D7AFF;
}#media-status-bar .playback-info .icons .repeat.single .shape-fill {
    fill: red !important;
}

#media-status-bar .playback-info .right .icons .love {
    margin-right: 14px;
    cursor: pointer;
    position: relative;
    top: 3px;
}

#media-status-bar .playback-info .right .icons .love.show {
    display:block;
}

#media-status-bar.no-media .playback-info .right .icons .love {
}

#media-status-bar .playback-info .right .icons .love .icon {
    height: 9px;
    width: auto;
}

#media-status-bar .playback-info .right .icons .love .heart-outline .shape-fill {
    stroke: #646464;
}

#media-status-bar .playback-info .right .icons .love:hover .shape-fill,
#media-status-bar .playback-info .right .icons .love .checked .shape-fill {
    fill: #0D7AFF;
    stroke: #0D7AFF;
}

#media-status-bar .playback-info .right .remaining-time {
    text-align: right;
}

#control-panel.no-time #media-status-bar .playback-info .right .remaining-time {
    display:none;
}

#media-status-bar.no-media .playback-info .right .remaining-time {
    display: none;
}

#app-container .winform-options-button {
display:none;
}
/* begin position-level */
#media-status-bar #position-level {
    /*display: flex;*/
    /* flex: 1; */
    /* min-height: 7px; */
    /* max-height: 7px; */
    /* align-items: center; */
    /*cursor: pointer;
    position: relative;
    top: 0px;*/
}
#media-status-bar #position-level .position-level-bkgd {
    
    position: absolute;
    left: 0;
    right: 0;
    top: -4px;
    bottom: -4px;
}

#media-status-bar.no-media #position-level {
    display: none;
}

#media-status-bar #position-level-on {
    display: flex;
    background-color: #0d6efd;
    position: relative;
    height: 2px;
    top: 0px;
    transition-property: box-shadow;
    transition: .2s;
    border-radius: 5px;
}
/*
#media-status-bar #position-level:hover #position-level-on {
    box-shadow: 1px 1px 15px 1px #0d6efd;
}
*/
#media-status-bar #position-level-selector {
    display: flex;
    display: none;
    background: #0d6efd;
    width: 3px;
    height: 6px;
    position: relative;
    top: -2px;
    z-index: 10;
    border: solid 1px #0d6efd;
    transition: .2s;
    border-radius: 5px;
    left: -2px;
}
/*
#media-status-bar #position-level:hover #position-level-selector {
    box-shadow: 1px 1px 15px 1px #0d6efd;
}
*/
#media-status-bar #position-level-selector.hide {
    display: none;
}

#media-status-bar #position-level-selector:active {
    background: linear-gradient(#B1B1B1, #D9D9D9);
}

#media-status-bar #position-level-selector.select {
    background: linear-gradient(#B1B1B1, #D9D9D9);
}

#media-status-bar #position-level-off {
    display: flex;
    flex: 1;
    height: 2px;
    position: relative;
    top: 0px;
    background-color: rgba(100,100,100,.3);
}


/* end position-level */



#search-menu.hidden {
    display: none;
}

#search-menu .search-box {
    background-color: #fff;
    border: solid 1px silver;
    border-radius: 5px;
    min-height: 22px;
    display: flex;
    align-items: center;
    white-space:nowrap;
}

#search-menu .search-box.focused {
    border: solid 5px #99c0e9;
    box-shadow: rgba(0, 0, 0, .2) 0 0 5px 1px inset;
}

#search-menu .icons {
    margin: 0 5px;
    margin-top: 2px;
    cursor:pointer;
}

#search-menu .icon-magnifying-glass {
    transform: scaleX(-1);
    width: 12px;
    height: 12px;
}

#search-menu .icon-chevron-down {
    width: 7px;
    height: 7px;
    margin-right: 3px;
    margin-bottom: 3px;
}

#search-menu .icon-magnifying-glass .shape-fill,
#search-menu .icon-chevron-down .shape-fill {
    fill: #757575;
}

#search-menu .search-box input[type="search"] {
    margin: 0;
    padding: 0;
    border: none;
    font-size: 13px;
    flex: 1;
    margin-right: 10px;
    margin-top: 2px;
    color: #484848;
    width:100%;
}

#search-menu .search-box input[type="search"]:focus {
    outline: none;
}

#winform-controls {
    margin-left: 10px;
}


/* -- UNFINISHED MEDIA BAR SECTION -- */

#media-menu {
    padding: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #676767;
    font-size: 13px;
}

#media-menu.hidden {
    display: none;
}

#media-bar-menu-items {
    padding-top: 5px;
}

.media-bar-menu-item {
    display: flex;
    align-items: center;
    padding-top: 5px;
    padding-bottom: 5px;
}

.media-bar-menu-item input {
    margin-left: 10px;
}

.media-bar-menu-item>div {
    min-width: 16px;
    max-width: 16px;
    display: flex;
    justify-content: center;
    padding-left: 8px;
    padding-right: 8px;
}

.media-bar-menu-item img {
    max-height: 16px;
}

.media-bar-menu-item span {
    padding-right: 20px;
}

.media-bar-menu-item svg {
    width: 100%;
    max-height: 16px;
}



.app-form-container .options-price {
    display: flex;
}
#views .view.library section.library .subsection .loading-container > label {
    margin-left: 3px;
    font-style: italic;
}

.select-project-item .button-edit {
    padding:0 .5rem;
}
.select-project-item .button-delete {
    padding: 0 .5rem;
}

.spacer-container {
    /*margin-left: 3rem;
    margin-right: 3rem;*/
}
.spacer-header {
    font-size: 3rem;
    padding: 2rem 2rem;
    width: 100%;
    text-align: center;
    padding-bottom: 2rem;
    text-shadow: -1px 1px 2px rgb(0, 0, 0);
    font-weight: bold;
    padding-left: 6rem;
    padding-right: 6rem;
}
.project-layout-wizard-buttons {
    display: flex;
    flex-wrap: wrap;
    overflow: auto;
    padding: 0.5rem 1rem;
    justify-content: center;
    overflow: hidden;
}
.wizard-create-project .wizard-welcome-selection .project-layout-wizard-buttons {
    flex-wrap: nowrap;
    overflow: auto;
    /*padding-left: 31rem;*/
    width: 100%;
    border-bottom: solid 1px rgba(100,100,100,.3);
}
.wizard-create-project.wizard-page-sections .wizard-welcome-selection .project-layout-wizard-buttons {
    flex-direction: column;
    /*max-height: 60vh;
    overflow-y: auto;
    flex: 1;*/
}
.wizard-create-project.wizard-page-sections .project-layout-wizard-buttons button img {
    max-height: 28vh;
}
.project-layout-wizard-buttons button {
    padding: 2rem;
    width: 200px;
    height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.wizard-page.select-project .project-layout-wizard-buttons button {
    width: 400px;
    background-color: rgba(100,100,100,.3);
    margin: 2rem;
    border: solid 1px rgba(100,100,100,.3);
    border-radius: 5px;
}
.project-layout-wizard-buttons button:hover {
    transform: scale(1.05);
}
.project-layout-wizard-buttons button:focus {
    transform: scale(1.05);
}
.project-layout-wizard-buttons button.selected {
    opacity:1 !important;    
 /*   transform: scale(1.1) !important;*/
}
.project-layout-wizard-buttons button i.material-icons {
    font-size:5rem;
}
.project-layout-wizard-buttons button > div {
    font-size:2rem;
    padding-top:.5rem;
    white-space: normal;
}
.project-layout-wizard-buttons button.selected > div {
    color:#0d6efd;
}
.project-layout-wizard-buttons button > div > img {
    max-width:100px;
}
.library-group-wizard-container {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
}
.wizard-page {
    position: absolute;
    flex-direction: column;
    height: 100%;
    width: 100%;
    border-radius: 5px;
    border: solid 1px rgba(100,100,100,.3);
}
.project-layout-wizard-buttons .select-project-button i.fal {
    font-size: 3.8rem;
    padding-bottom: 12px;
    padding-top: 3px;
}

.wizard-create-project .project-layout-wizard-buttons button {
    width:unset;
    height:unset;
}
/*.wizard-create-project .project-layout-wizard-buttons > button {
    margin: 1rem;
    background-color: rgba(100,100,100,.3);
    border-radius: 6px;
}*/
.wizard-create-project.wizard-page-sections .project-layout-wizard-buttons button {
   /* width: 200px;
    height: 200px;*/
   position:relative;
}
.wizard-create-project.wizard-page-sections .project-layout-wizard-buttons button button {
    padding:1rem;
}
.wizard-create-project.wizard-page-sections .app-button {
    margin: 0;
    text-align: center;
    justify-content: center;
    font-size: 1.4rem;
}

.wizard-create-project .project-layout-wizard-buttons button img {
    max-width: 100%;
    max-height: 16vh;
    object-fit: contain;
    border-radius: 5px;
    box-shadow: 7px 7px 7px 0px rgba(0,0,0,.1);
    border: solid 1px dimgray;
    width: 300px;
}
.wizard-create-project .project-layout-wizard-buttons button:focus img {    
    border: solid 1px cornflowerblue;
}

.upload-files .links-container {
    padding-left:.5rem;
}


.app-paginator {
    padding-top: .5rem;
    padding-bottom: 0;
    padding-left: 1rem;
    padding-right: 1rem;
   /* border-top: solid 1px rgba(100,100,100,.3);*/
}
.live-view-footer.app-paginator {
    border-top:none;
}

.sections-container-bridge .sections-tabs {
    box-shadow: 0 16px 38px -12px rgb(0 0 0 / 56%), 0 4px 25px 0 rgb(0 0 0 / 12%), 0 8px 10px -5px rgb(0 0 0 / 20%);
}

#control-panel .media-status-user-container {
    margin-top: 5px;
    margin-right: 25px;
}
#control-panel .control-panel-menu-user {
    right: -12px;
}


/*.wizard-page {
    display:none;
}*/
.project-layout-wizard-content {
    padding: 0 3.5rem;
    font-size: 2rem;
    line-height: 1.4;
    border-top: solid 1px rgba(100,100,100,.3);
    padding-top: 1.5rem;
    color: whitesmoke;
}
.wizard-welcome .project-layout-wizard-buttons {
    padding: 1rem;
}
.wizard-page .select-button-container {
    margin: 0rem 3rem;
    text-align: center;
    font-size: 3rem;
    margin-bottom: 1.5rem;
}
.wizard-page .select-button-container button {
    font-size: 2rem;
    padding: 1rem 1rem;
    width: 100%;
    text-align: center;
    margin-top: 2rem;    
}
.wizard-page .select-button-container button div {
    width:100%;    
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
}
.wizard-page.wizard-page-create-sections .select-button-container button {
    margin-top: 0;
}
.wizard-page.wizard-page-create-sections .select-button-container {
    margin: 0;
    padding: 0;
}
.wizard-create-project .wizard-welcome-selection .project-layout-wizard-content {
/*    border-top: none;
    padding-top: 0px;*/
}
body.can-edit .library-groups .vail {
    left: 5rem !important;
}
body.edit-layout .library-groups .vail {
    left:35rem !important;
}
.library-groups-navigation {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
}
.library-groups-navigation .prev-button {
    padding-left:1rem;
    padding-top:1rem;
    font-size: 2rem;
}
.library-groups-navigation .close-button {
    position: absolute;
    top: 2px;
    right: 25px;
    font-size: 2rem;
    padding: 0.5rem;
}
.wizard-page .spacer-container {
    display: flex;
    background: linear-gradient(to bottom, #0d6efd 0%,#7db9e8 100%);
    padding-left: 1rem;
    padding-right: 1rem;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom: solid 1px rgba(100,100,100,.3);
    position: relative;
}
.wizard-page .spacer-container.pad-bottom {
    padding-bottom:2.5rem;    
}
.wizard-page .spacer-container.column {
    flex-direction:column;    
}
.wizard-page .prev-button {
    font-size: 3rem;
    position: absolute;
    top: 1.5rem;
    padding: 0.5rem;
}
.library-group-details .library-group-details-ex .controls {
    bottom: 0.5rem;
    right: 1rem;
}
.library-group-details .controls .buttons button.add-button label {
    margin-left:.5rem;
}
.library-group-details .controls .buttons.flex-end {
    justify-content:flex-end;
}
.wizard-page {
    display: none;
    opacity: 0;
    transition: .2s;
    transition-property: opacity;
}

.wizard-page.show {
    display: flex;
}

.wizard-page.reveal {
    opacity: 1;
}

.wizard-page.wizard-select-project-name .content-info > div {
    font-size: 2rem;
    padding-top: 0.5rem;
    white-space: normal;
}
.wizard-page.wizard-select-project-name > img {
    max-width: 100%;
    max-height: 155px;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 7px 7px 7px 0px rgb(0 0 0 / 10%);
    border: solid 1px dimgray;
}
.wizard-page.wizard-select-project-name input  {
    font-size: 2rem !important;    
    font-size: 2.4rem;
    padding: 1rem;
}
.default-content-project-info-container-icon {
    border: none !important;
    box-shadow: none !important;
    max-height: 75px !important;
    position: relative;
    top: -5px;
}
.default-content-project-info-container {
    display: flex;
    padding-right: 2rem;
    justify-content: center;
    align-items: center;
}
.default-content-project-info-container-ex {
    display: flex;
    padding-bottom: 0rem;
    align-items: center;
    padding-left: 0.5rem;
}
.default-content-project-info-container-ex.pad-bottom {
    padding-bottom:2rem;    
}
.app-form-field .pad-top {
    padding-top:2rem;    
}
.default-content-project-info-container-label {
    font-size: 2.2rem;
    font-weight:normal !important;
}
.default-content-project-info-container-step {
    min-width: 35px;
}
.default-content-project-info.icon-info {
    position: relative;
    top: 3px;
}
.project-layout-wizard-content .spacer-header-ex {
    font-size: 1.6rem;
    padding: 0.5rem;
    padding-top: 1.5rem;
    padding-bottom: 0;
}
.project-layout-wizard-content .spacer-header-ex.pad-bottom {    
    padding-bottom: 1rem;
}
.project-layout-wizard-content .spacer-header-ex.nopad-top {    
    padding-top: 0rem;
}
.project-layout-wizard-content .spacer-header-ex2 {
    font-size: 1.6rem;
    padding: 0.5rem;
    padding-top: 1rem;
    padding-bottom: 0;
}
.project-layout-wizard-content .spacer-header-required {
    color: red;
    font-size: .9rem;
    padding-left: 0.7rem;
    padding-top: 0.2rem;
}

.wizard-page.wizard-select-project-icon > img {
    max-width: 100%;
    max-height: 155px;
    object-fit: contain;
    border-radius: 5px;
    box-shadow: 7px 7px 7px 0px rgb(0 0 0 / 10%);
    border: solid 1px dimgray;
}
.default-content-project-info.image-info > div {
    font-weight: bold;
    font-size: 2.2rem;
}
.project-layout-wizard-content .select-project-icon {
    padding-top: 1rem;
}
.project-layout-wizard-content .select-project-icon img {
    max-height:250px;    
}
.project-layout-wizard-content .select-project-icon-buttons {
    display:flex;   
}
.project-layout-wizard-content .default-content-project-info.icon-info img {
    max-height:50px;
}
.wizard-select-project-publishUrl .app-form-select {
    font-size: 2rem !important;
    padding: 1rem;
}
.wizard-select-project-publishUrl .app-form-field-input {
    font-size: 2rem !important;
    padding: 1rem;
}
.wizard-select-project-publishUrl .publishLabel {
    font-style: italic;
    font-weight: bold;
}
.wizard-welcome-message-container {
    display:flex;
}
.wizard-welcome-message-container img {
    DISPLAY: block;
    MAX-HEIGHT: 150PX;
    PADDING-RIGHT: 2REM;    
}
.wizard-welcome-selection {
    overflow: auto;
    flex: 1;
}
.wizard-welcome-selection .library-items {    
   /* max-height: 66vh;*/
    overflow: auto;
}
.wizard-page-create-sections .library-items {
     max-height: 66vh;
}
.wizard-page-sections .wizard-welcome-selection {
    padding-top: 0rem;
}
/*.app-form-fields .app-form-field.form-check.useAsTrailer {
    margin-bottom: 0.5rem !important;
}*/
.app-form-fields .app-form-field.form-check.disableSubscriptionAccess {
    margin-bottom: 0.5rem !important;
}
.app-form-fields .app-form-field.form-check.useAsProduct {
    margin-bottom: 0.5rem !important;
}
.app-form-fields .app-form-field.form-check.useAsEvent {
    margin-bottom: 0.5rem !important;
}
.app-form-container.product-container {
    display: flex;
  /*  margin-right: 10px;*/
}
.app-form-container.product-setup {
    width: 100%;
    overflow: auto;
   /* margin-right: -10px;*/
   max-width:60rem;
}
.app-button.preview-link {
    padding: 0;
}
.app-button.preview-link i {
    font-size:2rem;
}

.app-tab-view.schedule {
    align-items: center;
}
.app-form-container.schedule-setup {
    max-width: 75rem;
    width: 100%;
    padding-top: 1rem;
}
.app-form-container.schedule-setup-ex {
    max-width: 60rem;
    width: 100%;
    padding-top: 0rem;
}
.app-form-container.schedule-setup-ex .app-form-field-date,
.app-form-container.schedule-setup-ex .app-form-field-time {
    max-width:unset;
}


.app-navigation-subitems .svg-container {
    flex: 1;
    min-width: 36px;
    max-width: 36px;
    max-height: 36px;
    display: flex;
}

.app-navigation-subitems .svg-container svg {
    flex: 1;
    min-width: 36px;
    max-width: 36px;
    min-height: 36px;
    max-height: 36px;
}

button.has-adaptiveBitrate i {
    color: rgba(100,100,100,1);
    color: white;
}

.metadata-window button.has-adaptiveBitrate i {
    position: relative;
    top: -1px;
    margin-right: 0px;
    color:whitesmoke;
}

.metadata-window button.encrypted i {
    position: relative;
    top: 0px;
    margin-right: 0px;
    color: #FFAB15 !important;
    font-size: 20px;
}

.subsection .selection-items.show {
    display:flex;
    flex-direction:column;
}

.client-consoles {
    display: flex;
    order: 3;
    height: 184px;
    background-color: black;
    border-top: solid 1px rgba(100,100,100,.3);
    display:none;
}
.client-consoles .logs-items {
}
.list-view-group-item-image2 .svg svg {
    width: 100%;
    max-height: 150px;
    flex: 1;
    vertical-align: middle;
}
.up-next-queue-vail {
    z-index: 500;
    transition:.2s;
    opacity:0;
}
/*.up-next-queue-vail.show {
    opacity: 1;
    opacity: .7 !important;
    opacity: .3 !important;
}*/
.sections-container-analytics .showBilledOnly {
    margin: 0.5rem !important;
}
.admin-screen .sections-page {
    height:unset;
}
.admin-screen .dms-on-demand-loader {
    background-color: rgba(0,0,0,.3);
}
.list-view-body.clients .list-view-group-item-image2 img.default-artwork {
    min-width: 160px;
    min-height: 160px;
}
.admin-screen .sections-page.revenue {
    height:100%;
}
.sections-page.analytics .section-header {
    padding-left: 1.5rem;
    font-size: 1.6rem;
    padding-top: 0.5rem;
}
.revenue-summary-totalMessage {
    padding-top: .7rem;
    font-size: 1rem;
}
.ct-grid-background {
    fill: aliceblue;
}
.stripe-login {
    position: absolute;
    left: 1rem;
    top: 1rem;
    width: calc(100% - 2rem);
    height: calc(100% - 2rem);
    background-color: black;
    border-radius: 5px;
    border: solid 1px rgba(255,255,255,.3);
}

.app-page-row-button {
    display: flex;
    align-items: center;
}


.dmsProjectChannelScheduleItem .media-item .no-item-selected {
    font-style: italic;
    padding: 0.5rem;
    margin-bottom: 2px;
}

.metadata-section .app-form-field-image-container .app-form-field-img {
    box-shadow:none !important;
}
.metadata-section .library-group {
    width: 260px;
    min-width: 260px;
    margin: 0;
    margin-top: 0.5rem;
    margin-bottom: 0.3rem;
}
.metadata-section .library-group .image {    
    width: 260px;
    height: 220px;
}
.metadata-section .library-group img {  
    max-width: 260px;
    max-height: 220px;
}
.dmsProjectLibraryPlaylist .app-form-select {
    width: fit-content !important;
}
.select-short-width .app-form-select {
    padding-right: 5px;
}
.app-form-field.select-short-width {
    max-width: 65px;
}
.smartFilterReleaseFromDate {
    max-width: fit-content;
}
.smartFilterReleaseFromDate .app-form-field-input.datepicker {    
    max-width: 190px;
}
.smartFilterReleaseToDate .app-form-field-input.datepicker {
    max-width: 190px;
}
.app-form-fields .app-form-field.form-check.check-only {
    margin: 0 !important;
    padding: 0 !important;
    position: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    margin-right: 0.5rem !important;
}
.smartFilterDayLabel {
    margin: 0 !important;
    padding: 0 !important;
    position: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 55px;
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
    font-size: 16px;
}
.smartFilterPlayCountState {
    max-width: 123px;
}

.form-window .app-form-field-media .app-form-field-autocomplete-selection {
    max-height: unset !important;
    height: unset !important;
    min-height: 1430%;
}

.dashboard-map-countries table .project-icon {
    padding-right:0;
}
.dashboard-map-countries table .dashboard-map-project-icon {
    max-width: 20px;
    max-height: 20px;
}

.dashboard-map-countries table .country-icon {
    padding-right: 0;
}
.dashboard-map-countries table .dashboard-map-country-icon {
    max-width: 20px;
    min-width: 20px;
    max-height: 20px;
    min-height: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    box-shadow: 0px 3px 6px 2px rgba(163, 157, 163, 0.3);
    box-shadow: 7px 7px 7px 0px rgb(0 0 0 / 10%);
}
.form-window-fields-section.disabled {
}
.form-window-fields-section.disabled .app-navigation-items {
    pointer-events: none;
    opacity: .5;
}

.project-versions-controller {
    font-size: .6rem;
    flex: 2;
}
.project-versions-controller > div {
    display: flex;
}
.project-versions-controller label {
    margin-right: .25rem;
}

body.show-admin-page {
    overflow:hidden !important;
}
.library-groups-selected-item.wizard-window.show {
    z-index: 15000 !important;
}
.library-groups-selected-item.wizard-window .app-form-field-image-container {
    min-height: 10rem;
}
.library-groups-selected-item.wizard-window .app-form-field > .drop-down .selected-item,
.library-groups-selected-item.wizard-window .app-form-field > .drop-down .items .item {
    font-size: 2rem !important;
}
.wizard-page .wizard-welcome-selection .spacer-header-ex2 {
    text-align: center;
    font-size: 2rem;
}
.wizard-page .wizard-welcome-selection .spacer-header-ex2.pad-bottom {
    padding-bottom:1rem;    
}

.wizard-page.wizard-select-project-stripeAccount .select-button-container button {
    margin-top: 1rem !important;
}

.dmsProjectAdminUploadSection {
    position: fixed;
    bottom: -3rem;
    right: 100px;
    width: 30%;
    height: 3rem;
    transition: .2s;
    min-width: 450px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border: solid 1px rgba(100,100,100,.3);
    box-shadow: 0 16px 38px -12px rgb(0 0 0 / 56%), 0 4px 25px 0 rgb(0 0 0 / 12%), 0 8px 10px -5px rgb(0 0 0 / 20%);
}
body.has-uploads .dmsProjectAdminUploadSection {
    bottom:0 !important;
}
.dmsProjectAdminUploadSection.expand {
    height:70%;
}
.dmsProjectAdminUploadSection .header {    
    padding: 1rem;
    border-bottom: 1px solid rgba(100,100,100,.3);
}
.wizard-project-section-collect-email .library-items .library-item {
    border-bottom: none;
    margin-bottom: 0.5rem;
    margin-left: 1rem;
    margin-right: 1rem;
}
.wizard-project-section-collect-email .project-layout-wizard-content {
    padding-top: 0rem;
}
.wizard-project-section-collect-email .library-items .library-item > button {
    padding-top: 0;
}
/*.wizard-project-section-collect-email .library-items .library-item.selected-item > button {
    background-color: #333 !important;
}
.wizard-project-section-collect-email .library-items .library-item.selected-item .library-item-details {
    background-color: #333 !important;
}*/

.wizard-project-section-banner .spacer-header {
    padding-bottom: 0rem;
}
.wizard-project-section-collect-email .spacer-header {
    padding-bottom: 0.5rem;
}
.wizard-project-section-collect-email .library-items-ex {
    margin-left: 0rem;
    margin-right: 0rem;
}
.wizard-project-section-carousel .spacer-header {
    padding-bottom: 0rem;
}
.wizard-project-section-carousel .library-items-ex {
    margin-left: 0rem;
    margin-right: 9.5rem;
}
.library-group-details-ex .controls {
    display:flex;
}
.library-items-ex .library-item {
    border-bottom: none !important;
}
/*.wizard-project-section-carousel .wizard-welcome-selection .library-items {
    max-height: 57vh;
}*/
.wizard-project-section-carousel-add .project-layout-wizard-content {
    height: 57vh;
    padding-top:0;
}
.wizard-project-section-carousel-add .library-items-ex .library-item.selected > button {
    background-color:transparent !important;
}
.wizard-project-section-carousel .select-button-container button {
    margin-top: 0rem;
}
.wizard-project-section-carousel .library-item-details .controls {
    height: 15px;
}
.wizard-project-section-carousel-add .drop-target {
    width: 100%;
    height: calc(100% - 0rem);
    display: flex;
    flex-direction: column;
    border: 5px #0d6efd;
    border-style: dashed;
    margin-top: .5rem;
}
.library-items-ex .library-item > button > .container {
    padding-top: 0;
}
.library-group-details .drop-target .image {
    background-color: transparent;
    height: 100%;
}
.library-group-details .drop-target .image .svg {
    font-size: 10rem;
}
.library-group-details .drop-target .image span {
    font-size: 3rem;
}
.wizard-project-section-carousel-add .wizard-welcome-selection .library-items {
    height: 55vh;
    border-top: solid 1px rgba(100,100,100,.3);
    border-bottom: solid 1px rgba(100,100,100,.3);
    margin-bottom: 1rem;
}
.project-layout-wizard-content .drop-container {
    height: 100%;
}
.has-images .project-layout-wizard-content .drop-container {
    position: absolute;
    left: 0;
    top: -10px;
    right: 0;
    bottom: 0;
    z-index: 5;
}
.has-images .project-layout-wizard-content .spacer-header-ex {
    display:none;
}
.has-images .project-layout-wizard-content .drop-target {
    background-color: rgba(0,0,0,.7) !important;
}
.wizard-welcome-selection .controls {
    order: 0;
    position: relative;
    top: 0;
    padding: 1rem;
    margin: 0;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
}
.wizard-welcome-selection .controls .select-files label {
    padding-left:.5rem;
}
.wizard-welcome-selection .controls .select-folder label {
    padding-left:.5rem;
}
.wizard-welcome-selection .app-form-field-autocomplete {
    padding: 0 3.5rem;
    padding-top: 0.5rem;
}

.wizard-welcome-selection .app-form-field-media .app-form-field-media-item {
    min-height: 50vh;
    display: flex;
    flex-direction: column;
}
.wizard-welcome-selection textarea {
    font-size: 1.8rem;
}
.wizard-welcome-selection input[type=text] {
    font-size: 1.8rem !important;
}
.app-form-field-media-item .has-video .drop-target, .app-form-field-media-item .has-image .drop-target {
    border-style: none;
    padding: 0;
    margin:0;
}

.app-form-field-media-item .drop-target .video {
    max-height: 200px;
    max-width: 200px;
    padding: 0;
    margin: 0;
    display: none;
}

.app-form-field-media-item .has-video .drop-target .video {
    display: unset;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    /*border: solid 1px #444;
    border-radius: 6px;*/
}
.app-form-field-media-item .drop-target .image {
 /*   background-color: transparent;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex: 1;
    margin: 1rem;
    padding: 1rem;
    border-style: dashed;
    position: absolute;
    top: 2rem;
    margin: 0;
    left: 1rem;
    bottom: 1rem;
    height: unset;
    right: 1rem;
    width: unset;*/
    background-color: transparent;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex: 1;
}
.app-form-field-media-item .has-video .drop-target .image {
    display: none;
}
.app-form-field-media-item .drop-target .image .svg {
    font-size: 10rem;
    font-size: 1.6rem;
    margin: 1rem 0;
}
.app-form-field-media-item .drop-target .image span {
    font-size: 3rem;
    font-size: 1.4rem;
    margin-left: 5px;
}
.app-form-field-media-item .drop-container {
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position:relative;
    text-align:center;
}
.app-form-field-media-item .drop-container .spacer-header-ex {
    font-size:1rem;    
   /* position: absolute;
    top: 0;*/
    text-align: left;
    padding: 0 1rem;
}
.app-form-field-media-item .drop-container.has-video .spacer-header-ex {
    display:none;
}
.has-images .app-form-field-media-item .drop-container {
    position: absolute;
    left: 0;
    top: -10px;
    right: 0;
    bottom: 0;
    z-index: 5;
}
.has-images .app-form-field-media-item .spacer-header-ex {
    display: none;
}
.app-form-field-media-item .drop-target {
    height: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-color: white;
    border: solid;
    margin: 1rem;
    margin-top: .5rem;
    padding: 1rem;
    border-style: dashed;
    /*position: absolute;
    width: 100%;
    height: 100%;*/
}
.has-images .app-form-field-media-item .drop-target {
    background-color: rgba(0,0,0,.7) !important;
}
.app-form-field-media-item .controls {
    order: 0;
    position: relative;
    top: 0;
    padding: 1rem;
    margin: 0;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
}
.app-form-field-media-item .controls .select-files label {
    padding-left:.5rem;
}
.app-form-field-media-item .controls .select-folder label {
    padding-left:.5rem;
}
.library-group-wizard-preview {

}


.select-section-item {
    /* height: fit-content; */
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 1.5rem 1rem;
    padding-right: 0px;
    background-color: transparent;
    transition: none;
    align-items: flex-start !important;
    margin-bottom: 0rem;
    border-bottom: solid 1px rgba(100,100,100,.3);
    margin-left: 1rem;
    margin-right: 1rem;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: .5rem;
    padding-top: 0.5rem;
    flex:1;
}
    .select-section-item .align-items-center {
        align-items: flex-start !important;
    }
    .select-section-item .app-navigation-icon {
        min-width: 250px;
        min-height: 140px !important;
        margin-left: 0.5rem;
        margin-right: 0.5rem;
        min-height: 80px;
        box-shadow: 0 1px 2px rgb(0 0 0 / 7%), 0 2px 4px rgb(0 0 0 / 7%), 0 4px 8px rgb(0 0 0 / 7%), 0 8px 16px rgb(0 0 0 / 7%), 0 16px 32px rgb(0 0 0 / 7%), 0 32px 64px rgb(0 0 0 / 7%);
        border: solid 1px rgba(100,100,100,.3);
        border-radius: 5px;
        overflow: hidden;
        background-size: cover;
    }
.app-navigation-item.select-section-item a {
    width: 100%;
    justify-content: flex-start;
    border-radius: 5px;
}
.app-navigation-item.select-section-item .app-data {
    flex: 1;
    padding-left: 1rem;
}
.app-navigation-item.select-section-item a .app-navigation-icon > .app-image {
    object-fit: contain !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 3;
    transition: .3s;
    max-width: unset;
    max-height: unset;
}
.app-navigation-item.select-section-item a label {
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    font-size: 1.6rem;
    padding: 0.5rem 0rem;
    flex: 1;
    padding-top: 0;
    text-shadow: -1px 1px 2px rgb(0 0 0);
    text-shadow: 0px 1px 1px rgb(0 0 0);
    padding-bottom: 0px;
}

.app-navigation-item.select-section-item a .app-description {
    display: flex;
    flex-direction: column;
    text-align: left;
    /* width: 100%; */
    padding: 1rem 2rem;
    padding-bottom: 0.7rem;
    padding-top: 0.2rem;
    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;
    text-shadow: -1px 1px 2px rgb(0 0 0);
    text-shadow: 0px 1px 1px rgb(0 0 0);
}

.form-window.select-projectLayout-view {
    z-index:6102;
}

.section-banner .body-header h1 .app-form-field-textarea textarea {
    text-align: center;
    font-weight: bold;
    font-size: 4rem;
    text-shadow: -1px 1px 2px rgb(0 0 0);
    text-shadow: 0px 1px 1px rgb(0 0 0);
    position: relative;
    top: -.8rem;
    line-height: normal;
}
.section-banner .body-header h2 .app-form-field-textarea textarea {
    text-align: center;
    font-weight: bold;
    font-size: 3.2rem;
    text-shadow: -1px 1px 2px rgb(0 0 0);
    text-shadow: 0px 1px 1px rgb(0 0 0);
    position: relative;
    top: -.8rem;
    line-height: normal;
}

.dmsProjectLibraryMetadataEventScheduleController {
    padding-top:1rem;
    padding-left:0px;
    position:relative;
    padding-bottom:15px;
}
.dmsProjectLibraryMetadataEventScheduleController .header {
    display:flex;
}
.dmsProjectLibraryMetadataEventScheduleController .title {
    flex:1;
    padding-bottom: 5px;
    padding-left: 3px;
    user-select: none;
    padding-left: 3px;
    text-transform: uppercase;
    font-size: .7rem !important;
    font-weight: 500;
    white-space: nowrap;
    color:white;
    transition:.2s;
}
.dmsProjectLibraryMetadataEventScheduleController.disabled .title {
    color:whitesmoke;
    opacity: .7 !important;
}
.dmsProjectLibraryMetadataEventScheduleController .delete-button {
    flex:1;
    background-color: firebrick;
    border: solid 1px red;
    border-radius: 5px;
    padding: 1px 7px;
    flex: 0;
    height: fit-content;
    position:relative;
    top:4px;
    min-width:32px;
    min-height:32px;
}
.dmsProjectLibraryMetadataEventScheduleController .delete-button i {
    position:relative;
    top:1px;
}
.dmsProjectLibraryMetadataEventScheduleController .copy-button {
    flex:1;
    background-color: #0d6efd;
    border: solid 1px deepskyblue;
    border-radius: 5px;
    padding: 1px 7px;
    flex: 0;
    height: fit-content;
    position:relative;
    top:4px;
    margin-left: .25rem;
    margin-right: .25rem;
    min-width:32px;
    min-height:32px;
}
.dmsProjectLibraryMetadataEventScheduleController .copy-button i {
    position:relative;
    top:1px;
}
.dmsProjectLibraryMetadataEventScheduleController .edit-button {
    flex:1;
    background-color: #0d6efd;
    border: solid 1px deepskyblue;
    border-radius: 5px;
    padding: 1px 7px;
    flex: 0;
    height: fit-content;
    position:relative;
    top:4px;
    margin-left: .25rem;
    min-width:32px;
    min-height:32px;
}
.dmsProjectLibraryMetadataEventScheduleController .edit-button i {
    position:relative;
    top:1px;
}
.dmsProjectLibraryMetadataEventScheduleController .header .add-button {
    position: absolute;
    right: 5px;
    top: -16px !important;
}
.dmsProjectLibraryMetadataEventScheduleController .items {
    border: solid 1px #444;
    color: whitesmoke;
    background-color: transparent;
    padding: 0.5rem;
    border-radius: 6px;
    font-size: 1.1rem;
    min-height: 40px;
    transition:.2s;
}
.dmsProjectLibraryMetadataEventScheduleController.disabled .items {
    background: rgba(100, 100, 100, .1);    
}
.dmsProjectLibraryMetadataEventItemController {
    display:flex;
    align-items:center;
}
.dmsProjectLibraryMetadataEventItemController > div {
    padding-right:7px;
}
.dmsProjectLibraryMetadataEventItemController .app-form-field-datetime {        
    max-width: 300px;
}
.dmsProjectLibraryMetadataEventItemController .app-form-field-select {   
    max-width: 350px;
}
.app-form-field-map {
    width:100%;
    height:200px;
}
.pac-container {
    z-index: 99000 !important;
    display: block !important;
}
body.dark-mode input[type=time] {
    padding: .45rem !important;
}
body.dark-mode input[type=datetime-local] {
    padding: .45rem !important;
}
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    color: whitesmoke;
}
.dmsProjectLibraryMetadataEventItemController .drop-down .selected-item {
    border: solid 1px #444;
    background-color: transparent;
}


.section-content.has-video .drop-target, .section-content.has-image .drop-target {
    border-style: none;
    padding: 0;
    margin: 0;
}

.card-event .drop-container {
    display: block;
    z-index: 10;
    color: whitesmoke;
}

.card-event .drop-container,
.dms-on-demand .drop-container,
.section-content .drop-container {
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    /* background-color: red; */
    z-index: 1;
    top: 0;
    right: 0;
    left: 0;
    padding: 3rem;
    display: none;
    top: -1rem;
    padding: 1.5rem;
    display:none;
}
body.can-edit .card-event .drop-container.show,
body.can-edit .dms-on-demand .drop-container.show,
body.can-edit .section-content .drop-container.show {
    display: block;
}
.card-event .drop-container .spacer-header-ex,
.dms-on-demand .drop-container .spacer-header-ex,
.section-content .drop-container .spacer-header-ex {
    font-size: 1rem;
}
.card-event .drop-container.has-video .spacer-header-ex,
.dms-on-demand .drop-container.has-video .spacer-header-ex,
.section-content .drop-container.has-video .spacer-header-ex {
    display: none;
}
.has-images .card-event .drop-container,
.has-images .dms-on-demand .drop-container,
.has-images .section-content .drop-container {
    position: absolute;
    left: 0;
    top: -10px;
    right: 0;
    bottom: 0;
    z-index: 5;
}
.has-images .card-event .spacer-header-ex,
.has-images .dms-on-demand .spacer-header-ex,
.has-images .section-content .spacer-header-ex {
    display: none;
}
.card-event .drop-target,
.dms-on-demand .drop-target,
.section-content .drop-target {
    height: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-color: white;
    border: solid;
    /*margin: 1rem;
    padding: 1rem;*/
    border-style: dashed;
}
.has-images .card-event .drop-target,
.has-images .dms-on-demand .drop-target,
.has-images .section-content .drop-target {
    background-color: rgba(0,0,0,.7) !important;
}

.section-video .logo input {
    text-align: center;
    font-size: 4rem !important;
    text-shadow: -1px 1px 2px rgb(0 0 0);
    text-shadow: 0px 1px 1px rgb(0 0 0);
    position: relative;
    top: 0rem;
}

.section-video .title input {
    text-align: center;
    font-weight: bold;
    font-size: 3.6rem !important;
    text-shadow: -1px 1px 2px rgb(0 0 0);
    text-shadow: 0px 1px 1px rgb(0 0 0);
    position: relative;
    top: 0rem;
}


.section-video .card-message textarea {
    text-align: center;
    font-weight: bold;
    font-size: 3.2rem;
    text-shadow: -1px 1px 2px rgb(0 0 0);
    text-shadow: 0px 1px 1px rgb(0 0 0);
    position: relative;
    top: -1.5rem;
    min-height: 200px;
}

.section-video .card-message-ex textarea {
    text-align: center;
    font-size: 2.2rem;
    text-shadow: -1px 1px 2px rgb(0 0 0);
    text-shadow: 0px 1px 1px rgb(0 0 0);
    position: relative;
    top: -1.5rem;
    min-height: 400px;
}

.section-products .title h1 textarea {
    text-align: center;
    font-weight: bold;
    font-size: 3.4rem;
    position: relative;
    top: -.5rem;
}

.section-collect-email .title textarea {
    text-align: center;
    font-weight: bold;
    font-size: 3rem;
    color: black !important;
    position: relative;
    top: .1rem;
    min-height: 150px;
}

.section-collect-email .message textarea {
    text-align: center;
    font-size: 1.6rem;
    color: black !important;
    position: relative;
    top: .1rem;
    min-height: 100px;
}

.header-ex .logo input {
    font-size: 1.3rem !important;
    position: relative;
    top: 0rem;
   /* text-transform:uppercase;*/
}

.footer .app-form-field-text {
}
.footer .contact-email input {
    font-size: 1rem !important;
    min-width: 300px;
    text-align: right;
}
.footer .contact-phone input {
    font-size: 1rem !important;
    min-width: 300px;
    text-align: right;
}

.card-event .card-title .app-form-field-input {
    font-weight: bold;
    font-size: 2rem;
    position: relative;
    top: -.1rem;
}
.card-event .card-text1 .app-form-field-input {
    font-size: 2rem;
    position: relative;
    top: -.1rem;
    font-weight: 500;
    font-size: 1.8rem;
}
.card-event .card-text2 .app-form-field-input {
    font-size: 2rem;
    position: relative;
    top: -.1rem;
    font-weight: 500;
    font-size: 1.4rem;
    color: #FFAB15 !important;
}
.card-event .card-text3 .app-form-field-input {
    font-size: 2rem;
    position: relative;
    top: -.1rem;
    font-weight: 500;
    font-size: 1.4rem;
    color: #FFAB15 !important;
}
.card-event .card-text4 .app-form-field-input {
    font-size: 2rem;
    position: relative;
    top: -.1rem;
    font-weight: 500;
    font-size: 1.4rem;
    color: #FFAB15 !important;
}
.card-event .card-price .app-form-field-input {
    font-size: 2rem;
    position: relative;
    top: -.1rem;
}

.section-products .products .card-body .card-edit-date input {
    font-weight: 500 !important;
    font-size: 1.4rem !important;
    color: #FFAB15 !important;
}

#metadata-section .app-form-field.description,
#metadata-section .app-form-field.tagline {
    font-size: 2rem;
}
.app-form-field-media-item .library-group {
    width: 100% !important;
    height: 100% !important;
    cursor:default !important;
}
.app-form-field-media-item .library-group .image {
    width: 100% !important;
    height: 100% !important;
}
.app-form-field-media-item .library-group img {
    max-width:unset !important;
    max-height: unset !important;
}

.app-data-info {
    display: flex;
    align-items: center;
}

.form-window-body .drop-down .items .item {
    opacity:.9;
}

.app-view.channel-fields .app-form-header .app-form-image-container.has-image img,
.app-view.playlist-fields .app-form-header .app-form-image-container.has-image img {
    box-shadow: none;
}

.project-layout-page-info.has-image .project-layout-page-title .app-form-field-input {
    font-size: 2.2rem;
    font-weight: 900;
}
.project-layout-page-info.has-image .project-layout-page-message .app-form-field-input {
    font-size: 2rem;
}

.dms-on-demand.admin-screen .dms-on-demand-actions .dms-on-demand-form-close {
    margin-left: 1.5rem;
}

.app-form-div.label6 {
    padding-top: 7px;
    display: flex;
    z-index: 1;
    position: relative;
    left: 0px;
    align-items:center;
}
.app-form-div.label6.pad-top {
    padding-top: 0px;
    padding-bottom: 3px;
}
.app-form-div.label6 > div {
    margin-right:.5rem;    
}
.app-form-div.label6 > button {
    margin-right:.25rem;       
    text-shadow: -1px 1px 2px rgba(0, 0, 0, .3);
}


.app-tab-view.product .app-form-field-image-container .app-form-field-img {
    object-fit:contain;
}

.media-fields .app-tab-view.description textarea,
.media-fields .app-tab-view.tagline textarea {
    font-size: 1.4rem;
    line-height: 1.4;
}
.media-fields .app-tab-view.preview .preview-container {
    margin-bottom:0 !important;
    overflow:hidden;
}

.form-window-content .media-status-search-input {
    margin-right: 1rem;
    font-size: 1rem;
    margin-top: 0;
    margin-bottom: 0rem;
    position: relative;
    top: -2px;
}
.form-window-content .media-status-search-input input {
    font-size: 1.2rem !important;
}
.list-view-group-item-duration {
    position: absolute;
    right: 1rem;
    bottom: 0.5rem;
    padding: 0.25rem 0.75rem;
    background-color: rgb(0,0,0,.7);
    color: white;
    height: fit-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
    border-radius: 6px;
}
/*.app-form-field-media-item .video-container {
    width: 100%;
    height: 100%;
}*/

/*.app-form-field-media-item .drop-container .spacer-header-ex {
    margin-left:1rem;
}
*/
.app-form-field-input.colorpicker {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-left:none !important;
}
.app-form-field-color .sp-original-input-container .sp-add-on {
    border-top-left-radius: 6px !important;
    border-bottom-left-radius: 6px !important;
    border: solid 1px #444;
    border-right: none;
    overflow: hidden;
}
.app-form-field-color .sp-original-input-container .sp-add-on .sp-colorize {
    border-radius: 1px !important;
    border-color: #444;
}
.app-form-field-color.focused .sp-original-input-container .sp-add-on {
    border-color: #0d6efd !important;
}
.project-layout-menu-buttons > button {
    font-size: .6rem;
}
.project-layout-menu-buttons .material-icons {
    font-size: 23px;
}
.form-window .form-window-content {
    font-family: "Montserrat"
}
.project-layout-menu-buttons > button i.fa,
.project-layout-menu-buttons > button i.fad {
    font-size: 18px;
    margin-bottom: 3px;
}

.select-section-item .app-navigation-icon {
    min-width: 250px;
    min-height: 162px !important;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    box-shadow: none;
    border: none;
    overflow: visible;
    background-size: contain;
    background-repeat: no-repeat;
}
.form-window .form-window-content .content > .container > section ul {
    padding: 0;
}
body.dark-mode .form-window-content .form-window-footer {
    border-color: rgba(100, 100, 100, .3);
}
.subsection.media-item-types .app-navigation-item > .app-anchor.selected .app-data-info .app-button {
    border-color: #0d6efd;
}
.form-window-content .app-navigation-item .button-delete .material-icons {
    font-weight: 700;
}
.form-window-content .app-navigation-item .selected .btn.text-info,
.form-window-content .app-navigation-item .selected .btn.text-danger {
    color: white !important;
}
.form-window-footer .app-icons i.material-icons {
    font-size: 1.4rem !important;
}
.form-window-body .drop-down .items {
    width: 100% !important;
}
.form-window-body .app-form-field.form-check .app-form-field-label {
    padding-left: 8px;
    margin-left: -2px;
}
.app-form-field.form-check .app-form-field-label {
    cursor:pointer;
}
.form-window-body .app-form-field.form-switch .app-form-field-label {
    padding-left: 0.5rem;
}
.drop-down .selected-item {
    min-height: 44px;
}
.form-window-body .drop-down .selected-item {
    border-color: #444 !important;
}
.form-window-body .app-navigation-item > a .app-label {
    margin-left: 0rem !important;
}
.form-window-body .subsection header > .form-check .custom-checkbox {
    top: -16px;
    margin-left: 0px;
}
.form-window-body .subsection.media-item-types .app-navigation-item > .app-anchor > .form-check > .custom-checkbox {
    top: -4px;
}
.form-window-body .subsection header > .app-form-field.form-check .app-form-field-label {
    margin-left: -7px;
}
.form-window-body .project-quick-access-subitem-icons i.material-icons {
    font-size: 24px !important;
    top: 3px;
}
.form-window-body .no-spinner .app-navigation-item > a .app-navigation-spinner {
    margin: 0;
}
.form-window-body .project-quick-access-subitem-icons {
    margin-right: 0.5rem;
}
.form-window-body .subsection .app-navigation-subitems .app-navigation-item > a {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}
.form-window-body a.selected .project-quick-access-subitem-icons .delete-icon-button {
    color: white !important;
}
.form-window-body .app-navigation-item > a .app-label {
    font-size: 1.2rem;
}
.form-window-body .project-layout-menu .form-window-content {
    box-shadow: none !important
}

.navbar-usage-container-ex {
    align-items: center;
    justify-content: center;
    text-align: center;
}
.navbar-usage-container-ex .navbar-usage-info {
    display: flex;
    /* flex-direction: column; */
    align-items: center;
    justify-content: center;
}
.navbar-usage-container-ex .navbar-usage-item {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    text-align: center;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
}
.navbar-usage-container-ex .navbar-usage-label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    align-items: center;
}
.navbar-usage-container-ex .navbar-usage-item span,
.navbar-usage-container-ex .navbar-usage-item i {
    padding: 0 !important;
    margin: 0 !important;
    width: fit-content;
    font-size:.6rem !important;
    padding-bottom: 2px !important;
}
.navbar-usage-container-ex .navbar-usage-bar {    
    width: 8px;
    height: 100px;
}
.navbar-usage-container-ex .navbar-usage-bar-used,
.navbar-usage-container-ex .navbar-usage-bar-available {  
    width: 8px;
}

.drop-container .delete-icon-button {
    position: absolute;
    right: 0.5rem;
    top: 0.5rem;
    color: red;
    font-weight: 600;
    display:none;
}
.drop-container.has-video .drop-container .delete-icon-button {
    display: block;
}
.drop-container.has-help .drop-container .delete-icon-button {
    display: none !important;
}
.drop-container.no-delete .drop-container .delete-icon-button {
    display: none !important;
}

#metadata-section .search-section.smart-filter .app-form-body {
    padding-bottom:10rem !important;
}

.app-form-field-time-container {
    position:relative;
}
.app-form-field-date-container i,
.app-form-field-time-container i {
    padding: 0.25rem;
    padding-left: 0.75rem;
}
.app-form-field.disabled .app-form-field-date-container i,
.app-form-field.disabled .app-form-field-time-container i {
    opacity: .7 !important;
}
.app-form-field-date-container,
.app-form-field-time-container {
    border: 1px solid rgba(100, 100, 100, .3);
    border-radius: 5px;
    padding: 0 0.5rem;
    margin-right: 0.5rem;
    margin-left: 0.5rem;
    /* background-color: rgba(0, 0, 0, .2); */
    position: relative;
    top: 2px;
    transition: .3s;
    /* width: 20rem; */
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    /* background-color: rgb(0, 0, 0, .3) !important; */
    margin: 0;
    margin-top: 0.75rem;
    margin-bottom: 1.25rem;
    border-color: rgba(100, 100, 100, .5) !important;
    padding-left: 0.75rem;
    margin-right: 0.5rem;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 0px;
    margin: 0px;
    top: 0px;
}
.app-tab-view.metadata .app-form-field-date,
.app-tab-view.metadata .app-form-field-time {
    max-width:unset;
}
body.dark-mode .app-form-field-label {
    color: white !important;
    transition: .2s;
}
body.dark-mode .light-mode .app-form-field-label {
    color: black !important;
}
.app-form-field-label {
    padding-bottom: 5px;
    padding-left: 3px;
    user-select: none;
    padding-left: 3px;
    text-transform: uppercase;
    font-size: .7rem !important;
    font-weight: 500;
    white-space: nowrap;
}
/*.app-form-field {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0;
    padding-top: 0;
    padding-bottom: 0.7rem;
    flex: 1;
    position: relative;
}*/
.app-form-fields .app-form-field.form-check {
    margin-bottom: 0.5rem !important;
}
.app-form-field-input.datepicker {
    border:none !important;
}
.app-form-field.useSubtitleDelay,
.app-form-field.subtitleDelay {
    padding-left: 0.75rem !important;
}
#playerControls.trim-time {
    position: relative;
    background: unset;
    padding-top: 0rem;
    padding-bottom: 0.5rem;
}
.app-form-fields .app-form-field.form-check.add-padding {
    padding-left: .75rem !important;
}

.subsection.media-item-body .app-tab-view {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.subsection.media-item-body .app-tab-view .app-form-field.aiImage {
    width: 100%;
    flex: 2;
}
.subsection.media-item-body .app-tab-view .app-form-field.aiModel {
    flex: 0;
}
.app-action-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0rem 1rem;
    padding-bottom: 0.5rem;
}

.ai-text-options {
    margin: 0 .1rem;
}
.app-form-field-textarea.aiImage textarea:disabled,
.app-form-field-textarea.aiImage textarea:read-only {
    color: white !important;
    border: solid 1px #444 !important;
    border: solid 1px rgba(100, 100, 100, .5) !important;
    background-color: transparent !important;
}
.app-form-field.ai-max-tokens {
    margin: 0 .5rem;
}
.app-form-field.ai-temperature {
    margin: 0 .5rem;
}
.app-form-field.ai-topP {
    margin: 0 .5rem;
}
.app-form-field.ai-topK {
    margin: 0 .5rem;
}
.app-form-field .info-control {
    font-size: .7rem;
    line-height: 0px;
    max-height: 0px !important;
    position: relative;
    top: 6px;
}
.form-check.useTrimTime .trimStartTime {
    margin-right: 1rem;
    margin-left: 1.5rem;
    max-width: 150px;
}
.form-check.useTrimTime .trimEndTime {
    max-width: 150px;
}
.video-preview-container.trim-time {
    background-color: rgba(0, 0, 0, .8) !important;
}
.subsection.media-item-body .page {
    padding: .5rem;
    padding-top: .25rem;
    font-size: 1.3rem;
}
.subsection.media-item-body .page .page-message {
    color: whitesmoke;
}
.subsection.media-item-body .page .page-options {
    padding-top: 1rem;
}
.app-form-field.form-radio .custom-checkbox .checkmark {
    border-radius: 50%;
}
.subsection.media-item-body .page .page-options .form-radio .app-form-field-label {
    margin: 0;
    font-size: 1rem !important;
    text-transform: none;
    color: inherit !important;
}
.app-form-fields .app-form-field.form-check.useTrimTime .app-button-icon {
    margin-left:1rem;
    padding:.5rem 1rem;
}
.page-position-container {
    display: flex;
    color:whitesmoke;
}
.page-position-container .page-position-label {
    padding-right: .5rem;
}
.subsection.media-item-body .page .page-options .app-button.play,
.subsection.media-item-body .page .page-options .app-button.pause {
    color: whitesmoke;
}
/*#playerControls.trim-time #position-level-buffer {
    display:none;
}*/
.app-view.app-tab-view.trailer #MediaTrimTimeWindow {
    width: 410px;
    position: absolute;
    top: 0;
    bottom: 0;
    height: calc(100% + 14px);
    z-index: 5;
    left: -500px;
    transition: .2s;
    border-radius: 0;
    margin-left: -8px;
    margin-top: 0px;
    background-color: transparent !important;
    text-align: left;
}
.app-view.app-tab-view.trailer #MediaTrimTimeWindow.show {
    left: 0;
}
.app-view.app-tab-view.trailer .app-form-field-media .app-form-field-media-item {
    overflow: hidden;
}
.subsection.media-item-body .page .page-options .form-radio .app-form-field-label {
    white-space: normal !important;
}
.app-form-field-media-item .drop-container .drop-target {
    left:0px;
    transition:.2s;
}
.MediaEventScheduleWindow .app-form-field-media-item .drop-container .drop-target .video-background {
    background-color: black;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}
.app-form-field-media-item .drop-container .drop-target .video-container {
    display: none;
    position: initial;
}
.app-form-field-media-item .drop-container.has-video .drop-target .video-container {
    display: flex;
}
.app-form-field-media-item .drop-container.has-video.can-show-help .drop-target {
    left: 0rem;
    position: absolute;
    right: 0rem;
}
.app-form-field-media-item .drop-container.has-video.has-help .drop-target {
    left: 410px;
}
.subsection.media-item-body .page .page-options.center {
    text-align:center;
}
.subsection.media-item-body .page .page-options.center .btn.play i.material-icons,
.subsection.media-item-body .page .page-options.center .btn.pause i.material-icons {
    font-size: 8rem;
}
.page-position-container.large {
    font-size: 2rem;
    padding-top: 2rem;
}
.subsection.media-item-body .page .page-options .app-form-field.form-check {
    margin-bottom: 0rem !important;
}

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

    .subsection.media-item-body .page .page-options.center .btn.play i.material-icons,
    .subsection.media-item-body .page .page-options.center .btn.pause i.material-icons {
        font-size: 5rem;
    }
    .page-position-container.large {
        font-size: 1.4rem;
        padding-top: 1.5rem;
    }
}

.app-view.app-tab-view.trailer #MediaTrimTimeWindow .form-window-header {
    display: none;
}
.app-view.app-tab-view.trailer #MediaTrimTimeWindow > .content {
    margin-top: 1rem !important;
}
#player-events {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    bottom: 0;
    z-index: 601;
    transition: .2s;
    display:none;
}
.preview-player-events-icon-button {
    position: absolute;
    opacity:.3;
}
.preview-player-events-icon-button .material-icons {
    font-size:16px !important;
}
.preview-player-events-icon-button:hover,
.preview-player-events-icon-button:focus {
    opacity: .7 !important;
}
.project-layout .form-window-fields-section

.preview-container.show-player-events .preview-player-events-icon-button {
    opacity: 1;
}
.preview-player-events-data {
    background-color: transparent;
    width: 100%;
    height: 100%;
    flex: 1;
    overflow: hidden;
    padding: .5rem;
}
.preview-container.show-player-events .preview-player-events-data {
    background-color: black;
}
.preview-container.show-player-events #player-events {
    width: 20rem;
    opacity: 1;
}
.preview-container #player {
    transition: .2s;
    width: 100%;
}
.preview-container.show-player-events #player {
    left: 20rem;
    width: calc(100% - 20rem);
}
.preview-player-events-data.project-layout .form-window-fields-section.slim-header {
    padding-top: 1rem;
    display:none;
}
.preview-container.show-player-events .preview-player-events-data.project-layout .form-window-fields-section.slim-header {
    display: block;
}
.preview-player-events-data.project-layout .form-window-fields-section.slim-header .subsection-header header > label {
    white-space:nowrap;
}
.preview-player-events-data.project-layout .form-window-fields-section.slim-header .select-project-item.app-navigation-item > a .app-label {
    font-size: 1rem;
}
.preview-player-events-data.project-layout .form-window-fields-section.slim-header .select-project-item.app-navigation-item > a .app-navigation-spinner {
    display: none;
}
.preview-player-events-data.project-layout .form-window-fields-section.slim-header .subsection.media-item-types .app-navigation-item > .app-anchor {
    transition: .2s;
    outline: none;
    border: none !important;
    flex-wrap: nowrap;
}
.preview-player-events-data.project-layout .form-window-fields-section.slim-header .subsection.media-item-types .app-navigation-item > .app-anchor:hover,
.preview-player-events-data.project-layout .form-window-fields-section.slim-header .subsection.media-item-types .app-navigation-item > .app-anchor:focus, {
    border:none !important;
}
.preview-player-events-data.project-layout .form-window-fields-section.slim-header .app-navigation-item > a:hover,
.preview-player-events-data.project-layout .form-window-fields-section.slim-header .app-navigation-item.select > a,
.preview-player-events-data.project-layout .form-window-fields-section.slim-header .app-navigation-item.selected > a {
    background-color: rgba(200, 200, 200, 0.2);
}
.preview-player-events-data.project-layout .form-window-fields-section-body .library header {
    margin-right: 2px;
}

.PlayerInteractiveWindow .form-window-content .content > .container > section > .media-item-body {
    flex-direction: row;
}

.PlayerInteractiveWindow .form-window-content .content > .container > section > .media-item-body .interactive-options {
     min-width: 30rem;  
    max-width: 30rem;  
    padding: .5rem;
    padding-right: 2rem; 
    overflow: auto;
    padding-bottom: 20rem;
}

.PlayerInteractiveWindow .form-window-content .content > .container > section > .media-item-body .interactive-preview{
    padding: 1rem;
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow:hidden;
}
.PlayerInteractiveWindow .app-form-field-image-container .app-form-field-img {
    max-width:20rem;
    object-fit:contain !important;
}
.PlayerInteractiveWindow .form-window-content .content > .container > section > .media-item-body .interactive-video {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: 1s;
    -o-transition: 1s;
    -webkit-transition: 1s;
}
.PlayerInteractiveWindow .form-window-content .content > .container > section > .media-item-body .interactive-video.show {
    opacity: 1;
}
.PlayerInteractiveWindow .form-window-content .content > .container > section > .media-item-body .interactive-video a {
    padding: 1rem;
    color:white;
    font-size:2rem;
    color: #FFAB15 !important;
}
.PlayerInteractiveWindow .form-window-content .content > .container > section > .media-item-body .interactive-preview-button {
    position: absolute;
    color: white;
}
.PlayerInteractiveWindow .form-window-content .content > .container > section > .media-item-body .interactive-preview-button .material-icons {
    font-size:3rem;
}
.PlayerInteractiveWindow .form-window-content .content > .container > section > .media-item-body .interactive-preview-play-position {
    padding: .5rem;
    font-size: 1.4rem;
}

.form-window .form-window-content .content > .container > section > .subsection > header.header {
    display: none !important;
}
.form-window .form-window-content .content > .container {
    padding: 0rem 1rem;
    padding-bottom: 1rem;
}
/*
    TODO: add this back in
body.can-edit.edit-layout .editable-content {
    border: solid 0px transparent;
    transition: .2s;
    padding: 0rem;
}
body.can-edit.edit-layout .editable-content.focused {
    padding: .5rem;
    border-color: #0d6efd;
    border-style: dashed;
    border-width: 6px;
}
body.can-edit.edit-layout .editable-content:hover {
    transition-delay: .3s;
    padding: .5rem;
    border-color: #0d6efd;
    border-style: dashed;
    border-width: 6px;
    cursor: text;
}
*/
.section-products .products .title {
    position: relative;
    left: 0;
    transition: .2s;
    text-align: center;
}
/*body.can-edit.edit-layout .section-products .products .title {
    left: 3.5rem;
}*/

body.mobile-size .dms-on-demand.project-base-screen {
    width: 428px;
    max-width: 428px;
}

.app-form-container.schedule-container .schedule-date-container {
    display:flex;
 /*   padding-bottom:1rem;*/
}
.app-form-container.schedule-container .app-form-field-date:first-of-type {
    margin-right:1rem;
}

body.dark-mode .app-form-field-date-container input.datepicker[disabled], body.dark-mode .app-form-field-date-container input.datepicker[readonly],
body.dark-mode .app-form-field-time-container input[disabled], body.dark-mode .app-form-field-time-container input[disabled] {
    background-color: unset;
}
.app-form-field-time-container .app-form-field-input {
    border: none !important;
}

body.dark-mode .app-form-field-date.disabled .app-form-field-date-container,
body.dark-mode .app-form-field-time.disabled .app-form-field-time-container {
    background: rgba(33, 37, 41, .3);
    background: rgba(100, 100, 100, .1);
}
body.dark-mode .btn-dark.disabled {
    background: rgba(100, 100, 100, .1);
}
.app-form-div.label6 > button.needs-approval {
    margin-left: .3rem !important;
    color: #FFAB15 !important;
}
.app-form-div.label6 > button.needs-approval i {
    font-size: 19px !important;
}
.app-view .app-form-container.app-form-actions {
    padding-bottom:.5rem;
}
.app-tab-view .app-form-field-image-container .app-form-field-img {
    /*THIS IS BEING DONE BECAUSE THE DISPLAYED IMAGE IS DISTORTED IF TOO SMALL AND GIVES BAD IMPRESSION*/
    /*object-fit: none;*/
    /*UNDOING AGAIN BECAUSE IMAGES THAT ARE LARGER THAN AVAILABLE SIZE ARE BEING CUT OFF*/
}
.app-tab-view .app-form-field.app-form-field-textarea.comments .app-form-field-input {
    min-height: 85px;
    padding-top: .5rem !important;
    padding-bottom: .5rem !important;
}
.upload-section-file-buttons .btn.text-info {
    margin-right:.5rem !important;
}
.app-view .app-label-span.app-form-field-descriptioneventChannelState,
.app-view .app-label-span.app-form-field-descriptioneventChannelUrl,
.app-view .app-label-span.app-form-field-descriptioneventChannelKey {
    padding: 0 0.25rem;
    padding-top: .0rem;
    padding-bottom: .0rem;
}
.app-view .app-label-span.app-form-field-descriptioneventChannelState {
    padding-top: .5rem;
}
.app-view .app-label-span.app-form-field-descriptioneventChannelUrl {
    padding-top: .25rem;
}
.app-view .app-label-span.app-form-field-descriptioneventChannelKey {
    padding-top: .25rem;
    padding-bottom: .5rem;
}

.app-form-field-time-menu {
    position: absolute;
    box-shadow: 0 5px 15px -5px rgba(0, 0, 0, .5);
    color: #fff;
    background: inherit;
    border: 1px solid rgba(100, 100, 100, .3);
    top: 45px;
    z-index: 5;
    display: flex;
    max-height: 250px;
    overflow: hidden;
}
.app-form-field-time-menu-items {
    display: flex;
    flex-direction: column;
    max-height: 250px;
    overflow-y: auto;
    overflow-x: hidden;
}
/*.app-form-field-time-menu-items.time-zones {
    display: none;
}*/
.app-form-field-time-menu-item {
    padding: .25rem .75rem;
    border: solid 1px transparent;
    border-radius: 6px;
}
.app-form-field-time-menu-item.selected {
    background-color: #0d6efd !important;
    border-color: #0d6efd;
}
.app-label-span .copy-button {
    margin-left:.5rem;
}
.app-form-fields .app-tab-view.mediaApprovals .app-form-field.form-check {
    flex:1;
}

#metadata-section .app-action-content-buttons {
    position: absolute;
    top: -3px;
    right: 10rem;
}
#metadata-section .app-action-content-buttons .app-group-content-button-label  {
    text-transform: uppercase;
    font-size: .7rem;
}
#metadata-section .app-action-content-buttons .app-group-content-button:last-of-type,
#metadata-section .app-action-content-buttons .app-group-content-button:first-of-type {
    border-top-left-radius:0 !important;
    border-top-right-radius:0 !important;
}
#metadata-section .app-action-content-buttons .app-group-content-button {
    opacity: .7;
    transition:.2s;
}
#metadata-section .app-action-content-buttons .app-group-content-button:hover,
#metadata-section .app-action-content-buttons .app-group-content-button:focus {
    opacity: 1;
    background-color: #0069D9;
    border-color: #0069D9;
}
#metadata-section .app-action-content-buttons .app-group-content-button:active {
    opacity: .9;
    background-color: #0069D9;
    border-color: #0069D9;
}
#metadata-section .app-action-content-buttons .app-group-content-button i {
    margin-right:.25rem;
}

#metadata-section .summary.event-summary {
    height: 100%;
    display: flex;
    flex-direction: column;
}
#metadata-section .app-form-container.event-preview {
    background-color: black;
    text-align: center;
    margin: .5rem;
    flex: 1;
    object-fit: contain;
    position: relative;
}
#metadata-section .app-form-container.event-preview .event-preview-status {
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events:none;
    z-index:10;
}
#metadata-section .app-form-container.event-preview .event-preview-status-progress-state { 
    font-size: 1.4rem;
}
#metadata-section .app-form-container.event-preview .event-preview-status-progress #playerBufferInfo { 
    display: flex;
    position: unset;
}
#metadata-section .app-form-container.event-preview .event-preview-status-progress #playerBufferInfo .player-buffering { 
    width: 95%;
    overflow: hidden;
}

#metadata-section .app-form-container.event-preview .event-preview-status-delay {
    position: absolute;
    right: .5rem;
    top: .25rem;
    font-size: .9rem;
    /* z-index: 10;*/
    opacity: .8;
}
#metadata-section .app-form-container.event-preview video {
    object-fit: contain;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.app-form-field-date-container {
    border: 1px solid rgba(100,100,100, .3);
    border-radius: 5px;
    padding: 0 0.5rem;
    margin-right: 0.5rem;
    margin-left: 0.5rem;
    /* background-color: rgba(0,0,0,.2);*/
    position: relative;
    top: 2px;
    transition: .3s;
    /*  width: 20rem;*/
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    /*background-color: rgb(0,0,0,.3) !important;*/
    margin: 0;
    margin-top: 0.75rem;
    margin-bottom: 1.25rem;
    border-color: rgba(100,100,100,.5) !important;
    padding-left: 0.75rem;
    margin-right: 0.5rem;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 0px;
    margin: 0px;
    top: 0px;
}
.app-form-field-date,
.app-form-field-time {
    max-width: 200px;
}
.app-form-body .app-form-field-date-container {
    max-width: unset;
}
.app-form-body .drop-down .selected-item {
    min-height: 44px;
   /* background-color: rgba(100, 100, 100, .1) !important;*/
}
.app-form-field-date-container input {
    border: none !important;
}
.app-form-field-date-container i {
    padding: 0.25rem;
    padding-left: 0.75rem;
}
.app-form-container.schedule-container {
    padding-top:.25rem;
}
.app-form-container.schedule-setup-ex .app-form-container.schedule-container {
    padding-top: 0rem;
}


.app-form-field-media-container {
    border: 1px solid rgba(100,100,100, .3);
    border-radius: 5px;
    padding: 0 0.5rem;
    margin-right: 0.5rem;
    margin-left: 0.5rem;
    /* background-color: rgba(0,0,0,.2);*/
    position: relative;
    top: 2px;
    transition: .3s;
    /*  width: 20rem;*/
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    /*background-color: rgb(0,0,0,.3) !important;*/
    margin: 0;
    margin-top: 0.75rem;
    margin-bottom: 1.25rem;
    border-color: rgba(100,100,100,.5) !important;
    padding-left: 0.75rem;
    margin-right: 0.5rem;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 0px;
    margin: 0px;
    top: 0px;
    max-width: 200px;
    min-height: 44px;
    padding: .5rem;
}
.app-form-body .app-form-field-media-container {
    max-width: unset;
}

input[type=button].app-form-field-input,
button.app-form-field-input {
    text-align: left;
    align-items: flex-start;
}
input[type=button].app-form-field-input:focus,
button.app-form-field-input:focus {
    border-color: #e14eca;
    border-color: #0d6efd !important;
}
.app-form-field-date.focused .app-form-field-date-container,
.app-form-field-time.focused .app-form-field-time-container {
    border-color: #e14eca;
    border-color: #0d6efd !important;
}
.app-form-field-input.app-form-field-media-container {
}
.app-form-field-input.app-form-field-media-container .app-form-field-media-image-container {
    line-height: normal;
}
.app-form-field-input.app-form-field-media-container .app-form-field-media-image-container img {
    max-width:50px;
    max-height:20px;
}
.app-form-field-input.app-form-field-media-container .app-form-field-media-info-container {
    margin-left: .4rem;
    margin-right: .4rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 200px;
    overflow: hidden;
    text-align: left;
}
.MediaEventScheduleWindow .app-form-field {
    flex:unset;
}
.MediaEventScheduleWindow .media-event-schedule-fields {
    display:flex;
}
.MediaEventScheduleWindow .media-event-schedule-fields .app-form-field  {
    flex:1;
    margin-right:.5rem;
}
.MediaEventScheduleWindow .media-event-schedule-fields .app-form-field:last-of-type {
    margin-right:0;
}
.MediaEventScheduleWindow .MediaEventScheduleWindow-tabs {
    display:none;
}
.MediaEventScheduleWindow .action-buttons {
    padding: .25rem 0;
}
.MediaEventScheduleWindow .summary.event-summary {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.MediaEventScheduleWindow .app-form-container.event-preview {
    background-color: black;
    text-align: center;
    margin-top: .25rem;
    flex: 1;
    object-fit: contain;
    position: relative;
}
.MediaEventScheduleWindow  .app-form-container.event-preview .event-preview-status {
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events:none;
    z-index:10;
}
.MediaEventScheduleWindow  .app-form-container.event-preview .event-preview-status-progress-state { 
    font-size: 1.4rem;
}
.MediaEventScheduleWindow  .app-form-container.event-preview .event-preview-status-progress #playerBufferInfo { 
    display: flex;
    position: unset;
}
.MediaEventScheduleWindow  .app-form-container.event-preview .event-preview-status-progress #playerBufferInfo .player-buffering { 
    width: 95%;
    overflow: hidden;
}
.MediaEventScheduleWindow  .app-form-container.event-preview .event-preview-status-delay {
    position: absolute;
    right: .5rem;
    top: .25rem;
    font-size: .9rem;
    /* z-index: 10;*/
    opacity: .8;
}
.MediaEventScheduleWindow  .app-form-container.event-preview video {
    object-fit: contain;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.list-view-group .list-view-group-item {
    line-height: normal;
}
.app-tab-view .app-form-field-media .app-form-field-autocomplete-selection {
    left: .5rem;
    right: .5rem;
}
.form-window .app-form-field-media .app-form-field-autocomplete-selection {
    max-height: unset !important;
    height: unset !important;
    min-height: 80%;
    left: 0rem;
    right: 0rem;
    top: 55px;
}
.form-window .media-field-search .form-window-content .content > .container {
    padding-left: 0rem;
    padding-right: 0rem;
}
.form-window #search-wrapper .media-item .media-info .small {
    font-size: .8rem;
}
.form-window #search-wrapper.no-items .section-header-info .showMoreLink {
    padding-left: .5rem;
}
/*.app-form-body #playerControls #position-container {
    margin-top: 1rem;
}*/
.app-form-fields .app-form-field.form-check.useTrimTime {
    display:none;
}
.app-view.trailer {
    padding-bottom: .25rem;
}
.app-form-fields .app-form-field.form-check.useSchedule {
    margin-bottom: 0 !important;
}
.dmsProjectLibraryMetadataEventItemController .app-form-field-date,
.dmsProjectLibraryMetadataEventItemController .app-form-field-time {
    flex: .3;
}
.app-form-field.app-form-field-autocomplete.app-form-field-media {
    flex: 1;
    overflow: hidden;
}
/*.app-form-field.app-form-field-autocomplete.app-form-field-media .app-form-field-media-item {
    background-color:black;
}*/

.player-start-event-now {
    position: absolute;
    z-index: 5000;
    top: 10.25rem;
    left: 1.8rem;
    display: none;
}
/*#player.preview .player-start-event-now {
    display:flex;
}*/

#metadata-section .app-form-field-input.app-form-field-media-container .app-form-live-status {
    position: relative;
    right: unset;
    bottom: unset;
    height: fit-content;
}
#metadata-section .app-form-field-input.app-form-field-media-container .app-form-live-status-indicator {
    margin-right: .5rem;
    height: .5rem;
    width: .5rem;
}
#metadata-section .app-form-field-input.app-form-field-media-container .app-form-live-status-label {
    font-size: 1rem;
}

.event-preview .event-preview-link {
    position: absolute;
    margin: .25rem;
    font-size: .8rem;
    text-decoration: underline;
    cursor: pointer;
    z-index: 100;
    display: none;
}

.player-start-event-now {
    display:none;
}
.player.show-access-code .player-start-event-now {
    display:flex;
}

#MediaEventWindow .app-form-container.schedule-setup {
    max-width: 60rem;
    width: 100%;
    padding-top: 0rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

#MediaEventWindow .app-form-container.schedule-setup.input-setup {
    max-width: 75rem;
    width: 100%;
    padding-top: 0rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

#MediaEventWindow .app-form-container.schedule-data .app-form-field {
    flex: unset;
}
#MediaEventWindow #metadata-section .summary.event-summary {
    height: 100%;
    display: flex;
    flex-direction: column;
}
#MediaEventWindow .app-form-container.schedule-data {
    flex: 1;
    display: flex;
    flex-direction: column;
}
/*#MediaEventWindow .app-view.app-tab-view.input {
    padding-top: 0;
}*/
#MediaEventWindow #metadata-section .app-form-container.event-preview {
    margin: .5rem 0;
}

.app-form-field.urlPath {
    max-width: 125px;
    width: 100px;
    min-width: unset;
}
.url-path-seperator {
    display: flex;
    align-items: center;
    margin-left: .5rem;
    margin-right: .5rem;
    font-size: 1.2rem;
    position: relative;
    top: 7px;
}

#ProjectUserWindow .app-form-header .app-form-image-container {
    min-width: 120px;
    min-height: 120px;
    border: solid 1px transparent;
    border-radius: 100%;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}
#ProjectUserWindow  .app-form-header .app-form-image-container > div.app-form-initials {
    width: 100%;
    text-align: center;
    color: white;
    font-size: 2.6rem;
}
#ProjectUserWindow  .app-form-header .app-form-image-container > div.app-form-icon {
    display:none;
}


#MediaItemWindow #playerControls #position-level-container {
    position:relative;
}
#MediaItemWindow #playerControls #position-level-selector-lock {
    position: absolute;
    top: -2rem;
    left: -3px;
}
#MediaItemWindow #playerControls #position-level-container.locked {
    cursor: default;
    opacity: .8;
}
#MediaItemWindow #playerControls #position-level-container.locked button {
    cursor: default;
    opacity: .8;
}
#MediaItemWindow #playerControls #position-level-container.locked i {
    color: red;
}
#MediaItemWindow #playerControls #position-level-container.unlocked {
    opacity: 1;
    cursor: pointer;
}
#MediaItemWindow #playerControls #position-level-container.unlocked i {
    color: dodgerblue;
}
#MediaItemWindow .video-preview-container.trim-time {
    bottom: 160px;
}


/*#MediaItemWindow #playerControls #position-level-selector:focus {
    background-color: white !important;
    opacity: 1;*/
    /*transform: scale(1.4);*/
    /*transform: matrix(1.4, 0, 0, 1.4, 0, 0);
}
body:not(.mobile-device) #MediaItemWindow #playerControls #position-level-selector:hover {
    background-color: white;
    opacity: 1;
    transform: matrix(1.2, 0, 0, 1.2, 0, 0);
}
#MediaItemWindow #playerControls #position-level-selector.hide {
    display: none;
}

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

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