:root {
  --eurol-navy: #112c63;
  --eurol-navy-dark: #07152f;
  --eurol-teal: #2bbfbd;
  --eurol-teal-dark: #1a9896;
  --eurol-red: #d82424;
}

* {
  box-sizing: border-box;
}

[ng\:cloak],
[ng-cloak],
.ng-cloak {
  display: none !important;
}

html,
body.eurol-login-page {
  min-height: 100%;
}

body.eurol-login-page {
  align-items: center;
  background: var(--eurol-navy-dark) url('../img/chip-ganassi-header-2-website.webp') center center / cover fixed no-repeat;
  color: #263b40;
  display: flex;
  font-family: "Helvetica Neue", Arial, sans-serif;
  justify-content: center;
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  padding: 28px;
  position: relative;
}

body.eurol-login-page::before {
  background: linear-gradient(105deg, rgba(5, 18, 45, .92) 0%, rgba(17, 44, 99, .76) 45%, rgba(8, 26, 59, .58) 100%);
  content: "";
  inset: 0;
  position: fixed;
}

body.eurol-login-page::after {
  background: radial-gradient(circle at 78% 18%, rgba(43, 191, 189, .28), transparent 34%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: fixed;
}

.eurol-login-shell {
  display: grid;
  grid-template-columns: minmax(300px, 1.08fr) minmax(340px, .92fr);
  max-width: 990px;
  min-height: 565px;
  position: relative;
  width: 100%;
  z-index: 1;
}

.eurol-login-story {
  align-items: flex-end;
  color: #fff;
  display: flex;
  padding: 52px 56px;
  position: relative;
}

.eurol-login-story::before {
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 20px 0 0 20px;
  content: "";
  inset: 0;
  position: absolute;
}

.eurol-login-story-content {
  max-width: 430px;
  position: relative;
}

.eurol-login-story-mark {
  align-items: center;
  background: rgba(43, 191, 189, .18);
  border: 1px solid rgba(76, 220, 217, .48);
  border-radius: 12px;
  display: inline-flex;
  font-size: 20px;
  height: 50px;
  justify-content: center;
  margin-bottom: 22px;
  width: 50px;
}

.eurol-login-eyebrow {
  color: #8ce4e2;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  margin: 0 0 8px;
}

.eurol-login-story h1 {
  font-size: 38px;
  font-weight: 700;
  line-height: 1.12;
  margin: 0 0 16px;
}

.eurol-login-story p:last-child {
  color: rgba(255, 255, 255, .77);
  font-size: 15px;
  line-height: 1.65;
  margin: 0;
}

.eurol-login-panel {
  align-items: center;
  background: rgba(255, 255, 255, .97);
  border-radius: 0 20px 20px 0;
  box-shadow: 0 30px 85px rgba(0, 0, 0, .34);
  display: flex;
  padding: 52px 50px;
}

.eurol-login-form-wrap {
  margin: auto;
  max-width: 360px;
  width: 100%;
}

.eurol-login-logo {
  display: block;
  height: 112px;
  margin: 0 auto 22px;
  object-fit: contain;
  width: 160px;
}

.eurol-login-heading {
  margin-bottom: 28px;
  text-align: center;
}

.eurol-login-heading h2 {
  color: var(--eurol-navy);
  font-size: 27px;
  font-weight: 800;
  margin: 0 0 7px;
}

.eurol-login-heading p {
  color: #7a898d;
  margin: 0;
}

.eurol-field {
  margin-bottom: 18px;
}

.eurol-field label {
  color: #42575c;
  display: block;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 7px;
}

.eurol-field-control {
  position: relative;
}

.eurol-field-control .fa {
  color: #7d9296;
  left: 15px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.eurol-field-control .form-control {
  background: #f8fafb;
  border: 1px solid #d5dfe2;
  border-radius: 10px;
  box-shadow: none;
  color: #24383d;
  height: 49px;
  padding: 12px 14px 12px 43px;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.eurol-field-control .form-control:focus {
  background: #fff;
  border-color: var(--eurol-teal);
  box-shadow: 0 0 0 3px rgba(43, 191, 189, .14);
}

.eurol-login-submit {
  background: var(--eurol-teal);
  border: 0;
  border-radius: 10px;
  box-shadow: 0 9px 20px rgba(43, 191, 189, .24);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  height: 49px;
  margin-top: 6px;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.eurol-login-submit:hover,
.eurol-login-submit:focus {
  background: var(--eurol-teal-dark);
  box-shadow: 0 11px 24px rgba(43, 191, 189, .3);
  color: #fff;
  transform: translateY(-1px);
}

.eurol-login-submit[disabled] {
  background: #9ac9c8;
  box-shadow: none;
}

.eurol-login-error {
  align-items: flex-start;
  background: #fff1f1;
  border: 1px solid #f2cdcd;
  border-left: 4px solid var(--eurol-red);
  border-radius: 8px;
  color: #9d2b2b;
  display: flex;
  gap: 9px;
  margin-top: 18px;
  padding: 11px 12px;
}

.eurol-login-footnote {
  color: #93a0a3;
  font-size: 11px;
  margin: 25px 0 0;
  text-align: center;
}

@media (max-width: 820px) {
  body.eurol-login-page {
    padding: 18px;
  }

  .eurol-login-shell {
    display: block;
    max-width: 455px;
    min-height: 0;
  }

  .eurol-login-story {
    border-radius: 18px 18px 0 0;
    min-height: 205px;
    padding: 30px;
  }

  .eurol-login-story::before {
    border-radius: 18px 18px 0 0;
  }

  .eurol-login-story-mark {
    display: none;
  }

  .eurol-login-story h1 {
    font-size: 27px;
  }

  .eurol-login-story p:last-child {
    display: none;
  }

  .eurol-login-panel {
    border-radius: 0 0 18px 18px;
    padding: 36px 28px;
  }

  .eurol-login-logo {
    height: 88px;
    width: 130px;
  }
}

@media (max-height: 680px) and (min-width: 821px) {
  .eurol-login-shell {
    min-height: 520px;
  }
}