/* LearnPress Plugin */

@import '../../../assets/sass/config';
@import '../../../assets/sass/mixins';
@import '../../../assets/sass/direction';

@keyframes rotating4 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes animation4 {
    from {
        left: -40%;
        width: 40%;
    }
    to {
        left: 100%;
        width: 10%;
    }
}

.learn-press-message {
    position: relative;
    margin-bottom: 2rem;
    padding: 1rem 1.2rem 1rem 1.5rem;
    border-top: 5px solid var(--alpha-primary-color);
    border-bottom-right-radius: $corner-md;
    border-bottom-left-radius: $corner-md;
    background: var(--alpha-traffic-white-color);

    &.error {
        border-top: 5px solid var(--alpha-danger-color);
    }
    
    &.warning {
        border-top: 5px solid var(--alpha-alert-color);
    }
    
    &.success {
        border-top: 5px solid var(--alpha-success-color);
    }
}

// .ajaxload {
//     content: "";
//     display: inline-block;
//     position: relative;
//     width: 30px;
//     height: 30px;
//     background: #7b7b7b;
//     border-radius: 50%;
//     animation: rotating4 1s linear infinite;

//     &:after {
//         content: "";
//         border-radius: 50%;
//         display: inline-block;
//         position: absolute;
//         top: 2px;
//         left: 50%;
//         width: 6px;
//         height: 6px;
//         margin-left: -3px;
//         background: #dedede;
//     }
// }

// .lp-ajaxload-style-1 {
//     display: inline-block;
//     position: relative;
//     width: 32px;
//     height: 32px;
    
//     &:before,
//     &:after {
//         content: "";
//         position: absolute;
//         top: 0;
//         left: 0;
//         width: 100%;
//         height: 100%;
//         border: 3px solid var(--alpha-change-border-color);
//     }

//     &:after {
//         clip: rect(0, 32px, 16px, 16px);
//         border-color: var(--alpha-primary-color);
//         border-radius: 50%;
//         animation: rotating4 1s linear infinite;
//     }
// }

// Profile Courses
.learn-press-tabs {
    margin-bottom: 5.4rem;
    font-size: 1.6rem;

    .nav-tabs {
        position: relative;
        margin: side-values(-2.5rem -3rem);
        &:after {
            content: '';
            position: absolute;
            left: 3rem;
            right: 3rem;
            top: 100%;
            border-bottom: 1px solid var(--alpha-change-border-color);
        }
    }
    .nav-item {
        margin: 0 3rem 0; 
    }
    .nav-link {
        padding: 2.7rem 0;
        background-color: transparent;
        &:after {
            height: 5px;
        }
    }
}

.learn-press-tabs .learn-press-tabs__checker {
    display: none;
}

.learn-press-filters .nav {
    margin: side-values(0.5rem 0 1.2rem -2.5rem);

    .nav-item {
        padding: 1rem 0;
        margin: 0 2.5rem 0;
        color: var(--alpha-dark-color);

        a {
            color: rgba(35,36,37,0.5);

            &:hover {
                color: inherit;
            }
        }

        &:before {
            #{$right}: -2.5rem;
        }
    }

    .count {
        display: inline-block;
        margin-#{$left}: .7rem;
    }
}

// Checkout Form

.lp-checkout-form {
    margin-top: 0;
    h4 {
        font-size: 2rem;
    }
    .lp-form-fields {
        padding: 0 0 1.4rem 0;
    }
    #btn-checkout-account-switch-to-guest {
        margin-bottom: 6rem;
    }
    .description {
        float: left;
    }
    a label {
        cursor: pointer;
    }
    .learn-press-message {
        order: -1;
        width: calc(100% - 2 * var(--alpha-gap));
        margin-left: auto;
        margin-right: auto;
    }
}

.lp-checkout-form__before,
.lp-checkout-form__after {
    width: 42%;
    margin-bottom: 4rem;
}
.lp-checkout-form__after {
    width: 58%;
}

@include mq(md, 'max') {
    .lp-checkout-form__before,
    .lp-checkout-form__after {
        width: 100%;
    }
}
.lp-checkout-form__after {
    order: -1;
}

.lp-checkout-form {
    #checkout-account-guest {
        margin-bottom: 3.5rem;
        padding-bottom: 1.9rem;
        border-bottom: 1px solid var(--alpha-change-border-color);

        .lp-form-fields,
        .form-field {
            margin-bottom: 0;
            padding-bottom: 0;
        }
    }

    .lp-guest-checkout-output {
        margin-top: 1rem;
    }
    div.lp-guest-checkout-output {
        padding: .6rem 1.5rem;
        border: 2px solid var(--alpha-info-color);
        border-radius: $corner-md;
        transition: 0.3s;
    }
    label.lp-guest-checkout-output {
        display: block;
        cursor: pointer;
        user-select: none;
    }
    .lp-guest-checkout-notice {
        margin: 3rem 0 0;
    }
    .lp-guest-switch-login {
        margin-top: 1em;
    }

    input[name="checkout-account-switch-form"] {
        display: none;
    }

    input[name="checkout-account-switch-form"]:not(:checked) + .lp-checkout-block {
        display: none;
        overflow: hidden;
        height: 0;
        margin: 0;
        padding: 0;
        border: 0;
        opacity: 0;
    }

    input[name="checkout-account-switch-form"]:not(:checked) + .lp-checkout-block > * {
        overflow: hidden;
        height: 0;
    }

    input[name="checkout-account-switch-form"]:checked + .lp-checkout-block {
        display: block;
        overflow: auto;
        height: auto;
    }

    input[name="checkout-account-switch-form"][value="guest"]:checked ~ #btn-checkout-account-switch-to-guest {
        display: none;
    }

    &:after {
        display: block;
        clear: both;
        content: "";
    }
}

.lp-checkout-order__inner {
    padding: 1rem 3rem 0;
    border: 1px solid var(--alpha-change-border-color);
    border-radius: $corner-md;

    table {
        margin: 0;
    }
    td,
    th {
        box-sizing: content-box;
        line-height: 1;
        vertical-align: inherit;

        &:last-child {
            padding-#{$right}: 0;
        }
    }
    .course-thumbnail {
        width: 100px;
        padding: side-values(2rem 1.3rem 1.8rem 0);
    }
    .course-name {
        a {
            display: -webkit-box;
            overflow: hidden;
            color: inherit;
            line-height: 1.3;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;

            &:hover {
                color: var(--alpha-primary-color);
            }
        }
    }
    .col-number {
        min-width: 50px;
        text-align: $right;
    }

    .order-total > th {
        padding: side-values(2.4rem 2rem 2.4rem 0);
    }

    .cart-subtotal th,
    .order-total th,
    .order-total .col-number,
    .cart-subtotal .col-number {
        color: var(--alpha-heading-color);
        font-size: 1.6rem;
        font-weight: 600;
    }

    .cart-subtotal > th {
        padding: side-values(2rem 2rem 1.7rem 0);
    }
    
    tfoot tr:last-child td,
    tfoot tr:last-child th {
        border-width: 0;
    }
}

.lp-checkout-account {   
    margin-bottom: 3.5rem;
    padding-bottom: 1.9rem;
    border-bottom: 1px solid var(--alpha-change-border-color);

    .rwmb-label,
    .rwmb-input .description {
        display: none;
    }
    
    .lp-checkout-remember label {
        display: inline-block;
    }

    .lp-checkout-remember a {
        float: $right;
    }

    .lp-checkout-sign-in-link,
    .lp-checkout-sign-up-link {
        display: flex;
        margin: 0;
    }

    .lp-checkout-sign-in-link a,
    .lp-checkout-sign-up-link a {
        margin-#{$left}: 5px;
    }
}


#learn-press-checkout {
    #checkout-payment {
        margin-bottom: 2.5rem;
    }

    .payment-methods {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .secure-connection {
        float: right;
        margin-top: 3px;
        color: var(--body-color, $body-color);
        font-size: 12px;
        font-weight: normal;
        i {
            margin-#{$right}: 5px;
            color: var(--alpha-light-color);
            font-size: 1.8rem;
        }
    }


    .lp-payment-method {
        margin-bottom: 2rem;
    }

    .gateway-input {
        background-color: var(--alpha-change-color-light-1);
    }

    .payment-method-form {
        display: none;
        padding: 1.5rem 2rem;
        border-top: 1px solid var(--alpha-change-border-color);
    }

    .lp-payment-method > label {
        display: flex;
        flex-flow: row nowrap;
        padding: 1rem 2rem;
        background: var(--alpha-change-color-light-2);
        line-height: 4rem;
        cursor: pointer;
    }

    .lp-payment-method .gateway-icon {
        max-height: 3.2rem;
    }

    #checkout-order-action button {
        width: 100%;
        border-color: var(--alpha-change-color-dark-1);
        color: var(--alpha-change-color-light-1);
        background: var(--alpha-change-color-dark-1);
        font-weight: 600;

        &:hover {
            opacity: 0.9;
        }
    }

    #checkout-order-action button.loading::before {
        display: inline-block;
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f110";
        animation: rotating4 1s linear infinite;
        margin-#{$right}: 5px;
    }
    
    &.guest-checkout {
        display: none;
    }
}

.button-continue-guest-checkout {
    clear: both;
}

#learn-press-order-review,
.learn-press-checkout-comment {
    margin-bottom: 2rem;
}

// Table
.lp-list-table {
    
    th {
        font-size: 1.6rem;
    }
    
    @include mq(md, 'max') {
        th,
        td {
            padding: 1.5rem;
        }
    }

    @include mq(sm, 'max') {
        thead, tbody {
            .column-order-date, .column-order-status {
                display: none;
            }
        }
    }
    
    thead {
        border-bottom: 1px solid var(--alpha-change-border-color);
    }

    thead th {
        border-bottom: none;
        color: var(--alpha-change-color-dark-1);
    }

    tbody,
    tfoot {
        box-sizing: border-box;
        border-bottom: 1px solid var(--alpha-change-border-color);
        th,
        td {
            padding: 3.3rem 1rem;
            background: #fff;
            line-height: 1;
        }
        // border-top: 0;
        .column-order-number a {
            color: inherit;
        }
    }

    tbody .column-status .result-percent,
    tfoot .column-status .result-percent {
        font-weight: 600;
    }

    tbody .column-status .lp-label,
    tfoot .column-status .lp-label {
        font-weight: 600;
    }

    tbody tr:nth-child(odd),
    tfoot tr:nth-child(odd) {
        background: var(--alpha-traffic-white-color);
    }

    .nav-text {
        text-align: $left;
    }

    .nav-pages,
    .nav-pages .learn-press-pagination {
        text-align: $right;
    }

    .nav-pages .page-numbers {
        margin-bottom: 0;
    }
}

.lp-label {
    display: inline-block;
    line-height: 1;
}

.learn-press-form {
    .form-fields {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .form-fields .form-field {
        margin: 0 0 2rem 0;
    }
    .form-field label {
        display: block;
        margin: 0 0 1rem 0;
    }
    .form-field .description {
        margin: 2.5rem 0;
        font-size: 1em;
        line-height: 1.4;
    }
    .form-field .asterisk {
      color: var(--alpha-danger-color);
    }
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="number"],
.form-field input[type="password"],
.form-field textarea {
    width: 100%;
    padding: 1.1rem 2rem;
}

// Login or Register
.learn-press-form-login,
.learn-press-form-register {
    max-width: 6rem;
    margin-right: auto;
    margin-bottom: 6rem;
    margin-left: auto;
    padding: 4rem;
    border: 1px solid var(--alpha-change-border-color-light);
    border-radius: 6px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

.learn-press-form-login form > p:last-child {
    margin-bottom: 0;
}

.learn-press-form-login button[type="submit"],
.learn-press-form-register button[type="submit"] {
    width: 100%;
    height: 5rem;
    border: none;
    border-radius: $corner-sm;
    outline: none;
    color: var(--alpha-change-color-light-1);
    background: var(--alpha-primary-color);
    font-size: 1.6rem;
    line-height: 1;
    vertical-align: middle;
}

.lp-password-input {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    
    input[type="password"] {
        padding-right: 2.5rem;
    }
    
    input::-ms-reveal {
        display: none;
    }
    
    .lp-show-password-input {
        position: absolute;
        top: 15px;
        #{$right}: 2rem;
        cursor: pointer;
    }
    
    .lp-show-password-input:after {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f06e";
    }
    
    .lp-show-password-input.display-password:after {
        content: "\f070";
    }
}

.form-desc {
  font-size: smaller;
}

.become-teacher-form {
    width: 90%;
    max-width: 50rem;
    margin: 0 auto;
}

.become-teacher-form .form-field input[type="text"],
.become-teacher-form .form-field input[type="email"],
.become-teacher-form .form-field input[type="number"],
.become-teacher-form .form-field input[type="password"] {
  width: 100%;
}

body div.entry-content > div.learnpress {
  --responsive--aligndefault-width: 100%;
  max-width: var(--lp-content-width, 100%);
}

.learnpress button {
    font-weight: 600;
    transition: color .3s, border-color .3s, background-color .3s, box-shadow .3s, opacity .3s;

    &.slider-button {
        font-weight: 400;
    }
}

// Profile
.lp-user-profile {
    position: relative;
    
    .lp-user-profile-avatar img {
        position: relative;
        width: 100%;
    }
    .lp-user-profile-socials {
        display: flex;
        position: relative;
        z-index: 1;
        margin : 2.5rem 0 4.1rem;
        justify-content: center;
        flex-wrap: wrap;
    }
    .lp-user-profile-socials .social-icon {
        display: inline-block;
        width: 40px;
        height: 40px;
        margin: 7px;
        border: 1px solid var(--alpha-change-border-color);
        color: #777;
        background: var(--alpha-change-color-light-1);
        line-height: 38px;
        font-size: 15px;
        text-align: center;
        &:hover {
            border-color: var(--alpha-primary-color);
            color: var(--alpha-change-color-light-1);
            background: var(--alpha-primary-color);
        }
    }
    .lp-profile-username {
        padding-bottom: 1.6rem;
        color: var(--alpha-change-color-dark-1);
        line-height: 1.4;
        font-size: 3.2rem;
        font-weight: 600;
        text-transform: capitalize;
    }

    .lp-profile-user-bio {
        line-height: 24px;
    }

    .lp-profile-content .lp-profile-right + * {
        margin-top: 5.4rem;
    }
  
    @include mq(lg) {
        aside .lp-profile-right {
            display: none;
        }
    }
    @include mq(lg, 'max') {
        .lp-profile-content .lp-profile-right {
            display: none;
        }
        aside {
            .lp-profile-left {
                width: 40%;
                display: inline-block;
            }
            .lp-profile-right {
                width: calc(60% - 30px);
                display: inline-block;
                vertical-align: top;
                float: $right;
            }
        }
    }
    @include mq(md, 'max') {
        .lp-user-profile-socials {
            margin-left: -5px;
            margin-right: -5px;
        }
        .lp-user-profile-socials a {
            width: 36px;
            height: 36px;
            margin: 5px;
            line-height: 32px;
        }
        // aside {
        //     .lp-profile-left {
        //         width: 40%;
        //     }
        //     .lp-profile-right {
        //         width: calc(60% - 30px);
        //     }
        // }
    }
  
    @include mq(sm, 'max') {
        aside {
            .lp-user-profile-avatar {
                max-width: 200px;
                margin-left: auto;
                margin-right: auto;
            }
            .lp-profile-left,
            .lp-profile-right {
                display: block;
                width: auto;
                float: none;
            }
        }
    }  

    aside {
        float: left;
        width: 360px;
    }
    
    @include mq(lg, 'max') {
        aside {
            width: 100%;
            // margin-top: 58px;
        }
    }

    #profile-nav {
        margin-top: 3rem;
        // border: 1px solid var(--alpha-change-border-color);
        // border-top: 0;
    }
  
    .lp-profile-nav-tabs {
        margin: 0;
        padding: 0;
        list-style: none;

        > li {
            position: relative;
            margin: 0 0 1rem;
            background: var(--alpha-change-color-light-2);
            // border-top: 1px solid var(--alpha-change-border-color);
            transition: background .3s;
        }
        > li a {
            display: block;
            padding: 0 2rem;
            color: var(--alpha-change-color-dark-1);
            line-height: 5.6rem;
            font-size: 1.6rem;
            font-weight: 400;
        }
        
        > li > a {
            padding: side-values(0 2rem 0 5.6rem);
        }
        
        > li > a > i {
            display: inline-block;
            position: absolute;
            left: 24px;
            width: 28px;
            color: var(--alpha-grey-color);
            font-size: 22px;
            line-height: 5.6rem;
            transition: inherit;
        }
        
        > .has-child > a:after {
            content: "\e913";
            float: right;
            // margin-#{$right}: 4px;
            color: var(--alpha-dark-color);
            font-family: $framework-font;
            font-size: 14px;
            font-weight: 900;
            transition: transform .3s, color .3s;
        }

        > li li a {
            border-bottom: 1px solid var(--alpha-traffic-white-color);
        }
        
        > li li a:hover {
            color: var(--alpha-primary-color);
            background: var(--alpha-change-color-light-1);
        }
        
        // > .has-child.active > a:after,
        // > .has-child:hover > a:after {
        //     transform: rotate(180deg);
        // }
        
        // > li.active a {
        //     padding-#{$left}: 4.7rem;
        // }
        
        > .wishlist > a:before {
            content: "\f004";
            position: absolute;
            left: 2.5rem;
            color: var(--alpha-primary-color);
            font-family: "Font Awesome 5 Free";
            font-size: 12px;
            font-weight: 900;
        }
        
        > .wishlist:hover a:before {
            color: var(--alpha-change-color-light-1);
        }
        
        > .logout > a::after {
            display: none;
        }
        
        li > a {
            height: 5.6rem;
        }
        
        li > ul {
            position: absolute;
            z-index: 3;
            top: -9999px;
            left: 100%;
            min-width: 150px;
            margin: 0;
            padding: 0;
            background: var(--alpha-change-color-light-1);
            box-shadow: 0 15px 20px 0 rgba(0, 0, 0, 0.05);
            list-style: none;
            opacity: 0;
            visibility: hidden;
            transform: translateX(-20px);
            transition: transform .3s, opacity .3s, visibility .3s;
        }
        
        li.active,
        li:hover {
            background: var(--alpha-primary-color);
        }
        
        li.active > a,
        li:hover > a {
            color: var(--alpha-change-color-dark-1);
        }
        
        li.active > a i,
        li.active > a:after,
        li:hover > a i,
        li:hover > a:after {
            color: var(--alpha-change-color-dark-1);
        }
        
        li.active > ul,
        li:hover > ul {
            top: 0;
            visibility: visible;
            opacity: 1;
            transform: none;
        }
        
        li.active > ul {
            position: relative;
            left: 0;
        }
        
        li.active > ul .active {
            background: var(--alpha-change-color-light-1);
        }
        
        li.active > ul .active > a {
            color: var(--alpha-primary-color);
        }

        @include mq(lg, max) {
            display: flex;
            overflow: auto;
            background: var(--alpha-change-color-light-2);

            > li {
                margin-bottom: 0;
            }
        }
    }
}

@include mq(lg, 'max') {
    .lp-user-profile {
        // #profile-nav {
        //     margin: 0;
        //     overflow-x: scroll;
        //     // border-top: 1px solid var(--alpha-change-border-color);
        // }

        .lp-profile-nav-tabs {
            width: 100%;
    
            &:after {
                display: table;
                content: "";
                clear: both;
            }
    
            > li {
                // border: none;
                // border-right: 1px solid var(--alpha-change-border-color);
                // float: left;
    
                > a {
                    height: auto;
                    padding-#{$right}: 2.8rem;
                }
            }
            > .has-child a:after,
            > .active.has-child a:after {
                content: none;
            }
            > .active.has-child {
                ul {
                    display: none;
                    width: max-content;
                    transform: translateX(-20%);
                }
                ul:after {
                    display: table;
                    content: "";
                    clear: both;
                    box-shadow: 0 0 0;
                }
                ul li {
                    float: left;
                    border-#{$right}: 1px solid var(--alpha-change-border-color);
                }
                ul li:last-child {
                    border-#{$right}: none;
                }
                ul li a {
                    padding: 0 1rem;
                }
            }
            
            li:hover ul {
                display: none !important;
            }
        }
    }
}

@include mq(sm, 'max') {
    .lp-user-profile {
        // .lp-profile-nav-tabs > li {
        //     max-width: 80px;
        // }
        .lp-profile-nav-tabs > li > a {
            // font-size: 0;
            padding-#{$right}: 1.5rem;
        }
        .lp-profile-nav-tabs > li > a:after {
            margin-#{$left}: 0;
        }
    }
}

.lp-profile-content {
    float: $right;
    width: calc(100% - 425px);
    margin-bottom: 6rem;
}

@include mq(lg, 'max') {
    .lp-profile-content {
        width: 100%;
    }
}

@include mq(md, 'max') {
    .lp-profile-content {
        .learn-press-tabs__nav {
            display: block;
            width: 100%;
            border: 0;
        }
        .learn-press-tabs__nav:after {
            content: "";
            clear: both;
            display: table;
        }
    }
}

.lp-profile-content {
    ul.learn-press-courses {
        // .course {
        //     margin: 0 0 4rem;
        // }

        .course-categories,
        .course-instructor {
            margin-bottom: 1.4rem;
        }
        
        .course-categories {
            padding: 0;
        }
    }
    
    .lp-button {
        display: block;
        margin: 0 auto 5.2rem auto;
        padding: 1.3rem 3.4rem;
        border-color: var(--alpha-change-border-color);

        &:hover {
            border-color: var(--alpha-primary-color);
        }
    }
    
    #profile-content-orders {
        .profile-orders .profile-heading {
            display: none;
        }
        
        .profile-orders table {
            margin-top: 0;
            margin-bottom: 5rem;
        }
        
        .column-order-actions a {
            // margin-#{$right}: 6px;
            padding: .7rem 2.9rem;
            border-radius: 3px;
            border: 1px solid var(--alpha-change-color-light-3);
            font-size: 13px;
            font-weight: 600;
            color: var(--alpha-change-color-dark-1);
            transition: color .3s, border-color .3s;

            &:hover, &:focus {
                color: var(--alpha-primary-color);
                border-color: var(--alpha-primary-color);
            }
        }
    }
}

#profile-content form[name*="profile-privacy"] {
    .form-field-input {
        display: flex;
    }
    .description {
        margin: 0;
        margin-#{$left}: 1rem;
    }
    button {
        color: #fff;
        background: var(--alpha-change-color-dark-1);
        border: none;
        padding: 1rem 2rem;
        margin-top: 1rem;
        transition: opacity .3s;
        &:hover {
            opacity: .9;
        }
    }
}

#dashboard-general-statistic {
    margin-bottom: 5.5rem;
    padding-bottom: 5.5rem;
    border-bottom: 1px solid var(--alpha-change-border-color);

    &:last-child {
        border: none;
    }
}

.dashboard-general-statistic__row {
    display: flex;
    margin: 0 -5px;
    justify-content: center;
    flex-wrap: wrap;

    .statistic-box {
        display: flex;
        flex-flow: column;
        justify-content: center;
        width: calc(20% - 10px);
        margin: 0 5px 10px;
        padding: 20px 10px 20px;
        background-color: var(--alpha-traffic-white-color);
        text-align: center;
        transition: background-color .3s;
        min-width: 120px;
    }
    
    .statistic-box__text {
        margin: 0 0 9px 0;
        font-size: 1.3rem;
        line-height: 1;
    }

    .statistic-box__number {
        color: var(--alpha-change-color-dark-1);
        font-weight: 600;
        line-height: 1;
    }

    .statistic-box:hover {
        background-color: var(--alpha-change-border-color-light);
    }

    &[data-col="2"] .statistic-box {
        width: 50%;
    }

    &[data-col="4"] .statistic-box {
        width: 25%;
    }

    &[data-col="5"] .statistic-box {
        width: 20%;
    }
}

#learn-press-profile-basic-information .form-field,
form[name="profile-change-password"] .form-field {
    margin: 0 10px 20px 10px;
    input {
        height: 5.4rem;
    }
    textarea {
        min-height: 18rem;
        padding: 2rem;
    }
}

#learn-press-profile-basic-information .form-field__50,
form[name="profile-change-password"] .form-field__50 {
    float: left;
    width: calc(50% - 20px);
    margin-right: 10px;
}

@include mq(md, 'max') {
    #learn-press-profile-basic-information .form-field__50,
    form[name="profile-change-password"] .form-field__50 {
        float: none;
        width: 100%;
        margin: 0 0 2.4rem 0;
    }
}

#learn-press-profile-basic-information .form-field__clear,
form[name="profile-change-password"] .form-field__clear {
    clear: both;
}

#learn-press-profile-basic-information button,
form[name="profile-change-password"] button {
    padding: 2rem 4.2rem;
    border: 0;
    color: var(--alpha-change-color-light-1);
    background: var(--alpha-change-color-dark-1);
    font-size: 1.4rem;
    line-height: 1;

    &:hover {
        opacity: 0.9;
    }
}
#learn-press-profile-basic-information {
    margin-top: 7.5rem;
    >p {
        margin: 0;
    }
} 

#learn-press-profile-basic-information .form-fields {
    margin: 0 -10px;

    &:after {
        display: block;
        clear: both;
        content: "";
    }
}

@include mq(md, 'max') {
    #learn-press-profile-basic-information .form-fields {
        margin: 0;
    }
}

#lp-user-edit-avatar {
    position: relative;
    margin-top: 8rem;
    margin-bottom: 5rem;

    img {
        vertical-align: top;
    }
}

.lp-avatar-crop-image {
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--alpha-change-border-color);

    .crop-container {
        overflow: hidden;
        position: absolute;
        width: 100%;
        height: 100%;

        img {
            position: absolute;
            left: 0 !important;
            max-width: none;
            margin-left: 50%;
            line-height: 1;
            vertical-align: middle;
            transform: translateX(-50%);
        }
    }
    .lp-crop-controls {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 6rem;
        opacity: 0;

        &:before {
            content: "";
            display: block;
            width: 100%;
            height: 6rem;
            background: rgba(34, 34, 34, 0.7);
        }
    }
    .lp-zoom {
        position: absolute;
        top: 50%;
        #{$right}: 15rem;
        #{$left}: 2rem;
        margin-top: -1px;
    }
    .ui-slider {
        position: absolute;
        width: 100%;
        height: 2px;
        margin-top: .1rem;
        background: #fff;
        cursor: move;
    }
    .ui-slider-handle {
        width: 2rem;
        height: 2rem;
        margin-top: -1.2rem;
        margin-#{$left}: -1rem;
        background: var(--alpha-primary-color);
    }
    .lp-save-upload,
    .lp-cancel-upload {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 6rem;
        height: 6rem;
        line-height: 6rem;
        color: #fff;
        background: #222;
        font-size: 2rem;
        text-align: center;
        cursor: pointer;

        &:hover {
            background-color: var(--alpha-primary-color);   
        }
    }
    .lp-save-upload {
        #{$right}: 6rem;
    }
    .lp-crop-area {
        position: absolute;
        top: 0;
        left: 50%;
        border: 2px dashed #777;
        transform: translateX(-50%);
        pointer-events: none;

        &:before,
        &:after {
            content: "";
            display: block;
            position: absolute;
            top: -2px;
            bottom: -2px;
            width: 1000px;
            opacity: 0.7;
            background: #777;
        }
        
        &:before {
            left: -2px;
            transform: translateX(-100%);
        }
        
        &:after {
            left: 100%;
            margin-left: 2px;
        }
    }
}


#lp-user-edit-avatar:hover .lp-crop-controls {
  opacity: 1;
}

#lp-user-edit-avatar {
    .moxie-shim {
        display: none;
    }
    .lp-avatar-preview {
        position: relative;
        overflow: hidden;
        // margin: 0 auto;
        &:hover #lp-avatar-actions {
            transform: translateY(0);
            opacity: 1;
        }
    }
    .profile-picture {
        display: none;
        width: 100%;
        margin-right: -100%;

        img {
            width: 100%;
            height: 100%;
            border-radius: 0;
        }
    }
    .profile-avatar-current {
        display: block;
    }
    #lp-avatar-actions {
        display: flex;
        position: absolute;
        bottom: 0;
        margin: 0;
        justify-content: center;
        background: rgba(50,51,52,0.9);
        opacity: 0;
        transform: translateY(100%);
        transition: opacity .3s, transform .3s;

        a {
            display: inline-block;
            z-index: 10;
            height: 50px;
            padding: 0 3rem;
            color: #fff;
            line-height: 50px;
            // text-align: center;
            flex: 0 0 auto;
            font-size: 13px;
            &:last-child {
                border-left: 1px solid rgba(255,255,255,0.1);
            }
            &:hover {
                color: var(--alpha-primary-color);
            }
        }
        i {
            margin-#{$right}: 10px;
        }  
        .fa-upload:before {
            position: relative;
            top: 1px;
            content: '\e957';
            font-family: $theme-font;
            font-weight: 400;
            font-size: 1.1em;
        }
    }
    a#lp-remove-upload-photo {
        display: none;
        // margin-#{$left}: 1rem;
    }
    &[data-custom="yes"] #lp-remove-upload-photo {
        display: block;
    }
}

.recover-order__title {
    margin-bottom: 0;
    color: var(--alpha-change-color-dark-1);
}

// .recover-order__description {
//     font-size: 0.8em;
//     font-style: italic;
// }

.order-recover {
    display: flex;

    > .button-recover-order {
        margin: 0;
        margin-#{$left}: 1rem;
        padding: 1.3rem 3.4rem;
        flex: 0 0 auto;

        &.loading::before {
            display: inline-block;
            margin-#{$right}: 5px;
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            content: "\f110";
            animation: rotating4 1s linear infinite;
        }
    }

    @include mq(sm, 'max') {
        & {
            flex-direction: column;
            justify-content: center;
            .lp-button {
                align-self: center;
                margin: 2rem 0 0;
            }
        }
    }

    input[type="text"] {
        padding: 0 2.2rem;
        flex: 1 1 auto;
        min-height: 4.8rem;
    }
}

// Single Course
.course-tabs {
    .course-tab-panel {
        display: none;
        padding-top: 3rem;

        &.active {
            display: block;
        }
    }
    
    &.show-all .course-tab-panel {
        margin-bottom: 4rem;
    }
    .lp-course-author {
        display: flex;
        margin-bottom: 4rem;
                
        @include mq(md, 'max') {
            & {
                flex-direction: column;
                padding: 0 1.5rem;
            }
        }
    }
    
    .course-author__pull-left {
        margin-#{$right}: 3rem;
        text-align: center;
        align-items: center;
        
        @include mq(md, 'max') {
            & {
                margin-#{$right}: 0;
                margin-bottom: 3rem;
            }
        }
        img {
            width: 100%;
            max-width: 96px;
            margin-bottom: 2rem;
            border-radius: 50%;
            object-fit: cover;
            object-position: center;
        }
    }
    
   .course-author__pull-right {
        flex: 1;
        
        @include mq(md, 'max') {
            & {
                width: 100%;
                text-align: center;
            }
        }
    }
    

    .author-title {
        margin-bottom: 1.8rem;

        a {
            color: var(--alpha-change-color-dark-1);
            font-size: 1.8rem;
            font-weight: 600;
            text-transform: capitalize;

            &:hover {
                color: var(--alpha-primary-color);
            }
        }
    }
    

    .author-socials {
        display: grid;
        grid-template-columns: repeat(4, 33px);
        gap: 10px;
        justify-content: center;

        > a {
            display: inline-block;
            width: 33px;
            height: 33px;
            margin: 0;
            border: 1px solid #ededed;
            border-radius: 50%;
            box-shadow: none;
            font-size: 14px;
            line-height: 33px;
            text-align: center;
            vertical-align: middle;
            transition: all 0.3s;
            

            &:hover {
                border-color: var(--alpha-primary-color);
                color: var(--alpha-change-color-light-1);
                background: var(--alpha-primary-color);
            }
        }
    }

    .fa-googleplus:before {
        content: "\f0d5";
    }
  
}

#learn-press-course {
    .lp-list-co-instructor {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
    .lp-list-co-instructor__item {
        display: flex;
        column-gap: 30px;
        
        @include mq(md, 'max') {
            & {
                align-items: center;
                flex-direction: column;
                padding: 0 15px;
                column-gap: 0;
                row-gap: 10px;
            }
        }
    }
    .lp-list-co-instructor__avatar > img {
        width: 100%;
        max-width: 96px;
        border-radius: 999px;
    }
    

    .lp-list-co-instructor__bio {
        flex: 1;
    }
    
    .lp-list-co-instructor__bio__top > a {
        font-size: 1.8rem;
        font-weight: 600;
    }
    
    .lp-list-co-instructor__bio__description {
        font-size: 1rem;
    }
}

#learn-press-course {
    .course-price {
        margin: side-values(1rem 0 1rem 3.2rem);
        text-align: center;
        color: var(--alpha-change-color-dark-1);
    }
    
    .origin-price,
    .price {
        vertical-align: middle;
    }
    
    .origin-price {
        margin-right: 10px;
        opacity: .5;
        font-size: 2rem;
        text-decoration: line-through;
    }
    
    .price {
        margin: 0;
        font-size: 2.4rem;
        font-weight: 600;
    }
    .lp-course-buttons {
        margin-bottom: 2rem;
    }
    .course-featured-review {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        margin-bottom: 0;
    }
    .featured-review__title {
        margin-#{$right}: auto;
        margin-bottom: 0;
        font-size: 2rem;
    }
    .featured-review__stars {
        padding: 5px 0;
        color: var(--alpha-primary-color);
        font-size: 1.5rem;
        letter-spacing: -.1em;
    }
    .featured-review__content {
        flex: 0 0 100%;
        margin-top: 1rem;

        p:last-child {
            margin: 0;
        }
    }
    .course-tags a {
        display: inline-block;
        margin: side-values(.5rem .6rem .5rem 0);
        padding: .7rem 1.7rem;
        font-size: 1.2rem;
        border: 2px solid var(--alpha-change-border-color);
        color: var(--alpha-body-color,$body-color);
        line-height: 1.3;
        transition: color 0.3s, border-color 0.3s;
        text-transform: capitalize;
    }
}

.edit-content {
    margin-#{$left}: 5px;
}

.tab .learn-press-nav-tabs {
    position: relative;
    margin: -3rem -3rem 0;
    list-style: none;
}

.learn-press-nav-tabs {
    .course-nav {
        justify-content: center;
        border-radius: $corner-md;
        margin: 3rem 3rem 0;
        padding: 0;
    }
    .course-nav label {
        padding: 2rem 0;
    }
    .course-nav a {
        display: inline-block;
        padding: 1rem 2rem;
    }
    
    &[data-tabs] .course-nav a {
        width: 100%;
        text-align: center;
    }
    
    &:after {
        content: "";
        position: absolute;
        left: 3rem;
        right: 3rem;
        top: 100%;
        border-bottom: 1px solid var(--alpha-change-border-color);
    }
}


.course-item-popup #tab-curriculum {
    display: block;
}

.course-curriculum {
    .curriculum-sections {
        position: relative;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .section {
        margin: 0;
        padding: 0 0 1rem 0;

        &:last-child {
            padding: 0;
        }          
    }
    .section-header {
        display: table;
        width: 100%;
        padding: side-values(1.9rem .5rem 1.9rem 2.5rem);
        background: var(--alpha-change-color-light-2);
        box-sizing: border-box;

        sup {
            font-size: .67em;
            color: var(--alpha-grey-color);
            font-weight: 400;
            #{$left}: .5rem;
            top: -2px;
        }
    }
    .section-empty {
        .section-header {
            margin-bottom: 2rem;
        }
        .learn-press-message {
            margin-right: 15px;
            margin-left: 15px;
        }
    }
         
    .section-title {
        padding: 0;
        color: var(--alpha-heading-color);
        font-size: 1.6rem;
        text-transform: capitalize;
        margin: 0;
    }
    .section-desc {
        margin: 5px 0 0 0;
        font-size: 12px;
        font-weight: 400;
    }
    .section-meta {
        display: block;
        padding-top: 1.7rem;
        font-size: 14px;
        text-align: $right;
        vertical-align: middle;
        white-space: nowrap;
    }
    .section-header {
        margin-bottom: -1rem;

        .section-left {
            vertical-align: top;
        }
        .section-left .section-title {
            padding: 0;
            text-transform: capitalize;
        }
    }
    .section-title {
        span.show-desc {
            display: inline-block;
            position: absolute;
            top: 50%;
            right: 3rem;
            width: 2rem;
            height: 2rem;
            transform: translate(0, -50%);

            &:before {
                font-family: "Font Awesome 5 Free";
                font-size: 1.8rem;
                font-weight: 900;
                content: "\f107";
            }

            &:hover:before {
                border-top-color: var(--alpha-light-color);
            }
        }
    }
    .section-content {
        border: 10px solid var(--alpha-change-color-light-2);
        border-top-width: 0;
        padding: 3rem 4rem 4rem;
        list-style: none;

        @include mq(xs, 'max') {
            padding: 1rem 2rem 2rem;
        }
    }
    .closed .section-content {
        padding-top: 0;
        padding-bottom: 0;
    }
    .course-item {
        border-bottom: 1px solid var(--alpha-change-border-color-light);
        
        > span {
            display: flex;
            width: 2.8rem;
            font-size: 1.6rem;
            align-items: center;
        }
    }
    .section-item-link {
        display: table;
        line-height: 1.5;

        &:hover {
            .item-name {
                color: var(--alpha-primary-color);
            }
        }

        &:before {
            display: table-cell;
            #{$left}: 0;
            width: 2rem;
            color: var(--alpha-grey-color);
            font-family: "Font Awesome 5 Free";
            font-size: 1.8rem;
            vertical-align: middle;
            transition: $left linear 0.15s;
        }
    }
    @include mq(md, 'max') {
        .course-item-meta {
            display: flex;
            flex-direction: column-reverse;
            align-items: flex-end;
        }
    }
    
    .course-item {
        .item-icon,
        .item-name {
            display: table-cell;
            padding: 1.7rem 1.6rem;
            color: var(--alpha-change-color-dark-1);
            font-size: 1.6rem;
            font-weight: 600;
            vertical-align: middle;
            transition: color .3s;
        }

        .item-icon:before {
            font-size: 1.8rem;
        }
        
        .item-icon.icon-lock {
            float: right;
            margin-top: 1.5rem;
        }
    }
    .course-item-meta {
        display: table-cell;
        padding: 10px 0;
        text-align: $right;
        vertical-align: middle;
        white-space: nowrap;
    }
    .item-meta {
        display: inline-block;
        margin-left: 1.4rem;
        padding: 0 .8rem;
        border-radius: 3px;
        color: var(--alpha-change-color-light-1);
        line-height: 23px;
        text-align: center;
        vertical-align: middle;
    }
    .final-quiz {
        background: #14c4ff;
    }
    .trans {
        padding: 0;
    }
    .course-item-meta .item-meta {
        color: var(--alpha-grey-color);
        border: 1px solid;

        &:before {
            vertical-align: baseline;
            content: attr(data-preview);
        }
    }
    .item-meta.course-item-status {
        padding: 0;
        border-radius: 50%;
        box-sizing: border-box;
        
        &:before {
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            vertical-align: middle;
            text-transform: lowercase;
            content: "\f00c";
        }
    }
    .course-item-lp_quiz .section-item-link:before {
        content: "\f059";
    }
    .course-item-lp_lesson .section-item-link:before {
        content: "\f15b";
    }
    .course-item-lp_lesson.course-item-type-video .section-item-link:before {
        content: "\f03d";
    }
    .course-item-lp_lesson.course-item-type-audio .section-item-link:before {
        content: "\f028";
    }
    .item-meta.course-item-status {
        border: 0;
    }
    .item-locked .course-item-status::before {
        color: var(--alpha-change-border-color);
        content: "\f023";
    }
    .has-status {
        padding-top: 1px;
    }
    .status-completed .course-item-status:before,
    .status-evaluated .course-item-status:before {
        color: var(--alpha-success-color);
    }
    .item-failed .course-item-status:before, 
    .failed .course-item-status:before {
        border-color: var(--alpha-danger-color);
        color: var(--alpha-danger-color);
        content: "\f00d";
    }
    .viewed .course-item-status {
        display: none;
    }
    .current {
        padding-left: 1rem;
        border-left: 4px solid var(--alpha-primary-color);

        a:before {
            #{$left}: 1rem;
        }
    }
    
    .section-title.c + .section-desc {
        display: block;
    }

    .section-title.c span.show-desc::before {
      transform: rotate(180deg);
      top: 0;
    }
    .section-toggle i {
        font-size: 1.6rem;
        font-family: $framework-font;
    }
    .section-toggle .fa-caret-down:before {
        content: '\e90f';
    }
    .section-toggle .fa-caret-up:before {
        content: '\e90e';
    }
    @include mq(xs, 'max') {
        .item-meta.count-questions {
            display: none;
        }
    }
}

.course-item-popupx {
  overflow: hidden;
  _opacity: 0;
  
    #learn-press-course-curriculum {
        overflow: auto;
        position: fixed;
        z-index: 1002;
        top: 32px;
        bottom: 0;
        left: 0;
        width: 400px;
        border-right: 1px solid var(--alpha-body-color);
        background: var(--alpha-change-color-light-1);
    }
    
    #learn-press-course-curriculum .section-header {
        padding: 0 15px;
    }
    
    #learn-press-course-curriculum .section-desc {
        margin: -10px 0 5px;
    }
    
    #learn-press-course-curriculum .course-item {
        padding-right: 15px;
        padding-left: 15px;
    }
    
    #learn-press-course-curriculum .course-item a:before {
        left: 15px;
    }
    
    #learn-press-content-item {
        overflow: hidden;
        position: fixed;
        z-index: 1002;
        top: 32px;
        right: 0;
        bottom: 0;
        left: 400px;
        background: var(--alpha-change-color-light-1);
    }
    
    #learn-press-content-item .content-item-wrap {
        max-width: 900px;
        margin: 10px auto;
    }
    
    #learn-press-content-item .course-item-title {
        font-size: 1.4rem;
    }
    
    #learn-press-content-item .content-question-summary .review-heading {
        text-align: center;
    }
    
    #learn-press-content-item .content-question-summary .question-title {
        margin-bottom: 10px;
        font-size: 1.2rem;
    }
    
    #content-item-nav {
        position: fixed;
        z-index: 99999;
        right: 0;
        bottom: 0;
        left: 400px;
        height: 60px;
        border-top: 1px solid var(--alpha-change-border-color);
        background: var(--alpha-traffic-white-color);
    }
    
    #content-item-nav .content-item-nav-wrap {
        max-width: 900px;
        margin: 10px auto;
    }
    
    #content-item-nav button {
        height: 4rem;
        padding: 0 2rem;
        line-height: 4rem;
    }
    
    .comment-form-textarea {
        box-sizing: border-box;
    }
    
    &.wpadminbar #learn-press-course-curriculum,
    &.wpadminbar #learn-press-content-item {
        top: 92px;
    }
    
    &.wpadminbar #course-item-content-header {
        top: 32px;
    }
    
    &.wpadminbar .content-item-description {
        margin-bottom: 2rem;
    }
    
    .content-item-summary {
        margin-bottom: 5rem;
    }
    
    .content-item-summary > h3 {
        margin-bottom: 2rem;
    }
    
    .content-item-summary.content-item-video .entry-video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        background: #000;
        line-height: 1;
    }
    
    .content-item-summary.content-item-video .entry-video iframe {
        width: 100%;
        max-width: 900px;
        margin-bottom: 0;
        vertical-align: top;
    }
    
    .learn-press-content-protected-message {
        margin-bottom: 5rem;
        padding: 2rem;
        background: #ffe0e0;
    }
    
    &.content-only #learn-press-content-item {
        z-index: 9999999;
        top: 0;
        bottom: 0;
        left: 0;
    }
    
    &.content-only #learn-press-content-item #course-item-content-header,
    &.content-only #learn-press-content-item #course-item-content-footer {
        display: none;
    }
    
    &.content-only #learn-press-content-item .content-item-scrollable {
        bottom: 0;
    }
}

body #ifr-course-item {
    position: absolute;
    z-index: 999999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--alpha-change-color-light-1);
}

.content-item-summary .form-button-finish-course,
.lp-quiz-buttons .form-button-finish-course {
    float: $right;
}

#wp-toolbar #wp-admin-bar-edit-lp_quiz .ab-item:before,
#wp-toolbar #wp-admin-bar-edit-lp_lesson .ab-item:before,
#wp-toolbar #wp-admin-bar-edit-lp_question .ab-item:before {
    top: 2px;
    font-family: "Font Awesome 5 Free";
}

#wp-toolbar #wp-admin-bar-edit-lp_quiz .ab-item:before {
  content: "\f017";
}

#wp-toolbar #wp-admin-bar-edit-lp_lesson .ab-item:before {
  content: "\f15c";
}

#wp-toolbar #wp-admin-bar-edit-lp_question .ab-item:before {
  content: "\f29c";
}

.scroll-wrapper {
    overflow: hidden;
    opacity: 0;

    .scroll-element {
        background: transparent;
    }
    
    .scroll-y.scroll-scrolly_visible {
        transition: opacity .3s;
    }
    
    &:hover .scroll-y.scroll-scrolly_visible {
        opacity: .7;
    }
}


.course-remaining-time .lp-label.label-enrolled {
  font-size: inherit;
}

.learn-press-course-results-progress {
    margin-#{$right}: -4%;
  
    .items-progress,
    .course-progress {
        float: $left;
        width: 46%;
        margin-#{$right}: 4%;
        margin-bottom: 3rem;
    }

    .items-progress .items-progress__heading,
    .course-progress .items-progress__heading {
        margin-bottom: 1rem;
    }

    .items-progress .lp-progress-bar,
    .course-progress .lp-progress-bar {
        overflow: hidden;
        position: relative;
        height: 10px;
        border-radius: $corner-md;
    }

    .items-progress .lp-progress-bar .lp-progress-value,
    .course-progress .lp-progress-bar .lp-progress-value {
        position: absolute;
        width: 100%;
        height: 10px;
        margin-#{$left}: -100%;
        border-radius: $corner-md;
    }

    .items-progress .lp-course-status .grade.failed,
    .course-progress .lp-course-status .grade.failed {
        background: var(--alpha-danger-color);
    }

    .items-progress .lp-course-status .grade.passed,
    .course-progress .lp-course-status .grade.passed {
        background: #3eadff;
    }

    &:after {
        display: block;
        clear: both;
        content: "";
    }
}

.learn-press-form.completed button:before {
    content: "\f00c";
    margin-#{$right}: 1rem;
    vertical-align: middle;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 1.8rem;
}

.lp-course-progress {
    position: relative;
    
    .lp-passing-conditional {
        position: absolute;
        top: 0;
        width: 3px;
        height: 6px;
        margin-left: -1px;
        background: var(--alpha-change-color-light-3);
    }
}


.viewing-course-item #learn-press-course-curriculum .section-header .section-desc {
  display: none;
}

/***********/
.course-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.course-meta__pull-left,
.course-meta__pull-right {
    display: flex;
    flex-wrap: wrap;
}

.course-meta__pull-left .meta-item {
    margin-#{$right}: 1rem;
}

.course-meta__pull-right {
    flex: 0 0 50%;
}

.course-meta__pull-right .meta-item {
    margin-#{$left}: 1rem;
}

.course-meta-primary .meta-item {
    flex: 1;
}

.course-meta.two-columns .course-meta {
    flex: 1;
}

.course-extra-box {
    margin-bottom: 3px;
    border-radius: $corner-sm;
}

.course-extra-box__title {
    --extra-height: 5.8rem;
    display: flex;
    align-items: center;
    position: relative;
    height: var(--extra-height);
    margin: 0;
    padding: side-values(0 4.5rem 0 2.5rem);
    background: var(--alpha-change-color-light-2);
    font-size: 1.6rem;
    font-weight: 600;
    cursor: pointer;
}

.course-extra-box__title::after {
  position: absolute;
  top: 0;
  #{$right}: 2rem;
  color: var(--alpha-dark-body-color);
  font-family: "Font Awesome 5 Free";
  line-height: var(--extra-height);
  content: "\f0d7";
}

.course-extra-box__content {
  display: none;
}

.course-extra-box__content-inner {
    border: 10px solid var(--alpha-change-color-light-2);
    border-top-width: 0;
    padding: 3rem 4rem 4rem;
    list-style: none;
}

.course-extra-box__content {
    ul,
    li {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    li + li {
        margin-top: 5px;
    }

    li:before {
        content: "\f00c";
        margin-#{$right}: 8px;
        color: var(--alpha-primary-color);
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
    }
}


.course-extra-box:last-child {
    margin-bottom: 6rem;
}

.course-extra-box.active .course-extra-box__title:after {
  content: "\f0d8";
}

input[name="course-extra-box-ratio"] {
    display: none;
}

input[name="course-extra-box-ratio"]:checked + .course-extra-box .course-extra-box__content {
    display: block;
}

input[name="course-extra-box-ratio"]:checked + .course-extra-box .course-extra-box__content-inner {
    transform: scale(1);
}

@include mq(md, 'max') {
    .course-tab-panel-faqs {
        padding: 0 15px;
    }
}

.course-tab-panel-faqs {
    .course-faqs-box {
        margin-bottom: 2rem;
        border: 1px solid var(--alpha-change-border-color);
        border-radius: $corner-sm;
    }
    .course-faqs-box__title {
        display: block;
        position: relative;
        margin: 0;
        padding: side-values(2rem 4.5rem 2rem 2.5rem);
        color: var(--alpha-heading-color);
        cursor: pointer;

        &:after {
            position: absolute;
            top: 50%;
            #{$right}: 2.8rem;
            color: #6c6c6c;
            font-family: "Font Awesome 5 Free";
            font-size: 12px;
            font-weight: 900;
            content: "\f078";
            transform: translateY(-50%);
        }
    }
    .course-faqs-box__content {
        display: none;
    }
    .course-faqs-box__content-inner {
        padding: 0 2.8rem 3.3rem 2.8rem;
        animation-name: course-faqs-box__content-inner-transform;
        animation-duration: 0.3s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: 1;
        animation-direction: normal;

        p:last-child {
            margin: 0;
        }
    }
    .course-faqs-box:last-child {
        margin-bottom: 4rem;
    }
    .course-faqs-box:hover .course-faqs-box__title {
        color: var(--alpha-primary-color);
    }
}

input[name="course-faqs-box-ratio"] {
  display: none;
}

input[name="course-faqs-box-ratio"]:checked + .course-faqs-box .course-faqs-box__content {
  display: block;
}

input[name="course-faqs-box-ratio"]:checked + .course-faqs-box .course-faqs-box__title {
  color: var(--alpha-primary-color);
}

input[name="course-faqs-box-ratio"]:checked + .course-faqs-box .course-faqs-box__title:after {
  content: "\f077";
}

@keyframes course-faqs-box__content-inner-transform {
    from {
        opacity: 0;
        transform: translateX(5%);
    }
    to {
        opacity: 1;
        transform: translateX(0%);
    }
}

/***********/

@include mq(xl, 'max') {
    body.course-item-popup #learn-press-course-curriculum,
    .course-item-popupx #learn-press-course-curriculum {
        width: 300px;
    }
    body.course-item-popup #content-item-nav,
    body.course-item-popup #learn-press-content-item,
    body.course-item-popup #course-item-content-footer,
    .course-item-popupx #content-item-nav,
    .course-item-popupx #learn-press-content-item,
    .course-item-popupx #course-item-content-footer {
        left: 300px;
    }
    body.course-item-popup #learn-press-course-curriculum .progress-bg {
        width: 40px;
    }
    body.course-item-popup .section-desc {
        display: none;
    }
    .course-item-popupx #learn-press-content-item .content-item-nav-wrap,
    .course-item-popupx #learn-press-content-item .content-item-wrap {
        width: 90%;
    }
}

@include mq(md, 'max') {
    body.course-item-popup #learn-press-course-curriculum {
        width: 200px;
    }
    body.course-item-popup #content-item-nav,
    body.course-item-popup #learn-press-content-item,
    body.course-item-popup #course-item-content-footer {
        left: 200px;
    }
    body.course-item-popup #learn-press-content-item .content-item-nav-wrap,
    body.course-item-popup #learn-press-content-item .content-item-wrap {
        width: 90%;
    }
    body.course-item-popup.wpadminbar #learn-press-content-item,
    body.course-item-popup.wpadminbar #learn-press-course-curriculum {
        top: 106px;
    }
    body.course-item-popup.wpadminbar #course-item-content-header {
        top: 46px;
    }
    .learn-press-course-results-progress {
        margin-right: 0%;
    }
    .learn-press-course-results-progress .items-progress,
    .learn-press-course-results-progress .course-progress {
        float: none;
        width: 100%;
        margin-right: 0%;
        margin-bottom: 2rem;
    }
}

.lp-quiz-buttons {
  margin-bottom: 2rem;
  display: block;
  clear: both;
  content: "";
}

.quiz-progress {
    margin-bottom: 3rem;
    background: #e7f7ff;

    .progress-items {
        display: flex;
    }
    .progress-item {
        position: relative;
        font-size: 1.5rem;
        flex: 1;
    }
    .progress-number,
    .progress-label {
        display: block;
        line-height: 1;
        text-align: center;
    }

    .progress-number {
        margin: 1.5rem 0 1rem 0;
        font-size: 2rem;
    }

    .progress-label {
        margin-bottom: 1.5rem;
        font-size: 14px;
    }

    .progress-item i {
        display: none;
        float: $left;
        width: 6rem;
        height: 6rem;
        color: var(--alpha-change-color-light-1);
        background: var(--alpha-primary-color);
        font-size: 3rem;
        line-height: 6rem;
        text-align: center;
    }

    .progress-item:after {
        content: "";
        display: block;
        clear: both;
    }
}

.answer-options {
    margin: 0;
    padding: 0;
    list-style: none;

    .answer-option {
        display: flex;
        overflow: hidden;
        position: relative;
        margin: 0 0 1.8rem 0;
        padding: 1rem;
        background: var(--alpha-traffic-white-color);
        font-size: 2rem;
        cursor: pointer;
        border-radius: $corner-sm;
        transition: background linear 0.25s;
    }
    .option-title {
        display: table-cell;
        font-size: smaller;

        &:before {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            width: 3px;
            background: var(--alpha-change-border-color);
            content: "";
            transition: background linear 0.25s;
        }
    }
    .option-title-content {
        display: inline-block;
        vertical-align: middle;
    }
}

.answer-options .answer-option input[type="checkbox"]:checked ~ .option-title .option-title-content,
.answer-options .answer-option input[type="radio"]:checked ~ .option-title .option-title-content {
    position: relative;
}

.answer-options .answer-option input[type="checkbox"]:checked ~ .option-title:before,
.answer-options .answer-option input[type="radio"]:checked ~ .option-title:before {
    background: var(--alpha-primary-color);
}

.answer-options .answer-option input[type="checkbox"]:checked::after,
.answer-options .answer-option input[type="radio"]:checked::after {
    opacity: 1;
}

.answer-options {
    .option-title {
        margin: 0;
    }
    .answer-option:hover {
        background: #e1f5ff;
    }
    .answer-correct {
        background: #e1f5ff;
    }
}

.answer-options .answer-correct input[type="radio"]:checked ~ .option-title:before,
.answer-options .answer-correct input[type="checkbox"]:checked ~ .option-title:before {
    background: #e1f5ff;
}

.answer-options .answered-correct input[type="radio"]:checked ~ .option-title:before,
.answer-options .answered-correct input[type="checkbox"]:checked ~ .option-title:before {
    background: var(--alpha-primary-color);
}

.answer-options .answered-wrong input[type="radio"]:before, 
.answer-options .answered-wrong input[type="radio"]:after,
.answer-options .answered-wrong input[type="checkbox"]:before,
.answer-options .answered-wrong input[type="checkbox"]:after {
    border-color: var(--alpha-danger-color);
}

.answer-options .answered-wrong input[type="radio"]:checked ~ .option-title:before,
.answer-options .answered-wrong input[type="checkbox"]:checked ~ .option-title:before {
    background: var(--alpha-danger-color);
}

button[data-counter] {
    position: relative;
}

button[data-counter]:after {
    padding-#{$left}: 5px;
    content: "(+" attr(data-counter) ")";
}

.quiz-result {
    max-width: 320px;
    margin: 2rem auto 4.8rem;
    text-align: center;

    .result-heading {
        display: none;
    }
    &.passed .result-message {
        background: var(--alpha-success-color);

        &:after {
            content: "\f00c";
        }
    }
    .result-message {
        margin-bottom: 3rem;
        padding: 1rem 0;
        color: var(--alpha-change-color-light-1);
        background: var(--alpha-danger-color);
        font-size: 1.6rem;
        border-radius: $corner-sm;

        &:after {
            content: "\f00d";
            margin-#{$left}: 1rem;
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
        }
    }
    .result-achieved,
    .result-require {
        display: inline-block;
        margin: 0 auto;
    }
    .result-achieved {
        padding-bottom: 7px;
        border-bottom: 1px solid var(--alpha-change-border-color);
        color: var(--alpha-change-color-dark-1);
        font-size: 2.8rem;
        font-weight: 600;
        line-height: 1;
    }
    .result-require {
        display: block;
        padding-top: 7px;
        font-size: 1.6rem;
        line-height: 1;
    }
    
    &.passed .result-achieved {
        color: var(--alpha-info-color);
    }
    
    &.passed .result-message strong {
        color: var(--alpha-info-color);
    }
    .result-statistic {
        margin: 0;
        padding: 0;
        text-align: left;
        list-style: none;
    }
    .result-statistic-field {
        display: flex;
        margin: 0;

        span,
        p {
            margin: 0;
            flex: 1;
        }
        span {
            font-size: 1.6rem;
            line-height: 3.5rem;

            &:before {
                display: inline-block;
                width: 1.5rem;
                margin-#{$right}: 1rem;
                color: var(--alpha-primary-color);
                font-family: "Font Awesome 5 Free";
                font-size: 1.6rem;
                font-weight: 900;
            }
        }

        p {
            color: var(--alpha-change-color-dark-1);
            font-size: 1.6rem;
            font-weight: 600;
            line-height: 3.5rem;
            text-align: right;
        }
    }
    .result-time-spend label:before {
        content: "\f017";
        font-weight: 400;
    }
    .result-point label:before {
        content: "\f005";
        font-weight: 400;
    }
    .result-questions label:before {
        font-weight: 400;
        content: "\f059";
    }
    
    .result-questions-correct label:before {
        content: "\f00c";
        color: var(--alpha-success-color);
    }
    
    .result-questions-wrong label:before {
        content: "\f00d";
        color: var(--alpha-danger-color);
    }
    
    .result-questions-skipped label:before {
        content: "\f2f5";
        color: var(--alpha-change-border-color);
    }
  
    
}

.quiz-status {
    position: sticky;
    z-index: 99;
    top: 0;
    right: 0;
    left: 0;
    margin: 0 0 3.5rem 0;
}

.quiz-status > div {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    max-width: 792px;
    height: 6rem;
    margin: 0 auto;
    padding: .5rem 1rem .5rem 3rem;
    border-radius: 4px;
    background: var(--alpha-change-color-light-2);
    justify-content: center;
    align-items: center;
}

@include mq(xs, 'max') {
    .quiz-status > div {
        display: block;
        height: auto;
        text-align: center;
    }
}

.quiz-status > div > div {
    display: flex;
    flex-direction: row-reverse;
    flex: 0 0 50%;
    align-items: center;
}

.quiz-status > div .current-point {
    display: none;
}

.quiz-status .questions-index {
    display: inline-block;
    color: var(--alpha-dark-body-color);
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 2.6rem;
}

.quiz-status .questions-index span {
    color: var(--alpha-change-color-dark-1);
    font-weight: 600;
}

.quiz-status .countdown {
    position: relative;
    min-width: 100px;
    margin-right: 5px;
    padding: side-values(1.4rem 2.9rem 1.4rem 3.9rem);
    color: var(--alpha-change-color-dark-1);
    background: var(--alpha-change-color-light-1);
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    text-align: center;
}

.quiz-status .countdown .fas {
    position: absolute;
    top: 50%;
    left: 15px;
    color: var(--alpha-change-color-dark-1);
    font-size: 14px;
    transform: translateY(-50%);
}

.quiz-status .countdown .clock {
    display: none;
    width: 40px;
    height: 40px;
}

.quiz-status .countdown .clock:before {
    position: absolute;
    width: 40px;
    height: 40px;
    border: 4px solid #b1c1e6;
    border-radius: 50%;
    content: "";
    box-sizing: border-box;
}

.quiz-status .countdown .clock .circle-progress-bar {
    display: inline-block;
    position: relative;
    width: 40px;
    height: 40px;
    stroke: #5383f7;
}

.quiz-status .countdown .clock .circle-progress-bar .circle-progress-bar__circle {
    transition: 0.35s stroke-dashoffset;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

.quiz-status .countdown .clock.x .circle-progress-bar__circle {
    stroke: var(--alpha-danger-color);
}

.quiz-status .submit-quiz button {
    margin: 0 0 0 1rem;
}

.quiz-intro {
    display: flex;
    margin: 0 0 2rem;
    padding: 0;
    list-style: none;
    flex-flow: row wrap;
}

@include mq(md, 'max') {
    .quiz-intro {
        padding-right: 10px;
        padding-left: 10px;
        justify-content: space-between;
    }
}

.quiz-intro-item {
    display: flex;
    margin: 0 4rem 0 0;
    align-items: center;
}

@include mq(md, 'max') {
    .quiz-intro-item {
        margin: 0 2rem 0 0;
    }
}

.quiz-intro-item:before {
    position: relative;
    top: -2px;
    margin-#{$right}: 1rem;
    color: var(--alpha-grey-color);
    font-family: "Font Awesome 5 Free";
    font-size: 1.6rem;
    font-weight: 900;
}

.quiz-intro-item--passing-grade {
  order: 2;
}

.quiz-intro-item--passing-grade:before {
  content: "\f012";
}

.quiz-intro-item--questions-count {
  order: 1;
}

.quiz-intro-item--questions-count:before {
  content: "\f12e";
}

.quiz-intro-item--duration {
  order: 2;
}

.quiz-intro-item--duration:before {
  content: "\f017";
}

.quiz-intro-item__title {
    margin: 0;
    padding: 0 .8rem 0 0;
    color: var(--alpha-heading-color);
    font-size: 1.6rem;
}

.quiz-intro-item__content {
    color: var(--alpha-change-color-dark-1);
    font-weight: 400;
}

.question-explanation-content,
.question-hint-content {
        margin-bottom: 2rem;
        padding: 1rem 1.5rem;
        background: var(--alpha-traffic-white-color);
}

.redo-quiz button[type="submit"] {
    content: attr(data-counter);
}

.circle-bar {
    position: relative;
    width: 300px;
    height: 300px;
    border-color: var(--alpha-change-border-color);
    
    &:before {
        position: absolute;
        z-index: 0;
        top: 0;
        left: 0;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        border: 10px solid var(--alpha-change-border-color);
        border-radius: 50%;
        content: "";
    }
    
    .before,
    .after {
        position: absolute;
        z-index: 0;
        top: 0;
        left: 0;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        border: 10px solid #14c4ff;
        border-radius: 50%;
    }

    .before {
        border-bottom-color: transparent;
        border-left-color: transparent;
        transform: rotate(45deg);
    }

    .after {
        border-color: #14c4ff;
        border-top-color: transparent;
        border-right-color: transparent;
        transform: rotate(45deg);
    }

    &.bg50 .after {
        z-index: 10;
        border-bottom-color: inherit;
        border-left-color: inherit;
        transform: rotate(45deg);
    }
}



.lp-quiz-buttons .complete-quiz,
.lp-quiz-buttons .back-quiz,
.lp-quiz-buttons .review-quiz {
    float: $right;
}

.quiz-results,
.quiz-content,
.quiz-questions,
.quiz-buttons,
.quiz-attempts {
    margin-bottom: 6rem;
}

.quiz-result .result-grade {
    display: flex;
    flex-direction: column;
    position: relative;
    box-sizing: border-box;
    height: 200px;
    margin-bottom: 3rem;
    padding: 5rem;
    justify-content: center;
    align-items: center;

    &:before,
    svg {
        position: absolute;
        top: 0;
        left: 50%;
        width: 200px;
        height: 200px;
        margin-#{$left}: -100px;
        border-radius: 50%;
    }

    &:before {
        box-sizing: border-box;
        padding: 3rem;
        border: 10px solid var(--alpha-light-color);
        content: "";
    }

    .result-grade svg {
        transform: rotate(-90deg);
    }
    .result-grade svg circle {
        stroke: var(--alpha-primary-color);
    }
    
    &.passed .result-achieved {
        color: var(--alpha-change-color-dark-1);
    }
    
    &.passed .result-message strong {
        color: var(--alpha-success-color);
    }
}

.quiz-questions .question {
    margin-bottom: 6rem;
}

.question .answer-option {
    padding: 0;
    _border: 2px solid var(--alpha-change-border-color);
    background: var(--alpha-change-color-light-1);
    
    input[type="radio"],
    input[type="checkbox"] {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        margin-#{$left}: 2rem;
        border-color: #d9e0f1;
    }
    .option-title {
        display: flex;
        width: 100%;
        margin: 0;
        padding: 1.4rem 1rem 1.1rem 5rem;
        border: 1A solid var(--alpha-change-border-color);
        color: var(--alpha-dark-body-color);
        background: var(--alpha-change-color-light-1);
        font-size: 1.6rem;
        font-weight: 300;
        line-height: 2.6rem;
        border-radius: $corner-sm;

        &:before {
            display: none;
        }
        &:after {
            content: ".";
            display: inline-block;
            visibility: hidden !important;
        }
        &:hover {
            background: var(--alpha-traffic-white-color);
        }
    }
}


.question .answer-correct .option-title {
    border-color: var(--alpha-success-color);
}

.question .answered-wrong .option-title {
    border-color: var(--alpha-danger-color);
}

.question {
    .question-title {
        margin-bottom: 1.8r;
        font-size: 18px;
    }

    .edit-link {
        float: $right;
        font-size: 14px;
        font-weight: 400;
    }

    .question-content {
        margin-bottom: 3rem;
    }

    .question-content img {
        width: 100%;
    }

    .question-response {
        margin-bottom: 1rem;
    }

    .question-response .label {
        display: inline-block;
        margin: 0 5px 0 0;
        padding: .8rem ;
        border-radius: $corner-sm;
        color: var(--alpha-change-color-light-1);
        line-height: 1;
    }
    .question-response .point {
        display: inline-block;
    }
    .correct .label {
        background: var(--alpha-success-color);
    }
    .incorrect .label {
        background: #ff6423;
    }
    .question-index {
        display: inline-block;
        margin: 0 5px 0 0;
    }
    .btn-show-hint {
        position: relative;
        margin: 0 0 0 1rem;
        padding: 0;
        outline: none;
        color: var(--alpha-primary-color);
        background: transparent;
        font-size: 0;
        text-decoration: none;

        &:before {
            font-family: "Font Awesome 5 Free";
            font-size: 1.8rem;
            content: "\f059";
        }
        &:hover span {
            position: absolute;
            bottom: 100%;
            left: 0;
            width: auto;
            padding: 6px 9px;
            border-radius: $corner-sm;
            color: var(--alpha-change-color-dark-1);
            background: var(--alpha-change-border-color-light);
            font-size: 14px;
            font-weight: 400;
            line-height: 1;
            white-space: nowrap;
            text-transform: none;
        }
    }
}


.question-fill_in_blanks {
    .blank-input-wrap {
        display: inline-block;
    }
    .blank-block {
        margin-bottom: 2rem;
    }
    .blank-input {
        display: inline-block;
        width: auto;
        min-width: 50px;
        margin: 0 1rem;
        padding: 0 1rem;
        border: none;
        border-bottom: 1px dashed var(--alpha-change-border-color);
        text-align: center;
        white-space: nowrap;

        br {
            display: none;
        }
        > * {
            display: inline;
            white-space: nowrap;
        }
    }
    .blank-select {
        display: inline-block;
        height: 3rem;
        margin-left: 4px;
        padding: 1px;
    }
    .blank-fills {
        display: inline-block;
    }
    .blank-fills code {
        margin: 0 5px;
        padding: 0 6px;
        background: var(--alpha-change-border-color);
        line-height: 1;
        border-radius: 4px;
    }      
    .blanks.ordered {
        list-style-position: inside;
    }
    .blanks.one-paragraph {
        line-height: 3;
    }
}

.learn-press-message.fixed {
    position: fixed;
    top: 32px;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 1005;
    box-shadow: 0 0px 10px rgba(0, 0, 0, .3);
}

.learn-press-message.fixed[data-delay-in] {
    display: none;
}

.lp-widget {
    .items-progress,
    .course-progress {
        width: 100%;
    }
    .course-remaining-time {
        font-size: 14px;
    }
    .lp-course-info-fields {
        margin: 0;
    }
    .lp-course-info {
        list-style: none;
        margin: 0 0 1rem 0;
    }
    
    .lp-course-info .lp-label {
        float: $right;
        background: #03a9f4;
    }
}


.learn-press-tip {
    display: none;
    margin: 0 5px;
    color: var(--alpha-change-color-dark-1);
    font-size: 13px;
    font-style: normal;
    line-height: 1;
    vertical-align: baseline;
    cursor: pointer;

    
    &.ready {
        display: inline-block;
    }
    
    &:before {
        font-family: "Font Awesome 5 Free";
        content: "\f059";
    }
    
    &:hover {
        opacity: 0.8;
    }
}

.learn-press-tip-floating {
    position: absolute;
    z-index: 1002;
    min-width: 20px;
    margin-left: -1px;
    padding: 0.618em 1em;
    color: var(--alpha-change-color-light-1);
    background: var(--alpha-change-color-dark-1);
    font-size: 12px;
    line-height: 1.2em;
    border-radius: $corner-sm;
    
    > * {
        font-size: 12px;
    }
    
    .close {
        display: inline-block;
        position: absolute;
        top: -8px;
        right: -8px;
        width: 16px;
        height: 16px;
        border: 1px solid #fff;
        color: var(--alpha-change-color-light-1);
        background: #468fbc;
        line-height: 16px;
        text-align: center;
        cursor: pointer;
        border-radius: 50%;
    }
    
    .close:before {
        font-family: "Font Awesome 5 Free";
        content: "\f00d";
    }
    
    p {
        margin: 0;
    }
    
    &:before {
        position: absolute;
        bottom: -6px;
        left: 50%;
        width: 0;
        height: 0;
        margin-left: -6px;
        border: 6px solid transparent;
        border-top-color: var(--alpha-change-color-dark-1);
        border-bottom-width: 0;
        content: "";
    }
}


body.lp-preview.admin-bar #learn-press-content-item {
    top: 32px !important;
}

body.lp-preview #learn-press-course-curriculum {
    display: none;
}

body.lp-preview #learn-press-content-item {
    top: 0 !important;
    left: 0 !important;
}

body.lp-preview #course-item-content-header {
    display: none;
}

/**
 * CSS for jAlerts
 */

#popup_container {
    opacity: 0;
    transform: scale(0.5);
}

body.confirm #popup_overlay {
    z-index: 999998 !important;
}

body.confirm #popup_container {
    z-index: 999999 !important;
    max-width: 90% !important;
    min-width: 300px !important;
    padding: 10px !important;
    background: var(--alpha-traffic-white-color);
    transition: opacity 0.25s;
    border-radius: 3px;
}

body.confirm #popup_container #popup_title {
    display: none !important;
}

body.confirm #popup_container #popup_message {
    margin: -10px;
    background: var(--alpha-change-color-light-1);
    padding: 20px;
    border-radius: 3px;
}

body.confirm #popup_container .close {
    position: absolute;
    top: 3px;
    #{$right}: 10px;
}

body.confirm #popup_container #popup_panel {
    margin-top: 20px;
    text-align: center;
}

body.confirm #popup_container #popup_panel button,
body.confirm #popup_container #popup_panel input[type="button"],
body.confirm #popup_container #popup_panel input[type="submit"] {
    height: 30px;
    line-height: 30px;
    padding: 0 25px;
}

body.confirm #popup_container #popup_cancel {
   display: none;
}

body.confirm #popup_container.ready {
    opacity: 1;
    transform: scale(1);
}

/**
 * Archive courses page.
 */

.lp-content-area:after,
.lp-content-area:before {
  content: "";
  display: table;
  clear: both;
}
.learn-press-courses {
    --alpha-gap: 15px;
}
.lp-archive-courses {
    &.loading .learn-press-courses {
        position: relative;
        &:before {
            content: "";
            position: absolute;
            z-index: 1;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: rgba(255, 255, 255, .3);
        }
    }
    form[name="search-course"] {
        position: relative;
        margin-bottom: 2rem;
    }
    form[name="search-course"] .search-course-input {
        width: 100%;
        padding: 1.2rem;
        box-sizing: border-box;
    }
    form[name="search-course"] .search-course-button {
        position: absolute;
        top: 1px;
        right: 1px;
        bottom: 1px;
        height: auto;
        padding: 15px;
        line-height: 1px;
    }
    
    .learn-press-courses-header {
        float: left;
        padding-top: 4px;
    }
    
    .learn-press-courses-header h1 {
        margin: 0;
        font-size: 3rem;
    }
    @include mq(md, 'max') {
        .learn-press-courses-header {
            margin-bottom: 2rem;
        }
    }
    .learn-press-courses {
        clear: both;
        margin: 0 calc(-1 * var(--alpha-gap)) 0 calc(-1 * var(--alpha-gap));
        padding: 0;
        list-style: none;
        display: flex;
        flex-wrap: wrap;
    }
}
.course-item {
    display: flex;
    flex-direction: column;
    position: relative;
    transition: 0.3s;

    .course-wrap-thumbnail {
        overflow: hidden;
        position: relative;
    }
    .lp-badge.featured {
        position: absolute;
        z-index: 2;
        top: 28px;
        left: -110px;
        width: 300px;
        text-align: center;
        transform: rotate(-45deg);
    }
    .course-thumbnail a {
        display: block;
        overflow: hidden;
    }
    .thumbnail:before {
        content: "";
        position: absolute;
        z-index: 1;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        opacity: 0;
        background: rgba(0, 0, 0, 0.2);
        transition: 0.3s;
    }
    .thumbnail img {
        display: block;
        width: 100%;
        transform: scale(1);
        transition: transform .3s;
    }
    .course-wrap-thumbnail {
        .course-wishlist {
            position: absolute;
            z-index: 2;
            top: 6px;
            #{$right}: 6px;
            opacity: 0;
            color: var(--alpha-change-color-light-1);
            cursor: pointer;

            &:before {
                font-family: "Font Awesome 5 Free";
                font-weight: 900;
                content: "\f004";
            }
        }
        .course-wishlist__btn {
            display: none;
        }
        .course-wishlist:hover {
            color: var(--alpha-primary-color);
        }
        &:hover{
            &:before {
                opacity: 1;
            }
            .course-thumbnail img {
                transform: scale(1.05);
            }
            .course-wishlist {
                opacity: 1;
            }      
        }
    }
    &:hover {
        .thumbnail:before {
            opacity: 1;
        }
        .course-thumbnail img {
            transform: scale(1.05);
        }
        .course-wishlist,
        .course-wishlist.filled {
            opacity: 1;
        }
    }
    .course-instructor {
        figure {
            position: relative;
            width: 70px;
            z-index: 1;
        }
        img {
            position: absolute;
            #{$left}: 0;
            top: 0;
            width: 70px;
            height: 70px;
            margin-top: -85px;
            margin-bottom: 1.5rem;
            border-radius: 50%;
            z-index: 0;
            box-shadow: 0 0px 10px rgb(0, 0, 0, .3);
            border: 3px solid #fff;
            object-fit: cover;
        }
    }
    .course-content {
        position: relative;
        border-top: 0;
    }
    .course-permalink {
        display: -webkit-box;
        clear: both;
        overflow: hidden;
        position: relative;
        color: var(--alpha-change-color-light-1);
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .course-title {
        margin: 0;
        font-size: 2.2rem;
        transition: color .3s;
        
        &:hover {
            color: var(--alpha-primary-color);
        }
    }
    .course-review {
        display: none;
    }
    .course-categories,
    .course-tags {
        display: block;
    }
    .course-categories {
        float: left;
        position: relative;
        margin-#{$right}: 1rem;
        margin-bottom: 1.6rem;

        a {
            display: none;
            margin: 0 1rem;

            &:first-child {
                display: block;
                margin-#{$left}: 0;
            }
        }

        &:after {
            content: "";
            position: absolute;
            top: 50%;
            right: -2px;
            width: 1px;
            height: 12px;
            opacity: 0.5;
            background: var(--alpha-grey-color);
            transform: translate(0, -50%);
        }
    }
    .course-instructor {
        float: $left;
        margin-bottom: 1.2rem;
    }
    .course-categories,
    .course-instructor {
        a  {
            color: var(--alpha-change-color-dark-1);

            &:hover {
                color: var(--alpha-primary-color);
            }
        }
    }
    .course-info > span {
        display: block;
    }
    .origin-price,
    .price {
        font-size: 1.8rem;
        font-weight: 600;
        text-transform: uppercase;
    }
    .origin-price {
        margin-#{$right}: 1rem;
        font-size: 14px;
        font-weight: 400;
        text-decoration: line-through;
    }
    .course-info .course-instructor {
        float: $right;
    }
    .course-info:after {
        display: block;
        clear: both;
        content: "";
    }
    .course-excerpt {
        display: -webkit-box;
        overflow: hidden;
        margin-bottom: 1.2rem;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        color: #777;
    }
    .separator {
        display: none;
    }
}


.learn-press-courses[data-layout="list"] {
    margin: 0;
    width: 100%;

    .course {
        display: flex;
        width: 100%;
        padding: 0;
        border: 1px solid var(--alpha-change-border-color);
        flex-wrap: wrap;
        justify-content: flex-end;
        margin-bottom: calc(2 * var(--alpha-gap));

        &:last-child {
            margin: 0;
        }
    }
    
    // @include mq(md, 'max') {
    //     .course {
    //         padding: 15px;
    //     }
    // }
    .course-instructor figure {
        display: none;
    }
    .course-item {
        flex-direction: row;
        width: 100%;
        // justify-content: space-between;
    }
    
    @include mq(md, 'max') {
        .course-item {
            flex-direction: column;
        }
    }
    .course-wrap-thumbnail {
        float: $left;
        width: 38.3%;
    }
    @include mq(md, 'max') {
        .course-wrap-thumbnail {
            width: 100%;
        }
    }
    .course-content {
        // float: right;
        width: calc(100% - 38.3%);
        padding: 4.4rem 4rem 3.6rem;
    }
    @include mq(xl, 'max') {
        .course-content {
            width: calc(100% - 38.3%);
        }
    }
    @include mq(md, 'max') {
        .course-content {
            width: 100%;
            padding-top: 2rem;
        }
    }
    .course-categories a {
        position: relative;
    }
    .course-permalink {
        overflow: hidden;
        margin-bottom: 9px;
        -webkit-line-clamp: 1;
    }
    .course-title {
        font-size: 2.4rem;
    }
    .course-wrap-meta {
        display: flex;
        padding-top: 1.2rem;
        padding-bottom: 1.8rem;
        color: var(--alpha-change-color-dark-1);

        .meta-item {
            padding-#{$right}: 2.8rem;
            text-transform: capitalize;
        }
    }

    @include mq(xl, 'max') {
        .course-wrap-meta .meta-item {
            padding-#{$right}: 2rem;
        }
    }
   
    @include mq(md, 'max') {
        .course-wrap-meta {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 15px;
        }
        .course-wrap-meta .meta-item {
            padding-#{$right}: 1.5rem;
        }
    }
    .course-tags a {
        margin: 0 10px 10px 0;
        padding: 3px 5px;
        border-radius: $corner-sm;
        color: var(--alpha-change-color-light-1);
        background: #e4a2a2;
        line-height: 1;
    }
    
    .course-footer {
        float: $left;
        margin-#{$right}: 2rem;
    }
    
    .course-footer .course-students {
        display: none;
    }

    .course-footer .meta-item-duration {
        display: none;
    }
    
    .course-footer .course-price {
        float: none;
    }
    
    @include mq(md, 'max') {
        .course-footer {
            margin-bottom: -1rem;
        }
    }
    
    .course-readmore {
        float: $right;
        position: relative;
        // #{$right}: 4px;
        top: 5px;  
    }
    
    .course-readmore a {
        padding: .9rem 0;
        color: var(--alpha-change-color-dark-1);
        // background: var(--alpha-primary-color);
        transition: opacity 0.3s, color .3s;
        &:after {
            content: '\e92c';
            margin-#{$left}: 1rem;
            font-family: $framework-font;
            vertical-align: -1px;
        }
        &:hover {
            color: var(--alpha-primary-color);
        }
    }
    
    // .course-readmore a:hover {
    //     opacity: .8;
    // }
    
    @include mq(md, 'max') {
        .course-readmore {
            display: flex;
            float: none;
            clear: both;
        }
    }

    .course-thumbnail,
    .course-thumbnail > a,
    .thumbnail-preview,
    .thumbnail,
    .centered,
    img {
        height: 100%;
    }

    .course-thumbnail img {
        object-fit: cover;
    }
}
body:not(.loaded) .learn-press-courses[data-layout=list] .course-thumbnail img {
    padding: 0 !important;
    height: 100% !important;
}

.learn-press-courses {
    .meta-item:before {
        position: relative;
        top: -1px;
        margin-#{$right}: 8px;
        color: var(--alpha-grey-color);
        font-family: "Font Awesome 5 Free";
    }
    .meta-item-level:before {
        content: "\f012";
    }
    .meta-item-duration:before {
        content: "\e910";
        font-family: $theme-font;
        top: 1px;
    }
    .meta-item-lesson:before {
        content: "\f0c5";
    }
    .meta-item-quiz:before {
        content: "\f12e";
    }
    .meta-item-student:before {
        content: "\f501";
    }
    .course-footer .meta-item-duration {
        margin-bottom: 5px;
        font-size: 1.2rem;
    }
}

.learn-press-courses[data-layout="grid"] {
    margin-top: calc(-1 * var(--alpha-gap));
    margin-bottom: calc(-1 * var(--alpha-gap));
    .course {
        padding: var(--alpha-gap);
    }
    .course-item {
        border: 1px solid var(--alpha-change-border-color);
        .price, .origin-price {
            color: var(--alpha-primary-color);
        }
        .course-title {
            font-size: 1.6rem;
            line-height: 22px;
        }
    }
    .course-content {
        // padding: 5rem 3rem 3.2rem 3rem;
        padding: side-values(0 2.5rem 1.3rem);
        margin-top: -3.2rem;
        flex-grow: 1;
        z-index: 2;
        .course-instructor {
            margin-bottom: 1rem;
        }
    }
    .course-thumbnail {
        img {
            min-height: 16rem;
            object-fit: cover;
        }
    }
    .course-instructor {
        figure {
            width: 65px;
        }
        img {
            position: relative;
            width: 65px;
            height: 65px;
            margin-top: 0;
            margin-bottom: .6rem;
            box-shadow: none;
            border: 5px solid #fff;
        }
        >a {
            display: none;
        }
    }
    .course-categories {
        float: $right;
        position: absolute;
        z-index: 1;
        top: -34px;
        #{$right}: -1px;
        margin-#{$right}: 0;

        &:after {
            display: none;
        }

        a {
            position: relative;
            margin: 0;
            padding: side-values(2px 12px 2px 22px);
            clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 12px 50%);
        }
    }
    .course-wrap-meta {
        display: none;
    }
    .course-info {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        margin-top: 2rem;
    }
    .course-excerpt {
        display: none;
    }
    .course-students {
        float: $left;
        text-transform: capitalize;
        &:before {
            content: "\f501";
            position: relative;
            top: -1px;
            margin-right: 8px;
            color: var(--alpha-primary-color);
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
        }
    }
    .course-readmore {
        display: none;
    }
    .course-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: row-reverse;
        padding-top: 1.5rem;
        border-top: 1px solid var(--alpha-change-border-color);
    }

    & + h2 {
        margin-top: calc(2 * var(--alpha-gap));
    }
}

.learn-press-courses.slider-wrapper {
    margin: 0;
    .course {
        padding: 0;
    }
}

.learn-press-courses[data-size="3"] .course {
    width: 33.3333%;
}

@media (max-width: 1199px) and (min-width: 992px) {
    .learn-press-courses[data-size="3"] .course {
        width: 50%;
    }
}

@include mq(md, 'max') {
    .learn-press-courses[data-size="3"] .course {
        width: 50%;
    }
}

@include mq(sm, 'max') {
    .learn-press-courses[data-size="3"] .course {
        width: 100%;
    }
}

.lp-courses-bar {
    display: flex;
    width: auto;
    margin: 0;
}

@include mq(md, 'max') {
    .lp-courses-bar {
        flex-direction: row;
        width: 100%;
        justify-content: space-between;
    }
}

.lp-courses-bar .search-courses {
    position: relative;
    width: 306px;
    max-width: 100%;
    margin-right: 20px;
    line-height: 1;
    flex: 1;

    input[type="text"] {
        width: 100%;
        height: 4.4rem;
        padding: .6rem 3.2rem .6rem 1.8rem;
        border-radius: $corner-sm;

        &:focus {
            border-color: var(--alpha-grey-color);
        }
    }
    button {
        position: absolute;
        top: 50%;
        #{$right}: 1.2rem;
        width: 3rem;
        height: 3rem;
        padding: 0;
        border: none;
        color: var(--alpha-change-color-dark-1);
        background: transparent;
        font-size: 1.6rem;
        line-height: 1;
        transform: translate(0, -50%);
    }

    @include mq(md, 'max') {
        & {
            width: 100%;
        }
    }
}

.lp-courses-bar .switch-layout {
    display: flex;
    text-align: right;
    align-items: center;

    input[type="radio"] {
        display: none;
    }
    .switch-btn {
        display: block;
        margin: 0;
        padding: 0;
        border-radius: $corner-md;
        font-size: 1.9rem;
        line-height: 1;
        text-align: center;
        cursor: pointer;

        &:before {
            display: inline-block;
            color: #dadada;
            font-family: $framework-font;
            transition: color .3s;
        }
        
        &:hover:before {
            color: var(--alpha-change-color-dark-1);
        }
    }
    .grid::before {
        content: "\e964";
    }
    .list {
        margin-left: 10px;

        &:before {
            content: "\e972";
        }
    }
      

}

input[type="radio"]:checked + .switch-btn:before {
    color: var(--alpha-change-color-dark-1);
}

/**
 *  End Archive courses page.
 */

/**
 *  Single course page
*/
.course-summary-content {
    .course-detail-info {
        position: relative;
        margin-bottom: 1.5rem;
    }
    .lp-content-area {
        position: relative;
    }
    .course-title {
        margin-bottom: 6rem;
        font-size: 2.8rem;
    }
    .course-meta-primary {
        margin-bottom: 1.7rem;
    }
    .course-meta-primary .course-meta__pull-left .meta-item-categories:before {
        font-weight: 400;
    }
    .course-meta-secondary {
        margin-bottom: 0;
    }
    .course-meta__pull-left .meta-item {
        display: flex;
        position: relative;
        align-items: center;
        margin-#{$right}: 5rem;
        color: var(--alpha-change-color-dark-1);
        text-transform: capitalize;
    }
    .course-meta__pull-left .meta-item span {
        padding-#{$right}: 4px;
    }
    .course-meta__pull-left .meta-item:last-child {
        margin-#{$right}: 0;
    }
    .course-meta__pull-left .meta-item:before {
        margin-#{$right}: 8px;
        color: var(--alpha-grey-color);
        font-family: $theme-font;
        font-size: 1.9rem;
        opacity: .6;
        position: relative;
        top: -1px;
    }
    .course-meta__pull-left .meta-item__image {
        margin-#{$right}: 2rem;
        width: 69px;
    }
    .course-meta__pull-left .meta-item__image img {
        overflow: hidden;
        position: relative;
        width: 69px;
        height: 69px;
        border-radius: 50%;
    }
    .course-meta__pull-left .meta-item__value {
        line-height: 1.38;
        margin-top: -3px;

        label {
            margin: 0;
            color: var(--alpha-grey-color);
            font-size: 12px;
        }
    }
    .course-meta__pull-left .meta-item__value > div a {
        font-size: 1.8rem;
        font-weight: 600;
        color: var(--alpha-change-color-dark-1);
        text-transform: capitalize;

        &:hover {
            color: var(--alpha-primary-color);
        }
    }
    .lp-course-progress-wrapper {
        align-self: center;

        .lp-course-status {
            font-size: 12px;
            margin-bottom: 5px;
            line-height: 1.38;
        }

        .lp-skeleton-animation>li {
            height: auto;
        }

        .number {
            color: var(--alpha-change-color-dark-1);
        }
    }
    .course-meta-primary .meta-item {
        position: relative;
        flex: 0 0 auto;
        padding-#{$right}: 2rem;
        margin-#{$right}: 2.2rem;

        &:before {
            content: '';
            display: block;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            #{$right}: 0;
            width: 1px;
            height: 48px;
            margin: 0;
            background-color: var(--alpha-change-border-color);
        }
        
        &:last-child:before {
            content: none;
        }
    }
    .course-meta__pull-left .meta-item-categories .meta-item__value div {
        font-size: 1.8rem;
        font-weight: 600;
        color: var(--alpha-change-color-dark-1);
    }
    .course-meta__pull-left .meta-item-categories .meta-item__value div span {
        font-weight: 400;
        padding: 0 5px;
    }
    .course-meta__pull-left .meta-item-categories .meta-item__value div a:hover {
        color: var(--alpha-primary-color);
    }
    .course-meta__pull-left .meta-item-review .meta-item__value {
        display: flex;
        flex-direction: column-reverse;
        justify-content: flex-end;
        align-items: flex-end;
    }
    .course-meta__pull-left .meta-item-review .review-stars-rated {
        margin-bottom: 0;
        line-height: 1;
    }
    .course-meta__pull-left .meta-item-duration::before {
        content: "\e910";
    }
    .course-meta__pull-left .meta-item-level::before {
        content: "\e993";
    }
    .course-meta__pull-left .meta-item-lesson::before {
        top: 1px;
        font-size: 2.2rem;
        content: "\e9b1";
    }
    .course-meta__pull-left .meta-item-quiz::before {
        top: -2px;
        font-size: 2.2rem;
        content: "\e9b0";
    }
    .course-meta__pull-left .meta-item-student::before {
        top: -2px;
        font-size: 2.7rem;
        content: "\e994";
    }
    .course-price {
        position: relative;
        &:before {
            content: '';
            display: block;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            #{$left}: -3.2rem;
            width: 1px;
            height: 48px;
            margin: 0;
            background-color: var(--alpha-change-border-color);
        }
    }

    .entry-content-left {
        width: calc(100% - 360px);
        max-width: 100%;
        margin: 0;
        padding-#{$right}: 6rem;
        
        @include mq(md, 'max') {
            & {
                width: 100%;
                padding-#{$right}: 0;
                margin-bottom: 3rem;
            }
        }
    }
    .course-summary-sidebar {
        width: 360px;
        max-width: 100%;
        margin-top: -305px;
    }
    .course-summary-sidebar__inner {
        width: 360px;
    }
    .course-sidebar-top {
        box-shadow: 0 15px 20px 0 rgba(0, 0, 0, 0.05);
    }
    .course-sidebar-secondary {
        margin-top: 3rem;
        padding: 0;
    }
    .learn-press-course-wishlist {
        color: rgb(160, 143, 143);
        background: transparent !important;
        font-size: 0;

        &:before {
            font-family: "Font Awesome 5 Free";
            font-size: 2.6rem;
            font-weight: 900;
            content: "\f004";
        }
    }
    .learn-press-course-wishlist.on,
    .learn-press-course-wishlist:hover {
        color: var(--alpha-primary-color);
    }
    .course-summary-sidebar__inner > div {
        overflow: hidden;
        padding: 4rem 4rem 3rem;
        background: var(--alpha-change-color-light-1);
    }
    .course-summary-sidebar__inner > div .widgettitle {
        margin-bottom: 2px;
    }
    .course-summary-sidebar__inner > div ul {
        list-style: none;
    }
    .media-preview {
        margin-bottom: 4.7rem;
    }
    
    #learn-press-course & .lp-course-buttons {
        margin: side-values(1rem 0 1rem 0);
    }
}

@include mq(md, 'max') {
    .course-summary-content .course-summary-sidebar {
        width: 100%;
        margin-top: 0;
        padding-#{$left}: 0;
    }
    .course-summary-content .course-summary-sidebar__inner {
        width: 100%;
    }
}

#learn-press-course {
    .course-sidebar-preview {
        margin-bottom: 3.5rem;
        background: var(--alpha-change-color-light-1);
    }
    .course-sidebar-preview .lp-course-buttons {
        margin-bottom: 3.4rem;

        > * {
            margin-bottom: 1rem;
        }

        > *:last-child {
            margin-bottom: 0;
        }

        form,
        button {
            width: 100%;
        }

        button {
            font-weight: 600;
            color: var(--alpha-change-color-light-1);
            background-color: var(--alpha-primary-color);
            
            &:hover {
                opacity: .9;
            }
        }

        .button-enroll-course {
            border-color: var(--alpha-primary-color);
            color: var(--alpha-change-color-light-1);
            background: var(--alpha-primary-color);

            &:hover {
                opacity: 0.9;
                background: var(--alpha-primary-color);
            }

            &.loading::before {
                display: inline-block;
                font-family: "Font Awesome 5 Free";
                font-weight: 900;
                content: "\f110";
                animation: rotating4 1s linear infinite;
            }
        }

        button ~ .lp-enroll-notice {
            margin-top: 2rem;
            padding: 2rem;
            border: 2px solid var(--alpha-success-color);
            border-radius: 9px;
            font-size: 1.5rem;
            line-height: 1.4;
        }
        button ~ .lp-enroll-notice.error {
            border-color: #d85554;
        }
    }
    .course-sidebar-preview {
        .course-time {
            margin-bottom: 2.8rem;
            padding-bottom: 2.8rem;
            border-bottom: 1px solid var(--alpha-change-border-color);
        }

        .course-time-row {
            display: flex;
            font-size: 1.4rem;
            justify-content: space-between;
            margin-bottom: 0;
       
        }

        strong {
            color: var(--alpha-change-color-dark-1);
            font-weight: 600;
        }   

        .course-results-progress .items-progress,
        .course-results-progress .course-progress {
            display: flex;
            flex-wrap: wrap;
        }

        .course-results-progress .items-progress__heading,
        .course-results-progress .course-progress__heading {
            margin: 0 0 1rem;
            font-size: 14px;
            flex: 1 1 auto;
        }
        .course-results-progress .number {
            display: block;
            text-align: $right;
        }
        .learn-press-progress {
            clear: both;
            width: 100%;
            margin-top: 5px;
        }

        > *:last-child {
          margin-bottom: 0;
        }
    }
    .course-summary-sidebar .course-extras {
        display: block;
    }
    .course-extras .course-extras__title {
        font-size: 1.8rem;
        font-weight: normal;
    }
    .course-extras__content {
        ul {
            list-style: none;
        }  
        ol {
            list-style-position: inside;
        }
        li {
            position: relative;
            padding-#{$left}: 2rem;

            &:before {
                content: "";
                display: inline-block;
                position: absolute;
                top: 9px;
                left: 0;
                width: 12px;
                height: 7px;
                border: 2px solid #8794b9;
                border-top: none;
                border-right: none;
                transform: rotate(-54deg);
            }
        }
    }
    
    .course-extras.style-radios li {
        padding-#{$left}: 2rem;

        &:before {
            content: "";
            display: inline-block;
            position: absolute;
            top: 9px;
            left: 0;
            width: 12px;
            height: 12px;
            border: 2px solid #8794b9;
            border-radius: 50%;
        }
    }
}

.learnpress-page {
    .lp-button.secondary {
        background: #9198ab;

        &:hover {
            background: #9ba6c5;
        }
    }
    .lp-button:disabled,
    .lp-button[disabled] {
        background: var(--alpha-change-border-color);
        border-color: var(--alpha-change-border-color);
        pointer-events: none;
    }
}

.learnpress-page:hover {
    text-decoration: none;
}

#popup-course {
    display: flex;
    position: fixed;
    z-index: 999;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--alpha-change-color-light-1);

    .section-header {
        margin-bottom: 0;
    }

    #popup-header {
        display: flex;
        position: fixed;
        z-index: 100;
        #{$right}: 0;
        #{$left}: 400px;
        padding: 0;
        background: var(--alpha-change-color-dark-1);
        transition: $left 0.25s;
    }
    .popup-header__inner {
        display: flex;
        width: 792px;
        margin: 0 auto;
        justify-content: space-between;
        align-items: center;
    }

    .section-content {
        padding: 0;
        border: none;
    }

    @include mq(xl, 'max') {
        .popup-header__inner {
            width: 100%;
            padding-right: 15px;
            padding-left: 15px;
        }
    }

    @include mq(md, 'max') {
        #popup-course #popup-header .popup-header__inner {
            flex-direction: column;
        }
    }

    .popup-header__inner .course-title {
        margin: 0;
        line-height: 70px;

        a {
            display: -webkit-box;
            overflow: hidden;
            color: var(--alpha-change-color-light-1);
            font-size: 2.2rem;
            font-weight: 400;
            text-overflow: ellipsis;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;

            &:hover {
                color: var(--alpha-primary-color);
            }
        }
        
        @include mq(md, 'max') {
            & {
                flex: 1;
            }
        }
    }
    .popup-header__inner .items-progress {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    @include mq(md, 'max') {
        .popup-header__inner .items-progress {
            flex: 1;
            padding-bottom: 2rem;
            justify-content: end;
        }
    }

    .popup-header__inner .items-progress .number {
        padding-#{$right}: 1rem;
        // color: #fff;
    }

    #popup-header .lp-button {
        display: flex;
        position: relative;
        height: 4rem;
        margin: 9px;
        border: none;
        color: var(--alpha-change-color-light-1);
        background: var(--alpha-primary-color);
        font-size: 14px;
        font-weight: 400;
        justify-content: center;
        align-items: center;

        &:hover {
            opacity: .9;
        }
    }
    #popup-header .lp-button-back {
        float: $right;
        margin: 9px 10px;

        button:before,
        button:after {
            content: '';
            border: 1px solid var(--alpha-change-border-color);
        }

        button:before {
            
        }
    }
    #popup-sidebar {
        overflow: auto;
        position: relative;
        box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.1);
        flex: 0 0 400px;
        transition: 0.25s;

        .search-course {
            display: flex;
            position: relative;
            height: 70px;
            background: var(--alpha-traffic-white-color);

            input[name="s"] {
                display: block;
                border: none;
            }

            button {
                position: absolute;
                top: 0;
                #{$right}: 10px;
                width: 16px;
                height: 70px;
                margin: 0 10px;
                padding: 0;
                border: 0;
                background: transparent;
                line-height: 1px;

                &:before {
                    content: "\e97e";
                    color: var(--alpha-dark-body-color);
                    font-family: $framework-font;
                    font-size: 1.6rem;
                }
            }
            button.clear {
                display: none;

                &:before {
                    content: "\f00d";
                }
            }
        }
        .search-results {
            display: none;
            overflow: auto;
            position: fixed;
            z-index: 1005;
            top: 92px;
            bottom: 0;
            left: 0;
            width: 400px;
            margin: 0;
            border-top-color: transparent;
            border-right: 1px solid #d9e0f1;
            background: #fbfcff;

            .course-price {
                position: absolute;
                #{$right}: 1rem;
                bottom: 1rem;
                font-size: 12px;
            }
              
            .origin-price {
                font-size: smaller;
                text-decoration: line-through;
            }
        }
        .search-results__item {
            border-bottom: 1px solid #d9e0f1;
            background: var(--alpha-change-color-light-1);

            img {
                position: absolute;
                #{$left}: 10px;
                width: 40px;
                height: 40px;
            }
            a {
                display: -webkit-box;
                overflow: hidden;
                position: relative;
                box-sizing: content-box;
                height: 40px;
                padding: side-values(1rem 1rem 1rem 6rem);
                color: #777;
                text-overflow: ellipsis;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
            }

            &:hover {
                background: #d9e0f1;
            }
        }
        .search-results__item-title {
            overflow: hidden;
            margin: 0 0 -2px 0;
            padding: 0;
            font-size: 1.6rem;
            font-weight: 400;
        }
        .search-results__item-author {
            font-size: 12px;
        }
        .search-results__not-found {
            padding: 1rem;
            color: #777;
        }
        .search-results__pagination {
            padding: 1rem;
            text-align: center;
        }
        .search-results__pagination a,
        .search-results__pagination span {
            display: inline-block;
            margin: side-values(0 3px 10px 2px);
            padding: 5px 8px;
            border: 1px solid #d9e0f1;
            border-radius: 4px;
            color: #777;
            font-size: 14px;
            line-height: 1;
            cursor: pointer;
        }
        .search-results__pagination span {
            color:  var(--alpha-grey-color);
            background: #d9e0f1;
        }
        .searching {
            .search-results {
                display: block;
            }
            .clear {
                display: block;
            }
            button {
                display: none;
            }
            &:after {
                content: "";
                position: absolute;
                z-index: 1;
                bottom: 0;
                left: 50%;
                width: 0;
                height: 0;
                margin-#{$left}: -1rem;
                border: 10px solid transparent;
                border-bottom-color: var(--alpha-change-color-light-1);
            }
        }
    }
    .course-curriculum {
        overflow: auto;
        position: absolute;
        top: 70px;
        bottom: 0;
        width: 400px;
        
        &::-webkit-scrollbar {
            width: 5px;
        }
        &::-webkit-scrollbar-thumb {
            border-radius: 5px;
            background: rgba(204,204,204,0.5);
        }

        .section {
            position: relative;
        }
        .circle-progress {
            display: inline-block;
            position: absolute;
            top: 50%;
            #{$right}: 1rem;
            width: 2.4rem;
            height: 2.4rem;
            margin-top: -1.2rem;
            border: 3px solid #d9e0f1;
            border-radius: 50%;
        }
        .section-header {
            position: sticky;
            z-index: 1000;
            top: 0;
            padding: 2rem;
            background: var(--alpha-change-color-dark-1);
        }
        .section-left .section-title {
            color: #fff;
            font-size: 2rem;
            font-weight: 600;
        }
        .section-left .show-desc::before {
            font-family: "Font Awesome 5 Free";
            font-size: 1.8rem;
            font-weight: 900;
            content: "\f0d7";
        }
        .section-left .section-toggle {
            justify-content: flex-end;
            flex: 0;
        }
        .section-left .section-toggle i {
            color: #fff;
        }
        .section-meta {
            padding-top: 6px;
        }
        .section-content {
            margin-bottom: 0;
        }
        .course-item {
            padding: 0 2rem;

            > span {
                display: none;
            }
        }
        .section-item-link {
            height: 6rem;
            line-height: 1;

            &:before {
                padding: 1.2rem 0;
            }

            .item-name {
                padding: side-values(0 1rem 0 1.7rem);
                font-size: 14px;
            }
            .course-item-meta {
                display: block;
                position: absolute;
                top: 19px;
                #{$right}: 20px;
                padding: 0;
                text-align: $left;
            }
            .item-meta {
                font-size: 12px;

                &:first-child {
                    margin-#{$left}: 0;
                }
            }
        }
        .course-item:before {
            top: -1px;
            bottom: -1px;
            height: auto;
            background: transparent;
        }
        .course-item:after {
            content: "";
        }
        .has-status.failed .course-item-meta .trans {
            color: var(--alpha-danger-color);
        }
        .status-completed .course-item-meta .trans {
          color: var(--alpha-success-color);
        }
        .item-meta {
            margin-#{$left}: 1rem;
        }
        .section-empty .section-header {
            margin: 0;
        }
        .section-empty .learn-press-message {
            margin: 0;
            padding: 1rem;
            border-bottom: 1px solid #d9e0f1;
            border-radius: 0;
            color: var(--alpha-grey-color);
            background: var(--alpha-traffic-white-color);
            font-size: 14px;
        }
        .section-empty .learn-press-message:before,
        .section-empty .learn-press-message:after {
            content: "";
            position: absolute;
            z-index: 2;
            top: -16px;
            left: 10px;
            width: 0;
            height: 0;
            border: 8px solid transparent;
            border-bottom-color: var(--alpha-traffic-white-color);
            background: transparent;
            border-radius: 0;
        }
        .section-empty .learn-press-message:after {
            z-index: 1;
            top: -20px;
            left: 8px;
            border-width: 10px;
            border-bottom-color: #d9e0f1;
        }
    }
    #popup-content {
        overflow: auto;
        position: relative;
        margin: 7rem 0 5rem 0;
        flex: 1;

        .lp-button {
            position: relative;
            margin: side-values(0 1rem 0 0);
            padding: 1.2rem 2.9rem;
            font-size: 14px;

            &:last-child {
                margin: 0;
            }
        }
        .instant-check .instant-check__icon {
            margin-#{$right}: 5px;

            &:before {
                font-family: "Font Awesome 5 Free";
                content: "\f058";
            }
        }
        .instant-check .instant-check__info {
            visibility: hidden;
            position: absolute;
            top: 100%;
            left: 0;
            margin-top: 3px;
            padding: 1.1rem 2rem;
            border-radius: $corner-sm;
            background: var(--alpha-change-border-color-light);
            white-space: nowrap;
            text-transform: none;
        }
        .instant-check:hover .instant-check__info {
            visibility: visible;
            position: absolute;
            top: 100%;
            #{$left}: 0;
            margin-top: 3px;
            padding: 1.1rem 1.1rem;
            border-radius: $corner-sm;
            color: var(--alpha-change-color-dark-1);
            background: var(--alpha-change-border-color-light);
            white-space: nowrap;
        }
        .instant-check.loading .instant-check__icon {
            display: inline-block;
            animation: rotating4 1s linear infinite;

            &:before {
                font-weight: 800;
                content: "\f110";
            }
        }
        .lp-button.completed {
            display: flex;
            flex-direction: row-reverse;
            width: 100%;
            margin-top: 3.2rem;
            border-color: transparent;
            color: var(--alpha-change-color-light-1);
            background: var(--alpha-success-color);
            font-size: 1.6rem;
            align-items: center;
            justify-content: center;

            i {
                margin-#{$left}: 9px;
                font-size: 14px;
            }
        }
    }

    .content-item-wrap {
        width: 792px;
        max-width: 100%;
        margin: 0 auto;
        padding: 4rem 0 8rem;

        @include mq(xl, 'max') {
            & {
                width: 100%;
            }
        }
    }

    @include mq(xl, 'max') {
        .content-item-wrap .course-item-title {
            padding-right: 15px;
            padding-left: 15px;
        }
    }
    @include mq(md, 'max') {
        .content-item-wrap .course-item-title {
            text-align: center;
        }
    }

    .content-item-description h2,
    .content-item-description h3,
    .content-item-description h4,
    .content-item-description h5,
    .content-item-description h6 {
        font-size: 1.8rem;
    }
    
    #learn-press-quiz-app,
    .quiz-content {
        margin-bottom: 4rem;
    }
    .quiz-buttons {
        display: flex;
        justify-content: center;
        text-align: center;
    }
    .quiz-buttons .button-right .lp-button {
        margin: side-values(0 0 0 15px);
    }
    .quiz-buttons .lp-button[data-type="question-nav"] {
        margin: 0;
        border: 1px solid #d9e0f1;
        color: #777;
        background: #fbfcff;

        &:before {
            display: inline-block;
            width: 1.5rem;
            height: 1.5rem;
            border: 2px solid #d9e0f1;
            border-top-color: transparent;
            border-left-color: transparent;
            content: "";
            transform: rotate(-45deg);
        }

        &.prev::before {
            margin-#{$left}: 7px;
            transform: rotate(135deg);
        }

        &.next {
            margin-#{$left}: -1px;

            &:before {
                margin-#{$right}: 7px;
            }
        }

        &:hover {
            background: var(--alpha-change-color-light-1);
        }
    }
    .quiz-buttons.align-center {
        display: block;
        text-align: center;

        .button-left {
            text-align: center;
            border-top: 1px solid var(--alpha-change-border-color-light);
        }
        .button-left.fixed {
            position: fixed;
            z-index: 1002;
            bottom: 0;
            left: 50%;
            width: 792px;
            margin-left: 237px;
            transform: translateX(-50%);
        }
    }
    .quiz-buttons:not(.infinity).is-first .prev,
    .quiz-buttons:not(.infinity).is-last .next {
        display: none;
    }
    .quiz-buttons:not(.is-first):not(.is-last) .prev {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
    .quiz-buttons:not(.is-first):not(.is-last) .next {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
    .questions-pagination {
        margin-top: 1px;
        padding: 8px;
        background: var(--alpha-change-color-light-1);
        text-align: center;

        .nav-links {
            text-align: center;
        }
        .page-numbers {
            padding: 1rem 1.6rem;
            color: var(--alpha-dark-body-color);
            background-color: transparent;
            cursor: pointer;
        }
        
        .next,
        .prev {
            display: inline-block;
            padding: 8px;
            font-size: 0;
        }
        
        .prev:before {
            color: var(--alpha-grey-color);
            font-family: "Font Awesome 5 Free";
            font-size: 1.6rem;
            font-weight: 900;
            content: "\f104";
        }
        .next:after {
            color: var(--alpha-grey-color);
            font-family: "Font Awesome 5 Free";
            font-size: 1.6rem;
            font-weight: 900;
            content: "\f105";
        }

        .page-numbers.current,
        .page-numbers:hover {
            color: var(--alpha-primary-color);
        }
    }
    .quiz-status {
        background: var(--alpha-change-color-light-2);

        > div {
            padding: 0;
        }
    }
    #popup-footer {
        position: fixed;
        z-index: 999;
        #{$right}: 0;
        bottom: 0;
        #{$left}: 400px;
        width: 792px;
        height: 50px;
        margin: 0 auto;
        border-top: 1px solid var(--alpha-change-border-color-light);
        background: var(--alpha-change-color-light-1);
        transition: $left 0.25s;
        
        @include mq(xl, 'max') {
            & {
                width: 100%;
                padding: 0 15px;
            }
        }

        .course-item-nav {
            justify-content: space-between;

            .prev,
            .next {
                display: flex;
                line-height: 50px;
            }
            
            a {
                display: block;
                color: var(--alpha-dark-body-color);
                font-size: 1.6rem;
                font-weight: 300;
            }

            > div:before {
                color: var(--alpha-grey-color);
                font-family: $framework-font;
                font-size: 12px;
                font-weight: 900;
            }
            .prev:hover a,
            .prev:hover:before,
            .next:hover a,
            .next:hover:before {
                color: var(--alpha-primary-color);
            }
            .next {
                flex-direction: row-reverse;

                &:before {
                    margin-#{$left}: 8px;
                    content: if-ltr('\e913', '\e912');
                }
            }
            .prev:before {
                margin-#{$right}: 8px;
                content: if-ltr('\e912', '\e913');
            }
            .course-item-nav__name {
                display: none;
                position: absolute;
                top: -2rem;
                #{$right}: -3rem;
                width: auto;
                padding: 1rem 1.5rem;
                color: var(--alpha-dark-body-color);
                background: var(--alpha-light-color);
                line-height: 1;
            }
            .next:hover .course-item-nav__name,
            .prev:hover .course-item-nav__name {
                display: block;
            }
            .prev .course-item-nav__name {
                #{$right}: auto;
                #{$left}: -3rem;

                &:before {
                    right: auto;
                    left: 5px;
                }
            }
        }

        [data-nav="next"] {
            justify-content: flex-end;
        }
    }
    #sidebar-toggle {
        display: inline-block;
        position: absolute;
        z-index: 100;
        top: 198px;
        left: 400px;
        width: 40px;
        height: 40px;
        margin: 0;
        color: var(--alpha-change-color-light-1);
        background: var(--alpha-dark-color,#323334);
        opacity: 0.6;
        box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.1);
        border-radius: corner-values(0 3px 3px 0);
        cursor: pointer;
        transition: .3s;
        -webkit-appearance: none;
        border: none;

        &:after {
            display: none;
        }
        &:before {
            display: inline-block;
            position: absolute;
            top: 50%;
            left: 50%;
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            content: if-ltr('\f053', '\f054');
            transition: .3s;
            transform: translate(-50%, -50%);
        }
        &:focus {
            border: 0;
            outline: 0;
        }
    }
    .quiz-questions {
        .lp-fib-content {
            margin-bottom: 2rem;
            padding: 2rem;
            border: 2px solid var(--alpha-traffic-white-color);
            border-radius: $corner-md;
            line-height: 1.6;
        }
        .lp-fib-input {
            display: inline-block;
            width: auto;
            max-width: none;

            > input {
                height: 36px;
                padding: 6px 16px;
                border: 1px solid var(--alpha-change-color-dark-1);
                line-height: 36px;
            }
        }
        .lp-fib-answered {
            padding: 0 1rem;
            background: #ececec;
            white-space: nowrap;
        }
        .fail {
            border: 2px solid #d85554;
            .lp-fib-answered__answer {
                text-decoration: line-through;
            }
        }
        .lp-fib-note {
            display: flex;
            margin-left: 1rem;
            align-items: center;
            > span {
                display: inline-block;
                width: 2rem;
                height: 2rem;
                margin: 0 5px 0 0;
            }
        }
        .lp-sorting-choice__check-answer {
            padding: 5px 20px;
            border: 2px solid var(--alpha-success-color);
            border-radius: $corner-md;
            font-size: 1rem;
        }
    }
    .scrollbar-light {
        > .scroll-element {
            z-index: 9999;
        }
        > .scroll-element.scroll-y {
            display: none;
        }
        > .scroll-element.scroll-y .scroll-bar {
            box-sizing: border-box;
        }
    }
    #learn-press-item-comments {
        margin-bottom: 5rem;
    }
}

body.admin-bar #popup-course {
    top: 32px;
}

.lp-sidebar-toggle__close #popup-course > #sidebar-toggle {
    #{$left}: 0;

    &:before {
        content: if-ltr('\f054', '\f053');
    }
}


.lp-sidebar-toggle__close #popup-course #popup-sidebar {
    flex: 0;
}

.lp-sidebar-toggle__close #popup-course #popup-header,
.lp-sidebar-toggle__close #popup-course #popup-footer {
    left: 0;
}

@include mq(md, 'max') {
    body:not(.lp-sidebar-toggle__open) #popup-course > #sidebar-toggle {
        #{$left}: 0;
        
        &:before {
            content: if-ltr('\f054', '\f053');
        }
    }
    body:not(.lp-sidebar-toggle__open) #popup-course #popup-sidebar {
        flex: 0;
    }
    body:not(.lp-sidebar-toggle__open) #popup-course #popup-header,
    body:not(.lp-sidebar-toggle__open) #popup-course #popup-footer {
        #{$left}: 0;
    }
}

.course-curriculum .section-header .section-meta {
    position: relative;
}

@include mq(xl, 'max') {
    #popup-course #popup-sidebar {
        flex-basis: 300px;
    }
    #popup-course #popup-sidebar .course-curriculum {
        width: 300px;
    }
    #popup-course #popup-header,
    #popup-course #popup-footer {
        left: 300px;
    }
    #popup-course #sidebar-toggle {
        left: 299px;
    }
}

@include mq(md, 'max') {
    body.admin-bar #popup-course {
        top: 46px;
    }
    #popup-course #popup-sidebar {
        flex-basis: 250px;
    }
    #popup-course #popup-sidebar .course-curriculum {
        width: 250px;
    }
    #popup-course #popup-header,
    #popup-course #popup-footer {
        #{$left}: 250px;
    }
    #popup-course #sidebar-toggle {
        #{$left}: 249px;
    }
    #popup-course #sidebar-toggle:checked ~ #popup-sidebar {
        flex-basis: 0;
    }
    #popup-course #sidebar-toggle:checked ~ #popup-footer,
    #popup-course #sidebar-toggle:checked ~ #popup-header {
        #{$left}: 0;
    }
    #popup-course .course-item-meta .item-meta.count-questions,
    #popup-course .course-item-meta .item-meta.duration {
        display: none;
    }
}

.lp-overlay {
    display: none;
    position: fixed;
    z-index: 10000;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    transition-property: opacity;
}

.wp-admin .lp-modal-dialog .lp-modal-header {
    padding: 2em;
}

.wp-admin .lp-modal-dialog .lp-modal-header h3 {
    font-size: 1.4em;
}

.lp-modal-dialog {
    display: flex;
    position: fixed;
    z-index: 9999;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    min-height: 100vh;
    text-align: center;
    align-items: center;
    justify-content: center;
}

.lp-modal-dialog .lp-modal-content {
    display: inline-block;
    overflow: hidden;
    z-index: 2;
    width: auto;
    max-width: 600px;
    text-align: left;
    vertical-align: middle;
    background: white;
    color: var(--alpha-change-color-dark-1);
}

.lp-modal-dialog .lp-modal-header {
    background: var(--alpha-traffic-white-color);
    border-bottom: 1px solid var(--alpha-change-border-color-light);
    padding: 1em;
}

.lp-modal-dialog .lp-modal-header h3 {
    margin: 0;
    font-size: inherit;
}

.lp-modal-dialog .lp-modal-body .main-content {
    max-height: 500px;
    overflow: auto;
    padding: 2rem;
}

.lp-modal-dialog .lp-modal-body .main-content h3,
.lp-modal-dialog .lp-modal-body .main-content h2,
.lp-modal-dialog .lp-modal-body .main-content .pd-2em {
    padding: 0 2em;
}

.lp-modal-dialog .lp-modal-footer {
    padding: 1rem 2rem;
    background-color: var(--alpha-traffic-white-color);
    text-align: right;
}

#lp-modal-buttons .modal-button-ok,
.lp-modal-dialog button.btn-yes {
    color: var(--alpha-change-color-light-1);
    background-color: var(--alpha-change-color-dark-1);
    border-color: var(--alpha-change-color-dark-1);

    &:hover {
        background-color: var(--alpha-change-color-dark-1-hover);
        border-color: var(--alpha-change-color-dark-1-hover);
    }
}
#lp-modal-buttons .modal-button-cancel,
.lp-modal-dialog button.btn-no {
    color: var(--alpha-change-color-dark-1);
    background: transparent;
    border-color: var(--alpha-change-color-dark-1);

    &:hover {
        color: var(--alpha-change-color-light-1);
        background-color: var(--alpha-change-color-dark-1);
        border-color: var(--alpha-change-color-dark-1);
    }
}
.lp-modal-dialog .lp-modal-footer button,
#popup-course #lp-modal-buttons .lp-button {
    padding: .8rem 2.3rem;
}

#lp-modal-overlay {
    display: none;
    position: fixed;
    z-index: 999999;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.5;
    background: #000;
}

#lp-modal-window {
    display: none;
    position: fixed;
    z-index: 999999;
    top: 50%;
    left: 50%;
    padding: 3.5rem 6rem 2.8rem 6rem;
    background: var(--alpha-change-color-light-1);
    transform: translate(-50%, -50%);
    border-radius: $corner-md;
}

#lp-modal-window #lp-modal-content {
    margin: 0 0 2.4rem 0;
    color: var(--alpha-change-color-dark-1);
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 2.6rem;
    text-align: center;
}

#lp-modal-window #lp-modal-content > * {
    margin: 0 0 0.5em;
}

#lp-modal-window #lp-modal-content #lp-modal-buttons {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
}

#lp-modal-window #lp-modal-buttons {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
}

#lp-modal-window #lp-modal-buttons .lp-button {
    position: relative;
    margin: 0 1rem 0 1rem;
}

.learn-press-comments {
    width: 792px;
    max-width: 100%;
    margin: 0 auto;
}

@include mq(xl, 'max') {
    .learn-press-comments {
        width: 100%;
    }
}

.learn-press-progress {
    overflow: hidden;
    position: relative;
    width: 200px;
    height: 6px;
    border-radius: $corner-sm;
}

.learn-press-progress .learn-press-progress__active {
    position: absolute;
    z-index: 1;
    #{$left}: -100%;
    width: 100%;
    height: 100%;
    border-radius: $corner-sm;
    background: var(--alpha-primary-color);
    transition: .3s;
}

.learn-press-progress::before {
    content: "";
    display: block;
    position: absolute;
    z-index: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--alpha-change-border-color);
}

.course-curriculum .section-header .section-left {
    display: flex;
}

.course-curriculum .section-header .section-left .section-title {
    flex: 1;
}

.course-curriculum .section-header .section-left .section-toggle {
    display: flex;
    flex: 0 0 40px;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
}

.course-curriculum .section-header .section-left .section-toggle .fa-caret-down {
    display: none;
}

.course-curriculum .section-header .learn-press-progress {
    width: 80px;
}

.course-curriculum .section.closed .section-toggle .fa-caret-down {
    display: block;
}

.course-curriculum .section.closed .section-toggle .fa-caret-up {
    display: none;
}

.course-curriculum .section.closed .section-content {
    overflow: hidden;
    height: 0;
}

.lp-skeleton-animation {
    margin: 0;
    padding: 0;
    list-style: none;
}

.lp-skeleton-animation > li {
    width: 100%;
    height: 1.6rem;
    margin-top: 1.5rem;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(190, 190, 190, 0.2) 25%, rgba(129, 129, 129, 0.24) 37%, rgba(190, 190, 190, 0.2) 63%);
    background-size: 400% 100%;
    list-style: none;
    animation: lp-skeleton-loading 1.4s ease infinite;
}

@keyframes lp-skeleton-loading {
    0% {
        background-position: 100% 50%;
    }
    to {
        background-position: 0 50%;
    }
}

/*  start reset css */

.wrap-fullwidth a:focus,
.wrap-fullwidth button:focus,
.wrap-fullwidth input:focus,
.wrap-fullwidth textarea:focus {
    border: 0;
    outline: 0;
}

.wrap-fullwidth p {
    word-break: break-word;
}

.wrap-fullwidth p:last-child {
    margin-bottom: 0;
}

.wrap-fullwidth label {
    display: block;
    margin: 0;
    outline: none;
}


.wrap-fullwidth form {
    margin: 0;
}

.wrap-fullwidth .col-full {
    box-sizing: border-box;
    max-width: 100%;
    padding: 0;
}

.wrap-fullwidth .col-full .woocommerce-breadcrumb {
    display: none;
}

/*  end reset css */
footer {
    clear: both;
}

.margin-bottom {
    margin-bottom: 20px;
}

.hide-if-js {
    display: none !important;
}

.clearfix::after {
    display: block;
    clear: both;
    content: "";
}

.lp-form-fields {
    margin: 0;
    padding: 0;
    list-style: none;
}

.lp-form-fields .form-field {
    margin: 0 0 20px 0;
    list-style: none;
}

.lp-content-wrap > h2 {
    font-size: 3rem;
}

.learnpress-page .lp-button,
.learnpress-page #lp-button,
.learnpress-page button[type="submit"] {
    background: transparent;
    color: var(--alpha-change-color-light-1);
    background-color: var(--alpha-primary-color);
    border: 2px solid var(--alpha-primary-color);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    vertical-align: middle;
    transition: .3s;
    
    &:hover {
        background: var(--alpha-primary-color-hover);
        border: 2px solid var(--alpha-primary-color-hover);
        cursor: pointer;
    }
}

.learnpress-page button[type="submit"] {
    padding: 1.3rem 3.4rem;
}

.learnpress-page .lp-button.large,
.learnpress-page #lp-button.large {
    padding: 1.8rem 3rem;
    font-size: 1.8rem;
}

.learnpress-page .lp-button.gray,
.learnpress-page #lp-button.gray {
    position: absolute;
    z-index: 1;
    top: 8px;
    #{$right}: 5px;
    padding: 0;
    border: 0;

    &:hover {
        background: transparent;
    }
}


.learnpress-page .lp-button.btn-ajax-off .icon {
    display: none;
}

.learnpress-page .btn-ajax-on .icon {
    display: inline-block;
    margin-right: 5px;
    animation: rotating4 1s linear infinite;
}

.learnpress-page .lp-button.loading:before,
.learnpress-page #lp-button.loading:before {
    display: inline-block;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f110";
    animation: rotating4 1s linear infinite;
}

.learnpress-page .rwmb-field .description {
    margin-top: 8px;
    color: var(--alpha-grey-color);
    font-size: smaller;
    font-style: italic;
}

.lp-ajax-message {
    display: none;
    margin-top: 2rem;
    padding: 2rem;
    border: 2px solid var(--alpha-success-color);
    border-radius: 9px;
    font-size: 1.5rem;
    line-height: 1.4;
}

.lp-ajax-message.error {
    border-color: #d85554;
}

.course-meta {
    margin-bottom: 1.4rem;
}

.course-meta .course-students:before {
    font-family: "Font Awesome 5 Free";
    content: "";
}

#learn-press-course-tabs {
  margin-bottom: 4rem;
}


/* Archive */
.learn-press-checkout-comment h4 {
    display: none;
}

.order-comments {
    width: 100%;
    min-height: 150px;
}

.learn-press-progress {
    position: relative;
}

.learn-press-progress .progress-bg {
    overflow: hidden;
    position: relative;
    height: 6px;
    background: var(--alpha-change-border-color);
    border-radius: $corner-md;
}

.learn-press-progress .progress-bg .progress-active {
    position: absolute;
    #{$left}: 50%;
    width: 100%;
    height: 100%;
    margin-#{$left}: -100%;
    background: var(--alpha-primary-color);
    border-radius: $corner-md;
}

/**
 * Forms
 */
.retake-course,
.enroll-course,
.purchase-course {
    display: inline-block;
}

/* */
.table-orders {
    font-size: 1.6rem;
}

.table-orders th,
.table-orders td {
    padding: 5px 10px;
}

.form-button {
    display: inline-block;
}

.learn-press-pagination {
    padding-bottom: 2rem;
    text-align: center;
}

.learn-press-pagination .page-numbers {    
    > li {
        display: inline-block;
        margin: 0;
        padding: 0 1.4rem;
    }
    
    > li .page-numbers {
        float: none;
        padding: 0;
        color: var(--alpha-dark-body-color);
        background: transparent;
        font-size: 1.6rem;
        font-weight: 300;
    }
    
    > li .page-numbers:hover {
        color: var(--alpha-primary-color);
    }
    
    > li .current {
        color: var(--alpha-primary-color);
        font-weight: 400;
    }
  
}

ul.list-table-nav {
    display: flex;
    margin-left: 0;
    list-style: none;
}

ul.list-table-nav .nav-text {
    text-align: $left;
    flex: 1;
}

ul.list-table-nav .nav-pages {
    text-align: $right;
    flex: 1;
}

ul.list-table-nav .learn-press-pagination {
    display: inline-block;
    margin-bottom: 0;
}

.primary-color {
    color: var(--alpha-primary-color);
}

.primary-color-before:before {
    color: var(--alpha-primary-color);
}

.primary-color-after:after {
    color: var(--alpha-primary-color);
}

.primary-background-color {
    background: var(--alpha-primary-color);
}

.primary-background-color {
    background: var(--alpha-primary-color);
}

.course-origin-price {
    margin-right: 5px;
    font-size: 85%;
    text-decoration: line-through;
}

.course-item-nav {
    display: flex;
}

.course-item-nav .prev span,
.course-item-nav .next span {
    display: block;
    font-weight: bold;
}

.course-item-nav .prev a,
.course-item-nav .next a {
    color: var(--alpha-grey-color);
}

.course-item-nav .next {
    text-align: $right;
}

.content-item-wrap #comments {
    margin-left: 0;
    margin-right: 0;
}

.content-item-wrap #comments #comment {
    box-sizing: border-box;
}

.course-summary .course-summary-sidebar {
    position: relative;
}

.course-summary .course-summary-sidebar.slide-down .course-summary-sidebar__inner {
    position: fixed;
    top: 0;
}

.course-summary .course-summary-sidebar.slide-top .course-summary-sidebar__inner {
    position: absolute;
}

.course-graduation span {
    color: var(--alpha-grey-color);
}

.course-graduation .icon {
    margin-right: 5px;
    font-size: 2rem;
}

.course-graduation.passed .icon {
    color: var(--alpha-success-color);
}

.course-graduation.error .icon {
    color: #d85554;
}

.learn-press-template-warning::before {
    color: #ffc107;
    font-family: "Font Awesome 5 Free";
    content: "\f071";
}

.lp-badge {
    display: flex;
    height: 3rem;
    padding: 0;
    line-height: 1;
    align-items: center;
    justify-content: center;
}

.lp-badge::before,
.lp-badge::after {
    content: "";
}

.lp-badge:before {
    display: inline-block;
    position: relative;
    z-index: 10;
    color: var(--alpha-change-color-light-1);
    font-weight: bold;
    line-height: 1;
}

.lp-badge.featured-course {
    position: absolute;
    z-index: 1;
    top: 25px;
    #{$left}: -110px;
    width: 300px;
    background: #93f;
    text-align: center;
    transform: rotate(-45deg);
}

.lp-badge.featured-course:before {
    content: attr(data-text);
    font-size: 12px;
    text-transform: uppercase;
}

#learn-press-course-tabs input[name="learn-press-course-tab-radio"],
#learn-press-course-tabs .course-tab-panel {
    display: none;
}

#learn-press-course-tabs .course-nav label {
    display: block;
    margin: 0;
    font-size: 1.6rem;
    font-weight: 600;
    text-align: center;
    text-transform: capitalize;
    cursor: pointer;
}

#learn-press-course-tabs input[name="learn-press-course-tab-radio"]:nth-child(1):checked ~ .course-tab-panels .course-tab-panel:nth-child(1) {
  display: block;
}

#learn-press-course-tabs input[name="learn-press-course-tab-radio"]:nth-child(2):checked ~ .course-tab-panels .course-tab-panel:nth-child(2) {
  display: block;
}

#learn-press-course-tabs input[name="learn-press-course-tab-radio"]:nth-child(3):checked ~ .course-tab-panels .course-tab-panel:nth-child(3) {
  display: block;
}

#learn-press-course-tabs input[name="learn-press-course-tab-radio"]:nth-child(4):checked ~ .course-tab-panels .course-tab-panel:nth-child(4) {
  display: block;
}

#learn-press-course-tabs input[name="learn-press-course-tab-radio"]:nth-child(5):checked ~ .course-tab-panels .course-tab-panel:nth-child(5) {
  display: block;
}

#learn-press-course-tabs input[name="learn-press-course-tab-radio"]:nth-child(6):checked ~ .course-tab-panels .course-tab-panel:nth-child(6) {
  display: block;
}

#learn-press-course-tabs input[name="learn-press-course-tab-radio"]:nth-child(7):checked ~ .course-tab-panels .course-tab-panel:nth-child(7) {
  display: block;
}

#learn-press-course-tabs input[name="learn-press-course-tab-radio"]:nth-child(8):checked ~ .course-tab-panels .course-tab-panel:nth-child(8) {
  display: block;
}

#learn-press-course-tabs input[name="learn-press-course-tab-radio"]:nth-child(9):checked ~ .course-tab-panels .course-tab-panel:nth-child(9) {
  display: block;
}

.no-event {
    pointer-events: none;
}

@include mq(sm, 'max') {
    ul.learn-press-courses {
        margin-right: 0;
    }
    ul.learn-press-courses .course {
        width: 100%;
        margin-right: 0;
    }
}

.alpha-rounded-skin {
    .learn-press-tabs .nav-link {
        border-radius: $corner-md;
    }
    &.learnpress button,
    .learn-press-page .lp-button,
    .learn-press-page #lp-button {
        border-radius: $corner-sm;
    }
}


// Sidebar widgets

.course-entry {
    display: flex;
    align-items: center;

    h3 {
        font-size: 1.4rem;
        margin-bottom: 0;
        color: inherit;
    }

    .course-cover {
        flex: 0 0 90px;
        max-width: 90px;
        height: 90px;

        img {
            height: 100%;
            object-fit: cover;
        }
    }

    .course-detail {
        flex: 0 0 calc(100% - 120px);
        max-width: calc(100% - 120px);
        margin-#{$left}: auto;
    }

    .course-meta-field {
        color: var(--alpha-change-color-dark-1);
    }

    & + .course-entry {
        margin-top: calc(2 * var(--alpha-gap));
    }
}

.learnpress-page.archive {
    .sidebar {
        max-width: var(--alpha-left-sidebar-width, 25%);
        flex: 0 0 var(--alpha-left-sidebar-width, 25%);
        padding: var(--alpha-gap);
    }
}

@include mq(lg) {
	.learnpress-page.archive .sidebar-fixed + .main-content {
		max-width: calc(100% - var(--alpha-left-sidebar-width, 25%));
	}
}

.archive.learnpress .sidebar .widget:first-child {
    margin-top: .8rem;
}
.archive.learnpress .main {
    padding-top: 4rem;
}