/*Get the colors file*/
@import url("../Colors/custom-colors.css");

@font-face {
    font-family: Montserrat-Regular;
    src: url(../fonts/Montserrat-Regular.otf);
}

@font-face {
    font-family: Montserrat-Bold;
    src: url(../fonts/Montserrat-Bold.otf);
}
@media (max-height: 540.345px) {
  #Login_Card {
    max-width: 420px;
    margin: 0 auto;
    top:0 !important;
    transform: translateY(0%) !important;
    border: none;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  	background-color: rgba(1,1,1,0);
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
  	border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
  }

  #Login_Card .card-header {
    width: 420px !important;
  }
  #card,#wrapperphn,#wrapperpass,.card-body{
    max-width: 420px;
    width: 420px !important;
  }
  body, html {
      height: auto !important;
  }

}

@media (max-width: 420px) {
  #Login_Card {
    max-width: 420px;
    width: 100vw;
    height: 128.65vw;
    margin: 0 auto;
    top:50% !important;
    transform: translateY(-50%) !important;
    border: none;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  	background-color: rgba(1,1,1,0);
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
  	border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
  }
  #Login_Card .card-header {
    width: 100vw !important;
    height: 69.127vw !important;
  }
  #card,#wrapperphn,#wrapperpass,.card-body{
    max-width: 420px;
    width: 100vw !important;
    height: 59.523vw !important;
    margin: 0 auto;
  }

  body, html {
      width: 100vw !important;
      height: 100vh !important;
  }
}
@media (max-width: 420px) and (max-height: 540.345px) {
  #Login_Card {
    max-width: 420px;
    width:  100vw;
    height: 128.65vw;
    margin: 0 auto;
    top:0 !important;
    transform: translateY(0%) !important;
    border: none;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  	background-color: rgba(1,1,1,0);
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
  	border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
  }

    #card,#wrapperphn,#wrapperpass,.card-body{
      max-width: 420px;
      width:100vw !important;
      height: 59.523vw !important;
      margin: 0 auto;
    }

    #Login_Card .card-header {
      width: 100vw !important;
      height: 69.127vw !important;
    }
    body, html {
          width: 100vw !important;
          height: auto !important;
      }
}

@media (max-aspect-ratio: 10000/12865) and (max-width:420px) {
  #Login_Card {
    max-width: 420px;
    margin: 0 auto;
    top:50% !important;
    transform: translateY(-50%) !important;
    border: none;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  	background-color: rgba(1,1,1,0);
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
  	border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
  }
    body, html {
        width: 100vw !important;
        height: 100vh !important;
    }
}
body, html {
    height: 100%;
    font-family: 'Montserrat-Regular';
    background: url(../images/LoginBG.png) no-repeat right bottom/cover;
}

#Login_Card {
  max-width: 420px;
  margin: 0 auto;
  top:50%;
  transform: translateY(-50%);
  border: none;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
	background-color: rgba(1,1,1,0);
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
	border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

#Login_Card .card-header {
  height: 290.345px;
	border-top-left-radius: 15px;
  border-top-right-radius: 15px;
	display: flex;
	background-color: rgba(1,1,1,0);
	border-bottom: none;
	background: url(../images/LoginBoxTopWithLogo.svg) no-repeat right bottom/100%;
}

#Login_Card .card-body {
	height: 250px;
  width: 420px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  position: relative;
  z-index: 1;
	display: block;
	background-color: rgba(255,255,255);
	border-bottom: none;
  padding: 0;
}

.login-header {
  color:var(--d4m-landing-button);
  font-family: "Montserrat-Bold";
  text-align: center;
  font-size: 18px;
  top: 50%;
  position: relative;
  transform: translateY(-50%);
}

#Input_Phone, #Input_Pass, #Input_OTP, #Input_Set_Password, #Input_Set_Re_Password {
	background-color: var(--d4m-upcoming-booking);
	color: var(--d4m-text-basic);
  width: 80%;
  border: none;
	border-radius: 15px;
  font-size: 15px;
  height: 40px;
  margin: auto;
  position: relative;
  text-align: center;
  z-index: 1;
}
#Input_First_Name{
	background-color: var(--d4m-upcoming-booking);
	color: var(--d4m-text-basic);
  width: 80%;
  border: none;
	border-radius: 15px;
  font-size: 15px;
  height: 40px;
  margin: auto;
  margin-right: 10px;
  position: relative;
  text-align: center;
  z-index: 1;
}
#Input_Last_Name{
	background-color: var(--d4m-upcoming-booking);
	color: var(--d4m-text-basic);
  width: 80%;
  border: none;
	border-radius: 15px;
  font-size: 15px;
  height: 40px;
  margin: auto;
  margin-left: 10px;
  position: relative;
  text-align: center;
  z-index: 1;
}
.icon-height{
  height: 40px;
}

.input-group-prepend span {
	background-color: rgb(213, 231, 235);
	color: var(--d4m-text-basic);
	border: none;
	border-top-left-radius: 15px;
	border-bottom-left-radius: 15px;
    margin: auto;
}

.input-group-append span {
    background-color: rgb(213, 231, 235);
	color: var(--d4m-text-basic);
	border: none;
	border-top-right-radius: 15px;
	border-bottom-right-radius: 15px;
    margin: auto;
}

.input-group-addon-image {
	width: 22px;
    cursor: pointer;
}

.form-control::-webkit-input-placeholder { /* Edge */
  color: var(--d4m-landing-button);
}

.form-control:-ms-input-placeholder { /* Internet Explorer */
  color: var(--d4m-landing-button);
}

.form-control::placeholder {
  color: var(--d4m-landing-button);
  -text-align: center;
}

.input-group {
	width: 80%;
	margin: auto;
	text-align: center;
}

.input-group button, .input-group a {
	margin: auto;
}
#continueLogin, #confirmLogin, #confirmLoginPass, #nextName, #nextPassword, #confirmRegister{
  color: white;
  border-radius: 50px!important;
  padding-left: 20px;
  padding-right: 20px;
  text-align: center;
  background-color: var(--d4m-landing-button);
}
#phoneStyle, #otpStyle, #passwordStyle, #nameStyle, #setPasswordStyle, #setOtpStyle{
  margin: auto;
  height: 25%;
  position: relative;
}
.wrapper-btn{
  height: 37.5%;
  padding: 0 !important;
}
.wrapper-btn-otp{
  height: 18.75%;
  padding: 0 !important;
}
.wrapper-btn-set-otp{
  height: 25%;
  padding: 0 !important;
}
#Input_Grp-PasswordText, #Input_Grp-ResendText, #Input_Grp-ResendText{
  position: relative;
}

.wrapper-input-group{
  height: 37.5%;
  padding: 0 !important;
}
.wrapper-input-set-password-group{
  height: 18.75%;
  padding: 0 !important;
}
.flex-container {
  width: inherit;
  display: flex;
  position:relative;
  z-index: 10;
  overflow: hidden;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}
.flex-container > div {
  background-color: white;
  position:relative;
  z-index: 9;
}
#wrapperphn{
  width: 420px;
}
.icon-img{
  margin-right:10px;
}
.header-padding{
  padding-right: 32px;
}
.passwordLoginText{
  text-align: center;
}
.password-switch-text {
  background-color:white;
  color:var(--d4m-landing-button);
  font-family: "Montserrat-Bold";
  text-align: center;
  font-size: 15px;
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50% , -50%);
  text-decoration: underline;
}
#otpback,#passwordback, #nameBack, #setPasswordBack, #setOtpBack{
  z-index: 2;
  position: absolute;
  left: 5%;
  top: 0;
  height: 25%;
  width: 35px;
}
#passwordSwitch{
  cursor: pointer;
}
#resendOTP,#resendSetOTP{
  cursor: pointer;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance:textfield;
}

#ccDisplay {
    height: 40px;
    border-right: 2px solid beige;
}

.input-visibility-toggle .input-group-text {
    height: 40px;
    position: relative;
    margin: auto;
    border-left: 2px solid beige;
}

#Input_Phone {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

#Input_Pass, #Input_Set_Password, #Input_Set_Re_Password {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

#Input_Phone:focus, #Input_Pass:focus, #Input_OTP:focus, #Input_Set_Password:focus,
#Input_Set_Re_Password:focus, #Input_First_Name:focus, #Input_Last_Name:focus  {
    outline: none!important;
    -webkit-box-shadow: none;
    box-shadow: none;
}