html {
    scroll-padding-top: 180px;
}

header {
    padding: 20px 0;
}

header #logo {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    width: auto;
    text-decoration: none;
    gap: 10px;
}

header #logo img {
    width: 200px;
}

header #logo span {
    color: #707070;
    font-size: 1.5em;
    font-family: "Helvetica Neue", sans-serif;
    font-style: italic;
    margin-bottom: 13px;
}

footer#footerz {
    padding-top: 0px;
}

footer:before {
    display: block;
    margin-bottom: 40px;
    background-color: #fff;
    background-image: url("/imgs/mind_footer.png");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
    height: 152px;
    content: "";
}

footer .footsc {
    margin: 30px 0;
}

footer .foottleftlogo img {
    width: 200px;
}

#authscreen {
    min-height: calc(100% - 400px);
    padding: 200px 50px;
}

#authscreen .formcontrol {
    margin-top: 150px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

#authscreen .formcontrol label {
    padding-top: 0;
}

#authscreen .formcontrol input {
    width: 50%;
    flex: 1;
}

.course_page .cs_box_text .cstitle .cs_tt2 {
    font-size: 46px;
}

.course_choice a {
    transition: all 0.3s ease-in-out;
}

.course_choice a:hover {
    transform: translateY(15px);
}

.course_choice a .ccbb.cctext {
    top: 140px;
    line-height: 1.5;
}

.course_choice a .ccbb.ccbutton {
    top: 320px;
}

.course_dass_link {
    margin-top: 200px;
    margin-bottom: 100px;
    text-align: center;
}

.course_dass_link h3 {
    font-size: 46px;
    color: #0096b4;
    margin-bottom: 60px;
}
.course_dass_link a.btnb {
    font-size: 36px;
    padding: 10px 50px;
    border-radius: 50px;
    background: #3daf90;
}

.video-js {
    zoom: 125% !important;
}

.menubtn {
    line-height: 50px;
    height: 50px;
}

#logout_btn {
    background: #94abb4;
    margin-left: 50px;
    padding: 0 20px;
}

.dass-description {
    padding: 70px 120px;
    font-size: 30px;
    background: #ecf7f9;
    border-radius: 80px;
    color: #707070;
    line-height: 1.5;
    margin-bottom: 80px;
}

.dass-description table {
    margin-top: 50px;
    text-align: left;
}

.dass-info {
    background: #f5f5f5;
}

.dass-severity {
    display: flex;
    flex-direction: row;
    padding: 0;
}

.dass-severity .dass-severity-item {
    flex: 1;
    padding: 70px 90px;
    text-align: center;
}

.dass-severity .dass-severity-item:not(:last-child) {
    border-right: 10px solid #fff;
}

.dass-severity .dass-severity-item table {
    width: 100%;
}

.dass-question {
    background: #f5f5f5;
    color: #707070;
    border-radius: 50px;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 40px;
    font-size: 30px;
    border: 3px solid transparent;
}

.dass-question > div:first-child {
    text-align: left;
    flex: 1;
    padding: 50px;
}

.dass-question > div:last-child {
    text-align: left;
    border-left: 10px solid white;
    padding: 40px 50px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 40px;
}

#dass-form.submitted .dass-question:has(input[type="radio"]:invalid) {
    border: 3px solid red;
}

.dass-question input[type="radio"] {
    position: absolute;
    width: 0;
    height: 0;
}

.dass-question input[type="radio"] + label {
    display: inline-block;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: white;
    text-align: center;
    line-height: 90px;
    font-size: 30px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    border: 3px solid transparent;
}

.dass-question input[type="radio"] + label:hover {
    border-color: #0096b4;
}

.dass-question input[type="radio"]:checked + label {
    background: #b2e0e7;
}

.dass-submit {
    background: #3daf90;
}

.dass-result-item p.score {
    font-family: "Mitr-Regular" !important;
    font-size: 40px;
    margin-bottom: 20px;
}

.dass-result-item > div:last-child {
    flex: 1;
    text-align: center;
    align-items: center;
    justify-content: space-evenly;
}
.dass-result-item > div:last-child > div {
    text-align: center;
}

.dass-faces {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px;
    font-size: 40px;
    color: #707070;
}

.dass-result-text {
    text-align: left;
    background: white;
}
.dass-result-green {
    border: 5px solid #2ca500;
}
.dass-result-green h2 {
    color: #2ca500;
}
.dass-result-yellow {
    border: 5px solid #c3c91e;
}
.dass-result-yellow h2 {
    color: #c3c91e;
}
.dass-result-red {
    border: 5px solid #e04600;
}
.dass-result-red h2 {
    color: #e04600;
}
.dass-result-text h2 {
    font-size: 40px;
    margin-bottom: 30px;
}
.dass-result-text p {
    font-size: 25px;
    font-family: "Mitr-Regular" !important;
    margin-bottom: 20px;
}

.dass-faces > div {
    padding: 0 40px;
}

.dass-result-item > div:last-child img,
.dass-faces > img {
    width: 150px;
    height: 150px;
}

@media screen and (max-width: 767px) {
    header {
        position: relative;
    }

    header .header_bar {
        max-width: 100vw;
        overflow: hidden;
        flex-direction: column;
    }

    header #logo {
        flex-direction: column;
        align-items: center;
        margin-bottom: 20px;
    }

    #header_part {
        height: 0px;
    }

    #footerz .rows {
        flex-direction: column;
    }

    #authscreen .formcontrol {
        flex-direction: column;
    }

    #authscreen .formcontrol label {
        text-align: center;
    }

    #authscreen .formcontrol input {
        width: 100%;
        margin-right: 0px;
    }

    .dass-description {
        padding: 50px;
        font-size: 20px;
    }

    .dass-question {
        flex-direction: column;
    }

    .dass-question > div:first-child {
        padding: 20px;
        font-size: 20px;
    }

    .dass-question > div:last-child {
        text-align: left;
        border-top: 8px solid white;
        border-left: none;
        gap: 0px;
        padding: 20px;
        width: 100%;
        justify-content: space-evenly;
    }

    .dass-question input[type="radio"] + label {
        width: 60px;
        height: 60px;
        line-height: 60px;
        font-size: 20px;
    }

    .dass-severity {
        flex-direction: column;
    }
    .dass-severity .dass-severity-item {
        width: 100%;
        flex: auto;
        box-sizing: border-box;
        padding: 40px 20px;
    }
    .dass-severity .dass-severity-item:not(:last-child) {
        border-right: none;
        border-bottom: 8px solid #fff;
    }
    #logout_btn {
        margin-left: 20px;
    }
    .dass-faces > img {
        width: 70px;
        height: 70px;
    }
}

.dass-report-detail-td {
    padding: 20px 30px;
}

.dass-result-item > div .dass-report-detail-td img {
    width: 40px;
    height: 40px;
    padding-right: 20px;
    margin-bottom: -7px;
}