@import url(https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap);

* {
	width: 100%;
	padding: 0;
	margin: 0
}

*,
p {
	font-family: "Lato", sans-serif
}

p {
	font-size: 14px;
	font-weight: 400;
	color: #b6b6b6;
	line-height: 1.2
}

#map * {
	overflow: visible !important
}

.logo {
	position: absolute;
	height: auto;
	width: 150px;
	z-index: 0;
	transform: scale(.4)
}

.input-error {
	color: red;
	font-size: 12px
}

.reg-container {
	width: 100%
}

.display-fl {
	position: relative;
	display: flex
}

.salon-registration-container {
	background-color: #fff;
	/*height: 1000px;*/
	overflow-y: scroll;
	position: relative;
	overflow-x: hidden
}

.pointer-dis {
	cursor: not-allowed;
	margin-left: -5px
}

.flex-column {
	flex-direction: column
}

.text-center {
	text-align: center
}

.mrt-200 {
	margin-top: 100px
}

.mrt-175 {
	margin-top: 175px
}

.mrt-150 {
	margin-top: 150px
}

.mrt-100 {
	margin-top: 100px
}

.mrt-80 {
	margin-top: 80px
}

.mrt-50 {
	margin-top: 50px
}

.mrt-30 {
	margin-top: 30px
}

.mrt-random {
	margin-top: 0
}

.mrt-20 {
	margin-top: 20px
}

.mrt-10 {
	margin-top: 10px
}

.mrb-50 {
	margin-bottom: 50px
}

.mrb-30 {
	margin-bottom: 30px
}

.mrb-20 {
	margin-bottom: 20px
}

.mrb-10 {
	margin-bottom: 10px
}

.wd-80 {
	width: 80%
}

.wd-30 {
	width: 30%
}

.wd-50 {
	width: 50%
}

.wd-20 {
	width: 20%
}

.ml-20 {
	margin-left: 20px
}

.ft-8 {
	font-size: .8em
}

.pd-20 {
	padding: 20px
}

.pd-020 {
	padding: 0 20px
}

.wdth-80 {
	width: 90%;
	margin-left: 40px
}

input,
select {
	border: none;
	background-color: #f5f5f5;
	padding: 18px;
	border-radius: 10px;
	width: 85%;
	margin: 15px auto 15px 5px;
	outline: none
}

input:focus,
select:focus {
	border: 2px solid #00bfb4;
	transition: all .3s ease
}

form {
	width: 90%
}

select {
	width: 92%
}

.error {
	color: tomato;
	font-size: .8em;
	margin-top: 0px;
	position: relative;
	margin-left: 5px
}

.btn-dark {
	width: 91%;
	background-color: #00bfb4 !important;
	border: none;
	border-radius: 10px;
	padding: 18px;
	margin-top: 10px;
	cursor: pointer;
	margin-left: 5px
}

.btn-dark,
.btn-dark a {
	color: #fff
}

.banner-img {
	border-radius: 15px 0 0 15px;
	position: relative
}

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

.glass-morph {
	position: absolute;
	background: hsla(0, 0%, 76.5%, .23);
	border: 1px solid hsla(0, 0%, 89%, .616);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	border-radius: 10px;
	z-index: 0;
	top: 25%;
	width: 350px;
	padding: 50px;
	max-height: 399px;
}

.glass-morph h2,
.glass-morph h4,
.glass-morph p {
	color: #fff
}

.glass-morph p {
	margin-top: 15px
}

.glass-morph h4 {
	margin-top: 10px;
	cursor: pointer
}

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

.footerText {
	text-align: center;
	margin-left: -70px
}

.al-right {
	margin-left: 73%;
	color: #00bfb4;
	font-size: 12px
}

.blue-color,
a {
	color: #00bfb4;
	text-decoration: none
}

.mrl-25 {
	margin-left: 25%
}

.mrl-5 {
	margin-left: 5%
}

.mrl-50 {
	margin-left: 60%
}

.img-banner {
	background-repeat: no-repeat
}

.img-banner img {
	object-fit: cover;
	height: 100%;
	width: 100%
}

.qr-center {
	margin-left: 20%
}

.password-icon {
	cursor: pointer;
	position: absolute;
	top: 20px;
	width: 25px;
	height: 25px;
	margin-left: 89%
}

.grey-cl {
	position: relative;
	margin-left: 8px
}

.grey-cl h3,
.grey-cl h5 {
	color: #999
}

.grey-cl h3 :first-child,
.grey-cl h5 :first-child {
	margin-bottom: 25px
}

.social-icons {
	width: 20px;
	height: 20px;
	margin: 20px 20px 0 0;
	cursor: pointer
}

.mrl--05 {
	position: relative;
	margin-left: -100px
}

.mrl--05 p {
	margin-left: -30px
}

.sal-id {
	margin: 0 10px
}

.sal-id h4 {
	color: #999
}

.mrl-40 {
	margin-left: -40%
}

.mrl-40,
.mrl-65 {
	position: relative
}

.mrl-65 {
	margin-left: -65%
}

.mrl-015 {
	margin-left: -46%;
	position: relative
}

.img-abs {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	margin-top: -22%;
	margin-left: 30%;
	width: 80px;
	height: auto
}

.print-icon {
	position: relative;
	margin-left: 90%;
	width: 20px;
	margin-top: 40px;
	cursor: pointer
}

.esalon-logo {
	position: relative;
	width: 20%;
	height: auto;
	border-radius: 5px
}

.display-flx {
	display: flex
}

.salonId-error {
	width: 16px;
	height: auto;
	position: absolute
}

.error-text {
	color: salmon;
	font-size: .8rem;
	margin-left: 15px
}

.qr-code-center {
	position: relative;
	margin-left: 40%;
	z-index: 1
}

.scan-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	margin-top: -55%;
	z-index: 2;
	width: 80px;
	height: auto;
	margin-left: 30%
}

.copybl {
	position: relative;
	margin-top: -30%
}

.google-map {
	position: relative;
	height: 500px;
	width: 700px
}

#gmaps {
	overflow: visible !important;
	display: block;
	height: 100vh;
	width: 100%
}

.qr-code-im {
	position: relative;
	margin: 10px 0
}

.mrt-random {
	margin-top: 100px;
	margin-left: -20px
}

@media only screen and (min-device-width:320px) and (max-device-width:480px) and (-webkit-min-device-pixel-ratio:2) {
	

	.salon-registration-container,
	.wdth-80 {
		width: 100%
	}

	.al-right {
		margin-left: 68%
	}

	.ft-8 {
		font-size: 12px
	}

	.mrl--5 {
		text-align: center;
		margin-left: -15px
	}

	.mrt-200 {
		margin-top: 150px
	}

	.disp-col {
		flex-direction: row
	}

	.salonId-error {
		margin-left: 30px
	}

	.qr-code-center {
		margin-top: 55%;
		margin-left: 12%
	}

	.scan-logo {
		position: relative;
		margin-top: 60%
	}

	.img-abs {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		margin-top: -40%;
		margin-left: 35%
	}

	.btn-dark {
		width: 95%
	}

	.copybl {
		width: 86% !important;
		margin-top: -40% !important
	}

	#gmaps {
		margin-left: -30px;
		width: 106%
	}

	.qr-center {
		margin-left: 10%
	}

	.footerText {
		margin-left: -5px
	}
}

@media only screen and (min-device-width:768px) and (max-device-width:1024px) {
	.img-banner {
		background-position: 50%;
		background-size: contain;
		height: 80vh
	}

	.glass-morph {
		top: 25%;
		width: 250px;
		height: 280px
	}

	.img-abs {
		top: 28% !important;
		width: 60px
	}

	input {
		width: 80%
	}

	.al-right {
		margin-left: 55%
	}

	.mrt-175 {
		display: none
	}

	.mrl-25 {
		margin-left: 12%
	}

	.qr-center {
		margin-left: 0
	}

	.qr-center svg {
		transform: scale(.7)
	}

	.copybl {
		width: 90% !important;
		margin-top: -40% !important
	}

	#gmaps {
		margin-left: 15px;
		width: 106%;
		height: 80vh
	}

	.mrt-200 {
		margin-top: 100px
	}
}

@media print {
	body {
		font-size: 10px;
		overflow: hidden
	}

	#gmaps,
	.copybl,
	.no-print,
	.pt-8,
	.social-icons {
		display: none
	}

	.salon-registration-container {
		overflow-y: hidden
	}

	.glass-morph {
		width: 200px;
		height: 120px
	}

	.img-abs {
		top: 53%;
		left: 80px
	}

	.mrt-200 {
		margin-top: 100px
	}

	.qr-center {
		margin-left: 30px
	}
}

body {
	padding: 0;
	margin: 0
}

.App {
	height: 60vh;
	width: 80%
}

@media only screen and (min-device-width:320px) and (max-device-width:480px) {
	.App {
		margin-left: 10%
	}
}

.circle {
	border-radius: 50%;
	height: 4.5em;
	position: relative;
	width: 4.5em;
	border: 1px solid transparent
}

.circleText {
	text-align: center;
	position: absolute;
	top: -70px;
	left: 50px;
	width: 120px;
	height: 70px;
	border-radius: 10px;
	background: hsla(0, 2.4%, 92%, .795);
	border: 1px solid hsla(0, 0%, 89%, .616);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: #000;
	font-size: 20px
}

/*# sourceMappingURL=main.bf9e00a8.chunk.css.map */