:root {
	--site-primary-color: #489C7B;
	--site-primary-alpha-color: #489C7B66;
	--site-secondary-color: #f9b402;
	--site-secondary-alpha-color: #f9b40266;
}

header { 
	width: 100%; max-width: 1532px; min-width: 1000px; margin: 50px auto 0; border-radius: 50px; display: grid; grid-template-columns: auto auto auto; align-items: center; justify-content: center;
	grid-template: 
		"blank logo logo logo faq";
}
header .logo { grid-area: "logo"; }
header .faq { grid-area: "faq"; }

.logo-title { font-size: 2.1rem; font-weight: 800; font-family: "Inter"; margin: 0 auto; text-align: center; }
.logo-description { font-size: 1.5rem; font-weight: 500; font-family: "Inter"; margin: 0.3em auto 1.5em; text-align: center; }

.info { width: 100%; border-radius: 15px; margin-top: 70px;}


.footer-2 { width: 100%; margin-top: 40px; display: flex; flex-direction: column; gap: 10px; font-family: "Inter"; text-align: center; color: var(--site-primary-color); align-items: center; }
.footer-2 .footer-2--title { font-size: 20px; font-weight: 800; text-align: center; width: 100%; color: #37735a; }
.footer-2 .container { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 10px; }
.footer-2 a { color: var(--site-primary-color); }
.footer-2 .container .link { display: contents; }
.footer-2 .container .link .image-container { width: 45px; height: 45px; }
.footer-2 .container .link .image-container img { width: 100%; height: auto; }
.footer-2 .button-container { width: 25%; margin-top: 1.2em; margin-bottom: 1em; }
.footer-2 .button-container .button { outline: 2px solid var(--site-primary-color); background-color: unset; border-radius: 99em; }
.footer-2 .button-container .button p { color: var(--site-primary-color); font-size: 1.1rem; font-weight: 500; }


.top-invisible-bar { position: absolute; top: 0; left: 0; width: 100%; height: 500px; overflow: hidden; z-index: -999; }
.bottom-invisible-bar { width: 100%; height: 200px; overflow: hidden; z-index: -999; }
.absolute-positioning { position: absolute; bottom: 0; left: 0; height: 500px; }
.relative-container { position: relative; width: 100%; height: 100%; }
.leaf { position: absolute; width: 25em; overflow: hidden; }
.leaf img { width: 100%; height: auto; z-index: 999; }
#leaf-top-left { left: 0; top: 0; transform: rotate(-90deg) translate(65%, -6%); filter: opacity(50%); }
#leaf-top-right { right: 0; top: 0; transform: translate(30%, -36%); width: 30em; }
#leaf-bottom-left { left: 0; bottom: 0; transform: rotate(-90deg) translate(-74%, -29%); width: 30em; }
#leaf-bottom-right { right: 0; bottom: 0; transform: rotate(90deg) translate(57%, -13%); filter: opacity(50%); width: 20em; }


.language { text-decoration: none; font-family: "Montserrat"; font-size: 18px; font-weight: 800; color: black; width: 140px; height: 80px; display: flex; align-items: center; justify-content: center; border-radius: 25px; margin-left: 50px; border: 3px dashed rgba(52, 107, 61, 1);}
.language img { margin-left: 5px; }
.faq {  text-decoration: none; font-family: "Montserrat"; font-size: 18px; font-weight: 800; color: black; width: 140px; height: 80px; display: flex; align-items: center; justify-content: center; border-radius: 25px; margin-right: 50px; border: 3px dashed rgba(52, 107, 61, 1);}

.title-bigger-number-span { font-size: 2.5rem; margin: 0 0.05em; }
.swiper-button-prev, .swiper-button-next { color: #37735A !important; }

.marked-span { color: white; stroke: black; background: #489C7B; outline: 2px solid #489C7B; border-radius: 5px; font-size: 1em; line-height: 2.2rem; }

.loading{
	margin-top: -100px;
	margin-left: -100px;
	position: fixed;
	top: 50%;
	left: 50%; 
	z-index: 777;
	display: flex;
	flex-direction: column;
	align-items: center;
  }
.loading-pdf{
	display: inline-block;
	width: 24px;
	position: relative;
	margin-top: -10px;
	top: 5px;
	margin-left: 10px;
}
.mask{
	position: fixed;
	background: #000000;
	opacity: 0.7;
	width: 100%;
	height: 300%;
	margin-top: -50%;
	z-index: 10;  
}
.loading img {
  max-width: 100%;
}
.loading p {
  /* outline: 1px solid black; */
  text-align: center;
  font-size: 24px;
  color: var(--site-secondary-color);
  font-weight: 800;
  font-family: "Montserrat";
  position: absolute;
  bottom: -90px;
  height: 100px;
}

article { max-width: 1532px; min-width: 1000px; margin: 0 auto; }

.main { 
	width: 85%;
	margin: 0 auto;
}

.foto_wrapper { 
	width: 100%;
	display: grid;
	grid-template-columns: 1fr repeat(3, auto) 1fr;
	grid-template-rows: auto auto;
	align-items: center;
	justify-content: center;
	justify-items: center;
	margin-top: 50px;
	column-gap: 40px;
}

.foto_1 { grid-row: 1; grid-column: 2; max-width: 328px; min-width: 180px; height: auto; position: relative; border-radius: 30px;}
.foto_1 .main_bg { position: absolute; left: -160px; top: -100px; width: auto; z-index: -1;}
.foto_1 img {width: 100%; height: auto;}

.foto_2 { grid-row: 1; grid-column: 3; z-index: 10; max-width: 399px; min-width: 250px; height: auto; overflow: hidden;  border-radius: 30px;}
.foto_2 img {width: 100%; height: auto;}

.foto_3 { grid-row: 1; grid-column: 4; max-width: 328px; min-width: 180px; height: auto; position: relative;  border-radius: 30px;}
.foto_3 .main_bg { position: absolute; right: -150px; top: -185px; width: auto; z-index: -1;}
.foto_3 img {width: 100%; height: auto;}

.foto_4 .main_bg { position: absolute; right: -150px; top: -185px; width: auto; z-index: -1;}

.article_bg_1 { position: absolute; left: -164px; top: -180px;}
.article_bg_1_2 { position: absolute; left: -70px; top: -77px;}
.article_bg_2 { position: absolute; right: -3px; bottom: -5px;}

.none{
  display: none !important;
}
.hidden{
  visibility: hidden !important;
  position: absolute; 
  top: -9999px; 
  left: -9999px;
}

.left_button { grid-row: 1; grid-column: 1; width: 60px; height: 60px; background-color: #97C9B6; border-radius: 30px; display: flex; align-items: center; justify-content: center;}
.left_button img { height: 30px; margin-right: 4px; }
.right_button { grid-row: 1; grid-column: 5; width: 60px; height: 60px; background-color: #97C9B6; border-radius: 30px; display: flex; align-items: center; justify-content: center;}
.right_button img { height: 30px; margin-left: 4px; }

.title { font-size: 37px; font-weight: 800; font-family: "Inter"; margin: 0 auto ; text-align: center;}
.description { font-size: 24px; font-weight: 500; font-family: "Montserrat"; margin: 15px auto 0; text-align: center;}

.button_market { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-size: 22px; line-height: 29px; text-align: center; text-decoration-line: underline; color: #000000; }
.button { width: 100%; margin: 0 auto; height: 70px; background-color: #489C7B; border-radius: 15px; display: flex; align-items: center; justify-content: center; text-align: center; }
.button p { font-size: 24px; font-weight: 800; font-family: "Montserrat"; color: white; }

footer { max-width: 1532px; min-width: 1000px; height: 90px; border-radius: 10px; background-color: rgba(249, 180, 2, 1); display: grid; grid-template-columns: auto auto; align-items: center; justify-content: space-between; margin: 50px auto;}
.contact { grid-column: 1; font-size: 16px; font-weight: 700; font-family: "Inter"; margin-left: 30px; color: white;}
.year { grid-column: 2; font-size: 16px; font-weight: 700; font-family: "Inter"; margin-right: 30px; color: white;}

.notice { text-align: center; font-size: 14px; font-weight: 500; font-family: "Montserrat"; margin-top: 10px;}

.mobile_button { display: none; }

.about { display: flex; justify-content: center; flex-direction: column; border-radius: 35px; position: relative;}

.options { display: flex; justify-content: center; justify-items: center; align-items: center; margin: 0 auto 0.8em; column-gap: 10px; }
.options .option-button { margin: 5px; width: 70px; height: 70px; border: 1px dashed var(--site-secondary-color); border-radius: 35px; background-color: white; }
.options .option-button img { width: 35px; height: 35px; margin: 18px auto 0; display: block; }
.options .option-button #turn_left { transform: scale(-1, 1); }
.options .button p { font-size: 1.1rem; margin: 1.1em; user-select: none; }
.options .option-button-filled { background-color: unset; outline: 0.15em solid var(--site-secondary-color); }
.options .option-button-filled p { color: var(--site-secondary-color); }
.options .option-button-filled-selected { background-color: var(--site-secondary-color); }
.options .option-button-filled-selected p { color: black; }


/*Страница индекс*/

.mobile_title { display: none; padding-top: 20px; }
.index { display: flex; flex-direction: column; align-items: center; }
.index .title { width: 494px; }
.index .markup { display: flex; width: 50%; }
.index .info { display: flex; flex-direction: column; align-items: center; padding: 20px 0; margin-top: 0; gap: 20px; }
.index .info .title { font-size: 1.1rem; width: 80%; text-align: center; margin: 0; color: white; }
.index .info .pictogram { width: 100%; }
.index .info .pictogram .pictogram--image { width: 100%; height: auto; }
.index .info p { display: none; font-size: 14px; font-weight: 500; font-family: "Montserrat"; width: 90%; margin: 20px auto; line-height: 18px;}
.index .button { margin-top: 30px; }



/*Главная*/

.main_page .markup-container { width: 100%; display: flex; justify-content: center; }
.main_page .markup { width: 60%; display: flex; gap: 1em; }
.main_page .markup .info { display: flex; flex-direction: column; text-align: center; margin-top: 0; }
.main_page .markup .info .image { margin-top: 20px; }
.main_page .markup .info .title { font-size: 18px; text-align: center; margin-bottom: 30px; color: #000; }
.main_page .markup .info p { display: none; font-size: 14px; font-weight: 500; font-family: "Montserrat"; line-height: 18px; text-align: left; width: 75%; margin: 0px auto 20px auto; text-align: center; }
.main_page .button { margin-top: 30px; }
.main_page .menu .section p { width: auto; margin: 10px 10px 0;}
.main_page .button p { font-size: 18px; text-align: center; }



/*Страницы загрузки картинки*/

.upload_page .upload { width: 100%; margin: 5em auto 0; position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column;}
.upload_page .notice { margin: 40px 0; }
.upload_page .upload-dropping { border: 3px solid #97C9B6; }
.upload_page .upload .notice { display: block; margin: 9px auto;}
.upload_page .upload_inner_border { width: 95%; height: 192px;  border-radius: 15px; border: 1px dashed black; display: flex; align-items: center; justify-content: center;}
.upload_page .upload_inner_border #mobile_icon { display: none; }
.upload_page .upload_inner_border .block_title { font-size: 20px; font-weight: 800; font-family: "Montserrat"; color: black;}
.upload_page .button { width: 450px; }
.upload-border { background-color: #97c9b6; border: 4px dashed var(--site-primary-color); width: 60%; margin: 3em auto; border-radius: 0.9em; }



.framing_select_size .title { margin-top: 1.3em; }
.framing_select_size .buttons { display: flex; flex-direction: column; width: 100%; gap: 0.7em; margin-top: 3em; }
.framing_select_size .buttons .button { width: 30%; }
.framing_select_size .buttons .button-back { background-color: #37735A; }


/*Страницы демо*/

.demo_page .result-container { margin-top: 2em; }
.demo_page .result-container .buttons { display: grid; width: 40%; margin-top: 3em; flex-direction: row; grid-row-gap: 0.7em; grid-column-gap: 0.7em; grid-template-areas: "classic classic retro    retro     neon      neon  " "empty1  rose rose  ice ice empty2"; grid-template-columns: unset; }
.demo_page .result-container .buttons #button-classic { grid-area: classic; }
.demo_page .result-container .buttons #button-retro { grid-area: retro; }
.demo_page .result-container .buttons #button-neon { grid-area: neon; }
.demo_page .result-container .buttons #button-rose { grid-area: rose; }
.demo_page .result-container .buttons #button-ice { grid-area: ice; }

.demo_page .result-container .buttons .button { margin: 0; }
.demo_page .result-container .buttons .button-not-selected { background-color: unset; outline: 0.15em solid #37735A; }
.demo_page .result-container .buttons .button-not-selected p { color: #37735A; }
.demo_page .result-container .carousel-container-container { display: flex; width: 100%; max-width: 674px; margin: 0 auto; gap: 1em; position: relative; }
/* DO NOT EVER MAKE THIS SWIPER DIV display flex/grid! */
.demo_page .result-container .carousel-container { width: 474px; margin: 0 auto; gap: 1em; }

.demo_page .main .image { display:none; }

.demo_page .buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 70%; margin: 20px auto 0; column-gap: 30px; }
.demo_page > .buttons .button:first-child { background-color: #37735A; }
.demo_page .buttons .button p { text-align: center; margin-bottom: 0;}

.demo_page .foto_wrapper {grid-template-rows: auto auto auto; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 85%; margin: 50px auto; column-gap: 10px;}

.demo_page img { border-radius: 25px; }
.demo_page .foto_1 { max-width: 400px; width: 100%; height: auto; grid-column: 1; }
.demo_page .foto_2 { max-width: 400px; width: 100%; height: auto; grid-column: 2; min-width: 0;}
.demo_page .foto_3 { max-width: 400px; width: 100%; height: auto; grid-column: 3;}

.demo_page .span { font-size: 32px; font-weight: 700; font-family: "Montserrat"; align-self: start; margin-top: 10px;}
.demo_page #neon { grid-row: 3; grid-column: 1; }
.demo_page #retro { grid-row: 3; grid-column: 2; }
.demo_page #classic { grid-row: 3; grid-column: 3; }

.demo_page #hidden { background-color: #37735A; }

.demo_page #visible { display: none; }

.demo_page .about { display: flex; justify-content: center; flex-direction: column; margin-top: 50px;}
.demo_page .about .title { margin-bottom: 30px; }




/*Страница ошибки 404*/

.error_page .about { height: 782px; margin-top: 50px; background-image: url("../images/404_bg.eadeab8392d1.png"); background-repeat:no-repeat; background-position: center center; background-size: cover; }
.error_page .about .error { font-size: 200px; text-align:center; font-family: "Inter"; font-weight: 800; }
.error_page .about .title { font-size: 32px; }
.error_page .about .description { width: 50%; }
.error_page .button { width: 403px; margin-top: 40px;}



/*Страницы итога*/

.itog_page .about { height: unset; margin: 2em auto; }
.itog_page .about .title { text-align: left; width: 60%; }
.itog_page .about .description { width: 60%; display: flex; flex-direction: column; text-align: left; gap: 0.3em; }
.itog_page .buttons { display: grid; grid-template-columns: auto auto auto; width: 60%; margin: 0 auto 70px; column-gap: 1em; }
.itog_page .buttons .button { margin: 0 auto ; }
.itog_page .notice { font-size: 20px;margin-top: -30px;}
.itog_page #on_main_button_mobile { display: none;}
.itog_page #pdf { animation: flipColors 1s ease-in infinite; animation-direction: alternate; }
.itog_page #pdf p { animation: flipColors 1s ease-in infinite; animation-direction: alternate; }
@keyframes flipColors {
	0% { background-color: var(--site-primary-color); }
	100% { background-color: black; }
}





/*Страница с кодом*/

.code_page .about { margin-top: 50px; }
.code_page .about .form { display: flex; width: 100%; margin: 30px auto; justify-content: center;}

.code_page .about .marketplaces { display: flex; flex-direction: column; gap: 3; width: 100%; margin: 30px auto; justify-content: center; align-items: center; }

.code_page .about .form input { width: 40%; height: 70px; border-radius: 15px; border: 1px solid #616161; font-size:24px; font-weight: 500; font-family: "Fira Code", serif; font-optical-sizing: auto; text-align: center; color: #616161; }
.code_page .about .form form { width: 100%; display: flex; justify-content: center; flex-direction: column; align-items: center; }
.code_page .about .form form { width: 100%; display: flex; justify-content: center; flex-direction: column; align-items: center; }
.code_page .about .form form input { border: 1px solid #616161; padding: 3px; }
.code_page .about .form form input:focus { font-weight: 700; border: 4px solid var(--site-primary-color); color: var(--site-primary-color); outline: 0; padding: 0; }

.code_page .about .form input::placeholder { font-size:26px; font-weight: 500; font-family: "Montserrat"; text-align: center; color: #616161; margin-top: 5px;}

.code_page .notice { margin-bottom:10px; font-size: 18px; color: #b20000; font-weight: 700; }
.code_page .title { font-size: 30px; }

.code_page .buttons { display: grid; grid-template-columns: auto auto; margin: 40px auto; width: 903px; justify-content: space-between;}
.code_page .buttons .button { width: 440px; margin: 0; }
.code_page .description { width: 40%; text-transform: lowercase; }



.failed_page .about { margin-top: 50px; }
.failed_page .about .form { display: flex; width: 100%; margin: 30px auto; justify-content: center;}
.failed_page .about .marketplaces { display: flex; flex-direction: column; gap: 3; width: 100%; margin: 30px auto; justify-content: center; align-items: center; }
.failed_page .about .form input { width: 40%; height: 70px; border-radius: 15px; border: 1px solid #616161; font-size:24px; font-weight: 500; font-family: "Fira Code", serif; font-optical-sizing: auto; text-align: center; color: #616161; }
.failed_page .about .form form { width: 100%; display: flex; justify-content: center; }
.failed_page .about .form input::placeholder { font-size:26px; font-weight: 500; font-family: "Montserrat"; text-align: center; color: #616161; margin-top: 5px;}
.failed_page .notice { margin-bottom:10px; font-size: 18px;}
.failed_page .title { font-size: 30px; }
.failed_page .buttons { display: grid; grid-template-columns: auto auto; margin: 40px auto; width: 903px; justify-content: center; }
.failed_page .buttons .button { width: 440px; margin: 0; }
.failed_page .description { width: 100%; }


.shop_page .about { height: 600px; margin-top: 50px; background-image: url("../images/about_bg.b22e580fae77.png"); background-repeat:no-repeat; background-position: center center;  }
.shop_page .about .title { margin-bottom: 30px; }
.shop_page .about .description { display: flex; flex-direction: column; gap: 10px; width: 70%; margin: 30px auto; justify-content: center;}
.shop_page .about .marketplaces { display: flex; flex-direction: column; gap: 3; width: 100%; margin: 0px auto; justify-content: center; align-items: center; }
.shop_page .title { font-size: 30px; }
.shop_page .buttons { display: grid; grid-template-columns: auto auto; margin: 40px auto; width: 903px; justify-content: space-between;}
.shop_page .buttons .button { width: 440px; margin: 0; }


.try_again_page .main { width: 70%; }

.try_again_page .main .image { display:none;}

.try_again_page .foto_wrapper { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 5px;}

.try_again_page .foto_1 { grid-column: 1; min-width: 0;}
.try_again_page .foto_2 { grid-column: 2; min-width: 0;}
.try_again_page .foto_3 { grid-column: 3; min-width: 0;}
.try_again_page .foto_4 { grid-column: 4; border-radius: 30px; min-width: 0; position: relative;}
.try_again_page .foto_4 img {width: 100%; height: auto;}

.try_again_page .about { margin-top: 90px; }
.try_again_page .about .description { margin-top: 40px; }

.try_again_page .button { margin-top: 50px; width: 450px;}



.framing_instruction_page .main { width: 100%; }
.framing_instruction_page .fotos { max-width: 450px; align-items: center; justify-items: center; margin: 50px auto; display: flex; }
.framing_instruction_page .fotos .foto { width: 100%; height: auto; }

.framing_instruction_page .mobile_fotos { display: none; }

.framing_instruction_page .about { margin: 5em 0; width: 100%; height: unset; }
.framing_instruction_page .about .description { width: 50%; }
.framing_instruction_page .button { margin-top: 50px; width: 450px;}



.framing_page .main { border-radius: 35px; width: 99%; height: 780px; margin-top: 50px;}
.framing_page .main .columns { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 100%; justify-items: center; align-items: center; height: 90%; }
.framing_page .main .columns .info { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; width: 100%; justify-content: center; }
.framing_page .buttons {display: none;}
.framing_page .main .columns .buttons { grid-column: 1; grid-row: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 90%; justify-content: space-between; column-gap: 30px; margin: 0 auto; }
.framing_page .main .columns .buttons .button { width: 100%; margin: 0; }
.framing_page .main .columns .main_image { position: relative; margin-right: 50px;}
.framing_page .main .columns .main_image img { width: 100%; width: 600px; height: 600px; object-fit: cover; }
.framing_page .main .columns .main_image .article_bg_1 { left: 295px; top: -110px; z-index: -1;}
.framing_page .main .columns .main_image .article_bg_2 { right: -55px; bottom: -10px; z-index: -1;}
.framing_page .about { display: none; }
.framing_page .description { margin-bottom: 2em; }




.choose_page .main { width: 99%; margin-top: 50px;}
.choose_page .main .columns { display: grid; grid-template-columns: 1fr 1fr; justify-items: center; align-items: center; height: 90%; }
.choose_page .main .columns .info { grid-column: 1; grid-row-start: 1; grid-row-end: 2; display: flex; flex-direction: column; width: 100%; justify-content: center; background-position: center; background-repeat: no-repeat; align-self: end;}
.choose_page .buttons {display: none;}
.choose_page .main .columns .wrapper { position: relative; user-select: none; margin-bottom: 2em; }
.choose_page .main .columns .my-swiper { grid-column: 1; grid-row-start: 2; grid-row-end: 3; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 70%; justify-content: space-between; column-gap: 30px;}
.swiper-slide img { width: 100%; height: auto; }
.result-img-active {
	outline: 8px solid #fd4d9d;
	outline-offset: -7px;
}
.wrapper .swiper-button-next { right: 50px; }
.wrapper .swiper-button-prev { left: 50px; }
.choose_page .main .columns .buttons { grid-column: 1; grid-row-start: 3; grid-row-end: 4; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 90%; justify-content: space-between; column-gap: 30px; display: flex; flex-direction: column; gap: 0.4em; width: 70%; margin-bottom: 2.7em; }
.choose_page .main .columns .buttons .button { width: 100%; margin: 0; }
.choose_page .main .columns .main_image_mobile { display: none; }
.choose_page .main .columns .main_image { position: relative; margin-right: 50px; grid-row-start: 1; grid-row-end: 4;}
.choose_page .main .columns .main_image .article_bg_1 { left: 295px; top: -110px; z-index: -1;}
.choose_page .main .columns .main_image .article_bg_1_2 { left: 321px; top: -76px;}
.choose_page .main .columns .main_image .article_bg_2 { right: -55px; bottom: -10px; z-index: -1;}
.tmp-show-img { width: 500px; height: 666px; object-fit: scale-down; }




.assembly_page .main { display: grid; grid-template-columns: 1fr 570px 1fr; width: 100%; justify-items: center; margin-top: 0; }
.assembly_page .main .options { width: 0; margin: 0; }

.assembly_page .main .answer { grid-column: 3; grid-row: 2; margin-top: -40px; background-color: white; width: 72px; height: 72px; border-radius: 35px;}
.answer{cursor: pointer;}

.assembly_page .colors { grid-column: 2; width: 370px; display: flex; justify-content: center; justify-items: center; align-items: center;}
.assembly_page .color { width: 40px; height: 40px; border-radius: 3px; margin: 0 3px;}
.assembly_page .colors a #color1 { background-color: rgba(255, 255, 255, 1); border: 1px solid rgba(175, 175, 175, 1);}
.assembly_page .colors a #color2 { background-color: rgba(231, 231, 231, 1); border: 1px solid rgba(175, 175, 175, 0);}
.assembly_page .colors a #color3 { background-color: rgba(203, 203, 203, 1); border: 1px solid rgba(175, 175, 175, 0);}
.assembly_page .colors a #color4 { background-color: rgba(140, 140, 140, 1); border: 1px solid rgba(175, 175, 175, 0);}
.assembly_page .colors a #color5 { background-color: rgba(88, 88, 88, 1); border: 1px solid rgba(175, 175, 175, 0);}
.assembly_page .colors a #color6 { background-color: rgba(18, 18, 18, 1); border: 1px solid rgba(175, 175, 175, 0);}
.assembly_page .colors a .color p{ font-family: "Arial Black"; font-weight: 900; font-size: 24px; margin: 14px 0 0 4px; color: black;}

.assembly_page .colors a #reload #desktop_reload { display: block; }
.assembly_page .colors a #reload { background-color: #37735A; border: 1px solid #37735A; margin-left: 30px;}

.assembly_page a #mobile_reload { display: none; background-color: #37735A; border: 1px solid #37735A;}
.assembly_page a #mobile_answer { display: none; background-color: #97C9B6; border: 1px solid #97C9B6;}

.assembly_page .bricks { grid-column: 2; border-collapse: separate; border-spacing: 5px; width: 535px; margin: 15px auto 0px;}
.assembly_page .bricks td { width: 38px; height: 38px; }
.assembly_page .bricks .lable p{ text-align: center; font-family: "Inter"; font-weight: 400; font-size: 12px; margin-top: 13px; color: rgba(108, 108, 108, 1);}
.assembly_page .bricks .lable_interactive p{ text-align: center; font-family: "Inter"; font-weight: 400; font-size: 12px; margin-top: 15px; color: rgba(108, 108, 108, 1);}
.assembly_page .bricks .brick { background-color: black; border-radius: 5px; width: 40px; height: 40px; user-select: none; cursor: pointer; }
.assembly_page .bricks .brick .brick_word { width: 20px; font-family: "Inter"; color: white; font-size: 24px; margin: 15px 0 0 19px; position: absolute;}
.assembly_page .bricks .brick .brick_num { width: 10px; font-family: "Inter"; color: white; font-size: 12px;  margin: 3px 0 0 2px; position: absolute; text-align: right;}

.assembly_page .button { width: 450px; margin: 40px auto 0; }

.assembly_page .pages .page { width: 60px; height: 60px; border-radius: 4px; display: flex; justify-content: center; align-items: center;}

.assembly_page .pages .page p{ font-family: "Arial Black"; font-weight: 900; font-size: 32px; color: #585858;}

.assembly_page .orange_back { max-width: 1256px; height: auto; margin: 0 auto; display: flex; flex-direction: column; }

.assembly_page .pages { margin: 0 auto; width: 471px; height: 100px; display: grid; grid-template-columns: repeat(auto-fit, minmax(30px, 105px)); justify-content: center; justify-items: center; align-items: center; display: flex; gap: 35px; outline: #CD2222; }
.assembly_page .pages .swiper { width: 350px; height: 64px; }
.assembly_page .pages .swiper .swiper-wrapper .current-page { background-color: white; border: 3px solid #97c9b6; box-sizing: border-box; }
.assembly_page .pages .swiper .swiper-wrapper .current-page p { color: #97c9b6; }
.assembly_page .pages .swiper-button-prev,
.assembly_page .pages .swiper-button-next { 
  position: relative; top: auto; margin-top: 0; color: #97c9b6;
}
.assembly_page .pages .page { width: auto; height: 60px; border-radius: 4px; background-color: #97c9b6; display: flex; justify-content: center; }

.assembly_page .pages .page p{ font-family: "Arial Black"; font-weight: 900; font-size: 26px; color: white;}

.assembly_page #pages_button { display: none; }

.assembly_page .buttons-page-20 { display: flex; border-radius: 5px; justify-content: center;  gap: 10px; margin-bottom: 25px; }
.assembly_page .buttons-page-20 .page { width: 60px; height: 60px; border-radius: 5px; display: flex; align-items: center; justify-content: center; padding: 5px; background-color: #97c9b6; user-select: none; cursor: pointer; }
.assembly_page .buttons-page-20 .page p { font-family: "Arial Black"; font-weight: 900; font-size: 29px; color: white;}
.assembly_page .generated-image-container { width: 400px; height: auto; margin: 2em auto; }
.assembly_page .generated-image-container.rotate90deg { width: 100%; max-width: 350px; transform: rotate(90deg); margin: 0 auto; }
.assembly_page .generated-image-container .generated-image { width: 100%; height: auto; }


/*Страница email*/
.email_page .orange_back { background-color: white; }
.email_page .orange_back_form { display: flex; flex-direction: column; width: 903px; height: 210px; margin: 50px auto 0; background-color: rgba(241, 206, 152, 1); border-radius: 15px;}
.email_page .orange_back_form .block_title { text-align: center; font-size: 24px; font-weight: 600; font-family: "Montserrat"; margin: 25px auto 0; width: 50%; display: block;}

.email_page .orange_back_form .form { display: flex; flex-direction: column; width: 100%; margin: 30px auto; justify-content: center; align-items: center;}
.email_page .orange_back_form .form input { width: 403px; height: 60px; background-color: rgba(241, 206, 152, 1); border-radius: 15px; border: 3px solid #616161; font-size:24px; font-weight: 500; font-family: "Montserrat"; text-align: center; color: #616161;}
.email_page .orange_back_form .form input::placeholder { font-size:26px; font-weight: 500; font-family: "Montserrat"; text-align: center; color: #616161; margin-top: 5px;}

.email_page .title { font-size: 30px;  }

.email_page .buttons { display: grid; grid-template-columns: auto auto; margin: 40px auto; width: 903px; justify-content: space-between;}
.email_page .buttons .button { width: 440px; margin: 0; }


/*Страница версий*/
.versions_page .orange_back { display: none; }

.versions_page .foto_wrapper { display: flex; background-image: none; }
.versions_page .foto_wrapper .version img { width: 300px; height: auto; }
.versions_page .foto_wrapper .version .span { font-size: 37px; font-weight: 800; font-family: "Inter"; text-align: center; margin: 20px auto;}
.versions_page .foto_wrapper .version .button { margin: 20px auto; }

.versions_page .description { margin-top: 20px; }

.versions_page .buttons { display: grid; grid-template-columns: auto auto; width: 903px; margin: 20px auto;}
.versions_page .buttons .button { width: 440px; }
.versions_page .code-page-bottom-buttons-container { margin-bottom: 5em; }


.popup_page .background { max-width: 1256px; margin-top: 60px; margin-bottom: 100px;}
.popup_page .background .orange_back { width: 70%; height: 556px; margin: 30px auto 0; display: flex; align-items: center; justify-content: center; flex-direction: column;}
.popup_page .background .orange_back .description { font-size:40px; width: 80%; font-weight: 800; }
.popup_page .button { margin-bottom: 0; }


.custom_style {
	display: flex; 
	flex-direction: column;
	height: 100%;
	background-image: url("../images/assembly_bg.ed5ccf55cf10.png");
	background-position: center; 
	background-repeat: no-repeat;
}

.popup-overlay {
	position: fixed; /* Stay in place */
	top: 0;
	left: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	background-color: rgba(0, 0, 0, 0.7); /* Black background with transparency */
	z-index: 1000; /* Sit on top */
	display: flex;
	justify-content: center;
	justify-items: center;
}
.popup { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; padding: 20px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); z-index: 1001; }
.popup-x-button { display: flex; justify-content: right; margin-bottom: 20px; user-select: none; cursor: pointer; }
.popup-content { display: flex; justify-content: center; align-items: center; margin: 50px 0; overflow-y: auto; }
.help { width: 90%; background-color: white; border: solid 2px rgba(0, 0, 0, 0.25); }
.help img { width: 70%; height: auto; }
.help .close { text-decoration: none; font-family: "Montserrat"; font-size: 25px; font-weight: 600; color: white; width: 100px; height: 40px; background-color: #97c9b6; display: flex; align-items: center; justify-content: center; border-radius: 25px;}
.help #desktop_image { display: block; }
.help #tablet_image { display: none; }
.help #mobile_image { display: none; }

.code-page-bottom-buttons-container { display: flex; justify-content: center; gap: 50px; margin-top: 30px; }
.code-page-bottom-buttons-container .button { margin: 0; width: 30%; }
.code-page-bottom-buttons-container .button-go-main { background-color: #7A9F91;  }
.code-page-bottom-buttons-container .button-create { background-color: #617E73; }
.button-cursor-default { cursor: default; user-select: none; }
.button-cursor-default p { cursor: default; }

.error-message { color: #ca0000; font-size: 21px; display: flex; justify-content: center; font-family: 'Montserrat'; width: 100%; font-weight: 600; margin: 20px 0; }
.error-desktop { visibility: visible; }
.error-mobile { visibility: hidden; }


.support_panel_page {
  width: 60%;
  margin: 40px auto;
}
.support_panel_page .round-counter { margin: 0.3em 1em; text-align: center; display: inline-flex; justify-content: center; align-items: center; width: 1.6em; font-weight: bold; outline: 3px solid #0009; border-radius: 99em; aspect-ratio: 1 / 1; color: #0009; }
.support_panel_page input.query-input { width: 100%; border-radius: 15px; border: 1px solid #616161; font-size:24px; font-weight: 500; font-family: "Fira Code", serif; font-optical-sizing: auto; text-align: center; color: #616161; margin-bottom: 20px; }




.horizontal-step-indicator { display: flex; align-items: center; margin: 0em auto 5em; }
.horizontal-step-indicator-desktop { display: flex; }
.horizontal-step-indicator-mobile { display: none; }

.horizontal-step-indicator  .step { display: flex; position: relative; justify-content: center; align-items: center; width: 3em; height: 3em; background-color: var(--site-primary-color); border: 3px solid var(--site-primary-color); outline-offset: -3px; border-radius: 99em; user-select: none; cursor: default; }
.horizontal-step-indicator .step p { color: #000; font-size: 1.5rem; font-weight: 500; font-family: "Montserrat"; }
.horizontal-step-indicator .step .step-p-description { position: absolute; margin-top: 6.3em; color: var(--site-primary-color); font-size: 1.0rem; text-align: center; font-weight: 500; height: 1em; }

.horizontal-step-indicator .step-active { width: 3.5em; height: 3.5em; display: flex; justify-content: center; background-color: unset; border: 5px solid var(--site-primary-color); }
.horizontal-step-indicator .step-active p { color: var(--site-primary-color); font-size: 2rem; }
.horizontal-step-indicator .step-active .step-p-description { font-weight: 600; }

.horizontal-step-indicator .step-inactive { display: flex; justify-content: center; background-color: unset; border: 3px solid var(--site-primary-alpha-color); }
.horizontal-step-indicator .step-inactive p { color: var(--site-primary-alpha-color); }
.horizontal-step-indicator .step-inactive .step-p-description { color: var(--site-primary-alpha-color); }

.horizontal-step-indicator .step-line { width: 4em; height: 0.25em; background-color: var(--site-primary-color); }
.horizontal-step-indicator .step-line-inactive { background-color: var(--site-primary-alpha-color); }

.upload_page .horizontal-step-indicator { width: fit-content; margin-top: 1em; }
.choose_page .horizontal-step-indicator { margin-top: 3em; }