.button {position:fixed;z-index:10;top:0;right:0;width:42px;height:42px;display:flex;align-items:center;background:rgba(255,255,255,.5);backdrop-filter:blur(5px);border:1px solid #444;border-top:0;border-right:0;overflow:hidden;cursor:pointer;transition:.4s;}
.button img {margin:9px;}
.button:hover, .settings-button-active, .layout-button-active {background:rgba(255,255,255,.75);}
.layout-button {right:43px;}
.link-button {top:unset;bottom:0;}
.reset-button {right:0;}
.lang-button {right:43px;width:unset;padding:0 .5rem;gap:.5rem;}
.lang-button img {margin:0;margin-top:3px;}
.aside {}
.layout-cont {position:fixed;z-index:9;top:0;bottom:0;right:-290px;width:290px;padding:70px 15px 0 15px;background:rgba(0,0,0,.5);backdrop-filter:blur(5px);border-left:1px solid #161616;transition:.4s;}
.frames-layouts {display:none;}
.layout-type {margin-top:1rem;padding:1rem;text-align:center;border:1px solid #aaa;cursor:pointer;transition:.4s;}
.frames-layouts .normal {}
.frames-layouts .enhanced {}
.frames-layouts .thumbnail {display:grid;grid-gap:1px;}
.frames-layouts span {padding:2rem;background:var(--soft);}
.frames-layouts strong {margin-top:.5rem;}
.layout-cont-opened {right:0;}
.frames-layouts-opened {display:block;}
.layout-for-4 .normal .thumbnail {grid-template-columns:repeat(2,1fr);}
.layout-for-4 .enhanced .thumbnail {grid-template-columns:repeat(3,1fr);}
.layout-for-4 .enhanced .thumbnail span:first-of-type {grid-column:span 3;padding:3rem;}
.layout-for-9 .thumbnail span {padding:1rem;}
.layout-for-9 .normal .thumbnail {grid-template-columns:repeat(3,1fr);}
.layout-for-9 .enhanced .thumbnail {grid-template-columns:repeat(4,1fr);}
.layout-for-9 .enhanced .thumbnail span:nth-child(5) {grid-column:span 4;padding:2rem;}
.layout-type:hover, .layout-type-selected {border:1px solid var(--green);}
.settings-cont {position:fixed;z-index:9;top:0;bottom:0;right:-320px;width:320px;padding:30px 20px;background:rgba(0,0,0,.5);backdrop-filter:blur(5px);border-left:1px solid #161616;transition:.4s;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.settings-cont-opened {right:0;}
.settings-cont form {width:300px;}
.settings-cont strong {border:1px solid #fff;padding:.25rem .5rem;}
.screen-form {display:flex;flex-direction:column;}
.screen-list {display:grid;grid-auto-flow:column;grid-gap:1px;margin:0 1rem;border:1px solid #fff;border-top:0;border-bottom:0;}
.screen-item {text-align:center;padding:.5rem;cursor:pointer;transition:.4s;font-size:.8rem;}
.screen-item:hover, .screen-item-active {background:var(--soft);color:var(--dark);}
.channel-form {position:relative;min-height:70vh;}
.sortable-list-cont {position:relative;min-height:447px;overflow:scroll;}
.sortable-list {position:relative;margin:0 1rem;}
.sortable-item {position:relative;height:28px;line-height:28px;padding:0 2rem;background:#262626;border:1px solid #262626;cursor:grab;}
.sortable-item img {filter:invert(1);}
.sortable-item:nth-child(odd) {background:#161616;border:1px solid #161616;}
.mask {position:absolute;z-index:1;top:0;bottom:0;left:0;right:0;display:flex;flex-direction:column;pointer-events:none;}
.mask-shown {height:112px;border:1px solid #fff;border-top:0;transition:.4s;}
.mask-hidden {flex:1;background:#000;filter:opacity(.5);backdrop-filter:blur(1px);}
.mask-numbers {position:absolute;z-index:5;top:0;left:5px;bottom:0;display:flex;flex-direction:column;justify-content:flex-start;text-align:center;pointer-events:none;}
.mask-numbers span {height:28px;line-height:29px;opacity:.5;}
.sortable-tutorial {position:absolute;z-index:10;top:1rem;right:1rem;}
.sortable-tutorial img {filter:invert(1) opacity(.75);animation-name:myAnimation;animation-duration:7s;animation-timing-function:linear;animation-iteration-count:infinite; }
.save-button {width:100%;padding:.25rem .5rem;border:1px solid #fff;color:var(--soft);cursor:pointer;text-align:center;}
.save-button i {position:relative;right:0;transition:.4s;}
.save-button:hover i {right:-5px;}