:root {
  --main_gen: #e5e7e9;
  --main-rgb: 229, 231, 233;
  --main_font: #000;
  --gray_font: #000;
  --window_bg: #f3f5f6;
  --main_block_gen: #f3f5f6;
  --window_bg-rgb: 243, 245, 246;
  --black_color: #000;
  --black_color-rgb: 0, 0, 0;
  --white_color: #fff;
  --white_color-rgb: 255, 255, 255;
  --color_theme_text-rgb: 33, 33, 33;
  --menuhover_text_color: #000;
  --menuhover_text_color-rgb: 0, 0, 0;
  --drop_menu_hover_color-rgb: 255, 255, 255;
  --activedate_color-rgb: 137 171 246;
  --progress_ads_bg-rgb: 246, 247, 248;
  --progress_sloping_line: #f9fbfc;
  --color_notification_fon: #e5e7e9;
  --btn_bg_color: #fff;
  --time_notify: timeOut 1.5s linear 1 forwards;
  --free_tarif_bg: #fff;
  --input_color: #fff;
  --user_color: #fff;
  --hover_color_rgb: 255, 255, 255;
  --font_nonactive: #ccc;
  color-scheme: light;
}

.dark {
  --main_gen: #121212;
  --main-rgb: 43, 46, 56;
  --main_font: #e5e7e9;
  --d: rgb(229, 231, 233);
  --gray_font: #acacac;
  --window_bg: #22242c;
  --main_block_gen: #1d1d1d;
  --window_bg-rgb: 34, 36, 44;
  --black_color: #fff;
  --black_color-rgb: 255, 255, 255;
  --white_color: #000;
  --white_color-rgb: 0, 0, 0;
  --color_theme_text-rgb: 255, 255, 255;
  --menuhover_text_color: #000;
  --menuhover_text_color-rgb: 0, 0, 0;
  --drop_menu_hover_color-rgb: 243, 245, 246;
  --activedate_color-rgb: 222 255 131;
  --progress_ads_bg-rgb: 28, 28, 28;
  --progress_sloping_line: #353535;
  --color_notification_fon: #22242f;
  --btn_bg_color: #121212;
  --free_tarif_bg: #121212;
  --input_color: #292929;
  --user_color: #1d1d1d;
  --hover_color_rgb: 41, 41, 41;
  --font_nonactive: #1d1d1d;
  color-scheme: dark;
}

@font-face {
  font-family: "Manrope";
  src: url(./../fonts/Manrope.ttf);
}

@font-face {
  font-family: "Manrope-extrabold";
  src: url(./../fonts/Manrope-ExtraBold.ttf);
}

* {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

html,
body {
  background-color: var(--main_gen);
  margin: 0;
  padding: 0;
}

button:focus-visible {
  outline: 2px solid #4a90e2 !important;
  outline: -webkit-focus-ring-color auto 5px !important;
}
a {
  text-decoration: none;
}

.PC {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  min-width: 1440px;
  height: 100vh;
}

.PC .div {
  width: 100vw;
  min-width: 1440px;
  height: auto;
  position: relative;
}

.PC .overlap-group {
  position: absolute;
  width: 283px;
  height: auto;
  top: 16px;
  left: 16px;
  border-radius: 28px;
  bottom: 16px;
}

.PC .menu {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 283px;
  min-height: 100%;
  height: auto;
  align-items: center;
  padding: 44px 20px 24px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--main_block_gen);
  border-radius: 28px;
  box-shadow: 0px 20px 64px -32px #00000008;
}

.menu .podmenu {
  width: 243px;
}

.podmenu .project_list {
  margin-top: 20px;
  width: 100%;
}

.project_list .img_project {
  width: 18px;
  height: 16px;
  margin-top: -4px;
}

.project_list .project_id {
  margin-bottom: 10px;
}

.project_list .project_id .project_id_hover {
  padding: 7px 7px 7px 27px;
  border-radius: 28px;
}

.project_list .project_id .project_id_hover:hover {
  background-color: rgba(255, 255, 255, 255);
  border-radius: 28px;
}

.project_id_text {
  cursor: pointer;
}

.subproject_id {
  margin-bottom: 4px;
  margin-top: 20px;
}

.subproject_name_text_1 {
  cursor: pointer;
}

/* .text_count_project_2 {
  position: absolute;
  background-color: #89abf6;
  border-radius: 100px;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-right: 8px;
} */

.text_count_project_1 {
  display: flex;
  justify-content: flex-end;
}

.text_count_project_1 .button_names_textbg {
  display: flex;
  min-width: 24px;
  width: max-content;
  height: 24px;
  background-color: #89abf6;
  padding: 4px 8px 4px 8px;
  align-items: center;
  border-radius: 100px;
  cursor: pointer;
}

.text_count_project_1 .button_names_textbg .button_names_text {
  font-family: "Manrope", Helvetica;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  color: #ffffff;
  text-align: center;
  cursor: pointer;
}

.text_count_project {
  padding: 4px 8px 4px 8px;
  font-family: "Manrope", Helvetica;
  font-weight: 600;
  font-size: 12px;
  color: #ffffff;
  background-color: #89abf6;
  border-radius: 100px;
}

.project_list .name_project {
  color: #575757;
  font-family: "Manrope", Helvetica;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap; /* Текст не переносится */
  overflow: hidden; /* Обрезаем всё за пределами блока */
  text-overflow: ellipsis;
  cursor: pointer;
}

.PC .text-wrapper {
  width: 106px;
  font-family: "Manrope", Helvetica;
  font-weight: 800;
  color: rgb(var(--black_color-rgb));
  font-size: 24px;
  letter-spacing: 0.24px;
  line-height: normal;
  margin-left: auto;
  margin-right: auto;
}

.PC .frame {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  margin-bottom: 35px;
}

.PC .frame-2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.PC .project {
  display: flex;
  margin-top: 30px;
  height: 46px;
  align-items: center;
  gap: 16px;
  padding: 6px 10px 6px 20px;
  position: relative;
  align-self: stretch;
  width: 100%;
  overflow: hidden;
  background-color: #ffffff;
  border-radius: 100px;
}

.PC .icon,
.icon-settings,
.icon-contact,
.icon_exit {
  position: relative;
  width: 22px;
  height: 22px;
  z-index: 1;
}

.PC .text-wrapper-2 {
  z-index: 0;
  text-shadow: 0px 0px 16px #ffffff;
  font-family: "Inter", Helvetica;
  color: rgb(0, 0, 0);
  line-height: 20px;
  position: relative;
  flex: 1;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0;
}

.PC .frame-3 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 0px 0px 0px 20px;
  position: relative;
  flex: 0 0 auto;
}

.PC .view {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  position: relative;
  flex: 0 0 auto;
}

.PC .img {
  position: relative;
  width: 20px;
  height: 20px;
}

.PC .text-wrapper-3 {
  width: fit-content;
  margin-top: -0.5px;
  font-weight: 500;
  color: #575757;
  font-size: 14px;
  letter-spacing: 0;
  line-height: normal;
  position: relative;
  font-family: "Manrope", Helvetica;
}

.PC .div-2 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 0px 0px 0px 46px;
  position: relative;
  flex: 0 0 auto;
}

.PC .text-wrapper-4 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "Manrope", Helvetica;
  font-weight: 700;
  color: rgb(var(--black_color-rgb));
  font-size: 14px;
  letter-spacing: 0.07px;
  line-height: normal;
}

.PC .text-wrapper-5 {
  position: relative;
  width: fit-content;
  font-family: "Manrope", Helvetica;
  font-weight: 500;
  color: #575757;
  font-size: 14px;
  letter-spacing: 0;
  line-height: normal;
}

.PC .text-wrapper-6 {
  width: fit-content;
  margin-top: -1px;
  font-weight: 500;
  color: #575757;
  font-size: 14px;
  letter-spacing: 0;
  line-height: normal;
  position: relative;
  font-family: "Manrope", Helvetica;
}

.PC .view-2,
.view-3,
.view-4,
.telegram {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0px 20px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  border-radius: 12px;
}

.btn_exit {
  color: #acacac;
  cursor: pointer;
}

.btn_exit:hover {
  color: #ec5159;
}

.PC .icon-2 {
  position: relative;
  width: 26px;
  height: 22px;
  z-index: 1;
}

.PC .text-wrapper-7 {
  flex: 1;
  z-index: 0;
  font-weight: 500;
  color: #acacac;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 20px;
  position: relative;
  font-family: "Manrope", Helvetica;
  cursor: pointer;
}

.PC .text-wrapper-7:hover {
  color: #575757;
}

.PC .icon-3,
.icon-help {
  position: relative;
  width: 24px;
  height: 24px;
  z-index: 1;
}

.PC .line {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 1px;
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgb(var(--black_color-rgb)) 0%,
    rgba(0, 0, 0, 0) 100%
  );
  opacity: 0.24;
}

.PC .text-wrapper-8 {
  flex: 1;
  z-index: 0;
  font-weight: 500;
  color: #acacac;
  font-size: 14px;
  letter-spacing: 0;
  line-height: normal;
  position: relative;
  font-family: "Manrope", Helvetica;
  cursor: pointer;
}

.PC .text-wrapper-8:hover {
  color: #575757;
}

.PC .frame-4 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.PC .view-5 {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: var(--free_tarif_bg);
  border-radius: 28px;
  margin-bottom: 16px;
}

.PC .view-5_pro {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 20px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: var(--free_tarif_bg);
  border-radius: 28px;
  margin-bottom: 16px;
}

.PC .frame-5 {
  display: flex;
  flex-direction: column;
  align-items: center;

  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.PC .frame-6 {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  position: relative;
  flex: 0 0 auto;
}

.PC .icon-king {
  display: flex;
  flex-direction: column;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  position: relative;
}

.PC .icon-4 {
  position: relative;
  width: 48px;
  height: 48px;
}

.PC .text-wrapper-9 {
  width: 169px;
  font-weight: 700;
  color: rgb(var(--black_color-rgb));
  font-size: 18px;
  text-align: center;
  letter-spacing: 0;
  line-height: 21.6px;
  position: relative;
  font-family: "Manrope", Helvetica;
  margin-bottom: 12px;
}

.PC .text {
  align-self: stretch;
  font-weight: 400;
  color: rgb(var(--black_color-rgb));
  font-size: 12px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  position: relative;
  font-family: "Manrope", Helvetica;
}

.PC .button {
  justify-content: center;
  padding: 16px 54px;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: rgb(var(--black_color-rgb));
  border-radius: 100px;
  display: flex;
  align-items: center;
  position: relative;
  all: unset;
  box-sizing: border-box;
}

.PC .text-wrapper-10 {
  width: fit-content;
  margin-top: -1px;
  font-weight: 600;
  color: #ffffff;
  font-size: 14px;
  text-align: center;
  letter-spacing: 0;
  line-height: 16.8px;
  white-space: nowrap;
  position: relative;
  font-family: "Manrope", Helvetica;
}

.PC .text-wrapper-11 {
  flex: 1;
  z-index: 0;
  font-weight: 600;
  color: #ec5159;
  font-size: 14px;
  letter-spacing: 0;
  line-height: normal;
  position: relative;
  font-family: "Manrope", Helvetica;
  margin-bottom: 24px;
}

.PC .frame-wrapper {
  display: inline-flex;
  height: 24px;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  position: absolute;
  top: 147px;
  left: auto;
  right: 20px;
  background-color: #89abf6;
  border-radius: 100px;
}

.PC .div-wrapper {
  display: inline-flex;
  align-items: center;
  position: relative;
  flex: 0 0 auto;
}

.PC .text-wrapper-12 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "Manrope", Helvetica;
  font-weight: 600;
  color: #ffffff;
  font-size: 12px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.PC .icon-5 {
  display: inline-flex;
  height: 24px;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  position: absolute;
  top: 295px;
  left: auto;
  right: 20px;
  background-color: #89abf6;
  border-radius: 100px;
}

.PC .view-progress {
  display: flex;
  flex-direction: column;
  width: calc(100vw - 329px - 40px);
  min-width: calc(1440px - 329px - 40px);
  height: 84px;
  align-items: flex-end;
  gap: 60px;
  padding: 26px 42px 8px 42px;
  position: absolute;
  top: 169px;
  left: 329px;
  background-color: var(--main_block_gen);
  border-radius: 28px;
  box-shadow: 0px 20px 64px -32px rgba(0, 0, 0, 0.03);
  margin-bottom: 30px;
}

.PC .view-6 {
  display: flex;
  flex-direction: column;
  width: calc(100vw - 329px - 40px);
  min-width: calc(1440px - 329px - 40px);
  align-items: flex-end;
  gap: 60px;
  padding: 42px 42px 38px;
  position: absolute;
  top: 283px;
  left: 329px;
  background-color: var(--main_block_gen);
  border-radius: 28px;
  box-shadow: 0px 20px 64px -32px rgba(0, 0, 0, 0.03);
  opacity: 1%;
}

.PC .project_block_bg {
  display: flex;
  flex-direction: column;
  width: 587px;
  align-items: flex-end;
  gap: 60px;
  padding: 42px 42px 42px 38px;
  position: absolute;
  top: 178px;
  left: 329px;
  background-color: var(--main_block_gen);
  border-radius: 28px;
  box-shadow: 0px 30px 64px -32px rgba(0, 0, 0, 0.03);
}

.PC .project_block_bg .button-2-1 {
  display: flex;
  width: max-content;
  padding: 16px 54px;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  background-color: rgb(0, 0, 0);
  border-radius: 100px;
  cursor: pointer;
}

.text-wrapper-login {
  font-family: "Manrope", Helvetica;
  font-weight: 800;
  color: rgb(var(--black_color-rgb));
  font-size: 48px;
  letter-spacing: 0.24px;
  line-height: normal;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-bottom: 40px;
  transform: translateZ(0);
  -webkit-font-smoothing: subpixel-antialiased;
}

.login_window {
  width: 587px;
  padding: 42px 42px 42px 38px;
  background-color: rgb(var(--window_bg-rgb));
  border-radius: 28px;
  box-shadow: 0px 30px 64px -32px rgba(0, 0, 0, 0.03);
}

.login_window .login_field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0px;
  position: relative;
  border-radius: 4px;
  margin-bottom: 20px;
}

.login_window label {
  color: rgb(var(--black_color-rgb));
  font-feature-settings:
    "clig" off,
    "liga" off;
  font-family: "Manrope", Helvetics;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin-bottom: 10px;
}

.login_window .login_field input {
  color: #acacac;
  font-family: "Manrope", Helvetics;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.09px;

  float: left;
  width: 704px;
  height: 60px;
  padding: 18px 26px;
  align-items: center;
  gap: 12px;
  flex: 1 0 0;
  border-radius: 100px;
  border: none;
  outline: none;
  background: #fff;
}

.login_window .forgot_password {
  color: rgb(var(--black_color-rgb));
  font-feature-settings:
    "clig" off,
    "liga" off;
  font-family: "Manrope", Helvetics;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 20px;
  cursor: pointer;
}

.login_window .button-2-1 {
  display: flex;
  width: 100%;
  padding: 16px 54px;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  background-color: rgb(var(--black_color-rgb));
  border-radius: 100px;
  cursor: pointer;
}

.login_window .text-wrapper-141 {
  width: fit-content;
  font-weight: 400;
  color: #ffffff;
  font-size: 14px;
  text-align: center;
  letter-spacing: 0.35px;
  line-height: 16.8px;
  position: relative;
  font-family: "Manrope", Helvetica;
}

.privacy_text {
  width: 90%;
  margin-left: 50%;
  transform: translateX(-50%);
}

.privacy_text p {
  text-align: center;
  font-family: "Manrope", Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #000;
  opacity: 0.6;
  margin: 0;
  padding: 0;
}

.privacy_text a {
  text-align: center;
  font-family: "Manrope", Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #000;
  margin: 0;
  padding: 0;
  text-decoration: underline;
}

.PC .progress-bar {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.PC .group-wrapper {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  flex: 0 0 auto;
  display: flex;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.PC .group {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 8px;
  background-color: var(--input_color);
  border-radius: 6px;
}

.PC .rectangle {
  width: 1%;
  height: 8px;
  background-color: #deff83;
  box-shadow: 0 4px 4px 0 rgba(222, 255, 131, 0.2);
  border-radius: 6px;
}

.PC .progress-bar-2 {
  height: 32px;
  align-items: center;
  justify-content: space-between;
  border-radius: 8px;
  display: flex;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.PC .steps {
  padding: 12px 14px 12px 0px;
  border-radius: 8px;
  display: inline-flex;
  height: 32px;
  align-items: center;
  justify-content: center;
  position: relative;
  flex: 0 0 auto;
}

.PC .text-2_steps {
  width: fit-content;
  margin-top: -5px;
  margin-bottom: -3px;
  font-weight: 600;
  color: rgb(var(--black_color-rgb));
  font-size: 14px;
  letter-spacing: 0;
  line-height: normal;
  position: relative;
  font-family: "Manrope", Helvetica;
  cursor: pointer;
}

.PC .icon-6 {
  float: right;
  width: 22px;
  height: 22px;
}

.PC .steps-2 {
  padding: 12px 14px;
  border-radius: 100px;
  display: inline-flex;
  height: 32px;
  align-items: center;
  justify-content: center;
  position: relative;
  flex: 0 0 auto;
}

.PC .text-3_steps {
  width: fit-content;
  margin-top: -5px;
  margin-bottom: -3px;
  font-weight: 500;
  color: #acacac;
  font-size: 14px;
  letter-spacing: 0;
  line-height: normal;
  position: relative;
  font-family: "Manrope", Helvetica;
  cursor: pointer;
}

.PC .text-3_steps:hover {
  color: #575757;
  font-weight: 600;
}

.PC .steps-3 {
  gap: 8px;
  padding: 12px 14px;
  border-radius: 100px;
  display: inline-flex;
  height: 32px;
  align-items: center;
  justify-content: center;
  position: relative;
  flex: 0 0 auto;
}

.PC .steps-4 {
  gap: 8px;
  padding: 12px 1px 12px 14px;
  border-radius: 100px;
  display: inline-flex;
  height: 32px;
  align-items: center;
  justify-content: center;
  position: relative;
  flex: 0 0 auto;
}

.PC .frame-7 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 34px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.PC .frame-8 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 34px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.PC .text-wrapper-13 {
  width: fit-content;
  margin-top: -1px;
  font-weight: 700;
  color: var(--gray_font);
  font-size: 32px;
  letter-spacing: 0;
  line-height: normal;
  position: relative;
  font-family: "Manrope", Helvetica;
}

.PC .frame-9 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.PC .frame-10 {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.PC .frame-11 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.PC .text-wrapper-14 {
  margin-top: -1px;
  font-family: "Manrope", Helvetica;
  color: #575757;
  line-height: normal;
  position: relative;
  flex: 1;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0;
}

.PC .vector {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 1px;
  margin-bottom: -0.5px;
  object-fit: cover;
}

.PC .frame-12 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.PC .frame-13 {
  display: flex;
  align-items: center;
  gap: 40px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.PC .frame-14 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 0px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.PC .text-wrapper-15 {
  flex: 1;
  margin-top: -1px;
  font-weight: 400;
  color: var(--main_font);
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
  position: relative;
  font-family: "Manrope", Helvetica;
}

select {
  overflow: hidden;
  background-color: transparent !important;
  border: none;
}

option {
  margin-top: 20px;
  flex: 1;
  font-weight: 400;
  color: var(--main_font);
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
  position: relative;
  font-family: "Manrope", Helvetica;
}

.PC .frame-15 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 0px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.PC .text-wrapper-16 {
  flex: 1;
  font-weight: 400;
  color: var(--main_font);
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
  position: relative;
  font-family: "Manrope", Helvetica;
}

.PC .frame-16 {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 2px 0px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.PC .project-2 {
  position: absolute;
  width: 331px;
  height: 40px;
  top: -7px;
  left: -19px;
  background-color: #ffffff;
  border-radius: 100px;
}

.PC .frame-17 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0px;
  position: relative;
  flex: 1;
  flex-grow: 1;
  border-radius: 4px;
}

.PC .project-3 {
  position: absolute;
  width: 331px;
  height: 40px;
  top: -5px;
  left: -20px;
  background-color: #ffffff;
  border-radius: 100px;
}

.PC .text-4 {
  flex: 1;
  font-weight: 400;
  color: var(--main_font);
  font-size: 14px;
  letter-spacing: 0;
  line-height: normal;
  position: relative;
  font-family: "Manrope", Helvetica;
}

.PC .project-4 {
  position: absolute;
  width: 331px;
  height: 40px;
  top: -7px;
  left: calc(100vw / 1.97);
  background-color: #ffffff;
  border-radius: 100px;
}

.PC .text-wrapper-17 {
  flex: 1;
  font-weight: 700;
  color: var(--main_font);
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
  position: relative;
  font-family: "Manrope", Helvetica;
}

.PC .text-5 {
  flex: 1;
  font-weight: 400;
  color: var(--main_font);
  font-size: 14px;
  letter-spacing: 0;
  line-height: normal;
  position: relative;
  font-family: "Manrope", Helvetica;
}

.PC .button-wrapper {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 10px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  right: 0px;
}

.PC .button-2 {
  justify-content: flex-end;
  gap: 12px;
  flex: 1;
  flex-grow: 1;
  display: flex;
  align-items: center;
  position: relative;
}

.PC .button-2-1 {
  display: flex;
  width: 100%;
  height: 60px;
  padding: 16px 54px;
  background-color: rgb(137, 171, 246);
  align-items: center;
  justify-content: center;
  border-radius: 100px;
  cursor: pointer;
}

.PC .button-2-1:hover {
  background-color: rgb(125, 163, 245);
}

.PC .text-wrapper-141 {
  width: fit-content;
  font-weight: 600;
  color: #ffffff;
  font-size: 14px;
  text-align: center;
  letter-spacing: 0;
  line-height: 16.8px;
  white-space: nowrap;
  position: relative;
  font-family: "Manrope", Helvetica;
}

.PC .free_button {
  display: flex;
  width: 211px;
  height: 49px;
  padding: 16px 54px;
  background-color: var(--main_font);
  align-items: center;
  justify-content: center;
  border-radius: 100px;
}

.PC .free_button_text {
  color: #ffffff;
  text-align: center;
  font-family: "Manrope", Helvetica;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
}

.PC .frame-101 {
  display: flex;
  height: 60px;
  align-items: center;
  gap: 12px;
  padding: 18px 26px;
  position: relative;
  flex: 1;
  flex-grow: 1;
  background-color: #ffffff;
  border-radius: 100px;
}

.PC .button-3 {
  width: 48px;
  height: 48px;
  justify-content: center;
  gap: 10px;
  padding: 11px 24px;
  background-color: #ffffff;
  border-radius: 100px;
  box-shadow: 0px 4px 24px #ffffff4c;
  display: flex;
  align-items: center;
  position: relative;
}

.PC .icon-wrapper {
  position: relative;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  margin-right: -12px;
  border-radius: 24px;
  transform: rotate(-180deg);
}

.PC .icon-7 {
  position: absolute;
  width: 22px;
  height: 22px;
  top: 1px;
  left: 1px;
  transform: rotate(180deg);
}

.PC .button-4 {
  width: 48px;
  height: 48px;
  justify-content: center;
  gap: 10px;
  padding: 11px 24px;
  background-color: var(--main_font);
  border-radius: 100px;
  display: flex;
  align-items: center;
  position: relative;
}

.PC .container_grid {
  display: grid;
  gap: 50px;
  width: 100%;

  /* ! */
  grid-template-columns: 25% 25% 25% 25%;
}

.PC .list {
  flex: 1;
  margin-top: -1px;
  font-weight: 400;
  color: var(--main_font);
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
  position: relative;
  font-family: "Manrope", Helvetica;
}

.PC .list ul {
  padding-left: 0;
  list-style: none;
}

.PC .list li {
  margin-top: 20px;
  cursor: pointer;
}

.PC .list ul li:hover {
  background: #ffffff;
}

.PC .project_name input {
  color: #acacac;
  font-family: "Manrope", Helvetica;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.09px;

  float: left;
  width: 100%;
  height: 60px;
  padding: 18px 26px;
  align-items: center;
  gap: 12px;
  flex: 1 0 0;
  border-radius: 100px;
  border: none;
  outline: none;
  background: var(--input_color);
  margin-bottom: 16px;
}

.btn_add a {
  display: flex;
  width: 211px;
  padding: 16px 54px;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  border-radius: 100px;
  background: #000;
}

.PC .header {
  display: flex;
  width: 1071px;
  width: calc(100vw - 329px - 40px);
  align-items: center;
  gap: 78px;
  position: absolute;
  top: 42px;
  left: 329px;
  background-color: transparent;
}

.PC .frame-18 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.PC .text-wrapper-18 {
  width: 587px;
  margin-top: -1px;
  margin-right: -50px;
  font-weight: 700;
  color: var(--main_font);
  font-size: 40px;
  letter-spacing: 0.2px;
  line-height: normal;
  position: relative;
  font-family: "Manrope", Helvetica;
}

.PC .p {
  position: relative;
  align-self: stretch;
  font-family: "Manrope", Helvetica;
  font-weight: 500;
  color: var(--gray_font);
  font-size: 16px;
  letter-spacing: 0.16px;
  line-height: normal;
}

.PC .p-createproject {
  color: var(--main_font);
  font-feature-settings:
    "clig" off,
    "liga" off;
  font-family: "Manrope", Helvetica;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.PC .frame-19 {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  position: relative;
  flex: 0 0 auto;
}

.PC .frame-20 {
  display: flex;
  width: 238px;
  align-items: center;
  gap: 14px;
  padding: 5px 20px 5px 5px;
  position: relative;
  background-color: #ffffff;
  border-radius: 100px;
  box-shadow: 0px 30px 64px -32px rgba(0, 0, 0, 0.03);
  backdrop-filter: blur(160px);
  -webkit-backdrop-filter: blur(160px);
}

.PC .img-wrapper {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px;
  position: relative;
  flex: 0 0 auto;
  background-color: rgb(var(--window_bg-rgb));
  border-radius: 100px;
}

.PC .frame-21 {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  position: relative;
  flex: 0 0 auto;
}

.PC .frame-22 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  position: relative;
  flex: 0 0 auto;
}

.PC .text-wrapper-19 {
  width: fit-content;
  margin-top: -1px;
  font-weight: 500;
  color: #acacac;
  font-size: 12px;
  letter-spacing: 0;
  line-height: normal;
  position: relative;
  font-family: "Manrope", Helvetica;
}

.PC .frame-23 {
  display: flex;
  flex-direction: column;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color: #ffffff;
  border-radius: 100px;
  box-shadow: 0px 30px 64px -32px rgba(0, 0, 0, 0.03);
}

.PC .icon-8 {
  display: flex;
  width: 24px;
  height: 18px;
  align-items: center;
  justify-content: center;
  padding: 4px 8px 5px;
  position: absolute;
  top: -6px;
  left: 30px;
  background-color: #ec5159;
  border-radius: 100px;
}

.PC .element-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex: 1;
  align-self: stretch;
  flex-grow: 1;
}

.PC .element {
  margin-bottom: -1.5px;
  margin-left: -2.5px;
  margin-right: -2.5px;
  line-height: 14.4px;
  white-space: nowrap;
  position: relative;
  width: fit-content;
  font-family: "Manrope", Helvetica;
  font-weight: 600;
  color: #ffffff;
  font-size: 12px;
  text-align: center;
  letter-spacing: 0;
}

.PC .frame-24 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 16px 5px 5px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--user_color);
  border-radius: 100px;
  box-shadow: 0px 30px 64px -32px rgba(0, 0, 0, 0.03);
  cursor: pointer;
}

.PC .img-2 {
  width: 38px;
  height: 38px;
  position: relative;
  flex: 0 0 auto;
  border-radius: 100px;

  background-position: 50% 50%;
}

.PC .text-wrapper-20 {
  width: fit-content;
  margin-top: -1px;
  font-weight: 500;
  color: var(--main_font);
  font-size: 14px;
  letter-spacing: 0;
  line-height: normal;
  position: relative;
  font-family: "Manrope", Helvetica;
}

.PC .icon-9 {
  position: relative;
  width: 16px;
  height: 16px;
}

.PC .frame-24 .img-svg path {
  fill: var(--main_font);
}

.button_names,
.button_projectnames,
.button_price,
.button_contactname,
.button_contactphone {
  display: -moz-inline-stack; /* ← Firefox 2 backwards compatibility */
  display: inline-block;
  width: max-content;
  padding: 12px 20px;
  background-color: var(--input_color);
  border-radius: 100px;
  margin-right: 14px;
  margin-bottom: 14px;
  cursor: pointer;
}

.button_names:hover {
  background-color: #89abf6;
}

.button_names:hover .button_names_text {
  color: #fff;
}

.button_names_text {
  display: -moz-inline-stack; /* ← Firefox 2 backwards compatibility */
  display: inline-block;

  color: var(--main_font);
  font-family: "Manrope", Helvetica;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 18px; /* 112.5% */
}

.button_names {
  cursor: pointer;
}

.button_names img,
.button_projectnames img {
  display: -moz-inline-stack; /* ← Firefox 2 backwards compatibility */
  display: inline-block;
  margin-left: 14px;
}

.btn_add_description {
  display: -moz-inline-stack; /* ← Firefox 2 backwards compatibility */
  display: inline-block;
  width: max-content;
  margin-top: 10px;
  margin-right: 10px;
  margin-bottom: 20px;
  padding: 12px 20px;
  background-color: #fff;
  border-radius: 100px;
  cursor: pointer;
}

.btn_text_description {
  display: -moz-inline-stack; /* ← Firefox 2 backwards compatibility */
  display: inline-block;
  color: var(--gray_font);
  font-family: "Manrope", Helvetica;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 14px;
}

.btn_img_description {
  display: -moz-inline-stack; /* ← Firefox 2 backwards compatibility */
  display: inline-block;
  width: 34px;
  height: 34px;
  margin-right: 14px;
}

#list_btn_description {
  height: 421px;
  overflow: auto;
}

/* .button_descriptions {
	display: -moz-inline-stack;
	display: inline-block;
	width: 100%;
	margin-bottom: 14px;
	padding: 12px 20px;
	background-color: #fff;
	border-radius: 100px;
	cursor: pointer;
} */

/* .button_descriptions:hover {
	display: -moz-inline-stack;
	display: inline-block;
	background-color: #89abf6;
}

.button_descriptions:hover .button_names_text {
	display: -moz-inline-stack;
	display: inline-block;
	color: #fff;
}

.button_descriptions .button_names_text {
	display: -moz-inline-stack;
	display: inline-block;

	color: rgb(0, 0, 0);
	font-family: 'Manrope', Helvetica;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 18px;
	cursor: pointer;
}

.button_descriptions img {
	display: -moz-inline-stack;
	display: inline-block;
	float: right;
	cursor: pointer;
} */

.custom-file-input {
  color: transparent;
}
.custom-file-input::-webkit-file-upload-button {
  visibility: hidden;
}

.bg_img {
  position: relative;
}

.btn_add_photo input[type="file"] {
  display: none; /* скрываем input file */
}

/* задаем стили кнопки выбора файла*/

.btn_add_photo {
  position: relative;
  overflow: hidden;
  width: 195px;
  height: 48px;
  background: #fff;
  border-radius: 100px;
  color: #fff;
}

.btn_add_photo:hover {
  background: #fff;
}

/* Растягиваем label на всю область блока .file-upload */

.btn_add_photo label {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  margin: 7px 20px 7px 7px;
}

.btn_add_photo img {
  width: 34px;
  height: 34px;
}

/* стиль текста на кнопке*/

.btn_add_photo span {
  margin-left: 14px;
  color: rgb(0, 0, 0);
  font-family: "Manrope", Helvetics;
  font-size: 14px;
  line-height: 14px;
  font-weight: 600;
}

#list_photo {
  margin-bottom: 20px;
}

.list_photo_style {
  display: block;
  width: 150px;
  height: 150px;
  border-radius: 12px;
}

.list_photo_style:hover {
  opacity: 0.8;
}

.container_img {
  position: relative;
  cursor: pointer;
}

.middle {
  transition: 0.5s ease;
  opacity: 1;
  position: absolute;
  transform: translate(0%, -100%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.container_img:hover .list_photo_style {
  /*opacity: 0.5; */
}

.text228 {
  margin: 0;
  padding: 0;
  width: 150px;
  height: 150px;
  border-radius: 12px;
  background: rgba(137, 171, 246, 0) no-repeat;
}

.container_img:hover .text228 {
  background: rgba(137, 171, 246, 0.5) no-repeat;
}

.text228 .progress_center {
  position: absolute;
  top: calc(50% - 5px);
  align-items: center;
}
.text228 .progress_center .progress_photo {
  margin-left: 5px;
  width: 1px;
  height: 5px;
  background-color: #deff83;
  border-radius: 6px;
}

.union {
  background: url(./../img/CheckMark.svg) center no-repeat;
  width: 32px;
  height: 32px;
}

/* .union {
	background: url(./../img/CheckMark_1.svg) center no-repeat;
	width: 32px;
	height: 32px;
} */

.photo_list_fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 50;
}

.container_img .text_nameslot {
  color: var(--main_font);
  font-family: "Manrope", Helvetics;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
}

.container_img .text_countimg_slot {
  color: gray;
  font-family: "Manrope", Helvetics;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
}

.button_video {
  display: -moz-inline-stack; /* ← Firefox 2 backwards compatibility */
  display: inline-block;
  width: max-content;
  margin-top: 10px;
  margin-right: 10px;
  padding: 12px 20px;
  background-color: var(--input_color);
  border-radius: 100px;
  cursor: pointer;
}

.button_video:hover {
  display: -moz-inline-stack; /* ← Firefox 2 backwards compatibility */
  display: inline-block;
  width: max-content;
  margin-top: 10px;
  padding: 12px 20px;
  background-color: #89abf6;
  border-radius: 100px;
}

.button_video:hover .button_names_text {
  display: -moz-inline-stack; /* ← Firefox 2 backwards compatibility */
  display: inline-block;

  color: #fff;
  font-family: "Manrope", Helvetica;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 18px; /* 112.5% */
}

.button_video img {
  display: -moz-inline-stack; /* ← Firefox 2 backwards compatibility */
  display: inline-block;
  margin-left: 14px;
}

.button_price:hover {
  background-color: #89abf6;
}

.button_price:hover .button_names_text {
  color: #fff;
}

.button_price img {
  display: -moz-inline-stack; /* ← Firefox 2 backwards compatibility */
  display: inline-block;
  margin-left: 14px;
}

.btn_frame_city {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0px;
  position: relative;
  border-radius: 4px;
  margin-bottom: 20px;
  cursor: pointer;
}

.btn_city_sort {
  position: absolute;
  background-color: #fff;
  width: 100%;
  height: 40px;
  top: -5px;
  left: -17px;
  border-radius: 100px;
  padding: 6px 10px 6px 20px;
}

.btn_frame_city .btn_city_text {
  position: relative;
  flex: 1;
  margin-top: -1px;
  font-family: "Manrope", Helvetics;
  font-weight: 400;
  color: rgb(0, 0, 0);
  letter-spacing: 0;
  line-height: normal;
}

.btn_frame_city .icon_arrow_city {
  position: relative;
  width: 22px;
  height: 22px;
  right: 25px;
}

.btn_frame_city_sort {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0px;
  position: relative;
  border-radius: 4px;
  margin-bottom: 20px;
  cursor: pointer;
}

.btn_frame_city_sort .btn_city_text {
  position: relative;
  flex: 1;
  margin-top: -1px;
  font-family: "Manrope", Helvetics;
  font-weight: 400;
  color: rgb(0, 0, 0);
  letter-spacing: 0;
  line-height: normal;
}

.btn_frame_city_sort .icon_arrow_city {
  position: relative;
  width: 22px;
  height: 22px;
  right: 25px;
}

.btn_frame_region {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0px;
  position: relative;
  border-radius: 4px;
  margin-bottom: 20px;
}

.btn_city_text {
  position: relative;
  flex: 1;
  margin-top: -1px;
  font-family: "Manrope", Helvetics;
  font-weight: 400;
  color: rgb(0, 0, 0);
  letter-spacing: 0;
  line-height: normal;
}

.btn_frame_region .btn_city_text {
  position: relative;
  flex: 1;
  margin-top: -1px;
  font-family: "Manrope", Helvetics;
  font-weight: 400;
  color: rgb(0, 0, 0);
  letter-spacing: 0;
  line-height: normal;
}

.btn_frame_region .icon_arrow_city {
  position: relative;
  width: 22px;
  height: 22px;
  right: 25px;
}

#select_category_2 {
  height: 500px;
  overflow: auto;
}

#select_category_3 {
  height: 500px;
  overflow: auto;
}

#select_category_4 {
  height: 500px;
  overflow: auto;
}

.btn_frame_category {
  margin-bottom: 14px;
  border-radius: 100px;
  padding: 6px 10px 6px 20px;
  background-color: rgba(var(--hover_color_rgb), 0);
  cursor: pointer;
}

.active_category {
  background-color: rgba(137, 171, 246, 1);
}

.active_category:hover {
  background-color: rgba(137, 171, 246, 1);
}

.active_category_text {
  color: #fff;
}

.btn_frame_category:hover {
  background-color: rgba(var(--hover_color_rgb), 1);
}

.btn_frame_category .button_category_text {
  font-family: "Manrope", Helvetics;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  color: var(--main_font);
  white-space: nowrap; /* Текст не переносится */
  overflow: hidden; /* Обрезаем всё за пределами блока */
  text-overflow: ellipsis;
}

.btn_frame_category:hover .button_category_text {
  color: var(--main_font);
}

.btn_frame_category .icon_arrow_city {
  width: 22px;
  height: 22px;
}

.btn_frame_federal {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0px;
  position: relative;
  border-radius: 4px;
  margin-bottom: 20px;
}

.btn_frame_federal .btn_city_text {
  position: relative;
  flex: 1;
  margin-top: -1px;
  font-family: "Manrope", Helvetics;
  font-weight: 400;
  color: rgb(0, 0, 0);
  letter-spacing: 0;
  line-height: normal;
}

.btn_frame_federal .icon_arrow_city {
  position: relative;
  width: 22px;
  height: 22px;
  right: 25px;
}

.button_city_frame {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0px;
  position: relative;
  border-radius: 4px;
  margin-bottom: 20px;
  cursor: pointer;
}

.button_city_frame .button_city {
  position: absolute;
  background-color: rgb(255, 255, 255);
  width: 100%;
  height: 40px;
  top: -5px;
  left: -17px;
  border-radius: 100px;
  padding: 6px 10px 6px 20px;
  cursor: pointer;
}

.button_city_frame .button_city:hover {
  background-color: rgb(137, 171, 246);
}

.button_city_frame .button_city::after {
  content: "";
  display: inline-block;
  height: 100%;
  width: 100%;
  border-radius: 100px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: all 0.4s;
}

.button_city_frame .button_city:hover::after {
  transform: scaleX(1.4) scaleY(1.6);
  opacity: 0;
}

.btn-animated {
  animation: moveInBottom 5s ease-out;
  animation-fill-mode: backwards;
}

@keyframes moveInBottom {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }

  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

.button_city_frame .button_names_text {
  position: relative;
  flex: 1;
  margin-top: -1px;
  font-family: "Manrope", Helvetics;
  font-weight: 400;
  color: rgb(0, 0, 0);
  letter-spacing: 0;
  line-height: normal;
}

.button_city_frame .img2332 {
  position: relative;
  width: 22px;
  height: 22px;
  right: 25px;
}

.button_city_frame_sort {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0px;
  position: relative;
  border-radius: 4px;
  margin-bottom: 20px;
}

.button_city_frame_sort .button_city {
  position: absolute;
  background-color: rgb(255, 255, 255);
  width: 100%;
  height: 40px;
  top: -5px;
  left: -17px;
  border-radius: 100px;
  padding: 6px 10px 6px 20px;
}

.button_city_frame_sort .button_names_text {
  position: relative;
  flex: 1;
  margin-top: -1px;
  font-family: "Manrope", Helvetics;
  font-weight: 400;
  color: rgb(0, 0, 0);
  letter-spacing: 0;
  line-height: normal;
}

.button_city_frame_sort .img2332 {
  position: relative;
  width: 22px;
  height: 22px;
  right: 25px;
}

.button_city_frame_find {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0px;
  position: relative;
  border-radius: 4px;
  margin-bottom: 20px;
}

.button_city_frame_find {
  margin-bottom: 40px;
}
.button_city_frame_find input {
  color: var(--gray_font);
  font-family: "Manrope", Helvetics;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.09px;

  position: absolute;
  background-color: var(--input_color);
  width: 100%;
  height: 40px;
  top: -5px;
  left: -17px;
  border-radius: 100px;
  padding: 6px 10px 6px 20px;
  gap: 10px;
  border: none;
  outline: none;
  background: var(--input_color);
}

#content_citylist {
  height: 400px;
  overflow: auto;
  padding-left: 20px;
  padding-top: 20px;
}

#all_cities_list {
  height: 400px;
  overflow: auto;
  padding-left: 20px;
  padding-top: 20px;
}

#id_cities_list_2 {
  height: 400px;
  overflow: auto;
  padding-left: 20px;
  padding-top: 20px;
}

#id_cities_list_3 {
  height: 400px;
  overflow: auto;
  padding-left: 20px;
  padding-top: 20px;
}

#btn_choose_all_find {
  padding-left: 20px;
  padding-top: 20px;
}

.button_contactname:hover {
  background-color: #89abf6;
}

.button_contactname:hover .button_names_text {
  color: #fff;
}

.button_contactname img {
  display: -moz-inline-stack; /* ← Firefox 2 backwards compatibility */
  display: inline-block;
  margin-left: 14px;
}

.button_contactphone:hover {
  background-color: #89abf6;
}

.button_contactphone:hover .button_names_text {
  color: #fff;
}

.button_contactphone img {
  display: -moz-inline-stack; /* ← Firefox 2 backwards compatibility */
  display: inline-block;
  margin-left: 14px;
}

.form_radio {
  display: inline-block;
  margin-inline-end: 34px;
}

.button_next {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  height: 46px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 12px 11px 24px;
  position: relative;
  background-color: #000000;
  border-radius: 100px;
  cursor: pointer;
}

.button_next:hover {
  background-color: #1c1c1c;
}

.button_next .text-wrapper {
  position: relative;
  width: fit-content;
  font-family: "Manrope-Medium", Helvetica;
  font-weight: 500;
  color: #ffffff;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 18px;
  white-space: nowrap;
}

.btn_create_newsubproject_text {
  color: #000;
}

.btn_create_newsubproject {
  background-color: rgb(165, 203, 252);
}

.btn_create_newsubproject:hover {
  background-color: rgb(155, 198, 255);
}

.button_next .frame {
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 24px;
  transform: rotate(-180deg);
}

.button_next .icon {
  position: absolute;
  width: 22px;
  height: 22px;
  top: 1px;
  left: 1px;
  transform: rotate(180deg);
}

.button_back {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  height: 48px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 24px 11px 12px;
  position: relative;
  background-color: #ffffff;
  border-radius: 100px;
  cursor: pointer;
}

.button_back .frame {
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 24px;
  transform: rotate(-180deg);
}

.button_back .icon {
  position: absolute;
  width: 22px;
  height: 22px;
  top: 1px;
  left: 1px;
  transform: rotate(180deg);
}

.button_back .text-wrapper {
  position: relative;
  width: fit-content;
  font-family: "Manrope-Regular", Helvetica;
  font-weight: 400;
  color: rgb(0, 0, 0);
  font-size: 14px;
  letter-spacing: 0;
  line-height: 18px;
  white-space: nowrap;
}

.container_description {
  display: none;
  position: relative;
  width: 100%;
  height: 470px;
  padding: 26px 26px 90px 26px;
  background-color: #fff;
  border-radius: 28px;
}

.container_btn_description {
  position: relative;
  width: 100%;
  height: 544px;
}

.container_btn_description .btn_next_description {
  position: absolute;
  bottom: 0;
}

.container_description .btn_save_description_container {
  position: absolute;
  width: 211px;
  height: 49px;
  bottom: 20px;
  right: 20px;
  justify-content: center;
  border: none;
  cursor: pointer;
  padding: 16px 54px;
  background-color: rgb(0, 0, 0);
  align-items: center;
  border-radius: 100px;
}

.create_ads_container {
  display: inline-flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}

.create_ads_container .create_ads_radio {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

.create_ads_container .choose_btn_ads,
.new_radio_btn {
  width: 20px;
  height: 20px;
  margin-top: -15px;
  cursor: pointer;
}

.create_ads_container p {
  font-size: 14px;
  line-height: 100%;
  color: var(--main_font);
  opacity: 1;
}

.container_description .btn_save_description {
  color: #ffffff;
  text-align: center;
  font-family: "Manrope", Helvetica;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
}

.btn_create_ads {
  display: -moz-inline-stack; /* ← Firefox 2 backwards compatibility */
  display: inline-block;
  width: max-content;
  height: 60px;
  margin-top: 40px;
  /*margin-top: 10px;*/
  /*margin-right: 10px;*/
  /*margin-bottom: 20px;*/
  padding: 16px 54px;
  background-color: rgb(137, 171, 246);
  border-radius: 100px;
  cursor: pointer;
}

.btn_create_ads:hover {
  background-color: rgb(125, 163, 245);
}

.text_btn_create_ads {
  display: -moz-inline-stack; /* ← Firefox 2 backwards compatibility */
  display: inline-block;
  color: #fff;
  font-family: "Manrope", Helvetica;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 14px;
}

.btn_dwn_excel {
  display: -moz-inline-stack; /* ← Firefox 2 backwards compatibility */
  display: inline-block;
  width: max-content;
  width: 224px;
  margin-top: 40px;
  margin-left: 34px;
  height: 60px;
  /*margin-top: 10px;*/
  /*margin-right: 10px;*/
  /*margin-bottom: 20px;*/
  padding: 16px 21px;
  background-color: var(--input_color);
  border-radius: 100px;
  cursor: pointer;
}

.btn_dwn_excel:hover {
  background-color: rgb(239, 239, 241);
}

.btn_dwn_excel:hover .btn_text_description {
  color: #000;
}

.modal-dialog .close {
  cursor: pointer;
}

.spin-wrapper {
  position: relative;
  width: 100%;
  height: 100vh;

  .spinner {
    position: absolute;
    height: 60px;
    width: 60px;
    border: 3px solid transparent;
    border-top-color: var(--main_font);
    top: 50%;
    left: 50%;
    margin: -30px;
    border-radius: 50%;
    animation: spin 2s linear infinite;

    &:before,
    &:after {
      content: "";
      position: absolute;
      border: 3px solid transparent;
      border-radius: 50%;
    }

    &:before {
      border-top-color: #deff83;
      top: -12px;
      left: -12px;
      right: -12px;
      bottom: -12px;
      animation: spin 3s linear infinite;
    }

    &:after {
      border-top-color: #fffbfe;
      top: 6px;
      left: 6px;
      right: 6px;
      bottom: 6px;
      animation: spin 4s linear infinite;
    }
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.fadeIn {
  animation-name: fadeIn;
  -webkit-animation-name: fadeIn;
  animation-duration: 0.5s;
  -webkit-animation-duration: 0.5s;
  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;
}
@keyframes fadeIn {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  60% {
    transform: scale(1.1);
  }
  80% {
    transform: scale(0.9);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  0% {
    -webkit-transform: scale(0);
    opacity: 0;
  }
  60% {
    -webkit-transform: scale(1.1);
  }
  80% {
    -webkit-transform: scale(0.9);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    opacity: 1;
  }
}
.fadeOut {
  animation-name: fadeOut;
  -webkit-animation-name: fadeOut;
  animation-duration: 0.5s;
  -webkit-animation-duration: 0.5s;
  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;
}
@keyframes fadeOut {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  60% {
    transform: scale(0.9);
    opacity: 1;
  }
  80% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}
@-webkit-keyframes fadeOut {
  0% {
    -webkit-transform: scale(1);
    opacity: 1;
  }
  60% {
    -webkit-transform: scale(0.9);
    opacity: 1;
  }
  80% {
    -webkit-transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
    opacity: 0;
  }
}

.toolbar a {
  font-family: "Manrope", Helvetica;
  display: inline-block;
  border: 1px solid #888;
  padding: 5px 8px;
  margin: 0 5px 10px 0;
  color: rgb(0, 0, 0);
  border-radius: 28px;
  font-size: 12px;
  box-shadow: 1px 1px 2px #ddd;
  background: #fff;
  vertical-align: top;
  text-decoration: none;
}

.toolbar a:hover {
  color: rgb(0, 0, 0);
}

.toolbar select {
  display: inline-block;
  height: 28px;
  line-height: 28px;
  background: #fff;
  padding: 0;
  margin: 0 5px 10px 0;
  color: rgb(0, 0, 0);
  box-shadow: 1px 1px 2px #ddd;
  border-radius: 3px;
  vertical-align: top;
  font-size: 12px;
}
.toolbar input {
  display: inline-block;
  height: 28px;
  line-height: 28px;
  background: var(--input_color);
  padding: 0;
  margin: 0 5px 10px 0;
  color: rgb(0, 0, 0);
  box-shadow: 1px 1px 2px #ddd;
  border-radius: 3px;
  vertical-align: top;
  font-size: 12px;
}
.toolbar span {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  padding: 0;
  margin: 0 0 10px 0;
  color: rgb(0, 0, 0);
  vertical-align: top;
  font-size: 12px;
}
.editor {
  width: 100%;
  height: 100%;
  overflow: auto;
  resize: none;
  border: none;
  outline: none;
  background: #fff;
  color: rgb(0, 0, 0);
  font-family: "Manrope", Helvetica;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-top: 20px;
}

.PC .free_button {
  display: flex;
  width: 211px;
  height: 49px;
  padding: 16px 54px;
  background-color: rgb(0, 0, 0);
  align-items: center;
  justify-content: center;
  border-radius: 100px;
}

.PC .free_button_text {
  color: #ffffff;
  text-align: center;
  font-family: "Manrope", Helvetica;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
}

#line-container {
  width: 100%;
  height: 8px;
}

.btn_update_tariff {
  width: 211px;
  height: 49px;
  border: none;
  outline: none;
  color: #fff;
  background: #111;
  font-family: "Manrope", Helvetica;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 100px;
}

.btn_update_tariff:before {
  content: "";
  background: linear-gradient(
    45deg,
    #ff0000,
    #ff7300,
    #fffb00,
    #48ff00,
    #00ffd5,
    #002bff,
    #7a00ff,
    #ff00c8,
    #ff0000
  );
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 400%;
  z-index: -1;
  filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: glowing 20s linear infinite;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  border-radius: 100px;
}

.btn_update_tariff:active {
  color: #000;
}

.btn_update_tariff:active:after {
  background: transparent;
}

.btn_update_tariff:hover:before {
  opacity: 1;
}

.btn_update_tariff:after {
  z-index: -1;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #111;
  left: 0;
  top: 0;
  border-radius: 100px;
}

@keyframes glowing {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 400% 0;
  }
  100% {
    background-position: 0 0;
  }
}

.right_dropmenu_bg {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: rgba(var(--window_bg-rgb), 0.1);
  z-index: 2;
  overflow: hidden;
}

.right_dropmenu_bg::before {
  width: 100%;
  height: 100%;
  backdrop-filter: blur(18px);
}

.right_dropmenu_bg .right_dropmenu {
  position: relative;
  z-index: 1;
}

.right_dropmenu .right_dropmenu_1 {
  position: absolute;
  top: 50px;
  right: 40px;
  width: 333px;
  padding: 42px 32px;
  background: rgb(var(--window_bg-rgb));
  box-shadow: 0px 30px 64px -32px rgba(0, 0, 0, 0.25);
  border-radius: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.right_dropmenu_1 .right_dropmenu_user {
  position: static;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 5px 16px 5px 5px;
  gap: 10px;

  flex: none;
  order: 0;
  flex-grow: 0;

  border-radius: 100px;
  box-shadow: 0px 30px 64px -32px rgba(0, 0, 0, 0.03);
  backdrop-filter: blur(160px);
  background: rgb(255, 255, 255);
}

.right_dropmenu_user img {
  position: static;
  width: 38px;
  height: 38px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;

  flex: none;
  order: 0;
  flex-grow: 0;

  border-radius: 100px;
}

.right_dropmenu_user p {
  position: static;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0;

  flex: none;
  order: 0;
  flex-grow: 0;
  margin: 4px 0px;

  color: rgb(0, 0, 0);
  font-family: "Manrope", Helvetica;
  font-size: 14px;
  font-weight: 500;
  line-height: 19px;
  letter-spacing: 0px;
  text-align: left;
}

/*.right_dropmenu_1 .right_dropmenu_close_container {*/
/*	position: static;*/
/*	width: 20px;*/
/*	height: 20px;*/

/*	flex: none;*/
/*	order: 0;*/
/*	flex-grow: 0;*/
/*	margin: 32px 0px;*/
/*}*/

.right_dropmenu_close {
  position: absolute;
  width: 20px;
  height: 20px;
  right: 26px;
  top: 30px;
  cursor: pointer;
}

.right_dropmenu_close_block .img-svg path {
  fill: rgb(var(--black_color-rgb));
}

.right_dropmenu_blockline {
  display: grid;
  margin-top: 32px;
  row-gap: 8px;
}

.right_dropmenu_blockline .right_dropmenu_line {
  position: static;
  width: 302px;
  height: 46px;

  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 6px 16px 6px 16px;

  flex: none;
  order: 0;
  flex-grow: 0;
  border-radius: 100px;
  margin: 0px 15px;
  cursor: pointer;
}

.right_dropmenu_blockline .right_dropmenu_line:hover {
  background: rgb(var(--drop_menu_hover_color-rgb));
}

.right_dropmenu_blockline .right_dropmenu_line:hover .menu_text {
  color: rgb(var(--menuhover_text_color-rgb));
}

.right_dropmenu_blockline .right_dropmenu_line .profile {
  position: static;
  width: 22px;
  height: 22px;
  flex: none;
  order: 0;
  flex-grow: 0;
}

.right_dropmenu_blockline .right_dropmenu_line .profile .img-svg {
  vertical-align: baseline;
  width: 17px;
  height: 20px;
}

.right_dropmenu_blockline .right_dropmenu_line .profile .img-svg path {
  fill: var(--black_color) !important;
}

.right_dropmenu_blockline .right_dropmenu_line:hover .profile .img-svg path {
  fill: var(--menuhover_text_color) !important;
}

.right_dropmenu_blockline .right_dropmenu_line .tariff {
  position: static;
  width: 22px;
  height: 21.5px;

  flex: none;
  order: 0;
  flex-grow: 0;
}

.right_dropmenu_blockline .right_dropmenu_line .tariff .img-svg {
  vertical-align: baseline;
}

.right_dropmenu_blockline .right_dropmenu_line .tariff .img-svg path {
  stroke: var(--black_color) !important;
}

.right_dropmenu_blockline .right_dropmenu_line:hover .tariff .img-svg path {
  stroke: var(--menuhover_text_color) !important;
}

.right_dropmenu_blockline .right_dropmenu_line .active_tariff {
  position: static;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 5px 8px 5px 8px;

  flex: none;
  order: 1;
  flex-grow: 0;
  border-radius: 20px;
  background: rgb(222, 255, 131);
}

.right_dropmenu_blockline
  .right_dropmenu_line
  .active_tariff
  .active_tariff_text {
  color: rgb(0, 0, 0);
  font-family: "Manrope", Helvetica;
  font-size: 10px;
  font-weight: 500;
  line-height: 14px;
  text-align: left;
  letter-spacing: 0.1px;
  text-transform: uppercase;
}

.right_dropmenu_blockline .right_dropmenu_line .help {
  position: static;
  width: 22px;
  height: 20px;
  flex: none;
  order: 0;
  flex-grow: 0;
}

.right_dropmenu_blockline .right_dropmenu_line .help .img-svg {
  vertical-align: baseline;
}

.right_dropmenu_blockline .right_dropmenu_line .help .img-svg path {
  stroke: var(--black_color) !important;
}

.right_dropmenu_blockline .right_dropmenu_line:hover .help .img-svg path {
  stroke: var(--menuhover_text_color) !important;
}

.right_dropmenu_blockline .right_dropmenu_line .book {
  position: static;
  width: 22px;
  height: 18px;
  flex: none;
  order: 0;
  flex-grow: 0;
  align-items: center;
}

.right_dropmenu_blockline .right_dropmenu_line .exit {
  position: static;
  width: 22px;
  height: 22px;
  flex: none;
  order: 0;
  flex-grow: 0;
  align-items: center;
}

.right_dropmenu_blockline .right_dropmenu_line .book .img-svg,
.right_dropmenu_blockline .right_dropmenu_line .exit .img-svg {
  vertical-align: baseline;
}

.right_dropmenu_blockline .right_dropmenu_line .book .img-svg path {
  stroke: var(--black_color) !important;
}

.right_dropmenu_blockline .right_dropmenu_line .exit .img-svg path {
  stroke: #acacac !important;
}

.right_dropmenu_blockline .right_dropmenu_line:hover .book .img-svg path {
  stroke: var(--menuhover_text_color) !important;
}

.right_dropmenu_blockline .right_dropmenu_line:hover .exit .img-svg path {
  stroke: #ec5159 !important;
  fill: #ec5159 !important;
}

.right_dropmenu_line .menu_text {
  position: static;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 8px 28px 8px 0;

  flex: none;
  order: 1;
  flex-grow: 0;
  margin: 0 16px;

  color: var(--main_font);
  font-family: "Manrope", Helvetica;
  font-size: 18px;
  font-weight: 500;
  line-height: 27px;
  letter-spacing: 0;
  text-align: left;
}

.right_dropmenu_line .menu_text_exit {
  position: static;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 8px 28px 8px 0;

  flex: none;
  order: 1;
  flex-grow: 0;
  margin: 0 16px;

  color: #acacac;
  font-family: "Manrope", Helvetica;
  font-size: 18px;
  font-weight: 500;
  line-height: 27px;
  letter-spacing: 0;
  text-align: left;
}

.right_dropmenu_line:hover .menu_text_exit {
  color: #ec5159;
}

.right_dropmenu_switchtheme {
  position: static;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  gap: 8px;

  flex: 0px;
  order: 2;
  flex-grow: 0;
  margin-top: 32px;
}
.right_dropmenu_switchimg {
  vertical-align: baseline;
  width: 60px;
  height: 34px;
  cursor: pointer;
}

.right_dropmenu_switchtext {
  position: static;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0;

  flex: none;
  order: 0;
  flex-grow: 0;
  margin: 0;

  font-family: "Manrope", Helvetica;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: rgb(var(--color_theme_text-rgb));
}

.switch {
  position: relative;
  overflow: hidden;
  top: 8px;
  width: 3.9rem;
  height: 3.2rem;
}

.switch input {
  position: absolute;
  z-index: 2;
  opacity: 0;
}

.switch label {
  cursor: pointer;
}

.background {
  z-index: 1;
  position: absolute;
  width: 3.7rem;
  height: 2rem;
  border-radius: 1.23rem;
  border: 0.123rem solid #202020;
  background: linear-gradient(to right, #484848 0%, #202020 100%);
  transition: all 0.3s;
}

.stars1,
.stars2 {
  position: absolute;
  height: 0.2rem;
  width: 0.2rem;
  background: #ffffff;
  border-radius: 50%;
  transition: 0.3s all ease;
}

.stars1 {
  top: 3px;
  right: 11px;
}

.stars2 {
  top: 20px;
  right: 24px;
}

.stars1:after,
.stars1:before,
.stars2:after,
.stars2:before {
  position: absolute;
  content: "";
  display: block;
  height: 0.123rem;
  width: 0.123rem;
  background: #ffffff;
  border-radius: 50%;
  transition: 0.2s all ease;
}

.stars1:after {
  top: 4px;
  right: 10px;
}

.stars1:before {
  top: 9px;
  right: -5.91px;
}

.stars2:after {
  top: -3.94px;
  right: -7.88px;
}

.stars2:before {
  top: 3px;
  right: -12.8px;
}

.sun-moon {
  z-index: 2;
  position: absolute;
  left: 0;
  display: inline-block;
  height: 1.48rem;
  width: 1.48rem;
  margin: 0.25rem;
  background: #fffdf2;
  border-radius: 50%;
  transition: all 0.5s ease;

  /* Default to Moon */
  border: 0.123rem solid #dee2c6;
}

.sun-moon .dots {
  position: absolute;
  top: 1px;
  left: 11px;
  height: 0.49rem;
  width: 0.49rem;
  background: #efeedb;
  border: 0.123rem solid #dee2c6;
  border-radius: 50%;
  transition: 0.4s all ease;
}

.sun-moon .dots:after,
.sun-moon .dots:before {
  position: absolute;
  content: "";
  display: block;
  height: 0.123rem;
  width: 0.123rem;
  background: #efeedb;
  border: 0.123rem solid #dee2c6;
  border-radius: 50%;
  transition: 0.4s all ease;
}

.sun-moon .dots:after {
  top: -1.97px;
  left: -12.8px;
}

.sun-moon .dots:before {
  top: 9px;
  left: -4.93px;
}

/* Transition to Sun */

.switch input:checked ~ .sun-moon {
  left: calc(100% - 2.2rem);
  background: #f5ec59;
  border-color: #e7c65c;
  transform: rotate(-25deg);
}

.switch input:checked ~ .sun-moon .dots,
.switch input:checked ~ .sun-moon .dots:after,
.switch input:checked ~ .sun-moon .dots:before {
  background: var(--input_color);
  border-color: var(--input_color);
}

.switch input:checked ~ .sun-moon .dots {
  height: 0.74rem;
  width: 0.74rem;
  top: 0px;
  left: -9.85px;
  transform: rotate(25deg);
}

.switch input:checked ~ .sun-moon .dots:after {
  height: 0.32rem;
  width: 0.32rem;
  top: 1px;
  left: -5.91px;
}

.switch input:checked ~ .sun-moon .dots:before {
  height: 0.2rem;
  width: 0.2rem;
  top: 3px;
  left: 7px;
}

.switch input:checked ~ .background .stars1,
.switch input:checked ~ .background .stars2 {
  opacity: 0;
  transform: translateY(0.99rem);
}

.switch input:checked ~ .background {
  border: 0.123rem solid #78c1d5;
  background: linear-gradient(to right, #78c1d5 0%, #bbe7f5 100%);
}

.pro_tariff {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.pro_tariff .text_block {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  margin-bottom: 10px;
  padding: 0;
}

.pro_tariff .text_block .pro_tariff_line1 {
  width: 100%;
  display: inline-flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 4px;
}

.pro_tariff .text_block .pro_tariff_line1 .left {
  font-family: "Manrope", Helvetica;
  opacity: 0.7;
  font-size: 10px;
  font-weight: 500;
  line-height: 100%;
  color: var(--main_font);
}

.pro_tariff .text_block .pro_tariff_line1 .right {
  font-family: "Manrope", Helvetica;
  flex: 1 1 0;
  font-size: 10px;
  font-weight: 700;
  line-height: 100%;
  text-align: right;
  color: rgb(222, 255, 131);
  color: rgb(var(--activedate_color-rgb));
  text-transform: uppercase;
}

.pro_tariff .text_block .pro_tariff_line2 {
  font-family: "Manrope", Helvetica;
  font-size: 16px;
  font-weight: 700;
  line-height: 100%;
  color: var(--main_font);
}

.progress_block {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
}

.progress_block .progress_bar_ads {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.progress_block .text_block_pro {
  width: 100%;
  display: inline-flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  left: 0;
  margin-bottom: 8px;
}

.progress_block .text_block_pro_3 {
  width: 100%;
  display: inline-flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 8px;
}

.progress_block .text_block_pro_3 .progress_text_3 {
  font-family: "Manrope", Helvetica;
  font-size: 12px;
  font-weight: 700;
  line-height: 100%;
  text-align: right;
  color: rgb(var(--black_color-rgb));
}

.progress_block .progress_bar_ads .text_ads {
  font-family: "Manrope", Helvetica;
  font-size: 10px;
  font-weight: 500;
  line-height: 100%;
  color: rgb(var(--black_color-rgb));
}

.progress_block .progress_bar_ads .progress_line {
  width: 100%;
  height: 11px;
  position: relative;
}

.progress_block .progress_bar_ads .progress_line_3 {
  width: 100%;
  height: 18px;
  background-color: rgba(232, 232, 232, 1);
  border-radius: 300px;
  position: relative;
}

.progress_block .progress_bar_ads .progress_line_3 .progress_line_bg_3 {
  width: calc(100% - 4px);
  height: 15.12px;
  left: 2px;
  top: 1.44px;
  position: absolute;
  background-color: rgba(243, 243, 243, 1);
  border-radius: 1000px;
}

.progress_block .progress_bar_ads .progress_line_3 .progress_line_bg_ads_3 {
  width: calc(100% - 8.58px);
  height: 10.8px;
  left: 4.29px;
  top: 3.6px;
  position: absolute;
  background-color: rgba(137.09, 170.95, 245.68, 1);
  border-radius: 300px;
}

.progress_block .progress_bar_ads .progress_line .img-svg {
  width: 100%;
  height: 11px;
  position: absolute;
  border-radius: 100px;
}

.progress_block .progress_bar_ads .progress_line .img-svg path {
  fill: var(--progress_sloping_line) !important;
}

.progress_block .progress_bar_ads .progress_line .progress_line_bg {
  width: 100%;
  height: 11px;
  left: 0;
  top: 0;
  position: absolute;
  background-color: rgb(var(--progress_ads_bg-rgb));
  border-radius: 24px;
}

.progress_block .progress_bar_ads .progress_line .progress_line_bg_ads {
  width: 27px;
  height: 11px;
  left: 0;
  top: 0;
  position: absolute;
  box-shadow: 0 4px 4px 0 rgba(232, 252, 83, 0.2);
  background-color: rgba(232, 252, 83, 1);
  border-radius: 24px;
}

.progress_block .progress_bar_ads .progress_line .progress_line_bg_count {
  width: 27px;
  height: 11px;
  left: 0;
  top: 0;
  position: absolute;
  box-shadow: 0 4px 4px 0 rgba(137, 171, 246, 0.2);
  background-color: rgba(137, 171, 246, 1);
  border-radius: 24px;
}

.progress_block .progress_bar_ads .progress_text {
  font-family: "Manrope", Helvetica;
  right: 10px;
  top: 1px;
  position: absolute;
  font-size: 9px;
  font-weight: 700;
  line-height: 100%;
  text-align: right;
  color: rgb(var(--black_color-rgb));
  text-transform: uppercase;
}

.pro_tariff .icon-king_pro {
  display: flex;
  flex-direction: column;
  width: 48px;
  height: 48px;
  align-items: flex-start;
  justify-content: flex-start;
  position: relative;
  margin-bottom: 20px;
}

.count_photo_block {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  width: max-content;
  padding: 6px 10px 6px 8px;
  border-radius: 6px;
  background-color: rgb(41, 41, 41);
  gap: 8px;
  margin-bottom: 20px;
}

.count_photo_block .count_photo_img {
  border-radius: 3px;
  width: 45px;
  height: 25px;
}

.count_photo_block .count_photo_stack_block {
  position: relative;
}

.count_photo_block .count_photo_stack_block .count_photo_img {
  position: absolute;
  border-radius: 3px;
  width: 45px;
  height: 25px;
}

.count_photo_block .count_photo_stack_block .count_photo_stack_2 {
  position: absolute;
  border-radius: 3px;
  width: 45px;
  height: 25px;
  left: 5px;
  background-color: rgb(224, 218, 218);
}

.count_photo_block .count_photo_stack_block .count_photo_stack_1 {
  position: absolute;
  border-radius: 3px;
  width: 45px;
  height: 25px;
  left: 2px;
  background-color: rgb(248, 242, 240);
}

.count_photo_block .count_photo_stack_block .count_photo_stack_3 {
  position: absolute;
  border-radius: 3px;
  width: 45px;
  height: 25px;
  left: 7px;
  background-color: rgb(248, 242, 240);
}

.count_photo_block .count_photo_stack_block .count_photo_stack_4 {
  position: absolute;
  border-radius: 3px;
  width: 45px;
  height: 25px;
  left: 10px;
  background-color: rgb(224, 218, 218);
}

.count_photo_block .count_photo_text {
  font-family: "Manrope", Helvetica;
  float: right;
  margin-left: 60px;
}

.mz_notify {
  position: absolute;
  right: 15px;
  bottom: 15px;
  width: 300px;
  min-height: 50px;
  background-color: #fff;
  border-radius: 8px;
  z-index: 40;
}

.mz_notify .mz_notify_icon_bg {
  width: 30px;
  height: 30px;
  border-radius: 100px;
  background-color: rgb(211, 130, 130);
}

.mz_notify .mz_notify_icon_bg .center_icon {
  text-align: center;
  justify-content: center;
}

.avitron_notifications {
  z-index: 40;
  position: fixed;
  top: 15px;
  right: 15px;
}

.avitron_toast {
  position: relative;
  padding: 5px;
  color: var(--black_color);
  margin-bottom: 10px;
  width: 300px;
  display: grid;
  grid-template-columns: 50px 1fr;
  border-radius: 5px;
  --color: #0abf30;
  background-image: linear-gradient(
    to right,
    #0abf3055,
    var(--color_notification_fon) 30%
  );
  animation: show 0.3s ease 1 forwards;
}
.avitron_toast i {
  color: var(--color);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
}
.avitron_toast .title {
  font-family: "Manrope", Helvetica;
  font-size: 15px;
  font-weight: bold;
}
.avitron_toast span,
.avitron_toast i:nth-child(3) {
  font-family: "Manrope", Helvetica;
  font-size: 13px;
  color: var(--black_color);
  opacity: 0.6;
}
@keyframes show {
  0% {
    transform: translateX(100%);
  }
  40% {
    transform: translateX(-5%);
  }
  80% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-10%);
  }
}
.avitron_toast::before {
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: var(--color);
  width: 100%;
  height: 3px;
  content: "";
  box-shadow: 0 0 10px var(--color);
  animation: var(--time_notify);
}
@keyframes timeOut {
  to {
    width: 0;
  }
}
.avitron_toast.error {
  --color: #f24d4c;
  background-image: linear-gradient(
    to right,
    #f24d4c55,
    var(--color_notification_fon) 30%
  );
}
.avitron_toast.warning {
  --color: #e9bd0c;
  background-image: linear-gradient(
    to right,
    #e9bd0c55,
    var(--color_notification_fon) 30%
  );
}
.avitron_toast.info {
  --color: #3498db;
  background-image: linear-gradient(
    to right,
    #3498db55,
    var(--color_notification_fon) 30%
  );
}

.image-dropzone {
  border: 2px dashed #ccc;
  padding: 20px;
  text-align: center;
  cursor: pointer;
}
.image-dropzone:hover {
  background-color: #f8f8f8;
}

.btn_savedescription {
  position: relative;
  width: 211px;
  padding: 16px 0;
  background-color: #000;
  border-radius: 100px;
  margin-top: 20px;

  font-family: "Manrope", Helvetica;
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 120%;

  cursor: pointer;
}

.btn_savedescription:hover {
  background-color: #1c1c1c;
}

.edit_dropmenu {
  position: absolute;
  left: 270px;
  top: 100px;
  z-index: 20;
  background: rgb(255, 255, 255, 0.192);
  width: 181px;
  height: 194px;
  border-radius: 14px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: 15px 0;
}

.edit_dropmenu .elem_edit_dropmenu {
  width: 100%;
  height: 40px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 10px 25px;
  background: transparent;
  cursor: pointer;
}

.edit_dropmenu .elem_edit_dropmenu:hover {
  background: rgb(243, 245, 246);
}

.edit_dropmenu .elem_edit_dropmenu .icon_edit_dropmenu {
  width: 20px;
  height: 20px;
  margin-right: 15px;
}

.edit_dropmenu .elem_edit_dropmenu .text_edit_dropmenu {
  color: rgb(0, 0, 0);
  font-family: "Manrope", Helvetica;
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0;
  text-align: left;
}

.edit_dropmenu .rename_edit_dropmenu_save_btn {
  display: flex;
  width: 100%;
  height: 30px;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  background-color: #000;
  border-radius: 100px;
  cursor: pointer;
}

edit_dropmenu .rename_edit_dropmenu_save_btn {
  background-color: #1c1c1c;
}

.edit_dropmenu .rename_edit_dropmenu_save_btn .text_edit_dropmenu_btn {
  width: fit-content;
  font-weight: 500;
  color: #ffffff;
  font-size: 14px;
  text-align: center;
  letter-spacing: 0;
  line-height: 16.8px;
  white-space: nowrap;
  position: relative;
  font-family: "Manrope", Helvetica;
}

.edit_dropmenu input {
  color: #acacac;
  font-size: 14px;
  font-family: "Manrope", Helvetica;
  float: left;
  width: 100%;
  height: 40px;
  align-items: center;
  padding: 13px 25px;
  gap: 12px;
  border: none;
  outline: none;
  background: var(--input_color);
}

.custom-checkbox {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.custom-checkbox + label {
  display: inline-flex;
  align-items: center;
  user-select: none;
  font-size: 14px;
  line-height: 100%;
  color: var(--gray_font);
  font-family: "Manrope", Helvetica;
  cursor: pointer;
}
.custom-checkbox + label::before {
  content: "";
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  flex-shrink: 0;
  flex-grow: 0;
  border: 1px solid var(--gray_font);
  border-radius: 0.2em;
  margin-right: 0.5em;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
}

.custom-checkbox:checked + label::before {
  border-color: #89abf6;
  background-color: #89abf6;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg id='CheckMark'%3e%3crect width='20' height='20' rx='10' fill='%2389ABF6'/%3e%3cpath id='Vector' d='M6.66699 10.0001L8.88921 12.2223L13.3337 7.77783' stroke='white' stroke-width='1.11111' stroke-linecap='round'/%3e%3c/g%3e%3c/svg%3e");
  animation: bounce__checkbox 0.4s ease-in-out;
}

/* стили при наведении курсора на checkbox */
.custom-checkbox:not(:disabled):not(:checked) + label:hover::before {
  border-color: #89abf6;
}
/* стили для активного состояния чекбокса (при нажатии на него) */
.custom-checkbox:not(:disabled):active + label::before {
  background-color: #89abf6;
  border-color: #89abf6;
}

/* стили для чекбокса, находящегося в состоянии disabled */
.custom-checkbox:disabled + label::before {
  background-color: #e9ecef;
}

.other_input input {
  color: var(--gray_font);
  font-family: "Manrope", Helvetica;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.09px;

  float: left;
  width: 100%;
  height: 30px;
  padding: 0 20px;
  align-items: center;
  gap: 12px;
  flex: 1 0 0;
  border-radius: 100px;
  border: none;
  outline: none;
  background: var(--input_color);
}

@keyframes bounce__checkbox {
  0% {
    transform: scale(0);
  }
  20% {
    transform: scale(1.2);
  }
  50% {
    transform: scale(1);
  }
  80% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.custom-radio {
  position: absolute;
  z-index: -1;
  opacity: 0;
}
/* для элемента label связанного с .custom-radio */
.custom-radio + label {
  display: inline-flex;
  align-items: center;
  user-select: none;
  font-size: 14px;
  line-height: 100%;
  color: var(--gray_font);
  font-family: "Manrope", Helvetica;
  cursor: pointer;
}
/* создание в label псевдоэлемента  before со следующими стилями */
.custom-radio + label::before {
  content: "";
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  flex-shrink: 0;
  flex-grow: 0;
  border: 1px solid var(--gray_font);
  border-radius: 1em;
  margin-right: 0.5em;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
}
/* стили при наведении курсора на радио */
.custom-radio:not(:disabled):not(:checked) + label:hover::before {
  border-color: #89abf6;
}
/* стили для активной радиокнопки (при нажатии на неё) */
.custom-radio:not(:disabled):active + label::before {
  background-color: #89abf6;
  border-color: #89abf6;
}

/* стили для радиокнопки, находящейся в состоянии checked */
.custom-radio:checked + label::before {
  border-color: #89abf6;
  background-color: #89abf6;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg id='CheckMark'%3e%3crect width='20' height='20' rx='10' fill='%2389ABF6'/%3e%3cpath id='Vector' d='M6.66699 10.0001L8.88921 12.2223L13.3337 7.77783' stroke='white' stroke-width='1.11111' stroke-linecap='round'/%3e%3c/g%3e%3c/svg%3e");
  animation: bounce__checkbox 0.4s ease-in-out;
}
/* стили для радиокнопки, находящейся в состоянии disabled */
.custom-radio:disabled + label::before {
  background-color: #e9ecef;
}

.mz-field-number {
  background-color: rgb(41, 41, 41);
  border-radius: 29px;
  border: none;
}

.mz-dynamic-field select,
.mz-field-number,
.mz-field-text {
  background-color: var(--input_color) !important;
  color: rgb(var(--black_color-rgb)) !important;
  border: 1px solid rgba(var(--black_color-rgb), 0.1) !important;
  border-radius: 29px;
  padding: 10px 20px;
  outline: none;
  font-family: inherit;
  transition: all 0.2s;
}

.mz-dynamic-field select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1 1L5 5L9 1' stroke='%2389ABF6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 20px center;
  padding-right: 40px;
}

.mz-dynamic-field select:focus,
.mz-field-number:focus,
.mz-field-text:focus {
  border-color: #89abf6 !important;
  box-shadow: 0 0 0 2px rgba(137, 171, 246, 0.2);
}