button {
    color: blue;
}

 .logo-container {
            text-align: center;
            margin-bottom: 5px;  /* Optional: Adds some space below the logo */
        }

        .welcome-text {
            text-align: center;
            margin-bottom: 30px;  /* Optional: Adds some space below the text */
            font-size: 1em;     /* Optional: You can adjust the font size as needed */
            color: rgba(255, 255, 255, 0.849);  /* Set placeholder text color to white */
        }

        .logo-container img {
            width: 30%;  /* Makes the image a quarter of the form's width */
            max-width: 100%;        }
        /* Style the form container */
        #signup-form {
            width: 585px;           /* Define a fixed width for the form */
            padding: 20px;          /* Add some space inside the form */
            border: 2px solid #9e9e9e;/* Frame the form */
            background-color: #9e9e9e; /* Set the background color to grey */
            border-radius: 5px; 
            display: flex;          /* Use flexbox for layout */
            flex-direction: column; /* Arrange children (input fields) in a column */
            gap: 10px;              /* Add space between children */
            /* color: #eee; */
            font-family: Roboto,Helvetica Neue,sans-serif;
            margin-top:20px;
            margin-bottom:20px;
            
        }
        #signup-form input[type="text"], #signup-form input[type="email"] {
            width: 100%;       
            padding: 10px 10px;  
            box-sizing: border-box; 
            border: none;  /* Remove border */
            background: transparent;  /* Make background transparent */
            border-bottom: 1px solid #ccc;  /* Add underline */
            color: rgba(255, 255, 255, 0.849);  /* Set placeholder text color to white */
            font-size: 16px;        
            outline: none;  /* Remove outline */
        }

        #signup-form input[type="text"]:focus, #signup-form input[type="email"]:focus {
            outline: none;  /* Remove outline on focus */
        }

        #signup-form input[type="text"]::placeholder, #signup-form input[type="email"]::placeholder {
            color: rgba(255, 255, 255, 0.849);  /* Set placeholder text color to white */
            opacity: 1;  /* Full opacity */
        }

        #signup-form #signup-button {
            width: 100%;       /* Full width of the parent container */
            padding: 12px;     /* Comfortable padding */
            box-sizing: border-box; /* Include padding and border in element's total width and height */
            border: 1px solid #ccc; /* Light grey border */
            border-radius: 4px;     /* Slightly rounded corners */
            font-size: 16px;        /* Set a font size */
            font-weight: 700;
            margin-top: auto;      /* Push button to the bottom */
            background-color: #f8e437;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
            font-family: Roboto,Helvetica Neue,sans-serif;
            color: rgba(29,32,8,1);
            cursor: pointer;
        }
	#signup-form input[type="button"]:hover {
    	    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.4);
	}
        .floating-label {
            color: rgba(220, 220, 220, 0.849);
        }

        .floating-label[for]:after {
            content: " *";
            display: inline;
            color: rgba(220, 220, 220, 0.849);
        }
        .field-wrapper input:not([required]) ~ .floating-label:after {
            content: "";
        }
        body, html {
            height: 100%; 
            margin: 0;
        }

        .form-container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center; 
        }
        .row {
            display: flex;
            justify-content: start;
        }
        .column {
            flex: 50%;
            padding: 10px;
        }
        .field-wrapper {
            position: relative;
            margin-bottom: 20px;
        }
        .floating-label {
            position: absolute;
            pointer-events: none;
            left: 10px;
            top: 16px;
            transition: 0.2s ease all;
        }
        .field-wrapper input:focus ~ .floating-label,
        .field-wrapper input:not(:placeholder-shown) ~ .floating-label {
            top: -6px;
            left: 14px;
            font-size: 12px;
            opacity: 1;
        }
        .static-label {
            font-size: 16px;
            margin-bottom: 8px;
            display: block;
            color: rgba(220, 220, 220, 0.849); 
        }

        .custom-select {
            width: 100%;
            padding: 12px 16px;  /* Increase padding to make dropdown bigger */
            font-size: 16px;
            border: none;
            border: 1px solid #ccc;
            border-radius: 4px;
            color: rgba(255, 255, 255, 0.849);  /* Text color set to grey */
            background-color: #9e9e9e;  /* Darker grey background */            
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-image: url("data:image/svg+xml;utf8,<svg fill='rgba(255,255,255,0.849)' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
            background-repeat: no-repeat;
            background-position: right 0.5em top 50%;
            background-size: 1.5em auto;
            outline: none; 
        }
        .custom-select option {
            color: rgba(255, 255, 255, 0.849);  /* Text color set to black */
            background-color: #9e9e9e;  /* Darker grey background */
        }
        /* Flexbox for aligning the bottom of elements */
        .row {
            display: flex;
            align-items: flex-end;
        }

        /* Style for the dropdown and the static label */
        .custom-select, .static-label {
            margin-bottom: 0;
        }

        .login-link-container {
            text-align: center;
            margin-top: 20px;
            font-size: 13px;
            color: rgba(230, 230, 230, 0.849);  /* Make the text slightly lighter (around 230) */
            font-weight: normal;  /* Make all text in the container normal weight */
        }

        .login-link-container a {
            color: white;  /* Make the link text white */
            font-weight: 700;  /* Make the link text bold */
            text-decoration: none;  /* Remove underline */
        }

        .login-link-container a:hover {
            text-decoration: underline;  /* Add underline on hover */
        }
.captcha{
    align-self: center;
}

/* #signup-form {
    width: 100% !important;
    margin-top: 0px !important;
    margin-bottom:0px !important ;
    border-radius: 0px;
  } */

/* Message box */
.form-message {
  display: none;       /* hidden by default */
  padding: 12px;
  margin-bottom: 16px;
  border-radius: 4px;
  font-size: 14px;
  text-align: center;
}

/* Success style (green) */
.form-message.success {
  display: block;
  background-color: #e6ffed;
  color: #2f855a;
  border: 1px solid #9ae6b4;
}

/* Error style (red) */
.form-message.error {
  display: block;
  background-color: #ffe6e6;
  color: #c53030;
  border: 1px solid #feb2b2;
}

#success-text{
    display: none;
    height: inherit;
    color:white;
}

#success-text #signup-form{
    width:500px;
    height:276px;
    padding:43px;
}
@media (max-width: 768px) {
 
  .form-section {
    flex: 1;
    padding: 0px;
  }

  #signup-form{
    width: 100%;
    margin:0;
    border-radius: 0px;
    min-height: 100%;
    padding: 5px;
  }

  #success-text #signup-form{
        width: 65%;
        margin: 94px;
        border-radius: 0px;
        min-height: 200px;
        padding: 48px;
        text-align: center;
  }
  .welcome-mobile{
    display: block;
  }

}