#element-info-bar
{
    height:0px;    
    z-index: 600;
    position: absolute;   
    
    will-change:height;      

    @include box-shadow-1(0 -8px 8px -5px rgba(173, 173, 173, 0.75));  

    // element info bar can be displayed at the bottom of the map, or aside
    // display-aside attribution is made in app.component.ts
    &.display-bottom
    {
        right: 0 !important;
        bottom: 0 !important;
        width: 100%;
    }

    &.display-aside
    {       
        top: 0;
        right: 0;   
        height: 100% !important; 

        @include transition(top .5s);

        &.with-search-result-header { 
            top: 3rem; 
            height: calc(100% - 3rem) !important;
        }

        overflow-y: visible;        

        @include box-shadow-1(0px 6px 9px 2px rgba(119, 119, 119, 0.75));

        .element-main-icon { display:none !important; }
        .star-names-icons { display:none !important; } 

        .gogo-icon-close
        {   
            padding-left: 1rem;
        }

        #element-info 
        {  
            .moreDetails 
            {
                display:block !important;
                &.tabs { display:flex !important; }
            }

            .hideOnLargeScreen
            {
                display:none !important;
            }        
        }   
    }    

    .element-item
    {
        .element-main-icon { display:none; }
        .star-names-icons { display:block; }           
    }

    &.inside-normal-mode
    {
        .element-main-icon { display:block; }
        .star-names-icons { display:none; }
    }     

    #element-info .moreDetails { display : none; }

    .gogo-icon-close 
    {
        float: right;
        margin: 0;
        font-size: 1.2rem;
        padding: 1rem 1.5rem 1rem 1.5rem;
        margin-top: -.9rem;
        margin-right: -1.5rem;
        margin-bottom: -1rem;

        &:hover
        {
            cursor: pointer;
        }
    }
}