@import "../components/colors";
@import "../components/mixins";

.stm_lms_course__image {
    margin: 0 0 50px;
}

.stm-lms-course__sidebar {
    margin: 15px 0 0;
}

.stm_lms_course__content {
    p {
        margin: 0 0 50px;
        font-size: 15px;
        line-height: 30px;
        color: #555555;
    }
    .wpb_content_element {
        margin-bottom: 22px;
    }
    ul {
        margin-bottom: 30px !important;
        &:last-child {
            margin-bottom: 4px !important;
        }
    }
}

.stm_lms_course__title {
    margin: 0 0 40px;
}

.single_product_after_title {
    margin-bottom: 47px;
    .meta_pull {
        max-width: 80%;
    }
    .meta-unit {
        margin-bottom: 10px;
        img {
            margin: 2px 8px 0 0;
        }
        .label {
            font-size: 13px;
        }
        .value {
            margin: -1px 0 0;
            font-size: 15px;
            text-transform: none;
            span {
                margin: 0 3px;
                color: $grey-text;
            }
            a {
                color: #273044;
                &:last-child span {
                    display: none;
                }
                &:hover {
                    color: $main_color;
                }
            }
        }
        .meta_values {
            float: left;
        }
        i {
            display: block;
            padding-top: 5px;
            margin: 0 15px 0 2px;
            font-size: 30px;
            color: $main_color;
        }
        &.teacher {
            margin-right: 55px;
            img {
                border-radius: 50%;
                height: auto;
                max-width: 40px;
            }
            &:hover {
                .value {
                    color: $main_color;
                }
            }
        }
    }
    .star-rating {
        display: inline-block;
        vertical-align: top;
        width: 100px;
        height: 20px;
        margin: 1px 0 4px 0;
        background-size: 20px 20px;
        vertical-align: top;
        & > span {
            height: 20px;
            background-size: 20px 20px;
        }
    }
    .price {
        display: none;
    }
}

.fa-icon-stm_icon_category {
    color: $main_color !important;
}

.average-rating-stars {
    margin: 3px 0 0;
    &__top {
        .star-rating {
            display: inline-block;
            margin: 0 5px 0 0 !important;
            vertical-align: top;
        }
        .average-rating-stars__av {
            display: inline-block;
            vertical-align: top;
            font-size: 15px;
            font-weight: 700;
        }
    }

    &__reviews {
        text-align: right;
        color: $grey-text;
        font-size: 14px;
    }
}

.stm_lms_single_course_carousel_wrapper .stm_lms_course__meta i {
    color: $main_color;
}

@include breakpoint(tabletunder) {
    .stm-lms-course__sidebar {
        margin: 50px 0 0;
    }
}

@include breakpoint(mobile) {
    .stm_lms_course {
        &__title {
            font-size: 35px;
            line-height: 45px;
        }
    }
    #reviews {
        .stm_lms_average__rating {
            text-align: center;
            .average_rating {
                width: auto;
                float: none;
                margin: 0 auto;
                &_unit {
                    display: inline-block;
                    width: auto;
                }
            }
            .detailed_rating {
                display: inline-block;
                float: none;
            }
        }
    }
    #stm-lms-reviews {
        .stm-lms-reviews-top h4 {
            margin-bottom: 0;
        }
        .media {
            margin: 0;
        }
    }
    .single_product_after_title .meta_pull {
        width: 100%;
        max-width: 100%;
        float: none;
        .pull-left {
            width: 50%;
            &.xs-product-cats-left {
                margin-right: 0;
            }
            .pull-left {
                min-height: 50px;
            }
            .meta-unit.teacher {
                margin-right: 15px;
            }
            .label.h6 {
                display: block;
                margin-bottom: 3px;
                text-align: left;
            }
            .h6 {
                line-height: 20px;
            }
        }
    }
    .average-rating-stars__reviews {
        text-align: left;
    }
}

.stm_lms_udemy__affiliate_btn {
    .btn-prices {
        margin-bottom: 17px;
        display: flex;
        flex-wrap: wrap;
        .price {
            font-size: 36px;
            font-weight: 700;
            color: #273044;
        }
        .sale_price,
        .saves {
            font-size: 16px;
            color: #273044;
        }
        .sale_price {
            margin-left: auto;
            margin-right: 10px;
            text-decoration: line-through;
        }
    }
}