html{
  font-size:16px;
}
body{
  background-color: rgb(72, 107, 155);
  margin:0px;
  padding:0px;
}
.top_holder{
  position:relative;
  width:100vw;
  height:15vh;
  margin-bottom:2vh;
}
.title_bar{
  position:absolute;
  top:5vh;
  left:0vw;
  font-size: 5vh;
  width:100vw;
  height:6vh;
  text-align: center;
  cursor:pointer;
}
.title_text_1{
  color: rgb(0, 0, 0);
}
.title_text_2{
  color: rgb(187, 223, 255);
  /*text-shadow:
    0 0 1vw  #000000;*/
}
.eye_holder{
  position:absolute;
  top:2vh;
  left:30vw;
  width:40vw;
  height:15vh;
}
.eye{
  width:100%;
  height:100%;
}
.bottom_holder{
  position:relative;
  left:3vw;
  width:94vw;
  height:flex;
    border:1px solid rgb(226, 232, 240);
    background: rgba(0, 0, 0, 0.2);
    border-radius:clamp(2rem, 3vh, 3rem);
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.55);
    padding-bottom: 5vh;
    overflow:hidden;
}
.signup_visual_holder{
  display:block;
  width:94vw;
  margin: auto;
  margin-bottom: 8vh;
  text-align:center;
  margin-bottom: 10vh;
}
.signup_visual_image{
  width:100%;
  max-width:94vw;
  height:auto;
  border-radius:clamp(1rem, 2vh, 2rem);
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.4);
}
.signup_visual_caption{
  margin-top:2vh;
  font-size:clamp(1.2rem, 2.2vh, 2rem);
  font-weight:bold;
  color:rgb(255, 255, 255);
  text-shadow: 0 0 1vw rgba(0, 0, 0, 0.6);
}
html.desktop .signup_visual_holder{
  position:absolute;
  left:5vw;
  top:17vh;
  width:48vw;
  margin:0;
  margin-bottom: 10vh;
}
html.desktop .signup_visual_image{
  max-width:45vw;
}
html.desktop .signup_visual_caption{
  font-size:clamp(1.5rem, 2.4vh, 2.8rem);
}
.signup_title{
  position:relative;
  width:100%;
  font-size:clamp(1.6rem, 3vh, 2.6rem);
  text-align:center;
  font-family: Arial, Helvetica, sans-serif;
  background-color: rgb(38, 56, 82);
  color:rgb(139, 189, 230);
  font-weight:bold;
  margin-bottom: 1.5vh;
  padding:1.6vh 0;
  box-sizing: border-box;
  border-top-left-radius: clamp(2rem, 3vh, 3rem);
  border-top-right-radius: clamp(2rem, 3vh, 3rem);
}
.pair_holder{
  position:relative;
  width:100%;
  height:8vh;
}
.label_1{
  position:absolute;
  top:2vh;
  left:7%;
  font-size:clamp(2rem, 3vh, 3rem);
  color:rgb(255, 254, 254);
  text-align: left;
  width:83%;
  height:100%;
}
.pass_instructions{
  position:absolute;
  top:0px;
  left:5%;
  font-size:clamp(0.9rem, 1.5vh, 1.5vh);
  font-weight: normal;
  color:rgb(148, 163, 184);
  font-family: Arial, Helvetica, sans-serif;
}
.manditory{
  position:absolute;
  top:40%;
  right:5%;
  font-size:clamp(3rem, 3.5vh, 5rem);
  color:rgb(255, 0, 0);
  text-align: left;
  width:5%;
  height:20%;
  height:40%;
}

.input_1{
  position:absolute;
  top:2vh;
  left:5%;
  width:90%;
  height:6vh;
  font-size:clamp(1.5rem, 2.5vh, 4rem);
  background-color: rgb(248, 250, 252);
  border: 1.5px solid rgb(203, 213, 225);
  border-radius:clamp(1rem, 1vh, 2rem);
  box-sizing: border-box;
  z-index:200;
  opacity:0.3;
  cursor:pointer;
}
.signup_button{
  position: relative;
  left:5%;
  top:3vh;
  background-color: rgb(66, 110, 174);
  color:rgb(255,255,255);
  width:90%;
  height:7vh;
  font-size:clamp(1.5rem, 4vh, 3rem);
  font-weight:bold;
  border:none;
  border-radius:clamp(1rem, 2vh, 2rem);
  box-shadow: 0 8px 16px -6px rgba(66, 110, 174, 0.6);
  cursor:pointer;
}
.signup_button:disabled{
  position: relative;
  left:5%;
  top:3vh;
  background-color: rgb(104, 147, 212);
  color:rgb(255,255,255);
  width:90%;
  height:7vh;
  font-size:clamp(1.5rem, 4vh, 3rem);
  font-weight:bold;
  border:none;
  border-radius:clamp(1rem, 2vh, 2rem);
  box-shadow:none;
  cursor:not-allowed;
  opacity: 0.3;
}
.explained{
  position:relative;
  width:90%;
  left:5%;
  font-size:clamp(1rem, 2vh, 2rem);
  color:rgb(103, 103, 103);
  margin-bottom: 5vh;
}
/* Scoped to the same html.desktop class applyStructuralLayout() sets (physicalWidth
   > 1900, DPR-scaled), not a raw min-width media query - a media query keys off
   window.innerWidth alone, which disagrees with physicalWidth on any device where
   devicePixelRatio != 1 and previously let .signup_visual_holder (below, also
   html.desktop-scoped) switch to overlay positioning while these stayed in mobile
   layout, dropping the image on top of the form. */
html.desktop .top_holder{
  position:relative;
  width:100vw;
  height:17vh;
  margin-bottom:0;
}
.desktop .title_bar{
  position:absolute;
  top:0vh;
  left:0vw;
  font-size: 10vh;
  width:100vw;
  height:17vh;
  text-align: center;
}
.desktop .title_text_1{
  color: rgb(0, 0, 0);
  text-shadow:
    0 0 1vw  rgb(145, 111, 150);
}
.desktop .title_text_2{
  color: rgb(119, 174, 250);
  /*text-shadow:
    0 0 1vw  #000000;*/
}
.desktop .eye_holder{
  position:absolute;
  top:2vh;
  left:3vw;
  width:13vw;
  height:13vh;
}
.desktop .eye{
  width:100%;
  height:100%;
}
.desktop .bottom_holder{
  position:relative;
  left:60vw;
  width:30vw;
  height:flex;
  border:1px solid rgb(226, 232, 240);
  background: rgba(0, 0, 0, 0.2);
  border-radius:clamp(2rem, 3vh, 3rem);
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.55);
  padding-bottom: 5vh;
}
.desktop .explained{
  position:relative;
  width:90%;
  left:60vw;
  font-size:clamp(1rem, 2vh, 2rem);
  color:rgb(103, 103, 103);
  margin-bottom: 5vh;
}