body {font-family: Arial, Helvetica, sans-serif;}

form {
  border: 3px solid rgb(150,0,0);
}

.cfm {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  text-align: left ; 
  border: 3px solid rgb(150,0,0);
  /*max-width: 500px;*/
}

input[type=text], input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

#FormbuttonLogin {
  background-color:rgb(150, 0, 0);
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}

#FormbuttonCancel {
    background-color:rgb(150, 0, 0);
    color: white;
    padding: 10px 18px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: auto;
  }

  #FormbuttonRegister {
    background-color:rgb(150, 0, 0);
    float: right;
    color: white;
    padding: 10px 18px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: auto;
    ;
  }  

button:hover {
  opacity: 0.8;
}

.cancelbtn {
  width: auto;
  padding: 10px 18px;
  background-color: rgb(150, 0, 0);
}

.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
}

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

.container {
  padding: 16px 16px 16px 16px; /* top right bottom left*/
}

.containerTable {
  padding: 0px 0px 0px 0px;
  width: 100%;
  margin: 0px;  
}

.containerTable:after {
  content: "";
  display: table;
  clear: both;
}

.column3 {
  float: left;
  width: 33.33%;  
  padding: 0px;
}
.column2 {
  float: left;
  width: 50%;  
  padding: 0px;
}
.column1 {
  float: left;  
  width: 100%;  
  padding: 0px;
}

div.form
{
    display: block;
    text-align: center;
}
form
{
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    text-align: left;    
}
/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
  span.psw {
     display: block;
     float: none;
  }

}