* {
    box-sizing: border-box;
  }
  .menu {
    float: left;
    width: 20%;
  }
  .menuitem {
    padding: 8px;
    margin-top: 7px;
    border-bottom: 1px solid #f1f1f1;
  }
  .main {
    float: left;
    width: 60%;
    padding: 0 20px;
    overflow: hidden;
  }
  .detailTable {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    border-collapse: collapse;
    
  }
  .detailSumTable {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    border-collapse: collapse;
    /*border-color: white;*/
  }

  /*
  .detailSumTable tr:nth-child(2n+1){
      background-color: #40A3ED;
  }

  .detailSumTable tr:nth-child(2n+2){
      background-color: #D4EAFB;
  }*/

  .detailSumTable tr:nth-child(even){background-color: #f3f3f3;}

  .searchTable {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    border-collapse: collapse;
    background-color: #f3f3f3;
   /*border-color: #ffffff;*/
  }
  .loginTable {
    width: 30%;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    border-collapse: collapse;
    background-color: #afafaf;
    border-radius: 5px;
    font-weight: bold;

  }
  .loginTable td{
    padding: 10px 10px;
  }
  
  .profileTable {
    width: 30%;
    margin-left: 60%;
    overflow: hidden;
    text-align: right;
    border-collapse: collapse;
    border-color: #ffffff;
    background-color: #afafaf;
    border-radius: 5px;
    font-weight: bold;
  }
  .right {
    background-color: lightblue;
    float: left;
    width: 20%;
    padding: 10px 15px;
    margin-top: 7px;
  }

  .Mdiv {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5%;
  }

  .Matdiv {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1%;
  }

  .title {
    text-align: center;
    background-color: black;
    color: white;
  }


  .nheader {
    vertical-align: top;
  }

  .detail {
    text-align: left;
  }

  .searchdetail {
    text-align: left;
  }

  .image{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 20px;
  }

  .searchheader{
    width: 50%;
    text-align: right;
  }

  .ui-datepicker-trigger { 
    position:relative;
    top:5px ;
    right: -3px ; 
    height: 20px 
  }

  .submitbutt{
    width: 50%;
    text-align: right;
  }
  td{
    padding: 5px 5px;
  }


  .Menudiv {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10%;
  }

  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    /*width: 300px;*/
    background-color: #f1f1f1;
    border: 1px solid #555;
  }

  .menu-header {
    display: block;
    padding: 8px 16px;
    text-decoration: none;
    background-color: #afafaf;
    font-weight: bold;

  }

  li a, .hoffer {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
  }

  li {
    text-align: center;
    border-bottom: 1px solid #555;
  }

  li:last-child {
    border-bottom: none;
  }

  li a:hover:not(.active) {
    background-color: #555;
    color: white;
  }

  .topnav {
      /*margin: 0;*/
      font-family: Arial, Helvetica, sans-serif;
      overflow: hidden;
      background-color: #afafaf;
      margin-left: auto;
      margin-right: auto;
      width: 90%;
    }
    
    .topnav a {
      float: left;
      color: #000;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      
    }

    .topnav a.active {
      background-color: #959393;
      color: white;
    }

  .profile{
    float: right; 
    height: 48px;
    font-weight: bold;
  }

  .pagination {
    display: inline-block;
    margin-top: 1%;
  }
  
  .pagination a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
    border: 1px solid #ddd;
  }
  
  .pagination a.active {
    background-color: #555;
    color: white;
    border: 1px solid #555;
  }
  
  .pagination a:hover:not(.active) {background-color: #ddd;}

  .center {
    text-align: center;
  }
  
  @media only screen and (max-width:1000px) {
    /* For tablets: */
    .main {
      width: 80%;
      padding: 0;
    }
    .detailTable, .searchTable, .loginTable, .profileTable, .detailSumTable, .Matdiv{
      width: 100%;
      padding: 0;
    }
    .Mdiv, .Menudiv {
      width: 90%;
      padding: 0;
    }
    .right,.topnav {
      width: 100%;
    }
    .searchheader{
      width: 30%;
      text-align: right;
      font-size: small;
    }
    .searchdetail {
      text-align: left;
      font-size: small;
    }
 
  }

  @media only screen and (max-width:500px) {
    /* For mobile phones: */
    .menu, .main, .right, .searchTable, .loginTable, .topnav{
      width: 100%;
    }
    .detailSumTable, .detailTable , .Matdiv{
      width: 100%;
      font-size: small;
    }
    .profileTable{
      width: 70%;
      margin-left: auto;
      font-size: small;
    }
    .Mdiv{
      width: 90%;
    }
    .Menudiv{
      width: 90%;
      margin-left: auto;
    }
  .profile{
      font-size: small;
      height: 40px;
    }

  .vcenter {
      width: 100%;
      height : 220px;
    }

  .vtable {
    font-size: small;
  }

  }

  @media only screen and (max-height:420px) {
    .vtable {
      font-size: small;
      width: 80%;
    }
    .vcenter {
      width: 100%;
      height : 175px;
    }
  }

  .vcenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .vtable {
    padding: 20px 20px;
    background-color: #afafaf;
    border-radius: 5px;
    margin-left: auto;
    margin-right: auto;
  }