.account-preview {

    @include titleFont();

    position: absolute;
    
    left: 88%;
    top: 1vh;

    padding: 2vh 0px;

    display: flex;
    flex-direction: column;
    align-items: center;
    
    .initials {

        height: 8vh;
        width: 8vh;

        color: #fff;
        background-color: rgb(81, 81, 255);
        font-size: 3vh;

        border-radius: 100%;

        display: flex;
        align-items: center;
        justify-content: center;

        cursor: pointer;

        user-select: none;

        &.inclusive {

            font-size: 11pt;
        }
    }

    .full-name {
        
        //height: 5vh;
        width: 5vw;

        margin-top: 0.5vh;
        background-color: rgba(0, 0, 0, 0.658);
        color: #fff;

        display: flex;
        justify-content: center;

        opacity: 0%;

        transition: 0.4s ease-in-out;
        text-align: center;
        
        padding: 0px 2vw;
        padding-bottom: 1vh;
        border-radius: 10px;

        user-select: none;

        &.show {

            opacity: 100%;

            transition: 0.4s ease-in-out;
        }
    }
}

@media (max-width: 991.98px) {

    .account-preview {

        left: 80%;

        .full-name {


            &.show {
                
                opacity: 0%;
            }
        }
    }
}