/* Style inputs, select elements and textareas */
input[type=text],input[type=password],input[type=date],input[type=datetime-local],input[type=email], select, option, textarea
{
  font-family: 'Roboto Slab', serif;
  color: #666666;
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
}

/* Style the label to display next to the inputs */
label
{
  padding: 12px 12px 12px 0;
  display: inline-block;
}

/* Style the submit button */
input[type=button]
{
  background-color: #3366CC;
 /* background-color: #009933;*/
  color: white;
  padding: 12px 17px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}

/* Style the container */
.container
{
  border-radius: 10px;
  background-color: #f2f2f2;
  padding: 20px;
  margin:0 auto;
  max-width:500px;
}

.centrale
{
  display:block;
  margin:0px auto;
  text-align:center;
}

.link
{
  text-decoration:underline;
  color:#3366CC;
  cursor:pointer;
}

/* Floating column for labels: 25% width */
.col-15
{
  float: left;
  width: 15%;
  margin-top: 6px;
}
.col-20
{
  float: left;
  width: 20%;
  margin-top: 6px;
}
.col-25
{
  float: left;
  width: 25%;
  margin-top: 6px;
}
.col-45
{
  float: left;
  width: 45%;
  margin-top: 6px;
}
.col-50L
{
  float: left;
  width: 50%;
  margin-top: 6px;
}
.col-50R
{
  float: left;
  width: 50%;
  margin-top: 6px;
  text-align: right;
}
.col-55
{
  float: left;
  width: 55%;
  margin-top: 6px;
}
.col-55L
{
  float: left;
  width: 55%;
  margin-top: 6px;
}
.col-55R
{
  float: left;
  width: 55%;
  margin-top: 6px;
  text-align: right;   
}
.col-65
{
  float: left;
  width: 65%;
  margin-top: 6px;
}

.col-100R
{
  float: left;
  width: 100%;
  margin-top: 6px;
  text-align: right;
}
.col-100C
{
  float: left;
  width: 100%;
  margin-top: 6px;
  text-align: center;
}

/* Floating column for inputs: 75% width */
.col-75
{
  float: left;
  width: 75%;
  margin-top: 6px;
}

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

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px)
{
  .col-15, .col-20, .col-25, .col-45, .col-55, .col-65, .col-75, .col-50L, .col-50R, .col-100R, .col-100C, input[type=submit]
  {
    width: 100%;
    margin-top: 0;
  }
}

.dropbtn
{
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown
{
    position: relative;
    display: inline-block;
}

.dropdown-content
{
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.dropdown-content a
{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover
{
    background-color: #f1f1f1
}

.dropdown:hover .dropdown-content
{
    display: block;
}

.dropdown:hover .dropbtn
{
    background-color: #3e8e41;
}