.avantage-binance{
    display: flex;
    gap: 10px;
    font-family: "poppins";
    color: #fff;
    max-width: 100%;
    width: 90%;
    margin: 50px auto;
}
.item-avantage{
    display: flex;
    flex-direction: column;
    max-width: calc(100% / 3);
}
.item-avantage img{
    height: 45px;
    width:fit-content;
}
.item-avantage h4{
    font-size: 21px;
    margin-top: 20px;
}
.item-avantage p{
    font-size: 14px;
    color: #eccbf6;
}
.item-avantage i{
    font-size: 48px;
    color: #daa520;
}

.notlogin{
    position: relative !important;
    bottom: auto !important;
    margin-top: 40px;
    margin-right: -400px;
}
#error_stock_limit{
    color: red;
    margin-top: 10px;
    display: none;
}

.grp-btn-achter{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}
.add-commande{
    display: none;
    font-size: 14px;
    text-align: center;
    text-transform: capitalize;
    color: #17061c;
    padding: 5px 20px;
    border-radius: 3px;
    background-color: #f7a438;
    max-width: 100%;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}
.add-commande:hover{
    color: #fff;
    background-color: #41234b;
}
.add-commande.active{
    display: block;
}
.alerte-server{
    display: none;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: #17061c;
    padding: 5px 20px;
    border-radius: 3px;
    background-color: #f7a438;
    width: 200px;
    cursor: pointer;
}
.alerte-server span{
    font-size: 14px;
}
.alerte-server:hover i{
    animation: bellShake 1s ease-in-out 1;
}
.alerte-server.active{
    display: flex;
}
#error_pseudo{
    margin-top:10px;
    color:red;
    display: none;
}
body {
    position: relative;
    background-color: #332238;
  }
  
  body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(https://yellowgreen-grouse-520181.hostingersite.com/wp-content/themes/Theme/assets/img/background.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.2;
    filter: blur(2px);
    z-index: -1;
  }

.content{
    max-width: 1400px;
    margin: 300px auto;
}
.select-verseion{
    display: flex;
    justify-content: center;
    margin-bottom: 250px;
    margin-top: 100px;
    gap: 60px;
}
.item-server{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 150px;
    height: 200px;
    padding: 20px 0px;
    background: rgb(106,68,117);
    background: linear-gradient(0deg, rgba(106,68,117,1) 0%, rgba(44,28,49,1) 40%, rgba(44,28,49,0) 80%);
    border-radius: 20px;
    filter: grayscale(80%);
    cursor: pointer;
    transition: all 0.6s ease-in-out;
}

.item-server img{
    width: 150px;
    margin-bottom: 0px;
    transition: transform 0.2s, scale 0.5s, filter 0.7s ease-in-out;
}
.item-server:hover img{
    scale: 1.05;
    transform: translate(0px, -10px);
    filter: drop-shadow(-3px 5px 15px #ffffff50);
}
.item-server:hover{
    filter: grayscale(0%);
}
.nameserver{
    color: var(--colorwhite);
}

.selected{
    scale: 1.2;
    filter: grayscale(0%);
}
.selected img{
    filter: drop-shadow(-3px 5px 15px #ffffff50);
}

.selecte-server{
    margin-top: 100px;
    margin-bottom: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.selecte-server h2{
    color: var(--colorwhite);
    font-size: 24px;
    margin-bottom: 50px;
}
.select-section{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--colordark);
    width: 900px;
    height: auto;
    border-radius: 0px 0px 10px 10px;
    padding: 50px 0px;
}
.name-server{
    width: 100%;
    color: var(--colorwhite);
    cursor: pointer;
}
.form{
    width: 60%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.list-servers{
    display: none;
}
.name-server{
    display: flex;
    flex-direction: column;
}
.name-server h3{
    position: relative;
    font-weight:500;
    margin-bottom: 5px;
}

.server-selected{
    display:flex ;
    justify-content: space-between;
    align-items: center;
    margin-right: 20px;
    padding: 5px 10px;
    color: var(--colordark);
    font-weight: 500;
    background-color: var(--colorwhite);
    border-radius: 3px;
    width: 100%;
}

.list-servers{
    opacity: 0;
    position: absolute;
    flex-direction: column;
    padding: 5px 10px;
    background-color: var(--colorwhite);
    top: 70px;
    width: 100%;
    border-radius: 3px;
    z-index: 999;
}
.active-list{
    display: flex;
    opacity: 1;
    transition: all 0.3s ease-in-out;
}
.list-servers li{
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}
.list-servers li a{
    color: var(--colordark);
    padding: 5px 10px 5px 0px;
    cursor: pointer;
}
.list-servers li:hover{
    background-color: var(--colordark);
    color: var(--colorwhite);
    border-radius: 3px;
}
.far{
    color: var(--colorwhite);
}
.image-server{
    position: absolute;
    height: 450px;
    left: -150px;
    /*top: -90px;*/
}
.tow-inputs{
    display: flex;
    gap:10px;
    /*margin-top: 10px;*/
}
.input-one{
    display: flex;
    flex-direction: column;
    width: 50%;
    /*margin-right: 20px;*/
}
.input-one input{
    padding: 5px 10px;
    border-radius: 3px;
    border: none;
}
.input-one label{
    margin-bottom: 5px;
    color: var(--colorwhite);
}
.form h4{
    margin-top: 10px;
    color: var(--colorwhite);
    font-weight:500;
}
.method-payment{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 250px;
}
.method-payment h2{
    color: var(--colorwhite);
    margin-bottom: 50px;
    font-size: 24px;
}
.list-payment-methods{
    display: flex;
    align-items: center;
    justify-content: center;
}
.item-method{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0px 20px;
}
.item-method input[type="radio"]{
    margin-right: 10px;
    border: none;
    outline: none;
}
.button-buy{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 150px;
    margin-bottom: 500px;
}
.button-buy img{
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    width: 200px;
    filter: drop-shadow(0px 0px 70px #7a4f8b);
}
.button-buy img:hover{
    scale: 1.04;
}
.button-buy p{
    position: absolute;
    color: var(--colorwhite);
    z-index: 99;
    pointer-events: none;
    font-size: 13px;
}

.form-method{
    display: none;
    opacity: 0;
    flex-direction: column;
    justify-content: center;
    transition: all 0.3s ease-in-out;
}
.form-method a{
    color: #ff00e2;
    font-weight: 600;
}
.form-method h3 , .form-method p{
    color: var(--colorwhite);
    margin-bottom: 10px;
    font-weight: normal;
    text-align: center;
}
.active-method{
    opacity: 1;
    display:flex;
}

.options-button{
    opacity: 0;
    display: none;
    justify-content: center;
    align-items: center;
    margin-bottom: 500px;
    margin-top: 100px;
}
.button-options{
    position: relative;
    margin: 0px 20px;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}
.button-options:hover{
    scale: 1.04;
}
.button-options p{
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    width: 100%;
    font-size: 14px;
    text-align: center;
    color: var(--colorwhite);
}
.button-options img{
    width: 220px;
}
.active-buttons{
    opacity: 1;
    display: flex;
}
.removenav{
    display: block;
    font-size: 16px;
    text-align: center;
    line-height: 1;
    color: #fff!important;
    text-decoration: none;
    font-weight: 700;
    border: 0;
}
.button-chat{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.button-chat p{
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--colorwhite);
    width: 100%;
}
.button-chat img {
    width:220px;
}
.button-others{
    display:flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 500px;
    margin-top: 100px;
}
.item-method {
    opacity: 0.5;
}
.item-method label{
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    margin: 0px 20px;
}
.item-method label:hover{
    scale: 1.1;
}
.item-method input[type="radio"]{
    margin-right: 10px;
    border: none;
    outline: none;
    display: none;
}
.active-logo{
    opacity: 1;
    scale: 1.1;
    filter: drop-shadow(-3px 5px 15px #90058e87);
}
#applepay-m{
    display: none;
}

/* Rewards */
.section-reward{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 900px;
    margin: auto;
    background-color: var(--colordark);
    border-radius: 30px;
    padding: 80px 30px;
    margin-bottom: 100px;
    margin-top: 100px;
}
.section-reward h2{
    background-color: var(--colorlight);
    text-align: center;
    width: 50%;
    margin-top: -110px;
    margin-bottom: 80px;
    border-radius: 10px;
    color: #fff;
    padding: 10px 0px;
}
.range {
    display: flex;
    align-items: center;
    width: 90%;
}
.range-slider {
    flex: 1;
  }
.range input{
    width: 100%;
}
.sliderticks {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
  }
  
.sliderticks span {
  display: flex;
  justify-content: center;
  background-color: #200329;
  border-radius: 3px;
  padding: 2px 10px;
  color: #fff;
  width: 80px;
}
.sliderticks span:first-child{
    opacity: 0;
}
.list-reward{
    display: none;
    justify-content: space-between;
    width: 90%;
    margin-top: 40px;
}
.item-reward{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
    background: rgb(209,131,235);
    background: radial-gradient(circle, rgb(95, 32, 116) 0%, rgba(59,29,69,1) 95%, rgba(59,29,69,1) 100%);
    border-radius: 50%;
    border: 2px solid #c09403;
    filter: grayscale(80%);
}
.active-reward{
    filter: grayscale(0%);
    scale: 1.1;
    filter: drop-shadow(0px 0px 15px #ecafff38);
    transition: all 0.3s ease-in-out;
}
.active-list-reward{
    display: flex;
}
.item-reward:first-child{
    opacity: 0;
}
.item-reward img{
    width: 80%;
}

.range-input{
    -webkit-appearance: none;
    background: #7a4f8b;
    outline: none;
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 20px;
}
.range-input::-webkit-slider-thumb{
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    background-color: #4e1b63;
    border: 4px solid #190322;
    box-shadow: -407px 0 0 400px #250631;
}

.all-rewards{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
.input-server{
    position: relative;
}

.input-one-pseudo input{
    padding: 5px 10px;
    border-radius: 3px;
    border: none;
    width: 100%;
}


.stock-grp {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #fff;
}
.fa-database{
    color: #b591df;
}

@media (max-width:900px) {
    .content{
        margin: 300px 10px;
    }
    .avantage-binance{
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 50px;
        margin: 20px;
    }
    
    .item-avantage{
        align-items: center;
        max-width: 100%;
    }
    .select-verseion{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .select-section{
        flex-direction: column;
        width: 100%;
        border-radius: 10px;
        padding: 50px 20px
    }
    .image-server{
        display: none;
    }
    .tow-inputs{
        flex-direction: column;
    }
    .input-one{
        width: 100%;
        margin-right: 0px;
    }
    .list-payment-methods{
        flex-direction: column;
    }
    .method-payment h2{
        width: 60%;
        text-align: center;
    }
    .item-method{
        margin: 20px;
    }
    .form-method{
    margin-top: 100px;
    }
    .notlogin{
        margin-right: 0px;
        width: 85%;
    }
    .grp-btn-achter{
        flex-direction:column;
    }
    .selecte-server h2{
        text-align: center;
    }
    .form{
        width:100%;
    }
    .promo-banner{
        right:0px !important;
        position: relative !important;
        bottom:0px !important;
        margin-top: 50px;
        scale: 1.2;
    }
    .loginuser img{
        width: 80px;
    }
    .loginuser a{
        font-size: 14px;
    }
}



/*ADDTIONAL CODE CSS FOR PROMO */
  .promo-banner{
    display: flex;
    position: absolute;
    bottom: 20px;
    right: 20px;
    height: 80px;
    filter: drop-shadow(5px 5px 10px #d06ced3b);
  }
  .promo-banner img:nth-child(1){
    z-index: 99;
    margin-right: -20px;
  }
  .loginuser{
    align-items: center;
  }
  .loginuser img{
    
  }
  .loginuser-img{
    margin-right: -50px !important;
    margin-top: -30px !important;
  }
  .loginuser a{
    padding: 10px 20px 10px 40px !important;
  }
  .class-info-promo{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    background-image: url(https://yellowgreen-grouse-520181.hostingersite.com/wp-content/themes/Theme/assets/img/promo-anner.png);
    background-repeat: no-repeat;
    width: 170px;
  }
  .class-info-promo span{
    color:#2c1c31;
    text-align: left;
    width: 70%;
  }
  .class-info-promo .title-promo{
    font-size: 14px;
}
.class-info-promo .total-promo{
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 21px;
    margin-top: -5px;
}
.pluspromo{
    font-size: 30px;
    margin-left: 5px;
}
.total-promo img{
    height:20px;
    width:auto;
}










/*NEW CODE FOR TABLE SERVERS*/
/* -------------------------------- */
.type-games-dofus{
    display: flex;
    gap:5px;
    width:900px;
}
.version-game-item{
    display: flex;
    align-items: center;
    gap:10px;
    padding: 5px 20px;
    border-radius: 18px 10px 0px 0px;
    background-color: #b2a1b8;
    cursor:pointer;
    transition: all 0.3s ease-in-out;
}
.version-game-item.active{
    background-color: var(--colordark);
}
.version-game-item span{
    color: #000;
    font-size: 14px;
}
.version-game-item.active span{
    color: #fff;
    transition: all 0.3s ease-in-out;
}
.version-game-item img{
    height: 50px;
    filter: grayscale(100%);
    transition: all 0.3s ease-in-out;
}
.version-game-item.active img{
    height: 50px;
    filter: grayscale(0%);
}
.version-game-item:hover{
    background-color: var(--colordark);
}
.version-game-item:hover span{
    color: #fff;
}
.version-game-item:hover img{
    filter: grayscale(0%);
}

.image-header-table-new{
    position: absolute;
    top: -110px;
    right: -20px;
    max-width: 300px;
}
.image-header-table-new img {
    width: 100%;
}


/* -------------------------------- */
.header-table-mobile{
    display: none;
}


/* -------------------------------- */
/* TABLE SERVERS */

.table-servers{
    position: relative;
    border-radius: 10px;
    margin: 130px 0px;
    height: max-content;
}
.image-header-table{
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 300px;
}
.image-header-table img{
    width: 100%;
}
.container-table{
    padding: 50px 30px 50px 30px;
    background-color: var(--colordark);
}
.header-table{
    display: flex;
    justify-content: space-between;
    background-color: #c58a14;
    color: #fff;
    border-radius: 10px;
    padding: 10px;
    margin:20px 0px;
    width: 100%;
}
.header-table span{
    text-align: left;
    width: calc(100%/4);
    color: #fff;
}
.List-rows{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.row-table{
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #522f5d;
    padding-bottom: 10px;
}
.row-table span{
    text-align: left;
    width: calc(100%/4);
    color: #fff;
    margin-left: 5px;
    font-size: 14px;
}
.etat-server-active{
    color: #c58a14 !important;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}
.etat-server-active:hover{
    color: #daaa49 !important;
}
.etat-server-stock{
    color: #e9161b !important;
    pointer-events: none;
}



@media (max-width:750px) {
    .type-games-dofus{
        display:none;
    }
    .select-verseion{
        flex-direction: row;
        flex-wrap: wrap;
        gap: 30px;
    }
    .item-server{
        width: 40%;
        margin: 0px;
    }
    .item-server img{
        width: 100%;
    }
    .select-verseion {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .image-header-table{
        width: 100%;
    }
    .table-servers{
        border-radius: 20px;
        padding: 0px;
    }
    .container-table{
        width: 100%;
        padding: 50px 10px 50px 10px;
    }
    .List-rows{
        justify-content: center;
        align-items: center;
        width: 90%;
        margin: auto;
    }
    .header-table{
        display: none;
    }
    .row-table{
        flex-direction: column;
        width: 100%;
    }
    .row-table span{
        width: 100%;
        text-align: center;
    }
    .row-table span p{
        float: right;
    }
    .item-server-list::before{
        content: 'Serveur :';
        float: left;
    }
    .item-mad-list::before{
        content: 'Prix(MAD) :';
        float: left;
    }
    .item-eur-list::before{
        content: 'Prix(EURO) :';
        float: left;
    }
    .item-usdt-list::before{
        content: 'Prix(USDT) :';
        float: left;
    }
    .etat-server::before{
        content: 'Etat : ';
        float: left;
    }
    .row-table span:last-child::before {
        content: "Quantité requise : " !important;
        float: left;
    }
    
    .header-table-mobile{
        display: flex;
        position: relative;
        cursor: pointer;
        width: 100%;
    }
    .current_version_game{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        background: #fff;
        width: 100%;
        border-radius: 10px 10px 0px 0px;
    }
    .list-version-games{
        display: none;
    }
    .list-version-games.active{
        position: absolute;
        display: flex;
        flex-direction: column;
        top: 50px;
        background-color: #fff;
        width: 100%;
        z-index: 999;
    }
    .item-version-game{
        padding: 10px;
        font-size: 14px;
        transition: all 0.3s ease-in-out;
    }
    .item-version-game:hover{
        padding: 10px;
        background-color: var(--colorlight);
    }
}
@media (max-width:500px) {
    .options-button{
    flex-direction: column;
    margin-top: 200px;
    }
    #applepay-m{
        display: flex;
    }
    .button-others{
        flex-direction: column;
    }
    .method-payment{
        margin-top: 200px;
    }
    
    .section-reward{
        position: relative;
        width: 90%;
        height: 900px;
    }
    .section-reward h2{
        position: absolute;
        top: 100px;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .all-rewards{
        transform: rotate(90deg);
        width: 900px;
    }
    .item-reward{
        transform: rotate(-90deg);
    }
    .sliderticks{
        order: 1;
        margin-bottom: 40px;
        margin-right: 20px;
    }
    .range-input{
        order: 2;
    }
    .range-slider{
        display: flex;
        flex-direction: column;
    }
    .list-reward{
        margin: 0px;
    }
    .select-section{
    height: auto;
}
}


/* Aniamtions  */
@keyframes bellShake {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(15deg); }
  40% { transform: rotate(-15deg); }
  60% { transform: rotate(10deg); }
  80% { transform: rotate(-10deg); }
  100% { transform: rotate(0deg); }
}