/*
 * Base structure
 */

html, body {
	font-family: Arial;
	height: 100%;
}
	
body {
	padding-top: 7.5rem;
	font-size: 0.85rem;
	/* background-color: #00264c; */
	background: url( ../images/login.jpg ) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

/*
 * Typography
 */

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

/*
 * Sidebar
 */

.sidebar {
  position: fixed;
  top: 51px;
  bottom: 0;
  left: 0;
  z-index: 1000;
  padding: 20px;
  overflow-x: hidden;
  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
  border-right: 1px solid #eee;
}

/* Sidebar navigation */
.sidebar {
  padding-left: 0;
  padding-right: 0;
}

.sidebar .nav {
  margin-bottom: 20px;
}

.sidebar .nav-item {
  width: 100%;
}

.sidebar .nav-item + .nav-item {
  margin-left: 0;
}

.sidebar .nav-link {
  border-radius: 0;
}

/*  Bootstrap overrides */

.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {
    color: #066CA5;
}
.bg-primary {
    background-color: #3e3f3a !important;
}

.bg-secondary {
    background-color: #8e8c84 !important;
}

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

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

.nav-link {
  color: #ffffff;
}

.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {
  color: #ee4723;
}

.bg-dark .dropdown-menu {
  background-color: #f2f2f2;
};

.bg-dark .dropdown-menu .dropdown-item, .bg-dark .dropdown-menu .dropdown-item:focus {
  background-color: #f2f2f2;
}

.bg-dark .dropdown-menu .dropdown-item {
  color: #000000;
}


/*
 * Dashboard
 */

 /* Placeholders */
.placeholders {
  padding-bottom: 3rem;
}

.placeholder img {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

#content {
	padding: 10px;
}

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

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

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

/*   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;
}