/*

Colors

#fbf7ff
#f6dcff
#e7b7f7
#9664A0
#7636a5
#5f1d80
#530064

*/


.menuItem
{
    margin: auto 0;
    text-align: center;
    white-space: nowrap;
    height: 100%;
}
    
.activeMenuItem
{
    font-weight: bold;
}

.activeMenuItem
{
    background-color: #f6dcff !important;
}

.menuDivider
{
    height: 0.1em;
}

#accountMenuUserInfoDIV,
#accountMenuUserInfoDIV div
{
    text-align: center;
}

#accountUserNameSpan,
#accountEmailSpan,
#accountPhoneSpan
{
    color: #555;
}

#accountEmailSpan
{
    font-style:italic;
}

.menuItems_hDIV
{
    min-width: 46vw;
}

.accountMenuItem
{
    font-size: clamp(0.3em, 1vw, 0.8em);
    margin-top: clamp(1em, 2.4vw, 2.4em);
}

.homeMenuItem
{
    font-size: 1.4vw;
    line-height: 5vw;
    padding: 0 2vw;
    background-color: #fbf7ff;
    border-left: solid 0.1em #e7b7f7;
}

.homeMenuItemLast
{
    border-right: solid 0.1em #e7b7f7;
}

#homeSearch
{
    padding: 0.7vw 0.7vw 0.7vw 3vw;
    font-size: 1.2vw;
    width: 20vw;
    margin: 1vw 0;
}





#accountMenuDIV
{
    margin: auto;
}

#accountMenuContentDIV
{
    margin-top: clamp(2em, 3vw, 2em);
}

#accountLargeIcon
{
    width:fit-content;
    margin-bottom: clamp(0.3em, 2.5vw, 2em) !important;
}

#accountLargeIcon .accountDIV
{
    padding: clamp(0.2em, 2.4vw, 2em);
    border-radius: clamp(0.4em, 6.8vw, 6em);
    font-size: clamp(1.2em, 3.6vw, 2.8em);
    height: clamp(0.4em, 5.2vw, 6em);
    width: clamp(0.4em, 5.2vw, 6em);
}

#accountLargeIcon .accountDIV div
{
    width: clamp(0.4em, 5.2vw, 6em);
    font-size: clamp(0.8em, 3.2vw, 3.6em);
    line-height: clamp(1.2em, 5.8vw, 1.8em);
}


.accountUserInfoDIV,
.accountInputDIV
{
    display: inline-flex;
    align-items: center;
}

.accountUserInfoDIV .editIcon
{
    height: clamp(0.2em, 1vw, 0.8em);
    width: clamp(0.2em, 1vw, 0.8em);
    margin-left: clamp(0.2em, 1vw, 0.8em) !important;
}

.accountInput
{
    font-size: clamp(0.1em, 1.1vw, 0.9em);
    padding: clamp(0.1em, 0.3vw, 0.2em);
    background-color: #f6dcff !important;
    color: #530064 !important;
    width: clamp(3em, 11vw, 9em);
    margin-right: clamp(0.1em, 0.4vw, 0.3em);
    cursor: text;
    text-align: center;
}

#accountLoaderDIV
{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.85);
    align-content: center;
    text-align: center;
}





#accountMenuUserInfoDIV
{
    padding: clamp(0.3em, 1vw, 0.8em) 0;
    justify-items: center;
    display: grid;
}

#accountMenuUserInfoDIV div
{
    margin: clamp(0.05em, 0.3vw, 0.2em) 0;
}

#accountUserNameSpan
{
    margin-bottom: clamp(0.3em, 1vw, 0.8em);
}

#accountUserNameSpan,
#accountEmailSpan,
#accountPhoneSpan
{
    font-size: clamp(0.2em, 1vw, 0.8em);
}

#accountFullNameSpan
{
    font-size: clamp(0.2em, 1.5vw, 1em);
}







/*
------------------------------------ ASPECT RATIO DRIVEN RULES
----------------------
---------------------- PORTRAIT RULES
*/

#accountMenuDIV
{
    height: 50vw;
}



/*
---------------------- LANDSCAPE RULES
*/

@media (min-aspect-ratio: 1)
{
    #accountMenuDIV
    {
        height: 70vh;
    }
    
}



/*
------------------------------------ MAXIMUMS/LIMITS
*/


@media screen and (min-width: 56em)
{

    .homeMenuItem
    {
        font-size: 0.6em;
        line-height: 3.6em;
        padding: 0 2em;
    }
    
    #homeSearch
    {
        padding: 0.5em 0.5em 0.5em 2.4em;
        font-size: 0.6em;
        width: 16em;
        margin: 0.5em 0;
    }
    
    .menuItems_hDIV
    {
        min-width: 27em;
    }
}

.homeTabHeader
{
    margin: 0 0 2em;
}

.homeTabTitle,
.homeTabBackArrow
{
    font-size: 0.8em;
}

.homeTabBackArrow
{
    position: fixed;
    margin-left: 4em;
    padding-left: 1.2em;
    background-size: 0.9em;
    background-position-y: 0.07em;
}