body {
	font-family: 'Quicksand', sans-serif;
	margin: 0;
	padding: 0;
}

.content-top-spacer {
	margin-top: 25px;
}

.report-item-spacer {
  margin-bottom: 25px;
}

.welcome {
  margin-top: 50px;
}

.welcome h1 {
    font-weight: 300;
    font-size: 36px;
    margin: 15px auto;
    /* background: url(/drive/static/images/download/material-cloud-upload.png) top center no-repeat;
    background-size: 108px 108px; */
    padding-top: 75px;
    font-size: 50px;
    max-width: 60vw;
}

.dashboard-cells {
  position: relative;
  border: 2px solid #007EA7;
  border-radius: 25px;
  width: 80%;
  background-color: #F6FFFF;
  text-align: center;
}

.dashboard-numbers {
  font-size: 72px;
  color: #02102B;
}

/* <<< Overwriting Bootstrap >>> */
.btn.btn-primary, 
.btn.btn-primary:hover, 
.btn.btn-primary:focus, 
.btn.btn-primary:active {
  border: 1px solid #007EA7;
  border-radius: 25px;
  background-color: #F6FFFF;
  text-align: center;
  color: #02102B;
  outline: none;
  width: 150px;
  font-family: 'Quicksand', sans-serif;
}

.btn.btn-default, 
.btn.btn-default:hover, 
.btn.btn-default:focus, 
.btn.btn-default:active {
  border-radius: 25px;
  color: #02102B;
  outline: none;
  width: 150px;
  font-family: 'Quicksand', sans-serif;
}

.btn.btn-lg, 
.btn.btn-lg:hover, 
.btn.btn-lg:focus, 
.btn.btn-lg:active {
  width: 250px;
}

/* a, a:active, a:visited, a:focus {
  color: #02102B;
} */

a:hover {
  color: #007EA7;
  text-decoration: none;
}

a.alert-link, a.alert-link:active, a.alert-link:visited, a.alert-link:focus, a.alert-link:hover  {
  text-decoration: none;
}
/* ***************************** */
.main-btn {
  width: 250px;
}

.error {
  margin-top: 5px;
  color: #f00;
  display: none;
  text-align: center;
  font-weight: bolder;
}

/* Adding the GREEN color to active users */
.fa-user-check .fa-exclamation-circle {
  color: #33A532;
}

/* Adding the RED color to disabled users */
.fa-user-slash {
  color: #ff0000;
}

.alert {
  padding: 5px;
}

/* Validation Icons (on the control's right) */
.right-inner-addon {
    position: relative;
}

 /* The sidebar menu */
.sidebar {
  height: 80%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 155px;
  left: 0;
  background-color: #fff; /* White*/
  overflow-x: hidden; /* Disable horizontal scroll */
  overflow-y: auto;
  padding-top: 0px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */
}

/* The sidebar links */
.sidebar a {
  padding: 2px 2px 2px 2px;
  text-decoration: none;
  font-size: 12px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidebar a:hover {
  color: #000;
}

/* Position and style the close button (top right corner) */
.sidebar .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

/* Position and style the close button (top right corner) */
.sidebar .filter-main-title {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 0px;
}

.sidebar ul {
  list-style-type: none;
}

.sidebar-right {
  height: 50%;
  width: 200px;
  position: fixed;
  z-index: 1;
  top: 50;
  right: 0;
  background-color: #fff; /* White*/
  overflow-x: hidden;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
  transition: margin-left .5s; /* If you want a transition effect */
  padding: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidebar {padding-top: 15px;}
  .sidebar a {font-size: 18px;}
} 

.filter-title-container {
    margin-top: 20px;
}

.filter-title {
    width: 90%;
    margin: 0 auto;
    font-weight: bold;
    color: #000;
    padding: 10px;
    border-top: 1px solid #666;
}

.filter {
    width: 90%;
    color: #333;
    margin: 0 auto;
}

div.dt-buttons {
    position: relative;
    float: right;
}

.hidden {
  display: none;
}

.priority {
  border-radius: 25px;
  color: #02102B;
  outline: none;
  width: 150px;
  font-family: 'Quicksand', sans-serif;
  background-color: transparent;
  height: 30px;
}

#footer {
    position: fixed;
    height: 50px;
    line-height: 50px;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #ecf0f1;
    color: #999;
}

#footer .copyright {
  float: left;
}

#footer .last-login {
  float: right;
}

/* UPLOAD MODAL 
.upload-area{
    width: 70%;
    height: 200px;
    border: 2px solid lightgray;
    border-radius: 3px;
    margin: 0 auto;
    margin-top: 100px;
    text-align: center;
    overflow: auto;
}

.upload-area:hover{
    cursor: pointer;
}

.upload-area h1{
    text-align: center;
    font-weight: normal;
    font-family: sans-serif;
    line-height: 50px;
    color: darkslategray;
}

#file{
    display: none;
}

/* Thumbnail 
.thumbnail{
    width: 80px;
    height: 80px;
    padding: 2px;
    border: 2px solid lightgray;
    border-radius: 3px;
    float: left;
}
*/

.drag-area  {  
    width: 100%;  
    height: 250px;  
    border: 2px dashed #ccc;  
    line-height: 250px;  
    text-align: center;  
    font-size: 24px;  
}  

.drag-over {  
    color: #000;  
    border-color: #000;  
} 

.size {
    font-size:12px;
}

.photo-outer-container {
  padding: 5px;
  border-bottom: 1px solid #02102B;
}

.photo-inner-container {
  position: relative;
}

.remove-photo-btn {
  position: absolute;                  
  bottom: 5px;                          
  right: 5px;
}