:root {
  --background-end-rgb: 255, 255, 255;
  --background-start-rgb: 214, 219, 220;
  --border-radius: calc(12rem / var(--font-factor));
  --callout-border-rgb: 172, 175, 176;
  --callout-rgb: 238, 240, 241;
  --card-border-rgb: 131, 134, 135;
  --card-rgb: 180, 185, 188;
  --font-factor: 16;
  --font-inter: 'Inter', sans-serif;
  --foreground-rgb: 0, 0, 0;
  --max-width: calc(1100rem / var(--font-factor));
  --secondary-glow: radial-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
  --tile-border: conic-gradient(#00000080, #00000040, #00000030, #00000020, #00000010, #00000010, #00000080);
  --tile-end-rgb: 228, 232, 233;
  --tile-start-rgb: 239, 245, 249;

  --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono', 'Oxygen Mono', 'Ubuntu Monospace',
    'Source Code Pro', 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
  --primary-glow: conic-gradient(from 180deg at 50% 50%,
      #ff9b1633 0deg,
      #ff750833 55deg,
      #ffc65433 120deg,
      #ff610033 160deg,
      transparent 360deg);
  --primary-color-2: #2f7aac;
  --black-0: #213139;
  --black--1: #485c65;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: calc(1px * var(--font-factor));
}

html,
body {
  max-width: 100vw;
  overflow-x: hidden;
}

body {
  background-color: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb)));
  color: rgb(var(--foreground-rgb));
  font-family: var(--font-inter);
}

a {
  color: inherit;
  text-decoration: none;
}

hr {
  background-color: transparent;
  border: 0;
  border-bottom: calc(1rem / var(--font-factor)) solid #727272;
  height: calc(1rem / var(--font-factor));
  overflow: hidden;
}

.sr-only,
.visually-hidden {
  border: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

.hide {
  display: none !important;
}

.layout {
  align-items: center;
  background-color: transparent;
  background-image: url("/assets/router-bg.webp");
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  width: 100%;
}

.layout .contents {
  background: #fff;
  border-radius: calc(8rem / var(--font-factor));
  box-shadow: calc(0rem / var(--font-factor)) calc(4rem / var(--font-factor)) calc(30rem / var(--font-factor)) rgba(112, 139, 163, 0.2);
  display: flex;
  flex-direction: column;
  gap: calc(16rem / var(--font-factor));
  max-width: 85.15625%;
  padding: calc(28rem / var(--font-factor)) calc(30rem / var(--font-factor));
  width: calc(724rem / var(--font-factor));
}

.layout .contents .image {
  align-self: center;
  height: calc(69rem / var(--font-factor));
  width: calc(293rem / var(--font-factor));
}

.layout .contents .heading {
  color: #213139;
  font-family: var(--font-inter);
  font-size: calc(26rem / var(--font-factor));
  line-height: calc(32rem / var(--font-factor));
  text-align: center;
}

.layout .contents .form {
  align-items: center;
  display: flex;
  flex-direction: column;
}

.layout .contents .form .content {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: calc(24rem / var(--font-factor));
  padding: calc(0rem / var(--font-factor)) calc(12rem / var(--font-factor)) calc(24rem / var(--font-factor)) calc(12rem / var(--font-factor));
}

.layout .contents .form .content .row {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: calc(4rem / var(--font-factor));
}

.layout .contents .form .content .row .small {
  align-self: stretch;
  color: var(--Black-0, #213139);
  font-family: var(--font-inter);
  font-size: calc(16rem / var(--font-factor));
  font-style: normal;
  font-weight: 400;
  line-height: calc(24rem / var(--font-factor));
}

.layout .contents .form .content .box {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: calc(24rem / var(--font-factor));
}

.layout .contents .form .content .checkboxes {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: calc(16rem / var(--font-factor));
}

.layout .contents .form .content .checkboxes .checkbox {
  align-items: center;
  display: flex;
  gap: calc(8rem / var(--font-factor));
}

.layout .contents .form .content .checkboxes .checkbox [type='checkbox'] {
  cursor: pointer;
  opacity: 0;
  position: absolute;
}

.layout .contents .form .content .checkboxes .checkbox [type='checkbox']:focus+img {
  border-radius: calc(4rem / var(--font-factor));
  outline: calc(2rem / var(--font-factor)) solid #000;
  outline-offset: calc(-2rem / var(--font-factor));
}

.layout .contents .form .content .checkboxes .checkbox img {
  cursor: pointer;
  flex-shrink: 0;
}

.layout .contents .form .content .checkboxes .checkbox .text {
  color: #0a0a0a;
  cursor: pointer;
  font-family: var(--font-inter);
  font-size: calc(16rem / var(--font-factor));
  font-style: normal;
  font-weight: 400;
  line-height: calc(24rem / var(--font-factor));
  width: auto;
}

.layout .contents .form .content .checkboxes .checkbox .text .bold {
  font-weight: 700;
}

.form .action {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: calc(24rem / var(--font-factor));
  padding: calc(0rem / var(--font-factor)) calc(12rem / var(--font-factor)) calc(12rem / var(--font-factor)) calc(12rem / var(--font-factor));
  width: 100%;
}

.form .action button {
  width: 100%;
}

.button {
  align-items: center;
  border-radius: calc(4rem / var(--font-factor));
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-inter);
  font-size: calc(18rem / var(--font-factor));
  font-style: normal;
  font-weight: 700;
  height: calc(46rem / var(--font-factor));
  justify-content: center;
  line-height: calc(24rem / var(--font-factor));
  outline: 0;
  text-align: center;
}

.primary {
  background-color: #fdc23c;
  border-color: #fdc23c;
  border-style: solid;
  border-width: calc(3rem / var(--font-factor));
  color: #213139;
  padding: calc(11rem / var(--font-factor)) calc(32rem / var(--font-factor));
}

.primary:hover {
  background-color: #eba417;
  border-color: #eba417;
  border-style: solid;
  border-width: calc(3rem / var(--font-factor));
  color: #213139;
  padding: calc(11rem / var(--font-factor)) calc(32rem / var(--font-factor));
}

.primary:focus {
  background-color: #eba417;
  border-color: #213139;
  border-style: solid;
  border-width: calc(3rem / var(--font-factor));
  color: #213139;
  padding: calc(11rem / var(--font-factor)) calc(32rem / var(--font-factor));
}

.primary.disabled {
  background-color: #beccd2;
  border-color: #beccd2;
  border-style: solid;
  border-width: calc(3rem / var(--font-factor));
  color: #213139;
  cursor: not-allowed;
  padding: calc(11rem / var(--font-factor)) calc(32rem / var(--font-factor));
  pointer-events: all !important;
}

.label {
  color: #0a0a0a;
  display: flex;
  flex-direction: column;
  font-family: var(--font-inter);
  font-size: calc(16rem / var(--font-factor));
  font-weight: 700;
  gap: calc(2rem / var(--font-factor));
  line-height: calc(24rem / var(--font-factor));
}

.width-100-percent {
  width: 100%;
}

.label.error {
  color: #b42127;
}

.label.inline {
  align-items: center;
  flex-direction: row;
  font-size: calc(18rem / var(--font-factor));
  font-weight: 400;
  gap: calc(16rem / var(--font-factor));
  text-wrap: nowrap;
  width: auto;
}

.label .info {
  align-items: center;
  align-self: stretch;
  display: flex;
  gap: calc(2rem / var(--font-factor));
}

.group {
  align-items: center;
  align-self: flex-start;
  cursor: pointer;
  display: flex;
  height: calc(16rem / var(--font-factor));
  justify-content: center;
  padding: calc(1.906rem / var(--font-factor)) calc(2rem / var(--font-factor)) calc(2.094rem / var(--font-factor)) calc(2rem / var(--font-factor));
  width: calc(16rem / var(--font-factor));
}

.input {
  background-color: #fff;
  border: calc(1rem / var(--font-factor)) solid #677981;
  border-radius: calc(4rem / var(--font-factor));
  box-sizing: border-box;
  color: #213139;
  font-family: var(--font-inter);
  font-size: calc(20rem / var(--font-factor));
  height: calc(44rem / var(--font-factor));
  line-height: calc(24rem / var(--font-factor));
  outline: 0;
  padding: calc(13rem / var(--font-factor)) calc(16rem / var(--font-factor));
  width: 100%;
}

.input:disabled {
  background-color: #e9ecef;
}

.label .block {
  align-items: center;
  align-self: stretch;
  background: #fff;
  border: calc(1rem / var(--font-factor)) solid #677981;
  border-radius: calc(4rem / var(--font-factor));
  display: flex;
  gap: calc(16rem / var(--font-factor));
}

.label .block:focus-within {
  border: calc(3rem / var(--font-factor)) solid #213139;
}

.label .block .input {
  border: transparent;
  border-radius: inherit;
  padding: calc(13rem / var(--font-factor)) calc(0rem / var(--font-factor)) calc(13rem / var(--font-factor)) calc(16rem / var(--font-factor));
  width: 100%;
}

.label .block .input:focus-within {
  padding: calc(11rem / var(--font-factor)) calc(0rem / var(--font-factor)) calc(11rem / var(--font-factor)) calc(14rem / var(--font-factor));
}

.input::placeholder {
  color: #677981;
  font-family: var(--font-inter);
  font-size: calc(20rem / var(--font-factor));
  line-height: calc(24rem / var(--font-factor));
}

.input.error {
  border: calc(3rem / var(--font-factor)) solid #b42127;
  color: #213139;
  padding: calc(11rem / var(--font-factor)) calc(14rem / var(--font-factor));
}

.input:focus {
  border: calc(3rem / var(--font-factor)) solid #213139;
  padding: calc(11rem / var(--font-factor)) calc(14rem / var(--font-factor));
}

.error-message {
  background-image: url("/assets/error.svg");
  background-position: center left;
  background-repeat: no-repeat;
  background-size: calc(12rem / var(--font-factor)) calc(12rem / var(--font-factor));
  color: #b42127;
  font-family: var(--font-inter);
  font-size: calc(16rem / var(--font-factor));
  font-weight: 400;
  line-height: calc(24rem / var(--font-factor));
  padding-left: calc(18rem / var(--font-factor));
}

.error-message-custom-width {}

.adjust-top {
  position: relative;
  top: calc(-18rem / var(--font-factor));
}

.error {
  align-items: center;
  background: #fff;
  border-radius: calc(8rem / var(--font-factor));
  box-shadow: calc(0rem / var(--font-factor)) calc(1rem / var(--font-factor)) calc(8rem / var(--font-factor)) calc(0rem / var(--font-factor)) rgba(112, 139, 163, 0.2);
  display: flex;
  outline: calc(1rem / var(--font-factor)) solid #cfcfcf;
  overflow: hidden;
  position: fixed;
  right: calc(10rem / var(--font-factor));
  top: calc(10rem / var(--font-factor));
  width: calc(576rem / var(--font-factor));
  z-index: 1600;
}

.error:focus {
  outline: calc(3rem / var(--font-factor)) solid var(--Black-0, #213139);
}

.error .icon {
  align-items: center;
  align-self: stretch;
  background: #f2cecf;
  display: flex;
  gap: calc(8rem / var(--font-factor));
  padding: calc(16rem / var(--font-factor)) calc(8rem / var(--font-factor));
}

.error .icon .circle {
  align-items: center;
  display: flex;
  height: calc(32rem / var(--font-factor));
  justify-content: center;
  width: calc(32rem / var(--font-factor));
}

.error .icon .circle .img {
  flex-shrink: 0;
}

.error .body {
  align-items: flex-start;
  border-bottom: calc(1rem / var(--font-factor)) solid var(--Black--3, #94a3a9);
  border-right: calc(1rem / var(--font-factor)) solid var(--Black--3, #94a3a9);
  border-top: calc(1rem / var(--font-factor)) solid var(--Black--3, #94a3a9);
  display: flex;
  flex: 1 0 0;
  justify-content: space-between;
  padding: calc(16rem / var(--font-factor));
}

.error .body .message {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: calc(4rem / var(--font-factor));
}

.error .body .message .title {
  color: #b42127;
  font-family: var(--font-inter);
  font-size: calc(18rem / var(--font-factor));
  font-style: normal;
  font-weight: 700;
  line-height: calc(24rem / var(--font-factor));
}

.error .body .message .desciption {
  color: #213139;
  font-family: var(--font-inter);
  font-size: calc(16rem / var(--font-factor));
  font-style: normal;
  font-weight: 400;
  line-height: calc(24rem / var(--font-factor));
  overflow-wrap: anywhere;
}

.error .body .button {
  align-items: center;
  background-color: transparent;
  border: 0;
  cursor: pointer;
  display: flex;
  height: calc(18rem / var(--font-factor));
  justify-content: center;
  padding: calc(1rem / var(--font-factor)) calc(0rem / var(--font-factor)) calc(0rem / var(--font-factor)) calc(1rem / var(--font-factor));
  width: calc(18rem / var(--font-factor));
}

.error .body .button .img {
  flex-shrink: 0;
}

@media (max-width: 1279px) {
  .label {
    font-size: calc(16rem / var(--font-factor));
  }

  .label.inline {
    font-size: calc(16rem / var(--font-factor));
  }

  .input {
    font-size: calc(18rem / var(--font-factor));
  }

  .input::placeholder {
    font-size: calc(18rem / var(--font-factor));
  }

  .error-message {
    font-size: calc(16rem / var(--font-factor));
  }

  .error-message-custom-width {}

  .button {
    height: calc(48rem / var(--font-factor));
    padding: calc(12rem / var(--font-factor)) calc(32rem / var(--font-factor));
  }

  .error .icon {
    padding: calc(8rem / var(--font-factor));
  }

  .error .body {
    border-bottom: none;
    border-right: none;
    border-top: none;
    padding: calc(8rem / var(--font-factor));
  }

  .error .body .message .title {
    font-size: calc(16rem / var(--font-factor));
  }

  .error .body .message .desciption {
    font-size: calc(14rem / var(--font-factor));
    line-height: calc(20rem / var(--font-factor));
  }
}

@media (max-width: 600px) {
  .layout .contents .heading {
    font-size: calc(20.33rem / var(--font-factor));
  }

  .layout .contents .image {
    height: calc(51rem / var(--font-factor));
    width: calc(216rem / var(--font-factor));
  }

  .layout .contents .form .content .checkboxes .checkbox .text {
    white-space: wrap;
  }

  .error {
    align-self: stretch;
    left: calc(10rem / var(--font-factor));
    right: calc(10rem / var(--font-factor));
    width: auto;
  }

  .error .icon {
    padding: calc(8rem / var(--font-factor));
  }

  .error .icon .circle {
    align-items: center;
    display: flex;
    height: calc(32rem / var(--font-factor));
    justify-content: center;
    width: calc(32rem / var(--font-factor));
  }

  .error .icon .circle .img {
    flex-shrink: 0;
  }

  .error .body {
    border-bottom: none;
    border-right: none;
    border-top: none;
    padding: calc(8rem / var(--font-factor));
  }

  .error .body .message .title {
    font-size: calc(16rem / var(--font-factor));
  }

  .error .body .message .desciption {
    font-size: calc(14rem / var(--font-factor));
    line-height: calc(18rem / var(--font-factor));
    width: 100%;
  }

  .label {
    font-size: calc(16rem / var(--font-factor));
  }

  .input {
    font-size: calc(16rem / var(--font-factor));
  }

  .input::placeholder {
    font-size: calc(16rem / var(--font-factor));
  }

  .error-message {
    font-size: calc(14rem / var(--font-factor));
  }

  .error-message-custom-width {}

  .button {
    font-size: calc(16rem / var(--font-factor));
  }
}

@media (min-width: 1920px) {
  .error-message-custom-width {
    max-width: 17vw;
  }
}