/* Registration, change password and password recovery all use this stylesheet, and
   they all ask for 'FoXE' below. Without these declarations the font only showed up on
   machines that already have it installed (the development desktop): mobile downloaded
   nothing and fell back to the system sans-serif. login.css declares its own copy. */
@font-face {
    font-family: 'FoXE';
    src: url(/assets/fonts/FoXE-Regular.woff2) format("woff2"),
         url(/assets/fonts/FoXE-Regular.woff) format("woff"),
         url(/assets/fonts/FoXE-Regular.ttf) format("truetype");
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'FoXE';
    src: url(/assets/fonts/FoXE-Bold.woff2) format("woff2"),
         url(/assets/fonts/FoXE-Bold.woff) format("woff"),
         url(/assets/fonts/FoXE-Bold.ttf) format("truetype");
    font-weight: 700;
    font-display: swap;
}

body {
    /*display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;*/
    margin: 0;
    font-family: 'FoXE', sans-serif;
    color: #333;
    background-image: url("/assets/img/bg.jpeg");
    /*background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;*/
}

.sign-up-container {
    background: #ffffff;
    margin: 100px auto;
    border-radius: 16px;
    padding: 30px;
    width: clamp(325px, 95%, 474px);
    border: #e5e6e9 1px solid;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.19);
}


.login-signup {
	margin: 40px 0px 0px;
	text-decoration: none;
}

.login-signup a {
	text-decoration: none;
	font-weight: 700;
}

.signup-heading {
	margin: 0;
    font-size: 2em;
    font-weight: 700;
}

.row {
    padding: 20px 10px 0px 10px;
    text-align: left;
    font-weight: 700;
}

.form-label {
	margin-bottom: 5px;
	display: inline-block;
}

/* The format a field expects, under it, lighter than the label. */
.field-hint {
	margin-top: 4px;
	font-size: 0.85em;
	font-weight: normal;
	color: #555;
}

/* The question mark beside a label that has a reason worth reading: it sits on the label's
   line, carries no weight of its own, and is a link out to the explanation. */
.field-help {
	color: #777;
	font-weight: 400;
	margin-left: 4px;
	text-decoration: none;
	vertical-align: middle;
}

.field-help:hover,
.field-help:focus {
	color: #333;
}

input.input-box-330 {
	font-family: inherit;
	font-size: inherit;
	padding: 8px;
	/* Without this the padding and border are added on top of the 100%, making these
	   fields 18px wider than the submit button and the password fields (the latter get
	   border-box from the .pwd-field wrapper the password-reveal script adds). */
	box-sizing: border-box;
	border: #CCC 1px solid;
	border-radius: 16px;
	width: 100%;
}

.sign-up-container .error {
	color: #ee0000;
	padding: 0px;
	background: none;
	border: #ee0000;
}

.sign-up-container .error-field {
	border: 1px solid #d96557;
}

.sign-up-container .error:before {
	content: '*';
	padding: 0 3px;
	color: #D8000C;
}

.error-msg:empty {
	display: none;
}

/* The asterisk beside a label, and the message a script writes into it, are text: under
   phppot-style.css, `.phppot-container .error` would paint the empty span as a red box. */
.sign-up-container .required.error {
	padding: 0;
	border: 0;
	background: none;
}

.error-msg {
	padding: 7px 10px;
	background: #fff1f1;
	border: #ffd5d5 1px solid;
	color: #D8000C;
	border-radius: 4px;
	margin: 30px 10px 10px 10px;
	text-align: center;
}

.success-msg {
	padding: 7px 10px;
	background: #f1fff2;
	border: #d5ffda 1px solid;
	color: #00d61c;
	border-radius: 4px;
	margin: 30px 10px 10px 10px;
}

input.btn {
	width: 250px
}

.signup-align {
	margin: 0 auto;
}

/* The sentence under a heading saying what the form is about to do. */
.form-intro {
	margin: 12px 10px 0;
	line-height: 1.5;
	font-weight: 400;
	color: #555;
}

/* The one-time code field of view/enter-code.php: six large digits, spaced and centred. */
input.email-code-input {
	font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
	font-size: 28px;
	letter-spacing: 10px;
	text-align: center;
	padding: 10px 8px;
	box-sizing: border-box;
	border: #CCC 1px solid;
	border-radius: 16px;
	width: 100%;
}

input.email-code-input::placeholder {
	color: #d0d4da;
}

input.email-code-input:focus {
	outline: none;
	border-color: #326bfa;
	box-shadow: 0 0 0 3px rgba(50, 107, 250, 0.2);
}

.email-code-resend {
	margin: 16px 10px 0;
	color: #555;
}

/* A submit button that reads as a link, for the secondary action of a form. */
.link-button {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-weight: 700;
	color: #326bfa;
	text-decoration: underline;
	cursor: pointer;
}


  .sign-btn{
	font-family: inherit;
    font-size: inherit;
    padding: 8px;
    cursor: pointer;
    border-radius: 16px;
    width: 100%;
    border: 0px;
    transition: 0.5s;
    background-size: 200% auto;
    background-image: linear-gradient(to right, #326bfa 0%, #40f5d7 51%, #2f61ff 100%);
    margin: 0px 0px 5px 0px;
    font-weight: 700;
  }

  .sign-btn:hover{
	background-position: right center;
  }

  .sign-btn[aria-disabled="true"]{
	opacity: 0.6;
	cursor: progress;
  }

  .form-link{
	border: #232323 1px solid;
    color: #232323;
    border-radius: 15px;
    padding: 5px 20px;
  }
  @media screen and (max-width: 440px) {
	.sign-up-container {
	  width: auto;
	  padding: 20px;
	}
  
	.sign-up-container .field-column {
	  padding: 20px 10px 0px 10px;
	}

    
  }
   
    .email-input-wrapper {
    position: relative;
    width: 100%;
    }

    .email-input-wrapper .input-box-330 {
        padding-right: 42px;
    }

    .email-validation-status {
        position: absolute;
        right: 11px;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        display: none;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
    }

    .email-validation-status.is-loading {
        display: flex;
    }

    .email-validation-status.is-valid {
        display: flex;
        color: #22c55e;
    }

    .email-validation-status.is-invalid {
        display: flex;
        color: #dc2626;
    }

    .email-validation-status.is-loading::after {
        content: "";
        width: 14px;
        height: 14px;
        border: 2px solid #d1d5db;
        border-top-color: #6b7280;
        border-radius: 50%;
        animation: email-spinner 0.7s linear infinite;
    }

    @keyframes email-spinner {
        to {
            transform: rotate(360deg);
        }
    }

    .email-validation-message {
        display: none;
        margin-top: 8px;
        padding: 12px 16px;
        border: 1px solid #d9e2ef;
        border-radius: 16px;
        background-color: #f8fafc;
        color: #dc2626;
        font-size: 0.9rem;
        font-weight: 600;
        line-height: 1.4;
        width: 100%;
        box-sizing: border-box;
    }

    .email-validation-message.is-visible {
        display: block;
    }

    #email.email-validation-error {
        border-color: #dc2626;
    }

    #email:-webkit-autofill,
    #email:-webkit-autofill:hover,
    #email:-webkit-autofill:focus,
    #email:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
        -webkit-text-fill-color: #333;
        transition: background-color 5000s ease-in-out 0s;
    }