@font-face {
    font-display:swap;
    font-family:"Helvetica Neue";
    font-style:normal;font-weight:300;src:url(../fonts/HelveticaNeue-Light.woff2) format("woff2")
}
@font-face {
    font-display:swap;
    font-family:"Helvetica Neue";
    font-style:normal;
    font-weight:400;
    src:url(../fonts/HelveticaNeue-Roman.woff2) format("woff2")
}
@font-face {
    font-display:swap;
    font-family:"Helvetica Neue";
    font-style:normal;font-weight:700;
    src:url(../fonts/HelveticaNeue-Bold.woff2) format("woff2")
}

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

.login-page {
    display: flex;
    width: 100vw;
    min-height: 100vh;
    padding-bottom: 205px;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    position: relative;
    background-color: #eee;
    font-family: "Helvetica Neue", sans-serif;
}

/* Header strip */
.header-strip {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    height: 50px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background-color: #000;
}

.header-container {
    display: flex;
    max-width: 1100px;
    width: 100%;
    padding-right: 10px;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.logo-container {
    display: flex;
    width: 50px;
    height: 50px;
    padding: 10px;
    justify-content: center;
    align-items: center;
}

.orange-logo-svg {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}

/* Language selector */
.language-selector {
    display: flex;
    width: 81px;
    height: 30px;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 15px;
}

.language-option {
    display: flex;
    height: 28px;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    text-decoration: none;
}

.language-option.active {
    border-bottom: 4px solid #ff7900;
}

.language-option .language-label {
    display: flex;
    height: 18px;
    padding: 2px 0;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: #fff;
    font: 700 16px/16px "Helvetica Neue", sans-serif;
}

.language-option.active .language-label {
    color: #ff7900;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.header-back-button {
    display: flex;
    padding: 3px 10px;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    background: none;
    border: none;
    color: white;
}

.header-back-button:hover {
    opacity: 0.8;
}

.header-back-button:focus {
    outline: 2px solid #ff7900;
    outline-offset: 2px;
}

.login-container {
    display: flex;
    width: 568px;
    flex-direction: column;
    align-items: center;
    margin-top: 50px;
    height: 656px;
}

@media (max-width: 991px) {
    .login-container {
        max-width: 360px;
    }
}

.login-header {
    display: flex;
    padding: 36px 14px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.header-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    width: 100%;
}

.brand-section {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 1 0 0;
}

.brand-logo {
    display: flex;
    width: 50px;
    height: 50px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

@media (max-width: 640px) {
    .brand-logo {
        display: none;
    }
}

.brand-text {
    display: flex;
    padding-top: 12px;
    align-items: flex-start;
    gap: 10px;
    flex: 1 0 0;
}

.page-title {
    flex: 1 0 0;
    color: #000;
    font: 400 42px/43px "Helvetica Neue", sans-serif;
}

@media (max-width: 640px) {
    .page-title {
        line-height: 43.32px;
        font: 400 42px / 43px "Helvetica Neue", sans-serif;
    }
}

.login-form-section {
    display: flex;
    padding: 0 14px;
    flex-direction: column;
    align-items: center;
    width: 100%;
    border-radius: 14px;
    box-shadow: 0 4px 47.3px 0 rgba(0, 0, 0, 0.1);
    background-color: #fff;
}

.login-tabs {
    display: flex;
    height: 58px;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    border-bottom: 1px solid #e6e6e6;
    background-color: #fff;
}

.tab-item {
    display: flex;
    padding: 0 14px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    flex: 1 0 0;
    height: 100%;
    cursor: pointer;
}

.tab-content {
    display: flex;
    height: 54px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.tab-title {
    display: flex;
    height: 24px;
    flex-direction: column;
    justify-content: center;
    flex: 1 0 0;
    color: #000;
    text-align: center;
    font: 400 16px/16px "Helvetica Neue", sans-serif;
}

.tab-item.active .tab-title {
    font-weight: 700;
}

.tab-indicator {
    height: 4px;
    width: 100%;
}

.tab-indicator.active {
    background-color: #ff7900;
}

.form-content {
    display: flex;
    min-height: 448px;
    padding: 14px 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.form-body {
    display: flex;
    min-height: 348px;
    padding: 20px 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

@media (max-width: 991px) {
    .form-body {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .form-body {
        padding: 15px 0;
    }
}

.login-form {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 16px;
}

.input-group {
    display: flex;
    width: 334px;
    flex-direction: column;
    align-items: flex-start;
}

@media (max-width: 991px) {
    .input-group {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .input-group {
        width: 100%;
    }
}

.input-label-container {
    display: flex;
    padding: 8px 0;
    align-items: flex-end;
    gap: 10px;
    width: 100%;
}

.input-label {
    display: flex;
    height: 16px;
    flex-direction: column;
    justify-content: center;
    flex: 1 0 0;
    color: #000;
    font: 700 16px/19px "Helvetica Neue", sans-serif;
}

.input-container {
    width: 334px;
    height: 48px;
    position: relative;
}

@media (max-width: 991px) {
    .input-container {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .input-container {
        width: 100%;
    }
}

.form-input {
    width: 100%;
    height: 48px;
    padding: 0 24px;
    border-radius: 4px;
    border: 1px solid #948f8f;
    background: transparent;
    color: #000;
    font: 700 18px/43px "Helvetica Neue", sans-serif;
}

.form-input::placeholder {
    color: #929292;
}

.form-input-error {
  border-color: #FF0000;
}

.form-label {
	height: 16px;
	color: #000;
    font: 700 16px/19px "Helvetica Neue", sans-serif;
}

.form-actions {
    /*display: flex;*/
    width: 334px;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

@media (max-width: 991px) {
    .form-actions {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .form-actions {
        width: 100%;
    }
}

.checkbox-section {
    display: flex;
    height: 21px;
    padding-right: 175px;
    align-items: center;
    width: 100%;
}

.checkbox-container {
    display: flex;
    width: 159px;
    height: 22px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 6px;
}

.checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    position: relative;
}

.checkbox-input {
    position: absolute;
    opacity: 0;
    width: 18px;
    height: 20px;
    cursor: pointer;
}

.checkbox-icon {
    width: 18px;
    height: 20px;
    pointer-events: none;
}

.checkbox-label {
    display: flex;
    height: 15px;
    flex-direction: column;
    justify-content: center;
    flex: 1 0 0;
    overflow: hidden;
    color: #000;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: -0.1px;
    font: 400 12px/18px "Helvetica Neue", sans-serif;
    cursor: pointer;
}

.login-button {
    display: flex;
    padding: 2px 14px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
    border-radius: 6px;
    background-color: #aaa;
    border: none;
    cursor: not-allowed;
    margin-top: 6px;
}

.login-button:not(:disabled) {
    background-color: #ff7900;
    cursor: pointer;
}

.login-button span,
.login-button {
    display: flex;
    height: 44px;
    flex-direction: column;
    justify-content: center;
    flex: 1 0 0;
    color: #fff;
    text-align: center;
    font: 700 16px/19px "Helvetica Neue", sans-serif;
}

.login-invert {
    display: flex;
    padding: 2px 14px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
    border-radius: 6px;
	border: 1px solid #000;
	background: linear-gradient(0deg, #FFF 0%, #FFF 100%), #F16E00;
    margin-top: 6px;
    cursor: pointer;
    height: 44px;
}

.login-invert span,
.login-invert {
    display: flex;
    height: 44px;
    flex-direction: column;
    justify-content: center;
    flex: 1 0 0;
    color: #000;
    text-align: center;
    font: 700 16px/19px "Helvetica Neue", sans-serif;
}

.help-links {
    display: flex;
    width: 334px;
    flex-direction: column;
    align-items: flex-start;
}

@media (max-width: 991px) {
    .help-links {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .help-links {
        width: 100%;
    }
}

.help-link {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    flex: 1 0 0;
    color: #000;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
    font: 400 14px/150% "Helvetica Neue", sans-serif;
	padding-bottom: 12px;
}

.tip-section {
    display: flex;
    min-height: 64px;
    padding: 7px 16px;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    background-color: #f7f7f7;
    text-align: center;
}

.tip-container {
    display: flex;
    max-width: 334px;
    padding: 8px 0;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
}

.tip-content {
    display: flex;
    align-items: flex-start;
    width: 100%;
}

.tip-text {
    flex: 1 0 0;
    color: #000;
    font: 400 16px/24px "Helvetica Neue", sans-serif;
}

.tip-label {
    font-weight: 700;
}

.tip-ul {
	margin-top:10px;
	font-weight:400;
	line-height:22px;
	font-size: 14px;
	text-align: left;
	padding: 0 14px 0 14px;
}

.error-message {
    display: flex;
    width: 540px;
    flex-direction: column;
    align-items: flex-start;
}

@media (max-width: 991px) {
    .error-message {
        width: 100%;
    }
}

.alert-container {
    display: flex;
    padding: 20px;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.03);
    background: linear-gradient(0deg, rgba(205, 60, 20, 0.1) 0%, rgba(205, 60, 20, 0.1) 100%), #fff;
}

.alert-content {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 1;
    max-width: 332px;
}

.alert-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
}

.error-title {
    width: 100%;
    color: #000;
    font: 700 18px/18px "Helvetica Neue", -apple-system, Roboto, Helvetica, sans-serif;
    margin: 0;
}

@media (max-width: 640px) {
    #orange-logo {
        display: none;
    }
}

.password-toggle {
  position: absolute;
  right: 19px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.password-toggle-icon {
  aspect-ratio: 1;
  object-fit: contain;
  object-position: center;
  width: 20px;
}

/* checkbox */
.control {
	font-family: arial;
	display: block;
	position: relative;
	padding-left: 30px;
	margin-bottom: 5px;
	padding-top: 3px;
	cursor: pointer;
	font-size: 15px;
}
.control input {
	position: absolute;
	z-index: -1;
	opacity: 0;
}
.control_indicator {
	position: absolute;
	top: 2px;
	left: 0;
	height: 20px;
	width: 20px;
	border: 1px solid #686868;
	border-radius: 5px;
}
.control:hover input ~ .control_indicator,
.control input:focus ~ .control_indicator {
	background: #cccccc;
	}
        
.control input:checked ~ .control_indicator {
	background: #FF7900;
}
.control:hover input:not([disabled]):checked ~ .control_indicator,
.control input:checked:focus ~ .control_indicator {
	background: #0e6647d;
}
.control input:disabled ~ .control_indicator {
	background: #e6e6e6;
	opacity: 0.6;
	pointer-events: none;
}
.control_indicator:after {
	box-sizing: unset;
	content: '';
	position: absolute;
	display: none;
}
.control input:checked ~ .control_indicator:after {
	display: block;
}
.control-checkbox .control_indicator:after {
	left: 6px;
	top: 2px;
	width: 4px;
	height: 10px;
	border: solid #ffffff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.control-checkbox input:disabled ~ .control_indicator:after {
	border-color: #7b7b7b;
}
.control-checkbox .control_indicator::before {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 4.5rem;
	height: 4.5rem;
	margin-left: -1.3rem;
	margin-top: -1.3rem;
	background: #2aa1c0;
	border-radius: 3rem;
	opacity: 0.6;
	z-index: 99999;
	transform: scale(0);
}

/* Background pattern section */
.background-pattern {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    background: linear-gradient(0deg, #393939 0%, #121212 100%);
    position: absolute;
    left: 0px;
    top: 50px;
    height: 308px;
    z-index: -1;
}

.pattern-container {
    display: flex;
    width: 100%;
    height: 533px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    position: absolute;
    left: 0px;
    top: -129px;
    max-width: 1920px;
}

.pattern-svg {
    width: 100%;
    height: 308px;
    flex-shrink: 0;
    max-width: 1920px;
}

/*  IDENTITIES  */

/* Window content */
.window-content {
    display: flex;
    padding: 0 14px;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    border-radius: 14px;
    box-shadow: 0 4px 47.3px 0 rgba(0, 0, 0, 0.1);
    position: relative;
    background-color: #fff;
}

.content-inner {
    display: flex;
    min-height: 448px;
    padding: 14px 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    align-self: stretch;
    position: relative;
}

/* Instructions section */
.instructions-section {
    display: flex;
    width: 100%;
    min-height: 74px;
    padding: 10px 14px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 6px;
    position: relative;
    background-color: #fff;
}

.instructions-title {
    flex: 1 0 0;
    color: #000;
    text-align: center;
    position: relative;
    font: 700 18px/20px "Helvetica Neue", -apple-system, Roboto, Helvetica, sans-serif;
}

/* Phone options */
.phone-options {
    display: flex;
    width: 334px;
    min-height: 348px;
    padding: 20px 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    position: relative;
}

.phone-option {
    display: flex;
    height: 90px;
    padding: 0 15px;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    border-radius: 14px;
    background: linear-gradient(0deg, #ededed 0%, #ededed 100%), #fff;
    position: relative;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}
/*
.phone-option:hover {
    background: linear-gradient(0deg, #e0e0e0 0%, #e0e0e0 100%), #fff;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.phone-option:focus {
    outline: 2px solid #ff7900;
    outline-offset: 2px;
}

.phone-option:active {
    transform: translateY(0);
}
*/

.phone-option-content {
    display: flex;
    padding: 20px 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
    position: relative;
}

.phone-number-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    position: relative;
}

.phone-number {
    flex: 1 0 0;
    color: #000;
    letter-spacing: 0.25px;
    position: relative;
    font: 700 18px/20px Roboto, -apple-system, Roboto, Helvetica, sans-serif;
    text-align: justify;
}

.expand-icon {
    width: 16px;
    height: 16px;
    position: relative;
    transition: transform 0.2s ease;
}
/*
.phone-option:hover .expand-icon {
    transform: rotate(-90deg) translateX(2px);
}
*/
.back-navigation {
	display: flex;
	width: 540px;
	height: 58px;
	align-items: flex-start;
	border-bottom: 1px solid #e6e6e6;
	position: relative;
	background-color: #fff;
}

@media (max-width: 991px) {
	.back-navigation {
		width: 100%;
	}
}

.back-button {
	display: flex;
	padding-bottom: 4px;
	align-items: center;
	gap: 5px;
	align-self: stretch;
	position: relative;
	background: none;
	border: none;
	cursor: pointer;
	font-family: inherit;
}

.back-icon {
	width: 16px;
	height: 16px;
}

.back-text {
	color: #000;
	font: 400 16px/16px "Helvetica Neue";
}

/* SMS */
.otp-input-field {
  display: flex;
  max-width: 334px;
  flex-direction: column;
  align-items: start;
  width: 100%;
}

.otp-title {
  color: rgb(0, 0, 0);
  font-size: 14px;
  font-family: "Helvetica Neue", -apple-system, Roboto, Helvetica, sans-serif;
  font-weight: 700;
  margin: 0;
}

.otp-container {
  align-self: stretch;
  display: flex;
  margin-top: 7px;
  width: 100%;
  align-items: center;
  gap: 7px;
  justify-content: start;
}

.input-box {
  align-self: stretch;
  margin-top: auto;
  margin-bottom: auto;
  flex: 1;
  flex-shrink: 1;
  flex-basis: 0%;
}

.input-field {
  border-radius: 4px;
  border: 1px solid rgb(146, 146, 146);
  display: flex;
  flex-shrink: 0;
  height: 48px;
  width: 78px;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
}

.input-field.active {
  border-color: rgb(255, 102, 0);
  border-width: 2px;
}

.input-field-id-number {
  border-radius: 4px;
  border: 1px solid rgb(146, 146, 146);
  display: flex;
  flex-shrink: 0;
  height: 37px;
  width: 25px;
  text-align: center;
  font-size: 20px;
}

.input-field-error {
  border-color: #ff0000;
}

/* password update */
.requirements-container {
	font-size: 12px;
	color: rgb(0, 0, 0);
	font-weight: 400;
	padding: 8px 0 0 0;
}

.requirements-list {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	list-style: none;
	padding: 8px 0;
	margin: 0;
}

.requirement-item {
	display: flex;
	align-items: center;
	text-align: center;
	padding: 2px 12px 2px 7px;
    border-radius: 12px;
    margin-top: 2px;
}

.requirement-item.valid {
	background-color: rgba(73, 176, 48, 0.5);
}

.requirement-wrapper {
	display: flex;
	width: 211px;
	max-width: 100%;
	padding-left: 8px;
	align-items: center;
	gap: 2px;
}

.requirement-wrapper .requirement-item {
	align-self: stretch;
	margin: auto 0;
	padding: 0 21px;
}

.requirement-icon {
	aspect-ratio: 1.69;
	object-fit: contain;
	object-position: center;
	width: 27px;
	align-self: stretch;
	margin: auto 0;
	flex-shrink: 0;
}

.requirement-text {
	color: #000;
	font-family: "Helvetica Neue";
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 150%; /* 18px */
}
.check-icon {
	width: 24px;
	height: 24px;
}

.form-group {
    max-width: 334px;
}

.idCode-info {
	float:right;
	cursor: pointer;
	padding-right:20px;
	color: #000;
	font-family: "Helvetica Neue";
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 150%; /* 21px */
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-skip-ink: none;
	text-decoration-thickness: auto;
	text-underline-offset: auto;
	text-underline-position: from-font;
}

/*  registration  */


/* Progress Steps */
.progress-steps {
    background-color: rgba(255, 255, 255, 1);
    border-bottom: 1px solid rgba(230, 230, 230, 1);
    position: relative;
    display: flex;
    min-height: 58px;
    width: 100%;
    flex-direction: column;
    color: rgba(0, 0, 0, 1);
    text-align: center;
    justify-content: center;
    padding: 17px 109px;
    font: 700 18px 'Helvetica Neue', -apple-system, Roboto, Helvetica, sans-serif;
}

@media (max-width: 991px) {
    .progress-steps {
        padding: 0 20px;
    }
}

.steps-container {
    align-self: center;
    z-index: 1;
    display: flex;
    width: 294px;
    max-width: 100%;
    align-items: center;
    gap: 100px;
    justify-content: space-between;
}

.step {
    width: 25px;
}

.step-number {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 25px;
    height: 25px;
    justify-content: center;
}

.step.active .step-number {
    background-color: rgba(0, 0, 0, 1);
    color: rgba(255, 255, 255, 1);
}

.progress-line {
    position: absolute;
    z-index: 0;
    min-height: 0px;
    width: 268px;
    max-width: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 0px;
    border: 1px solid rgba(0, 0, 0, 1);
}

.step-icon {
    aspect-ratio: 1;
    object-fit: contain;
    object-position: center;
    width: 25px;
    align-self: stretch;
    flex-shrink: 0;
    margin: auto 0;
}

.employee-login-section {
    display: flex;
    min-height: 64px;
    padding: 7px 16px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    background: linear-gradient(0deg, #f16e00 0%, #f16e00 100%), #f7f7f7;
    position: relative;
    cursor: pointer;
}

.employee-login-section:hover {
    background: linear-gradient(0deg, #d14d00 0%, #d14d00 100%), #f7f7f7;
}

.employee-login-section:focus-within {
    outline: 2px solid #ff7900;
    outline-offset: 2px;
}

.employee-login-content {
    display: flex;
    max-width: 332px;
    justify-content: center;
    align-items: center;
    gap: 15px;
    align-self: stretch;
    position: relative;
}

.employee-logo {
    width: 33px;
    height: 33px;
    position: relative;
}

.employee-text {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 0 0;
    position: relative;
}

.employee-login-text {
    flex: 1 0 0;
    color: #fff;
    position: relative;
    margin: 0;
    font: 700 14px/150% "Helvetica Neue", -apple-system, Roboto, Helvetica, sans-serif;
}


/* registration form  */

.registration-form {
    align-self: center;
    display: flex;
    min-height: 348px;
    margin-top: 16px;
    width: 334px;
    max-width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
}

.form-section {
    width: 100%;
    max-width: 334px;
    padding-bottom: 20px;
}

.form-section:nth-child(2),
.form-section:nth-child(3) {
    margin-top: 16px;
}

.input-group {
    width: 100%;
}

.field-header {
    display: flex;
    width: 100%;
    align-items: end;
    gap: 10px;
    color: rgba(0, 0, 0, 1);
    justify-content: start;
    padding: 8px 0;
    font: 700 16px/1 Helvetica Neue, -apple-system, Roboto, Helvetica, sans-serif;
}

.field-label {
    flex: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

.input-container {
    width: 100%;
}

.form-input {
    border-radius: 4px;
    display: flex;
    flex-shrink: 0;
    height: 48px;
    width: 100%;
    border: 1px solid rgba(148, 143, 143, 1);
    padding: 0 12px;
    font-size: 16px;
    font-family: inherit;
}

.info-box {
    display: flex;
    margin-top: 4px;
    width: 100%;
    align-items: start;
    gap: 10px;
    color: var(--On-Surface-container-Secondary, #686868);
    justify-content: start;
    padding: 10px 0;
    font: 400 16px/18px Roboto, -apple-system, Roboto, Helvetica, sans-serif;
}

.info-box.secondary {
    color: #686868;
}

.info-icon {
    aspect-ratio: 1;
    object-fit: contain;
    object-position: center;
    width: 20px;
    flex-shrink: 0;
}

.info-text {
    color: var(--On-Surface-container-Secondary, #686868);
    text-decoration-skip-ink: auto;
    flex: 1;
    flex-shrink: 1;
    flex-basis: 0%;
    margin: 0;
}

.info-box.secondary .info-text {
    text-decoration-skip-ink: auto;
}

.underlined-text {
    text-decoration: underline;
}

.underlined-text.secondary {
    text-decoration: underline;
    color: rgba(104, 104, 104, 1);
}

.contract-sample {
    margin-top: 16px;
    min-height: 488px;
    width: 100%;
    color: rgba(0, 0, 0, 1);
    font: 400 16px Helvetica Neue, -apple-system, Roboto, Helvetica, sans-serif;
}

.sample-header {
    width: 100%;
}

.sample-title {
    margin: 0 0 10px 0;
    color: #000;
	font-family: "Helvetica Neue";
	font-size: 16px;
	font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 24px */
}

.contract-image {
    aspect-ratio: 0.76;
    object-fit: contain;
    object-position: center;
    width: 100%;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25);
}

.form-spacer {
    background-color: rgba(255, 255, 255, 1);
    display: flex;
    min-height: 35px;
    margin-top: 16px;
    width: 100%;
}

.submit-section {
    margin-top: 16px;
    width: 100%;
    max-width: 334px;
    color: rgba(255, 255, 255, 1);
    white-space: nowrap;
    text-align: center;
    font: 400 16px/19px Helvetica Neue, -apple-system, Roboto, Helvetica, sans-serif;
}

@media (max-width: 991px) {
    .submit-section {
        white-space: initial;
    }
}

.submit-button {
    border-radius: 6px;
    background-color: rgba(170, 170, 170, 1);
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    justify-content: center;
    padding: 2px 14px;
    border: none;
    cursor: not-allowed;
    font: inherit;
    color: inherit;
}

@media (max-width: 991px) {
    .submit-button {
        white-space: initial;
    }
}

.button-text {
    align-self: stretch;
    flex: 1;
    flex-shrink: 1;
    flex-basis: 0%;
    margin: auto 0;
}

/*
	ID code tooltip
*/
.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 250px;
  text-align: center;
  border: 1px solid rgba(0, 0, 0, 0.05);
  background-color: #f7f7f7;
  border-radius: 6px;
  padding: 5px 5px;
  position: absolute;
  z-index: 1;
  top: -140px;
  left: -130px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.plan-info {
	text-align: left;
	width: 90%;
}