/* Menu compte client : account-menu.html.twig */
/* #colonne-menu-compte ul#menu-compte li {
    border-top: 1px solid #E8E8E8;
} */
.border-menu {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    padding: 15px 0;
}

.border-menu-return {

    padding: 0;
}

.log-out {
    border-top: 1px solid black;
    padding-top: 18px;
}



#colonne-menu-compte ul#menu-compte li a:hover {
    text-decoration: underline;
}

@media screen and (max-width: 1024px) {
    .border-menu {
        border: unset;
        padding: unset;
    }



}

@media screen and (max-width: 900px) {
    #colonne-menu-compte ul#menu-compte li {
        border-top: none;
    }

    .border-menu-return {

        padding: 0;
    }

    .border-menu {
        border: unset;
        padding: unset;
    }

    .log-out {
        border: unset;
    }

    /* .main-user-content {
        padding-left: 20px;
    } */
}

#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 #compte-liste-favoris,
#colonne-menu-compte #rma,
#colonne-menu-compte #rma-new,
#colonne-menu-compte #compte-deconnection {
    background-position: 12px center, 50% center;
    background-repeat: no-repeat, no-repeat;
}

#colonne-menu-compte #compte-commandes {
    background-size: auto 20px, auto 10px;
    background-image: url('../../img/menu/cart.png'), url('../../img/user/menu/chevron-right.png');
}

#colonne-menu-compte #rma {
    background-size: auto 20px, auto 10px;
    background-image: url('../../img/menu/return.png'), url('../../img/user/menu/chevron-right.png');
}

#colonne-menu-compte #rma-new {
    background-size: auto 20px, auto 10px;
    background-image: url('../../img/menu/new_return.png'), url('../../img/user/menu/chevron-right.png');
}

#colonne-menu-compte #compte-informations {
    background-size: auto 18px, auto 10px;
    background-image: url('../../img/menu/user.png'), url('../../img/user/menu/chevron-right.png');
}

#colonne-menu-compte #compte-liste-favoris {
    background-size: auto 18px, auto 10px;
    background-image: url('../../img/menu/wishlist.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/menu/Map.png'), url('../../img/user/menu/chevron-right.png');
}

#colonne-menu-compte #compte-deconnection {

    background-size: auto 17px, auto 10px;
    background-image: url('../../img/menu/Exit.png');
}

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

.user-title {
    font-weight: bold;
    font-size: 22px;
    color: var(--color-black);
}

.user-sub {
    padding-top: 7px;
    font-size: 15px;
    color: var(--color-black);
    font-weight: 400;
    margin-bottom: 25px;
}

.main-user-content .fieldset {
    margin: 16px 0;
    position: relative;
}

.main-user-content .fieldset input {
    width: 100%;
    height: 60px;
    max-width: 512px;
}

.main-user-content .fieldset input:focus {
    border-color: var(--color-border)
}

.flex-grow input {
    width: 248px !important;
}

.main-user-content .fieldset .form-label {
    position: absolute;
    cursor: text;
    z-index: 1;
    top: -10px;
    left: 10px;
    font-size: 14px;
    background: #fff;
    padding: 0 10px;
    color: #999;
    transition: all .3s ease;
    text-wrap: nowrap;
}

.main-user-content .fieldset input:focus+label,
.main-user-content .fieldset input:valid+label {
    font-size: 11px;
    top: -5px
}

.main-user-content .fieldset input:focus+label {
    color: var(--color-border)
}


#user-infos-form .input-field {
    max-width: 515px;
    height: 60px;
}

#user-infos-form select {
    max-width: 515px;
    height: 60px;
    width: 100%;
}

/* 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: 100%;
} */
/* .profile--checkbox {
    display: flex;
    justify-content: space-between;
    align-items: center;
} */

#colonne-informations-personnelles form label {
    font-size: 14px;
    font-weight: 500;
}

#colonne-informations-personnelles form legend {
    float: left;
    font-size: 16px;
    font-weight: 600;
    padding-bottom: 25px;
}

#colonne-informations-personnelles #mes-adresses .mon-adresse {
    width: 220px;
}

#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;
    font-size: 18px;
}

#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;
}

.user-page {
    background-color: var(--color-white);
    padding: 0;
}

.menu-dropdown {
    padding: 15px;
}

.change-pwd {
    font-size: 13px;
    font-weight: bold;
    text-decoration: underline;
    /* font-style: italic; */
    text-align: center;
}

.select-icon {
    display: flex;
    align-items: center;
}

.select-icon svg {
    margin-right: 10px;
}

/* changepass */
.dialog {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}

.dialog-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px 20px 48px 20px;
    border: 1px solid #888;
    max-width: 661px;
}

.dialog-content h2 {
    text-align: center;
    padding: 22px 0 43px;
    font-size: 22px;
    font-weight: 600;
}

.button-submit {
    /* background-color: var(--color--button-primary);
    color: var(--color--button-text-color); */
    text-transform: uppercase;
}


.button-submit:hover {
    /* background-color: var(--color-white);
    color: var(--color-black); */
    border: 1px solid var(--color-black);
}

#compte-select select {
    padding: 15px !important;
    max-width: 100%;
}

.button-cancel {
    padding: 20px 40px;
    line-height: unset !important;
    border: 1px solid;
    text-transform: uppercase;
    background-color: var(--color-white);
    color: var(--color--button-primary);
}

.civilite {
    padding: 23px 0 27px;
}

.conf-checkbox {
    border-top: 0.5px solid var(--color-black);
    border-bottom: 0.5px solid var(--color-black);
    max-width: 626px;
}

.button-cancel:hover {}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.btn-group {
    display: flex;
    justify-content: flex-end;
    gap: 20px;
    padding-top: 8px;
}

/* .change-pwd-div {
    padding-left: 100px;
} */

.button--edit-user {
    padding: 20px 77px;
    font-size: 13px;
    line-height: 1em;
    font-weight: 600;
    /* background-color: var(--color-black); */
    /* color: var(--color-white); */
}

.button--edit-user:hover {
    /* background-color: var(--color-white);
    color: var(--color-black); */
    border: 1px solid var(--color-black);
}

.change-password-btn {
    cursor: pointer;
    padding: 10px 0;
    border-radius: 5px;
    text-wrap: nowrap;
}

#edit-mes-actualites li {
    margin: 8px 0;
}

.svg-header {
    display: none;
}

.th-group {
    text-wrap: nowrap;
}

.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;
}

/* Modal change password */


#change-password-form .fieldset {
    margin: 16px 0;
    position: relative;
    max-width: 515px;
    width: 100%;
}


#change-password-form .fieldset input:focus {
    border-color: gray
}

#change-password-form .fieldset .form-label {
    position: absolute;
    cursor: text;
    z-index: 1;
    top: 13px;
    left: 10px;
    font-size: 14px;
    background: #fff;
    padding: 0 10px;
    color: #999;
    transition: all .3s ease;
    text-wrap: nowrap;
}

#change-password-form .fieldset input:focus+label,
#change-password-form .fieldset input:valid+label {
    font-size: 11px;
    top: -5px
}

#change-password-form .fieldset input:focus+label {
    color: blue
}

#change-password-form {
    width: 100%;
}

#change-password-form input {
    width: 100%;
    max-width: 515px;
    height: 60px;
}

.rotated {
    transform: rotate(180deg);
    transition: transform 0.5s;
}

@media screen and (max-width: 900px) {
    .btn-group {
        flex-direction: column;
    }

    .main-user-content {
        padding-right: 0;
    }

    #colonne-menu-compte ul#menu-compte li.li-picto a {
        padding: 15px 0 15px 35px;
    }

    .svg-header {
        display: block;
    }

    .user-page {
        padding: 70px 20px 20px 20px;
    }

    .th-group {
        display: flex;
        justify-content: space-between;
    }

    /* .change-pwd-div {
        padding-left: 30px;
    } */

}

@media screen and (max-width: 600px) {
    .flex-grow input {
        width: 100% !important;
    }

    /* .change-pwd-div {
        padding-left: 100px;
    } */
    .user-page {
        padding: 0px 10px 20px 10px;
        max-width: 100% !important;
    }

    #change-password-form .fieldset {

        max-width: 360px;

    }

    .button--edit-user {
        width: 100%;
    }

    .button-cancel {

        width: 100% !important;
    }

}