/* 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;
}

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 {
	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;
}


  .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;
  }

  .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;
	}
  }