body {
      margin: 0;
      padding: 0;
      font-family : sans-serif;
}


.header-container {
  width : 100%;
  height : 120px;
  background-color: black;
  display: block;
  box-sizing: border-box;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: calc( 50% - 37.5px);
  padding-right: calc( 50% - 37.5px);
}


.header-container img{
      position : relative;
      width: 75px;
      height: 75px;
      border-radius: 50%;
      background: rgb(251,232,36); /*yellow */
      /*left: calc(50% - 50px); */
}


.section-container {
  display: block;
  width: 100%;
  position: absolute;
  background-color: white;
}

.title-container{
  width: 320px;
  height : auto;
  padding: 10px 0 10px 0;
  margin-left: auto;
  margin-right: auto;
  display: block;
  height : 30px;
  background-color: inherit;
}

.title-container h1{
  margin : 0;
  padding-top: 4px;
  text-align : center;
  font-size: 22px;
  color : black;
}


.content-container{
      display: block;
      width: 320px;
      height: auto;
      background-color: white;
      color: #fff;
      position: relative;
      margin-left: auto;
      margin-right: auto;
      box-sizing: border-box;
      padding: 15px 15px;
      border : 2px solid darkgrey;

}

.content-container h2 {
  margin : 0;
  padding: 0;
  font-size: 16px;
  color : darkgrey;
}

.content-container input{
  width : 100%;
  margin-bottom: 20px;
}

.content-container input[type="text"], .content-container input[type="password"], .content-container input[type="tel"]{
  border : none;
  border-bottom:  1px solid darkgrey;
  background: transparent;
  outline : none;
  height: 40px;
  color: #000;
  font-size: 16px;
}

.content-container input[type="submit"]
{
  border: none;
  outline : none;
  height: 40px;
  background: rgb(251,232,36); /*yellow */
  color : black;
  font-size: 18px;
  border-radius : 20px;
}

.content-container input[type="submit"]:hover
{
  cursor : pointer;
  background: rgb(254, 232, 0); /*darker yellow*/
}

.content-container a{
  text-decoration: none;
  font-size: 12px;
  line-height: 20px;
  color: darkgrey;
}

/* Style for usermenu */
.usermenubox{
  width: 320px;
  height: 420px;
  background: rgb(77, 255, 255);
  color: #fff;
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%,-50%);
  box-sizing: border-box;
  padding : 70px 30px;
}


.menuicon{
      width:100px;
      height: 100px;
      border-radius: 50%;
      position: absolute;
      background: rgb(255, 255, 255);
      top: -50px;
      left: calc(50% - 50px)
}

.content-container h1{
  margin : 0;
  padding: 0 0 20px;
  text-align : center;
  font-size: 22px;
  color : black;
}

.content-container p{
  font-size: 18px;
  color : black;
}

.menubutton{
  border: none;
  outline : none;
  background: rgb(251,232,36); /*yellow */
  height: 40px;
  width: 100%;
  border-radius : 20px;
  color : black;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 18px;
  cursor: pointer;

}


.menubutton:hover{
  cursor : pointer;
  background: rgb(254, 232, 0); /*darker yellow*/
  color : darkgrey;
}

/* Style for register page */

#registercodebox h1{
  margin : 0;
  padding: 0 0 20px;
  text-align : center;
  font-size: 22px;
  color : black;
}

#registercodebox p{
  font-size: 18px;
  color : black;
}

#registercodebox hr{
    border: 1px solid black;
}

.qrdisplayimage{
  width: 100%;
  padding-top: 100%;
  background-color : white;
  background-position: center;
  background-repeat : no-repeat;
  background-size : cover;
  border : 1px solid darkgrey;
}

/* Style for promo list page */
#table-content-container{
  width : auto;
  margin-left: 30px;
  margin-right: 30px;
  overflow: auto;
}

.content-table {
  box-sizing: border-box;
  padding-left : 10px;
  padding-right: 10px;
  overflow: auto;
}
.content-table table{
  padding: 5px 5px;
  border-collapse: collapse;
  padding-left: 1px;
  padding-right: 1px;
}
.content-table th, .content-table td {
  border: 1px solid black;
  border-collapse: collapse;
  text-align:  center;
  color : darkgrey;
}

#refcode-td {
  width : 100px;
}

.time-td {
  width : auto;
}
.name-td {
  width : 250px;
  overflow-x: auto;
}

/* Style for Customer Register Form page */
#country {
  width : 280px;
  margin-bottom : 20px;
}