/* GORP WEBMAIL LOGIN V3 */

html,
body.task-login {
  width: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.task-login {
  overflow: hidden !important;
  color: #556172 !important;
  background: #ffffff !important;
  font-family: Tahoma, "Segoe UI", Arial, sans-serif !important;
  -webkit-text-size-adjust: 100%;
}

body.task-login *,
body.task-login *::before,
body.task-login *::after {
  box-sizing: border-box;
}

body.task-login #layout,
body.task-login #layout-content {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  display: block !important;
  width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #ffffff !important;
  transform: none !important;
}

body.task-login #layout-content::before,
body.task-login #layout-content::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

body.task-login #layout-menu,
body.task-login #login-footer,
body.task-login #supportlink,
body.task-login .footer {
  display: none !important;
}

body.task-login .gorp-login-page {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 62.5%) minmax(390px, 37.5%) !important;
  width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  direction: ltr !important;
  background: #ffffff !important;
}

body.task-login .gorp-login-hero {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background-color: #dce6f1 !important;
  background-image: url("../images/gorp-login-left-hero.png") !important;
  background-repeat: no-repeat !important;
  background-position: center bottom !important;
  background-size: cover !important;
}

body.task-login .gorp-login-panel {
  position: relative !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: clamp(42px, 6.5vh, 68px) clamp(28px, 3.5vw, 58px) 34px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  direction: rtl !important;
  background: radial-gradient(circle at 75% 8%, rgba(225, 235, 246, 0.45), transparent 32%), linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%) !important;
}

body.task-login .gorp-login-card {
  position: static !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 410px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  text-align: center !important;
  transform: none !important;
}

body.task-login .gorp-login-brand {
  position: static !important;
  display: block !important;
  width: 100% !important;
  margin: 0 auto clamp(64px, 9vh, 94px) !important;
  padding: 0 !important;
  transform: none !important;
}

body.task-login #gorp-login-logo {
  position: static !important;
  display: block !important;
  width: clamp(225px, 17vw, 275px) !important;
  max-width: 82% !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  filter: none !important;
  transform: none !important;
}

body.task-login .gorp-login-title {
  position: static !important;
  display: grid !important;
  grid-template-columns: minmax(24px, 34px) minmax(0, auto) minmax(24px, 34px) !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 15px !important;
  width: 100% !important;
  margin: 0 0 31px !important;
  padding: 0 !important;
  direction: ltr !important;
  transform: none !important;
}

body.task-login .gorp-login-title span {
  display: block !important;
  width: 100% !important;
  height: 1px !important;
  background: #bcc4ce !important;
}

body.task-login .gorp-login-title strong {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #596475 !important;
  font-size: clamp(16px, 1.15vw, 19px) !important;
  font-weight: 600 !important;
  line-height: 1.8 !important;
  white-space: nowrap !important;
  direction: rtl !important;
}

body.task-login #login-form {
  position: static !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: none !important;
}

body.task-login #login-form.gorp-login-ready,
body.task-login #login-form.gorp-login-fallback {
  opacity: 1 !important;
  visibility: visible !important;
}

body.task-login #login-form.gorp-login-fallback table {
  width: 100% !important;
}

body.task-login .gorp-field {
  position: relative !important;
  display: grid !important;
  align-items: center !important;
  width: 100% !important;
  height: 61px !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  overflow: hidden !important;
  direction: ltr !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid #c6ced8 !important;
  border-radius: 11px !important;
  box-shadow: none !important;
  transform: none !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease !important;
}

body.task-login .gorp-user-field {
  grid-template-columns: 54px minmax(0, 1fr) !important;
}

body.task-login .gorp-password-field {
  grid-template-columns: 54px minmax(0, 1fr) 54px !important;
}

body.task-login .gorp-field:focus-within {
  background: #ffffff !important;
  border-color: #246bb2 !important;
  box-shadow: 0 0 0 3px rgba(36, 107, 178, 0.11) !important;
}

body.task-login .gorp-field-icon,
body.task-login .gorp-password-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 54px !important;
  height: 59px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #687384 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}

body.task-login .gorp-field-icon {
  pointer-events: none !important;
}

body.task-login .gorp-field-icon svg,
body.task-login .gorp-password-toggle svg {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

body.task-login #login-form .gorp-login-input {
  all: unset !important;
  display: block !important;
  width: 100% !important;
  height: 59px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 17px !important;
  color: #414b59 !important;
  background: transparent !important;
  font-family: Tahoma, "Segoe UI", Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 59px !important;
  text-align: right !important;
  direction: rtl !important;
  box-sizing: border-box !important;
  appearance: none !important;
}

body.task-login #login-form .gorp-login-input::placeholder {
  color: #949daa !important;
  opacity: 1 !important;
}

body.task-login #login-form .gorp-login-input::-ms-reveal,
body.task-login #login-form .gorp-login-input::-ms-clear {
  display: none !important;
}

body.task-login .gorp-password-toggle {
  cursor: pointer !important;
  outline: 0 !important;
  transition: color 0.16s ease, background-color 0.16s ease !important;
}

body.task-login .gorp-password-toggle:hover,
body.task-login .gorp-password-toggle:focus-visible,
body.task-login .gorp-password-toggle.is-visible {
  color: #1b62a8 !important;
  background: rgba(27, 98, 168, 0.06) !important;
}

body.task-login #login-form .gorp-login-submit {
  all: unset !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 58px !important;
  margin: 9px 0 0 !important;
  padding: 0 20px !important;
  color: #ffffff !important;
  background: linear-gradient(180deg, #246fbd 0%, #14589d 100%) !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: 0 9px 21px rgba(19, 82, 145, 0.23) !important;
  font-family: Tahoma, "Segoe UI", Arial, sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: center !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease !important;
}

body.task-login #login-form .gorp-login-submit:hover,
body.task-login #login-form .gorp-login-submit:focus-visible {
  filter: brightness(1.04) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 11px 25px rgba(19, 82, 145, 0.28) !important;
}

body.task-login .gorp-forgot-password {
  position: static !important;
  display: inline-block !important;
  margin: 23px auto 0 !important;
  padding: 2px 1px !important;
  color: #405f7c !important;
  border-bottom: 1px dotted #405f7c !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.7 !important;
  text-decoration: none !important;
  transform: none !important;
}

body.task-login .gorp-forgot-password:hover,
body.task-login .gorp-forgot-password:focus-visible {
  color: #15599e !important;
  border-bottom-color: #15599e !important;
}

body.task-login .gorp-language {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-width: 118px !important;
  height: 43px !important;
  margin: 47px auto 0 !important;
  padding: 0 13px !important;
  color: #596474 !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid #d0d6de !important;
  border-radius: 23px !important;
  font-size: 14px !important;
  line-height: 1 !important;
  transform: none !important;
}

body.task-login .gorp-globe {
  position: relative !important;
  display: block !important;
  width: 19px !important;
  height: 19px !important;
  border: 1.7px solid currentColor !important;
  border-radius: 50% !important;
}

body.task-login .gorp-globe::before,
body.task-login .gorp-globe::after {
  position: absolute !important;
  content: "" !important;
  border-color: currentColor !important;
}

body.task-login .gorp-globe::before {
  top: 50% !important;
  left: 2px !important;
  width: 13px !important;
  height: 0 !important;
  border-top: 1.4px solid currentColor !important;
  transform: translateY(-50%) !important;
}

body.task-login .gorp-globe::after {
  top: 2px !important;
  left: 5px !important;
  width: 7px !important;
  height: 13px !important;
  border-right: 1.4px solid currentColor !important;
  border-left: 1.4px solid currentColor !important;
  border-radius: 50% !important;
}

body.task-login .gorp-chevron {
  font-size: 16px !important;
  line-height: 1 !important;
}

@media (max-width: 1150px) {
  body.task-login .gorp-login-page {
    grid-template-columns: minmax(0, 56%) minmax(390px, 44%) !important;
  }

  body.task-login .gorp-login-panel {
    padding-right: 28px !important;
    padding-left: 28px !important;
  }

  body.task-login .gorp-login-brand {
    margin-bottom: clamp(52px, 7.5vh, 78px) !important;
  }
}

@media (max-width: 820px) {
  body.task-login {
    overflow: auto !important;
  }

  body.task-login #layout,
  body.task-login #layout-content {
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  body.task-login .gorp-login-page {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  body.task-login .gorp-login-hero {
    flex: 0 0 auto !important;
    width: 100% !important;
    height: clamp(205px, 40vw, 325px) !important;
    min-height: 0 !important;
    background-size: cover !important;
  }

  body.task-login .gorp-login-panel {
    flex: 1 0 auto !important;
    height: auto !important;
    min-height: calc(100dvh - 205px) !important;
    padding: 32px 24px 38px !important;
    overflow: visible !important;
  }

  body.task-login .gorp-login-card {
    max-width: 430px !important;
  }

  body.task-login .gorp-login-brand {
    margin-bottom: 42px !important;
  }

  body.task-login #gorp-login-logo {
    width: 245px !important;
    max-width: 76% !important;
  }

  body.task-login .gorp-language {
    margin-top: 39px !important;
  }
}

@media (max-width: 520px) {
  body.task-login .gorp-login-hero {
    height: 182px !important;
  }

  body.task-login .gorp-login-panel {
    min-height: calc(100dvh - 182px) !important;
    padding: 27px 18px 34px !important;
  }

  body.task-login .gorp-login-brand {
    margin-bottom: 34px !important;
  }

  body.task-login #gorp-login-logo {
    width: 220px !important;
  }

  body.task-login .gorp-login-title {
    grid-template-columns: 22px minmax(0, auto) 22px !important;
    gap: 10px !important;
    margin-bottom: 25px !important;
  }

  body.task-login .gorp-login-title strong {
    font-size: 15px !important;
    white-space: normal !important;
  }

  body.task-login .gorp-field {
    height: 57px !important;
    margin-bottom: 15px !important;
    border-radius: 10px !important;
  }

  body.task-login .gorp-user-field {
    grid-template-columns: 50px minmax(0, 1fr) !important;
  }

  body.task-login .gorp-password-field {
    grid-template-columns: 50px minmax(0, 1fr) 50px !important;
  }

  body.task-login .gorp-field-icon,
  body.task-login .gorp-password-toggle {
    width: 50px !important;
    height: 55px !important;
  }

  body.task-login #login-form .gorp-login-input {
    height: 55px !important;
    padding: 0 14px !important;
    font-size: 15px !important;
    line-height: 55px !important;
  }

  body.task-login #login-form .gorp-login-submit {
    height: 55px !important;
    margin-top: 8px !important;
    font-size: 17px !important;
  }

  body.task-login .gorp-forgot-password {
    margin-top: 20px !important;
    font-size: 14px !important;
  }

  body.task-login .gorp-language {
    margin-top: 34px !important;
  }
}

@media (max-height: 650px) and (orientation: landscape) and (max-width: 950px) {
  body.task-login .gorp-login-hero {
    display: none !important;
  }

  body.task-login .gorp-login-panel {
    min-height: 100dvh !important;
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }

  body.task-login .gorp-login-brand {
    margin-bottom: 24px !important;
  }

  body.task-login #gorp-login-logo {
    width: 195px !important;
  }

  body.task-login .gorp-login-title {
    margin-bottom: 18px !important;
  }

  body.task-login .gorp-field {
    height: 53px !important;
    margin-bottom: 12px !important;
  }

  body.task-login .gorp-field-icon,
  body.task-login .gorp-password-toggle,
  body.task-login #login-form .gorp-login-input {
    height: 51px !important;
  }

  body.task-login #login-form .gorp-login-input {
    line-height: 51px !important;
  }

  body.task-login #login-form .gorp-login-submit {
    height: 51px !important;
    margin-top: 6px !important;
  }

  body.task-login .gorp-forgot-password {
    margin-top: 15px !important;
  }

  body.task-login .gorp-language {
    margin-top: 22px !important;
  }
}