/**** Added for Article Page ******/
/********************************************************************************************************************************/
/******* For Main Section of Article Page Starts here *******/
.comm-page-article .siteforceSldsTwoCol48Layout.siteforceContentArea{
    max-width: 1440px;
    margin: 0 auto;
}
.comm-page-article .contentRegion{
    max-width: 1440px;
    margin: 0 auto;
    background: #f7f5fd;
    padding: 50px 135px 50px 135px;
}
/******* For Main Section of Article Page End here*******/
/********KB Articles ACCORDION Starts here *******/
.comm-page-article .slds-accordion{
    background-color: #FFFFFF;
    border: 1px solid #dcdcdc;
    padding: 20px;
}
.comm-page-article .addSpace{
    border-top: 1px solid #dcdcdc;
}
.comm-page-article ul.slds-m-around_medium.topic-articles {
    margin: 0;
}  
.comm-page-article .slds-accordion__content li{
    padding: 10px;
    padding-left: 20px;
    gap: 0px;
    border: 0px 0px 1px 0px;
    justify: space-between;
    opacity: 0px;
}

.comm-page-article .slds-accordion__content li a{
    color: #323132;
    font-family: Maison Neue;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    text-decoration: none;
}
.comm-page-article span.slds-accordion__summary-content{
    font-family: Maison Neue;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    text-align: left;
    color: #323132;
}
.comm-page-article section.slds-accordion__section.slds-is-open{
    border-left: 3px solid #00D7B8;
    background: rgba(179, 243, 232, 0.05);
    padding: 0;
    margin-top: 15px;
}
.comm-page-article section.slds-accordion__section.slds-is-open div:first-child{
    padding: 12px 10px 12px 10px;
    gap: 0px;
    margin: 0px;
    opacity:0px;
    border-bottom: 1px solid #E2E2E2;
}
lightning-accordion-section.slds-accordion__list-item {
    border-top: 0px;
    border-bottom: 1px solid #E2E2E2;
}
.comm-page-article .slds-m-around_medium, .slds-m-around--medium{
    margin: 0;
}

/* Accordion Icons CSS */
c-show-topics-and-articles lightning-primitive-icon,
.comm-page-article .highlights .primaryFieldRow{
    display:none;
}
c-show-topics-and-articles .slds-accordion__summary-heading .slds-button:after {
    content: "+";
    font-size: 20px;
    margin-right: 10px;
}
c-show-topics-and-articles .slds-accordion__summary-heading .slds-button[aria-expanded="true"]:after {
    content: "-";
}
c-show-topics-and-articles .slds-accordion__summary-heading .slds-button, c-show-topics-and-articles .slds-accordion__summary-heading .slds-button[aria-expanded="true"]{
    justify-content:space-between;
}
c-show-topics-and-articles lightning-accordion-section:first-of-type slot ul li:nth-child(1) {
    background: rgba(0, 215, 184, 0.2);
    margin: 12px 10px 12px 20px;
}
c-show-topics-and-articles lightning-accordion-section:first-of-type slot ul li:nth-child(1) a {
    padding: 0px;
}
.comm-page-article .forceCommunityRecordDetail .slds-card{
    background: #f7f5fd;
    padding: 50px 135px 50px 135px;
}
.comm-page-article records-hoverable-link a,records-hoverable-link a:hover{
    color:#000;
}
.comm-page-article .forceCommunityTabLayout ul, .comm-page-article.forceCommunityTabLayout .ui-widget{
    background: #f7f5fd;
}
.comm-page-article .slds-page-header__detail-row{
    background: #fff;
}
.comm-page-article .secondaryFields p.fieldComponent{
    font-size:16px;
}
records-hoverable-link div.slds-grid span{
    text-decoration:none;
}
/********KB Articles Accordin End here *******/
/********************************************************************************************************************************/


/********************************************************************************************************************************/
/**** KB 'ARTICLE CONTENT' Component starts here******/
.comm-page-article .article-column.slds-text-longform.selfServiceArticleLayout{
	background-color:  #FFFFFF;
    padding: 20px;
}
.comm-page-article .selfServiceArticleLayout .article-head{
    margin: 0px !important; 
    background-color: rgba(0, 215, 184, 0.1);
    border-left: 4px solid #00D7B8;
    padding: 20px;
    color: #151F26;
}
/*******To hide the Date from Standardmetadata and DOT where Knowledge Base Article content is inserted starts here******/
.comm-page-article .meta,
.comm-page-article div.meta span.date span.uiOutputDate,
.comm-page-article div.meta span.dot,
.comm-page-article .meta lightning-icon.timestamp-icon{
    display: none;
}
/*******To hide the Date from top and DOT where Knowledge Base Article content is inserted end here******/

/*****to inline the all Created by, Last published date, created Date in one line starts here ****/
.comm-page-article div.forcePageBlockSection div.slds-form_stacked div.slds-form-element div.slds-form-element__control, 
.comm-page-article .forcePageBlockSection .slds-form-element .slds-form-element__control{
    flex-basis: content;
}
/*****to inline the all Created by, Last published date, created Date in one line end here ****/

/*****To Add content before created Date Starts here*****/
.comm-page-article div.forceRecordLayout div.test-id__section:nth-child(1) div.slds-form_stacked::before{
	content: 'Knowledge Base Article';
    font-family: Faktum;
	font-size: 12px;
	font-weight: 400;
	line-height: 15.06px;
	text-align: left;
    padding: 6px 10px;
    background-color: rgba(50, 49, 50, 0.1);
    border-radius: 5px;
    color: #323132;
    margin-right: 6px;
}
/*****To Add content before created Date end here*****/

/*******To set the created date and Created by in inline *************//*********** To align the Created date, Published Date inflex and remove border*******/
.comm-page-article div.slds-form-element.slds-form-element_readonly.slds-grow.slds-hint-parent.override--slds-form-element{
    display: flex;
    border: none;
}
/*******To align the Created by **********/
.comm-page-article div.slds-form_stacked div.forcePageBlockSectionRow:nth-child(3) div.forcePageBlockItemView div.slds-form-element div.test-id__field-label-container{
    flex-basis: auto;
}
/*******To align the Created by **********/

/*******To set the Article created Date/publish date/created by*****/
.comm-page-article div.forcePageBlockSectionRow div.forcePageBlockItemView div.slds-form-element div.test-id__field-label-container span.test-id__field-label{
    font-size: 12px;
    font-weight: 400;
    line-height: 15.06px;
    text-align: left;
    color: #323132;
}

/*******To Add the content before the Created Date ******/
.comm-page-article div.slds-form_stacked div.forcePageBlockSectionRow div.test-id__field-label-container span.test-id__field-label::after{
    content: ": ";
}
/*******To Add the content before the Created Date ******/

/*******To set the created date and Created by in inline field values *************/
.comm-page-article div.itemBody span.uiOutputDateTime{
    font-family: Faktum;
    font-size: 12px;
    font-weight: 400;
    line-height: 15.06px;
    text-align: left;
    color: #323132;
}
/*******To Style the Created By field of Knowledge article ******/
.comm-page-article span.test-id__field-value a.outputLookupLink {
    font-family: Faktum;
    font-size: 12px;
    font-weight: bold;
    line-height: 15.06px;
    text-align: left;
    color: #000;
    cursor: none;
    pointer-events: none;
}
/*******To Style the Created By field of Knowledge article ******/
/*****To hide the Article Titlte******/
.comm-page-article .slds-col.slds-grid.slds-has-flexi-truncate.full.long-text.forcePageBlockItem.forcePageBlockItemView>div>div.test-id__field-label-container.slds-form-element__label{
	display: none;
}
/*****To hide the Article Titlte******/

/*********** To align the Created date, Published Date*******/
.comm-page-article div.forceRecordLayout div.test-id__section:nth-child(3) div.slds-form_stacked{
    display: block;
}
.comm-page-article span.test-id__field-label{
  	font-size: 12px;
    font-weight: lighter;
}
/*********** To align the Created date, Published Date*******/

/*******For Second section where Article show*****/
.comm-page-article div.forceRecordLayout div.test-id__section:nth-child(2) div.test-id__section-content div.slds-form_stacked div.forcePageBlockSectionRow:nth-child(2),
.comm-page-article div.forceRecordLayout div.test-id__section:nth-child(2) div.test-id__section-content div.slds-form_stacked div.forcePageBlockSectionRow:nth-child(3){
    display: none;
}

/*****Was this Articles helpful? Starts here******/
.comm-page-article .forceCommunityArticleThumbVote{
	background-color: #FFFFFF;
    padding: 10px 0px 20px 0px;
}
.comm-page-article .slds-card{
	padding: 10px 15px;
    border: none;
}
.comm-page-article .slds-card .slds-box--x-small{
	border: 1px solid #00D7B8;
    border-radius: 5px;
}
.comm-page-article .slds-media__body.slds-truncate {
    color: #000000;
    font-family: Maison Neue;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    text-align: left;
}
/****Like and dislike button****/
.comm-page-article div.slds-card__body div.slds-clearfix div.slds-p-top--xx-small{
    display: none;
}
.comm-page-articlediv.slds-card__body div.slds-clearfix div.slds-float--left:nth-child(3){
    border-left: 1px solid rgba(217, 217, 217, 1);
}
.comm-page-article button.slds-button.slds-button_icon.slds-button_icon-border {
    color: #00D7B8;
    border: none;
    width: 30px;
    height: 27px;
}
.comm-page-article svg.slds-button__icon {
    width: 20px;
    height: 20px;
}
/****Like and dislike button on hover****/
.comm-page-article button.slds-button.slds-button_icon.slds-button_icon-border:hover {
    color: #00D7B8;
    border: none;
}
.comm-page-article div.slds-card__body div.slds-clearfix div.slds-p-top--xx-small{
    display: none;
}
.comm-page-article div.slds-card__body div.slds-clearfix div.slds-float--left:nth-child(3){
    border-left: 1px solid rgba(217, 217, 217, 1);
}
/*****Was this Articles helpful? End here******/
/**** KB 'ARTICLE CONTENT' Component End here******/
 /* Media Query for Mobile Devices */
@media (min-width: 481px) and (max-width: 767px) {
    .comm-page-article div.contentRegion div.siteforceContentArea div.slds-grid.slds-wrap.slds-medium-nowrap.slds-large-nowrap{
        margin: 0px;
    }  
    .comm-page-article .contentRegion{
        padding: 45px 152px 50px 152px;
    }
}
@media (min-width: 565px) {
    .comm-page-article article.content > div.forcePageBlock div.test-id__section:nth-child(1) div.test-id__section-content > div.slds-form_stacked{
        display: flex;
        align-items: center;
    }
    /*******To Add the border around Last Published Date ******/
    .comm-page-article article.content div.forceRecordLayout div.test-id__section:nth-child(1) div.test-id__section-content div.slds-form_stacked div.forcePageBlockSectionRow:nth-child(2),
    .comm-page-article article.content div.forceRecordLayout div.test-id__section:nth-child(1) div.test-id__section-content div.slds-form_stacked div.forcePageBlockSectionRow:nth-child(3){
        border-left: 1px solid #D9D9D9;
        margin: 0 10px;
        padding: 0 10px;
    }
	/*******To Add the border around Last Published Date ******/
}
@media (min-width: 768px) and (max-width: 1024px) {
    .comm-page-article .contentRegion {
        padding: 10px 20px 10px 20px;
    }
    .comm-page-article div.contentRegion div.siteforceContentArea div.slds-grid.slds-wrap.slds-medium-nowrap.slds-large-nowrap{
        margin: 0px;
    }  
}
@media (max-width: 768px) {
    .comm-page-article .contentRegion{
    	padding: 20px;
	}
    .comm-page-article div.contentRegion div.siteforceContentArea div.slds-grid.slds-wrap.slds-medium-nowrap.slds-large-nowrap{
        margin: 0px;
    }  
   .comm-page-article .slds-grid.slds-wrap.slds-medium-nowrap.slds-large-nowrap {
    	display: flex;
	}
   .comm-page-article .slds-col--padded.slds-size--12-of-12.slds-medium-size--8-of-12.slds-medium-order--2.slds-large-size--8-of-12.slds-large-order--2.comm-layout-column {
    	order: 2;
	}
}
/******************************************************************************/