.signupPopup .step_1 .line {display: flex; gap: 1rem; align-items: start; margin-bottom: 1rem;}
.signupPopup .step_1 .line > div {width: 100%;}

.signupPopup .step_1 .label > span {line-height: 1.5; font-size: 1rem;}
.signupPopup .step_1 .label > span:first-child {margin-right: 28px;}
.signupPopup .step_1 .label > span.errorMessage {margin-left: 28px;}

.signupPopup .step_1 .label > label,
.signupPopup .step_1 .label > .city,
.signupPopup .step_1 .label > .therapies {
	position: relative; border-radius: 28px; box-shadow: 0 2px 4px 2px rgba(0, 1, 3, 0.13);
}
.signupPopup .step_1 .label > label:before,
.signupPopup .step_1 .label > .city:before,
.signupPopup .step_1 .label > .therapies:before {
	content: ''; position: absolute; inset: 0; border-radius: 28px; padding: 2px;
	background: linear-gradient(10deg, var(--color-main) 20%, transparent 70%);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude; pointer-events: none;
}

.signupPopup .step_1 select {background-position: left 0 center;}
.signupPopup .step_1 .label > label input,
.signupPopup .step_1 select {
	margin: 0; padding: 0 1.5rem; border: 0; background-color: transparent; box-shadow: none;
	height: 56px !important; border-radius: 28px !important; color: black;
}


/* City */
.signupPopup .step_1 .city {overflow: hidden;}
.signupPopup .step_1 .city .toolbar {display: flex; align-items: center; height: 56px;}
.signupPopup .step_1 .city .toolbar label {display: flex; align-items: center; width: calc(100% - 140px);}
.signupPopup .step_1 .city .toolbar label i {
	width: 3rem; height: 56px; line-height: 58px; text-align: center; font-size: 1rem; color: #555;
}
.signupPopup .step_1 .city .toolbar label input {
	height: 56px !important; margin: 0; padding: 0; border: 0; box-shadow: none;
}
.signupPopup .step_1 .city .toolbar label input.selected:not(:focus)::placeholder {color: black;}


.signupPopup .step_1 .city .options {
	display: none; height: 202px; overflow-y: auto; overflow-x: hidden; margin: 0; padding-bottom: 2px;
}
.signupPopup .step_1 .city .options::-webkit-scrollbar-track {border-radius: 0 28px 0 0;}
.signupPopup .step_1 .city .options::-webkit-scrollbar-thumb {border-radius: 0 28px 0 28px;}
.signupPopup .step_1 .city .options li {
	height: 2.5rem; padding: 0 1rem; overflow: hidden;
	line-height: 2.5rem; font-size: 1.2rem; cursor: pointer;
}
.signupPopup .step_1 .city .options li:hover,
.signupPopup .step_1 .city .options li.hover {background-color: #f5f5f5;}
.signupPopup .step_1 .city .options li.selected {background-color: var(--color-main-lighter); color: white;}

.signupPopup .step_1 .city .options li + li {border-top: 1px solid var(--color-main-lightest);}

.signupPopup .step_1 .city.active:before {
	background: linear-gradient(10deg, var(--color-main) 50%, transparent 100%);
}
.signupPopup .step_1 .city.active .options {display: block;}


/* Therapies */
.signupPopup .step_1 .therapies {overflow: hidden;}
.signupPopup .step_1 .therapies .toolbar {display: flex; align-items: center; height: 56px;}
.signupPopup .step_1 .therapies .toolbar label {display: flex; align-items: center; width: calc(100% - 140px);}
.signupPopup .step_1 .therapies .toolbar label i {
	width: 3rem; height: 56px; line-height: 58px; text-align: center; font-size: 1rem; color: #555;
}
.signupPopup .step_1 .therapies .toolbar label input {
	height: 56px !important; margin: 0; padding: 0; border: 0; box-shadow: none;
}
.signupPopup .step_1 .therapies .toolbar button {
	display: none; height: 30px; margin: 0 auto 0 1rem; line-height: 2rem !important;
	background-color: var(--color-accent); font-weight: normal; font-size: 1rem; color: white;
}
.signupPopup .step_1 .therapies .toolbar button:hover {background-color: var(--color-accent-darker);}

.signupPopup .step_1 .therapies .options {
	display: none; height: 202px; overflow-y: auto; overflow-x: hidden; margin: 0; padding-bottom: 2px;
}
.signupPopup .step_1 .therapies .options::-webkit-scrollbar-track {border-radius: 0 28px 0 0;}
.signupPopup .step_1 .therapies .options::-webkit-scrollbar-thumb {border-radius: 0 28px 0 28px;}
.signupPopup .step_1 .therapies .options li {
	height: 2.5rem; padding: 0 1rem; overflow: hidden;
	line-height: 2.5rem; font-size: 1.2rem; cursor: pointer;
}
.signupPopup .step_1 .therapies .options li:hover,
.signupPopup .step_1 .therapies .options li.hover {background-color: #f5f5f5;}

.signupPopup .step_1 .therapies .options li + li {border-top: 1px solid var(--color-main-lightest);}

.signupPopup .step_1 .therapies.active:before {
	background: linear-gradient(10deg, var(--color-main) 50%, transparent 100%);
}
.signupPopup .step_1 .therapies.active .options {display: block;}

.signupPopup .step_1 .therapies-value {display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem;}
.signupPopup .step_1 .therapies-value div {
	display: flex; align-items: center; height: 2.5rem; padding-left: 1rem; border-radius: 20px;
	background-color: var(--color-main-lighter); line-height: 2.5rem; font-size: 1rem; color: white;
}
.signupPopup .step_1 .therapies-value div.new {
	border: 1px solid var(--color-main-lighter); background-color: white; color: var(--color-main-lighter);
}
.signupPopup .step_1 .therapies-value i {width: 2.5rem; height: 2.5rem; line-height: 2.5rem; text-align: center;}
.signupPopup .step_1 .therapies-value i.fa-times:hover {font-weight: bold; color: orangered; cursor: pointer;}
.signupPopup .step_1 .therapies-value span {user-select: none; -moz-user-select: none; -webkit-user-select: none;}

.addTherapyPopup {padding: 2px; border-radius: 0; box-shadow: none;}
.addTherapyPopup .popup {
	display: flex; flex-direction: column; align-items: center;
	height: 254px; padding: 1rem; overflow: hidden;
	border-radius: 27px; background-color: #ffffffdd;
}
.addTherapyPopup .popup .confirm {
	display: flex; justify-content: center; align-items: center; gap: .5rem; margin-top: 4rem; font-size: 1rem;
}
.addTherapyPopup .popup .confirm b {padding: 5px; border-radius: 5px; background-color: var(--color-accent-lightest);}

.addTherapyPopup .popup .error {
	margin-top: 1rem; text-align: center; font-size: 1rem; color: orangered;
}
.addTherapyPopup .popup .buttons {
	display: flex; justify-content: space-between; width: 100%;
	margin-top: auto; border-top: 1px solid var(--color-main-light);
}
.addTherapyPopup .popup .buttons button {
	width: 50%; height: 60px; border-radius: 0;
	line-height: 60px; font-size: 1.2rem; cursor: pointer;
}
.addTherapyPopup .popup .buttons button:hover {background-color: var(--color-main-lightest);}
.addTherapyPopup .popup .buttons button.submit {color: var(--color-accent);}
.addTherapyPopup .popup .buttons button.cancel {color: #888;}

@media screen and (min-width: 40em) {
	.signupPopup .step_1 .therapies {width: calc(50% - .5rem);}
}