body {font-family: Arial, Helvetica, sans-serif;}
.con-forms {
width:auto;
border-radius: 10px; 
background-color:transparent;
margin-top: 70px;


}
@media screen and (min-width:500px) {
 .con-forms {
  margin:30px; 
  max-width:400px;
  border: 1px solid #ccc;

}
}

.imgcontainer {
  text-align: center;
  margin: 20px 0 10px 0;

}

img.avatar {
  width:20%;
  border-radius: 50%;
}

.container {
  padding: 16px;
}

span.psw {
  float: right;
  padding-top: 16px;
}
.holder-left{
float: left;
color:#000;
font-family: arial narrow;
font-size:14px;
}
.holder-right{
float: right;
color:#000;
font-family: arial narrow;
font-size:14px
}

.input-field {
  width: 100%;
  padding: 10px;
  outline: none;
  border-top-right-radius:5px;
}

.form{
margin:0px;
padding:10px;
border-radius:5px;
}
.input-container {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  width: 100%;
  margin-bottom: 15px;border-radius: 5px;


}
.btn{
border-radius:5px;
background-color: #000;

}
input[type=text],input[type=number],input[type=email], input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border:none;
  outline:none; 
  border-color:none;
  background-color:transparent!important;
  border-bottom:1px solid #000 !important;
  -webkit-box-shadow:none ;
}



input[type=text],input[type=number],input[type=email], input[type=password]:focus{
  outline:none !important; 
  border:none !important;
  outline:none !important; 
  border-color:none !important;
  background-color:transparent!important;
  border-bottom:1px solid #000 !important;
  -webkit-box-shadow:none !important ;
}

input[type=checkbox] {
  border-radius: 100px;
  width:40px;
  padding:30px 40px;
  border: 1px solid #ccc;
}
button {
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}

button:hover {
  opacity: 0.8;
}

.imgcontainer {
  text-align: center;
  margin: 20px 0 10px 0;
}

img.avatar {
  width:20%;
  border-radius: 50%;
}

.container {
  padding: 16px;
}

span.psw {
  float: right;
  padding-top: 16px;
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
  span.psw {
     display: block;
     float: none;
  }
  .cancelbtn {
     width: 100%;
  }
}
.alert
{
  font-family:italic;
  text-align:left;
  border-top-left-radius:4px;
  border-top-right-radius:4px; 
  padding:10px !important;
  
}
.red{
background-color:#f44336;
color:#fff;
}
.green{
background-color:#468847;
color:#fff;
}
.blue{
background-color:#006dcc;
color:#fff;
}
.success{
background-color:#fff;
color:green;

}