/** My Learning Center, My Membership */
#main {
    background-color: #F3EEEE !important;
}

.col.medium-4.large-4 .col-inner {
    height: 100%;
}
div.premium-information {
    text-align: center;
    padding: 50px 0;
}
.premium-information .membership-title {
    margin-bottom: 0;
    padding-bottom: 0;
}
.premium-information .active-membership-date,
.card .user-statuses .active-membership-date {
    color: #35509a;
    background-color: #fff3d8;
    border-radius: 20px;
    padding: 10px 30px;
    margin: 10px 0;
    font-size: 0.9em;
    display: inline-block;
}
.premium-information .active-membership-date .active-date,
.card .user-statuses .active-membership-date .active-date {
    font-weight: 600;
}
.user-statuses .stop-automatic-payments {
    margin-top: 30px;
}
.stop-automatic-payments {
    color: #35509a;
    margin-top: 15px;
    margin-bottom: 20px;
    display: inline-flex;
}
.stop-automatic-payments .circle-question-mark {
    background-color: #d7e3f2;
    color: #030d51;
    border-radius: 50%;
    display: inline-block;
    font-size: 0.9em;
    width: 20px;
    height: 20px;
    line-height: 20px;
    margin-right: 5px;
    vertical-align: top;
    margin-top: 2px;
}
.stop-automatic-payments a {
    font-size: 0.9em;
    text-align: left;
    display: inline-block;
}
.woocommerce-account-my-memberships .premium-information {
    padding-bottom: 0;
}

.card.statuses .user-statuses {
    border-bottom: solid 1px #ccc !important;
}

.card.statuses .user-statuses .Basic {
    color: #222;
    text-align: center;
    leading-trim: both;
    text-edge: cap;

    font-size: 1.25rem;
    font-family: DM Sans;
    font-style: normal;
    font-weight: 700;
    line-height: 160%;
    letter-spacing: -0.00625rem;
}

.card.statuses .user-statuses .Premium {
    color: #222;
    text-align: center;
    leading-trim: both;
    text-edge: cap;

    font-size: 1.25rem;
    font-family: DM Sans;
    font-style: normal;
    font-weight: 700;
    line-height: 160%;
    letter-spacing: -0.00625rem;
}

.card.statuses .user-statuses .active-membership-date {
    border-radius: 3.125rem;
    background: #F80;
    display: flex;
    margin-bottom: 2rem;
    justify-content: center;
    align-items: center;
    gap: 0.3rem;
    color: #FFF;
    text-align: center;
    leading-trim: both;
    text-edge: cap;
    font-size: 0.875rem;
    font-family: Pretendard;
    font-style: normal;
    font-weight: 400;
    line-height: 98%;
}

.card.statuses .user-statuses .stop-automatic-payments {
    display: none;
}

.learndash-wrapper .ld-item-list .ld-section-heading button {
    border-bottom: none !important;
}

.learndash-wrapper .ld-item-list .ld-section-heading button.view-active {
    border-bottom: 2px solid #030D51 !important;
    color: #222 !important;
}

.learndash-wrapper .ld-item-list .ld-section-heading .edit-course-view-button-container .edit-course-view-button {
    background: #222 !important;
    color: white !important;
}

.learndash-wrapper .ld-item-list .ld-item-list-item .ld-item-list-item-preview {
    padding: 0.94rem 1.56rem !important;
}

.content-area.page-wrapper .card.account-user {
    border-radius: 0.63rem !important;
    border: none !important;
}

.content-area.page-wrapper .card.statuses {
    border-radius: 0.63rem !important;
    border: none !important;
}

.learndash-wrapper .ld-item-list .ld-item-list-item.ld-expandable {
    border: none !important;
}

.learndash-wrapper .ld-item-list .ld-item-list-item.completed {
    background: #F9F7F7 !important;
}

.learndash-wrapper .ld-expand-button.ld-compact {
    background-color: transparent !important;
}

.learndash-wrapper .ld-icon-certificate:before {
    content: url(https://cdn.talktomeinkorean.com/wp-content/themes/ttmik/assets/images/my-learning-center-icons/certificate.svg) !important;
    filter : none !important;
}

.learndash-wrapper .ld-secondary-in-progress-icon::before {
    content: url(https://cdn.talktomeinkorean.com/wp-content/themes/ttmik/assets/images/my-learning-center-icons/inprogress.svg) !important;
}

.learndash-wrapper .ld-certificate-link {
    display: flex;
    align-items: center;
}

.learndash-wrapper .ld-icon.ld-icon-certificate {
    margin-top: -4px;
    margin-right: 0.55rem;
}

.learndash-wrapper .ld-in-progress-text {
    display: none;
    width: max-content;
    margin-right: .8rem;
    text-align: center;
    color: #88F;
    font-family: Inter;
    font-size: 0.8125rem;
    font-style: normal;
    font-weight: 600;
    line-height: 170%;
    letter-spacing: -0.00406rem;
}

.learndash-wrapper .ld-completed-text {
    color: #F80;
    text-align: center;
    font-family: Inter;
    font-size: 0.8125rem;
    font-style: normal;
    font-weight: 600;
    line-height: 170%;
    letter-spacing: -0.00406rem;
}

.learndash-wrapper .have-not-any-courses .hidden-course-view.view-button {
    display: none; 
}

.learndash-wrapper .ld-item-list.have-not-any-courses  .ld-section-heading button.view-button {
    border-bottom: none !important;
    cursor: default; 
}
.learningcenter-guide-banner-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1.5rem;
    margin-top: 2rem
}

.learningcenter-guide-banner-container .learningcenter-guide-banner-image-desktop {
    border-radius: 10px;
}

.learningcenter-guide-banner-container .learningcenter-guide-banner-image-desktop:hover {
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.25);
}

.learningcenter-guide-banner-container .learningcenter-guide-banner-image-mobile {
    display: none;
    border-radius: 10px;
}

@media only screen and (max-width: 1024px) {
    .learndash-wrapper .view-change-buttons-container .ld-icon-arrow-down.ld-icon {
        background: url(https://cdn.talktomeinkorean.com/wp-content/themes/ttmik/assets/images/arrow_dropdown_widget.svg) no-repeat center/contain !important;
        margin-left: 0.63rem !important;
        position: relative;
        top: 0;
    }
    .learndash-wrapper .ld-item-list .ld-section-heading button.view-active {
        border-bottom: none !important;   
    }
    .learndash-wrapper .ld-item-list.have-not-premium-course.have-not-any-courses .ld-section-heading .view-change-buttons-container .ld-icon-arrow-down.ld-icon {
        display: none !important;
    }
}

@media only screen and (max-width: 769px) {
    .premium-information .active-membership-date,
    .card .user-statuses .active-membership-date {
        border-radius: 5px;
    }

    div.premium-information {
        padding: 30px 0;
    }

    .stop-automatic-payments {
        margin: 25px 15px 20px 15px;
    }

    .stop-automatic-payments .circle-question-mark {
        padding: 0px 6px;
        margin-right: 8px;
    }

    .stop-automatic-payments a {
        line-height: 150%;
    }

    .card.statuses .user-statuses .active-membership-date {
        flex-direction: column;
        border-radius: 0.625rem;
    }

    .premium-information .active-membership-date, .card .user-statuses .active-membership-date {
        padding: 0.75rem 1.5rem;;
    }

    .learndash-wrapper .view-change-buttons-container .ld-icon-arrow-down.ld-icon {
        top: 2px;
    }

    .learndash-wrapper .view-change-buttons-container .ld-icon-arrow-down.ld-icon::before {
        content: none !important;
    }

    .learningcenter-guide-banner-container {
        grid-template-columns: 1fr;
    }

    .learningcenter-guide-banner-container .learningcenter-guide-banner-image-desktop {
        display: none;
    }

    .learningcenter-guide-banner-container .learningcenter-guide-banner-image-mobile {
        display: block;
    }
}

@media only screen and (max-width: 425px) {
    .learndash-wrapper .ld-in-progress-text {
        display: none;
    }
    .learndash-wrapper .ld-completed-text {
        display: none;
    }
    .learndash-wrapper .ld-certificate-link {
        margin-right: 8px !important;
    }
    .learndash-wrapper .ld-status-icon {
        margin-right: 12px !important;
    }
}

@media only screen and (max-width: 321px) {
    .premium-information .active-membership-date, .card .user-statuses .active-membership-date {
        padding: 0.75rem .7rem;
    }
}

@media screen and (max-width: 550px) {
    .large-12.col .col-inner .row .col.pb-0.medium-4.small-12.large-4 {
        margin-bottom: 1.5rem !important;
    }
}