@font-face {
  font-family: 'SF Pro';
  src: url('/wp-content/themes/tappd-new/fonts/SF-Pro.ttf');
}


/* Body styles will affect the entire page */
body {
  margin: 0rem;
  font-family: 'SF Pro';
}

@media (min-width: 500px) {
  html, body {
    height: 100%;
    margin: 0;
    overflow: auto;
    display: flex;
    justify-content: center;
    align-content: center;
  }
  
  body {
    width: 400px;
    height: 900px;
    margin: 2rem 0;
    border: 6px solid black;
    border-radius: 40px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    position: relative;
    
    /* Fix: Align items inside body vertically (stacked) */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    overflow: auto; 

  }

  .container {
    border-radius: 40px;
  }
}

/* Main container */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 9.375rem 0 0 0;
  background-color: #fff;
  box-sizing: border-box;
}

@media (max-height: 900px) {
  .container {
    padding: 8rem 0 0 0;
  }
}

.container-above-form {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  padding: 3rem 0 0 0;
  background-color: #F2F2F6;
  box-sizing: border-box;
}

/* Container that holds the entire form */
.form-container{
  width: 100%;
  margin-top: 20px;
  background-color: #F2F2F6;
  border-radius: 1.875rem;
  box-sizing: border-box;
  overflow: hidden;
}

/* Inner container for padding */
.form-inner-container {
  padding: 4.625rem 0.9375rem 3.19rem 0.9375rem;
  box-sizing: border-box;
}

.form-container form{
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* Style for the input container */
.input-container {
  position: relative;
  width: 100%;
  margin-bottom:0.625rem;
}

/* Style for the input icon */
/* .input-icon {
  position: absolute;
  left: 1.25rem;
  top: 65%;
  transform: translateY(-50%);
  width: 1.08669rem;
  height: 1.045rem;
  pointer-events: none;
} */

/* Style for the password toggle */
.password-toggle {
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.25rem!important; /* Adjust the width of the icon */
  height: 1.2rem; /* Adjust the height of the icon */
  cursor: pointer; /* Change cursor to pointer to indicate it's clickable */
  z-index: 10;
}

/* Style for the input field */
.input-container input:not([type="checkbox"]) {
  width: 100%;
  padding: 0.9375rem 0.875rem 0.9375rem 0.875rem; /* Adjust padding to make room for the icon */
  border-radius: 0.9375rem;
  border: 0px solid #fff;
  box-sizing: border-box;
  color: #000;
  font-size: 16px;
  font-style: normal;
  font-weight: 510;
  line-height: normal;
  font-family: 'SF Pro';
}

.input-container input:not([type="checkbox"])::placeholder {
  color: #767676;
}

/* Optional: Add some focus styles */
/* .input-container input[type="text"]:focus {
  outline: none;
  border-color: #007BFF;
} */

.button-submit {
  width: 100%;
  height: 3.125rem;
  flex-shrink: 0;
  border-radius: 0.9375rem;
  margin-top:0.5rem;
  background: #767676;
  border: 0px solid #767676;
}

.button-submit:active {
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  transform: translateY(2px);
}

.button-submit:disabled {
  background: #EBEBE4;
  border: none;
}

.button-submit:not([disabled]):hover {
  cursor: pointer;
}

#submit {
  color: #FFF;
  font-family: 'SF Pro';
  font-size: 1.11988rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
}

.checkbox-container-one {
  padding: 0 1rem 0 1rem;
  display: flex;
  flex-direction: column;
}

.checkbox-container-two {
  display: flex;
  flex-direction: row;
  width: 100%;
  padding: 0.5rem 0 0.5rem 0;
  justify-content: left;
  align-items: center;
}

span {
  font-family: 'SF Pro';
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  color: #3F3C3C;
}

.checkbox-container-two input {
  margin-left: 0rem;
  width: 1.5rem;
}

.checkbox-container-two span {
  margin-left:0.5rem;
  flex-flow: row wrap;
}

/* Styles for the inputs in the form (possibly make these global tappd-text-input) */
/* .input-container input[type="text"]{
  width: 100%;
  height: 3.4375rem;
  flex-shrink: 0;
  border-radius: 0.9375rem;
  border: 0.304px solid #000;
  background: url("/wp-content/themes/tappd-new/images/logo.png") no-repeat 0.5rem center;
  background-size: 1rem 1rem;
  background-blend-mode: overlay, normal;
  backdrop-filter: blur(6.0781121253967285px);
} */

/* h1 configuration for the registration page */
h1 {
  color:#000;
  font-weight: 510;
  font-size: 2.25rem;
  line-height: normal;
}

h2 {
  color: rgba(0, 0, 0, 0.56);
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.center-text {
  text-align: center;
}

p {
  color: #3F3C3C;
  font-size: 0.89563rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

/* Hiding elements on the page */
#page {
  display:none;
}
#footer {
  display:none;
}
#site-header {
  display:none;
}
.elementor-location-footer{
  display: none;
}
.elementor-location-header{
  display: none;
}
#headerimg {
  display: none;
}
.login-remember{
  display: none;
}
.elementor-location-footer{
  display: none;
}
.elementor-location-header{
  display: none;
}
.EmailWarningsPattern{
  display: none;
}
.PasswordWarningsPattern{
  display: none;
}
.PasswordWarningsMatch{
  display: none;
}
.namewarning{
  display: none;
}
hr {
  display: none;
}