html, body {
  height: 100%;
  min-height: 100%;
  margin: 0;
  font-family: Poppins;
}    

label {
  color: #4B4B4D;
  font-size: 12px;
  margin-top: 10px;
}

input {
  font-family: Poppins;
  font-size: 16px;
  border: 1px solid rgba(0, 0, 0, 0.23);
  height: 1.1876em;
  padding: 11.5px;
  border-radius: 4px; 
  background: transparent; 
  outline: none !important;    
  width: 307px;      
}

input.input-error {
  border-color: #f44336;
}

input:focus {
  outline: none !important;
  border-color: #3f51b5;
  border-width: 2px;
}

input.input-error:focus {
  border-color: #f44336;
}

.inputAdornment-positionEnd {
  position: absolute;
  right: 14px;
  top: 34px;
  cursor: pointer;
}

.inputAdornment {
  padding-right: 40px;
  width: 279px;
}

.error {
  font-family: Poppins;
  font-size: 12px;
  color: #f44336;
}

::placeholder {            
  opacity: 0.7;
}

.form-group {
  position: relative;
  display: grid;
}

.Ellipse {
  width: 100%;
  height: 100%;
  position: fixed;
  right: 0;
  bottom: 30%;
}

.Google-authenticator-title {
  display: flex;
  justify-content: space-between;
  padding: 15px 27px;
}

.Google-authenticator-title .Title {
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  text-align: right;
  letter-spacing: 0.0015em;
  color: #FFFFFF;
  z-index: 10;
  margin-right: 30px;
}

.Google-authenticator-title img {
  z-index: 10;
}

.App-store {
  margin-top: 30px;
}

.App-store img:first-child {
  margin-right: 20px;
}

.Step-card-align {
  position: absolute;
  right: 0;
  top: 0;
}

.Content-center {  
  display: flex;
  justify-content: center;
}

.Init .Content-center .Text-default {
  width: 528px;
}

.Init .Content-center {
  background: #FFFFFF;
  padding-top: 70px;
}

.Step2 input,
.Step3 input {
  /*color: #0992CC;*/
  color: #232325;
  font-size: 15px;
}

.Step2 input {
  width: auto;
}

.Step2 .Card {
  min-height: 321px;
  max-height: 321px;
} 

.Step2 .Card .col .form-group {
  margin-right: 20px;
} 

.Step1 .Card .Step-card-align,
.Step2 .Card .Step-card-align,
.Step3 .Card .Step-card-align,
.Step5 .Card .Step-card-align {
  right: -4px;
}

.Step1 .Card .Step-card-align img,
.Step2 .Card .Step-card-align img,
.Step3 .Card .Step-card-align img,
.Step5 .Card .Step-card-align img {
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

.Step3 .form-group,
.Step4 .form-group,
.Step5 .form-group {  
  margin-top: 21px;
}

.Step1 button,
.Step2 button,
.Step3 button,
.Step4 button,
.Step5 button,
.Step6 button,
.Step6 .button-link {  
  margin-top: 32px;
}

.Init .Content-center,
.Step1 .Content-center,
.Step2 .Content-center,
.Step3 .Content-center,
.Step4 .Content-center,
.Step5 .Content-center,
.Step6 .Content-center {
  min-height: 100px;
  background-color: #FFFFFF;
}

.Step4 .Qr-code {
  position: absolute;
  right: 10%;
  top: 15%;
}

.Step4 .Qr-code #Loader {
  position: absolute;
  right: 33%;
  top: 33%;
  animation: loader 1.5s linear infinite;
}

@keyframes loader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.Step4 .form-group {
  width: 334px;
}

.Step4 .inputAdornment-positionEnd { 
  right: 14px;
  top: 13px;
}

.Step1 .Card,
.Step3 .Card,
.Step4 .Card,
.Step5 .Card,
.Step6 .Card {
  min-height: 259px;
  max-height: 259px;
}

.row {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  margin-top: 23px
}

.row .col {
  flex-grow: 0;
  max-width: 50%;
  flex-basis: 50%;
}

.forgotPassword {
  display: flex;
  margin-top: 12px;
  justify-content: center;
}

.forgotPassword a {
  color: #0992CC;
  margin-left: 5px;
  text-decoration: none;
}

.Default-content {
  position: relative;   
  padding: 0px 23px;
}

.Default-content.large {
  width: 752px;
}

.Default-content.large .Card-application,
.Default-content.large .Card-content {
  width: 336px;
}


.Card {
  display: flex;
  background: #FFFFFF;
  box-shadow: 0px 34px 35px -19px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  padding: 60px 100px;
  position: relative;
  min-height: 214px;
}

.Card-info {
  padding: 16px;
  width: 352px;
  background: #FFFFFF;
  border: 1px solid #D4D3D9;
  box-sizing: border-box;
  box-shadow: 0px 10px 59px -13px rgba(6, 7, 40, 0.91);
  border-radius: 10px;
  position: fixed;
  right: 3%;
  top: 12%;
  cursor: pointer;
  opacity: 0;
}

.Card-info .Card-info-title {
  font-weight: 600;
  font-size: 16px;
  color: #00001A;
  display: flex;
  align-items: center;
}

.Card-info .Card-info-text {
  font-size: 12px;
  color: #26213F;
}

.Card > div:first-child {
  width: 60%; 
}

.Card .Card-application {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
  margin-top: 20px;
}

.Text-bold {
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  text-align: center;
  letter-spacing: 0.0015em;
  color: #232325;
}

.Text-default {
  font-size: 23px;
  line-height: 28px;
  color: #4B4B4D;
}

.Text-default.center {
  text-align: center;
}

.Divider {
  height: 1px;
  background: #BEBECB;
  border-radius: 10px;
  transform: matrix(1, 0, 0, -1, 0, 0);
  margin: 15px 0;
}

.Footer {
  display: flex;
  align-items: center;
  height: 36px;    
  background: #07274a;
  position: fixed;
  width: 100%;
  bottom: 0;
}

.Footer .Footer-option {
  font-size: 15px;
  line-height: 24px;
  letter-spacing: 0.0015em;
  color: #F1F1FE;
  margin-right: 36px;
  text-decoration: none;
}

.Footer .Footer-logo {
  position: absolute;
  right: 100px;
}

.Footer .Footer-option:first-child {
  margin-left: 20px;
}

.Button-content {
  display: flex;
  justify-content: center;
  margin-top: 40px;
  margin-bottom: 20px;
}

.Button-content button:first-child {
  margin-right: 16px;
}

.button-link {
  text-decoration: none;
  font-size: 13.3333px;
}

button, .button-link {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;      
  width: 140px;
  height: 42px;
  color: #0992CC;
  font-weight: 600;
  background: rgba(255, 19, 74, 0.05);
  border: 1px solid #0992CC;
  box-sizing: border-box;
  border-radius: 6px;
  cursor: pointer;
  outline: 0;
}

button.center {
  margin: 15px auto;
}

button.primary, .button-link.primary {
  background: #0992CC;
  color: #FFFFFF;
}

button.default, button[disabled] {
  background: #BDBDBD;
  color: #777779;
  border: 1px solid #BDBDBD;
  cursor: not-allowed;
  pointer-events: none;
}

/* steppers */
.Stepper {
  display: flex;  
  align-items: center;
  margin-bottom: 20px;
}

.Stepper .step {  
  width: 26px;
  height: 26px; 
  border-radius: 50%;
  text-align: center;
  background-color: #B5B5B5;
  font-size: 16px;
  color: #4B4B4D;
  display: flex;
  align-items: center;
  justify-content: center;
}

.Stepper .step.active {
  background-color: #0992CC;
  color: #FFFFFF;
}

.Stepper .step.success {
  background-color: #06AD5D;
  color: #FFFFFF;
}

.Stepper .Separate {
  background: #BEBECB;
  border-radius: 10px;
  transform: matrix(1, 0, 0, -1, 0, 0);
  width: 40px;
  height: 2px;
}

.Stepper .Separate.active {
  background-color: #0992CC;
}

.Stepper .Separate.success {
  background-color: #06AD5D;
}