/*
	.form
		.form-slide
		.form-slide
		...
		.form-slide
			.form-header
				.go-back
				.slide-title
			.form-slide-content
				.form-row   .form-field   .text-input   .button-input    .custom-input
			.slide-button
				button.form-button

*/

.form {background: #fff; padding: 0; position: relative; left: 0; top: 0;}
@media all and (max-width: 1024px)
{
	.form {transition: left .3s;}
	.form.gone {left: -100%;}
}

.go-back {display: block; position: absolute; left: 0; top: 0; width: 48px; height: 48px; background: url(../img/back.svg) no-repeat center center; background-size: 24px 24px; cursor: pointer;}

.form-header {position: sticky; left: 0; top: 0; width: 100%; background: #fff; z-index: 100; padding: 8px 0 0 0; margin-bottom: 8px;}
.form-slide {padding: 0; display: flex; flex-direction: column; min-height: 100vh;  min-height: 100dvh;}

.slide-message {margin: 24px 12px; padding: 5px 10px; text-align: center; font-weight: bold; color: #fff; border-radius: 4px;}
.slide-message.error {background: #d9534f;}
.slide-message.success {background: #29c273;}
.slide-message.gray {background: #ccc; color: #333; font-weight: normal;}
.slide-message.transparent {background: transparent; color: #333; font-weight: normal;}

.slide-description {margin: 16px 24px 24px 16px; font-weight: bold; text-align: center;}

.slide-title {font-size: 19px; font-weight: bold; margin: 4px 10px 4px 52px; line-height: 24px; flex: 0;}

.form-slide-content {position: relative; margin: -10px 0; flex: 0;}
.form-row {margin: 11px 12px;}
.flex-row {display: flex; margin: 0 -5px;}
.flex-row .form-row {margin: 0 5px;}

.slide-loading {background: url('/online/img/loading.svg') no-repeat center center; background-size: 100px 100px;}

.form-field {
	position: relative;
	left: 0;
	top: 0;
	border: 0 none; 
	box-shadow: 0 0 0 1px #ccc;
	border-radius: 6px;
	outline: none;
	padding: 1px;
	display: flex;
	flex-direction: row;
	align-items: center;
	background-color: #fff;
}
.form-field.focus-within {
	box-shadow: 0 0 0 2px #55f !important;
}
.form-field:hover {
	box-shadow: 0 0 0 2px #ccc;
}

.focus-within .form-field.focus-within {box-shadow: 0 0 0 2px #555 !important}


.form-field.has-error {margin-bottom: 24px;}

.phone-number {color: #55f;}
.sms-input {font-size: 24px !important; text-align: center; font-family: monospace;}

.custom-input {display: block;}
.text-input input {
	font-family: 'PT Sans', sans-serif;
	font-size: 16px; 
	font-weight: 300; 
	color: #333; 
	background-color: #fff;
	width: 100%; 
	margin: 0 16px; 
	line-height: 32px;
	border: none; 
	outline: none;
	transition: opacity: .3s ease-in-out;
}

.button-input button,
.button-input select,
.select-text {
	display: block;
	text-align: center;
	width: 100%;
	height: 34px;
	padding: 4px;
	line-height: 20px;
	background-color: transparent;
	border: 0 none;
	outline: none;
	font-size: 14px;
	text-transform: uppercase;	
	cursor: pointer;
}
.select-custom {position: relative; left: 0; top: 0;}
.select-custom select {opacity: 0; position: relative; z-index: 2;}
.select-text {position: absolute; left: 0; top: 0; z-index: 1;
	display: flex; align-items: center; justify-content: center;
}

.ui-dropdown:after {content:""; display: block; width: 16px; height: 16px; background: url(../img/dropdown.svg) no-repeat center center; position: absolute; right: 6px; top: 4px; background-size: contain; opacity: .3; transition: opacity .3s;}
.ui-dropdown:hover:after {opacity: .5;}

.time-button {
	background-size: 24px 24px;
	background-repeat: no-repeat;
	background-position: 10px;
	padding-left: 32px;
	padding-right: 32px;
}

.text-input textarea {
	font-family: 'PT Sans', sans-serif;
	font-size: 16px; 
	font-weight: 300; 
	color: #333; 
	width: 100%; 
	margin: 10px; 
	line-height: 24px;
	height: 160px;
	border: none; 
	outline: none;
	transition: opacity: .3s ease-in-out;
}

.form-field label {
	position: absolute;
	z-index: 3;
	left: 8px;
	top: 10px;
	line-height: 15px;
	font-size: 15px;
	padding: 0 6px;
	color: #666;
	background: #fff;
	transition: top .2s
}

.form-field label.required:after {content: "*"; display: "inline"; color: red; font-weight: bold; margin-left: .35em;}

.focus-within label,
.text-input-notempty label,
.button-input label,
.custom-input label
{
	/*transform: translate(0, -22px);*/
	left: 5px !important;
	top: -9px !important;
	font-size: 11px;
}


/* ERROR MESSAGE */

.form-field .error-message {
	background: #d9534f; 
	border-radius: 4px;
	color: #fff; 
	display: inline-block; 
	position: absolute; 
	right: -5px;
/*	bottom: -9px; */
	padding: 3px 5px;
	font-size: 12px;
	font-weight: bold;
	max-width: 100%;
	cursor: pointer;
	z-index: 15;
}

/* BUTTONS */

.slide-button {padding: 10px 12px; flex: 1; display: flex; align-items: flex-end;}

.form-button {
	display: flex;
	width: 100%;
	min-height: 48px;
	font-family: 'PT Sans', sans-serif;
	font-weight: normal;
	font-size: 17px;
	color: #333;
	cursor: pointer;

	padding: 20px;
	justify-content: center;
	align-items: center;

	border-radius: 8px;
	border: 0 none;
	box-sizing: border-box;
	transition: background-color 0.2s;

	background-color: #ddd;
}

.form-button:hover {background-color: #ccc;}
.form-button:active {background-color: #bbb;}

.button-ready {background: #29c273; color: #fff;}
.button-ready:hover {background: #29b273;}
.button-ready:active {background: #29a273;}

.button-sending {background-color: #ddd !important; color: #333 !imortant;}

.button-add-containter {display: flex; justify-content: flex-end; margin: -5px 24px 16px 24px;}
.button-add {background-color: #eee; border-radius: 4px; border: 0 none; padding: 3px 5px; display: flex; align-items: center; font-size: 14px; cursor: pointer;}
.button-add:before {display: block; content: "📌"; margin-right: 5px; }

.button-back {background-color: #eee;}

.button-cancel {background-color: #d9534f; color: #fff;}
.button-cancel:hover {background-color: #c9534f;}
.button-cancel:active {background-color: #b9534f;}

.button-over-map {background-color: #fff;}
.button-over-map:hover {background-color: #eee;}
.button-over-map:active {background-color: #ddd;}


.time-select button {}
.time-input {display: flex; align-items: center; margin: 0; padding: 0; width: 100%; justify-content: center; font-size: 36px;}
.time-input input {border: 1px solid #555 !important; border-radius: 4px; width: 64px; font-size: 32px; text-align: center; padding: 7px 12px;}
.time-input input.has-focus {outline: 0; border-width: 2px !important; padding: 6px 11px;}

.time-section {display: flex; flex-direction: column;}
.time-section .change {display: block; width: 100%; height: 36px; background-position: center center; background-repeat: no-repeat; background-size: 36px 24px; cursor: pointer; opacity: .5; transition: opacity .2s;}
.time-section .change:hover {opacity: 1;}
.time-section .up {background-image: url(/online/img/up.svg);}
.time-section .down {background-image: url(/online/img/down.svg);}


@media all and (min-width: 768px) {

	.over-map .form {padding: 1px}
	.over-map .form-slide {display: block; height: auto; min-height: 0; padding: 8px 0 0 0;}
	.over-map .form-header {position: static; box-shadow: none; padding: 0;}
	
	.go-back {left: 6px; top: 6px; width: 48px; height: 48px;}
	.go-back:hover {background-color: #eee; border-radius: 6px;}

	.slide-title {margin: 9px 10px 9px 56px;}
	.slide-button {padding: 12px 16px 16px 16px;}

	.over-map .form-slide-content {margin: 24px 0; overflow-y: auto;}
	.form-row {margin: 14px;}

	.text-input input { line-height: 36px; }

	.button-input button,
	.button-input select,
	.select-text {
		height: 38px;
	}

	.form-field label {top: 12px;}

	.focus-within label,
	.text-input-notempty label,
	.button-input label,
	.custom-input label	{
		font-size: 12px;
	}

}	


@media all and (min-width: 768px) and (min-height: 640px) {
	
	.over-map .form-slide-content {height: auto; max-height: calc(100vh - 181px); overflow-y: auto; margin: -8px 0;}

}