@import url('https://fonts.cdnfonts.com/css/montserrat'); body {
    margin: 0;
    min-height: 100vh;
    height: 100%;
    font-family: 'Montserrat', sans-serif;
    display: flex;
    flex-direction: column;
}

.main {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #ecffef;
    /* #02451e */
    height: 100%;
    flex: 1 0 auto;
    justify-content: center;
}

.quiz_main_block {
    display: flex;
    flex-direction: row;
    background: #fff;
    border-radius: 8px;
    max-width: 860px;
    width: 100%;
    margin: auto;
}

.left_block {
    max-width: 45%;
    width: 100%;
    position: relative;
}

.left_img {
    width: 100%;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    height: 100%;
}

.right_block {
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 55%;
    width: 100%;
}

.title_quiz {
    margin: auto 0;
    text-align: center;
    font-size: 22px;
}

.quiz_answer_block {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.btnext {
    height: 55px;
    border: none;
    border-radius: 40px;
    padding: 15px;
    min-width: 300px;
    width: 100%;
    font-size: 16px;
    background: #60CD18;
    color: #000;
    font-weight: 600;
    margin: 10px 0;
    border: 1px solid #63f700;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
}

.quiz_section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 20px;
    min-height: 260px;
}

.question_container {
    text-align: center;
    width: 100%;
    height: 100%;
}

.question_number {
    display: flex;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #60CD18;
    color: white;
    font-size: 23px;
    font-weight: bold;
    line-height: 40px;
    margin: -38px auto 20px;
    justify-content: center;
    align-items: center;
}

.question_text {
    font-size: 19px;
    margin-bottom: 20px;
}

.answers {
    display: flex;
    flex-direction: row;
    gap: 10px;
    height: 100%;
    align-items: center;
}

.answer_btn {
    height: 50px;
    border: none;
    border-radius: 25px;
    padding: 10px;
    font-size: 18px;
    background: #60cd18;
    color: #000;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    transition: background 0.3s;
    width: 100%;
    font-weight: 600;
}

.answer_btn:hover {
    background: #489614;
}

.btnext:hover {
    background: #489614;
}

.checkmark {
    margin: auto;
    display: flex ;
}

.checkmark__icon {
    width: 100px;
    height: 100px;
}

.checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: #7ac142;
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    stroke-width: 3;
    stroke: #7ac142;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

.left_img_mob {
    display: none;
}

/* 
Header & Footer
*/
header {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    border-bottom: 1px solid #ccc;
    height: 88px;
}

.logo {
    padding-left: 3.5rem;
    font-weight: 500;
}

.logo:before {
    content: "";
    display: inline-block;
    background-image: url("data:image/svg+xml,%3Csvg class='seb-logo' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800'%3E%3Cpath d='M0 0h800v800H0z' fill='%2360cd18'/%3E%3Cpath d='M290.55 348.35l-25.87 19.32c-12.22-10.51-28-12.57-36.65-12.57s-18 2.51-19.37 8.82c-1.38 6.12 4.31 10.88 14.08 13.53 11.14 3 21.29 5.66 36.92 10.12 23.24 6.63 39.13 16.69 39.13 40 0 32.14-28.53 48.8-66.75 48.8s-64.26-19.91-72-29.2l27.35-20.45c19.21 16.75 32.57 19.11 43.74 19.11 12.81 0 24.79-2.75 26.33-10 1.25-5.82-3.58-10.45-14.49-13-12.35-2.85-22.77-5.14-34.4-8.2-31.52-8.27-40.41-26.6-40.41-43.06 0-22.67 21.1-45.95 59.69-45.95 39.57 0 62.74 22.67 62.74 22.67m164.9-20.4H340.12V472.1h117.45v-33.24h-76.94v-23.22h53v-31.8h-53v-23h74.83zM310.27 505.37h9V294.63h-9zm162.45 0h9V294.63h-9zm29.8-33.27h92.64c24.77 0 44.84-14.93 44.84-38.84 0-18.65-12.21-31-29.32-36.47a9.6 9.6 0 0 0-1.66-.21 10.36 10.36 0 0 0 1.66-.29c9.8-3.88 20.66-14.21 20.66-31.8 0-22.31-19.74-36.54-44.1-36.54h-84.72zm40.7-114.17h32.36c7.45 0 13.48 5.88 13.48 12.64s-6 12.66-13.48 12.66h-32.36zm39.58 82.13h-39.58v-26.29h39.58a13.15 13.15 0 0 1 0 26.28z' fill='%23fff'/%3E%3C/svg%3E");
    height: 5.5rem;
    width: 5.5rem;
    position: absolute;
    top: 0;
    left: 0;
}

.logo {
    width: 120px;
}

footer {
    flex: 0 0 auto;
}

.fa {
    margin-left: -85%;
}

.fa-size {
    font-size: 3em;
}

.col-ffff-6 {
    width: 100%;
}

.footer {
    overflow: hidden;
    position: relative;
}

.footer__bottom-bar {
    height: 104px;
    font-size: 1rem;
    line-height: 1.5rem;
    border-top: 1px solid #eeeeee;
    background-color: #fff;
}

.footer__container {
    display: flex;
    flex-direction: row;
    height: 100%;
    padding-left: 1rem;
    justify-content: left;
    align-items: center;
}

.footer__copyright {
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 1rem;
    margin-right: 1rem;
}

.footer__links {
    padding-right: 45px;
    display: flex;
    flex-wrap: wrap;
}

.footer__links a {
    cursor: pointer;
    text-decoration: none;
    font-weight: 500!important;
}

.footer__links a:hover {
    text-decoration: underline;
}

.footer__link {
    white-space: nowrap;
}

.footer__link:not(:last-child) {
    margin-right: 2rem;
    position: relative;
}

.footer__link:not(:last-child):after {
    content: "|";
    position: absolute;
    top: -2px;
    left: calc(100% + 14px);
}

.footer i.external-link:after {
    top: 3px;
}

.footer fa-icon {
    display: inline-flex;
    align-self: flex-end;
    font-size: 11px;
    margin-right: 5px;
}

.ng-star-inserted {
}

.external-link {
    position: relative;
    width: 1.1rem;
    height: 1rem;
    display: inline-block;
}

@media screen and (max-width: 780px) {
    .left_img_mob {
        display: block;
        width: 100%;
        height: 250px;
        object-fit: cover;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
    }

    .quiz_main_block {
        display: flex;
        flex-direction: column;
        width: 95%;
        margin: 20px 0;
    }

    .left_img {
        display: none;
    }

    .left_block {
        max-width: 100%;
    }

    .right_block {
        max-width: 100%;
        margin: 25px 0;
        padding: 0;
    }

    .title_quiz {
        font-size: 17px;
    }

    .btnext {
        height: 45px;
        padding: 0;
        margin-top: 35px;
    }

    .quiz_section {
        padding: 0;
    }

    .question_text {
        font-size: 17px;
    }

    .answer_btn {
        height: 45px;
        font-size: 14px;
    }

    .checkmark__icon {
        width: 80px;
        height: 80px;
    }

    .footer__container {
        flex-direction: column;
        align-items: start;
    }

    .footer {
        margin-bottom: 20px;
    }

    .footer__bottom-bar {
        height: 168px;
    }
}
