/*
 * TRANSITION | ANIMATION time -- when changed do their changes in updateSlidesState
	(if slide buttons pressed faster than this time then error is occures when slide transition)
 */
 
:root {
	--button-bgcolor: blue;
}


::-webkit-scrollbar {
	width: 0.25rem;
}


::-webkit-scrollbar-thumb {
	background-color: darkgrey;
}


* {
	font-family: Common;
}


* {
	color: black;
	box-sizing: border-box;
	font-size: 0.9rem;
}

@font-face {
	font-family: 'fontello';
	src: url('media/fonts/fontello.woff?35499631') format('woff');
}

@font-face {
	font-family: 'ptsans';
	src: url('media/fonts/pt-sans.bold.ttf') format('truetype');
}

html, body {
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: white;
}

body * {
	margin: 0;
	padding: 0.25rem;
	background: white;
}

body *:not([input="edit"]) {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

body:not([mode="initial"]) {
	background: none;
}

*[disable="1"] {
	opacity: 0.1;
	pointer-events: none;
}

*[vis="0"],
*[vis="false"] {
	display: none;
}

br {
	display: block;
	width: 100%;
	height: 0px;
	background: none;
}

br {
  content:'';
}

flexbr {
	flex-basis: 100%;
	height: 0;
	margin: 0;
    padding: 0;
}

.radimg-br {
	flex-basis: 100%; 
	height: 0;
	margin: 0;
    padding: 0;
}

h1 {
	margin: 0.5rem 0;
	font-size: 1.75rem;
}

h2 {
	margin: 0.5rem 0;
	font-size: 1.5rem;
}

h3 {
	font-size: 1.25rem;
}

h4 {
	font-size: 1rem;
}

button {
    padding: 0.25rem 1.5rem;
    font-size: 1.25rem;
	font-weight: bold;
	color: white;
	background: seagreen;
    border: 1px solid grey;
}

label {
	display: flex;
}

label:hover {
	box-shadow: 0 0 1px 1px grey;
	box-sizing: border-box;
}

input[type="checkbox"],
input[type="radio"] {
	margin: 0 0.5rem;
	cursor: pointer;
}

input[type="radio"][style*="background"] {
	appearance: none;
	background-size: 100% 100% !important;
}


input[type="number"],
input[type="text"] {
	border: 1px solid lightgrey;
}

input[type="number"][disabled],
input[type="text"][disabled] {
	color: dimgrey;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
	-moz-appearance: textfield;
}

input[style^="--img"] {
	appearance: none;
	background: var(--img);
	background-size: contain; 
	background-repeat: no-repeat;
	background-position: center;
}

input[text],
input[pushtext] {
	appearance: none;
	padding: 0;
	margin: 0;
	padding: 0;	
}
/*
input[type="checkbox"][text] {
	appearance: auto;
}
*/
input[text]::after,
input[pushtext]::after {
	display: inline-block;
	width: 100%;
    box-sizing: border-box;
	padding: 0.25rem 1rem;
	text-align: center;
    font-weight: bold;
}

input[text]::after {
	content: attr(text);
}


input[pushtext]::after {
	content: attr(pushtext);
}

input[pushtext]:checked::after {
	content: attr(pushtext);
	background: whitesmoke;
    border: 1px solid grey;
}

input.switch {
	appearance: none;
	align-items: center;
	display: block;
    position: relative;
	top: 1rem;
    width: 3rem;
    height: 1.5rem;
    margin: 0 0.25rem;
    padding: 0;
	background-color: #ffffff2b;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s;
    box-shadow: rgb(0 0 0 / 62%) 0px 0px 5px inset, rgb(0 0 0 / 21%) 0px 0px 0px 24px inset, #22cc3f 0px 0px 0px 0px inset, rgb(224 224 224 / 45%) 0px 1px 0px 0px;
}

input.switch:checked {
	box-shadow: rgba(0, 0, 0, 0.62) 0px 0px 5px inset, yellowgreen 0px 0px 0px 2px inset, yellowgreen 0px 0px 0px 24px inset,
        rgba(224, 224, 224, 0.45) 0px 1px 0px 0px;
}

input.switch::before {
	content: "";
	display: flex;
	top: 0.25rem;
    left: 0.25rem;
    width: 1rem;
    height: 1rem;
    background-color: #e3e3e3;
    border-radius: 50%;
    position: absolute;
    box-shadow: transparent 0px 0px 0px 2px, rgb(0 0 0 / 30%) 0px 6px 6px;
    transition: left 300ms cubic-bezier(0.4, 0, 0.2, 1) 0s, background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
    will-change: left, background-color;
}

input.switch[type="checkbox"]:checked::before {
	left: 1.75rem;
}

select {
	outline-color: transparent;
	border-color: lightgrey;
}

img[data-imglist] {
	display: block;
	width: 30%;
	aspect-ratio: 1 / 1;	
	margin: 0.5rem auto;
	border: solid 1px lightgrey;
}

img[data-imglist][id$="_Tex"] {
	object-fit: none;
}

img[data-imglist]:hover {
	box-shadow: 0 0 3px 3px grey;
}

section {
	display: flex;
	position: absolute;
	left: 0;
	right: 0;
	width: 100%;
	max-height: 100%;
	flex-direction: column;
	flex-wrap: wrap;
	align-items: center;
	margin: 0 auto;
	padding: 0.5rem 0.25rem;
	background: none;
	overflow: hidden;
	opacity: 1;
}

section section {
	position: relative;
}

section,
section *:not(button) {
	transition: all 0.2s ease-out;
}

section input[type="number"],
section input[type="text"] {
	padding: 0.25rem;
	background: yellow;
}

section prop {
	width: 30ch;
	max-width: 100%;
	line-height: 1.75rem;
	font-size: 1rem;
}

section prop input[type="number"],
section prop input[type="text"] {
	float: right;
	width: 15ch;
	margin: 0;
}

section prop * {
	max-width: 45%;
}

.sccheck {
	flex-direction: row;
	justify-content: center;
}

.sccheck > label {
	z-index: 1;
	display: block;
	position: relative;
	font-size: 1.25rem;
	font-weight: bold;
	margin: 0.75rem 0.5rem;
}

.sccheck > section { opacity: 0.1; pointer-events: none; }
.sccheck > input:checked ~ * { opacity: 1; pointer-events: auto; }

.sccheck > input:first-child { z-index: 1; margin: 0 }

.sccheck > section { margin-top: 0; padding: 0; }
.sccheck > input:not(checked) ~ *:nth-child(n+3)  { height: 0; margin: 0; opacity: 0;  }
.sccheck[expand="1"] > input:checked ~ *:nth-child(n+3) { height: auto; opacity: 1; }


/**********************    NEW TAGS    ****************************/

radprop {
	display: flex;
	justify-content: center;
	align-items: center;
	/*background: transparent;*/
}

radprop > label {
	margin-left: 0.25rem;
	margin-right: 0.25rem;
}

radprop br {
	flex-basis: 100%;
	height:	0;
	border: 0;
}

radimg * {
	padding: 0;
}

radimg, radimg > div {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	width: 100%;
	padding: 0;
}

radimg .pointer {
	pointer-events: none;
}

radimg > img {
	display: block;
	width: 7rem;
	height: 7rem;
	object-fit: contain;
	margin: 0.5rem;
	padding: 0;
	background-image: media/pointer.png;
}

radimg[value] img:not([src="media/pointer.png"]):not([checked]) {
	width: 0 !important;
	height: 0 !important;
	border: none !important;
	margin: 0 !important;
	padding: 0 !important;
	visibility: hidden !important;
}

radimg[value] .radimg-br {
	display: none;
}

radimg > img:not([src])[alt] {
	position: relative;
}

radimg > img:not([src])[alt][checked]:after {
	background: whitesmoke;
	border: 1px solid grey;
}

radimg > img:not([src])[alt]:after {
	content: attr(alt);
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0;
	left: 0;
	width: calc(100% - 2rem);
	height: calc(100% - 1rem);
	margin: 0;
	padding: 0.5rem 1rem;
	background-color: #fff;
	text-align: center;
	font-size: 1.25rem;
	font-weight: bold;
}

radimg > imgcap {
	position: relative;
	width: 0;
	height: 8rem;
	margin: 0 0 0 -0.5rem;
	padding: 0;
}

radimg > imgcap::after {
	content: attr(cap);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 100%;
    left: -7rem;
    width: 7rem;
    margin: -0.5rem 0 0;
    padding: 0;
    text-align: center;
    font-size: 0.9rem;
}

radimg[value] > img:not([checked]) + imgcap {
	display: none;
}


radimg > img:hover {
	box-shadow: 0 0 3px 3px grey;
}

radimg .pointer {
	align-self: flex-end;
	display: inline-block;
	position: relative;
	left: 0;
	bottom: 0.5rem;
	width: 0;
	height: 0;
	margin: 0;
	padding: 0;
	transform: translateX(0.5rem);
}

radimg .pointer img {
	transform: translate(-1rem,-1rem);
	border-radius: 50%;
	background: rgba(0,0,0,0.1);
}

radimg:not([value]) .pointer {
	display: none;
}

radimg br {
	border: none;
	height: 0;
	margin: 0px;
	padding: 0;
}

imglist {
	z-index: 10;
	display: flex;
    flex-direction: row;
    position: absolute;
    flex-wrap: wrap;
    justify-content: start;
	align-content: start;
	position: absolute;
	right: 0;
	width: 32ch;
	/*height: 100%;*/
	padding-top: 0;
	margin: 0;
	background-color: white;
	overflow-x: hidden;
	overflow-y: overlay;
}

imglist > div {
	width: 20%;
    transform: translateY(-1rem);
}

imglist h4 {
    position: absolute;
    width: 100%;
    height: 1.5rem;
    margin: 0;
	margin-top: -1rem;
    padding: 0;
    border: 1px solid grey;
    cursor: pointer;
    overflow: hidden;
    background: lightyellow;
}

imglist * {
	margin: 0.5rem 0.25rem;
	padding: 0;
	aspect-ratio: 1 / 1;
}

imglist img {
	width: 30%;
	border: solid 1px lightgrey;
	object-fit: none;
}

imglist figcaption {
	width: 32%;
    height: 1.5rem;
    margin: 0 0 0 -32%;
    font-size: 0.75rem !important;
    line-height: 0.75rem;
    transform: translateY(3rem);
	background: none;
    overflow: hidden;
    color: grey;
}

imglist[search] #imglist-search-button {
	z-index: 10;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    right: -32ch;
    margin: 0.75rem 0 0 -1.2rem;
    background: left top / cover url(media/search.png);
    filter: drop-shadow(1px 2px 2px grey);
}

imglist[show_search] #imglist-search-button {
	display: none;
}

imglist:not([show_search]) .imglist_search {
	display: none;
}

#texs:not([show_search]) > img {
	width: 2.5rem;
	margin-bottom: 0;
}

#texs:not([show_search]) > figcaption {
	display: none !important;
}


imglist img:hover {
	z-index: 1;
	box-shadow: 0 2px 4px 1px grey;
	transform: scale(1.1);
	transition: all 0.125s ease-out;
}

imglist[fit="none"] img {
	object-fit: none;
}

imglist[fit="cover"] img {
	object-fit: cover;
}

imglist[caption="1"] img {
	height: 2.5rem;
	margin-bottom: 1.75rem;
}

.imglist-subdirs {
	display: flex;
    justify-content: space-around;
    gap: 0.25rem;
    z-index: 11;
    position: sticky;
    top: 0;
    width: 100%;
    height: 2rem;
    margin: 0;
    padding: 0;
	font-weight: bold;
	background: greenyellow;
    border: 3px outset #e0ffb1;
}

.imglist-subdirs * {
	margin: 0;
}

.imglist-subdir {
	flex: 1;
	width: auto;
	height: 100%;
	background: gold;
	word-break: break-word;
	font-size: 0.9rem !important;
	text-align: center;
	border-radius: 0.5rem;
}

.imglist-subdir[on] {
	box-shadow: 0px -1px 2px 2px #777728 inset;
}

.imglist-bar {
	display: inline-flex;
	flex-wrap: wrap;
    z-index: 10;
    position: sticky;
    top: 2rem;
    width: 100%;
    aspect-ratio: auto;
    margin: 0;
    background: ghostwhite;
    border: 2px inset lightgrey;
}

*.imglist-bar input {
	width: 100%;
	max-width: calc(100% - 5ch); 
	margin: 1rem 0 0.5rem 0.5rem;
}

*.imglist-bar div {
	width: 2rem;
    font-size: 1rem;
    margin-left: 0;
    padding: 1rem 0 0.5rem;
}

#texs[no-dirs]  {
	height: calc(100vh - 4rem) !important;
}

#texs[no-dirs] *.imglist-bar {
	top: 0;
}

#imglist-curfiles img {
	width: 45%;
}

#imglist-curfiles figcaption {
	width: 47%;
	margin: 0 0 0 -46%;
}

.imglist_search {
	z-index: 11;
    display: block;
    position: absolute;
    text-align: center;
    box-shadow: black 0px 8px 8px 2px;
    background: rgb(255, 255, 92);
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 1.75rem;
    margin: 0;
}

.imglist_search + button {
	z-index: 11;
    display: block;
    position: absolute;
    width: 1.5rem;
    margin: 0px;
    padding: 0px;
    line-height: 1rem;
    color: black;
    background: none;
    border: none;
    left: auto;
    right: 0;
    top: 0;
    height: 1.75rem;
}

radroom {
	display: block;
	perspective: 1000px;
	width: 60%; 
	height: auto;
	margin: 0;
	padding: 0;
}

radroom > img {
	position: relative;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
}

radroom label {
	display: inline-block;
	position: absolute;
	perspective: 100px;
	top: 23%;
	height: 52%;
	margin: 0; 
	padding: 0;
}

radroom label input[type="radio"] {
	display:none;
}

radroom label input[type="radio"] + img {
	opacity: 0.25;
	width: 40%; 
	height: 20%; 
	border: 1px solid black;
	transform-style: preserve-3d; 
}

radroom label input[type="radio"]:checked + img {
	visibility: visible;
	opacity: 1;
	outline: 1px solid grey;
}

radroom input[type="radio"]:not(:checked) ~ svg {
	display:none;
}

radroom img {
	position: inherit;
	bottom: 0;
}

radroom > label:nth-of-type(1) { left: 0; width: 14%; }
radroom > label:nth-of-type(2) { left: 16%; width: 33%; }
radroom > label:nth-of-type(3) { right: 16%; width: 33%; }
radroom > label:nth-of-type(4) { right: 0%; width: 14%; }

radroom > label > img { bottom: 0; }
radroom > label:nth-of-type(1) > img { right: 10%; transform: rotateY(40deg); }
radroom > label:nth-of-type(2) > img { left: 15%; }
radroom > label:nth-of-type(3) > img { right: 15%; }
radroom > label:nth-of-type(4) > img { left: 10%; transform: rotateY(-40deg); }

radroom svg {
	position: initial;
	width: 100%;
	height: 100%;
	margin: 0;
	stroke: rgb(0,0,255);
	stroke-width: 3;
}


/********************    CAPTION    ************************/

body:not([mode="style"]) #caption {
	display: none;
}

#caption {
	z-index: 11;
	position: absolute;
    left: 0;
	top: 0;
	width: 100%;
	height: 1.5rem;
	margin: 0;
	padding: 0;
	font-size: 1rem;
	background: deepskyblue;
}

#caption * {
	height: 1.5rem;
	margin: 0;
	padding: 0;
	font-size: 1rem;
	font-weight: normal;
	color: black;
	background: 0;
	cursor: pointer;
}

#caption button {
	margin: 0 0.5rem;
    padding: 0 1rem;
	color: black;
    line-height: 0;
    border: 1px solid dimgrey;
    border-radius: 1rem;
    box-shadow: -1px 0 4px 0 black;
	background: white;
}


}

#caption button:hover {
	color: white;
	background: green;
	border-color: white;
	transition: all 0.25s;
}

#caption img {
    width: 2.5rem;
    height: 2.4rem;
    padding: 0.25rem;
    border: none;
}

#capmenu_btn:checked + * {
	display: flex;
}

#capmenu_btn:not(:checked) + * {
	display: none;
}

#capmenu * {
	color: black;
}

#contacts::after {
	content: "Контакты";
}

#contacts_menu {
	position: absolute;
    display: flex;
    flex-direction: column;
	height: calc(100vh - 2rem);
	padding-top: 1.5rem;
	background: whitesmoke;
}

#contacts:checked {
	border-radius: 0 !important;
}

#contacts:not(:checked) + * {
	display: none;
}

#caption label[for="capmenu_btn"] {
	display: inline;
	position: absolute;
	right: 0;
	top: 0;
	width: 1.5rem;
    height: 1.55rem;
	padding: 0;
	border-top: 0.95rem double white;
	border-bottom: 0.35rem solid white;
	font-size: 1.25rem;
	font-weight: bold;
	text-shadow: 0 1px 1px;
	line-height: 0.75rem;
	color: white;
	cursor: pointer;
	text-align: left;
	background: yellowgreen;
    box-shadow: 0 0 1px 2px lightgrey;
}

#savedlg p {
	font-size: 0.8rem;
	text-align: justify;
}

table.spec {
	border-collapse: collapse;
}

table.spec tr {
	border: 1px solid grey;
}

table.spec tr:last-child,
table.spec tr:last-child td{
	font-weight: bold;
	background: whitesmoke;
	border: none;
}


table.spec tr:first-child td {
	padding: 0.5rem 0.5rem;
	font-size: 1rem;
	color: white;
	background: yellowgreen;
}

table.spec td:not(:last-child) {
	border-right: 1px solid lightgrey;
}

/**********************     MSGBOX    **********************/

#msgbox {
	z-index: 20;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0;
	max-width: 100%;
	margin: auto;
	padding: 0;
	background: white;
	filter: drop-shadow(black 2px 4px 6px);
	overflow: auto;
}

#msgbox:not([open]) {
	display: none;
}

#msgcap {
	position: sticky;
	top: 0;
	width: 100%;
	margin: 0 0 1rem;
	padding: 0 3rem;
	text-align: center;
	color: white;
	background: darkslategrey;
}

#msgclose {
	position: absolute;
    right: 0;
    top: 0;
    line-height: 1rem;
    padding: 0;
    font-size: 1.5rem;
    color: white;
    background: none;
    border: navajowhite;
}

#msgcont {
	margin: 0;
	padding: 0;
}

#msgcont_bottom_strip {
	position: sticky;
	bottom: 0;
	width: 100%;
	height: 2rem;
	background: inherit;
	filter: opacity(0.75);
}
/*
#msg_box {
    z-index: 11;
	display: none;
	position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
}
*/
#msgbox details {
	color: blue;
    font-weight: bold;
}

#msgbox.build_error {
	top: 1rem;
	bottom: auto;
    width: 100%;
}

#msgbox.build_error #msgcap {
	background: red;
}


/*
#msgbox.build_error {
	width: 100%;
}

#msgbox.build_error #show_params:not([on]) + * {
	display: none;
}

#msgbox.build_error > #msgcont_bottom_strip {
	display: none;
}

#msgbox.build_error #msgcap {
	color: red;
	background: white;
}

#msgbox.build_error ul,
#msgbox.build_error li {
	text-align: left;
    font-size: 1.5rem;
}

#msgbox.build_error ul {
	margin-top: 1.25rem;
    align-self: center;
}

#msgbox.build_error li b,
#msgbox.build_error li span {
    padding: 0;
    font-size: 1.5rem;
}

#msgbox.build_error li span {
    font-weight: bold;
}

#msgbox.build_error li {
	list-style: none;
}

#msgbox.build_error #msgcont button {
	position: absolute;
	width: 2.5rem;
    height: 2.5rem;
    margin: -2.5rem;
    right: 3rem;
    margin-left: 10rem;
    background: url(media/edit.jpg);
    background-size: contain;
    background-repeat: no-repeat;
	border: none;
}
*/

/*********************    3D    ****************************/

#canvas2d,
#glcanvas {
    position: absolute;
    left: 0;
    top: 3.5rem;
    width: 100%;
    height: calc(100% - 3.5rem);
	visibility: hidden;
	transition: all 0.2s;
}

body:not([print]) #userid {
	display: none;
}

#userid {
	position: absolute;
	left: 0;
	top: 4rem;
}

#edit_menu[start] ~ #glcanvas {
	filter: opacity(0.5);
}

body[mode="initial"] #glcanvas {
	top: 6rem;
	height: calc(100% - 6rem);
}


/********************    CFG    ************************/

body:not([mode="initial"]) > #cfg,
body:not([mode="initial"]) > #cfg > section {
	height: 3rem;
    overflow: hidden;
}

body[mode="style"] > #cfg {
	display: none;
}

#cfg {
	z-index: 19;
	position: absolute;
	flex-direction: row;
	top: 0;
	bottom: auto;
	width: 100%;
	/*width: 34rem;*/
	height: 100%;
	margin: auto;
	padding: 0;
	align-content: start;
	justify-content: center;
	overflow: overlay;
	overflow-x: hidden;
	background: none;
	/*box-shadow: 0 8px 8px 1px black;*/
}

/*
#cfg::before {
	content: "";
    background: white;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
*/
#cfg h2 {
	z-index: 2;
	position: sticky;
	top: 0;
	width: 100%;
	margin-top: 0;
	margin-bottom: 0;
	background: mediumseagreen;
	color: white;
	text-align: center;
}

#cfg > h3 {
	width: auto;
	margin-bottom: 2rem;
	padding: 0 1rem;
}

#cfg > h3::before,
#cfg > h3::after {
    content: "";
    display: block;
    position: absolute;
    left: -1rem;
	top: 0;
    width: 1rem;
    height: 100%;
}

#cfg > h3::before,
#cfg > h3::after {
    background: lightseagreen;
}

#cfg > h3::after {
	left: 100%;
}

#cfg h4 {
	font-size: 1.5rem;
}

#cfg > section {
	flex-wrap: nowrap;
    position: absolute;
    top: 0;
    height: auto;
	min-height: 8rem;
    margin: 0;
    padding: 0 0 4px 0;
    background: white;
	box-shadow: 0 8px 8px 1px grey;
    overflow-y: hidden;
}

#cfg > section:not([cur]) {
	opacity: 0;
	pointer-events: none;
}

#cfg > section > h3 {
	width: 100%;
    height: 2rem;
    padding: 0;
    margin: 2rem 0 0;
    line-height: 1.75rem;
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    border: 1px solid lightgrey;
    background: whitesmoke;
    color: black;
}

#cfg > section > h3:first-child {
	margin-top: 0;
}

#cfg > section radprop h3 {
	width: 11rem;
	padding: 0.25rem 1rem;
}

#cfg > section [type="radio"] {
	width: 6.5rem;
	margin: 0 2px;
	font-size: 1.25rem;
	background: yellow;
}

#cfg > section [type="radio"]:checked {
	border: 1px solid black;
}

#cfg > section radimg[value] span {
	display: none;
}

#cfg > section radimg[value] img:not([src="media/pointer.png"]):not([checked]) {
    z-index: 11;
    width: 1.5rem !important;
    height: 1.5rem !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: visible !important;
    border-radius: 0.25rem;
    box-shadow: 0 1px 4px 0 lightgrey;
    margin: 0.25rem 0 !important;
}

#cfg radroom {
	width: 40%;
}

#cfg input {
	font-weight: bold;
}

#prev_sec,
#next_sec {
	z-index: 11;
	display: none;
    position: absolute;
    top: 0;
	padding: 0;
    margin-left: 34rem;
    color: darkgrey;
    background: none;
    font-size: 3rem;
    font-weight: bold;
    line-height: 1.5rem;
	text-shadow: 0 0 1px black;
}


#prev_sec {
	margin-left: -34rem;
}
/*
#cfgsc[disabled] {
	color: grey;
}

#cfgsc[value="1"] ~ section:not(:nth-of-type(1)),
#cfgsc[value="2"] ~ section:not(:nth-of-type(2)),
#cfgsc[value="3"] ~ section:not(:nth-of-type(3)),
#cfgsc[value="4"] ~ section:not(:nth-of-type(4)),
#cfgsc[value="5"] ~ section:not(:nth-of-type(5)),
#cfgsc[value="6"] ~ section:not(:nth-of-type(6)) {
	opacity: 0;
	pointer-events: none;
}

#cfgsc[value="1"] > input:nth-of-type(1),
#cfgsc[value="2"] > input:nth-of-type(2),
#cfgsc[value="3"] > input:nth-of-type(3),
#cfgsc[value="4"] > input:nth-of-type(4),
#cfgsc[value="5"] > input:nth-of-type(5),
#cfgsc[value="6"] > input:nth-of-type(6) {
	appearance: none;
	transform: scale(1.75) translateY(-1px);
	background: yellowgreen;
	border: 1px solid lightgrey;
	border-radius: 50%;
	box-shadow: 0px 2px 1px grey;
}
*/
#_Cfg[value] {
	flex-direction: column;
    align-content: baseline;
    width: 25rem;
    height: 12rem;
    margin-left: 1rem;
}

#_Cfg:not([value]) + * ~ * {
	display: none;
}

#_Cfg > img {
	width: 10rem;
	height: 10rem;
	margin: 0 2rem 2rem;
}

#_Cfg[value] > img {
	margin: 0;
}

#_Cfg[value="CL"] {
	margin-left: 15rem;
}

#cfg > section #_Cfg[value] img:not([src="media/pointer.png"]):not([checked]) {
	width: 3rem !important;
    height: 3rem !important;
    border: none !important;
    margin: 0.25rem 2rem !important;
}

#tillceil_prop {
	display: flex;
    align-items: center;
    position: absolute;
    top: 17rem;
    width: max-content;
    font-weight: bold;
    background: none;
}

#ceilh_prop #tillceil_prop {
	position: relative;
	width: auto;
	margin: 0;
	top: 0;
	font-weight: normal;
	text-shadow: none;
}

#ceilh_prop #tillceil_prop #_Height {
	padding: 0;
    background: yellow;
    font-weight: normal;
}

#_Cfg[value="L0"] ~ #_Depth,
#_Cfg[value="L1"] ~ #_Depth {
	display: none;
}

#_Cfg:not([value]) ~ h3:nth-of-type(2) {
	display: none;
}

#_Cfg[value] ~ h3:nth-of-type(1) {
	display: none;
}

#_Cfg[value] ~ h3:nth-of-type(2) {
	display: block;
}

#_Width {
	position: absolute;
	top: 3.5rem;
	width: 4rem;
	text-align: center;
	font-weight: bold;
	background: yellow;
}

#_Height {
	width: 4rem;
	text-align: center;
	font-weight: bold;
}

#_Depth {
	position: absolute;
	top: 5rem;
	width: 4rem;
	margin-left: -15rem;
	text-align: center;
	font-weight: bold;
	background: yellow;
}

#_Cfg[value="CR"] ~ #_Depth {
	margin-left: 14rem;
}


/*
#build_next_cont {
	display: flex; 
	justify-content: center; 
	gap: 1rem; 
	position: absolute; 
	bottom: 0; 
	width: 100%; 
	padding: 0 0 1rem;
}

body:not([mode="initial"]) #build_next_cont {
	display: none;
}

body[mode="initial"] #build_next_cfg,
body[mode="initial"] #build_next_kotel {
    opacity: 0;
    cursor: none;
}

body[undefined_radimg="1"] #build_next_cfg {
	opacity: 0.5;
	pointer-events: none;
}
*/
#Refr + * {
	display: flex;
	flex-direction: column;
	align-items: start;
}

#Refr[value="2"] + *,
#Refr[value="2"] + * + *,
#Refr[value="2"] + * + * + * {
	display: none;
}

#Refr[value="0"] ~ * {
	display: none;
}


#Refr_W_cap::after,
#Penal_W_cap::after {
	content: "макс. " attr(max_value);
    display: block;
    position: inherit;
    color: dimgrey;
    font-weight: normal;
    font-size: 1rem;
    padding: 0;
    line-height: 0;
    transform: translate(18rem, -0.75rem);
}

#refr_h[hide="true"],
#refr_h[hide="true"] * {
	display: none;
}

#Penal:not([value]) ~ *,
#Refr:not([value]) ~ *,
#CtopOven:not([value]) ~ * {
	width: 0;
	height: 0;
	margin: 0;
	padding: 0;
	border: none;
	opacity: 0;
}

#Refr:not([value]) {
	padding-bottom: 2rem;
}

#CtopOven > img {
	width: 10.5rem;
}

#CtopOven > img + imgcap::after {
	left: -11rem;
    width: 11rem;
}

#Penal[value="0"] ~ *,
#CtopOven[value="-"] ~ * {
	display: none;
}

#oven_pos {
	display: none;
}

#CtopOven[value="ПДШ"] ~ #oven_pos[vis="1"],
#CtopOven[value="ПДШМ"] ~ #oven_pos[vis="1"] {
	display: flex;
}

#CtopOven[value="Плита"] ~ #ctopovenW *[value="450"],
#CtopOven:not([value="Плита"]) ~ #ctopovenW *[value="500"] {
	display: none;
}

#kotel_sec + * #CtopOven:not([value]) {
	margin-bottom: 2rem;
}

#Penal[value]:not([value="0"]),
#Kotel[value]:not([value="0"]),
#CtopOven[value]:not([value="-"]),
#Refr[value]:not([value="0"]) {
    flex-direction: column;
    position: absolute;
    top: 2rem;
    width: auto;
    height: 6rem;
    margin-left: -40rem;
}

#Refr[value] {
	top: 4rem;
}

#refr_pos[vis="0"] {
	display: none;
}

#Penal ~ * {
	display: flex;
	flex-direction: column;
	align-items: start;
}

#Penal[value] > img,
#Kotel[value] > img,
#CtopOven[value] > img,
#Refr[value] > img {
    width: 5rem;
    height: 5rem;
	margin: 0;
}

#Penal[value] imgcap,
#Kotel[value] imgcap,
#CtopOven[value] imgcap,
#Refr[value] imgcap {
	display: none;
}


#Kotel + * + * {
	display: flex;
}

#Kotel:not([value]) ~ *,
#Kotel[value="0"] ~ * {
	display: none;
}

#Kotel:not([value]) > img:nth-child(8) {
	margin-top: 4rem;
}

#has_kotel:not([value]) ~ *,
#has_kotel:not([value="1"]) ~ * {
	display: none;
}

#Kotel:not([value]) {
	padding-bottom: 2rem;
}
/*
#_Hood[value="В-"] ~ #hoodW {
	display: none;
}
*/

/*
#room button {
	height: 2rem;
	padding: 0rem 1rem;
	border-radius: 0.5rem;
	line-height: 0rem;
	font-size: 1rem;
	font-weight: normal;
}

#room prop {
	width: 20ch;
}

#room input[name="room_wall"] {
	width: 2rem;
	height: 100%;
	margin: 0;
}
*/


body[mode="initial"] #room_mode {
	display: none;
}

#room_mode[on] {
	box-shadow: 0 0 2px 2px yellowgreen;
}

#room_mode:not([on]) ~ #room_size,
#room_mode:not([on]) ~ #room_obj {
	display: none;
}

#room_obj > option {
	padding: 0;
}

#_Room_W,
#_Room_D {
	display: none;
	position: absolute;
	width: 6ch;
    margin: 0;
    padding: 0;
	text-align: center;
	background: yellow;
}

#build {
	display: none;
	visibility: hidden;
	position: absolute;
    bottom: 0;
    width: 8rem;
}



/**************************    EDIT_MENU     ****************************/

body[mode="initial"] #edit_menu {
	display: none;
}

body[mode="style"]:not([bu=""]) #edit_menu {
	opacity: 0.25;
}

body:not([bu=""]) #edit_menu:hover {
	opacity: 1;
}

/*
#initials:checked + * {
	font-weight: bold;
    color: white;
    background: darkgreen;
	border-radius: 0;
}

#cfg_menu:hover {
	transform: scale(1.1);
	transition: all 0.2s ease-out;
	box-shadow: 0 2px 4px 1px grey;
}

#initials:not(:checked) + * + * {
	display: none;
}

#cfg_menu + * {
    position: relative;
    top: 1.5rem;
    background: darkgreen;
}

#cfg_menu + * > *:hover {
	font-weight: bold;
	color: white;
    background: darkgreen;
}
*/

#edit_menu * {
	font-size: 1rem;
}

.edit_menu_btn {
	position: absolute;
	width: max-content;
	height: 1.5rem;
	padding: 0 0.75rem;
	font-weight: bold;
	color: black;
	text-decoration: none;
	border: 1px solid darkgreen;
	border-radius: 1rem;
}

.edit_menu_btn:hover,
#room_size:hover {
	transform: scale(1.1);
	transition: all 0.2s ease-out;
	box-shadow: 0 2px 4px 1px grey;
}

#edit_menu {
	z-index: 1;
    opacity: 1;
	position: fixed;
    flex-direction: row;
	flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0;
    top: 1.5rem;
	width: auto;
	height: 2rem;
	padding: 0;
	background: white;
    overflow: visible;
}

body:not([mode="style"]) #edit_menu {
	display: none;
}

#edit_menu > label {
	z-index: 1;
    margin: 0;
    padding: 0 1rem;
	//font-family: ptsans;
	font-size: 1rem;
    font-weight: bold;
    color: black;
    background: none;
    border: none;
    cursor: pointer;
}

#edit_menu label:hover {
	box-shadow: none;
	border: none;
	transform: scale(1.15);
}

/*
#edit_menu > label:nth-of-type(n + 8) {
	font-size: 0.9rem;
}
*/

#edit_menu input[type="radio"] {
	appearance: none;
	padding: 0;
	margin: 0;
}

#edit_menu > label + * {
	display: none;
}

#edit_menu > input[type="radio"]:checked + label {
	text-shadow: 0 1px lightgrey;
    transform: scale(1.25);
    color: slateblue;
}

#edit_menu > input[type="radio"] + label + * {
	display: flex;
    justify-content: center;
    align-items: center;
	position: absolute;
    top: 2.25rem;
    border: 2px solid darkgreen;
    box-shadow: 0 4px 4px grey;
    width: max-content;
	min-width: 25rem;
    padding: 0.5rem 1rem;
}

#edit_menu > input[type="radio"]:not(:checked) + label + * {
	display: none;
}
/*
#goto_next {
	display: inline-block;
	position: absolute;
    transform: translate(0, 0.25rem);
    color: lightgrey;
    line-height: 0;
    font-size: 4rem;
    font-weight: bold;
    text-shadow: 0 2px 2px grey;
}

#goto_next:hover {
	transform: translate(0, 0.25rem) scale(1.25);
}
*/

#goto_next {
	display: inline-block;
    width: 9rem;
    margin-left: 0.75rem;
    background: none;
    text-align: left;
    font-size: 1rem;
    font-weight: bold;
    text-shadow: 0 2px 1px grey;
    transform: scale(1.125);
}

#goto_next:hover {
	transform: scale(1.25);
}

#basebu_header {
	display: inline;
    padding: 0.25rem 2rem;
    font-size: 1.25rem;
	text-align: center;
    box-shadow: 0 1px 2px 1px grey;
}

body:not([mode="basebu"]) #goto_next,
body:not([mode="style"]) #goto_next_cont ~ * {
	display: none;
}

input[name="Penal_Pos"] {
	width: 5rem;
}

input[name="_Antresol"] {
	width: 12rem;
}

#addbasebu_menu {
	flex-direction: column;
}

#addbasebu_menu > * {
	width: 100%;
}

#addbasebu_menu > * > p {
	flex: 1 1 0;
	margin-right: 2rem;
    font-weight: bold;
}

#addbasebu_menu > * > input {
	width: 5rem;
}



#_Facad_Mat[value="alum_wide"] ~ * #_Facad_Tex,
#_Facad_Mat[value="alum_narr"] ~ * #_Facad_Tex {
	display: none;
}

#edit_menu input[type="radio"][name="_Facad_Milling"] {
	width: 1.5rem;
	height: 2rem;
	margin: 0 0.125rem;
}

#edit_menu input[type="radio"][name="_Facad_Milling"]:checked {
	margin: 0 0.5rem;
	transform: scale(1.25);
	box-shadow: 0 0 2px 2px grey;
}

#_Facad_Mat:not([value="mdf"]) ~ * input[name="_Facad_Milling"] {
	display: none;
}

#_Handle_L optgroup {
	display: none;
}

#_Handle_L {
	transition:  all 0.2s ease-in-out;
}

#_Handle:not([value="рейлинг"],[value="скоба"]) ~ #_Handle_L,
#_Handle:not([value="рейлинг"],[value="скоба"]) ~ #_Handle_Dir {
	max-width: 0;
	opacity: 0;
}

#_Handle[value="рейлинг"] ~ #_Handle_L *[name="рейлинг"],
#_Handle[value="скоба"] ~ #_Handle_L *[name="скоба"] {
	display: block;
}

body[bu=""] #Handle_Pos {
	display: none;
}

#_Handle_Pos {
	width: auto;
}

#_Handle_Pos > div {
	flex-wrap: nowrap;
	width: auto;
}

#_Handle_Pos > div:not([active]) {
	display: none;
}

#_Handle_Pos img {
	height: 1.9rem;
	border: 2px solid #3dbee9;
}

#_Handle_Pos * {
	transition: visibility 0s;
}

#_Handle_Pos:not([value]) .pointer,
#_Handle_Pos > div:not([active]) ~ .pointer {
	display: none;
}

#_Handle_Pos:not([value]) {
	gap: 0.5rem;
    width: 100%;
}

/*
#_Handle_Pos:not([disable="1"]):not([value]) ~ * {
    display: none;
}
*/
#_Handle_Pos[disable="1"] {
    display: none;
}

#_Handle_Pos:not([value]) > div {
	gap: 0.5rem;
}

#_Plinth > img {
	width: 3rem;
	height: 3rem;
}

#tabletop:not(:checked) + *,
#wallpanel:not(:checked) + *,
#sinkobj:not(:checked) + * {
	display: none;
}

#_Wallpanel[value="0"] ~ #_Wallpanel_Tex {
	display: none;
}

#_Wallpanel[value="2"] ~ #_Wallpanel_Tex,
#_Wallpanel[value="3"] ~ #_Wallpanel_Tex {
	object-fit: cover;
}

#_Wallpanel[value="1"] ~ #wallpanelDist {
	display: none;
}

#_Wallpanel_Tex[value*="/панель/"] ~ * #_Plinth *[value="-"] {
	display: none;
}

body[imglist="0"] imglist {
	display: none;
}

body[imglist="1"] input[name="style_item"]:not([id="tabletop"]):not([id="wallpanel"]) + * + * {
	display: none;
}

#plitka:not(:checked) ~ * {
	display: none;
}
/*
#_Socle[value=""] ~ #_Socle_Tex {
	display: none;
}
*/
#styles * {
	padding: 0;
	background: white;
}

#socle + * + * {
	display: flex;
}

#platerack[off] + label,
#ttop_joint[off] + label {
	display: none;
}

#styles_colors_tip {
	position: absolute;
    top: 5rem;
    width: 40ch;
    padding: 0.5rem 5rem;
    font-size: 1.25rem;
    color: black;
    text-align: center;
	box-shadow: 0 4px 4px 1px grey;
}

#styles_colors_tip button {
	position: absolute;
    right: 0.25rem;
    top: 0.5rem;
	padding: 0;
    line-height: 0;
    font-weight: bold;
    text-shadow: 0 0 1px black;
    color: darkgreen;
    background: none;
    border: none;
    transform: scale(1.5);
}

#styles_colors_tip::after {
	content: "";
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}


/*********************    BUNIT    **********************/

#bunit {
	z-index: 4;
	opacity: 1;
	visibility: visible;
	display: flex;
	flex-direction: revert;
    flex-wrap: wrap;
	justify-content: center;
	position: absolute;
	top: 4rem;
	left: 0;
	right: 0;
	width: 56ch;
	max-height: calc(100% - 2rem);
	padding: 0.25rem 0 0 0;
	background: none;
	border-radius: 0.25rem 0.25rem 0 0;
	overflow: visible;
}

#_Inset {
	position: absolute;
    left: 0.5rem;
    top: 2.5rem;
}

#_Inset::before {
	content: "Витрина";
	position: absolute;
    left: 1.25rem;
    top: -0.25rem;
    font-weight: bold;
}

#buops {
    z-index: 1;
    display: flex;
    justify-content: end;
    gap: 0.5rem;
    /* left: auto; */
    /* right: 0; */
    /* top: 1.5rem; */
    margin: 0;
    padding: 0 0.5rem;
    background: white;
    border-bottom: 2px solid lightgrey;
    /* border: 1px solid; */
    border-radius: 0.75rem;

}

#buops > * {
	width: 2rem;
    height: 2rem;
    margin: 0;
    padding: 0;
    line-height: 1.75rem;
    font-size: 1.75rem;
    font-weight: bold;
    background: white;
    text-align: center;
}

body:not([mode="bunits"]) #buops_history {
	visibility: hidden;
}

body[mode="basebu"] #buops {
	display: none;
}

#bupos_show:checked ~ #buops,
#showbus:checked ~ #buops {
	display: none;
}

#showbus {
	appearance: none;
	margin: 0;
    padding: 0;
	border-radius: 1rem;
}

#showbus::before {
	content: "Модуль";
    display: block;
    width: 8ch;
    padding: 0.125rem 1rem 0.125rem 1rem;
    font-weight: bold;
    text-align: center;
    background: #cefd6d;
    border: 1px solid darkgreen;
    border-radius: 1rem;
}

#showbus + span {
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: -0.75rem;
	padding: 0;
	line-height: 0;
	font-size: 1rem;
	font-weight: bold;
	color: green;
	background: transparent;
	pointer-events: none;
	transform: scaleY(0.5);
}

#showbus:checked + span {
	transform: scaleY(-0.5);
}

/*
label[for="showtexs"] {
    align-self: start;
    display: inline;
    position: relative;
	height: 1.5rem;
    margin: 0;
    padding: 0 1rem;
	font-weight: bold;
    border: 1px solid darkgreen;
    border-radius: 1rem;
}
*/
#showbus:checked::before,
#showtexs:checked + label {
	box-shadow: 0 0 4px 1px darkgrey;
	border-radius: 1rem 1rem 0 0;
}

/*
#showtexs::after {
    content: "Изменить цвет";
	position: absolute;
    width: 100%;
    text-align: center;
    font-weight: bold;
    margin: -0.65rem 0 0 -0.25rem;
}

#showtexs:checked::after {
	content: "Заменить модуль";
	content: "Наполнение";
}

#showtexs:not(:checked)::after {
	content: "Изменить цвет";
}
*/
#budim {
	z-index: -1;
    display: flex;
    position: relative;
    top: 0;
    left: 0;
    width: auto;
    height: 1.25rem;
    margin: 0;
    padding: 0 2ch;
    background: ghostwhite;
}

#budim prop {
	left: 7.75ch;
	top: 0;
	width: 5.5ch;
	height: 100%;
	line-height: 0;
	margin: 0;
	padding: 0;
	background: none;
}

#budim prop select {
	z-index: 1;
}

#budim prop:nth-of-type(1) select {
	left: 9ch;
}

#budim prop:nth-of-type(2) select {
	left: 17.5ch;
}

#budim prop:nth-of-type(2) {
	left: 14.75ch;
}

#budim prop:nth-of-type(3) {
	left: 21.75ch;
}
/*
#budim prop:nth-of-type(3) input {
	padding: 0;
}
*/
#budim prop span {
	display: none;
}
#budim prop input {
	position: relative;
	float: none;
	width: 100%;
	max-width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
    text-align: center;
	text-shadow: -1px 1px 1px rgba(0, 0, 0, .4), 1px -1px 0 rgba(255, 255, 255, 1);
	background: yellow;
}

/*
body[bu=""] #bunit > *:not([id="bunames"]) {
	display: none;
}

body[mode="bunits"] #activatebunitsmode,
body:not([mode="bunits"]) #activatestylemode {
	display: none;
}
*/
#_BUWidth[disabled],
#_BUHeight[disabled],
#_BUDepth[disabled],
#buleft[disabled],
#buright[disabled] {
	border: none;
}

#budim > prop select {
	position: absolute;
    right: 2px;
    top: 0;
    width: 1.5ch;
    height: 100%;
    margin: 0;
    padding: 0;
    border: none;
    color: red;
    background: none;
}

#bupos_show {
	appearance: none;
    width: 12ch;
    height: 1rem;
	margin-left: -0.25rem;
    padding: 0 0 1.5rem 0;
	background: powderblue;
	border: 1px solid darkgreen;
	border-radius: 1rem;
}

#bupos_show::after {
	content: "Положение";
    display: block;
    width: 100%;
    text-align: center;
}

#bupos_show:checked {
	border-radius: 1rem 1rem 0 0;
    box-shadow: 0 0px 4px 1px black;
}

#bupos {
	display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    margin: 0.25rem 0 0;
    background: none;
}

#bupos > * {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: min-content;
}

#bupos * {
	padding: 0;
}

#bupos input[type="number"],
#bupos input[type="text"] {
	width: 6ch;
	margin: 0 0.5rem;
	text-align: center;
	font-weight: bold;
	background: whitesmoke;
}

#bupos_show:not(:checked) + * {
	display: none;
}
/*
#buwall {
	appearance: none;
    position: absolute;
    right: -5.5rem;
    top: 0;
    width: min-content;
    height: 100%;
    padding: 0 0.25rem;
    background: whitesmoke;
    color: black;
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
    border: 1px solid lightgrey;
    box-shadow: 0 0 4px 1px black;
}


#buwall::after {
	content: "Выбрать стену";
}

#buwall:checked {
	z-index: 11;
    height: auto;
    padding: 0 0.5rem;
    background: white;
    border-radius: 1rem;
    box-shadow: 0 2px 4px 0px black;
}
#buwall:checked::after {
	content: "закрыть";
}

#buwall:checked + * + * {
	display: none;
}
*/

body:not([bu^="*"]) #room_wall {
	display: none;
}
/*
.room_wall:hover > input[name="room_wall"] {
    filter: opacity(0.5);
}
.room_wall:hover > input[name="room_wall"]:hover {
    filter: none;
}
*/

/*input[name="room_wall"]:not(:checked) {
	filter: opacity(0.5);
}
*/

.room_wall {
	/*
	z-index: 1;
	display: flex;
	align-items: start;
	gap: 0;
	position: absolute;
	top: 0;
	height: 100%;
	width: 100%;
	border: 1px solid;
	box-shadow: 0 2px 8px 4px grey;
	*/
    z-index: 1;
    display: flex;
    align-items: start;
	position: relative;
    gap: 0;
    width: 10rem;
    height: 6rem;
    border: 1px solid lightgrey;
	perspective: 12rem;
}

.room_wall > input[type="radio"] {
    appearance: none;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	width: auto !important;
    height: auto;
    margin: 0 !important;
	background: whitesmoke;
	inset: 0;
	box-shadow: 0 0 4px 1px grey;
}

.room_wall > *[value="4"] {
	transform: rotatey(180deg) translatez(6rem) ;
	background: 0 0 / 100% 100% url(media/floor.jpg) !important;
}

.room_wall > *[value="3"] {
	transform: rotatey(-90deg) translatez(5rem) translatex(-5rem);
}
.room_wall > *[value="1"] {
	transform: rotatey(90deg) translatez(5rem) translatex(5rem);
}
.room_wall > *[value="2"] {
	transform: rotatex(-90deg) translatez(3rem) translateY(3rem);
}
.room_wall > *[value="0"] {
	transform: rotatex(90deg) translatez(3rem) translateY(-3rem);
}

.room_wall > input[type="radio"]:hover {
	background: lightgrey;
}

.room_wall > p {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	width: min-content;
	height: min-content;
	padding: 0;
	line-height: 1rem;
	text-align: center;
	font-weight: bold;
	background: none;
}

*[wall_vis="0"] {
	filter: sepia(1);
	pointer-events: none;
}

/*
#buwall:not(:checked) + * {
	display: none;
}
*/

/*
[name="edit_item"] + * + * > input[type="radio"] {
	appearance: none;
	width: 0;
    margin: 0;
    padding: 0;
}

[name="edit_item"] + * + * > input[type="radio"] + * {
	margin: 0.25rem;
    padding: 0.25rem 0;
    color: darkgrey;
    font-size: 1rem;
    font-weight: normal;
    border: 1px solid lightgrey;
    justify-content: center;
    background: white;
}

input[name="edit_item"] + * + * > input[type="radio"] + * {
    z-index: 1;
	margin: 0;
    padding: 0 1rem;
    color: darkgreen;
	background: white;
	border: none;
	cursor: pointer;
}


[name="edit_item"] + * + * > input[type="radio"]:checked + * {
	color: black;
	font-weight: bold;
	transform: scale(1.15);
}

[name="edit_item"] + * + * > input[type="radio"] + * + * {
	position: absolute;
    top: 2.75rem;
    width: inherit;
	padding: 0 0 0 1rem;
	width: 100%;
    display: flex;
    justify-content: center;	
	align-items: center;
}

[name="edit_item"] + * + * > input[type="radio"] + * + * {
	top: 4.5rem;
    border: 2px solid darkgreen;
    box-shadow: 0 -8px 8px grey;
    width: max-content;
    padding: 0.5rem 1rem;
}

[name="edit_item"] + * + * > input[type="radio"]:not(:checked) + * + * {
	opacity: 0;
	pointer-events: none;
}
*/

#bunames {
	display: flex;
    position: relative;
	min-width: 42rem;
    flex-wrap: wrap;
    align-items: start;
    justify-content: center;
    overflow-y: overlay;
    gap: 1rem;
    margin: 0;
    padding: 0;
	background: rgba(255,255,255,0.075);
}

#showbus:not(:checked) ~ #bunames {
	display: none;
}

#bunames > img {
	width: 7rem;
    height: auto;
    object-fit: contain;
	aspect-ratio: 1 / 1;
	box-shadow: 0 2px 4px 1px grey;
}

#texs {
    position: relative;
    right: 0;
    top: 2.25rem;
    width: 32ch;
    height: calc(100vh - 6rem);
    padding: 0;
}

/*
label[for="showtexs"] {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    height: auto;
    font-size: 1rem;
    font-weight: bold;
    color: white;
    text-shadow: 0 0 4px black;
    background: linear-gradient(in hsl longer hue 90deg, red 0 0);
    border-radius: 0.25rem;
}
*/
#showtexs {
	display: none;
	/*
	appearance: none;
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
	width: 5rem;
    height: auto;
	margin: 0;
    padding: 0;
	*/
}
/*
#showtexs:after {
	content: "Цвета";
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 1rem;
    font-weight: bold;
    color: white;
    text-shadow: 0 0 4px black;
    background: linear-gradient(in hsl longer hue 90deg, red 0 0);
    border-radius: 0.25rem;
}
*/
#showtexs:not(:checked) ~ #texs {
	height: 0;
	display: none;
}

#showtexs:not(:checked) ~ * {
	display: none;
}

#showtexs_bu:not([value="0"]):not([value="1"]):not([value="2"]) + * {
	display: none;
}


#showtexs_facads,
#showtexs_box {
	appearance: none;
	width: calc(50% - 0.5rem);
	height: 1.5rem;
	margin: 0;
	padding: 0;
	border-radius: 1rem;
}

#showtexs_facads:checked,
#showtexs_box:checked {
	background: greenyellow;
	box-shadow: 0 2px 4px 0 black;
}


#showtexs_facads:after,
#showtexs_box:after {
	content: "Фасады";
    display: block;
    position: relative;
    width: 100%;
    text-align: center;
}

#showtexs_box:after {
	content: "Корпус";
}

#undo,
#redo {
	margin: 0;
	padding: 0; 
	font-size: 2rem; 
	color: mediumaquamarine;
}

#undo[greyed="1"],
#redo[greyed="1"] {
	color: lightgray;
	pointer-events: none;
	
}


#help::after {
	content: "?";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    line-height: 1.5rem;
    font-weight: bold;
    background: greenyellow;
    color: black;
    text-align: center;
    font-size: 1.75rem;
    border-radius: 50%;
    box-shadow: 0 4px 4px 0 black;
}

#help + * {
	position: absolute;
	display: flex;
	flex-direction: column;
	top: 1.5rem;
        width: min-content;
        min-width: 50ch;
	height: auto;
	padding: 0;
	font-weight: normal;
	background: white;
	box-shadow: 0 4px 8px 1px black;
	/*
	z-index: -1;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    top: 1.5rem;
    width: 100vw;
    height: auto;
    padding: 0;
    font-weight: normal;
    background: white;
    box-shadow: 0 4px 8px 1px black;
	*/
}

#help:not(:checked) + * {
	display: none;
}

#help + * > *:nth-child(odd) > b {
	background: green;
    color: yellow;
}

#help + * > *:nth-child(odd) {
	padding: 0 0.25rem;
	font-weight: bold;
    background: green;
    color: white;
}

#help + * > *:nth-child(even) {
	display: block;
    height: auto;
    padding: 0 0.25rem 1rem 0.25rem;
    font-size: 0.9rem;
}


/********************    @MEDIA    *************************/
/*
@media (max-width: 1024px) {
	#switch_menu {
		top: -2.25rem;
	}

	input[name="edit_item"] + * + * > input[type="radio"] + * {
		padding: 0 0.65rem;
	}

	input[name="_Antresol"] {
		width: 9rem;
	}

	label[for="bunits_menu"] + * {
		transform: translate(0, -4rem);
	}

	#styles {
		flex-basis: auto;
	}

	#style_menu + * + * {
		margin-top: 0.75rem;
	}
}
*/
.lil-gui.root>.title {
	position: absolute;
	max-width: 1.5rem;
	opacity: 0.1;
}

.lil-gui .controller.color .display {
	border: 1px solid lightgrey;
}


@media (max-aspect-ratio: 1/1) {
	imglist {
		left: 0;
        top: auto;
        bottom: 0;
        width: 100%;
        height: 30%;	
        margin: 0;
        padding: 0;
    }
    

	imglist img {
		width: 22%;
	}

	imglist figcaption {
		width: 22%;
		margin: 0 0 0 -22%;
	}

	#bunit {
		left: 0;
		right: auto;
		top: auto;
		bottom: 0;
		width: 50%;
		height: 30%;
		overflow-y: auto;
	}
	
	#bunames {
		position: fixed;
        left: auto;
        right: 0;
        top: auto;
        bottom: 0;
        width: 50%;
        height: 30%;
	}
	
	#bunames img {
		width: 30%;
	}
	
	[name="edit_item"] + * + * > input[type="radio"] + * {
		font-size: 1.25rem;
	}
	[name="edit_item"] + * + * > input[type="radio"] + * + * {
		top: 5.5rem;
	}

}

body[print] > *:not([id="glcanvas"], [id="canvas2d"], [id="userid"]) {
	display: none;
}


body:not([axx]) #spinner {
    display: none;
}

#spinner {
    z-index: 100;
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    backdrop-filter: brightness(0.025);
    pointer-events: auto;
}

#spinner > * {
    z-index: 111;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 6rem;
    height: 6rem;
    margin: auto;
    overflow: hidden;
}

#spinner > *::before {
    content: "";
    position: absolute;
    width: 80%;
    height: 80%;
    z-index: 1;
    background: url(favicon.png);
    background-size: 100% 100%;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    /*background: conic-gradient( rgba(255, 0, 0, 1), rgba(255, 127, 0, 1), rgba(255, 255, 0, 1), rgba(0, 255, 0, 1), rgba(0, 255, 255, 1), rgba(0, 0, 255, 1), rgba(127, 0, 255, 1), rgba(255, 0, 0, 1) );
    animation: spin 1.5s linear infinite;*/
}

#spinner > *::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50px;
    background: conic-gradient( rgba(255, 0, 0, 1), rgba(255, 127, 0, 1), rgba(255, 255, 0, 1), rgba(0, 255, 0, 1), rgba(0, 255, 255, 1), rgba(0, 0, 255, 1), rgba(127, 0, 255, 1), rgba(255, 0, 0, 1) );
    animation: spin 1.5s linear infinite;*/
}



@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}