@font-face {
	font-family: "FSElliotPro-Light";
	src: url("../fonts/FSElliotPro-Light.woff");
}

@font-face {
	font-family: "FSElliotPro";
	src: url("../fonts/FSElliotPro.woff");
}

@font-face {
	font-family: "FSElliotPro-Bold";
	src: url("../fonts/FSElliotPro-Bold.woff");
}

@font-face {
	font-family: "FSElliotPro-Bold";
	src: url("../fonts/FSElliotPro-Bold.woff");
}
@font-face {
	font-family: "IconFont";
	src: url("../fonts/IconFont.woff2");
}

html,
body {
	margin: 0px;
	font-family: "FSElliotPro", Arial, "Heiti TC", "Heiti SC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
	background-color: #f7f7f8;
}

.left {
	background-repeat: no-repeat;
	background-size: auto 100%;
}

.left-header {
	display: flex;
	flex-basis: 96px;
	flex-direction: row;
	align-items: center;
	flex-shrink: 0;
}

.logo {
	width: 80px;
	height: 36px;
	background-image: url("../img/HKEX_Logo_Monochrome.svg");
	background-size: 100% 100%;
	margin-left: 32px;
	flex-shrink: 0;
	display: none;
}

.logo-large {
	width: 148px;
	height: 68px;
	background-image: url("../img/HKEX_Logo_Monochrome.svg");
	background-size: 100% 100%;
	flex-shrink: 0;
}

.application-name {
	width: 100%;
	padding-left: 24px;
	font-size: 24px;
}

.left-body {
	height: 100%;
}

.left-footer {
	height: 96px;
	flex-shrink: 0;
}

.left-header-bar {
	height: 96px;
	flex-direction: row-reverse;
	align-items: center;
	display: none;
}

.form-logo-float {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.right-header-bar {
	height: 96px;
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
}

.right-major {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	height: 100%;
}

.form-blank-40 {
	flex-basis: 40%;
	flex-shrink: 0;
}

.form-blank {
	flex-basis: 30%;
	flex-shrink: 1;
}

.main-form {
	width: 100%;
	display: flex;
	flex-direction: column;
}

.globalization {
	height: 36px;
	width: 56px;
	margin-right: 16px;
}

.right-footer {
	height: 96px;
}

.flex-unlock {
	flex-shrink: 1;
}

.content-form {
	background-color: white;
	width: 100%;
	border-radius: 16px;
	flex-shrink: 2;
}

.form-bottom {
	text-align: left;
	width: 560px;
	margin-top: 24px;
	/*margin: 24px;*/
	display: flex;
	flex-direction: row;
}

form {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.form-title {
	margin-top: 24px;
	margin-left: 24px;
	margin-right: 24px;
	margin-bottom: 16px;
}
.form-list {
	margin-left: 24px;
	margin-right: 24px;
	margin-top: 16px;
	margin-bottom: 16px;
	overflow: auto;
}

.form-input {
	display: flex;
	flex-direction: column;
	margin-left: 24px;
	margin-right: 24px;
	margin-top: 16px;
}
.form-label {
	display: flex;
	flex-direction: row;
}

.form-text-captcha {
	display: flex;
	flex-direction: row;
}

.captcha {
	height: 50px;
	width: 100px;
	margin-left: 16px;
}

.form-sub-title {
	font-size: 14px;
	line-height: 20px;
	margin-left: 24px;
	margin-right: 24px;
	margin-bottom: 8px;
}

.form-text {
}

input:-webkit-autofill,
input:-webkit-autofill:focus {
	background-color: rgba(255, 0, 0, 0) !important;
}

input[type="input"],
input[type="password"],
input[type="text"],
textarea {
	padding: 12px 20px;
	border: none;
	outline: none;
	width: 100%;
	height: 100%;
	padding-block: 0px;
	padding-inline: 0px;
	box-sizing: border-box;
	font-weight: 400;
	line-height: 16px;
	background-color: rgba(255, 0, 0, 0) !important;
}

input[type="input"]:focus,
input[type="password"]:focus,
input[type="text"]:focus,
textarea:focus {
	border: 0px solid #fff;
	background-color: rgba(255, 0, 0, 0);
}

.input-field.input-field-error {
	border-color: rgb(207, 31, 56);
}

.input-field-active {
	background-color: rgb(231, 236, 240);
}

.input-field:focus {
	background: #e7ecff;
}

.input-field:hover {
	border-color: rgb(86, 86, 87);
}

.input-field {
	height: 36px;
	border-radius: 4px;
	margin-top: 8px;
	border-color: #abadae;
	box-shadow: none;
	border-width: 1px;
	border-style: solid;
	padding: 0px 16px;
}

.form-submit {
	margin-top: 0px;
	margin-left: 24px;
	margin-right: 24px;
	margin-bottom: 24px;
	box-shadow: none;
	display: flex;
	flex-direction: row;
}

.form-submit-left {
	flex-basis: 50%;
	display: flex;
	flex-direction: row;
	margin-top: 16px;
}

.form-submit-left > button {
	margin-right: 16px;
}

.form-submit-left > a {
	margin-right: 16px;
}

.form-submit-right {
	flex-basis: 50%;
	display: flex;
	flex-direction: row-reverse;
	margin-top: 16px;
}

.break-line {
	height: 1px;
	background-color: #d6d8da;
	margin-left: 16px;
	margin-right: 16px;
}

.form-message > div {
	margin-left: 24px;
	margin-right: 24px;
	margin-top: 16px;
	margin-bottom: 16px;
}

.break-line-margin {
}

.input-color-active {
	background: #e7ecff;
}

.input-group {
	display: flex;
	flex-direction: column;
	margin-bottom: 24px;
}

.link-style {
	text-decoration: none;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #26cad3;
	margin-left: 8px;
	font-size: 16px;
}

.link-style:hover {
	border-bottom-color: rgba(0, 0, 0, 0);
	color: rgb(38, 202, 211);
}

.link-style-a {
	text-decoration: none;
	color: #333d47;
}

.notification-group {
	display: flex;
	flex-direction: column;
	padding: 16px;
	border-radius: 8px;
	background-color: #f7f7f8;
	margin: 16px;
}

.round {
	width: 12px;
	height: 12px;
	border-radius: 12px;
	margin-left: 8px;
	margin-right: 8px;
	border-width: 1px;
	border-style: solid;
}

.round-inactive {
	border-color: #abadae;
}

.information-line {
	display: flex;
	flex-direction: row;
	margin-bottom: 8px;
}

.round-active {
	border-color: green;
}
.normal-note {
	margin: 16px;
}

.form-input-group {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.input-single-box {
	width: 36px;
	height: 36px;
	border-radius: 4px;
	margin-top: 8px;
	margin-right: 16px;
	border-color: #abadae;
	box-shadow: none;
	text-align: center;
}

.captcha-style {
	display: flex;
	flex-direction: row;
}

.input-field.captcha-field {
	width: auto;
	margin-right: 8px;
}

.captcha-style > img {
	width: 126px;
	height: 36px;
	margin-top: 8px;
}

.form-step {
	display: flex;
	flex-direction: row;
	margin-top: 24px;
	margin-left: 24px;
	margin-right: 24px;
	margin-bottom: 8px;
}

.form-image {
	text-align: center;
}

.totp-secret-qr-code {
	width: 200px;
	height: 200px;
}

.page-notification {
}

.notification-icons {
	text-align: center;
}
.notification-icons-left {
	text-align: left;
}

.form-support {
	padding-top: 8px;
}

.term_n_policy {
	padding: 24px;
}

.form-checkbox {
	margin-left: 24px;
	margin-right: 24px;
	margin-bottom: 8px;
}