/*!
 * Start Bootstrap - Business Casual Bootstrap Theme (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */
html {
  position: relative;
  min-height: 100%;
}

body {
    font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
    background-color: #ECF0F1;
    /* Margin bottom by footer height */
    margin-bottom: 560px;
}

.table {
    background-color: white;
}
.table>tbody+tbody {
    border-top: 0;
}

.totalRow {
    background-color: lemonchiffon !important;
}
.granDTotalRow {
    background-color: #B0DFF4 !important;
}

tfoot {
    border-top: double;
    border-top-width: 3px;
}

.trSpacer {
    padding: 0 !important;
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

h1 h2 {
    text-shadow: 0 1px 1px rgba(150, 150, 150, 0.3);
}

th h4, th h5 {
    margin-bottom: 0;
}

footer {
    background: #2C3E50;
    color: #ECF0F1;
    padding-top: 30px;
    position: absolute;
    bottom: 0;
    width: 100%;
    /* fixed height of the footer  */
    height: 550px;
}
footer a, footer a:hover {
    color: white;
}

@media (min-width: 768px) {
    body {
        margin-bottom: 270px;
    }
    footer {
        height: 250px;
    }
}

/*pmh@media (max-width: 768px) {
    label {
        margin-bottom: 0px !important;
    }
} /*pmh*/

/* Two new responsive utilies for extra extra small */
@media (max-width: 320px) {
    .hidden-xxs {
        display: none !important;
    }
    .visible-xxs {
        display: block !important;
    }
    h1, h2 {
        font-size: 20pt;
    }
}

p {
    font-size: 1.25em;
    line-height: 1.6;
    color: #000;
}

hr {
    border-color: #999;
    border-style: dotted;
}
.navbar {
    -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.43);
    -moz-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.43);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.43);
    border-radius: 0;
    min-height: 0;
    margin-bottom:0;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus {
    background-color: #E74C3C;
}

.navbar-brand {
    text-transform: uppercase;
    font-weight: 900;
    color: white !important;
    padding-top: 14px;
}

.navbar-nav {
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 1.0px;
}


.navbar-default {
    border: none;
    background: #2C3E50;
}

.nav > li > a {
    padding-top: 13px;
    padding-bottom: 17px;
    color: #ECF0F1 !important;
}

/* Trigger menu collapse earlier than default bootstrap */
@media (min-width: 768px) and (max-width: 1200px) {
    .navbar-collapse.collapse {
        display: none !important;
    }
    .navbar-collapse.collapse.in {
        display: block !important;
    }
    .navbar-header .collapse, .navbar-toggle {
        display:block !important;
    }
    .navbar-header {
        float:none;
    }
    
}
@media (max-width: 1200px) {
    .navbar-right {
        display: none !important;
    }
}

/* Styles for any sub navigation bars*/
.nav-sub-button {
    text-transform: uppercase;
    font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
    color: #ECF0F1 !important;
}
.nav-sub {
    background-color: #2980B9 !important;
}

.nav-sub-blue {
    background-color: #2980B9 !important;
}

.nav-sub li a {
    padding-top: 10px;
    padding-bottom: 6px;
}

.tagline-divider {
    margin: 15px auto 3px;
    max-width: 250px;
    border-color: #999999;
}

.page-header {
    margin: 0;
    color: #2C3E50;
    border-bottom: 0;
}

.box {
    background: #fff;
    margin-top: 20px;
    padding: 15px;
    -webkit-box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.43);
    -moz-box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.43);
    box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.43);
    background-color: white;
}

/*!
 * Marco's Definitions
 */
.contactsCenter {
    text-align: center;
}

.links {
    text-align: center;
    font-family: Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;
    line-height: 1.6em;
    font-size: 1.2em;
}

.addressSideBySide {
    display: inline-block;
    vertical-align: top;
    padding-left: 10px;
    padding-right: 10px;
}

.mainContentPane {
    background-color: transparent;
    border: none;
}

.addressFont {
    font-family: Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;
    line-height: 1.6em;
    font-size: 1.2em;
}

/* Grid styles */

.customKendoGrid {
    border: none;
    background-color: transparent;
    font-family: Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;
    font-size: 1.25em;
    line-height: 1.6;
    color: #000;
}

.customKendoGridSubText {
    font-size: 0.85em;
}

.customKendoGridFeatured {
    font-weight: 600;
    color: midnightblue;
}

.customKendoGridGangbook {
    max-width: 400px;
    margin: 0 auto;
}


@media screen and (min-width:400px) {
    .gangTableHeaderFont {
        font-size: 1.0em;
    }
}

/*  Bootstrap Collapse Accordion styles for caret - make sure panel-heading also has class collapsed if it defaults to closed */
.panel-heading .accordion-toggle:before {
    font-family: FontAwesome;
    font-size: small;
    content: "\f078";   /* symbol for "opening" panels: fa-chevron-right */
    width: 16px;
    margin-top: 2px;
    float: left;
    margin-right: 5px; 
}
.panel-heading.collapsed .accordion-toggle:before {
    content:"\f054";    /* symbol for "collapsed" panels: fa-chevron-down */ 
    margin-top: 1px;
    margin-right: 5px; 
}
/*end accordion-toggle*/

.jumbotron {
    background: url('../img/bg.jpg') no-repeat center bottom;
    background-size:cover;
    border-radius: 0 !important;
    min-height: 285px;
    margin: 0;
    text-transform: uppercase;
    font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
    letter-spacing: 1.25px;
    color: white;
    text-shadow: 2px 2px #2C3E50;
}

.tagline-emphasis {
    text-transform: uppercase;
    font-size: 20px;
}

@media screen and (min-width:1200px) {
    .box:after {
        content: '';
        display: table;
        clear: both;
    }
}
tr.spaceUnder > td {
    padding-bottom: 0.1em;
    background-color: transparent;
}

.no-gutter {
    padding: 0px 0px 0px 0px;
}

.displayinline {
    display: inline-block;
}

@media screen and (min-width:768px) {
    .table-responsive {
        display: table;
    }
}

@media screen and (min-width:320px) {
    .no-guttermedia {
        padding: 0px 0px 0px 0px;
    }
}


.spacer {
    margin-top: 20px;
}

.spacerHeader {
    margin-top: 40px;
}

.nobottommargin {
    margin-bottom: 0 !important;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
  margin: 0; 
  padding: 0;
}

.inner-body-content {
  margin: 0; 
  padding: 0;
}

/* Set width on the form input elements since they're 100% wide by default */

/* pmh temporarily removing this to test a thing
    
    input,
    select,

    ...and maybe we should add

    .input-group,

*/
textarea,
.inputSizing {
    max-width: 280px;
}

/*removes borders between rows*/
.no-alt-rows td {
    border: 0 !important;
}
/*removes alternate row highlighting from kendo grid*/
.no-alt-rows tr.k-alt {
    background: transparent;
    height: 100px;
    
}

.text-green {
    color: rgba(0, 152, 6, 1);
}

a.text-green:hover,
a.text-green:focus {
    color: rgba(0, 152, 6, 1);
}

.text-blue {
    color:rgba(77, 132, 227, 1);
}

a.text-blue:hover,
a.text-blue:focus {
    color:rgba(77, 132, 227, 1);
}

.text-darkblue {
    color: darkblue;
}

a.text-darkblue:hover,
a.text-darkblue:focus {
    color:darkblue;
}

.alignright{
    text-align: right;
}


.loginModal {
    max-width: 325px;
}

.featureFlag {
    color: #E74C3C;
}

/* required for angularjs-bootstrap-show-errors http://blog.yodersolutions.com/bootstrap-form-validation-done-right-in-angularjs/?utm_source=github&utm_medium=readme&utm_campaign=code*/
/*.form-group .help-block-error {
    display: none;
}

.form-group.has-error .help-block-error {
    display: block;
}

.form-group .help-block-asterisk {
    display: block;
}

.form-group.has-error .help-block-asterisk {
    display: none;
}*/
/* END required for angularjs-bootstrap-show-errors*/

/* PMH makes the kendo datepicker height spacing look okay when it is in an input group */
.input-group .k-picker-wrap > input {
    height: 2.294em;
}

/* PMH This not perfect, but it does set a red outline for the kendo date picker when it fails validation, and adds a red glow if the control is focussed*/
.has-error .k-picker-wrap {
    border: 1px solid #a94442 !important;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}
.has-error .k-picker-wrap.k-state-focused {
    border-color: #843534 !important;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483 !important;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483 !important;
}
/* END PMH required for kendo date picker*/

/* Make our spinner go FASTER for the illusion of speed */
.fa-pulse {
  -webkit-animation: fa-spin 0.5s infinite steps(8);
  animation: fa-spin 0.5s infinite steps(8);
}


/* The following is required for Bootstrap and Kendo UI to work peacefully together please see: http://docs.telerik.com/kendo-ui/using-kendo-with-twitter-bootstrap */

/* reset everything to the default box model */



/* set a border-box model only to elements that need it */

/* if this class is applied to a Kendo UI widget, its layout may change */
.container,
.container-fluid,
.row,
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1,
.col-xs-3, .col-sm-2, .col-md-2, .col-lg-2,
.col-xs-3, .col-sm-3, .col-md-3, .col-lg-3,
.col-xs-4, .col-sm-4, .col-md-4, .col-lg-4,
.col-xs-5, .col-sm-5, .col-md-5, .col-lg-5,
.col-xs-6, .col-sm-6, .col-md-6, .col-lg-6,
.col-xs-7, .col-sm-7, .col-md-7, .col-lg-7,
.col-xs-8, .col-sm-8, .col-md-8, .col-lg-8,
.col-xs-9, .col-sm-9, .col-md-9, .col-lg-9,
.col-xs-9, .col-sm-10, .col-md-10, .col-lg-10,
.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11,
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    -webkit-box-sizing: border-box !important;
    -moz-box-sizing: border-box !important;
    box-sizing: border-box !important;
}

.form-control.k-widget {
    padding: 0 !important;
    width: 100% !important;
}


/*End of required changes for Bootstrap and KendoUI to work together:  please see: http://docs.telerik.com/kendo-ui/using-kendo-with-twitter-bootstrap*/


/*This is required for Kendo and Bootstrap to work together, it seems most kendo controls do not outline in red when there is an error because the kendo
    styling sets the border-width to 0px.  I've added this and forced the has-errors class directly onto each control to override the affect.*/
.has-error {
    border-width: 1px !important;
}
/*end has-error fix*/

/* fix for Kendo UI numeric textbox to be able to use Form-control css class from bootstrap*/

.k-numeric-wrap::before {
    content: none;
}

/* end fix for Kendo UI numeric textbox*/



/* change the height of all the toggle switches to match the height of kendo controls*/
.switch-primary {
    height: 34px;
}

.switch-animate {
    height: 34px;
}
/*End toggle Switch changes*/

/* found this css for making cirle buttons http://bootsnipp.com/snippets/featured/circle-button 
    ...remove these if they don't need to get used in employeeApp
*/

.circle {
    width: 30px;
    height: 30px;
    text-align: center;
    padding: 6px 0;
    font-size: 12px;
    line-height: 1.428571429;
    border-radius: 15px;
    margin: 0 2px 0 2px;
}

.circle.lg {
    width: 50px;
    height: 50px;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.33;
    border-radius: 25px;
    margin: 0 2px 0 2px;
}

.circle.xl {
    width: 70px;
    height: 70px;
    padding: 10px 16px;
    font-size: 24px;
    line-height: 1.33;
    border-radius: 35px;
    margin: 0 2px 0 2px;
}

.circle.sm {
    width: 20px;
    height: 20px;
    text-align: center;
    padding: 5px 0;
    font-size: 10px;
    line-height: .85;
    border-radius: 10px;
    margin: 0 2px 0 2px;
}

/*end circle buttons*/

/*styles for the cirle class taken from the btn class*/

.circle-primary {
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
}

.circle-default {
    color: #333;
    background-color: #cca;
    border-color: gray;
}

.circle-success {
    color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c;
}

.circle-info {
    color: #fff;
    background-color: #5bc0de;
    border-color: #46b8da;
}

.circle-warning {
    color: #fff;
    background-color: #f0ad4e;
    border-color: #eea236;
}

.circle-danger {
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;
}

.circle-yellow {
    color: #333;
    background-color: yellow;
    border-color: #333;
    border-width: 1px;
    border-style: solid;
}
/* end styles for the circle class taken from the btn class*/

/* generic class for handling things like urls and email addresses that don't break naturally */
.dont-break-out {

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

}