/*
 * Base structure
 */

body {
  padding-top: 55px;
  padding-bottom: 55px;
  margin-left:  5px;
  margin-right:  5px;
  font-size: 0.85rem;
  color: #000000;
  font-weight: 500;
}

html, body {
}

/*
 * Typography
 */

/*  Bootstrap overrides */

.row {
  margin-bottom:  0.5rem;
}

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

.nav-tabs .nav-link, .nav-tabs .nav-link.disabled, .nav-tabs .nav-link.disabled:focus, .nav-tabs .nav-link.disabled:hover {
    background-color: #eee;
    border-color: rgba(0,0,0,.1);
}

.card-img-bottom {
    max-height: 200px;
    max-width: 100%;
    width: auto;
    height: auto;
}

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

/*  App */
#content-wrapper {
  margin-bottom:  20px;
}

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

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

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

.control-label {
  font-weight: bold;
}

.wysiwyg {
  margin-bottom: 0.5rem !important;
}

.html-display {
  border: 1px solid #ced4da; 
  padding: 0.5em; 
  border-radius: 0.25rem;
  background-color: #f8f5f0;
  margin-bottom: 0.50rem;
}

.div-image-preview {
  margin-top: 10px;
}

.image-preview {
  max-height: 250px;
  width: auto;
}
/*   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;
}