.user_values {
    visibility: hidden;
    display: flex;
    flex-direction: column;
    position: absolute;
    box-shadow: 0 4px 16px 8px rgba(0, 26, 52, .16);
    width: 264px;
    border-radius: 8px;
    z-index: 10;
    background-color: white;
    padding: 5px;
    color: black;
    right: -60px;
    font-size: 14px;
    margin-top: 15px;
    transition-duration: 0.5s;
}

.user_value, .client_mode {
    cursor: pointer;
    padding: 10px;
}

.user_value a {
    display: block;
    height: 100%;
    width: 100%;
}

.client_mode:hover {
    background-color: #ededed;
}

.user_value:hover {
    background-color: #ededed;
}

.user_info {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: default;
}

.user_info:hover ~ .user_values {
    visibility: visible;
}

.user_values:hover {
    visibility: visible;
}

.arrow:before {
    content: "";
    border: solid transparent;
    position: absolute;
    bottom: 100%;
    left: 33%;
    border-bottom-color: white;
    border-width: 9px;
    margin-left: -9px;
}

@media (max-width: 600px) {
    .user_wrapp {
        display: none;
    }
}