:root {
    /* --primary-color: #15c7af; */
    --primary-color: #f97b2c;
    --secondary-color: #05969d;
    --background-color: #232323;
    --sectionBg-color: #363636;
    --white: #D9D9D9;

    /* --bs-body-color: white !important; */

    /* --secondary-font: "'K2D', sans-serif"; */
}

.isMobile {
    display: none;
}
.isDesktop {
    display: block;
}

.form-select:focus {
    border-color: #86b6fe00;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13,110,253,0);
}


.lp-p1b-1 {
    display:inline-flex; 
    align-items:baseline; 
    position:relative; 
    bottom:30px; 
    justify-content:center; 
    width:100%;
}


input:focus {
    color: black;
}

.answerInput:focus {
    color: black !important;
}

#topic_post_text:focus {
    color: white !important;
}

#session_title:focus {
    color: black !important;
}

#registration_form_email:focus, #registration_form_pseudo:focus, #registration_form_plainPassword_first:focus, #registration_form_plainPassword_second:focus {
    color: black !important;
}

#group_title:focus {
    color: black !important;
}
#group_description:focus {
    color: black !important;
}
#group_nbrPlaces:hover {
    color: black !important;
}
#group_imgUrl:focus {
    color: black !important;
}


#candidature_text:focus {
    color: black !important;
}
/* .form-control:focus {
    color: white !important;
} */
#inputEmail:focus {
    color: black !important;
}
#inputPassword:focus {
    color: black !important;
}

/* #topic_post_text:focus {
    color:black !important; 
} */

#topic_title:focus {
    color:black !important; 
}

#topic_firstMsg:focus {
    color:black !important; 
}

#media_post_text:focus {
    color:black !important; 
}

#media_title {
    color:white; 
}
#media_title:focus {
    color:black !important; 
}
#media_url:focus {
    color:var(--background-color) !important; 
}

.rememberMeDiv {
    margin-bottom: 0rem!important;
    margin-top: 5px;
}

@font-face {
    font-family: 'twitch'; 
    src: url('../fonts/Twitchy.TV.otf') format('opentype'), 
         url('../fonts/Twitchy.TV.ttf') format('truetype'); 
}
.twitchWord {
    font-family: 'twitch',sans-serif;
    text-shadow: 1px 2px black;
    letter-spacing: 1px;
    line-height: 0;
    font-size: 1em;
    margin-left: 7px;

    position: relative;
    top: 1px;
}

/* span {
    font-family: 'K2D', sans-serif;
} */


.footerList {
    text-align: left;
}
.footerList li {
    transition: all 0.3s;
}
.footerList li:hover {
    text-decoration: underline;
}

/* .gamesListsEmptyMsg {
    top: 50%;
    position: relative;
    transform: translateY(-50%);
} */


header {
    /* Si désactivé: mettre sur phone.css */
}

.globalBanner, .gameHeader {
    box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
    transform: scale(0.8);
    opacity: 0;

    animation: testHeaderScaleIn 0.3s 0s ease-in-out forwards;
}
@keyframes testHeaderScaleIn {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}



.userTopicStatus {
    padding: 0px 7px;
    border-radius: 4px;
    font-weight: 700;
    color: black;
    border: 1px solid #000000ba;
}
.topicStatusValidated {
    background-color: rgb(13, 241, 135);
}
.topicStatusRefused {
    background-color: rgb(241, 13, 62);
    color: white !important;
}
.topicStatusWaiting {
    background-color: rgb(207, 241, 13);
}



#closeBurgerMobile {
    display: none;
}

.arianeArrow {
    color: var(--primary-color);
    align-self: center;
    margin: 0 10px;
}

footer {
    border-top: 1px solid var(--primary-color);
    background-color: #f97b2c17;
    /* height: 100px; */
    padding: 30px 0;
    text-align: center;
    /* Keep the footer at the bottom */
    margin-top: 30px;
}
.main {
    flex: 1;
}
body {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

/* LandingPage */
#section1 {
    opacity:1; 
    display:inline-flex;
    width:100%; 
    position:relative;
}
#lp-page1a {
    height:100vh; 
    width:70%;
}
#lp-page1b {
    height:100vh; 
    position:relative;
    width:30%;
}

/* Bootstrap  */
    .btn-primary {
        font-family: 'K2D', sans-serif;
        margin: 0px auto;
        color: var(--background-color);
        border-radius: 3px;
    } 


    .redModo {
        color: #dc2e2e;
        transition: color 0.3s;
    }
    .redModo:hover {
        color: #ffc8c8;
    }
    .deleteWord {
        transform: scale(1.5);
        margin-left: 7px;
    }

    .addCensureWordBtn {
        margin: 0px auto !important;
        padding: 8px 20px;
        position: relative;
        right: 10px;
        border-top-right-radius: 8px !important;
        border-bottom-right-radius: 8px !important;
        border-top-left-radius: 0px !important;
        border-bottom-left-radius: 0px !important;
        background-color: #dc2e2e !important;
        color: white !important;
        border: 1px solid rgba(255, 255, 255, 0.4) !important;
        /* border-left: 0px !important; */

        transition: all 0.3s;
    }
    .addCensureWordBtn:hover {
        background-color: rgb(182, 16, 55) !important;
    }

    .form-select {
        
    }
/* ************************* */

html {
    overflow-y: scroll;
    overflow-x: hidden;
}

body {
    overflow: hidden !important;
    margin: 0;
    background-color: var(--background-color);
    color: var(--white);
    font-family: 'Julius Sans One', sans-serif;

    /* margin-right: -10px; */
    position: relative; /* Set the container element to relative position */

    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer */
    user-select: none; /* Standard */

    opacity: 0;
    animation: fadeInBody 1s ease forwards;
}
@keyframes fadeInBody {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


.btnCancel {
    background-color: #b43a3a !important;
    color: white !important;
}
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #0d6dfd00;
    --bs-btn-border-color: #0d6dfd00;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0d6dfd00;
    --bs-btn-hover-border-color: #0d6dfd00;
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0d6dfd00;
    --bs-btn-active-border-color: #0d6dfd00;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #0d6dfd00;
    --bs-btn-disabled-border-color: #0d6dfd00;
}


.roleElite {
    transition: all 0.3s;
}
.roleElite:hover {
    background-color: var(--primary-color) !important;
    color: black !important;
}
.roleElite i {
    transition: all 0.3s;
}

.roleElite:hover i {
    color: black !important;
}

.planningInfos {
    text-align: center;
    width: fit-content;
    padding: 13px 35px 13px 35px;
    margin: 6px auto 25px auto;
    background-color: #0000004a;
    border: 1px solid #80808033;
    border-radius: 6px;
}

.incomingSessionsNbr {
    color: #38db25;
    font-size: 1.3em;
    font-weight: bold;
    margin-left: 11px;
}


.landingPageSlogan {
    width: max-content;
    max-width: 75%;
    text-align: center;
    position: relative;
    margin: 50px auto;
    transform: translateX(-66px);
    font-size: 1.6em;
    z-index: 10;
    padding: 20px 25px;

    background: radial-gradient(circle, rgba(247,114,31,0.2) 0%, rgba(35,35,35,0) 100%);

    opacity: 0;
    animation: fadeIn 0.5s 1.7s ease forwards;
}

.lp-p2a{
    display:inline-flex; 
    justify-content: space-between;
    width:100%; 
    height:50vh; 
    position:relative;

    /* TODO ATTENTION firefox: */
    transform: scale(0.9);
}
.lp-p2a-wrapper {
    width: 50%;
    display: inline-flex;
    flex-direction: column;
}
.lp-p2a-img {
    width: 50%;
}
.lp-p2a-content {
    text-align: center;
    position: relative;
    top: 30%;
    left: 90px;
    transform: translateY(-38%);
}

.lp-p2b {
    display:inline-flex; 
    width:100%; 
    height: 35vh;
    position:relative;

    /* TODO ATTENTION firefox: */
    transform: scale(0.9);
}


.active {
    animation: fadeIn 0.6s 0s ease forwards;
}

.quoteTxt {
    font-size: 0.8em;
    opacity: 0.7;
    margin: 0 5px 2px 5px;
}


.fc .fc-scrollgrid-section-body table, .fc .fc-scrollgrid-section-footer table {
    background-color: #0000004a;
}



.lp-phone-slpideTrait1 {
    display: none;
}
.lp-phone-slpideTrait2 {
    display: none;
}

.lp-statsDiv {
    display: inline-flex;
    width: 100%;
    justify-content: space-evenly;
    transform: translateX(-67px);
    position: relative;
    z-index: 10;
    margin: 50px auto;
}


#topRightEdgeSvgPath {
    opacity: 0.5;
    transform: scale(1);
    fill: none;
    stroke: #2c2c2c;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: miter;
    stroke-miterlimit: 4;
}
.topRightEdgeSvg {
    z-index: 999;
    height: 100px;
    width: 135px;
    position: absolute;
    right: -50px;
    top: -50px;  
    transform: translateY(-5px);

    animation: topRightEdgeSvgAnim 0.5s 1.4s ease forwards;
}
@keyframes topRightEdgeSvgAnim {
    0% {
        right: -50px;
        top: -50px;  
    }
    85% {
        right: 5px;
        top: 5px;    
    }
    100% {
        right: -1px;
        top: -1px;    
    }
}

#bottomLeftEdgeSvgPath {
    opacity: 0.5;
    transform: scale(1);
    fill: none;
    stroke: #f9822c;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: miter;
    stroke-miterlimit: 4;
}
.bottomLeftEdgeSvg {
    z-index: 999;
    opacity: 1;
    height: 91px;
    width: 141px;
    position: absolute;
    left: -50px;
    bottom: -50px;  
    /* height: -webkit-fill-available; */

    animation: bottomLeftEdgeSvgAnim 0.5s 1.4s ease forwards;
}
@keyframes bottomLeftEdgeSvgAnim {
    from {
        left: -50px;
        bottom: -50px;  
    }
    to {
        left: -6px;
        bottom: 2px;    
    }
}


.footerIconMargin {
    margin-right: 10px;
}


.footerNetworksList {
    display: inline-flex;
    margin: 25px 0 40px 0;

}
.footerNetworksList li {
    margin: 0px 14px;
    font-size: 1.5em;
    cursor: pointer;
    color: white;
    transition: all 0.2s;
}
.footerNetworksList li .fa-brands {
    cursor: pointer;
    transition: all 0.2s;
}
.footerNetworksList li :hover {
    color: var(--primary-color);
}

.lp-p3-title {
    font-family: 'K2D', sans-serif;
    margin:0 25px; 
    font-size:1.7em;
}

.lp-page3-slideContainer {
    position: relative;
}
.lp-page3-slideContainer:hover .gameSelectedBracketUpPath  {
    opacity: 1 !important;
    transform: translateY(0px);
}
.lp-page3-slideContainer:hover .gameSelectedBracketDownPath {
    opacity: 1 !important;
    transform: translateY(0px);
}

.lp-gameCardTitleSearch {
    transition: 0.3s;
}
.lp-page3-slideContainer:hover .lp-gameCardTitleSearch {
    top: 108%;
}
.lp-page3-slideContainer:hover .lp-gameCardTitle {
    top: 108%;
}

.lp-gameCardTitle-games {
    transition: all 0.3s;
}
.lp-page3-slideContainer:hover .lp-gameCardTitle-games {
    margin-top: 13px;
}

.lp-page3-slideContainer:hover .lp-gameCardAddFavTitle {
    top: 8% !important;
}


.containerDiv {
    display:inline-flex; 
    width:100%; 
    margin-top:45px;
}

#inputPassword:focus ~ #togglePassword {
    color: black !important;
}
#registration_form_plainPassword_first:focus + #togglePassword {
    color: black !important;
}

#inputPassword {
    padding-right: 40px;

}

.showPasswordBtn {

}



.passwordFloatingBublle {
    position: absolute;
    background-color: var(--background-color);
    /* backdrop-filter: blur(5px); */
    padding: 3px 10px;
    border-radius: 7px;
    border: 1px solid #ffffff78;
    transition: all 0.3s;

    z-index: -99;
    opacity: 0;
}
.showFloatingBuble {
    z-index: 99;
    opacity: 1;
}

#togglePassword {
    color: rgb(183 183 183);
    cursor: pointer;
    position: absolute;
    top: 11px;
    right: 11px;
    font-size: 0.9em;
}
.togglePasswordRegister {
    top: 35px !important;
}
.togglePasswordProfil {
    top: 12px !important;
}

.profilIcon {
    color: var(--primary-color);
    margin-right: 3px;
}


.addFavContainer {
    background-color: #2323239e;
    padding-bottom: 30px !important;
    padding-top: 10px !important;
    margin-top: 15px;
    margin-bottom: 0px !important;
    border-radius: 7px;
}

.headerFixed {
    transition: all 0.4s;
    /* min-height: 40px; */
    position: fixed !important;
    width: 100%;
    z-index: 9999;
    border-bottom: 5px solid var(--primary-color);

    /* background-position: 25% 55% !important; */
}

#logoShrinkTxt {
    display: none;
    opacity: 0;
    transition: all 0.3s;

    z-index: 9999;
    position: relative;
    font-size: 1.25em;
    top: 3px;
    left: 12px;
    color: white;
}

.gameSelectedBracketUp {
    /* z-index: 999; */
    opacity: 1;
    height: 91px;
    width: 300px;
    position: absolute;
    left: -52px;
    top: -60px; 
}
.gameSelectedBracketUpPath {
    opacity: 0;
    transform: scale(1);
    fill: none;
    stroke: #f9822c;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: miter;
    stroke-miterlimit: 4;

    transform: translateY(-7px);
    transition: all 0.3s;
}

.gameSelectedBracketDown {
    z-index: -999;
    opacity: 1;
    height: 91px;
    width: 300px;
    position: absolute;
    left: -19px;
    bottom: -61px;
    transform: rotate(180deg);
}

.gameSelectedBracketDownPath {
    opacity: 0;
    transform: scale(1);
    fill: none;
    stroke: #f9822c;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: miter;
    stroke-miterlimit: 4;

    transform: translateY(-7px);
    transition: all 0.3s;
}


.gameSelectedBracketUp-games {
    transform: scale(0.8);
    /* z-index: 999; */
    opacity: 1;
    height: 91px;
    width: 300px;
    position: absolute;
    left: -52px;
    top: -56px;
}
.gameSelectedBracketDown-games {
    transform: rotate(180deg) scale(0.8);
    z-index: -999;
    opacity: 1;
    height: 91px;
    width: 300px;
    position: absolute;
    left: -60px;
    bottom: -56px;
}

.centeredLogo {
    position: relative;
    width: fit-content;
    display: flex;
    margin: 0 auto;
    justify-content: center;
    transform: translateX(-69px);
    z-index: 99;
    margin-top: 25px;

    opacity: 0;
    animation: fadeInCenteredLogo 0.5s 1.5s ease forwards;
}
@keyframes fadeInCenteredLogo {
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}


.twitchLogoSvgContainer {
    position: relative;
    transform: translateX(-70px);
    width: 50%;

    background: radial-gradient(circle, rgba(145,70,255,0.4) 0%, rgba(35,35,35,0) 70%);
}

.twitchSvg1 {
    z-index: 90;
    height: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#twitchSvgPath1 {
    opacity: 1;
    transform: scale(1);
    fill: none;
    stroke: #000000;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: miter;
    stroke-miterlimit: 4;
}
.twitchSvg2 {
    z-index: 100;
    height: 300px;
    position: absolute;
    top: 58%;
    left: 56%;
    transform: translate(-50%, -50%);
}
#twitchSvgPath2 {
    opacity: 1;
    transform: scale(0.75);
    fill: #ffffff;
    fill-opacity: 1;
    stroke: #000000ab;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: miter;
    stroke-miterlimit: 4;
}

.twitchSvg1 #twitchSvgPath1 {
    fill: #9146FF; 
    animation: fillAnimation 2s forwards 1;
}
/* .twitchSvg2 #twitchSvgPath2 {
    fill: #f2beff; 
    animation: fillAnimation 2s forwards 1; 
} */
@keyframes fillAnimation {
    0% {
      fill-opacity: 0; 
    }
    100% {
      fill-opacity: 1;
    }
}


#logoTwitchEye1 {
    position: absolute;
    top: 46%;
    left: 48%;
    transform: translate(-50%, -50%);
    border: 1px solid #00000091;

    z-index: 999;
    height: 60px;
    width: 20px;
    background-color: #9146FF;
    box-shadow: 0 0 20px 7px #9046ff3d;
    border-radius: 3px;

    animation: clignementLogoTwitch 4s forwards ease infinite;
}
#logoTwitchEye2 {
    position: absolute;
    top: 46%;
    left: 55%;
    transform: translate(-50%, -50%);
    border: 1px solid #00000091;

    z-index: 999;
    height: 60px;
    width: 20px;
    background-color: #9146FF;
    box-shadow: 0 0 20px 7px #9046ff3d;
    border-radius: 3px;

    animation: clignementLogoTwitch 4s forwards ease infinite;
}
@keyframes clignementLogoTwitch {
    0% {
        height: 60px;
        width: 20px;
    }
    48% {
        height: 60px;
        width: 20px;
    }
    50% {
        height: 2px;
        width: 30px;
    }
    53% {
        height: 60px;
        width: 20px;
    }
    100% {
        height: 60px;
        width: 20px;
    }
}


dialog::backdrop {
    transition: all 0.3s;
    backdrop-filter: blur(5px) brightness(0.7);
}

.centeredLogoImg {
    width: 260px !important;
}


.editDescriptionTeam {
    position: absolute;
    right: -48px;
    bottom: 5px;
    font-size: 1.3em;

    transition: all 0.3s;
}

.editDescriptionTeam:hover {
    cursor: pointer;
    color: #494949;
}

.editCandidatureOfferTxt {
    position: relative;
    margin-left: 12px;
    bottom: 0px;
    font-size: 1.3em;
    color: #edb01790;
    transition: all 0.3s;
}
.editCandidatureOfferTxt:hover {
    cursor: pointer;
    color: #edb017;
}

.requiredQuestionLabel {
    border-left: 1px solid #80808040;
    padding-left: 10px;
    margin-left: 10px;
}

.editNbrPlacesTeam {
    position: absolute;
    right: 13px;
    bottom: 0px;
    font-size: 1.3em;
    color: #edb01790;
    transition: all 0.3s;
}
.editNbrPlacesTeam:hover {
    cursor: pointer;
    color: #edb017;
}

.groupHeader {
    padding: 10px 10px 5px 10px;
    border-radius: 7px;
    display: inline-flex;
    width: 100%;
}
.groupHeaderMini {
    background-image: linear-gradient(to right, rgb(212 175 97), rgb(212 175 97 / 93%), rgb(35 35 35 / 77%), rgba(16, 16, 16, 0.97)), url('../img/testMotif2.jpg') !important;
    background-size: cover !important;
}


.teamCard-crownLeader {
    position: absolute;
    right: -14px;
    top: -35px;
    z-index: 9992;
    font-size: 2.2em;
    color: #edb017;
    transform: rotate(23deg);
    text-shadow: 0 0 black;
    transition: all 0.3s;
}

.crownLeaderTeams {

    position: absolute;
    right: -14px;
    z-index: 9992;
    font-size: 2.2em;
    color: #edb017;
    transform: rotate(23deg);
    text-shadow: 0 0 black;
    transition: all 0.3s;

    top: -27px;
}


.crownLeaderTeams:has( + .teamCard:hover) {
    right: -31px;
    top: -35px;
    transform: rotate(31deg) rotateY(180deg);
}

.teamCard-crownLeader:has( + .teamCard:hover) {
    right: -31px;
    top: -44px;
    transform: rotate(31deg) rotateY(180deg);
}


.teamCard-members {
    position: absolute;
    bottom: 2px;
    left: 8px;
}


.teamImg {
    /* BIEN */
    /* min-width: 100%;
    max-width: 100%;
    max-height: 400px;
    width: 100%;
    background-size: cover;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 6px;
    filter: drop-shadow(-13px 10px 7px black) grayscale(0); */

    min-width: 100%; 
    max-width: 100%;
    max-height: 528px;
    /* width: 100%; */
    background-size: contain;
    background-position: center;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 6px;
    filter: drop-shadow(-13px 10px 7px black) grayscale(0);
}

.hoverTeamImg {
    cursor: pointer;
    transition: all 0.3s;
}
.hoverTeamImg:hover {
    opacity: 0.8;
    filter: drop-shadow(-13px 10px 7px black) grayscale(0) sepia(1);
}
.teamImgContainerHover:hover .editTeamImgIcon {
    opacity: 1;
}

.editTeamImgIcon {
    opacity: 0;
    position: absolute;
    right: 9px;
    top: -4px;
    font-size: 2em;
    color: #edb01790;
    transition: all 0.3s;
}



.teamImgContainer {
    width:40%;
    opacity: 0;
    transform: perspective(30px) rotateY(328deg) translateX(35px);

    animation: perspectiveImg 0.75s 0.1s ease 1 forwards;
}
@keyframes perspectiveImg {
    from {
        opacity: 0;
        transform: perspective(150px) rotateY(328deg) translateX(35px);
    }
    to {
        opacity: 1;
        transform: perspective(1453px) rotateY(328deg) translateX(35px);
    }
}


ul {
    list-style-type: none;
    padding-inline-start: 0;
}
ul li {
    list-style-type: none;
    padding-inline-start: 0;
}
a {
    text-decoration: none;
    color: inherit;
}

.marginTop {
    margin-top: 30px;
}
.listMarginTop {
    margin-top: 30px !important;
}
.marginBottom {
    margin-bottom: 20px;
}

.underlineLink {
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: all 0.3s;
}
.underlineLink:hover {
    color: var(--primary-color);
    text-underline-offset: 5px;
    text-decoration-thickness: 3px;
}
.breadcrumbs {
    font-size: 1.1em;
    font-family: 'K2D', sans-serif;
    margin-bottom: 20px;

    width: fit-content;
    padding: 3px 10px;
    background-color: #8080801f;
    border-radius: 5px;

    flex-flow: wrap;

}

header {
    /* position: relative;
    background-color: var(--primary-color); */
}
.gameHeader, .globalBanner, .globalBannerLandingPage {
    background-size: cover !important;
    background-position: center !important;
    position: relative;
    overflow: hidden;
}

.globalBanner, .gameHeader {
    overflow: visible !important;
}
.gameHeader img {
    
}
.gameHeader:before, .globalBanner:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%); */

    /* background: rgb(255,255,255);
    background: -moz-radial-gradient(circle, rgba(255,255,255,0.09615384615384615) 0%, rgba(35,35,35,0.9182692307692307) 70%);
    background: -webkit-radial-gradient(circle, rgba(255,255,255,0.09615384615384615) 0%, rgba(35,35,35,0.9182692307692307) 70%);
    background: radial-gradient(circle, rgba(255,255,255,0.09615384615384615) 0%, rgba(35,35,35,0.9182692307692307) 70%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#232323",GradientType=1); */

    background: radial-gradient(circle, rgb(0 0 0 / 12%) 0%, rgba(35,35,35,0.9082692307692307) 70%);

    z-index: 1;
}

.globalBannerLandingPage:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%); */

    background: rgba(35, 35, 35, 0.89);

    z-index: 1;

    animation: backgroundOpacityCalqueAnim 7s 1s linear infinite;
}

@keyframes backgroundOpacityCalqueAnim {
    0% {
        background: rgba(35, 35, 35, 0.89);
    }
    10% {
        background: rgba(35, 35, 35, 0.89);
        filter: invert(0);
    }
    11% {
        background: rgba(35, 35, 35, 0.1);
        filter: invert(1);
    }
    12% {
        background: rgba(35, 35, 35, 0.89);
        filter: invert(0);
    }
    13% {
        background: rgba(35, 35, 35, 0.1);
    }
    20% {
        background: rgba(35, 35, 35, 0.89);
    }
    37% {
        background: rgba(35, 35, 35, 0.89);
    }
    50% {
        background: rgba(35, 35, 35, 0.89);
    }
    62% {
        background: rgba(35, 35, 35, 0.89);
    }
    75% {
        background: rgba(35, 35, 35, 0.89);
    }
    87% {
        background: rgba(35, 35, 35, 0.89);
    }
    100% {
        background: rgba(35, 35, 35, 0.89);
    }
}

.lightning {

}


#tarteaucitronManager {
    transition: all 0.3s;
    animation: cookieAnim 8s 0s ease-in-out forwards infinite;
}
@keyframes cookieAnim {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(10deg);
    }
    50% {
        transform: rotate(0deg);
    }
    75% {
        transform: rotate(10deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

#tarteaucitronManager img {
    transition: all 0.3s;
}
#tarteaucitronManager:hover img {
    transform: scale(1.25);
}

#lp-page1a {
    opacity: 0;
    animation: lp-page1a-fadeIn 0.7s 1.2s ease forwards;
}
@keyframes lp-page1a-fadeIn {
    from {
        opacity: 0;
    }   
    to {
        opacity: 1;
    }
}



/* /!\  Durée anim = setTimeOut JS  */
.lp-gameHeader-fadeOut {
    animation: lp-gameHeader-fadeOut 0.5s 0s ease forwards;
}
@keyframes lp-gameHeader-fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
.lp-gameHeader-fadeIn {
    animation: lp-gameHeader-fadeIn 0.4s 0.3s ease forwards;
}
@keyframes lp-gameHeader-fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


.landingPageDownBtn {
    font-family: 'K2D', sans-serif;
    cursor: pointer;
    position: absolute;
    padding: 26px 28px;
    bottom: 0;
    right: 50%;
    display: inline-flex;
    flex-direction: column;
    transform: translate(50%, 0);
    font-size: 1.9em;
    z-index: 1001;
    /* transform: scaleX(1.3);  */
    transition: all 0.3s;
}

.landingPageDownBtn:hover {
    color:white;
}



#lp-scrollBtn {
    opacity: 0;
    animation: fadeIn 0.5s 2.3s ease forwards;
}


.landingPageUpBtn {
    position: absolute;
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    bottom: 5%;
    left: 50%;
    font-size: 2em;
    z-index: 10;
    align-self: center;
    transform: scale(1.3) translate(-50%, 5%);
    transition: all 0.3s;
}

.landingPageUpBtn:hover {
    transform: scale(1.5) translate(-45%, 8%); 
}

.lp-page4-titleDivWrapper {transition: all 0.3s;}
#lp-page4-titleDivWrapper {transition: all 0.3s;}
.lp-page4-titleDivWrapper:hover {
    filter: sepia(0.05);
    background-color: rgba(221, 221, 221, 0.1);
    letter-spacing: 1px;
}


.lp-filterBtn {
    cursor: pointer;
    border: 1px solid rgb(163, 163, 163);
    border-radius: 2px;
    margin: 0 2px;
    padding: 3px 6px;
    background-color: rgba(128, 128, 128, 0.2);

    transition: all 0.3s;
}
.lp-filterBtn:hover {
    opacity: 0.8;
}

/* .lp-leftSection {
    position: absolute;
    bottom: 30%;
    left: 22%;
    transform: translate(-22%, -30%);
    z-index: 10;
    font-size: 1.6em;
    display: inline-flex;
    flex-direction: column;
} */
.lp-leftSection {
    position: relative;
    z-index: 10;
    font-size: 1.5em;

    opacity: 0;
    animation: fadeIn 0.5s 1.9s ease forwards;
}

/* .lp-teamsCountLine {
    position: absolute;
    bottom: 30%;
    right: 22%;
    transform: translate(22%, -30%);
    z-index: 10;
    font-size: 1.6em;
} */
.lp-teamsCountLine {
    position: relative;
    z-index: 10;
    font-size: 1.5em;

    opacity: 0;
    animation: fadeIn 0.5s 1.9s ease forwards;
}

.lp-usersCountLabel {
    color:var(--primary-color);
    margin-right: 10px;
}
.lp-teamsCountLabel {
    color:var(--secondary-color);
    margin-right: 10px;
}

.lp-count {
    text-align: center;
    font-weight: bold;
    font-size: 1.1em;
    float: right;
    min-width: 26px;
}

#lp-loginBtn {
    padding: 10px 20px;
    transition: all 0.2s;

    /* position: relative;
    bottom: 28px; */
}
#lp-loginBtn:hover {
    letter-spacing: 2px;
}
#lp-loginTwitchBtn {
    color: black;
    text-shadow: 1px 4px #9146FF;
    padding: 10px 20px;
    transition: all 0.2s;
}
#lp-loginTwitchBtn:hover {
    letter-spacing: 3px;
}


#lp-registerBtn {
    background-color: var(--secondary-color);
    padding: 20px 100px;
    clip-path: polygon(3% 0, 100% 0, 100% 100%, 0% 100%);
    transition: all 0.2s;

}
#lp-registerBtn:hover {
    color: white;
    letter-spacing: 2px;
    background-color: #06b0b9;
}

#lp-registerFormBtn {
    background-color: var(--secondary-color);
    margin:30px auto; 
    width:100%; 
    clip-path:polygon(0% 0, 100% 0, 100% 100%, 0% 100%); 
    padding:10px 45px; 
    font-size:1.2em;
    transition: all 0.2s;
}
#lp-registerFormBtn:hover {
    letter-spacing: 1px;
    background-color: #06b0b9;
}

.lpdownBtn1 {
    color: rgba(255, 255, 255, 0.7);
    animation: brightChevron 1.4s 0s linear infinite;
}
.lpdownBtn2 {
    color: rgba(255, 255, 255, 0.7);
    animation: brightChevron 1.4s 0.3s linear infinite;
}
@keyframes brightChevron {
    0% {
        color: rgba(255, 255, 255, 0.7);
    }
    25% {
        color: rgba(255, 255, 255, 0.25);
    }
    75% {
        color: rgba(255, 255, 255, 0.25);
    }
    to{
        color: rgba(255, 255, 255, 0.7);
    }
}

.lpdownBtn1inversed {
    color: rgba(255, 255, 255, 0.7);
    animation: brightChevronInversed 1.4s 0.3s linear infinite;
}
.lpdownBtn2inversed {
    color: rgba(255, 255, 255, 0.7);
    animation: brightChevronInversed 1.4s 0s linear infinite;
}
@keyframes brightChevronInversed {
    0% {
        color: rgba(255, 255, 255, 0.7);
    }
    25% {
        color: rgba(255, 255, 255, 0.25);
    }
    75% {
        color: rgba(255, 255, 255, 0.25);
    }
    to{
        color: rgba(255, 255, 255, 0.7);
    }
}

.lp-p2-leftSectionImg {
    width:102%;
    position: relative;
    z-index: 999;
    overflow: visible;
    bottom: 85px;
    filter: drop-shadow(2px 4px 6px var(--primary-color));
    position: relative;
    z-index: 999;
    transform: rotate3d(1, 1, 1, 240deg);
    animation: mockupFadeIn 1.5s 0.4s ease forwards, dropShadowMockup 3s ease infinite;
    -webkit-filter: drop-shadow(2px 4px 6px var(--primary-color));
    -webkit-animation: mockupFadeIn 1.5s 0.2s ease forwards, dropShadowMockup 3s ease infinite;
}
@keyframes mockupFadeIn { 
    from {
        transform: rotate3d(1, 1, 1, 240deg);
    }
    to {
        transform: rotate3d(1, 1, 1, 320deg) translateY(-60px);
    }
}
@keyframes dropShadowMockup {
    0% {
        filter: drop-shadow(2px 4px 6px var(--primary-color));
}
    45% {
        filter: drop-shadow(2px 4px 6px rgba(247, 120, 41, 0.5));
}
    55% {
        filter: drop-shadow(2px 4px 6px rgba(247, 120, 41, 0.5));
    }
    100% {
        filter: drop-shadow(2px 4px 6px var(--primary-color));
    }
}

.gameBracketUp {

}
.gameBracketDown {
    
}

.twitchPresentation {
    font-family: 'K2D', sans-serif;
    font-size: 1.4em;
    width: 60%;
    margin: 50px auto;
}
.twitchLoginBtn {
    padding: 22px 37px 19px 37px;
    background-color: #9146FF;
    border-radius: 4px;
    color: white;
    font-size: 1.15em;
    transition: all 0.4s;
    -webkit-border-radius: 4px;

}
.twitchLoginBtn:hover {
    background-color: #b786ff;
}

#loginFormTitle {
    position:relative; 
    text-align:center; 
    bottom:10px;
}


.lp-p2-leftSection {
    position:absolute; 
    width:60%; 
    height:100%; 
    height:inherit;
}

#lp-phone-line {
    display: none;
}


.lp-page3-containerMaster {
    position:relative; 
    margin-top:20px;

    height: auto;
    transition: all 0.3s;
}


#lp-p1-topLeftSquare {
    position: absolute;
    width: 500px;
    height: 752px;

    /* background-color: var(--primary-color); */
    /* background: linear-gradient(270deg, rgba(249,164,44,1) 0%, rgba(249,123,44,1) 100%);
    background: -webkit-linear-gradient(270deg, rgba(249,164,44,1) 0%, rgba(249,123,44,1) 100%); */
    /* background-image: -webkit-linear-gradient(270deg, rgba(249,164,44,1) 0%, rgba(249,123,44,0.5) 100%), url('../img/testMotif2.jpg'); */
    background-image: -webkit-linear-gradient(270deg, rgba(249,164,44,1) 0%, rgba(249,123,44,0.95) 100%), url('../img/testMotif2.jpg');

    background-size: cover;

    z-index: 999;
    transform: rotate(36deg);
    left: -359px;
    top:-900px;

    animation: squareAnim 1s 0.5s ease forwards, squareAnim-phase2 8s 1.6s ease-in-out infinite;
}

@keyframes squareAnim {
    from {
        top:-900px;
    }
    to {
        top: -400px;
    }
}


.addFavIconWrapper {
    width: 100%;
    height: 100%;
    overflow: visible;
    position: relative;


}


.lp-p1-rightSection {
    height:100%; 
    height:inherit; 
    color:black;
    clip-path: polygon(0% 0, 100% 0, 100% 100%, 0% 100%);
    width:140%; 
    z-index:10;

    position: absolute;
    right: -1000px;

    /* background: -moz-linear-gradient(270deg, rgba(249,164,44,1) 0%, rgba(249,123,44,1) 100%);
    background: linear-gradient(270deg, rgba(249,164,44,1) 0%, rgba(249,123,44,1) 100%);
    background: -webkit-linear-gradient(270deg, rgba(249,164,44,1) 0%, rgba(249,123,44,1) 100%); */
    background-size: cover;
    /* background-image: -webkit-linear-gradient(270deg, rgba(249,164,44,0.9) 0%, rgba(249,123,44,0.6) 100%), url('../img/testMotif1.jpg'); */
    /* background-image: -webkit-linear-gradient(270deg, rgba(249,164,44,0.9) 0%, rgba(249,123,44,0.2) 100%), url('../img/testMotif2.jpg'); */
    background-image: -webkit-linear-gradient(270deg, rgba(249,164,44,0.995) 0%, rgba(249,123,44,0.95) 100%), url('../img/testMotif2.jpg');

    animation: lp-p1-rightSectionAnim 1s 0.6s ease forwards, lp-p1-rightSectionAnim-phase2 8s 1.6s ease-in-out infinite;
}
@keyframes lp-p1-rightSectionAnim {
    from {
        right: -1000px;
        clip-path: polygon(0% 0, 100% 0, 100% 100%, 0% 100%);
    }
    to {
        right: 0;
        clip-path: polygon(19% 0, 100% 0, 100% 100%, 0% 100%);
    }
}

/* @keyframes lp-p1-rightSectionAnim-phase2 {
    0% {
        clip-path: polygon(19% 0, 100% 0, 100% 100%, 0% 100%);
    }
    50% {
        clip-path: polygon(21% 0, 100% 0, 100% 100%, 5% 100%);
    }
    100% {
        clip-path: polygon(19% 0, 100% 0, 100% 100%, 0% 100%);

    }
} */



.lp-p2-rightSection {
    height:100%; 
    height:inherit; 
    color:black;
    clip-path: polygon(0% 0, 100% 0, 100% 100%, 0% 100%);
    width:54%; 
    z-index:10;

    position: absolute;
    right: -1000px;

    border-top-right-radius: 20px;
    /* border-bottom-right-radius: 7px; */

    background: -moz-linear-gradient(270deg, rgba(249,164,44,1) 0%, rgba(249,123,44,1) 100%);
    background: linear-gradient(270deg, rgba(249,164,44,1) 0%, rgba(249,123,44,1) 100%);
    /* background: -webkit-linear-gradient(270deg, rgba(249,164,44,1) 0%, rgba(249,123,44,1) 100%); */

    background-image: -webkit-linear-gradient(270deg, rgba(249,164,44,0.995) 0%, rgba(249,123,44,0.95) 100%), url(../img/testMotif2.jpg);
    background-size: cover;

    animation: lp-p2-rightSectionAnim 1s 0.6s ease forwards;
}
@keyframes lp-p2-rightSectionAnim {
    from {
        right: -1000px;
        clip-path: polygon(0% 0, 100% 0, 100% 100%, 0% 100%);
    }
    to {
        right: 120px;
        clip-path: polygon(19% 0, 100% 0, 100% 100%, 0% 100%);
    }
}


.registerTextDiv {
    text-align: center;
    font-size: 1.08em;
    margin-block-end: 0;
    background-image: -webkit-linear-gradient(270deg, rgba(249,164,44,0.995) 0%, rgba(249,123,44,0.95) 100%), url(../img/testMotif2.jpg);
    background-size: cover;
    padding: 15px;
    border-radius: 7px;
    color: black;
}



/* .lp-p2-rightSection {
    height:100%; 
    height:inherit; 
    color:black;
    clip-path: polygon(0% 0, 100% 0, 100% 100%, 0% 100%);
    width:60%; 
    z-index:10;

    position: absolute;
    right: -600px;

    background: -moz-linear-gradient(270deg, rgba(249,164,44,1) 0%, rgba(249,123,44,1) 100%);
    background: linear-gradient(270deg, rgba(249,164,44,1) 0%, rgba(249,123,44,1) 100%);
    background: -webkit-linear-gradient(270deg, rgba(249,164,44,1) 0%, rgba(249,123,44,1) 100%);

    animation: lp-p2-rightSectionAnim 1s 0.6s ease forwards, lp-p2-rightSectionAnim-phase2 10s 1.6s ease infinite;
} */

#orSpan {
    margin-right:30px; 
    font-size:2em; 
    line-height:0;
    opacity: 0.7;
    font-style: italic;
    position: relative;
    top: 3px;
}

#cleanSearchBtn {
    display: none;
    opacity: 0.3;
    cursor: pointer;
    font-size: 1.8em;
    padding: 0 10px;
    position: relative;
    top: 5px;
}

.searchLine {
    border-left: 5px solid;
    margin: 5px auto;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;

    transition: all 0.3s;
    animation: fadeIn 0.4s ease forwards;
}
.searchLine:hover {
    border-left: 10px solid;
}

#searchResultsDiv {
    position: relative;
    flex-direction: column;
    background-color: #00000059;
    backdrop-filter: blur(24px);
    width: 90%;
    top: 300px;
    border-radius: 10px;
    opacity: 0;

    border: 1px solid grey;

    animation: slideSearchResultDiv 0.8s ease forwards;
}
@keyframes slideSearchResultDiv {
    from {
        opacity: 0;
        top: 300px;
    }
    to {
        opacity: 1;
        top: 0px;
    }
}

.lp-searchResultList {
    font-family: 'K2D', sans-serif;
    margin-top: 20px;
}


.lp-searchResultDiv {
    transition: all 0.3s;

    width: 300px;
}

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


.lp-p1b-rightSectionTitle {
    text-align: center;
    font-family: 'K2D', sans-serif;
    display: block;
    position: relative;
    font-size: 1.5em;
    max-width: 50%;
    margin: 0 auto;
    transform: translateX(34px);
}

.lp-p1b-rightSectionLoginDiv {
    position: relative;
    margin: 0 auto;
    width: 65%;
    font-weight: bold;
    font-size: 1.5em;
    transform: translateX(34px);

    text-align: center;
}

.lp-p1b-div {
    position: relative;
    top: 50%;
    width: 100%;
    gap: 100px;
    display: inline-flex;
    flex-direction: column;
    transform: translateY(-50%);

    opacity: 0;
    animation: fadeIn 0.3s 1.2s ease forwards;
}

#lp-login {
    width: 50%;
    margin: 0 auto;
    transform: translateX(51px);
}


.txtShape-wrapper {
    height: 300px;
    position: relative;
    width: 300px;
}
.text {
    color: white;
    position: relative;
    margin: 0;
    background: radial-gradient(
      ellipse at center,
      rgba(0, 128, 172, 1) 0%,
      rgba(0, 128, 172, 1) 70%,
      rgba(0, 128, 172, 0) 70.3%
    );
    height: 100%;
    width: 100%;
  }
  .text p {
    font-size: 21px;
    font-style: italic;
    height: 100%;
    line-height: 1.25;
    padding: 0;
    text-align: center;
    text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.3);
  }

  .text::before {
    content: "";
    float: left;
    height: 100%;
    width: 50%;
    shape-outside: polygon(
      0 0,
      98% 0,
      50% 6%,
      23.4% 17.3%,
      6% 32.6%,
      0 50%,
      6% 65.6%,
      23.4% 82.7%,
      50% 94%,
      98% 100%,
      0 100%
    );
    shape-margin: 7%;
  }

  .text p::before {
    content: "";
    float: right;
    height: 100%;
    width: 50%;
    shape-outside: polygon(
      2% 0%,
      100% 0%,
      100% 100%,
      2% 100%,
      50% 94%,
      76.6% 82.7%,
      94% 65.6%,
      100% 50%,
      94% 32.6%,
      76.6% 17.3%,
      50% 6%
      );
    shape-margin: 7%;
  }


.lp-p2-rightSectionTitle {
    font-family: 'K2D', sans-serif;
    text-align: center;
    display: block;
    position: relative;
    top: 40%;
    transform: translate(66px, -40%);
    margin: 0 auto;
    width: 55%;
    font-size: 1.49em;
}

.lp-p2-rightSectionLoginDiv {
    position: relative;
    top: 50%;
    transform: translate(30px, -50%);
    margin: 0 auto;
    width: 65%;
    font-weight: bold;
    font-size: 2em;

    text-align: center;
}

.lp-p2-icons {
    position: absolute;

    opacity: 0.4;
    font-size: 7em;
    color: #f9932d;

    text-shadow: 0 0 black;
}

.lp-p2-leftSection-icon1 {
    right: 15vw;
    top: -45px;
    transform: rotate3d(1, 1, 1, 290deg);
}
.lp-p2-leftSection-icon2 {
    left: 8vw;
    bottom: 23px;
    transform: rotate(306deg) rotate3d(1, 1, 1, 52deg);
}
.lp-p2-leftSection-icon3 {
    left: 8vw;
    bottom: 305px;
    z-index: 0;
    transform: rotate(306deg) rotate3d(1, 1, 1, 52deg);
}

#lp-page3 {
    opacity:1; 
    height:100vh; 
    position:relative; 
    background-image:radial-gradient(circle, rgb(0 0 0 / 70%) 0%, rgba(35, 35, 35, 0.996) 85%), url('../img/lp-page3-background.jpg');
    background-size: cover !important;
    background-position: center !important;
}
.lp-page3-container {
    width:100%;
    display: inline-flex;
    margin: 50px auto;
    text-align: center;
    justify-content: center;
    padding: 0 50px;

    /* width: 100%; */
    overflow: visible;

    transition: all 0.5s;
}
#lp-page3-list {
    width:100%;
}

.lessMarginTop {
    margin: 25px auto !important;
}


.games-container {
    width:100%;
    display: inline-flex;
    margin: 12px auto 30px auto;
    text-align: center;
    justify-content: center;
    padding: 0 50px;

    overflow: visible;

    /* MAJ 22/09/2023 */
    background-color: #00000030 !important;
    border-radius: 8px !important;
    padding-bottom: 26px !important;
    margin-bottom: 11px !important;
    border-bottom-left-radius: 20px !important;

    transition: all 0.5s;
}

/* Pas bon car se deplace en meme temps que parent ? */
#lp-page3-list::before {
    /* height: 100%;
    width:100%;
    background-color: black;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999; */

}

.splide__arrows {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: inline-flex;
    z-index: 100;
    justify-content: space-between;
}

.lp-page3-title {
    font-size:1.15em;
    height: 15%;
    align-items: center;
    display: flex;
    justify-content: center;
    width: 100%;
    text-align: center;
    margin: 0px auto;
    padding: 62px 0px 62px 0px;
}

.lp-page4-cardTeams-btn {
    font-family: 'Julius Sans One', sans-serif;
    width: 85%;
    display: block;
    margin: 10px auto;
    padding: 13px 0;
    color: black;
    font-weight: bold;
    font-size: 1.2em;
    border-radius: 3px;
    /* border-width: 0px !important; */

    transition: all 0.2s;
}
.lp-page4-cardTeams-btn:hover {
    letter-spacing: 1px;
    filter: saturate(0.7);
}



.addFavCardIcon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3.5em;
    color: var(--primary-color);
}


.addFavCardIcon {
    transition: all 0.2s;
}
.addFavCard:hover .lp-gameCard {
    opacity: 1 !important;
    background-color: #313131 !important;
}
.addFavCard:hover .addFavCardIcon {
    font-size: 4.35em;
}


.my-slider-progress {
    width: 75%;
    margin: 20px auto;
    background: #ccc;
    opacity: 0.5;
}

.my-slider-progress-bar {
    margin-top: 50px;
    background: var(--primary-color);
    height: 4px;
    transition: width 400ms ease;
    width: 0;
}

.lp-p1a-btn {
    /* text-align: center; */
    padding: 0px 16px 5px 16px;
    margin-top: 2px;
    background-color: #8080801c;
    width: 200px;

    transition: all 0.3s;
}
.lp-p1a-btn:hover {
    background-color: #80808059;
}

.lp-search-gameLogo {
    margin-right: 10px;
    width: 25px;
    height: 25px;
}

.lp-p1a-btn-noHover {
    /* text-align: center; */
    padding: 0px 16px 5px 16px;
    margin-top: 2px;
    background-color: #8080801c;
    width: 200px;
}



/* @keyframes squareAnim-phase2 {
    0% {
        transform: rotate(36deg);
    }
    50% {
        transform: rotate(29deg);
    }
    100% {
        transform: rotate(36deg);
    }
} */

.splide__list {
    width:100%;
    padding-left: 65px !important;
    /* overflow: hidden; */
}
.splide__track {
    /* overflow-y: visible; marche pas */
    /* overflow-y: hidden;
    overflow-x: hidden; */
}
.splide__slide {
    
    /* transform: scale(0.9); */
}

.splideAddFavs {
    max-width: 100%;
    padding: 25px;
    /* background-color: #8080801a; */
    background-color: #2ce4f926;
    border-radius: 10px;
    border: 1px solid #8080804a;
    filter: drop-shadow(2px 4px 6px black);
}

.modoNavSubDiv {
    position: relative;
    padding-left: 0px !important;
}

.fakeCard {
    position: relative;
    margin-left: 12px !important;

}
.lp-gameCard {
    position: relative;

    cursor: pointer;

    height: 250px;
    width: 200px;
    /* height: 200px;
    width: 170px; */

    background-color: grey;
    margin: 0 14px;
    background-position-x: center;

    border: 1px solid #818181;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;

    transition: all 0.2s ease-out;
}
.lp-gameCard:hover {
    /* filter: sepia(1); */
    /* transform: scale(1.05); */
    box-shadow:0 0 35px -5px var(--primary-color);
}

.newsFavCardDiv {
    font-family: 'K2D';
    position: absolute;
    bottom: 10px;
    right: -4px;
    color: black;
    font-size: 1.2em;
    /* font-weight: bold; */
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
}
.newTopics {
    padding: 0px 10px;
    background-color: cyan;
    border: 1px solid #0000007d;
    clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%);
}
.newMedias {
    padding: 0px 10px;
    background-color: #ff00fa;
    border: 1px solid #0000007d;
    clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%);
}


.newsFavCardDivGameList {
    right: -5px !important;
    font-size: 0.87em !important;
}
.newTopicsGameList {
    clip-path: polygon(10% 0, 100% 0, 97% 100%, 0% 100%);
    position: relative;
    left: -12px;
}
.newMediasGameList {
    clip-path: polygon(10% 0, 100% 0, 97% 100%, 0% 100%);
    position: relative;
    left: -17px;
}



.tournamentsDiv {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    /* transform: translateX(-50%); */
    /* left: 50%; */
    position: relative;
    margin-top: 65px;
    width: 40%;
}
.tournamentsLogo {
    width: 65%;
    transform: translateX(-50%);
    left: 50%;
    position: relative;
    margin-bottom: 25px;
}
.tournamentsTitle {
    font-family: 'K2D';
    color: var(--primary-color);
    font-weight: bold;
    font-size: 1.5em;
    text-align: center;
}
.tournamentsGrid {
    display: inline-flex
}
.tournamentsImg {
    width: 100%;
    border-radius: 15px;
}

.testImgFade {
    width: 60%;
    height: fit-content;
    /* top: 38%; */
    position: relative;
    transform: translate(50px, 18%);

    border-bottom: 5px solid var(--primary-color);
    border-radius: 16px;

}

.tournamentsImgTitle {
    color: var(--primary-color);
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translate(-50%, -5%);
    font-size: 5em;
    font-weight: bold;

    padding: 0 100px;
    border-bottom: 4px solid;
    background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, var(--background-color) 20%, var(--background-color) 80%, rgba(0, 0, 0, 0) 100%)
}

.testImgFade:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgb(0 0 0 / 0%) 0%, rgb(35 35 35 / 48%) 90%);
    z-index: 9999;

}

.gameFavoritedLabel {
    position: absolute;
    right: -1px;
    padding: 1px 8px 1px 11px;
    top: -1px;
    font-size: 1.1em;
    background-color: var(--background-color);
    color: var(--primary-color);
    border-top-right-radius: 4px;
    border-bottom-left-radius: 13px;
    clip-path: polygon(8% 0, 100% 0, 92% 100%, 0% 100%);
    border-bottom: 2px solid;
}


.games-gameCard {
    position: relative;
    cursor: pointer;

    height: 180px;
    width: 160px;
    /* height: 200px;
    width: 170px; */

    clip-path: polygon(12% 0, 100% 0, 88% 100%, 0% 100%);

    background-color: grey;
    margin: 0 14px;
    background-position-x: center;

    border: 1px solid #818181;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;

    transition: all 0.2s ease-out;
}
.games-gameCard:hover {
    /* filter: sepia(1); */
    /* transform: scale(1.05); */
    box-shadow:0 0 35px -5px var(--primary-color);
}



.favArrayHeart {
    opacity: 0;
    font-size: 5em;
    color: var(--primary-color);
    filter: drop-shadow(2px 4px 6px black);
    backdrop-filter: blur(1px);
    position: absolute;
    left: 53%;
    top: 50%;
    transform: translate(-50%, -50%);

    transition: all 0.3s;
}
.favArrayPlus {
    opacity: 0;
    font-size: 5em;
    color: var(--primary-color);
    backdrop-filter: blur(1px);
    position: absolute;
    left: 53%;
    top: 50%;
    transform: translate(-50%, -50%);

    transition: all 0.3s;
}

.addArrayFav_title {
    font-family: 'K2D', sans-serif;
    text-align: center;
    margin-top: 5px;
    font-size: 1.5em;

    display: inline-flex;
    width: 100%;
    justify-content: center;
}

.testSplideListFavs {
    background-color: var(--background-color);
    margin-left: 89px !important;
    margin-right: 90px !important;
    border-radius: 7px !important;
    padding-left: 0px !important;
}

.addFavTitleFa {
    font-size: 1.5em;
    color: var(--primary-color);
    margin-right: 15px;
}

.addArrayFavBtn {
    padding: 15px 35px;
    border-radius: 2px;
}

.lp-gameCardTitle {
    font-family: 'K2D', sans-serif;
    position: relative;
    top: 103%;
    font-weight: bold;
    font-size: 1.5em;

    transition: all 0.3s;
}


.lp-gameCardTitleSearch {
    font-family: 'K2D', sans-serif;
    position: relative;
    top: 102%;
    width: 100%;
    text-align: center;
    display: block;
    font-weight: bold;
    font-size: 1.5em;
}

.lp-gameCardTitle-games {
    font-family: 'K2D', sans-serif;
    position: absolute;
    width: 100%;
    font-weight: bold;
    font-size: 1.3em;

    left: 8px;

    margin-top: 2px;

    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.homeSection1 {
    max-width: 100%;
    position: relative;
    top: 5vh;
    opacity: 0;

    animation: homeSectionfadeIn 0.5s 0.6s ease-in-out forwards 1;
}
/* Meme position que homeSection1 */
.homeSection2 {
    max-width: 100%;
    position: relative;
    top: 5vh;
    opacity: 0;

    animation: homeSectionfadeIn 0.5s 0.6s ease-in-out forwards 1;
}
.homeSection3 {
    max-width: 100%;
    position: relative;
    top: 5vh;
    opacity: 0;

    animation: homeSectionfadeIn 0.5s 0.8s ease-in-out forwards 1;
}
.homeSection4 {
    max-width: 100%;
    position: relative;
    top: 5vh;
    opacity: 0;

    animation: homeSectionfadeIn 0.5s 1s ease-in-out forwards 1;
}
.homeSection5 {
    max-width: 100%;
    position: relative;
    top: 5vh;
    opacity: 0;

    animation: homeSectionfadeIn 0.5s 1.2s ease-in-out forwards 1;
}
@keyframes homeSectionfadeIn {
    from {
        opacity: 0;
        top: 5vh;
    }
    to {
        opacity: 1;
        top: 0vh;
    }
}


.gameList1 {
    position: relative;
    top: 5vh;
    opacity: 0;

    animation: homeSectionfadeIn 0.5s 0.5s ease-in-out forwards 1;
}
.gameList2 {
    position: relative;
    top: 5vh;
    opacity: 0;

    animation: homeSectionfadeIn 0.5s 0.6s ease-in-out forwards 1;
}
.gameList3 {
    position: relative;
    top: 5vh;
    opacity: 0;

    animation: homeSectionfadeIn 0.5s 0.7s ease-in-out forwards 1;

}







.lp-gameCardAddFavTitle {
    position: relative;
    top: 3% !important;
    font-weight: bold;
    font-size: 1.5em;
}

#headerReduced_title {
    display: none;
}

.logoPng_reduced {
    
    width: 164px;
    height: 34px;
}

.lp-gameCardTitlePhone {
    display: none;
    padding: 3px;

}

#lp-page4-cardTeams {
    margin: 0px 0px;
}


.filterIcon {
    font-size: 3.7em;
    line-height: 0;
    font-weight: 100;
    opacity: 0.7;
    position: relative;
    top: 14px;
}


/* Landing page scroll horizontal gameList button */
.lp-arrow-button {
    cursor: pointer;
    display: inline-block;
    width: 80px;
    height: 100px;
    background-color: #ccc0;
    border: none;
    border-radius: 50%;
    line-height: 1;
    outline: none;
}

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

.lp-games-scrollHorizontal {
    position: absolute;
    right: 4%;
    top: 40%;
    font-size: 5em;
    color: white;
}


.lp-page4 {
    position: relative;
    background-position-x: center;
    transition: all 0.5s ;
}

#lp-page4 {
    opacity:1; 
    height:100vh; 
    background-image:radial-gradient(circle, rgba(0, 0, 0, 0.5) 0%, rgba(35, 35, 35, 0.996) 69%), url('../img/landingPage4.jpg'); 
    background-position:center; 
    background-size: cover;
}


#lp-searchText {
    border-color: #ffffff99 !important;
    border-radius: 5px;
    padding: 3px 10px;
    background-color: #232323;
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.35);
    transition: all 0.3s;
}
#lp-searchText:focus {
    outline: none;
    border: 2px solid var(--primary-color) !important;
}

.lp-filtersLabel {
    position: absolute;
    font-size: 0.8em;
    top: 3px;
    left: 50%;
    opacity: 0.85;
    transform: translate(-50%, -21px);
}

.lp-searchBarIcon {
    padding: 0 8px;
}

.lp-page4-container {
    display: inline-flex;
    height: 60vh;
    justify-content: space-evenly;
    width: 100%;
    margin: 23px auto;
}

#registration_form_agreeTerms {
    margin-left: 10px;
}

.register_restrictionsDiv {
    /* line-height: 15px; */
    /* padding: 10px 15px 0px 15px; */
    border-top: 1px solid grey;
    padding: 20px 25px 0px 25px;
    width: fit-content;
    display: inline-flex;
    flex-direction: column;
}

.registerLeftDiv {
    font-family: 'K2D', sans-serif;
    width: 70%;
    margin: 0px 25px;
}

.registerRightDiv {
    width: 50%;
}


#registerPseudoCriteria {
    display: none;
}

.navNotifDiv {
    position:relative; 
    bottom: 2px;
    /* margin-right:10px; */
    /* padding: 0; */
    padding: 0 4px 0 4px !important;
    padding-top: 7px !important;
}

.registerRightShape {
    clip-path: polygon(100% 0, 72% 100%, 100% 100%);
    background-color: var(--primary-color);
    position: absolute;
    bottom: 0;
    right: 0;
    width: 200px;
    height: 85px;
    opacity: 0.8;

    background: rgb(249,123,44);
    background: -moz-linear-gradient(305deg, rgba(249,123,44,0.5900735294117647) 0%, rgba(255,255,255,0) 21%);
    background: -webkit-linear-gradient(305deg, rgba(249,123,44,0.5900735294117647) 0%, rgba(255,255,255,0) 21%);
    background: linear-gradient(305deg, rgba(249,123,44,0.5900735294117647) 0%, rgba(255,255,255,0) 21%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f97b2c",endColorstr="#ffffff",GradientType=1);
}


#lp-teamsCardGameSelected {
    width: 100%;
}
#lp-teamsCardGameNotSelected {
    width: 100%;
}

#cleanGameSelected {
    color: rgb(216, 216, 216);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 15px;
    opacity: 0.7;
    padding: 8px 17px;;
    border-radius: 5px;

    text-shadow: rgba(116, 200, 20, 0) -0px -0px 0px, rgba(116, 200, 20, 0) 0px -0px 0px, rgba(116, 200, 20, 0) -0px 0px 0px, rgba(116, 200, 20, 0) 0px 0px 0px;

    transition: all 0.3s;
}
#cleanGameSelected:hover {
    background-color: #0000004f;
    color: white;
    opacity: 1;
}

.registerRestriction {
    font-family: 'K2D', sans-serif;
    color:red;
}

.ellipsed {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.searchLineLink {
    width: 100%;
    display: inline-flex;
    justify-content: left;
    /* display: block; */
    padding: 7px 12px;
    border: 1px solid rgba(128, 128, 128, 0.404);
    /* border-radius: 5px; */
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    background-color: #ffffff0d;

    transition: all 0.3s;
}
.searchLineLink:hover {
    background-color: #ffffff23;
}

.lp-searchTrait {
    height: 1px;
    width: 80%;
    align-self: center;
    background: rgb(35,35,35);
    background: -moz-linear-gradient(270deg, rgba(35,35,35,0) 0%, rgba(255,255,255,0.9626225490196079) 50%, rgba(145,70,255,0) 100%);
    background: -webkit-linear-gradient(270deg, rgba(35,35,35,0) 0%, rgba(255,255,255,0.9626225490196079) 50%, rgba(145,70,255,0) 100%);
    background: linear-gradient(270deg, rgba(35,35,35,0) 0%, rgba(255,255,255,0.9626225490196079) 50%, rgba(145,70,255,0) 100%);
}

.lp-searchDiv {
    text-align: center;
    font-family: 'K2D', sans serif;
    /* margin-top: 30px; */
    padding: 15px 0 20px 0;

}
.lp-searchSubDiv {
    display:inline-flex; 
    align-items:baseline;
}

.lp-filterList {
    align-items: baseline;
    margin: 0 15px;
}

.lp-filterActive {

}


.lp-searchFiltersDiv {
    position:relative;
    margin-top: 25px;
}


#lp-page4-separator {
    height:2px; 
    width:100%; 
    background:radial-gradient(circle, rgba(255,255,255,0.7) 11%, rgba(44,243,249,0) 70%);
}


.lp-page4-titleDiv {
    background-color: #0000001c;

    font-style: italic;
    opacity: 0.6;

    position: relative;
    font-family: 'K2D', sans-serif;

    cursor: pointer;
    width: 100%;
    text-align: center;
    margin: 0px auto;
    /* padding: 35px 0; */
    padding: 25px 0;

    background-size: cover !important;
    background-repeat: no-repeat !important;
}


#lp-page4-gameLogo {
    position: absolute;
    max-height: 70%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: -10;
    opacity: 0.9;
}


#eventDetailDiv {
    text-align: center;
    padding: 15px 15px 25px 15px;
    border: 1px solid;
    margin: 20px 35px;
    border-radius: 5px;

    display: inline-flex;
    flex-direction: column;
    width: -webkit-fill-available;
}
#eventTitle {
    font-family: 'K2D', sans-serif;
}

#cancelEventBtn {
    font-family: 'K2D', sans-serif;
    padding: 5px 10px;
    background-color: #b43a3a;
    border-radius: 5px;
    width: fit-content;
    margin: 5px auto 15px auto;
}

.fc-view-harness {
    font-family: 'K2D', sans-serif;
}
.fc-header-toolbar {
    font-family: 'K2D', sans-serif;
}

.eventDispoOptions {
    font-family: 'K2D', sans-serif;
    cursor: pointer;
    
}
.eventDispoOptions span {
    padding: 5px 12px;
    border: 1px solid grey;
    border-radius: 3px;
    background-color: #181818;
    transition: all 0.3s;
}
.eventDispoOptions span:hover {
    opacity: 0.8;
}

.dispoState {
    background-color: #008926 !important;
    border-color: #008926 !important;
}
.perhapsState {
    background-color: #a6490f !important;
    border-color: #a6490f !important;
}
.notdispoState {
    background-color: #890035 !important;
    border-color: #890035 !important;
}





.deletePostBtn {
    cursor: pointer;
    font-style: normal !important;
    color: #ff004c;
    margin-left: 5px;
}

.lp-page4-cardMedias {

}

.lp-page4-card {
    cursor: pointer;
    width: 425px;
    padding: 15px 25px;
    height: 61vh;
    margin: 0 0;
    border: 1px solid #9a9a9a69;
    border-radius: 5px;
    background-color: #30bbcb1c;

    /* Glass effect (https://hype4.academy/tools/glassmorphism-generator) */
    backdrop-filter: blur( 12px );
    -webkit-backdrop-filter: blur( 12px );
    border-radius: 8px;
    
    border: 1px solid #9a9a9a;

    transition: all 0.2s;
    opacity: 0;
    animation: fadeIn-lp-page4card 0.4s 1s ease forwards;
}
.lp-page4-card:hover { 
    /* border: 1px solid #f97b2c;
    background-color: #f97b2c50; */
}
.lp-page4-card .lp-page4-img {
    transition: all 0.3s;
}
.lp-page4-card:hover .lp-page4-img { 
    filter: sepia(0.5);
}

.lp-page4-cardTopics:hover {
    border: 8px solid #f97b2c;
    color: #f97b2c;
    border-radius: 0px;
    background-color: #30bbcb30;
    /* + test ajouter grayscale ? */
    backdrop-filter: blur(44px) grayscale(1);
}
.lp-page4-cardMedias:hover {
    border: 8px solid #f97b2c;
    color: #f97b2c;
    border-radius: 0px;
    background-color: #30bbcb30;
    /* + test ajouter grayscale ? */
    backdrop-filter: blur(44px) grayscale(1);
}

.lp-page4-img {
    width:-webkit-fill-available; 
    margin: 15px auto;
}

.lp-page4-teamsCardImg {
    width:70%;
    margin:20px auto; 
    opacity:0.5;
}


@keyframes fadeIn-lp-page4card {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.lp-page4-cardTitle {
    text-align: center;
    font-size: 1.8em;
    letter-spacing: 2px;
    margin: 10px 0;
    padding: 8px 0;

    background: -moz-radial-gradient(circle, rgba(35,35,35,0.7) 0%, rgba(145,70,255,0) 49%);
    background: -webkit-radial-gradient(circle, rgba(35,35,35,0.7) 0%, rgba(145,70,255,0) 49%);
    background: radial-gradient(circle, rgba(35,35,35,0.7) 0%, rgba(145,70,255,0) 49%);
}

.lp-page4-card:hover .lp-page4-cardTitle {
    font-weight: bold;
}


.lp-page4-cardTeam img {
    transition: all 0.3s;
}
.lp-page4-cardTeam:hover img {
    opacity: 1 !important;
}



.lp-page4-teamsCardContent {
    display: inline-flex;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    text-align: center;
    position: relative;
    /* top: 15%;
    transform: translateY(-15%); */
}

.choseGameArrow {
    opacity: 0;
    font-size: 3.8em;
    line-height: 0px;
    position: relative;
    top: -10px;
    
    animation: choseGameArrow 2.8s infinite ease;
}
@keyframes choseGameArrow {
    0% {
        opacity: 0;
        top: -10px;
    }
    45% {
        opacity: 0.3;
    }
    55% {
        opacity: 0.3;
    }
    100% {
        opacity: 0;
        top: 20px;
    }
}

.lp-page4-selectedGameTitle {
    font-family: 'Julius Sans One', sans-serif;
    font-size: 3em;
    font-weight: 900;
}

#lp-page4-selectedGameTitle {
    font-size: 1.7em;
    font-weight: 500;
}

.lp-gameCard-boxShadow {
    filter: sepia(1);
    box-shadow: 0 0 45px -5px var(--primary-color);
}


.gameDetailsIcon {
    position: absolute;
    opacity: 0.5;
    right: 60px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2em;

    transition: all 0.3s;
}
.lp-page4-titleDivWrapper:hover .gameDetailsIcon {
    right: 45px;
    opacity: 1;
}


.pageTitle {
    clip-path: polygon(0 0, 100% 0, 98% 100%, 0% 100%);
    color: var(--primary-color);
    background-color: #ffffff0f;
    font-weight: bold;
    padding: 4px 19px;
    /* border-left: 4px solid var(--primary-color); */
    border-left: 4px solid #2ce4f9d4;
    
    width: fit-content;
    text-transform: capitalize;
    font-size: 1.85em;
}



.filAriane {
    color: white;
    font-size: 110%;
    margin-left: 3%;
    display: inline-flex;
    font-family: 'K2D', sans-serif;

    width: fit-content;
    padding: 3px 10px;
    background-color: #8080801f;
    border-radius: 5px;

    flex-flow: wrap;
}
.filArianeSepa {
    margin: 0 5px;
}
.arianeLink {
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: all 0.3s;
}
.arianeLink:hover {
    color: var(--primary-color);
    text-underline-offset: 5px;
    text-decoration-thickness: 3px;
}

.arianeHome {
    transition: all 0.3s;
}
.arianeHome:hover {
    color: var(--primary-color);
}

.teamCardNbrCandidature {
    font-family: 'K2D', sans-serif;
    position: absolute;
    bottom: 35px;
    left: -1px;
    padding: 0px 19px 0px 7px;
    background-color: #2ce4f9d4;
    color: black;
    clip-path: polygon(0 0, 100% 0, 94% 100%, 0% 100%);
    border: 1px solid black;
    
}

nav {
    position: absolute;
    z-index: 11;

    bottom: -4px;
    right: 0px;
    /* padding-right: 10px; */
    color: white; 

}

.main {
    width: 75%;
    margin: 20px auto 45px auto;
}

#calendar {
    height: 300px;
}


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

.gamesFilterList {
    display: inline-flex;
    width: 100%;
    font-family: 'K2D', sans-serif;
    padding: 8px 7px;
    border-radius: 4px;

    border-left: 3px solid #2ce4f9bf;
    border-right: 3px solid #2ce4f9bf;
    border-top: 0px;
    border-bottom: 0;

    background-color: #2ce4f929;

}
.gamesFilterList li {
    cursor: pointer;
    border-radius: 3px;
    margin: 0 4px;
    padding: 2px 7px;
    color: black;
    border: 1px solid black;
    filter: grayscale(1);
    background-color: var(--primary-color);

    transition: all 0.3s;
}
.gamesFilterList li:hover {
    border: 1px solid white !important;
}
.gameFilterActive {
    filter: grayscale(0) !important;
    color: black;
    border: 1px solid #000000b0 !important;
}

.gameFilterIcon {
    color: #2ce4f9d4;
    font-size: 2.2em;
    padding: 8px 7px;
    margin-right: 16px;
    transform: translateY(-4px);
}

.gameFiltersDiv {
    display: inline-flex;
    margin: 20px auto 0px auto;
    left: 50%;
    position: relative;
    transform: translateX(-50%);

    /* flex-flow: wrap; */
}

.footerRegisterCard {
    position: absolute;
    top: -56px;
    margin: 0 auto;
    display: inline-flex;
    /* background-image: linear-gradient(to right top, #f97b2c, #b2970e, #6ba144, #219f7a, #05969d); */
    background-image: linear-gradient(to right top, var(--primary-color), var(--secondary-color));
    justify-content: space-between;
    width: 45%;
    border-radius: 10px;
    padding: 20px;
    left: 50%;
    border: 1px solid #000000a8;
    transform: translateX(-50%);
    border-bottom: 2px solid black;
}
.footerRegisterCta {
    border: 1px solid;
    margin: 0;
    border-radius: 100px;
    border-bottom: 2px solid black;

    width: inherit;
}

.footerRegisterText {
    font-family: 'K2D', sans-serif;
    align-self: center;

    color: black;
    font-size: 1.15em;
    width: -webkit-fill-available;
}

.loginPageForm {
    font-family: 'K2D', sans-serif;
    width: 30%;
    margin: 40px auto;
}

.registerConnectionLink {
    transition: all 0.3s;
    color: var(--primary-color);
    text-decoration: underline;
}
.registerConnectionLink:hover {
    color: white;
}

.contactMeTxt {
    font-family: 'K2D', sans-serif;
}
.portfolioLink {
    font-family: 'Julius Sans One';
    font-weight: bold;
    color: var(--primary-color);
    transition: all 0.3s;
}
.portfolioLink:hover {
    color: white;
    letter-spacing: 1px;
    color: #2ce4f9;
}

.footerTitle {
    color: var(--primary-color);
}

.authenticationDiv {
    position:absolute; 
    display:inline-flex; 
    align-items: baseline;
    background-color: #04010054;
    padding-left: 0px;
    margin-right: -10px;
    z-index: 10;
    top:-1px; 
    right:10px;
    padding-right: 0px;
    border-bottom-left-radius: 10px;
    border-bottom: 1px solid #8f8f8f3b;
    border-left: 1px solid #8f8f8f3b;

    
    /* padding-top: 2px;
    padding-bottom: 5px; */
}

.linkFixPosition {
    position: relative;
    top: 10px;
    right: 1px;
}

.headerUnderline {
    height: 3px; 
    width: 100%; 
    background-color: var(--primary-color); 
    position: relative; 
    top: 3px;
}
.marginBottomHeaderLine {
    /* margin-bottom: 17px; */
    margin-bottom: 20px;
}


.mutedBanner {
    text-align: center;
    width: 100%;
    font-family: 'K2D';
    padding: 6px 0 6px 0;
    border-bottom: 1px solid #80808054;
    background-color: #d600003b;
    margin-bottom: 5px;
    margin-top: 3px;
}

.muteEndDate {
    margin-left: 7px;
    color: rgb(230, 8, 8);
}

.mutedBannerIcon {
    color: rgb(221, 12, 12);
    margin-right: 7px;
    font-size: 1.2em;
    position: relative;
    top: 1px;
}


.logoPng {
    position: relative;
    z-index: 11;
    margin-left: 6px;

    width: 169px;
    padding: 6px;
    margin: 0px;

    transition: all 0.3s;
}
.logoPng:hover {
    /* filter: saturate(0.4); */
}

.profil {
    font-family: 'K2D', sans-serif;
    font-size: 0.88em;
    color: rgb(255, 255, 255);
    padding: 6px 14px 7px 17px;
    border-bottom-left-radius: 4px;

    transition: all 0.3s;
}
.decoBtn {
    position: relative;
    bottom: 0px;
    font-size: 0.88em;
    padding: 8px 13px 5px 13px;
    border-left: 1px solid rgba(160, 160, 160, 0.4);

    transition: all 0.4s;
}

.splide__arrow {
    border: 1px solid #ffffff45 !important;
    align-items: center;
    background: #0006;
    background: rgb(0,0,0);
    background: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(9,9,121,0) 79%);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    display: -ms-flexbox;
    display: flex;
    height: 3.5em;
    -ms-flex-pack: center;
    justify-content: center;
    opacity: 1;
    padding: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 3.5em;
    z-index: 1;
}
.splide__arrow svg {
    fill: var(--primary-color);
    height: 2.7em;
    stroke: black;
    width: 2.7em;
}

.splide__arrow--next {
    transition: all 0.3s;
}
.splide__arrow--prev {
    transition: all 0.3s;
}

.splide__arrow--next:hover {
    border: 1px solid #ffffffaf !important;
    transform: translate(7px ,-50%);
}
.splide__arrow--next svg {
    transition: all 0.3s;
}
.splide__arrow--next:hover svg {
    stroke: white;
}

.splide__arrow--prev:hover {
    border: 1px solid #ffffffaf !important;
    transform: translate(-7px ,-50%);
}
.splide__arrow--prev svg {
    transition: all 0.3s;
}
.splide__arrow--prev:hover svg {
    stroke: white;
}


.gamesListIcon {
    font-size: 3em;
    color: var(--background-color);
}

.sectionTitleGames {
    /* width: 240px; */
    /* width:228px; */
    width:215px;
    /* width: 20%; */
    clip-path: polygon(0 0, 100% 0, 87% 100%, 0 100%);
}

.gamesSplideContainer {
    overflow:hidden; 
    width:100%;
    clip-path: polygon(3% 0, 100% 0, 100% 100%, 0% 100%);
    transform: translateX(-15px);

    padding-bottom: 20px;
}


.lp-statsDiv span {
    font-family: 'K2D', sans-serif;
}

.gamesListClipPathEnd {
    width: 40px;
    margin-top: 80px;
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 0% 100%);
    background-color: var(--primary-color);
    border-top-right-radius: 4px;
    background-image: linear-gradient(to bottom, #f97b2c,#f97b2c, #232323);
}

.splideListGames {
    padding-left: 55px !important;
}

.profil:hover {
    background-color: var(--primary-color);
    color: black;
    /* font-weight: bold; */ 
    /* letter-spacing: 1px; */
}
.profil:hover .profilIcon {
    color: black;
}
.decoBtn:hover {
    background-color: #bb0000;
}



.gameHeaderInfosContent {
    z-index: 999;
    position: relative;
    padding: 25px 20px 20px 20px;
    color: black;
}

.genreGameList {
    display: inline-flex;
    flex-wrap: wrap;
    margin-top: 50px;
    margin-bottom: 35px;
}


.headerGameTitle {
    position: absolute;
    z-index: 11;
    font-size: 1.6em;
    color: white;
    bottom: 41px;
    right: 0;
    padding-left: 42px;
    padding-right: 16px;
    padding-top: 4px;
    padding-bottom: 2px;
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    background-color: #f1f1f112;
    transition: all 0.4s;

    background-color: #000000b5;

    right: -200px;
    animation: slideGameNavTitle 0.7s ease forwards;
}
.headerGameTitle:hover {
    background-color: #f1f1f12a;
    /* letter-spacing: 2px; */
    padding-left: 55px;
    padding-right: 29px;
}
@keyframes slideGameNavTitle {
    from {
        right: -200px;
        clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    }
    to {
        right: 0px;
        clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%);
    }

}


.planeContactIcon {
    position: relative;
    top: 3px;
    font-size: 1.45em;
    color: var(--primary-color);
    margin-right: 15px;
}



.favButton {
    float: right; /* temporaire */

    padding: 12px 20px 12px 24px;
    background-color: #2ce4f912;
    border-top: 1px solid rgb(255 255 255 / 20%);
    border-bottom: 1px solid rgb(255 255 255 / 20%);
    /* clip-path: polygon(14% 0, 100% 0, 86% 100%, 0% 100%); */
    clip-path: polygon(0% 0, 100% 0, 100% 100%, 20% 100%);

    transition: all 0.3s;
}
.favIcon {
    font-size: 2em;
    position: relative;
    right: -6px;
    top: 0px;

    transition: all 0.3s;
}

.favButton:hover {
    background-color: #2ce4f929;
}


#notationContent {
    transition: all 0.3s;
}


.createButton {
    /* padding: 5px 30px;
    background-color: rgb(255 255 255 / 5%);
    border-top: 1px solid rgb(255 255 255 / 20%);
    border-bottom: 1px solid rgb(255 255 255 / 20%);
    clip-path: polygon(14% 0, 100% 0, 86% 100%, 0% 100%); */
    padding: 11px 30px;
    position: relative;
    left: 0px;
    border-top-right-radius: 10px;
    top: -6px;
    background-color: rgb(255 255 255 / 5%);
    border-top: 1px solid rgb(255 255 255 / 20%);
    border-bottom: 2px solid rgb(255 255 255 / 20%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 14% 100%);
    border-bottom-left-radius: 100px;

    transition: all 0.4s;
}
.createButton:hover {
    letter-spacing: 2px;
    color: black;
    /* font-weight: bold; */
}
.createButton i {
    transition: all 0.4s;
}
.createButton:hover i {
    color: black !important;
}






#memberLeadSubmit {
    display: inline-flex;
    margin: 0 !important;
    padding: 11px 10px;
    border-width: 0;
}
#memberLeadSubmit {
    border-radius: 5px;
}
#memberLeadSubmit i {
    margin: 0 4px;
}

#memberLeadSelect {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    position: relative;
    right: -3px;
}

/* .groupTitle {
    text-align: center;
    padding: 13px 35px;
    background-color: #1c1c1c;
    width: fit-content;
    margin: 10px auto;
    border-radius: 3px;
    border-bottom: 2px solid black;
} */


.groupTitle {
    text-align: center;
    padding: 13px 78px;
    background-color: #424242;
    width: fit-content;
    margin: 25px auto 15px auto;
    border-radius: 3px;
    background: rgb(255,70,85);
    background: -moz-linear-gradient(85deg, rgba(255,70,85,0) 0%, rgba(66,66,66,0.8057598039215687) 20%, rgba(66,66,66,1) 50%, rgba(66,66,66,0.8057598039215687) 80%, rgba(168,68,76,0) 100%);
    background: -webkit-linear-gradient(85deg, rgba(255,70,85,0) 0%, rgba(66,66,66,0.8057598039215687) 20%, rgba(66,66,66,1) 50%, rgba(66,66,66,0.8057598039215687) 80%, rgba(168,68,76,0) 100%);
    background: linear-gradient(85deg, rgba(255,70,85,0) 0%, rgba(66,66,66,0.8057598039215687) 20%, rgba(66,66,66,1) 50%, rgba(66,66,66,0.8057598039215687) 80%, rgba(168,68,76,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff4655",endColorstr="#a8444c",GradientType=1);}


.noMarginBottom {
    margin-bottom: 0;
}

#search-form {
    width: 23%;
    position: relative;
}
#search-input {
    padding: .42rem .75rem .42rem 2.5rem;
    transition: all 0.3s;
    border-left: 3px solid #2ce4f9d4;
    background-color: #2ce4f929;
}
#search-input:hover {
    background-color: #656565;
}
#searchFormLoupe {
    position: absolute;
    top: 10px;
    left: 15px;
    opacity: 1;
    color: var(--primary-color);
}
#search-title {
    margin-top: 40px;
    left: 20px;
    display: none;
    position: relative;
}

#search-results {
    display: none;
    /* display: inline-flex; */
    /* margin-top: 40px; */
    flex-flow: wrap;
}
#search-results a {
    margin-top: 55px;
}

.gameListCount {
    font-size: 80%;
    opacity: 0.7;
}


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





.blinkingSectionTitle {
    /* filter: brightness(0);

    animation: blinkingSectionTitle 1s 0.1s forwards linear; */
}
@keyframes blinkingSectionTitle {
    0% {
        filter: brightness(0);
    }
    8% {
        filter: brightness(1);
    }
    20% {
        filter: brightness(0);
    }
    28% {
        filter: brightness(1);
    }
    32% {
        filter: brightness(0);
    }
    36% {
        filter: brightness(1);
    }
    40% {
        filter: brightness(0);
    }
    44% {
        filter: brightness(1);
    }
    52% {
        filter: brightness(0);
    }
    56% {
        filter: brightness(1);
    }
    60% {
        filter: brightness(0);
    }
    72% {
        filter: brightness(1);
    }
    76% {
        filter: brightness(0);
    }
    80% {
        filter: brightness(1);
    }
    88% {
        filter: brightness(0);
    }
    92% {
        filter: brightness(1);
    }
    96% {
        filter: brightness(0);
    }

    100% {
        filter: brightness(1);
    }
}



.gameCard {
    position: relative;
    width: fit-content;
    background-color: #363636;
    border-radius: 5px;

    /* filter: brightness(0); */
    /* animation: blinkingCard 0.7s 1.5s linear forwards; */
}
@keyframes blinkingCard {
    0% {
        filter: brightness(0);
    }
    4% {
        filter: brightness(1);
    }
    10% {
        filter: brightness(0);
    }
    14% {
        filter: brightness(1);
    }
    16% {
        filter: brightness(0);
    }
    18% {
        filter: brightness(1);
    }
    20% {
        filter: brightness(0);
    }
    22% {
        filter: brightness(1);
    }
    26% {
        filter: brightness(0);
    }
    28% {
        filter: brightness(1);
    }
    30% {
        filter: brightness(0);
    }
    36% {
        filter: brightness(1);
    }
    38% {
        filter: brightness(0);
    }
    40% {
        filter: brightness(1);
    }
    44% {
        filter: brightness(0);
    }
    46% {
        filter: brightness(1);
    }
    48% {
        filter: brightness(0);
    }

    100% {
        filter: brightness(1);
    }
}
.gameCardLink {
    filter: drop-shadow(0px 0px 6px black); 
    margin: 5px 11px;

    opacity: 0;
    transition: all 0.5s;
}
/* .gameCardLink:hover {
    filter: drop-shadow(2px 1px 4px black);
} */
.gameLogo {
    width: 200px;
    height: 115px;

    border-top-left-radius: 4px;
    border-top-right-radius: 4px;

}
.gameCardUnderline {
    width: 100%;
    height: 3px;

    margin-top: 1px;
    margin-bottom: 5px;
}
.gameCardTitle {
    text-align: center;
}
.gameCardInfos {
    /* width: 80%;
    margin: 0 auto; */
    padding: 10px;
}


#scrollToTop {
    /* display: none; */
    pointer-events: none;
    opacity: 0;
    cursor: pointer;
    position: fixed;
    color: var(--primary-color);
    font-size: 3em;
    bottom: 25px;
    right: 30px;
    z-index: 9999;

    transition: all 0.3s;
}
#scrollToTop:hover {
    transform: scale(1.1);
    color: #8ff4ffe0;
    opacity: 0.9;
}

.roleUserData {
    font-family: 'K2D', sans-serif;
    margin-left: 10px;
    padding: 2px 7px 4px 7px;
    border: 1px solid;
    border-radius: 5px;
    background-color: var(--background-color);
    border-color: var(--primary-color);

    position: relative;
    bottom: 2px;
}
.roleUser {
    border-color: grey !important;

}

.topicCard, .topicCardGlobal {
    position: relative;
    display: inline-flex;
    border: 1px solid #80808096;
    width: 100%;
    justify-content: space-between;
    margin: 2px auto;
    padding: 10px 15px 10px 53px;
    border-radius: 3px;
    border-top-left-radius: 13px;
    background-color: #22c6d836;
    color: #dedede;
    clip-path: polygon(1% 0, 100% 0, 100% 100%, 0% 100%);
    transform: rotateX(90deg);
    transition: all 0.4s;
    opacity: 0;
}
@keyframes fadeInRotate {
    0% {
        opacity: 0;
        transform: rotateX(90deg);
    }
    100% {
        opacity: 1;
        transform: rotateX(0deg);
    }
}

.topicCard:hover, .topicCardGlobal:hover {
    background-color: #108085 !important;
}


.topicCard img, .topicCardGlobal img {
    transition: all 0.3s;
}

.topicCard:hover img {
    transform: translateX(5px);
}
.topicCardGlobal:hover img {
    transform: translateX(5px);
}
.topicCard:hover .topicTitle {
    transform: translateX(10px);
}
.topicCardGlobal:hover .topicTitle {
    transform: translateX(10px);
}
.topicCard:hover .topicTitleModo {
    transform: translateX(10px);
}

.topicCardFadeInAnim {
    animation: fadeInRotate 1s 0s ease forwards;
}

.mediaCardPublishDate {
    display: none;
    font-family: 'K2D', sans-serif;
}

.topicCardPublishDate, .notifCardPublishDate {
    font-family: 'K2D', sans-serif;
}
.topicCardPublishDate {
    font-size: 0.7em;
    position: relative;
    top: 4px;
}
.notifCardPublishDate {
    position: absolute;
    right: 3px;
    bottom: 2px;
    font-size: 0.6em;
}

.notifsContainer {
    /* margin-top: 50px; */
}

.listContainer {
    padding: 10px 10px;
    background-color: rgb(44 44 44);
    border-radius: 4px;
}

#createTopicBtn {
    font-family: 'Julius Sans One', sans-serif;
    cursor: pointer;
}
#createMediaBtn {
    font-family: 'Julius Sans One', sans-serif;
}


#emptyListDiv {
    display: block;
    text-align: center;
    margin: 65px auto;
}


#splideFps {

}

.seeAll-gamesList {
    font-family: 'K2D', sans-serif;
    position: absolute;
    bottom: 2px;
    right: 15px;
    color: var(--primary-color);
    transition: all 0.3s;
}
.seeAll-gamesList:hover {
    letter-spacing: 1px;
    color: white;
}

.splideGames {
    padding: 0px 0px 0px 0px !important;
    max-width: 100%;
    display: inline-flex;
    flex-direction: row;
    width: 100%;
    background-image: linear-gradient(to bottom, #80808030, #67676730, #4f4f4f30, #38383830, #232323);

    border-bottom-left-radius: 9px;
    /* border-bottom: 1px solid #f97b2c0d; */
    border-right: 1px solid #f97b2c1f;

    border-bottom-left-radius: 14px !important;
    overflow: hidden;
}


.gamesSubTitle {
    font-family: 'Julius Sans One', sans-serif !important;
    font-size: 1.4em;
    position: relative;
    color: #161515;
    font-weight: bold;
    padding: 7px 29px;
    width: fit-content;
    z-index: 10;
    letter-spacing: 1px;   

    display: inline-flex;
    flex-direction: column;
    height: -webkit-fill-available;
    justify-content: center;
    width: 100%;
    text-align: center;
    padding-right: 32px;

    border-top: 0px solid var(--background-color);
    border-top-left-radius: 9px;
    /* Stylé mais se voit trop quand background gradient gris */
    /* border-top-right-radius: 40px; */ 
}
.gamesGenreTitle {
    position:absolute; 
    /* clip-path: polygon(0 0, 100% 0, 87% 100%, 0 100%); */
    border-top-left-radius: 6px;
    border-bottom-left-radius: 18px;
    /* height:35px; 
    width:130px;  */
    height: 0px;
    width: 5px;
    transform: translateY(-1px);
    z-index:0;
    transition: all 0.37s !important;

    background-image: linear-gradient(to bottom, #2ce4f9,#f97b2ceb, #232323eb), url('../img/testMotif2.jpg');
    background-size: cover;

    animation: GamesGenreTitle1 0.2s 0s ease-in-out forwards, GamesGenreTitle2 0.3s 0.25s ease-in-out forwards;

}

.sectionTeamContent {
    display:inline-flex; 
    width:100%; 
    justify-content:center;
}

.gameHeaderSection1 {
    width:18%;
}
.gameHeaderSection2 {
    width:82%; 
    border-top-right-radius: 7px;
    position:relative; 
    background-size:cover;
    border-width: 0px !important;
}

.deleteSelfMediaDiv {
    background-color: #c74242;
    color: var(--background-color);
    width: 41px;
    display: flex;
    border-top-right-radius: 3px;
    border: 1px solid var(--background-color);

    transition: all 0.3s;
}
.deleteSelfMediaDiv:hover {
    background-color: #df5252;
    color: black;
}
.deleteSelfMediaIcon {
    position: relative;
    align-self: center;
    /* left: 50%;
    transform: translateX(-50%); */
    left: 9px;

    transition: all 0.3s;
}
.deleteSelfMediaDiv:hover .deleteSelfMediaIcon {
    transform: scale(1.3);
}

.deleteSelfTopicDiv {
    background-color: #c74242;
    color: var(--background-color);
    width: 34px;
    display: flex;
    border-top-right-radius: 3px;
    border: 1px solid var(--background-color);

    transition: all 0.3s;
}
.deleteSelfTopicDiv:hover {
    background-color: #df5252;
    color: black;
}
.deleteSelfTopicIcon {
    position: relative;
    align-self: center;
    /* left: 50%;
    transform: translateX(-50%); */
    left: 9px;

    transition: all 0.3s;
}
.deleteSelfTopicDiv:hover .deleteSelfTopicIcon {
    transform: scale(1.3);
}

.sectionTitleGames {
    transition: all 0.37s !important;
}
.sectionTitleGames .GamesGenreTitle {
    transition: all 0.37s !important;
}
.sectionTitleGames:hover .GamesGenreTitle {
    /* background-image: linear-gradient(to bottom, #f97b2c,#f97b2ceb, #23232385), url('../img/testMotif2.jpg'); */
    transform: translateY(-18px);
}

.sectionTitleGames h3 {
    gap: 15px;
    transition: all 0.37s;
}
.sectionTitleGames:hover h3 {
    transform: translateY(-5px) scale(1.08);
}
/* .sectionTitleGames:hover {
    transform: translateY(10px);
} */

/* @keyframes GamesGenreTitle1 {
    0% {
        height: 0px;
    }
    100% {
        height:41px; 
    }
}
@keyframes GamesGenreTitle2 {
    0% {
        width: 5px;
    }
    100% {
        width:189px; 
    }
} */
@keyframes GamesGenreTitle1 {
    0% {
        height: 0px;
    }
    100% {
        height:280px; 
    }
}
@keyframes GamesGenreTitle2 {
    0% {
        width: 5px;
    }
    100% {
        width:189px; 
    }
}


.GamesGenreTitleLong {
    position:absolute; 
    clip-path: polygon(0 0, 100% 0, 91% 100%, 0 100%);
    border-top-left-radius: 6px;
    /* height:35px; 
    width:130px;  */
    height: 0px;
    width: 5px;
    transform: translateY(-1px);
    z-index:0;

    animation: GamesGenreTitleLong1 0.3s 0.1s ease-in-out forwards, GamesGenreTitleLong2 0.4s 0.45s ease-in-out forwards;
}
@keyframes GamesGenreTitleLong1 {
    0% {
        height: 0px;
    }
    100% {
        height:41px; 
    }
}
@keyframes GamesGenreTitleLong2 {
    0% {
        width: 5px;
    }
    100% {
        width:280px; 
    }
}


.arrowCtaFooter {
    transition: all 0.3s;
}
.footerRegisterCta:hover .arrowCtaFooter {
    margin-left: 10px;
}

.btn:hover {
    color: var(--bs-btn-hover-color);
    background-color: var(--background-color);
    border-color: var(--primary-color);
}

.gameSubTitle {
    position: relative;
    padding: 3px 18px;
    width: fit-content;
    z-index: 999;

    /* font-weight: bold; */
    color: white;
    letter-spacing: 1px;
    transition: all 0.3s;
}

#questionsContainer {
    padding: 5px 5px 25px 5px;
    background-color: #0000004a;
    border-radius: 7px;
    border: 1px solid #80808040;
}

.test {
    position: relative;
    z-index: 999;
    color: black;
    left: 15px;
    top: 7px;
}

.gameSubtitleV2 {
    padding: 6px 209px 3px 10px;
    clip-path: polygon(0 0, 100% 0, 95% 100%, 0 100%);
    /* background-color: var(--background-color); */
    background-color: #0d3c42;
    margin-left: 4px;
    border-radius: 4px;
    margin-top: 1px;
    opacity: 0;
    animation: fadeIn 0.5s 0.5s ease forwards;
}

.homeSubTitle {
    position: relative;
    color: #161515;
    font-weight: bold;
    padding: 7px 23px;
    width: fit-content;
    z-index: 10;
    letter-spacing: 1px;   
}


.gameInfosSubTitleBg {
    position:absolute; 
    clip-path: polygon(0 0, 100% 0, 91% 100%, 0 100%);
    border-top-left-radius: 6px;
    /* height:35px; 
    width:130px;  */
    height: 0px;
    width: 5px;
    transform: translateY(-5px);
    z-index:0;

    animation: gameInfosSubTitleBg1 0.3s 0.1s ease-in-out forwards, gameInfosSubTitleBg2 0.4s 0.45s ease-in-out forwards;
}
@keyframes gameInfosSubTitleBg1 {
    from {
        height: 0px;
    }
    to {
        height:45px; 
    }
}
@keyframes gameInfosSubTitleBg2 {
    from {
        width: 5px;
    }
    to {
        width:325px; 
    }
}

.sectionTitleBorderRadius {
    border-bottom-left-radius: 6px;
}

.passLeadTitle {
    width:auto; 
    font-family:'K2D',sans-serif;
}

.groupParamOptionLabel {
    margin-top:15px; 
    width:auto;
}

.gameInfosHeaderTitle {
    position:absolute; 
    clip-path: polygon(0 0, 100% 0, 66% 100%, 0 100%);
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    /* height:35px; 
    width:130px;  */
    height: 0px;
    width: 5px;
    transform: translateY(-1px);
    z-index:99;

    animation: gameInfosHeaderTitle1 0.3s 0.1s ease-in-out forwards, gameInfosHeaderTitle2 0.4s 0.45s ease-in-out forwards;
}
@keyframes gameInfosHeaderTitle1 {
    from {
        height: 0px;
    }
    to {
        height:283px; 
    }
}
@keyframes gameInfosHeaderTitle2 {
    from {
        width: 5px;
    }
    to {
        width:315px; 
    }
}
/* @keyframes gameInfosHeaderTitle1 {
    from {
        height: 0px;
    }
    to {
        height:45px; 
    }
}
@keyframes gameInfosHeaderTitle2 {
    from {
        width: 5px;
    }
    to {
        width:160px; 
    }
} */

.homeTitleIcon {
    /* color: #2ce4f9d4; */
    /* filter: drop-shadow(2px 4px 6px black); */
    color: whitesmoke;
}

.homeFavGamesTitle {
    position:absolute; 
    clip-path: polygon(0 0, 100% 0, 91% 100%, 0 100%);
    border-left: 3px solid #2ce4f9d4;
    border-top-left-radius: 6px;
    /* height:35px; 
    width:130px;  */
    height: 0px;
    width: 5px;
    transform: translateY(-1px);
    z-index:0;

    animation: homeFavGamesTitle1 0.3s 0.1s ease-in-out forwards, homeFavGamesTitle2 0.4s 0.45s ease-in-out forwards;
}
@keyframes homeFavGamesTitle1 {
    0% {
        height: 0px;
    }
    100% {
        height:47px; 
    }
}
@keyframes homeFavGamesTitle2 {
    0% {
        width: 5px;
    }
    100% {
        width:295px; 
    }
}

.modoTitle1 {
    animation: modoTitle1a 0.3s 0.1s ease-in-out forwards, modoTitle1b 0.4s 0.45s ease-in-out forwards !important;
}
@keyframes modoTitle1a {
    0% {
        height: 0px;
    }
    100% {
        height:47px; 
    }
}
@keyframes modoTitle1b {
    0% {
        width: 5px;
    }
    100% {
        width:150px; 
    }
}
.modoTitle2, .modoTitle3 {
    animation: modoTitle2a 0.3s 0.1s ease-in-out forwards, modoTitle2b 0.4s 0.45s ease-in-out forwards !important;
}
@keyframes modoTitle2a {
    0% {
        height: 0px;
    }
    100% {
        height:47px; 
    }
}
@keyframes modoTitle2b {
    0% {
        width: 5px;
    }
    100% {
        width:345px; 
    }
}


.stickerNew {
    font-family: 'K2D', sans-serif;
    text-transform: uppercase;
    padding: 0px 6px;
    background-color: var(--background-color);
    border-radius: 5px;

    min-width: 66px;
    align-self: center;
}

.topicSubMsgCount {
    min-width: 35px;
}

.stickerNewMedia {
    color: #ff4655;
    width: 95px;
    align-self: center;
    padding: 4px 7px !important;
}

.collapseMobile {
    display: none;
}

.stickerNewMediaDetail {
    width: 85px !important;
    text-align: center;
}



.homeUserTeamsTitle {
    position:absolute; 
    clip-path: polygon(0 0, 100% 0, 91% 100%, 0 100%);
    border-top-left-radius: 6px;
    /* height:35px; 
    width:130px;  */
    height: 0px;
    width: 5px;
    transform: translateY(-1px);
    z-index:0;

    border-left: 3px solid #2ce4f9d4;

    animation: homeUserTeamsTitle1 0.3s 0.1s ease-in-out forwards, homeUserTeamsTitle2 0.4s 0.45s ease-in-out forwards;
}
@keyframes homeUserTeamsTitle1 {
    from {
        height: 0px;
    }
    to {
        height:45px; 
    }
}
@keyframes homeUserTeamsTitle2 {
    from {
        width: 5px;
    }
    to {
        width:270px; 
    }
}

.homeUserTeamsTitle, .homeTopicsTitle, .homeMediasTitle {
    border-bottom-right-radius: 33px;
}
.homeFavGamesTitle {
    border-bottom-right-radius: 40px;
}

.createTeamContent {
    width:100%; 
    display:inline-flex;
    flex-direction: column;
}


#group_restriction_18, #group_restriction_mic, #group_status {
    margin-left: 5px;
}


.groupHeaderSection1 {
    width:60%; 
    position:relative;
}

.homeTopicsTitle {
    position:absolute; 
    clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%);
    border-top-left-radius: 6px;
    /* height:35px; 
    width:130px;  */
    height: 0px;
    width: 5px;
    transform: translateY(-1px);
    z-index:0;

    border-left: 3px solid #2ce4f9d4;

    animation: homeTopicsTitle1 0.3s 0.1s ease-in-out forwards, homeTopicsTitle2 0.4s 0.45s ease-in-out forwards;
}
@keyframes homeTopicsTitle1 {
    from {
        height: 0px;
    }
    to {
        height:45px; 
    }
}
@keyframes homeTopicsTitle2 {
    from {
        width: 5px;
    }
    to {
        width:345px; 
    }
}


.homeMediasTitle {
    position:absolute; 
    clip-path: polygon(0 0, 100% 0, 91% 100%, 0 100%);
    border-top-left-radius: 6px;
    /* height:35px; 
    width:130px;  */
    height: 0px;
    width: 5px;
    transform: translateY(-1px);
    z-index:0;
    
    border-left: 3px solid #2ce4f9d4;

    animation: homeMediasTitle1 0.3s 0.1s ease-in-out forwards, homeMediasTitle2 0.4s 0.45s ease-in-out forwards;
}
@keyframes homeMediasTitle1 {
    from {
        height: 0px;
    }
    to {
        height:45px; 
    }
}
@keyframes homeMediasTitle2 {
    from {
        width: 5px;
    }
    to {
        width:209px; 
    }
}


.gameInfosSubTitleBgParam {
    position:absolute; 
    clip-path: polygon(0 0, 100% 0, 91% 100%, 0 100%);
    border-top-left-radius: 4px;
    /* height:35px; 
    width:130px;  */
    height: 0px;
    width: 5px;
    transform: translate(0px, -5px);
    z-index:0;

    animation: gameInfosSubTitleBgParam1 0.3s 0.1s ease-in-out forwards, gameInfosSubTitleBgParam2 0.4s 0.45s ease-in-out forwards;
}
@keyframes gameInfosSubTitleBgParam1 {
    from {
        height: 0px;
    }
    to {
        height:45px; 
    }
}
@keyframes gameInfosSubTitleBgParam2 {
    from {
        width: 5px;
    }
    to {
        width:280px; 
    }
}

.gameTopicsSubTitleBg {
    position:absolute; 
    clip-path: polygon(0 0, 100% 0, 91% 100%, 0 100%);
    border-top-left-radius: 4px;
    /* height:35px; 
    width:130px;  */
    height: 0px;
    width: 5px;
    transform: translate(0px, -5px);
    z-index:0;
    /* background-image: linear-gradient(to right, #ff4655, #ff46558c); */
    transition: all 0.3s;

    animation: gameTopicsSubTitleBg1 0.3s 0.1s ease-in-out forwards, gameTopicsSubTitleBg2 0.4s 0.45s ease-in-out forwards;
}
@keyframes gameTopicsSubTitleBg1 {
    from {
        height: 0px;
    }
    to {
        height:47px; 
    }
}
@keyframes gameTopicsSubTitleBg2 {
    from {
        width: 5px;
    }
    to {
        width:205px; 
    }
}
.gameTopicsSubTitleBg:hover {
    filter: saturate(0.3);
    /* transform: translate(3px, -1px); */
}


.gameTopicsSubTitleBg:has( + .gameSubTitle:hover) {
    filter: saturate(0.3);
    /* transform: translate(3px, -1px); */
}



.modoSectionsSubtitle {
    font-family: 'K2D', sans-serif;
    text-align: center;
    width: 100%;
}


.modoSubTitle1Bg {

    position:absolute; 
    clip-path: polygon(0 0, 100% 0, 91% 100%, 0 100%);
    /* border-top-left-radius: 4px; */
    border-top-left-radius: 3px;
    /* height:35px; 
    width:130px;  */
    height: 0px;
    width: 5px;
    /* transform: translate(0px, -2px); */
    border-left: 20px;
    transform: translate(-2px, 0px);
    z-index:0;
    color: #f5f5f5;
    border-bottom: 2px solid black;

    animation: modoSubTitle1Bg1 0.3s 0.1s ease-in-out forwards, modoSubTitle1Bg2 0.4s 0.45s ease-in-out forwards !important;
}
@keyframes modoSubTitle1Bg1 {
    from {
        height: 0px;
    }
    to {
        height:50px; 
    }
}
@keyframes modoSubTitle1Bg2 {
    from {
        width: 5px;
    }
    to {
        width:350px; 
    }
}

.modoSubTitle1BgReports {

    position:absolute; 
    clip-path: polygon(0 0, 100% 0, 91% 100%, 0 100%);
    /* border-top-left-radius: 4px; */
    border-top-left-radius: 3px;
    /* height:35px; 
    width:130px;  */
    height: 0px;
    width: 5px;
    /* transform: translate(0px, -2px); */
    border-left: 20px;
    transform: translate(-2px, -1px);
    z-index:0;
    color: #f5f5f5;
    border-bottom: 2px solid black;

    animation: modoSubTitle1Bg1Reports 0.3s 0.1s ease-in-out forwards, modoSubTitle1Bg2Reports 0.4s 0.45s ease-in-out forwards !important;
}
@keyframes modoSubTitle1Bg1Reports {
    from {
        height: 0px;
    }
    to {
        height:50px; 
    }
}
@keyframes modoSubTitle1Bg2Reports {
    from {
        width: 5px;
    }
    to {
        width:320px; 
    }
}


.modoSubTitle1BgCensor {

    position:absolute; 
    clip-path: polygon(0 0, 100% 0, 91% 100%, 0 100%);
    /* border-top-left-radius: 4px; */
    border-top-left-radius: 3px;
    /* height:35px; 
    width:130px;  */
    height: 0px;
    width: 5px;
    /* transform: translate(0px, -2px); */
    border-left: 20px;
    transform: translate(-2px, -1px);
    z-index:0;
    color: #f5f5f5;
    border-bottom: 2px solid black;

    animation: modoSubTitle1Bg1Censor 0.3s 0.1s ease-in-out forwards, modoSubTitle1Bg2Censor 0.4s 0.45s ease-in-out forwards !important;
}
@keyframes modoSubTitle1Bg1Censor {
    from {
        height: 0px;
    }
    to {
        height:50px; 
    }
}
@keyframes modoSubTitle1Bg2Censor {
    from {
        width: 5px;
    }
    to {
        width:260px; 
    }
}



.seeAllRedirect {
    font-size: 80%;
    font-family: 'K2D';
    opacity: 0.8;
    font-style: italic;
    transition: all 0.4s;
    text-align: right;
    width: 98%;
    margin-top: 5px;
    display: block;
}
.seeAllRedirect:hover {
    letter-spacing: 1px;
}


.toggleTopicFilter {
    cursor: pointer;
    font-size: 1.4em;
    padding: 5px 20px;
    background-color: white;
    color: #232323;
    margin: 30px 1px;

    transition: all 0.5s;
}


.ellispsis1 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 163px;
}

.tinyLogoDiv {
    background-color: var(--background-color);
    border-top-left-radius: 5px;
}

.tinyLogo {
    width: 25px;
    height: 25px;
    position: absolute;
    left: 14px;
}
.tinyLogoTeam {
    width: 25px;
    height: 25px;
    position: absolute;

    left: 3px;
    top: 3px;
    z-index: 10;
}


.tinyLogoMedia {
    width: 25px;
    height: 25px;
    position: relative;
    margin-right: 10px;
    /* margin-left: 2px; */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

}

.teamCardTitle {
    padding: 3px 10px 7px 10px; 
    /* clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%, 0 100%); */
    clip-path: polygon(17% 43%, 23% 0, 100% 0, 100% 100%, 0 100%, 0 67%);
    width:100%; 
    height:60px;
    padding-left: 50px;
    border-top-right-radius: 4px;

    margin-bottom: 0;
}

.teamCardTitleV2 {
    font-family: 'K2D', sans-serif;
    text-align: center;
    position: relative;
    top: 35px;
    width: 160px;
}

.teamCardSubInfos {
    padding: 5px 0px;
    position: relative;
    bottom: 1px;
    border-left: 91px solid;
    border-bottom: 2px solid;
    border-right: 2px solid;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;

}

#mediaCardHeader {
    color: whitesmoke;
    border: 0px solid whitesmoke;
    border-radius: 4px;

}

.previewMediaCard {
    color: whitesmoke;
    border: 0px solid whitesmoke;
    border-radius: 4px;
}

#createMediaForm {
    position: relative;
    width: 70%;
    margin: 5px auto 25px auto;
    padding: 20px;
    background-color: #0000006b;
    border-radius: 7px;

    transition: all 0.3s;
}

#form_add_media {
    position: relative;
}

#createTopicForm {
    position: relative;
    width: 70%;
    margin: 5px auto 25px auto;
    padding: 20px;
    background-color: #0000006b;
    border-radius: 7px;
}

.opac {
    opacity: 1 !important;
}

.gameCardFav {
    position: absolute;
    bottom: -16px;
    padding: 0px 4px 0 0;
    right: 0px;
    /* background-color: rgb(22, 22, 22); */
    /* clip-path: polygon(0 0, 100% 0, 100% 100%, 18% 100%); */
    opacity: 0.9;
    color: var(--primary-color) !important;
    /* filter: drop-shadow(2px 4px 8px black); */
    /* text-shadow: 1px 1px black; */
    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.6), 1px -1px 0 rgba(0, 0, 0, 0.6), -1px 1px 0 rgba(0, 0, 0, 0.6), 1px 1px 0 rgba(0, 0, 0, 0.6);
    font-size: 50%;
    color: rgba(255,255,255,1);

}

.gameNotationDiv {
    display: inline-flex;
    flex-direction: column;
    /* background-color: var(--background-color); */
    background-color: #0d3c42;
    margin-top: 28px;
    border-top: 5px solid var(--background-color);
    top: 12px;
    color: white;
    position: relative;
    right: 15px;
    border-radius: 4px;
    padding: 0 45px 12px 17px;
    clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%);
    opacity: 0;
    animation: fadeIn 0.5s 0.8s ease forwards;
}
.gameNotationLine {
    text-align: center;
    font-family: 'K2D', sans-serif;
}

.emptyListMsg {
    font-family:'K2D', sans-serif; 
    font-style:italic; 
    font-weight:100; 
    text-align:center; 
    opacity: 0.7;
}


.topicStatus {
    position: relative;
    /* padding: 7px 10px; */
    font-family: 'K2D';
    opacity: 0.8;
    font-weight: 100;
    color: #00ffaf;
    font-size: 1.3em;
    margin: 0px 10px;
}
.topicClosed {
    font-weight: 400 !important;
    color: #ff004c;
}
.topicOpen {
    color: #00ffaf;
}

#notation-input {
    width: 60px !important;
}

.mediaDetailTitle {
    display:inline-flex; 
    justify-content: space-between;
    width:100%; 
    align-items: baseline;
    /* margin: 5px 0 13px 0; */

}


.gameHeaderTitle {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0px;
    z-index: 99;
    cursor: pointer;
    line-height: 37px;

    padding: 0px 50px;
    font-size: 1.7em;
    text-align: center;
    clip-path: polygon(0 0, 100% 0, 89% 100%, 11% 100%);
    background-color: #000000b5;
    color: white !important;
    /* font-weight: bold; */
    backdrop-filter: blur(2px);

    transition: all 0.3s;
}
.gameHeaderTitle:hover {
    background-color: #666666c4;
    padding: 0px 65px;
    border-bottom: 5px solid rgb(240, 240, 240) !important;
    letter-spacing: 1px;
}


.teamCardLink {
    opacity: 0;
    transition: 0.5s;
}


#tarteaucitronRoot button#tarteaucitronBack {
    background: #000 !important;
}
div#tarteaucitronServices {
    box-shadow: 0 40px 60px #552800 !important;
    font-family: 'K2D' !important;
    border-radius: 5px !important;
}
#tarteaucitron .tarteaucitronBorder {
    background-color: var(--background-color) !important;
    color: white !important;
}

#tarteaucitron #tarteaucitronClosePanel {
    background-color: var(--primary-color) !important;
    border-radius: 4px !important;
    padding: 8px 7px !important;
    top: -10px !important;
    color: black !important;
}
#tarteaucitron #tarteaucitronPrivacyUrlDialog {
    background-color: var(--primary-color) !important;
    color: black !important;
    border-radius: 4px !important;
}
#tarteaucitron #tarteaucitronServices .tarteaucitronTitle button {
    background-color: var(--primary-color) !important;
}

#tarteaucitron #tarteaucitronServices .tarteaucitronLine .tarteaucitronName * {
    color: white !important;
}
#tarteaucitron #tarteaucitronServices_mandatory .tarteaucitronH3 {
    color: white !important;
}
#tarteaucitron .tarteaucitronH3 {
    color: white !important;
}

.postAuthor {
    background-color: #4d382b !important;
    border-left: 5px solid var(--primary-color);

}


.candidatureTeamName {
        text-align: center;
        width: fit-content;
        margin: 0 auto;

        color: black;
        padding-left: 45px;
        padding-right: 16px;
        padding-top: 2px;
        padding-bottom: 2px;
        clip-path: polygon(6% 0, 100% 0, 100% 100%, 0% 100%);
        background-color: #f1f1f1;
        border-right: 30px solid red;
}


.gameTeamBtn {
    position: relative;
    padding: 25px 35px;
    margin: 1px;
    border-radius: 0px;
    background-color: rgb(69 69 69);
    color: white;
    cursor: pointer;
    overflow: hidden;

    border-top: 2px solid;
    border-bottom: 2px solid;

    transition: all 0.4s;
  }
  
  .gameTeamBtn:hover {
    color: black;
  }


  .gameTopicList {
    padding: 25px 25px !important;
    width: 85% !important;
    background-color: #00000042;
  }

  .userGameTeamsContainer {
    padding-top: 12px;
    margin-top: 20px;
    padding-bottom: 11px;
    background-color: #00000042;
    border-radius: 8px;
  }
  
  
  .candidatureSubmitBtn {
    z-index: 2;
    width: 200px;
    height: 60px;
    clip-path: polygon(13% 0px, 100% 0px, 87% 100%, 0px 100%);
    position: relative;
    transform: translateX(-18px);
  }
  
  .teamBtnBg {
    position: absolute;
    z-index: 1;
    width: 240px;
    height: 181px;
    transform: translate(-38px, -60px);
    clip-path: polygon(0% 0, 0 0, 0 100%, 0 100%);
    transition: all 0.4s;
  }
  
  .gameTeamBtn:hover .teamBtnBg {
    clip-path: polygon(0% 0, 100% 0, 81% 100%, 0 100%);
  }
  
  .gameTeamBtn1 {
    clip-path: polygon(7% 0px, 100% 0px, 93% 100%, 0px 100%);
  }
  
  .gameTeamBtn2 {
    clip-path: polygon(9% 0px, 100% 0px, 91% 100%, 0px 100%);
    position: relative;
    transform: translateX(-18px);
  }
  
  .candidatureSubmitBg {


    transition: all 0.4s;
  }
  
  .gameTeamBtn:hover .candidatureSubmitBg {
    clip-path: polygon(0% 0, 100% 0, 81% 100%, 0 100%);
  }
  
  .gameTeamBtn:hover .candidatureSubmitBtn {
    color: white;
  }




.rate {
    /* float: left; */
    height: 46px;
    padding: 0 10px;

    overflow: visible;
    display: inline-flex;
    flex-direction: row-reverse;
    /* flex-flow: nowrap; */


}
.rate:not(:checked) > input {
    position:absolute;
    top:-9999px;
}
.rate:not(:checked) > label {
    float:right;
    width:1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:30px;
    color:#ccc;
}
.rate:not(:checked) > label:before {
    content: '★ ';
}
.rate > input:checked ~ label {
    color: #ffc700;    
}
.rate:not(:checked) > label:hover,
.rate:not(:checked) > label:hover ~ label {
    color: #deb217 !important;  
}
.rate > input:checked + label:hover,
.rate > input:checked + label:hover ~ label,
.rate > input:checked ~ label:hover,
.rate > input:checked ~ label:hover ~ label,
.rate > label:hover ~ input:checked ~ label {
    color: #c59b08 !important;
}

.greyed {
    color: #d3d3d3 !important;
}

/* Modified from: https://github.com/mukulkant/Star-rating-using-pure-css */










/* TEST MediaDetail inline img/posts PC */
.mainMediaDetail {
    width: 95% !important;
    max-width: 95% !important;
    margin: 18px auto 30px auto !important;
}

.mediaDetailWrapper {
    display: inline-flex;
    flex-direction: row;
    width: 100%;

    margin-top: 25px;
}

.mediaDetailSection1 {
    width: 50%;
    margin: 0 20px 0 70px;
}
.mediaDetailSection2 {
    width: 50%;
    margin: 0 70px 0 50px;
}
/* Fin test */













.addQuestionIcon {
    align-items: center;
    display: flex;
    font-size: 1.3em;
    padding: 0 10px;
    opacity: 0.9;
}

.requiredQuestionDiv {
    align-items: center;
    display: flex;
    font-size: 1.3em;
    padding: 0 10px;
}

.bulleWaitingCandidature {
    color: black;
    width: 25px;
    display: inline-block;
    text-align: center;
    margin-left:5px;
    font-weight: bold;
    border-radius: 2px;
    border: 1px solid black;
}


.topicCardAuthor {
    width: 25%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.topicCardAuthorModo {
    width: 45%;
    font-family: 'K2D';
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.topicTitle {
    font-family: 'K2D', sans-serif;
    /* width: 60%; */
    max-width: 75%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    transition: all 0.3s;
}

.topicCardSubInfos {
    /* width: 40%; */
    gap: 20px;

    justify-content: space-between;
    display: inline-flex;
}

.msgIconColor {
    color: var(--primary-color);
    position: relative;
    top: 1px;
    align-self: center;
}
.msgIconColorGreyed {
    position: relative;
    top: 1px;
    align-self: center;
    color: grey;
}

.topicTitleModo {
    font-family: 'K2D', sans-serif;
    width: 75%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    transition: all 0.3s;
}
.topicCardSubInfosModo {
    width: 25%;
    justify-content: space-between;
    display: inline-flex;
}

.mediaTitle {
    font-family: 'K2D', sans-serif;
    color: black;
    
    /* Elipsis Ellipsis titre cardMedia*/
    display: inline-block;
    width: 95%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    
    padding: 4px 15px 4px 11px;

}


.topicPost, .mediaPost {
    background-color: #1992a02e;
    color: white;
    font-family: 'K2D', sans-serif;
    padding: 5px 13px;
    margin: 1px auto;
    border-radius: 4px;
    display: inline-flex;
    border: 1px solid #0000005e;
    width: 100%;
    justify-content: space-between;
}

.postContent {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
}


.topicHeaderSection1 {
    background-color: #1992a02e;
    border-radius: 5px;
    padding: 10px 16px;
    
}
.topicHeaderTitle {
    color: #efefef !important;
    font-family: 'K2D', sans-serif;
    font-size: 1.2em;

}
#topic_post_text {
    background-color: #1992a02e;
}

.topicHeaderDiv {
    padding: 5px 5px 2px 5px !important;
    border-top-left-radius: 0px !important;
}

.topicHeaderTitleLabel {
    font-size: 1.7em !important;
    font-weight: bold;
    color: black !important;
    /* background-color: #ff4655; */
    padding: 4px 32px 0px 13px;
    clip-path: polygon(0 0, 87% 0%, 100% 100%, 0% 100%);
    border-top-right-radius: 22px;

    border-top-left-radius: 6px;
    position: relative;
    top: 1px;
}

.topicHeadersubLine {
    /* display:inline-flex; justify-content:space-between; width:100%; font-family:'K2D', sans-serif; font-size:90%; opacity:0.8; */
    display: inline-flex;
    justify-content: space-between;
    width: 100%;
    font-family: 'K2D', sans-serif;
    font-size: 83%;
    opacity: 0.8;
    padding: 0 6px;
}


.mediaHeaderTitle {
    color: #efefef !important;
    font-size: 1.5em;
    font-family: 'K2D';
    padding: 5px 7px 12px 5px;  
}

.postAuthorUser {
    opacity: 0.8;
    font-size: 0.9em;
    font-style: italic;
}
.postSelf {
    color: var(--primary-color);
}

.postText {
    margin-block-start: 0.1em;
    margin-block-end: 0.3em;
}



.topicFirstMsg {
    font-family: 'K2D', sans-serif;
    padding: 5px 10px;
    margin: 2px auto;
    border-top: 1px solid rgba(255,255,255,0.1);
}


.form-control {
    background-color:rgb(60 60 60);
    border: 0px solid;
    font-family: 'K2D', sans-serif;
    color: #b6b6b6;

    transition: all 0.4s;
}

.form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: rgb(170, 170, 170);
}


#topic_post_text {
    /* // padding spécifique pour éviter superposition input et submit btn */
    padding: 0.375em 2.6em 0.375em 1.2em;

}

#topic_post_submit, #media_post_submit {
    background-color: rgba(0,0,0,0);
    border: 0px solid;
    position: absolute;
    bottom: 0;
    right: 0px;
    padding-right: 23px;
    padding-left: 23px;
    margin: 0;
    transition: all 0.3s;
}
#topic_post_submit:hover, #media_post_submit:hover {
    opacity: 0.7;
    background-color: rgba(255,255,255,0.1);
}


.createButton {
    cursor: pointer;
}

.mediaImg {
    width: 100%;
    max-width: 1200px;
    max-height: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center;

    background-color: var(--background-color);
}

 
.mainMediaDetail {
    width: 40%;
    max-width: 75%;
    margin: 30px auto 50px auto;
}

.mediaDetailImg {
    border-radius: 3px !important;
}

.mediaDetailBg {
    border-radius: 3px !important;
    padding: 5px 10px 3px 10px !important;
    border-top-left-radius: 0px !important;

    background-color: #1992a02e !important;
}

.mainTopicDetails {
    width: 62% !important;
}

.mediaCardHeader {
    position: relative;
    display:inline-flex; 
    width:100%; 
    /* justify-content:space-between; */
    /* gap:10px; */
    /* padding: 4px 15px 4px 11px; */
    /* background-color: #151515; */
    background-color: #22c6d826;
    color: white;
}




/* Inversion couleurs listes pair/impair */
.topicList:nth-child(even) a:nth-child(even) .topicCard {
    background-color: #2bb3c259;
}

.topicList:nth-child(even) article:nth-child(even) a:nth-child(even) .topicCard {
    background-color: #2bb3c259;
}

.topicList article:nth-child(even) .topicCard {
    background-color: #2bb3c259;
}
.topicList a:nth-child(even) .topicCard {
    background-color: #2bb3c259;
}
.topicList a:nth-child(even) .topicCardGlobal {
    background-color: #2bb3c259;
}


.sectionHomeContent article:nth-child(even) .topicCard {
    background-color: #2bb3c259;
}

.censuredWordsList article {
    background-color: #2ce4f91a;
}
.censuredWordsList article:nth-child(even) {
    background-color: #2ce4f929;
}



#charCountMsgMedia, #charCountMsg {
    font-family: 'K2D', sans-serif;
    margin: 0 6px;
    font-size: 0.92em;
}

.fileUploadCriteria {
    font-family: 'K2D', sans-serif;
    margin: 0 10px;
    font-size: 0.92em;
    font-weight: bold;
    color: #ff1c1c;
}

.mediaCard {
    background-color: rgba(167, 167, 167,0.8);
    padding: 1px 1px 1px 1px;
    cursor: pointer;

    border-top-left-radius: 3px;
    border-top-right-radius: 3px;

    /* transition: 0.3s; */
}
/* Marche pas a cause de GiffferJS ? */
/* .mediaCard:hover {
    opacity: 0.8;

} */
.mediaCardPreview {
    border-radius: 5px;
    padding: 1px 1px 1px 1px;
}

.mediaList {
    /* width: 70%; */
    width: 54%;

    margin: 30px auto;

    padding: 15px 20px;
    background-image: linear-gradient(to bottom, #2ce4f929, var(--background-color));
}


.mediaStatusValidate {
    display: none;
}

h1, h2, h3, h4 {
    padding: 0;
    margin: 0;
}


.registerBtn {
    text-align: right;
}


.gameHeaderInfos {
    position: relative;
    border-radius: 6px;
    width:100%; 
    display:inline-flex; 
    flex-direction:row; 
    position:relative;

    
    background-size:cover; 
    background-repeat:no-repeat;
}


.gameHeaderInfosTxt {
    font-family:'K2D', sans-serif; 
    display:inline-flex; 
    flex-direction:column; 
    gap:5px;
}

.gameTitle {
    position: absolute;
    color: white;
    text-align: center;
    padding: 10px 40px;
    background-color: #00000017;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: drop-shadow(2px 4px 6px black);

    overflow: hidden;
    max-height: 250px;
    max-width: 80%;

    backdrop-filter: blur(2px);
    border-radius: 7px;
    z-index: 999;
}
.gameTitle h2 {
    font-size: 4.5em;
    font-weight: 900;
}


.reportBtn {
    cursor: pointer;
    font-family: "K2D";
    color: rgba(180, 58, 58, 1);
    font-size: 0.6em;

    align-items: flex-start;
    transition: all 0.5s;
}
.reportBtn:hover {
    color: rgba(180, 58, 58, 1);
}

.reportDivHeader {
    display: inline-flex;
    justify-content: space-between;
    width: 100%;
}
.flexDirColumn {
    flex-direction: column;
}

.reportPreviewMotifsDetails {
    opacity: 0;
    padding: 5px 12px;
    margin: 6px 13px 8px 13px;
    border-radius: 6px;
    background-color: #dc2e2e80;
    border: 1px solid #dc2e2e;

    transition: all 0.3s;
}

.nbrReportsTitle {
    margin-right: 7px;
    width: 100%;
    display: block;
    text-align: center;
}

.reportPreviewFactice {
    font-family: 'Julius Sans One', sans-serif;
    display: flex;
    align-items:center;
    opacity: 0.8;
    font-weight: bold;
    font-size: 1.2em;
    margin-right: 6px;
}

.mediaUpvoteLine {
    font-size: 3em;

    width: 100%;
    display: inline-flex;
    align-items: center;

    justify-content: space-between;
}


.likeMedia {
    align-self: center;
}
.mediaSubLikeDiv {
    /* align-items: center;
    margin: 0 auto; */

    cursor: pointer;
    width: 50%;
    justify-content: center;
    padding: 5px 0;
    border-right: 2px solid #80808029;

    transition: all 0.3s;
}
.mediaSubLikeDiv:hover {
    background-color: #ffffff30;
}

.mediaSubPostsDiv {
    text-align:center; 
    width:50%;
    padding: 5px 0;

    transition: all 0.3s;
}
.mediaSubPostsDiv:hover {
    background-color: #ffffff30;
}


.likeMediaDetail {
    padding: 12px 19px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 5px;
    cursor: pointer;
}
.nbrMediaUpvotes {
    margin-left: 10px;
    font-size: 0.75em;
}

.topicSubCard {
    background-color: rgb(44 44 44);
    padding: 10px;
    margin-bottom: 20px;
}
.notDisplayed {
    display: none !important;
}

#addSessionForm {
    text-align: center;

    position: relative;
    width: fit-content;
    margin: 0 auto;
    padding: 10px 20px;
    background-color: #2ce4f912;
    border-radius: 8px;
    border: 1px solid #8080803d;
}

.profilSection1a {
    width: 60%;
}
.profilSection1b {
    width:40%; 
    margin-top:25px; 
    font-family:'K2D';
}

.mediaApprovalLine {
    width: 100%;
    display: inline-flex;
    justify-content: space-around;
}
.mediaApprovalLine span {
    padding: 10px 35px 3px 35px;
    font-size: 1.2em;
}

.mediaApproveBtn {
    color: var(--primary-color)

}
.mediaRefuseBtn {
    color: rgb(219, 61, 21);
}

.refusedMediaLabel {
    text-align: center;
    padding: 18px;
    font-weight: bold;
    background-color: #151515;
    color: #d34242;
    font-size: 1.3em;

    border-bottom: 1px solid;
    border-right: 1px solid;
    border-left: 1px solid;

    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.waitingMediaLabel {
    text-align: center;
    padding: 18px;
    font-weight: bold;
    background-color: #151515;
    color: #b8a229;
    font-size: 1.3em;

    border-bottom: 1px solid;
    border-right: 1px solid;
    border-left: 1px solid;

    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}



#deleteSelfAccount {
    cursor: pointer;
    font-family: 'K2D', sans-serif;
    background-color: #d11313;
    padding: 4px 15px 7px 15px;
    border-radius: 5px;

    transition: all 0.3s;
}
#deleteSelfAccount:hover {
    background-color: #d11313b7;

}




/* Media Grid  */
.mediaListGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-auto-flow: dense;
    /* grid-template-rows: masonry; */
    grid-column-gap: 5px;
    grid-row-gap: 0px;


}

.inline {
    display: inline-flex;
    gap: 5px;

}


.mediaCardStatsDiv {
    opacity: 1;
    background-color: #151515;
    display: inline-flex;
    width: 100%;
    justify-content: space-between;
    position: relative;
    /* right: 3px; */
    /* padding-top: 15px; */
    font-size: 1.5em;
    color: whitesmoke;

    border-bottom: 1px solid #515151;
    border-right: 1px solid #515151;
    border-left: 1px solid #515151;

    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.topicList {
    width: 75%;
    margin: 0px auto;

}



.upBtnLiked {
    color:var(--primary-color);
    border-color: var(--primary-color);
    /* font-size: 0.8em; */
}


.fa-circle-up {
    /* margin: 0 5px; */
}



.alertFlash {
    font-family: 'K2D', sans-serif;
    position: fixed;
    bottom: 45px;
    right: 10px;
    max-width: 300px;
    /* font-size: 0.60em; */
    border-radius: 5px;
    padding: 10px 20px;

    opacity: 0;
    animation: fadeInFlash 0.7s 0.1s forwards ease, fadeOutFlash 0.8s 2.5s forwards ease;
}
@keyframes fadeInFlash {
    from {
        transform: translateY(-60px);
        opacity: 0;
    }
    to {
        transform: translateY(-0px);
        opacity: 1;
    }
}
@keyframes fadeOutFlash {
    from {
        transform: translateY(-0px);
        opacity: 1;
    }
    to {
        transform: translateY(60px);
        opacity: 0;
    }
}

.errorFlash {
    background-color: #ad0d0d;
    color: white;
}
.successFlash {
    background-color: #0dad55;
    color: rgb(255, 255, 255);
}




.fa-caret-up, .fa-caret-down {
    color: rgb(165, 165, 165);
    font-size: 2em;
}





.warning {
    position: relative;
    z-index: -10;
    color: #ff004c !important;
    opacity: 0.6;
    font-size: 2em;
    transform: translate(-6px, 7px);
    line-height: 0;
}


.groupDescription {
    font-size: 1.5em;
    font-style: italic;
    color:#cfcfcf;

    text-align: center;
    width: 70%;
    margin: 10px auto;

    color: var(--background-color);
    backdrop-filter: blur(31px);
}























.toggleAutoPlay {
    --width: 80px;
    --height: calc(var(--width) / 3);

    position: relative;
    display: inline-block;
    width: var(--width);
    height: var(--height);
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    border-radius: var(--height);
    cursor: pointer;
  }

  .toggleAutoPlay input {
    display: none;
  }

  .toggleAutoPlay .slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--height);
    background-color: #ccc;
    transition: all 0.4s ease-in-out;
  }

  .toggleAutoPlay .slider::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: calc(var(--height));
    height: calc(var(--height));
    border-radius: calc(var(--height) / 2);
    background-color: #fff;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    transition: all 0.4s ease-in-out;
  }

  .toggleAutoPlay input:checked+.slider {
    background-color: #2196F3;
  }

  .toggleAutoPlay input:checked+.slider::before {
    transform: translateX(calc(var(--width) - var(--height)));
  }




  .fa-circle-up {
    cursor:pointer;
  }








#favGameBtn {
    position: relative;
    bottom: 1px;
    border-top-right-radius: 7px;
    cursor: pointer;
    border-bottom-left-radius: 100px;
}


.upTopicPostBtn {
    height: 25px;
}
.postUpvoteIcon {
    /* line-height: 0px; */
}
.downTopicPostBtn {
    height: 25px;
    position: relative;
    /* line-height: 17px; */
    bottom: 6px;
}
.postScore {
    font-size: 85%;
}

.upTopicPostBtn, .downTopicPostBtn, .upMediaPostBtn, .downMediaPostBtn {
cursor: pointer;
}


.fa-heart {
    transition: all 0.5s;
}
.favGameBtn {
    transition: all 0.5s;
}










.nbrPlaceInput {
    width: 70px;
}

.groupListGrid {
    display: inline-flex;
    margin: 20px 0px;
    text-align: center;
    justify-content: space-evenly;
    width: 100%;
}

.groupCard {
    font-family: 'K2D', sans-serif;
    height: fit-content;
    width: 180px;
    margin: 10px 15px;
    border-radius: 2px;

}


#leaveGroupBtn {
    cursor: pointer;
    padding: 10px 15px;
    background-color: #b43a3a;
    border-radius: 3px;
    display: block;
    width: 250px;
    text-align: center;
    margin: 30px auto;

    -moz-box-shadow: 0 0 0px #b43a3a;
    -webkit-box-shadow: 0 0 0px #b43a3a;
    box-shadow: 0 0 0px #b43a3a;
    transition: all 0.4s ease-out;
}
#leaveGroupBtn:hover {
    -moz-box-shadow: 0 0 9px #b43a3a;
    -webkit-box-shadow: 0 0 9px #b43a3a;
    box-shadow: 0 0 9px #b43a3a;
}

#leaveGroupBtn:hover .leaveGroupBtnIcon {
    transform: translateX(10px);
    opacity: 0;
}
.leaveGroupBtnIcon {
    margin-left: 20px;
    font-size: 1.3em;
    transition: all 0.6s ease-out;
}


.membersList {
    display: inline-flex;
    width: 100%;
    margin: 13px auto 0px auto;
    justify-content: center;

    background-color: #0000004a;
    width: fit-content;
    padding: 22px 31px;
    border-radius: 5px;
}
.membersList a, .membersList li {
    margin: 0 9px;
}

.memberCard {
    display: inline-flex;
    flex-direction: column;
    color: black;
    font-family: 'K2D', sans-serif;
    padding: 3px 10px;
    border-radius: 2px;
    /* background-color: ; */
}
.voidMember {
    cursor: pointer;
    color: black;
    font-family: 'K2D', sans-serif;
    padding: 5px 20px;
    height: 58px;
    border-radius: 2px;
    font-size: 1.3em;

    display: flex;
    align-items: center;
}
.voidMember i {
    position: relative;
    bottom: 0px;
    transition: all 0.2s;
}
.voidMember:hover i {
    /* bottom: 3px; */
    transform: scale(1.5);
    filter: drop-shadow(2px 4px 6px black);
}


.addSessionBtn {
    font-family: 'K2D', sans-serif;
    margin-bottom: 20px;
}

#session_title {
    width: 100%;
    margin: 5px auto 10px auto;
}

#date_end_picker, #date_start_picker {
    border-radius: 5px;
    font-family: 'K2D', sans-serif;
}

.voidMemberNoClick {
    /* cursor: pointer; */
    color: black;
    font-family: 'K2D', sans-serif;
    padding: 5px 20px;
    height: 58px;
    border-radius: 2px;
    font-size: 1.4em;

    display: flex;
    align-items: center;
}
.voidMemberNoClick i {
    position: relative;
    bottom: 0px;
    transition: all 0.2s;
}
.voidMemberNoClick:hover i {
    /* bottom: 3px; */
    /* transform: scale(1.5);
    filter: drop-shadow(2px 4px 6px black); */
}

.formAddGroup {
    width: 40%;
    margin: 60px 50px 60px 50px;
}




#questionsContainer {
    display: inline-flex;
    flex-direction: column;
    width: 100%;
}

.inputQuestionLine {
    display: inline-flex;
    justify-content: space-between;
    width: 92%;
    margin: 15px auto;
}


.questionRequired {
    padding: 10px;
    margin-left: 20px;
}

.deleteQuestion {
    position: absolute;
    right: 0px;
    bottom: 1px;
    color: #c54646;
    padding: 8px 20px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    transition: all 0.4s;
}
.deleteQuestion  i {
    transition: all 0.4s;
}
.deleteQuestion:hover {
    background-color: #c54646;
}
.deleteQuestion:hover i {
    color: rgb(255, 255, 255);
}

.questionsContainer {
    display: flex;
    flex-direction: column;
    /* width: 92%; */
    margin: 0px auto 30px auto;
}
.questionLine {
    font-family: 'K2D', sans-serif;
    justify-content: space-between;
    margin-top: 2px;
    border-radius: 3px;
    padding: 10px 10px 0px 5px;
}
.questionLineList {
    position: relative;
    background-color: #0000004a;
    border-radius: 5px;
    font-family: 'K2D', sans-serif;
    justify-content: space-between;
    margin-top: 4px;
    padding: 10px 10px 7px 10px;
    border: 1px solid #80808040;
}
.requiredStar {
    color: #b43a3a;
    font-size: 0.5em;
    margin-left: 5px;
    position: relative;
    bottom: 10px;
}

.hiringTxt {
    font-family: 'K2D', sans-serif;
    font-size: 1.2em;
    background-color: #0000004a;
    width: fit-content;
    padding: 5px 15px;
    border-radius: 5px;
    border: 1px solid #80808040;
}

.questionAndAnswer {
    margin: 2px auto;
    width: 100%;
}

.deleteQuestionBtn {
    cursor: pointer;
}


.teamHeaderAge {
    position: absolute;
    bottom: 0;
    left: -3px;
    font-family: 'K2D', sans-serif;
    margin-bottom: 0px;
    backdrop-filter: blur(30px);
    color: black;
    padding: 1px 6px;
    border-radius: 5px;
}


.verticalCenter {
    position: relative;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
}


.candidaturesListBtn {
    border: 2px solid;
    cursor: pointer;
    color: white;
    padding: 10px 18px;
    border-radius: 3px;
    margin: 25px auto;
    display: block;
    width: fit-content;
    background-color: #0000004a;

    transition: all 0.4s;
}
.candidaturesListBtn {

}


.togglesContainer {
    font-family: 'K2D', sans-serif;
    display:flex; 
    flex-direction:column;
    margin: 10px auto 0px auto;

    border: 1px solid #80808033;
    background-color: #0000004a;
    padding: 17px 10px 6px 18px;
    border-radius: 8px;
    border: 1px solid #80808040;
}

.passLeadDiv {
    position: relative;
    background-color: #0000004a;
    padding: 9px 5px 19px 15px;
    margin-right: 40px;
    border-radius: 8px;
    border: 1px solid #80808040;
    margin-top: 8px;
}


.blacklistBtn {
    border: 1px solid rgba(167, 167, 167,0.8);
    cursor: pointer;
    color: white;
    padding: 10px 18px;
    border-radius: 3px;
    margin: 25px 0;
    display: block;
    width: fit-content;
    background-color: rgb(56 56 56);

    border-color: grey;
    opacity: 0.7;
    border-width: 1px;
    cursor: default;
    margin: 29px auto 5px auto;

    transition: all 0.4s;
}
.blacklistBtn:hover {
    border: 1px solid rgba(255, 255, 255, 1);
}


.candidaturesContainer {
    background-image: linear-gradient(to bottom, #2ce4f929, var(--background-color));

    padding: 25px 0;
    border-radius: 12px;

    width: 85%;
    margin: 45px auto;
}

.candidatureCard {
    position: relative;
    overflow: hidden;
    background-color: #22c6d836;
    border-radius: 7px;
    padding: 6px 10px;

    transition: all 0.3s;
}
.candidatureCard:hover span, .candidatureCard:hover pre {
    z-index: 9;
    position: relative;
    /* color: var(--background-color); */
}
.candidatureCard:hover {
    border-left-width: 0px !important;
}

.candidatureCardLink {
    display: block;
    width: 80%;
    margin: 0 auto;
}


.candidatureCardHoverElem {
    height: -webkit-fill-available;
    z-index: 5;
    width: 110%;
    position: absolute;
    /* background-color: red; */
    left: -112%;
    top: 0;

    transition: all 0.3s ease-in-out;
}
.candidatureCard:hover .candidatureCardHoverElem {
    left: -9%;
}

.candidatureCardContent {
    background-color: #23585f;
    z-index: 999;
    position: relative;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
}

.paranthesePortfolio {
    position: absolute;
    /* color: var(--primary-color); */
    color: white;
    transform: rotate(90deg);
    font-size: 1.5em;
    font-weight: bold;
    bottom: -18px;
    right: 13px;    
}
.whiteFont {
    color: white !important;
}


.questionAnswerContainer {
    display:flex; 
    flex-direction:column;
    margin: 10px auto;
    padding: 5px 10px;
    border: 1px solid rgba(116, 116, 116, 0.5);
    border-radius: 3px;
    width: 100%;
}

.candidatureQuestion {


}

.leaderCard {
    /* border: 2px solid #ffe039; */
    padding: 3px 13px;
}



.kickMemberBtn {
    cursor: pointer;
    text-align:center;
    color: #161515;
    cursor: padding;

    transition: all 0.3s;
}
.kickMemberBtn:hover {
    transform: scale(1.2);
    filter: drop-shadow();
}

#navLine {
    transition: all 0.3s ease;
}

#profilBurgerMobile {
    display:none;
}

.decoBtnMobile {
}

.navLine {
    display: inline-flex;
    font-family: 'K2D';
    background-color: #04010054;
    border-top-left-radius: 7px;

    border-top: 1px solid #8f8f8f3b;
    border-left: 1px solid #8f8f8f3b;

    backdrop-filter: blur(2px);
}
.navLine * {
    padding: 0px 10px;
}
.navLine a {
    border-right: 1px solid rgba(179, 179, 179, 0.35);
}
.navLine a:nth-last-child(2) {
    border-right: 0px solid rgba(179, 179, 179, 0);
}


.btn:disabled {
    color: var(--bs-btn-disabled-color);
    pointer-events: none;
    background-color: #525252;
    border-color: #000000;
    opacity: var(--bs-btn-disabled-opacity);

    opacity: 0.36 !important;
}


.caps {
    text-transform: uppercase;
}

.gamesNav {
    padding-top: 5px;
    padding-bottom: 4px;
    border-top: 2px solid rgba(0,0,0,0);
    transition: all 0.25s;
}
.teamsNav {
    padding-top: 5px;
    padding-bottom: 4px;
    border-top: 2px solid rgba(0,0,0,0);
    transition: all 0.25s;
}
.homeNav {
    padding-top: 5px;
    padding-left: 10px;
    padding-bottom: 6px;
    border-top: 2px solid rgba(0,0,0,0);
    transition: all 0.25s;
    border-top-left-radius: 3px;
}
.modoNav {
    color: white !important;
    padding-top: 5px;
    padding-left: 2px;
    text-transform: uppercase;
    border-left: 1px solid #808080a8;
    border-top: 2px solid rgba(0,0,0,0);

    transition: all 0.25s;
}
.notifsNav {
    /* padding-right: 3px !important; */
    color: white;
    transition: all 0.25s;
    border-top: 2px solid rgba(0,0,0,0);
}

.gamesNav:hover {
    /* background-color: white;
    color: black; */
    color: var(--primary-color);
    background-color: #2ce4f936;
    border-top: 2px solid var(--primary-color);
}
.teamsNav:hover {
    /* background-color: white;
    color: black; */
    color: var(--primary-color);
    background-color: #2ce4f936;
    border-top: 2px solid var(--primary-color);
}
.homeNav:hover {
    /* background-color: white;
    color: black; */
    color: var(--primary-color);
    background-color: #2ce4f936;
    border-top: 2px solid var(--primary-color);
}
.notifsNav:hover {
    /* background-color: white;
    color: black; */
    color: var(--primary-color);
    background-color: #2ce4f936;
    border-top: 2px solid var(--primary-color);
}
.modoNav:hover {
    /* background-color: white;
    color: black !important; */
    color: var(--primary-color);
    background-color: #2ce4f936;
    border-top: 2px solid var(--primary-color);
}

.navActive {
    /* border-bottom: 3px solid var(--primary-color); */
    background-color: var(--primary-color);
    color: black;
}

.notifBell {
    /* color: white; */
}
.newNotifBubbleCount {
    /* Pour diff entre 1 et 2 etc... */
    width: 20px;

    position: absolute;
    right: -3px;
    background-color: #dc2e2e;
    color: #ffe3e3;
    padding: 0px 4px;
    padding-top: 2px;
    /* border-radius: 100px; */
    border-radius: 2px;
    top: -1px;
    line-height: 15px;
    font-weight: 600;
    border: 1px solid rgba(0, 0, 0, 0.4);

    font-size: 80%;
    font-weight: 500;
}

.bubleNotif {
    right: 3px;
    top: 3px;
}

.bubleModo1 {
    top:4px;
    background-color: #0fa50f;
    width: 18px;
    line-height: 13px;
    font-size: 80%;
    font-weight: 500;

    border-radius: 0px;
}
.bubleModo2 {
    top:4px;
    right: -26px;
    width: 18px;
    line-height: 13px;
    font-size: 80%;
    font-weight: 500;

    border-radius: 0px;
}


.notifCard {
    position: relative;
    font-family: 'K2D', sans-serif;
    background-color: var(--sectionBg-color);
    /* padding: 20px 15px; */
    padding: 20px 58px 20px 15px;
    border-radius: 3px;
    margin: 4px auto;
    /* width: 75%; */
    width: 100%;
    background-color: #2ce4f91c;
    /* background-image: linear-gradient(289deg, #00000059, #2ce4f91c); */
    border: 1px solid #8080803d;
    transition: all 0.3s;
}
.notifCard:hover {
    background-image: linear-gradient(289deg, #00000059, #2ce4f944);
    border: 1px solid #8080807c;

}


.deleteSingleNotif {
    position: absolute;
    color: #ffc4c4;
    padding: 10px 15px;
    font-size: 1.5em;
    top: 50%;
    transform: translateY(-50%);
    right: 5px;
    cursor: pointer;

    transition: all 0.3s;
}
.deleteSingleNotif:hover {
    color: #b43a3a;
}



.notifListButtons {
    display: inline-flex;
    justify-content: center;
    width: 100%;
}


.cleanNotifsBtn {
    color: #fe6565;
    padding: 15px 18px;
    font-size: 1.5em;
    border-radius: 100px;
    border: 1px solid #585858;
    background-color: #2ce4f91c;
    display: block;
    text-align: center;
    width: fit-content;
    margin: 50px auto;
    transition: all 0.3s;

    margin-left: 10px;
}
#allSeenLink {
    color: #d3d3d3;
    padding: 14px 17px;
    font-size: 1.1em;
    border-radius: 100px;
    border: 1px solid #585858;
    background-color: #2ce4f91c;
    display: block;
    text-align: center;
    width: fit-content;
    /* margin: 50px auto; */
    margin-top: 50px;
    margin-bottom: 51px;
    transition: all 0.3s;
    

    margin-right: 10px;
}

.cleanNotifsBtn:hover, #allSeenLink:hover {
    border: 1px solid #b5b5b5;
    background-color: #2ce4f931;
    transform: scale(1.1);
}


.fadeOutNotifPeriod {
    animation: fadeOutNotifPeriod 0.5s 0s 1 forwards ease;
}
@keyframes fadeOutNotifPeriod {
    from {
        opacity: 1;
        margin-right: 7px;
    }
    to {
        margin-right: -15px;
        opacity: 0;
    }
}

.fadeOutNotifCard {
    animation: fadeOutNotifCard 0.5s 0s 1 forwards ease;
}
@keyframes fadeOutNotifCard {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}


.unclickedNotifSpot {
    color: var(--primary-color);

    margin-right: 10px;
    font-size: 0.7em;
    position: relative;
    bottom: 1px;
}



.notifCardLine {
    position:relative; display:flex; width:55%; margin: 0px auto
}







.fadeOut {
    animation: fadeOut 0.5s 0s 1 forwards ease;
}
@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
.fadeIn {
    animation: fadeIn 0.5s 0s 1 forwards ease;
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


.mediaCardModo {
    max-width: 375px;
}

.greetingMsg {
    color: var(--primary-color);
    font-weight: bold;
    font-size: 2.1em;
    text-align: center;
    width: 100%;
    margin: 0px auto 45px auto;
}

.sectionContainer {
    border-left: 6px solid var(--primary-color);
    margin: 50px auto;
    padding: 4px 0px 15px 0px;
    /* border-radius: 6px; */
    border-radius: 7px;
}


.teamSectionContainer {
    background-image: linear-gradient(to bottom, #2ce4f929, var(--background-color));
}

.sectionContainerGameDetail {
    background-image: linear-gradient(to bottom, #2ce4f929, var(--background-color));
}

.sectionHomeContainer {
    /* box-shadow: 0 0 0px 0px var(--primary-color); */
    margin: 20px auto 50px auto;
    padding: 0px 0px 15px 0px;
    border-radius: 6px;
    border-top: 2px solid #2ce4f9d4;
    background-image: linear-gradient(to bottom, #2ce4f929, var(--background-color));

    /* animation: blinkBoxShadow 0.9s 0.5s forwards linear 1; */
}
.sectionHomeContainerGames {
    /* margin: 20px auto 50px auto;
    padding: 0px 10px 15px 0px;
    border-radius: 6px;
    border-top: 1px solid #2ce4f9a3; */

    box-shadow: 0 0 0px 0px var(--primary-color); 
    margin: 45px auto 2px auto;
    padding: 0px 10px 15px 0px;
    border-radius: 6px;
    border-top: 2px solid #2ce4f9a3;

    background-image: linear-gradient(to bottom, #2ce4f929, var(--background-color));
}

.inlineFlex {
    display: inline-flex;
    width: 100%;
}

#changePasswordForm {
    opacity: 0;
    transition: all 0.3s;
}
.greyedInput {
    filter: opacity(0.5) brightness(0.5);

}
.opacityNul {
    opacity: 1 !important;
}

#changePasswordForm label {
    text-align: left;
}

#showPasswordChangeForm {
    width: fit-content;
    display: block;
    margin: 0px auto 15px auto;
    background-color: var(--primary-color);
    padding: 4px 15px 7px 15px;
    border-radius: 5px;
    transition: all 0.3s;
    cursor: pointer;
    color: var(--background-color);
    border: 1px solid var(--background-color);
    border-bottom: 2px solid;
}

.fa-square-up-right {
    color: var(--primary-color);
}

#showBurgerMenu {
    display: none;
}


.nbrPlacesTeam {
    align-self: center;
    font-size: 1.8em;

    margin-right: 25px !important;
    margin-left: 9px !important;
}


.teamCard {
    position: relative;
    display: inline-flex;
    height: 150px;
    background-color: rgb(49 49 49);
    border-radius: 5px;
    /* margin: 15px; */
    border: 1px solid;
    overflow: hidden;

    transition: all 0.3s;
}

.teamCardTextDiv {
    position: relative;
    padding: 5px 15px;
    z-index: 999;
    background-color: #2ce4f91a;

    transition: all 0.3s;
}


.absoluteBg-teamCard {
    width: 221px;
    height: 200px;
    /* left: -20px; */
    left: -240px;
    top: -20px;
    position: absolute;
    /* background-color: #74c814; */

    transition: all 0.3s;
}



.teamCardImg {
    max-width:100%;
    max-height:100%;
    object-fit: cover;
    min-height: -webkit-fill-available;

    /* padding: 2px 2px 2px 2px; */
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    /* border-radius: 7px; */

    width: 220px;
    /* height: 200px; */

    position: relative;
    z-index: 100;

    transition: all 0.3s;
}
.teamCardImgWrapper {
    overflow: hidden;

    z-index: 9;
    position: relative;
}


.teamCard:hover {
    /* border-width: 3px;
    transform: translate(-1px, -1px); */
    /* border-left-width: 5px; */
}



.teamCardReflectDiv {
    position: absolute;
    height: 200px;
    background-color: rgba(255, 255, 255, 0.1);
    position: absolute;
    height: 200px;
    top: -32px;
    left: -95px;
    z-index: 999;
    transform: rotate(20deg);
    width: 38px;

    transition: all 0.4s;
}

.teamCard:hover .teamCardReflectDiv {
    left: 300px;
}


.teamCard:hover .teamCardImg {
    transform: scale(1.15);
}
.teamCard:hover .teamCardTextDiv {
    color: black;
    /* border-left-width: 5px; */
}
.teamCard:hover .absoluteBg-teamCard {
    /* left: -20px; */
    left: -34px;
}

.teamCard:hover .teamCardGameTitle {
    background-color: var(--background-color) !important;
    transform: translate(-12px, -2px);
    color: white;
}

.teamCardGameTitle {
    position: absolute;
    padding: 2px 10px;
    /* transform: translate(-12px, -2px); */
    transform: translate(-15px, -6px);
    border-top-left-radius: 3px;
    /* transform: translate(-16px, 7px); */
    left: 15px;
    color: black;

    max-width: 250px;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    clip-path: polygon(0 0, 100% 0, 89% 100%, 0% 100%);
    padding-right: 25px;

    z-index: 9995;

    transition: all 0.3s;
}

.groupsGrid {
    width: 90% !important;
    margin: 45px auto;
    /* text-align-last: center; */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 25px;
    grid-row-gap: 50px;

    justify-items: center;

    padding: 25px;
    background-color: #00000047;
    border-radius: 8px;
}

#motifSelect {
    margin-bottom: 25px;
}

.teamCard-isActiveLabel {
    position: absolute;
    bottom: 0;
    font-family: 'K2D';
    right: 0;
    font-size: 0.9em;
    z-index: 105;
    border-bottom-right-radius: 0px !important;
    background-color: #00000075;
    padding: 0px 8px;
    border-top-left-radius: 10px;
}

.teamCard-criterias {
    display: inline-flex;
    position: absolute;
    bottom: 3px;
    right: 6px;
    margin-bottom: 0;
}
.teamCard-criterias li {
    width:20px;
    margin: 0 1px;
}
.teamCard-criterias img {
    width:20px;
}

.sectionContent {
    justify-content: center;
    position: relative;
    padding: 20px 35px 20px 35px;
    opacity: 0;
    /* display: flex; */

    animation: fadeInSection 0.4s 0.3s forwards ease;
}
.sectionHomeContent {
    justify-content: center;
    padding: 40px 35px 20px 35px;
    opacity: 0;

    animation: fadeInSection 0.4s 0.5s forwards ease;
}
@keyframes fadeInSection {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}  

.sectionContentMediaDiv {
    margin: 20px 50px 20px 50px !important;
    padding-top: 5px !important;
    border-radius: 6px !important;
    background-color: #00000042;
}


.sectionTeamParam {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}

.modoSection {
    border-top: 1px solid #2ce4f9d4;
    padding: 0px 20px 15px 0px;
    border-radius: 7px !important;
    border-left: 4px solid var(--primary-color);
    background-image: linear-gradient(to bottom, #2ce4f929, var(--background-color));
}

.mediaListModo {
    width: fit-content;
}

.modoSectionRed {
    border-top: 1px solid #dc2e2e !important;
    border-left: 6px solid #dc2e2e !important;
}



.reportsDiv {
    font-family: 'K2D', sans-serif;
    display:inline-flex; 
    flex-direction:column; 
    width:100%;
    margin: 45px auto 20px auto;
}
.reportPreviewBtn {
    border: 1px solid #b2ffdf79;
    background-color: #1d909e29;
    padding: 5px 10px;
    border-radius: 4px;
    width: 60%;
    margin: 7px auto;

    color: white;

    transition: all 0.3s;
}
.reportPreviewBtn:hover {
    /* background-color: #e91e4d56; */
    /* border: 2px solid #b2ffdf79;
    margin: 6px auto; */

}


.addCensorSubDiv {
    position: relative;
    margin: 45px auto 0 auto;
    display: flex;
    width: 293px;
}

#censure_word {
    background-color: #42eaff29 !important;
    border: 1px solid #80808096;
}
#censure_word:focus {
    color: white;
}

.reportPreviewFacticeTxt {
    transition: all 0.4s;
}


.reportCardCensureForm {
    display:flex; 
    flex-direction:column; 
    justify-content:center;

    margin-top: 6px;
    gap: 22px;
}

#inputPunishEndDate0 {
    background-color: #e9fdff;
    padding: 5px 14px;
    border-radius: 7px;
}


.justiceHammerImg {
    width: 50%;
    margin: 0 auto;
    border-bottom: 1px solid;
}

#inputPunishEndDateLabel0 {
    width: 130px;
}

.reportCardInnocentDiv {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    width: 45%;
    height: 235px;
    padding: 5px 10px;
    border-radius: 8px;
    text-align: center;
    background-color: rgb(19 193 95 / 53%);
    border: 3px solid #56ff008f;

    transition: all 0.3s;
}
.reportCardInnocentDiv:hover {
    background-color: rgb(53 193 114);
    /* color: black; */
}
.reportCardInnocentDiv img {
    transition: all 0.3s;
}
.reportCardInnocentDiv:hover img {
    transform: scale(1.15);
}
.reportCardInnocentDiv span {
    transition: all 0.3s;
}
.reportCardInnocentDiv:hover span {
    letter-spacing: 1px;
    margin-top: 15px;
}

.reportCardType {
    width: fit-content;
    padding: 5px 20px 5px 10px;
    position: relative;
    font-size: 1.35em;
    bottom: 6px;
    right: 11px;
    border-top-left-radius: 5px;
    background-color: var(--primary-color);
    color: var(--background-color);
    font-weight: bold;
    clip-path: polygon(0 0, 100% 0, 91% 100%, 0% 100%);
    border-bottom-right-radius: 20px;
}

.spinningLoader {
    display: none !important;
}
.spinningLoaderReportCard {
    display: none;
}

.spinner {
    /* transform: scale(1.5); */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* height: 100vh; */
    /* width: 100vw; */

    position: absolute;
    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);
  }
  /*******************\
   Loading Roller
   \*******************/
  @keyframes lds-roller {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  .lds-roller {
    position: relative;
    display: inline-block;
    height: 64px;
    width: 64px;
  }
  .lds-roller div {
    animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    transform-origin: 32px 32px;
  }
  .lds-roller div:after {
    position: absolute;
    display: block;
    background: var(--primary-color);
    border-radius: 50%;
    content: " ";
    margin: -3px 0 0 -3px;
    height: 6px;
    width: 6px;
  }
  .lds-roller div:nth-child(1) {
    animation-delay: -0.036s;
  }
  .lds-roller div:nth-child(1):after {
    top: 50px;
    left: 50px;
  }
  .lds-roller div:nth-child(2) {
    animation-delay: -0.072s;
  }
  .lds-roller div:nth-child(2):after {
    top: 54px;
    left: 45px;
  }
  .lds-roller div:nth-child(3) {
    animation-delay: -0.108s;
  }
  .lds-roller div:nth-child(3):after {
    top: 57px;
    left: 39px;
  }
  .lds-roller div:nth-child(4) {
    animation-delay: -0.144s;
  }
  .lds-roller div:nth-child(4):after {
    top: 58px;
    left: 32px;
  }
  .lds-roller div:nth-child(5) {
    animation-delay: -0.18s;
  }
  .lds-roller div:nth-child(5):after {
    top: 57px;
    left: 25px;
  }
  .lds-roller div:nth-child(6) {
    animation-delay: -0.216s;
  }
  .lds-roller div:nth-child(6):after {
    top: 54px;
    left: 19px;
  }
  .lds-roller div:nth-child(7) {
    animation-delay: -0.252s;
  }
  .lds-roller div:nth-child(7):after {
    top: 50px;
    left: 14px;
  }
  .lds-roller div:nth-child(8) {
    animation-delay: -0.288s;
  }
  .lds-roller div:nth-child(8):after {
    top: 45px;
    left: 10px;
  }
  
input:disabled { 
    color:rgb(196, 196, 196) !important;
}

.strongNbr {
    color: rgb(255, 105, 105);
    font-weight: bold;
}


.clickableContainer {
    display: inline-flex;
    width: 100%;
    justify-content: space-evenly;
    align-items: center;

    padding: 15px;
    gap: 15px;

    border-top: 1px solid rgba(128, 128, 128, 0.507);
    margin: 7px auto;
}


.reportPreviewBtn:not(.clickableContainer) {
    cursor: pointer;
}

.reportDateAndAuthorDiv {
    display:inline-flex; 
    justify-content:space-between; 
    width:100%;
    font-style: italic;
    margin-top: 5px;
}

.reportCardText {
    margin: 8px auto 5px auto;
    background-color: #ffffff30;
    padding: 10px auto 2px auto;
}

.reportContentDiv { 
    position: relative;
    background-color: var(--background-color);
    width: 95%;
    /* min-height: 350px; */
    margin: 12px auto;
    padding: 5px 15px 10px 15px;
    border-radius: 5px;
    border: 2px solid #dc2e2e70;
}

.minHeightLoader {
    min-height: 350px;
}

.reportQuote { 
    margin: 0 10px;
    font-size: 110%;
}


.toggleSentence {
    background-color: #1d909e5e;
    padding: 5px 5px;
    margin: 15px 3px;
    border-radius: 3px;
    
    border: 1px solid rgba(128, 128, 128, 0.445);
    transition: 0.3s;
}
.toggleSentence:hover {
    background-color: rgba(170, 47, 47, 0.438);
}

.sentenceActif {
    background-color: rgba(226, 0, 0, 0.438);
    border: 1px solid #ffffffa6 !important;
}

.reportDetailImg {
    width: 100%;
}

.reportPostBtn {
    cursor: pointer;
    color: rgb(255, 81, 81);
    font-size: 0.9em;
    font-style: italic;
    margin-left: 7px;
}

.postPublishDate {
    cursor: pointer;
    opacity: 0.8;
    font-size: 0.9em;
    font-style: italic;
    margin-left: 7px;
}

.innocenterBtn {
    height: fit-content;
    align-self: center;
    text-align: center;
    font-size: 1.7em;
    /* padding: 5px 10px;

    border-radius: 2px;
    background-color: rgb(86, 150, 57); */

    /* align-center du parent suffi pas: */
    /* position: relative;
    top: 10px; */
}
.censureBtn {
    color: white;
    border: 1px solid rgb(167, 0, 0);
    padding: 5px 10px 8px 10px;
    border-radius: 2px;
    background-color: #dc2e2e;

    width: 92%;
    align-self: center;
    font-size: 1.2em;
    border-radius: 5px;
    margin: 10px auto;

    transition: all 0.3s;
}
.censureBtn:hover {
    border: 1px solid rgb(255, 255, 255);
    background-color: rgb(167, 0, 0);
}

.reportCardSentenceDiv {
    height: 235px;
    padding: 0px 5px 10px 5px;
    background-color: #271c1c;
    border-radius: 8px;
    border: 3px solid #dc2e2e94;
}

.sentenceIconModo {
    margin-right: 5px;
}

.censuredWordsList {
    display:flex; 
    flex-direction:column; 
    width:50%; 
    margin:50px auto 25px auto;  
    height:245px; 
    overflow:scroll; 
    overflow-x:hidden;
}
.censuredWordsList::-webkit-scrollbar {
    border-radius: 10px;
    width: 8px; /* Adjust the width as needed */
  } 
  .censuredWordsList::-webkit-scrollbar-track {
    border-radius: 10px;

    background-color: #0a0a0a; /* Adjust the background color as needed */
  }
  
  .censuredWordsList::-webkit-scrollbar-thumb {
    border-radius: 10px;

    background-color: #dc2e2e; /* Adjust the color as needed */
  }
  
  .censuredWordsList::-webkit-scrollbar-thumb:hover {
    background-color: #dc2e2e; /* Adjust the color as needed */
  }



#group_restriction_lang {
    width: fit-content;
}

.flash-container {
    bottom: 40px !important;
}


.modalDialog {
    font-family: 'K2D', sans-serif;
    border-radius: 7px;
    background-color: #e6e6e6;
    font-size: 0.8em;
    border-width: 2px;

}

.confirmModal, .cancelModal {
    
    font-family: 'K2D', sans-serif;
    font-size: 1em;
    padding: 6px 20px;
    margin: 0 5px;
    border-radius: 3px;

    cursor: pointer;
    transition: all 0.3s;
}

.confirmModal {
    background-color: var(--primary-color);
}
.cancelModal {
    background-color: #bdbdbd;
}

.confirmModal:hover {
    
}
.cancelModal:hover {

}




/* WIP Masonry grid Medias */
/* TODO: Responsive */
.masonry-grid {
    column-gap: 10px;
    column-count: 3; /* Adjust the number of columns as needed */
    width: 90%;
    margin: 30px auto;
  }
  
  .grid-item {
    display: inline-block;
    margin-bottom: 16px;

    width: fit-content;
    max-width: 350px;

    transition: all 0.2s;
  }
  .grid-item:hover {
    filter: drop-shadow(2px 4px 6px black) brightness(1.05) contrast(1.12);
    transform: translateY(-5px);
    color: black;
  }
  
  .grid-item img {
    height: auto;
  }