//*****************************************************************************
//*****************************************************************************
// App Header Styles
//*****************************************************************************
//*****************************************************************************

header {
    background: #fbfbfb;
    border-bottom: 1px solid #e5e5e5;
    &.mobile {
        background: #f6f6f6;
    }

    .q-icon {
        color: #999999;
    }

    .header-title {
        background: #fff !important;
        color: #444 !important;
    }

    .side-logo {
        width: 220px;
        //border-right: 1px solid #e5e5e5;
        flex: 1 0 0;
        padding-top: 11px;
        padding-bottom: 8px;
        padding-left: 10px;
        //border-bottom: 1px solid #e5e5e5;

        .header-logo {
            max-width: 130px;
            margin-left: 20px;
            padding-top: 1px;
        }

        .mobile-logo {
            background: white;
            max-width: 35px;
            border-radius: 5px;

            .q-img__container {
                padding: 3px;
            }
        }

        @media (max-width: $breakpoint-sm-max) {
            width: 60px;
        }
    }

    .q-toolbar-title {
        font-weight: 600;

        a {
            color: inherit;
        }

        .header-title-caption {
            display: inline-block;
            font-size: 22px;
            letter-spacing: -1px;
            padding-bottom: 5px;
            margin-left: 5px;
        }
    }

    .search-wrapper {
        flex: 2 0 0;
        padding: 0px 15px 0 15px;
        width: 350px;

        > .row {
            //width: 350px;
        }

        .q-field {
            margin: 0;
        }

        input {
            width: 350px;
        }

        @media (max-width: $breakpoint-sm-max) {
            width: 250px;
            padding: 0;
            input {
                width: 250px;
            }
        }
    }

    .right-nav-activator {
        padding: 15px 15px 0 5px;
        .q-btn {
            background: $secondary;
            .q-icon {
                color: white;
            }
        }
    }

    .avatar {
        background: #e5e5e5;
        bottom: 5px;

        i.q-icon {
            //color: #9e9e9e !important;
        }
    }

}

.mobile-search {
    background: #fbfbfb;
    //margin: -3px 0 10px -8px;
    border-bottom: 1px solid #e5e5e5;
    padding-left: 10px;
    padding-right: 10px;

    .flex-column {
        padding-bottom: 0 !important;
    }

    .q-field {
        margin: 0;
    }
}

//*************************************************************************
// Landscape phone to portrait tablet
//*************************************************************************
@media (max-width: 767px) {

    .mobile-search {
        .flex-column {
            padding-bottom: 5px;
        }
    }
}

//*************************************************************************
// Landscape phones
//*************************************************************************
@media (max-width: 480px) {


}

//*************************************************************************
// Portrait phones and down
//*************************************************************************
@media (max-width: 320px) {


}