/*--------------------------------------------------------------
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
--------------------------------------------------------------*/

/* Custom CSS */


:root {
    --bb-headings-color: #555 !important;
    --wp--preset--color--luminous-vivid-orange: #f94a00 !important;
}

.margin-0 {
    margin: 0 !important;
}

.padding-0 {
    padding: 0 !important;
}

.justified {
    text-align: justify;
}

.is-style-wide {
    height: 5px !important;
}

.wp-block-columns {
    margin: 0px !important;
}

.wp-block-columns p {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.page.buddyboss-theme header.entry-header {
    display: none;
}

/* Sign-in form*/
.rounded-signin {
    border-radius: 20px;
    border: 5px solid #EEEEEE;
    background: #F2F4F5;
    max-width: 400px;
    margin: 0 auto !important;
    padding: 20px;
}

.mp_login_form {
    max-width: 300px;
    margin: 0 auto;
}

/* Hide login button on login page */
.mepr-login-page .bb-header-buttons, .mepr-login-page .bb-left-panel-icon-wrap {
    display: none;
}

/* Forgot password position */
.mp_wrapper.mp_login_form .mepr-login-actions {
    position: unset;
}

/* Login button colour */
.mp_wrapper.mp_login_form #wp-submit:hover {
    background-color: var(--bb-primary-button-background-hover);
}

.bb-template-v2 .bb-mobile-panel-wrapper .side-panel-menu > .current-menu-item > a {
    color: unset;
}

/* Title spacing */
h1.entry-title {
    margin-bottom: 1em;
}

/* Hide "Customer Type" on subscribe page */
.mp-form-row.mepr_custom_field.mepr_mepr_vat_customer_type.mepr_vat_customer_type_row,
.mp-form-row.mepr_custom_field.mepr_vat_number_row {
    display: none !important;
}

/* Decrease font size of price table on subscribe page */
.mp_invoice table.mp-table {
    font-size: 14px;
}

/* Correct purchase/subscribe button */
.mepr-price-menu.fixed .mepr-price-box-button a {
    background: #f94a00;
    color: #FFFFFF;
    display: block;
    text-align: center;
}

.mepr-price-menu.fixed .mepr-price-box-button a:hover {
    background: #e04202;
}

/* Hide Card Exp column in subscriptions*/
table#mepr-account-subscriptions-table thead tr :nth-child(6),
table#mepr-account-subscriptions-table tbody tr :nth-child(6) {
    display: none;
}

/* Move course status label up */
.ld-status {
    top: 0px !important;
    border-radius: 0 0px 4px 0 !important;
}

/* Aspect ratio & position of images in search */
body.bp-search .bp-search-ac .item-avatar img {
    object-fit: cover;
    object-position: right;
}

/* Aspect ratio of cover images */
.ld-course-list-items .bb-cover-list-item:not(.bb-course-no-content) .bb-cover-wrap {
    padding-top: 55%;
}

.bb-cover-wrap img {
    object-fit: contain !important;
}

/*Image background*/
.bb-cover-wrap {
    background: #FFFFFF;
}

/* Hide status on courses page */
.page-id-42622 .bb-cover-list-item .ld-status {
    display: none;
}

/* Short Description height */
.bb-course-items .bb-course-excerpt {
    max-height: 6.72em;
    display: block;
}

/* Course Grid search on the left */
.bb-courses-header {
    float: left;
}

.bb-grid {
    clear: left;
}

/* Premium content notice text alignment */
.premium-content-notice .uagb-cta__title,
.premium-content-notice .uagb-cta-text-wrap {
    text-align: left;
}

.premium-content-notice .uagb-cta__button-wrapper a.uagb-cta-typeof-button {
    border-style: solid !important;
    border-color: #0693e3 !important;
    border-radius: 3px;
    border-width: 1px !important;
}

/* Dashboard course activity */
.bb-ldactivity .thumbnail-container img {
    object-fit: contain;
}

.bb-ldactivity .thumbnail-container {
    background: #FFFFFF;
}

.bb-ldactivity ul.slick-dots button {
    margin-right: 10px;
}

/* Memberpress red text on red background */
.mepr_error a, .mepr_error a:hover, .mepr_error a:visited {
    color: #FFFFFF;
    text-decoration: underline;
}

/* Fix for course navigation on small screens */
#learndash-content .lms-topic-sidebar-wrapper {
    position: inherit !important;
}

/* Reset buddypanel icons */
.bb-template-v2 .buddypanel .side-panel-menu li:not(.current-menu-item) a i:not(.bb-icon-angle-down) {
    opacity: unset;
}

/* Groups icon spacing */
#groups-list.bp-list.grid.bb-cover-enabled .item-avatar .group-avatar-wrap {
    margin-top: -20px;
}

#groups-list.grid > li {
    margin-top: 20px;
}

/* Reporting */
.reporting-datatable__table .dataTable th.sorting, .reporting-datatable__table .dataTable th.sorting_asc, .reporting-datatable__table .dataTable th.sorting_desc {
    padding-right: 30px !important;
}

table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc {
    background-position: center right 12px;
    background-size: 16px;
}

.reporting-datatable__search .dataTables_filter input {
    padding-left: 30px;
}

.amChartsLegend g[aria-label="Tin Can Statements"] {
    display: none;
}

/* Vimeo Styles*/

.vimeotheque-video-post-main.single .vimeotheque-video-embed {
    background: none;
}


/*Vimeo play button*/
.vimeotheque-featured-image .play-btn {
    background-color: #fe4402;
}

/* Product logo */
.vimeotheque-video:hover .product-icon {
    opacity: 0;
    z-index: -1;
}

.product-icon {
    border: 3px solid #EEEEEE;
    background: #FFFFFF;
    padding: 10px;
    width: 80px;
    height: 80px;
    border-radius: 10px;
    position: relative;
    top: 0;
    left: 20px;
    margin-top: -60px;
}

@media screen and (max-width: 900px) {
    /*.product-icon {
        display: none;
    }*/
    .vimeotheque.video-archive .videos .vimeotheque-video {
        flex-basis: 50%;
        width: 50%;
        min-width: 50%;
        padding-right: 30px;
        margin: 0 !important;
    }
}

@media screen and (max-width: 600px) {
    /*.product-icon {
        display: none;
    }*/
    .vimeotheque.video-archive .videos .vimeotheque-video {
        flex-basis: 100%;
        width: 100%;
        min-width: 100%;
        padding-right: 0px;
        margin: 0 !important;
    }
}


/* Video stats*/
.vimeotheque-video-post-main.single article.vimeotheque-video-post-content header.entry-header div.video-stats span {
    font-weight: normal;
    color: #BBBBBB;
}

/* Playlists */
.post-adding {
    display: inline;
}

.post-adding a.button:before {
    content: "\eef9";
    font-family: bb-icons !important;
    font-weight: 600;
    margin-right: 3px;
    speak: none;
}

.mg-upc-dg-content button {
    background: #EEE;
    color: #333;
    border: 1px solid #DDDDDD;
}

button.mg-upc-dg-close {
    border: 0;
    background-color: transparent;
}

.mg-upc-dg-share-link button {
    width: 25%;
}

.mg-upc-dg-item .mg-upc-dg-item-image {
    height: unset;
    width: 8em;
}

@media (max-width: 550px) {
    .mg-upc-dg-item {
        text-align: left;
        align-items: start;
    }

    .mg-upc-dg-item .mg-upc-dg-item-image {
        height: unset;
        width: 13em;
    }

    .mg-upc-dg-item-data {
        padding: 0;
    }

    span.mg-upc-dg-item-handle {
        right: 20px;
        position: absolute;
    }

    .mg-upc-dg-item .mg-upc-dg-item-number {
        display: none;
    }
}

/* Fix for slide up height 0 */
@keyframes slide-up {
    to {
        height: inherit;
        padding-top: revert-layer;
        padding-bottom: revert-layer;
    }
}


/* Category & Tag links*/
span.cat-links, span.tags-links {
    color: #FFFFFF;
    display: inline !important;
    margin-right: 8px !important;
}

span.cat-links a, span.tags-links a {
    background: #EEEEEE;
    border: 1px solid #CCCCCC;
    padding: 0 10px;
    border-radius: 5px;
    margin-top: 5px;
    display: inline-block;
}

/* Search Page*/
#ajaxsearchpro1_1, #ajaxsearchpro1_2, div.asp_m.asp_m_1, #ajaxsearchprores1_1.vertical, #ajaxsearchprores1_2.vertical, div.asp_r.asp_r_1.vertical {
    border: 2px #dedfe2 solid !important;
}

/* Min screen 500px*/
/*@media screen and (min-width: 500px) {
    .asp_w_container {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .asp_w {
        width: 50%!important;
    }
}*/


.probox {
    height: auto !important;
}

.search-filter {
    margin-top: 20px;
    text-align: center;
}

#search-live-chat {
    text-align: center;
}

#start-chat-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

#chat-container {
    max-width: 435px;
    margin: auto;
    text-align: center;
}

/*#tidio-chat-iframe, #tidio-chat {*/
/*    min-height: 800px!important;*/
/*    height: 800px!important;*/
/*}*/

#tidio-chat {
    position: relative !important;
}
#tidio-chat-iframe {
    visibility: hidden;
}
/* When hovering on .vimeotheque-video, hide all product groups */
.vimeotheque-video:hover .product-group {
    opacity: 0;
    z-index: -1;
}
/* Main wrapper to align product groups side by side */
.product-icons-wrapper {
    display: flex;
    justify-content: center;
    gap: 60px;
    flex-wrap: nowrap; /* allows wrapping on small screens */
    padding: 20px;
    align-items: flex-start;
}

/* Shared styles for each group */
.product-group {
    border-radius: 8px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width:48%;
    min-width: 300px;
}
.product-icons {
	display:flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}
/* Headings inside each group */
.product-group h3 {
    margin-bottom: 10px;
    font-size: 26px;
    text-align: center;
}

/* Icon layout inside each group */
.product-group a {
    width: 80px;
    height: 80px;
    margin: 5px;
    border-radius: 10px;
    border: 3px solid #EEEEEE;
    background: #FFFFFF;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.product-group a:hover {
    transform: scale(1.1);
}

.product-group img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
@media screen and (max-width: 768px) {
  .product-icons-wrapper {
    flex-direction: column;
    align-items: center;
  }

  .product-group {
    max-width: 100%;
    width: 100%;
  }

}