.far-page-matches-container{

	& .far-match-text{
		color:#e99618;
	}

	& .far-match-text-container{
		padding:0 0.2rem;
	}

	& > .row > .col-xl{
		background-color:#eee;
		padding-top:1rem;
		padding-bottom:1rem;
	}

	& > .row > .col-xl:first-child{
		margin-right:0.5rem;
	}

}

.far-item{
	margin-bottom:1rem;

	& .far-info-container{
		font-size:0.9rem;
		margin-bottom:0.5rem;
	}
}

#results-container > .far-item:not(:last-child){
	border-bottom:1px solid silver;
	padding-bottom:0.5rem;
	margin-bottom:0.5rem;
}

@media screen and (max-width:map-get($grid-breakpoints, xl)){
	.far-page-matches-container{
		& > .row > .col-xl:first-child{
			margin-right:0;
		}
	}
}

#main-application-container{
	max-width: 1320px;
	padding: 0 #{$spacer * .5};
	margin: 0 auto;
	overflow: hidden;
	position: relative;

	.replacement-banner-message-container {
		position: fixed;
		bottom: 5%;
		left: 15%;
		z-index: 10;
		width: 30rem;
		gap: .5rem;
		display: flex;
		flex-direction: column-reverse;

		.replacement-banner-message{
			background-color: $success;
			color: color-contrast($success);
			border-radius: 4px;
			border: 1px solid $white;
			text-align: center;
			padding: .5rem;
		}
	}

	.card-header{
		padding: 1rem 2rem;
		
		h4{
			margin: 0;
		}
	}

	.card-body{
		padding: 1.5rem 2rem;

		.result-stub-container{
			margin-bottom: 1.5rem;
		}

		.content{
			
			p{
				margin-bottom: 1.5rem;
			}

			hr{
				margin-top: 0;
				margin-bottom: 1.5rem;
			}
		}

		.input-forms-container{
			display: flex;
			gap: 52px;

			form {
				flex: 1;
				width: 100%;
			}

			.form-group {
				display: flex;
				flex-direction: column; 
				width: 100%;
			
				label {
					font-style: normal;
					font-weight: 600;
					padding-bottom: .5rem;  
				}
			}

			#search-form {
				display: flex;
				gap: 1rem;
				align-self: stretch;
				border-radius: 8px;
	
				.input-group {
					width: 100%;
					height: 48px;

					.form-control{
						padding: 0;
					}
				}
				
				.input-group-text {
					display: flex;
					align-items: center;
					gap: .75rem;
					background-color: #FFFFFF;
				}
			}

			#replace-form{
				display: flex;
				gap: 1rem;
				align-self: stretch;
				border-radius: 8px;

				.input-group {
					width: 100%;
					height: 48px;

					.form-control{
						padding: 0;
					}
				}
				
				.input-group-text {
					display: flex;
					align-items: center;
					gap: .75rem;
					background-color: #FFFFFF;
				}
			}
		}
	}

	#replace-form-container{
		margin-top: 1.5rem;

		#replace-all-occurrences-button{
			display: inline-flex;
			padding: .75rem 1.5rem;
			justify-content: center;
			align-items: center;
			gap: .5rem;
			border-radius: 4px;
			border: 1px solid #4aa15e;
			background: #4aa15e;
			transition: all 0.3s ease;

			&:hover{
				background-color: #3f8950;
			}
		}
	}

	.card{

		.results-header{
			padding: 1rem 2rem;
			border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
			border-bottom: 1px solid rgba(0, 0, 0, .125);
			margin-bottom: 0;
			background-color: rgba(0, 0, 0, .03);

			h4{
				margin: 0;
				font-size: 1.25rem;
			}
		}

		.replace-all-button-container{

			.text-end{

				#replace-all{
					display: inline-flex;
					padding: .5rem 1rem;
					justify-content: center;
					align-items: center;
					gap: .5rem;
					border-radius: 4px;
					border: 1px solid #1B7DD1;
					background: #1B7DD1;
					transition: all 0.3s ease;

					&:hover{
						background-color: #0a58ca;
						border-color: #0a58ca;
					}
				}
			}
		}
	}
}

#search-results-container{

	.card{

		.card-header{
			padding: 1rem 2rem;
			border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
			border-bottom: 1px solid rgba(0, 0, 0, .125);
			margin-bottom: 0;
			background-color: rgba(0, 0, 0, .03);
	
			h4{
				margin: 0;
				font-size: 1.25rem;
			}
		}
	
		.result-card-body{
			padding: 1.5rem 2rem;
			
			.page-body-column{
				padding: 0;
			}
	
			.page-head-column{
				padding: 0;
			}
	
			.page-tabs{
				margin-bottom: 1.5rem;
	
				.nav{
					gap: 1.5rem;
					
					.nav-item{
	
						.body-tab-button{
							color: #212529;
							padding: 0;
							border: none;
							border-bottom: 2px solid transparent;
							transition: color 0.3s, border-bottom 0.3s;
							background-color: transparent;
	
							&:hover {
								color: #0d6efd;
							}
	
							&.active{
								border-bottom: 2px solid #0d6efd;
								padding-bottom: .5rem;
								color: #0d6efd;
							}
						}
						.nav-link{
							color: #212529;
							padding: 0;
							border: none;
							border-bottom: 2px solid transparent;
							transition: color 0.3s, border-bottom 0.3s;
							background-color: transparent;
	
							&:hover {
								color: #0d6efd;
							}
	
							&.active{
								border-bottom: 2px solid #0d6efd;
								padding-bottom: .5rem;
								color: #0d6efd;
							}
						}
					}
				}
	
				.edit-button{
					margin-left: auto;
				}
			}
		
			.container-fluid{
				margin-bottom: 1.5rem;
	
				.stubs-container{
					display: flex;
					flex-direction: column;
					align-items: stretch;
					width: 100%;
					padding: 0;
	
					.stub-container{
						background-color: rgba(0, 0, 0, .062);
						padding: .5rem;
						width: 100%;
					}
	
					span{
						width: 100%;
					}
				}
			}

			.replace-section-buttons {
				display: flex;
				justify-content: end;
				gap: 2rem;
			
				.replace-btns {
					display: inline-flex;
					padding: .5rem 1rem;
					justify-content: center;
					align-items: center;
					gap: .5rem;
					border-radius: 4px;
					border: 1px solid #1B7DD1;
					background: #1B7DD1;
					transition: all 0.3s ease;
					color: white;
			
					&.hidden {
						display: none;
					}
			
					&:hover {
						background-color: #0a58ca;
						border-color: #0a58ca;
					}
				}
			}
		}
	}
}