/* Conteneur de toutes les pages compte client */
#colonne-informations-personnelles .user-title {
    font-size: 34px;
    color: var(--color-text);
}

#colonne-informations-personnelles .user-sub {
    color: var(--color-text);
}

#user-infos-form .fieldset {
    margin: 16px 0;
    position: relative;
}

#user-infos-form .fieldset input {
    width: 100%;
    height: 52px;
    max-width: 512px;
}

#user-infos-form .fieldset input:focus {
    border-color: var(--color-border)
}

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

#user-infos-form .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 {
    width: 100%;
    min-height: 465px;
}
.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;
}

/* 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 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 {
    padding: 0;
}

.change-pwd {
    font-size: 13px;
    font-weight: bold;
    text-decoration: underline;
    color: var(--color-primary);
    text-align: center;
}

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

.select-icon svg {
    margin-right: 10px;
}
@media screen and (min-width: 1536px) {
    .user-page  {
        max-width: 1440px !important;
    }
    .user-page #breadcrumb {
        margin-left: 45px;
    }
}
/* 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;
}

#compte-select select {
    height: 60px;
    border: 1px solid var(--color--border);
    border-radius: 200px;
    padding: 10px 30px !important;
}
#compte-select .menu-dropdown option{
    height: 51px;
}
select.menu-dropdown {
    max-width: unset;
}
.button-cancel {
    line-height: unset !important;
    background-color: var(--color-secondary);
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
}
.conf-checkbox {
    border-top: 0.5px solid var(--color-black);
    border-bottom: 0.5px solid var(--color-black);
    max-width: 626px;
}

.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-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, .form-actions{
    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;
}

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

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

    .svg-header {
        display: block;
    }

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

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

@media screen and (max-width: 640px) {
    #change-password-form .button {
        max-width: 515px;
        width: 100%;
        margin: auto;
    }
    .user-page {
        padding: 40px 0px 20px 0px;
    }

}
@media screen and (max-width: 600px) {

    #change-password-form .fieldset, #change-password-form .button {
        max-width: 360px;
    }

}
/* 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;
}

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

.rma-new {
    padding-bottom: 18px;
}

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

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

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

    .log-out {
        border: unset;
    }

    .rma-new {
        padding-bottom: 0;
    }

    /* .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 {
    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/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-position: 12px center;*/
/*    background-repeat: no-repeat;*/
/*    background-size: auto 18px;*/
/*    background-image: url('../img/menu/Exit.png');*/
/*}*/
/* account-menu */
.li-picto {
    background-image: none !important;
}


.li-picto .wrap-icon {
    position: relative;
    width: 25px;
    height: 25px;
}

.li-picto .icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    fill: #000;
}

.li-picto.active .icon {
    fill: #fff;
}

.li-picto.active .wrap-icon {
    border-left: 5px solid var(--color-secondary);
}

.li-picto.active a {
    font-weight: 700;
    color: var(--color-primary);
    line-height: 20px;
}
@media screen and (min-width: 1024px) {
    .li-picto>a {
        display: flex;
        align-items: center;
        justify-content: start;
        gap: 10px;
    }
}
/* user profile */
.main-user-content .fieldset input[readonly] {
    border-color: rgba(107, 114, 128, 0.5);
}

.main-user-content .fieldset input[readonly]+label {
    color: #999;
    font-size: 14px;
    top: -10px
}

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

.civilite {
    display: flex;
    gap: 7px;
    align-items: center;
    justify-content: start;
}

.change-password-btn {
    padding: 0 0 10px;
}
.conf-checkbox {
    border-top: none;
}
.change-password-btn {
    padding: 0 0 10px;
    cursor: pointer;
    border-radius: 5px;
    text-wrap: nowrap;
}
#colonne-informations-personnelles .input-wrapper-user{
    max-width: 512px;
}
.main-user-content .filter--group .search-form{
    padding: 0 1rem;
    border: solid 1px var(--color--border);;
    display: flex;
    border-radius: 200px;
}
.main-user-content .filter--group .search-form input {
    border: solid 0px var(--color--border);
    color: #000000;
}
.showError {
    min-width: 490px;
    color: red;
    margin-left: 20px;
}
@media (max-width: 639px) {
    .page--table-content .flex-grow input,.page--table-content .button-cancel{
        width: 100% !important;
    }
    .page--table-content #createButtonContainer #createButton{
        width: 100%;
    }
    #colonne-informations-personnelles, #colonne-liste-envies, .page--content, #colonne-commandes{
        padding: 0px 20px;
    }
    .showError {
        min-width: 370px;
    }
}
@media (max-width: 450px) {
    .showError {
        min-width: 300px;
        margin-left: 0px;
    }

}
@media (max-width: 1300px) {
    #colonne-commandes table, #colonne-commandes table th, #colonne-commandes table tr, #colonne-commandes table td{
        padding: 15px 0px;
    }
}
/*@media (max-width: 1024px) {*/
/*    #colonne-commandes .hidden-desktop-1{*/
/*        display: inherit !important;*/
/*    }*/
/*}*/
.main-user-content #search-status-rma{
    border-radius: 200px;
    padding: 10px 30px 10px 20px !important;
}