:root {
    /**********************************************************************************************************************
    * QUICK STYLES *
    **********************************************************************************************************************/
    --heading-copy-color: #303133; /*primary color*/
    --link-color: #cb148b; /*secondary color*/
    --primary-color: #cb148b; /*primary button color*/
    --secondary-color: #703b96; /*secondary button color*/

    /**********************************************************************************************************************
    * UPDATE THESE FIELDS FOR MAJORITY OF CUSTOMIZATIONS *
    **********************************************************************************************************************/
    /*logo*/
    --logo-max-width: 120px;
    --logo-margin-top: 8px;

    /*button & links*/
    --hover-contrast: contrast(130%); /*hover contrast - If using a different color for hover change to "unset" and then remove 3 comment tags on button/link hovers below */
    --image-border-radius:10px;
    --button-border-radius: 40px;
    --link-copy-color: var(--link-color);
    --link-copy-color-hover: var(--link-color);
    --primary-button-copy-color: white;
    --primary-button-copy-color-hover: white;
    --primary-button-background-color: var(--primary-color);
    --primary-button-background-color-hover:  var(--primary-button-background-color);
    --primary-button-border-color: var(--primary-button-background-color);
    --primary-button-border-color-hover: var(--primary-button-background-color-hover);
    --secondary-button-copy-color: white;
    --secondary-button-copy-color-hover: white;
    --secondary-button-background-color: var(--secondary-color);
    --secondary-button-background-color-hover: var(--secondary-button-background-color);
    --secondary-button-border-color: var(--secondary-button-background-color);
    --secondary-button-border-color-hover: var(--secondary-button-background-color-hover);
    --default-button-copy-color: #333;
    --default-button-copy-color-hover: #333;
    --default-button-background-color: #fff;
    --default-button-background-color-hover: #f5f5f5;
    --default-button-border-color: #ccc;
    --default-button-border-color-hover: #adadad;

    /*fonts*/
    --font-family: Lato,Arial, Helvetica, sans-serif;
    --copy-color: var(--heading-copy-color);
    --base-font-size: 16px;

    /*navbar*/
    --navbar-background-color: #1d232b; /// #132032;
    --navbar-anchor-color: #b7b7b7;
    --navbar-anchor-color-hover: white;
    --navbar-anchor-color-active: var(--primary-color);
    --navbar-anchor-background-color: transparent;
    --navbar-anchor-background-color-hover: var(--primary-color);
    --navbar-anchor-background-color-active: transparent;
    --navbar-anchor-border-width: 3px;
    --navbar-anchor-border-color: transparent;

    /*subnav*/
    --subnavbar-background-color: #1d232b; /// #132032;
    --subnavbar-hover-contrast: var(--hover-contrast);
    --subnavbar-anchor-color: white;
    --subnavbar-anchor-color-hover: white;
    --subnavbar-anchor-color-active: var(--primary-color);
    --subnavbar-anchor-background-color: var(--subnavbar-background-color);
    --subnavbar-anchor-background-color-hover: var(--primary-color);
    --subnavbar-anchor-background-color-active: var(--subnavbar-background-color);
    --subnavbar-anchor-border-color: transparent;
    --subnavbar-border-top-color: var(--subnavbar-anchor-background-color);

    /*third level nav*/
    --subnavbar-dropdown-anchor-color: var(--subnavbar-anchor-color);
    --subnavbar-dropdown-anchor-color-hover: var(--subnavbar-anchor-color-hover);
    --subnavbar-dropdown-anchor-background-color: var(--subnavbar-anchor-background-color);
    --subnavbar-dropdown-anchor-background-color-hover: var(--subnavbar-anchor-background-color-hover);

    /*footer*/
    --footer-link-copy-color-hover: #fff;

    background-color: #FFFFFF !important; /*reset background for iframe.*/

    /*misc styles*/
    --icon-color: var(--primary-color);/*this is the font-awesome icons on the custom pages*/
    --icon-color-secondary: var(--icon-color);/*this is the font-awesome icons on the custom pages*/
    --icon-color-secondary-opacity: .4; /*opacity of secondary color*/
    --modal-header-background-color: var(--subnavbar-background-color);
    --modal-header-copy-color: var(--subnavbar-anchor-color);
    --tile-border-radius:8px; /*this is the tile sections on the featured pages */
    --form-input-copy-color: var(--copy-color); /* this copy color in the input fields */
    --form-input-border-radius:4px; /* this is the corner radius on all the form input fields*/
    --form-input-border-color:#ccc; /* this is the border-color on all the form input fields*/
    --form-input-background-color: white; /* this is the border-color on all the form input fields*/
    --subtle-gray:#f0f4f7; /*these are for all the subtle grays on the featured pages*/
    --pagination-copy-color-active: var(--primary-button-background-color);
    --pagination-background-color-active: white;

    /*alerts*/
    --alert-warning-background-color: #fcf8e3;
    --alert-warning-border-color: #faebcc;
    --alert-warning-color: #8a6d3b;
    --alert-info-background-color: #d9edf7;
    --alert-info-border-color: #bce8f1;
    --alert-info-color: #31708f;

}

/*******************************************************************************************************************************
* GLOBAL STYLES *
*******************************************************************************************************************************/

/* FONTS ************************************************/

html, body, label, footer, #page_body, #page_footer {
    color: var(--copy-color);
    font-family: var(--font-family) !important;
    font-size: var(--base-font-size);
    font-weight: 400;
    line-height: 1.45;
}
.fa {
    font-family: FontAwesome !important;
}
.fa.fa-facebook, .fa.fa-twitter {
    font-family: "Font Awesome 6 Brands" !important;
}
.glyphicon {
    font-family: 'Glyphicons Halflings' !important;
}
h1, h2, h3, h4, .zift-sublist-header > h3.panel-title {
    font-family: var(--font-family) !important;
    line-height: 1.45;
    font-weight: bold;
    color: var(--heading-copy-color);
}

/* HEADER ************************************************/

/*logo*/
.logo-condensed {
    max-width: var(--logo-max-width);
    margin-top: var(--logo-margin-top);
}

/*navbar*/
nav.navbar.navbar-default {
    background-color: var(--navbar-background-color) !important;
}
.navbar-header .navbar-when-side-nav {
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 12px 0px;
}

.navbar-default, .navbar-wrapper-gray, .nav.subnavbar-nav {
    background-color: transparent !important;
}
.navbar-wrapper-gray {
    border: none !important;
}
.navbar-wrapper-gray .navbar-nav li.active a {
    font-weight: unset;
    border-color: var(--navbar-anchor-border-color);
}
.navbar-default .navbar-nav li a, #nav-more-btn.open > a, #nameDropdown.open > a, .right-menu-bar a {
    color: var(--navbar-anchor-color);
    background-color: var(--navbar-anchor-background-color);
}
.left-menu-bar > li > a, .right-menu-bar > li > a {
    border-bottom: var(--navbar-anchor-border-width) solid transparent;
}
.navbar-default .navbar-nav li.open a:hover, .navbar-default .navbar-nav li.open a:focus, .navbar-default .navbar-nav li.open > a, #nav-more-btn > a:hover, #nav-more-btn > a:focus, .right-menu-bar a:hover, .right-menu-bar a:focus {
    color: var(--navbar-anchor-color-hover) !important;
    background-color: var(--navbar-anchor-background-color-hover) !important;
    border-color: var(--navbar-anchor-border-color);
}
.left-menu-bar > li > a:hover, .left-menu-bar > li > a:focus, .right-menu-bar > li > a:hover, .right-menu-bar > li > a:focus {
    border-color: var(--navbar-anchor-border-color);
}
.navbar-wrapper-gray .navbar-nav li.active a {
    color: var(--navbar-anchor-color-active) !important;
    background-color: var(--navbar-anchor-background-color-active) !important;
}
.navbar-nav>li>a {
    padding-top: 15px;
    padding-bottom: calc( 15px - (calc(var(--navbar-anchor-border-width) - 1px)));
}
.right-menu-bar > li > a {


    padding: 16px 15px calc( 19px - (calc(var(--navbar-anchor-border-width) + 4px)));
}
.nav .fa-caret-up {
    display: none !important;
}
.profile-dropdown, .portal-search {
    top: unset !important;
}
.portal-search .btn-search {
    border-radius: 0 var(--tile-border-radius) var(--tile-border-radius) 0;
}
.badge {
    padding: 1px 7px 2px !important;
}

.navbar-mobile>.navbar-header {
    background-color: var(--navbar-background-color);
}
/*subnav*/
.subnav {
    top: 0px !important;
    height: auto !important;
    margin-top: 0 !important;
}
.subnavbar-nav > li > a {
    opacity: 1;
}
.subnav .subnavbar-nav > li > a {
    color: var(--subnavbar-anchor-color);
    background-color: var(--subnavbar-anchor-background-color);
    font-size: 14px;
    padding-top: 7px;
    padding-bottom: 4px;
    border-bottom: 3px solid var(--subnavbar-anchor-background-color);
}
.subnav .subnavbar-nav > li.open > a:hover, .subnav .subnavbar-nav > li.open > a:focus, .subnav .subnavbar-nav > li > a:hover, .subnav .subnavbar-nav > li > a:focus {
    color: var(--subnavbar-anchor-color-hover) !important;
    background-color: var(--subnavbar-anchor-background-color-hover) !important;
    filter: var(--subnavbar-hover-contrast);
}
.subnav .subnavbar-nav > li.active > a {
    color: var(--subnavbar-anchor-color-active) !important;
    background-color: var(--subnavbar-anchor-background-color-active) !important;
    border-color: var(--subnavbar-anchor-border-color);
    font-weight: normal;
    filter: var(--subnavbar-hover-contrast);
}
.nav .open > a, .nav .open > a:focus, .nav .open > a:hover {
    border-color: var(--subnavbar-anchor-border-color);
}
#nav-bar-parent .navbar-wrapper-brand {
    background-color: var(--subnavbar-background-color) !important;
    height: auto !important;
    margin-bottom: 0px;
    border-top: 0px solid var(--subnavbar-border-top-color);
}

.navbar-right .dropdown-menu {
    background-color: var(--subnavbar-background-color);
    border:0 !important;
}

.navbar-right>li>ul li a {
    padding: 5px 10px !important;
    display:block;
}

/*subnav dropdown*/
.subnavbar-nav > li .dropdown-menu {
    background-color: var(--subnavbar-dropdown-anchor-background-color);
}
.subnavbar-nav > li .dropdown-menu > li > a {
    color: var(--subnavbar-dropdown-anchor-color) !important;
    background-color: var(--subnavbar-dropdown-anchor-background-color);
}
.subnavbar-nav > li.open .dropdown-menu > li > a:hover, .subnavbar-nav > li.open .dropdown-menu > li > a:focus {
    color: var(--subnavbar-dropdown-anchor-color-hover) !important;
    background-color: var(--subnavbar-dropdown-anchor-background-color-hover) !important;
    filter: var(--subnavbar-hover-contrast);
}

/*LINKS & BUTTONS********************************************************/

/*links*/
#outer-container .text-primary, a, .flex-list-title, .row a {
    color: var(--link-copy-color);
}
.zl_card-style-single-column .zl_partner-tile-btn-bar {
    color: var(--link-copy-color) !important;
}
#outer-container a:hover, #outer-container a:focus, #outer-container .bee-text-content a:hover, #outer-container .bee-text-content a:focus, #outer-container a:hover, #outer-container a:focus {
    /*
        color: var(--link-copy-color-hover) !important;
    */
    text-decoration: underline !important;
    filter: var(--hover-contrast);
}
#outer-container a.nounderline:hover {
    text-decoration: none !important;
}

/*all buttons*/
#outer-container .btn-success, #outer-container .btn-primary, #outer-container .panel-footer .btn-default, #zl_partner-tiles .zl_btn-outline, .btn {
    border-radius: var(--button-border-radius);
}

/*primary button*/
#outer-container .btn-success, button.zl_btn-outline, .zl_btn-outline {
    color: var(--primary-button-copy-color);
    background-color: var(--primary-button-background-color);
    border: 0px solid var(--primary-button-border-color);
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.panel-footer-collateral .btn-default {
    color: var(--primary-button-copy-color) !important;
    background-color: var(--primary-button-background-color) !important;
    border: 0px solid var(--primary-button-border-color) !important;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.zl_btn-outline:hover, .zl_btn-outline:focus,.panel-footer-collateral .btn-default:focus {
    background-color: var(--primary-button-background-color-hover) !important;
    color: var(--primary-button-copy-color-hover) !important;
}
#outer-container .panel-footer-collateral .btn-default:hover {
    background-color: var(--primary-button-background-color-hover) !important;
    color: var(--primary-button-copy-color-hover) !important;
    border: 0px solid var(--primary-button-border-color) !important;
    text-decoration:none !important;
}
#outer-container .bee-button-content:hover, #outer-container .bee-button-content:focus, #outer-container .btn-success:hover, #outer-container .btn-success:active, #outer-container .btn-success:focus, #outer-container .open .btn-success.dropdown-toggle, #outer-container .pagination > .jump-to > .btn-success:hover, #outer-container .pagination > .jump-to > .btn-success:focus, button.zl_btn-outline:hover, button.zl_btn-outline:focus, .zl_btn-outline:hover, .zl_btn-outline:focus {
    /*
        color: var(--primary-button-copy-color-hover) !important;
        background-color: var(--primary-button-background-color-hover) !important;
    */
    border-color: var(--primary-button-border-color-hover) !important;
    text-decoration: none !important;
    filter: var(--hover-contrast);
}

/*secondary button*/
#outer-container .btn-primary {
    color: var(--secondary-button-copy-color);
    border: 0px solid var(--secondary-button-border-color);
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
#outer-container .btn-primary:hover, #outer-container .btn-primary:active, #outer-container .btn-primary:focus, .open #outer-container .btn-primary.dropdown-toggle,
#outer-container #secondary-button a:hover, #outer-container #secondary-button a:focus {
    /*
        color: var(--secondary-button-copy-color-hover) !important;
        background-color: var(--secondary-button-background-color-hover) !important;
    */
    border-color: var(--secondary-button-border-color-hover) !important;
    text-decoration: none !important;
    filter: var(--hover-contrast);
}

/*default button*/
#outer-container .btn-default {
    color: var(--default-button-copy-color);
}
#outer-container .btn-default:hover, #outer-container .btn-default:active, #outer-container .btn-default:focus, #outer-container .open .btn-default.dropdown-toggle {
    color: var(--default-button-copy-color-hover) !important;
    background-color: var(--default-button-background-color-hover) !important;
    text-decoration: none !important;
    filter: none !important;
}

/*link and button color transition*/
a, a.btn-primary, div.bee-button a, div.button-container a, button.btn-success, button.btn-primary, button.btn-default, a.btn-success, a.btn-primary, a.btn-default, #loginButton {
    transition-property: color , background-color, border-color;
    transition-duration: .2s;
    transition-timing-function: linear;
}
.input-group-btn>.btn-default,
.input-group-addon {
    background-color: var(--subtle-gray);
}
/* FOOTER ************************************************/

#outer-container #page_footer a:hover, #outer-container #page_footer a:focus {
    color: var(--footer-link-copy-color-hover) !important;
    filter: var(--hover-contrast);
}

/* POSTS ************************************************/
.post-header-text h1 {
    color: white !important;
}
.flex-list-rhs {
    padding: 25px 20px;
}
.flex-list-date.ng-binding {
    font-size: 13px;
}
.flex-tile-title {
    line-height: 1.2;
    margin-bottom: 5px;
    display: block;
    font-weight: bold;
    font-size:23px !important;
}
.flex-tile-date {
    font-size: 14px;
}
.flex-tile-detail {
    color: var(--copy-color);
}
.flex-tiles {
    justify-content: space-between;
}
.flex-tile-wrapper {
    width: 32%;
    margin: 20px 0;
}
.flex-tile-image {
    width: 100%;
}
/* FEATURE PAGE UPDATES ********************************************/
#outer-container {
    background-color: #FFF !important;
}
.alert.alert-warning {
    margin-top: 20px !important;
}
.flex-list-item,
.flex-tile,
#campaignList .list-panel,
#mailing-list .col-md-9 .list-panel,
.panel-collateral,
.social-list .list-group-item,

.suggested-campaign,
#webplugin-list .col-md-9 .list-panel,
.zl_partner-tile,
.onboarding .task-group {
    border: 1px solid #efeff0 !important;
    background-color:white !important;
    border-radius: var(--tile-border-radius) !important;
    overflow: hidden;
    webkit-box-shadow: 0 0px 10px 0px rgba(200, 200, 200, .2) !important;
    box-shadow: 0 0px 10px 0px rgba(200, 200, 200, .2) !important;
}

#campaignList .list-panel,
#mailing-list .col-md-9 .list-panel,
.panel-collateral,
.social-list .list-group-item,
.suggested-campaign,
#webplugin-list .col-md-9 .list-panel,
.zl_partner-tile {
    padding: 10px;
}

#campaignList .list-panel .panel-heading,
#mailing-list .col-md-9 .list-panel .panel-heading,
#mailing-list .col-md-9 .list-panel .panel-body,
#webplugin-list .col-md-9 .list-panel .panel-heading,
#webplugin-list .col-md-9 .list-panel .panel-body {
    background-color: transparent !important;
    padding-bottom: 0px;
}
#campaignList .list-panel .panel-heading,
#mailing-list .col-md-9 .list-panel .panel-heading .panel-title,
#webplugin-list .col-md-9 .list-panel .panel-heading .panel-title {
    font-size:20px;
    font-weight:normal;
}
#campaign-list .col-md-3 .panel-title>span,
#mailing-list .col-md-3 .panel-title>span,
#collateral-list .col-md-3 .panel-title>span,
#webplugin-list .col-md-3 .panel-title>span,
#social-list .col-md-3 .panel-title>span {
    display: none;
}


/* FEATURE PAGE SIDEBAR FILTER  ************************************************/
#mainAngularView>div.row>.col-md-3,
#mainAngularView>div.ng-scope>.col-md-3,
#mainAngularView>#message-list .col-md-3 {
    padding: 0 40px 0 20px;
}
#mainAngularView>div.row>.col-md-3 .zift-filter-block>.tags-panel:first-of-type,
#mainAngularView>div.ng-scope>.col-md-3 .tags-panel:first-of-type,
#mainAngularView>#message-list .col-md-3 .tags-panel:first-of-type {
    border-bottom: none;
}
#mainAngularView>div.row>.col-md-3 .tags-panel .panel-heading,
#mainAngularView>div.ng-scope>.col-md-3 .tags-panel .panel-heading,
#mainAngularView>#message-list .col-md-3 .tags-panel .panel-heading,
#mainAngularView>#event-list .col-md-3 .tags-panel .panel-heading,
#mainAngularView>#course-lists .col-md-3 .tags-panel .panel-heading,
#mainAngularView>#courses-lists .col-md-3 .tags-panel .panel-heading,
#mainAngularView>#certification-lists .col-md-3 .tags-panel .panel-heading
{
    background-color: var(--subtle-gray);
    padding: 15px 15px;
}
#mainAngularView>div.row>.col-md-3 .tags-panel .tags-body .checkbox,
#mainAngularView>div.row>.col-md-3 .tags-panel .tags-body .radio,
#mainAngularView>div.ng-scope>.col-md-3 .tags-panel .tags-body .checkbox,
#mainAngularView>div.ng-scope>.col-md-3 .tags-panel .tags-body .radio,
#mainAngularView>#message-list .col-md-3 .tags-panel .tags-body .checkbox,
#mainAngularView>#message-list .col-md-3 .tags-panel .tags-body .radio {
    margin-top:0 !important;
}

#mainAngularView>div.row>.col-md-3 .tags-panel .tags-body,
#mainAngularView>div.ng-scope>.col-md-3 .tags-panel .tags-body,
#mainAngularView>#message-list .col-md-3 .tags-panel .tags-body,
#mainAngularView>#course-lists .col-md-3 .tags-panel .tags-body,
#mainAngularView>#courses-lists .col-md-3 .tags-panel .tags-body,
#mainAngularView>#certification-lists .col-md-3 .tags-panel .tags-body  {
    padding: 10px 5px 5px 15px;
}
#mainAngularView>div.row>.col-md-3 .tags-panel .tags-body label,
#mainAngularView>div.ng-scope>.col-md-3 .tags-panel .tags-body label,
#mainAngularView>#message-list .col-md-3 .tags-panel .tags-body label,
#mainAngularView>div.row>.col-md-3 .tags-panel .tags-body a.clickable,
#mainAngularView>div.ng-scope>.col-md-3 .tags-panel .tags-body a.clickable,
#mainAngularView>#message-list .col-md-3 .tags-panel .tags-body a.clickable {
    font-size:14px;
}

ng-container span[ng-if="!isHidden(def)"] {
    margin-top: -4px;
}
h2.panel-title ng-container[ng-if="!isFreshLayout()"] {
    margin-right: 10px;
    width: 10px;
    display: inline-block;
}

.zift-filter-block .tags-panel {
    overflow:hidden;
}
/* FORMS **********************************************************************/

.tags-panel #searchContainer input.form-control,
.tags-panel #searchContainer button.btn {
    border: 0;
}
div#searchContainer button.btn {
    border-radius: 0 var(--form-input-border-radius) var(--form-input-border-radius) 0;
}
div#searchContainer input {
    border-radius: var(--form-input-border-radius) 0 0 var(--form-input-border-radius);
}
.form-control {
    color: var(--form-input-copy-color);
    border-radius: var(--form-input-border-radius);
    border:1px solid var(--form-input-border-color);
    background-color: var(--form-input-background-color);
}
#outer-container .btn-group.onoff>.btn-default.on.active,
#outer-container .btn-group.onoff>.btn-default.on.focus {
    background-color: #303133 !important;
    border-color: #303133;
    color: #fff !important;
}
/* LOGIN FORM **********************************************************************/

form[name="forgotPassword"] p {
    margin-bottom: 15px;
}
form[name="forgotPassword"] a.pull-left {
    font-size:13px;
}
form[name="loginForm"] .form-group {
    margin-top: 0px;
    margin-bottom: 15px;
}

form[name="loginForm"] #loginButton {
    font-size: 17px;
    padding: 15px 35px;
    width: 100%;
    float: none;
    text-transform: uppercase;
    font-weight: bold;
}

form[name="loginForm"] .pull-left {
    float: right !important;
    margin-bottom: 15px;
    display: block;
    font-size:13px;
}

form[name="loginForm"] #forgotPasswordSubmit {
    float: left !important;
    margin-top: 10px;
    width: 100%;
}


/* register new user from email feature page */
div[ng-controller="UnifyrRegistrationPasswordConfigurationController as vm"]#password {
    max-width: 400px !important;
    margin: 0 auto 60px;
}

/* MODAL **********************************************************************/
.modal-open .modal-title, .modal-header button {
    color: var(--modal-header-copy-color) !important;
}
.modal-open .modal-header {
    background-color: var(--modal-header-background-color) !important;
}
.modal-footer {
    padding: 19px 10px 20px;
    border-top:none;
    clear: both;
}

/* ALERTS ************************************************/

.alert {
    border-radius: var(--tile-border-radius);
}
.alert-warning {
    background-color: var(--alert-warning-background-color);
    border-color: var(--alert-warning-border-color);
    color: var(--alert-warning-color);
}
.alert-info {
    background-color: var(--alert-info-background-color);
    border-color: var(--alert-info-border-color);
    color: var(--alert-info-color);
}

/* ONBOARDING ************************************************/
.task-group {
    padding:0 !important;
    margin-bottom:30px !important;
}
.task-group-header {
    padding: 10px;
    margin: 0 0 15px 0;
    background-color: var(--copy-color) !important;
    color: white;
}
ul.task-list.fa-ul {
    margin: 15px 30px;
}
.task-group>div>ul.task-list.fa-ul:first-of-type {
    margin-top: 20px;
}
.task-group>div>ul.task-list.fa-ul:last-of-type {
    margin-bottom: 20px;
}
.task-list-item {
    line-height: 1.3 !important;
}

.task-list-item .task-icon {
    font-size: 18px;
    margin-top: -1px;
    display: block;
}
.task-list-item .fa.fa-circle-o:before {
    font: var(--fa-font-regular);
    color: var(--copy-color);
}
.task-list-item .fa.fa-check-circle-o:before {
    font: var(--fa-font-full);
    color: var(--copy-color);
}

/* PAGINATION ************************************************/
#outer-container .pagination > .active > a, #outer-container .pagination > .active > a:focus, #outer-container .pagination > .active > a:hover, #outer-container .pagination > .active > span, #outer-container .pagination > .active > span:focus, #outer-container .pagination > .active > span:hover {
    color: var(--pagination-copy-color-active)!important;
    background-color: var(--pagination-background-color-active) !important;
    border: 1px solid #ddd !important;
}
#outer-container .pagination > .jump-to > .btn-success {
    background-color: var(--primary-button-background-color) !important;
    margin-bottom: 0;
}


/* LOCATOR **********************************************************/
.zl_google-location-search-box, .zl_search-box, .zl_current-location-icon-wrapper, .zl_countryCode, .zl_tier, .zl_search-field {
    border-radius: var(--form-input-border-radius) !important;
}
.zl_search-icon-wrapper {
    border-radius: 0 var(--form-input-border-radius) var(--form-input-border-radius) 0 !important;
}

/* COMPANY PROFILE **************************************************/
#companyProfile .panel-heading {
    padding-left: 15px;
}
div#companyProfile .panel {
    background-color: transparent;
}
/* ADDITIONAL STYLES ************************************************/
#titletext {
    background: linear-gradient(to bottom, rgb(37, 56, 139) 30%, rgb(204, 0, 126) 80%);
    -webkit-text-fill-color: transparent !important;
    -webkit-background-clip: text !important;
}
#rounded-corners img {
    border-radius: var(--image-border-radius);
}

.certification-lists .certification .certification__title, .course-lists .course .course__title {
    font-size: 1rem;
    margin: 0 0 1rem;
    word-wrap: break-word;
}

.well,
.jumbotron,
.list-panel .panel-body {
    border-radius: var(--tile-border-radius);
}
.nav-pills>li>a,
.well,
.jumbotron,
.list-panel .panel-body,
div#personalizer,
.panel-default>.panel-heading,
.panel-footer {
    background-color:var(--subtle-gray);
}
.nav-pills>li>a:hover,.nav-pills>li>a:focus {
    background-color:var(--subtle-gray);
    filter:var(--hover-contrast);
}

.unread-message {
    border-left: 7px solid var(--primary-color);
}
.zift-header .col-md-4.zift-header-optionblock {
    margin-top: 5px;
}
body {
    padding-bottom: 0 !important
}

/*settings sidebar color on hover*/
#outer-container .nav-pills > li.secondary-nav.active > a:hover,
#outer-container .nav-pills > li.secondary-nav.active > a:focus {
    color:white !important;
}

/*status indicators*/
.text-primary.status-label {
    color: white !important;
    padding: 0px 10px !important;
}

/*icon color*/
.bee-page-container i.fa-tile-icon {
    color: var(--icon-color) !important;
    font-size:40px;
    margin: 0;
    padding-top:30px;
}
.bee-page-container i.fa-tile-icon:before {
    /*font: var(--fa-font-thin);
    font: var(--fa-font-solid);
    font: var(--fa-font-regular);
    font: var(--fa-font-light);
    */
    font: var(--fa-font-duotone);
}
.bee-page-container i.fa-tile-icon:after {
    --fa-secondary-color:var(--icon-color-secondary);
    opacity:var(--icon-color-secondary-opacity);
}

/*hide default footer*/
.zift-footer-container {
    display: none;
}
#outer-container ul {
    list-style-position: outside;
}
/*default background image position*/
.bee-row {
    background-position: center;
}

/*collateral*/
.panel-collateral .panel-heading,
.panel-collateral .panel-body,
.panel-collateral .panel-footer {
    background-color: transparent !important;
}

@media (min-width: 1200px) {
    .container {
        width: 1200px;
    }
    #outer-container #zl_partner-locator.zl_filter-position-left .zl_partner-tile {
        width: 32% !important;
    }
}



/* MOBILE STYLES **********************************************/
@media (max-width: 769px) {
    .bee-heading h1 {
        font-size: 42px !important;
    }
    .bee-heading h2 {
        font-size: 36px !important;
    }
    .flex-tile-wrapper {
        width: 100%;
    }
    .logo-wrapper {
        background-color: transparent;
        border-right: none;
        margin: auto;
    }
    /*pulls up the main container on mobile*/
    div#outer-container {
        padding-top: 60px !important;
    }
    /*fix the awkward margin on mobile*/
    #mainAngularView>div.row {
        margin: 0;
    }
}
@media (min-width: 769px) {
    #outer-container>div:first-of-type {
        display: block;
        min-height: 80vh;
    }
}
/*******************************************************************************************************************************
* SIDENAV UPDATES *
*******************************************************************************************************************************/
#page_body .bee-row-content {
    max-width: 100%;
    padding-left: 2%;
    padding-right: 2%;
}
.header-fresh .zift-header,
#mainAngularView .zift-header {
    padding-left: 10px;
}
#mainAngularView .zift-header h2.col-md-6,
#event-list .zift-header,
#event-list .zift-header h2,
div#collateral-programs-list .col-md-9 .zift-header {
    padding-left: 0;
}
.adjacent-to-side-nav {
    margin-left: 257px !important;
}
.navbar-wrapper-fresh {
    box-shadow: none !important;
}
#mobileNavmenu.side-nav {
    background-color: #1d232b; /// #132032;
    border-right: none;
}
.logo-wrapper {
    background-color: #1d232b; /// #132032;
    border-right: none;
    border-bottom: none;
}
.navbar-when-side-nav {
    background-color: #1d232b; /// #132032;
    border-bottom: none;
}
#mobileNavmenu.side-nav.navmenu-inverse .navmenu-nav > li > a {
    color:var(--navbar-anchor-color);
}
#mobileNavmenu.side-nav.navmenu-inverse .navmenu-nav > li > a:hover,
#mobileNavmenu.side-nav.navmenu-inverse .navmenu-nav > li > a:focus {
    color:var(--navbar-anchor-color-hover);
    background-color:var(--navbar-anchor-background-color-hover) !important;
}
.side-nav.navmenu-inverse .navmenu-nav.dropdown-menu {
    background-color: #283343; /// #1d314d
box-shadow: inset rgba(0, 0, 0, 0.4) 0px 2px 12px 0px;
}
.dropdown-menu.navmenu-nav.navMenu.ng-scope.show {
    padding: 0 !important;
}
.clickable.dropdown-toggle.primary-color-muted-15.w-100 {
    background-color: transparent !important;
    color: white !important;
}
li.dropdown.mobile-dropdown > a {
    width: 100%;
}
.navmenu-nav.dropdown-menu>li>a {
    padding: 5px 20px 5px 65px !important;
}
.zift-filter-block input.searchField,
input.select-social-post, input[type="checkbox"] {
    accent-color: var(--primary-color) !important;
}
/*sidenav icons*/
#mobileNavmenu>.navmenu-nav >li > a::before {
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    margin-right:10px;
    font: var(--fa-font-regular);
    background-color: rgb(33 32 39 / 50%);
    padding: 10px;
    border-radius: 40px;
    font-size: 13px;
    width: 35px;
    text-align: center;

}

#mobileNavmenu>.navmenu-nav >li:nth-of-type(1) > a::before {
    content: "\f108";
}
#mobileNavmenu>.navmenu-nav >li:nth-of-type(2) > a::before {
    content: "\f49c";
}
#mobileNavmenu>.navmenu-nav >li:nth-of-type(3) > a::before {
    content: "\f645";
}
#mobileNavmenu>.navmenu-nav >li:nth-of-type(4) > a::before {
    content: "\f0eb";
}
#mobileNavmenu>.navmenu-nav >li:nth-of-type(5) > a::before {
    content: "\f0b1";
}
#mobileNavmenu>.navmenu-nav >li:nth-of-type(6) > a::before {
    content: "\f0b1";
}

/*trash can font awesome fix*/
.fa.fa-trash-o {
    font-family: "Font Awesome 6 Pro" !important;
}
/*panel edits */
.panel, .panel-heading {border:0;}

.tags-panel {
    border: 1px solid var(--form-input-border-color);
    border-radius: 4px;
}
.panel-title {font-weight:normal;}

/*collateral*/
#collateral-list #controllerHeader {
    padding-left: 20px;
}
#collateral-list h4.left-margin-5.text-muted {
    color: #303133;
}
.panel-body.panel-body-collateral-fresh .multi-line-overflow-3 {
    margin-bottom: 0;
}
#collateral-programs-list .panel-heading {
    padding-bottom:0;
}
#collateral-programs-list .col-md-9 .panel-heading .panel-title {
    font-weight:bold;
    font-size:22px;
}
.list-panel .panel-body, .panel-default>.panel-heading {
    background-color: transparent;
}
#collateral-programs-list .col-md-2 {
    padding-left:0;
    padding-right:0;
}
#collateral-programs-list .panel.panel-default.list-panel {
    background-color: white;
    margin-bottom: 15px;
    border-radius: var(--tile-border-radius);
    box-shadow: 0 1px 7px 1px rgba(0,0,0,.075);
    overflow:hidden;
}
#collateral-programs-list .col-md-9 .col-md-9 .col-md-12.text-right {
    padding-left: 0;
}
/*campaigns*/
#campaign-list .panel.panel-default.list-panel {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin-bottom:0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
#campaign-list .panel-body.campaign-panel {
    overflow: hidden;
}
#campaign-list .truncate-3 {
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
}
/*social upcoming posts*/
#social-list .display-flex.panel-heading.zift-sublist-header {
    padding-top: 10px;
}
#social-list .display-flex.panel-heading.zift-sublist-header .fresh-list-group-chevron {
    margin-top: 10px;
}
#social-list .col.col-md-12 >div>.row,
div[ng-show="isSocialAccountsExists"] >div{
    background-color: white;
    margin-bottom: 15px;
    border-radius: var(--tile-border-radius);
    box-shadow: 0 1px 7px 1px rgba(0,0,0,.075);
    overflow:hidden;
}
#social-list .list-group-item {
    margin-bottom: 0;
    background-color: transparent;
}

.fresh-list-group-panel { background-color: transparent;}
.social-panel .requires-approval {
    border-top: none;
}
.social-row .media-body h4 {
    margin-top: 0;
    font-weight: normal;
    font-size: 16px;
}
.fresh-layout .social-panel .social-row .media-heading .social-post-type {
    margin-bottom: 0;
}
.fresh-layout .social-panel {
    box-shadow: none;
}
div[ng-show="isSocialAccountsExists"]>div>div>div.list-panel {
    border-bottom: 1px solid #ededed;
    padding-bottom: 20px;
}
div[ng-show="isSocialAccountsExists"]>div>div>div.list-panel:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.social-post-type { display: none}

/* leads */
.row.lead_row .col-md-12,
.deal-row .col-md-12 {
    background-color: white;
    box-shadow: 0 1px 7px 1px rgba(0, 0, 0, .075);
    border-radius: var(--tile-border-radius);
    padding: 20px;
}
.fresh-layout .result-count {
    margin-bottom: 10px !important;
}
table.table.contact-table[ng-if="leadList.count"] {
    margin-bottom: 0;
}
/*events*/
.calendar h1 {
    font-size: 36px !important;
    line-height: 35px !important;
}
.partner-event-grid-container h4.multi-line-overflow {
    margin-top: 0 !important;
}


/*other random fixes**********************************/
.status-label-inprogress {
    background: #1f4498;
}
/*partner registration confirmation*/
div[ng-controller="UnifyrUserRegistrationCtrl as vm"] div[ng-if="vm.submitted"] {
    text-align: center;
}
/* infinite loading bar */
.list-group.text-center[ng-if="searching"] span,
.list-group.text-center[ng-if="loadingNextPage && start == 0"] span,
.list-group.text-center[ng-if="!isLoading.$resolved || paging.loading"] span.list-group-item,
.list-group.text-center.ng-scope .list-group-item,
#social-list .list-group.text-center .list-group-item {
    border: none !important;
    background-color: white;
    border-radius: 8px;
}
/*filter muted label to unmute*/
#mainAngularView>div>div.col-md-3>h4.text-muted,
#mainAngularView>div>div.col-md-3>div[ng-if="isFreshLayout()"]>h4.text-muted {
    color: var(--copy-color);
    margin-top: 0;
}
/*maybe put this back? it was messing up margin on lead detail page */
.adjacent-to-side-nav .row {
    margin-left: 0;
    margin-right: 0;
}

/*event*/
.partner-event-header-text h1, .partner-event-header-text h4 {
    color: white !important;
}

/*suppliers*/
.campaign-row .thumb-container>div {
    background-size: contain !important;
}
/*changes trash can style*/
span#supplier-description-container .btn-warning {
    color: var(--default-button-copy-color);
    background-color: var(--default-button-background-color);
    border-color: var(--default-button-border-color);
}
span#supplier-description-container .btn-warning:hover {
    color: var(--default-button-copy-color-hover);
    background-color: var(--default-button-background-color-hover);
    border-color: var(--default-button-border-color-hover);
}

/*fix for random negative margin*/
@media (min-width: 868px) {
    .navbar-nav.navbar-right:last-child {
        margin-right: 0;
    }
}
/*******************************************************************************************************************************
* POST LAUNCH STYLE UPDATES *
*******************************************************************************************************************************/

/* Hide an empty filter container */
#collateral-list #searchFilters:nth-of-type(3) {
    display: none;
}

/* Make collateral tiles show two lines of the display name */

#collateral-list .fixed-width {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}


#supplierLocatorWidget .supplier-description-container {
    font-size: 14px;
}


#supplierLocatorWidget #supplier-logo-div {
    background-size: contain;
}

#controllerHeader, .zift-header {
    display: none;
}

#page_footer {
    display: none;
}