body
{
   background-color: #000000;
   color: #000000;
   font-family: Arial;
   font-weight: normal;
   font-size: 16px;
   line-height: 1.1875;
   margin: 0;
   padding: 0;
}
#wb_Image1
{
   vertical-align: top;
}
#Image1
{
   border: 0px solid transparent;
   border-radius: 0px;
   box-sizing: border-box;
   padding: 0;
   margin: 0;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
/* ======================== canvas-wrap ============================== */
*, *:before, *:after {
	box-sizing: border-box; }

.canvas-wrap {
	display: grid;
	position: relative;
	container-type: size;
	width: 100%; 							/* Important to define canvas width */
	height: 100%; 						/* Important to define canvas height */
	grid-template: "canvas" 1fr / 1fr; 	/* best than 100% */
	background-color: transparent;
	isolation: isolate;					/* New stacking context (z-index) */
   #canvas {
		grid-area: canvas;
		z-index: 1;
		contain: strict; 
		background-color: transparent;}
#sliders {
	--width-s: 50px;
	position: absolute;
	display: grid;
	grid-area: canvas;
	grid-template-areas:
		"city		city			city"
		"value-temp  slider-temp  slider-temp"
		"value-humidity slider-humidity slider-humidity"
		"value-precip  slider-precip  slider-precip"
		"value-intens slider-intens slider-intens"
		"value-global slider-global slider-global"
		"value-radius slider-radius slider-radius";
	grid-template-columns: max-content repeat(2, minmax(var(--width-s), 1fr));
	grid-template-rows: repeat(5, auto);
	width: 45%;
	max-width: 100vw;	
	min-height: min-content;
	justify-self: start;
	background-color: #FFF0;
	border-radius: 1vw;
	backdrop-filter: blur(5px);
	padding: 10px;									/* ========= setting =============== */
	gap: 0 3%;
	z-index: 10;										/*  если все выше ? */
	font-size: clamp(1.2rem, 3vw, 3rem);							/*  clamp(14px, calc(1rem + 2vw), 24px);  */
	font-weight: inherit;
	line-height: 1.2;
		.city {
			display: grid;
			grid-area: city;
			grid-template-areas: "name icon input";
			grid-template-columns: auto auto minmax(var(--width-s), 1fr);
			cursor: pointer;
				.name {  
					grid-area: name; 
					width: auto; 
					white-space: nowrap;
					text-transform: capitalize; }
				svg {	
					grid-area: icon;
					display: block;
					margin: 0 0.5vw;			/* проверить */
					height: 6cqw;
					width:  6cqw; }
				.input {
					grid-area: input;
					width: 100%;
					background-color: transparent;
					border: 0;
					border-radius: clamp(5px, 0.5vw, 10px);
					outline: none;
					font-size: inherit;
					text-align: left;
					text-transform: capitalize;
						&:focus, &:focus-visible {
							border: 1px dashed; }
						&, &::placeholder {
							font-size: inherit;
							text-align: left;	
							color: currentColor; }
		} 		}
		span {
			min-width: 6ch;
			font-size: inherit;
			text-align: left;
			line-height: 1;
			white-space: nowrap;					/* rem */
			/*  min-width: max-content !important; 	rem , Текст не имеет права быть меньше своей длины */
    			flex-shrink: 0; 						/* Чтобы inline-flex его не сжимал */
			align-self: center; }

		input[type="range"] {
			width: 100%;
			height: 2vh;
			align-self: center;
			appearance: none;
			border-radius: 2vw;
			opacity: 0.5;
			transition: 1000ms cubic-bezier(0.3, -0.5, 0.7, 1.5);
			&:hover {
				opacity: 1;
				scale: 1.05 1; }
			&::-webkit-slider-thumb {
				appearance: none;
				cursor: pointer;
				height: 2.5vh;
				width:  1vw;
				background: #ff0000;
				border: 2px solid #FF0000;
				border-radius: 20%; }
		}
	&.justify-end {								/* #sliders to Right */
				grid-template-areas: 
					"city city city"
					"slider-temp slider-temp value-temp"
					"slider-humidity slider-humidity value-humidity"
					"slider-precip slider-precip value-precip"
					"slider-intens slider-intens value-intens"
					"slider-global slider-global value-global"
					"slider-radius slider-radius value-radius";
				grid-template-columns: repeat(2, minmax(var(--width-s), 1fr)) max-content;
					span { 
						text-align: right; }
					.city {
						grid-template-areas: "input icon name";
						grid-template-columns: minmax(var(--width-s), 1fr) auto auto;
							.input, .input::placeholder {
								grid-area: input;	
								text-align: right; }
	} 		}						/*  /#sliders.justify-end  */
} }									/*  /#sliders,  /.canvas-wrap  */
@media (orientation: portrait) or (any-pointer: coarse) {
	#sliders {
		width: 100% !important;
		justify-self: start !important;
		translate: 0% var(--y) !important;			/* !important for inline-styles for AlpineJS */
		font-size: clamp(2rem, 7vw, 3rem) !important; }
}
[x-cloak], #Image1, #wb_Image1 { 
	display: none !important; }

.popover-left, .popover-right {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    height: fit-content;
    background-color: #0006;
    color: var(--c);
    padding: 0.3em;
    border-radius: 0.5em;
    font-size: calc(1vh + 1vw);
	font-weight: inherit;
    text-wrap-mode: nowrap; }
.popover-left {
    left: 100%;
	margin-left: 1em; }
.popover-right {
    right: 100%;
	margin-right: 1em; }

html, body {
    height: 100%; 
    min-height: 100%; 
    margin: 0;
    padding: 0; }

#ContentPlaceHolder {
	background-color: transparent; /* remove  sett */
    height: 100%; 			/* Минимальная высота на весь экран (если требуется) */
    width: 100%;				/* Занимаем всю ширину, выделенную областью GRID */
    display: grid;			/* Делаем его GRID-контейнером, чтобы управлять дочерними элементами */
    grid-template-rows: 1fr;	/* дочерний элемент может растянуться */
    grid-template-columns: 1fr;/* родительский FLEX-контейнер его растягивает */
    align-self: stretch;		/* Если .main - Flex-контейнер, это гарантирует растяжение по вертикали */
    justify-self: stretch;		/* Если .main - Grid-контейнер, это гарантирует растяжение по горизонтали */
}
/* ================================ /canvas-wrap ============================== */
#FlexGrid
{
   background-color: transparent;
   background-image: none;
   border: 0px solid transparent;
   border-radius: 0px;
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}
#FlexGrid-grid
{
   display: grid;
   height: 100vh;
   margin-right: auto;
   margin-left: auto;
   max-width: 1000px;
   width: 100%;
   font-size: 0;
   grid-template-columns: 1fr;
   grid-template-rows: 1fr;
   grid-template-areas:
      "main";
}
#FlexGrid .main
{
   display: flex;
   grid-area: main;
   background-color: transparent;
   background-image: none;
   border: 0px solid transparent;
   border-radius: 0px;
   padding: 0;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
   align-content: center;
}
html, body {
   height: 100vh;
   width: 100vw;
   scrollbar-width: none;
   scrollbar-color: transparent;
   scroll-behavior: smooth;  
   overflow: auto; }