/*CSC_PortalSharedStyling*/
:root {
    --Dark-Blue: #14477D;
    --Gray: #58595B;
    --button-Gradient: linear-gradient(180deg,#f7931e,#f4751f);
    --button-GradientHover: linear-gradient(0deg, #C8581A 0%, #E47E36 117.78%);
    --CSC_maxWidth: 1440px;
}

/* Profile Page */
.comm-page-detail-005 [data-aura-class='cNfCustomThemeLayout'] {
    min-height: 100vh !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}
.comm-page-detail-005 .middleSection{
    flex-grow: 1;
}
/* End of Profile Page */ 
.pageHeadings{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    gap: 28px;
    text-align: center;
}
.pageHeadingsTitle{
    color: var(--Dark-Blue); 
    font-family: Geometria; 
    font-size: 36px; 
    font-style: normal; 
    font-weight: 300; 
    line-height: normal; 
}
.pageHeadingsSubTitle{
    color: var(--Gray);
    font-family: Interstate;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
/* Footer */
.containerDiv lightning-layout {
    max-width: var(--CSC_maxWidth) !important;
    margin-left: auto;
    margin-right: auto;
}

/* Buttons  */
.containerDiv .button1Class{
    font-weight: 300;
    background-image: var(--button-Gradient)!important;
}
.containerDiv .button1Class:hover{
    background-image: var(--button-GradientHover) !important;
}

.containerDiv .button2Class {
    font-weight: 300;
    border-radius: 10px;
    border: 1px solid var(--Orange, #F7931E);
}
.containerDiv .button2Class:hover{
    background-image: var(--button-Gradient) !important;
    border: 1px solid #F7931E !important;
}
/* Cases needs to have these two buttons overdriven */
.comm-page-custom-my-orders .containerDiv .button2Class {
    font-weight: 300;
    background-image: var(--button-Gradient) !important;
    border: 1px solid #F7931E !important;
}
.comm-page-custom-my-orders .containerDiv .button2Class:hover{
	background-image: var(--button-GradientHover) !important;
}

/* Disable Salesforce Kinetic Button */
/*This should go in all pages */
[ kx-type="ripple" ],
[ kx-scope="button-brand"],
[ kx-type="ripple" ]::before,
[ kx-type="ripple" ]::after {
    animation: none !important;
    transition: none !important;
    background-image: none !important; /* If the ripple uses a background image */
}

/* Profile Page */ 
.comm-page-detail-005 .detailsData {
    margin-top: 24px !important;
}
.userDetailHeader {
    padding-bottom: 24px !important;
}