.profileSideBar-container {
    display: flex;
    position: sticky;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    box-shadow: 1px 0 var(--line-color);
    background-color: var(--bg-primary);
    /* background-color: blanchedalmond; */
    height: 100vh;
    width: 30%;
    top: 0;
    padding: 80px 0 35px 0;
    /* gap: 30px; */
}

.profileSideBar-container .profileSideBar-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* PHOTO */

.profileSideBar-container .profileSideBar-content .profile-picture-container {
    background-color: var(--color-primary);
    aspect-ratio: 1/1;
    width: 170px;
    border-radius: 100px;
    position: relative;
    cursor: pointer;
}

.profileSideBar-container .profileSideBar-content .profile-picture-container > img{
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 100px;
    object-fit: cover;
    overflow: hidden;
}

/* PARTIE MODAL */

.profileSideBar-container .profileSideBar-content .editing-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.profileSideBar-container .profileSideBar-content .editing-form .editing-form-content {
    direction: rtl; /* Inverser la barre*/
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: scroll;
    height: 190px;
    padding: 2px 2px 2px 5px;
    width: 200px;
}

.profileSideBar-container .profileSideBar-content .editing-form .editing-form-content * {
    direction: ltr;
}

/* Modal barre */

.profileSideBar-container .profileSideBar-content .editing-form .editing-form-content::-webkit-scrollbar {
    width: 8px;
}

.profileSideBar-container .profileSideBar-content .editing-form .editing-form-content::-webkit-scrollbar-thumb {
    background-color: rgb(35, 167, 255);
    border-radius: 4px;
    
}

.profileSideBar-container .profileSideBar-content .editing-form .editing-form-content::-webkit-scrollbar-track {
    background-color: #f5f5f5 ;
    border-radius: 4px;
}

/* Modal inputs */

.profileSideBar-container .profileSideBar-content .editing-form .edit-values-buttons {
    display: flex;
    width: 100%;
    gap: 4%;
    padding-right: 2px;
}

.profileSideBar-container .profileSideBar-content .editing-form .edit-values-buttons button {
    width: 48%;
    justify-content: center;
}

/* Model buttons */

.profileSideBar-container .profileSideBar-content .editing-form .edit-values-buttons .cancel-button {
    color: rgb(35, 167, 255);
}

.profileSideBar-container .profileSideBar-content .editing-form .edit-values-buttons .cancel-button:hover {
    border-color: rgb(35, 167, 255);
}

.profileSideBar-container .profileSideBar-content .editing-form .edit-values-buttons .ok-button {
    background-color: rgb(35, 167, 255);
    color: #fff;
}

/* PARTIE INFO */

.profileSideBar-container .profileSideBar-content .profile-infos {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 10px;
}

/* PARTIE BOUTONS */

.profileSideBar-container button {
    display: flex;
    align-items: center;
    gap: 5px;
    background-color: unset;
    padding: 3px 5px;
    border: unset;
    border-radius: 3px;
    border: solid 1px transparent;
    transition: all ease .1s;
    width: 200px;
}

.profileSideBar-container button.edit-button:hover {
    background-color: unset;
    color: rgb(35, 167, 255);
    border: solid 1px rgb(35, 167, 255);
}

.profileSideBar-container .edit-button .icon-container .edit-icon {
    color: rgb(35, 167, 255);
    margin-left: 3px;
}

.profileSideBar-container .account-buttons-container {
    /* background-color: brown; */
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.profileSideBar-container .account-buttons-container button.delete-account-button,
.profileSideBar-container .account-buttons-container button.admin-button {
    background-color: red;
    color: #fff;
}

.profileSideBar-container .account-buttons-container button:hover {
    background-color: unset;
    color: red;
    border: solid 1px red;
}

.profileSideBar-container .account-buttons-container .icon-container {
    display: flex;
    align-items: center;
    /* background-color: orange; */
}

.profileSideBar-container .account-buttons-container .icon-container .logout-icon {
    margin-left: 3px;
    color: red;
}

@media(max-width: 750px){
    .profileSideBar-container{
        position: relative;
        width: 100%;
        padding: 50px 0 35px 0;
    }
}