* {
      box-sizing: border-box;
    }
    .left {
      float:left;
      width:70%;
      text-align:center;
    }
    .left2 {
      float:left;
      width:30%;
      text-align:center;
    }
    .menu a {
      background-color:#e5e5e5;
      padding:8px;
      margin-top:7px;
      display:block;
      width:100%;
      color:black;
    }
    .main {
      float:left;
      width:30%;
      padding:0 20px;
    }
    .main2 {
      float:left;
      width:70%;
      padding:0 20px;
    }
    .right {
      background-color:#e5e5e5;
      float:left;
      width:20%;
      padding:15px;
      margin-top:7px;
      text-align:center;
    }
    
    a {
        color: blue;
    }
    hr { 
        display: block;
        margin-top: 0.5em;
        margin-bottom: 0.5em;
        margin-left: auto;
        margin-right: auto;
        border-style: inset;
        border-width: 1px;
    } 
    input[type=text], select, textarea {
        width: 100%;
        padding: 4px;
        border: 1px solid #ccc;
        border-radius: 4px;
        resize: vertical;
      }
    input[type=password] {
        width: 100%;
        padding: 4px;
        border: 1px solid #ccc;
        border-radius: 4px;
        resize: vertical;
      }
    input[type=time], select, textarea {
        width: 100%;
        padding: 4px;
        border: 1px solid #ccc;
        border-radius: 4px;
        resize: vertical;
      }
    input[type=number], select {
        text-align: center;
        width: 100%;
        padding: 4px;
        border: 1px solid #ccc;
        border-radius: 4px;
        resize: vertical;
      }
    input[type=date] {
        width: 100%;
        padding: 4px;
        border: 1px solid #ccc;
        border-radius: 4px;
        resize: vertical;
      }
      input[type=datetime-local] {
        width: 100%;
        padding: 4px;
        border: 1px solid #ccc;
        border-radius: 4px;
        resize: vertical;
      }
    label {
        padding: 4px 4px 4px 0;
        display: inline-block;
      }

    input[type=submit] {
        background-color: #4CAF50;
        color: white;
        padding: 8px 8px 8px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        float: right;
      }
    input[type=submit]:hover {
        background-color: #45a049;
      } 
    input [type=file] {
        background-color: #4CAF50;
        color: white;
        padding: 8px 8px 8px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        float: right;
      } 
    input[type=file]:hover {
        background-color: #45a049;
    }
    input[type=button] {
      background-color: #4CAF50;
      color: white;
      padding: 8px 8px 8px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      float: right;
    }

    input[type=button]:hover {
        background-color: #45a049;
    }

    .container {
        border-radius: 5px;
        background-color: #f2f2f2;
        padding: 20px;
      }

    .col-25 {
        float: left;
        width: 15%;
        margin-top: 4px;
      }
    .col-252 {
        float: left;
        width: 25%;
        margin-top: 4px;
      }
    .col-17 {
        float: left;
        width: 17%;
        margin-top: 4px;
      }
    .col-30 {
        float: left;
        width: 30%;
        margin-top: 4px;
      }
    .col-50 {
        float: left;
        width: 50%;
        margin-top: 4px;
      }
    .col-33 {
        float: right;
        width: 27%;
        margin-top: 4px;
        margin-left: 4px;
        margin-right: 4px;
      }
    .col-70 {
        float: left;
        width: 70%;
        margin-top: 4px;
    }
    .col-75 {
        float: left;
        width: 85%;
        margin-top: 4px;
      }
    .col-100 {
        float: left;
        width: 100%;
        margin-top: 4px;
      }

      /* Clear floats after the columns */
      .row:after {
        content: "";
        display: table;
        clear: both;
      }
      
      @media only screen and (max-width:620px) {
      /* For mobile phones: */
      .left, .main, .right {
        width:100%;
      }
    }
      /* 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: 620px) {
        .col-25, .col-252, .col-17, .col-75, .col-30, .col-33, .col-50, .col-70, .col-100, .input[type=submit], 
        .input[type=date] {
          width: 100%;
          margin-top: 0;
        }
      }