@import "poppins.css";
@import "onest.css";

.html {
    font-family: 'Inter',Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-weight: 500;
}

::selection {
    background-color: var(--customer-blue-color);
    color: #fff;
}

.body,
body,
.body.site,
footer {
    font-family: 'Poppins', Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-weight: 300;
}
.header-inner .brand .logo {
    background-position: left center;
    position: absolute;
    top: 3px;
    height: 96px;
    width: 200px;
}
.catalog-list .course .baseinfo1 .title {
    hyphens: none;
}

body.view-featured header {
    width: 240px;
}

.header-inner .brand .logo {
    background-position: left center;
}

body.view-featured .navigation {
    width: calc(100% - 240px);
}

.lul-search #lul-search-form #lul-search-input {
    padding: 11px 0 8px 30px;
    font-weight: 500;
    font-family: 'Poppins', Arial, sans-serif;
    color: var(--font-color);
}
.view-points .points, .view-featured .points {
    display: flex;
}

h1 {
    font-family: 'Onest', Arial, sans-serif;
    font-weight: 700;
}

.navigation .nav a, .navigation .nav a:link {
    font-family: 'Onest', Arial, sans-serif;
    font-width: 400;
    color: var(--font-color);
}

.navigation .nav a:hover,
.navigation .nav a:active,
.navigation .nav a:focus,
.navigation .nav .active > a,
.navigation .nav .active > a:hover,
.navigation .nav li > span:hover,
.navigation .nav li > span:active,
.navigation .nav li > span:focus,
.navigation .nav li.active > span,
.nav li a[class$="icon"]:hover::before,
.nav li span[class$="icon"]:hover::before,
.nav li.active a[class$="icon"]::before,
.nav li.active span[class$="icon"]::before {
    color: var(--font-color);
}

.navigation .nav li:after a:hover,
.navigation .nav li:after a:active,
.navigation .nav li:after a:focus,
.navigation .nav li.active:after  > a,
.navigation .nav .active:after > a:hover,
.navigation .nav li:after > span:hover,
.navigation .nav li:after > span:active,
.navigation .nav li:after > span:focus,
.navigation .nav li.active:after > span,
.nav li::after a[class$="icon"]:hover,
.nav li::after span[class$="icon"]:hover,
.nav li.active::after a[class$="icon"],
.nav li.active:after span[class$="icon"]:{
    background-color: #ffff86;
}

.nav li a[class$="icon"]:before,
.nav li span[class$="icon"]:before {
   display: none;
}

    /*-----------Kachel in Kundenfarbe------------*/
.view-course .sidecourseinfoleft.unpublished .baseinfo1,
.courses .course.unpublished .baseinfo1 {
    border-color:  var(--snow-white-color);
}

.course .baseinfo1,
.view-course .sidecourseinfoleft .baseinfo1,
body.view-user2courses.layout-learningdb.course .baseinfo1 {
    background-color: var(--customer-primary-color);
}

.course .baseinfo1 .description {
    color: var(--font-color);
}
.course .baseinfo1 .title,
.view-course .sidecourseinfoleft .baseinfo1 .description,
.view-course .sidecourseinfoleft .baseinfo1 .title {
    color: var(--snow-white-color);
}
.feedbackanswer span.removeAnswer.btn {
    aspect-ratio: 1/1;
}

body.view-featured .navigation {
    width: calc(100% - 190px);
}
body.view-featured header {
     width: 190px;
 }
.lul-search #lul-search-form:hover #lul-search-input {
    color: var(--customer-primary-color);
}

.mod.username .title-container .title,
.mod.username .title-container .mod-u-username {
    color: var(--font-color);
    background-color: linear-gradient(0deg,#ffff86,#ffff86 80%,#fff 80%,#fff);
}

.lul-search #lul-search-form #lul-search-input {
    padding-bottom: 10px;
}
.lul-search #lul-search-input {
    width: 115px;
}
.baseinfo1 .metadata_time {
    color: var(--off-white-color);
}
.course .baseinfo1 .description {
    color: var(--off-white-color);
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-device-width: 300px) and (max-device-width: 979px), screen and (min-width: 300px) and (max-width: 979px) {
    .lul-search #lul-search-submit-icon::before {
        top: 2px;
    }
}