@import url('settings.css');

html,
body {
	width: 100%;
	margin: 0px;
	padding: 0px;
	position: relative;
}

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

.content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: 1800px;
	width: 100%;
	margin: auto;
	gap: 1rem;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0px;
	text-align: left;
}

img:not(.logo), video:not(.logo) {
	max-width: 100%;
}

img.logo-xs, video.logo-xs {
	height: 2rem;
}

img.logo-s, video.logo-s {
	height: 3rem;
}

img.logo, video.logo {
	height: 4rem;
}

img.logo-l, video.logo-l {
	height: 6rem;
}

img.logo-l-alt, video.logo-l-alt {
	max-height: 12rem;
}

img.logo-xl, video.logo-xl {
	height: 16rem;
}

img.logo-xxl, video.logo-xxl {
	height: 24rem;
}

img.logo-1-6, video.logo-1-6 {
	width: calc(16.6666% - 0.833334rem);
	height: auto;
}

@media screen and (max-width: 550px) {
	img.logo-1-6, video.logo-1-6 {
		width: calc(33.33% - 0.67rem);
	}
}

.logo.rounded {
	border-radius: 100%;
}

.m-auto {
	margin: auto;
}

img.logo-spin {
	animation: spin 2s linear infinite;
}

img.locked {
    opacity: var(--BadgeOpacityCollection);
}

p {
	margin: 0px;
	line-height: var(--line-height);
}

a {
	color: var(--ColorLink);
	text-decoration: none;
	width: fit-content;
	touch-action: manipulation;
}

.scroll-mandatory {
	scroll-snap-type: x mandatory;
}

.scroll-mandatory > * {
	scroll-snap-align: center;
}

.text-truncate {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: inline-block !important;
	text-align: left !important;
	max-width: 100%;
	flex: 1;
}

.margin-left-auto, .ml-auto {
	margin-left: auto !important;
}

.margin-right-auto, .mr-auto {
	margin-right: auto !important;
}

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

.overflow-auto {
	overflow: auto;
}

.overflow-hidden {
	overflow: hidden !important;
}

.flex-1 {
	flex: 1 0 0%;
}

.flex-shrink-0 {
	flex-shrink: 0 !important;
}

.flex-grow-0 {
	flex-grow: 0 !important;
}

.row.no-wrap {
	flex-wrap: nowrap;
}

body {
	font-family: var(--FontPrincipale);
	font-size: var(--FontSize);
	color: var(--ColorText);
	background: var(--ColorBody);
	transition: var(--Transition);
	background-attachment: fixed;
	height: 100dvh;
}

html:is(.game), html:is(.game) body {
	max-width: 800px;
	margin: auto;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	user-select: none;
}

.titre {
	font-family: var(--FontFocus);
	font-weight: bold;
	margin: 0px;
	font-size: var(--FontSize-xl);
	text-align: left;
	text-transform: uppercase;
	display: flex;
	gap: 0.5rem;
	max-width: 100%;
}

.font-bold {
	font-weight: bold;
	font-family: var(--FontBold);
}

.font-size-s {
	font-size: var(--FontSize-s) !important;
}

.font-size-m {
	font-size: var(--FontSize-m) !important;
}

.font-size-l {
	font-size: var(--FontSize-l) !important;
}

.font-size-xl {
	font-size: var(--FontSize-xl) !important;
}

.titre span {
	font-family: var(--FontPrincipale);
	font-weight: bold;
	text-transform: initial;
	width: unset;
}

.transition {
	transition: var(--Transition);
}

.block {
	padding: 1rem;
	border-radius: var(--BorderRadius);
	background-color: var(--ColorContainer);
	box-shadow: var(--Shadow);
	display: flex;
	flex-direction: column;
	align-items: center;
	backdrop-filter: var(--Blur);
	width: 100%;
	flex: 1 0 0%;
	gap: 1rem;
	transition: all 0.5s;
}

.block.block-1-3 {
	flex: 1 0 33.3333%;
	width: 33.3333%;
}
.block.block-2-3 {
	flex: 1 0 66.6666%;
	width: 66.6666%;
}

.fade-in {
	animation: fadeIn 0.5s;
}

.row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
	flex: 1 0 0%;
	gap: 1rem;
}

.column {
	display: flex;
	flex-direction: column;
	width: 100%;
	flex: 1 0 0%;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 1rem;
}

.display-none {
	display: none !important;
}

.gap-0 {
	gap: 0px !important;
}

.gap-xs {
	gap: 0.25rem !important;
}

.gap-s {
	gap: 0.5rem !important;
}

.gap-l {
	gap: 2rem !important;
}

.mt-s {
	margin-top: 0.5rem;
}
.mt-m {
	margin-top: 1rem;
}
.mt-l {
	margin-top: 2rem;
}

.block .row h2 {
	margin: 0px;
}
.block > .row .column:not(.col-1, .col-2) {
	gap: 0.5rem;
	flex: unset;
	width: unset;
}
.block .row .column strong {
	font-size: 1.125rem;
}

.block.disabled {
	opacity: 0.6;
}

.block .header {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: flex-start;
	gap: 0.5rem;
}

.block .header h2 {
	margin: 0px;
	font-size: var(--FontSize-m);
	font-weight: bold;
}

.block .header span {
	width: unset;
}

.align-items-start {
	align-items: flex-start;
}

.align-items-end {
	align-items: flex-end;
}

.align-items-stretch {
	align-items: stretch;
}

.align-items-center {
	align-items: center;
}

.justify-content-start {
	justify-content: flex-start;
}

.justify-content-center {
	justify-content: center;
}

.justify-content-end {
	justify-content: flex-end;
}

pre,
textarea {
	white-space: pre-wrap;
	font-family: var(--FontPrincipale);
	margin: 0px;
	width: 100%;
	line-height: var(--line-height);
}

form {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 0px;
	gap: 1rem;
	width: 100%;
	flex: 1 0 0%;
}

label:not(.btn, .radio, .switch, .segmented-control-content) {
	flex-grow: 0;
	width: 100%;
	text-align: left;
}

.form-row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: space-between;
	width: 100%;
	gap: 1rem;
}

.form-row .column {
	align-items: flex-start;
	gap: 0.5rem;
}

.form-row .column span, .text-message {
	font-size: 0.875rem;
}

.form-row .column span.optional {
	opacity: 0.8;
}

.col-1 {
	flex: 1 0 100%;
}

.col-2 {
	flex: 1 0 0%;
}

.items {
	flex: 1 0 0%;
}

*:not(.input-container) > input:not([type="checkbox"]),
textarea,
select, .input-effect,
.input-container {
	border: none;
	background-color: var(--ColorRow);
	color: var(--ColorText);
	width: 100%;
	padding: 0.5rem 0.5rem;
	flex: 1 0 0%;
	border-radius: var(--BorderRadius);
	font-size: var(--FontSize);
	margin: 0px;
	outline: none;
	border: solid 1px transparent;
	gap: 0px;
	box-shadow: var(--Shadow);
}

.input-container {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: flex-start;
	width: 100%;
	padding: 0px;
}

.input-container input {
	flex: 1 0 0%;
	padding: 0.5rem 0.5rem;
	border: none;
	background: transparent;
	color: var(--ColorText);
	outline: none;
	border-radius: var(--BorderRadius);
	font-size: var(--FontSize);
}

.input-container button,
.input-container .icon,
.input-container a {
	background: transparent;
	border: none;
	color: var(--ColorText);
	padding: 0.5rem 1rem !important;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--BorderRadius);
	font-size: var(--FontSize);
}

.input-container button i,
.input-container .icon i {
	font-size: var(--FontSize-s);
}

.input-container button:hover {
	background-color: var(--ColorRowHover);
}

.input.success,
.input-container.success {
	border-color: var(--ColorGreen);
}

.input-container.success .icon {
	color: var(--ColorGreen);
}

.input.error,
.input-container.error {
	border-color: var(--ColorRed);
}

.input-container.error .icon {
	color: var(--ColorRed);
}

::placeholder {
	color: var(--ColorText);
	opacity: 0.8;
}

textarea {
	appearance: none;
	resize: none;
	height: 100px;
	flex: unset;
}

span {
	font-size: var(--FontSize);
	width: 100%;
	text-align: left;
}

.text-center {
	text-align: center;
}

span a {
	color: var(--ColorLink);
	text-decoration: none;
	font-size: inherit;
}

button {
	cursor: pointer;
}

.switch,
.radio {
	display: flex;
	gap: 1rem;
	cursor: pointer;
}

.switch input,
.radio input {
	display: none;
}

.radio span {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding: 0.5rem 1rem;
	color: var(--ColorText);
	background-color: var(--ColorContainer);
	border-radius: var(--BorderRadius);
	width: fit-content;
}

.radio span i {
	margin: 0px;
}

.switch span,
.old_switch {
	transition: var(--Transition);
	width: 35px !important;
	height: 20px;
	border-radius: 50px;
	cursor: pointer;
	background-color: var(--ColorBackground);
	position: relative;
	display: block;
	box-shadow: var(--Shadow);
}

.switch span::before,
.old_switch .dot {
	content: '';
	height: 16px;
	width: 16px;
	background-color: white;
	border-radius: 50px;
	position: absolute;
	top: 2px;
	left: 2px;
	transition: var(--Transition);
	box-shadow: var(--Shadow2);
}

.switch input:checked + span,
.old_switch.Selected {
	background-color: var(--ColorGreen);
	transition: var(--Transition);
}

.radio input:checked + span {
	background-color: var(--ColorBlue10);
	color: var(--ColorBlue);
	transition: var(--Transition);
}

.switch.blue input:checked + span {
	background-color: var(--ColorBlue);
}

.switch.red input:checked + span {
	background-color: var(--ColorRed);
}

.switch input:checked + span::before,
.old_switch.Selected .dot {
	left: calc(100% - 18px);
	transition: var(--Transition);
}

.switch input:disabled + span {
	opacity: 0.4;
}

button {
	font-family: var(--FontFocus);
}

.btn {
	border: none;
	padding: 0.5rem 1.25rem;
	border-radius: var(--BorderRadius);
	font-size: var(--FontSize);
	text-decoration: none;
	outline: none;
	font-family: var(--FontFocus);
	transition: var(--Transition);
	text-align: center;
	cursor: pointer;
	backdrop-filter: var(--Blur);
	color: var(--ColorText);
	background-color: var(--ColorContainer);
	white-space: nowrap;

	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	box-shadow: var(--Shadow);
}

.popup-content .btn, .block .btn {
	background-color: var(--ColorRow);
}

.btn.icon-only {
	padding: 0.5rem 1rem;
}

.btn.btn-valid:not(.block) {
	background-color: var(--ColorGreen);
	color: var(--ColorTextBtn);
}

.btn.btn-valid:hover {
	background-color: var(--ColorGreen2);
	transition: 0.3s;
}

.btn.btn-stats:not(.block) {
	background-color: var(--ColorOrange);
	color: var(--ColorTextBtn);
}

.btn.btn-stats:hover {
	background-color: var(--ColorOrange2);
	transition: 0.3s;
}

.btn.btn-primary:not(.block) {
	background-color: var(--ColorPrimary);
	color: var(--ColorPrimaryText);
}

.btn.btn-primary:hover {
	background-color: var(--ColorPrimary2);
	transition: var(--Transition);
}

.btn.btn-edit:not(.block) {
	background-color: var(--ColorBlue);
	color: var(--ColorTextBtn);
}

.btn.btn-edit:hover {
	background-color: var(--ColorBlue2);
	transition: var(--Transition);
}

.btn.btn-supp:not(.block) {
	background-color: var(--ColorRed);
	color: var(--ColorTextBtn);
}

.btn.btn-supp:hover {
	background-color: var(--ColorRed2);
	transition: var(--Transition);
}

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

.btn-round {
	background-color: var(--ColorBackground);
	border-radius: 100%;
	border: none;
	color: var(--TextColor);
	height: 30px;
	width: 30px;
}

.btn.btn-icon {
    background-color: var(--ColorText);
    color: var(--ColorRow);
    border-radius: 100%;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    padding: 0px;
}

.hyperlien {
	color: var(--ColorLink);
}

button.hyperlien {
	background: unset;
	padding: unset;
	border: unset;
	font-size: 1rem;
}

.btn-cancel {
	border: none;
	background-color: transparent;
	font-size: var(--FontSize);
	font-family: var(--FontPrincipale);
	width: initial !important;
	transition: var(--Transition);
	text-align: center;
	cursor: pointer;
	box-shadow: unset;
}

.btn-cancel {
	color: var(--ColorText);
}

.btn-cancel:hover {
	opacity: 0.4;
	transition: var(--Transition);
}

.paginator {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.paginator .page-selector,
.paginator .limit-selector {
	display: flex;
	flex-direction: row;
}

.paginator .limit-selector {
	display: flex;
	flex-direction: row;
}

.paginator .page-selector a,
.paginator .limit-selector a {
	padding: 8px;
	background-color: var(--ColorRow);
}

.paginator .page-selector a:not([disabled]):hover,
.paginator .limit-selector a:not([disabled], .active):hover {
	background-color: var(--ColorRowHover);
}

.paginator .limit-selector a.active {
	background-color: var(--ColorBlue10);
	color: var(--ColorBlue)
}

.paginator .limit-selector a:first-child,
.paginator .page-selector a:first-child {
	border-radius: var(--BorderRadius) 0 0 var(--BorderRadius);
}

.paginator .limit-selector a:last-child,
.paginator .page-selector a:last-child {
	border-radius: 0 var(--BorderRadius) var(--BorderRadius) 0;
}

.paginator * {
	color: var(--ColorText);
}

.paginator .page {
	background-color: var(--ColorRow);
	padding: 8px 10px;
}

.badges {
	padding: 8px 12px;
	border-radius: 0.75rem;
	font-weight: 800;
	width: unset;
	font-size: var(--FontSize) !important;
	vertical-align: middle;
	background-color: var(--ColorContainer);
	color: var(--ColorText);
	backdrop-filter: var(--Blur);
	white-space: nowrap;
	position: relative;
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 0.5rem;
	border: none;
	box-shadow: var(--Shadow);
}

.block .badges {
	background-color: var(--ColorBackground);
}

.badges[spoiler="false"] span {
	visibility: hidden;
	width: 120px;
}

.titre.badges {
	font-size: var(--FontSize-l) !important;
}

.badges.dot::before {
	content: '•';
	margin-right: 8px;
}

.badges.green {
	background-color: var(--ColorGreen10);
	color: var(--ColorGreen);
}

.badges.orange {
	background-color: var(--ColorOrange10);
	color: var(--ColorOrange);
}

.badges.red {
	background-color: var(--ColorRed10);
	color: var(--ColorRed);
}

.badges.blue {
	background-color: var(--ColorBlue10);
	color: var(--ColorBlue);
}

.badges.primary {
	background-color: var(--ColorPrimary10);
	color: var(--ColorPrimary);
}

.badges.gold {
	background: linear-gradient(135deg, #e3c077, #b3843f);
	color: #473d14;
}

.badges.silver {
	background: linear-gradient(135deg, #bdc0c5, #8a8f92);
	color: #4f4f5a;
}

.badges.bronze {
	background: linear-gradient(135deg, #e3ab82, #b36b4b);
	color: #58401a;
}

.cursor-pointer {
	cursor: pointer;
}

.fa-grip-lines {
	cursor: grab;
}

.fa-grip-lines:active {
	cursor: grabbing;
}

*[disabled], .disabled {
	opacity: 0.4;
	pointer-events: none;
}

html:not(.game) section.account {
	position: relative;
    padding: 1.5rem 2rem;
    min-height: 100vh;
}

html.game section.account {
	position: relative;
	padding: 1rem 0px 2rem 0px;
	flex: 1;
	overflow: auto;
}

html:is(.game) section.account > div:not(.block, .p-0, .container-login) > *:not(.block, .p-0), 
html:is(.game) section.account .p-0 > * > *:not(.column), 
html:is(.game) section.account .p-0 > * > .column > * {
	padding-left: 1rem;
	padding-right: 1rem;
	padding-bottom: 0.5rem;
}

html.game *::-webkit-scrollbar {
    display: none;
}

.mini-menu {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: flex-start;
	width: 100%;
	gap: 0.5rem;
	overflow-x: auto;
	overflow-y: visible;
	padding: 0.75rem 0;
	margin: -0.75rem 0;
}

.mini-menu #clearsearch {
	margin: 0px;
	position: absolute;
	top: 50%;
	transform: translate(0px, -50%);
	right: 4.5rem;
	color: var(--ColorText);
}

.mini-menu button {
	margin: unset;
}

.mini-menu form.input-container {
	max-width: 300px;
	flex: unset;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: center;
	position: relative;
	background-color: var(--ColorContainer);
}

.mini-menu span {
	width: unset;
	display: flex;
	align-items: center;;
}

.no-link {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin: 0px;
}

.block .no-link {
	margin: 0px;
}

.no-link > i {
	font-size: var(--IconSize-l);
	color: var(--ColorText);
	background-color: var(--ColorContainer);
	padding: 0px;
	border-radius: 100%;
	box-shadow: var(--Shadow);
	width: 80px;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.block .no-link > i {
	background-color: var(--ColorBackground);
}

.no-link > p {
	margin: 0px 0px 0px 0px;
	text-align: center;
	width: 100%;
}

@media screen and (max-width: 600px) {
	.no-link {
		text-align: center;
	}

}

.text-alert {
	color: var(--ColorRed);
	box-shadow: unset;
}

.text-success {
	color: var(--ColorGreen);
	box-shadow: unset;
}

.text-infos {
	color: var(--ColorBlue);
	box-shadow: unset;
}

.text-primary {
	color: var(--ColorPrimary);
	box-shadow: unset;
}

.text-secondary {
	color: var(--ColorSecondary);
	box-shadow: unset;
}

.text-muted  {
	color: var(--ColorTextAlt);
}

.text-small {
	font-size: 0.875rem;
}

button[class*="btn"] i,
a[class*="btn"] i {
	transition: unset;
}

.drag-drop-container {
	position: relative;
}

.drag-drop-container input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.drag-drop-container.drag-drop-input input {
	width: 100%;
	height: 100%;
}

.drag-drop-container .drag-drop {
	width: 100%;
	border-radius: var(--BorderRadius);
	background-color: var(--ColorRow);
}

.drag-drop-container .drag-drop-content {
	width: 100%;
	border-radius: var(--BorderRadius);
	background-color: var(--ColorRow);
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	box-shadow: var(--Shadow);
}

.drag-drop-container .drag-drop .column {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 1rem;
}

.drag-drop-container .drag-drop i {
	font-size: 1.25rem;
	color: var(--ColorLink);
}

.drag-drop-container .drag-drop img,
.drag-drop-container .drag-drop video {
	height: 3rem;
}

.drag-drop-container .drag-drop .btn {
	background-color: transparent;
	padding: 0px;
}

.container-tab-selector {
	width: 100%;
	display: flex;
	align-items: stretch;
	transition: var(--Transition);
	overflow: auto;
}

.container-tab-selector .tab {
	padding: 0.5rem 0.75rem calc(0.5rem - 2px) 0.75rem;
	background-color: transparent;
	border: none;
	font-size: 1rem;
	border-bottom: solid 2px transparent;
	border-radius: 4px 4px 0px 0px;
	color: var(--ColorText);
	white-space: nowrap;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.container-tab-selector .tab .notification {
	position: relative;
	top: 0;
	right: 0;
}

.container-tab-selector .tab:hover {
	background-color: var(--ColorBlue10);
	border-color: var(--ColorBlue10);
}

.container-tab-selector .tab.active {
	border-color: var(--ColorBlue);
}

.no-flex {
	flex: unset !important;
	width: unset !important;
}

.flex {
	flex: 1;
}

.w-100 {
	width: 100% !important;
}

.h-100 {
	height: 100% !important;
}

.separator::before {
    content: '';
    width: 100%;
    height: 4px;
    border-radius: var(--BorderRadius);
    background-color: var(--ColorSeparator);
	box-shadow: var(--Shadow);
}

.selector {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--ColorContainer);
	border-radius: var(--BorderRadius);
	padding: 0.5rem;
	gap: 0.5rem;
	width: 100%;
	box-shadow: var(--Shadow);
}

.selector .selector-btn {
	color: var(--ColorText);
	border-radius: calc(var(--BorderRadius) / 2);
	padding: 0.5rem 0.75rem;
	cursor: pointer;
	font-size: 0.875rem;
	border: none;
	background-color: transparent;
	font-weight: bold;
	flex: 1;
	transition: var(--Transition);
}

.selector .selector-btn:hover {
	background-color: var(--ColorBackground);
}

.selector .selector-btn.active {
	background-color: var(--ColorPrimary);
	color: var(--ColorPrimaryText);
	box-shadow: var(--Shadow);
}

.border-radius-s {
	border-radius: 0.25rem;
}

.border-radius {
	border-radius: 0.5rem;
}

.border-radius-l {
	border-radius: 0.75rem;
}

.border-radius-xl {
	border-radius: 1rem;
}

.border-radius-xxl {
	border-radius: 8rem;
}

.border-radius-100 {
	border-radius: 100%;
}

ul, ol {
	margin: 0px;
	padding-left: 2rem;
}

ul li:not(:last-child), ol li:not(:last-child) {
	margin-bottom: 0.5rem;
}

.container-avatar {
    position: relative;
    width: 10rem;
    aspect-ratio: 1/1;
    cursor: pointer;
}

.container-avatar img, .container-avatar video  {
    border-radius: 100%;
}

.container-avatar .btn-icon {
    position: absolute;
    bottom: 0;
    right: 0;
	box-shadow: var(--Shadow);
}

.max-w-800 {
	max-width: 800px;
	margin: auto;
}

@media screen and (max-width: 800px) {
	.max-w-800 {
		max-width: 100%;
	}
}

@media screen and (max-width: 1000px) {

	.block,
	.column,
	form,
	.block.block-1-3,
	.block.block-2-3 {
		flex: unset;
		width: 100%;
	}

	.row.no-wrap {
		flex-wrap: wrap;
	}
}

@media screen and (max-width: 780px) {
	.form-row {
		flex-direction: column;
		margin-bottom: 0px;
	}

	html:not(.game) section.account {
        padding: 1rem 1rem;
        min-height: 100vh;
    }

	.form-row .column.col-2 {
		width: 100%;
	}

	.titre {
		font-size: var(--FontSize-l);
	}

	.block .header .row {
		width: 100%;
		flex-wrap: nowrap;
	}

	.block .header .row .badges {
		flex: 1;
		text-align: center;
	}

	.block .row form {
		width: 100%;
		flex: unset;
	}
}

@media screen and (max-width: 600px) {
	.no-link > p {
		width: unset;
	}

	.mini-menu .btn-valid span {
		display: none;
	}
}

@media screen and (max-width: 650px) {
	.btn:not(.switch) span {
		display: none;
	}

	.switch, .radio {
		flex-wrap: wrap;
	}
}

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

@keyframes fadeIn {
	0% {
	  opacity: 0;
	  margin-top: 100px;
	}
	100% {
	  opacity: 1;
	  margin-top: 0px;
	}
  }

  .qr-code {
	width: 8rem;
  }

  .qr-code * {
	fill: var(--ColorText);
  }