﻿/* **********************/
/* ***** ALL SIZES ******/
/* **********************/

/* Page Title and Body */
body .in-app .page-title {
    background-color: #ffffff;
    border-bottom: 1px solid #ddd;
    margin-bottom: 24px;
    font-family: Arial, Helvetica, sans-serif;
}

    body.in-app .page-title h2 {
        font-family: Rubik, sans-serif;
        font-size: 22px;
        margin: 15px 0;
        letter-spacing: 0.5px;
    }

    body.in-app .page-title .breadcrumbs {
        font-size: 11px;
    }

        body.in-app .page-title .breadcrumbs i.fa {
            margin: 0 3px;
        }

#page.in-app, .staffology-modal {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: normal;
}

body.in-app:not(.in-connect-app) {
    margin-top: 50px !important;
}
/* navbar bg color */
.navbar-fixed-top.in-app {
    background-color: var(--main-color);
    height: 50px;
}
/* brand logo */
.navbar-fixed-top.in-app .navbar-brand {
        height: 50px;
    } .navbar-fixed-top.in-app .navbar-brand img {
            max-height: 34px;
            margin-top: 8px;
            margin-bottom: 8px;
            margin-right: 12px;
        }
/* standard text link */
.navbar-fixed-top.in-app ul li a.nav-link {
        vertical-align: middle;
        height: 50px;
        line-height: 50px;
        padding: 0 12px;
        font-family: Rubik,sans-serif;
        color: #fff;
        -webkit-transition: .5s;
        -o-transition: .5s;
        transition: .5s
    }
/* hover text link */
.navbar-fixed-top.in-app ul li a.nav-link:hover, .navbar-fixed-top.in-app ul li a.nav-link:focus, .navbar-fixed-top.in-app ul li a.nav-link:active {
            color: rgba(255,255,255,.75);
            background-color: transparent;
        }
/* active text link */
.navbar-fixed-top.in-app ul li a.nav-link.active {
            background-color: #fff;
            color: var(--main-color);
        }
/* **********************/
/* ****  MD AND OVER ****/
/* **********************/
@media (min-width: 992px) {

    /* user dropdown */
    .navbar-fixed-top.in-app .user-nav-dropdown a.user-avatar img {
        border-radius: 50%;
        max-height: 35px;
    }

    /* Employer dropdown */

    .nav-company-name {
        font-size: 0.8em !important;
        max-width: 250px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .nav-company-name img {
        margin: auto 5px auto 0;
    }

    .nav-company-name span {
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .nav-company-name i {
      margin-top: auto;
      margin-bottom: auto;
    }

    /* settings dropdown */
    .navbar-fixed-top.in-app .settings-dd {
        top: 34px;
        width: 184px;
    }

    /* open dropdown */
    .navbar-fixed-top.in-app ul li.open a.nav-link {
        background-color: var(--main-color-darker);
        color: rgba(255,255,255,.75);
    }
}
/* ***************************************/
/* ***** MID SIZE ADJUSTMENTS (LG) *******/
/* ***************************************/
@media only screen and (min-width: 992px) and (max-width : 1199px) {
    .navbar-fixed-top.in-app ul li a.nav-link {
        padding: 0 8px;
        font-size: 0.9em;
    }
}
/* position responsive menu for md only (not xs)*/
@media screen and (min-width: 768px) and (max-width: 991px) {

    .in-app.navbar-fixed-top .navbar-collapse {
        position: absolute;
        top: 50px;
        border-top: 1px solid var(--main-color-darker);
        padding-top: 12px;
        padding-bottom: 12px;
        width: 720px;
    }
}
/* **********************/
/* ***** SM & XS   ******/
/* **********************/
@media screen and (max-width: 991px) {


    /* nav toggle */
    .navbar-fixed-top.in-app .navbar-toggle i {
        color: #fff;
        background: #fff;
    }

        .navbar-fixed-top.in-app .navbar-toggle i::before,
        .navbar-fixed-top.in-app .navbar-toggle i::after {
            background: #fff;
        }

    .navbar-fixed-top.in-app .navbar-toggle:not(.collapsed) i {
        background-color: transparent;
    }

    .navbar-fixed-top.in-app .navbar-toggle {
        display: block !important;
    }


    .navbar-fixed-top.in-app .navbar-collapse {
        background-color: var(--main-color);
    }

    /* Hide collapse at md (rather than xs as per BS3 default)*/
    .navbar-fixed-top .navbar-collapse.collapse {
        display: none !important;
    }

        .navbar-fixed-top .navbar-collapse.collapse.in {
            display: block !important;
            padding-bottom: 20px;
        }

    .navbar-fixed-top .navbar-nav > li {
        float: none;
    }

    .navbar-fixed-top.in-app .navbar-sm-employer {
        float: left;
    }

    .pull-right-sm {
        float: right;
    }

    .navbar-fixed-top.in-app .navbar-collapse {
        background-color: var(--main-color);
    }


    .navbar-fixed-top.in-app ul li {
        line-height: 1;
        padding: 4px 12px !important;
        margin: 3px 12px;
    }

    .navbar-fixed-top.in-app ul:not(.navbar-sm-employer) li {
        text-align: right;
    }

    .navbar-fixed-top.in-app ul li a.nav-link {
        font-size: 14px !important;
        line-height: 1;
        height: auto;
        display: inline;
        padding-top: 2px;
        padding-bottom: 2px;
    }

        .navbar-fixed-top.in-app ul li a.nav-link.active {
            margin-right: 6px;
        }
}
/* **********************/
/* *****     XS    ******/
/* **********************/
@media screen and (max-width: 767px) {

    .navbar-fixed-top.in-app .navbar-brand img {
        margin-left: 15px;
    }
} @media (min-width: 768px) {
    body.in-app .page-title h2.has-breadcrumb {
        margin-top: -2px;
        margin-bottom: 10px;
    }
}
