/* Menu compte client : account-menu.html.twig */
#colonne-menu-compte ul#menu-compte li{
    border-top: 1px solid #E8E8E8;
}
#colonne-menu-compte ul#menu-compte li a:hover{
    text-decoration: underline;
}
@media screen and (max-width: 1023px) {
    #colonne-menu-compte ul#menu-compte li{
        border-top: none;
    }    
}
#colonne-menu-compte ul#menu-compte li.li-picto a{
    padding: 15px 0 15px 45px;
}
#colonne-menu-compte #compte-commandes,
#colonne-menu-compte #compte-informations,
#colonne-menu-compte #compte-avantages,
#colonne-menu-compte #compte-liste-envies,
#colonne-menu-compte #rma {
    background-position: 12px center, 95% center;
    background-repeat: no-repeat, no-repeat;
}
#colonne-menu-compte #compte-commandes{
    background-size: auto 20px, auto 10px;
    background-image: url('../img/user/menu/mes-commandes.png'), url('../img/user/menu/chevron-right.png');
}
#colonne-menu-compte #rma{
    background-size: auto 20px, auto 10px;
    background-image: url('../img/user/menu/mes-retours.png'), url('../img/user/menu/chevron-right.png');
}
#colonne-menu-compte #compte-informations{
    background-size: auto 18px, auto 10px;
    background-image: url('../img/user/menu/mes-informations.png'), url('../img/user/menu/chevron-right.png');
}
#colonne-menu-compte #compte-avantages{
    background-size: auto 20px, auto 10px;
    background-image: url('../img/user/menu/mes-avantages.png'), url('../img/user/menu/chevron-right.png');
}
#colonne-menu-compte #compte-liste-envies{
    background-size: auto 17px, auto 10px;
    background-image: url('../img/user/menu/ma-liste-envies.png'), url('../img/user/menu/chevron-right.png');
}
#colonne-menu-compte #compte-deconnection{
    background-position: 12px center;
    background-repeat: no-repeat;
    background-size: auto 18px;
    background-image: url('../img/user/menu/deconnection.png');
}

/* Conteneur de toutes les pages compte client */
.main-user-content{
    flex: 1 1 auto;
}

/* Page compte client (mes informations) : clientDetails.html.twig */
#colonne-informations-personnelles #mes-coordonnees .mes-coordonnees-modifier,
#colonne-informations-personnelles #mes-adresses .mon-adresse-modifier,
#colonne-informations-personnelles #mon-mot-de-passe .mon-mot-de-passe-modifier,
#colonne-informations-personnelles #mes-actualites .mes-actualites-modifier{
    background-position: left center;
    background-repeat: no-repeat;
    background-size: auto 14px;
    background-image: url('../img/user/modifier.png');
    padding-left: 20px;
}
#colonne-informations-personnelles input:not([type="radio"]):not([type="checkbox"]),
#colonne-informations-personnelles select{
    width: 100%;
    height: 40px;
}
#colonne-informations-personnelles form label{
    font-size: 14px;
    font-weight: 500;
}
#colonne-informations-personnelles form legend {
    float: left;
    font-size: 14px;
    font-weight: 500;
}
#colonne-informations-personnelles #mes-adresses .mon-adresse{
    width: 240px;
}
#colonne-informations-personnelles #mes-adresses .mon-adresse .user-address-preference{
    background-position: left center;
    background-repeat: no-repeat;
    background-size: auto 16px;
    padding: 10px;
}
#colonne-informations-personnelles #mes-adresses .mon-adresse .user-address-preference.favorite-address,
#colonne-informations-personnelles #mes-adresses .mon-adresse .user-address-preference.empty-heart:hover{
    background-image: url('../img/user/favorite-address.png');
}
#colonne-informations-personnelles #mes-adresses .mon-adresse .user-address-preference.empty-heart{
    background-image: url('../img/user/empty-heart.png');
}
#colonne-informations-personnelles #mes-adresses .mon-adresse-supprimer{
    background-position: center center;
    background-repeat: no-repeat;
    background-size: auto 16px;
    background-image: url('../img/delete-item.png');
    padding: 11px;
}
#colonne-informations-personnelles #edit-mon-mot-de-passe .checkNoir{
    font-style: italic;
    font-size: 12px;
    background-position: left center;
    background-repeat: no-repeat;
    background-size: auto 14px;
    background-image: url('../img/user/check-noir.png');
    padding-left: 20px; 
}

/* Page compte client (mes commandes - détail) : orderDetail.html.html.twig */
/* Page compte client (demande de retour - détail) : rmaDetail.html.html.twig */
#colonne-detail-commande .detail-commande-facture{
    background-position: 100% 2px;
    background-repeat: no-repeat;
    background-size: auto 18px;
    background-image: url('../img/user/telecharger-facture.png');
    padding-right: 22px;
}
#colonne-detail-commande .detail-commande-statut.terminees,
#colonne-detail-retour .detail-retour-statut.traitee,
#colonne-detail-retour .qteRecue,
#colonne-detail-retour .qteAccord{
    color: #36D399;
}
#colonne-detail-commande .detail-commande-statut.en_cours,
#colonne-detail-retour .detail-retour-statut.a_traiter,
#colonne-detail-retour .detail-retour-statut.acceptee,
#colonne-detail-retour .detail-retour-statut.a_controler,
#colonne-detail-retour .detail-retour-statut.a_regler{
    color: #FF8800;
}
#colonne-detail-commande .detail-commande-statut.annulees,
#colonne-detail-retour .detail-retour-statut.annulee,
#colonne-detail-retour .detail-retour-statut.refusee{
    color: #CC0000;
}
/* Page compte client (ma liste d'envies) : userFavorites.html.twig */
.favorites-list .article-envie .imgArticleEnvie{
    border: 1px solid #E8E8E8;
}
.favorites-list .supprimerArticleEnvie{
    width: 32px;
    height: 32px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: auto 16px;
    background-image: url('../img/delete-item.png');
    background-color: #FFF;
    border: 1px solid #E8E8E8;
    border-radius: 50px;
}
/* Page compte client (demande de retour - création) : rmaCreate.html.twig.html.twig */
@media screen and (max-width: 1279px) {
    #tableReturnableRows table thead{
        display: none;
    }
    #tableReturnableRows table tbody tr{
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-left: none;
        border-top: none;
        border-right: none;
        padding: 15px;
        gap: 15px;
    }
    #tableReturnableRows table tbody tr td{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        border: none;
        padding: 0;
        gap: 5px;
    }
}