.profile-panel
{
    display:flex;
    flex-direction: column;
    position:relative;
    background-color: var(--color-lightest);
    
    border-radius:4px;


   
}

.profile-panel-header{
    display:flex;
    justify-content: space-between;
    color:var(--color-dark);
    padding:4px 10px;
    font-weight:100;
    font-size:1.3rem;
    border-bottom:1px solid #00000033;    
    font-family: 'Bricolage Grotesque', system-ui, sans-serif;
}

.profile-panel-header > span{
    
    font-weight:500;
}

.profile-panel-header i{
    color:var(--color-info-darkest);
    transition: all .2s linear;
}

.profile-panel-header i:hover{
    color:var(--color-info);
}

.profile-panel-content{
    display:flex;
    flex-direction: column;
    gap:4px;
    margin:10px 10px 10px 10px;
    position:relative;
    font-size: var(--font-size-small);
}



.profile-panel-content .section-label{
    font-weight:600;
    color:var(--color-dark);
    
}

.profile-panel-content .form-group>span{
    color:var(--color-dark);
}


.profile-panel-content .fullname
{
    gap:.3rem;
    font-size:1rem;
    font-weight:600;
}



.interview-request-item{
    border:1px solid #00000033;
    padding:4px;
    border-radius:4px;
    align-items:center;
    gap:10px;
    transition: all .1s linear;
}

.interview-request-item:hover{
    background-color:var(--color-info-lightest);
    border:1px solid var(--color-info);
}



.profile-editor-panel
{
    display:flex;
    flex-direction:column;
    position:fixed;    
    top:50%;
    left:50%;
    width: calc(max(min(50dvw, 800px), 400px));
    transform:translate(-50%, -50%);
    background-color: var(--color-lightest);
    
    border:1px solid #000000;
    border-radius:4px;
    gap:20px;
    max-height:90dvh;

}

.profile-editor-header{
    display:flex;
    justify-content: space-between;
    color:var(--color-info);
    padding:10px;
    border-bottom:1px solid var(--color-info-lighter);
    
}


.profile-editor-content{
    display:flex;
    flex-direction: column;
    gap:20px;
    overflow-y:scroll;
    padding:20px;
    
}


.profile-editor-content .form-group>label{
    font-weight:600;
    color:var(--color-dark);
    width: 160px;
    min-width:160px;
}



#role-summary-list{
    max-width:100%;
}

#role-summary-list > .role-entry
{
    position:relative;
    border-bottom: 1px solid #00000033;
    border-left:2px solid var(--color-info);

}

#role-summary-list > .role-entry .role-title
{
    font-size:1.1rem;
    font-weight:600;
}

#role-summary-list > .role-entry .role-summary
{
    font-size:.9rem;
    
}


#work-experience-list .work-item{
    position:relative;
    display:flex;
    border-left:2px solid var(--color-info);
    border-bottom:1px solid #00000033;
    padding:10px;
    
}

#work-experience-list .work-item .job-title
{
    font-weight:600;
    font-size:1rem;
}

#work-experience-list .work-item .company-name
{
    font-weight:600;
    font-size:1rem;
}

#work-experience-list .work-item .job-label
{
    display:inline-block;
    min-width:70px;
    font-weight:600;
    
    
}

#resumeReferencesList .references-item{
    position:relative;
    display:flex;
    border:1px solid #00000033;
    padding:10px;
    font-size:.8rem;
    
}

#resumeReferencesList .references-item .reference-name{
    font-weight: 600;
}