.dialog {
    position:                                                   absolute;
    background-color:                                           var(--background-dialog);
    box-shadow:                                                 2px 5px 10px var(--background-dialog);
    z-index:                                                   9999;

    cursor:                                                    default;
}

.dialog--account {
    top:                                                       90px;
}

.dialog-arrow {
    content:                                                    "";
    position:                                                   absolute;
    transform:                                                  translateX(-50%);
    border-width:                                               10px;
    border-style:                                               solid;
    border-color:                                               transparent transparent var(--background-dialog) transparent;
}

.dialog-arrow--account {
    top:                                                      71px;
}

.dialog--retracted {
    display:                                                    none;
}

.dialog-blocked-button {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    position:                                                   absolute;
    cursor:                                                     pointer;
}

.dialog-title {
    font-size: 15px;
    color: var(--fontcolor-dialog-title);
}

.dialog-sub {
    font-size: 13px;
    color: var(--fontcolor-dialog-sub);
}

/* .dialog-sub--center {
    justify-content: center;
    align-items: center;
    text-align: center;
} */

.dialog-role {
    font-size: 13px;
    color: var(--fontcolor-dialog-role);
}

.dialog-text {
    font-size: 13px;
    color: var(--fontcolor-dialog-text);
}


.dialog-header {
    flex: 1;
    height:                                                     45px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dialog-footer {
    flex: 1;
    height:                                                     45px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dialog-option {
    display:                                                    flex;
    justify-content:                                            left;
    align-items:                                                center;
    text-align:                                                 center;
    height:                                                     40px;
    cursor:                                                     pointer;
    gap:                                                        20px;
    background-color:                                           var(--background-dialog-option);
}

.dialog-option--default {
    margin-top: 2px;
    padding-left: 20px;
    padding-right: 20px;
    user-select: none;
}

.dialog-option--default:hover {
    background-color:                                           var(--background-dialog-option-hover);
}

.dialog-option--account {
    justify-content:                                            space-between;
    height:                                                     90px;
    padding:                                                    5px 20px;
    cursor:                                                     auto;
}

.dialog-option--session {
    justify-content:                                            center;
    height:                                                     20px;
    cursor:                                                     auto;
}

.dialog-option-div {
    display: flex;
    flex-direction: column;
    /* justify-content: space-around; */
    /* align-items: center; */

    /* flex: 1; */
    min-height:                                                     65px;
    padding-left: 5px;
    padding-right: 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: start;

    /* background-color: red; */
}

.dialog-option-div--center {
    justify-content: center;
    align-items: center;
    text-align: center;
}

.dialog-header-avatar {
    width:                                                      75px;
    height:                                                     75px;
    object-fit:                                                 cover;
    background-color:                                           var(--background-avatar-icon);
    border-radius:                                              50%;
}

@media (max-width: 1490px) {
    .dialog--account {
        top:                                                    80px;
    }

    .dialog-arrow--account {
        top:                                                  61px;
    }
}