body {
font-family: "Aktiv Grotesk", Sans-serif !important;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Chillax", Sans-serif !important;
}
:root {
--upskill-main-font: "Aktiv Grotesk", Sans-serif;
--upskill-heading-font: "Chillax", Sans-serif;
--bs-font-sans-serif: "Aktiv Grotesk", Sans-serif;
--primary-color: #df5941;
--secondary-color: #131f33;
--site-bg-color: #f4edeb;
}
.btn-theme {
background-color: var(--primary-color);
color: #fff;
}
.btn-theme-sec {
background-color: var(--secondary-color);
color: #fff;
}
.single-course-ecademy-wrapper {
margin-bottom: 40px;
}
.single-course-ecademy-main-card {
background: #fff;
border-radius: 10px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
padding: 25px 30px 30px;
margin-bottom: 30px;
}
.course-create-form .form-control {
width: 100%;
border-radius: 4px;
border: 1px solid #e1e1e1;
padding: 8px 12px;
font-size: 14px;
}
.course-create-section {
margin-bottom: 25px;
}
.course-create-section h3 {
font-size: 18px;
margin-bottom: 12px;
}
.course-create-notice {
border-radius: 4px;
padding: 12px 15px;
margin-bottom: 20px;
font-size: 14px;
}
.course-create-success {
background: #e6f9f0;
color: #155724;
}
.course-create-error {
background: #fdecea;
color: #721c24;
}
.course-create-error ul {
margin: 0;
padding-left: 18px;
}
.course-modules-list .course-module-row {
margin-bottom: 15px;
}
.course-create-actions {
margin-top: 15px;
}
.single-course-ecademy-header .single-course-ecademy-category {
margin-bottom: 10px;
font-size: 14px;
text-transform: uppercase;
} .single-sfwd-courses .learndash-wrapper-login-modal.ld-modal-closed,
.learndash-wrapper-login-modal.ld-modal-closed {
display: none !important;
} .learndash-wrapper-login-modal:not(.ld-modal-closed) {
display: block !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
z-index: 999999 !important;
background: rgba(0, 0, 0, 0.5) !important;
}
.learndash-wrapper-login-modal .ld-modal {
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
background: #fff !important;
max-width: 500px !important;
width: 90% !important;
padding: 20px !important;
border-radius: 8px !important;
box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3) !important;
}
.single-course-ecademy-title {
font-size: 32px;
margin-bottom: 15px;
font-weight: 600;
} .ld-student-dashboard {
background: #f5f6fa;
min-height: 100vh;
padding: 0 !important;
}
.ld-dashboard-welcome {
margin-bottom: 30px;
}
.ld-dashboard-welcome h2 {
font-size: 24px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 5px;
}
.ld-dashboard-welcome p {
color: #666;
}
.ld-resume-card {
background: #fff;
border-radius: 16px;
padding: 24px;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
margin-bottom: 30px;
}
.ld-resume-content {
flex: 1;
}
.ld-resume-content .resume-label {
font-size: 14px;
color: #df5941;
font-weight: 600;
margin-bottom: 8px;
display: block;
}
.ld-resume-content h3 {
font-size: 20px;
font-weight: 700;
margin-bottom: 15px;
}
.ld-resume-progress {
width: 250px;
margin-right: 30px;
}
.ld-resume-progress .progress {
height: 8px;
background-color: #eee;
border-radius: 4px;
margin-bottom: 8px;
}
.ld-resume-progress .progress-bar {
background-color: #df5941;
}
.ld-resume-progress .progress-text {
font-size: 13px;
color: #666;
display: flex;
justify-content: space-between;
}
.ld-resume-action .btn-resume {
background-color: #df5941;
color: #fff;
padding: 12px 24px;
border-radius: 8px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
}
.ld-resume-action .btn-resume:hover {
background-color: #c44e39;
transform: translateY(-2px);
}
.ld-stat-cards {
display: grid;
} .layout-courses.course-list-view .course-card-modern {
flex-direction: column;
}
@media (min-width: 768px) {
.layout-courses.course-list-view .course-card-modern {
flex-direction: row;
}
.layout-courses.course-list-view .course-thumbnail-wrapper.course-thumbnail-list {
flex: 0 0 40%;
max-width: 40%;
}
}
.ld-stat-card-new {
background: #fff;
border-radius: 16px;
padding: 20px;
display: flex;
align-items: center;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}
.ld-stat-icon-new {
width: 48px;
height: 48px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
font-size: 20px;
}
.icon-enrolled {
background: rgba(223, 89, 65, 0.1);
color: #df5941;
}
.icon-progress {
background: rgba(59, 130, 246, 0.1);
color: #3b82f6;
}
.icon-completed {
background: rgba(16, 185, 129, 0.1);
color: #10b981;
}
.icon-certificates {
background: rgba(245, 158, 11, 0.1);
color: #f59e0b;
}
.ld-stat-info-new .stat-value {
font-size: 20px;
font-weight: 700;
display: block;
}
.ld-stat-info-new .stat-label {
font-size: 13px;
color: #666;
}
.ld-dashboard-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 30px;
}
.ld-courses-section h3 {
font-size: 18px;
font-weight: 700;
margin-bottom: 20px;
}
.ld-courses-grid-new {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.ld-course-card-new {
background: #fff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}
.ld-course-thumb {
height: 160px;
background-size: cover;
background-position: center;
}
.ld-course-body {
padding: 20px;
}
.ld-course-category {
font-size: 11px;
text-transform: uppercase;
color: #df5941;
font-weight: 600;
margin-bottom: 8px;
display: block;
}
.ld-course-title {
font-size: 16px;
font-weight: 700;
margin-bottom: 15px;
height: 44px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.ld-course-footer {
display: flex;
align-items: center;
justify-content: space-between;
} .apus-page-loading {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
}
.ld-course-progress-mini {
flex: 1;
margin-right: 15px;
}
.ld-course-progress-mini .progress {
height: 6px;
background-color: #eee;
border-radius: 3px;
}
.ld-course-progress-mini .progress-bar {
background-color: #10b981;
}
.ld-course-btn {
width: 36px;
height: 36px;
border-radius: 50%;
background: #f8f9fa;
display: flex;
align-items: center;
justify-content: center;
color: #1a1a1a;
text-decoration: none;
transition: all 0.3s ease;
}
.ld-course-btn:hover {
background: #df5941;
color: #fff;
}
.ld-sidebar-widget {
background: #fff;
border-radius: 16px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}
.ld-sidebar-widget h4 {
font-size: 16px;
font-weight: 700;
margin-bottom: 15px;
}
.ld-activity-list {
list-style: none;
padding: 0;
margin: 0;
}
.ld-activity-item {
display: flex;
margin-bottom: 15px;
}
.ld-activity-icon {
width: 32px;
height: 32px;
border-radius: 50%;
background: #f8f9fa;
display: flex;
align-items: center;
justify-content: center;
margin-right: 12px;
font-size: 12px;
color: #666;
}
.ld-activity-text .activity-title {
font-size: 13px;
font-weight: 600;
display: block;
}
.ld-activity-text .activity-date {
font-size: 11px;
color: #999;
}
@media (max-width: 991px) {
.ld-stat-cards {
grid-template-columns: repeat(2, 1fr);
}
.ld-dashboard-grid {
grid-template-columns: 1fr;
}
}
.upskill-social-login {
margin-bottom: 20px;
text-align: center;
}
.upskill-social-login .social-title {
font-weight: 600;
margin-bottom: 10px;
color: var(--secondary-color);
}
.upskill-social-login .social-buttons>* {
display: inline-block;
}
.social-divider {
display: flex;
align-items: center;
gap: 12px;
margin: 20px 0;
color: #666;
font-size: 14px;
}
.social-divider::before,
.social-divider::after {
content: "";
flex: 1;
height: 1px;
background: #e5e5e5;
}
@media (max-width: 575px) {
.ld-stat-cards {
grid-template-columns: 1fr;
}
.ld-courses-grid-new {
grid-template-columns: 1fr;
}
.ld-resume-card {
flex-direction: column;
align-items: flex-start;
}
.ld-resume-progress {
width: 100%;
margin-right: 0;
margin-bottom: 20px;
}
}
.single-course-ecademy-subtitle {
font-size: 16px;
color: #666;
margin-bottom: 20px;
}
.single-course-ecademy-badges {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 15px;
}
.single-course-ecademy-badge {
display: inline-flex;
align-items: center;
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 500;
color: #131f33;
background-color: #fae9e6;
}
.single-course-ecademy-meta {
display: flex;
flex-wrap: wrap;
gap: 20px;
font-size: 14px;
color: #777;
margin-top: 10px;
}
.single-course-ecademy-meta .meta-item {
display: flex;
align-items: center;
gap: 5px;
}
.single-course-ecademy-meta .meta-icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: #df5941;
}
.single-course-ecademy-meta .meta-label {
font-weight: 500;
}
.single-course-ecademy-thumbnail img {
width: 100%;
border-radius: 4px;
}
.single-course-ecademy-hero-banner {
position: relative;
width: 100vw;
min-height: 260px;
background-size: cover;
background-position: center center;
margin-bottom: 40px;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
.single-course-ecademy-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35));
z-index: 1;
}
.single-course-ecademy-hero-inner {
position: relative;
z-index: 2;
max-width: 1140px;
margin: 0 auto;
padding: 60px 15px;
color: #fff;
}
.single-course-ecademy-hero-breadcrumb {
margin-bottom: 20px;
font-size: 14px;
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
background: #f2f2f2;
backdrop-filter: blur(4px);
padding: 8px 16px;
border-radius: 30px;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.single-course-ecademy-hero-breadcrumb a {
color: #131f33;
text-decoration: none;
font-weight: 600;
transition: opacity 0.2s;
}
.single-course-ecademy-hero-breadcrumb a:hover {
opacity: 0.8;
}
.single-course-ecademy-hero-breadcrumb .current {
color: #df5941;
font-weight: 400;
opacity: 0.9;
}
.single-course-ecademy-hero-breadcrumb i {
font-size: 10px;
opacity: 0.6;
}
.single-course-ecademy-hero-title {
font-size: 36px;
font-weight: 700;
margin: 0;
}
.single-course-ecademy-preview-card {
width: 100%;
background: #fff;
border-radius: 6px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
overflow: hidden;
z-index: 2;
}
.single-course-ecademy-preview-media {
position: relative;
height: 190px;
background-size: cover;
background-position: center center;
}
.single-course-ecademy-preview-media::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6));
}
.single-course-ecademy-play-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #fff;
text-decoration: none;
}
.single-course-ecademy-play-btn .play-icon {
width: 60px;
height: 60px;
border-radius: 50%;
background: #df5941;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
position: relative;
}
.single-course-ecademy-play-btn .play-icon::before {
content: "";
border-style: solid;
border-width: 8px 0 8px 14px;
border-color: transparent transparent transparent #fff;
margin-left: 4px;
}
.single-course-ecademy-play-btn .play-label {
margin-top: 12px;
font-weight: 500;
}
.single-course-ecademy-preview-body {
padding: 18px 20px 20px;
}
.single-course-ecademy-tabs {
margin-top: 30px;
margin-bottom: 20px;
}
.single-course-ecademy-tabs-nav {
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 0;
margin: 0 0 20px 0;
border-radius: 6px;
background: #f8fcff;
border: 1px solid #e0f0f7;
}
.single-course-ecademy-tabs-nav li {
flex: 1 1 auto;
text-align: center;
padding: 12px 20px;
cursor: pointer;
font-weight: 500;
color: #555;
border-bottom: 2px solid transparent;
}
.single-course-ecademy-tabs-nav li.active {
color: #111;
border-color: #df5941;
background: #ffffff;
}
.single-course-ecademy-tabs-content .single-course-ecademy-tab-panel {
display: none;
}
.single-course-ecademy-tabs-content .single-course-ecademy-tab-panel.active {
display: block;
}
.single-course-ecademy-section {
margin-bottom: 30px;
}
.single-course-ecademy-section h3 {
font-size: 20px;
margin-bottom: 15px;
font-weight: 500;
}
.single-course-ecademy-sidebar {
display: flex;
flex-direction: column;
gap: 20px;
}
.single-course-ecademy-sidebar-card {
border: 1px solid #eee;
border-radius: 4px;
padding: 20px;
background: #fff;
}
.single-course-ecademy-sidebar-card .course-price-main {
font-size: 28px;
font-weight: 700;
margin-bottom: 15px;
}
.single-course-ecademy-enroll-btn {
display: block;
width: 100%;
text-align: center;
margin-bottom: 20px;
}
.single-course-ecademy-payment-buttons {
margin-top: 15px;
}
.single-course-ecademy-share {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 16px;
font-size: 14px;
}
.single-course-ecademy-share-label {
font-weight: 500;
color: #444;
}
.single-course-ecademy-share-icons {
display: flex;
align-items: center;
gap: 8px;
}
.single-course-ecademy-share-icons a {
width: 32px;
height: 32px;
border-radius: 50%;
background: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
color: #555;
text-decoration: none;
transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.single-course-ecademy-share-icons a:hover {
background: #df5941;
color: #fff;
transform: translateY(-1px);
}
.single-course-ecademy-course-info {
list-style: none;
padding: 0;
margin: 0;
}
.single-course-ecademy-course-info li {
display: flex;
justify-content: space-between;
padding: 6px 0;
font-size: 14px;
}
.single-course-ecademy-course-info .label {
color: #777;
}
.single-course-ecademy-course-info .value {
font-weight: 500;
}
.single-course-ecademy-instructor {
display: flex;
gap: 15px;
align-items: flex-start;
}
.single-course-ecademy-instructor .instructor-name {
font-weight: 600;
margin-bottom: 5px;
}
.single-course-ecademy-instructor .instructor-bio {
font-size: 14px;
color: #666;
}
.single-course-ecademy-related {
margin-top: 40px;
}
.single-course-ecademy-related h3 {
font-size: 20px;
margin-bottom: 20px;
}
.single-course-ecademy-related-item {
background: #fff;
border-radius: 4px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
overflow: hidden;
margin-bottom: 20px;
height: 100%;
}
.single-course-ecademy-related-thumb {
display: block;
padding-top: 56%;
background-size: cover;
background-position: center center;
}
.single-course-ecademy-related-body {
padding: 15px;
}
.single-course-ecademy-related-title {
font-size: 16px;
margin: 0 0 8px;
}
.single-course-ecademy-related-title a {
color: inherit;
text-decoration: none;
}
.single-course-ecademy-related-title a:hover {
color: #df5941;
}
.single-course-ecademy-related-price {
font-weight: 600;
color: #111;
}
.sidebar-instructor-header {
display: flex;
gap: 15px;
align-items: center;
margin-bottom: 15px;
}
.sidebar-instructor-header .name {
font-weight: 600;
}
.sidebar-instructor-header .role {
font-size: 13px;
color: #777;
}
.sidebar-instructor-body .bio {
font-size: 14px;
color: #666;
}
@media (max-width: 991px) {
.single-course-ecademy-preview-card {
margin-top: 20px;
}
.single-course-ecademy-hero-banner {
width: 100%;
margin-left: 0;
margin-right: 0;
}
} .learndash-wrapper .ld-section-heading {
display: none !important; }
.learndash-wrapper .ld-item-list-items {
border: none !important;
background: transparent !important;
box-shadow: none !important;
}
.learndash-wrapper .ld-item-list-section-heading {
background-color: #f2f4f7 !important;
color: #131f33 !important;
border-radius: 8px;
padding: 15px 20px !important;
cursor: pointer;
display: flex !important;
align-items: center;
justify-content: space-between;
margin-bottom: 10px !important;
transition: all 0.3s ease;
border: 1px solid #f2f4f7;
}
.learndash-wrapper .ld-item-list-section-heading:hover {
background-color: #df5941 !important;
color: #ffffff !important;
}
.learndash-wrapper .ld-item-list-section-heading.active {
border-radius: 8px 8px 0 0;
margin-bottom: 0 !important;
background-color: #df5941 !important;
color: #fff !important;
}
.learndash-wrapper .ld-item-list-section-heading h2,
.learndash-wrapper .ld-item-list-section-heading .ld-section-title {
color: inherit !important; font-size: 16px !important;
font-weight: 600 !important;
margin: 0 !important;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.learndash-wrapper .ld-item-list-section-heading .ld-expand-button {
color: #131f33 !important; transform: rotate(0deg);
transition: all 0.3s ease;
background: rgba(0, 0, 0, 0.05); width: 30px;
height: 30px;
display: flex !important;
align-items: center;
justify-content: center;
border-radius: 50%;
padding: 0 !important;
border: none !important;
}
.learndash-wrapper .ld-item-list-section-heading:hover .ld-expand-button,
.learndash-wrapper .ld-item-list-section-heading.active .ld-expand-button {
color: #ffffff !important; background: rgba(255, 255, 255, 0.2);
}
.learndash-wrapper .ld-item-list-section-heading .ld-expand-button .ld-icon-arrow-down {
margin: 0 !important;
padding: 0 !important;
width: auto !important;
height: auto !important;
line-height: 1 !important;
display: flex !important;
align-items: center;
justify-content: center;
}
.learndash-wrapper .ld-item-list-section-heading .ld-expand-button .ld-icon-arrow-down:before {
content: none !important;
}
.learndash-wrapper .ld-item-list-section-heading.active .ld-expand-button,
.learndash-wrapper .ld-item-list-section-heading .ld-expand-button.ld-expanded {
transform: none !important; background: rgba(255, 255, 255, 0.3);
}
.learndash-wrapper .ld-item-list-item {
display: none; border-left: 1px solid #e1e1e1;
border-right: 1px solid #e1e1e1;
border-bottom: 1px solid #e1e1e1;
padding: 15px 20px !important;
background-color: #fff;
transition: background-color 0.2s;
}
.learndash-wrapper .ld-item-list-item.section-last-item {
border-radius: 0 0 8px 8px;
margin-bottom: 10px !important; border-top: none;
}
.learndash-wrapper .ld-item-list-item:hover {
background-color: #f8f9fa;
border-left: 3px solid #c14833; padding-left: 18px !important; }
.learndash-wrapper .ld-item-list-item .ld-item-name {
color: #444;
font-weight: 500;
font-size: 14px;
display: flex;
align-items: center;
text-decoration: none !important;
}
.learndash-wrapper .ld-item-list-item .ld-item-name:hover {
color: #c14833;
}
.learndash-wrapper .ld-item-list-item .ld-status-icon {
margin-right: 10px;
opacity: 0.7;
}
.learndash-wrapper .ld-item-list-section-heading .ld-lesson-section-heading {
margin-right: 0 !important;
padding-right: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
width: 100%;
}
.learndash-wrapper .ld-item-list .ld-item-list-item .ld-item-list-item-preview {
padding: 0 !important;
}
.ld-item-video-duration {
margin-right: 5px;
color: #666;
font-size: 0.9em;
display: inline-flex;
align-items: center;
}
.ld-item-video-duration .ld-icon {
margin-right: 5px;
display: inline-flex;
align-items: center;
}
.ld-item-video-duration .ld-icon svg {
width: 14px;
height: 14px;
fill: currentColor;
}
.responsive {
position: relative;
}
.Single-ecadeny-Box {
position: sticky;
top: 100px;
margin-top: -230px;
left: 0;
width: 100%;
} .single-course-ecademy-subtitle .learndash-wrapper {
margin-bottom: 0;
}
.single-course-ecademy-subtitle .ld-progress {
margin-bottom: 0;
}
.single-course-ecademy-subtitle .ld-progress-heading {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
font-size: 14px;
font-weight: 500;
color: #444;
}
.single-course-ecademy-subtitle .ld-progress-bar {
height: 10px;
border-radius: 5px;
background-color: #eee;
overflow: hidden;
}
.single-course-ecademy-subtitle .ld-progress-bar-percentage {
height: 100%;
background-color: #df5941;
border-radius: 5px;
}
.learndash-wrapper .ld-progress .ld-progress-bar .ld-progress-bar-percentage {
background: #131f33;
height: 7px;
}
.learndash-wrapper .ld-progress .ld-progress-heading .ld-progress-stats .ld-progress-percentage {
color: #131f33;
font-weight: 600;
margin-right: 5px;
text-transform: uppercase;
}
.profilebg {
background-color: var(--secondary-color);
color: #fff;
} .user-profile-dropdown {
position: relative;
display: inline-block;
}
.user-profile-dropdown .profile-trigger {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
padding: 5px 10px;
}
.user-profile-dropdown .profile-avatar {
width: 35px;
height: 35px;
border-radius: 50%;
object-fit: cover;
}
.user-profile-dropdown .profile-name {
font-weight: 600;
font-size: 14px;
}
.user-profile-dropdown .profile-menu-content {
display: none;
position: absolute;
top: 100%;
right: 0;
background: #fff;
min-width: 200px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
border-radius: 8px;
padding: 10px 0;
z-index: 1000;
}
.user-profile-dropdown:hover .profile-menu-content {
display: block;
}
.profile-menu-list {
list-style: none;
padding: 0;
margin: 0;
}
.profile-menu-list li a {
display: flex;
padding: 8px 20px;
gap: 12px;
color: #333;
text-decoration: none;
transition: background 0.2s;
font-size: 14px;
align-items: center;
}
.profile-menu-list li a:hover {
background: #f5f5f5;
color: #df5941;
}
.user-profile-dropdown .logout-link {
border-top: 1px solid #eee;
margin-top: 5px;
padding-top: 5px;
}
.user-profile-dropdown .logout-link a {
display: block;
padding: 8px 20px;
color: #df5941;
text-decoration: none;
font-size: 14px;
}
.user-profile-dropdown .logout-link a:hover {
background: #f5f5f5;
}
.user-login-signup-links {
display: flex;
align-items: center;
gap: 10px;
font-weight: 600;
font-size: 14px;
}
.user-login-signup-links a {
color: #131f33;
text-decoration: none;
}
.user-login-signup-links a:hover {
color: #df5941;
} .content-page-login-register {
background-color: #f4edeb; padding: 60px 0;
min-height: 80vh;
} .ld-time-chart-modules {
position: relative;
padding-left: 40px; height: 250px;
}
.ld-time-chart-y {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 35px;
display: flex;
flex-direction: column;
justify-content: space-between;
font-size: 11px;
color: #999;
}
.ld-time-chart-y-labels {
height: 100%;
display: flex;
flex-direction: column-reverse;
justify-content: space-between;
}
.ld-time-chart-bars-wrapper {
display: flex;
height: 200px; position: relative;
border-bottom: 1px solid #eee;
align-items: flex-end;
}
.ld-time-chart-bars-modules {
display: flex;
align-items: flex-end;
justify-content: space-around;
flex-grow: 1;
height: 100%;
padding: 0 10px;
gap: 10px;
}
.ld-time-chart-bar-module {
flex: 1;
min-width: 20px;
max-width: 50px;
border-radius: 4px 4px 0 0;
transition: height 0.3s ease;
background-color: #df5941; position: relative;
}
.ld-time-chart-bar-module:hover {
opacity: 0.9;
}
.ld-time-chart-modules-labels {
display: flex;
justify-content: space-around;
margin-top: 10px;
padding-left: 40px; }
.ld-time-chart-modules-labels span {
font-size: 11px;
color: #666;
text-align: center;
width: 50px; white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} .ld-dashboard-main {
width: 100%;
max-width: 100%;
}
.ld-dashboard-main.flex-grow-1 {
min-width: 0;
}
.ld-time-spent-section .ld-time-scroll .table-responsive {
overflow-x: auto;
}
.ld-time-spent-section .ld-time-chart-modules {
max-width: 100%;
overflow-x: hidden;
}
.ld-time-spent-section .ld-time-chart-bars-wrapper {
overflow-x: auto;
overflow-y: hidden;
}
.ld-time-spent-section .ld-time-chart-bars-modules {
flex-wrap: nowrap;
min-width: 0;
}
.ld-time-spent-section .ld-time-chart-modules-labels {
overflow-x: auto;
white-space: nowrap;
justify-content: flex-start;
gap: 10px;
}
.ld-time-spent-section .ld-time-chart-modules-labels span {
flex: 0 0 50px;
}
@media (max-width: 992px) {
.ld-time-spent-section .ld-time-chart-card,
.ld-time-spent-section .ld-time-list {
margin-bottom: 1rem;
}
.ld-time-spent-section .ld-time-chart-modules {
height: auto;
}
.ld-time-spent-section .ld-time-chart-bars-wrapper {
height: 180px;
}
}
.ld-time-spent-section .bg-white.shadow-sm.rounded-3.p-4>.row {
align-items: flex-start;
}
.ld-time-spent-section .col-lg-7 {
display: flex;
flex-direction: column;
min-width: 0;
}
.ld-time-spent-section .ld-time-meta-card {
flex: 0 0 auto;
}
.ld-time-spent-section .ld-time-list {
flex: 1 1 auto;
width: 100%;
margin-top: 1rem;
}
.ld-time-spent-section .ld-time-list .table {
width: 100%;
table-layout: auto;
}
.upskill-login-register-wrapper {
max-width: 1200px; width: 95%;
margin: 0 auto;
background: #ffffff;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
overflow: hidden;
display: flex;
flex-direction: row;
min-height: 600px;
} .auth-left-column {
flex: 1;
background: linear-gradient(135deg, #df5941 0%, #c14833 100%);
background-size: 200% 200%;
animation: gradientAnimation 15s ease infinite;
color: #fff;
padding: 40px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.login-lost-password {
text-align: center;
}
@keyframes gradientAnimation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
} .auth-left-column::before {
content: '';
position: absolute;
top: -50px;
left: -50px;
width: 200px;
height: 200px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
animation: floatShape1 8s ease-in-out infinite;
}
.auth-left-column::after {
content: '';
position: absolute;
bottom: -50px;
right: -50px;
width: 300px;
height: 300px;
background: rgba(255, 255, 255, 0.05);
border-radius: 50%;
animation: floatShape2 10s ease-in-out infinite;
}
@keyframes floatShape1 {
0% {
transform: translate(0, 0);
}
50% {
transform: translate(20px, 30px);
}
100% {
transform: translate(0, 0);
}
}
@keyframes floatShape2 {
0% {
transform: translate(0, 0);
}
50% {
transform: translate(-30px, -20px);
}
100% {
transform: translate(0, 0);
}
}
.auth-welcome-content {
position: relative;
z-index: 2;
text-align: center;
}
.auth-welcome-content h3 {
font-size: 32px;
margin-bottom: 20px;
font-weight: 700;
color: #fff;
animation: fadeInUp 0.8s ease-out forwards;
}
.auth-welcome-content p {
font-size: 16px;
line-height: 1.6;
opacity: 0.9;
margin-bottom: 30px;
animation: fadeInUp 0.8s ease-out 0.2s forwards;
opacity: 0; animation-fill-mode: forwards;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 0.9;
transform: translateY(0);
}
}
.auth-decoration-circle {
width: 80px;
height: 80px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
margin: 0 auto;
position: relative;
animation: pulseCircle 3s infinite;
}
.auth-decoration-circle::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
background: #fff;
border-radius: 50%;
} .user-header-elements-wrapper {
display: flex;
align-items: center;
gap: 20px;
}
.user-header-notifications {
display: flex;
align-items: center;
gap: 15px;
}
.header-notification-item {
position: relative;
color: #131f33;
font-size: 20px;
text-decoration: none;
transition: color 0.2s;
display: flex;
align-items: center;
justify-content: center;
}
.header-notification-item:hover {
color: #df5941;
}
.header-notification-item .notification-count {
position: absolute;
top: -8px;
right: -10px;
background: #df5941;
color: #fff;
font-size: 10px;
font-weight: 700;
min-width: 18px;
height: 18px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
padding: 0 4px;
border: 2px solid #fff;
line-height: 1;
}
.messages-icon i {
font-size: 22px;
}
.notifications-icon i {
font-size: 20px;
}
@media (max-width: 767px) {
.user-header-elements-wrapper {
gap: 10px;
}
.user-header-notifications {
gap: 24px;
}
.header-notification-item {
font-size: 18px;
}
.profile-name {
display: none;
}
}
@keyframes pulseCircle {
0% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2);
}
70% {
transform: scale(1.05);
box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
}
100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
}
} .auth-right-column {
flex: 1;
display: flex;
flex-direction: column;
background: #fff;
}
.auth-tabs {
background: #ffffff;
border-bottom: 1px solid #f0f0f0;
padding: 0;
display: flex;
list-style: none;
margin: 0;
}
.auth-tabs li {
flex: 1;
text-align: center;
padding: 20px;
color: #888;
font-weight: 500;
transition: all 0.3s ease;
border-bottom: 2px solid transparent;
cursor: pointer;
font-size: 16px;
}
.auth-tabs li:hover {
color: #555;
background: #fcfcfc;
}
.auth-tabs li.active {
color: #df5941;
background: #ffffff;
border-bottom: 2px solid #df5941;
font-weight: 600;
}
.auth-content {
padding: 40px;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
} @media (max-width: 768px) {
.upskill-login-register-wrapper {
flex-direction: column;
max-width: 480px;
}
.auth-left-column {
padding: 30px;
min-height: 200px;
}
.auth-right-column {
min-height: auto;
}
}
.auth-pane {
display: none;
}
.auth-pane.active {
display: block;
}
.upskill-login-register-wrapper form p {
margin-bottom: 20px;
}
.upskill-login-register-wrapper label {
color: #666;
font-size: 14px;
margin-bottom: 8px;
font-weight: 500;
display: block;
}
.upskill-login-register-wrapper input[type="text"],
.upskill-login-register-wrapper input[type="email"],
.upskill-login-register-wrapper input[type="tel"],
.upskill-login-register-wrapper input[type="password"] {
width: 100%;
background: #f9f9f9;
border: 1px solid #eee;
border-radius: 12px;
padding: 14px;
font-size: 15px;
transition: all 0.3s ease;
outline: none;
box-sizing: border-box;
}
.upskill-login-register-wrapper input[type="text"]:focus,
.upskill-login-register-wrapper input[type="email"]:focus,
.upskill-login-register-wrapper input[type="tel"]:focus,
.upskill-login-register-wrapper input[type="password"]:focus {
background: #fff;
border-color: #f0cbb5; box-shadow: 0 0 0 4px rgba(223, 89, 65, 0.1);
}
.upskill-login-register-wrapper input[type="submit"] {
background: linear-gradient(135deg, #df5941 0%, #c14833 100%);
color: #fff;
padding: 15px;
border-radius: 12px;
font-size: 16px;
font-weight: 600;
letter-spacing: 0.5px;
margin-top: 10px;
box-shadow: 0 4px 15px rgba(223, 89, 65, 0.2);
transition: transform 0.2s, box-shadow 0.2s;
border: none;
cursor: pointer;
width: 100%;
}
.password-input-group {
position: relative;
display: flex;
align-items: center;
}
.password-input-group input {
width: 100%;
padding-right: 40px !important; }
.password-toggle-icon {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
color: #888;
z-index: 10;
}
.password-toggle-icon:hover {
color: #df5941;
}
.upskill-login-register-wrapper input[type="submit"]:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(223, 89, 65, 0.3);
background: linear-gradient(135deg, #ff6b53 0%, #df5941 100%);
} .upskill-error-message {
color: #dc3232 !important;
margin-bottom: 20px;
padding: 12px 15px;
border: 1px solid #dc3232;
border-radius: 4px;
background: #fff5f5;
display: block;
}
.upskill-error-message p {
margin: 0;
font-weight: 500;
font-size: 14px;
}
.login-error {
color: #dc3232;
margin-bottom: 20px;
padding: 10px;
border: 1px solid #dc3232;
border-radius: 4px;
background: #fff5f5;
display: block;
font-weight: 500;
font-size: 14px;
} .login-remember {
margin-top: 15px;
font-size: 14px;
color: #777;
}
.login-submit {
margin-top: 20px;
}
.upskill-login-register-wrapper input[type="text"],
.upskill-login-register-wrapper input[type="email"],
.upskill-login-register-wrapper input[type="tel"],
.upskill-login-register-wrapper input[type="password"] {
width: 100%;
background: #f9f9f9;
border: 1px solid #eee;
border-radius: 12px;
padding: 8px;
font-size: 15px;
transition: all 0.3s ease;
outline: none;
box-sizing: border-box;
} .course-completion-page {
font-family: var(--upskill-main-font);
background-color: var(--site-bg-color);
} .completion-hero {
background: linear-gradient(135deg, #df5941 0%, #c14833 100%);
background-size: 200% 200%;
animation: gradientAnimation 15s ease infinite;
color: #fff;
padding: 80px 0;
position: relative;
overflow: hidden;
}
.completion-hero-inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
text-align: center;
position: relative;
z-index: 2;
} .confetti-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: hidden;
z-index: 1;
}
.confetti-piece {
position: absolute;
top: -10px;
opacity: 0;
animation: confettiFall 5s ease-in infinite;
border-radius: 50%;
}
@keyframes confettiFall {
0% {
transform: translateY(-100vh) rotate(0deg);
opacity: 1;
}
100% {
transform: translateY(100vh) rotate(360deg);
opacity: 0;
}
} .completion-badge-wrapper {
margin-bottom: 30px;
animation: bounceIn 1s ease-out forwards;
}
.completion-badge {
display: inline-block;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 50%;
padding: 30px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
border: 2px solid rgba(255, 255, 255, 0.2);
transform: scale(0.8);
animation: scaleIn 0.5s ease-out 0.3s forwards;
}
.badge-icon {
font-size: 60px;
margin-bottom: 15px;
color: #ffd700;
animation: pulse 2s infinite;
}
.badge-text h3 {
margin: 0 0 5px 0;
font-size: 24px;
font-weight: 700;
color: #fff;
}
.badge-text p {
margin: 0;
font-size: 16px;
opacity: 0.9;
} .course-info {
margin-bottom: 40px;
animation: fadeInUp 0.8s ease-out 0.5s forwards;
opacity: 0;
}
.course-thumbnail {
margin-bottom: 20px;
animation: fadeIn 0.8s ease-out 0.7s forwards;
opacity: 0;
}
.course-thumbnail img {
max-width: 200px;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
border: 3px solid #fff;
}
.course-title {
font-size: 36px;
margin: 0;
font-weight: 700;
color: #fff;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
} .user-info {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 50px;
padding: 20px 40px;
margin: 0 auto;
max-width: 600px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
animation: slideIn 0.8s ease-out 0.9s forwards;
opacity: 0;
transform: translateY(20px);
}
.user-avatar .avatar-img {
width: 80px;
height: 80px;
border-radius: 50%;
border: 3px solid #fff;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.user-details h2 {
margin: 0 0 5px 0;
font-size: 24px;
font-weight: 600;
color: #fff;
}
.completion-date {
margin: 0;
font-size: 14px;
opacity: 0.8;
} .completion-stats {
padding: 60px 0;
background: #fff;
}
.stats-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
}
.stat-card {
background: #f8f9fa;
border-radius: 20px;
padding: 40px 20px;
text-align: center;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
animation: fadeInUp 0.6s ease-out forwards;
opacity: 0;
}
.stat-card:nth-child(1) {
animation-delay: 0.1s;
}
.stat-card:nth-child(2) {
animation-delay: 0.2s;
}
.stat-card:nth-child(3) {
animation-delay: 0.3s;
}
.stat-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
background: linear-gradient(135deg, #f4edeb 0%, #fae9e6 100%);
}
.stat-icon {
font-size: 40px;
color: #df5941;
margin-bottom: 20px;
animation: bounce 1s ease-out forwards;
}
.stat-content .stat-number {
font-size: 48px;
font-weight: 700;
color: #131f33;
margin-bottom: 10px;
font-family: var(--upskill-heading-font);
}
.stat-content .stat-label {
font-size: 16px;
color: #666;
font-weight: 500;
} .next-steps {
padding: 80px 0;
background: var(--site-bg-color);
}
.next-steps .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.section-title {
text-align: center;
font-size: 32px;
font-weight: 700;
color: #131f33;
margin-bottom: 60px;
font-family: var(--upskill-heading-font);
}
.steps-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
}
.step-card {
background: #fff;
border-radius: 20px;
padding: 40px 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
animation: fadeInUp 0.6s ease-out forwards;
opacity: 0;
border: 1px solid #f0f0f0;
}
.step-card:nth-child(1) {
animation-delay: 0.1s;
}
.step-card:nth-child(2) {
animation-delay: 0.2s;
}
.step-card:nth-child(3) {
animation-delay: 0.3s;
}
.step-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
border-color: #df5941;
}
.step-icon {
font-size: 40px;
color: #df5941;
margin-bottom: 20px;
width: 80px;
height: 80px;
background: #fae9e6;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.step-card:hover .step-icon {
background: #df5941;
color: #fff;
transform: scale(1.1);
}
.step-content h3 {
font-size: 20px;
font-weight: 600;
color: #131f33;
margin-bottom: 15px;
font-family: var(--upskill-heading-font);
}
.step-content p {
color: #666;
line-height: 1.6;
margin-bottom: 25px;
font-size: 14px;
}
.step-button {
display: inline-block;
background: #df5941;
color: #fff;
padding: 12px 24px;
border-radius: 30px;
text-decoration: none;
font-weight: 600;
font-size: 14px;
transition: all 0.3s ease;
border: 2px solid #df5941;
}
.step-button:hover {
background: transparent;
color: #df5941;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(223, 89, 65, 0.3);
} .social-share {
display: flex;
gap: 10px;
}
.social-btn {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
text-decoration: none;
font-size: 16px;
transition: all 0.3s ease;
}
.social-btn.facebook {
background: #1877f2;
}
.social-btn.twitter {
background: #1da1f2;
}
.social-btn.linkedin {
background: #0077b5;
}
.social-btn.instagram {
background: #e4405f;
}
.social-btn:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
} .completion-testimonial {
padding: 60px 0;
background: #fff;
}
.completion-testimonial .container {
max-width: 800px;
margin: 0 auto;
padding: 0 20px;
}
.testimonial-card {
background: linear-gradient(135deg, #f4edeb 0%, #fae9e6 100%);
border-radius: 20px;
padding: 50px 40px;
text-align: center;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
animation: fadeIn 0.8s ease-out forwards;
opacity: 0;
}
.testimonial-icon {
font-size: 40px;
color: #df5941;
margin-bottom: 20px;
opacity: 0.5;
}
.testimonial-text {
font-size: 18px;
line-height: 1.8;
color: #131f33;
margin-bottom: 30px;
font-style: italic;
font-weight: 500;
}
.testimonial-author {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
}
.author-avatar .avatar-img {
width: 60px;
height: 60px;
border-radius: 50%;
border: 3px solid #fff;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.author-info h4 {
margin: 0 0 5px 0;
font-size: 16px;
font-weight: 600;
color: #131f33;
}
.author-info p {
margin: 0;
font-size: 14px;
color: #666;
} @keyframes gradientAnimation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@keyframes bounceIn {
0% {
opacity: 0;
transform: scale(0.3);
}
50% {
opacity: 1;
transform: scale(1.05);
}
70% {
transform: scale(0.9);
}
100% {
transform: scale(1);
}
}
@keyframes scaleIn {
from {
transform: scale(0.8);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes bounce {
0%,
20%,
50%,
80%,
100% {
transform: translateY(0);
}
40% {
transform: translateY(-20px);
}
60% {
transform: translateY(-10px);
}
} @media (max-width: 768px) {
.completion-hero {
padding: 60px 0;
}
.course-title {
font-size: 28px;
}
.user-info {
flex-direction: column;
padding: 20px;
border-radius: 20px;
}
.stats-container {
grid-template-columns: 1fr;
gap: 20px;
}
.steps-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.testimonial-card {
padding: 30px 20px;
}
.testimonial-text {
font-size: 16px;
}
} .upskill-course-completion-wrapper {
margin-bottom: 25px;
}
.upskill-certificate-banner {
background-color: #eef0ff;
border: 1px solid #c7c9d9;
border-radius: 8px;
padding: 15px 20px;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.upskill-certificate-content {
display: flex;
align-items: center;
gap: 15px;
}
.upskill-check-icon {
background-color: #dbeafe;
color: #131836;
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
}
.upskill-certificate-text {
font-size: 16px;
color: #1e293b;
font-weight: 500;
}
.upskill-download-cert-btn {
background-color: #d15d49 !important;
border-color: #d15d49 !important;
color: #fff !important;
font-size: 14px;
padding: 8px 20px;
border-radius: 6px;
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 600;
}
.upskill-download-cert-btn:hover {
background-color: #131836 !important;
border-color: #131836 !important;
}
.upskill-course-complete-meta {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 5px;
}
.upskill-complete-status {
display: flex;
align-items: center;
gap: 10px;
}
.upskill-check-circle {
background-color: #131836;
color: #fff;
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
}
.upskill-complete-label {
font-weight: 700;
color: #334155;
text-transform: uppercase;
font-size: 14px;
letter-spacing: 0.5px;
}
.upskill-last-activity {
color: #64748b;
font-size: 14px;
}
@media (max-width: 768px) {
.upskill-certificate-banner {
flex-direction: column;
align-items: flex-start;
gap: 15px;
}
.upskill-download-cert-btn {
width: 100%;
justify-content: center;
}
.upskill-course-complete-meta {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
} .page-template-page-all-courses {
background-color: #f8f9fa; }
.page-template-page-all-courses .course-card-modern {
background: #ffffff;
border: none;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
position: relative;
overflow: hidden;
}
.page-template-page-all-courses .course-card-modern:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
} .page-template-page-all-courses .course-thumbnail-wrapper {
height: 220px;
position: relative;
overflow: hidden;
border-radius: 16px 16px 0 0; }
.page-template-page-all-courses .course-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.page-template-page-all-courses .course-card-modern:hover .course-img {
transform: scale(1.08);
} .page-template-page-all-courses .course-badges .badge {
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.5px;
backdrop-filter: blur(4px);
} .page-template-page-all-courses .course-content {
padding: 24px;
z-index: 2; position: relative;
background: #fff;
}
.page-template-page-all-courses .course-title {
font-family: var(--upskill-heading-font, "Chillax", sans-serif);
font-size: 1.25rem;
line-height: 1.4;
margin-bottom: 0.75rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.page-template-page-all-courses .course-title a {
color: #131f33; transition: color 0.3s ease;
}
.page-template-page-all-courses .course-card-modern:hover .course-title a {
color: var(--primary-color, #df5941);
}
.page-template-page-all-courses .course-excerpt {
font-size: 0.95rem;
line-height: 1.6;
color: #6c757d;
} .page-template-page-all-courses .course-meta-modern {
margin-top: auto; padding-top: 1rem;
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.page-template-page-all-courses .meta-item {
font-size: 0.85rem;
font-weight: 500;
color: #889099;
}
.page-template-page-all-courses .course-price {
color: var(--primary-color, #df5941);
font-family: var(--upskill-heading-font, "Chillax", sans-serif);
}
.page-template-page-all-courses .course-card-modern .stretched-link {
z-index: 1 !important;
pointer-events: auto;
}
.page-template-page-all-courses .course-footer-action,
.page-template-page-all-courses .course-footer-action a {
z-index: 10 !important;
} .page-template-page-all-courses .course-footer-action {
background-color: var(--primary-color, #df5941);
z-index: 10 !important;
pointer-events: all;
display: flex;
justify-content: center;
padding: 0 !important;
position: relative;
}
.page-template-page-all-courses .course-card-modern:hover .course-footer-action {
opacity: 1 !important;
transform: translateY(0) !important;
pointer-events: auto !important;
}
.page-template-page-all-courses .course-footer-action a {
pointer-events: auto !important;
position: relative;
z-index: 11;
}
.ViewBtn{
width: 100% !important;
background: #d15d49 !important;
color: #fff !important;
border: none !important;
transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
position: relative !important;
z-index: 12 !important;
pointer-events: auto !important;
display: inline-block !important;
}
.ViewBtn:hover {
background: #b74132 !important;
color: #ffffff !important;
transform: translateY(-2px) !important;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2) !important;
}
.BuyBtn{
width: 100% !important;
background: #131f34 !important;
color: #fff !important;
border: none !important;
transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
position: relative !important;
z-index: 12 !important;
pointer-events: auto !important;
display: inline-block !important;
}
.BuyBtn:hover {
background: #0f172c !important;
color: #ffffff !important;
transform: translateY(-2px) !important;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2) !important;
} .page-template-page-all-courses .pagination {
margin-top: 4rem;
justify-content: center;
}
.page-template-page-all-courses .page-numbers {
border: none;
background: #fff;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
margin: 0 5px;
border-radius: 50%;
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
color: #131f33;
transition: all 0.3s ease;
}
.page-template-page-all-courses .page-numbers:hover,
.page-template-page-all-courses .page-numbers.current {
background: var(--primary-color, #df5941);
color: #fff;
transform: translateY(-3px);
} .courses-toolbar {
background: #fff;
padding: 20px;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
border: 1px solid rgba(0, 0, 0, 0.02);
} .courses-toolbar .search-form .input-group {
border: 1px solid #eee;
border-radius: 50px; overflow: hidden;
padding: 4px;
transition: all 0.3s ease;
background: #fff;
}
.courses-toolbar .search-form .input-group:focus-within {
border-color: var(--primary-color);
box-shadow: 0 0 0 4px rgba(223, 89, 65, 0.1);
}
.courses-toolbar .search-form .input-group-text {
background: transparent;
border: none;
padding-left: 20px;
color: #999;
}
.courses-toolbar .search-form input[type="search"] {
border: none;
box-shadow: none;
padding: 10px 15px;
font-size: 15px;
}
.courses-toolbar .search-form input[type="search"]:focus {
background: transparent;
box-shadow: none;
}
.courses-toolbar .search-form .btn-primary {
border-radius: 50px;
padding: 10px 30px;
font-weight: 600;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 1px;
background: var(--primary-color);
color: #fff;
border: none;
transition: all 0.3s ease;
margin: 2px; }
.courses-toolbar .search-form .btn-primary:hover {
background: var(--secondary-color);
transform: translateY(-1px);
} .courses-toolbar .sort-form .input-group {
border: 1px solid #eee;
border-radius: 8px;
padding: 0;
overflow: hidden;
background: #f9f9f9;
align-items: center;
}
.courses-toolbar .sort-form .input-group-text {
background: transparent;
border: none;
padding-left: 20px;
padding-right: 5px;
color: #999;
}
.courses-toolbar .sort-form select {
border: none;
box-shadow: none;
background-color: transparent;
padding: 12px 20px 12px 5px;
font-size: 14px;
color: #555;
cursor: pointer;
min-width: 160px;
}
.courses-toolbar .sort-form select:focus {
box-shadow: none;
background-color: transparent;
}
.blog-toolbar {
background: none !important;
box-shadow: none !important;
margin-bottom: 0 !important;
} .view-toggle .btn {
border: 1px solid #eee;
background: #fff;
color: #999;
padding: 10px 15px;
font-size: 16px;
transition: all 0.3s ease;
box-shadow: none;
}
.view-toggle .btn:first-child {
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
border-right: none;
}
.view-toggle .btn:last-child {
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
}
.view-toggle .btn:hover {
background: #f9f9f9;
color: var(--primary-color);
}
.view-toggle .btn.active {
background: var(--primary-color);
color: #fff;
border-color: var(--primary-color);
}
.layout-blog-grid .blog-card-modern {
background: #ffffff;
border-radius: 16px;
box-shadow: 0 15px 35px rgba(15, 23, 42, 0.06);
overflow: hidden;
border: 1px solid rgba(148, 163, 184, 0.2);
}
.layout-blog-grid .blog-thumbnail-wrapper {
position: relative;
overflow: hidden;
}
.layout-blog-grid .blog-img {
width: 100%;
height: 220px;
object-fit: cover;
transition: transform 0.3s ease;
}
.layout-blog-grid .blog-card-modern:hover .blog-img {
transform: scale(1.05);
}
.layout-blog-grid .blog-card-body {
padding: 20px 20px 18px;
}
.layout-blog-grid .blog-card-meta {
font-size: 13px;
color: #6b7280;
}
.layout-blog-grid .blog-card-title a {
color: #0f172a;
text-decoration: none;
}
.layout-blog-grid .blog-card-title a:hover {
color: var(--primary-color);
}
.layout-blog-grid .blog-card-excerpt {
font-size: 14px;
color: #4b5563;
}
.layout-blog-grid .blog-read-more {
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--primary-color);
text-decoration: none;
}
.layout-blog-grid .blog-read-more i {
font-size: 12px;
} @media (max-width: 767px) {
.courses-toolbar {
display: block !important;
padding: 20px;
}
.courses-toolbar .search-form {
margin-right: 0 !important;
margin-bottom: 20px !important;
width: 100%;
}
.courses-toolbar .courses-tools {
justify-content: space-between;
width: 100%;
}
.courses-toolbar .sort-form select {
min-width: auto;
}
} .learndash-wrapper .ld-item-list .ld-item-list-item .ld-item-list-item-preview {
display: flex;
align-items: center;
width: 100%;
}
.learndash-wrapper .ld-item-list .ld-item-list-item .ld-tooltip {
flex-grow: 1;
margin-right: 15px;
}
.learndash-wrapper .ld-item-list .ld-item-list-item .ld-item-details {
display: flex;
align-items: center;
flex-shrink: 0;
}
.learndash-wrapper .ld-item-list .ld-item-list-item .ld-status-icon-wrapper {
display: flex;
align-items: center;
}
.learndash-wrapper .ld-item-list .ld-item-list-item .ld-status-icon-wrapper .ld-status-icon {
margin: 0;
} .ld-lesson-list-thumbnail {
display: flex;
align-items: center;
}
.ld-lesson-list-thumbnail img {
width: 100% !important;
height: 100% !important;
max-height: 80px;
object-fit: contain;
border-radius: 4px;
}
.learndash-wrapper .ld-status {
margin-bottom: 0;
}
.ld-item-components {
display: flex !important;
align-items: center;
align-content: center;
gap: 10px;
}
.layout-learndash-dashboard {
background-color: #f5f6fa;
}
.layout-learndash-dashboard .layout-learndash-dashboard {
padding-top: 0;
padding-bottom: 40px;
}
.layout-learndash-dashboard .ld-dashboard-layout {
gap: 24px;
padding: 20px;
}
.layout-learndash-dashboard .ld-dashboard-sidebar {
width: 100%;
background-color: #ffffff;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
padding: 24px 18px;
}
.layout-learndash-dashboard .ld-sidebar-logo {
font-weight: 700;
font-size: 16px;
letter-spacing: 1px;
text-transform: uppercase;
color: #222;
}
.layout-learndash-dashboard .ld-sidebar-nav {
display: flex;
flex-direction: column;
gap: 6px;
}
.layout-learndash-dashboard .ld-sidebar-link {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 10px;
color: #6b7280;
text-decoration: none;
font-size: 14px;
transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.layout-learndash-dashboard .ld-sidebar-link i {
width: 18px;
text-align: center;
}
.layout-learndash-dashboard .ld-sidebar-section-label {
margin-top: 18px;
margin-bottom: 4px;
padding: 0 4px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #9ca3af;
}
.layout-learndash-dashboard .ld-sidebar-link.active,
.layout-learndash-dashboard .ld-sidebar-link:hover {
background-color: rgba(223, 89, 65, 0.08);
color: #df5941;
transform: translateX(2px);
}
.layout-learndash-dashboard .ld-dashboard-topbar {
border-radius: 16px;
}
.layout-learndash-dashboard .ld-topbar-logo {
font-weight: 700;
font-size: 18px;
letter-spacing: 1px;
text-transform: uppercase;
color: #1f2933;
}
.layout-learndash-dashboard .ld-topbar-nav {
list-style: none;
display: flex;
gap: 20px;
margin: 0;
padding: 0;
}
.layout-learndash-dashboard .ld-topbar-nav a {
font-size: 14px;
color: #6b7280;
text-decoration: none;
padding-bottom: 3px;
border-bottom: 2px solid transparent;
}
.layout-learndash-dashboard .ld-topbar-nav a.active,
.layout-learndash-dashboard .ld-topbar-nav a:hover {
color: #111827;
border-color: var(--primary-color);
}
.layout-learndash-dashboard .ld-icon-btn {
border: none;
background: transparent;
color: #6b7280;
font-size: 16px;
}
.layout-learndash-dashboard .ld-topbar-avatar img {
width: 32px;
height: 32px;
border-radius: 999px;
object-fit: cover;
}
.layout-learndash-dashboard .ld-dashboard-header-card {
border-radius: 16px;
border: 1px solid #f3f4f6;
}
.layout-learndash-dashboard .ld-header-avatar img {
width: 64px;
height: 64px;
border-radius: 999px;
object-fit: cover;
}
.layout-learndash-dashboard .ld-avatar-placeholder {
width: 64px;
height: 64px;
border-radius: 999px;
background: rgba(223, 89, 65, 0.12);
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 24px;
color: #df5941;
}
.layout-learndash-dashboard .ld-dashboard-submeta {
display: flex;
flex-wrap: wrap;
gap: 10px;
font-size: 13px;
}
.layout-learndash-dashboard .ld-dashboard-submeta span::after {
content: "•";
margin-left: 8px;
color: #d1d5db;
}
.layout-learndash-dashboard .ld-dashboard-submeta span:last-child::after {
content: "";
}
.layout-learndash-dashboard .ld-dashboard-status-row {
gap: 16px;
}
.layout-learndash-dashboard .ld-status-card {
min-width: 0;
background-color: #ffffff;
border-radius: 14px;
padding: 18px 16px 20px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.04);
flex: 1 1 0;
text-align: center;
border: 1px solid #f5e4dd;
}
.layout-learndash-dashboard .ld-status-label {
font-size: 13px;
color: #6b7280;
margin-top: 6px;
}
.layout-learndash-dashboard .ld-status-value {
font-size: 20px;
font-weight: 700;
color: #111827;
}
.layout-learndash-dashboard .ld-status-icon {
width: 46px;
height: 46px;
border-radius: 999px;
margin: 0 auto 8px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(223, 89, 65, 0.08);
color: #df5941;
font-size: 18px;
}
.layout-learndash-dashboard .ld-status-in-progress {
border-top: 3px solid #fbbf24;
}
.layout-learndash-dashboard .ld-status-completed {
border-top: 3px solid #34d399;
}
.layout-learndash-dashboard .ld-status-pending {
border-top: 3px solid #9ca3af;
}
.layout-learndash-dashboard .ld-status-enrolled {
border-top: 3px solid #fb923c;
}
.layout-learndash-dashboard .ld-status-students {
border-top: 3px solid #60a5fa;
}
.layout-learndash-dashboard .ld-status-total-courses {
border-top: 3px solid #a855f7;
}
.layout-learndash-dashboard .ld-status-earnings {
border-top: 3px solid #f97316;
display: none;
}
.layout-learndash-dashboard .ld-earnings-section {
position: relative;
}
.layout-learndash-dashboard .ld-earnings-section .bg-white {
border-radius: 18px;
border: 1px solid #f3e3dc;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.06);
}
.layout-learndash-dashboard .ld-earnings-tabs {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 4px;
border-radius: 999px;
background: #f3f4f6;
border: 1px solid #e5e7eb;
}
.layout-learndash-dashboard .ld-earnings-tab {
border-radius: 999px;
border: none;
padding: 6px 16px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
background: transparent;
color: #6b7280;
transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.layout-learndash-dashboard .ld-earnings-tab.active {
background: linear-gradient(135deg, #df5941, #f97316);
color: #ffffff;
box-shadow: 0 8px 18px rgba(239, 68, 68, 0.28);
transform: translateY(-1px);
}
.layout-learndash-dashboard .ld-earnings-tab:not(.active):hover {
background: rgba(255, 255, 255, 0.9);
color: #374151;
}
.layout-learndash-dashboard .ld-earnings-tab[data-earnings-range="year"]::before,
.layout-learndash-dashboard .ld-earnings-tab[data-earnings-range="last_month"]::before,
.layout-learndash-dashboard .ld-earnings-tab[data-earnings-range="this_month"]::before,
.layout-learndash-dashboard .ld-earnings-tab[data-earnings-range="last_7_days"]::before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
border-radius: 999px;
margin-right: 6px;
background: #d1d5db;
}
.layout-learndash-dashboard .ld-earnings-tab[data-earnings-range="year"]::before {
background: #f97316;
}
.layout-learndash-dashboard .ld-earnings-tab[data-earnings-range="last_month"]::before {
background: #3b82f6;
}
.layout-learndash-dashboard .ld-earnings-tab[data-earnings-range="this_month"]::before {
background: #10b981;
}
.layout-learndash-dashboard .ld-earnings-tab[data-earnings-range="last_7_days"]::before {
background: #6366f1;
} .blog-categories-filter {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
.blog-categories-filter .blog-cat-chip.btn {
border-radius: 8px !important;
border: 1px solid #f0cbb5;
background: #fae9e6;
color: #131f33;
padding: 6px;
width: 100%;
text-align: center;
}
.blog-categories-filter .blog-cat-chip.btn:hover {
filter: brightness(0.98);
}
.blog-categories-filter .blog-cat-chip.btn.btn-primary {
background-color: var(--primary-color);
border-color: var(--primary-color);
color: #fff;
}
@media (max-width: 991.98px) {
.blog-categories-filter {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 767.98px) {
.blog-categories-filter {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 575.98px) {
.blog-categories-filter {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
} #blog-grid-container {
transition: opacity 0.3s ease;
position: relative;
min-height: 200px;
}
#blog-grid-container.updating {
opacity: 0.5;
pointer-events: none;
}
#blog-grid-container.updating::after {
content: "";
position: absolute;
top: 100px;
left: 50%;
width: 40px;
height: 40px;
margin: -20px 0 0 -20px;
border: 3px solid rgba(223, 89, 65, 0.1);
border-top-color: #df5941;
border-radius: 50%;
animation: blog-spin 0.8s linear infinite;
z-index: 10;
}
@keyframes blog-spin {
to {
transform: rotate(360deg);
}
}
.layout-learndash-dashboard .ld-earnings-table {
margin: 0;
font-size: 13px;
}
.layout-learndash-dashboard .ld-earnings-table thead th {
border-bottom: none;
color: #9ca3af;
font-weight: 500;
}
.layout-learndash-dashboard .ld-earnings-table tbody tr td {
border-top: none;
padding-top: 9px;
padding-bottom: 9px;
}
.layout-learndash-dashboard .ld-earnings-table tbody tr:nth-child(odd) {
background-color: #f9fafb;
}
.layout-learndash-dashboard .ld-earnings-table tbody tr:nth-child(even) {
background-color: #ffffff;
}
.layout-learndash-dashboard .ld-earnings-table tbody tr:first-child td {
border-radius: 12px 12px 0 0;
}
.layout-learndash-dashboard .ld-earnings-table tbody tr:last-child td {
border-radius: 0 0 12px 12px;
}
.layout-learndash-dashboard .ld-earnings-chart-card {
padding-left: 24px;
}
.layout-learndash-dashboard .ld-earnings-chart-label {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 999px;
background: rgba(55, 65, 81, 0.06);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #4b5563;
}
.layout-learndash-dashboard .ld-earnings-chart {
position: relative;
margin-top: 10px;
padding: 16px 14px 10px;
border-radius: 14px;
background: #f9fafb;
border: 1px dashed #e5e7eb;
}
.layout-learndash-dashboard .ld-earnings-chart-bars {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
align-items: flex-end;
gap: 8px;
height: 150px;
}
.layout-learndash-dashboard .ld-earnings-chart-bar {
width: 100%;
border-radius: 8px 8px 0 0;
background: linear-gradient(180deg, #4b5563, #9ca3af);
position: relative;
overflow: hidden;
}
.layout-learndash-dashboard .ld-earnings-chart-bar::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(255, 255, 255, 0.35), transparent 40%);
}
.layout-learndash-dashboard .ld-earnings-chart-months {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
gap: 8px;
margin-top: 8px;
font-size: 10px;
color: #9ca3af;
text-align: center;
}
.layout-learndash-dashboard .ld-time-summary-main {
display: flex;
align-items: baseline;
gap: 8px;
justify-content: flex-end;
}
.layout-learndash-dashboard .ld-time-summary-label {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #6b7280;
}
.layout-learndash-dashboard .ld-time-summary-value {
font-size: 22px;
line-height: 1.2;
font-weight: 700;
color: var(--primary-color, #df5941);
}
.layout-learndash-dashboard .ld-time-summary-meta {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: flex-end;
}
.layout-learndash-dashboard .ld-time-meta-card {
border-radius: 18px;
border: 1px solid #e5e7eb;
padding: 16px 18px;
background: #ffffff;
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
}
.layout-learndash-dashboard .ld-time-meta-main {
display: flex;
flex-direction: column;
gap: 2px;
margin-bottom: 10px;
}
.layout-learndash-dashboard .ld-time-meta-main-value {
font-size: 22px;
line-height: 1.2;
font-weight: 700;
color: #111827;
}
.layout-learndash-dashboard .ld-time-meta-main-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #6b7280;
}
.layout-learndash-dashboard .ld-time-meta-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px 20px;
}
.layout-learndash-dashboard .ld-time-meta-item {
display: flex;
flex-direction: column;
gap: 2px;
}
.layout-learndash-dashboard .ld-time-meta-label {
font-size: 11px;
color: #9ca3af;
}
.layout-learndash-dashboard .ld-time-meta-value {
font-size: 13px;
font-weight: 600;
color: #111827;
}
.layout-learndash-dashboard .ld-time-scroll {
max-height: 260px;
overflow-y: auto;
border-radius: 12px;
}
.layout-learndash-dashboard .ld-time-course-select-wrapper {
min-width: 220px;
}
.layout-learndash-dashboard .ld-time-course-select {
border-radius: 999px;
border-color: #e5e7eb;
font-size: 13px;
padding-inline: 14px;
padding-block: 6px;
}
.layout-learndash-dashboard .ld-time-table {
margin: 0;
font-size: 13px;
}
.layout-learndash-dashboard .ld-time-table thead th {
border-bottom: none;
color: #9ca3af;
font-weight: 500;
}
.layout-learndash-dashboard .ld-time-table tbody tr td {
border-top: none;
padding-top: 9px;
padding-bottom: 9px;
}
.layout-learndash-dashboard .ld-time-table tbody tr:nth-child(odd) {
background-color: #f9fafb;
}
.layout-learndash-dashboard .ld-time-table tbody tr:nth-child(even) {
background-color: #ffffff;
}
.layout-learndash-dashboard .ld-time-table tbody tr:first-child td {
border-radius: 12px 12px 0 0;
}
.layout-learndash-dashboard .ld-time-table tbody tr:last-child td {
border-radius: 0 0 12px 12px;
}
.layout-learndash-dashboard .ld-time-chart-card {
padding-left: 8px;
}
.layout-learndash-dashboard .ld-time-chart-label {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 999px;
background: rgba(55, 65, 81, 0.06);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #4b5563;
}
.layout-learndash-dashboard .ld-time-chart {
position: relative;
margin-top: 10px;
padding: 16px 14px 14px;
border-radius: 14px;
background: #f9fafb;
border: 1px dashed #e5e7eb;
}
.layout-learndash-dashboard .ld-time-chart-pie {
display: flex;
align-items: center;
justify-content: center;
}
.layout-learndash-dashboard .ld-time-chart-donut {
width: 170px;
height: 170px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
background: radial-gradient(circle at 30% 30%, #e5e7eb, #9ca3af);
}
.layout-learndash-dashboard .ld-time-chart-center {
width: 96px;
height: 96px;
border-radius: 50%;
background: #ffffff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
}
.layout-learndash-dashboard .ld-time-chart-center-number {
font-size: 18px;
font-weight: 700;
color: #111827;
}
.layout-learndash-dashboard .ld-time-chart-center-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #9ca3af;
margin-top: 2px;
}
.layout-learndash-dashboard .ld-time-chart-legend {
margin-top: 16px;
}
.layout-learndash-dashboard .ld-time-chart-legend li {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
font-size: 12px;
color: #4b5563;
padding: 4px 0;
}
.layout-learndash-dashboard .ld-time-chart-legend-color {
width: 10px;
height: 10px;
border-radius: 999px;
flex-shrink: 0;
}
.layout-learndash-dashboard .ld-time-chart-legend-label {
flex: 1 1 auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.layout-learndash-dashboard .ld-time-chart-legend-value {
flex: 0 0 auto;
font-weight: 600;
color: #111827;
}
.layout-learndash-dashboard .ld-time-chart-modules {
margin-top: 8px;
}
.layout-learndash-dashboard .ld-time-chart-modules-header {
padding-inline: 4px;
}
.layout-learndash-dashboard .ld-time-chart-modules-legend {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 11px;
color: #4b5563;
}
.layout-learndash-dashboard .ld-time-chart-modules-legend-color {
width: 26px;
height: 8px;
border-radius: 999px;
background: #111827;
}
.layout-learndash-dashboard .ld-time-chart-bars-wrapper {
display: grid;
grid-template-columns: auto 1fr;
align-items: flex-end;
gap: 8px;
}
.layout-learndash-dashboard .ld-time-chart-y {
font-size: 10px;
color: #9ca3af;
}
.layout-learndash-dashboard .ld-time-chart-y-labels {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 150px;
}
.layout-learndash-dashboard .ld-time-chart-bars-modules {
display: flex;
align-items: flex-end;
gap: 8px;
height: 150px;
width: 100%;
background-image: linear-gradient(to top, #e5e7eb 1px, transparent 1px);
background-size: 100% 25%;
}
.layout-learndash-dashboard .ld-time-chart-bar-module {
flex: 1 1 0;
border-radius: 8px 8px 0 0;
background: linear-gradient(180deg, #4b5563, #9ca3af);
position: relative;
overflow: hidden;
}
.layout-learndash-dashboard .ld-time-chart-bar-module::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(255, 255, 255, 0.35), transparent 40%);
}
.layout-learndash-dashboard .ld-time-chart-modules-labels {
display: flex;
gap: 8px;
margin-top: 8px;
font-size: 10px;
color: #4b5563;
}
.layout-learndash-dashboard .ld-time-chart-modules-labels span {
flex: 1 1 0;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.layout-learndash-dashboard .ld-section-header h2,
.layout-learndash-dashboard .ld-section-header h3 {
font-weight: 600;
}
.layout-learndash-dashboard .ld-last-lesson {
min-height: 40px;
}
.layout-learndash-dashboard .course-card-modern {
background: #ffffff;
border: none;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
position: relative;
overflow: hidden;
}
.layout-learndash-dashboard .course-card-modern:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}
.layout-learndash-dashboard .course-thumbnail-wrapper {
height: 220px;
position: relative;
overflow: hidden;
border-radius: 16px 16px 0 0;
}
.layout-learndash-dashboard .course-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.layout-learndash-dashboard .course-card-modern:hover .course-img {
transform: scale(1.08);
}
.layout-learndash-dashboard .course-content {
padding: 24px;
position: relative;
background: #fff;
}
.layout-learndash-dashboard .course-title {
font-family: var(--upskill-heading-font, "Chillax", sans-serif);
font-size: 1.1rem;
line-height: 1.4;
margin-bottom: 0.5rem;
}
.layout-learndash-dashboard .course-title a {
color: #131f33;
transition: color 0.3s ease;
}
.layout-learndash-dashboard .course-card-modern:hover .course-title a {
color: var(--primary-color, #df5941);
}
.layout-learndash-dashboard .course-content .mt-auto.d-flex {
gap: 0.75rem;
}
.layout-learndash-dashboard .ld-course-list {
display: flex;
flex-direction: column;
gap: 18px;
}
.layout-learndash-dashboard .ld-panel .ld-course-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.layout-learndash-dashboard .ld-course-list-item {
position: relative;
overflow: hidden;
padding: 16px 18px;
border-radius: 14px;
border: 1px solid #f3f4f6;
background-color: #ffffff;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.layout-learndash-dashboard .ld-course-list-item:hover {
transform: translateY(-4px);
box-shadow: 0 18px 35px rgba(0, 0, 0, 0.08);
}
.layout-learndash-dashboard .ld-course-list-inner {
display: flex;
align-items: center;
gap: 20px;
}
.layout-learndash-dashboard .ld-panel .ld-course-list-inner {
flex-direction: column;
align-items: flex-start;
}
.layout-learndash-dashboard .ld-course-list-thumb {
flex: 0 0 150px;
max-width: 150px;
}
.layout-learndash-dashboard .ld-panel .ld-course-list-thumb {
flex: 0 0 auto;
max-width: 100%;
width: 100%;
}
.layout-learndash-dashboard .ld-course-list-img {
width: 100%;
height: 110px;
object-fit: cover;
border-radius: 10px;
}
.layout-learndash-dashboard .ld-panel .ld-course-list-img {
height: 160px;
}
@media (max-width: 991.98px) {
.layout-learndash-dashboard .ld-panel .ld-course-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 575.98px) {
.layout-learndash-dashboard .ld-panel .ld-course-list {
grid-template-columns: 1fr;
}
}
.layout-learndash-dashboard .ld-course-list-title a {
color: #131f33;
}
.layout-learndash-dashboard .ld-course-list-title a:hover {
color: var(--primary-color);
}
.layout-learndash-dashboard .ld-course-list-meta {
line-height: 1.4;
font-size: 13px;
color: #6b7280;
}
.layout-learndash-dashboard .ld-course-list-price {
font-weight: 600;
color: var(--primary-color);
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 999px;
background-color: #fef3c7;
font-size: 11px;
}
.layout-learndash-dashboard .ld-course-list-actions .btn {
padding-inline: 14px;
font-size: 13px;
}
.layout-learndash-dashboard .ld-course-list-body {
min-width: 0;
}
.layout-learndash-dashboard .ld-course-card-top-left {
display: flex;
align-items: center;
gap: 6px;
}
.layout-learndash-dashboard .ld-course-list-body {
min-width: 0;
}
.layout-learndash-dashboard .ld-course-actions-dropdown {
position: relative;
}
.layout-learndash-dashboard .ld-course-actions-toggle {
border-radius: 999px;
border: none;
background: #f3f4f6;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
cursor: pointer;
}
.layout-learndash-dashboard .ld-course-actions-toggle span {
width: 3px;
height: 3px;
border-radius: 999px;
background-color: #6b7280;
display: block;
margin: 1px 0;
}
.layout-learndash-dashboard .ld-course-actions-menu {
position: absolute;
top: 110%;
right: 0;
min-width: 160px;
padding: 6px 0;
border-radius: 10px;
background-color: #ffffff;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
display: none;
z-index: 20;
}
.layout-learndash-dashboard .ld-course-actions-dropdown.is-open .ld-course-actions-menu {
display: block;
}
.layout-learndash-dashboard .ld-course-actions-item {
display: block;
padding: 8px 14px;
font-size: 13px;
color: #374151;
text-decoration: none;
white-space: nowrap;
}
.layout-learndash-dashboard .ld-course-actions-item:hover {
background-color: #f3f4f6;
color: #111827;
}
@media (max-width: 575.98px) {
.layout-learndash-dashboard .ld-course-list-inner {
flex-direction: column;
align-items: flex-start;
}
.layout-learndash-dashboard .ld-course-list-thumb {
flex: 0 0 auto;
max-width: 100%;
width: 100%;
}
.layout-learndash-dashboard .ld-course-list-img {
height: 160px;
}
}
.layout-learndash-dashboard .ld-course-status-badge {
display: inline-flex;
align-items: center;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 2px 8px;
border-radius: 999px;
background: #eef2ff;
color: #4f46e5;
}
.layout-learndash-dashboard .ld-course-list-item-completed .ld-course-status-badge {
background: #dcfce7;
color: #166534;
}
.layout-learndash-dashboard .ld-dashboard-course-lists {
margin-top: 10px;
}
.layout-learndash-dashboard .ld-dashboard-course-lists .ld-dashboard-section {
height: 100%;
}
@media (min-width: 992px) {
.layout-learndash-dashboard .ld-dashboard-course-lists .ld-dashboard-section {
display: flex;
flex-direction: column;
}
.layout-learndash-dashboard .ld-dashboard-course-lists .ld-course-list {
flex-grow: 1;
}
}
.layout-learndash-dashboard .ld-course-tabs {
border-radius: 20px 20px 0 0;
display: inline-flex !important;
background: #f3f4f6;
padding: 3px;
gap: 4px;
}
.rounded-4 {
border-radius: 1.25rem;
}
.layout-learndash-dashboard .ld-course-tab-link {
border: none;
background: transparent;
padding: 6px 14px;
border-radius: 999px;
font-size: 13px;
color: #6b7280;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease;
}
.layout-learndash-dashboard .ld-course-tab-link.active {
background: #ffffff;
color: #111827;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
.layout-learndash-dashboard .ld-course-tab-panels {
margin-top: 4px;
}
.layout-learndash-dashboard .ld-course-tab-panel {
display: none;
}
.layout-learndash-dashboard .ld-course-tab-panel.active {
display: block;
}
.layout-learndash-dashboard .ld-chart-card {
text-align: center;
}
.layout-learndash-dashboard .ld-chart-donut {
width: 280px;
height: 280px;
border-radius: 50%;
position: relative;
}
.layout-learndash-dashboard .ld-chart-donut::after {
content: "";
position: absolute;
inset: 52px;
background: #ffffff;
border-radius: 50%;
}
.layout-learndash-dashboard .ld-chart-center {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 1;
}
.layout-learndash-dashboard .ld-chart-center-number {
font-size: 26px;
font-weight: 700;
}
.layout-learndash-dashboard .ld-chart-center-label {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #6b7280;
}
.layout-learndash-dashboard .ld-chart-legend {
width: 100%;
font-size: 13px;
}
.layout-learndash-dashboard .ld-chart-legend li {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 4px;
}
.layout-learndash-dashboard .ld-chart-legend-color {
width: 10px;
height: 10px;
border-radius: 50%;
margin-right: 6px;
}
.layout-learndash-dashboard .ld-chart-legend-label {
flex-grow: 1;
text-align: left;
}
.layout-learndash-dashboard .ld-chart-legend-value {
font-weight: 600;
}
.layout-learndash-dashboard .ld-chart-legend-completed {
background: #10b981;
}
.layout-learndash-dashboard .ld-chart-legend-in-progress {
background: #fbbf24;
}
.layout-learndash-dashboard .ld-chart-legend-not-started {
background: #9ca3af;
}
@media (max-width: 767px) {
.layout-learndash-dashboard .ld-course-list-inner {
flex-direction: column;
align-items: flex-start;
}
.layout-learndash-dashboard .ld-course-list-thumb {
width: 100%;
max-width: none;
}
.layout-learndash-dashboard .ld-course-list-img {
width: 100%;
}
}
.layout-learndash-dashboard .ld-panel {
border-radius: 16px;
border: 1px solid #eef0f4;
}
.layout-learndash-dashboard .ld-card {
overflow: visible !important;
}
.layout-learndash-dashboard .ld-cert-table th,
.layout-learndash-dashboard .ld-cert-table td {
border-color: #f3f4f6;
font-size: 14px;
}
.layout-learndash-dashboard .ld-cert-download-btn {
min-width: 110px;
}
.layout-learndash-dashboard .ld-activity-list {
display: flex;
flex-direction: column;
gap: 10px;
font-size: 14px;
}
.layout-learndash-dashboard .ld-activity-item {
display: flex;
align-items: flex-start;
gap: 8px;
color: #4b5563;
flex-direction: row;
padding-top: 0;
}
.userActivity {
display: flex;
flex-direction: column !important;
}
.layout-learndash-dashboard .ld-activity-item i {
color: var(--primary-color);
}
@media (max-width: 991px) {
.layout-learndash-dashboard .ld-dashboard-layout {
flex-direction: column;
}
.layout-learndash-dashboard .ld-dashboard-status-row {
flex-direction: column;
}
}
.blog-modern-article {
font-family: var(--upskill-main-font);
}
.blog-modern-hero {
position: relative;
width: 100vw;
min-height: 320px;
background-size: cover;
background-position: center center;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
margin-bottom: 40px;
display: flex;
align-items: flex-end;
}
.blog-modern-hero.no-image {
background: linear-gradient(135deg, #df5941 0%, #c14833 100%);
}
.blog-modern-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.75));
z-index: 1;
}
.blog-modern-hero-inner {
margin: 0 40px;
padding: 60px 20px 40px;
color: #131836;
background: #f6f0ee;
border-radius: 30px;
margin-top: 16px;
}
.blog-modern-meta-top {
margin-bottom: 15px;
}
.blog-modern-category {
display: inline-block;
padding: 6px 16px;
border-radius: 999px;
background: rgb(209 93 73);
font-size: 12px;
text-transform: uppercase;
letter-spacing: .08em;
font-weight: 600;
}
.blog-modern-category a {
color: #fff;
}
.blog-modern-title {
font-size: 36px;
font-weight: 700;
margin: 0 0 15px;
color: #131836;
}
.blog-modern-meta {
display: flex;
flex-wrap: wrap;
gap: 18px;
font-size: 14px;
opacity: 0.9;
}
.blog-modern-meta .meta-item {
display: inline-flex;
align-items: center;
gap: 6px;
}
.blog-modern-body {
padding-bottom: 60px;
}
@media (min-width: 992px) {
.blog-modern-body>.row {
display: flex;
flex-wrap: nowrap;
margin-left: -15px;
margin-right: -15px;
}
.blog-modern-body>.row>.col-lg-8,
.blog-modern-body>.col-lg-8 {
flex: 0 0 66.6667%;
max-width: 66.6667%;
}
.blog-modern-body>.row>.col-lg-4,
.blog-modern-body>.col-lg-4 {
flex: 0 0 33.3333%;
max-width: 33.3333%;
}
}
.blog-modern-content-card {
background: #ffffff;
border-radius: 16px;
margin-bottom: 30px;
}
.blog-modern-content-card .blog-modern-content {
font-size: 16px;
line-height: 1.8;
color: #2c3e50;
}
.blog-modern-content-card .blog-modern-content p:last-child {
margin-bottom: 0;
}
.blog-modern-footer {
border-top: 1px solid rgba(15, 23, 42, 0.06);
margin-top: 24px;
padding-top: 18px;
row-gap: 12px;
}
.blog-modern-tags .tag-label {
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-right: 8px;
color: #64748b;
}
.blog-modern-tags a {
display: inline-block;
margin-right: 6px;
margin-bottom: 4px;
padding: 4px 10px;
border-radius: 999px;
background: #f1f5f9;
font-size: 13px;
color: #475569;
text-decoration: none;
transition: background-color 0.2s ease, color 0.2s ease;
}
.blog-modern-tags a:hover {
background: #df5941;
color: #ffffff;
}
.blog-modern-share .share-label {
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #64748b;
font-weight: 600;
}
.blog-modern-share .share-icons a {
width: 34px;
height: 34px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: 6px;
background: #f8fafc;
color: #0f172a;
text-decoration: none;
font-size: 14px;
transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.blog-modern-share .share-icons a:hover {
background: #df5941;
color: #ffffff;
transform: translateY(-2px);
}
.blog-modern-comments {
margin-top: 30px;
padding: 24px 24px 10px;
background: #ffffff;
border-radius: 16px;
}
.blog-modern-sidebar {
display: flex;
flex-direction: column;
gap: 20px;
position: sticky;
top: 100px;
}
.blog-modern-sidebar-card {
background: #ffffff;
border-radius: 16px;
padding: 22px 22px 18px;
}
.blog-modern-sidebar-card .sidebar-title {
font-size: 16px;
font-weight: 600;
margin-bottom: 16px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #0f172a;
}
.recent-posts-list .recent-post-item+.recent-post-item {
margin-top: 12px;
}
.recent-post-thumb {
width: 64px;
height: 64px;
border-radius: 12px;
object-fit: cover;
margin-right: 12px;
}
.recent-post-info .recent-post-title {
font-size: 14px;
font-weight: 600;
color: #0f172a;
}
.recent-post-info .recent-post-date {
font-size: 12px;
color: #6b7280;
}
.blog-categories-list li {
padding: 6px 0;
border-bottom: 1px solid rgba(148, 163, 184, 0.25);
font-size: 14px;
}
.blog-categories-list li:last-child {
border-bottom: none;
}
.blog-categories-list a {
color: #0f172a;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.blog-categories-list a:hover {
color: #df5941;
}
.blog-modern-sidebar-card .children {
padding-left: 15px;
margin-top: 4px;
}
@media (max-width: 991px) {
.blog-modern-hero {
min-height: 260px;
margin-left: 0;
margin-right: 0;
}
.blog-modern-hero-inner {
padding: 40px 20px 30px;
}
.blog-modern-title {
font-size: 28px;
}
.blog-modern-sidebar {
position: static;
margin-top: 24px;
}
}
@media (max-width: 767px) {
.blog-modern-content-card {
padding: 24px 18px 20px;
}
.blog-modern-meta {
gap: 10px;
}
.blog-modern-footer {
flex-direction: column;
align-items: flex-start;
}
} .ld-time-spent-section {
background: #f8fafc; border-radius: 16px;
margin-bottom: 2rem;
}
.ld-time-spent-section .bg-white {
background-color: #ffffff !important;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025) !important;
border: 1px solid #f1f5f9;
border-radius: 16px !important;
color: #000;
}
.ld-time-spent-section h2 {
font-weight: 700;
color: #1e293b; letter-spacing: -0.025em;
}
.ld-time-course-select-wrapper {
position: relative;
}
.ld-time-course-select {
appearance: none;
background-color: #fff;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 0.75rem 1rem;
font-size: 0.95rem;
color: #334155;
width: 100%;
transition: all 0.2s ease;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
background-position: right 0.75rem center;
background-repeat: no-repeat;
background-size: 1.5em 1.5em;
}
.ld-time-course-select:focus {
border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
outline: none;
} .ld-time-meta-card {
background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%);
border: 1px solid #dbeafe;
border-radius: 16px;
padding: 1.5rem;
height: 100%;
}
.ld-time-meta-main {
margin-bottom: 1.5rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid #e2e8f0;
}
.ld-time-meta-main-value {
font-size: 2.5rem;
font-weight: 800;
color: #1e40af; line-height: 1;
margin-bottom: 0.5rem;
}
.ld-time-meta-main-label {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #64748b;
font-weight: 600;
}
.ld-time-meta-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.ld-time-meta-item {
background: rgba(255, 255, 255, 0.6);
padding: 1rem;
border-radius: 12px;
border: 1px solid #f1f5f9;
}
.ld-time-meta-label {
font-size: 0.8rem;
color: #64748b;
margin-bottom: 0.25rem;
}
.ld-time-meta-value {
font-size: 1.25rem;
font-weight: 700;
color: #334155;
} .ld-time-list {
background: #fff;
border-radius: 16px;
overflow: hidden;
margin-top: 1.5rem;
}
.ld-time-table th {
background: #f8fafc;
font-weight: 600;
color: #64748b;
text-transform: uppercase;
font-size: 0.75rem;
letter-spacing: 0.05em;
border-bottom: 1px solid #e2e8f0;
padding: 1rem !important;
}
.ld-time-table td {
padding: 1rem !important;
vertical-align: middle;
color: #334155;
border-bottom: 1px solid #f1f5f9;
font-size: 0.95rem;
}
.ld-time-table tr:last-child td {
border-bottom: none;
}
.ld-time-table tr:hover td {
background-color: #f8fafc;
}
.ld-time-table strong {
color: #0f172a;
font-weight: 700;
} .ld-time-chart-card {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
background: #fff;
padding: 1rem;
}
.ld-time-chart-label {
font-size: 1rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 1.5rem;
display: block;
} .ld-time-chart-donut {
width: 200px;
height: 200px;
margin: 0 auto;
border-radius: 50%;
position: relative; background: conic-gradient(#e2e8f0 0deg 360deg);
display: flex;
align-items: center;
justify-content: center;
}
.ld-time-chart-center {
width: 160px;
height: 160px;
background: #fff;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}
.ld-time-chart-center-number {
font-size: 1.75rem;
font-weight: 800;
color: #1e293b;
line-height: 1.1;
}
.ld-time-chart-center-label {
font-size: 0.75rem;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-top: 0.25rem;
} .ld-time-chart-bar-module {
border-radius: 6px 6px 0 0; background: linear-gradient(180deg, #6366f1 0%, #818cf8 100%) !important;
opacity: 0.85;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.ld-time-chart-bar-module:hover {
opacity: 1;
transform: scaleY(1.05);
transform-origin: bottom;
box-shadow: 0 -4px 12px rgba(99, 102, 241, 0.3);
}
.ld-time-chart-modules-labels span {
color: #94a3b8;
font-size: 10px;
font-weight: 500;
}
.ld-time-chart-y-labels {
color: #cbd5e1;
font-size: 10px;
}
.ld-time-chart-bars-wrapper {
border-bottom: 1px solid #f1f5f9;
}  .ld-time-spent-section .bg-white.shadow-sm {
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
border: 1px solid #f1f5f9;
border-radius: 20px !important;
padding: 2rem !important;
} .ld-time-spent-section h2 {
font-size: 1.25rem;
font-weight: 800;
color: #1e293b;
letter-spacing: -0.02em;
}
.ld-time-spent-section p.small.text-muted {
font-size: 0.875rem;
color: #64748b !important;
} .ld-time-course-select-wrapper {
position: relative;
}
.ld-time-course-select {
appearance: none;
background-color: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 12px 16px;
font-size: 0.95rem;
color: #334155;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
background-size: 16px;
}
.ld-time-course-select:hover,
.ld-time-course-select:focus {
background-color: #fff;
border-color: #cbd5e1;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
outline: none;
} .ld-time-meta-card {
background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
border: 1px solid #e2e8f0;
border-radius: 16px;
padding: 1.5rem;
margin-bottom: 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
}  .ld-time-list {
background: #fff;
border: 1px solid #f1f5f9;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}
.ld-time-list .table {
margin-bottom: 0;
}
.ld-time-list .table th {
background-color: #f8fafc;
color: #64748b;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 600;
padding: 1rem 1.5rem;
border-bottom: 1px solid #e2e8f0;
}
.ld-time-list .table td {
padding: 1rem 1.5rem;
vertical-align: middle;
color: #334155;
border-bottom: 1px solid #f1f5f9;
font-size: 0.95rem;
}
.ld-time-list .table tr:last-child td {
border-bottom: none;
}
.ld-time-list .table tr:hover td {
background-color: #f8fafc;
} .ld-time-chart-card {
background: #fff;
border: 1px solid #f1f5f9;
border-radius: 16px;
padding: 1.5rem;
height: 100%;
} .upskill-profile-details {
margin-top: 25px;
border-top: 1px solid #eee;
padding-top: 25px;
width: 100%;
}
.upskill-profile-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.upskill-profile-item {
display: flex;
align-items: center;
gap: 15px;
background: #f8fcff;
padding: 15px;
border-radius: 8px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
border: 1px solid #eef6fa;
}
.upskill-profile-item:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
background: #fff;
border-color: #df5941;
}
.upskill-profile-icon {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(223, 89, 65, 0.1);
color: #df5941;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.upskill-profile-icon .ld-icon {
font-size: 18px;
}
.upskill-profile-content {
display: flex;
flex-direction: column;
}
.upskill-profile-label {
font-size: 12px;
color: #888;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 600;
margin-bottom: 2px;
}
.upskill-profile-value {
font-size: 15px;
font-weight: 600;
color: #131f33;
word-break: break-all;
}
@media (max-width: 576px) {
.upskill-profile-grid {
grid-template-columns: 1fr;
gap: 15px;
}
} .upskill-profile-stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-top: 25px;
}
.upskill-profile-stat-card {
background: #fff;
border: 1px solid #eef6fa;
border-radius: 8px;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
transition: all 0.3s ease;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
}
.upskill-profile-stat-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
border-color: #df5941;
}
.upskill-stat-icon {
width: 50px;
height: 50px;
border-radius: 50%;
background: #fdf2f0;
color: #df5941;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 15px;
}
.upskill-stat-icon .ld-icon {
font-size: 24px;
}
.upskill-stat-content {
display: flex;
flex-direction: column;
}
.upskill-stat-value {
font-size: 24px;
font-weight: 700;
color: #131f33;
line-height: 1;
margin-bottom: 5px;
}
.upskill-stat-label {
font-size: 13px;
color: #777;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 600;
} .ld-profile-stats {
display: block !important;
}
@media (max-width: 768px) {
.upskill-profile-stats-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.upskill-profile-stats-grid {
grid-template-columns: 1fr;
}
.upskill-profile-stat-card {
flex-direction: row;
text-align: left;
padding: 15px;
}
.upskill-stat-icon {
margin-bottom: 0;
margin-right: 15px;
width: 40px;
height: 40px;
}
.upskill-stat-icon .ld-icon {
font-size: 20px;
}
} .upskill-bottom-nav {
position: fixed !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
z-index: 99999 !important;
background: #ffffff;
border-top: 1px solid rgba(0, 0, 0, 0.08);
box-shadow: 0 -1px 16px rgba(0, 0, 0, 0.06);
padding: calc(6px + env(safe-area-inset-bottom)) 0 6px;
display: none;
width: 100% !important;
}
.upskill-bottom-nav__list {
display: flex !important;
justify-content: space-around !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.upskill-bottom-nav__item {
flex: 1 1 auto !important;
text-align: center !important;
}
.upskill-bottom-nav__link {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-decoration: none !important;
color: #1a1a1a !important;
font-size: 12px !important;
gap: 4px !important;
padding: 6px 0 !important;
}
.upskill-bottom-nav__link:hover,
.upskill-bottom-nav__link:focus {
color: var(--primary-color) !important;
}
.upskill-bottom-nav__icon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 18px !important;
line-height: 1 !important;
}
.upskill-bottom-nav__avatar img {
width: 26px !important;
height: 26px !important;
border-radius: 999px !important;
object-fit: cover !important;
border: 1px solid rgba(0, 0, 0, 0.08) !important;
}
.upskill-bottom-nav__link--active {
color: var(--primary-color) !important;
}
.upskill-bottom-nav__link--active .upskill-bottom-nav__icon,
.upskill-bottom-nav__link--active .upskill-bottom-nav__avatar img {
color: var(--primary-color) !important;
border-color: rgba(223, 89, 65, 0.5) !important;
}
@media (max-width: 992px) {
.upskill-bottom-nav {
display: block !important;
} body {
padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
}
} @media (max-width: 767px) { .single-course-ecademy-main-card {
padding: 0;
}
.single-course-ecademy-title {
font-size: 22px;
}
.Single-ecadeny-Box {
margin-top: 0;
margin-bottom: 40px;
}
.MobReverse {
flex-direction: column-reverse;
}
.single-course-ecademy-hero-banner {
display: none;
}
.learndash-wrapper .ld-item-list .ld-item-list-item .ld-item-list-item-preview {
flex-direction: row;
}
.ld-lesson-section-heading {
font-size: 18px !important;
line-height: 1.6rem;
}  .ld-resume-thumb.rounded-3.overflow-hidden.shadow-sm {
width: 100% !important;
height: 100% !important;
} }
@media (max-width: 480px) {} .upskill-thankyou-page .m-900 {
max-width: 850px !important;
} .upskill-thankyou-page {
padding: 44px 0;
}
.upskill-thankyou-card {
background: #ffffff;
border-radius: 14px;
box-shadow: 0 12px 28px rgba(17, 24, 39, 0.06);
padding: 24px;
margin-bottom: 18px;
}
.upskill-thankyou-title {
margin: 0 0 16px;
text-align: center;
font-size: 20px;
font-weight: 800;
color: #111827;
}
.upskill-thankyou-success-banner {
background: #f0fdf4;
border: 1px solid rgba(16, 185, 129, 0.25);
border-radius: 12px;
padding: 16px 18px;
display: flex;
gap: 14px;
align-items: flex-start;
margin-bottom: 18px;
}
.upskill-thankyou-success-icon {
width: 38px;
height: 38px;
border-radius: 999px;
background: #22c55e;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
flex: 0 0 auto;
margin-top: 2px;
}
.upskill-thankyou-success-icon .flaticon-check:before {
color: #ffffff;
font-size: 16px;
}
.upskill-thankyou-success-heading {
font-weight: 800;
color: #065f46;
margin-bottom: 4px;
}
.upskill-thankyou-success-subheading {
color: #047857;
font-size: 13px;
}
.upskill-thankyou-section-heading {
font-weight: 800;
font-size: 16px;
color: #111827;
margin: 0 0 14px;
}
.upskill-thankyou-details-grid {
display: grid;
grid-template-columns: 180px 1fr;
column-gap: 24px;
row-gap: 12px;
align-items: center;
}
.upskill-thankyou-detail-label {
color: #6b7280;
font-size: 13px;
font-weight: 600;
}
.upskill-thankyou-detail-value {
color: #111827;
font-size: 14px;
font-weight: 700;
}
.upskill-thankyou-actions {
display: flex;
gap: 14px;
margin-top: 22px;
}
.upskill-thankyou-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 11px 18px;
border-radius: 8px;
font-weight: 800;
text-decoration: none;
transition: background 0.2s ease, transform 0.1s ease;
white-space: nowrap;
}
.upskill-thankyou-btn--start {
background: #df5941;
color: #ffffff;
}
.upskill-thankyou-btn--start:hover,
.upskill-thankyou-btn--start:focus {
background: #c84d37;
}
.upskill-thankyou-btn--dashboard {
background: #111827;
color: #ffffff;
}
.upskill-thankyou-btn--dashboard:hover,
.upskill-thankyou-btn--dashboard:focus {
background: #0b1222;
}
.upskill-thankyou-method-message {
margin-top: 16px;
text-align: center;
}
.upskill-thankyou-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
.upskill-thankyou-table thead th {
font-size: 12px;
font-weight: 900;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.04em;
border-bottom: 1px solid #eef2f7;
padding: 12px 10px;
}
.upskill-thankyou-table tbody td {
padding: 14px 10px;
border-bottom: 1px solid #f3f4f6;
vertical-align: middle;
color: #111827;
font-weight: 700;
}
.upskill-thankyou-course-link {
color: inherit;
text-decoration: none;
}
.upskill-thankyou-course-link:hover,
.upskill-thankyou-course-link:focus {
text-decoration: underline;
}
.upskill-thankyou-badge {
display: inline-block;
padding: 6px 14px;
border-radius: 999px;
font-size: 12px;
font-weight: 900;
line-height: 1;
}
.upskill-thankyou-badge--status {
background: #dcfce7;
color: #166534;
}
.upskill-thankyou-badge--access {
background: #dbeafe;
color: #1d4ed8;
}
.upskill-thankyou-empty {
margin: 0;
color: #6b7280;
font-weight: 600;
}
@media (max-width: 768px) {
.upskill-thankyou-actions {
flex-direction: column;
align-items: stretch;
}
.upskill-thankyou-btn {
width: 100%;
}
.upskill-thankyou-details-grid {
grid-template-columns: 140px 1fr;
column-gap: 14px;
}
}