*{box-sizing:border-box}

/*Full-width input field*/
 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*/
 .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 element*/
 .conter{
  padding:16px;
}

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

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