/*  Main THEN Custom... */

/*
*  HTML, Body, etc
*/

/* from mps-main ... */

html, body {
    min-width: 960px !important;
}

/* from site-custom... */

html {
    overflow-y: scroll;
}

body {
    margin: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #333;
    background-color: #f9f9f9;
    padding-bottom: 8px;
    padding-top: 96px;
}

.body-content .popover, .cv-body .popover, .cv-body-no-menu .popover {
    z-index: 3;
    position: absolute;
}

/* A few Menu styles in header */

/** Uncomment this once the top show/hide menus are working better */
/*li.mps-menu-disabled {*/
/*    display: none;*/
/*}*/

/** Remove these styles if not needed */
.mps-menu-disabled ul li a {
    width: 200px;
    white-space: normal !important;
    color: #999 !important;
}

.mps-menu-disabled ul li a:focus,
.mps-menu-disabled ul li a:hover {
    cursor: default !important;
    color: #999 !important;
    background-color: transparent !important;
}

.wf-inbox-number {
    background-color: #f0ad4e;
    color: #2d2d2d;
    font-size: 12px;
    line-height: 12px;
    position: relative;
    top: -1px !important;
}

/* CV Disabled Menus color (instead of looking active all the time) */

body .mpsheader .mps-menu-disabled a.dropdown-toggle {
    color: #1a2a36;
    opacity: .7;
}

body .mpsheader .mps-menu-disabled .mps-menu-disabled {
    display: none !important;
}

/*
*  Default Footer
*/

.mpsfooter {
    margin: 0;
    border: 0;
}

.mpsfooter-navbar {
    min-height: 20px;
    border-width: 0;
}

.mpsfooter-top-container {
    background: #2b577a;
}

.mpsfooter-top-inner {
    margin-left: 40px;
    margin-right: 40px;
    margin-top: 2px;
    margin-bottom: 2px;
    font-size: 10px;
    height: 22px;
    padding-left: 0;
    padding-right: 0;
            border-radius: 0;
    -webkit-border-radius: 0;
}

.mpsfooter-top-right {
    float: right;
}

.mpsfooter-top-text {
    color: #fefefe;
}

.mpsfooter-top-separator {
    margin-left: 5px;
    margin-right: 5px;
}

.mpsfooter-bottom-container {
    background: #fefefe;
}

.mpsfooter-bottom-inner {
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 2px;
    margin-bottom: 8px;
    font-size: 10px;
    height: 14px;
    padding-left: 0;
    padding-right: 0;
    border-radius: 0;
}

.mpsfooter-copy {
    float: left;
    color: #fff;
}

/*
*  Newish Logout Backdrop (wrt: forceLogout json bool)
*/

#mps-logout-backdrop {
    z-index: 9998;
}

.mpsToastPage nav {
    display: none !important;
}

.mpsToastPage .mpsheader-top-right {
    display: none !important;
}

.replace-modal {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, .4);
}

.replace-modal .replace-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    padding: 10px;
    border-radius: 4px;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    background: white;
}

.replace-modal .replace-dialog .message {
    padding: 20px;
    font-family: "Open Sans",
                 "Helvetica Neue",
                 Helvetica,
                 Arial,
                 Verdana,
                 Sans,
                 sans-serif,
                 system !important;
    background: white;
    border: none;
    font-size: 14px;
}

.replace-modal .replace-dialog .button-set {
    display: -webkit-flex;
    display: -ms-flexbox;
    -js-display: flex;
    border-top: solid rgba(0, 0, 0, .15) 1px;
    padding: 10px 0 0 0;
    display: flex;
    -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
}

.replace-modal .replace-dialog .button-set .btn {
    margin-left: 10px;
}

.replace-modal .replace-dialog .input-holder {
    margin-top: -20px;
    margin-bottom: 15px;
}

.replace-modal .replace-dialog .input-holder input {
    width: 100%;
}

/*REDUX*/

/*
*  General Body Centering differences for entire page below ( against top-most body > div.mps-body )
*/

html {
    overflow-y: scroll;
    height: 100%;
}

body {
    margin: 0;
    background-color: #283e5a;
    padding: 0;
    padding-top: 128px;
    padding-bottom: 20px;
    height: 100%;
    min-height: 100%;
}

body.workflow-builder {
    padding-top: 0 !important;
}

/*
*   Magic gutters
*/

body .mps-body,
body .cv-wrap,
body .mpsheader,
body .mpsfooter-navbar {
    width: 100%;
    margin: 0 auto !important;
    max-width: 1200px;
    min-width: 748px;
    background-color: #fff;
}

body .mpsheader.mini {
    padding-bottom: 0 !important;
}

/*
*  REDUX Header Msg, very different from Default
*/

.mpsheader .cv-global-message {
    border-color: transparent !important;
    background-color: transparent !important;
    border-radius: 0px;
    position: fixed !important;
    width: 100% !important;
    min-width: 748px;
    margin: 0 !important;
    padding: 0 !important;
    left: 0px;
}

.mpsheader .cv-global-message-inner {
    position: fixed !important;
    width: 100% !important;
    min-width: 748px;
    max-width: 1200px;
    background-color: #ffd34b;
    border-radius: 0px;
    border: solid 0px #ffd34b !important;
    border-bottom: solid 1px #ccc !important;
    margin: 0 auto !important;
    left: 0;
    right: 0;
    top: 128px !important;
    padding: 15px 20px 15px 35px;
}

#mpsPageHeader.mini .cv-global-message-inner {
    top: 50px !important;
}

body .mpsheader .cv-global-message-content {
    display: block;
    padding: 0 15px 0 10px;
}

.mpsheader .cv-global-message {
    border-color: transparent !important;
    background-color: transparent !important;
    border-radius: 0;
    position: fixed !important;
    width: 100% !important;
    min-width: 748px;
    margin: 0 !important;
    padding: 0 !important;
    left: 0;
}

.mpsheader .cv-global-message-content {
    display: block;
    padding: 0 15px 0 10px;
}

.mpsheader .cv-global-message .glyphicon {
    position: absolute;
    top: 15px;
    left: 15px;
}

.mpsheader .cv-global-message a .glyphicon {
    position: absolute;
    top: 10px;
    right: 9px !important;
    text-align: right;
}

.mpsheader .cv-global-message a {
    color: #fff;
}

body .mpsheader .cv-global-message .glyphicon {
    position: absolute;
    top: 15px;
    left: 15px;
    color: #333;
}

body .mpsheader .cv-global-message a .glyphicon {
    position: absolute;
    top: 10px;
    left: initial;
    right: 9px !important;
    color: #333;
}

body .mpsheader .cv-global-message a {
    color: #333;
}

body .mpsheader .cv-global-warning .cv-global-message-inner {
    border-color: #ffd34b;
    background-color: #ffd34b;
    color: #333 !important;
}

body .mpsheader .cv-global-warning .cv-global-message-inner .glyphicon {
    color: #333 !important;
}

body .mpsheader .cv-global-warning .cv-global-message-inner a {
    color: #333 !important;
}

body .mpsheader .cv-global-danger .cv-global-message-inner {
    border-color: #d40a00;
    background-color: #d40a00;
    color: #fff !important;
}

body .mpsheader .cv-global-danger .cv-global-message-inner .glyphicon {
    color: #fff !important;
}

body .mpsheader .cv-global-danger .cv-global-message-inner a {
    color: #fff !important;
}

body .mpsheader .cv-global-info .cv-global-message-inner {
    border-color: #ffd34b;
    background-color: #ffd34b;
    color: #333 !important;
}

body .mpsheader .cv-global-info .cv-global-message-inner .glyphicon {
    color: #333 !important;
}

body .mpsheader .cv-global-info .cv-global-message-inner a {
    color: #333 !important;
}

/*
* Admin Pages (BUGBUG: Need a body.className, maybe?)
*/

.mps-body .body-content,
.cv-wrap .body-content {
    padding-bottom: 46px;
}

/*
*  MPS/APPT (?) BODY
*/

.mps-body {
    height: 100%;
    min-height: 100%;
}

.mps-body .cv-body {
    margin-right: 0;
}

.mps-body .body-content {
    margin-left: 0;
    margin-right: 0;
}

/*
*   Exploratory 'No More cv-callouts' classes... works on most pages, but something like Admin > User Details is a little awkward without them.
*
*   .mps-skin-border is for the few uses of cv-callout we do want to have borders on in skins that don't want them otherwise
*/

body div .cv-callout,
body div .cv-callout-info,
body div .cv-callout-bordered {
    border-width: 0;
}

body div .mps-skin-border {
    border-color: #ccc;
    border-radius: 4px;
    border-style: solid;
    border-width: 1px;
    margin: 10px 0;
    padding: 10px;
    background-color: #fff;
}

/* ADMIN Pages */

.mps-admin-page .body-content {
    padding-left: 30px !important;
    padding-right: 30px !important;
}

/*
*  CV ONLY (Mostly - *** be careful as there are copy-pasta cv classes in some APPT templates... ***
*  body.cv (No Space!) was added to help with this for Redux.
*  Slightly Different page DOMs from APPT, either way
*/

/*     Some CV Specific (?) change to make it work in the new gutter'd centered Redux Skin */

body.cv .cv-wrap .cv-menu {
    position: relative;
    display: inline-block;
    padding-bottom: 10029px;
    margin-bottom: -9999px;
    vertical-align: top;
}

body.cv .cv-body {
    width: 100%;
}

body.cv .cv-body,
body.cv .cv-body-content,
body.cv .cv-body-no-menu,
body .body-content {
    background-color: #fff !important;
}

body.cv .cv-body-content {
    min-height: calc(100vh - 128px - 36px);
    overflow: hidden;
}

body.cv .cv-body {
    width: calc(100% - 235px);
    display: inline-block;
    padding-bottom: 10054px;
    margin-bottom: -9999px;
    margin-left: 0;
    margin-right: 0;
}

body.cv .cv-body.cv-body-no-menu {
    display: inline-block;
    padding-bottom: 30px;
    margin-left: 0;
    margin-right: 0;
}

body .cv-body-no-menu,
body.cv .cv-wrap .cv-body-no-menu {
    margin-left: 0 !important;
}

body.cv .cv-body-no-menu {
    padding-left: 30px;
    width: 100%;
}

body.cv,
body.cv .cv-wrap {
    min-height: 100%;
    height: 100%;
}

body.cv .cv-category-help {
    top: 2px;
    z-index: 99;
    right: 0;
    bottom: 1px;
}

body.cvHelpOpen .mps-body,
body.cvHelpOpen .cv-wrap,
body.cvHelpOpen .mpsheader {
    margin-right: 255px !important;
    width: 81%;
}

/* Visitor File Upload needs a couple adjustments */

.wf-eval-upload .mps-body {
    top: 128px !important;
    height: 100% !important;
}

.wf-eval-upload .mps-body .wf-candidate-info {
    height: 100% !important;
    min-height: 400px !important;
}

.wf-eval-upload .mps-body .wf-visitor-content {
    min-height: 400px !important;
}

/* Back to Global & Shared page Styles */

/*
*  REDUX HEADER, quite different from Default
*/

.mpsheader {
    position: fixed;
    top: 0;
    z-index: 3;
    min-height: 128px;
    padding: 0 28px;
    border-bottom: solid 1px #bfd5e6;
}

.mpsheader .mpsheader-top-container a {
    color: #3572a0 !important;
    font-weight: 600;
}

.mpsheader nav.navbar a {
    color: #3572a0;
    font-weight: 600;
}

.mpsheader nav.navbar a:active {
    color: #3572a0 !important;
    font-weight: 600;
}

.mpsheader nav.navbar-inverse a {
    color: #3572a0;
    font-weight: 600;
}

.mpsheader nav.navbar-inverse a:active {
    color: #3572a0 !important;
    font-weight: 600;
}

.mpsheader-top-image {
    position: relative;
    top: 37px;
    max-height: 90px;
}

.mpsheader nav.navbar a {
    text-transform: uppercase;
}

.mpsheader .mpsheader-top-container a:focus,
.mpsheader .mpsheader-top-container a:hover {
    color: #1d6196 !important;
    text-decoration: underline;
}

.mpsheader nav.navbar a:focus,
.mpsheader nav.navbar a:hover {
    color: #1d6196 !important;
    text-decoration: underline;
}

.mpsheader nav.navbar {
    background-color: transparent;
    position: absolute !important;
    left: 100px;
    right: 28px;
    top: 60px;
    border: 0;
}

.mpsheader-top-left {
    float: left;
}

.mpsheader-top-right {
    color: #3572a0;
    float: right;
    margin-top: 25px;
}

.mpsheader .navbar li .glyphicon {
    margin-right: 6px;
    display: none;
}

/* DropDowns Inner */

.mpsheader .navbar-nav > li > a {
    padding: 5px 15px !important;
}

.mpsheader nav.navbar .dropdown-menu {
    min-width: 100%;
}

.dropdown-toggle:hover,
.dropdown-toggle:focus {
    background: #1d6196 !important;
    text-decoration: underline !important;
}

.mpsheader nav.navbar .dropdown-menu a {
    text-transform: none;
    font-weight: normal;
}

.mpsheader nav.navbar .open .dropdown-toggle {
    background-color: transparent;
    border: solid 1px #ccc;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    border-bottom: 0;
    color: #1d6196;
}

.mpsheader nav.navbar .dropdown-toggle:hover,
.mpsheader nav.navbar .dropdown-toggle:focus {
    background: white !important;
}

.mpsheader nav.navbar .topMenuHide {
    display: none;
}

/*
*   Footer Differences
*/

.mpsfooter-navbar {
    z-index: 1000;
    height: 36px !important;
}

.mpsfooter {
    background-color: #2b577a !important;
}

.mpsfooter-navbar {
    background-color: #2b577a !important;
}

.mpsfooter-top-container {
    background-color: #2b577a !important;
}

.mpsfooter-navbar, .mpsfooter {
    text-align: center !important;
}

.mpsfooter .mpsfooter-top-inner,
.mpsfooter .mpsfooter-top-right {
    font-size: 13px;
    line-height: 34px;
    position: relative;
    top: -1px;
}

.mpsToastPage div.toast-main {
    position: relative !important;
    margin-bottom: 20px;
}

.btn-primary {
    background: #3572a0 !important;
}

.wf-empty-button {
    -webkit-appearance: none !important;
    background: transparent;
    border: none !important;
}

.btn-primary:focus,
.btn-primary:hover {
    background: #1d6196 !important;
}

/*Floating Header*/

body #mpsPageHeader.mini {
    height: 50px;
    min-height: 10px;
}

#mpsPageHeader.mini nav {
    top: 11px;
    min-width: 570px;
    width: 76%;
    white-space: nowrap;
}

.mini.super-crushed .navbar-nav,
.mini.crushed .navbar-nav {
    float: none;
    display: inline-block;
}

.mini.super-crushed .nav>li {
    float: none;
    display: inline-block;
}

.mini.super-crushed .nav {
    background: white;
}

.mini.super-crushed .navbar-right,
.mini.crushed .navbar-right {
    float: none !important;
    display: inline-block;
    margin-right: -15px;
}

#mpsPageHeader.mini img.mpsheader-top-image {
    height: 40px;
    top: 15px;
}

#mpsPageHeader.mini .mpsheader-top-left {
    margin-top: -10px;
}

#mpsPageHeader.mini .mpsheader-top-right {
    margin-top: 15px;
}

/*
*  NOTE: The Default skin does actually have a Skim for the header - the Redux version is so different it is a copy pasta clone with many changes...
*/

/*
* 3rd Party Pages: Header & top bars are very different
*/

.mpsheader-top-left h1 {
    display: inline;
    position: relative;
    left: 10px;
    top: 1px;
    color: #fff;
    font-size: 24px;
}

#mpsPageHeader.mini .mpsheader-top-left h1 {
    top: 18px;
    font-size: 22px;
}

.wf-eval-upload	.page-header {
    height: 55px;
}

.wf-eval-upload .third-party-page-header {
    height: auto !important;
}

.wf-eval-upload .third-party-page-header h3 {
    margin-top: 5px;
    padding-top: 0;
    color: #333;
    font-size: 20px;
    margin-bottom: 5px !important;
}

.wf-eval-upload .third-party-page-header .page-header-left p,
.wf-eval-upload .third-party-page-header .page-header-right p {
    color: #226699;
    font-size: 20px;
    margin-bottom: 5px !important;
}

.wf-eval-upload .third-party-page-header .page-header-left {
    float: left;
    width: 35%;
}

.wf-eval-upload .third-party-page-header .page-header-right {
    float: right;
    margin-right: 20px;
    width: 35%;
}

.wf-eval-upload .wf-visitor-content {
    padding-left: 30px !important;
}

.wf-eval-upload .wf-visitor-content {
    background-color: #fff !important;
    padding-bottom: 40px !important;
}

body .mps-body {
    max-width: calc(100% - 90px) !important;
}

body .cv-wrap {
    max-width: calc(100% - 90px) !important;
}

body .mpsheader {
    max-width: calc(100% - 90px) !important;
}

body .mpsfooter-navbar {
    max-width: calc(100% - 90px) !important;
}

.mpsheader .cv-global-message-inner {
    max-width: calc(100% - 90px) !important;
}

body.small-screen .mps-body {
    max-width: 100% !important;
}

body.small-screen .cv-wrap {
    max-width: 100% !important;
}

body.small-screen .mpsheader {
    max-width: 100% !important;
}

body.small-screen .mpsfooter-navbar {
    max-width: 100% !important;
}

body.small-screen .mpsheader .cv-global-message-inner {
    max-width: 100% !important;
}

body.desktop.small-screen #mpsPageHeader.mini.crushed nav {
    width: 68% !important;
}

body.wf-dashboard-body #wf-rooster-grid_filter {
    float: none !important;
    display: inline-block;
}

#wf-details-toc-body .wf-nav-highlight {
    max-width: 225px !important;
}