/*css pour le module de gestion du compte*/

.block-account .hidden{
    display : none;
}

.block-account .abort{
    background-color: red;
    color: white;
}

.block-account .personal-account {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
}

.block-account .personal-account .main-account {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    padding: var(--choice-pad);
    gap: 5px;
    overflow: auto;
}

.block-account .personal-account .main-account .acc-menu {
    flex-basis: 30px;
    flex-shrink: 1;
    display: flex;
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: column;
}

.block-account .personal-account .acc-menu .menu-title{
    position: sticky;
    top: calc(var(--choice-pad) * -1);
    
    display : flex;
    box-sizing : border-box;
    width : 100%;
    height : 30px;

    font-weight : bold;
    
    padding : 5px;
    align-items : center;
    
    color : var(--text-important);
    background-color: var(--cimportant);
    user-select : none;
    transition: background-color 0.665s ease-in-out;
}

.block-account .personal-account .acc-menu .menu-title:hover{
    background-color : var(--cimportant);
    color : var(--text-important);
    cursor : pointer;
}

.block-account .personal-account .acc-menu .menu-title.selected{
    background-color : var(--cimportant);
    color : var(--text-important);
}

.block-account .personal-account .acc-menu .menu-title:hover .buttons-div .edit{
    display : block;
}

.block-account .personal-account .acc-menu .menu-title:before{
    content : var(--arrow-right);
    padding : 5px;
}

.block-account .personal-account .acc-menu .menu-title.selected:before{
    content : var(--arrow-down);
}

.block-account .personal-account .menu-title .buttons-div{
    height : auto;
    width: auto;
    margin-left : auto;
    
    display : flex;
    flex-direction : row;
}

.block-account .personal-account .menu-title .buttons-div .edit-button{
    height : auto;
   /* margin-left : auto; */

    background-color : transparent;
    border : none;
    color: white;
    transition: all 0.5s;
    cursor: pointer;
}

.block-account .personal-account .edit-button:hover{
    border : 1px solid white;
    background-color : var(--cimportantlight)
}

.block-account .personal-account .acc-menu .menu-options{
    display : flex;
    flex-direction : column;

    width : 100%;
    height : 100%;
    max-height : 100%;

    background-color : #444;
    border-radius : 0 0 9px 9px;

    transition : all 0.337s ease-in-out;
    overflow : hidden;
    opacity : 1.0;
}

.block-account .personal-account .menu-options.hidden{
    max-height: 0;
    height: 0px;
    overflow: hidden;
    transition: all 0.337s ease-in-out;
    opacity: 0.0;
}

.block-account .personal-account .menu-options .menu-item{
    display : flex;
    flex-direction : column;
    
    width : 100%;

    box-sizing : border-box;
}

.block-account .personal-account .menu-item .item-title{
    display : flex;
    box-sizing : border-box;
    
    width : 100%;
    height : 30px;

    align-items : center;
    
    padding-left : 5px;
    
    background-color : var(--c-fieldname);
    color : black;
    font-weight : bold;
}

.block-account .personal-account .menu-item .item-field{
    width : 100%;
    min-height : 50px;
    
    display: flex;
    flex-direction: row;
    box-sizing : border-box;
    flex-wrap: wrap;

    padding : 5px 10px;
    
    text-align: justify;
    word-break: break-all;
}

.block-account .personal-account .lateral-account{
    display : flex;
    flex-direction : column;
    box-sizing : border-box;
    
    min-width : 200px;
    max-width: 300px;
    width : 30%;
    height : 100%;

    padding : var(--choice-pad);
    gap : 5px;
}

.block-account .personal-account .lateral-account .profile-img{
    display : flex;
    justify-content : center;

    background-color: black;
}

.block-account .personal-account .lateral-account .profile-img img{
    width : auto;
    max-width : 100%;

    height : auto;
    max-height : 100%;
}

.block-account .personal-account .lateral-account .img-options{
    display : flex;
    flex-direction : row;
    gap : 3px;
}

.block-account .personal-account .lateral-account .img-options .img-button{
    border : none;
}

.block-account .personal-account .lateral-account .img-options .img-button:hover{
    color : black;
    background-color : white;
    transition : all 0.265s ease-in-out;
}

.block-account .personal-account .lateral-account .img-options .button-important{
    margin-left : auto;
}

.block-account .personal-account .lateral-account .img-options .button-important:hover{
    background-color : red;
    transition : all 0.265s ease-in-out;
}