/* Base Styles */
body {
    background: #85eaf2;
    color: #111;
    overflow-y: scroll;
    background: url(/assets/img/design/background_morning_repeat.jpg) center contain repeat-y;
}

body::before {
    content: ' ';
    position: absolute;
    width: 100%;
    height: 60vh;
    top: 0;
    left: 0;
    background: url('/assets/img/design/background_morning_top.png') no-repeat;
    background-size: cover;
    z-index: -1;
}

body>.base {
    background: #F8F8FB;
    min-height: 100vh;
    /* overflow: hidden; */
    display: flex;
    flex-flow: column;
    max-width: 1000px;
    margin: 0 auto;
    box-shadow: 0 0 1em rgba(0, 0, 0, 0.2);
    border-radius: 0px 0px 10px 10px;
}

/* ALTERATIONS D'ÉTAT */
body.invert-colors {
    filter: invert(100%);
    transition: filter 0.5s ease;
}


body.sepia {
    filter: sepia(100%);
    transition: filter 0.5s ease;
}


body.saturated {
    filter: saturate(200%);
    transition: filter 0.5s ease;
}

body.grayscale {
    filter: grayscale(100%);
    transition: filter 0.5s ease;
}


body.hue-rotate {
    filter: hue-rotate(90deg);
    transition: filter 0.5s ease;
}


body.faded {
    opacity: 0.5;
    transition: opacity 0.5s ease;
}


body.zoom {
    transform: scale(1.1);
    transition: transform 0.5s ease;
}


body.high-contrast {
    filter: contrast(200%);
    transition: filter 0.5s ease;
}

/* FIN D'ALTERATION D'ÉTAT */

.top {
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 1.2em;
    font-weight: bold;
    font-variant: small-caps;
    color: #ffffff;
    word-spacing: normal;
    display: flex;
    align-items: flex-start;
    z-index: 1;
    width: 1000px;
    flex-wrap: nowrap;
}

.col-content a {
    color: #FF6300;
}

.col-content a.sexef {
    color: #F0037F;
}

.col-content a.sexem {
    color: #0290BF;
}

.mention.sexem {
    text-decoration: none;
    color: #fff;
    background-color: #448fd1;
    cursor: pointer;
    font-weight: 500;
}

.mention.sexef {
    text-decoration: none;
    color: #fff;
    background-color: #c444d1;
    cursor: pointer;
    font-weight: 500;
}

.ql-mention-list-item {
    text-decoration: none;
    display: block;
    padding: 2px .4em;
    line-height: 1.5;
    min-height: 0;
    font-weight: normal;
}

.ql-mention-list-item[data-gender="m"] {
    color: #0290BF
}

.ql-mention-list-item[data-gender="f"] {
    color: #F0037F
}

.ql-mention-list-item.selected {
    border: 1px solid #79b7e7;
    background: #d0e5f5 url(/assets/img/design/ui-bg_glass_75_d0e5f5_1x400.png) 50% 50% repeat-x;
    font-weight: bold;
}

.loader {
    background: rgb(85, 176, 232);
    background: radial-gradient(circle, rgba(85, 176, 232, 1) 0%, rgba(63, 94, 251, 1) 86%);
    font-family: 'Yanone Kaffeesatz';
    font-size: 2em;
    color: white;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* Organise les éléments enfants en colonne */
    z-index: 1000;
    text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.65);
    opacity: 1;
    transition: opacity 0.15s ease-in-out;
    text-align: center;
}

.loader .logo {
    background-image: url('/assets/img/icons/icon_192.png');
    height: 192px;
    width: 192px;
}

.alert {
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
    text-align: left;
    font-size: 16px;
}

.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

.welcomeFromOldGames {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.welcomeFromOldGames>div {
    width: 30em;
    margin: 1em;
    padding: 2em;
    text-align: center;
}

.welcomeFromOldGames h2 {
    font-family: "Lato", sans-serif;
    text-transform: uppercase;
    color: #164158;
    font-weight: bold;
    margin-bottom: 2em;
}

.mobile-navigation {
    height: 100%;
    width: 100%;
    background: #ffffff;
    position: fixed;
    z-index: 500000;
    overflow-y: auto;
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.mobile-navigation-webkit-scrollbar {
    display: none;
}

.mobile-navigation ul {
    width: 100%;
    justify-content: center;
}

.mobile-navigation li {
    justify-content: center;
    text-align: center;
    margin: 5px;
}

.top-mobile {
    background-image: url(/assets/img/design/top_mobile.png);
    background-repeat: no-repeat;
    background-size: cover;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 1.2em;
    font-weight: bold;
    font-variant: small-caps;
    color: #003366;
    word-spacing: normal;
    display: flex;
    align-items: stretch;
    z-index: 1;
    border-bottom: solid;
    outline: rgb(226, 226, 226) solid;
    border-color: rgba(214, 240, 254, 1);
    box-shadow: 0.15em 0.3em 0 rgb(190, 227, 238);
    margin-bottom: 25px;
}

.mobile-navigation .title {
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 1.5em;
    text-align: center;
    font-weight: bold;
    color: #4d4d4d;
}

a.button,
a.retour,
a.bouton,
input.bouton,
button.bouton {
    border-radius: 4px;
    background: var(--Primary-Main, #FEB603);
    font-family: 'Yanone Kaffeesatz', sans-serif;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    padding: 4px 8px;
    border: 0px;
    font-size: 16px;
    text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25);
}

.bouton.red {
    background: rgb(206 36 36);
    background: linear-gradient(0deg, rgb(211 61 61) 0%, rgb(206 36 36) 69%, rgb(232 92 92) 100%);
    color: #fff;
}

button.bouton:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.buttonMenu:hover {
    transform: translate(10px, 0px);
}

.buttonMenuAdmin:hover {
    transform: translate(10px, 0px);
}

.buttonMenu:focus {
    transform: translate(10px, 0px) scale(0.95);
    transition: 0.05s;
}

.buttonMenuAdmin:focus {
    transform: translate(10px, 0px) scale(0.95);
    transition: 0.05s;
}

.mobile-navigation .buttonMenu:hover {
    transform: translate(0px, 0px);
}

.mobile-navigation .buttonMenuAdmin:hover {
    transform: translate(0px, 0px);
}

.mobile-navigation .buttonMenu:focus {
    transform: translate(0px, 0px) scale(0.95);
    transition: 0.05s;
}

.mobile-navigation .buttonMenuAdmin:focus {
    transform: translate(0px, 0px) scale(0.95);
    transition: 0.05s;
}

.mobile-navigation .buttonMenu {
    -webkit-transition: -webkit-transform .2s ease-in-out;
    transition: transform .2s ease-in-out;
    background: url(/assets/img/design/menu_empty_300.png) no-repeat 0 0;
    background-size: cover;
    text-decoration: none;
    outline: none;
    border: none;
    width: 154px;
    height: 37px;
    font-family: 'Brady Bunch Remastered', 'Yanone Kaffeesatz';
    font-size: 1.5em;
    color: #fff;
    text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.65);
}

.mobile-navigation .buttonMenuAdmin {
    -webkit-transition: -webkit-transform .2s ease-in-out;
    transition: transform .2s ease-in-out;
    background: url(/assets/img/design/menu_empty_300.png) no-repeat 0 0;
    background-size: cover;
    text-decoration: none;
    outline: none;
    border: none;
    width: 154px;
    height: 37px;
    font-family: 'Brady Bunch Remastered', 'Yanone Kaffeesatz';
    font-size: 1.5em;
    color: #fff;
    text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.65);
}

.mobile-navigation hr {
    border-top: 2px solid rgb(230, 230, 230);
    margin: 5px 15px 5px 15px;
}

.mobile-navigation a,
.mobile-navigation span {
    color: #fe7d01;
    text-decoration: none;
}

.container.inline-block,
.inline-block .col {
    display: inline-block;
}

.col-menu .container,
.col-menu .container .wrap {
    overflow: visible;
}

.row {
    display: flex;
    flex: 1;
    justify-content: center;
    text-align: center;
    margin-top: 2%;
}

.col {
    display: block;
    padding: 0.5em;
    align-items: center;
}

.col.col-180 {
    width: 180px;
}

.col.col-640 {
    width: 640px;
}

.col.col-850 {
    width: 850px;
}

.container {
    overflow: hidden;
}

.container .wrap {
    display: block;
    padding: 0.5em;
    align-items: center;
    flex: 1;
    overflow: hidden;
}

.container .wrap .buttonMenu {
    margin: 2px 1px 2px 1px;
}

.container .wrap .buttonMenuAdmin {
    margin: 2px 1px 2px 1px;
}


.flexWrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around; /* Répartit l'espace autour des éléments */
    margin: 25px 0;
}

.flexWrap.spaceBetween {
    justify-content: space-between;
}

.flexWrap .button {
    flex: 0 1 calc(50% - 10px);
    /* Prend 50% de l'espace disponible, moins une marge */
    margin: 5px;
    /* Marge pour éviter que les éléments se touchent */
    text-align: center;
    /* Centre le texte dans les boutons */
    /* Ajoutez ici tout autre style pour vos boutons */
}

.actions .flexWrap .button {
    flex: 0 1 calc(50% - 50px);
    /* Prend 50% de l'espace disponible, moins une marge */
    margin: 5px;
    /* Marge pour éviter que les éléments se touchent */
    text-align: center;
    /* Centre le texte dans les boutons */
    /* Ajoutez ici tout autre style pour vos boutons */
}

.top-mobile .logo {
    width: 153px;
    height: 79px;
    background-image: url(/assets/img/design/logo_stereo_white_split_up.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.top-mobile .logo:before {
    content: "";
    z-index: 1;
    position: absolute;
    top: 78px;
    left: 0px;
    width: 132px;
    height: 41px;
    background-image: url(/assets/img/design/logo_stereo_white_split_down.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.top-mobile .btn-menu {
    margin-top: 0.8em;
    margin-right: 0.5em;
    height: 2.75em;
    width: 2.75em;
    filter: drop-shadow(0em 0em 0.1em rgba(0, 0, 0, 0.25));
    padding: 0.8em 0.1em;
    font-size: 1em;
}

.top-mobile a,
.top-mobile span {
    color: #fe7d01;
    text-decoration: none;
}

.top-mobile .wrap {
    /* display: flex; */
    padding: 0.15em 0.15em 0.15em 0.5em;
    align-items: center;
    flex: 1;
    overflow: hidden;
}

.top {
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 1.2em;
    font-weight: bold;
    font-variant: small-caps;
    color: #ffffff;
    word-spacing: normal;
    display: flex;
    align-items: stretch;
    z-index: 1;
}

.top a,
.top span {
    color: #FCB703;
    text-decoration: none;
}

.top span.white {
    color: #fff;
}

h1 {
    font-size: 1.5em;
    font-family: "Pacifico", sans-serif;
    text-transform: lowercase;
    text-shadow: 0.05em 0.1em 0 rgba(0, 0, 0, 0.2);
    background: rgba(255, 255, 255, 0.1);
    position: relative;
    display: flex;
    flex-flow: column;
}

h1:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

h1:active {
    background-color: rgba(32, 32, 32, 0.2);
}

h1 a {
    flex: 1;
    line-height: 2.2;
    padding: 0 0.5em 0 0.7em;
    color: inherit;
    text-decoration: underline;
}

.logo-planet-stereo {
    width: 377px;
    height: 415px;
    background-image: url(/assets/img/design/logo_planet_stereo.png);
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 1;
}

.top .bluebox {
    background-color: rgb(0 0 0 / 41%);
    box-shadow: 0em 0em 8px 0px rgb(0 0 0 / 28%);
    border-radius: 0px 0px 10px 10px;
    /* border: 1px solid #8D8BD9; */
    margin-left: 5px;
    margin-right: 5px;
    padding-right: 10px;
    padding-left: 10px;
}

.top .welcome {
    display: flex;
    flex: auto;
    justify-content: flex;
    text-align: center;
    overflow: hidden;
    letter-spacing: 1px;
    flex-grow: 0.3;
}

.top .stats {
    display: flex;
    flex: initial;
    justify-content: flex-end;
    text-align: center;
    overflow: hidden;
    letter-spacing: 1px;
}

.top .wrap {
    /* display: flex; */
    padding: 0.15em 0.15em 0.15em 0.5em;
    align-items: center;
    flex: 1;
    overflow: hidden;
}

.top .wrap.left {
    display: flex;
    justify-content: space-between;
}

.top .auth {
    flex: 1;
    min-width: 0;
    width: 100%;
    height: 2.25em;
    padding: 0.5em 0.5em 0.5em 0.75em;
    border-radius: 2em 0 0 2em;
    background: rgba(32, 32, 32, 0.2);
    border: 1px solid rgba(0, 0, 0, 0.25);
    background-clip: padding-box;
    font: inherit;
    text-align: left;
    color: #eee;
    display: flex;
}

.top .auth img {
    width: 1.25em;
    height: 1.25em;
    opacity: 0.9;
    border-radius: 0.25em;
    margin-right: 0.5em;
}

.top .auth:hover,
.top .auth:focus {
    background: rgba(32, 32, 32, 0.3);
}

.top .auth:active {
    background: rgba(32, 32, 32, 0.4);
}

.top .auth .nickname {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.top .picture {
    width: 2.25em;
    height: 2.25em;
    display: flex;
    align-items: center;
    border-radius: 0 0.25em 0.25em 0;
    background: rgba(32, 32, 32, 0.2);
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-left-color: rgba(32, 32, 32, 0.2);
    background-clip: padding-box;
    justify-content: center;
    outline: none;
    background-size: contain;
    cursor: pointer;
}

.top .picture:not(.hasImage):hover,
.top .picture:not(.hasImage):focus {
    background: rgba(32, 32, 32, 0.3);
}

.top .picture:not(.hasImage):active {
    background: rgba(32, 32, 32, 0.4);
}

.top .picture:not(.hasImage):after {
    content: "📷";
}

.page {
    flex: 1;
}

.loading.page {
    height: 100vh;
    display: flex;
    flex-flow: column;

    transform: scale(1);
    opacity: 0;
}

.loading.page.fadeIn {
    transition: opacity 0.2s ease-in;
    transition-delay: 0.2s;
    opacity: 1;
}

.error.page {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    padding: 1em;
    text-align: center;
}

.error.page .title {
    font-size: 2em;
    font-family: "Pacifico", sans-serif;
    color: #aaa;
    margin-bottom: 1em;
}

.error.page .message {
    margin-bottom: 1em;
}

.auth.page .main {
    padding: 1em;
    display: flex;
    flex-flow: column;
    text-align: center;
}

.auth.page form.setNickname .line,
.auth.page form.jklmLogin .line {
    margin-top: 0.5em;
    justify-content: center;
}

.auth.page .nicknameRules {
    font-size: smaller;
}

.auth.page .nickname,
.auth.page .password {
    margin-right: 0.5em;
}

.auth.page .services {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.auth.page .services a {
    margin: 0.25em;
    line-height: 0;
}

.auth.page .services a:hover {
    filter: brightness(1.2) contrast(1.1);
}

.auth.page .services a img {
    width: 4em;
    height: 4em;
    border-radius: 2.5em;
    border-bottom: 2px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.1);
}

.auth.page .services a:active {
    filter: brightness(0.9) contrast(0.9);
    box-shadow: none;
}

.auth.page .services a:active img {
    box-shadow: none;
}


.activeService .serviceIcon {
    margin-bottom: 1em;
}

.activeService .serviceIcon img {
    width: 4em;
    height: 4em;
    border-radius: 2.5em;
}

.activeService .logout {
    margin-top: 1em;
}

.home {
    display: flex;
    flex-flow: column;
}

.city-light {
    width: 100%;
    display: flex;
    position: absolute;
    height: 316px;
    background-image: url(/assets/img/design/top_morning.png);
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 0;
}

.startRoom {
    margin-bottom: 1em;
}

.startRoom button {
    margin-left: 0.5em;
}

.startRoom .gameSelection {
    display: flex;
    margin-bottom: 0.5em;
    padding-bottom: 0.25em;
    overflow-x: scroll;
    overflow-y: hidden;
}

.gameSelection input[type=radio] {
    display: none;
}

.gameSelection>div {
    display: inline-block;
}

.gameSelection label {
    display: flex;
    flex-flow: column;
    padding: 0.25em;
    margin-right: 0.25em;
    width: 8em;
    height: 10em;
    background: #ddd;
    border-radius: 0.25em;
    cursor: pointer;
    text-align: center;
}

.gameSelection .icon {
    font-size: 3em;
    margin: 0.25em 0;
}

.gameSelection .name {
    font-weight: bold;
    color: #555;
}

.gameSelection .description {
    padding-left: 0.25em;
    color: #555;
    font-size: small;
}

.gameSelection input[type=radio]:not(:checked):not(:disabled):hover+label {
    background: #e3e3e3;
}

.gameSelection input[type=radio]:not(:checked):not(:disabled):active+label {
    background: #d0d0d0;
}

.gameSelection input[type=radio]:checked+label {
    background: #7d6fa0;
}

.gameSelection input[type=radio]:disabled+label {
    background: transparent;
    opacity: 0.3;
    cursor: default;
}

.startRoom .roomName {
    flex: 1;
    margin-right: 0.5em;
    width: 0;
    min-width: 0;
}

.gameSelection input[type=radio]:checked+label .name {
    color: #eee;
}

.gameSelection input[type=radio]:checked+label .description {
    color: #ccc;
}

.joinRoom.box {
    margin-bottom: 0em;
}

.joinRoom input[type=text] {
    text-transform: uppercase;
    margin: 0 0.5em;
    flex: 1;
}

.news {
    flex: 1;
    max-height: 8em;
    padding: 0.75em;
    border-radius: 0.15em;
    margin-top: 1em;
    font-size: smaller;
    color: #5a5d51;
}

.news .header {
    font-size: smaller;
}

.news .content {
    margin-top: 0.5em;
}

.home .links {
    padding: 0em 1em;
    margin-top: 1em;
    opacity: 0.8;
    text-align: center;
}

.home .links>div {
    font-size: smaller;
    line-height: 1.5;
}

.home .links img {
    vertical-align: middle;
    border-radius: 1em;
    margin-top: -5px;
}

.enjoyJklm {
    text-align: center;
    padding: 0.5rem;
    color: #441;
    background: #eeb;
    font-size: smaller;
}

.publicRooms {
    flex: 1;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    display: flex;
    flex-flow: column;
    background: #eee;
}

.publicRooms .header {
    display: flex;
    align-items: center;
    margin-bottom: 1em;
}

.publicRooms .header header {
    flex: 1;
    margin-bottom: 0;
    padding-right: 0.5em;
}

.publicRooms .listContainer {
    position: relative;
}

.publicRooms .loading.section {
    position: absolute;
}

.publicRooms .list {
    padding: 1em;
}

.publicRooms .entry {
    display: flex;
    margin-bottom: 1em;
    border: 1px solid #09090940;
    background: #ffe6a4;
    text-decoration: none;
    color: #3c3733;
    box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.05), 0 0.2em 0.5em rgba(0, 0, 0, 0.05);
    transform: rotate(-2deg);
}

.publicRooms .entry.bombparty {
    background: #e5c094;
}

.publicRooms .entry.popsauce {
    background: #eab4f6;
}

.publicRooms .entry.beta>.stub {
    background: #ff000087;
}

.publicRooms .entry:hover {
    margin-top: -0.1em;
    margin-bottom: 1.1em;
    box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.05), 0 0.45em 0.5em rgba(0, 0, 0, 0.05);
}

.publicRooms .entry:hover .cutout {
    border: 1px solid #888;
    border-right: transparent;
}

.publicRooms .entry:active {
    border: 1px solid #888;
    transition: none;
    margin-top: 0.1em;
    margin-bottom: 0.9em;
    box-shadow: none;
}

.publicRooms .entry:active .cutout {
    box-shadow: none;
}


.publicRooms .entry .info {
    flex: 1;
    padding: 0.5em;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.05);
    margin: 0.3em;
    border: 2px dashed rgba(0, 0, 0, 0.20);
    border-radius: 0.25em;
    border-right: none;
}

.publicRooms .entry .title {
    font-weight: bold;
    font-size: 1.25em;
    display: flex;
    align-items: center;
    margin-bottom: 0.25em;
    display: flex;
}

.publicRooms .entry .title .text {
    white-space: nowrap;
    overflow: hidden;
    font-size: 0.75em;
    text-overflow: ellipsis;
}

.publicRooms .entry .playerCount {
    font-size: 0.6em;
    margin-left: 0.5em;
    background: #0000001f;
    padding: 0.25em 0.5em;
    border-radius: 1em;
}

.publicRooms .entry .playing {
    font-size: smaller;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.publicRooms .entry .stub {
    width: 3.5em;
    border-left: 2px dashed #7c606082;
    display: flex;
    align-items: center;
    position: relative;
}

.publicRooms .entry .cutout {
    width: 1em;
    height: 2em;
    position: absolute;
    right: -2px;
    border-radius: 1em 0 0 1em;
    background: #dedede;
    border: 1px solid #09090960;
    border-right: transparent;
    box-shadow: 0 0 0.5em #eee inset;
}

.publicRooms .entry .code {
    white-space: nowrap;
    transform: rotate(-90deg);
    font-weight: bold;
    transform-origin: center;
    color: rgba(0, 0, 0, 0.3);
    margin-left: -0.25em;
    background: #5a555321;
    font-family: monospace;
    padding: 0 0.25em;
    font-size: 20px;
}

.home .publicRooms .filter {
    margin-right: 0.5em;
    display: none;
}

.card-pol .card-body .pol-render {
    width: 100%;
    margin: 5px;
    background-color: #fff;
}

header button.close {
    position: absolute;
    color: #ffffff;
    right: 10px;
    top: -12px;
    text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.85);
    font-size: 2em;
    font-family: 'Yanone Kaffeesatz';
}

.card-pol .card-footer {
    padding: .5rem 1rem;
    border-top: 1px solid rgba(0, 0, 0, .125);
}

.card-pol .card-footer:last-child {
    border-radius: 0 0 calc(.25rem - 1px) calc(.25rem - 1px);
    height: 100%;
}

.card-pol .card-body {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1em;
}

.card-pol-hover {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #000000bf;
    border-radius: .25rem;
}

.card-pol .card-body.card-pol-render {
    background-color: #fff;
}

#profiles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* calc(100%) est superflu ici */
    height: 100%;
    z-index: 50;
    pointer-events: none;
    /* S'assure que les clics ne sont pas bloqués */
    display: flex;
    /* Utilise Flexbox pour centrer les enfants */
    justify-content: center;
    /* Centre horizontalement les enfants */
    align-items: center;
    /* Centre verticalement les enfants */
}

.small {
    font-size: 0.8em;
}

.card-pol .card-title {
    padding: .5rem 1rem;
    margin-bottom: 0;
    background-color: rgba(0, 0, 0, .03);
    border-bottom: 1px solid rgba(0, 0, 0, .125);
    font-weight: bold;
    font-variant: small-caps;
}

.card-pol .card-title.sexef {
    background-color: #F0037F;
    color: white;
}

.card-pol .card-title.sexem {
    background-color: #0290BF;
    color: white;
}

.draggable-window {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 450px;
    width: 100%;
    background: #fff;
    border-radius: 10px;
    transform: translate(-50%, -50%);
    box-shadow: 0px 0px 10px rgb(0 0 0 / 30%);
    z-index: 10;
    pointer-events: auto;
}

#page-preloader {
    display: block;
    position: absolute;
    width: 64px;
    height: 64px;
    top: 620px;
    transition: opacity 0.15s ease-in-out;
}

.page-preloader-text {
    font-family: 'Yanone Kaffeesatz';
    font-size: 2em;
    color: white;
    text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.65);
    text-align: center;
}

.draggable-window header {
    border-bottom: 1px solid #ccc;
    font-weight: bold;
    font-variant: small-caps;
    border-radius: 10px 10px 0px 0px;
    text-align: left;
    font-weight: bold;
    font-family: "Yanone Kaffeesatz", arial, sans-serif;
    font-size: 26px;
    padding: 4px 0px 0px 10px;
}

.draggable-window header.sexem {
    background-color: #0290BF;
    color: white;
}

.draggable-window header.sexef {
    background-color: #F0037F;
    color: white;
}


.draggable-window header.active {
    cursor: move;
    user-select: none;
}

.draggable-window .content {
    display: flex;
    padding: 10px 10px 10px 10px;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    font-size: 0.8em;
}

.draggable-window .content .icon {
    height: 95px;
    width: 95px;
    border-radius: 50%;
    border: 5px solid #6F36FF;
    display: flex;
    align-items: center;
    justify-content: center;
}

.draggable-window .content .icon i {
    color: #6F36FF;
    font-size: 60px;
}

.draggable-window .content .title {
    margin: 15px 0;
    font-size: 29px;
    font-weight: 500;
}

.draggable-window .content p {
    font-size: 0.8em;
}

.card-pol-hover .card-title {
    background-color: #363636;
    color: white;
}

.window-profile .profile-pol-render {
    width: 200px;
}

.window-profile .profile-cover {
    height: 145px;
    width: 100%;
    background: rgb(245, 245, 245);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

.window-profile .profile-cover .banner {
    width: 100%;
    margin-top: 0;
    margin-left: 0;
}

.window-profile .profile-avatar {
    height: 128px;
    width: 128px;
    margin: 130px 23px 0px;
    top: -20px;
    left: 0px;
    position: absolute;
    overflow: hidden;
    border-radius: 50%;
    background: rgb(217, 217, 217);
    border: 5px solid white;
}

.window-profile .profile-avatar .avatar-render {
    width: 120%;
    position: absolute;
    top: 20px;
    left: 14px;
    margin-top: -12%;
}

.window-profile .profile-infos ul {
    list-style-type: none;
}

.window-profile .profile-infos {
    margin-top: 45px;
    height: 110px;
    width: 98%;
    border-radius: 10px;
    border: .1px solid #ececec;
    display: flex;
    align-items: center;
}

.profile-status {
    height: 32px;
    width: 32px;
    border-radius: 50%;
    top: 203px;
    left: 118px;
    border: 5px solid #ffffff;
    position: absolute;
}

.profile-status.online {
    background: #44cf48;
}

.profile-status.afk {
    background: #ffe81f;
}

.profile-status.offline {
    background: #e03636;
}

.actionsButton {
    padding: 8px 10px;
    color: #000000b5;
    background: linear-gradient(180deg, rgba(255, 251, 18, 1) 0%, rgba(255, 140, 16, 1) 100%);
    border-radius: 5px;
    -webkit-border-radius: 5px;
    display: flex;
    margin-right: 8px;
    font-size: 14px;
    font-weight: bold;
    border: 1px solid #9a4900;
    margin-left: 15px;
    justify-content: space-around;
}

.actionsButton:hover {
    /* background-color: #0095f6bd; */
    background-color: #00000049;
    opacity: .7;
    transition: opacity 0.15s ease-in-out;
    cursor: pointer
}

.actionsButton.blue {
    padding: 8px 10px;
    color: #000000b5;
    background: linear-gradient(180deg, rgb(3 179 237) 0%, rgb(121 222 255) 100%);
    border-radius: 5px;
    -webkit-border-radius: 5px;
    display: flex;
    margin-right: 8px;
    font-size: 14px;
    font-weight: bold;
    border: 1px solid #0290bf;
}

.window-profile .profile-actions {
    height: 30px;
    display: flex;
    align-items: center;
    z-index: 1;
    position: absolute;
    right: 0;
    top: 165px;
    padding-right: 20px;
}

.window-profile .horizontal-menu {
    height: 24px;
    margin-top: 10px;
    display: flex;
    width: 100%;
    justify-content: center;
}

.moduleProfileRightContainerBorder {
    margin-top: 8px;
    /* height: 200px; */
    width: 98%;
    border-radius: 10px;
    border: .1px solid var(--grey);
}

.moduleProfileRightContainerBox {
    width: 100%;
}

.moduleProfileTabsContainer {
    height: 100%;
    position: relative;
    top: 0px;
    opacity: 1;
    transition: all 0s ease 0s;
}

.lightScrollbar::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

.lightScrollbar::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
}

.lightScrollbar::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: #555;
}

.lightScrollbar {
    scrollbar-width: thin;
    scrollbar-color: rgb(40 40 40 / 11%) rgba(0, 0, 0, 0.05);
}

/* Profile Friends */


.moduleProfileFriendsBody {
    width: calc(100% - 14px);
    position: relative;
    gap: 10px;
    row-gap: 0px;
    flex-wrap: wrap;
    padding-left: 5px;
    margin-top: 25px;
    display: flex;
    justify-content: space-between;
}

.moduleProfileFriendsBoxAvatar .AvatarImage {
    object-fit: cover;
    width: 100%;
}

.moduleProfileHeritage {
    height: 95%;
    overflow: auto;
    margin-top: 8px;
}

.moduleProfileHeritageBody ul,
.moduleProfileFamilyBody ul {
    list-style-type: none;
}

.moduleProfileHeritageBody ul li,
.moduleProfileFamilyBody ul li {
    padding-bottom: 6px;
}

.moduleProfileFamily {
    height: 95%;
    overflow: auto;
    margin-top: 8px;
}

.moduleProfileFamily a {
    font-weight: bold;
}

.card-footer #jobName {
    font-weight: bold;
}

.moduleProfileFamilyBody,
.moduleProfileHeritageBody {
    width: calc(100% - 14px);
    position: relative;
    gap: 10px;
    row-gap: 0px;
    flex-wrap: wrap;
    padding-left: 5px;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    text-align: left;
    padding: 0px 20px 0px 20px;
}

.moduleProfileFriends {
    height: 95%;
    overflow: auto;
    margin-top: 8px;
}

.moduleProfileFriendsBox {
    position: relative;
    width: calc(50% - 8px);
    height: 70px;
    text-align: left;
    min-width: 200px;
}

.window-profile .moduleProfileFriendsBox {
    min-width: unset;
}

.moduleProfileFriendsContainer {
    position: relative;
    height: 50px;
    border-radius: 13px;
    border: 1px solid #e4e0e0;
    background-color: #f7f7f79c;
    padding: 5px;
}

.moduleProfileFriendsBoxAvatar {
    top: -5px;
    left: -5px;
    height: 60px;
    width: 60px;
    position: absolute;
    border-radius: 50%;
    background: #525252;
    border: 3px solid #fff;
    overflow: hidden;
}


.moduleProfileFriendsPseudo {
    margin-left: 55px;
    top: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: bold;
    cursor: pointer;
}

.moduleProfileFriendsMotto {
    margin-left: 55px;
    top: 8px;
    font-size: 12px
}

.moduleProfileFriendsOnline {
    position: absolute;
    top: 37px;
    left: 40px;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    background: #44cf48;
    border: 2px solid #fff;
}

.moduleProfileFriendsOffline {
    position: absolute;
    top: 37px;
    left: 40px;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    background: #ed1c24;
    border: 2px solid #fff;
}

/* Profile Comments */

.moduleProfileCommentsBoxAvatar .AvatarImage {
    object-fit: cover;
    width: 100%;
}

.moduleProfileStatus {
    height: 95%;
    overflow: auto;
    margin-top: 8px;
}

.moduleProfileStatusContainer {
    position: relative;
    border-radius: 13px;
    background-color: #f6f6f69c;
    margin: 20px;
    padding: 10px;
    text-align: justify;
}

.moduleProfileStatus #status-data {
    padding: 10px;
    font-style: italic;
    color: #5d5d5d;
    display: block;
}

.moduleProfileStatus .statusDate {
    padding-top: 10px;
    color: #b7b7b7;
    text-align: right;
    font-size: 12px;
}

.moduleProfileComments {
    height: 95%;
    overflow: auto;
    margin-top: 8px;
}

.moduleProfileCommentsBody {
    width: calc(100% - 14px);
    position: relative;
    gap: 10px;
    row-gap: 0px;
    flex-wrap: wrap;
    padding-left: 5px;
    margin-top: 25px;
    display: flex;
    justify-content: space-between;
}

.moduleProfileCommentsBox {
    position: relative;
    text-align: left;
    padding-bottom: 10px;
}

.moduleProfileCommentsContainer {
    position: relative;
    border-radius: 13px;
    background-color: #f6f6f69c;
    padding: 10px;
}

.moduleProfileCommentsBoxAvatar {
    height: 60px;
    width: 60px;
    position: absolute;
    border-radius: 50%;
    background: #525252;
    border: 3px solid #fff;
    overflow: hidden;
}


.moduleProfileCommentsPseudo {
    margin-left: 65px;
    top: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: bold;
    cursor: pointer;
}

.moduleProfileCommentsMotto {
    margin-left: 65px;
    top: 8px;
    font-size: 14px
}

.moduleProfileCommentsDate {
    margin-left: 65px;
    top: 8px;
    font-size: 12px;
    color: #9f9f9f;
    padding: 0px 0px 4px 0px;
}

.moduleProfileCommentsOnline {
    position: absolute;
    top: 50px;
    left: 54px;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    background: #44cf48;
    border: 2px solid #fff;
}

.moduleProfileCommentsOffline {
    position: absolute;
    top: 50px;
    left: 54px;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    background: #ed1c24;
    border: 2px solid #fff;
}

.AvatarFigure {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    margin-top: -12%;
    image-rendering: pixelated;
}

.heart {
    top: -10px;
    right: -10px;
    position: absolute;
    width: 64px;
    height: 64px;
    background: url("/assets/img/icons/heart.png") no-repeat;
    background-position: 0 0;
    cursor: pointer;
    transition: background-position 1s steps(28);
    transition-duration: 0s;

    &.is-active {
        transition-duration: 1s;
        background-position: -1792px 0;
    }
}

.heart span {
    margin: auto;
    position: absolute;
    text-align: right;
    left: -32px;
    top: calc(50% - 8px);
    width: 50px;
}

#actions-button .icon-arrow-down {
    opacity: 0.7;
    transform: rotate(0deg);
    transition: transform 0.3s ease-in-out 0s, opacity 0.3s ease-in-out 0s, visibility 0.3s ease-in-out 0s;
}

.simple-dropdown {
    width: 360px;
    padding: 10px 0;
    border-radius: 12px 0px 12px 12px;
    background-color: #fff;
    box-shadow: 0 0 40px 0 rgba(94, 92, 154, .12);
}

.simple-dropdown .dropdown-actions {
    display: flex;
    align-items: center;
    text-align: left;
    margin: 5px 15px;
}

.simple-dropdown .info-text {
    margin-top: 2px;
    display: flex;
    align-items: center;
}

.simple-dropdown .info-text a {
    cursor: pointer;
    transition: transform 0.3s ease-in-out 0s, opacity 0.3s ease-in-out 0s, visibility 0.3s ease-in-out 0s;
    display: flex;
    align-items: center;
}

.simple-dropdown .info-text a:hover {
    transform: translate(10px, 0px);
}

.simple-dropdown .info-text span {
    margin-left: 5px;
}

.simple-dropdown .infos-left,
.simple-dropdown .infos-right {
    width: 50%;
    display: flex;
    flex-direction: column;
}

.simple-dropdown ul {
    list-style-type: none;
    margin-left: -3px; 
    margin-top: 0px;
}

.simple-dropdown .infos-center {
    position: relative;
    width: 1px;
    height: 60%;
    background: #e7e7e7;
}

.window-inventory {
    opacity: 0;
    transition: opacity 0.1s ease-in-out 0s, visibility 0.1s ease-in-out 0s;
    max-width: 500px;
}

.window-inventory>header {
    background-color: #ffcf11;
    background: linear-gradient(180deg, rgba(255, 251, 18, 1) 0%, rgba(255, 140, 16, 1) 100%);
    color: #a65702;
    font-weight: bold;
    font-family: "Yanone Kaffeesatz", arial, sans-serif;
    font-size: 26px;
    padding: 4px 0px 0px 10px;
}

.window-inventory .help {
    padding: 10px;
    font-size: 14px;
    text-align: left;
}

.window-inventory .content {

}

.window-profile {
    opacity: 0;
    transition: opacity 0.1s ease-in-out 0s, visibility 0.1s ease-in-out 0s;
}

.window-profile .profile-subtitle {
    position: absolute;
    top: 204px;
    left: 161px;
    color: #7d7d7d;
}

.stereo-icon {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.pr-30 {
    padding-right: 30px;
}

.stereo-icon.icon-sourire {
    width: 16px;
    height: 16px;
    background-image: url(/assets/img/icons/interactions/sourire.svg);
}

.stereo-icon.icon-bisou {
    width: 16px;
    height: 16px;
    background-image: url(/assets/img/icons/interactions/bisou.svg);
}

.stereo-icon.icon-calin {
    width: 16px;
    height: 16px;
    background-image: url(/assets/img/icons/interactions/calin.svg);
}

.stereo-icon.icon-chatouilles {
    width: 16px;
    height: 16px;
    background-image: url(/assets/img/icons/interactions/chatouilles.svg);
}

.stereo-icon.icon-clin {
    width: 16px;
    height: 16px;
    background-image: url(/assets/img/icons/interactions/clin.svg);
}

.stereo-icon.icon-gift {
    width: 16px;
    height: 16px;
    background-image: url(/assets/img/icons/interactions/gift.svg);
}

.stereo-icon.icon-charmer {
    width: 16px;
    height: 16px;
    background-image: url(/assets/img/icons/interactions/charme.svg);
}

.stereo-icon.icon-serrermain {
    width: 16px;
    height: 16px;
    background-image: url(/assets/img/icons/interactions/main_serree.svg);
}

.stereo-icon.icon-langue {
    width: 16px;
    height: 16px;
    background-image: url(/assets/img/icons/interactions/langue_tiree.svg);
}

.stereo-icon.icon-pincer {
    width: 16px;
    height: 16px;
    background-image: url(/assets/img/icons/interactions/pincement.svg);
}

.stereo-icon.icon-baffe {
    width: 16px;
    height: 16px;
    background-image: url(/assets/img/icons/interactions/baffe.svg);
}

.stereo-icon.icon-cheveux {
    width: 16px;
    height: 16px;
    background-image: url(/assets/img/icons/interactions/tirage_de_cheveux.svg);
}

.stereo-icon.icon-bousculer {
    width: 16px;
    height: 16px;
    background-image: url(/assets/img/icons/interactions/bousculade.svg);
}

.stereo-icon.icon-croche-pied {
    width: 16px;
    height: 16px;
    background-image: url(/assets/img/icons/interactions/croche-pied.svg);
}

.stereo-icon.icon-amour {
    width: 16px;
    height: 16px;
    background-image: url(/assets/img/icons/interactions/amour.svg);
}

.stereo-icon.icon-voler {
    width: 16px;
    height: 16px;
    background-image: url(/assets/img/icons/interactions/sourire.svg);
}

.stereo-icon.icon-cles {
    width: 16px;
    height: 16px;
    background-image: url(/assets/img/icons/interactions/sourire.svg);
}

.stereo-icon.icon-keys {
    width: 16px;
    height: 16px;
    background-image: url(/assets/img/icons/interactions/visit.svg);
}

.stereo-icon.icon-invite {
    width: 16px;
    height: 16px;
    background-image: url(/assets/img/icons/add_friend.svg);
}

.stereo-icon.icon-remove {
    width: 16px;
    height: 16px;
    background-image: url(/assets/img/icons/remove_friend.svg);
}

.stereo-icon.icon-ring {
    width: 16px;
    height: 16px;
    background-image: url(/assets/img/icons/ring.svg);
}

.stereo-icon.icon-sexuality {
    width: 16px;
    height: 16px;
    background-image: url(/assets/img/icons/sexuality.svg);
}

.stereo-icon.icon-trophy {
    width: 16px;
    height: 16px;
    background-image: url(/assets/img/icons/trophy.svg);
}

.stereo-icon.icon-age {
    width: 16px;
    height: 16px;
    background-image: url(/assets/img/icons/age.svg);
}


.stereo-icon.icon-arrow-down {
    width: 16px;
    height: 16px;
    background-image: url(/assets/img/icons/arrow_down.png);
}

.stereo-icon.icon-message {
    width: 16px;
    height: 16px;
    background-image: url(/assets/img/icons/message.svg);
}

.stereo-icon.icon-job-0 {
    width: 16px;
    height: 16px;
    background-size: contain;
    background-image: url(https://stereopoly.fr/img/metiers/12.png);
}

#redirectText {
    color: #ffffff80;
    text-shadow: none;
    position: absolute;
    bottom: 30px;
    transition: 0.25s;
    opacity: 0;
}

.shortHr {
    /* width: 15%; */
    margin-bottom: 9px;
    /* border-radius: 5px; */
    border-top: solid 1px #a4a4a4;
}

#noOneInTown {
    width: 100%;
    color: #a4a4a4;
}

#no-presentation {
    width: 100%;
    color: #a4a4a4;
}

#no-comments {
    width: 100%;
    color: #b8b8b8;
}

#no-friends {
    width: 100%;
    color: #b8b8b8;
}

.stereo-icon.icon-euro {
    width: 16px;
    height: 16px;
    background-size: contain;
    background-image: url(/assets/img/icons/euro.svg);
}

.stereo-icon.icon-piece {
    width: 16px;
    height: 16px;
    background-size: contain;
    background-image: url(/assets/img/icons/piece_or.png);
}

.stereo-icon.icon-level {
    width: 16px;
    height: 16px;
    background-size: contain;
    background-image: url(/assets/img/icons/interactions/main_serree.svg);
}


.stereo-icon.icon-relation {
    width: 16px;
    height: 16px;
    background-size: contain;
    background-image: url(/assets/img/icons/relation.svg);
}

.window-profile .profile-infos .infos-left {
    width: 50%;
}

.window-profile .profile-infos .infos-center {
    position: relative;
    width: 1px;
    height: 60%;
    background: #e7e7e7;
}

.window-profile .profile-infos .info-text {
    margin-left: 15px;
    margin-bottom: 3px;
    margin-top: 2px;
    display: flex;
    align-items: center;
}

.window-profile .profile-infos .info-text span {
    margin-left: 5px;
    text-align: left;
}

.window-profile .profile-infos .infos-left {
    width: 50%;
    display: flex;
    flex-direction: column;
}

.card-title:first-child {
    border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0;
}


a.nodecoration {
    text-decoration: none;
}

.card-pol {
    max-width: 9.4rem;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: .25rem;
    margin: 4px;
    background-color: rgb(244 244 244);
}

.pols-en-ligne .flexWrap {
    justify-content: left;
}

.footer {
    /* padding: 0.5em;
    font-size: 1.5em;
    color: #444;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    font-family: "Pacifico", sans-serif; */
}

.footer a {
    text-decoration: none;
}

.footer .mafia {
    height: 48px;
    width: 48px;
    cursor: not-allowed;
    transform: translate(-50%, 0%);
    left: 870px;
    bottom: 455px;
    position: absolute;
}

.col-content .columns {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
}

.col-content .columns .left {
    width: 36em;
    margin-right: 0.5em;
}

.col-content .columns .right {
    flex: 1;
    margin-left: 0.5em;
}

.col-content .columns>div {
    display: flex;
    flex-flow: column;
}

.col-content .columns .left .startRoom {
    flex: 1;
    margin-bottom: 0em;
}

.col-content .columns .left .startRoom header {
    margin-bottom: 0.5em;
}

.col-content .columns .right .news {
    max-height: none;
}

.col-content .columns .pol {
    min-width: 9em;
    flex: 1;
    margin-right: 0.5em;
}

.col-content .columns .sante {
    min-width: 13em;
    flex: 1;
    margin-right: 0.5em;
}

.col-content .columns .blank {
    min-width: 8em;
    margin-right: 0.5em;
    flex: 1;
}

.col-content .columns .actions {
    min-width: 18em;
    margin-right: 0.5em;
    flex: 1;
}

.col-content .columns .situation {
    min-width: 10em;
    margin-right: 0.5em;
    flex: 1;
}

.col-content .columns .interactions {
    min-width: 12em;
    margin-right: 0.5em;
    flex: 1;
}

.col-content .columns .nouveautes {
    min-width: 18em;
    margin-right: 0.5em;
    flex: 1;
}

.nouveautes .title {
    color: #2094b6;
    font-weight: bold;
    font-size: medium;
}

.nouveautes .date {
    float: right;
}

.nouveautes .nouveaute-body {
    padding: 10px;
    border-radius: 10px;
}

.nouveautes .nouveaute-body hr {
    margin: 5px 0px 10px 0px;
}

.top img {
    height: auto;
    vertical-align: middle;
}

.box img {
    height: auto;
    width: auto;
    vertical-align: middle;
    max-width: 100%;
}

.box-banner {
    height: 145px;
    width: calc(100% + 2em);
    background: rgb(245, 245, 245);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    margin: -1em;
    border-radius: 7px 7px 0 0;
}

.box-banner img {
    width: 100%;
    vertical-align: middle;
}

.profile-hero .box-body {
    overflow: hidden;
}

.profile-hero .profile-avatar {
    height: 96px;
    width: 96px;
    margin: auto;
    top: 100px;
    left: calc(50% - 64px);
    position: absolute;
    overflow: hidden;
    border-radius: 50%;
    background: rgb(255, 255, 255);
    border: 3px solid white;
    box-shadow: 0px 0px 20px 3px #0000001f;
}

.profile-hero .profile-avatar img {
    height: 300px;
    position: absolute;
    top: -14px;
    left: -11px;
    max-width: none;
}

.profile-hero .actionsButton {
    position: relative;
}

.profile-hero {
    position: relative;
}

.profile-menu {
    width: 100%;
}

.profile-menu .horizontal-menu {
    height: 24px;
    display: flex;
    width: 100%;
    justify-content: space-evenly;
}

.profile-menu .horizontal-menu .tab {
    flex: 0 0 auto;
    min-width: 85px;
    height: 24px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
}

.profile-menu .horizontal-menu .tab span {
    position: relative;
    padding: 0 3px;
}

.profile-menu .horizontal-menu .tab span::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 4px;
    background: transparent;
    transition: background-color 0.3s, transform 0.3s ease;
    transform: scaleX(0);
    transform-origin: center bottom;
    border-radius: 5px;
}

.profile-menu .horizontal-menu .tab:hover span::after,
.profile-menu .horizontal-menu .tab[selected] span::after {
    transform: scaleX(1);
    background-color: #949494;
}

.profile-menu .horizontal-menu .tab[selected] span::after {
    background-color: #feb603;
}

#section-friends #friends-content {
    width: calc(100% - 14px);
    position: relative;
    gap: 10px;
    row-gap: 0px;
    flex-wrap: wrap;
    padding-left: 5px;
    margin-top: 25px;
    display: flex;
    justify-content: space-between;
}

#full-profile #section-friends .moduleProfileFriendsContainer {
    position: relative;
    height: 50px;
    border-radius: 13px;
    border: 1px solid #e4e0e0;
    background-color: #fff;
    padding: 5px;
}

.ql-editor * {
    font: revert;
}

.loader-v3 {
    width: 48px;
    height: 48px;
    border: 5px solid #a6ddf6;
    border-bottom-color: #ffffff00;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

#standalone-gallery {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 10px;
    background-color: #000000d1;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.15s ease-in-out;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: 20px;
    padding: 15px;
    overflow: auto;
}

.gallery-infos-top {
    margin-right: auto;
    padding-left: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    color: #fff;
}

.gallery-infos-bottom {
    margin-left: auto;
    padding-right: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    color: #fff;
}

.gallery img {
    width: 100%;
    display: block;
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
    transition: all 100ms ease-out;
}

.gallery img:hover {
    transform: scale(1.04);
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
}

#standalone-loader {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 10px;
    background-color: #000000d1;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease-in-out;
}

#standalone-loader #loader-text {
    color: #fff;
    padding-top: 1em;
}

#standalone-loader .loader-v3 {
    margin-right: auto;
    margin-left: auto;
}

#standalone-loader .loader-v4 {
    margin-right: auto;
    margin-left: auto;
}

.loader-v4 {
    width: 48px;
    height: 12px;
    margin-top: 40px;
    background: #fb1;
    display: inline-block;
    position: relative;
}

.loader-v4::after {
    content: '';
    left: 50%;
    top: -47px;
    transform: translate(-50%, 0);
    position: absolute;
    border: 15px solid transparent;
    border-bottom-color: #fb1;
    box-sizing: border-box;
    animation: bump 0.4s ease-in-out infinite alternate;
}

.loader-v4::before {
    content: '';
    left: 50%;
    bottom: 15px;
    transform: translate(-50%, 0);
    position: absolute;
    width: 15px;
    height: 20px;
    background: #fb1;
    box-sizing: border-box;
    animation: bump 0.4s ease-in-out infinite alternate;
}

#gallery-list {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: contents;
}

#gallery-options {
    display: inline-grid;
}

#gallery-close {
    position: absolute;
    top: 0px;
    right: 0px;
}

#gallery-options .bouton {
    margin: 30px 50px 30px 50px;
    height: 35px;
}

.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=yanone-kaffeesatz]::before {
    font-family: 'Yanone Kaffeesatz';
    font-size: 18px;
}

.comment {
    padding-bottom: 10px;
}

.comment-title {
    width: 100%;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-variant: small-caps;
    font-size: 18px;
    color: #164158;
    font-weight: bold;
    border: 1px solid #a8cee1;
    padding: 3px 10px 0px 10px;
    margin-left: 0px;
    background: #dcf8ff;
    text-align: left;
    border-radius: 10px 10px 0px 0px;
    position: relative;
}

.comment-title-right {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.comment-title>.heart {
    top: -18px;
}

.comment-title>.heart>span#likes {
    top: calc(50% - 10px);
}

.comment-body {
    padding: 12px 15px;
    border: 1px solid #d9d9d9;
    border-radius: 0px 0px 5px 5px;
    border-top: none;
}

.comment-title a {
    cursor: pointer;
}

.comment-date {
    color: #737373;
    font-weight: normal;
    padding-left: 5px;
}

#editor .ql-editor {
    overflow: auto;
    min-height: 220px;
    max-height: 600px;
}

#inventories {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 50;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hover-text {
    display: none;
    position: absolute;
    left: 0; 
    top: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 5px;
    color: white;
    font-size: 0.9em;
    white-space: normal;
    pointer-events: none;
    padding: 8px 12px;
    z-index: 100000;
    opacity: 0;
    transition: opacity 0.3s ease;
    text-align: left;
    max-width: 400px;
    width: auto; 
}

.hover-text img, .hover-text video, .hover-text table {
    max-width: 100%;
    height: auto;
}

#number {
    top: -10px;
    left: -10px;
    display: block;
    background: #fbfbfb;
    border: 2px #dcdcdc solid;
    border-radius: 50px;
    width: 28px;
    height: 28px;
    position: absolute;
    font-size: large;
    font-family: 'Yanone Kaffeesatz';
    font-weight: bolder;
    color: #787878;
}

.context-menu {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    background-color: #ffffff;
    border-radius: 5px;
    color: #363636;
    font-size: 0.85em; /* Réduit la taille de la police */
    white-space: nowrap; /* Garde le texte sur une seule ligne */
    z-index: 100000;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    text-align: left;
    max-width: 250px; /* Réduit la largeur maximale */
    width: auto;
    border: solid 1px #d4d4d4;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Réduit l'ombre */
    transform: translate(-10px, -10px) scale(0.95);
}

.context-menu.show {
    display: block;
    opacity: 1;
    transform: translate(0) scale(1);
    transition: opacity 0.15s ease, transform 0.15s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.context-menu-item {
    padding: 10px 10px; /* Réduit le padding des éléments */
    border-radius: 3px; /* Réduit les coins arrondis */
    transition: background-color 0.2s ease, color 0.2s ease;
    cursor: pointer;
    list-style: none; /* Enlève le point de liste */
    margin-bottom: 0px;
}

.context-menu-item:hover {
    background-color: #ececec;
    color: #000;
}

/* Supprime les puces de la liste */
.context-menu ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.mailbox .container {
    overflow: visible;
}

.letter {
    width: 100%;
    border: 1px solid #ddd0c2;
    padding: 10px;
    background: #fffdf5;
    border-radius: 10px;
    cursor: pointer;
    transition: transform .2s ease-in-out;
    margin-bottom: 5px;
}

.letter:hover {
    transform: translate(10px, 0px);
}

.letter-sender {
    font-family: 'Yanone Kaffeesatz';
    font-size: 20px;
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}

.letter-text {
    text-align: left;
}

.letter-top {
    display: inline-flex;
    width: 100%;
    justify-content: space-between;
}

.letter-card-unread {
    width: 32px;
    height: 28px;
    background-image: url(/assets/img/icons/envelop_card_unread.png);
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    /* box-shadow: rgb(149 157 165 / 20%) 0px 0px 5px; */
    filter: drop-shadow(0px 0px 3px rgb(149 157 165 / 20%));
}

.letter-card-read {
    width: 32px;
    height: 28px;
    background-image: url(/assets/img/icons/envelop_card_read.png);
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    filter: drop-shadow(0px 0px 3px rgb(149 157 165 / 20%));
}

.letter-unread {
    width: 32px;
    height: 28px;
    background-image: url(/assets/img/icons/envelop_unread.png);
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    /* box-shadow: rgb(149 157 165 / 20%) 0px 0px 5px; */
    filter: drop-shadow(0px 0px 3px rgb(149 157 165 / 20%));
}

.letter-read {
    width: 32px;
    height: 28px;
    background-image: url(/assets/img/icons/envelop_read.png);
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    filter: drop-shadow(0px 0px 3px rgb(149 157 165 / 20%));
}

.letters {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.53);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    overflow: hidden;
}

.letter-container {
    width: 80%;
    max-width: 600px; /* Correspond à la largeur d'une feuille A4 approximative */
    max-height: 90vh;
    overflow-y: auto;
    background: white;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    border-radius: 5px;
}

.letter-full {
    margin-bottom: 20px; /* Espacement entre les lettres */
}

.type-a4 {
    min-height: 1123px; /* Hauteur approximative d'une feuille A4 en pixels */
    width: 100%;
    background-color: #fff; /* Pour s'assurer que la lettre est bien visible */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    overflow-y: auto;
    padding: 20px;
}

#letter-character {
    cursor: pointer;
}

.letter-content {
    /* overflow: auto; */
    /* max-height: 80vh; */
    padding: 5px;
}

.lettermail {
    background: #fff;
    text-align: left;
    padding: 30px;
    box-shadow: 0 0 1em rgba(0, 0, 0, 0.05), 0 0.2em 0.3em rgba(0, 0, 0, 0.05), 0 0 0.2em inset rgba(255, 255, 255, 0.5);
    font-size: 14px;
}

.lettermail-footer {
    color: #ababab;
    padding-top: 3px;
    font-size: 12px;
}

/* Stylisation du conteneur de l'inventaire */
.inventory {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); /* Crée un nombre flexible de colonnes */
    gap: 10px; /* Espacement entre les items */
    padding: 10px;
    overflow-y: auto; /* Active le défilement vertical si nécessaire */
    max-height: 80vh; /* 80% de la hauteur de la fenêtre de visualisation */
}

/* Stylisation de chaque slot de l'inventaire */
.item {
    position: relative;
    width: 100%;
    padding-top: 100%;
    border: 2px solid #DCDCDC;
    border-radius: 10px;
    background: #FBFBFB;
    cursor: pointer;
}

.item-empty {
    position: relative;
    width: 100%;
    padding-top: 100%;
    border: 2px solid #DCDCDC;
    border-radius: 10px;
    background: #FBFBFB;
    cursor: pointer;
}

.item-empty.fake-1 {
    background: linear-gradient(0deg, rgb(241 234 234) 0%, rgb(218 213 213) 100%);
    border: 0;
}

.item-empty.fake-2 {
    background: linear-gradient(0deg, rgb(255 255 255) 0%, rgb(206 206 206) 100%);
    border: 0;
}

/* Stylisation des images dans les slots */
.item img {
    position: absolute; /* Positionnement absolu */
    top: 50%; /* Centrage vertical */
    left: 50%; /* Centrage horizontal */
    transform: translate(-50%, -50%); /* Ajustement précis du centrage */
    max-width: 80%; /* Largeur maximale de l'image à 80% du slot */
    max-height: 80%; /* Hauteur maximale de l'image à 80% du slot */
    display: block; /* Affichage en block pour éviter des espaces indésirables */
}

.bold {
    font-weight: bold;
}

.objectifs .title {
    font-size: 1.2857em;
    margin-bottom: 20px;
}

.bounce2 {
    animation: bounce2 1s ease-out infinite;
  }
  @keyframes bounce2 {
      0%, 20%, 50%, 100% {transform: translateY(2px);}
      70%, 80% {transform: translateY(-5px);}
      90%, 95% {transform: translateY(4px);}
  }

/* Media Queries pour adapter le nombre de colonnes en fonction de la taille de l'écran */
@media (max-width: 600px) { /* Écrans petits (téléphones) */
    .inventory {
        grid-template-columns: repeat(2, 1fr); /* 2 colonnes pour les petits écrans */
    }
    .window-inventory {
        max-width: 100%;
        max-height: 100%; /* Assurer que la fenêtre ne dépasse pas l'écran */
        overflow: auto;
        position: fixed;
    }

    .draggable-window.window-profile {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        max-width: unset;
        transform: unset !important;
    }
}

@media (min-width: 601px) and (max-width: 900px) { /* Écrans moyens (tablettes) */
    .inventory {
        grid-template-columns: repeat(3, 1fr); /* 3 colonnes pour les écrans moyens */
    }
    .window-inventory {
        max-width: 100%;
        max-height: 100%;
        overflow: auto;
    }
}

@media (min-width: 901px) { /* Écrans larges */
    .inventory {
        grid-template-columns: repeat(5, 1fr); /* 5 colonnes pour les grands écrans */
    }
}

@keyframes bump {
    0% {
        transform: translate(-50%, 5px);
    }

    100% {
        transform: translate(-50%, -5px);
    }
}


@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@media (min-width: 800px) {


    .publicRooms .list {
        display: flex;
        flex-wrap: wrap;
    }

    .col-content .publicRooms .filter {
        display: block;
    }
}

@media (min-width: 800px) and (max-width: 999px) {
    .publicRooms .entry {
        width: calc(50% - 0.5em);
    }

    .publicRooms .entry:not(:nth-of-type(2n)) {
        margin-right: 1em;
    }
}

@media (max-width: 600px) {
    .moduleProfileFriendsBox {
        width: 100%;
    }
}

@media (max-width: 800px) {

    .actions .flexWrap .button,
    .flexWrap .button {
        flex: 0 1 100%;
    }

    .flexWrap.spaceBetween {
        justify-content: space-between;
    }

    .box.blue .box-body.bg1,
    .box-body.bg1 {
        background: rgb(249, 254, 255);
        background: linear-gradient(180deg, rgba(249, 254, 255, 1) 0%, rgba(229, 248, 250, 1) 100%);
    }
}

@media (max-width: 999px) {

    .pols-en-ligne .flexWrap {
        justify-content: space-around;
    }

    .col.col-180.col-menu {
        display: none;
    }

    .col.col-180.col-right {
        display: none;
    }

    .col.col-640 {
        width: 100%;
    }

    .logo-planet-stereo {
        display: none;
    }

    .messagesBox {
        display: none;
    }

    .top {
        display: none;
    }

    .top-mobile {
        display: flex;
    }

    .city-light {
        visibility: hidden;
    }

    .mobile-navigation {
        display: none;
    }

    .profile-menu .horizontal-menu {
        display: inline;
    }

    .profile-menu .horizontal-menu .tab {
        height: 32px;
    }

    .footer .mafia {
        display: none;
    }

    #section-friends #friends-content {
        justify-content: center;
    }

    .simple-dropdown .info-text {
        margin-top: 10px;
    }

    .simple-dropdown .info-text a {
        font-size: 18px;
    }
}

@media (min-width: 1200px) {
    .footer-city {
        width: 100%;
        height: 500px;
    }

    .footer-city .city {
        height: 700px;
        width: 1600px;
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0%);
        background-image: url(/assets/img/footer.svg);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
    }

    .footer-city span {
        color: #e1e1e1;
        font-family: 'Yanone Kaffeesatz';
        transform: translate(-50%, 0%);
        left: 50%;
        bottom: 65px;
        position: absolute;
    }
}

@media (min-width: 1000px) {
    .mobile-navigation {
        display: none;
    }

    .messagesBox {
        /* border: 1px solid red; */
        background: url(/assets/img/design/messagesBox.svg) no-repeat;
        width: 649px;
        height: 205px;
        position: absolute;
        top: 264px;
        right: calc(50% - 490px);
        z-index: 1;
    }

    .messagesBox #marqueeMsgGeneraux {
        margin-top: 18px;
        height: 46px;
        line-height: 40px;
        color: #29506c;
        font-size: 18px;
        overflow: hidden;
        margin-left: 10px;
        margin-right: 136px;
    }

    .city-light {
        visibility: visible;
    }

    .logo-planet-stereo {
        width: 327px;
        height: 415px;
        background-image: url(/assets/img/design/logo_planet_stereo_splitted.png);
        margin-top: 25px;
    }

    .logo-planet-stereo:before {
        content: "";
        z-index: 1;
        width: 50px;
        height: 188px;
        position: absolute;
        top: 204px;
        left: calc(50% - 550px);
        background: url(/assets/img/design/logo_planet_stereo_before.png);
        background-size: cover;
        background-position: center bottom;
    }

    .top-mobile {
        display: none;
    }

    .top {
        display: flex;
    }

    .top .setup {
        display: flex;
        align-items: center;
    }

    .top .setup .wrap {
        flex: initial;
        min-width: 16em;
    }

    .publicRooms .entry {
        width: calc(33% - 0.5em);
    }

    .publicRooms .entry:not(:nth-of-type(3n)) {
        margin-right: 1em;
    }
}