.popup-flex-container {
    display: flex;
    flex-direction: row;
    align-items: center; /* Adjust if you want vertical alignment */
}


.left-side, .right-side {
    display: flex;
    flex-direction: column;
    padding: 3px; /* Adjust padding as needed */
    box-sizing: border-box; /* Ensures padding does not affect total width */
    overflow-y: auto; /* Adds scroll to each side if content exceeds height */
    justify-content: space-around; /* Adjust spacing for 3 cards */
}

.left-side {
    padding-right: 0px; /* Adjust padding as needed */
    width: 350px;
}

.right-side {
    width: 410px;
}


.position-relative{
    position: relative;
}

.extention-title{
    font-weight: 800;
    font-size: 10px;
    padding-bottom: 10px;
}

.username {
    font-weight: 800;
    font-size: 1.4em;
}

.handle {
    font-size: 1.2em;
    font-weight: 800;
    margin-bottom: 8px;
    color: var(--text);
}

.full-name {
    font-size: 0.9em;
    font-weight: 800;
    margin-bottom: 8px;
}

.title {
    font-size: 1.0em;
    font-weight: 800;
    margin-bottom: 8px;
}

.identity-table{
    margin-top: 12px;
    width: 100%;
}

.proof-summary{
    color: var(--text);
    padding-bottom: 9px;
    font-size: 1em;
}


.bio{
    font-size: 16px;
}

.location{
    font-size: 14px;
    color: #ffffff88;
}


.fa-w-16{
    width: 14px;
    height: 14px;
}

.profile-banner{
    max-width: 90%;
}

.profile-picture{
    border-radius: 9px;
}

.verified-icon{
    position: absolute;
    right:0;
    bottom:0;
}

.user-profile-picture{
    position: relative;
    max-width: 200px;
}

.id-item{
    position: relative;
    width: 100%;
}

.proofs-container {
  display: flex;
  flex-direction: column;
}

.id-item-flex {
  display: flex;
    padding: 20px;
    padding-top:2px;
    padding-bottom:2px;
  align-items: center;
  justify-content: space-between; /* This spreads the items across the full width */
  margin-bottom: 8px; /* Add some space between items */
}

.id-icon {
  /* Your styles for icons */
}

.display-public-proof {
  flex-grow: 1;
  margin: 0 8px; /* Adds some spacing around the link */
  text-align: left;
}

.id-icon:hover{
    box-shadow: 0 0 12px white;
    cursor: pointer;
}



.proof-badge{
    font-size: 20px;
    opacity: 0.3;

}

.proof-badge:hover{
    opacity: 0.9;
}


.proof-proven{
    color: white;
    cursor: pointer;
}


.proof-missing{
    color: red;
    cursor: help;
}


.item-needs-space {
  flex: 0 1 auto; /* Takes up as much space as it needs */
  /* Or simply don't set flex for default behavior */
}



.developer-mode-viewport{
    position: relative;
}

.hr{
    width: 100%;
    height: 3px;
    border-bottom: 1px solid #FFFFFF66;
    margin-top: 6px;
}

.centered-card-flex{
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-brand{
    border: 1px solid #ffffff22;
    background-color: #ffffff11;
    margin: 12px;
    width: 800px;
    max-height: 600px;
    padding: 10px;
    border-radius: 8px;
    margin-top: 20px;
}