#searchResults {
	display: flex;
    flex-direction: column;
	gap: 20px;
	margin-top: 40px;
}

#searchResults:empty {
	display: none;
}

[data-type="searchResult"] {
	display: flex;
    flex-direction: row;align-items: stretch;
	width: 100%;
	word-break: break-word;
	word-wrap: break-word;
    border-radius: 10px;
}

[data-type="searchMatches"] {
	background-color: var(--shade-1);
	border-radius: 10px;
	border-top-left-radius: unset;
	border-bottom-left-radius: unset;
}

[data-type="searchMatches"] a {
	width: fit-content;
}

[data-type="searchMatches"] hr {
	margin-top: var(--spacing-normal);
	margin-bottom: var(--spacing-normal);
}

[data-type="searchMatches"] [data-type="badge"] {
	margin: 5px 0;
}

[data-type="searchResult"] [data-type="searchSource"] {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	background-color: #252525;
	border-radius: 10px;
	border-top-right-radius: unset;
	border-bottom-right-radius: unset;		
}

[data-id] [data-chatbot="resultIMG"] {
	background-color: #252525;
}

#uptime[data-type="searchResult"] [data-type="searchSource"],
[data-id="uptime"] [data-chatbot="resultIMG"] {
	background-color: #C1292E;
}

#services[data-type="searchResult"] [data-type="searchSource"],
#chat[data-type="searchResult"] [data-type="searchSource"],
[data-id="services"] [data-chatbot="resultIMG"],
[data-id="chat"] [data-chatbot="resultIMG"] {
	background-color: #7EA16B;
}

#accessibility-information[data-type="searchResult"] [data-type="searchSource"],
#privacy-policy[data-type="searchResult"] [data-type="searchSource"],
#contacts[data-type="searchResult"] [data-type="searchSource"],
#style[data-type="searchResult"] [data-type="searchSource"],
#tools-and-resources[data-type="searchResult"] [data-type="searchSource"],
[data-id="accessibility-information"] [data-chatbot="resultIMG"],
[data-id="privacy-policy"] [data-chatbot="resultIMG"],
[data-id="contacts"] [data-chatbot="resultIMG"],
[data-id="style"] [data-chatbot="resultIMG"],
[data-id="tools-and-resources"] [data-chatbot="resultIMG"] {
	background-color: #9395D3;
}

#games[data-type="searchResult"] [data-type="searchSource"],
#moomin[data-type="searchResult"] [data-type="searchSource"],
#movies[data-type="searchResult"] [data-type="searchSource"],
#music[data-type="searchResult"] [data-type="searchSource"],
#shows[data-type="searchResult"] [data-type="searchSource"],
#style[data-type="searchResult"] [data-type="searchSource"],
[data-id="games"] [data-chatbot="resultIMG"],
[data-id="moomin"] [data-chatbot="resultIMG"],
[data-id="movies"] [data-chatbot="resultIMG"],
[data-id="music"] [data-chatbot="resultIMG"],
[data-id="shows"] [data-chatbot="resultIMG"],
[data-id="style"] [data-chatbot="resultIMG"] {
	background-color: #FFBA49;
}

[data-type="searchResult"] [data-type="searchSource"] img {
    width: 200px;
    height: auto;
    flex-shrink: 0;
}

[data-type="searchResult"] [data-type="searchMatches"] {
    flex: 1;
}

[data-type="searchResult"] a {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 20px;
	text-decoration: none;
}

[data-type="searchSource"] > a {
	align-items: center;
	width: 100%;
}

[data-type="searchResult"] a h2 {
	line-height: 0.8;
}

[data-type="searchMatches"] {
    padding: 20px;
	width: 100%;
}

@media only screen and (max-width: 48rem) {
	[data-type="searchResult"] {
        flex-direction: column;
	}
	
	[data-type="searchResult"] [data-type="searchSource"] {
		align-items: center;
		width: 100%;
	}
	
	[data-type="searchResult"] [data-type="searchSource"] img {
		width: 100%;
		max-width: 200px;
		height: auto;
		flex-shrink: unset;
	}
	
	[data-type="searchResult"] [data-type="searchSource"] {
		border-radius: unset;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
	}
	
	[data-type="searchMatches"] {
		border-radius: unset;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
	}	
}

[data-type="searchHighlight"],
[data-type="searchResult"] [data-type="searchHighlight"] {
    display: inline;
    transition: none;
    transform: none;
    background-color: var(--focus-color);
    font-weight: 700;
}

[data-type="searchResult"] ol[data-active="false"] li:nth-of-type(n + 4),
[data-chatbot="result"] ul[data-active="false"] li:nth-of-type(n + 4) {
    display: none;
}

[data-type="searchResult"] ol[data-active="true"] li:nth-of-type(n + 4),
[data-chatbot="result"] ul[data-active="true"] li:nth-of-type(n + 4) {
    display: list-item;
}

[data-type="searchResult"] ol[data-type="results"]:not(:has(li:nth-child(4))) + button.toggle,
[data-chatbot="result"] ul:not(:has(li:nth-child(4))) + button.toggle {
    display: none;
}

[data-type="searchResult"] ol[data-type="results"]:has(li:nth-child(4)) + button.toggle,
[data-chatbot="result"] ul:has(li:nth-child(4)) + button.toggle {
    display: inline-block; 
}

[data-type="searchContainer"] {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
	margin-top: 30px;
}

#searchInput {
	flex: 1 1 auto;
	min-width: 0;
}

#searchButton {
	flex: 0 0 auto;
}

@media only screen and (max-width: 48rem) {
	[data-type="searchContainer"] {
		flex-direction: column;
	}

	#searchInput,
	#searchButton {
		flex: 1;
		width: 100%;
	}
}

[data-chatbot="search"] {
	display: flex;
	flex-direction: column;
	gap: 20px;
	word-wrap: break-word;
}

[data-chatbot="result"] {
	display: flex;
	flex-direction: row;
	gap: 20px;
	border: 2px solid var(--info-color);
	border-radius: 10px;
	background-color: #F2F2F4;
	padding: 20px;
	margin-bottom: 10px;
}

[data-chatbot="result"] [data-chatbot="resultIMG"] {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex: 0 0 auto;	
	width: 100%;
	max-width: 200px;
	height: auto;
	border-radius: 10px;
}

[data-chatbot="result"] [data-chatbot="resultIMG"] a {
	display: flex;
	justify-content: center;
	width: 100%;
}

[data-chatbot="result"] > div {
	flex: 1 1 auto;
	min-width: 0;
	margin-top: 0;
}

@media only screen and (max-width: 48rem) { 
	[data-chatbot="result"] {
		flex-direction: column;
	}
	
	[data-chatbot="result"] [data-chatbot="resultIMG"] {
		max-width: unset;
	}
	
	[data-chatbot="result"] [data-chatbot="resultIMG"] img {
		max-width: 200px;
	}
}

[data-chatbot="result"] ul {
	margin-top: 0;
}

[data-chatbot="result"] > ul h3 {
	margin-top: 0;
}

[data-type="message-container"] {
	width: 100%;
}

#filter-container,
#result-count {
    margin-top: 25px;
}

[data-chat~="chatbot-prefill"] {
	display: flex;
	flex-direction: row;
	gap: 15px;
	list-style: none;
	margin-left: 0;
	padding-left: 0;
	transition-duration: 1000ms;
}

@media only screen and (max-width: 48rem) {
	[data-chat~="chatbot-prefill"] {
		flex-direction: column;
	}
}

[data-chat~="chatbot-prefill"] li {
	width: 100%;
	border: 2px solid #252525;
	border-radius: 5px;
	padding: 15px;
	cursor: pointer;
	transition: transform 250ms;
	will-change: transform;
	background-color: var(--bg-color);
	z-index: 1;
}

[data-chat~="chatbot-prefill"] li::before {
	content: "";
	padding-right: 35px;
}

[data-chat~="chatbot-prefill"] li:hover {
	transform: scale(1.05);
	transition-duration: 250ms;
	z-index: 2;
}

[data-entity~="user"],
[data-entity~="bot"] {
    display: flex;
	flex-direction: row;
    gap: 10px;
}

@media only screen and (max-width: 48rem) {
	[data-entity~="user"],
	[data-entity~="bot"] {
		flex-direction: column;
		gap: 0;
	}
}

[data-entity~="bot"] + [data-entity~="bot"] {
	display: none;
}

[data-entity~="user"]:nth-child(2) {
	display: none;
}

[data-entity~="user"]::before {
  	content: 'YOU: ';
	color: var(--error-color);
	margin-right: -1px;
}

[data-entity~="bot"]::before {
  	content: 'SAB: ';
	color: var(--info-color);
}

[data-chat~="chatbot-box"] {
	display: flex;
	flex-direction: column;
	position: relative;
	height: 100%;
	max-height: calc(100vh - 608px);
	border: 2px solid #252525;
	border-radius: 5px;
	margin-top: 15px;
	margin-bottom: 25px;
	padding: 25px;
	background-color: #FBFBFB;
	overflow: auto;
	transition-duration: 1000ms;
}

@media only screen and (max-width: 48rem) {
	[data-chat~="chatbot-box"] {
		max-height: unset;
		min-height: 600px;
		gap: 10px;
	}
}

[data-chat~="chatbot-input"] {
	display: flex;
	gap: 25px;
}

[data-chat~="chatbot-input"] input {
	padding: 25px;
	width: 100%;
	border: 2px solid #252525;
	border-radius: 5px;
	background-color: var(--shade-5);
}

[data-chat~="chatbot-input"] button {
	width: fit-content;
	min-width: 150px;
}

@media only screen and (max-width: 48rem) {
	[data-chat~="chatbot-input"] {
		flex-direction: column;
	}

	[data-chat~="chatbot-input"] button {
		width: 100%;
	}
}

#searchInput[data-autocomplete="active"] {
	border-radius: unset;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;		
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;	
}

[data-chatbot="matches"] {
	margin-top: 5px;
}

[data-chatbot="matches"] h2 {
	margin-top: 5px;
}

[data-chatbot="matches"] a,
[data-chatbot="matches"] h2,
[data-chatbot="matches"] h2:hover {
	text-decoration: none;
}

[data-chatbot="matches"] hr {
    margin-top: var(--spacing-normal);
	margin-bottom: var(--spacing-normal);	
}

label:has(#match-any) {
	border-radius: 5px;
}