*{box-sizing:border-box}

/*full-width input fields*/

input[type=text],input[type=password]{

width:100%;

padding:15px;

margin:5px 0 22px 0;

display:inline-block;

border:none;

background:#f1f1f1;

}

input[type=text]:focus,input[type=password]:focus{

background-color: #ddd;

outline: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:50%;
  opacity:0.9;
}

button:hover{

opacity:1;

}

/*Extra style for the cancel button*/
 .cacncelbtn{
 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%;

}

}