@protacon/muster-booking-frontend 1.22.2 → 1.23.0

package/dist/styles.bundle.css

@@ -1,29 +1,71 @@
 
+.summary-component-container {
+	display: flex;
+	justify-content: space-between;
+}
+
 .summary-component {
 	display: flex;
-	text-transform: uppercase;
 }
 
 .summary-component nav {
 	display: flex;
+	flex-direction: column;
 }
+
 nav {
 	cursor: pointer;
+	width: 100px;
 }
+
 nav.disabled {
 	cursor: not-allowed;
 }
 
+.step-name {
+	color: #000000;
+	font-weight: 700;
+	font-size: 32px;
+	line-height: 39px;
+}
+
 .nav-text {
 	margin: 0px 24px 0px 4px;
 	color: #B9BEC1;
 	text-decoration: underline;
+	margin: auto;
+}
+
+.icon {
+	fill: white;
+}
+
+.back-icon {
+	display: none;
 }
 
 @media (max-width: 991px) {
+	.back-icon {
+		display: inline;
+		fill: #CCCCCC;
+	}
+	.summary-component-container {
+		justify-content: flex-start;
+	}
 	.nav-text {
 		display: none;
 	}
+	.step-name {
+		font-size: 20px;
+		line-height: 24px;
+	}
+	nav {
+		width: 22px;
+		margin-right: 15px;
+	}
+	.navigation-buttons-on-header {
+		display: none;
+	}
 }
 
 .nav-button {
@@ -31,7 +73,7 @@ nav.disabled {
 	width: 24px;
 	height: 24px;
 	padding: 0px;
-	margin: 0px 6px 10px;
+	margin: auto;
 	color: white;
 }
 
@@ -75,9 +117,79 @@ nav.disabled {
         margin-bottom: 0;
     }
 }
+.button-container-div {
+	display: flex;
+	justify-content: space-between;
+	width: 100%;
+	height: 100%;
+}
+
+.navigation-container {
+	display: none;
+}
+
+button {
+	border-radius: 7px;
+	height: 56px;
+	width: 150px;
+	color: #ffffff;
+	font-weight: 700;
+	font-size: 16px;
+	line-height: 24px;
+	padding: 16px;
+}
+
+.next-button {
+	background: #8AC100;
+	border: none;
+}
+
+.return-to-start-button {
+	background: #8AC100;
+	width: auto;
+}
+
+.next-button:disabled {
+	background: #E3E3E3;
+	color: #000000;
+	border: none;
+}
+
+.next-button:hover {
+	background: #E3E3E3;
+	color: #000000;
+	border: none;
+}
+
+@media screen and (max-width: 424px) {
+	.button-container {
+		display: flex;
+		justify-content: space-between;
+		margin-top: 0;
+		margin-left: -16px;
+		width: 100vw;
+		overflow-x: visible;
+		height: 89px;
+		border-top: #cccccc 1px solid;
+	}
+	.previous-button {
+		display: none;
+	}
+	.navigation-container {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+	}
+}
+
+@media screen and (max-width: 375px) {
+	.return-to-start-button {
+		font-size: small;
+	}
+}
 .vehicle-step-component .plate-form {
 	display: flex;
-	align-items: flex-start;
+	justify-content: space-between;
 }
 
 .vehicle-step-component .plate-input {
@@ -99,6 +211,86 @@ nav.disabled {
 	border-color: #dc3545;
 }
 
+.btn-link {
+	width: auto;
+}
+
+.form-check-container {
+    position: relative;
+    display: block;
+	margin-bottom: 1rem;
+	background-color: #b9bec110 ;
+	border-radius: 5px;
+    border: 1px solid #B9BEC1;
+	color: #000000;
+	padding: 9px;
+	padding-left: 3rem;
+	cursor: pointer;
+}
+
+.vehicle-info-container {
+	display: flex;
+	flex-direction: row;
+	height: 70px;
+	padding: 9px;
+	border: 0;
+	cursor: context-menu;
+}
+
+.vehicle-icon {
+	display: flex;
+	width: 70px;
+	height: 100%;
+	margin: 'auto';
+	margin-right: 20px;
+}
+
+.input-label{
+	font-weight: 600;
+}
+
+.header{
+	font-weight: 600;
+	font-size: 12px;
+	line-height: 16px;
+}
+
+.vehicle-plate-number{
+	margin: 0px;
+	font-weight: 600;
+	color: black;
+}
+
+.vehicle-description{
+	margin: 0px;
+	font-weight: 200;
+	color: #7E7A7A;
+}
+
+.description{
+	margin: 0px;
+	color: #7E7A7A;
+	font-size: 14px;
+	font-weight: 400;
+	line-height: 17px;
+}
+
+.description{
+	margin: 0px;
+	color: #7E7A7A;
+	font-size: 14px;
+	font-weight: 400;
+	line-height: 17px;
+}
+
+.header-text{
+	color: #000000;
+	font-weight: 700;
+	font-size: 14px;
+	line-height: 17px;
+	margin-top: 24px;
+}
+
 .vehicle-step-component .valid-feedback,
 .vehicle-step-component .invalid-feedback {
 	display: block;
@@ -106,20 +298,60 @@ nav.disabled {
 	font-weight: 700;
 }
 
+input[type="radio"] {
+	appearance: none;
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	width: 20px;
+	height: 20px;
+	border-radius: 50%;
+	outline: none;
+	border: 1px solid #b9bec1;
+}
+
+input[type="radio"]:checked {
+	background-color: #3A7203;
+	border: #3A7203;
+}
+
+input[type="radio"]:checked::before {
+	content: '';
+	display: block;
+	border-radius: 50%;
+	border: 6px solid #ffffff;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+}
+
+input[type="checkbox"].form-check-input {
+	margin-left: -3.25rem;
+}
+
+.form-check-input {
+	margin-left: -2.25rem;
+}
+
 .vehicle-step-component .plate-input[readonly] {
 	background-color: white;
 }
 
+.plate-container-div {
+	display: flex;
+	width: 100%;
+}
+
 .vehicle-step-component .plate-container {
 	background-color: #1345AD;
 	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAA1CAYAAAAgYencAAAAAXNSR0IArs4c6QAABJFJREFUWAntmEtoVUcYx79zcxNjjUYTpbUIolhJUbEqdCEWAm0RSqtY0UVMbVftwtfC16LgRlB3pW4q2k0f1rqx0AdFBMGFFAoVX4ggoUJam5qbHI1GTbw54+873nOdc3IfufdOwJZM+Gdmvvnme51vHndEaijGl6VmQNpqECFeucnGSNrzJGvzQauTftlMvRYJjz0jP0mrHIdvJOJjrJ7+46hfdW0ysg5PX0sKMHdkxUhGjML0yaJR4xn5FCMakvRkP50kRH2dHPiyzwSyAb8GUfKttMhneGVCnkAa8X4/7Ubi0Zifd09mBcNyAKZ1RKnd9Mthr4UIVVOYvCTok0CBQVNtGfTzn492KjbWL5/k5l226YXaRSMQMhtp8lLSLoG8KAPyErR7kZB8JCDQDiJ6WBvxvbQsJHLvq6E2b4zvuesQ8k4snjxehmmygpW2/PA7oriZIG41nmwieX5PGfnRmymnbMZa2mGO+PIx9VpSuBGlp1i2X/Bpni1vltoHuqSCjPwDYz6ra1Fsz0X+3PyyJbmjsVgSksrryaa3sTCf4RGjg3pGKiV7iPQQspodyPu/iRiP714sRraucAczgzKbbXNrsQnO6b5sM/fZ3LRw2HzEtnmJ7L890idHsC625bpUzh4wDR1H0dcLLqJ7cyifTgYMsR+841JhIVksxzWqC4d7dDwdbkJGtkha/mBbmFdoklNaIA+9Oi4xRlYR7Sansv/7wvg+08fTC0JeD6bYOmIXicDIHjJ1js3gtO3LW0ISjpKpicjyOEFmPiBDu+lvGsVUAwGvUzi2D9l9wOdQOgQtdg4JDBsw4F8Y/qpBV9GpuvEgfxAMmLvySsRoW/E316+F3O5WYN1kzuqHEZOTOsv1rkGWcRpm+Rv7cc/1e8aocI3BIsPteAxs8dtswQmBbOSceLPgWAkiV/ODhLqlBEvpIbxuIDE/55s90m9HYu6FFruoqJfJpas08uhXkGXeLea9V0pTbBnajOTAcKpOvoLmozZLrI5CC3+UYEhdGOJh6YTSwe/DmdBCWd5U6eWn2i/Q/2Ref9U/StQY/eEJWsmDecn9gf6u/B0vI9tt4znlXsegerzX/T4WNZuvpjbC9VfTFcJ8nW+9oCZh1UzWSwzeTQIvhBeaaoRMzJmIwEQEiEBVm4Qx5mXmdgB9G5oN9DHqNjgLvudFIv9YRd9tQTmvY2YIFCvnGCj7OBVZVVEEEKw73jVQD26Br0Ev0EeNN8BqoGUHUTj8tOnwPwbstNxenBTN2AWQBT8nx4r17RtRMR6bbp/vGXtA23i9PEkr16/UgJuWwNN4+iX9q6ALdGPA0zdEi8lpE4XNoAcUKj7E78CrTpUmhaFgPjgJ7oNC5S7Epcl5zvsoSYM28C7YDc6DqPzgXGE5gWj2wG85C7rL8UfjRe+EEYNdI7wDnMgh9qCZS0BNSC26T7gvKP4QRKXT1gCxCXTlBs/YY6Xale6E+qBwE7QCfe/7BqjXuj/o2RDdDTuJyHH67gsetoPBnKeFqiOVaK0oApFgtOoJuBPozjcX6HvPDXAMz89Tj7k8AZELs/xsqJEPAAAAAElFTkSuQmCC');
 	background-repeat: no-repeat;
 	background-position: 9px center;
 	height: 76px;
-	width: 290px;
+	width: 100%;
 	position: relative;
 	border-radius: 9px;
-	border: 2.25px solid #979797;
+	border: 1px solid #979797;
 }
 
 .vehicle-step-component .plate-input.is-invalid {
@@ -153,22 +385,38 @@ nav.disabled {
 	margin-left: 8px;
 }
 
+.vehicle-buttons {
+	display: flex;
+	width: 100%;
+	margin-bottom: 8px;
+	flex-wrap: wrap;
+	justify-content: space-between;
+}
+
 .vehicle-button {
 	padding: 8px 8px 0px;
-  margin: 5px;
+  margin: 5px 0px;
   border: 2px solid #D1D1D1;
   border-radius: 8px;
   cursor: pointer;
 	background-color: #FDFDFD;
-  color: black;
   font-size: 12px;
 	line-height: 1;
   text-align: center;
 	display: block;
 	float: left;
-	width: 100px;
+	width: 32%;
 	min-height: 90px;
 }
+
+.vehicle-button p {
+    color: #3F3E4C;
+}
+
+.vehicle-button.selected p {
+	color: #3A7203;
+}
+
 .vehicle-button svg {
 	max-height: 30px;
 	margin: 10px auto 10px;
@@ -180,9 +428,10 @@ nav.disabled {
 }
 
 .vehicle-button.selected {
-	border-color: #567900;
-	background-color: #8AC100;
+	border-color: #3A7203;
+	background-color: #95C01F10;
 	font-weight: bold;
+	fill: #3A7203;
 }
 
 .info-container,
@@ -190,10 +439,12 @@ nav.disabled {
 	clear: both;
 }
 
+.cls-2 {
+	fill: red;
+}
 @media screen and (max-width: 991px) {
 	.vehicle-step-component .plate-container {
 		background-size: 28px;
-		width: 260px;
 		height: 66px;
 	}
 
@@ -224,7 +475,6 @@ nav.disabled {
 @media screen and (max-width: 424px) {
 	.vehicle-step-component .plate-container {
 		background-size: 20px;
-		width: 236px;
 		height: 50px;
 	}
 
@@ -252,11 +502,17 @@ nav.disabled {
 		height: 40px;
 	}
 
-	.vehicle-step-component .selected-service {
-		margin-top: 1rem;
+	.header-text{
+		margin: 0;
+		margin-top: 8px;
+		margin-bottom: 8px;
 	}
 }
 
+.list-remark {
+	margin: 0;
+}
+
 .station-list a {
 	display: flex;
 }
@@ -266,13 +522,47 @@ nav.disabled {
 	margin: 0px 8px
 }
 
+.station-step-component {
+	display: flex;
+	overflow: hidden;
+	height: 100%;
+}
+
 .station-step-component .invalid-feedback {
 	font-size: 16px;
 	font-weight: 700;
 }
 
+.row-container-left {
+	display: flex;
+	flex-direction: column;
+	width: 50%;
+	height: 100%;
+	overflow-y: hidden;
+	padding-right: 32px;
+}
+
+.row-container-left-input-container {
+	display: flex;
+	flex-direction: column;
+}
+
+.row-container-left-body {
+	display: flex;
+	flex-direction: column;
+	overflow-y: auto;
+	overflow-x: hidden;
+}
+
+.row-container-right {
+	display: flex;
+	width: 50%;
+	height: 557px;
+	padding-left: 32px;
+}
+
 .station-step-component .geocode-input-group button {
-	height: 38px;
+	height: 56px;
 }
 
 .station-step-component .geocode-input-group {
@@ -290,6 +580,77 @@ nav.disabled {
 }
 
 
+.selected-component {
+	background-color: #95c01f10 ;
+    border: 1px solid #3A7203;
+	color: #3A7203;
+}
+
+input[type="checkbox"] {
+	accent-color: #3A7203;
+	height: 20px;
+	width: 20px;
+}
+
+/*For pagination component*/
+.page-link {
+	color: #3A7203;
+}
+
+/*For pagination component*/
+.page-item.active .page-link {
+    z-index: 1;
+    color: #fff;
+    background-color: #3A7203;
+    border-color: #3A7203;
+}
+
+.map-button {
+	display: none;
+}
+
+@media screen and (max-width: 991px) {
+	.row-container-left {
+		width: 100%;
+		height: auto;
+		padding: 0px;
+	}
+	.row-container-left-body.show-map {
+		display: none;
+	}
+	.row-container-right {
+		display: none;
+		height: 100%;
+	}
+	.row-container-right.show-map {
+		display: flex;
+		height: 100%;
+		width: 100%;
+		padding: 0px;
+	}
+	.station-step-component {
+		flex-direction: column;
+		height: 100vh;
+	}
+	.map-button {
+		display: inline-block;
+		background-color: #b9bec110;
+		color: #ffffff;
+		border-color: #b9bec110;
+		color: #000000;
+		width: 56px;
+		height: 56px;
+		margin-left: 16px;
+	}
+}
+.time-step-component {
+	width: 100%;
+	height: 100%;
+	padding: 0px;
+	display: flex;
+	overflow: hidden;
+}
+
 .react-datepicker {
 	border: none;
 }
@@ -325,7 +686,6 @@ nav.disabled {
 
 .time-step-table {
 	width: 100%;
-
 	border-top: 1px solid #E9E9E9;
 	border-bottom: 2px solid #E9E9E9;
 }
@@ -342,11 +702,9 @@ nav.disabled {
 	left: 20px;
 	right: 20px;
 	padding: 20px;
-
 	background: #95C01F;
 	border-radius: 7px;
 	cursor: pointer;
-
 	font-size: 18px;
 	color: white;
 	text-align: center;
@@ -376,6 +734,49 @@ nav.disabled {
 	padding: 8px 4px 0 12px;
 }
 
+.sort-header {
+	display: flex;
+	width: 100%;
+	justify-content: space-between;
+	flex-direction: row;
+}
+
+.dropdown-toggle::after {
+	display: none;
+}
+
+.sort-button {
+    color: #95C01F;
+	height: auto;
+	width: auto;
+    padding: 5px;
+    background: transparent;
+    border: none;
+	margin: auto;
+    margin-right: 2px;
+    display: flex;
+	justify-content: space-between;
+}
+
+.sort-button:hover {
+	background: #E3E3E3;
+	color: #000000;
+	border: none;
+}
+
+.sort-dropdown {
+	height: 20px;
+    margin: auto;
+    margin-right: 2px;
+    margin-bottom: 24px;
+}
+
+.dropdown-toggle:active {
+	background: #E3E3E3;
+	color: #000000;
+	border: none;
+}
+
 .slot {
 	border: 2px solid #D8D8D8;
 	border-radius: 2px;
@@ -418,10 +819,15 @@ nav.disabled {
 	padding: 4px 8px;
 }
 
-.slot-option {
+.slot-option-container {
 	display: flex;
-	cursor: pointer;
-	margin: 3px 0px;
+	flex-direction: row;
+	justify-content: space-between;
+}
+
+.slot-left{
+	display: flex;
+	flex-direction: row;
 }
 
 .slot-option-checkox {
@@ -433,6 +839,24 @@ nav.disabled {
 	flex-grow: 1;
 }
 
+.slot-price {
+	font-weight: 700;
+	font-size: 16px;
+	line-height: 19px;
+}
+
+.slot-time {
+	font-weight: 700;
+	font-size: 16px;
+	line-height: 19px;
+}
+
+.slot-station {
+	font-weight: 400;
+	font-size: 14px;
+	line-height: 17px;
+}
+
 .slot-option.slot-cheap .slot-price {
 	color: #8E2F2F;
 }
@@ -443,7 +867,178 @@ nav.disabled {
 	text-transform: uppercase;
 }
 
+.react-datepicker {
+	border-radius: 7px 7px 0 0;
+	font-size: 1em;
+	width: 100%;
+	background-color: #F9F9F9;
+}
+.react-datepicker__header {
+	padding-top: 0.8em;
+	border: none;
+}
+.react-datepicker__day-name {
+	width: 14%;
+	line-height: 2.9em;
+	margin: 0;
+	height: 2.9em;
+}
+.react-datepicker__month-container {
+	width: 100%;
+	height: 100%;
+}
+.react-datepicker__month {
+	padding: 0;
+	margin: 0;
+}
+.react-datepicker__week {
+	width: 100%;
+}
+.react-datepicker__day {
+	width: 14%;
+	line-height: 2.9em;
+	margin: 0;
+	height: 76px;
+}
+.react-datepicker__day-name {
+	width: 12.5%;
+}
+.react-datepicker__day-names {
+	margin-left: -12.5%;
+}
+.react-datepicker__week-number {
+	display: none;
+}
+.react-datepicker__current-month {
+	font-size: 1em;
+}
+.react-datepicker__navigation {
+	top: 1em;
+	line-height: 1.7em;
+	border: 0.45em solid transparent;
+}
+.react-datepicker__navigation--previous {
+	border-right-color: #ccc;
+	left: 1em;
+}
+.react-datepicker__navigation--next{
+	border-left-color: #ccc;
+	right: 1em;
+}
+.react-datepicker__navigation--previous:focus {
+	outline: none;
+}
+.react-datepicker__navigation--next:focus {
+	outline: none;
+}
+.react-datepicker__day--selected {
+	background-color: #95C01F;
+}
+.react-datepicker__day--selected:hover {
+	background-color: #3A7203;
+}
+
+.day-with-price {
+	padding: 6px;
+	height: 76px;
+	border: 2px solid transparent;
+	border-radius: 4px;
+    display: flex;
+    flex-direction: column;
+}
+
+.selected-day {
+	border: 2px solid #3A7203;
+	border-radius: 4px;
+}
+
+.date-text {
+	font-weight: 700;
+	font-size: 16px;
+	line-height: 24px;
+	margin: 0;
+	padding: 0;
+}
+
+.price-text {
+	padding: 0;
+	font-weight: 400;
+	font-size: 14px;
+	line-height: 16px;
+}
+
+.row-container-right-prices {
+	display: flex;
+	flex-direction: column;
+	width: 50%;
+	height: 100%;
+	padding-left: 32px;
+	overflow-y: auto;
+}
+
+.row-container-right-prices-body {
+	display: flex;
+	flex-direction: column;
+	overflow-y: auto;
+}
+
+.calendar-footer {
+	display: none;
+}
+
+.react-datepicker__week-hidden {
+	display: none;
+}
+
+.time-step-component-left {
+	display: flex;
+	flex-direction: column;
+	width: 50%;
+	height: 100%;
+	overflow-y: hidden;
+	padding-right: 32px;
+}
+
 @media (max-width: 991px) {
+	.time-step-component {
+		height: auto;
+		flex-direction: column;
+	}
+	.calendar-footer {
+		display: inline;
+		width: 100%;
+		height: 50px;
+		display: flex;
+		margin-top: -10px;
+		border-radius: 0 0 7px 7px;
+		justify-content: center;
+		background-color: #F9F9F9;
+	}
+	.calendar-button {
+		border: none;
+		background-color: inherit;
+		padding: 14px 28px;
+		font-size: 16px;
+		cursor: pointer;
+		display: inline-block;
+		color: #3A7203
+	}
+	.day-with-price {
+		height: 50px;
+		display: flex;
+		margin: 0;
+		padding: 0;
+	}
+	.price-text {
+		font-weight: 200;
+		font-size: 12px;
+		margin: 0;
+	}
+	.react-datepicker__day {
+		line-height: 2.9em;
+		margin: 0;
+		height: 50px;
+	}
 	.time-step-component-header {
 		display: block;
 	}
@@ -455,6 +1050,27 @@ nav.disabled {
 	.select-date-and-time {
 		margin-left: 6px;
 	}
+
+	.time-step-component-left {
+		display: block;
+		width: 100%;
+		height: initial;
+		overflow-y: initial;
+		padding-right: 0px;
+	}
+
+	.row-container-right-prices {
+		margin-top: 16px;
+		padding: 0px;
+		height: auto;
+		width: 100%;
+		display: inline;
+	}
+
+	.calendar {
+		display: none;
+	}
+
 }
 
 @media screen and (max-width: 767px) {
@@ -463,6 +1079,7 @@ nav.disabled {
 	}
 }
 
+
 .finalize-step-component .invalid-feedback {
 	display: block;
 	font-size: 16px;
@@ -544,6 +1161,7 @@ nav.disabled {
 .confirmation-calendar-button {
 	margin-bottom: 16px;
 	margin-top: 16px;
+	width: auto;
 }
 
 .confirmation-calendar-button svg {
@@ -590,7 +1208,9 @@ nav.disabled {
 	padding: 30px;
 	text-align: center;
 }
-
+.insurency-button-container {
+	display: flex;
+}
 .modify-reservation-component .invalid-feedback {
     display: block;
 	font-size: 16px;
@@ -602,4 +1222,108 @@ nav.disabled {
         font-size: 1.5rem;
     }
 }
+.booking-component {
+    width: 100%;
+    height: auto;
+    display: flex;
+    overflow: hidden;
+    flex-direction: column;
+}
+
+.booking-component-body {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow: hidden;
+    width: 100%;
+}
+
+.btn-apply {
+    background: #8AC100;
+    border: none;
+    border-radius: 7px;
+    color: #ffffff;
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 24px;
+    padding: 16px;
+    width: 150px;
+    height: 56px;
+}
+
+.booking-component-body-div {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    overflow-y: auto;
+    width: 100%;
+    height: 825px;
+}
+
+.button-container {
+	display: flex;
+	justify-content: space-between;
+	margin-top: 16px;
+	padding: 16px;
+	width: 100%;
+	height: 89px;
+}
+
+.form-control{
+    height: 56px;
+    border-radius: 5px;
+}
+
+::-webkit-scrollbar {
+    width: 16px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #888;
+    border-left: 12px white solid;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #555;
+}
+
+.loader {
+    margin: auto;
+    border: 16px solid #f3f3f3;
+    border-top: 16px solid #95C01F;
+    border-radius: 50%;
+    width: 120px;
+    height: 120px;
+    animation: spin 2s linear infinite;
+  }
+
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+
+@media screen and (max-width: 991px) {
+	::-webkit-scrollbar {
+        width: 0;
+    }
+
+    .booking-component {
+        height: calc(100vh - 97px);
+    }
+
+    .booking-component-body-div {
+        height: auto;
+    }
+
+    .button-container {
+        bottom: 0;
+    }
+}
+
+@media screen and (max-height: 1100px) and (min-width: 991px) {
+    .booking-component-body-div {
+        height: calc(100vh - 250px);
+    }
+}
+