*{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*/

.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*/

.cleaarfix::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%;

}

}