/* SEARCH */
.search {
	border: 3px solid var(--border-color);
	border-radius: var(--main-border-radius);
	margin: 2rem 0rem;
}

.search.disabled p {
	color: rgba(200, 200, 200, 1.0);
}

.search_header {
	padding: 2rem;
	display: flex;
	cursor: pointer;
}

.search.disabled .search_header {
	cursor: default;
}

.search_icon {
	position: relative;
	border: 3px solid var(--border-color);
	border-radius: var(--main-border-radius);
	align-content: center;
	vertical-align: center;
	text-align: center;
	width: 4rem;
}

.search_icon img {
	filter: grayscale(100%);
	width: 2rem;
}

.search_icon img.corner {
	filter: none;
	position: absolute;
	right: -0.75rem;
	bottom: -0.75rem;
	width: 1.5rem;
}

.search_icon.calendar {
	background-image: url('../icon/calendar_gray.png');
	background-size: 1.25rem 1.25rem;
}

.search_icon.plane {
	background-image: url('../icon/plane_gray.png');
	background-size: 2rem 2rem;
}

.search_text {
	padding: 0rem 1rem;
	align-content: center;
	vertical-align: center;
	text-align: left;
	width: 100%;
}

.search_title {
	font-weight: bold;
	font-size: 1.5rem;
}

.search_toggle_container {
	align-content: center;
	vertical-align: center;
	text-align: right;
}

.search_toggle {
	background-image: url('data:image/svg+xml,<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="gray" d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"></path></svg>');
	width: 2rem;
	height: 2rem;
}

.revert {
	transform-origin: center center;
	transform: scale3d(1, -1, 1);
}

.hiddeable_content_wrapper.hidden {
	grid-template-rows: 0fr;
}

.hiddeable_content_wrapper {
	display: grid !important;
	grid-template-rows: 1fr;
	transition: grid-template-rows 0.25s ease-out;
}

.hiddeable_content_wrapper.hidden .hiddeable_content {
	transition: padding 0s 0.15s;
	padding: 0rem;
}

.hiddeable_content {
	overflow: hidden;
	padding: 0rem 2rem 2rem 2rem;
}

.flights_table {
	border: 3px solid var(--border-color);
	border-radius: var(--main-border-radius);
}

.flights_table_tabs {
	display: flex;
	height: 5rem;
}

.flights_table_tab {
	height: 100%;
	width: 33.33%;
	font-size: 1rem;
	font-weight: bold;
	align-items: center;
	align-content: center;
	padding: 1rem;
	border: 1px solid white;
	border-bottom: 3px dotted #eeeeee;
	border-top-left-radius: var(--main-border-radius);
	border-top-right-radius: var(--main-border-radius);
}

.flights_table_tab.disabled {
	background-color: #eeeeee;
	border-bottom: unset;
	cursor: pointer;
}

.flights_table_content {
	padding: 2rem;
}

.flights_table_items {
	padding: 1px 0px;
}

.flights_table_item {
	border: 3px solid var(--border-color);
	border-radius: var(--main-border-radius);
	margin: 1rem 0rem;
	cursor: pointer;
}

.flights_table_item:hover {
	background-color: rgba(20, 115, 230, 0.25);
}

.flights_table_item.flight_selected {
	border: 3px solid var(--border-flight-selected-color);
}

.flight_summary {
	text-align: center;
	border-bottom: 3px solid var(--border-color);
}

.flight_summary_icon {
	width: 1.5rem;
	vertical-align: middle;
	filter: grayscale(100%);
}

.flight_leg_preview {
	display: flex;
	position: fixed;
	z-index: 100;
	opacity: 1;
	transition: opacity 0.5s ease, display 0.5s ease allow-discrete;
	&.hidden {
		display: none;
		opacity: 0;
	}
}

@starting-style {
	.flight_leg_preview {
		opacity: 0;
	}
}

.flight_content {
	padding: 1rem;
	position: relative;
	display: flex;
	align-items: center;
	margin: auto;
}

.flight_content > div {
	margin: 0.5rem;
}

.your_flight_details_content .flight_icon,
.your_flight_details_content .flight_time_text,
.your_flight_details_content .stopover_text {
	min-width: 7.5rem;
	text-align: center;
}

.flight_icon img {
	filter: grayscale(100%);
	width: 2rem;
}

.flight_line {
	width: 100%;
}

.flight_details {
	text-align: center;
	padding: 0.5rem;
}

.flight_scheduled_duration, .flight_actual_duration {
	white-space: nowrap;
}

.dash_line {
	border: 2px dashed var(--border-color);
	padding: 0rem;
}

.select_container {
	display: flex;
	position: fixed;
	z-index: 100;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.8);
	opacity: 1;
	transition: opacity 0.5s ease, display 0.5s ease allow-discrete;
	&.hidden {
		display: none;
		opacity: 0;
	}
}

@starting-style {
	.select_container {
		opacity: 0;
	}
}

.select_flight {
	margin: auto;
	min-width: 40rem;
	border: 3px solid var(--border-color);
	border-radius: var(--main-border-radius);
	background-color: #ffffff;
	box-shadow: 0rem 0rem 2rem 0rem var(--shadow-color);
	padding: 2rem 0rem;
}

.select_flight_title {
	font-size: 1.25rem;
	font-weight: bold;
	margin: 1rem 3rem;
}

.select_flight .flight_leg {
	margin: 1rem 3rem;
}

.flight_leg {
	padding: 1rem;
	border: 3px solid var(--border-color);
	border-radius: var(--main-border-radius);
	cursor: pointer;
	background-color: var(--background-color);
}

.flight_leg:hover {
	border-color: var(--border-flight-selected-color);
}

.flight_leg_content {
	display: flex;
}

.flight_leg_left {
	height: 100%;
	text-align: center;
	align-content: center;
	align-items: center;
	margin: 0.4rem 0.5rem;
}

.flight_leg_dash_line {
	border: 2px dashed var(--border-color);
	padding: 0rem;
	height: 3rem;
	width: 0px;
}

.flight_leg_right {
	height: 100%;
	margin: 0rem 0.5rem;
}

.flight_info_line {
	display: flex;
}

.flight_info_line > div {
	margin: 0.25rem 0.5rem;
}

.your_flight_details_content .flight_info_line > div {
	margin: 0.25rem 0rem;
}

.your_flight_details_content .flight_time_type,
.your_flight_details_content .flight_time,
.your_flight_details_content .flight_duration,
.your_flight_details_content .stopover_time {
	min-width: 8rem;
	text-align: center;
}

.your_flight_details_header {
	display: flex;
	margin: 0rem 0rem 1rem 0rem;
	padding: 0rem 0rem 0rem 10.5rem;
}

.origin_airport_location, .destination_airport_location {
	background-color: var(--secondary-background-color);
	padding: 0.5rem;
	border-radius: var(--main-border-radius);
	text-align: center;
}

.stopover {
	display: flex;
	background-color: var(--secondary-background-color);
	padding: 1rem;
	border-radius: var(--main-border-radius);
}

.stopover img {
	width: 1.5rem;
  vertical-align: middle;
	margin: 0rem 0.5rem 0rem 0rem;
}

.your_flight_entry {
	border: 3px solid var(--your-flight-color);
	border-radius: var(--main-border-radius);
	background-color: var(--your-flight-color);
	margin: 1rem 0rem;
	padding: 2rem;
}

.your_flight_entry:has(.your_flight_summary) {
	border: 3px solid var(--border-color);
	border-radius: var(--main-border-radius);
	padding: 1rem;
	background-color: var(--background-color);
}

.your_flight_details {
	display: flex;
}

.your_flight_details_toggler.button {
	margin-left: 2rem;
	max-width: 10rem;
}

.details_toggler {
	background-image: url('data:image/svg+xml,<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"></path></svg>');
	width: 2rem;
	height: 2rem;
}

.your_flight_details > div {
	width: 50%;
}

.your_flight_details_content {
	margin: 1rem;
	border: 3px solid var(--border-color);
	border-radius: var(--main-border-radius);
	padding: 1rem;
}

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

.your_flight_details_content .flight_leg {
	border: 0px solid var(--border-color);
	cursor: unset;
	margin: unset;
}

.your_flight_details_right {
	padding: 0.5rem;
}

.reason_header {
	display: inline-block;
	margin: 1rem 0rem 0rem 0rem;
	font-weight: bold;
	font-size: 1rem;
}

.explanation_header {
	margin: 1rem auto;
	font-weight: bold;
	font-size: 1rem;
}

.explanation {
	width: 100%;
	height: 10rem;
	margin: auto;
	padding: 1rem;
}

.result_row {
	display: flex;
}

.result_content {
	align-content: center;
}

.result_icon {
	width: 3rem;
	margin-right: 1rem;
}

.result_header {
	font-weight: bold;
	font-size: 1.5rem;
}

.start_over {
	cursor: pointer;
	color: blue;
	&:hover {
		text-decoration: underline;
	}
}

.passengers_header {
	font-weight: bold;
	font-size: 1.25rem;
}

.passenger {
	margin: 1rem 0rem;
}

.passenger_header {
	padding: 1rem 1rem;
	font-weight: bold;
}

.passenger_details, .legal_representative {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	border: 2px solid rgba(100, 100, 100, 0.25);
	border-radius: var(--main-border-radius);
	background-color: white;
	padding: 0.5rem 2rem;
}

.passenger_type {
	margin: 0rem 1rem;
	font-size: 1rem;
}

.passenger_delete_icon {
	width: 2rem;
	vertical-align: middle;
	cursor: pointer;
}

.passenger_delete_icon:active {
	transform: translateY(1px) translateX(-1px);
}

.passengers_input {
	display: flex;
	margin: 0.5rem 0rem;
}

.passengers_input label {
	display: flex;
	align-items: center;
	font-weight: bold;
	min-width: 28rem;
	justify-content: right;
}

.passengers_input input {
	margin: 0rem 1rem;
	width: 18rem;
	height: 2rem;
	border: 1px solid black;
	border-radius: 0.3rem;
	padding-left: 1rem;
}

.reason.invalid, .explanation.invalid, .passengers_input .invalid, #accept.invalid {
	outline: 2px solid red;
}

.legal_representative {
	border: 0px;
	border-top: 1px solid black;
	border-left: 1px solid black;
	border-image: linear-gradient(to right bottom, rgba(0, 0, 0, 0.5) 0% 10%, rgba(0, 0, 0, 0) 50% 100%) 1;
	border-image-slice: 10;
	margin: 2rem 0rem;
	padding: 1rem 0rem;
	position: relative;
}

.legal_representative:before {
	content: attr(text);
	font-weight: bold;
	position: absolute;
	top: -1rem;
	left: 1rem;
	background-color: white;
	padding: 0 1rem;
}

.passengers_new {
	display: inline-block;
	border: 3px solid var(--main-color);
	border-radius: 0.5rem;
	color: var(--main-color);
	margin-top: 1rem;
	padding: 1rem;
	cursor: pointer;
}

.passengers_new:hover {
	background-color: rgba(20, 115, 230, 0.1);
}

.passengers_new:active {
	transform: translateY(1px) translateX(-1px);
}

.summary {
	border: 3px solid white;
	border-radius: var(--main-border-radius);
	background-color: white;
	padding: 2rem;
}

.summary_header {
	font-weight: bold;
	font-size: 1.25rem;
}

.summary_table {
	width: 100%;
	margin: 1rem 0rem;
}

.summary_row {
	display: flex;
	align-items: right;
	border-bottom: 1px solid var(--your-flight-color);
	padding: 0.5rem 0rem;
}

.summary_row_left {
	width: 70%;
	text-align: left;
}

.summary_row_right {
	width: 30%;
	text-align: right;
	font-weight: bold;
	white-space: nowrap;
}

.accept > input {
	vertical-align: middle;
	margin: 0rem 0.25rem 0rem 0rem;
}