:root {
  --color-orange-700: hsl(36, 100%, 20%);
  --color-orange-600: hsl(36, 100%, 33%);
  --color-orange-500: hsl(36, 100%, 45%);
  --color-orange-400: hsl(36, 100%, 60%);
  --color-orange-300: hsl(36, 100%, 73%);
  --color-orange-200: hsl(36, 100%, 85%);
  --color-orange-100: hsl(36, 100%, 95%);

  --color-grey-700: hsl(41, 25%, 18%);
  --color-grey-600: hsl(40, 15%, 28%);
  --color-grey-500: hsl(40, 12%, 43%);
  --color-grey-400: hsl(39, 12%, 58%);
  --color-grey-300: hsl(39, 16%, 76%);
  --color-grey-200: hsl(39, 21%, 88%);
  --color-grey-100: hsl(39, 29%, 92%);

  --color-red-700: hsl(0, 57%, 25%);
  --color-red-600: hsl(1, 64%, 34%);
  --color-red-500: hsl(0, 68%, 43%);
  --color-red-400: hsl(0, 70%, 57%);
  --color-red-300: hsl(0, 85%, 73%);
  --color-red-200: hsl(0, 70%, 85%);
  --color-red-100: hsl(0, 70%, 95%);

  --color-yellow-700: hsl(24, 65%, 27%);
  --color-yellow-600: hsl(30, 60%, 40%);
  --color-yellow-500: hsl(38, 80%, 54%);
  --color-yellow-400: hsl(43, 87%, 65%);
  --color-yellow-300: hsl(45, 90%, 73%);
  --color-yellow-200: hsl(47, 90%, 82%);
  --color-yellow-100: hsl(42, 100%, 95%);

  --color-green-700: hsl(79, 45%, 22%);
  --color-green-600: hsl(79, 80%, 25%);
  --color-green-500: hsl(78, 74%, 35%);
  --color-green-400: hsl(78, 47%, 57%);
  --color-green-300: hsl(79, 33%, 67%);
  --color-green-200: hsl(80, 40%, 79%);
  --color-green-100: hsl(82, 56%, 92%);

  --color-brown-700: hsl(30, 60%, 20%);
  --color-brown-600: hsl(30, 60%, 30%);
  --color-brown-500: hsl(30, 60%, 40%);
  --color-brown-400: hsl(30, 60%, 50%);
  --color-brown-300: hsl(30, 60%, 80%);
  --color-brown-200: hsl(30, 70%, 93%);

  --color-gender-male: hsl(220, 69%, 80%);
  --color-gender-female: var(--color-red-200);

  --color-background: hsl(30, 30%, 95%);
  --color-background-light: hsl(30, 30%, 98%);
  --color-background-dark: hsl(30, 30%, 90%);
  --color-background-white: #FFF;

  --color-text-main: hsl(0, 0%, 20%);
  --color-text-secondary: hsl(0, 0%, 50%);
  --color-text-light: hsl(0, 0%, 80%);

  --shadow-avatar: inset 0 1px 3px 0 hsla(0,0%,0%,.2);
  --shadow-int: inset 0 1px 2px 0 hsla(0,0%,0%,.1);
  --shadow-card: 0 1px 6px rgba(0, 0, 0, 0.1);
  --shadow-card2: 0 3px 8px rgba(0, 0, 0, 0.15);
  --shadow-bot: 0 2px 2px 1px rgba(0,0,0,0.1);
}

@font-face { font-family: 'Roboto'; src: url('./font/Roboto-Regular.woff2') format('woff2'), url('./font/Roboto-Regular.woff') format('woff'), url('./font/Roboto-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; }

@font-face { font-family: 'Roboto';	src: url('./font/Roboto-Medium.woff2') format('woff2'), url('./font/Roboto-Medium.woff') format('woff'), url('./font/Roboto-Medium.ttf') format('truetype');	font-weight: 500;	font-style: normal; }

@font-face { font-family: 'Ubuntu'; src: url('./font/Ubuntu-Regular.woff2') format('woff2'), url('./font/Ubuntu-Regular.woff') format('woff'), url('./font/Ubuntu-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; }

@font-face { font-family: 'Ubuntu'; src: url('./font/Ubuntu-Medium.woff2') format('woff2'), url('./font/Ubuntu-Medium.woff') format('woff'), url('./font/Ubuntu-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; }

html {
  /*font-size: 62.5%;*/
  font-size: 16px;
}
body {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  font-weight: normal;
  background-color: var(--color-background);
  color: var(--color-text-main);
  font-size: 1rem;
  line-height: 1.6;
}

/* Заголовки */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Ubuntu';
  font-weight: 500;
  color: var(--color-text-main);
  margin: 0 0 5px;
  line-height: 1.2;
}

h1 {
  font-size: 1.5rem;
}

/* Текст */
.text-14 {
  font-size: 0.875rem;
  line-height: 1.4;
}
.text-16 {
  font-size: 1.6rem;
  line-height: 1.5;
}
.text-clipse {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.text-clip {
  text-overflow: clip;
  white-space: nowrap;
  overflow: hidden;
}
.text-line {
  overflow: hidden;
  word-wrap: break-word;
}
.text-pad p {
  padding: 6px 0;
}
.line-clamp
{
  display            : block;
  display            : -webkit-box;
  -webkit-box-orient : vertical;
  position           : relative;
  overflow           : hidden;
  text-overflow      : ellipsis;
  padding            : 0 !important;
}
.line-clamp:after
{
  content    : '..';
  text-align : right;
  bottom     : 0;
  right      : 0;
  width      : 25%;
  display    : block;
  position   : absolute;
  background : linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 75%);
}
@supports (-webkit-line-clamp: 1)
{
  .line-clamp:after
  {
    display : none !important;
  }
}

.line-green .line_header:before {
	border-top: 2px solid var(--color-green-500);
}
.line-red .line_header:before {
	border-top: 2px solid var(--color-red-300);
}
.line-brown .line_header:before {
	border-top: 2px solid var(--color-brown-400);
}
.line-orange .line_header:before {
	border-top: 2px solid var(--color-orange-500);
}
.line_header:before {
  position: absolute;
  left: 0;
  top: 1.2em;
  height: 0;
  width: 45px;
  content: '';
}

/* Ссылки и текст */
a {
  color: var(--color-orange-500);
  text-decoration: none;
}
a:hover {
  color: var(--color-orange-700);
  text-decoration: underline;
}
.--und-bold {
   text-decoration:underline;
   font-weight:500;
}
.grey-light {
  font-weight: 500;
  color: var(--color-grey-200);
  text-decoration: underline;
}
.grey-light:hover {
  color: var(--color-grey-300);
}
.grey-dark {
  font-weight: 500;
  color: var(--color-grey-600);
  text-decoration: none;
}
.grey-dark:hover {
  color: var(--color-grey-700);
  text-decoration: underline;
}
.red, .error {
  color: var(--color-red-400);
}
.green {
  color: var(--color-green-600);
  font-weight: 500;
}
.error {
  font-weight: 500;
}

/* Отступы */
.pad-8 {
  padding: 0.5rem;
}
.px-8 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-12 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-16 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-24 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.px-32 {
  padding-left: 2rem;
  padding-right: 2rem;
}
.py-8 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-12 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-16 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-24 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-32 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.mx-8 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.mx-12 {
  margin-left: 0.75rem;
  margin-right: 0.75rem;
}
.mx-16 {
  margin-left: 1rem;
  margin-right: 1rem;
}
.mx-24 {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}
.mx-32 {
  margin-left: 2rem;
  margin-right: 2rem;
}
.my-8 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.my-12 {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}
.my-16 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.my-24 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.my-32 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.my-48 {
  margin-top: 3rem;
  margin-bottom: 3rem;
}
.mt-16 {
  margin-top: 16px;
}
.mt-24 {
  margin-top: 1.5rem;
}
.mt-32 {
  margin-top: 2rem;
}
.ml-16 {
  margin-left: 1rem;
}
.ml-24 {
  margin-left: 1.5rem;
}
.mr-8 {
  margin-right: 0.5rem;
}
.mr-12 {
  margin-right: 0.75rem;
}
.mb-8 {
  margin-bottom: 8px;
}
.mb-16 {
  margin-bottom: 1rem;
}
.mb-24 {
  margin-bottom: 1.5rem;
}
.mb-32 {
  margin-bottom: 2rem;
}
.mb-48 {
  margin-bottom: 3rem;
}
.rad-5 {
  border-radius: 5px;
}
.rad-12 {
  border-radius: 12px;
}
.rad-24 {
  border-radius: 24px;
}
.radb-24 {
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
}
.radb-32 {
  border-bottom-left-radius: 32px;
  border-bottom-right-radius: 32px;
}
.mob-mt-32 {
	margin-top: 32px;
}

/* Блоки */
.flex-row {
  display:flex;
  flex-direction: row;
}
.flex-bl-center {
	align-items: center;
}
.flex-column, .flex-transforme {
  display:flex;
  flex-direction: column;
}
.flex-center {
	display: flex;
  justify-content: center;
}
.wd-tracf-50 {
	width: 100%;
}
.text-warn {
  max-width:450px;
  background-color: var(--color-yellow-100);
  border: 2px solid var(--color-yellow-200);
  color: var(--color-yellow-700);
}
.text-warn a {
  color: var(--color-yellow-600);
  text-decoration: underline;
}
.text-alert {
  background-color: var(--color-red-100);
  border: 2px solid var(--color-red-200);
  color: var(--color-red-700);
}
.text-appr {
  background-color: var(--color-green-100);
  border: 2px solid var(--color-green-200);
  color: var(--color-green-700);
  border-radius: 4px;
}
.relate {
	position: relative;
}
.absoluted {
  width:100%;
  height:100%;
  position:absolute;
  top:0; left:0;
}
.dt-inline {
  display: none;
}

#btnUp {
  position: fixed;
  right: 1.5rem;
  bottom: 2rem;
  width: 42px;
  height: 42px;
  background-color: var(--color-orange-300);
  border-radius: 50%;
  text-align: center;
  line-height: 60px;
  fill: var(--color-orange-700);
  transition: background-color 0.5s, color 0.5s, transform 0.6;
  box-shadow: var(--shadow-card2);
  cursor: pointer;
  opacity: 0;
  z-index: 1110;
}
#btnUp svg {
  width: 32px;
  height: 32px;
}
#btnUp:hover {
  background-color: var(--color-orange-500);
  fill: var(--color-orange-200);
  transform: scale(120%);
}

.online-now {
  width: 230px;
  margin-left: 16px;
  margin-bottom: 16px;
  padding: 8px;
  background: var(--color-background-light);
  border-radius: 0 0 14px 14px;
  white-space: nowrap;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.online-now .onow {
  display:block;
  text-align:center;
  font-family: Ubuntu;
  font-size: 14px;
  background-color: var(--color-grey-100);
  color: var(--color-grey-500);
}
.online-now svg {
  margin-right:5px;
  vertical-align: middle;
}
.online-now .boy svg {
  fill: var(--color-gender-male);
  height:20px; width:20px;
}
.online-now .girl svg {
  fill: var(--color-gender-female);
  height:18px; width:18px;
}

.onl {
	position: absolute;
	left: 32px;
	top: 32px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--color-green-500);
	border: 2px solid var(--color-green-100);
	z-index: 100;
}

/* Навигация */
.menu_item {
  width: 230px;
	margin: 16px;
}
.menu_item li {
  display: flex;
  flex-direction: row;
  align-items: center;
  /*margin-bottom: 2px;*/
  padding: 4px 0 4px 8px;
  border-radius: 8px;
  transition: background-color 0.5s, color 0.5s, transform 0.6s;
}
.menu_item .icon-wrapper {
  margin-right: 8px;
  stroke: var(--color-grey-700);
  /*background-color: var(--color-orange-200);*/
}
.menu_item a {
  font-family: 'Roboto';
  font-weight: 500;
	font-size:16px;
	color: var(--color-grey-700);
  line-height: 2;
}
.menu_item li:hover {
    background-color: var(--color-orange-300);
    .icon-wrapper {
      background-color: none;
      transform: scale(115%);
      svg {
        stroke: var(--color-orange-700);
      }
    }
    a {
      color: var(--color-orange-700);
      text-decoration: none;
    }
}

/* Доп меню */
.usmenu, .mmenu {
	border-radius: 0 0 12px 12px;
	box-shadow: var(--shadow-bot);
}
.usmenu .menu-link, .mmenu	.menu-link {
	display: block;
	width: 210px;
}
.usmenu {
	position: absolute;
  top: 48px;
  right: 2px;
  width: 210px;
	z-index: 1110;
}
.usmenu	.menu-link {
	color: var(--color-orange-700);
	background-color: var(--color-orange-200);
}
.usmenu .menu-link:hover, .usmenu .menu-link:focus-visible {
	background-color: var(--color-orange-300);
}
.mmenu {
	position: absolute;
  top: 50px;
  right: 0px;
  width: 210px;
	z-index: 1000;
}
.mmenu .menu-link {
	color: var(--color-green-700);
	background-color: var(--color-green-200);
}
.mmenu .menu-link:hover, .mmenu .menu-link:focus-visible {
	background-color: var(--color-green-300);
}
.exp_menu {
	position: relative;
	display: grid;
	margin-block-start: 0.1em;
	overflow: hidden;
	line-height: 0;
	color: transparent;
	transition: line-height 0.5s, background-color 0.5s;
}
.exp_menu svg {
  width: 24px;
  height: 24px;
  margin-right: 12px;
  vertical-align: middle;
  display: none;
}
.exp_menu a:hover {
  text-decoration: none;
}
.exp_menu li:last-child a {
  border-radius: 0 0 12px 12px;
}

.menu-active > .exp_menu {
	line-height: 1.2;
}
.menu-active > .exp_menu svg {
	display: inline;
}
.menu-active > .exp_menu .menu-link {
  padding: 0.3em 10px 0.3em 24px;
}

.scroll-x {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  flex-wrap: nowrap;
  scrollbar-width: none;
}
.carousel {
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}
.carousel div:not(:last-child) {
  margin-right: 12px;
}
.carousel img {
  border-radius: 8px;
  min-width: 150px;
  min-height: 150px;
  cursor: pointer;
}
/* pagination */
.navigate {
	margin:20px 0;
	padding:10px;
}
.navigate a, .navigate span {
	margin:0 10px;
	padding:5px 10px;
	display: inline-block;
	margin-bottom: 10px;
	border-radius: 4px;
}
.navigate a {
	text-decoration:none;
  background-color: var(--color-orange-600);
	color: var(--color-orange-100);
	transition: background-color 0.9s, color 0.4s;
}
.navigate a:hover {
	background-color: var(--color-orange-200);
	color: var(--color-orange-600);
}
.navigate span {
	padding:4px 9px;
	font-weight: bold;
	background-color: var(--color-orange-200);
	color: var(--color-orange-600);
	border: 1px solid var(--color-orange-300);
}

/* Кнопки */
.btn-small, .btn-cube {
	text-align:center;
  font-size: 16px;
	font-weight: 500;
  transition: background-color 0.5s, color 0.4s;
	cursor: pointer;
}
.btn-small {
	padding: 5px 11px;
	color: var(--color-grey-500);
	background: var(--color-grey-200);
}
.btn-small:hover, .btn_active {
	background: var(--color-grey-300);
	color: var(--color-grey-700);
}
.fsvg-16 {
    width: 16px;
		height: 16px;
	  margin-right: 4px;
	  vertical-align: middle;
}
.btn-icon20 svg, .fsvg-20 {
    width: 20px;
		height: 20px;
	  margin-right: 8px;
	  vertical-align: middle;
}
.btn-icon20 a {
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 16px;
    transition: background-color 0.5s, color 0.4s;
    background-color: var(--color-orange-100);
    color: var(--color-orange-500);
}
.btn-icon20 a:hover, .btn-icon20 a:active {
    text-decoration: none;
    background-color: var(--color-orange-500);
    color: var(--color-orange-200);
}

.btn-cube {
	padding: 8px 12px;
}

.btn-round a, .btn-round input {
  border-radius: 20px;
  transition: background-color 0.5s, color 0.5s;
  font-weight: 500;
}
.btn-round a:not(:last-child) {
  margin-right: 0.75rem;
}
.btn-round a:hover, .btn-round a:active, .btn-round input:hover, .btn-round input:active {
  text-decoration: none;
  cursor: pointer;
}
.--btn-sm a, .--btn-sm input {
    padding: 4px 16px;
}
.--btn-med a, .--btn-med input {
    padding: 8px 16px;
}
.--btn-round-yellow a, .--btn-round-yellow input {
  background-color: var(--color-yellow-500);
  border: 1px solid var(--color-yellow-500);
  color: var(--color-yellow-700);
}
.--btn-round-yellow a:hover, .--btn-round-yellow a:active, .--btn-round-yellow input:hover, .--btn-round-yellow input:active {
  background-color: var(--color-yellow-600);
  border: 1px solid var(--color-yellow-600);
  color: var(--color-yellow-200);
}
.--btn-round-yellow .nobg {
    background-color: transparent;
    border: 1px solid var(--color-yellow-500);
    color: var(--color-yellow-600);
}

.--btn-round-green a {
    background-color: var(--color-green-200);
    font-size: 16px;
    color: var(--color-green-600);
}
a.--active-green, .--btn-round-green a:hover, .--btn-round-green a:active {
    background-color: var(--color-green-500);
    color: var(--color-green-100);
}

.--btn-green {
  background-color: var(--color-green-300);
  color: var(--color-green-700);
  font-weight: 500;
}
.--btn-green:hover {
  background-color: var(--color-green-400);
}

.btn-circle a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 42px;
  height: 42px;
  text-align: center;
  border-radius: 50px;
  transition: background-color 0.5s, color 0.6s;
}
.btn-circle svg {
  width: 24px;
  height: 24px;
}
.--btn-circle-yellow a {
  background-color: var(--color-yellow-500);
  color: var(--color-yellow-700);
}
.--btn-circle-yellow a:hover, .--btn-circle-yellow a:active {
  background-color: var(--color-yellow-600);
  color: var(--color-yellow-200);
}

.ifixed {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  transition: background-color 0.3s, stroke 0.4s;
}
.ifixed svg {
  width: 24px;
  height: 24px;
}
.--btn-green-if {
  background-color: var(--color-green-100);
  border: 2px solid var(--color-green-200);
}

button, input[type=submit] {
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s ease;
}
.btn-disabled {
  opacity: 0.4;
  cursor: default;
}

/* Основные блоки */
header {
  width:100%;
	height: 50px;
	overflow:hidden;
  background-color: var(--color-orange-300);
}
main {
/*  padding: 20px;*/
}
footer {
	margin-top: 48px;
}
footer .foo_inn {
  padding: 8px 12px;
  border-radius: 12px;
  background-color: var(--color-grey-200);
  font-size: 14px;
  color: var(--color-grey-600);
}

#notify {
	position: sticky;
	top:0; left:0;
	width:100%;
	height:40px;
	display:flex;
	justify-content: space-around;
  align-items: center;
	box-shadow: 0 2px 2px 1px rgba(0,0,0,0.1);
	background: var(--color-grey-100);
	transition: 1s;
	z-index:1100;
}
#notify div {
  display:flex;
  align-items: center;
}
#notify a {
  width: 24px;
  height:24px;
  margin: 0 7%;
  color: var(--color-grey-500);
  display: inline-block;
  cursor: pointer;
}
.over {
	position:fixed;
	top:0; left:0;
	width:100%;
	height:100%;
  transform: translateZ(0);
  transition: z-index 1.7s, opacity 1.5s ease;
	background-color:hsla(41 25% 18% / 0.4);
  opacity: 0;
  z-index: -2;
}
.over-act {
  opacity: 1;
  z-index: 1005;
}
.header_hidden {
	transform: translateY(-100%);
}

#left_bar {
  position: absolute;
	left: 0;
	top: 90px;
  background-color: var(--color-background);
	border-bottom-right-radius: 20px;
  display: none;
	z-index: 1010;
}

/* Карточки */
.card {
  position: relative;
  background-color: var(--color-background-white);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  font-size: 1rem;
}
.card .ctitle {
  display: block;
  font-weight: 500;
  line-height: 1.26;
}
.card .inside_box {
  padding: 12px 12px 0 12px;
  color: var(--color-grey-700);
}
.card .line-clamp
{
	line-height: 1.5;
  -webkit-line-clamp: 5;
  max-height: calc(1rem * 1.5 * 5);
}
.card .line-clamp:after
{
	height: calc(1rem * 1.5);
}
.card .udata {
  background-color: var(--color-background-light);
  border-radius: 0 0 8px 8px;
}
/*
.card .uname a {
  font-weight:500;
  color: var(--color-grey-600);
} */
.card .ets_data {
  color: var(--color-grey-500);
}

.card .user_box_med {
  margin-left: 18px;
  font-family: Ubuntu;
  line-height: 1.4;
}

.card:hover {
  box-shadow: var(--shadow-card2)
}

.--card-green .bg {
  background-color: var(--color-green-200);
}
.--card-green .ctitle {
  color: var(--color-green-700);
}
.--card-green .ctitle:hover {
  background-color: var(--color-green-300);
  color: var(--color-green-700);
  text-decoration: none;
}

.card2 {
  /*position: relative;*/
  background-color: var(--color-background-white);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  font-size: 1rem;
}

/* Иконки */
.icon-24 {
	width: 24px;
	height: 24px;
}
.icon-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.icon-wrapper svg {
  width: 24px;
  height: 24px;
  /*fill: var(--color-text-main);*/
}
.super {
  background-image: url('data:image/svg+xml,<svg style="fill: hsl(36, 100%, 45%);" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="64" height="64" viewBox="0 0 32 32"><path d="M 16 4 C 12.854136 4 9.7087363 4.3003708 6.5664062 4.9003906 C 6.0587175 4.9972778 5.5467669 5.1840922 5.0820312 5.5 C 3.4381186 6.6122111 2.2368262 8.0515188 1.4003906 9.7265625 C 0.87222088 10.785447 0.90488107 11.986782 1.3339844 13.03125 A 1.0001 1.0001 0 0 0 1.4042969 13.240234 C 1.4067511 13.245658 1.4096473 13.250446 1.4121094 13.255859 C 1.4139581 13.259737 1.4161181 13.263701 1.4179688 13.267578 C 1.5404219 13.535806 1.6754372 13.788873 1.8164062 14.033203 C 3.3848991 17.105404 5.5592554 20.167741 8.3066406 22.892578 A 1.0002634 1.0002634 0 0 0 8.515625 23.089844 C 10.103747 24.639453 11.860929 26.083663 13.806641 27.339844 C 15.138677 28.200421 16.858736 28.199973 18.191406 27.339844 A 1.0001 1.0001 0 0 0 18.193359 27.339844 C 23.909798 23.649224 28.126366 18.417522 30.587891 13.255859 C 31.108584 12.163704 31.164915 10.859902 30.599609 9.7265625 C 29.786505 8.0983368 28.62171 6.6984442 27.048828 5.5996094 A 1.0001 1.0001 0 0 0 26.662109 5.3632812 C 26.268083 5.1411997 25.852833 4.9803982 25.433594 4.9003906 C 22.291264 4.3003708 19.145864 4 16 4 z M 16 5.9980469 C 19.018636 5.9980469 22.036924 6.2863012 25.058594 6.8632812 A 1.0001 1.0001 0 0 0 25.058594 6.8652344 C 25.237373 6.8993527 25.402997 6.9586882 25.556641 7.0292969 C 26.069089 8.3719937 26.028091 9.7503488 25.384766 10.828125 C 24.807313 10.966785 23.781959 11.022816 22.947266 10.605469 C 20.887637 9.5756543 19.166667 9 17 9 C 15.741579 9 14.578453 9.2704443 13.650391 9.8320312 C 12.722328 10.393618 12 11.353556 12 12.5 C 12 13.204583 12.25303 13.883806 12.689453 14.363281 C 13.125876 14.842757 13.684476 15.125611 14.271484 15.324219 C 15.445501 15.721435 16.822378 15.820278 18.273438 15.958984 C 20.911984 16.211202 23.632205 16.592583 25.236328 18.121094 C 23.066547 20.938968 20.339316 23.573596 17.107422 25.660156 C 16.432092 26.096027 15.566542 26.095579 14.892578 25.660156 C 14.078868 25.134813 13.306496 24.565226 12.556641 23.976562 C 13.59748 24.032786 14.527702 23.941298 15.324219 23.720703 C 16.155808 23.490395 16.857609 23.121829 17.367188 22.572266 C 17.876766 22.022702 18.160697 21.240211 18.042969 20.478516 C 17.93688 19.79226 17.497246 19.214021 16.988281 18.855469 C 16.479316 18.496916 15.900203 18.286856 15.267578 18.111328 C 14.002329 17.760273 12.485566 17.566878 10.919922 17.25 C 8.0113399 16.661318 5.1104213 15.730548 3.5605469 13.056641 C 3.4518078 12.842486 3.3286845 12.627844 3.2265625 12.414062 A 1.0001 1.0001 0 0 0 3.2167969 12.394531 C 2.9378545 11.810147 2.9247608 11.149801 3.1894531 10.619141 C 3.8926151 9.2109899 4.8422083 8.0778182 6.2050781 7.15625 A 1.0001 1.0001 0 0 0 6.2070312 7.1542969 C 6.4042988 7.0202016 6.663095 6.9183472 6.9414062 6.8652344 A 1.0001 1.0001 0 0 0 6.9414062 6.8632812 C 9.9630762 6.2862979 12.981364 5.9980469 16 5.9980469 z M 27.939453 9.2226562 C 28.261395 9.659149 28.559064 10.115521 28.810547 10.619141 C 29.075239 11.149801 29.062505 11.810639 28.783203 12.396484 C 28.134551 13.756667 27.338166 15.123839 26.427734 16.46875 C 24.222807 14.497473 21.034055 14.212573 18.462891 13.966797 C 17.00045 13.827003 15.693968 13.69422 14.912109 13.429688 C 14.52118 13.29742 14.282905 13.1419 14.167969 13.015625 C 14.053032 12.88935 14 12.795417 14 12.5 C 14 12.146444 14.169563 11.856382 14.6875 11.542969 C 15.205437 11.229556 16.042421 11 17 11 C 18.833333 11 20.112363 11.424345 22.052734 12.394531 C 23.653824 13.195076 25.336505 13.117854 26.496094 12.621094 A 1.0001 1.0001 0 0 0 26.908203 12.292969 C 27.589374 11.363221 27.899517 10.300969 27.939453 9.2226562 z M 6.765625 18.123047 C 8.0180784 18.634169 9.3172839 18.964865 10.523438 19.208984 C 12.173042 19.542856 13.697108 19.749852 14.732422 20.037109 C 15.250079 20.180738 15.636739 20.349904 15.835938 20.490234 C 16.035135 20.630565 16.048745 20.670912 16.066406 20.785156 C 16.090176 20.938961 16.074206 21.025423 15.900391 21.212891 C 15.726563 21.400358 15.359051 21.635652 14.791016 21.792969 C 13.692859 22.097102 11.887255 22.09417 9.6347656 21.392578 C 8.5893761 20.347813 7.633938 19.250726 6.765625 18.123047 z"></path></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-color: var(--color-grey-200);
  cursor: pointer;
}
.super:hover {
  background-color: var(--color-grey-300);
}
.check {
  background-image: url('data:image/svg+xml,<svg style="stroke:hsl(79, 80%, 25%);" width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 12L11 14L15.5 9.5M17.9012 4.99851C18.1071 5.49653 18.5024 5.8924 19.0001 6.09907L20.7452 6.82198C21.2433 7.02828 21.639 7.42399 21.8453 7.92206C22.0516 8.42012 22.0516 8.97974 21.8453 9.47781L21.1229 11.2218C20.9165 11.7201 20.9162 12.2803 21.1236 12.7783L21.8447 14.5218C21.9469 14.7685 21.9996 15.0329 21.9996 15.2999C21.9997 15.567 21.9471 15.8314 21.8449 16.0781C21.7427 16.3249 21.5929 16.549 21.4041 16.7378C21.2152 16.9266 20.991 17.0764 20.7443 17.1785L19.0004 17.9009C18.5023 18.1068 18.1065 18.5021 17.8998 18.9998L17.1769 20.745C16.9706 21.2431 16.575 21.6388 16.0769 21.8451C15.5789 22.0514 15.0193 22.0514 14.5212 21.8451L12.7773 21.1227C12.2792 20.9169 11.7198 20.9173 11.2221 21.1239L9.47689 21.8458C8.97912 22.0516 8.42001 22.0514 7.92237 21.8453C7.42473 21.6391 7.02925 21.2439 6.82281 20.7464L6.09972 19.0006C5.8938 18.5026 5.49854 18.1067 5.00085 17.9L3.25566 17.1771C2.75783 16.9709 2.36226 16.5754 2.15588 16.0777C1.94951 15.5799 1.94923 15.0205 2.1551 14.5225L2.87746 12.7786C3.08325 12.2805 3.08283 11.7211 2.8763 11.2233L2.15497 9.47678C2.0527 9.2301 2.00004 8.96568 2 8.69863C1.99996 8.43159 2.05253 8.16715 2.15472 7.92043C2.25691 7.67372 2.40671 7.44955 2.59557 7.26075C2.78442 7.07195 3.00862 6.92222 3.25537 6.8201L4.9993 6.09772C5.49687 5.89197 5.89248 5.4972 6.0993 5.00006L6.82218 3.25481C7.02848 2.75674 7.42418 2.36103 7.92222 2.15473C8.42027 1.94842 8.97987 1.94842 9.47792 2.15473L11.2218 2.87712C11.7199 3.08291 12.2793 3.08249 12.7771 2.87595L14.523 2.15585C15.021 1.94966 15.5804 1.9497 16.0784 2.15597C16.5763 2.36223 16.972 2.75783 17.1783 3.25576L17.9014 5.00153L17.9012 4.99851Z"/></svg>');
  background-repeat: no-repeat;
}

/* Аватары */
.avatar_med, .avatar_l {
  position: relative;
  text-align: center;
  background: var(--color-grey-100);
  text-transform: capitalize;
  color: var(--color-grey-600)
}
.avatar_med, .avatar_med img, .avatar_l, .avatar_l img {
  object-fit: cover;
  border-radius: 50%;
}
.avatar-outline, .image-outline {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-shadow: var(--shadow-avatar);
}
.avatar-outline {
    border-radius: 50%;
}

.avatar_med {
  line-height: 42px;
}
.avatar_med, .avatar_med img {
  width: 42px;
  height: 42px;
}
.avatar_l {
  line-height: 64px;
}
.avatar_l, .avatar_l img {
  width: 64px;
  height: 64px;
}

/* Формы */
.radio {
  margin: 0.5rem;
  position: relative;
}
.radio input[type="radio"] {
  position: absolute;
  opacity: 0;
}
.radio-label {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.radio-label:before {
  content: '';
  background: hsl(39, 21%, 88%);
  border-radius: 100%;
  border: 1px solid var(--color-grey-300);
  display: inline-block;
  width: 1rem;
  height: 1rem;
  position: relative;
  margin-right: 0.5rem;
  vertical-align: top;
  cursor: pointer;
  text-align: center;
  transition: all 250ms ease;
}
.radio input[type="radio"]:checked + .radio-label:before {
  background-color: var(--color-grey-400);
  box-shadow: inset 0 0 0 4px hsl(39, 21%, 88%);
}
.radio input[type="radio"]:focus + .radio-label:before {
  outline: none;
  border-color: var(--color-grey-400);
}
.radio-label:empty:before {
  margin-right: 0;
}

.round-checkbox + label:before,
.round-checkbox:checked + label:after {
	transition: all 250ms ease;
}
.round-checkbox {
	position: absolute;
	opacity: 0;
	cursor: pointer;
}
.round-checkbox + label {
	position: relative;
	padding-left: 30px;
	cursor: pointer;
	line-height: 24px;
	display: inline-block;
}
.round-checkbox + label:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 24px;
	height: 24px;
	border: 2px solid var(--color-grey-100);
	background: var(--color-background-light);
	border-radius: 50%;
}
.round-checkbox:checked + label:after {
	content: '';
	position: absolute;
	left: 5px;
	top: 5px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	animation: pulse 0.5s;
	background: var(--color-yellow-300);
}
@keyframes pulse {
	0% { transform: scale(0); }
	50% { transform: scale(1.5); }
	100% { transform: scale(1); }
}

select, ::picker(select) {
  appearance: base-select;
}
::picker(select) {
  border: none;
}
select::picker-icon {
  color: var(--color-grey-400);
  transition: rotate 0.4s;
}
select:open::picker-icon {
  rotate: 180deg;
}
select {
  border: 1px solid var(--color-grey-300);
  background: var(--color-grey-100);
  color: var(--color-grey-500);
  padding: 10px;
  transition: background-color 0.4s;
}
select:hover, select:focus {
  background: var(--color-grey-200);
}
option {
  display: flex;
  justify-content: flex-start;
  gap: 20px;
  border: 2px solid solid var(--color-grey-300);
  background: solid var(--color-grey-100);
  padding: 10px;
  transition: 0.4s;
}
option:first-of-type {
  border-radius: 8px 8px 0 0;
}
option:last-of-type {
  border-radius: 0 0 8px 8px;
}
option:not(option:last-of-type) {
  border-bottom: none;
}
option:nth-of-type(odd) {
  background: #fff;
}
option:hover, option:focus {
  background: var(--color-brown-300);
  color: var(--color-brown-700);
}
option:checked {
  font-weight: 500;
}

input[type=text], input[type=password], textarea, select {
  width: 100%;
  padding: 8px;
  border-radius: 5px;
  font-size: 16px;
}
.form input[type=text], .form input[type=password], .form textarea, select {
  margin: 12px 0;
}
input[type=submit], select {
  cursor: pointer;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--color-grey-300);
  box-shadow: 0 0 3px var(--color-grey-100);
}
label {
  display: block;
  margin-bottom: -10px;
  font-size: 16px;
  color: var(--color-text-secondary);
  text-align: left;
}

.--inp-grey {
    border: 1px solid var( --color-grey-200);
    background-color: var( --color-grey-100);
    font-family: Ubuntu;
    font-weight: 400;
    color: var(--color-grey-700);
}
.--label-grey {
    color: var(--color-grey-600);
    font-weight: 400;
}

.--inp-yellow input, .--inp-yellow textarea, .--inp-yellow select {
  border: 1px solid var(--color-yellow-200);
  color: var(--color-yellow-700);
}
.--inp-yellow label {
  font-weight: 500;
  color: var(--color-yellow-600);
}
.--inp-yellow input:focus, .--inp-yellow textarea:focus, .--inp-yellow select:focus {
  border: 1px solid var(--color-yellow-400);
  box-shadow: 0 0 3px var(--color-yellow-100);
}

.inpAlert {
  border-color: var(--color-red-300);
  background-color: var(--color-red-100);
}

/* Основной, общий интерфейс */
.umenu, .header_btn {
  position: absolute;
}
.header_btn {
  right: 12px;
	top: 12px;
}
.umenu {
  right: 12px;
	top: 4px;
}
.uicon img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
}
.umenu svg {
  fill: var(--color-orange-700);
  cursor: pointer;
}
.usetting {
  margin: 10px 12px 0 32px;
  width: 24px;
  height: 24px;
}

.icons svg {
  width: 16px;
  height: 16px;
  margin-right: 4px;
  vertical-align: sub;
}

.--user-info {
	position: absolute;
  min-width: 170px;
  border-radius: 80px 5px;
  background-color: var(--color-grey-300);
  color: var(--color-grey-600);
  z-index: 100;
  font-size: 14px;
  line-height: 1.3;
  box-shadow: var(--shadow-card2);
  transition: opacity 1s, top 0.6s, left 0.6s;
  opacity: 0;
	z-index: -10;
}
.--user-info img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--color-grey-300);
}
.--user-info a {
  font-weight: 500;
  color: var(--color-grey-700);
  line-height: 1.25;
}
.--user-info .icons svg {
  stroke: var(--color-grey-500);
}
.--user-info .uinf {
  width: 100%;
  padding: 24px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.--user-info .uinf div {
  width: 100%;
  line-height: 24px;
}
.--user-info .uinf .utitle {
  text-align: center;
  margin-bottom: 4px;
  font-size: 16px;
  font-weight: 500;
}
.--user-info .uimg {
  height: 50px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(-30%);
}

.iclose {
  position: absolute;
  top:-10px; right:-10px;
  width:32px;
  height:32px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-grey-600);
  border-radius: 50%;
  border: 2px solid var(--color-grey-300);
  transition: background-color 0.3s, stroke 0.4s;
}
.iclose svg {
  width:24px;
  height:24px;
  stroke: var(--color-grey-200);
}
.iclose:hover {
  background-color: var(--color-grey-200);
  cursor: pointer;
}
.iclose:hover svg {
  stroke: var(--color-grey-400);
}

#ushow.--user-info {
  right: 10%;
}

.mini_pop {
  position: absolute;
  width: 300px;
  padding: 8px 24px;
  background-color: var(--color-yellow-100);
  border: 2px solid var(--color-yellow-300);
  border-radius: 12px;
  color: var(--color-grey-500);
  box-shadow: var(--shadow-card2);
	z-index: 100;
  display: none;
}
.mini_pop a {
  font-weight: 500;
  color: var(--color-yellow-600);
}

/* Home */
.news .card {
  justify-content: space-between;
  margin-bottom: 32px;
}
.tops {
  background-color: var(--color-yellow-200);
  margin-bottom: 48px;
  border-bottom: 5px solid var(--color-yellow-300);
}
.tops  .carousel {
    padding-left: 0.75rem;
}
.but_phtop {
  margin-top: 24px;
  text-align: center;
}
#ftheme, #gtheme {
  overflow-x: auto;
  white-space: nowrap;
  flex-wrap: nowrap;
  scrollbar-width: none;
}
#ftheme .card, #gtheme .card {
  width: 75%;
  margin-right: 24px;
  justify-content: space-between;
}

/* Login form */
.form_login {
	width: 100%;
	padding: 24px;
	text-align: center;
}
.form_login	.login-inner {
  max-width: 300px;
  margin: 0 auto;
	background-color: var(--color-yellow-100);
	border-radius:12px;
	box-shadow: var(--shadow-card);
}
.form_login_inner {
	width: 240px;
	margin: 0 auto;
}

/* User anketa */
.uinfo_prof {
	margin-left: 12px;
	margin-top: 12px;
}
.nimgDiv, .imgDiv {
	width: 0;
	height: 0;
	overflow: hidden;
	position:relative;
	margin: 12px;
  border-radius: 8px;
	transition: margin 0.5s, width 0.6s linear, height 0.6s linear;
  cursor: pointer;
}
.imgDiv, .nim {
	width: 140px;
	height: 140px;
}
.nim {
  object-fit: cover;
  border-radius: 8px;
}