@charset "UTF-8";
.select-city-top {
		position: sticky;
		z-index: 5;
		top: 0;
		background: var(--white);
		padding: 55px 35px 0 35px;
		font: 900 24px/25px var(--fontg);
		letter-spacing: -0.02em;
		color: var(--title);
}
.select-city-top .input {
		margin: 20px -10px 0 -10px;
		position: relative;
}
.select-city-top .input input {
		padding-left: 30px;
		padding-right: 60px;
		height: 60px;
		border-radius: 30px;
		font-weight: 500;
		font-size: 15px;
		color: var(--grey800);
}
.select-city-top .input input::-webkit-input-placeholder {
		font-size: 16px;
}
.select-city-top .input input::-moz-placeholder {
		font-size: 16px;
}
.select-city-top .input input:-ms-input-placeholder {
		font-size: 16px;
}
.select-city-top .input svg {
		position: absolute;
		top: 50%;
		right: 30px;
		margin: -10px 0;
		width: 20px;
		height: 20px;
		fill: var(--sec-dark);
		pointer-events: none;
		transition: fill 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.select-city-top .input input:not(:placeholder-shown) ~ svg {
		fill: var(--grey800);
}
.modal-select-city .links {
		padding: 20px 35px;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
}
.modal-select-city .links label {
		flex: 0 0 auto;
		max-width: 100%;
		position: relative;
		cursor: pointer;
		user-select: none;
}
.modal-select-city .links input {
		transform: scale(0);
		opacity: 0;
		position: absolute;
		top: 0;
		left: 0;
}
.modal-select-city .links label span {
		display: block;
		font-weight: 300;
		font-size: 16px;
		line-height: 20px;
		position: relative;
		letter-spacing: -0.005em;
		color: var(--grey900);
		transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
		padding: 15px 10px 15px 32px;
		margin: 0 -10px 0 0;
}
.modal-select-city .links label span:before {
		content: '';
		position: absolute;
		top: 25px;
		left: 0;
		width: 12px;
		height: 0.5px;
		background: var(--grey600);
		transition-property: opacity, background;
		transition-duration: 0.2s;
		transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
}
.modal-select-city .links label span:after {
		content: '';
		position: absolute;
		top: 19px;
		left: 0;
		background: url(../img/check-orange.svg) no-repeat 50% 50%;
		background-size: contain;
		width: 14px;
		height: 12px;
		opacity: 0;
		transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
@media (pointer:fine) {
		.modal-select-city .links label:hover span {
				color: var(--orange);
		}
		.modal-select-city .links label:hover span:before {
				background: var(--orange);
		}
}
.modal-select-city .links label input:checked ~ span {
		font-size: 18px;
		font-weight: 600;
		color: var(--grey800);
}
.modal-select-city .links label input:checked ~ span:before {
		opacity: 0;
}
.modal-select-city .links label input:checked ~ span:after {
		opacity: 1;
}
/*mobile end*/
/*tablet start*/
@media only screen and (min-width: 768px) {
		.modal-select-city {
				max-width: 700px;
				height: 700px;
		}
		.select-city-top {
				padding: 50px 50px 0 50px;
				line-height: 40px;
		}
		.select-city-top .input {
				margin: 24px 0 0 0;
		}
		.select-city-top .input input {
				border-radius: 5px;
				padding-right: 15px;
				padding-left: 62px;
		}
		.select-city-top .input input::-webkit-input-placeholder {
				font-size: 15px;
		}
		.select-city-top .input input::-moz-placeholder {
				font-size: 15px;
		}
		.select-city-top .input input:-ms-input-placeholder {
				font-size: 15px;
		}
		.select-city-top .input svg {
				right: auto;
				left: 22px;
		}
		.modal-select-city .links {
				padding: 24px 50px 50px 50px;
		}
		.modal-select-city .links label span {
				font-size: 18px;
				padding-left: 27px;
				letter-spacing: -0.04em;
		}
		.modal-select-city .links label span:before {
				width: 15px;
		}
}