@font-face {
	font-family: 'pt_sans_narrowregular';
	src: url('../fonts/PTN57F-webfont.eot');
	src: url('../fonts/PTN57F-webfont.eot?#iefix') format('embedded-opentype'),
	url('../fonts/PTN57F-webfont.woff') format('woff'),
	url('../fonts/PTN57F-webfont.ttf') format('truetype'),
	url('../fonts/PTN57F-webfont.svg#pt_sans_narrowregular') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'pt_sans_narrowregular';
	src: url('../fonts/PTN77F-webfont.eot');
	src: url('../fonts/PTN77F-webfont.eot?#iefix') format('embedded-opentype'),
	url('../fonts/PTN77F-webfont.woff') format('woff'),
	url('../fonts/PTN77F-webfont.ttf') format('truetype'),
	url('../fonts/PTN77F-webfont.svg#pt_sans_narrowregular') format('svg');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'icons';
	src: url('../fonts/icons.eot');
	src: url('../fonts/icons.eot?#iefix') format('embedded-opentype'),
	url('../fonts/icons.woff') format('woff'),
	url('../fonts/icons.ttf') format('truetype'),
	url('../fonts/icons.svg#pt_sans_narrowregular') format('svg');
	font-weight: normal;
	font-style: normal;
}

:root{
  --s-aqua: #2da4a8;
  --s-darkgrey: #4b4f55;
  --s-grey: #dddddd;
  --s-red: #981111;
  --s-white: #f5f6f7;
}

*, *::before, *::after{
  box-sizing: border-box;
}

html,
body {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;

  padding-bottom: 10vh;

	background: #4b4f55;

  font-family: 'pt_sans_narrowregular', sans-serif;
}

body > *{
  width: 360px;
  max-width: 90vw;
}

body > h1{
  display: inline-block;
  text-align: center;
  color: var(--s-aqua);
  margin: 0;
}

#auth-container,
#auth-container > *{
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  align-items: flex-start;
}

#auth-container {
  gap: 50px;
  
  position: relative;
  border-radius: 5px;
  overflow: hidden;

  background-color: var(--s-white);
}

#auth-container > *{
  gap: 30px;
  
  width: 100%;
  padding: 50px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent;
  border-radius: inherit;
}

#auth-container .page { display: none; }
#auth-container .page.active { display: flex; }

#auth-container .page.success { border-color: green; }
#auth-container .page.error { border-color: red; }

#auth-container label{ text-transform: uppercase; }
#auth-container input{
  align-self: stretch;

  padding: 10px;
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: black;

  background-color: transparent;
}

#auth-container button{
  cursor: pointer;
}

#auth-container button.secondary {
	background: none;
	border: none;
	color: #222;
}

#auth-container .message{
  width: 100%;
  padding: 10px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--s-darkgrey);
  border-radius: 5px;

  color: var(--s-darkgrey);
}
#auth-container .message.error{
  border-color: var(--s-red);
  background-color: var(--s-red);
  color: white;
}
#auth-container .message.success{
  border-color: green;
  background-color: green;
  color: white;
}

/* INPUT WRAP */

#auth-container .input-wrap {
  --input-padd: 10px;

  box-sizing: border-box;
  position: relative;

  display: flex;
  flex-direction: column;
  justify-content: stretch;
  align-items: flex-start; 
  gap: 10px;

  width: 100%;
}

#auth-container .input-wrap input::placeholder {
  padding: var(--input-padd);
}
#auth-container .input-wrap input::placeholder {
  color: transparent;
  opacity: 0;
}

#auth-container .input-wrap label {
  position: absolute;
  left: var(--input-padd);
  bottom: 50%;
  transform: translate(0, 50%) scale(1);
  transform-origin: left center;

  transition: all .15s ease-out;
}
#auth-container .input-wrap input:-webkit-autofill + label ,
#auth-container .input-wrap input:not(:placeholder-shown) + label {
  left: 0;
  bottom: 100%;
  transform: translate(0, 0) scale(0.8);
}

/* BUTTONS */

#auth-container button{ align-self: center; }
#auth-container button:focus{ outline: none; }

#auth-container button.primary{
  padding: .5em 1em;
  border-width: 1px;
  border-style: solid;
  border-color: var(--s-aqua);
  border-radius: 5px;
  
  font-size: .8em;
  font-weight: bold;
  letter-spacing: 0.2px;

  color: var(--s-aqua);
  background-color: transparent;

  transition: all .1s ease-out;
}
#auth-container button.primary:hover,
#auth-container button.primary:focus{
  background-color: var(--s-aqua);
  color: var(--s-white);
}

#auth-container button.secondary{
  width: 100%;
  padding: 15px 0 0 0;
  border-width: 1px 0 0 0;
  border-style: solid;
  border-color: #ccc;

  font-weight: bold;
  color: #999;

  transition: all .1s ease-out;
}
#auth-container button.secondary:hover,
#auth-container button.secondary:focus{
  color: var(--s-red);
}

/* LOADING */

#auth-container #loading {  
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  
	display: none;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.9);
}
#auth-container #loading.visible { display: flex; }