styles.css

.adjust-bar {
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  border-radius: 30px;
  width: 100%;
  height: 60px;
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.adjust-bar::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  width: 60px;
  height: 60px;
  border: 3px solid rgba(51, 51, 51, 0.1);
  border-radius: 30px;
  box-shadow: 0 0 0 4px #fff;
}
.adjust-bar::-moz-range-thumb {
  box-sizing: border-box;
  cursor: pointer;
  width: 60px;
  height: 60px;
  border: 3px solid rgba(51, 51, 51, 0.1);
  border-radius: 30px;
  background: transparent;
  box-shadow: 0 0 0 4px #fff;
}
.adjust-bar::-moz-range-track {
  background: transparent;
}
.adjust-bar__container_theme_temp {
  position: relative;
}
.adjust-bar__container_theme_temp::before, .adjust-bar__container_theme_temp::after {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  position: absolute;
  top: 20px;
  z-index: 1;
  pointer-events: none;
}
.adjust-bar__container_theme_temp::before {
  content: '–10';
  left: 15px;
}
.adjust-bar__container_theme_temp::after {
  content: '+30';
  right: 15px;
}
.adjust-bar__container_theme_light {
  position: relative;
}
.adjust-bar__container_theme_light::before, .adjust-bar__container_theme_light::after {
  content: '';
  position: absolute;
  z-index: 1;
  pointer-events: none;
}
.adjust-bar__container_theme_light::before {
  top: 14px;
  left: 14px;
  width: 30px;
  height: 30px;
  background: url("assets/adjust-bar_light_from.svg") center center/contain no-repeat;
}
.adjust-bar__container_theme_light::after {
  top: 13px;
  right: 13px;
  width: 34px;
  height: 34px;
  background: url("assets/adjust-bar_light_to.svg") center center/contain no-repeat;
}
.adjust-bar_theme_temp {
  background-image: linear-gradient(90deg, #068fff 0%, #ffd800 50%, #f76b1c 100%);
}
.adjust-bar_theme_light {
  background-image: linear-gradient(90deg, #ffe682 0%, #ff9e00 100%);
}
.button {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
}
.button_color_yellow {
  background: #ffd93e;
}
.button_size_l {
  font-size: 18px;
  font-weight: 700;
  height: 60px;
  border-radius: 20px;
}
.button:hover {
  box-shadow: 0 2px 6px 0 rgba(255, 225, 225, 0.6);
}
.button:active {
  box-shadow: none;
}
.content {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-top: 29px;
}
.content__item {
  width: 100%;
  margin-bottom: 29px;
  position: relative;
}
.content__item_half {
  width: 49%;
}
.content__item_main {
  padding-left: 40px;
}
.content__item_scenarios {
  padding-right: 40px;
}
.content__item-header {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 20px;
}
.content__item-header_devices {
  padding-left: 40px;
  display: inline-block;
  margin-right: 11px;
}
#root {
  position: absolute;
  left: -10000px;
}
.devices {
  display: flex;
  justify-content: flex-start;
  overflow-x: hidden;
  padding: 20px 0 6px 40px;
}
.devices__panel {
  margin-right: 15px;
}
.devices::after {
  content: '';
  display: inline-block;
  min-width: 25px;
}
.devices__paginator {
  position: absolute;
  top: 0;
  right: 40px;
}
.filter__select {
  display: none;
}
.filter__item-label {
  display: inline-block;
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  background: #f7f7f7;
  min-height: 30px;
  padding: 8px 13px;
  border-radius: 15px;
  margin-right: 11px;
  cursor: pointer;
}
.filter__item-label:hover {
  background: #ffd93e;
}
.filter__item-radio {
  display: none;
}
.filter__item-radio:checked + label {
  background: #ffd93e;
}
.filter__item-radio_kitchen:checked ~ .devices .panel {
  display: none;
}
.filter__item-radio_kitchen:checked ~ .devices .panel_kitchen {
  display: flex;
}
.filter__item-radio_room:checked ~ .devices .panel {
  display: none;
}
.filter__item-radio_room:checked ~ .devices .panel_room {
  display: flex;
}
.filter__item-radio_lamp:checked ~ .devices .panel {
  display: none;
}
.filter__item-radio_lamp:checked ~ .devices .panel_lamp {
  display: flex;
}
.filter__item-radio_cam:checked ~ .devices .panel {
  display: none;
}
.filter__item-radio_cam:checked ~ .devices .panel_cam {
  display: flex;
}
.panel_lamp {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgo8IS0tIEZST00gUlVTU0lBIFdJVEggTE9WRSAtLT4KPCEtLQpfXyAgIF9fX19fICBfICAgXyAgICAgICAgICAgICAgICAgICAgICAgICAgICBfX19fICBfX19fXyBfX19fICAgIF8gIF9fX19fX19fXyAgIF9fXwpcIFwgLyAvIF8gXHwgfCB8IHwgICBfX18gIF8gX18gICBfX18gXyBfXyAgIHwgIF8gXHwgX19fX3wgIF8gXCAgfCB8LyAvIF9fX19cIFwgLyAvIHwKIFwgViAvIHwgfCB8IHwgfCB8ICAvIF8gXHwgJ18gXCAvIF8gXCAnXyBcICB8IHxfKSB8ICBffCB8IHwgfCB8IHwgJyAvfCAgX3wgIFwgViAvfCB8CiAgfCB8fCB8X3wgfCB8X3wgfCB8IChfKSB8IHxfKSB8ICBfXy8gfCB8IHwgfCAgXyA8fCB8X19ffCB8X3wgfCB8IC4gXHwgfF9fXyAgfCB8IHxffAogIHxffCBcX19fLyBcX19fLyAgIFxfX18vfCAuX18vIFxfX198X3wgfF98IHxffCBcX1xfX19fX3xfX19fLyAgfF98XF9cX19fX198IHxffCAoXykKICAgICAgICAgICAgICAgICAgICAgICAgIHxffAotLT4KCjxzdmcKICAgeG1sbnM6b3NiPSJodHRwOi8vd3d3Lm9wZW5zd2F0Y2hib29rLm9yZy91cmkvMjAwOS9vc2IiCiAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIKICAgeG1sbnM6Y2M9Imh0dHA6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL25zIyIKICAgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIgogICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIgogICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiCiAgIHhtbG5zOmlua3NjYXBlPSJodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy9uYW1lc3BhY2VzL2lua3NjYXBlIgogICBpZD0ic3ZnMzAwNCIKICAgdmVyc2lvbj0iMS4xIgogICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjQ4LjIgcjk4MTkiCiAgIHdpZHRoPSIxNDEuNzMyMjgiCiAgIGhlaWdodD0iMTI0LjAxNTc1IgogICB4bWw6c3BhY2U9InByZXNlcnZlIgogICBzb2RpcG9kaTpkb2NuYW1lPSJ0cmVlLnN2ZyI+PG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhMzAxMCI+PHJkZjpSREY+PGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPjxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PjxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz48L2NjOldvcms+PC9yZGY6UkRGPjwvbWV0YWRhdGE+PGRlZnMKICAgICBpZD0iZGVmczMwMDgiPjxwYXR0ZXJuCiAgICAgICBpbmtzY2FwZTpjb2xsZWN0PSJhbHdheXMiCiAgICAgICB4bGluazpocmVmPSIjcGF0dGVybjY0ODIiCiAgICAgICBpZD0icGF0dGVybjc5OTgiCiAgICAgICBwYXR0ZXJuVHJhbnNmb3JtPSJtYXRyaXgoMS4wNTU0ODU4LDAsMCwwLjk0MTg3MTMzLDE4Ljk3MzczOCw0NDUuMjIwMikiIC8+PGxpbmVhckdyYWRpZW50CiAgICAgICBpZD0ibGluZWFyR3JhZGllbnQ3OTkyIgogICAgICAgb3NiOnBhaW50PSJzb2xpZCI+PHN0b3AKICAgICAgICAgc3R5bGU9InN0b3AtY29sb3I6I2ZmZmZmZjtzdG9wLW9wYWNpdHk6MTsiCiAgICAgICAgIG9mZnNldD0iMCIKICAgICAgICAgaWQ9InN0b3A3OTk0IiAvPjwvbGluZWFyR3JhZGllbnQ+PGNsaXBQYXRoCiAgICAgICBjbGlwUGF0aFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIKICAgICAgIGlkPSJjbGlwUGF0aDMwMTgiPjxwYXRoCiAgICAgICAgIGQ9Ik0gMCw0NjQgNTI4LDQ2NCA1MjgsMCAwLDAgMCw0NjQgeiIKICAgICAgICAgaWQ9InBhdGgzMDIwIgogICAgICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIiAvPjwvY2xpcFBhdGg+PHBhdHRlcm4KICAgICAgIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiCiAgICAgICB3aWR0aD0iNTEuMjcyNzI4IgogICAgICAgaGVpZ2h0PSI1MS4yNzUiCiAgICAgICBwYXR0ZXJuVHJhbnNmb3JtPSJtYXRyaXgoMC44LDAsMCwtMC44LDE4Ljk3MzczOCw0NDUuMjIwMikiCiAgICAgICBpZD0icGF0dGVybjY0ODIiPjxnCiAgICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMjUsMCwwLC0xLjI1LDc1LjI3MjcyOCw0NzkpIgogICAgICAgICBpZD0iZzY0NDYiPjxnCiAgICAgICAgICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTMuMiw2LjE4KSIKICAgICAgICAgICBpZD0iZzY0NDgiPjxnCiAgICAgICAgICAgICBpZD0iZzY0NTAiCiAgICAgICAgICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTgsMzQ3KSI+PHBhdGgKICAgICAgICAgICAgICAgZD0ibSAwLDAgLTEsMCAwLC0xIGMgMCwtMS41NDIgLTEuNDU3LC0zIC0zLC0zIEwgLTguNTg2LC00IC0xMCwtNS40MTQgLTEwLC02IGMgMCwtMSAxLC0yIDIsLTIgbCA1LDAgMywtMyAwLDMgYyAxLDAgMiwxIDIsMiBsIDAsNCBDIDIsLTEgMSwwIDAsMCIKICAgICAgICAgICAgICAgc3R5bGU9ImZpbGw6IzFkMWQxYjtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZSIKICAgICAgICAgICAgICAgaWQ9InBhdGg2NDUyIgogICAgICAgICAgICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIiAvPjwvZz48ZwogICAgICAgICAgICAgaWQ9Imc2NDU0IgogICAgICAgICAgICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI3LDM0NCkiPjxwYXRoCiAgICAgICAgICAgICAgIGQ9Ik0gMCwwIDUsMCBDIDYsMCA3LDEgNywyIEwgNyw2IEMgNyw3IDYsOCA1LDggTCAtMyw4IEMgLTQsOCAtNSw3IC01LDYgbCAwLC00IGMgMCwtMSAxLC0yIDIsLTIgbCAwLC0zIDMsMyB6IgogICAgICAgICAgICAgICBzdHlsZT0iZmlsbDojMWQxZDFiO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICAgICAgICBpZD0icGF0aDY0NTYiCiAgICAgICAgICAgICAgIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiIC8+PC9nPjwvZz48ZwogICAgICAgICAgIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xNTYuMjE4MTgsNy4yKSIKICAgICAgICAgICBpZD0iZzY0NTgiPjxwYXRoCiAgICAgICAgICAgICBkPSJtIDExMSwzNDMuMDIxIC0xLDAgMCw1IDEsMCAwLC01IHogbSAtMiwwIC0xMSwwIDAsMSAxMSwzIDAsLTQgeiBtIC01LjI2MywtNC44NDcgYyAtMC4wNjUsLTAuMjU3IC0wLjM0NSwtMC40MjkgLTAuNjA4LC0wLjM2MSBsIC0yLjkzOCwwLjc0OSBjIC0wLjI2NywwLjA2OCAtMC40MjksMC4zNCAtMC4zNjEsMC42MDcgbCAwLjMyMiwxLjI2NiAzLjg5MSwtMS4wNjEgLTAuMzA2LC0xLjIgeiBtIDUuMjYzLDEwLjg0NyAwLC0xIC0xMSwtMyAtMiwxIDAsLTYgMiwxIDEuMTg4LC0wLjMyNCAtMC4zMjcsLTEuMjgxIGMgLTAuMjA0LC0wLjgwMSAwLjI4MiwtMS42MTkgMS4wODMsLTEuODIzIGwgMi45MzgsLTAuNzQ4IGMgMC4xMjEsLTAuMDMxIDAuMjQ1LC0wLjA0NyAwLjM2OSwtMC4wNDcgMC42ODcsMCAxLjI4NiwwLjQ2NSAxLjQ1NSwxLjEyOSBsIDAuMzAyLDEuMTgzIDMuOTkyLC0xLjA4OSAwLC0xIDMsLTEuMDIxIDAsMTMuOTYgLTMsLTAuOTM5IHoiCiAgICAgICAgICAgICBzdHlsZT0iZmlsbDojMWQxZDFiO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICAgICAgaWQ9InBhdGg2NDYwIgogICAgICAgICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIgLz48L2c+PGcKICAgICAgICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNDQuMjE4MTgyLDM3MC4yKSIKICAgICAgICAgICBpZD0iZzY0NjIiPjxwYXRoCiAgICAgICAgICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIgogICAgICAgICAgICAgaWQ9InBhdGg2NDY0IgogICAgICAgICAgICAgc3R5bGU9ImZpbGw6IzFkMWQxYjtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZSIKICAgICAgICAgICAgIGQ9Im0gMCwwIC01LDUgMywwIC00LDQgMiwwIC00LDQgLTQsLTQgMiwwIC00LC00IDMsMCAtNSwtNSA2LDAgMCwtMyA0LDAgMCwzIDYsMCB6IiAvPjwvZz48ZwogICAgICAgICAgIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yLjcwMDIsMTExLjIpIgogICAgICAgICAgIGlkPSJnNjQ2NiI+PGcKICAgICAgICAgICAgIGlkPSJnNjQ2OCIKICAgICAgICAgICAgIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMCwyNjEpIj48cGF0aAogICAgICAgICAgICAgICBkPSJNIDAsMCBDIC0xLjEwNSwwIC0yLDAuODk2IC0yLDIgLTIsMy4xMDQgLTEuMTA1LDQgMCw0IDEuMTA0LDQgMiwzLjEwNCAyLDIgMiwwLjg5NiAxLjEwNCwwIDAsMCBNIDAsNSBDIC0xLjY1NCw1IC0zLDMuNjU0IC0zLDIgLTMsMS4xMTcgLTIuNjA5LDAuMzMgLTIsLTAuMjIgTCAtMiwtNSAwLC0zIDIsLTUgMiwtMC4yMiBDIDIuNjA5LDAuMzMgMywxLjExNyAzLDIgMywzLjY1NCAxLjY1NCw1IDAsNSIKICAgICAgICAgICAgICAgc3R5bGU9ImZpbGw6IzFkMWQxYjtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZSIKICAgICAgICAgICAgICAgaWQ9InBhdGg2NDcwIgogICAgICAgICAgICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIiAvPjwvZz48ZwogICAgICAgICAgICAgaWQ9Imc2NDcyIgogICAgICAgICAgICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI1LjMwODYsMjU4KSI+PHBhdGgKICAgICAgICAgICAgICAgZD0ibSAwLDAgLTQuNjkxLDAgMCwxMiA1LjU4NiwwIDMsLTMgMi40MTQsMCAwLDAuNDE0IC00LjU4Niw0LjU4NiAtOC40MTQsMCAwLC0xNiA4LjYwNSwwIEwgMC4wMzcsLTAuMDQgMCwwIHoiCiAgICAgICAgICAgICAgIHN0eWxlPSJmaWxsOiMxZDFkMWI7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgICAgICAgIGlkPSJwYXRoNjQ3NCIKICAgICAgICAgICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIgLz48L2c+PHBhdGgKICAgICAgICAgICAgIGQ9Im0gLTI0LDI2NyAtNSwwIDAsLTEgNSwwIDAsMSB6IgogICAgICAgICAgICAgc3R5bGU9ImZpbGw6IzFkMWQxYjtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZSIKICAgICAgICAgICAgIGlkPSJwYXRoNjQ3NiIKICAgICAgICAgICAgIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiIC8+PHBhdGgKICAgICAgICAgICAgIGQ9Im0gLTI0LDI2NSAtNSwwIDAsLTEgNSwwIDAsMSB6IgogICAgICAgICAgICAgc3R5bGU9ImZpbGw6IzFkMWQxYjtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZSIKICAgICAgICAgICAgIGlkPSJwYXRoNjQ3OCIKICAgICAgICAgICAgIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiIC8+PHBhdGgKICAgICAgICAgICAgIGQ9Im0gLTI5LDI2MiA1LDAgMCwxIC01LDAgMCwtMSB6IgogICAgICAgICAgICAgc3R5bGU9ImZpbGw6IzFkMWQxYjtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZSIKICAgICAgICAgICAgIGlkPSJwYXRoNjQ4MCIKICAgICAgICAgICAgIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiIC8+PC9nPjwvZz48L3BhdHRlcm4+PC9kZWZzPjxzb2RpcG9kaTpuYW1lZHZpZXcKICAgICBwYWdlY29sb3I9IiNmZmZmZmYiCiAgICAgYm9yZGVyY29sb3I9IiM2NjY2NjYiCiAgICAgYm9yZGVyb3BhY2l0eT0iMSIKICAgICBvYmplY3R0b2xlcmFuY2U9IjEwIgogICAgIGdyaWR0b2xlcmFuY2U9IjEwIgogICAgIGd1aWRldG9sZXJhbmNlPSIxMCIKICAgICBpbmtzY2FwZTpwYWdlb3BhY2l0eT0iMCIKICAgICBpbmtzY2FwZTpwYWdlc2hhZG93PSIyIgogICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iMTQzNiIKICAgICBpbmtzY2FwZTp3aW5kb3ctaGVpZ2h0PSI4NTYiCiAgICAgaWQ9Im5hbWVkdmlldzMwMDYiCiAgICAgc2hvd2dyaWQ9ImZhbHNlIgogICAgIGlua3NjYXBlOnpvb209IjQuODQ4Mzk0MSIKICAgICBpbmtzY2FwZTpjeD0iNjEuMDI3OTciCiAgICAgaW5rc2NhcGU6Y3k9IjIzLjMyMTM0MSIKICAgICBpbmtzY2FwZTp3aW5kb3cteD0iNCIKICAgICBpbmtzY2FwZTp3aW5kb3cteT0iMTYyMiIKICAgICBpbmtzY2FwZTp3aW5kb3ctbWF4aW1pemVkPSIxIgogICAgIGlua3NjYXBlOmN1cnJlbnQtbGF5ZXI9ImczMDEyIgogICAgIHVuaXRzPSJtbSIKICAgICBpbmtzY2FwZTpkb2N1bWVudC11bml0cz0ibW0iCiAgICAgaGVpZ2h0PSIzNW1tIiAvPjxnCiAgICAgaWQ9ImczMDEyIgogICAgIGlua3NjYXBlOmdyb3VwbW9kZT0ibGF5ZXIiCiAgICAgaW5rc2NhcGU6bGFiZWw9Ik1pbmljb25zLUZyZWUiCiAgICAgdHJhbnNmb3JtPSJtYXRyaXgoMS4yNSwwLDAsLTEuMjUsMCwxMjQuMDE1NzQpIj48ZwogICAgICAgaWQ9Imc2NDI0IgogICAgICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTg5Ljc2MjYzMiwtMzMxLjMxODk1KSIKICAgICAgIHN0eWxlPSJmaWxsOiMyYzNlNTA7ZmlsbC1vcGFjaXR5OjAuMzIyMTE1MzkiPjxwYXRoCiAgICAgICAgIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiCiAgICAgICAgIGlkPSJwYXRoMzQ0MCIKICAgICAgICAgc3R5bGU9ImZpbGw6IzJjM2U1MDtmaWxsLW9wYWNpdHk6MC4zMjIxMTUzOTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZSIKICAgICAgICAgZD0ibSAxMTEsMzQzLjAyMSAtMSwwIDAsNSAxLDAgMCwtNSB6IG0gLTIsMCAtMTEsMCAwLDEgMTEsMyAwLC00IHogbSAtNS4yNjMsLTQuODQ3IGMgLTAuMDY1LC0wLjI1NyAtMC4zNDUsLTAuNDI5IC0wLjYwOCwtMC4zNjEgbCAtMi45MzgsMC43NDkgYyAtMC4yNjcsMC4wNjggLTAuNDI5LDAuMzQgLTAuMzYxLDAuNjA3IGwgMC4zMjIsMS4yNjYgMy44OTEsLTEuMDYxIC0wLjMwNiwtMS4yIHogbSA1LjI2MywxMC44NDcgMCwtMSAtMTEsLTMgLTIsMSAwLC02IDIsMSAxLjE4OCwtMC4zMjQgLTAuMzI3LC0xLjI4MSBjIC0wLjIwNCwtMC44MDEgMC4yODIsLTEuNjE5IDEuMDgzLC0xLjgyMyBsIDIuOTM4LC0wLjc0OCBjIDAuMTIxLC0wLjAzMSAwLjI0NSwtMC4wNDcgMC4zNjksLTAuMDQ3IDAuNjg3LDAgMS4yODYsMC40NjUgMS40NTUsMS4xMjkgbCAwLjMwMiwxLjE4MyAzLjk5MiwtMS4wODkgMCwtMSAzLC0xLjAyMSAwLDEzLjk2IC0zLC0wLjkzOSB6IiAvPjwvZz48cGF0aAogICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIKICAgICAgIGlkPSJwYXRoMzYwOCIKICAgICAgIHN0eWxlPSJmaWxsOiMyYzNlNTA7ZmlsbC1vcGFjaXR5OjAuMzIyMTE1Mzk7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICBkPSJtIDIyLjIzNzM2Niw1Ni41NzQ3MDQgLTUsNSAzLDAgLTQsNCAyLDAgLTQsNCAtNCwtNCAyLDAgLTQsLTQgMywwIC01LC01IDYsMCAwLC0zIDQsMCAwLDMgeiIKICAgICAgIHNvZGlwb2RpOm5vZGV0eXBlcz0iY2NjY2NjY2NjY2NjY2NjYyIgLz48ZwogICAgICAgaWQ9Imc2NDE4IgogICAgICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjYuNDU1NTQ4LC0zMDcuMzgyMTIpIgogICAgICAgc3R5bGU9ImZpbGw6IzJjM2U1MDtmaWxsLW9wYWNpdHk6MC4zMjIxMTUzOSI+PGcKICAgICAgICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTE4LDM0NykiCiAgICAgICAgIGlkPSJnMzQxNiIKICAgICAgICAgc3R5bGU9ImZpbGw6IzJjM2U1MDtmaWxsLW9wYWNpdHk6MC4zMjIxMTUzOSI+PHBhdGgKICAgICAgICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIgogICAgICAgICAgIGlkPSJwYXRoMzQxOCIKICAgICAgICAgICBzdHlsZT0iZmlsbDojMmMzZTUwO2ZpbGwtb3BhY2l0eTowLjMyMjExNTM5O2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICAgIGQ9Im0gMCwwIC0xLDAgMCwtMSBjIDAsLTEuNTQyIC0xLjQ1NywtMyAtMywtMyBMIC04LjU4NiwtNCAtMTAsLTUuNDE0IC0xMCwtNiBjIDAsLTEgMSwtMiAyLC0yIGwgNSwwIDMsLTMgMCwzIGMgMSwwIDIsMSAyLDIgbCAwLDQgQyAyLC0xIDEsMCAwLDAiIC8+PC9nPjxnCiAgICAgICAgIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yNywzNDQpIgogICAgICAgICBpZD0iZzM0MjAiCiAgICAgICAgIHN0eWxlPSJmaWxsOiMyYzNlNTA7ZmlsbC1vcGFjaXR5OjAuMzIyMTE1MzkiPjxwYXRoCiAgICAgICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIKICAgICAgICAgICBpZD0icGF0aDM0MjIiCiAgICAgICAgICAgc3R5bGU9ImZpbGw6IzJjM2U1MDtmaWxsLW9wYWNpdHk6MC4zMjIxMTUzOTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZSIKICAgICAgICAgICBkPSJNIDAsMCA1LDAgQyA2LDAgNywxIDcsMiBMIDcsNiBDIDcsNyA2LDggNSw4IEwgLTMsOCBDIC00LDggLTUsNyAtNSw2IGwgMCwtNCBjIDAsLTEgMSwtMiAyLC0yIGwgMCwtMyB6IgogICAgICAgICAgIHNvZGlwb2RpOm5vZGV0eXBlcz0iY3Nzc3Nzc3NjY2MiIC8+PC9nPjwvZz48ZwogICAgICAgaWQ9Imc2NDA1IgogICAgICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjYuOTU1MzQ4LC0xNzcuNDY4NDYpIgogICAgICAgc3R5bGU9ImZpbGw6IzJjM2U1MDtmaWxsLW9wYWNpdHk6MC4zMjIxMTUzOSI+PGcKICAgICAgICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIwLDI2MSkiCiAgICAgICAgIGlkPSJnMzY4NiIKICAgICAgICAgc3R5bGU9ImZpbGw6IzJjM2U1MDtmaWxsLW9wYWNpdHk6MC4zMjIxMTUzOSI+PHBhdGgKICAgICAgICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIgogICAgICAgICAgIGlkPSJwYXRoMzY4OCIKICAgICAgICAgICBzdHlsZT0iZmlsbDojMmMzZTUwO2ZpbGwtb3BhY2l0eTowLjMyMjExNTM5O2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICAgIGQ9Ik0gMCwwIEMgLTEuMTA1LDAgLTIsMC44OTYgLTIsMiAtMiwzLjEwNCAtMS4xMDUsNCAwLDQgMS4xMDQsNCAyLDMuMTA0IDIsMiAyLDAuODk2IDEuMTA0LDAgMCwwIE0gMCw1IEMgLTEuNjU0LDUgLTMsMy42NTQgLTMsMiAtMywxLjExNyAtMi42MDksMC4zMyAtMiwtMC4yMiBMIC0yLC01IDAsLTMgMiwtNSAyLC0wLjIyIEMgMi42MDksMC4zMyAzLDEuMTE3IDMsMiAzLDMuNjU0IDEuNjU0LDUgMCw1IiAvPjwvZz48ZwogICAgICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjUuMzA4NiwyNTgpIgogICAgICAgICBpZD0iZzM2OTAiCiAgICAgICAgIHN0eWxlPSJmaWxsOiMyYzNlNTA7ZmlsbC1vcGFjaXR5OjAuMzIyMTE1MzkiPjxwYXRoCiAgICAgICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIKICAgICAgICAgICBpZD0icGF0aDM2OTIiCiAgICAgICAgICAgc3R5bGU9ImZpbGw6IzJjM2U1MDtmaWxsLW9wYWNpdHk6MC4zMjIxMTUzOTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZSIKICAgICAgICAgICBkPSJtIDAsMCAtNC42OTEsMCAwLDEyIDUuNTg2LDAgMywtMyAyLjQxNCwwIDAsMC40MTQgLTQuNTg2LDQuNTg2IC04LjQxNCwwIDAsLTE2IDguNjA1LDAgTCAwLjAzNywtMC4wNCAwLDAgeiIgLz48L2c+PHBhdGgKICAgICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIKICAgICAgICAgaWQ9InBhdGgzNjk0IgogICAgICAgICBzdHlsZT0iZmlsbDojMmMzZTUwO2ZpbGwtb3BhY2l0eTowLjMyMjExNTM5O2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJtIC0yNCwyNjcgLTUsMCAwLC0xIDUsMCAwLDEgeiIgLz48cGF0aAogICAgICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIgogICAgICAgICBpZD0icGF0aDM2OTYiCiAgICAgICAgIHN0eWxlPSJmaWxsOiMyYzNlNTA7ZmlsbC1vcGFjaXR5OjAuMzIyMTE1Mzk7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gLTI0LDI2NSAtNSwwIDAsLTEgNSwwIDAsMSB6IiAvPjxwYXRoCiAgICAgICAgIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiCiAgICAgICAgIGlkPSJwYXRoMzY5OCIKICAgICAgICAgc3R5bGU9ImZpbGw6IzJjM2U1MDtmaWxsLW9wYWNpdHk6MC4zMjIxMTUzOTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZSIKICAgICAgICAgZD0ibSAtMjksMjYyIDUsMCAwLDEgLTUsMCAwLC0xIHoiIC8+PC9nPjxyZWN0CiAgICAgICBzdHlsZT0iZmlsbDp1cmwoI3BhdHRlcm42NDgyKTtzdHJva2U6bm9uZSIKICAgICAgIHdpZHRoPSI0MS4wMTgxODEiCiAgICAgICBoZWlnaHQ9IjAiCiAgICAgICB4PSIxOC45NzM3MzgiCiAgICAgICB5PSI0NDUuMjIwMjEiCiAgICAgICBpZD0icmVjdDY1MDIiIC8+PGcKICAgICAgIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zNC40MzE1NzcsLTI4MS42NTA0OSkiCiAgICAgICBpZD0iZzg0NTIiCiAgICAgICBzdHlsZT0iZmlsbDojMmMzZTUwO2ZpbGwtb3BhY2l0eTowLjMyMjExNTM5Ij48cGF0aAogICAgICAgICBkPSJtIDExMSwzNDMuMDIxIC0xLDAgMCw1IDEsMCAwLC01IHogbSAtMiwwIC0xMSwwIDAsMSAxMSwzIDAsLTQgeiBtIC01LjI2MywtNC44NDcgYyAtMC4wNjUsLTAuMjU3IC0wLjM0NSwtMC40MjkgLTAuNjA4LC0wLjM2MSBsIC0yLjkzOCwwLjc0OSBjIC0wLjI2NywwLjA2OCAtMC40MjksMC4zNCAtMC4zNjEsMC42MDcgbCAwLjMyMiwxLjI2NiAzLjg5MSwtMS4wNjEgLTAuMzA2LC0xLjIgeiBtIDUuMjYzLDEwLjg0NyAwLC0xIC0xMSwtMyAtMiwxIDAsLTYgMiwxIDEuMTg4LC0wLjMyNCAtMC4zMjcsLTEuMjgxIGMgLTAuMjA0LC0wLjgwMSAwLjI4MiwtMS42MTkgMS4wODMsLTEuODIzIGwgMi45MzgsLTAuNzQ4IGMgMC4xMjEsLTAuMDMxIDAuMjQ1LC0wLjA0NyAwLjM2OSwtMC4wNDcgMC42ODcsMCAxLjI4NiwwLjQ2NSAxLjQ1NSwxLjEyOSBsIDAuMzAyLDEuMTgzIDMuOTkyLC0xLjA4OSAwLC0xIDMsLTEuMDIxIDAsMTMuOTYgLTMsLTAuOTM5IHoiCiAgICAgICAgIHN0eWxlPSJmaWxsOiMyYzNlNTA7ZmlsbC1vcGFjaXR5OjAuMzIyMTE1Mzk7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGlkPSJwYXRoODQ1NCIKICAgICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIgLz48L2c+PGcKICAgICAgIHRyYW5zZm9ybT0idHJhbnNsYXRlKDc3LjMzNTA3NSw3LjA2OTU3NzcpIgogICAgICAgaWQ9Imc4NDU2IgogICAgICAgc3R5bGU9ImZpbGw6IzJjM2U1MDtmaWxsLW9wYWNpdHk6MC4zMjIxMTUzOSI+PHBhdGgKICAgICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIKICAgICAgICAgaWQ9InBhdGg4NDU4IgogICAgICAgICBzdHlsZT0iZmlsbDojMmMzZTUwO2ZpbGwtb3BhY2l0eTowLjMyMjExNTM5O2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJtIDAsMCAtNSw1IDMsMCAtNCw0IDIsMCAtNCw0IC00LC00IDIsMCAtNCwtNCAzLDAgLTUsLTUgNiwwIDAsLTMgNCwwIDAsMyA2LDAgeiIgLz48L2c+PGcKICAgICAgIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyMi4zMjQxLC0yNTguNjEwNDkpIgogICAgICAgaWQ9Imc4NDYwIgogICAgICAgc3R5bGU9ImZpbGw6IzJjM2U1MDtmaWxsLW9wYWNpdHk6MC4zMjIxMTUzOSI+PGcKICAgICAgICAgaWQ9Imc4NDYyIgogICAgICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTgsMzQ3KSIKICAgICAgICAgc3R5bGU9ImZpbGw6IzJjM2U1MDtmaWxsLW9wYWNpdHk6MC4zMjIxMTUzOSI+PHBhdGgKICAgICAgICAgICBkPSJtIDAsMCAtMSwwIDAsLTEgYyAwLC0xLjU0MiAtMS40NTcsLTMgLTMsLTMgTCAtOC41ODYsLTQgLTEwLC01LjQxNCAtMTAsLTYgYyAwLC0xIDEsLTIgMiwtMiBsIDUsMCAzLC0zIDAsMyBjIDEsMCAyLDEgMiwyIGwgMCw0IEMgMiwtMSAxLDAgMCwwIgogICAgICAgICAgIHN0eWxlPSJmaWxsOiMyYzNlNTA7ZmlsbC1vcGFjaXR5OjAuMzIyMTE1Mzk7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgICAgaWQ9InBhdGg4NDY0IgogICAgICAgICAgIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiIC8+PC9nPjxnCiAgICAgICAgIGlkPSJnODQ2NiIKICAgICAgICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI3LDM0NCkiCiAgICAgICAgIHN0eWxlPSJmaWxsOiMyYzNlNTA7ZmlsbC1vcGFjaXR5OjAuMzIyMTE1MzkiPjxwYXRoCiAgICAgICAgICAgZD0iTSAwLDAgNSwwIEMgNiwwIDcsMSA3LDIgTCA3LDYgQyA3LDcgNiw4IDUsOCBMIC0zLDggQyAtNCw4IC01LDcgLTUsNiBsIDAsLTQgYyAwLC0xIDEsLTIgMiwtMiBsIDAsLTMgMywzIHoiCiAgICAgICAgICAgc3R5bGU9ImZpbGw6IzJjM2U1MDtmaWxsLW9wYWNpdHk6MC4zMjIxMTUzOTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZSIKICAgICAgICAgICBpZD0icGF0aDg0NjgiCiAgICAgICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIgLz48L2c+PC9nPjxnCiAgICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMjUuMTU3NCwtMjI3Ljg3MDQxKSIKICAgICAgIGlkPSJnODQ3MCIKICAgICAgIHN0eWxlPSJmaWxsOiMyYzNlNTA7ZmlsbC1vcGFjaXR5OjAuMzIyMTE1MzkiPjxnCiAgICAgICAgIGlkPSJnODQ3MiIKICAgICAgICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIwLDI2MSkiCiAgICAgICAgIHN0eWxlPSJmaWxsOiMyYzNlNTA7ZmlsbC1vcGFjaXR5OjAuMzIyMTE1MzkiPjxwYXRoCiAgICAgICAgICAgZD0iTSAwLDAgQyAtMS4xMDUsMCAtMiwwLjg5NiAtMiwyIC0yLDMuMTA0IC0xLjEwNSw0IDAsNCAxLjEwNCw0IDIsMy4xMDQgMiwyIDIsMC44OTYgMS4xMDQsMCAwLDAgTSAwLDUgQyAtMS42NTQsNSAtMywzLjY1NCAtMywyIC0zLDEuMTE3IC0yLjYwOSwwLjMzIC0yLC0wLjIyIEwgLTIsLTUgMCwtMyAyLC01IDIsLTAuMjIgQyAyLjYwOSwwLjMzIDMsMS4xMTcgMywyIDMsMy42NTQgMS42NTQsNSAwLDUiCiAgICAgICAgICAgc3R5bGU9ImZpbGw6IzJjM2U1MDtmaWxsLW9wYWNpdHk6MC4zMjIxMTUzOTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZSIKICAgICAgICAgICBpZD0icGF0aDg0NzQiCiAgICAgICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIgLz48L2c+PGcKICAgICAgICAgaWQ9Imc4NDc2IgogICAgICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjUuMzA4NiwyNTgpIgogICAgICAgICBzdHlsZT0iZmlsbDojMmMzZTUwO2ZpbGwtb3BhY2l0eTowLjMyMjExNTM5Ij48cGF0aAogICAgICAgICAgIGQ9Im0gMCwwIC00LjY5MSwwIDAsMTIgNS41ODYsMCAzLC0zIDIuNDE0LDAgMCwwLjQxNCAtNC41ODYsNC41ODYgLTguNDE0LDAgMCwtMTYgOC42MDUsMCBMIDAuMDM3LC0wLjA0IDAsMCB6IgogICAgICAgICAgIHN0eWxlPSJmaWxsOiMyYzNlNTA7ZmlsbC1vcGFjaXR5OjAuMzIyMTE1Mzk7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgICAgaWQ9InBhdGg4NDc4IgogICAgICAgICAgIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiIC8+PC9nPjxwYXRoCiAgICAgICAgIGQ9Im0gLTI0LDI2NyAtNSwwIDAsLTEgNSwwIDAsMSB6IgogICAgICAgICBzdHlsZT0iZmlsbDojMmMzZTUwO2ZpbGwtb3BhY2l0eTowLjMyMjExNTM5O2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBpZD0icGF0aDg0ODAiCiAgICAgICAgIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiIC8+PHBhdGgKICAgICAgICAgZD0ibSAtMjQsMjY1IC01LDAgMCwtMSA1LDAgMCwxIHoiCiAgICAgICAgIHN0eWxlPSJmaWxsOiMyYzNlNTA7ZmlsbC1vcGFjaXR5OjAuMzIyMTE1Mzk7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGlkPSJwYXRoODQ4MiIKICAgICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIgLz48cGF0aAogICAgICAgICBkPSJtIC0yOSwyNjIgNSwwIDAsMSAtNSwwIDAsLTEgeiIKICAgICAgICAgc3R5bGU9ImZpbGw6IzJjM2U1MDtmaWxsLW9wYWNpdHk6MC4zMjIxMTUzOTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZSIKICAgICAgICAgaWQ9InBhdGg4NDg0IgogICAgICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIiAvPjwvZz48L2c+PC9zdmc+);
}
.footer {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  padding-left: 40px;
  width: 100%;
  height: 60px;
  font-size: 12px;
}
.footer__link {
  margin-right: 20px;
}
.header {
  width: 100%;
  height: 92px;
  padding: 0 40px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  background: #fff;
}
.knob {
  width: 220px;
  height: 220px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.knob svg {
  width: 220px;
  height: 220px;
  transform: rotate(90deg);
}
.knob__indicator {
  fill: none;
  stroke: #f5a623;
  stroke-width: 20px;
  stroke-dasharray: 0 629;
  transform: rotate(29deg);
}
.knob__indicator-bounds {
  fill: transparent;
  stroke: #fff;
  stroke-width: 21px;
  stroke-dasharray: 99 629;
  transform: rotate(-29deg);
}
.knob__indicator-bg {
  fill: rgba(51, 51, 51, 0.7);
}
.knob__indicator-mask {
  fill: transparent;
  stroke: #fff;
  stroke-width: 22px;
  stroke-dasharray: 4 1;
  transform: rotate(1deg);
}
.knob__self {
  fill: #fefefe;
  filter: url("#knob-shadow");
  cursor: pointer;
}
.knob__value {
  font-size: 66px;
  font-weight: 700;
  position: absolute;
  user-select: none;
  pointer-events: none;
}
.knob__wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80%;
}
.link, .link:active, .link:visited {
  color: rgba(51, 51, 51, 0.6);
}
.link {
  text-decoration: none;
}
.link_active, .link:hover {
  color: inherit;
}
.logo {
  display: inline-block;
  width: 108px;
  height: 27px;
  position: relative;
  background-image: url("./assets/logo.png");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: cover;
}
.logo__ya {
  display: block;
  position: absolute;
  z-index: 10;
  outline: 0;
  height: 100%;
  width: 69px;
  left: 0;
  top: 0;
}
.logo__ya-sub {
  display: block;
  position: absolute;
  z-index: 5;
  outline: 0;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
}
.main {
  height: 331px;
  border-radius: 20px;
  padding: 0 20px 0 25px;
  display: flex;
  justify-content: space-between;
  background: url("assets/sh.png") center center/cover no-repeat;
}
.main__greeting {
  margin-top: 6px;
  font-size: 27px;
  font-weight: 700;
}
.main__info {
  width: 61.585%;
  padding-top: 20px;
  padding-left: 20px;
  background: rgba(255,255,255,0.6);
}
.main__panel {
  margin-bottom: 14px;
  position: relative;
}
.main__status {
  margin-top: 6px;
  line-height: 16px;
}
.main__upcoming {
  width: 220px;
  height: 100%;
  overflow-y: scroll;
}
.main__upcoming-wrapper {
  width: 200px;
  height: 100%;
  overflow: hidden;
}
.main__weather {
  margin-top: 25px;
}
.menu {
  margin-left: 52px;
}
.menu__icon {
  display: none;
}
.menu__item {
  margin-right: 27px;
  font-size: 16px;
  font-weight: 700;
}
.menu__list {
  display: flex;
  justify-content: flex-start;
  list-style: none;
  padding: 0;
  margin: 0;
}
.modal {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: rgba(51, 51, 51, 0.5);
}
.modal_open {
  display: flex;
}
.modal_open .modal__content {
  animation: modal 0.2s ease forwards;
}
.modal__title {
  font-size: 27px;
  font-weight: 700;
  margin-bottom: 6px;
}
.modal__value {
  box-sizing: content-box;
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 36px;
  font-weight: 700;
  max-width: 62px;
  height: 40px;
  padding-right: 32px;
}
.modal__value_temp {
  background: url("assets/panel__icon_temp_on.svg") calc(100% + 10px) 0%/contain no-repeat;
}
.modal__value_light {
  height: 45px;
  padding-right: 45px;
  background: url("assets/panel__icon_light_off.svg") right center/contain no-repeat;
}
.modal__status {
  margin-bottom: 20px;
}
.modal__adjust {
  margin-top: 25px;
}
.modal__button {
  width: 48.5%;
}
.modal__content {
  max-width: 640px;
  width: 100%;
}
.modal__body {
  position: relative;
  flex-shrink: 0;
  padding: 25px;
  margin-bottom: 15px;
  border-radius: 20px;
  background: #fff;
}
.modal__controls {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
@keyframes modal {
  from {
    transform: scale(0.2);
  }
to-transform: scale(1);
}
* {
  box-sizing: border-box;
}
html {
  height: 100%;
}
.page {
  height: 100%;
  font: 14px Arial, sans-serif;
  color: #333;
  line-height: 1.143;
  margin: 0 auto;
  padding: 0;
  width: 1366px;
}
.page__wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.page__wrapper-content {
  flex: 1 0 auto;
}
.paginator {
  height: 16px;
  width: 47px;
  display: flex;
  justify-content: space-between;
}
.paginator div {
  width: 16px;
}
.paginator_hide {
  display: none;
}
.paginator__arrow {
  opacity: 1;
  cursor: pointer;
}
.paginator__arrow:hover {
  opacity: 0.5;
}
.paginator__arrow:active {
  opacity: 0.3;
}
.paginator__arrow_disabled {
  opacity: 0.3;
}
.panel {
  padding: 14px;
  min-height: 100px;
  width: 200px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-shrink: 0;
  background: #f7f7f7;
  cursor: pointer;
  transition: opacity 0.3s ease-out;
}
.panel:hover {
  background: #fff;
  box-shadow: 0 2px 6px 0 rgba(197, 186, 186, 0.5);
}
.panel:active {
  box-shadow: none;
}
.panel_device {
  height: 120px;
}
.panel_first {
  margin-top: 20px;
}
.panel_last {
  margin-bottom: 20px;
}
.panel__sub {
  font-size: 12px;
  color: #858585;
}
.panel__title {
  font-weight: 700;
  margin-bottom: 4px;
}
.scenarios {
  max-height: 331px;
  background: #fff;
  display: flex;
  justify-content: flex-start;
  overflow-x: hidden;
}
.scenarios__page {
  display: grid;
  grid-template-columns: repeat(3, 200px);
  grid-template-rows: repeat(3, 100px);
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  justify-content: space-between;
  margin-right: 15px;
}
.scenarios__paginator {
  position: absolute;
  top: 0;
  right: 40px;
}
.scenarios_hide {
  display: none;
}
.weather {
  display: flex;
}
.weather__item {
  margin-right: 18px;
}
.weather__item-title {
  color: #858585;
  margin-bottom: 4px;
}
.weather__item-temp {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.16;
  font-family: "PT Sans Narrow", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.weather__item_outside {
  padding-right: 31px;
}
.weather__item_cloud-drizzle {
  background: url("assets/cloud-drizzle.png") 100% 70%/26px no-repeat;
}
.stats {
  opacity: 0;
}
.panel__icon {
  width: 24px;
  height: 24px;
}
.panel__icon_temp_off {
  background: url("assets/panel__icon_temp_off.svg") center center/contain no-repeat;
}
.panel__icon_temp_on {
  background: url("assets/panel__icon_temp_on.svg") center center/contain no-repeat;
}
.panel__icon_light_off {
  background: url("assets/panel__icon_light_off.svg") center center/contain no-repeat;
}
.panel__icon_light_on {
  background: url("assets/panel__icon_light_on.svg") center center/contain no-repeat;
}
.panel__icon_clock {
  background: url("assets/panel__icon_clock.svg") center center/contain no-repeat;
}