:root {
  --brand-color: #075193;
}

html {
    height: 100%;
	width: 100%;
	overflow-x: hidden;
	font-family: Arial, Helvetica, sans-serif;
}

body {
	overflow-x: hidden;
	min-height: 100vh;
}

body, #sidebar {
    padding: 0.5vh 3vw 2vh;
}

.loader {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -3vw;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
    font-size: 10vw;
}
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.custom-loader-parent-container {
	position: relative;

	.custom-loader {
		position: absolute;
		top: 0;
		display: flex;
		width: 100%;
		height: 100%;
		align-content: center;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		background-color: #00000038;

		i, svg {
			font-size: 300%;
		}
	}
}
body > .custom-loader {
	margin-left: -20px;
	width: 105% !important;
}

.d-flex {
	height: 100%;
	align-items: center;
}

input:not([type="checkbox"]) {
	border: 0.5px solid #BBBDC2 !important;
	border-radius: 2px !important;
	outline: none;
	color: #151515;
	height: 35px;

	&::placeholder {
    	font-style: italic;
		color: #BBBDC2;
	}

	&:disabled {
		background-color: #e3e3e3;
	}
}

textarea {
	border-radius: 2px;
	border: 0.5px solid #BBBDC2;
	width: 100%;
}

.form-group {
	.select2.select2-container {
		width: 100% !important;
	}
}

.select2-selection {
	border-radius: 2px !important;
	border: 0.5px solid #BBBDC2 !important;
	position: relative;
	min-height: 35px !important;
	
	&:after {
		content: url('/assets/img/magnifying_glass.svg');
		position: absolute;
		left: 7px;
		top: 9px;
	}

	.select2-selection__rendered {
		line-height: 35px !important;
		padding-left: 35px !important;
		display: flex !important;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: flex-start;
		align-content: flex-start;

		.select2-selection__choice {
			height: 27px;
			line-height: 25px;
		}

		.select2-search {
			margin: 0;

			input {
				margin: 0;
				border: none !important;
			}
		}
	}

	.select2-selection__arrow {
		top: 4px !important;
	}

	.select2-selection__placeholder {
		font-weight: 400;
		font-size: 16px;
		font-style: italic;
	}
}

.form-check.form-switch {
	padding: 0;
}
.form-check-label {
	font-weight: bold;
	line-height: 1px;
}
.form-check-input {
	width: 55px !important;
    height: 30px !important;
	margin: 0;
}
.form-check-input:checked {
	background-color: var(--brand-color);
    border-color: var(--brand-color);
}
.form-check-input:focus {
	box-shadow: unset;
    border: 1px solid rgba(0, 0, 0, .25);
	
}
.form-switch .form-check-input:checked {
	background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='4' fill='%23fff'/></svg>");
}
.form-switch .form-check-input:not(:checked) {
	background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='4' fill='rgba%280, 0, 0, 0.25%29'/></svg>");
}

i, svg {
	color: #151515;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: 400;
	line-height: 14px;
}

.language-select-container {
	display: flex;
	flex-direction: column;
	align-items: center;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
	
	.select2-container--open .select2-dropdown {
		position: absolute !important;
		top: auto !important;
		bottom: 100% !important;
	}

	.select2-selection {
		&:after {
			display: none;
		}

		.select2-selection__rendered {
			padding-left: 25px !important;
			justify-content: center;
		}
	}

	.select2-container {
		.option-container {
			width: 100%;
			display: flex;
			justify-content: space-evenly;
			align-items: center;

			.flag-icon {
				width: 40px;
				height: 25px;
			}

			span {
				min-width: 60px;
				font-weight: bold;
				font-size: 15px;
			}
		}
	}
}

.header {
	height: 130px;
	padding: 25px;
	line-height: 21px;
	flex-shrink: 0;	
	border-radius: 25px 25px 2px 2px;
	background: #E4EBF1;
	display: flex;
	flex-direction: column;
    align-items: center;
    justify-content: center;
	text-align: left;
	font-weight: 600;

	h5 {
		font-weight: 700;
	}

	p:last-child {
		margin-bottom: 0;
	}
}

.header-banner {
	height: 130px;
	flex-shrink: 0;	
	border-radius: 25px 25px 2px 2px;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.40) 1%, rgba(0, 0, 0, 0.28) 49.62%, rgba(0, 0, 0, 0.00) 89.62%), #005A9A;
	display: flex;
    align-items: center;
    justify-content: center;

	img {
    	width: 75%;
	}
}

.header-landing-banner {
	height: 65vh;
	border-radius: 25px 25px 2px 2px;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.40) 1.1%, rgba(0, 0, 0, 0.28) 49.31%, rgba(0, 0, 0, 0.00) 100%), #005A9A;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;

	img {
    	width: 75%;
	}

	.list {
		display: flex;
		flex-direction: column;
		justify-content: center;

		b {
			color: #EA8442;
			text-align: center;
			font-family: Arial, Helvetica, sans-serif;
			font-size: 22px;
			font-style: normal;
			font-weight: 600;
		}
	}
}

.modal {
	top: 10%;

	&#custom_modal .modal-dialog {
		margin: .5rem 20vw;
	}

	.modal-header {
		padding: 20px 15px 5px;
		border: none;

		.close {
			padding: 0 10px;
		}
	}

	.modal-body {
		padding: 0 15px 15px;
		font-size: 14px;
		font-weight: 400;
		line-height: 20px;

		.title {
			font-weight: bold;
			font-size: 16px;
			margin-bottom: 5px;
		}

		.checkbox {
			margin: 10px 5px 0;

			.checkbox-control-label {
				font-weight: 600;
			}
		}
	}

	&.custom {
		top: 40%;

		.modal-body {
			padding: 0 15px 20px;
			font-size: 16px;
		}
		&.geolocation-modal {
			top: 0;

			.modal-dialog {
				margin: .5rem 8vw !important;
				top: 70vh;
			}
		}	
	}

	.modal-footer {
		border: none;
		padding: 0 15px 15px;
	}
}

.content {
	color: #151515;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 22px;
	letter-spacing: -0.408px;
	padding: 3vh 2px;
	margin-bottom: 5%;
	padding-bottom: 130px;

	b {
		font-weight: 600;
		font-size: 16px;
	}

	.center {
	    display: flex;
		flex-direction: column;
		flex-wrap: wrap;
	}
}

#landing_page {
	.content {
		padding: 7vh 2px;
	}
}

#safety_check_modal textarea {
	margin: 15px 0 0;
	height: 80px;
	background-color: #F1F5F8;
	border: 0.5pt solid #BBBDC2;
	font-size: 14px;
	outline: 0;
}

#dashboard_page {
	.content {
		padding-bottom: 6vh;

		.section-map {
			.location-menu-buttons {
				display: flex;
				justify-content: space-between;
				align-items: center;

				div {
					display: flex;
					flex-direction: column;
					flex-wrap: wrap;
					align-content: center;
					justify-content: flex-end;
					align-items: center;
					gap: 7px;
					width: 100px;
					height: 100px;
					background-color: white;
					border-radius: 4px;
					padding: 0 0 10px;

					img {
						width: 45px;
						height: 45px;
					}

					label {
						color: #E60018;
						text-align: center;
						font-size: 16px;
						font-weight: 600;
					}
				}
			}

			.gps-switch {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 15px 0;
			}
		}
	}
}

.footer {
	position: fixed;
    bottom: 0;
    width: calc(100% - 6vw);
	padding: 0 2px 2.5vh;
	background-color: white;
}

button {
	display: inline-flex;
	height: 44px;
	width: 100%;
	padding: 10px 18px;
	justify-content: center;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	border-radius: 2px;
	border: 2px solid var(--brand-color);
	font-weight: 600;
	font-size: 16px;

	&:disabled {
		opacity: 0.3;
	}

	&.large {
		height: 88px;
		font-size: 20px;
	}
}

.action-buttons {
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: flex-end;
    align-items: center;
    gap: 5px;

	button:last-child {
		border-radius: 2px 2px 25px 25px;
	}
}

.auth-action-buttons {
	border-radius: 2px 2px 25px 25px;
	background: #E4EBF1;
	padding: 10px 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 5px;
}

.submit-btn {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.40) 1%, rgba(0, 0, 0, 0.28) 49.62%, rgba(0, 0, 0, 0.00) 89.62%), #005A9A;
	color: white;
}

.cancel-btn {
	background: white;
	color: var(--brand-color);
}

.link-btn {
	background: transparent;
	border: none;
	color: #E60018;
	font-weight: 600;
}

.outline-btn {
	background: white;
	color: var(--brand-color);
}

.checkmark {
	padding: 12px;
	border-radius: 28px;
	border: 8px solid #ECFDF3;
	background: #D1FADF;
}

#location_update_tooltip {
	position: fixed;
	z-index: 500;
	bottom: 10vh;
	left: 0;
	width: 100%;

	.message-container {
		border: 1px solid #e3e3e3;
		background-color: white;
		border-radius: 5px;
		display: flex;
		gap: 5px;
		justify-content: center;
		align-items: center;
		margin: 0 15px;

		.checkmark {
			padding: 10px;
			border: none;
			background: none;
			height: 45px;
		}

		i {
			font-weight: bold;
		}
	}
}

#registration_terms_page, #registration_page {
	.checkbox {
		margin: 10px 20px;
	}

	& > * {
		text-align: left;
	}

	a {
		color: #151515;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 14px;
		font-style: normal;
		font-weight: 600;
		letter-spacing: -0.408px;
		text-decoration-line: underline;
	}
}

.checkbox {
	display: flex;
    align-content: center;
    align-items: center;
	gap: 20px;
}

input[type='checkbox'] {
	min-width: 20px;
    min-height: 20px;
    border-radius: 0;
    background-color: white;
    vertical-align: middle;
    border: 1px solid #BBBDC2;
    appearance: none;
    outline: none;
    cursor: pointer;

	&:checked {
    	border: 1px solid var(--brand-color);
		background-color: var(--brand-color);
		background-image: url('/assets/img/checkmark.svg');
		background-position: center;
    	background-repeat: no-repeat;
		background-size: auto;
	}
}

.no-info-label {
	height: 65vh;
	align-content: center;
	font-size: 4vw;
}

#send_sos[disabled] {
	opacity: 0.5;
}

form .row:not(:first-of-type) .form-group label {
	padding-top: 14px;
}
#qr_code_scan {
	min-height: 50px;
}
#activation_page {
	.content {
		min-height: 75vh;
		align-content: center;

		#qr_reader {
			.upload-qr-code-label-button {
				position: absolute;
				z-index: 2;
				bottom: 48px;
				width: 95%;
				background-color: white;
				border: 1px solid gray;
				font-size: 3.4vw;
				height: 48px;
				align-content: center;
				justify-self: center;
				padding: 0px 5px;
			}
		}

		.qr-reader-permission-error {
			color: #FF0A3C;

			.upload-qr-code-label-button {
				text-align: center;
				width: 95%;
				background-color: gray;
				border: 1px solid black;
				font-size: 3.4vw;
				color: white;
				height: 48px;
				align-content: center;
				justify-self: center;
				padding: 0px 5px;
			}
		}
	}
}

#dashboard_page {
	& > * {
		text-align: left;
	}
	
	.link-btn {
		background-color: white;
	}

	.section-map {
		border-radius: 2px;
		background-color: #E4EBF1;
		padding: 15px 20px 20px;

		#declare_map_position {
			margin-bottom: 10px;
		}

		#user_tracking_map {
			.leaflet-bottom.leaflet-right {
				display: none;
			}

			&.leaflet-gesture-handling-touch-warning:after {
				padding: 0 20px 0 50px;
			}
		}

		.tracking-section {
			display: none;
		}
	}

	.section-terms {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20px 0;

		.links {
			display: flex;
			justify-content: space-evenly;
			align-items: center;
			width: 100%;
			text-align: center;

			a {
				color: #151515;
				font-size: 12px;
				font-style: italic;
				font-weight: 400;
				line-height: normal;
				letter-spacing: -0.24px;
				text-decoration: none;
				padding: 0 5px;
			}
		}

		.copy-right {
			display: flex;
			gap: 5px;
			margin-top: 10px;
			align-items: center;
			line-height: normal;
		}
	}

	.menu-list {
		background-color: #E4EBF1;
		list-style-type: none;
		padding: 0;
		margin: 0;

		.list-item {
			padding: 10px 10px;
			position: relative;

			&:before {
				content: "";
				position: absolute;
				left: 10px;
				bottom: 0;
				height: 1px;
				width: calc(100% - 20px);
				border-bottom: 1px solid white;
			}

			&:after {
				content: url('/assets/img/ContextualMenu-nestedItem.svg');
				float: inline-end;
				padding-top: 5px;
			}

			.icon {
				color: #151515;
				width: 30px;
			}

			.title {
				color: #151515;
				font-family: Arial, Helvetica, sans-serif;
				font-size: 16px;
				font-style: normal;
				font-weight: 500;
				padding-left: 35px;
				vertical-align: middle;
			}
		}
	}
}

#travel_checklist_page {
	.checklist {
		.list-item {
			display: flex;
			padding: 10px 0;

			&:not(:last-child) {
				border-bottom: 0.5px solid #BBBDC2;
			}

			.number {
				width: 10%;
				font-size: 14px;
				font-weight: bold;
			}

			.checkbox {
				width: 90%;
				display: flex;
				align-items: flex-start;
				justify-content: space-between;

				.checkbox-control-label {
					width: 75%;
					font-size: 14px;
					font-weight: 400;
					line-height: 22px;
					text-align: left;
				}
			}
		}
	}
}

#country_reports_page {
	.header {
		height: unset;

		h6 {
			margin: 20px 0 5px;
			font-size: 1.1rem;
			font-weight: bold;
		}
	}

	.select2-selection {
		border-radius: 0px;
		border: none !important;
	}

	.risk-legend {
		display: flex;
		gap: 5px;
		color: white;
		line-height: 2px;

		div {
			width: 30px;
			height: 30px;
			border-radius: 20px;
			place-content: center;
			text-align: center;
		}
	}

	.submit-btn {
		background-color: #E60018;
		border: 2px solid #E60018;
		border-radius: 2px;
	}

	.content {
		padding: 0 0 50px;
	}

	.idle-image {
		width: 100%;
		height: 70vh;
		object-fit: cover;
	}

	.country-report-date {
		font-size: 12px;
		font-weight: 400;
		text-align: left;
		padding: 5px 15px 20px;
	}

	.categories-list {
		list-style-type: none;
		margin: 0;
		padding: 0;

		.list-item-container {
			border-bottom: 0.5px solid #BBBDC2;

			.list-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 10px 15px;
	
				.title {
					font-size: 16px;
					font-weight: 600;
					line-height: 22px;
				}
	
				.risk-icon {
					width: 30px;
					height: 30px;
	
					i, svg {
						font-size: 27px;
					}
				}
			}

			.category-content {
				font-size: 12px;
				line-height: 15px;
				letter-spacing: -0.408px;
				padding: 15px;
				text-align: left;
			}
		}
	}
}

#special_risks_page {
	.header {
		height: unset;
	}
	
	.content {
		padding: 0 0 50px;
	}

	.links-list {
		list-style-type: none;
		margin: 0;
		padding: 0;

		.list-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10px 15px;
			border-bottom: 0.5px solid #BBBDC2;
			gap: 35px;

			.title {
				font-size: 16px;
				font-weight: 600;
				line-height: 22px;
				text-align: left;
			}
		}
	}
}

#my_trips_page {
	.header {
		height: unset;

		b {
			font-weight: 500;
			font-size: 16px;
		}
		
		p {
			align-self: start;
			font-size: 14px;
		}
	}

	.content {
		padding: 0 0 50px;
	}

	.gds-date-list {
		list-style-type: none;
		margin: 0;
		padding: 0;

		.list-item-container {
			border-bottom: 0.5px solid #BBBDC2;

			.list-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 10px 15px;
	
				.title {
					font-size: 16px;
					font-weight: 600;
					line-height: 22px;
				}
	
				.icon {
					width: 30px;
					height: 30px;
	
					i, svg {
						font-size: 27px;
						color: #075193;
					}
				}
			}

			.gds-date-content {
				font-size: 14px;
				line-height: 22px;
				padding: 15px;

				.gds-info-container {
					display: flex;

					.content {
						width: 100%;
						text-align: left;
						padding: 0 20px;

						.title {
							font-weight: bold;
						}
					}
				}
			}
		}
	}
}

#subscriptions_page {
	.header {
		height: unset;

		b {
			font-weight: 500;
			font-size: 16px;
		}
		
		p {
			align-self: start;
			font-size: 14px;
		}
	}

	.content {
		text-align: left;

		form {
			button {
				margin-top: 50px;
				
				.loading, .processed {
					display: none;
				}

				&[state="loading"] {
					.default {
						display: none;
					}

					.loading {
						display: unset;
					}
				}

				&[state="processed"] {
					.default {
						display: none;
					}

					.processed {
						display: unset;
					}
				}
			}
		}
	}
}

#travel_regulations_page {
	.header {
		height: unset;

		p {
			align-self: start;
			font-size: 14px;
		}
	}

	.content {
		text-align: left;
		padding-bottom: 80px;

		.form-button button {
			margin: 30px 0;
		}
	}
}

#insurance_certificates_page {
	.header {
		height: unset;

		p {
			align-self: start;
			font-size: 14px;
			white-space: pre-line;
		}
	}

	.content {
		text-align: left;

		form {
			.form-button {
				margin-top: 10px;
				
				&:first-child {
					margin-top: 30px;
				}
			}
		}
	}
}

#add_bookings_page {
	.header {
		height: unset;

		b {
			font-weight: 500;
			font-size: 16px;
		}
		
		p {
			align-self: start;
			font-size: 14px;
		}
	}

	.content {
		padding: 0 0 50px;
		text-align: left;
	}

	.list-container {
		list-style-type: none;
		margin: 0;
		padding: 0;

		ul {
			padding: 0;
			margin: 0;
		}

		.list-item-container {
			border-bottom: 0.5px solid #BBBDC2;

			.list-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 10px 15px;

				.title {
					font-size: 16px;
					font-weight: 600;
					line-height: 22px;
					width: 75%;
					text-align: left;
				}
	
				.toggle-icon {
					width: 30px;
					height: 30px;

					i, svg {
						font-size: 27px;
						color: #075193;
					}
				}
			}

			.list-item-content {
				font-size: 14px;
				line-height: 22px;
				padding: 0 15px 15px;

				.row:not(:first-child) {
					margin-top: 10px;
				}

				form {
					> div {
						margin-top: 10px;
					}

					.submit-btn {
						height: 28px;
						padding: 10px 25px;
						background-color: #E4EBF1;
						color: #151515;
						border: unset;
					}
				}
			}
		}
	}
}

#assistance_page {
	.content {
		text-align: left;
		padding: 50px 37px 60px;

		* {
			font-size: 16px;
			font-style: normal;
			font-weight: 500;
			line-height: 21px;
		}

		ol, li, svg {
			padding-left: 17px;
		}

		center {
			margin: 20px 0;
		}
	}
}

#medical_facilities_page {
	.select2-selection {
		border-radius: 0px;
		border: none !important;
	}

	.content {
		padding: 0 0 50px;
	}

	.facilities-list {
		list-style-type: none;
		margin: 0;
		padding: 0;

		.list-item-container {
			border-bottom: 0.5px solid #BBBDC2;

			.list-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 10px 15px;
	
				.title {
					font-size: 16px;
					font-weight: 600;
					line-height: 22px;
					color: #E60018;
				}
	
				.toggle-icon {
					width: 30px;
					height: 30px;
	
					i, svg {
						font-size: 27px;
						color: #E60018;
					}
				}
			}

			.content {
				font-size: 14px;
				line-height: 22px;
				letter-spacing: -0.408px;
				padding: 0 15px;
				text-align: left;

				b {
					font-weight: 500;
				}

				p {
					margin-bottom: 0.3rem;
				}
			}
		}
	}
}

#alerts_page {
	.select2-selection {
		border-radius: 0px;
		border: none !important;
	}

	.content {
		padding: 0 0 50px;
	}

	.alerts-list {
		list-style-type: none;
		margin: 0;
		padding: 0;

		.list-item-container {
			border-bottom: 0.5px solid #BBBDC2;

			.list-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 10px 15px;
	
				.title {
					font-size: 16px;
					font-weight: 600;
					line-height: 22px;
					color: #E60018;
				}
	
				.toggle-icon {
					width: 30px;
					height: 30px;
	
					i, svg {
						font-size: 27px;
						color: #E60018;
					}
				}
			}

			.content {
				font-size: 14px;
				line-height: 22px;
				letter-spacing: -0.408px;
				padding: 0 15px;
				text-align: left;

				p {
					margin-bottom: 0.3rem;
				}
			}
		}
	}
}

#settings_page {
	.header {
		height: unset;

		b {
			font-weight: 500;
			font-size: 16px;
		}
		
		p {
			align-self: start;
			font-size: 14px;
		}
	}

	.content {
		text-align: left;

		form {
			.row {
				margin-bottom: 15px;
			}
			
			.flex {
				display: flex;
				justify-content: space-between;
    			align-items: center;

				> :first-child {
					width: 100%;
				}
			}

			textarea {
				height: 90px;
			}
		}
	}
}

#service_order_page {
    font-family: 'Open Sans', sans-serif;

	.content {
		text-align: left;
	}

	.page-intro {
		display: none;
	}

	.header {
		background: #0D2F3B;
		padding: 70px 20px 20px;
		color: #fff;

		h5 {
			color: #00C3FF;
			font-weight: 700;
			margin: 0 0 21px 0;
		}

		p {
			margin: 0;
			opacity: 0.95;
		}
	}

    .select2-selection {
        background-color: #f4f6f9;
        border: none;
        box-shadow: none;
    }

    .type-switches * {
        cursor: pointer;
    }

	.main-wrapper {
		padding: 16px 4px;
		background-color: #fff;
	}

	@media (min-width: 768px) {
		.main-wrapper {
			padding: 20px 12%;
		}
	}

	.requests-list-action-buttons {
        display: flex;
        gap: 16px;
        flex-direction: row;
        justify-content: space-between;

        button {
			background-color: #eef0f3;
			border: none;
			font-weight: 400;
			font-size: 14px;
			padding: 4px 14px;
			flex: 1;
			height: unset;
        }
    }

	.service-order-menu {
		margin-top: 10px;
	}

	.menu-step {
		display: flex;
		gap: 14px;
	}

	.menu-step-indicator {
		width: 28px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.menu-step-indicator .circle {
		width: 38px;
		height: 38px;
		border-radius: 999px;
		background: #e9ecef;
		color: #fff;
		font-size: 16px;
		font-weight: 600;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.menu-step-indicator .circle.active {
		background: #2297d4;
	}

	.menu-step-indicator .circle.disabled {
		background: #e9ecef;
		color: #c6c9cf;
	}

	.menu-step-indicator .line {
		width: 2px;
		flex: 1;
		background: #e9ecef;
	}

	.menu-step-indicator .line.active {
		background: #2297d4;
	}

	.menu-step-content {
		flex: 1;
		margin: 8px 0 10px;
		padding-left: 30px;
	}

	.menu-step-title {
		color: #000;
		font-size: 18px;
		font-weight: 600;
		margin-bottom: 15px;
	}

	.menu-step-title.disabled {
		color: #b9bcc3;
	}

	.review-step .review-content {
		color: #000;
		font-size: 14px;
		line-height: 22px;
	}

	.so-review-section {
		margin-top: 18px;
	}

	.so-review-section:first-child {
		margin-top: 0;
	}

	.so-review-section-title {
		font-weight: 600;
		margin-bottom: 10px;
		font-size: 15px;
	}

	.so-review-trip {
		margin-top: 16px;
	}

	.so-review-trip:first-child {
		margin-top: 0;
	}

	.so-review-trip-title {
		font-weight: 600;
		margin-bottom: 8px;
	}

	.so-review-subtitle {
		font-weight: 600;
		margin-top: 10px;
	}

	.so-review-places p {
		margin: 0;
	}

	.menu-items {
		display: flex;
		flex-direction: column;
		gap: 6px;
	}

	.menu-item,
	.my-requests-link {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: transparent;
		border: none;
		padding: 10px 0;
		color: #6b6f77;
		text-align: left;
	}

	.menu-item-left {
		display: inline-flex;
		align-items: center;
		gap: 12px;
	}

	.menu-remove {
		width: 28px;
		height: 28px;
		border-radius: 999px;
		background: #F2F3F8;
		color: #000;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: 18px;
		line-height: 1;
		flex: 0 0 28px;
	}

	.menu-item .label,
	.my-requests-link .label {
		font-weight: 600;
	}

	.menu-item .chevron,
	.my-requests-link .chevron {
		color: #6b6f77;
		font-size: 18px;
		line-height: 1;
	}

	.menu-item.disabled,
	.menu-item.disabled .label,
	.menu-item.disabled .chevron {
		color: #c6c9cf;
		pointer-events: none;
	}

	.my-requests-link {
		margin-top: 18px;
		font-weight: 700;
		color: #000;
	}

    .icon-wrapper {
        height: 40px;
        width: 40px;
        background-color: #F2F3F8;
        border-radius: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        position: relative;

        &.active {
            background-color: #229AD6;
            cursor: default;

            img {
                filter: brightness(0) invert(1);
            }
        }

        .tooltip-text {
            visibility: hidden;
            width: 120px;
            background-color: #555;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px 0;
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 50%;
            margin-left: -60px;
            opacity: 0;
            transition: opacity 0.3s;
            font-size: 12px;
            font-weight: normal;

            &::after {
                content: "";
                position: absolute;
                top: 100%;
                left: 50%;
                margin-left: -5px;
                border-width: 5px;
                border-style: solid;
                border-color: #555 transparent transparent transparent;
            }
        }

        &:hover .tooltip-text:not(:empty) {
            visibility: visible;
            opacity: 1;
        }
    }

    .step-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
		margin-bottom: 14px;

		.step-header-left {
			display: inline-flex;
			align-items: center;
			gap: 12px;
		}

		.step-header-icon {
			width: 24px;
			display: block;
		}

		.step-header-icon-circle {
			width: 40px;
			height: 40px;
			border-radius: 999px;
			background-color: #229AD6;
			display: inline-flex;
			align-items: center;
			justify-content: center;
		}

		.step-header-icon-inner {
			width: 18px;
			height: 18px;
			filter: brightness(0) invert(1);
		}

		.step-header-title {
			color: #000;
			font-size: 18px;
			font-weight: 700;
		}
    }

	/* Trip step (Figma layout) */
	/* Prevent Select2 global search icon from overlapping our field icons */
	.select2-selection:after {
		content: none;
	}

	.so-field .select2.select2-container {
		width: 100% !important;
	}

	.so-field .select2-container {
		width: 100% !important;
	}

	.so-field .select2-selection {
		width: 100%;
		box-sizing: border-box;
	}

	.so-input--search .select2-selection__rendered {
		padding-left: 0px !important;
	}

	.so-input--search .select2-selection__placeholder {
		padding-left: 0;
	}

	.trip-section {
		margin-bottom: 14px;
	}

	.trip-section-title {
		font-size: 14px;
		font-weight: 600;
		color: #151515;
		margin: 6px 0 8px;
	}

	.so-row {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.so-row--two {
		flex-direction: row;
		gap: 10px;
		flex-wrap: nowrap;
	}

	.so-row--two > .so-field {
		flex: 1;
		min-width: 0;
	}

	.so-row--with-action {
		align-items: stretch;
	}

	.so-row--with-action > .place-add-inline,
	.so-row--with-action > .place-remove-inline {
		flex: 0 0 34px;
		width: 34px;
		height: 34px;
		border-radius: 999px;
		border: none;
		background: #F2F3F8;
		color: #151515;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: 20px;
		line-height: 1;
		padding: 0;
		align-self: center;
	}

	.so-row--with-action > .place-remove-inline img {
		width: 14px;
		height: 14px;
	}

	.so-field {
		position: relative;
	}

	/* Trip step: consistent vertical spacing (10px) */
	.trip-information-step .so-field {
		margin-bottom: 10px;
	}
	.trip-information-step .so-row {
		margin-bottom: 10px;
	}
	.trip-information-step .so-row .so-field {
		margin-bottom: 0;
	}
	.trip-information-step .trip-section:last-child > .so-field:last-child,
	.trip-information-step .trip-section:last-child > .so-row:last-child {
		margin-bottom: 0;
	}

	.so-input--search::before {
		content: '';
		position: absolute;
		left: 12px;
		/* Anchor to the input height (35px) so FV error text doesn't move the icon */
		top: 18px;
		transform: translateY(-50%);
		width: 16px;
		height: 16px;
		background: url('/assets/img/magnifying_glass.svg') no-repeat center;
		background-size: 16px 16px;
		opacity: 0.6;
		pointer-events: none;
		z-index: 2;
	}

	.so-input--search .form-control,
	.so-input--search .select2-selection {
		padding-left: 40px;
	}

	.so-input--dropdown::after {
		content: '';
		position: absolute;
		right: 10px;
		/* Anchor to the input height (35px) so FV error text doesn't move the chevron */
		top: 18px;
		transform: translateY(-50%) rotate(90deg);
		width: 14px;
		height: 14px;
		background: url('/assets/img/ContextualMenu-nestedItem.svg') no-repeat center;
		background-size: 14px 14px;
		opacity: 0.55;
		pointer-events: none;
	}

	.so-input--dropdown .form-control {
		padding-right: 44px;
	}

	/* Allow wrap on very narrow screens to avoid collisions */
	@media (max-width: 360px) {
		.so-row--two {
			flex-wrap: wrap;
		}
		.so-row--with-action > .place-add-inline,
		.so-row--with-action > .place-remove-inline {
			align-self: flex-start;
			margin-top: 2px;
		}
	}

	.places-section {
		margin: 14px 0 6px;
	}

	.places-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		margin-bottom: 8px;
	}

	.places-title {
		font-size: 14px;
		font-weight: 600;
		color: #151515;
		margin: 0;
	}

	.places-header > .place-add-inline {
		flex: 0 0 34px;
		width: 34px;
		height: 34px;
		border-radius: 999px;
		border: none;
		background: #F2F3F8;
		color: #151515;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: 20px;
		line-height: 1;
		padding: 0;
	}

	.so-place-item {
		margin-top: 10px;
	}

	.required-services-header {
		display: flex;
		align-items: center;
		gap: 10px;
		margin-top: 14px;
	}

	.required-services-icon {
		width: 24px;
		height: 24px;
	}

	.required-services-title {
		font-size: 14px;
		font-weight: 700;
		color: #151515;
	}

	.required-services-list {
		padding-left: 0;
	}

	.required-services-list .checkbox {
		padding-left: 0;
		margin: 10px 0;
	}

	.required-services-list .checkbox label {
		display: flex;
		align-items: center;
		gap: 10px;
		justify-content: space-between;
		width: 100%;
	}

	.required-services-list .checkbox label input[type="checkbox"] {
		margin: 0 10px 0 0;
	}

	.required-services-list .checkbox-label {
		flex: 1;
		font-weight: 600;
		color: #151515;
	}

	.required-services-list .custom-tooltip {
		width: 22px;
		height: 22px;
		padding: 0;
		border-radius: 999px;
		background: #fff;
		border: 2px solid var(--brand-color);
		color: var(--brand-color);
		font-weight: 700;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 22px;
	}

	/* Tooltip modal (Figma) */
	.so-tooltip-modal {
		position: fixed;
		inset: 0;
		z-index: 9999;
		display: none;
	}

	.so-tooltip-modal__backdrop {
		position: absolute;
		inset: 0;
		background: rgba(0, 0, 0, 0.25);
	}

	.so-tooltip-modal__dialog {
		position: absolute;
		left: 50%;
		align-self: anchor-center;
		transform: translateX(-50%);
		width: calc(100% - 32px);
		max-width: 420px;
		background: #fff;
		border-radius: 10px;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
		padding: 18px 18px 16px;
	}

	.so-tooltip-modal__close {
		position: absolute;
		right: 10px;
		top: 10px;
		border: none;
		background: transparent;
		padding: 6px;
		line-height: 0;
	}

	.so-tooltip-modal__close img {
		width: 18px;
		height: 18px;
	}

	.so-tooltip-modal__content {
		display: flex;
		gap: 14px;
		align-items: flex-start;
	}

	.so-tooltip-modal__icon {
		width: 42px;
		height: 42px;
		border-radius: 999px;
		background: rgba(34, 154, 214, 0.10);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 42px;
	}

	.so-tooltip-modal__icon img {
		width: 22px;
		height: 22px;
	}

	.so-tooltip-modal__title {
		font-size: 16px;
		font-weight: 700;
		color: #151515;
		margin-bottom: 6px;
	}

	.so-tooltip-modal__body {
		font-size: 14px;
		color: #151515;
		display: grid;
		gap: 6px;
	}

	.title {
		color: #000;
		font-size: 18px;
		font-weight: 600;
		margin-bottom: 25px;
		text-transform: none;
	}

    .note {
        margin-bottom: 20px;
        font-size: 14px;
        color: #333;
    }

    .requirements-checkboxes > div {
        display: flex;
		flex-direction: column;
        margin-left: 20px;

        .checkbox {
            padding-left: 0;
        }
    }

    .trip-requirements-checkboxes {
        padding-left: 15px;

        .col-md-4 {
            padding-left: 0;
        }

        .checkbox {
            padding-left: 0;
        }
    }

    .custom-tooltip {
        display: flex;
        width: 13px;
        height: 13px;
        padding: 7px;
        justify-content: center;
        align-items: center;
        background-color: #F2F3F8;
        border-radius: 20px;
        font-size: 12px;
        font-weight: bold;
    }

    .form-group {
        margin-bottom: 15px;

        label {
            font-weight: 600;
            margin-bottom: 5px;
            display: block;
        }

        .form-control {
			background-color: #fff;
			border: 1px solid #bbbdc2;
            box-shadow: none;
			border-radius: 2px;
			height: 38px;
			padding: 8px 12px;
        }

		.input-group-btn .btn {
			background-color: #fff;
			border: 1px solid #bbbdc2;
			border-radius: 999px;
			margin-left: 10px;
			width: 40px;
			height: 40px;
			padding: 0;
			display: inline-flex;
			align-items: center;
			justify-content: center;
		}
    }

	.select2-selection {
		background-color: #fff;
		border: 1px solid #bbbdc2;
		box-shadow: none;
		border-radius: 2px;
		min-height: 38px;
	}

	.recipient-information-step .form-group > label,
	.trip-information-step .form-group > label {
		display: none;
	}

	.recipient-information-step .form-control::placeholder,
	.trip-information-step .form-control::placeholder {
		color: #6b6f77;
		opacity: 1;
		font-weight: 600;
	}

	.recipient-information-step .select2-selection__placeholder,
	.trip-information-step .select2-selection__placeholder {
		color: #6b6f77;
		font-weight: 600;
	}

	.recipient-information-step .action-buttons,
	.trip-information-step .action-buttons {
		justify-content: stretch;
	}

	.recipient-information-step .action-buttons .btn,
	.trip-information-step .action-buttons .btn {
		max-width: none;
	}

	.recipient-information-step .previous-step-button,
	.recipient-information-step .next-step-button,
	.trip-information-step .previous-step-button,
	.trip-information-step .next-step-button {
		display: none !important;
	}

    .type-switches {
        display: flex;
		flex-direction: column;
        margin-left: 20px;
		gap: 10px;

        div {
            display: flex;
            align-items: center;
            gap: 12px;

            input[type="radio"] {
				appearance: none;
				-webkit-appearance: none;
				margin: 0;
				width: 20px;
				height: 20px;
				border-radius: 999px !important;
				border: 1px solid #BBBDC2 !important;
				background: #fff;
				outline: none;
				flex: 0 0 20px;
				cursor: pointer;
				position: relative;
			}

			input[type="radio"]:checked {
				box-shadow: inset 0px 0px 0 3px #ffffff;
				background-color: var(--brand-color);
			}

			input[type="radio"]:focus-visible {
				box-shadow: inset 0 0 0 4px var(--brand-color), 0 0 0 3px rgba(34, 154, 214, 0.25);
			}

			input[type="radio"]:disabled {
				cursor: not-allowed;
				opacity: 0.6;
            }

            label {
                margin: 0;
                font-weight: 600;
				cursor: pointer;
            }
        }
    }

    .checkbox {
        margin-top: 10px;
        margin-bottom: 10px;

        label {
            padding-left: 0;
            display: flex;
            align-items: center;
            gap: 10px;

            input[type="checkbox"] {
                position: relative;
                margin: 0;
                width: 16px;
                height: 16px;
            }

            input[type="checkbox"]:focus {
                border: 1px solid #229AD6 !important;
            }

            .checkbox-label {
                font-weight: 600;
            }
        }
    }

    .action-buttons {
		display: flex;
		justify-content: center;
		gap: 10px;
		margin-top: 18px;
		padding-top: 0;
		border-top: none;

        .btn {
			width: 100%;
			max-width: 420px;
			min-width: 0;
			border-radius: 2px;
            font-weight: 600;
            padding: 10px 20px;

            &:hover {
                background-color: #00C3FF !important;
                border: 1px solid #00C3FF !important;
                color: #fff !important;
            }
        }

        .btn-primary {
			background-color: #229AD6;
			border: 1px solid #229AD6;
            color: #fff;
        }
    }

	.view-requests-screen {
		.requests-accordion {
			margin-top: 10px;
		}

		#service_order_requests {
			display: none;
		}

		.request-item {
			border-top: 1px solid #e6e8ec;
			padding: 10px 0;
		}

		.request-header {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: transparent;
			border: none;
			padding: 0;
		}

		.request-title {
			font-weight: 700;
			color: #000;
		}

		.request-toggle {
			width: 26px;
			height: 26px;
			border-radius: 999px;
			background: #229AD6;
			color: #fff;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			font-weight: 700;
		}

		.request-body {
			border: 1px solid #e6e8ec;
			padding: 12px;
			margin-top: 10px;
		}

		.request-meta {
			font-size: 14px;
			line-height: 1.4;
			margin-bottom: 12px;
		}

		.empty-state {
			padding: 10px 0;
			color: #6b6f77;
		}
	}

    .progress-tracker {
        position: relative;
        width: 100%;
        padding: 20px 0;
        font-family: sans-serif;
        box-sizing: border-box;
        height: 100px;

        .progress-lines {
            position: absolute;
            top: 45%;
            left: 0;
            width: 100%;
            height: 6px;
            transform: translateY(-50%);
            z-index: 1;

            .line-bg {
                position: absolute;
                width: 100%;
                height: 100%;
                background-color: #e9ecef;
                border-radius: 10px;
            }

            .line-active {
                position: absolute;
                height: 100%;
                background-color: #2297d4;
                border-radius: 10px;
                transition: width 0.4s ease-in-out;
                width: 0%;
            }
        }

        .progress-steps {
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 0;
            padding: 0;
            list-style: none;
            z-index: 2;
            width: 70%;
            margin-left: 5%;

            .step {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 50px;
                height: 50px;
                border-radius: 50%;
                background-color: #e9ecef;
                color: #FFF;
                font-weight: bold;
                font-size: 18px;
                box-sizing: content-box;

                &.active {
                    background-color: #2297d4;
                    color: #ffffff;
                    border-color: #ffffff;
                }
            }
        }

        &[data-state="0"] .line-active {
            width: 0%;
        }
        &[data-state="1"] .line-active {
            width: calc(5% + 25px);
        }
        &[data-state="2"] .line-active {
            width: calc(5% + 25px + (70% - 50px) / 3);
        }
        &[data-state="3"] .line-active {
            width: calc(5% + 25px + (70% - 50px) * 2 / 3);
        }
        &[data-state="4"] .line-active {
            width: calc(75% - 25px);
        }
        &[data-state="5"] .line-active {
            width: 100%;
        }
    }

    .places-list {
        margin-top: 15px;

        .place-item {
            background-color: #f9f9f9;
            padding: 10px;
            margin-bottom: 5px;
            border-left: 3px solid #2297d4;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .remove-place {
                color: red;
                cursor: pointer;
            }
        }
    }
}