/*--------------------------------------------------------------
This is your custom stylesheet.

Add your own styles here to make theme updates easier.
To override any styles from other stylesheets, simply copy them into here and edit away.

Make sure to respect the media queries! Otherwise you may
accidentally add desktop styles to the mobile layout.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
--------------------------------------------------------------*/

.settings-input-wrapper {
    position: relative;
}

.settings-input::placeholder {
    color: #333;
}

.settings-input-button {
    position: absolute;
    right: 8px;
    top: 5px;
}

.settings-input-button:disabled {
    background: gray !important;
    cursor: default !important;
}

.meetings-list {
    list-style: none;
    margin: 0;
    padding: 10px 12px;
    font-size: 14px;
    color: #253858;
    line-height: 20px;
    text-align: left;
    text-overflow: ellipsis;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: auto;
    width: 100%;
}

.meetings-list .item.with-click-handler {
    cursor: pointer;
}

.meetings-list .item:first-child {
    margin-top: 0;
}

.meetings-list .item {
    background: #fff;
    box-sizing: border-box;
    border-radius: 4px;
    display: inline-flex;
    margin: 4px 4px 4px 4px;
    min-height: 60px;
    width: calc(100% - 8px);
    word-break: break-word;
    display: flex;
    flex-direction: row;
    text-align: left;
}

.meetings-list .item:hover {
    background: #eee;
}

.meetings-list .item .right-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-grow: 1;
    padding-left: 16px;
    padding-top: 13px;
    position: relative;
}

.meetings-list .item .left-column {
    order: -1;
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    padding-left: 16px;
    padding-top: 13px;
}

.meetings-list .item .title {
    font-weight: 500;
    margin-bottom: 4px;
}

.meetings-list .item .subtitle {
    color: #5e6d7a;
    font-weight: 400;
}

.meetings-list .item .actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 0;
    margin-right: 16px
}

.meetings-list .delete-meeting {
    display: block;
    margin-right: 16px;
    position: absolute;
}


.meetings-list .item:hover .delete-meeting {
    display: block;
}

.fst_login_wrapper form#loginform .input {
    margin-top: 10px;
    padding: 10px;
    width: 100%;
}

.fst_login_wrapper input#wp-submit {
    background: #0275ff;
    border: 0;
    border-radius: 5px;
    color: #fff;
    width: 100%;
}

.bp-single-message-content a {
    color: #009FFD;
}

.gap-2 {
    gap: 2em;
}

/**
 * MEMBERS
 */

@media screen and (max-width: 1420px) {
    body.has-sidebar .buddypress-wrap .grid.bp-list.members-list>li {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media screen and (max-width: 1145px) {
    body.has-sidebar .buddypress-wrap .grid.bp-list.members-list>li {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media screen and (max-width: 1240px) {
    body:not(.has-sidebar) .buddypress-wrap .grid.bp-list.members-list>li {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media screen and (max-width: 968px) {
    body:not(.has-sidebar) .buddypress-wrap .grid.bp-list.members-list>li {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

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

    body:not(.has-sidebar) .buddypress-wrap .grid.bp-list.members-list>li,
    body.has-sidebar .buddypress-wrap .grid.bp-list.members-list>li {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

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

    body:not(.has-sidebar) .buddypress-wrap .grid.bp-list.members-list>li,
    body.has-sidebar .buddypress-wrap .grid.bp-list.members-list>li {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}


@media screen and (min-width: 55em) {
    body:not(.has-sidebar) .buddypress-wrap .grid.bp-list.groups-list {
        grid-template-columns: repeat(auto-fit, minmax(275px, 100%));
    }

    body:not(.has-sidebar) .buddypress-wrap .grid.bp-list>li {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media screen and (min-width: 75em) {
    body:not(.has-sidebar) .buddypress-wrap .grid.bp-list.groups-list {
        grid-template-columns: repeat(auto-fit, minmax(275px, 100%));
    }

    body:not(.has-sidebar) .buddypress-wrap .grid.bp-list>li {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media screen and (min-width: 32em) {
    .buddypress-wrap .grid.bp-list>li {
        flex:0 0 100%;
        max-width: 100%
    }
}

@media screen and (min-width: 75em) {
    .buddypress-wrap .grid.bp-list>li {
        flex:0 0 100%;
        max-width: 100%
    }
}

body:not(.logged-in) #members-list.item-list.grid .list-wrap.primary-button.no-secondary-buttons {
    padding-bottom: 15px;
}

#members-list.item-list.grid .list-wrap.primary-button.no-secondary-buttons {
    padding-bottom: 15px;
}

#members-list.item-list.grid .list-wrap.primary-button.no-secondary-buttons .primary-action {
    bottom: auto !important;
}

#members-list .member-action {
    grid-column: 3 / 4;
    grid-row: 2 / 3;

    display: flex;
    flex-direction: column;
    gap: 10px;
}

#members-list .member-action .generic-button {
    margin: 0;
}

@media (max-width: 782px) {
    #members-list .member-action {
        grid-column: 1 / 3;
        grid-row: 4 / 5;

        /* flex-direction: row; */
    }

    #members-list .member-action > .primary-action {
        flex-grow: 1;
    }

    #members-list .member-action > .primary-action:last-child {
        display: none;
    }
}

/* #members-list .member-action > .primary-action:first-child > .generic-button {
    margin-top: 0;
}

#members-list .member-action > .primary-action:last-child > .generic-button {
    margin-bottom: 0;
} */

#members-list > li.item-entry {
    display: flex;
    gap: 10px;
    padding: 0 !important;
}

#members-list .list-wrap-inner {
    display: grid;
    grid-template-columns: 150px 1fr 250px;
    grid-template-rows: auto auto;
    gap: 10px 25px;
    width: 100%;
}

@media (max-width: 782px) {
    #members-list .list-wrap-inner {
        grid-template-columns: 80px 1fr;
        grid-template-rows: auto auto;
    }
}

#members-list .member-main {
    width: 100%;
}

#members-list .member-video {
    flex: 0 0 240px;
    padding: 0 !important;
    overflow: hidden !important;
}

@media (max-width: 782px) {
    #members-list .member-video {
        display: none;
    }
}

    #members-list .member-novideo {
        border: none !important;
        box-shadow: none !important;
    }

    #members-list .member-video-thumb {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        background-size: contain;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        background-color: black !important;
        cursor: pointer;
    }

    #members-list .member-video-thumb img {
        width: 40px;
    }

    #members-list .member-video-thumb .bb-icon-play {
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        background-color: rgba(0, 0, 0, .3);
        border-radius: 999px;
        width: 30px;
        height: 30px;
        font-size: 1.2em;
    }

#buddypress .members-list>li .primary-action .generic-button {
    margin: 0;
}

#buddypress .members-list>li .primary-action .generic-button>.send-message {
    background-color: var(--bb-primary-button-background-regular);
    color: var(--bb-primary-button-text-regular);
    border: 1px solid var(--bb-primary-button-border-regular);
}

#buddypress .members-list>li .primary-action .generic-button>.send-message:hover {
    background-color: var(--bb-primary-button-background-hover);
    color: var(--bb-primary-button-text-hover);
    border-color: var(--bb-primary-button-border-hover)
}

#buddypress .members-list>li .primary-action .generic-button>* {
    background-color: #fff;
}

#buddypress .members-list>li .primary-action .generic-button.disabled > * {
    color: #aeaeae;
    border-color: #aeaeae;
    cursor: default;
}

#buddypress .members-list>li .primary-action .generic-button.disabled:hover > * {
    background-color: transparent;
}


#members-list .member {
    flex: 1 1 auto;
}

#members-list .member-avatar {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
}

@media (max-width: 782px) {
    #members-list .list-wrap-inner {
        grid-column: 1 / 2;
        grid-row: 1 / 3;
    }
}

#members-list .member-avatar>a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

/* #members-list .member-avatar img {
            width: 185px;
            height: 185px;
        } */

#members-list .member-avatar .member-status {
    width: 16px;
    height: 16px;
    top: 14px;
    right: 14px;
}

@media (max-width: 782px) {
    #members-list .member-avatar .member-status {
        width: 14px;
        height: 14px;
        top: 2px;
        right: 2px;
    }
}

#members-list .member-header-wrapper {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

#members-list .member-header-wrapper .item-meta.last-activity {
    text-align: left;
    margin-bottom: 0;
}

#member-list .member-subheader {
    display: flex;
    flex-direction: row;
    gap: 12px;
}

#members-list .member-header {
    display: flex;
    flex-direction: row;
    gap: 12px;
}

    #members-list .member-name > a {
        font-weight: 600;
    }

    #members-list .member-name > a:hover {
        font-weight: 600 !important;
    }

    #members-list .member-achievements {

    }

    #members-list .member-achievements .gamipress-buddypress-achievement {
        border: 1px solid rgb(202, 202, 202);
        border-radius: 5px;
        width: 20px;
        height: 20px;
        display: inline-block;
    }

    #members-list .member-achievements .gamipress-buddypress-achievement-thumbnail {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #members-list .member-achievements .gamipress-achievement-thumbnail {
        width: 80%;
        height: 80%;
    }

    #members-list .gamipress-buddypress-proof-label {
        display: none;
    }

    #members-list .member-achievements .gamipress-buddypress-user-details {
        display: flex;
        flex-direction: row-reverse;
        gap: 10px;
    }

    #members-list .gamipress-buddypress-points {
        font-size: .8em;
        display: flex;
        gap: 10px;
    }

    #members-list .gamipress-points-thumbnail {
        width: 18px;
        vertical-align: text-bottom;
    }

#members-list .member-type {
    margin: 0 !important;
    float: none;
    text-align: left;
}

#members-list .member-info {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    font-size: .9em;
    line-height: 1.8em;
}

@media (max-width: 782px) {
    #members-list .member-info {
        order: 3;
        grid-column: 1 / 3;
        grid-row: 3 / 4;
    }
}

#members-list .member-orders {
    display: flex;
    gap: 10px;
}

#members-list .member-icon {
    display: inline-block;
    vertical-align: middle;
    width: 15px;
}

#members-list .bb-icon-l {
    font-size: 1.2em
}

#members-list .member-right {
    flex: 0 0 250px;
}

    #members-list .member-rating-price {
        grid-column: 3 / 4;
        grid-row: 1 / 2;
        display: flex;
        gap: 20px;
    }

    @media (max-width: 782px) {
        #members-list .member-rating-price {
            order: 2;
            grid-column: 2 / 3;
            grid-row: 2 / 3;
        }
    }

#members-list.item-list.grid .list-wrap.primary-button .primary-action {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
}

#members-list .primary-action .generic-button > * {
    margin-bottom: 0;
}

#members-list.item-list.grid .list-wrap.primary-button.secondary-buttons {
    padding-bottom: 15px;
}

#members-list.item-list.grid .list-wrap.secondary-buttons {
    padding-bottom: 15px;
}

#members-list .primary-action .generic-button {
    text-wrap: nowrap;
}

#members-list .member-rating {
    display: flex;
    gap: 8px;
    font-size: 1.25em;
    font-weight: 600;
}

#members-list .member-rating__icon {
    display: inline-block;
    vertical-align: text-top;
    width: 20px;
}

#members-list .bb-icon-star-fill {
    font-size: 1.1em;
}

#members-list .member-reviews {
    font-size: .8em;
    color: #7f7f7f;
}

#members-list .member-reviews__link {
    color: inherit;
    text-decoration: none;
}

#members-list .member-reviews__link:hover {
    text-decoration: underline;
}

#members-list .member-price {
    font-size: 1.25em;
    font-weight: 600;
}

#members-list .member-lesson {
    font-size: .8em;
    color: #7f7f7f;
}

body.members #primary {
    max-width: 100% !important;
}

#members_intro {
    font-size: 1.2em;
    margin-bottom: 1.2em;
}

.members_skill_title {
    display: inline-block;
}

/**
 * DROPDOWN WITH CHECKBOXES
 */

.multi-select-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    position: relative;

    height: 60px;

    font-size: 0.875em;
    padding: 0.0em 0.6em;
    min-width: 0;
    white-space: nowrap;
    /* overflow: hidden; */
    text-overflow: ellipsis;
    vertical-align: -0.5em;
    background-color: #fff;
    border: 1px solid rgb(214, 217, 221);
    border-radius: 4px;
    cursor: pointer;
}

.multi-select-wrapper:hover,
.multi-select-wrapper.active {
    border-color: #2e2e2e;
    box-shadow: 0px 0px 4px 0px rgba(180, 180, 180, 0.849);
    z-index: 1000;
}


    .overlay {
        background: rgba(0, 0, 0, .3);
        bottom: 0;
        left: 0;
        position: fixed;
        right: 0;
        top: 0;
        z-index: 999;
    }

    .multi-select-wrapper > label {
        color: #a6a6a6;
        position: relative;
        margin-bottom: 0;
        max-width: 100%;
        overflow: hidden;
    }

    .multi-select-clear {
        display: block;
        position: absolute;
        right: 8px;
        top: 0;
        font-size: 1.5em;
        cursor: pointer;
        z-index: 100;
    }

    @media (max-width: 782px) {
        .multi-select-wrapper,
        .members-subfilter {
            display: none;
        }

        .multi-select-wrapper:first-child {
            display: flex;
        }
    }

.multi-select-container {
    display: inline-block;
    position: relative;
}

    .multi-select-container > span {
        display: inline-block;
        width: 100%;
        overflow: hidden;
    }

.multi-select-menu {
    position: absolute;
    left: -9px;
    top: 33px;
    z-index: 1000;
    float: left;
    min-width: 100%;
    background: #fff;
    /* margin: 1em 0; */
    border: 1px solid #aaa;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    display: none;
}

.multi-select-menuitem {
    display: block;
    font-size: 0.875em;
    padding: 0.3em 1em 0.3em 30px;
    white-space: nowrap;
    margin: 0;
}

    .multi-select-menuitem:hover {
        background: #1967d2;
        color: white;
    }

.multi-select-legend {
    font-size: 0.875em;
    font-weight: bold;
    padding-left: 10px;
}

/* .multi-select-legend + .multi-select-menuitem {
    padding-top: 0.25rem;
}

.multi-select-menuitem + .multi-select-menuitem {
    padding-top: 0;
} */

.multi-select-presets {
    border-bottom: 1px solid #ddd;
}

.multi-select-menuitem input {
    position: absolute;
    margin-top: 0.5em;
    margin-left: -20px;
}

.multi-select-button {
    display: inline-block;
    font-size: 0.875em;
    padding: 0.2em 0.6em;
    max-width: 16em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: -0.5em;
    background-color: #fff;
    border: 1px solid #aaa;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    cursor: default;
}

.multi-select-button:after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0.4em 0.4em 0 0.4em;
    border-color: #999 transparent transparent transparent;
    margin-left: 0.4em;
    vertical-align: 0.1em;
}

.multi-select-container--open .multi-select-menu {
    display: block;
}

.multi-select-container--open .multi-select-button:after {
    border-width: 0 0.4em 0.4em 0.4em;
    border-color: transparent transparent #999 transparent;
}

.multi-select-container--positioned .multi-select-menu {
    /* Avoid border/padding on menu messing with JavaScript width calculation */
    box-sizing: border-box;
}

.multi-select-container--positioned .multi-select-menu label {
    /* Allow labels to line wrap when menu is artificially narrowed */
    white-space: normal;
}




.demo-example > label {
    display: block;
    margin-bottom: 0.5em;
    font-weight: bold;
}

.position-menu-within {
    width: 18em;
    height: 15em;
    background: #eee;
    overflow: auto;
    padding: 2em 0 0 2em;
}

.modal-example .multi-select-menu {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: 50%;
    min-width: 0;
    overflow: auto;
    border: none;
    border-radius: 0.3em;
    box-shadow: 0 1em 3em rgba(0,0,0,0.4);
}

.modal-example .multi-select-menuitem {
    font-size: 1em;
    padding: 1.5em 2.5em 1.5em 3.5em;
}

.modal-example .multi-select-menuitem + .multi-select-menuitem {
    padding-top: 0;
}

.modal-example .multi-select-menuitem input {
    margin-left: -2.5em;
}

.multi-select-modal {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.4);
    display: none;
}

.multi-select-container--open .multi-select-modal {
    display: block;
}

#filter-rate .multi-select-menu {
    width: 16em !important;
    height: 5em;
    padding: 2em;
}

#filter-keywords,
#filter-keywords:focus {
    padding: 0;
    border: none;
    box-shadow: none !important;
    margin: 0;
    height: auto;
}

#member-filters {
    margin: 0;
    display: flex;
    gap: 1.5em;
    width: 100%;
}


@media (max-width: 782px) {
    #member-filters {
        gap: 10px;
    }
}

.members-nav {
    font-weight: bold;
}

.members .bp-navs ul li.selected {
    display: flex;
}

.members .bp-navs ul li.selected .count {
    background: transparent;
    border: none;
    font-size: inherit;
    padding: 0 .5em 0 0;
    margin: 0;
}

.members .bp-navs.bp-subnavs {
    font-size: inherit;
}

/**
 * NoUISlider
 */

/* Functional styling;
 * These styles are required for noUiSlider to function.
 * You don't need to change these rules to apply your design.
 */

.noUi-target,
.noUi-target * {
-webkit-touch-callout: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-select: none;
-ms-touch-action: none;
touch-action: none;
-ms-user-select: none;
-moz-user-select: none;
user-select: none;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.noUi-target {
position: relative;
}
.noUi-base,
.noUi-connects {
width: 100%;
height: 100%;
position: relative;
z-index: 1;
}
/* Wrapper for all connect elements.
*/
.noUi-connects {
overflow: hidden;
z-index: 0;
}
.noUi-connect,
.noUi-origin {
will-change: transform;
position: absolute;
z-index: 1;
top: 0;
right: 0;
height: 100%;
width: 100%;
-ms-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
-webkit-transform-style: preserve-3d;
transform-origin: 0 0;
transform-style: flat;
}
/* Offset direction
*/
.noUi-txt-dir-rtl.noUi-horizontal .noUi-origin {
left: 0;
right: auto;
}
/* Give origins 0 height/width so they don't interfere with clicking the
* connect elements.
*/
.noUi-vertical .noUi-origin {
top: -100%;
width: 0;
}
.noUi-horizontal .noUi-origin {
height: 0;
}
.noUi-handle {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
}
.noUi-touch-area {
height: 100%;
width: 100%;
}
.noUi-state-tap .noUi-connect,
.noUi-state-tap .noUi-origin {
-webkit-transition: transform 0.3s;
transition: transform 0.3s;
}
.noUi-state-drag * {
cursor: inherit !important;
}
/* Slider size and handle placement;
*/
.noUi-horizontal {
height: 18px;
}
.noUi-horizontal .noUi-handle {
width: 34px;
height: 28px;
right: -17px;
top: -6px;
}
.noUi-vertical {
width: 18px;
}
.noUi-vertical .noUi-handle {
width: 28px;
height: 34px;
right: -6px;
bottom: -17px;
}
.noUi-txt-dir-rtl.noUi-horizontal .noUi-handle {
left: -17px;
right: auto;
}
/* Styling;
* Giving the connect element a border radius causes issues with using transform: scale
*/
.noUi-target {
background: #FAFAFA;
border-radius: 4px;
border: 1px solid #D3D3D3;
box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB;
}
.noUi-connects {
border-radius: 3px;
}
.noUi-connect {
background: #3FB8AF;
}
/* Handles and cursors;
*/
.noUi-draggable {
cursor: ew-resize;
}
.noUi-vertical .noUi-draggable {
cursor: ns-resize;
}
.noUi-handle {
border: 1px solid #D9D9D9;
border-radius: 3px;
background: #FFF;
cursor: default;
box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB;
}
.noUi-active {
box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB;
}
/* Handle stripes;
*/
.noUi-handle:before,
.noUi-handle:after {
content: "";
display: block;
position: absolute;
height: 14px;
width: 1px;
background: #E8E7E6;
left: 14px;
top: 6px;
}
.noUi-handle:after {
left: 17px;
}
.noUi-vertical .noUi-handle:before,
.noUi-vertical .noUi-handle:after {
width: 14px;
height: 1px;
left: 6px;
top: 14px;
}
.noUi-vertical .noUi-handle:after {
top: 17px;
}
/* Disabled state;
*/
[disabled] .noUi-connect {
background: #B8B8B8;
}
[disabled].noUi-target,
[disabled].noUi-handle,
[disabled] .noUi-handle {
cursor: not-allowed;
}
/* Base;
*
*/
.noUi-pips,
.noUi-pips * {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.noUi-pips {
position: absolute;
color: #999;
}
/* Values;
*
*/
.noUi-value {
position: absolute;
white-space: nowrap;
text-align: center;
}
.noUi-value-sub {
color: #ccc;
font-size: 10px;
}
/* Markings;
*
*/
.noUi-marker {
position: absolute;
background: #CCC;
}
.noUi-marker-sub {
background: #AAA;
}
.noUi-marker-large {
background: #AAA;
}
/* Horizontal layout;
*
*/
.noUi-pips-horizontal {
padding: 10px 0;
height: 80px;
top: 100%;
left: 0;
width: 100%;
}
.noUi-value-horizontal {
-webkit-transform: translate(-50%, 50%);
transform: translate(-50%, 50%);
}
.noUi-rtl .noUi-value-horizontal {
-webkit-transform: translate(50%, 50%);
transform: translate(50%, 50%);
}
.noUi-marker-horizontal.noUi-marker {
margin-left: -1px;
width: 2px;
height: 5px;
}
.noUi-marker-horizontal.noUi-marker-sub {
height: 10px;
}
.noUi-marker-horizontal.noUi-marker-large {
height: 15px;
}
/* Vertical layout;
*
*/
.noUi-pips-vertical {
padding: 0 10px;
height: 100%;
top: 0;
left: 100%;
}
.noUi-value-vertical {
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
padding-left: 25px;
}
.noUi-rtl .noUi-value-vertical {
-webkit-transform: translate(0, 50%);
transform: translate(0, 50%);
}
.noUi-marker-vertical.noUi-marker {
width: 5px;
height: 2px;
margin-top: -1px;
}
.noUi-marker-vertical.noUi-marker-sub {
width: 10px;
}
.noUi-marker-vertical.noUi-marker-large {
width: 15px;
}
.noUi-tooltip {
display: block;
position: absolute;
border: 1px solid #D9D9D9;
border-radius: 3px;
background: #fff;
color: #000;
padding: 5px;
text-align: center;
white-space: nowrap;
}
.noUi-horizontal .noUi-tooltip {
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
left: 50%;
bottom: 120%;
}
.noUi-vertical .noUi-tooltip {
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
top: 50%;
right: 120%;
}
.noUi-horizontal .noUi-origin > .noUi-tooltip {
-webkit-transform: translate(50%, 0);
transform: translate(50%, 0);
left: auto;
bottom: 10px;
}
.noUi-vertical .noUi-origin > .noUi-tooltip {
-webkit-transform: translate(0, -18px);
transform: translate(0, -18px);
top: auto;
right: 28px;
}

#filter-rate-slider {
    height: 2px;
}

#filter-rate-slider .noUi-connect {
    background: #000;
}

#filter-rate-slider .noUi-handle {
    height: 18px;
    width: 18px;
    top: -9px;
    right: -9px; /* half the width */
    border: none;
    border-radius: 4px;
    background: #000;
    box-shadow: none;
}

    #filter-rate-slider .noUi-handle::before {
        display: none;
    }

    #filter-rate-slider .noUi-handle::after {
        display: none;
    }

#filter-rate-slider .noUi-tooltip {
    display: block;
    position: absolute;
    top: 17px;
    border: none;
    /* border-radius: 3px; */
    background: transparent;
    color: #000;
    padding: 0;
    text-align: center;
    white-space: nowrap;
}

.filter-buttons {
    display: flex;
    flex-direction: column-reverse;
    flex-grow: 0;
    flex-basis: auto;
    align-items: flex-end;
    gap: 10px;
}

#filter-submit {
    padding: 7px 20px;
    background-color: #fff;
    color: inherit;
}

    #filter-submit:hover {
        background-color: #2e2e2e;
        color: #fff;
    }

#filter-reset,
#filter-mobile-reset,
#filter-mobile-overlay-close {
    border: none;
    background: transparent;
    display: block;
    padding: 0;
    color: inherit;
    font-size: 1em;
}

#filter-mobile {
    display: none;
    height: 100%;
    background-color: #fff;
    color: inherit;
    font-size: 1.5em;
}

@media (max-width: 782px) {
    .filter-buttons {
        flex-direction: row;
        gap: 10px;
    }

    #filter-reset {
        display: none;
    }

    #filter-submit {
        height: 100%;
    }

    #filter-mobile {
        display: block;
    }
}

.video-popup .modal-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
}

.video-popup .modal-video {
    max-width: 50vw;
    max-height: 60vh;
}

/* External (YouTube/Vimeo) iframe lacks intrinsic dimensions, so we set
 * an explicit responsive 16:9 box. The min() clamps to whichever axis
 * runs out first (50vw on wide screens, 60vh * 16/9 on tall narrow ones). */
.video-popup .modal-video--external {
    width: min(80vw, calc(70vh * 16 / 9));
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
}

@media (min-width: 768px) {
    .video-popup .modal-video--external {
        width: min(60vw, calc(70vh * 16 / 9));
    }
}


/* Skeleton Loader CSS */
.skeleton {
    background: #eee;
    background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
    border-radius: 5px;
    background-size: 200% 100%;
    animation: 1.5s shine linear infinite;
}

@keyframes shine {
    to {
        background-position-x: -200%;
    }
}

.member-avatar .skeleton {
    width: 150px;
    height: 150px;
    border-radius: 50%;
}

.member-header .skeleton {
    width: 200px;
    height: 20px;
    margin-bottom: 8px;
}

.member-info .skeleton {
    width: 100%;
    height: 15px;
    margin-bottom: 8px;
}

.member-action .skeleton {
    width: 100%;
    height: 40px;
    border-radius: 4px;
    margin-bottom: 10px;
}

.entry-title {
    line-height: 1.2em;
}

.members-nav {
    display: flex;
    flex-grow: 1;
    flex-basis: 0;
    width: 16em;
    white-space: nowrap;
}

    .members-nav .count {
        background: transparent;
        border: none;
        font-size: inherit;
        color: inherit;
        box-shadow: none;
        padding: 0 .5em 0 0;
        margin: 0;
    }

.members-subfilter {
    display: flex;
    flex-grow: 0;
    flex-basis: auto;
    align-items: flex-end;
}

#filter-mobile-overlay {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 20px;
    background: white;
    z-index: 9999;
}

.admin-bar #filter-mobile-overlay {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar #filter-mobile-overlay {
        top: 46px;
        height: calc(100% - 46px);
    }
}

/* Mobile admin bar: the left plugin icons (Yoast, WCFM, comments, etc.) fill the
   row, so the right-floated account group cannot fit and wraps below the bar.
   Pin it to the top-right corner instead of letting it drop out. */
@media screen and (max-width: 782px) {
    #wpadminbar #wp-admin-bar-top-secondary {
        position: absolute;
        top: 0;
        right: 0;
    }

    /* The absolute parent above would become the dropdown's containing block and
       squash it to the group width; force the menu back to full bar width. */
    #wpadminbar #wp-admin-bar-top-secondary > li > .ab-sub-wrapper {
        position: fixed;
        top: 46px;
        left: 0;
        right: 0;
    }

    /* Tighten the icon-only items (all but the wider Yoast/WCFM menus) from 52px
       to 50px so the row packs in and visually clears the pinned account group. */
    #wpadminbar #wp-admin-bar-root-default > li:not(#wp-admin-bar-wpseo-menu):not(#wp-admin-bar-wcfm-menu) > .ab-item,
    #wpadminbar #wp-admin-bar-root-default > li:not(#wp-admin-bar-wpseo-menu):not(#wp-admin-bar-wcfm-menu) > .ab-item::before {
        width: 50px;
    }
}

    #filter-mobile-overlay .header {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        gap: 10px;
    }

        #filter-mobile-overlay .header .title {
            grid-column: 1 / 2;
            grid-row: 1 / 2;
        }

            #filter-mobile-overlay .header .title h2 {
                margin-bottom: 0;
            }

        #filter-mobile-overlay .header .close {
            grid-column: 2 / 3;
            grid-row: 1 / 2;
            display: flex;
            justify-content: flex-end;
        }

            #filter-mobile-overlay-close {
                font-size: 2.2em;
            }

            #filter-mobile-reset {
                border: 1px solid rgb(214, 217, 221);
                font-size: 1em;
                padding: 10px 20px;
            }

        #filter-mobile-overlay .header .reset {
            grid-column: 1 / 2;
            grid-row: 2 / 3;
        }
    

        #filter-mobile-submit {
            width: 100%;
        }

        #filter-mobile-overlay .content {
            display: flex;
            flex-direction: column;
            gap: 30px;
        }

        #filter-mobile-overlay .content > * {
            display: flex;
            border: none;
            width: 100%;
        }

        #filter-mobile-overlay .multi-select-wrapper.active {
            box-shadow: none;
            z-index: auto;
        }

        #filter-mobile-overlay .multi-select-wrapper > label {
            overflow: unset;
        }

        #filter-mobile-overlay #filter-rate-component {
            margin-bottom: 10px;
        }

        #filter-mobile-overlay #filter-rate-component #filter-rate-dropdown {
            display: block;
            position: relative;
            width: 100% !important;
            height: auto;
            left: auto;
            top: auto;
            z-index: auto;
            float: none;
            margin: 0;
            padding: 1em .5em;
            border: none;
            box-shadow: none;
        }

        #filter-mobile-overlay #filter-rate-component #filter-rate > span {
            display: none;
        }

        #filter-mobile-overlay #filter-language-component .multi-select-container > span {
            border: 1px solid #a6a6a6;
            border-radius: 4px;
            padding: 5px 10px;
            position: relative;
        }

            #filter-mobile-overlay #filter-language-component .multi-select-container > span::after {
                display: block;
                font-family: bb-icons;
                content: '\e826';
                font-size: 1.2em;
                color: #a6a6a6;
                position: absolute;
                top: 5px;
                right: 8px;
                width: 1em;
            }

        #filter-mobile-overlay #filter-language-component .multi-select-menu {
            left: 0;
            top: 38px;
        }

        #filter-mobile-overlay #filter-keywords-component {
            margin-bottom: 16px;
        }

        #filter-mobile-overlay #filter-keywords-component input {
            border: 1px solid #a6a6a6;
            border-radius: 4px;
            padding: 10px 10px 10px 20px;
            position: relative;
        }

            #filter-mobile-overlay #filter-keywords-component .bb-icon-l {
                display: none;
            }

            #filter-mobile-overlay #filter-keywords-component input::before {
                display: block;
                font-family: bb-icons;
                content: '\ef10';
                font-size: 1.2em;
                color: #a6a6a6;
                position: absolute;
                top: 5px;
                left: 8px;
                width: 1em;
            }



.members-nav-subfilter {
    display: flex;
    flex-direction: row;
}

@media (max-width: 782px) {
    .members-nav-subfilter {
        flex-direction: column;
        gap: 10px;
    }
}

#page-loader {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(46, 46, 46, 0.8);
    z-index: 99999;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
    font-size: 30px;
    font-family: "Trebuchet MS", sans-serif;
    font-weight: 600;
    line-height: 100vh;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#page-loader.show {
    display: block;
    opacity: 1;
}

body.bp-search .site-header {
    z-index: 999;
}

body.bp-search .site-header .site-header-container {
    width: auto !important;
}

.last-message-bubble__close-icon {
    transform: scale(1.5) !important;
}


.wcml-dropdown-click {
    width: auto !important;
    transform: scale(.8);
}

.wcml-cs-active-currency {
    border-radius: 4px;
}

.wcml-cs-submenu {
    box-shadow: 0 3px 8px rgba(0, 0, 0, .06), 0 6px 24px rgba(0, 0, 0, .12);
}

.site-header #primary-navbar .primary-menu .menu-item > .ab-submenu {
    min-width: 100%;
    left: auto;
}

.bb-mobile-panel-inner .wcml-horizontal-list > ul {
    display: flex;
    flex-flow: wrap;
    width: 100%;
    padding: 0 20px;
    margin: 0 0 40px !important;
    list-style-type: none;
}

.bb-mobile-panel-inner .wcml-horizontal-list li {
    width: 58px;
    white-space: nowrap;
    display: block;
}

.bb-mobile-panel-inner .wcml-cs-active-currency {
    font-weight: bold;
}

@keyframes shake-phone {
    0%   { transform: rotate(0deg); }
    2%   { transform: rotate(15deg); }
    4%   { transform: rotate(-15deg); }
    6%   { transform: rotate(10deg); }
    8%   { transform: rotate(-10deg); }
    10%  { transform: rotate(5deg); }
    12%  { transform: rotate(-5deg); }
    14%  { transform: rotate(2deg); }
    16%  { transform: rotate(-2deg); }
    18%  { transform: rotate(1deg); }
    20%  { transform: rotate(0deg); }
  
    /* Остальные 80% времени — "покой" */
    100% { transform: rotate(0deg); }
}
  
#meeting-call-button i {
    display: inline-block;
    animation: shake-phone 5s ease-in-out infinite;
}

/* Остановка анимации при наведении */
#meeting-call-button:hover i {
    animation-play-state: paused;
}

.use-phone {
    font-size: 12px;
    line-height: 1.2em;
    margin: 20px 20px 0;
}

/* On phones the composer area is tight — the meeting notice shrinks to a hint. */
@media (max-width: 640px) {
    .use-phone {
        font-size: 10px;
        margin: 10px 20px 0;
    }
}

#bp-message-content {
    margin-top: 5px !important;
}

.toast-messages-content .senders {
    display: inline;
}

/* Partner status */
.member-status {
    z-index: 2;
}

.avatar-wrapper {
    position: relative;
    display: inline-block;
}

.avatar-wrapper.status-ready::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    aspect-ratio: 1 / 1;
    background: url('/wp-content/themes/buddyboss-theme-child/assets/images/avatar_overlay_ready_to_work.png') no-repeat center;
    background-size: contain;
    pointer-events: none;
    z-index: 2;
}

.avatar-wrapper img.avatar {
    display: block;
    position: relative;
    z-index: 1;
}

.toggle-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #2e2e2e;
    margin-bottom: 10px;
}

.toggle-wrapper .toggle {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 17px;
}

.toggle-wrapper .toggle input {
    display: none;
}

.toggle-wrapper .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ef5455;
    transition: 0.2s;
    border-radius: 17px;
}

.toggle-wrapper .slider:before {
    position: absolute;
    content: "";
    height: 13px;
    width: 13px;
    left: 2px;
    bottom: 2px;
    background-color: #fff;
    transition: 0.2s;
    border-radius: 50%;
}

.toggle-wrapper .toggle input:checked + .slider {
    background-color: #14b550;
}

.toggle-wrapper .toggle input:checked + .slider:before {
    transform: translateX(13px);
}

.active-period {
    margin-bottom: 6px;
}

.tutor-course-category-description {
    margin-top: 2.2em;
}

.woocommerce li.product .add_to_cart_button {
    order: 2;
    flex: 1;
    margin-top: auto;
    float: right;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    box-shadow: none;
}

.woocommerce li.product .add_to_cart_button {
    border: none;
    border-radius: 0;
    border-bottom-right-radius: var(--bb-block-radius);
    border-bottom-left-radius: var(--bb-block-radius);
    border-top: 1px solid var(--bb-content-border-color);
    order: 2;
    width: 50%;
    max-height: 50px;
    margin-top: auto;
    float: right;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 12px;
    line-height: 2.5;
    text-align: center;
    min-height: auto;
    white-space: nowrap;
    overflow: hidden;
    padding: .618em 1em;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.woocommerce li.product .add_to_cart_button.added,
.woocommerce li.product .add_to_cart_button.loading {
    border-bottom-left-radius: 0;
}

.woocommerce li.product .add_to_cart_button.loading::after {
    position: static;
    margin-left: .53em;
}

.woocommerce ul.products li.product {
    overflow: hidden;
}

.woocommerce ul.products li.product .button {
    margin-top: auto;
}

.woocommerce li.product_cat-uncategorized a.added_to_cart.wc-forward,
.woocommerce li.product_cat-courses a.added_to_cart.wc-forward {
    width: 100%;
    border-right: none;
}

.woocommerce .tutor-icon-cart-line {
    position: relative;
}

.woocommerce .cart-quantity-count {
    display: block;
    position: absolute;
    background: var(--bb-primary-color);
    color: #fff;
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    font-size: 9px;
    line-height: 1.6;
    min-width: 14px;
    padding: 0px 3px;
    height: 14px;
    border-radius: 9999px;
    top: -6px;
    right: -6px;
}

.woocommerce-pagination a.prev:before,
.woocommerce-pagination a.next:before {
    font-size: 18px;
    line-height: 18px;
}

button.tutor-btn {
    box-shadow: none;
}

@media (min-width: 800px) {
    .comment-form-author, .comment-form-email {
        width: calc(50% - 13.33px);
    }
}

#respond .comment-form-email {
    margin-right: 0;
}

.fbs_assignee_tooltip .user-actions,
.fbs_board_member_info .user-actions {
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-top: 4px;
}

.user-actions .message-link,
.user-actions .call-link {
    background-color: var(--bb-primary-button-background-regular);
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    transition: background-color linear .1s;
    font-weight: normal;
    font-size: 12px;
}

.user-actions .message-link:hover,
.user-actions .call-link:hover {
    background-color: var(--bb-primary-button-background-hover);
    color: #fff;
}

.user-actions .message-link:before,
.user-actions .call-link:before {
    display: inline-block;
    content: "\eee7";
    font-family: bb-icons;
    font-size: 12px;
    font-weight: 300;
    line-height: 1.2;
    margin-right: .5em;
}

.user-actions .call-link:before {
    content: '\eeee';
}

.bb-onscreen-notification-enable .bb-onscreen-notification {
    z-index: 10000;
}


/**
 * Quick Message module
 */
.bb-quick-message-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
}

.bb-qm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999998;
}

.bb-modal-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 450px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    padding: 25px;
    animation: bbModalSlideIn 0.3s ease-out;
    z-index: 999999;
}

@keyframes bbModalSlideIn {
    from {
        opacity: 0;
        transform: translate(-50%, -45%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

.bb-modal-close {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 35px;
    height: 35px;
    background-color: rgb(239, 84, 85) !important;
    border: none !important;
    border-radius: 999px;
    color: #fff !important;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    transition: all 0.2s linear;
    font-family: "Trebuchet MS", sans-serif;
    font-weight: 400;
    line-height: 1;
    padding: 0;
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

.bb-modal-close:hover {
    background: rgb(229, 74, 75);
}

.bb-modal-header {
    margin-bottom: 15px;
}

.bb-modal-header h4 {
    margin: 0;
    font-size: 14px;
    color: #666;
    font-weight: normal;
}

.bb-modal-body {
    margin: 0;
}

.bb-message-input-wrapper {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

.bb-message-input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: 20px;
    font-size: 14px;
    font-family: inherit;
    resize: none;
    outline: none;
    transition: border-color 0.2s;
    line-height: 1.4;
    min-height: 40px;
    max-height: 120px;
    overflow-y: auto;
    box-shadow: none;
}

.bb-message-input:focus {
    border: 1px solid #999;
}

.bb-send-button {
    padding: 10px 20px;
    /* background: #4CAF50; */
    color: white;
    border: none;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    min-width: 70px;
}

.bb-send-button:hover {
    /* background: #45a049; */
}

.bb-send-button:active {
    transform: scale(0.95);
}

.bb-send-button:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
}

.bb-modal-feedback {
    text-align: center;
    padding: 20px 0;
}

.bb-feedback-icon {
    display: block;
    font-size: 48px;
    margin-bottom: 10px;
    line-height: 1;
}

.bb-feedback-icon.success {
    color: #4CAF50;
    animation: bbSuccessPulse 0.5s ease-out;
}

.bb-feedback-icon.error {
    color: #f44336;
    animation: bbErrorShake 0.5s ease-out;
}

@keyframes bbSuccessPulse {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes bbErrorShake {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-10px);
    }
    75% {
        transform: translateX(10px);
    }
}

.bb-feedback-text {
    display: block;
    font-size: 14px;
    color: #333;
}

/* Scrollbar styling for textarea */
.bb-message-input::-webkit-scrollbar {
    width: 6px;
}

.bb-message-input::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.bb-message-input::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

.bb-message-input::-webkit-scrollbar-thumb:hover {
    background: #999;
}


/* Back button */
.back-button-wrap {
    display: block !important;
}

.back-button {
    position: fixed;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    z-index: 9999;
    opacity: 0.7;
    background-color: var(--e-global-color-primary);
    border-radius: 8px;
    transition: opacity 0.3s ease;
}

.back-button:hover {
    opacity: 1;
}

.back-button svg {
    fill: #ffffff;
    width: 15px;
    height: 15px;
}

.tutor-pagination-content-appendable {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.direct-checkout-ajax.is_loading {
  color: #fff;
  animation: pulse-bg 1.2s ease-in-out infinite;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: 0 0 0 0 rgba(239, 84, 85, 0.0);
  border: none !important;
}

@keyframes pulse-bg {
  0% {
    background-color: #ef5455;
    box-shadow: 0 0 0 0 rgba(239, 84, 85, 0.18);
  }
  50% {
    background-color: #f57a7b; /* slightly lighter */
    box-shadow: 0 0 0 6px rgba(239, 84, 85, 0.10);
  }
  100% {
    background-color: #ef5455;
    box-shadow: 0 0 0 0 rgba(239, 84, 85, 0.18);
  }
}

@media (prefers-reduced-motion: reduce) {
  .direct-checkout-ajax.is_loading {
    animation: none;
    background-color: #ef5455;
    box-shadow: none;
  }
}

.user-nicename {
    font-weight: normal;
    font-size: 1.8rem;
}

/* Top skill subtitle under the user name on the single profile page. */
.user-top-skill {
    font-size: inherit;
}


/* Style button to look like original link */
.woocommerce button.remove {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: inherit;
    font: inherit;
    line-height: normal;
}

.woocommerce button.remove:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

button.remove.remove_from_cart_button {
    border: none;
    order: 4;
}

.product-remove button.remove {
    border: none;
    padding: 5px;
    display: flex;
    width: 25px;
    height: 25px;
}

button.remove.remove_from_cart_button:hover,
.product-remove button.remove:hover {
    background: transparent;
    opacity: 0.5;
}

.notification-list .bb-full-link {
    display: none;
}

.woocommerce-checkout .bb-wc-co table.shop_table td.product-name {
    width: 80%;
    padding-right: 0;
}

.woocommerce-checkout .bb-wc-co table.shop_table td.product-total {
    width: 20%;
}

.woocommerce-checkout .bb-wc-co table.shop_table .bs-product-check {
    gap: 10px;
    flex-wrap: wrap;
}

.woocommerce .product-name .variation {
    margin-top: 0;
    flex-basis: 100%;
    font-style: oblique;
    color: #606060 !important;
}

.post .entry-content a,
.elementor-widget-text-editor a {
    color: #ef5455;
}

.post .entry-content a:hover,
.elementor-widget-text-editor a:hover {
    color: #009ffd;
}

/* Tutoring booking button icon (calendar) */
body #buddypress .member-header-actions > .generic-button > *.tutoring-booking i:before {
    content: "\e803";
    font-weight: 300;
}

body #buddypress .member-header-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

body #buddypress .member-header-actions+.bb_more_options {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

@media screen and (max-width: 782px) {
    body #buddypress .member-header-actions-wrap {
        flex-direction: column;
    }

    body #buddypress .member-header-actions {
        align-items: center;
    }
}


/**
 * Product Vendor Info
 * Displays vendor avatar and name on single product page
 */
.product-vendor-info {
    margin-top: 10px;
    margin-bottom: 8px;
}

.product-vendor-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #666;
    font-size: 14px;
    line-height: 1.6;
    text-decoration: none;
    transition: color 0.2s ease;
}

.product-vendor-link:hover {
    color: var(--bb-primary-color, #ef5455);
}

.product-vendor-avatar {
    border-radius: 50%;
    width: 36px;
    height: 36px;
    object-fit: cover;
}

.product-vendor-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.elementor-widget-loop-carousel .swiper-pagination-bullets {
    --dots-horizontal-transform: 0;
}

/* Job Applications: round avatars to match BuddyBoss style */
.job-application header img {
    border-radius: 50%;
}

#job-manager-job-applications .job-applications ul.job-applications .job-application footer ul.actions li a {
    padding: 1em !important;
}

.bb-toast-messages-enable .bb-toast-messages {
    z-index: 99998;
}

/* WCFM vendors filter: widen the vendor select2 dropdown.
   Plugin pins it via min/max-width: 150px on a high-specificity selector,
   and select2 mirrors width: 150px inline from the source <select>.
   Override all three with !important. */
#wcfm-main-contentainer .wcfm_vendors_filter_wrap #dropdown_vendor + .select2-container {
    width: 320px !important;
    min-width: 320px !important;
    max-width: 320px !important;
}

/* WCFM date range picker: keep both months side-by-side.
   The bundled jquery.daterangepicker computes month-wrapper width
   assuming box-sizing: content-box (190 + 35 + 190 = 415), but the
   theme uses border-box, so padding+border eat ~12px and month2
   wraps below month1. Use min-width (not width) so the plugin's
   recalculation still runs but cannot collapse below the floor. */
.date-picker-wrapper .month-wrapper {
    min-width: 425px;
}

/* Profile-edit group tabs (Profile/Skills/Address/Payment/Vendor): nudge from
   the default 500 to 600 so the section tabs read as a bit more prominent.
   The second selector mirrors BuddyPress's own active-tab rule verbatim so it
   wins by source order (custom.css loads after buddypress.min.css) — otherwise
   the .current tab stays at the theme's 500. */
#profile-edit-form .button-tabs.button-nav a,
#buddypress .profile.edit .button-nav .current a {
    font-weight: 600;
}

/* Messages composer: make the error banner visible again.
   BuddyBoss JS prepends .compose-feedback to .bp-messages-content and renders
   every composer error into it (send failures plus client-side validation),
   but the parent theme pins it with position: absolute and no z-index. The
   compose form comes later in the DOM, is positioned too, and the message
   editor has an opaque background — so it paints straight over the banner and
   the error is silently invisible. Returning the container to normal flow puts
   the banner above the form instead of underneath it. */
.messages-screen .bp-messages-container .compose-feedback {
    position: static;
    top: auto;
    left: auto;
    right: auto;
}
/* --- Member profile: xProfile group slug colliding with the theme's wrapper --- */
/* The theme pads the profile EDIT wrapper with
   `.bp-profile-content .profile:not(.public) { padding: 50px }` (30px 0 below
   1050px). The first xProfile group is named "Profile", so
   bp_the_profile_group_slug() emits `profile` and its
   <div class="bp-widget profile"> matches that selector too — leaving the first
   card 50px more padded than Skills or Work experience, which have other slugs.
   Cancel it for that widget inside the public view only. */
.bp-profile-content .profile.public .bp-widget.profile {
    padding: 0;
}

/* --- Member profile: align the sidebar with the content column --- */
/* BuddyBoss pulls the profile cover image up by the column's 30px top
   padding (negative margin on .bb-cover-image-container), while the
   sidebar keeps its padding — so every widget sat 30px lower than the
   content blocks. Applies to all member profile types.
   Side-by-side layout only: at 1030px and below the theme gives the sidebar
   flex: 0 0 100% (screen and (max-width: 1030px) on .profile-sidebar
   .widget-area) and it stacks under the content, where that same 30px is the
   only thing separating the first widget from the last content card. */
@media screen and (min-width: 1031px) {
    .bp-user #secondary.widget-area {
        padding-top: 0;
    }
}

/* Trim the phantom space below the last profile card: the trailing margins
   of .bp-profile-wrapper and the last group block extend the column ~60px
   past the visible card, letting the sticky sidebar ride below it. */
.bp-user .bp-profile-wrapper {
    margin-bottom: 0;
}

.bp-user .bp-profile-content .group-separator-block:last-child {
    margin-bottom: 0;
}

/* Equalize the columns' own bottom padding (35px vs the sidebar's 20px) so
   the sticky sidebar's travel range ends at the content card, not below it. */
.bp-user #primary.content-area {
    padding-bottom: 20px;
}

/* Both columns' LAST visible cards must end flush: zero the trailing
   margins on either side (spacing between stacked cards is preserved).
   With equal column paddings (20px) the visible bottoms now coincide. */
.bp-user #secondary aside:last-child {
    margin-bottom: 0;
}

.bp-user .bp-profile-content .bp-widget:last-child {
    margin-bottom: 0;
}

/* --- Product reviews: meta line and review form --- */
/* WPML injects the language flag as a floated block right before the review
   meta, which splits the "Author – date" line in two (worst on mobile, where
   the date wraps around the flag). Inline it next to the name instead. */
/* !important is required: WPML sets float/padding as an inline style. */
#tab-reviews .comment-text > div:has(> img[src*="/flags/"]) {
    float: none !important;
    display: inline-block !important;
    padding: 0 6px 0 0 !important;
    /* middle, not baseline: a baseline-aligned flag sits on the text line and
       reads as dropped below the name. */
    vertical-align: middle;
    line-height: 1;
}

#tab-reviews .comment-text > div:has(> img[src*="/flags/"]) img {
    display: block;
}

#tab-reviews .comment-text .meta {
    display: inline;
}

/* Group each label with its own field: labels used to sit closer to the field
   above them (10px) than to the input they describe (12px). */
/* .woocommerce prefix needed: WooCommerce ships `.woocommerce #review_form
   #respond p { margin-bottom: 10px }`, which otherwise wins on specificity. */
.woocommerce #review_form .comment-form-rating label,
.woocommerce #review_form #commentform > p > label {
    display: block;
    margin-bottom: 6px;
}

.woocommerce #review_form .comment-form-rating,
.woocommerce #review_form #commentform > p {
    margin-bottom: 22px;
}

.woocommerce #review_form #commentform > p.form-submit {
    margin-bottom: 0;
}


@media (max-width: 640px) {
    /* Narrow screens: put the star rating on its own line above the author,
       then keep flag + name + date together on the next one. Ordering is done
       with flex because the flag sits before the rating in the WPML markup. */
    #tab-reviews .comment-text {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
    }

    #tab-reviews .comment-text .woocommerce-review__rating,
    #tab-reviews .comment-text .star-rating {
        order: 1;
        flex: 0 0 100%;
        float: none;
        margin: 0 0 4px;
    }

    #tab-reviews .comment-text > div:has(> img[src*="/flags/"]) {
        order: 2;
    }

    #tab-reviews .comment-text .meta {
        order: 3;
    }

    /* The review body is an unclassed div, so give every remaining child a
       late order instead of naming it. */
    #tab-reviews .comment-text > * {
        order: 4;
        flex: 0 0 100%;
    }

    #tab-reviews .comment-text .woocommerce-review__rating,
    #tab-reviews .comment-text .star-rating {
        order: 1;
    }

    #tab-reviews .comment-text > div:has(> img[src*="/flags/"]) {
        order: 2;
        flex: 0 0 auto;
    }

    #tab-reviews .comment-text .meta {
        order: 3;
        /* basis 0, not auto: with auto the meta claims its max-content width
           and wraps onto its own flex line, leaving the flag stranded above. */
        flex: 1 1 0;
        min-width: 0;
        margin-bottom: 8px;
    }
}

/* The review form sat unstyled between bordered review cards. Give it the same
   card geometry (border/radius from the review boxes) on the theme's alternate
   background, so it reads as an action area rather than another review. */
/* Styled on #respond, not the wrapper: clicking Reply moves #respond out of
   #review_form_wrapper into the review it answers, so the card has to travel
   with the form or the reply form loses its styling. */
/* Specificity has to match WooCommerce's own `.woocommerce #reviews #comments
   ol.commentlist #respond` (3 IDs), otherwise its padding/radius win. */
.woocommerce #reviews #respond,
.woocommerce #reviews #comments ol.commentlist #respond {
    margin-top: 24px;
    padding: 20px;
    background-color: #F3F2EF;
    border: 1px solid var(--bb-content-border-color, #D6D9DD);
    border-radius: 6px;
}

/* Nested under a review (reply mode) it needs a little breathing room. */
.woocommerce #reviews #comments ol.commentlist #respond {
    margin-bottom: 16px;
}

.woocommerce #respond #reply-title {
    display: block;
    margin-bottom: 4px;
    font-size: 1.1em;
    font-weight: 600;
}

.woocommerce #respond .comment-notes {
    margin-bottom: 20px;
    font-size: 0.9em;
    color: #6b6b6b;
}

/* Inputs stay white so they read as fields against the tinted panel. */
.woocommerce #respond #commentform input[type="text"],
.woocommerce #respond #commentform input[type="email"],
.woocommerce #respond #commentform textarea {
    background-color: var(--bb-content-background-color, #FFFFFF);
}

@media (max-width: 640px) {
    .woocommerce #reviews #respond,
    .woocommerce #reviews #comments ol.commentlist #respond {
        padding: 16px;
    }
}

/* Reviews tab counter: the theme paints the badge white-on-grey, but another
   theme rule repaints the badge background with the light alternate colour,
   leaving white text on a near-white chip. Use the heading colour instead. */
/* Must include .bb-template-v2: that stylesheet carries the white-on-light rule
   at a higher specificity than a plain .woocommerce prefix. */
#content div.product .woocommerce-tabs ul.tabs li#tab-title-reviews a span,
.woocommerce #content div.product .woocommerce-tabs ul.tabs li#tab-title-reviews a span,
.bb-template-v2.woocommerce #content div.product .woocommerce-tabs ul.tabs li#tab-title-reviews a span,
.bb-template-v2.woocommerce #content div.product .woocommerce-tabs ul.tabs li#tab-title-reviews.active a span {
    color: var(--bb-headings-color, #2E2E2E);
}

/* Owner view: hide the standalone form (a root-level review is rejected by the
   guard). It stays in the DOM because Reply relocates this very form under the
   review being answered, and there it becomes visible again. */
.mp-own-product #review_form_wrapper #respond {
    display: none;
}

.mp-own-product #reviews #comments ol.commentlist #respond {
    display: block;
}

/* Reply is a secondary action on someone else's review: a text link keeps the
   card free of a border-inside-a-border and stays quiet in a long list. */
.mp-review-reply-link {
    /* The review box has padding-bottom: 0, so the link carries the bottom gap
       itself — matched to the box's 16px side padding. */
    margin: 10px 0 16px;
}

.mp-review-reply-link a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--bb-alternate-text-color, #9B9C9F);
    text-decoration: none;
    transition: color 0.2s ease;
}

.mp-review-reply-link a::before {
    content: '\21A9';
    font-size: 14px;
    line-height: 1;
}

.mp-review-reply-link a:hover,
.mp-review-reply-link a:focus {
    color: var(--bb-headings-color, #2E2E2E);
    text-decoration: underline;
}

/* --- Reply form docked to the review it answers --- */
/* WordPress drops #respond in as a sibling of the review body, which reads as
   a second, unrelated card. Butt-join the two so the form looks like a drawer
   pulled out from under the review. */
.woocommerce #reviews #comments ol.commentlist li.review:has(> #respond) .comment-text {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.woocommerce #reviews #comments ol.commentlist li.review > #respond {
    /* -1px collapses the two 1px borders into a single divider line; the 50px
       left offset matches .comment-text, which is inset to clear the avatar. */
    margin: -1px 0 0 50px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    animation: mp-reply-open 0.22s ease-out;
}

@keyframes mp-reply-open {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .woocommerce #reviews #comments ol.commentlist li.review > #respond {
        animation: none;
    }
}

/* Cancel reply shipped at 11px with no hit area next to a 14px button. */
.woocommerce #respond #cancel-comment-reply-link {
    display: inline-block;
    margin-right: 18px;
    padding: 6px 4px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--bb-alternate-text-color, #9B9C9F);
    text-decoration: none;
    transition: color 0.2s ease;
}

.woocommerce #respond #cancel-comment-reply-link:hover,
.woocommerce #respond #cancel-comment-reply-link:focus {
    color: var(--bb-headings-color, #2E2E2E);
    text-decoration: underline;
}