body {
    margin: 0;
    padding: 0;
  background-color:#023047;
    background-size: cover;


}



.logo {
  margin-right: 20px;
  /*! font-size: 20px; */
  font-weight: bold;
  display: flx;
  /*adding: 14px 16px;*/
  /*! padding: 14px 16px; */
  margin-left: 10px;
}



ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #a4d6ea;
  /*background-color: #333;*/
  font-family: 'Roboto Flex', sans-serif;
/*  display: block;*/
}

li {
  float: left;
  text-align: center;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  /*! font-size: 20px; */
}




.footer {
   font-family: 'Roboto Flex', sans-serif;
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color:#264653;
   /*background-color:#333; */
  /* background-color: orange; */
   color: white;
   text-align: center;
  
}



/*p{
  font-family: 'Bebas Neue', cursive;
}*/

a {
  text-decoration: none;
  color:black;
  font-weight:bold;
}

.pastm {
 /* background-color: lightgrey;*/
  margin: auto;
  width: 50%;
  height: 50%;
}


.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 60%;
  border: none;
 /* text-align: left;
  outline: none;
  font-size: 15px;*/
  display: block;
margin-left: auto;
margin-right: auto;
}

.active, .collapsible:hover {
  background-color: #555;
}

.box {
  text-align: center;
  background-color: orange;
  width: 300px;
  margin: auto;
  font-family: 'Roboto Flex', sans-serif;
  padding:30px;
}

input[type="checkbox"] {
  min-width: 20px;
} 

.menu {
  text-align: center;
  margin: auto;
  margin: auto;
background-color: #2696be;
width: 339px;
/*height: 288px;*/
padding-top: 10px;
margin-top: 50px;
padding: 10px;
font-family: 'Roboto Flex', sans-serif;
font-weight: bold;
border-radius:6px;
}


.menuqur {
  text-align: center;
  margin: auto;
  margin: auto;
background-color:#63b6cc;
width: 339px;
/*height: 288px;*/
padding-top: 10px;
margin-top: 100px;
padding: 10px;
font-family: 'Roboto Flex', sans-serif;
font-weight: bold;
border-radius:6px;
}


.link {
  background-color: #ffb603;
  border-radius: 10px;
  height: 30px;
  padding:10px;
}
.info{
    font-family: 'Roboto Flex', sans-serif;
    background-color: orange;
margin: auto;
  margin-top: auto;
text-align: center;
margin-top: 10px;
width: 194px;

}

span {
  display: inline-block;
  width: 200px;
}


.tables {
    text-align: center;
    
}

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

table.tb1 {
  margin-left: auto; 
  margin-right: auto;
}
table.tb2 {
  margin-left: auto; 
  margin-right: auto;
}
table.tb3 {
  margin-left: auto; 
  margin-right: auto;
}

table tr:first-child {
  background-color: red;
}


table{
    margin:auto;
}


table td {
    padding:7px 15px;
    color:white;
    
}


.tentguidebox{
    margin: auto;
text-align: center;
width: 400px;
/*height: 390px;*/
/*background-color: orange;*/
background-color:#dfd3bc;
font-family: 'Roboto Flex', sans-serif;
padding:3px;
font-size:20px;
margin-bottom: 10px;
}
.tentmenuguide {
    font-family: 'Roboto Flex', sans-serif;
background-color: #ffb603;
  border-radius: 10px;
  height: 30px;
  padding: 10px;
  text-align: center;
  width: 360px;
  margin: auto;
    margin-bottom: auto;
  margin-bottom: 10px;
}

.itemreport {
    font-family: 'Roboto Flex', sans-serif;
background-color: #ffb603;
  border-radius: 10px;
  height: 30px;
  padding: 10px;
  text-align: center;
  width: 360px;
  margin: auto;
    margin-bottom: auto;
  margin-bottom: 10px;
}


#search-container {
  max-width: 400px;
  margin: 0 auto;
  
  
}

#search-input {
  width: 100%;
  padding: 8px;
  font-size: 16px;
  font-family: 'Quicksand', sans-serif;
  
  
  font-weight:bold;
}

#search-results {
  list-style: none;
  padding: 0;
  border-radius: 9px;
  margin:10px;
}

#search-results li {
  padding: 8px;
  border-bottom: 1px solid #ccc;
  font-family: 'Quicksand', sans-serif;
}

.help {
  text-align: center;
  font-family: 'Quicksand', sans-serif;
  font-weight:bold;
}
.logoimagetext{
  text-align: center;
  font-weight:bold;
  margin-top: 30px;
}

#search-input {
  background: #f9f7f4;
  text-align: center;
  border: 3px solid;
  border-radius: 10px;
}


/*pop up box on search*/

.additem{
  margin: auto;
  text-align: center;
/*  width: 390px;
  height: 100px;*/
  padding: 4px;
  font-family: 'Quicksand', sans-serif;
}

.popup {
  display: none;
  position: fixed;
  padding: 10px;
  width: 390px;
  left: 50%;
  margin-left: -150px;
  /*height: 390px;*/
  top: 50%;
  margin-top: -100px;
  background: #FFF;
  border: 3px solid #F04A49;
  z-index: 20;
}

#popup:after {
  position: fixed;
  content: "";
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0,0,0,0.5);
  z-index: -2;
}

#popup:before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #FFF;
  z-index: -1;
}
.popupk {
  display: none;
  position: fixed;
  padding: 10px;
  width: 280px;
  left: 50%;
  margin-left: -150px;
  height: 250px;
  top: 50%;
  margin-top: -100px;
  background: #FFF;
  border: 3px solid #2696be;
  z-index: 20;
}

#popupk:after {
  position: fixed;
  content: "";
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0,0,0,0.5);
  z-index: -2;
}

#popupk:before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #FFF;
  z-index: -1;
}


.filterforsearch {
  text-align: center;
}

.button {
  font-family: 'Roboto Flex', sans-serif;
  background-color: #ffb603;
  border-radius: 10px;
  height: 30px;
  padding: 10px;
  text-align: center;
  width: 360px;
  border:0px;

}

.myDiv {
font-family: 'Roboto Flex', sans-serif;
  background-color: #ffb603;
  border-radius: 10px;
  height: 30px;
  padding: 10px;
  text-align: center;
  width: 360px;
  margin: auto;
}



  
  
  
  
  #message {
    margin-top: 10px;
    padding: 10px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
  }
  
  #booked-items {
    margin-top: 20px;
    margin-top: 20px;
  background-color: #f0f0f0;
  }
  
    label {
/*    display: block;*/
    margin-bottom: 5px;
  }

  select,
  input[type="number"],
  button {
    width: calc(100% - 10px);
    margin-bottom: 10px;
    padding: 5px;
    font-size: 16px;
  }

.tentguidebox3{
  margin: auto;
  text-align: center;
  width: 400px;
  height: 390px;
  font-family: 'Roboto Flex', sans-serif;
  padding: 3px;
  font-size: 20px;
  margin-bottom: 10px;
  margin: 100px auto;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.1);
}



hr {
  border: 3px solid #6ebadb;
  border-radius: 23px;
}

.warning {
  text-align: center;
  margin:auto;
  background-color: #2696be;
  width: 339px;
  margin-top: 50px;
  padding: 10px;
  font-family: 'Roboto Flex', sans-serif;
  font-weight: bold;
  border: red solid 3px;
}