/*!
    bootstrap PRIMARY = #337ab7
    hrnext "blue" = #143D8D
    hrnext "green" = #78A22F

    TEST
    --hrnext-primaryblue: red;
    --hrnext-highlightgreen: grey;

 */

:root{
    --hrnext-primaryblue: #143D8D;
    --hrnext-highlightgreen: #78A22F;
    --hrnext-backgroundcolor: #FFFFFF;
    --hrnext-lockinlowerband: #143D8D;
    --hrnext-mainmenuband: #FFFFFF;
    --hrnext-topnavband: #FFFFFF;
    --hrnext-topnavlinks: #78A22F;
}

    /*In theory
        Something like the below should work...and DOES work in "modern browsers", but even something like IE11 isn't considered modern with respect
        to CSS VARS.  So, the below will NOT be recognized in IE11, but WILL for example in Chrome.  Even WITH our ponyfill plugin to get all CSS VARs to work
        in IE11 (and prior), that plugin still does not handle this case... of reassignment of the values.
    */
/*
    .isPlatformCloud {
    --hrnext-highlightgreen: blue;
}

*/

body {height: 100%;}
a {color: var(--hrnext-primaryblue);}
a:focus,a:hover {color: var(--hrnext-highlightgreen); cursor: pointer;}

/********* media queries */
/* http://www.telerik.com/forums/responsive-radgrid-with-filters */

/*  
    LANDSCAPE
    iPhone 5    = 568 
    iPhone 6    = 667
    iPhone 6+   = 736
    iPad        = 1024

    PORTRAIT
    iPhone 5    = 320 
    iPhone 6    = 375
    iPhone 6+   = 414
    iPad        = 768
*/

/* RadGrid PAGER LINE
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    < 1000 (hide parts)
    > 1000 (show extra parts)
*/
@media screen and (max-width: 567px)
{
    /* List of individual PAGE NUMBERS
        These will add too much space at the small viewports...and make things look bad.
    */
    .RadGrid_Bootstrap .rgPager .rgNumPart {display: none !important;}
}

@media screen and (max-width: 999px)
{
    .rgFilterRow {display: none !important;}
    /* Item X to Y of ZZ */
    .RadGrid_Bootstrap .rgPager .rgInfoPart {display: none !important;}
    /* List of individual PAGE NUMBERS 
    .RadGrid_Bootstrap .rgPager .rgNumPart {display: none !important;}
    */

    /* GOTO Page number */
    .RadGrid_Bootstrap .rgPager .rgAdvPart [id*="GoToPageLabel"],
    .RadGrid_Bootstrap .rgPager .rgAdvPart [id*="GoToPageTextBox_wrapper"],
    .RadGrid_Bootstrap .rgPager .rgAdvPart [id*="PageOfLabel"],
    .RadGrid_Bootstrap .rgPager .rgAdvPart [id*="GoToPageLinkButton"]
        {display: none !important;}
}
/* Think around 1000 it is safe to add back in our extra "pager" items. Really want this at least on the LS iPad, so 1000 seems a good MIN point. */
@media screen and (min-width: 1000px)
{
    .rgFilterRow {display: none !important;}

    /* Item X to Y of ZZ */
    .RadGrid_Bootstrap .rgPager .rgInfoPart {display: normal !important;}

    /* GOTO Page number */
    .RadGrid_Bootstrap .rgPager .rgAdvPart [id*="GoToPageLabel"],
    .RadGrid_Bootstrap .rgPager .rgAdvPart [id*="GoToPageTextBox_wrapper"],
    .RadGrid_Bootstrap .rgPager .rgAdvPart [id*="PageOfLabel"],
    .RadGrid_Bootstrap .rgPager .rgAdvPart [id*="GoToPageLinkButton"]
        {display: normal !important;}
}
/* RadGrid PAGER LINE
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    < 1000 (hide parts)
    > 1000 (show extra parts)
*/


/* RadGrid COLUMNS
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
*/

/* Boundary for biggest portrait phone.  This is where you'll want to turn most things off except bare min things...
    i.e. things/cols without ANY particular restriction.
*/
@media screen and (max-width: 414px)
{
    .colShowForLSPhone {display: none;}
    .colShowForTablet {display: none;}
    .colShowForDesktop {display: none;}
    .colShowForDesktopWide {display: none;}
}

/* Boundary for biggest LS phone and/or iPad portrait.  This is where you'll want to maybe add in an extra 1 or 2 fields (at most).
    Rember, 736 is the iPhone 6+ in LS (and iPad is 768 portrait), that's a big jump from iPhone 5 (568) in LS, so, can't go crazy here.
*/
@media screen and (max-width: 767px)
{
    .colShowForTablet {display: none;}
    .colShowForDesktop {display: none;}
    .colShowForDesktopWide {display: none;}
}


/* Boundary for iPad LS (and maybe some small res laptops).  Again, probably 1 or 2 extra fields. */
@media screen and (max-width: 1024px)
{
    .colShowForDesktop {display: none;}
    .colShowForDesktopWide {display: none;}
}

/* Boundary (arbitrary) that we are calling desktop (1200). Here you can polish off the list of fields that a normal/standard desktop user should see */
@media screen and (max-width: 1200px)
{
    .colShowForDesktopWide {display: none;}
}

/* Boundary for EXTRA detail here... to give large screen users something extra to look at with all the space the might have available.
    Still, don't go crazy.  You don't know if they have a display of 1205 or 2205.  We can keep going with these boundaries, but one needs to cut it off
    and go with something for now.
*/
@media screen and (min-width: 1200px)
{
    .colShowForDesktopWide {display: normal;}
}
/* RadGrid COLUMNS
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
*/

/* Font ZOOM
    Until BS4 (where they might have better type scaling techniques), it is hard to do this super right, but let's have something in place...
*/
@media screen and (max-width: 767px)
{
    h1 {font-size: 22px;}
    h2 {font-size: 18px;}
    h3 {font-size: 16px;}
    h4 {font-size: 14px;}
    h5 {font-size: 12px;}
    h6 {font-size: 10px;}
}

/********* media queries */



/********* Telerik bootstrap skin adjustments */
/*      GRID */
.RadGrid_Bootstrap .rgFilterRow .rgFilter {margin-left: 5px;}
.RadGrid_Bootstrap .rgFilterRow > td {border-left: 1px solid #ddd;}
.RadGrid_Bootstrap .rgHeader {font-weight: bold !important;}

.RadGrid_Bootstrap .rgHoveredRow.rgSelectedRow, .RadGrid_Bootstrap .rgSelectedRow,
.RadGrid_Bootstrap .rgSelectedRow td, .RadGrid_Bootstrap .rgMasterTable .rgSelectedCell
{background-color: #bfbfbf !important;}

/*2015 Q2 SP2 seemed to move (float) the middle pager piece to the left instead of keeping it fluid in the center...
    think it looks better being fluid in the center.*/
.RadGrid_Bootstrap .rgPager .rgPagerCell .NextPrevNumericAndAdvanced .rgWrap.rgAdvPart
{float: none; text-align: center;}

/*      INPUTS  */
/*          (DATE/TIME PICKERS) */
.RadPicker .RadInput_Bootstrap .riEmpty {font-style: normal !important; color: #999 !important;}
.RadPicker .RadInput_Bootstrap .form-control {z-index: inherit !important;}
.form-group .RadPicker { display: block; width: 100%;}
/*          (TEXT/disabled) */
.RadInput_Bootstrap .riTextBox.riDisabled {background: #eee;}
/*          (RADCOMBOBOX)...trying to match up with other BS elements */
.RadComboBox_Bootstrap.form-control {padding: 0; width: 100% !important;}
.RadComboBox_Bootstrap.form-control .rcbInner {border-style: none; padding-left: 12px; padding-right: 12px;}
/*          (RAD DATE/TIME PICKER)...trying to match up with other BS elements */
.RadInput_Bootstrap .form-control.riTextBox {padding-left: 12px; padding-right: 12px;}


/*2019 Q1 (from 2016) increased padding to 15px/15px... that throws off a ton of our Grid/cols that assumed the smaller margin.  So, instead of changing about every single
    Grid/col (in particular the ACTIONS column), let's just set the padding back to close to what it was before. */
.RadGrid_Bootstrap .rgRow > td,
.RadGrid_Bootstrap .rgAltRow > td,
.RadGrid_Bootstrap .rgEditRow > td,
.RadGrid_Bootstrap .rgFooter > td,
.RadGrid_Bootstrap .rgFilterRow > td,
.RadGrid_Bootstrap .rgHeader,
.RadGrid_Bootstrap .rgResizeCol,
.RadGrid_Bootstrap .rgGroupHeader td {
    padding-left: 7px !important;
    padding-right: 7px !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
}
/********* Telerik bootstrap skin adjustments */



/********* HRnext custom */
.marginContent {margin: 1em;}
.marginLeftElement {margin-left: 1em;}
.marginLeftElementHalfx {margin-left: .5em;}
.marginRightElement {margin-right: 1em;}
.marginRightElementHalfx {margin-right: .5em;}

.marginBottomElement {margin-bottom: 1em;}
.marginBottomElementHalfx {margin-bottom: .5em;}
.marginBottomElement2x {margin-bottom: 2em;}
.marginBottomElement3x {margin-bottom: 3em;}
.marginTopElement {margin-top: 1em;}
.marginTopElementHalfx {margin-top: .5em;}
.marginTopElement2x {margin-top: 2em;}
.marginTopElement3x {margin-top: 3em;}

.paddingRight {padding-right: 1em;}
.paddingRightHalfx {padding-right: .5em;}
.paddingRight2x {padding-right: 2em;}
.paddingRight3x {padding-right: 3em;}
.paddingLeft {padding-left: 1em;}
.paddingLeftHalfx {padding-left: .5em;}
.paddingLeft2x {padding-left: 2em;}
.paddingLeft3x {padding-left: 3em;}

.breakAll {word-break:break-all;}
.modal-title span.label.breakAll{white-space:normal;}

/********* HRnext custom */

/********* BROWSER custom 
    Undo Chrome's ugly YELLOW AUTOFILL
*/
input:-webkit-autofill { -webkit-box-shadow:0 0 0 500px white inset !important;}

/********* BROWSER custom */


/********* NAV/HEADER BAR
*/

/* Dynamic NAVBAR brand/image
    navbar-brand height dictates the overall height of the header bar.
    However, as it moves, the padding on the .nav > li > a links needs to move with it to put the links closer to the bottom, but
        also to stretch the gray "click" area.

.navbar-brand {height: 90px;}
    <telerik:RadBinaryImage ID="fldrbiLogo" runat="server" CssClass="navbar-brand"
        Width="350" Height="90" AutoAdjustImageControlSize="true" ResizeMode="Fit" />
*/
.navbar-brand {padding-top: 0px !important; padding-bottom: 0px !important; padding-left: 5px !important; padding-right: 0px !important;}

.navbar-brand > img {
    max-height: 100%;
    height: 100%;
    max-width: 100%;
    width: auto;
    margin: 0 auto;
    /* probably not needed anymore, but doesn't hurt */
    -o-object-fit: contain;
    object-fit: contain;
}
/* When the viewport is small, take the brand smaller so the toggle button doesn't shift over brand and cause a newline.
    Adjust "70%" as necessary if weird/different brand image sizes causes issues.
*/
@media screen and (max-width: 900px) {
    .navbar-brand {max-width: 95%;}
    .navbar-header {max-width: 30%;}
}
@media screen and (max-width: 767px) {
    .navbar-brand {max-width: 95%;}
    .navbar-header {max-width: 80%;}
}

.navbar .nav > li > a {
    padding: 60px 10px 10px 10px;
    font-weight: bold;
    font-size: 1.25em;
    color: var(--hrnext-topnavlinks);
}
.navbar .nav > li > a:hover {
    color: var(--hrnext-primaryblue);
}

.userHeader {margin-top: .5em; margin-left:.5em; font-size: 1em; text-align: center;}
.userHeader:last-child {margin-right: 1.35em;}
.userHeader .panel-body {padding: 0px 5px 5px 5px;}
.userHeader .panel {margin-bottom: 0px;}
.userHeader .btn {margin-top: .5em;}
.userHeader .spaninappmessage {margin-right: 1em;}
.userHeader.appNewVersion .label {white-space: initial}
.userHeader.appNewVersion .panel-heading {padding: .2em .5em; font-weight: bold;}
.userHeader.appNewVersion a#lnkNewVersion {font-weight: bold;}

/* Site.Master/Home fancy -BASE */
.siteHeaderUpperBand {min-height: 1em; background-color: var(--hrnext-highlightgreen);}
.siteHeaderLowerBand {min-height: 3.5em; background-color: var(--hrnext-lockinlowerband);}
.siteMainMenuBarBlock {background-color: var(--hrnext-mainmenuband);} 


.hrnextChart {min-height: 25vh;}
.hrnextChart.bigPie {min-height: 35vh;}
.homeChartHeader {margin-bottom: 1em;}

.chartRow {margin-bottom: 2em;}
.chartCell {margin-bottom: 1em;}

.popover-submenusize {z-index: 1000; background-color: #b2b2b2;}
.bottom.popover.popover-submenusize .arrow, 
.bottom.popover.popover-submenusize > .arrow::after {border-bottom-color: #b2b2b2;}

@media screen and (max-width: 999px)
{
    .popover-submenusize {min-width: 800px;}

}
@media screen and (min-width: 1000px)
{
    .popover-submenusize {min-width: 1000px;}
}

@media screen and (max-width: 414px)
{
    .sampleClass {float:none;}    
}

.popover-submenusize.bottom.popover {margin-top: 0;}

.homeSubMenu ul.epUL {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;

    -webkit-column-gap: 3em;
    -moz-column-gap: 3em;
    column-gap: 3em;

    -webkit-column-width: 150px;
    -moz-column-width: 150px;
    column-width: 150px;}

.subMenuBar .tile {
        width: 100%;
        display: inline-block;
        box-sizing: border-box;
        margin-bottom: 10px;
    }

.subMenuBar.row {margin-right: 0em; margin-left: 0em; margin-bottom: 1em; margin-top: -1.1em;}

.subMenuBar .tileCol {color: #848383;
                                   /* color: #b2b2b2; */
                                   border: #dddddd thin solid;}
.subMenuBar .tileCol:hover {color: white; background-color: var(--hrnext-highlightgreen); cursor: pointer;}

.subMenuBar .tileCol.tileFirst {border-left: 0em;}
.subMenuBar .tileCol.tileLast {border-right: 0em;}

.subMenuBar .tileText {margin-top: .25em;}

/* Font ZOOM */
@media screen and (max-width: 1024px)
{
    .subMenuBar .tile h2 {font-size: 18px;}
    .subMenuBar .tile h3 {font-size: 16px;}
}

/* Site.Master/Home fancy -BASE*/


/* Execupay CSS adjustments*/

    /*In theory
        Something like the below should work...and DOES work in "modern browsers", but even something like IE11 isn't considered modern with respect
        to CSS VARS.  So, the below will NOT be recognized in IE11, but WILL for example in Chrome.  Even WITH our ponyfill plugin to get all CSS VARs to work
        in IE11 (and prior), that plugin still does not handle this case... of reassignment of the values.
    */

.isPlatformEP {
    --hrnext-primaryblue: #217cc2; 
    --hrnext-highlightgreen: #98ca59;
    --hrnext-backgroundcolor: #217cc2; 
    --hrnext-lockinlowerband: #FFFFFF;
    --hrnext-mainmenuband: #217cc2;
    --hrnext-topnavband: #FFFFFF;
    --hrnext-topnavlinks: #FFFFFF;
}

.isPlatformEP.pageLogin,
.isPlatformEP.pageOnboarding,
.isPlatformEP.pageJobPostings,
.isPlatformEP.pageJobApplication,
.isPlatformEP.pageChangePassword,
.isPlatformEP.pageTFASetup,
.isPlatformEP.pageExecuteReport
{background-color: var(--hrnext-backgroundcolor);}


.isPlatformEP .marginContent {margin-top: -.75em;}

.isPlatformEP .siteHeaderUpperBand {background-color: var(--hrnext-backgroundcolor); min-height: 0;}
.isPlatformEP .siteMainMenuBarBlock {background-color: var(--hrnext-mainmenuband);} 

/* SK- this will be NEW GLOBAL VAR for "lower band" */
.isPlatformEP .siteHeaderLowerBand {background-color: var(--hrnext-lockinlowerband);}

    /* Be VERY careful with the padding here... this 40px top corresponds to the 20px differnce than base (60px) accounting
        for 20px difference in height of brand image size
    */

/* SK- this should be PRIMARY??????? THIS IS MAIN MENU LINKS HRAdmin, My HR etc... */
.isPlatformEP .navbar .nav > li > a {color: var(--hrnext-topnavlinks); padding: 40px 10px 10px 10px;}
.isPlatformEP .navbar .nav > li > a:hover {color: var(--hrnext-highlightgreen);}

/* SK- this should be NEW TopNavBar BG global var */
.isPlatformEP #epTopNavBar {margin-right: 1em; background-color: var(--hrnext-topnavband);}

.isPlatformEP #epTopNavBar div.epNavOption {text-align: center;}
.isPlatformEP #epTopNavBar div.epNavOption a {color: var(--hrnext-primaryblue);}
.isPlatformEP #epTopNavBar div.epNavOption a:hover {color: var(--hrnext-highlightgreen);}

.isPlatformEP #epTopNavBar a {font-size: 1.25em; font-weight: bold;}

/* SK- 
    THIS IS EP top-right links...  HR PR TIME 
    ONLY the "HR" option will ever be "on" in HRnext...and that needs to match the mainmenuband
*/
.isPlatformEP #epTopNavBar div.epNavOptionHR {background-color: var(--hrnext-mainmenuband);}
.isPlatformEP #epTopNavBar div.epNavOptionHR a {color: var(--hrnext-topnavlinks);}

.isPlatformEP .subMenuBar .tileCol {color: #b2b2b2;
                                   /* color: #848383; */
                                   border: #dddddd thin solid;}
/* SK- this should be PRIMARY???????    GOOD GOOD GOOD
    For EP, this will be primary... but, the default will be HIGHLIGHT to match when there is an upper-upper band.
*/
.isPlatformEP .subMenuBar .tileCol:hover {color: white; background-color: var(--hrnext-primaryblue); cursor: pointer;}

/* Execupay CSS adjustments*/

/* BASE topbar CSS adjustments*/
.isPlatformBase.pageLogin,
.isPlatformBase.pageOnboarding,
.isPlatformBase.pageJobPostings,
.isPlatformBase.pageJobApplication,
.isPlatformBase.pageChangePassword,
.isPlatformBase.pageTFASetup,
.isPlatformBase.pageExecuteReport
{background-color: var(--hrnext-backgroundcolor);}

.isPlatformBase #epTopNavBar {margin-right: 1em; background-color: var(--hrnext-topnavband);}
.isPlatformBase #epTopNavBar div.epNavOption {text-align: center;}
.isPlatformBase #epTopNavBar div.epNavOption a {color: var(--hrnext-highlightgreen);}
.isPlatformBase #epTopNavBar div.epNavOption a:hover {color: var(--hrnext-primaryblue);}

.isPlatformBase #epTopNavBar a {font-size: 1.25em; font-weight: bold;}

.isPlatformBase #epTopNavBar div.epNavOptionHR {color: white; background-color: var(--hrnext-highlightgreen);}
.isPlatformBase #epTopNavBar div.epNavOptionHR a {color: white;}

/* BASE topbar CSS adjustments*/

/* M3RP topbar CSS adjustments*/
.isPlatformM3RP.pageLogin,
.isPlatformM3RP.pageOnboarding,
.isPlatformM3RP.pageJobPostings,
.isPlatformM3RP.pageJobApplication,
.isPlatformM3RP.pageChangePassword,
.isPlatformM3RP.pageTFASetup,
.isPlatformM3RP.pageExecuteReport
{background-color: var(--hrnext-backgroundcolor);}

.isPlatformM3RP #epTopNavBar {margin-right: 1em; background-color: var(--hrnext-topnavband);}
.isPlatformM3RP #epTopNavBar div.epNavOption {text-align: center;}
.isPlatformM3RP #epTopNavBar div.epNavOption a {color: var(--hrnext-highlightgreen);}
.isPlatformM3RP #epTopNavBar div.epNavOption a:hover {color: var(--hrnext-primaryblue);}

.isPlatformM3RP #epTopNavBar a {font-size: 1.25em; font-weight: bold;}

.isPlatformM3RP #epTopNavBar div.epNavOptionHR {color: white; background-color: var(--hrnext-highlightgreen);}
.isPlatformM3RP #epTopNavBar div.epNavOptionHR a {color: white;}

/* M3RP topbar CSS adjustments*/

/* ID topbar CSS adjustments*/
/* 
    --hrnext-backgroundcolor: #217cc2; 
    --hrnext-topnavband: #FFFFFF;
*/
.isPlatformID {
    --hrnext-primaryblue: #333e4d; 
    --hrnext-highlightgreen: #ed7921;
    --hrnext-mainmenuband: #333e4d;
    --hrnext-lockinlowerband: #ff0000;
    --hrnext-topnavlinks: #ff0000;
}

.isPlatformID.pageLogin,
.isPlatformID.pageOnboarding,
.isPlatformID.pageJobPostings,
.isPlatformID.pageJobApplication,
.isPlatformID.pageChangePassword,
.isPlatformID.pageTFASetup,
.isPlatformID.pageExecuteReport
{background-color: var(--hrnext-backgroundcolor);}

.isPlatformID #epTopNavBar {margin-right: 1em; background-color: var(--hrnext-topnavband);}
.isPlatformID #epTopNavBar div.epNavOption {text-align: center;}
.isPlatformID #epTopNavBar div.epNavOption a {color: var(--hrnext-highlightgreen);}
.isPlatformID #epTopNavBar div.epNavOption a:hover {color: var(--hrnext-primaryblue);}

.isPlatformID #epTopNavBar a {font-size: 1.25em; font-weight: bold;}

.isPlatformID #epTopNavBar div.epNavOptionHR {color: white; background-color: var(--hrnext-highlightgreen);}
.isPlatformID #epTopNavBar div.epNavOptionHR a {color: white;}

/* ID topbar CSS adjustments*/

/* Cloud CSS adjustments*/
    /* 
    .isPlatformCloud .siteHeaderLowerBand {background-color: var(--hrnext-highlightgreen);}
    .isPlatformCloud .panel-default > .panel-heading-hrnextBlue{background-color: #2051A6;}
    .isPlatformCloud .panel-default > .panel-heading-hrnextGreen{background-color: var(--hrnext-highlightgreen);}

    */

/* Cloud CSS adjustments*/


@media screen and (max-width: 1100px)
{
.navbar .nav > li > a {font-size: 1em;}
.userHeader {font-size: .75em;}
}
@media screen and (max-width: 767px)
{
.navbar .nav > li > a {font-size: 1.5em;}
.userHeader {font-size: 1.5em; margin-left:1.25em; margin-right:1.25em;}
}


/********* NAV/HEADER BAR */

/********* Telephone (international) Mask input */
.iti-flag {background-image: url("../images/telephone/flags.png");}

@media only screen and (-webkit-min-device-pixel-ratio: 2), 
    only screen and (min--moz-device-pixel-ratio: 2), 
    only screen and (-o-min-device-pixel-ratio: 2 / 1), 
    only screen and (min-device-pixel-ratio: 2), 
    only screen and (min-resolution: 192dpi), 
    only screen and (min-resolution: 2dppx)
{
.iti-flag {background-image: url("../images/telephone/flags@2x.png");}
}
.intl-tel-input{display: inherit;}
/********* Telephone (international) Mask input */

/********* Dropdown values/rows
    This is a technique used in conjuntion with PADDING of values while using fixed-width fonts.
    Problem with it is that different types/sizes of data make this extremely volotile. 
.dropdown-menu span.text,
.bootstrap-select button.btn.dropdown-toggle
{white-space: pre; font-family:'Lucida Console','Courier New';}
*/
/********* Dropdown values/rows */

/* This removes any IE "x" buttons in the INPUT fields (in this case, for class .typeahead).  We'll leave it for other things.
    But, we don't want this getting in the way of the functioning of how our typeaheads work.
*/
input.typeahead[type=text]::-ms-clear {display:none;}

/* Some custom look for our employee info bar...*/
.employeeInfo h1,
.employeeInfo h2,
.employeeInfo h3,
.employeeInfo h4,
.employeeInfo h5,
.employeeInfo h6,
.employeeInfo label
 {
    margin-bottom: 0em;
    margin-top: 0em;
}

.spaced-radio input[type="radio"] {
    margin-left: 30px;
    margin-right: 3px;
}

/* eSignature stuff...*/
.eSignatureText {display:inline-block; font-size: 2.5em; width: 100%; height: 1.85em;
                 font-family:'cedarville_cursiveregular', Arial, 'sans-serif' !important; 
                 font-weight:bold !important; padding-left: .5em; padding-bottom: 1em; padding-top: .1em; background-color:lightgrey;}


/* This is the same as the bootstrap .text-danger, but we needed something WITHOUT a dash involved for our special
    **inactive** process that tries to split out and bold text before the dash... well, injecting a class name with a dash in it messes that up,
    so we need a class name that does the SAME thing, but doesn't have a dash in the name itself.
*/
.hrnextTextDanger {
  color: #a94442;
}

.gallerythumb {margin-bottom: 1em;}

.modalHRnextHeaderHeight {line-height: 5em;}
.modalHRnextHeaderTextAlignment {display: inline-block; vertical-align: middle; font-size: 2.5em; font-weight: bold;}

/* Handle different plan types (and grey out features that are not part of current plan) */
a.menuLinkDisabled, a.menuLinkDisabled small, .dropdown-menu > li > a.menuLinkDisabled {color: #dddddd;}
a.menuLinkDisabled:focus,a.menuLinkDisabled:hover {color: #dddddd; text-decoration: none; cursor: no-drop;}

/* bank name lookup from routing numbers */
div.bankName{font-size: .9em; font-weight: bold; margin-top: .2em;}
div.bankName.badRouting{color: red;}