@font-face {
	font-family: 'Catamaran';
	font-weight: 100;
	src: url('res/fonts/cat-100.woff2') format('woff2');
}

@font-face {
	font-family: 'Catamaran';
	font-weight: 200;
	src: url('res/fonts/cat-200.woff2') format('woff2');
}

@font-face {
	font-family: 'Catamaran';
	font-weight: 300;
	src: url('res/fonts/cat-300.woff2') format('woff2');
}

@font-face {
	font-family: 'Catamaran';
	font-weight: 400;
	src: url('res/fonts/cat-400.woff2') format('woff2');
}

@font-face {
	font-family: 'Catamaran';
	font-weight: 500;
	src: url('res/fonts/cat-500.woff2') format('woff2');
}

@font-face {
	font-family: 'Catamaran';
	font-weight: 600;
	src: url('res/fonts/cat-600.woff2') format('woff2');
}

@font-face {
	font-family: 'Catamaran';
	font-weight: 700;
	src: url('res/fonts/cat-700.woff2') format('woff2');
}

@font-face {
	font-family: 'Catamaran';
	font-weight: 800;
	src: url('res/fonts/cat-800.woff2') format('woff2');
}

@font-face {
	font-family: 'Catamaran';
	font-weight: 900;
	src: url('res/fonts/cat-900.woff2') format('woff2');
}

/* colori */

:root {
	--walk: #666666;
	--power: #979797;
	--disabled: #d9d9d9;
	--position: #f0f0f0;
	--overtime-light: #d0eef2;
	--black: #000000;
	--overtime: #0a91ad;
	--event: #ffffff;
	--still: #333333;
	--instant: #23c7d4;
	--run: #cccccc;
	--safer: #f8f8f8;
	--light-blue: #e8f2f9;
	--event: #ffffff;
	--state-b-hover: rgba(51, 51, 51, 0.24);
	--error: #b00020;
}

* {
	box-sizing: border-box;
	font-family: Catamaran;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-overflow-scrolling: touch;
	overflow-scrolling: touch;
	margin: 0;
	padding: 0;
	border: 0;
}

::-webkit-input-placeholder, ::placeholder {
	color: #979797;
	font-family: Catamaran;
}

textarea, select, input, button {
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}

select {
	background: transparent;
	background-image: url("data:image/svg+xml;utf8,<svg fill='rgb(102, 102, 102)' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
	background-repeat: no-repeat;
	background-position: 93% center;
	position: relative;
	cursor: pointer;
}

button {
	cursor: pointer;
}

button.disabled {
	cursor: not-allowed;
}

input[type='checkbox'], input[type='radio'] {
	border-radius: 0px;
	height: 18px !important;
	width: 18px !important;
	vertical-align: middle;
	padding: 0;
	border: solid 2px var(--power);
	border-radius: 2px;
	cursor: pointer;
}

input[type='radio'] {
	border-radius: 50%;
}

input[type='checkbox']:checked {
	background-image: url(res/ico_check_white.svg);
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-color: var(--overtime);
	border: solid 2px var(--overtime);
}

input[type='radio']:checked {
	background-image: url(res/ball.svg);
	background-size: 8px 8px;
	background-repeat: no-repeat;
	background-position: center;
	border: solid 2px var(--overtime);
}

input[type='text'].error, input[type='password'].error, select.error {
	border: solid 2px var(--error) !important;
}

input[type='checkbox'].error, input[type='radio'].error {
	padding: 0;
	border: solid 2px var(--error) !important;
}

input.error+label span.err {
	display: inline-block;
}

/* Change Autocomplete styles */
	input:-internal-autofill-selected, select:-internal-autofill-selected, textarea:-internal-autofill-selected, input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {
	background-color: #ffffff !important;
	-webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
	background-clip: content-box !important;
}

body {
	background-color: #ffffff;
	color: #333333;
	font-size: 16px;
}

a {
	color: var(--still);
}

h1 {
	font-size: 32px;
	line-height: 48px;
}

/* buttons */

button {
	height: 48px;
	min-width: 220px;
	border: 0;
	border-radius: 4px;
	color: #ffffff;
	background-color: var(--overtime);
	font-size: 16px;
	font-weight: 800;
	position: relative;
	padding: 0 24px;
	cursor: pointer;
	vertical-align: middle;
}

button.disabled {
	color: var(--run) !important;
	border: 0 !important;
	background-color: var(--position) !important;
	font-weight: 800 !important;
}

button.disabled2 {
	color: #ffffff;
	background-color: transparent;
	border: solid 2px #ffffff;
	font-weight: 400;
	opacity: 0.2;
}

button:active {
	background-color: #2db1b3;
}

button.disabled:active {
	color: var(--run);
	background-color: var(--disabled);
}

button.white {
	background-color: #ffffff;
	color: #666666;
	font-size: 16px;
	font-weight: 400;
	border: solid 1px #979797;
}

button.white:active {
	background-color: #cccccc;
}

button.hollow {
	background-color: transparent;
	color: var(--overtime);
	border: solid 1px var(--overtime);
	min-width: 133px;
}

button.hollow:active {
	color: #23c7d4;
	border: solid 1px #23c7d4;
}

button.light {
	background-color: rgba(0, 0, 0, 0);
	color: #ffffff;
	font-size: 14px;
	font-weight: 300;
	border: solid 1px #ffffff;
	height: 30px;
}

button.light:active {
	background-color: rgba(255, 255, 255, 0.2);
}

button span {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* /// buttons  */

/* utilities  */

.desktop-flex-inline {
	display: none !important;
}
.desktop-flex {
	display: none !important;
}

.mobile-inline {
	display: inline-block !important;
}

.mobile-flex {
	display: flex !important;
}

.desktop-inline {
	display: none !important;
}

.position-relative {
	position: relative;
}

.position-absolute {
	position: absolute;
}

.w-100 {
	width: 100% !important;
}
.w-90 {
	width: 90% !important;
}

.max-w-1000 {
	max-width: 1000px;
}

.h-100 {
	height: 100%;
}

.mobile {
	display: block !important;
}

.not-mini-mobile {
	display: block !important;
}

.desktop {
	display: none !important;
}

.xl_desktop {
	display: none !important;
}



.desktop_large {
	display: none;
}

.md_desktop {
	display: none !important;
}

.md_desktop-flex-inline {
	display: none !important;
}

.md_desktop-flex {
	display: none !important;
}

.md_desktop-inline {
	display: none !important;
}

.inline-block {
	display: inline-block;
}

.flex {
	display: flex;
}
.d-block {
	display: block;
}

.d_none {
	display: none;
}

.flex-grow-2 {
	flex-grow: 2;
}

.justify-content-start {
	justify-content: flex-start;
}
.justify-content-end {
	justify-content: flex-end;
}
.justify-content-center {
	justify-content: center;
}
.justify-content-between {
	justify-content: space-between;
}
.justify-content-around {
	justify-content: space-around;
}

.align-items-start {
	align-items: flex-start;
}
.align-items-end {
	align-items: flex-end;
}
.align-items-center {
	align-items: center;
}
.align-items-baseline {
	align-items: baseline;
}
.align-items-stretch {
	align-items: stretch;
}

.flex-center {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.center-center {
	display: flex;
	justify-content: center;
	align-items: center;
}

.flex-column {
	display: flex;
	flex-direction: column;
}

.justify-space-between {
	justify-content: space-between;
}

.justify-center {
	justify-content: center;
}

.align-center {
	align-items: center;
}

.nowrap {
	white-space: nowrap;
}

.p-0 {
	padding: 0 !important;
}
.p-24 {
	padding: 24px !important;
}

.pb-10 {
	padding-bottom: 10px !important;
}
.pb-20 {
	padding-bottom: 20px !important;
}

.pb-30 {
	padding-bottom: 30px !important;
}

.pb-40 {
	padding-bottom: 40px !important;
}
.pb-50 {
	padding-bottom: 40px !important;
}
.pb-100 {
	padding-bottom: 100px !important;
}

.pr-10 {
	padding-right: 10px !important;
}

.pr-26 {
	padding-right: 26px !important;
}
.pr-42 {
	padding-right: 42px !important;
}

.pt-4 {
	padding-top: 4px !important;
}
.pt-30 {
	padding-top: 30px !important;
}
.pt-40 {
	padding-top: 40px !important;
}

.m-0 {
	margin: 0 !important;
}

.mt-0 {
	margin-top: 0 !important;
}
.mt-10 {
	margin-top: 10px !important;
}
.mt-16 {
	margin-top: 16px !important;
}

.mt-20 {
	margin-top: 20px !important;
}

.mt-30 {
	margin-top: 30px !important;
}

.mt-40 {
	margin-top: 40px !important;
}

.mt-50 {
	margin-top: 50px !important;
}

.mt-60 {
	margin-top: 60px !important;
}
.mt-70 {
	margin-top: 70px !important;
}

.mt-80 {
	margin-top: 80px !important;
}

.mb-0 {
	margin-bottom: 0 !important;
}
.mb-10 {
	margin-bottom: 10px !important;
}
.mb-14 {
	margin-bottom: 14px !important;
}
.mb-15 {
	margin-bottom: 15px !important;
}

.mb-20 {
	margin-bottom: 20px !important;
}

.mb-30 {
	margin-bottom: 30px !important;
}

.mb-40 {
	margin-bottom: 40px !important;
}

.mb-60 {
	margin-bottom: 60px !important;
}

.ml-10 {
	margin-left: 10px !important;
}
.ml-16 {
	margin-left: 16px !important;
}
.ml-30 {
	margin-left: 30px !important;
}

.mr-10 {
	margin-right: 10px !important;
}
.mr-20 {
	margin-right: 20px !important;
}
.mr-30 {
	margin-right: 30px !important;
}
.mr-24 {
	margin-right: 24px !important;
}

.mx-auto {
	margin-inline: auto;
}

.pl-0 {
	padding-left: 0 !important;
}

.pl-24 {
	padding-left: 24px !important;
}
.pl-26 {
	padding-left: 26px !important;
}
.pl-27 {
	padding-left: 27px !important;
}

.pr-0 {
	padding-right: 0 !important;
}
.pt-0 {
	padding-top: 0 !important;
}
.pt-10 {
	padding-top: 10 !important;
}
.pb-0 {
	padding-bottom: 0 !important;
}

.hidden {
	display: none !important;
}
.invisible {
	opacity: 0 !important;
}

.text-left {
	text-align: left!important;
}

.text-right {
	text-align: right!important;
}

.text-center {
	text-align: center!important;
}

.font-9 {
	font-size: 9px;
}
.font-11 {
	font-size: 11px;
}
.font-12 {
	font-size: 12px;
}
.font-14 {
	font-size: 14px;
}
.font-16 {
	font-size: 16px;
}
.font-18 {
	font-size: 18px;
}
.font-20 {
	font-size: 20px;
}
.font-25{
	font-size: 25px;
}
.font-30 {
	font-size: 30px;
}
.font-32 {
	font-size: 32px;
}
.font-40 {
	font-size: 40px;
}

.fsize-clamp-18-26 {
	font-size: clamp(18px, 7.2vw, 26px);
}

.color-overtime {
	color: var(--overtime);
}
.color-instant {
	color: var(--instant);
}
.color-event {
	color: var(--event);
}

.color-still {
	color: var(--still) !important;
}

.bckg-lightgrey {
	background-color: #f4f4f4;
}

.toLowercase{
	text-transform: lowercase;
}

.cursor-pointer {
	cursor: pointer;
}

.font-light, .font_l {
	font-weight: 100 !important;
}
.font-300 {
	font-weight: 300 !important;
}
.font-400 {
	font-weight: 400 !important;
}
.font-600 {
	font-weight: 600 !important;
}
.line-height117 {
	line-height: 1.17;
}
.line-height125 {
	line-height: 1.25;
}
.line-height138 {
	line-height: 1.38;
}
.line-height150 {
	line-height: 1.50;
}
.line-height157 {
	line-height: 1.57;
}
.line-height167 {
	line-height: 1.67;
}
.line-height169 {
	line-height: 1.69;
}

.list-unstyled {
	/* padding-left: 0; */
	list-style: none;
}

.border-0 {
	border: 0 !important;
}

/* //////// utilities */

#inner {
	display: flex;
	flex-direction: column;
	padding-top: 103px;
	text-align: center;
	position: relative;
	min-height: 100%;
}

main {
	flex-grow: 2;
}

/* header e nav */
#landing + .header_container,
#funnel_home + .header_container,
#setup_protection + .header_container {
	position: fixed;
}

.header_container {
	position: absolute;
	/* position: fixed; */
	top: 0px;
	left: 0px;
	right: 0px;
	text-align: center;
	border-top: solid 12px #0a91ad;
	border-bottom: solid 1px #cccccc;
	background-color: #ffffff;
	z-index: 1000;
}

.header {
	display: inline-flex;
	width: 90%;
	max-width: 1000px;
	flex-direction: column;
	justify-content: flex-end;
	z-index: 100;
	height: 119px;
	position: relative;
	padding-block: 10px;
}

.header .nav {
	display: none;
	text-align: left;
	font-size: 0;
}

.header .nav label {
	vertical-align: -webkit-baseline-middle;
	font-size: 18px;
	line-height: 1.68;
	cursor: pointer;
	margin-left: 10px;
}

.header .nav img {
	width: 24px;
	height: 24px;
	vertical-align: middle;
	cursor: pointer;
}

.header .logo {
	height: 40px;
	/* position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%); */
	cursor: pointer;
}

.header .user {
	display: flex;
	align-items: center;
	position: absolute;
	top: 15px;
	right: 0px;
	background-color: #ffffff;
	border-radius: 4px;
	border: solid 1px var(--run);
	padding-block: 10px;
	cursor: pointer;
}

.header_top {
	justify-content: flex-end;
}

.header_container .header {
	height: 90px;
	flex-direction: row-reverse;
	align-items: center;
}
.header_container.ap .header .logo{
	position: static;
	transform: translate(0);
}

#landing .header_container .header .logo{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 54px;
}

.user.logged {
	border-radius: 4px;
}

.nav_container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	width: 100%;
}

.nav_container>div:not(:last-of-type) label {
	padding-inline: 10px;
	cursor: pointer;
}

.menu_desktop {
	display: flex;
	align-items: center;
}

.menu_desktop label {
	font-weight: 600;
	cursor: pointer;
}

.user .home_nav {
	cursor: pointer;
}

.user .menu_label {
	border-right: 1px solid var(--run);
	padding-inline: 10px;
	cursor: pointer;
}

#ham_menu {
	display: none;
}

#ham_menu .circle {
	width: 31px;
	height: 31px;
	cursor: pointer;
	background-image: url(res/hamburger_menu.svg);
	background-color: var(--instant);
	background-size: 20px;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 50%;
	flex-shrink: 0;
}

.user .login b {
	font-weight: 600;
	cursor: pointer;
	padding-inline: 10px;
}

.user .login span {
	color: #cccccc;
}

.user .login p {
	display: inline-block;
}

.user div.user_menu {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 100;
	font-size: 14px;
	padding: 16px 16px 6px;
	border-radius: 6px;
	box-shadow: 0 2px 12px 0 rgb(0 0 0/ 30%);
	border: solid 1px var(--run);
	background-color: var(--event);
}

.menu_item_img {
	background-repeat: no-repeat;
	background-size: 18px;
	height: 18px;
	width: 30px;
}

#home_menu_img {
	background-image: url(res/home-grey.svg);
}
#item_home:hover #home_menu_img {
	background-image: url(res/home.svg);
}
#umbrella_img {
	background-image: url(res/icon-umbrella-grey.svg);
}
#item_umbrella:hover #umbrella_img {
	background-image: url(res/icon-umbrella.svg);
}
#item_logout #esci_img {
	background-image: url(res/esci-grey.svg);
}
#item_logout:hover #esci_img {
	background-image: url(res/esci.svg);
}

#close_menu {
	position: absolute;
	top: -13px;
	right: -13px;
	z-index: 1000;
	cursor: pointer;
	background-image: url(res/close_menu.svg);
	background-color: var(--overtime);
	background-size: 26px;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 50%;
	width: 31px;
	height: 31px;
	cursor: pointer;
}

.user_menu .item {
	text-align: left;
	background-color: rgba(216, 216, 216, 0.2);
	padding: 15px;
	width: 190px;
	display: flex;
	align-items: center;
	white-space: nowrap;
	margin-bottom: 10px;
	cursor: pointer;
}

.user_menu .item img {
	margin-right: 12px;
	width: 24px;
	height: 24px;
}

.user_menu .item label {
	margin-top: 4px;
	font-weight: 700;
	line-height: 1.5;
	font-size: 16px;
}

.user_menu .item label, .user_menu .item img {
	cursor: pointer;
}

.user_menu .item:hover, .user_menu .item.inside {
	background-color: #23c7d4;
	color: #ffffff;
}

#login_email_label {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 15px;
	display: flex;
	font-size: 16px;
	line-height: 1.69;
}

#logout_icon {
	width: 20px;
	height: 20px;
	background-image: url(res/ico_logout_grey.svg);
	background-size: 20px;
	background-position: center;
	background-repeat: no-repeat;
	margin-right: 20px;
	margin-bottom: 2px;
}

.profile img {
	margin-right: 10px;
}

.navHistory {
	width: 100%;
	max-width: 1000px;
	font-size: 12px;
	line-height: 1.67;
	padding-bottom: 18px;
	padding-top: 22px;
	text-align: left;
}

.navHistory span {
	color: var(--overtime);
}

.navHistory span:hover {
	text-decoration: underline;
}

.navHistory span.active {
	color: inherit;
}

.navHistory span.active:hover {
	text-decoration: none;
}
/* fine header e nav */

/* /////////////////////////////////// */

.steps {
	position: sticky;
	top: 0;
	/* margin-top: 103px; */
	z-index: 100;
	/* position: relative; */
	font-size: 0px;
	width: clamp(900px, 95%, 1000px);
	max-width: 90%;
	display: inline-block;
	padding: 30px 10% 35px;
	background-color: var(--overtime);
	color: #ffffff;
}

.steps .back {
	position: absolute;
	top: 24px;
	left: 47px;
	display: flex;
	align-items: center;
	font-size: 16px;
	font-weight: 300;
	cursor: pointer;
}
.steps .back img {
	margin-right: 10px;
}

.steps h1 {
	font-size: 18px;
	padding: 0;
}

.step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	color: var(--event);
	border: solid 1px #6cbdcd;
	font-size: 14px;
	line-height: 24px;
	font-weight: 300;
	vertical-align: middle;
}

.step img {
	height: 16px;
}

.step-title {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
	text-align: center;
	font-size: 18px;
}

.step.current {
	background-color: var(--instant);
	border: 0;
	font-weight: 700;
	width: 32px;
	height: 32px;
	line-height: 32px;
	font-size: 16px;
}

.step.done {
	color: var(--overtime);
	background-color: #31a2ba;
	border: 1px solid #31a2ba;
}

.steps .sep {
	width: 24px;
	display: inline-block;
	height: 1px;
	border-top: solid 1px #31a2ba;
	vertical-align: middle;
}

/* modali */

#modal {
	position: fixed;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
	z-index: 1000;
	background-color: rgba(0, 0, 0, 0.7);
}



#modal_content {
	display: inline-block;
	position: relative;
	transition: opacity 120ms;
}

.modal_close {
	position: absolute;
	right: -36px;
  top: 2px;
}

.modal_close img {
	width: 16px;
	height: 16px;
	cursor: pointer;
	z-index: 10;
}

#modal_meter {
	box-sizing: content-box;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 6px;
	box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.35);
	background-color: #ffffff;
	padding: 24px 64px;
	text-align: center;
	transition: height 120ms, width 120ms;
}

#login {
	text-align: left;
	padding-bottom: 40px;
}

#login .product_name {
	color: var(--overtime);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.69;
	margin: 43px 0 20px;
}

#login button {
	width: 132px !important;
	min-width: 0 !important;
}

.modal_title {
	white-space: nowrap;
	font-weight: 700;
	font-size: 32px;
	line-height: 1.5;
	color: var(--still);
	width: 500px;
}

#magicLink_title {
	margin: 27px 0 10px;
}

#welcome_title {
	margin: 43px 0 10px;
}

#rememberAndLogin {
	padding-inline: 26px;
}

.modal_hint {
	font-weight: 400;
	line-height: 1.69;
	font-size: 16px;
	color: var(--still);
	margin-bottom: 30px;
}

.modal_error {
	font-weight: 500;
	font-size: 20px;
	line-height: 24px;
	color: var(--error);
	margin-top: 15px;
	margin-bottom: 25px;
}

.modal_hint b {
	font-weight: 600;
	font-size: 16px;
	line-height: 24px;
}

.modal_msg {
	color: #666666;
	font-size: 16px;
	line-height: 20px;
	font-weight: 300;
}

.modal_msg.small {
	font-size: 10px;
	line-height: 16px;
	color: #666666;
}

.modal_msg b {
	font-size: 16px;
	line-height: 20px;
	font-weight: 500;
	color: #333333;
}

.modal_msg.small b {
	font-size: 10px;
	line-height: 16px;
}

#modal_content .action {
	font-size: 16px;
	line-height: 1.69;
	font-weight: 300;
	color: var(--instant);
	margin-top: 20px;
	text-decoration: underline;
	cursor: pointer;
}

.modal_msg img {
	height: 28px;
	margin: 15px;
	opacity: 0.6;
}

.modal_msg.small img {
	height: 20px;
	margin: 10px;
}

#modal_content button {
	width: 240px;
}

#magicLogin_btn {
	width: 156px !important;
	min-width: 156px !important;
}



/* fine modali */

/* ///////////////////////////// */

/* footer */

.footer {
	background-color: #333333;
	padding: 30px 50px 120px;
	text-align: centerr;
}

.footer .links {
	color: #979797;
	font-size: 16px;
	font-weight: 200;
	padding: 10px;
}

.footer .links a {
	color: #cccccc !important;
	text-decoration: none;
}

.footer .payment {
	color: #979797;
	font-size: 14px;
	font-weight: 300;
	text-align: left;
}

.footer .payment img {
	margin-top: 10px;
	height: 19px;
}

.footer .copy {
	color: #979797;
	font-size: 12px;
	font-weight: 300;
	padding: 60px 0;
	display: inline-block;
	width: 100%;
	max-width: 800px;
}

.footer .copy span {
	font-size: 14px;
	color: #cccccc;
}

.footer img {
	height: 40px;
	opacity: 0.4;
}

.footer_top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 900px;
	margin: 0 auto;
}

.foot2 {
	padding: 20px;
	padding-bottom: 110px;
	color: var(--power);
	font-weight: 400;
	line-height: 2.14;
}

.foot2 span {
	font-size: 14px;
	font-weight: 400;
}

.foot2 p {
	font-size: 12px;
}

.foot2 b {
	font-weight: 500;
	color: #979797;
}

/* fine footer */

/* /////////////////////// */

/* form */

.field {
	position: relative;
	margin-bottom: 34px;
}

.field label {
	display: none;
}

.field input.error + label {
	display: inline-block;
	position: absolute;
	top: 67px;
	left: 4px;
	color: var(--error);
	font-size: 12px;
	white-space: nowrap;
	line-height: normal;
}

.field label span {
	position: absolute;
	left: -10px;
	top: 31px;
	white-space: nowrap;
	color: #979797;
	font-size: 13px;
	font-weight: 400;
}

.field label span.err {
	color: var(--error);
	display: none;
}

#login .field label span {
	top: 44px;
}

#login .field label img {
	margin-right: 12px;
}

.field label img {
	width: 20px;
}

.field .eye {
	position: absolute;
	top: 15px;
	right: 15px;
	height: 10px;
	opacity: 0.2;
}

.field.password input {
	padding-right: 50px;
}

input, select {
	width: 100%;
	height: 60px;
	color: #333333;
	background-color: #ffffff;
	font-weight: 400;
	font-size: 16px;
	padding-left: 60px;
	padding-right: 17px;
	border-radius: 5px;
	border: solid 1px var(--power);
	-webkit-user-select: text;
	user-select: text;
}

#login input {
	padding-left: 50px;
	width: 100%;
}

::placeholder {
	font-size: 15px;
	font-weight: 200px;
}

input:focus+label img {
	opacity: 1;
}

input:focus, select:focus {
	border: solid 1px var(--overtime);
}

/* //////////////////////// */

/* fine form */

@media only screen and (min-width: 720px) {
	.mobile {
		display: none !important;
	}
	.md_desktop {
		display: block !important;
	}
	
	.md_desktop-flex-inline {
		display: inline-flex !important;
	}
	
	.md_desktop-flex {
		display: flex !important;
	}

	.md_desktop-inline {
		display: inline !important;
	}
	.desktop {
		display: block !important;
	}
	.mobile-inline {
		display: none !important;
	}
	.mobile-flex {
		display: none !important;
	}
	.desktop-inline {
		display: inline-block !important;
	}
	.desktop-flex-inline {
		display: inline-flex !important;
	}
	.desktop-flex {
		display: flex !important;
	}
}

@media only screen and (min-width: 900px) {
	.small {
		display: none;
	}
	.large {
		display: block;
	}
	.small-inline {
		display: none;
	}
	.large-inline {
		display: inline-block;
	}

}

@media only screen and (max-width: 900px) {

	.md_font-12 {
		font-size: 12px;
	}
	.md_font-14 {
		font-size: 14px;
	}
	.md_font-16 {
		font-size: 16px;
	}
	.md_font-18 {
		font-size: 18px;
	}
	.md_font-20 {
		font-size: 20px;
	}
	.md_font-40 {
		font-size: 40px;
	}
	.md_direction_column {
		flex-direction: column;
	}

	.md_text-left {
		text-align: left!important;
	}
	
	.md_text-right {
		text-align: right!important;
	}
	
	.md_text-center {
		text-align: center !important;
	}
	.md_justify-content-start {
		justify-content: flex-start;
	}
	.md_justify-content-end {
		justify-content: flex-end;
	}
	.md_justify-content-center {
		justify-content: center;
	}
	.md_justify-content-between {
		justify-content: space-between;
	}
	.md_justify-content-around {
		justify-content: space-around;
	}
	
	.md_align-items-start {
		align-items: flex-start;
	}
	.md_align-items-end {
		align-items: flex-end;
	}
	.md_align-items-center {
		align-items: center;
	}
	.md_align-items-baseline {
		align-items: baseline;
	}
	.md_align-items-stretch {
		align-items: stretch;
	}

	.md_pl-0 {
		padding-left: 0 !important;
	}
	.md_pr-0 {
		padding-right: 0 !important;
	}
	.md_pt-0 {
		padding-top: 0 !important;
	}
	.md_pb-0 {
		padding-bottom: 0 !important;
	}
	.md_ml-0 {
		margin-left: 0 !important;
	}
	.md_mr-0 {
		margin-right: 0 !important;
	}
	.md_mt-0 {
		margin-top: 0 !important;
	}
	.md_mb-0 {
		margin-bottom: 0 !important;
	}

	.md_mt-5 {
		margin-top: 5px !important;
	}
	.md_mt-10 {
		margin-top: 10px !important;
	}
	
	.md_mt-20 {
		margin-top: 20px !important;
	}
	
	.md_mt-30 {
		margin-top: 30px !important;
	}
	
	.md_mt-40 {
		margin-top: 40px !important;
	}
	
	.md_mt-50 {
		margin-top: 50px !important;
	}
	
	.md_mt-60 {
		margin-top: 60px !important;
	}
	
	.md_mt-80 {
		margin-top: 80px !important;
	}
	.md_mb-5 {
		margin-bottom: 5px !important;
	}
	.md_mb-10 {
		margin-bottom: 10px !important;
	}
	
	.md_mb-20 {
		margin-bottom: 20px !important;
	}
	
	.md_mb-30 {
		margin-bottom: 30px !important;
	}
	
	.md_mb-40 {
		margin-bottom: 40px !important;
	}
	
	.md_mb-50 {
		margin-bottom: 50px !important;
	}
	
	.md_mb-60 {
		margin-bottom: 60px !important;
	}
	
	.md_mb-80 {
		margin-bottom: 80px !important;
	}
	.md_pb-5 {
		padding-bottom: 5px !important;
	}
	.md_pb-10 {
		padding-bottom: 10px !important;
	}
	
	.md_pb-20 {
		padding-bottom: 20px !important;
	}
	
	.md_pb-30 {
		padding-bottom: 30px !important;
	}
	
	.md_pb-40 {
		padding-bottom: 40px !important;
	}
	
	.md_pb-50 {
		padding-bottom: 50px !important;
	}
	
	.md_pb-60 {
		padding-bottom: 60px !important;
	}
	
	.md_pb-80 {
		padding-bottom: 80px !important;
	}
}

@media only screen and (max-width: 800px) {
	.footer {
		padding: 30px 24px 120px;
	}
	.footer_top {
		flex-direction: column;
	}
	.footer .payment {
		text-align: center;
		margin-top: 18px;
	}
	.footer img {
		height: 33px;
	}
}

@media only screen and (max-width: 720px) {

	h2 {
		font-size: 18px;
		line-height: 1.35;
	}
	.m_font-12 {
		font-size: 12px !important;
	}
	.m_font-14 {
		font-size: 14px !important;
	}
	.m_font-16 {
		font-size: 16px !important;
	}
	.m_font-18 {
		font-size: 18px !important;
	}
	.m_font-20 {
		font-size: 20px !important;
	}
	.m_font-25 {
		font-size: 25px !important;
	}
	.m_font-32 {
		font-size: 32px !important;
	}
	.m_font-40 {
		font-size: 40px !important;
	}

	.m_line-height157 {
		line-height: 1.57;
	}
	.m_line-height168 {
		line-height: 1.68;
	}
	.m_line-height1 {
		line-height: 1;
	}
	.mobile_direction_column {
		flex-direction: column;
	}

	.m_text-left {
		text-align: left!important;
	}
	
	.m_text-right {
		text-align: right!important;
	}
	
	.m_text-center {
		text-align: center !important;
	}
	.m_justify-content-start {
		justify-content: flex-start;
	}
	.m_justify-content-end {
		justify-content: flex-end;
	}
	.m_justify-content-center {
		justify-content: center;
	}
	.m_justify-content-between {
		justify-content: space-between;
	}
	.m_justify-content-around {
		justify-content: space-around;
	}
	
	.m_align-items-start {
		align-items: flex-start;
	}
	.m_align-items-end {
		align-items: flex-end;
	}
	.m_align-items-center {
		align-items: center;
	}
	.m_align-items-baseline {
		align-items: baseline;
	}
	.m_align-items-stretch {
		align-items: stretch;
	}

	/* MARGINI/PADDING MOBILE */
	/* MARGINI/PADDING MOBILE */
	/* MARGINI/PADDING MOBILE */

	.m_my-10 {
		margin-block: 10px !important;
	}

	.m_px-20 {
		padding-inline: 20px !important;
	}
	.m_pl-0 {
		padding-left: 0 !important;
	}
	.m_pr-0 {
		padding-right: 0 !important;
	}
	.m_pt-0 {
		padding-top: 0 !important;
	}
	.m_pt-20 {
		padding-top: 20px !important;
	}
	.m_pt-24 {
		padding-top: 24px !important;
	}
	.m_pt-40 {
		padding-top: 40px !important;
	}
	.m_pb-0 {
		padding-bottom: 0 !important;
	}
	.m_ml-0 {
		margin-left: 0 !important;
	}
	.m_mr-0 {
		margin-right: 0 !important;
	}
	.m_mt-0 {
		margin-top: 0 !important;
	}
	.m_mb-0 {
		margin-bottom: 0 !important;
	}

	.m_mt-5 {
		margin-top: 5px !important;
	}
	.m_mt-10 {
		margin-top: 10px !important;
	}
	
	.m_mt-20 {
		margin-top: 20px !important;
	}
	
	.m_mt-30 {
		margin-top: 30px !important;
	}
	
	.m_mt-40 {
		margin-top: 40px !important;
	}
	.m_mt-45 {
		margin-top: 45px !important;
	}
	
	.m_mt-50 {
		margin-top: 50px !important;
	}
	
	.m_mt-60 {
		margin-top: 60px !important;
	}
	
	.m_mt-80 {
		margin-top: 80px !important;
	}
	.m_mb-5 {
		margin-bottom: 5px !important;
	}
	.m_mb-10 {
		margin-bottom: 10px !important;
	}
	
	.m_mb-20 {
		margin-bottom: 20px !important;
	}
	.m_mb-28 {
		margin-bottom: 28px !important;
	}
	
	.m_mb-30 {
		margin-bottom: 30px !important;
	}
	
	.m_mb-40 {
		margin-bottom: 40px !important;
	}
	
	.m_mb-50 {
		margin-bottom: 50px !important;
	}
	
	.m_mb-60 {
		margin-bottom: 60px !important;
	}
	
	.m_mb-80 {
		margin-bottom: 80px !important;
	}
	.m_pb-5 {
		padding-bottom: 5px !important;
	}
	.m_pb-10 {
		padding-bottom: 10px !important;
	}
	
	.m_pb-20 {
		padding-bottom: 20px !important;
	}
	
	.m_pb-30 {
		padding-bottom: 30px !important;
	}
	
	.m_pb-40 {
		padding-bottom: 40px !important;
	}
	
	.m_pb-50 {
		padding-bottom: 50px !important;
	}
	
	.m_pb-60 {
		padding-bottom: 60px !important;
	}
	
	.m_pb-80 {
		padding-bottom: 80px !important;
	}
	.steps .back {
		display: none;
	}

	button {
		width: 100% !important;
		min-width: auto;
		max-width: 287px;
	}

	#welcome_title {
		width: 400px;
	}

	.header {
		flex-direction: row;
		height: 90px;
		padding: 12px 14px 0px;
	}
	.header_top {
		display: flex;
    justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 33px;
	}
	.header_top nav {
		display: block;
	}

	.header .logo {
		position: absolute;
		width: 150px;
    height: auto;
    left: 40px;
	}

	#landing + .header_container .logo {
		left: 0;
	}

	.ap .header .logo {
		transform: inherit;
		position: initial;
		left: auto;
	}
	.header_container .header {
    position: relative;
		flex-direction: row-reverse;
		align-items: center;
		max-width: 1000px;
    width: 90%;
		padding: 0px;
		height: 70px;
	}

	#inner {
		padding-top: 83px !important;
	}

	#landing + .mobile + .header_container .header .logo {
		left: 0;
    top: auto;
    transform: translateY(0);
	}

	.header .nav {
		display: block;
		border: 0;
	}

	.header .nav label {
		display: none;
	}
	.header .user {
		text-align: right;
		border: 0;
		position: static;
	}
	.user.logged {
		border: 0;
	}
	.nav_container {
		width: 90px;
		height: 31px;	
	}
	#ham_menu {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		color: var(--walk);
		font-weight: 600;
		width: 90px;
	}

	.menu_desktop {
		display: none;
	}

	.navHistory {
		display: none;
	}

	.steps {
		/* margin-top: 83px !important; */

		width: 100% !important;
		max-width: 100%;
		padding: 10px 0% 14px;
	}
	.steps .sep {
		width: 20px;
	}
	.inner-steps {
		width: 100%;
		max-width: 100%;
		flex-direction: column;
		padding: 0 20px;
	}
	.step-title>div, .step-title h1 {
		font-size: clamp(16px, 3.3vw, 18px);
	}
}

@media only screen and (max-width: 640px) {
	.ap .user div.user_menu {
		top: 12px;
    right: 12px;
	}
	#modal_meter {
		padding-left: 25px;
		padding-right: 25px;
	}
	.modal_close {
		right: 0;
	}
	.modal_title {
		width: 300px;
	}

	#login, .login  {
		padding-bottom: 0 !important;
	}

	#magicLink_title {
		font-size: 24px;
		line-height: 35px;
		white-space: inherit;
	}

	#welcome_title {
		width: clamp(300px, 70vw, 400px);
		font-size: 24px;
	}

	.header .user {
		padding: 0;
	}

}

@media only screen and (max-width: 470px) {
	#rememberAndLogin {
		padding-inline: 0 !important;
	}
}

@media only screen and (max-width: 380px) {
	#modal_meter {
		padding-left: 15px;
		padding-right: 15px;
	}
	.modal_close {
		right: 0px;
	}
	.modal_title, #welcome_title {
		width: 260px;
	}

	#rememberAndLogin {
		flex-direction: column;
	}

	#magicLogin_btn {
		margin-top: 20px;
	}
}

@media only screen and (max-width: 320px) {
	.xs_p-0 {
		padding: 0 !important
	}
	.xs_px-0 {
		padding-inline: 0 !important;
	}
	.xs_lineheight150 {
		line-height: 1.5;
	}
	.not-mini-mobile {
		display: none !important;
	}

	.header .logo {
		width: 130px;
	}
}

@media only screen and (min-width: 1400px){
	.md_desktop {
		display: none !important;
	}
	
	.md_desktop-flex-inline {
		display: none !important;
	}
	
	.md_desktop-flex {
		display: none !important;
	}

	.md_desktop-inline {
		display: none !important;
	}

	.xl_desktop {
		display: block !important;
	}
}
.subHead {
	padding: 15px;
	font-size: 26px;
	font-weight: 700;
	color: #ffffff;
	background-color: #0a91ad;
	margin-bottom: 20px;
}

.subHead.W {
	color: #0a91ad;
	font-weight: 400;
	background-color: #f0f0f0;
}

.subHead.W h2 {
	color: #666666;
}

.subHead h2 {
	font-size: 15px;
	font-weight: 300;
}

.subHead b {
	font-weight: 600;
}