/** START This is used to text wrap article images **/
.responsive_textwrap_left {
    float: left;
    margin-right:30px;
    width: 500px;
}
.responsive_textwrap_right {
    float: right;
    margin-left:30px;
    width: 500px;
}

@media (max-width: 1000px) {
    .responsive_textwrap_left {
    	float:none;
        width:100%;
    }
    .responsive_textwrap_right {
    	float:none;
        width:100%;
    }
}
/** END This is used to text wrap article images **/

.case-description {
	height:320px;
}

/* docebo CSS */
.hideEl {
   display: none;
}

.salesforceIdentityLoginBody2 .cCenterPanel {
    min-width: 610px !important;
}

@media (max-width: 650px) {
	.salesforceIdentityLoginBody2 .cCenterPanel {
        min-width: 90% !important;
    }
}

/* To hide the "New" button on the message page */
.newMessageButton {display:none;}
.messageActionButtonContainer {display:none;}
.noMessages p {display:none;}
/* ---- */

/* --------------------------------------- */
/* We want edge to edge components... */
.siteforceContentArea .comm-layout-column:not(:empty) { padding:0; }
.siteforceContentArea .slds-col--padded { padding:0; }
/* --------------------------------------- */

/* TABLE (lists) styling */
.slds-table_striped tbody tr:nth-of-type(even)>td, .slds-table_striped tbody tr:nth-of-type(even)>th, .slds-table--striped tbody tr:nth-of-type(even)>td, .slds-table--striped tbody tr:nth-of-type(even)>th {
    background-color: #f6f6f6;
}
.slds-table thead th {
    background-color: #dd2211;
    color: #fff;
}
/* --------------------- */

/* TABS styling */
.slds-tabs_default__nav ul li, .tabs__nav ul li {
    font-size: 2.5em;
}
/* ------------ */

.siteforceContentArea .comm-layout-column:not(:empty) {
    padding-bottom: 0;
    padding-top: 0;
}

.portal-content {
    max-width: 1290px; 
    margin: 0 auto 0 auto;
}
@media (max-width: 1330px) {
	.portal-content {
        margin: 0 20px 0 20px;
    }
}

.card {
    position: relative;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.2s;
    float: none;
    margin: 1.5em;
}

.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.card-header {
    background-color: #dd2211;
    padding: 1.8em;
    color: #ffffff;
    transition: 0.2s;
    height: 100%;
    line-height: 200%;
}

.card:hover .card-header {
    background-color: #ae1b0d;
}

.card-body {
    padding: 2.5em;
}



.custom-article-wrapper .card {
    position: relative;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.2s;
    float: left;
    margin: 0 1.0em 1.5em 0.5em;
    width: 30%;
}

.custom-article-wrapper .card-image {
    position: relative;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.2s;
    float: none;
    margin: 0 1.0em 1.5em 0.5em;
    /*width: 400px;*/
    max-width: 614px;
    margin-bottom: 2.5em;
}

.custom-article-wrapper .card-image:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.custom-article-wrapper .card-image:hover .card-header {
    background-color: #ae1b0d;
}

.custom-article-wrapper .article-big-button {
    font-size: 1.5em; 
    padding: 1.2em 1.8em;
}

/* 
  ##Device = Desktop
*/
@media (min-width: 1025px) {
    .custom-article-wrapper .card {
        width: 30%;
    }
}

/* 
  ##Device = Tablets, Ipads
*/
@media (min-width: 768px) and (max-width: 1024px) {
	.custom-article-wrapper .card {
        width: 45%;
    }
}


/* 
  ##Device = mobile phones
*/
@media (max-width: 767px) {
	.custom-article-wrapper .card {
        width: 90%;
    }
    
    /*.custom-article-wrapper .card-image {
        width: 90%;
    }*/
}

.clear-both {
    clear: both;
}
.clear-none {
    clear: none;
}

.course-page {
    padding: 4.0em 0;
}
.course-page-item {
    padding: 0 0 1.8em 0;
}

.custom-article-wrapper ul, ol {
    padding: 0.5em 0 0.5em 0.5em;
}

.custom-article-wrapper .card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.custom-article-wrapper .card-header {
    background-color: #dd2211;
    padding: 1.5em;
    color: #ffffff;
    transition: 0.2s;
    height: 80px;
    line-height: 1.2em;
}

.custom-article-wrapper .card:hover .card-header {
    background-color: #ae1b0d;
}

.custom-article-wrapper .card-body {
    padding: 1.5em;
}

.custom-article-wrapper .card-body-image {
    padding: 0;
    margin: 0;
}

.custom-article-wrapper .card-body-image img {
    padding: 0;
    margin: 0;
}

.custom-article-wrapper .card table {
    width: 100%;
}
.custom-article-wrapper .card td {
    width: 50%;
}

/* to make entire div clickable. Just put an <a href> within the div (right before closing tag) */
.divLink {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-decoration: none;
    /* Makes sure the link doesn't get underlined */
    z-index: 10;
    /* raises anchor tag above everything else in div */
    background-color: white;
    /*workaround to make clickable in IE */
    opacity: 0;
    /*workaround to make clickable in IE */
    filter: alpha(opacity=0);
    /*workaround to make clickable in IE */
}

/* --------------------------------------- */
/* Article Detail : ul / li style		   */
/*.slds-text-longform ul {
    margin-left: 1.5rem;
    list-style: disc;
    list-style-type: disc;
    list-style-position: initial;
    list-style-image: initial;
}
.selfServiceArticleLayout.article-column {
    padding: 1px 30px 30px;
}*/

/* --------------------------------------- */
/* Article Detail page : Topic tag / pills */
.selfServiceArticleTopicList.slds-pill_container--bare {
    display: inline-block;
    padding: .5rem 1.5rem;
}
.slds-pill__container_bare, .slds-pill__container--bare, .slds-pill_container_bare, .slds-pill_container--bare {
    display: flex;
    padding: .125rem;
    border: 0;
    border-radius: 0;
    background-color: transparent;
}
.selfServiceArticleTopicList .slds-pill {
    padding: .25rem 1.5rem;
    border-radius: 15rem;
    margin-right: .5rem;
    margin-bottom: .5rem;
}
.slds-pill {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    line-height: 1.5;
    max-width: 100%;
    padding: .125rem;
    border: 1px solid #d4d4d4;
    border-radius: .25rem;
    background-color: rgb(255, 255, 255);
    position: relative;
    min-height: 1.625rem;
}
/* ------------------------------------- */


/* -------------------------------------
Case submit form
HIDE the summary details  */
.forceCommunityContactSupportConfirmation div:nth-child(4) {
    display: none;
}


/* -------------------------------------
MESSAGES 								*/
/* hide the (Customer) type next to user names */
.forceChatterEntityLink .cuf-entityAdditionalLabel {
    display: none;
}
/* disable User name links to view native User profile page */
.cuf-entityLink {
  pointer-events: none;
  cursor: default;
}
.forceChatterEntityLink {
    text-decoration: none;
}


/* ------------------------------------- 
This enables Toast to have line breaks
So \n will work
-------------------------------------
------------------------------------- */
.toastMessage.forceActionsText{
     white-space : pre-line !important;
}
/* ------------------------------------- */

/* weird z-index for native lightning button modals*/
.forceHighlightsStencilDesktop .primaryFieldRow {
   z-index: 0 !important;
}

.slds-page-header__detail-row {
    z-index: 0 !important;
}
/* ------------------------------------- */

/* Custom HSF Font */
/* ------------------------------------- */
@font-face{
	font-family:'CustomFontPrimary';
	/*src: url('/sfsites/c/resource/FontPrimary') format('woff');*/
    src: url('/resource/FontPrimary') format('woff');
}
@font-face{
	font-family:'CustomFontHeader';
	/*src: url('/sfsites/c/resource/FontHeader') format('woff');*/
    src: url('/resource/FontHeader') format('woff');
}

/* default sizing and layout */
html {
    font-size: 1.1rem;
	letter-spacing: 0.5px;
}
.theme-content {
  min-height: calc(100vh - 236px);
}
.theme-footer {
  height: 235px;
}
h1, h2, h3, h4 {
    font-family: CustomFontHeader, Arial, sans-serif;
    font-weight: bold;
}
h1 sup {
    font-family: CustomFontHeader, Arial, sans-serif;
    font-weight: bold;
    font-size:0.6em;
}
p, div, span {
    font-family: CustomFontPrimary, Arial, sans-serif;
}



/* ------------------------------------- */
/* ------------------------------------- */
:root { --dxp-c-section-columns-max-width: 1170px; }