@font-face {
  font-family: FoRegular;
  src: url(/assets/fonts/Regular.ttf);
  font-display: swap;
}
@font-face {
  font-family: FoEBold;
  src: url(/assets/fonts/eBold.ttf);
  font-display: swap;
}
@font-face {
  font-family: FoBold;
  src: url(/assets/fonts/Bold.ttf);
  font-display: swap;
}
@font-face {
  font-family: FoLight;
  src: url(/assets/fonts/Light.ttf);
  font-display: swap;
}
@font-face {
  font-family: FoMedium;
  src: url(/assets/fonts/Medium.ttf);
  font-display: swap;
}


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -moz-tap-highlight-color: transparent;
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
}

html {
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
  font-family: FoRegular;

  background-image: url('/assets/images/flat/bg-auth.svg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  display: flex;
  justify-content: center;
}

.PROGRESSBAR, .PROGRESSBAR::after {
  height: 5px;
  width: 100%;
  margin: 0;
}

.PROGRESSBAR::before {
  content: "";
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgba(19, 19, 19, 0.5);
  z-index: -1;
}

.PROGRESSBAR {
  background-color: #e8e8e8;
  display: flex;
  position: fixed;
  z-index: 999999999;
  top: 0;
}

.PROGRESSBAR::after {
  background-color: #ffbd77;
  content: "";
  animation: progressbar 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@-webkit-keyframes progressbar {
  0% { margin-left: 0px; margin-right: 100%; }
  50% { margin-left: 25%; margin-right: 0%; }
  100% { margin-left: 100%; margin-right: 0; }
}
@keyframes progressbar {
  0% { margin-left: 0px; margin-right: 100%; }
  50% { margin-left: 25%; margin-right: 0%; }
  100% { margin-left: 100%; margin-right: 0; }
}

hr {
  border:none;
  border-top: 1px solid #bbb;
}

.auth-card-position {
  max-width: 500px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin:0 10px;
}

.auth-card-logo {
  margin:10px 5px 40px;
  height:25px;
}

.auth-card-logo::after {
  content: "for businesses";
  display:block;
  font-size: 12px;
  font-family: FoMedium;
  margin-left:2px;
}

.auth-card-logo img {
  height: 100%;
}

.auth-card-build {
  width:100%;
  min-height: 250px;
  background-color: rgba(254, 254, 254, 0.9);
  border-radius: 30px;
  padding:40px 30px;
  box-shadow: 0 0 24px 0 rgba(00,00,00,0.1);
}


.main-hello {
  font-size: 30px;
  font-family: FoBold;
  color:#313131;
}

.main-after-hello {
  font-size: 17px;
  font-family: FoLight;
  color:#313131;
}

.form-input {
  width: 100%;
  background: #eeeeee;
  color:rgb(44, 44, 44);
  border:none;
  padding:13px 25px;
  border-radius: 15px;
  font-family: FoBold;
  font-size: 14px;
}

button.form-input {
  cursor: pointer;
  transition: 0.3s opacity;
}

button.form-input:hover {
  opacity: 0.8;
}

.form-input-container {
  width: 50%;
  padding: 7px 7px;
}

.form-input-first {
  background: rgb(243, 144, 50);
  color:white;
}

.form-buttons-group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 15px -7px 8px;
}

.form-inputs-container {
  margin:20px 0 5px;
}

input {
  width: 100%;
  margin:6px 0;
  background: #eeeeee;
  color:rgb(44, 44, 44);
  border:none;
  padding:15px 20px;
  border-radius: 15px;
  font-size: 16px;
}