.hub {
	border-bottom: 1px solid var(--neutral-300);
}

.hub__sidebar_title {
	font-size: 26px;
	line-height: 32px;
	padding: 4px 0;
	font-weight: 600;
	color: var(--primary-900);
	margin-bottom: 24px;
}

.hub__sides {
	display: flex;
	gap: 32px;
}

.hub__sidebar {
	flex: 0 0 320px;
}

.hub__sidebar_main_link,
.hub__sidebar_sublink {
	border-radius: 4px;
	padding: 8px;
	display: block;
	border: none;
	color: var(--neutral-700);
	font-size: 16px;
	line-height: 24px;
}

.hub__sidebar_main_link:hover,
.hub__sidebar_sublink:hover {
	color: var(--neutral-700);
	background: #FCFCFC;
}

.hub__sidebar_main_link:active,
.hub__sidebar_sublink:active {
	color: #3D3D3D;
	background: var(--secondary-200);
	font-weight: 600;
}

.hub__main {
	border-left: 0.5px solid var(--neutral-300);
	padding-left: 44px;
	flex: 1;
	padding-bottom: 64px;
}

.hub__sidebar_main_link.highlight,
.hub__sidebar_sublink.highlight {
	background-color: var(--secondary-200);
	color: #3D3D3D;
	font-weight: 600;
}

.hub__sidebar_main_link,
.hub__sidebar_sublink {
	display: flex;
}

.hub__sidebar_main_link:before,
.hub__sidebar_sublink:before {
	height: 24px;
	width: 24px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.hub__sidebar_main_link:before {
	content: "\2022";
}

.hub__sidebar_sublink:before {
	content: "\00B0";
	margin-left: 12px;
	position: relative;
	top: 4px;
}

.hub__category_title {
	font-size: 40px;
	line-height: 48px;
	font-weight: 600;
	color: var(--primary-900);
	margin-top: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.hub_type_main .hub__category_title {
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	margin-bottom: 0;
}

.hub__category_title:after {
	content: '';
	width: 32px;
	height: 32px;
	background-image: url(../../images/title-plus.svg);
}

.hub__category.active .hub__category_title:after {
	background-image: url(../../images/title-minus.svg);
}

.hub__category_description {
	padding-top: 24px;
}

.hub__category_description,
.hub__category_description p {
	font-size: 16px;
	line-height: 24px;
}

.hub__templates {
	padding-top: 32px;
}

.hub__category {
	margin-bottom: 32px;
}

.hub__category:last-child {
	margin-bottom: 0;
}

.hub__templates_category {
	background-color: var(--secondary-200);
	padding: 16px;
	font-size: 26px;
	line-height: 32px;
	font-weight: 600;
	color: var(--primary-900);
	margin-bottom: 0;
}

.hub__templates_item {
	border: 0.5px solid var(--secondary-300-blue);
	border-radius: 8px;
	overflow: hidden;
	margin-bottom: 32px;
}

.hub__templates_item:last-child {
	margin-bottom: 0;
}

.hub__template_title,
.hub__subtemplate_title {
	font-size: 20px;
	line-height: 32px;
	font-weight: 600;
	color: var(--primary-900);
	border: none;
	transition: color 0.2s;
	margin-bottom: 0;
}

.hub__template_title:hover,
.hub__template_title a:hover,
.hub__subtemplate_title:hover,
.hub__subtemplate_title a:hover {
	color: var(--primary-500-blue);
}

.hub__template_title:active,
.hub__template_title a:active,
.hub__subtemplate_title:active,
.hub__subtemplate_title a:active {
	color: var(--primary-600);
}

.hub__template_title a,
.hub__subtemplate_title a {
	border: none;
	transition: color 0.2s;
}

.hub__template_description,
.hub__subtemplate_description {
	font-size: 16px;
	line-height: 24px;
}

.hub__item,
.hub__subitem {
	padding: 16px;
}

.hub__subtemplate_title {
	display: flex;
}

.hub__subtemplate_title:before {
	content: "\2022";
	height: 32px;
	width: 30px;
	display: flex;
	justify-content: center;
}

.hub__subtemplate_description {
	padding-left: 30px;
}

.hub__template:nth-child(even) {
	background-color: var(--neutral-50);
}

.hub__template:nth-child(even) .hub__subtemplate:nth-child(odd) {
	background-color: #ffffff;
}

.hub__template:nth-child(even) .hub__subtemplate:nth-child(even) {
	background-color: var(--neutral-50);
}

.hub__template:nth-child(odd) {
	background-color: #ffffff;
}

.hub__template:nth-child(odd) .hub__subtemplate:nth-child(odd) {
	background-color: var(--neutral-50);
}

.hub__template:nth-child(odd) .hub__subtemplate:nth-child(even) {
	background-color: #ffffff;
}

.hub__item {
	display: flex;
	align-items: center;
	gap: 32px;
	justify-content: space-between;
}

.hub__toggle_subitems {
	flex-shrink: 0;
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
	color: var(--primary-500-blue);
	cursor: pointer;
	gap: 4px;
	display: flex;
	align-items: center;
	transition: color 0.2s;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

.hub__toggle_subitems:after {
	width: 20px;
	height: 20px;
	content: '';
	background-image: url(../../images/see-all-up.svg);
	rotate: 180deg;
	transition: rotate 0.3s ease;
}

.subtemplates_active .hub__toggle_subitems:after {
	rotate: 0deg;
}

.hub__toggle_subitems:hover {
	color: var(--primary-600);
}

.hub__toggle_subitems:active {
	color: var(--primary-900);
}

.hub__subtemplates {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease-out;
}

.subtemplates_active .hub__subtemplates {
	max-height: 800px;
}

.hub__category__content {
	display: none;
}

.hub__category.active .hub__category__content {
	display: block;
}

.hub_type_industry-specific .hub__category_title:after {
	display: none;
}

.hub__sidebar_sublist {
	display: none;
}

.hub__sidebar_item.active .hub__sidebar_sublist {
	display: block;
}

.hub_lookup_form {
	flex-wrap: wrap;
	margin-bottom: 48px;
	display: flex;
	align-items: center;
	gap: 24px;
	row-gap: 32px;
}

.hub_lookup_field_wrapper {
	position: relative;
	flex: 1;
}

input.hub_lookup_input {
	padding: 11px 14px;
	padding-right: 32px;
	padding-left: calc(14px + 20px + 8px);
	border-radius: 8px;
	border: 1px solid var(--neutral-300) !important;
	box-shadow: 0 1px 2px 0 rgba(84, 79, 99, 0.05);
	font-size: 14px;
	line-height: 24px;
	background-image: url(../../images/search-bar.svg);
	background-repeat: no-repeat;
	background-position: 14px center;
}

input.hub_lookup_input:hover {
	border-color: #C2D4F8 !important;
	outline: none;
}

input.hub_lookup_input:focus {
	border-color: #C2D4F8 !important;
	box-shadow: 0 0 0 4px #E9EFFF;
	outline: none;
}

.hub_lookup_button {
	padding: 12px 32px;
	border: none;
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
	color: #FFFFFF;
	display: flex;
	gap: 4px;
	border-radius: 8px;
	background-color: var(--primary-500-blue);
	cursor: pointer;
	transition: background-color 0.2s;
	align-items: center;
}

.hub_lookup_button:before {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	background-image: url(../../images/search-white.svg);
}

.hub_lookup_button:hover {
	background-color: var(--primary-600);
}

.hub_lookup_button:active {
	background-color: var(--primary-900);
}

input.hub_lookup_input::placeholder {
	color: var(--neutral-500);
}

.hub__search_results {
	border-radius: 8px;
	border: 1px solid var(--neutral-200, #ECECF4);
	flex: 0 0 100%;
	margin-bottom: 12px;
}

ul.hub__search_results:empty {
	display: none;
}

.hub__search_result_item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px;
}

.hub__search_result_title {
	font-size: 20px;
	line-height: 32px;
	font-weight: 600;
	color: var(--primary-900);
	display: block;
	border: none;
}

.hub__search_results em {
	font-style: normal;
	background-color: var(--primary-200);
}

.hub__search_result_description {
	font-size: 16px;
	line-height: 24px;
}

.hub__search_create_link {
	font-size: 14px;
	line-height: 18px;
	font-weight: 600;
	color: var(--primary-500-blue);
	display: flex;
	border: none;
	gap: 4px;
	align-items: center;
	margin-top: 10px;
}

.hub__search_create_link:after {
	content: '';
	width: 16px;
	height: 16px;
	background-image: url(../../images/create-arrow.svg);
	display: block;
}

.hub__search_result__toggle {
	padding-left: 16px;
	padding-right: 16px;
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
	color: var(--primary-500-blue);
	display: flex;
	align-items: center;
	gap: 4px;
	cursor: pointer;
	flex-shrink: 0;
}

.hub__search_result__toggle:after {
	content: '';
	width: 20px;
	height: 20px;
	background-image: url(../../images/see-all-up.svg);
	rotate: 180deg;
	transition: rotate 0.3s ease;
}

.hub__search_result.open .hub__search_result__toggle:after {
	rotate: 0deg;
}

.hub__search_result .hub__search_subresults {
	display: none;
}

.hub__search_result.open .hub__search_subresults {
	display: block;
}

.hub__search_subresult {
	padding: 16px;
	display: flex;
}

.hub__search_subresult:before {
	content: "\2022";
	height: 32px;
	flex: 0 0 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 20px;
	line-height: 32px;
	font-weight: 600;
	color: var(--primary-900);
}

.hub__search_subresult_title {
	font-size: 20px;
	line-height: 32px;
	font-weight: 600;
	border: none;
	color: var(--primary-900);
}

.hub__search_result_title,
.hub__search_result__toggle,
.hub__search_create_link,
.hub__search_subresult_title a {
	transition: color 0.2s;
}

.hub__search_result_title:hover,
.hub__search_result__toggle:hover,
.hub__search_create_link:hover,
.hub__search_subresult_title:hover {
	color: var(--primary-600);
}

.hub__search_subresult_description {
	font-size: 16px;
	line-height: 24px;
}

@media (max-width: 991px) and (min-width: 768px) {
	.hub__sidebar {
		flex: 0 0 220px;
	}
}

@media (min-width: 768px) {
	.hub__sides {
		align-items: flex-start;
	}

	.hub__sidebar {
		position: sticky;
		top: calc((var(--wp-admin--admin-bar--height, 0px) + var(--header-height, 0px) + var(--hub-search-height, 0px)));
		padding-bottom: 64px;
	}
}

@media (max-width: 767px) {
	section.hub.hub_type_main {
		margin-top: -64px;
	}

	section.hub.hub_type_main #search {
		padding-top: 64px;
	}

	.hub_lookup_button_text {
		display: none;
	}

	.hub_lookup_button {
		padding: 14px;
	}

	.hub__search_result_title,
	.hub__search_subresult_title {
		font-size: 16px;
		line-height: 24px;
	}

	.hub__search_result__toggle {
		padding-left: 8px;
		padding-right: 0;
	}

	.variations_word {
		display: none;
	}

	.hub_lookup_form {
		gap: 8px;
		row-gap: 24px;
		margin-bottom: 24px;
	}

	.hub__search_results {
		margin-bottom: 0;
	}

	.hub__sidebar_sublist {
		display: block;
	}

	.hub__sides {
		flex-direction: column;
	}

	.hub__sidebar {
		flex: 1;
		position: fixed;
		top: calc((var(--header-height, 0px) + var(--hub-search-height, 0px)));
		left: 0;
		width: 100%;
		background-color: var(--neutral-50);
		padding-left: 16px;
		padding-right: 16px;
		z-index: 1;
		overflow: auto;
		max-height: calc(100 * var(--vh, 1vh) - 72px);
	}

	.hub__sidebar.active {
		padding-bottom: 16px;
	}

	.hub__sidebar_title {
		margin-bottom: 0;
		padding-top: 16px;
		padding-bottom: 16px;
		font-size: 16px;
		line-height: 26px;
		font-weight: 600;
		color: var(--primary-900);
		display: flex;
		align-items: center;
		gap: 8px;
		justify-content: space-between;
		cursor: pointer;
	}

	.hub__sidebar_title:after {
		content: '';
		width: 28px;
		height: 28px;
		display: block;
		background-image: url(../../images/categories-down.svg);
		transition: rotate 0.3s ease;
	}

	.hub__sidebar.active .hub__sidebar_title:after {
		rotate: 180deg;
	}

	.hub__sidebar.active .hub__sidebar_title {
		border-bottom: 1px solid var(--neutral-300);
	}

	.hub__main {
		border-left: none;
		padding-left: 0;
	}

	.hub__sidebar_list {
		display: none;
	}

	.hub__sidebar.active .hub__sidebar_list {
		display: block;
		margin-top: 10px;
	}

	.hub__sidebar_title {
		background-color: var(--neutral-50);
	}

	.hub__category_title {
		font-size: 24px;
		line-height: 32px;
		margin-bottom: 16px !important;
	}

	.hub__category_description {
		padding-top: 0;
	}

	.hub__templates_category {
		font-size: 20px;
		line-height: 28px;
	}

	.hub__template_title, .hub__subtemplate_title {
		font-size: 16px;
		line-height: 24px;
	}

	.hub__template_description, .hub__subtemplate_description {
		font-size: 14px;
		line-height: 22px;
	}

	.variations_words {
		display: none;
	}

	.hub__item {
		gap: 8px;
	}

	.hub__templates_item {
		margin-bottom: 24px;
	}

	.hub__category {
		margin-bottom: 24px;
	}

	.hub {
		border-bottom: none;
	}

	.hub__main {
		padding-bottom: 0;
	}
}