@font-face { font-family: 'Gilroy'; font-style: normal; font-weight: 700; src: local('Gilroy-Bold'), url('/_fonts/Gilroy-Bold.woff') format('woff'); }
@font-face { font-family: 'Gilroy'; font-style: normal; font-weight: 400; src: local('Gilroy-Regular'), url('/_fonts/Gilroy-Regular.woff') format('woff'); }

* { box-sizing: border-box; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background-color: #ffffff11; }
::-webkit-scrollbar-thumb { background-color: #ffffff22; }
:root, :root:not([data-theme=dark]), [data-theme=light] {
    --font-family: 'Gilroy';
    --font-size:14px; 
    --border-radius:.6em;

    --primary:#e70070dd;
    --primary-hover:#c5005f;
    --primary-focus: #e7007033;
 
    --secondary:#ffffff22;    
    --secondary-hover:#ffffff18;
    --secondary-focus: #ffffff22;
    --secondary-inverse: #fff;

    --form-element-spacing-vertical: 1rem;
    --form-element-background-color: #f5f5f5;
    --form-element-border-color: #eee;
    --form-element-focus-color:#ffffff11;

    --switch-background-color: #ddd;

    --padding: 3em;    
    --grid-spacing-vertical: 1rem;

    --color: #444;
    --h1-color: #fff;
    --h2-color: #fff;
    --h3-color: #fff;
    --h4-color: #fff;
    --h5-color: #fff;

    --contrast-color: #fff;
    --muted-color: #aaa;

    --table-border-color: #00000022;
    --table-row-stripped-background-color: #eaeaea11;  

    --dropdown-background-color: #ffffff;
    --dropdown-hover-background-color: #00000011;
    --dropdown-color: #444;

    --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.6)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
    --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.6)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");

    --tooltip-background-color: #000000aa;
    --tooltip-color: #fff;

    --border-width: 2px;
    --border-radius: 8px;
    --border-color: #ffffff11;
}

/* Tooltips */
[data-tooltip]:focus::after, [data-tooltip]:focus::before { opacity: 0 !important; visibility: hidden !important; }
[data-tooltip]:hover::after, [data-tooltip]:hover::before { opacity: 0; animation-fill-mode: forwards !important; animation-delay: .5s !important; visibility: visible; }
[data-tooltip]:not(a,button,input) { border-bottom:none; }
[data-tooltip]::after, [data-tooltip]::before { white-space: pre-wrap; }


/* Standards */
html, body {
    color:#fff;
    font-family: 'Gilroy';
    font-weight: 400;
    height: 100%;
    background: #000; 
    overflow: hidden;
}

kbd { display: inline-flex; background:#fff2; box-shadow: inset 0 0 0 1px #fff2; color:#fffa; }
form { margin-bottom:0; }
ul li { list-style-type: disc; user-select: none;}
button { font-size:1.2em; font-weight: 700; }
.toast_window.notice button { padding: .5em 1em; font-size: 1em; }
a[role=button] { font-weight: 700; }
button:last-child { margin-bottom:0; }
label { user-select: none; }
h1 { --typography-spacing-vertical: 2rem; }
button.new { width:auto; font-size:1em; line-height:1; margin-bottom:0; }
a { font-weight: 700; cursor: pointer; }
a:hover { opacity: .85; }
hr { border-top: 2px solid #ffffff11; }

h2.underlined { position: relative; margin-bottom:50px; }
h2.underlined:after { content:''; position: absolute; top:calc(100% + 16px); left:0; width:100%; height:3px; background:linear-gradient(to right, #ffffff16 0%, #ffffff00 100%); }

/* Utils */
.hidden { display:none; }
.text-start { text-align: start; }
.text-center { text-align: center; }
.text-end { text-align: end; }
.text-capitalize { text-transform: capitalize; }
.d-block { display:block; }
.d-inline-block { display:inline-block; } 
.contrast { color:var(--contrast-color); }
.pull-right { float:right; }
.hidden { display:none; }
.spacer { height:10px; } 
.bigspacer { height:20px; } 
.opacity-0 { opacity: 0;}
.opacity-10 { opacity: .1;}
.opacity-25 { opacity: .25;}
.opacity-50 { opacity: .5;}
.flex { display:flex; }
.justify-center { justify-content: center; }
.grid ~ .grid { margin-top: 1em; }
fieldset .grid ~ .grid { margin-top: .5em; }
.grid.auto-1fr-auto { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; height:100%;}
.grid-gap-0 { grid-gap:0; }
.grid-center { align-items: center; }
.clickable { cursor:pointer !important; }
.clickable:active { opacity: .5; }
.scrollauto { overflow-x:hidden; overflow-y:auto; }
.overflow-hidden { overflow:hidden; }
.clear { clear:both; }
.p-relative { position: relative; }
.z-100 { z-index: 100;}
.va-tb { vertical-align: text-bottom; }
.m-0 { margin:0 !important; } 
.my-1 { margin-top:1em !important; margin-bottom:1em !important; } 
.my-2 { margin-top:2em !important; margin-bottom:2em !important; } 
.my-3 { margin-top:3em !important; margin-bottom:3em !important; } 
.mt-0 { margin-top:0em !important; }
.mt-1 { margin-top:1em !important; }
.mt-2 { margin-top:2em !important; }
.mt-3 { margin-top:3em !important; }
.mb-0 { margin-bottom:0 !important; } 
.mb-1 { margin-bottom:1em !important; } 
.mb-2 { margin-bottom:2em !important; } 
.mb-3 { margin-bottom:3em !important; } 
.me-0 { margin-right:0 !important; } 
.me-1 { margin-right:1em; } 
.pb-0 { padding-bottom:0 !important; }
.mw-0 { min-width: 0;}
.maxw-100 { max-width: 100%; }
.gg-2 { grid-gap:2em; }
.w-auto { width: auto !important; }
.fw-400 { font-weight: 400; }
.fw-700 { font-weight: 700; }
.small { font-size:.8em; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.pointer-events-none { pointer-events: none; position:static; }
.inline-flex { display: inline-flex; }
.gap-1 { gap: 1em; }
.align-center { align-items: center; }
.align-content-center { align-content: center; }
.lineheight-1 { line-height: 1; }

/* App */
.app { position: relative; height: 100%; overflow:hidden; z-index: 1; background: linear-gradient(45deg, #100e12, #341f29); }
.mobile .app>view { display: block; overflow-x: hidden; }
.tablet .app>view { display: grid; grid-template-columns: 64px 1fr; overflow-x: hidden; }
.desktop .app>view { display: grid; grid-template-columns: 300px 1fr; overflow-x: hidden; }

/* .loading form { filter:blur(2px); } */
.loading:before {
    content:'';
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background:#00000088;
}
.loading:after {
    content:'';
    position: absolute;
    top: calc(50% - 1.5em);
    left: calc(50% - 1.5em);
    width: 3em;
    height: 3em;
    border: .3em solid currentColor;
    border-radius: 3em;
    border-right-color: transparent;    
    animation: spinner .75s linear infinite;
    transform: translate(-50% -50%);
}

/* Box */
.box { background:#ffffff11; color:#fff; padding:var(--padding); border-radius: var(--border-radius); box-shadow: 0 0 50px 0 #00000022, 0 0 0px 4px #ffffff08; }
.box.has-list { padding-bottom: calc(var(--padding)/2); }
.box h1, .box h2, .box h3 { margin-bottom: 1em; color:#fff; }
.box>h1 { margin-bottom: 2rem; display: flex; align-items: center; font-size:1.5em; } 
.box>h1 i { font-size: 2em; opacity: .66; } 
.box>.tabset { margin-top:0px; }
.box .content { background: #f8f8f811; padding: calc(var(--padding) / 2) var(--padding); margin: calc(var(--padding) / 2) calc(var(--padding) * -1); box-shadow: inset 0 -50px 25px -25px #00000004, inset 0 50px 25px -25px #00000004; }
.box .content.mb-0.pb-0 { background:linear-gradient(to bottom, #f8f8f8, #fff); box-shadow: inset 0 50px 25px -25px #00000004; }
.box .filter_and_actions { display:grid; grid-template-columns: 1fr auto; grid-gap:20px; width:50%; max-width:400px; float:right; }
.box .filter_and_actions label { margin:0; }
.box .filter_and_actions input { margin:0; border-radius: var(--border-radius); }
.box .datatable-paging { float:right; }
.box .datatable-length { float:right; margin-right:1em; }
.box .datatable-info { line-height: 42px; min-height: 42px; }
.box input, .box textarea, .box select { background:#ffffff22; border-color:#ffffff11; border-width: 2px; color:#fff; }
.box .datatable-length select { margin:0; }

/* Modal */
.modal_window { background:#2c252ef5; box-shadow: 0 0 50px 0 #00000022, 0 0 0px 4px #4a464c66; color:#fff; backdrop-filter: blur(10px); }
.modal_window .gutter { background:#00000022; padding:24px; margin:24px -24px -24px; box-shadow: inset 0 -50px 25px -25px #00000004; }
.modal_window .gutter button { margin-bottom: 0;}
.modal_window h1, .modal_window h2, .modal_window h3, .modal_window h4 { margin-bottom: 1em; color:#fff; }
.modal_window label { color:#ffffffaa; }
.modal_window address, .modal_window blockquote, .modal_window dl, .modal_window figure, .modal_window form, .modal_window ol, .modal_window p, .modal_window pre, .modal_window table, .modal_window ul { color:#fff; }
.modal_window input, .modal_window select, .modal_window textarea { background-color:#ffffff22; border-color:#ffffff11; border-width: 2px; color:#fff; }
.modal_window textarea { resize:vertical; display: block; }
.modal_window select { height:51px; }
.modal_window select option { color:#000; }
.modal_window select optgroup { color:#000; }
.modal_window label:has([type=checkbox][role=switch]) { cursor: pointer; }
.modal_window [type=checkbox][role=switch] { background-color:#0000; border-color:#ffffff22; cursor: pointer; }
.modal_window [type=checkbox][role=switch]:checked { background-color:var(--switch-checked-background-color); border-color:var(--switch-checked-background-color); }

/* Nav */
nav { position:absolute; z-index:101; top:0; left:0; height:100%; width:300px; display:grid; grid-template-rows: 100px 1fr 128px; color:#fff; padding:32px 32px 24px 32px; box-shadow: 0 0 50px 0 #00000022, 4px 0 0 0 #ffffff08; justify-content:normal; transition: all .5s cubic-bezier(0,1,0,1); background:linear-gradient(45deg, #171416ee, #351927ee); backdrop-filter: blur(10px); }
nav:after {
    content: '';
    position: absolute; 
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;  
    opacity: .8; 
    z-index: -1;
    background: #ffffff11;
    pointer-events: none;
}

nav .header { z-index:1; }
nav .header .top { display: grid; grid-template-columns: 1fr auto; grid-gap:32px; }
nav .header .top i { font-size:3em; color:#fff; cursor:pointer; }
nav .header .top i:before { content:'\ec8d'; }
nav .header .top .logo { 
    width: 100%;     
    height:60px; 
    background-image:url('https://display.nu/_img/logo_white.svg');
    background-repeat: no-repeat; 
    background-position:  top center; 
    background-size: contain;  
    animation: fadeIn 1s forwards;       
    margin:0 auto;
} 
nav .header .company:not(:has(summary)) { color: #fff; margin-top: -10px; animation: fadeIn 1s forwards; font-weight: 700; font-size: 1.2em; }
nav .header .company summary, nav .header .company summary:focus { color:#fff !important; padding-left:10px !important; background: #ffffff11; border: 2px solid #ffffff08; }
nav .header .company summary:hover { padding-left:10px !important; background: #ffffff22; border: 2px solid #ffffff08; }

nav.shown .header .top i { top: -5px; right: -10px; position: relative;animation:fadeIn 1.2s forwards; }
/* .desktop nav .header .top { grid-template-columns: 1fr; } */
.desktop nav .header .top .toggle { opacity: 0; pointer-events: none; }

nav details[role=list] summary, details[role=list] summary, nav li[role=list] a { display: grid; grid-template-columns: 1fr auto; }
nav [role=listbox] {
    max-height: 66vh;
    overflow: auto;
    border-radius: var(--border-radius);    
}

nav [role=listbox]::-webkit-scrollbar { width: 6px; }
nav [role=listbox]::-webkit-scrollbar-thumb { border-radius: var(--border-radius); overflow:hidden; }
nav [role=listbox]::-webkit-scrollbar-thumb { background-color: var(--muted-color); border-radius: var(--border-radius); }

details[role=list] summary+ul li a { display: flex; align-items: baseline; pointer-events: auto; font-size:14px; }
details[role=list] summary+ul li hr { border-top: 2px solid #00000011; }

nav .menu { display: flex; place-items: center; }
nav .menu ul li { width: calc(100% + 1rem); height: 64px; }
nav .menu ul { width:100%; margin:0 !important; display:initial; }
nav .menu a { transition: none; width:100%; }
nav .menu a>i { vertical-align: bottom; font-size:2em; color:#ffffff88; }
nav .menu a>span { color:#fff; font-size: 1.2em; margin-left:16px; animation: fadeIn 1s forwards; }
nav .menu a.active { background:#e70070; color:#fff; width:100%; }
nav .menu a.active>span, nav .menu a.active>i { color:#fff; }

nav .footer { font-size: .8em; display: flex; align-items: flex-end; justify-content: center; overflow:hidden; }
nav .footer div { width:100%; }
nav .footer button { padding-top:10px; padding-bottom:10px; }
nav .footer button>i { vertical-align: text-bottom; font-size: 1.5em; }
nav .footer button>span { margin-left: 10px; }
nav .footer h4 { margin:0; line-height: 1; color:#fff; }
nav .footer .user { display:grid; grid-template-columns: auto 1fr; grid-gap:10px; animation: fadeIn 1s forwards; margin-bottom:10px; }
nav .footer .user i { font-size:48px; font-weight: 400; color:#ffffff88; }
nav .footer .user p { margin:0; line-height: 1; color:#fff; }
nav .footer .user>div { display:flex; align-items: center; }

.tablet nav.collapsed, nav.forcedCollapsed { width:64px; padding:22px 10px 14px 10px; }
.tablet nav.collapsed .header .top, nav.forcedCollapsed .header .top { grid-template-columns: 1fr; }
.tablet nav.collapsed .header .top>div:first-child, nav.forcedCollapsed .header .top>div:first-child { display:none; }
.tablet nav.collapsed .header .top>div>i:before, nav.forcedCollapsed .header .top>div>i:before { content:'\ef5b'; }
.tablet nav.collapsed .header .company, nav.forcedCollapsed .header .company { display:none; }
.tablet nav.collapsed .menu ul li, nav.forcedCollapsed .menu ul li { margin-left: 0; }
.tablet nav.collapsed .menu a, nav.forcedCollapsed .menu a { width:auto; }
.tablet nav.collapsed .menu a>span, nav.forcedCollapsed .menu a>span { display:none; }
.tablet nav.collapsed button, nav.forcedCollapsed button { padding:10px; }
.tablet nav.collapsed button>span, nav.forcedCollapsed button>span { display:none; }
.tablet nav.collapsed .user { display:none; }

.mobile nav { width:100%; }
.mobile nav:before { opacity: .98; }
.mobile nav .header .top .logo { height: 32px; background-position:top left; }
.mobile nav.collapsed, nav.forcedCollapsed { width:100%; height:70px; padding:14px 10px 14px 10px; grid-template-columns: auto 1fr auto; grid-template-rows: auto; }
.mobile nav.collapsed .header .top, nav.forcedCollapsed .header .top { grid-template-columns: 1fr; width:50px; }
.mobile nav.collapsed .header .top>div:first-child, nav.forcedCollapsed .header .top>div:first-child { display:none; }
.mobile nav.collapsed .header .top>div>i:before, nav.forcedCollapsed .header .top>div>i:before { content:'\ef5b'; }
.mobile nav.collapsed .header .company, nav.forcedCollapsed .header .company { display:none; }
.mobile nav.collapsed .menu { display: block; text-align: center; }
.mobile nav.collapsed .menu ul { display: inline-flex; width: auto; height: 100%; grid-template-columns: repeat(auto-fit, minmax(0%, 1fr)); grid-template-rows: auto; grid-gap: 1em; }
.mobile nav.collapsed .menu ul li, nav.forcedCollapsed .menu ul li { width: 32px; height:32px; padding:0; margin: 0;}
.mobile nav.collapsed .menu a, nav.forcedCollapsed .menu a { width:auto; }
.mobile nav.collapsed .menu a>span, nav.forcedCollapsed .menu a>span { display:none; }
.mobile nav.collapsed button, nav.forcedCollapsed button { padding:6px 10px; background: none; border: 0; font-size: 20px;}
.mobile nav.collapsed button>span, nav.forcedCollapsed button>span { display:none; }
.mobile nav.collapsed .user { display:none; }
.mobile nav.collapsed nav .footer { align-items:auto; }

/* View: Generics */
@media (min-width: 1400px) { .container { max-width: 1330px; } }
view { height:100%; overflow-y:auto; }
view .container { padding: 5em var(--padding); } 
view .container>h1, view .container>.grid>h1 { color:#fff; margin-bottom: 2rem; display: flex; align-items: center; font-size:1.5em; } 
view .container>h1 i, view .container>.grid>h1 i { font-size: 1em; opacity: .66; } 
view .container>h1 i, view .container>.grid>h1 i:first-child { font-size: 2em; opacity: .66; } 
view .content { color:#fff; }

/* View: Login */
view[name=login], .desktop view[name=login], .tablet view[name=login], .mobile view[name=login] { display:grid !important; padding:var(--padding); grid-template-columns: none; grid-template-rows: auto 1fr auto; overflow:hidden; }
view[name=login] .box { width:100%; max-width: 480px; margin:0 auto; }
view[name=login] .logo { 
    width: 100%;           
    max-width:320px; 
    height:100px; 
    background-image:url('https://display.nu/_img/logo_white.svg');
    background-repeat: no-repeat; 
    background-position:  bottom center; 
    background-size: contain;  
    animation:none;       
    margin:0 auto;                       
}    
view[name=login] .footer { text-align: center; font-size:.8em; }
view[name=login] .footer img { width:200px; }

/* View: Reset */
view[name=reset], .desktop view[name=reset], .tablet view[name=reset]  { padding:var(--padding); grid-template-columns: none;  grid-template-rows: auto 1fr auto; }
view[name=reset] .box { width:100%; max-width: 480px; margin:0 auto; }
view[name=reset] .logo { 
    width: 100%;           
    max-width:320px; 
    height:100px; 
    background-image:url('https://display.nu/_img/logo_white.svg');
    background-repeat: no-repeat; 
    background-position:  bottom center; 
    background-size: contain;  
    animation:none;       
    margin:0 auto;                       
}    
view[name=reset] .footer { text-align: center; font-size:.8em; }
view[name=reset] .footer img { width:200px; }

/* View: Home */ 
view[name=dashboard] section .actions label { font-size:1.2em; font-weight: 700; color:#ffffff33; transition: all .3s ease-in-out;}
view[name=dashboard] section .actions label:hover { color:#ffffff66; }
view[name=dashboard] section .actions { display:grid; grid-auto-flow: column; grid-gap: 10px;}


view[name=dashboard] details:has(~.tabset) { display:none; }    
view[name=dashboard] .tabselector summary, view[name=dashboard] .tabselector summary:focus { color: #fff !important; padding-left: 10px !important; background: #ffffff11; border: 2px solid #ffffff08; }
view[name=dashboard] section summary { background:#0000; color:#ffffff33; border:none; font-size: 1.5em; }
view[name=dashboard] section summary:hover { color:#ffffff66; }
view[name=dashboard] section summary:focus, view[name=dashboard] h4 summary:active { color:#fff6; }
view[name=dashboard] section summary:after { display:none; }
view[name=dashboard] section summary+ul { width:230px; left:auto; right:0px; border-top-left-radius: var(--border-radius); }

view[name=dashboard] .box:hover { transform:scale(1.025); box-shadow: 0 0 50px 0 #00000022, 0 0 0px 4px #ffffff22; }
view[name=dashboard] .displays { display:grid; grid-template-columns: 1fr 1fr; grid-gap:24px; }
@media screen and (max-width: 1023px) { view[name=dashboard] .displays { grid-template-columns: 1fr; } }
view[name=dashboard] .box { display:inline-grid; grid-template-columns: auto 1fr; transition: box-shadow .1s ease-in, transform .1s ease-in; padding-bottom: 2em; padding-top: 2em; padding-right:1.5em; }
view[name=dashboard] .box > div:first-child { position: relative; }
view[name=dashboard] .box > div:first-child i.bx-tv { font-size: 80px; color: #ffffff55; position: relative; padding: 15px 25px 15px 5px; box-shadow: 20px 0 20px -20px #00000022; margin: -15px 32px 12px -15px; }

view[name=dashboard] .box > div:first-child i.bx-tv:after { font-family: 'boxicons'; font-size:40px; position: absolute; right:20px; bottom:10px; }

view[name=dashboard] .box.online > div:first-child i.bx-tv:after { content:'\ed2f'; color:#1bc740;
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAACtJREFUKFNjZCASMBKpjoE8hf////+PbAMjIyPcIBQTB1AhvhAgz9f4TAQAOiwQC08orSUAAAAASUVORK5CYII=) no-repeat center center;    
    background-size:cover;
}

view[name=dashboard] .box.offline > div:first-child i.bx-tv:after { content:'\eda2'; color:#ffa600;
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAClJREFUKFNjZCASMBKpjoF8hf////8PsoWRkRHFEAwTh4JCXMFFdPAAAJybFAu2NH3gAAAAAElFTkSuQmCC) no-repeat center center;    
    background-size:cover;
}

view[name=dashboard] .box.unpaired > div:first-child i.bx-tv:after { content:'\ec5b'; color:#fff; bottom:12px; }
view[name=dashboard] .box.display.no-template:not(.unpaired):not(.offline) > div:first-child i.bx-tv:after { content:'\ee03'; color:#fff; bottom:12px; }

view[name=dashboard] .box.display > div:first-child i.bx-rotate-left,
view[name=dashboard] .box.display > div:first-child i.bx-rotate-right,
view[name=dashboard] .box.display > div:first-child i.bx-reflect-horizontal {
    position: absolute;
    top:28px;
    left:16px; 
    font-size:32px;
    opacity: .25;
}

view[name=dashboard] .box.display > div:first-child span {
    position: absolute;
    left:-14px;
    top:80px;
    width:100px;
    text-align: center;
    font-size:.8em;
    font-weight: 700; 
}

view[name=dashboard] .box.display .icon {
    width:72px; 
    margin-right:28px; 
    color:#fff;    
}

view[name=dashboard] .box i.status { color:#ffffff88; }
view[name=dashboard] .box i.status.unpaired:before { color:#ffffff88; content:'\ec5b'; }
view[name=dashboard] .box i.status.offline:before,
view[name=dashboard] .box i.status.expired:before { color:#ffa600; content:'\eda2'; background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAClJREFUKFNjZCASMBKpjoF8hf////8PsoWRkRHFEAwTh4JCXMFFdPAAAJybFAu2NH3gAAAAAElFTkSuQmCC) no-repeat center center; background-size:cover; }
view[name=dashboard] .box i.status.online:before { color:#1bc740; content:'\ed33'; background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAACtJREFUKFNjZCASMBKpjoE8hf////+PbAMjIyPcIBQTB1AhvhAgz9f4TAQAOiwQC08orSUAAAAASUVORK5CYII=) no-repeat center center; background-size:cover; }

view[name=dashboard] .box.display p { color:#fff; margin:0; }
view[name=dashboard] .box.display h2 { font-size:20px; margin:0 0 .5em 0; }
view[name=dashboard] .box.display h4 { font-size:16px; margin:0; }
view[name=dashboard] .box button {
    width: auto;
    background: #ffffff11;
    border: 2px solid #ffffff08;
    color: #fff;
    padding: 10px;
    font-size:.9em; 
    line-height: 1;   
    margin:10px 5px 0 0;
    display: inline-block;
}

view[name=dashboard] .box.display button:hover, view[name=dashboard] .box.display summary[role=button]:hover { background: #ffffff22; border: 2px solid #ffffff08; }
view[name=dashboard] .box.display button:focus, view[name=dashboard] .box.display summary[role=button]:focus { box-shadow: 0 0 var(--outline-width) var(--form-element-focus-color); }
view[name=dashboard] .box.display summary[role=button]:after { display:none; }
view[name=dashboard] .box.display summary+ul { width:200px; left:auto; right:0px; border-top-left-radius: var(--border-radius); z-index: 1; }


view[name=dashboard] .keys { display:grid; grid-template-columns: 1fr 1fr 1fr; grid-gap:24px; }
@media screen and (max-width: 1280px) { view[name=dashboard] .keys { grid-template-columns: 1fr 1fr; } }
@media screen and (max-width: 1024px) { view[name=dashboard] .keys { grid-template-columns: 1fr; } }
view[name=dashboard] .box.key { display:inline-grid; grid-template-columns: auto 1fr; transition: box-shadow .1s ease-in; padding-bottom: 2em; padding-top: 2em; align-items: center; }
view[name=dashboard] .box.key > div:first-child { position: relative;}
view[name=dashboard] .box.key > div:first-child i.bx { font-size: 40px; color: #ffffff55; position: relative; padding: 15px 0px 15px 5px; margin: -15px 32px -15px -15px; }
view[name=dashboard] .box.key > div:first-child i.bx:after { font-family: 'boxicons'; font-size:20px; position: absolute; right:16px; bottom:5px; }

view[name=dashboard] .slideshows { display:grid; grid-template-columns: 1fr 1fr 1fr; grid-gap:24px; }
@media screen and (max-width: 1024px) { view[name=dashboard] .slideshows { grid-template-columns: 1fr 1fr; } }
view[name=dashboard] .box.slideshow { display:inline-grid; align-items: center; grid-template-columns: auto 1fr; transition: box-shadow .1s ease-in; }
view[name=dashboard] .box.slideshow:hover { box-shadow: 0 0 50px 0 #00000022, 0 0 0px 4px #ffffff22; }

view[name=dashboard] .box.slideshow > div:first-child i { font-size: 40px; color: #ffffff55; position: relative; box-shadow: 20px 0 20px -20px #00000022; padding: 15px 0px 15px 5px; margin: -15px 32px -15px -15px; }
view[name=dashboard] .box.slideshow p { color:#fff; margin:0; }
view[name=dashboard] .box.slideshow h2 { font-size:16px; margin:0; }
view[name=dashboard] .box.slideshow button, view[name=dashboard] .box summary[role=button] { 
    width: auto;
    background: #ffffff11;
    border: 2px solid #ffffff08;
    color: #fff;
    padding: 10px;
    margin-top: -20px;
    margin-right: -20px;
    font-size: 1em;
}

view[name=dashboard] .box summary[role=button] { 
    margin-left:10px;

}
view[name=dashboard] .box summary[role=button], view[name=dashboard] .box button.displaybutton { 
    width: auto;
    padding: 10px;
    margin-top: 0;
    margin-right: 0;
}
view[name=dashboard] .box button.displaybutton, view[name=dashboard] .box summary[role=button].keybutton { margin-left:10px; }
view[name=dashboard] .box button:hover, view[name=dashboard] .box summary[role=button]:hover { background: #ffffff22; border: 2px solid #ffffff08;   }
view[name=dashboard] .box button:focus, view[name=dashboard] .box summary[role=button]:focus { box-shadow: 0 0 var(--outline-width) var(--form-element-focus-color); }
view[name=dashboard] .box summary[role=button]:after { display:none; }
/* view[name=dashboard] .box summary+ul { width:200px; left:auto; right:-20px; border-top-left-radius: var(--border-radius); } */
view[name=dashboard] .box summary+ul { width:200px; left:auto; border-top-left-radius: var(--border-radius); border:0; }

/* Slideshow */
view[name=slideshow] .footer { position:relative; float:none; width: auto; overflow: hidden; box-shadow: 0 -2px #ffffff25; margin-top:1.5em; display: flex; align-items: center; justify-content: space-between; gap:1em; }
view[name=slideshow] .footer:after {
    content:'';
    position: absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
    box-shadow: inset 0 50px 55px -60px #ffffff25;   
    -webkit-mask-image: linear-gradient(to right, #00000000 0%, #000000 20%, #000000 80%, #00000000 100%);
    mask-image: linear-gradient(to right, #00000000 0%, #000000 20%, #000000 80%, #00000000 100%);     
}
view[name=slideshow] .footer .info { color:#fff6; }

view[name=slideshow] .group .actions label { font-size:1.5em; font-weight: 700; color:#ffffff33; transition: all .3s ease-in-out;}
view[name=slideshow] .group .actions label:hover { font-size:1.5em; font-weight: 700; color:#ffffff66; }
view[name=slideshow] .group .actions { display:grid; grid-auto-flow: column; grid-gap: 10px;}

view[name=slideshow] ul.slides-container { padding:0; margin:0; }
view[name=slideshow] ul.slides-container li.slide, 
view[name=slideshow] ul.slides-container li.slide-placeholder,
view[name=slideshow] ul.slides-container li.add { display:inline-block; width:18%; margin:0 2% 2% 0; vertical-align: top; } 
view[name=slideshow] ul.slides-container li.add button { aspect-ratio: 6 / 5; }
view[name=slideshow] ul.slides-container li.add button i { font-size:3em; }

@media screen and (max-width: 1280px) { 
    view[name=slideshow] ul.slides-container li.slide, view[name=slideshow] ul.slides-container li.add { width:31.33%; margin:0 2% 6% 0; }
}

@media screen and (max-width: 768px) { 
    view[name=slideshow] ul.slides-container li.slide, view[name=slideshow] ul.slides-container li.add { width:48%; margin:0 2% 6% 0; } 
    /* view[name=slideshow] ul.slides-container li.add button { aspect-ratio: 1 / .95; } */
}

view[name=slideshow] ul.slides-container li.slide .box { width:100%; aspect-ratio : 16 / 9; padding:2px; position: relative; transition: all .3s cubic-bezier(0,1,0,1); }
view[name=slideshow] ul.slides-container li.slide .box .image { width:100%; height:100%; background-repeat: no-repeat; background-position: center center; background-size:cover; border-radius: .5em; }
view[name=slideshow] ul.slides-container li.slide .box .iframe { display:grid; width:100%; height:100%; place-items: center; padding:2em; background-repeat: no-repeat; background-position: center center; background-size:cover; border-radius: .5em; }
view[name=slideshow] ul.slides-container li.slide .box .iframe p { font-weight: 700; font-size:2em; }
view[name=slideshow] ul.slides-container li.slide .box .template { display:grid; width:100%; height:100%; place-items: center; padding: 1em 1em; background-repeat: no-repeat; background-position: center center; background-size:cover; border-radius: .5em; }
view[name=slideshow] ul.slides-container li.slide .box .template p { font-weight: 700; font-size:2em; }
view[name=slideshow] ul.slides-container li.slide .box:hover { transform:scale(1.025); box-shadow: 0 0 50px 0 #00000022, 0 0 0px 2px #ffffff22; }
/* view[name=slideshow] ul.slides-container li.slide .box .template[style] { display:none; } */
view[name=slideshow] ul.slides-container li.slide .grid { grid-template-columns: 1fr auto; align-items: center; margin-top:0; }
view[name=slideshow] ul.slides-container li.slide .grid>div { margin:.5em 0 .25em; }
view[name=slideshow] ul.slides-container li.slide h4 { font-size:16px; margin:0; }
view[name=slideshow] ul.slides-container li.slide p { color:#fff; margin:0; display:inline-block; }
view[name=slideshow] ul.slides-container li.slide p::first-letter { text-transform: uppercase; }
view[name=slideshow] ul.slides-container li.slide>.grid i { color:#fff; }
view[name=slideshow] ul.slides-container li.slide .type i {font-size:.8em; color:#1bc740; }
view[name=slideshow] ul.slides-container li.slide.disabled .box > div:last-child { opacity:.33; } 
view[name=slideshow] ul.slides-container li.slide.disabled .type i { color:#ffffff33; } 
view[name=slideshow] ul.slides-container li.slide .options {
    position: absolute;
    top:10px;
    right:10px;    
    
    z-index: 2;
    border-radius: calc(var(--border-radius) / 1.75);
    display: flex;
}

view[name=slideshow] ul.slides-container li.slide .options summary {
    padding:6px;
    line-height: 1;
}

view[name=slideshow] ul.slides-container li.slide details[role=list][open] summary { pointer-events: none; }

view[name=slideshow] ul.slides-container li.slide .options summary[role=button]:after { display:none; }
view[name=slideshow] ul.slides-container li.slide .options summary+ul { width:120px; left:auto; right:0px; top:28px; border-top-left-radius: var(--border-radius); border:0; }

/* view[name=slideshow] ul.slides-container li.slide.deleted .box { transform: scale(.95); }
view[name=slideshow] ul.slides-container li.slide.deleted .box>div, 
view[name=slideshow] ul.slides-container li.slide.deleted h4,
view[name=slideshow] ul.slides-container li.slide.deleted p { opacity:.25; filter:grayscale(1); } */
view[name=slideshow] ul.slides-container li.slide-placeholder {
    border:2px dashed #ffffff66;
    border-radius: var(--border-radius);
    box-sizing: border-box;
}

/* View: Add slide */
view[name=add-slide] .slideTypes:has(div:nth-child(4)) { grid-template-columns: 1fr 1fr 1fr 1fr; }
view[name=add-slide] .slideTypes:has(div:nth-child(5)) { grid-template-columns: 1fr 1fr 1fr; }
view[name=add-slide] .slideTypes { grid-template-columns: 1fr 1fr 1fr; }

view[name=add-slide] .slideTypes button { aspect-ratio: 1 / 1; padding:5px; width:10vw; max-width: 150px; container-type: inline-size; } 
view[name=add-slide] .slideTypes button i { font-size:clamp(.8em, 30cqi, 3rem); }
view[name=add-slide] .slideTypes button h3 { font-size:3em; }
view[name=add-slide] .slideTypes button h4 { font-size:clamp(.8em, 10cqi, 3rem); }


/* View: Edit-slide-iframe */
view[name=edit-slide-iframe] .iframewrapper { width:100%; aspect-ratio: 16 / 9; overflow:hidden; border-radius: .5em; border:2px solid #ffffff33; }
view[name=edit-slide-iframe] iframe { 
    width:100%; 
    aspect-ratio: 16 / 9; 
    -ms-zoom: 0.25;
    zoom: 0.25;
    /* transform: scale(0.25);
    -moz-transform: scale(0.25);
    -moz-transform-origin: 0 0;
    transform-origin: 0 0;
    -o-transform: scale(0.25);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.25); */
    /* -webkit-transform-origin: 0 0; */
    transition: all .3s ease-in-out;
}
/* View: Edit-slide-template */
.slideTemplateOptions div:has(.inline-block-25) { display:inline-block; width:25%; vertical-align: top; }
.slideTemplateOptions div:has(.inline-block-50) { display:inline-block; width:50%; vertical-align: top; }
.slideTemplateOptions div:has(.inline-block-66) { display:inline-block; width:66%; vertical-align: top; }
.slideTemplateOptions div:has(.inline-block-75) { display:inline-block; width:75%; vertical-align: top; }
.slideTemplateOptions div:has(.inline-block-33) { display:inline-block; width:33%; vertical-align: top; }
.slideTemplateOptions div:has(.inline-block-34) { display:inline-block; width:34%; vertical-align: top; }
.slideTemplateOptions div:has(.inline-block-50):has(+ div:has(.inline-block-50)):not(:has(.no-margin)) { width:calc(50% - 1em); vertical-align: top; }
.slideTemplateOptions div:has(.inline-block-34) + div:has(.inline-block-34):not(:has(.no-margin)) { margin-left:1em; width:calc(50% - 1em); vertical-align: top; }
.slideTemplateOptions div:has(.inline-block-33) + div:has(.inline-block-34):not(:has(.no-margin)) { margin-left:1em; width:calc(34% - 1em); vertical-align: top; }
.slideTemplateOptions div:has(.inline-block-33) + div:has(.inline-block-34):not(:has(.no-margin)) + div:has(.inline-block-33):not(:has(.no-margin)) { margin-left:1em; width:calc(33% - 1em); vertical-align: top; }
.slideTemplateOptions div:has(.inline-block-50) + div:has(.inline-block-50):not(:has(.no-margin)) { margin-left:1em; width:calc(50% - 1em); vertical-align: top; }
.slideTemplateOptions div:has(.inline-block-50) + div:has(.inline-block-34):not(:has(.no-margin)) { margin-left:1em; width:calc(34% - 1em); vertical-align: top; }
.slideTemplateOptions div:has(.inline-block-66) + div:has(.inline-block-34):not(:has(.no-margin)) { margin-left:1em; width:calc(34% - 1em); vertical-align: top; }
.slideTemplateOptions div:has(.inline-block-34) + div:has(.inline-block-66):not(:has(.no-margin)) { margin-left:1em; width:calc(66% - 1em); vertical-align: top; }
.slideTemplateOptions div:has(.inline-block-75) + div:has(.inline-block-25):not(:has(.no-margin)) { margin-left:1em; width:calc(25% - 1em); vertical-align: top; }
.slideTemplateOptions div:has(.inline-block-25) + div:has(.inline-block-75):not(:has(.no-margin)) { margin-left:1em; width:calc(75% - 1em); vertical-align: top; }

/* View: Admin */
.grid>.box.stats { position: relative; display: grid; grid-template-columns: auto 1fr; grid-gap:30px; }
.grid>.box.stats div { display: flex; align-items: center; gap: 1em; font-weight: 700; }
.grid>.box.stats i { 
    font-size: 80px;
    color: #ffffff55;
    position: relative;
    padding: 15px 25px 15px 5px;
    box-shadow: 20px 0 20px -20px #00000022;
    margin: -15px 0 -15px -15px;
}
.grid>.box.stats i.stats:after {
    font-family: 'boxicons';
    content:'\e9c4';
    font-size:48px;
    position: absolute;
    right:20px;
    bottom:0px;
    color:#444;
}
.grid>.box.stats h1 { font-size:64px; margin:0; line-height: 1;}

/* List table */
.box .content .list-table { width:calc(100% + 32px) !important; margin-left:-16px; margin-right:-16px; table-layout: fixed; }
.list-table { font-size:1.1em; margin-bottom:0;  }
.list-table tr th { color:#ffffff80; border-width:0px; padding-bottom:1.5em;}
.list-table tr th:first-child, .list-table tr td:first-child { border-top-left-radius: .5em; border-bottom-left-radius: .5em; }
.list-table tr th:last-child, .list-table tr td:last-child { border-top-right-radius: .5em; border-bottom-right-radius: .5em; }
.list-table .buttons { text-align: right; } 
.list-table button { display:inline-block; font-size:1em; line-height:1; width:auto; margin-left:5px; margin-bottom:0; }
.list-table tr:last-child td { border-bottom: 0;}
.list-table tr td { border-bottom: 0; color:#fff; transition: background .3s cubic-bezier(0,1,0,1);}
.list-table tr td:not(.buttons), .list-table tr th {
    text-overflow: ellipsis;
    overflow-x: hidden;
    white-space: nowrap;    
}
.list-table tr.clickable:hover td { background:#e0e0e022; cursor:pointer; }

.list-table tr td i.online:before { 
    content:'\ed2f'; color:#1bc740;
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAACtJREFUKFNjZCASMBKpjoE8hf////+PbAMjIyPcIBQTB1AhvhAgz9f4TAQAOiwQC08orSUAAAAASUVORK5CYII=) no-repeat center center;    
    background-size:cover;
}

.list-table tr td i.offline:before { 
    content:'\eda2'; color:#ffa600;
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAClJREFUKFNjZCASMBKpjoF8hf////8PsoWRkRHFEAwTh4JCXMFFdPAAAJybFAu2NH3gAAAAAElFTkSuQmCC) no-repeat center center;    
    background-size:cover;
}

/* Tabs */
.tabset > input[type="radio"] { position: absolute; left: -200vw; }
.tabset .tab-panel { display: none; min-height:64px; margin-bottom:0; padding: 30px 0 0 0; clear:both; }
.tabset .tab-panel.has-list { margin-bottom: -20px; }
.tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child,
.tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2),
.tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3),
.tabset > input:nth-child(7):checked ~ .tab-panels > .tab-panel:nth-child(4),
.tabset > input:nth-child(9):checked ~ .tab-panels > .tab-panel:nth-child(5),
.tabset > input:nth-child(11):checked ~ .tab-panels > .tab-panel:nth-child(6),
.tabset > input:nth-child(13):checked ~ .tab-panels > .tab-panel:nth-child(7), 
.tabset > input:nth-child(15):checked ~ .tab-panels > .tab-panel:nth-child(8),
.tabset > input:nth-child(17):checked ~ .tab-panels > .tab-panel:nth-child(9),
.tabset > input:nth-child(19):checked ~ .tab-panels > .tab-panel:nth-child(10) { display: block; }
.tabset > label { display:block; position: relative; padding: 12px 24px; cursor: pointer; font-weight: 600; border-top-left-radius: .5em; border-top-right-radius: .5em; color:#ffffff88; margin-right:0; float:left; box-shadow: 0 2px #ffffff25, inset 0 -50px 55px -60px #ffffff25; transition: color .1s ease-in, padding .1s ease-in; } 
.tabset > input + label>i, .tabset > input + label>span>i { font-size: .8em; }
.tabset > input + label>i.bxs-circle, .tabset > input + label>span>i.bxs-circle { color:#1bc740; margin-right:10px; }
.tabset > label.disabled>i.bxs-circle, .tabset > label.disabled>span>i.bxs-circle { color:#ffffff33; }
.tabset > label.add i { font-size: 1.1em; vertical-align: text-bottom; }
.tabset > label:nth-child(2) { box-shadow: 0 2px #ffffff25; }
.tabset > label:nth-child(2):after, .tabset > label.filler:after { content:''; position: absolute; width:100%; height:100%; top:0; left:0; -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)); mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)); box-shadow: inset 0 -50px 55px -60px #ffffff25; }
.tabset > label.filler { position:relative; float:none; width: auto; overflow: hidden; box-shadow: 0 2px #ffffff25; }
.tabset > label.filler:after { -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%); }
.tabset > input:checked + label { box-shadow: 0 -2px #ffffff25, 2px 0 #ffffff25, -2px 0 #ffffff25; color:#fff; padding: 14px 24px 10px;}
.tabset > input:checked + label:after { display: none; }

/* Checkbox */
fieldset label { cursor:pointer; user-select: none; padding:0 0 .25em 0; font-size:1.1em;}
input[type=checkbox] { border-radius: .25em; }
.checkboxgrid { display: grid; grid-template-columns: auto 1fr; grid-gap: 10px; }
.checkboxgrid>input[type=checkbox] { margin-top:1px; }

/* Imgupload */
input.imgupload { display:none; }
div.imgupload img { border-radius: 1em; max-height: 100%; margin:0 auto; display:block; }
div.imgupload {
    cursor:pointer;
    width:100%; 
    min-height: 180px;
    height:300px;    
    background-color: #ffffff22; 
    background-repeat: no-repeat; 
    background-size: contain;
    background-position: center center;
    border:2px solid #ffffff11;
    border-radius: 1em;
    position: relative;   
    background-origin: content-box;    
    align-content: center;
}

view[name="edit-slide-template"] div.imgupload { min-height:180px; }

div.imgupload:empty:not([aria-busy=true]):before {
    content:'Klik for at vælge fil\A- eller -\Atræk fil hertil';
    white-space: pre;
    position: absolute;
    font-weight: 700;
    left:0;
    top:calc(50% + 10px);
    width:100%;
    text-align: center;
    z-index:0;
    color:#fff;
}
div.imgupload:empty:after {
    font-family: 'boxicons';
    content:'\ea67';
    font-size:100px;
    position: absolute;
    left:0;
    top:calc(50% - 40px);
    transform:translateY(-50%);
    width:100%;
    text-align: center;
    z-index:0;
    color:#fff;
}
div.imgupload[aria-busy=true]:before {
    font-size:2em;
    top: calc(50% - .5em);
    left: calc(50% - .5em);
    position: absolute;
}
div.imgupload .delete {
    position: absolute;
    top:10px;
    right:10px;
    width:auto;
    padding:5px;
    line-height: 1;
    z-index: 2;
    display: flex;
}

div.imgupload .view {
    position: absolute;
    top:10px;
    right:46px;
    width:auto;
    padding:5px;
    line-height: 1;
    z-index: 2;
    display: flex;
}

/* Videoupload */
input.videoupload { display:none; }
div.videoupload video { width:100%; border-radius: 1em; max-height: 100%; margin:0 auto; display:block; }
div.videoupload {
    cursor:pointer;
    width:100%; 
    height:300px;    
    background-color: #ffffff22; 
    background-repeat: no-repeat; 
    background-size: contain;
    background-position: center center;
    border:2px solid #ffffff11;
    border-radius: 1em;
    position: relative;    
    background-origin: content-box;    
    align-content: center;
}

div.videoupload:empty { height:192px; }
div.videoupload:empty:not([aria-busy=true]):before {
    content:'Klik for at vælge fil\A- eller -\Atræk fil hertil';
    white-space: pre;
    position: absolute;
    font-weight: 700;
    left:0;
    top:calc(50% + 10px);
    width:100%;
    text-align: center;
    z-index:0;
    color:#fff;
}
div.videoupload:empty:after {
    font-family: 'boxicons';
    content:'\ea67';
    font-size:100px;
    position: absolute;
    left:0;
    top:calc(50% - 40px);
    transform:translateY(-50%);
    width:100%;
    text-align: center;
    z-index:0;
    color:#fff;
}
div.videoupload[aria-busy=true]:before {
    font-size:2em;
    top: calc(50% - .5em);
    left: calc(50% - .5em);
    position: absolute;
}
div.videoupload .delete {
    position: absolute;
    top:10px;
    right:10px;
    width:auto;
    padding:5px;
    line-height: 1;
    z-index: 2;
    display: flex;
}

div.videoupload .view {
    position: absolute;
    top:10px;
    right:46px;
    width:auto;
    padding:5px;
    line-height: 1;
    z-index: 2;
    display: flex;
}

/* Notice */
.toast_window.notice { 
    background:#523a46; 
    box-shadow: 0 0 50px 0 #00000022, 0 0 0 4px #ffffff08;
}
.toast_window.notice>div {
    display: flex;
    gap:20px;
    align-items: center;
}
.toast_window.notice p {
    text-align: left;
    color:#fff;
    margin:0;
}

/* Datepicker */
input.datepicker { --icon-position: 0.75rem; --icon-width: 1rem; padding-right: calc(var(--icon-width) + var(--icon-position)); background-image: var(--icon-date); background-position: center right var(--icon-position); background-size: var(--icon-width) auto; background-repeat: no-repeat; cursor:pointer; }
.datepickerwrap { transition: border-color .2s ease-out; width:178px; display:inline-block; position: relative; height:56px; box-shadow: 0 0 100px rgba(0,0,0,.1); border: 0; border-radius: 26px; }
.datepickerwrap:hover { border-color:#ababab; }
.datepickerwrap input { cursor: pointer; border: 0; background: none; box-shadow: none; background: #ffffff; height: 56px; text-align: center; font-size: 15px; font-weight: 600; padding: 0 60px 0 20px; border-radius: 26px; border-bottom: 3px solid rgba(0,0,0,.15); user-select: none; }
.datepickerwrap:after { position: absolute; background: #fad67d; width: 45px; height: 53px; line-height: 53px; border-radius: 0; border-top-right-radius: 26px; border-bottom-right-radius: 26px; right: 0; top: 0; padding-right: 3px; text-align: center; font-size: 20px; content: '\f073'; font-family: 'FontAwesome'; font-size: 16px; color: #fff; pointer-events: none; box-shadow: 0 3px #b78834; }
.datepicker_bg { width: 100%; height: 100%; top: 0px; left: 0px; position: fixed; background:#00000022; z-index: 10001; display:none; }
.ui-datepicker { width:100%; max-width:360px; top:50% !important; transform:translateY(-50%); position: fixed !important; right: 0 !important; left: 0 !important; margin-right: auto !important; margin-left: auto !important; border: 0; padding: 0 15px 15px 15px; box-sizing: border-box; z-index: 10002 !important; user-select: none; border:2px solid #ffffff22; border-radius: 1em; background:#2c252ef7; box-shadow: 0 0 50px 0 #00000022, 0 0 0px 4px #4a464c66; color:#fff; }
.ui-widget.ui-widget-content { border:2px solid #ffffff22; }
.ui-datepicker-calendar a { font-size:13px; }
.ui-datepicker .ui-datepicker-header { margin:0; padding:0; border:0; border-radius:0; margin-left: -15px; margin-right: -15px; border-top-left-radius: 1em; border-top-right-radius: 1em; }
.ui-datepicker .ui-datepicker-title { height: 50px; background: #e70070; color: #fff; font-size:12px; font-weight: 600; text-transform: uppercase; margin:0; line-height: 50px; border-top-left-radius: 1em; border-top-right-radius: 1em; }
.ui-datepicker .ui-widget-header .ui-icon { display: none !important; background: none !important; position: relative !important; text-indent: 0 !important; width: 100% !important; height: 100% !important; }
.ui-datepicker .ui-datepicker-prev { left:0; top:0; text-align: left; height:100%; width:50px; padding:0 0 0 15px; cursor:pointer; }
.ui-datepicker .ui-datepicker-prev:hover { opacity: .85; text-decoration: none !important; }
.ui-datepicker .ui-datepicker-prev:active { opacity: .5; }
.ui-datepicker .ui-datepicker-prev:before { content: "\ea4d"; font-family: 'boxicons'; font-style: normal; font-weight: normal; text-decoration: inherit; color: #fff; font-size: 20px; line-height: 50px; padding:0; }
.ui-datepicker .ui-datepicker-next { right:0; top:0; text-align: right; height:100%; width:50px; padding:0 15px 0 0; cursor:pointer; color:#fff; }
.ui-datepicker .ui-datepicker-next:hover { opacity: .85; text-decoration: none !important; }
.ui-datepicker .ui-datepicker-next:active { opacity: .5; }
.ui-datepicker .ui-datepicker-next:before { content: "\ea50"; font-family: 'boxicons'; font-style: normal; font-weight: normal; text-decoration: inherit; color: #fff; font-size: 20px; line-height: 50px; padding:0; text-align: right; }
.ui-datepicker .ui-datepicker-next-hover, .ui-datepicker .ui-datepicker-prev-hover { background:none !important; border:0 !important; }
.ui-datepicker .ui-datepicker-calendar th { font-size: 12px; color:#888; padding:1em .3em; }
.ui-datepicker .ui-datepicker-calendar.ui-weekpicker-calendar th { width:12%; }
.ui-datepicker-week-col { text-align: left !important; font-size: 12px; }
.ui-datepicker .ui-datepicker-calendar td { padding:3px; color:#888; }
.ui-datepicker table { margin:0; border-spacing: 0px; border-collapse: separate; }
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { cursor:pointer; background: #ffffff22; border:2px solid #ffffff33; color: #888; border:0; border-radius: 3px; padding:10px 5px; text-align: center; font-weight: 600; }
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover { background:#ffffff55; color:#fff; }
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { background: #e70070; color: #fff; }
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight { border-color: #e70070; }

/* Editor */
.mce-container, .mce-panel { background: #474249 !important; border: none !important; }
.mce-container *, .mce-path-item, .mce-btn, .mce-btn .mce-txt, .mce-btn i, .mce-tab, .mce-menu-item .mce-text, .mce-menu-item .mce-text b { color: #fff !important; }
.mce-tinymce { border: 2px solid #544f56 !important; border-radius: var(--border-radius) !important; }
.mce-tinymce.mce-container:not(.mce-floatpanel) { width: calc(100% - 4px) !important; }
.mce-arrow.mce-arrow-up:after { border-bottom-color: #474249 !important; }
.mce-arrow.mce-arrow-up:before { border-bottom-color: #544f56 !important; }
.mce-textbox, .mce-textbox.mce-multiline, input.mce-textbox, .mce-listbox { background: #fff2 !important; border: 2px solid #fff2 !important; color: #fff !important; }
input.mce-textbox { height: 16px !important; }
.mce-listbox { height: 36px !important; }
.mce-window-head { border-bottom: 2px solid #544f56 !important; }
.mce-toolbar, .mce-statusbar, .mce-edit-area, .mce-tabs, .mce-tabs+.mce-container-body, .mce-tab, .mce-btn { background: #0000 !important; }
.mce-toolbar { border-bottom: 2px solid #fff1 !important; }
.mce-statusbar, .mce-tabs, .mce-tabs+.mce-container-body { border-top: 2px solid #fff1 !important; }
.mce-floatpanel { border: 2px solid #fff1 !important; border-radius: 8px; }
.mce-menu-item.mce-disabled, .mce-menu-item.mce-disabled:hover { background: #0000 !important; }
.mce-menu-item.mce-disabled .mce-text, .mce-menu-item.mce-disabled:hover .mce-text, .mce-menu-item.mce-disabled .mce-ico, .mce-menu-item.mce-disabled:hover .mce-ico { color: #555 !important; }
.mce-window { min-width: 480px !important; }
.mce-tab { border: none !important; padding: 10px 16px !important; }
.mce-tab.mce-active { background: #fff2 !important; }
.mce-btn { border: none !important; padding: 5px !important; }
.mce-menu-item.mce-menu-item-preview.mce-active .mce-text, .mce-menu-item.mce-menu-item-preview.mce-active .mce-ico { color: #474249 !important; }
.mce-btn:hover { background: rgba(255,255,255,0.35) !important; }
.mce-btn-group .mce-btn { margin: 2px 0 5px 0 !important; }
.mce-menu-item:hover { background: #fff5 !important; }
.mce-menu-item:hover .mce-text, .mce-menu-item:hover .mce-text b { color: #000 !important; }
.mce-textbox:not(.mce-multiline).mce-abs-layout-item,
.mce-combobox.mce-abs-layout-item { left: 50% !important; width: 25% !important; }
.mce-label { width: 200px !important; }
.mce-textbox:not(.mce-multiline), .mce-listbox { left: 50% !important; width: 39% !important; }
.mce-textbox:not(.mce-multiline) { margin-bottom: 0 !important; }

/* Responsive */
@media (max-width: 640px) { 
    .hideUnder640 { display:none !important; }

    :root, :root:not([data-theme=dark]), [data-theme=light]  { --padding:1.6em; }
    view[name=login] .logo { max-width:calc(100% - 64px);}
    view[name=reset] .logo { max-width:calc(100% - 64px);}
    view .container { padding:7em 1em 1em; }    
    view[name=dashboard] .tabselector summary, view[name=dashboard] .tabselector summary:focus { margin: 2em 0 0 0; }
    view[name=slideshow] ul.slides-container li.slide, view[name=slideshow] ul.slides-container li.add {width:100%; margin:0 0 10% 0; } 
    view[name=slideshow] ul.slides-container li.add button { aspect-ratio: 16/9;}
    
    view[name=dashboard] .displays { display: block; }
    view[name=dashboard] .box { display: block; padding:1em; margin:0 0 24px 0; }
    view[name=dashboard] .box > div:first-child { display:none; }
    view[name=dashboard] .box .slideshowbuttons { display:none; }
    view[name=dashboard] .box .displaybutton, view[name=dashboard] .box .remotebutton { display:none; }
    view[name=dashboard] .box .settingsbutton summary { margin-top:0; }

    view[name=dashboard] .box.key { display:block; padding:1em; }

    view[name=dashboard] .slideshows { display:none; }
    view[name=dashboard] h4:has(+.slideshows) { display: none; }
    view[name=dashboard] .box.slideshow { display:block; width: 100%;}

    view[name=dashboard] details:has(~.tabset) { display:block; margin-bottom:0; }    
    view[name=dashboard] .tabset input[type=radio] ~ label { display:none; }
    view[name=dashboard] .tabselector:has(ul li:only-child) { display:none; }
    view[name=dashboard] .tabselector:has(ul li:only-child) ~ .tabset section { padding-top:0 !important; }
}

/* Animations */
.fadeIn50 { opacity: 0; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeIn50; }
@keyframes fadeIn50 { 0% { opacity: 0; } 100% { opacity: .5; } }
.fadeFlipIn { opacity: 0; transform-origin: 25% 50%; animation-duration: 1s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(0,1,0,1); animation-name: fadeFlipIn; }
@keyframes fadeFlipIn { 0% { transform: perspective(400px) rotate3d(0,1,0,45deg) scale(.8); opacity: 0; } 100% { transform: perspective(400px) rotate3d(0,1,0,0) scale(1); opacity: 1; } }
.fadeFlipOut { opacity: 1; transform-origin: 50% 100%; animation-duration: 1s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(0,1,0,1); animation-name: fadeFlipOut; }
@keyframes fadeFlipOut { 0% { transform: perspective(400px) rotate3d(1,0,0,0) scale(1); opacity: 1; } 100% { transform: perspective(400px) rotate3d(1,0,0,45deg) scale(.8); opacity: 0;  } }
.fadeZoomIn { opacity: 0; animation-duration: 1s !important; animation-fill-mode: forwards !important; animation-timing-function: cubic-bezier(0,1,0,1) !important; animation-name: fadeZoomIn !important; }
@keyframes fadeZoomIn { 0% { transform: scale(.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.fadeZoomOut { opacity: 1; animation-duration: 1s !important; animation-fill-mode: forwards !important; animation-timing-function: cubic-bezier(0,1,0,1) !important; animation-name: fadeZoomOut !important; }
@keyframes fadeZoomOut { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(.8); opacity: 0; } }
@keyframes tooltip { 0% { opacity: 0; } 100% { opacity: 1; } }

.pulseIn { opacity: 0; animation-duration: .6s !important; animation-fill-mode: forwards !important; animation-timing-function: ease-in-out !important; animation-name: pulseIn !important; }
@keyframes pulseIn { 0% { transform: scale(.95); opacity: 0; } 50% { transform: scale(1.05); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.pulseOut { opacity: 1; animation-duration: .6s !important; animation-fill-mode: forwards !important; animation-timing-function: ease-in-out !important; animation-name: pulseOut !important; }
@keyframes pulseOut { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0; } 100% { transform: scale(.95); opacity: 1; } }