.events-main-block {
  padding-right: 16px;

  @media (max-width: 600px) {
    padding: 0 16px;
  }
}

/* Header and description styles */
#events-header {
  @media (max-width: 600px) {
    font-size: 28px;
    line-height: 32px;
    margin-bottom: 16px;
  }
}

.events-description {
  @media (max-width: 600px) {
    display: none;
  }
}

/* Buttons styles */
.events-list-buttons .btn {
  margin-bottom: 0;
}

.events-list-buttons {
  display: flex;
  align-items: center;
  gap: 8px;

  @media (max-width: 600px) {
    display: block;
  }
}

.events-list-buttons .btn {
  padding-left: 16px;
  padding-right: 16px;
  margin: 0;

  @media (max-width: 600px) {
    margin-bottom: 8px;
    width: 100%;
  }
}

a.btn.btn-white,
button.btn.btn-white {
  color: var(--text-strong, #1c1c1c);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  border-radius: var(--border-radius-sm, 8px);
  border: 1px solid var(--surface-primary-border, #e3e3e3);
  background: var(--surface-primary-background, #fff);
  box-shadow:
    0px 0px 2px 0px rgba(8, 40, 13, 0.02),
    0px 2px 4px 0px rgba(8, 40, 13, 0.05);
  --bg: #fff;
}

.line-divider {
  height: 16px;
  width: 1px;
  background: var(--surface-primary-border, #e3e3e3);

  @media (max-width: 600px) {
    display: none;
  }
}

/* Tabs styles */
.tabs-block {
  margin-top: var(--rem-1500);
  @media (max-width: 600px) {
    display: none;
  }

  ul {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e3e3e3;
    gap: var(--rem-1000);

    li,
    a {
      font-size: 14px;
      color: var(--dark-color);
      font-weight: 500;
      line-height: 20px;
      cursor: pointer;
      padding: var(--rem-750) 2px;
      margin-bottom: -1px;
      border-bottom: 1.5px solid transparent;
      outline: none;
    }

    li.active {
      color: var(--text-brand);
      border-bottom: 1.5px solid #2c9d62;
    }
  }
}

/* Main block styles */
.events-block__wrapper {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-top: 24px;
}
.object-count {
  color: var(--text-weak, #777);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  display: flex;
  align-items: center;

  @media (max-width: 600px) {
    display: block;
    min-height: unset;
    margin-bottom: 16px;
    float: none;
  }
}

.object-btns {
  float: right;
  display: flex;
  padding: 4px;
  gap: 4px;
  align-items: center;
  border-radius: var(--border-radius-sm, 8px);
  border: 1px solid var(--surface-secondary-border, #e3e3e3);
  background: var(--surface-secondary-background, #f4f4f4);
  margin-bottom: 16px;

  @media (max-width: 600px) {
    float: none;
    margin-bottom: 8px;
  }

  a {
    display: flex;
    height: 32px;
    padding: 4px 8px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 4px;
    cursor: pointer;
    color: var(--text-strong, #1c1c1c);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;

    @media (max-width: 600px) {
      flex: 1;
    }
  }

  a.active {
    border-radius: 4px;
    border: 1px solid var(--surface-primary-border, #e3e3e3);
    background: var(--surface-primary-background, #fff);
    box-shadow:
      0px 0px 2px 0px rgba(8, 40, 13, 0.02),
      0px 2px 4px 0px rgba(8, 40, 13, 0.05);
  }

  a.disabled span,
  a.disabled svg {
    opacity: 0.4;
  }
}

/* Events block styles */
.events-block {
  /* margin-top: 24px; */
  flex: 1;

  @media (max-width: 600px) {
    margin-top: 8px;
    max-width: 100%;
  }
}

/* Event card styles */
.event-card {
  height: 403px;
  padding: 16px;
  border-radius: 12px;
  flex-direction: column;
}

.event-card:hover {
  background:
    linear-gradient(
      0deg,
      var(--modifier-hover-light, rgba(54, 113, 82, 0.05)) 0%,
      var(--modifier-hover-light, rgba(54, 113, 82, 0.05)) 100%
    ),
    var(--surface-primary-background, #fff);
}

.event-card-main {
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: 400px;
  overflow: hidden;
  margin-bottom: 16px;

  &::after {
    position: absolute;
    display: block;
    bottom: 0;
    left: 16px;
    right: 16px;
    height: 24px;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.5), transparent);
    content: '';
  }

  .drop-down {
    position: absolute;
    right: 16px;
    top: 13px;
  }
}

.event-card-details-block {
  display: flex;
  gap: 12px;

  > div {
    display: flex;
    align-items: center;
    color: var(--text-strong, #1c1c1c);
    font-size: 14px;
    line-height: 20px;
  }

  .event-card-format {
    max-width: 100px;
    svg {
      min-width: 20px;
      min-height: 20px;
      max-width: 20px;
      max-height: 20px;
    }
    span {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  span {
    margin-left: 4px;
  }
}

.fav-event-btn {
  margin-right: 24px;
}

.event-participant__cards .fav-event-btn {
  margin-right: 32px;
}

.event-thumb {
  margin: 12px 0;
  height: 200px;
  width: 100%;
  min-height: 200px;
  img {
    border-radius: 8px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}

.event-title {
  color: var(--text-strong, #1c1c1c);
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  margin-bottom: 8px;
}

.event-description {
  color: var(--text-base, #3b3b3b);
  font-size: 14px;
  line-height: 20px;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Divider by period of time styles */
.divider {
  color: var(--text-weak, #777);
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  position: relative;
  margin: 8px 0;

  @media (max-width: 600px) {
    margin: 8px 0;
  }

  span {
    background: rgb(249, 249, 249);
    padding: 0 8px;
    margin: 8px;
    display: inline-block;
  }

  :before {
    z-index: -1000;
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--surface-primary-border, #e3e3e3);
  }
}

/* Not found case styles */
.service-favorite__empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  h2 {
    color: var(--dark-color);
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    text-align: center;
  }

  p {
    margin: 8px 0 0 0;
    font-size: 14px;
    color: var(--black-color);
    line-height: 20px;
    text-align: center;
  }

  a {
    margin-top: 12px;
  }
}

/* No more event styles */
.no-more-events {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  span {
    color: var(--text-weak, #777);
    font-size: 14px;
    line-height: 20px;
  }

  a {
    margin-top: 8px;
  }
}

/* Create event form styles */
.event-create-main {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.event-create-block {
  margin-top: 24px;
  padding: 24px;
  border-radius: 12px;
  border: var(--border-width, 1px) solid var(--surface-primary-border, #e3e3e3);
  background: var(--surface-primary-background, #fff);

  h1 {
    color: var(--text-strong, #1c1c1c);
    font-size: 32px;
    font-weight: 600;
    line-height: 40px;
  }

  hr {
    border-top: 1px solid var(--surface-primary-border, #e3e3e3);
  }
}

.event-back-button {
  display: flex;
  color: var(--text-brand, #2c9d62);
  font-size: 14px;
  line-height: 20px;

  span {
    margin-left: 4px;
  }
}

.event-form-top-block {
  display: flex;
  justify-content: space-between;

  @media (max-width: 425px) {
    display: block;
  }
}

#event-form-card-languages {
  gap: 4px;

  li {
    height: 24px;
    width: 40px;
    padding: 4px 8px;
    font-size: 12px;
    line-height: 16px;
    color: var(--text-strong, #1c1c1c);
  }

  li.current {
    color: var(--text-on-brand, #effaf3);
  }
}

.filling-language {
  color: var(--text-weak, #777);
  font-size: 12px;
  line-height: 16px;
  margin-bottom: 4px;
  display: flex;
  gap: 4px;
}

#event-yandex-translate {
  padding: 8px;
  margin-top: 16px;
  border-radius: var(--border-radius-sm, 8px);
  background: var(--surface-secondary-background, #f4f4f4);

  .left {
    gap: 16px;
    margin-left: 8px;
  }
}

.translate-yandex-btn-event {
  background: var(--surface-brand-background, #2c9d62);
  color: var(--text-on-brand, #effaf3);
  border: 1px solid var(--brand-400, #4eb97e);
  box-shadow:
    0px 0px 2px 0px rgba(8, 40, 13, 0.02),
    0px 2px 4px 0px rgba(8, 40, 13, 0.05);
  --bg: var(--brand-500);
}

#submit-create-event,
#submit-update-event,
#submit-create-vacancy,
#submit-vacancy-moderation,
#events-apply-btn,
#generate-qr-pdf,
#submit-create-infrastructure,
.qr-pdf-generate,
.upload-image-btn,
.save-cropped-btn,
.events-list-buttons .btn {
  --bg: var(--brand-500);
}

.receive-coins {
  padding: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--border-radius-sm, 8px);
  border: 1px solid var(--metric-xp-fade, rgba(149, 85, 225, 0.07));
  background:
    linear-gradient(
      90deg,
      var(--metric-sc-fade, rgba(224, 170, 40, 0.07)) 0%,
      var(--metric-xp-fade, rgba(149, 85, 225, 0.07)) 100%
    ),
    linear-gradient(
      107deg,
      var(--metric-xp-fade, rgba(149, 85, 225, 0.07)) 11.75%,
      var(--metric-sc-fade, rgba(224, 170, 40, 0.07)) 88.25%
    );
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 16px;

  @media (max-width: 600px) {
    display: block;
  }

  span {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;

    div {
      gap: 4px;
      display: flex;
      align-items: center;
    }

    .st {
      color: var(--metric-st-base, #28a463);
      font-weight: 500;
    }

    .xp {
      color: var(--metric-xp-base, #9555e1);
      font-weight: 500;
    }

    .sc {
      color: var(--metric-sc-base, #e0aa28);
      font-weight: 500;
    }

    img {
      width: 18px;
      height: 18px;
    }
  }
}

.more-about {
  color: var(--text-brand, #2c9d62);
  margin-left: 8px;
}

.event-form-section {
  padding: 16px 0 0;

  h2 {
    color: var(--text-strong, #1c1c1c);
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    margin-bottom: 16px;
  }
}

.event-label {
  color: var(--text-strong, #1c1c1c);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
}

.event-label-hint {
  color: var(--text-weak, #777);
  font-size: 12px;
  line-height: 16px;
  margin-top: 8px;
  display: block;
}

.event-form-field {
  margin-bottom: 16px;
}

.event-wallpaper {
  position: relative;
  margin-top: 8px;
  border-radius: var(--border-radius-sm, 8px);
  border: 1px dashed var(--surface-primary-border, #e3e3e3);
  background: var(--surface-primary-background, #fff);

  label {
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: center;
  }

  img {
    margin-bottom: 16px;
  }

  a {
    color: var(--text-brand, #2c9d62);
    font-weight: 500;
  }
}

.event-wallpaper-size-hint {
  color: var(--text-weak, #777);
  font-size: 12px;
  line-height: 16px;
  margin-top: 8px;
}

#image-upload-preview {
  display: contents;
}

.event-larger-hint {
  color: var(--text-base, #3b3b3b);
  font-size: 14px;
  line-height: 20px;
  margin-top: 8px;
  display: block;

  a {
    color: var(--text-brand, #2c9d62);
    text-decoration-line: underline;
  }
}

.event-fieldset {
  margin: 8px 0 0;

  input {
    margin: 8px 0 0;
  }
}

.event-format-field {
  border-radius: var(--border-radius-sm, 8px);
  border: 1px solid var(--surface-primary-border, #e3e3e3);
  background: var(--surface-primary-background, #fff);
  padding: 4px;
  margin-top: 8px;
}

.with-icon {
  background-position: 10px 10px;
  background-repeat: no-repeat;
  padding-left: 34px;
}

.location-icon {
  background-image: url('../img/location_gray.svg');
}

.calendar-icon {
  background-image: url('../img/calendar_gray.svg');
}

.link-icon {
  background-image: url('../img/link_gray.svg');
}

.google-map {
  border-radius: var(--border-radius-md, 12px);
  border: 1px solid var(--surface-primary-border, #e3e3e3);
  width: 100%;
  height: 250px;
  margin-top: 16px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 24px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--surface-primary-border, #e3e3e3);
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider.round {
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: '';
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: var(--surface-brand-background, #2c9d62);
}

input:focus + .slider {
  box-shadow: 0 0 1px var(--surface-brand-background, #2c9d62);
}

input:checked + .slider:before {
  -webkit-transform: translateX(16px);
  -ms-transform: translateX(16px);
  transform: translateX(16px);
}

.slider.round:before {
  border-radius: 50%;
}

.switch-block {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mt-8 {
  margin-top: 8px;
}

.switch-block-text {
  color: var(--text-strong, #1c1c1c);
  font-size: 14px;
  line-height: 20px;
}

.link-switch-block {
  margin: 8px 0 16px;
}

.with-additional-info {
  display: flex;
  justify-content: space-between;
}

.additional-field-info {
  color: var(--text-weak, #777);
  font-size: 12px;
  line-height: 16px;
}

#event-label-checkbox-1,
#event-label-checkbox-2 {
  margin-bottom: 8px;

  span {
    font-size: 14px;
    line-height: 20px;
    color: var(--text-strong, #1c1c1c);

    a {
      color: var(--text-brand, #2c9d62);
      text-decoration: none;
    }
  }
}

.event-format-list {
  gap: 4px;
  color: var(--text-base, #3b3b3b);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;

  li {
    border-radius: var(--border-radius-sm, 8px);
    min-height: var(--Input-height-m, 48px);
    max-height: var(--Input-height-m, 48px);
    line-height: 48px;
    text-align: center;
    cursor: pointer;
  }

  li.current {
    background: var(--background-brand, #2c9d62);
    color: var(--text-on-brand, #effaf3);
  }
}

.upload-images {
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  cursor: pointer;
}

#image-selected {
  display: none;
}

/*Event participants list styles */
.event-participants-top {
  display: flex;
  justify-content: space-between;
  flex: 1;
  align-items: center;
}

.event-participants-main {
  display: block;
}

.export-btn {
  font-weight: 500;
  line-height: 24px;
  margin-top: 0;
  margin-bottom: 0;
  padding: 8px 20px;
}

.participants-table {
  margin-top: 1rem;
}

@media (max-width: 768px) {
  .object-count {
    display: block;
    width: 100%;
  }

  .participants-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    margin-top: 8px;
  }

  .participants-table-body {
    min-width: 600px;
  }
}

#participants-main-right {
  display: none;
}

.table-cell-pill {
  border-radius: var(--border-radius-full, 999px);
  color: var(--text-strong, #1c1c1c);
  font-size: 12px;
  line-height: 16px;
  padding: 4px 8px;
  display: none;
}

.pill-registered {
  border-color: var(--notice-100);
  background-color: var(--notice-50);
  color: var(--notice-600);
}

.pill-scanned {
  border: 1px solid var(--surface-positive-border, #beeec5);
  background: var(--surface-positive-fade, #d4f4d9);
  color: var(--text-positive, #177726);
}

.pill-canceled {
  color: var(--text-negative, #9a1a32);
  border: 1px solid var(--surface-negative-border, #ffbfcc);
  background: var(--surface-negative-fade, #ffd5dd);
}

.table-cell-name {
  font-weight: 500;
}

.table-cell-email {
  color: var(--text-base, #3b3b3b);
}

#event-participants-table-row {
  .table-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    word-wrap: break-word;
    span {
      word-break: break-word;
    }
  }
}

.participants-not-found-wrapper {
  justify-content: center;
  align-items: center;
  display: flex;
}

.participants-not-found {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 60%;
  margin-top: 60px;
  @media (max-width: 600px) {
    max-width: 100%;
  }

  h2 {
    color: var(--dark-color);
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    text-align: center;
    margin: 12px 0 4px 0;
  }

  p {
    font-size: 14px;
    color: var(--black-color);
    line-height: 20px;
    text-align: center;
  }
}

#pagination-wrapper {
  div {
    text-align: left;
  }
}

#objects-count {
  @media (max-width: 600px) {
    margin-bottom: 0px;
  }
}

.participants-table-body {
  display: table;
  width: 100%;
}

/* Event details page styles */
.event-details-back-button {
  display: inline-flex;
  color: var(--text-brand, #2c9d62);
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 8px;

  span {
    margin-left: 4px;
  }
}

.event-details-btns {
  display: flex;
  align-items: flex-start;
  gap: 4px;
}

.card-btn {
  display: flex;
  width: 40px;
  height: 40px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: var(--border-radius-sm, 8px);
  border: 1px solid var(--surface-primary-border, #e3e3e3);
  background: var(--surface-primary-background, #fff);
  box-shadow:
    0px 0px 2px 0px rgba(8, 40, 13, 0.02),
    0px 2px 4px 0px rgba(8, 40, 13, 0.05);
  cursor: pointer;
}

.card-btn.event-share {
  padding: 0;
}

.event-share .share-drop-down .drop-down-content {
  right: 0;
  left: auto;
}

.card-btn.liked .unliked-icon {
  display: none;
}

.card-btn.favoriteEvent {
  padding: 8px 0;
}

.card-btn.favoriteCourse {
  padding: 8px 0;
}

.card-btn:not(.liked) .liked-icon {
  display: none;
}

#event-details-block {
  @media (max-width: 600px) {
    padding: 16px;
  }
}

.event-details-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  @media (max-width: 600px) {
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
  }

  h2 {
    font-size: 32px;
    font-weight: 600;
    line-height: 40px;

    @media (max-width: 600px) {
      font-size: 28px;
      line-height: 32px;
    }
  }
}

#event-details-tabs {
  margin-top: 8px;
  margin-bottom: 24px;
}

.event-details-thumb {
  border-radius: var(--border-radius-md, 12px);
  width: 100%;
  max-height: 405px;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}

#event-details-card {
  color: var(--text-base, #3b3b3b);
  margin-top: 16px;
  border-radius: var(--border-radius-md, 12px);

  @media (max-width: 600px) {
    margin: 8px 0;
  }

  p {
    min-height: 20px;
    margin-bottom: 16px;
  }

  strong {
    font-weight: bold;
  }
}

.event-apply-card {
  padding: 8px 16px;
  margin-bottom: 12px !important;
}

.event-pill-draft {
  color: var(--text-strong, #1c1c1c);
  border: 1px solid #e3e3e3;
  background: var(--surface-secondary-background, #f4f4f4);
}

.event-pill-success {
  color: var(--text-positive, #177726);
  border: 1px solid var(--surface-positive-border, #beeec5);
  background: var(--surface-positive-fade, #d4f4d9);
}

.event-pill-moderation {
  color: var(--text-notice, #a37827);
  border: 1px solid var(--surface-notice-border, #ffecc6);
  background: var(--surface-notice-fade, #fff2d9);
}

.event-pill-reject {
  color: var(--text-negative, #9a1a32);
  border: 1px solid var(--surface-negative-border, #ffbfcc);
  background: var(--surface-negative-fade, #ffd5dd);
}

.gray-hint {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: var(--border-radius-sm, 8px);
  border: 1px solid var(--surface-secondary-border, #e3e3e3);
  background: var(--surface-secondary-background, #f4f4f4);
  color: var(--text-base, #3b3b3b);
  font-size: 14px;
  line-height: 20px;
}

#participate-button {
  margin: 0 0 12px;
}

.watch-recording-button {
  font-weight: 500;
  line-height: 24px;
  margin: 12px 0 0;
  width: 100%;
  color: var(--text-strong, #1c1c1c);
}

.without-tabs {
  margin-top: 24px;
  margin-bottom: 24px;
  @media (max-width: 600px) {
    margin-top: 16px;
  }
}

#event-modal__container {
  padding: 16px;

  h2 {
    text-overflow: ellipsis;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
  }

  .modal__header {
    align-items: unset;
  }

  a {
    cursor: pointer;
  }

  hr {
    margin: 16px -16px;
    background: #e3e3e3;
    border: none;
    height: 1px;
  }

  .btn {
    width: auto;
    margin-top: 0px;
    @media (max-width: 600px) {
      width: 100%;
    }
  }

  .event-checkbox-text {
    @media (max-width: 600px) {
      display: block;
    }
  }
}

#application_submission_link,
#city-form-field,
#address-form-field,
#hall-form-field {
  display: none;
}

.event-qr__description {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.event-qr__description * {
  margin: 0;
  color: var(--text-base, #3b3b3b);
}

.event-qr__page .event-status__moderation {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
}

.event-qr__page .event-status__moderation img {
  max-width: 208px;
  width: 100%;
  object-fit: contain;
  object-position: center center;
}

.event-qr__page .event-status__moderation p {
  color: var(--text-strong, #1c1c1c);
  text-align: center;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
}

.event-qr__description h1 {
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 28px;
}

.event-qr__description p,
.event-qr__description h2,
.event-qr__description ul li {
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}

.event-qr__description h2 {
  font-weight: 600;
}

.event-qr__description ul {
  list-style-type: decimal;
  padding-left: 20px;
}

.event-qr__description ul li:not(:first-child) {
  margin-top: 12px;
}

.event-qr__poster {
  border-radius: var(--border-radius-md, 12px);
  border: var(--border-width, 1px) solid var(--surface-secondary-border, #e3e3e3);
  background: var(--surface-secondary-background, #f4f4f4);
  padding: 16px;
}

.event-qr__poster > h4 {
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  color: var(--text-strong, #1c1c1c);
}

#event-qr__poster {
  ul {
    border-top: var(--border-width, 1px) solid var(--surface-secondary-border, #e3e3e3);
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
    padding-top: 16px;
  }

  li {
    border-top: none;
    padding: 0;
    margin: 0;
  }

  .radio-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .radio-group > div {
    display: flex;
    gap: 4px;
    border-radius: var(--border-radius-sm, 8px);
    border: 1px solid var(--surface-primary-border, #e3e3e3);
    background: var(--surface-primary-background, #fff);
    width: 100%;
    padding: 4px;
    overflow: hidden;
  }

  .radio-button {
    flex: 1;
    cursor: pointer;
  }

  .radio-button input[type='radio'] {
    display: none;
  }

  .radio-button span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 4px;
    border-radius: 8px;
    transition: all 0.3s ease;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    color: var(--text-base, #3b3b3b);
    text-align: center;
    min-height: 2.5rem;
  }

  .radio-button input[type='radio']:checked + span {
    color: #fff;
  }

  .radio-button input[type='radio']:checked + span {
    background: var(--background-brand, #2c9d62);
    color: white;
  }

  .poster-item {
    border-bottom: var(--border-width, 1px) solid var(--surface-secondary-border, #e3e3e3);
    margin-bottom: 16px;
    padding-bottom: 16px;
    margin-top: 24px;
  }

  .poster-item__bg {
    border-radius: 8px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 100%),
      var(--surface-brand-background, #2c9d62);
    box-shadow: 0px 0px 80px 0px rgba(255, 255, 255, 0.4) inset;
    padding: 16px;
  }

  .qrcode_event {
    position: unset;
    max-width: 200px;
    margin: 24px auto 16px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    border-radius: var(--border-radius-lg, 20px);
    border: 1px solid var(--surface-primary-border, #e3e3e3);
    background: #fff;
    box-shadow:
      0px 0px 40px 0px rgba(255, 255, 255, 0.5),
      0px 100px 80px 0px rgba(0, 0, 0, 0.06),
      0px 41.778px 33.422px 0px rgba(0, 0, 0, 0.04),
      0px 22.336px 17.869px 0px rgba(0, 0, 0, 0.04),
      0px 12.522px 10.017px 0px rgba(0, 0, 0, 0.03),
      0px 6.65px 5.32px 0px rgba(0, 0, 0, 0.02),
      0px 2.767px 2.214px 0px rgba(0, 0, 0, 0.02);
  }

  .poster-item h2 {
    text-align: center;
    text-overflow: ellipsis;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    color: white;
    margin-top: 16px;
    margin-bottom: 16px;
  }

  .poster-item h3 {
    color: #fff;
    text-align: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
  }

  .poster-item span,
  .poster-item p {
    color: #fff;
    text-align: center;
    display: block;
    text-overflow: ellipsis;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
  }

  .poster-item h4 {
    color: #fff;
    text-align: center;
    display: block;
    text-overflow: ellipsis;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
  }

  .poster-item .center-wrap {
    margin-bottom: 8px;
  }

  .poster-item span,
  .poster-item h4 {
    opacity: 0.5;
  }

  .btn {
    border-radius: var(--border-radius-sm, 8px);
    border: 1px solid var(--brand-400, #4eb97e);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%),
      var(--surface-brand-background, #2c9d62);
    box-shadow:
      0px 0px 2px 0px rgba(8, 40, 13, 0.02),
      0px 2px 4px 0px rgba(8, 40, 13, 0.05);
    margin: 0;
  }
}

.event-v2-wrapper {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 24px;

  .main-right {
    max-width: 240px;
    width: 100%;
  }

  .event-create-main {
    flex: 1;
  }
}

.qr_counter-banner {
  margin-top: 44px;

  .card {
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;

    > div {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: 4px;
    }

    .badge {
      border-radius: var(--border-radius-full, 999px);
      border: 1px solid var(--surface-brand-border, #d8f3e0);
      background: var(--surface-brand-fade, #effaf3);
      color: var(--text-brand, #2c9d62);
      margin: 0;
      font-size: 12px;
      line-height: 16px;
    }

    h2 {
      font-size: 16px;
      line-height: 24px;
      font-weight: 500;
      color: var(--text-strong, #1c1c1c);
    }

    p {
      color: var(--text-base, #3b3b3b);
      font-size: 14px;
      line-height: 20px;
      font-weight: 400;
    }
  }
}

/* profile events */

.main-profile-event > .main-content {
  max-width: 100%;

  @media (min-width: 954px) {
    padding-right: 0;
  }
}

.main-profile-event > .main-content > .page-wrapper {
  max-width: 100%;
}

.event-participant {
  .title {
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: 40px;
    color: #1c1c1c;
    margin-top: 8px;
  }

  .event-participant__cards {
    margin-top: 24px;
  }

  .event-card-main {
    overflow: unset;

    .drop-down {
      z-index: 1;
    }
  }

  .event-card-wrap {
    border-radius: 12px;
  }

  .event-card-statuses {
    padding: 12px 12px var(--rem-1500, 24px) 12px;
    border-radius: 12px 12px 0px 0px;
    margin-bottom: -12px;
    border: var(--border-width, 1px) solid var(--surface-secondary-border, #e3e3e3);
    background: var(--surface-secondary-background, #f4f4f4);
    color: var(--text-base, #3b3b3b);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;

    .event-share {
      z-index: 2;
      .drop-down-content a {
        color: #1c1c1c;
      }
    }
  }

  .event-card-statuses.green {
    border: var(--border-width, 1px) solid var(--surface-positive-border, #beeec5);
    background: var(--surface-positive-fade, #d4f4d9);
    color: var(--text-positive, #177726);
  }

  .event-card-statuses.warning {
    border: var(--border-width, 1px) solid var(--surface-notice-border, #ffecc6);
    background: var(--surface-notice-fade, #fff2d9);
    color: var(--text-notice, #a37827);
  }

  .event-card {
    overflow: hidden;
    position: relative;
  }

  .event-description {
    max-height: 200px;
  }
}

.event-my-events {
  width: 100%;
  > .btn {
    padding-top: 8px;
    padding-bottom: 8px;
    margin-bottom: 0;
    border-radius: var(--border-radius-sm, 8px);
    border: 1px solid var(--brand-400, #4eb97e);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%),
      var(--surface-brand-background, #2c9d62);
    box-shadow:
      0px 0px 2px 0px rgba(8, 40, 13, 0.02),
      0px 2px 4px 0px rgba(8, 40, 13, 0.05);
  }
}

@media (max-width: 658px) {
  .event-participant {
    /* padding-left: 16px; */
    /* padding-right: 16px; */
  }

  .event-card-main .event-thumb img {
    object-fit: contain;
  }
}

.event-participant-submitted {
  text-transform: none;
  border-radius: var(--border-radius-sm, 8px);
  border: 1px solid var(--surface-positive-border, #beeec5);
  background: var(--surface-positive-fade, #d4f4d9);
  margin: 0;
  width: 100%;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-positive, #177726);
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
}

#event-create-upload-image .edit-crop-btn {
  display: none;
}

.modal__event-delete {
  p {
    color: var(--text-strong, #1c1c1c);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
  }
  form {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 15px;
  }
  .btn {
    color: white;
    border-radius: var(--border-radius-sm, 8px);
    border: 1px solid var(--brand-400, #4eb97e);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%),
      var(--surface-brand-background, #2c9d62);
    box-shadow:
      0px 0px 2px 0px rgba(8, 40, 13, 0.02),
      0px 2px 4px 0px rgba(8, 40, 13, 0.05);
  }
}

@media (max-width: 600px) {
  .event-create-block {
    padding: 16px;
    h1 {
      font-size: 28px;
    }
    .receive-coins {
      .more-about {
        margin-left: 0;
        margin-top: 8px;
      }
    }
  }

  .event-form-top-block {
    .filling-language {
      margin-top: 16px;
    }
  }

  #event-form-card-languages {
    margin-top: 10px;
  }

  .event-back-button {
    margin-top: 10px;
  }

  #event-yandex-translate {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    .right {
      width: 100%;
      .btn {
        width: 100%;
      }
    }
  }

  .event-details-btns {
    width: 100%;
    justify-content: flex-end;
    align-items: center;
  }

  #event-details-tabs {
    display: block !important;
  }
}

@media (min-width: 859px) {
  .main-account-event {
    flex-wrap: nowrap !important;
  }
}