:root {
  --hue: 220;
  --sat: 100;
  --light: 81;
}

.wellcolor {
  background: hsl(var(--hue), calc(var(--sat) * 1%), calc(var(--light) * 1%));
}
/* Remove the navbar's default margin-bottom and rounded borders */ 
.navbar {

  background-color: #004080;
 
  border-color: #425766;
 /* position: fixed; *//* Set the navbar to fixed position */
  top: 0; /* Position the navbar at the top of the page */

 
}

.center {
	position: relative;        
	display: inline-block;      
	left: 50%;                   
	transform: translate(-50%); 
display: inline-block;							
}

.form-signin {
  width: 100%;
  max-width: 600px;
  padding: 5px;
  margin: 0 auto;
  
  border: 1px solid Olive;
}
					


.footer {
  background-color: #004080;
 
  border-color: #425766;
  color: white;
  padding: 15px;
 
}
body {
	/*padding-top: 80px;*/
	padding-bottom: 70px;
	/*background-image:url('../img/back/tile6.jpg');*/
  }
  
  
 .wrapper {
height: 50vh !important;
}

  .navbar-report{
	padding-top: 100px;
	padding-bottom: 20px;
	padding-left: 20px;
	padding-right: 20px;
  }
.panel-body{
		
	 height: 200%;
	 width: 100%;
	padding-top: 100px;
}
/* border: 1px solid Olive;*/
.container {
	height: 100%;
	
	justify-content: center;
	align-items: center;
}
.footer a {
	 
	  color: green;
	}
.footer a:hover {
 
  color: red;
}


.navbar .navbar-brand {
 
  color: #ffbfbf;
 
}
 
.navbar .navbar-brand:hover, .navbar .navbar-brand:focus {
 
  color: #ffbfbf;
 
}
 
.navbar .navbar-text {
 
  color: #d7e2e9;
 
}
 
.navbar .navbar-nav > li > a {
 
  color: #fff;
 
}
 
.navbar .navbar-nav > li > a:hover, .navbar .navbar-nav > li > a:focus {
 
  color: #fff;
 
  background-color:#B05800;
 
}
 
.navbar .navbar-nav > li > .dropdown-menu {
 
  background-color: #2894FF;
 
}
 
.navbar .navbar-nav > li > .dropdown-menu > li > a {
 
  color: #d7e2e9;
 
}
 
.navbar .navbar-nav > li > .dropdown-menu > li > a:hover,
 
.navbar .navbar-nav > li > .dropdown-menu > li > a:focus {
 
  color: #fff;
 
  background-color: #004182;
 
}
 
.navbar .navbar-nav > li > .dropdown-menu > li > .divider {
 
  background-color: #69899f;
 
}
 
.navbar .navbar-nav > .active > a, .navbar .navbar-nav > .active > a:hover, .navbar .navbar-nav > .active > a:focus {
 
  color: #e5dbdb;
 
  background-color: #B05800;
 
}

.navbar .navbar-nav > .active > a:hover{
 
  color: #e5dbdb;
 
  background-color: #c4be66;
 
}
.navbar .navbar-nav > .open > a, .navbar .navbar-nav > .open > a:hover, .navbar .navbar-nav > .open > a:focus {
 
  color: #e5dbdb;
 
  background-color: #425766;
 
}
 
.navbar .navbar-toggle {
 
  border-color: #425766;
 
}
 
.navbar .navbar-toggle:hover, .navbar .navbar-toggle:focus {
 
  background-color: #425766;
 
}
 
.navbar .navbar-toggle .icon-bar {
 
  background-color: #d7e2e9;
 
}
 
.navbar .navbar-collapse,
 
.navbar .navbar-form {
 
  border-color: #d7e2e9;
 
}
 
.navbar .navbar-link {
 
  color: #d7e2e9;
 
}
 
.navbar .navbar-link:hover {
 
  color: #e5dbdb;
 
}
img{
	max-width: 100%;
	max-height: 100%;
	display: block; /* remove extra space below image */
}

.topnav {
  overflow: hidden;
  background-color: #e9e9e9;
}

.topnav a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #2196F3;
  color: white;
}

.topnav input[type=text] {
  float: right;
  padding: 6px;
  margin-top: 8px;
  margin-right: 16px;
  border: none;
  font-size: 17px;
}

/******************* side bar ***********************************************/
.sidenav {
  background-color: #f1f1f1;
  height: 100%;
}



/****************** well *******************************************************/

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}	  

/* Hide default HTML checkbox */
.switch input {display:none;}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-x: auto;
	overflow: scroll;
   
    border: 1px solid #DDD;
}
table {
  text-align: left;
  position: relative;
   
}
th, td {
  padding: 0.5;
}

th {
  background: white;
  position: sticky;top: 0;z-index: 10;
  top: 0; /* Don't forget this, required for the stickiness */
  box-shadow: 2px -2px 2px 2px rgba(0, 0, 0, 0.4);
}

@media (min-width:320px)  { 
 .sidenav {
        height: auto;
        padding: 15px;
		margin-bottom: 15px;
      }
 }
@media (min-width:480px)  { 
 .sidenav {
        height: auto;
        padding: 15px;
		margin-bottom: 15px;
      }
 }
@media (min-width:600px)  { 
 .sidenav {
        height: auto;
        padding: 15px;
		margin-bottom: 15px;
      }
 }

/************************************************** Badge Checkbox *************************************************************/
.badgebox
{
    opacity: 0;
	margin:5px;
}

.badgebox + .badge
{
    /* Move the check mark away when unchecked */
    text-indent: -999999px;
    /* Makes the badge's width stay the same checked and unchecked */
	width: 27px;
}

.badgebox:focus + .badge
{
    /* Set something to make the badge looks focused */
    /* This really depends on the application, in my case it was: */
    
    /* Adding a light border */
    box-shadow: inset 0px 0px 5px;
    /* Taking the difference out of the padding */
}

.badgebox:checked + .badge
{
    /* Move the check mark back when checked */
	text-indent: 0;
}

/************************************************** Circle Progress **********************************************************/
.element {
	position:absolute;
	top: 50%;
	left: 50%;
	width:50px;
	height:50px;
	
  margin: 0 auto;
  background-color: red;
  animation-name: stretch;
  animation-duration: 1.5s; 
  animation-timing-function: ease-out; 
  animation-delay: 0;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running;
}

@keyframes stretch {
  0% {
    transform: scale(.3);
    background-color: red;
	border-radius: 100%;
  }
 
  100% {
    transform: scale(1.5);
    background-color: yellow;
	border-radius: 100%;
  }
}

.loader {
	position: relative;        
	left: 48%;   
	
	border: 5px solid #f3f3f3;
	border-radius: 50%;
	border-top: 5px solid #3498db;
	width: 50px;
	height: 50px;
	-webkit-animation: spin 2s linear infinite; /* Safari */
	animation: spin 2s linear infinite;
}
/* Safari */
@-webkit-keyframes spin {
	0% { -webkit-transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}