/*
.blue       {background: #007bff; color: white;}
.indigo     {background: #6610f2; color: white;}
.purple     {background: #6f42c1; color: white;}
.pink       {background: #e83e8c; color: white;}
.red        {background: #dc3545; color: white;}
.orange     {background: #fd7e14; color: white;}
.yellow     {background: #ffc107; color: white;}
.green      {background: #28a745; color: white;}
.darkgreen  {background: #006400; color: white;}
.teal       {background: #20c997; color: white;}
.cyan       {background: #17a2b8; color: white;}
.white      {background: #ffffff; color: black;}
.black      {background: #000000; color: white;}
.grey       {background: grey; color: white;}
.gray       {background: #6c757d; color: white;}
.gray-dark  {background: #343a40; color: white;}
.light      {background: #f8f9fa; color: gray;}
*/

.button {
  color: 000;
  
  --bg-color: silver;
  --gradient-color: gray;
  --border-color: #4e6096;
  --box-shadow: #000;
  --text-shadow: #fff;
}
.blue {
  color: fff;
  
  --bg-color: #7892c2;
  --border-color: #4e6096;
  --gradient-color: #476e9e;
  --box-shadow: #9fb4f2;
  --text-shadow: #283966;
}
.indigo     {
  color: white;
  
  --bg-color: #6610f2;
  --border-color: #4e6096;
  --gradient-color: #476e9e;
  --box-shadow: #9fb4f2;
  --text-shadow: #283966;
}

.red {
  color: fff;
  
  --bg-color: #f24437;
  --border-color: #d02718;
  --gradient-color: #c62d1f;
  --box-shadow: #8a2a21;
  --text-shadow: #283966;
}
.grey {
  color: 000;
  
  --bg-color: #ededed;
  --border-color: #d6bcd6;
  --gradient-color: #bab1ba;
  --box-shadow: #899599;
  --text-shadow: #e1e2ed;
}
.green {
  color: #ffffff;
  
  --bg-color: #00cc00;
  --border-color: #3b6e22;
  --gradient-color: #00b300;
  --box-shadow: #9acc85;
  --text-shadow: #ffffff;
}
.darkgreen {
  color: 000;
  
  --bg-color: #006400;
  --border-color: #3b6e22;
  --gradient-color: #00b300;
  --box-shadow: #9acc85;
  --text-shadow: #ffffff;
}
.button {
	-moz-box-shadow:inset 0px 0px 0px 2px var(--box-shadow);
	-webkit-box-shadow:inset 0px 0px 0px 2px var(--box-shadow);
	box-shadow:inset 0px 0px 0px 2px var(--box-shadow);
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, var(--bg-color)), color-stop(1, var(--gradient-color)));
	background:-moz-linear-gradient(top, var(--bg-color) 5%, var(--gradient-color) 100%);
	background:-webkit-linear-gradient(top, var(--bg-color) 5%, var(--gradient-color) 100%);
	background:-o-linear-gradient(top, var(--bg-color) 5%, var(--gradient-color) 100%);
	background:-ms-linear-gradient(top, var(--bg-color) 5%, var(--gradient-color) 100%);
	background:linear-gradient(to bottom, var(--bg-color) 5%, var(--gradient-color) 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='var(--bg-color)', endColorstr='var(--gradient-color)',GradientType=0);
	background-color:var(--bg-color);
	-moz-border-radius:12px;
	-webkit-border-radius:12px;
	border-radius:12px;
	border:1px solid var(--border-color);
	display:inline-block;
	cursor:pointer;
	font-family:Arial;
	font-size:16px;
	padding:4px 25px;
	text-decoration:none;
	text-shadow:0px 1px 0px var(--text-shadow);
}
.button:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, var(--gradient-color)), color-stop(1, var(--bg-color)));
	background:-moz-linear-gradient(top, var(--gradient-color) 5%, var(--bg-color) 100%);
	background:-webkit-linear-gradient(top, var(--gradient-color) 5%, var(--bg-color) 100%);
	background:-o-linear-gradient(top, var(--gradient-color) 5%, var(--bg-color) 100%);
	background:-ms-linear-gradient(top, var(--gradient-color) 5%, var(--bg-color) 100%);
	background:linear-gradient(to bottom, var(--gradient-color) 5%, var(--bg-color) 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='var(--gradient-color)', endColorstr='var(--bg-color)',GradientType=0);
	background-color:var(--gradient-color);
}
.button:active {
	position:relative;
	top:1px;
}
.gutter {
  float: left;
  text-align: center;
  width: 10%;
}
.gutter3 {
  float: left;
  text-align: center;
  width: 14%;
}
.column1 {
  float: left;
  text-align: center;
  width: 8%;
}
.column2 {
  float: left;
  text-align: center;
  width: 16%;
}
.column3 {
  float: left;
  text-align: center;
  width: 24%;
}
.column4 {
  float: left;
  text-align: center;
  width: 32%;
}
.column5 {
  float: left;
  text-align: center;
  width: 40%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
#main-bg {
   border-width:0px; 
   background-repeat: no-repeat;
   background-position: center;
   min-height:400px;
   width: 100%;
   height: auto;
   margin: 0;
   padding: 0;
   top: 0;
   z-index: -1;
}

#main {
width:960px;
margin:50px auto;
font-family:raleway
}
span {
color:red
}
h2 {
background-color:#FEFFED;
text-align:center;
border-radius:10px 10px 0 0;
margin:-10px -40px;
padding:15px
}
hr {
border:0;
border-bottom:1px solid #ccc;
margin:10px -40px;
}
#login {
width:300px;
float:left;
border-radius:10px;
font-family:raleway;
border:2px solid #ccc;
padding:10px 40px 25px;
margin-top:70px
}
input[type=text],input[type=password] {
width:99.5%;
padding:10px;
margin-top:8px;
border:1px solid #ccc;
padding-left:5px;
font-size:16px;
font-family:raleway
}
input[type=submit] {
width:100%;
background-color:#FF0000;
color:#fff;
border:2px solid #000000;
padding:10px;
font-size:20px;
cursor:pointer;
border-radius:5px;
margin-bottom:15px
}
#profile {
padding:50px;
border:1px dashed grey;
font-size:20px;
background-color:#DCE6F7
}
#logout {
float:right;
padding:5px;
border:dashed 1px gray
}
a {
text-decoration:none;
color:#6495ed
}
i {
color:#6495ed
}
/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  width: 100%;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  background-color: black;
  color: #fff;
  text-align: left;
  padding: 5px 5px;
  border-radius: 6px;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
  top: 5px;
  top: 100%; left: 50%; margin-left: -25%;

/* Right Tooltip 
  top: -5px; left: 105%;
*/
/* Left Tooltip 
  top: -5px; right: 105%;
*/
/* Top Tooltip
  width: 100%; bottom: 100%; left: 50%; margin-left: -50%;
*/
/* Bottom Tooltip
  width: 100%; top: 100%; left: 50%; margin-left: -50%;
*/
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}