* {box-sizing: border-box}

/* Full-width input fields */

  input[type=text], input[type=password] {
  width: 250px;
  padding: 15px;
  margin: 5px 0 22px 0;
  display: inline-block;
  border: 1px solid gray;
/*   background: #f1f1f1; */
}

input[type=text]:focus, input[type=password]:focus {
/*   background-color: #ddd; */
/*   outline: none; */
}


input[name="address"],input[name="zip"],input[name="country"]{
  display: none;
}


hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 25px;
}

//Set a style for all buttons//
button {
  background-color: #04AA6D;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}

button:hover {
  opacity:1;
}

/* Extra styles for the cancel button */
.cancelbtn {
  padding: 14px 20px;
  background-color: #f44336;
}

/* Float cancel and signup buttons and add an equal width */
.cancelbtn, .signupbtn {
  float: left;
  width: 50%;
}

/* Add padding to container elements */
.container {
  padding: 16px;
}

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

/* Change styles for cancel button and signup button on extra small screens */
@media screen and (max-width: 300px) {
  .cancelbtn, .signupbtn {
	width: 100%;
  }
}


.font-30 {
  font-size: 30px;
}	
.indie-font{
  font-family: 'Indie Flower', cursive;
}
.font-20{
  font-size:20px;	
}

.grbtn {
/* add this class to any element to make them look like a gradient type button */
   border: 1px solid #C0C0C0;
   padding: 7px;
   text-decoration: none;
   color:#333;
   /*background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc));*/
   -webkit-appearance: none;
   -webkit-box-shadow:3px 3px 3px #CACACA; -moz-box-shadow:3px 3px 3px #CACACA; box-shadow:3px 3px 3px #CACACA;
   -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
   cursor:pointer;
   text-shadow: 1px 1px 0px #fff;
   margin-left:3px;
   
background: rgb(226,226,226); /* Old browsers */

background: -moz-linear-gradient(top,  rgba(226,226,226,1) 0%, rgba(255,255,255,1) 48%, rgba(255,255,255,1) 57%, rgba(226,226,226,1) 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(226,226,226,1)), color-stop(48%,rgba(255,255,255,1)), color-stop(57%,rgba(255,255,255,1)), color-stop(100%,rgba(226,226,226,1))); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top,  rgba(226,226,226,1) 0%,rgba(255,255,255,1) 48%,rgba(255,255,255,1) 57%,rgba(226,226,226,1) 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top,  rgba(226,226,226,1) 0%,rgba(255,255,255,1) 48%,rgba(255,255,255,1) 57%,rgba(226,226,226,1) 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top,  rgba(226,226,226,1) 0%,rgba(255,255,255,1) 48%,rgba(255,255,255,1) 57%,rgba(226,226,226,1) 100%); /* IE10+ */

background: linear-gradient(top,  rgba(226,226,226,1) 0%,rgba(255,255,255,1) 48%,rgba(255,255,255,1) 57%,rgba(226,226,226,1) 100%); /* W3C */


-ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#b8bac6', endColorstr='#edeef2'); /* ie8 */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b8bac6', endColorstr='#edeef2',GradientType=0); /* IE6-9 */

}
 
 
 .grbtn:hover {

background: rgb(255,255,255); /* Old browsers */

background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(219,220,226,1) 38%, rgba(204,204,204,1) 49%, rgba(221,223,227,1) 60%, rgba(255,255,255,1) 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(38%,rgba(219,220,226,1)), color-stop(49%,rgba(204,204,204,1)), color-stop(60%,rgba(221,223,227,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(219,220,226,1) 38%,rgba(204,204,204,1) 49%,rgba(221,223,227,1) 60%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(219,220,226,1) 38%,rgba(204,204,204,1) 49%,rgba(221,223,227,1) 60%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(219,220,226,1) 38%,rgba(204,204,204,1) 49%,rgba(221,223,227,1) 60%,rgba(255,255,255,1) 100%); /* IE10+ */

background: linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(219,220,226,1) 38%,rgba(204,204,204,1) 49%,rgba(221,223,227,1) 60%,rgba(255,255,255,1) 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#b8bac6',GradientType=0 ); /* IE6-9 */


 }


.grbtn:active, .grbtn:focus {
-webkit-box-shadow:2px 2px 2px #CACACA; -moz-box-shadow:2px 2px 2px #CACACA; box-shadow:2px 2px 2px #CACACA;


background: rgb(245,246,246); /* Old browsers */

background: -moz-linear-gradient(top,  rgba(245,246,246,1) 0%, rgba(219,220,226,1) 21%, rgba(184,186,198,1) 49%, rgba(221,223,227,1) 80%, rgba(245,246,246,1) 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(245,246,246,1)), color-stop(21%,rgba(219,220,226,1)), color-stop(49%,rgba(184,186,198,1)), color-stop(80%,rgba(221,223,227,1)), color-stop(100%,rgba(245,246,246,1))); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top,  rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top,  rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top,  rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* IE10+ */

background: linear-gradient(top,  rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b8bac6', endColorstr='#f5f6f6',GradientType=0 ); /* IE6-9 */


}
/* top navigation bar styling: */
.topnav {
  background-color: #333;
  overflow: hidden;
  top:0;
  left:0;
  right:0;
  width:100%;
  position: fixed;
}


.topnav a {
  float: left;
  color: #f2f2f2;
  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: #04AA6D;
  color: white;
}

/* ADD ASSIGNMENT CSS */
.sagebckgrnd {
  background-color:rgb(71, 181, 118);
  border-radius: 25px;
  padding: 20px;
  width: 15px;
  height: 25px;
}

/* SOME LOGIN TABLE CSS */
.redbckgrnd {
  background-color:rgb(212, 110, 110  );
  border-radius: 7px;
  padding: 20px;
  width: 2px;
  height: 2px;
}


.addTask{
  width: 800px;
  border: 1px solid black;
  margin: 0 auto;
  padding: 15px;
  position:fixed;
  background-color:white;
  
}	

/* TASK TABLE CSS */

#tasktable {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#tasktable td, #tasktable {
/*   border: 1px solid #ddd; */
  border: 1px solid #ccc;
  padding: 8px;
}

#tasktable tr:nth-child(even){background-color: #f2f2f2;}

#tasktable tr:hover {background-color: #ddd;}

#tasktable th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: rgb(71, 181, 118);
  color: white;
}