/* Show it is fixed to the top */
body 
{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  min-height: 75rem;
  padding-top: 4.5rem;
}
* {box-sizing: border-box;}



.qrform {  
  display: flex;
  /*flex-flow: row wrap;
  align-items: center;
  */
    max-width: 600px;
    flex-direction: column;
    align-items: stretch;
  
  border-radius: 5px;
  background-color: #e2e2e2;
  padding: 5px;
}

.qrform label {
  margin: 5px 10px 5px 2px;
/*  background-color: #5EADEA;*/
  
}
/*
.qrform input {
  vertical-align: middle;
  margin: 5px 10px 5px 0;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
}

*/
 /* Style inputs, select elements and textareas */
.qrform  input[type=text], .qrform select,.qrform  textarea,.qrform input[type=file] {
  width: 100%;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
  background-color: #FCF8E3;
  background-color: #FCF8E3;
}


.qrform select, .qrform option
{
    background-color: #FCF8E3;
}

/*
input[type=file] {
  background-color: #FCF8E3;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}
*/
/*.qrform select {
  vertical-align: middle;
  margin: 5px 10px 5px 0;
  padding: 10px;
  background-color: #FCF8E3;
  border: 1px solid #FAB9AA;
}
*/

.qrform button {
  padding: 10px 20px;
  background-color: dodgerblue;
  border: 1px solid #ddd;
  color: white;
  cursor: pointer;
}

.qrform button:hover {
  background-color: royalblue;
}

.pict img{
  align-content: center;
  max-width: 300px;
  margin: 5px;
}

/* Style the container */
.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 10px;
}


/* Floating column for labels: 25% width */
.col-25 {
  float: left;
  width: 25%;
  margin-top: 3px;
}

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

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

    .ok
    {
      width: 100%;
      color: #fff;
      background-color: #1ACC50;
      PADDING: 3px;
      margin: 1px;

    }
    .notok
    {
      width: 100%;
      color: #fff;
      background-color: red;
      PADDING: 3px;
      margin: 1px;
    }
.listrow a
{
  text-decoration: none;
}

.listrow a:hover
{
  background-color: green;
  color: #fff;
}

.notes {

  margin: 5px;
 /*border: 1px solid red;*/
 position: relative;
}
  
.pict1 img{
  align-content: center;
  max-width: 60px;
  margin: 2px;
}  

@media (max-width: 800px) {

.container {
  margin-top: 10px;
  padding: 10px;
}


  .col-25, .col-50, input[type=submit], input[type=file],  input[type=select] {
    width: 100%;
    margin-top: 5px;
  }

.qrform label {
  width: 100%;
  margin: 10px 0;
}

.qrform button[type=submit] {
  width: 100%;
  margin: 10px 0;
}  
  .qrform {
    max-width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

.pict img{
    align-content: center;
  max-width: 100%;
  margin: 1px;
}

.notes {
  padding: 1px;
}


}