body {
    background: #F5F5F5;
}

a {
    color: #144190;
}

#hubLeftCol {
    background: #f5f5f5;
    height: 100%;
    transition: all 0.2s linear 0s;
    will-change: min-height;
}
#hubMainCol {
    display: inline-block;
    background: #f5f5f5;
    width:100%;
}
#hubRightCol {
    display: inline-block;
    background: #f5f5f5;
    width:100%;
}
.hubLeftStick {
    background: #f5f5f5;
    display: inline-block;
    width:100%;
}
#colButtons {
    margin-top: 10px;
    background: #f5f5f5;
}
#memBtns {
    background: #f5f5f5;
    margin-top: 5px;
    transition: all 0.2s linear 0s;
    transform: translate(0, 0); /* For browsers don't support translate3d. */
    transform: translate3d(0, 0, 0);
    will-change: position, transform;
    min-height:678px;
}
.testBlock {
    width: 100%;
    background: #fff;
    min-height: 500px;
    border: 1px solid #808080;
    padding: 10px;
}

#hubCenterCol {
    height: 100%;    
}
.hubBodyContainer {
    height: 100%;    
}
.loadMore {
    height: 100%;   
}

.zhmMsgWrap {
    margin-top: 8px;
    margin-bottom: 5px;
    position: relative;
}

.hubmeeting {
    font-family: Lato, sans-serif;
    font-size: 16px;
    color: #fff;
    font-weight: bold;
    position: relative;
    padding: 10px 20px;
    margin-left: 35px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

    .hubmeeting::before {
        font-family: 'Font Awesome 5 Pro';
        content: "\f05a";
        width: 35px;
        height: 100%;
        padding: 10px;
        position: absolute;
        display: block;
        padding-top: 8px;
        top: 0px;
        left: -36px;
        font-size: 16px;
        font-weight: bold;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        text-align: center;
        vertical-align: middle;
    }

    .hubmeeting a {
        text-decoration: underline;
        font-family: Lato, sans-serif;
        font-size: 16px;
        color: #fff;
        font-weight: bold;
    }

.zhmTime {
    font-family: Lato, sans-serif;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.73);
    font-weight: bold;
    display: inline-block;
    width: 100%;
}

.zhmDropBtn {
    color: #fff;
    position: absolute;
    display: block;
    top: 6px;
    right: 6px;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.2s linear 0s;
}

    .zhmDropBtn:hover {
        text-shadow: 1px 1px 3px rgba(9, 13, 23, 0.56);
        transition: all 0.2s linear 0s;
    }

.zhmDropList {
    background: #fff;
    padding: 10px;
    width: calc(100% - 40px);
    position: absolute;
    right: 5px;
    z-index: 20;
    box-shadow: 2px 5px 8px rgba(0, 4, 13, 0.60);
    display: none;
}

.zhmInfo1 {
    background-color: #157dba;
    border-left: solid 1px #0f5882;
}

    .zhmInfo1::before {
        background-color: #126798;
        color: #1aa0ee;
        text-shadow: 1px 1px 0px #0b3f5c;
        border-right: solid 1px #0b3f5c;
    }

.zhmInfo2 {
    background-color: #15abba;
    border-left: solid 1px #0d626b;
}

    .zhmInfo2::before {
        background-color: #14828d;
        color: #1adbee;
        text-shadow: 1px 1px 0px #0e5258;
        border-right: solid 1px #0e5258;
    }

.zhmInfo3 {
    background-color: #15ba87;
    border-left: solid 1px #0e6d50;
}

    .zhmInfo3::before {
        background-color: #10946b;
        color: #19eaa9;
        text-shadow: 1px 1px 0px #0a5a41;
        border-right: solid 1px #0a5a41;
    }

.zhmInfo4 {
    background-color: #15ba3c;
    border-left: solid 1px #0d7626;
}

    .zhmInfo4::before {
        background-color: #139732;
        color: #1beb4d;
        text-shadow: 1px 1px 0px #0c551d;
        border-right: solid 1px #0c551d;
    }

.zhmInfo5 {
    background-color: #2bba15;
    border-left: solid 1px #1a700d;
}

    .zhmInfo5::before {
        background-color: #249612;
        color: #35ed19;
        text-shadow: 1px 1px 0px #1a690e;
        border-right: solid 1px #1a690e;
    }

#memCardContainer {
    background: #F5F5F5;
}

.CardBgImg {
    height: 152px;
}

    .CardBgImg img {
        display: inline-block;
        width: 100%;
        object-fit: cover;
        height: 152px;
    }

.detailContain {
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    border-left: 1px solid #ddd;
    padding: 10px 0px;
    background: #fff;
    background-color: #fff;
    display:inline-block;
    width:100%;
}

.cardHubTypeDisp{
    display:block;
}

.vidContain {
    border-right: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
    border-left: 1px solid #dddddd;
}

.cardBrandName {
    text-align: center;
    font-size: 24px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cardBrandIcon {
    border: 5px solid #ddd;
    border-radius: 100%;
    box-shadow: 0 1px 0 #e1e8ed;
    overflow: hidden;
    position: relative;
    width: 100px;
    height: 100px;
    margin: -64px auto 0 auto;
}

#memCardContactDetContain {
}

    #memCardContactDetContain > ul {
        display: inline-block;
        list-style: outside none none;
        margin-bottom: 0;
        width: 100%;
    }

    #memCardContactDetContain li {
        display: inline-block;
        margin-bottom: 15px;
        position: relative;
        width: 100%;
    }

#memCardContainer #memCardContactDetContain li i {
    display: inline-block;
    font-size: 16px;
    vertical-align: middle;
    color: #4b82b0;
    margin-right: 5px;
    width: 19px;
    float: left;
    padding: 5px;
}

#memCardContactDetContain li > span {
    font-size: 18px;
    display: block;
    position: relative;
    font-weight: 400;
    vertical-align: top;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mcaRow {
    display: inline-block;
    width: 100%;
    padding-left: 5px;
}

    .mcaRow i {
        display: inline-block;
        font-size: 16px;
        vertical-align: middle;
        color: #4b82b0;
        margin-right: 5px;
        width: 19px;
        float: left;
        padding: 5px;
    }

#memCardContGroup {
    display: none;
}

#memAlertBody {
    max-height: 300px;
    overflow-x: hidden;
    overflow-y: auto;
    display: none;
}

.memAlertTxt {
    color: #144190;
    cursor: pointer;
    font-size: 16px;
    padding: 10px;
}

.memAlertList {
    display: inline-block;
    list-style: outside none none;
    margin-bottom: 0;
    width: 100%;
}

    .memAlertList li {
        display: inline-block;
        position: relative;
        width: 100%;
        margin-bottom: 2px;
    }

        .memAlertList li:hover {
            background: #ecf3f8;
        }

            .memAlertList li:hover .memAlertTxt {
                color: #091c3d;
            }

.memAlertPrime {
    background: #e3edf6;
    text-decoration: underline;
    transition: all 0.2s linear 0s;
}

    .memAlertPrime:hover {
        background: #c0d0de;
        transition: all 0.2s linear 0s;
    }

    .memAlertPrime .memAlertList li {
    }

.cardAbout {
    font-size: 16px;
    padding-bottom: 8px;
}

.cardAboutTitle {
    font-size: 20px;
    font-style: italic;
    margin-bottom: 20px;
}

#memAlertContain {
    background: #fff;
}

#memJournalContain {
    background: #fff;
}

#memStatementBody {
    padding: 0px;
}

#memInvestmentsContain {
    background: #fff;
}

    #memInvestmentsContain .fa-file-pdf {
        color: #1f69a8;
        float: right;
        cursor: pointer;
    }

#memInvestmentsHead {
    display: flex;
}

#memInvestmentsBody {
    padding: 0px;
    overflow-x: hidden;
    overflow-y: auto;
    white-space: nowrap;
    max-height: 192px;
}

    #memInvestmentsBody a {
        text-decoration: underline;
    }

#memTpBody {
    padding: 0px;
}

#memConnectCount {
    float: right;
    vertical-align: middle;
    margin-top: 1px;
}
#memHubCount {
    float: right;
    vertical-align: middle;
    margin-top: 1px;
}

.memConnUserImg {
    width: 74px;
    height: 74px;
}

    .memConnUserImg img {
        width: 74px;
        height: 74px;
    }

#memConnectBody {
    padding: 10px;
    background: #fff;
    display: none;
}

.memConnChat {
    float: right;
    margin-top: -6px;
    position: relative;
    display: inline;
    font-size: 18px;
}

.memConnUserContain {
    width: 77px;
    padding-right: 4px;
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.memConnSearch {
    background: #fff;
    color: #8b8b8b;
    margin-top: 10px;
    padding: 4px;
    border: 1px solid #c3c3c3;
    border-radius: 2px;
    text-align: center;
    cursor: pointer;
    display: inline-flex;
    height: 26px;
    transition: all 0.2s linear 0s;
}

    .memConnSearch:hover {
        background: #e4e4e4;
        color: #272727;
        transition: all 0.2s linear 0s;
    }

#contActionContain {
    display: flow-root;
    border-top: 1px solid #c3c3c3;
}

    #contActionContain i {
        margin: 0px 3px;
    }

.memConnName {
    width: 100%;
    margin-top: 8px;
    text-align: center;
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
    height: 40px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.moduleHead {
    font-size: 16px;
    font-family: Lato, sans-serif;
    color: #444444;
}

    .moduleHead i {
        color: #4b82b0;
    }

.hub-area {
    font-family: Lato, sans-serif;
}

#resourceContain {
    background: #fff;
}

.ytHeadBtn {
    background: #fff;
    height: 30px;
    width: 42px;
    color: #496949;
    vertical-align: central;
    text-align: center;
}

.hubBtnMenuIsActive {
    background: #4b82b0 !important;
    color: #fff !important;
}

    .hubBtnMenuIsActive .moduleHead {
        color: #fff !important;
    }

        .hubBtnMenuIsActive .moduleHead i {
            color: #fff !important;
        }

#memCardContGroup {
    border: 1px solid #4b82b0;
    padding: 5px;
    background: #fff;
}

.headButton {
    padding: 10px 8px;
    cursor: pointer;
    background: #f5f5f5;
    border-top: 1px solid #dddddd;
    transition: all 0.2s linear 0s;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

    .headButton:hover {
        background: #d6e4f0;
        transition: all 0.2s linear 0s;
        color: #000;
        transition: all 0.2s linear 0s;
    }

.panelHead ins {
    float: left;
    vertical-align: middle;    
    width: 22px;
    text-align: left;
}

.panelHeadRight ins {
    float: right;
    vertical-align: middle;
    margin-top: 2px;
    text-align: center;
}



#memConnectionsContain {
}

#memFinancialStatementContain {
}

#memConsultantHead {
}

#memTpHead {
}

#memStatementHead {
}

#memTopicPlusContain {
}

#memConnectHead {
}

#memAlertHead {
}

#memInvestButton {
    width: 77%;
    float: left;
    cursor: default;
}

#memCardHubTypeCon {
    float: right;
    /*border-left: 1px solid #dddddd;*/
    display: inline-block;
    width: 52%;
    /*margin-top: 10px;*/
    /*background-color: #fff;*/
}

#memCardHubAboutCon {
    display: inline-block;
    /*margin-top: 10px;*/
    /*background-color: #fff;*/
    width: 38%;
}

.headCardButton {
    padding: 4px 8px;
    margin: 5px 5px;
    cursor: pointer;
    background: #fff;
    border: 1px solid #fff;
    transition: all 0.2s linear 0s;
    text-align: center;
    border-radius: 3px;
}

    .headCardButton:hover {
        background: #c5def3;
        color: #000;
        border: 1px solid #4b82b0;
        transition: all 0.2s linear 0s;
    }

.headSpacer {
    margin-top: 5px;
    /*border-top: 1px solid #dddddd;*/
}

#hubAboutArea {
    /*margin-bottom:10px;*/
}

#booksHeadButton {
}

#duwHeadButton {
}

#ZoomComHeadButton {
}

#CreateWebHubHeadButton {
}

#ProdManageHeadButton {
}

#FregaEventHeadButton {
}

#FregaBooksHeadButton {
}

#createAdHeadButton {
}

#marketHeadButton {
}

#FregaHeadButton {
}

.faqHeadButton {
    width: 43%;
    float: right;
    border-left: 1px solid #dddddd;
}

.faqHeadButton2 {
    width: 23%;
    float: right;
}
.faqHeadButton3 {
    width: 23%;
    float: right;
    background: #95c6ed;
    text-align:center;
}

.moduleHead .fa-youtube {
    float: left;
    color: #bf0000;
    transition: all 0.2s linear 0s;
}

    .moduleHead .fa-youtube:hover {
        color: #f12424;
        transition: all 0.2s linear 0s;
    }

#hubHubsButton {
    width: 100%;
    cursor: default;
}

#resourceHead {
    width: 57%;
    float: left;
}

#resourceHeadFull {
    width: 100%;
}

#contributeHeadButton {
    width: 43%;    
}

#resourceHeadContain {
    display: inline-block;
    width: 100%;
}

#hubFaq {
    /*margin-bottom: 10px;*/
    /*display: flex;*/
}

#hubsCount {
    float: right;
    vertical-align: middle;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 84px;
}



#feedMenuContain {
    width: 100%;
    padding: 6px;
    background: #fff;
    border: 1px solid #ddd;
}

.feedMenuButton {
    margin: 3px;
    width: 38px;
    height: 38px;
    vertical-align: top;
}
    .feedMenuButton i {
        vertical-align: top;
    }

.feedMenu1 .feedMenuButton {
    border: 1px solid #4b82b0;
    color: #4b82b0;
    background: #e3eef8;
    border-radius: 2px;
    padding: 10px;
    display: inline-block;
    transition: all 0.2s linear 0s;
}
    
    .feedMenu1 .feedMenuButton:hover {
        color: #fff;
        background: #4b82b0;
        transition: all 0.2s linear 0s;
    }

.feedMenu2 .feedMenuButton {
    border: 1px solid #4b82b0;
    color: #4b82b0;
    background: #e3eef8;
    border-radius: 2px;
    padding: 10px;
    display: inline-block;
    transition: all 0.2s linear 0s;
}

    .feedMenu2 .feedMenuButton:hover {
        color: #fff;
        background: #4b82b0;
        transition: all 0.2s linear 0s;
    }

.feedMenu3 .feedMenuButton {
    border: 1px solid #8b8b8b;
    color: #8b8b8b;
    background: #fff;
    border-radius: 2px;
    padding: 10px;
    display: inline-block;
    transition: all 0.2s linear 0s;
}

    .feedMenu3 .feedMenuButton:hover {
        color: #fff;
        background: #8b8b8b;
        transition: all 0.2s linear 0s;
    }

.feedMenuButtonActive {
    border: 1px solid #e86133 !important;
    color: #e86133 !important;
    background: #fdf3eb !important;
    transition: all 0.2s linear 0s;
}

    .feedMenuButtonActive:hover {
        color: #fff !important;
        background: #e86133 !important;
        transition: all 0.2s linear 0s;
    }

#feedMenuCont {
    vertical-align: middle;
    margin-top: 0px;
}

.hubIconFonts {
    font-family: hubiconset3;
}

.menuBtnCount{
    background: #ff0000;
    border-radius: 100%;
    width: 24px;
    height: 24px;
    color: #fff;
    text-align: center;
    position: absolute;
    margin-left: 11px;
    margin-top: -40px;
    font-family: Lato,sans-serif;
    padding-top: 1px;
}

.hubFeed {
    background: #fff;
    border: 1px solid #ddd;
    border-top: 1px solid #bfbebe;
    margin-top: 16px;
    padding: 10px;
    font-family: Lato, sans-serif;
    width:100%;
    display:inline-block;
}

.postBrandMain {
    width: 60px;
    height: 60px;
    border: 3px solid #ddd;
    border-radius: 100%;
    box-shadow: 0 1px 0 #e1e8ed;
    overflow: hidden;
    position: relative;
}

.postBrandReply {
    width: 35px;
    height: 35px;
    border: 3px solid #ddd;
    border-radius: 100%;
    box-shadow: 0 1px 0 #e1e8ed;
    overflow: hidden;
    position: relative;
}

.postBrandAdvert {
    width: 65px;
    height: 65px;
    border: 3px solid #ddd;
    border-radius: 100%;
    box-shadow: 0 1px 0 #e1e8ed;
    overflow: hidden;
    position: relative;
}

.postBrandSub {
    width: 45px;
    height: 45px;
    border: 3px solid #ddd;
    border-radius: 100%;
    box-shadow: 0 1px 0 #e1e8ed;
    overflow: hidden;
    position: relative;
}

.postShared {
    margin-top: 10px;
    font-size: 12px;
    background-color: #e7f4fb;
    padding: 4px 6px;
    border-radius: 2px;
}

.UserPost {
    display: inline-block;
    width: 100%;
}

.memPostChat {
    position: relative;
    top: -15px;
    left: 44px;
    cursor: pointer;
    display: inline-block;
}

.cardActions {
    padding: 2px 3px;
    text-align: center;
}

    .cardActions .postUnfollow {
        padding: 0px;
        vertical-align: sub;
    }

    .cardActions .postfollowing {
        padding: 0px;
        vertical-align: sub;
    }

    .cardActions > ul {
        display: inline-block;
        list-style: outside none none;
        margin-bottom: 0;
    }

    .cardActions li {
        display: inline-block;
        position: relative;
        padding: 3px 1px;
    }

.cardActionBtn {
    color: #fff;
    height: 35px;
    min-width: 37px;
    vertical-align: middle;
    padding: 1px 3px;
    border-radius: 2px;
    text-align: center;
    cursor: pointer;
    display: inline-block;
    background: #4b82b0;
    transition: all 0.2s linear 0s;
    vertical-align:top;
}
.cardActionBtn i{    
    vertical-align: top;
}

    .cardActionBtn:hover {
        transition: all 0.2s linear 0s;
        -webkit-filter: hue-rotate(12deg);
        filter: hue-rotate(12deg);
        -webkit-filter: brightness(1.3);
        filter: brightness(1.3);
        -webkit-transition: all 0.2s linear 0s;
        -moz-transition: all 0.2s linear 0s;
        
    }

.cardChat {
    cursor: pointer;
    display: inline-block;
    font-size: 33px;
    background: #008E46;
}

.cardChatMessages {
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    background: #008E46;
}

/*.cardFollowing {
    cursor: pointer;
    display: inline-block;
    background: #51BBA7;
}*/

/*.cardFollowers {
    cursor: pointer;
    display: inline-block;
    background: #1D97BE;
}*/

.cardWeblet {
    font-size: 26px;
    padding-top: 6px;
}

.cardHubFollow {
    vertical-align: top;
    font-size: 26px;
    padding: 3px 7px;
}

#memCardDropList {
    border: 1px solid #b5b4b5;
    padding: 10px;
    background: #f5f5f5;
    width: 255px;
    height: 320px;
    position: absolute;
    margin-left: -7px;
    margin-top: 3px;
    box-shadow: 1px 4px 9px rgba(0, 4, 13, 0.2);
    display: none;
    z-index: 500;
}

#cardHubFollowingHead {
    width: 100%;
    display: inline-block;
    background: #51bba7;
    padding: 10px;
    text-align: left;
    color: #fff;
    font-weight: bold;
}

#cardHubFollowersHead {
    width: 100%;
    display: inline-block;
    background: #1d97be;
    padding: 10px;
    text-align: left;
    color: #fff;
    font-weight: bold;
}

.cardHubFollowList {
    background: #fff;
    width: 100%;
    height: 380px;
    overflow-x: hidden;
    white-space: nowrap;
    overflow-y: auto;
    border-left: 1px solid #8b8b8b;
    border-right: 1px solid #8b8b8b;
    border-bottom: 1px solid #8b8b8b;
}

.cardHubUnFollow {
    background: #e96301;
    padding: 8px 15px;
    text-align: center;
    color: #fff;
    cursor: pointer;
    margin: 10px 15px;
    float: right;
}

.cardHubBlockFollow {
    background: #e96301;
    padding: 8px 15px;
    text-align: center;
    color: #fff;
    cursor: pointer;
    margin: 10px 15px;
    float: left;
}

    .cardHubUnFollow:hover, .cardHubBlockFollow:hover {
        background: #e98338;
        transition: all 0.2s linear 0s;
    }

.chfList li label {
    display: block;
    padding: 5px;
    clear: both;
    font-weight: normal;
    color: #333;
    white-space: nowrap;
    margin: 0;
    transition: all 0.2s linear 0s;
    text-align: left;
}

.chfList li {
    width: 100%;
    list-style: inside;
    display: block !important;
    padding: 0px !important;
    border-bottom: 1px solid #8b8b8b;
}

    .chfList li input {
        margin: 0px 5px;
        top: 2px;
        position: relative;
        width: 20px;
        height: 20px;
        float: right;
    }

    .chfList li.active label {
        background-color: #cbcbff;
        font-weight: bold;
    }

    .chfList li label:hover,
    .chfList li label:focus {
        background-color: #dbdbfe;
        transition: all 0.2s linear 0s;
    }

    .chfList li.active label:hover,
    .chfList li.active label:focus {
        background-color: #b8b8ff;
        transition: all 0.2s linear 0s;
    }

.hubFollowList li label {
    display: block;
    padding: 5px;
    clear: both;
    font-weight: normal;
    color: #333;
    white-space: nowrap;
    margin: 0;
    transition: all 0.2s linear 0s;
    text-align: left;
}

.hubFollowList li {
    width: 100%;
    list-style: inside;
    display: block !important;
    padding: 0px !important;
    border-bottom: 1px solid #b5b4b5;
    transition: all 0.2s linear 0s;
}

    .hubFollowList li input {
        margin: 0px 5px;
        top: 2px;
        position: relative;
        width: 20px;
        height: 20px;
        float: right;
    }

    .hubFollowList li.active label {
        background-color: #cbcbff;
        font-weight: bold;
    }

    .hubFollowList li label:hover,
    .hubFollowList li label:focus {
        background-color: #dbdbfe;
        transition: all 0.2s linear 0s;

    }

    .hubFollowList li.active label:hover,
    .hubFollowList li.active label:focus {
        background-color: #b8b8ff;
        transition: all 0.2s linear 0s;
    }

.HubFollowListCont {
    background: #fff;
    width: 100%;
    height: 380px;
    overflow-x: hidden;
    white-space: nowrap;
    overflow-y: auto;
    border-left: 1px solid #8b8b8b;
    border-right: 1px solid #8b8b8b;
    border-bottom: 1px solid #8b8b8b;
}

.hfTit {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 33%;
    text-align: left;
}

.hfTit2 {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 190px;
    text-align: left;
}

.hfingUser {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 22%;
    text-align: left;
    padding-left:4px;
}

.hfingTit {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 87%;
    text-align: left;
}

.hfingActions {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 20%;
    text-align: left;
    height: 22px;
}

.hfingHubChk {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 10%;
    text-align: left;
    height: 22px;
}

.hfMemLastVisit {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 20%;
    text-align: left;
}

.hfMemName {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 28%;
    text-align: left;
    padding-left: 3px;
}

.hfHubCont {
    display: inline-block;
    width: 100%;
    text-align: left;
    padding: 5px 3px;
    transition: all 0.2s linear 0s;
}

    .hfHubCont:hover {
        background: #f0f6fa;
        transition: all 0.2s linear 0s;
        box-shadow: 0 8px 8px rgb(14 32 43 / 0.31);
    }

.hfHubIcon {
    border: 1px solid #ddd;
    border-radius: 50%;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.30);
    overflow: hidden;
    position: relative;
    width: 25px;
    height: 25px;
    display: inline-block;
    vertical-align:top;
}

.hfHubImg {
    max-width: 100%;
    display: inline-block;
    object-fit: cover;
    height: 26px;
}

.hfHubRightContain {
    float: right;
    display: inline-block;
}

.hfActions {
    display: inline-block;
    width: 12%;
    vertical-align:top;
}

.hubFollowerActionChk{
    margin-left:10px;
}

.hfActions i, hfingActions i {
    margin: 3px 5px 0px 0px;
}

.hubFollowerPermis {
    display: inline-block;
    padding: 2px 4px;
    cursor: pointer;
    transition: all 0.2s linear 0s;
    color: #808080;
    vertical-align:top;
}
    .hubFollowerPermis :hover {
        color: #3d3d3d;
        text-shadow: 1px 1px 3px rgba(9, 13, 23, 0.56);
        transition: all 0.2s linear 0s;
    }
.PermisActive {
    color: #1ca685;
}
.PermisInActive {
    color: #e96301;
}
.PermisDisable {
    display: inline-block;
    padding: 2px 4px;
    cursor: pointer;
    transition: all 0.2s linear 0s;
    color: #dcdcdc;
    vertical-align: top;
}
    .PermisDisable:hover {
        color: #dcdcdc!important;
    }
.cfh {
    color: #fff;
    font-size: 12px;
}

.cfc {
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    width: 100%;
    text-align: center;
}

.memPostChatSub {
    position: relative;
    top: -11px;
    left: 31px;
    cursor: pointer;
    display: inline-block;
}

.postBrandName {
    font-family: Lato, sans-serif;
    color: #116eae;
    font-size: 18px;
    font-weight: bold;
    width: 100%;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.postBrandNameReply {
    font-family: Lato, sans-serif;
    color: #116eae;
    font-size: 14px;
    font-weight: bold;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
}

.postTitleLink {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: bottom;
}

.postTitleLinkReply {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
}

.postMeta {
    display: inline;
    float: right;
    text-align: right;
    vertical-align: bottom;
}

.postContentCont {
    display: inline-block;
    width: 100%;
}

.postUnfollow {
    display: inline-block;
    cursor: pointer;
    color: #8b8b8b;
    font-size: 20px;
    padding: 3px 7px;
    vertical-align: bottom;
    transition: all 0.2s linear 0s;
}

    .postUnfollow:hover {
        color: #3b9ff3;
        transition: all 0.2s linear 0s;
    }

.postfollowing {
    display: inline-block;
    cursor: pointer;
    color: #3b9ff3;
    font-size: 20px;
    padding: 3px 7px;
    transition: all 0.2s linear 0s;
}

    .postfollowing:hover {
        color: #8b8b8b;
        transition: all 0.2s linear 0s;
    }

.postPosted {
    display: inline-block;
}

.postPost {
    overflow: hidden;
    width: 100%;
    line-height: 1.4em;
    font-size:14px;
}

.postHide {
    color: #8b8b8b;
    display: inline-block;
    cursor: pointer;
    font-size: 20px;
    padding: 3px 7px;
    transition: all 0.2s linear 0s;
}

    .postHide:hover {
        color: #940000;
        transition: all 0.2s linear 0s;
    }

.postPosted {
    padding: 3px 7px;
    color: #858585;
    display: inline-block;
}

.postContent {
    margin-top: 10px;
}

.postActionContain {
    margin-top: 5px;
    width: 100%;
    text-align: right;
}

.postActions {
    width: 100%;
    display: block;
}

.hubPostReplyContain {
    display: inline-block;
}

.hubPostReplyCont {
    padding: 4px;
    display: none;
    /*border: 1px solid #c3c3c3;*/
}

.postReplyHeadCont {
    display: inline-block;
    width: 100%;
}

.postActionLike {
    padding: 3px 7px;
    color: #858585;
    font-size: 20px;
    display: inline-block;
    cursor: pointer;
    transition: all 0.2s linear 0s;
}

    .postActionLike:hover {
        color: #3b9ff3;
        transition: all 0.2s linear 0s;
    }

.postActionLikeBtn {
    padding: 2px 4px;
    border: 1px solid #c0c4c7;
    display: inline-block;
    background: #e5f4fe;
    vertical-align: middle;
    height: 31px;
    transition: all 0.2s linear 0s;
}

    .postActionLikeBtn:hover {
        background: #bfe0f7;
        transition: all 0.2s linear 0s;
    }

.postActionLikeBtnSm {
    padding: 0px 4px;
    border: 1px solid #c0c4c7;
    display: inline-block;
    background: #e5f4fe;
    vertical-align: middle;
    height: 25px;
    transition: all 0.2s linear 0s;
}

    .postActionLikeBtnSm:hover {
        background: #bfe0f7;
        transition: all 0.2s linear 0s;
    }

.pdrl {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

.pdrlr {
    border-radius: 3px;
}

.postLikeListBtn {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    padding: 2px 4px;
    border: 1px solid #c0c4c7;
    display: inline-block;
    background: #cde3f1;
    font-size: 16px;
    vertical-align: middle;
    height: 31px;
    margin-left: -5px;
    transition: all 0.2s linear 0s;
}

    .postLikeListBtn:hover {
        background: #b2d0e4;
        transition: all 0.2s linear 0s;
    }

.postLikeListBtnSm {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    padding: 0px 4px;
    border: 1px solid #c0c4c7;
    display: inline-block;
    background: #cde3f1;
    font-size: 16px;
    vertical-align: middle;
    height: 25px;
    margin-left: -5px;
    transition: all 0.2s linear 0s;
}

    .postLikeListBtnSm:hover {
        transition: all 0.2s linear 0s;
        background: #b2d0e4;
    }

.postLikeList {
    display: none;
    width: 200px;
    height: 200px;
    background: #fff;
    border: 1px solid #b5b4b5;
    box-shadow: 1px 4px 9px rgba(0, 4, 13, 0.34);
    position: absolute;
    z-index: 1;
    margin-left: -142px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 5px;
}

.postActionShare {
    padding: 3px 7px;
    color: #858585;
    font-size: 20px;
    display: inline-block;
    cursor: pointer;
    transition: all 0.2s linear 0s;
}

    .postActionShare:hover {
        color: #3b9ff3;
        transition: all 0.2s linear 0s;
    }

.postActionReply {
    display: inline-block;
    padding: 4px 7px;
    color: #fff;
    background: #80c1f7;
    border-radius: 3px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s linear 0s;
}

    .postActionReply:hover {
        background: #3b9ff3;
        transition: all 0.2s linear 0s;
    }

.postComment {
    display: inline-block;
    margin-top: 5px;
    margin-left: 2px;    
    width: 100%;
}

.postReplyComment {
    padding: 5px 3px 5px 3px;
    background: #f7fbff;
    border-top: 2px solid #fff;
    border-left: 1px solid #dee8ef;
    border-bottom: 1px solid #d0dbe4;
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
}

.postReplyActive {
    display: none;
}

.postReplyComment .postBrandMain {
    width: 45px;
    height: 45px;
}

.postReplyComment .memPostChat {
    left: 31px;
}

.postReplyComment .postActionDelete, .postActionLike, .postUnfollow, .postHide {
    font-size: 18px;
}

.postActionEdit {
    padding: 3px 7px;
    color: #858585;
    font-size: 20px;
    display: inline-block;
    cursor: pointer;
    transition: all 0.2s linear 0s;
}

    .postActionEdit:hover {
        color: #3b9ff3;
        transition: all 0.2s linear 0s;
    }

.postActionDelete {
    padding: 3px 7px;
    color: #940000;
    font-size: 20px;
    display: inline-block;
    cursor: pointer;
    transition: all 0.2s linear 0s;
}

    .postActionDelete:hover {
        color: #ed0000;
        transition: all 0.2s linear 0s;
    }

.feedAdvert {
    display: block;
    border: 1px solid #1ca685;
    padding: 10px;
    background: #e5f2ef;
}

.feedAdvert {
    display: inline-block;
    width: 100%;
}

.chatAdvertContent {
    font-size: 16px;
    padding-left: 10px;
}

.chatAdvertButton {
    margin-top: 30px;
    text-align: center;
}

.chatAdvertIcon {
    color: #1ca685;
    font-size: 40px;
    text-align: center;
}

.chatAdvertText {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}

.postLikes {
    display: inline-block;
    font-size: 16px;
    color: #444444;
}

.feedMenuDrop {
    position: absolute;
    display: inline-block;
    border: 1px solid #b5b3b4;
    background: #f5f5f5;
    box-shadow: 1px 4px 11px rgba(0, 4, 13, 0.60);
    padding: 20px;
    margin-top: 40px;
    margin-left: -40px;
    z-index: 9999;
    font-family: Lato, sans-serif;
    width: 480px;
    height: 300px;
}

.menuDropAdd .input-group-addon {
    padding: 6px 12px;
    font-size: 18px;
    font-weight: bold;
    line-height: 1;
    color: #fff;
    text-align: center;
    background-color: #e86133;
    border: 1px solid #e86133;
    border-radius: 0px;
}

.mdr_Name {
    padding: 10px;
}

.mdr_users {
    text-align: center;
    padding: 10px;
}

.menuDropResults {
    color: #444444;
    background: #fff;
}

table.tbldropTbl tr {
    background: #fff;
}

    table.tbldropTbl tr:nth-child(even) {
        background: #f6f6f6;
    }

table.tbldropTbl td, table.blueTable th {
    border-top: 1px solid #dedede;
    border-bottom: 1px solid #dedede;
    padding: 3px 2px;
}

    table.tbldropTbl td:nth-child(even) {
        border-left: 1px solid #dedede;
    }

table.tbldropTbl thead th:first-child {
    border-left: none;
}

#memCardEdit {
    background: #e3eef8;
    border: 1px solid #78a9d1;
    border-radius: 3px;
    padding: 6px 10px;
    color: #4b82b0;
    display: inline-block;
    position: absolute;
    right: 23px;
    top: 144px;
    float: right;
    cursor: pointer;
    display: none;
    transition: all 0.2s linear 0s;
}

    #memCardEdit:hover {
        background: #fff;
        box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.76);
        transition: all 0.2s linear 0s;
    }

.feedMenuBtn {
    display: inline-block;
    cursor: pointer;
}

#addHubPost {
    background: #f5f5f5;
    width: 543px;
    border: 1px solid #b5b4b5;
    padding: 5px 5px;
    z-index: 20;
    display: none;
    box-shadow: 1px 4px 11px rgba(0, 4, 13, 0.60);
    overflow: auto;
    /*margin-left:-382px;*/
    position: unset;
}

#myHubs {
    background: #f5f5f5;
    position: absolute;
    width: 543px;
    border: 1px solid #b5b4b5;
    padding: 5px 5px;
    z-index: 20;
    left: 14px;
    display: none;
    box-shadow: 1px 4px 11px rgba(0, 4, 13, 0.60);
    overflow: auto;
}
.hubListCol1{
    width: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width:340px;
    min-width:240px;
}
.hubListCol2 {
    width: 10%;
    min-width: 45px;
    max-width:69px;
}

#searchHub {
    background: #fff;
    position: absolute;
    width: 543px;
    border: 1px solid #e2e8ee;
    padding: 14px;
    z-index: 20;
    left: -366px;
    display: none;
    box-shadow: 0 10px 30px rgba(16, 42, 67, 0.16);
    }
/* Search redesign (2026-07-18, owner: clean toolbar dropdown, no dim). The
   HCX-11 body-level scrim (#hubSearchBackdrop) was removed - the search closes
   on outside-click; the panel is a crisp card, not a half-modal. */

#emailHub {
    background: #f5f5f5;
    position: absolute;
    width: 543px;
    border: 1px solid #b5b4b5;
    padding: 5px 5px;
    z-index: 20;
    left: -176px;
    display: none;
    box-shadow: 1px 4px 11px rgba(0, 4, 13, 0.60);
}

#shareHubPost {
    background: #f5f5f5;
    position: absolute;
    width: 343px;
    border: 1px solid #b5b4b5;
    padding: 5px 10px;
    z-index: 20;
    left: -277px;
    display: none;
    box-shadow: 1px 4px 11px rgba(0, 4, 13, 0.60);
}

#addPostContain {
    display: inline-block;
}

#myHubContainer {
    display: inline-block;
}

#hubContactContainer {
    display: inline-block;
}

.devBox {
    position: absolute;
    display: inline-block;
    top: 123px;
    background: rgba(255, 250, 0, 0.84);
    position: fixed;
    padding: 10px;
    width: 250px;
    left: -246px;
    transition: all 0.2s linear 0s;
}

    .devBox:hover {
        left: 0px;
        transition: all 0.2s linear 0s;
    }

.attachments > ul {
    list-style: outside none none;
    margin-bottom: 0;
    padding-left: 0;
}

.attachments {
    border: 1px solid #eee;
    display: block;
    padding: 10px;
    text-align: right;
    border-top: 0;
    background: #fff;
    overflow: auto;
    overflow-y: hidden;
}

    .attachments li {
        display: inline-block;
        margin-left: 5px;
    }

.fileContainer {
    color: #d8d8d8;
    font-size: 11px;
    margin: 0 0 0 5px;
    position: relative;
    text-transform: capitalize;
}

.attachments .fileContainer [type="file"] {
    right: 6px;
    top: -18px;
    width: 20px;
}

.fileContainer [type=file] {
    cursor: pointer;
    display: block;
    filter: alpha(opacity=0);
    opacity: 0;
    position: absolute;
    right: 0px;
    text-align: right;
    top: 0;
    width: 100%;
    overflow: hidden;
}

.hubPostShareCont {
    position: absolute;
    display: block;
    background: #f5f5f5;
    width: 300px;
    z-index: 66;
    border: 1px solid #eee;
    box-shadow: 1px 4px 11px rgba(0, 4, 13, 0.60);
    right: 0px;
    padding: 4px;
}

    .hubPostShareCont em.out {
        position: absolute;
        right: 80px;
        top: -7px;
        display: block;
        background: transparent;
        border-left: 7px dashed transparent;
        border-right: 7px dashed transparent;
        border-bottom: 7px solid #242424;
        overflow: hidden;
        transform: translate(-50%);
    }

    .hubPostShareCont em.inner {
        position: absolute;
        right: 80px;
        top: -7px;
        display: block;
        background: transparent;
        border-left: 7px dashed transparent;
        border-right: 7px dashed transparent;
        border-bottom: 7px solid #fff;
        overflow: hidden;
        transform: translate(-50%);
    }

.hubSubmit {
    display: inline-block;
    padding: 4px 7px;
    color: #fff;
    background: #4f93ce;
    border-radius: 3px;
    font-size: 16px;
    cursor: pointer;
    border: 1px solid #80c1f7;
    transition: all 0.2s linear 0s;
    text-align:center;
}

    .hubSubmit:hover {
        color: #fff;
        background: #457eb0;
        border: 1px solid #34628a;
        transition: all 0.2s linear 0s;
    }

#hubShareContainer {
    display: inline-block;
}

#hubSearchContainer {
    display: inline-block;
}

#hubEmailContainer {
    display: inline-block;
    vertical-align: bottom;
}

.mdr_users .fa-user-plus {
    color: #16ac3d;
}

.mdr_users .fa-user-minus {
    color: #ac1616;
}

.mdr_count {
    color: #c66f10;
    font-weight: bold;
}

.btn-view.btn-load-more {
    background: #fff;
    border: medium none;
    border-radius: 100%;
    color: transparent;
    display: block;
    height: 50px;
    margin: 30px auto 0;
    position: relative;
    width: 50px;
    transition: all 0.2s linear 0s;
    z-index: 19;
    cursor: pointer;
}

    .btn-view.btn-load-more:hover {
        background: #3b9ff3;
        transition: all 0.2s linear 0s;
    }

.central-meta button.btn-view {
    background: #f1f1f1;
}

.btn-view.btn-load-more::before {
    color: #333;
    content: "\f2f1";
    font-family: "Font Awesome 5 Pro";
    left: 50%;
    opacity: 1;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    z-index: 111;
    transition: all 0.2s linear 0s;
}

.btn-view.btn-load-more:hover::before {
    color: #fff;
    transform: translate(-50%, -50%) rotate(360deg);
    transition: all 0.2s linear 0s;
}

.myHubMsq {
    padding: 4rem;   
    background: #fff;
    height: 100%;
    display: block;
    color: #242424;
    text-align: center;
}

    .myHubMsq h2, .myHubMsq h1 {
        color: #244e70 !important;
    }

.hubMsgContent {
    margin: 3rem 0rem;
}

    .hubMsgContent p {
        font-size: 20px;
        color: #242424;
    }

.hubMsgBtn {
    padding: 10px 18px;
    border: 1px solid rgba(255, 255, 255, 0.69);
    border-radius: 3px;
    margin: 20px 0px;
    font-weight: bold;
    cursor: pointer;
    background: #fff;
    color: #0b4a80;
    transition: all 0.2s linear 0s;
}

    .hubMsgBtn:hover {
        background: rgba(255, 255, 255, 0.57);
        transition: all 0.2s linear 0s;
    }

.hubPopHead {
    display: inline-block;
    font-weight: bold;
    font-size: 2rem;
    font-family: Lato,'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.hubPopFaq {
    float: right;
    padding: 6px;
    background: #176389;
    color: #fff;
    cursor: pointer;
}

.btnHubStyle {
    padding: 10px;
    border-radius: 2px;
    display: inline-block;
    color: #fff;
    font-weight: bold;
    margin-left: 6px;
    margin-top: 6PX;
}

.btnHubSubmit {
    margin-top: 8px;
    background: #e96301;
    padding: 7px 15px;
    color: #fff;
    border-radius: 0px;
    cursor: pointer;
    font-weight: bold;
    display: inline-block;
    transition: all 0.2s linear 0s;
}

    .btnHubSubmit:hover {
        background: #e8853d;
        transition: all 0.2s linear 0s;
    }

.hideSlide {
    display: none;
}

.postMem {
    display: inline-block;
    float: left;
    height: 63px;
}

    .postMem img {
        cursor: pointer;
    }

.postReplyMem {
    display: inline-block;
    float: left;
    height: 48px;
}

    .postReplyMem img {
        cursor: pointer;
    }

.postHead {
    padding-left: 6px;
}

.postHeadCont {
    width: 100%;
    display: inline-block;
}

.postInfo {
    display: inline-block;
    width: 86%;
}

.postMemHub {
    margin-left: 10px;
    display: inline-block;
    vertical-align: middle;
}

/* styles for '...' */
.block-with-text {
    overflow: hidden;
    position: relative;
    line-height: 1.4em;
    max-height: 6.6em;
    text-align: justify;
    margin-right: -1em;
    padding-right: 1em;
    cursor:row-resize;
    font-size:14px;
}
    /* create the ... */
    .block-with-text:before {
        font-family: "Font Awesome 5 Pro";
        content: "\f107";
        position: absolute;
        right: 0;
        bottom: -1px;
        color: #0071dd;
        cursor: pointer;
        font-weight: bold;
        font-size: 20px;
    }
    /* hide ... if we have text, which is less than or equal to max lines */
    .block-with-text:after {
        content: '';
        position: absolute;
        right: 0;
        width: 1em;
        height: 1em;
        margin-top: 0.2em;
    }

.hubFeed textarea {
    background: rgba(255, 255, 255, 0.62);
}

    .hubFeed textarea:active {
        background: rgba(255, 255, 255, 1.00);
    }

.postPost a {
    text-decoration: underline;
}

.cpHead {
    padding-left: 20px;
    height: 44px;
}

.cpAct {
    padding-left: 20px;
    color: #fff;
}

.cpAdvert {
    border: 1px solid #000000;
    background: #fff;
    display: inline-block;
    width: 100%;
    padding: 10px;
    margin-top:10px;
}

.cpAdBackground {
    background-color: #00304a;
    background: url("/member/designurwebsite/web/images/cpBgImg.jpg");
    height: 112px;
    background-size: cover;
    background-repeat: no-repeat;
}

.cpAdBackground2 {
    background-color: #00304a;
    background: url("/member/designurwebsite/web/images/cpBgImg2.jpg");
    height: 112px;
    background-size: cover;
    background-repeat: no-repeat;
}

.cpAdButton {
    background: #f38402;
    color: #fff;
    display: inline-block;
    border-radius: 25px;
    width: 55px;
    padding: 5px;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    margin-top: 16px;
    cursor: pointer;
    transition: all 0.2s linear 0s;
}

    .cpAdButton:hover {
        background: #f6a546;
        transition: all 0.2s linear 0s;
    }

.cpAdButtonActive {
    background: #a3cc3b;
    color: #fff;
    display: inline-block;
    border-radius: 25px;
    width: 55px;
    padding: 5px;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    margin-top: 16px;
    cursor: pointer;
}

.postPost ul {
    margin-left: 42px;
}

.postPost li {
    list-style: unset;
}

.postPost ul li {
    display: list-item;
}

.postPost ol li {
    display: list-item;
}

.postPost strong {
    line-height: 1em;
}

.investBuy {
    background: #e98a23;
    color: #fff;
    padding: 3px 6px;
    cursor: pointer;
}

@media only screen and (max-width: 1200px) {
    .ytHeadBtn {
        width: 35px;
    }

    #addHubPost {
        width: 449px;
        /*margin-left: -318px;*/
    }

    #myHubs {
        width: 449px;
        left: 13px;
    }

    #shareHubPost {
        width: 449px;
        left: -302px;
    }

    #searchHub {
        width: 449px;
        left: -302px;
    }

    #emailHub {
        width: 449px;
        left: -145px;
    }

    .cpAdBackground {
        height: 130px;
    }

    .cpAdBackground2 {
        height: 130px;
    }

    .memReferalTxt {    
        width: 180px;    
    }
}

.ConsultantNoteDelete {
    border-radius: 3px;
    border: 1px solid #d57333;
    text-align: center;
    padding: 3px 6px;
    display: inline-block;
    cursor: pointer;
    transition: all 0.2s linear 0s;
    color: #f7ecc0;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    background: #cf5213;
}

    .ConsultantNoteDelete:hover {
        background: #ff5500;
    }

@media only screen and (max-width: 992px) {
    .memReferalTxt {
        width: 70%!important;
    }

    #resourceHead {
        margin-top: 10px;
    }

    .ytHeadBtn {
        width: 42px;
    }

    #addHubPost {
        width: 710px;
        /*margin-left: -492px;*/
    }

    #myHubs {
        width: 710px;
        left: 13px;
    }

    #shareHubPost {
        width: 710px;
        left: -478px;
    }

    #searchHub {
        width: 710px;
        left: -478px;
    }

    #emailHub {
        width: 710px;
        left: -232px;
    }

    #hubCenterCol {
        margin-top: 10px;        
    }

    #hubsCount {
        max-width: none;
    }
}

@media only screen and (max-width: 767px) {
    #addHubPost {
        width: 95%;
        margin-left: 13px;
    }

    #pTagDropList {
        width: 255px;
    }

    #myHubs {
        width: 410px;
        left: 13px;
    }

    #shareHubPost {
        width: 410px;
        left: 13px;
    }

    #searchHub {
        width: 410px;
        left: 13px;
    }

    #emailHub {
        width: 410px;
        left: 13px;
    }
}

@media only screen and (max-width: 479px) {
    #addHubPost {
        width: 98%;
    }

    #pTagDropList {
        width: 197px;
    }

    #myHubs {
        width: 90%;
    }
    .hubListCol1 {        
        max-width: 240px;
        min-width: 240px;
    }


    #shareHubPost {
        width: 258px;
    }

    #searchHub {
        width: 258px;
    }

    #emailHub {
        width: 258px;
    }

    #hubsCount {
        max-width: 92px;
    }

    .cpAdBackground {
        height: 191px;
    }

    .cpAdBackground2 {
        height: 191px;
    }
}

@media only screen and (max-width: 340px) {
    .hubListCol1 {
        max-width: 187px;
        min-width: 170px;
    }
}

.fmmlHead {
    width: 100%;
    background: #2c517b;
    padding: 10px;
    color: #fff;
}

.fmmlFmLogo {
    display: inline-block;
    width: 147px;
    vertical-align: top;
}

.fmmlMailAccountsCont {
    display: inline-block;
    width: 42%;
}

.fmmlMeta {
    display: inline-block;
    width: 140px;
    float: right;
}

.fmmlmDetails {
    display: inline-block;
    width: 115px;
}

.fmmlmTxt {
    display: inline-block;
}

#fmAttPercent {
    display: inline-block;
}

.fmmlmInfo {
    display: inline-block;
    width: 20px;
}
.InfoTxt {
    display: inline-block;
    width: 100%;
    font-weight:bold;
    font-size:16px;
    margin:5px 0px 10px 0px;
}

#fmmlAccount {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
}

.fmmlMenu1 {
    width: 100%;
    display: inline-block;
    background: #77a0cf;
    color: #8b8b8b;
    padding: 8px;
    border-left: 1px solid #dfe0e2;
    border-right: 1px solid #dfe0e2;
    border-bottom: 1px solid #dfe0e2;
}

.greyBtn {
    background: #fff;
    padding: 6px 10px;
    min-width: 38px;
    text-align: center;
    display: inline-block;
    border: 1px solid #c3c3c3;
    margin: 0px 4px;
    border-radius: 3px;
    transition: all 0.2s linear 0s;
    cursor: pointer;
    font-size: 16px;
}

    .greyBtn:hover {
        background: #8b8b8b;
        color: #fff;
        transition: all 0.2s linear 0s;
    }

.greyBtnActive {
    background: #8b8b8b;
    color: #fff;
    transition: all 0.2s linear 0s;
}

    .greyBtnActive:hover {
        background: #c1c1c1;
        color: #fff;
        transition: all 0.2s linear 0s;
    }

.fmMenuFunction {
    display: inline-block;
    float: right;
}

.fmmlMenu2 {
    width: 100%;
    display: inline-block;
    background: #fff;
    color: #8b8b8b;
    padding: 8px;
    border: 1px solid #dfe0e2;
}

    .fmmlMenu2 input {
        height: 15px;
        width: 15px;
    }

.mailChk {
    height: 15px;
    width: 15px;
}

.fmmlAct {
    display: inline-block;
    width: 20px;
}

.fmmlActDrop {
    cursor: pointer;
}

#fmmList {
    display: inline-block;
    width: 100%;
    height: 50%;
    overflow-x: hidden;
    overflow-y: auto;
    white-space: nowrap;
    background: #fff;
    border-left: 1px solid #dfe0e2;
    border-right: 1px solid #dfe0e2;
    border-bottom: 1px solid #dfe0e2;
}

    #fmmList a {
        text-decoration: underline;
    }

    #fmmList table.tbldropTbl td:nth-child(even) {
        border-left: none;
    }

.mailRead {
    background: #e4edf7 !important;
}

.mailSnip {
    display: none;
    background: #fff;
    border-left: 1px solid #78a9d1 !important;
    border-right: 1px solid #78a9d1 !important;
    border-bottom: 1px solid #78a9d1 !important;
}

.mailSnipTxt {
    display: inline-block;
    width: 100%;
    margin-bottom: 10px;
}

.mailExpand {
    position: absolute;
    display: inline-block;
    bottom: 5px;
    right: 5px;
    cursor: pointer;
}

.mailSnipContain {
    width: 100%;
    display: inline-block;
    position: relative;
}

.mailSnipRow {
    cursor: default !important;
}

/*mail advert*/
.hfmdL {
    background: #1a3b60;
    color: #fff;
    text-align: center;
    padding: 24px 18px;
}

    .hfmdL p {
        color: #fff;
    }

#fmInv .row {
    margin: 0px;
    overflow: hidden;
}

.fmInvsh [class*="col-"] {
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

.fmiH1 {
    display: inline-block;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    padding-left: 20px;
}

.fmiB {
    background: #cc0147;
    padding: 5px;
    display: flow-root;
}

#fmInvBut {
    background: #33a692;
    padding: 5px 12px;
    color: #fff;
    font-size: 17px;
    text-align: center;
    border-radius: 16px;
    display: inline-block;
    float: right;
    margin-right: 20px;
    cursor: pointer;
    transition: all 0.2s linear 0s;
}

    #fmInvBut:hover {
        background: #3ec6ae;
        transition: all 0.2s linear 0s;
    }

form {
    margin: 0px;
}
/*mail advert close*/

#follActionCont {
    display: inline-block;
    float: right;
}

.memBtnsChatCount {
    background: #ff0000;
    border-radius: 100%;
    width: 24px;
    height: 24px;
    color: #fff;
    text-align: center;
    font-family: Lato,sans-serif;
    vertical-align: middle;
    line-height: 23px;
    font-size: 16px;
}
.memBtnsChatCount:empty{
    display:none;
}

.memJournalCount {
    float: right;
    vertical-align: middle;
    margin-top: 1px;
    background: #ff0000;
    border-radius: 100%;
    width: 24px;
    height: 24px;
    color: #fff;
    text-align: center;
    font-family: Lato,sans-serif;
    vertical-align: middle;
    line-height: 23px;
    font-size: 16px;
}

.reqContactAvit {
    border-radius: 100%;
    width: 134px;
    height: 134px;
    border: 2px solid #d0d0d0;
    padding: 2px;
}

#memCardComm {
    border: 1px solid #e1e8ed;
    padding: 1px 3px;
    text-align: center;
}

    #memCardComm ul {
        margin: 0px;
        padding: 0px;
    }

    #memCardComm li {
        list-style: none;
        display: inline-block;
        vertical-align: middle;
    }

.cardCommBtn {
    padding: 4px 4px;
    cursor: pointer;
    color: #4b82b0;
    transition: all 0.2s linear 0s;
    border: 1px solid #eef7ff;
}

    .cardCommBtn i {
        vertical-align: middle;
    }

    .cardCommBtn:hover {
        background: #e3eef8;
        border: 1px solid #4b82b0;
        border-radius: 2px;
        transition: all 0.2s linear 0s;
    }

#zOrderContainer {
    top: 10px;
    /* MENU-01 (2026-07-27): widened 730 -> 1000 so the Rooms menu shows TWO products
       per row instead of one (the panel keeps a 300px order column, so 1000 leaves a
       ~622px product grid = 2 x ~304px cards).
       left/width changed together ON PURPOSE: the old `left:25%; width:100%` only fitted
       because max-width was 730 (25% of 1280 = 320, +730 = 1050 < 1280). At 1000 the same
       rule would run 40px off the right edge of a 1280 laptop. `left:5%; width:90%` keeps
       it on screen at every viewport - it is symmetric until max-width caps the width,
       and it never overflows. Do NOT centre it with margin:auto or translateX: dragZoom()
       (js/main.js:1701) drags by writing style.left in px, and either would make the
       panel jump by the offset on the first drag. */
    left: 5%;
    position: fixed;
    z-index: 10000;
    background-color: #e8eef6;
    width: 90%;
    /* was height:100% - the panel was ALWAYS viewport-tall regardless of content, so a
       merchant with a few products got a large dead band of #e8eef6 under the card grid.
       Harmless at 730px, obvious at 1000. Content-sized now, still never taller than the
       screen; the product grid keeps its own max-height:60vh + overflow-y:auto, so a long
       menu scrolls inside the panel exactly as before. */
    height: auto;
    max-height: 95vh;
    max-width: 1000px;
    max-height: 750px;
    box-shadow: 1px 4px 9px rgba(0, 4, 13, 0.34);
    font-family: Lato, sans-serif;
    box-sizing: border-box;
    background: #e5e5e5;
}

.zoomActiveBtn {
    position: fixed;
    bottom: 50%;
    right: 0px;
    padding: 10px;
    border-radius: 3px 0px 0px 3px;
    border-top: 2px solid #3b9ff3;
    border-left: 2px solid #3b9ff3;
    border-bottom: 2px solid #3b9ff3;
    background: #fff;
    box-shadow: 1px 4px 9px rgba(0, 4, 13, 0.34);
    -webkit-animation: borderBlink 2s step-end infinite;
    animation: borderBlink 2s step-end infinite;
    cursor: pointer;
    transition: all 0.2s linear 0s;
}

.zoomBtnSmall {
    width: 25px;
    height: 25px;
}

@-webkit-keyframes borderBlink {
    from, to {
        border-color: #bbd9f2;
    }

    50% {
        border-color: #3b9ff3;
    }
}

@keyframes borderBlink {
    from, to {
        border-color: #bbd9f2;
    }

    50% {
        border-color: #3b9ff3;
    }
}

.zObjectEmb {
    width: 100%;
    min-height: 630px;
    overflow: auto;
    height:100%;
}
.hubGetZoomDefault {
    width: 100%;
    min-height: 630px;
    overflow: auto;
    max-height:100%;
    height: 100%;
}
.zEmbElement {
    width: 100%;
    height: 100%;
}

.postActionAlert {
    color: #fff;
    width: 20px;
    height: 20px;
    border-radius: 3px;
    background: #940000;
    float: left;
    display: inline-block;
    font-size: 14px;
    text-align: center;
    vertical-align: top;
    padding-top: 3px;
    cursor: pointer;
}
    .postActionAlert i {
        vertical-align: top;
    }
    .hpaMessage {
    display: none;
    background: #fff;
    padding: 4px;
    border: 1px solid #940000;
    width: 366px;
    color: #1b1b1b;
    position: relative;
    z-index: 1;
    box-shadow: 1px 4px 9px rgba(0, 4, 13, 0.34);
}

.flipText {
    -moz-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    transform: scale(-1, 1);
}

.panelDropContain {
    width: 100%;
    display: inline-block;
    text-align: center;
    position: relative;
    padding: 5px 0px;
}

#rightPanelDropContain {
    display: none;
}

#leftPanelDropContain {
    display: none;
}

.panelDropBtn {
    width: 70px;
    height: 14px;
    background: #4b82b0;
    border-radius: 7px;
    color: #fff;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
    transition: all 0.2s linear 0s;
}
.panelDropBtn i{
    vertical-align:top;
}
    .panelDropBtn:hover {
        background: #2c5f8a;
        width: 90px;
        transition: all 0.2s linear 0s;
    }

@keyframes frega-arrow {
    0% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(20%)
    }

    100% {
        transform: translateY(0)
    }
}

.panelDropBtn:hover .fa-caret-down {
    animation: frega-arrow 1s ease-in-out infinite
}

.hubRedTxt {
    color: #ff0000;
}

.frHeadBg {
    background: #052f4f;
    padding: 6px 10px;
    width: 100%;
    display: inline-block;
    z-index: 999;
    font-family: Lato, sans-serif;
    margin-bottom: 5px;
}

.hubBodyHead {
    display: inline-block;
    width: 100%;
    padding: 10px;
    background: #4b82b0;
    color: #fff;
    margin: 10px 0px;
}



@media only screen and (max-width: 992px) {
    #hubLeftCol {
        height: auto;
    }
}

/* #progressbar -- MOVED to css/frega-loading.css.
   These rules were the neon lime bar (track rgb(146 216 91 / .49), fill
   rgba(71,243,0,.75)), and living here meant the element was UNSTYLED on every
   duw/weblet page except the hub, because hub.css is not loaded there. The
   replacement is brand-green and loaded on all 7 masters. */

/***** tide advert ********/
.tideAdvert {
    border: 1px solid #000000;
    background: #4051f5;
    background-image: url(/img/hub/tideadvert.jpg);
    display: inline-block;
    width: 100%;
    height: 178px;
    cursor: pointer;
}
/***** tide advert close********/

/***** tide advert ********/
.xeAdvert1 {
    border: 1px solid #000000;
    background: #4051f5;
    background-image: url(/img/hub/XeAd1.jpg);
    display: inline-block;
    width: 100%;
    height: 178px;
    cursor: pointer;
    margin-top: 10px;
}

.xeAdvert2 {
    border: 1px solid #000000;
    background: #4051f5;
    background-image: url(/img/hub/XeAd2.jpg);
    display: inline-block;
    width: 100%;
    height: 178px;
    cursor: pointer;
    margin-top: 10px;
}

.xeAdvert3 {
    border: 1px solid #000000;
    background: #4051f5;
    background-image: url(/img/hub/XeAd3.jpg);
    display: inline-block;
    width: 100%;
    height: 178px;
    cursor: pointer;
    margin-top:10px;
}
/***** tide advert close********/

/******* consultant adverts*******/
.consultantAdvert1 {
    background: #dfe0e2;
    background-image: url(/img/hub/BeConsultantAd1.jpg);
    display: inline-block;
    width: 100%;
    height: 178px;
    cursor: pointer;
    margin-top:10px;
}

.consultantAdvert2 {
    background: #dfe0e2;
    background-image: url(/img/hub/BeConsultantAd2.jpg);
    display: inline-block;
    width: 100%;
    height: 178px;
    cursor: pointer;
    margin-top: 10px;
}

.consultantAdvert3 {
    background: #dfe0e2;
    background-image: url(/img/hub/BeConsultantAd3.jpg);
    display: inline-block;
    width: 100%;
    height: 178px;
    cursor: pointer;
    margin-top: 10px;
}

.consultantAdvert4 {
    background: #dfe0e2;
    background-image: url(/img/hub/FindaConsultantAd1.jpg);
    display: inline-block;
    width: 100%;
    height: 178px;
    cursor: pointer;
    margin-top: 10px;
}

.consultantAdvert5 {
    background: #dfe0e2;
    background-image: url(/img/hub/FindaConsultantAd2.jpg);
    display: inline-block;
    width: 100%;
    height: 178px;
    cursor: pointer;
    margin-top: 10px;
}

.consultantAdvert6 {
    background: #dfe0e2;
    background-image: url(/img/hub/FindaConsultantAd3.jpg);
    display: inline-block;
    width: 100%;
    height: 178px;
    cursor: pointer;
    margin-top: 10px;
}
/******* consultant adverts close*******/
.postActionLink {
    padding: 3px 7px;
    color: #144190;
    font-size: 20px;
    display: inline-block;
    cursor: pointer;
}

.hubFrmContainer {
    background: #fff;
    border: 1px solid #dddddd;
    width: 100%;
    margin-top: 10px;
    display: inline-block;
    margin-bottom: 10px;
}

.hubFollowHead {
    display: inline-block;
    width: 100%;
    padding: 10px;
    background: #4b82b0;
    color: #fff;
}

.hubSearchHead {
    display: inline-block;
    width: 100%;
    padding: 10px;
    background: #4b82b0;
    color: #fff;
}

.hubSubBtn {
    border-radius: 3px;
    height: 34px;
    border: 1px solid #c1cedd;
    text-align: center;
    padding: 8px 6px;
    display: inline-block;
    cursor: pointer;
    transition: all 0.2s linear 0s;
    color: #c1cedd;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
}

.hubSubBtn i{
    vertical-align:top;
}
    .hubSubBtn:hover {
        background: #4b82b0;
        transition: all 0.2s linear 0s;
    }

.hubSubFAQBtn {
    border-radius: 3px;
    height: 30px;
    background: #4b82b0;
    text-align: center;
    padding: 4px 6px;
    display: inline-block;
    cursor: pointer;
    transition: all 0.2s linear 0s;
    color: #fff;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
   
}
    .hubSubFAQBtn:hover {
        transition: all 0.2s linear 0s;
        -webkit-filter: hue-rotate(12deg);
        filter: hue-rotate(12deg);
        -webkit-filter: brightness(1.3);
        filter: brightness(1.3);
    }

.hubHeadActions {
    display: inline-block;
    float: right;
}

.HubUnFollow {
    background: #e96301;
    padding: 8px 6px;
    text-align: center;
    display: inline-block;
    color: #fff;
    cursor: pointer;
    
    float: right;
    justify-content: center;
    transition: all 0.2s linear 0s;
    width:100%;
    transition: all 0.2s linear 0s;
}

    .HubUnFollow:hover {
        background: #e98338;
        transition: all 0.2s linear 0s;
    }

.actRequestName {
    text-decoration: underline;
    cursor: pointer;
    color: #19354b;
    transition: all 0.2s linear 0s;
}

    .actRequestName:hover {
        color: #305775;
        transition: all 0.2s linear 0s;
    }


.hubSearchImg {
    display: inline-block;
    float: left;
    height: 40px;
    padding: 3px 5px 5px 2px;
}

    .hubSearchImg img {
        height: 40px;
        width: 40px;
        border: 3px solid #ddd;
        border-radius: 100%;
        box-shadow: 0 1px 0 #e1e8ed;
        overflow: hidden;
        position: relative;
    }

.hubSearchDesc {
    margin-top: 4px;
    font-size: 14px;
    text-decoration: none !important;
    color: #1a2b39;
    max-width: 248px;
}

.hubSearchTitle {
    text-decoration: underline;
    display:inline;
}

a:link .hubSearchDesc {
    text-decoration: none !important;
}

a:visited .hubSearchDesc {
    text-decoration: none !important;
}

a:hover .hubSearchDesc {
    text-decoration: none !important;
}

a:active .hubSearchDesc {
    text-decoration: none !important;
}

.zoomCloseButton {
    margin-left: 10px;
    cursor: pointer;
}

.likeListHead {
    display: inline-block;
    width: 100%;
    background: #4b82b0;
    color: #fff;
    padding: 5px;
    text-align: left;
    font-size: 16px;
}

.llName {
    font-size: 11px;
    overflow: hidden;
    text-align: left;
}

.llCont {
    display: inline-block;
    width: 100%;
    text-align: left;
    padding: 5px 3px;
    border-bottom: 1px solid #8b8b8b;
    cursor: default;
    transition: all 0.2s linear 0s;
}

    .llCont:hover {
        transition: all 0.2s linear 0s;
        background: #F5F5F5;
    }

.llActions {
    display: inline-block;
    width: 100%;
}

.llBtn {
    display: inline-block;
    color: #858585;
    cursor: pointer;
    transition: all 0.2s linear 0s;
}

    .llBtn:hover {
        color: #14b1bb;
        transition: all 0.2s linear 0s;
    }

.notificationClearAll {
    text-align: center;
    cursor: pointer;
    color: #fff;
    width: 100%;
    background: #e98a23;
    padding: 10px;
    transition: all 0.2s linear 0s;
}

    .notificationClearAll:hover {
        background: #ea6e1b;
        transition: all 0.2s linear 0s;
    }

.headButtonHalfLeft {
    display: inline-block;
    background-color: #F5F5F5;
    width: 37%;
}

.headButtonHalfRight {
    float: right;
    border-left: 1px solid #dddddd;
    display: inline-block;
    width: 63%;
    background-color: #F5F5F5;
}

.headButton70Left {
    display: inline-block;
    background-color: #F5F5F5;
    width: 70%;
}

.headButton30Right {
    float: right;
    border-left: 1px solid #dddddd;
    display: inline-block;
    width: 30%;
    background-color: #F5F5F5;
}

.btnFalse .moduleHead, .btnFalse .moduleHead i {
    color: #555 !important;
}

.zhmRoomAction {
    display: inline-block;
    margin-left: 10px;
    cursor: pointer;
}
/*default table form display*/
table.tblDefault tr {
    background: #fff;
}

    table.tblDefault tr:nth-child(even) {
        background: #f6f6f6;
    }

table.tblDefault td {
    border-top: 1px solid #dedede;
    border-bottom: 1px solid #dedede;
    padding: 3px 2px;
}

table.tblDefault td {
    border-left: 1px solid #dedede;
}

    table.tblDefault td:last-child {
        border-right: 3px solid #dedede;
    }

table.tblDefault thead th:first-child {
    border-left: none;
}

table.tblDefault thead th {
    color: #fff;
    background: #1d3b56;
    border-left: 1px solid #10202f;
}

table.tblDefault td.tdMain {
    background: #2c699b;
    color: #fff;
}

.postActionTag {
    padding: 3px 7px;
    color: #858585;
    font-size: 20px;
    display: inline-block;
    cursor: pointer;
    transition: all 0.2s linear 0s;
}

.pTagCont {
    display: none;
    width: 100%;
    text-align: left;
}

.pTagHead {
    display: inline-block;
    width: 100%;
}

.pTagTitle {
    display: inline-block;
    padding: 5px 0px;
    font-weight: bold;
    color: #444;
}

.pTagYouTube {
    display: inline-block;
    color: #ff0000;
    padding: 0px 15px;
}

.pTagFaq {
    display: inline-block;
    color: #444;
}

    .pTagFaq i {
        color: #4b82b0;
    }

.pTagFrm {
    width: 100%;
}

#pTagDropList {
    display: none;
    position: absolute;
    width: 70%;
    max-height: 300px;
    min-height: 100px;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid #8b8b8b;
    box-shadow: 1px 4px 9px rgba(0, 4, 13, 0.34);
    background: #fff;
    z-index: 10;
    margin-top: 4px;
}

    #pTagDropList ul {
        width: 100%;
    }

    #pTagDropList li {
        width: 100%;
    }

        #pTagDropList li:hover {
            background: #e1e8ed;
        }

.pTagLi {
    padding: 3px 3px 3px 10px;
    width: 100%;    
    cursor:pointer;
}
.pTagLi_Itm{
    display:inline-block;
    width:78%;
    float:left;
}
.pTagLi_ItmCount {
    display: inline-block;
    width: 20px;
    height:20px;
    border-radius:50%;
    background-color:#ff0000;
    color:#fff;
    text-align:center;
    vertical-align:top;
    font-size:14px;
    margin-top:3px;
}
.pTagLi_Delete {
    display: inline-block;
    float:right;
    width:10%;
    color:#ff0000;
    padding-top:3px;
}

.btn.addBtn {
    padding: 9px 12px;
}

#myHubTags {
    background: #f5f5f5;
    position: absolute;
    width: 373px;
    border: 1px solid #b5b4b5;
    padding: 5px 10px;
    z-index: 20;
    left: 113px;
    display: none;
    box-shadow: 1px 4px 11px rgba(0, 4, 13, 0.60);
}

.postTags {
    width: 100%;
    display: block;
    padding: 5px 0px;
    color: #144190;
    letter-spacing: 2px;
    text-align: left;
}

    .postTags span {
        cursor: pointer;
        margin-left: 3px;
        display: none;
    }

.mandateReqMem {
    cursor: pointer;
    color: #144190;
    font-weight: bold !important;
}

    .mandateReqMem:hover {
        text-decoration: underline;
        color: #144190 !important;
    }

.showConsultantNetScore {
    float: right;
    cursor: pointer;
    color: #fff;
}

    .showConsultantNetScore:hover {
        color: #cfe9ff;
    }

.hubHeadCont {
    display: inline-block;
    width: 100%;
    padding: 10px;
    background: #4b82b0;
    color: #fff;
    font-size: 18px;
}

table.tblNetScore {
    border: 1px solid #1C6EA4;
    background-color: #FFFFFF;
    width: 100%;
    text-align: left;
    border-collapse: collapse;
}

    table.tblNetScore td, table.tblNetScore th {
        border: 1px solid #dddddd;
        padding: 6px 4px;
    }

    table.tblNetScore tbody td {
        font-size: 15px;
        padding: 6px 4px;
    }

    table.tblNetScore tr:nth-child(even) {
        background: #F8F8F8;
    }

    table.tblNetScore thead {
        background: #D9E8F4;
        border-bottom: 1px solid #444444;
    }

        table.tblNetScore thead th {
            font-size: 15px;
            font-weight: bold;
            color: #000000;
            text-align: center;
            border-left: 1px solid #D0E4F5;
        }

            table.tblNetScore thead th:first-child {
                border-left: none;
            }

    table.tblNetScore tfoot td {
        font-size: 14px;
    }

    table.tblNetScore .tg-etys {
        background-color: #4a896a;
        border-color: #dddddd;
        color: #fff;
        text-align: left;
        vertical-align: top
    }

    table.tblNetScore .tg-zv4m {
        border-color: #ffffff;
        text-align: left;
        vertical-align: top;
        background: #fff;
    }

    table.tblNetScore .tg-rkel {
        background-color: #F8F8F8;
        border-color: #dddddd;
        text-align: left;
        vertical-align: top
    }

    table.tblNetScore .tg-quyf {
        border-color: #dddddd;
        color: #000000;
        text-align: left;
        vertical-align: top
    }

    table.tblNetScore .tg-j4b9 {
        background-color: #e5fdf2;
        border-color: #dddddd;
        color: #ff0000;
        text-align: left;
        vertical-align: top
    }

    table.tblNetScore .tg-h035 {
        background-color: #F8F8F8;
        border-color: #dddddd;
        color: #000000;
        text-align: left;
        vertical-align: top
    }

    table.tblNetScore .tg-ur59 {
        border-color: #dddddd;
        text-align: left;
        vertical-align: top
    }

    table.tblNetScore .tg-zefg {
        background-color: #F8F8F8;
        border-color: #dddddd;
        color: #000000;
        text-align: left;
        vertical-align: top
    }

    table.tblNetScore .tg-rvdr {
        background-color: #F8F8F8;
        border-color: #dddddd;
        text-align: left;
        vertical-align: top
    }

    table.tblNetScore .tg-rvdx {
        background-color: #F8F8F8;
        border-color: #dddddd;
        color: #ff0000;
        text-align: left;
        vertical-align: top
    }

.consNetScoreTblCont {
    padding: 10px;
}

.cbcmLoading {
    display: inline-block;
    width: 100%;
    padding: 10px;
    text-align: center;
    margin: 8px;
    color: #21342e;
}

#cbcmText {
    border: 1px solid #7e7e7e;
    background: #fff;
}

.conBank {
    display: inline-block;
    color: #b68d4d;
    font-size: 20px;
    margin-left: 5px;
    margin-right: 10px;
    cursor: pointer;
}

    .conBank:hover {
        color: #68512e;
    }

.form-control {
    border: 1px solid #4b82b0;
}

.form-control2 {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 0px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

.btnGlobalStyleSlim {
    cursor: pointer;
    border-radius: 2px;
    border-width: 0px;
    border-style: none;
    border-image: none;
    font-size: 16px;
    font-weight: bold;
    font-family: Lato, sans-serif;
    padding: 5px 6px;
    letter-spacing: 0.032em;
    text-align: center;
    -webkit-transition: all .35s;
    -moz-transition: all .35s;
    transition: all .35s;
    user-select: none;
}

    .btnGlobalStyleSlim:hover {
        -webkit-box-shadow: 0 2px 6px 0 rgba(0,0,0,.13), 0 3px 9px 0 rgba(0,0,0,.11);
        box-shadow: 0 2px 6px 0 rgba(0,0,0,.13), 0 3px 9px 0 rgba(0,0,0,.11);
        -webkit-filter: hue-rotate(12deg);
        filter: hue-rotate(12deg);
        -webkit-filter: brightness(1.2);
        filter: brightness(1.2);
        -webkit-transition: all .35s;
        -moz-transition: all .35s;
        transition: all .35s;
    }

.hubBackBtn {
    padding: 4px 6px;
    background: #7cacd4;
    color: #fff;
    border-radius: 2px;
    margin-top: 5px;
    display: inline-block;
    cursor: pointer;
}

    .hubBackBtn:hover {
        background: #6d96b9;
    }

.hubPostMemCons {
    position: relative;
    top: -15px;
    left: 44px;
    cursor: pointer;
    display: inline-block;
    color: #1b1b1b;
}

    .hubPostMemCons:link {
        color: #1b1b1b;
    }

    .hubPostMemCons:visited {
        color: #1b1b1b;
    }

.postReplyComment .hubPostMemCons {
    left: 31px;
}

.hubFrmBody {
    margin: 8px;
    position: relative;
    background: #fff;
    color: #222 !important;
}

.noPadRight {
    padding-right: 0px;
}

.HeadButtonCount {
    background: rgba(255, 0, 0, 0.54);
    border-radius: 0px 0px 0px 16px;
    width: 20px;
    height: 20px;
    color: #fff;
    text-align: center;
    font-family: Lato,sans-serif;
    vertical-align: middle;
    line-height: 15px;
    font-size: 14px;
    position: absolute;
    right: 0px;
    top: 0px;
}

.accordion-content a {
    text-decoration: underline;
}

#tblNetScoreResults a {
    text-decoration: underline;
}

.modelHeadRight {
    float: right;
}

    .modelHeadRight i {
        color: #4b82b0;
        vertical-align: middle;
        margin-top: 4px;
        font-size: 22px;
        margin-left: 3px;
    }


.hubSearchVideo {
    display: inline-block;
    float: left;
    height: 80px;
    padding: 3px 5px 5px 2px;
}

    .hubSearchVideo img {
        height: 80px;
        /*width: 40px;*/
        border: 1px solid #ddd;        
        box-shadow: 0 1px 0 #e1e8ed;
        overflow: hidden;
        position: relative;
    }

.bootstrap-select .dropdown-menu li {
    position: relative;
    list-style: none;
    display: inline-block;
    width:100%;
}

#hubDiscover{
    text-align:center;
}

.hubMainBtn {
    color: #fff;    
    width: 50%;
    vertical-align: middle;
    padding: 5px 8px;
    text-align: center;
    cursor: pointer;
    display: inline-block;
    background: #4b82b0;
    transition: all 0.2s linear 0s;
}

    .hubMainBtn:hover {
        background: #233849;
        transition: all .2s linear 0s;
    }


#rightCol {
    background: #f5f5f5;
}

@media only screen and (min-width: 991px) {
    .menuScroll {        
        overflow: hidden;
        overflow-y: auto;
        overflow-x: hidden;        
    }
}

.ipAdSmall{
    width:117px;
}
.apAdSmall{
    width:91px;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar:hover {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-thumb {
    background: #4b82b0;
    border-radius: 8px;
}
    ::-webkit-scrollbar-thumb:hover {
        width: 12px;
        height: 12px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: #5c97c7;
        width: 12px !important;
        height: 12px !important;
    }

::-webkit-scrollbar-track {
    background: #e2ebf2;
    border-radius: 8px;
    box-shadow: inset 7px 10px 12px #e7f1fb;
    border-left: 1px solid #d0d7dc;
}

@media only screen and (min-width: 991px) and (max-width: 1200px) {
    .panelHead ins, .panelHeadRight ins {
        display: none;        
    }
}

.hubSubBtnClose{
    cursor:pointer;
    font-size:20px;
}
.hubHeadRow{
    width:100%;
    display:inline-block;
}
.hubFollowerResultRow {
    width: 100%;
    display:block;
}
.hubSearchBtn{
    cursor:pointer;
}
.input-group-addon {   
    z-index: 50;
    min-width: 40px;
}

.overHover:hover {
    box-shadow: 2px 2px 5px rgb(0 0 0 / 17%);
    transition: all 0.2s linear 0s;
}

/* Discover carousel header: flex row so title truly centres and arrows sit level */
[id^="hdNav_"] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hdBtnMove {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #4b82b0;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

    .hdBtnMove:hover {
        background: #3a6b93;
        transform: translateY(-1px);
    }

    .hdBtnMove:active {
        transform: translateY(0);
    }

    .hdBtnMove:focus-visible {
        outline: 2px solid #4b82b0;
        outline-offset: 2px;
    }

    .hdBtnMove.is-disabled {
        opacity: 0.28;
        pointer-events: none;
        box-shadow: none;
    }

    .hdBtnMove i {
        vertical-align: middle;
    }

.hdHead {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: bold;
    text-align: center;
    font-size: 16px;
}

/* Discover rails: native scroll-snap flex track (arrows drive it, but touch/trackpad work too) */
.hd_Body,
.hd_Body2,
.hd_Body3 {
    display: flex;
    width: 100%;
    margin-top: 10px;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: normal;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .hd_Body::-webkit-scrollbar,
    .hd_Body2::-webkit-scrollbar,
    .hd_Body3::-webkit-scrollbar {
        display: none;
    }

.hd_Body {
    height: 196px;
}

.hd_Body2 {
    height: 145px;
}

.hd_Body3 {
    height: 200px;
}

.hdResult1 {
    flex: 0 0 auto;
    width: 125px;
    scroll-snap-align: start;
}

.hdr1Img {
    height: 78px;
    width: 100%;
    position: relative;
}

    .hdr1Img img {
        height: 78px;
        width: 100%;
        object-fit: cover;
        display: inline-block;
    }

/* Placeholder for hubs with no / broken background image (JS adds .no-img).
   Soft neutral tile + muted "image" glyph instead of the browser's broken-image icon. */
.hdr1Img.no-img,
.hdr2Img.no-img,
.hdr3Img.no-img {
    background-color: #eef2f6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239fb2c6'%3E%3Cpath d='M21 19V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 34px 34px;
}

    .hdr2Img.no-img,
    .hdr3Img.no-img {
        border-radius: 5px;
    }

    .hdr1Img.no-img img,
    .hdr2Img.no-img img,
    .hdr3Img.no-img img {
        display: none;
    }

.hdr1Detail {
    border: 1px solid #dfe0e2;
    min-height: 106px;
}

.hdr1Title {
    width: 125px;
    font-weight: bold;
    font-size: 13px;
    text-align: center;
    height: 60px;
    padding: 3px;
    font-family: Lato, sans-serif;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
}

.hdr1Actions {
    width: 125px;
    box-sizing: border-box;
}

.hdr1Btn {
    display: inline-block;
    padding: 10px;
    font-size: 23px;
    color: #4b82b0;
    cursor: pointer;
    transition: all 0.2s linear 0s;
}

    .hdr1Btn:hover {
        transition: all 0.2s linear 0s;
        text-shadow: 2px 2px 2px rgb(68 68 68 / 47%);
        color: #4b82b0;
    }

.hdResult2 {
    width: 262px;
    display: block;
    margin-right: 4px;
    padding-top: 5px;
    padding-bottom: 5px;
    /* keep image + detail on one line (rail sets white-space:normal; the inner
       inline-blocks must not wrap, or the stacked 2-row column doubles in height) */
    white-space: nowrap;
}

.hdr2Img {
    height: 62px;
    width: 54px;
    display: inline-block;
    position: relative;
}

    .hdr2Img img {
        height: 62px;
        width: 54px;
        object-fit: cover;
        border-radius: 5px;
    }

.hdr2Detail {
    min-height: 62px;
    display: inline-block;
}

.hdr2Title {
    width: 160px;
    font-weight: bold;
    font-size: 13px;
    text-align: left;
    height: 62px;
    padding: 10px;
    font-family: Lato, sans-serif;
    display: inline-block;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
}

.hdr2Actions {
    display: inline-block;
    width: 45px;
    height: 62px;
    /*text-align: center;*/
    box-sizing: border-box;
}

.hdr2Btn {
    font-size: 23px;
    color: #4b82b0;
    cursor: pointer;
    transition: all 0.2s linear 0s;
    position: relative;
}

    .hdr2Btn:hover {
        transition: all 0.2s linear 0s;
        text-shadow: 2px 2px 2px rgb(68 68 68 / 47%);
        color: #4b82b0;
    }

.hdr2BtnPtop {
    padding-top: 15px;
}

.hdrResult2Contain {
    flex: 0 0 auto;
    width: 267px;
    scroll-snap-align: start;
}

    .hdrResult2Contain hr {
        margin: 10px 0;
        padding: 0px;
        border-bottom: 1px solid #dfe0e2;
        border-top: 0px;
    }

.hdr3Img {
    width: 125px;
    height: 142px;
    position: relative;
}

    .hdr3Img img {
        width: 125px;
        height: 142px;
        object-fit: cover;
        border-radius: 5px;
    }

.hdResult3 {
    flex: 0 0 auto;
    width: 125px;
    height: 142px;
    scroll-snap-align: start;
}

.hdr3Title {
    width: 105px;
    height: 40px;
    margin: 10px;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
    white-space: normal;
    overflow: hidden;
    margin-top: -60px;
    font-weight: bold;
    font-size: 16px;
    font-family: Lato, sans-serif;
    color: #fff;
    text-shadow: 2px 2px 3px rgb(0 0 0 / 1);
    position: relative;
    text-align: center;
}

.hdPopContain {
    background: #fff;
    position: absolute !important;
    width: 277px;
    border: 1px solid #4b82b0;
    padding: 10px 20px;
    z-index: 2;
    margin-left: 40px;
    margin-top: 0px;
    box-shadow: 1px 4px 11px rgb(0 4 13 / 60%) !important;
    border-radius: 3px;
    display: none;
}

/*.hdPopContain:after,
            .hdPopContain::after {
                position: absolute;
                top: 5px;
                left: -10px;
                content: '';
                width: 0;
                height: 0;
                border-right: solid 10px #4b82b0;
                border-bottom: solid 10px transparent;
                border-top: solid 10px transparent;
            }*/

.hdpHead {
    display: inline-block;
    width: 100%;
    padding-bottom: 10px;
    border-bottom: 1px solid #4b82b0;
}

.hdpTitle {
    display: inline-block;
    width: 220px;
    font-weight: bold;
    font-size: 14px;
    float: left;
    text-align: left;
    position: relative;
    overflow:hidden;
    white-space:nowrap;
}

.hdpClose {
    display: inline-block;
    width: 10px;
    float: right;
    cursor: pointer;
    transition: all 0.2s linear 0s;
}

    .hdpClose:hover {
        transition: all 0.2s linear 0s;
        text-shadow: 2px 2px 2px rgb(68 68 68 / 47%);
        color: #4b82b0;
    }

.hdpBody {
    padding-top: 5px;
    width: 236px;
    display: block;
    text-align: left;
    white-space: normal;
    overflow-wrap: break-word;
}
#maxViewBtn {
    top: 1px;
    position: fixed;
    right: 2px;
    color: rgb(3 11 30 / 0.24);
    z-index: 99999;
    cursor:pointer;
}

.hubCardLinkListItm{
    padding:5px;
    width:100%;
    text-align:center;
    font-weight:bold;
    font-size:16px;
    margin-bottom:10px;
   
}
#cardLinksContain {
    background: #fff;
    width: 240px;
    display: none;
    position: absolute;
    top: 30px;
    left: -107px;
    box-shadow: 3px 3px 6px rgb(0 4 13 / 60%);
    z-index: 9;
    padding: 5px 2px;
    border: 1px solid #4b82b0;
}
.hubDeleteUrl {
    position: absolute;
    right: -6px;
    margin-top: -44px;
    cursor: pointer;
}
.modHead {
    padding: 10px;
    background: #4b82b0;
    color: #fff;
    font-weight: bold;
    width:100%;
}
.modTitle {
    margin-top: 10px;
    padding: 5px 10px;
    font-weight: bold;
    width: 100%;
}
.modDesc {
    margin-top: 5px;
    padding: 5px 10px;
    width: 100%;
}

#alertInBody {
    position: fixed;
    top: 20%;
    width: 50%;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 9999;
    box-shadow: 3px 3px 6px rgb(0 4 13 / 60%);
}

@media only screen and (max-width: 1191px) {
    #alertInBody {        
        top: 20%;
        width: 80%;
        left: 50%;
        transform: translate(-50%, 0);
    }
}

#alertInBody #memAlertBody {
    display: block !important;
}

#alertInBody #memAlertHead {
    background: #4c82b0;
}

#alertInBody #memAlertHead .moduleHead {
    color: #fff !important;
}

    #alertInBody #memAlertHead .moduleHead .fa-exclamation-triangle {
        color: #fff !important;
    }
    #alertInBody #memAlertHead .memAlertHeadAction{
        display:block!important;        
    }
        #alertInBody #memAlertHead .memAlertHeadAction i {
            color: #fff !important;
        }
/* Discover More: Frega-style pill (hub-blue), overrides the legacy .hubSubmit flat box */
.hdDisMore {
    width: 100%;
    margin-top: 12px;
    padding: 11px 18px;
    background: #4b82b0;
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;
    font-family: Lato, sans-serif;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

    .hdDisMore:hover {
        background: #3a6b93;
        border: none;
        box-shadow: 0 3px 8px rgba(75, 130, 176, 0.35);
    }

    .hdDisMore::after {
        content: "\203A"; /* › — pure-unicode chevron, no icon-font dependency */
        margin-left: 8px;
        font-size: 20px;
        font-weight: 700;
        line-height: 0;
    }

.text-wrap {
    white-space: normal !important;
}


.KnowledgePlusBtn {
    display: inline-block;
    width: 100%;
    background: #34454f;
    padding:5px 10px;
    border-radius:4px;
    color:#fff;
    margin-bottom:5px;
    cursor:pointer;
}

.dbkBtn {
    display: inline-block;
    width: 100%;
    background: #086b4f;
    padding: 5px 10px;
    border-radius: 4px;
    color: #fff;
    margin-bottom: 5px;
    cursor: pointer;
}

.bsBtn {
    display: inline-block;
    width: 100%;
    background: #1f738b;
    padding: 5px 10px;
    border-radius: 4px;
    color: #fff;
    margin-bottom: 5px;
    cursor: pointer;
}

#memDbkCount {
    float: right;
    vertical-align: middle;
    margin-top: 1px;
}
#memBSCount {
    float: right;
    vertical-align: middle;
    margin-top: 1px;
}

#memKnowledgeCount {
    float: right;
    vertical-align: middle;
    margin-top: 1px;
}
.memKnowledgeUnSub {
    background: #65879b;
    padding: 2px 5px;
    border-radius: 2px;
    float: right;
    vertical-align: middle;
    margin-right: 5px;
    cursor: pointer;
    transition: all 0.2s linear 0s;
}
    .memKnowledgeUnSub:hover {
        background: #7e9eb1;
        transition: all 0.2s linear 0s;
    }
.submitBtn {
    background: #4b82b0;
    padding:15px 30px;
    text-align:center;
    border-radius:30px;
    color:#fff;
    align-self:center;
}

#dbkResults{
    position: relative;
    display: none;
    width: 100%;
    background: #fff;
}
.dbkResultRow {
    display: block;
    width: 100%;
}

#bsResults {
    position: relative;
    display: none;
    width: 100%;
    background: #fff;
}

.dbkMainCell {
    color: #fff;
    background: #6f6f6f;
    padding: 10px 7px;
    border-bottom: 1px solid #434242;
    border-left: 1px solid #434242;
}
    .dbkMainCell:last-child {
        border-right: 1px solid #434242;
    }

.dbkMainCellClick {
    cursor: pointer;
    transition: all 0.2s linear 0s;
}
    .dbkMainCellClick:hover {
        background: rgb(94, 139, 127);
        transition: all 0.2s linear 0s;
    }
    .dbkMainCellClick i{
        margin-left:20px;
    }

    #dbkStoredContent {
        display: none;
    }
#bsProjContent {
    display: none;
}
#beSortedFunctionality {
    margin-bottom: 10px;
}
.dbkSubRow {
    display: block;
    width: 100%;
}
.dbkSubCell {
    color: #444444;
    background: #fff;
    padding: 10px 7px;
    border-bottom: 1px solid #dddddd;
    border-left: 1px solid #dddddd;
    min-height:45px;
}
    .dbkSubCell:last-child {
        border-right: 1px solid #dddddd;
    }

.dbkResultRow table{
    width:100%;    
}
    .dbkResultRow table thead tr th {
        color: #fff;
        background: #6f6f6f;
        padding: 10px 7px;
        border-bottom: 1px solid #434242;
        border-left: 1px solid #434242;
        border-top: 1px solid #434242;
        font-size:13px;
    }

        .dbkResultRow table thead tr th:last-child {
            border-right: 1px solid #434242;
        }
    .dbkResultRow table tbody tr td {
        color: #444444;
        background: #fff;
        padding: 10px 7px;
        border-bottom: 1px solid #dddddd;
        border-left: 1px solid #dddddd;
    }
        .dbkResultRow table tbody tr td:last-child {
            border-right: 1px solid #dddddd;
        }
.dbkFootHead {
    color: #fff;
    background: #6f6f6f;
    padding: 10px 7px;
    border-bottom: 1px solid #434242;
    border-left: 1px solid #434242;
    border-top: 1px solid #434242;
    font-size: 13px;
}
.dbkFootResult {
    color: #444444;
    background: #fff;
    padding: 10px 7px;
    border-bottom: 1px solid #434242;
    border-left: 1px solid #434242;
    border-top: 1px solid #434242;
    border-right: 1px solid #434242;
}
.dbkFootResult2 {
    color: #fff;
    background: #434242;
    padding: 10px 7px;
    border-bottom: 1px solid #434242;
    border-left: 1px solid #434242;
    border-top: 1px solid #434242;
    border-right: 1px solid #434242;
}



.bsResultRow {
    display: block;
    width: 100%;
}
    .bsResultRow:first-of-type {
        border-top: 1px solid #b9b9b9;
    }
.bsMainCell {
    color: #444444;
    background: #eee;
    padding: 10px 7px;
    border-bottom: 1px solid #b9b9b9;
    border-left: 1px solid #b9b9b9;
}


    .bsMainCell:last-child {
        border-right: 1px solid #b9b9b9;
    }

.bsMainCellClick {
    cursor: pointer;
    transition: all 0.2s linear 0s;
}

    .bsMainCellClick:hover {
        background: #e1f1f6;
        transition: all 0.2s linear 0s;
    }

    .bsMainCellClick i {
        right: 10px;
        top:14px;
        position:absolute;
    }
.bsProjCont{
    display:none;
}

.row.make-equal {
    overflow: hidden;
}

    .row.make-equal [class*="col-"] {
        margin-bottom: -99999px;
        padding-bottom: 99999px;
    }

.kpaContain {
    border: 1px solid #304048;
    margin-top: 10px;
}
.kpaHeadCont {
    border-bottom: 1px solid #304048;
    margin-left:0px;
    margin-right:0px;
}
.kpaLogoSmall {
    background: #fff;
    padding: 4px;
}
.kpaHead {
    background: #314049;
    color: #fff;
    font-weight: bold;
    font-family: Lato, sans-serif;
    font-style: italic;
    font-size: 18px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-top: 5px;
    padding-left:10px;
}
    /*.kpaHead::after {
        content: url('/img/apps/kpbannerbar.png');
        position: absolute; 
        z-index: 100000;
        left: -15px;
        top: 0px;
    }*/

.kpaBody {
    background: #fff;
    margin-left: 0px;
    margin-right: 0px;
}
.kpaTxt{
    font-size:16px;
    display:inline-block;
    width:100%;
    color:#444;
    text-align:center;
    padding:18px 5px;
}
.kpaBtn {
    background: #138871;
    color: #fff;
    font-weight: bold;
    font-family: Lato, sans-serif;
    font-style: italic;
    font-size: 18px;
    text-align: center;
    padding:15px 35px;
    border-radius:30px;
    margin:5px 5px 18px 5px;
    cursor:pointer;
}
.kpaBtn:hover {
    background: #11705d;
}
.cardBrandQrcode{
    display:none;
}
#QrcodeBtn {
    display:inline-block;
    cursor:pointer;
    margin-left:20px;
}


/*----hub master message block----*/
#hubMasterMsgBlock {
    background: #4b82b050;
    padding: 20px;
    width: 100%;
    position: relative;
    height: 100%;    
    z-index: 1;
    display: none;
}

#hubMasterMsgContain {
    background: #ffffff;
    padding: 30px;
    min-height: 100px;
    width: 100%;
    position: relative;  
}

    #hubMasterMsgContain .fa-window-close {
        right: 10px;
        top: 10px;
        position: absolute;
        color: #2e6063;
        cursor: pointer;
        font-size: 21px;
    }

        #hubMasterMsgContain .fa-window-close:hover {
            color: #00304a;
            text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.29)
        }

#hubMasterMsgTxt {
    text-align: center;
}
.hubMasterMsgHead {
    font-weight:bold;
    font-size:18px;
    width: 100%;
    padding: 10px 15px;
    background: #fff;
    color: #000;
    text-align: left;
    font-family: Lato, sans-serif;
}

.hubMasterMsgBody {
    padding: 15px 15px;
    background: #ffffff;
    color: #112122;
    font-family: Lato, sans-serif;
}
/*----close hub master message block----*/

.consultantActionBtn {
    color: #fff;    
    min-width: 37px;
    vertical-align: middle;
    padding: 1px 3px;
    border-radius: 2px;
    text-align: center;
    cursor: pointer;
    display: inline-block;
    background: #4b82b0;
    transition: all 0.2s linear 0s;
    vertical-align: top;
}
.fa-youtube {
    color: #ff0000;
}

.memReferalTxt{
    font-weight:bold;
    display:inline-block;
    width:170px;
    overflow:hidden;
    white-space:nowrap;
}
.memReferalNumber {
    font-weight: bold;
    display: inline-block;
    width:30px;
}
.memReferalChat {
    display: inline-block;
}
.panelContent {
    padding: 5px;
    border-top: 1px solid #dddddd;
    border-left: 1px solid #dddddd;
    background: #ffffff;
    margin-left:10px;
}
#memReferalsContent ul li{
    width:100%;
}
    #memReferalsContent ul li:hover {
        background: #e4f4f8;
        border-bottom: 1px solid #eaeaea;
    }
.chatActive {
    color: var(--presence-online);
    cursor:pointer;
}

.chatInactive {
    color: var(--presence-off);
    cursor:pointer;
}

/* Own-post chat dot is meaningless (can't chat yourself) -> hide the stateless
   bare .memPostChat the feed renders on your own posts (BUG-10 follow-up). */
.postMem .memPostChat:not(.chatOn):not(.chatOff):not(.chatActive):not(.chatInactive):not(.chatDisabled) {
    display: none;
}

/* ============================================================
   HUB ICON / LAYOUT CLEANUP  (2026-07-02, interactive pass)
   Scoped to the hub only (hub.css). Additive overrides.
   ============================================================ */

/* --- 1. Feed toolbar: ONE even bar + icons centred in each button --- */
#feedMenuContain { padding: 8px 10px; }
#feedMenuContain .row { display: flex; flex-wrap: nowrap; align-items: center;
    justify-content: space-evenly; margin: 0; }
#feedMenuContain .feedMenu1,
#feedMenuContain .feedMenu2,
#feedMenuContain .feedMenu3,
#feedMenuContain #myHubContainer,
#feedMenuContain #addPostContain,
#feedMenuContain #hubShareContainer,
#feedMenuContain #hubSearchContainer { display: contents; }
.feedMenuButton { display: inline-flex !important; align-items: center;
    justify-content: center; padding: 0; width: 38px; height: 38px;
    box-sizing: border-box; }
.feedMenuButton i { vertical-align: middle; line-height: 1; font-size: 17px;
    margin: 0; }

/* --- 2. Card edit pencil: pin to top-right corner of the banner --- */
#memCardEdit { top: 10px !important; right: 10px !important;
    background: rgba(255,255,255,0.92) !important; z-index: 6; }

/* --- 3. Left + right nav rows: line icons and text up in columns --- */
.panelHead ins.moduleHead { float: left !important; width: 24px !important;
    text-align: center !important; padding: 0 !important; margin-right: 6px;
    line-height: 1.3; }
.panelHead ins.moduleHead i { font-size: 16px; vertical-align: middle; width: auto; }
.panelHead ins.moduleHead img { max-height: 18px; width: auto; vertical-align: middle; }
.panelHead span.moduleHead { display: block; overflow: hidden; line-height: 1.4;
    text-overflow: ellipsis; white-space: nowrap; }

/* --- 4. Post card icon rows: consistent size + vertical centring --- */
.postMeta .metawrap { display: inline-flex; align-items: center; gap: 2px; }
.postMeta .postMemHub, .postMeta .postUnfollow, .postMeta .postfollowing,
.postMeta .postHide, .postMeta .postPosted { vertical-align: middle !important; }
.postMeta .postMemHub i, .postMeta .postUnfollow i, .postMeta .postfollowing i,
.postMeta .postHide i { font-size: 18px; vertical-align: middle; line-height: 1; }
.postMeta .metawrap { flex-wrap: nowrap; }
.postMeta .postHide { display: inline-flex !important; align-items: center; gap: 5px; vertical-align: middle !important; }
.postMeta .postHide > div { display: inline-flex; align-items: center; margin: 0; }
.postMeta .postPosted { padding: 0; line-height: 1; white-space: nowrap; }
.postActions { display: flex !important; align-items: center; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
/* HCX-29: the reply composer + share panel are appended INTO .postActions (made
   display:flex above), which squeezed them into a narrow right-hand flex item.
   Force them onto their own full-width row (flex-wrap is already on). */
.postActions .hubPostReplyCont,
.postActions .hubPostShareCont { flex: 0 0 100%; width: 100%; text-align: left; }
.postActions .postActionAlert { margin-right: 0; float: none !important;
    display: inline-flex !important; align-items: center; justify-content: center; }
.postActions .postActionEdit, .postActions .postActionDelete,
.postActions .postActionTag, .postActions .postActionLink,
.postActions .postActionShare { display: inline-flex !important; align-items: center;
    justify-content: center; }
.postActions i { font-size: 18px; vertical-align: middle; line-height: 1; }
.postActions .postActionLikeBtn { vertical-align: middle; }


/* --- Toolbar even-bar fix: pull the (empty) dropdown panels OUT of the flex
   flow so they stop acting as invisible spacers between the icon clusters. --- */
#feedMenuContain #myHubTags,
#feedMenuContain #shareHubPost,
#feedMenuContain #searchHub,
#feedMenuContain #myHubs { position: absolute; }

/* Feed-menu dropdown panels slide DOWN from the toolbar and must clear the
   sticky header: shortcode/header.css adds .sticky{z-index:9000} to
   .main-menu-area on scroll, which otherwise occludes these panels (they sat
   at z-index:20). Match the existing .feedMenuDrop precedent (9999); stays
   below swal modals (10050). Owner report 2026-07-05 (Home hub-list). */
#feedMenuContain #myHubs,
#feedMenuContain #searchHub,
#feedMenuContain #myHubTags,
#feedMenuContain #shareHubPost { z-index: 9999; }

/* Anchor the Home hub-list to the toolbar CONTAINER (not the little Home-button
   box), so it drops below the whole toolbar and spans its FULL width, centred on
   it (left:0;right:0;width:auto overrides the base 543px/left:14). #feedMenuContain
   relative keeps z-index:auto -> NO stacking context, so #myHubs's 9999 still
   clears the 9000 sticky header. The sibling dropdowns (searchHub/myHubTags/
   shareHubPost) re-anchor here from #hubCenterCol too (they keep their own
   top/left, so only a few px shift). Owner report 2026-07-05. */
#feedMenuContain { position: relative; }
#feedMenuContain #myHubs,
#feedMenuContain #searchHub,
#feedMenuContain #myHubTags,
#feedMenuContain #shareHubPost { top: 100%; left: 0; right: 0; width: auto; }

/* UI-10 completion (2026-07-05): bring #addHubPost (the compose-post trigger
   panel) into line with the other four toolbar dropdowns. It shipped as a
   static box appended after the toolbar (position:unset; z-index:20); make it
   an absolute, full-width overlay anchored to #feedMenuContain, clearing the
   sticky header like its siblings. CSS-only -- editor markup/wiring untouched. */
#feedMenuContain #addHubPost {
    position: absolute;
    z-index: 9999;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    margin-left: 0;
}


/* --- FIX nav-align regression (2026-07-02): the earlier block span pushed the
   floated icon BELOW the label (icon <ins> follows the <span> in source).
   Keep the label inline so the fixed-width icon stays to its LEFT. --- */
.panelHead span.moduleHead { display: inline !important; }
.panelHead ins.moduleHead { float: left !important; width: 24px !important;
    text-align: center !important; margin: 0 6px 0 0 !important; padding: 0 !important;
    line-height: 1.3; }
.panelHead ins.moduleHead i { font-size: 16px; vertical-align: middle; }
.panelHead ins.moduleHead img { max-height: 18px; width: auto; vertical-align: middle; }

/* =====================================================================
   Card chip icon size-match + tidy (2026-07-02, owner: tidy + size-match
   the Followers / action chips). The chips carried mixed icon sizes - the
   Followers icon inherited .cfh's 12px while the Weblet / Follow / GrowthPoints
   glyphs were 26px, so the row read as ragged. Normalise every chip to one
   centred ~20px icon (Followers = icon + count stacked to the same footprint),
   soften the 2px corners, and keep the follow glyph on hubIconFonts (consistent
   with the feed's follow buttons - owner direction 2026-07-02). Scoped to the
   card action + comm rows only.
   ===================================================================== */
#memCardActions .cardActionBtn,
#memCardComm .cardCommBtn {
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    height: 36px;
    min-width: 40px;
    padding: 0 8px;
    border-radius: 8px;
}
/* one optical icon size for every single-glyph chip (FA + hubIconFonts) */
#memCardActions .cardActionBtn > i,
#memCardComm .cardCommBtn > i {
    font-size: 20px !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
}
/* GrowthPoints brand logo <img> - match the icon size, drop the -20px hack */
#memCardActions .cardActionBtn > img {
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    vertical-align: middle !important;
}
/* Followers chip: icon + count stacked to the same footprint as one glyph */
#memCardActions .cardFollowers .cfh {
    font-size: 0;
    line-height: 1;
    margin: 0;
    padding: 0;
}
#memCardActions .cardFollowers .cfh > i {
    font-size: 17px !important;
    line-height: 1 !important;
}
#memCardActions .cardFollowers .cfc {
    font-size: 11px !important;
    line-height: 1 !important;
    margin: 0;
    padding: 0;
    font-weight: 700;
}

/* =====================================================================
   Card edit affordance -> labelled "Edit" pill (2026-07-02, owner: "so a
   user knows to edit"). A bare pencil icon isn't self-explanatory; make it an
   obvious labelled button pinned to a top corner of the card banner. Owner-only
   control - the base #memCardEdit rule is display:none and JS shows it for the
   hub owner, so this override deliberately does NOT touch `display` (guests must
   keep NOT seeing it). Corner = top-right; owner is fine with left OR right, so
   swap `right`->`left` (and keep `left:auto`->`right:auto`) to move it.
   ===================================================================== */
#memCardEdit {
    top: 10px !important;
    right: 25px !important;   /* offsetParent is #hubLeftCol, ~15px wider than
                                the banner -> +15 keeps the pill ~10px INSIDE the
                                banner's right edge (symmetric with the 10px top) */
    left: auto !important;
    padding: 5px 12px 5px 11px !important;
    border-radius: 50px !important;
    background: #ffffff !important;
    border: 1px solid #78a9d1 !important;
    color: #2b6ca3 !important;
    font-family: Lato, sans-serif;
    font-size: 13px !important;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
    z-index: 6;
}
#memCardEdit > i {
    font-size: 14px !important;
    line-height: 1;
    vertical-align: middle;
    margin-right: 6px;
}
#memCardEdit::after {
    content: "Edit";
    vertical-align: middle;
}

/* =====================================================================
   Card chip cluster neatening + Share sheet (2026-07-02, owner: easy
   QR/email sharing + "blue chip container as long as it is neat"). The
   cluster is centred with even gaps; the Share chip inherits the size-match
   block above. The share sheet is the Frega SweetAlert2 popup opened by
   hubShareCard() (hub.js) - QR + Email invite (mailto) + Copy link.
   .hubShare-popup is on the body-appended Swal popup, so these rules are flat.
   ===================================================================== */
#memCardActions ul {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
#memCardActions ul > li { margin: 0; padding: 0; }

/* --- the share sheet (SweetAlert2 .hubShare-popup) --- */
.hubShare-popup .hubShareSheet {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 2px 2px 6px;
}
.hubShare-popup .hubShareQr {
    width: 200px;
    height: 200px;
    display: block;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 10px;
    padding: 6px;
    background: #fff;
}
.hubShare-popup .hubShareScan {
    font-size: 13px;
    color: #6b6b6b;
    margin-top: -4px;
}
.hubShare-popup .hubShareLinkRow { width: 100%; }
.hubShare-popup .hubShareLinkInput {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 8px;
    font-size: 12px;
    color: #444;
    background: #f7f7f7;
    text-align: center;
}
.hubShare-popup .hubShareBtns { display: flex; gap: 8px; width: 100%; }
.hubShare-popup .hubShareBtn {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 12px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    font-family: Lato, sans-serif;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.hubShare-popup .hubShareEmail { background: #4b82b0; color: #fff; }
.hubShare-popup .hubShareEmail:hover { background: #3f6f97; color: #fff; }
.hubShare-popup .hubShareCopy { background: #fff; color: #2b6ca3; border-color: #78a9d1; }
.hubShare-popup .hubShareCopy:hover { background: #eef5fb; }
.hubShare-popup .hubShareCopy.done { color: #1f7a3d; border-color: #1f7a3d; }

/* --- share sheet: link row (input + mini copy) + email invite row + feedback
   (2026-07-02 rework to server-side _mailSend). --- */
.hubShare-popup .hubShareLinkRow { display: flex; gap: 6px; align-items: center; }
.hubShare-popup .hubShareLinkInput { flex: 1 1 auto; min-width: 0; }
.hubShare-popup .hubShareMini {
    flex: 0 0 auto;
    width: 38px; height: 38px;
    border-radius: 8px;
    border: 1px solid #78a9d1;
    background: #fff;
    color: #2b6ca3;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 15px;
    transition: background-color .15s ease;
}
.hubShare-popup .hubShareMini:hover { background: #eef5fb; }
.hubShare-popup .hubShareEmailRow { display: flex; gap: 6px; align-items: center; width: 100%; }
.hubShare-popup .hubShareEmailInput {
    flex: 1 1 auto; min-width: 0; box-sizing: border-box;
    padding: 9px 14px;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 50px;
    font-size: 13px;
    font-family: Lato, sans-serif;
}
.hubShare-popup .hubShareEmailInput:focus { outline: none; border-color: #78a9d1; }
.hubShare-popup .hubShareSend { flex: 0 0 auto; background: #4b82b0; color: #fff; border: 1px solid transparent; }
.hubShare-popup .hubShareSend:hover { background: #3f6f97; color: #fff; }
.hubShare-popup .hubShareSend[disabled] { opacity: .6; cursor: default; }
.hubShare-popup .hubShareMsg { min-height: 16px; font-size: 12.5px; text-align: center; line-height: 1.3; }
.hubShare-popup .hubShareMsg.ok { color: #1f7a3d; }
.hubShare-popup .hubShareMsg.err { color: #c0392b; }

/* SOC-02: social-share rows (post share sheet; reuses .hubShare-popup shell) */
.hubShare-popup .hubShareSocials { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.hubShare-popup .hubShareSocial { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; background: #4b82b0; color: #fff; text-decoration: none; font-size: 14px; transition: background .15s; }
.hubShare-popup .hubShareSocial:hover { background: #3f6f97; color: #fff; }
.hubShare-popup .hubShareSocial i { width: 20px; text-align: center; font-size: 16px; }
.hubShare-popup .hubShareSocial span { flex: 1 1 auto; }

/* =====================================================================
   Contact-request "simple" hub card (Hub.HubCardContentSimple), shown in
   the Join-Hub / Contact-Request modal inside #contRequestCardContainer.
   The redesigned rounded chip style is scoped to #memCardActions, which
   this card's bare .cardActions lacks -> its Following/Followers chips
   fell back to the flat 2px-corner base. Match the redesigned chip
   footprint here (text labels kept - this card carries no chip icons).
   Scoped to #contRequestCardContainer only = zero blast radius.
   ===================================================================== */
#contRequestCardContainer .cardActionBtn {
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    height: 36px;
    min-width: 40px;
    padding: 0 8px;
    border-radius: 8px;
}
#contRequestCardContainer .cardActionBtn > i {
    font-size: 20px !important;
    line-height: 1 !important;
    margin: 0 !important;
}
#contRequestCardContainer .cardFollowing .cfh,
#contRequestCardContainer .cardFollowers .cfh {
    font-size: 9px !important;
    line-height: 1 !important;
    text-transform: uppercase;
    letter-spacing: .3px;
    opacity: .85;
    width: auto;
}
#contRequestCardContainer .cardFollowing .cfc,
#contRequestCardContainer .cardFollowers .cfc {
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 700;
    width: auto;
}

/* ---------------------------------------------------------------------------
   UI-08 (2026-07-04): feed post-card action-row calm + inline tag pill.
   Owner-approved LIGHT pass (CSS-only, no HTML change). One muted resting
   treatment for the SINGLE-ACTION secondary icons so the primary action
   (Reply) reads as the single emphasized control; report/delete reveal their
   warning/destructive colour on hover only (MASTER: red = destructive). The
   Like is a COMPOUND control (count + hand-heart button + open-list caret +
   who-liked dropdown) and is deliberately LEFT NATIVE so its open/click
   affordance is preserved. Inline hashtag (href-less <a>) -> pill. Shared
   feed card -> applies to hub + weblet. Scoped to .postActions / .postPost.
   --------------------------------------------------------------------------- */
.postActions .postActionAlert,
.postActions .postActionEdit,
.postActions .postActionDelete,
.postActions .postActionTag,
.postActions .postActionLink {
    color: #6b7280;
    background: transparent;
    width: auto;
    height: auto;
    padding: 4px 6px;
    border-radius: 6px;
    float: none;
    box-shadow: none;
    transition: color .15s linear, background .15s linear;
}
.postActions .postActionAlert { line-height: 1; text-align: center; }
.postActions .postActionAlert i,
.postActions .postActionEdit i,
.postActions .postActionDelete i,
.postActions .postActionTag i,
.postActions .postActionLink i { color: inherit; vertical-align: middle; }
/* HCX-06: destructive delete carries a resting red affordance (S2T: red = destructive) */
.postActions .postActionDelete { color: #ed0000; }
/* non-destructive actions: calm neutral hover */
.postActions .postActionEdit:hover,
.postActions .postActionTag:hover,
.postActions .postActionLink:hover { color: #144190; background: #eef2f7; }
/* report + delete: warning / destructive colour on hover only */
.postActions .postActionAlert:hover { color: #b00020; background: #fbeaec; }
.postActions .postActionDelete:hover { color: #b00020; background: #fbeaec; }
/* Reply = the single emphasized control (firm pill, not the washed-out blue) */
.postActions .postActionReply {
    background: #3b9ff3;
    color: #fff;
    padding: 5px 14px;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 600;
}
.postActions .postActionReply:hover { background: #2e8ce0; }
/* Inline hashtag in the post body -> pill (href-less <a>, never a real link) */
.postPost a:not([href]) {
    display: inline-block;
    background: #eef4fb;
    color: #144190;
    padding: 1px 9px;
    border-radius: 12px;
    font-size: 12px;
    letter-spacing: normal;
    text-decoration: none;
    line-height: 1.7;
}
.postPost a:not([href]):hover { background: #dbe8f7; text-decoration: none; }

/* UI-08b (2026-07-04): neaten the "who liked" dropdown (.postLikeList).
   Was a fixed 200x200 box with each liker split across two lines (name row +
   a full-width icon row beneath). Now: content-height panel (max-height +
   scroll), sticky accent header, and each liker on ONE row -> avatar + name
   left, weblet/chat/video actions right-aligned. Scoped under .postLikeList
   so the shared .hf and .ll classes elsewhere are untouched. CSS-only. */
.postLikeList {
    height: auto;
    max-height: 240px;
    width: 240px;
    margin-left: -180px;
    padding: 0;
    border-radius: 8px;
    overflow: hidden auto;
    border-color: #d7dbe0;
}
.postLikeList .likeListHead {
    position: sticky;
    top: 0;
    background: #3b9ff3;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 10px;
    width: 100%;
    box-sizing: border-box;
}
.postLikeList .llCont {
    display: flex;
    align-items: center;
    gap: 8px;
    width: auto;
    padding: 7px 10px;
    border-bottom: 1px solid #eef0f2;
    box-sizing: border-box;
}
.postLikeList .llCont:last-child { border-bottom: 0; }
.postLikeList .llCont > a {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    text-decoration: none;
    color: #144190;
}
.postLikeList .hfHubIcon { width: 28px; height: 28px; flex: 0 0 28px; }
.postLikeList .hfHubImg { width: 100%; height: 100%; object-fit: cover; }
.postLikeList .hfingTit {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.postLikeList .llActions { width: auto; flex: 0 0 auto; display: flex; align-items: center; gap: 4px; }
.postLikeList .llBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    color: #6b7280;
    font-size: 15px;
}
.postLikeList .llBtn a { color: inherit; }
.postLikeList .llBtn:hover { color: #144190; background: #eef2f7; }

/* ============================================================
   FOLLOWING panel - minimal Frega recolour (2026-07-05, owner-approved)
   Scoped to #hubFollowing so the shared .hubFollower* / .hubHeadCont /
   .hubSearchHead classes (also used by the Followers panel + other hub
   sub-panels) are untouched. Presentation only: no builder/markup change,
   every id / onclick / Permis state-class preserved. Retint via swappable
   tokens (one place to repalette later). navy+blue header -> one clean
   deep-Frega tone; icon states -> MASTER palette; the broken .PermisDisabled
   (DOM class that had NO matching CSS rule - was .PermisDisable) fixed.
   ============================================================ */
#hubFollowing {
    --fl-header: #4b82b0;     /* hub header blue - unified one tone (was navy #4b82b0 header + blue #4b82b0 search) */
    --fl-on: #4A8A68;         /* MASTER --brand: notifications ON / active */
    --fl-off: #848484;        /* MASTER --muted: toggle OFF / inactive */
    --fl-disabled: #c2d7cc;   /* MASTER --btn-disabled */
    --fl-danger: #d0342c;     /* destructive (unfollow) - hover only */
    --fl-hover: #F6F8F7;      /* MASTER --brand-subtle: row hover */
}
/* Header + search unified to one clean Frega tone */
#hubFollowing .hubHeadCont { background: var(--fl-header); }
#hubFollowing .hubSearchHead { background: var(--fl-header); padding-top: 4px; }
/* FAQ -> clean white ghost pill (kills the legacy hue-rotate/brightness hover) */
#hubFollowing .hubSubFAQBtn {
    background: transparent; border: 1px solid rgba(255,255,255,0.55); color: #fff;
    border-radius: 50px; padding: 3px 12px; line-height: 1.5; font-size: 13px;
}
#hubFollowing .hubSubFAQBtn:hover { background: rgba(255,255,255,0.16); filter: none; }
/* Search input: white + rounded on the recoloured band */
#hubFollowing .hubSearchHead .input-group { border-radius: 6px; overflow: hidden; }
#hubFollowing .hubSearchHead .form-control { border: 0; box-shadow: none; }
#hubFollowing .hubSearchHead .input-group-addon { background: #fff; border: 0; color: var(--fl-on); cursor: pointer; }
/* Action-icon states (recolour only; layout unchanged) */
#hubFollowing .hubFollowerPermis { color: var(--fl-off); }
#hubFollowing .PermisActive { color: var(--fl-on); }
#hubFollowing .PermisInActive { color: var(--fl-off); }
#hubFollowing .PermisDisabled,
#hubFollowing .PermisDisable { color: var(--fl-disabled); }
#hubFollowing .hubFollowerPermis:hover i { color: #3d3d3d; }
/* Unfollow = the one destructive action -> red on hover only (MASTER) */
#hubFollowing .hfHubRightContain .hubFollowerPermis:last-child:hover i { color: var(--fl-danger); }
/* Row hover retint: pale-blue -> Frega subtle */
#hubFollowing .hfHubCont:hover { background: var(--fl-hover); box-shadow: none; }

/* --- Following results: close the search->list seam + tidy alignment/spacing
   (2026-07-05 owner). The bands contain floated children (search .col-md-12,
   header .hubHeadActions) so they need a block formatting context; flow-root
   keeps that BUT is block-level -> no inline-block baseline gap under the
   search band (the old ~6px seam). --- */
#hubFollowing .hubHeadCont,
#hubFollowing .hubSearchHead { display: flow-root; }
/* Row: consistent 10px inset (avatar/name line up under the search field),
   roomier padding, softer divider. */
#hubFollowing .hfHubCont { display: block; padding: 8px 10px; }
#hubFollowing .chfList li { border-bottom-color: #e8e8e8; }
/* Identity line -> flex: avatar + name(fills, ellipsis) + globe(fixed, right);
   replaces the legacy 87%+20% widths that overflowed the row. */
#hubFollowing .hfHubCont > .hubFollowerResultRow:first-child { display: flex; align-items: center; gap: 8px; }
#hubFollowing .hfHubCont > .hubFollowerResultRow:first-child > a { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; text-decoration: none; }
#hubFollowing .hfHubIcon { flex: 0 0 auto; }
#hubFollowing .hfingTit { width: auto; flex: 1 1 auto; min-width: 0; font-weight: 600; }
#hubFollowing .hfingActions { width: auto; height: auto; flex: 0 0 auto; margin: 0; }
/* Action line -> right-aligned, even icon gaps, small gap above. */
#hubFollowing .hfHubCont > .hubFollowerResultRow:last-child { margin-top: 4px; }
#hubFollowing .hfHubRightContain { display: flex; justify-content: flex-end; align-items: center; gap: 8px; float: none; }
#hubFollowing .hubFollowerPermis { padding: 2px 4px; }

/* ============================================================
   FOLLOWERS panel - minimal Frega recolour (2026-07-05, UI-12, owner-approved)
   Sibling of UI-11 (#hubFollowing). Scoped to #hubFollowersFrm so the shared
   .hubHeadCont / .hubSearchHead / .hubSubBtn / .HubUnFollow / .hfHubCont /
   .hubFollower* classes (also used by the Following panel + other hub sub-panels)
   stay untouched. Presentation only: no builder/markup change; every id / name /
   onclick / Permis state-class / bulk-select checkbox (cardHubFersItm) preserved.
   Owner picks: header stays hub-blue (not Frega-green); Submit = orange PILL.
   ============================================================ */
#hubFollowersFrm {
    --fl-header: #4b82b0;     /* unified hub-blue (was #4b82b0 header + #4b82b0 search two-tone) */
    --fl-on: #4A8A68;         /* MASTER --brand: active / in-contact / chat-on */
    --fl-off: #848484;        /* MASTER --muted: inactive / chat-off */
    --fl-disabled: #c2d7cc;   /* MASTER --btn-disabled */
    --fl-danger: #d0342c;     /* destructive (bar/remove) - hover only */
    --fl-hover: #F6F8F7;      /* MASTER --brand-subtle: row hover */
    --fl-accent: #e96301;     /* owner-kept orange Submit accent */
}
/* Header + search band unified to one clean hub-blue tone */
#hubFollowersFrm .hubHeadCont { background: var(--fl-header); }
#hubFollowersFrm .hubSearchHead { background: var(--fl-header); padding-top: 4px; }
/* Bands hold floated children (.hubHeadActions, .col-md-6) -> give them a BFC
   without the inline-block baseline seam (same fix as UI-11). */
#hubFollowersFrm .hubHeadCont,
#hubFollowersFrm .hubSearchHead { display: flow-root; }
/* FAQ + bulk-chat chips -> clean white ghost pills (kills legacy hue-rotate hover) */
#hubFollowersFrm .hubSubFAQBtn {
    background: transparent; border: 1px solid rgba(255,255,255,0.55); color: #fff;
    border-radius: 50px; padding: 3px 12px; line-height: 1.5; font-size: 13px; height: auto;
}
#hubFollowersFrm .hubSubFAQBtn:hover { background: rgba(255,255,255,0.16); filter: none; }
#hubFollowersFrm .hubSubBtn { background: transparent; border: 1px solid rgba(255,255,255,0.55); color: #fff; }
#hubFollowersFrm .hubSubBtn:hover { background: rgba(255,255,255,0.16); }
/* Search select + input: white + rounded on the recoloured band */
#hubFollowersFrm .hubSearchHead .input-group { border-radius: 6px; overflow: hidden; }
#hubFollowersFrm .hubSearchHead .form-control { border: 0; box-shadow: none; }
#hubFollowersFrm .hubSearchHead .input-group-addon { background: #fff; border: 0; color: var(--fl-on); cursor: pointer; }

/* --- Result rows: flex layout, fix the legacy %-width overflow, tidy inset --- */
#hubFollowersFrm .hfHubCont { display: block; padding: 8px 10px; }
#hubFollowersFrm .hubFollowList li { border-bottom-color: #e8e8e8; }
#hubFollowersFrm .hfHubCont:hover { background: var(--fl-hover); box-shadow: none; }
/* Identity line: link(icon+name+title, fills) | actions | last-visit (pinned right) */
#hubFollowersFrm .hfHubCont > .hubFollowerResultRow:first-child { display: flex; align-items: center; gap: 8px; }
#hubFollowersFrm .hfHubCont > .hubFollowerResultRow:first-child > a { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; text-decoration: none; color: inherit; }
#hubFollowersFrm .hfHubIcon { flex: 0 0 auto; order: -1; }
#hubFollowersFrm .hfMemName { width: auto; flex: 0 1 auto; min-width: 0; font-weight: 600; padding-left: 0; }
#hubFollowersFrm .hfTit { width: auto; flex: 1 1 auto; min-width: 0; color: #5a5a5a; }
#hubFollowersFrm .hfActions { width: auto; flex: 0 0 auto; }
#hubFollowersFrm .hfActions .chatOn i, #hubFollowersFrm .hfActions i.chatOn { color: var(--presence-online); }
#hubFollowersFrm .hfActions .chatDisabled i, #hubFollowersFrm .hfActions i.chatDisabled { color: var(--presence-off); }
#hubFollowersFrm .hfMemLastVisit { width: auto; flex: 0 0 auto; font-size: 12px; color: #6b6b6b; }
/* Action line: right-aligned selection checkbox / reactivate control */
#hubFollowersFrm .hfHubCont > .hubFollowerResultRow:last-child { margin-top: 2px; }
#hubFollowersFrm .hfHubRightContain { display: flex; justify-content: flex-end; align-items: center; gap: 8px; float: none; }
#hubFollowersFrm .hubFollowerPermis { color: var(--fl-off); padding: 2px 4px; }
#hubFollowersFrm .hubFollowerActionChk { accent-color: var(--fl-on); margin-left: 0; }
#hubFollowersFrm .PermisActive { color: var(--fl-on); }
#hubFollowersFrm .PermisInActive { color: var(--fl-off); }
#hubFollowersFrm .PermisDisabled,
#hubFollowersFrm .PermisDisable { color: var(--fl-disabled); }
#hubFollowersFrm .hubFollowerPermis:hover i { color: var(--fl-danger); }

/* --- Bottom action bar: orange Submit as a clean pill (owner pick) --- */
#hubFollowersFrm .HubUnFollow {
    background: var(--fl-accent); border-radius: 50px; padding: 8px 18px;
    font-weight: 600; box-shadow: none; float: none;
}
#hubFollowersFrm .HubUnFollow:hover { background: #d15701; }

/* LIST-ENH-6 follow-up (BUG-13): keep the join-request Decline/Accept row inside the panel.
   The server grid (col-xs-8 name + col-xs-2/col-xs-2 buttons) is too narrow for the shared
   .hubBtnCancel/.hubBtnOk buttons (~128px), so they overflowed the panel. Fixed scoped to the
   request rows only via flex + trimmed button padding; the shared button classes are untouched. */
[id^="hubMemberReq_"] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
}
[id^="hubMemberReq_"] > br,
[id^="hubMemberReq_"] > div[style*="clear"] { display: none; }
[id^="hubMemberReq_"] > .actRequestName {
    flex: 1 1 45%;
    min-width: 0;
    float: none;
    word-break: break-word;
}
[id^="hubMemberReq_"] > .nopadding {
    flex: 0 0 auto;
    float: none;
    width: auto;
}
[id^="hubMemberReq_"] .hubBtnCancel,
[id^="hubMemberReq_"] .hubBtnOk {
    padding: 6px 16px;
    white-space: nowrap;
}


/* HCX-02 (2026-07-16): on narrow mobile the feed toolbar's fixed 38px icon
   buttons overflow their bar (~406px into a ~350px container) and clip the
   right-most icons / force an inner scroll. Let them wrap to a second row
   instead of overflowing. (Owner pick: wrap over horizontal-scroll.) */
@media (max-width: 767px) {
    #feedMenuContain .row { flex-wrap: wrap; row-gap: 4px; justify-content: center; }
}


/* ===================================================================
   HCX-01 / HCX-14 : mobile feed-first + sticky mini-header + Hub menu
   drawer  (<=767px)
   - Left personal panel (#memBtns) + right hub panel (#colButtons /
     #hubFaq / #resourceContain) relocate by hub.js into a slide-in
     drawer with TWO labelled sections (My Hub / Navigation) -> feed
     leads, bottom clear for pagination.
   - Sticky bar (#hubStickyBar) pins the Hub-menu trigger + feed action
     bar (#feedMenuContain) to the top on scroll. A mini hub identity
     (logo + name) FADES IN once the profile card scrolls out of view
     (IntersectionObserver -> .identity-visible), so you always know
     whose hub you are in.
   Progressive enhancement: all gated on body.hub-drawer-ready, added
   by hub.js only after a successful relocation. No JS -> legacy stack.
   Hub brand: HUB-BLUE #4b82b0 (not green; red = destructive only).
   =================================================================== */
#hubMenuBtn,
#hubStickyBar,
#hubToolsDrawer,
#hubToolsBackdrop { display: none; }

@media only screen and (max-width: 767px) {

    body.hub-drawer-ready #rightCol { display: none; }   /* now empty */

    /* #bodyWrapper (shared) carries overflow:auto, which kills position:sticky
       for descendants. Scope-restore overflow on the HUB only (hub-drawer-ready)
       + mobile only, so the sticky bar can pin. Verified: introduces no
       horizontal scroll, and other DUW surfaces never get hub-drawer-ready. */
    body.hub-drawer-ready #bodyWrapper { overflow: visible; }

    /* --- Sticky bar: pins on scroll --- */
    body.hub-drawer-ready #hubStickyBar {
        display: block;
        position: -webkit-sticky; position: sticky; top: 0; z-index: 900;
        /* Faint wash of the hub's own cover art (--hub-cover set by hub.js from #CardBgImg_Image). */
        background-color: #eef1f3;
        background-image: linear-gradient(rgba(245,245,245,.82), rgba(245,245,245,.90)), var(--hub-cover, none);
        background-size: cover; background-position: center; background-repeat: no-repeat;
        margin: 0 0 8px; padding: 8px 14px 10px;
        box-shadow: 0 3px 8px rgba(0,0,0,.08);
    }

    /* Top row: mini identity (left, on scroll) + Hub-menu trigger (right). */
    .hubStickyTop { display: flex; align-items: center; gap: 10px; }

    .hubStickyIdentity {
        display: flex; align-items: center; gap: 8px;
        flex: 1 1 auto; min-width: 0;
        max-width: 0; opacity: 0; overflow: hidden;
        transition: max-width .25s ease, opacity .2s ease;
    }
    #hubStickyBar.identity-visible .hubStickyIdentity { max-width: 100%; opacity: 1; }
    .hubStickyLogo {
        width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
        flex: 0 0 auto; border: 1px solid #d8dee3; background: #fff;
    }
    .hubStickyName {
        font-weight: 700; color: #4b82b0; font-size: 15px;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

    /* Hub-menu trigger: full-width when alone, compact once identity shows. */
    body.hub-drawer-ready #hubMenuBtn {
        display: flex; align-items: center; justify-content: center; gap: 10px;
        width: 100%; flex: 1 1 auto; margin: 0;
        padding: 11px 16px; border-radius: 8px;
        background: #4b82b0; color: #fff; border: none;
        font-size: 15px; font-weight: 600; line-height: 1; cursor: pointer;
        box-shadow: 0 1px 3px rgba(0,0,0,.18);
        transition: background .15s ease;
    }
    #hubStickyBar.identity-visible #hubMenuBtn { width: auto; flex: 0 0 auto; }
    body.hub-drawer-ready #hubMenuBtn:hover  { background: #2c4759; }
    body.hub-drawer-ready #hubMenuBtn:active  { background: #253c4c; }
    body.hub-drawer-ready #hubMenuBtn:focus-visible { outline: 3px solid #9bc1e6; outline-offset: 2px; }
    body.hub-drawer-ready #hubMenuBtn i { font-size: 16px; }

    /* feedMenuContain rides below the top row in the sticky bar. */
    body.hub-drawer-ready #hubStickyBar #feedMenuContain { margin: 6px 0 0; }

    /* Kill desktop sticky/transform on relocated widgets so they flow
       naturally in the drawer. */
    body.hub-drawer-ready #hubToolsDrawer #memBtns,
    body.hub-drawer-ready #hubToolsDrawer #colButtons {
        position: static !important;
        transform: none !important;
        min-height: 0 !important;
        margin-top: 0;
        will-change: auto;
    }

    /* HCX-01 open-bug fix (2026-07-18): the ~400px empty gap the owner flagged
       ("remove the space"). The .stick-widget sticky script sets an INLINE
       height (e.g. height:642px) on #memBtns AND #colButtons to fill the desktop
       column; in the drawer their real content is only ~120-250px, so the
       surplus showed as a dead band. min-height was a red herring - the reserve
       is a fixed inline HEIGHT; a stylesheet !important beats the non-important
       inline rule. Unconditional at mobile so it holds regardless of
       drawer/column position; desktop (>767px) keeps the sticky fill.
       Verified live at 400px: #memBtns 642->247, #colButtons 642->116. */
    #memBtns,
    #colButtons { height: auto !important; min-height: 0 !important; }

    /* --- Backdrop --- */
    body.hub-drawer-ready #hubToolsBackdrop {
        display: block; position: fixed; inset: 0; z-index: 9998;
        background: rgba(0,0,0,.45);
        opacity: 0; pointer-events: none;
        transition: opacity .25s ease;
    }
    body.hub-drawer-ready #hubToolsBackdrop.open { opacity: 1; pointer-events: auto; }

    /* --- Drawer panel --- */
    body.hub-drawer-ready #hubToolsDrawer {
        display: flex; flex-direction: column;
        position: fixed; top: 0; right: 0; z-index: 9999;
        width: 88%; max-width: 380px; height: 100%;
        background: #f5f5f5;
        box-shadow: -6px 0 24px rgba(0,0,0,.25);
        transform: translateX(100%);
        transition: transform .28s cubic-bezier(.4, 0, .2, 1);
        overflow: hidden;
    }
    body.hub-drawer-ready #hubToolsDrawer.open { transform: translateX(0); }

    .hubToolsHead {
        flex: 0 0 auto;
        display: flex; align-items: center; justify-content: space-between;
        background: #4b82b0; color: #fff;
        padding: 14px 16px; font-size: 17px; font-weight: 600;
    }
    .hubToolsHead .hubToolsClose {
        background: none; border: none; color: #fff;
        font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 8px;
    }
    .hubToolsHead .hubToolsClose:focus-visible { outline: 2px solid #9bc1e6; outline-offset: 2px; }

    #hubToolsDrawerBody {
        flex: 1 1 auto;
        overflow-y: auto;
        padding: 0 12px 40px;
    }

    /* --- The two sections --- */
    .hubToolsSection { margin-top: 14px; }
    .hubToolsSectionTitle {
        margin: 0 0 8px; padding: 0 2px 6px;
        font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
        color: #4b82b0; border-bottom: 2px solid #d8dee3;
    }
    .hubToolsSection > div > :first-child { margin-top: 0; }

    /* Adverts are noise in the mobile menu drawer -> hide (desktop rail keeps them). */
    body.hub-drawer-ready #hubToolsDrawer #hubAdverts,
    body.hub-drawer-ready #hubToolsDrawer #hubAdverts2 { display: none; }
}

@media only screen and (max-width: 767px) and (prefers-reduced-motion: reduce) {
    body.hub-drawer-ready #hubToolsDrawer,
    body.hub-drawer-ready #hubToolsBackdrop,
    .hubStickyIdentity { transition: none; }
}


/* ===================================================================
   HCX-01 / HCX-14 : mobile site header (hub page only)
   The brand banner (#brandLogo .dswBrandLogo) was centred in its
   column, so its right edge overlapped the score gauge + burger. On
   mobile, left-align it and cap its size so the right-hand controls
   have clear room. Scoped to the hub page (this file loads there only).
   =================================================================== */
@media only screen and (max-width: 767px) {
    #brandLogo,
    #brandLogo > *,
    #brandLogo a { text-align: left !important; }

    #brandLogo .dswBrandLogo {
        height: 70px !important;
        max-width: 280px !important;
        width: auto !important;
        margin: 0 !important;
    }
}

/* ============================================================
   HCX-04 - 44px touch targets on the feed  (phones, 2026-07-18)
   Owner call: grow the HIT AREA only - glyphs stay ~18px, no
   visual bloat. Icons stay icon-only; the existing `ttip title=`
   already names each action for discovery/screen-readers.
   Scoped <=767px: the mobile fat-finger surface (matches the
   HCX-01/14 phone scope). Additive; later rule wins.
   ============================================================ */
@media (max-width: 767px) {
    /* 1. Feed post action glyphs -> min 44x44 hit box (glyph unchanged) */
    .postActions .postActionLike,
    .postActions .postActionShare,
    .postActions .postActionEdit,
    .postActions .postActionDelete,
    .postActions .postActionTag,
    .postActions .postActionLink,
    .postActions .postActionAlert {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }
    /* labelled Reply pill: keep its width, just meet the 44px height */
    .postActions .postActionReply {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* 2. Feed-menu bar: 38 -> 44 (the 2026-07-02 pass stopped at 38) */
    .feedMenuButton { width: 44px; height: 44px; }

    /* 3. Follower-row action links (weblet / group-chat) -> 44x44,
          and the row's main tap (avatar + title) gets a comfortable height */
    .hfingActions a {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .hubFollowerResultRow .hfHubCont > a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* HCX-17 (2026-07-18): the left menu (#memBtns) overflows its sticky-set inline
   height by ~22px, so the auto scrollbar showed permanently. Hide the left-menu
   scrollbar until the user hovers the menu (standard scrollbar props - modern
   Chrome/Edge/Firefox). Scoped to #memBtns so other hub scrollbars are untouched. */
#memBtns { scrollbar-width: thin; scrollbar-color: transparent transparent; }
#memBtns:hover { scrollbar-color: #4b82b0 transparent; }

/* Hub toolbar dropdown standardisation (2026-07-18, owner: "standardise all the
   drop downs"): one consistent panel shell for all six feed-menu dropdowns -
   white card, soft light border, soft modern shadow, square corners (matching
   the search redesign). Replaces the legacy per-panel #f5f5f5 / #b5b4b5 /
   harsh-shadow look. Padding/width stay per-panel (their content differs). */
#searchHub,
#emailHub,
#shareHubPost,
#myHubs,
#addHubPost,
#myHubTags {
    background: #fff;
    border: 1px solid #e2e8ee;
    box-shadow: 0 10px 30px rgba(16, 42, 67, 0.16);
}


/* ============================================================
   HCX-18 - muted per-function colour for feed post-action buttons
   (2026-07-18, owner-directed; owner-picked: glyph-tint only +
   caution amber for alert). Layers onto the HCX-06 neutral reset
   (same .postActions specificity, later -> wins). Semantic, NOT a
   rainbow: red = destructive, amber = warning/report, green =
   active (post has likes / currently following), hub-blue =
   interactive. Colour lives in the GLYPH; backgrounds stay
   transparent at rest, a faint wash fades in on hover only
   (owner: "not too distracting"). Hub/Frega family (hub-blue
   #4b82b0, MASTER green #4A8A68) - NOT the S2T identity orange.
   Shared hub CSS -> all hubs; ?v= bumped on every loader.
   Honest limits: (1) "green like" = POST HAS LIKES (.pdrl) - the
   DOM has no liked-by-me flag; (2) green-follow targets
   .postUnfollow because the class names are INVERTED (the onclick
   is the truth): .postUnfollow = currently following,
   .postfollowing = the follow CTA.
   ============================================================ */

/* Resting glyph tints (transparent bg; hover adds the faint wash) */
.postActions .postActionAlert  { color: #c0800c; }   /* report/flag = caution amber */
.postActions .postActionDelete { color: #c0392b; }   /* destructive = muted red (calmer than #ed0000) */
.postActions .postActionEdit,
.postActions .postActionTag,
.postActions .postActionLink   { color: #6b7280; }   /* the rest = soft neutral */

/* Hover: neutral actions -> hub-blue; alert/delete keep their own warning wash */
.postActions .postActionEdit:hover,
.postActions .postActionTag:hover,
.postActions .postActionLink:hover   { color: #4b82b0; background: #eef2f7; }
.postActions .postActionAlert:hover  { color: #9a6408; background: #fbf1de; }
.postActions .postActionDelete:hover { color: #b00020; background: #fbeaec; }

/* Reply = the single primary CTA pill -> true hub-blue (was #3b9ff3) */
.postActions .postActionReply        { background: #4b82b0; }
.postActions .postActionReply:hover  { background: #3c6a92; }

/* Like: compound split control (heart+count | caret dropdown). Keep the
   box but neutralise its loud light-blue at rest; the GLYPH carries the
   state. .pdrl = post has >=1 like -> muted-green "has engagement". */
.postActions .postActionLikeBtn {
    background: #f4f6f8;
    border-color: #dfe3e7;
    color: #6b7280;
}
.postActions .postActionLikeBtn:hover { background: #e9eef3; }
.postActions .postActionLike .postLikes { color: #5a6068; }
.postActions .postActionLikeBtn.pdrl,
.postActions .postActionLikeBtn.pdrl .postLikes { color: #4A8A68; }
.postActions .postActionLikeBtn.pdrl { background: #eef5f1; border-color: #cfe3d8; }

/* Follow toggle (post meta). Map by STATE, not the inverted class name:
   .postUnfollow  = currently FOLLOWING -> green (active/on)
   .postfollowing = NOT following (CTA)  -> neutral, hub-blue on hover */
.postUnfollow         { color: #4A8A68; }
.postUnfollow:hover   { color: #3f7658; }
.postfollowing        { color: #6b7280; }
.postfollowing:hover  { color: #4b82b0; }

/* =====================================================================
   HCX-23 slice 1 (2026-07-19, owner-directed): post-editor buttons +
   attach controls -> Frega hub-blue. Scoped to the post editors
   (.attachments = newpost create, .editAttachments = editpost edit) so the
   base .hubSubmit (hub onboarding card .fp-btn, editreply, elsewhere) is
   untouched. Functional colour = hub-blue #4b82b0 (green=active, red=destroy).
   Follows the discover-more pill precedent (hub.css ~4586).
   ===================================================================== */

/* Editor action bar: even rhythm, vertical centring */
.attachments > ul,
.editAttachments > ul {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 12px; justify-content: flex-end; margin: 0;
}
.attachments li,
.editAttachments li { display: inline-flex; align-items: center; margin: 0; }
.attachments #attachmentlist,
.editAttachments #attachmentlist { color: #6b7883; font-size: 12px; margin: 0; }

/* Attach icon-buttons (replace the legacy 32px PNGs) */
/* icon-font glyph centres via line-height=height + text-align (flex loses to
   FA Pro .fal{display:inline-block} at equal specificity, and the icon is a
   flex ITEM so its own display is blockified). Scoped selector beats .fal. */
.attachments .hubAttachIcon,
.editAttachments .hubAttachIcon {
    display: inline-block; width: 40px; height: 40px;
    line-height: 40px; text-align: center; border-radius: 50%;
    background: #e9f1f9; color: #4b82b0; font-size: 18px; cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.attachments .fileContainer:hover .hubAttachIcon,
.attachments li[onclick]:hover .hubAttachIcon { background: #4b82b0; color: #fff; }

/* picker: the icon lives INSIDE the .fileContainer label; clip-hide the input
   (display:none blocks the OS chooser in some engines) -- #postImg wiring intact */
.attachments .fileContainer {
    position: relative; margin: 0; padding: 0; width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.attachments .fileContainer [type="file"] {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer; font-size: 0;
}

/* Publish / Update -> Frega hub-blue pill (scoped; base .hubSubmit box left intact) */
.attachments .hubSubmit,
.editAttachments .hubSubmit {
    padding: 9px 24px; color: #fff; background: #4b82b0; border: 0;
    border-radius: 50px; font-size: 15px; font-weight: 600; line-height: 1.2;
    box-shadow: 0 1px 2px rgba(0,0,0,.10);
    transition: background .15s ease, box-shadow .15s ease; width: auto !important;
}
.attachments .hubSubmit:hover,
.editAttachments .hubSubmit:hover {
    color: #fff; background: #3d6d95; border: 0;
    box-shadow: 0 3px 8px rgba(75,130,176,.30);
}

/* HCX-23 slice 1: feed-menu toolbar glyph harmonization. Boxes already match
   (FA + custom hubiconset3 both 17px, vOff 0); the bespoke font's thinner ink
   reads lighter, so bump ONLY the custom glyphs (icon-vortex / icon-onemany /
   icon-manymany) to even the optical mass beside the FA Pro solids. Owner
   flagged the vortex (2026-07-19); decision = keep custom, harmonize sizing.
   Specificity 0,2,1 beats the base .feedMenuButton i (17px, hub.css ~5075). */
.feedMenuButton i[class^="icon-"],
.feedMenuButton i[class*=" icon-"] {
    font-size: 20px;
    line-height: 1;
    vertical-align: middle;
}

/* BUG-28 (2026-07-22): empty-state for the vortex "Suggested Hubs" discover
   fallback. When SOAP task 76 returns no rows, Hub.cs renders this tile inside
   .HubDiscoverContent instead of a visibly blank box. Hub-blue functional accent
   (#4b82b0) per the hub palette; centred inside the standard .hubFrmContainer card. */
.hdDiscoverEmpty {
    text-align: center;
    padding: 30px 20px;
}
.hdDiscoverEmpty .hdEmptyIcon {
    display: block;
    font-size: 34px;
    line-height: 1;
    color: #4b82b0;
    margin-bottom: 12px;
}
.hdDiscoverEmpty .hdEmptyTitle {
    font-weight: 700;
    font-size: 16px;
    color: #333333;
    margin-bottom: 5px;
}
.hdDiscoverEmpty .hdEmptyMsg {
    font-size: 13px;
    line-height: 1.4;
    color: #777777;
    max-width: 320px;
    margin: 0 auto;
}
.hdDiscoverEmpty .hdEmptyBtn {
    display: inline-block;
    margin-top: 16px;
    padding: 10px 22px;
    background: #4b82b0;
    color: #ffffff;
    border-radius: 50px;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, box-shadow .15s ease;
}
.hdDiscoverEmpty .hdEmptyBtn i {
    margin-right: 7px;
}
    .hdDiscoverEmpty .hdEmptyBtn:hover {
        background: #3a6b93;
        box-shadow: 0 3px 8px rgba(75, 130, 176, 0.35);
    }

/* FE-LINKZ (2026-07-23): #feedMenuContain #addHubPost sits at z-index:9999, ABOVE
   TinyMCE's dialog layer (.tox-tinymce-aux, vendor z-index:1300) — so the
   Insert/Edit-Link dialog opened BEHIND the composer and only its full-screen
   backdrop showed (a "white fade" that stacked on every click). Lift the aux
   dialog layer above the composer (still below the Swal shim at 10050). */
.tox.tox-silver-sink.tox-tinymce-aux { z-index: 10001 !important; }

/* 2026-07-23: give the report (hide) icon a little breathing room from the
   globe + follow icons in the post header meta row (owner request). */
.UserPost .postHead .metawrap .postHide,
.postReplyComment .postHead .postHide { margin-left: 12px; }