/*--виджет с шестеренками--*/
.s-template-config {
	position: fixed;
	background: transparent;
	z-index: 20;
	pointer-events: none;
}
.w-template-config-frame {
	position: fixed;
	top: 50%;
	left: 0;
	width: 250px;
	transition: all ease 0.2s;
	transform: translateX(-250px) translateY(-50%);
	z-index: 9999;
}
.w-template-config-frame>.frame {
	pointer-events: all;
	background-color: #fff;
	box-shadow: 0 0 25px rgba(150,150,150,0.2);
	padding: 15px;
}
.w-template-config-frame._toggled {
	transform: translateX(0px) translateY(-50%);
}
.w-template-config-frame .btn-configuration {
  position: absolute;
  top: 0px;
  right: -60px;
  color: #606060;
  width: 60px;
  height: 60px;
  cursor: pointer;
  pointer-events: auto;
  opacity: 1;
  -webkit-transition: ALL 0.6s ease-in;
  -moz-transition: ALL 0.6s ease-in;
  -o-transition: ALL 0.6s ease-in;
  transition: ALL 0.6s ease-in;
  pointer-events: all;
}
.s-template-config._toggled .btn-configuration {
  opacity: 0;
  pointer-events: none;
}
._desktop .s-template-config .btn-configuration:hover .close:before,
._desktop .s-template-config .btn-configuration:hover .close:after {
	background-color: red;
}


.w-template-config-frame .btn-configuration .close-icon {
	background-color: rgba(0,0,0,0);
	opacity: 0;
}
.w-template-config-frame .btn-configuration .settings-icon {
	background-color: rgba(0,0,0,0);
	opacity: 0.8;
}
.w-template-config-frame._toggled .btn-configuration .close-icon {
	opacity: 0.8;
}
.w-template-config-frame._toggled .btn-configuration .settings-icon {
	opacity: 0;
}
.w-template-config-frame._toggled .btn-configuration .close-icon .close {
	top: auto;
	bottom: auto;
	left: auto;
	right: auto;
	width: 60px;
	height: 60px;
	width: 100%;
	height: 100%;
}
.w-template-config-frame._toggled .btn-configuration .close-icon .close:after,
.w-template-config-frame._toggled .btn-configuration .close-icon .close:before {
	background-color: rgba(150,150,150,1);
	right: 16px;
}
._desktop .w-template-config-frame._toggled .btn-configuration:hover .close-icon .close:after,
._desktop .w-template-config-frame._toggled .btn-configuration:hover .close-icon .close:before {
	background-color: rgba(255,0,0,1);
}
.w-template-config-frame .btn-configuration .icon {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 2px;
  left: 4px;
  animation: tpl-config-rotate 1s infinite;
}
.w-template-config-frame .btn-configuration .icon+.icon {
	width: 37px;
	height: 37px;
	top: 5px;
	left: 23px;
  animation: tpl-config-rotate 2s infinite;
}
.w-template-config-frame .btn-configuration .icon+.icon+.icon {
	width: 30px;
	height: 30px;
	top: 29px;
	left: 0px;
  -webkit-animation: tpl-config-rotate 1.2s infinite;
  -moz-animation: tpl-config-rotate 1.2s infinite;
  animation: tpl-config-rotate 1.2s infinite;
}
.w-template-config-frame .btn-configuration .icon svg path {
	transition: all ease 0.2s;
	stroke: white;
	stroke-opacity: 0.8;
	fill: #000;
}

._desktop .w-template-config-frame .btn-configuration:hover .icon {
	/*animation: inherit !important;*/
	animation-duration: 3s;
}
._desktop .w-template-config-frame .btn-configuration:hover svg path {
	fill: #cecece;
	stroke: transparent;
	stroke-opacity: 0;
}
@keyframes tpl-config-rotate {
  from {transform: rotate(0deg)}
  to {transform: rotate(-360deg)}
}
.w-template-config-frame .w-color-switch {
	font-size: 0;
	line-height: 0;
	margin-left: -4px;
	margin-right: -4px;
}
.w-template-config-frame .w-color-switch .color-quad {
  width: 39px;
  height: 39px;
  margin: 0 2px 4px 2px;
  content: "";
  background-color: #000;
  content: "";
  cursor: pointer;
  display: inline-block;
  vertical-align: top;
  border: 2px solid transparent;
}
.w-template-config-frame .w-color-switch .color-quad._active {
  border-color: #000;
}

.close {
	position: absolute;
	z-index: 2;
	top: 0;
	right: 0;
	display: block;
	width: 25px;
	height: 25px;
	content: "";
	cursor: pointer;
	margin: 0;
  }
  .close:after, 
  .close:before {
	display: block;
	width: 25px;
	height: 1px;
	background-color: #202020;
	content: "";
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	position: absolute;
	top: 50%;
	right: 0px;
  }
  .close.small {
	width: 14px;
	height: 14px;
  }
  .close.small:after, 
  .close.small:before {
	width: 15px;
  }
  .close:after {
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
  }
  ._desktop .close:hover:before, 
  ._desktop .close:hover:after {
	background-color: red;
  }
  .template-config__block {
	display: flex;
    flex-direction: column;
  }
  .w-template-config-frame {
	font-family: "Source Sans 3", sans-serif;
  }

  .w-template-config-frame.frame-2{
      position: absolute;
    right: -40%;
    top: 25%;
    left: unset;
  }
  .w-template-config-frame.frame-2>frame{
    width:260px;
  }
.w-grid-choose,.w-layout-choose{
    display:flex;
    gap:1rem;
}
.w-grid-choose>div,.w-layout-choose>div{
   cursor:pointer;
}
.w-grid-choose>div.current,.w-layout-choose>div.current{
    border: 1px solid #9a0000;
    border-radius: 4px;
}
/*-/-виджет с шестеренками-/-*/


/*--цветовые варианты--*/
.w-template-config-frame .w-color-switch .color-quad.skin_color__001{background-color:#095CBD}
.w-template-config-frame .w-color-switch .color-quad.skin_color__002{background-color:#236BFE}
.w-template-config-frame .w-color-switch .color-quad.skin_color__003{background-color:#5D48EF}
.w-template-config-frame .w-color-switch .color-quad.skin_color__004{background-color:#063B27}
.w-template-config-frame .w-color-switch .color-quad.skin_color__005{background-color:#105B55}
.w-template-config-frame .w-color-switch .color-quad.skin_color__006{background-color:#F13F3F}
.w-template-config-frame .w-color-switch .color-quad.skin_color__007{background-color:#E84526}
.w-template-config-frame .w-color-switch .color-quad.skin_color__008{background-color:#1B1B25}
.w-template-config-frame .w-color-switch .color-quad.skin_color__009{background:linear-gradient(57.48deg, #0386F7 23.28%, #19A8CF 45.76%, #19AECC 57.54%, #19CFC0 84.17%);}
.w-template-config-frame .w-color-switch .color-quad.skin_color__010{background:linear-gradient(57.48deg, #E44EE1 23.28%, #9C54E4 54.02%, #5532C8 84.17%);}

/*--варианты шрифтов--*/
.w-template-config-frame .template-config__block .skin_font__001{font-family: "Carlito", sans-serif;}
.w-template-config-frame .template-config__block .skin_font__002{font-family: "Inter", sans-serif;}
.w-template-config-frame .template-config__block .skin_font__003{font-family: "Montserrat", sans-serif;}
.w-template-config-frame .template-config__block .skin_font__004{font-family: "Noto Sans", sans-serif;}
.w-template-config-frame .template-config__block .skin_font__005{font-family: "PT Sans Caption", sans-serif;}
.w-template-config-frame .template-config__block .skin_font__006{font-family: "Rubik", sans-serif;}
/*-/-варианты шрифтов-/-*/
._js-b-site-font-switcher._active{background: #cecece;width:max-content; border-radius:4px;}