.allArea .topBar .userBox {
        display: none;
        padding: var(--Padding-xs) var(--Padding-sm);
        color: var(--Header-Texts);
        border-radius: var(--Radius-full);
        border: 1px solid var(--Borders-On-Dark);
    }
    .allArea .topBar .userBox .userName, .allArea .topBar .userBox svg  {
        pointer-events: none;
    }

@media only screen and (min-width: 960px) {
    .allArea .topBar .userBox {
        position: relative;
        display: flex;
        gap: var(--Gap-sm);
        cursor: pointer;
    }
    .allArea .topBar .userBox svg {
        width: 24px;
        height: 24px;
        stroke: var(--Icons-Low-Contrast);
        pointer-events: none;
    }
    .allArea .topBar .userBox .userMenu {
        position: absolute;
        top: 36px;
        left: 0px;
        width: 180px;
        padding: var(--Padding-lg) var(--Padding-md);
        display: none;
        flex-direction: column;
        align-items: center;
        border-radius: var(--Radius-custom, 6px);
        border: 1px solid var(--Borders-Brand-Low);
        background: var(--Background-Surface);
        box-shadow: 0px 0px 4px 0px rgba(133, 133, 133, 0.40);
        z-index: var(--zIndex-allArea-topBar-userBox-userMenu);
    }
    .allArea .topBar .userBox .userMenu .item {
        width: 100%;
        justify-content: end;
        gap: var(--Gap-sm);
        cursor: pointer;
    }
    .allArea .topBar .userBox .userMenu .item a {
        color: var(--Text-Body-Secondary);
    }
    .allArea .topBar .userBox .userMenu svg {
        width: 24px;
        height: 24px;
        stroke: var(--Colors-Neutrals-600);
    }
}