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

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

::selection {
    background-color: var(--customer-rosa-color);
    color: var(--font-color);
}

.foto .remind .control-label,
.foto .login .control-label,
.foto .reset .control-label {
    width: 35%;
    max-width: 35%;
    text-align: left;
}

.remind label,
.remind .control-label label,
.login label,
.login .control-label label,
.reset label,
.reset .control-label label {
    text-align: left;
}

.foto .remind .controls,
.foto .login .controls,
.foto .reset .controls {
    width: 65%;
}

.logincontent .zusatz nav a:hover {
    text-decoration: underline;
}

.remind .controls input,
.login .controls input,
.reset .controls input {
    padding: 10px 20px;
    width: 100%;
    font-weight: normal;
    line-height: 1.5em;
    height: 35px;
}

.logincontent .remind .btn,
.btn-login, .btn-reset {
    width: 100%;
    text-align: center;
    font-size: 24px;
    padding: 20px;
    border-radius: 29px;
    font-weight: bold;
}

.idealivefilters .custom-filter .control-group,
.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-weight: 400;
    color: var(--font-color);
}
.lul-search #lul-search-form #lul-search-input::placeholder,
.lul-search.active #lul-search-submit-btn {
    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 {
    background-color: #ffff86;
}
.view-course .sidecourseinforight .contents {
    background-color: #fcf0ff;
}

.navigation .nav li .nav-child li a.logout {
    background-color: var(--customer-rosa-color);
    border: 2px solid var(--font-color);
}

.navigation .nav li .nav-child li:hover a.logout {
    background-color: var(--snow-white-color);
    text-decoration: none;
}

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);
}

.catalog-list .course .baseinfo1 .title {
    color: var(--font-color);
    background: 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;
}

.courses .catalog-list .course {
    padding: 0;
    margin-top: 30px;
}

.course .baseinfo1:hover .info,
.course .baseinfo1 .info:hover {
    min-width: 300px;
}

.view-course .sidecourseinforight > .add2mycourses a,
.view-course .sidecourseinfoleft .baseinfo1,
.course .baseinfo1,
.courses .catalog-list .course,
.logincontent .remind .btn,
.btn-login, .btn-reset,
.lastvisitedcourses .lcc-info-block .lcc-info-btn a  {
    box-shadow: 0 0 0 .125rem #000,.375rem .375rem #000;
    border-radius: .625rem;
}

.catalog-list .course .baseinfo1:hover,
.view-course .course-view .sidecourseinforight .contents .innercontent .left .image,
.view-course .sidecourseinforight > .add2mycourses a:hover,
.lastvisitedcourses .lv-content .lcc-image,
.course .baseinfo1:hover,
.courses .catalog-list .course:hover,
.lastvisitedcourses .lcc-info-block .lcc-info-btn a:hover,
.logincontent .remind .btn:hover,
.btn-login:hover, .btn-reset:hover {
    box-shadow: none;
    border: .125rem solid #000;
}

.courses .catalog-list .course:hover .baseinfo1 {
    border: none;
}

.view-course .sidecourseinfoleft,
.courses .course {
    padding-left: 4px;
    padding-right: 8px;
}
.view-course .sidecourseinfoleft {
    padding-top: 4px;
}

.feedbackanswer span.removeAnswer.btn {
    aspect-ratio: 1/1;
}

.btn, a.btn, .btn-group > .btn, .btn:visited {
    border-color: var(--font-color);
    background-color: var(--customer-rosa-color);
    color: var(--font-color);
}
.btn:active, .btn:focus, .btn:hover, .btn:hover > a {
    background-color: var(--font-inverse-color);
    color: var(--font-color);
    border-color: var(--font-color);
}

.indent.add2mycourses {
    color: var(--font-color);
}

.newsflash-horiz li a:hover, .newsflash-horiz li a:hover .newsflash-publish, .newsflash-horiz li a:hover h4 a, .view-archive .archive #archive-items a:hover, .view-archive .archive #archive-items a:hover .published time,
.indent.add2mycourses a:hover {
    color: var(--customer-blue-color);
}

.contents .content .times_container .time_block, .contents .content .times_container .metadata_time_container {
    min-width: 240px;
}
.star {
    color: var(--customer-rosa-color);
}

@media only screen and (min-width: 980px){
    .navigation .nav .nav-child > li:hover a {
        text-decoration: underline;
    }
}

@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;
    }
}

@media only screen and (max-width: 840px) {
    .foto .remind .control-label, .foto .login .control-label, .foto .reset .control-label,
    .foto .remind .controls, .foto .login .controls, .foto .reset .controls{
        width: 100%;
        max-width: 100%;
    }

}