/* 
 * Style for knowledge articles in ptp selfservice
*/

/*2024-05-15*/

/*
* https://www.brand-design.telekom.com/artikel/typografie/
* [✓] We use our typeface TeleNeo for every written word.
* [✓] Our typography colors are always Magenta, white or black.
* [✓] We adjust our variable font to the requirements of touch points.
*     - currently fixed fonts used
* https://www.brand-design.telekom.com/en/articles/headline-treatment
* [✓] We flexibly use all styles of our typeface TeleNeo. And no other fonts.
* [✓] Play around with TeleNeo to create spot-on messages. Always ensure clarity and legibility.
* [✓] We use upper or lower case spelling depending on the length and tonality.
*     - lowercase used where input is variable
*/


.slds-text-title {
	font-size: 21px;
}


.forceCommunityTopArticleList .listContent .singleListContainer {
	/*remove premature line break in knowledge articles*/
	width: auto;
	max-width: 100%;
}


/*knowledge articles*/

/* bg-strart */
article.content div[data-target-selection-name="sfdc:RecordField.Knowledge__kav.Content__c"] .itemBody {
	/* enforce white background with light shadow */
	background-color: white;
	box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.4);
	padding: 10px !important;
}
/* bg-strart */

article.content .itemBody h1 {
	border-top-color: rgb(226, 0, 116);
	border-top: solid 1px;
	color: rgb(226, 0, 116);
	font-family: 'teleneo-bold';
	font-size: 26px;
	font-weight: bold;
	margin-bottom: 1em;
	margin-top: 1em;
	padding-top: 0.7em;
	text-align: left;
	width: 100%;
}

article.content .itemBody h2 {
	color: rgb(226, 0, 116);
	font-family: 'teleneo-regular';
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 1em;
	margin-top: 1em;
	text-align: left;
	width: 100%;
}

article.content .itemBody h3 {
	color: rgb(0, 0, 0);
	font-family: 'teleneo-regular';
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 1em;
	margin-top: 1em;
	text-align: left;
	width: 100%;
}

article.content .itemBody h4 {
	color: rgb(0, 0, 0);
	font-family: 'teleneo-regular';
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 1em;
	margin-top: 1em;
	text-align: left;
	width: 100%;
}

article.content .itemBody div,
article.content .itemBody p {
	font-family: 'teleneo-regular';
	font-size: 20px;
	text-align: justify;
}

article.content .itemBody em {
	/* make it emphasised in context of sentence*/
	font-style: oblique;
}


article.content .itemBody strong {
	/* make it stand out in context of whole page*/
	color: rgb(226, 0, 116);
}

article.content .itemBody ol {
	list-style-position: outside;
	text-align: left;
}

article.content .itemBody ul {
	list-style-position: outside;
	list-style-type: square;
	text-align: left;
}

article.content .itemBody li {
	text-align: left;
}

article.content .itemBody ul>li::marker {
	color: rgb(226, 0, 116);
}

article.content .itemBody ol>li::marker {
	color: rgb(226, 0, 116);
	font-weight: bold;
}

/*knowledge articles end*/