﻿/*
(c) airoo LLC, 2023
*/
html,body,div,ul,ol,li,dl,dt,dd,td,th,h1,h2,h3,h4,h5,h6,p,pre,blockquote,fieldset,form,input,button,textarea {margin:0;padding:0;}h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th {font-size:1.0em;font-weight:normal;font-style:normal;}ul,ol,li {list-style:none;}fieldset,img {border:none;}img {-ms-interpolation-mode:bicubic;}caption, th {text-align:left;}table {border-collapse:collapse;border-spacing:0;}input,textarea,select {font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select {font-size:100%;}button {background-color:transparent;text-decoration:none;}
*,*::before,*::after {box-sizing:border-box;-webkit-user-drag:none!important;-webkit-tap-highlight-color: transparent;-webkit-appearance: none;}

body  {--fs:1vw;--c:#50505f;color: #50505f;--bc:rgba(0,0,0,0.3);--tc:#000000;--wc:#ffffff;font: 400 18px/1.25em system-ui;letter-spacing:0;height:calc(var(--vh, 1vh)*100);overflow:hidden;background-color:#ffffff;}
body * { -webkit-appearance: none!important; }

*:not(input):not(textarea){-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}

h2 { font-size:1.5em;line-height:1.3em;font-weight:700; }
h3 { font-size:1.2em;line-height:1.3em;font-weight:600; }


[mode-black="yes"] {--tc:#ffffff;--wc: rgba(0,0,0,0.85);}

::-webkit-scrollbar{ background:transparent none;width:calc(0.75*var(--fs));height:calc(0.75*var(--fs)); }
::-webkit-scrollbar-button {background:transparent none;width:0px;height:0px;}
::-webkit-scrollbar-track { border-radius:calc(1*var(--fs));background-color:rgba(180,180,180,0.1);}
::-webkit-scrollbar-track-piece { margin:0px;}
::-webkit-scrollbar-thumb { border-radius:calc(1*var(--fs));background-color:var(--bc);}
::-webkit-scrollbar-corner { background:transparent none; }
::-webkit-resizer{background:transparent none!important;width: 0px!important;height: 0px!important;}

input {width:calc(100% - 3px);font: 400 var(--fs)/var(--fs) system-ui;background-color: var(--wc);outline:none;border:0;padding: 5px 8px;}
input:-webkit-autofill{ box-shadow:inset 0 0 0 50px var(--wc)!important;-webkit-text-fill-color:var(--tc);color:var(--tc)!important;}
::-webkit-input-placeholder {text-indent:0px;transition:text-indent 0.7s ease;text-align:center;font-size:80%;color:rgba(120,120,120,1);font-weight:200;}
::-moz-placeholder          {text-indent:0px;transition:text-indent 0.7s ease;text-align:center;font-size:80%;color:rgba(120,120,120,1);font-weight:200;}
:-moz-placeholder           {text-indent:0px;transition:text-indent 0.7s ease;text-align:center;font-size:80%;color:rgba(120,120,120,1);font-weight:200;}
:-ms-input-placeholder      {text-indent:0px;transition:text-indent 0.7s ease;text-align:center;font-size:80%;color:rgba(120,120,120,1);font-weight:200;}
:focus::-webkit-input-placeholder {text-indent:-100vw;}
:focus::-moz-placeholder    {text-indent:-100vw;}
:focus:-moz-placeholder     {text-indent:-100vw;}
:focus:-ms-input-placeholder{text-indent:-100vw;}
::-moz-focus-inner          { padding:0;border:0;text-align:center; }

progress { background-color:rgba(180,180,180,0.2);border:0;width: 100%;height:24px;border-radius:10px;margin: 0 0 1em 0;position:relative;float: left;display:block;overflow: hidden;}
progress::-webkit-progress-bar { background-color:rgba(180,180,180,0.2);border-radius:10px;}
progress::-webkit-progress-value {background:#bccc9c;border-radius:10px;}
progress::-moz-progress-bar { background:#bccc9c;border-radius:10px;}

#storage { background-color:rgba(180,180,180,0.2);border:0;width: 100%;height:24px;border-radius:10px;margin: 0 0 1em 0;position:relative;float: left;display:block;overflow: hidden;}
#storage::-webkit-progress-bar { background-color:rgba(180,180,180,0.2);border-radius:10px;}
#storage::-webkit-progress-value {background:#ee3333;border-radius:10px;}
#storage::-moz-progress-bar { background:#ee3333;border-radius:10px;}

#storage2 { position:absolute;top:0;left:0;background-color:rgba(180,180,180,0);border:0;width: 100%;height:24px;border-radius:10px;display:block;overflow: hidden;}
#storage2::-webkit-progress-bar { background-color:rgba(180,180,180,0);border-radius:10px;}
#storage2::-webkit-progress-value {background:#bccc9c;border-radius:10px;}
#storage2::-moz-progress-bar { background:#bccc9c;border-radius:10px;}


select:focus,input[type="text"]:focus,
input[type="button"]:focus,
input[type="date"]:focus,
input[type="email"]:focus,
textarea:focus { outline:none!important; }
::-webkit-datetime-edit { padding:0;}
::-webkit-inner-spin-button { padding:1px 2px;margin:1px 5px;}
::-webkit-calendar-picker-indicator { margin:0px -10px 0px 0px;padding:8px; }

.slider2 { position:absolute;box-shadow:0px 2px 20px -10px var(--tc),0px 0px 1px 0px var(--tc);bottom:24px;right:50px;left:50px;height:14px;border-radius:20px;background-color:var(--wc);opacity:0.5;}
.slider { position:absolute;left:40px;right:40px;bottom:0px;height:60px;}
::-moz-range-track     { background-color:transparent;width:100%;height:60px;padding:0;margin:0;border:0;}
::-ms-ticks-after,::-ms-ticks-before,::-ms-track { background-color:transparent;color:transparent;border:0;} ::-ms-tooltip { display:none;}
::-ms-fill-lower,::-ms-fill-upper { background-color:transparent;height:60px;}
input[type="range"]    {background-color:transparent!important;width:100%;height: 60px;padding: 0 0.5em;margin: 0;border:0;-webkit-appearance:none;cursor:move;border-radius: 2em;}
::-moz-range-thumb     { background:var(--wc);border-radius:20px;width:40px;height:40px;padding:0;margin:10px 0px;border:0;cursor:move;box-shadow:inset 0px -1px 8px -2px var(--wc),inset 0px -20px 30px -10px rgba(30, 20, 0, 0.3),0px 1px 6px -1px var(--tc);}
::-webkit-slider-thumb { background:var(--wc);border-radius:20px;width:40px;height:40px;padding:0;margin:10px 0px;border:0;cursor:move;box-shadow:inset 0px -1px 8px -2px var(--wc),inset 0px -20px 30px -10px rgba(30, 20, 0, 0.3),0px 1px 6px -1px var(--tc);-webkit-appearance:none;}
::-ms-thumb            { background:var(--wc);border-radius:20px;width:40px;height:40px;padding:0;margin:10px 0px;border:0;cursor:move;box-shadow:inset 0px -1px 8px -2px var(--wc),inset 0px -20px 30px -10px rgba(30, 20, 0, 0.3),0px 1px 6px -1px var(--tc);}
input[type="range"]:focus { outline:none!important;}




textarea,
input {width: 100%;background-color: #fff;outline:none;border:0;font-size: 1em;padding: 0.75em 1em;border-radius: 0.33em;position: relative;box-shadow: inset 0 0 0 0.2px var(--c);}
textarea:-webkit-autofill,
input:-webkit-autofill{-webkit-box-shadow:inset 0 0 0 50px #fff!important;-webkit-text-fill-color:#000!important;color:#000!important;}
textarea::-webkit-input-placeholder,input::-webkit-input-placeholder{text-indent:0px;font-size:0.8em;line-height:2em;transition:text-indent 0.3s ease;text-align:center;color:rgba(0,0,0,0.3);}
textarea::-moz-placeholder,input::-moz-placeholder                  {text-indent:0px;font-size:0.8em;line-height:2em;transition:text-indent 0.3s ease;text-align:center;color:rgba(0,0,0,0.3);}
textarea:-moz-placeholder,input:-moz-placeholder                    {text-indent:0px;font-size:0.8em;line-height:2em;transition:text-indent 0.3s ease;text-align:center;color:rgba(0,0,0,0.3);}
textarea:-ms-input-placeholder,input:-ms-input-placeholder          {text-indent:0px;font-size:0.8em;line-height:2em;transition:text-indent 0.3s ease;text-align:center;color:rgba(0,0,0,0.3);}
textarea:focus,input:focus { background-color:#fff; }
textarea:focus::-webkit-input-placeholder,
input:focus::-webkit-input-placeholder {text-indent:50em;transition:text-indent 0.7s ease;text-align:center;white-space:nowrap;}
textarea:focus::-moz-placeholder,
input:focus::-moz-placeholder      {text-indent:50em; transition:text-indent 0.7s ease;text-align:center;white-space:nowrap;}
textarea:focus:-moz-placeholder,
input:focus:-moz-placeholder       {text-indent:50em; transition:text-indent 0.7s ease;text-align:center;white-space:nowrap;}
textarea:focus:-ms-input-placeholder,
input:focus:-ms-input-placeholder  {text-indent:50em; transition:text-indent 0.7s ease;text-align:center;white-space:nowrap;}

textarea {height:10em;display: block;float: none;width: 100%;font-size:1em;line-height:1.25em;clear: both;margin: 0.5em auto;}

button {position:relative;display:inline-block;vertical-align: middle;width: fit-content;min-height: 2.75em;font-weight: 600;font-family: system-ui;font-size: 1em;line-height: 1.3em;padding: 0 1em;margin: 0;border:0;outline:none!important;cursor:pointer;border-radius: 2em;text-align:center;color:#fff;background-color: #ee3333;}
button span {position:relative;display:block;font-size:0.8em;line-height:1em;padding:0.5em;}
button.r1 {background-color:#f00;color:#fff;border:none;}
button.r2 {background-color:transparent;color:#f00;border: 3px solid #f00;}
button.g1 {background-color:#eee;color:#fff;border:none;}
button.g2 {background-color:transparent;color: rgba(0,0,0,0.4);border: 3px solid rgba(0,0,0,0.2);}
button.a {background-color:transparent;color:#f00;border:0;text-decoration:underline;}
button.a2 {background-color:transparent;color:#000;border:0;text-decoration:underline;}


.but   { position:absolute;top:1em;right:1em;width:2em;height:2em;font-size:1.2em;background-color:#fff;color:#000;border-radius:2em;text-align:center;line-height:2em;cursor:pointer; }
.but.r { background-color:#f00;color:#fff; }

.close {position: absolute;right: 3em;top: 3em;width: 1.5em;height: 1.5em;cursor:pointer;font-size: 0.8em;}
.close::before {content:'';position:absolute;left: -0.25em;top: 0.5em;width: 1.5em;height: 2px;background-color: #999;transform:rotate(45deg);transform-origin:center center;}
.close::after {content:'';position:absolute;left: -0.25em;top: 0.5em;width: 1.5em;height: 2px;background-color: #999;transform:rotate(-45deg);transform-origin:center center;}

#win > .close,
#modal > .close { top:2em;right:2em;z-index:4; }

#click {position:fixed;left:0;top:0;bottom:0;right:0;cursor: pointer;z-index:-1;}
[dash="yes"] #click { z-index:0;}

.window {position:fixed;font-size:1em;line-height:1.3em;top:-50%;left:50%;width: min(100%,32em);height: min(100%,66em);margin:0;margin-right:-50%;transform:translate(-50%,-50%);z-index:1;transition:top 0.5s ease;border-radius:0.5em;padding: 0;overflow: hidden;background: rgba(255,255,255,0.85);box-shadow: 0 -1px 0 0 #fff, 0 0 0.4em -0.3em #000;-webkit-backdrop-filter: blur(20px);backdrop-filter: blur(20px);overscroll-behavior: contain;-ms-scroll-chaining: none;}
.window[all="yes"] {top:50%;}
.window[view="yes"] {top: 50%!important;}
.window p .title { display:block;font-size:1.2em;margin:0.5em 0; }
.window p b {position:relative;display:block;margin:0.1em 0;font-size:0.75em;}
.window button {position:relative;display:block;width: fit-content;padding: 0.5em 1em;margin: 0.5em auto;}
.window span {clear:both;position:relative;display:block;}
.window ul {position: relative;display: block;margin: 0;padding:0;}
.window ul li {width: calc(100% + 6em);float: left;list-style:none;position:relative;display:block;padding: 0.5em 3em;margin: 0 -3em 0 -3em;border-bottom: 1px solid rgba(0,0,0,0.1);}
.window ul li:last-child { border-bottom:none; }
.window ul li[type] { overflow:hidden; }
.window ul li > div {position:relative;margin: 0.5em 0;clear: both;float: left;width: 100%;}
.window ul li > div > b {display: block;font-size: 1em;font-weight: 400;}
.window ul li .n {width: fit-content;margin: 0 0 0.5em 1em;}
.window ul li .d {width: fit-content;font-size: 0.9em;}
.window ul li .s {width: 30%;float:left;clear:none;text-align: left;margin-left: 1em;}
.window ul li .p {width: 25%;float:left;clear:none;margin-left: 1em;line-height: 2em;}
.window h2 {position:relative;width: min(100%,20em);margin: 0 0 1em 0;padding:0;font-weight: 700;font-size: 1.2em;line-height: 1.2em;letter-spacing: 0;color: #000;text-shadow: 0 -1px 0 #fff, 0 0 1em #fff;}
.window h3 {position:relative;font-weight:400;font-size:0.9em;color:#000;margin:0.5em 0;text-align:center; }

.win_menu {position:relative;overflow:hidden;width:calc(100% + 6em);margin: -0.5em -3em 0 -3em;padding: 0.5em 0;box-shadow:inset 0 -1em 2em -2em #0006;}
.window ul.menu {position:relative;overflow:hidden;width: 100%;margin: -0.5em 0;padding:0;box-shadow:inset 0 -1em 2em -2em #0006;}
.window ul.menu li {width:fit-content;list-style:none;position:relative;display:inline-block;padding: 0.5em 1em;margin:0;border:0;cursor:pointer;height: 2.4em;}
.window ul.menu li[act="yes"] { font-weight:600;background-color:#fff;border-top-left-radius:0.5em;border-top-right-radius:0.5em;border-top:1px solid #0003;border-left:1px solid #0003;border-right:1px solid #0003;}

.window ul.line {position:relative;overflow:hidden;width: calc(100% + 2.1em);height: 2em;line-height: 2em;margin: 1em -1.1em -3.1em -1.1em;padding: 0;font-weight: 400;}
.window ul.line li {position:relative;float:left;display: block;width: 20%;height: 100%;padding: 0;margin: 0;border:0;overflow:hidden;text-align: center;color: #0002;}

.win_menu img { height:100%; }

#acc_var {font-size: 1.2em;}
#acc_var ul li p { font-weight:600; }
#acc_var ul li::before {top: 0.5em;}
#acc_var ul li[act="yes"]::before {top: 0.7em;}

#tcolor { clear: both;}
#ex_shapes {min-height:5em;clear: both;}
#ex_papers {width: 100%;}
#ex_papers > div {margin:0.2em 0;width: 100%!important;border-radius:0.3em;box-shadow: inset 0 0 0 1px #0002;}
#ex_papers > div[act="yes"] {box-shadow: inset 0 0 0 1px #0002, 0 0 0 0.25em #fff, 0 0 0 0.5em #0001;margin-bottom: 0.55em;}
#ex_textures,
#ex_ftextures {position: relative;width: 100%;min-height: 12em;float: left;}
#ex_textures > div,
#ex_ftextures > div {margin:0.2em 0;width:100%; }
#room_fcolor {position:absolute;right: 0;bottom: 0;z-index:1;}
#room_jscolor {position: absolute;right: 0;bottom: 0;}
#refile {position:absolute;right: -1em;bottom: 2.5em;}

#exh_export { float:left;}
#exh_import { float:right;}

button { -webkit-animation:none;animation:none; }
button:active { -webkit-animation:op3 0.5s ease-out;animation:op3 0.5s ease-out; }

ul.choise {text-align:left;margin: 0.5em 0 0.5em 0;}
ul.choise li {box-shadow:none!important;padding: 0.3em 0.6em 0.5em 2.2em;border-radius: 1em;margin: 0 0.25em 0 0;width: fit-content;display:inline-block;cursor:pointer;border: none;}
ul.choise li::before {content:'';position:absolute;left: 0.5em;top: 0.35em;font-size: 1.2em;width:1em;height:1em;border-radius:1em;line-height:1em;text-align:center;border: 2px solid #ccc;}
ul.choise li[act="yes"] {font-weight:600;cursor:default;box-shadow: inset 0 0 0 2px #0002!important;}
ul.choise li > b { font-weight:400;color:#000; }
ul.choise li[act="yes"] > b {/* font-weight: 600; */}
ul.choise li[act="yes"]::before {left: 0.5em;top: 0.35em;font-size: 1.2em;background-color: #fff;border:none;box-shadow: inset 0 0 0 1em #0002;}
ul.choise li[hid="yes"] { opacity:0.5; }
ul.choise li p { font-size:0.8em;line-height:1.3em; }

.onoff {position:relative;width:100%;clear:both;overflow: hidden;margin: 0 0 1em 0;}

.onoff[act="no"] [act] {display:none;}
.onoff[act="no"] ul.choise li[act] {display:inline-block;}
.onoff[act="no"] [act='yes'] {display:block;}
.onoff[act="no"] button {display:block;position: absolute;bottom: 0;right: 0;margin: 0;font-size: 0.8em;background-color: #eeeeee;color: #444;font-weight: 400;font-family: 'system-ui';}
.onoff[act="yes"] button { display:none; }

#cw_on[act] {display:none;}
#cw_on[act='yes'] {display:block;}

.fl { position:relative;height:2em;clear:both;width:100%;margin:1em 0!important;white-space:nowrap;font-size:0.8em;line-height:1.3em;padding:0!important;cursor:pointer;}
.fl .c { position:absolute;left:0;top:0;font-size:2em;width:1.1em;height:1.1em;margin:0!important;background-color:#fff;border-radius:1em;line-height:1em;text-align:center;box-shadow:0 0 0 1px rgba(0,0,0,0.5); }
.fl:hover .c,.fl[act="yes"] .c { background-color:#eee;box-shadow:inset 0 0 0 5px #fff, 0 0 0 1px rgba(0,0,0,0.5); }
.fl .n { position:absolute;left:3em;top:0;width:20em!important;font-size:0.8em;margin:0 0 1em 0!important;padding:0.5em 1em!important;box-shadow: 0 0 0 1px rgba(0,0,0,0.5);border-radius: 2em;overflow:hidden;}
.fl:hover .n { background-color:#eee;box-shadow:inset 0 0 0 5px #fff, 0 0 0 1px rgba(0,0,0,0.5); }
.fl .s { position:absolute;left:23.5em;top:0.1em;width:7em!important;font-size:0.8em;line-height:1.3em;font-weight: 400!important;margin:0!important;padding:0!important;}
.fl .p { position:absolute;left:23.5em;top:1.2em;width:7em!important;font-size:0.8em;line-height:1.3em!important;font-weight:400!important;margin:0!important;padding:0!important;}

.exhibits .wal { position:relative;float:left;height:1px;clear:both;width:100%;margin:0.5em 0!important;padding:0!important;cursor:pointer;border-bottom:1px solid #000;}
.exhibits .skp { position:relative;float:left;height: 1.6em;clear:both;width: calc(100% + 10em);font-weight: 400;margin: 0.5em -5em 0 -5em!important;padding:0!important;cursor:pointer;text-align:center;border: 1px solid rgba(0,0,0,0.1);}
.exhibits .skp::before {content: 'v';font-size: 0.8em;}

.exhibits .img {position:relative;display: block;height:9em;width: 100%;margin: 0.5em 0;font-size:1em;line-height:1.3em;padding: 0;cursor:pointer;border-radius: 0.33em;border: none;box-shadow: 0 0 0 1px #0002;}
.exhibits .img .i {position:relative;width:calc(100% - 12em);height:100%;margin:0 6em!important;padding:0!important;overflow:hidden;}
.exhibits .img .i img {display:block;width:100%;height:100%;object-fit: contain;object-position:center;}
.exhibits .img .c  {position:absolute;left: 1em;top:1em;width:2em!important;height: 2em;font-size: 0.8em;line-height: 2em;font-weight: 700!important;margin:0!important;padding:0!important;text-align: center;z-index: 1;background-color: #f00;color: #fff;border-radius: 1em;}
.exhibits .img .n  {display:none;}
.exhibits .img .s {position:absolute;width:fit-content;right: -1.5em;top: 0;font-size: 0.9em;background-color: rgba(240,240,240,0.75);padding:0 0.5em;border-radius:1em;}
.exhibits .img .i0,
.exhibits .img .i2 {position:absolute;width:fit-content;right: -1.5em;bottom: 0;font-size: 0.9em;background-color: rgba(240,240,240,0.75);padding:0 0.5em;border-radius:1em;}
.exhibits .img .i0 {max-width: calc(100% - 1em);left: -1.5em;right:auto;bottom:auto;top: 0;}
.exhibits .img .i1 {display:none;}
.exhibits .img .close {position:absolute;left: 1.3em;top: auto!important;bottom: 1em;font-size: 0.8em;width: 1.5em;height: 1.6em;}
.exhibits .img .edt,
.exhibits .img .add {position:absolute;right: -1.5em;bottom: 2em;font-size: 0.9em;}
.exhibits .img .edt {top: 1em;bottom: auto;}
.exhibits .img.selected { background-color:rgba(0,0,0,0.1)!important;box-shadow:0 0 1px 0 #000; }
.exhibits .img.dragged { background-color:rgba(0,150,0,0.1)!important;}

.exhibits2 {position:relative;display:block;margin: 1em 0!important;}
.exhibits2 .img {position:relative;float:left;height: 3.5em;clear:both;width: calc(100% + 10em);margin:0 -5em!important;font-size:1em;line-height:1.3em;padding: 0!important;cursor:pointer;border-radius: 0.33em;border: none!important;}
.exhibits2 .img .i0 {position:absolute;left: 6.2em;top: 0;width:30em!important;font-size:0.8em;line-height:1.3em!important;font-weight:400!important;margin:0!important;padding:0!important;transform: scaleX(0.9);transform-origin: left;white-space: nowrap;}
.exhibits2 .img .i1 {position:absolute;left: 6.2em;top: 1.5em;width:30em!important;font-size: 0.8em;line-height:1.1em!important;font-weight: 600!important;margin:0!important;padding:0!important;white-space:normal;transform: scaleX(0.9);transform-origin: left;white-space: nowrap;}
.exhibits2 .img .s  {position:absolute;left: 6.2em;bottom: 0;width:fit-content;font-size:0.8em;line-height:1.3em!important;font-weight:400!important;margin:0!important;padding:0!important;transform: scale(0.9);transform-origin: left top;white-space: nowrap;}
.exhibits2 .img .close {position:absolute;right: 5em;top: 1em;font-size:0.7em;}
.exhibits2 .img .add {position:absolute;right: 6em;top: 0.5em;font-size: 0.8em;}


#dash {position: fixed;top: -100%;left:50%;transform:translate(-50%,-50%);margin-right:-50%;z-index:21;transition:top 1s ease;width: 48em;}
[dash="yes"] #dash {top:50%;}
[dash="yes"] #click {z-index:20;-webkit-backdrop-filter: blur(10px);backdrop-filter: blur(10px);background-color: rgba(255,255,255,0.33);}
#dash .in {position: relative;padding: 0;border-radius: 0.33em;overflow:hidden;background: rgba(255,255,255,0.75);box-shadow: 0 0 0 1px #fff,inset 0 0 5em 0 #fff, 0 0 2em -1.5em #000;-webkit-backdrop-filter: blur(30px);backdrop-filter: blur(30px);}
#dash_left  {position:relative;float:left;width: 14em;padding: 0;margin: 2em 2em 4em 4em;max-height: 100vh;overflow-y: auto;overflow-x: hidden;}
#dash_center{position:relative;float:left;width: calc(100% - 20em);max-height: 100vh;padding: 4em 4em 3em 0;overflow-y: auto;overflow-x:hidden;}
#dash_right {position:relative;float:left;width:30%;padding: 2em 2em 1em 2em;}
#dash_left .logo {position:relative;width: 100%;height: 2em;margin: 2em 0 3em 0;background: url(/logo.svg) left center / contain no-repeat;}

#dash_center h2 {font-weight:400;font-size:1.5em;line-height:1.2em;letter-spacing:0;margin-bottom: 1em;}
#acc_help {top: 3em;right: 3.4em;background-color:#0001;}
#acc_help:before { content:'?'; }
#acc_add {top: 3em;right: 6em;}
#acc_add:before { content:'+'; }

#acc_left div,
.drb {position:relative;width: 100%;float: left;margin: 0 0 1em 0;cursor:pointer;}
#acc_left div span,
.drb span {position: relative;display:block;font-weight: 700;font-size: 1.1em;line-height: 1.3em;padding:0;}
#acc_left div button,
.drb button {float:right;width:fit-content;min-height: 3em;font-size: 1em;line-height: 1em;padding:0 1em;margin: -1.3em 0 0 0;text-align: center;}
#acc_size2 {font-size: 0.7em!important;margin: -1.5em 0 0 0!important;}

#acc_exit {position:relative;float:left;margin: 1em 0 0 0;}

.store,
#dash_center .prm {position:relative;float:left;width: 100%;margin: 0 1em 0.5em 0;border-radius:0.5em;padding: 1.3em 1em;transition:box-shadow 0.25s ease;cursor:pointer;box-shadow: inset 0 0 0 1px #0002;overflow: hidden;}
.store:hover,
#dash_center .prm:hover { box-shadow:inset 0 0 0 2px #0003;background-color:rgba(255,255,255,1); }
#dash_center .prm .m {position:absolute;top: 0;right:0.8em;width:1em;height:1em;background:url(menu.png) center center / auto 100% no-repeat;}
.store .id,
#dash_center .prm .c {position:absolute;top: 0.5em;left: 1.1em;font-size: 0.9em;font-weight: 400;margin: 0;}
.store .name,
#dash_center .prm .n {position: relative;font-size: 1.1em;width: 100%;margin: 0.6em 0 0.7em 0;font-weight: 700;}
#dash_center .prm .shape { position:absolute;top:3.8em;width:2.5em;height:2.5em; }
#dash_center .prm .shape span { position:absolute;top:0;left:0;font-size:0.75em;line-height:2em;width:2em;height:2em;background-color:#eee;font-weight:600;border-radius:1em;text-align:center;}
#dash_center .prm .shape img { margin:0.5em;width:100%;height:100%;}
#dash_center .prm .type { position:absolute;top: 4.6em;left:4em;width: 1.8em;height: 1.8em;background:url(photo.png) center center / auto 100% no-repeat;}
#dash_center .prm .type.report { background-image:url(report.png); }
#dash_center .prm .type.promo  { background-image:url(promo.png); }
#dash_center .prm .y {position:absolute;right: 1.1em;bottom: 0.5em;font-weight: 400;font-size: 0.9em;margin: 0;}
#dash_center .prm .f { position:absolute;top:9.3em;font-size:0.75em;background:url(floor.png) left center / auto 80% no-repeat;padding-left:1.5em; }
#dash_center .prm .a { position:absolute;top:9.3em;left:5em;font-size:0.75em;background:url(door.png) left center / auto 80% no-repeat;padding-left:1.5em; }
#dash_center .prm .t { position:absolute;top:9.3em;left:10em;font-size:0.75em;background:url(stat.png) left center / auto 80% no-repeat;padding-left:1.5em; }
#dash_center .prm .r { position:absolute;top:11.3em;font-size:0.75em;background:url(plan.png) left center / auto 80% no-repeat;padding-left:1.5em; }
#dash_center .prm .o { position:absolute;top:11.3em;font-size:0.75em;background:url(file.png) left center / auto 80% no-repeat;padding-left:1.5em; }
.store .size,
#dash_center .prm .s {position:absolute;width:fit-content;bottom:0.5em;left: 1.1em;font-size: 0.9em;line-height: 1.4em;font-weight: 400;background: url(storage.png) left center / auto 80% no-repeat;padding: 0 0 0.1em 1.3em;text-align: left;margin: 0;}
#dash_center .prm .p {position:absolute;width:fit-content;bottom: 0.4em;left: calc(50% - 4em);font-size: 1em;line-height: 1em;font-weight:700;background-color:#e33;border-radius: 2em;padding: 0.25em 1em;color: #fff;}
#dash_center .prm .d {position:absolute;width: fit-content;right: 1.2em;top: 0.5em;font-size: 0.8em;font-weight: 400;margin: 0;}
.store button {position:absolute;width:fit-content;right:1em;bottom:1em;font-size:0.8em;line-height:1em;margin:0; }

.dcenter {margin: 0;padding:0;overflow: hidden;}
.dcenter .dcblk {list-style:none;position:relative;width: 100%;display:block;padding: 0.5em 0;margin: 0 0;overflow: hidden;border-bottom: 1px solid rgba(0,0,0,0.1);}
.dcenter .dcblk:last-child { border-bottom:none; }
.dcenter .dcblk > p {position:relative;text-align:left;margin: 0.5em 0;}
.dcenter .dcblk > div {position:relative;text-align:left;margin: 0.5em 0;}
.dcenter .dcblk > div > span {display: block;font-size: 0.9em;font-weight: 400;}
.dcenter .dcblk .n {width: calc(100% - 5.5em);float: left;text-align:left;}
.dcenter .dcblk .d {width: 4.5em;margin-right: 1em;float:left;clear:none;text-align: right;}
.dcenter .dcblk .s {width: 30%;float:left;clear:none;text-align: left;margin-left: 1em;}
.dcenter .dcblk .p {width: 25%;float:left;clear:none;margin-left: 1em;line-height: 2em;}
.dcenter .dcblk button.right {position:relative;float:right;}

#win[view="yes"] {z-index: 21;}
#win[mini="yes"] {height: var(--max,20em)!important;}
#win[bottom="yes"] {height: var(--max,20em)!important;top: auto!important;bottom: -11em!important;}
#win input {display: block;margin: 0.5em auto 0.75em auto;}
#win input.field {margin: 0.5em  auto;}
#win_top {position:absolute;top:0;left:0;width:100%;padding: 1.5em 3em 0 3em;cursor:move;overflow: hidden;z-index: 3;background-color:#0001}
#win_top:hover {background: -webkit-linear-gradient(#e0e0e0 0%, #e0e0e0cc 100%);background:linear-gradient(#e0e0e0 0%, #e0e0e0cc 100%);}
#win_main {position:absolute;top: 6em;left: 0;width:100%;bottom: 0;padding: 1em 3em;overflow-x: hidden;overflow-y:scroll;background-color: #fff;}
[nomenu="yes"] #win_main { top:4.6em;}

#ex_img {position:relative;width:100%;margin: 0 0 0.5em 0;clear:both;}
#ex_img img { width:100%;margin:0 0 1em 0;border-radius:0.5em;border:1px solid #0003; }

#yt_img { position:relative;width:100%;overflow:hidden;margin:0 0 1em 0;border-radius:0.5em;border:1px solid #0003;clear:both; }
#yt_img img { width:100%;margin:-11% 0; }

#modal[view="yes"] {z-index: 21;}
#modal[mini="yes"] {height: var(--max,20em)!important;}
#modal[bottom="yes"] {height: var(--max,20em)!important;top: auto!important;bottom: -11em!important;}
#modal input {display: block;margin: 0.5em auto 0.75em auto;}
#modal input.field {margin: 0 auto;}
#modal_top {position:absolute;top:0;left:0;width:100%;height: 4.5em;padding: 1.5em 3em;cursor:move;z-index: 1;overflow: hidden;background: -webkit-linear-gradient(#eee 0%, #eeec 100%);background: linear-gradient(#eee 0%, #eeec 100%);z-index: 3;}
#modal_top:hover { background: -webkit-linear-gradient(#e0e0e0 0%, #e0e0e0cc 100%);background:linear-gradient(#e0e0e0 0%, #e0e0e0cc 100%); }
#modal_main {position:absolute;top:0;left:0;width:100%;height:100%;padding: 5em 3em 1em 3em;overflow-x: hidden;overflow-y:scroll;}
#gokey {width:100%;text-align: center;}
#paykey {width:5em;text-align: center;}
#gopay {position:relative;margin: 0 auto;width:auto;padding: 0 1.2em;}

#b_yes {float: left;width:calc(50% - 0.5em);}
#b_no  {float: right;width:calc(50% - 0.5em);background-color:#00000011;font-weight: 400;color:#000000bb;}

.room { position:relative;width:100%;}
.room .id {position: absolute!important;left:0;top:0;font-size:1em;line-height:1em;margin: 0!important;}
.room .name {position: absolute!important;left:1.5em;top:0;width:6em;font-size:0.75em;line-height:1.3em;margin: 0!important;font-weight: 400!important;}
.room .shape {position: relative;padding:0;width:3.5em;height:7em;font-size:0.75em;line-height:1.3em;margin: 0 0 0 1.5em!important;}
.room .shape img { width:100%; }
.room button {position: relative;float:right;width:min-content;font-size:0.8em;top:0;margin:0 0 0.5em 0.5em;word-break: normal;}
.room .type {position: absolute!important;top:0;left:4em;width:2em;height:2em;background:url(photo.png) center center / auto 100% no-repeat;}
.room .type.report { background-image:url(report.png); }
.room .type.promo  { background-image:url(promo.png); }

button input[type="file"] { position:absolute;left:0;top:0;width:1;height:1px;padding:0;margin:0;opacity:0;border:none;cursor:pointer; }

.prod {position:relative;float:left;width: 100%;background-color:rgba(255,255,255,0.75);margin: 0 1em 0.5em 0;border-radius:0.5em;transition:box-shadow 0.25s ease;cursor:pointer;overflow: hidden;box-shadow: inset 0 0 0 1px #0002;cursor:default;}
.prod .id    {position: absolute;top:1em;left:1em;width:fit-content;font-size:0.8em;font-weight: 400;margin: 0;}
.prod .name  {position: absolute;top:2.5em;left:0.8em;width:8em;overflow:hidden;font-weight: 700;line-height:1em;margin: 0;}
.prod .price {position: absolute;bottom:1em;left:1em;width:fit-content;font-size:0.8em;font-weight: 400;margin: 0;}
.prod .shape {position:relative;float:right;width: calc(100% - 9em);height: 8em;margin: 0;background: center center / auto 200% repeat;}
.prod .shape img {position:relative;width:100%;height:100%;border:0;object-fit: cover;}
.prod[typ="shape"] .shape img { object-fit:contain; }
.prod .num   {position: absolute;bottom: 1em;left:6em;width: 4em;font-size:0.8em;font-weight: 400;text-align: right;}

html, body {position:fixed;left:0;bottom:0;right:0;height:calc(var(--vh, 1vh) * 100);overflow:hidden;}

[view="yes"] { display:block; }
[view="no"] { display:none!important; }
[v1iew="yes"] { visibility:visible; }
[v1iew="no"] { visibility:hidden; }

.cursor { cursor:pointer; }
.justify { text-align:justify; }
.center { text-align:center; }
.left { text-align:left; }
.right { text-align:right; }
.middle { vertical-align:middle; }
.bottom { vertical-align:bottom; }
.nobottom { padding-bottom:0px!important;margin-bottom:0px!important; }

a { color:inherit;text-decoration:none; }
i {font: 600 11px/14px system-ui;display:inline-block;padding:0;text-transform: uppercase;}
sup { font:400 10px/10px system-ui;margin-left:-1px; } 
.hr0 {position: relative;height:0px;background:transparent;margin:0px 0px 0px 0px;text-align: center;overflow: hidden;opacity:1;clear: both!important;}
.hr {position: relative;height:0px;background:transparent;margin:0px 0px 20px 0px;text-align: center;overflow: hidden;opacity:1;clear: both!important;}

.col  {position:relative;display:inline-block;width:calc(33.333%);margin:0px 0px 20px 0px;padding:0;vertical-align:top;overflow:hidden;}
.col1 {position:relative;display:inline-block;width:calc(25%);margin: 0px 0px 20px 0px;padding:0;vertical-align:top;overflow:hidden;}
.col2 {position:relative;display:inline-block;width:calc(50%);margin: 0.5em 0;padding:0;vertical-align:top;}
.col3 {position:relative;display:inline-block;width:calc(66.666%);margin:0px 0px 20px 0px;padding:0;vertical-align:top;}
.col4 {position:relative;display:inline-block;width:100%;margin:0px 0px 20px 0px;padding:0;vertical-align:top;}
.col5 {position:relative;display:inline-block;width:50%;margin:0px 0px 0px 0px;padding:0;vertical-align:top;}

.ani {-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;}
.a1 { -webkit-animation-delay:0s;animation-delay:0s; }
.a2 { -webkit-animation-delay:0.5s;animation-delay:0.5s; }

.op {-webkit-animation-name:op;animation-name:op;}
@-webkit-keyframes op {
  0%,30%,100% {visibility:visible;-webkit-transition-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);transition-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);}
  0%    {visibility:visible;opacity:0;-webkit-transform:translate3d(0,1000px,0) scale(0.00001);transform:translate3d(0,1000px,0) scale(0.00001);}
  30% {visibility:visible;opacity:0.5;-webkit-transform:translate3d(0,500px,0) scale(0.0001);transform:translate3d(0,500px,0) scale(0.0001);}
  100%  {visibility:visible;opacity:1;-webkit-transform:translate3d(0,0,0) scale(1);transform:translate3d(0,0,0) scale(1);}
}
@keyframes op {
  0%,30%,100% {visibility:visible;-webkit-transition-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);transition-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);}
  0%    {visibility:visible;opacity:0;-webkit-transform:translate3d(0,1000px,0) scale(0.00001);transform:translate3d(0,1000px,0) scale(0.00001);}
  30% {visibility:visible;opacity:0.5;-webkit-transform:translate3d(0,500px,0) scale(0.0001);transform:translate3d(0,500px,0) scale(0.0001);}
  100%  {visibility:visible;opacity:1;-webkit-transform:translate3d(0,0,0) scale(1);transform:translate3d(0,0,0) scale(1);}
}

.op2 {-webkit-animation-name:op;animation-name:op;}
@-webkit-keyframes op2 {
  0%    {opacity:0;left:-100px;visibility:visible;}
  50%  {opacity:1;left:0px;visibility:visible;}
  100%  {opacity:1;left:0px;visibility:visible;}
}
@keyframes op2 {
  0%    {opacity:0;left:-100px;visibility:visible;}
  50%  {opacity:1;left:0px;visibility:visible;}
  100%  {opacity:1;left:0px;visibility:visible;}
}

@-webkit-keyframes op3 {
  0%    {opacity:0;transform:scale(1);visibility:visible;}
  50%  {opacity:1;transform:scale(0.9);visibility:visible;}
  100%  {opacity:1;transform:scale(1);visibility:visible;}
}
@keyframes op3 {
  0%    {opacity:0;transform:scale(1);visibility:visible;}
  50%  {opacity:1;transform:scale(0.9);visibility:visible;}
  100%  {opacity:1;transform:scale(1);visibility:visible;}
}

#live {position:fixed;z-index:-1;left:0;top:0;right:0;bottom:0;background-color:#fe90;text-align:center;-webkit-backdrop-filter: blur(40px);backdrop-filter: blur(40px);
       display:-webkit-box;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center; }
#live svg {position:relative;max-width:50vw;max-height:min(20em,50vw);}
#live[top="yes"] {z-index:400;background-color: #fff6;background: -webkit-radial-gradient(#fff9 0%, #fff0 90%);background: radial-gradient(#fff9 0%, #fff0 90%);}
#live[top="yes"] svg { -webkit-filter: drop-shadow( 0 0 50px rgba(255,255,255,1) );filter: drop-shadow( 0 0 50px rgba(255,255,255,1) ); }
#live_msg { position: absolute;bottom: 25%;height:2em; font-size: 1.25em;}


#mw_view { -webkit-animation-name:none;animation-name:none; }
.screen_off {-webkit-animation:screen_off 2s ease 0s alternate;animation:screen_off 2s ease 0s alternate; }
@-webkit-keyframes screen_off { 0% {opacity:1;} 100% {opacity:0;} }
@keyframes screen_off { 0% {opacity:1;} 100% {opacity:0;} }
.screen_on {-webkit-animation:screen_on 5s ease 0s alternate;animation:screen_on 5s ease 0s alternate; }
@-webkit-keyframes screen_on { 0% {opacity:0;} 33% {opacity:1;} 100% {opacity:1;} }
@keyframes screen_on { 0% {opacity:0;} 33% {opacity:1;} 100% {opacity:1;} }

#msg {position:fixed;opacity:1;top:50%;left:150%;transform:translate(-50%,-50%);margin-right:-50%;width:25em;max-width:100vw;background-color: #f6f6f6f6;box-shadow: 0 0 0 1px #fff, 0 0 1em 0 #fff, 0 0 5em 0 #fff;padding:0;font-weight:400;font-size: 1em;line-height:1.25em;padding: 3em;border-radius:0;color:#000;text-align:center;z-index:500000000;}
#msg { -webkit-transition:all 0.3s ease-out;-moz-transition:all 0.3s ease-out;-o-transition:all 0.3s ease-out;transition:all 0.3s ease-out;}
#msg[view="yes"] {
-webkit-animation:msg 3s 1 alternate ease-in-out;
   -moz-animation:msg 3s 1 alternate ease-in-out;
     -o-animation:msg 3s 1 alternate ease-in-out;
        animation:msg 3s 1 alternate ease-in-out;
}
@-webkit-keyframes msg { 5%,95% { opacity:1;left:50%;} 0%,100% { opacity:0;left:150%;} }
   @-moz-keyframes msg { 5%,95% { opacity:1;left:50%;} 0%,100% { opacity:0;left:150%;} }
     @-o-keyframes msg { 5%,95% { opacity:1;left:50%;} 0%,100% { opacity:0;left:150%;} }
        @keyframes msg { 5%,95% { opacity:1;left:50%;} 0%,100% { opacity:0;left:150%;} }

.section { opacity:1!important;display:flex;flex-direction:column;align-content:stretch;height:100%;background:none!important; }
.section .container { flex-basis:100%;align-items:center;display:flex; }
.container .row { width:100%; }

.wait { height:calc(1*var(--fs));vertical-align:middle;line-height:1em;animation: wait 1s infinite linear; }
@-webkit-keyframes wait {
  0% { transform:rotate(0deg); }
  100% { transform:rotate(360deg); }
}
@keyframes wait {
  0% { transform:rotate(0deg); }
  100% { transform:rotate(360deg); }
}
.canvas-container {position:absolute;width:100vw;height:calc(var(--vh, 1vh) * 100);left:0;top:0;display:block;margin: 0;overflow:hidden; }
.canvas-container canvas { position:relative;width:100%;height:100%;z-index:2; }
.canvas-origin, 
.canvas-copy { width:100%;position:relative;height:calc(var(--vh, 1vh) * 100);}

.canvas-copy { dispay:none; }


.btn {display:block;position:absolute;z-index:11;cursor:pointer;width: 3em;height: 3em;text-align:center;border:0;border-radius: 1.5em;font-size: 1em;line-height: 3em;-webkit-user-select:none;user-select:none;transition:all .2s;overflow:hidden; }
.btn img {position:absolute;top:25%;left:25%;width:50%;height:50%;outline:none!important;-webkit-user-select:none;user-select:none;}

.btn-lgo {left:1.5em;top:1.5em;width:7em;height:2em;margin:0;background:#ffffffe0 url(/logo.svg) center center / auto 50% no-repeat;}
.btn-mpr {right: calc(4.6em);top:1.5em;border-top-right-radius: 0.33em;border-bottom-right-radius: 0.33em;display:none;}
.btn-exp {left: calc(50% - 4.5em - 2px);top:1.5em;border-top-right-radius: 0.33em;border-bottom-right-radius: 0.33em;}
.btn-fil {left: calc(50% - 1.5em);top:1.5em;border-radius: 0.33em;}
.btn-frm {left: calc(50% + 0.025em);top:1.5em;border-radius: 0.33em;}
.btn-rom {left: calc(50% + 1.5em + 2px);top:1.5em;border-top-left-radius: 0.33em;border-bottom-left-radius: 0.33em;}

.btn-mnu { left:1.5em;top:1.5em; }
.btn-acc {right:1.5em;top:1.5em;}
.btn-qrc { left:1.5em;bottom:1.5em; }
.btn-tlk {right:1.5em;bottom:1.5em;}

.btn-end {position:relative;float:left;width:100%;margin: 0.5em 0;}
.btn-plk {position:absolute;right:3.5em;bottom:0;}
.btn-max {position:relative;float:right;}
.btn-min {position:relative;float:right;}
#mw_wnd[rzm="vTalk"][max="no"] .btn-min { display:none; }
#mw_wnd[rzm="vTalk"][max="yes"] .btn-max { display:none; }


.btn-vol,
.btn-mic,
.btn-cam {position:relative;float:left;margin-right:0.5em;transition:all 0.75s ease-out;}
.btn-vol::before,
.btn-mic::before,
.btn-cam::before,
.btn-plk::before { content:'';position:absolute;top:50%;left:0;width:3em;height:1px;background-color:#fff0;transform:rotate(-45deg); }
.btn-vol[act="yes"],
.btn-mic[act="yes"],
.btn-cam[act="yes"],
.btn-plk[act="yes"] { opacity:1;background-color:#3a3; }
.btn-vol[act="no"],
.btn-mic[act="no"],
.btn-cam[act="no"],
.btn-plk[act="no"] { opacity:0.5;background-color:#666; }
.btn-vol[act="no"]::before,
.btn-mic[act="no"]::before,
.btn-cam[act="no"]::before,
.btn-plk[act="no"]::before { background-color:#fff; }

.btn-pay {left:calc(50% - 1.5em);top:5em; }
.btn-pay img {animation: alert 1s infinite alternate ease-in-out;}
@-webkit-keyframes alert {0% {transform:scale(1) rotate(0deg);} 100% {transform:scale(1.33) rotate(10deg);}}
@keyframes alert {0% {transform:scale(1) rotate(0deg);} 100% {transform:scale(1.33) rotate(10deg);}}

@-webkit-keyframes pulse { 45%,55% { box-shadow:0 0 0 0.5em #fffc;} 0%,100% { box-shadow:0 0 1em 5em #fff0;} }
@keyframes pulse { 45%,55% { box-shadow:0 0 0 0.5em #fffc;} 0%,100% { box-shadow: 0 0 2em 5em #fff0,0 0 0 0.5em #fff;} }

.btn-tlk[act="yes"] {animation: pulse 2s infinite alternate ease-in-out;}
.btn-tlk[act="yes"] img {animation: alert 1s infinite alternate ease-in-out;}

.btn-dem {left: 2em;top:2em;width: 12em;font-weight:600;font-size: 0.8em;}
.btn-glr { left:1.5em;top:1.5em; }
.btn-d2d { right:1.5em;top:1.5em;}

.btn-edt {display:none;left:1.5em;top:4.5em;}
body[mode-edt="yes"] .btn-edt { display:block; }

.btn-add { left:1.5em;top:4.5em; }
body[mode-edt="yes"] .btn-add { display:none; }

.stick {position:absolute;left: calc(50% - 3em);bottom:0.5em;width:6em;height: 6em;border-radius:50%;z-index:10;box-shadow:inset 0 0.5em 0.5em -0.5em #0006, inset 0 -0.5em 0.5em -0.5em #fff9, 0 0 0 1px #0003;}
#stick {position:absolute;left: 1.5em;top: 1.5em;width: 3em;height: 3em;border-radius:50%;background-color: #ee3333;}

.j1scolor {position:absolute;left:0;top:0;width:6em;height:6em;border-radius:50%;z-index:10;box-shadow:inset 0 0.5em 0.5em -0.5em #0006, inset 0 -0.5em 0.5em -0.5em #fff9, 0 0 0 1px #0003;background: url(jscolor.png) center center / 100% auto no-repeat;}
#j1scolor { position:absolute;left:1.5em;top:1em;width:3em;height:3em;border-radius:50%;background-color: #ff0000c0;}

.jscolor {position: absolute!important;left: -1.66em;top: -2.166em;width: 16em;height: 16em;border-radius:50%;z-index:10;background: url(jscolor.png) center center / 100% auto no-repeat;}
#jscolor {position: relative;left: calc(50% - 1.5em);top: calc(50% - 1.5em);width:3em;height:3em;margin: 0;border-radius:50%;background: url(move.svg) center center / 45% auto no-repeat;box-shadow: inset 0px -0.15em 0.2em -0.1em #fff, inset 0px -0.5em 1em -0.5em rgb(0 0 0 / 40%), 0 0 0.2em 0 #0009;}



#btn-rol { position:absolute;left:0;width:3em;height:calc(100% - 20em);top:10em;background-color:#00000009;z-index:2;border-top-right-radius:3em;border-bottom-right-radius:3em;box-shadow:0 0 10px -5px #ffffff,inset 0 0 10px -8px #000;}
#btn-rol:hover { background-color:#00000033; }
#btn-ror { position:absolute;right:0;width:3em;height:calc(100% - 20em);top:10em;background-color:#00000009;z-index:2;border-top-left-radius:3em;border-bottom-left-radius:3em;box-shadow:0 0 10px -5px #ffffff,inset 0 0 10px -8px #000;}
#btn-ror:hover { background-color:#00000033; }

.btn-prw { display:none;left: calc(50% - 6.1em);bottom:1.5em;}
body[mode-tour] .btn-prw { display:block; }

.btn-nxt { display:none;left: calc(50% + 3.1em);bottom:1.5em;}
body[mode-tour] .btn-nxt { display:block; }

.btn-ext { display:none;left:1.5em;bottom:1.5em; }
body[mode-tour] .btn-ext { display:block; }

.btn-ply { display:none;right:1.5em;bottom:1.5em;} 
body[mode-tour] .btn-ply { display:block; }
body[mode-tour="yes"] .btn-ply { display:none; }

.btn-pse {display:none;right: 1.5em;bottom: 1.5em;}
body[mode-tour="yes"] .btn-pse { display:block; }

.btn-c { left:calc(50% - 1.5em);bottom:1.5em;background:#000 url(/construction.svg) center center / auto 60% no-repeat;color:#fff;white-space:nowrap;display:none; }
body[mode-c="yes"] .btn-c {background-color:var(--bc);width:calc(11*var(--fs));margin:0 calc(-4*var(--fs));background-position:calc(0.5*var(--fs)) center;}
body[mode-c="yes"] .btn-c::before { content:'Control mode';padding:0 calc(0.75*var(--fs)) 0 calc(2.75*var(--fs));text-transform:uppercase;font-size:1em; }

body[mode-vr="yes"] .canvas-container { max-width:initial; }
body[mode-vr="yes"] .canvas-origin, body[mode-vr="yes"] .canvas-copy { width:50%;float:left; }
body[mode-vr="yes"] .canvas-copy { z-index:auto; }
body[mode-vr="yes"] .btn-fs, 
body[mode-vr="yes"] .btn-fwd, 
body[mode-vr="yes"] .btn-c, 
body[mode-vr="yes"] .btn-mnu { display: none!important; }

#outer { background-color:var(--wc);transform:none!important;box-shadow:0 0 0.75vw -0.25vw var(--tc);}
h1 {position:relative;float:left;color:var(--wc);padding:0;letter-spacing:0;overflow: hidden;text-align:left;clear: both;}
.button {position:relative;display:inline-block;color: var(--tc);margin:0;padding: 0.6em 0.8em;width:auto;min-width: 8em;max-width: 100%;background-color: #fff;clear: both;overflow: hidden;cursor:pointer;border:0;text-align:center;border-radius: 2em;box-shadow: 0 0 1px 0 #00000033;}

#takeColor,
#mw_wnd {position:fixed;top: 0!important;left: calc(100% - 40em);width: 40em;height: 100vh;z-index:11;display:none;letter-spacing:0;overflow: hidden;-webkit-backdrop-filter: blur(30px);backdrop-filter: blur(30px);background-color: #ffffffcc;}
#mw_wnd[view=yes] { display:block; }
#mw_wnd[max="yes"] {top: 0!important;height: 100vh!important;}
#mw_wnd[max="yes"][rzm="vFltWork"] {top:calc(2*var(--fs))!important;height:calc(100vh - 4*var(--fs))!important;left: calc(100% - 1140px - 2*var(--fs));width: 1140px;}

#takeColor,
#mw_wnd[small="yes"] {top: 50%!important;height: min(100vh,30em);left: 50%;width: min(100vw,30em);text-align: center;margin: 0 -50% 0 0;transform: translate(-50%,-50%);}


.mw_lt {display:none;position:absolute;left:0px;top:0px;width: calc(3*var(--fs));height: calc(3*var(--fs));border-radius:0%;box-shadow: inset calc(-3.1*var(--fs)) calc(-3.1*var(--fs)) 0 0 var(--bc);margin:0;background-color:transparent;cursor:pointer;border-top-left-radius: 0;}
.mw_lt::before {content:'';position:absolute;left: calc(3.5*var(--fs));top: calc(3.5*var(--fs));width: 0px;height:0px;border-radius:50%;margin:0;background-color:var(--wc);z-index:-1;transition:all 1s ease;}
.mw_lt.back div {position:absolute;top: 1em;left: 1em;width: 0.4em;height: 1px;background-color: #fff;transform:rotate(45deg);}
.mw_lt.back div:last-child {top: calc(1.3*var(--fs));transform:rotate(-45deg);}

.mw_rt {position:absolute;right: 1.5em;top: 1.5em;width: 1em;height: 1em;margin:0;cursor:pointer;z-index: 2;}

.mw_lb {display:none;position:absolute;left:0px;bottom:0px;width:62px;height:62px;border-radius:0%;box-shadow:inset -60px 60px 0 0 var(--wc);margin:0;background-color:transparent;cursor:pointer;}
.mw_lb::before {content:'';position:absolute;left:70px;bottom:70px;width:0px;height:0px;border-radius:50%;margin:0;background-color:var(--wc);z-index:-1;}

.mw_rb {display:none;position:absolute;right:0px;bottom:0px;width:62px;height:62px;border-radius:0%;box-shadow:inset 60px 60px 0 0 var(--wc);margin:0;background-color:transparent;cursor:pointer;display: none;}
.mw_rb::before {content:'';position:absolute;right:70px;bottom:70px;width:0px;height:0px;border-radius:50%;margin:0;background-color:var(--wc);}

.mw_max {display:none;position:absolute;right:calc(3*var(--fs));top:calc(1*var(--fs));width:calc(1*var(--fs));height:calc(1*var(--fs));border-radius:0%;box-shadow: inset 0 0 0 1px rgba(255,255,255,0.33);margin:0;z-index:1;cursor: pointer;}
.mw_max::before {content:'';position:absolute;left:25%;top:25%;width:50%;height:50%;border-radius:0%;box-shadow: inset 0 0 0 1px #fff;margin:0;z-index:1;}
[max="yes"] .mw_max::before {content:'';position:absolute;left:25%;top:0;width:50%;height:100%;border-radius:0%;box-shadow: inset 0 0 0 1px #fff;margin:0;z-index:1; }

.mw_black {display:none;position:absolute;left: calc(3*var(--fs));top:calc(1*var(--fs));width: calc(2*var(--fs));height:calc(1*var(--fs));z-index:1;cursor: pointer;}
.mw_black::before {content:'white';color:#fff;font:300 calc(0.5*var(--fs))/calc(1*var(--fs)) system-ui;position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;text-transform:uppercase;}
[mode-black="yes"] .mw_black::before {content:'black';color:#fff;font:300 calc(0.5*var(--fs))/calc(1*var(--fs)) system-ui;position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;}

#mw_h1 {display:none;position:absolute;top:0px;left: calc(3*var(--fs));width: calc(100% - 6*var(--fs));height:calc(3*var(--fs));margin:0 auto;text-align:center;font: 400 1em/3em system-ui;color: #fff;text-transform:uppercase;background-color:var(--bc);color:#fff;cursor:move;display: none;}
#mw_bot{display:none;position:absolute;bottom:0px;left:calc(2.5*var(--fs));width:calc(100% - 5*var(--fs));height:calc(3*var(--fs));margin:0 auto;text-align:center;font:400 16px/60pxsystem-ui;color:var(--wc);text-transform:uppercase;background-color:var(--wc);display:none;}

.wnd {position: absolute;top: 50%;transform: translateY(-50%);width:100%;height: auto;max-height: 100%;/*-webkit-user-select:none;user-select:none;*/overflow: hidden;}
.wnd::before {content:'';position:absolute;left:0;top:0;bottom:0;right:0;background-color: #f0f0f0;opacity: 0.4;}
.wnd_in {position:relative;width: 100%;padding: 0;max-height: calc(100 * var(--vh));overflow-x: hidden;overflow-y: auto;}
[menu="yes"] .wnd_in {height: calc(100% - 3em);}


#mw_wnd[rzm="vTalk"] {background-color: #fff0;box-shadow: inset 0 0 2px 0 #fff9, inset 0 0 20em -10em #fff;}
#mw_wnd[rzm="vTalk"] .wnd::before { opacity:0; }
#mw_wnd[rzm="vTalk"] #mw_h1 {position:absolute;top:0;left:0;width:100%;height: 2.5em;margin:0 auto;padding: 0;text-align:center;text-transform: none;font: 400 1.25em/2.5em system-ui;color: #000;background-color: #fff6;cursor:move;display:block;z-index: 1;}
#mw_wnd[rzm="vTalk"] #bView video {position: relative;float: left;width:100%;height: 18em;border-radius:1em;box-shadow: 0 0 2px 0 #fff9,inset 0 0 10em -3em #fff3;background-color: transparent;object-fit: cover;transform: rotateY(180deg);}
#mw_wnd[rzm="vTalk"] #myVideo {box-shadow: 0 0 0 0.25em #3a3;}
#mw_wnd[rzm="vTalk"] #bViewImg {position:absolute;top:0px;left:0px;width:100%;height: 100%;background:none center center / cover no-repeat;}
#mw_wnd[rzm="vTalk"] #bViewImg[act="yes"] { background-size: contain; }

#mw_wnd[rzm="vTalk"] #bPeoples {text-align:left;border-radius: 3.25em;padding: 0.25em 0 0 0.75em;background-color: #9995;}
#mw_wnd[rzm="vTalk"] #bPeoples #video { position:relative;float:left; }
#mw_wnd[rzm="vTalk"] #bPeoples video {margin: 0.5em 1em 0.5em 0;width: 5em;height: 5em;border-radius: 50%;background-color:#000;object-fit: cover;transform: rotateY(180deg);cursor: pointer;}
#mw_wnd[rzm="vTalk"] #bPeoples video[act="yes"] {border: 4px solid #fff;}
#mw_wnd[rzm="vTalk"] #bPeoplesImg {position:relative;float:left;width:5em;height:5em;border-radius: 50%;margin: 0.5em 1em 0.5em 0;background:#fff6 none center center / cover no-repeat;cursor:pointer; }
#mw_wnd[rzm="vTalk"] #bPeoplesImg[act="yes"] { border: 4px solid #fff; }
#mw_wnd[rzm="vTalk"] .wnd_in {padding: 0!important;margin-top: 3em;max-height: calc(100 * var(--vh) - 3em);}

#mw_wnd[rzm="vTalk"] #bFiles_prop { margin:0;padding-bottom:0; }
#mw_wnd[rzm="vTalk"] #bFiles .btn-sav { position:relative;float:right; }
#mw_wnd[rzm="vTalk"] .fil { position:relative;min-height:2em;margin:1em 0;padding:0 1em 0 0; }
#mw_wnd[rzm="vTalk"] .fil::before { content:'';position:absolute;top:0;left:0;width:calc(100% - 0.5em);height:100%;background-color:#fff0;border-radius:1em;border-top-left-radius:0em;box-shadow:0 0.075em 0.25em -0.15em #0006,inset 0 2em 1em -1em #fff9; }
#mw_wnd[rzm="vTalk"] [type="note"].fil::before { background-color: #fff3;box-shadow:inset 0 -1.5em 1em -0.5em #fff9; }

#mw_wnd[rzm="vTalk"] #bAdd .fil { color:#fff;text-align:center;padding:0.5em;margin:0 0 0.5em 0;cursor:pointer; }
#mw_wnd[rzm="vTalk"] #bAdd .fil::before { background-color:#ee3333;box-shadow:none;border-top-left-radius:2em;z-index:-1; }

#mw_wnd[rzm="vTalk"] #bFiles .fil { padding:0 1em 0.3em 0; }
#mw_wnd[rzm="vTalk"] #bFiles .fil .date { position:absolute;right:1em;top:-1.8em;font-size:0.8em;text-align:right; }
#mw_wnd[rzm="vTalk"] #bFiles .fil .type { position:absolute;left:0em;top:-1.8em;font-size:0.8em;text-align:left;background-color:#eeeeee;border-radius:1em;padding:0.2em 1em 0.2em 1.1em;border-bottom-left-radius:0;border-bottom-right-radius:0; }
#mw_wnd[rzm="vTalk"] #bFiles [type="note"].fil .type { display:none; }
#mw_wnd[rzm="vTalk"] #bFiles .fil .btn-opn {position:relative;float:left;margin:0 -1.5em -0.9em 0.7em;transform:scale(0.6);transform-origin:top left;animation:none;background-color:#fff9;color:#000; }
#mw_wnd[rzm="vTalk"] #bFiles .fil .btn-opn[act="yes"] { background-color:#fff; }
#mw_wnd[rzm="vTalk"] #bFiles [type="note"].fil .btn-opn { display:none; }
#mw_wnd[rzm="vTalk"] #bFiles .fil .name { position:relative;width:calc(100% - 1.5em);overflow:hidden;padding:0.5em 0 0.4em 0.8em;font-weight:600;cursor:pointer;word-break:break-all; }
#mw_wnd[rzm="vTalk"] #bFiles .fil .val { position:relative;width:100%;padding:0 0 0.3em 0.8em;cursor:pointer; }
#mw_wnd[rzm="vTalk"] #bFiles [type="note"].fil * { cursor:default; }
#mw_wnd[rzm="vTalk"] #bFiles .fil .btn-del { right:0.8em;top:0.2em;transform:scale(0.6);transform-origin:top right;animation:none; }

#mw_wnd[rzm="vTalk"][max="yes"] .wnd_in { overflow:hidden;margin-top:0;max-height:calc(100 * var(--vh)); }
#mw_wnd[rzm="vTalk"][max="yes"],
#mw_wnd[rzm="vTalk"][max="yes"] #bView video {position:sticky;top:0;left:0;width:100vw;height: calc(100*var(--vh))!important;margin:0;padding:0;border-radius:0;}
#mw_wnd[rzm="vTalk"][max="yes"] .block,
#mw_wnd[rzm="vTalk"][max="yes"] .wnd .block,
#mw_wnd[rzm="vTalk"][max="yes"] .prop,
#mw_wnd[rzm="vTalk"][max="yes"] .wnd_in {padding: 0!important;}
#mw_wnd[rzm="vTalk"][max="yes"] #bButtons_prop {position:fixed;left:1em;bottom:1em;width: 3em!important;margin:0;padding: 0!important;}
#mw_wnd[rzm="vTalk"][max="yes"] #bPeoples_prop {position:fixed;right:1em;top: 3em;z-index:200000;width: 5.5em!important;height: calc(100 * var(--vh) - 10em);}
#mw_wnd[rzm="vTalk"][max="yes"] #bEnd_prop {position:fixed;left: calc(50% - 1.5em);bottom: 0.5em;z-index:1;width:3em!important;}
#mw_wnd[rzm="vTalk"][max="yes"] #bPeoples video { width:4em;height:4em; }
#mw_wnd[rzm="vTalk"][max="yes"] #bPeoplesImg {width:4em;height:4em; }
#mw_wnd[rzm="vTalk"][max="yes"] .btn { margin-top:0.5em }
#mw_wnd[rzm="vTalk"][max="yes"] #bFiles .btn { margin-top:0; }
#mw_wnd[rzm="vTalk"][max="yes"] .btn-plk {position:fixed;left:1em;top:0.5em;}
#mw_wnd[rzm="vTalk"][max="yes"] .btn-min {position:fixed;right:1em;bottom:1em}
#mw_wnd[rzm="vTalk"][max="yes"] #mw_h1 { display:none; }
#mw_wnd[rzm="vTalk"][max="yes"] #bAdd { display:none; }

[mode-mob="0"] #mw_wnd[rzm="vTalk"][max="yes"] #bFiles { display:block;top:5em;left:1em;position:fixed;width:15em; }
[mode-mob="0"] #mw_wnd[rzm="vTalk"][max="yes"] #bFiles .fil { width:100%; }
[mode-mob="0"] #mw_wnd[rzm="vTalk"][max="yes"] #bFiles .fil::before { background-color:#9999;box-shadow:0 0.075em 0.25em -0.15em #0006,inset 0 2em 1em -1em #fffb; }

[mode-mob="1"] #mw_wnd[rzm="vTalk"][max="yes"] #bFiles { display:block;top:5em;left:1em;position:fixed;width:9em; }
[mode-mob="1"] #mw_wnd[rzm="vTalk"][max="yes"] #bFiles .fil::before { box-shadow:none; }
[mode-mob="1"] #mw_wnd[rzm="vTalk"][max="yes"] #bFiles .btn-sav,
[mode-mob="1"] #mw_wnd[rzm="vTalk"][max="yes"] #bFiles .fil * { display:none; }
[mode-mob="1"] #mw_wnd[rzm="vTalk"][max="yes"] #bFiles .fil[act="yes"] { display:block;margin:0;padding:0; }
[mode-mob="1"] #mw_wnd[rzm="vTalk"][max="yes"] #bFiles .fil[act="yes"] .btn-opn { display:block;background-color:#9999;margin:0 -0.75em -0.75em 0; }
[mode-mob="1"] #mw_wnd[rzm="vTalk"][max="yes"] #bFiles .fil[act="yes"] .btn-opn[act="yes"] { display:block;background-color:#eee;margin:0 -0.75 -0.75em 0;box-shadow:0 0 0 0.4em #0b0; }

.wnd .menu {position: relative;width:100%;height: 3em;list-style:none;-webkit-user-select:none;user-select:none;text-align: center;text-transform: uppercase;white-space: nowrap;box-shadow: inset 0 -1em 2em -1.75em rgba(127,127,127,0.5);}
.wnd .menu li {position:relative;display:inline-table;cursor:pointer;padding: 1em;width:auto;color: var(--tc);margin: 0;text-align:center;font: 400 1em/1em system-ui;}
.wnd .menu li a { color:var(--tc); }
.wnd .menu li img {position:relative;margin:4px 0px -4px 0px;height: 20px;width: 20px;}
.wnd .menu li.yes {cursor:default;color: var(--tc);font-weight: 400;background-color: rgba(127,127,127,0.25);}
.wnd .menu li:hover {background-color:rgba(255,255,255,0.5);}
[mode-black="yes"] .wnd .menu li:hover {background-color:rgba(180,180,180,0.3);}
.wnd .menu li.yes:hover {background-color:var(--wc);}
.wnd .block {position:relative;float:left;clear:both;width: 100%;padding: 3em 10%;display: block;}
.wnd .block_zgl {position:relative;clear:both;width:100%;text-align:center;font: 300 calc(1.4*var(--fs))/calc(2*var(--fs)) system-ui;margin: 1em 0 0.5em 0;color: var(--tc);display: inline-block;}
.wnd .br { position:relative;width:100%;height:40px; }

.prop {position:relative;float: left;width:100%;padding: 0.5em;/*-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;*/}
.prop .zgl {position:relative;width:100%;display: block;overflow: hidden;margin: 0;padding: 0 0 0.3em 0;font: inherit;font-size: 0.9em;text-align: inherit;height: inherit;color: var(--tc);left: inherit;right: inherit;}

.prop[type="color2"],
.prop[type="text2"],
.prop[type="text_mini"] {width:50%;}
.prop[type="color3"],
.prop[type="text3"] {width:33.333%;}
.prop[type="text4"] {width:25%;}
.prop[type="textarea_mini"] {width:50%;}
.prop[type="block2"] {width:50%;}
.prop[type="block3"] {width:33.333%;}
.prop[type="block4"] {width:25%;}
.prop[type="block6"] {width:66.666%;}

.prop[type="checkbox"] .zgl {min-height:50px;}
.prop[type="checkbox2"] {width:50%;}
.prop[type="checkbox3"] {width:33.333%;}
.prop[type="checkbox6"] {width:66.666%;}

.prop[type="button2"] {width:50%;}
.prop[type="button3"] {width:33.333%;}
.prop[type="button4"] {width:25%;}

.prop[type="range2"] {width: 50%;padding-right: 1%;}
.prop[type="range3"] {width: 33.333%;padding-right: 1%;}

.prop[type="rangef2"] {width: 50%;padding-right: 1%;}
.prop[type="rangef3"] {width: 33.333%;padding-right: 1%;}

.prop[type="select2"] {width:50%;}
.prop[type="select3"] {width:33.333%;}
.prop[type="select4"] {width:25%;}

@media screen and (max-width:560px) {
  .prop[type="block3"],
  .prop[type="block4"],
  .prop[type="checkbox3"],
  .prop[type="color3"],
  .prop[type="text3"],
  .prop[type="text4"],
  .prop[type="button3"],
  .prop[type="button4"],
  .prop[type="range3"],
  .prop[type="rangef3"],
  .prop[type="select3"],
  .prop[type="select4"] {width:50%!important;}
  .prop[type="block2"],
  .prop[type="checkbox2"],
  .prop[type="text_mini"],
  .prop[type="text2"],
  .prop[type="button2"],
  .prop[type="select2"],
  .prop[type="range2"],
  .prop[type="rangef2"] {width:100%!important;}
}
@media screen and (max-width:390px) {
  .prop { width:100%!important; }	
  .prop[type="block3"],
  .prop[type="block4"],
  .prop[type="checkbox3"],
  .prop[type="color3"],
  .prop[type="text3"],
  .prop[type="text4"],
  .prop[type="button3"],
  .prop[type="button4"],
  .prop[type="select3"],
  .prop[type="select4"] {width:50%!important;}
  .prop[type="block2"],
  .prop[type="checkbox2"],
  .prop[type="color2"],
  .prop[type="text_mini"],
  .prop[type="text2"],
  .prop[type="button2"],
  .prop[type="select2"],
  .prop[type="range2"],
  .prop[type="range3"],
  .prop[type="rangef3"],
  .prop[type="rangef2"] {width:100%!important;}
}

.prop ul { margin:0;padding:0; }

.prop .help {position: absolute;right: 0px;top: 0;padding: 0;width: calc(1.6*var(--fs));height: calc(1.6*var(--fs));font: 200 calc(1*var(--fs))/calc(1.6*var(--fs)) 'system-ui';color: var(--tc);text-align:center;cursor:help;margin: 0;z-index:2;}
.prop[type="checkbox"] .help { right:55px;top:25px; }

.prop .help:before,
.prop .help:after {bottom: -50%;right: 0px;border-radius:20px;}
.prop .help:before {}
.prop [data-hint]::before {content: '';margin-left: -100px;position:absolute;background:rgba(180,180,180,0);z-index:1000002;}
.prop [data-hint]::before,
.prop [data-hint]::after { position:absolute;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);transform:translate3d(0,0,0);visibility:hidden;opacity:0;z-index:1000000;pointer-events:none;-webkit-transition:.3s ease;-moz-transition:.3s ease;transition:.3s ease;-webkit-transition-delay:0ms;-moz-transition-delay:0ms;transition-delay:0ms;}
.prop [data-hint]::after {content:attr(data-hint);background:rgba(180,180,180,0.75);color:var(--tc);padding: calc(1*var(--fs));width: 200px;font-size: 80%;font-weight: 400;line-height: 130%;box-shadow: 0px 1px 6px -2px rgba(180,180,180,0.75);}
.prop [data-hint]:hover::before,
.prop [data-hint]:hover::after,
.prop [data-hint]:focus::before,
.prop [data-hint]:focus::after{visibility:visible;opacity:1}
.prop [data-hint]:hover::before,
.prop [data-hint]:hover::after{-webkit-transition-delay:100ms;-moz-transition-delay:100ms;transition-delay:100ms}
.prop .help:hover::after,.prop .help:hover::before,.prop .help:focus::after,.prop .help:focus::before{-webkit-transform:translateY(-8px);-moz-transform:translateY(-8px);transform:translateY(-8px)}


.prop .color,
.prop .color2,
.prop .color3,
.prop .text2,
.prop .text3,
.prop .text4,
.prop .text_mini,
.prop .text {background-color: rgba(0,0,0,0.05);position:relative;width: 100%;padding: 0 0.5em 0.2em 0.5em;margin: 0;font-size: 1.2em;line-height: 2em;color: var(--tc);}

.prop .color3,
.prop .color2,
.prop .color {border-top-right-radius: calc(0.75*var(--fs));border-bottom-right-radius: calc(0.75*var(--fs));}
.prop .btncolor {position:absolute;width:calc(2.5*var(--fs));height:calc(2.5*var(--fs));right:calc(0.5*var(--fs));bottom:calc(0.5*var(--fs));box-shadow: inset calc(1*var(--fs)) 0 calc(1.5*var(--fs)) calc(-1.5*var(--fs)) var(--bc);cursor:pointer;}
.prop .btncolor::before {content: 'o';height:10px;width:10px;position:absolute;right:calc(1*var(--fs));font-size:calc(1*var(--fs));line-height:calc(2.5*var(--fs));color: var(--bc);}

.prop .block_text {position:relative;float: left;width: 100%;margin: 0;color:var(--tc);display: block;text-align: justify;}
.prop[type="block0"] .block_text {box-shadow:none;background:transparent;width: 100%;text-transform:none;letter-spacing:0;padding:0;color: var(--tc);text-align: justify;}

.prop .block_text p { margin:0 0 0.5em 0; }
.prop .block_text p.first::first-letter { font-size:3em;float:left;margin:0.2em 0.05em 0.1em 0; }

.prop .textarea_mini,
.prop .textarea {background: rgba(0,0,0,0.1);position:relative;width: 100%;padding: calc(0.333*var(--fs)) calc(1*var(--fs));margin: 0;font-size:1em;color: var(--tc);line-height:1.25em;border: 0;}

.prop .checkbox {	vertical-align:top;width:17px;height:17px;margin:0 3px 0 0; }
.prop .checkbox + label { cursor:pointer; }
.prop .checkbox:not(checked) { position:absolute;opacity:0; }
.prop .checkbox:not(checked) + label {position:relative;display:inline-block;width: 100%;padding: 0 0 calc(0.3*var(--fs)) 0;color: var(--tc);letter-spacing: 0;text-transform: uppercase;font-size: 0.9em;line-height: 1.4em;}

.prop .checkbox:not(checked) + label {cursor: pointer;text-align:left;font-size:1em;line-height:1em;font-weight:400;margin:calc(1*var(--fs)) 0;}
.prop .checkbox:not(checked) + label {position:relative;display:inline-block;width: 100%;margin: calc(0.35*var(--fs)) 0;padding: calc(0.4*var(--fs)) 0;color: var(--tc);letter-spacing: 0;text-transform: uppercase;}

.prop .checkbox:not(checked) + label::before {content:'';position:absolute;top: 0px;right: 0;width: calc(3.6*var(--fs));height: calc(1.8*var(--fs));border-radius: calc(1.5*var(--fs));box-shadow: inset 0 0 0px 1px var(--bc);}
.prop .checkbox:not(checked) + label::after  {background: var(--bc);content:'';position:absolute;top: calc(0.2*var(--fs));right: calc(2*var(--fs));width: calc(1.4*var(--fs));height: calc(1.4*var(--fs));border-radius: calc(1.4*var(--fs));transition: all .2s;opacity: 0.5;}
.prop .checkbox:checked + label::before {background: var(--wc);}
.prop .checkbox:checked + label::after {right: calc(0.2*var(--fs));background: var(--bc);opacity: 1;}


.prop[type="radio"] {padding: 0px 0px 0px 0px;box-shadow: inset 1px 0 0 0 rgba(180,180,180,0.3);}
.prop .radio    {vertical-align:top;width:17px;height: 17px;margin: 0 3px 0px -20px;}
.prop .radio + label {cursor:pointer;position: relative;padding: 0px 10px 10px 30px;display:inline-block;}
.prop .radio:not(checked) {position:relative;width: 1px;height: 1px;overflow: hidden;opacity:0;margin: 0;padding: 0;}
.prop .radio:not(checked) + label {position:relative;padding: 0px 10px 10px 30px;display:inline-block;margin-left: 14px;color: var(--tc);}
.prop .radio:not(checked) + label::before {content:'';position:absolute;top: 0px;left:0px;width: 22px;height: 22px;border:1px solid #dddee0;border-radius:50%;background:var(--wc);}
.prop .radio:not(checked) + label::after  {content:'';position:absolute;top: 0px;left: 1px;width:22px;height:22px;border-radius:50%;background:var(--bc);box-shadow: inset 0 1px 1px rgba(180,180,180,.5);opacity:0;transition:all .2s;}
.prop .radio:checked + label::after { opacity:1; }

.prop .range_img {position:relative;width:120px;height:120px;margin: 0px auto 10px auto;background:none center center / auto 100% no-repeat;cursor:pointer;}
.prop .range_list { position:relative;width:100%;margin:10px 0px 0px 0px; }
.prop .range_list[act="no"] { margin:0;display:none; }
.prop .range_list img { width:46px;cursor:pointer; }
.prop .range_list img.yes { box-shadow:0px 0px 0px 2px var(--bc);border-radius:50%;padding:3px;margin:-3px; }

.prop .rangef,
.prop .range {position:relative;width:100%;height: 26px;margin: 0px 0px 10px 0px;padding:0;border:0;box-shadow:none;border-radius:20px;cursor: move;-webkit-appearance: none;}
.prop .rangef:focus,
.prop .range:focus { outline:none!important;}
.prop ::-ms-ticks-after,.prop ::-ms-ticks-before,.prop ::-ms-track { background-color:transparent;color:transparent;border:0;}
.prop ::-ms-tooltip { display:none;}
.prop ::-ms-fill-lower,.prop ::-ms-fill-upper { background-color:transparent;height:30px;}
.prop ::-moz-range-track { background-color:transparent;width:100%;height:30px;padding:0;margin:0;border:0;}
.prop ::-webkit-slider-runnable-track { background-color:#dddee0;border-radius:20px;margin:0;padding:2px;border:0;box-shadow: inset 0 2px 3px rgba(180,180,180,.2); }
.prop ::-ms-thumb            { background:var(--wc) none center center no-repeat;border-radius:50%;width:22px;height:22px;padding:0;margin:0;border:0;cursor:move;box-shadow:0 2px 5px rgba(180,180,180,.3); }
.prop ::-moz-range-thumb     { background:var(--wc) none center center no-repeat;border-radius:50%;width:22px;height:22px;padding:0;margin:0;border:0;cursor:move;box-shadow:0 2px 5px rgba(180,180,180,.3); }
.prop ::-webkit-slider-thumb { background:var(--wc) none center center no-repeat;border-radius:50%;width:22px;height:22px;padding:0;margin:0;border:0;cursor:move;box-shadow:0 2px 5px rgba(180,180,180,.3);-webkit-appearance:none;}
.prop .nums {position:relative;margin:-3px 12px 10px 12px;font:400 calc(0.5*var(--fs))/calc(0.5*var(--fs)) system-ui;text-align:center;color: var(--tc);}

.prop[type="rangef"]::before,
.prop[type="rangef2"]::before,
.prop[type="rangef3"]::before { content:'';position:absolute;top:0;left:calc(50% - 0.2*var(--fs));width:1px;height:3.3em;text-align:center;border-left:1px solid #ccc; }

.wnd .prop h2 {font-size: 1.6em;margin:0.5em 0;text-align: center;}
.wnd .prop h3 { font-size:1.25em;margin:0 0 calc(1*var(--fs)) 0;}
.wnd .prop ul li { list-style:square;margin: calc(0.5*var(--fs)) 0 calc(0.5*var(--fs)) calc(1.5*var(--fs)); }
.wnd .prop ul { margin-bottom:calc(2*var(--fs)); }

.prop .button,
.wnd input[type="button"],
.prop .submit {display: block;margin: 0.8em auto;font: 400 1.25em/1.5em system-ui;white-space:nowrap;background-repeat: no-repeat;background-position: center center;}
.prop .button[act="yes"] { background-color: #00c000;}

.wnd input[type="button"].yes {border-radius: 20px;cursor: pointer;text-align: center;font-size: 12.5px;line-height: 12.5px;padding: 0px 20px;font-weight: bold;display: block;margin: 10px auto;position:relative;width:auto;text-transform: uppercase;height:40px;box-shadow: none;background-color: #60e0d0;color: var(--tc);transition: background-color 0.8s 0.1s ease;}

.prop .select {background-color: rgba(0,0,0,0.1)!important;position:relative;float: left;width: 100%;padding:0 calc(1*var(--fs));margin: 0;font-size: 130%;font-weight: 400;line-height: 200%;color: var(--tc);cursor: pointer;border-top-right-radius: calc(0.75*var(--fs));}
.prop .select::before {content: 'o';height:10px;width:10px;position:absolute;right:calc(1*var(--fs));font-size:calc(1*var(--fs));color: var(--bc);}
.prop .select_box {z-index: 1;background: rgba(0,0,0,0.1)!important;position: inherit;margin:0;width:100%;overflow:hidden;transition:all .2s;}
.prop .select_box[act="no"] { height:0;opacity:0;margin: -10px 0px 0px 0px; }
.prop .select_box ul {position:relative;margin:0;width: 100%;}
.prop .select_box li {position:relative;float: left;width: 50%;padding: calc(0.5*var(--fs)) calc(1*var(--fs));margin: 0!important;height: calc(2.5*var(--fs));color:var(--tc);cursor:pointer;overflow:hidden;}
.prop .select_box li[act="yes"] {box-shadow:inset 0 0 calc(0.5*var(--fs)) 0 rgba(0,0,0,0.2)!important;}
.prop[type="select"] .br { position:relative;width:100%;height:1px; }

.prop i { color:rgba(180,180,180,0.95);font-size:75%; }

.wnd .prop .date1 {position:absolute;left:0px;width: 40px;margin:0px 0px 30px 0px;height:40px;}
.wnd .prop .date1 .date {z-index:1;background:var(--wc);position:absolute;left:0px;width: 40px;padding:8px 10px;margin:0px 0px 30px 0px;font-size: 16px;height: 40px;border: 1px solid var(--bc);border-top-left-radius:20px;border-bottom-left-radius:20px;cursor:pointer;}
.wnd .prop .date1 .date_box {z-index:2;background:rgba(250,250,250,0.9);left:0px;position:absolute;margin: -81px 0px -1px 0px;width:100%;height:200px;border-top-left-radius:20px;border-bottom-left-radius:20px;overflow:hidden;transition:all .2s;border-bottom: 1px solid var(--bc);border-top: 1px solid var(--bc);box-shadow: 0px 0px 30px -15px var(--tc);}
.wnd .prop .date1 .date_box[act="no"] { margin-top:-20px;height:0;opacity:0; }
.wnd .prop .date1 .date_box ul { position:relative;margin:80px 0px 80px 0px;width:100%;}
.wnd .prop .date1 .date_box li {background:var(--wc);position:relative;width: 40px;padding:8px 10px;font-size: 16px;height: 40px;border: 1px solid #f6f6f6;color:var(--tc);border-top-left-radius:20px;border-bottom-left-radius:20px;cursor:pointer;}
.wnd .prop .date1 .date_box li[act="yes"] {background:var(--wc);color:var(--tc);border: 1px solid var(--bc);}

.wnd .prop .date2 {position:absolute;left: 40px;width: 100px;margin:0px 0px 30px 0px;height:40px;}
.wnd .prop .date2 .date {z-index:1;background:var(--wc);position:absolute;left:0px;width: 100px;padding: 8px 10px;margin:0px 0px 30px 0px;font-size: 16px;height: 40px;border: 1px solid var(--bc);cursor:pointer;}
.wnd .prop .date2 .date_box {z-index:2;background:rgba(250,250,250,0.9);left:0px;position:absolute;margin: -81px 0px -1px 0px;width:100%;height:200px;overflow:hidden;transition:all .2s;border-bottom: 1px solid var(--bc);border-top: 1px solid var(--bc);box-shadow: 0px 0px 30px -15px var(--tc);}
.wnd .prop .date2 .date_box[act="no"] { margin-top:-20px;height:0;opacity:0; }
.wnd .prop .date2 .date_box ul {position:relative;margin: -1px 0px -1px 0px;width:100%;}
.wnd .prop .date2 .date_box li {background:var(--wc);position:relative;width: 100px;padding:8px 10px;font-size: 16px;height: 40px;border: 1px solid #f6f6f6;color:var(--tc);cursor:pointer;}
.wnd .prop .date2 .date_box li[act="yes"] {background:var(--wc);color:var(--tc);border: 1px solid var(--bc);}

.wnd .prop .date3 {position:absolute;left: 140px;width: 70px;margin:0px 0px 30px 0px;height:40px;}
.wnd .prop .date3 .date {z-index:1;background:var(--wc);position:absolute;left:0px;width: 70px;padding:8px 10px;margin:0px 0px 30px 0px;font-size: 16px;height: 40px;border: 1px solid var(--bc);border-top-right-radius:20px;border-bottom-right-radius:20px;cursor:pointer;}
.wnd .prop .date3 .date_box {z-index:2;background:rgba(250,250,250,0.9);left:0px;position:absolute;margin: -81px 0px -1px 0px;width:100%;height:200px;border-top-right-radius:20px;border-bottom-right-radius:20px;overflow:hidden;transition:all .2s;border-bottom: 1px solid var(--bc);border-top: 1px solid var(--bc);box-shadow: 0px 0px 30px -15px var(--tc);}
.wnd .prop .date3 .date_box[act="no"] { margin-top:-20px;height:0;opacity:0; }
.wnd .prop .date3 .date_box ul { position:relative;margin:80px 0px 80px 0px;width:100%;}
.wnd .prop .date3 .date_box li {background:var(--wc);position:relative;width: 70px;padding:8px 10px;font-size: 16px;height: 40px;border: 1px solid #f6f6f6;color:var(--tc);border-top-right-radius:20px;border-bottom-right-radius:20px;cursor:pointer;}
.wnd .prop .date3 .date_box li[act="yes"] {background:var(--wc);color:var(--tc);border: 1px solid var(--bc);opacity:1;}

.wnd .prop[type="youtube"] {width: 100%;height:560px;margin: 10px -20px 10px -30px;padding:0;border-radius:6px;}
@media screen and (max-width:1920px) { .wnd .prop[type="youtube"] {height: 500px;} }
@media screen and (max-width:1600px) { .wnd .prop[type="youtube"] { height:225px; } }
@media screen and (max-width:1560px) { .wnd .prop[type="youtube"] { height:170px; } }
.wnd .prop[type="youtube"] div {width:100%;height:100%;margin: 0px 0px 0px 0px;border-radius:6px;overflow:hidden;box-shadow:0px 5px 10px -5px rgba(180,180,180,1);}
.wnd .prop[type="youtube"] div iframe {width:100%;height:100%;border-radius:6px;overflow:hidden;}

.wnd .prop[type="val"] div {background:var(--wc);position:relative;width:100%;padding:0;margin:0;font:400 15px/20px 'system-ui';min-height:20px; }
.wnd .prop .val_img { position:relative;max-width:100%;min-height:0px;margin-bottom:10px; }
.wnd .prop[type="img"] img {position:relative;max-width:100%;min-height:0px;margin: 0px auto 10px auto;display: block;border-radius:10px;cursor:pointer;box-shadow: 0px -1px 5px -1px var(--wc),0px 20px 50px -20px var(--tc);}
.wnd #img_full_prop.prop img { max-height:400px;border-radius:10px;margin-bottom:10px;cursor:pointer; }

.wnd_send,
.file {position:relative;font: 400 calc(1*var(--fs))/calc(1.5*var(--fs)) system-ui;color: var(--tc);text-transform:uppercase;margin:0;padding: calc(0.6*var(--fs)) calc(0.8*var(--fs));width:auto;min-width: calc(9*var(--fs));max-width: calc(18*var(--fs));background-color: rgba(255,255,255,0.2);border-radius:calc(2 * var(--fs));clear: both;overflow: hidden;cursor:pointer;border:0;text-align:center;border-radius: calc(1.5*var(--fs));box-shadow: none;}
.file {margin: 10px auto;}
.file:before {content: 'Choose files';cursor:pointer;}
.file input[type="file"] { position: absolute; left: 0px; top: 0px; width: 1px; height: 1px; font: 400 0/0 system-ui; padding:0px;margin:0px; opacity: 0; border:none;cursor:pointer; }
#file1,#file2,#file3 {position: relative;width: 100%;padding: 10px 0px 0px 0px;font-size: 12.5px;text-align: center;overflow: hidden;}
#file1:before,#file2:before,#file3:before { content: 'File: ';position:relative;margin: 0px 0px 5px 0px;width: 100%; }

#modal .file { background-color: #ee3333;color:#fff;font-size:1em;border-radius:2em; }

.wnd .prop[type="img_shop"] { text-align:center; }
.wnd .prop[type="img_shop"] img { box-shadow:0px 0px 3px -1px rgba(180,180,180,0.5); }

#bColor { box-shadow:none;margin:0;padding:0;cursor:crosshair; }
#bColor_place0 {position:relative;float:left;width: calc(100% - 3em);height: 100%;overflow:hidden;}
#bColor_place  {position:relative;width:100%;height:100%; }
#bColor_line0  {position:relative;float:left;width: 2em;height: 100%;overflow:hidden;margin: 0 0 0 1em;}
#bColor_line   {position:relative;width:100%;height:100%; }
#bColor_place_i {position:absolute;width: 0.5em;height: 0.5em;border-radius: 0.5em;box-shadow: 0 0 0 1px #fff, inset 0 0 0 1px rgba(0,0,0,0.2);background-color:transparent;}
#bColor_line_i  { position:absolute;width:calc(50px + 1*var(--fs));height:1px;left:calc(-0.5*var(--fs));background-color:white;overflow:hidden;display:block; }



iframe { transform: translateY(-10%)}
#youtube-player { position: relative; transform: translateY(-10%)}
.youtube-poster {position: absolute;top:12.5%;width: 100%;height: 75%;}
.youtube-poster.yt_hide { animation:hide 4s 1; }
@keyframes hide { 0% { opacity:1; } 100% { opacity:0; } }
.youtube-poster.yt_show { opacity:1; }

#css-render { position: absolute;z-index:0; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; }
#css-render section {position:absolute;left:0;top:0;right:0;bottom:0;color:#fff;padding:3em;font-size:1.333em;line-height:1.5em;}
#css-render section header {position: relative;margin: -3em -3em 2em -3em;}
#css-render section header img {width:100%;display: block;margin-bottom:2em;}
#css-render section.big { font-size:2em; }
#css-render section.big2 { font-size:2.66666em; }
#css-render section.black { background-color:black;color:white; }
#css-render section.white { background-color:white;color:black; }
#css-render section.blue  { background-color:#0080c0;color:white; }
#css-render section .blue { color:#0080c0; }
#css-render section .white { color:white; }
#css-render section .black { color:black; }
#css-render section h2 {font-size:2em;font-weight:600;line-height:1.25em;margin-bottom:0.25em;display:block;text-align:center;}
#css-render section h3 {font-size:1.5em;font-weight:600;line-height:1.25em;margin-bottom:0.25em;display:block;text-align:center;}
#css-render section h4 {font-size:0.75em;font-weight:600;line-height:1.25em;margin-bottom:2em;display:block;text-align:center;}
#css-render section p {display:block;text-align:justify;margin:0.75em 0;}
#css-render section ol {margin:0;padding:0 0 0 2.5em;counter-reset: myCounter;}
#css-render section ol li{margin:0;list-style:none;min-height:2em;padding:0 0 0.75em 0;}
#css-render section ol li:before {counter-increment:myCounter;content:counter(myCounter);color:#ffffff;background-color: #0090e0;position: absolute;display: block;text-align:center;font-size: 1em;line-height: 2em;width: 2em;height: 2em;border-radius: 1em;margin-top: -0.25em;margin-left: -2.5em;}
#css-render section ul {margin:0;padding:0 0 0 1.25em;}
#css-render section ul li {margin:0;list-style-type:square;padding:0 0 0.75em 0;}

#bImage2_1 canvas {position:relative;width:100%;height: calc(24*var(--fs));margin: calc(-3*var(--fs)) 0 calc(-1*var(--fs)) 0;visibility:visible!important;display:block!important;}
#bColors2 .color0 { position:relative;float:left;width:33.333%;height:calc(15*var(--fs));margin:0 0 calc(1*var(--fs)) 0;cursor:pointer; }
#bColors2 canvas { position:relative;width:100%;height:calc(15*var(--fs));visibility:visible!important;display:block!important; }
#bColors2 .color { position:absolute;left:0;top:calc(1*var(--fs));width:100%;height:calc(1*var(--fs));font:400 calc(0.8*var--fs))/calc(1*var(--fs)) system-ui;letter-spacing:0;text-align:center; }

.svg-box{position:relative;width:100%;height:100%;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;transform:scaleX(0.9);}
.svg-box2{color:#000000;font:400 20px/20px sans-serif;text-align:center;}
.svg-box2 .ex{font:400 40px/1em sans-serif;margin:0.5em 0;}
.svg-box2 .nm{font:600 48px/1em sans-serif;margin:0.5em 0;}

.exh {position:relative;float:left;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;
width:calc(50% - 1em);height:25em;text-align:left;overflow:hidden;margin: 0 2em 2em 0;cursor:pointer;}
.exh:nth-child(2n) { margin: 0 0 2em 0; }
.exh .img  {position:absolute;width:100%;height:100%;background:none center center / cover no-repeat;background-size:cover!important;}
.exh .info {position:absolute;left:0;bottom:0;width:100%;min-height:4em;padding:1em 1em;text-align:center;line-height:1.2em;background-color:rgba(255,255,255,0.6);-webkit-backdrop-filter: blur(10px);backdrop-filter: blur(10px);transition:bottom 1s ease;}
.exh:hover .info { bottom:-10em; }
.exh .info .name  {font-size:0.8em;}
.exh .info .artist{font-size:0.8em;}
.exh .info .style {font-size:0.8em;}
.exh .info p      {display:none;}

.exh2 {position:relative;float:left;width:33%;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;text-align:left;overflow:hidden;cursor:pointer; }
.exh2 .img {position:relative;float:left;padding:0.5em; }
.exh2 .img img {position:relative;float:left;width:100%;height:11em;object-fit: cover;}

.exh3 {position:relative;float:left;width:calc(33% - 1em);display:-webkit-box;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;text-align:left;overflow:hidden;cursor:pointer;background:rgba(255,255,255,0.1);font-size:0.7em;margin:0.5em;padding:0.5em; }

#mw_wnd[full="yes"] { top:0!important;left:0!important;width:100%!important;height:100%!important;border-radius:0; }
#mw_wnd[full="yes"] #mw_h1 {top:0px;left:0;width:100%;}
#mw_wnd[full="yes"] .wnd {top:0;width:100%;height:100%;transition:transform 0.3s linear 0.2s;overflow: hidden;}
#mw_wnd[full="yes"] .mw_rt {z-index:1;box-shadow:none;}
#mw_wnd[full="yes"] .mw_rt::before { content:'';background-color:transparent;}
#mw_wnd[full="yes"] .mw_rt.close div { background-color:#000; }
#mw_wnd[full="yes"] .wnd_in { margin:0;padding:0;overflow:hidden; }



#d2d {position:fixed;top:-101vh;left:0;margin:0;padding:0;width:100vw;height:calc(var(--vh, 1vh) * 100);overflow:hidden;background-color:#000;transition:top 1s ease,opacity 1.5s ease;opacity:0;z-index:2; }
#d2d[view="yes"] { display:block;top:0;opacity:1;z-index:2;transition:top 1s ease,opacity 1.5s ease; }
#d2d[view="no"] { display:block;top:-101vh;opacity:0; }

#d2d2 {position:fixed;background:rgba(255,255,255,0.8);color:#000;bottom: -101vh;left:calc(50% - 15*var(--fs));margin:0;padding:0;width:calc(30*var(--fs));overflow:hidden;transition:top 1s ease,opacity 1.5s ease;opacity:0;z-index:2;text-align: center;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;}
#d2d2 .info {position:relative;width:100%;height:100%;}
#d2d2[view="yes"] {display:flex;bottom: calc(10*var(--fs));opacity:1;z-index:2;transition:top 1s ease,opacity 1.5s ease;text-align: left;padding: calc(2*var(--fs));}
#d2d2[view="no"] { display:flex;top:-101vh;opacity:0; }

.place {position: absolute;transition: 1s ease;background: black;width:100vw;height:100%;cursor:pointer;text-align: center;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;}
.place img  {position:relative;width:100vw;height:calc(100% - 20*var(--fs));object-fit:contain;}
.place .info {color:#fff;position:absolute;bottom:calc(6*var(--fs));width:calc(60*var(--fs));max-width:80vw;padding:0;margin:0;line-height: calc(1.2*var(--fs));text-align:center;}
.place .info .name {font-size: calc(1.2*var(--fs));line-height: calc(1.4*var(--fs));}
.place .info .artist {font-size:calc(1*var(--fs));line-height: calc(1*var(--fs));margin-top: calc(0.3*var(--fs));}

.place .inf {color:#fff;position:relative;width:calc(40*var(--fs));max-width:80vw;padding:0;margin: 0;line-height:1.2em;text-align:justify;}
.place .inf .name {font-size: calc(2*var(--fs));line-height:calc(2.6*var(--fs));text-align:center;}
.place .inf .artist {font-size: calc(1*var(--fs));line-height:calc(3*var(--fs));text-align:center;}
.place .inf p {font-size: calc(1*var(--fs));line-height: calc(1.4*var(--fs));}

.place.on { transform:scale(1);opacity:1;z-index:3; }
.place.fwd { transform:scale(0.001) translateX(100vw);opacity:0;z-index:0;}
.place.bck { transform:scale(3) translateX(-100vw);opacity:0;z-index:0;}

.frm {position:relative;float:left;width: 33%;height:8em;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;overflow:hidden;cursor:pointer;box-shadow:inset 0 0 0 1px #0002;border-radius:0.3em;background: center center / auto 200% repeat;}
.prod[type="pro"]::before,
.window ul li[type="pro"]::before,
.frm[type="pro"]::before {content:'PRO';font-size:0.7em;line-height:2em;color:#000;text-align:center;position:absolute;right: -3.5em;top: 0.25em;margin: 0;width: 10em;background: #fff;transform: rotate(30deg);z-index: 1;box-shadow: inset 0 0 0 1px #0003;}
.prod[type="premium"]::before,
.frm[type="premium"]::before {content:'';position:absolute;right: -3.5em;top: 0.25em;margin: 0;width: 10em;height: 1.5em;background: #fff url(premium.svg) center center / auto 90% no-repeat;transform: rotate(30deg);z-index: 1;box-shadow: inset 0 0 0 1px #0003;}
.frm[act="yes"] { border-radius:0.3em;box-shadow:inset 0 0 0 1px #0002, 0 0 0 0.25em #fff, 0 0 0 0.5em #0001; }
.frm img {width:100%;height: 100%;padding:1em;}
.frm_kol {position: absolute;right: 1em;bottom: 1em;width: 3em;height: 3em;border-radius: 3em;background: #f6f6f6f6;text-align:center;font-size:0.8em;line-height: 3em;color: #000;}

#ex_ftextures .frm,
#ex_textures .frm {width:100%;border-radius:0.3em;background-blend-mode: multiply;box-shadow:inset 0 0 0 1px #0002;background: var(--color,#ffffff) center center / auto 200% repeat;}
#ex_ftextures .frm img,
#ex_textures .frm img {width: 100%;height:100%;margin:-30% 0;}
#ex_ftextures .frm[act="yes"],
#ex_textures .frm[act="yes"] {box-shadow: inset 0 0 0 1px #0002, 0 0 0 0.25em #fff, 0 0 0 0.5em #0006;margin-bottom: 1em;}

.color {position:relative;float:left;width:20%;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;text-align:left;overflow:hidden;cursor:pointer; }
.color[act="yes"] { -webkit-filter: drop-shadow( 0px 1px 3px rgba(0,0,0,0.8) );filter: drop-shadow( 0px 1px 3px rgba(0,0,0,0.8) ); }

#vQR svg { width:15em;height:15em; }

.wnd .prop .bl h2,
.bl h2 { font-size:calc(1.5*var(--fs));line-height:1em;margin:calc(0.5*var(--fs)) 0 0 0; }

.clip2 {-webkit-animation: slide2 5s infinite;animation: slide2 5s infinite;}
@-webkit-keyframes slide2 { from {transform: translateY(-90px);} 33%,66% {transform: translateY(-25px); } to {transform: translateY(-90px);}}
        @keyframes slide2 { from {transform: translateY(-90px);} 33%,66% {transform: translateY(-25px); } to {transform: translateY(-90px);}}

.count { position:absolute;right:1em;bottom:1em;width:2em;height:2em;border-radius:50%;background-color:rgba(255,255,255,0.5);z-index:1;text-align:center;line-height:2em; }

.del { position:absolute;right:1em;top:1em;width:2em;height:2em;cursor:pointer;z-index:1;background-color:var(--tc);border-radius:50%;}
.del div { position:absolute;top:50%;left:0.4em;width:1.2em;height:1px;background-color:var(--wc);transform:rotate(45deg);}
.del div:last-child { transform:rotate(-45deg);}

#cColor1_prop {cursor: pointer;text-align:left;font-size:1em;line-height:1em;font-weight:400;margin:calc(1*var(--fs)) 0;}
#cColor1_prop .checkbox:not(checked) + label {position:relative;display:inline-block;width: 100%;margin: calc(0.35*var(--fs)) 0;padding: calc(0.4*var(--fs)) 0;color: var(--tc);letter-spacing: 0;text-transform: uppercase;}

#contextmenu {position:absolute;left:50%;top:50%;width: 13em;display:none;margin-top:-8em;margin-left:0;z-index:3;border-radius:0.33em;overflow:hidden;box-shadow: 0 0 0.3em -0.2em #000;background-color: #fff;}

[mode-mob="1"] #contextmenu { left:50%!important;top:50%!important;margin:0 -50% 0 0!important;transform:translate(-50%,-50%)!important;}

#contextmenu[view="yes"] { display:block; }
#contextmenu ul {padding:0;margin: 0;}
#contextmenu ul li {position:relative;padding: 0.66em 1em;margin: 0;font-size: 1em;line-height:1.3em;color: #000;transition:all 0.75s ease;cursor: pointer;overflow:hidden;box-shadow: inset 0 -0.5em 0.1em -0.5em #00000033;}
[mode-mob="0"] #contextmenu ul li:hover { background-color:#eee;color:#000;}

#contextmenu .color   { position:absolute;width:40%;height:100%;top:0px;right:0px;background-color:var(--wc);overflow:hidden; }
#contextmenu .texture { position:absolute;width:40%;height:100%;top:0px;right:0px;background:none center center / auto 500% no-repeat;overflow:hidden; }
#contextmenu .texture1 { position:absolute;width:40%;height:100%;top:0px;right:0px;background:none center center / auto 500% no-repeat;overflow:hidden;background-blend-mode:darken; }

#contextmenu .delete {position:absolute;width:20px;height:20px;top:50%;right: 15px;margin:-10px;border-radius:50%;overflow:hidden;}
#contextmenu .delete::before {content:'';position:absolute;top: 9px;right: 0px;width: 20px;height: 1px;background-color: var(--tc);transform:rotate(45deg);z-index:1;}
#contextmenu .delete::after {content:'';position:absolute;top: 9px;right: 0px;width: 20px;height: 1px;background-color: var(--tc);transform:rotate(-45deg);z-index:1;}

#contextmenu .left {position:absolute;width:20px;height:20px;top:50%;left:calc(50% + 15px);margin:-10px;border-radius:50%;overflow:hidden;}
#contextmenu .left::before {content:'';position:absolute;top:16px;right: -1px;width: 16px;height: 1px;background-color: var(--tc);transform:rotate(45deg);z-index:1;}
#contextmenu .left::after {content:'';position:absolute;top: 4px;right: -1px;width: 16px;height: 1px;background-color: var(--tc);transform:rotate(-45deg);z-index:1;}

#contextmenu .right {position:absolute;width:20px;height:20px;top:50%;right: 15px;margin:-10px;border-radius:50%;overflow:hidden;}
#contextmenu .right::before {content:'';position:absolute;top:16px;right:-1px;width: 16px;height: 1px;background-color: var(--tc);transform:rotate(-45deg);z-index:1;}
#contextmenu .right::after {content:'';position:absolute;top: 4px;right: -1px;width: 16px;height: 1px;background-color: var(--tc);transform:rotate(45deg);z-index:1;}

#contextmenu li:hover .left::before,
#contextmenu li:hover .right::before,
#contextmenu li:hover .left::after,
#contextmenu li:hover .right::after { background-color:var(--wc);}

#contextmenu img { width:100%; }


@media (min-width:2560px) { body { font-size:21px; } }
@media (min-width:1920px) { body { font-size:20px; } }
@media (min-width:1101px) { body { font-size:18px; } }
@media (max-width:1100px) { body { font-size:18px; }
  #mw_wnd,#mw_wnd[max] {width: 100vw;height: 100vh;left: 0;}
  .jscolor {width:15em;height:15em; }
  #dash { width:100vw; }
}

@media (max-height:940px) {
  [menu="yes"] .wnd_in {height: calc(100% - 3em);}
}
@media (max-height:620px) {
  #mw_wnd,#mw_wnd[max],#mw_wnd[max="yes"][rzm="vFltWork"] {left:0!important;top:0!important;height:100%!important;width:100%!important;max-width:100%!important;max-height:100%!important;margin:0;transform:none;border-radius:0!important;}
  .wnd::before {opacity:1;}
  .mw_max {display:none; }
  #dash { width:100vw;height:100%; }
  #dash .in {background:#fff;height:100%;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;}
  #dash_left {margin:0;width: 17em;height:100%;padding:0 0 0 2em;background-color:#00000006;}
  #dash .close {position: absolute;right:1.5em;top:1.5em;}
  #acc_logo { margin-bottom:0!important; }
  #dash_center {margin:0;padding:2em;width: calc(100% - 17em);}
  #acc_help {top: 1.5em;right:2em;}
  #acc_add {top: 1.5em;right:4.5em;}
  #acc_left div {width:calc(50% - 2em);margin: 0 2em 1.5em 0;height: 4em;overflow: hidden;}
  #acc_left div button {display: none;}
  #acc_size2 { display:none; }
  #acc_exit { margin:0 0 2em 0; }
}

@media (max-width:760px) { body { font-size:18px; }
  #dash { width:40em; }
  #dash .in {background:#fff;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;}
  #dash_left { margin:0;width:16em;padding:0 0 0 2em;background-color:#00000006; }
  #dash_center {margin:0;padding:2em;width: calc(100% - 16em);}
  #acc_help {top: 1.25em;right:2.5em;}
  #acc_add {top: 1.25em;right:5em;}

  #mw_wnd[rzm="vTalk"] #bView video { height:12em; }
  #mw_wnd[rzm="vTalk"] #bPeoples video {margin: 0.5em 1em 0.5em 0;width: 3.9em;height: 3.9em;}
}
@media (max-width:710px) {
 
  #dash {left: 500%;}
  [dash="yes"] #dash {margin:0;transform: none;left: 0;top: 0!important;width: 100vw!important;overflow-y:auto!important;height: 100%!important;}
  #dash .in {background:#fff;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;}
  #dash_left {width:10em;height:100vh;padding: 0 2em 1em 2em;margin: 0;background-color:#00000006;overflow-y:auto;}
  #dash_left div {position: relative;float: left;width: calc(100% + 1.5em);margin: 0;padding:0;}
  #dash_left div:last-child { margin:0; }
  #dash_center {width:calc(100% - 10em);padding:2em;overflow-y:auto; }
  #dash .close {position: absolute;right:1.5em;top:1.5em;}
  #acc_logo {height:5em!important;margin:0.5em -1.5em!important;}
  #acc_left div {width:fit-content;margin:0 2em 1.5em 0;height:2em;}
  #acc_left div button {display: none;}
  #acc_size2 { display:none; }
  #acc_help {top:1.5em;right:2em; }
  #acc_add {top:1.5em;right:4.5em;}
  #acc_exit {margin:2em 0;}

  .wnd .block {padding:1em;}

}

@media (max-width:590px) { 
  #mw_wnd,#mw_wnd[max],#mw_wnd[max="yes"][rzm="vFltWork"] {left:0!important;top:0!important;height:100%!important;width:100%!important;max-width:100%!important;max-height:100%!important;margin:0;transform:none;border-radius:0!important;}
  .wnd::before {opacity:1;}
  .mw_max {display:none; }
  .col,.col1,.col3 { width:50%!important;margin:0; }
  .col2 { width:102%!important;margin:0; }
  #dash {left: 500%;}
  [dash="yes"] #dash {margin:0;transform: none;left: 0;top: 0!important;width: 100vw!important;overflow-y:auto!important;height: 100%!important;}
  #dash .in {background:#fff;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;}
  #dash_left {width: 100%;height:auto;padding: 0 2em 1em 2em;margin: 0;background-color:#00000006;}
  #dash_left div {position: relative;float: left;width: calc(100% + 1.5em);margin: 0;padding:0;}
  #dash_left div:last-child { margin:0; }
  #dash_center {width:100vw!important;margin:0;padding:2em;max-height:max-content!important; }
  #dash .close {position: absolute;right:1.5em;top:18em;}
  #acc_logo {height:5em!important;margin: 0.5em -1.9em!important;}
  #acc_left div {width: calc(33.333% - 1.5em);margin: 0 1.5em 1.5em 0;height:2em;font-size: 0.9em;}
  #acc_left div button {display: none;}
  #acc_size2 { display:none; }
  #acc_help {top: 1.4em;right:2.5em;}
  #acc_add {top: 1.4em;right:5em;}
  #acc_exit {position:absolute;top:1.5em;right: 1.5em;margin: 0;}
  
.btn-mpr {display:none;}
.btn-exp,
.btn-frm,
.btn-fil,
.btn-rom {top:0.7em}
.btn-pay {top:4.2em}
.btn-lgo { left:1em;top:1em; }
.btn-mnu { left:1em;top:4em;display:none; }
.btn-acc { right:1em;top:0.7em; }
.btn-tlk {right:1em;bottom:0.7em; }
.btn-qrc {left:1em;bottom:0.7em; }
.btn-prw {left:calc(50% - 6em);bottom:0.7em;}
.btn-nxt {left:calc(50% + 3em);bottom:0.7em;}
.btn-ply {right:1em;bottom:0.7em;} 
.btn-pse {right:1em;bottom:0.7em;}

  #win_top {padding:1.5em 1.5em 0 1.5em;margin:0;width:100%;}
  #win_main {padding: 0 1.5em 1.5em 1.5em;}
  #modal_top {padding: 1.5em;}
  #modal_main {padding: 5em 1.5em 1.5em 1.5em; }
  .jscolor {top: -1.33em;left: -1.33em;width: calc(50vw + 1em);height: calc(50vw + 1em);margin: 0!important;}
  #ex_textures,#ex_ftextures {min-height: 12.4em;float: left;}
  .window ul li[type="pro"]::before{right: -1.5em;}
 
  .win_menu {width: calc(100% + 3em);margin: -0.5em -1.5em 0 -1.5em;overflow-x: auto;}
  .window ul.menu {width:max-content;}
  .window ul.line {width: calc(100% + 1em);margin: 1em -0.5em -3.1em -0.5em;}

}
@media (max-width: 500px) {
  .wnd_in {height: 100%;overflow:auto;padding:1em;}
  [menu="yes"] .wnd_in {height: calc(100vh - 3em);}

  #mw_wnd[rzm="vTalk"] #bButtons .btn { font-size:calc(100vw/21); border-radius:50%; }
}
@media (max-width:400px) {
  .col,.col1,.col2,.col3 { width:100%!important;margin:0; }
  input { width:100%; }
}
@media (max-width:300px) {
  body { font-size:16px; }
  .prm .d { display:none; }
}

