/* COLORS */
/* gray: #f3f3f3 */



/* GENERAL STYLE */
body * {
    font-family: 'Roboto Flex', sans-serif;
}
.card {
    border-radius: 0;
}
.app main {
    background: #fff;
}
h1, h2, h3, h4, h5, h6 {
    color: #000;
}
.footer .footer-logo-image,
img.logo-image {
    filter: invert(1);
    max-width: unset;
}



/* HEADER STYLE */
.header {
    box-shadow: 0 1px 5px #bbb;
    background: #fff;
}
.header-content .nav-link,
button.user-button .user-name {
    color: #000;
}
.header-content .nav-link.nav-admin {
    color: #10b981;
}
.header-content .nav span.user-avatar {
    background: linear-gradient(135deg, #bfc0c0 0%, #060606 100%);
}
.user-menu .user-button {
    border-radius: 0;
    border: 1px solid transparent;
}
.user-menu .user-button:hover {
    background: transparent;
    border: 1px solid #000;
}
.user-menu .user-dropdown {
    background: #000;
    border: 1px solid #000;
    border-radius: 0;
}
@media screen and (width <= 590px) {
    .header-content {
        justify-content: space-between;
        flex-direction: column;
        gap: 10px;
    }
    .header-content .nav {
        gap: 0;
        display: flex;
        justify-content: space-around;
        width: 100%;
    }
    .header-content .nav .nav-link {
        font-size: 16px !important;
        text-align: center;
        /*min-width: 140px;*/
    }
    .header-content .nav.user-menu {
        /*order: 0;*/
    }
    .header-content .nav .nav-link:nth-child(2) {
        /*order: 2;*/
    }
    .header-content .nav .user-menu .user-avatar {
        border-radius: 3px;
    }
}


/*
START COURSE DETAIL STYLE
*/
.course-detail .container, .header .container {
    /* max-width: 1440px; */
    max-width: unset;
    padding-right: 3rem;
    padding-left: 3rem;
}
.course-layout {
    grid-template-columns: 1fr 2fr;
    gap: 6rem;
}
.course-detail .course-sidebar {
    grid-column-start: 1;
    grid-row-start: 1;
    width: 100%;
}
.course-detail .course-sidebar {
    grid-column-start: 1;
    grid-row-start: 1;
}

/* sidebar > lessons list */
.course-detail .course-sidebar .card {
    background: #f3f3f3;
}
.course-sidebar .card:hover {
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
}
.lessons-list .lesson-item.active {
    background: #24242a;
    border-color: #24242a;
}
.lessons-list .lesson-item:not(.active) {
    background: transparent;
    border-color: transparent;
}
.lessons-list .lesson-item {
    border-radius: 0;
}
.lessons-list .lesson-item:hover {
    background: #505050;
    border-color: #505050;
}
.course-detail .lessons-list button.lesson-item.active span.lesson-number {
    color: #000;
    background: #fff;
}
.lessons-list .lesson-item:not(.active) span.lesson-info,
.lessons-list .lesson-item:not(.active) span.lesson-title {
    color: #000;
}
.lessons-list .lesson-item.active span,
.lessons-list .lesson-item:not(.active):hover span.lesson-title,
.lessons-list .lesson-item:not(.active) span.lesson-number {
    color: #fff;
}

/* sidebar > materials list */
.materials-list > a.material-item {
    background: transparent;
    color: #000;
    border-radius: 0;
}
.materials-list > a.material-item:hover {
    background: #505050;
    border-color: #505050;
    color: #fff;
}
.materials-list > a > .material-icon {
    display: none;
}

/* responsive design */
@media screen and (width <= 1240px) {
    .course-detail .container,
    .header .container {
        padding-right: 2rem;
        padding-left: 2rem;
    }
    .course-layout {
        gap: 4rem;
    }
}
@media screen and (width <= 1024px) {
    .course-detail .container,
    .header .container {
        padding-right: 2rem;
        padding-left: 2rem;
    }
    .course-layout {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .course-main {
        width: 100%;
    }
    .terms-acceptance {
        width: 100%;
    }
}
/*
END COURSE DETAIL STYLE
*/



/*
START /courses STYLE
*/
.home .hero .hero-content .text-gradient,
.purchase-card.card .price {
    color: #000;
    background: transparent;
    -text-fill-color: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    -webkit-background-clip: unset;
}
.home .hero .hero-content .hero-badge {
    border-radius: 3px;
}
.home .hero .hero-content .hero-badge > span {
    color: #fff;
}
.home .features .feature-card.card {
    min-height: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    background: #000;
}
.home .features .feature-card.card .feature-icon {
    display: none;
}
.home .features .feature-card.card h3 {
    color: #fff;
    font-weight: 400;
}
.home .features .feature-card.card p {
    color: #f3f3f3;
}
.home .cta-section .cta-card.glass {
    background: #f3f3f3;
}
.home .cta-section .cta-card.glass h2 {
    color: #000;
}
.home .cta-section .cta-card.glass p {
    color: #505050;
}
/*
END /courses STYLE
*/



/*
START /courses/courses STYLE
*/

/* header */
.header-content .nav a.btn.btn-primary.btn-sm {
    box-shadow: 0 1px 10px #505050 !important;
    background: #000;
}
.header-content .nav a.btn.btn-primary:hover {
    /* transform: none; */
    color: #fff;
}

/* cards */
.courses-page a.course-card.card:hover {
    transform: none;
    box-shadow: none;
    border-color: #000;
}
.courses-page a.course-card.card:hover .course-thumbnail img {
    transform: none;
}
.courses-page a.course-card.card .card-body {
    background: #f3f3f3;
    transition: all .3s ease-in-out;
}
.courses-page a.course-card.card:hover .card-body {
    background: #000;
}
.courses-page a.course-card.card .card-body h3 {
    color: #000;
    transition: all .3s ease-in-out;
}
.courses-page a.course-card.card .course-price {
    color: #505050;
    transition: all .3s ease-in-out;
}
.courses-page a.course-card.card:hover .card-body h3,
.courses-page a.course-card.card:hover .course-cta,
.courses-page a.course-card.card:hover .course-price {
    color: #f3f3f3;
}
.courses-page a.course-card.card .badge-premium {
    background: #000;
}
.courses-page .courses-filters .filter-btn {
    background: #f3f3f3;
    border: 1px solid #505050;
    border-radius: 50px;
    color: #505050;
    transition: all .3s ease-in-out;
    border-radius: 3px;
}
/*.courses-page .courses-filters .filter-btn.active {
    background: #000;
    border-color: #000;
    color: #fff;
}*/
.courses-page .courses-filters .filter-btn:not(.active):hover {
    color: #fff;
    background: #505050;
}
/*
END /courses/courses STYLE
*/



/*
START /courses/courses/${courseNumber}
*/
.purchase-card.card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
.purchase-card.card .terms-acceptance span, .terms-acceptance span a {
    color: #fff;
}
.purchase-card.card .purchase-features li {
    color: #000;
}
/*
END /courses/courses/${courseNumber}
*/



/*
START courses/register & /courses/login STYLE
*/
.auth-page .auth-container.glass {
    background: #f3f3f3;
}
.auth-page .auth-container.glass .auth-form .form-input {
    color: #000;
    background: #fff;
    border-radius: 3px;
}

/* app's lg-button */
.courses-page .courses-filters .filter-btn.active,
.auth-page .auth-container.glass .auth-form .btn.btn-primary.btn-lg,
.home .hero .hero-content .btn.btn-primary.btn-lg,
.home .cta-section .cta-card.glass .btn.btn-primary.btn-lg,
.purchase-card.card .btn.btn-primary.btn-lg {
    background: #000;
    color: #fff;
    font-weight: 400;
    border-radius: 3px;
}
.auth-page .auth-container.glass .auth-footer a {
    color: #10b981;
}
/*
END courses/register & /courses/login STYLE
*/



/*
START /courses/dashboard STYLE
*/
.dashboard .dashboard-header .user-avatar-large {
    background: #000;
}
.dashboard .dashboard-section .empty-purchases.card {
    background: #f3f3f3;
    border: 1px solid transparent;
    transition: all .3s ease-in-out;
}
.dashboard .dashboard-section .empty-purchases.card:hover {
    transform: none;
    box-shadow: none;
    border: 1px solid #000;
}
.dashboard .dashboard-section .btn.btn-primary {
    background: #000;
    color: #fff;
    font-weight: 400;
    border-radius: 3px;
}
.dashboard .dashboard-section .section-header .btn.btn-outline.btn-sm {
    color: #505050;
    border-color: #505050;
    transition: all .3s ease-in-out;
    border-radius: 3px;
}
.dashboard .dashboard-section .section-header .btn.btn-outline.btn-sm:hover {
    background: #505050;
    border-color: #505050;
    color: #fff;
}
/*
END /courses/dashboard STYLE
*/



/*
START /courses > legal pages STYLE
*/
.legal-page h1,
.legal-page h2,
.legal-page .legal-content p,
.legal-page .legal-content a,
.legal-page .legal-content ul li {
    color: #000 !important;
}
.legal-page .legal-content.card:hover {
    transform: none;
    border: none;
    box-shadow: 0 4px 20px #00000014;
}
/*
END /courses > legal pages STYLE
*/



/*
START FOOTER STYLE
*/
.footer {
    background: #fff;
    border-top: 1px solid #000;
}
.footer h4 {
    color: #000;
}
.footer a:hover {
    color: #505050;
}
.footer .footer-tagline {
    display: none;
}
@media screen and (width <= 590px) {
    .footer-links {
        flex-direction: column;
    }
}
/*
END FOOTER STYLE
*/

/*
hide 3buttons
*/
.courses-filters {
  display:flex;
  justify-content:center;
  gap:.5rem;
  margin-bottom:2rem;
  flex-wrap:wrap;
  display: none;
}

.course-layout .materials-card {
    grid-column: 1 !important;
}


/*
Giannis
*/
.card-body {
  padding: 0.8rem !important;
}

.auth-page .auth-container.glass .auth-footer a {
  color: #dd27d2 !important;
}

.card {
  background: #dfdfdf !important;
}

.course-description {
  display: none;
}

.courses-page .container {
  max-width: none !important;
}

.course-title {
  font-size: 1.1rem !important;
}

@media screen and (min-width: 1800px) {
.courses-grid .course-card.card {
    display: flex;
    flex-direction: column;
    aspect-ratio: 1;
}
.courses-grid .course-card.card .card-body {
    flex: 1;
    align-content: center;
}
}