@charset "UTF-8";
@font-face {
    font-family: 'Ubuntu X';
    src: url('./ubuntu-condensed.ttf');
    font-display: swap;
}
*,
:after,
:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	outline: 0;
	-ms-interpolation-mode: bicubic;
	image-rendering: auto
}

html {
	height: 100%
}

body {
	background-color: #ffffff;
	font-family: 'Ubuntu X';
	font-size: 15px;
	color: #333;
	margin: 0;
	user-select: none;

}

body.hotel-visible {
	overflow: hidden
}

a {
	color: white;
	text-decoration: none
}

b,
strong {
	font-weight: 600
}

hr {
	border: 0;
	border-top: 1px solid #ccc;
	width: 100%;
	height: 0;
	margin: 20px 0;
	padding: 0
}

h1,
h2,
h3 {
	margin-bottom: 15px
}

h2,
h3,
h4,
h5,
h6 {
	font-weight: 500
}

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
	margin-top: 0
}

h4,
h5,
h6 {
	margin-bottom: 5px
}

h1 {
	font-size: 25px;
	font-weight: 600;
	font-family: 'Ubuntu X'
}

h2 {
	font-size: 20px
}

h3 {
	font-size: 18px;
	line-height: 26px
}

h4 {
	font-size: 19px
}

h5 {
	font-size: 17px
}

h6 {
	font-size: 16px
}

.title {
	margin: 0;
	font-family: "Nunito"
}

.subtitle {
	margin: .25em 0 1.5em
}

.w-25 {
	width: 25%
}

.login-popup .login-form .code-input input,
.login-popup .login-form .password-input input,
.login-popup .login-form .username-input input,
.w-50 {
	width: 50%
}

@media (max-width:950px) {
	.w-25 {
		width: 50%
	}

	.w-50 {
		width: 75%
	}
}

.w-75 {
	width: 75%
}

.w-100 {
	width: 100%
}

.h-100 {
	height: 100%
}

.m-auto {
	margin: auto
}

.mt_1 {
	margin-top: 1em
}

.mt_2 {
	margin-top: 2em
}

.mt_3 {
	margin-top: 3em
}

.ml_1 {
	margin-left: 1em
}

.mb_0 {
	margin-bottom: 0
}

.mb_1 {
	margin-bottom: 1em
}

.mb_2 {
	margin-bottom: 2em
}

.flex_1 {
	flex: 1
}

.flex_2 {
	flex: 2
}

.flex_4 {
	flex: 4
}

.d-none {
	display: none !important
}

.text-center {
	text-align: center
}

input,
textarea {
	background: #f6f6f6;
	border: 2px solid #f3f1f1;
	color: #1e1e1e;
	border-radius: 1em;
	padding: .75em 1em;
	font-size: 15px;
	font-weight: 200;
	font-family: 'Ubuntu X'
}

input:disabled,
input:read-only,
textarea:disabled,
textarea:read-only {
	background: #eaeaea;
	border: 2px solid #fff;
	cursor: default
}

.btn-success {
	color: #fff;
	background-color: #5cb85c;
	border-color: #4cae4c
}

.btn,
.form-control {
	padding: 6px 12px;
	font-size: 14px;
	font-family: "Poppins", Arial, sans-serif;
	line-height: 1.42857143;
	background-image: none;
	border-radius: 4px
}

.btn {
	text-decoration: none;
	display: inline-block;
	margin-bottom: 0;
	font-weight: 400;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	border: 1px solid transparent
}

button,
html input[type=button],
input[type=reset],
input[type=submit] {
	-webkit-appearance: button;
	cursor: pointer
}

.btn.btn-primary {
	color: #fff;
	background-color: #337ab7;
	border-color: #2e6da4
}

.btn.btn-error {
	color: #fff;
	background-color: red
}

.btn.btn-success {
	color: #fff;
	background-color: #31c766
}

.btn.btn-nav {
	color: #fff;
	background-color: rgba(44, 59, 72, .8784313725)
}

.form-control {
	display: block;
	height: 34px;
	float: left;
	width: 227px;
	color: #555;
	background-color: #fff;
	border: 1px solid #ccc;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
	-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
	-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s
}

.habbox-logo img,
.pixelated,
.pixelated:after,
.pixelated:before {
	image-rendering: pixelated
}

.tooltip {
	position: relative
}

.tooltip .text {
	visibility: hidden;
	background-color: #fff;
	color: #373750;
	text-align: center;
	padding: .5em 1em;
	width: auto;
	border-radius: 10px;
	position: absolute;
	z-index: 2;
	top: -2.75em;
	left: 50%;
	transform: translateX(-50%);
	box-shadow: 0 0 9px rgba(0, 0, 0, .25);
	white-space: nowrap
}

.tooltip:hover .text {
	visibility: visible
}

input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px #fff inset;
	-webkit-text-fill-color: #333 !important;
	background-color: #fff !important
}

.switch-container {
	position: relative;
	top: 1px;
	cursor: pointer;
	height: 26px;
	display: inline-block
}

.switch-container input {
	position: absolute;
	opacity: 0
}

.switch-container .switch-button {
	background-color: #e6e6e6;
	display: inline-block;
	height: 26px;
	position: relative;
	border-radius: 8px;
	width: 46px
}

.switch-container .switch-button:before {
	width: 20px;
	height: 20px;
	-webkit-transition: all 300ms;
	-moz-transition: all 300ms;
	transition: all 300ms;
	position: absolute;
	top: 3px;
	left: 3px;
	content: "";
	border-radius: 5px;
	background-color: #cfcfcf
}

.switch-container input:checked~.switch-button:before {
	background-color: #16759e;
	-webkit-transform: translate3d(20px, 0, 0);
	-moz-transform: translate3d(20px, 0, 0);
	transform: translate3d(20px, 0, 0)
}

.switch-container.purple input:checked~.switch-button:before {
	background-color: #afafaf
}

.switch-container.brown input:checked~.switch-button:before {
	background-color: #37241c
}

.switch-container .switch-label {
	position: relative;
	top: -7px;
	padding-left: 10px
}

.rounded-button {
	display: inline-block;
	width: fit-content;
	border-radius: 1em;
	padding: .75em 2em;
	color: #fff;
	background-color: #526271;
	border: 2px solid #677a8c;
	font-size: 15px;
	text-decoration: none;
	font-weight: 600;
	cursor: pointer;
	text-align: center
}

.rounded-button.center {
	margin: auto
}

.rounded-button:hover {
	background-color: #485562
}

.rounded-button.green {
	background-color: #649d3c;
	border: 2px solid #85c459
}

.rounded-button.green:hover {
	background-color: #528131;
	border: 2px solid #85c459
}

.payment-popup .row button,
.rounded-button.w-100 {
	width: 100%
}

.index-body {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh
}

.index-body .index-box {
	width: 60vw;
	min-height: 36em;
	max-height: 80vh;
	background-color: #fff;
	padding: 2em;
	border-radius: 3em;
	display: flex;
	flex-direction: row;
	gap: 2em;
	margin: 10vh 0
}

.index-body .index-box.claim-box {
	width: 40vw;
	min-height: 32em
}

.index-body .index-box .index-left {
	padding: 1em 5em;
	flex: 1
}

.index-body .index-box .index-left .logo-style {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1em;
	color: #000;
	font-size: 1.25em
}

.index-body .index-box .index-left .logo-style .index-logo {
	image-rendering: pixelated;
	width: 3em
}

.index-body .index-box .index-left .claim-password {
	color: #000;
	text-decoration: unset;
	text-align: end;
	display: block;
	font-size: .8em
}

.index-body .index-box .index-left .login-button {
	display: block;
	width: 100%;
	border-radius: 1em;
	border: unset;
	padding: 1em;
	color: #fff;
	background-color: #526271;
	font-size: 1em
}

.index-body .index-box .index-left .login-button:hover {
	background-color: #5d6f80
}

.index-body .index-box .index-left .register-button {
	text-decoration: unset;
	color: #000;
	margin-top: 1em;
	display: block;
	font-size: 1em
}

.index-body .index-box .index-left .maintenance-btn {
	margin: 1em auto;
	display: block;
	text-align: center
}

.index-body .index-box .index-right {
	flex: 1;
	background-size: cover;
	background-position: center;
	border-radius: 1.5em
}

@media (max-width:820px) {
	.index-body .index-box {
		width: 85vw;
		min-height: unset;
		max-height: unset;
		margin: 2em 0
	}

	.index-body .index-box.claim-box,
	.index-body .index-box.error404 {
		width: 85vw !important
	}

	.index-body .index-box .index-left {
		padding: .75em
	}

	.index-body .index-box .index-left .logo-style {
		gap: .75em
	}

	.index-body .index-box .index-right {
		display: none
	}
}

@media (max-width:1250px) {
	.index-body .index-box {
		width: 85vw
	}

	.index-body .index-box.claim-box {
		width: 50vw
	}

	.index-body .index-box .index-left {
		padding: .75em
	}
}

.register-body {
	background-size: cover;
	background-position: center;
	border-radius: 1.5em
}

.register-body .page-container {
	padding: 0
}

.register-body .page-container .register-flex {
	display: flex;
	flex-direction: row;
	gap: 20em;
	background: rgba(0, 0, 0, .7);
	position: fixed;
	height: 100%;
	width: 100%;
	align-items: center;
	padding: 5em;
	justify-content: center;
	overflow-y: scroll
}

.register-body .page-container .register-flex .register-left {
	text-align: center;
	color: #fff;
	width: 25em
}

.register-body .page-container .register-flex .register-right {
	position: relative;
	width: 40em
}

.register-body .page-container .register-flex .register-right .birthdate-big,
.register-body .page-container .register-flex .register-right .birthdate-small {
	float: left
}

.register-body .page-container .register-flex .register-right .birthdate-small {
	width: 30%
}

.register-body .page-container .register-flex .register-right .birthdate-big {
	width: 40%;
	padding: 0 15px
}

.register-body .page-container .register-flex .register-right .register-title {
	color: #fff;
	font-size: 20px
}

.register-body .page-container .register-flex .register-right input {
	margin-top: .5em
}

#alertTool.d-none,
.register-body .page-container .register-flex .register-right .avatars-container .avatars-preload {
	display: none
}

.register-body .page-container .register-flex .register-right .avatars-container .avatar-container {
	background-image: url(../images/web/pages/registration/avatar-light_light.png);
	background-repeat: no-repeat;
	background-position: center top;
	width: 288px;
	height: 284px;
	text-align: center;
	padding: 20px 7px 0 0;
	position: relative;
	margin: 0 auto 1em
}

.register-body .page-container .register-flex .register-right .avatars-container .avatar-container[data-random]:before {
	background-image: url(../images/web/pages/registration/clouds.png);
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	display: block;
	content: ""
}

.register-body .page-container .register-flex .register-right .avatars-container .avatar-container[data-random="1"]:before {
	background-position: center 0
}

.register-body .page-container .register-flex .register-right .avatars-container .avatar-container[data-random="2"]:before {
	background-position: center -284px
}

.register-body .page-container .register-flex .register-right .avatars-container .avatar-container[data-random="3"]:before {
	background-position: center -568px
}

.register-body .page-container .register-flex .register-right .avatars-container .avatar-container[data-random="4"]:before {
	background-position: center -852px
}

.register-body .page-container .register-flex .register-right .avatars-container .avatar-container[data-random="5"]:before {
	background-position: center -1136px
}

.register-body .page-container .register-flex .register-right .avatars-container .avatar-container[data-random="6"]:before {
	background-position: center -1420px
}

.register-body .page-container .register-flex .register-right .avatars-container .avatar-container[data-random="7"]:before {
	background-position: center -1704px
}

.register-body .page-container .register-flex .register-right .avatars-container .tabs-container {
	text-align: center;
	font-size: 0
}

.register-body .page-container .register-flex .register-right .avatars-container .tabs-container span {
	background-color: #eee;
	-webkit-border-radius: 9px;
	-moz-border-radius: 9px;
	border-radius: 5px;
	width: 18px;
	height: 18px;
	display: inline-block;
	margin: 0 5px;
	cursor: pointer;
	position: relative
}

.register-body .page-container .register-flex .register-right .avatars-container .tabs-container span:not(.selected):hover {
	background-color: #a0a0a0
}

.register-body .page-container .register-flex .register-right .avatars-container .tabs-container span.selected:before {
	background-color: rgba(0, 0, 0, .6);
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 3px;
	margin: 3px;
	width: 12px;
	height: 12px;
	content: "";
	display: block
}

.register-body .page-container .register-flex .register-right .register-next-button,
.register-body .page-container .register-flex .register-right .submit-form {
	position: absolute;
	bottom: -7em;
	border-radius: 1em;
	padding: 1em 3em;
	color: #fff;
	background-color: #649d3c;
	font-size: 1em;
	border: 2px solid #85c459;
	cursor: pointer
}

.register-body .page-container .register-flex .register-right .register-next-button:hover,
.register-body .page-container .register-flex .register-right .submit-form:hover {
	background-color: #528131;
	border: 2px solid #85c459
}

.register-body .page-container .register-flex .register-right .register-next-button:disabled,
.register-body .page-container .register-flex .register-right .register-next-button[disabled],
.register-body .page-container .register-flex .register-right .submit-form:disabled,
.register-body .page-container .register-flex .register-right .submit-form[disabled] {
	background-color: #464646;
	border: 2px solid #5e5e5e
}

@media (max-width:1000px) {
	.register-body .page-container .register-flex {
		flex-direction: column;
		padding: 3em;
		gap: 5em;
		align-items: unset;
		overflow-x: hidden
	}

	.register-body .page-container .register-flex .register-left,
	.register-body .page-container .register-flex .register-right {
		width: unset;
		text-align: unset
	}

	.register-body .page-container .register-flex .register-right .birthdate-big,
	.register-body .page-container .register-flex .register-right .birthdate-small {
		width: fit-content
	}

	.register-body .page-container .register-flex .register-right .register-next-button,
	.register-body .page-container .register-flex .register-right .submit-form {
		position: unset;
		bottom: unset;
		margin: 2em 0;
		width: fit-content
	}
}

@media (max-width:700px) {
	.register-body .page-container .register-flex {
		display: unset
	}

	.register-body .page-container .register-flex .register-right .birthdate-big,
	.register-body .page-container .register-flex .register-right .birthdate-small {
		width: fit-content;
		padding: unset;
		display: block;
		float: unset
	}
}

#alertTool {
	width: 40em
}

#alertTool .close-alertTool {
	width: 40px;
	height: 40px;
	cursor: pointer;
	position: absolute;
	top: .25em;
	right: .25em;
	font-size: 28px;
	font-weight: 200;
	text-align: center
}

#alertTool .send-alertTool {
	display: block;
	border-radius: 1em;
	padding: 1em 3em;
	margin: 1em auto 0;
	color: #fff;
	background-color: #3c829d;
	font-size: 1em;
	border: 2px solid #55a2bf;
	cursor: pointer
}

#alertTool .send-alertTool:hover {
	background-color: #34728a;
	border: 2px solid #55a2bf
}

#alertTool,
#buildTool {
	background: #424354;
	position: absolute;
	left: 1.5em;
	top: 5.5em;
	border-radius: 2em;
	padding: 1em 2em;
	cursor: pointer;
	color: #fff
}

#buildTool.d-none {
	display: none
}

#buildTool .grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: .5em;
	margin: .5em 0
}

#buildTool input {
	width: 4.25em;
	background: unset;
	color: #c0c1ce;
	border-radius: unset;
	border: 0;
	font-size: 18px;
	font-weight: 200;
	font-family: 'Ubuntu X';
	margin: 0;
	padding: unset;
	position: absolute;
	left: 4em
}

#buildTool input::placeholder {
	color: #c0c1ce
}

#buildTool input::-webkit-inner-spin-button,
#buildTool input::-webkit-outer-spin-button,
.shop-home-grid .converter-grid .diamonds-box div input::-webkit-inner-spin-button,
.shop-home-grid .converter-grid .diamonds-box div input::-webkit-outer-spin-button,
.shop-home-grid .converter-grid .duckets-box div input::-webkit-inner-spin-button,
.shop-home-grid .converter-grid .duckets-box div input::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0
}

#buildTool input[type=number] {
	-moz-appearance: textfield
}

#buildTool .inputBox {
	display: flex;
	align-items: center;
	background: #212131;
	border-radius: 10px;
	padding: .5em 1em;
	height: 40px;
	cursor: text;
	width: 10em
}

#buildTool .inputBox:focus,
#buildTool .inputBox:hover {
	background: #2f2f3e;
	color: #c0c1ce
}

#buildTool .buttons {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: .5em
}

#buildTool .buildButton {
	display: flex;
	border-radius: .5em;
	padding: .25em;
	text-align: center;
	font-size: 20px;
	font-weight: 700;
	align-items: center;
	justify-content: center
}

#buildTool .buildButton.plus {
	background-color: #8ea763
}

#buildTool .buildButton.plus:hover {
	background-color: #9cb66f
}

#buildTool .buildButton.moins {
	background-color: #6388a7
}

#buildTool .buildButton.moins:hover {
	background-color: #6d93b2
}

#buildTool .buildButton.stop {
	background-color: #d14c5e
}

#buildTool .buildButton.stop:hover {
	background-color: #de5668
}

#buildTool .close-buildTool {
	width: 40px;
	height: 40px;
	cursor: pointer;
	position: absolute;
	top: .25em;
	right: .25em;
	font-size: 28px;
	font-weight: 200;
	text-align: center
}

.loading-container,
.loading-container #loading-background,
.loading-container .loading-content,
.page-loading {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0
}

.loading-container {
	color: #fff;
	font-family: "Poppins", Arial, sans-serif;
	text-shadow: 0 1px 0 rgba(0, 0, 0, .05);
	text-align: center;
	font-size: 22px;
	font-weight: 500;
	z-index: 650
}

.loading-container #loading-background {
	background: linear-gradient(-45deg, #000, #3e3636, #656565, #8c8c8c);
	background-size: 200% 200%;
	z-index: 650
}

.loading-container .loading-content {
	width: 330px;
	height: 165px;
	margin: auto;
	z-index: 650
}

.loading-container .loading-content .loading-bodytext {
	margin-top: 30px
}

.loading-container .loading-content a {
	color: #fff
}

.page-loading {
	background-color: rgba(255, 255, 255, .6);
	z-index: 1999;
	display: none
}

.dialog-popup,
.login-popup,
.payment-popup {
	box-shadow: 0 0 30px rgba(0, 0, 0, .3);
	background-color: #fff;
	border-radius: 2em;
	position: relative;
	padding: 20px;
	width: auto;
	max-width: 450px;
	margin: 20px auto;
	overflow: hidden
}

.dialog-popup h3,
.login-popup h3,
.payment-popup h3 {
	text-align: center;
	padding: 13px 22px
}

.login-popup .login-form .code-input,
.login-popup .login-form .password-input,
.login-popup .login-form .username-input {
	position: relative;
	display: block;
	text-align: center
}

.login-popup .login-form .code-input span.google-authenticator {
	width: 23px;
	height: 23px;
	content: "";
	position: absolute;
	top: 10px;
	right: 15px
}

.login-popup .login-form .rounded-button {
	display: block;
	width: 100%
}

.payment-popup .error-step,
.payment-popup .success-step {
	display: none;
	text-align: center
}

.payment-popup .error-step img,
.payment-popup .success-step img {
	display: block;
	margin: 20px auto
}

.payment-popup .title {
	text-transform: uppercase
}

.payment-popup .subtitle {
	color: #00abe4;
	text-align: center;
	margin: -15px 0 0
}

.payment-popup .success-step .title {
	color: #2fd98f
}

.payment-popup .error-step .title {
	color: #f46048
}

.payment-popup .row {
	margin-top: 22px
}

.payment-popup .solution-details {
	margin: 12px 0;
	font-size: 12px;
	color: #8f8f8f
}

.payment-popup .obtain-code {
	margin-top: 15px;
	text-align: center
}

.payment-popup .obtain-code .sms-container {
	color: #8f8f8f;
	font-size: 12px
}

.payment-popup .obtain-code .sms-container span {
	font-size: 17px;
	font-weight: 500;
	color: #00abe4
}

.payment-popup .obtain-code .sms-container.fr .shortcode:after {
	background-size: 15px;
	width: 15px;
	height: 15px;
	content: "";
	display: inline-block;
	margin-left: 5px
}

.payment-popup .obtain-code .audiotelbe-container,
.payment-popup .obtain-code .audiotelfr-container {
	background-color: #fff;
	border: 1px solid #aaa;
	padding: 0 11px;
	width: 180px;
	font-size: 22px;
	font-weight: 500;
	color: #a0006f;
	text-align: center;
	margin: 0 auto
}

.payment-popup .obtain-code .audiotelbe-container {
	color: #536368;
	width: 270px
}

.payment-popup .obtain-code .audiotelbe-container .mention,
.payment-popup .obtain-code .audiotelfr-container .mention {
	background-color: #a0006f;
	margin: -2px -12px -1px;
	color: #fff;
	padding: 5px 10px 5px 20px;
	font-size: 11px;
	text-align: left;
	position: relative
}

.payment-popup .obtain-code .audiotelbe-container .mention {
	background-color: #536368
}

.payment-popup .obtain-code .audiotelbe-container .mention:after,
.payment-popup .obtain-code .audiotelfr-container .mention:after {
	border: 8px solid transparent;
	border-top-color: #fff;
	content: "";
	width: 0;
	height: 0;
	position: absolute;
	top: 0;
	left: 13px;
	margin-left: -8px
}

.dialog-popup .mfp-close {
	top: 10px;
	right: 10px;
	opacity: 1
}

.dialog-popup h3 {
	color: #333
}

.dialog-popup .pincode {
	width: 100%
}

.dialog-popup .buttons-container {
	margin-top: 25px;
	text-align: center
}

.dialog-popup .buttons-container .rounded-button {
	display: inline-block;
	margin: 0 10px
}

#hotel-container {
	background-color: #000;
	position: fixed;
	top: 0;
	left: -9999px;
	z-index: 600;
	width: 100%;
	height: 100%
}

#hotel-container .client-buttons {
	position: absolute;
	top: 20px;
	left: 20px;
	z-index: 100;
	display: flex;
	flex-direction: row
}

#hotel-container .client-buttons button {
	-webkit-box-shadow: 0 0 0 2px rgba(0, 0, 0, .2);
	box-shadow: 0 0 0 2px rgba(0, 0, 0, .2);
	display: block;
	float: left;
	font-size: 12px;
	margin-right: 10px;
	line-height: normal;
	background-color: #424354;
	border: 0;
	border-radius: 10px;
	padding: .75em 1em;
	color: #fff
}

#hotel-container .client-buttons button .client-icon {
	-webkit-filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .3));
	filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .3));
	display: inline-block;
	font-style: normal;
	float: left
}

#hotel-container .client-buttons button .client-icon.client-close-icon {
	background-image: url(../images/favicon-white.png?2);
	background-size: 16px 16px;
	width: 16px;
	height: 16px
}

#hotel-container .client-buttons button .client-icon.client-fullscreen-icon,
#hotel-container .client-buttons button .client-icon.client-fullscreen-icon-back {
	background-image: url(../images/web/fullscreen-icon.png);
	background-position: 0-14px;
	width: 14px;
	height: 14px;
	margin: 1px
}

#hotel-container .client-buttons button .client-icon.client-fullscreen-icon-back {
	background-position: 0 0
}

#hotel-container .client-buttons button .client-icon.hidden {
	display: none
}

#hotel-container .client-buttons button.client-close .client-close-expand {
	float: left;
	overflow: hidden;
	width: 0;
	text-align: left;
	-webkit-transition: width .15s ease-out 0s;
	transition: width .15s ease-out 0s
}

#hotel-container .client-buttons button.client-close .client-close-expand span {
	padding: 1px 0 0 8px;
	display: inline-block
}

#hotel-container .client-buttons button.client-close:hover .client-close-expand {
	width: 39px
}

#hotel-container .client-buttons button.client-players {
	cursor: default
}

#hotel-container .client-buttons button.client-players .client-icon.client-players-icon {
	background-image: url(../images/web/players-icon.png);
	background-size: 16px 16px;
	width: 16px;
	height: 16px
}

#hotel-container .client-buttons button.client-players .client-players-count {
	float: left;
	text-align: left;
	padding: 0 2px 0 6px;
	font-size: 14px;
	position: relative;
	top: -1px;
	display: inline-block
}

#hotel-container .client-frame {
	background-color: #000;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	display: block;
	border: 0
}

.hotel-visible #hotel-container {
	left: 0
}

#client-error-disconnect {
	background-color: #1c1a24;
	height: 100%;
	width: 100%
}

#client-error-disconnect .connecting-duck {
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	right: 0;
	left: 0;
	background: url(../images/habbox.gif)no-repeat 50%;
	background-size: contain;
	width: 250px;
	height: 250px;
	transform: scale(.75);
	image-rendering: pixelated
}

#client-error-disconnect .text-error-position {
	padding: 1.5rem 0;
	width: 50%;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	text-align: center;
	margin: auto
}

#client-error-disconnect .text-error-message {
	margin-bottom: 2em;
	text-shadow: 0 4px 4px rgba(0, 0, 0, .25);
	font-size: calc(1.26rem + .12vw);
	color: #f3f3f3;
	font-family: Ubuntu, sans-serif
}

.notifications-container {
	position: fixed;
	top: 5.5em;
	right: 40px;
	z-index: 2000
}

.notifications-container .notification-container {
	-webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, .2);
	box-shadow: 0 4px 10px rgba(0, 0, 0, .2);
	background-color: #2f2f3e;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	padding: 15px 15px 15px 45px;
	position: relative;
	margin-bottom: 15px;
	width: 240px;
	display: none
}

.notifications-container .notification-container:before {
	-webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, .2);
	box-shadow: 0 4px 10px rgba(0, 0, 0, .2);
	background-image: url(../images/web/notifications-icons.png);
	background-color: #000;
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	border-radius: 15px;
	width: 50px;
	height: 50px;
	display: block;
	content: "";
	position: absolute;
	top: 0;
	left: -25px;
	bottom: 0;
	margin: auto 0;
	image-rendering: pixelated
}

.notifications-container .notification-container[data-type=success]:before {
	background-color: #37e397;
	background-position: 0 0
}

.notifications-container .notification-container[data-type=success] .notification-title {
	color: #2fd98f
}

.notifications-container .notification-container[data-type=error]:before {
	background-color: #f46048;
	background-position: -50px 0
}

.notifications-container .notification-container[data-type=error] .notification-title {
	color: #f46048
}

.notifications-container .notification-container[data-type=info]:before {
	background-color: #33c8f3;
	background-position: -100px 0
}

.notifications-container .notification-container[data-type=info] .notification-title {
	color: #33c8f3
}

.notifications-container .notification-container .notification-close {
	display: block;
	position: absolute;
	top: 7px;
	right: 7px;
	font-size: 25px;
	font-weight: 300;
	color: #c8c8c8;
	text-decoration: none;
	width: 38px;
	text-align: center
}

.notifications-container .notification-container .notification-close:before {
	content: "×"
}

.notifications-container .notification-container .notification-title {
	font-weight: 600;
	text-transform: uppercase;
	margin-bottom: 7px
}

.notifications-container .notification-container .notification-content {
	font-size: 12px;
	word-break: break-word;
	color: #e6e7e8
}

.cookies-accept-container {
	-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .3);
	box-shadow: 0 0 10px rgba(0, 0, 0, .3);
	background-color: #fff;
	color: #000;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
	padding: 1em 5em 1em 2em;
	text-align: center;
	display: none;
	margin: 0 auto 2em;
	border-radius: 2em;
	width: 75vw
}

.cookies-accept-container .close-container {
	width: 40px;
	height: 40px;
	cursor: pointer;
	position: absolute;
	top: 0;
	right: 10px;
	bottom: 0;
	margin: auto;
	font-size: 28px;
	font-weight: 200;
	text-align: center
}

.page-container {
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
	padding-bottom: 7em;
	padding-top: 1em
}

.page-container .notifications-banner {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: end;
	padding: .5em 2em 0;
	text-decoration: unset;
	color: #fff;
	margin-bottom: 1.5em
}

.page-container .notifications-banner .notifications-box {
	display: flex;
	background: #fff;
	padding: .35em;
	border-radius: 1.25em;
	gap: .75em
}

.page-container .notifications-banner .notifications-box .bell {
	background: #c44545;
	padding: .2em .35em;
	border-radius: .65em;
	font-size: 25px;
	z-index: 1
}

.page-container .notifications-banner .notifications-box .notif-message {
	display: flex;
	font-size: 16px;
	color: #333;
	align-items: center;
	gap: .25em;
	padding: 0 .75em 0 0
}

.page-container .notifications-banner .notifications-box .notif-message .notif-number {
	font-family: "Nunito"
}

.page-container .page-content {
	width: 100%;
	margin: 1em auto;
	padding: 0 3em;
	font-family: 'Ubuntu X'
}

.body-container {
	background: linear-gradient(1deg, rgb(195 154 101) -74%, rgb(255 255 255 / 0%) 87%, rgb(255 255 255 / 0%) 100%), url(22.png);
	background-size: cover;
	background-position-x: right;
	background-repeat: no-repeat;
	background-position-y: bottom;
	;
	min-height: 100vh;
	position: relative
}

.margin-body {
	margin-left: 20vw
}

@media (max-width:1320px) {
	.margin-body {
		margin-left: 0
	}
}

.left-nav {
	position: fixed;
	top: 0;
	left: 0;
	width: 20vw;
	height: 100%;
	padding: 1em;
	background: linear-gradient(1deg, #F3F3F3 49%, rgb(216 175 111 / 42%) 103%, rgb(7 7 8 / 0%) 100%), url(backgroundhotel.jpg) center center;
	background-position-x: -326px;
	border-radius: 19px;
	box-shadow: 0 0 12px rgba(0, 0, 0, .4);
	color: #ffffff;
	z-index: 5;
	-ms-overflow-style: none;
	scrollbar-width: none
}

.left-nav .absolute-menu {
	position: absolute;
	top: 1.5em;
	left: 2.1em
}

.home-grid .grid-friends .scroll-friends::-webkit-scrollbar,
.left-nav::-webkit-scrollbar {
	display: none
}

.left-nav .left-nav-menu {
	height: 2.3em;
	border-radius: 30em;
	width: 2.3em;
	background: #e3dad3;
	color: #ebd4be;
	font-size: 20px;
	font-weight: 900;
	text-align: center;
	position: relative;
	cursor: pointer;
	display: none
}

.left-nav .left-nav-menu .left-nav-menu-wrapper {
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	left: 50%
}

.left-nav .actions-buttons {
	display: flex;
	flex-direction: row;
	gap: 1em;
	justify-content: center;
	position: relative
}

.left-nav .actions-buttons .lang-button,
.left-nav .actions-buttons .lightMode {
	text-align: center;
	background: #e3dad3;
	z-index: 5;
	padding: 0 12px;
	border-radius: 10px;
	font-size: 2.5em;
	cursor: pointer;
	box-shadow: 1px 1px 5px #d2cac3;
	width: 1.25em;
	height: 1.25em
}

.left-nav .actions-buttons .lang-button img,
.left-nav .actions-buttons .lightMode img {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: .75em
}

.left-nav .actions-buttons .lang-box {
	position: absolute;
	top: 4em;
	background: #5c5d71;
	z-index: 5;
	padding: 1em 1.5em;
	border-radius: 10px;
	box-shadow: 1px 1px 5px #242531;
	color: #fff;
	display: flex;
	flex-direction: column;
	row-gap: 1em;
	font-size: 15px
}

.left-nav .actions-buttons .lang-box .lang-row {
	position: relative;
	padding-left: 2.5em;
	color: #fff;
	text-decoration: none;
	cursor: pointer
}

.left-nav .actions-buttons .lang-box .lang-row img {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	width: 18px;
	border-radius: 3px
}

.left-nav .actions-buttons .lang-button {
	position: relative
}

.left-nav .actions-buttons .lang-button img {
	border-radius: 3px
}

.left-nav .user-buttons {
	margin-top: 2em;
	display: flex;
	flex-direction: column
}

.left-nav .user-buttons>* {
	margin: .5em auto
}

.left-nav .navigation-links {
	margin-top: 1em;
	padding: 0 .5em
}

.left-nav .navigation-links .category-title {
	font-size: 15px;
	font-weight: 700;
	margin-bottom: .85em;
	color: black
}

.left-nav .navigation-links .navigation-link {
	display: flex;
	flex-direction: row;
	gap: 1em;
	align-items: center;
	padding: 0 1em;
	text-decoration: unset;
	color: #373750;
	margin-bottom: .85em
}

.left-nav .navigation-links .navigation-link .link-icon {
	flex: 1;
	position: relative
}

.left-nav .navigation-links .navigation-link .link-icon img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 1.25em
}

.left-nav .navigation-links .navigation-link .link-icon.network img {
	width: 1.75em
}

.left-nav .navigation-links .navigation-link .link-title {
	font-size: 15px;
	font-weight: 400;
	flex: 10
}

.left-nav .navigation-links .navigation-link .link-title .new {
	color: #ea4141;
	font-weight: 700
}

.left-nav .navigation-bottom {
	bottom: 1em;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: row
}

.left-nav .navigation-bottom .navigation-bottom-link {
	width: 30px;
	height: 30px;
	margin: 0 1em
}

.left-nav .navigation-bottom .navigation-bottom-link.nav-settings {
	background: url(../../assets/icons/settings.svg)no-repeat center;
	background-size: contain
}

.left-nav .navigation-bottom .navigation-bottom-link.nav-logout {
	background: url(../../assets/icons/logout.svg)no-repeat center;
	background-size: contain
}

.left-nav .navigation-bottom .navigation-bottom-link.nav-housekeeping {
	background: url(../../assets/icons/housekeeping.svg)no-repeat center;
	background-size: contain
}

.habbox-logo {
	text-align: center
}

.habbox-logo img.classic {
	width: 10em
}

@media (max-width:1320px) {
	.left-nav {
		display: none;
		width: 100vw;
		overflow-y: scroll
	}

	.left-nav .left-nav-menu {
		display: block !important
	}

	.left-nav .navigation-links {
		display: flex;
		flex-direction: column;
		align-items: start;
		width: 18em;
		margin: 1em auto
	}

	.left-nav .navigation-links .category {
		width: inherit
	}

	.left-nav .navigation-links .category .category-title {
		text-align: center
	}

	.left-nav .navigation-bottom {
		bottom: unset;
		position: unset;
		left: unset;
		transform: unset;
		justify-content: center
	}
}

@media (max-height:780px) {
	.left-nav {
		overflow-y: scroll
	}

	.left-nav .navigation-bottom {
		bottom: unset;
		position: unset;
		left: unset;
		transform: unset;
		justify-content: center
	}
}

.navigation-top {
	padding: 1em 2em 0;
	text-align: center;
	display: grid;
	grid-template-columns: 18fr 1fr;
	align-items: center;
	justify-items: center;
	gap: .75em
}

.navigation-top .navigation-grid {
	display: grid;
	align-items: center;
	grid-template-columns: 1fr .5fr 1fr 1fr .5fr;
	gap: .75em;
	width: 100%
}

.navigation-top .navigation-grid .navigation-top-item span {
	margin: 0 1em 0 2.5em
}

.navigation-top .navigation-grid .navigation-top-item.hotel {
	flex: .5
}

.navigation-top .navigation-grid .navigation-top-item.hotel .navigation-top-game {
	background: #303242;
	color: #fff;
	width: fit-content
}

.navigation-top .navigation-grid .navigation-top-item.hotel .navigation-top-game:focus,
.navigation-top .navigation-grid .navigation-top-item.hotel .navigation-top-game:hover {
	background: #292a38;
	color: #fff
}

.navigation-top .navigation-grid .navigation-top-item.search {
	position: relative
}

.navigation-top .navigation-grid .navigation-top-item.search .logo {
	position: absolute;
	left: 1em;
	top: 50%;
	transform: translateY(-50%);
	background: url(../../assets/icons/search.svg)no-repeat center;
	height: 1.5em;
	width: 1.5em;
	background-size: contain
}

.navigation-top .navigation-grid .navigation-top-item.search input {
	width: 100%;
	background: #d1c8c1;
	color: #373750;
	border-radius: 1em;
	border: 0;
	padding: .5em .5em .5em 2.5em;
	font-size: 20px;
	font-weight: 200;
	font-family: 'Ubuntu X';
	height: 45px
}

.navigation-top .navigation-grid .navigation-top-item.search input::placeholder {
	color: #373750;
	font-weight: 200
}

.navigation-top .navigation-grid .navigation-top-item .navigation-top-box:focus,
.navigation-top .navigation-grid .navigation-top-item .navigation-top-box:hover,
.navigation-top .navigation-grid .navigation-top-item.search input:focus,
.navigation-top .navigation-grid .navigation-top-item.search input:hover {
	background: #c5bdb6;
	color: #373750
}

.navigation-top .navigation-grid .navigation-top-item.search #search-profile-box {
	position: absolute;
	top: 3.5em;
	left: 50%;
	transform: translateX(-50%);
	background: #5c5d71;
	z-index: 5;
	padding: 1em 1.5em;
	border-radius: 10px;
	box-shadow: 1px 1px 5px #242531;
	color: #fff;
	display: flex;
	flex-direction: column;
	row-gap: 1em;
	width: fit-content
}

.navigation-top .navigation-grid .navigation-top-item.search #search-profile-box .profile-row {
	cursor: pointer;
	text-decoration: unset;
	color: #fff
}

.navigation-top .navigation-grid .navigation-top-item .navigation-top-box {
	background: #fff;
	color: #000;
	border-radius: 1em;
	width: 100%;
	height: 62px;
	padding: .5em;
	display: flex;
	flex-direction: row;
	position: relative;
	font-size: 17px;
	font-weight: 500;
	text-decoration: none;
	overflow: hidden;
	box-shadow: 0 0 12px rgb(0 0 0 / 72%);
	justify-content: center;
	align-items: center;
}

.navigation-top .navigation-grid .navigation-top-item .navigation-top-logo {
	position: absolute;
	width: 59px;
	top: 50%;
	transform: translate(-10%, -50%);
	flex: 1
}

.navigation-top .navigation-grid .navigation-top-item .navigation-top-logo.navigation-top-logo-user {
	top: 75%
}

.navigation-top .navigation-grid .navigation-top-item .navigation-top-logo.navigation-top-logo-help {
	width: 8px;
	left: 1.5em
}

.navigation-top .navigation-grid .navigation-top-item .navigation-top-logo.navigation-top-logo-gift {
	width: 1.55em;
	left: .75em
}

.navigation-top .navigation-grid .navigation-top-item .navigation-top-logo.navigation-top-logo-stats {
	width: 31px;
	left: 1em
}

.navigation-top.offline-user .navigation-grid {
	grid-template-columns: 1fr 1fr;
	width: 50%
}

.navigation-top .expand-menu {
	display: none
}

.navigation-top .expand-menu .navigation-top-menu {
	height: 2.3em;
	border-radius: 30em;
	width: 2.3em;
	background: #d1c8c1;
	font-size: 20px;
	text-align: center;
	position: relative;
	cursor: pointer;
	display: none
}

.navigation-top .expand-menu .navigation-top-menu .navigation-top-menu-wrapper {
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	left: 50%
}

.navigation-top .expand-menu .navigation-top-menu:focus,
.navigation-top .expand-menu .navigation-top-menu:hover {
	background: #c5bdb6;
	color: #424354
}

.navigation-top .navigation-username {
	background-color: #d1c8c1;
	border-radius: 2em;
	width: 4em;
	height: 4em;
	position: relative;
	overflow: hidden
}

.navigation-top .navigation-username:focus,
.navigation-top .navigation-username:hover,
.submenu .submenu-panel a.selected,
.submenu .submenu-panel a:focus,
.submenu .submenu-panel a:hover {
	background: #c5bdb6
}

.navigation-top .navigation-username img {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -35%);
	image-rendering: pixelated
}

@media (max-width:1320px) {
	.navigation-top {
		grid-template-columns: 1fr 18fr 1fr
	}

	.navigation-top .navigation-grid {
		grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr
	}

	.navigation-top .navigation-grid .navigation-top-item span {
		display: none
	}

	.navigation-top .navigation-grid .navigation-top-item.hotel .navigation-top-game {
		width: 100%
	}

	.navigation-top .navigation-grid .navigation-top-item .navigation-top-logo {
		left: 50% !important;
		transform: translate(-50%, -50%) !important
	}

	.navigation-top .expand-menu,
	.navigation-top.offline-user .navigation-grid span {
		display: block
	}

	.navigation-top.offline-user .navigation-grid .navigation-top-logo {
		left: 1.5em !important;
		transform: translate(-10%, -50%) !important
	}

	.navigation-top .expand-menu .navigation-top-menu {
		display: block !important
	}
}

@media (max-width:1024px) {
	.navigation-top {
		grid-template-columns: 1fr 5fr 1fr
	}

	.navigation-top .navigation-grid {
		display: grid;
		align-items: center;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 1em
	}

	.navigation-top .navigation-grid .navigation-top-item span,
	.navigation-top .navigation-grid .navigation-top-item.search,
	.navigation-top .navigation-grid .navigation-top-item.stats {
		display: none
	}

	.navigation-top .navigation-grid .navigation-top-item.hotel .navigation-top-game,
	.navigation-top.offline-user .navigation-grid {
		width: 100%
	}

	.navigation-top .navigation-grid .navigation-top-item .navigation-top-box {
		height: 2.3em
	}

	.navigation-top .navigation-grid .navigation-top-item .navigation-top-logo {
		left: 50% !important;
		transform: translate(-50%, -50%) !important
	}

	.navigation-top.offline-user {
		grid-template-columns: 1fr 10fr
	}

	.navigation-top.offline-user .navigation-grid .navigation-top-item span,
	.navigation-top.offline-user .navigation-grid .navigation-top-item.search {
		display: block
	}

	.navigation-top.offline-user .navigation-grid .navigation-top-item .navigation-top-logo {
		left: 1.5em !important;
		transform: translate(-10%, -50%) !important
	}
}

@media (max-width:720px) {
	.navigation-top.offline-user .navigation-grid .navigation-top-item span {
		display: none
	}

	.navigation-top.offline-user .navigation-grid .navigation-top-item.search {
		display: block
	}

	.navigation-top.offline-user .navigation-grid .navigation-top-item .navigation-top-logo {
		left: 50% !important;
		transform: translate(-50%, -50%) !important
	}
}

.submenu {
	font-size: 20px
}

.submenu .submenu-panel {
	display: flex;
	flex-direction: row;
	column-gap: .5em;
	justify-content: center
}

.submenu .submenu-panel a {
	background: #d1c8c1;
	padding: .5em .75em;
	border-radius: 10px;
	position: relative;
	height: 2.25em;
	width: 2.25em
}

.submenu .submenu-panel a img {
	width: 1.25em;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%)
}

.submenu .submenu-panel a span {
	font-size: 13px
}

.footer-container,
.team-grid .team-user .banner .user-box {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	border-radius: 2em;
	overflow: hidden
}

.footer-container {
	display: flex;
	flex-direction: row;
	column-gap: 1em;
	width: 75%;
	font-size: 12px;
	margin: 2em 0;
	bottom: 0
}

.footer-container .footer-box {
	background: linear-gradient(1deg, rgb(247 247 247 / 65%) 47%, rgb(216 175 111 / 56%) 103%, rgb(7 7 8 / 0%) 100%), url(backgroundhotel.jpg) center center;
	color: #333;
	text-align: center;
	padding: 0 2em;
	flex: 1;
}

.tooltip-container {
	position: relative;
	display: inline-block;
	font-size: 24px;
	font-family: 'Nunito';
	color: #333;
	width: fit-content;
	font-weight: 400;
	align-self: flex-end;
	margin-bottom: -41px;
top: -13px;
}

.tooltip-container img {
	display: inline;
	scale: 2;
	vertical-align: middle;
	cursor: pointer;
}

/* Tooltip style */
.tooltipp {
	position: absolute;
	bottom: 81%;
    left: 806%;
	
	background: white;
	color: #333;
	padding: 8px 12px;
	border-radius: 8px;
	white-space: nowrap;
	font-size: 14px;
	opacity: 0;
	pointer-events: none;
	transition: all 0.2s ease;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	z-index: 10;
}


.tooltip-container img {
	display: inline;
	scale: 2;
	vertical-align: middle;
	cursor: pointer;
}

/* Arrow */
.tooltipp::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: white;
}

/* Show on hover */
.tooltip-container:hover .tooltipp {
	opacity: 1;
	transform: translateX(-50%) scale(1);
	pointer-events: auto;
}

.newsmoha {
	box-shadow: 0 0 12px rgb(0 0 0 / 37%);
	height: 141px;
	background: #fff;
	border-radius: 2em;
	padding: 1em 0;
	justify-content: center;
	display: flex;
	align-content: center;
	overflow:hidden;
}
.newsyue {
	box-shadow: 0 0 12px rgb(0 0 0 / 37%);
	height: 141px;
	background: #fff;
	border-radius: 2em;
	padding: 1em 0;
	justify-content: center;
	display: flex;
	align-content: center;
	
}

.footer-container .footer-box a {
	text-decoration: none;
	color: #333;
	font-weight: 200
}

.team-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-gap: 1em;
	align-items: center
}
.vipuser{place-self:center;box-shadow: 0 0 12px rgb(0 0 0 / 37%);    z-index: 999999;position: relative;background: white;color: black;top: 55px;padding: 4px;border-radius: 4px;font-size: 9px;}
.team-grid .team-desc {
	grid-column-start: 4;
	grid-column-end: 6;
	background: #f0f0f0;
	padding: 2em;
	border-radius: 2em
}
.usernameleft{font-size:29px;color:#000;font-weight:700;position:absolute;top:161px;justify-self:anchor-center}
.team-grid .team-user {
	background-color: #fff;
	border-radius: 2em;
	min-height: 17em;
	text-decoration: unset;
	color: #000
}

.team-grid .team-user .banner {
	height: 5em;
	border-radius: 2em 2em 0 0;
	background-size: auto;
	position: relative;
	margin-bottom: 2.25em;
	background-position: center
}

.team-grid .team-user .banner .user-box {
	background: #f0f0f0;
	width: 6em;
	height: 6em;
	bottom: -2.5em;
	box-shadow: 0 0 0 3pt rgba(255, 255, 255, .75)
}

.team-grid .team-user .banner .user-box img {
	position: absolute;
	top: 85%;
	left: 48%;
	transform: translate(-50%, -50%)
}

.team-grid .team-user .content {
	padding: 1em
}

.team-grid .team-user .content .username {
	text-align: center;
	font-weight: 700;
	font-size: 16px;
	color: #373750;
	margin-top: .5em
}

.team-grid .team-user .content .username .status {
	background-color: #d34444;
	border-radius: 10px;
	width: 12px;
	height: 12px;
	display: inline-block;
	margin-left: .25em
}

.team-grid .team-user .content .username .status.online {
	background-color: #38b54a
}

.team-grid .team-user .content .motto,
.team-grid .team-user .content .role {
	margin-top: .5em;
	height: 2.5em;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center
}

.team-grid .team-user .content hr {
	width: 50%;
	margin: .5em auto;
	border-top: 1.5px solid rgba(217, 217, 217, .75)
}

.team-grid .team-user .content .motto {
	font-weight: lighter;
	font-style: italic;
	word-break: break-word
}

@media (max-width:1320px) {
	.team-grid {
		grid-template-columns: repeat(3, 1fr)
	}

	.team-grid .team-desc {
		order: -1;
		grid-column-start: 1;
		grid-column-end: 4
	}
}

@media (max-width:1024px) {
	.team-grid {
		grid-template-columns: 1fr 1fr
	}

	.team-grid .team-desc {
		order: -1;
		grid-column-start: 1;
		grid-column-end: 3
	}
}

@media (max-width:780px) {
	.team-grid {
		grid-template-columns: 1fr
	}

	.team-grid .team-desc {
		grid-column-start: unset;
		grid-column-end: unset
	}
}

#gallery {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: .5em;
	border-radius: 3em;
	overflow: hidden
}

#gallery .photo-box {
	position: relative;
	overflow: hidden
}

#gallery .photo-box .picture {
	width: 100%;
	height: 400px;
	background-size: cover;
	background-position: center;
	cursor: pointer
}

#gallery .photo-box .username {
	min-width: 6em
}

#gallery .photo-box .counter,
#gallery .photo-box .username {
	background-color: #fff;
	width: fit-content;
	color: #000;
	position: absolute;
	text-align: center;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, .6)
}

#gallery .photo-box .username {
	top: 3em;
	border-radius: 0 1em 1em 0;
	padding: 1em 1em 1em 4em;
	overflow: hidden
}

#gallery .photo-box .username a {
	text-decoration: unset;
	color: #000
}

#gallery .photo-box .username a img {
	position: absolute;
	top: 50%;
	transform: translateY(-37%);
	left: 0
}

#gallery .photo-box .counter {
	bottom: 3em;
	right: 0;
	border-radius: 1em 0 0 1em;
	cursor: pointer;
	padding: 1em;
	min-width: 4em
}

.mfp-title {
	font-size: 1em !important
}

@media (max-width:780px) {
	#gallery {
		grid-template-columns: 1fr;
		margin: unset
	}

	#gallery .photo-box .picture {
		height: 200px
	}

	#gallery .photo-box .username {
		top: 2em
	}

	#gallery .photo-box .counter {
		bottom: 2em
	}
}

.about-jobs {
	background-color: #fff;
	padding: 2em;
	border-radius: 2em 2em 0 0
}

.about-jobs .title {
	font-size: 20px
}

.about-jobs .good-luck,
.about-jobs .title-mentions {
	color: #d87373;
	font-family: "Nunito"
}

.about-jobs .good-luck,
.no-reply-possible h2,
.no-subjects h2 {
	margin-bottom: 0
}

.about-jobs .mentions-box,
.choose-job .job-description {
	background-color: #f0f0f0;
	padding: .5em 2em;
	border-radius: 1.5em;
	margin: 1.5em 0
}

.about-jobs .mentions-box .mention {
	margin: 1.5em 0
}

.about-jobs .mentions-box .mention i {
	margin-right: .5em;
	color: #b79a83
}

.choose-job {
	background-color: #f0f0f0;
	padding: 2em;
	border-radius: 0 0 2em 2em
}

.choose-job .job-description {
	background-color: #fff;
	padding: 1.5em 2em
}

.choose-job .job-description .already-send {
	color: #b79a83
}

.choose-job .job-description .already-send i {
	margin-right: .5em
}

.choose-job .job-description :last-child {
	margin-bottom: 0
}

.choose-job .title {
	font-size: 20px
}

.choose-job label {
	display: block
}

.choose-job input {
	height: 46px
}

.choose-job .selectric {
	border-radius: 1em
}

.choose-job .selectric-wrapper {
	margin-top: 3px
}

.choose-job .job-content {
	margin-top: 1.5em
}

.choose-job .job-content textarea,
.choose-job input {
	width: 100%;
	margin-top: 10px
}

@media (max-width:1024px) {
	.choose-job label.discord {
		margin-top: 1em
	}
}

.grid-ranking {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 1.5em
}

.grid-ranking .ranking-box {
	border-radius: 0 0 2em 2em;
	overflow: hidden;
	position: relative;
	background-color: #fff
}

.grid-ranking .ranking-box .rank-box {
	padding: 1em 1em 1em 6em;
	position: relative;
	height: 5em;
	overflow: hidden;
}

.grid-ranking .ranking-box .rank-box.or {
	background: rgba(241, 196, 15, .72);
	overflow:hidden
}

.grid-ranking .ranking-box .rank-box.argent {
	background-color: rgba(149, 165, 166, .61);
	overflow:hidden
}

.grid-ranking .ranking-box .rank-box.bronze {
	background-color: rgba(191, 103, 45, .58);
	overflow:hidden
}

.grid-ranking .ranking-box .rank-box .rank-look {
position: absolute;
    top: 88%;
    left: -19px;
    transform: translateY(-50%);
}

.grid-ranking .ranking-box .rank-box .rank,
.grid-ranking .ranking-box .rank-box .rank-infos {
	position: absolute;
	top: 50%;
	transform: translateY(-50%)
}

.grid-ranking .ranking-box .rank-box .rank-infos a {
	display: block;
	text-decoration: none;
	color: #424354;
	font-size: 15px;
	font-weight: 600;
	width: 8.5em;
	overflow-wrap: anywhere
}

.grid-ranking .ranking-box .rank-box .rank {
	background: #d1c8c1;
	color: #fff;
	right: 1em;
	width: 3em;
	height: 3em;
	border-radius: 15px
}

.grid-ranking .ranking-box .rank-box .rank.or {
	background: rgba(241, 196, 15, .72);
	color: #fff
}

.grid-ranking .ranking-box .rank-box .rank.argent {
	background: rgba(149, 165, 166, .52);
	color: #fff
}

.grid-ranking .ranking-box .rank-box .rank.bronze {
	background: rgba(191, 103, 45, .54);
	color: #fff
}

.grid-ranking .ranking-box .rank-box .rank span {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -55%);
	font-size: 1.5em;
	font-weight: 600
}

@media (max-width:875px) {
	.grid-ranking {
		grid-template-columns: 1fr
	}
}

.shop-header {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 1em;
	align-items: center;
	margin-bottom: 1em
}

.shop-header .moneys {
	display: grid;
	grid-template-columns: auto auto;
	grid-gap: 1em;
	justify-content: end
}

.shop-header .moneys .shop-box {
	height: 5em;
	border-right: 2em;
	background: #fff;
	border-radius: 2em;
	padding: 1.5em;
	width: fit-content;
	margin: 0 auto 1em;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 1em
}

.shop-header .moneys .shop-box img {
	width: 2em
}

.shop-header .moneys .shop-box span {
	font-size: 1.5em
}

@media screen and (max-width:930px) {
	.shop-header {
		grid-template-columns: 1fr
	}

	.shop-header .moneys {
		order: -1;
		grid-template-columns: auto auto;
		justify-content: center
	}
}

@media screen and (max-width:675px) {
	.shop-header {
		grid-template-columns: 1fr
	}

	.shop-header .moneys {
		order: -1;
		grid-template-columns: auto;
		grid-gap: unset;
		justify-content: center
	}
}

.shop-home-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 1.5em
}

.shop-home-grid>div:first-child {
	height: fit-content
}

.shop-home-grid .offers-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 1em;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center
}

.shop-home-grid .offers-grid .box {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: #000;
	padding: 1.25em
}

.shop-home-grid .offers-grid .box img {
	width: 5em
}

.shop-home-grid .offers-grid .box .title {
	margin: 1em 0 0;
	font-size: 16px
}

.shop-home-grid .converter-grid {
	display: flex;
	flex-direction: column;
	gap: 1em;
	width: 20em;
	margin: auto
}

.shop-home-grid .converter-grid.reverse {
	flex-direction: column-reverse !important
}

.shop-home-grid .converter-grid .diamonds-box,
.shop-home-grid .converter-grid .duckets-box {
	border-radius: 2.5em;
	border: 5px solid rgba(255, 255, 255, .4588235294);
	display: flex;
	padding: 1em;
	align-items: center;
	gap: 1em
}

.shop-home-grid .converter-grid .duckets-box {
	background: #c44aac
}

.shop-home-grid .converter-grid .diamonds-box {
	background: #65a6e6
}

.shop-home-grid .converter-grid .diamonds-box img,
.shop-home-grid .converter-grid .duckets-box img {
	width: 3em
}

.shop-home-grid .converter-grid .diamonds-box div,
.shop-home-grid .converter-grid .duckets-box div {
	flex: 1;
	text-align: center
}

.shop-home-grid .converter-grid .diamonds-box div input,
.shop-home-grid .converter-grid .duckets-box div input {
	background: 0 0;
	border: unset;
	border-radius: unset;
	border-bottom: 2px solid rgba(255, 255, 255, .6);
	width: 65%;
	font-size: 1.75em;
	padding: 0 0 .25em;
	text-align: center;
	color: #fff
}

.shop-home-grid .converter-grid .diamonds-box div input[type=number],
.shop-home-grid .converter-grid .duckets-box div input[type=number] {
	-moz-appearance: textfield
}

.shop-home-grid .converter-grid .diamonds-box div span,
.shop-home-grid .converter-grid .duckets-box div span {
	font-size: 2em;
	color: #fff
}

.shop-home-grid .converter-grid .center-buttons {
	display: flex;
	gap: 1em;
	justify-content: center
}

.shop-home-grid .converter-grid .center-buttons .convert-button,
.shop-home-grid .converter-grid .center-buttons .invert-button {
	text-align: center;
	background: #fff;
	border-radius: 1.5em;
	padding: 1em 2em;
	width: fit-content;
	display: inline-block;
	cursor: pointer
}

.shop-home-grid .converter-grid .center-buttons .invert-button i {
	font-size: 2em
}

.shop-home-grid .converter-grid .center-buttons .convert-button {
	padding: 1em 1.5em;
	font-size: 18px
}

@media screen and (max-width:1024px) {
	.shop-home-grid .offers-grid {
		grid-template-columns: repeat(2, 1fr)
	}
}

@media screen and (max-width:780px) {
	.shop-home-grid {
		grid-template-columns: 1fr
	}
}

.shop-offer .payment-methods :first-child {
	margin-top: 0 !important
}

.shop-offer .payment-methods .offer-payment {
	display: flex;
	flex-direction: row;
	align-items: center
}

.shop-offer .payment-methods .offer-payment .payment-image {
	background-repeat: no-repeat;
	background-position: center;
	background-size: 110%;
	width: 60px;
	height: 60px;
	margin-right: 20px
}

.shop-offer .payment-methods .offer-payment .payment-description {
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1
}

.shop-offer .payment-methods .offer-payment .payment-button {
	padding: 0 10px
}

.shop-offer .payment-methods .offer-payment.paypal .payment-image {
	background-image: url(../images/web/pages/shop/offer-paypal.png?2)
}

.shop-offer .payment-methods .offer-payment.audiotel .payment-image {
	background-image: url(../images/web/pages/shop/offer-audiotel.png?2)
}

.shop-offer .payment-methods .offer-payment.cb .payment-image {
	background-image: url(../images/web/pages/shop/offer-cb.png?2)
}

.shop-offer .payment-methods .offer-payment.neosurf .payment-image {
	background-image: url(../images/web/pages/shop/offer-neosurf.png?2)
}

.shop-offer .payment-methods .offer-payment.sms-plus .payment-image {
	background-image: url(../images/web/pages/shop/offer-sms-plus.png?2)
}

.shop-offer .payment-methods .offer-payment.paysafecard .payment-image {
	background-image: url(../images/web/pages/shop/offer-paysafecard.png?2)
}

@media screen and (max-width:780px) {
	.shop-offer .payment-methods .offer-payment {
		display: block
	}

	.shop-offer .payment-methods .offer-payment .payment-image {
		float: left
	}

	.shop-offer .payment-methods .offer-payment .payment-button {
		margin-top: 15px
	}

	.shop-offer .payment-methods .offer-payment .payment-button .rounded-button {
		width: 100%
	}
}

.draw-badge-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 1.5em
}

.draw-badge-grid table.pixel-canvas-nogrid td {
	border-color: transparent !important
}

.draw-badge-grid .table-container {
	position: relative
}

.draw-badge-grid .table-container .draw-interface {
	margin: auto;
	border-radius: 2em;
	overflow: hidden;
	width: 30em;
	height: 30em
}

.draw-badge-grid .table-container .draw-interface #pixelCanvas.drawbadge-table {
	margin: 0 auto;
	border-collapse: collapse;
	background-color: #fff;
	border: 4px solid #fff;
	overflow: hidden;
	height: 100%;
	width: 100%
}

.draw-badge-grid .table-container .draw-interface #pixelCanvas table,
.draw-badge-grid .table-container .draw-interface #pixelCanvas td {
	margin: 0;
	padding: 0
}

.draw-badge-grid .table-container .draw-interface #pixelCanvas td {
	border: 1px solid #000;
	width: 19px
}

.draw-badge-grid .table-container .draw-interface #pixelCanvas td.pixel {
	background-color: #fff
}

.draw-badge-grid .table-container .draw-interface #pixelCanvas td.pixel:hover {
	box-shadow: 38px 38px rgba(0, 0, 0, .1) inset
}

.draw-badge-grid .table-container .draw-interface #pixelCanvas tr {
	height: 20px
}

.draw-badge-grid .table-container .tip-container {
	margin: 1em auto 0;
	width: fit-content
}

.draw-badge-grid .table-container .tip-container .icon-eraser {
	display: inline-block;
	width: 42px
}

.draw-badge-grid .table-container .tip-container .tip {
	display: inline-block;
	font-size: 16px;
	line-height: 2.6em;
	vertical-align: bottom;
	margin-left: 1em
}

.draw-badge-grid .draw-tool-box .add-color {
	position: absolute;
	top: 1em;
	right: 1.5em;
	display: flex;
	flex-direction: row;
	gap: .5em
}

.draw-badge-grid .draw-tool-box .add-color #colorPicker {
	padding: 5px;
	border-radius: 6px;
	border: unset;
	width: 3.5em;
	height: 38px;
	flex: 2
}

.draw-badge-grid .draw-tool-box .add-color #colorPickerSubmit {
	flex: 1;
	padding: .5em 1em
}

.draw-badge-grid .draw-tool-box .palette {
	display: grid;
	grid-template-columns: repeat(13, 1fr);
	row-gap: .5em;
	justify-content: center;
	align-content: center;
	background: #f2f2f2;
	padding: .5em;
	border-radius: 1em;
	overflow: hidden
}

.draw-badge-grid .draw-tool-box .palette .palette-color {
	height: 5em;
	cursor: pointer;
	position: relative
}

.draw-badge-grid .draw-tool-box .palette .palette-color:nth-of-type(13n) {
	border-radius: 0 10px 10px 0
}

.draw-badge-grid .draw-tool-box .palette .palette-color:nth-of-type(13n+1) {
	border-radius: 10px 0 0 10px
}

.draw-badge-grid .draw-tool-box .palette .palette-color:first-child {
	border-radius: 10px 0 0 10px
}

.draw-badge-grid .draw-tool-box .palette .palette-color:last-child {
	border-radius: 0 10px 10px 0
}

.draw-badge-grid .draw-tool-box .palette .palette-color:nth-of-type(13n+1):last-child {
	border-radius: 10px
}

.draw-badge-grid .draw-tool-box .palette .palette-color.palette-color-selected::after,
.draw-badge-grid .draw-tool-box .palette .palette-color.palette-color:hover::after {
	content: "";
	position: absolute;
	background-color: #d7d7d7;
	border-radius: 2em;
	border: 2px solid #fff;
	width: 1em;
	height: 1em;
	left: 50%;
	transform: translateX(-50%);
	bottom: .5em
}

.draw-badge-grid .draw-tool-box .palette .palette-color.white {
	background-color: #fff
}

.draw-badge-grid .draw-tool-box .palette .palette-color.red {
	background-color: #ff5721
}

.draw-badge-grid .draw-tool-box .palette .palette-color.pink {
	background-color: #ec407a
}

.draw-badge-grid .draw-tool-box .palette .palette-color.orange {
	background-color: #ff9800
}

.draw-badge-grid .draw-tool-box .palette .palette-color.yellow {
	background-color: #ffeb3b
}

.draw-badge-grid .draw-tool-box .palette .palette-color.green1 {
	background-color: #8bc349
}

.draw-badge-grid .draw-tool-box .palette .palette-color.green2 {
	background-color: #4baf50
}

.draw-badge-grid .draw-tool-box .palette .palette-color.blue1 {
	background-color: #05a9f4
}

.draw-badge-grid .draw-tool-box .palette .palette-color.blue2 {
	background-color: #3f51b5
}

.draw-badge-grid .draw-tool-box .palette .palette-color.purple1 {
	background-color: #673ab7
}

.draw-badge-grid .draw-tool-box .palette .palette-color.purple2 {
	background-color: #9b28b0
}

.draw-badge-grid .draw-tool-box .palette .palette-color.black {
	background-color: #000
}

.draw-badge-grid .draw-tool-box .palette .palette-color.nude {
	background-color: #ffe090
}

.draw-badge-grid #colorPickerSubmit,
.draw-badge-grid #resetField {
	width: fit-content;
	display: inline-block
}

.draw-badge-grid input[type=number] {
	height: 30px;
	border: 3px solid #000;
	margin: 0 0 12px;
	padding-left: 4px;
	font-family: "VT323", monospace;
	font-size: 1.5em
}

.draw-badge-grid .buy-badge-grid {
	display: grid;
	grid-template-columns: 1fr 1.25fr;
	grid-gap: 1em;
	margin: 2em auto 0;
	justify-items: center;
	align-items: center;
	width: 32em
}

.draw-badge-grid .buy-badge-grid .box {
	width: fit-content;
	text-align: center
}

.draw-badge-grid .buy-badge-grid .box #preview td {
	border: 0
}

.draw-badge-grid .buy-badge-grid #resetField {
	background-color: #ea4d4d;
    font-family: 'Nunito';
	border: 2px solid #ee9393;
	width: 100%;
	height: 4em;
	margin-bottom: 1em
}

.draw-badge-grid .buy-badge-grid #buybadge {
	width: 100%;
	height: 4em
}

@media screen and (max-width:1024px) {
	.draw-badge-grid {
		grid-template-columns: 1fr
	}

	.draw-badge-grid .table-container {
		float: none;
		width: 100%
	}

	.draw-badge-grid .draw-tool-box .add-color {
		position: unset;
		top: unset;
		right: unset;
		width: 50%;
		margin: 0 auto 1em
	}

	.draw-badge-grid .draw-tool-box .palette {
		grid-template-columns: repeat(5, 1fr)
	}

	.draw-badge-grid .draw-tool-box .palette .palette-color:nth-of-type(5n) {
		border-radius: 0 10px 10px 0
	}

	.draw-badge-grid .draw-tool-box .palette .palette-color:nth-of-type(5n+1) {
		border-radius: 10px 0 0 10px
	}

	.draw-badge-grid .draw-tool-box .palette .palette-color:nth-of-type(5n+1):last-child {
		border-radius: 10px
	}

	.draw-badge-grid .buy-badge-grid {
		grid-template-columns: 1fr;
		width: unset
	}
}

@media screen and (max-width:780px) {
	.draw-badge-grid .table-container .draw-interface {
		width: 80vw;
		height: auto
	}
}

.club-grid {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 1em
}

.club-grid .club-grid-line {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 1em
}

.club-grid .club-grid-line .box,
.club-grid .club-grid-line .club-2-col {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column
}

.club-grid .club-grid-line .box p {
	margin: 0
}

.club-grid .club-grid-line .club-2-col {
	grid-column: span 2
}

@media (max-width:780px) {
	.club-grid .club-grid-line {
		grid-template-columns: 1fr
	}

	.club-grid .club-grid-line .club-2-col {
		grid-column: unset
	}
}

.no-history {
	font-family: "Nunito"
}

.history-grid,
.history-grid .box {
	justify-content: center;
	align-items: center;
	height: 100%
}

.history-grid {
	display: grid;
	grid-template-columns: repeat(3, auto);
	grid-gap: 1em;
	width: 100%
}

.history-grid .box {
	display: flex;
	flex-direction: column
}

@media (max-width:780px) {
	.history-grid {
		grid-template-columns: 1fr
	}
}

.row-input-input,
.row-label-input,
.row-switch-label {
	display: grid;
	grid-template-columns: .75fr 1fr;
	grid-gap: 1em;
	align-items: center
}

.row-input-input,
.row-switch-label {
	grid-template-columns: 1fr 1fr
}

.row-switch-label {
	grid-template-columns: .1fr 1fr
}

.QRCode {
	border-radius: 1em;
	margin-top: 1em
}

.grid-settings {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 1.5em
}

.grid-settings .switch-label {
	display: block;
	padding-right: 65px;
	cursor: pointer;
	position: relative
}

.grid-settings .switch-label .switch-container {
	position: absolute;
	top: 0;
	right: -1.5em;
	bottom: 0;
	margin: auto 0;
	height: 26px
}

.grid-settings .switch-label .label-title {
	display: block;
	margin: 0 0 3px
}

.grid-settings .switch-label .label-description {
	display: block;
	color: #333
}

.grid-settings .setting-box,
.home-grid .event-banner {
	background: #fff;
	border-radius: 2em;
	padding: 1.5em;
	position: relative;
	min-height: 7.5em
}

.grid-settings .setting-box .centered {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 88%
}

@media screen and (max-width:875px) {
	.grid-settings {
		grid-template-columns: 1fr
	}

	.grid-settings .switch-label .switch-container {
		right: 0
	}
}

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

	.row-input-input,
	.row-label-input {
		grid-template-columns: 1fr
	}
}

.page-container[data-page=settings_verification] .verification-selected {
	margin-top: 30px
}

.home-grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	grid-gap: 2em
}

.home-grid>div {
	display: flex;
	flex-direction: column;
	gap: 1.5em
}

.home-grid .event-banner {
	display: grid;
	grid-template-columns: 1fr 4fr;
	min-height: 6em;
	text-decoration: none;
	color: #333;
	column-gap: 2em;
	padding: 1em
}

#my-photos .lines div,
.home-grid .event-banner .image {
	width: 100%;
	background-size: cover;
	background-position: center
}

.home-grid .event-banner .image {
	height: 100%;
	border-radius: 20px
}

.home-grid .event-banner .lighter {
	display: block;
	font-weight: 200;
	margin: 0
}

.home-grid .event-banner .rounded-button {
	color: #fff;
	background-color: #474a62;
	border: 2px solid #6c7199
}

.home-grid .event-banner .rounded-button:hover {
	background-color: #4f526c;
	border: 2px solid #6c7199
}

.home-grid .grid-friends {
	display: grid;
	grid-template-columns: 1fr 8fr 1fr;
	align-items: center;
	grid-gap: .75em;
	background:#ffffff57;
	box-shadow:0 0 12px rgb(0 0 0 / 37%);
}
.white{color: #333;}
.home-grid .grid-friends .scroll-friends {
	white-space: nowrap;
	display: flex;
	overflow-x: scroll;
	overflow-y: hidden;
	gap: 1em;
	-ms-overflow-style: none;
	scrollbar-width: none
}

.home-grid .grid-friends .scroll-friends .one-friend {
	height: 5em;
	width: 5em;
	background-color: #fff;
	display: inline-block;
	border-radius: 2em;
	position: relative;
	flex: 1 0 13%;
	border: 3px solid #f2f2f2;
	overflow: hidden
}

.home-grid .grid-friends .scroll-friends .one-friend .user {
	width: 71.5px;
	position: absolute;
	left: 50%;
	top: 80%;
	transform: translate(-50%, -50%);
	overflow: hidden
}

.home-grid .grid-friends .scroll-friends .one-friend .user.offline {
	filter: grayscale(1)
}

.home-grid .grid-friends .arrows,
.home-grid .yue4col a {
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 1em
}

.home-grid .grid-friends .arrows {
	background-color: #b9ad9c87;
	width: 3em;
	height: 3em;
	margin: auto;
	border: 3px solid #f2f2f2;
	cursor: pointer
}

.home-grid #carousel {
	position: relative;
	overflow: hidden;
	height: 262px;
	border-radius: 30px
}

.home-grid #carousel .carousel__item {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 0;
	transition: opacity .8s;
	border-radius: 30px;
	overflow: hidden
}

.home-grid #carousel .carousel__item.active {
	z-index: 2;
	opacity: 1
}

.home-grid #carousel .carousel__item .carousel__container {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	height: 300px;
	box-shadow: 3px 3px rgba(0, 0, 0, .3);
	background-position: right 0;
	background-repeat: no-repeat;
	background-size: cover
}

.home-grid #carousel .carousel__item .carousel__container .carousel__content {
	position: absolute;
	top: 3em;
	left: 50%;
	transform: translateX(-50%);
	width: 70%;
	text-align: center
}

.home-grid #carousel .carousel__item .carousel__container .carousel__content .carousel__title {
	font-weight: 700;
	text-transform: uppercase;
	font-size: 2rem;
	word-wrap: break-word;
	color: #fff;
	text-shadow: 1px 1px 5px #2f2f3e
}

.home-grid #carousel .carousel__item .carousel__container .carousel__content .carousel__snippet {
	color: #fff;
	text-shadow: 1px 1px 5px #2f2f3e
}

.home-grid #carousel .carousel__arrow {
	position: absolute;
	top: 52%;
	z-index: 3;
	transform: translateY(-50%);
	cursor: pointer;
	padding: 20px
}

.home-grid #carousel .carousel__arrow.carousel__arrow-left,
.profil-flex .left-side .second-line .or-book .profile-feeds .comment .comment-avatar-flex .comment-avatar {
	left: 0
}

.home-grid #carousel .carousel__arrow.carousel__arrow-right {
	right: 0
}

.home-grid #carousel .carousel__arrow div {
	background: #e3dad3;
	padding: 1em;
	color: #373750;
	border-radius: 1.25em;
	border: 3px solid #d1c8c1
}

.home-grid #carousel .carousel__bullets {
	position: absolute;
	bottom: 1em;
	left: 50%;
	transform: translateX(-50%);
	height: 12px;
	padding: 20px 0 18px 20px;
	z-index: 3
}

.home-grid #carousel .carousel__bullets .carousel__bullets-link {
	cursor: pointer;
	background-color: #fff;
	float: left;
	height: 12px;
	margin-right: 10px;
	font-size: 0;
	width: 12px;
	border-radius: 3px;
	opacity: .3;
	outline: 0
}

.home-grid #carousel .carousel__bullets .carousel__bullets-link.active,
.home-grid #carousel .carousel__bullets .carousel__bullets-link:hover {
	opacity: 1
}

.home-grid .referral-grid {
	margin-top: 1em;
	display: grid;
	grid-template-columns: 5fr 1fr;
	grid-gap: 1em
}

.home-grid .yue4col {
	background: #ffffff57;
	border-radius: 2em;
	padding: 1em;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 1em;
	box-shadow: 0 0 12px rgb(0 0 0 / 37%);
}

.home-grid .yue4col a {
	background-color: #f2f2f2;
	padding: .5em
}

.home-grid .yue4col a img {
	width: 2.5em
}

.home-grid .home-badges,
.home-grid .home-last-add {
	display: flex;
	flex-direction: row;
	gap: 1em;
	justify-content: center
}

.home-grid .home-last-add {
	align-items: center;
	font-size: 20px
}

.home-grid .home-badges {
	box-shadow: 0 0 12px rgb(0 0 0 / 37%);
	flex-wrap: wrap;
	background: #ffffff57;
	border-radius: 2em;
	padding: 1em 0;
	margin-bottom: 12px;
}

.home-grid .home-badges .home-badge {
	background: #f2f2f2;
	height: 70px;
	width: 70px;
	border-radius: 1em;
	position: relative;
	overflow: hidden
}

.home-grid .home-badges .home-badge img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%)
}

.home-grid .home-badges .home-badge img.room-thumbnail,
.profil-flex .left-side .first-line .my-friends .friends-list .one-friend img.room-thumbnail,
.profil-flex .left-side .first-line .my-friends .friends-list .one-room img.room-thumbnail,
.profil-flex .left-side .first-line .my-friends .rooms-list .one-friend img.room-thumbnail,
.profil-flex .left-side .first-line .my-friends .rooms-list .one-room img.room-thumbnail,
.profil-flex .left-side .first-line .my-rooms .friends-list .one-friend img.room-thumbnail,
.profil-flex .left-side .first-line .my-rooms .friends-list .one-room img.room-thumbnail,
.profil-flex .left-side .first-line .my-rooms .rooms-list .one-friend img.room-thumbnail,
.profil-flex .left-side .first-line .my-rooms .rooms-list .one-room img.room-thumbnail {
	width: 80%;
	height: 80%;
	border-radius: .5em
}
@media (max-width: 768px) {
  .mobile-hide {
    display: none !important;
  }
}
/* Masquer la grille en mobile/tablette */
@media (max-width: 1024px) {
  .mobile-hide {
    display: none !important;
  }
}

/* (Optionnel) Forcer l'affichage de la partie "Classement" */
.always-show {
 margin-top: 29px;
}

@media screen and (max-width:1024px) {
	.home-grid {
		grid-template-columns: 1fr;
        display: inline;
	}

	.home-grid .grid-friends .scroll-friends .one-friend {
		flex: 1 0 11%
	}
}

@media screen and (max-width:780px) {
	.home-grid .event-banner {
		grid-template-columns: 1fr;
		padding: 1.5em 2em;
		text-align: center
	}

	.home-grid .event-banner .image {
		display: none
	}

	.home-grid .grid-friends .scroll-friends .one-friend {
		flex: 1 0 16%
	}

	.home-grid .yue4col {
		grid-template-columns: repeat(2, 1fr)
	}
}


.catstafffonda{display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
    margin-top: 11px;}
    .rankname1{
    background: linear-gradient(90deg, #00ac6291 49%, rgb(255 255 255 / 0%) 93%, rgb(7 7 8 / 0%) 29%), url(backgroundhotel.jpg) center center;
    border-radius: 6px;
    color: #333;
    font-size: 18px;
    font-family: 'Nunito';}
.rankname3{background: linear-gradient(90deg, #ff4af294 49%, rgb(255 255 255 / 0%) 93%, rgb(7 7 8 / 0%) 29%), url(backgroundhotel.jpg) center center;
    border-radius: 6px;
    color: #333;
    font-size: 18px;
    font-family: 'Nunito';}
    .rankname4 {
    background: linear-gradient(90deg, #48681896 49%, rgb(255 255 255 / 0%) 93%, rgb(7 7 8 / 0%) 29%), url(backgroundhotel.jpg) center center;
    border-radius: 6px;
    color: #333;
    font-size: 18px;
    font-family: 'Nunito';
}
    .rankname2 {
    background: linear-gradient(90deg, #e6825499 49%, rgb(255 255 255 / 0%) 93%, rgb(7 7 8 / 0%) 29%), url(backgroundhotel.jpg) center center;
    border-radius: 6px;
    color: #333;
    font-size: 18px;
    font-family: 'Nunito';
}
.staffyue{   
    border-radius: 28px;
padding: 20px;}
.requests-grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	grid-gap: 1.5em
}

.requests-grid.empty {
	grid-template-columns: 1fr;
	width: 50%;
	margin: auto
}

.requests-grid .request-view,
.requests-grid .requests-list {
	display: flex;
	flex-direction: column
}

.requests-grid .request-view .help-status,
.requests-grid .requests-list .help-status {
	padding: .5em 1em;
	border-radius: 1em;
	color: #fff;
	height: fit-content
}

.requests-grid .request-view .help-status.at-right,
.requests-grid .requests-list .help-status.at-right {
	position: absolute;
	bottom: -1.5em;
	right: 1.5em;
	transform: unset;
	width: fit-content
}

.requests-grid .request-view .help-status.treatment,
.requests-grid .requests-list .help-status.treatment {
	background-color: #b79a46
}

.requests-grid .request-view .help-status.open,
.requests-grid .requests-list .help-status.open {
	background-color: #3cca6e
}

.requests-grid .request-view .help-status.closed,
.requests-grid .requests-list .help-status.closed {
	background-color: #f46048
}

.requests-grid .request-view {
	gap: 1em
}

.requests-grid .requests-list {
	gap: 1.5em
}

.requests-grid .requests-list .help-box {
	text-decoration: none;
	color: #333;
	display: grid;
	grid-template-columns: 2.5fr 1fr;
	gap: 1em;
	padding: 1.5em;
	align-items: center
}

.requests-grid .requests-list .help-box.small {
	display: unset;
	grid-template-columns: unset;
	gap: unset
}

.requests-grid .help-box-create {
	height: fit-content;
	text-align: center;
	padding: 1.5em
}

.faq-back-button {
	background-color: #474a62;
	border: 2px solid #6c7199;
	color: #fff;
	padding: 1em 2em;
	border-radius: 1em;
	width: fit-content;
	margin: 0 auto 2em;
	text-decoration: unset;
	display: block
}

.faq-back-button:hover {
	background-color: #4f526c;
	border: 2px solid #6c7199
}

.faq-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 1.5em
}

.faq-grid .box {
	display: flex;
	flex-direction: column;
	gap: 1em
}

.faq-grid .box a {
	text-decoration: unset;
	color: #333
}

@media screen and (max-width:1035px) {
	.requests-grid .comment {
		text-align: center;
		row-gap: 1.5em
	}

	.requests-grid .comment .comment-avatar-flex {
		flex: 100%
	}

	.requests-grid .comment .comment-avatar-flex .comment-avatar {
		left: 45%;
		transform: translateX(-50%)
	}
}

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

	.faq-grid,
	.requests-grid,
	.requests-grid .requests-list .help-box {
		grid-template-columns: 1fr
	}

	.requests-grid.empty {
		width: 80%
	}

	.requests-grid .requests-list .help-box .help-status {
		order: -1
	}
}

.grid-article {
	display: grid;
	grid-template-columns: 2.5fr 1fr;
	grid-gap: 1.5em
}

.grid-article .article-view .box-title {
	color: #fff;
	background-size: cover;
	height: 7em;
	display: flex;
	flex-direction: column;
	justify-content: center
}

.grid-article .article-view .box-title .flex-alignment {
	display: flex;
	align-items: center;
	gap: 1em;
	justify-content: center
}

.grid-article .article-view .box-title .flex-alignment .category-icon {
	position: unset;
	right: unset;
	width: 2em;
	top: unset;
	transform: unset
}

.grid-article .article-view .box-title .short-description {
	font-size: 15px;
	margin-top: .5em
}

.grid-article .article-view .article-author-infos {
	display: flex;
	flex-direction: row;
	gap: 1em;
	align-items: center;
	width: fit-content;
	margin: auto
}

.grid-article .article-view .article-author-infos .article-author-image {
	flex: 1;
	min-height: 65px;
	width: 10em;
	position: relative
}

.grid-article .article-view .article-author-infos .article-author-image .author-avatar {
	position: absolute;
	height: 100px;
	width: 100px;
	left: -15px;
	top: -45px;
	cursor: pointer
}

.grid-article .article-view .article-author-infos .article-author-image .article-frank {
	width: 4em;
	margin-left: 2em
}

.grid-article .article-view .article-author-infos .article-date-name {
	width: fit-content;
	flex: 3
}

.grid-article .article-view .article-author-infos .article-date-name .article-author-name {
	color: #333;
	text-decoration: none;
	font-weight: 200;
	font-size: 20px
}

.grid-article .last-news {
	display: flex;
	flex-direction: column;
	gap: 1em
}

.grid-article .last-news .one-new {
	background: #fff;
	border-radius: 2em;
	display: flex;
	flex-direction: row;
	gap: 1em;
	text-decoration: none;
	position: relative;
	color: #333;
	padding: 1em
}

.grid-article .last-news .one-new .icon-new {
	width: 3em;
	position: absolute;
	right: -.75em;
	top: -.75em
}

.grid-article .last-news .one-new .image-new {
	width: 100%;
	height: 100%;
	border-radius: 1em;
	background-position: center
}

.grid-article .last-news .one-new .desc-element {
	display: block;
	font-weight: 200
}

@media screen and (max-width:780px) {
	.article-comment .comment {
		row-gap: 1.5em
	}

	.article-comment .comment .comment-avatar-flex {
		flex: 100%
	}

	.article-comment .comment .comment-avatar-flex .comment-avatar {
		left: 45%;
		transform: translateX(-50%)
	}

	.article-comment .comment .comment-user-flex.comment-icon {
		flex: unset;
		position: absolute;
		right: 2em
	}
}

@media screen and (max-width:1024px) {
	.grid-article {
		grid-template-columns: 1fr
	}

	.grid-article .last-news .one-new {
		align-items: center
	}

	.grid-article .last-news .one-new .image-new {
		height: 6em
	}

	.grid-article .last-news .one-new .flex_1 {
		flex: 1
	}

	.grid-article .last-news .one-new .flex_4 {
		flex: 4
	}
}

#my-friends,
#my-groups,
#my-rooms {
	max-width: 500px;
	text-align: unset
}

#my-friends .lines,
#my-groups .lines,
#my-rooms .lines {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: .75em
}

#my-friends .lines .one-line,
#my-groups .lines .one-line,
#my-rooms .lines .one-line {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 1em;
	text-decoration: unset;
	color: #333
}

#my-friends .lines .one-line .line-badge,
#my-groups .lines .one-line .line-badge,
#my-rooms .lines .one-line .line-badge {
	background-color: #f2f2f2;
	padding: .5em;
	border-radius: 1.25em;
	border: 3px solid #ececec;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 4em;
	width: 4em;
	position: relative;
	overflow: hidden
}

#my-friends .lines .one-line .line-badge .img-size-all,
#my-groups .lines .one-line .line-badge .img-size-all,
#my-rooms .lines .one-line .line-badge .img-size-all {
	width: 100%;
	height: 100%
}

#my-friends .lines .one-line .line-badge .room-thumbnail,
#my-groups .lines .one-line .line-badge .room-thumbnail,
#my-rooms .lines .one-line .line-badge .room-thumbnail {
	border-radius: .5em;
	object-fit: cover;
	image-rendering: pixelated
}

#my-friends .lines .one-line .line-badge .avatar,
#my-groups .lines .one-line .line-badge .avatar,
#my-rooms .lines .one-line .line-badge .avatar {
	position: absolute;
	top: 80%;
	left: 50%;
	transform: translate(-50%, -50%)
}

#my-friends .lines .one-line .line-name,
#my-groups .lines .one-line .line-name,
#my-rooms .lines .one-line .line-name {
	font-family: "Nunito"
}

#my-friends .lines .one-line .line-description,
#my-groups .lines .one-line .line-description,
#my-rooms .lines .one-line .line-description {
	font-family: "Ubuntu X"
}

#my-photos {
	max-width: 800px;
	position: relative;
	padding: 30px 20px 20px;
	margin: 20px auto
}

#my-photos .title {
	color: #fff
}

#my-photos .lines {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .5em;
	border-radius: 3em;
	overflow: hidden;
	margin-top: 1em;
	background-color: rgba(255, 255, 255, .8)
}

#my-photos .lines div {
	height: 18em
}

.profil-flex {
	display: flex;
	gap: 1.5em;
	flex-wrap: wrap
}

.profil-flex .right-side .user-view {
	flex: 1;
	border-radius: 2em;
	overflow: hidden
}

.profil-flex .right-side .user-view .user-banner {
	width: 100%;
	height: 7em;
	background-size: auto;
	background-position: center;
	position: relative
}

.profil-flex .right-side .user-view .user-banner .user-picture-box {
    height: 6em;
    position: absolute;
    bottom: 0em;
    left: 20%;
    transform: translateX(-50%);
    background: #f4f2e7;
    width: 6em;
    border-radius: 2em;
    box-shadow: 0 0 0 4pt rgba(255, 255, 255, .77);
    overflow: hidden;
}
 .left-nav.active {
    display: block; /* devient visible */
  }@media (max-width: 1320px) {
  .left-nav {
    width: 100vw;
    overflow-y: scroll;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;

    padding: 1rem;
  }

  .left-nav.active {
    display: block;
  }
}

.profil-flex .right-side .user-view .user-banner .user-picture-box .user-picture-position {
	position: absolute;
	height: 100px;
	width: 100px;
	left: -22px;
	top: -35px
}

.profil-flex .right-side .user-view .user-infos-section {
	background-color: #fff;
	padding: 1em
}

.profil-flex .right-side .user-view .user-infos-section .first-line {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 8em;
	justify-items: center;
	text-align: center
}

.profil-flex .right-side .user-view .user-infos-section .bold {
	font-family: "Ubuntu X";
	font-size: 18px
}

.profil-flex .right-side .user-view .user-infos-section .light {
	font-family: "Ubuntu X"
}

.profil-flex .right-side .user-view .user-infos-section .status {
	background-color: #d34444;
	border-radius: 10px;
	width: 12px;
	height: 12px;
	display: inline-block;
	margin-left: .25em
}

.profil-flex .right-side .user-view .user-infos-section .status.online {
	background-color: #38b54a
}

.profil-flex .right-side .user-view .user-infos-section .motto {
	font-family: "Ubuntu X";
	margin: .5em auto;
	width: 70%;
	text-align: center
}

.profil-flex .right-side .user-view .user-infos-section .profile-badges {
	display: flex;
	gap: .75em;
	margin: 1em 0;
	flex-wrap: wrap
}

.profil-flex .right-side .user-view .user-infos-section .profile-badges .badge {
	background-color: #f2f2f2;
	border-radius: 1em;
	flex: 1 0 16%;
	width: 4em;
	height: 4em;
	display: flex;
	align-items: center;
	justify-content: center
}

.profil-flex .right-side .user-view .user-infos-section .relations-lines {
	margin-bottom: 1em;
	display: flex;
	flex-direction: column;
	gap: .5em
}

.profil-flex .right-side .user-view .user-infos-section .relations-lines .relation-line {
	display: flex;
	justify-items: center;
	align-items: center;
	gap: 1em
}

.profil-flex .right-side .user-view .user-infos-section .moneys,
.stats-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: .5em
}

.profil-flex .right-side .user-view .user-infos-section .moneys .money {
	background: #ebd4be;
	border-radius: 1em;
	padding: .5em 1em;
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 5fr;
	justify-items: center;
	color: #fff
}

.profil-flex .right-side .user-view .user-infos-section .moneys .money img {
	width: 1.5em
}

.profil-flex .right-side .user-view .user-infos-section .moneys .money span {
	font-size: 18px
}

.profil-flex .right-side .user-view .user-infos-section .moneys .money.credits {
	background-color: #e0b246;
	border: 3px solid #f6c44f
}

.profil-flex .right-side .user-view .user-infos-section .moneys .money.diamonds {
	background-color: #b3d5ce;
	border: 3px solid #c7ebe3
}

.profil-flex .right-side .user-view .user-infos-section .moneys .money.duckets {
	background-color: #a55ca0;
	border: 3px solid #bf6dba
}

.profil-flex .right-side .user-view .user-infos-section .moneys .money.gotw {
	background-color: #996b2e;
	border: 3px solid #b57f38
}

.profil-flex .right-side .user-view .user-infos-section .date-lines {
	background-color: #f2f2f2;
	border-radius: 1em;
	padding: .5em;
	margin: 1em auto 0;
	border: 3px solid #ececec
}

.profil-flex .right-side .user-view .user-infos-section .date-lines .date-line {
	display: flex;
	gap: 1em;
	justify-content: center;
	align-items: center
}

.no-reply-possible h5,
.no-subjects h5,
.profil-flex .right-side .user-view .user-infos-section .date-lines .date-line.mt_05 {
	margin-top: .5em
}

.profil-flex .right-side .user-view .user-infos-section .date-lines .date-line b {
	font-family: "Ubuntu X";
}

.profil-flex .right-side .groups-section {
	padding: 1em
}

.profil-flex .right-side .groups-section .groups-section-title {
	font-family: "Nunito";
	font-size: 18px;
	margin-bottom: 1em
}

.profil-flex .right-side .groups-section .group-lines {
	display: flex;
	flex-direction: column;
	gap: .75em
}

.profil-flex .right-side .groups-section .group-lines .group-line {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 1em;
	text-decoration: unset;
	color: #333
}

.profil-flex .right-side .groups-section .group-lines .group-line .group-badge {
	background-color: #fff;
	padding: .5em;
	border-radius: 1.25em;
	border: 3px solid #f5f5f5;
	display: flex;
	justify-content: center;
	align-items: center
}

.profil-flex .right-side .groups-section .group-lines .group-line .group-name {
	font-family: "Nunito"
}

.profil-flex .right-side .groups-section .group-lines .group-line .group-description {
	font-family: "Ubuntu X"
}

.profil-flex .right-side .groups-section .group-button {
	width: 100%;
	margin-top: 1.5em
}

.profil-flex .left-side .first-line {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 1.5em
}

.profil-flex .left-side .first-line .my-friends .friends-title,
.profil-flex .left-side .first-line .my-friends .rooms-title,
.profil-flex .left-side .first-line .my-rooms .friends-title,
.profil-flex .left-side .first-line .my-rooms .rooms-title {
	font-size: 20px;
	text-align: center;
	margin-bottom: 1em
}

.profil-flex .left-side .first-line .my-friends .friends-list,
.profil-flex .left-side .first-line .my-friends .rooms-list,
.profil-flex .left-side .first-line .my-rooms .friends-list,
.profil-flex .left-side .first-line .my-rooms .rooms-list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1em;
	justify-content: center;
	background: #fff;
	border-radius: 2em;
	padding: 1em
}

.profil-flex .left-side .first-line .my-friends .friends-list .one-friend,
.profil-flex .left-side .first-line .my-friends .friends-list .one-room,
.profil-flex .left-side .first-line .my-friends .rooms-list .one-friend,
.profil-flex .left-side .first-line .my-friends .rooms-list .one-room,
.profil-flex .left-side .first-line .my-rooms .friends-list .one-friend,
.profil-flex .left-side .first-line .my-rooms .friends-list .one-room,
.profil-flex .left-side .first-line .my-rooms .rooms-list .one-friend,
.profil-flex .left-side .first-line .my-rooms .rooms-list .one-room {
	background: #f2f2f2;
	height: 70px;
	width: 70px;
	border-radius: 1em;
	position: relative;
	overflow: hidden
}

.profil-flex .left-side .first-line .my-friends .friends-list .one-friend.plus,
.profil-flex .left-side .first-line .my-friends .friends-list .one-room.plus,
.profil-flex .left-side .first-line .my-friends .rooms-list .one-friend.plus,
.profil-flex .left-side .first-line .my-friends .rooms-list .one-room.plus,
.profil-flex .left-side .first-line .my-rooms .friends-list .one-friend.plus,
.profil-flex .left-side .first-line .my-rooms .friends-list .one-room.plus,
.profil-flex .left-side .first-line .my-rooms .rooms-list .one-friend.plus,
.profil-flex .left-side .first-line .my-rooms .rooms-list .one-room.plus {
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer
}

.profil-flex .left-side .first-line .my-friends .friends-list .one-friend.plus i,
.profil-flex .left-side .first-line .my-friends .friends-list .one-room.plus i,
.profil-flex .left-side .first-line .my-friends .rooms-list .one-friend.plus i,
.profil-flex .left-side .first-line .my-friends .rooms-list .one-room.plus i,
.profil-flex .left-side .first-line .my-rooms .friends-list .one-friend.plus i,
.profil-flex .left-side .first-line .my-rooms .friends-list .one-room.plus i,
.profil-flex .left-side .first-line .my-rooms .rooms-list .one-friend.plus i,
.profil-flex .left-side .first-line .my-rooms .rooms-list .one-room.plus i {
	font-size: 22px
}

.profil-flex .left-side .first-line .my-friends .friends-list .one-friend img,
.profil-flex .left-side .first-line .my-friends .friends-list .one-room img,
.profil-flex .left-side .first-line .my-friends .rooms-list .one-friend img,
.profil-flex .left-side .first-line .my-friends .rooms-list .one-room img,
.profil-flex .left-side .first-line .my-rooms .friends-list .one-friend img,
.profil-flex .left-side .first-line .my-rooms .friends-list .one-room img,
.profil-flex .left-side .first-line .my-rooms .rooms-list .one-friend img,
.profil-flex .left-side .first-line .my-rooms .rooms-list .one-room img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%)
}

.profil-flex .left-side .second-line,
.profil-flex .left-side .third-line {
	margin-top: 1.5em
}

.profil-flex .left-side .second-line .or-book .book-title,
.profil-flex .left-side .third-line .gallery-title {
	font-size: 20px;
	text-align: center
}

.profil-flex .left-side .second-line .or-book .book-subtitle {
	font-size: 18px;
	font-family: "Ubuntu X";
	margin: 0 0 1em;
	text-align: center
}

.profil-flex .left-side .second-line .or-book .book-offline {
	text-align: center;
	font-family: "Nunito"
}

.profil-flex .left-side .second-line .or-book .profile-feeds {
	display: flex;
	flex-direction: column;
	gap: 1em;
	margin-top: 1em;
	max-height: 16em;
	overflow-y: scroll
}

.profil-flex .left-side .second-line .or-book .profile-feeds .comment .box-message {
	background-color: #f2f2f2
}

.profil-flex .left-side .second-line .or-book .profile-feeds .comment .box-message .fa-remove {
	cursor: pointer;
	margin-bottom: .5em
}

.profil-flex .left-side .second-line .or-book .profile-feeds .comment .box-message .reduce-size {
	width: 80%
}

.profil-flex .left-side .second-line .or-book .profile-feeds .comment .box-message .counter {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: .25em;
	font-size: 18px;
	cursor: pointer
}

.profil-flex .left-side .third-line .gallery-subtitle {
	font-size: 18px;
	font-family: "Ubuntu X";
	text-align: center;
	margin-bottom: 1em
}

.profil-flex .left-side .third-line .profile-photos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .5em;
	border-radius: 3em;
	overflow: hidden
}

.profil-flex .left-side .third-line .profile-photos .profile-photo {
	width: 100%;
	height: 18em;
	background-size: cover;
	background-position: center
}

.profil-flex .left-side .third-line .no-photos {
	text-align: center;
	font-family: "Nunito";
	width: 80%;
	margin: auto
}

@media screen and (max-width:780px) {
	#my-photos .lines {
		grid-template-columns: 1fr
	}

	.profil-flex .left-side .second-line .or-book .profile-feeds .comment .comment-avatar-flex,
	.profil-flex .right-side .user-view {
		flex: 100%
	}

	.profil-flex .right-side .user-view .user-infos-section .profile-badges .badge {
		flex: 1 0 18%
	}

	.profil-flex .left-side .first-line .my-friends,
	.profil-flex .left-side .first-line .my-rooms {
		width: fit-content;
		margin: auto
	}

	.profil-flex .left-side .first-line .my-friends .friends-list,
	.profil-flex .left-side .first-line .my-friends .rooms-list,
	.profil-flex .left-side .first-line .my-rooms .friends-list,
	.profil-flex .left-side .first-line .my-rooms .rooms-list {
		grid-template-columns: repeat(2, 1fr);
		justify-items: center
	}

	.profil-flex .left-side .second-line .or-book .profile-feeds {
		gap: 2em
	}

	.profil-flex .left-side .second-line .or-book .profile-feeds .comment {
		text-align: center;
		row-gap: 1.5em
	}

	.profil-flex .left-side .second-line .or-book .profile-feeds .comment .comment-avatar-flex .comment-avatar {
		left: 45%;
		transform: translateX(-50%)
	}

	.profil-flex .left-side .first-line,
	.profil-flex .left-side .third-line .profile-photos {
		grid-template-columns: 1fr
	}
}

.stats-grid {
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 2em
}

.stats-grid .stats-box {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 1em;
	padding: 1.5em
}

.stats-grid .stats-box .stats-score {
	font-size: 18px;
	font-weight: 600;
	position: absolute;
	right: -.5em;
	top: 50%;
	transform: translateY(-50%);
	background: #4e5166;
	color: #fff;
	padding: .5em 1em;
	border-radius: .75em
}

@media screen and (max-width:1024px) {
	.stats-grid {
		grid-template-columns: 1fr 1fr
	}
}

@media screen and (max-width:780px) {
	.stats-grid {
		grid-template-columns: 1fr
	}
}

.forum-header {
	display: grid;
	grid-template-columns: 2fr 1fr;
	grid-gap: 1em;
	align-items: center;
	margin-bottom: 1em;
	min-height: 77px
}

.forum-header .relative-avatar-head {
	position: relative;
	width: 2.5em;
	height: 4em
}

.forum-categories-grid .box .p-relative .absolute-avatar,
.forum-header .relative-avatar-head .absolute-avatar-head {
	position: absolute;
	height: 140px;
	width: 115px;
	left: -15px;
	top: -15px;
	overflow: hidden
}

.forum-header .relative-avatar-head .absolute-avatar-head img {
	width: 65%
}

.forum-categories-grid .box .data .infos p,
.forum-header .subtitle,
blockquote p {
	margin: 0
}

.forum-header .left.new-subject {
	display: flex;
	gap: 1.5em;
	align-items: center
}

.forum-header .right {
	display: flex;
	flex-direction: row;
	gap: 1em;
	justify-content: end
}

.forum-header .right a {
	background-color: #fff;
	padding: 1em 2em;
	border-radius: 2em;
	font-weight: 500;
	font-size: 18px;
	display: flex;
	align-items: center
}

.forum-header .back-to-home {
	background: #373750;
	border-radius: 2em;
	padding: 1.5em 1em;
	color: #fff
}

.forum-header .back-to-home:hover {
	background: #40405d
}

.forum-categories-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 1em
}

.forum-categories-grid .box,
.forum-header .right a {
	justify-content: center;
	color: #333;
	text-decoration: unset
}

.forum-categories-grid .box {
	display: grid;
	grid-template-columns: 1.5fr 8fr;
	padding: unset
}

.forum-categories-grid .box .p-relative {
	position: relative;
	overflow: hidden;
	height: 100%
}

.forum-categories-grid .box .p-relative .absolute-avatar {
	left: 0;
	top: 0;
	cursor: pointer
}

.forum-categories-grid .box .p-relative .absolute-avatar img {
	width: 80%;
	margin: auto;
	image-rendering: pixelated
}

.forum-categories-grid .box .icon-category {
	width: 5.5em;
	padding: 1.5em;
	margin: auto
}

.forum-categories-grid .box .data {
	display: grid;
	grid-gap: 1em;
	align-items: center
}

.forum-categories-grid .box .data.category {
	grid-template-columns: 5fr 1fr;
	padding: 1.5em 1.5em 1.5em 0;
	align-items: center
}

.forum-categories-grid .box .data.subject {
	grid-template-columns: 3fr 1fr;
	padding: 1.5em 1.5em 1.5em .5em
}

.forum-categories-grid .box .data .infos {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 3px
}

.forum-categories-grid .box .data .infos .title {
	display: block;
	font-size: 19px;
	font-weight: 500;
	font-family: 'Ubuntu X'
}

.forum-categories-grid .box .data .status-counter {
	display: flex;
	gap: 1em
}

.forum-categories-grid .box .data .all-status {
	display: flex;
	max-width: 78px;
	gap: .5em;
	justify-content: end;
	align-items: center
}

.forum-categories-grid .box .data .all-status .status {
	width: 30px
}

.forum-categories-grid .box .data .all-status .pinned {
	width: 40px
}

.forum-categories-grid .box .data .counter {
	background-color: #eee;
	border-radius: 1em;
	min-height: 62px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 80px
}

.forum-categories-grid .box .data .counter .number {
	font-size: 18px;
	font-weight: 500
}

.forum-categories-grid .box .data .counter .text {
	font-size: 11px
}

.forum-category .block-title {
	display: flex;
	width: fit-content;
	justify-content: center;
	align-items: center;
	gap: 1.5em
}

.forum-category .block-title .category-logo {
	width: 2.5em;
	image-rendering: pixelated
}

.forum-category .comment-box {
	width: 75%;
	margin: 2em auto 0
}

.forum-category table {
	border-collapse: collapse
}

.forum-category table tr:first-child {
	padding-top: 12px;
	padding-bottom: 12px;
	background-color: #474a64;
	color: #fff
}

.forum-category table table th,
.forum-category table td {
	border: 1px solid #ddd;
	padding: 8px
}

.forum-category table tr:nth-child(even) {
	background-color: #f2f2f2
}

.forum-subject-header {
	display: flex;
	justify-content: start;
	gap: 1em
}

.forum-subject-header .box {
	background: #4a4d64;
	color: #fff;
	padding: 1.5em
}

.forum-subject-header .box i {
	margin-right: .25em
}

.forum-subject-header .box.back {
	border-radius: 1.75em;
	padding: 1.5em 1em
}

.forum-subject-header .box.back:hover {
	background: #383b4d
}

.forum-subject-header .box.back i {
	font-size: 20px;
	margin-right: 0
}

.forum-subject-header .box-like {
	position: relative;
	background-color: #d1c8c1;
	padding: 1em;
	font-size: 21px;
	border-radius: 5em;
	cursor: pointer
}

.forum-subject-header .box-like.loved,
.forum-subject-view .response-content .response-buttons .responses-reactions .box-like-response.loved,
.forum-subject-view .subject-content .response-buttons .responses-reactions .box-like-response.loved {
	background-color: #d57fb7;
	color: #fff
}

.forum-subject-header .box-like.liked,
.forum-subject-view .response-content .response-buttons .responses-reactions .box-like-response.liked,
.forum-subject-view .subject-content .response-buttons .responses-reactions .box-like-response.liked {
	background-color: #7ebf48;
	color: #fff
}

.forum-subject-header .box-like.unliked,
.forum-subject-view .response-content .response-buttons .responses-reactions .box-like-response.unliked,
.forum-subject-view .subject-content .response-buttons .responses-reactions .box-like-response.unliked {
	background-color: #bf4848;
	color: #fff
}

.forum-subject-header .box-like .counter {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: -12px;
	background-color: #fff;
	font-size: 16px;
	padding: 3px 8px;
	border-radius: 1em;
	color: #333
}

.forum-subject-view {
	display: flex;
	flex-direction: row;
	background: #fff;
	border-radius: 5em;
	padding: 2em;
	width: 80%;
	margin: 3.5em auto;
	gap: 2.5em
}

.forum-subject-view .user-section {
	display: flex;
	align-items: start;
	justify-content: center;
	text-decoration: unset;
	color: #333;
	height: fit-content;
	position: relative
}

.forum-subject-view .user-section .user-section-box {
	display: flex;
	flex-direction: column;
	align-items: center
}

.forum-subject-view .user-section .user-section-box .subject-user-avatar {
	position: relative;
	background-color: #b79a83;
	padding: 2.5em;
	border-radius: 5em;
	border: 4px solid #d1b7a0;
	overflow: hidden;
	width: 7em;
	height: 7em;
	box-shadow: 0 0 0 4px #f9e4d0
}

.forum-subject-view .user-section .user-section-box .subject-user-avatar .absolute-avatar-head {
	position: absolute;
	height: 90px;
	width: 115px;
	left: 50%;
	top: 20%;
	transform: translate(-50%, -50%)
}

.forum-subject-view .user-section .user-section-box .subject-user-avatar .absolute-avatar-head img {
	width: 100%
}

.forum-subject-view .user-section .forum-role {
	padding: .25em .5em;
	border-radius: 9px;
	font-size: 13px;
	position: absolute;
	bottom: -.5em
}

.forum-subject-view .user-section .forum-role.vip {
	background-color: #d78080;
	color: #fff
}

.forum-subject-view .user-section .forum-role.team {
	background-color: #ecbe64;
	color: #fff
}

.forum-subject-view .response-content,
.forum-subject-view .subject-content {
	position: relative;
	width: 100%
}

.forum-subject-view .response-content .user-infos,
.forum-subject-view .subject-content .user-infos {
	display: flex;
	align-items: center;
	gap: .5em;
	margin-bottom: 1em
}

.forum-subject-view .response-content .user-infos .username,
.forum-subject-view .subject-content .user-infos .username {
	font-size: 18px;
	font-family: "Nunito"
}

.forum-subject-view .response-content .tox,
.forum-subject-view .subject-content .tox {
	margin-bottom: 1.5em
}

.forum-subject-view .response-content .subject-status,
.forum-subject-view .subject-content .subject-status {
	display: flex;
	gap: 1em;
	align-items: center;
	position: absolute;
	right: 1em;
	top: -3.5em
}

.forum-subject-view .response-content .posted-ago,
.forum-subject-view .subject-content .posted-ago {
	margin-top: 1em;
	font-family: "Nunito"
}

.forum-subject-view .response-content #subject-content-text img,
.forum-subject-view .response-content .response-text img,
.forum-subject-view .subject-content #subject-content-text img,
.forum-subject-view .subject-content .response-text img {
	max-width: 100%;
	height: auto
}

.forum-subject-view .response-content .response-buttons,
.forum-subject-view .subject-content .response-buttons {
	display: flex;
	gap: .5em;
	justify-content: end;
	margin-top: .75em;
	align-items: center;
	position: absolute;
	right: 1em;
	bottom: -4.5em;
	background: #eee;
	border-radius: 2em;
	padding: .75em
}

.forum-subject-view .response-content .response-buttons .delete-response,
.forum-subject-view .subject-content .response-buttons .delete-response {
	background: #b95f5f;
	color: #fff;
	padding: .75em;
	font-size: 16px;
	border-radius: 1em;
	cursor: pointer;
	margin-right: .5em
}

.forum-subject-view .response-content .response-buttons .delete-response:hover,
.forum-subject-view .subject-content .response-buttons .delete-response:hover {
	background: #a45454
}

.forum-subject-view .response-content .response-buttons .cancel-edit-response,
.forum-subject-view .subject-content .response-buttons .cancel-edit-response {
	background: #979c9f;
	color: #fff;
	padding: .75em;
	font-size: 16px;
	border-radius: 1em;
	cursor: pointer;
	display: flex;
	gap: .5em;
	align-items: center
}

.forum-subject-view .response-content .response-buttons .cancel-edit-response:hover,
.forum-subject-view .subject-content .response-buttons .cancel-edit-response:hover {
	background: #878b8d
}

.forum-subject-view .response-content .response-buttons .edit-response,
.forum-subject-view .subject-content .response-buttons .edit-response {
	background: #5f93b9;
	color: #fff;
	padding: .75em;
	font-size: 16px;
	border-radius: 1em;
	cursor: pointer
}

.forum-subject-view .response-content .response-buttons .edit-response:hover,
.forum-subject-view .subject-content .response-buttons .edit-response:hover {
	background: #5482a4
}

.forum-subject-view .response-content .response-buttons .responses-reactions,
.forum-subject-view .subject-content .response-buttons .responses-reactions {
	display: flex;
	gap: .75em
}

.forum-subject-view .response-content .response-buttons .responses-reactions .box-like-response,
.forum-subject-view .subject-content .response-buttons .responses-reactions .box-like-response {
	position: relative;
	background-color: #d1c8c1;
	padding: 1em;
	font-size: 13px;
	border-radius: 5em;
	cursor: pointer
}

.forum-subject-view .response-content .response-buttons .responses-reactions .box-like-response .counter,
.forum-subject-view .subject-content .response-buttons .responses-reactions .box-like-response .counter {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: -9px;
	background-color: #fff;
	font-size: 12px;
	padding: 3px 8px;
	border-radius: 1em;
	color: #333
}

.forum-subject-view .response-content {
	display: flex;
	align-items: center
}

.subject-action-buttons {
	display: flex;
	width: 65%;
	margin: 2em auto;
	font-size: 15px;
	flex-wrap: wrap;
	border-radius: 1em;
	overflow: hidden
}

.forum-pagination,
.subject-action-buttons div {
	display: flex;
	justify-content: center;
	align-items: center
}

.subject-action-buttons div {
	flex: 1;
	color: #fff;
	padding: .75em 1.5em;
	text-align: center;
	cursor: pointer
}

.subject-action-buttons div.pin {
	background-color: #ceb466
}

.subject-action-buttons div.edit {
	background: #5f93b9
}

.subject-action-buttons div.delete {
	background: #b95f5f
}

.subject-action-buttons div.close {
	background: #979c9f
}

.subject-action-buttons div.open {
	background: #80b95f
}

.forum-pagination {
	margin-top: 3.5em;
	flex-wrap: wrap;
	gap: 5px
}

.forum-pagination a {
	text-decoration: unset;
	color: #000;
	padding: .75em 1em;
	border-radius: 1em;
	text-align: center;
	background-color: #fff
}

.forum-pagination a.disabled {
	pointer-events: none;
	background-color: #eee
}

.forum-pagination a.active {
	background-color: #333;
	color: #fff
}

.forum-pagination a:hover {
	background-color: #727272;
	color: #fff
}

.no-reply-possible {
	padding: 2em
}

.no-reply-possible,
.no-subjects {
	margin-top: 2em;
	text-align: center;
	--mask: linear-gradient(to top, #0000 21px, #000 0),
		radial-gradient(21px, #000 98%, #0000) bottom/38.85px 42px;
	-webkit-mask: var(--mask);
	mask: var(--mask)
}

.no-reply-possible {
	background-color: #922a3c;
	color: #fff
}

.no-subjects {
	background-color: #fff;
	padding: 2em 2em 3em
}

blockquote {
	position: relative;
	background: #ececec;
	padding: 2em 4.5em;
	margin: 0
}

blockquote:after,
blockquote:before {
	position: absolute;
	font-family: "Fontawesome";
	font-size: 25px;
	color: #999
}

blockquote:before {
	top: 25px;
	left: 25px;
	content: ""
}

blockquote:after {
	bottom: 25px;
	right: 25px;
	content: ""
}

.forum-new .first-line {
	display: grid;
	grid-template-columns: 3fr 1.5fr .5fr;
	grid-gap: 1em
}

.forum-new .first-line .selectric {
	margin-top: 0
}

@media screen and (max-width:1024px) {
	.forum-index .forum-header {
		text-align: center
	}

	.forum-header {
		grid-template-columns: 1fr;
		justify-items: center
	}

	.forum-subject-header {
		justify-content: center
	}

	.forum-categories-grid .box.category {
		grid-template-columns: 1fr 5fr
	}

	.forum-categories-grid .box.subject {
		grid-template-columns: 1fr
	}

	.forum-categories-grid .box .data.subject {
		grid-template-columns: 3fr 1fr;
		padding: 1.5em;
		justify-items: center
	}
}

@media screen and (max-width:820px) {
	.forum-categories-grid .box.subject {
		grid-template-columns: 1fr
	}

	.forum-categories-grid .box .p-relative {
		display: none
	}

	.forum-categories-grid .box .data.subject {
		grid-template-columns: 1fr;
		padding: 1.5em;
		justify-items: center
	}

	.forum-categories-grid .box .data.subject .infos {
		text-align: center
	}

	.forum-category .comment-box {
		width: 100%
	}

	.forum-subject-header {
		flex-wrap: wrap
	}

	.forum-subject-header .box {
		flex: 45%;
		text-align: center
	}

	.forum-subject-view,
	.subject-action-buttons {
		width: 100%
	}

	.tox {
		height: 450px !important
	}
}

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

	.forum-categories-grid .box .data.category .infos,
	.forum-category .forum-header {
		text-align: center
	}

	.forum-category .forum-header .category-logo,
	.forum-category .forum-header .relative-avatar-head {
		display: none
	}

	.forum-subject-header .box {
		flex: 100%
	}

	.forum-categories-grid,
	.forum-categories-grid .box.category,
	.forum-new .first-line {
		grid-template-columns: 1fr
	}

	.forum-categories-grid .box .data.category,
	.forum-categories-grid .box .data.subject {
		grid-template-columns: 1fr;
		padding: 0 1.5em 1.5em;
		justify-items: center
	}

	.forum-categories-grid .box .data.subject {
		padding: 1.5em
	}

	.forum-new .first-line button {
		margin: auto
	}

	.forum-subject-view {
		flex-direction: column;
		align-items: center;
		gap: 1.5em;
		position: relative
	}

	.forum-subject-view .subject-content {
		position: unset
	}

	.forum-subject-view .subject-content .subject-texts {
		display: flex;
		flex-direction: column;
		align-items: center
	}

	.forum-subject-view .subject-content .subject-status {
		right: 4em;
		top: -1.5em
	}

	.forum-subject-view .response-content {
		display: unset;
		align-items: unset;
		position: unset
	}

	.forum-subject-view .response-content .response-texts {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 1em
	}

	.forum-subject-view .response-buttons {
		right: unset !important;
		left: 50%;
		bottom: -2.5em !important;
		transform: translateX(-50%)
	}
}

.notifications-grid,
.notifications-grid .one-notif {
	display: flex;
	flex-direction: column;
	gap: .5em;
	align-items: center
}

.notifications-grid .one-notif {
	flex-direction: row;
	width: 85%;
	background: #fff;
	padding: .5em;
	border-radius: 1.5em
}

.notifications-grid .one-notif .message {
	flex: 1;
	padding: 0 1em;
	border-radius: 1em;
	font-size: 16px
}

.notifications-grid .one-notif .link {
	background: #526271;
	color: #fff;
	padding: .75em 1.25em;
	border-radius: 1em;
	text-decoration: unset;
	border: 2px solid #677a8c
}

.notifications-grid .one-notif .link:hover {
	background: #485562
}

.notifications-grid .one-notif .btn-read-notif {
	background: #96c445;
	padding: .3em .35em;
	border-radius: .65em;
	font-size: 25px;
	color: #fff;
	cursor: pointer
}

.notifications-grid .one-notif .btn-read-notif:hover {
	background: #83ab3d
}

@media screen and (max-width:680px) {
	.notifications-grid .one-notif {
		width: 100%
	}
}

@media screen and (max-width:600px) {
	.notifications-grid .one-notif {
		flex-direction: row;
		gap: .75em;
		text-align: center;
		padding: .75em;
		flex-wrap: wrap;
		justify-content: center
	}

	.notifications-grid .one-notif .message {
		padding: 0 1em;
		border-radius: 1em;
		font-size: 16px;
		flex: 0 0 100%
	}

	.notifications-grid .one-notif .btn-read-notif,
	.notifications-grid .one-notif .link {
		flex: 0 0 45%
	}
}

.fas {
	font-family: "FontAwesome", "Ubuntu Habbo";
	font-size: 18px
}

.box,
.box-title {
	position: relative
}

.box {
	background: #fff;
	border-radius: 2em;
	padding: 2em;
    box-shadow: 0 0 12px rgb(0 0 0 / 72%);
}
.indexpic{ }
.box-title {
	border-radius: 2em 2em 0 0;
	margin-bottom: 15px;
	background-color: #fff;
	color: #373750;
	width: 100%;
	padding: 1em 1.5em;
	font-size: 1.5em
}

.box-title img {
	position: absolute;
	right: 1em;
	width: 1em;
	top: 50%;
	transform: translateY(-50%)
}

.box-title small {
	font-size: 15px
}

.separator {
	border-bottom: 2px solid #373750;
	width: 75%;
	margin: 0 auto 15px
}

.box-only-rounded-bottom {
	border-radius: 0 0 2em 2em
}

.error404 {
	min-height: 28em !important;
	width: 48vw !important
}

.error404 .choices {
	margin-top: 2em;
	display: flex;
	justify-content: center;
	gap: 1em;
	flex-wrap: wrap
}

.ban-box,
.prohibited {
	min-height: 23em !important;
	width: 48vw !important
}

.ban-box .index-left,
.prohibited .index-left {
	display: grid;
	grid-template-columns: 3fr 1fr;
	grid-gap: 1em;
	align-items: center
}

.ban-box .index-left .p-relative,
.prohibited .index-left .p-relative {
	position: relative
}

.ban-box .index-left .p-relative img,
.prohibited .index-left .p-relative img {
	width: 22em;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-38%, -50%)
}

.beta-banner {
	text-align: center;
	background: #ca6565;
	color: #fff;
	padding: 1em;
	margin-bottom: 2em
}

@media screen and (max-width:1024px) {
	.beta-banner {
		margin-top: 2em
	}
}

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

	.ban-box,
	.prohibited {
		width: 50vw !important
	}

	.ban-box .index-left .p-relative img,
	.prohibited .index-left .p-relative img {
		transform: translate(-48%, -50%)
	}
}

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

	.ban-box,
	.prohibited {
		width: 70vw !important
	}
}

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

	.ban-box,
	.prohibited {
		width: 85vw !important;
		min-height: fit-content !important
	}

	.ban-box .index-left,
	.prohibited .index-left {
		grid-template-columns: 1fr
	}

	.ban-box .index-left .p-relative img,
	.prohibited .index-left .p-relative img {
		display: none
	}
}

.responses {
	padding: 0 5em;
	display: flex;
	flex-direction: column;
	row-gap: 1em
}

.responses .subtitle {
	display: flex;
	flex-direction: row;
	gap: .5em;
	justify-content: center
}

.responses .subtitle .comment-icon {
	width: 1.5em
}

@media screen and (max-width:1200px) {
	.responses {
		padding: 0 4em
	}
}

@media screen and (max-width:780px) {
	.responses {
		padding: 0 2em
	}
}

.comment {
	align-items: center;
	display: flex;
	flex-direction: row;
	column-gap: 1em;
	flex-wrap: wrap
}

.comment .comment-avatar-flex {
	flex: 1;
	min-height: 65px;
	position: relative
}

.comment .comment-avatar-flex .comment-avatar {
	position: absolute;
	height: 140px;
	width: 115px;
	left: -15px;
	top: -45px;
	cursor: pointer;
	overflow: hidden
}

.comment .comment-user-flex {
	align-self: center;
	overflow-wrap: anywhere;
	flex: 4
}

.comment .comment-user-flex .comment-user {
	font-size: 15px;
	font-family: "Nunito";
	text-decoration: none;
	display: block;
	color: unset
}

.comment .comment-user-flex .comment-message {
	margin-top: .5em
}

.comment .comment-user-flex .comment-message.reduce-size {
	width: 90%
}

.comment .comment-user-flex .comment-icon {
	position: absolute;
	right: 1.25em;
	top: 50%;
	transform: translateY(-50%)
}

@media (max-width:1024px) {
	.page-container {
		padding-top: 1em;
		padding-bottom: 9em
	}

	.error404 {
		margin: 0 2em
	}

	.flex_1,
	.flex_2,
	.flex_4 {
		flex: 100%
	}
}

@media (max-width:820px) {
	.client-buttons {
		display: none !important
	}
}