/*
 * Base structure
 */

/* Move down content because we have a fixed navbar that is 3.5rem tall */
body {
  padding-top: 75px;
  padding-bottom: 55px;
  margin-left:  5px;
  margin-right:  5px;
  font-size: 0.85rem;
  color: #000000;
  font-weight: 500;
}

html, body {
  height: 100%;
}

/*
 * Typography
 */

h1 {
  margin-bottom: 20px;
  padding-bottom: 9px;
  border-bottom: 1px solid #eee;
}

.text-bold {
  font-weight: bold;
}

#brand-logo {
  width:  60%;
  height: auto;
}

/*  Bootstrap overrides */

.bg-primary {
  background-color: #990000 !important;
}

.form-control {
  margin-bottom: 0.5rem;
}

.form-control:disabled, .form-control[readonly] {
  color: #000000;
}

.form-group {
  margin-bottom: 0.5rem;
}

.navbar {
  padding-top: 4px;
  padding-bottom: 4px;
}

@media only screen and (max-width : 768px) {
  .navbar-collapse {
    max-height: 760px;
    overflow-y: auto;
  }
}

.control-label {
  font-weight: 600;
  font-size: 0.85em;
}

label.required::after {
  content: " *";
  color: red;
  font-weight: bold;
}

.required-label {
  color: red;
  font-weight: bold;
}

.error, .validationError {
  color: red;
  font-weight: bold;
  font-size: .75rem;
}

.field-hint {
  color: blue;
  font-weight: bold;
  font-size: .75rem;
  text-decoration: italic;
};

/*   AJAX loading css */

/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
   
.loader {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 0, 0, 0, .2 ) 
                url( "images/spinningGear.gif" ) 
                50% 50% 
                no-repeat;
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .loader {
    display: block;
}