/* settings */
#settings-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#settings-title{
    text-align: center;
    font-size: x-large;
    margin-bottom: 50px;
    font-weight: 600;
}

#settings-content{
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: flex-start;
}

#account-details-group{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    gap: 30px;
}

.account-details-wrapper{
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 200px;
    min-height: 150px;
}

.account-details-title{
    font-weight: 600;
    font-size: large;
    padding-bottom: 7px;
}

#account-details-personal-birthdate-picker{
    width: 100%;
}

#account-details-company-name{
    display: none;
}

#account-details-company-name.active{
    display: block;
}

#account-details-uid-container{
    display: none;
}

#account-details-uid-container.active{
    display: block;
}

#account-details-uid-field{
    display: none;
}

#account-details-uid-field.active{
    display: block;
}

#account-details-login-password {
    padding: 5px 10px;
    border: 1px solid;
    text-align: center;
    cursor: pointer;
}

#account-details-submit-wrap {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 90px;
}

#account-details-submit {
    padding: 7px 15px;
    border: 2px solid;
    cursor: pointer;
    align-self: flex-end;
}

.account-details-link{
    padding: 7px 5px;
    border-bottom: 1px solid;
    cursor: pointer;
}

#account-details-account-delete{
    border: 2px solid red;
    font-weight: 600;
}


/* change password popup */
#settings-popup-container{
    display: none;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 990;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
}

#settings-popup-container.active{
    display: flex;
}

#settings-popup{
    background-color: #fbfbfb;
    position: fixed;
    width: 350px;
    max-height: 500px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 10px;
}

#settings-popup-close{
    padding: 5px;
    align-self: flex-end;
    cursor: pointer;
}

#settings-popup-header{
    font-weight: 600;
    text-align: center;
    padding: 5px;
    margin-bottom: 6px;
}

#settings-popup-info{
    text-align: center;
    padding: 5px;
}

#settings-popup-content{
    display: flex;
    flex-direction: column;
    gap: 25px;
    align-items: center;
    margin-top: 30px;
}

.settings-popup-input-wrap{
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-start;
}

#settings-popup-verify{
    padding: 5px 10px;
    border: 2px solid;
    align-self: center;
    margin-top: 60px;
    cursor: pointer;
    font-weight: 600;
}


/* profile */
#profile-wrapper{
    display: flex;
    flex-direction: column;
    gap: 42px;
    word-break: break-all;
    line-height: 1.3;
}

#profile-wrapper [contenteditable="true"]{
    padding-bottom: 3px;
    border-bottom: 1px solid;
    cursor: text;
}

#profile-banner{
    width: 100vw;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 30px;
    border-bottom: 2px solid;
    margin-left: -30px;
    margin-top: -30px;
}

#profile-banner-info{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: space-around;
    height: 100%;
    gap: 25px;
}

#profile-banner-visibility{
    padding: 4px 8px;
    border: 2px solid;
    cursor: pointer;
}

#profile-banner-stripe{
    padding: 4px 8px;
    border: 2px solid;
    cursor: pointer;
}

#profile-banner-controls{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-around;
    height: 100%;
    gap: 25px;
}

#profile-banner-controls-edit{
    border: 2px solid;
    padding: 4px 8px;
    cursor: pointer;
    width: 100%;
    text-align: center;
}

#profile-banner-controls-submit{
    border: 2px solid;
    padding: 4px 8px;
    cursor: pointer;
    width: 100%;
    text-align: center;
}

#profile-banner-controls-cancel{
    border: 2px solid;
    padding: 4px 8px;
    cursor: pointer;
    width: 100%;
    text-align: center;
}

.profile-pic{
    width: 70px;
    height: 70px;
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;
}

#profile-pic-chooser{
    display: none;
    padding: 4px 8px;
    border: 1px solid;
    align-self: flex-start;
    align-content: flex-start;
    max-width: 180px;
    text-align: center;
    cursor: pointer;
}

#profile-pic-chooser.active{
    display: block;
}

#profile-displayname{
    font-size: x-large;
}

#profile-tag-container{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#profile-tag-edit-container{
    display: none;
}

#profile-tag-edit-container.active{
    display: block;
}

#profile-tag-add{
    width: 20px;
    height: 20px;
    cursor: pointer;
    text-align: center;
}

#profile-tag-list-container{
    display: flex;
    flex-direction: row;
    gap: 13px;
    flex-wrap: wrap;
}

.profile-tag{
    padding: 4px 7px;
    border: 1px solid;
    border-radius: 20px;
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.profile-tag-drag{
    padding: 4px;
    cursor: pointer;
}

.profile-tag-delete{
    padding: 4px;
    cursor: pointer;
}

.profile-tag > :first-child {
    cursor: pointer;
}

.profile-tag-search-menu{
    display: none;
    flex-direction: column;
    gap: 5px;
    position: absolute;
    background-color: #EFEFEF;
    border: 1px solid;
    z-index: 600;
    border-radius: 7px;
    padding: 3px;
    margin-top: 20px;
}

.profile-tag-search-menu.active{
    display: flex;
}

.profile-tag-search-people{
    padding: 3px;
    cursor: pointer;
}

.profile-tag-search-projects{
    padding: 3px;
    cursor: pointer;
}

#profile-media-container{
    display: none;
}

#profile-media-container.active{
    display: block;
}

#profile-media-add{
    display: none;
}

#profile-media-add.active{
    display: block;
}

#profile-description-container{
    display: none;
    flex-direction: column;
    gap: 10px;
}

#profile-description-container.active{
    display: flex;
}

#profile-description-title{
    font-weight: 600;
}

#profile-link-container{
    display: none;
    flex-direction: column;
    gap: 10px;
}

#profile-link-container.active{
    display: flex;
}

#profile-link-title{
    font-weight: 600;
}

#profile-link-edit-container{
    display: none;
}

#profile-link-edit-container.active{
    display: block;
}

#profile-link-add{
    width: 20px;
    height: 20px;
    cursor: pointer;
    text-align: center;
}

#profile-link-list-container{
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.profile-link{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    cursor: pointer;
}

.profile-link-drag{
    padding: 4px;
    cursor: pointer;
}

.profile-link-delete{
    padding: 4px;
    cursor: pointer;
}

.profile-link-value{
    display: none;
}

.profile-link-value.active{
    display: block;
}

#profile-actor-details{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#profile-actor-title{
    font-weight: 600;
}

.profile-actor-item-title{
    display: inline;
}

.profile-actor-item-value{
    display: inline;
    font-style: italic;
}

.profile-checkbox-label{
    margin-right: 10px;
}

#profile-book {
    align-self: center;
    padding: 5px 10px;
    border: 2px solid;
    margin-top: 30px;
    cursor: pointer;
}

#profile-project-container{
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#profile-project-title{
    font-weight: 600;
}

#profile-project-list-container{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.profile-project-item{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.profile-project-pic{
    width: 52px;
    height: 52px;
}