.pagecontainer {
            max-width: 800px; /* Set the maximum width of the content */
            margin: 0 auto; /* Center the container horizontally */
            /*background-color: #fff; /* Set background color to white inside the container */
	    /*padding: 20px; /* Add padding to the content inside the container */
        }

.title {
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 25px !important; 
  font-style: normal;
  font-weight: bold;
  text-align: left;
  /*background-color:#29D19E;*/
  color:#545454;
  padding:1% 2% 1%;
}

.footer {
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 20px;
  font-style: oblique;
  font-weight: bold;
  text-align: left;
  background-color:#29D19E;
  color:white;
  padding:0.5% 2% 0.5%;
  border-radius: 1vw;
}


.logoImg {
  width: 40px;
  height: auto;
  float: left;
}

.buttonImg {
  width: 20px;
  height: auto;
}


.deleteButton {
  position: fixed;
  bottom: 180px;
  right: 20px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: #fc6060;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 8px;
  font-weight: bold;
}

.ignoreButton {
  position: fixed;
  bottom: 100px;
  right: 20px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: #ff9800;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 8px;
  font-weight: bold;
}

.approveButton{
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: #29D19E;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 8px;
  font-weight: bold;
}


.QRImg{
  width: 40px;
  height: auto;
  float: right;
}

.bigbuttonImg{
  width: 40px;
  height: auto;
}

.frameImg {
  width: 100%;
  height: auto;
}

.ignored {
  width:40%;
  height:auto;
}


.HIWImg {
  width: auto;
  height: 70px;
  /*padding: 10%;*/
}

.eventImg {
  width: auto;
  height: 50px;
  padding: 10px;
}


.policy {
  font-size: 15px;
  font-weight: normal;
  color: white;
  font-style: normal; 
}

.policy:hover {
  color: #22A77F;
}

.signup {
  font-size: 15px;
  font-weight: normal;
  color: black;
  font-style: normal; 
}

.signup:hover {
  color: #000887;
}

.section {
  border-radius: 10px;
  background-color: #f2f2f2;
  padding: 12px;
  text-align: center;
  max-width: 600px;
  min-width: 330px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.section-hidden {
border-radius: 10px;
  background-color: #f2f2f2;
  padding: 12px;
  text-align: center;
  max-width: 600px;
  min-width: 330px;
  display: none;
  margin-left: auto;
  margin-right: auto;
}

.loginsection {
  border-radius: 10px;
  background-color: #f2f2f2;
  padding: 12px;
  text-align: center;
  max-width: 600px;
  min-width: 330px;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  line-height: 1;
}

.loginsection-hidden {
border-radius: 10px;
  background-color: #f2f2f2;
  padding: 12px;
  text-align: center;
  max-width: 600px;
  min-width: 330px;
  display: none;
  margin-left: auto;
  margin-right: auto;
}


body
{
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 20px;
  font-style: normal;
  color:#545454;
}

a
{
    color:#545454;
}
 

.loginbutton {
  font-size: 20px;
  border: solid;
  border-color: #000887;
  outline: none;
  background-color: #000887;
  color: white;
  cursor: pointer;
  padding: 10px;
  border-radius: 8px;
  font-weight: bold;
  width: 200px;
}

.email {
  width:86%; 
  text-align: center; 
  font-size: 20px; 
  border-radius: 8px; 
  border-width: 0.5px;
}


.password {
  width:86%; 
  text-align: center; 
  font-size: 20px; 
  border-radius: 8px; 
  border-width: 0.5px;
}


.signupbutton {
  font-size: 20px;
  border: solid;
  border-color: #29D19E;
  outline: none;
  background-color: white;
  color: #29D19E;
  cursor: pointer;
  padding: 10px;
  border-radius: 8px;
  font-weight: bold;
}

.addbutton {
  font-size: 30px;
  border: none;
  outline: none;
  background-color: #29D19E;
  color: white;
  cursor: pointer;
  padding: 20px 40px 20px;
  border-radius: 8px;
  font-weight: bold;
}

.presentbutton {
  font-size: 20px;
  border: none;
  outline: none;
  background-color: #29D19E;
  color: white;
  cursor: pointer;
  padding: 10px 80px 10px;
  border-radius: 8px;
  font-weight: bold;
}

.downloadbutton {
  font-size: 20px;
  border: none;
  outline: none;
  background-color: DodgerBlue;
  color: white;
  cursor: pointer;
  padding: 10px 80px 10px;
  border-radius: 8px;
  font-weight: bold;
}


.nextbutton {
  display: none; /* Hidden by default */
  position: fixed;
  bottom: 70px;
  right: 2%;
  z-index: 99;
  font-size: 20px;
  border: none;
  outline: none;
  background-color: #29D19E;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 8px;
  font-weight: bold;
}

.prevbutton {
  position: fixed;
  bottom: 70px;
  left: 2%;
  z-index: 99;
  font-size: 20px;
  border: none;
  outline: none;
  background-color: #29D19E;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 8px;
  font-weight: bold;
}


.loginbutton:hover {
  background-color: #ED51C2;
}

/* Add this CSS to style the disabled button */
.loginbutton:disabled {
    background-color: #dddddd; /* Grey background */
    color: #aaaaaa; /* Light grey text */
    cursor: not-allowed; /* Change cursor to 'not allowed' */
}

.signupbutton:hover {
  background-color: #29D19E;
  color: white;
}


/* Frames Table Styles */
#frames{
  width: 90%;
} 

#frames td:hover {background-color: #ddd;}

#frames td {
  padding: 1%;
  text-align: center;
}

/* Container holding the image and the text */
.container {
  position: relative;
  text-align: center;
  color: white;
}

  .framecontainer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px; /* Adjust the margin as needed */
  }

/* Bottom right credit text */
.bottom-right {
  position: absolute;
  bottom: 2px;
  right: 2px;
  background-color: #545454;
  opacity: 0.4;
  text-align: right;
  border-radius: 4px;
  padding-left: 2%;
  padding-right: 2%;
  font-size:16px;
}

/* Center Blocked text */
.blocked {
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
  background-color: #f44336;
  opacity: 0.7;
  text-align: center;
  /* padding: 2vw; */
  font-size: 100%; 
  color:white;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding:10%;
}

/* Center pending text */
.pending {
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
  background-color: #ff9800;
  opacity: 0.7;
  text-align: center;
  /* padding: 2vw; */
  font-size: 100%; 
  color:white;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding:10%;
}

/* Center trial text */
.trial {
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
  background-color: #9c9797;
  opacity: 0.7;
  text-align: center;
  /* padding: 2vw; */
  font-size: 100%; 
  color:white;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding:10%;
}


#footer{
  width: 100%;
} 

/* Alert Styles */
.alert {
  background-color: #f44336 !important;
  opacity: 1 !important;
  transition: opacity 0.6s !important;
}

.alert.success {background-color: #29D19E !important;}
.alert.info {background-color: #2196F3 !important;}
.alert.warning {background-color: #fc6060 !important;}
.alert.amber {background-color: #ff9800;}


.closebtn {
  margin-left: 15px !important;
  color: white !important;
  font-weight: bold !important;
  float: right !important;
  font-size: 22px !important;
  line-height: 20px !important;
  cursor: pointer !important;
  transition: 0.3s !important;
}

.closebtn:hover {
  color: black !important;
}

/* Table styles */
      .tableCenter {
           margin: auto;
           width: 99%; 
      }

#customers {
  padding: 2px;
  border-collapse: collapse;
}

#customers td, #customers th {
  font-family: sans-serif;
  font-size: 20px;
  border: 0px solid #ddd;
  padding: 2px;
  text-align: center;
}

#customers tr:nth-child(even){background-color: #ededed;}

#customers tr:hover {background-color: #ddd;}

#customers th {
  font-size: 18px;
  text-align: center;
  background-color: #29D19E;
  color: white;
}

/* pop up styles */
/* Button used to open the contact form - fixed at the bottom of the page */
.open-button {
 border:none;
}

/* The popup form - hidden by default */
.form-popup {
  display: none;
  position: relative;
  width: 99%;
  top: 30%;
  border: 3px solid #f1f1f1;
}

/* Add styles to the form container */
.form-container {
  max-width: 99%;
  max-height:100%;
  //padding: 20px;
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
}


.form-container h1 {
  margin-top: 0; /* Adjust the margin-top as needed */
}

/* Set a style for the submit/login button */
.form-container .btn {
  font-size: 18px !important;
  background-color: #29D19E;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 40%;
  margin-bottom:10px;
  opacity: 1;
}

/* Add a red background color to the cancel button */
.form-container .cancel {
  background-color: #fc6060;
}