:root {
		  --spacing: 8px;
		  --hue: 400;
		  --background1: hsl(214, 14%, 20%);
		  --background2: hsl(214, 14%, 13%);
		  --background3: hsl(214, 14%, 5%);
		  --brand1: hsl(var(--hue) 80% 60%);
		  --text1: hsl(0,0%,100%);
		  --text2: hsl(0,0%,90%);
		}

		html.wait, html.wait * {cursor:wait;}
		code { background: var(--background3); }

		body {
			min-height: 100vh;
  		background-image: url(./../images/skyline.jpg);
		  -webkit-background-size: cover;
		  -moz-background-size: cover;
		  -o-background-size: cover;
		  background-size: cover;
		}

		.ui.grid { min-height: 100vh; width:100%; }

		@media only screen and (max-width: 600px) {
		  body { font-size: 1rem; }
		}

		a { text-decoration: none; }

		.content-area {
		  display: flex;
		  flex-direction: column;
		  /*gap: calc(var(--spacing) * 2);*/
		  background-color: white;
		  /*background: var(--background2);*/
		  padding: 20px 20px 5px 20px;
		  border-radius: calc(var(--spacing) * 2);
		  width: 400px;
		}
		#logo {
   	 display: flex;
    	flex-wrap: wrap;
   		justify-content: center;			
   		width: 400px;
		  position: fixed;
		  top: 15%;
		  left: 15%;
		  transform: translate(-50%, -50%);
		  align-items: center;
		}
		#lg {margin-top:10px; margin-right:10px;}

		.centered {
		  position: fixed;
		  top: 40%;
		  left: 70%;
		  transform: translate(-50%, -50%);
		}
		.number-code {
		  margin-bottom: 1em;
		  > div { display: flex; }
		}
		.g-recaptcha { display: inline-block; }
    
    #user_password { width:inherit; }
    #account_user_password { width:inherit; }

		form {
		  input.code-input {
		    font-size: 1.5em!important;
		    width: 1em!important;
		    text-align: center!important;
		    flex: 1 0 1em!important;
		    padding: var(--spacing)!important;
		  }

			input:not(:last-child) {
		     margin-right: calc(var(--spacing) * 2)!important;
		  }		  

			ul.check-list li { padding: 0.1em 2.2em!important; }
			.ui.message p {
    		margin-top: 0.2em!important;
    		margin-bottom: 0.2em!important;
			}
		  input {
		    padding: var(--spacing);
		    border-radius: calc(var(--spacing) / 2);
		    color: var(--text1);
		    background: var(--background1);
		    border: 0;
		    border: 4px solid transparent;
		    &:invalid {
		      box-shadow: none;
		    }
		    &:focus {
		      outline: none;
		      border: 4px solid var(--brand1);
		      background: var(--background3);
		    }
		  }
		}