:root {
  --bg-color: var(--tg-theme-bg-color, #ffffff); /* Фоновый цвет */
  --text-color: var(--tg-theme-text-color, #222222); /* Основной цвет текста */
  --hint-color: var(--tg-theme-hint-color, #a8a8a8); /* Цвет текста подсказок */
  --link-color: var(--tg-theme-link-color, #2778b7); /* Цвет ссылок */
  --button-color: var(--tg-theme-button-color, #50a7ea); /* Цвет кнопок */
  --button-text-color: var(--tg-theme-button-text-color, #ffffff); /* Цвет текста кнопок */
  --secondary-bg-color: var(--tg-theme-secondary-bg-color, #f0f0f0); /* Вторичный фоновый цвет */
  --header-bg-color: var(--tg-theme-header-bg-color, #517da2); /* Цвет фона заголовка */
  --accent-text-color: var(--tg-theme-accent-text-color, #1c93e3); /* Акцентный цвет текста */
  --section-bg-color: var(--tg-theme-section-bg-color, #ffffff); /* Цвет фона секций */
  --section-header-text-color: var(--tg-theme-section-header-text-color, #3995d4); /* Цвет текста заголовков секций */
  --subtitle-text-color: var(--tg-theme-subtitle-text-color, #82858a); /* Цвет текста подзаголовков */
  --destructive-text-color: var(--tg-theme-destructive-text-color, #cc2a28); /* Цвет текста действий с потенциальным удалением данных */
  --green-text-color: #32a852;
  --black-text-color: #000000;
  --white-text-color: #FFFFFF;
}

[data-theme="dark"] {
  --bg-color: var(--tg-theme-bg-color, #212d3b); /* Фоновый цвет */
  --text-color: var(--tg-theme-text-color, #ffffff); /* Основной цвет текста */
  --hint-color: var(--tg-theme-hint-color, #7d8b98); /* Цвет текста подсказок */
  --link-color: var(--tg-theme-link-color, #5eabe1); /* Цвет ссылок */
  --button-color: var(--tg-theme-button-color, #50a7ea); /* Цвет кнопок */
  --button-text-color: var(--tg-theme-button-text-color, #ffffff); /* Цвет текста кнопок */
  --secondary-bg-color: var(--tg-theme-secondary-bg-color, #151e27); /* Вторичный фоновый цвет */
  --header-bg-color: var(--tg-theme-header-bg-color, #252d3a); /* Цвет фона заголовка */
  --accent-text-color: var(--tg-theme-accent-text-color, #64b4ef); /* Акцентный цвет текста */
  --section-bg-color: var(--tg-theme-section-bg-color, #1d2733); /* Цвет фона секций */
  --section-header-text-color: var(--tg-theme-section-header-text-color, #79c4fd); /* Цвет текста заголовков секций */
  --subtitle-text-color: var(--tg-theme-subtitle-text-color, #7a8790); /* Цвет текста подзаголовков */
  --destructive-text-color: var(--tg-theme-destructive-text-color, #ee686f); /* Цвет текста действий с потенциальным удалением данных */
  --green-text-color: #32a852;
  --black-text-color: #000000;
  --white-text-color: #FFFFFF;
}

/* ОТСТУПЫ */

.ml-10 {
	margin-left: 1rem;
}

.mr-10 {
	margin-right: 1rem;
}

.mt-1 {
	margin-top: 1rem;
}

.mb-1 {
	margin-bottom: 1rem;
}

/* ОТСТУПЫ */
.scale:active {
	scale:0.99;
}
html, body {
    height: 100%;
    margin: 0;  
    padding: 0;  
}

body {
    font-family: "Montserrat", sans-serif;
    background-image: linear-gradient(135deg, var(--secondary-bg-color), var(--bg-color), var(--secondary-bg-color)); 
    background-size: cover; 
    background-position: center;
    background-attachment: fixed;
    color: var(--text-color);
    font-weight: 300;
    font-size: 16px;
    line-height: 1.5;
    color-scheme: var(--tg-color-scheme);
    user-select: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    -webkit-tap-highlight-color: transparent;
    transition: all 0.3s ease;

    overflow-x: hidden; /* Избегаем горизонтальной прокрутки */
}
h1, h2, h3, h4, h5, h6 {
  font-weight: 500;
  text-rendering: optimizelegibility;
  -webkit-font-smoothing: antialiased;
  text-transform: uppercase;
}

hr.hr-1 {
  border: 0;
  height: 1px;
  margin: 10px 0;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

.hint-text {
	font-weight:900;
	font-size: 10px;
	text-transform: uppercase;
	color: var(--hint-color);
}

.center-hint {
	font-weight:900;
	font-size: 10px;
	text-transform: uppercase;
	text-align: center;
	color: var(--hint-color);
}

.disabled {
	opacity: 0.5;
}

fieldset {
    border: 2px solid var(--secondary-bg-color);;
    border-radius: 5px;
    padding: 10px;
    margin: 10px 0;
}

fieldset legend {
	color:var(--section-header-text-color);
	font-weight:900;
	font-size: 12px;
	text-transform: uppercase;
	padding: 0 10px;
}

/* БЕЙДЖИ */

.badge {
 margin:0;
  text-transform: uppercase;
  font-weight: 600;
  padding: 4px 8px;
  text-align: center;
  border-radius: 5px;
  line-height:1.3;
}

.minibadge {
	font-size: 0.7em;
 margin:0;
  text-transform: uppercase;
  font-weight: 600;
  padding: 4px 8px;
  text-align: center;
  border-radius: 5px;
  line-height:1.3;
}

.badge.dark, .minibadge.dark {
	background-color: var(--secondary-bg-color);
	color:var(--accent-text-color);
}

.badge.accent, .minibadge.accent {
	background-color: var(--accent-text-color);
	color:white;
}

.badge.red, .minibadge.red {
	background-color: var(--destructive-text-color);
	color:var(--white-text-color);
}

.red-text {
	color: var(--destructive-text-color);
}

.green-text {
	color: var(--green-text-color);
}

.accent-text {
	color: var(--accent-text-color);
}

.badge.green, .minibadge.green {
	background-color: var(--green-text-color);
	color:var(--black-text-color);
}
.badge.section, .minibadge.section {
	background-color: var(--section-bg-color);
	color:var(--text-color);
}

/* ШАПКА */
.header {
  /*background-color: var(--header-bg-color);*/
  width: 100%;
  padding: 0.6rem 0; /* Вы можете изменить эти значения в зависимости от желаемой высоты шапки */
  /*box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14), 0 10px 10px -4px rgba(0, 0, 0, 0.09);*/
}

.header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height:50px;
  width: 100%;
  max-width: 1000px; /* Максимальная ширина контейнера */
  margin: 0 auto;
  padding: 0 1rem; /* Отступы справа и слева */
}

.logo {
	font-size: 1.2rem;
	line-height: 1;
	font-weight: 700;
	color: var(--text-color); 
}

.logo a {
	color: var(--text-color); 
	text-decoration: none
}

.sub-logo {
	color:var(--hint-color);
	font-weight: 400;
	font-size: 11px;
}

.sub-logo a {
  text-decoration: none;
  color: var(--hint-color);
  border-bottom: 1px dashed;
  border-bottom-color: var(--hint-color);
}
.sub-logo a:hover {
  text-decoration: none;
  color: var(--hint-color);
  border-bottom-color: var(--hint-color);
}
.sub-logo a:visited {
  text-decoration: none;
  color: var(--hint-color);
  border-bottom-color: var(--hint-color);
}

.nav-buttons {
  display: flex;
  gap: 5px; /* Расстояние между кнопками */
}

/* КОНЕЦ ШАПКИ */

.button {
			display: inline-block;	
			box-sizing: border-box;
			padding: 0px 5px;
			margin: 5px 0;
			outline: none;
			border: none;  
			border-radius: 4px;
			height: 37px;
			line-height: 37px;
			width: 100%;
			text-align: center;
			color: var(--tg-theme-button-text-color);
			background-color: var(--tg-theme-button-color);
			position: relative;
			overflow:hidden;
			vertical-align: top;
			cursor: pointer;
			user-select: none;
			appearance: none;
			touch-action: manipulation; 
			z-index: 1;
		}

.mdi {
  font-size : 1.2rem;
}

.btn {
  background: var(--button-color);
  border-radius : 5px;
  box-shadow : 0 3px 6px rgba(0,0,0,0.1);
  padding :  0.3em 0.8em;
  margin : 0px;
  font-size : 0.8em;
  font-weight : 100;
  color: var(--button-text-color);
}

.btn:hover {
  cursor : pointer;
}

.btn:disabled {
  box-shadow : none;
  opacity : 30%;
}

.btn i {
	font-size : 0.9em;
}

.icon-btn {
  display : inline-flex;
  justify-content : center;
  align-items : center;
}

.icon-btn .mdi::before {
  display : flex !important;
  align-items : center;
}

.small-icon-btn {
  height : 30px;
  width : 30px;
}

.super-small-icon-btn {
  height : 28px;
  width : 28px;
}
.small-icon-btn .mdi {
  font-size : 1.4rem;
}

.medium-icon-btn {
  height : 48px;
  width : 48px;
}

.medium-icon-btn .mdi {
  font-size : 1.8rem;
}

/** Simple icon button **/
.simple-icon-btn {
  background-color : transparent;
  color : #1E4E66;
  border : none;
  box-shadow : none;
}

.simple-icon-btn:not(disabled):hover {
  background-color : #E9EDF0;
  color : #1E4E66;
  box-shadow : none;
}

.simple-icon-btn:focus {
  outline: solid #1E4E66;
  outline-offset: 2px;
}

/** Primary button **/
.primary-btn {
  font-size: 0.8rem;
  background-color : var(--button-color);
  color : var(--button-text-color);
  border: none;
}

.a-btn {
	font-weight: 600;
	text-decoration: none;
  width: 100%;
  text-align: center;
  margin: 0;
  padding: 0.7rem 0.8rem;
  border-radius: 0.5rem;
  font-size: 0.8rem;
  border: none;
  box-sizing: border-box; 
}

a.a-btn  {
	text-decoration: none
}

.a-btn-mini {
	font-weight: 600;
	text-decoration: none;
  width: 100%;
  text-align: center;
  margin-top: 0.5rem;
  padding: 0.5rem 0.7rem;
  border-radius: 0.5rem;
  font-size: 0.8rem;
  border: none;
  box-sizing: border-box; 
}

a.a-btn-mini  {
	text-decoration: none
}

/** destructive button **/
.destructive-btn {
  background-color : var(--destructive-text-color);
  color : var(--button-text-color);
  border: none;
}

.destructive-btn:not(disabled):hover {
  background-color : var(--secondary-bg-color);
  color : var(--destructive-text-color);
  box-shadow : none;
}

.destructive-btn:focus {
  outline: solid var(--destructive-text-color);
  outline-offset: 1px;
}


/* КОНТЕЙНЕРЫ */
.container {
  align-items: center;
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 1rem 0 1rem;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}




.fullcontainer {
  align-items: center;
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 1rem 0 1rem;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
}

.fullcontainer a {
  text-decoration: none;
  color: var(--accent-text-color);
}
.fullcontainer a:hover {
  text-decoration: none;
  color: var(--accent-text-color);
  border-bottom-color: var(--accent-text-color);
}
.fullcontainer a:visited {
  text-decoration: none;
  color: var(--accent-text-color);
  border-bottom-color: var(--accent-text-color);
}

.fullcontainer:last-child {
  margin-bottom:0px;
}
/* КОНТЕЙНЕР */

/* КАРТЫ */
.card, .pagecard {
	text-decoration: none;
	padding: 1rem;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  outline: none;
  display: flex;
  flex: 0 0 100%;
  flex-direction: row;
  align-items: center;
  border-radius: 0.5rem;
  box-sizing: border-box;
  background-color: var(--secondary-bg-color);
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14), 0 10px 10px -4px rgba(0, 0, 0, 0.09);
}
.card:hover {
	box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.24), 0 10px 10px -4px rgba(0, 0, 0, 0.19);
}

.card .image {
    border-radius: 0.5rem;
    background-color: var(--bg-color);
    background-size: cover; /* или cover contain в зависимости от нужд */
    background-position: center;
    background-repeat: no-repeat; /* чтобы избежать повторения */
    width: 300px;
    height: 170px;
    margin-right: 1rem;
    flex-shrink: 0;
}

.card-avatar {
    padding: 10px;
	margin: 10px;
	border-radius: 5px;
	background-color: var(--bg-color);
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0.6;
	box-shadow: 0 2px 3px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.1);
}

.card-avatar svg {
	color:var(--subtitle-text-color);
	width: 30px;
	height: 30px;
}


.card-title {
  color:var(--text-color);
	font-weight:700;
	font-size: 1rem;
	padding:0;
	margin: 0;
	line-height: 1.3;
	text-transform: uppercase;
}

.card-subtitle {
  color:var(--text-color);
	font-weight:500;
	font-size: 0.6rem;
	padding:0;
	margin: 0;
	line-height: 1.3;
	text-transform: uppercase;
}

.card-price {
	text-align: right;
  color:var(--accent-text-color);
	font-weight:900;
	font-size: 0.8rem;
	padding:0;
	margin: 1rem 0 0 0;
	line-height: 1.5;
}

.card-stak {
  color:var(--subtitle-text-color);
	font-size: 0.7rem;
	font-weight:400;
	padding:0;
	margin: 0.3rem 0;
	line-height: 1.3;
	text-transform: uppercase;
}

.card-tags {
	text-align: right;
	font-size: 0.9rem;
	padding-top:0.5rem;
	margin:0;
	line-height: 1.3;
	text-transform: uppercase;
}

.card-description {
  color:var(--subtitle-text-color);
	font-size: 10px;
	font-weight:500;
	padding:0;
	margin: 0.5rem 0;
	line-height: 1.5;
	text-transform: uppercase;
}

.card-text {
  color:var(--subtitle-text-color);
	font-size: 0.8rem;
	font-weight:400;
	padding:0;
	margin: 0.5rem 0;
	gap: 1rem;
}
.card-text p {
  color:var(--text-color);
	font-size: 0.8rem;
	font-weight:400;
	padding:0;
	margin: 0.7rem 0;
}

.card-text p:first-child {
	margin-top: 0;
}
.card-text p:last-child {
	margin-bottom: 0;
}

.card-text a {
	color: var(--accent-text-color);
	text-decoration: none;
}

/* КОНТЕНТ */
.fullcard {
  user-select: none;
  position: relative; 
  width: 100%;
  outline: none;
  flex-direction: column;
  display: flex;
  border-radius: 0.5rem;
  background-color: var(--secondary-bg-color);
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14), 0 10px 10px -4px rgba(0, 0, 0, 0.09);
  text-align: left; /* Выравнивание текста по левому краю */
}

.newscard {
	font-weight: 500;
  padding:1rem;
  font-size: 0.8em;
  user-select: none;
  position: relative; 
  width: 100%;
  outline: none;
  flex-direction: column;
  display: flex;
  border-radius: 0.5rem;
  color: var(--subtitle-text-color);
  background-color: var(--section-bg-color);
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14), 0 10px 10px -4px rgba(0, 0, 0, 0.09);
  text-align: left; /* Выравнивание текста по левому краю */
}


.alert-bg {
	color: var(--text-color);
	background-color: var(--destructive-text-color);
}

.info-bg {
	color: var(--text-color);
	background-color: var(--accent-text-color);
}

.dark-bg {
	color: var(--text-color);
	background-color: var(--section-bg-color);
}


.fullcard .content {
  padding:1rem;
  font-size: 0.8em;
  display: flex;
  flex-direction: column;
  margin:0;
  justify-content: center;
}

.newscard .content i {
	font-size: 0.9em;
}

.fullcard .title {
	padding:10px 10px 0 10px;
    color:var(--section-header-text-color);
	font-weight:900;
	font-size: 12px;
	text-transform: uppercase;
}


/* Адаптация для мобильных устройств */
@media (max-width: 600px) {
  .card {
  	align-items: start;
  	flex-direction: column;
    flex: 0 0 100%; /* На мобильных устройствах карта будет на всю ширину */
  }
  
  .card-content {
  	text-align: left;
  }
  
  .card .image {
    height: 195px;
  	width: 100%;
  	margin-bottom: 1rem;
  }
  
  .fullcard {
    flex: 0 0 100%; /* На мобильных устройствах карта будет на всю ширину */
  }

  
}
/* КАРТЫ */


/* Стрелочки */
.r-arrow {
  right: 10px;
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-sizing: border-box;
}

.r-arrow:before,
.r-arrow-circ:before {
  content:"";
  position: absolute;
  left: 10px;
  top: 50%;
  width: 35%;
  height: 35%;
  border-right: 4px solid var(--subtitle-text-color);
  border-bottom: 4px solid var(--subtitle-text-color);
  -webkit-transform: translate(-70% -50%) rotate(-45deg);
  transform: translate(-70%, -50%) rotate(-45deg);
}

/* Заголовок для страницы */
.page-header {
  width: 100%;
  text-align: left; 
}

.page-pretitle {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--subtitle-text-color);
  text-transform: uppercase; /* Заглавные буквы для подзаголовка */
  margin-bottom: 0;
}

.page-title {
  font-size: 1.3rem;
  color: var(--text-color);
  font-weight: 700;
  text-transform: uppercase; /* Заглавные буквы для заголовка */
  margin-top: -5px;
}

/* ФОРМЫ */

form {
    margin:0;
}

button {
	font-family: "Montserrat", sans-serif;
    display: inline-block;
    padding: 12px 20px;
    border: none;
    border-radius: 0.5rem;
    font-weight: 600;
    background-color: var(--button-color);
    color: var(--button-text-color);
    cursor: pointer;
    margin: 0;
}

.button-small {
    display: inline-block;
    font-size: 11px;
    margin: 2px;
    padding: 6px 10px;
    border: none;
    border-radius: 4px;
    background-color: var(--button-color);
    color: var(--button-text-color);
    cursor: pointer;
}
.button-small:first-child {
    margin-left: 0;
}

.button-legend {
    display: inline-block;
    font-size: 10px;
    margin: 2px;
    padding: 3px 10px;
    border: none;
    border-radius: 4px;
    background-color: var(--button-color);
    color: var(--button-text-color);
    cursor: pointer;
    text-transform: uppercase;
}

.button-legend:last-child {
    margin-right: 0;
}

.blue-bg {
	background-color: var(--button-color);
	color: var(--button-text-color);
}

.section-bg {
	background-color: var(--section-bg-color);
	color: var(--text-color);
}

.text-color {
	color: var(--text-color);
}
.hint-color {
	color: var(--hint-color);
}
.red-bg {
	background-color: var(--destructive-text-color);
	color: var(--button-text-color);
}

.green-bg {
	background-color: var(--green-text-color);
	color: var(--button-text-color);
}

.red {
	background-color: var(--secondary-bg-color);
	color: var(--destructive-text-color);
}

.dark {
    background-color: var(--secondary-bg-color);
    color: var(--text-color);
}

      
.w-100 {
    width:100%;
}
        
button[disabled] {
    opacity: 0.6;
    cursor: auto;
    pointer-events: none;
}

.button-container {
	width:100%;
    display: flex;
}

.button-container div {
	width:100%;
}

.button-container > div:first-child {
    margin-right: 10px;
}

@media (max-width: 900px) {
    .button-container {
        flex-direction: column; /* Ставим элементы в колонку */
    }

    .button-container > div:first-child {
        margin-right: 0; /* Убираем отступ справа у первой кнопки */
    }
    
    /* Сбросим стиль для второй кнопки, если он был установлен */
    .button-container > div {
        margin-right: 0; 
    }
}

label {
	color: var(--subtitle-text-color);
	font-weight: 900;
	font-size: 0.7rem;
	text-transform: uppercase;
}

input[type="checkbox"] {
    padding: 0;
    margin: 0;
    border: 1px solid var(--secondary-bg-color);
    background-color: var(--secondary-bg-color);
    border-radius: 5px;
    color: var(--text-color);
}

.input-pagination-number {
	width: 20%;
    font-size: 13px;
    padding: 5px 10px;
    margin: 0 10px 0 10px;
    border: 1px solid var(--secondary-bg-color);
    background-color: var(--secondary-bg-color);
    border-radius: 5px;
    color: var(--text-color);
    text-align: start;
}

.button-pagination {
	font-weight: 400;
	display: inline-block;
    font-size: 13px;
    margin-top: 10px;
    padding: 5px 20px;
    border: none;
    border-radius: 4px;
    background-color: var(--button-color);
    color: var(--button-text-color);
    cursor: pointer;
}

input[type="text"], .input[contenteditable] {
	display: block;
    box-sizing: border-box;
    font-size: 14px;
    width: 100%;
    padding: 12px 10px;
    margin-top: 5px;
    margin-bottom: 10px;
    border: 1px solid var(--secondary-bg-color);
    background-color: var(--secondary-bg-color);
    border-radius: 5px;
    color: var(--text-color);
    text-align: start;
}

input[type="text"]:read-only {
	opacity:0.5;
}


input.valid {  
  border-color: var(--green-text-color);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2300ff37' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.5625rem center;
  background-size: 1rem 1rem;
}

input.invalid {
  border-color: var(--destructive-text-color);  
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.5625rem center;
  background-size: 1rem 1rem;
}

input[type="text"]:last-child, .input[contenteditable]:last-child {
	margin-bottom: 0;
}

textarea {
	font-size: 14px;
	border-radius: 5px;
    color: var(--text-color);
	border: 1px solid var(--secondary-bg-color);
    background-color: var(--secondary-bg-color);
    height:200px;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 10px;
    margin-top: 5px;
    margin-bottom: 10px;
}

input[type="password"] {
	display: block;
    box-sizing: border-box;
    font-size: 14px;
    width: 100%;
    padding: 12px 10px;
    margin-top: 5px;
    margin-bottom: 10px;
    border: 1px solid var(--secondary-bg-color);
    background-color: var(--secondary-bg-color);
    border-radius: 5px;
    color: var(--text-color);
    text-align: start;
}

input[type="password"]:last-child {
	margin-bottom: 0;
}

input[type="url"] {
	display: block;
    box-sizing: border-box;
    font-size: 14px;
    width: 100%;
    padding: 12px 10px;
    margin-top: 5px;
    margin-bottom: 10px;
    border: 1px solid var(--secondary-bg-color);
    background-color: var(--secondary-bg-color);
    border-radius: 5px;
    color: var(--text-color);
    text-align: start;
}

input[type="url"]:last-child {
	margin-bottom: 0;
}

input[type="submit"] {
            display: block;
            width: 100%;
            font-size: 14px;
            margin: 5px 0;
            padding: 12px 10px;
            border: none;
            border-radius: 4px;
            background-color: var(--button-color);
            color: var(--button-text-color);
            cursor: pointer;
}

input[type="date"] {
	width:100%;
	display: block;
    box-sizing: border-box;
    font-size: 14px;
    padding: 12px 10px;
    margin-top: 5px;
    margin-bottom: 10px;
    border: 1px solid var(--secondary-bg-color);
    background-color: var(--secondary-bg-color);
    border-radius: 5px;
    color: var(--text-color);
    text-align: start;
}

select {
	display: block;
	width: 100%;
	font-size: 14px;
	margin: 5px 0;
	padding: 13px 10px;
	border: none;
    border-radius: 4px;
    background-color: var(--secondary-bg-color);
    color: var(--text-color);
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
}
        
select:not([multiple]) {
	padding-right: 20px;
	background-repeat: no-repeat;
	background-position: calc(100% - 15px);
	background-size: 11px auto;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cpath d='M70.3 13.8L40 66.3 9.7 13.8z' fill='%23808080'%3E%3C/path%3E%3C/svg%3E");
}

/* ФОРМЫ */


/* ТАБЛИЦЫ */

.profile .field {
    display: flex;
    flex-direction: row;
    background-color: var(--secondary-bg-color);
    padding: 10px;
    margin: 5px 0;
    border-radius:5px;
    align-items: center;
}



.profile .field .label {
	color: var(--hint-color);
	font-weight: 900;
	font-size: 11px;
	text-transform: uppercase;
    flex: 1;
}

.profile .field .value {
    flex: 0 0 75%;
}

@media (max-width: 600px) {
    .profile .field {
    	align-items: start;
        flex-direction: column;
    }
    .profile .field .value {
	    margin-top:5px;
	}
} 

table {
  border: 1px solid var(--secondary-bg-color);
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;

}

table caption {
  font-size: 1.5em;
  margin: .5em 0 .75em;
}

table tr {
  background-color: var(--bg-color);
  border: 1px solid var(--secondary-bg-color);
  padding: .35em;
}

table th,
table td {
  padding: 10px;

}

table th {
  font-size: .65rem;
  text-transform: uppercase;
}

table td {
  font-size: .75rem;
}

@media screen and (max-width: 700px) {
  table {
    border: 0;
  }

  table caption {
    font-size: 1.3em;
  }
  
  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  table tr {
    border-bottom: 3px solid var(--secondary-bg-color);
    display: block;
    margin-bottom: .625rem;
  }
  
  table td {
    border-bottom: 1px solid var(--secondary-bg-color);
    display: block;
    font-size: .7rem;
    text-align: right;
  }
  
  table td::before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  
   table tr:last-child {
    margin-bottom: 0;
  }
  
  table td:last-child {
    border-bottom: 0;
  }
}

/* ТАБЛИЦЫ */

/* ФУТЕР */
.footer {
	width:100%;
	font-size: 0.7rem;
	color: var(--subtitle-text-color);
	text-align: center; 
	margin: 1rem 0 0 0;
}

.contacts {
	width:100%;
	font-size: 0.7rem;
	color: var(--subtitle-text-color);
	text-align: center; 
	margin: 0 0 1rem 0;
}

.footer a {
  text-decoration: none;
  color: var(--hint-color);
  border-bottom: 1px dashed;
  border-bottom-color: var(--hint-color);
}
.footer a:hover {
  text-decoration: none;
  color: var(--hint-color);
  border-bottom-color: var(--hint-color);
}
.footer a:visited {
  text-decoration: none;
  color: var(--hint-color);
  border-bottom-color: var(--hint-color);
}

/* Адаптация для мобильных устройств */
@media (max-width: 900px) {
  .footer {
  	padding: 0;
    flex: 0 0 100%; /* На мобильных устройствах карта будет на всю ширину */
  }
}


/* ДЛЯ КНОПОК */
/* container */
.responsive-three-column-grid {
	padding:0;
	margin:0;
    display:block;
}

/* columns */
    .responsive-three-column-grid > * {
	    padding: 10px 0 0 0;
	}
	
	.responsive-three-column-grid > *:first-child {
	    padding-top: 0;
	}

/* tablet breakpoint */
@media (min-width:768px) {
    .responsive-three-column-grid {
        display: grid;
        grid-auto-rows: 1fr;
        grid-template-columns: 1fr 1fr 2fr;
    }
    
    .responsive-three-column-grid > * {
	    padding: 0 10px 0 0;
	}
	
	.responsive-three-column-grid > *:last-child {
	    padding: 0;
	}
}


	.responsive-two-column-grid {
		padding:0;
		margin:0;
	    display:block;
	}

    .responsive-two-column-grid > * {
	    padding: 10px 0 0 0;
	}
	
	.responsive-two-column-grid > *:first-child {
	    padding-top: 0;
	}

@media (min-width:768px) {
    .responsive-two-column-grid {
        display: grid;
        grid-auto-rows: 1fr;
        grid-template-columns: 1fr 1fr;
    }
    
    .responsive-two-column-grid > * {
	    padding: 0 10px 0 0;
	}
	
	.responsive-two-column-grid > *:last-child {
	    padding: 0;
	}
}
/***************/



/* АККОРДЕОН */
.accordion {
	margin-top:0;
	text-transform:uppercase;
	font-weight:500;
	font-size:12px;
    background-color: var(--secondary-bg-color);
    color: var(--text-color);
    cursor: pointer;
    padding: 10px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
    opacity:0.5;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
	border: 1px solid var(--secondary-bg-color);
    padding: 10px;
    background-color: var(--bg-color);
    display: none;
    overflow: hidden;
}

.accordion:after {
    content: '+'; /* Unicode character for "plus" sign (+) */
    font-size: 13px;
    color: #777;
    float: right;
    margin-left: 5px;
}

.active:after {
    content: "-"; /* Unicode character for "minus" sign (-) */
}

/* ЛИСТ */

.list .field {
    display: flex;
    flex-direction: row;
    background-color: var(--secondary-bg-color);
    padding: 10px;
    margin: 5px 0;
    border-radius:5px;
    align-items: center;
}

.list .field .left {
	color: var(--text-color);
	font-weight: 900;
	font-size: 12px;
	text-transform: uppercase;
    flex: 1;
}


@media (max-width: 600px) {
    .list .field {
        flex-direction: column;
    }
    .list .field .right {
	    margin-top:5px;
	}
} 

/* СТАТИСТИКА */
.chart-box {
  background-color: var(--secondary-bg-color);
  padding: 10px 10px 10px 0; 
  border-radius: 5px; 
}

.apexcharts-menu {
    background-color: var(--bg-color) !important;
    border: none !important;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3) !important;
}

.apexcharts-menu-item {
    color: var(--text-color) !important; /* установите нужный цвет текста */
}

.apexcharts-menu-item:hover {
    background-color: var(--bg-color) !important; /* Цвет фона при наведении */
    color: var(--text-color) !important; /* Цвет текста при наведении */
}

.apexcharts-tooltip {
    background:  var(--bg-color) !important;
    color: var(--text-color) !important;
    border: none !important;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3) !important;
}

.apexcharts-tooltip .apexcharts-tooltip-title {
    color: var(--text-color) !important; /* Изменение цвета текста заголовка */
    background: var(--bg-color) !important; /* Изменение фона заголовка */
    /* Можете также удалить или изменить стиль границы если необходимо */
    border-bottom-color: var(--secondary-bg-color) !important;
    border-bottom: 1 !important; /* Пример удаления границы под заголовком */
}

/* СТАТ */

.stat-container {
  justify-content: center;
  align-items: stretch; /* Растягиваем элементы по высоте */
  position: relative;
  width: 100%;
  max-width: 1000px;
  padding: 0 1rem;
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.stat-card {
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  padding: 1rem;
  outline: none;
  display: flex;
  max-width: 500px;
  flex: 1 1 300px; /* Карты будут растягиваться равномерно, минимальная ширина 300px */
  flex-direction: column; /* Изменено на column, чтобы элементы располагались вертикально */
  align-items: stretch; /* Растягиваем содержимое по всей ширине карточки */
  border-radius: 0.5rem;
  box-sizing: border-box;
  background-color: var(--secondary-bg-color);
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.12), 0 10px 10px -4px rgba(0, 0, 0, 0.09);
}

.red-border {
	outline: 2px solid var(--accent-text-color);
	outline-offset:-2px;
}

.blue-border {
	outline: 2px solid var(--accent-text-color);
	outline-offset:-2px;
}

.green-border {
	outline: 2px solid var(--green-text-color);
	outline-offset:-2px;
}

.hint-border {
	outline: 2px solid var(--hint-color);
	outline-offset:-2px;
}

.stat-card ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-top: 2px solid var(--section-bg-color);
}
.stat-card ul li {
	font-weight: 600;
	line-height:1.5;
  list-style-type: none;
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 0.5rem 0;
  border-bottom: 2px solid var(--section-bg-color);
}

.card-content {

  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Контент будет выровнен по верхнему краю */
  flex-grow: 1; /* Контент будет растягиваться по доступной высоте */
}

.card-button {
  margin-top: auto; /* Эта строка позволяет кнопке быть внизу карточки */
  padding: 10px;
  border: none;
  background-color: #007bff;
  color: white;
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
}

.card-button:hover {
  background-color: #0056b3;
}


.stat-card-title {
	text-align:center;
  color:var(--text-color);
	font-weight:600;
	font-size: 1rem;
	padding:0;
	margin: 0;
	line-height: 1.3;
	text-transform: uppercase;
}

.stat-card-price {
	text-align:center;
  color:var(--accent-text-color);
	font-weight:700;
	font-size: 1.5rem;
	padding:0;
	margin-top: 0.5rem;
	line-height: 1.3;
	text-transform: uppercase;
}

.stat-card-subtitle {
	text-align:center;
  color:var(--subtitle-text-color);
	font-size: 11px;
	font-weight:400;
	padding:0;
	margin: 1rem 0;
	line-height: 1.3;
	text-transform: uppercase;
}

.stat-card-info {
	text-align:center;
  color:var(--subtitle-text-color);
	font-size: 11px;
	font-weight:600;
	padding:0;
	margin: 1rem 0;
	line-height: 1.3;
	text-transform: uppercase;
}

.stat-card-hint {
	text-align:center;
  color:var(--subtitle-text-color);
	font-size: 9px;
	font-weight:600;
	padding:0;
	margin: 1rem 0;
	line-height: 1.3;
	text-transform: uppercase;
}

.stat-card-info a {
	color:var(--accent-text-color);
	text-decoration: none;
}

/* Адаптация для мобильных устройств */
@media (max-width: 900px) {
  .stat-card {
  	max-width: 550px;
    flex: 0 0 100%; /* На мобильных устройствах карта будет на всю ширину */
  }
  
  
}

.dropdown {
  display: inline-block;
  margin: 0 auto;
  position: relative;
}

.dropdown .-hover {
	color:var(--subtitle-text-color);
	font-size: 11px;
	font-weight:400;
	text-transform: uppercase;
}

.dropdown .-arrow::after {
  content: '\25BC';
  font-size: 80%;
  cursor: pointer;
}

.dropdown .-list {
	font-weight:500;
	text-align:center;
  display: none;
  font-size: 10px;
  width: calc(100% + 10px);
  background: var(--secondary-bg-color);
  border-radius: 5px;
  box-shadow: 0 4px 5px rgba(0,0,0,.35);
  box-sizing: border-box;
  position: absolute;
  top: 100%;
  left: -5px;
  z-index: 10;
  text-decoration: none;
  text-transform: uppercase;
  	padding: 5px;
}

.dropdown .-list a {
  display: block;
  text-decoration: none;
  color: inherit;
  border-bottom:0;
}

.dropdown .-list a:hover {
  color: var(--link-color);
  border-bottom:0;
  text-decoration: none;
}

.dropdown .dropdown_cheked_item {
  display: none;
}

.dropdown .dropdown_cheked_item:checked ~ .-list {
  display: block;
}

.dropdown .dropdown_cheked_item:checked ~ .-arrow::after {
  content: '\25B2';
}

/* ЗАГРУЗКА ИЗОБРАЖЕНИЯ */
.picture-upload {
	margin:5px 0 5px 0;
}

.profile-picture-upload {
  display: inline;
}

.imagePreview {
  vertical-align: middle;
  width: 64px;
  margin-right: 8px;
  -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14), 0 10px 10px -4px rgba(0, 0, 0, 0.09);
  -moz-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14), 0 10px 10px -4px rgba(0, 0, 0, 0.09);
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14), 0 10px 10px -4px rgba(0, 0, 0, 0.09);
}

.hidden {
  position: absolute;
  width: 0px;
  height: 0px;
  left: -999999px;
}

.action-button {
  background: none;
  cursor: pointer;
  outline: 0;
}
.action-button.mode-upload {
  color: var(--accent-text-color);
  background-color: var(--secondary-bg-color);
}
.action-button.mode-remove {
  color: var(--destructive-text-color);
  background-color: var(--secondary-bg-color);
}

/** ПРЕЛОАДЕР **/

.loaderArea {
		display: flex;
	    justify-content: center;
	    align-items: center;
	  background: var(--section-bg-color);
	  overflow: hidden;
	  position: fixed;
	  left: 0;
	  top: 0;
	  right:0;
	  bottom:0;
	  z-index: 100000;
	}

.preloader {
    display: block;
    position: absolute;
    width: 90px;
    height: 90px;

    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: var(--button-color);
    animation: preloader-spin 2s linear infinite;
    opacity: 0.4;
}

.preloader:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: var(--tg-theme-button-color);
    animation: preloader-spin 3s linear infinite;
    opacity: 0.3;
}
.preloader:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: var(--tg-theme-button-color);
    animation: preloader-spin 1.5s linear infinite;
    opacity: 0.2;
}

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

/*slider switch css */
.theme-switch-wrapper {
  display: flex;
  align-items: center;
}

.theme-switch {
  display: inline-block;
  height: 1.4rem;
  position: relative;
  width: 3rem;
}

.theme-switch input {
  display: none;
}

.slider {
  background-color: var(--secondary-bg-color);
  bottom: 0;
  border: 1px solid var(--secondary-bg-color);
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: 0.4s;
}

.slider:before {
  background-color: var(--text-color);
  bottom: 4px;
  content: "";
  height: 0.8rem;
  left: 4px;
  position: absolute;
  transition: 0.4s;
  width: 0.8rem;
}

input:checked + .slider {
  background-color: var(--section-bg-color);
}

input:checked + .slider:before {
  transform: translateX(26px);
}

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

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

/* МОАДЛЬНОЕ НИЖНЕЕ */

.bottom-sheet-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  opacity: 0;
  pointer-events: none;
  align-items: center;
  flex-direction: column;
  justify-content: flex-end;
  transition: 0.1s linear;
  z-index: 1000;
}
.bottom-sheet-container.show {
  opacity: 1;
  pointer-events: auto;
}
.bottom-sheet-container .sheet-overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  opacity: 0.4;
  background: #000;
}
.bottom-sheet-container .sheet-content {
  width: 100%;
  position: relative;
  background: var(--section-bg-color);
  max-height: 100vh;
  height: 50vh;
  max-width: 1000px;
  padding: 1rem; /* Увеличить отступы */
  border-radius: 1rem 1rem 0 0;
  transform: translateY(100%);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  transition: 0.3s ease;
  color: var(--text-color);
  text-align: left;
  box-sizing: border-box; /* Включить отступы в расчеты ширины/высоты */
  overflow: hidden; /* Переполнение контента скрыто */
}
.bottom-sheet-container.show .sheet-content {
  transform: translateY(0%);
}
.bottom-sheet-container.dragging .sheet-content {
  transition: none;
}
.bottom-sheet-container.fullscreen .sheet-content {
  border-radius: 0;
  overflow-y: hidden;
}
.bottom-sheet-container .sheet-header {
  display: flex;
  justify-content: center;
}
.sheet-header .drag-icon {
  cursor: grab;
  user-select: none;
  padding: 15px;
  margin-top: -15px;
}
.sheet-header .drag-icon span {
  height: 4px;
  width: 40px;
  display: block;
  background: var(--secondary-bg-color);
  border-radius: 50px;
}

.bottom-sheet-container .sheet-body {
  height: calc(100% - 60px); /* Высота с учетом заголовка */
  overflow-y: auto; /* Прокрутка контента внутри */
  padding: 15px 0 40px; /* Внутренние отступы для контента */
  scrollbar-width: none;
}
.bottom-sheet-container .sheet-body::-webkit-scrollbar {
  width: 0;
}
.sheet-body h2 {
  font-size: 1.8rem;
}
.sheet-body p {
	margin-bottom: 0rem;
  margin-top: 0.3rem;
  font-size: 0.8rem;
}
[data-modal] {
    display: none;
}
.header-modal-content {
	font-size: 1.5rem;
	font-weight: 700;
}
.text-modal-content {
	margin-top: 0.5rem;
	font-size: 0.8rem;
	font-weight: 500;
}

.text-info {
	font-size: 1rem;
	font-weight: 700;
	color: var(--accent-text-color);
}

.text-modal-content ul {
      padding: 10px; 
      margin: 0; 
    }

.text-modal-content ul li {
      margin: 0;
      padding: 0;
}

.text-modal-content ul ul {
      padding-left: 20px;
    }

.show-modal-link {
	cursor: pointer;
}

.show-modal-link-url {
	text-decoration: none;
	border-bottom: 1px dashed;
	color: var(--hint-text-color);
	border-bottom-color: var(--hint-text-color);
	cursor: pointer;
}


/* УСЛОВИЯ ИСПОЛЬЗОВАНИЯ */

.agreement-block {
  display: inline-block;
  margin-top: 0.5rem;
  background-color: var(--secondary-bg-color);
  padding: 1rem;
  border-radius: 0.5rem;
  text-align: left;
  width: 100%;
  box-sizing: border-box; /* Гарантирует, что padding и границы будут учитываться в ширине */
}

.agreement-block .title {
	color: var(--accent-text-color);
	text-transform: uppercase;
	font-size: 0.9rem;
	font-weight: 600;
}

.agreement-block .text {
	color: var(--text-color);
	font-size: 0.8rem;
	font-weight: 400;
}



/* СТРАНИЦА */
.block-container {
  align-items: flex-start;
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.block-fullcontainer {
	align-items: stretch;
  align-items: flex-start;
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 1rem;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
}

.block-fullcontainer .block {
	width:100%;
  text-decoration: none;
  text-align: left;
  padding: 1rem;
  flex-direction: column;
  align-items: center;
  border-radius: 0.5rem;
  box-sizing: border-box;
  background-color: var(--secondary-bg-color);
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14), 0 10px 10px -4px rgba(0, 0, 0, 0.09);
}

.block-fullcontainer .block .title {
	color: var(--accent-text-color);
	padding-bottom: 0.5rem;
	text-align: left;
	font-size: 0.8rem;
	font-weight: 700;
}

.block-fullcontainer .block .moretitle {
	color: var(--accent-text-color);
	padding: 0.5rem 0;
	text-align: left;
	font-size: 0.8rem;
	font-weight: 700;
}

.block-fullcontainer .block .content {
  width:100%;
  display: flex;
  text-align: left;
  flex-direction: column;
  font-size: 0.8rem;
}
.block-fullcontainer .block .content .onbtn { 
	font-size: 0.8rem;
	margin-top: 0.5rem;
  width: 100%;
  display: flex; 
  justify-content: center;
}

.block-fullcontainer .block .content ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.block-fullcontainer .block .content ul li {
	line-height:1.5;
	font-weight: 500;
  list-style-type: none;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--section-bg-color);
  width: 100%;
}

.block-fullcontainer .block .content ul li:last-child {
  border-bottom: none;
}

.block-fullcontainer .block .content .orange {
	color: orange;
}

.block-fullcontainer .block .content .orange a {
	text-decoration: none;
	color: white;
}
.block-fullcontainer .block .content .orange i {
	color: orange;
}

.block-fullcontainer .block .content i {
	color: var(--hint-color);
	font-size: 0.9em;
	margin-right: 5px;
}

.block-fullcontainer .left-column {
  align-self: stretch;
  flex: 0 0 65%;
  padding: 0;
  margin: 0 1rem 0 0;
  max-width: 65%;
}

.block-fullcontainer .right-column {
	position: relative;
  align-self: stretch;
  flex: 1;
  padding: 0;
  margin: 0;
}
.right-column .block-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}


.right-column .sticky {
    position: sticky;
    top: 1rem; /* расстояние от верхней части экрана, когда элемент станет фиксированным */
    z-index: 10; /* чтобы элемент был выше других */
}

.two-cont {
  display: flex;
  justify-content: space-between; /* Распределяем элементы по бокам */
  align-items: center; /* Выравниваем по центру по вертикали */
  width: 100%;
  padding: 0;
  margin: 0; /* Центрируем контейнер по горизонтали */
}

.two-cont .left-text {
  flex: 1; /* Левый блок занимает оставшееся пространство */
  text-align: left; /* Текст слева */
}

.two-cont .left-text .page-price {
	font-weight: 700;
	color: var(--green-text-color);
	font-size: 1.2rem;
}

.page-full-price {
  font-size: 0.7em;
  position: relative;
  display: inline-block; 
  color: var(--hint-color); 
}

.page-full-price::after {
  content: "";
  position: absolute;
  top: 50%; 
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: translateY(-50%);
  opacity: 0.8;
}

.two-cont .right-text {
  text-align: right; /* Выравнивание кнопки справа */
}

@media (max-width: 950px) {
  .block-fullcontainer {
    flex-direction: column; /* Ставим колонки в одну колонку */
  }
  .block-fullcontainer .left-column, .block-fullcontainer .right-column {
    flex: 1 1 100%; /* Каждая колонка занимает всю ширину */
    max-width: 100%;
  }
  .block-fullcontainer .right-column {
    order: -1; /* Сдвигаем правую колонку вверх */
    margin: 0; /* Убираем отступ */
    margin-bottom: 1rem; /* Отступ снизу */
  }
  .block-fullcontainer .left-column {
    margin: 0;
  }
}

.gallerycard {
	display: flex;
    flex: 0 0 100%;
	padding: 1rem;
	max-width: 100%;
	border-radius: 0.5rem;
    box-sizing: border-box;
	background-color: var(--secondary-bg-color);
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14), 0 10px 10px -4px rgba(0, 0, 0, 0.09);
}

.gallery {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x;
	scrollbar-color: var(--hint-color) var(--section-color);
    scrollbar-width: thin;
}


.gallery img {
	border-radius: 0.5rem;
	margin-right:0.5rem;
	scroll-snap-align: start;
	width: 130px;
	cursor: zoom-in;
}
.gallery img:last-child {
	margin-right:0;
}

/* Стиль для модального окна */
.modal {
    display: none;
    position: fixed;
    z-index: 111;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8);

    justify-content: center;
    align-items: center;
}

.modal-image {
    display: block;
    margin: auto;
    object-fit: contain;
    max-width: 90%; /* Ограничиваем максимальную ширину */
    max-height: 90%; /* Ограничиваем максимальную высоту */
}

.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

body.no-scroll {
    overflow: hidden;
}

.videowrapper {
    float: none;
    clear: both;
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
    margin: 0;
}
.videowrapper iframe {
	border-radius: 0.5rem;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ОПЛАТА */
.paycontainer {
  text-align: center;
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 1rem;
  box-sizing: border-box;
  display: block; /* Изменено на block */
}

.paycontainer a {
  text-decoration: none;
  color: var(--accent-text-color);
}
.paycontainer a:hover {
  text-decoration: none;
  color: var(--accent-text-color);
  border-bottom-color: var(--accent-text-color);
}
.paycontainer a:visited {
  text-decoration: none;
  color: var(--accent-text-color);
  border-bottom-color: var(--accent-text-color);
}

.paycontainer .payicon {
	font-size: 3rem;
	margin-bottom:1rem;
}

.paycontainer .paytitle {
	line-height: 1;
	font-weight: 700;
	font-size: 1.5rem;
	margin-bottom:0.5rem;
}

.paycontainer .paytext {
	font-weight: 500;
	font-size: 0.9rem;
	color: var(--hint-color);
}

/*DONATE*/
.donate-content {
	padding:1rem;
	font-size: 0.8em;
	margin:0;
    display: flex;
    gap: 10px;
    align-items: center;
}

.donate-content input {
	width: 120px;
	border-radius: 0.5rem;
	color: var(--hint-color);
	background: var(--bg-color);
	border: 1px solid var(--secondary-bg-color);
    padding: 9px 9px;
    box-sizing: border-box;
}

.donate-content button {
	flex: 1;
    padding: 10px;
    box-sizing: border-box;
    white-space: nowrap;
    margin: 0;
}
.donate-content button i {
	margin-right: 5px;
}


.terms {
	border-top: 1px solid var(--bg-color);
	padding-top: 0.7rem;
	margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 10px;
    line-height: 1;
}

.terms input[type="checkbox"] {
    margin: 0;
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    border: 2px solid var(--green-text-color);
    border-radius: 3px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    transition: all 0.2s ease;
}

.terms input[type="checkbox"]:checked {
    background-color: var(--green-text-color);
    border-color: var(--green-text-color);
}

.terms input[type="checkbox"]:checked::after {
    content: "✓";
    position: absolute;
    color: white;
    font-size: 10px;
    font-weight: bold;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.terms input[type="checkbox"]:hover {
    border-color: var(--green-text-color);
}

.terms input[type="checkbox"]:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(50, 168, 82, 0.25);
}

.terms label {
	font-size: 10px;
    margin: 0;
    cursor: pointer;
    text-transform: none;
    font-weight: 500;
}