html,
body {
  max-width: 100vw;
  height: 100vh;
  margin: auto;
  overflow: hidden;
  background-image: url('../images/home/home_screen.png');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

.glass-container {
  overflow-x: hidden;
  height: 95vh;
  width: 95vw;
  background: transparent linear-gradient(115deg, #FFFFFF59 0%, #FFFFFF0D 100%) 0% 0% no-repeat padding-box;
  border: 2px solid #FFFFFF66;
  border-radius: 20px;
  opacity: 1;
}

.glass-icons {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.help-logo {
  display: flex;
  justify-content: center;
  align-items: center;
}

.help-visible {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.help-text {
  font: normal normal medium 14px/17px;
  font-family: "Helvetica Neue";
  letter-spacing: 0px;
  color: #000000;
  opacity: 1;
  line-height: 0%;
  z-index: 2;
}

.help-menu {
  background: transparent linear-gradient(117deg, #FFFFFF66 0%, #FFFFFF0D 100%) 0% 0% no-repeat padding-box;
  border: 2px solid #FFFFFF66;
  border-radius: 5px;
  opacity: 1;
  z-index: 1;
}

.vl {
  border-left: 1px solid #FFFFFF66;
  height: 45px;
  margin-left: 0.2rem;
}

.grid-card,
hr {
  background: transparent linear-gradient(122deg, #FFFFFF59 0%, #FFFFFF0D 100%) 0% 0% no-repeat padding-box;
  border: 2px solid #FFFFFF66;
  border-radius: 20px;
  opacity: 1;
}

.card-heading {
  font: normal normal medium 24px/35px Poppins;
}

.main-heading {
  font: normal normal medium 25px/30px Helvetica Neue;
}

.sub-heading {
  font: normal normal medium 20px/28px Helvetica Neue;
}

.heading-age {
  font: normal normal normal 18px/27px Poppins;
}

.small-heading {
  font: normal normal medium 15px/18px Helvetica Neue;
}

.faceMatch-heading {
  font: normal normal medium 16px/20px Poppins;
  letter-spacing: 0px;
  color: #000000;
  opacity: 1;
}

.heading-style {
  text-align: left;
  letter-spacing: 0px;
  color: #000000;
  text-shadow: 3px 3px 6px #00000066;
  opacity: 1;
}

.custom-btn-heading {
  text-align: left;
  letter-spacing: 0px;
  color: #000000;
  text-shadow: 3px 3px 6px #00000066;
  opacity: 1;
  margin-bottom: 4px;
  font-size: 14px;
}

li p {
  text-align: left;
  font: normal normal normal 18px/27px Poppins;
  letter-spacing: 0px;
  color: #000000;
  opacity: 1;
}

.language-btn {
  background: transparent linear-gradient(97deg, #FFFFFF66 0%, #FFFFFF0D 100%) 0% 0% no-repeat padding-box;
  border: 2px solid #FFFFFF66;
  border-radius: 10px;
  opacity: 1;
  width: 350px;
  height: 50px;
}

.primary-btn {
  background: transparent linear-gradient(96deg, #185ADB 0%, #F69FC2 100%) 0% 0% no-repeat padding-box;
  box-shadow: 0px 3px 6px #185adb;
  border-radius: 10px;
  opacity: 1;
  text-transform: none;
  color: #FFFFFF;
  text-shadow: 0px 3px 6px #00000080;
  letter-spacing: 0px;
  padding: 8px 48px;
  border: 0;
  font-weight: bold;
  font-size: 16px;
  outline: none;
}

.back-btn {
  border-radius: 10px;
  opacity: 1;
  text-transform: none;
  color: #FFFFFF;
  text-shadow: 0px 3px 6px #00000080;
  letter-spacing: 0px;
  padding: 6px 40px;
  font-weight: bold;
  font-size: 16px;
  outline: none;
  border: 2px solid #FFFFFF;
  border-radius: 10px;
}

.btn-color {
  text-align: left;
  /* font: normal normal medium 14px/25px Helvetica Neue; */
  /* letter-spacing: 0px; */
  font-weight: bold;
  color: #FFFFFF;
  text-shadow: 0px 3px 6px #00000080;
  opacity: 1;
  text-transform: none;
}

.btn-shadow {
  text-shadow: 0px 3px 6px #0000008C;
}

.btn-click-inset {
  background: transparent linear-gradient(107deg, #FFFFFF66 0%, #FFFFFF0D 100%) 0% 0% no-repeat padding-box;
  border: 2px solid #FFFFFF66;
  border-radius: 10px;
  opacity: 1;
  min-width: 145px;
  height: 44px;
  align-items: center;
  justify-content: center;
}

.btn-click-sm {
  background: transparent linear-gradient(107deg, #FFFFFF66 0%, #FFFFFF0D 100%) 0% 0% no-repeat padding-box;
  border: 2px solid #FFFFFF66;
  border-radius: 10px;
  opacity: 1;
  height: 44px;
}

.btn-click,
.myCountry {
  background: transparent linear-gradient(110deg, #185ADB 0%, #F69FC2 100%) 0% 0% no-repeat padding-box;
  border-radius: 10px;
  opacity: 1;
  width: 150px;
  height: 50px;
}

.bg-btn-color {
  background: transparent linear-gradient(110deg, #185ADB 0%, #F69FC2 100%) 0% 0% no-repeat padding-box;
  border-radius: 10px;
  opacity: 1;
}

.opacity {
  opacity: 1;
}

.outline-none {
  outline: none;
}

.active {
  background: transparent linear-gradient(107deg, #FFFFFF66 0%, #FFFFFF0D 100%) 0% 0% no-repeat padding-box;
  border: 2px solid #FFFFFF66;
  border-radius: 10px;
  opacity: 1;
  width: 145px;
  height: 44px;
  align-items: center;
  justify-content: center;
}

/************ STEPPER STYLES *************/

.stepper-title,
.stepper-title-mobile {
  text-align: left;
  /*font: normal normal medium 20px/21px Helvetica Neue;*/
  letter-spacing: 0px;
  color: #000000;
  text-shadow: 0px 3px 6px #00000066;
  opacity: 1;
  font-size: 20px;
  font-weight: bold;
  padding-top: 5px;
}

.horizantal-line {
  background: transparent linear-gradient(90deg, #FFFFFF66 0%, #FFFFFF0D 100%) 0% 0% no-repeat padding-box;
  border: 2px solid #FFFFFF66;
  border-radius: 50px;
  opacity: 1;
  margin: 0 !important;
  padding: 0 !important;
}

.header-stepper-section {
  padding-top: 14px;
  padding-bottom: 12px;
}

.stepper-nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.stepper-left,
.stepper-right {
  display: flex;
  align-items: center;
  height: 60px;
}

.stepper-right>span {
  width: 50px;
}

.icon-active {
  width: 70px;
  padding-left: 12px;
  padding-top: 8px;
}

.stepper-nav .icon-completed {
  border-radius: 100px;
}


.stepperIcon {
  background-color: #1a60d6;
  opacity: 1;
  padding: 6px 13px;
  padding-top: 11px;
  border-radius: 30px;
  color: white;
  font-size: 20px;
}

.stepperIcon.active {
  background: transparent linear-gradient(132deg, #FFFFFF66 0%, #FFFFFF0D 100%) 0% 0% no-repeat padding-box;
  border: 2px solid #FFFFFF66;
  border-radius: 50px;
  color: #000;
  font-weight: bold;
}

.progressbar {
  background: transparent linear-gradient(90deg, #FFFFFF66 0%, #FFFFFF0D 100%) 0% 0% no-repeat padding-box;
  border: 2px solid #FFFFFF66;
  border-radius: 50px;
  height: 6px;
}

.progressbar-filled {
  background-color: black;
  width: 10%;
  margin-top: -6px;
  height: 6px;
  border-radius: 50px;
  transition: width 0.6s;
}

.fieldicon {
  position: absolute;
  top: 20px;
  right: 20px;
}

.iconFirstname {
  background-image: url('../icons/firstname.png') !important;
  background-position: right 14px center !important
}

.iconEmail {
  background-image: url('../icons/mail.png') !important;
  background-position: right 14px center !important
}

.iconMobileNumber {
  background-image: url('../icons/mobile_no.png') !important;
  background-position: right 14px center !important
}


md-input-container.md-default-theme:not(.md-input-invalid).md-input-focused .md-input,
md-input-container:not(.md-input-invalid).md-input-focused .md-input,
md-input-container.md-default-theme:not(.md-input-invalid).md-input-resized .md-input,
md-input-container:not(.md-input-invalid).md-input-resized .md-input {
  border-color: #000;
}

md-input-container.md-default-theme:not(.md-input-invalid).md-input-focused label,
md-input-container:not(.md-input-invalid).md-input-focused label,
md-input-container.md-default-theme:not(.md-input-invalid).md-input-focused md-icon,
md-input-container:not(.md-input-invalid).md-input-focused md-icon {
  color: #000;
}


.upload-box {
  width: 280px;
  min-height: 210px;
  box-shadow: 0px 6px 12px #00000029;
  border-radius: 10px;
  opacity: 1;
  display: flex;
  flex-direction: column;
}

.front {
  background: #185ADB 0% 0% no-repeat padding-box;
}

.back {
  background: #0A1931 0% 0% no-repeat padding-box;
}

.signature {
  width: 300px;
  background: transparent linear-gradient(109deg, #1C5BDB 0%, #EF9DC3 100%) 0% 0% no-repeat padding-box;
}

.upload-text-block {
  padding: 16px;
  flex: 4;
}

.upload-text {
  text-align: left;
  font: normal normal medium 12px/20px Helvetica Neue;
  letter-spacing: 0px;
  color: #FFFFFF;
  opacity: 1;
  flex: 1;
  font-size: 16px;
}

.upload-title {
  font-size: 20px;
  width: max-content;
  padding-left: 0;
  padding-bottom: 3px;
  margin-left: 10px;
  margin-bottom: 12px;
}

.front .upload-title {
  border-bottom: 1px solid #4274d7;
}

.back .upload-title {
  border-bottom: 1px solid #2f3e57;
}

.signature .upload-title {
  border-bottom: 1px solid #9e83cc;
}

.upload-button {
  background: transparent linear-gradient(106deg, #FFFFFF66 0%, #FFFFFF0D 100%) 0% 0% no-repeat padding-box;
  border: 2px solid #FFFFFF66;
  border-radius: 10px;
  opacity: 1;
  justify-content: space-around;
  align-items: center;
  display: flex;
  flex: 3;
  cursor: pointer;
  min-height: 58px;
  outline: none;
}

.upload-button:hover,
.pdf-btn:hover,
.finish-btn:hover {
  opacity: 0.7;
}

.upload-button-text {
  text-align: left;
  font: normal normal medium 16px/25px Helvetica Neue;
  letter-spacing: 0px;
  color: #FFFFFF;
  opacity: 1;
  font-size: 16px;
}

.upload-button-img {
  height: 30px;
  width: 30px;
}

md-dialog {
  background-image: url(../images/home/home_screen.png);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

md-dialog-content {
  background: transparent linear-gradient(115deg, #FFFFFF59 0%, #FFFFFF0D 100%) 0% 0% no-repeat padding-box;
  ;
}

md-checkbox.md-checked .md-container:after {
  background: url(../icons/tikbutton.png);
  background-position: center;
  background-size: contain;
  background-color: #a5bff1;
  border-radius: 40px;
}

md-checkbox .md-icon {
  border-radius: 40px;
  border-color: #2a9662 !important;
}



.iconDropdown {
  background-image: url('../icons/kym/polygon.png') !important;
  background-position: right 14px center !important
}

/************* FACE MATCH ***************/

.bg-boy {
  background: #185ADB 0% 0% no-repeat padding-box;
  box-shadow: 0px 6px 12px #00000029;
  border-radius: 10px;
  opacity: 1;
  width: 171px;
  height: 141px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bg-girl {
  background: #5E8CE6 0% 0% no-repeat padding-box;
  box-shadow: 0px 6px 12px #00000029;
  border-radius: 10px;
  opacity: 1;
  width: 171px;
  height: 141px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.progress-container {
  margin-top: 30px;
  margin-bottom: 10px;
  border-bottom: 2px solid white;
}

.progress-bar {
  border-top: 6px solid red;
  width: 0;
  margin-top: -14px;
  border-radius: 5px;
  transition: width 0.3s;
}

.percentage {
  background: #185ADB 0% 0% no-repeat padding-box;
  border-radius: 10px;
  opacity: 1;
  color: white;
}

.img-alignment {
  height: 100%;
  width: 100%;
}

/* ************** SUMMARY **************** */

.btn-summary {
  background: transparent linear-gradient(98deg, #FFFFFF66 0%, #185ADB8C 100%) 0% 0% no-repeat padding-box;
  border: 3px solid #FFFFFF66;
  box-shadow: 0px 6px 12px #00000029;
  border-radius: 10px;
  opacity: 1;
  outline: none;
  position: relative;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-summary-icon {
  background-image: url('../icons/kym/polygon.png') !important;
  height: 30px;
  width: 30px;
  background-size: contain;
  position: absolute;
  top: 10px;
  right: 20px;
  transform: rotate(0deg);
}

.btn-summary-icon-open {
  transform: rotate(60deg);
}

.text-summary {
  font: normal normal medium 17px/25px Helvetica Neue;
  letter-spacing: 0px;
  color: #FFFFFF;
  opacity: 1;
}

.summary-section {
  background: rgba(24, 90, 219, .5);
  box-shadow: 0px 6px 12px #00000029;
  border-radius: 10px;
  width: 100%;
  height: 100%;
}

.lbl-color {
  color: white !important;
}

/* ************************PDF VIEW********************** */

.pdf-view {
  background: #185ADB 0% 0% no-repeat padding-box;
  box-shadow: 0px 6px 12px #00000029;
  border-radius: 10px;
  opacity: 1;
  width: 100%;
  height: 100%;
  padding: 4rem;
  justify-content: center;
  align-items: center;
}

.pdf-heading,
.pdf-btn-text,
.pdf-check-text {
  letter-spacing: 0px;
  color: #FFFFFF;
  opacity: 1;
  text-align: center;
  justify-content: center;
}

.pdf-heading {
  font: normal normal medium 24px/25px Helvetica Neue;
  font-size: 24px;
}

.pdf-img,
.pdf-btn-view {
  display: flex;
  justify-content: center;
}

.pdf-btn-view {
  flex-direction: row;
}

.pdf-btn {
  background: transparent linear-gradient(106deg, #FFFFFF66 0%, #FFFFFF0D 100%) 0% 0% no-repeat padding-box;
  border: 2px solid #FFFFFF66;
  border-radius: 10px;
  opacity: 1;
  justify-content: space-around;
  align-items: center;
  display: flex;
  cursor: pointer;
  min-height: 55px;
  flex: .2;
  outline: none;
}

.pdf-btn-text {
  font: normal normal medium 24px/25px Poppins;
  font-size: 22px;
}

.pdf-check-text {
  font: normal normal medium 20px/33px Helvetica Neue;
  font-size: 20px;
}


/* ************************SUCCESS SCREEN********************** */

.app-id,
.app-id-heading,
.inner-black-text,
.inner-normal-text {
  text-align: left;
  letter-spacing: 0px;
  color: #000000;
  opacity: 1;
}

.app-id-heading {
  font-size: 20px;
}

.app-id {
  font-size: 20px
}

.scrollHeight {
  height: calc(100vh - 206px);
  overflow-y: auto;
}

.congrats-appid {
  display: flex;
  justify-content: space-around;
  width: 380px;
  max-width: 100%;
  min-width: 320px;
}

.congrats-box {
  background: transparent linear-gradient(126deg, #FFFFFF66 0%, #FFFFFF0D 100%) 0% 0% no-repeat padding-box;
  border: 3px solid #FFFFFF66;
  border-radius: 20px;
  opacity: 1;
  min-width: 325px;
  max-width: 430px;
  padding: 30px;
  /* width: 60%; */
}

.congrats-text,
.finish-text {
  letter-spacing: 0px;
  color: #FFFFFF;
  opacity: 1;
  font-weight: bold;
}

.congrats-text {
  font-size: 30px;
}

.inner-black-text {
  font-size: 18px;
}

.inner-normal-text {
  font-size: 16px
}

.finish-btn {
  background: transparent linear-gradient(100deg, #1A5BDB 0%, #F69FC2 100%) 0% 0% no-repeat padding-box;
  box-shadow: 0px 3px 6px #265FDA;
  border-radius: 10px;
  opacity: 1;
  justify-content: space-around;
  align-items: center;
  display: flex;
  cursor: pointer;
  min-height: 50px;
  flex: .1;
  outline: none;
}

.finish-text {
  font-size: 24px;
}


/* Radio Button Css Starts */

md-radio-group {
  background: linear-gradient(97deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.05) 100%) 0% 0% no-repeat padding-box padding-box transparent;
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  display: flex;
  /* margin: 8px 0 20px 0 !important; */
  margin: 4px 0 16px 0 !important;
}

.md-inline-form md-radio-group md-radio-button {
  height: auto;
  margin-top: 0;
  margin-bottom: 0;
  cursor: pointer;
}

md-radio-button[aria-checked="true"] {
  border-radius: 10px;
  background: transparent linear-gradient(110deg, #185ADB 0%, #F69FC2 100%) 0% 0% no-repeat padding-box
}

.md-inline-form md-radio-group md-radio-button .md-container {
  display: none;
}

md-radio-button[aria-checked="true"] .md-label {
  border: 2px solid #FFFFFF66;
  background: transparent linear-gradient(107deg, #FFFFFF66 0%, #FFFFFF0D 100%) 0% 0% no-repeat padding-box
}

md-radio-button .md-label {
  border: 2px solid transparent;
  margin: 0;
  padding: 8px 0px;
  border-radius: 10px;
  top: 0px !important;
  min-width: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  color: #FFFFFF;
  text-shadow: 0px 3px 6px #00000080;
  opacity: 1;
  text-transform: none;
  text-align: center;
}

md-radio-button.long-text .md-label {
  padding: 2px;
  min-height: 50px;
}

/* Radio Button Css Ends */


.inputContainer {
  min-height: 140px;
}

.radio-btn-container {
  margin-top: -10px;
}


.md-calendar,
.md-calendar-day-header,
.md-default-theme .md-datepicker-calendar, .md-datepicker-calendar,
.md-datepicker-calendar-pane {
  background: transparent linear-gradient(100deg, #1A5BDB 0%, #F69FC2 100%) 0% 0% no-repeat padding-box;
  box-shadow: 0px 3px 6px #265FDA;
}

.md-calendar-date.md-focus .md-default-theme .md-calendar-date-selection-indicator, .md-calendar-date.md-focus .md-calendar-date-selection-indicator, .md-default-theme .md-calendar-date-selection-indicator:hover, .md-calendar-date-selection-indicator:hover {
  background: rgb(10, 25, 49);
  color: white;
}

.help-logo-img {
  width: 60px;
  height: 60px;
}

@media only screen and (max-width: 480px) {
  .help-logo-img {
    width: 45px;
    height: 45px;
  }

  .stepper-title-mobile {
    flex: 1;
    text-align: center;
    padding: 0 5px;
    font-size: 16px;
  }

  .stepper-left, .stepper-right {
    height: 50px;
  }

  .glass-icons {
    align-items: center;
  }

  .header-stepper-section {
    padding-top: 8px;
    padding-bottom: 0;
  }

  .stepper-nav {
    margin-top: 0;
  }

  .glass-container {
    border-radius: 10px;
    width: 96.5vw;
    height: 98vh;
  }

  .signature {
    width: 280px;
  }
}