:root {
  --blue: rgba(2, 3, 157, 1);
  --neutral-colourwhite: rgba(255, 255, 255, 1);
  --soft-bluesoft-blue-25: rgba(217, 240, 252, 1);
  --orangeorange-50: rgba(250, 184, 144, 1);
  --pink: rgba(255, 3, 136, 1);
  --h3-b-font-family: "Helvetica Neue", Helvetica;
  --h3-b-font-weight: 700;
  --h3-b-font-size: 32px;
  --h3-b-letter-spacing: 0px;
  --h3-b-line-height: 120.00000762939453%;
  --h3-b-font-style: normal;
  --paragraph-1-r-font-family: "Helvetica Neue", Helvetica;
  --paragraph-1-r-font-weight: 400;
  --paragraph-1-r-font-size: 16px;
  --paragraph-1-r-letter-spacing: 0px;
  --paragraph-1-r-line-height: 150%;
  --paragraph-1-r-font-style: normal;
  --paragraph-2-r-font-family: "Helvetica Neue", Helvetica;
  --paragraph-2-r-font-weight: 400;
  --paragraph-2-r-font-size: 16px;
  --paragraph-2-r-letter-spacing: 0px;
  --paragraph-2-r-line-height: 150%;
  --paragraph-2-r-font-style: normal;
  --btn-title-case-font-family: "Helvetica Neue", Helvetica;
  --btn-title-case-font-weight: 500;
  --btn-title-case-font-size: 16px;
  --btn-title-case-letter-spacing: 0px;
  --btn-title-case-line-height: 150%;
  --btn-title-case-font-style: normal;
}

* {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

html,
body {
  margin: 0px;
  height: 100%;
}

/* a blue color as a generic focus style */
button:focus-visible {
  outline: 2px solid #4a90e2 !important;
  outline: -webkit-focus-ring-color auto 5px !important;
}

a {
  text-decoration: none;
}
.starlink-login {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  align-items: center;
  position: relative;
  overflow-x: hidden;
}
.starlink-login .hero-starlink {
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: var(--blue);
  overflow: hidden;
}
.starlink-login .overlap-group {
  position: relative;
  width: 100%;
  height: 100%;
}
.starlink-login .shutterstock {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
}
.starlink-login .rectangle {
  position: absolute;
  width: 100%;
  left: 0;
  background-color: #000002;
}
.starlink-login .blue-tint {
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background: linear-gradient(180deg, rgba(2, 3, 157, 0.6) 0%, rgba(2, 3, 157, 1) 100%);
}
.starlink-login .contact-info-default {
  display: flex;
  flex-direction: column;
  width: 1440px;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding: 0px 480px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}
.starlink-login .h {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}
.starlink-login .starlink {
  position: relative;
  width: 480px;
  height: 250px;
  /* background-image: url("{{ url_for('static', filename='img/bg-starlink.svg') }}"); */
  background-image: url("../img/bg-starlink.svg");
  background-size: 100% 100%;
}

.starlink-login .txt {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  width: 100%;
  align-items: center;
  gap: 8px;
  position: relative;
  flex: 0 0 auto;
}

.starlink-login .heading {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: var(--h3-b-font-family);
  font-weight: var(--h3-b-font-weight);
  color: var(--soft-bluesoft-blue-25);
  font-size: var(--h3-b-font-size);
  letter-spacing: var(--h3-b-letter-spacing);
  line-height: var(--h3-b-line-height);
  white-space: nowrap;
  font-style: var(--h3-b-font-style);
}

.starlink-login .text {
  font-family: var(--paragraph-1-r-font-family);
  font-weight: var(--paragraph-1-r-font-weight);
  color: var(--neutral-colourwhite);
  font-size: var(--paragraph-1-r-font-size);
  text-align: center;
  letter-spacing: var(--paragraph-1-r-letter-spacing);
  line-height: var(--paragraph-1-r-line-height);
  position: relative;
  align-self: stretch;
  font-style: var(--paragraph-1-r-font-style);
}

.starlink-login .form {
  align-items: center;
  gap: 40px;
  display: flex;
  flex-direction: column;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.starlink-login .div {
  align-items: flex-start;
  gap: 24px;
  display: flex;
  flex-direction: column;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.starlink-login .text-field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 24px;
  width: 100%;
  flex: 0 0 auto;
  background-color: #ffffffcc;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid;
  border-color: #d4d4e080;
  position: relative;
  align-self: stretch;
}

.starlink-login .button {
  all: unset;
  box-sizing: border-box;
  margin-top: -1.00px;
  font-family: var(--paragraph-2-r-font-family);
  font-weight: var(--paragraph-2-r-font-weight);
  color: #15151566;
  text-align: center;
  position: relative;
  width: fit-content;
  font-size: var(--paragraph-2-r-font-size);
  letter-spacing: var(--paragraph-2-r-letter-spacing);
  line-height: var(--paragraph-2-r-line-height);
  white-space: nowrap;
  font-style: var(--paragraph-2-r-font-style);
  background: transparent;
  border: none;
  padding: 0;
}
/* Fix for Email input placeholder */
.starlink-login .button::placeholder {
  text-align: left;
}
.starlink-login .button::-webkit-input-placeholder { /* Chrome, Safari, Edge */
  text-align: left;
}
.starlink-login .button::-moz-placeholder { /* Firefox 19+ */
  text-align: left;
}
.starlink-login .button:-ms-input-placeholder { /* IE 10-11 */
  text-align: left;
}
.starlink-login .button:-moz-placeholder { /* Firefox 4-18 */
  text-align: left;
}

.starlink-login .frame {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.starlink-login .text-wrapper {
  all: unset;
  box-sizing: border-box;
  margin-top: -1.00px;
  font-family: var(--paragraph-2-r-font-family);
  font-weight: var(--paragraph-2-r-font-weight);
  color: #15151566;
  text-align: center;
  position: relative;
  width: fit-content;
  font-size: var(--paragraph-2-r-font-size);
  letter-spacing: var(--paragraph-2-r-letter-spacing);
  line-height: var(--paragraph-2-r-line-height);
  white-space: nowrap;
  font-style: var(--paragraph-2-r-font-style);
}
/* New CSS to target and align the password placeholder text to the left */
.starlink-login .text-wrapper::placeholder {
  text-align: left;
}
.starlink-login .text-wrapper::-webkit-input-placeholder { /* Chrome, Safari, Edge */
  text-align: left;
}
.starlink-login .text-wrapper::-moz-placeholder { /* Firefox 19+ */
  text-align: left;
}
.starlink-login .text-wrapper:-ms-input-placeholder { /* IE 10-11 */
  text-align: left;
}
.starlink-login .text-wrapper:-moz-placeholder { /* Firefox 4-18 */
  text-align: left;
}

.starlink-login .txt-2 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  position: relative;
  flex: 0 0 auto;
}

.starlink-login .button-2 {
  all: unset;
  box-sizing: border-box;
  font-family: var(--btn-title-case-font-family);
  font-weight: var(--btn-title-case-font-weight);
  color: var(--soft-bluesoft-blue-25);
  position: relative;
  width: fit-content;
  font-size: var(--btn-title-case-font-size);
  letter-spacing: var(--btn-title-case-letter-spacing);
  line-height: var(--btn-title-case-line-height);
  white-space: nowrap;
  font-style: var(--btn-title-case-font-style);
}

.starlink-login .sec {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: #fba95b99;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid;
  border-color: #fab890;
  backdrop-filter: blur(3px) brightness(100%);
  -webkit-backdrop-filter: blur(3px) brightness(100%);
}

.starlink-login .button-3 {
  all: unset;
  box-sizing: border-box;
  margin-top: -1.00px;
  font-family: var(--btn-title-case-font-family);
  font-weight: var(--btn-title-case-font-weight);
  color: var(--neutral-colourwhite);
  text-align: center;
  position: relative;
  width: fit-content;
  font-size: var(--btn-title-case-font-size);
  letter-spacing: var(--btn-title-case-letter-spacing);
  line-height: var(--btn-title-case-line-height);
  white-space: nowrap;
  font-style: var(--btn-title-case-font-style);
}

.starlink-login .navbar {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: flex-start;
  justify-content: center;
  padding: 34px 5%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

.starlink-login .logo {
  display: inline-flex;
  align-items: flex-start;
  gap: 40px;
  position: relative;
  flex: 0 0 auto;
}

.starlink-login .main {
  width: 128px;
  position: relative;
  height: 74px;
}

.starlink-login .img {
  width: 180px;
  position: relative;
  height: 74px;
}

@media (max-width: 768px) {
  .starlink-login .heading {
    font-size: 28px;
  }
  .starlink-login .text {
    font-size: 15px;
  }
  .starlink-login .contact-info-default {
    padding: 0px 30px;
    gap: 40px;
  }
  .starlink-login .starlink {
    width: 280px;
    height: 52px;
  }
}

@media (max-width: 480px) {
  .starlink-login .heading {
    font-size: 24px;
  }
  .starlink-login .text {
    font-size: 14px;
  }
  .starlink-login .contact-info-default {
    padding: 0px 20px;
    gap: 30px;
  }
  .starlink-login .starlink {
    width: 220px;
    height: 40px;
  }
}