.form-osteopenia {
	margin-top: 40px;
	padding: 40px 30px;
	border: 2px solid #33CB66;
	border-radius: 15px;
}

.form-osteopenia__head {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	padding-bottom: 50px;
	border-bottom: 2px solid rgba(122, 135, 140, .2);
}

.form-osteopenia__footer .form-osteopenia__head {
	margin-top: 50px;
	padding-top: 40px;
	border-top: 2px solid rgba(122, 135, 140, .2);
	padding-bottom: 0px;
	border-bottom: none;
}

.form-osteopenia__head .form-osteopenia__b-field {
	display: flex;
	flex-direction: column;
}

.form-osteopenia__head label {
	margin-bottom: 10px;
	font-family: "Istok Web", Arial, Helvetica, sans-serif;
	font-size: 18px;
	line-height: 21.6px;
	font-weight: 700;
	color: #001689;
	cursor: pointer;
}

.form-osteopenia__head input {
	width: 260px;
	height: 50px;
	padding: 12px 20px;
	border: 2px solid #D2D2D2;
	border-radius: 30px;
	font-family: "Istok Web", Arial, Helvetica, sans-serif;
	font-size: 18px;
	line-height: 21.6px;
	color: #444;
	outline: none;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0), inset 0 0 0 100px rgba(255, 255, 255,1);
}

.form-osteopenia__body {
	display: flex;
	justify-content: space-between;
	gap: 40px;
}

.form-osteopenia__side {
	display: flex;
	flex-direction: column;
	gap: 40px;
	max-width: 390px;
}

.form-osteopenia__body .form-osteopenia__b-field {
	display: none;
}

.form-osteopenia__body .form-osteopenia__b-field.is-show {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
}

.form-osteopenia__body .form-osteopenia__b-field.is-show.ohd,
.form-osteopenia__body .form-osteopenia__b-field.is-show.ttp {
	margin-top: 20px;
	position: relative;
}

.form-osteopenia__body .form-osteopenia__b-field.is-show.ohd span.mark,
.form-osteopenia__body .form-osteopenia__b-field.is-show.ttp span.mark {
	position: absolute;
	left: 0;
	top: -30px;
	font-family: 'Istok Web';
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	color: #444;
}

.form-osteopenia__b-field.is-notice input {
	border: 2px solid #FF0000;
	color: #FF0000;
}

.form-osteopenia__body label {
	margin-bottom: 0px;
	font-family: "Istok Web", Arial, Helvetica, sans-serif;
	font-size: 18px;
	line-height: 21.6px;
	font-weight: 700;
	color: #001689;
	cursor: pointer;
}

.form-osteopenia__body input {
	width: 150px;
	height: 44px;
	padding: 12px 16px;
	border: 2px solid #D2D2D2;
	border-radius: 30px;
	font-family: "Istok Web", Arial, Helvetica, sans-serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 21.6px;
	color: #444;
	text-align: center;
	outline: none;
	transition: all .3s;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0), inset 0 0 0 100px rgba(255, 255, 255,1);
}

.form-osteopenia__body .is-success input {
	border: 2px solid #33CB66;
	color: #33CB66;
}

.form-osteopenia__body .is-fail input {
	border: 2px solid #FF0000;
	color: #FF0000;
}

.form-osteopenia__body span {
	display: block;
	font-weight: 400;
	color: #444;
}
.form-osteopenia__body span.not-print {
	display: inline;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
}

input[type='number'],
input[type="number"]:hover,
input[type="number"]:focus {
	appearance: none;
	-moz-appearance: textfield;
}

.form-osteopenia__output {
	flex-grow: 1;
	max-width: 690px;
	padding: 24px 30px;
	border: 2px solid #D2D2D2;
	border-radius: 30px;
	font-family: "Istok Web", Arial, Helvetica, sans-serif;
	font-size: 18px;
	line-height: 21.6px;
	color: rgba(122, 135, 140, .5);
}

.form-osteopenia__output.it-has {
	color:#7A878C;
}

.form-osteopenia__result.mobile-result {
	display: none;
}

.form-osteopenia__result {
	margin: 12px 0 0 0;
	padding: 0;
	list-style-type: none;
}

.form-osteopenia__result li {
	position: relative;
	padding-left: 25px;
	font-family: "Istok Web", Arial, Helvetica, sans-serif;
	font-weight: 700;
	font-size: 17px;
	line-height: 21.6px;
}

.form-osteopenia__result li::before {
	content: '';
	position: absolute;
	top: 7px;
	left: 10px;
	width: 5px;
	height: 5px;
	background: #7A878C;
	border-radius: 50%;
}

.form-osteopenia__result li.is-success {
	color: #33CB66;
}

.form-osteopenia__result li.is-success::before {
	background: #33CB66;
}

.form-osteopenia__result li.is-fail {
	color: #FF0000;
}
.form-osteopenia__result li.is-fail::before {
	background: #FF0000;
}

.form-osteopenia__result li + li {
	margin-top: 12px;
}

.form-osteopenia__result li span {
	/* display: block;
	margin-top: 8px; */
	display: inline;
	font-family: "Istok Web", Arial, Helvetica, sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 19.6px;
	color: #444444;
}

.form-osteopenia__result li span.color-red {
	color: #FF0000;
}

.form-osteopenia__result li span.color-green {
	color: #33CB66;
}

.form-osteopenia__result li span.text-bold {
	font-weight: 700;
}

.form-osteopenia__result li span.text-main {
	font-size: 17px;
	line-height: 21.6px;
}

.form-osteopenia__result li span.text-italic {
	font-style: italic;
}

.form-osteopenia__result li span.text-underline {
	text-decoration: underline;
	text-decoration-thickness: 3px;
	text-underline-offset: 5px;
}

.form-osteopenia__conclusion a,
.form-osteopenia__result a {
	display: inline-block;
	margin-top: 15px;
	padding: 10px 20px;
	border: 1px solid #001689;
	border-radius: 30px;
	font-size: 17px;
	line-height: 21.6px;
	font-weight: 700;
	color: #001689;
	text-decoration: none;
	text-align: center;
	transition: all .3s;
}
.form-osteopenia__conclusion a:hover,
.form-osteopenia__result a:hover {
	border: 1px solid #33CB66;
	background: #33CB66;
	color: #fff !important;
}

.form-osteopenia__conclusion {
	display: none;
	margin-top: 12px;
}
.form-osteopenia__conclusion.is-show {
	display: block;
}
.form-osteopenia__conclusion span {
	display: inline;
}
.form-osteopenia__conclusion span.bold {
	font-weight: 700;
}
.form-osteopenia__conclusion span.italic {
	font-style: italic;
}

.form-osteopenia__control {
	margin-top: 40px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
}

.form-osteopenia__note {
	margin-top: 20px;
	font-family: 'Istok Web';
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	color: #444;
}

.form-osteopenia__footer .form-osteopenia__control {
	margin-top: 24px;
}

.osteopenia-btn {
	display: none;
	padding: 10px 22px;
	background: #fff;
	font-family: "Istok Web", Arial, Helvetica, sans-serif;
	font-size: 18px;
	line-height: 25.91px;
	font-weight: 700;
	color: #33CB66;
	border: 2px solid #33CB66;
	border-radius: 30px;
	outline: 0;
	cursor: default;
	pointer-events: none;
	transition: all .3s;
}

.osteopenia-btn.is-show {
	display: block;
}

.osteopenia-btn.is-active {
	background:#33CB66;
	color: #fff;
	cursor: pointer;
	pointer-events: auto;
}

.osteopenia-btn.is-active:hover {
	background: #001689;
	border: 2px solid #001689;
}

@media screen and (max-width: 1024px) {
	.form-osteopenia__body {
		flex-wrap: wrap;
	}
	.form-osteopenia__output {
		display: none;
		width: 100%;
	}
	.form-osteopenia__output {
		display: none;
		width: 100%;
		max-width: none;
	}
	.form-osteopenia__output.is-result {
		display: block;
	}

	.form-osteopenia__side {
		gap: 0;
	}
	.form-osteopenia__side .form-osteopenia__b-field {
		margin-top: 40px;
	}
	.form-osteopenia__side .form-osteopenia__b-field:first-child {
		margin-top: 0px;
	}

	.form-osteopenia__result.mobile-result {
		display: block;
		margin-top: 0;
	}
	.form-osteopenia__result.mobile-result li {
		margin-top: 12px;
		padding-left: 0;
	}
	.form-osteopenia__result.mobile-result li::before {
		content: none;
	}

	.form-osteopenia__output .form-osteopenia__result {
		display: none;
	}
	.form-osteopenia__conclusion {
		margin-top: 0;
	}

	.form-osteopenia__body .form-osteopenia__b-field.is-show.ohd,
	.form-osteopenia__body .form-osteopenia__b-field.is-show.ttp {
		margin-top: 40px;
		position: relative;
	}

	.form-osteopenia__body .form-osteopenia__b-field.is-show.ohd span.mark,
	.form-osteopenia__body .form-osteopenia__b-field.is-show.ttp span.mark {
		position: absolute;
		left: 0;
		top: -25px;
	}


	.form-osteopenia__side .form-osteopenia__b-field:not(.is-show) + .mobile-result {
		display: none;
	}
}

@media screen and (max-width: 767px) {
	.form-osteopenia {
		margin-top: 24px;
		padding: 0px;
		border: none;
		border-radius: 0;

		border-top: 2px solid rgba(122, 135, 140, .2);
		padding-top: 40px;
	}
	.form-osteopenia__head {
		gap: 24px;
		padding-bottom: 40px;
	}
	.form-osteopenia__body {
		gap: 24px;
	}
	.form-osteopenia__body input {
		width: 88px;
	}
	.form-osteopenia__output {
		margin-top: 0px;
		padding: 11px 24px 11px 24px;
		border-radius: 15px;
		font-size: 16px;
		line-height: 18.6px;
	}
	.form-osteopenia__control {
		margin-top: 24px;
	}
	.form-osteopenia__side .form-osteopenia__b-field {
		margin-top: 20px;
	}
	.form-osteopenia__result.mobile-result li {
		font-weight: 700;
		font-size: 16px;
		line-height: 18px;
	}
	.form-osteopenia__result.mobile-result li::before {
		left: 0;
	}
}

@media screen and (max-width: 389px) {
	.form-osteopenia__head label {
		font-size: 16px;
		line-height: 20px;
	}
	.form-osteopenia__body label {
		font-size: 16px;
		line-height: 20px;
	}
	.form-osteopenia__side {
		/* gap: 20px; */
	}
	.form-osteopenia__output {
		/* margin-top: 20px; */
		padding: 15px;
	}
	.form-osteopenia__result li {
		padding-left: 15px;
		font-size: 16px;
		line-height: 20px;
	}
	.form-osteopenia__result li::before {
		left: 0px;
	}
	.form-osteopenia__control {
		/* gap: 20px; */
	}
	.osteopenia-btn {
		font-size: 16px;
		line-height: 20px;
	}
}