/* Background Images and Footer */
/* Color Picker */
/* VERSION 34 */
/********************* Basics **************************/  
/*
body {
  color: ;  
}  
*/

a {
  color: #01A982;  
}  


.hltags .tagit-new.tagit-new.tagit-new.tagit-new.tagit-new.tagit-new i, 
.hltags .tagit-new.tagit-new.tagit-new.tagit-new.tagit-new.tagit-new input, 
.hltags .tagit-new.tagit-new.tagit-new.tagit-new.tagit-new.tagit-new input::placeholder {
  color: #01A982; 
}  


.hl-linkcolor-background {
  background-color: #01A982;  
}  

/*
a.user-content-mention {
  color: ;  
}  
*/

a.user-content-hashtag.user-content-hashtag.user-content-hashtag {
  color: #01A982;  
}  


a:hover {
  color: #1D1F27;  
}  



.hltags .tagit-new.tagit-new.tagit-new.tagit-new.tagit-new.tagit-new:hover i, 
.hltags .tagit-new.tagit-new.tagit-new.tagit-new.tagit-new.tagit-new:hover input, 
.hltags .tagit-new.tagit-new.tagit-new.tagit-new.tagit-new.tagit-new:hover input::placeholder {
  color: #1D1F27;  
}  

/*
a.user-content-mention:hover {
  color: ;  
}  
*/

a.user-content-hashtag.user-content-hashtag.user-content-hashtag.user-content-hashtag:hover {  
  color: #1D1F27; 
} 

/*
.bodyBackground {
  background-color: ;  
}  
*/
/*
.siteFrame {
  background-color: ;  
}  
*/
/*
#MPOuterMost {
  border-color: ;  
}  
*/
h1, .Heading1 {


  color: #1D1F27;

/*
  background-color: ;
*/
}    
h2, .Heading2, h2 a, h2 a:hover, .text-muted-h2 h2 {

/*
  color: ;
*/
/*
  background-color: ;
*/
}    h3, .Heading3, h3 a, h3 a:hover {

/*
  color: ;
*/
/*
  background-color: ;
*/
}    
/*
hr, hr.delimiter, .HLLandingControl ul li {
  border-bottom-color: ;  
}  
*/
#MPOuterFooter {


  background-color: #1D1F27;


  color: #FFFFFF;

}    

fieldset {
  border-color: #1D1F27;  
}  

fieldset legend {


  background-color: #1D1F27;


  border-color: #1D1F27;


  color: #FFFFFF;

}    

.SearchResults .SortBy {
  color: #FFFFFF;  
}      
/*********************** Landing Controls ******************/  
.HLLandingControl .heading, .HLLandingControl h2, .headerItem, .drItemSubHeader {

/*
  background-color: ;
*/
/*
  color: ;
*/
}    
/*
.drItemSubHeader a:not(.skip-header-text-color){
  color: ;  
    }  
*/
.ContentUserControl .HLLandingControl, .ContentUserControl.HLLandingControl, .ContentItemHtml.HLLandingControl {

/*
  border-color: ;
*/
/*
  color: ;
*/
/*
  background-color: ;
*/
}    

.HLLandingControl .Content a:not(.btn) {
  color: #01A982;  
}  

/*
.HLLandingControl .ByLine {
  color: ;  
}  
*/

.HLLandingControl h5, .HLLandingControl h4, .HLEngagement h3 {
  color: #01A982;  
}  


.HLLandingControl .Content h3 a, .HLAnnouncements .Content h2 a, .HLRSSReader .Content h2 a {
  color: #1D1F27;  
}    

/************************ Tabs **********************/  
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {

/*
  background-color: ;
*/
/*
  border-color: ;
*/

  color: #01A982;

}  
/*
.nav-tabs {
  border-bottom-color: ;  
}  
*/
.nav-tabs > li > a:hover, .nav-tabs > li > a:focus, .nav .open > a:hover, .nav .open > a:focus {

/*
  background-color: ;
*/
/*
  border-bottom-color: ;
*/

  color: #01A982;

}  .nav-tabs > li > a {

/*
  background-color: ;
*/
/*
  color: ;
*/
}    
/************************ Miscellaneous **********************/  

.SloganText {
  color: #1D1F27;  
}  

.ModalPopupHeading, .CustomTableModalPopup .CustomTableModalPopupHeaderRow {


  background-color: #1D1F27;


  color: #FFFFFF;

}    

.lblratingBig {
  color: #1D1F27;  
}  

/************************ Tables **********************/  
.Container thead .Header td, th, .ListContainer .ListHeader, .drItemSubHeader,  .table-thead-background tr th, .table-thead-background tr td {


  background-color: #1D1F27;


  color: #FFFFFF;

}    

th a, th a:hover  {
  color: #FFFFFF;  
}  

/*
.TableRowAlternate, .table-hover > tbody > tr:hover > td  {
  background-color: ;  
}    
*/
/************************ Menus ***********************/  

#MPAuxNav ul.level1 li a {
  color: #01A982;  
}  


#MPAuxNav ul.level1 li ul {
  background-color: #01A982;  
}  


#MPAuxNav ul.level1 li li.dynamic {
  border-right-color: #01A982;  
}  

/*  #SideMenu ul.level1 li ul {
  background-color: White;  
}  */    /*  .MPSideNavBottom {
  color: #0069A5;  
}  */    /*
.breadcrumb {
  background-color: ;  
}  
*/
/*
.breadcrumb li {
  color: ;  
}  
*/

.breadcrumb li a {
  color: #01A982;  
}  


.MPBottomMenu ul li a {
  color: #FFFFFF;  
}        
/************************ Bootstrap Menus ***********************/  

.navbar-default, #NAV {
  background-color: #01A982;      
  border-color: #01A982;  
}  


.navbar-default .navbar-nav > li > a {
  color: #FFFFFF;  
}  

.navbar .navbar-nav > .active > a,    .navbar .navbar-nav > .active > a:hover,    .navbar .navbar-nav > .active > a:focus,   .navbar .navbar-nav > li > a:hover {
    
  background-color: #1D1F27;


  color: #FFFFFF;

}    
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {


  background-color: #1D1F27;


  color: #FFFFFF;

}    

#MPButtonBar .dropdown-menu {
  background-color: #01A982;  
}  


#MPButtonBar .dropdown-menu li a {
  color: #FFFFFF;  
}  


#MPButtonBar .dropdown-menu li a:hover,    #MPButtonBar .dropdown-menu li a:focus {
  background-color: #01A982;  
  }  

#MPButtonBar .dropdown-menu .active > a,   #MPButtonBar li .dropdown-menu .active > a:hover,   #MPButtonBar .dropdown-menu .dropdown-submenu .active a:hover,   #MPButtonBar .dropdown-submenu .dropdown-submenu .active a:hover {


  background-color: #1D1F27;


  color: #FFFFFF;

}    
/*
#MPButtonBar .dropdown-menu {
  border-color: ;  
}  
*/
/************************ Bootstrap Buttons ***********************/  
.btn-primary, .ui-widget-content a.btn-primary {

/*
  background-color: ;
*/
/*
  border-color: ;
*/
/*
color: !important;
*/
}    
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .open .dropdown-toggle.btn-primary {

/*
  background-color: ;
*/
/*
  border-color: ;
*/
/*
  color: ;
*/
}    
.btn-info {

/*
  background-color: ;
*/
/*
  border-color: ;
*/
/*
  color: ;
*/
}    
.btn-info:hover, .btn-info:focus, .btn-info:active, .open .dropdown-toggle.btn-info {

/*
  background-color: ;
*/
/*
  border-color: ;
*/
/*
  color: ;
*/
}    
.btn-success {

/*
  background-color: ;
*/
/*
  border-color: ;
*/
/*
  color: ;
*/
}    
.btn-success:hover, .btn-success:focus, .btn-success:active, .open .dropdown-toggle.btn-success {

/*
  background-color: ;
*/
/*
  border-color: ;
*/
/*
  color: ;
*/
}    
.btn-danger {

/*
  background-color: ;
*/
/*
  border-color: ;
*/
/*
  color: ;
*/
}    
.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .open .dropdown-toggle.btn-danger {

/*
  background-color: ;
*/
/*
  border-color: ;
*/
/*
  color: ;
*/
}    
.btn-default {

/*
  background-color: ;
*/
/*
  border-color: ;
*/
/*
  color: ;
*/
}    
.btn-default:hover, .btn-default:focus, .btn-default:active, .open .dropdown-toggle.btn-default {

/*
  background-color: ;
*/
/*
  border-color: ;
*/
/*
  color: ;
*/
}    
.pagination > .active > span, .pagination > .active > span:hover, .pagination li.active>a, .pagination li.active>a:hover {

/*
  background-color: ;
*/
/*
  border-color: ;
*/
/*
  color: ;
*/
}    
.pagination > li > a {

/*
  background-color: ;
*/
/*
  border-color: ;
*/
/*
  color: ;
*/
}    
.pagination > li > a:hover {

/*
  background-color: ;
*/
/*
  border-color: ;
*/
/*
  color: ;
*/
}    
.label-default {

/*
  background-color: ;
*/
/*
  color: ;
*/
}    
.badge, .badge a, a.badge a:hover {

/*
  background-color: ;
*/
/*
  color: ;
*/
}    
.modal-header {

/*
  background-color: ;
*/
/*
  color: ;
*/
}    
.modal-body, .panel-body {

/*
  background-color: ;
*/
/*
  color: ;
*/
}    
.modal-footer, .panel-footer {

/*
  background-color: ;
*/
}  
/*
#MPFooterLink {
  background-color: ;  
}  
*/
/*
#MPFooterLink a {
  color: ;  
}  
*/
/*
.faceted-search-main .facets .header {
  color: ;  
}  
*/
/*
.faceted-search-main .facets .header {
  background-color: ;  
}  
*/
/*
.cookie-notification-bar {
  background-color: ;  
}  
*/
/*
.cookie-notification-bar span {
  color: ;  
}  
*/

/* Emtpy faceted search results cards */

.hlc-empty-state-cards-wrapper .hlc-empty-state-card:nth-of-type(2) .hlc-empty-state-card-top-part {
  background-color: #1D1F27;
}


.hlc-empty-state-cards-wrapper .hlc-empty-state-card:nth-of-type(1) .hlc-empty-state-card-top-part {
  background-color: #01A982;
}
/************ New Bootstrap 4^ Themeing ****/ 

:root:root {
  
  --hl-bs--primary: #1D1F27;
  --hl-bs--selected: #1D1F2726;
  

  
  --hl-bs--primary-rgb: 29,31,39;
  --hl-bs--selected-rgb: 29,31,39, 50;
  

  
  --hl-bs--primary-opposite: #FFFFFF;
  

  
  --hl-bs--primary-opposite-rgb: 255,255,255;
  
  
  
  --hl-bs--link: #01A982;
  

  
  --hl-bs--link-rgb: 1,169,130;
  

  
  --hl-bs--link-hover: #1D1F27;
  --hl-bs--btn-icon-ctrl-bg-hover: #1D1F27;
  --hl-bs--btn-icon-ctrl-border-hover: #1D1F27;
  

  
  --hl-bs--link-hover-rgb: 29,31,39;
  --hl-bs--btn-icon-ctrl-bg-hover-rgb: 29,31,39;
  --hl-bs--btn-icon-ctrl-border-hover-rgb: 29,31,39;
  

  
  --hl-bs--secondary: #01A982;
  --hl-bs--secondary-selected: #01A98226;
  

  
  --hl-bs--secondary-rgb: 1,169,130;
  --hl-bs--secondary-selected-rgb: 1,169,130, 50;
  

  
  --hl-bs--secondary-opposite: #FFFFFF;
  

  
  --hl-bs--secondary-opposite-rgb: 255,255,255;
  
}

/* buttons */
/*
  button variables follow a pattern of 
  --hl-bs--btn-[theme]-[prop]

  [theme] is one of 
    "primary" 
    "secondary" 
    "link" 
    "ghost"
  we do respect "success" and "danger" if there are selections for them.
  there are also alt- versions but by default we do not override alt theme

  [prop] is one of 
    "text"
    "text-hover"
    "bg"
    "bg-hover"
    "border"
    "border-hover"
    "outline"
  from color picker, there are no text-hover and border-hover, so they should probably just be set to their non-hover counterpart.
  you do not have to override all of them for every button, but probably the colorful ones
*/
:root:root {
  /*
  --hl-bs--btn-primary-text: ;
  --hl-bs--btn-primary-text-hover: ;
  --hl-bs--btn-primary-outline: 7f;
  */

  [PrimaryButtonTextColorRGB-StartComment]
  --hl-bs--btn-primary-text-rgb: [PrimaryButtonTextColorRGB];
  --hl-bs--btn-primary-text-hover-rgb: [PrimaryButtonTextColorRGB];
  --hl-bs--btn-primary-outline-rgb: [PrimaryButtonTextColorRGB], 127;
  [PrimaryButtonTextColorRGB-EndComment]
  
  /*
  --hl-bs--btn-primary-bg: ;
  */

  [PrimaryButtonBackgroundColorRGB-StartComment]
  --hl-bs--btn-primary-bg-rgb: [PrimaryButtonBackgroundColorRGB];
  [PrimaryButtonBackgroundColorRGB-EndComment]
  
  /*
  --hl-bs--btn-primary-bg-hover: ;
  */

  [PrimaryButtonHoverBackgroundColorRGB-StartComment]
  --hl-bs--btn-primary-bg-hover-rgb: [PrimaryButtonHoverBackgroundColorRGB];
  [PrimaryButtonHoverBackgroundColorRGB-EndComment]
  
  /*
  --hl-bs--btn-primary-border: ;
  --hl-bs--btn-primary-border-hover: ;
  */

  [PrimaryButtonBorderColorRGB-StartComment]
  --hl-bs--btn-primary-border-rgb: [PrimaryButtonBorderColorRGB];
  --hl-bs--btn-primary-border-hover-rgb: [PrimaryButtonBorderColorRGB];
  [PrimaryButtonBorderColorRGB-EndComment]
}

:root:root {
  /*
  --hl-bs--btn-success-text: ;
  --hl-bs--btn-success-text-hover: ;
  --hl-bs--btn-success-outline: 7f;
  */

  [SuccessButtonTextColorRGB-StartComment]
  --hl-bs--btn-success-text-rgb: [SuccessButtonTextColorRGB];
  --hl-bs--btn-success-text-hover-rgb: [SuccessButtonTextColorRGB];
  --hl-bs--btn-success-outline-rgb: [SuccessButtonTextColorRGB], 127;
  [SuccessButtonTextColorRGB-EndComment]
  
  /*
  --hl-bs--btn-success-bg: ;
  */

  [SuccessButtonBackgroundColorRGB-StartComment]
  --hl-bs--btn-success-bg-rgb: [SuccessButtonBackgroundColorRGB];
  [SuccessButtonBackgroundColorRGB-EndComment]
  
  /*
  --hl-bs--btn-success-bg-hover: ;
  */

  [SuccessButtonHoverBackgroundColorRGB-StartComment]
  --hl-bs--btn-success-bg-hover-rgb: [SuccessButtonHoverBackgroundColorRGB];
  [SuccessButtonHoverBackgroundColorRGB-EndComment]

  /*
  --hl-bs--btn-success-border: ;
  --hl-bs--btn-success-border-hover: ;
  */

  [SuccessButtonBorderColorRGB-StartComment]
  --hl-bs--btn-success-border-rgb: [SuccessButtonBorderColorRGB];
  --hl-bs--btn-success-border-hover-rgb: [SuccessButtonBorderColorRGB];
  [SuccessButtonBorderColorRGB-EndComment]
  
  /*
  --hl-bs--btn-danger-text: ;
  --hl-bs--btn-danger-text-hover: ;
  --hl-bs--btn-danger-outline: 7f;
  */

  [DangerButtonTextColorRGB-StartComment]
  --hl-bs--btn-danger-text-rgb: [DangerButtonTextColorRGB];
  --hl-bs--btn-danger-text-hover-rgb: [DangerButtonTextColorRGB];
  --hl-bs--btn-danger-outline-rgb: [DangerButtonTextColorRGB], 127;
  [DangerButtonTextColorRGb-EndComment]
  
  /*
  --hl-bs--btn-danger-bg: ;
  */

  [DangerButtonBackgroundColorRGB-StartComment]
  --hl-bs--btn-danger-bg-rgb: [DangerButtonBackgroundColorRGB];
  [DangerButtonBackgroundColorRGB-EndComment]
  
  /*
  --hl-bs--btn-danger-bg-hover: ;
  */

  [DangerButtonHoverBackgroundColorRGB-StartComment]
  --hl-bs--btn-danger-bg-hover-rgb: [DangerButtonHoverBackgroundColorRGB];
  [DangerButtonHoverBackgroundColorRGB-EndComment]

  /*
  --hl-bs--btn-danger-border: ;
  --hl-bs--btn-danger-border-hover: ;
  */

  [DangerButtonBorderColorRGB-StartComment]
  --hl-bs--btn-danger-border-rgb: [DangerButtonBorderColorRGB];
  --hl-bs--btn-danger-border-hover-rgb: [DangerButtonBorderColorRGB];
  [DangerButtonBorderColorRGB-EndComment]

}

:root:root {
  /*
  --hl-bs--btn-secondary-text: ;
  --hl-bs--btn-secondary-text-hover: ;
  --hl-bs--btn-secondary-outline: 7f;
  */

  [DefaultButtonTextColorRGB-StartComment]
  --hl-bs--btn-secondary-text-rgb: [DefaultButtonTextColorRGB];
  --hl-bs--btn-secondary-text-hover-rgb: [DefaultButtonTextColorRGB];
  --hl-bs--btn-secondary-outline-rgb: [DefaultButtonTextColorRGB], 127;
  [DefaultButtonTextColorRGB-EndComment]
  
  /*
  --hl-bs--btn-secondary-bg: ;
  */

  [DefaultButtonBackgroundColorRGB-StartComment]
  --hl-bs--btn-secondary-bg-rgb: [DefaultButtonBackgroundColorRGB];
  [DefaultButtonBackgroundColorRGB-EndComment]
  
  /*
  --hl-bs--btn-secondary-bg-hover: ;
  */

  [DefaultButtonHoverBackgroundColorRGB-StartComment]
  --hl-bs--btn-secondary-bg-hover-rgb: [DefaultButtonHoverBackgroundColorRGB];
  [DefaultButtonHoverBackgroundColorRGB-EndComment]

  /*
  --hl-bs--btn-secondary-border: ;
  --hl-bs--btn-secondary-border-hover: ;
  */

  [DefaultButtonBorderColorRGB-StartComment]
  --hl-bs--btn-secondary-border-rgb: [DefaultButtonBorderColorRGB];
  --hl-bs--btn-secondary-border-hover-rgb: [DefaultButtonBorderColorRGB];
  [DefaultButtonBorderColorRGB-EndComment]
}

:root:root {
  
  --hl-bs--btn-link-text: #01A982;
  --hl-bs--btn-link-outline: #01A9827f;
  

  
  --hl-bs--btn-link-text-rgb: 1,169,130;
  --hl-bs--btn-link-outline-rgb: 1,169,130, 127;
  

  
  --hl-bs--btn-link-hover: #1D1F27;
  

  
  --hl-bs--btn-link-hover-rgb: 29,31,39;
  
}

:root:root {
  /*
  --hl-bs--btn-ghost-outline: 7f;
  */

  [PrimaryButtonTextColorRGB-StartComment]
  --hl-bs--btn-ghost-outline-rgb: [PrimaryButtonTextColorRGB], 127;
  [PrimaryButtonTextColorRGB-EndComment]
}

:root:root {
  
  --hl-bs--footer-color: #FFFFFF;
  

  
  --hl-bs--footer-color-rgb: 255,255,255;
  

  
  --hl-bs--footer-color-opposite: #1D1F27;
  

  
  --hl-bs--footer-color-opposite-rgb: 29,31,39;
  
}/************************ Primary Navbar ***********************/

body.ribbit :not(.no-theme) .navbar .navbar-nav>.active>a, body.ribbit :not(.no-theme) .navbar .navbar-nav>.active>a:hover, body.ribbit :not(.no-theme) .navbar .navbar-nav>.active>a:focus, body.ribbit :not(.no-theme) .navbar .navbar-nav>li>a:hover, body.ribbit :not(.no-theme) .navbar-default .navbar-nav>.open>a, body.ribbit :not(.no-theme) .navbar-default .navbar-nav>.open>a:hover, body.ribbit :not(.no-theme) .navbar-default .navbar-nav>.open>a:focus {
     
    color: #1D1F27;
        
     
    color: #1D1F27;
    
}

/************************ Anchors ***********************/
body.ribbit a{
     
    color: #01A982;
    
}
body.ribbit a:hover{
     
    color: #1D1F27;
    
}

body.ribbit :not(.no-theme) .HLLandingControl .Content a:not(.btn){
     
    color: #01A982;
    
}

body.ribbit :not(.no-theme) .HLLandingControl .Content a:not(.btn):hover{
     
    color: #1D1F27;
    
}

/************************ Bootstrap Buttons ***********************/

/****START - .btn-primary****/
body.ribbit :not(.no-theme) .btn-primary, body.ribbit :not(.no-theme) .ui-widget-content a.btn-primary {

     
    background-color: #1D1F27;
    border-color: #1D1F27;
     
     
    color: #FFFFFF !important;
    
}

body.ribbit :not(.no-theme) .btn-primary:hover, body.ribbit :not(.no-theme) .btn-primary:focus, body.ribbit :not(.no-theme) .btn-primary:active, body.ribbit :not(.no-theme) .open .dropdown-toggle.btn-primary {

     
    background: linear-gradient(0deg, rgba(0,0,0,0.1), rgba(0,0,0,0.1)), #1D1F27;
    border-color: #1D1F27;
     
     
    color: #FFFFFF;
    
}

/**** btn-primary ****/
body.ribbit :not(.no-theme) .btn-primary {

     
    color: #FFFFFF !important;
     
     
    background-color: #1D1F27;
    border-color: #1D1F27;
    
}

body.ribbit :not(.no-theme) .btn-primary:focus,
body.ribbit :not(.no-theme) .btn-primary:hover:not(:disabled) {

     
    background: linear-gradient(0deg, rgba(0,0,0,0.1), rgba(0,0,0,0.1)), #1D1F27;
    border-color: #1D1F27;
    
}

body.ribbit :not(.no-theme) .btn-primary:focus {

     
    box-shadow: 0 0 0 3px #1D1F277F;
    
}


/**** btn-success ****/
body.ribbit :not(.no-theme) .btn-success {

     
    color: #FFFFFF;
     
     
    background-color: #1D1F27;
    border-color: #1D1F27;
    
}

body.ribbit :not(.no-theme) .btn-success:focus,
body.ribbit :not(.no-theme) .btn-success:hover:not(:disabled) {

     
    background: linear-gradient(0deg, rgba(0,0,0,0.1), rgba(0,0,0,0.1)), #1D1F27;
    border-color: #1D1F27;
    
}

body.ribbit :not(.no-theme) .btn-success:focus {

     
    box-shadow: 0 0 0 3px #1D1F277F;
    
}

/**** btn-overlay ****/
body.ribbit :not(.no-theme) .btn-overlay {

     
    color: #1D1F27;
    
}


/**** btn-icon-primary[aria-label="Toggle folder list"] ****/
body.ribbit :not(.no-theme) .btn-icon-primary[aria-label="Toggle folder list"] {

     
    color: #FFFFFF;
     
     
    background-color: #1D1F27;
    border: #1D1F27;
    
}

body.ribbit :not(.no-theme) .btn-icon-primary[aria-label="Toggle folder list"]:hover {

    
    background: linear-gradient(0deg, rgba(0,0,0,0.1), rgba(0,0,0,0.1)), #1D1F27;
    
}



body.ribbit :not(.no-theme) .btn-icon-alt-secondary,
body.ribbit :not(.no-theme) .btn-icon-alt-secondary.focus,
body.ribbit :not(.no-theme) .btn-icon-alt-secondary:focus,
body.ribbit :not(.no-theme) .btn-icon-alt-secondary.hover,
body.ribbit :not(.no-theme) .btn-icon-alt-secondary:hover:not(:disabled) {

     
    color: #FFFFFF;
     
     
    background-color: #1D1F27;
    border-color: #1D1F27;
    
}


body.ribbit :not(.no-theme) .btn-primary:focus,
body.ribbit :not(.no-theme) .container-btn-icon-ctrl:focus>.btn-icon-ctrl {

     
    box-shadow: 0 0 0 3px #1D1F277F;
    
}


body.ribbit :not(.no-theme) .btn-inline-icon:focus,
body.ribbit :not(.no-theme) .btn-inline-icon:hover:not(:disabled) {
    /* 
  color: ; 
  */

     
    color: #1D1F27;
    
}


body.ribbit :not(.no-theme) fieldset.icon-radio-group input[aria-checked="true"]+* {

     
    color: #FFFFFF;
     
     
    background-color: #1D1F27;
    border-color: #1D1F27;
    
}

body.ribbit :not(.no-theme) fieldset.icon-radio-group input[aria-checked="true"]+*:focus,
body.ribbit :not(.no-theme) fieldset.icon-radio-group input[aria-checked="true"]+*:hover {

     
    background: linear-gradient(0deg, rgba(0,0,0,0.1), rgba(0,0,0,0.1)), #1D1F27;
    
     
    background-color: linear-gradient(0deg, rgba(0,0,0,0.1), rgba(0,0,0,0.1)), #1D1F27; 
    
}


/********* alt icon botton **********/
body.ribbit :not(.no-theme) .btn-icon-alt-secondary,
body.ribbit :not(.no-theme) .btn-icon-alt-secondary.focus,
body.ribbit :not(.no-theme) .btn-icon-alt-secondary:focus,
body.ribbit :not(.no-theme) .btn-icon-alt-secondary.hover,
body.ribbit :not(.no-theme) .btn-icon-alt-secondary:hover:not(:disabled) {

     
    background-color: #1D1F27;
    border-color: #1D1F27;
    
}


body.ribbit :not(.no-theme) .primary-button-background-color {

     
    background-color: #1D1F27 !important;
    
}


body.ribbit :not(.no-theme) .primary-button-border-color {

     
    color: #1D1F27 !important;
    
}


body.ribbit :not(.no-theme) .primary-button-text-color {

     
    color: #FFFFFF !important;
    
}


body.ribbit :not(.no-theme) .primary-button-hover-background-color:hover, body.ribbit :not(.no-theme) .primary-button-hover-background-color:focus {

     
    background-color: #1D1F27 !important;
    
}

/****END - .btn-primary****/

/****START - .btn-success****/
body.ribbit :not(.no-theme) .btn-success {

     
    background-color: #1D1F27;
    border-color: #1D1F27;
     
     
    color: #FFFFFF;
    
}

body.ribbit :not(.no-theme) .btn-success:hover, body.ribbit :not(.no-theme) .btn-success:focus, body.ribbit :not(.no-theme) .btn-success:active, body.ribbit :not(.no-theme) .open .dropdown-toggle.btn-success {

     
    background-color: #1D1F27;
    border-color: #1D1F27;
     
     
    color: #FFFFFF;
    
}

body.ribbit :not(.no-theme) .success-button-background-color {

     
    background-color: #1D1F27 !important;
    
}

body.ribbit :not(.no-theme) .success-button-border-color {

     
    color: #1D1F27 !important;
    
}

body.ribbit :not(.no-theme) .success-button-text-color {
     
    color: #FFFFFF !important;
    
}


body.ribbit :not(.no-theme) .success-button-hover-background-color:hover, body.ribbit :not(.no-theme) .success-button-hover-background-color:focus {
    
     
    background-color: #1D1F27 !important;
    
}

/****END - .btn-success****/


/************************ Interior Header (#PageTitleH1) ***********************/
body.ribbit.interior :not(.no-theme) #PageTitleH1_Svg_Fill_Color {
     
    fill: #1D1F27;
    
}
body.ribbit.interior :not(.no-theme) #InteriorPageTitle #PageTitleH1 {
     
    color: #FFFFFF !important;
    
}

/************************ Community Tabs ***********************/
body.ribbit :not(.no-theme) .community-tabs-container #CommunityTabsContainer.nav.nav-tabs li.active-tab {
     
    color: #1D1F27;
     
}

body.ribbit :not(.no-theme) .community-tabs-container #CommunityTabsContainer.nav.nav-tabs li.active-tab, body.ribbit .community-tabs-container #CommunityTabsContainer.nav.nav-tabs li:hover, body.ribbit .community-tabs-container #CommunityTabsContainer.nav.nav-tabs li:focus {
     
    border-bottom-color: #1D1F27;
     
}

/*************** Inheritance for Content Specific to Association Model ***************/

/*Engagement Leaderboard*/
body.ribbit :not(.no-theme) .engagement-leaderboard ul.nav.nav-tabs>li.active>a, body.ribbit :not(.no-theme) .engagement-leaderboard ul.nav.nav-tabs>li:hover>a, body.ribbit :not(.no-theme) .engagement-leaderboard ul.nav.nav-tabs>li:focus>a, body.ribbit :not(.no-theme) .engagement-leaderboard ul.nav.nav-tabs>li.active>a:hover {
    
    color: #1D1F27;
    
     
    border-bottom-color: #1D1F27;
     
}

body.ribbit .engagement-leaderboard .tab-content .HLEngagement>.Content ul.display-vertical>li:hover .row.title-row .col-md-9>.leaderboard-user-info>a[id*=_EngagementList_NameLink_] {   
     
    color: #1D1F27;
    
     
    color: #1D1F27;
    
}

/*Logged-out Homepage Row backgrounds*/
body.ribbit :not(.no-theme) .row.primary-row {    
     
    background-color: #1D1F27;
    
}

body.ribbit :not(.no-theme) .row.secondary-row {    
     
    background-color: #01A98290;
    
}

/*Member Directory Action buttons color variation*/
body.ribbit :not(.no-theme) .member-directory .actions .btn:first-of-type {
     
    color: #FFFFFF;
         
     
    background-color: #1D1F27;
    border-color: #1D1F27;
     
}

body.ribbit :not(.no-theme) .member-directory .actions .btn:first-of-type:hover{
     
    color: #FFFFFF;
    
     
    background: linear-gradient(0deg, rgba(0,0,0,0.1), rgba(0,0,0,0.1)), #1D1F27;
    border-color: #1D1F27;
    
}

/*QuickLinks Widget Inheritance*/
body.ribbit .quick-links-list-item:hover .quick-links-list-item-text{
     
    color: #1D1F27;
    
}

/**** Generated Utils ****/

/*
.text-color {
  color:  !important;
}
*/
  


.link-color {
  color: #01A982 !important;
}

  

/*
.mention-link-color {
  color:  !important;
}
*/
  

/*
.tag-link-color {
  color:  !important;
}
*/
  


.link-hover-color:hover, .link-hover-color:focus {
  color: #1D1F27 !important;
}

  

/*
.mention-hover-color:hover, .mention-hover-color:focus {
  color:  !important;
}
*/
  

/*
.tag-hover-color:hover, .tag-hover-color:focus {
  color:  !important;
}
*/
  

/*
.outer-background-color {
  background-color:  !important;
}
*/
  

/*
.tag-background-color {
  background-color:  !important;
}
*/
  

/*
.tag-background-hover-color:hover, .tag-background-hover-color:focus {
  color:  !important;
}
*/
  

/*
.page-background-color {
  background-color:  !important;
}
*/
  

/*
.border-color {
  color:  !important;
}
*/
  


.primary-heading-text-color {
  color: #1D1F27 !important;
}

  

/*
.primary-heading-background-color {
  background-color:  !important;
}
*/
  

/*
.secondary-heading-text-color {
  color:  !important;
}
*/
  

/*
.secondary-heading-background-color {
  background-color:  !important;
}
*/
  

/*
.tertiary-heading-text-color {
  color:  !important;
}
*/
  

/*
.tertiary-heading-background-color {
  background-color:  !important;
}
*/
  

/*
.seperator-color {
  color:  !important;
}
*/
  


.footer-background-color {
  background-color: #1D1F27 !important;
}

  


.footer-text-color {
  color: #FFFFFF !important;
}

  


.primary-color {
  color: #1D1F27 !important;
}

  


.text-on-primary {
  color: #FFFFFF !important;
}

  


.table-header-text-color {
  color: #FFFFFF !important;
}

  

/*
.landing-control-header-background-color {
  background-color:  !important;
}
*/
  

/*
.landing-control-header-text-color {
  color:  !important;
}
*/
  

/*
.landing-control-border-color {
  color:  !important;
}
*/
  

/*
.landing-control-text-color {
  color:  !important;
}
*/
  

/*
.landing-control-background-color {
  background-color:  !important;
}
*/
  


.landing-control-link-color {
  color: #01A982 !important;
}

  

/*
.landing-control-byline-text-color {
  color:  !important;
}
*/
  


.landing-control-sub-title-text-color {
  color: #01A982 !important;
}

  


.landing-control-title-text-color {
  color: #1D1F27 !important;
}

  

/*
.selected-tab-background-color {
  background-color:  !important;
}
*/
  

/*
.selected-tab-border-color {
  color:  !important;
}
*/
  


.selected-tab-text-color {
  color: #01A982 !important;
}

  

/*
.unselected-tab-hover-background-color:hover, .unselected-tab-hover-background-color:focus {
  background-color:  !important;
}
*/
  


.unselected-tab-hover-text-color {
  color: #01A982 !important;
}

  

/*
.unselected-tab-background-color {
  background-color:  !important;
}
*/
  

/*
.unselected-tab-text-color {
  color:  !important;
}
*/
  


.slogan-text-color {
  color: #1D1F27 !important;
}

  


.table-header-background-color {
  background-color: #1D1F27 !important;
}

  

/*
.table-alternate-background-color {
  background-color:  !important;
}
*/
  


.aux-menu-text-color {
  color: #01A982 !important;
}

  


.unselected-menu-background-color {
  background-color: #01A982 !important;
}

  

/*
.breadcrumb-bar-background-color {
  background-color:  !important;
}
*/
  

/*
.breadcrumb-text-color {
  color:  !important;
}
*/
  


.breadcrumb-link-color {
  color: #01A982 !important;
}

  


.footer-menu-text-color {
  color: #FFFFFF !important;
}

  


.unselected-menu-text-color {
  color: #FFFFFF !important;
}

  


.selected-menu-background-color {
  background-color: #1D1F27 !important;
}

  


.selected-menu-text-color {
  color: #FFFFFF !important;
}

  


.hover-menu-text-color {
  color: #FFFFFF !important;
}

  


.hover-menu-background-color {
  background-color: #01A982 !important;
}

  


.hover-menu-selected-background-color {
  background-color: #1D1F27 !important;
}

  


.hover-menu-selected-text-color {
  color: #FFFFFF !important;
}

  

/*
.hover-menu-border-color {
  color:  !important;
}
*/
  

/*
.primary-button-background-color {
  background-color:  !important;
}
*/
  

/*
.primary-button-border-color {
  color:  !important;
}
*/
  

/*
.primary-button-text-color {
  color:  !important;
}
*/
  

/*
.primary-button-hover-background-color:hover, .primary-button-hover-background-color:focus {
  background-color:  !important;
}
*/
  

/*
.info-button-background-color {
  background-color:  !important;
}
*/
  

/*
.info-button-border-color {
  color:  !important;
}
*/
  

/*
.info-button-text-color {
  color:  !important;
}
*/
  

/*
.info-button-hover-background-color:hover, .info-button-hover-background-color:focus {
  background-color:  !important;
}
*/
  

/*
.success-button-background-color {
  background-color:  !important;
}
*/
  

/*
.success-button-border-color {
  color:  !important;
}
*/
  

/*
.success-button-text-color {
  color:  !important;
}
*/
  

/*
.success-button-hover-background-color:hover, .success-button-hover-background-color:focus {
  background-color:  !important;
}
*/
  

/*
.danger-button-background-color {
  background-color:  !important;
}
*/
  

/*
.danger-button-border-color {
  color:  !important;
}
*/
  

/*
.danger-button-text-color {
  color:  !important;
}
*/
  

/*
.danger-button-hover-background-color:hover, .danger-button-hover-background-color:focus {
  background-color:  !important;
}
*/
  

/*
.default-button-background-color {
  background-color:  !important;
}
*/
  

/*
.default-button-border-color {
  color:  !important;
}
*/
  

/*
.default-button-text-color {
  color:  !important;
}
*/
  

/*
.default-button-hover-background-color:hover, .default-button-hover-background-color:focus {
  background-color:  !important;
}
*/
  

/*
.pagination-activebutton-background-color {
  background-color:  !important;
}
*/
  

/*
.pagination-active-button-border-color {
  color:  !important;
}
*/
  

/*
.pagination-activebutton-text-color {
  color:  !important;
}
*/
  

/*
.pagination-button-background-color {
  background-color:  !important;
}
*/
  

/*
.pagination-button-border-color {
  color:  !important;
}
*/
  

/*
.pagination-button-text-color {
  color:  !important;
}
*/
  

/*
.pagination-button-hover-background-color:hover, .pagination-button-hover-background-color:focus {
  background-color:  !important;
}
*/
  

/*
.label-background-color {
  background-color:  !important;
}
*/
  

/*
.label-text-color {
  color:  !important;
}
*/
  

/*
.badge-background-color {
  background-color:  !important;
}
*/
  

/*
.badge-text-color {
  color:  !important;
}
*/
  

/*
.popup-window-header-background-color {
  background-color:  !important;
}
*/
  

/*
.popup-window-header-text-color {
  color:  !important;
}
*/
  

/*
.popup-window-background-color {
  background-color:  !important;
}
*/
  

/*
.popup-window-text-color {
  color:  !important;
}
*/
  

/*
.popup-window-footer-background-color {
  background-color:  !important;
}
*/
  

/*
.powered-by-higher-logic-background-color {
  background-color:  !important;
}
*/
  

/*
.powered-by-higher-logic-text-color {
  color:  !important;
}
*/
  

/*
.search-sidebar-heading-text-color {
  color:  !important;
}
*/
  

/*
.search-sidebar-heading-background-color {
  background-color:  !important;
}
*/
  

/*
.cookie-notification-background-color {
  background-color:  !important;
}
*/
  

/*
.cookie-notification-text-color {
  color:  !important;
}
*/
  
/* CSS Overrides */
:root {
    --ui-border-radius-small: 4px;
    --ui-border-radius-standard: 8px;
    --ui-border-radius-large: 10px;
    --ui-border-radius-btn: 30px;

    --ui-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.10), 0 0 2px 0 rgba(153, 153, 153, 0.25);
    --ui-box-hover: 0 0 16px 0 rgba(0, 0, 0, 0.15), 0 2px 4px 0 rgba(0, 0, 0, 0.10), 0 0 2px 0 rgba(153, 153, 153, 0.25);

    --ui-padding-small: 16px;
    --ui-padding-standard: 24px;
    --ui-padding-large: 32px;
    --ui-padding-xlarge: 40px;

    /*** colors ***/
    --ui-black: #000;
    --ui-white: #fff;
    --ui-link-dark: #068667;
    --secondary-alt: #292D3A;

    /*** backgrounds ***/

    --bg-gray: #EDEFEC;
    --bg-gray-alt: #F7F7F7;

    /*** typography ***/

    --typography-headings: #292D3A;
    --typography-body: #4A4E5D;
    --typography-small: #91939D;
}

/********** HPE Graphik Fonts **********/

@font-face {
    font-family: 'Graphik';
    src: url('//higherlogicdownload.s3.amazonaws.com/HPEHR/5b68080a-2632-47a2-a7dc-b5a6d436defd/UploadedImages/font_files/HPE_Graphik-Thin.otf') format('opentype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src: url('//higherlogicdownload.s3.amazonaws.com/HPEHR/5b68080a-2632-47a2-a7dc-b5a6d436defd/UploadedImages/font_files/HPE_Graphik-ThinItalic.otf') format('opentype');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src: url('//higherlogicdownload.s3.amazonaws.com/HPEHR/5b68080a-2632-47a2-a7dc-b5a6d436defd/UploadedImages/font_files/HPE_Graphik-Extralight.otf') format('opentype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src: url('//higherlogicdownload.s3.amazonaws.com/HPEHR/5b68080a-2632-47a2-a7dc-b5a6d436defd/UploadedImages/font_files/HPE_Graphik-ExtralightItalic.otf') format('opentype');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src: url('//higherlogicdownload.s3.amazonaws.com/HPEHR/5b68080a-2632-47a2-a7dc-b5a6d436defd/UploadedImages/font_files/HPE_Graphik-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src: url('//higherlogicdownload.s3.amazonaws.com/HPEHR/5b68080a-2632-47a2-a7dc-b5a6d436defd/UploadedImages/font_files/HPE_Graphik-LightItalic.otf') format('opentype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src: url('//higherlogicdownload.s3.amazonaws.com/HPEHR/5b68080a-2632-47a2-a7dc-b5a6d436defd/UploadedImages/font_files/HPE_Graphik-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src: url('//higherlogicdownload.s3.amazonaws.com/HPEHR/5b68080a-2632-47a2-a7dc-b5a6d436defd/UploadedImages/font_files/HPE_Graphik-RegularItalic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src: url('//higherlogicdownload.s3.amazonaws.com/HPEHR/5b68080a-2632-47a2-a7dc-b5a6d436defd/UploadedImages/font_files/HPE_Graphik-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src: url('//higherlogicdownload.s3.amazonaws.com/HPEHR/5b68080a-2632-47a2-a7dc-b5a6d436defd/UploadedImages/font_files/HPE_Graphik-MediumItalic.otf') format('opentype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src: url('//higherlogicdownload.s3.amazonaws.com/HPEHR/5b68080a-2632-47a2-a7dc-b5a6d436defd/UploadedImages/font_files/HPE_Graphik-Semibold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src: url('//higherlogicdownload.s3.amazonaws.com/HPEHR/5b68080a-2632-47a2-a7dc-b5a6d436defd/UploadedImages/font_files/HPE_Graphik-SemiboldItalic.otf') format('opentype');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src: url('//higherlogicdownload.s3.amazonaws.com/HPEHR/5b68080a-2632-47a2-a7dc-b5a6d436defd/UploadedImages/font_files/HPE_Graphik-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src: url('//higherlogicdownload.s3.amazonaws.com/HPEHR/5b68080a-2632-47a2-a7dc-b5a6d436defd/UploadedImages/font_files/HPE_Graphik-BoldItalic.otf') format('opentype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src: url('//higherlogicdownload.s3.amazonaws.com/HPEHR/5b68080a-2632-47a2-a7dc-b5a6d436defd/UploadedImages/font_files/HPE_Graphik-Black.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src: url('//higherlogicdownload.s3.amazonaws.com/HPEHR/5b68080a-2632-47a2-a7dc-b5a6d436defd/UploadedImages/font_files/HPE_Graphik-BlackItalic.otf') format('opentype');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src: url('//higherlogicdownload.s3.amazonaws.com/HPEHR/5b68080a-2632-47a2-a7dc-b5a6d436defd/UploadedImages/font_files/HPE_Graphik-Super.otf') format('opentype');
    font-weight: 950;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src: url('//higherlogicdownload.s3.amazonaws.com/HPEHR/5b68080a-2632-47a2-a7dc-b5a6d436defd/UploadedImages/font_files/HPE_Graphik-SuperItalic.otf') format('opentype');
    font-weight: 950;
    font-style: italic;
    font-display: swap;
}

/********** HPE Graphik XX Condensed Fonts **********/

@font-face {
    font-family: 'HPE Graphik XXCondensed';
    src: url('//higherlogicdownload.s3.amazonaws.com/HPEHR/5b68080a-2632-47a2-a7dc-b5a6d436defd/UploadedImages/font_files/HPE_GraphikXXCondensed-Thin.otf') format('opentype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'HPE Graphik XXCondensed';
    src: url('//higherlogicdownload.s3.amazonaws.com/HPEHR/5b68080a-2632-47a2-a7dc-b5a6d436defd/UploadedImages/font_files/HPE_GraphikXXCondensed-ThinItalic.otf') format('opentype');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'HPE Graphik XXCondensed';
    src: url('//higherlogicdownload.s3.amazonaws.com/HPEHR/5b68080a-2632-47a2-a7dc-b5a6d436defd/UploadedImages/font_files/HPE_GraphikXXCondensed-Extralight.otf') format('opentype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'HPE Graphik XXCondensed';
    src: url('//higherlogicdownload.s3.amazonaws.com/HPEHR/5b68080a-2632-47a2-a7dc-b5a6d436defd/UploadedImages/font_files/HPE_GraphikXXCondensed-ExtralightItalic.otf') format('opentype');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'HPE Graphik XXCondensed';
    src: url('//higherlogicdownload.s3.amazonaws.com/HPEHR/5b68080a-2632-47a2-a7dc-b5a6d436defd/UploadedImages/font_files/HPE_GraphikXXCondensed-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'HPE Graphik XXCondensed';
    src: url('//higherlogicdownload.s3.amazonaws.com/HPEHR/5b68080a-2632-47a2-a7dc-b5a6d436defd/UploadedImages/font_files/HPE_GraphikXXCondensed-LightItalic.otf') format('opentype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'HPE Graphik XXCondensed';
    src: url('//higherlogicdownload.s3.amazonaws.com/HPEHR/5b68080a-2632-47a2-a7dc-b5a6d436defd/UploadedImages/font_files/HPE_GraphikXXCondensed-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'HPE Graphik XXCondensed';
    src: url('//higherlogicdownload.s3.amazonaws.com/HPEHR/5b68080a-2632-47a2-a7dc-b5a6d436defd/UploadedImages/font_files/HPE_GraphikXXCondensed-RegularItalic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'HPE Graphik XXCondensed';
    src: url('//higherlogicdownload.s3.amazonaws.com/HPEHR/5b68080a-2632-47a2-a7dc-b5a6d436defd/UploadedImages/font_files/HPE_GraphikXXCondensed-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'HPE Graphik XXCondensed';
    src: url('//higherlogicdownload.s3.amazonaws.com/HPEHR/5b68080a-2632-47a2-a7dc-b5a6d436defd/UploadedImages/font_files/HPE_GraphikXXCondensed-MediumItalic.otf') format('opentype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'HPE Graphik XXCondensed';
    src: url('//higherlogicdownload.s3.amazonaws.com/HPEHR/5b68080a-2632-47a2-a7dc-b5a6d436defd/UploadedImages/font_files/HPE_GraphikXXCondensed-Semibold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'HPE Graphik XXCondensed';
    src: url('//higherlogicdownload.s3.amazonaws.com/HPEHR/5b68080a-2632-47a2-a7dc-b5a6d436defd/UploadedImages/font_files/HPE_GraphikXXCondensed-SemiboldItalic.otf') format('opentype');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'HPE Graphik XXCondensed';
    src: url('//higherlogicdownload.s3.amazonaws.com/HPEHR/5b68080a-2632-47a2-a7dc-b5a6d436defd/UploadedImages/font_files/HPE_GraphikXXCondensed-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'HPE Graphik XXCondensed';
    src: url('//higherlogicdownload.s3.amazonaws.com/HPEHR/5b68080a-2632-47a2-a7dc-b5a6d436defd/UploadedImages/font_files/HPE_GraphikXXCondensed-BoldItalic.otf') format('opentype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'HPE Graphik XXCondensed';
    src: url('//higherlogicdownload.s3.amazonaws.com/HPEHR/5b68080a-2632-47a2-a7dc-b5a6d436defd/UploadedImages/font_files/HPE_GraphikXXCondensed-Black.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'HPE Graphik XXCondensed';
    src: url('//higherlogicdownload.s3.amazonaws.com/HPEHR/5b68080a-2632-47a2-a7dc-b5a6d436defd/UploadedImages/font_files/HPE_GraphikXXCondensed-BlackItalic.otf') format('opentype');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'HPE Graphik XXCondensed';
    src: url('//higherlogicdownload.s3.amazonaws.com/HPEHR/5b68080a-2632-47a2-a7dc-b5a6d436defd/UploadedImages/font_files/HPE_GraphikXXCondensed-Super.otf') format('opentype');
    font-weight: 950;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'HPE Graphik XXCondensed';
    src: url('//higherlogicdownload.s3.amazonaws.com/HPEHR/5b68080a-2632-47a2-a7dc-b5a6d436defd/UploadedImages/font_files/HPE_GraphikXXCondensed-SuperItalic.otf') format('opentype');
    font-weight: 950;
    font-style: italic;
    font-display: swap;
}

/********** component page exclusive styling **********/

body.ribbit.community-components #MainCopy_ContentWrapper>.row-wide>div[class*="col-md-"]:first-child {
    padding-left: 8px;
}

body.ribbit.community-components #MainCopy_ContentWrapper>.row-wide>div[class*="col-md-"]:last-child {
    padding-right: 8px;
}

.typography table {
    border-spacing: 0;
    width: 100%;
}

.typography table,
.typography th,
.typography td {
    border: none;
    padding: 0;
    margin: 0;
}

.typography th,
.typography td {
    text-align: left;
    font-weight: normal;
}

body.ribbit #MPOuter .typography p,
.community-components .p-lg>h2,
.community-components .p-lg+.ContentItemHtml h2,
.community-components .p-sm>h2,
.component-subtitle p {
    color: #c8c8c8;
    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.community-components .HtmlContent>h3:only-child {
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f1f1;
}

/********** align items **********/

@media (min-width: 1200px) {

    .align-items,
    .align-items>.col-md-12 {
        display: flex;
        align-items: center;
    }
}

.align-items .col-md-6:first-child .HtmlContent:has(img) img {
    margin-right: auto;
}

.align-items .col-md-6:first-child .HtmlContent:not(:has(img)) {
    padding-right: 24px;
}

.align-items .col-md-6:last-child .HtmlContent:has(img) img {
    margin-left: auto;
}

.align-items .col-md-6:last-child .HtmlContent:not(:has(img)) {
    padding-left: 24px;
}

/* bootstrap fix */

.col-md-12 {
    float: none;
}

/*  stop the content overflowing to the sides, especially with negative margins on .row */
#MPOuterMost {
    overflow-x: hidden;
    overflow-y: hidden;
}

/* hide .HtmlFooter and .MPBottomMenu, both of which add extra padding/whitespace */
#FOOTER>.row:last-child,
.HtmlFooter,
.MPBottomMenu {
    display: none;
}

/* this one's not HL-specific */
/* centres all background images created using the bg image JS/ajax calls for images */
#PageTitleH1,
.hero,
.bg-image,
.bg-accent,
.img-container {
    background-size: cover;
    background-position: center;
}

/* avoids 1px tall sections, especially when they hold JS but no content */
/* can be less specific, but might break other HL functionality */
.home .col-md-12[class*="section"] {
    min-height: 0;
}

/* allows for word breaking for emails and profile inbox messages */
body {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* overrides the above word breaking for yes/no toggle buttons in create event */
#event-additional-details-container {
    overflow-wrap: normal !important;
    word-wrap: normal !important;
}

/* resets the padding on col-md-12 full-width sections */
.row-full .col-md-12[class*="section"] {
    padding: 0;
}

.row-full .col-md-6[class*="section"],
.row-full .col-md-8[class*="section"],
.row-full .col-md-4[class*="section"],
.row-full .col-md-3[class*="section"] {
    padding-left: 15px;
    padding-right: 15px;
}

/* reset alerts to neutral colours */
.alert-warning,
.alert-success,
.ideation-home .alert.alert-success,
.ideation-detail .alert.alert-success {
    color: inherit;
    background-color: #f7f7f7;
    border-color: #ccc;
    color: #333;
}

/*** fix Add Event button styling ***/
.HLEventList .Content>div[id*="ContentPanel"]>.col-md-12.no-pad>.pull-right {
    float: none !important;
    text-align: right;
}

.HLEventList .Content>div[id*="ContentPanel"]>.col-md-12.no-pad>.pull-right+br {
    display: none;
}

@media (max-width: 768px) {

    .btn-group>.btn,
    .btn-group-vertical>.btn {
        float: left;
    }
}

/*** fixing non-responsive images ***/
img {
    max-width: 100%;
}

.rounded-img img {
    border-radius: var(--ui-border-radius-standard);
}

/*** fixing lack of wrapping on community settings dropdown buttons ***/
.CommunityManagementGearStatusPaddingL {
    white-space: normal;
}

/****** fix missing left-hand profile page content on my contacts page ******/
.text-muted-h2.my-contacts .col-md-3.section1 {
    display: block !important;
}

/* Increasing the left offset for skip to content to be moved off the page */
.skiplinkholder a,
.skiplinkholder a:link,
.skiplinkholder a:visited {
    left: -240000%;
}

.skiplinkholder a:focus,
.skiplinkholder a:active {
    left: 0;
}

/* Stops logo from bleeding out on IE */
.LogoImg {
    width: 100%;
}

/* Hide welcome button */
#BtnShowProfile {
    display: none;
}

/* Hide HL search */
#searchColumn {
    display: none;
}

@media (max-width: 992px) {
    #searchColumn {
        display: block;
    }

    body:not(.ribbit) #searchColumn {
        float: none !important;
        max-width: 100%;
    }

    #MPSearchBlock {
        margin-top: 20px;
    }
}

#searchColumn .form-control::placeholder {
    font-style: normal;
}

/* profile image min widths */

.hl-profile-avatar img {
    min-width: 4em;
}

.hl-profile-avatar.lg img {
    min-width: 5.5em;
}

/* links */

/* .HtmlContent a[href="#"] {
    border-bottom: 2px solid transparent;
    animation: flash-border 1s infinite;
}

@keyframes flash-border {
    0% {
        border-color: transparent;
    }
    50% {
        border-color: red;
    }
    100% {
        border-color: transparent;
    }
} */

body.ribbit:not(.interior) #MPOuterMost .row>div[class*="col-md-"]>div[class*="Content"] .HLLandingControl>.Content h3 a:is(:hover, :focus),
body.ribbit #MPOuter .news-publications .SearchResults .row.title-row h3 a:is(:hover, :focus) {
    color: var(--hl-bs--link-hover);
    text-decoration: none;
}

/* Transitions */
.clickable,
.clickable .HtmlContent,
a,
i,
button,
input,
#MainCopy_ContentWrapper span,
:is(a, i, button, input, #MainCopy_ContentWrapper span):is(:hover, :focus) {
    transition: 0.3s;
}

button i,
input i,
a i {
    transition: none;
}

/********** typography **********/

.typography-heading,
body.ribbit .announcement-slide h3,
body.ribbit .engagement-leaderboard>div[id$="_divContainer"]>.ContentMainHeader {
    color: var(--typography-headings);
    filter: none;
}

.typography-body,
body.ribbit .announcement-slide p {
    color: var(--typography-body);
}

body,
body.ribbit,
body.ribbit .navbar,
body.ribbit .navbar-default .navbar-nav>li>a,
h1,
h2,
h3,
h4,
.h1,
.h2,
.h3,
.h4,
body.ribbit h1,
body.ribbit h2,
body.ribbit h3,
body.ribbit h4,
body.ribbit h5,
body.ribbit h6,
body.ribbit .h1,
body.ribbit .h2,
body.ribbit .h3,
body.ribbit .h4,
body.ribbit .h5,
body.ribbit .h6 {
    font-family: "Graphik";
    font-weight: 400;
    color: var(--typography-headings)
}

body.ribbit h1 {
    font-family: 'HPE Graphik XXCondensed';
    font-size: 64px;
    line-height: 120%;
    font-weight: 700;
    text-transform: uppercase;
}

body.ribbit h2,
body.ribbit #MPOuter .home-events .HLLandingControl.HLEventList .Content .col-md-12>ul li .calendary-number,
body.ribbit .text-muted-h2 h2 {
    font-size: 32px;
    line-height: 120%;
    font-weight: 600;
}

body.ribbit .h2-alt,
body.ribbit #MPOuter .community-home .col-md-8 h2,
body.ribbit #MPOuter .home-events .HLLandingControl.HLEventList .Content .col-md-12>ul li .title-row h4,
body.ribbit #MPOuter .community-home .col-md-4 h2,
body.ribbit .engagement-leaderboard>div[id$="_divContainer"]>.ContentMainHeader,
body.ribbit h2:has(em),
.HLEventList ul li .date-block .calendar-month,
body.ribbit h2 em,
body.ribbit .ContentItemHtml>h2,
body.ribbit #MPOuter .ContentItemReact+.ContentUserControl .heading h2,
body.ribbit.memberhome #MPOuter .col-md-3 .HLLandingControl .heading h2,
body.ribbit.memberhome #MPOuter .col-md-6 .HLLandingControl .heading h2,
body.ribbit #MPOuter .MVCContent h2,
body.ribbit:not(.interior) .row>div[class*="col-md-"]>div[class*="Content"] .SearchResults>div>.Content div[id*="_lvSearchResults_pnlObjectType_"] .label,
body.ribbit #MPOuter .HLEventList h4 {
    margin: 0;
    font-size: 14px;
    font-style: normal;
    line-height: 120%;
    letter-spacing: 0.5px;
    display: inline-block;
    font-weight: 500;
}

body.ribbit .ContentItemReact:not(.ThreadListWidget) .widget-heading h2 {
    margin: 10px 0;
}

body.ribbit .ContentItemReact h2,
body.ribbit #MPOuter .ContentItemReact+.ContentUserControl:not(:has(.HEngagement)) .heading h2 {
    color: var(--typography-small);
}

body.ribbit h2:has(em)+* {
    margin-top: 0;
}

body.ribbit h2>em {
    display: block;
    margin-bottom: 8px;
}

body.ribbit h3,
body.ribbit .ContentItemReact.ThreadListWidget .widget-heading h2,
body.ribbit .img-card.clickable h3,
body.ribbit:not(.interior) .row>div[class*=col-md-]>div[class*=Content] .HLLandingControl>.Content h3,
.profile-snippet-stats>a div:first-of-type {
    font-size: 21px;
    line-height: 120%;
    font-weight: 600;
    color: var(--typography-headings);
}

body.ribbit .h3-alt,
body.ribbit h4,
body.ribbit h3 a,
body.ribbit:not(.interior) .row>div[class*="col-md-"]>div[class*="Content"] .SearchResults>div>.Content h3 a,
body.ribbit:not(.interior) .row>div[class*="col-md-"]>div[class*="Content"] .SearchResults>div>.Content h3 a:is(:hover, :focus),
body.ribbit:not(.interior) .row>div[class*="col-md-"]>div[class*="Content"] .HLLandingControl>.Content h3 a,
body.ribbit:not(.interior) .row>div[class*="col-md-"]>div[class*="Content"] .HLLandingControl>.Content h3 a:is(:hover, :focus),
body.ribbit #MPOuter .ContentItemReact.FeedWidget h3 a,
.profile-snippet-bio .profile-snippet-avatar+div,
.comm-admins .member-name a,
.profile-snippet-bio .profile-snippet-avatar+div body.ribbit .tabbed-content .nav-tabs li a,
body.ribbit .icon-card h3,
body.ribbit .custom-card h3,
body.ribbit .clickable h3,
body.ribbit h3:has(em),
body.ribbit h3 em,
body.ribbit .ContentItemReact a.link-title,
#FOOTER h3,
body.ribbit .HLAnnouncements h3,
.bootstrap-4 .font-size-md {
    font-size: 18px;
    line-height: 120%;
    font-style: normal;
    color: var(--typography-headings);
    font-weight: 500;
}

.HLLandingControl .Content h3 a,
.HLAnnouncements .Content h2 a,
.HLRSSReader .Content h2 a {
    color: inherit !important;
}

body.ribbit h4,
body.ribbit:not(.interior) .row>div[class*="col-md-"]>div[class*="Content"] .SearchResults>div>.Content h3 a,
body.ribbit:not(.interior) .row>div[class*="col-md-"]>div[class*="Content"] .SearchResults>div>.Content h3 a:is(:hover, :focus),
body.ribbit:not(.interior) .row>div[class*="col-md-"]>div[class*="Content"] .HLLandingControl>.Content h3 a,
body.ribbit:not(.interior) .row>div[class*="col-md-"]>div[class*="Content"] .HLLandingControl>.Content h3 a:is(:hover, :focus),
body.ribbit .custom-directory-styling>h2,
.community-home .member-directory .member-row .member-name a,
body.ribbit #MPOuterMost .topics ul li,
body.ribbit #MPOuterMost .topics-panel h2,
body.ribbit #MPOuter .home-events .HLLandingControl.HLEventList .Content .col-md-12>ul li .calendar-month,
.bootstrap-4 .font-size-md {
    font-size: 16px;
    line-height: 120%;
    font-weight: 600;
}

body.ribbit h5,
body.ribbit #MPOuter .HLLandingControl .heading h2,
body.ribbit #MPOuter .HLLandingControl.HLEventList h3,
body.ribbit #MPOuter .HLLandingControl.HLEventList h3 a,
body.ribbit #MPOuter .ContentItemReact.FeedWidget h3,
body.ribbit .ContentItemReact:not(.ThreadListWidget) h2,
body.ribbit .ContentItemReact:not(.ThreadListWidget) .widget-heading h2,
body.ribbit #MPOuter .ContentItemReact h3,
body.ribbit #MPOuter .ContentItemReact h3 a,
body.ribbit.memberhome #MPOuter .col-md-3 .HLLandingControl h3 a,
body.ribbit.memberhome #MPOuter .col-md-6 .HLLandingControl h3 a,
.MostActiveMembers .bio-bubble-link h2,
.profile-snippet-progress span+span,
body.ribbit.memberhome #MPOuterMost #MPOuter .HLLandingControl.HLEngagement .display-vertical li .col-md-9>a,
body.ribbit .ContentItemReact:not(.ThreadListWidget).MostActiveMembers h2>div,
body.ribbit .ContentItemReact .widget-content-item,
body.ribbit .ContentItemReact.CommunityEventsList a.link-title,
body.ribbit #FOOTER h2 {
    font-size: 14px;
    font-style: normal;
    line-height: 120%;
    text-transform: none;
    font-weight: 500;
    color: var(--typography-headings);
}

body.ribbit h6,
body.ribbit .MostActiveMembers .points-badge,
.top-text-links ul li a,
#MPOuterMost .member-dashboard .profile-snippet-progress {
    font-size: 12px;
    line-height: 120%;
}

/*** paragraphs ***/

body.ribbit,
body.ribbit #MPOuter .text-default-text,
body.ribbit #MPOuter .HLLandingControl p,
#MainCopy_ContentWrapper .ContentItemHtml>.HtmlContent ul li,
#MainCopy_ContentWrapper .ContentItemHtml>.HtmlContent ol li,
.tech-post .grid .blogs-block .content-row .margin-top-small,
.profile-snippet-progress span,
.timeAgoFormat,
.suggested-contacts .col-md-6.col-sm-6 .details span {
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    color: var(--typography-body);
}

body.ribbit #MPOuter .text-default-text {
    color: var(--typography-body) !important;
}

body.ribbit .footer-top-row p,
body.ribbit .footer-bottom-row p,
.p-sm p,
.img-card.small p,
.profile-snippet-progress span,
.timeAgoFormat,
body.ribbit #MPOuterMost .topics-panel ul li {
    font-size: 14px;
}

.p-lg p,
.bg-gradient .custom-card p,
.hero .row>.col-md-12 p,
.hero .user-greeting p {
    font-size: 18px;
}

body.ribbit p:empty,
body.ribbit p:has(img:only-child),
body.ribbit p:not(:only-child):has(em > a),
body.ribbit:not(.interior) p:last-child,
body.ribbit.community-pages p:last-child {
    margin-bottom: 0;
}

/*** bylines ***/
body.ribbit:not(.interior) .RibbitEventList>.Content .col-md-12>ul>li div[id*="_pnlCalendarMain_"] div[id*="LocationPanel"],
body.ribbit:not(.interior) .RibbitEventList>.Content .col-md-12>ul>li div[id*="_pnlCalendarMain_"] div[id*="OnlinePanel"],
body.ribbit .byline-posted-in,
body.ribbit #MPOuter .ByLine,
body.ribbit .ContentItemReact .line-height-thin+div,
body.ribbit .HLLandingControl h5,
body.ribbit.memberhome #MPOuter .col-md-3 .HLLandingControl p,
body.ribbit.memberhome #MPOuter .col-md-6 .HLLandingControl p,
.suggested-contacts .col-md-6.col-sm-6 .details span,
.featured-event h2+p,
body.ribbit #MPOuter .home-events .HLLandingControl.HLEventList .Content .col-md-12>ul li .timeAgoFormat {
    color: var(--typography-small);
    font-size: 13px;
    line-height: 1.4;
}

body.ribbit .ByLine a,
body.ribbit .HLLandingControl h5 a {
    text-decoration: none;
    color: var(--hl-bs--link);
    font-weight: 500;
}

body.ribbit .ByLine a:is(:hover, :focus),
body.ribbit .HLLandingControl h5 a:is(:hover, :focus) {
    color: var(--hl-bs--link-hover);
    text-decoration: underline;
}

/********** buttons **********/

.make-buttons p>em {
    display: inline-block;
}

.make-buttons em a+a {
    margin-left: 16px;
}

.make-buttons:has(em + a) em {
    margin-right: 24px;
}

.make-buttons em a,
.popular-tags ul li a,
body.ribbit .btn:not(.icon-grid-icon, .icon-picker-dropdown-trigger),
body.ribbit #MPOuter .image-widget .HLandingControl div[id*="More"] a.btn,
body.ribbit #MPOuter .HLLandingControl.HLEventList:not(.RibbitEventList) a[id*="LinkToCalendar"],
body.ribbit #MPOuter .HLLandingControl.HLRSSReader div[id*="lnkMore"] a,
body.ribbit #MPOuter .HLLandingControl.HLDiscussions a[id*="MoreLink"],
body.ribbit #MPOuter .HLLandingControl.HLMyDocuments a[id*="MoreLink"],
body.ribbit .move-link-to-title h2+a,
.HLLandingControl.HLEventList .Content .col-md-12 ul li .img-container span:has(i) {
    border-radius: var(--ui-border-radius-btn);
    padding: 12px 20px;
    font-size: 16px;
    line-height: normal;
    font-weight: 500;
    border: 2px solid transparent;
    display: inline-block;
    font-style: normal;
    text-decoration: none;
    display: inline-block;
    position: relative;
    z-index: 1;
}

@media (max-width: 500px) {

    .groupdetails .make-buttons em a,
    .groupdetails .popular-tags ul li a,
    body.ribbit.community-pages .btn:not(.icon-grid-icon, .icon-picker-dropdown-trigger),
    body.ribbit.community-pages #MPOuter .image-widget .HLandingControl div[id*="More"] a.btn,
    body.ribbit.community-pages #MPOuter .HLLandingControl.HLEventList:not(.RibbitEventList) a[id*="LinkToCalendar"],
    body.ribbit.community-pages #MPOuter .HLLandingControl.HLRSSReader div[id*="lnkMore"] a,
    body.ribbit.community-pages #MPOuter .HLLandingControl.HLDiscussions a[id*="MoreLink"],
    body.ribbit.community-pages #MPOuter .HLLandingControl.HLMyDocuments a[id*="MoreLink"],
    body.ribbit.community-pages .move-link-to-title h2+a,
    .groupdetails .HLLandingControl.HLEventList .Content .col-md-12 ul li .img-container span:has(i) {
        padding: 4px 10px;
        font-size: 14px;
    }
}

.btn-danger {
    color: var(--ui-white) !important
}

.btn-group.form-control .dropdown-toggle.btn-default {
    border-radius: 0;
    ;
}

.make-buttons em a,
.make-link em a {
    margin-top: 14px;
}

#MainCopy_ContentWrapper .HtmlContent p>a:only-child:not(:has(i)) {
    display: inline-block;
    margin-top: 24px;
}

body.ribbit #MPOuter .image-widget .HLLandingControl div[id*="More"] {
    padding: 0;
}

body.ribbit #SearchControl_SearchButton {
    padding: 6px 12px;
}

.image-widget .HLLandingControl h2+a::after,
.make-link em a::after,
.make-buttons em a::after,
body.ribbit #MPOuter .HLLandingControl.HLRSSReader div a[id*="lnkMore"]::after,
.move-link-to-title h2+a::after,
body.ribbit:not(.home) div[id*="BottomLink"] a::after,
body.ribbit .narrow-widget-container .view-more-link a i::after,
body.ribbit #MPOuter .HLLandingControl.HLAnnouncements div[id*="MoreLinkPanel"] a::after {
    font-family: "Font Awesome 7 Pro";
    content: "\f061";
    font-weight: 900;
    font-size: 14px;
    color: inherit;
    margin-left: 6px;
    transition: 0.3s;
    color: var(--hl-bs--link);
}

/* primary */
body.ribbit .make-buttons em a,
body.ribbit #MPOuter .image-widget .HLLandingControl div[id*="More"] a.btn,
body.ribbit #MPOuter .HLLandingControl.HLEventList:not(.RibbitEventList) a[id*="LinkToCalendar"],
body.ribbit #MPOuter .HLLandingControl.HLDiscussions a[id*="MoreLink"] {
    background-color: var(--hl-bs--primary);
    color: var(--ui-white);
    border: 2px solid transparent;
}

.make-buttons em a::after {
    color: var(--ui-white);
}

body.ribbit .make-buttons em a:is(:hover, :focus),
body.ribbit :not(.no-theme) #MPOuter .btn-success:hover {
    background-color: #535C66;
}

body.ribbit :not(.no-theme) #MPOuter .btn-success:hover {
    border-color: #535C66;
}

/* secondary */

body.ribbit .make-buttons.secondary-btn em a,
.popular-tags ul li strong a:is(:hover, :focus),
body.ribbit .make-buttons.dark-outline-btn em a:last-of-type:is(:hover, :focus) {
    background: transparent;
    color: var(--hl-bs--primary);
    border-color: var(--hl-bs--secondary);
}

body.ribbit .make-buttons.secondary-btn em a:is(:hover, :focus),
body.ribbit .make-buttons.dark-outline-btn em a:last-of-type:is(:hover, :focus) {
    border-color: #068667;
}

.make-buttons.secondary-btn em a::after {
    color: var(--hl-bs--primary);
}

/* gray */

body.ribbit .make-buttons.gray-btn em a,
.popular-tags ul li a,
body.ribbit .make-buttons.gray-btn-last em a:last-of-type,
body.ribbit .btn-default:not(.icon-grid-icon, .icon-picker-dropdown-trigger) {
    color: var(--typography-headings);
    background-color: #EAEAEA;
}

.make-buttons.gray-btn em a::after {
    display: none;
}

/* white */
body.ribbit :not(.no-theme) #CreateBtnWrapper .btn-primary,
body.ribbit :not(.no-theme) #RibbitWelcome .Login>a,
body.ribbit .make-buttons.white-btn em a {
    background-color: var(--ui-white);
    color: var(--hl-bs--primary);
}

body.ribbit :not(.no-theme) #RibbitWelcome .Login>a {
    color: var(--hl-bs--primary) !important;
}

body.ribbit :not(.no-theme) #CreateBtnWrapper .btn-primary {
    color: var(--hl-bs--primary) !important;
}

.make-buttons.white-btn em a::after,
.make-buttons.white-btn-last em a:last-of-type::after,
.make-buttons.white-outline-btn em a::after {
    color: var(--hl-bs--primary);
}

/* white outline */
body.ribbit .make-buttons.white-outline-btn em a,
body.ribbit .make-buttons.white-outline-btn-last em a:last-of-type {
    color: var(--ui-white);
    background: transparent;
    border: 2px solid var(--hl-bs--secondary);
}

.make-buttons.white-outline-btn em a::after {
    color: var(--ui-white);
}

body.ribbit .make-buttons.white-outline-btn em a:is(:hover, :focus),
body.ribbit .make-buttons.white-outline-btn-last em a:last-of-type:is(:hover, :focus) {
    border-color: #068667;
}

body.ribbit .make-buttons.white-btn em a:is(:hover, :focus) {
    opacity: 0.8;
}

/*** button hovers ***/

/* Add a pseudo-element for the gradient background */
body.ribbit :not(.no-theme) .make-buttons:not(.white-btn,
    .white-outline-btn-last,
    .dark-outline-btn,
    .dark-outline-btn-last,
    .white-outline-btn,
    .white-outline-btn-last) em a::before,
.popular-tags ul li a::before,
body.ribbit #MPOuter .HLLandingControl.HLEventList:not(.RibbitEventList) a[id*="LinkToCalendar"]::before,
body.ribbit #MPOuter .HLLandingControl.HLDiscussions a[id*="MoreLink"]::before,
body.ribbit #MPOuter .image-widget .HLLandingControl div[id*="More"] a.btn::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    background: linear-gradient(0deg,
            rgba(0, 0, 0, 0.2) 0%,
            rgba(0, 0, 0, 0.2) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
    border-radius: inherit;
}

body.ribbit :not(.no-theme) .make-buttons.gray-btn em a::before,
.popular-tags ul li a::before {
    background: linear-gradient(0deg,
            rgba(0, 0, 0, 0.05) 0%,
            rgba(0, 0, 0, 0.05) 100%);
}

/* On hover/focus, fade in the pseudo-element */
body.ribbit :not(.no-theme) .make-buttons em a:is(:hover, :focus)::before,
.popular-tags ul li a:is(:hover, :focus)::before,
body.ribbit #MPOuter .image-widget .HLLandingControl div[id*="More"] a.btn:is(:hover, :focus)::before,
body.ribbit #MPOuter .HLLandingControl.HLEventList a[id*="LinkToCalendar"]:is(:hover, :focus)::before {
    opacity: 1;
}

.make-buttons:not(.gray-btn) em a::before,
.make-buttons.secondary-btn em a::before {
    display: none;
}

/* button sizes */

body.ribbit .btn.btn-sm,
.popular-tags ul li a,
.make-buttons.btn-small em a,
body.ribbit .btn-group-sm.btn,
body.ribbit .btn-group-sm .btn,
body.ribbit :not(.no-theme) .btn.thread-action-button,
.HLLandingControl.HLEventList .Content .col-md-12 ul li .img-container span:has(i) {
    font-size: 14px;
    padding: 4px 8px;

}

body.ribbit .btn.btn-xs,
.make-buttons.btn-xsmall em a,
body.ribbit.memberhome .HLLandingControl.HLEngagement .display-vertical .label {
    font-size: 12px;
    padding: 2px 4px;
    border-radius: var(--ui-border-radius-small);
}

/* mobile fab button styling */

body.ribbit .btn:is(.btn-block,
    .icon-picker-dropdown-trigger,
    .btn-ghost,
    .fab-button,
    .mobile-fab) {
    display: flex;
    padding: 0;
}

body.ribbit .LibraryEntriesDashboard .btn:is(.btn-ghost) {
    display: flex;
    padding: 0 !important;
}

/* bootstrap switches */
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary {
    background-color: var(--hl-bs--primary);
}

.bootstrap-switch-container {
    line-height: 1;
}

body.ribbit .btn-group>.btn:last-child:not(:first-child),
body.ribbit .btn-group>.dropdown-toggle:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/*** nav pills + dropdown menus ***/
.nav-pills>li.active>a,
.nav-pills>li.active>a:focus,
.nav-pills>li.active>a:hover,
.dropdown-menu>.active>a,
.dropdown-menu>.active>a:hover,
.dropdown-menu>.active>a:focus {
    background-color: var(--hl-bs--primary);
    color: var(--hl-bs--primary-opposite);
}

.list-group-item.active>.badge,
.nav-pills>.active>a>.badge {
    color: var(--hl-bs--primary);
}

body.ribbit #MPOuterMost #MPOuter .btn-recommend-no {
    border-radius: var(--ui-border-radius-btn) 0 0 var(--ui-border-radius-btn);
}

body.ribbit #MPOuterMost #MPOuter .btn-recommend-no+.btn {
    border-radius: 0 var(--ui-border-radius-btn) var(--ui-border-radius-btn) 0;
}

/*** pagination ***/
.pagination>.active>a,
.pagination>.active>span,
.pagination>.active>a:hover,
.pagination>.active>span:hover,
.pagination>.active>a:focus,
.pagination>.active>span:focus {
    background-color: var(--hl-bs--primary);
    border-color: var(--hl-bs--primary);
}

/*** arrow links ***/

.make-link em a,
body.ribbit #MPOuter .RibbitEventList div[id*="More"] a,
body.ribbit #MPOuter .HLLandingControl.HLEventList:not(.RibbitEventList) a[id*="LinkToCommunityCalendar"],
body.ribbit #MPOuter .HLLandingControl.HLAnnouncements div[id*="MoreLinkPanel"] a,
body.ribbit #MPOuter .HLLandingControl.HLDiscussions a[id*="MoreLink"],
body.ribbit #MPOuter .HLLandingControl.HLMyDocuments a[id*="MoreLink"],
body.ribbit #MPOuter .HLLandingControl.HLRSSReader a[id*="lnkMore"],
body.ribbit .move-link-to-title h2+a,
.summary-edit em a body.ribbit .narrow-widget-container .view-more-link a,
body.ribbit .view-more-link a.link-standalone,
body.ribbit .suggested-contacts-btn em a {
    font-size: 16px;
    font-weight: 500;
    line-height: normal;
    border: none;
    padding: 0;
    border-bottom: 1px solid transparent;
    border-radius: 0;
    background: transparent;
    text-decoration: none;
    font-style: normal;
    position: relative;
    display: inline-block;
}

body.ribbit .make-link[class*="dark"] em a,
.groupdetails #MPOuterMost #MPOuter .HLLandingControl a[id*="LinkToCommunityCalendar"],
.groupdetails #MPOuterMost #MPOuter .HLLandingControl a[id*="MoreLink"] {
    color: var(--ui-link-dark);
}

body.ribbit #MPOuter .RibbitEventList div[id*="More"] a,
body.ribbit #MPOuter .HLLandingControl.HLEventList:not(.RibbitEventList) a[id*="LinkToCommunityCalendar"],
body.ribbit #MPOuter .HLLandingControl.HLAnnouncements div[id*="MoreLinkPanel"] a,
body.ribbit #MPOuter .HLLandingControl.HLMyDocuments a[id*="MoreLink"],
body.ribbit #MPOuter .HLLandingControl.HLAnnouncements a[id*="MoreLink"],
body.ribbit .view-more-link a.link-standalone,
body.ribbit .suggested-contacts-btn em a,
.make-link.small em a {
    font-size: 14px;
}

body.ribbit .narrow-widget-container .view-more-link a i {
    margin-left: 0px !important;
}

.image-widget .HLLandingControl h2+a i::before,
body.ribbit #MPOuter .HLLandingControl.HLEventList a[id*="LinkToCommunityCalendar"] i::before,
body.ribbit #MPOuter .HLLandingControl.HLDiscussions a[id*="MoreLink"] i::before,
body.ribbit #MPOuter .HLLandingControl.HLMyDocuments a[id*="MoreLink"] i::before,
body.ribbit .narrow-widget-container .view-more-link a i::before {
    display: none;
    margin: 0;
}

body.ribbit #MPOuter .HLLandingControl.HLEventList a[id*="LinkToCommunityCalendar"] i {
    margin: 0;
}

.image-widget .HLLandingControl h2+a:is(:hover, :focus),
.make-link em a:is(:hover, :focus),
body.ribbit #MPOuter .HLLandingControl.HLRSSReader div a[id*="lnkMore"]:is(:hover, :focus),
body.ribbit #MPOuter .RibbitEventList div[id*="More"] a:is(:hover, :focus),
body.ribbit .move-link-to-title h2+a:is(:hover, :focus),
.summary-edit em a:is(:hover, :focus) body.ribbit .narrow-widget-container .view-more-link a:is(:hover, :focus),
body.ribbit #MPOuter .HLLandingControl.HLEventList.RibbitEventList a[id*="LinkToCommunityCalendar"]:is(:hover, :focus),
body.ribbit #MPOuter .HLLandingControl.HLDiscussions a[id*="MoreLink"]:is(:hover, :focus),
body.ribbit #MPOuter .HLLandingControl.HLMyDocuments a[id*="MoreLink"]:is(:hover, :focus) {
    /* border-bottom-color: var(--hl-bs--link); */
    color: var(--hl-bs--primary);
    text-decoration: none;
}

body.ribbit #MPOuter .HLLandingControl.HLEventList.RibbitEventList a[id*="LinkToCommunityCalendar"]:is(:hover, :focus),
body.ribbit #MPOuter .HLLandingControl.HLAnnouncements div[id*="MoreLinkPanel"] a:is(:hover, :focus),
body.ribbit #MPOuter .HLLandingControl a[id*="MoreLink"]:is(:hover, :focus),
body.ribbit #MPOuter .HLLandingControl a[id*="More"]:is(:hover, :focus) {
    border-bottom-color: var(--hl-bs--link);
}

.make-link em a:is(:hover, :focus)::after,
body.ribbit #MPOuter .HLLandingControl.HLRSSReader div a[id*="lnkMore"]::after {
    color: var(--hl-bs--primary);
}

body.ribbit .make-link[class*="dark"] em a:is(:hover, :focus)::after {
    color: var(--ui-link-dark);
}

body.ribbit .make-link[class*="dark"] em a:is(:hover, :focus),
body.ribbit .make-link[class*="dark"] em a:is(:hover, :focus)::after {
    color: var(--ui-white);
}


body.ribbit #MPOuter .HLLandingControl.HLAnnouncements div[id*="MoreLinkPanel"] a::before,
body.ribbit #MPOuter .HLLandingControl.HLAnnouncements div[id*="MoreLinkPanel"] a:is(:hover, :focus)::before,
body.ribbit #MPOuter .HLLandingControl.HLRecentBlogs p.make-link a:is(:hover, :focus),
body.ribbit #MPOuter .HLLandingControl.HLRecentBlogs p.make-link a:is(:hover, :focus)::after {
    color: var(--ui-link-dark);
}

/*** make cards the same height ***/
.flex-cards .ContentItemHtml,
.flex-cards .HtmlContent {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
}

.flex-cards .HtmlContent p:has(em a) {
    margin-top: auto;
}

/****** backgrounds ******/

body.ribbit.home {
    background-color: var(--ui-white) !important;
}

.bg-gray {
    background: var(--bg-gray);
}

.bg-gray-alt {
    background: var(--bg-gray-alt);
}

.bg-overlay,
.accent {
    position: relative;
    z-index: 1;
}

.bg-overlay::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(90deg, #292D3A 0%, rgba(41, 45, 58, 0.80) 37.81%, rgba(41, 45, 58, 0.27) 100%);
}

.bg-gradient {
    background: linear-gradient(244deg, #06A07E 0.07%, rgba(17, 96, 82, 0.95) 19.13%, rgba(46, 61, 68, 0.10) 46.35%), #1C1F26;
}

.bg-gradient-light {
    background: linear-gradient(120deg,
            rgba(19, 175, 139, 0.08) 0%,
            rgba(19, 175, 139, 0.18) 35%,
            rgba(19, 175, 139, 0.35) 70%,
            rgba(19, 175, 139, 0.55) 100%);
}

.bg-radial-gradient {
    background: radial-gradient(152.01% 108.96% at 97.95% 6.69%, #06A07E 0%, rgba(17, 96, 82, 0.95) 41.18%, rgba(20, 108, 150, 0.10) 77.88%, rgba(29, 31, 39, 0.00) 100%), #1D1F27;
}

.accent::after {
    content: '';
    background-image: url("https://higherlogicdownload.s3.amazonaws.com/HPEHR/5b68080a-2632-47a2-a7dc-b5a6d436defd/UploadedImages/dev_files_2025/accent-1.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 528px;
    height: 301.01px;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
}

.accent.alternate::after,
.bg-gradient-light.accent.alternate::after {
    content: '';
    background-image: url("https://higherlogicdownload.s3.amazonaws.com/HPEHR/5b68080a-2632-47a2-a7dc-b5a6d436defd/UploadedImages/dev_files_2025/accent-2.png");
    width: 1078px;
    height: 212px;
    left: 0;
    right: unset;
}

.bg-gradient-light.accent.alternate::after {
    background-image: url("https://higherlogicdownload.s3.amazonaws.com/JUNIPER/40022079-d016-4e8a-b779-b4cabd631c63/UploadedImages/dev_files_2026/white-rectangle-accent.png");
}

/*** interior bg margins ***/

.interior #MainCopy_ContentWrapper> :first-child[class*="bg-"] {
    margin-top: -48px;
}

.community-pages #MPOuter #MainCopy_ContentWrapper {
    padding-top: 0;
    padding-bottom: 0;
}

.interior #MainCopy_ContentWrapper> :nth-last-child(2)[class*="bg-"] {
    margin-bottom: -48px;
}

/* add space between html components and clp widgets*/

#MainCopy_ContentWrapper .col-md-4>div:not(:first-child):not(:only-child),
#MainCopy_ContentWrapper .ContentItemHtml~*:not(:first-child):not(:only-child):not(.slick-slide),
#MainCopy_ContentWrapper .callout-box+.callout-box {
    margin-top: 20px;
}

/*** widget title ***/

.widget-title h2 {
    margin: 0 0 16px;
}

/* remove extra margins */

.custom-card h3:not(:only-child),
.custom-card h4:not(:only-child),
.icon-card h3:not(:only-child),
.icon-card h4:not(:only-child),
.img-card h3:not(:only-child),
.img-card h4:not(:only-child) {
    margin-top: 0;
}

.icon-card h4+p:has(em a) {
    margin-top: 0;
}

/*** make coloured components text the proper colors ***/

.clickable.dark *,
body.ribbit .icon-card.dark.clickable h3,
.img-card.dark .HtmlContent>*,
.custom-card.dark>*,
.icon-card.dark>*,
body.ribbit .custom-card.dark h3,
body.ribbit .icon-card.dark h3,
body.ribbit .bg-overlay *,
body.ribbit .bg-primary:not(.top-nav) *,
body.ribbit .bg-gradient *,
body.ribbit .bg-gradient.accent *,
body.ribbit .bg-radial-gradient *,
body.ribbit #MPOuterMost .bg-primary .news-feed ul li a *:not(em > a),
.custom-card:is(.primary, .secondary, .dark-secondary, .dark-primary) * {
    color: var(--ui-white);
}

/*** shared background, box shadow, padding ***/

.img-card .HtmlContent,
.custom-card,
.icon-card,
.callout-box>div,
.announcement-slide,
body.ribbit #MPOuterMost .news-feed .HLLandingControl.HLRecentBlogs .Content .row .col-md-12>ul li,
.community-home .col-md-8 .HLLandingControl,
.community-home .col-md-4 .HLLandingControl {
    background-color: var(--hl-bs--gray-100);
    padding: var(--ui-padding-standard);
    transition: 0.3s;
}

body.ribbit .community-home .col-md-8 .HLLandingControl,
body.ribbit .community-home .col-md-4 .HLLandingControl {
    background-color: var(--ui-white);
    padding: var(--ui-padding-standard);
}

/* shared styling between img-card, custom-card, and icon-card */

.img-card,
.img-card.clickable.headshot .HtmlContent,
.custom-card,
.icon-card.clickable,
.tech-post .grid .blogs-block,
body.ribbit #MPOuterMost .news-feed .HLLandingControl.HLRecentBlogs .Content .row .col-md-12>ul li {
    position: relative;
    z-index: 1;
}

.img-card:not(.uncontained)::before,
.img-card.clickable.headshot .HtmlContent::before,
.custom-card::before,
.icon-card.clickable::before,
body.ribbit #MPOuterMost .news-feed .HLLandingControl.HLRecentBlogs .Content .row .col-md-12>ul li::before,
.tech-post .grid .blogs-block::after {
    content: '';
    background: linear-gradient(157deg,
            rgba(247, 247, 247, 0) 74.11%,
            #98EEDB 96.33%);
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -1;
    opacity: 0;
    top: 0;
    left: 0;
    transition: .3s
}

.tech-post .grid .blogs-block::after {
    z-index: 0;
}

.img-card:not(.uncontained)::before,
.img-card.clickable.headshot .HtmlContent::before,
.custom-card.dark::before,
.icon-card.dark.clickable::before,
body.ribbit #MPOuterMost .news-feed .HLLandingControl.HLRecentBlogs .Content .row .col-md-12>ul li::before {
    background: linear-gradient(157deg,
            rgba(41, 45, 58, 0) 74.11%,
            #079B7B 96.33%);
}

.img-card:not(.uncontained):is(:hover, :focus)::before,
.img-card.clickable.headshot .HtmlContent:is(:hover, :focus)::before,
.custom-card:is(:hover, :focus)::before,
.icon-card.clickable:is(:hover, :focus)::before,
body.ribbit #MPOuterMost .news-feed .HLLandingControl.HLRecentBlogs .Content .row .col-md-12>ul li:is(:hover, :focus)::before,
.tech-post .grid .blogs-block:is(:hover, :focus)::after {
    opacity: 1;
}

.img-card.dark .HtmlContent,
.custom-card.dark,
.icon-card.dark,
body.ribbit #MPOuterMost .bg-primary .news-feed .HLLandingControl.HLRecentBlogs .Content .row .col-md-12>ul li {
    background: var(--secondary-alt);
}

/*** large padding top and standard sides ***/

.announcement-slide {
    padding: var(--ui-padding-large) var(--ui-padding-standard);
}

/*** img cards ***/

.img-card.uncontained .HtmlContent {
    padding-left: 0;
    padding-right: 0;
    background-color: transparent;
}

/*** headshots ***/

.img-card.clickable.headshot>a,
.img-card.headshot {
    display: flex;
    height: 100%;
}

.img-card.headshot {
    width: 100%;
}

.img-card.headshot .HtmlContent {
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 100%;
}

.img-card.headshot .img-container {
    min-width: 150px;
}

.img-card.headshot p>a>i {
    font-size: 24px;
}

/*** img containers ***/

.img-container {
    height: 200px;
    position: relative;
}

.img-small .img-container,
.image-widget .img-container {
    height: 140px;
}

.row:is(.img-left, .img-right) .img-container {
    height: 380px;
    width: 100%;
}

body.ribbit .img-container:has(+ .cta-img) {
    height: 275px;
}

/*** custom cards ***/

.custom-card.gray {
    background-color: var(--hl-bs--gray-100);
}

.custom-card.primary {
    background-color: var(--hl-bs--primary);
}

.custom-card.secondary {
    background-color: var(--hl-bs--secondary);
}

.custom-card.dark-secondary {
    background-color: var(--bg-dark-secondary);
}

.custom-card.dark-primary {
    background-color: var(--bg-dark-primary);
}

.custom-card.light-secondary {
    background-color: var(--bg-light-secondary);
}

/* clickable text decoration and hover */

body.ribbit .icon-card.clickable h3,
body.ribbit .clickable>a,
body.ribbit #MPOuter .clickable .HLLandingControl .col-md-12>ul li>a,
body.ribbit #MPOuterMost .news-feed .HLLandingControl.HLRecentBlogs .Content .row .col-md-12>ul li>a {
    color: var(--typography-headings);
    text-decoration: none;
    transition: 0.3s;
    display: block;
    height: 100%;
}

/* icon tiles */

.icon-card.centered .HtmlContent {
    text-align: center;
}

.icon-card.centered .HtmlContent i {
    margin: auto;
}

.icon-card .HtmlContent * {
    margin-top: 0;
}

.icon-card h4 {
    margin-bottom: 8px;
}

.icon-card .HtmlContent i {
    width: 44px;
    height: 44px;
    font-size: 40px;
    margin-bottom: 16px;
    display: flex;
    transition: 0.3s;
}

.icon-card:not(.dark) .HtmlContent i {
    color: #000000;
}

/*** clickable  ***/

.clickable>a {
    text-decoration: none;
}

.clickable .HtmlContent :nth-last-child(2) {
    margin-bottom: 0;
}

/************ interior page title ************/

#InteriorPageTitle {
    background-image: url("https://higherlogicdownload.s3.amazonaws.com/HPEHR/5b68080a-2632-47a2-a7dc-b5a6d436defd/UploadedImages/dev_files_2025/interior-page-title.png");
    padding: 40px 0;
    background-size: cover;
}

#InteriorPageTitle svg {
    display: none;
}

#PageTitleH1 {
    text-transform: uppercase;
}

/************ footer ************/

#MPOuterMost.full #FOOTER>.row {
    max-width: 100%;
}

body.ribbit #FOOTER h2 {
    margin-bottom: 10px;
}

#MPOuterFooter {
    padding: 0;
}

body.ribbit.memberhome #FOOTER,
body.ribbit.memberhome #MPOuterFooter,
body.ribbit.memberhome #MPFooterLink {
    display: block !important;
}

#MPFooterLink.row.siteFrame {
    margin-left: -15px;
    margin-right: -15px;
}

#MPOuterFooter::after {
    border: none;
}

#MPFooterLinkContent {
    display: none;
}

#MPFooterLink a {
    letter-spacing: 0;
    font-size: inherit;
    font-weight: 300;
}

#FOOTER h2 {
    font-size: 14px;
    line-height: 1.2;
    margin-top: 0;
}

#FOOTER.col-md-12 {
    padding: 0;
}

body.ribbit #FooterContent>div:has(.custom-footer) {
    padding: 0;
}

/* .footer-middle-row,
.footer-bottom-row {
    position: relative;
}

.footer-middle-row::before,
.footer-bottom-row::before {
    content: "";
    position: absolute;
    top: 0;
    left: 16px;
    right: 16px;
    border-top: 1px solid rgba(217, 217, 217, 0.2);
    display: block;
} */

.footer-middle-row .ContentItemHtml+.ContentItemHtml {
    margin-top: 16px;
}

.footer-logo p {
    margin-bottom: 0;
}


#FOOTER .footer-contact p,
#FOOTER .footer-links a {
    margin-bottom: 4px;
}

#FOOTER .footer-links a {
    display: inline-block;
}

#FOOTER .footer-links a:is(:hover, :focus) {
    text-decoration: underline;
}

.footer-social ul {
    list-style-type: none;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 0;
    padding: 0;
    padding-top: 20px;
}

.footer-social ul li a {
    background-color: var(--hl-bs--secondary);
    padding: 6px;
    height: 32px;
    width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    text-align: center;
    font-size: 18px;
    line-height: 32px;
}

.footer-social ul li:not(:first-child) {
    margin-left: 8px;
}

.footer-social ul li a i {
    color: var(--ui-white);
}

.footer-social ul li a:is(:hover, :focus) {
    opacity: 0.7;
}

#FOOTER .footer-social h2 {
    margin-bottom: 0;
}

#MPCopyright {
    text-align: left;
    padding: 0;
    font-size: 13px;
}

.footer-legal {
    text-align: left;
    font-weight: 400;
    font-size: 13px;
}

/********** START NAV DEV **********/

/*** top nav ***/

.top-nav .HtmlContent {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
}

/*** bottom nav ***/

body.ribbit #NAV {
    background: var(--typography-headings) !important;
    box-shadow: none;
    -webkit-box-shadow: none;
}

#MPOuterMost.full #MPButtonBar {
    max-width: 1170px;
}

body.ribbit #NAV .navbar-nav>li>a {
    font-size: 14px;
    font-weight: 500;
    padding: 5px 12px;
    color: var(--ui-white);
}

body.ribbit #NAV .navbar-nav>li>a:is(:hover, :focus) {
    color: #D2D2D4;
}


body.ribbit #NAV .caret::before {
    color: var(--hl-bs--gray-300);
    font-size: 10px;
}

#NAV .navbar-nav {
    position: relative;
}

#NAV .navbar-nav::before {
    content: 'Elevate';
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    color: var(--ui-white);
    display: block;
    margin-right: 24px;
    padding-right: 24px;
    border-right: 1px solid rgba(217, 217, 217, 0.10);
}

/* member button */

body.ribbit #MPOuterMost .become-member em a,
body.ribbit #MPOuterMost .become-member em a::after {
    color: white;
}

body.ribbit #MPOuterMost .become-member em a {
    margin-top: 0;
    padding: 10px 20px;
}

/****** search ******/

body.ribbit #MPButtonBar>nav>div.collapse.navbar-collapse.navbar-ex1-collapse .row div[class*="col"] {
    align-items: center;
}

.search-wrap {
    border: 1px solid transparent;
    border-radius: 50px;
    overflow: hidden;
    width: 52px;
    height: 48px;
    transition: width 0.3s;
    position: relative;
    z-index: 10;
    right: 0px;
}

.search-wrap.open {
    width: 250px;
    transition: width 0.3s;
    border: 1px solid var(--hl-bs--primary);
    box-shadow: 0px 9px 10px 2px rgba(0, 0, 0, 0.03),
        0px 4px 4px rgba(4, 21, 81, 0.03), 0px 6px 10px rgba(4, 21, 81, 0.04);
    z-index: 10;
    background-color: var(--ui-white);
}

.search-bar-top {
    float: left;
    opacity: 0;
    z-index: -1;
    transition: 0.3s;
    position: absolute;
    right: 0;
    left: 0;
    width: calc(100% - 38px);
}

.open .search-bar-top {
    opacity: 1;
    z-index: 10;
    transition: 0.3s;
}

.search-bar-top .SearchInputs {
    background: #fff;
}

.search-bar-top .SearchInputs .form-control {
    padding: 0;
    border: none;
    box-shadow: none;
    width: 100%;
    font-size: 16px;
    line-height: 22px;
    color: #5b5b5b;
}

.SearchInputs .form-control::placeholder {
    font-style: normal;
}

body:not(.ribbit) #searchColumn {
    display: none;
}

.search-bar-top .form-control,
.open .search-bar-top .form-control {
    padding: 12px 20px;
    height: 46px;
    transition: width 0.3s;
    outline: none;
    background: transparent;
}

.search-bar-top .SearchInputs button[id*="SearchButton"] {
    padding: 0;
    width: 0;
    border: none;
    background: transparent;
    transition: width 0.3s;
}

body.ribbit .search-bar-top button[id*="SearchButton"],
.open .search-bar-top button[id*="SearchButton"] {
    margin-right: 15px;
    color: #2e334e;
    font-size: 16px;
    line-height: 22px;
    border: none;
    background: transparent;
    padding: 0;
    width: auto;
}

#searchColumn button[id*="SearchButton"]:hover,
#searchColumn button[id*="SearchButton"]:focus,
.open .search-bar-top button[id*="SearchButton"]:hover,
.open .search-bar-top button[id*="SearchButton"]:focus {
    color: var(--hl-bs--primary);
    background: transparent;
}

#searchColumn button[id*="SearchButton"] .glyphicon-search,
.open .search-bar-top button[id*="SearchButton"] .glyphicon-search {
    width: auto;
    vertical-align: unset !important;
    top: 0;
}

.search-btn-top {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    position: absolute;
    transition: background-color 0.3s;
    color: var(--ui-white);
    line-height: 16px;
    font-size: 16px;
    right: 0px;
    z-index: 15;
    padding: 10px;
    border: 1px solid transparent;
    margin: 5px 0;
}

.open .search-btn-top {
    transition: background-color 0.3s;
    right: 10px;
    border: none;
}

.search-btn-top::before {
    font-family: "Font Awesome 5 Pro";
    content: "\f002";
    font-weight: 900;
}

.open .search-btn-top::before {
    content: "\f00d";
    font-size: 18px;
    transition: 0s;
    color: white;
}

.open .search-btn-top {
    background-color: var(--hl-bs--primary)
}

/********** START HOMEPAGE DEV **********/

/* DEFAULT STYLING RESETS FOR

1. react widget styles (box shadows, filter and border radius)
2. react widget row heading styles (margin and padding)
*/

body.ribbit:not(.interior) .row>div[class*=col-md-]>div[class*=Content] .HLLandingControl,
body.ribbit:not(.interior) .row>div[class*=col-md-]>div.ContentItemReact {
    background-color: var(--ui-white);
    filter: none;
    border: none;
    border-radius: 0;
}

body.ribbit.home #MPOuterMost .HLLandingControl.HLDiscussions ul {
    margin: 0 24px;
}

body.ribbit.home #MPOuterMost .HLLandingControl.HLDiscussions ul li {
    padding-left: 0;
    padding-right: 0;
    border-bottom: 1px solid #E9E9E9;
}

body.ribbit.home #MPOuterMost .HLLandingControl.HLDiscussions ul li:last-child {
    border: none;
}

body.ribbit:not(.interior) .row>div[class*=col-md-]>div[class*=Content] .HLLandingControl:not(.HLEngagement) .row.heading {
    margin: 0 24px;
    padding: 24px 0;
}

body.ribbit:not(.interior) .row>div[class*=col-md-]>div[class*=Content] .HLLandingControl .row.heading,
body.ribbit:not(.interior) .row>div[class*=col-md-]>div.ContentItemReact .row.heading {
    padding: 12px 16px;
    border-bottom: 1px solid #E9E9E9;
}

/*** homepage hero slider ***/

.memberhome .hero-slider {
    padding-bottom: 60px !important;
}

body.ribbit #MainCopy_ContentWrapper .hero-slider .slick-track {
    display: flex;
    justify-content: center;
}

body.ribbit #MPOuterMost #MPOuter .hero-slide {
    max-width: unset;
    margin: unset;
    height: auto;
    display: flex;
    justify-content: center;
}

body.ribbit .hero-slide .HtmlContent {
    position: relative;
    z-index: 1;
    padding: 16px;
    max-width: 1170px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

body.ribbit .hero-slide .HtmlContent::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: rgba(29, 31, 39, 0.35);
    z-index: -1;
    pointer-events: none;
}

body.ribbit .hero-slider .slick-arrow {
    background: #EAEAEA;
    border-radius: 50%;
    position: absolute;
    border: none;
    z-index: 1;
    height: 40px;
    width: 40px;
    padding: 0;
    bottom: 60px;
}

body.ribbit.memberhome .hero-slider .slick-arrow {
    bottom: 120px;
}

body.ribbit .hero-slider .slick-arrow i {
    color: var(--hl-bs--primary);

}

body.ribbit #MPOuter .hero-slider .slick-arrow i {
    color: var(--hl-bs--primary);
}

body.ribbit .hero-slide .HtmlContent *:not(i) {
    color: var(--ui-white);
}

body.ribbit .hero-slider .prev-arrow {
    left: calc(50% - 585px);
}

body.ribbit .hero-slider .next-arrow {
    left: calc(50% - 535px);
}

@media (min-width: 768px) {
    body.ribbit .hero-slide .HtmlContent {
        padding: 64px 0 128px;
        padding-right: 500px;
    }
}

/*** homepage search ***/

.homepage.text h3 {
    margin: 0;
    margin-bottom: 8px;
}

body.ribbit #MPOuterMost #MPOuter .homepage.search {
    padding: 0;
}

body.ribbit #MPOuter .homepage.search {
    margin-bottom: 20px;
}

.homepage.search #SearchToggleIcon+div {
    background-color: var(--ui-white);
    border-radius: var(--ui-border-radius-btn);
}

.homepage.search .form-control {
    border: none;
    outline: none;
    font-size: 18px;
    background: transparent;
    height: 51px;
    padding: 0 24px;
}

.homepage.search .form-control::placeholder {
    font-size: 18px;
    font-style: normal;
    color: var(--hl-bs--gray-500);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-weight: 400;
}

body.ribbit #MPOuterMost .homepage.search button[id*="SearchButton"] {
    background-color: transparent;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

body.ribbit #MPOuterMost .homepage.search button[id*="SearchButton"] span {
    color: var(--typography-headings);
    font-size: 16px;
    font-weight: 900;
}

/*** latest discussions ***/

.home .HLLandingControl.HLDiscussions #sortOptionsContainer {
    display: none;
}

body.ribbit #MPOuterMost .move-bylines .ByLine,
body.ribbit #MPOuterMost .move-bylines .ByLine+h5 {
    display: inline-block;
    color: var(--typography-small);
}

.move-bylines .ByLine {
    margin-right: 10px;
}

/*** news feed ***/

body.ribbit #MPOuterMost .news-feed .HLLandingControl.HLRecentBlogs {
    background: transparent;
    filter: none;
}

body.ribbit #MPOuterMost .news-feed .HLLandingControl.HLRecentBlogs .row.heading,
body.ribbit #MPOuterMost .news-feed .HLLandingControl.HLRecentBlogs #sortOptionsContainer,
body.ribbit #MPOuterMost .news-feed .HLLandingControl.HLRecentBlogs div[id$=_BottomLink] a {
    display: none;
}

body.ribbit #MPOuterMost .news-feed .HLLandingControl.HLRecentBlogs .Content .row .col-md-12>ul li {
    padding: 0;
}

body.ribbit #MPOuterMost .news-feed .HLLandingControl.HLRecentBlogs .Content .row .col-md-12>ul li .text-container,
body.ribbit #MPOuterMost .news-feed .HLLandingControl.HLRecentBlogs .Content .row .col-md-12>ul li .make-link {
    padding: var(--ui-padding-standard);
}

/********** START MEMBER HOME DEV **********/

/*** remove default homepage styles ***/

body.ribbit:not(.interior) .row>div[class*=col-md-]>div[class*=Content] .HLLandingControl,
body.ribbit:not(.interior) .row>div[class*=col-md-]>div.ContentItemReact {
    background-color: var(--hl-bs--gray-100);
    -webkit-filter: none;
    filter: none;
    border: none;
    border-radius: 0px;
}

body.ribbit .narrow-widget-container {
    background-color: var(--hl-bs--gray-100);
}

body.ribbit #MPOuter .hl-widget-card {
    -webkit-box-shadow: 0 0 2px 1px rgba(140, 140, 140, .25);
    box-shadow: 0 0 2px 1px rgba(140, 140, 140, .25);
    border-radius: 0;
}


/************ profile card ************/
body.ribbit .profile-snippet-card {
    background-color: var(--typography-headings) !important;
}

body.ribbit .profile-snippet-card * {
    color: var(--ui-white) !important;
}

.profile-snippet-bio {
    position: relative;
    z-index: 1;
}

body.ribbit .profile-snippet-bio .profile-snippet-avatar {
    width: 102px;
    height: 102px;
    margin-top: 0 !important;
}

.profile-snippet-bio .profile-snippet-avatar+div {
    font-size: 18px !important;
}

#MPOuter .bootstrap-4 .border-alt-rules {
    border-top: 1px solid rgba(242, 242, 242, 0.2) !important;
}

.profile-snippet-progress span {
    color: var(--typography-headings);
}

body.ribbit .profile-snippet-progress .progress {
    box-shadow: none;
    background: var(--ui-white) !important;
    padding: 2px;
    height: 14px;
    border-radius: 20px;
}

.profile-snippet-progress .my-2 .progress-bar {
    background: var(--hl-bs--link) !important;
    border-radius: 20px;
    box-shadow: none;
}

/************ activity feed ************/

body.ribbit #MPOuter .FeedWidget.ContentUserControl.ContentItemReact,
body.ribbit #MPOuter .MicrositeFeedWidget.ContentUserControl.ContentItemReact {
    filter: none;
}

.feed-item-row>.feed-item-row .pt-1 {
    padding-top: 16px !important;
}

.feed-item-row .feed-badge.text-meta svg,
.RecentlyFollowedContent .link-container-content .widget-content-item span svg {
    color: var(--hl-bs--gray-800) !important;
}

body.ribbit .feed-list .feed-title-filter button.filter-bars-menu::before {
    font-family: "Font Awesome 7 Pro";
    margin-right: 6px;
    color: var(--typography-headings);
    content: "\f0b0";
    font-size: 14px;
    font-weight: 900;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

body.ribbit .feed-list .feed-title-filter button.filter-bars-menu svg {
    display: none;
}

body.ribbit .feed-list .feed-title-filter {
    margin-bottom: 16px;
    border: none;
    border-radius: 0;
    font-weight: 500 !important;
    background: var(--hl-bs--gray-100);
}


.feed-item-row>* {
    background: var(--hl-bs--gray-100);
}

.images-preview.feed-image {
    height: 230px;
}

.feed-item-row .hl-profile-avatar img {
    border: none
}

/*** activity feed calendar stamp ***/

body.ribbit .calendar-stamp,
body.ribbit:not(.interior) .RibbitEventList>.Content .col-md-12>ul>li div[id*="_pnlCalendarThumbnail_"] {
    background-color: var(--hl-bs--secondary);
}

body.ribbit:not(.interior) .RibbitEventList>.Content .col-md-12>ul>li div[id*="_pnlCalendarThumbnail_"] .date-block {
    flex-direction: column-reverse;
}

body.ribbit:not(.interior) .RibbitEventList>.Content .col-md-12>ul>li div[id*="_pnlCalendarMain_"] div i.fa {
    font-family: "Font Awesome 6 Pro";
    font-weight: 600;
    color: var(--hl-bs--gray-800);
}

/**** feed button text ***/

.card-byline {
    color: var(--typography-small);
    font-weight: 400;
}

body.ribbit .view-more-link a.link-standalone,
body.ribbit .suggested-contacts-btn em a {
    font-size: 14px;
    font-style: normal;
    line-height: normal;
    position: relative;
    color: var(--hl-bs--link);
}

body.ribbit .view-more-link a.link-standalone i::before,
body.ribbit .suggested-contacts-btn em a i::before {
    display: none;
}

body.ribbit a.link-standalone,
.FeedWidget a.link-container.link-container-link {
    text-decoration: none;
    color: var(--typography-headings);
}

.misc-byline,
body.ribbit .ContentItemReact .line-height-thin+div,
#FOOTER h3+p,
body.ribbit .FeedWidget a.link-meta,
body.ribbit .FeedWidget a.text-meta,
body.ribbit .MicrositeFeedWidget a.link-meta,
body.ribbit .MicrositeFeedWidget a.text-meta,
body.ribbit #MPOuter .HLEventList h4,
.HLLandingControl .timeAgoFormat,
.HLLandingControl div[id*="LocationPanel"] {
    font-size: 13px;
    font-weight: 400;
    line-height: 140%;
    color: var(--typography-small);
}

body.ribbit .FeedWidget a.link-meta,
body.ribbit .FeedWidget span+a.btn-inline-adjustment,
body.ribbit .FeedWidget a.link-meta:is(:hover, :focus),
body.ribbit .MicrositeFeedWidget a.link-meta:is(:hover, :focus) {
    color: var(--ui-link-dark);
    font-weight: 500;
}

body.ribbit .FeedWidget span+a.btn-inline-adjustment {
    font-weight: 400;
}

body.ribbit .FeedWidget .text-meta.btn-link,
body.ribbit .MicrositeFeedWidget .text-meta {
    color: var(--ui-link-dark) !important;
    font-weight: 300;
}

body.ribbit .FeedWidget .feed-item-body-expanded .font-size-xs,
body.ribbit .FeedWidget a.link-standalone,
body.ribbit .MicrositeFeedWidget .feed-item-body-expanded .font-size-xs,
body.ribbit .MicrositeFeedWidget a.link-standalone {
    font-size: 14px !important;
}

body.ribbit #MPOuter .bg-bg1 {
    background: #EDEDED !important;
}

/***** community events *****/

body.ribbit .calendar-stamp,
body.ribbit:not(.interior) .RibbitEventList>.Content .col-md-12>ul>li div[id*="_pnlCalendarThumbnail_"] {
    display: flex;
    flex-direction: column-reverse;
    border: none;
    justify-content: center;
}

body.ribbit .calendar-stamp .calendar-stamp-icon {
    color: var(--ui-white);
}

body.ribbit .calendar-stamp .month {
    margin-top: 0;
}

body.ribbit .community-events-list-row .p-3 h3 * {
    font-size: 16px !important;
}

body.ribbit .community-events-list-date span {
    display: none;
}

/***** most active members *****/

.MostActiveMembers .nav-tabs,
body.ribbit .MostActiveMembers .points-badge svg {
    display: none;
}

.hl-profile-avatar.xxs img {
    min-height: 32px;
    min-width: 32px;
}

body.ribbit .MostActiveMembers .points-badge {
    border-radius: 2px;
    background: rgba(1, 169, 130, 0.10) !important;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    color: var(--hl-bs--secondary) !important;
    position: relative;
    padding-right: 16px;
}

body.ribbit .MostActiveMembers .points-badge::before {
    font-family: "Font Awesome 7 Pro";
    margin-left: 4px;
    content: "\2b";
    font-size: 8px;
    font-weight: 900;
    position: absolute;
    right: 4px;
    color: inherit;
}

/************ react widgets default hover states ************/

body.ribbit #MPOuter a.link-container.link-container-link:hover {
    color: var(--hl-bs--link-hover);
    text-decoration: none;
}

body.ribbit #MPOuter .bootstrap-4 a.link-standalone:focus,
body.ribbit #MPOuter .bootstrap-4 a.link-standalone.focus,
body.ribbit #MPOuter .bootstrap-4 a.link-standalone:hover:not(:disabled),
body.ribbit #MPOuter .bootstrap-4 a.link-standalone.hover {
    text-decoration: none;
    position: relative;
}

body.ribbit #MPOuter .bootstrap-4 a.link-standalone:focus,
body.ribbit #MPOuter .bootstrap-4 a.link-standalone.focus,
body.ribbit #MPOuter .bootstrap-4 a.link-standalone:hover:not(:disabled),
body.ribbit #MPOuter .bootstrap-4 a.link-standalone.hover {
    border-bottom-color: var(--hl-bs--link);
    color: var(--hl-bs--link);
    text-decoration: none;
}

body.ribbit a.link-container:hover,
body.ribbit a.link-container .link-container-content:hover {
    background-color: #EDEDED;
    border-color: #EDEDED;
}

.grid .blogs-block {
    flex: 1 1 calc(33% - 16px);
    background-color: var(--hl-bs--gray-100);
    padding: var(--ui-padding-standard);
    transition: 0.3s;
}

/********** START COMMUNITY LANDING PAGE STYLING **********/

body.ribbit.interior #MainCopy_ContentWrapper.community-home {
    padding-top: 0;
    background: #F5F5F6;
}

/********** clp **********/


/* clp standard styles */

body.ribbit #MPOuter .community-home .col-md-8 h2,
body.ribbit #MPOuter .community-home .col-md-4 .HLLandingControl:not(.HLAnnouncements) h2 {
    border-bottom: 1px solid #E9E9E9;
    padding-bottom: 16px;
    width: 100%;
}

.community-home .HLLandingControl div[id*="BottomLink"]>.col-md-12,
.community-home .HLLandingControl div[id*="MoreLinkPanel"]>.col-md-12 {
    padding: 0;
    margin-top: 10px;
}

.community-home .HLLandingControl.HLDiscussions ul li .row.title-row {
    margin-bottom: 8px;
}

body.ribbit #MPOuterMost #MPOuter .community-home .HLLandingControl:not(.SearchResults) ul li>*,
body.ribbit #MPOuterMost #MPOuter .community-home .image-widget .HLLandingControl.SearchResults ul li .text-container *,
body.ribbit #MPOuterMost #MPOuter .community-home .HLLandingControl.HLAnnouncements ul li div[id*="DivAnnouncement"]>* {
    padding: 0;
}

body.ribbit #MPOuterMost #MPOuter .community-home .HLLandingControl.HLAnnouncements ul li {
    border-bottom: none;
}

body.ribbit .community-home .HLLandingControl ul li:not(:only-child) {
    padding: 16px 0;
}

body.ribbit .community-home .HLLandingControl ul li:only-child {
    padding-top: 16px;
}

body.ribbit.interior #MainCopy_ContentWrapper>.row>div[class*=col-md-]>div[class*=Content] .HLLandingControl .row {
    padding-left: 0;
    padding-right: 0;
}

/****** tabs ******/
.row.row-full.no-community-html div[class*="padding"] {
    padding: 0;
}

body.ribbit .community-tabs-container .community-tabs-actions {
    margin-top: -25px;
}

body.ribbit .community-tabs-container #CommunityTabsContainer.nav.nav-tabs li {
    border: none;
}

body.ribbit .community-tabs-container #CommunityTabsContainer.nav.nav-tabs li a {
    padding: 10px 16px;
    background-color: var(--hl-bs--gray-100);
    color: var(--typography-headings);
    text-transform: none;
    height: 42px;
    margin-right: 8px;
    border-radius: 0;
    line-height: normal;
    display: flex;
    align-items: center;
}

body.ribbit .community-tabs-container #CommunityTabsContainer.nav.nav-tabs li a:is(:hover,
    :focus),
body.ribbit .community-tabs-container #CommunityTabsContainer.nav.nav-tabs li.active a {
    background-color: #fff;
    color: var(--hl-bs--secondary);
}

body.ribbit .badge,
body.ribbit .community-tabs-container #CommunityTabsContainer.nav.nav-tabs li a .badge {
    color: var(--ui-white);
    font-weight: 500;
    padding: 3px 7px;
    border-radius: 4px;
    background: var(--hl-bs--secondary);
}

body.ribbit .community-tabs-container #CommunityTabsContainer.nav.nav-tabs li a .badge {
    margin-top: 1px;
    margin-left: 10px;
}

body.ribbit .community-tabs-container-outer {
    background: transparent;
    margin-bottom: 0;
    margin-top: -42px;
}

body.ribbit.community-pages:not(.groupdetails) .community-tabs-container-outer {
    margin-bottom: 40px;
    margin-top: -42px;
}

body.ribbit.blogviewer .community-tabs-container-outer {
    margin-top: -82px;
}

body.ribbit .btn.dropdown-toggle.gear-button {
    padding: 5px 12px;
}

/* mobile tabs */
body.ribbit .community-tabs-container #CommunityTabsContainer.nav.nav-tabs .dropdown li a {
    background: transparent;
    border-radius: 0;
    border-bottom: 1px solid var(--hl-bs--gray-100);
    box-shadow: none;
    margin-right: 0;
}

body.ribbit .community-tabs-container #CommunityTabsContainer.nav.nav-tabs .dropdown li:last-child a {
    border-bottom: none;
}

body.ribbit .community-tabs-container #CommunityTabsContainer.nav.nav-tabs .dropdown li a .badge {
    float: none;
    margin-top: 0;
}

body.ribbit .community-tabs-container-outer .community-tabs-container {
    padding: 0 10px;
}

.community-tabs-actions div[id*="pnlViewOnly"],
.community-tabs-actions div[id*="pnlViewOnly"] span.text-muted {
    color: white;
}

@media (max-width: 767px) {
    body.ribbit .community-tabs-container .community-tabs-actions {
        margin: 20px 0 10px;
    }
}

div[id*="ContributedContentList"] .btn-group {
    width: auto !important;
}

div[id*="ContributedContentList"] .btn-group {
    width: auto !important;
}

div[id*="ContributedContentList"] .col-md-12 {
    display: flex;
}

body.ribbit #MPOuter div[id*="ContributedContentList"] .btn-group button,
body.ribbit #MPOuter div[id*="ContributedContentList"] a.btn-success {
    font-size: 12px;
    padding: 4px 10px;
}

/*** community html ***/

.no-community-html {
    padding: 0 !important;
}

body.ribbit .summary-edit .img-container::before,
body.ribbit .summary-edit .img-container::after {
    display: none;
}


body.ribbit .summary-edit .Content .text-container:only-child {
    width: 100%;
}

body.ribbit .summary-edit .Content {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}

body.ribbit .summary-edit .Content .img-container:not(:only-child) {
    width: calc(33% + 48px);
    padding-left: 48px;
    height: 260px;
}

body.ribbit .summary-edit .Content .img-container:not(:only-child) img {
    border-radius: var(--ui-border-radius-standard);
}

body.ribbit .summary-edit .Content .text-container:not(:only-child) {
    width: calc(66% - 48px);
}

body.ribbit .summary-edit .Content .text-container p {
    color: var(--typography-body-alt);
}

.summary-edit .Content>ul {
    width: 25%;
    padding-left: 15px;
    list-style-type: none;
}

/* clp events */

/*** events ***/
.groupdetails .HLEventList ul li .date-block {
    width: 60px;
    height: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--hl-bs--secondary);
    color: var(--ui-white);
    margin-right: 16px;
}

.groupdetails .HLEventList ul li .date-block .calendar-day {
    display: none;
}

.groupdetails .HLEventList ul li .col-md-2 {
    width: 60px;
    margin-right: 16px;
}

.groupdetails .HLEventList ul li .col-md-10 {
    width: calc(100% - 80px);
}

.groupdetails .HLEventList ul li h3+p {
    display: none;
}

.groupdetails .HLEventList ul li h4 {
    margin: 0;
    margin-top: 6px;
}

/********** START INTERIOR PAGE STYLING **********/

/* community list */

.community-list p[id*="StatLastJoined"] {
    display: none;
}

.community-list {
    background: var(--bg-gray-alt);
    border: none;
    padding: var(--ui-padding-large);
    position: relative;
}

.community-list>* {
    padding: 0;
    width: 100%;
}

.allcommunities .community-list div[id*="pnlViewOnly"] {
    position: absolute;
    text-align: right;
    right: 40px;
    top: 40px;
}

body.ribbit #MPOuter .btn-community-stats-static {
    padding: 8px 12px;
    border-radius: 0;
    background: white;
    border: none;
    text-transform: capitalize;
}

.community-list div[id*="pnlCommunityJoinLinkDashboard"] {
    position: absolute;
    bottom: -60px;
    right: -10px;
}

@media (min-width: 768px) {
    .community-list div[id*="pnlCommunityJoinLinkDashboard"] {
        top: -50px;
        right: 15px;
        bottom: unset;
    }
}

.rowContainer.community-list div.pull-right.margin-top-small a.btn {
    width: 100%;
}

.community-list div[id*="pnlAttributes"] .pull-right {
    float: left !important;
}

/********** TECH POST FILTERED BLOGS **********/

/*** selector styling ***/

.tech-post .grid div.dropdown-group {
    position: relative;
    z-index: 2;
    margin-bottom: 32px;
}

.dropdown-group>.HtmlContent {
    display: flex;
    align-items: center;
    gap: 8px;
}

/*** dropdown ***/
div.filter-button-group {
    position: relative;
    width: 275px;
    color: var(--typography-small);
    border: 1px solid var(--hl-bs--gray-300);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

div.filter-button-group .filter-content.open {
    display: block;
    border: 1px solid #e5e9eb;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}

.filter-button-group ul.multiple-select {
    list-style: none;
    padding: 0px;
    margin: 0;
    display: none;
    position: absolute;
    width: 100%;
    top: 100%;
}

div.filter-button-group .filter-content.open ul.multiple-select {
    display: block;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
    background: #fff;
    z-index: 5;
}

.filter-button-group ul.multiple-select li.checkbox-filter {
    padding: 4px 10px;
}

div.filter-button-group .filter-label:after {
    content: "\f078";
    color: #555555;
    float: right;
    font-family: 'Font Awesome 5 Pro';
    font-size: 13px;
    line-height: 20px;
    height: 24px;
    width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

div.filter-button-group .filter-label {
    padding: 6px 12px;
    width: 100%;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    font-weight: 400;
    font-size: 14px;
    line-height: 15px;
    color: #555;
    text-transform: capitalize;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Customize the label (the container) */
.filter-content .container {
    display: block;
    position: relative;
    padding-left: 30px;
    margin-bottom: 0px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.filter-content .container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom checkbox */
.filter-content .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #f3f2f4;
}

/* On mouse-over, add a grey background color */
.filter-content .container:hover input~.checkmark {
    background-color: #e5e9eb;
}

/* When the checkbox is checked, add blue background */
.filter-content .container input.active~.checkmark {
    background-color: var(--hl-bs--secondary);
}

/* Create the checkmark/indicator (hidden when not checked) */
.filter-content .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.filter-content .container input.active~.checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.filter-content .container .checkmark:after {
    left: 7px;
    top: 2px;
    width: 7px;
    height: 13px;
    border: solid white;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/*** grid styling ***/

.tech-post .grid div[id*="BlogContents"] {
    margin-left: -12px;
    margin-right: -12px;
    background: #fff;
    margin-bottom: 60px;
}

.tech-post .grid {
    min-height: 150px;
}

.tech-post .ItemRatingCommentPanel,
.tech-post .tags-icon,
.tech-post .grid .pagination,
.tech-post .grid div[id*="BlogContents"]>.row:first-child,
.tech-post .grid div[id*="BlogContents"]>.row-border-top:last-child,
.tech-post .grid div[id*="ThreadFollowIcon"],
.tech-post .grid .blogs-block .col-md-8.col-sm-8+.col-md-4,
.tech-post .grid .blogs-block .col-sm-1.col-md-1 {
    display: none;
}

.tech-post .grid .blogs-block {
    width: calc(33.33333% - 24px);
    margin: 12px;
    border-top: none;
    transition: 0.3s;
    flex: 1 1 calc(33% - 12px);
    background-color: var(--hl-bs--gray-100);
    padding: var(--ui-padding-standard);
    padding-top: 100px;
    min-height: 320px;
}

.tech-post .grid .blogs-block::before {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    position: absolute;
    top: 30px;
    left: 30px;
    font-family: 'Font Awesome 7 Pro';
    color: white;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    content: '\f672';
    font-weight: 300;
    background-color: var(--hl-bs--primary);
}

.tech-post .grid .blogs-block .text-container {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tech-post .grid .blogs-block .col-md-8.col-sm-8 {
    width: 100%;
}

.tech-post .grid .blogs-block .content-row .margin-top-small {
    margin-top: 0;
}

body.ribbit #MPOuter .tech-post .grid .blogs-block .label-search-tag {
    padding: 0;
    background: transparent !important;
    border: none;
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: 13px;
    text-transform: uppercase;
    color: var(--hl-bs--secondary) !important;
    transition: .3s;
}

/********** CLIENT REQUESTED EDITS TO CUSTOM NAV  **********/

#hpehf-header .hpehf-logo-link {
    display: none !important;
}

.hpehf-centered-content {
    max-width: 1360px !important;
}

#MPCopyright {
    display: none;
}

/********** START RESPONSIVE **********/

/* footer responsive */

@media (min-width: 991px) {
    .footer-legal {
        text-align: right;
    }

    .footer-social ul {
        padding-top: 0;
        justify-content: flex-end;
    }
}

/* flex cards responsive */

@media (min-width: 991px) {
    body.ribbit .row-wide.flex-cards {
        display: flex;
    }

    body.ribbit .row-wide.flex-cards .clickable>a {
        height: 100%;
    }

    body.ribbit .flex-cards>[class*="col-"] {
        flex-grow: 0;
        flex-shrink: 1;
        display: flex;
    }
}

/* homepage responsive */

@media (min-width: 991px) {

    .news-feed .HLLandingControl.HLRecentBlogs .Content .row .col-md-12 ul {
        display: flex;
        gap: 24px;
    }

    .news-feed .HLLandingControl.HLRecentBlogs .Content .row .col-md-12 ul>li {
        display: flex;
        width: 33%;
    }

    .Footer.col-md-12 {
        padding: 0
    }

    .search-wrapper>div {
        display: flex;
        align-items: center
    }

    body.ribbit #MPOuterMost #MPOuter .homepage.text {
        width: calc(100% - 570px);
    }

    body.ribbit #MPOuterMost #MPOuter .homepage.search {
        width: 570px;
    }

    body.ribbit #MPOuterMost .become-member {
        margin-left: auto;
    }
}

@media (min-width: 768px) {

    body.ribbit #SearchControl_SearchButton,
    #MPOuterMost #MPSearchBlock {
        display: none;
    }

    .grid div[id*="BlogContents"] {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
    }

    .grid div[id*="BlogContents"]>.row {
        width: 100%;
    }

    .grid .blogs-block .row.content-row {
        padding: 0;
        margin-bottom: 16px;
    }
}

@media (max-width: 768px) {

    .search-wrap {
        display: none;
    }

    #MPSearchBlock {
        display: none;
    }

    #searchColumn {
        justify-content: end;
        margin: 0;
    }

    .top-nav .HtmlContent {
        align-items: center;
    }

    body.ribbit .navbar-toggle {
        background: var(--ui-white);
    }

    #NAV .navbar-nav::before {
        margin: 12px;
    }

    .viewthread div[id*="file-container"] {
        width: 100%;
    }

    .viewthread div[id*="file-container"] .btn,
    .viewthread #MPOuter div[qa-id*="main-selectors"] .btn {
        padding: 4px 10px;
    }

    .viewthread .MobileFab {
        display: none;
    }
}