/*------------------------------------*\

    Hide/Show Text Area - Global styling for all hide/show text

    This method is CSS heavy and light on JS, which is important for good SEO and CWV results
    Find the code snippet here: https://webfxcodelibrary.webpagefxstage.com/#intermediate_cssshowhidetext

\*------------------------------------*/

.read-more__box {
	margin-bottom: 30px;
}

.read-more__content {
	position: relative;
}

.expand {
	position: relative;
	margin-top: 30px;
}

.read-more__content .expand {
	display: none;
}

.read-more__content.ddd-truncated .expand {
	display: inline-block;
}

.expand--less,
.fx-untruncated .expand--more {
	display: none;
}

.fx-untruncated .expand--less {
	display: inline;
}

.read-more__box {
	max-height: 522px;
}

.tab-accordion__panel__content .read-more__box {
    max-height: 585px;
	margin: 0;
}

.read-more__box.fx-untruncated {
	max-height: 100% !important;
}

.read-more__content::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 112px;
	left: 0;
	bottom: 0;
	background: linear-gradient(to bottom,  rgba(239,237,235,0) 0%,rgba(239,237,235,1) 100%);
}

.bg-white .read-more__content::after {
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 1) 100%);
}

.fx-untruncated .read-more__content::after {
	display: none;
}

.tab-accordion__panel__content .read-more__content::after {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 1) 100%);
}

@media (min-width: 768px) {

	.read-more__box {
		max-height: 300px;
	}

	.read-more__content::after {
		height: 97px;
	}

	.tab-accordion__panel__content .read-more__box {
		max-height: 100% !important;
	}

	.tab-accordion__panel__content .read-more__content::after {
		display: none;
	}
}


@media (min-width: 1200px) {

	.read-more__box.fx-untruncated {
		max-height: 284px !important;
		overflow: auto;
	}

	.tab-accordion__panel__content .read-more__box {
		max-height: 100% !important;
		overflow: visible !important;
		overflow-wrap: inherit !important;
	}


	.read-more__content::after {
		height: 61px;
	}

	.read-more__box.fx-untruncated {
		width: 100%;
		overflow: auto;
		padding: 0 10px 0 0;
		overflow: auto;
		@supports not (selector(::-webkit-scrollbar-thumb)) {
			scrollbar-color: #8B8D8E #e4e4e5;
			scrollbar-width: thin;
		}
	}

	.read-more__box.fx-untruncated:hover {
		@supports not (selector(::-webkit-scrollbar-thumb)) {
			scrollbar-color: #8B8D8E #e4e4e5;
		}
	}

	.read-more__box.fx-untruncated::-webkit-scrollbar {
		width: 8px;
	}

	.read-more__box.fx-untruncated::-webkit-scrollbar-track {
		background-color: #e4e4e5;
	}

	.read-more__box.fx-untruncated::-webkit-scrollbar-thumb {
		background-color: #8B8D8E;
	}
}