.bx-pwropa-button-container {
    width: 100%;
    text-align: center;
}
.bx-pwropa-item-container {
    text-align: center;
}
.bx-pwropa-button-container .bx-pwropa-button {
    color: var(--Color-text-primary, #262626);
    text-align: center;
    font-family: "BrandonGrotesque";
    font-size: 14px;
    font-style: normal;
    font-weight: 420;
    line-height: 17px; /* 121.429% */
    float:none;
    margin:0px auto;
    display: flex;
    border: 0.5px solid var(--color-cool-gray-950, #262626);
    width: 77px;
    padding: var(--Spacing-1, 4px) var(--Spacing-2, 8px);
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: var(--Spacing-System-spacing-sm, 10.637px);
    background: #FFF;
    box-shadow: 0px 5.018px 5.018px 0px rgba(0, 0, 0, 0.25);
}

.bx-pwropa-button-container .bx-pwropa-button:hover {
    border-radius: var(--Spacing-System-spacing-sm, 10.637px);
    border: 0.443px solid var(--Color-text-color-primary, #F60);
    background: var(--Color-surface-primary, #FFF0E5);
    box-shadow: 0px 3.546px 3.546px 0px rgba(0, 0, 0, 0.25);
    color: var(--Color-text-color-primary, #F60);
    font-family: "BrandonGrotesque";
    font-style: normal;
    font-weight: 450;
    line-height: normal;
    font-size: 14px;
}
.bx-pwropa-item-container {
    padding-bottom: 1.2rem;
    border-bottom: 0.443px solid var(--Color-text-primary, #E3E3E3);
}

#bx-popup-ajax-wrapper-bx-conn-by-popup-bx_recommended {
    position: fixed !important;
    top: 10% !important;
    .flickity-viewport{
        width: 100%;
    }
    .flickity-prev-next-button.previous { left: 0px; }
    .flickity-prev-next-button.next { right: 0px; }
    .flickity-button {
        position: absolute;
        background: hsla(0, 0%, 100%, 0.75);
        border: 1px solid #262626 !important;
        color: #262626 !important;
    }
    .flickity-prev-next-button {
        top: 50%;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        /* vertically center */
        transform: translateY(-50%);
    }
    .flickity-prev-next-button .flickity-button-icon {
        position: absolute;
        left: 20%;
        top: 20%;
        width: 60%;
        height: 60%;
        color:#262626;
    }
    .bx-recommended-close {
        position: absolute;
        top:2px;
        right: .5rem;
    }
    .bx-recommended-title {
        margin-bottom: 8px;
        margin-top: 12px;
        color: #262626 !important;
    }
    .bx-popup-content {
        padding: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
        border: 0;
    }
    .bx-popup-content-indent {
        padding: 0 1rem 1rem 1rem ;
    }
    .bx-def-media-tablet-hide {
        display: block !important;
    }
    .bx-popup.bx-popup-trans.bx-popup-border.bx-popup-color-bg {
        height: 72vh;
        overflow-y: auto;
    }
    .bx-popup-full-screen {
        max-width: 1280px !important;
    }
    .bx-popup-close-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
        .title {
            text-align: center;
            .text-lg {
                color: var(--Color-text-color-primary, #7728DD);
                text-align: center;
                font-family: "BrandonGrotesque";
                font-size: 22.582px;
                font-style: normal;
                font-weight: 450;
                line-height: normal;
            }
            .text-des {
                margin-top: .5rem;
                color: var(--Colors-Base-base-gray, #202020);
                text-align: center;
                font-family: "BrandonGrotesque";
                font-size: 14px;
                font-style: normal;
                font-weight: 390;
                line-height: 15px; /* 107.143% */
            }
            
          }
              
      
        .bx-popup-element-close {
            justify-content: flex-end;
        }
      }
      .bx-def-font-h2 {
        color: var(--Color-text-primary, #262626);
        text-align: center;
        /* H3 */
        font-family: "BrandonGrotesque";
        font-size: 16px;
        font-style: normal;
        font-weight: 450;
        line-height: normal;
      }



    .bx-def-box {
        border-radius: var(--Spacing-3, 12px);
        background: var(--Color-module-background-primary, #FFF);
        
        /* shadow-base */
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
        padding: 0px !important;
    }
    .bx-base-groups-unit-with-cover{
        .bx-base-pofile-unit-title {
            max-width: 180px;
        }
    
        .bx-db-header .bx-db-title {
            color: var(--Colors-Primary-primary-500, #7728DD);
            font-family: "BrandonGrotesque";
            font-size: 18px;
            font-style: normal;
            font-weight: 450;
            line-height: normal;
        }
    
        
        .bx-base-pofile-unit-groups-warpper {
            padding: var(--Spacing-2, 8px) var(--Spacing-4, 16px);
            align-items: center;
            gap: var(--Spacing-System-spacing-xs, 8px);
            align-self: stretch;
            justify-content: center;
        }
    
        .sys-action-counter-profile .bx-def-icon-size {
            width: 16px;
            height: 16px;
        }
        
        .bx-base-pofile-unit-title a {
            color: var(--Color-text-primary, #262626);
            font-family: "BrandonGrotesque";
            font-size: 16.183px;
            font-style: normal;
            font-weight: 450;
            line-height: normal;
        }

        ul#bx-groups-snippet-meta {
            li{
                display:flex;
                flex-wrap:wrap;
                justify-content:center;
                align-items:center;
                text-align:center;
            }
    
            .bx-menu-item-members {
                justify-content: flex-start;
            }
              
            .bx-menu-item-join {
                justify-content: flex-end;
                right:20px;
                position: absolute;
            }
        
            li.bx-menu-item-privacy {
                display: none;
            }
        }
    
        .bx-base-pofile-unit-with-cover div.bx-base-general-unit-meta span.bx-base-profile-unit-meta-item-custom {
            padding: 0;
            width: 100%;
            margin-top: -.5rem;
        }
    
        .bx-menu-item-button a, span.bx-base-profile-unit-meta-item-custom a{
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 3.546px;
            flex: 1 0 0;
            border-radius: var(--Spacing-System-spacing-sm, 10.637px);
            border: 0.443px solid var(--Color-text-primary, #262626);
            background: #FAFAFA;
            font-family: "BrandonGrotesque";
            font-size: 14px;
            font-style: normal;
            font-weight: 450;
            line-height: normal;
            color:#262626;
        }
    
        ul li.bx-menu-item:hover {
            background-color: transparent !important;
        }
    
        
        #bx-groups-snippet-meta  .bx-menu-item-button a:hover, span.bx-base-profile-unit-meta-item-custom a:hover{
            border-radius: var(--Spacing-System-spacing-sm, 10.637px);
            border: 0.443px solid var(--Color-text-color-primary, #7728DD);
            background: var(--Color-surface-primary, #F9F4FF);
            box-shadow: 0px 3.546px 3.546px 0px rgba(0, 0, 0, 0.25);
            color: var(--Color-text-color-primary, #7728DD);
            font-family: "BrandonGrotesque";
            font-style: normal;
            font-weight: 450;
            line-height: normal;
            font-size: 14px;
        }
    
    }

    /* org */

    .bx-base-cover-orgs-new {
        .bx-base-pofile-unit-org-warpper {
            display: flex;
            padding: var(--Spacing-2, 8px) var(--Spacing-4, 16px);
            flex-direction: column;
            justify-content: flex-end;
            align-items: center;
            gap: var(--Spacing-System-spacing-xs, 8px);
            align-self: stretch;
        }

        #bx-organizations-snippet-meta {
            li{
                width: 100%;  
            }
            width: 100%;
            .bx-menu-item span{
                width: 100%;
            }
        }


        .bx-menu-item a {
    
            font-family: "BrandonGrotesque";
            color: var(--Color-button-label-primary, #FFF);
            font-size: 16px;
            font-style: normal;
            font-weight: 450;
        }

        .bx-menu-item-button .bx-btn, .bx-menu-item-send-message-new a{
            display: flex;
            padding: var(--Spacing-1, 4px) var(--Spacing-2, 8px);
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border-radius: var(--Spacing-3, 12px);
            border: 0.5px solid var(--color-cool-gray-950, #262626);
            background: var(--color-cool-gray-50, #FAFAFA);
            color: var(--color-cool-gray-950, #262626);
            font-family: "BrandonGrotesque", sans-serif;
            font-size: 14px;
            font-style: normal;
            font-weight: 450;
            line-height: normal;
            text-decoration: none;
        } 

        .bx-menu-item-join-new .bx-btn:hover,.bx-menu-item-join .bx-btn:hover, .bx-menu-item-leave-new .bx-btn:hover, .bx-menu-item-send-message-new a:hover, .bx-menu-item-leave .bx-btn:hover  {
            border-radius: var(--Spacing-3, 12px);
            border: 0.5px solid var(--Color-text-color-primary, #7728DD);
            background: var(--Tags-tag-background-accent, #F9F4FF);
            box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
            color: var(--Color-text-color-primary, #7728DD);
            text-decoration: none;
        } 

        .bx-menu-item-follow .bx-btn:hover, .bx-menu-item-unsubscribe .bx-btn:hover, .bx-menu-item-subscribe .bx-btn:hover{
            border-radius: var(--Spacing-3, 12px);
            color: var(--color-orange-500, #F60);
            border: 0.5px solid var(--Color-accent-orange, #F60);
            background: var(--Colors-Secondary-secondary-50, #FFF0E5);
        }

        .bx-menu-item-following .bx-btn:hover  {
            border-radius: var(--Spacing-System-radius-sm, 8px);
            border: 0.5px solid var(--Color-text-primary, #262626);
            background: var(--Tags-tag-background-hover, #E3E3E3);
        }

        .bx-menu-item-button {
            border-radius: var(--Spacing-3, 12px);
        } 

        .bx-base-general-unit-meta .bx-menu-item-members-new, .bx-menu-item-members, .bx-menu-item-subscribers-new  {
            -webkit-flex: 0 0 auto !important;
            flex: 0 0 auto !important;
            margin: 0 0 0 0rem !important;
        }

        .bx-base-pofile-unit-org {
            padding: var(--Spacing-2, 8px) var(--Spacing-1, 4px);
            justify-content: center;
            align-items: center;
            gap: var(--Spacing-System-spacing-xs, 8px);
            align-self: stretch;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .bx-base-pofile-unit-title a{
            color: var(--colors-gray-neutral-neutral-950, #262626);
            /* H3 */
            font-family: "BrandonGrotesque";
            font-size: 16px;
            font-style: normal;
            font-weight: 450;
            line-height: normal;
            max-width: 260px;
        }

        .bx-base-pofile-unit-title a:hover{
            color: var(--colors-gray-neutral-neutral-950, #262626);
        }

        .bx-base-pofile-unit-org .info{
            text-overflow: ellipsis;
            width: 80%;
            a{
                display: block;
                text-align: left;
            }
        }
        .h_131{
            height: 131px;
        }

        .bx-logged_days {
            color: var(--colors-gray-neutral-neutral-700, #6E6E6E);
        
            /* Subtitle (Module) */
            font-family: "BrandonGrotesque";
            font-size: 14px;
            font-style: normal;
            font-weight: 390;
            line-height: 12px; /* 114.286% */
        }

        .bx-menu-item:hover {
            background-color: transparent;
        }

        .bx-def-box {
            padding: 0px !important;
        }

        .bx-btn  {
            border-radius: var(--Spacing-System-radius-sm, 12px);
            padding-top: 9px;
        }

        .bx-def-ava-size {
            height: 2.5rem;
            width: 2.5rem;
        }
    }

    /*person*/
    .bx-persons-wrapper {
        max-width: 840px;
        margin-left: 165px;
        margin-right: 165px;
        
    }
    .bx-base-pofile-unit-recommended {
        -webkit-flex: 0 0 14.25%;
        -ms-flex: 0 0 14.25%;
        flex: 0 0 14.25%;
        width: calc(14.25%);
        border-bottom: 1px solid #e5e7eb;
        min-width: 170px;
        /* .flickity-viewport {
            max-width: 650px !important;
            margin: 0 auto !important;
            display: flex !important;
            padding-left: 160px !important;
            padding-right: 160px !important;
            display: flex !important;
            gap: 20px !important;
        } */
        .bx-base-pofile-unit-cnt {
            max-width: 145px !important;
            box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) !important;
          }
        
          .persons-friends-item-top .bx-def-thumb-size, .persons-friends-item-top .bx-def-ava-size {
            height: 130px !important;
            width: 100% !important;
          }
        
          .bx-def-box {
            padding: 0;
          }
        
          .persons-friends-item-center {
            padding: 0.2rem;
            text-align: center;
          }
        
          .persons-friends-item-user-info {
            display: flex;
            margin-bottom: 0.2rem;
            width: 100%;
          }
  
          .persons-friends-item-friends_mutual{
            color: var(--colors-gray-neutral-neutral-700, #6E6E6E);
            font-family: "BrandonGrotesque";
            font-size: 12px;
            font-style: normal;
            font-weight: 390;
            line-height: 11px; /* 122.222% */
          }
        
          .persons-friends-item-friends_mutual .bx-base-general-unit-meta-div {
            display: none;
          }
        
          .persons-friends-item-user-info-l-info-username {
            width: 100%;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding-left: 8px;
            padding-right: 8px;
          }
          .persons-friends-item-user-info-l-info-username a {
            color: #7728dd;
            font-weight: 450;
            font-size: 1rem;
            text-transform: capitalize;
          }

          #bx-persons-snippet-meta {
            li.bx-menu-item {
                justify-content: center;
                flex-wrap: nowrap;
            }
            li.bx-menu-item-friends {
                display: none;
            }
            .bx-base-profile-unit-meta-item {
                width: auto !important;
            }

            .bx-menu-item-button .bx-btn{
                padding: var(--Spacing-1, 4px) var(--Spacing-2, 8px);
                flex-direction: column;
                justify-content: center;
                align-items: center;
                border-radius: var(--Spacing-System-radius-sm, 8px);
                border: 0.5px solid var(--color-cool-gray-950, #262626);
                background: var(--color-cool-gray-50, #FAFAFA);
                color: var(--color-cool-gray-950, #262626);
                font-family: "BrandonGrotesque", sans-serif;
                font-size: 14px;
                font-style: normal;
                font-weight: 450;
                line-height: normal;
            } 

            .bx-menu-item-button:nth-of-type(odd) .bx-btn:hover,
            li.bx-menu-item-button.bx-menu-item-member-befriend .bx-btn:hover {
              border-radius: var(--Spacing-System-radius-sm, 8px);
              border: 0.5px solid var(--Color-text-color-primary, #7728DD);
              background: var(--Tags-tag-background-accent, #F9F4FF);
              box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
              color: var(--Color-text-color-primary, #7728DD);
          } 
          
          .bx-menu-item-button:nth-of-type(even) .bx-btn:hover , 
          li.bx-menu-item-button.bx-menu-item-unsubscribe .bx-btn:hover,
          li.bx-menu-item-button.bx-menu-item-member-subscribe .bx-btn:hover,
          li.bx-menu-item-button.bx-menu-item-unfriend .bx-btn:hover {
              border-radius: var(--Spacing-System-radius-sm, 8px);
              color: var(--color-orange-500, #F60);
              border: 0.5px solid var(--Color-accent-orange, #F60);
              background: #FFF0E5;
          }
          }
  
    }
    
}

@media (max-width: 640px) {
    #bx-popup-ajax-wrapper-bx-conn-by-popup-bx_recommended {
        .bx-base-organization-unit-with-cover {
            width: 100%;
        }

        .bx-base-groups-unit-with-cover {
            width: 100%;
        }

        .bx-persons-wrapper {
            margin-left: 20% !important;
            margin-right: 20% !important;
            padding: 0 2rem;
        }

        .bx-organizations-wrapper {
            margin-left: 8% !important;
            margin-right: 8% !important;
            padding: 0 2rem;
        }
    }

    #bx-popup-ajax-wrapper-bx-conn-by-popup-bx_recommended {
        .bx-base-pofile-unit-with-cover {
            width: 100%;
        }

        .bx-base-pofile-unit-cnt {
            .flex.flex-row.justify-between {
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }
        }
    }
}

#bx-popup-ajax-wrapper-bx-conn-by-popup-bx_recommended {
    .bx-base-pofile-unit-recommended {
        border-bottom:none;
    }
}

#bx-popup-ajax-wrapper-bx-conn-by-popup-bx_recommended  .bx-popup-content.overflow-auto {
    overflow: hidden;
}

@media (max-width: 425px) {
    #bx-popup-ajax-wrapper-bx-conn-by-popup-bx_recommended {
        .bx-persons-wrapper {
            margin-left: 20% !important;
            margin-right: 16% !important;
            padding: 0 1.5rem;
        }

        .bx-organizations-wrapper {
            margin-left: 8% !important;
            margin-right: 8% !important;
            padding: 0 1rem;
        }
    }
}

@media (max-width: 375px) {
    #bx-popup-ajax-wrapper-bx-conn-by-popup-bx_recommended {
        .bx-persons-wrapper {
            margin-left: 20% !important;
            margin-right: 10% !important;
            padding: 0 1rem;
        }

        .bx-organizations-wrapper {
            margin-left: 4% !important;
            margin-right: 0 !important;
            padding: 0 1rem;
        }

        .bx-groups-wrapper {
            margin-left: 0;
            margin-right: -5%;
            padding: 0 1rem;
        }
    }
}

@media (max-width: 320px) {
    #bx-popup-ajax-wrapper-bx-conn-by-popup-bx_recommended {
        .bx-persons-wrapper {
            margin-left: 12% !important;
            margin-right: 0 !important;
            padding: 0 1rem;
        }

        .bx-organizations-wrapper {
            margin-left: 0 !important;
            margin-right: -5% !important;
            padding-left: 1rem;
        }

        .bx-groups-wrapper {
            margin-left: 0 !important;
            margin-right: -5% !important;
            padding: 0 1rem;
        }
    }
}