{% load static %}

body,h1 {font-family: "Raleway", sans-serif}
body, html {height: 100%; width: 100%;}

th, td, a {
   font-size: large;
   padding: 3px;
}

.thproj, .tdproj {
   font-size: small;
   padding: 3px;
   width: 50%;
   height: 50%;
}

.aproj {
   font-size: small;
   width: 65%;
   background-color: midnightblue;
}


.bgimg {
  background-image: url("/static/authenticate/img/HIT_Research_room.png");
  min-height: 100%;
  background-position: center;
  background-size: 100% 100%;
}

.loginimg {
  background-image: url("/static/authenticate/img/login2.png");
  //min-height: 100%;
  background-position: center;
  background-size: cover;
}

.iziModal {
  height: 100px;
}

.iziModal-iframe {
  margin: 50px;
  height: 200px;
}

input {
  border-radius: 5px;
  border: none;
  background-color: lightgray;
  color: black;
  width: 80%px;
}

button {
    border-radius: 25px;
    //background-color: Transparent;
    background-color: midnightblue;
    opacity: 0.9;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;
    outline:none;
    color: white;
    font-size: large;
    font-family: sans-serif;
    font-weight: bold;

}

.projbutton {
    background-color: white;
    opacity: 0.7;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;
    outline:none;
    color: midnightblue;
    font-size: small;
    font-family: sans-serif;
    font-weight: bold;
}

.analytics, .protocol, .research, .dataset, .overview, .projedit {
  cursor: pointer;
}

.dataset:hover, .protocol:hover, .overview:hover, .analytics:hover, .projedit:hover, .research:hover  {
  color: blue;
}

/*
.projbutton:hover {
    background-color: lightblue;
}
*/
.bigbutton {
    border-radius: 25px;
    //background-color: Transparent;
    background-color: midnightblue;
    opacity: 0.7;
    background-repeat:no-repeat;
    height: 100px;
    width: 350px;
    border: none;
    cursor:pointer;
    overflow: hidden;
    outline:none;
    color: white;
    font-size: xx-large;
    font-family: sans-serif;
    font-weight: bold;
}

button:hover {
    opacity: 0.5;
    color: yellow;
}

label {
   width: 10%;
   display: inline-block;
   font-weight: bold
}

.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}

.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}

.bar {
  //padding: 12px 12px 12px 0;
  padding: 20px;
  display: inline-block;
  overflow: auto;
  white-space: nowrap;
}

.bar a {
  display: inline-block;
  text-align: center;
  padding: 0 0 0 12px;
  text-decoration: none;
  color: yellow;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

.button1 {
   position: fixed;
   top: 150px;
   left: 5%;
}

.button2 {
   position: fixed;
   top: 400px;
   left: 5%;
}

.button3 {
   position: fixed;
   top: 270px;
   left: 5%;
}

.button4 {
   position: fixed;
   top: 520px;
   left: 5%;
}

#login1 {
    position: fixed;
    top: 20%;
    left: 50%;
    height: 35px;
    width: 80 px;
}

#login2 {
    height: 50px;
    width: 100px;
    font-size: large;
}


#internal {
   margin: 5px;
   height: -webkit-fill-available;
   font-family: sans-serif;
   font-weight: bold;
   overflow: auto;
}

.user {
    width: 25%;
    height: 50px;
    background-color: gainsboro;
}

#admin {
   font-size: larger;
}

#username {
    padding: 10px;
    font-size: larger;
    color: lightyellow;
}

.select-form {
    width: 212px;
    border-radius: 5px;
    height: 28px;
    background-color: cyan;
    color: black;
}


.form-group {
  //margin: 5px;
  margin-right: 10px;
}

.phase {
   font-size: small;
}


/* Make sure that padding behaves as expected */
* {box-sizing:border-box}

/* Container for skill bars */
.gantt {
  width: 100%; /* Full width */
  background-color: #ddd; /* Grey background */
}

.logout:hover {
  color: cyan;
  cursor: pointer;
}

.progress {
  width: 100%; /* Full width */
  height: 12;
  background-color: #ddd; /* Grey background */
}

.bar, .bar1, .bar2, .bar3, .bar4 {
  text-align: right; /* Right-align text */
  padding-top: 10px; /* Add top padding */
  padding-bottom: 10px; /* Add bottom padding */
  color: white; /* White text color */
}

.bar0 {width: 28%; height: 12; background-color: red; }
.bar1 {width: 20%; background-color: #2196F3;}
.bar2 {margin-left: 20%; width: 15%; background-color: #2196F3;} /* 35%-20% */
.bar3 {margin-left: 35%; width: 25%; background-color: #2196F3;} /* 60%-35% */
.bar4 {margin-left: 60%; width: 40%; background-color: #2196F3;} /* 100%-60% */

#dashboard {
  font-size: small;
}

.main {
  width: 100%;
  position: absolute;
  top: 51px;
}

.maintitle {
  color: navy;
  font-size: 70px;
  position: fixed;
  top: 25px;
  text-align: center;
  width: 100%;
  height: 50%;
  font-weight: 800;
  font-family: georgia, serif;
  text-shadow: 3px 3px 5px dimgrey;
}

.fa {
    cursor:pointer;
}