/*
 * find.youropia.gr - mobile layout for the account / listing forms (step 13)
 * Loaded AFTER youropia-client.css. Desktop (wider than 820px) is not affected.
 */
@media (max-width: 820px) {

	html {-webkit-text-size-adjust: 100%;}
	img {max-width: 100%;height: auto;}

	/* page box: fluid instead of 722px */
	#links,
	#container {width: auto;box-sizing: border-box;}
	#links {margin: 10px 10px;}
	#container {margin: 0 8px 20px;padding: 15px 14px;}
	#container #header #header-logo {float: none;margin-bottom: 8px;text-align: center;}
	#container #header #header-logo img {max-width: 110px;}
	#container #header .header-title {top: 0;font-size: 19px;z-index: auto;}
	#client-login {display: block;}

	/* two columns of fields -> one column */
	#container .left,
	#container .right {float: none;width: auto !important;margin-left: 0 !important;margin-right: 0 !important;}

	/* fields: full width, 16px so the iPhone does not zoom in */
	#container input[type="text"],
	#container input[type="email"],
	#container input[type="tel"],
	#container input[type="url"],
	#container input[type="password"],
	#container input[type="number"],
	#container select,
	#container textarea {width: 100% !important;max-width: 100%;box-sizing: border-box;font-size: 16px;}
	#container input[type="checkbox"],
	#container input[type="radio"] {width: auto !important;}
	#container input.time {width: 100px !important;}

	/* labels that sit to the left of the field on desktop (register, password, ...): above it, aligned left */
	#container form label.leftalign {float: none;width: auto;text-align: left;margin: 0 0 4px 0;display: block;}
	#client-register #button-register {padding: 10px 0 0 0;}

	/* login: the two boxes one under the other */
	#existing-client,
	#coming-client {display: block;width: auto;border-left: 0;padding: 15px 0;}
	#coming-client {border-top: 1px solid #ccc;}
	#existing-client #password-forgot {width: auto;}
	#existing-client #button-login button[type="submit"] {width: 100%;}
	#client-register #button-register,
	#client-new-profile #button-next-step,
	#client-edit-profile .buttons {width: auto;}

	/* "my account" */
	#my-details li span {width: 100px;}
	#acc-tools a {width: auto;margin-bottom: 6px;}
	#my-profiles li {height: auto;min-height: 34px;overflow: hidden;}

	/* tables (my businesses) */
	#all-profiles {font-size: 13px;}
	.table-responsive, #main-content table {display: block;overflow-x: auto;}

	/* create listing wizard */
	#form-wizard {display: flex;justify-content: space-between;margin-bottom: 20px;padding-bottom: 10px;}
	#form-wizard:after {display: none;}
	#form-wizard .form-wizard-item {position: static;width: 20%;box-sizing: border-box;}
	#form-wizard .form-wizard-item-text {font-size: 10px;line-height: 1.2;overflow-wrap: anywhere;}

	/* edit listing tabs: wrap */
	#client-edit-profile-tabs ul {display: flex;flex-wrap: wrap;gap: 4px;}
	#client-edit-profile-tabs ul li {float: none;margin: 0 !important;}

	/* categories / hours / selects */
	#client-new-profile #new-profile-categories #categories-container ul li {width: 100%;}
	#client-new-profile #new-profile-categories #categories-container ul li span {width: auto;}
	#client-new-profile #new-profile-opening-hours #list-of-days {width: auto;float: none;}
	.multiselectable select, .multiselectable div {width: 100%;float: none;margin-bottom: 8px;}
	.youropia-select, .youropia-select select, .youropia-select.youropia-select-lg select {width: 100%;}
	.form-input-row .row-title {width: auto;float: none;display: block;}

	/* photos */
	.profile-uploaded-photos-gallery .thumbnail {width: 46%;box-sizing: border-box;}
	.profile-uploaded-photos-gallery .thumbnail .empty {width: auto;}

	/* maps inside the forms */
	#map-canvas {width: 100% !important;}
}