/* Clubs carousel cards */
.club-card {
    flex: 0 0 auto;
    width: 140px;
    height: 120px; /* фиксированная высота для равных карточек */
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 10px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  .club-card__top {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .club-card__avatar {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    object-fit: cover;
  }
  
  .club-card__text {
    min-width: 0;
  }
  
  .club-card__title {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .club-card__members {
    font-size: 12px;
    color: #777;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  
  .club-card__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    flex-direction: column;
  }
  
  .club-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #444;
    background: #f5f7fa;
    border: 1px solid #e7eaef;
    border-radius: 999px;
    padding: 3px 8px;
    max-width: 100%;
    overflow: hidden;
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .club-card__badge-icon {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    object-fit: cover;
  }
  
  .club-card__privacy {
    font-size: 11px;
  }
  
  .club-card__privacy--private { color: #b06; }
  .club-card__privacy--public { color: #2a7; }
  
  @media screen {
      :root {
          --display-width: 100%;
          --menu-width: 25%;
          --tools-width: 30%;
          --header-height: 35px;
          --font-main: 16px;
          --font-title: 20px;
          --font-subtitle: 18px;
          --font-notice: 14px;
          --header-height: 60px;
      }
  }
  
  :root {
      color-scheme: light only;
      --font-family: 'Montserrat', sans-serif;
      --color-main: #48038c;
      --color-main-light-100: #e1bbe6;
      --color-addit: #86059C;
      --color-menu: #023342;
      --color-contrast: white;
      --color-background-main: #fcfcfc;
      --color-background-input: #f6f6f6;
      --color-gray-darkest: #1c1c1c;
      --color-gray-dark: #5e5e5e;
      --color-gray-light: #6B606B;
      --color-gray-lightest: #e3e3e3;
      --color-background-modalnav: #C1DEE3;
      --color-modalnav-active: #FFFFFF;
      --color-modalnav: #F2F3F4;
      --primary-color: #8A2BE2;
      --primary-color-dark: #6A1B9A;
      --primary-color-light: #E6D5FA;
      --border-color: #D1C4E9;
      --card-bg: #FFFFFF;
      --bg-color: #fcfcfd;
      --text-color: #4A148C;
      --danger-color: #FF4081;
      --danger-color-dark: #C51162;
  }
  
  html {
      color-scheme: light only;
      background-color: #fcfcfc;
  }
  
  body {
      color-scheme: light only;
      background-color: #fcfcfc;
      color: #333;
  }
  
  /* Ограничения высоты для изображений и видео на ПК версии */
  @media (min-width: 769px) {
      /* Ограничение высоты для вертикальных изображений и видео в сообщениях */
      .messagecontaining img,
      .messagecontaining video {
          max-height: 85vh !important;
          object-fit: contain !important;
      }
      
      /* Ограничение для изображений и видео в слайдерах */
      .swiper-slide img,
      .swiper-slide video {
          max-height: 85vh !important;
      }
      
      /* Ограничение для изображений в диалогах */
      .dialogspage .messagecontaining img,
      .dialogspage .messagecontaining video {
          max-height: 85vh !important;
      }
      
      /* Ограничение для всех изображений и видео в сообщениях */
      .messageimg img,
      .messageimg video {
          max-height: 85vh !important;
          max-width: 100% !important;
      }
      
      /* Ограничение для модальных окон с медиа */
      #allmessageattachments .swiper-slide img,
      #allmessageattachments .swiper-slide video {
          max-height: 85vh !important;
      }
      
      /* Ограничение для изображений и видео в новостях */
      .newscontaining img,
      .newscontaining video {
          max-height: 85vh !important;
      }
      
      /* Ограничение для видео в контейнерах */
      .videoscontaining video {
          max-height: 85vh !important;
      }
      
      /* Ограничение для изображений в новостях */
      .newsimg img {
          max-height: 85vh !important;
      }
  }
  
  @media screen and (orientation:portrait) {
      .page {
          /* min-height: 100%!important; */
          z-index: 1000000!important;
          background-color: var(--color-background-main);
          display: none;
      }
  }
  .page {
      display: none;
      padding-bottom: 55px;
      overflow: auto;
  }
  .page-active {
      display: block;
      /* overflow: auto; */
      /* height: var(--display-height); */
      overflow-x: hidden;
  }
  * {
      font-family: var(--font-family);
      text-shadow: none!important;
      outline: 0!important
  }
  
  @font-face {
      font-display: optional;
  }
  
  #overlay,div#preloadoverlay {
      visibility: hidden;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      opacity: 0;
      -webkit-transition: opacity .3s ease-in 0s;
      -o-transition: opacity .3s ease-in 0s;
      transition: opacity .3s ease-in 0s
  }
  
  .emoji {
      display: inline-block;
      width: 22px !important;
      height: 22px !important;
      margin-right: 2px !important;
      float: none !important;
      border-radius: 0 !important;
      vertical-align: middle;
  }
  
  #overlay {
      bottom: 0;
      z-index: 100000;
      overflow-y: auto;
      overflow-x: hidden
  }
  
  #modalwindow {
      position: absolute;
      background-color: #fff;
      padding: 0;
      display: none;
      z-index: 4;
      max-width: 100%;
      max-height: 100%;
      -webkit-box-sizing: border-box;
      box-sizing: border-box
  }
  
  /* Скрытые модальные окна не должны блокировать клики */
  .modal-overlay.hidden,
  .modal-overlay[style*="display: none"],
  #authRequiredModal.hidden,
  #authRequiredModal[style*="display: none"],
  .modal.hidden,
  .modal[style*="display: none"] {
      pointer-events: none !important;
      z-index: -1 !important;
  }
  
  /* Когда модальное окно видимо, оно должно быть выше */
  .modal-overlay:not(.hidden):not([style*="display: none"]),
  #authRequiredModal:not(.hidden):not([style*="display: none"]) {
      pointer-events: auto !important;
  }

  /* Стили для модальных окон на десктопе */
  @media (min-width: 769px) {
      #modalwindow {
          position: fixed !important;
          top: 50% !important;
          left: 50% !important;
          transform: translate(-50%, -50%) !important;
          max-width: 600px !important;
          max-height: 80vh !important;
          width: auto !important;
          height: auto !important;
          margin: 0 !important;
          border-radius: 12px;
          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
      }
      
      /* Модальные окна с классом modal */
      .modal-overlay,
      .modal-backdrop {
          position: fixed !important;
          top: 0 !important;
          left: 0 !important;
          right: 0 !important;
          bottom: 0 !important;
          width: 100% !important;
          height: 100% !important;
          display: none !important;
          align-items: center !important;
          justify-content: center !important;
      }
      
      /* Модальные окна показываются только с классом active */
      .modal-overlay.active,
      .modal-backdrop.active {
          display: flex !important;
      }
      
      /* Модальные окна поиска должны быть скрыты по умолчанию */
      #filterModal:not(.active),
      #postFilterModal:not(.active),
      .post-filter-modal:not(.active) {
          display: none !important;
          visibility: hidden !important;
          opacity: 0 !important;
      }
      
      /* Модальные окна поиска показываются только с классом active */
      #filterModal.active,
      #postFilterModal.active,
      .post-filter-modal.active {
          display: flex !important;
          visibility: visible !important;
          opacity: 1 !important;
      }
      
      .modal-content,
      .modal {
          position: relative !important;
          max-width: 600px !important;
          max-height: 80vh !important;
          width: auto !important;
          height: auto !important;
          margin: 0 !important;
          border-radius: 12px;
          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
          overflow-y: auto;
      }
      
      /* Для широких модальных окон */
      .modal-lg,
      .modal-large {
          max-width: 900px !important;
      }
      
      /* Для узких модальных окон */
      .modal-sm,
      .modal-small {
          max-width: 400px !important;
      }
      
      /* Переопределение для модальных окон, которые должны быть на всю ширину/высоту на мобильных */
      #modalwindow.fullscreen,
      .modal.fullscreen,
      .modal-content.fullscreen {
          max-width: 95vw !important;
          max-height: 95vh !important;
      }
      
      /* Модальное окно лайков - ограниченный размер, центрирование (только когда видимо) */
      #likesmodalparent[style*="display: block"] {
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          background: rgba(0, 0, 0, 0.5) !important;
          left: 0 !important;
      }
      
      #likesmodalparent[style*="display: block"] .likes-modal,
      #likesmodalparent[style*="display: block"] .comments-modal-new,
      #likesmodalparent[style*="display: block"] > div {
          position: relative !important;
          top: auto !important;
          left: auto !important;
          transform: none !important;
          width: 500px !important;
          max-width: 90vw !important;
          height: auto !important;
          max-height: 80vh !important;
          border-radius: 12px !important;
          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
          overflow: hidden !important;
      }
      
      /* Модальное окно комментариев - ограниченный размер, центрирование (только когда видимо) */
      #newscommentsparent[style*="display: block"] {
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
      }
      
      #newscommentsparent[style*="display: block"] #newscomments,
      #newscommentsparent[style*="display: block"] .comments-modal-new {
          position: relative !important;
          top: auto !important;
          left: auto !important;
          right: auto !important;
          bottom: auto !important;
          transform: none !important;
          width: 600px !important;
          max-width: 90vw !important;
          height: auto !important;
          max-height: 85vh !important;
          border-radius: 12px !important;
          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
          overflow: hidden !important;
          padding: 0 !important;
      }
      
      /* Модальное окно добавления записи - ограниченный размер, центрирование */
      #newcontent[style*="display: block"],
      .news-form-modal[style*="display: block"] {
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          background: rgba(0, 0, 0, 0.5) !important;
      }
      
      #newcontent[style*="display: block"] .news-form-content,
      .news-form-modal[style*="display: block"] .news-form-content {
          position: relative !important;
          top: auto !important;
          left: auto !important;
          right: auto !important;
          bottom: auto !important;
          inset: auto !important;
          transform: none !important;
          width: 700px !important;
          max-width: 90vw !important;
          height: auto !important;
          max-height: 85vh !important;
          border-radius: 12px !important;
          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
          overflow: hidden !important;
      }
      
      /* Для старого варианта #newcontent */
      #newcontent[style*="display: block"] > * {
          position: relative !important;
          top: auto !important;
          left: auto !important;
          right: auto !important;
          bottom: auto !important;
          width: 700px !important;
          max-width: 90vw !important;
          height: auto !important;
          max-height: 85vh !important;
          margin: auto !important;
          border-radius: 12px !important;
          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
          overflow-y: auto !important;
      }
      
      /* Переопределяем inline стили из JavaScript для модального окна лайков (только когда видимо) */
      #likesmodalparent[style*="display: block"] .likes-modal,
      #likesmodalparent[style*="display: block"] .likes-modal[style*="width: 100%"],
      #likesmodalparent[style*="display: block"] .likes-modal[style*="height: 100%"] {
          width: 500px !important;
          max-width: 90vw !important;
          height: auto !important;
          max-height: 80vh !important;
          position: relative !important;
          top: auto !important;
          left: auto !important;
          transform: none !important;
      }
      
      /* Переопределяем стили для старого формата модального окна лайков (только когда видимо) */
      #likesmodalparent[style*="display: block"] #likesmodalheader,
      #likesmodalparent[style*="display: block"] #likesmodalcontent {
          width: 100% !important;
      }
      
      #likesmodalparent[style*="display: block"] #likesmodalcontent {
          max-height: calc(80vh - 100px) !important;
          overflow-y: auto !important;
      }
      
      /* Модальное окно выбора хобби - ограниченный размер, центрирование */
      #hobbyModal.modal[style*="display: block"],
      #hobbyModal[style*="display: block"] {
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          background: rgba(0, 0, 0, 0.5) !important;
          top: 0 !important;
          left: 0 !important;
          right: 0 !important;
          bottom: 0 !important;
      }
      
      #hobbyModal.modal[style*="display: block"] .modal-content,
      #hobbyModal[style*="display: block"] .modal-content,
      #hobbyModal.modal .modal-content {
          position: relative !important;
          top: auto !important;
          left: auto !important;
          right: auto !important;
          bottom: auto !important;
          inset: auto !important;
          transform: none !important;
          width: 600px !important;
          max-width: 90vw !important;
          height: auto !important;
          max-height: 85vh !important;
          border-radius: 12px !important;
          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
          overflow: hidden !important;
          margin: auto !important;
      }
      
      /* Модальные окна в профиле - ограниченный размер, центрирование */
      .profilepage #modalwindow[style*="display: block"],
      .profilepage #modalwindow[style*="display: flex"] {
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          background: rgba(0, 0, 0, 0.5) !important;
          backdrop-filter: blur(8px) !important;
      }
      
      /* Устанавливаем z-index: 1 для top-navbar при открытом модальном окне */
      .profilepage #modalwindow[style*="display: block"] ~ .top-navbar,
      .profilepage #modalwindow[style*="display: flex"] ~ .top-navbar,
      body:has(.profilepage #modalwindow[style*="display: block"]) .top-navbar,
      body:has(.profilepage #modalwindow[style*="display: flex"]) .top-navbar {
          z-index: 1 !important;
      }
      
      .profilepage #modalwindow[style*="display: block"] #modalwindowcontent,
      .profilepage #modalwindow[style*="display: flex"] #modalwindowcontent {
          position: relative !important;
          top: auto !important;
          left: auto !important;
          right: auto !important;
          bottom: auto !important;
          width: 90vw !important;
          max-width: 1200px !important;
          height: auto !important;
          max-height: 90vh !important;
          margin: auto !important;
          border-radius: 20px !important;
          box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6) !important;
          overflow: hidden !important;
          background: rgba(255, 255, 255, 0.98) !important;
          backdrop-filter: blur(10px) !important;
          border: 1px solid rgba(255, 255, 255, 0.2) !important;
      }
      
      /* Специальные стили для модального окна аватарок */
      .profilepage #modalwindow.modalwindowavatar[style*="display: block"] #modalwindowcontent,
      .profilepage #modalwindow.modalwindowavatar[style*="display: flex"] #modalwindowcontent,
      .profilepage #modalwindow.modalwindowavatar[style*="display: block"] #modalwindowcontentavatars,
      .profilepage #modalwindow.modalwindowavatar[style*="display: flex"] #modalwindowcontentavatars {
          width: 90vw !important;
          max-width: 1200px !important;
          max-height: 90vh !important;
          border-radius: 20px !important;
          box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6) !important;
          background: rgba(255, 255, 255, 0.98) !important;
          backdrop-filter: blur(10px) !important;
          border: 1px solid rgba(255, 255, 255, 0.2) !important;
      }
      
      /* Модальные окна добавления классов и интересов в профиле */
      .profilepage .modaladdclassesblock[style*="display: block"],
      .profilepage .modalinterestsblock[style*="display: block"] {
          position: relative !important;
          top: auto !important;
          left: auto !important;
          width: auto !important;
          height: auto !important;
          max-width: 90vw !important;
          max-height: 85vh !important;
          margin: auto !important;
          border-radius: 12px !important;
          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
          overflow-y: auto !important;
      }
  
  }
  
  [contenteditable][placeholder]:empty:before {
      content: attr(placeholder);
      color: #999
  }
  
  [contenteditable][placeholder]:empty:focus:before {
      content: ''
  }
  
  html {
      /*background-color: var(--color-background-main);*/
      height: 100%;
  }
  
  body {
      overflow-x: hidden;
      margin: auto;
      padding: 0;
      max-width: var(--display-width);
      color: #000;
      font-family: var(--font-family);
      /* height: 100%; */
      background-color: var(--color-background-main);
      /* overflow: hidden; */
  }
  
.tooltip-trigger-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ===================== */
/* Современные карточки новостей (совпадают с макетом заглушек) */
/* Сохраняем существующие классы/ID, только обновляем внешний вид */
#newslistparent {
    display: grid;
    gap: 16px;
}

#newslistparent .new {
    width: 100%;
    margin: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 10px 25px -10px rgba(0,0,0,0.12);
    overflow: hidden;
}

#newslistparent .new + .new {
    margin-top: 0;
}

#newslistparent .infonew {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 16px 8px;
    position: relative;
}

#newslistparent .authoravatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--border-color);
}

#newslistparent .usertime {
    position: static;
    transform: none;
    flex: 1;
    min-width: 0;
    margin: 0;
}

#newslistparent .usertime > span:nth-child(1) {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 2px;
}

#newslistparent .usertime > span:nth-child(1) a {
    color: var(--text-color) !important;
    text-decoration: none;
}

#newslistparent .usertime > span:nth-child(2),
#newslistparent .usertime > span:nth-child(3) {
    font-size: 12px;
    color: var(--muted-foreground, #6b7280);
    margin-bottom: 0;
}

#newslistparent .newsoptions {
    margin-left: auto;
    flex-shrink: 0;
    position: relative;
}

#newslistparent .newsoptions-content-parent {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    z-index: 1000;
}

#newslistparent .opennewsoptions {
    position: static;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--primary-color-light, rgba(121,79,248,0.08));
    color: var(--primary-color);
    border: 1px solid var(--border-color);
    cursor: pointer;
}

#newslistparent .newsoptions-content {
    position: static;
    width: 240px;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.15);
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    padding: 8px 0;
    max-width: calc(100vw - 32px);
}

#newslistparent .newsoptions-content ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#newslistparent .newsoptions-content ul li {
    padding: 12px 16px;
    font-size: 14px;
    color: var(--text-color);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#newslistparent .newsoptions-content ul li:hover {
    background-color: var(--primary-color-light, rgba(121,79,248,0.08));
}

#newslistparent .newheader {
    padding: 0 16px;
    margin: 0 0 4px;
    text-align: left;
    font-size: 18px;
    color: var(--text-color);
}

#newslistparent .newtext {
    padding: 0 16px 8px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--muted-foreground, #4b5563);
}

#newslistparent .swiper {
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
    background: var(--muted, #f3f4f6);
}

#newslistparent .swiper-slide img,
#newslistparent .swiper-slide video {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

#newslistparent .swiper-pagination {
    color: var(--text-color);
}

#newslistparent audio {
    width: calc(100% - 32px);
    margin: 8px 16px 0;
    border-radius: 8px;
}

#newslistparent .newsdoc {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    margin: 4px 16px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-color, #fff);
    text-decoration: none;
    color: var(--text-color);
}

#newslistparent .newsdoc-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--primary-color-light, rgba(121,79,248,0.12));
    color: var(--primary-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#newslistparent .newsdoc-name {
    font-weight: 600;
    font-size: 14px;
}

#newslistparent .newsdoc-extension {
    font-size: 12px;
    color: var(--muted-foreground, #6b7280);
    margin-left: auto;
}

#newslistparent .hobby-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 16px 8px;
}

#newslistparent .hobby-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--primary-color-light, rgba(121,79,248,0.1));
    border: 1px solid var(--border-color);
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 600;
}

#newslistparent .hobby-tag img {
    width: 18px;
    height: 18px;
}

#newslistparent .newsactions {
    margin-top: 4px;
    padding: 12px 16px;
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 10px;
}

#newslistparent .like-passive,
#newslistparent .like-active,
#newslistparent .commentsheader,
#newslistparent .torepost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--primary-color-light, rgba(121,79,248,0.08));
    color: var(--primary-color);
    cursor: pointer;
}

#newslistparent .like-active {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

#newslistparent .counthearts,
#newslistparent .countcomments,
#newslistparent .countreposts {
    font-size: 13px;
    color: var(--muted-foreground, #4b5563);
    margin-right: 8px;
}

#newslistparent .countreposts:last-child {
    margin-right: 0;
}

#newslistparent .toopenpublic {
    display: inline-block;
    padding: 0 16px 16px;
    font-size: 13px;
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
}

#newslistparent .new iframe {
    width: 100%;
    min-height: 260px;
    border: none;
    border-radius: 12px;
    margin: 8px 0;
}

@media (max-width: 640px) {
    #newslistparent .new {
        border-radius: 12px;
    }

    #newslistparent .infonew {
        padding: 14px 14px 8px;
    }

    #newslistparent .newheader {
        font-size: 16px;
    }

    #newslistparent .newtext {
        font-size: 13px;
    }
}

.help-tooltip {
    border: none;
    background: transparent;
    color: var(--primary-color);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    font-size: 1.1rem;
    position: relative;
    transition: color 0.2s ease, transform 0.2s ease;
    flex-shrink: 0;
    touch-action: manipulation;
}

.help-tooltip i {
    pointer-events: none;
}

.help-tooltip:hover,
.help-tooltip:focus-visible {
    color: var(--primary-color-dark);
}

.help-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 10px);
    right: 0;
    /* transform: translateX(-50%); */
    background: rgba(23, 23, 23, 0.95);
    color: #fff;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 0.8rem;
    line-height: 1.3;
    white-space: normal;
    width: max-content;
    max-width: 260px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
    z-index: 10001;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.help-tooltip::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: rgba(23, 23, 23, 0.95) transparent transparent transparent;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
    z-index: 10001;
}

.help-tooltip:hover::after,
.help-tooltip:hover::before,
.help-tooltip:focus-visible::after,
.help-tooltip:focus-visible::before,
.help-tooltip.is-visible::after,
.help-tooltip.is-visible::before {
    opacity: 1;
    /* visibility: visible; */
}

.help-tooltip[data-tooltip=""]::after,
.help-tooltip[data-tooltip=""]::before {
    display: none;
}

.help-tooltip.is-visible {
    color: var(--primary-color-dark);
}

/* Исправление для подсказок внутри контейнеров с overflow - скрываем псевдоэлементы */
.tooltip-overflow-fix.is-visible::after,
.tooltip-overflow-fix.is-visible::before {
    display: none !important;
}

/* Скрываем псевдоэлементы для всех подсказок во вкладках */
.hobby-tabs .help-tooltip.is-visible::after,
.hobby-tabs .help-tooltip.is-visible::before,
.profile-nav-list .help-tooltip.is-visible::after,
.profile-nav-list .help-tooltip.is-visible::before,
.hobby-tab .help-tooltip.is-visible::after,
.hobby-tab .help-tooltip.is-visible::before,
.profile-nav-item .help-tooltip.is-visible::after,
.profile-nav-item .help-tooltip.is-visible::before {
    display: none !important;
}

/* Стили для фиксированных подсказок в body */
.help-tooltip-fixed {
    position: fixed;
    background: rgba(23, 23, 23, 0.95);
    color: #fff;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 0.8rem;
    line-height: 1.3;
    white-space: normal;
    max-width: 260px;
    z-index: 1000000001;
    pointer-events: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

@media (max-width: 480px) {
    .help-tooltip::after {
        max-width: calc(100vw - 40px);
    }
}

  a:-webkit-any-link {
      cursor: pointer;
      text-decoration: none;
      -webkit-text-decoration-color: #fff;
      text-decoration-color: #fff;
      color: var(--color-menu);
      font-weight: 400;
  }
  
  button,input,select {
      outline: 0!important
  }
  
  .container {
      margin: auto;
      padding: 0;
      width: 100%;
      text-align: center;
      height: 100%;
      margin-top: 69px;
  }
  
  #header {
      padding: 10px 0;
      width: 100%;
      background-color: white;
      box-shadow: 0 5px 6px -4px rgb(0 0 0 / 20%);
      height: var(--header-height);
      font-size: var(--font-subtitle);
      color: white;
      max-width: var(--display-width);
      margin: auto;
      margin-bottom: 14px;
      position: fixed;
      top: 0;
      z-index: 100000;
  }
  
  .logo {
      display: inline-block;
      height: 100%;
      width: auto;
      margin-left: 13px;
  }
  
  .logo img {
      height: 100%;
  }
  
  #header>a,nav#menu {
      display: inline-block
  }
  
  #header>a {
      display: inline-block;
      float: right;
      margin: 0 7px;
      height: var(--header-height);
      text-align: center;
  }
  
  #header>a>img {
      width: 35px;
      border-radius: 100%;
  }
  
  #header>a>span {
      text-decoration: none;
      font-size: calc(var(--font-notice) - 2px);
      text-align: center;
      display: inline-block;
      vertical-align: top;
  }
  
  nav#menu {
      margin-top: 69px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      width: 100%
  }
  
  .top-menu {
      /* margin: 0; */
      list-style: none;
      font-size: var(--font-main);
      font-family: var(--font-family);
      text-align: center;
      padding-left: 10px;
      display: inline-block;
      margin: 0 10px;
      background: white;
      border-radius: 15px;
      padding: 15px;
      border: 1px solid var(--color-gray-lightest);
      margin-bottom: 15px;
  }
  
  .top-menu a {
      width: 100%;
      display: inline-block;
      margin-bottom: -4px;
  }
  
  .top-menu li {
      margin: 5px auto;
      padding: 10px 35px 10px 10px;
      cursor: pointer;
      border-radius: 4px;
      position: relative;
  }
  
  .top-menu li:first-child {
      margin-top: 0
  }
  
  .top-menu li:after {
      content: " ";
      display: table;
      clear: both
  }
  
  .top-menu li>span {
      color: var(--color-menu);
      float: left;
      height: 25px;
  }
  
  .top-menu li>span>img {
      width: 25px;
      margin-right: 10px
  }
  
  .top-menu li>span>span {
      vertical-align: top;
      line-height: 25px;
      font-size: 15px;
      color: black;
  }
  
  span.countnew {
      position: absolute;
      top: 12.5px;
      left: 145px;
      width: 20px;
      /* padding: 0 7px; */
      height: 20px;
      color: white !important;
      border-radius: 15px;
      line-height: 20px !important;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 12px !important;
      background-color: #A60703;
      font-weight: bold;
  }
  
  div#mobilemenu {
      width: 100%;
      position: fixed;
      bottom: 0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: distribute;
      justify-content: space-around;
      background-color: #fff;
      padding: 7px 0;
      -webkit-box-shadow: 0 0 5px rgba(0,0,0,.3);
      box-shadow: 0 0 5px rgba(0,0,0,.3);
      z-index: 10000;
      height: 55px;
      box-sizing: border-box;
  }
  
  #mobilemenu img {
      width: 20px;
      margin-bottom: 2px;
  }
  div#mobilemenu a {
      position: relative;
      opacity: .5;
  }
  
  div#mobilemenu span {
      font-size: calc(var(--font-notice) - 2px);
      text-align: center;
      display: inline-block;
      font-weight: bold;
      color: #787878;
  }
  
  span.bottommenucounters {
      position: absolute;
      top: -5px;
      right: -11px;
      width: 22px;
      height: 22px;
      background-color: #c41f33;
      color: white !important;
      border-radius: 100%;
      line-height: 22px;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 10px !important;
      font-weight: bold;
      text-align: center;
      line-height: 22px;
      padding: 0;
  }
  
  aside#tools,main#content {
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      display: inline-block;
  }
  
  /*main#content {
      overflow-y: auto;
      width: 100%;
      height: calc(100% - 75px);
      overflow-x: hidden;
  }*/
  
  main#content {
      overflow-y: auto;
      width: 100%;
      height: 100%;
      overflow-x: hidden;
  }
  
  aside#tools {
      position: sticky;
      top: 20px;
      width: var(--tools-width);
      float: right;
      margin-left: 20px
  }
  
  input[type=checkbox]:checked,input[type=checkbox]:not(:checked),input[type=radio]:checked,input[type=radio]:not(:checked) {
      position: absolute;
      left: -9999px;
  }
  
  input[type=checkbox]:checked+label,input[type=checkbox]:not(:checked)+label,input[type=radio]:checked+label,input[type=radio]:not(:checked)+label {
      display: inline-block;
      position: relative;
      padding-left: 28px;
      line-height: 20px;
      cursor: pointer
  }
  
  input[type=checkbox]:checked+label:before,input[type=checkbox]:not(:checked)+label:before,input[type=radio]:checked+label:before,input[type=radio]:not(:checked)+label:before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 18px;
      height: 18px;
      border: 1px solid #ddd;
      background-color: #fff
  }
  
  input[type=checkbox]:checked+label:before,input[type=checkbox]:not(:checked)+label:before {
      border-radius: 2px
  }
  
  input[type=radio]:checked+label:before,input[type=radio]:not(:checked)+label:before {
      border-radius: 100%
  }
  
  input[type=checkbox]:checked+label:after,input[type=checkbox]:not(:checked)+label:after,input[type=radio]:checked+label:after,input[type=radio]:not(:checked)+label:after {
      content: "";
      position: absolute;
      -webkit-transition: all .2s ease;
      -o-transition: all .2s ease;
      transition: all .2s ease
  }
  
  input[type=checkbox]:checked+label:after,input[type=checkbox]:not(:checked)+label:after {
      left: 3px;
      top: 4px;
      width: 12px;
      height: 8px;
      border-radius: 1px;
      border-left: 4px solid var(--color-addit);
      border-bottom: 4px solid var(--color-addit);
      -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      transform: rotate(-45deg)
  }
  
  input[type=radio]:checked+label:after,input[type=radio]:not(:checked)+label:after {
      left: 5px;
      top: 5px;
      width: 10px;
      height: 10px;
      border-radius: 100%;
      background-color: var(--color-addit)
  }
  
  input[type=checkbox]:not(:checked)+label:after,input[type=radio]:not(:checked)+label:after {
      opacity: 0
  }
  
  input[type=checkbox]:checked+label:after,input[type=radio]:checked+label:after {
      opacity: 1
  }
  
  .loader {
      /* display: none; */
      top: 57px!important;
      bottom: 57px!important;
      left: 0!important;
      right: 0;
      position: fixed!important;
      width: 100%!important;
      height: calc(100% - 113px)!important;
      margin: 0!important;
      background-color: var(--color-background-main)!important;
      opacity: 1;
      border-radius: 0!important;
      z-index: 100000000000!important;
  }
  
  .loader img {
      border-radius: 100%;
      position: absolute;
      top: calc(50% - 30px);
      left: calc(50% - 30px);
  }
  
  .slick-list {
      height: auto !important;
  }
  
   #news-content {
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      width: 100%;
      margin-top: 20px;
      display: inline-block
  }
   #newcontent {
      margin-bottom: 7px;
      overflow: hidden;
      /* box-shadow: 0 0 10px 3px rgb(221 221 221); */
      /* border-radius: 15px; */
      /* border: 1px solid var(--color-gray-lightest); */
      box-sizing: border-box;
      position: fixed;
      bottom: 0;
      top: 0;
      left: 0;
      right: 0;
      background-color: white;
      z-index: 10000000;
      display: none;
      overflow-y: auto;
      overflow-x: hidden;
  }
  
  .profilepage #newcontent {
   display: none;
  }
  
   #addingnew,  #newheader {
      width: 100%;
      margin: auto;
      font-size: 0
  }
  
   #newheader {
      display: none;
      padding: 10px;
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      border: 1px solid #f6f6f6;
      border-bottom: 0;
      font-size: 16px;
      text-align: left;
      background-color: #fff;
      font-family: var(--font-family);
      min-height: calc(41px)
  }
  
   #newheader[placeholder]:empty:before {
      content: attr(placeholder);
      color: #999
  }
  
   #newheader[placeholder]:empty:focus:before {
      content: ''
  }
  
   #new {
      width: 100%;
      margin: auto;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      padding: 10px;
      border: 1px solid #f6f6f6;
      font-size: 16px;
      background-color: #fff;
      text-align: left;
      font-family: var(--font-family);
      display: block;
      height: auto;
      min-height: 5em;
      max-height: 12em;
      overflow: auto;
      line-height: 1.42857143;
      color: #555;
      cursor: text;
      resize: none;
  }
  
   #row {
      display: none
  }
  
   #outputMulti {
      /* display: flex; */
      height: 120px;
      padding: 15px 10px 15px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      background-color: #fff;
      overflow-x: auto;
      white-space: nowrap;
      text-align: left;
  }
  
   div#outputMulti:empty {
      padding: 0;
      height: 0;
  }
  #outputMulti>div.loaditem, .editoutputMulti>div.loaditem {
      display: inline-block;
      width: 100px;
      height: 100px;
      padding: 35px;
      box-sizing: border-box;
  }
  
  .loaditem img {
      width:30px;
      height: 30px;
      position: absolute;
      top: calc(50% - 15px);
      left: calc(50% - 15px);
  }
   #outputMulti>div:after {
      display: table;
      clear: both;
      content: ""
  }
  
  .aud-thumbnail, .img-thumbnail, .video-thumbnail {
      /* height: 100px; */
      display: inline-block;
      float: left;
      opacity: .9;
      z-index: 1;
      border-radius: 4px;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: .5;
  }
  
  .doc-thumbnail, .aud-thumbnail {
      float: left;
      opacity: .5;
      z-index: 1;
      border-radius: 4px;
      background-color: #f0f0f0;
      width: 120px;
      height: 80px;
  }
  
  audio.aud-thumbnail {
      height: revert;
      width: 100%;
      margin-top: 0!important
  }
  
  .doc-thumbnail, .newsdoc {
      /* height: 50px; */
      /* width: 100%; */
      display: inline-block
  }
  
  .doc-thumbnail>img, .newsdoc>img {
      height: 50px;
      display: inline-block;
      margin-right: 20px;
      float: left
  }
  
  span.docname {
      display: inline-block;
      width: calc(100% - 75px);
      margin: 0;
      float: left;
      height: 50px;
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      text-align: left;
  }
  
  .docname>span:nth-child(1) {
      line-height: 30px;
      font-size: 16px;
      color: #000;
      font-weight: 700;
      display: block;
      white-space: nowrap;
      overflow: hidden;
      -o-text-overflow: ellipsis;
         text-overflow: ellipsis
  }
  
  .docname>span:nth-child(2) {
      line-height: 20px;
      font-size: 14px;
      color: #5e5e5e;
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
  }
  
  .deleteaudio, .deletedoc, .deleteimages, .deletevideo {
      right: 5px;
      position: absolute;
      height: 15px;
      width: 15px;
      z-index: 2;
      color: #aaa;
      float: right;
      font-size: 23px;
      font-weight: bold;
  }
  
  .deletedoc {
      /* left: 40px; */
      /* top: -5px; */
  }
  
   #attachaudio, #attachdocuments, #attachheader, #attachphoto, #attachvideo {
      height: 30px;
      width: 30px;
      border: 0;
      float: left;
      padding: 0;
      margin-right: 10px;
      cursor: pointer
  }
  
   #attachaudio>img, #attachdocuments>img, #attachheader>img, #attachphoto>img, #attachvideo>img {
      height: 30px;
      width: 30px
  }
  
   #attaching {
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      padding: 10px;
      background-color: #fff;
      border: 1px solid #f6f6f6;
      border-top: none
  }
  
   #attaching:after {
      content: " ";
      display: table;
      clear: both
  }
  
   span#addnew {
      float: right;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      font-size: 16px;
      font-weight: 700;
      padding: 10px;
      color: #fff;
      border: 0;
      color: var(--color-main);
      background-color: var(--color-main-light-100);
      cursor: pointer;
      width: 100%;
      margin-top: 15px;
      border-radius: 4px;
  }
  
   div#modalthemesheaderparent,  div#newsthemesedit {
      position: fixed;
      top: 0;
      left: 0;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      background-color: #fff;
  }
  
   div#newsthemesedit {
      display: none;
      bottom: 0;
      right: 0;
      z-index: 100000;
      padding: 25px;
      overflow-y: auto;
      text-align: left
  }
  
   #modalthemes {
      margin: 82px 0;
  }
  
   .newsthemeeditlist, span.newsthemeeditinterest,  span.newsthemeeditsubject {
      color: #fff;
      display: inline-block;
      font-size: 14px;
      padding: 7px;
      margin-right: 10px;
      margin-bottom: 10px;
      font-weight: 700;
      border-radius: 4px;
      opacity: .6
  }
  
   .newsthemeeditlist-selected, span.newsthemeeditinterest-selected,  span.newsthemeeditsubject-selected {
      opacity: 1
  }
  
   span.newsthemeeditinterest {
      background-color: #754ee3
  }
  
   span.newsthemeeditlist {
      background-color: #b3289f
  }
  
   span.newsthemeeditsubject {
      background-color: #4673F0;
  }
  
   div#modalthemesheaderparent {
      width: 100%;
      height: 107px;
      padding: 17px;
      z-index: 1000000
  }
  
  
   div#modalthemesacceptparent {
      bottom: 0;
      width: 100%;
      height: 79px;
      padding: 17px;
      z-index: 1000000;
      position: fixed;
      left: 0;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      background-color: #fff;
  }
  
   div#toacceptthemesparameters {
      border-radius: 4px;
      color: black;
      font-size: calc(var(--font-subtitle) - 1px);
      background-color: var( --color-background-input);
      border: 1px solid #f0f0f0;
      box-sizing: border-box;
      box-shadow: 0 1px 3px rgb(0 0 0 / 15%);
      width: 100%;
      display: block;
      text-align: center;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      height: 45px;
      line-height: 45px;
      padding: 0;
      margin: 0;
  }
  
   div#toclosethemesparameters, div#toinfothemesparameters {
      display: inline-block;
      width: 25px;
      height: 25px;
      position: absolute;
      right: 17px;
      top: 22px
  }
  
   div#toinfothemesparameters {
      right: 17px;
  }
  
   div#toclosethemesparameters>img, div#toinfothemesparameters>img {
      width: 25px;
      height: 25px
  }
  
   .themesmodalsubheader {
      font-weight: 700;
      margin-bottom: 11px;
      text-align: left;
      padding: 0 5px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      line-height: 35px;
      font-size: 18px;
      padding-left: 40px;
  }
  
   span#tochoosenewsthemes {
      display: inline-block;
      width: 100%;
      font-size: 16px;
      color: #86059c;
      margin-top: 25px;
      text-align: left;
      font-weight: 700
  }
  
   div#newsthemesshow:not(:empty) {
      display: inline-block;
      margin-top: 10px;
      text-align: left
  }
  
   .newsthemesshow-item-interest, .newsthemesshow-item-list,  .newsthemesshow-item-subject {
      display: inline-block;
      width: auto;
      font-size: 14px;
      line-height: 18px;
      height: 18px;
      color: #fff;
      padding: 7px;
      margin-right: 10px;
      margin-bottom: 10px;
      font-weight: 700;
      border-radius: 4px
  }
  
   .newsthemesshow-item-list {
      background-color: #b3289f
  }
  
   .newsthemesshow-item-interest {
      background-color: #754ee3
  }
  
   .newsthemesshow-item-subject {
      background-color: #4673F0;
  }
  
   .newsthemesshow-item-interest>span, .newsthemesshow-item-list>span,  .newsthemesshow-item-subject>span {
      line-height: 18px;
      display: inline-block;
      vertical-align: top
  }
  
   .newsthemesshow-item-delete {
      display: inline-block;
      width: auto;
      height: 18px;
      margin-left: 10px;
      padding-top: 2px;
      -webkit-box-sizing: border-box;
              box-sizing: border-box
  }
  
   .newsthemesshow-item-delete>img {
      width: 14px
  }
  
   .tippy-box {
      margin: auto
  }
  
   .tippy-content {
      width: auto
  }
  
   .tippy-content .newsthemesshow-item-list {
      margin-top: 10px
  }
  
  .noty_layout {
      -webkit-filter: none!important;
              filter: none!important;
      z-index: 99999999!important
  }
  
  div#modalerror {
      background-color: #c41f33;
      font-family: var(--font-family);
  }
  
  div#modalconfirm {
      background-color: #c41f33;
      font-family: var(--font-family);
      color: white;
      border-radius: 7.5px;
  }
  
  button#notdeleteusernew, button#usereducationeditclosecancel, button#notdeleteuseravatar, button#notdeleteusercover, button#notdeleteschoolcover,
  button#notexiteditsubjects, button#notdeletemessages, button#notdeletephoto {
      margin-right: 14px;
  }
  
  .noty_body {
      -webkit-box-sizing: border-box!important;
              box-sizing: border-box!important;
      border-radius: 4px
  }
  
  .modalerrortitle, .modalconfirmtitle,  span#countnews {
      margin-bottom: 10px;
      font-weight: 700;
      font-size: 16px
  }
  
   span#countnews {
      display: inline-block;
      color: #86059c
  }
  
   .text-yellow {
      background-color: #f8ef91
  }
  
  .new {
      display: inline-block;
      max-width: var(--display-width);
      margin: auto auto 7px;
      background-color: #fff;
      /* padding: 10px; */
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      border: 1px solid var(--color-gray-lightest);
      text-align: left;
      /* box-shadow: 0 0 10px 3px rgb(221 221 221); */
      border-radius: 15px;
  }
  
  .infonew {
      position: relative;
      height: auto;
      /* margin-bottom: 10px; */
      padding: 10px;
      /* padding-bottom: 0; */
      box-sizing: border-box;
      text-align: left;
  }
  
  .authoravatar {
      display: inline-block;
      height: 60px;
      width: 60px;
      border-radius: 100%;
      margin-right: 10px
  }
  
  .usertime {
      display: inline-block;
      width: calc(100% - 80px);
      margin: 0;
      -webkit-transform: translate(0,-50%);
      -ms-transform: translate(0,-50%);
      transform: translate(0,-50%);
      position: absolute;
      top: 50%
  }
  
  .usertime>span:nth-child(1) {
      font-size: 16px;
      font-weight: 700;
      color: var(--color-main);
      display: inline-block;
      width: 100%;
      margin-bottom: 5px;
      cursor: pointer
  }
  
  .usertime>span:nth-child(1)>a {
      color: var(--color-main) !important;
      font-weight: bold !important;
  }
  
  .usertime>span:nth-child(2), .usertime>span:nth-child(3) {
      font-size: 14px;
      color: #696969;
      display: inline-block;
      width: 100%;
      margin-bottom: 5px;
      cursor: pointer
  }
  
  span.opennewsoptions, span.openphotooptions {
      display: inline-block;
      background: url(/icons/options.png);
      background-size: 25px;
      height: 25px;
      width: 25px;
      position: absolute;
      top: 10px;
      right: 12px;
      cursor: pointer
  }
  
  .newsoptions, .photooptions {
      display: inline-block;
      float: right;
      width: 0;
  }
  
  .newsoptions-content-parent, .photooptions-content-parent {
      /* display: none; */
      /* position: fixed; */
      /* top: 0; */
      /* bottom: 0; */
      /* left: 0; */
      /* right: 0; */
      /* z-index: 1000000; */
      /* background-color: rgba(0, 0, 0, .4); */
  }
  
  .newsoptions-content, .photooptions-content {
      display: none;
      /* position: fixed; */
      bottom: 9px;
      z-index: 100000;
      width: calc(var(--display-width) - 18px);
      box-sizing: border-box;
      left: 9px;
      top: auto;
      right: 9px;
      /* border-radius: 4px; */
      padding: 10px;
      background-color: #fff;
      color: black;
  }
  
  .newsoptions-content>ul, .photooptions-content>ul {
      margin: 0;
      padding: 0
  }
  
  .newsoptions-content>ul>li, .photooptions-content>ul>li {
      list-style: none;
      padding: 7px;
      font-size: 14px;
      height: 20px;
      box-sizing: content-box;
  }
  
  li#closenewsoption, li#closephotooption {
      text-align: center;
      background-color: var(--color-background-input);
      margin-top: 7px;
      border-radius: 4px;
      color: var(--color-addit);
  }
  
  .newheader {
      margin-bottom: 5px;
      text-align: center;
      font-size: 20px;
      color: #86059c;
      font-family: var(--font-family);
      font-weight: bold;
      width: 100%;
      box-sizing: border-box;
      border: none;
  }
  
  .newtext {
      font-size: 16px;
      line-height: 20px;
      box-sizing: border-box;
      display: inline-block;
      width: 100%;
      border: none;
      /* margin-bottom: 10px; */
  }
  
  .newtext[contenteditable] {
      min-height: 100px;
  }
  
  .editrow {
      display: none;
  }
  
  .new audio {
      width: 100%;
      margin-top: 8px;
  }
  
  .editattaching, .editoutputMulti {
      box-sizing: border-box;
      padding: 10px 10px 0;
  }
  .editoutputMulti {
      display: inline-block;
      height: auto;
  }
  
  #outputMulti>div, .editoutputMulti>div {
      width: 120px;
      height: 90px;
      display: inline-block;
      /* float: left; */
      cursor: pointer;
      margin-right: 7px;
      position: relative;
      /* margin-bottom: 15px; */
      max-height: 100px;
      aspect-ratio: 4/3;
      /* flex: 0 0 auto; */
  }
  
  .editattachaudio, .editattachdocuments,.editattachphoto, .editattachvideo {
      height: 30px;
      width: 30px;
      border: 0;
      float: left;
      padding: 0;
      margin-right: 10px;
      cursor: pointer;
  }
  
  .editattachaudio>img, .editattachdocuments>img, .editattachphoto>img, .editattachvideo>img {
      height: 30px;
      width: 30px;
  }
  
  span.savenewdecline {
      margin-right: 10px;
  }
  span.savenewdecline, span.savenew {
      display: inline-block;
      box-sizing: border-box;
      font-size: 16px;
      font-weight: 700;
      height: 40px;
      width: calc(50% - 5px);
      line-height: 40px;
      padding: 0 20px;
      color: #fff;
      border: 0;
      background-color: var(--color-main);
      color: var(--color-main);
      background-color: var(--color-main-light-100);
      cursor: pointer;
      border-radius: 4px;
      text-align: center;
      margin-top: 15px;
      margin-bottom: 10px;
  }
  
  .newsphotos {
      width: 100%;
      margin-top: 10px
  }
  
  .newsphotos>img {
      width:calc(25% - 15px/4);
      margin-bottom:5px;
  }
  
  .allnewsphoto {
      display: none
  }
  
  .newsimg {
      margin-bottom: 8px;
      position: relative;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      width: 100%;
      display: inline-block;
  }
  
  .toright {
      right: 5px;
      background-color: rgba(255,255,255,.6);
      color: #86059c
  }
  
  #modalnewsphotos .toleft, #modalnewsphotos .toright {
      top: calc(50% - 47.5px);
  }
  
  .toleft>span,.toright>span {
      display: inline-block;
      margin: 0 5px;
      color: #fff;
      font-size: 16px
  }
  
  .toleft:before,.toright:before {
      content: "";
      display: inline-block;
      min-height: inherit;
      height: 100%;
      vertical-align: middle
  }
  
  .newscontaining {
      /* display: inline-block; */
      /* width: 100%; */
      /* vertical-align: top; */
      /* position: relative; */
  }
  
  .newscontaining>img, .newscontaining>video {
      display: inline-block;
      width: 100%;
      margin: auto;
      /* border-radius: 4px; */
  }
  
  #modalnewsphotos .newsmodalcontaining {
      width: 100%;
      height: 100%;
  }
  
  .newsmodalheadercontaining {
      height: 50px;
      margin-bottom: 7px;
      position: relative;
      z-index: 10;
      background: rgba(255, 255, 255, .9);
  }
  
  span.countmodalnewsimages {
      display: inline-block;
      width: auto;
      float: left;
      /* margin-top: 15px; */
      /* margin-left: 20px; */
      line-height: 20px;
      font-weight: bold;
      color: black;
      /* margin-bottom: 10px; */
      box-sizing: border-box;
      /* margin-top: 25px; */
      border-bottom: none;
      font-size: 18px;
      text-align: left;
      line-height: 35px;
      /* padding: 10px; */
      padding-left: 55px;
      /* padding-top: 0; */
      font-weight: bold;
      line-height: 50px;
  }
  
  .newsmodalheadercontaining svg.closemodalnewsphotos, svg#closecomments {
      width: 24px;
      height: 24px;
      position: absolute;
      top: 12px;
      right: 10px;
      fill: #6b606b;
  }
  
   svg#closecomments {
      width: 25px;
      height: 25px;
      top: 10px;
  }
  
  .newsmodalimgcontaining {
      width: 100%;
      position: relative;
      height: calc(var(--display-height) - 120px);
      margin-top: 3px;
      margin-bottom: 57px;
  }
  
  .newsmodalimgcontaining>div {
      position: relative;
      width: 100%;
      height: 100%;
  }
  
  .newsmodalimgcontaining img {
      max-width: 100%;
      max-height: 100%;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
  }
  
  .newsmodalcontaining .photoinfo {
      position: static;
      width: 100%;
      height: 50px;
      min-height: revert;
      margin-top: 10px;
      display: inline-block;
      text-align: left;
      padding-left: 20px;
      padding-bottom: 20px;
      overflow: hidden;
      box-sizing: border-box;
  }
  
  div#newscomments {
      /* display: none; */
      position: fixed;
      z-index: 1000000;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      margin-bottom: 0;
      overflow-y: hidden;
      background-color: #fff;
      /* margin: 55px 0; */
      /* border-radius: 15px; */
      padding: 0;
      box-sizing: border-box;
      overflow-x: hidden;
  }
  
  div#commentsheader {
      color: black;
      margin-bottom: 10px;
      box-sizing: border-box;
      /* margin-top: 25px; */
      border-bottom: none;
      font-size: 18px;
      text-align: left;
      line-height: 35px;
      padding: 10px;
      padding-left: 40px;
      padding-top: 0;
      font-weight: bold;
  }
  
  #countcomments {
      color: var(--color-gray-dark);
      font-weight: normal;
      display: inline-block;
      margin-left: 7px;
  }
  
  div#photonewscomments {
      display: inline-block;
      width: 100%;
      height: calc(100% - 135px);
      /* padding: 0 10px; */
      box-sizing: border-box;
      overflow-y: auto;
  }
  
  .writecommentblock {
      display: inline-block;
      width: 100%;
      height: 80px;
      box-sizing: border-box;
      padding-bottom: 15px;
      padding-top: 10px;
      border-top: 1px solid var(--color-gray-lightest);
  }
  
  .textareacomment {
      height: 55px;
      box-sizing: border-box;
      width: calc(100% - 42px);
      padding: 7px 10px;
      background-color: var(--color-background-input);
      cursor: text;
      border-radius: 4px;
      display: inline-block;
      text-align: left;
      overflow-y: auto;
      border: 0;
      resize: none;
  }
  
  img.tosendcomment, .tosendeditcomment {
      height: 25px;
      width: 25px;
      margin-top: 15px;
      margin-bottom: 15px;
      margin-left: 10px;
  }
  
  .photonewscomments-child {
      display: block;
      width: auto;
      max-width: 100%;
      padding: 3px;
      box-sizing: border-box;
      /* background: var(--color-background-input); */
      border-radius: 15px;
      margin-bottom: 7px;
  }
  
  .infocomment {
      position: relative;
      display: inline-block;
      width: 100%;
      height: auto;
  }
  
  .photonewscomments-child img {
      float: left;
      width: 45px;
      border-radius: 100%;
      margin-right: 10px;
      display: inline-block;
  }
  
  span.commusertime {
      display: inline-block;
      width: 100%;
      margin: 0;
      /* height: 45px; */
      float: left;
      text-align: left;
      overflow: hidden;
  }
  
  .commusertime>span:first-child {
      font-size: var(--font-notice);
      color: black;
      width: auto;
      margin-bottom: 5px;
      cursor: pointer;
      font-weight: bold;
      height: 17px;
      line-height: 17px;
      display: block;
      margin-top: 3px;
      width: 100%;
      display: inline-block;
  }
  
  .commtime {
      font-size: calc((var(--font-notice)) - 2px);
      color: dimgray;
      width: auto;
      cursor: pointer;
      display: inline-block;
      width: auto;
      height: 15px;
      line-height: 15px;
      text-align: left;
      margin-bottom: 5px;
      vertical-align: top;
      float: left;
      margin-right: 10px;
  }
  
  .commtext {
      font-size: var(--font-notice);
      /* margin-top: 10px; */
      box-sizing: border-box;
      text-align: left;
      display: inline-block;
      width: 100%;
  }
  
  .newsthemesview-item-list, .newsthemesview-item-interest, .newsthemesview-item-subject {
      display: inline-block;
      font-size: var(--font-notice);
      width: auto;
      line-height: 18px;
      height: 18px;
      color: #fff;
      padding: 7px;
      margin-right: 10px;
      margin-bottom: 10px;
      font-weight: 700;
      border-radius: 4px;
  }
  
  .newsthemesview-item-list {
      background-color: #b3289f;
  }
  
  .newsthemesview-item-interest {
      background-color: #754ee3;
  }
  
  
  .newsthemesview-item-subject {
      background-color: #4673F0;
  }
  
  .newsthemesview {
      margin-top: 15px;
      padding: 0 10px;
  }
  
  audio + .newsthemesview {
      margin-top: 0;
  }
  
  .like-active {
      width: 30px;
      height: 30px;
      background-image: url(/icons/active-like.png);
      background-size: 30px 30px;
      -webkit-transition: background 1s ease;
      -o-transition: background 1s ease;
      transition: background 1s ease;
      cursor: pointer;
      display: inline-block;
      margin-right: 5px
  }
  
  .like-passive {
      background-image: url(/icons/passive-like.png);
      -webkit-transition: background 1s ease;
      -o-transition: background 1s ease;
      transition: background 1s ease;
      cursor: pointer
  }
  
  span.countcomments, span.counthearts, span.countreposts {
      color: black;
      font-size: 16px;
      line-height: 30px;
      display: inline-block;
      height: 30px;
      cursor: pointer;
      font-weight: 700;
      margin-right: 20px;
      vertical-align: top
  }
  
  .like-passive, .commentsheader, .torepost {
      display: inline-block;
      background-size: 30px 30px;
      height: 30px;
      width: 30px;
      margin-right: 5px;
      cursor: pointer;
      color: var(--primary-color);
  }
  
  .commentsheader {
      background-image: url(/icons/comments.png)
  }
  
  .newsactions {
      margin-top: 10px;
      border-top: 1px solid var(--color-gray-lightest);
      padding: 10px;
      box-sizing: border-box;
  }
  
  
  
  
  .searchpage aside#search-categories {
    width: 100%;
    display: none;
    padding: 17px;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    top: 0;
    /* overflow-y: auto; */
    background-color: white;
    z-index: 100000;
  }
  .searchpage aside#search-categories input,
  .searchpage aside#search-categories select {
      font-size: 14px;
      color: #333;
      box-sizing: border-box;
      /* height: 40px; */
      background: 0 0;
      outline: none;
      margin-bottom: 12px;
      letter-spacing: 0.8px;
      display: inline-block;
      width: 100%;
      border-radius: 4px;
      border: 1px solid var(--color-gray-lightest);
      background-color: white;
      padding: 8px;
  }
  
  .searchpage .select2-container {
      width: 100% !important;
      margin-bottom: 12px;
      font-size: 14px;
      text-align: left;
  }
  
  .searchpage input[name="startdate"], .searchpage input[name="enddate"] {
      width: calc(50% - 10px)!important;
  }
  
  .searchpage input[name="startdate"] {
      margin-right: 20px;
  }
  
  .searchpage div#opensearchparameters {
    font-weight: 700;
    font-size: calc(15px);
    text-align: left;
    padding: 6px 16px;
    margin-bottom: 17px;
    margin-left: 17px;
    box-sizing: border-box;
    display: block;
    float: left;
    clear: left;
    width: initial;
    height: 31px;
    border-radius: 16px;
    background-color: white;
  }
  .searchpage div#opensearchparameters > img {
    display: inline-block;
    height: 17px;
    width: 17px;
    margin-top: 1px;
    margin-right: 10px;
  }
  .searchpage #opensearchparameters > span {
    display: inline-block;
    line-height: 19px;
    vertical-align: top;
    height: 19px;
  }
  .searchpage #toclosesearchparameters > img {
    width: 25px;
    height: 25px;
  }
  .searchpage .usersubjects-card:nth-child(-n+9), .searchpage .userinterests-card:nth-child(-n+9), .searchpage .profiles-card:nth-child(-n+4), .searchpage .schoolsubjects-card:nth-child(-n+8), .searchpage .newsthemechooselist:nth-child(-n+9){
    display: inline-block;
  }
  .searchpage div#showallusersubjects,
  .searchpage div#showalluserinterests,
  .searchpage div#showallschoolprofiles,
  .searchpage div#showallschoolsubjects,
  .searchpage div#showallnewsthemesinterests,
  .searchpage div#showallnewsthemes {
    display: inline-block;
    width: 100%;
    text-align: left;
    padding-left: 10px;
    margin-top: 10px;
    font-size: 14px;
    text-decoration: underline dotted;
  }
  .searchpage div#toclosesearchparameters {
    display: inline-block;
    width: 25px;
    height: 25px;
    position: absolute;
    left: 17px;
    top: 22px;
  }
  .searchpage .filtermodalsubheader {
    font-weight: bold;
    margin-bottom: 22px;
    text-align: left;
    padding: 0 5px;
    padding-left: 40px;
    box-sizing: border-box;
    line-height: 35px;
    font-size: 18px;
  }
  .searchpage .usersubjects-card,
  .searchpage .userinterests-card,
  .searchpage .schoolsubjects-card {
    display: none;
    box-sizing: border-box;
    width: calc(100%/4 - 5px);
    overflow: hidden;
    margin-bottom: 10px;
    margin-left: 5px;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
    color: #213021;
    position: relative;
    cursor: pointer;
    font-size: calc(12px);
    float: left;
  }
  .searchpage span.searchsubheader {
    display: inline-block;
    width: 100%;
    margin-bottom: 15px;
    text-align: left;
    padding-left: 10px;
    box-sizing: border-box;
    margin-top: 10px;
    font-size: calc(15px);
    font-weight: bold;
  }
  .searchpage .usersubjects-card.selectusersubject,
  .searchpage .userinterests-card.selectuserinterest,
  .searchpage .schoolsubjects-card.selectschoolsubject {
    opacity: .6;
  }
  .searchpage .selectusersubject > .checkmark,
  .searchpage .selectuserinterest > .checkmark,
  .searchpage .selectschoolsubject > .checkmark {
    display: none;
  }
  .searchpage span.checkmark {
    position: absolute;
    width: 25px;
    height: 25px;
    border-radius: 100%;
    background-color: #86059c;
    top: 0px;
    right: 0px;
    background-image: url(/icons/applywhite.png);
    background-size: 25px 25px;
  }
  
  .searchpage span.newsthemechooseinterest, .searchpage span.newsthemechooselist, .searchpage span.newsthemechoosesubject {
      color: #fff;
      display: none;
      font-size: 14px;
      padding: 7px;
      margin-right: 10px;
      margin-bottom: 10px;
      font-weight: 700;
      border-radius: 4px;
      opacity: .6;
      cursor: pointer;
  }
  .searchpage .newsthemechooselist-selected, .searchpage span.newsthemechooseinterest-selected, .searchpage span.newsthemechoosesubject-selected {
      opacity: 1;
  }
  
  .searchpage span.newsthemechoosesubject {
      background-color: #4673F0;
  }
  
  .searchpage span.newsthemechooseinterest {
      background-color: #754ee3;
  }
  
  .searchpage span.newsthemechooselist {
      background-color: #b3289f;
  }
  
  .searchpage .newsthemesparentblock {
      padding-left: 10px;
  }
  
  .searchpage span.newsthemechooseinterest-selected {
      opacity: 1;
  }
  
  .searchpage span.newsthemechooselist-selected {
      opacity: 1;
  }
  .searchpage aside#search-categories input[name='lowerdate'], .searchpage aside#search-categories input[name='higherdate'] {
      box-sizing: border-box;
      border-radius: 4px;
      /* border: none; */
      width: calc(50% - 10px);
      padding: 5px;
      cursor:pointer;
      float:left;
      margin-bottom: 10px;
  }
  .searchpage aside#search-categories #timerange>span {
      line-height: 30px;
      display: inline-block;
      vertical-align: top;
  }
  .searchpage aside#search-categories input[name='higherdate'] {
      float:right;
  }
  .searchpage .newssearch-checkbox {
      display:inline-block;
      width:100%;
      margin-bottom:10px;
      text-align:left;
      color:dimgray;
      font-size: 16px;
      cursor:pointer;
  }
  .searchpage .searchsubheader~div {
      text-align: left;
      height: calc(100% - 180px);
      overflow-y: auto;
      overflow-x: hidden;
  }
  .searchpage .searchresult-person:nth-child(2n+4),
  .searchpage .searchresult-school:nth-child(2n+4) {
    margin-right: 0px;
  }
  .searchpage .searchresult-person>a>img, .searchpage .searchresult-school>a>img {
      width: calc(100% - 20px);
      margin-bottom: 7px;
      border-radius: 4px;
      aspect-ratio: 1/1;
  }
  .searchpage .searchresult-person, .searchpage .searchresult-school {
      width: calc(50% - 15px/2);
      margin-right: 15px;
      display: inline-block;
      margin-bottom: 20px;
      text-align: center;
  }
  .searchpage span#countresults {
    width: 100%;
    display: inline-block;
    margin-bottom: 25px;
    padding-left: 10px;
    box-sizing: border-box;
    color: var(--color-main);
    font-size: 16px;
    font-weight: bold;
    text-align: center;
  }
  .searchpage .searchresult-person > a > span:nth-child(2),
  .searchpage .searchresult-school > a > span:nth-child(2) {
    display: inline-block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: bold;
  }
  .searchpage .searchresult-person > a > span:nth-child(3),
  .searchpage .searchresult-school > a > span:nth-child(3) {
    display: inline-block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: calc(12px);
  }
  .searchpage div#searchresultspeople:not(:empty),
  .searchpage #searchresultsschools:not(:empty) {
    text-align: left;
    padding: 17px;
    box-sizing: border-box;
  }
  .searchpage .activesearchchooseblock {
    border-bottom: 2px solid var(--color-main);
  }
  .searchpage div#searchchooseblocks > div {
    display: inline-block;
    width: calc(100%/2 - 40px/2);
    padding: 10px 0;
    cursor: pointer;
    box-sizing: border-box;
    font-weight: bold;
    color: var(--color-main);
    margin-left: 10px;
  }
  .searchpage div#searchchooseblocks {
    margin-bottom: 20px;
  }
  .searchpage .profiles-card {
    outline: none;
    display: none;
    background: rgba(0, 0, 0, 0.1);
    width: 100%;
    border: 0;
    border-radius: 4px;
    box-sizing: border-box;
    padding: 12px 20px;
    color: rgba(0, 0, 0, 0.6);
    font-family: inherit;
    font-size: inherit;
    font-weight: 500;
    line-height: inherit;
    transition: 0.3s ease;
    margin-bottom: 7px;
    cursor: pointer;
  }
  .searchpage .profiles-card.unselectschoolprofile {
    color: rgba(0, 0, 0, 0.8);
    background: rgba(134, 5, 156, 0.3);
  }
  .searchpage #emptyaddloaddiv {
    text-align: center;
    color: #86059c;
    font-size: 14px;
    cursor: pointer;
  }
  .searchpage div#modalfilterheaderparent {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 69px;
    padding: 17px;
    box-sizing: border-box;
    z-index: 1000000;
    background-color: white;
  }
  .searchpage div#search-people,
  .searchpage div#search-schools,
  .searchpage div#search-news {
    margin-top: 52px;
    height: calc(100% - 112px);
    overflow-y: auto;
  }
  .searchpage div#modalfilterheaderfooter {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 79px;
    padding: 17px;
    box-sizing: border-box;
    z-index: 1000000;
    background-color: white;
  }
  .searchpage button#toshowsearchresults {
      border-radius: 4px !important;
      color: var(--color-main) !important;
      font-size:
      calc(var(--font-subtitle) - 1px);
      background-color: var( --color-background-input) !important;
      border: 1px solid #f0f0f0;
      box-sizing: border-box;
      box-shadow: 0 1px 3px rgb(0 0 0 / 15%);
      width: 100%;
      display: block;
      text-align: center;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      height: 45px !important;
      line-height: 45px !important;
      padding: 0 !important;
      margin: 0 !important;
      font-weight: bold;
  }
  
  .searchpage .newsoptions {
      display: inline-block;
      float: right;
      width: 0;
  }
  
  .searchpage .newsoptions-content-parent {
      display: none;
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 10000;
      background-color: rgba(0, 0, 0, .4);
  }
  
  .searchpage .newsoptions-content {
      display: none;
      position: fixed;
      bottom: 9px;
      z-index: 100000;
      width: calc(var(--display-width) - 18px);
      box-sizing: border-box;
      left: 9px;
      top: auto;
      right: 9px;
      border-radius: 4px;
      padding: 10px;
      background-color: #fff;
      color: black;
  }
  
  .searchpage .newsoptions-content>ul {
      margin: 0;
      padding: 0
  }
  
  .searchpage .newsoptions-content>ul>li {
      list-style: none;
      padding: 7px;
      font-size: 14px;
      height: 20px;
  }
  
  .searchpage li#closenewsoption {
      text-align: center;
      background-color: var(--color-background-input);
      margin-top: 7px;
      border-radius: 4px;
      color: var(--color-addit);
  }
  
  .searchpage .newheader {
      margin-bottom: 5px;
      text-align: center;
      font-size: 20px;
      color: #86059c;
      font-family: var(--font-family);
      font-weight: bold;
      width: 100%;
      box-sizing: border-box;
      border: none;
  }
  
  .searchpage .newtext {
      font-size: 16px;
      line-height: 20px;
      box-sizing: border-box;
      display: inline-block;
      width: 100%;
      resize: none;
      border: none;
  }
  
  .searchpage .newtext[contenteditable] {
      min-height: 100px;
  }
  
  .searchpage .editrow {
      display: none;
  }
  
  .searchpage .new audio {
      width: 100%;
      margin-top: 5px;
      margin-bottom: 15px;
  }
  
  .searchpage .editattaching, .searchpage .editoutputMulti {
      box-sizing: border-box;
      padding: 10px 10px 0;
  }
  .searchpage .editoutputMulti {
      display: inline-block;
      height: auto;
  }
  
  .searchpage #outputMulti>div, .searchpage .editoutputMulti>div {
      width: auto;
      height: auto;
      display: inline-block;
      float: left;
      cursor: pointer;
      margin-right: 10px;
      position: relative;
      margin-bottom: 15px;
      max-height: 100px;
  }
  
  .searchpage .editattachaudio, .searchpage .editattachdocuments, .searchpage .editattachphoto, .searchpage .editattachvideo {
      height: 30px;
      width: 30px;
      border: 0;
      float: left;
      padding: 0;
      margin-right: 10px;
      cursor: pointer;
  }
  
  .searchpage .editattachaudio>img, .searchpage .editattachdocuments>img, .searchpage .editattachphoto>img, .searchpage .editattachvideo>img {
      height: 30px;
      width: 30px;
  }
  .searchpage .allnewsphoto {
      display: none
  }
  
  .searchpage .toleft,.searchpage .toright {
      position: absolute;
      width: 30px;
      height: 30px;
      line-height: 30px;
      padding: 0 5px;
      font-size: 20px;
      font-weight: 700;
      display: inline-block;
      z-index: 5;
      text-align: center;
      background-color: rgba(0,0,0,.1);
      cursor: pointer;
      -webkit-transition: background-color 1s ease;
      -o-transition: background-color 1s ease;
      transition: background-color 1s ease;
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      top: calc(50% - 15px);
      border-radius: 100%
  }
  
  .searchpage .toleft {
      left: 5px;
      background-color: rgba(255,255,255,.6);
      color: #86059c
  }
  
  .searchpage .toright {
      right: 5px;
      background-color: rgba(255,255,255,.6);
      color: #86059c
  }
  .searchpage .newscontaining {
      display: inline-block;
      width: 100%;
      vertical-align: top;
      position: relative
  }
  
  .searchpage .newscontaining>img,.searchpage .newscontaining>video {
      display: inline-block;
      width: 100%;
      margin: auto
  }
  
  .searchpage #modalnewsphotos .newsmodalcontaining {
      width: 100%;
      height: 100%;
  }
  
  .searchpage span.countmodalnewsimages {
      display: inline-block;
      width: auto;
      float: left;
      margin-top: 15px;
      margin-left: 20px;
      line-height: 20px;
      font-weight: bold;
  }
  
  .searchpage .newsmodalheadercontaining svg.closemodalnewsphotos, .searchpage svg#closecomments {
      width: 24px;
      height: 24px;
      position: absolute;
      top: 12px;
      right: 10px;
      fill: #6b606b;
  }
  
  .searchpage svg#closecomments {
      width: 25px;
      height: 25px;
      top: 10px;
  }
  .searchpage .newsmodalimgcontaining>div {
      position: relative;
      width: 100%;
      height: 100%;
  }
  
  .searchpage .newsmodalimgcontaining img {
      max-width: 100%;
      max-height: 100%;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
  }
  
  .searchpage .newsthemesview-item-list, .searchpage .newsthemesview-item-interest, .searchpage .newsthemesview-item-subject {
      display: inline-block;
      font-size: var(--font-notice);
      width: auto;
      line-height: 18px;
      height: 18px;
      color: #fff;
      padding: 7px;
      margin-right: 10px;
      margin-bottom: 10px;
      font-weight: 700;
      border-radius: 4px;
  }
  
  .searchpage .newsthemesview-item-list {
      background-color: #b3289f;
  }
  
  .searchpage .newsthemesview-item-interest {
      background-color: #754ee3;
  }
  
  
  .searchpage .newsthemesview-item-subject {
      background-color: #4673F0;
  }
  
  .searchpage .like-active {
      width: 30px;
      height: 30px;
      background-image: url(/icons/active-like.png);
      background-size: 30px 30px;
      -webkit-transition: background 1s ease;
      -o-transition: background 1s ease;
      transition: background 1s ease;
      cursor: pointer;
      display: inline-block;
      margin-right: 5px
  }
  
  .searchpage .like-passive {
      background-image: url(/icons/passive-like.png);
      -webkit-transition: background 1s ease;
      -o-transition: background 1s ease;
      transition: background 1s ease;
      cursor: pointer
  }
  
  .searchpage span.countcomments,.searchpage span.counthearts {
      color: black;
      font-size: 16px;
      line-height: 30px;
      display: inline-block;
      height: 30px;
      font-weight: 700;
      margin-right: 20px;
      vertical-align: top
  }
  
  .searchpage .like-passive,.searchpage .commentsheader {
      display: inline-block;
      background-size: 30px 30px;
      height: 30px;
      width: 30px;
      margin-right: 5px
  }
  
  .searchpage .commentsheader {
      background-image: url(/icons/comments.png)
  }
  
  .searchpage .newsactions {
      margin-top: 10px;
      border-top: 1px solid #f6f6f6;
      padding-top: 10px
  }
  .searchpage div#modalthemesheaderparent, .searchpage div#newsthemesedit {
      position: fixed;
      top: 0;
      left: 0;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      background-color: #fff;
  }
  
  .searchpage div#newsthemesedit {
      display: none;
      bottom: 0;
      right: 0;
      z-index: 10000;
      padding: 25px;
      overflow-y: auto;
      text-align: left
  }
  
  .searchpage #modalthemes {
      margin: 52px 0;
  }
  
  .searchpage .newsthemeeditlist,.searchpage span.newsthemeeditinterest, .searchpage span.newsthemeeditsubject {
      color: #fff;
      display: inline-block;
      font-size: 14px;
      padding: 7px;
      margin-right: 10px;
      margin-bottom: 10px;
      font-weight: 700;
      border-radius: 4px;
      opacity: .6
  }
  
  .searchpage .newsthemeeditlist-selected,.searchpage span.newsthemeeditinterest-selected, .searchpage span.newsthemeeditsubject-selected {
      opacity: 1
  }
  
  .searchpage span.newsthemeeditinterest {
      background-color: #754ee3
  }
  
  .searchpage span.newsthemeeditlist {
      background-color: #b3289f
  }
  
  .searchpage span.newsthemeeditsubject {
      background-color: #4673F0;
  }
  
  .searchpage div#modalthemesheaderparent {
      width: 100%;
      height: 69px;
      padding: 17px;
      z-index: 1000000
  }
  
  
  .searchpage div#modalthemesacceptparent {
      bottom: 0;
      width: 100%;
      height: 79px;
      padding: 17px;
      z-index: 1000000;
      position: fixed;
      left: 0;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      background-color: #fff;
  }
  
  .searchpage div#toacceptthemesparameters {
      border-radius: 4px;
      color: black;
      font-size: calc(var(--font-subtitle) - 1px);
      background-color: var( --color-background-input);
      border: 1px solid #f0f0f0;
      box-sizing: border-box;
      box-shadow: 0 1px 3px rgb(0 0 0 / 15%);
      width: 100%;
      display: block;
      text-align: center;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      height: 45px;
      line-height: 45px;
      padding: 0;
      margin: 0;
  }
  
  .searchpage div#toclosethemesparameters,.searchpage div#toinfothemesparameters {
      display: inline-block;
      width: 25px;
      height: 25px;
      position: absolute;
      right: 17px;
      top: 22px
  }
  
  .searchpage div#toinfothemesparameters {
      right: 52px
  }
  
  .searchpage div#toclosethemesparameters>img,.searchpage div#toinfothemesparameters>img {
      width: 25px;
      height: 25px
  }
  
  .searchpage .themesmodalsubheader {
      font-weight: 700;
      margin-bottom: 22px;
      text-align: left;
      padding: 0 5px;
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      line-height: 35px;
      font-size: 18px
  }
  
  .searchpage span#tochoosenewsthemes {
      display: inline-block;
      width: 100%;
      font-size: 16px;
      color: #86059c;
      margin-top: 25px;
      text-align: left;
      font-weight: 700
  }
  .searchpage div#newsthemesshow:not(:empty) {
      display: inline-block;
      margin-top: 10px;
      text-align: left
  }
  
  .searchpage .newsthemesshow-item-interest,.searchpage .newsthemesshow-item-list, .searchpage .newsthemesshow-item-subject {
      display: inline-block;
      width: auto;
      font-size: 14px;
      line-height: 18px;
      height: 18px;
      color: #fff;
      padding: 7px;
      margin-right: 10px;
      margin-bottom: 10px;
      font-weight: 700;
      border-radius: 4px
  }
  
  .searchpage .newsthemesshow-item-list {
      background-color: #b3289f
  }
  
  .searchpage .newsthemesshow-item-interest {
      background-color: #754ee3
  }
  
  .searchpage .newsthemesshow-item-subject {
      background-color: #4673F0;
  }
  
  .searchpage .newsthemesshow-item-interest>span,.searchpage .newsthemesshow-item-list>span, .searchpage .newsthemesshow-item-subject>span {
      line-height: 18px;
      display: inline-block;
      vertical-align: top
  }
  
  .searchpage .newsthemesshow-item-delete {
      display: inline-block;
      width: auto;
      height: 18px;
      margin-left: 10px;
      padding-top: 2px;
      -webkit-box-sizing: border-box;
              box-sizing: border-box
  }
  
  .searchpage .newsthemesshow-item-delete>img {
      width: 14px
  }
  
  .searchpage .tippy-box {
      margin: auto
  }
  
  .searchpage .tippy-content {
      width: auto
  }
  
  .searchpage .tippy-content .newsthemesshow-item-list {
      margin-top: 10px
  }
  
  .searchpage .editattaching, .searchpage .editoutputMulti {
      box-sizing: border-box;
      padding: 10px 10px 0;
  }
  .searchpage .editoutputMulti {
      display: inline-block;
      height: auto;
  }
  
  .searchpage #outputMulti>div, .searchpage .editoutputMulti>div {
      width: auto;
      height: auto;
      display: inline-block;
      float: left;
      cursor: pointer;
      margin-right: 10px;
      position: relative;
      margin-bottom: 15px;
      max-height: 100px;
  }
  
  .searchpage .editattachaudio, .searchpage .editattachdocuments, .searchpage .editattachphoto, .searchpage .editattachvideo {
      height: 30px;
      width: 30px;
      border: 0;
      float: left;
      padding: 0;
      margin-right: 10px;
      cursor: pointer;
  }
  
  .searchpage .editattachaudio>img, .searchpage .editattachdocuments>img, .searchpage .editattachphoto>img, .searchpage .editattachvideo>img {
      height: 30px;
      width: 30px;
  }
  
  
  
  
  
  
  
  
  
  #avatarphotosmodalparent {
      display: none;
      background: rgba(0, 0, 0, .4);
      position: fixed;
      z-index: 10000000;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
  }
  
  #avatarsphotosmodal {
      position: absolute;
      top: 0;
      bottom: 0;
      background-color: rgba(255, 255, 255);
  }
  
  /* Красивые стили для модального окна аватарок в ПК версии */
  @media (min-width: 769px) {
      #avatarphotosmodalparent[style*="display: block"],
      #avatarphotosmodalparent[style*="display: flex"] {
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          background: rgba(0, 0, 0, 0.5) !important;
          backdrop-filter: blur(8px) !important;
      }
      
      /* Устанавливаем z-index: 1 для top-navbar при открытом модальном окне аватарок */
      #avatarphotosmodalparent[style*="display: block"] ~ .top-navbar,
      #avatarphotosmodalparent[style*="display: flex"] ~ .top-navbar,
      body:has(#avatarphotosmodalparent[style*="display: block"]) .top-navbar,
      body:has(#avatarphotosmodalparent[style*="display: flex"]) .top-navbar {
          z-index: 1 !important;
      }
      
      #avatarphotosmodalparent[style*="display: block"] #avatarsphotosmodal,
      #avatarphotosmodalparent[style*="display: flex"] #avatarsphotosmodal {
          position: relative !important;
          top: auto !important;
          bottom: auto !important;
          width: 90vw !important;
          max-width: 1200px !important;
          height: auto !important;
          max-height: 90vh !important;
          border-radius: 20px !important;
          box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6) !important;
          background: rgba(255, 255, 255, 0.98) !important;
          backdrop-filter: blur(10px) !important;
          border: 1px solid rgba(255, 255, 255, 0.2) !important;
          overflow: hidden !important;
      }
  }
  
  
  
  
  .profilepage #modalwindow {
      overflow: hidden
  }
  
  .profilepage #modalwindowcontent {
      height: 100%
  }
  
  .profilepage #photo,.profilepage div#crop-contain {
      /* max-width: 100%; */
      /* max-height: calc(var(--display-height) - 100px); */
  }
  
  .profilepage div#crop-contain {
      position: relative;
      /* display: flex; */
      width: 100%;
      height: 100%;
  }
  
  .profilepage canvas#cropframe {
      position: absolute;
      top: 0;
      left: 0;
      box-sizing: border-box;
  }
  
  .profilepage div#croptopblock {
      position: absolute;
      top: 0;
      background-color: rgba(0,0,0,.5)
  }
  
  .profilepage div#cropbottomblock {
      position: absolute;
      bottom: 0;
      background-color: rgba(0,0,0,.5)
  }
  
  .profilepage div#croprightblock {
      position: absolute;
      right: 0;
      top: 0;
      left: 0;
      bottom: 0;
      z-index: 10;
  }
  
  .profilepage div#cropleftblock {
      position: absolute;
      left: 0;
      background-color: rgba(0,0,0,.5)
  }
  
  .profilepage div#cropavatarcircle {
      width: 100%;
      height: 100%;
      border: 3px solid #fff;
      box-sizing: border-box;
      border-radius: 100%;
      position: absolute;
      top: 0
  }
  
  .profilepage #cropavatar,.profilepage #cropheader {
      display: none;
      box-sizing: border-box;
      height: 50px;
      font-size: 16px;
      color: #86059c;
      font-weight: bold;
      line-height: 50px;
      text-align: left;
      padding-left: 20px;
  }
  
  div#cropheadermodalparent {
      position: fixed;
      display: none;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, .4);
      z-index: 100000000;
  }
  
  div#cropheadermodal {
      display: inline-block;
      background: white;
      height: auto;
      position: relative;
      overflow: hidden;
      box-sizing: border-box;
      margin: 0 !important;
      height: 100% !important;
  }
  
  /* Красивые стили для модального окна обрезки в ПК версии */
  @media (min-width: 769px) {
      div#cropheadermodalparent[style*="display: block"],
      div#cropheadermodalparent[style*="display: flex"] {
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          background: rgba(0, 0, 0, 0.5) !important;
          backdrop-filter: blur(8px) !important;
      }
      
      /* Устанавливаем z-index: 1 для top-navbar при открытом модальном окне обрезки шапки */
      div#cropheadermodalparent[style*="display: block"] ~ .top-navbar,
      div#cropheadermodalparent[style*="display: flex"] ~ .top-navbar,
      body:has(div#cropheadermodalparent[style*="display: block"]) .top-navbar,
      body:has(div#cropheadermodalparent[style*="display: flex"]) .top-navbar {
          z-index: 1 !important;
      }
      
      div#cropheadermodalparent[style*="display: block"] div#cropheadermodal,
      div#cropheadermodalparent[style*="display: flex"] div#cropheadermodal {
          position: relative !important;
          top: auto !important;
          left: auto !important;
          right: auto !important;
          bottom: auto !important;
          width: 90vw !important;
          max-width: 1200px !important;
          height: auto !important;
          max-height: 90vh !important;
          margin: auto !important;
          border-radius: 20px !important;
          box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6) !important;
          overflow: hidden !important;
          background: rgba(255, 255, 255, 0.98) !important;
          backdrop-filter: blur(10px) !important;
          border: 1px solid rgba(255, 255, 255, 0.2) !important;
          display: flex !important;
          flex-direction: column !important;
      }

      /* Стили для контейнера обрезки в ПК версии */
      div#cropheadermodalparent[style*="display: block"] div#cropheadermodal #crop-contain,
      div#cropheadermodalparent[style*="display: flex"] div#cropheadermodal #crop-contain {
          width: 100% !important;
          height: auto !important;
          min-height: 400px !important;
          max-height: calc(90vh - 100px) !important;
          position: relative !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          background: #000 !important;
          overflow: hidden !important;
      }

      div#cropheadermodalparent[style*="display: block"] div#cropheadermodal #photo,
      div#cropheadermodalparent[style*="display: flex"] div#cropheadermodal #photo {
          max-width: 100% !important;
          max-height: calc(90vh - 100px) !important;
          width: auto !important;
          height: auto !important;
          display: block !important;
      }

      /* Стили для cropper контейнера в ПК версии */
      div#cropheadermodalparent[style*="display: block"] div#cropheadermodal .cropper-container,
      div#cropheadermodalparent[style*="display: flex"] div#cropheadermodal .cropper-container {
          width: 100% !important;
          height: 100% !important;
      }

      div#cropheadermodalparent[style*="display: block"] div#cropheadermodal .cropper-canvas,
      div#cropheadermodalparent[style*="display: flex"] div#cropheadermodal .cropper-canvas {
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
      }

      /* Заголовок обрезки в ПК версии */
      div#cropheadermodalparent[style*="display: block"] div#cropheadermodal #cropheader,
      div#cropheadermodalparent[style*="display: flex"] div#cropheadermodal #cropheader {
          display: block !important;
          height: 60px !important;
          line-height: 60px !important;
          padding: 0 20px !important;
          font-size: 18px !important;
          font-weight: bold !important;
          color: #86059c !important;
          border-bottom: 1px solid #e0e0e0 !important;
      }

      /* Кнопка закрытия в ПК версии */
      div#cropheadermodalparent[style*="display: block"] div#cropheadermodal #closecropmodal,
      div#cropheadermodalparent[style*="display: flex"] div#cropheadermodal #closecropmodal {
          position: absolute !important;
          top: 15px !important;
          right: 15px !important;
          width: 30px !important;
          height: 30px !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          cursor: pointer !important;
          z-index: 10001 !important;
          color: #86059c !important;
          font-size: 20px !important;
          background: transparent !important;
          border: none !important;
      }

      div#cropheadermodalparent[style*="display: block"] div#cropheadermodal #closecropmodal i,
      div#cropheadermodalparent[style*="display: flex"] div#cropheadermodal #closecropmodal i {
          font-size: 20px !important;
          color: #86059c !important;
      }

      /* Кнопка применения в ПК версии */
      div#cropheadermodalparent[style*="display: block"] div#cropheadermodal #toapplyavatar,
      div#cropheadermodalparent[style*="display: block"] div#cropheadermodal #toapplyheader,
      div#cropheadermodalparent[style*="display: flex"] div#cropheadermodal #toapplyavatar,
      div#cropheadermodalparent[style*="display: flex"] div#cropheadermodal #toapplyheader {
          position: absolute !important;
          bottom: 20px !important;
          right: 20px !important;
          width: 50px !important;
          height: 50px !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          z-index: 10001 !important;
          cursor: pointer !important;
      }

      div#cropheadermodalparent[style*="display: block"] div#cropheadermodal #toapplyavatar i,
      div#cropheadermodalparent[style*="display: block"] div#cropheadermodal #toapplyheader i,
      div#cropheadermodalparent[style*="display: flex"] div#cropheadermodal #toapplyavatar i,
      div#cropheadermodalparent[style*="display: flex"] div#cropheadermodal #toapplyheader i {
          font-size: 24px !important;
          color: #86059c !important;
      }
  }
  
  div#croploader {
      position: absolute;
      height: 100%;
      width: 100%;
      z-index: 10000;
      background-color: white;
  }
  
  svg#closecropmodal {
      position: absolute;
      top: 12.5px;
      right: 12.5px;
      display: none;
  }
  
  #croploader img {
      width: 70px;
      position: absolute;
      top: calc(50% - 35px);
      left: calc(50% - 35px);
  }
  
  .profilepage #toapplyavatar,.profilepage #toapplyheader {
      /*display: none;*/
      width: 50px;
      height: 50px;
      position: absolute;
      font-weight: 700;
      background-color: white;
      top: 20px;
      right: 20px;
      z-index: 10000;
      border-radius: 100%;
      /* background-image: url(/icons/applywhite.png); */
      /* background-size: 24px; */
      /* background-repeat: no-repeat; */
      /* background-position: center; */
      font-size: 30px;
      line-height: 50px;
  }
  
  .profilepage #modalwindowcontent>nav {
      display: none;
      width: 75%;
      height: 100%;
      padding: 15px;
      box-sizing: border-box;
      background-color: var(--color-background-modalnav);
      position: relative;
      z-index: 1000;
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
  }
  
  .profilepage #modalwindowcontent>nav>ul {
      font-size: var(--font-subtitle);
      text-align: left;
      list-style: none;
      padding: 0;
      margin: 0;
      width: 100%;
  }
  
  .profilepage #modalwindowcontent>nav>ul>li {
      color: #f2f3f4;
      padding-left: 12px;
      margin-bottom: 10px
  }
  
  .profilepage #modalwindowcontent>nav>ul>li.activemodalnav {
      color: #fff;
      border-left: 3px solid #fff;
      padding-left: 10px
  }
  
  .profilepage span.countnewintmodalbage {
      position: absolute;
      right: 20px;
      width: 20px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      top: calc(40%);
      background-color: #86059c;
      border-radius: 100%;
      font-size: 14px
  }
  
  .profilepage .modalintereststopmenu {
      position: fixed;
      top: 0;
      height: 45px;
      background-color: white;
      /* border-radius: 15px 15px 0 0; */
      z-index: 10;
  }
  
  .profilepage svg#closemodalwindow {
      width: 25px;
      height: 25px;
      fill: #6b606b;
      position: absolute;
      top: 10px;
      right: 10px;
      cursor: pointer;
      outline: 0;
      z-index: 1000;
  }
  
  .profilepage svg#closemodalwindowmenu {
      width: 25px;
      height: 25px;
      fill: white;
      position: absolute;
      top: 10px;
      right: 10px;
      display: none;
  }
  
  .profilepage img#openinterestsmenu {
      width: 20px;
      height: 20px;
      position: absolute;
      top: 10px;
      padding: 5px;
      left: 12px;
      outline: 0;
      z-index: 1000;
  }
  
  .profilepage #countavatarphotos {
      position: absolute;
      top: 12px;
      left: 20px;
      line-height: 20px;
      color: #fff;
      font-weight: 700
  }
  
  .profilepage div#addclassmodal-parentblock {
      height: calc(100% - 133px);
      overflow-y: auto;
      margin-top: 45px;
  }
  
  .profilepage #addclassinfo>div {
      margin-top: 10px
  }
  
  .profilepage #addclassinfo label, .profilepage #modalwindowcontent>nav>ul>li, .profilepage button#tosaveclass {
      line-height: calc(36px);
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: pointer;
  }
  
  .profilepage #addclassinfo label {
      display: inline-block;
      font-size: 14px;
      padding-left: 20px;
      margin-bottom: 10px;
      text-align: left;
      float: left;
      width: auto;
      max-width: 50%;
      box-sizing: border-box;
  }
  
  .profilepage input#classname {
      display: inline-block;
      max-width: 50%;
      width: auto;
      box-sizing: border-box;
      line-height: calc(36px);
      font-size: 14px;
      padding: 0 15px;
      border: 0;
  }
  
  .profilepage button#tosaveclass {
      position: absolute;
      bottom: 30px;
      left: 30px;
      width: calc(100% - 60px);
      height: 35px;
      border-radius: 4px;
      border: 0;
      background-color: var(--color-main);
      color: white;
      font-weight: bold;
      font-size: 14px;
      box-sizing: border-box;
      line-height: 30px;
  }
  
  .profilepage div#addclassmembers>table {
      display: inline-block;
      font-size: 14px;
      background-color: #fff;
      color: #696969;
      border-radius: 4px;
      overflow: hidden;
      width: calc(100% - 40px);
      margin: 0 20px;
  }
  
  .profilepage div#addclassmembers>table tbody {
      display: inline-block;
      width: 100%;
      box-sizing: border-box;
      border-right: 1px solid #f6f6f6
  }
  
  .profilepage div#addclassmembers>table tr {
      display: inline-block;
      width: 100%;
      border: 1px solid #f6f6f6;
      border-top: 0;
      height: auto;
      position: relative
  }
  
  .profilepage div#addclassmembers>table td,.profilepage div#addclassmembers>table th {
      display: inline-block;
      height: auto;
      box-sizing: border-box;
      overflow: hidden;
      text-overflow: ellipsis;
      padding: 10px;
      font-size: 14px;
      text-align: center;
      color: #000;
      cursor: pointer;
      border-right: 1px solid #f6f6f6;
      font-weight: 400
  }
  
  .profilepage div#addclassmembers>table td:nth-child(1),.profilepage div#addclassmembers>table th:nth-child(1) {
      width: 25%
  }
  
  .profilepage div#addclassmembers>table td:nth-child(2),.profilepage div#addclassmembers>table th:nth-child(2) {
      width: 30%
  }
  
  .profilepage div#addclassmembers>table td:nth-child(3),.profilepage div#addclassmembers>table th:nth-child(3) {
      width: 45%;
      border-right: none
  }
  
  .profilepage div#addclassmembers>table tr:first-child {
      border-top: 1px solid #f6f6f6
  }
  
  .profilepage div#addclassmembers>table td:nth-child(3n+3),.profilepage div#addclassmembers>table th:nth-child(3n+3) {
      border-right: none
  }
  
  .profilepage div#addclassmembers>table input {
      box-sizing: border-box;
      width: 100%;
      border: 0;
      text-align: center
  }
  
  .profilepage div#addpupilrow {
      text-align: left;
      margin-top: 30px;
      margin-left: 30px;
      box-sizing: border-box;
      width: auto;
      height: 25px;
      line-height: 25px;
      font-size: 14px;
      color: #6b606b;
  }
  
  .profilepage .modaladdclassesblock, .profilepage .modalinterestsblock {
      display: none;
      width: 100%;
      height: 100%;
      padding-top: 45px;
      box-sizing: border-box;
      overflow-y: auto;
  }
  
  .profilepage .modaladdclassesblock {
      height: auto;
      padding-top: 0;
  }
  
  .profilepage .addclassmodal-subheader {
      height: 35px;
      line-height: 35px;
      margin-bottom: 10px;
      box-sizing: border-box;
      color: var(--color-addit);
      font-weight: bold;
  }
  
  .profilepage .interestheader, .profilepage div#intereststory {
      padding-left: 30px;
      padding-right: 30px;
      text-align: justify;
      box-sizing: border-box;
  }
  
  .profilepage .interestheader>span {
      font-size: 20px;
      line-height: 50px;
      display: inline-block;
      vertical-align: top;
      margin-left: 15px;
      font-weight: 600;
      color: #111
  }
  
  .interestinfo {
      display: inline-block;
      padding: 0 20px;
      margin-top: 20px;
      box-sizing: border-box;
  }
  
  .interestinfo img {
      border-radius: 10px;
      float: left;
      margin-right: 20px;
      margin-bottom: 10px;
      max-width: 200px;
  }
  
  .interestinfo p {
      text-align: justify;
      margin: 0;
  }
  
  .interestinfo span {
      display: inline-block;
      width: 100%;
      margin: 12px 0;
      color: var(--color-main);
      text-align: left;
  }
  
  .interestinfo span>a {
      color: var(--color-main) !important;
  }
  
  .profilepage .achievementsheader, .profilepage .collectionheader, .profilepage .maininfoheader, .profilepage .mystoryheader, .profilepage .petsheader, .profilepage .blogheader, .challengesheader {
      text-align: center;
      font-size: 22px;
      margin-bottom: 17px;
      line-height: calc(36px);
      position: relative;
      color: var(--color-background-modalnav);
  }
  
  .profilepage span#noachievements, .profilepage span#nocolleсtion, .profilepage span#nopets, .profilepage span#nostory {
      display: inline-block;
      width: 100%;
      text-align: left;
      font-size: 16px;
      padding-left: 30px;
      padding-right: 30px;
      box-sizing: border-box;
      line-height: 20px;
  }
  
  .profilepage div#intereststory {
      font-size: 16px
  }
  
  div#intereststoryfield {
      margin: 0 23px 35px 30px;
      width: auto;
      height: calc(100% - var(--font-subtitle)*2 - 45px);
      border: 1px solid var(--color-gray-lightest);
      box-sizing: border-box;
      background-color: var( --color-background-input);
      border-radius: 4px;
      padding: calc(var(--font-main) + 13px) 20px;
      text-align: left;
      position: relative;
  }
  
  #intereststoryfieldtext {
      height: 100%;
      width: 100%;
      overflow-y: auto;
      border:none;
      resize: none;
      background-color: initial;
  }
  
  .profilepage span#charCounter {
      position: absolute;
      bottom: 7px;
      right: 7px;
      line-height: 16px;
      font-size: 14px
  }
  
  .profilepage div#achievementsslider {
      display: inline-block;
      width: 100%;
      height: calc(49%);
      vertical-align: top
  }
  
  .profilepage .achieveslide {
      width: calc(0%);
      margin: auto;
      display: flex;
      flex-direction: column;
      position: relative
  }
  
  .profilepage .openachievementoptions,.profilepage .openexhibitoptions,.profilepage .openpetoptions {
      display: inline-block;
      background: url(/icons/options.png);
      background-size: 25px;
      height: 25px;
      width: 25px;
      position: absolute;
      right: 20px;
      cursor: pointer;
      z-index: 999
  }
  
  .profilepage .achievementoptions-content,.profilepage .exhibitoptions-content,.profilepage .petoptions-content {
      display: none;
      width: auto;
      position: absolute;
      right: 20px;
      top: 30px;
      padding: 5px;
      border: 1px solid #f6f6f6;
      border-radius: 4px;
      background-color: #fff;
      color: var(--color-menu);
      z-index: 999;
      border-radius: 9px;
      -webkit-box-shadow: 0px 5px 10px 2px rgb(0 0 0 / 20%);
      -moz-box-shadow: 0px 5px 10px 2px rgba(0, 0, 0, 0.2);
      box-shadow: 0px 5px 10px 2px rgb(0 0 0 / 20%);
  }
  
  .profilepage #userheaderoptions-content>ul,.profilepage .achievementoptions-content>ul,.profilepage .exhibitoptions-content>ul,.profilepage .newsoptions-content>ul,.profilepage .petoptions-content>ul {
      margin: 0;
      padding: 0
  }
  
  .profilepage #userheaderoptions-content>ul>li,.profilepage .achievementoptions-content>ul>li,.profilepage .exhibitoptions-content>ul>li,.profilepage .petoptions-content>ul>li {
      list-style: none;
      padding: 7px;
      font-size: 14px;
      cursor: pointer
  }
  
  .profilepage li#closeheadersoption {
      text-align: center;
      background-color: var(--color-background-input);
      margin-top: 7px;
      border-radius: 4px;
      color: var(--color-addit);
  }
  
  .profilepage .achieveslide div[contenteditable],.profilepage .achieveslide input,.profilepage .achieveslide select {
      box-sizing: border-box;
      width: 100%;
      margin-bottom: 12px;
      padding: 7px 10px;
      font-size: 14px;
      text-align: left;
      border-radius: 4px;
      border: 1px solid #e3e3e3;
      background-color: #f6f6f6
  }
  
  .profilepage .achieveinfo {
      padding: 0 10px;
      box-sizing: border-box
  }
  
  .profilepage .achieveslide .achievephoto,.profilepage .achieveslide .achievephotoedit {
      display: inline-block;
      width: 100%;
      flex-grow: 2;
      margin-bottom: 15px;
      position: relative
  }
  
  .profilepage #updateachievephoto {
      margin: auto;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      cursor: pointer
  }
  
  .profilepage .tempdiv {
      height: 100%;
      width: 100%;
      display: table;
      position: relative;
      padding-left: 20px;
      box-sizing: border-box
  }
  
  .profilepage .achieveinfo>span {
      display: inline-block;
      width: 100%;
      margin-bottom: 7px;
      text-align: left
  }
  
  .profilepage .tempdiv>img {
      max-width: 100%;
      border-radius: 4px;
      float: left;
      vertical-align: middle;
      margin: auto;
      display: inline-block;
  }
  
  .profilepage main#content {
      box-sizing: border-box;
      display: inline-block;
      width: 100%;
      /* margin-top: -70px; */
  }
  
  .profilepage div#userheaderinfo {
      position: relative;
      margin-bottom: 0;
      /* border-radius: 15px; */
      overflow: hidden;
      margin-bottom: 10px;
      transition: height 0.3s ease;
  }
  
  .profilepage div#userheader {width: 100%;aspect-ratio: 13/5;box-sizing: border-box;background-color: #fff;display: inline-block;position: relative;/* border: 1px solid var(--color-gray-lightest); */border-bottom: none;/* border-radius: 15px 15px 0 0; */overflow: hidden;}
  
  .profilepage #userheader>img {
      width: 100%;
      border-radius: 4px 4px 0 0;
  }
  
  .profilepage #aboutuseroptions,.profilepage #userheaderoptions {
      position: relative;
      display: inline-block;
      float: right;
      z-index: 5000000;
  }
  
  .profilepage #openuserheaderoptions {
  }
  
  .profilepage #userheaderoptions-content-parent {
      /* display: none; */
      /* position: fixed; */
      /* top: 0; */
      /* bottom: 0; */
      /* left: 0; */
      /* right: 0; */
      /* z-index: 1000000; */
      /* background-color: rgba(0, 0, 0, .4); */
  }
  .profilepage #userheaderoptions-content {
      /* display: none; */
      /* position: fixed; */
      /* bottom: 9px; */
      /* z-index: 100000; */
      /* width: calc(var(--display-width) - 18px); */
      /* box-sizing: border-box; */
      /* left: 9px; */
      /* top: auto; */
      /* right: 9px; */
      /* border-radius: 4px; */
      /* padding: 10px; */
      /* background-color: #fff; */
      /* color: black; */
  }
  
  .profilepage #headerinfo {
      margin-top: -4px;
      box-sizing: border-box;
      background-color: #fff;
      padding: 5px 0 5px;
      text-align: left;
      height: auto;
      position: relative;
      /* border-radius: 0 0 15px 15px; */
      border-bottom: 1px solid var(--color-gray-lightest);
      border-top: none;
      width: var(--display-width);
  }
  
  .profilepage #useravatar {
      width: 120px;
      height: 120px;
      margin-right: 10px;
      cursor: pointer;
      border-radius: 100%;
      box-sizing: border-box;
      position: absolute;
      z-index: 3;
      background-color: #e6f1ff;
      top: -55px;
      left: 5px;
  }
  
  .profilepage #useravatar>div {
      position: relative;
      display: inline-block;
      height: 100%
  }
  
  .profilepage #useravatar img {
      width: 100%;
      height: 100%;
      border-radius: 100%;
      padding: 3px;
      background: white;
      box-sizing: border-box;
  }
  
  .profilepage ul#useravataroptions {
      display: none;
      font-size: 14px;
      list-style: none;
      padding: 10px 10px 3px;
      margin: 0;
      color: #000;
      border-top: 0;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      box-sizing: border-box;
      background-color: rgba(230,241,255,.6)
  }
  
  .profilepage #useravataroptions>li {
      margin-bottom: 3px;
      padding: 7px;
      border-radius: 4px
  }
  
  .profilepage #alluseravatars {
      display: none;
      margin-bottom: -10px;
  }
  
  /* Стили для активного слайдера аватарок в ПК версии */
  @media (min-width: 769px) {
      .profilepage #alluseravatars.allAvatarsContainer-active {
          position: fixed !important;
          top: 0 !important;
          left: 0 !important;
          width: 100vw !important;
          height: 100vh !important;
          z-index: 10000011 !important;
          background-color: rgba(0, 0, 0, 0.5) !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          backdrop-filter: blur(8px);
      }
      
      .profilepage #alluseravatars.allAvatarsContainer-active .swiper {
          width: 90vw !important;
          max-width: 1200px !important;
          height: 90vh !important;
          max-height: 900px !important;
          border-radius: 20px !important;
          overflow: hidden !important;
          box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6) !important;
          background: rgba(255, 255, 255, 0.05) !important;
          backdrop-filter: blur(10px) !important;
          border: 1px solid rgba(255, 255, 255, 0.1) !important;
      }
      
      .profilepage #alluseravatars.allAvatarsContainer-active .swiper-wrapper {
          height: 100% !important;
          display: flex !important;
          align-items: center !important;
      }
      
      .profilepage #alluseravatars.allAvatarsContainer-active .swiper-slide {
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          height: 100% !important;
          padding: 40px !important;
      }
      
      .profilepage #alluseravatars.allAvatarsContainer-active .swiper-slide img {
          max-width: 100% !important;
          max-height: 100% !important;
          width: auto !important;
          height: auto !important;
          object-fit: contain !important;
          border-radius: 12px !important;
          box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
      }
      
      /* Красивые стрелки навигации для ПК */
      .profilepage #alluseravatars.allAvatarsContainer-active .swiper-button-next,
      .profilepage #alluseravatars.allAvatarsContainer-active .swiper-button-prev {
          width: 50px !important;
          height: 50px !important;
          background: rgba(255, 255, 255, 0.15) !important;
          backdrop-filter: blur(10px) !important;
          border-radius: 50% !important;
          border: 1px solid rgba(255, 255, 255, 0.2) !important;
          color: white !important;
          transition: all 0.3s ease !important;
          margin-top: 0 !important;
          top: 50% !important;
          transform: translateY(-50%) !important;
      }
      
      .profilepage #alluseravatars.allAvatarsContainer-active .swiper-button-next:hover,
      .profilepage #alluseravatars.allAvatarsContainer-active .swiper-button-prev:hover {
          background: rgba(255, 255, 255, 0.25) !important;
          transform: translateY(-50%) scale(1.1) !important;
      }
      
      .profilepage #alluseravatars.allAvatarsContainer-active .swiper-button-next::after,
      .profilepage #alluseravatars.allAvatarsContainer-active .swiper-button-prev::after {
          font-size: 20px !important;
          font-weight: bold !important;
      }
      
      /* Пагинация для ПК */
      .profilepage #alluseravatars.allAvatarsContainer-active .swiper-pagination {
          bottom: 20px !important;
      }
      
      .profilepage #alluseravatars.allAvatarsContainer-active .swiper-pagination-fraction {
          background: rgba(0, 0, 0, 0.6) !important;
          backdrop-filter: blur(10px) !important;
          border: 1px solid rgba(255, 255, 255, 0.2) !important;
          border-radius: 20px !important;
          padding: 8px 16px !important;
          font-size: 14px !important;
          font-weight: 500 !important;
          height: fit-content;
          right: 100px !important;
          top: 20px !important;
      }
      
      /* Скрываем кнопку закрытия по умолчанию (когда слайдер не активен) */
      .profilepage #userheaderinfo .close-slider-btn {
          display: none !important;
      }
      
      /* Кнопка закрытия для ПК - показываем только когда слайдер активен */
      .profilepage #alluseravatars.allAvatarsContainer-active ~ #userheaderinfo .close-slider-btn,
      .profilepage #alluseravatars.allAvatarsContainer-active + * .close-slider-btn,
      body:has(.profilepage #alluseravatars.allAvatarsContainer-active) .close-slider-btn {
          position: fixed !important;
          top: 20px !important;
          right: 20px !important;
          width: 50px !important;
          height: 50px !important;
          background: rgba(255, 255, 255, 0.15) !important;
          backdrop-filter: blur(10px) !important;
          border: 1px solid rgba(255, 255, 255, 0.2) !important;
          border-radius: 50% !important;
          transition: all 0.3s ease !important;
          z-index: 10000012 !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          opacity: 1 !important;
          cursor: pointer !important;
          color: white !important;
      }
      
      .profilepage #alluseravatars.allAvatarsContainer-active ~ #userheaderinfo .close-slider-btn:hover,
      .profilepage #alluseravatars.allAvatarsContainer-active + * .close-slider-btn:hover,
      .profilepage #userheaderinfo .close-slider-btn:hover,
      body:has(.profilepage #alluseravatars.allAvatarsContainer-active) .close-slider-btn:hover {
          background: rgba(255, 255, 255, 0.25) !important;
          transform: scale(1.1) rotate(90deg) !important;
      }
      
      /* Скрываем кнопки навигации на мобильных */
      .profilepage #alluseravatars .swiper-button-next,
      .profilepage #alluseravatars .swiper-button-prev {
          display: none !important;
      }
      
      /* Показываем кнопки навигации только в активном состоянии на ПК */
      .profilepage #alluseravatars.allAvatarsContainer-active .swiper-button-next,
      .profilepage #alluseravatars.allAvatarsContainer-active .swiper-button-prev {
          display: flex !important;
      }
      
      /* Уменьшаем z-index навбара когда открыт слайдер аватарок */
      .profilepage #alluseravatars.allAvatarsContainer-active ~ .top-navbar,
      body:has(.profilepage #alluseravatars.allAvatarsContainer-active) .top-navbar {
          z-index: 1 !important;
      }
  }
  
  /* На мобильных устройствах скрываем кнопки навигации */
  @media (max-width: 768px) {
      .profilepage #alluseravatars .swiper-button-next,
      .profilepage #alluseravatars .swiper-button-prev {
          display: none !important;
      }
  }
  
  .profilepage span.onlinestatus {
      position: absolute;
      bottom: 12px;
      right: 8px;
      width: 12px;
      height: 12px;
      border-radius: 100%;
      border: 3px solid white;
  } 
  
  .profilepage #modalwindow.modalwindowavatar {
      width: auto;
      height: auto;
      overflow: visible
  }
  
  .profilepage .modalwindowavatar>div#modalwindowcontent, .profilepage .modalwindowavatar>div#modalwindowcontentavatars {
      height: 100%;
      display: flex;
      flex-direction: column;
      position: relative
  }
  
  .profilepage .useravatarmodalheader {
      height: 55px;
      display: inline-block;
      width: 100%;
      background-color: var(--color-main)
  }
  
  .profilepage .usermodalavatar {
      height: calc(100% - 110px);
      display: inline-block;
      margin-top: -4px;
      margin-bottom: -4px;
      position: relative;
      background-color: #f2f3f4
  }
  
  .profilepage .useravatarcontaining>img {
      max-width: 100%;
      max-height: 100%;
      margin-bottom: -4px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-right: -50%;
      transform: translate(-50%,-50%)
  }
  
  .profilepage .useravatarcontaining {
      width: auto;
      height: auto;
      display: inline-block
  }
  
  .profilepage .toleft.toleftavatar,.profilepage .toright.torightavatar {
      background-color: rgba(255,255,255,.6);
      color: #86059c
  }
  
  .profilepage .modalwindowavatar .photoinfo {
      position: absolute;
      display: inline-block;
      padding: 10px;
      box-sizing: border-box;
      height: 55px;
      min-height: 55px;
      width: 100%;
      bottom: -55px;
      top: auto
  }
  
  .profilepage .useravatarinfo-container-1 {
      display: inline-block;
      width: 100%;
      height: auto
  }
  
  .profilepage .usermodalavatar .like-active {
      width: 30px;
      height: 30px;
      background-image: url(/icons/active-like.png);
      background-size: 30px 30px;
      transition: background 1s ease;
      cursor: pointer;
      display: inline-block;
      margin-right: 5px;
      margin-left: 102px;
      float: left
  }
  
  .profilepage .usermodalavatar .like-passive {
      background-image: url(/icons/passive-like.png);
      transition: background 1s ease;
      cursor: pointer;
      margin-left: 100px
  }
  
  .profilepage .usermodalavatar span.countcomments,.profilepage .usermodalavatar span.counthearts {
      color: #1c1c1c;
      font-size: 16px;
      line-height: 30px;
      display: inline-block;
      height: 30px;
      font-weight: 700;
      vertical-align: top;
      margin-right: 25px;
      margin-left: 5px;
      float: left
  }
  
  .profilepage .usermodalavatar .like-passive,.profilepage .usermodalavatar span.commentsheader {
      display: inline-block;
      background-size: 30px 30px;
      height: 30px;
      width: 30px;
      margin-right: 5px;
      float: left
  }
  
  .profilepage .usermodalavatar span.commentsheader {
      background-image: url(/icons/comments.png)
  }
  
  .profilepage .photoavatarcomments {
      flex-grow: 3;
      padding: 20px;
      box-sizing: border-box;
      overflow-y: auto
  }
  
  .profilepage .usermodalavatarcomment {
      margin-bottom: 7px
  }
  .profilepage .infocomment {
      position: relative;
      display: inline-block;
      width: 100%;
      height: auto;
      min-height: 45px;
  }
  .profilepage .infocomment img {
      float: left;
      width: 45px;
      border-radius: 4px;
      margin-right: 10px;
      display: inline-block;
      border-radius: 100%;
  }
  
  
  
  .profilepage .useravatarinfo-container-2 {
      display: inline-block;
      width: 100%;
      height: auto
  }
  
  .profilepage img.toattachemoji,.profilepage img.tosendcomment {
      width: 20px;
      cursor: pointer;
      margin-left: 10px
  }
  
  .profilepage img.toattachemoji {
      display: inline-block;
      bottom: 15px
  }
  
  .profilepage .emojies {
      display: none;
      box-sizing: border-box;
      max-width: 200px;
      max-height: 150px;
      min-height: 100px;
      border: 1px solid #696969;
      position: absolute;
      right: 0;
      bottom: calc(26px)
  }
  
  .profilepage .newsactions {
      margin-top: 10px;
      border-top: 1px solid var(--color-gray-lightest);
      padding-top: 10px
  }
  
  .profilepage div#edituserrole-modal {
      position: fixed;
      z-index: 1000000;
      background-color: white;
      border-radius: 15px;
      display: none;
      left: 0;
      top: 55px;
      bottom: 55px;
      padding: 20px;
      box-sizing: border-box;
  }
  
  .profilepage div#edituserrole-modal-header {
      display: inline-block;
      width: 100%;
      text-align: left;
      font-size: 18px;
      line-height: 25px;
      font-weight: bold;
      color: var(--color-addit);
      margin-bottom: 20px;
      height: 50px;
      overflow: hidden;
      text-overflow: ellipsis;
  }
  
  .profilepage .chooseuserrole-checkbox {
      display: inline-block;
      width: 100%;
      text-align: left;
      margin-bottom: 10px;
  }
  
  .profilepage #edituserrole-modal>div {
      width: calc(100% - 40px);
      height: calc(100% - 40px);
      box-sizing: border-box;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
  }
  
  .profilepage div#edituserrole-modal-children {
      margin-bottom: 20px;
      height: calc(100% - 145px);
      overflow-y: auto;
  }
  
  .profilepage button#saveuserrole {
      height: 35px;
      width: 100%;
      border: none;
      border-radius: 4px;
      background-color: var(--color-main);
      color: white;
      font-weight: bold;
      margin-bottom: 20px;
  }
  
  .profilepage svg#closeuserrolesedit {
      display: inline-block;
      position: absolute;
      width: 25px;
      height: 25px;
      padding: 0;
      margin: 0;
      border: none;
      fill: #6b606b;
      top: 10px;
      right: 10px;
  }
  
  
  
  .profilepage div#usermaininfo-parent {
      width: calc(100% - 140px);
      min-height: 64px;
      margin-left: auto;
      margin-right: 0;
      margin-bottom: 7px;
      z-index: 1000;
      bottom: 0;
      left: 20px;
  }
  
  .profilepage div#usermaininfo {
      height: auto;
      /* position: absolute; */
      /* top: 50%; */
      /* transform: translate(0, -50%); */
      width: fit-content;
  }
  
  .profilepage div#userdescription {
      display: inline-block;
      font-size: 14px;
      box-sizing: border-box;
      min-height: 25px;
      line-height: 25px;
      height: auto;
      width: calc(100% - 10px);
      margin-left: 10px;
      vertical-align: top;
  }
  
  .profilepage div#userdescription[contenteditable] {
      width: calc(100% - 45px);
  }
  
  img#tosaveuserdescription {
      width: 25px;
      height: 25px;
      margin-left: 10px;
      opacity: .4;
  }
  
  .profilepage div#userinfo {
      margin-bottom: 15px;
      background-color: #fff;
      padding: 15px;
      box-sizing: border-box;
      /* box-shadow: 0 0 10px 3px rgb(221 221 221); */
      border: 1px solid var(--color-gray-lightest);
      border-radius: 15px;
  }
  
  .profilepage div#usercounts {
      display: table;
      table-layout: fixed;
      /* padding: 7px 5px 7px 5px; */
      box-sizing: border-box;
      background-color: white;
      /* border-top: 2px solid var(--color-gray-lightest); */
      /* border-bottom: 2px solid var(--color-gray-lightest); */
      margin-bottom: 10px;
      border: 1px solid var(--color-gray-lightest);
      border-radius: 15px;
  }
  
  .profilepage .usercounts-children {
      display: table-cell;
      vertical-align: top;
      height: 40px;
      padding: 7px 5px;
      border-right: 1px solid var(--color-gray-lightest);
  }
  
  .profilepage span.usercounts-children-number, .profilepage span.usercounts-children-text {
      display: inline-block;
      width: 100%;
  }
  
  .profilepage span.usercounts-children-number {
      font-size: var(--font-main);
      font-weight: bold;
  }
  
  .profilepage span.usercounts-children-text {
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 13px;
  }
  
  .profilepage div#actionbuttons-parent {
      padding: 15px;
      box-sizing: border-box;
      margin-bottom: 15px;
      background-color: white;
  }
  
  .profilepage div#actionbuttons,.profilepage div#rightuserblocks {
      width: 100%
  }
  
  .profilepage #aboutuser>span, .profilepage #usermaininfo>span {
      display: block;
      width: fit-content;
      vertical-align: top;
      color: #000;
      font-size: 19px;
      line-height: 26px;
      margin-bottom: 14px;
      /* margin-top: 5px; */
      text-align: left;
      font-weight: bold;
  }
  
  .profilepage #aboutuser>span.userheadersubtitle {
      line-height: 25px;
      font-weight: normal;
      color: #86059c;
      font-size: 16px;
      padding-top: 5px;
      padding-bottom: 10px;
      margin-top: 0;
      margin-bottom: 12px;
      text-align: left;
      box-sizing: border-box;
      border-bottom: 1.5px solid #86059c;
      font-weight: bold;
  }
  
  .profilepage span#userroleheader {
      color: #6b606b;
      font-size: 14px;
      line-height: normal;
      font-weight: normal;
      margin-top: -6px;
      margin-bottom: 0;
  }
  
  .profilepage span#userroleheader[data-isedited="true"] {
      padding-bottom: 5px;
      border-bottom: 1px #6b606b dashed;
  }
  
  .profilepage ul#userroles {
      text-align: left;
      padding-left: 15px;
      margin: 0 0 10px 15px;
      border-left: 3px solid var(--color-main);
      list-style: none
  }
  
  .profilepage #userinfo li.userrole {
      line-height: calc(23px);
      margin-bottom: 5px;
      font-size: 14px;
      color: #6b606b
  }
  
  .profilepage .userrole>span {
      display: block
  }
  
  .profilepage button#addclass {
      border-radius: 4px;
      border: 1px solid #f6f6f6;
      padding: 5px 10px;
      cursor: pointer;
      display: block;
      width: 100%;
      margin-bottom: 10px
  }
  
  .profilepage #userbirth,.profilepage #usercity,.profilepage #useremail,.profilepage #userschool {
      margin-bottom: 5px;
      text-align: left;
      position: relative;
      height: calc(24px);
      height: auto;
      display: inline-block;
  }
  
  .profilepage #userbirth>span:first-child,.profilepage #usercity>span:first-child,.profilepage #useremail>span:first-child,.profilepage #userschool>span:first-child {
      box-sizing: border-box;
      text-align: left;
      font-size: 14px;
      color: #1c1c1c;
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      /* position: absolute; */
      /* top: 0; */
      /* left: 15px; */
      width: 150px;
      height: calc(24px);
      line-height: calc(24px);
      padding-left: 10px;
      margin-bottom: -4px;
  }
  
  .profilepage #userbirth>span:nth-child(2),.profilepage #usercity>span:nth-child(2),.profilepage #useremail>span:nth-child(2),.profilepage #userschool>span:nth-child(2) {
      width: calc(100% - 160px);
      text-align: left;
      /* margin-left: 160px; */
      /* position: absolute; */
      top: 0;
      color: #023342;
      font-size: 14px;
      height: calc(24px);
      line-height: calc(24px);
      height: auto;
      vertical-align: top;
      display: inline-block;
      float: right;
      margin-bottom: -4px;
  }
  
  .profilepage #hideallinfo,.profilepage #showallinfo {
      font-size: 14px;
      display: inline-block;
      width: 100%;
      text-align: center;
      cursor: pointer;
      margin-top: 5px;
      font-weight: 700;
      color: #5e5e5e
  }
  
  .profilepage #hideallinfo {
      display: none
  }
  
  div#useractions {
      display: inline-block;
      background-color: white;
      padding: 10px;
      padding-top: 0;
      box-sizing: border-box;
      height: 38px;
      margin-bottom: -4px;
  }
  
  div#usermenuactions {
      position: relative;
      display: inline-block;
      float: right;
      width: 0;
  }
  
  span#openusermenuactions {
      display: inline-block;
      background: url(/icons/options.png);
      background-size: 28px;
      height: 28px;
      width: 28px;
      position: absolute;
      top: 0;
      right: 0;
  }
  
  div#usermenuactions-content-parent {
      display: none;
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 10000;
      background-color: rgba(0, 0, 0, .4);
  }
  
  div#usermenuactions-content {
      display: none;
      position: fixed;
      bottom: 9px;
      z-index: 100000;
      width: calc(var(--display-width) - 18px);
      box-sizing: border-box;
      left: 9px;
      top: auto;
      right: 9px;
      border-radius: 4px;
      padding: 10px;
      background-color: #fff;
      color: black;
      text-align: left;
  }
  
  #usermenuactions-content>ul {
      margin: 0;
      padding: 0;
  }
  
  #usermenuactions-content>ul>li {
      list-style: none;
      font-size: 14px;
      cursor: pointer;
      white-space: nowrap;
      margin-bottom: 3px;
      padding: 7px;
      border-radius: 4px;
  }
  
  #closeusermenuoption {
      text-align: center;
      background-color: var(--color-background-input);
      margin-top: 7px;
      color: var(--color-addit);
  }
  
  .profilepage button#toacquaint, .profilepage button#toaskhelp, .profilepage button#tobefriends, .profilepage button#tosubscribe, .profilepage button#tounacquaint, .profilepage button#tounbefriends, .profilepage button#tounsubscribe, .profilepage button#towrite, .profilepage #tobefriends-calcel {
      display: inline-block;
      background-color: var(--color-main);
      color: white;
      width: calc(100%/2 - 29px);
      padding: 5px 10px;
      line-height: var(--font-subtitle);
      font-size: var(--font-notice);
      font-weight: bold;
      cursor: pointer;
      border-radius: 4px;
      border: 0px;
      height: 28px;
      vertical-align: top;
      margin-right: 15px;
      float: left;
  }
  
  .profilepage button#toacquaint[disabled] {
      opacity: .7
  }
  
  .profilepage div#actionbuttons>button:nth-child(2n+1) {
      margin-right: 10px;
  }
  .profilepage div#actionbuttons>button:nth-child(-n+2) {
      margin-top: 0;
  }
  
  .profilepage span#countsubscribers, #countfriends {
      color: var(--color-gray-dark);
      font-weight: normal;
      display: inline-block;
      margin-left: 7px;
      
  }
  
  .profilepage span#showallsubscribers {
      font-size: 14px;
      float: right;
      cursor: pointer;
      color: #5e5e5e
  }
  
  .profilepage .usersubscribersmodalheader {
      height: 65px;
      display: inline-block;
      width: 100%;
      border-radius: 4px 4px 0 0;
      background-color: var(--color-main)
  }
  
  .profilepage div#usersubscriberslist {
      width: 100%;
      height: calc(35%);
      margin-top: -4px;
      box-sizing: border-box;
      padding: 20px 20px 20px 5px;
      overflow-y: auto
  }
  
  .profilepage .usersubscriber-modal-card {
      display: inline-block;
      box-sizing: border-box;
      width: calc(1.6666666666666679%);
      overflow: hidden;
      margin-bottom: 15px;
      margin-left: 15px;
      white-space: nowrap;
      text-overflow: ellipsis;
      text-align: center;
      color: #213021;
      position: relative;
      cursor: pointer;
      font-size: 16px;
      float: left
  }
  
  .profilepage .usersubscriber-modal-card img {
      width: 100%;
      border-radius: 4px
  }
  
  .profilepage .usersubscriber-modal-card span {
      font-size: 14px;
      color: #000;
      margin-top: 8px;
      display: inline-block;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
  }
  
  .profilepage .usersubscribersmodalheader>span {
      color: #fff;
      font-size: 20px;
      float: left;
      line-height: 65px;
      padding-left: 30px
  }
  
  .profilepage #ya-share2-parent {
      position: absolute;
      bottom: 10px;
      right: 10px
  }
  
  .profilepage #ya-share2-parent,.profilepage .ya-share-2 {
      display: inline-block;
      width: auto
  }
  
  .profilepage .ya-share2__list .ya-share2__list_direction_vertical {
      background-color: #fff
  }
  
  .profilepage #usercontacts,.profilepage #usereducation,.profilepage #userexperience {
      position: relative;
      margin-bottom: 15px;
      box-sizing: border-box;
      text-align: left;
      width: 100%;
      margin-left: auto;
      margin-right: 0;
      transition: .55s display;
  }
  
  .profilepage div#usereducation,.profilepage div#userexperience {
      margin-bottom: 10px;
      background: white;
      padding: 15px;
      /* box-shadow: 0 0 10px 3px rgb(221 221 221); */
      box-sizing: border-box;
      border-radius: 15px;
      border: 1px solid var(--color-gray-lightest);
  }
  
  .profilepage div#usermenu, #selectedmenu {
      background-color: white;
      border-radius: 0px 0px 4px 4px;
      display: inline-block;
      /* padding: 10px 15px; */
      box-sizing: border-box;
      text-align: right;
      width: 100%;
      position: relative;
      margin-bottom: 10px;
      /* border-bottom: 2px solid var(--color-gray-lightest); */
      /* overflow-x: auto; */
      /* white-space: nowrap; */
      text-align: left;
      border-radius: 15px;
      border: 1px solid var(--color-gray-lightest);
      overflow: hidden;
  }
  .profilepage .userinset, .selectedinset {
      display: inline-block;
      width: auto;
      /* float: left; */
      /* padding-bottom: 7px; */
      /* margin-right: 20px; */
      font-weight: bold;
      cursor: pointer;
      font-size: 14px;
      vertical-align: top;
      padding: 15px;
      margin-left: -4px;
      height: 20px;
      line-height: 20px;
  }
  .profilepage .activeuserinset, .activeselectedinset {
      /* border-bottom: 2px solid black; */
      background: var(--color-background-input);
  }
  .profilepage div#userclasses {
      margin-bottom: 15px;
      display: inline-block;
      width: 100%;
      box-sizing: border-box;
      padding: 10px 10px 5px;
      background-color: #fff;
      position: relative
  }
  
  .profilepage div#userinterestsparent, .profilepage div#usersubscriberparent, .profilepage div#usersubjectparent, .profilepage div#userfriendsparent {
      display: none;
      background: rgba(0, 0, 0, .4);
      position: fixed;
      z-index: 10000000;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      margin-bottom: 0;
  }
  .profilepage div#userinterests, .profilepage div#usersubscribers, .profilepage div#usersubjects, .profilepage div#userfriends {
      position: absolute;
      background-color: #fff;
      top: 0;
      bottom: 0;
      border-radius: 0;
      box-sizing: border-box;
      float: left;
      padding: 15px 15px 15px;
      padding-bottom: 35px;
      overflow-y: auto;
  }
  
  .userfriends-card, .usersubscriber-card {
      display: inline-block;
      width: calc(100%/4 - 75px/4);
      float: left;
      margin-left: 15px;
      margin-bottom: 15px;
  }
  
  .profilepage .userfriends-card>img, .profilepage .usersubscriber-card>img {
      width: 100%;
      aspect-ratio: 1/1;
      max-width: 100px;
      border-radius: 100%;
      margin-bottom: 10px;
  }
  
  .profilepage .userfriends-card>span, .profilepage .usersubscriber-card>span {
      display: inline-block;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 14px;
      font-weight: bold;
  }
  
  .profilepage button#usercontactsedit {
      position: absolute;
      z-index: 25;
      right: 0px;
      top: 10px;
      height: 25px;
      width: 25px;
      padding: 0;
      border: 0;
      background-image: url(/icons/edit.png);
      background-size: 25px 25px;
      background-color: #fff;
  }
  
  .profilepage button#usercontactseditclose {
      right: 0;
  }
  
  .profilepage button#usercontactseditclose, .profilepage button#usercontactseditsave, .profilepage button#usereducationedit {
      position: absolute;
      z-index: 25;
      top: 10px;
      height: 25px;
      width: 25px;
      padding: 0;
      border: 0;
      background-size: 25px 25px;
      background-color: #fff;
  }
  
  .profilepage button#usereducationedit {
      right: 15px;
      background-image: url(/icons/edit.png);
      top: 15px;
  }
  
  .profilepage button#usereducationclose {
      right: 15px;
      top: 15px !important;
  }
  
  .profilepage button#usereducationclose,.profilepage button#usereducationsave,.profilepage button#userexperienceedit {
      position: absolute;
      z-index: 25;
      top: 10px;
      height: 25px;
      width: 25px;
      padding: 0;
      border: 0;
      background-size: 25px 25px;
      background-color: #fff;
      cursor: pointer
  }
  
  .profilepage button#userexperienceedit {
      right: 0;
      background-image: url(/icons/edit.png)
  }
  
  .profilepage button#userexperienceclose {
      right: 0
  }
  
  .profilepage button#userexperienceclose, .profilepage button#userexperiencesave, .profilepage button#userinterestsedit, #userfioedit, #tosaveuserfio {
      position: absolute;
      z-index: 25;
      top: 7px;
      height: 25px;
      width: 25px;
      padding: 0;
      border: 0;
      background-size: 25px 25px;
      background-color: #fff;
      cursor: pointer
  }
  
  .profilepage button#userinterestsedit, .profilepage button#usersubjectsedit, #userfioedit {
      right: 15px;
      background-image: url(/icons/edit.png);
      top: 20px;
  }
  
  .profilepage #closeuserinterests, .profilepage #closeuserfriends, .profilepage #closeusersubscribers, .profilepage #closeusersubjects {
      width: 25px;
      height: 25px;
      position: absolute;
      top: 10px;
      position: absolute;
      width: 25px;
      height: 25px;
      background-image: url(/icons/arrowleft.png);
      background-size: 100%;
      top: 20px;
      left: 15px;
  }
  
  .profilepage button#userinterestsclose, .profilepage button#usersubjectsclose {
      right: 15px;
  }
  
  .profilepage button#userinterestsclose, .profilepage button#userinterestssave, .profilepage button#usersubjectsclose, .profilepage button#usersubjectssave {
      position: absolute;
      z-index: 25;
      top: 20px;
      height: 25px;
      width: 25px;
      padding: 0;
      border: 0;
      background-size: 25px 25px;
      background-color: #fff;
  }
  
  .profilepage #userachievementsedit {
      background-image: url(/icons/edit.png)
  }
  
  .profilepage #userachievementsedit,.profilepage button#userachievementsclose {
      right: 10px;
      top: 0px;
      background-size: 25px 25px;
      background-color: #fff
  }
  
  .profilepage #userachievementsedit, .profilepage button#intereststoryedit, .profilepage button#userachievementsclose, .profilepage button#userachievementssave {
      position: absolute;
      z-index: 25;
      height: 25px;
      width: 25px;
      padding: 0;
      border: 0;
      cursor: pointer;
  }
  
  .profilepage button#userachievementssave {
      top: 10px;
      background-size: 20px 20px;
      background-color: #fff
  }
  
  .profilepage button#intereststoryedit {
      background-image: url(/icons/edit.png)
  }
  
  .profilepage button#intereststoryclose, .profilepage button#intereststoryedit {
      right: 7px;
      top: 6.5px;
      background-size: 25px 25px;
      background-color: #fff;
  }
  
  .profilepage button#interestachieveedit, .profilepage button#intereststoryclose, .profilepage button#intereststorysave {
      position: absolute;
      z-index: 25;
      height: 25px;
      width: 25px;
      padding: 0;
      border: 0;
      cursor: pointer;
  }
  
  .profilepage button#intereststorysave {
      top: 7px;
      background-size: 25px 25px;
      background-color: #fff;
  }
  
  .profilepage button#interestachieveedit {
      background-image: url(/icons/edit.png)
  }
  
  .profilepage button#interestachieveclose,.profilepage button#interestachieveedit {
      right: 7px;
      top: 7px;
      background-size: 25px 25px;
      background-color: #fff
  }
  
  .profilepage button#interestachieveclose,.profilepage button#interestachievesave,.profilepage button#usersubjectsedit {
      position: absolute;
      z-index: 25;
      height: 25px;
      width: 25px;
      background-size: 25px 25px;
      background-color: white;
      padding: 0;
      border: 0;
  }
  
  .profilepage button#interestachievesave {
      top: 7px;
      background-size: 25px 25px;
      background-color: #fff
  }
  
  .profilepage button#usersubjectsedit {
      background-image: url(/icons/edit.png)
  }
  
  .profilepage button#interestcollectedit,.profilepage button#usersubjectsclose,.profilepage button#usersubjectssave {
      position: absolute;
      z-index: 25;
      height: 25px;
      width: 25px;
      padding: 0;
      border: 0;
      background-size: 25px 25px;
      background-color: white;
  }
  
  .profilepage button#usersubjectssave {
      background-size: 25px 25px;
      background-color: #fff
  }
  
  .profilepage button#interestcollectedit {
      right: 7px;
      background-image: url(/icons/edit.png)
  }
  
  .profilepage button#interestcollectedit,.profilepage button#interestcollectsave {
      top: 7px;
      background-size: 25px 25px;
      background-color: #fff
  }
  
  .profilepage button#interestcollectclose,.profilepage button#interestcollectsave,.profilepage svg#interestachieveadd {
      position: absolute;
      z-index: 25;
      height: 25px;
      width: 25px;
      padding: 0;
      border: 0;
      cursor: pointer
  }
  
  .profilepage button#interestcollectclose {
      right: 7px;
      top: 7px;
      background-size: 25px 25px;
      background-color: #fff
  }
  
  .profilepage svg#interestachieveadd {
      top: 5px
  }
  
  .profilepage button#interestachieveclose,.profilepage button#interestcollectclose,.profilepage button#intereststoryclose,.profilepage button#userachievementsclose,.profilepage button#usercontactseditclose,.profilepage button#usereducationclose,.profilepage button#userexperienceclose,.profilepage button#userinterestsclose,.profilepage button#usersubjectsclose {
      background-image: url(/icons/close.png)
  }
  
  .profilepage button#interestachievesave, .profilepage button#interestcollectsave, .profilepage button#intereststorysave, .profilepage button#userachievementssave, .profilepage button#usercontactseditsave, .profilepage button#usereducationsave, .profilepage button#userexperiencesave, .profilepage button#userinterestssave, .profilepage button#usersubjectssave, #tosaveuserfio {
      background-image: url(/icons/save.png);
      right: 35px;
  }
  
  .profilepage button#userinterestssave, .profilepage button#usersubjectssave {
      right: 50px;
  }
  
  .profilepage button:focus {
      outline: 0
  }
  
  .profilepage div#editdescription,.profilepage input#editfbadress,.profilepage input#editinstadress,.profilepage input#editokruadress,.profilepage input#editvkadress,.profilepage input#editwebadress,.profilepage textarea#editadress {
      display: inline-block;
      width: calc(65%);
      font-size: 16px;
      text-align: left;
      padding: 5px 10px;
      box-sizing: border-box;
      border: 0;
      cursor: text;
      margin-left: 20%;
      resize: none;
      font-family: 'Montserrat';
      line-height: calc(22px)
  }
  
  .profilepage #editdescription[placeholder]:empty:before {
      content: attr(placeholder);
      color: #999;
      font-style: italic
  }
  
  .profilepage #editdescription[placeholder]:empty:focus:before,.profilepage #newheader[placeholder]:empty:focus:before {
      content: ''
  }
  
  .profilepage button#applydescription {
      width: 20px;
      height: 20px;
      position: absolute;
      right: 7px;
      background-color: #fff;
      border: 0;
      background-image: url(/icons/apply.png);
      background-size: 20px 20px;
      cursor: pointer;
      top: calc(40%)
  }
  
  .profilepage div#aboutuserheader, .profilepage div#userachievementsheader, .profilepage div#useractionsheader, .profilepage div#userclassesheader, .profilepage div#usercontactsheader, .profilepage div#usereducationheader, .profilepage div#userexperienceheader, .profilepage div#userinterestsheader, .profilepage div#usersubjectsheader, .profilepage div#usersubscribersheader, .profilepage #userfriendsheader {
      color: #86059c;
      font-size: 16px;
      padding-top: 10px;
      padding-bottom: 10px;
      margin-bottom: 12px;
      text-align: left;
      box-sizing: border-box;
      border-bottom: 1.5px solid #86059c;
      line-height: 25px;
      font-weight: bold;
  }
  
  .profilepage div#userinterestsheader, .profilepage #userfriendsheader, .profilepage div#usersubscribersheader, .profilepage div#usersubjectsheader {
      /* margin-top: 10px; */
      text-align: left;
      line-height: 35px;
      padding: 10px;
      font-weight: bold;
      border-bottom: none;
      font-size: 18px;
      padding-left: 40px;
      padding-top: 0;
  }
  
  .profilepage div#userfriendsheader, .profilepage div#usersubscribersheader {
      padding-top: 0;
  } 
  
  .profilepage .edituserprofile {
      display: none
  }
  
  .profilepage .edituserprofile,.profilepage .userprofile {
      width: calc(6%);
      margin-right: 10px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: center;
      cursor: pointer;
      margin-bottom: 10px;
      position: relative
  }
  
  .profilepage .editusersubject {
      display: none
  }
  
  .profilepage .editusersubject,.profilepage .usersubject {
      width: calc(6%);
      margin-right: 10px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: center;
      cursor: pointer;
      margin-bottom: 10px;
      position: relative
  }
  
  .profilepage .userprofile,.profilepage .usersubject,.profilepage span.exptype>span {
      display: inline-block
  }
  
  .profilepage .edituserprofile:nth-child(5n+1),.profilepage .editusersubject:nth-child(5n+1),.profilepage .userprofile:nth-child(5n+2),.profilepage .usersubject:nth-child(5n+2) {
      margin-left: 20%
  }
  
  .profilepage .edituserprofile>img,.profilepage .editusersubject>img,.profilepage .userprofile>img,.profilepage .usersubject>img {
      width: 100%;
      box-sizing: border-box;
      border: 5px solid var(--color-main);
      border-radius: 100%
  }
  
  .profilepage .adduserprofile,.profilepage .addusersubject {
      opacity: .6
  }
  
  span.checkmark {
      position: absolute;
      width: 25px;
      height: 25px;
      border-radius: 100%;
      background-color: #86059c;
      top: 0;
      right: 0;
      background-image: url(/icons/applywhite.png);
      background-size: 25px 25px
  }
  
  .profilepage .adduserprofile>.checkmark,.profilepage .addusersubject>.checkmark {
      display: none
  }
  
  .profilepage .ymaps-2-1-77-id-0::before,.profilepage .ymaps-2-1-77-id-1::before {
      width: 22px;
      left: -29px!important
  }
  
  .profilepage .ymaps-2-1-77-geolink-processed:after {
      border-bottom: none!important
  }
  
  .profilepage .inputemailadress {
      box-sizing: border-box;
      width: 100%;
      border: 0;
      font-size: 16px;
      text-align: left;
      color: #454545
  }
  
  .profilepage #adduseremail,.profilepage #addusertelephone {
      display: inline-block;
      font-size: 14px;
      text-align: left;
      margin-left: 20%;
      cursor: pointer;
      width: calc(65%);
      box-sizing: border-box;
      border: 0;
      background-color: #fff;
      font-weight: 700;
      color: #696969;
      height: 20px
  }
  
  .profilepage #adduseremail>img,.profilepage #addusertelephone>img,.profilepage div#addusereducation>img,.profilepage div#adduserexperience>img {
      height: 14px;
      margin-top: 3px;
      margin-right: 10px
  }
  
  .profilepage #adduseremail>img,.profilepage #addusertelephone>span,.profilepage div#addusereducation>span,.profilepage div#adduserexperience>span {
      line-height: 20px;
      vertical-align: top
  }
  
  .profilepage #usersite>span:nth-child(2)>a {
      width: 50%;
      float: right;
      text-align: center;
      margin-right: 10px;
      display: inline-block
  }
  
  .profilepage img.socialmedia-icon {
      height: 16px;
      margin-right: 5px;
      vertical-align: top
  }
  
  .profilepage .userclass img {
      width: 100%;
      border-radius: 4px
  }
  
  .profilepage .userclass span {
      display: inline-block;
      width: 100%;
      text-align: center;
      margin-top: 4px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
  }
  
  .profilepage div#noachievements,.profilepage div#noeducation,.profilepage div#noexperience,.profilepage div#nointerests {
      color: #5e5e5e;
      font-size: 14px;
      margin-bottom: 10px;
      box-sizing: border-box;
      padding-left: 15px
  }
  
  .profilepage .educationblock,.profilepage .experienceblock {
      display: inline-block;
      width: 100%;
      box-sizing: border-box;
      padding: 7px 10px 15px;
      margin-right: 10px;
      vertical-align: top;
      position: relative;
      margin-bottom: 10px;
      border-bottom: 1px solid var(--color-gray-lightest);
  }
  
  .profilepage .educationblock:nth-child(3n+6),.profilepage .expcard>#choosesubjects>.choosesubject-checkbox:nth-child(2n),.profilepage .experienceblock:nth-child(3n+6) {
      margin-right: 0
  }
  
  .profilepage span.educatendyear,.profilepage span.expyears {
      display: inline-block;
      font-size: 16px;
      font-weight: 700;
      color: #1c1c1c;
      background-color: #f6f6f6;
      padding: 10px;
      border-radius: 5px;
      margin: 0 10px 10px 0
  }
  
  .profilepage .educatplace,.profilepage .expplace {
      display: inline-block;
      width: 100%;
      margin-bottom: 5px;
      font-size: 18px;
      font-weight: 500;
      color: black;
  }
  
  .profilepage .expplace>span {
      display: inline-block;
      width: 100%
  }
  
  .profilepage span.educatspeciality {
      display: inline-block;
      width: 100%;
      margin-bottom: 5px;
      font-size: 16px;
      color: #5e5e5e;
      font-weight: 400
  }
  
  .profilepage span.educattype,.profilepage span.exptype {
      display: inline-block;
      width: 100%;
      font-size: 14px;
      color: #6b606b
  }
  
  .profilepage div#addusereducation,.profilepage div#adduserexperience {
      display: none;
      font-size: 14px;
      text-align: left;
      margin-bottom: 10px;
      cursor: pointer;
      box-sizing: border-box;
      border: 0;
      background-color: #fff;
      font-weight: 700;
      color: #00afff;
      height: 20px;
      width: 100%;
      background: #e1f6ff;
      border-radius: 15px;
      padding: 13px;
      height: 46px;
  }
  
  .profilepage .educatcard, .profilepage .expcard {
      width: 100%;
      margin-bottom: 15px;
      border-radius: 4px;
      box-sizing: border-box;
      padding: 15px 0;
      padding-top: 31px;
      padding-top: 0;
      position: relative;
      cursor: pointer;
      /* border-top: 1px solid var(--color-gray-lightest); */
      border-bottom: 1px solid var(--color-gray-lightest);
  }
  
  .profilepage #choosesubjectslabel, .profilepage #choosezavuchtypeslabel, .profilepage .educatcard label, .profilepage .expcard label {
      display: inline-block;
      width: 100%;
      text-align: left;
      box-sizing: border-box;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      height: 20px;
      line-height: 20px;
      color: black;
      font-weight: bold;
      font-size: 13px;
      margin-top: 10px;
  }
  
  .profilepage #choosesubjectslabel,.profilepage #choosezavuchtypeslabel {
      line-height: normal;
      height: auto;
      vertical-align: top
  }
  
  .profilepage .educatcard input, .profilepage .educatcard select, .profilepage .expcard input, .profilepage .expcard select {
      vertical-align: top;
      height: 30px;
      display: inline-block;
      width: 100%;
      font-size: var(--font-main);
      border-radius: 4px;
      border: 1px solid #aaa;
      background-color: var(--color-background-input);
      padding: 5px;
      box-sizing: border-box;
      margin-bottom: 15px;
  }
  
  .profilepage .expcard>select[name=endyear],.profilepage .expcard>select[name=startyear] {
      width: calc(65%/2 - 10px);
      margin: 0
  }
  
  .profilepage .expcard>select[name=type] {
      margin-bottom: 10px
  }
  
  .profilepage .expcard>select[name=startyear] {
      margin-left: 10px
  }
  
  .profilepage span.hyphenbetwyer {
      display: inline-block;
      width: 10px;
      line-height: 30px;
      vertical-align: top;
      font-size: 16px;
      text-align: center
  }
  
  .profilepage button.usereducatdelete, .profilepage button.userexpdelete {
      width: 15px;
      height: 15px;
      position: absolute;
      right: 0;
      top: 12px;
      background-image: url(/icons/close.png);
      background-size: 15px 15px;
      border: 0;
      background-color: #fff;
      display: none;
      cursor: pointer;
  }
  
  .profilepage .choosesubject-checkbox {
      box-sizing: border-box;
      display: inline-block;
      width: calc(50% - 5px);
      margin-right: 10px
  }
  
  .profilepage .expcard>#choosesubjects>.choosesubject-checkbox>label, .profilepage .expcard>#choosezavuchtypes>.choosezavuch-checkbox>label {
      width: calc(100% - 28px);
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
  }
  
  .profilepage div#choosesubjects, .profilepage div#choosezavuchtypes {
      width: 100%;
      display: inline-block;
      font-size: var(--font-notice);
      margin-top: 10px;
  }
  
  .edituserinterests,.profilepage .editusersubjects,.profilepage .userclass,.profilepage .userinterests-card,.profilepage .usersubjects-card {
      display: inline-block;
      box-sizing: border-box;
      width: calc(100%/4 - 5px);
      overflow: hidden;
      margin-bottom: 10px;
      margin-left: 5px;
      white-space: nowrap;
      text-overflow: ellipsis;
      text-align: center;
      color: #213021;
      position: relative;
      cursor: pointer;
      font-size: calc(12px);
      float: left
  }
  
  .userinterests-card>span {
      display: inline-block;
      width: 100%;
      height: 30px;
      overflow: hidden;
      text-overflow: ellipsis;
  }
  .userinterests-card>span>span {
      vertical-align: middle;
  }
  .userinterests-card>span>span:first-child {
      font-weight: bold;
  }
  
  .profilepage span.countnewinterestbage {
      position: absolute;
      z-index: 100;
      right: 3px;
      top: 3px;
      border-radius: 100%;
      width: 20px;
      height: 20px;
      background-color: #86059c;
      color: #fff;
      line-height: 20px;
      font-size: 14px
  }
  
  .adduserinterests>.checkmark,.profilepage .addusersubjects>.checkmark,.profilepage div#editinterests,.profilepage div#editsubjects {
      display: none
  }
  
  div#editinterests {
      overflow-y: auto;
      height: calc(100% - 131px);
  }
  
  div#editsubjects {
      overflow-y: auto;
      height: calc(100% - 131px);
  }
  input#searcheditinterest,.profilepage input#searcheditsubject {
      display: none;
      align-content: normal;
      border-radius: 4px;
      border: 2px solid #f6f6f6;
      width: 100%;
      margin-bottom: 12px;
      box-sizing: border-box;
      padding: 5px 10px;
      font-size: calc(12px)
  }
  #addchallengemodal input#searcheditinterest {
      display: inline-block;
      width: calc(100% - 30px);
      float: left;
  }
  .adduserinterests,.profilepage .addusersubjects {
      opacity: .6
  }
  
  .profilepage div#achievementsitems,.profilepage div#collectionitems,.profilepage div#petsitems {
      display: inline-block
  }
  
  .profilepage .achieveelem, .profilepage .collectelem, .profilepage .petselem {
      width: calc(100%/2 - 45px/2);
      margin-left: 15px;
      display: inline-block;
      float: left;
      text-align: center;
      margin-bottom: 15px;
      cursor: pointer;
      height: auto;
      line-height: normal;
  }
  
  .profilepage .achieveelem>svg,.profilepage .collectelem>svg,.profilepage .petselem>svg {
      stroke: #000;
      aspect-ratio: 3/2;
      width: 100%;
      display: inline-block;
  }
  
  .profilepage .achieveelem>img, .profilepage .collectelem>img, .profilepage .petselem>img {
      margin-bottom: 10px;
      border-radius: 4px;
      aspect-ratio: 3/2;
      object-fit: cover;
      object-position: center;
      width: 100%;
  }
  
  .profilepage .achieveelem>img,.profilepage .achieveelem>svg,.profilepage .collectelem>img,.profilepage .collectelem>svg,.profilepage .petselem>svg {
      
  }
  
  .profilepage .achieveelem>span,.profilepage .collectelem>span,.profilepage .petselem>span {
      display: inline-block;
      width: 100%;
      font-size: 16px;
      line-height: normal;
      color: #000
  }
  
  .profilepage .achievementphotoedit,.profilepage .exhibitphotoedit,.profilepage .petphotoedit {
      display: inline-block;
      width: 50%;
      position: relative;
      height: auto;
      flex-direction: column;
      flex-grow: 2
  }
  
  .profilepage img#updateexhibitphoto,.profilepage img#updatepetphoto {
      margin: auto;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      cursor: pointer
  }
  
  .profilepage .addingachievement,.profilepage .addingexhibit,.profilepage .addingpet {
      display: none;
      flex-direction: row;
      flex-wrap: wrap;
      padding-top: 25px;
      height: calc(49%);
      box-sizing: border-box
  }
  
  .profilepage .achievementinfoedit,.profilepage .exhibitinfoedit,.profilepage .fullachievementcardinfoedit,.profilepage .fullexhibitcardinfoedit,.profilepage .fullpetcardinfoedit,.profilepage .petinfoedit {
      display: inline-block;
      width: 50%;
      margin-bottom: 20px
  }
  
  .profilepage .achievementinfoedit textarea,
  .profilepage .achievementinfoedit input,
  .profilepage .achievementinfoedit select,
  .profilepage .exhibitinfoedit textarea,
  .profilepage .exhibitinfoedit input,
  .profilepage .fullachievementcardinfoedit textarea,
  .profilepage .fullachievementcardinfoedit input,
  .profilepage .fullachievementcardinfoedit select,
  .profilepage .fullexhibitcardinfoedit textarea,
  .profilepage .fullexhibitcardinfoedit input,
  .profilepage .fullpetcardinfoedit textarea,
  .profilepage .fullpetcardinfoedit input,
  .profilepage .petinfoedit textarea,
  .profilepage .petinfoedit input {
      width: calc(75%);
      padding: 10px;
      box-sizing: border-box;
      font-size: 14px;
      background-color: #f6f6f6;
      border: 0;
      border-radius: 4px;
      margin: auto auto 15px;
      text-align: left;
      resize: none;
  }
  
  .profilepage .achieveaddingbuttons,.profilepage .achievesavingbuttons,.profilepage .collectaddingbuttons,.profilepage .collectsavingbuttons,.profilepage .petsaddingbuttons,.profilepage .petsavingbuttons {
      padding: 20px;
      height: 75px;
      box-sizing: border-box
  }
  
  .profilepage .achieveaddingbuttons button, .profilepage .achievesavingbuttons button, .profilepage .collectaddingbuttons button, .profilepage .collectsavingbuttons button, .profilepage .petsaddingbuttons button, .profilepage .petsavingbuttons button {
      cursor: pointer;
      height: 35px;
      width: calc(50% - 10px);
      background-color: var(--color-main-light-100);
      border: none;
      border-radius: 4px;
      font-weight: bold;
      color: var(--color-main);
  }
  
  .profilepage button#saveachievement,.profilepage button#saveeditachievement,.profilepage button#saveeditexhibit,.profilepage button#saveeditpet,.profilepage button#saveeditphotoachievement,.profilepage button#saveeditphotoexhibit,.profilepage button#saveeditphotopet,.profilepage button#saveexhibit,.profilepage button#savepet {
      margin-left: 20px
  }
  
  .profilepage .fullachievementcard,.profilepage .fullexhibitcard,.profilepage .fullpetcard {
      display: none;
      flex-direction: row;
      flex-wrap: wrap;
      padding-top: 5px;
      height: calc(49%);
      box-sizing: border-box;
      position: relative
  }
  
  .profilepage .fullachievementcardimg,.profilepage .fullexhibitcardimg,.profilepage .fullpetcardimg {
      display: inline-block;
      width: 50%;
      position: relative;
      height: auto;
      flex-direction: column;
      flex-grow: 2
  }
  
  .profilepage .fullachievementcardinfo,.profilepage .fullexhibitcardinfo,.profilepage .fullpetcardinfo {
      display: inline-block;
      width: 50%;
      margin-bottom: 20px
  }
  
  .profilepage .fullachievementcardimgtempdiv,.profilepage .fullexhibitcardimgtempdiv,.profilepage .fullpetcardimgtempdiv {
      height: 100%;
      width: 100%;
      padding-top: 10px;
      display: inline-block;
      position: relative;
      padding-left: 20px;
      box-sizing: border-box;
      text-align: center
  }
  
  .profilepage .fullachievementcardimgtempdiv>img,.profilepage .fullexhibitcardimgtempdiv>img,.profilepage .fullpetcardimgtempdiv>img {
      width: 100%;
      border-radius: 4px;
      display: inline-block;
  }
  
  .profilepage .fullachievementcardinfo>span:nth-child(1),.profilepage .fullexhibitcardinfo>span:nth-child(1),.profilepage .fullpetcardinfo>span:nth-child(1) {
      display: inline-block;
      width: 100%;
      padding-left: 15px;
      padding-top: 10px;
      box-sizing: border-box;
      font-size: 20px;
      text-align: left;
      font-weight: 700;
      margin-bottom: 10px;
      color: #000
  }
  
  .profilepage .fullachievementcardinfo>span,.profilepage .fullpetcardinfo>span {
      display: inline-block;
      width: 100%;
      padding-left: 15px;
      box-sizing: border-box;
      font-size: 16px;
      text-align: left;
      margin-bottom: 7px;
      color: #5e5e5e
  }
  
  .profilepage .fullachievementcardinfo>span:empty {
      margin-bottom: 0
  }
  
  .profilepage .returntoallachievements,.profilepage .returntoallexhibits,.profilepage .returntoallpets {
      padding-bottom: 25px;
      box-sizing: border-box;
      line-height: 20px;
      text-align: left;
      padding-left: 20px;
      font-size: 14px;
      cursor: pointer
  }
  
  .profilepage .arrow-left {
      width: 11.14px;
      height: 11.14px;
      border-top: 3px solid #86059c;
      border-right: 3px solid #86059c;
      transform: rotate(-135deg);
      display: inline-block;
      margin-right: 10px
  }
  
  .profilepage .confirmlabeldelete {
      padding: 15px;
      margin-bottom: 20px;
      margin-left: 20px;
      margin-right: 30px;
      width: calc(60%);
      box-sizing: border-box;
      border-radius: 4px;
      text-align: left;
      background-color: #f2f2f2
  }
  
  .profilepage .confirmlabeldelete>span:first-child {
      display: inline-block;
      width: 100%;
      margin-bottom: 12px;
      font-weight: 700;
      font-size: 14px
  }
  
  .profilepage .confirmlabeldelete>span {
      line-height: inherit;
      margin-bottom: 15px;
      display: block;
      font-size: 14px
  }
  
  .profilepage .confirmlabeldelete>button {
      width: calc(45%);
      box-sizing: border-box;
      border-radius: 4px;
      border: 0;
      padding: 7px 0;
      font-size: 14px;
      background-color: var(--color-main);
      color: #fff;
      font-weight: 700;
      cursor: pointer
  }
  
  .profilepage .confirmlabeldelete>button:nth-child(3) {
      margin-right: 10px
  }
  
  .profilepage #news-content,.profilepage aside#usermenu {
      box-sizing: border-box;
      margin-top: 20px;
      display: inline-block
  }
  
  .profilepage aside#usermenu {
      width: 215px;
      position: sticky;
      top: 20px;
      float: right;
      margin-right: 20px
  }
  
  .profilepage #usermenu>ul {
      display: none;
      margin: 0;
      list-style: none;
      font-size: 18px;
      font-family: 'Montserrat';
      text-align: center;
      padding: 0 0 0 20px
  }
  
  .profilepage #usermenu>ul li {
      width: 100%;
      display: inline-block;
      margin-bottom: 20px;
      text-align: left;
      cursor: pointer;
      color: #86059c
  }
  
  .profilepage #news-content {
      width: 100%
  }
  
  .profilepage #addingnew {
      width: 100%;
      margin: auto;
      font-size: 0
  }
  
  .profilepage #newheader {
      display: none;
      width: 100%;
      padding: 10px;
      box-sizing: border-box;
      margin: auto;
      border: 1px solid #f6f6f6;
      border-bottom: 0;
      font-size: 16px;
      text-align: left;
      background-color: #fff;
      font-family: 'Montserrat';
      min-height: calc(41px)
  }
  
  .profilepage #newheader[placeholder]:empty:before {
      content: attr(placeholder);
      color: #999
  }
  
  .profilepage #new {
      width: 100%;
      margin: auto;
      box-sizing: border-box;
      padding: 10px;
      border-bottom: 1px solid var(--color-gray-lightest);
      border-top: 0;
      font-size: 16px;
      background-color: #fff;
      text-align: left;
      font-family: 'Montserrat';
      display: block;
      height: auto;
      min-height: 5em;
      max-height: 12em;
      overflow: auto;
      line-height: 1.42857143;
      color: #555;
      cursor: text;
      resize: none;
  }
  
  .profilepage #row {
      display: none
  }
  
  .profilepage #outputMulti {
      display: inline-block;
      height: auto;
      padding: 15px 15px 0;
      box-sizing: border-box;
      background-color: #fff
  }
  
  .profilepage div#outputMulti:empty {
      padding: 0
  }
  
  .profilepage #outputMulti>div,.profilepage .editoutputMulti>div {
      /* width: auto; */
      /* height: auto; */
      display: inline-block;
      /* float: left; */
      cursor: pointer;
      /* margin-right: 10px; */
      position: relative;
      /* margin-bottom: 15px; */
      /* max-height: 100px; */
  }
  
  .profilepage #outputMulti>div:after {
      display: table;
      clear: both;
      content: ""
  }
  
  .profilepage .aud-thumbnail,.profilepage .img-thumbnail,.profilepage .video-thumbnail {
      /* height: 100px; */
      /* display: inline-block; */
      /* float: left; */
      /* opacity: .9; */
      /* z-index: 1; */
      /* border-radius: 4px; */
  }
  
  .profilepage .doc-thumbnail {
      /* float: left; */
      /* opacity: .9; */
      /* z-index: 1; */
      /* border-radius: 4px; */
  }
  
  .profilepage audio.aud-thumbnail {
      height: revert;
      width: 100%;
      margin-top: 0!important
  }
  
  .profilepage .doc-thumbnail,.profilepage .newsdoc {
      /* height: 50px; */
      /* width: 100%; */
      /* display: inline-block; */
  }
  
  .profilepage .doc-thumbnail>img,.profilepage .newsdoc>img {
      height: 50px;
      display: inline-block;
      margin-right: 20px;
      float: left
  }
  
  .profilepage span.docname {
      display: inline-block;
      width: calc(100% - 75px);
      margin: 0;
      float: left;
      height: 50px;
      box-sizing: border-box;
      text-align: left
  }
  
  .profilepage .docname>span:nth-child(1) {
      line-height: 30px;
      font-size: 16px;
      color: #000;
      font-weight: 700;
      display: block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
  }
  
  .profilepage .docname>span:nth-child(2) {
      line-height: 20px;
      font-size: 14px;
      color: #5e5e5e;
      display: block
  }
  
  .profilepage .deleteaudio,.profilepage .deletedoc,.profilepage .deleteimages,.profilepage .deletevideo {
      right: 0;
      position: absolute;
      height: 20px;
      width: 20px;
      z-index: 2
  }
  
  .profilepage .deletedoc {
      /* left: 40px; */
      /* top: -5px; */
  }
  
  .profilepage #attachaudio,.profilepage #attachdocuments,.profilepage #attachheader,.profilepage #attachphoto,.profilepage #attachvideo {
      height: 30px;
      width: 30px;
      border: 0;
      float: left;
      padding: 0;
      margin-right: 10px;
      cursor: pointer
  }
  
  .profilepage #attachaudio>img,.profilepage #attachdocuments>img,.profilepage #attachheader>img,.profilepage #attachphoto>img,.profilepage #attachvideo>img {
      height: 30px;
      width: 30px
  }
  
  .profilepage #attaching {
      box-sizing: border-box;
      padding: 10px;
      background-color: #fff;
      border: 1px solid #f6f6f6;
      border-top: none
  }
  
  .profilepage #attaching:after {
      content: " ";
      display: table;
      clear: both
  }
  
  .profilepage div#newsthemesedit {
      display: none;
      position: fixed;
      bottom: 0;
      top: 0;
      left: 0;
      right: 0;
      background-color: white;
      z-index: 100000;
      padding: 25px;
      box-sizing: border-box;
      overflow-y: auto;
      text-align: left;
  }
  
  .profilepage #modalthemes {
      margin: 82px 0 52px 0;
  }
  
  .profilepage div#modalthemesacceptparent {
      bottom: 0;
      width: 100%;
      height: 79px;
      padding: 17px;
      z-index: 1000000;
      position: fixed;
      left: 0;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      background-color: #fff;
  }
  
  .profilepage div#toacceptthemesparameters {
      border-radius: 4px;
      color: black;
      font-size: calc(var(--font-subtitle) - 1px);
      background-color: var( --color-background-input);
      border: 1px solid #f0f0f0;
      box-sizing: border-box;
      box-shadow: 0 1px 3px rgb(0 0 0 / 15%);
      width: 100%;
      display: block;
      text-align: center;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      height: 45px;
      line-height: 45px;
      padding: 0;
      margin: 0;
  }
  
  .profilepage span.newsthemeeditinterest, .profilepage span.newsthemeeditlist, .profilepage span.newsthemeeditsubject {
      color: white;
      display: inline-block;
      font-size: var(--font-notice);
      padding: 7px;
      margin-right: 10px;
      margin-bottom: 10px;
      font-weight: bold;
      border-radius: 4px;
      opacity: .6;
  }
  
  .profilepage span.newsthemeeditinterest-selected, .profilepage span.newsthemeeditlist-selected, .profilepage span.newsthemeeditsubject-selected {
      opacity: 1;
  }
  
  .profilepage span.newsthemeeditinterest {
      background-color: #754ee3;
  }
  
  .profilepage span.newsthemeeditlist {
      background-color: #b3289f;
  }
  
  .profilepage span.newsthemeeditsubject  {
      background-color: #4673F0;
  }
  
  .profilepage div#modalthemesheaderparent {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 107px;
      padding: 17px;
      box-sizing: border-box;
      z-index: 1000000;
      background-color: white;
  }
  
  input#searchnewthemeinput {
      border-radius: 4px;
      border: 2px solid var(--color-background-input);
      width: 100%;
      margin-bottom: 11px;
      box-sizing: border-box;
      padding: 5px 10px;
      font-size: calc(var(--font-notice) - 2px);
  }
  
  .profilepage span#tochoosenewsthemes, .profilepage span.tochoosenewsthemes {
      display: inline-block;
      width: 100%;
      font-size: var(--font-main);
      color: var(--color-addit);
      margin-top: 25px;
      text-align: left;
      font-weight: bold;
  }
  
  .profilepage span.tochoosenewsthemes {
      padding-left: 10px;
  }
  
  .profilepage div#newsthemesshow:not(:empty), .profilepage div.newsthemesshow:not(:empty) {
      display: inline-block;
      margin-top: 10px;
      text-align: left;
  }
  
  .profilepage .newsthemesshow-item-list, .profilepage .newsthemesshow-item-interest, .profilepage .newsthemesshow-item-subject {
      display: inline-block;
      width: auto;
      font-size: var(--font-notice);
      line-height: var(--font-subtitle);
      height: var(--font-subtitle);
      color: white;
      padding: 7px;
      margin-right: 10px;
      margin-bottom: 10px;
      font-weight: bold;
      border-radius: 4px;
  }
  
  .profilepage .newsthemesshow-item-list {
      background-color: #b3289f;
  }
  
  .profilepage .newsthemesshow-item-interest {
      background-color: #754ee3;
  }
  
  .profilepage .newsthemesshow-item-subject {
      background-color: #4673F0;
  }
  
  .profilepage .newsthemesshow-item-interest>span, .profilepage .newsthemesshow-item-list>span, .profilepage .newsthemesshow-item-subject>span, .profilepage .newsthemesview-item-list>span, .profilepage .newsthemesview-item-list>span, .profilepage .newsthemesview-item-subject>span {
      line-height: var(--font-subtitle);
      display: inline-block;
      vertical-align: top;
  }
  
  .profilepage .newsthemesshow-item-delete, .profilepage .newsthemesview-item-delete {
      display: inline-block;
      width: auto;
      height: var(--font-subtitle);
      margin-left: 10px;
      padding-top: 2px;
      box-sizing: border-box;
  }
  
  .profilepage .newsthemesshow-item-delete>img, .profilepage .newsthemesview-item-delete>img {
      width: var(--font-notice);
  }
  
  .profilepage .tippy-box {
      margin: auto;
  }
  
  .profilepage .tippy-content {
      width: auto;
  }
  
  .profilepage .tippy-content .newsthemesshow-item-list {
      margin-top: 10px;
  }
  
  .noty_layout {
      filter: none !important;
      z-index: 999999990 !important;
  }
  
  div#modalerror {
      background-color: #c41f33;
      font-family: var(--font-family);
  }
  
  .noty_body {
      box-sizing: border-box !important;
      border-radius: 4px;
  }
  
  .noty_buttons {
      box-sizing: border-box;
  }
  
  button#notdeleteusernew, 
  button#deleteusernew, 
  button#usereducationeditclosecancel, 
  button#usereducationeditcloseleave, 
  button#deleteuseravatar, 
  button#notdeleteuseravatar, 
  button#notdeleteusercover, 
  button#deleteusercover, 
  button#notdeleteschoolcover, 
  button#deleteschoolcover, 
  button#notexiteditsubjects, 
  button#exiteditsubjects, 
  button#notdeletemessages, button#deletemessages, button#deleteachievementdecline, button#deleteachievementaccept, button#userinterestseditclosecancel, button#userinterestseditcloseleave, button#schoolorderdecline, 
  button#schoolorderconfirm,
  button#notdeletephoto, button#deletephoto{
      display: inline-block;
      width: calc(50% - 7px);
      /* margin-top: 15px; */
      font-size: var(--font-main);
      color: white;
      font-weight: bold;
      background: inherit;
      border: none;
      cursor: pointer;
  }
  
  .btn-check {
      width: 100%;
      margin-bottom: 15px;
      background-color: transparent;
      border: none;
      color: white;
      text-align: left;
  }
  
  .modalerrortitle {
      margin-bottom: 10px;
      font-weight: bold;
      font-size: var(--font-main);
  }
  
  .profilepage span#addnew {
      float: right;
      font-size: 16px;
      font-weight: 700;
      color: #fff;
      border: 0;
      color: var(--color-main);
      background-color: var(--color-main-light-100);
      cursor: pointer;
      width: 100%;
      margin-top: 15px;
  }
  
  #blogitems .new {
      display: inline-block !important;
      box-shadow: none;
  }
  
  .profilepage .newheader {
      margin-bottom: 5px;
      text-align: center;
      font-size: 20px;
      color: #86059c;
      font-family: var(--font-family);
      font-weight: 700;
  }
  
  .profilepage .newtext>a {
      color: #00f!important
  }
  
  .profilepage .new iframe {
      width: 100%;
      margin: auto;
      display: block;
      height: calc(100%/16*9);
      border-radius: 4px
  }
  
  .profilepage .newheader:empty,.profilepage .newtext:empty {
      margin: 0;
      padding: 0;
  }
  
  .profilepage .allnewsphoto {
      display: none
  }
  
  .profilepage .newsoptions {
      position: relative;
      display: inline-block;
      float: right;
      width: 0
  }
  
  .profilepage span.opennewsoptions {
      display: inline-block;
      background: url(/icons/options.png);
      background-size: 25px;
      height: 25px;
      width: 25px;
      position: absolute;
      top: 0;
      right: 0;
      cursor: pointer
  }
  
  .profilepage .newsoptions-content {
      /* display: none; */
      /* position: fixed; */
      /* bottom: 9px; */
      /* z-index: 100000; */
      /* width: calc(var(--display-width) - 18px); */
      /* left: 9px; */
      /* top: auto; */
      /* right: 9px; */
      /* border-radius: 15px; */
      /* padding: 10px; */
      /* background-color: #fff; */
      /* color: black; */
      /* border: 1px solid var(--color-gray-lightest); */
      /* box-sizing: border-box; */
  }
  
  .profilepage .newsoptions-content>ul>li {
      list-style: none;
      font-size: 14px;
      cursor: pointer;
      white-space: nowrap;
      margin-bottom: 3px;
      padding: 7px;
      border-radius: 4px
  }
  
  .profilepage li#closenewsoption {
      text-align: center;
      background-color: var(--color-background-input);
      margin-top: 7px;
      border-radius: 4px;
      color: var(--color-addit);
  }
  
  .profilepage .allnewsphoto {
      display: none
  }
  
  .toleft {
      left: 5px;
      background-color: rgba(255,255,255,.6);
      color: #86059c
  }
  
  .profilepage .toright {
      right: 5px;
      background-color: rgba(255,255,255,.6);
      color: #86059c
  }
  
  .profilepage .toleft>span,.profilepage .toright>span {
      display: inline-block;
      margin: 0 5px;
      color: #fff;
      font-size: 16px
  }
  
  .profilepage .toleft:before,.profilepage .toright:before {
      content: "";
      display: inline-block;
      min-height: inherit;
      height: 100%;
      vertical-align: middle
  }
  
  .profilepage .newscontaining {
      display: inline-block;
      width: 100%;
      vertical-align: top;
      position: relative
  }
  
  .profilepage .newscontaining>img,.profilepage .newscontaining>video {
      display: inline-block;
      width: 100%;
      margin: auto
  }
  
  .profilepage #modalnewsphotos .newsmodalcontaining {
      width: 100%;
      height: 100%;
  }
  
  .profilepage span.countmodalnewsimages {
      display: inline-block;
      width: auto;
      float: left;
      margin-top: 15px;
      margin-left: 20px;
      line-height: 20px;
      font-weight: bold;
  }
  
  .profilepage .newsmodalheadercontaining img.closemodalnewsphotos {
      width: 20px;
      height: 20px;
      position: absolute;
      top: 15px;
      right: 15px;
  }
  .profilepage .newsmodalimgcontaining>div {
      position: relative;
      width: 100%;
      height: 100%;
  }
  
  .profilepage .usernewsphotoinfo-container-1 {
      display: inline-block;
      width: 100%;
      height: auto
  }
  
  .profilepage .photonewscomments {
      flex-grow: 3;
      padding: 20px;
      box-sizing: border-box;
      overflow-y: auto
  }
  
  .profilepage .usernewsphotoinfo-container-2 {
      display: inline-block;
      width: 100%;
      height: auto
  }
  
  div#newscommentsparent {
      display: none;
      background: rgba(0, 0, 0, .4);
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 100000000;
  }
  
  .profilepage div#newscomments {
      display: block;
  }
  
  .profilepage svg#closecomments {
      width: 25px;
      height: 25px;
      top: 10px;
      position: absolute;
      right: 10px;
      fill: #6b606b;
  }
  
  .profilepage #countcomments {
      color: var(--color-gray-dark);
      font-weight: normal;
      display: inline-block;
      margin-left: 7px;
  }
  
  .profilepage .writecommentblock {
      display: inline-block;
      width: 100%;
      height: 80px;
      box-sizing: border-box;
      padding-bottom: 15px;
      padding-top: 10px;
      border-top: 1px solid var(--color-gray-lightest);
  }
  .profilepage img.tosendcomment {
      height: 25px;
      width: 25px;
      margin-top: 15px;
      margin-bottom: 15px;
      margin-left: 10px;
  }
  
  .profilepage .newsthemesview {
      margin-top: 15px;
  }
  
  .newtext + .newsthemesview {
      margin-top: 0;
  }
  
  .profilepage .newsthemesview-item-list, .profilepage .newsthemesview-item-interest, .profilepage .newsthemesview-item-subject {
      display: inline-block;
      font-size: var(--font-notice);
      width: auto;
      line-height: 18px;
      height: 18px;
      color: #fff;
      padding: 7px;
      margin-right: 10px;
      margin-bottom: 10px;
      font-weight: 700;
      border-radius: 4px;
  }
  
  .profilepage .newsthemesview-item-list {
      background-color: #b3289f;
  }
  
  .profilepage .newsthemesview-item-interest {
      background-color: #754ee3;
  }
  
  .profilepage .newsthemesview-item-subject {
      background-color: #4673F0;
  }
  
  .profilepage .like-passive, .profilepage .commentsheader {
      display: inline-block;
      background-size: 30px 30px;
      height: 30px;
      width: 30px;
      margin-right: 5px;
  }
  .profilepage .like-passive {
      background-image: url(/icons/passive-like.png);
      -webkit-transition: background 1s ease;
      -o-transition: background 1s ease;
      transition: background 1s ease;
      cursor: pointer;
  }
  
  .profilepage .like-active {
      width: 30px;
      height: 30px;
      background-image: url(/icons/active-like.png);
      background-size: 30px 30px;
      -webkit-transition: background 1s ease;
      -o-transition: background 1s ease;
      transition: background 1s ease;
      cursor: pointer;
      display: inline-block;
      margin-right: 5px;
  }
  
  .profilepage span.countcomments, .profilepage span.counthearts {
      color: #696969;
      font-size: 16px;
      line-height: 30px;
      display: inline-block;
      height: 30px;
      font-weight: 700;
      margin-right: 20px;
      vertical-align: top;
  }
  
  .profilepage .commentsheader {
      background-image: url(/icons/comments.png);
  }
  
  .profilepage .editrow {
      display: none
  }
  
  .profilepage .editoutputMulti {
      display: inline-block;
      height: auto
  }
  
  .profilepage .newtext[contenteditable] {
      min-height: 100px
  }
  
  .profilepage .editattaching, .profilepage .editoutputMulti {
      box-sizing: border-box;
      padding: 10px 10px 0;
  }
  
  .profilepage .editattachaudio>img,.profilepage .editattachdocuments>img,.profilepage .editattachphoto>img,.profilepage .editattachvideo>img {
      height: 30px;
      width: 30px
  }
  
  .profilepage .editattachaudio,.profilepage .editattachdocuments,.profilepage .editattachphoto,.profilepage .editattachvideo {
      height: 30px;
      width: 30px;
      border: 0;
      float: left;
      padding: 0;
      margin-right: 10px;
      cursor: pointer
  }
  
  .profilepage .new audio {
      width: 100%;
      margin-bottom: 15px;
  }
  
  .avatarsmodalheadercontaining {
      height: 50px;
      margin-bottom: 7px;
      position: relative;
  }
  
  span.countmodalavatarsimages {
      display: inline-block;
      width: auto;
      float: left;
      margin-top: 15px;
      margin-left: 60px;
      line-height: 25px;
      font-weight: bold;
  }
  
  img.deletemodalavatarsphotos {
      width: 25px;
      height: 25px;
      position: absolute;
      top: 15px;
      right: 15px;
  }
  
  .profilepage svg.closemodalavatarsphotos {
      width: 28px;
      height: 28px;
      top: 11px;
      right: 11px;
  }
  
  img.deletemodalavatarsphotos {
      right: 15px;
  }
  
  .toleft, .toright {
      position: absolute;
      width: 30px;
      height: 30px;
      line-height: 30px;
      padding: 0 5px;
      font-size: 20px;
      font-weight: 700;
      display: inline-block;
      z-index: 5;
      text-align: center;
      background-color: rgba(255,255,255,.4);
      cursor: pointer;
      -webkit-transition: background-color 1s ease;
      -o-transition: background-color 1s ease;
      transition: background-color 1s ease;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      top: 50%;
      transform: translate(0, -50%);
      border-radius: 100%;
  }
  
  .profilepage .avatarsmodalimgcontaining>div {
      position: relative;
      width: 100%;
      height: 100%;
  }
  
  .profilepage .avatarsmodalimgcontaining img {
      max-width: 100%;
      max-height: 100%;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      /* margin: auto; */
      /* border-radius: 15px; */
  }
  
  .profilepage .avatarsmodalimgcontaining {
      width: 100%;
      position: relative;
      height: calc(var(--display-height) - 124px);
  }
  
  .profilepage .avatarsmodalcontaining .photoinfo {
      position: static;
      width: 100%;
      height: 40px;
      min-height: revert;
      margin-top: 15px;
      display: inline-block;
      text-align: left;
      padding-left: 20px;
      padding-bottom: 15px;
      overflow: hidden;
  }
  
  
  
  
  
  
  div#searchdialogsblock {
      display: inline-block;
      width: 100%;
      background-color: white;
      border-bottom: 2px solid var(--color-background-input);
      padding: 10px;
      box-sizing: border-box;
      margin-bottom: 7px;
  }
  
  .dialogspage input[name='searchdialogs'] {
      width: calc(100% - 45px);
      box-sizing: border-box;
      border: none;
      background-color: var(--color-background-input);
      padding: 7px;
      border-radius: 4px;
      float: left;
      height: 30px;
  }
  
  .dialogspage button#createchat {
      display: inline-block;
      float: right;
      width: 30px;
      height: 30px;
      background-color: white;
      border: none;
      padding: 0;
      margin-left: 10px;
  }
  
  .dialogspage button#createchat>img {
      width: 26px;
      height: 26px;
      margin-top: 2px;
  }
  
  .dialogspage input[type=file] {
    display: none;
  }
  .dialogspage div#confirmmodalwindow {
    border-radius: 4px;
    overflow: hidden;
    position: absolute;
    background-color: white;
    padding: 0px;
    display: inline-block;
    z-index: 4;
    width: auto;
    max-width: calc((var(--display-width)) - 40px);
    max-height: calc((var(--display-height)) - 40px);
    box-sizing: border-box;
    text-align: right;
  }
  .dialogspage #confirmmodalwindow > div {
    margin-bottom: 10px;
    font-size: var(--font-subtitle);
    color: var(--color-menu);
  }
  .dialogspage #confirmmodalwindow > button {
    background-color: white;
    border: none;
    font-size: var(--font-main);
    display: inline-block;
    text-align: right;
    color: var(--color-addit);
    cursor: pointer;
  }
  .dialogspage div#dialogblock {
    height: var(--display-height);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 100000;
    background: white;
    /* background: -webkit-linear-gradient(244deg,#e70af2,#009bff,#4abde3); */ /* Chrome 10-25, Safari 5.1-6 */
    /* background: linear-gradient(244deg,#e70af2,#009bff,#4abde3); */ /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  }
  .dialogspage div#dialogoptionsmenu {
      display: none;
      width: 100%;
      background: white;
      box-sizing: border-box;
      border-bottom: 2px solid var(--color-background-input);
      top: 0;
      height: 72px;
      z-index: 2000000;
      position: fixed;
  }
  .dialogspage div#dialogoptionsmenu > div {
      display: inline-block;
      vertical-align: middle;
      padding-left: 17px;
      padding-right: 5px;
      box-sizing: border-box;
      height: 30px;
      margin-top: 20px;
  }
  .dialogspage div#dialogoptionsmenu > div > button {
      background-color: initial;
      float: right;
      margin-right: 12px;
      border: none;
      width: 30px;
      height: 30px;
      padding: 0;
      margin-top: 0;
      color: #8A2BE2;
      font-size: 25px;
      line-height: 30px;
  }
  .dialogspage div#dialogoptionsmenu > div > button > img {
      width: 30px;
      height: 30px;
  }
  .dialogspage button#toreturntomessages {
      float: left !important;
  }
  .dialogspage span#countchosenmessageslabel {
      display: inline-block;
      text-align: left;
      color: black;
      font-size: 22px;
      height: 30px;
      width: 30px;
      line-height: 30px;
      font-weight: bold;
      float: left;
      margin-left: 7px;
  }
  .dialogspage div#dialogheader {
      height: 72px;
      padding: 10px 17px;
      box-sizing: border-box;
      /* border-bottom: 2px solid var(--color-background-main); */
      position: fixed;
      top: 0;
      z-index: 1000000;
      background-color: rgba(255, 255, 255, .95);
  }
  .dialogspage .dialogoptions {
      display: inline-block;
      float: right;
      width: 0;
      position: relative;
  }
  .dialogspage span.opendialogoptions {
      display: inline-block;
      background: url(/icons/options.png);
      background-size: 25px;
      height: 25px;
      width: 25px;
      position: absolute;
      top: 10px;
      right: 17px;
      cursor: pointer;
      z-index: 1001; /* Выше кнопки микрофона */
  }
  .dialogspage .voice-control-btn {
      margin-right: 50px; /* Увеличиваем отступ, чтобы не перекрывать три точки */
      position: relative;
      z-index: 999; /* Ниже кнопки с тремя точками */
  }
  .dialogspage .dialogoptions-content-parent {
      display: none;
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 1000000;
      background-color: rgba(0, 0, 0, .4);
  }
  .dialogspage .dialogoptions-content {
      display: none;
      position: fixed;
      bottom: 9px;
      z-index: 100000;
      width: calc(var(--display-width) - 18px);
      box-sizing: border-box;
      left: 9px;
      top: auto;
      right: 9px;
      border-radius: 4px;
      padding: 10px;
      background-color: #fff;
      color: black;
  }
  .dialogspage .dialogoptions-content>ul {
      margin: 0;
      padding: 0;
  }
  .dialogspage .dialogoptions-content>ul>li {
      list-style: none;
      padding: 7px;
      font-size: 14px;
      height: 20px;
      text-align: left;
  }
  .dialogspage li#toclosedialogsoption {
      text-align: center;
      background-color: var(--color-background-input);
      margin-top: 7px;
      border-radius: 4px;
      color: var(--color-addit);
  }
  .dialogspage #dialogheader #moreaboutgroup {
    display: inline-block;
    background: url(/icons/options.png);
    background-size: 25px;
    height: 25px;
    width: 25px;
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
  }
  .dialogspage #dialogheader img {
      border-radius: 100%;
      width: 48px;
      height: 48px;
      float: left;
      /* margin-right: 10px; */
      aspect-ratio: 1/1;
  }
  .dialogspage img#toreturntodialogs {
      width: 25px;
      height: 25px;
      margin-top: 11.5px;
      /* background: white; */
  }
  .dialogspage #dialogheader>a {
      display: inline-block;
      width: 48px;
      height: 48px;
      float: left;
      margin-right: 10px;
      line-height: 48px;
      font-size: 25px;
      color: #8A2BE2;
  }
    .dialogspage #dialogheader>a>i {
        padding: 0;
        width: 48px;
        height: 48px;
    }
  .dialogspage div#dialogheadertext {
      width: calc(100% - 93px);
      display: inline-block;
  }
  .dialogspage div#dialogheadertext a {
    float: left;
    display: block;
    width: 100%;
  }
  .dialogspage span#dialogheaderusername, .dialogspage span#dialogheadergroupname {
      float: left;
      font-size: var(--font-main);
      font-weight: bold;
      color: black;
      display: inline-block;
      line-height: 30px;
      padding-left: 10px;
      white-space: nowrap;
      /* max-width: calc(100% - 40px); */
      overflow: hidden;
      text-overflow: ellipsis;
      width: 100%;
      text-align: left;
  }
  .dialogspage span#onlinestatustext, .dialogspage span#countmemberstext {
      display: block;
      width: calc(100% - 20px);
      text-align: left;
      float: left;
      padding-left: 10px;
      font-size: var(--font-notice);
      font-size: 12px;
      white-space: nowrap;
      /* overflow: hidden; */
      /* text-overflow: ellipsis; */
  }
  .dialogspage .onlinepoint {
    position: absolute;
    width: 11px;
    height: 11px;
    background-color: #26b226;
    border: 3px solid white;
    border-radius: 100%;
    z-index: 1000;
    left: 122px;
    top: 46px;
}


  .dialogspage #modalwindowcontent > nav {
    display: inline-block;
    width: 30%;
    float: left;
    height: 100%;
    padding-top: 35px;
    padding-left: 30px;
    box-sizing: border-box;
    /*background-color: (@color-background-modalnav);*/
    background-color: var(--color-addit);
    position: relative;
  }
  .dialogspage #modalwindowcontent > nav > ul {
    font-size: var(--font-subtitle);
    text-align: left;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .dialogspage #modalwindowcontent > nav > ul > li {
    color: var(--color-modalnav);
    cursor: pointer;
    padding-left: 12px;
    line-height: calc((var(--font-subtitle))*2);
    margin-bottom: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .dialogspage #modalwindowcontent > nav > ul > li.activemodalnav {
    color: var(--color-modalnav-active);
    border-left: 3px solid var(--color-modalnav-active);
    padding-left: 10px;
  }
  .dialogspage div.modalgroupblock {
      display: none;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      overflow-y: auto;
      background-color: var(--color-background-input);
      position: relative;
  }
  .dialogspage .maininfoheader,
  .dialogspage .attachmentsheader {
    text-align: center;
    font-size: calc((var(--font-title)) + 2px);
    margin-bottom: 10px;
    line-height: calc((var(--font-subtitle))*2);
    position: relative;
    color: var(--color-addit);
  }
  .dialogspage .groupinfoheader {
    text-align: left;
    padding-left: 20px;
    box-sizing: border-box;
    padding-bottom: 15px;
    padding-top: 35px;
    margin-bottom: 15px;
    background-color: white;
    box-shadow: 0 0 10px 3px rgb(221 221 221);
  }
  .dialogspage .groupinfoheader>img {
      border-radius: 100%;
      width: 60px;
      margin-top: 10px;
  }
  .dialogspage .textinfo {
    display: inline-block;
    width: calc(100% - 105px);
    margin-left: 15px;
    height: 100%;
    vertical-align: top;
    margin-top: 10px;
  }
  .dialogspage span.groupinfoname {
    font-size: var(--font-title);
    line-height: 38px;
    display: inline-block;
    vertical-align: top;
    margin-left: 10px;
    width: calc(100% - 15px);
    font-weight: 600;
    color: #111111;
  }
  .groupinfodescription {
    font-size: var(--font-main);
    display: block;
    vertical-align: top;
    width: calc(100% - 15px);
    color: var(--color-gray-dark);
    margin-bottom: 10px;
    text-align: left;
    line-height: 20px;
  }
  .groupinfodescription:empty {
      margin: 0;
  }
  .groupinfodescription[contenteditable]{
      margin-bottom: 10px !important;
  }
  .dialogspage .groupmembersheader, .subgroupsheader, .subgroupsrequestsheader {
    padding-left: 20px;
    display: block;
    text-align: left;
    font-size: var(--font-notice);
    color: var(--color-gray-dark);
    margin-bottom: 10px;
    box-sizing: border-box;
    font-weight: bold;
  }
  .dialogspage .groupmemberblock {
      padding-left: 20px;
      width: 100%;
      box-sizing: border-box;
      text-align: left;
      margin-bottom: 12px;
      height: 45px;
      position: relative;
      display: inline-block;
  }
  .dialogspage .groupmemberblock > a, .subgroupsrequest-item > a {
    display: inline-block;
    height: 45px;
    cursor: pointer;
  }
  .dialogspage .groupmemberblock img, .subgroupsrequest-item img {
      width: 45px;
      border-radius: 100%;
      float: left;
      aspect-ratio: 1/1;
  }
  .dialogspage .groupmemberblock span, .subgroupsrequest-item span {
      line-height: 45px;
      vertical-align: top;
      margin-left: 12px;
      font-size: 14px;
      color: black;
      /* float: left; */
  }
  .dialogspage span.deleteuserfromgroup {
      position: absolute;
      background-image: url(/icons/close.png);
      background-size: 20px 20px;
      width: 20px;
      height: 20px;
      right: 20px;
      top: calc(50% - 10px);
  }
  .dialogspage .confirmlabeldelete, .dialogspage .confirmlabelleave {
      padding: 15px;
      margin-top: 20px;
      margin-bottom: 20px;
      margin-left: 30px;
      margin-right: 30px;
      width: calc(100% - 60px);
      box-sizing: border-box;
      border-radius: 4px;
      text-align: left;
      background-color: #F2F2F2;
  }
  .dialogspage .confirmlabeldeletephoto {
      padding: 15px;
      margin-bottom: 20px;
      margin-right: 30px;
      width: calc(100% - 30px);
      box-sizing: border-box;
      border-radius: 4px;
      text-align: left;
      background-color: #F2F2F2;
  }
  .dialogspage .confirmlabelleave {
    margin-left: 30px;
    width: calc(100% - 60px);
  }
  .dialogspage .confirmlabeldelete > span,
  .dialogspage .confirmlabelleave > span,
  .dialogspage .confirmlabeldeletephoto > span {
    line-height: inherit;
    margin-bottom: 15px;
    display: block;
    font-size: var(--font-notice);
  }
  .dialogspage .confirmlabeldelete > span:first-child,
  .dialogspage .confirmlabelleave > span:first-child,
  .dialogspage .confirmlabeldeletephoto > span:first-child {
    display: inline-block;
    width: 100%;
    margin-bottom: 12px;
    font-weight: bold;
    font-size: var(--font-notice);
  }
  .dialogspage .confirmlabeldeletephoto > span:nth-child(2) {
      font-weight: normal;
  }
  .dialogspage .confirmlabeldelete > button:nth-child(3),
  .dialogspage .confirmlabelleave > button:nth-child(3),
  .dialogspage .confirmlabeldeletephoto > button:nth-child(3){
    margin-right: 10px;
  }
  .dialogspage .confirmlabeldelete > button,
  .dialogspage .confirmlabelleave > button,
  .dialogspage .confirmlabeldeletephoto > button{
    width: calc(50% - 5px);
    box-sizing: border-box;
    border-radius: 4px;
    border: none;
    padding: 7px 0;
    font-size: var(--font-notice);
    background-color: var(--color-main);
    color: white;
    font-weight: bold;
    cursor: pointer;
  }
  .dialogspage div#groupdialogmodalactions {
    display: inline-block;
    width: 100%;
    margin-bottom: 17px;
    text-align: left;
    padding-left: 20px;
    font-size: calc(var(--font-main) - 1px);
    font-weight: bold;
    box-sizing: border-box;
    background-color: white;
    box-shadow: 0 0 10px 3px rgb(221 221 221);
    padding-top: 15px;
  }
  .dialogspage div#groupdialogmodalactions > span {
    display: inline-block;
    width: 100%;
    margin-bottom: 20px;
    cursor: pointer;
    box-sizing: border-box;
  }
  .dialogspage span#adminstatus {
      display: inline-block;
      height: 18px;
      line-height: 18px;
      position: absolute;
      top: 0;
      right: 20px;
      font-size: 12px;
      margin-left: 15px;
      padding: 0 10px;
      color: var(--color-main);
      box-sizing: border-box;
      border-radius: 4px;
      border: 1px solid var(--color-main);
  }
  .dialogspage button#tosavegroupname,
  .dialogspage button#tosavegroupescription {
    margin-left: 15px;
    margin-bottom: 15px;
    background-color: var(--color-main);
    color: white;
    box-sizing: border-box;
    border-radius: 4px;
    border: none;
    padding: 7px 15px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
  }
  .dialogspage button#tosavegroupescription {
    margin-bottom: 10px;
    /* margin-top: 15px; */
    float: left;
    margin-left: 0;
  }
  .dialogspage div#allmessages {
    position: fixed;
    top: 0;
    bottom: 77px;
    /* padding: 10px 17px; */
    padding-bottom: 0px;
    box-sizing: border-box;
    overflow-y: auto;
    flex-direction: column-reverse;
    display: flex;
    /* justify-content: flex-end; */
    align-items: flex-end;
    /* flex-flow: wrap; */
    /* background-color: white; */
    z-index: 100000;
    /* height: 80vh; */
    padding: 20px;
    padding-top: 72px;
  }
  .dialogspage div#userdialog-container-2 {
      /* height: auto; */
      /* box-sizing: border-box; */
      /* padding-bottom: 5px; */
      /* padding-top: 5px; */
      /* border-top: 2px solid var(--color-background-input); */
      /* bottom: 0; */
      /* position: fixed; */
      /* z-index: 100000; */
      /* background-color: rgba(255, 255, 255, .9); */
      /* box-shadow: none; */
      padding: 15px;
      border-top: 1px solid #eee;
      display: flex;
      gap: 10px;
      position: fixed;
      bottom: 0;
      z-index: 1000;
      height: 77px;
  }
  .dialogspage #inputmessageblock {
      /* height: auto; */
      /* max-height: 120px; */
      /* box-sizing: border-box; */
      /* width: calc(var(--display-width) - 104px); */
      /* padding: 0; */
      /* background-color: initial; */
      /* cursor: text; */
      /* border-radius: 15px; */
      /* display: inline-block; */
      /* text-align: left; */
      /* font-size: 16px; */
      /* border: none; */
      /* resize: none; */
      /* margin-top: 10px; */
      /* font-size: 15px; */
      /* line-height: initial; */
      /* height: 25px; */
      /* min-height: 25px; */
      /* margin-bottom: 10px; */
      /* vertical-align: bottom; */
      flex: 1;
      padding: 10px;
      border: 1px solid #dee2e6;
      border-radius: 20px;
      outline: none;
      font-size: 14px;
      height: 46px !important;
  }
  .dialogspage #toattachinmessage, .dialogspage #tosendmessage, .dialogspage #tosavemessage, .dialogspage #torecordmsg {
    /* height: 23px; */
    /* width: 23px; */
    /* padding-top: 11px; */
    /* padding-bottom: 11px; */
    /* cursor: pointer; */
    /* padding-left: 10px; */
    /* position: absolute; */
    /* bottom: 0; */
    /* right: 10px; */
    /* background-size: 25px 25px; */
    /* box-sizing: content-box; */
    line-height: 26px;
    font-size: 20px;
    /* display: inline-block; */
    padding: 10px 20px;
    border-radius: 20px;
    background-color: #8A2BE2;
    color: white;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
  }
  
  span#recordmsgcounter {
      /* font-weight: bold; */
      font-size: 16px;
      display: inline-block;
      line-height: 38.5px;
      width: 20px;
      color: var(--color-gray-darkest);
      vertical-align: top;
  }
  div#recordmsgblockparent {
      height: auto;
      box-sizing: border-box;
      width: calc(100% - 40px);
      padding: 7px 0px;
      cursor: text;
      display: inline-block;
      text-align: left;
      border: none;
      height: 52.5px;
      float: left;
      position: relative;
  }
  .dialogspage img#toattachinmessage {
    left: 0;
  }
  .dialogspage div#sendmessageblock {
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    height: 0;
    width: 100%;
    position: fixed;
    z-index: 100000;
    bottom: 0;
    padding: 0 10px;
    background: rgba(255, 255, 255, .3);
  }
  .dialogspage #messageattachoptions > div {
      position: absolute;
      left: 10px;
      bottom: 8px;
      z-index: 1000;
      width: auto;
      height: auto;
  }
  .dialogspage div#messageattachoptions ul {display: none;list-style: none;width: auto;margin: 0;font-size: var(--font-notice);color: black;border-top: 0;box-sizing: border-box;text-align: left;/* margin-bottom: 20px; */border: 1px solid var(--color-background-input);background-color: white;padding: 7px 15px;border-radius: 9px;-webkit-box-shadow: 0px 5px 10px 2px rgb(0 0 0 / 20%);-moz-box-shadow: 0px 5px 10px 2px rgba(0, 0, 0, 0.2);box-shadow: 0px 5px 10px 2px rgb(0 0 0 / 20%);}
  .dialogspage div#messageattachoptions ul li {
    padding: 8px 5px;
    cursor: pointer;
    border-radius: 4px;
    height: 25px;
    box-sizing: content-box;
    line-height: 25px;
  }
  .dialogspage div#messageattachoptions ul li i {
      margin-right: 7px;
      font-size: 25px;
      color: #8A2BE2;
  }
  .dialogspage div#messageattachoptions {
    display: inline-block;
    width: auto;
    float: left;
  }
  .dialogspage div#messageattachoptions ul li img {
    width: 25px;
    margin-right: 10px;
  }
  .dialogspage div#messageattachoptions ul li span {
    display: inline-block;
    line-height: 25px;
    height: 25px;
    vertical-align: top;
  }
  .dialogspage #allmessagesinner > div {
    /* display: inline-block; */
    /* height: auto; */
    /* margin-bottom: 10px; */
    /* border-radius: 15px; */
    /* overflow: hidden; */
    /* padding: 0 17px; */
    /* box-sizing: border-box; */
    /* margin-bottom: 15px; */
    /* max-width: 70%; */
    /* position: relative; */
  }
  .dialogspage #allmessagesinner > div.datelabelblock {
      width: 100%;
      display: block;
      margin-top: 10px;
      margin-bottom: 16px;
      position: sticky;
      top: 5px;
      z-index: 10;
  }
  .dialogspage #allmessagesinner > div.datelabelblock > span {
      width: auto;
      display: inline-block;
      font-size: 13px;
      padding: 5px 9px;
      box-sizing: border-box;
      border-radius: 7.5px;
      background-color: rgba(246, 246, 246, 1);
      font-weight: bold;
      width: 140px;
  }
  .dialogspage div#iswriting {
      visibility: hidden;
      text-align: left;
      /* padding-left: 15px; */
      font-size: var(--font-notice);
      color: var(--color-addit);
      padding-bottom: 5px;
      height: 22px;
      /* background-color: white; */
      margin: 0;
      border-radius: 0;
      display: flex;
  }
  .dialogspage div#isrecording {
      visibility: hidden;
      text-align: left;
      /* padding-left: 15px; */
      font-size: var(--font-notice);
      color: var(--color-addit);
      padding-bottom: 5px;
      height: 18px;
      background-color: white;
      margin: 0;
      border-radius: 0;
  }

  /* ПК-оптимизация диалога: фиксированная по высоте колонка
     от верхнего хедера до низа, с закреплёнными шапкой и инпутом
     и прокруткой только области сообщений */
  @media (min-width: 769px) {
    /* Основной контейнер диалога занимает всю доступную высоту под глобальным хедером */
    .dialogspage div#dialogblock {
      position: relative;
      top: auto;
      bottom: auto;
      height: calc(100vh - 76px); /* 56px top-navbar + ~20px внутренний отступ страницы */
      max-height: calc(100vh - 76px);
      display: flex;
      flex-direction: column;
      padding-bottom: 12px; /* небольшой отступ снизу под блоком ввода */
      border-radius: 15px;
    }

    /* Шапка диалога остаётся вверху колонки и не участвует в прокрутке сообщений */
    .dialogspage div#dialogheader {
      position: relative;
      top: auto;
      z-index: 1;
      flex-shrink: 0;
    }

    /* Контейнер сообщений заполняет всё оставшееся место и сам прокручивается */
    .dialogspage div#allmessages {
      position: relative;
      top: auto;
      bottom: auto;
      z-index: 1;
      flex: 1;
      max-height: none;
      overflow-y: auto;
      align-items: flex-start;
      padding: 20px;
      padding-top: 72px; /* чтобы не наезжать на header внутри диалога */
    }

    /* Блок ввода сообщения закреплён внизу колонки диалога */
    .dialogspage div#userdialog-container-2 {
      position: relative;
      bottom: auto;
      height: auto;
      z-index: 1;
      padding: 15px;
      padding-bottom: 0;
      flex-shrink: 0;
      margin-top: auto;
    }

    /* Старый mobile-блок sendmessageblock больше не фиксируется на ПК */
    .dialogspage div#sendmessageblock {
      position: relative;
      bottom: auto;
      height: auto;
      padding: 0;
      background: transparent;
      z-index: auto; /* Сбрасываем высокий z-index с мобильной версии */
    }
    
    /* Сбрасываем абсолютное позиционирование меню вложений на десктопе */
    .dialogspage #messageattachoptions > div {
      position: relative;
      left: auto;
      bottom: auto;
      z-index: auto;
    }
    
    /* Сбрасываем фиксированное позиционирование блока вложений на десктопе */
    .dialogspage #outputMulti {
      position: relative;
      bottom: auto;
      z-index: auto;
      display: block;
      height: auto;
      padding: 10px 0;
    }
    
    /* Сбрасываем фиксированное позиционирование блока ответа на сообщение на десктопе */
    .dialogspage div#answeredmessage {
      position: relative;
      bottom: auto;
      z-index: auto;
    }
  }
  .dialogspage .message-wrapper {
    /* cursor: pointer; */
  }
  .dialogspage .message-wrapper-selected {
    background-color: rgba(64,173,255,.05) !important;
  }
  .dialogspage .infomessage {
    position: relative;
    display: block;
    width: auto;
    height: auto;
    padding: 6px 7px 8px 9px;
  }
  .dialogspage .infomessage>span>a {
      display: inline-block;
      width: 100%;
      text-align: left;
      font-size: 14px;
      font-weight: bold!important;
  }
  .dialogspage span.messagetext {
      font-size: 14px;
      /* padding: 5px 0 10px 0; */
      box-sizing: border-box;
      text-align: left;
      display: inline-block;
      width: 100%;
      /* float: left; */
      /* min-width: 25px; */
      /* padding-left: 9px; */
      /* padding-top: 6px; */
      /* padding-right: 7px; */
      /* margin-bottom: 10px; */
  }
  .dialogspage span.messagetext:empty {
    padding: 0;
    display: none;
  }
  /* Стили для галочек через Bootstrap Icons */
  .message-new .message-status i {
      color: white;
  }
  
  .message-sent .message-status i {
      color: white;
  }
  
  .message-seen .message-status i {
      color: white;
  }
  
  /* Стили для иконок статусов сообщений с Bootstrap Icons */
  .message-status {
      display: inline-block;
      margin-left: 5px;
      vertical-align: middle;
  }
  
  .message-status i {
      font-size: 14px;
      color: white;
  }
  
  .message-status .bi-check-all {
      color: white;
  }
  
  /* Анимация для часиков */
  .message-status .bi-clock {
      animation: rotate 1s linear infinite;
  }
  
  @keyframes rotate {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
  }
  .dialogspage .message {
      /* display: block; */
      /* width: auto; */
      /* max-width: 100%; */
      /* padding: 0; */
      /* box-sizing: border-box; */
      /* max-width: calc(var(--display-width) - 70px); */
      /* border-radius: 8px; */
      /* position: relative; */
      /* -webkit-box-shadow: 0px 2px 0.5px rgb(34 60 80 / 20%); */
      /*-moz-box-shadow: 0px 2px 0.5px rgb(34 60 80 / 20%);*/
      /* box-shadow: 0px 2px 3px rgb(34 60 80 / 20%); */
      /* overflow: hidden; */
      width: auto;
      position: relative;
  }
  
  .dialogspage .message:after {
      content: "";
      display: table;
      clear: both;
  }
  
  /*.dialogspage .message-seen .message:before {
      content: '';
      display: inline-block;
      width: 15px;
      height: 15px;
      background-image: url(/icons/seen.png);
      position: absolute;
      bottom: 0;
      right: 0;
  }*/
  
  .dialogspage .messagetime {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.7);
      text-align: right;
      display: inline-block;
      margin-top: 4px;
      margin-left: auto;
      white-space: nowrap;
      float: right;
      clear: both;
  }
  
  .dialogspage .message-from .messagetime {
      color: rgba(0, 0, 0, 0.5);
  }
  .dialogspage .voicemsgduration {
      font-size: 12px;
      color: var(--color-gray-light);
      text-align: left;
      display: inline-block;
      width: 50%;
      float: left;
      vertical-align: top;
      padding-left: 30px;
      box-sizing: border-box;
      float: left;
  }
  .voicemessageblockparent[data-isListened='0'] ~ .voicemsgduration:after {
      content: ' ';
      display: inline-block;
      width: 7px;
      height: 7px;
      background-color: #2880d8;
      border-radius: 100%;
      margin-left: 8px;
  }
  .messagetext+.messagetime {
      margin-top: 4px;
  }
  .dialogspage .messageedited {
      font-size: 12px;
      color: var(--color-gray-light);
      text-align: left;
      display: inline-block;
      width: auto;
      vertical-align: top;
      float: left;
      padding-left: 9px;
  }
  
  .dialogspage .messageimg {
      margin-top: 10px;
      position: relative;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      width: 100%;
      margin-bottom: -4px;
  }
  
  .dialogspage .toleft {
      left: 5px;
      background-color: rgba(255,255,255,.6);
      color: #86059c;
  }
  .dialogspage .toright {
      right: 5px;
      background-color: rgba(255,255,255,.6);
      color: #86059c;
  }
  
  .dialogspage .messagecontaining {
      /* display: inline-block; */
      /* width: 100%; */
      /* vertical-align: top; */
      /* position: relative; */
      /* width: calc(var(--display-width) - 70px) !important; */
  }
  
  .dialogspage .messagecontaining>img, .dialogspage .messagecontaining>video {
      display: inline-block;
      /* width: 100%; */
      /* margin: auto; */
      /* margin-bottom: -4px; */
  }
  
  .dialogspage .message:after {
    /* content: ""; */
    clear: both;
    display: table;
  }
  
  div.voicemessageblock {
      max-width: 250px;
      min-width: 150px;
      display: inline-block;
      width: calc(100% - 40px);
      /* float: left; */
  }
  
  button.toresumevoicemessage {
      margin-right: 10px;
      width: 30px;
      height: 30px;
      border: none;
      background-color: inherit;
      background-image: url(/icons/resume.png);
      background-size: 30px 30px;
      cursor: pointer;
      float: left;
  }
  
  button.topausevoicemessage {
      margin-right: 10px;
      width: 30px;
      height: 30px;
      border: none;
      background-color: inherit;
      background-image: url(/icons/pause.png);
      background-size: 30px 30px;
      cursor: pointer;
  }
  
  .dialogspage .message.message-to {
    /* float: right; */
    /* background-color: #f3e4f5; */
    background-color: #8A2BE2;
    color: white;
    border-bottom-right-radius: 5px;
  }
  .dialogspage .infomessage img {
      width: 45px;
      border-radius: 4px;
      margin-right: 10px;
      display: inline-block
  }
  .dialogspage span.messusertime {
    display: inline-block;
    width: auto;
    margin: 0;
    height: 47px;
    float: left;
    text-align: left;
  }
  .dialogspage .message-to .messusertime {
    float: right;
  }
  .dialogspage .message-to > .infomessage {
    text-align: right;
  }
  .dialogspage .message-from > .infomessage img {
    float: left;
  }
  .dialogspage .messusertime > span:nth-child(1) {
    font-size: var(--font-notice);
    color: var(--color-addit);
    display: inline-block;
    width: auto;
    margin-bottom: 5px;
    cursor: pointer;
  }
  .dialogspage .messusertime > span:nth-child(2) {
    font-size: calc((var(--font-notice)) - 2px);
    color: dimgray;
    width: auto;
    margin-bottom: 5px;
    cursor: pointer;
    display: block;
  }
  .dialogspage .message-sent {
    /* background-color: aliceblue; */
    float: right;
  }
  .dialogspage .message-seen {
    /* background-color: white; */
  }
  .dialogspage div#alluserdialogswrapper {
    width: var(--tools-width);
    display: inline-block;
    float: right;
    margin-top: 20px;
    margin-left: 20px;
  }
  .dialogspage div#alldialogsoptions {
    margin-bottom: 15px;
    height: 25px;
  }
  .dialogspage aside#alluserdialogs {
    width: 100%;
    display: inline-block;
    background-color: white;
    float: right;
    border-radius: 4px;
    overflow: hidden;
    max-height: calc((var(--display-height)) - (var(--header-height)) - 100px);
    overflow-y: auto;
  }
  span.dialoguserheader,
  span.dialoggroupheader {
    display: inline-block;
    width: 100%;
    height: 60px;
    cursor: pointer;
  }
  #alldialogscontainer span.dialoguserheader,
  #alldialogscontainer span.dialoggroupheader {
      display: inline-block !important;
  }
  .userdialog, .dialogspage .groupdialog, .dialogspage .clubdialog, .groupdialog-r {
      padding: 10px;
      /* padding-left: 18px; */
      box-sizing: border-box;
      position: relative;
      background-color: white;
      height: 80px;
      margin-bottom: 5px;
      width: 100%;
  }
  .dialoguserheader img,
  .dialoggroupheader img {
      height: 60px;
      width: 60px;
      border-radius: 100%;
      float: left;
      margin-right: 17px;
      box-sizing: border-box;
      vertical-align: top;
  }
  span.disalogusersn,
  span.disaloggroupname {
    float: left;
    font-size: var(--font-main);
    font-weight: bold;
    color: var(--color-main);
    display: inline-block;
    width: calc(100% - 110px);
    box-sizing: border-box;
    /*margin-bottom: 5px;*/
    cursor: pointer;
    line-height: 26px;
    padding: 5px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  span.lastmessage {
      display: inline-block;
      width: calc(100% - 87px);
      text-align: left;
      font-size: var(--font-notice);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 22px;
      height: 22px;
  }
  span.lastmessage > span.messagesender {
      margin-right: 5px;
      color: var(--color-gray-light);
      display: inline-block;
      height: 22px;
      line-height: 22px;
      vertical-align: top;
  }
  .dialogspage span.iswriting {
    display: none;
    width: calc(100% - 87px);
    text-align: left;
    font-size: var(--font-notice);
    color: var(--color-addit);
  }
  span.isrecording {
    display: inline-block !important;
    width: calc(100% - 87px);
    text-align: left;
    font-size: var(--font-notice);
    color: var(--color-addit);
  }
  .dialogspage span.countnewmessagesbage,
  .dialogspage span.countnewgroupmessagesbage {
    display: inline-block;
    position: absolute;
    right: 10px;
    top: calc(50% - 11px);
    height: 22px;
    width: 22px;
    line-height: 22px;
    font-size: 14px;
    border-radius: 100%;
    background-color: #0B8F1D;
    color: white;
  }
  .dialogspage audio.aud-thumbnail {
      width: 100%;
      height: 50px;
      margin-top: 25px;
  }
  .dialogspage .message audio {
      margin-top: 15px;
      width: 100%;
      min-width: 175px;
      margin-bottom: 7px;
  }
  .dialogspage .doc-thumbnail > img,
  .dialogspage .messagedoc > img {
    height: 50px;
    display: inline-block;
    margin-right: 20px;
    float: left;
  }
  .dialogspage span.docname {
    display: inline-block;
    width: calc(100% - 75px);
    margin: 0;
    float: left;
    height: 50px;
    box-sizing: border-box;
    text-align: left;
  }
  .dialogspage .docname > span:nth-child(1) {
    line-height: 30px;
    font-size: var(--font-main);
    color: black;
    font-weight: bold;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .dialogspage .docname > span:nth-child(2) {
    line-height: 20px;
    font-size: var(--font-notice);
    color: var(--color-gray-dark);
    display: block;
  }
  .dialogspage .deletedocuments {
      left: 40px;
      top: 20px;
  }
  .dialogspage #outputMulti {
      display: none;
      box-sizing: border-box;
      padding: 6.5px 10px;
      /* border-top: 2px solid var(--color-background-input); */
      position: fixed;
      bottom: 137px;
      overflow-x: overlay;
      background-color: initial;
      text-align: left;
      overflow-y: hidden;
      box-shadow: none;
      position: fixed;
      z-index: 10000;
      white-space: nowrap;
      height: 103px;
  }
  .dialogspage div#outputMulti:empty {
    padding: 0;
    border: none;
  }
  .dialogspage .deleteimages,
  .dialogspage .deletevideo,
  .dialogspage .deleteaudio,
  .dialogspage .deletedocuments {
    /* right: 0; */
    /* position: absolute; */
    /* height: 20px; */
    /* width: 20px; */
    /* z-index: 2; */
  }
  .dialogspage .allmessagephoto {
    display: none;
    /* margin-top: -10px; */
  }
  .dialogspage .allmessagephoto:first-child + .messageimg {
    margin-top: -10px;
  }
  .dialogspage .messagecontaining img {
    /* width: calc(var(--display-width) - 70px) !important; */
    /* border-radius: 4px; */
    /* margin-bottom: -4px; */
  }
  @media screen and (min-width: 1210px) and (orientation: landscape) {
    .dialogspage .messagecontaining img {
      min-width: 250px;
      max-width: 300px;
    }
  }
  @media screen and (max-width: 1210px) and (min-width: 940px) and (orientation: landscape) {
    .dialogspage .messagecontaining img {
      min-width: 250px;
      max-width: 300px;
    }
  }
  @media screen and (max-width: 940px) and (min-width: 768px) and (orientation: landscape) {
    .dialogspage .messagecontaining img {
      width: 100%;
    }
  }
  .dialogspage .messageimg .toleft {
    left: 5px;
    background-color: rgba(255, 255, 255, 0.6);
    color: var(--color-addit);
  }
  .dialogspage .messageimg .toright {
    right: 5px;
    background-color: rgba(255, 255, 255, 0.6);
    color: var(--color-addit);
  }
  .dialogspage .toleft,
  .dialogspage .toright {
    position: absolute;
    width: 30px;
    height: 30px;
    line-height: 30px;
    padding: 0 5px;
    font-size: var(--font-title);
    font-weight: bold;
    display: inline-block;
    z-index: 5;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: background-color 1s ease;
    box-sizing: border-box;
    top: calc(50% - 25px);
    border-radius: 100%;
  }
  .dialogspage .messageimg {
    position: relative;
  }
  .dialogspage .messageimg:first-child {
    margin-top: 0;
  }
  .dialogspage div#answeredmessage {
      width: 100%;
      background: white;
      padding: 5px 10px;
      box-sizing: border-box;
      /* border-top: 2px solid var(--color-background-input); */
      position: fixed;
      bottom: 45px;
      z-index: 100000;
  }
  .dialogspage div#answeredmessage > span {
      display: inline-block;
      width: calc(100% - 40px);
      text-align: left;
      box-sizing: border-box;
      padding-left: 15px;
      border-left: 4px solid var(--color-main);
      /* background-color: var(--color-background-input); */
      border-radius: 4px;
      float: left;
      height: auto;
  }
  .dialogspage div#answeredmessage > span > span {
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    font-size: 13px;
  }
  .dialogspage div#answeredmessage > span > span:first-child {
      /* margin: 7px 0; */
      color: var(--color-menu);
      height: 22px;
      line-height: 22px;
      display: inline-block;
      width: 100%;
      text-align: left;
      font-size: 14px;
      font-weight: bold;
  }
  .dialogspage div#answeredmessage > span > span:nth-child(2) {
      margin-bottom: 5px;
      color: black;
      display: inline-block;
      line-height: 16px;
      height: 16px;
      margin: 0;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      padding-right: 5px;
  }
  .dialogspage button#closeansweredmessage {
      width: 15px;
      height: 15px;
      position: absolute;
      right: 14px;
      top: calc(50% - 7.5px);
      padding: 0;
      border: 0;
      background-color: white;
  }
  .dialogspage #closeansweredmessage img {
      width: 100%;
  }
  .dialogspage .answeredmessageblock {
    margin-top: 5px;
    cursor: pointer;
  }
  .dialogspage .answeredmessageblock > span {
    display: inline-block;
    width: calc(100% - 13px);
    /* background-color: var(--color-background-input); */
    padding-left: 12px;
    border-left: 4px solid var(--color-main);
    /* border-radius: 4px; */
    box-sizing: border-box;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    /* background-color: #FFFAFA; */
    margin-bottom: 5px;
    margin-left: 9px;
    padding-right: 7px;
  }
  .dialogspage .answeredmessageblock > span > span {
      line-height: 18px;
      /* margin-top: 2px; */
      display: inline-block;
      width: 100%;
      white-space: nowrap;
      font-size: var(--font-notice);
      overflow: hidden;
      text-overflow: ellipsis;
  }
  .dialogspage .answeredmessageblock > span > span:first-child {
    color: var(--color-menu);
    /* margin: 7px 0; */
    font-weight: bold;
    line-height: 20px;
  }
  .dialogspage .answeredmessageblock > span > span:nth-child(2) {
    /* margin-bottom: 5px; */
  }
  .dialogspage .message-from > .answeredmessageblock {
    float: left;
    width: auto;
    max-width: 100%;
  }
  .dialogspage svg#closemodalwindow {
      width: 25px;
      height: 25px;
      fill: var(--color-gray-light);
      position: absolute;
      top: 0px;
      right: 0px;
      cursor: pointer;
      outline: none;
      z-index: 5000;
  }
  .dialogspage #modalwindow {
    height: calc((var(--display-height)) - 110px);
    padding: 15px;
    box-sizing: border-box;
    border-radius: 15px;
  }
  .dialogspage #modalwindowcontent {
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    gap: 15px;
  }
  .dialogspage div#resendingchatsheader,
  .dialogspage div#addinggroupmembersheader {
    padding-left: 40px;
    /* padding-top: 2px; */
    text-align: left;
    box-sizing: border-box;
    font-size: 16px;
    margin-bottom: 15px;
    height: 25px;
    line-height: 25px;
    color: var(--color-main);
    font-weight: bold;
  }
  .dialogspage div#allresendingchats,
  .dialogspage div#alladdinggroupmembers {
    flex: 1;
    box-sizing: border-box;
    overflow-y: auto;
    flex-direction: column;
    display: flex;
    min-height: 0;
  }
  .dialogspage button#toresendmessage,
  .dialogspage button#toaddgroupmembers {
      position: sticky;
      bottom: 0;
      margin-top: auto;
      width: 100%;
      cursor: pointer;
      border: none;
      border-radius: 4px;
      padding: 10px 0;
      font-size: var(--font-notice);
      color: var(--color-main);
      font-weight: bold;
      background-color: var(--color-main);
      color: white;
      margin-bottom: 0;
  }
  .dialogspage span.checkmark {
    display: none;
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background-color: var(--color-addit);
    top: 30px;
    right: 7px;
    background-image: url(/icons/applywhite.png);
    background-size: 20px 20px;
  }
  .dialogspage .userdialog-resend-selected .checkmark,
  .dialogspage .groupdialog-resend-selected .checkmark,
  .dialogspage .clubdialog-resend-selected .checkmark {
    display: block;
  }
  .dialogspage .userdialog.userdialog-resend-selected,
  .dialogspage .groupdialog-r.groupdialog-resend-selected,
  .dialogspage .clubdialog.clubdialog-resend-selected {
    background-color: aliceblue;
    border-radius: 15px;
  }
  .dialogspage #modalwindowcontent .userdialog,
  .dialogspage #modalwindowcontent .groupdialog-r,
  .dialogspage #modalwindowcontent .clubdialog {
    margin-bottom: 7px;
  }
  .dialogspage span#isResend {
    display: inline-block;
    width: 100%;
    text-align: left;
    color: var(--color-gray-light);
    /* padding-top: 5px; */
    font-style: italic;
    font-size: var(--font-notice);
    margin-bottom: 7px;
  }
  .dialogspage span#isResend:empty {
      width: 0;
      height: 0;
      padding: 0;
      display: none;
  }
  .dialogspage .addgroupmodalheader {
      height: 25px;
      line-height: 25px;
      margin-bottom: 10px;
      box-sizing: border-box;
      color: var(--color-addit);
      font-weight: bold;
      text-align: left;
      padding-left: 45px;
      font-size: 18px;
      margin-bottom: 10px;
  }
  .dialogspage .addgroupmodalheader span {
    color: white;
    display: inline-block;
    line-height: 55px;
    font-size: var(--font-subtitle);
    text-align: left;
    width: 100%;
    padding-left: 22px;
    box-sizing: border-box;
  }
  .dialogspage .modaleditgroupavatar {
      height: 80px;
      width: 80px;
      border-radius: 100%;
      border: 1px solid var(--color-gray-lightest);
      box-sizing: border-box;
      margin-left: 7px;
      cursor: pointer;
      overflow: hidden;
      display: inline-block;
      background-image: url(/icons/attachphoto.png);
      background-repeat: no-repeat;
      background-size: 30px;
      background-position: center;
  }
  .dialogspage .modaleditgroupinfo {
      width: calc(100% - 95px);
      height: 80px;
      display: inline-block;
      right: 0px;
      vertical-align: top;
  }
  .dialogspage .modaleditgroupabout {
      height: 80px;
      margin-bottom: 25px;
      margin-top: 25px;
  }
  .dialogspage .modaleditgroupinfo input, .dialogspage .modaleditgroupinfo textarea {
      width: 100%;
      line-height: 35px;
      height: 35px;
      text-align: left;
      box-sizing: border-box;
      padding-left: 15px;
      white-space: normal;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 16px;
      border: none;
      resize: none;
  }
  
  .dialogspage .modaleditgroupinfo [name="groupname"] {
      margin-bottom: 7px;
  }
  .dialogspage .modaleditgroupinfo [name="groupdescription"] {
      height: 38px;
      line-height: normal;
      overflow-y: auto;
      font-size: 14px;
  }
  .dialogspage span.modalsubheader {
      display: inline-block;
      width: 100%;
      text-align: left;
      padding-left: 15px;
      font-size: 15px;
      line-height: 20px;
      box-sizing: border-box;
      margin-bottom: 15px;
      font-weight: bold;
  }
  .dialogspage .modaladdgroupmembers {
      padding: 0px 7px;
      box-sizing: border-box;
      overflow-y: auto;
      height: calc(100% - 200px);
  }
  .dialogspage div#cropmodalwindow {
    border-radius: 4px;
    overflow: hidden;
    position: absolute;
    background-color: white;
    padding: 0px;
    display: inline-block;
    z-index: 4;
    width: auto;
    max-width: calc((var(--display-width)) - 40px);
    max-height: calc((var(--display-height)) - 40px);
    box-sizing: border-box;
  }
  .dialogspage #cropmodalwindowcontent {
    height: 100%;
  }
  .dialogspage #cropheader {box-sizing: border-box;height: 50px;font-size: 16px;color: #86059c;font-weight: bold;line-height: 50px;text-align: left;padding-left: 20px;display: none;}
  .dialogspage div#crop-contain {
      position: relative;
      /* display: flex; */
      width: 100%;
      height: 100%;
  }
  .dialogspage #photo {
      /* max-width: 100%; */
      /* max-height: calc(var(--display-height) - 100px); */
  }
  .dialogspage div#croptopblock {
    position: absolute;
    top: 0;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .dialogspage div#croprightblock {
    position: absolute;
    right: 0;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 10;
  }
  .dialogspage div#cropbottomblock {
    position: absolute;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .dialogspage div#cropleftblock {
    position: absolute;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .dialogspage #toapplyavatar {width: 50px;height: 50px;position: absolute;font-weight: 700;background-color: var(--color-addit);bottom: calc(var(--display-height) + 20px);right: 20px;z-index: 10000;border-radius: 100%;background-image: url(/icons/applywhite.png);background-size: 24px;background-repeat: no-repeat;background-position: center;}
  .dialogspage div#cropavatarcircle {
    width: 100%;
    height: 100%;
    border: 3px solid white;
    box-sizing: border-box;
    border-radius: 100%;
    position: absolute;
    top: 0;
  }
  .dialogspage canvas#cropframe {
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
  }
  .dialogspage div#addgroupmodalparent, .dialogspage div#aboutgroupmodalparent, .dialogspage div#showattachmentsparent, .dialogspage div#addgroupmembermodalparent, .dialogspage div#resendingchatsmodalparent {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      z-index: 1000000;
      background-color: rgba(0, 0, 0, .4);
  }
  .dialogspage div#addgroupmodal, .dialogspage div#aboutgroupmodal, .dialogspage div#showattachments, .dialogspage div#addgroupmembermodal, .dialogspage div#resendingchatsmodal {
      position: fixed;
      top: 0;
      bottom: 0;
      margin-bottom: 0;
      overflow-y: auto;
      background-color: #fff;
      border-radius: 0;
      left: 0;
      right: 0;
      width: 100%;
      /* margin: 55px 0; */
      padding: 15px 15px 10px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
  }
  .dialogspage svg#closeaddgroupmodal, .dialogspage svg#closeaboutgroupmodal, .dialogspage svg#closeattachmentsmodal, .dialogspage svg#closeresendingchatsmodal, .dialogspage svg#closeaddgroupmembermodal  {
      width: 25px;
      height: 25px;
      fill: #6b606b;
      position: absolute;
      top: 10px;
      right: 10px;
      cursor: pointer;
      outline: 0;
      z-index: 1000;
  }
  .dialogspage div#attachmentsmodalnav {
      display: block;
      margin-top: 45px;
      margin-bottom: 30px;
      height: 45px;
  }
  .dialogspage .attachmentsmodalnavchild {
      width: 25%;
      display: inline-block;
      padding: 10px 0;
      cursor: pointer;
      box-sizing: border-box;
      font-weight: bold;
      overflow: hidden;
      text-overflow: ellipsis;
      color: var(--color-main);
  }
  .dialogspage .activemodalattachmentsnav {
      border-bottom: 2px solid var(--color-main);
  }
  .dialogspage .attachmentsmodalchild {
      display: none;
      height: calc(100% - 140px);
      overflow-y: overlay;
  }
  .dialogspage div#attachmentsmodalimages {
      display: inline-block;
  }
  .dialogspage .attachmentsmodalchild-block {
      display: inline-block;
      width: calc(100%/3 - 5px);
      margin: 0 5px 5px 0;
      float: left;
  }
  .dialogspage .attachmentsmodalchild-block img, .dialogspage .attachmentsmodalchild-block video {
      border-radius: 4px;
      aspect-ratio: 3/2;
      object-fit: cover;
      object-position: center;
      width: 100%;
  }
  .dialogspage a.attachmentsmodalchild-block-doc {
      display: inline-block;
      width: 100%;
      margin-bottom: 5px;
      height: 50px;
  }
  .dialogspage .attachmentsmodalchild-block-doc img {
      width: 50px;
      float: left;
      margin-right: 20px;
      float: left;
  }
  
  .dialogspage div#addclassmodal-childblock {
      height: calc(100% - 88px);
      margin-top: 0;
  }
  .dialogspage .modaleditgroupavatar img {
    width: 100%;
    height: 100%;
    border-radius: 100%;
  }
  .dialogspage div#modaladdgroupmembersblock {
    display: inline-block;
    text-align: left;
    padding-left: 30px;
    box-sizing: border-box;
    margin-bottom: 30px;
  }
  .dialogspage .modaladdgroupmembers {
    flex-grow: 3;
    padding: 0px 7px;
    padding-bottom: 15px;
    box-sizing: border-box;
    overflow-y: auto;
    flex-direction: column;
    display: flex;
    flex-flow: wrap;
  }
  .dialogspage .userfriend-card {
      display: inline-block;
      width: 100%;
      height: 55px;
      margin-bottom: 10px;
      font-size: var(--font-notice);
      cursor: pointer;
      float: left;
      position: relative;
      text-align: left;
  }
  .dialogspage .userfriend-card > span:nth-child(2) {
      display: inline-block;
      width: calc(100% - 70px);
      line-height: 55px;
      vertical-align: top;
      margin-left: 15px;
      font-weight: 500;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  }
  .dialogspage .userfriend-card img {
      width: 55px;
      margin-bottom: 5px;
      border-radius: 100%;
      height: 55px;
  }
  .dialogspage .userfriend-card-chosen .checkmark {
    display: inline-block;
    top: 17.5px;
    right: 15px;
  }
  .dialogspage button#tocreategroup {
      position: absolute;
      bottom: 30px;
      left: 30px;
      width: calc(100% - 60px);
      height: 35px;
      border-radius: 4px;
      border: 0;
      background-color: var(--color-main);
      color: white;
      font-weight: bold;
      font-size: 14px;
      box-sizing: border-box;
      line-height: 30px;
      cursor: pointer;
  }
  .dialogspage #alldialogsoptions input {
    width: calc(100% - 40px);
    display: inline-block;
    box-sizing: border-box;
    margin-right: 10px;
    height: 25px;
    vertical-align: top;
  }
  .dialogspage span.groupeventmessage {
      display: block;
      width: calc(100% - 20px);
      text-align: center;
      margin: auto;
      margin-bottom: 15px;
      margin-top: 12px;
      font-size: var(--font-notice);
      color: var(--color-gray-darkest);
      background-color: #ebe4f5;
      padding: 5px;
      box-sizing: border-box;
      border-radius: 4px;
  }
  .dialogspage span.groupeventmessage > span > span {
    display: block;
    margin-top: 7px;
  }
  .dialogspage span.groupeventmessage img {
    width: 45px;
    border-radius: 100%;
  }
  .dialogspage span.groupeventmessage > span > span > span {
    vertical-align: top;
    display: inline-block;
    line-height: 45px;
    padding: 0 6px;
  }
  .dialogspage div#leavechat, .dialogspage div#returnchat, #deletesubgroup {
    box-sizing: border-box;
    text-align: left;
    color: var(--color-main);
    font-weight: bold;
    cursor: pointer;
    background-color: white;
    box-shadow: 0 0 10px 3px rgb(221 221 221);
    padding: 15px 0;
    padding-left: 20px;
    font-size: calc(var(--font-main) - 1px);
  }
  .dialogspage #alladdinggroupmembers .userfriend-card {
    padding-right: 55px;
    /* padding-left: 10px; */
    box-sizing: border-box;
  }
  
  
  
  
  .linkspage button:focus {
    outline: none;
  }
  .linkspage div#friendsblock, .linkspage div#like-mindedblock, .linkspage div#matesblock, .linkspage div#teachersblock, .linkspage div#subscribersblock1, .linkspage div#subscribersblock2 {
      background-color: white;
      padding: 10px 15px;
      box-sizing: border-box;
      margin-bottom: 15px;
      display: inline-block;
  }
  
  
  .linkspage div#friendsblock:empty,
  .linkspage div#like-mindedblock:empty,
  .linkspage div#subscribersblock2:empty,
  .linkspage div#subscribersblock1:empty{
    padding: 0;
  }
  .linkspage ul#links-categories-menu {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--font-main);
    font-family: var(--font-family);
    text-align: center;
  }
  .linkspage #links-categories-menu > li {
    margin: 5px auto;
    padding: 10px 10px;
    padding-right: 35px;
    cursor: pointer;
    border-radius: 4px;
    color: var(--color-menu);
    height: 25px;
    position: relative;
    display: block;
    text-align: left;
    line-height: 25px;
  }
  .linkspage #links-categories-menu > li:first-child {
    margin-top: 0px;
  }
  .linkspage #links-categories-menu > li:hover {
    background-color: #E6F1FF;
  }
  .linkspage div#orderfriendsheader, 
  .linkspage div#allfriendsnheader, 
  .linkspage div#likemindedheader, 
  .linkspage div#allmatesnheader, 
  .linkspage div#allteachersnheader, 
  .linkspage div#subscribersheader {
      line-height: normal;
      color: var(--color-addit);
      font-size: var(--font-main);
      font-weight: bold;
      margin-top: 7px;
      margin-bottom: 7px;
      text-align: left;
      box-sizing: border-box;
  }
  .linkspage .userfriend-card, .linkspage .userlikeminded-card, .linkspage .usermate-card, .linkspage .userteacher-card, .linkspage .subscriber-card {
      display: inline-block;
      width: 100%;
      height: auto;
      float: left;
      margin-top: 17px;
  }
  
  .linkspage .userfriend-card>a, .linkspage .userlikeminded-card>a, .linkspage .userteacher-card>a, .linkspage .subscriber-card>a {
      display: inline-block;
      width: 100%;
  }
  .linkspage .userfriend-card img, .linkspage .userlikeminded-card img, .linkspage .usermate-card img, .linkspage .userteacher-card>img, .linkspage
   .subscriber-card>img {
      width: 80px;
      aspect-ratio: 1/1;
      border-radius: 100%;
      margin-right: 20px;
  }
  .linkspage .userlink-infoblock {
      width: calc(100% - 100px);
      display: inline-block;
      height: auto;
      vertical-align: top;
  }
  
  .linkspage .userlink-infoblock>a>span:first-child {
      display: inline-block;
      width: 100%;
      height: 30px;
      line-height: 30px;
      text-align: left;
      font-weight: bold;
      color: var(--color-main);
      font-size: 15px;
  }
  
  .linkspage .userlink-infoblock>span:nth-child(2) {
      display: inline-block;
      width: 100%;
      height: 20px;
      line-height: 20px;
      text-align: left;
      font-size: 13px;
      color: var(--color-gray-light);
  }
  
  .linkspage .userlink-infoblock>span:nth-child(2):empty {
      display: none;
  }
  
  .linkspage .userlink-infoblock>span:nth-child(3) {
      display: inline-block;
      width: 100%;
      line-height: 25px;
      height: 25px;
      text-align: left;
      font-size: 13px;
  }
  
  .linkspage .userlink-infoblock>span:nth-child(3)>a {
      color: var(--color-addit) !important;
      font-weight: 500;
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  .userlink-infoblock>span:nth-child(3)>button {
      display: inline-block;
      width: auto;
      margin-right: 17px;
      line-height: 25px;
      height: 25px;
      text-align: left;
      font-size: 13px;
      background-color: white;
      border: none;
      padding: 0;
      cursor: pointer;
      font-weight: bold;
  }
  .linkspage button.acceptorderf {
    color: #28b328;
  }
  .linkspage button.declineorderf {
    color: #b23;
  }
  .linkspage div#allfriendsorders,
  .linkspage #allfriends {
    display: inline-block;
    margin-bottom: 27px;
  }
  .linkspage #allfriends {
    margin-bottom: 0;
  }
  .linkspage span.countblocks {
    color: var(--color-gray-darkest);
    display: inline-block;
    margin-left: 7px;
  }
  
  
  
  
  .schoolpage #modalwindow {
    overflow: hidden;
  }
  .schoolpage #modalwindowcontent {
    height: 100%;
  }
  .schoolpage #cropavatar, .schoolpage #cropheader {
      display: none;
      box-sizing: border-box;
      height: 50px;
      font-size: 16px;
      color: #86059c;
      font-weight: bold;
      line-height: 50px;
      text-align: left;
      padding-left: 20px;
  }
  .schoolpage div#crop-contain {
    position: relative;
    /* display: flex; */
    /* max-width: 100%; */
    /* max-height: calc(var(--display-height) - 100px); */
    width: 100%;
    height: 100%;
  }
  .schoolpage #photo {
    /* max-width: 100%; */
    /* max-height: calc(var(--display-height) - 100px); */
    /* top: 0; */
    /* left: 0; */
    position: absolute;
  }
  .schoolpage canvas#cropframe {
    position: absolute;
    top: calc(50% - var(--display-width)*5/26);
    left: 0;
    width:
    var(--display-width);
    height:
    calc(var(--display-width)*5/13);
    box-sizing: border-box;
  }
  .schoolpage #toapplyheader,
  .schoolpage #toapplyavatar {
      /* display: none; */
      width: 50px;
      height: 50px;
      position: absolute;
      font-weight: 700;
      background-color: var(--color-addit);
      bottom: calc(var(--display-height) + 20px);
      right: 20px;
      z-index: 10000;
      border-radius: 100%;
      background-image: url(/icons/applywhite.png);
      background-size: 24px;
      background-repeat: no-repeat;
      background-position: center;
  }
  .schoolpage div#confirmmodalwindow {
    text-align: right;
  }
  .schoolpage #confirmmodalwindow > div {
    margin-bottom: 10px;
    font-size: var(--font-subtitle);
    color: var(--color-menu);
  }
  .schoolpage #confirmmodalwindow > button {
    background-color: ghostwhite;
    border: none;
    font-size: var(--font-main);
    display: inline-block;
    text-align: right;
    color: var(--color-addit);
    cursor: pointer;
  }
  .schoolpage div#croptopblock {
    position: absolute;
    top: 0;
    background-color: rgba(0, 0, 0, 0.5);
    height: calc(50% - var(--display-width)*5/26);
  }
  .schoolpage div#croprightblock {
    position: absolute;
    right: 0;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 10;
  }
  .schoolpage div#cropbottomblock {
    position: absolute;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    height: calc(50% - var(--display-width)*5/26);
  }
  .schoolpage div#cropleftblock {
    position: absolute;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .schoolpage div#cropavatarcircle {
    width: 100%;
    height: 100%;
    border: 3px solid white;
    box-sizing: border-box;
    border-radius: 100%;
    position: absolute;
    top: 0;
  }
  .schoolpage .schoolavatarmodalheader {
    height: 55px;
    display: inline-block;
    width: 100%;
    background-color: var(--color-main);
    border-radius: 4px 4px 0 0;
  }
  .schoolpage svg#closemodalwindow {
    width: 20px;
    height: 20px;
    fill: var(--color-gray-light);
    position: absolute;
    top: 12px;
    right: 20px;
    cursor: pointer;
    outline: none;
    z-index: 1000;
  }
  
  
  .schoolpage #modalwindowcontentavatars {
      height: 100%;
  }
  .schoolpage svg.closemodalavatarsphotos {
      width: 28px;
      height: 28px;
      top: 11px;
      right: 11px;
  }
  .schoolpage .avatarsmodalimgcontaining {
      width: 100%;
      position: relative;
      height: calc(var(--display-height) - 124px);
  }
  .schoolpage .avatarsmodalimgcontaining>div {
      position: relative;
      width: 100%;
      height: 100%;
  }
  .schoolpage .avatarsmodalimgcontaining img {
      max-width: 100%;
      max-height: 100%;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
  }
  .schoolpage .avatarsmodalcontaining .photoinfo {
      position: static;
      width: 100%;
      height: 40px;
      min-height: revert;
      margin-top: 15px;
      display: inline-block;
      text-align: left;
      padding-left: 20px;
      padding-bottom: 15px;
      overflow: hidden;
  }
  .schoolpage .like-passive {
      background-image: url(/icons/passive-like.png);
      -webkit-transition: background 1s ease;
      -o-transition: background 1s ease;
      transition: background 1s ease;
      cursor: pointer;
  }
  .schoolpage .like-passive, .schoolpage .commentsheader {
      display: inline-block;
      background-size: 30px 30px;
      height: 30px;
      width: 30px;
      margin-right: 5px;
  }
  .schoolpage .like-active {
      width: 30px;
      height: 30px;
      background-image: url(/icons/active-like.png);
      background-size: 30px 30px;
      -webkit-transition: background 1s ease;
      -o-transition: background 1s ease;
      transition: background 1s ease;
      cursor: pointer;
      display: inline-block;
      margin-right: 5px;
  }
  .schoolpage span.countcomments, .schoolpage span.counthearts {
      color: #696969;
      font-size: 16px;
      line-height: 30px;
      display: inline-block;
      height: 30px;
      font-weight: 700;
      margin-right: 20px;
      vertical-align: top;
  }
  .schoolpage .commentsheader {
      background-image: url(/icons/comments.png);
  }
  
  
  
  .schoolpage img.authoravatar {
    display: inline-block;
    height: 60px;
    border-radius: 100%;
    /* margin-left: 7px; */
    /* margin-right: 8px; */
    float: left;
    margin-bottom: 12px;
  }
  .schoolpage .schoolmodalavatar .like-passive {
    width: 30px;
    height: 30px;
    background-image: url(/icons/passive-like.png);
    background-size: 30px 30px;
    transition: background 1s ease;
    cursor: pointer;
    display: inline-block;
    margin-right: 5px;
    /* margin-top: 10px; */
    margin-left: 100px;
    float: left;
  }
  .schoolpage .schoolmodalavatar .like-active {
    width: 30px;
    height: 30px;
    background-image: url(/icons/active-like.png);
    background-size: 30px 30px;
    transition: background 1s ease;
    cursor: pointer;
    display: inline-block;
    margin-right: 5px;
    /* margin-top: 10px; */
    margin-left: 102px;
    float: left;
  }
  .schoolpage .schoolmodalavatar span.counthearts,
  .schoolpage .schoolmodalavatar span.countcomments {
    color: var(--color-gray-darkest);
    font-size: var(--font-main);
    line-height: 30px;
    display: inline-block;
    height: 30px;
    font-weight: bold;
    vertical-align: top;
    margin-right: 25px;
    /* margin-top: 10px; */
    margin-left: 5px;
    float: left;
  }
  .schoolpage .schoolmodalavatar span.commentsheader {
    display: inline-block;
    background-image: url(/icons/comments.png);
    background-size: 30px 30px;
    height: 30px;
    width: 30px;
    margin-right: 5px;
    /* margin-top: 10px; */
    float: left;
  }
  .schoolpage .usermodalavatarcomment {
    margin-bottom: 7px;
  }
  .schoolpage .infocomment {
    position: relative;
    display: inline-block;
    width: 100%;
    height: auto;
  }
  .schoolpage .infocomment img {
    width: 45px;
    border-radius: 100%;
    margin-right: 10px;
    display: inline-block;
    float: left;
  }
  .schoolpage .commusertime {
    display: inline-block;
    width: auto;
    margin: 0;
    height: 47px;
    float: left;
    text-align: left;
  }
  .schoolpage img.tosendcomment {
    width: 20px;
    cursor: pointer;
    margin-left: 10px;
  }
  .schoolpage .emojies {
    display: none;
    box-sizing: border-box;
    max-width: 200px;
    max-height: 150px;
    min-height: 100px;
    border: 1px solid dimgray;
    position: absolute;
    right: 0;
    bottom: calc(16px + 10px);
  }
  .schoolpage .toleft,
  .schoolpage .toright {
      position: absolute;
      width: 30px;
      height: 30px;
      line-height: 30px;
      padding: 0 5px;
      font-size: 20px;
      font-weight: 700;
      display: inline-block;
      z-index: 5;
      text-align: center;
      background-color: rgba(255,255,255,.4);
      cursor: pointer;
      -webkit-transition: background-color 1s ease;
      -o-transition: background-color 1s ease;
      transition: background-color 1s ease;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      top: calc((100% - 55px)/2 - 15px);
      border-radius: 100%;
  }
  .schoolpage .toleft {
      left: 5px;
      background-color: rgba(255,255,255,.6);
      color: #86059c;
  }
  .schoolpage .toright {
      right: 5px;
      background-color: rgba(255,255,255,.6);
      color: #86059c;
  }
  .schoolpage #schoolheader > img {
    width: 100%;
    border-radius: 4px 4px 0 0;
  }
  .schoolpage #schoolheaderoptions,
  .schoolpage #aboutschooloptions {
    position: relative;
    display: inline-block;
    float: right;
    z-index: 50000;
  }
  .schoolpage #openschoolheaderoptions {
    display: inline-block;
    background: url(/icons/options.png);
    background-size: 25px;
    height: 25px;
    width: 25px;
    position: absolute;
    top: 5px;
    right: 7px;
    cursor: pointer;
  }
  .schoolpage div#schoolheaderoptions-content-parent {
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    background-color: rgba(0, 0, 0, 0.4);
  }
  .schoolpage #schoolheaderoptions-content {
    display: none;
    position: fixed;
    bottom: 9px;
    z-index: 100000;
    width: calc(var(--display-width) - 18px);
    box-sizing: border-box;
    left: 9px;
    top: auto;
    right: 9px;
    border-radius: 4px;
    padding: 10px;
    background-color: #fff;
    color: black;
  }
  .schoolpage #schoolheaderoptions-content > ul {
    margin: 0;
    padding: 0;
  }
  .schoolpage #schoolheaderoptions-content > ul > li {
    list-style: none;
    padding: 7px;
    font-size: var(--font-notice);
    cursor: pointer;
  }
  .schoolpage #closeheadersoption {
    text-align: center;
    background-color: var(--color-background-input);
    margin-top: 7px;
    border-radius: 4px;
    color: var(--color-addit);
  }
  .schoolpage #schoolheaderoptions:hover #schoolheaderoptions-content {
    display: block;
  }
  .schoolpage #headerinfo > img {
    width: 100px;
    margin-right: 20px;
    border-radius: 100%;
  }
  .schoolpage #headerinfo > span {
    line-height: 100px;
    display: inline-block;
    vertical-align: top;
  }
  .schoolpage div#schoolavatar {
      width: calc(var(--display-width)*0.382);
      height: calc(var(--display-width)*0.382);
      /* margin-right: 10px; */
      cursor: pointer;
      border-radius: 100%;
      overflow: hidden;
      box-sizing: border-box;
      position: absolute;
      z-index: 3;
      background-color: white;
      left: calc(50% - var(--display-width)*0.382/2);
      top: calc(10px + var(--display-width)*0.033);
  }
  .schoolpage #schoolavatar > div {
    position: relative;
    display: inline-block;
    height: 100%;
  }
  .schoolpage #schoolavatar img {
      width: 100%;
      height: 100%;
      border-radius: 100%;
      padding: 3px;
      background: white;
      box-sizing: border-box;
  }
  .schoolpage #schoolmaininfo-parent {
      width: 100%;
      /* min-height: 100px; */
      margin-left: auto;
      margin-right: 0;
      /* margin-bottom: 7px; */
      position: relative;
      height: auto;
      /* padding-top: 33px;*/
      display: inline-block;
  }
  .schoolpage ul#schoolavataroptions {
    display: none;
    font-size: var(--font-notice);
    list-style: none;
    padding: 10px;
    padding-bottom: 3px;
    margin: 0;
    color: black;
    border-top: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    background-color: rgba(230, 241, 255, 0.6);
  }
  .schoolpage #schoolavataroptions > li {
    margin-bottom: 3px;
    padding: 7px;
    border-radius: 4px;
  }
  .schoolpage #schoolavataroptions > li:hover {
    background-color: rgba(230, 241, 255, 0.8);
  }
  .schoolpage div#schoolmaininfo {
      height: auto;
      width: 100%;
      /* position: absolute; */
      /* top: 50%; */
      /* transform: translate(0, -50%); */
  }
  .schoolpage div#schoolmaininfo > span {
    display: inline-block;
    width: 100%;
    vertical-align: top;
    color: #000;
    font-size: 17px;
    line-height: 26px;
    /* margin-bottom: 17px; */
    margin-top: 14px;
    font-weight: bold;
    text-align: center;
  }
  .schoolpage #ya-share2-parent {
    display: none;
    width: auto;
    position: absolute;
    bottom: 10px;
    right: 10px;
  }
  .schoolpage .ya-share-2 {
    display: inline-block;
    width: auto;
  }
  .schoolpage .ya-share2__list .ya-share2__list_direction_vertical {
    background-color: white;
  }
  .schoolpage div#schoolcounts {
    display: table;
      table-layout: fixed;
      padding: 7px 5px 7px 5px;
      box-sizing: border-box;
      background-color: white;
      /* border-top: 2px solid var(--color-gray-lightest); */
      /* border-bottom: 2px solid var(--color-gray-lightest); */
      margin-bottom: 10px;
      border: 1px solid var(--color-gray-lightest);
      border-radius: 15px;
  }
  .schoolpage .schoolcounts-children {
    display: table-cell;
    vertical-align: top;
    height: 40px;
  }
  .schoolpage span.schoolcounts-children-number,
  .schoolpage span.schoolcounts-children-text {
    display: inline-block;
    width: 100%;
  }
  .schoolpage span.schoolcounts-children-number {
    font-size: var(--font-main);
    font-weight: bold;
  }
  .schoolpage span.schoolcounts-children-text {
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
  }
  .schoolpage div#schoolmenu {
      background-color: white;
      border-radius: 0px 0px 4px 4px;
      display: inline-block;
      /* padding: 10px 15px; */
      box-sizing: border-box;
      text-align: right;
      width: 100%;
      position: relative;
      margin-bottom: 10px;
      /* border-bottom: 2px solid var(--color-gray-lightest); */
      /* overflow-x: auto; */
      /* white-space: nowrap; */
      text-align: left;
      border-radius: 15px;
      border: 1px solid var(--color-gray-lightest);
      overflow: hidden;
  }
  .schoolpage .schoolinset {
      display: inline-block;
      width: auto;
      /* float: left; */
      /* padding-bottom: 7px; */
      /* margin-right: 20px; */
      font-weight: bold;
      cursor: pointer;
      font-size: 14px;
      vertical-align: top;
      padding: 15px;
      margin-left: -4px;
      height: 20px;
      line-height: 20px;
  }
  .schoolpage .activeschoolinset {
      /*border-bottom: 2px solid black; */
      background: var(--color-background-input);
  }
  .schoolpage main#content {
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
  }
  .schoolpage div#leftuserblocks {
    float: left;
    width: 270px;
  }
  .schoolpage div#rightuserblocks {
    width: 100%;
  }
  .schoolpage div#schoolinfo {
    margin-bottom: 15px;
    background-color: white;
    padding: 15px;
    border-radius: 4px;
    box-sizing: border-box;
  }
  .schoolpage #schoolcontacts,
  .schoolpage #schoolhistory {
    position: relative;
    margin-bottom: 15px;
    box-sizing: border-box;
    text-align: left;
    width: 100%;
    margin-left: auto;
    margin-right: 0;
    transition: 0.55s display;
  }
  .schoolpage #aboutschool,
  .schoolpage #schoolcontacts,
  .schoolpage #schoolhistory,
  .schoolpage #schoolteachers {
    position: relative;
    margin-bottom: 17px;
    /* margin-top: 20px; */
    /* box-sizing: border-box; */
    /* background-color: white; */
    /* border: 1px solid var(--color-background-input); */
  }
  .schoolpage button#aboutschooledit,
  .schoolpage button#aboutschooleditclose,
  .schoolpage button#schoolcontactsedit,
  .schoolpage button#schoolcontactseditclose,
  .schoolpage button#schoolcontactseditsave,
  .schoolpage button#schoolhistoryedit,
  .schoolpage button#schoolhistoryeditsave,
  .schoolpage button#schoolhistoryeditclose,
  .schoolpage button#schoolteachersedit,
  .schoolpage button#schoolteacherseditsave,
  .schoolpage button#schoolteacherseditclose,
  .schoolpage button#addschoolteacher,
  .schoolpage button#schoolsubjectedit,
  .schoolpage button#schoolsubjectsave,
  .schoolpage button#schoolsubjectclose,
  .schoolpage button#aboutschooleditsave {
    position: absolute;
    z-index: auto;
    right: 0;
    top: 10px;
    height: 25px;
    width: 25px;
    padding: 0;
    border: 0;
    background-image: url(/icons/edit.png);
    background-size: 25px 25px;
    background-color: white;
    cursor: pointer;
  }
  .schoolpage button#aboutschooledit,
  .schoolpage button#aboutschooleditsave,
  .schoolpage button#aboutschooleditclose {
    top: 5px;
  }
  .schoolpage button#aboutschooleditclose,
  .schoolpage button#schoolcontactseditclose,
  .schoolpage button#schoolhistoryeditclose,
  .schoolpage button#schoolteacherseditclose,
  .schoolpage button#schoolsubjectclose {
    background-image: url(/icons/close.png);
  }
  .schoolpage button#schoolcontactseditsave,
  .schoolpage button#schoolhistoryeditsave,
  .schoolpage button#schoolteacherseditsave,
  .schoolpage button#schoolsubjectsave,
  .schoolpage button#aboutschooleditsave {
    background-image: url(/icons/save.png);
    right: 37px;
  }
  .schoolpage button#schoolteacherseditclose, .schoolpage button#schoolteacherseditsave, .schoolpage button#schoolsubjectclose, .schoolpage button#schoolsubjectsave {
      position: absolute;
      z-index: 25;
      top: 55px;
      height: 25px;
      width: 25px;
      padding: 0;
      border: 0;
      background-size: 25px 25px;
      background-color: #fff;
  }
  
  .schoolpage button#schoolteacherseditclose, .schoolpage button#schoolsubjectclose {
      right: 10px;
  }
  
  .schoolpage button#schoolsubjectsave {
      right: 42px;
  }
  .schoolpage button:focus {
    outline: none;
  }
  
  
  
  .schoolpage div#addingteachers-parentblock {
      display: none;
      font-size: 16px;
      text-align: left;
      padding: 0 10px;
      box-sizing: border-box;
      margin-bottom: 20px;
  }
  
  .schoolpage div#addingteachers-header {
      margin-bottom: 15px;
      line-height: 25px;
      height: 25px;
      position: relative;
  }
  
  .schoolpage span#addingteachersheader-counter {
      font-weight: bold;
      margin-left: 5px;
  }
  
  .schoolpage div#sendingteacherinvite-parent {
      display: inline-block;
      width: 100%;
      height: 25px;
      margin-bottom: 10px;
      position: relative;
  }
  
  .schoolpage input#teachersemailadress {
      display: inline-block;
      width: calc(100% - 25px);
      height: 25px;
      border-radius: 4px;
      border: none;
      background-color: var(--color-background-input);
      margin-right: 10px;
      padding: 0 10px;
      box-sizing: border-box;
  }
  
  .schoolpage img#tosendteacherinvite {
      width: 25px;
      height: 25px;
      position: absolute;
      top: 0;
      right: -10px;
  }
  
  div#addingteachers-children {
      padding-left: 5px;
      box-sizing: border-box;
  }
  
  .schoolpage .addingteachers-item {
      display: inline-block;
      width: 100%;
      height: 25px;
      margin-bottom: 7px;
      position: relative;
  }
  
  .schoolpage .addingteachers-item span {
      display: inline-block;
      line-height: 25px;
      font-size: 14px;
      max-width: calc(100% - 50px);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
  }
  
  .schoolpage img.todeleteteacherinvite {
      display: inline-block;
      width: 25px;
      height: 25px;
      position: absolute;
      top: 0;
      right: 25px;
  }
  
  .schoolpage img.tosendteacherinviteagain {
      display: inline-block;
      width: 25px;
      height: 25px;
      position: absolute;
      top: 0;
      right: -10px;
  }
  
  
  .schoolpage div#editdescription,
  .schoolpage textarea#editadress,
  .schoolpage input#editwebadress,
  .schoolpage input#editfbadress,
  .schoolpage input#editvkadress,
  .schoolpage input#editinstadress,
  .schoolpage input#editokruadress {
      width: calc(100% - 127px);
      text-align: left;
      color: var(--color-menu);
      font-size: var(--font-notice);
      min-height: 24px;
      height: auto;
      line-height: 24px;
      margin: 0;
      margin-left: 22px;
      display: inline-block;
      float: right;
      white-space: normal;
      padding: 0;
      border: 0;
  }
  .schoolpage div#aboutschoolheader,
  .schoolpage div#schoolcontactsheader,
  .schoolpage div#schoolhistoryheader,
  .schoolpage div#schoolteachersheader,
  .schoolpage div#schoolactionsheader,
  .schoolpage div#schoolsubjectsheader,
  .schoolpage div#schoolpupilsheader,
  .schoolpage div#schoolsubscribersheader {
    color: #86059c;
    font-size: 16px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 12px;
    text-align: left;
    box-sizing: border-box;
    border-bottom: 1px solid #86059c;
    line-height: 25px;
  }
  .schoolpage div#aboutschoolheader {
    line-height: 25px;
    margin-bottom: 10px;
    color: var(--color-addit);
    font-size: var(--font-main);
    padding-top: 5px;
    padding-bottom: 10px;
    margin-top: 0;
    margin-bottom: 12px;
    text-align: left;
    box-sizing: border-box;
    border-bottom: 1px solid var(--color-addit);
  }
  .schoolpage div#schoolactions {
      display: inline-block;
      background-color: white;
      padding: 10px;
      padding-top: 0;
      box-sizing: border-box;
      height: 38px;
      margin-bottom: -4px;
  }
  .schoolpage #tosubscribe,
  .schoolpage #tounsubscribe {
      display: inline-block;
      background-color: #690899;
      color: white;
      width: 100%;
      padding: 5px 10px;
      line-height: var(--font-subtitle);
      font-size: var(--font-notice);
      font-weight: bold;
      cursor: pointer;
      border-radius: 15px;
      border: 0px;
      height: 28px;
      vertical-align: top;
      margin-right: 15px;
      float: left;
  }
  .schoolpage .schoolsubjects-card,
  .schoolpage .schoolprofiles-card {
    display: inline-block;
    box-sizing: border-box;
    width: calc(100%/4 - 5px);
    overflow: hidden;
    margin-bottom: 10px;
    margin-left: 5px;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
    color: #213021;
    position: relative;
    cursor: pointer;
    font-size: calc(var(--font-notice) - 2px);
    float: left;
  }
  .schoolpage div#schooldescription {
    display: inline-block;
    font-size: 14px;
    box-sizing: border-box;
    min-height: 25px;
    line-height: 25px;
    height: auto;
    width: 100%;
    vertical-align: top;
    margin-bottom: 8px;
  }
  .schoolpage div#schooldescription[contenteditable] {
    width: calc(100% - 45px);
  }
  .schoolpage div#schoolprofiles {
    height: auto;
    display: inline-block;
  }
  .schoolpage #schoolsite,
  .schoolpage #fb,
  .schoolpage #vk,
  .schoolpage #inst,
  .schoolpage #okru {
    margin-bottom: 5px;
    text-align: left;
    position: relative;
  }
  .schoolpage div#schoolteachers-parent, .schoolpage div#schoolsubjects-parent, .schoolpage #schoolpupils-parent, .schoolpage #schoolsubscribers-parent {
      display: none;
      position: fixed;
      z-index: 10000000;
      background-color: rgba(0, 0, 0, .4);
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
  }
  .schoolpage div#schoolteachers, .schoolpage div#schoolsubjects, .schoolpage #schoolpupils, .schoolpage #schoolsubscribers {
    display: block;
    position: fixed;
    z-index: 1000000;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    margin-bottom: 0;
    overflow-y: auto;
    background-color: #fff;
    box-sizing: border-box;
    float: left;
    padding: 15px;
  }
  .schoolpage div#schoolteachersheader, .schoolpage div#schoolsubjectsheader, .schoolpage div#schoolpupilsheader, .schoolpage div#schoolsubscribersheader {
    /* margin-top: 30px; */
    /* margin-top: 10px; */
    text-align: left;
    line-height: 35px;
    padding: 10px;
    font-weight: bold;
    border-bottom: none;
    font-size: 18px;
    padding-left: 40px;
    padding-top: 0;
  }
  .schoolpage span#countsubscribers {
      color: var(--color-gray-dark);
      font-weight: normal;
      display: inline-block;
      margin-left: 7px;
  }
  .schoolpage button#schoolteachersedit, .schoolpage button#schoolsubjectedit {
    right: 10px;
    background-image: url(/icons/edit.png);
    top: 55px;
  }
  .schoolpage #closeschoolteachers, .schoolpage #closeschoolsubjects, .schoolpage #closeschoolpupils, .schoolpage #closeschoolsubscribers {
    /* width: 25px; */
    /* height: 25px; */
    /* position: absolute; */
    /* top: 10px; */
    /* right: 10px; */
    /* fill: #6b606b; */
  }
  .schoolpage .schoolteachers-subheader {
      display: inline-block;
      width: 100%;
      font-size: 16px;
      font-weight: bold;
      text-align: left;
      padding-left: 3px;
      box-sizing: border-box;
      margin-bottom: 17px;
  }
  .schoolpage div#allteachers, .schoolpage div#allclasses, .schoolpage div#allsubscribers {
      display: inline-block;
      text-align: left;
      padding: 0 7px;
      box-sizing: border-box;
  }
  
  .schoolpage .schoolteachers-person, .schoolpage .class-elem, .schoolpage .schoolsubscriber-card {
      width: 100%;
      margin-right: 15px;
      display: inline-block;
      margin-bottom: 20px;
      text-align: center;
      position: relative;
      height: 70px;
  }
  
  .schoolpage .schoolteachers-person img, .schoolpage .class-elem img, .schoolpage .schoolsubscriber-card img {
      width: 70px;
      margin-bottom: 7px;
      border-radius: 100%;
      float: left;
  }
  
  .schoolpage .schoolteachers-person > a > span:nth-child(2), .schoolpage .class-elem > a > span:nth-child(2), .schoolpage .schoolsubscriber-card > a > span:nth-child(2) {
      display: inline-block;
      width: calc(100% - 90px);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 15px;
      font-weight: bold;
      position: absolute;
      left: 90px;
      top: 50%;
      transform: translate(0,-50%);
      text-align: left;
  }
  
  .schoolpage .schoolteachers-person > a > span:nth-child(3), .schoolpage .class-elem > a > span:nth-child(3), .schoolpage .schoolsubscriber-card > a > span:nth-child(3) {
      display: inline-block;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: calc(12px);
  }
  
  
  .schoolpage div#schooladress,
  .schoolpage div#schooltelephones,
  .schoolpage div#schoolemails {
    margin-bottom: 8px;
    text-align: left;
    display: inline-block;
    position: relative;
    height: auto;
    min-height: 24px;
  }
  .schoolpage #schooldescription > span:first-child,
  .schoolpage #schoolprofiles > span:first-child,
  .schoolpage #schooladress > span:first-child,
  .schoolpage #schooltelephones > span:first-child,
  .schoolpage #schoolemails > span:first-child,
  .schoolpage #schoolsite > span:first-child,
  .schoolpage #fb > span:first-child,
  .schoolpage #vk > span:first-child,
  .schoolpage #inst > span:first-child,
  .schoolpage #okru > span:first-child {
    box-sizing: border-box;
    text-align: left;
    font-size: var(--font-notice);
    color: var(--color-gray-darkest);
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 105px;
    padding-left: 15px;
    height: 24px;
    line-height: 24px;
  }
  .schoolpage #schooldescription > span:nth-child(2),
  .schoolpage #schoolprofiles > span:nth-child(2),
  .schoolpage #schooladress > span:nth-child(2),
  .schoolpage #schooltelephones > span:nth-child(2),
  .schoolpage #schoolemails > span:nth-child(2),
  .schoolpage #schoolsite > span:nth-child(2) {
    width: calc(100% - 127px);
    text-align: left;
    color: var(--color-menu);
    font-size: var(--font-notice);
    min-height: 24px;
    height: auto;
    line-height: 24px;
    margin: 0;
    margin-left: 22px;
    display: inline-block;
    float: right;
    white-space: normal;
  }
  /*.schoolpage div#schooldescription>span:nth-child(2) {
      height: 150px;
      overflow: hidden;
  }*/
  .schoolpage #schooladress > span:nth-child(2) {
    position: static;
    white-space: normal;
    height: auto;
  }
  .schoolpage div#editprofiles, .schoolpage #schoolprofiles-block {
      display: none;
      width: calc(100% - 127px);
      margin: 0;
      margin-left: 22px;
      float: right;
  }
  .schoolpage #schoolprofiles-block {
      display: inline-block;
  }
  .schoolpage #showallinfo,
  .schoolpage #hideallinfo {
    font-size: var(--font-notice);
    display: inline-block;
    width: 100%;
    text-align: center;
    cursor: pointer;
    margin-top: 8px;
    font-weight: bold;
    color: var(--color-gray-dark);
  }
  .schoolpage #hideallinfo {
    display: none;
  }
  .schoolpage #editsubjects {
    display: none;
  }
  .schoolpage .editschoolsubject,
  .schoolpage .schoolsubject {
      box-sizing: border-box;
      width: calc(100%/4 - 5px);
      overflow: hidden;
      margin-bottom: 10px;
      margin-left: 5px;
      white-space: nowrap;
      text-overflow: ellipsis;
      text-align: center;
      color: #213021;
      position: relative;
      cursor: pointer;
      font-size: calc(12px);
      float: left;
  }
  .schoolpage .editschoolprofile, .schoolpage .schoolprofile {
      background: rgba(0, 0, 0, 0.1);
      width: 100%;
      border: 0;
      border-radius: 4px;
      box-sizing: border-box;
      padding: 6px 10px;
      color: rgba(0, 0, 0, 0.6);
      font-family: inherit;
      font-weight: 500;
      line-height: inherit;
      transition: 0.3s ease;
      margin-bottom: 7px;
      font-size: 13px;
      overflow: hidden;
      text-overflow: ellipsis;
  }
  .schoolpage .schoolprofile,
  .schoolpage .schoolsubject {
    display: inline-block;
  }
  .schoolpage .addschoolsubject {
    opacity: 0.6;
  }
  .schoolpage .removeschoolprofile {
      color: rgba(0, 0, 0, 0.8);
      background: rgba(134, 5, 156, 0.3);
  }
  .schoolpage span.checkmark {
    position: absolute;
    width: 25px;
    height: 25px;
    border-radius: 100%;
    background-color: var(--color-addit);
    top: 0px;
    right: 0px;
    background-image: url(/icons/applywhite.png);
    background-size: 25px 25px;
  }
  .schoolpage .addschoolprofile > .checkmark,
  .schoolpage .addschoolsubject > .checkmark {
    display: none;
  }
  .schoolpage [data-type='geo']::before {
    width: 22px !important;
    left: 100px !important;
  }
  .schoolpage [data-type='geo']:after {
    border-bottom: none !important;
  }
  .schoolpage .ymaps-2-1-79-geolink-popup {
    left: calc((100% - 320px)/2) !important;
    top: 130px;
    position: absolute;
    width: 320px;
  }
  .schoolpage table#telephones,
  .schoolpage table#emails {
      box-sizing: border-box;
      background-color: white;
      color: dimgray;
      border-radius: 4px;
      width: calc(100% - 35px);
      text-align: left;
      color: var(--color-menu);
      font-size: var(--font-notice);
      height: auto;
      margin-top: 10px;
      margin-left: 15px;
      margin-bottom: 10px;
      margin-right: 20px;
      display: inline-block;
      float: right;
      white-space: normal;
  }
  .schoolpage table#telephones > tbody,
  .schoolpage table#emails > tbody {
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    border-right: 1px solid var(--color-background-input);
  }
  .schoolpage table#telephones > tbody > tr:first-child,
  .schoolpage table#emails > tbody > tr:first-child {
    border-top: 1px solid var(--color-background-input);
  }
  .schoolpage table#telephones > tbody > tr,
  .schoolpage table#emails > tbody > tr {
    display: inline-block;
    width: 100%;
    border: 1px solid var(--color-background-input);
    border-top: 0px;
    height: auto;
    position: relative;
  }
  .schoolpage button.removenumber,
  .schoolpage button.removeemail {
    width: 14px;
    height: 14px;
    position: absolute;
    right: -20px;
    top: calc(50% - 7px);
    background-image: url(/icons/close.png);
    background-size: 14px 14px;
    border: none;
    background-color: white;
    display: inline-block;
  }
  .schoolpage table#telephones > tbody > tr > td,
  .schoolpage table#emails > tbody > tr > td {
      display: inline-block;
      width: 50%;
      height: auto;
      box-sizing: border-box;
      overflow: hidden;
      text-overflow: ellipsis;
      padding: 10px 5px;
      font-size: var(--font-notice);
      text-align: center;
      color: black;
  }
  .schoolpage table#telephones > tbody > tr > td:nth-child(2n+1), .schoolpage table#emails > tbody > tr > td:nth-child(2n+1) {
      border-right: 1px solid var(--color-background-input);
      width: 105px;
  }
  .schoolpage table#telephones > tbody > tr > td:nth-child(2n), .schoolpage table#emails > tbody > tr > td:nth-child(2n) {
      width: calc(100% - 105px);
  }
  .schoolpage table#telephones > tbody > tr > td > input,
  .schoolpage table#emails > tbody > tr > td > input {
    box-sizing: border-box;
    width: 100%;
    border: none;
    padding: 0;
    font-size: var(--font-notice);
    text-align: center;
    color: #454545;
  }
  .schoolpage #addschooltelephone,
  .schoolpage #addschoolemail {
      box-sizing: border-box;
      border: none;
      background-color: white;
      font-weight: bold;
      color: black;
      width: calc(100% - 15px);
      text-align: left;
      font-size: var(--font-notice);
      min-height: 24px;
      height: auto;
      line-height: 24px;
      margin: 0;
      display: inline-block;
      float: right;
      white-space: normal;
      margin-top: 7px;
      margin-bottom: 20px;
  }
  .schoolpage #addschooltelephone > img,
  .schoolpage #addschoolemail > img {
    height: 20px;
    margin-right: 10px;
  }
  .schoolpage #addschooltelephone > span,
  .schoolpage #addschoolemail > span {
    line-height: 20px;
    vertical-align: top;
  }
  .schoolpage #schoolsite > span:nth-child(2) > a {
    float: left;
    text-align: center;
    margin-right: 10px;
    display: inline-block;
  }
  .schoolpage img.socialmedia-icon {
    height: var(--font-main);
    margin-right: 5px;
    vertical-align: top;
  }
  .schoolpage div#schoolhistorytext {
    padding: 0 15px;
    box-sizing: border-box;
    text-align: left;
    font-size: var(--font-notice);
  }
  .schoolpage #edithistory {
    display: inline-block;
    font-size: var(--font-notice);
    text-align: left;
    box-sizing: border-box;
    border: none;
    cursor: text;
    resize: none;
    font-family: var(--font-family);
    line-height: calc(var(--font-title) + 2px);
    width: 100%;
  }
  .schoolpage #noschoolteachers {
    font-size: var(--font-main);
    color: dimgray;
    margin-bottom: 10px;
    text-align: center;
  }
  .schoolpage .schoolteacher {
    display: inline-block;
    width: calc(20% - 24px);
    margin-right: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    cursor: pointer;
    margin-bottom: 10px;
    position: relative;
  }
  .schoolpage #allteachers > .schoolteacher:nth-child(5n+1) {
    margin-left: 20px;
  }
  .schoolpage button#addschoolteacher {
    left: 5px;
    background-image: url(/icons/plus.png);
  }
  .schoolpage aside#schoolmenu {
    width: 215px;
    position: sticky;
    top: 20px;
    box-sizing: border-box;
    display: inline-block;
    float: right;
    margin-top: 20px;
    margin-right: 20px;
  }
  .schoolpage #schoolmenu > ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--font-subtitle);
    font-family: var(--font-family);
    text-align: center;
    padding-left: 20px;
  }
  .schoolpage #schoolmenu > ul li {
    width: 100%;
    display: inline-block;
    margin-bottom: 20px;
    text-align: left;
    cursor: pointer;
    color: var(--color-addit);
  }
  
  .schoolpage img.tosendcomment {
      height: 25px;
      width: 25px;
      margin-top: 15px;
      margin-bottom: 15px;
      margin-left: 10px;
  }
  
  .schoolpage #newcontent {
      display: none;
      margin-bottom: 15px;
      overflow: hidden;
  }
  .schoolpage #addingnew, .schoolpage #newheader {
      width: 100%;
      margin: auto;
      font-size: 0;
  }
  .schoolpage #newheader {
      display: none;
      padding: 10px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      border: 1px solid #f6f6f6;
      border-bottom: 0;
      font-size: 16px;
      text-align: left;
      background-color: #fff;
      font-family: var(--font-family);
      min-height: calc(41px);
  }
  .schoolpage #new {
      width: 100%;
      margin: auto;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      padding: 10px;
      border: 1px solid #f6f6f6;
      font-size: 16px;
      background-color: #fff;
      text-align: left;
      font-family: var(--font-family);
      display: block;
      height: auto;
      min-height: 5em;
      max-height: 12em;
      overflow: auto;
      line-height: 1.42857143;
      color: #555;
      cursor: text;
      resize: none;
  }
  
  .schoolpage #row {
      display: none;
  }
  
  .schoolpage div#outputMulti:empty {
      padding: 0;
  }
  .schoolpage #outputMulti {
      display: inline-block;
      height: auto;
      padding: 15px 15px 0;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      background-color: #fff;
  }
  .schoolpage #attaching {
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      padding: 10px;
      background-color: #fff;
      border: 1px solid #f6f6f6;
      border-top: none;
      display: inline-block;
  }
  .schoolpage #attachaudio, .schoolpage #attachdocuments, .schoolpage #attachheader, .schoolpage #attachphoto, .schoolpage #attachvideo {
      height: 30px;
      width: 30px;
      border: 0;
      float: left;
      padding: 0;
      margin-right: 10px;
      cursor: pointer;
  }
  .schoolpage span#addnew {
      float: right;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      font-size: 16px;
      font-weight: 700;
      padding: 10px;
      color: #fff;
      border: 0;
      background-color: var(--color-main-light-100);
      color: var(--color-main);
      cursor: pointer;
      width: 100%;
      margin-top: 15px;
      border-radius: 4px;
  }
  
  .schoolpage #outputMulti>div {
      width: auto;
      height: auto;
      display: inline-block;
      float: left;
      cursor: pointer;
      margin-right: 10px;
      position: relative;
      margin-bottom: 15px;
      max-height: 100px
  }
  
  .schoolpage #outputMulti>div:after {
      display: table;
      clear: both;
      content: ""
  }
  
  .schoolpage .aud-thumbnail,.schoolpage .img-thumbnail,.schoolpage .video-thumbnail {
      height: 100px;
      display: inline-block;
      float: left;
      opacity: .9;
      z-index: 1;
      border-radius: 4px
  }
  
  .schoolpage .doc-thumbnail {
      float: left;
      opacity: .9;
      z-index: 1;
      border-radius: 4px
  }
  
  .schoolpage audio.aud-thumbnail {
      height: revert;
      width: 100%;
      margin-top: 0!important
  }
  
  .schoolpage .doc-thumbnail,.schoolpage .newsdoc {
      height: 50px;
      width: 100%;
      display: inline-block
  }
  
  .schoolpage .doc-thumbnail>img,.schoolpage .newsdoc>img {
      height: 50px;
      display: inline-block;
      margin-right: 20px;
      float: left
  }
  
  .schoolpage span.docname {
      display: inline-block;
      width: calc(100% - 75px);
      margin: 0;
      float: left;
      height: 50px;
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      text-align: left;
  }
  
  .schoolpage .docname>span:nth-child(1) {
      line-height: 30px;
      font-size: 16px;
      color: #000;
      font-weight: 700;
      display: block;
      white-space: nowrap;
      overflow: hidden;
      -o-text-overflow: ellipsis;
         text-overflow: ellipsis
  }
  
  .schoolpage .docname>span:nth-child(2) {
      line-height: 20px;
      font-size: 14px;
      color: #5e5e5e;
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
  }
  
  .schoolpage .deleteaudio,.schoolpage .deletedoc,.schoolpage .deleteimages,.schoolpage .deletevideo {
      right: 0;
      position: absolute;
      height: 20px;
      width: 20px;
      z-index: 2
  }
  
  .schoolpage .deletedoc {
      left: 40px;
      top: -5px
  }
  
  .schoolpage .new {
      display: none;
      margin: auto auto 22px;
      background-color: #fff;
      border: 1px solid #f6f6f6;
      text-align: left
  }
  
  .schoolpage .new {
      padding: 10px;
      box-sizing: border-box;
  }
  
  .schoolpage .newheader {
      margin-bottom: 5px;
      text-align: center;
      font-size: 18px;
      color: #86059c;
      font-family: 'Montserrat';
      box-sizing: border-box;
      width: 100%;
      border: none;
  }
  
  .schoolpage .newtext {
      margin-bottom: 10px;
      font-size: 16px;
      line-height: 20px;
      box-sizing: border-box;
      display: inline-block;
      width: 100%;
      border: none;
      resize: none;
  }
  
  .schoolpage .newtext>a {
      color: #00f!important
  }
  
  .schoolpage .new iframe {
      width: 100%;
      margin: auto;
      display: block;
      height: calc(100%/16*9);
      border-radius: 4px
  }
  
  .schoolpage .newheader:empty,.schoolpage .newtext:empty {
      margin: 0;
      padding: 0;
  }
  
  .schoolpage .allnewsphoto {
      display: none
  }
  
  .schoolpage .newsoptions {
      position: relative;
      display: inline-block;
      float: right;
      width: 0
  }
  
  .schoolpage span.opennewsoptions {
      display: inline-block;
      background: url(/icons/options.png);
      background-size: 25px;
      height: 25px;
      width: 25px;
      position: absolute;
      top: 0;
      right: 0;
      cursor: pointer
  }
  
  .schoolpage .newsoptions-content-parent {
      display: none;
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 10000;
      background-color: rgba(0, 0, 0, .4);
  }
  
  .schoolpage .newsoptions-content {
      display: none;
      position: fixed;
      bottom: 9px;
      z-index: 100000;
      width: calc(var(--display-width) - 18px);
      box-sizing: border-box;
      left: 9px;
      top: auto;
      right: 9px;
      border-radius: 4px;
      padding: 10px;
      background-color: #fff;
      color: black;
  }
  
  .schoolpage .newsoptions-content>ul>li {
      list-style: none;
      font-size: 14px;
      cursor: pointer;
      white-space: nowrap;
      margin-bottom: 3px;
      padding: 7px;
      border-radius: 4px
  }
  
  .schoolpage li#closenewsoption {
      text-align: center;
      background-color: var(--color-background-input);
      margin-top: 7px;
      border-radius: 4px;
      color: var(--color-addit);
  }
  
  .schoolpage .allnewsphoto {
      display: none
  }
  
  .schoolpage .newsimg {
      margin-top: 10px;
      position: relative;
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      width: 100%;
      margin-bottom: 10px;
  }
  
  .schoolpage .newscontaining {
      display: inline-block;
      width: 100%;
      vertical-align: top;
      position: relative
  }
  
  .schoolpage .newscontaining>img,.schoolpage .newscontaining>video {
      display: inline-block;
      width: 100%;
      margin: auto
  }
  
  .schoolpage #modalnewsphotos .newsmodalcontaining {
      width: 100%;
      height: 100%;
  }
  
  .schoolpage span.countmodalnewsimages {
      display: inline-block;
      width: auto;
      float: left;
      margin-top: 15px;
      margin-left: 20px;
      line-height: 20px;
      font-weight: bold;
  }
  
  .schoolpage .newsmodalheadercontaining img.closemodalnewsphotos {
      width: 20px;
      height: 20px;
      position: absolute;
      top: 15px;
      right: 15px;
  }
  
  .schoolpage .newsmodalimgcontaining>div {
      position: relative;
      width: 100%;
      height: 100%;
  }
  
  .schoolpage .newsmodalimgcontaining img {
      max-width: 100%;
      max-height: 100%;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
  }
  
  .schoolpage .usernewsphotoinfo-container-1 {
      display: inline-block;
      width: 100%;
      height: auto
  }
  
  .schoolpage .infonew {
      position: relative;
      height: 60px;
      margin-bottom: 10px;
  }
  
  .schoolpage .newsactions {
      margin-top: 10px;
      border-top: 1px solid #f6f6f6;
      padding-top: 10px;
  }
  
  .schoolpage .new audio {
      width: 100%;
      margin-bottom: 10px;
  }
  
  .schoolpage .newsoptions-content>ul {
      margin: 0;
      padding: 0;
  }
  
  .schoolpage .editrow {
      display: none
  }
  
  .schoolpage .editoutputMulti {
      display: inline-block;
      height: auto
  }
  
  .schoolpage .newtext[contenteditable] {
      min-height: 100px
  }
  
  .schoolpage .editattaching, .schoolpage .editoutputMulti {
      box-sizing: border-box;
      padding: 10px 10px 0;
  }
  
  .schoolpage .editattachaudio>img,.schoolpage .editattachdocuments>img,.schoolpage .editattachphoto>img,.schoolpage .editattachvideo>img {
      height: 30px;
      width: 30px
  }
  
  .schoolpage .editattachaudio,.schoolpage .editattachdocuments,.schoolpage .editattachphoto,.schoolpage .editattachvideo {
      height: 30px;
      width: 30px;
      border: 0;
      float: left;
      padding: 0;
      margin-right: 10px;
      cursor: pointer
  }
  
  .schoolpage #outputMulti>div, .schoolpage .editoutputMulti>div {
      width: auto;
      height: auto;
      display: inline-block;
      float: left;
      cursor: pointer;
      margin-right: 10px;
      position: relative;
      margin-bottom: 15px;
      max-height: 100px;
  }
  
  
  
  .classpage #modalwindowcontent {
    height: 100%;
  }
  .classpage #modalwindowcontentavatars {
      height: 100%;
  }
  
  .classpage .avatarsmodalheadercontaining {
      height: 50px;
      margin-bottom: 7px;
      position: relative;
  }
  .classpage .avatarsmodalimgcontaining {
      width: 100%;
      position: relative;
      height: calc(var(--display-height) - 124px);
  }
  .classpage .avatarsmodalimgcontaining>div {
      position: relative;
      width: 100%;
      height: 100%;
  }
  .classpage .avatarsmodalimgcontaining img {
      max-width: 100%;
      max-height: 100%;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
  }
  .classpage .avatarsmodalcontaining .photoinfo {
      position: static;
      width: 100%;
      height: 40px;
      min-height: revert;
      margin-top: 15px;
      display: inline-block;
      text-align: left;
      padding-left: 20px;
      padding-bottom: 15px;
      overflow: hidden;
  }
  .classpage .like-passive, .classpage .commentsheader, .classpage .like-active {
      display: inline-block;
      background-size: 30px 30px;
      height: 30px;
      width: 30px;
      margin-right: 5px;
  }
  .classpage span.countcomments, .classpage span.counthearts {
      color: #696969;
      font-size: 16px;
      line-height: 30px;
      display: inline-block;
      height: 30px;
      font-weight: 700;
      margin-right: 20px;
      vertical-align: top;
  }
  .classpage .commentsheader {
      background-image: url(/icons/comments.png);
  }
  .classpage .like-passive {
      background-image: url(/icons/passive-like.png);
      -webkit-transition: background 1s ease;
      -o-transition: background 1s ease;
      transition: background 1s ease;
  }
  .classpage .like-active {
      background-image: url(/icons/active-like.png);
      -webkit-transition: background 1s ease;
      -o-transition: background 1s ease;
      transition: background 1s ease;
  }
  
  
  
  .classpage #photo {
      /* max-width: 100%; */
      /* max-height: calc(var(--display-height) - 100px); */
  }
  .classpage div#crop-contain {
      position: relative;
      /* display: flex; */
      width: 100%;
      height: 100%;
  }
  .classpage canvas#cropframe {
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
  }
  .classpage div#croptopblock {
    position: absolute;
    top: 0;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .classpage div#cropbottomblock {
    position: absolute;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .classpage div#croprightblock {
    position: absolute;
    right: 0;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 10;
  }
  .classpage div#cropleftblock {
    position: absolute;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .classpage div#cropavatarcircle {
    width: 100%;
    height: 100%;
    border: 3px solid white;
    box-sizing: border-box;
    border-radius: 100%;
    position: absolute;
    top: 0;
  }
  .classpage #cropheader,
  .classpage #cropavatar {
      box-sizing: border-box;
      height: 50px;
      font-size: 16px;
      color: #86059c;
      font-weight: bold;
      line-height: 50px;
      text-align: left;
      padding-left: 20px;
      display: none;
  }
  .classpage #toapplyheader,
  .classpage #toapplyavatar {
      width: 50px;
      height: 50px;
      position: absolute;
      font-weight: 700;
      background-color: var(--color-addit);
      bottom: calc(var(--display-height) + 20px);
      right: 20px;
      z-index: 10000;
      border-radius: 100%;
      background-image: url(/icons/applywhite.png);
      background-size: 24px;
      background-repeat: no-repeat;
      background-position: center;
  }
  .classpage #modalwindowcontent > nav {
    display: inline-block;
    width: 35%;
    float: left;
    height: 100%;
    padding-top: 35px;
    padding-left: 30px;
    box-sizing: border-box;
    background-color: var(--color-background-modalnav);
    position: relative;
  }
  .classpage #modalwindowcontent > nav > ul {
    font-size: var(--font-subtitle);
    text-align: left;
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: calc(100% - 107px);
    overflow-y: auto;
    padding-right: 10px;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
  }
  .classpage #modalwindowcontent > nav > ul > li.activemodalnav {
    color: var(--color-modalnav-active);
    border-left: 3px solid var(--color-modalnav-active);
    padding-left: 10px;
  }
  .classpage #modalwindowcontent > nav > ul > li {
    color: var(--color-modalnav);
    cursor: pointer;
    padding-left: 12px;
    line-height: calc(var(--font-subtitle)*2);
    margin-bottom: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .classpage #modalwindowcontent > nav > ul > li:hover {
    color: var(--color-modalnav-active);
  }
  .classpage #modalwindowcontent > nav > ul > li.activemodalnav {
    color: var(--color-modalnav-active);
    border-left: 3px solid var(--color-modalnav-active);
    padding-left: 10px;
  }
  .classpage svg#closemodalwindow {
    width: 20px;
    height: 20px;
    fill: var(--color-gray-light);
    position: absolute;
    top: 12px;
    right: 20px;
    cursor: pointer;
    outline: none;
    z-index: 1000;
  }
  .classpage .modalteachsubjslide {
      display: none;
      width: 100%;
      height: 100%;
      padding-top: 45px;
      box-sizing: border-box;
      overflow-y: auto;
  }
  .classpage .modalteachsubjslide:nth-child(4) {
      display: inline-block;
  }
  .classpage .modalteachsubj-header {
    text-align: center;
    font-size: calc(var(--font-title) + 2px);
    margin-bottom: 10px;
    line-height: calc(var(--font-subtitle)*2);
    position: relative;
    color: var(--color-background-modalnav);
  }
  .classpage .classteachermodal-card {
      width: calc(100%/3 - 15px);
      margin-left: 15px;
      margin-bottom: 20px;
      display: inline-block;
      float: left;
      position: relative;
      cursor: pointer;
  }
  .classpage .classteachermodal-card img {
      width: 65px;
      margin-bottom: 7px;
      border-radius: 100%;
  }
  .classpage .classteachermodal-card span {
      text-align: center;
      display: inline-block;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      height: 52px;
      font-size: 14px;
      font-weight: bold;
      color: black;
  }
  .classpage .classteachermodal-card-add {
    opacity: 0.6;
  }
  .classpage span.checkmark {
    position: absolute;
    width: 25px;
    height: 25px;
    border-radius: 100%;
    background-color: var(--color-addit);
    top: -5px;
    right: -5px;
    background-image: url(/icons/applywhite.png);
    background-size: 25px 25px;
  }
  .classpage .classteachermodal-card-add .checkmark {
    display: none;
  }
  .classpage .classavatarmodalheader {
    height: 55px;
    display: inline-block;
    width: 100%;
    background-color: var(--color-main);
    border-radius: 4px 4px 0 0;
  }
  .classpage .classmodalavatar {
    height: auto;
    display: inline-block;
    margin-top: -4px;
    margin-bottom: -4px;
    position: relative;
    border-radius: 0 0 4px 4px;
    overflow: hidden;
  }
  .classpage .useravatarcontaining {
    width: auto;
    height: auto;
    display: inline-block;
    float: left;
    margin-right: 430px;
  }
  .classpage .useravatarcontaining > img {
    max-width: calc((var(--display-width) - 100px)*0.55);
    max-height: calc(var(--display-height) - 95px);
    margin-bottom: -4px;
  }
  .classpage .modalwindowavatar .photoinfo {
    position: absolute;
    right: 0;
    top: 0;
    padding: 10px;
    box-sizing: border-box;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 430px;
  }
  .classpage .useravatarinfo-container-1 {
    display: inline-block;
    width: 100%;
    height: auto;
  }
  .classpage .photoavatarcomments {
    flex-grow: 3;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
  }
  .classpage .useravatarinfo-container-2 {
    display: inline-block;
    width: 100%;
    height: auto;
  }
  .classpage .classmodalavatar .like-active {
    width: 30px;
    height: 30px;
    background-image: url(/icons/active-like.png);
    background-size: 30px 30px;
    transition: background 1s ease;
    cursor: pointer;
    display: inline-block;
    margin-right: 5px;
    /* margin-top: 10px; */
    margin-left: 102px;
    float: left;
  }
  .classpage .classmodalavatar .like-passive {
    width: 30px;
    height: 30px;
    background-image: url(/icons/passive-like.png);
    background-size: 30px 30px;
    transition: background 1s ease;
    cursor: pointer;
    display: inline-block;
    margin-right: 5px;
    /* margin-top: 10px; */
    margin-left: 100px;
    float: left;
  }
  .classpage .classmodalavatar span.counthearts,
  .classpage .classmodalavatar span.countcomments {
    color: var(--color-gray-darkest);
    font-size: var(--font-main);
    line-height: 30px;
    display: inline-block;
    height: 30px;
    font-weight: bold;
    vertical-align: top;
    margin-right: 25px;
    /* margin-top: 10px; */
    margin-left: 5px;
    float: left;
  }
  .classpage .classmodalavatar span.commentsheader {
    display: inline-block;
    background-image: url(/icons/comments.png);
    background-size: 30px 30px;
    height: 30px;
    width: 30px;
    margin-right: 5px;
    /* margin-top: 10px; */
    float: left;
  }
  .classpage img.toattachemoji {
    display: inline-block;
    bottom: 15px;
    cursor: pointer;
    margin-left: 10px;
    width: 20px;
  }
  .classpage img.tosendcomment {
    width: 20px;
    cursor: pointer;
    margin-left: 10px;
  }
  .classpage main#content {
      box-sizing: border-box;
      display: inline-block;
      width: 100%;
  }
  .classpage div#classheaderinfo {
    position: relative;
    margin-bottom: 0;
    margin-bottom: 10px;
  }
  .classpage div#classheader {
      width: 100%;
      aspect-ratio: 13/5;
      box-sizing: border-box;
      background-color: #fff;
      display: inline-block;
      position: relative;
      border: 1px solid var(--color-gray-lightest);
      border-bottom: none;
      border-radius: 15px 15px 0 0;
      overflow: hidden;
  }
  
  .classpage #classheader > img {
    width: 100%;
    border-radius: 4px 4px 0 0;
  }
  .classpage #classheaderoptions,
  .classpage #aboutclassoptions {
      position: relative;
      display: inline-block;
      float: right;
      z-index: 50000;
  }
  .classpage #openclassheaderoptions {
      display: inline-block;
      background: url(/icons/options.png);
      background-size: 25px;
      height: 25px;
      width: 25px;
      position: absolute;
      top: 5px;
      right: 7px;
  }
  .classpage div#classheaderoptions-content-parent {
      display: none;
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 10000;
      background-color: rgba(0, 0, 0, 0.4);
  }
  .classpage #classheaderoptions-content {
      display: none;
      position: fixed;
      bottom: 9px;
      z-index: 100000;
      width: calc(var(--display-width) - 18px);
      box-sizing: border-box;
      left: 9px;
      top: auto;
      right: 9px;
      border-radius: 4px;
      padding: 10px;
      background-color: #fff;
      color: black;
  }
  .classpage #classheaderoptions-content > ul {
    margin: 0;
    padding: 0;
  }
  .classpage #classheaderoptions-content > ul > li {
    list-style: none;
    padding: 7px;
    font-size: var(--font-notice);
  }
  .classpage #closeheadersoption {
      text-align: center;
      background-color: var(--color-background-input);
      margin-top: 7px;
      border-radius: 4px;
      color: var(--color-addit);
  }
  .classpage #headerinfo {margin-top: -4px;box-sizing: border-box;background-color: #fff;padding: 10px;/* padding-bottom: 5px; */text-align: left;font-size: 20px;color: #86059c;height: auto;border-top: none;position: relative;border-radius: 0 0 15px 15px;border: 1px solid var(--color-gray-lightest);border-top: none;}
  .classpage #classavatar {
      width: calc(var(--display-width)*0.382);
      height: calc(var(--display-width)*0.382);
      /* margin-right: 10px; */
      cursor: pointer;
      border-radius: 100%;
      overflow: hidden;
      box-sizing: border-box;
      position: absolute;
      z-index: 3;
      background-color: white;
      left: calc(50% - var(--display-width)*0.382/2);
      top: calc(10px + var(--display-width)*0.033);
  }
  .classpage #classavatar > div {
      position: relative;
      display: inline-block;
      height: 100%;
  }
  .classpage #classavatar img {
      width: 100%;
      height: 100%;
      border-radius: 100%;
      padding: 3px;
      background: white;
      box-sizing: border-box;
  }
  .classpage #classmaininfo-parent {
      width: 100%;
      /* min-height: 100px; */
      margin-left: auto;
      margin-right: 0;
      /* margin-bottom: 7px; */
      position: relative;
      height: auto;
      /* padding-top: 33px; */
      display: inline-block;
  }
  .classpage div#classmaininfo {
      height: auto;
      width: 100%;
      /* position: absolute; */
      /* top: 50%; */
      /* transform: translate(0, -50%); */
  }
  .classpage div#classmaininfo > span {
      display: inline-block;
      width: 100%;
      vertical-align: top;
      color: #000;
      font-size: 17px;
      line-height: 26px;
      /* margin-bottom: 17px; */
      margin-top: 14px;
      font-weight: bold;
      text-align: center;
  }
  
  
  .classpage ul#classavataroptions {
    display: none;
    font-size: var(--font-notice);
    list-style: none;
    padding: 10px;
    padding-bottom: 3px;
    margin: 0;
    color: black;
    border-top: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    background-color: rgba(230, 241, 255, 0.6);
  }
  .classpage #classavataroptions > li {
    margin-bottom: 3px;
    padding: 7px;
    border-radius: 4px;
  }
  .classpage #classavatar:hover ul {
    display: inline-block;
  }
  .classpage #allclassavatars {
    display: none !important;
  }
  
  .classpage div#classdescription {
    display: inline-block;
    font-size: var(--font-main);
    cursor: text;
    box-sizing: border-box;
    /*padding: 7px 10px;*/
    /*border: 2px solid var(--color-main);*/
    border-radius: 4px;
    min-height: calc(var(--font-main) + 4px);
    height: auto;
  }
  .classpage div#classinfo {
    margin-bottom: 15px;
    background-color: white;
    padding: 15px;
    border-radius: 4px;
    box-sizing: border-box;
  }
  .classpage div#aboutclassheader,
  .classpage div#classcontactsheader,
  .classpage div#classachievementsheader,
  .classpage div#classactionsheader,
  .classpage div#classsubscribersheader,
  .classpage div#classpupilsheader {
    margin-bottom: 10px;
    color: var(--color-addit);
    font-size: var(--font-main);
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 12px;
    text-align: left;
    box-sizing: border-box;
    border-bottom: 1px solid var(--color-addit);
  }
  .classpage span#countsubscribers,
  .classpage span#countpupils,
  .classpage span#countteachers {
    color: var(--color-gray-darkest);
    /* font-weight: bold; */
    display: inline-block;
    margin-left: 7px;
  }
  .classpage div#rightclassblocks {
    float: right;
    width: calc(100% - 285px);
  }
  .classpage div#classpupils,
  .classpage div#classteachers {
    margin-bottom: 15px;
    background-color: white;
    padding: 15px;
    padding-bottom: 5px;
    border-radius: 4px;
    box-sizing: border-box;
    float: right;
    position: relative;
  }
  .classpage .classpupil-card,
  .classpage .classteacher-card,
  .classpage .classsubscriber-card {
      width: calc(100%/3 - 15px);
      margin-left: 15px;
      margin-bottom: 20px;
      display: inline-block;
      float: left;
      position: relative;
      cursor: pointer;
  }
  .classpage .classpupil-card img,
  .classpage .classteacher-card img,
  .classpage .classsubscriber-card img {
      width: 65px;
      margin-bottom: 7px;
      border-radius: 100%;
  }
  .classpage .classpupil-card span,
  .classpage .classteacher-card span,
  .classpage .classsubscriber-card span {
      text-align: center;
      display: inline-block;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      height: 52px;
      font-size: 14px;
      font-weight: bold;
      color: black;
  }
  .classpage button#classteachersedit {
    position: absolute;
    z-index: 25;
    right: 22px;
    top: 22px;
    height: 20px;
    width: 20px;
    padding: 0;
    border: 0;
    background-image: url(/icons/edit.png);
    background-size: 20px 20px;
    background-color: white;
    cursor: pointer;
  }
  .classpage button#tosaveteachers {
      position: absolute;
      bottom: 35px;
      left: 30px;
      width: calc(100% - 60px);
      color: #6E0355;
      background-color: var(--color-modalnav);
      line-height: calc(var(--font-subtitle)*2);
      overflow: hidden;
      text-overflow: ellipsis;
      border-radius: 4px;
      border: none;
      font-size: var(--font-main);
      font-weight: bold;
      cursor: pointer;
  }
  .classpage div#actionbuttons > button:first-child {
    margin-top: 0;
  }
  .classpage button#tosubscribe,
  .classpage button#tounsubscribe {
    display: inline-block;
    width: 100%;
    margin-top: 10px;
    padding: 5px 10px;
    line-height: var(--font-subtitle);
    font-size: var(--font-notice);
    font-weight: bold;
    cursor: pointer;
    border-radius: 4px;
    border: 0px;
  }
  .classpage button#tosubscribe {
    color: white;
    background-color: #f40b0b;
  }
  
  .classpage div#classcounts {
      display: table;
      table-layout: fixed;
      padding: 7px 5px 7px 5px;
      box-sizing: border-box;
      background-color: white;
      /* border-top: 2px solid var(--color-gray-lightest); */
      /* border-bottom: 2px solid var(--color-gray-lightest); */
      margin-bottom: 10px;
      border: 1px solid var(--color-gray-lightest);
      border-radius: 15px;
  }
  
  .classpage .classcounts-children {
      display: table-cell;
      vertical-align: top;
      height: 40px;
  }
  
  .classpage .classcounts-children-number {
      font-size: var(--font-main);
      font-weight: bold;
      display: inline-block;
      width: 100%;
  }
  
  .classpage .classcounts-children-text {
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 13px;
      display: inline-block;
      width: 100%;
  }
  
  .classpage div#newcontent {
      /* margin-bottom: 15px; */
      overflow: hidden;
  }
  .classpage #addingnew, .classpage #newheader {
      width: 100%;
      margin: auto;
      font-size: 0;
  }
  .classpage #newheader {
      display: none;
      padding: 10px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      border: 1px solid #f6f6f6;
      border-bottom: 0;
      font-size: 16px;
      text-align: left;
      background-color: #fff;
      font-family: var(--font-family);
      min-height: calc(41px);
  }
  .classpage #new {
      width: 100%;
      margin: auto;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      padding: 10px;
      border: 1px solid #f6f6f6;
      font-size: 16px;
      background-color: #fff;
      text-align: left;
      font-family: var(--font-family);
      display: block;
      height: auto;
      min-height: 5em;
      max-height: 12em;
      overflow: auto;
      line-height: 1.42857143;
      color: #555;
      resize: none;
  }
  .classpage #row {
      display: none;
  }
  .classpage div#outputMulti:empty {
      padding: 0;
  }
  .classpage #outputMulti {
      display: inline-block;
      height: auto;
      padding: 15px 15px 0;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      background-color: #fff;
  }
  .classpage #attaching {
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      padding: 10px;
      background-color: #fff;
      border: 1px solid #f6f6f6;
      border-top: none;
      display: inline-block;
  }
  .classpage #attachaudio, .classpage #attachdocuments, .classpage #attachheader, .classpage #attachphoto, .classpage #attachvideo {
      height: 30px;
      width: 30px;
      border: 0;
      float: left;
      padding: 0;
      margin-right: 10px;
  }
  .classpage #outputMulti>div, .classpage .editoutputMulti>div {
      width: auto;
      height: auto;
      display: inline-block;
      float: left;
      cursor: pointer;
      margin-right: 10px;
      position: relative;
      margin-bottom: 15px;
      max-height: 100px;
  }
  .classpage .deleteaudio, .classpage .deletedoc, .classpage .deleteimages, .classpage .deletevideo {
      right: 0;
      position: absolute;
      height: 20px;
      width: 20px;
      z-index: 2;
  }
  .classpage .aud-thumbnail, .classpage .img-thumbnail, .classpage .video-thumbnail {
      height: 100px;
      display: inline-block;
      float: left;
      opacity: .9;
      z-index: 1;
      border-radius: 4px;
  }
  .classpage audio.aud-thumbnail {
      height: revert;
      width: 100%;
      margin-top: 0!important;
  }
  .classpage .deletedoc {
      left: 40px;
      top: -5px;
  }
  .classpage .doc-thumbnail, .classpage .newsdoc {
      height: 50px;
      width: 100%;
      display: inline-block;
  }
  .classpage .doc-thumbnail {
      float: left;
      opacity: .9;
      z-index: 1;
      border-radius: 4px;
  }
  .classpage .doc-thumbnail>img, .classpage .newsdoc>img {
      height: 50px;
      display: inline-block;
      margin-right: 20px;
      float: left;
  }
  .classpage span.docname {
      display: inline-block;
      width: calc(100% - 75px);
      margin: 0;
      float: left;
      height: 50px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      text-align: left;
  }
  .classpage .docname>span:nth-child(1) {
      line-height: 30px;
      font-size: 16px;
      color: #000;
      font-weight: 700;
      display: block;
      white-space: nowrap;
      overflow: hidden;
      -o-text-overflow: ellipsis;
      text-overflow: ellipsis;
  }
  .classpage .docname>span:nth-child(2) {
      line-height: 20px;
      font-size: 14px;
      color: #5e5e5e;
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
  }
  .classpage span#addnew {
      float: right;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      font-size: 16px;
      font-weight: 700;
      padding: 10px;
      color: #fff;
      border: 0;
      color: var(--color-main);
      background-color: var(--color-main-light-100);
      cursor: pointer;
      width: 100%;
      margin-top: 15px;
      border-radius: 4px;
  }
  .classpage .allnewsphoto {
      display: none;
  }
  .classpage .newsimg {
      margin-top: 10px;
      position: relative;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      width: 100%;
      margin-bottom: 10px;
  }
  .classpage .newscontaining {
      display: inline-block;
      width: 100%;
      vertical-align: top;
      position: relative;
  }
  .classpage .newscontaining>img, .classpage .newscontaining>video {
      display: inline-block;
      width: 100%;
      margin: auto;
  }
  .classpage .new audio {
      width: 100%;
      margin-bottom: 10px;
  }
  .classpage .newsactions {
      margin-top: 10px;
      border-top: 1px solid var(--color-gray-lightest);
      padding-top: 10px;
  }
  .classpage div#newscomments-parent {
      display: none;
      background: rgba(0, 0, 0, .4);
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 10000000;
  }
  .classpage div#newscomments {
      /* display: none; */
      position: fixed;
      z-index: 1000000;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      margin-bottom: 0;
      overflow-y: hidden;
      background-color: #fff;
      /* margin: 55px 0; */
      /* border-radius: 15px; */
      padding: 0;
      box-sizing: border-box;
  }
  .classpage svg#closecomments {
      width: 25px;
      height: 25px;
      top: 10px;
      position: absolute;
      right: 10px;
      fill: #6b606b;
  }
  .classpage img.tosendcomment {
      height: 25px;
      width: 25px;
      margin-top: 15px;
      margin-bottom: 15px;
      margin-left: 10px;
  }
  .classpage .newsoptions {
      position: relative;
      display: inline-block;
      float: right;
      width: 0;
  }
  .classpage span.opennewsoptions {
      display: inline-block;
      background: url(/icons/options.png);
      background-size: 25px;
      height: 25px;
      width: 25px;
      position: absolute;
      top: 0;
      right: 0;
      cursor: pointer;
  }
  .classpage .newsoptions-content-parent {
      display: none;
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 10000;
      background-color: rgba(0, 0, 0, .4);
  }
  .classpage .newsoptions-content {
      display: none;
      position: fixed;
      bottom: 9px;
      z-index: 100000;
      width: calc(var(--display-width) - 18px);
      box-sizing: border-box;
      left: 9px;
      top: auto;
      right: 9px;
      border-radius: 4px;
      padding: 10px;
      background-color: #fff;
      color: black;
  }
  .classpage .newsoptions-content>ul {
      margin: 0;
      padding: 0;
  }
  .classpage .newsoptions-content>ul>li {
      list-style: none;
      font-size: 14px;
      cursor: pointer;
      white-space: nowrap;
      margin-bottom: 3px;
      padding: 7px;
      border-radius: 4px;
  }
  .classpage li#closenewsoption {
      text-align: center;
      background-color: var(--color-background-input);
      margin-top: 7px;
      border-radius: 4px;
      color: var(--color-addit);
  }
  .classpage .newheader {
      margin-bottom: 5px;
      text-align: center;
      font-size: 18px;
      color: #86059c;
      font-family: 'Montserrat';
      box-sizing: border-box;
      width: 100%;
      border: none;
  }
  .classpage .newheader:empty, .classpage .newtext:empty {
      margin: 0;
      padding: 0;
  }
  .classpage .newtext[contenteditable] {
      min-height: 100px;
  }
  .classpage .editrow {
      display: none;
  }
  .classpage .editattaching, .classpage .editoutputMulti {
      box-sizing: border-box;
      padding: 10px 10px 0;
      display: inline-block;
      height: auto;
  }
  .classpage .editattachaudio, .classpage .editattachdocuments, .classpage .editattachphoto, .classpage .editattachvideo {
      height: 30px;
      width: 30px;
      border: 0;
      float: left;
      padding: 0;
      margin-right: 10px;
  }
  .classpage .editattachaudio>img, .classpage .editattachdocuments>img, .classpage .editattachphoto>img, .classpage .editattachvideo>img {
      height: 30px;
      width: 30px;
  }
  .classpage span.savenew {
      display: inline-block;
      box-sizing: border-box;
      font-size: 16px;
      font-weight: 700;
      height: 40px;
      width: calc(50% - 5px);
      line-height: 40px;
      padding: 0 20px;
      color: #fff;
      border: 0;
      background-color: var(--color-main);
      color: var(--color-main);
      background-color: var(--color-main-light-100);
      cursor: pointer;
      border-radius: 4px;
      text-align: center;
      margin-top: 15px;
  }
  
  .classpage div#classteachers-parent, .classpage div#classpupils-parent, .classpage #editteachersmodal-parent, .classpage #classsubscribers-parent {
      display: none;
      position: fixed;
      z-index: 10000000;
      background-color: rgba(0, 0, 0, .4);
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
  }
  .classpage div#classteachers, .classpage div#classpupils, .classpage div#editteachersmodal, .classpage div#classsubscribers {
      display: block;
      position: fixed;
      z-index: 1000000;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      margin-bottom: 0;
      overflow-y: auto;
      background-color: #fff;
      margin: 0;
      border-radius: 0;
      box-sizing: border-box;
      float: left;
      padding: 15px;
  }
  .classpage div#editteachersmodal {
      padding: 0;
      overflow-y: hidden;
  }
  .classpage svg#closemodalwindowmenu {
      width: 25px;
      height: 25px;
      fill: white;
      position: absolute;
      top: 10px;
      right: 10px;
  }
  .classpage #editteachersmodal nav>ul {
      font-size: var(--font-subtitle);
      text-align: left;
      list-style: none;
      padding: 0;
      margin: 0;
      height: 100%;
      overflow-y: auto;
  }
  .classpage #editteachersmodal nav>ul>li {
      color: #f2f3f4;
      padding-left: 12px;
      margin-bottom: 10px;
      line-height: calc(36px);
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: pointer;
  }
  .classpage #editteachersmodal nav>ul>li.activemodalnav {
      color: #fff;
      border-left: 3px solid #fff;
      padding-left: 10px;
  }
  .classpage #closeclassteachers, .classpage #closeclasspupils, .classpage #closeeditteacherswindow, .classpage #closeclasssubscribers {
      position: absolute;
      width: 25px;
      height: 25px;
      background-image: url(/icons/arrowleft.png);
      background-size: 100%;
      top: 20px;
      left: 15px;
  }
  .classpage #editteachersmodal>nav {
      display: none;
      width: 100%;
      height: 100%;
      padding: 35px;
      box-sizing: border-box;
      background-color: var(--color-main);
      position: relative;
      z-index: 1000;
      padding-top: 35px;
      padding-left: 30px;
      padding-bottom: 110px;
  }
  .classpage img#openteacherseditmenu {
      width: 20px;
      height: 20px;
      position: absolute;
      top: 10px;
      padding: 5px;
      left: 12px;
      outline: 0;
      z-index: 1000;
  }
  .classpage button#classteachersedit, .classpage button#classpupilsedit {
      right: 10px;
      background-image: url(/icons/edit.png);
      top: 55px;
      position: absolute;
      z-index: auto;
      height: 25px;
      width: 25px;
      padding: 0;
      border: 0;
      background-size: 25px 25px;
      background-color: white;
  }
  div#addingpupils-parentblock {
      display: none;
      font-size: 16px;
      text-align: left;
      padding: 0 10px;
      box-sizing: border-box;
      margin-bottom: 20px;
  }
  div#addingpupils-header {
      margin-bottom: 15px;
      line-height: 25px;
      height: 25px;
      position: relative;
  }
  span#addingpupilsheader-counter {
      font-weight: bold;
      margin-left: 5px;
  }
  div#sendingpupilinvite-parent {
      display: inline-block;
      width: 100%;
      height: 25px;
      margin-bottom: 10px;
      position: relative;
  }
  input#pupilsemailadress, input#pupilssurname, input#pupilsname {
      display: inline-block;
      width: calc((100% - 25px)/3 - 10px);
      height: 25px;
      border-radius: 4px;
      border: none;
      background-color: var(--color-background-input);
      margin-right: 10px;
      padding: 0 10px;
      box-sizing: border-box;
  }
  
  img#tosendpupilinvite {
      width: 25px;
      height: 25px;
      position: absolute;
      top: 0;
      right: -10px;
  }
  
  .classpage div#classteachersheader, .classpage div#classpupilsheader, .classpage div#classsubscribersheader {
      color: #86059c;
      margin-bottom: 12px;
      box-sizing: border-box;
      text-align: left;
      line-height: 35px;
      padding: 10px;
      font-weight: bold;
      border-bottom: none;
      font-size: 18px;
      padding-left: 40px;
      padding-top: 0;
  }
  button#classpupilseditclose {
      position: absolute;
      z-index: 25;
      top: 55px;
      height: 25px;
      width: 25px;
      padding: 0;
      border: 0;
      background-size: 25px 25px;
      background-color: #fff;
      right: 10px;
      background-image: url(/icons/close.png);
  }
  .addingpupils-item {
      display: inline-block;
      width: 100%;
      height: 25px;
      margin-bottom: 7px;
      position: relative;
  }
  
  div#addingpupils-children {
      padding-left: 5px;
      box-sizing: border-box;
  }
  
  .addingpupils-item span {
      display: inline-block;
      line-height: 25px;
      font-size: 14px;
      max-width: calc(100% - 50px);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
  }
  
  img.todeletepupilinvite {
      display: inline-block;
      width: 25px;
      height: 25px;
      position: absolute;
      top: 0;
      right: 25px;
  }
  
  img.tosendpupilinviteagain {
      display: inline-block;
      width: 25px;
      height: 25px;
      position: absolute;
      top: 0;
      right: -10px;
  }
  .classpage .modalteachsubj-header {
      text-align: center;
      font-size: 22px;
      margin-bottom: 17px;
      line-height: calc(36px);
      position: relative;
      color: var(--color-main);
  }
  
  div#modalnewsphotosparent, div#modalnewsphotoparent {
      position: fixed;
      display: none;
      top: 0;
      bottom: 0;
      background: rgba(0, 0, 0, .4);
      z-index: 1000000;
  }
  div#modalnewsphotos {
      position: absolute;
      top: 0;
      bottom: 0;
      z-index: 100000;
      left: 0;
      right: 0;
      background: rgba(255, 255, 255, .9);
      border-radius: 0;
  }
  
  .classpage #modalnewsphotos .newsmodalcontaining {
      width: 100%;
      height: 100%;
  }
  
  .setting-block {
      padding: 20px;
      box-sizing: border-box;
      display: inline-block;
  }
  
  .setting-block-header {
      font-size: 17px;
      font-weight: bold;
      text-align: left;
      margin-bottom: 20px;
      display: inline-block;
  }
  
  .settingspage #setting-block-safety input[type="password"] {
      display: block;
      box-sizing: border-box;
      margin-bottom: 15px;
      padding: 15px 20px;
      border: 1px solid var(--color-main);
      border-radius: 15px;
      font-size: 14px;
      width: 100%;
  }
  
  .settingspage button#tosavepassword {
      float: left;
      box-sizing: border-box;
      font-size: var(--font-main);
      font-weight: bold;
      padding: 9px 10px;
      color: white;
      border: none;
      background-color: var(--color-main);
      cursor: pointer;
      border-radius: 15px;
      width: 100%;
      margin-bottom: 40px;
  }
  
  .settingspage div#activesessions>div {
      display: inline-block;
      margin-bottom: 15px;
      text-align: left;
      padding: 15px;
      box-sizing: border-box;
      border-radius: 15px;
      cursor: pointer;
      background-color: var(--color-background-input);
  }
  
  .settingspage div#activesessions>div>span:nth-child(1) {
      display: inline-block;
      width: 100%;
      margin-bottom: 7px;
      font-size: 16px;
      font-weight: bold;
  }
  
  .settingspage span.currentsession {
      display: inline-block;
      line-height: 20px;
      font-size: 14px;
      font-weight: normal;
      float: right;
      color: #0CC434;
  }
  
  .settingspage div#activesessions>div>span:nth-child(2) {
      font-size: 14px;
      display: inline-block;
  }
  
  
  .userintereststitle {
      display: inline-block;
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 5px;
      width: 100%;
  }
  
  .userinterestssubtitle {
      font-size: 13px;
      display: inline-block;
      margin-bottom: 7px;
  }
  
  #editinterests .userintereststitle {
      display: inline-block !important;
  }
  
  #editinterests .userinterestssubtitle {
      display: inline-block !important;
  }
  
  
  div#installappmodalparent {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: rgba(0, 0, 0, .4);
      z-index: 1000000;
  }
  
  div#installappmodal {
      background-color: white;
      position: absolute;
      bottom: 15px;
      left: 15px;
      right: 15px;
      width: calc(100% - 30px);
      border-radius: 15px;
      display: inline-block;
      height: auto;
      box-sizing: border-box;
  }
  
  svg#closeinstallappmodal {
      position: absolute;
      right: 5px;
      top: 5px;
      z-index: 1000000;
  }
  
  #installappmodal span {
      display: inline-block;
      margin: 70px 15px 20px 15px;
      font-size: 15px;
  }
  
  button#toinstallapp {
      display: block;
      margin: auto;
      margin-bottom: 15px;
      border-radius: 15px;
      border: none;
      padding: 7px 21px;
      font-weight: bold;
      color: white;
      background-color: #48038c;
      font-size: 15px;
  }
  
  img#installappmodalicon {
      width: 100px;
      height: 100px;
      display: block;
      top: -50px;
      left: calc(50% - 50px);
      background-size: 100px 100px;
      border: none;
      z-index: 10000000;
      position: absolute;
      background-color: white;
      padding: 5px;
      box-sizing: border-box;
      border-radius: 15px;
      background-color: var(--color-background-main);
  }
  
  div#turnnotificationsparentblock {
      text-align: left;
  }
  
  #turnnotificationsspan {
      display: inline-block;
      height: 34px;
      line-height: 34px;
      vertical-align: top;
      margin-right: 15px;
  }
  
  .switch-btn {
    display: inline-block;
    width: 62px; /* ширина переключателя */
    height: 24px; /* высота переключателя */
    border-radius: 12px; /* радиус скругления */
    background: #bfbfbf; /* цвет фона */
    z-index: 0;
    margin: 0;
    padding: 0;
    border: none;
    cursor: pointer;
    position: relative;
    transition-duration: 300ms; /* анимация */
    margin-top: 5px;
    margin-left: 10px;
  }
  .switch-btn::after {
    content: "";
    height: 34px; /* высота кнопки */
    width: 34px; /* ширина кнопки */
    border-radius: 18px; /* радиус кнопки */
    background: #fff; /* цвет кнопки */
    top: -6px; /* положение кнопки по вертикали относительно основы */
    left: -6px; /* положение кнопки по горизонтали относительно основы */
    transition-duration: 300ms; /* анимация */
    box-shadow: 0px 0px 10px 0px #999999; /* тень */
    position: absolute;
    z-index: 1;
  }
  .switch-on {
    background: #fff;
    box-shadow: inset 0 0 10px 0 #999999; /* тень */
  }
  .switch-on::after {
    left: 30px;
    background: #ce8fd6;
  }
  
  span.messagetext ~ .messageimg {
      margin-top: 0;
  }
  
  .newsauthorblock {
      display: inline-block;
      width: 100%;
      padding: 0 10px;
      box-sizing: border-box;
      font-weight: bold;
      color: var(--color-main);
      margin-top: 5px;
  }
  
  .newsauthorblock a {
      height: 30px;
      color: black !important;
      display: inline-block;
      line-height: 24px;
      vertical-align: top;
      font-size: 13px;
  }
  
  .newsauthorblock img {
      height: 30px;
      border-radius: 100%;
  }
  
  .newsauthorblock span {
      display: inline-block;
      height: 30px;
      vertical-align: top;
      margin-left: 10px;
      font-weight: bold;
      line-height: 30px;
  }
  
  div#complainmodalparent {
      position: fixed;
      z-index: 1000000;
      background-color: rgba(0, 0, 0, .4);
      left: 0;
      top: 0;
      bottom: 0;
      padding: 20px;
      box-sizing: border-box;
  }
  
  div#complainmodal {
      position: fixed;
      z-index: 1000000;
      background-color: white;
      /* border-radius: 15px; */
      left: 0;
      top: 0;
      bottom: 0;
      padding: 20px;
      box-sizing: border-box;
  }
  
  div#complainmodalheader {
      display: inline-block;
      width: 100%;
      text-align: left;
      font-size: 18px;
      line-height: 25px;
      font-weight: bold;
      color: var(--color-addit);
      margin-bottom: 20px;
      overflow: hidden;
      text-overflow: ellipsis;
  }
  
  button#tosendcomplaint {
      height: 35px;
      margin-top: 20px;
      width: 100%;
      border-radius: 4px;
      border: none;
      color: var(--color-main);
      background-color: var(--color-main-light-100);
      font-weight: bold;
  }
  
  div#complainmodalcontent {
      text-align: left;
      height: calc(100% - 100px);
      /* padding: 0 15px; */
      box-sizing: border-box;
      overflow-y: auto;
  }
  
  .choosecomplaint-checkbox {
      display: inline-block;
      width: 100%;
      text-align: left;
      margin-bottom: 10px;
      font-size: 15px;
  }
  
  textarea[name="complaintext"] {
      display: inline-block;
      margin-top: 10px;
      width: 100%;
      box-sizing: border-box;
      border: none;
      background-color: var(--color-background-input);
      padding: 7px 10px;
      resize: none;
      border-radius: 4px;
  }
  
  svg#closecomplainmodal {
      display: inline-block;
      position: absolute;
      width: 25px;
      height: 25px;
      padding: 0;
      margin: 0;
      border: none;
      fill: #6b606b;
      top: 10px;
      right: 10px;
  }
  
  button#userfioedit {
      right: 0;
      top: 0;
  }
  
  #tosaveuserfio {
      top: 11px;
      right: 0;
  }
  
  div#usermaininfo input {
      display: inline-block;
      height: 35px;
      box-sizing: border-box;
      border: none;
      background-color: var(--color-background-input);
      border-radius: 4px;
      margin-right: 10px;
      width: calc(50% - 25px);
      margin-top: 7px;
      padding: 0 10px;
  }
  
  div#usermaininfo input[name = 'nickname'] {
      width: 100%;
      margin-bottom: 20px;
  }
  
  span#userfionickname {
      font-size: 15px;
  }
  
  span#toswiperecleftnote {
      display: inline-block;
      height: 38.5px;
      line-height: 38.5px;
      margin-left: 50px;
      font-size: 14px;
      font-weight: bold;
      color: var(--color-gray-darkest);
      vertical-align: bottom;
  }
  
  span#recpoint {
      height: 17px;
      display: inline-block;
      width: 17px;
      margin-right: 10px;
      background-image: url('/icons/audio-red.png');
      background-size: 17px;
      margin-top: 10.75px;
  }
  
  span#topinrecordmsg {
      background-color: var(--color-background-main);
      border-radius: 100%;
      background-position: center;
      background-repeat: no-repeat;
      position: absolute;
      width: 40px;
      height: 40px;
      top: -60px;
      right: -45px;
      background-image: url(/icons/lock.png);
      background-size: 30px;
  }
  
  span#tocancelrecordlonghold {
      color: var(--color-main);
      font-weight: bold;
      display: inline-block;
      height: 38.5px;
      vertical-align: bottom;
      line-height: 38.5px;
      text-transform: uppercase;
      font-size: 15px;
  }
  
  .blognewheader {display: none;padding: 10px;-webkit-box-sizing: border-box;box-sizing: border-box;border: 1px solid #f6f6f6;border-bottom: 0;font-size: 16px;text-align: left;background-color: #fff;font-family: var(--font-family);min-height: calc(41px);}
  
  div#newcontentblog {
      margin-bottom: 10px;
      overflow: hidden;
  }
  
  div#addingnewblog {
      width: 100%;
      margin: auto;
      font-size: 0;
  }
  
  .blognew {
      width: 100%;
      margin: auto;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      padding: 10px;
      border: 1px solid #f6f6f6;
      font-size: 16px;
      background-color: #fff;
      text-align: left;
      font-family: var(--font-family);
      display: block;
      height: auto;
      min-height: 5em;
      max-height: 12em;
      overflow: auto;
      line-height: 1.42857143;
      color: #555;
      cursor: text;
      resize: none;
  }
  
  .blogrow {
      display: none;
  }
  
  .blogoutputMulti {
      display: inline-block;
      height: auto;
      padding: 15px 15px 0;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      background-color: #fff;
  }
  
  .blogoutputMulti:empty {
      padding: 0;
  }
  
  .blogoutputMulti>div {
      width: auto;
      height: auto;
      display: inline-block;
      float: left;
      cursor: pointer;
      margin-right: 10px;
      position: relative;
      margin-bottom: 15px;
      max-height: 100px
  }
  
  .blogoutputMulti>div.loaditem {
      width: 100px;
      padding: 35px;
      box-sizing: border-box
  }
  
  .blogoutputMulti>div.loaditem {
      height: 100px;
      display: inline-block
  }
  
  .blogattaching {
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      padding: 10px;
      background-color: #fff;
      border: 1px solid #f6f6f6;
      border-top: none;
      display: inline-block;
  }
  
  .blogattachaudio, 
  .blogattachdocuments,
  .blogattachheader, 
  .blogattachphoto, 
  .blogattachvideo {
      height: 30px;
      width: 30px;
      border: 0;
      float: left;
      padding: 0;
      margin-right: 10px;
      cursor: pointer;
  }
  
  span#addnewblog {
      float: right;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      font-size: 16px;
      font-weight: 700;
      padding: 10px;
      color: #fff;
      border: 0;
      color: var(--color-main);
      background-color: var(--color-main-light-100);
      cursor: pointer;
      width: 100%;
      margin-top: 15px;
      border-radius: 4px;
  }
  
  div#publisheverywhereparentblock {
      text-align: left;
      display: inline-block;
      margin-top: 10px;
  }
  
  span#publisheverywherespan {
      display: inline-block;
      height: 24px;
      line-height: 24px;
      vertical-align: top;
      margin-right: 15px;
      font-size: 14px;
  }
  
  #publisheverywhere {
      display: inline-block;
      width: 52px;
      height: 16px;
      border-radius: 12px;
      background: #bfbfbf;
      z-index: 0;
      margin: 0;
      padding: 0;
      border: none;
      cursor: pointer;
      position: relative;
      transition-duration: 300ms;
      margin-top: 5px;
      margin-left: 10px;
  }
  
  #publisheverywhere::after {
      content: "";
      height: 24px;
      width: 24px;
      border-radius: 18px;
      background: #fff;
      top: -4px;
      left: -4px;
      transition-duration: 300ms;
      box-shadow: 0 0 10px 0 #999999;
      position: absolute;
      z-index: 1;
  }
  
  #publisheverywhere.switch-on {
      background: #fff;
      box-shadow: inset 0 0 10px 0 #999999;
  }
  
  #publisheverywhere.switch-on::after {
      left: 30px;
      background: #ce8fd6;
  }
  
  input.newheader {
      box-sizing: border-box;
      resize: none;
      width: 100%;
      border: 0;
  }
  
  .newtext {
      box-sizing: border-box;
      resize: none;
      width: 100%;
      border: 0;
      /* margin-bottom: 10px; */
      padding: 10px;
      padding-top: 0;
      text-align: left;
      color: black;
  }
  
  
  
  .slick-track {
      display: flex !important;
      height: auto !important;
      /* transition: transform 500ms ease 0s !important; */
  }
  
  .slick-slide {
      /* height: fit-content !important; */
  }
  
  #answeredmessage img.emoji {
      height: 16px !important;
      width: 16px !important;
  }
  
  .shepherd-text {
      font-weight: bold;
      line-height: 25px !important;
      font-size: 14px !important;
  }
  
  .stepusername {
      color: var(--color-main);
  }
  
  .shepherd-header h3 {
      font-size: 16px !important;
      color: var(--color-main);
      font-weight: bold;
      font-style: italic;
  }
  
  .example-step-extra-class {
      border-width: 2px;
      border-style: ridge;
      border-color: var(--color-main);
  }
  
  button.shepherd-button {
      background-color: var(--color-main);
      border: 4px;
      color: white;
  }
  
  .shepherd-element {
      z-index: 10000000 !important;
  }
  
  header.shepherd-header {
      padding: 10px !important;
  }
  
  .dialogspage  div#aboutgroupmodal {margin: 0;border-radius: 0;padding: 0;}
  
  button#closeaboutgroupmodal {
      width: 25px;
      height: 25px;
      fill: #6b606b;
      position: absolute;
      top: 10px;
      left: 15px;
      cursor: pointer;
      outline: 0;
      z-index: 1000;
      border: 0;
      background-image: url(/icons/arrowleft.png);
      background-size: 25px 25px;
      background-color: initial;
  }
  
  span.countgroupmembersheader {
      margin-left: 15px;
      display: block;
      text-align: left;
      font-size: var(--font-notice);
      color: var(--color-gray-dark);
      box-sizing: border-box;
      font-weight: bold;
      line-height: 18px;
  }
  
  .groupinfodesc {
      background-color: white;
      padding: 15px 0;
      box-shadow: 0 0 10px 3px rgb(221 221 221);
      display: inline-block;
      margin-bottom: 15px;
      padding-left: 20px;
      box-sizing: border-box;
  }
  
  .groupinfodesc:empty {
      display: none;
  }
  
  span#changedescription {
      display: inline-block;
      width: 100%;
      cursor: pointer;
      box-sizing: border-box;
      font-weight: bold;
      font-size: calc(var(--font-main) - 1px);
      text-align: left;
  }
  
  .groupmembersparent, #subgroupsparent, #subgroupsrequestsblock, #subgroupsactionsblock {
      background-color: white;
      box-shadow: 0 0 10px 3px rgb(221 221 221);
      padding: 15px 0;
      margin-bottom: 15px;
  }
  
  .politicsblock {
      text-align: left;
      font-size: 14px;
      line-height: 25px;
  }
  
  .row {
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -ms-flex-wrap: wrap;
      -webkit-flex-wrap: wrap;
      flex-wrap: wrap;
      margin-right: -15px;
      margin-left: -15px;
  }
  
  .mb-4 {
      margin-bottom: 24px!important;
  }
  
  .col {
      position: relative;
      width: 100%;
      min-height: 1px;
      padding-right: 15px;
      padding-left: 15px;
      -ms-flex-preferred-size: 0;
      -webkit-flex-basis: 0;
      flex-basis: 0;
      -ms-flex-positive: 1;
      -webkit-flex-grow: 1;
      flex-grow: 1;
      max-width: 100%;
  }
  
  dl, h1, h2, h3, h4, h5, p {
      margin-top: 0;
  }
  
  .h1, .h2, .h3, .h4, .h5, h1, h5 {
      font-weight: 500;
  }
  
  .h1, .h2, .h3, .h4, .h5, h1, h2, h3, h4 {
      margin-bottom: 8px;
  }
  
  .h1, .h2, .h3, .h4, .h5, h1, h2, h3, h4, h5 {
      font-family: inherit;
      line-height: 1.1;
      color: inherit;
  }
  
  .h4, h4 {
      font-size: 23px;
  }
  
  h2, h3, h4 {
      font-weight: 300;
  }
  
  .h5, h5 {
      font-size: 19px;
  }
  
  h5 {
      display: block;
  }
  
  .descr, h5 {
      margin-bottom: 24px;
  }
  
  .ol {
      margin-bottom: 16px;
      padding-left: 28px;
  }
  
  span.countsameinterests {
      cursor: pointer;
      text-decoration: underline dotted;
  }
  
  div.countsameintereststip {
      display: none !important;
  }
  
  .userinterests-card {
      display: inline-block;
      box-sizing: border-box;
      width: calc(100%/4 - 5px);
      height: 87px;
      overflow: hidden;
      margin-bottom: 10px;
      margin-left: 5px;
      white-space: nowrap;
      text-overflow: ellipsis;
      text-align: center;
      color: #213021;
      position: relative;
      cursor: pointer;
      font-size: 12px;
  }
  
  .userinterests-card>span>span:first-child {
      font-weight: 700
  }
  .userinterests-card>span {
      display: inline-block;
      width: 100%;
      height: 33px;
      overflow: hidden;
      text-overflow: ellipsis
  }
  
  .searchpage .userinterests-card>span {
      height: auto;
  }
  
  .searchpage .userinterests-card {
      height: auto;
  }
  
  .userinterests-card>span>span {
      vertical-align: middle
  }
  
  .linkspage ~ div .tippy-arrow {
      color: #f6f6f6;
  }
  
  .linkspage ~ div .tippy-content {
      background: #f6f6f6;
      padding-top: 20px;
      z-index: 10;
      width: 100%;
      box-sizing: border-box;
  }
  
  .linkspage ~ div .tippy-box {
      overflow: hidden;
      border-radius: 15px;
      max-width: initial !important;
  }
  
  div#profileblockmenu-avatar img {
      width: 70px;
      height: 70px;
      border-radius: 100%;
  }
  
  div#profileblockmenu-avatar {
      display: inline-block;
      float: left;
      width: auto;
      margin-bottom: -4px;
  }
  
  div#profileblockmenu {
      display: inline-block;
      width: calc(100% - 20px);
      margin-left: 10px;
      float: left;
      margin-bottom: 15px;
      padding: 10px 15px;
      box-sizing: border-box;
      border-radius: 15px;
      background: #ebe3f5;
      border: 1px solid var(--color-gray-lightest);
  }
  
  div#profileblockmenu-name {
      display: inline-block;
      width: 100%;
      height: 40px;
      line-height: 40px;
      text-align: left;
      font-weight: bold;
      font-size: 4.5vw;
      margin-bottom: -4px;
  }
  
  .settingspage div#profileblockmenu {
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-top: 10px;
      margin-bottom: 15px;
  }
  
  div#profileblockmenu-progress {display: inline-block;height: 70px;margin-top: 7px;width: 100%;float: right;text-align: left;position: relative;}
  
  div#profileblockmenu-progress-line {
      display: inline-block;
      height: 10px;
      width: calc(100% - 64px);
      float: right;
      background: #d0408e;
      border-radius: 20px;
      position: relative;
      overflow: hidden;
      margin-top: 17px;
      margin-bottom: 17px;
      margin-right: 32px;
  }
  
  div#profileblockmenu-progress-line-gray {
      position: absolute;
      top: 0;
      right: 0;
      height: 10px;
      background-color: #c0c0c0;
  }
  
  div.profileblockmenu-progress-bage {
      font-size: 20px;
      font-weight: bold;
      position: absolute;
      width: 34px;
      height: 34px;
      line-height: 34px;
      text-align: center;
      z-index: 9;
      top: 5px;
      border-radius: 100%;
      color: white;
  }
  div#profileblockmenu-progress-bage-begin {
      background: #26b226;
  }
  div#profileblockmenu-progress-bage-end {
      right: 0;
      background: #008000;
  }
  
  div#profileblockmenu-progress-span {
      display: inline-block;
      font-size: 12px;
  }
  
  div#profileblockmenu-balance {
      display: inline-block;
      width: calc(100% - 90px);
      text-align: left;
      float: right;
      height: 30px;
      line-height: 30px;
  }
  
  div#profileblockmenu-balance-child {
      width: auto;
      display: inline-block;
      background: white;
      padding: 5px 12px;
      border-radius: 15px;
      height: 20px;
  }
  
  div#profileblockmenu-balance-child span {
      display: inline-block;
      margin-left: 12px;
      height: 20px;
      line-height: 20px;
      vertical-align: top;
      font-weight: bold;
  }
  
  div#profileblockmenu-balance-coin {
      background: url(/icons/coin.png);
      height: 20px;
      width: 20px;
      background-size: 100%;
      display: inline-block;
  }
  
  .page.menupage {height: auto;min-height: initial  !important;}
  
  div#profileblockmenu-balance-info {
      display: inline-block;
      height: 30px;
      width: 30px;
      float: right;
      background: url(/icons/info.png);
      background-size: 100%;
      box-sizing: border-box;
  }
  
  div#profileblockmenu-balance-tasks {
      display: inline-block;
      width: 30px;
      height: 30px;
      float: right;
      background: url(/icons/tasks.png);
      background-size: 100%;
      margin-right: 10px;
  }
  
  div#profileblockmenu-taskslist {
      display: none;
  }
  
  ul#profileblockmenu-taskslist-ul {
      box-sizing: border-box;
      width: 100%;
      padding-left: 40px;
      list-style: none;
  }
  
  ul#profileblockmenu-taskslist-ul li {
      margin-bottom: 7px;
      line-height: 21px;
      position: relative;
  }
  
  ul#profileblockmenu-taskslist-ul li img {
      position: absolute;
      width: 19px;
      height: 19px;
      left: -28px;
      top: 2px;
      
  }
  
  ul#profileblockmenu-taskslist-ul li:before {
      content: '';
      height: 21px;
      width: 21px;
      border: 1px solid aliceblue;
      border-radius: 4px;
      display: inline-block;
      position: absolute;
      left: -30px;
  }
  
  .tippy-content {
      box-sizing: border-box;
      width: auto;
      display: inline-block;
  }
  
  .settingspage div#setting-block-account {
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-bottom: 20px;
      padding: 0;
      background: white;
      border-radius: 15px;
      border: 1px solid var(--color-gray-lightest);
  }
  
  div.setting-block-account-elem {
      text-align: left;
      border-bottom: 1px solid var(--color-gray-lightest);
      padding-bottom: 12px;
      padding-left: 15px;
      box-sizing: border-box;
      padding-top: 10px;
      position: relative;
  }
  
  div.setting-block-account-elem span {
      display: inline-block;
      width: 100%;
  }
  
  @media(hover: hover) {
      div.setting-block-account-elem:hover {
          background: #fbfbfb;
      }
  }
  
  div.setting-block-account-elem span:nth-child(1) {
      margin-bottom: 7px;
      color: #9c9fb1;
      font-weight: bold;
      font-size: 13px;
  }
  
  div.setting-block-account-elem span:nth-child(2) {
      margin-bottom: 3px;
      font-size: 15px;
  }
  
  div.setting-block-account-elem span:nth-child(3) {
      font-size: 12px;
      color: #aa3db9;
  }
  
  div#setting-block-account .setting-block-header {
      padding-left: 15px;
      padding-top: 15px;
      margin-bottom: 10px;
      box-sizing: border-box;
  }
  
  div#setting-block-account-nickname {
      border-bottom: none;
  }
  
  div#changeemailmodal, div#changenumbermodal, div#changenicknamemodal, div#changecitymodal {
      display: none;
      position: fixed;
      height: 100%;
      top: 0;
      bottom: 0;
      background: white;
      z-index: 100000;
      transition: display 2s;
      padding: 25px;
      box-sizing: border-box;
  }
  
  button#toclosechangeemailmodal, button#toclosechangenumbermodal, button#toclosechangenicknamemodal, button#toclosechangecitymodal {
      width: 25px;
      height: 25px;
      border: none;
      background-color: initial;
      background-image: url(/icons/arrowleft.png);
      background-size: 100%;
      float: left;
  }
  
  div#changeemailmodalheader, div#changenumbermodalheader, div#changenicknamemodalheader, div#changecitymodalheader {
      margin-top: 100px;
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 25px;
  }
  
  div#changeemailmodalnotice, div#changenumbermodalnotice, div#changenicknamemodalnotice, div#changecitymodalnotice {
      margin-bottom: 50px;
      color: #646464;
  }
  
  #changeemailmodalinputs input, #changenumbermodalinputs input, #changenicknamemodal input {
      width: calc(100% - 55px);
      border: 1px solid var(--color-main);
      border-radius: 15px;
      box-sizing: border-box;
      padding: 15px;
      font-size: 16px;
      display: inline-block;
      float: left;
      height: 50px;
  }
  
  div#changecitymodalinputs .select2-container {
      width: 100% !important;
  }
  
  div#changecitymodalinputs .select2-container .select2-selection {
      width: 100%;
      border-radius: 15px;
      box-sizing: border-box;
      font-size: 16px;
      display: inline-block;
      float: left;
  }
  
  button#tosendchangeemail, button#tosendchangenumber, button#tosendchangenumbercode, button#tosendchangenickname, button#tosendchangecity {
      width: 40px;
      height: 40px;
      border: none;
      float: right;
      background-color: #40ADFF;
      background-image: url(/icons/arrowright-white.png);
      background-size: 25px 25px;
      background-position: 7.5px 7.5px;
      background-repeat: no-repeat;
      border-radius: 100%;
      margin-top: 5px;
  }
  
  div#changenumbermodalinputs, div#changenicknamemodalinputs, div#changeemailmodalinputs, div#changecitymodalinputs {
      display: inline-block;
      margin-bottom: 30px;
      position: relative;
  }
  
  span#changenumbermodalattention, span#changecitymodalattention, span#changeemailmodalattention, span#changenicknamemodalattention {
      font-size: 14px;
      color: #c62c1a;
      font-weight: bold;
  }
  
  span#changenumbermodaltip, span#changeemailmodaltip {
      font-size: 13px;
      color: #787878;
      display: inline-block;
  }
  
  .setting-block-notice {font-size: 14px;margin-bottom: 20px;color: #64747e;text-align: left;}
  
  button#tosharereferral {
      width: 100%;
      border: none;
      padding: 8px 0;
      border-radius: 15px;
      background: #d0408e;
      color: white;
      font-weight: bold;
      height: 32px;
      width: calc(100% - 42px);
      display: inline-block;
      float: right;
  }
  
  div#setting-block-share {
      background-color: #e6f6e6;
      border-radius: 15px;
      width: calc(100% - 40px);
      padding: 15px 15px;
      margin: 0 20px 15px 20px;
      box-sizing: border-box;
      border: 1px solid var(--color-gray-lightest);
  }
  
  button#tocopyreferrallink {
      float: left;
      border: none;
      width: 32px;
      height: 32px;
      display: inline-block;
      background-color: initial;
      background-image: url(/icons/copy.png);
      background-size: 100%;
  }
  
  #profileblockmenu > a {
      display: inline-block;
      width: calc(100% - 90px);
      float: right;
  }
  
  .tippy-box {
      display: inline-block;
      width: auto;
      z-index: 10000000;
  }
  
  span.account-email-notconfirm:after, span.account-telephone-notconfirm:after {
      position: absolute;
      width: 24px;
      height: 24px;
      background: #e6d061;
      content: '!';
      text-align: center;
      line-height: 25px;
      color: white;
      top: calc(50% - 12px);
      right: 20px;
      border-radius: 100%;
  }
  
  div#regionselect, div#cityselect {
      display: inline-block;
      width: calc(100% - 55px);
      float: left;
  }
  
  div#regionselect {
      margin-bottom: 10px;
  }
  
  button#tosendchangecity {
      position: absolute;
      right: 0;
      top: calc(50% - 20px);
  }
  
  .select2-container {
      z-index: 100000;
  }
  
  .educatcard .select2-container {
      z-index: 1000;
  }
  
  .setting-block-modal {
      display: none;
  }
  
  div#setting-block-menu {
      padding: 0;
      margin-left: 20px;
      margin-right: 20px;
      width: calc(100% - 40px);
      background-color: white;
      border-radius: 15px;
      margin-bottom: 20px;
      border: 1px solid var(--color-gray-lightest);
  }
  
  div#setting-block-menu .setting-block-header {
      padding-left: 15px;
      padding-top: 15px;
      margin-bottom: 10px;
      box-sizing: border-box;
  }
  
  .setting-block-menu-child {
      text-align: left;
      border-bottom: 1px solid var(--color-gray-lightest);
      padding-bottom: 12px;
      padding-left: 25px;
      box-sizing: border-box;
      padding-top: 10px;
      position: relative;
      color: #9c9fb1;
      font-weight: bold;
      font-size: 14px;
  }
  
  .setting-block-modal {padding: 20px;box-sizing: border-box;position: fixed;top: 0;bottom: 0;background: white;z-index: 100000;overflow-y: auto;}
  
  .setting-block-modal-header {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 20px;
      text-align: left;
      line-height: 25px;
      height: 25px;
      vertical-align: top;
  }
  
  .setting-block-modal-header-return {
      width: 25px;
      height: 25px;
      display: inline-block;
      margin-right: 20px;
      background-image: url(/icons/arrowleft.png);
      background-size: 100%;
  }
  
  .setting-block-modal-header span {
      vertical-align: top;
  }
  
  .setting-block-menu-child img {
      width: 25px;
   margin-right: 15px;
  }
  
  .setting-block-menu-child a {
      height: 25px;
      display: inline-block;
  }
  
  .setting-block-menu-child a span {
      height: 25px;
      display: inline-block;
      vertical-align: top;
      line-height: 25px;
      color: #9c9fb1;
      font-weight: bold;
  }
  
  div#likesmodalparent {position: fixed;top: 0;bottom: 0;left: 0;right: 0;background: white;z-index: 10000000;display: none;}
  
  div#likesmodalheader {
      height: 50px;
      line-height: 50px;
      box-sizing: border-box;
      padding: 17px 15px 3px 15px;
      display: inline-block;
      text-align: left;
      margin-bottom: 20px;
  }
  
  div#likesmodalclose {
      height: 23px;
      width: 23px;
      display: inline-block;
      float: left;
      background-image: url(/icons/arrowleft.png);
      background-size: 100%;
      margin-right: 20px;
      margin-top: 4px;
  }
  
  #likesmodalheader>span {
      height: 30px;
      line-height: 30px;
      display: inline-block;
      vertical-align: top;
      color: black;
      font-weight: bold;
      font-size: 18px;
  }
  
  span#likesmodalheadercount {
      color: var(--color-gray-light);
      font-size: 16px;
      margin-left: 13px;
      vertical-align: top;
      line-height: 30px;
      display: inline-block;
  }
  
  .likesmodalcontentelem img {
      width: 30px;
      height: 30px;
      border-radius: 100%;
      vertical-align: top;
  }
  
  div#likesmodalcontent {
      height: calc(100% - 65px);
      box-sizing: border-box;
      padding: 15px;
      padding-right: 0;
      padding-top: 0;
      display: inline-block;
      text-align: left;
  }
  
  .likesmodalcontentelem {
      width: calc(100% - 20px);
      display: inline-block;
      margin-right: 9px;
      font-size: 14px;
      height: 46px;
      /* border: 1px solid var(--color-gray-lightest); */
      border-radius: 15px;
      padding: 7px;
      box-sizing: border-box;
      vertical-align: top;
      box-shadow: 0 0 10px 0.5px rgb(231 231 231);
      margin-bottom: 8px;
  }
  
  .likesmodalcontentelem span {
      display: inline-block;
      width: calc(100% - 45px);
      margin-left: 8px;
      vertical-align: top;
      font-size: 12px;
      /* vertical-align: middle; */
      line-height: 30px;
      color: black;
      font-weight: 500;
  }
  
  div#toshownotifications {
      display: inline-block;
      width: 35px;
      height: 35px;
      background-image: url(/icons/bell.png);
      background-size: 27px 27px;
      background-repeat: no-repeat;
      float: right;
      box-sizing: border-box;
      background-position: 4px;
      margin-right: 3px;
      position: relative;
  }
  
  #toshownotifications a {
      width: 100%;
      height: 100%;
      display: inline-block;
  }
  
  .notification-block {
      background: white;
      box-sizing: border-box;
      padding: 10px;
      height: auto;
      display: inline-block;
      margin-bottom: -4px;
  }
  
  .notification-block:last-child {
      margin-bottom: 15px;
  }
  
  .notification-block + #notificationsblockheader-seen {
      margin-top: 15px;
  }
  
  .notification-block-avatar {
      display: inline-block;
      width: 50px;
      height: 50px;
      float: left;
      margin-right: 15px;
      position: relative;
  }
  
  img.notification-block-avatar-single {
      width: 50px;
      border-radius: 100%;
  }
  
  .notification-block-img {
      display: inline-block;
  }
  .notification-block-img img {
      border-radius: 4px;
      width: 100%;
  }
  
  span.notification-block-text {
      display: inline-block;
      font-size: 13px;
      vertical-align: top;
      text-align: left;
      margin-top: 5px;
      float: left;
  }
  
  .notification-block-img-horizontal {
      width: 65px;
      float: right;
  }
  
  .notification-block-img-none {
      width: 0;
      float: right;
      display: none;
  }
  
  img.notification-block-avatar-double {
      position: absolute;
      width: 32px;
      height: 32px;
      border-radius: 100%;
  }
  img.notification-block-avatar-double:nth-child(1) {
      top: 0;
      left: 0;
  }
  img.notification-block-avatar-double:nth-child(2) {
      bottom: 0;
      right: 0;
  }
  .notification-block-img-vertical {
      width: 50px;
  }
  
  .notification-block-buttons {
      display: inline-block;
      padding-top: 5px;
  }
  
  .notification-block-buttons button {
      width: calc(50% - 5px);
      box-sizing: border-box;
      border: none;
      padding: 5px 0;
      border-radius: 4px;
      font-size: 12px;
      font-weight: bold;
  }
  .notification-block-buttons .acceptorderf {
      background-color: #28b328;
      color: white;
  }
  
  .notification-block-buttons .declineorderf {
      background-color: var(--color-main);
      color: white;
      margin-right: 4px;
  }
  
  .countnew {
      display: inline-block;
      background-color: #d0408e;
      width: 10px;
      height: 10px;
      color: white;
      border-radius: 100%;
      line-height: 18px;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 10px;
      font-weight: bold;
      text-align: center;
      position: absolute;
      top: 2px;
      right: 4px;
  }
  
  div#notificationscountnewtip {
      font-size: 14px;
      background-color: #d0408e;
      border-radius: 15px;
      padding: 5px 15px;
      width: auto;
      display: inline-block;
      height: 30px;
      font-weight: bold;
      box-sizing: border-box;
      position: absolute;
      bottom: -34px;
      right: 0;
      line-height: 20px;
      white-space: nowrap;
  }
  div#notificationscountnewtip:empty {
      display: none;
  }
  
  span#notificationscountnewlikesicon {
      height: 20px;
      width: 20px;
      background-image: url(/icons/passive-like-white.png);
      background-size: 100%;
      display: inline-block;
      margin-right: 1px;
  }
  
  span#notificationscountnewlikes {
      display: inline-block;
      height: 20px;
      width: auto;
      vertical-align: top;
      margin-right: 16px;
  }
  
  #notificationscountnewlikes:last-child {
      margin-right: 0;
  }
  
  span#notificationscountnewcommentsicon {
      height: 20px;
      width: 20px;
      background-image: url(/icons/comments-white.png);
      background-size: 100%;
      display: inline-block;
      margin-right: 1px;
  }
  
  span#notificationscountnewcomments {
      display: inline-block;
      height: 20px;
      width: auto;
      vertical-align: top;
      margin-right: 16px;
  }
  
  #notificationscountnewcomments:last-child {
      margin-right: 0;
  }
  
  span#notificationscountnewpeopleicon {
      height: 20px;
      width: 20px;
      background-image: url(/icons/profile-white.png);
      background-size: 100%;
      display: inline-block;
      margin-right: 1px;
  }
  
  span#notificationscountnewpeople {
      display: inline-block;
      height: 20px;
      width: auto;
      vertical-align: top;
  }
  
  span#notificationscountnewtiparrow {
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 5px 5px 5px;
      border-color: transparent transparent #d0408e transparent;
      position: absolute;
      bottom: -5px;
      left: calc(50% - 4px);
  }
  
  .notificationsblockheader {
      display: inline-block;
      font-size: 15px;
      font-weight: bold;
      text-align: left;
      padding: 12px 15px;
      box-sizing: border-box;
      background: white;
      border-bottom: 1.5px solid #dee1f4;
      color: #737687;
  }
  
  div#profileheader-progress-line {
      display: inline-block;
      height: 10px;
      width: 150px;
      float: left;
      background: #d0408e;
      border-radius: 20px;
      position: relative;
      overflow: hidden;
      margin-top: 3px;
      margin-bottom: 3px;
      margin-right: 15px;
  }
  
  div#profileheader-progress-line-gray {
      position: absolute;
      top: 0;
      right: 0;
      height: 10px;
      background-color: #c0c0c0;
  }
  
  div#profileheaderlevelparent {
      display: inline-block;
      box-sizing: border-box;
      padding: 10px 12px;
  }
  
  span#profileheadercurrentlevel {
      display: inline-block;
      font-size: 12px;
      color: var(--color-main);
      font-weight: bold;
      height: 16px;
      line-height: 16px;
      float: left;
      margin-right: 15px;
  }
  
  span#profileheaderxp {
      display: inline-block;
      font-size: 12px;
      float: left;
      color: black;
  }
  
  div#closecomments {
      position: absolute;
      width: 25px;
      height: 25px;
      background-image: url(/icons/arrowleft.png);
      background-size: 100%;
      top: 25px;
  }
  
  .photonewscomments-child-body {
      display: inline-block;
      width: calc(100% - 55px);
      background-color: rgba(0, 0, 0, 0.04);
      background-color: #f5f5f5;
      border-radius: 15px;
      padding: 5px 10px;
      box-sizing: border-box;
      border: 1px solid var(--color-gray-lightest);
  }
  
  .commactions {
      display: inline-block;
      width: auto;
      float: right;
      font-size: calc((var(--font-notice)) - 2px);
      height: 15px;
      line-height: 15px;
      font-weight: bold;
      color: #4a4a4a;
      margin-bottom: 5px;
  }
  
  .searchpage .userintereststitle {
      /* margin-left: 10px; */
      font-size: 14px;
      margin-bottom: 7px;
      display: none;
      text-align: center;
  }
  
  .searchpage .userinterestssubtitle {
      margin-left: 10px;
      display: none;
  }
  
  .searchpage .userintereststitle:first-child {
      display: block !important;
  }
  
  div#addchallengdeinterests {
      display: inline-block;
      /* padding: 15px; */
      /* padding-left: 12px; */
      box-sizing: border-box;
      height: 500px;
      overflow-y: auto;
      width: calc(100% - 30px);
      float: left;
      height: calc(100% - 285px);
      margin-bottom: 20px;
  }
  
  div#addchallengemodal {
      display: none;
      position: fixed;
      top: 0;
      bottom: 0;
      z-index: 10000;
      background: white;
      padding: 15px;
  }
  
  button#closeaddchallengemodal {
      position: absolute;
      top: 15px;
      left: 15px;
      height: 25px;
      width: 25px;
      border: none;
      background: url(/icons/arrowleft.png);
      background-size: 100%;
  }
  
  div#addchallengemodalheader {
      font-weight: bold;
      padding-left: 45px;
      box-sizing: border-box;
      text-align: left;
      line-height: 25px;
      margin-bottom: 20px;
      width: calc(100% - 30px);
      float: left;
  }
  
  div#addchallengemodalinputs {
      display: inline-block;
      margin-bottom: 20px;
      width: calc(100% - 30px);
      float: left;
  }
  
  input[name='challengename'], select[name = 'challengehardlevel'] {
      width: 100%;
      align-content: normal;
      border-radius: 4px;
      border: 1px solid #f6f6f6;
      width: 100%;
      margin-bottom: 12px;
      box-sizing: border-box;
      padding: 5px 10px;
      font-size: calc(12px);
      background: #f6f6f6;
  }
  
  select[name = 'challengehardlevel'] {
   margin-bottom: 0;
   margin-top: -4px;
  }
  
  textarea[name='challengedescription'] {
      align-content: normal;
      border-radius: 4px;
      border: 1px solid #f6f6f6;
      width: 100%;
      box-sizing: border-box;
      padding: 5px 10px;
      font-size: calc(12px);
      resize: none;
      background: #f6f6f6;
      margin-bottom: -4px;
      margin-bottom: 12px;
  }
  
  button#toaddchallenge {
      height: 40px;
      border: none;
      background-color: var(--color-addit);
      color: white;
      font-weight: bold;
      border-radius: 15px;
      width: calc(100% - 30px);
      float: left;
  }
  
  button#toaddchallengeopenmodal {
      width: calc(100% - 30px);
      border: none;
      background: var(--color-addit);
      height: 40px;
      box-sizing: border-box;
      border-radius: 15px;
      color: white;
      font-weight: bold;
      margin-bottom: 25px;
  }
  
  .allchallengeslist-item {
      border-top: 2px solid #f9f9f9;
      border-bottom: 2px solid #f9f9f9;
      padding: 16px 18px;
      box-sizing: border-box;
      display: inline-block;
      margin-bottom: 5px;
  }
  
  span.allchallengeslist-item-name {
      width: 100%;
      display: inline-block;
      text-align: left;
      font-weight: bold;
      margin-bottom: 12px;
      line-height: 23px;
      font-size: 17px;
      color: var(--color-main);
  }
  
  span.allchallengeslist-item-desc {
      display: inline-block;
      text-align: left;
      font-size: 13px;
      margin-bottom: 12px;
  }
  
  span.allchallengeslist-item-interests {
   font-size: 13px;
   font-weight: bold;
   display: inline-block;
   text-align: left;
   width: 100%;
   color: #7b7b7b;
   height: 20px;
   line-height: 20px;
   margin-bottom: 8px;
  }
  span.allchallengeslist-item-interests span {
   vertical-align: top;
   display: inline-block;
  }
  span.allchallengeslist-item-interests img {
   height: 20px;
   margin-right: 5px;
  }
  
  span.allchallengeslist-item-level {
      display: inline-block;
      height: 20px;
      line-height: 20px;
      font-size: 12px;
      float: left;
      margin-right: 12px;
  }
  
  span.allchallengeslist-item-level img {
      width: 20px;
      margin-right: 5px;
  }
  
  span.allchallengeslist-item-level span {
      display: inline-block;
      height: 20px;
      line-height: 20px;
      vertical-align: top;
  }
  
  span.allchallengeslist-item-xp {
      font-size: 12px;
      float: left;
      display: inline-block;
      height: 20px;
      line-height: 20px;
  }
  
  span.allchallengeslist-item-xp img {
      width: 20px;
      margin-right: 5px;
  }
  
  span.allchallengeslist-item-xp span {
      line-height: 20px;
      display: inline-block;
      height: 20px;
      vertical-align: top;
  }
  
  button.tojoinchallenge {
      height: 20px;
      border: none;
      float: right;
      border-radius: 15px;
      padding: 0px 20px;
      box-sizing: border-box;
      font-size: 12px;
      font-weight: bold;
      /* background-color: var(--color-main-light-100); */
      color: var(--color-addit);
  }
  
  div#newcontentchallenge {
      position: absolute;
      top: 0;
      bottom: 0;
      height: 100%;
      background-color: white;
      overflow: hidden;
      box-sizing: border-box;
      padding: 55px 15px;
  }
  
  div#addingnewchallenge {
      width: 100%;
      margin: auto;
      font-size: 0;
  }
  
  .challengenew {
      width: 100%;
      margin: auto;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      padding: 10px;
      border: 1px solid #f6f6f6;
      font-size: 16px;
      background-color: #fff;
      text-align: left;
      font-family: var(--font-family);
      display: block;
      height: auto;
      min-height: 5em;
      max-height: 12em;
      overflow: auto;
      line-height: 1.42857143;
      color: #555;
      cursor: text;
      resize: none;
      border-radius: 15px 15px 0 0;
  }
  
  .challengerow {
      display: none;
  }
  
  .challengeoutputMulti {
      display: inline-block;
      height: auto;
      padding: 15px 15px 0;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      background-color: #fff;
  }
  
  .challengeoutputMulti:empty {
      padding: 0;
  }
  
  .challengeoutputMulti>div {
      width: auto;
      height: auto;
      display: inline-block;
      float: left;
      cursor: pointer;
      margin-right: 10px;
      position: relative;
      margin-bottom: 15px;
      max-height: 100px
  }
  
  .challengeoutputMulti>div.loaditem {
      width: 100px;
      padding: 35px;
      box-sizing: border-box
  }
  
  .challengeoutputMulti>div.loaditem {
      height: 100px;
      display: inline-block
  }
  
  .challengeattaching {
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      padding: 10px;
      background-color: #fff;
      border: 1px solid #f6f6f6;
      border-top: none;
      display: inline-block;
      border-radius: 0 0 15px 15px;
  }
  
  .challengeattachaudio, 
  .challengeattachdocuments,
  .challengeattachheader, 
  .challengeattachphoto, 
  .challengeattachvideo {
      height: 30px;
      width: 30px;
      border: 0;
      float: left;
      padding: 0;
      margin-right: 10px;
      cursor: pointer;
  }
  
  span#addnewchallenge {
      float: right;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      font-size: 16px;
      font-weight: 700;
      padding: 10px;
      color: #fff;
      border: 0;
      color: var(--color-main);
      background-color: var(--color-main-light-100);
      cursor: pointer;
      width: 100%;
      margin-top: 15px;
      border-radius: 4px;
  }
  
  button#toclosenewcontentchallenge {
      width: 25px;
      height: 25px;
      position: absolute;
      top: 15px;
      left: 15px;
      z-index: 10;
      margin: 0;
      border: none;
      padding: 0;
      background-image: url(/icons/arrowleft.png);
      background-color: inherit;
      background-size: 100%;
  }
  
  .newheader-challenge {
      margin-bottom: 4px;
      font-size: 14px;
      /* color: #d0408e; */
      font-family: var(--font-family);
      font-weight: 500;
      /* margin-bottom: 20px; */
      /* margin-top: -15px; */
      /* padding-left: 70px; */
      box-sizing: border-box;
      line-height: 18px;
  }
  
  .newheader-challenge img {
      width: 18px;
      margin-right: 3px;
      margin-bottom: -4px;
  }
  
  .newheader-challenge span {
      vertical-align: top;
      line-height: 18px;
      display: inline-block;
  }
  
  button.todeletechalengenew {
      width: calc(50% - 10px);
      display: inline-block;
      margin-right: 20px;
      box-sizing: border-box;
      border: none;
      margin-top: 20px;
      border-radius: 15px;
      padding: 5px;
      font-weight: bold;
  }
  
  button.toratechalengenew {
      width: calc(50% - 10px);
      display: inline-block;
      box-sizing: border-box;
      border: none;
      margin-top: 20px;
      border-radius: 15px;
      padding: 5px;
      background-color: var(--color-main);
      color: white;
      font-weight: bold;
  }
  
  .admin-header {
      font-weight: bold;
      margin-bottom: 15px;
  }
  
  span.newheader-challenge-rate {
      margin-left: 12px;
      color: #008000;
      font-weight: bold;
      word-spacing: -2px;
  }
  
  div#challengesitems .new {
      display: inline-block !important;
      box-shadow: none;
  }
  
  .modalinterestsblock-header {
      padding-left: 15px;
      box-sizing: border-box;
      text-align: left;
      margin-bottom: 12px;
      font-size: 15px;
      font-weight: bold;
      margin-top: 20px;
  }
  
  a.settingsbodylink {display: inline-block;width: calc(100% - 70px);text-align: left;margin-bottom: 20px;color: black;font-size: 14px;text-decoration: underline;}
  
  a#settingsbodylink-out {
      text-decoration: none;
      font-weight: bold;
      color: red;
  }
  
  .userphotos-container-item, div#userphotos-container .loaditem {
      width: calc(100%/3 - 2px/3);
      display: inline-block;
      aspect-ratio: 1/1;
      overflow: hidden;
      margin-left: 1px;
      margin-bottom: 1px;
      position: relative;
      float: left;
  }
  
  .userphotos-container-item:nth-child(3n+2), div#userphotos-container .loaditem:nth-child(3n+2) {
      margin-left: 0;
  }
  
  div#userphotos-container .loaditem img {
      position: absolute;
      top: calc(50% - 15px);
      left: calc(50% - 15px);
  }
  
  .userphotos-container-item img {
      width: 100%;
      margin-bottom: -4px;
      object-fit: cover;
      height: 100%;
  }
  
  div#userphotos-container, #selectedblock-photos, #selectedblock-users, div#uservideos-container {
      text-align: left;
      /* padding: 15px 0; */
      /* padding-bottom: 11px; */
      box-sizing: border-box;
      /* background-color: white; */
      /* box-shadow: 0 0 10px 3px rgb(221 221 221); */
      display: none;
      /* height: 100%; */
      border-radius: 15px;
      /* border: 1px solid var(--color-gray-lightest); */
      padding-bottom: 10px;
  }
  
  button#toadduserphoto {
      width: calc(100%/3 - 20px/3);
      display: inline-block;
      aspect-ratio: 1/1;
      border-radius: 4px;
      overflow: hidden;
      /* margin-right: 5px; */
      margin-left: 5px;
      margin-bottom: 1px;
      position: relative;
      vertical-align: top;
      background-color: initial;
      border: 1px solid var(--color-gray-lightest);
      background-image: url(/icons/plus.png);
      background-repeat: no-repeat;
      background-size: 35px;
      background-position: center;
  }
  
  input#toadduserphotoinput {
      display: none;
  }
  
  div#alldialogscontainer {
      margin-bottom: 20px;
      padding-bottom: 120px;
  }
  
  .userphotos-container-item-full {margin-bottom: 20px;}
  
  button.toalluserphotos {border: none;width: 25px;height: 25px;/* margin-top: 12px; *//* margin-left: 12px; */background-color: inherit;background-image: url(/icons/arrowleft.png);background-size: 100%;/* margin-bottom: 12px; */position: absolute;left: 15px;top: 20px;}
  
  .userphotos-container-item-full .infonew {
      box-sizing: border-box;
      padding: 10px;
      text-align: left;
  }
  
  .userphotos-container-item-full span.openphotooptions {
      right: 12px;
  }
  
  .userphotos-container-item-full .photosimg {
      margin-bottom: 12px;
      position: relative;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      width: 100%;
      display: inline-block;
  }
  
  .photoscontaining {
      display: inline-block;
      width: 100%;
      vertical-align: top;
      position: relative;
  }
  
  .photoscontaining>img, .photoscontaining>video {
      display: inline-block;
      width: 100%;
      margin: auto;
  }
  
  .userphotos-container-item-full .photoinfo {
      box-sizing: border-box;
      padding: 0 12px;
      text-align: left;
  }
  
  div#selectedblock-photos {
      display: none;
  }
  
  .photospage div#userphotos-container {
      margin-top: 0;
  }
  
  .dialogspage div#turnnotificationsparentblock {
      margin-top: -11px;
      margin-bottom: 7px;
      box-sizing: border-box;
      padding: 10px;
      font-size: 14px;
      background-color: white;
      font-weight: bold;
      display: none;
  }
  .dialogspage div#turnnotifications {
      height: 18px;
      width: 48px;
      margin-top: 3px;
      margin-left: 7px;
  }
  .dialogspage .switch-btn::after {
      height: 24px;
      width: 24px;
      top: -3px;
  }
  
  
  .dialogspage span#turnnotificationsspan {
      height: 24px;
      line-height: 24px;
  }
  
  div#recommendinterests-line {
      display: inline-block;
      white-space: nowrap;
      margin-bottom: 7px;
      background: white;
      padding: 10px;
      box-sizing: border-box;
      /* overflow-x: auto; */
      box-shadow: 0 0 10px 3px rgb(221 221 221);
  }
  
  .recommendinterests-line-item {
      display: inline-block;
      white-space: normal;
      width: auto;
      margin-right: 8px;
      max-width: 150px;
  }
  
  .recommendinterests-line-item img {
      display: block;
      width: 45px;
      margin-bottom: 3px;
      margin: auto;
      margin-bottom: 5px;
  }
  
  .recommendinterests-line-item span:nth-child(2) {
      font-weight: bold;
      font-size: 14px;
      display: block;
      width: 100%;
      margin-bottom: 2px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
  }
  
  .recommendinterests-line-item span:nth-child(3) {
      font-size: 12px;
      display: block;
      margin-bottom: 7px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  }
  
  .recommendinterests-line-item button {
      width: 100%;
      border: none;
      padding: 5px;
      font-size: 13px;
      border-radius: 15px;
      color: var(--color-main);
      font-weight: bold;
  }
  
  .recommendline-subheader {
      text-align: left;
      margin: 5px 0 15px 5px;
      font-size: 15px;
      font-weight: bold;
  }
  
  div#recommendinterests-line-items {
      overflow-x: auto;
  }
  
  .closemodalnewsphotos {
      position: absolute;
      width: 25px;
      height: 25px;
      background-image: url(/icons/arrowleft.png);
      background-size: 100%;
      top: 12.5px;
      left: 15px;
  }
  
  div#closeattachmentsmodal {
      position: absolute;
      width: 25px;
      height: 25px;
      background-image: url(/icons/arrowleft.png);
      background-size: 100%;
      top: 15px;
      left: 15px;
  }
  
  div#closeresendingchatsmodal {
      position: absolute;
      width: 25px;
      height: 25px;
      background-image: url(/icons/arrowleft.png);
      background-size: 100%;
      top: 15px;
      left: 15px;
  }
  
  div#closeaddgroupmembermodal {
      position: absolute;
      width: 25px;
      height: 25px;
      background-image: url(/icons/arrowleft.png);
      background-size: 100%;
      top: 15px;
  }
  
  div#toclosethemesparameters {
      left: 17px;
  }
  
  div#closeaddgroupmodal {
      display: inline-block;
      position: absolute;
      width: 25px;
      height: 25px;
      background-image: url(/icons/arrowleft.png);
      background-size: 100%;
      top: 15px;
      left: 15px;
  }
  span.select2.select2-container {
      font-size: 14px;
  }
  
  .select2-selection__rendered {
      line-height: 36px !important;
  }
  
  span.select2-selection__arrow {
      height: 35px !important;
  }
  
  span.select2-selection {
      height: 36px !important;
      border: 1px solid var(--color-gray-lightest) !important;
  }
  
  .educard-groupblock {
      display: inline-block;
      width: calc(50% - 5px);
      /* margin-right: 5px; */
  }
  
  .educard-groupblock-class {
      display: inline-block;
      width: calc(50% - 5px);
      margin-right: 5px;
  }
  
  .educard-groupblock-letter {
      display: inline-block;
      width: calc(50% - 5px);
  }
  
  div#usereducation {
      display: none;
  }
  
  .profilepage div#usereducationheader {
      padding-top: 0;
  }
  
  .profilepage button#usereducationsave {
      right: 50px;
      top: 15px;
  }
  
  button#toaddsubgroup {
      display: inline-block;
      width: calc(100% - 30px);
      padding: 8px;
      box-sizing: border-box;
      border: none;
      border-radius: 15px;
      font-weight: bold;
      /* margin-left: 15px; */
      margin-bottom: 20px;
  }
  
  div#addsubgroupmodalparent {
      display: none;
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, .5);
      z-index: 10000000;
  }
  
  div#addsubgroupmodal {
      background: white;
      height: 100%;
      width: 100%;
      padding: 15px 15px 10px;
      box-sizing: border-box;
      overflow-y: hidden;
  }
  
  div#closeaddsubgroupmodalheader {
      display: inline-block;
      position: absolute;
      width: 25px;
      height: 25px;
      background-image: url(/icons/arrowleft.png);
      background-size: 100%;
      top: 15px;
      left: 15px;
  }
  
  div#addsubgroupmodalheader {
      height: 25px;
      line-height: 25px;
      margin-bottom: 10px;
      box-sizing: border-box;
      color: var(--color-addit);
      font-weight: bold;
      text-align: left;
      padding-left: 45px;
      font-size: 18px;
      margin-bottom: 10px;
  }
  
  button#toaddsubgroupsubmit {
      width: 100%;
      margin-top: 20px;
      border: none;
      padding: 8px;
      font-weight: bold;
      border-radius: 15px;
  }
  
  .modaleditsubgroupavatar {
      height: 80px;
      width: 80px;
      border-radius: 100%;
      border: 1px solid var(--color-gray-lightest);
      box-sizing: border-box;
      margin-left: 7px;
      cursor: pointer;
      overflow: hidden;
      display: inline-block;
      background-image: url(/icons/attachphoto.png);
      background-size: 30px;
      background-position: center;
      background-repeat: no-repeat;
  }
  
  .modaleditsubgroupinfo {
      width: calc(100% - 95px);
      height: 80px;
      display: inline-block;
      right: 0px;
      vertical-align: top;
  }
  
  div#addsubgroupmodalblock {
      margin-top: 25px;
  }
  
  #addsubgroupmodal input, #addsubgroupmodal textarea {
      width: 100%;
      line-height: 35px;
      height: 35px;
      text-align: left;
      box-sizing: border-box;
      padding-left: 15px;
      white-space: normal;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 16px;
      border: none;
      resize: none;
  }
  
  #addsubgroupmodal input {
      margin-bottom: 7px;
  }
  
  #addsubgroupmodal textarea {
      height: 38px;
      line-height: normal;
      overflow-y: auto;
      font-size: 14px;
  }
  
  div#isOpenedSwitch-elem1, div#isOpenedSwitch-elem2 {
      display: inline-block;
      width: 50%;
      float: left;
      padding: 10px;
      box-sizing: border-box;
      font-weight: bold;
      height: 35px;
      border-width: 1.4px;
      border-style: solid;
      border-color:  #a937a0;
      border-right-width: 0;
      border-radius: 15px 0 0 15px;
  }
  
  div#isOpenedSwitch-elem2 {
      border-right-width: 1.4px;
      border-radius: 0 15px 15px 0;
  }
  
  div#isOpenedSwitch, div#genderSwitch {
      display: inline-block;
      margin-top: 10px;
      font-size: 12px;
      overflow: hidden;
      height: 35px;
      box-sizing: border-box;
      color: #4f0070;
  }
  
  div.isOpenedSwitch-elem[data-isselect="1"], div.genderSwitch-elem[data-isselect="1"] {
      background: #f3e3f1;
  }
  
  div#genderSwitch-elem1, div#genderSwitch-elem2, div#genderSwitch-elem3 {
      display: inline-block;
      width: calc(100% / 2);
      float: left;
      padding: 10px;
      box-sizing: border-box;
      font-weight: bold;
      height: 35px;
      border-radius: 15px 0 0 15px;
      border-width: 1.4px;
      border-style: solid;
      border-color:  #a937a0;
      border-right-width: 0;
  }
  
  .genderSwitch-elem:last-child {
      border-right-width: 1.4px !important;
      border-radius: 0 15px 15px 0 !important;
  }
  
  .switchLabel {margin-top: 20px;font-size: 13px;text-align: left;padding-left: 5px;box-sizing: border-box;}
  
  div.switchNotice {
      font-size: 12px;
      color: var(--color-gray-dark);
      text-align: left;
      margin-top: 6px;
      padding-left: 5px;
      box-sizing: border-box;
  }
  
  .modaleditsubgroupavatar img {
      width: 100%;
  }
  
  .subgroupblock a {
      display: inline-block;
      height: 45px;
      cursor: pointer;
  }
  
  .subgroupblock img {
      width: 45px;
      border-radius: 100%;
  }
  
  
  
  .subgroupblock {
      padding-left: 20px;
      width: 100%;
      box-sizing: border-box;
      text-align: left;
      margin-bottom: 12px;
      height: 45px;
      position: relative;
  }
  
  .subgroupblock span {
      line-height: 45px;
      vertical-align: top;
      margin-left: 12px;
      font-size: 14px;
      color: black;
  }
  
  button#tojoinsubgroup, button#tojoinsubgroup-inactive {
      background: initial;
      border: none;
      display: inline-block;
      font-weight: bold;
      height: 55px;
      font-size: 16px;
      color: var(--color-main);
      width: 100%;
  }
  
  div#sendreqtoclosegroupmodalparent {
      position: fixed;
      background: rgba(0, 0, 0, .5);
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 1000000;
  }
  
  div#sendreqtoclosegroupmodal {
      box-sizing: border-box;
      background: white;
      position: absolute;
      bottom: 0;
      border-radius: 15px 15px 0 0;
      padding: 15px;
  }
  
  div#closesendreqtoclosegroupmodal {
  }
  
  #sendreqtoclosegroupmodal img {
      width: 75px;
      display: block;
      margin: auto;
      margin-bottom: 15px;
  }
  
  span#sendreqtoclosegroupmodalgroupname {
      display: inline-block;
      width: 100%;
      text-align: center;
      font-weight: bold;
  }
  
  span#sendreqtoclosegroupmodalcountmembers {
      display: inline-block;
      width: 100%;
      text-align: center;
      font-size: 13px;
      margin-top: 5px;
  }
  
  .subgroupreqbtns {
      display: inline-block;
  }
  
  .subgroupsrequest-item {
      padding-left: 20px;
      width: 100%;
      box-sizing: border-box;
      text-align: left;
      margin-bottom: 12px;
      position: relative;
      display: inline-block;
  }
  
  button.declinesubgroupreq {
      display: inline-block;
      /* width: calc(50% - 7px); */
      margin-right: 15px;
      border: none;
      background: initial;
      color: red;
      font-weight: bold;
      padding: 0;
  }
  
  button.confirmsubgroupreq {
      color: green;
      font-weight: bold;
      border: none;
      background: initial;
      /* width: calc(50% - 7px); */
      padding: 0;
  }
  
  .subgroupsrequest-item img {
      margin-bottom: 3px;
  }
  
  span.countsubgroupsrequests {
      display: inline-block;
      margin-left: 7px;
      color: var(--color-addit);
  }
  
  #aboutgroupmodalparent span.countgroupmembers, .countsubgroups {
      display: inline-block;
      margin-left: 7px;
      color: var(--color-addit);
  }
  
  div#turnonlycityparentblock {
      margin-top: 20px;
  }
  
  span#turnonlycityspan {
      display: inline-block;
      float: left;
      font-size: 13px;
      padding-left: 5px;
      line-height: 25px;
  }
  
  div#turnonlycity {
      margin: 0;
      height: 15px;
      margin-top: 6px;
      width: 50px;
  }
  
  #addsubgroupmodal .switch-btn::after {
      /* top: 0; */
  }
  
  .educationblock a {
      display: inline-block;
  }
  
  #closeschoolpupils, #closeschoolsubscribers {
      position: absolute;
      width: 25px;
      height: 25px;
      background-image: url(/icons/arrowleft.png);
      background-size: 100%;
      top: 20px;
      left: 15px;
  }
  
  .educard-groupblock-direction .select2-container {
      width: 100% !important;
  }
  
  div#userphotos-container-full {
      display: none;
      position: fixed;
      top: 0;
      bottom: 0;
      z-index: 10000000;
      left: 0;
      right: 0;
      background-color: white;
      overflow-y: auto;
      overflow-x: hidden;
      padding-top: 65px;
  }
  
  div#userphotos-container-full-header {
      /* margin-top: 10px; */
      text-align: left;
      line-height: 35px;
      padding: 10px;
      font-weight: bold;
      border-bottom: none;
      font-size: 18px;
      padding-left: 55px;
      padding-top: 15px;
      padding-bottom: 15px;
      position: relative;
      margin-bottom: 0;
      position: fixed;
      top: 0;
      background: white;
      z-index: 10;
  }
  
  div#classmenu {
      background-color: white;
      border-radius: 0px 0px 4px 4px;
      display: inline-block;
      /* padding: 10px 15px; */
      box-sizing: border-box;
      text-align: right;
      width: 100%;
      position: relative;
      margin-bottom: 10px;
      /* border-bottom: 2px solid var(--color-gray-lightest); */
      /* overflow-x: auto; */
      /* white-space: nowrap; */
      text-align: left;
      border-radius: 15px;
      border: 1px solid var(--color-gray-lightest);
      overflow: hidden;
  }
  
  .classinset {
      display: inline-block;
      width: auto;
      /* float: left; */
      /* padding-bottom: 7px; */
      /* margin-right: 20px; */
      font-weight: bold;
      cursor: pointer;
      font-size: 14px;
      vertical-align: top;
      padding: 15px;
      margin-left: -4px;
      height: 20px;
      line-height: 20px;
  }
  
  .activeclassinset {
      /* border-bottom: 2px solid black; */
      background: var(--color-background-input);
  }
  
  #userinfo>div:last-child {
      margin-bottom: 0;
  }
  
  div#aboutuser {
      margin-bottom: 7px;
  }
  
  .educationblock:last-child {
      border: 0;
      margin-bottom: 0;
  }
  
  div#usermenu-content {
      /* margin: 0 15px; */
      /* width: calc(100% - 30px); */
      white-space: nowrap;
      overflow-x: auto;
      padding: 0;
      height: 50px;
  }
  
  div#usermenu-content::-webkit-scrollbar {
      width: 0;
      height: 0;
  }
  
  div#classmenu-content {
      /* margin: 0 15px; */
      /* width: calc(100% - 30px); */
      white-space: nowrap;
      overflow-x: auto;
      padding: 0;
      height: 50px;
  }
  
  input#toaddclassphotoinput {
      display: none;
  }
  
  button#toaddclassphoto {
      /* display: inline-block; */
      /* width: calc(100% - 10px); */
      /* margin-left: 5px; */
      /* margin-bottom: 15px; */
      border: none;
      /* padding: 10px 0; */
      /* border-radius: 15px; */
      font-weight: bold;
      color: var(--color-main);
      width: calc(100%/3 - 20px/3);
      display: inline-block;
      aspect-ratio: 1/1;
      border-radius: 4px;
      overflow: hidden;
      /* margin-right: 5px; */
      margin-left: 5px;
      margin-bottom: 1px;
      position: relative;
      vertical-align: top;
      display: none;
  }
  
  div#classphotos-container {
      text-align: left;
      /* padding: 15px 0; */
      /* padding-bottom: 11px; */
      box-sizing: border-box;
      /* background-color: white; */
      /* box-shadow: 0 0 10px 3px rgb(221 221 221); */
      display: none;
      /* height: 100%; */
      border-radius: 15px;
      /* border: 1px solid var(--color-gray-lightest);*/
  }
  
  .classphotos-container-item, div#classphotos-container .loaditem {
      width: calc(100%/3 - 2px/3);
      display: inline-block;
      aspect-ratio: 1/1;
      /* border-radius: 4px; */
      overflow: hidden;
      /* margin-right: 5px; */
      margin-left: 1px;
      margin-bottom: 1px;
      position: relative;
      float: left;
  }
  
  .classphotos-container-item img {
      width: 100%;
      margin-bottom: -4px;
      object-fit: cover;
  }
  
  div#classphotos-container-full {
      display: none;
      position: fixed;
      top: 0;
      bottom: 0;
      z-index: 1000000;
      left: 0;
      right: 0;
      background-color: white;
      overflow-y: auto;
      overflow-x: hidden;
      padding-top: 65px;
  }
  
  div#classphotos-container-full-header {
      /* margin-top: 10px; */
      text-align: left;
      line-height: 35px;
      padding: 10px;
      font-weight: bold;
      border-bottom: none;
      font-size: 18px;
      padding-left: 55px;
      padding-top: 15px;
      padding-bottom: 15px;
      position: relative;
      /* margin-bottom: 15px; */
      position: fixed;
      top: 0;
      background: white;
      z-index: 10;
  }
  
  button.toallclassphotos {
      border: none;
      width: 25px;
      height: 25px;
      /* margin-top: 12px; */
      /* margin-left: 12px; */
      background-color: inherit;
      background-image: url(/icons/arrowleft.png);
      background-size: 100%;
      /* margin-bottom: 12px; */
      position: absolute;
      left: 15px;
      top: 20px;
  }
  
  .classphotos-container-item-full {
      margin-bottom: 20px;
  }
  
  .classphotos-container-item-full .infonew {
      box-sizing: border-box;
      padding: 10px;
      text-align: left;
  }
  
  .classphotos-container-item-full span.openphotooptions {
      right: 12px;
  }
  
  .classphotos-container-item-full > img {
      width: 100%;
      margin-bottom: 12px;
  }
  
  .classphotos-container-item-full .photoinfo {
      box-sizing: border-box;
      padding: 0 12px;
      text-align: left;
  }
  
  div#classphotos-container .loaditem {
      width: calc(100%/3 - 20px/3);
      display: inline-block;
      aspect-ratio: 1/1;
      border-radius: 4px;
      overflow: hidden;
      /* margin-right: 5px; */
      margin-left: 5px;
      margin-bottom: 1px;
      position: relative;
  }
  
  div#classphotos-container .loaditem img {
      position: absolute;
      top: calc(50% - 15px);
      left: calc(50% - 15px);
  }
  
  div#userphotos-container-menu {
      display: inline-block;
      box-sizing: border-box;
      padding: 0 15px;
      margin-bottom: 15px;
  }
  
  button#todisplayastablephoto {
      display: inline-block;
      width: 25px;
      height: 25px;
      border: none;
      background-image: url(/icons/displayastable.png);
      background-size: 100%;
      background-color: inherit;
      margin-right: 15px;
  }
  
  button#todisplayaslistphoto {
      display: inline-block;
      width: 25px;
      height: 25px;
      border: none;
      background-image: url(/icons/displayaslist.png);
      background-size: 100%;
      background-color: inherit;
      margin-right: 15px;
  }
  
  button#toopenhashtagphoto {
      display: inline-block;
      width: 25px;
      height: 25px;
      border: none;
      background-image: url(/icons/hashtag.png);
      background-size: 100%;
      background-color: inherit;
      margin-right: 15px;
  }
  
  #profileblockmenu-name span {
      vertical-align: top;
      display: inline-block;
      /* line-height: 35px; */
      /* line-height: inherit; */
      white-space: nowrap;
      width: 100%;
      text-overflow: ellipsis;
      overflow: hidden;
  }
  
  div#schoolheader {
      width: 100%;
      aspect-ratio: 13/5;
      box-sizing: border-box;
      background-color: #fff;
      display: inline-block;
      position: relative;
      border: 1px solid var(--color-gray-lightest);
      border-bottom: none;
      border-radius: 15px 15px 0 0;
      overflow: hidden;
  }
  
  div#schoolheaderinfo {
      position: relative;
      margin-bottom: 0;
      margin-bottom: 10px;
  }
  
  div#schoolphotos-container {
   text-align: left;
      /* padding: 15px 0; */
      /* padding-bottom: 11px; */
      box-sizing: border-box;
      /* background-color: white; */
      /* box-shadow: 0 0 10px 3px rgb(221 221 221); */
      display: none;
      /* height: 100%; */
      border-radius: 15px;
      /* border: 1px solid var(--color-gray-lightest);*/
  }
  .schoolphotos-container-item {
      width: calc(100%/3 - 20px/3);
      display: inline-block;
      aspect-ratio: 1/1;
      border-radius: 4px;
      overflow: hidden;
      /* margin-right: 5px; */
      margin-left: 5px;
      margin-bottom: 1px;
      position: relative;
  }
  .schoolphotos-container-item img {
      width: 100%;
      margin-bottom: -4px;
      object-fit: cover;
  }
  
  div#schoolphotos-container-full {
      display: none;
      position: fixed;
      top: 0;
      bottom: 0;
      z-index: 100000;
      left: 0;
      right: 0;
      background-color: white;
      overflow-y: auto;
      overflow-x: hidden;
      padding-top: 75px;
  }
  
  div#schoolphotos-container-full-header {
      /* margin-top: 10px; */
      text-align: left;
      line-height: 35px;
      padding: 10px;
      font-weight: bold;
      border-bottom: none;
      font-size: 18px;
      padding-left: 55px;
      padding-top: 15px;
      margin-bottom: 15px;
      position: fixed;
      top: 0;
      background: white;
      z-index: 10;
  }
  
  button.toallschoolphotos {
      border: none;
      width: 25px;
      height: 25px;
      /* margin-top: 12px; */
      /* margin-left: 12px; */
      background-color: inherit;
      background-image: url(/icons/arrowleft.png);
      background-size: 100%;
      /* margin-bottom: 12px; */
      position: absolute;
      left: 15px;
      top: 20px;
  }
  
  .schoolphotos-container-item-full {
      margin-bottom: 20px;
  }
  
  .schoolphotos-container-item-full .infonew {
      box-sizing: border-box;
      padding: 0 12px;
      text-align: left;
  }
  
  .schoolphotos-container-item-full span.openphotooptions {
      right: 12px;
  }
  .schoolphotos-container-item-full > img {
      width: 100%;
      margin-bottom: 12px;
  }
  .schoolphotos-container-item-full .photoinfo {
      box-sizing: border-box;
      padding: 0 12px;
      text-align: left;
  }
  
  .schoolpage div#schoolmaininfo > span.schooladressspan {
      font-size: 12px;
      line-height: normal;
      font-weight: normal;
      height: auto;
      /* text-overflow: ellipsis; */
      /* overflow: hidden; */
      margin-top: 4px;
  }
  
  .classpage div#classmaininfo > span.classchoolspan {
      font-size: 12px;
      line-height: normal;
      font-weight: normal;
      height: auto;
      /* text-overflow: ellipsis; */
      /* overflow: hidden; */
      margin-top: 4px;
  }
  
  div#newscomments-parent {
      display: none;
      background: rgba(0, 0, 0, .4);
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 10000000;
  }
  
  div#tasksmodalparent {
      display: none;
      background: rgba(0, 0, 0, .4);
      position: fixed;
      z-index: 1000000;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      margin-bottom: 0;
  }
  
  div#tasksmodal {
      position: absolute;
      background-color: #fff;
      top: 0;
      bottom: 0;
      border-radius: 0;
      box-sizing: border-box;
      float: left;
      padding: 15px 15px 15px;
      padding-bottom: 35px;
      overflow-y: auto;
      overflow-x: hidden;
  }
  
  div#closetasksmodal {
      width: 25px;
      height: 25px;
      position: absolute;
      background-image: url(/icons/arrowleft.png);
      background-size: 100%;
      top: 20px;
      left: 15px;
  }
  
  div#tasksmodalheader {
       text-align: left;
       line-height: 35px;
       padding: 10px;
       font-weight: bold;
       border-bottom: none;
       font-size: 18px;
       padding-left: 40px;
       padding-top: 0;
  }
  
  .tasksmodal-item {
      display: inline-block;
      padding: 10px;
      box-sizing: border-box;
      border-radius: 15px;
      border: 1px solid var(--color-gray-lightest);
      margin-top: 10px;
      font-size: 13px;
      background-color: #ebe3f5;
  }
  
  .usercounts-children:last-child {
      border-right: none;
  }
  
  .pinch-zoom-container {
      width: 100% !important;
      height: 100% !important;
      display: inline-block;
  }
  
  .avatarsmodalcontaining.slick-slide.slick-current.slick-active {
      width: var(--display-width) !important;
  }
  
  #avatarsphotosmodalchild .toleft, #avatarsphotosmodalchild .toright {
      top: calc((100% - 70px)/2 - 15px);
      transform: none;
  }
  
  div#closecropmodal {
       width: 50px;
       height: 50px;
       position: absolute;
       font-weight: 700;
       background-color: white;
       top: 20px;
       left: 20px;
       z-index: 10000;
       border-radius: 100%;
       /* background-image: url(/icons/arrowleft.png); */
       /* background-size: 24px; */
       /* background-repeat: no-repeat; */
       /* background-position: center; */
       line-height: 50px;
       font-size: 30px;
  }
  
  .closemodalavatarsphotos {
      position: absolute;
      width: 25px;
      height: 25px;
      background-image: url(/icons/arrowleft.png);
      background-size: 100%;
      top: 15px;
      left: 15px;
  }
  
  button.usereducatedit {
      width: 15px;
      height: 15px;
      position: absolute;
      right: 25px;
      top: 12px;
      background-image: url(/icons/edit.png);
      background-size: 15px 15px;
      border: 0;
      background-color: #fff;
      display: none;
      cursor: pointer;
  }
  .dialogspage input[name='searchdialogs']:last-child {
      width: 100%;
  }
  
  .searchpage aside#search-categories input[name="age1"] {
      width: calc(50% - 5px);
      float: left;
  }
  
  .searchpage aside#search-categories input[name="age2"] {
      width: calc(50% - 5px);
      float: right;
  }
  
  .userfavorite-block {
      width: calc(100% - 20px);
      display: inline-block;
      /* margin-right: 9px; */
      font-size: 14px;
      height: 50px;
      /* border: 1px solid var(--color-gray-lightest); */
      border-radius: 15px;
      padding: 7px;
      box-sizing: border-box;
      vertical-align: top;
      box-shadow: 0 0 10px 0.5px rgb(231 231 231);
      margin-bottom: 8px;
  }
  
  .userfavorite-block img {
      width: 35px;
      height: 35px;
      border-radius: 100%;
      vertical-align: top;
  }
  
  .userfavorite-block span {
      display: inline-block;
      width: calc(100% - 50px);
      margin-left: 8px;
      vertical-align: top;
      font-size: 12px;
      /* vertical-align: middle; */
      line-height: 35px;
      color: black;
      font-weight: 500;
      text-align: left;
  }
  
  button#toaddcontent, #tocloseaddcontent {
      box-sizing: border-box;
      padding: 0;
      position: fixed;
      width: 50px;
      height: 50px;
      margin-bottom: 70px;
      bottom: 0;
      right: 15px;
      border: none;
      border-radius: 100%;
      background-color: #00afff;
      background-image: url(/icons/plus-white.png);
      background-size: 17px;
      background-repeat: no-repeat;
      background-position: center;
      transform: rotate(0deg);
      transition: 0.3s;
      border: 1px solid var(--color-gray-lightest);
      z-index: 1000000;
  }
  
  button#tocloseaddcontent {
      transform: rotate(-45deg);
      background-color: white;
      background-image: url(/icons/plus.png);
  }
  
  div#addcontentlist {
      position: fixed;
      display: none;
      right: 15px;
      bottom: 130px;
      width: auto;
  }
  
  #addcontentlist ul {
      list-style: none;
      margin: 0;
      padding: 0;
  }
  
  #addcontentlist li {
      display: block;
      width: 90px;
      text-align: center;
      height: 30px;
      box-sizing: border-box;
      position: relative;
      margin-top: 15px;
      line-height: 20px;
      font-size: 12px;
      background-color: white;
      padding: 5px;
      color: black;
      font-weight: bold;
      border-radius: 4px;
      border: 1px solid var(--color-gray-lightest);
      margin-bottom: 5px;
  }
  
  li#toaddusernew:after, li#toaddclassnew:after {
      content: '';
      width: 50px;
      height: 50px;
      display: inline-block;
      background-image: url(/icons/news.png);
      background-size: 17px;
      background-repeat: no-repeat;
      background-position: center;
      background-color: white;
      border-radius: 100%;
      border: 1px solid var(--color-gray-lightest);
      box-sizing: border-box;
      position: absolute;
      right: -60px;
      top: -10px;
  }
  
  li#toaddusernew, li#toaddclassnew, li#toadduserphoto, li#toaddclassphoto {
      margin-right: 60px;
      margin-bottom: 25px;
  }
  
  li#toadduserphoto:after, li#toaddclassphoto:after {
      content: '';
      width: 50px;
      height: 50px;
      display: inline-block;
      background-image: url(/icons/albums.png);
      background-size: 17px;
      background-repeat: no-repeat;
      background-position: center;
      background-color: white;
      border-radius: 100%;
      border: 1px solid var(--color-gray-lightest);
      box-sizing: border-box;
      position: absolute;
      right: -60px;
      top: -10px;
  }
  
  div#addcontentlistparent {
      display: none;
      position: fixed;
      bottom: 0;
      top: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, .1);
      z-index: 100000;
  }
  
  div#closenewcontent {
      width: 25px;
      height: 25px;
      position: absolute;
      background-image: url(/icons/arrowleft.png);
      background-size: 100%;
      top: 20px;
      left: 15px;
  }
  
  div#newcontentheader {
      margin-bottom: 12px;
      box-sizing: border-box;
      text-align: left;
      line-height: 35px;
      padding: 10px;
      font-weight: bold;
      border-bottom: none;
      font-size: 18px;
      padding-left: 40px;
      padding-top: 0;
      margin-top: 15px;
      margin-left: 15px;
  }
  
  .newspage .userphotos-container-item-full {
      border: 1px solid var(--color-gray-lightest);
      background-color: white;
      border-radius: 15px;
      padding-bottom: 10px;
      /* padding-top: 10px; */
      margin-bottom: 7px;
  }
  
  div#selectedblock-users {
      text-align: center;
  }
  
  .classphotos-container-item:nth-child(3n+2), div#classphotos-container .loaditem:nth-child(3n+2) {
      margin-left: 0;
  }
  
  .infomessage + .voicemessageblockparent {
      margin-top: 5px;
  }
  
  .educard-groupblock .select2-container {
      margin-bottom: 5px;
  }
  
  .educard-subgroupblock-1 {
      display: none;
  }
  
  .profilepage .editoutputMulti:empty {
      padding: 0 !important;
  }
  
  .newspage button.toalluserphotos {
      display: none;
  }
  
  .torepost {
      background-image: url(/icons/toresend.png?v=2);
  }
  
  div#repostmodalparent {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, .5);
      z-index: 100000000;
  }
  
  div#repostmodal {
      background: white;
      height: auto;
      border-radius: 15px 15px 0 0;
      max-height: 95%;
      bottom: 0;
      position: absolute;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 15px;
      box-sizing: border-box;
      padding-bottom: 3px;
      /* display: none; */
  }
  
  div#reposttomsg .repostitem-icon, div#reposttogroups .repostitem-icon, div#reposttoprofile .repostitem-icon, div#repostcopylink .repostitem-icon, #addrepost .repostitem-icon, div#reposttoshare .repostitem-icon {
      background-color: #eaecf3;
      padding: 0;
      box-sizing: border-box;
      width: 45px;
      height: 45px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 100%;
      font-size: 22px;
      color: #ffffff;
  }
  
  #reposttomsg span, #reposttogroups span, #reposttoprofile span, #repostcopylink span, #addrepost span, #reposttoshare span {
   display: inline-block;
   margin-left: 12px;
   line-height: 45px;
   vertical-align: top;
   font-size: 15px;
  }
  
  div#reposttomsg, #reposttogroups, #reposttoprofile, #repostcopylink, #addrepost, #reposttoshare {
      /* height: 45px; */
      /* margin-bottom: 12px; */
  }
  
  [data-tippy-root] {
      z-index: 999900000 !important;
  }
  
  div#sendtoprofileblock {
      display: none;
  }
  
  div#sendtomessageblock {
      display: flex;
      flex-direction: column;
      height: 100%;
      box-sizing: border-box;
  }
  
  textarea.repostprofiletext, textarea.repostdialogstext, textarea.repostgrouptext {
      display: inline-block;
      width: 100%;
      box-sizing: border-box;
      border: none;
      resize: none;
      background-color: var(--color-background-input);
      border-radius: 15px;
      margin-bottom: 10px;
      padding: 7px 10px;
  }
  
  .sendrepostparentblock {
      display: flex;
      flex-direction: column;
      gap: 12px;
      flex-shrink: 0;
      margin-top: auto;
      padding: 15px;
      background-color: white;
      border-top: 1px solid var(--color-background-input);
  }
  
  button#toreposttoprofile, button#toreposttodialogs, button#toreposttogroups {
      display: inline-block;
      width: 100%;
      margin-bottom: 0;
      height: 45px;
      border: none;
      border-radius: 15px;
      background-color: var(--color-addit);
      color: white;
      font-weight: bold;
      cursor: pointer;
      transition: background-color 0.2s;
  }
  
  button#toreposttoprofile:hover, button#toreposttodialogs:hover, button#toreposttogroups:hover {
      background-color: var(--color-addit-dark);
  }
  
  div#allrepostingchats {
      /* flex-grow: 3; */
      box-sizing: border-box;
      overflow-y: auto;
      /* flex-direction: column; */
      /* display: flex; */
      /* height: calc(100% - 110px); */
      text-align: center;
      margin-bottom: 12px;
      max-height: calc(var(--display-height)*0.6 - 150px);
      flex: 1;
  }
  
  div#allrepostingchats > div {
      /* padding: 0; */
      /* height: 60px; */
      /* margin-bottom: 12px; */
      min-height: 50px;
      padding: 8px;
      margin-bottom: 8px;
  }
  
  button#returntochooserepostplaceparent {
      width: 25px;
      height: 25px;
      background-image: url(/icons/arrowleft.png);
      background-size: 100%;
      background-color: initial;
      border: none;
      margin-bottom: 12px;
  }
  
  .groupdialog-r[data-isselected="true"], .userdialog[data-isselected="true"], .clubdialog[data-isselected="true"] {
      background-color: aliceblue;
      border-radius: 15px;
  }
  
  div#alldialogscontainer .userdialog, div#alldialogscontainer .groupdialog, div#alldialogscontainer .clubdialog {
      margin-bottom: 0;
  }
  
  .dialogspage .message-repostnew .newtext {font-size: 14px;text-align: left;line-height: inherit;padding-top: 5px;}
  
  .profilepage .new {
      /* display: none; */
  }
  
  .newsimg + .newsthemesview {
      margin-top: 0;
  }
  
  a.toopenpublic {
      display: inline-block;
      width: calc(100% - 20px);
      font-size: 14px;
      color: var(--color-main);
      font-weight: bold;
      border: 1.5px solid var(--color-main);
      box-sizing: border-box;
      border-radius: 4px;
      padding: 7px 0;
      margin-bottom: 7px;
      text-align: center;
  }
  
  .messageimg + .messagetime {
      position: absolute;
      right: 7px;
      bottom: 8px;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 15px;
      padding: 2px 6px;
      color: white;
      margin-top: 0;
      float: none;
  }
  
  .dialogspage .message-to .messageimg + .messagetime {
      background: none;
      color: rgba(0, 0, 0, 0.7);
      position: static;
  }
    .dialogspage .message-to .messageimg + .messagetime i {
      color: rgba(0, 0, 0, 0.7);
  }
  
  .dialogspage .message-from .messageimg + .messagetime {
      background: rgba(255, 255, 255, 0.8);
      color: rgba(0, 0, 0, 0.7);
  }
  
  .infomessage + span.messagetext {
      padding-top: 0;
  }
  
  .infomessage ~ .messageimg {
      margin-top: 0px;
  }
  
  div#sendtogroupsblock {
      display: flex;
      flex-direction: column;
      height: 100%;
      box-sizing: border-box;
  }
  
  div#allrepostinggroupchats {
       box-sizing: border-box;
       overflow-y: auto;
       text-align: center;
       margin-bottom: 12px;
       max-height: calc(var(--display-height)*0.6 - 150px);
       flex: 1;
  }
  
  .repostnew-block {
      /* width: calc(100% - 40px); */
      /* padding-left: 40px; */
      text-align: center;
  }
  
  .repostnew-block .infonew {padding-left: 40px;padding-top: 0;}
  .repostnew-block .infonew:before {
   content: '';
   display: inline-block;
   width: 20px;
   background-image: url(/icons/toresend.png?v=2);
   height: 64px;
   position: absolute;
   left: 10px;
   top: 0;
   background-size: 20px;
   background-repeat: no-repeat;
   background-position: center;
  }
  
  .newscontainingparent .toleft, .newscontainingparent .toright {
      top: 50%;
  }
  
  .photosimg {
      margin-bottom: 8px;
  }
  
  .voicemessageblockparent {
      padding: 6px 7px 0px 9px;
      box-sizing: border-box;
  }
  
  div#usercounts:empty {
      display: none;
  }
  
  div#classcounts:empty {
      display: none;
  }
  
  button#toclasssubscribe, button#toclassunsubscribe {
      width: 100%;
      border: none;
      border-radius: 15px;
      padding: 7px;
      margin-top: 5px;
      font-weight: bold;
  }
  
  .slick-disabled {
      display: none !important;
  }
  
  .slick-counter-photos {
      position: absolute;
      top: 5px;
      right: 5px;
      background-color: rgba(255, 255, 255, .5);
      width: auto;
      display: inline-block;
      padding: 5px;
      border-radius: 15px;
      font-size: 12px;
      font-weight: bold;
  }
  
  .newscontainingparent .pinch-zoom-container {
      /* width: var(--display-width) !important; */
      /* height: auto !important; */
  }
  
  .slick-slide img {
      width: var(--display-width);
  }
  
  .dialogspage .newsmodalimgcontaining {
      height: calc(var(--display-height) - 50px);
  }
  
  .dialogspage .newsmodalheadercontaining {
      margin: 0;
  }
  
  .gridphotoscounter {
      position: absolute;
      top: 5px;
      right: 5px;
      background-color: rgba(255, 255, 255, .5);
      width: auto;
      display: inline-block;
      padding: 5px;
      border-radius: 15px;
      font-size: 12px;
      font-weight: bold;
  }
  
  span.toeditcomment {
      margin-right: 7px;
  }
  
  input#toadduservideoinput {
      display: none;
  }
  
  li#toadduservideo:after, li#toaddclassvideo:after {
      content: '';
      width: 50px;
      height: 50px;
      display: inline-block;
      background-image: url(/icons/attachvideo.png);
      background-size: 17px;
      background-repeat: no-repeat;
      background-position: center;
      background-color: white;
      border-radius: 100%;
      border: 1px solid var(--color-gray-lightest);
      box-sizing: border-box;
      position: absolute;
      right: -60px;
      top: -10px;
  }
  
  .newspage .loaditem {
      margin-bottom: 10px;
      display: inline-block;
      position: relative;
      height: 30px;
  }
  
  .newspage .uservideos-container-item-full {
      border: 1px solid var(--color-gray-lightest);
      background-color: white;
      border-radius: 15px;
      padding-bottom: 10px;
      /* padding-top: 10px; */
      margin-bottom: 7px;
  }
  
  .uservideos-container-item-full .videosimg {
      margin-bottom: 12px;
      position: relative;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      width: 100%;
      display: inline-block;
  }
  
  .videoscontaining {
      display: inline-block;
      width: 100%;
      vertical-align: top;
      position: relative;
  }
  
  .videoscontaining>video {
      display: inline-block;
      width: 100%;
      margin: auto;
      height: inherit;
  }
  
  .uservideos-container-item-full .videoinfo {
      box-sizing: border-box;
      padding: 0 12px;
      text-align: left;
  }
  
  div#uservideos-container-full {
      display: none;
      position: fixed;
      top: 0;
      bottom: 0;
      z-index: 10000000;
      left: 0;
      right: 0;
      background-color: white;
      overflow-y: auto;
      overflow-x: hidden;
      padding-top: 65px;
  }
  
  .uservideos-container-item, div#uservideos-container .loaditem {
      width: calc(100%/3 - 2px/3);
      display: inline-block;
      aspect-ratio: 1/1;
      overflow: hidden;
      margin-left: 1px;
      margin-bottom: 1px;
      position: relative;
      float: left;
      text-align: center;
  }
  
  .uservideos-container-item:nth-child(3n+2), div#uservideos-container .loaditem:nth-child(3n+2) {
      margin-left: 0;
  }
  
  .uservideos-container-item video {
      width: 100%;
      margin-bottom: -4px;
      object-fit: cover;
      height: 100%;
  }
  
  div#uservideos-container-full-header {
      /* margin-top: 10px; */
      text-align: left;
      line-height: 35px;
      padding: 10px;
      font-weight: bold;
      border-bottom: none;
      font-size: 18px;
      padding-left: 55px;
      padding-top: 15px;
      padding-bottom: 15px;
      position: relative;
      margin-bottom: 0;
      position: fixed;
      top: 0;
      background: white;
      z-index: 10;
  }
  
  button.toalluservideos {
      border: none;
      width: 25px;
      height: 25px;
      /* margin-top: 12px; */
      /* margin-left: 12px; */
      background-color: inherit;
      background-image: url(/icons/arrowleft.png);
      background-size: 100%;
      /* margin-bottom: 12px; */
      position: absolute;
      left: 15px;
      top: 20px;
  }
  
  .uservideos-container-item-full {
      margin-bottom: 20px;
  }
  
  .userphotos-container-item-full .photoinfo {}
  
  .videooptions {
      display: inline-block;
      float: right;
      width: 0;
  }
  
  span.openvideooptions {
      display: inline-block;
      background: url(/icons/options.png);
      background-size: 25px;
      height: 25px;
      width: 25px;
      position: absolute;
      top: 10px;
      right: 10px;
      cursor: pointer;
  }
  
  .uservideos-container-item-full span.openvideooptions {
      right: 12px;
  }
  
  .videooptions-content-parent {
      display: none;
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 1000000;
      background-color: rgba(0, 0, 0, .4);
  }
  
  .videooptions-content {
      display: none;
      position: fixed;
      bottom: 9px;
      z-index: 100000;
      width: calc(var(--display-width) - 18px);
      box-sizing: border-box;
      left: 9px;
      top: auto;
      right: 9px;
      border-radius: 4px;
      padding: 10px;
      background-color: #fff;
      color: black;
  }
  
  .videooptions-content>ul {
      margin: 0;
      padding: 0;
  }
  
  .videooptions-content li {
      list-style: none;
      padding: 7px;
      font-size: 14px;
      height: 20px;
  }
  
  li#closevideooption {
      text-align: center;
      background-color: var(--color-background-input);
      margin-top: 7px;
      border-radius: 4px;
      color: var(--color-addit);
  }
  
  input#toaddclassvideoinput {
      display: none;
  }
  
  #addrepost .repostitem-icon {
      background-image: url(/icons/addrepost.png);
  }
  
  div#classvideos-container-full {
      display: none;
  }
  
  div#classvideos-container {
      text-align: left;
      /* padding: 15px 0; */
      /* padding-bottom: 11px; */
      box-sizing: border-box;
      /* background-color: white; */
      /* box-shadow: 0 0 10px 3px rgb(221 221 221); */
      display: none;
      /* height: 100%; */
      border-radius: 15px;
      /* border: 1px solid var(--color-gray-lightest); */
      padding-bottom: 10px;
  }
  
  .classvideos-container-item, div#classvideos-container .loaditem {
      width: calc(100%/3 - 2px/3);
      display: inline-block;
      aspect-ratio: 1/1;
      overflow: hidden;
      margin-left: 1px;
      margin-bottom: 1px;
      position: relative;
      float: left;
      text-align: center;
  }
  
  .classvideos-container-item:nth-child(3n+2), div#classvideos-container .loaditem:nth-child(3n+2) {
      margin-left: 0;
  }
  
  .classvideos-container-item video {
      width: 100%;
      margin-bottom: -4px;
      object-fit: cover;
      height: 100%;
  }
  
  div#classvideos-container-full {
      display: none;
      position: fixed;
      top: 0;
      bottom: 0;
      z-index: 10000000;
      left: 0;
      right: 0;
      background-color: white;
      overflow-y: auto;
      overflow-x: hidden;
      padding-top: 65px;
  }
  
  div#classvideos-container-full-header {
      /* margin-top: 10px; */
      text-align: left;
      line-height: 35px;
      padding: 10px;
      font-weight: bold;
      border-bottom: none;
      font-size: 18px;
      padding-left: 55px;
      padding-top: 15px;
      padding-bottom: 15px;
      position: relative;
      margin-bottom: 0;
      position: fixed;
      top: 0;
      background: white;
      z-index: 10;
  }
  
  button.toallclassvideos {
      border: none;
      width: 25px;
      height: 25px;
      /* margin-top: 12px; */
      /* margin-left: 12px; */
      background-color: inherit;
      background-image: url(/icons/arrowleft.png);
      background-size: 100%;
      /* margin-bottom: 12px; */
      position: absolute;
      left: 15px;
      top: 20px;
  }
  
  .classvideos-container-item-full {
      margin-bottom: 20px;
  }
  
  .classvideos-container-item-full .videoinfo {
      box-sizing: border-box;
      padding: 0 12px;
      text-align: left;
  }
  
  .classvideos-container-item-full .videosimg {
      margin-bottom: 12px;
      position: relative;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      width: 100%;
      display: inline-block;
  }
  
  .linkspage div#like-mindedblock {display: none;}
  
  .linkspage div#subscribersblock1, .linkspage div#subscribersblock2 {
      display: none;
  }
  
  div#linksmenu {
      background-color: white;
      border-radius: 0px 0px 4px 4px;
      display: inline-block;
      /* padding: 10px 15px; */
      box-sizing: border-box;
      text-align: right;
      width: 100%;
      position: relative;
      margin-bottom: 10px;
      /* border-bottom: 2px solid var(--color-gray-lightest); */
      /* overflow-x: auto; */
      /* white-space: nowrap; */
      text-align: left;
      border-radius: 15px;
      border: 1px solid var(--color-gray-lightest);
      overflow: hidden;
  }
  
  div#linksmenu-content {
       white-space: nowrap;
       overflow-x: auto;
       padding: 0;
       height: 50px;
  }
  
  .linksinset {
      display: inline-block;
      width: auto;
      /* float: left; */
      /* padding-bottom: 7px; */
      /* margin-right: 20px; */
      font-weight: bold;
      cursor: pointer;
      font-size: 14px;
      vertical-align: top;
      padding: 15px;
      margin-left: -4px;
      height: 20px;
      line-height: 20px;
  }
  
  .activelinksinset {
      /* border-bottom: 2px solid black; */
      background: var(--color-background-input);
  }
  
  div#inputmessageblock-div {
       position: absolute;
       visibility: hidden;
       z-index: -9999;
       box-sizing: border-box;
       width: calc(var(--display-width) - 104px);
       padding: 0;
       background-color: initial;
       cursor: text;
       /* border-radius: 15px; */
       display: inline-block;
       text-align: left;
       font-size: 16px;
       border: none;
       margin-top: 10px;
       font-size: var(--font-notice);
       line-height: 25px;
       height: 25px;
       min-height: 25px;
       margin-bottom: 10px;
  }
  
  .answeredmessageblock + span.messagetext {
      margin-top: -5px;
  }
  
  /* Анимация подсветки при клике на ответ */
  .message-highlight {
      animation: messageHighlight 2s ease-in-out;
  }
  
  @keyframes messageHighlight {
      0% {
          background-color: rgba(123, 47, 242, 0.3);
          transform: scale(1.02);
      }
      50% {
          background-color: rgba(123, 47, 242, 0.2);
      }
      100% {
          background-color: transparent;
          transform: scale(1);
      }
  }
  
  #search-news .searchsubheader+div {
      height: calc(100% - 325px);
  }
  
  div#selectedmenu-content {
      white-space: nowrap;
      overflow-x: auto;
      padding: 0;
      height: 50px;
  }
  
  .selectedblock div#userphotos-container {
      display: inline-block;
  }
  
  .selectedblock div#uservideos-container {
      display: inline-block;
  }
  
  div#selectedblock-videos {
      display: none;
  }
  
  .slick-slider {
      touch-action: auto !important;
  }
  
  audio-elem {
      display: none;
  }
  
  .countgroupmembersheader span.countgroupmembers {
      margin-left: 0 !important;
  }
  
  button#toturnonvoicecontrol {
      display: none !important;
      box-sizing: border-box;
      padding: 0;
      position: fixed;
      width: 50px;
      height: 50px;
      margin-bottom: 70px;
      bottom: 60px;
      right: 15px;
      border: none;
      border-radius: 100%;
      background-color: #00afff;
      background-image: url(/icons/voicecontrol-white.png);
      background-size: 17px;
      background-repeat: no-repeat;
      background-position: center;
      transform: rotate(0deg);
      transition: 0.3s;
      border: 1px solid var(--color-gray-lightest);
      z-index: 1000000;
  }
  
  div#voicecontrolmodalparent {
      display: none;
      position: fixed;
      background-color: rgba(0, 0, 0, .3);
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 10000000;
  }
  
  div#voicecontrolmodal {
      background: white;
      position: absolute;
      bottom: 0;
      display: inline-block;
      width: 100%;
      height: 30%;
      left: 0;
      border-radius: 50px 50px 0 0;
  }
  
  div#voicecontrolrequest {
      display: inline-block;
      margin-top: 50px;
      font-weight: bold;
      font-size: 25px;
  }
  
  a.openmaingroupdialogbtn {
      display: inline-block;
      font-size: 14px;
      padding-left: 10px;
  }
  
  span#changeavatar, span#deleteavatar {
      display: inline-block;
      width: 100%;
      margin-bottom: 20px;
      cursor: pointer;
      box-sizing: border-box;
  }
  
  div#subgroupsactionsblock {
      display: inline-block;
      width: 100%;
      margin-bottom: 17px;
      text-align: left;
      padding-left: 20px;
      font-size: calc(var(--font-main) - 1px);
      font-weight: bold;
      box-sizing: border-box;
      background-color: white;
      box-shadow: 0 0 10px 3px rgb(221 221 221);
      padding-top: 15px;
      padding-bottom: 0;
  }
  
  
  
  /* код для адаптивной сетки */
      .messagecontainingparent {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        /* grid-gap: 10px; */
      }
      /* Вертикальное расположение (одна колонка) для горизонтальных изображений */
      .messagecontainingparent.images-vertical {
        grid-template-columns: 1fr;
      }
      /* Горизонтальное расположение (две колонки) для вертикальных изображений - по умолчанию */
      .messagecontainingparent.images-horizontal {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .messagecontaining {
        display: flex;
        justify-content: center;
        align-items: center;
        height: auto;
      }
      .messagecontaining:last-child:nth-child(2n+1) {
          grid-column: 1 / span 2;
      }
      .messagecontainingparent.images-vertical .messagecontaining:last-child:nth-child(2n+1) {
          grid-column: 1;
      }
      .messagecontaining img, .messagecontaining video {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
  
  /* Стили для сообщений только с изображениями/видео (без текста) */
  .message.message-images-only {
      padding: 0 !important;
      border-radius: 0 !important;
      background-color: transparent !important;
      width: auto;
      max-width: none;
      margin: 0;
      box-shadow: none !important;
  }
  
  .message.message-images-only .messageimg {
      margin-top: 0;
      margin-bottom: 0;
      width: 100%;
  }
  
  .message.message-images-only .messagecontainingparent {
      width: 100%;
  }
  
  /* Стили для сообщений с изображениями/видео и другим контентом */
  .message.message-with-media {
      /* max-width: fit-content !important; */
      width: fit-content !important;
      display: inline-block;
  }
  
  .message.message-with-media .messageimg {
      width: auto !important;
      max-width: 100%;
      display: block;
  }
  
  .message.message-with-media .messagecontainingparent {
      width: auto !important;
      max-width: 100%;
      display: block;
  }
  
  .message.message-with-media .messagecontaining {
      width: auto;
      max-width: 100%;
  }
  
  .message.message-with-media .messagecontaining img,
  .message.message-with-media .messagecontaining video {
      max-width: 100%;
      height: auto;
      display: block;
  }
  
  /* Текст подстраивается под ширину изображений */
  .message.message-with-media .messagetext {
      display: block;
      width: 100%;
      max-width: 100%;
      margin-top: 8px;
      padding-top: 8px;
      box-sizing: border-box;
      word-wrap: break-word;
      overflow-wrap: break-word;
  }
  
  /* Аудио подстраивается под ширину изображений */
  .message.message-with-media audio {
      width: 100%;
      max-width: 100%;
      margin-top: 8px;
      box-sizing: border-box;
      display: block;
  }
  
  /* Документы подстраиваются под ширину изображений */
  .message.message-with-media .messagedoc {
      width: 100%;
      max-width: 100%;
      margin-top: 8px;
      box-sizing: border-box;
      display: block;
  }
  
  .doc-thumbnail-name, .aud-thumbnail-name {
      font-size: 13px;
      text-align: center;
      display: inline-block;
      padding: 0 5px;
      overflow: hidden;
      box-sizing: border-box;
      text-overflow: ellipsis;
      margin-top: 10px;
      font-weight: bold;
      text-wrap: nowrap;
  }
  
  .doc-thumbnail-extension, .aud-thumbnail-extension {
      font-size: 13px;
      text-align: center;
      display: inline-block;
      padding: 0 5px;
      overflow: hidden;
      box-sizing: border-box;
      text-overflow: ellipsis;
      margin-top: 3px;
      font-weight: bold;
      text-transform: uppercase;
      color: white;
  }
  
  .doc-thumbnail-icon, .aud-thumbnail-icon {
      display: block;
      width: 20px;
      height: 20px;
      margin-top: 5px;
      /* margin-left: 50px; */
  }
  
  .swiper-slide img, .swiper-slide video {
      width: 100%;
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
  }
  
  span.cropper-view-box {
      /* border-radius: 100% !important; */
  }
  
  .cropper-line {
      width: 0 !important;
  }
  
  span.cropper-face.cropper-move {
      /* border-radius: 100% !important; */
  }
  
  .cropper-point {
      display: none !important;
  }
  
  div#alluseravatars-swiper-pagination {
      top: 5px;
  }
  
  div#alluseravatars-swiper-pagination.swiper-pagination-fraction {
      position: absolute !important;
      top: 10px !important;
      right: 10px !important;
      left: auto !important;
      bottom: auto !important;
      width: auto !important;
      background-color: rgba(0, 0, 0, 0.6) !important;
      color: white !important;
      padding: 5px 10px !important;
      border-radius: 5px !important;
      font-size: 14px !important;
      font-weight: 500 !important;
      z-index: 10 !important;
  }
  
  div.swiper-pagination {
  }
  
  span.swiper-pagination-progressbar-fill {
      background-color: var(--color-main) !important;
  }
  
  .swiper-pagination-bullet-active {
      background-color: var(--color-main) !important;
  }
  
  .swiper-pagination-fraction {
      position: absolute !important;
      top: 10px !important;
      right: 10px !important;
      left: auto !important;
      bottom: auto !important;
      width: auto !important;
      background-color: rgba(0, 0, 0, 0.6) !important;
      color: white !important;
      padding: 5px 10px !important;
      border-radius: 5px !important;
      font-size: 14px !important;
      font-weight: 500 !important;
      z-index: 10 !important;
  }
  
  /* Стили для стрелок навигации Swiper - только для десктопа */
  @media (min-width: 769px) {
      .swiper-button-next,
      .swiper-button-prev {
          display: flex !important;
          align-items: center;
          justify-content: center;
          width: 44px !important;
          height: 44px !important;
          margin-top: 0 !important;
          background-color: rgba(255, 255, 255, 0.9) !important;
          border-radius: 50% !important;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
          color: #333 !important;
          transition: all 0.3s ease !important;
          z-index: 10 !important;
      }
      
      .swiper-button-next:hover,
      .swiper-button-prev:hover {
          background-color: rgba(255, 255, 255, 1) !important;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
          transform: scale(1.1) !important;
      }
      
      .swiper-button-next:after,
      .swiper-button-prev:after {
          font-size: 20px !important;
          font-weight: bold !important;
      }
      
      .swiper-button-next {
          right: 10px !important;
      }
      
      .swiper-button-prev {
          left: 10px !important;
      }
      
      .swiper-button-next.swiper-button-disabled,
      .swiper-button-prev.swiper-button-disabled {
          opacity: 0.35 !important;
          cursor: auto !important;
          pointer-events: none !important;
      }
  }
  
  /* Скрываем стрелки на мобильных устройствах */
  @media (max-width: 768px) {
      .swiper-button-next,
      .swiper-button-prev {
          display: none !important;
      }
  }
  
  .welcome-section {
      background: linear-gradient(135deg, #E0E0E0 0%, #FFFFFF 100%);
      color: #333;
      padding: 1.5rem;
      border-radius: 1rem;
      margin-top: 1rem;
      background: linear-gradient(135deg, var(--primary-color-light), white);
      border: 1px solid var(--border-color);
      border-radius: 20px;
      padding: 20px;
      text-align: center;
      box-shadow: 0 4px 16px rgba(138, 43, 226, 0.08);
      position: relative;
      overflow: hidden;
  }
  
  .quick-actions .card {
      transition: transform 0.2s;
      border: none;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      background-color: #f8f9fa;
  }
  
  .quick-actions .card:hover {
      transform: translateY(-5px);
  }
  
  .hobbies-section .card {
      border: none;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      background-color: #f8f9fa;
  }
  
  .recommendations-section .card {
      border: none;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      background-color: #f8f9fa;
  }
  
  .list-group-item {
      border: none;
      border-bottom: 1px solid rgba(0,0,0,0.1);
      background-color: #ffffff;
  }
  
  .list-group-item:last-child {
      border-bottom: none;
  }
  
  .quick-actions.mb-4 {
      padding: 0 10px;
      padding-bottom: 30px;
  }
  
  .row.g-3 {
      width: 100%;
      margin: 0;
  }
  
  .profile-details p {
      text-align: left;
      font-size: 14px;
  }
  
  .profile-details p i {
      margin-right: 10px;
  }
  
  #newslistparent .new .swiper {
      /* width: var(--display-width); */
      margin: 0;
  }
  
  .message-wrapper.message-new {
      /* float: right; */
  }
  
  .newsactions i {font-size: 24px;line-height: 30px;color: var(--primary-color);}
  
  a.all-news-link {
      text-align: left;
      display: inline-block;
      width: 100%;
      padding: 25px;
      padding-top: 0;
      box-sizing: border-box;
  }
  
  a.all-news-link i {
      margin-right: 8px;
  }
  
  .message-sender-info {
      text-align: left;
      padding: 2px 12px;
      font-size: 14px;
      font-weight: bold;
  }

  .message-sender-info a {
    color: black;
    font-weight: bold;
}
  
  a.logo img {
      height: 36px;
      margin-bottom: 5px;
  }
  
  a.logo {
      line-height: 56px;
      margin: 0;
  }
  
  div#onboardingModal {
      position: fixed;
      background: white;
      z-index: 100000;
      top: 0;
      bottom: 0;
      padding: 25px;
  }
  
  .hobby-tags-container {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
  }
  
  .hobby-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      min-height: 38px;
      padding: 0.5rem;
      border: 1px dashed var(--border-color);
      border-radius: 8px;
  }
  
  .hobby-tag-link {
      text-decoration: none;
      color: inherit;
  }
  
  .hobby-tag {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem;
      background: var(--primary-color-light);
      border-radius: 6px;
      color: var(--primary-color);
      justify-content: space-between;
      width: fit-content;
      font-size: 13px;
      color: black;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  
  .hobby-tag-link:hover .hobby-tag {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  
  .hobby-tag img {
      width: 20px;
      height: 20px;
      border-radius: 4px;
  }
  
  .page-safari {
      top: 0 !important;
      bottom: 0 !important;
      left: 0 !important;
      right: 0 !important;
  }
  
  
  
  
  /*новые стили сообщений*/
  
  .message-wrapper {
    display: flex;
    flex-direction: column;
    margin-bottom: 5px;
    width: 100%;
  }
  
  .message {
    max-width: 80%;
    border-radius: 15px;
    /* margin: 5px 0; */
    font-size: 14px;
    line-height: 1.4;
    word-wrap: break-word;
    padding: 10px 8px 10px 15px;
    color: black;
  }
  
  .message-from {
    background-color: #f0f0f0;  /* Цвет для сообщений от пользователя */
    align-self: flex-start;
    border-bottom-left-radius: 5px;
  }
  
  .message-to {
    color: white;
    align-self: flex-end;
  }
  
  .messagetime {
    font-size: 11px;
    color: rgba(0, 0, 0, 0.5);
    margin-top: 4px;
    text-align: right;
    display: inline-block;
    margin-left: auto;
    white-space: nowrap;
    float: right;
    clear: both;
  }
  
  .message-to .messagetime {
    color: rgba(255, 255, 255, 0.7);
  }
  
  .message-sent .messagetime,
  .message-new .messagetime,
  .message-seen .messagetime {
    text-align: right;
  }
  
  .messageimg + span.messagetext {
      margin-top: 7px;
  }
  
  /* Стили для бейджа уведомлений в нижнем меню */
  .notification-badge {
      position: absolute;
      top: -2px;
      right: -2px;
      background: var(--primary-color);
      color: white;
      font-size: 10px;
      font-weight: 600;
      min-width: 18px;
      height: 18px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 4px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
      z-index: 1000;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      text-align: center;
  }
  
  .notification-badge:empty {
      display: none;
  }
  
  /* Специальные стили для бейджа чат-бота */
  #chatbot-badge {
      background: var(--primary-color);
  }
  
  #chatbot-badge:empty {
      display: none;
  }
  
  /* Специальные стили для бейджа сообщений */
  #messenger-badge {
      background: var(--primary-color);
  }
  
  #messenger-badge:empty {
      display: none;
  }
  
  /* Адаптивность для мобильных устройств */
  @media (max-width: 480px) {
      .notification-badge {
          min-width: 16px;
          height: 16px;
          font-size: 9px;
          border-radius: 50%;
          top: 2px;
          right: 2px;
      }
  }
  
  /* Темная тема отключена для корректной работы */
  /* @media (prefers-color-scheme: dark) {
      .notification-badge {
          border-color: white;
      }
  } */
  
  /* Простые hover эффекты */
  .nav-link:hover .notification-badge {
      transform: scale(1.05);
      transition: transform 0.2s ease;
  }
  
  .welcome-section h1 {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--primary-color);
      margin-bottom: 8px;
      letter-spacing: -0.02em;
  }
  
  h5.card-title {
      font-size: 0.95rem;
      font-weight: 700;
      color: var(--primary-color);
      margin-bottom: 6px;
      text-align: center;
      letter-spacing: -0.01em;
  }
  
  p.card-text {
      font-size: 0.75rem;
      color: var(--light-text);
      text-align: center;
      line-height: 1.3;
      opacity: 0.8;
  }
  
  .notification-suggestion {
      width: auto;
  }
  
  .nav-link .bottommenucounters {
      top: 8px;
      right: 8px;
  
  /* Круговой прогресс-бар для загрузки файлов */
  .circular-progress-container {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  
  .circular-progress {
      transition: stroke-dasharray 0.3s ease;
  }
  
  .progress-circle {
      transition: stroke-dasharray 0.3s ease, stroke 0.3s ease;
  }
  
  .progress-text {
      user-select: none;
      pointer-events: none;
      transition: all 0.3s ease;
  }
  
  /* Анимация для галочки */
  @keyframes checkmark {
      0% {
          transform: translate(-50%, -50%) scale(0);
          opacity: 0;
      }
      50% {
          transform: translate(-50%, -50%) scale(1.2);
          opacity: 1;
      }
      100% {
          transform: translate(-50%, -50%) scale(1);
          opacity: 1;
      }
  }
  
  .progress-text.checkmark {
      animation: checkmark 0.5s ease-out;
  }
  
  /* Стили для галочки на уже загруженных файлах */
  .uploaded-checkmark-container {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  
  .uploaded-checkmark {
      transition: all 0.3s ease;
  }
  
  /* Анимация для галочки на загруженных файлах */
  @keyframes fadeInCheckmark {
      0% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(0.8);
      }
      100% {
          opacity: 1;
          transform: translate(-50%, -50%) scale(1);
      }
  }
  
  .uploaded-checkmark-container {
      animation: fadeInCheckmark 0.5s ease-out;
  }
  }
  
  .progress-text {
      text-align: center;
      font-size: 18px !important;
  }/* ====================================
     МОДАЛЬНОЕ ОКНО КОММЕНТАРИЕВ - СОВРЕМЕННЫЙ ДИЗАЙН
     ==================================== */
  
  :root {
      --comments-primary: #667eea;
      --comments-primary-dark: #5568d3;
      --comments-danger: #ef4444;
      --comments-success: #10b981;
      --comments-text-primary: #1a202c;
      --comments-text-secondary: #64748b;
      --comments-text-muted: #94a3b8;
      --comments-bg-primary: #ffffff;
      --comments-bg-secondary: #f8fafc;
      --comments-bg-tertiary: #f1f5f9;
      --comments-border: #e2e8f0;
      --comments-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
      --comments-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
      --comments-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
      --comments-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
      --comments-radius-sm: 8px;
      --comments-radius-md: 12px;
      --comments-radius-lg: 16px;
      --comments-radius-xl: 20px;
  }
  
  /* Контейнер модального окна */
  .comments-modal-new {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      background: var(--comments-bg-primary);
      display: flex;
      flex-direction: column;
      animation: slideInUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 1000001;
  }
  
  @keyframes slideInUp {
      from {
          transform: translateY(100%);
          opacity: 0;
      }
      to {
          transform: translateY(0);
          opacity: 1;
      }
  }
  
  /* Заголовок модального окна */
  .comments-modal-header-new {
      padding: 20px;
      background: linear-gradient(135deg, var(--comments-primary) 0%, #764ba2 100%);
      color: white;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-shadow: var(--comments-shadow-md);
      position: relative;
      z-index: 10;
  }
  
  .comments-modal-header-new::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
      animation: shimmer 2s infinite;
  }
  
  @keyframes shimmer {
      0% { transform: translateX(-100%); }
      100% { transform: translateX(100%); }
  }
  
  .comments-modal-header-new h3 {
      margin: 0;
      font-size: 20px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 10px;
  }
  
  .comments-modal-header-new h3 i {
      font-size: 24px;
      animation: float 3s ease-in-out infinite;
  }
  
  @keyframes float {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-4px); }
  }
  
  .comments-close-btn {
      width: 40px;
      height: 40px;
      border: none;
      background: rgba(255, 255, 255, 0.2);
      color: white;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      font-size: 18px;
  }
  
  .comments-close-btn:hover {
      background: rgba(255, 255, 255, 0.3);
      transform: rotate(90deg);
  }
  
  .comments-close-btn:active {
      transform: scale(0.9) rotate(90deg);
  }
  
  /* Список комментариев */
  .comments-list-new {
      flex: 1;
      overflow-y: auto;
      padding: 20px;
      background: var(--comments-bg-secondary);
      scrollbar-width: thin;
      scrollbar-color: var(--comments-primary) transparent;
  }
  
  .comments-list-new::-webkit-scrollbar {
      width: 6px;
  }
  
  .comments-list-new::-webkit-scrollbar-track {
      background: transparent;
  }
  
  .comments-list-new::-webkit-scrollbar-thumb {
      background: var(--comments-primary);
      border-radius: 3px;
  }
  
  .comments-list-new::-webkit-scrollbar-thumb:hover {
      background: var(--comments-primary-dark);
  }
  
  /* Пустое состояние */
  .comments-empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 60px 20px;
      text-align: center;
      color: var(--comments-text-muted);
  }
  
  .comments-empty i {
      font-size: 80px;
      margin-bottom: 20px;
      opacity: 0.3;
      animation: pulse 2s ease-in-out infinite;
  }
  
  @keyframes pulse {
      0%, 100% { opacity: 0.3; transform: scale(1); }
      50% { opacity: 0.5; transform: scale(1.05); }
  }
  
  .comments-empty p {
      font-size: 18px;
      font-weight: 600;
      color: var(--comments-text-secondary);
      margin: 0 0 8px 0;
  }
  
  .comments-empty span {
      font-size: 14px;
      color: var(--comments-text-muted);
  }
  
  /* Элемент комментария */
  .comment-item-new {
      display: flex;
      gap: 14px;
      padding: 16px;
      background: var(--comments-bg-primary);
      border-radius: var(--comments-radius-lg);
      margin-bottom: 12px;
      box-shadow: var(--comments-shadow-sm);
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      border: 1px solid var(--comments-border);
      animation: fadeIn 0.3s ease-in-out;
  }
  
  @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
  }
  
  .comment-item-new:hover {
      box-shadow: var(--comments-shadow-md);
      border-color: var(--comments-primary);
      transform: translateY(-2px);
  }
  
  /* Аватар комментария */
  .comment-avatar-link {
      text-decoration: none;
      display: block;
  }
  
  .comment-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;
      box-shadow: var(--comments-shadow-sm);
      border: 2px solid var(--comments-border);
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .comment-avatar-link:hover .comment-avatar,
  .comment-item-new:hover .comment-avatar {
      border-color: var(--comments-primary);
      transform: scale(1.05);
  }
  
  .comment-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }
  
  /* Контент комментария */
  .comment-content {
      flex: 1;
      min-width: 0;
  }
  
  .comment-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
      gap: 12px;
  }
  
  .comment-author-info {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
      flex: 1;
  }
  
  .comment-author-name-link {
      text-decoration: none;
      color: inherit;
  }
  
  .comment-author-name-link:hover .comment-author-name {
      color: var(--primary-color);
      text-decoration: underline;
  }
  
  .comment-author-name {
      font-weight: 600;
      font-size: 15px;
      color: var(--comments-text-primary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: left;
      transition: color 0.2s ease;
  }
  
  .comment-date {
      font-size: 13px;
      color: var(--comments-text-muted);
      text-align: left;
  }
  
  /* Кнопка удаления комментария */
  .comment-delete-btn {
      width: 32px;
      height: 32px;
      border: none;
      background: var(--comments-bg-tertiary);
      color: var(--comments-danger);
      border-radius: var(--comments-radius-sm);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      font-size: 15px;
      flex-shrink: 0;
      /* opacity: 0; */
  }
  
  .comment-item-new:hover .comment-delete-btn {
      opacity: 1;
  }
  
  .comment-delete-btn:hover {
      background: var(--comments-danger);
      color: white;
      transform: scale(1.1);
  }
  
  .comment-delete-btn:active {
      transform: scale(0.95);
  }
  
  .comment-delete-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      transform: none;
  }
  
  /* Текст комментария */
  .comment-text-content {
      font-size: 15px;
      line-height: 1.6;
      color: var(--comments-text-primary);
      word-wrap: break-word;
      white-space: pre-wrap;
      text-align: left;
  }
  
  /* Форма отправки комментария */
  .comment-form-new {
      padding: 16px 20px;
      background: var(--comments-bg-primary);
      border-top: 1px solid var(--comments-border);
      display: flex;
      gap: 12px;
      align-items: flex-end;
      box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.05);
  }
  
  .comment-input-new {
      flex: 1;
      padding: 12px 16px;
      border: 2px solid var(--comments-border);
      border-radius: var(--comments-radius-md);
      font-size: 15px;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
      resize: none;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      color: var(--comments-text-primary);
      line-height: 1.5;
      max-height: 120px;
      min-height: 44px;
  }
  
  .comment-input-new:focus {
      outline: none;
      border-color: var(--comments-primary);
      box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
  }
  
  .comment-input-new::placeholder {
      color: var(--comments-text-muted);
  }
  
  /* Кнопка отправки */
  .send-comment-btn-new {
      width: 44px;
      height: 44px;
      border: none;
      background: linear-gradient(135deg, var(--comments-primary) 0%, #764ba2 100%);
      color: white;
      border-radius: var(--comments-radius-md);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      font-size: 18px;
      box-shadow: var(--comments-shadow-sm);
      flex-shrink: 0;
      position: relative;
      overflow: hidden;
  }
  
  .send-comment-btn-new::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
      transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .send-comment-btn-new:hover {
      transform: scale(1.05);
      box-shadow: var(--comments-shadow-lg);
  }
  
  .send-comment-btn-new:hover::before {
      left: 100%;
  }
  
  .send-comment-btn-new:active {
      transform: scale(0.95);
  }
  
  .send-comment-btn-new:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      transform: none;
  }
  
  .send-comment-btn-new:disabled::before {
      display: none;
  }
  
  /* Спиннер для кнопки отправки */
  .btn-spinner-small {
      display: inline-block;
      width: 18px;
      height: 18px;
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-top-color: white;
      border-radius: 50%;
      animation: spin 0.6s linear infinite;
  }
  
  @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
  }
  
  /* Модальное окно лайков использует те же стили что и комментарии */
  .likes-modal,
  #likesmodalparent .comments-modal-new {
      background: var(--comments-bg-primary);
      display: flex;
      flex-direction: column;
  }
  
  /* Адаптивный дизайн */
  @media (max-width: 768px) {
      .comments-modal-header-new {
          padding: 16px;
      }
      
      .comments-modal-header-new h3 {
          font-size: 18px;
      }
      
      .comments-list-new {
          padding: 16px;
      }
      
      .comment-item-new {
          padding: 12px;
      }
      
      .comment-avatar {
          width: 40px;
          height: 40px;
      }
      
      .comment-form-new {
          padding: 12px 16px;
      }
      
      .comment-input-new {
          padding: 10px 12px;
          font-size: 14px;
      }
      
      .send-comment-btn-new {
          width: 40px;
          height: 40px;
          font-size: 16px;
      }
  }
  
  @media (max-width: 480px) {
      .comments-modal-header-new h3 {
          font-size: 16px;
      }
      
      .comment-author-name {
          font-size: 14px;
      }
      
      .comment-text-content {
          font-size: 14px;
      }
      
      .comment-date {
          font-size: 12px;
      }
  }
  
  /* ===== ГОЛОСОВОЕ УПРАВЛЕНИЕ ===== */
  
  /* Скрываем голосовое управление в ПК версии */
  @media (min-width: 769px) {
      .voice-control-btn {
          display: none !important;
      }
  }
  
  /* ===== Z-INDEX ДЛЯ TOP-NAVBAR ПРИ ОТКРЫТЫХ МОДАЛЬНЫХ ОКНАХ ===== */
  
  /* При открытии модальных окон устанавливаем z-index: 1 для top-navbar */
  body:has(#cropheadermodalparent[style*="display: block"]) .top-navbar,
  body:has(#cropheadermodalparent[style*="display: flex"]) .top-navbar {
      z-index: 1 !important;
  }
  
  body:has(#hobbiesModal.modal[style*="display: block"]) .top-navbar,
  body:has(#hobbiesModal[style*="display: block"]) .top-navbar {
      z-index: 1 !important;
  }
  
  body:has(#modalwindow[style*="display: block"]) .top-navbar,
  body:has(#modalwindow[style*="display: flex"]) .top-navbar {
      z-index: 1 !important;
  }
  
  body:has(#avatarphotosmodalparent[style*="display: block"]) .top-navbar,
  body:has(#avatarphotosmodalparent[style*="display: flex"]) .top-navbar {
      z-index: 1 !important;
  }
  
  body:has(#alluseravatars.allAvatarsContainer-active) .top-navbar,
  body:has(#alluseravatars[style*="position: fixed"]) .top-navbar {
      z-index: 1 !important;
  }
  
  body:has(#newscommentsparent[style*="display: block"]) .top-navbar,
  body:has(#newscommentsparent[style*="display: flex"]) .top-navbar {
      z-index: 1 !important;
  }
  
  body:has(#likesmodalparent[style*="display: block"]) .top-navbar,
  body:has(#likesmodalparent[style*="display: flex"]) .top-navbar {
      z-index: 1 !important;
  }
  
  body:has(#hobbyModal.modal[style*="display: block"]) .top-navbar,
  body:has(#hobbyModal[style*="display: block"]) .top-navbar {
      z-index: 1 !important;
  }
  
  body:has(.news-form-modal[style*="display: block"]) .top-navbar,
  body:has(#newcontent.news-form-modal[style*="display: block"]) .top-navbar {
      z-index: 1 !important;
  }
  
  /* Для модальных окон поиска */
  body:has(#filterModal.active) .top-navbar,
  body:has(#postFilterModal.active) .top-navbar,
  body:has(.post-filter-modal.active) .top-navbar {
      z-index: 1 !important;
  }
  
  /* Для мессенджера в мобильной версии */
  .dialogspage .top-navbar {
      z-index: 1 !important;
  }
  
  @media (max-width: 768px) {
      .dialogspage .top-navbar {
          z-index: 1 !important;
      }
  }
  
  /* Для вводного тура на дашборде (introjs) */
  body:has(.introjs-overlay) .top-navbar,
  .introjs-overlay ~ .top-navbar {
      z-index: 1 !important;
  }
  
  /* Для мессенджера (все версии) */
  .dialogspage .top-navbar {
      z-index: 1 !important;
  }
  
  .voice-control-btn {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: linear-gradient(135deg, #4A90E2, #357ABD);
      border: none;
      color: white;
      font-size: 18px;
      cursor: pointer;
      margin-right: 15px; /* Увеличиваем отступ справа */
      transition: all 0.3s ease;
      box-shadow: 0 2px 8px rgba(74, 144, 226, 0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 1000;
  }
  
  .voice-control-btn:hover {
      transform: scale(1.05);
      box-shadow: 0 4px 15px rgba(74, 144, 226, 0.4);
  }
  
  .voice-control-btn:active {
      transform: scale(0.95);
  }
  
  .voice-control-btn.listening {
      background: linear-gradient(135deg, #E74C3C, #C0392B);
      animation: voice-pulse 1.5s infinite;
      box-shadow: 0 4px 15px rgba(231, 76, 60, 0.4);
  }
  
  .voice-control-btn.listening:hover {
      box-shadow: 0 6px 20px rgba(231, 76, 60, 0.5);
  }
  
  .voice-control-btn.error {
      background: linear-gradient(135deg, #FF6B6B, #E74C3C);
      animation: voice-error 0.5s ease-in-out;
  }
  
  .voice-control-btn.success {
      background: linear-gradient(135deg, #27AE60, #2ECC71);
      animation: voice-success 0.5s ease-in-out;
  }
  
  .voice-status-indicator {
      position: absolute;
      top: -2px;
      right: -2px;
      width: 12px;
      height: 12px;
      background: #27AE60;
      border-radius: 50%;
      border: 2px solid white;
      opacity: 0;
      transition: opacity 0.3s ease;
  }
  
  .voice-control-btn.listening .voice-status-indicator {
      opacity: 1;
      background: #E74C3C;
      animation: voice-indicator-pulse 1s infinite;
  }
  
  @keyframes voice-pulse {
      0% { 
          transform: scale(1); 
          box-shadow: 0 4px 15px rgba(231, 76, 60, 0.4);
      }
      50% { 
          transform: scale(1.1); 
          box-shadow: 0 6px 20px rgba(231, 76, 60, 0.6);
      }
      100% { 
          transform: scale(1); 
          box-shadow: 0 4px 15px rgba(231, 76, 60, 0.4);
      }
  }
  
  @keyframes voice-indicator-pulse {
      0% { 
          transform: scale(1); 
          opacity: 1;
      }
      50% { 
          transform: scale(1.3); 
          opacity: 0.7;
      }
      100% { 
          transform: scale(1); 
          opacity: 1;
      }
  }
  
  @keyframes voice-error {
      0% { transform: scale(1); }
      25% { transform: scale(1.1) rotate(-5deg); }
      50% { transform: scale(1.1) rotate(5deg); }
      75% { transform: scale(1.1) rotate(-5deg); }
      100% { transform: scale(1); }
  }
  
  @keyframes voice-success {
      0% { transform: scale(1); }
      50% { transform: scale(1.2); }
      100% { transform: scale(1); }
  }
  
  /* Модальное окно голосового управления */
  .voice-control-modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10000000000;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
  }
  
  .voice-control-modal.show {
      opacity: 1;
      visibility: visible;
  }
  
  .voice-control-modal-content {
      background: white;
      border-radius: 20px;
      padding: 30px;
      text-align: center;
      max-width: 400px;
      width: 90%;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
      transform: scale(0.8);
      transition: transform 0.3s ease;
  }
  
  .voice-control-modal.show .voice-control-modal-content {
      transform: scale(1);
  }
  
  .voice-control-modal-icon {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: linear-gradient(135deg, #4A90E2, #357ABD);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 20px;
      font-size: 32px;
      color: white;
      animation: voice-modal-pulse 2s infinite;
  }
  
  .voice-control-modal.listening .voice-control-modal-icon {
      background: linear-gradient(135deg, #E74C3C, #C0392B);
  }
  
  @keyframes voice-modal-pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.1); }
      100% { transform: scale(1); }
  }
  
  .voice-control-modal-title {
      font-size: 24px;
      font-weight: 600;
      color: #333;
      margin-bottom: 10px;
  }
  
  .voice-control-modal-subtitle {
      font-size: 16px;
      color: #666;
      margin-bottom: 20px;
  }
  
  .voice-control-modal-commands {
      text-align: left;
      margin: 20px 0;
  }
  
  .voice-control-modal-commands h4 {
      font-size: 18px;
      color: #333;
      margin-bottom: 10px;
  }
  
  .voice-control-modal-commands ul {
      list-style: none;
      padding: 0;
      margin: 0;
  }
  
  .voice-control-modal-commands li {
      padding: 5px 0;
      color: #666;
      font-size: 14px;
  }
  
  .voice-control-modal-commands li:before {
      content: "🎤 ";
      margin-right: 5px;
  }
  
  .voice-control-modal-close {
      position: absolute;
      top: 15px;
      right: 15px;
      background: none;
      border: none;
      font-size: 24px;
      color: #999;
      cursor: pointer;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      transition: all 0.3s ease;
  }
  
  .voice-control-modal-close:hover {
      background: #f0f0f0;
      color: #333;
  }
  
  .header-right {
      display: flex;
      align-items: center;
      gap: 12px;
      justify-content: right;
  }
  
  /* Адаптивность для мобильных устройств */
  @media (max-width: 768px) {
      .voice-control-btn {
          width: 35px;
          height: 35px;
          font-size: 16px;
          margin-right: 0; /* Убираем margin-right для мобильных */
      }
      
      .header-right {
          gap: 8px; /* Уменьшаем отступы на мобильных */
      }
      
      .user-avatar {
          width: 35px;
          height: 35px;
          margin-left: 0; /* Убираем margin-left для мобильных */
      }
      
      .voice-control-modal-content {
          padding: 20px;
          margin: 20px;
      }
      
      .voice-control-modal-icon {
          width: 60px;
          height: 60px;
          font-size: 24px;
      }
      
      .voice-control-modal-title {
          font-size: 20px;
      }
      
      .voice-control-modal-subtitle {
          font-size: 14px;
      }
  }
  
  button.btn.menu-button-with-badge {
      padding: 0.75rem 0.6rem;
  }

.club-card__meta {width: 100%;}

div#clubSuggestionsCarousel {
    margin: 15px 0;
}

div#clubSuggestionsCarouselHeader {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin: 10px 0 3px;
    color: var(--primary-color);
}

div#clubSuggestionsCarouselHeaderTitle {
    font-weight:600; font-size:15px;
}

.club-card__join {
    font-size:12px; 
    padding:6px 10px; 
    margin-top: 3px;
    background: var(--primary-color); 
    color:#fff; 
    border-radius:8px; 
    line-height:1;
}

.bottom-nav .nav-link span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: inherit;
}

.message-from .messagetime {
    color: rgba(0, 0, 0, 0.5);
}

.container.page.page-active.dialogspage {
    padding-bottom: 0;
    height: fit-content !important;
    min-height: auto;
    /* padding-top: 10px !important; */
}

.chat-container {
    /* margin-bottom: 0 !important; */
    margin-top: 0 !important;
}

.container.page.page-active.chat-page-wrapper {
    padding-bottom: 0;
    height: fit-content !important;
    min-height: auto;
    padding-top: 10px !important;
}