@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

* {
	padding: 0px;
	margin: 0px;
	border: 0px;
}

*,
*:before,
*:after {
	box-sizing: border-box;
}

:focus,
:active {
	outline: none;
}

a:focus,
a:active {
	outline: none;
}

html,
body {
	height: 100%;
	min-width: 320px;
}

body {
	color: #404040;
	line-height: 1.4;
	font-family: "Montserrat";
	font-size: 16px;
	-ms-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

input,
button,
textarea {
	font-family: "Montserrat";
	font-size: inherit;
}

button {
	cursor: pointer;
	color: inherit;
	background-color: inherit;
}

a {
	color: inherit;
}

a:link,
a:visited {
	text-decoration: none;
}

a:hover {
	text-decoration: none;
}

ul li {
	list-style: none;
}

img {
	vertical-align: top;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: inherit;
	font-size: inherit;
}

body,
html {
	min-height: 100vh;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	display: flex;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	/* display: none; <- Crashes Chrome on hover */
	-webkit-appearance: none;
	margin: 0;
	/* <-- Apparently some margin are still there even though it's hidden */
}

:root {
	--accent: #0092b6;
	--text: #404040;
	--silver: #f6f6f6;
	--red: #ec3b3b;
	--green: rgb(46, 167, 46);
}

.dark-theme {
	--accent: #0092b6;
}

.container {
	width: 100%;
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
}

.container-full {
	width: 95%;
	margin-left: auto;
	margin-right: auto;
}

.login-page {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.login-page__title {
	font-size: 22px;
	font-weight: 600;
	text-align: center;
	margin-bottom: 20px;
}

.login-page__title span {
	color: var(--accent)
}

.login-page__tabs {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 20px;
	gap: 5px 10px;
}

.login-page__tab {
	font-size: 16px;
	font-weight: 500;
	border-radius: 4px;
	border: 1px solid var(--accent);
	min-height: 44px;
	padding: 0 20px;
}

.login-page__tab.active {
	background-color: var(--accent);
	color: #fff;
}

.login-page__wrapper {
	width: 400px;
	background-color: var(--silver);
	border-radius: 12px;
	padding: 20px;
}

.input__title {
	margin-bottom: 5px;
	font-size: 14px;
	font-weight: 500;
}

.input input {
	height: 50px;
	background-color: #fff;
	border-radius: 4px;
	width: 100%;
	outline: none;
	padding: 0 20px;
	border: 1px solid var(--silver);
}


.input--icon {
	position: relative;
}

.input--icon::after {
	content: '';
	width: 14px;
	height: 14px;
	aspect-ratio: 1;
	background-size: 100%;
	background-repeat: no-repeat;
	transition-duration: .15s;
	position: absolute;
	right: 10px;
	top: 0;
	bottom: 0;
	margin: auto;
	pointer-events: none;
}

.input--calendar::after {
	background-image: url('../assets/img/calendar.svg');
}

.select-form {
	height: 50px;
	width: 100%;
	padding: 0 10px;
}

.input-border input {
	border: 1px solid var(--silver)
}

.login-page__form {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.submit input {
	width: 100%;
	cursor: pointer;
}

.login-page__msg {
	margin-bottom: 20px;
	text-align: center;
	font-size: 14px;
	color: red;
	font-weight: 500;
}

.btn {
	background-color: var(--text);
	height: 50px;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	padding: 0 20px;
	cursor: pointer;
	transition-duration: .15s;
}

.btn:hover {
	box-shadow: 3px 3px 10px rgba(0, 0, 0, .25);
}

.btn-ok {
	width: 16px;
	height: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border-radius: 100%;
	background-color: var(--accent);
	cursor: pointer;
	color: #fff;
}

.btn-outline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px 10px;
	border: 1px solid var(--accent);
	transition-duration: .15s;
	font-size: 12px;
	font-weight: 500;
	border-radius: 12px;
}

.btn-outline:hover {
	background-color: var(--accent);
	color: #fff;
}

.btn-accent {
	background-color: var(--accent);
}

.btn-link {
	display: inline-flex;
	text-decoration: underline;
	font-size: 14px;
	font-weight: 500;
}

.title {
	font-size: 22px;
	font-weight: 600;
	margin-bottom: 20px;
	border-bottom: 2px solid var(--accent);
	padding-bottom: 4px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.title-nav {
	margin-bottom: 20px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.title-nav .title {
	margin: 0;
}

@media(max-width: 768px) {
	.title {
		font-size: 20px;
		width: 100%;
	}
}

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

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

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

.header {
	margin-top: 20px;
	position: relative;
	z-index: 100;
}


@media(min-width: 768px) {
	.party-header {
		padding-left: 300px;
	}
}

.party-header .container {
	margin: 0;
}

.header__wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 15px;
	border-radius: 12px;
	background-color: var(--silver);
	gap: 10px 30px;
}

@media(max-width: 992px) {
	.header__wrapper {
		flex-direction: column;
		justify-content: center;
	}
}

.header__logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 20px;
	font-weight: 600;
}

.header__nav {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 5px 15px;
}

.header__nav li {
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	transition-duration: .15s;
	position: relative;

}

.header__nav>li {
	padding-bottom: 10px;
	margin-top: 10px;
}

.header__nav-parent {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: default;
}

.header__nav-parent::after {
	content: '';
	width: 14px;
	aspect-ratio: 1;
	background-image: url('../assets/img/arrow.svg');
	background-size: 100%;
	background-repeat: no-repeat;
	transition-duration: .15s;
}

.header__nav-parent ul {
	position: absolute;
	top: 100%;
	left: -12px;
	border-radius: 12px;
	background-color: #fff;
	padding: 12px 15px;
	box-shadow: 3px 3px 10px rgba(0, 0, 0, .25);
	transition-duration: .15s;
	opacity: 0;
	visibility: hidden;
	display: flex;
	flex-direction: column;
	row-gap: 12px;
	white-space: nowrap;
	z-index: 1;
}

.header__nav-parent:hover ul {
	opacity: 1;
	visibility: visible;
}

.header__nav a {
	transition-duration: .15s;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	position: relative;
}

.badge {
	background-color: var(--accent);
	display: inline-flex;
	font-size: 12px;
	font-weight: 500;
	color: #fff;
	padding: 2px 4px;
	border-radius: 2px;
}

.header__nav a:hover {
	color: var(--accent)
}

.header__logo img {
	height: 40px;
	width: auto;
}

.user {
	padding-top: 60px;
}

.user__wrapper {
	display: grid;
	gap: 40px;

}



@media(max-width: 992px) {
	.user__wrapper {
		gap: 20px;
	}

	.user {
		padding-top: 30px;
	}

}

.user__btns {
	margin-top: 20px;
	display: flex;
	align-items: center;
	gap: 20px;
}

.users__message {
	color: var(--accent);
	font-weight: 500;
}

.user__info-row {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 5px;
}

.user__info-row select {
	width: 100%;
	background-color: transparent;
}

.user__info-row:last-child:not(:nth-child(2n)) div {
	border-bottom: 1px solid var(--silver);
	border-radius: 0;
}

.user__info input {
	background-color: transparent;
	width: 100%;
	min-height: 100%;
}

.user__col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.user__info-row:nth-child(2n) div {
	background-color: var(--silver);
}

.user__info {
	width: 100%;
}

.user__info-row>div {
	padding: 5px 10px;
	border-radius: 4px;
	font-size: 18px;
	display: flex;
	align-items: center;
}

.user__info-row>div a {
	text-decoration: underline;
}

@media(max-width: 768px) {
	.user__info-row>div {
		font-size: 14px;
	}
}

.user__info-row>div:last-child {
	font-weight: 500;
}

.user__party {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	width: 100%;
	gap: 30px;
}

@media(max-width: 1100px) {
	.user__party {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
}

@media(max-width: 768px) {
	.user__party {
		grid-template-columns: 1fr;
	}
}

.user__party-top {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 10px;
	gap: 5px;
}

.user__party-title {
	font-size: 18px;
	font-weight: 600;
	text-align: center;
}

.user__party-title span {
	font-size: 14px;
}

.user__party-col {
	overflow: hidden;
}

.user__events {
	display: grid;
	width: 100%;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}

@media(max-width: 992px) {
	.user__events {
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
		gap: 20px;
	}
}

.user__event {
	border: 1px solid var(--silver);
	border-radius: 12px;
	padding: 15px;
	text-align: center;
}

.user__event-active {
	border-color: var(--accent);
}

.user__event-radio--wrap {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
}



.user__event-radio input {
	display: none;
}

.user__event-radio span {
	border-radius: 20px;
	font-size: 16px;
	font-weight: 500;
	background-color: var(--silver);
	padding: 5px 25px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	min-height: 42px;
	white-space: nowrap;
}

.user__event-radio input:checked+span {
	background-color: var(--accent);
	border-color: var(--accent);
	color: #fff;
}

.user__event-title {
	font-size: 18px;
	font-weight: 600;
	text-align: center;
}

.user__event-date {
	margin-top: 5px;
	font-size: 14px;
	font-weight: 600;
	color: var(--accent);
}

.user__event-comment {
	margin-top: 5px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: underline;
}

.user__event-radio--wrap {
	margin-top: 20px;
}

.user__event-confirmation {
	margin-top: 10px;
	font-weight: 600;
}

.user__event-confirmation span {
	color: var(--accent);
}

table {
	width: 100%;
}

th {
	font-weight: 600;
	font-size: 12px;
}


td {
	padding: 6px 8px;
	font-size: 14px;
	text-align: left;
}

td:first-child {
	font-weight: 500;
}

tr:not(:nth-child(2n)) td {
	background-color: var(--silver);
}

td input {
	width: 100%;
	background-color: transparent;
}

td select {
	background-color: transparent;
}

.users {
	margin-top: 40px;
	padding: 0;
}

.users td {
	font-size: 14px;
	padding: 5px;
}

.users__nav {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 5px 20px;
	margin-bottom: 10px;
}

.users table {
	border-spacing: 2px 0;
}

.dt-search {
	display: flex;
	align-items: center;
	gap: 10px;
}

.dt-search input,
.dt-length select {
	border: 1px solid var(--silver);
	height: 40px;
	padding: 0 10px;
	border-radius: 12px;
}

.dt-search input {
	width: 300px;
}

.dt-info {
	margin-top: 10px;
}

.users__btns {
	margin-top: 30px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.modal__fields {
	display: grid;
	gap: 15px 10px;
}

.modal__fields-grid--2 {
	grid-template-columns: repeat(2, 1fr);
}

.modal__field-title {
	font-size: 14px;
	margin-bottom: 4px;
}

.modal__field input,
.modal__field select {
	border: 1px solid var(--silver);
	height: 40px;
	width: 100%;
	padding: 4px 8px;
	font-size: 14px;
	color: inherit
}



.dt-paging {
	margin-top: 10px;
}

.user form {
	width: 100%;
}

.party-management__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 10px;
}

.party-management__col {
	border: 1px solid var(--silver);
	border-radius: 12px;
	padding: 10px 5px;
}

.party-management__class {
	font-size: 16px;
	font-weight: bold;
	display: flex;
	align-items: center;
	gap: 10px;
}

.party-management__class img {
	width: 30px;
	flex-shrink: 0;
}

.party-management__title-btn {
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 12px;
}

.party-management__title-btn::after {
	content: '';
	width: 20px;
	aspect-ratio: 1;
	background-image: url('../assets/img/arrow.svg');
	background-size: 100%;
	background-repeat: no-repeat;
	transition-duration: .15s;
}

.party-management__title-btn.opened::after {
	transform: scale(1, -1);
}

.table-form {
	display: flex;
	align-items: center;
	gap: 4px;
}

.user-table select {
	font-size: 10px;
	background-color: transparent;
	border-radius: 4px;
}

.user-table table>tbody>tr>td:first-child {
	padding-left: 4px;
	max-width: 120px;
	overflow: hidden;
}

.user-table table>tbody>tr>th,
.user-table table>tbody>tr>td {
	padding: 2px;
	font-size: 12px;
	font-weight: 500;
}

.user-table table>tbody>tr>td:first-child {
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
}

.user-table table>tbody>tr>td:last-child {
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
}

table.party-management__list {
	margin: 10px 0 0;
}

.user-table table>thead>tr>th,
table>thead>tr>td {
	padding: 4px;
	font-size: 10px;
	font-weight: 500;
}

.user-table table .event-yes td {
	background-color: #bcffbf;
}

.user-table table .event-afk td {
	background-color: #c2c2c2 !important;
}

.user-table table .event-no td {
	background-color: #ff9f9f;
}

.user-table th {
	cursor: pointer;
}

.user-table__radio-list {
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
}

.user-table__radio-list input {
	display: none;
}

.user-table__btns {
	display: flex;
	align-items: center;
	gap: 10px;
}

.user-table__btn {
	height: 36px;
	display: inline-flex;
	align-items: center;
	padding: 8px 15px;
	border-radius: 12px;
	cursor: pointer;
	transition-duration: .15s;
}

.user-table__btn:hover {
	color: #fff;
}

.user-table__btn-ok {
	border: 1px solid var(--accent);
}

.user-table__btn-ok:hover {
	background-color: var(--accent);
	color: #fff;
}

.user-table__btn-remove {
	border: 1px solid var(--red);
}

.user-table__btn-remove:hover {
	background-color: var(--red);
}

.user-table__radio-list span {
	border: 1px solid #dfdfdf;
	border-radius: 6px;
	cursor: pointer;
	padding: 2px 6px;
	display: inline-block;
	user-select: none;
}

.user-table__radio-list input:checked+span {
	background-color: var(--accent);
	border-color: var(--accent);
	color: #fff;
}

.user-table td:not(:first-child) {
	text-align: center;
}

.parties__name {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.party-main__wrapper {
	display: flex;
	flex-direction: column;
	row-gap: 30px;
}

.party-main__title {
	font-size: 18px;
	font-weight: 600;
	position: relative;
}

.party-main__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	align-items: flex-start;
	gap: 10px;
}

.party-main__col-title--wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	margin-bottom: 10px;
}

.party-main__col {
	border: 1px solid var(--silver);
	border-radius: 12px;
	padding: 10px 5px;
}


.party-main__col-title {
	text-align: center;
	font-size: 18px;
	font-weight: 600;
}

.table-username {
	display: flex;
	align-items: center;
	gap: 5px;
}

.table-username img {
	width: 20px;
	aspect-ratio: 1;
}

.events__select,
.payment__select,
.logs__select {
	height: 50px;
	border-radius: 4px;
	padding: 0 10px;
	font-size: 16px;
	border: 1px solid var(--silver)
}

.footer {
	padding-top: 60px;
	margin-top: auto;
}

.footer__wrapper {
	border-top: 1px solid var(--silver);
	padding: 20px 0;
}

.footer__copy {
	font-size: 14px;
	font-weight: 500;
}

.footer__copy a {
	color: var(--accent)
}

.table-checkbox label {
	display: inline-flex;
}

.table-checkbox input {
	display: none;
}

.table-checkbox span {
	width: 16px;
	display: flex;
	aspect-ratio: 1;
	border: 1px solid var(--accent);
	position: relative;
	border-radius: 100%;
}

.table-checkbox input:checked+span::before {
	content: '';
	position: absolute;
	inset: 4px;
	background-color: var(--accent);
	border-radius: 100%;
}

.table-radio {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.table-radio input {
	display: none;
}

.table-radio span {
	border: 1px solid var(--accent);
	border-radius: 4px;
	padding: 4px 8px;
	display: inline-flex;
	font-size: 16px;
	line-height: 1.2;
	cursor: pointer;
}

.table-radio input:checked+span {
	background-color: var(--accent);
	color: #fff;
}

.payment__nav {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.payment__wrapper {
	display: flex;
	flex-direction: column;
	row-gap: 30px;
}

.logs__fields {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 15px;
}

.logs__filter-item {
	display: flex;
	align-items: center;
	gap: 10px;
}

.filter__wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 12px;
}

.filter span {
	display: flex;
	align-items: center;
	gap: 5px;
	border: 1px solid var(--accent);
	border-radius: 4px;
	padding: 3px 8px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
}

.filter input {
	display: none;
}

.filter span img {
	width: 18px;
	height: auto;
}

.filter input:checked+span {
	background-color: var(--accent);
}

.filter__reset {
	display: inline-flex;
	align-items: center;
	font-size: 16px;
	line-height: 1;
	font-weight: 500;
	padding-bottom: 3px;
	border-bottom: 1px solid var(--accent);
}

.select {
	border-radius: 4px;
	padding: 5px 12px 5px 5px;
	border: 1px solid var(--accent);
}

.events__nav {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.login-page__forgot {
	display: flex;
	justify-content: center;
}

.absence__fields {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}

@media(max-width: 992px) {
	.absence__fields {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media(max-width: 500px) {
	.absence__fields {
		grid-template-columns: 1fr;
	}
}

.polls__fields {
	display: grid;
	grid-template-columns: 3fr 1fr auto;
	align-items: center;

	gap: 10px 25px;
}

.checkbox-field input {
	display: none;
}

.checkbox-field span {
	display: flex;
	align-items: center;
	gap: 7px;
	cursor: pointer;
	user-select: none;
	font-weight: 500;
	font-size: 14px;
}

.checkbox-field span::before {
	content: '';
	border-radius: 2px;
	width: 16px;
	aspect-ratio: 1;
	border: 1px solid var(--accent);
}

.checkbox-field input[type="radio"]+span::before {
	border-radius: 100%;
}

.checkbox-field input:checked+span::before {
	background-color: var(--accent);
	box-shadow: inset 0 0 0 2px white;
}

.select-field-static {
	min-width: 220px;
}

.ts-control {
	height: 50px;
	border-color: var(--silver);
}

.select-field-static .option,
.select-field-static .ts-control {
	font-size: 14px;
}

.polls__variants-list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}

.polls__variants-list input {
	height: 40px;
	border-radius: 4px;
	border: 1px solid var(--accent);
	padding: 2px 12px;
	font-size: 14px;
}

.polls__add-variant {
	background-color: var(--accent);
	height: 40px;
	padding: 2px 20px;
	font-weight: 500;
	border-radius: 4px;
	color: #fff;
	margin-top: 10px;
	transition-duration: .15s;
}

.polls__add-variant:hover {
	box-shadow: 3px 3px 10px rgba(0, 0, 0, .25);
}

.polls__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.poll {
	border: 1px solid var(--accent);
	border-radius: 12px;
	padding: 15px;
	display: flex;
	width: 100%;
	flex-direction: column;
	align-items: flex-start;
	position: relative;
	overflow: hidden;
}

.poll.closed {
	border-color: #c2c2c2;
}

.poll.closed::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 3;
	background-color: rgba(0, 0, 0, .45);
}

.poll.closed .toggle-poll {
	position: relative;
	z-index: 5;
	background-color: var(--accent);
	color: #fff;
}

.poll.closed .delete-poll {
	position: relative;
	z-index: 5;
}

.poll.closed .delete-poll svg {
	stroke: #fff;
}

.poll-results {
	width: 100%;
	margin-top: 15px;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.poll-results div {
	position: relative;
	background: #bbbbbb;
	border-radius: 5px;
	overflow: hidden;
	min-height: 25px;
	display: flex;
	align-items: center;
	overflow: auto;
}

.poll-results div span {
	/* position: absolute; */
	/* left: 10px; */
	font-size: 12px;
	line-height: 1.2;
	z-index: 2;
	font-weight: 500;
	/* white-space: nowrap; */
	padding: 5px 10px;
}

.poll-results .bar {
	position: absolute;
	height: 100%;
	width: 0;
	transition: width 0.5s ease-in-out;
}

.poll-results .filled span {
	color: #fff;
}

.poll-results .filled .bar {
	background-color: var(--accent);
}

.total-votes {
	font-size: 14px;
	margin-top: 5px;
	color: #555;
	margin-bottom: 10px;
}

.poll__title {
	font-size: 16px;
	font-weight: 600;
	border-bottom: 1px solid var(--accent);
	padding-bottom: 5px;
	position: relative;
}

.polls__desc span {
	color: var(--accent);
	font-weight: 500;
	font-size: 14px;
}

.poll-link {
	color: var(--accent);
	display: inline-flex;
}

.poll-link::before {
	content: '[';
}

.poll-link::after {
	content: ']';
}

.poll__bottom {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.modal__overlay {
	z-index: 1000;
}

.poll__bottom-btn {
	height: 30px;
	border: 1px solid var(--accent);
	border-radius: 12px;
	padding: 2px 12px;
	font-size: 12px;
	display: flex;
	align-items: center;
	font-weight: 500;
	user-select: none;
	transition-duration: .15s;
	z-index: 5;
}



.poll__bottom-btn:hover {
	background-color: var(--accent);
	color: #fff;
}

.poll__bottom-delete {
	display: inline-flex;
	align-items: center;
}

.poll__bottom-delete svg {
	width: 24px;
	height: 24px;
	stroke: red;
}


.poll-options {
	display: flex;
	flex-wrap: wrap;
	gap: 5px 10px;
}

.poll__vote-btn {
	margin-top: 10px;
	display: inline-flex;
	align-items: center;
	font-size: 12px;
	font-weight: 600;
	background-color: var(--text);
	color: #fff;
	border-radius: 4px;
	padding: 6px 12px;
	transition-duration: .15s;
}

.poll__vote-btn:hover {
	background-color: var(--accent);
}

.poll__closed {
	text-align: center;
	font-weight: 600;
	font-size: 16px;
	width: 100%;
	position: relative;
	z-index: 5;
	color: #fff;
}

.user__main {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}

.user__main-info {
	grid-column: span 2;
}

@media(max-width: 768px) {
	.user__main {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

.header__logo-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
}

.theme-switch {
	user-select: none;
}

.theme-switch input {
	display: none;
}

.theme-switch span {
	height: 24px;
	border-radius: 20px;
	border: 1px solid #ccc;
	display: block;
	width: 40px;
	position: relative;
	cursor: pointer;
	transition: all 0.15s ease;
}

.theme-switch span::before {
	content: '';
	position: absolute;
	width: 18px;
	left: 2px;
	top: 2px;
	bottom: 2px;
	border-radius: 100%;
	background-color: #ccc;

	background-image: url('../assets/img/moon.svg');
	background-size: 90%;
	background-repeat: no-repeat;
	transition: all 0.15s ease;
	background-position: 50%;
}

.theme-switch input:checked+span {
	border-color: #222;
	background-color: #222;
}

.theme-switch input:checked+span::before {
	background-color: #222;
	transform: translateX(16px);
}

body.dark-theme {
	background-color: #222;
	color: #ebebeb;
}

body.dark-theme .title,
body.dark-theme .user__info-row input,
body.dark-theme .user__info-row select,
body.dark-theme .poll-results span,
body.dark-theme .users input,
body.dark-theme .users select,
body.dark-theme table td input,
body.dark-theme .select,
body.dark-theme select,
body.dark-theme input,
body.dark-theme .full .ts-control,
body.dark-theme .total-votes {
	color: #ebebeb;
}

body.dark-theme .header__wrapper,
body.dark-theme .header__nav-parent ul,
body.dark-theme .user__info-row:nth-child(2n) div,
body.dark-theme .user__event-radio input:not(:checked)+span,
body.dark-theme .user__info-row select,
body.dark-theme tr:not(:nth-child(2n)) td,
body.dark-theme div.dt-button-collection,
body.dark-theme .modal__container,
body.dark-theme select option {
	background-color: #2d2d2d;
}


body.dark-theme .filter input:checked+span {
	color: var(--text);
}

body.dark-theme .modal__field input,
body.dark-theme .dt-search input,
body.dark-theme select,
body.dark-theme .input input,
body.dark-theme .full .ts-control,
body.dark-theme .ts-control,
.ts-wrapper.single.input-active .ts-control,
body.dark-theme .polls__variants-list input {
	background-color: transparent;
}

body.dark-theme .header__nav-parent::after {
	filter: brightness(0) invert(1);
}

body.dark-theme .user-table table .event-yes td {
	background-color: #184819;
}

body.dark-theme .user-table table .event-no td {
	background-color: #6d2f2f;
}

.modal__btns {
	display: flex;
	margin-top: 30px;
	gap: 10px;
}

@media(max-width: 575px) {
	.modal__btns {
		flex-direction: column;
		align-items: flex-start;
	}
}

.modal__text {
	display: flex;
	flex-direction: column;
	row-gap: 15px;
}

.modal__cat {
	max-width: 50px;
	right: -5px;
	top: -39px;
	position: absolute;
}

@media(max-width: 575px) {
	.modal__cat {
		max-width: 35px;
		right: -2px;
		top: -15px;
	}
}

.btn-cat {
	position: relative;

}

.message {
	padding: 20px;
	border: 1px solid var(--accent);
	font-size: 16px;
	width: 100%;
	border-radius: 20px;
	line-height: 1.4;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
}

.message p:not(:last-child) {
	margin-bottom: 25px;
}

.message::before {
	content: '!';
	width: 50px;
	height: 50px;
	border: 1px solid var(--accent);
	border-radius: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--accent);
	font-size: 36px;
	font-weight: bold;
}

.message span {
	color: var(--accent);
	text-decoration: underline;
}


.party-box {
	cursor: pointer;
	transition-duration: .15s;
	user-select: none;
}

.party-box:hover {
	border-color: var(--accent);
}

.leader .table-username::before {
	content: "";
	display: inline-block;
	width: 16px;
	aspect-ratio: 1;
	background-image: url('../assets/img/crown.svg');
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: 50%;
}

.remove-user-btn {
	color: red;
	padding: 0;
	font-size: 16px;
}



.unassigned-box {
	display: flex;
	flex-direction: column;
	row-gap: 20px;
	overflow: auto;
	flex: 1;
}

@media(max-width: 768px) {
	.unassigned-box {
		padding-left: 10px;
		padding-right: 10px;
	}
}

.unassigned-filter input {
	display: none;
}

body.dark-theme .aside {
	background-color: #222;
}

.class-block__title {
	justify-content: center;
	margin-bottom: 4px;
}

.class-filter__item-icon {
	cursor: pointer;
	width: 34px;
	aspect-ratio: 1;
	border-radius: 100%;
	border: 1px solid var(--silver);
	padding: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition-duration: .15s;
}

.class-filter__item input:checked+.class-filter__item-icon {
	border-color: var(--accent);
	background-color: var(--accent);
	padding: 4px;
}

.class-filter__item-icon img {
	width: auto;
	max-width: 100%;
	max-height: 100%;
}

.class-filter__item input {
	display: none;
}

.class-filter {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 5px;
	padding: 0 10px;
}

.class-filter__clear {
	padding: 4px 8px;
	font-size: 12px;
	border-radius: 12px;
	transition-duration: .15s;
	border: 1px solid var(--accent);
}

.class-filter__clear:hover {
	background-color: var(--accent);
	color: #fff;
}

.party-main__aside {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	padding: 30px 0;
	user-select: none;
	width: 300px;
	z-index: 100;
}

@media(max-width: 768px) {
	.party-main__aside {
		position: relative;
		width: 100%;
	}
}

.unassigned-filter__online {
	display: flex;
	justify-content: center;
	cursor: pointer;
}

.unassigned-filter__online span {
	border-radius: 12px;
	padding: 4px 12px;
	border: 1px solid var(--green);
	font-size: 12px;
	display: flex;
	align-items: center;
	gap: 8px;
	transition-duration: .15s;
}

.unassigned-filter__online span::before {
	content: '';
	width: 4px;
	border-radius: 100%;
	aspect-ratio: 1;
	background-color: var(--green);
}

.unassigned-filter__online input:checked+span {
	background-color: var(--green);
	color: #fff;
}

.unassigned-filter__online input:checked+span::before {
	background-color: #fff;
}

.unassigned-box::-webkit-scrollbar {
	width: 4px;

}

.unassigned-box::-webkit-scrollbar-track {
	background: #d0d0d0;
	border-radius: 6px;
}

.unassigned-box::-webkit-scrollbar-thumb {
	background-color: var(--accent);
	border-radius: 6px;
	transition: background-color 0.2s;
}

.unassigned-box::-webkit-scrollbar-thumb:hover {
	background-color: #888;
}

.party-main__body {
	padding-right: 20px;
	padding-left: 320px;
}

@media(max-width: 768px) {
	.party-main__body {
		padding-left: 10px;
		padding-right: 10px;
	}
}

.party-main__body .container {
	margin: 0;
	padding: 0;
}

table {
	color: inherit
}

/* Чат */
.chat {
	position: fixed;
	z-index: 200;
	right: 20px;
	bottom: 20px;
	width: 460px;
}

@media(max-width: 460px) {
	.chat {
		width: 100%;
		max-width: 100%;
		left: 0;
		right: 0;
		bottom: 0;
	}
}

.chat__wrapper {
	padding: 10px;
	background: #0E1621;
	border-radius: 20px;
	box-shadow: 3px 3px 10px rgba(0, 0, 0, .25);
	position: relative;
}

.chat__box {
	height: 460px;
	overflow-y: scroll;
	padding-right: 8px;
}

.chat__box::-webkit-scrollbar,
.chat__form-message::-webkit-scrollbar {
	width: 4px;

}

.chat__box::-webkit-scrollbar-track,
.chat__form-message::-webkit-scrollbar-track {
	background: #d0d0d0;
	border-radius: 6px;
}

.chat__box::-webkit-scrollbar-thumb,
.chat__form-message::-webkit-scrollbar-thumb {
	background-color: var(--accent);
	border-radius: 6px;
	transition: background-color 0.2s;
}

.chat-msg {
	display: flex;
}

.chat-msg:not(:last-child) {
	margin-bottom: 5px;
}

.chat-msg__content {
	align-items: flex-end;
	border-radius: 12px;
	padding: 4px 12px;
	color: #fff;
	font-size: 14px;
}

.chat-msg__content span {
	display: inline-block;
	font-size: 12px;
	margin-left: 7px;
	opacity: 0.5;
}

.chat-msg--mine {
	justify-content: flex-end;
}

.chat-msg__content--theirs {
	background-color: #182533;
}

.chat-msg__content--mine {
	background-color: #2B5278;
}

.chat__form {
	margin-top: 10px;
	display: flex;
	background-color: #17212B;
	padding: 8px;
	align-items: center;
	gap: 7px;
}

.chat__form-message {
	flex: 1;
	height: auto;
	overflow: auto;
	resize: none;
	height: 50px;
	font-size: 14px;
	color: #fff;
	background-color: transparent;
}

.chat__form-btn {
	width: 40px;
	height: 40px;
	border-radius: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 500;
	color: #fff;
	font-size: 16px;
	transition-duration: .15s;
	opacity: .5;
}

.chat__form-btn img {
	max-width: 100%;
	max-height: 100%;
}

.chat__form-message::placeholder {
	color: rgba(255, 255, 255, .5)
}

.chat__date {
	text-align: center;
	margin: 10px 0;
	color: #fff;
	font-size: 12px;
}

.delete-msg {
	margin-left: 5px;
}

.chat__close {
	position: absolute;
	left: 0;
	right: 0;
	top: -35px;
	width: 30px;
	height: 30px;
	background-color: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 100%;
	border: 1px solid #0E1621;
	margin: auto;
	padding: 3px;
}

.chat__close img {
	max-width: 100%;
	max-height: 100%;
}

.dark-theme .chat__close {
	border-color: #fff;
}

.dark-theme .chat__close img {
	filter: brightness(0) invert(1)
}

.chat__open {
	position: fixed;
	right: 40px;
	bottom: 40px;
	width: 80px;
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 100%;
	background-color: #0E1621;
	padding: 20px;
	animation: pulse 2s infinite;
	transition: transform 0.2s ease-in-out;
	z-index: 500;
}

.chat__open img {
	filter: brightness(0) invert(1);
	max-width: 100%;
	max-height: 100%;
}

.dark-theme .chat__open {
	background-color: #fff;
}

.dark-theme .chat__open img {
	filter: none;
}

@keyframes pulse {
	0% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(14, 22, 33, 0.7);
	}

	70% {
		transform: scale(1.08);
		box-shadow: 0 0 0 10px rgba(14, 22, 33, 0);
	}

	100% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(14, 22, 33, 0);
	}
}

.chat__clear-btn {
	display: inline-flex;
	margin-bottom: 5px;
	font-size: 12px;
}

.events__type-form {
	display: flex;
	gap: 10px;

}

.events-filter {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px 12px;
	flex-wrap: wrap;
}

.poll__message {
	margin-bottom: 15px;
	padding: 6px 12px;
	border-radius: 4px;
	font-size: 14px;
	text-align: center;
	transition: all 0.3s ease;

	background-color: var(--accent);
	color: #fff;
}

div.dt-buttons {
	position: relative;
	z-index: 100;
}

.rewards-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px
}

/* БЭМ стили для clan-hall-rewards */



.clan-hall-rewards__message {
	padding: 15px;
	margin: 20px 0;
	border-radius: 8px;
	font-weight: 500;
}

.clan-hall-rewards__message--success {
	background-color: #d4edda;
	color: #155724;
	border: 1px solid #c3e6cb;
}

.clan-hall-rewards__message--error {
	background-color: #f8d7da;
	color: #721c24;
	border: 1px solid #f5c6cb;
}

.clan-hall-rewards__event {
	border: 1px solid var(--accent);
	border-radius: 12px;
	padding: 15px;
}

.clan-hall-rewards__event-header {
	padding-bottom: 10px;
	margin-bottom: 10px;
	border-bottom: 1px solid var(--silver);
}

.clan-hall-rewards__event-info {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.clan-hall-rewards__event-title {
	font-size: 18px;
	font-weight: bold;
}

.clan-hall-rewards {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
	gap: 20px;
}

.clan-hall-rewards__form {
	margin-top: 20px;
	display: flex;
	flex-direction: column;
	row-gap: 15px;
}

.clan-hall-rewards__form--disabled {
	opacity: 0.6;
	pointer-events: none;
}

.clan-hall-rewards__past-notice {
	background: #fff3cd;
	border: 1px solid #ffeaa7;
	color: #856404;
	padding: 15px;
	border-radius: 8px;
	text-align: center;
	font-weight: 500;
	margin-bottom: 20px;
}


.clan-hall-rewards__counter {
	font-weight: bold;
	color: #007bff;
	margin-left: 10px;
}


.clan-hall-rewards__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 7px 10px;
}

.clan-hall-rewards__reward-item {
	border: 1px solid var(--accent);
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 15px 4px 4px;
	border-radius: 4px;
	transition: all 0.15s ease;
	cursor: pointer;
}

.clan-hall-rewards__reward-item:hover {
	transform: translateY(-1px);
}

.clan-hall-rewards__reward-item.disabled {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

.clan-hall-rewards__reward-item.disabled:hover {
	transform: none;
	box-shadow: none;
	border-color: var(--accent);
}

.clan-hall-rewards__reward-item--selected {
	background-color: var(--accent);
	border-color: var(--accent);
	color: #fff;

}


.clan-hall-rewards__reward-icon {
	display: flex;
	align-items: center;
	justify-content: center;
}

.clan-hall-rewards__reward-icon img {
	height: 20px;
	width: auto;
}

.clan-hall-rewards__reward-icon:not(:has(img)) {
	font-size: 20px;
}

.clan-hall-rewards__reward-name {
	font-weight: 500;
	font-size: 12px;
	line-height: 1.2;
}

.clan-hall-rewards__reward-description {
	font-size: 0.9rem;
	line-height: 1.4;
	flex-grow: 1;
}

.clan-hall-rewards__reward-checkbox {
	display: none;
}


/* ===== ADMIN REWARDS STYLES ===== */



.admin-rewards__add-section {
	margin-bottom: 30px;
}


.admin-rewards__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 20px;
	margin-bottom: 30px;
}

.admin-rewards__reward-card {
	border: 1px solid var(--accent);
	border-radius: 12px;
	padding: 20px;
	position: relative;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.admin-rewards__reward-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.admin-rewards__reward-card--inactive {
	opacity: 0.6;
	background: #f8f9fa;
}

.admin-rewards__reward-actions {
	position: absolute;
	top: 15px;
	right: 15px;
	display: flex;
	gap: 8px;
}

.admin-rewards__edit-btn,
.admin-rewards__delete-btn {
	width: 40px;
	aspect-ratio: 1;
	padding: 4px;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	font-size: 0.9rem;
	transition: all 0.3s ease;
}

.admin-rewards__edit-btn:hover,
.admin-rewards__delete-btn:hover {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.admin-rewards__edit-btn {
	background: var(--accent);
	color: white;
}

.admin-rewards__delete-btn {
	background: #dc3545;
	color: white;
}


.admin-rewards__delete-form {
	display: inline;
}

.admin-rewards__reward-icon {
	margin: 0 auto 15px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.admin-rewards__reward-icon img {
	height: 32px;
	width: auto;
}

.admin-rewards__reward-name {
	font-size: 1.2rem;
	font-weight: 600;
	margin-bottom: 10px;
	color: var(--text-primary);
	text-align: center;
}

.admin-rewards__reward-description {
	color: var(--text-secondary);
	margin-bottom: 15px;
	text-align: center;
	line-height: 1.4;
}

.admin-rewards__reward-info {
	font-size: 0.9rem;
	color: var(--text-secondary);
	text-align: center;
	line-height: 1.5;
}

.admin-rewards__reward-status {
	font-weight: 500;
}

.admin-rewards__reward-date {
	color: var(--text-muted);
}

/* ===== FILE UPLOAD STYLES ===== */

.admin-rewards__file-upload {
	position: relative;
	width: 100%;
}

.admin-rewards__file-input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	overflow: hidden;
}

.admin-rewards__file-label {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 20px;
	border: 2px dashed var(--silver);
	border-radius: 12px;
	cursor: pointer;
	transition: all 0.3s ease;
	text-align: center;
	justify-content: center;
}

.admin-rewards__file-label:hover {
	border-color: var(--accent);
	transform: translateY(-1px);
}

.admin-rewards__file-upload--dragover .admin-rewards__file-label {
	border-color: var(--accent);
	transform: scale(1.02);
}

.admin-rewards__file-icon {
	font-size: 2rem;
	color: var(--accent);
}

.admin-rewards__file-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.admin-rewards__file-title {
	font-weight: 600;
	font-size: 1rem;
}

.admin-rewards__file-subtitle {
	font-size: 0.9rem;
}

.admin-rewards__file-preview {
	position: relative;
	display: none;
	padding: 20px;
	border: 2px solid var(--accent);
	border-radius: 12px;
	text-align: center;
}

.admin-rewards__file-preview img {
	max-width: 100%;
	max-height: 120px;
	border-radius: 8px;
	object-fit: cover;
}

.admin-rewards__file-remove {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 24px;
	height: 24px;
	border: none;
	border-radius: 50%;
	background: #dc3545;
	color: white;
	font-size: 14px;
	font-weight: bold;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.3s ease;
}

.admin-rewards__file-remove:hover {
	background: #c82333;
}


.admin-events__message {
	padding: 15px;
	border-radius: 8px;
	margin-bottom: 20px;
	font-weight: 500;
}

.admin-events__message--success {
	background: #d4edda;
	border: 1px solid #c3e6cb;
	color: #155724;
}

.admin-events__message--error {
	background: #f8d7da;
	border: 1px solid #f5c6cb;
	color: #721c24;
}

/* BEM стили для админ отчета */
.admin-report__summary-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 20px;
	margin: 20px 0;
	padding: 0;
}

.admin-report__stat-card {
	background: var(--card-bg);
	border: 1px solid var(--border-color);
	border-radius: 12px;
	padding: 24px;
	text-align: center;
	transition: all 0.3s ease;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.admin-report__stat-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.admin-report__stat-number {
	font-size: 2.5rem;
	font-weight: bold;
	color: var(--accent-color);
	margin-bottom: 8px;
	line-height: 1;
}

.admin-report__stat-label {
	color: var(--text-secondary);
	font-size: 0.9rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}


.admin-report__filter-checkboxes {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.admin-report__filter-checkbox span {
	display: flex;
	align-items: center;
	cursor: pointer;
	position: relative;
	padding: 5px 12px;
	border: 1px solid var(--accent);
	border-radius: 4px;
	transition: all 0.3s ease;
	font-size: 14px;
	gap: 6px;
	user-select: none;
}


.admin-report__filter-checkbox input[type="checkbox"] {
	display: none;
}

.admin-report__filter-checkbox input[type="checkbox"]:checked+span {
	background: var(--accent);
	color: white;
}


.admin-report__reward-icon-small {
	width: 20px;
	height: 20px;
	object-fit: contain;
}

.admin-report__table-container {
	margin-top: 20px;
}

.admin-report__table-container .dt-search {
	justify-content: flex-end;
}

.admin-report__table {
	width: 100%;
	border-collapse: collapse;
	background: var(--card-bg);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}



.admin-report__selector-title {
	margin: 0 0 20px 0;
	color: var(--text-primary);
	font-size: 1.3rem;
	font-weight: 600;
}

.dt-column-title {
	display: flex;
	align-items: center;
	gap: 10px;
}

.dt-column-title img {
	height: 24px;
	width: auto;
}

.admin-report__selector-form {
	margin: 0;
}

.admin-report__form-group {
	margin: 0;
}

.admin-report__form-label {
	display: block;
	margin-bottom: 8px;
	color: var(--text-primary);
	font-weight: 500;
	font-size: 1rem;
}

.twins-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 15px;
	margin-top: 20px;
	width: 100%;
}

.twin-item {
	border: 1px solid var(--silver);
	border-radius: 12px;
	padding: 15px;
	transition-duration: .15s;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.twin-item:hover {
	border-color: var(--accent);
	box-shadow: 0 2px 8px rgba(0, 146, 182, 0.1);
}

.twin-item__info {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
}

.twin-item__icon {
	width: 38px;
	height: 38px;
	object-fit: contain;
}

.twin-item__name {
	font-size: 16px;
	font-weight: 600;
}

.twin-item__class {
	font-size: 14px;
	color: var(--accent);
	font-weight: 500;
}

.twin-item__actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: auto;
}

.twin-item__actions .btn-outline {
	width: 100%;
	justify-content: center;
	font-size: 14px;
	padding: 8px 12px;
}

.twins-empty {
	text-align: center;
	color: #999;
	font-size: 14px;
	padding: 20px;
	grid-column: 1 / -1;
}

@media(max-width: 768px) {
	.twins-list {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: 10px;
	}
	
	.twin-item {
		padding: 12px;
	}
	
	.twin-item__icon {
		width: 30px;
		height: 30px;
	}
	
	.twin-item__name {
		font-size: 14px;
	}
	
	.twin-item__class {
		font-size: 12px;
	}
}