/* Start:/local/templates/dev/components/bitrix/news.list/chart_user/style.css?17516125694008*/
div.news-list {
  word-wrap: break-word;
}
div.news-list img.preview_picture {
  float: left;
  margin: 0 4px 6px 0;
}
.news-date-time {
  color: #486daa;
}
.chart-user {
  gap: 64px;
}
.chart-user-content {
  gap: 64px;
}
.chart-user-box {
  gap: 22px;
}
.chart-user-items-box {
  gap: 0;
  height: 20vw;
  justify-content: end;
}
.chart-user-items {
  gap: 5px;
  align-items: end;
  height: 0px;
  transition: 0.5s;
}
.chart-user-items.active {
  height: 20vw;
}
.chart-user-item {
  width: calc(10% - 45px / 10);
  position: relative;
  height: 100%;
  justify-content: end;
  align-items: end;
  overflow: hidden;
}
.chart-user-value {
  position: absolute;
  top: 100%;
  left: 0;
  transition: 0.8s;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  transition: 0.8s linear;
  transition-delay: 0.2s;
}
.chart-user-item:hover .chart-user-value {
  top: 0;
  transition: 0.8s linear;
}
.chart-user-value-text {
  font-size: clamp(15px, 1.04vw, 20px);
  text-align: center;
  text-transform: uppercase;
  font-weight: 500;
  color: #d9e2d8;
  background: #13203a;
  padding: 6px;
  border-radius: 38px;
  width: calc(100% - 12px);
}
.chart-user-value-text .mobile {
  display: none;
}
.chart-user-value-hr {
  border: 1px dashed #2525253d;
  height: 0;
  transition: 0.2s linear;
}
.chart-user-item:hover .chart-user-value-hr {
  height: 100%;
  transition: 0.4s linear;
  transition-delay: 0.8s;
}
.chart-user-value-circle {
  width: 18px;
  height: 18px;
  min-height: 18px;
  border-radius: 50%;
  background: #1a1b1a29;
  opacity: 0;
  transition: 0.2s linear;
  backdrop-filter: blur(5px);
}
.chart-user-item:hover .chart-user-value-circle {
  opacity: 1;
  transition: 0.4s linear;
  transition-delay: 0.8s;
}
.chart-user-column {
  height: 133px; /* 5px - один пользователь */
  background: #13203a;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  width: 100%;
  transition: 0.5s;
}
.chart-user-item:nth-child(n + 6) .chart-user-column {
  background: #b2bbb9;
}
.chart-user-item:hover .chart-user-column {
  background: #4b81f6;
  border-top-left-radius: 48px;
  border-top-right-radius: 48px;
}
.chart-user-time {
  gap: 5px;
  align-items: end;
  transition: 0.5s;
}
.chart-user-time > p {
  width: calc(10% - 45px / 10);
  font-size: clamp(15px, 1.04vw, 20px);
  text-align: center;
  text-transform: uppercase;
  font-weight: 400;
  color: #13203a;
}
.chart-user-btn-box {
  gap: 8px;
}
.chart-user-btn-box-mobile {
  display: none !important;
}
.chart-user-btn {
  width: calc(14.2% - 48px / 7);
  padding: 0.88vw;
  font-size: clamp(13px, 1vw, 20px);
  text-align: center;
  text-transform: uppercase;
  font-weight: 400;
  color: #13203a;
  border: 1px solid #13203a;
  box-sizing: border-box;
  cursor: pointer;
  background: transparent;
  transition: 0.3s;
}
.chart-user-btn:hover,
.chart-user-btn.active {
  border: 1px solid #4b81f6;
  background: #4b81f6;
}
.chart-user-other {
  width: 70%;
  font-size: clamp(15px, 1.77vw, 34px);
  text-transform: uppercase;
  font-weight: 400;
  color: #13203a;
}
@media (max-width: 1200px) {
  .chart-user {
    gap: 48px;
    overflow: hidden;
  }
  .chart-user-content {
    gap: 48px;
    width: 100%;
    overflow-x: scroll;
padding-bottom: 6px;
  }
  .chart-user-box {
    gap: 18px;
    width: 120%;
  }
  .chart-user-btn-box {
    width: 120%;
  }
}
@media (max-width: 768px) {
  .chart-user-btn-box {
    display: none !important;
  }
  .chart-user-btn-box-mobile {
    display: flex !important;
    gap: 8px;
    width: 130%;
  }
  .chart-user-box {
    width: 130%;
  }
  .chart-user-other {
    width: 100%;
  }
  .chart-user-value-text {
    display: flex;
    width: max-content;
  }
  .chart-user-value-text .desktop {
    display: none;
  }
  .chart-user-value-text .mobile {
    display: flex;
  }
  .chart-user-items {
    overflow: hidden;
  }
  .chart-user-item {
    overflow: unset;
  }
  .chart-user-items.active,
  .chart-user-items-box {
    height: 154px;
  }
}

/* End */
/* /local/templates/dev/components/bitrix/news.list/chart_user/style.css?17516125694008 */