/* Top Header */
.hide-sidebar #header-fix
{
    left: 0px;
}
#header-fix
{  
    left: 0px;    
    z-index: 10;
    transition: all 0.5s;  
    -webkit-box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.08), 0 1px 20px 0 rgba(0, 0, 0, 0.07), 0px 1px 11px 0px rgba(0, 0, 0, 0.07);
    -moz-box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.08), 0 1px 20px 0 rgba(0, 0, 0, 0.07), 0px 1px 11px 0px rgba(0, 0, 0, 0.07);
    box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.08), 0 1px 20px 0 rgba(0, 0, 0, 0.07), 0px 1px 11px 0px rgba(0, 0, 0, 0.07);
    background: var(--headerbackground);
    .logo-bar
    {
        width: 250px;
        padding: 16px 15px;
        border-right: 1px solid var(--bordercolor);
        background: var(--logobg);
        transition: all 0.5s;
        .horizontal-logo{
            color:var(--logocolor);
            line-height: 31px;
            svg 
            {
                margin-top: -3px;
                g{
                    fill:var(--logocolor);
                }
            }
        }
        @media (max-width: 991px){
            width:130px;
            line-height: 36px;
        }
        @media (max-width: 440px){
            width: 55px !important;
            span
            {
                display: none;
            }
        }
    }
    .collapse-menu-bar
    {
        width:50px; 
        border-right: 1px solid var(--bordercolor);
        padding: 16px 0px;
        line-height: 39px;
    }
    nav{
        height: 65px;
    }
    a,a:hover
        {
        color:var(--headercolor);
        text-decoration: none;
    }
    .search-form
    {
        width: 35%;
        .form-control
        {

            font-size:12px;
            color:var(--searchcolor);
            &::placeholder { 
                color: var(--searchcolor);
                opacity: 0.8; 
            }

            &:-ms-input-placeholder { 
                color: var(--searchcolor);
                opacity: 0.8;
            }

            &::-ms-input-placeholder {
                color: var(--searchcolor);
                opacity: 0.8;
            }
        }
    }
    .top-icon
    {
        >li
        {
            padding: 18px 10px;
            @media (max-width: 440px){
                padding: 18px 7px;
            }
            border-left: 1px solid var(--bordercolor);
            height: 100%;
            &:first-child{
                border-left: none;
            }
            >a{
                @media (max-width: 991px){
                    padding: 8px;
                }
                >i{
                    font-size: 20px;
                    line-height: 14px;
                }
            }
        }
    }
    @media (max-width: 991px){
        left:0px; 
        .search-form
        {
            transition: all 0.5s;
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 100;
            background-color: var(--headerbackground);
            .form-group{
                height: 100%;
                .form-control
                {
                    border-radius: 0rem!important;
                    height: 100%;                   
                }
                .btn-search {
                    top: 24px;
                }
                .close-button
                {
                    right: 10px;
                    top: 24px;
                }
            }
        }
    }



    .btn-search
    {
        top:8px;
        left:15px;
    }



    .badge {
        position: absolute;
        top: 18px;
        right: 18px;
        font-weight: 300;
        padding: 3px 6px;
    }
    .ring {
        position: absolute;
        top: -13px;
        right: -7px;
        height: 25px;
        width: 25px;
        z-index: 10;
        border: 5px solid var(--headercolor);
        border-radius: 100%;
        -webkit-animation: pulsate 1s ease-out;
        -webkit-animation-iteration-count: infinite;
        opacity: 0.0;
    }
    .ring-point {
        width: 6px;
        height: 6px;
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
        border-radius: 100%;
        background-color: var(--headercolor);
        position: absolute;
        right: 3px;
        top: -3px;
    }
    @-webkit-keyframes pulsate {
        0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
        50% {opacity: 1.0;}
        100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
    }

    .dropdown-menu
    {
        font-size: 13px;
        min-width: 200px;
        border-top: none !important;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        margin-top: 50.5px;
        box-shadow: none;
        transition: all .5s;
        display:block;
        visibility: hidden;
        opacity: 0;
        &.show
        {
            margin-top: 0.5px;
            visibility: visible;
            opacity: 1;
        }
        .dropdown-item{
            color:var(--bodycolor);
            &:hover
                {
                color:var(--primarycolor);
            }
        }
        &:after {
            content: '';
            position: absolute;
            top: -9px;
            right: 25px;
            border-bottom: 9px solid var(--headercolor);
            border-left: 9px solid transparent;
            border-right: 9px solid transparent;
            display: none;
        }
        &.left:before
            {
            right: auto; 
            left:22px;
        }
        &.left:after
            {
            right: auto; 
            left:23px;
        }

    }
    .user-profile{
        background:rgba(255,255,255,0.1);
        .user-info
        {
            line-height: 11px;
            margin-left: 7px;
            font-size: 12px;
        } 
    }

}
.header-chart
{
    height: 100px; width: 200px; float:right;
}
