@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&family=Roboto:ital,wght@0,400;0,700;1,400&display=swap');

body
{
    font-family: 'Roboto';
}

.is-invalid, .has-error
{
    border-color: #dc3545;
}

.invalid-feedback
{
    color: #dc3545;
}

.error-help-block
{
    color: #dc3545 !important;
}

.swal-overlay--show-modal, .swal-modal
{
    animation: none !important;
}

.swal-overlay
{
    transition: none !important;
}

.swal-icon
{
    margin-bottom: 10px;
}

.swal-title
{
    font-size: 10pt !important;
}

.swal-button
{
    font-size:        10pt !important;
    background-color: #343A40 !important;
}

#header
{
    height:     100px;
    width:      100%;
    background: rgba(52, 52, 52, 0.9);
}

#menu_content
{
    text-align: left;
}

.nav-item
{
    font-family:  'Roboto';
    font-style:   normal;
    font-weight:  bold;
    font-size:    22px;
    line-height:  26px;
    color:        #FFFFFF;
    padding-left: 1em;
}

.nav-item a
{
    color: #ffffff;
}

.nav-item a:hover
{
    color: #a8a6a6;
}

#main_content
{
    font-family: 'Roboto';
}

.navbar-toggle .icon-bar
{
    background-color: #fff;
}

#header_navbar
{
    padding: 0px !important;
}

body
{
    background-color: #FFFCF6;
}

/* user profile navbar - start */
.navbar-user {
    position: relative;
    z-index: 1;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.6;
    color: #212529;
    text-align: left;
    margin-top: -5px;
}
.profile-pill {
    background: #848484;
    max-height: 44px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    padding: 1px 6px;
    margin-top: 9px;
    position: relative;
    z-index: 1;
}
.profile-pill .user {
    max-width: 190px;
    overflow: hidden;
    white-space: nowrap;
    min-width: 160px;
}
.profile-pill .user span {
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    text-transform: capitalize;
    color: #FFFFFF;

}
.profile-pill a {
    color: #1C1C1C;
    text-decoration: none;
}
.profile-pill img {
    width: 35px;
    border-radius: 50%;
    margin-right: 8px;
    border: 3px solid #FFFFFF;
    margin-top: -3px;
}
.profile-pill .caret {
    padding: 10px;
    transition: 0.3s;
    color: #FFFFFF;
}
.profile-pill i {
    padding: 14px 9px;
    color: white;
}
.navbar-user ul {
    position: absolute;
    background: #fff;
    border: 1px solid #E4E3E3;
    border-radius: 10px;
    box-shadow: 1px 0px 15px rgba(72, 39, 0, 0.2);
    width: 100%;
    z-index: 0;
    list-style: none;
    padding: 20px 0 0;
    margin: -20px 0 0;
    font-size: 14px;
    text-align: left;
    overflow: hidden;
    visibility: hidden;
    max-height: 0;
    transition: all 0.3s ease-out;
}
.navbar-user ul.open {
    visibility: visible;
    box-shadow: 0px 0px 24px rgb(0 0 0 / 24%);
    max-height: 400px;
    margin-top: 1px;
}
.navbar-user ul li a {
    color: #212529;
    font-weight: 400;
    padding: 12px 10px;
    display: block;
    font-size: 13px;
}
.navbar-user ul li a:hover {
    text-decoration: none;
}
.navbar-user img {
    width: 35px;
    border-radius: 50%;
    margin-right: 8px;
    border: 3px solid #FFFFFF;
    margin-top: -3px;
}
/* user profile navbar - end */

/* user profile page - start */
div#profileLeftSide {
    background: #f5f4fa;
    text-align: center;
}
div#account {
    font-family: 'Oswald', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 35px;
    color: #000000;
    padding-top: 60px;
}
div#profileLeftSide img#profile_avatar {
    width: 60%;
    border: 10px solid #ACB4FF;
    border-radius: 50%;
}
div#profileLeftSide img#group {
    width: 100%;
    margin-top: 550px;
    padding-bottom: 50px;
}
@media (max-width: 767px) {
    div#profileLeftSide img#group {
        margin-top: 60px;
    }
}
div#profileRightSide h1 {
    font-family: 'Oswald', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 48px;
    line-height: 71px;
    color: #000000;
    padding-top: 40px;
}
div#profileRightSide div.hr {
    width: 85px;
    height: 0;
    margin: 15px 0;
    padding: 0;
    background: #EC5F6B;
    border: 4px solid #EC5F6B;
    border-radius: 5px;
}
div#profileRightSide label {
    font-family: 'Roboto', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 35px;
    color: #000000;
}
div#profileRightSide .input-icon {
    text-align: right;
    position: relative;
    bottom: 31px;
    right: 12px;
    opacity: 0.5;
}
div#profileRightSide input:focus {
    border-color: lightgrey;
    box-shadow: 0 0 0 0.2rem rgb(169 169 169 / 25%);
}
div#profileRightSide i.input-icon {
    position: absolute;
    top: 53px;
}
.submit-button {
    background: #ACB4FF;
    color: #000000;
    border-radius: 28px;
    border: none;
    font-family: 'Roboto', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 19px;
    line-height: 35px;
    width: 100%;
}
.profile_hr {
    border: 1px solid rgba(0, 0, 0, 0.2);
}
div#profileRightSide label#for_consent {
    font-size: 14px;
    line-height: 20px;
}
input#consent {
    margin-right: 5px;
}
button.red-submit {
    background: #EC5F6B;
}
a.yellow-button {
    background: #FACF42;
}
#profileRightSide table.table {
    width: 92%;
}
.no_consultation {
    opacity: 0.6;
}
/* user profile page - end */

#headline
{
    margin-bottom: 1em;
}

#headline_greeting
{
    padding-top: 2em;
    font-family: Roboto;
    font-style:  normal;
    font-weight: normal;
    font-size:   24px;
    line-height: 28px;
    color:       #000000;
}

#headline_title
{
    font-family: Oswald;
    font-style:  normal;
    font-weight: normal;
    font-size:   35px;
    line-height: 52px;
    color:       #000000;
}

#dashboard_bulb
{
    position: relative;
    top: -50px;
}

.dictionary_label
{
    font-family:  Roboto;
    font-style:   normal;
    font-weight:  500;
    font-size:    14px;
    line-height:  16px;
    color:        #000000;
    padding-left: 8px;
}

.dictionary_container
{
    background:     #CAF0FE;
    border-radius:  33px;
    padding-top:    4px;
    padding-bottom: 4px;
    padding-left:   4px;
    text-align:     left;
    margin-top:     3em;
    cursor:         pointer;
    min-width:      200px;
    max-width:      200px;
}

.dictionary_container:hover
{
    background-color: #80D8F8;
}

#lessons_container
{
    margin-top: 2em;
}


.logout_modal
{
    background:    #F7F7F7;
    border-radius: 20px !important;
}

#logout_question
{
    font-family: Roboto;
    font-style:  normal;
    font-weight: normal;
    font-size:   16px;
    line-height: 19px;
    text-align:  center;
    color:       #000000;
}

.logout_cancel
{
    cursor:      pointer;
    font-family: Roboto;
    font-style:  normal;
    font-weight: 500;
    font-size:   12px;
    line-height: 14px;
    color:       #000000;
}

.yellow_button
{
    background:    #FACF42;
    border-radius: 40px;
}

.yellow_button:hover
{
    background:    #FFC105;
}

#footer_container
{
    background: #494948;
    height:     60px;
    margin-top: 1em;
}

#footer_text
{
    font-family: Roboto;
    font-style:  normal;
    font-weight: normal;
    font-size:   16px;
    line-height: 18px;
    color:       #FFFFFF;
    padding-top: 20px;
}


/* Cards
-----------------------------------------------------------------*/

.lesson-card-row .card {
    height: 100%;
    min-height: 280px;
    background-color: #eabe7c;
    border: 0;
    border-left:16px solid #848484;
    border-radius: 0 10px 10px 0;
}

.lesson-card-row .col {
    margin-bottom: 2rem
}


.lesson-card-row .card:before,
.lesson-card-row .card:after {
    content: "";
    position: absolute;
    right: 8px;
    width: 34px;
    height: 34px;
    border-color: rgba(0, 0, 0, 0.1) !important;
    border-right: 6px solid;
}

.lesson-card-row .card:before {
    top: 8px;
    border-top-right-radius: 7px;
    border-top: 6px solid;
}

.lesson-card-row .card:after {
    bottom: 8px;
    border-bottom-right-radius: 7px;
    border-bottom: 6px solid;
}

/* Card bookmark button*/
.lesson-card-row .card .add_to_favourites_button {
    position: absolute;
    left: 4px;
    bottom: -23px;
    width: 20px;
    height: 23px;
    background-color: #e5e5e5;
}

.lesson-card-row .card .add_to_favourites_button:hover,
.lesson-card-row .card.bookmarked .add_to_favourites_button {
    background-color: #14bbef;
}

.lesson-card-row .card .add_to_favourites_button:after {
    display: inline-block;
    margin-left: 0;
    margin-top: 13px;
    vertical-align: .255em;
    content: "";
    border-top: 0;
    border-right: 10px solid transparent;
    border-bottom: 10px solid white;
    border-left: 10px solid transparent;
}

/* Card states */
/*.lesson-card-row .card.bookmarked {background-color:#ffe89c;}*/
.lesson-card-row .card.finished {background-color:#facf42;}
.lesson-card-row .card.opened {background-color:#ffe89c;}
.lesson-card-row .card:hover {box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;}

/* Card bind */
.bind-wrap {
    position: absolute;
    width: 21px;
    height: 100%;
    top: 0;
    left: -21px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.bind-wrap span {
    display: block;
    width: 21px;
    height: 20px;
    background-color: #626262;
    border-top-left-radius: 20% 45%;
    border-bottom-left-radius: 20% 45%;
}



/* Test cards (Pie charts)
   -----------------------------------------------------------------*/


.lesson-card-row .card .test-pie-picto {
    position: absolute;
    top:6px;
    left:6px;
    width: 142px;
    height: 142px;
    background-color: #fffcf6;
    border-radius:50%;
}

/* Test card pictos */
.lesson-card-row .card .test-pie-picto .icon {
    display: inline-block;
    width:100px;
    height: 100px;
    background-image: url("../images/public/lessons/test_bulb_default.png");
    background-position: center;
    background-repeat: no-repeat;
    margin:21px;
}

.lesson-card-row .card.low .test-pie-picto .icon {
    background-image: url("../images/public/lessons/test_bulb_poor.png");
}
.lesson-card-row .card.medium .test-pie-picto .icon {
    background-image: url("../images/public/lessons/test_bulb_intermediate.png");
}
.lesson-card-row .card.high .test-pie-picto .icon {
    background-image: url("../images/public/lessons/test_bulb_good.png");
}

/* Test card ribbons */
.lesson-card-row .card .test-ribbon {
    position: relative;
    width:154px;
    height: 32px;
    margin:10px auto;
}
.lesson-card-row .card .r-body {
    position: relative;
    width: 110px;
    height: 29px;
    line-height: 27px;
    margin:0 auto;
    background-color: #e4a55b;
    text-align: center;
    color:#848484;
}
.lesson-card-row .card .r-body:before,
.lesson-card-row .card .r-body:after {
    content:"";
    position: absolute;
    width:5px;
    height:3px;
    bottom:-3px;
}
.lesson-card-row .card .r-body:before {
    left:0;
    border-top: 3px solid #ad8b59;
    border-right: 0;
    border-bottom: 0;
    border-left: 6px solid transparent;
}
.lesson-card-row .card .r-body:after {
    right:0;
    border-top: 3px solid #ad8b59;
    border-left: 0;
    border-bottom: 0;
    border-right: 6px solid transparent;
}
.lesson-card-row .card .r-tag {
    position: absolute;
    top:3px;
    width: 28px;
    height: 29px;
    background-color:#cca366;
}
.lesson-card-row .card .r-tag.tag-left {
    left:0;
}
.lesson-card-row .card .r-tag.tag-right {
    right:0;
}
.lesson-card-row .card .r-tag:after {
    display: inline-block;
    margin-left:0;
    margin-top:0;
    vertical-align: .255em;
    content: "";
    border-top: 14px solid transparent;
    border-right: 0;
    border-bottom: 14px solid transparent;
    border-left: 14px solid #eabe7c;
}
.lesson-card-row .card .r-tag.tag-right:after {
    margin-left:14px;
    border-left: 0;
    border-right:14px solid #eabe7c;
}

/* Test card ribbons color states */
.lesson-card-row .card.opened .r-body {
    background-color: #facf42;
}
.lesson-card-row .card.opened .r-body:before,
.lesson-card-row .card.opened .r-body:after {
    border-top-color: #deb634;
}
.lesson-card-row .card.opened .r-tag {
    background-color: #eec53f;
}
.lesson-card-row .card.opened .r-tag.tag-left:after {
    border-left-color:#ffe89c;
}
.lesson-card-row .card.opened .r-tag.tag-right:after {
    border-right-color:#ffe89c;
}
.lesson-card-row .card.low .r-body {
    background-color: #ec5f6b;
    color:black;
}
.lesson-card-row .card.low .r-body:before,
.lesson-card-row .card.low .r-body:after {
    border-top-color: #ba424c;
}
.lesson-card-row .card.medium .r-body:before,
.lesson-card-row .card.medium .r-body:after {
    border-top-color: #c97c36;
}
.lesson-card-row .card.high .r-body:before,
.lesson-card-row .card.high .r-body:after {
    border-top-color: #76bf54;
}
.lesson-card-row .card.medium .r-body {
    background-color: #fa9a42;
    color:black;
}
.lesson-card-row .card.high .r-body {
    background-color: #a6e887;
    color:black;
}
.lesson-card-row .card.low .r-tag {
    background-color: #de525e;
}
.lesson-card-row .card.medium .r-tag {
    background-color: #eb9240;
}
.lesson-card-row .card.high .r-tag {
    background-color: #89d466;
}
.lesson-card-row .card.finished .r-tag.tag-left:after {
    border-left-color:#facf42;
}
.lesson-card-row .card.finished .r-tag.tag-right:after {
    border-right-color:#facf42;
}


/* Test cards - Pie charts */
.pie-container {
    width:154px;
    margin:0 auto;
    background-color: rgba(0,0,0,0.1);
    border-radius:50%;
    position: relative;
}

.card.opened .pie-container {
    background-color: #f2d57d;
}
.card.low .pie-container,
.card.medium .pie-container,
.card.high .pie-container {
    background-color: #ffecae;
}

.pie-svg {
    background: transparent;
    border-radius:50%;
    transform:rotate(-90deg);
}

/* Pie charts color states */
.card.low .pie-svg circle {
    fill:none;
    stroke: #ec5f6b;
    stroke-width: 32;
    stroke-dasharray: 34 100;
}

.card.medium .pie-svg circle {
    fill:none;
    stroke: #fa9a42;
    stroke-width: 32;
    stroke-dasharray: 72 100;
}

.card.high .pie-svg circle {
    fill:none;
    stroke: #89d466;
    stroke-width: 32;
    stroke-dasharray: 85 100;
}



/* Timeline
-----------------------------------------------------------------*/
#posts,
.postcontent{ position: relative;}

.postcontent .post-timeline {
    padding-left: 0;
    margin-left: 100px;
    margin-right: 0 !important;
    overflow: visible;
}

.entry {
    position: relative;
    margin-bottom: 75px;
}

/* Blog - Timeline
-----------------------------------------------------------------*/

.entry-timeline {
    /*display: none;*/
}
.entry-meta {}
.entry-meta ul {margin:0;padding:0;height:50px;line-height: 50px;list-style-type: none}
.entry-meta ul li {display: inline-block}
.entry-title {margin-bottom: 2rem}

@media (min-width: 768px) {

    .timeline-border {
        position: absolute;
        top: 0;
        left: 50%;
        width: 0;
        border-left: 1px solid #CCC;
        height: 100%;
        transform: translateX(-50%);
    }

    .postcontent .post-timeline::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        width: 0;
        border-left: 1px solid #CCC;
        height: 100%;
    }

    .post-timeline .entry-timeline {
        display: none;
        position: absolute;
        border: 2px solid #CCC;
        background-color: #FFF;
        padding-top: 0;
        text-indent: -9999px;
        top: 40px;
        left: auto;
        right: -6px;
        width: 13px;
        height: 13px;
        border-radius: 50%;
        font-size: 1.25rem;
        font-weight: 400;
        color: black;
        text-align: center;
        line-height: 45px;
        -webkit-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
    }

    .post-timeline .alt .entry-timeline {
        right: auto;
        left: -6px;
    }

    .post-timeline .entry-timeline span {
        display: block;
        margin-top: 3px;
        font-size: 13px;
        font-weight: normal;
    }

}

@media (min-width: 768px) {

    /* Blog - Timeline - Sidebar
    -----------------------------------------------------------------*/

    .postcontent .post-timeline::before {
        left: -68px;
        margin-left: 0;
    }

    .postcontent .post-timeline {
        padding-left: 0;
        margin-left: 100px;
        margin-right: 0 !important;
        overflow: visible;
    }

    .postcontent .post-timeline .entry {
        width: 100% !important;
        padding: 0 !important;
    }

    .postcontent .post-timeline .entry-timeline {
        display: block;
        border: 1px solid #747474;
        background-color: #e8e8e8;
        text-indent: 0;
        top: 0;
        left: -92px;
        right: auto;
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }

    .postcontent .post-timeline .entry-timeline.done,
    .postcontent .post-timeline .entry-timeline.time-line-check.done {
        background-color: #bee3be;
        border-color: #bee3be;
        cursor: default;
    }

    .postcontent .post-timeline .entry-timeline.time-line-check {
        top:auto;
        bottom:0;
        /*padding:12px 0*/
    }

    .postcontent .post-timeline .entry-timeline.time-line-check .icon {
        display: inline-block;
        width:100%;
        height:100%;
        cursor: pointer;
    }
}

.lesson-card-row .card
{
    cursor: pointer;
}

.fc-event{
    cursor: pointer;
}

.lesson_ribbon_container
{
    margin-top: 2em;
    margin-bottom: 1em;
    text-align: center;
}

.ribbon
{
    width: 218px;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 22px;
    line-height: 26px;
    color: #000000;
    background-image: url('../images/public/lessons/ribbon.svg');
    background-repeat: no-repeat;
    background-position-x: center;
    min-height: 44px;
    padding-top: 6px;
}

.lesson_title
{
    font-family: Oswald;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 27px;
    text-decoration-line: underline;
    color: #000000;
}

.lesson_divider
{
    position: relative;
    top: -15px;
}

.lesson_lead
{
    font-family: Roboto;
    font-style: normal;
    font-weight: 300;
    font-size: 14px;
    line-height: 22px;
    color: #000000;
    margin-top: 3em;
}

.lesson_navigator_container a
{
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 22px;
    line-height: 26px;
    color: #000000;
}

.lesson_navigator_container a:hover
{
    text-decoration: none;
}

.lesson_navigator_container
{
    padding-top: 0.5em;
}

.lesson_footer_button
{
    background: #FACF42;
    border-radius: 28px;
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 20px;
    line-height: 35px;
    text-align: center;
    color: #000000;
    padding-left: 30px;
    padding-right: 30px;
}

.lesson_footer_button:hover
{
    background: #FFC105;
}

.navigator_link .navigator_arrow_active
{
    display: none;
}

.navigator_link:hover .navigator_arrow,
.navigator_link:active .navigator_arrow{
    display: none;
}
.navigator_link:hover .navigator_arrow_active,
.navigator_link:active .navigator_arrow_active{
    display: inline;
}

.lesson_footer_link
{
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 35px;
    color: #000000;
}

.lesson_footer_link:hover
{
    color: #000000;
}

.lesson_footer_container
{
    margin-top: 2em;
}

.lesson_header_container
{
    margin-bottom: 2em;
}

.lesson_end_divider
{
    color: rgba(0, 0, 0, 0.5)
}

.lesson_content_container
{
    /*margin-bottom: 1em;*/
}

.lesson_task_title
{
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 35px;
    color: #000000;
}

.video_player
{
    width: 100%;
    background: #EEE1CE;
    box-shadow: 0px 0px 25px 3px rgba(0, 0, 0, 0.07);
    text-align: center;
    padding: 30px;
    border-radius: 30px;
}

.video_player_container
{
    background: #EEE1CE;
    box-shadow: 0px 0px 25px 3px rgba(0, 0, 0, 0.07);
    text-align: center;
    padding: 30px;
    border-radius: 30px;
}

.hover_checkmark
{
    display: none;
}

.time-line-check:hover .hover_checkmark {
    display: inline-block;
}

.display
{
    display: inline-block;
}

.lesson_modal
{
    background: #FFFCF6;
    border: 1px solid #D5D5D5;
    box-sizing: border-box;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 30px;
}

.small_yellow_box
{
    background: #FFCF3C;
    border: 1px solid #E4E3E3;
    box-sizing: border-box;
    border-radius: 10px;
    width: 67px;
    height: 65px;
    font-family: Roboto;
    font-size: 30px;
    line-height: 35px;
    text-align: center;
    color: #000000;
    cursor: pointer;
    margin: 14px;
    outline: none;
}

.small_yellow_box:hover, .small_yellow_box:active
{
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    outline: none;
}

.small_yellow_box.visited
{
    background: #DCDCDC;
}

.yellow_box
{
    background: #FFCF3C;
    border: 1px solid #E4E3E3;
    box-sizing: border-box;
    border-radius: 10px;
    font-family: Roboto;
    font-size: 30px;
    line-height: 35px;
    text-align: center;
    color: #000000;
    cursor: pointer;
    margin: 14px;
    outline: none;
    padding: 0.5em;
    width: 100%;
}

.yellow_box:hover, .yellow_box:active
{
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    outline: none;
}


.large_yellow_box
{
    width: 118px;
    height: 118px;
    background: #FFCF3C;
    border-radius: 8px;
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 60px;
    line-height: 35px;
    color: #000000;
}

.yellow_box_modal
{
    min-width: 118px;
    min-height: 118px;
    background: #FFCF3C;
    border-radius: 8px;
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 60px;
    line-height: 35px;
    color: #000000;
    padding-left: 0.5em;
    padding-right: 0.5em;
}

.lesson_modal_content
{
    margin-top: 2em;
    text-align: justify;
}

.lesson_modal_container
{
    padding: 40px;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 30px;
    color: #000000;
}

.modal_subtitle
{
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 35px;
    color: #000000;
    margin-bottom: 2em;
}

.video_player_modal
{
    width: 100%;
    background: #EEE1CE;
    box-shadow: 0px 0px 25px 3px rgba(0, 0, 0, 0.07);
    border-radius: 15px;
    text-align: center;
    padding: 15px;
}

video {
    object-fit: cover;
}

.sound_sample.active
{
    border: 2px solid #FFCF3C;
    box-sizing: border-box;
    border-radius: 10px;
    padding-left: 6px;
    padding-right: 6px;
    cursor: pointer;
}

.sound_sample.active:hover
{
    background: #FFF3D1;
    border: 2px solid #FFCF3C;
}

.white_rounded_container
{
    width: 100%;
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
    border-radius: 30px;
    padding-top: 15px;
    padding-bottom: 25px;
    padding-left: 40px;
    padding-right: 40px;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 28px;
    color: #000000;
    margin-top: 2em;
    margin-bottom: 2em;
}

.white_rounded_container .title
{
    font-style: normal;
    font-weight: bold;
    font-size: 24px;
    line-height: 29px;
    color: #000000;
    margin-bottom: 1em;
}

.corner_yellow_button
{
    position: relative;
    background: #FFCF3C;
    border-radius: 0px 29px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 18px;
    padding-right: 18px;
    border: none;
    cursor: pointer;
    float: right;
    top: -15px;
    right: -15px;
    font-family: Oswald;
    font-style: normal;
    font-weight: normal;
    font-size: 22px;
    line-height: 33px;
    color: #000000;
}

.download_button
{
    background: #FFCF3C;
    border-radius: 24px;
    border: none;
    float: right;
    cursor: pointer;
    padding: 10px;
    font-style: normal;
    font-weight: bold;
    font-size: 24px;
    line-height: 29px;
    color: #000000;
    margin-left: 4px;
    margin-right: 4px;
}

.download_button:hover
{
    background: #FFC105;
}

.corner_yellow_button:hover, .vocabulary_corner_yellow_button:hover
{
    background: #FFC105;
}

.lesson_page_title
{
    font-family: Oswald;
    font-style: normal;
    font-weight: normal;
    font-size: 48px;
    line-height: 56px;
    text-transform: uppercase;
    font-feature-settings: 'liga' off;
    color: #111111;
}

.cursor_pointer
{
    cursor: pointer !important;
}

.cursor_default
{
    cursor: default !important;
}

.vocabulary_word_cards_container
{
    display: flex;
    justify-content: center;
}

.vocabulary_word_card
{
    background: #FFFFFF;
    border: 1px solid #E4E3E3;
    box-sizing: border-box;
    box-shadow: 1px 0px 15px rgba(72, 39, 0, 0.2);
    border-radius: 10px;
    margin: 1em;
    min-height: 70px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
}

.vocabulary_word_card:hover
{
    background: #CAF0FE;
}

.vocabulary_word_card.added
{
    background: #CAF0FE;
}

.vocabulary_word_card_text
{
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 30px;
    color: #000000;
}

.spinner_container {
    display: none;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255,255,255,0.8) url(https://media.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.gif) center center no-repeat;
    z-index: 1000;
}

.vocabulary_add_word_form_container
{
    background: #CAF0FE;
    border-radius: 30px;
}

.vocabulary_add_word_form_content
{
    padding-left: 5em;
    padding-right: 5em;
    padding-top: 3em;
    padding-bottom: 3em;
}

.vocabulary_add_word_title
{
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 28px;
    color: #000000;
    margin-bottom: 1em;
}

.add_word_input
{
    background: #FFFFFF;
    border: 1px solid #E4E3E3;
    box-sizing: border-box;
    box-shadow: 1px 0px 15px rgba(72, 39, 0, 0.2);
    border-radius: 10px;
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    color: #000000;
    height: 70px;
}

.vocabulary_add_word_form_input_container
{
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 35px;
    color: #000000;
}

#btn_add_word
{
    background: #80D8F8;
    border-radius: 28px;
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 20px;
    line-height: 35px;
    text-align: center;
    color: #000000;
    height: 70px;
}

#btn_add_word:hover
{
    background: #a0aec0;
}

.vocabulary_box_body
{
    height: 700px;
    background: #FFFFFF;
    border: 1px solid #E4E3E3;
    box-sizing: border-box;
    box-shadow: 1px 0px 15px rgba(72, 39, 0, 0.2);
    border-radius: 0px 0px 30px 30px;
    overflow-y: auto;
    /*padding-top: 2em;*/
}

.vocabulary_card_container
{
    width: 100%;
    max-height: 600px;
    overflow-y: auto;
}

.vocabulary_content
{
    overflow-y: auto !important;
}

.vocabulary_box_header
{
    min-height: 150px;
    background: #F3F3F3;
    border: 1px solid #E4E3E3;
    box-sizing: border-box;
    border-radius: 30px 30px 0px 0px;
    padding: 2em;
    box-shadow: 1px 0px 15px rgba(72, 39, 0, 0.2);
}

.vocabulary_box_title
{
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 26px;
    line-height: 35px;
    color: #000000;
}

.vocabulary_box
{
    margin-top: 2em;
    margin-bottom: 3em;
}

.vocabulary_corner_yellow_button
{
    position: relative;
    background: #FFCF3C;
    border-radius: 0px 29px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 18px;
    padding-right: 18px;
    border: none;
    cursor: pointer;
    float: right;
    font-family: Oswald;
    font-style: normal;
    font-weight: normal;
    font-size: 22px;
    line-height: 33px;
    color: #000000;
}

.vocabulary_corner_yellow_button:hover
{
    background-color: #FFC105;
}

.vocabulary_delete_cards_icon
{
    cursor: pointer;
}

.no_pointer
{
    cursor: default !important;
}

.card_delete_icon, .card_delete_icon_a
{
    position: absolute;
    cursor: pointer;
    float: right;
    top: -15px;
    right: -15px;
}

.vocabulary_delete_cards_icon_a{
    display: none;
}
.vocabulary_delete_cards_icons:hover .vocabulary_delete_cards_icon_a,
.vocabulary_delete_cards_icons:active .vocabulary_delete_cards_icon_a{
    display: inline;
}

.vocabulary_delete_cards_icons:hover .vocabulary_delete_cards_icon,
.vocabulary_delete_cards_icons:active .vocabulary_delete_cards_icon{
    display: none;
}

.vocabulary_delete_cards_done_icon_a{
    display: none;
}
.vocabulary_delete_cards_icons:hover .vocabulary_delete_cards_done_icon_a,
.vocabulary_delete_cards_icons:active .vocabulary_delete_cards_done_icon_a{
    display: inline;
}

.vocabulary_delete_cards_icons:hover .vocabulary_delete_cards_done_icon,
.vocabulary_delete_cards_icons:active .vocabulary_delete_cards_done_icon{
    display: none;
}

.card_delete_icon_a{
    display: none;
}
.card_delete_icons:hover .card_delete_icon_a,
.card_delete_icons:active .card_delete_icon_a{
    display: inline;
}

.card_delete_icons:hover .card_delete_icon,
.card_delete_icons:active .card_delete_icon{
    display: none;
}

.card_container_header_dark
{
    background: #C4C4C4;
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 35px;
    text-align: center;
    color: #000000;
}

.card_container_header_light
{
    background: #DEDEDE;
    height: 40px;
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 35px;
    text-align: center;
    color: #000000;
}

.card_container_downwards
{
    border-right: 1px dashed black;
    min-height: 600px;
}

.vocabulary_left_column
{
    border-right: 1px solid black;
    min-height: 600px;
}

.vocabulary_right_column
{
    border-left: 1px solid black;
    min-height: 600px;
}

.vocabulary_column
{
    background-color: #C4C4C4;
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 35px;
    text-align: center;
    color: #000000;
}

.vocabulary_column_light
{
    background-color: #DEDEDE;
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 35px;
    text-align: center;
    color: #000000;
}

.vocabulary_columns
{
    min-height: 600px;
}

.droptarget_active
{
    background-color: #FFFCF6 !important;
}

.droptarget_hover
{
    border: 1px dashed grey;
}

.white_rounded_text_container
{
    width: 100%;
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
    border-radius: 30px;
    padding-top: 15px;
    padding-bottom: 25px;
    padding-left: 40px;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 22px;
    line-height: 40px;
    color: #000000;    margin-bottom: 2em;
}

.purple_rounded_text_container
{
    width: 100%;
    background: rgba(238, 225, 206, 0.4);
    border: 1px solid #E4E3E3;
    box-sizing: border-box;
    border-radius: 30px;
    padding-top: 15px;
    padding-bottom: 25px;
    padding-left: 40px;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 22px;
    line-height: 40px;
    color: #000000;
    margin-bottom: 2em;
}

.sound_icon_active{
    display: none;
}
.sound_icon_container:hover .sound_icon_active,
.sound_icon_container:active .sound_icon_active{
    display: inline;
}

.sound_icon_container:hover .sound_icon,
.sound_icon_container:active .sound_icon{
    display: none;
}

.sound_icon_container
{
    cursor: pointer;
    position: absolute;
    right: 40px;
    z-index: 1000;
}

.sound_icon_container_flag
{
    right: 15px !important;
    top: 15px !important;
}

.purple_rounded_container
{
    width: 100%;
    background: #EEE1CE;
    border-radius: 30px;
    padding-top: 15px;
    padding-bottom: 25px;
    padding-left: 40px;
    padding-right: 40px;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 28px;
    color: #000000;
}

.purple_rounded_container .title
{
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 24px;
    line-height: 28px;
    color: #000000;
    margin-bottom: 1em;
}

.row-flex {
    display: flex;
    flex-wrap: wrap;
}

.full_height
{
    height: 100%;
}

.margin_bottom
{
    margin-bottom: 2em;
}

.margin_bottom_small
{
    margin-bottom: 0.5em;
}

/* 5. lesson - start */
.subject-color {
    color: #FF8A00;
}
.predicate-color {
    color: #38BAC2;
}
.locator-color {
    color: #186FF1;
}
.determinant-color {
    color: #792BB6;
}
.object-color {
    color: #F963B4;
}
.time-determining-color {
    color: #792BB6;
}
.dative-color {
    color: #BBBBBB;
}
.word-border {
    box-sizing: border-box;
    border-radius: 10px;
    cursor: pointer;
    padding: 2px;
}
.grey-border {
    background: rgba(238, 225, 206, 0.7) !important;
    border: 2px solid rgba(0, 0, 0, 0.3) !important;
}
.white-border {
    background: #FFFFFF !important;
    border: 2px solid rgba(0, 0, 0, 0.3) !important;
}
.subject-border {
    background: rgba(255, 138, 0, 0.3);
    border: 2px solid #FF8A00;
}
.predicate-border {
    background: rgba(56, 186, 194, 0.3);
    border: 2px solid #38BAC2;
}
.locator-border {
    background: rgba(24, 111, 241, 0.3);
    border: 2px solid #186FF1;
}
.dative-border {
    background: rgba(187, 187, 187, 0.3);
    border: 2px solid #BBBBBB;
}
.time-determining-border {
    background: rgba(121, 43, 182, 0.3);
    border: 2px solid #792BB6;
}
.object-border {
    background: rgba(249, 99, 180, 0.3);
    border: 2px solid #F963B4;
}
.bottom_border_input,
.bottom_border_input:focus {
    text-align: center;
    width: 100%;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
    outline: none;
}
.answer_box {
    background: #EEE1CE;
    border-radius: 15px;
    padding: 10px;
}
.success_repeat_answer {
    color: #4DAB2B;
    cursor: not-allowed;
}
.unsuccess_repeat_answer {
    color: #FF0202;
}
.drag_sort_ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.drag_sort_li {
    margin: 5px;
    padding: 5px;
    width: 150px;
}
.header_li {
    background: #EEE1CE !important;
    box-shadow: none !important;
}
.sortable {
    background: #FFFFFF;
    border: 1px solid #E4E3E3;
    box-sizing: border-box;
    box-shadow: 1px 0px 15px rgb(72 39 0 / 20%);
    border-radius: 30px;
    margin-top: 20px !important;
    min-height: 250px;
    width: 188px;
}
.ul_header {
    background: #EEE1CE;
    border-radius: 30px;
    padding: 12px;
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    text-align: center;
}
#task_4 .ul_header {
    font-size: 12px;
    padding: 9px;
}
#sample_box {
    background: #E5D3B8;
    border-radius: 30px;
    margin-right: 10px;
}
#sample_text_1 {
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 35px;
    text-decoration-line: underline;
    color: #000000;
    padding-top: 10px;
    margin-bottom: 3px;
}
#sample_text_2 {
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 20px;
    line-height: 35px;
    color: #000000;
    margin-bottom: 2px;
}
#sample_text_3 {
    background: #FFFFFF;
    border-radius: 10px;
    padding: 10px 30px;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 35px;
    color: #000000;
}
#task_3_id_1, #task_4_id_1, #task_4_sample_id_1 {
    border: 5px solid #FF8A00;
}
#task_3_id_2, #task_4_id_2, #task_4_sample_id_6 {
    border: 5px solid #186FF1;
}
#task_3_id_3 {
    border: 5px solid #792BB6;
    filter: drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.12));
}
#task_3_id_4 {
    border: 5px solid #38BAC2;
    filter: drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.12));
}
#task_4_id_3, #task_4_sample_id_3 {
    border: 5px solid #F963B4;
}
#task_4_id_4, #task_4_sample_id_2 {
    border: 5px solid #38BAC2;
}
#task_4_id_5, #task_4_sample_id_5 {
    border: 5px solid #792BB6;
}
#task_4_id_6, #task_4_sample_id_4 {
    border: 5px solid #BBBBBB;
}
.answerbox_without_header {
    border-radius: 10px !important;
    max-width: 20% !important;
    min-height: 100px !important;
}
#task_3_askbox {
    background: #E6D3B8;
    border-radius: 30px;
    padding: 20px 0;
    margin-bottom: 18px;
}
#task_4_askbox {
    background: #E6D3B8;
    border-radius: 30px;
    padding: 20px 50px;
    margin-bottom: 18px;
}
#task_4_askbox .lesson_draggable_word {
    cursor: auto;
}
.normal_weigth {
    font-weight: normal;
}
.task_4_draggable_ul {
    padding: 0;
}
.task_4_draggable_ul li {
    display: inline;
}
#task_4 .sortable {
    width: 160px;
}
#task_2 .lesson_droppable_box_with_translated_word {
    max-width: 22% !important;
}
.video_player.narrow_player {
    width: 620px;
}
#task_1 .drag_sort_ul,
#task_4 .sortable {
    margin: auto;
}
#task_2 .header .translated_word {
    margin: 10px 0;
}
.lesson_5_input_box .input_tooltip {
    width: 100%;
    text-align: center;
    bottom: 35px;
    left: 0;
    padding: 0;
}
#lesson_5 #task_4 .task_4_draggable_li.ui-draggable.ui-draggable-handle {
    min-width: 130px;
}
/* 5. lesson - end */

/* 6. lesson - start */
#lesson_6_task_1 .illustration_container img,
#lesson_6_task_4 .illustration_container img,
#lesson_6_task_2 .lesson_droppable_box_with_translated_word img,
#lesson_6_task_3 .image_box img,
#lesson_6_task_exercise .image_box img {
    width: 100%;
}
.lesson_6_task_2_header {
    text-align: center;
    margin: 20px 0;
    font-size: 18px;
    font-weight: 600;
}
#lesson_6_task_2 .lesson_6_task_2_box {
    border: 1px solid #B2B2B2;
    border-radius: 10px !important;
    max-width: 100% !important;
    margin: 20px;
}
#lesson_6_task_2 .sound_icon_container {
    right: 5px;
    top: 5px;
}
#lesson_6_task_2 .sound_icon_active {
    opacity: 0.8;
}
#lesson_6_task_2 .empty_droppable {
    min-height: 100px !important;
    margin: 20px;
}
.lesson_6_task_2_box .lesson_draggable_word_2,
.lesson_6_task_2_box .lesson_draggable_word_3 {
    max-width: 90% !important;
}
#lesson_6_task_3 .answerbox_without_header {
    max-width: 100% !important;
}
#lesson_6_task_3 .sound_icon_container {
    position: inherit;
    right: inherit;
}
#lesson_6_task_3 .lesson_6_task_3_sound_text {
    border: 1px solid #B2B2B2;
    box-sizing: border-box;
    border-radius: 10px;
    padding: 10px;
    background: #E5D3B8;
}
.draggable_area {
    background: #E5D3B8;
    border-radius: 30px;
    padding: 25px 30px 15px;
}
.exercise_background {
    background: #EEE1CE;
    border-radius: 30px;
}
/* 6. lesson - end */

/* 8. lesson - start */
#lesson_8 .repeat_task_description {
    margin-bottom: 30px !important;
    line-height: 55px;
}
#lesson_8 .corner_yellow_button {
    float: none;
    top: auto;
    right: auto;
}
.corner_yellow_button:focus {
    outline: none;
}
#modal-dictionary_video .lesson_modal_content {
    margin-top: 0;
}
#lesson_8 .white_rounded_text_container {
    margin-bottom: 0 !important;
    padding-top: 30px;
    padding-right: 30px;
}
#lesson_8 .task_1_draggable_ul {
    padding: 0;
    margin: 0;
}
#lesson_8 .task_1_draggable_ul li,
#lesson_8 .task_2_draggable_ul li,
#lesson_8 .task_3_draggable_ul li {
    display: inline;
}
#lesson_8 #task_3 ul {
    margin: 0;
    padding: 8px 5px;
}
#lesson_8 #task_2 .white_rounded_text_container {
    background: #E5D3B8;
    border: none;
    line-height: initial;
    font-size: 20px;
}
#lesson_8 #task_2 .sortable {
    min-height: 400px;
    width: 45%;
    margin: 1em;
}
#lesson_8 #task_3 .droppable_box ul li {
    display: inline;
}
#lesson_8 #task_3 .droppable_box ul.droppable {
    border: 2px solid rgba(0, 0, 0, 0.3) !important;
    box-sizing: border-box;
    border-radius: 10px;
    height: 35px;
}
#task_1_table .input_tooltip,
#task_2_table .input_tooltip,
#task_3_table .input_tooltip,
#task_4_table .input_tooltip,
#task_5_table .input_tooltip {
    width: 100%;
    text-align: center;
    bottom: 35px;
    left: 0;
    padding: 0;
}
#lesson_8 .task_5_input_tooltip {
    left: 0;
    width: 85%;
    bottom: 45px;
}
#lesson_8 #task_1 .task_1_draggable_li.ui-draggable.ui-draggable-handle {
    min-width: 120px;
}
/* 8. lesson - end */

/* 10. lesson - start */
.inherit_line_height {
    line-height: inherit;
}
.bigger_h5_font {
    font-size: 20px;
}
#lesson_10 #video_task_9 p {
    font-size: 1.25rem;
}
.big_white_rounded_shadowed_box {
    background: #FFFFFF;
    border: 1px solid #E4E3E3;
    box-sizing: border-box;
    box-shadow: 1px 0px 15px rgba(72, 39, 0, 0.2);
    border-radius: 30px;
}
.big_white_rounded_shadowed_box .fillable_table {
    font-size: 20px;
    line-height: 40px;
    padding-bottom: 1.5em;
    padding-top: 1.5em;
}
.didYouKnow {
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
    border-radius: 30px;
    font-family: Roboto;
    font-size: 22px;
}
.draggable_pop_up_box {
    background: #E5D3B8;
    border-radius: 30px;
    font-size: 22px;
}
.draggable_pop_up_box ul {
    padding: 0;
}
.draggable_pop_up_box ul li {
    list-style-type: none;
}
.draggable_pop_up_box ul li .word-border {
    padding: 10px;
    font-size: 20px;
}
.draggable_pop_up_box ul li .word-border.highlighted {
    background: #FFCF3C !important;
}
.popuped_draggable_task_sortable_box ul.sortable {
    margin: auto;
    width: 16.66666%;
    min-height: 200px;
}

#lesson_36 .popuped_draggable_task_sortable_box ul.sortable {
    padding: 20px;
    min-width: 30%;
    min-height: 200px;
}

.popuped_draggable_task_sortable_box ul li .word-border {
    padding: 2px;
    font-size: 16px;
}

#lesson_33 .popuped_draggable_task_sortable_box ul li .word-border {
    padding: 2px;
    font-size: 24px;
    width: auto !important;
    margin: 2px;
}

.task_0_draggable_li
{
    margin: 0.5em !important;
}

.hide {
    display: none;
}
.doneMsg {
    color: #4DAB2B;
}
.popuped_draggable_counter {
    font-size: 20px;
}
#lesson_10 #task_4 .popuped_draggable_task_sortable_box .sortable {
    width: 16.66666%;
    margin: 20px 20px 0;
}
#lesson_10 #task_4 .task_4_draggable_li.ui-draggable.ui-draggable-handle {
    min-width: 180px;
}
.white_rounded_container .title {
    margin-top: 0.5em;
}
#lesson_10 #task_4 .ul_header {
    font-size: 18px;
}
#lesson_10 .white_rounded_container .corner_yellow_button {
    top: -16px;
    right: -41px;
}
/* 10. lesson - end */

/* 16. lesson - start */
#lesson_16 #task_4 {
    font-size: 1.25rem;
}
#lesson_16 #task_4 .input_tooltip {
    bottom: 33px;
    left: 125px;
}
#lesson_16 #task_1 .coloured_select {
    padding: 5px 10px;
}
input[type=checkbox].bigger_checkbox {
    /* Double-sized Checkboxes */
    -ms-transform: scale(2); /* IE */
    -moz-transform: scale(2); /* FF */
    -webkit-transform: scale(2); /* Safari and Chrome */
    -o-transform: scale(2); /* Opera */
    transform: scale(2);
    padding: 10px;
}
/* 16. lesson - end */

/* 26. lesson - start */
#lesson_26 #task_2 span.input_tooltip {
    left: 100px;
}
/* 26. lesson - end */

.margin_top
{
    margin-top: 1em;
}

.repeat_task_container
{
    margin-bottom: 2em;
}

.repeat_task_accordion .card-header
{
    background: #FFE89C;
    border-radius: 9px 9px 0px 0px;
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: 32px;
    line-height: 35px;
    color: #000000;
}

[data-toggle="collapse"] #repeat_task_arrow_1:before {
    content: "\f077";
}

[data-toggle="collapse"].collapsed #repeat_task_arrow_1:before {
    content: "\f078";
}

.repeat_task_accordion .btn
{
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.repeat_task_accordion .btn-link
{
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: 32px;
    line-height: 35px;
    color: #000000;
}

.repeat_task_accordion .btn-link:hover, .repeat_task_accordion .btn-link:focus
{
    text-decoration: none;
}

.repeat_task_accordion .card
{
    border-radius: 9px !important;
}

.repeat_task_status_indicator_container
{
    position: absolute;
    right: 30px;
    top: 10px;
    display: none;
}

.repeat_task_description
{
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 35px;
    color: #000000;
    margin-bottom: 2em!important;
}

.repeat_task_checkmark_container .checkmark_icon_active{
    display: none;
}

.repeat_task_checkmark_container .checkmark_icon_done{
    display: none;
}

.repeat_task_checkmark_container .checkmark_icon_container:hover .checkmark_icon_active,
.repeat_task_checkmark_container .checkmark_icon_container:active .checkmark_icon_active{
    display: inline;
}

.repeat_task_checkmark_container .checkmark_icon_container:hover .checkmark_icon,
.repeat_task_checkmark_container .checkmark_icon_container:active .checkmark_icon{
    display: none;
}

.repeat_task_checkmark_container .checkmark_icon_container
{
    cursor: pointer;
}

.illustration_container
{
    margin: 1em;
}

.lesson_draggable_word
{
    background: #FFFFFF;
    border: 1px solid #E4E3E3;
    box-sizing: border-box;
    box-shadow: 1px 0px 15px rgba(72, 39, 0, 0.2);
    border-radius: 10px;
    min-height: 70px;
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 35px;
    text-align: center;
    color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1em;
    cursor: pointer;
}

.lesson_task_inner_divider
{
    width: 90%;
    color: rgba(0, 0, 0, 0.5);
}

.lesson_droppable_box_with_translated_word
{
    background: #FFFFFF;
    border: 1px solid #E4E3E3;
    box-sizing: border-box;
    box-shadow: 1px 0px 15px rgba(72, 39, 0, 0.2);
    border-radius: 30px;
    min-height: 160px;
    margin: 1em;
}

.lesson_droppable_box_with_translated_word .header
{
    border-bottom: 3px solid rgba(0, 0, 0, 0.4);
    min-height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.lesson_droppable_box_with_translated_word .header_padded
{
    padding-top: 1em;
    padding-bottom: 1em;
}

.lesson_droppable_box_with_translated_word .header .translated_word
{
    background: #EEE1CE;
    border-radius: 30px;
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 35px;
    align-items: center;
    text-align: center;
    color: #000000;
    padding-left: 1em;
    padding-right: 1em;
    width: 100%;
}

.lesson_droppable_box_with_translated_word .droptarget
{
    min-height: 90px;
}

.restart_button
{
    background: #FFCF3C;
    border-radius: 24px;
    border: none;
    float: right;
    cursor: pointer;
    padding: 10px;
    font-style: normal;
    font-weight: bold;
    font-size: 24px;
    line-height: 29px;
    color: #000000;
}

.restart_button:hover
{
    background: #FFC105;
}

.restart_button:focus
{
    outline: none;
}

.lesson_droppable_box_with_translated_word .droptarget .match_white
{
    background: #FFFFFF;
    border: 1px solid #E4E3E3;
    box-sizing: border-box;
    box-shadow: 1px 0px 15px rgba(72, 39, 0, 0.2);
    border-radius: 10px;
    min-height: 70px;
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 35px;
    text-align: center;
    color: #000000;
    display: flex !important;
    justify-content: center;
    align-items: center;
    margin: 1em;
}

.lesson_draggable_word_2,
.lesson_draggable_word_3,
.lesson_draggable_word_4
{
    background: #FFFFFF;
    border: 1px solid #E4E3E3;
    box-sizing: border-box;
    box-shadow: 1px 0px 15px rgba(72, 39, 0, 0.2);
    border-radius: 10px;
    min-height: 70px;
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 35px;
    text-align: center;
    color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1em;
    cursor: pointer;
}

.lesson_draggable_word_5
{
    background: #FFFFFF;
    border: 1px solid #E4E3E3;
    box-sizing: border-box;
    box-shadow: 1px 0px 15px rgba(72, 39, 0, 0.2);
    border-radius: 10px;
    height: 163px;
    width: 163px;
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 35px;
    text-align: center;
    color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1em;
    cursor: pointer;
    z-index: 1000;
}

.lesson_droppable_box_with_photo,
.lesson_droppable_box_with_photo_2
{
    background: #FFFFFF;
    border: 1px solid #E4E3E3;
    box-sizing: border-box;
    box-shadow: 1px 0px 15px rgba(72, 39, 0, 0.2);
    border-radius: 30px;
    min-height: 280px;
    margin: 1em;
    background-repeat: no-repeat;
    background-position: bottom center;
}

.lesson_droppable_box_with_photo_top
{
    background: #FFFFFF;
    border: 1px solid #E4E3E3;
    box-sizing: border-box;
    box-shadow: 1px 0px 15px rgba(72, 39, 0, 0.2);
    border-radius: 30px;
    min-height: 360px;
    min-width: 300px;
    margin: 1em;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 234px;
}

.lesson_droppable_box_with_photo_top_small
{
    background: #FFFFFF;
    border: 1px solid #E4E3E3;
    box-sizing: border-box;
    box-shadow: 1px 0px 15px rgba(72, 39, 0, 0.2);
    border-radius: 30px;
    min-height: 320px;
    min-width: 300px;
    margin: 1em;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 234px;
}

.lesson_droppable_box_with_photo_small
{
    background: #FFFFFF;
    border: 1px solid #E4E3E3;
    box-sizing: border-box;
    box-shadow: 1px 0px 15px rgba(72, 39, 0, 0.2);
    border-radius: 30px;
    height: 300px;
    margin: 1em;
    background-repeat: no-repeat;
    background-position: bottom center;
    padding-top: 2em;
}

.background_image_wie-geht-es-dir_task_3_1
{
    background-image: url('../images/public/lessons/wie-geht-es-dir/task_3_1.jpg');
}
.background_image_wie-geht-es-dir_task_3_2
{
    background-image: url('../images/public/lessons/wie-geht-es-dir/task_3_2.jpg');
}
.background_image_wie-geht-es-dir_task_3_3
{
    background-image: url('../images/public/lessons/wie-geht-es-dir/task_3_3.jpg');
}
.background_image_wie-geht-es-dir_task_3_4
{
    background-image: url('../images/public/lessons/wie-geht-es-dir/task_3_4.jpg');
}
.background_image_wie-geht-es-dir_task_3_5
{
    background-image: url('../images/public/lessons/wie-geht-es-dir/task_3_5.jpg');
}
.background_image_wie-geht-es-dir_task_3_6
{
    background-image: url('../images/public/lessons/wie-geht-es-dir/task_3_6.jpg');
}
.background_image_wie-geht-es-dir_task_3_7
{
    background-image: url('../images/public/lessons/wie-geht-es-dir/task_3_7.jpg');
}

.lesson_droppable_box_with_photo .title,
.lesson_droppable_box_with_photo_2 .title
{
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 35px;
    text-align: center;
    color: #000000;
    margin-top: 1em;
    margin-bottom: 1em;
}

.lesson_droppable_box_with_photo_top .title,
.lesson_droppable_box_with_photo_top_small .title
{
    font-family: Roboto;
    font-style: normal;
    font-weight: 700;
    font-size: 30px;
    line-height: 35px;
    text-align: center;
    color: #000000;
    margin-top: 250px !important;
    margin-bottom: 1em;
}

.lesson_droppable_box_with_photo .droptarget,
.lesson_droppable_box_with_photo_2 .droptarget,
.lesson_droppable_box_with_photo_small .droptarget
{
    height: 70px;
    background: rgba(198, 198, 198, 0.2);
    border: 3px solid #B2B2B2;
    box-sizing: border-box;
    border-radius: 10px;
}

.lesson_droppable_box_with_photo_small .droptarget_large
{
    height: 163px;
    width: 163px;
    background: rgba(198, 198, 198, 0.2);
    border: 3px solid #B2B2B2;
    box-sizing: border-box;
    border-radius: 10px;
    margin-top: -1em !important;
}


.match_green
{
    background: #B5E497 !important;
}

.match_red
{
    background-color: #F49FA6 !important;
}

.white_buttons_container
{
    justify-content: center;
    align-items: center;
}

.white_buttons_container .task_button
{
    background: #FFFFFF;
    border: 1px solid #E4E3E3;
    box-sizing: border-box;
    box-shadow: 1px 0px 15px rgba(72, 39, 0, 0.2);
    border-radius: 10px;
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 35px;
    text-align: center;
    color: #000000;
    min-height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1em;
    cursor: pointer;
}

.lesson_box_with_top_photo
{
    background: #FFFFFF;
    border: 1px solid #E4E3E3;
    box-sizing: border-box;
    box-shadow: 1px 0px 15px rgba(72, 39, 0, 0.2);
    border-radius: 30px;
    min-height: 300px;
    margin: 1em;
    background-repeat: no-repeat;
    background-position: top center;
}

.background_image_wie-geht-es-dir_task_4_1
{
    background-image: url('../images/public/lessons/wie-geht-es-dir/task_4_1.jpg');
}

.background_image_wie-geht-es-dir_task_4_2
{
    background-image: url('../images/public/lessons/wie-geht-es-dir/task_4_2.jpg');
}

.background_image_wie-geht-es-dir_task_4_3
{
    background-image: url('../images/public/lessons/wie-geht-es-dir/task_4_3.jpg');
}

.background_image_wie-geht-es-dir_task_4_4
{
    background-image: url('../images/public/lessons/wie-geht-es-dir/task_4_4.jpg');
}

.background_image_wie-geht-es-dir_task_4_5
{
    background-image: url('../images/public/lessons/wie-geht-es-dir/task_4_5.jpg');
}

.background_image_wie-geht-es-dir_task_4_6
{
    background-image: url('../images/public/lessons/wie-geht-es-dir/task_4_6.jpg');
}

.lesson_box_with_top_photo .title
{
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 30px;
    line-height: 35px;
    text-align: center;
    color: #000000;
    bottom: 1em;
    position: absolute;
}

.lesson_counter_container
{
    min-width: 65px;
    min-height: 32px;
    background-image: url('../images/public/dashboard/ribbon.svg');
    background-position: center;
    background-repeat: no-repeat;
    font-family: Oswald;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 28px;
    align-items: center !important;
    text-align: center !important;
    color: #434343;
    position: absolute;
    bottom: 35px;
}

.lesson_counter_container_finished
{
    min-width: 65px;
    min-height: 32px;
    background-image: url('../images/public/dashboard/ribbon3.svg');
    background-position: center;
    background-repeat: no-repeat;
    font-family: Oswald;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 28px;
    align-items: center !important;
    text-align: center !important;
    color: #434343;
    position: absolute;
    bottom: 35px;
}

.lesson_counter_container_opened
{
    min-width: 65px;
    min-height: 32px;
    background-image: url('../images/public/dashboard/ribbon2.svg');
    background-position: center;
    background-repeat: no-repeat;
    font-family: Oswald;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 28px;
    align-items: center !important;
    text-align: center !important;
    color: #434343;
    position: absolute;
    bottom: 35px;
}

.disabled_draggable
{
    cursor: default !important;
}

.large_pink_box
{
    background: #FFFCF6;
    border: 1px solid #E4E3E3;
    box-sizing: border-box;
    box-shadow: 1px 0px 15px rgba(72, 39, 0, 0.2);
    border-radius: 10px;
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    color: #000000;
    min-height: 70px;
    margin-top: 15px;
    margin-bottom: 15px;
}

.large_pink_box:hover
{
    background: #CAF0FE;
    border: 3px solid #80D8F8;
}

.large_pink_box.selected
{
    background: #CAF0FE;
    border: 3px solid #80D8F8;
}

.text_legend
{
    font-family: Roboto;
    font-style: italic;
    font-weight: normal;
    font-size: 22px;
    line-height: 35px;
    color: #000000;
}

.yellow_audio_player
{
    background: #FFCF3C;
    border-radius: 10px;
    min-width: 70%;
    margin-top: 1em;
    margin-bottom: 1em;
}
.yellow_audio_player:focus {
    outline: none;
}

.hr_small
{
    width: 10%;
    margin-bottom: 0px !important;
    margin-top: 0px !important;
}

.text_yellow_background
{
    background-color: #FFCF3C !important;
    padding-left: 2px;
    padding-right: 2px;
    padding-top: 1px;
    padding-bottom: 1px;
}

.true_false_button_white
{
    background: #FFF;
    border: 1px solid #E4E3E3;
    box-sizing: border-box;
    box-shadow: 1px 0px 15px rgba(72, 39, 0, 0.2);
    border-radius: 10px;
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    color: #000000;
    min-height: 70px;
    margin-top: 15px;
    margin-bottom: 15px;
}

.true_false_button_white:hover
{
    background: #CAF0FE;
    border: 3px solid #80D8F8;
}

.true_false_button_white.selected
{
    background: #CAF0FE;
    border: 3px solid #80D8F8;
}

.true_false_button_white:focus,
.true_false_button_white.selected:focus {
    outline: none;
}

.dark_purple_top_container
{
    background: #E5D3B8;
    border-radius: 30px 30px 0px 0px;
    padding: 2em;
    min-height: 140px;
}

.light_purple_bottom_container
{
    background: #EEE1CE;
    border-radius: 0px 0px 30px 30px;
    padding: 2em;
    height: 140px;
}

.sortable_4_2, .sortable_2_1
{
    height: 70px;
}

.sortable_4_2 > div, .sortable_4_1 > div, .sortable_2_2 > div, .sortable_2_1 > div, .sortable_div_container > div, .sortable_3_1 > div
{
    background: #FFFFFF;
    border: 1px solid #E4E3E3;
    box-sizing: border-box;
    box-shadow: 1px 0px 15px rgba(72, 39, 0, 0.2);
    border-radius: 10px;
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    color: #000000;
    min-height: 70px;
    display: inline-block;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 1em;
    margin-right: 2px;
    margin-left: 2px;
    vertical-align: top;
    cursor: pointer;
}

.download_button:active, .download_button:focus, .download_button:hover
{
    outline: none;
}

.sortable_4_1_placeholder, .sortable_2_1_placeholder
{
    background: #C6B59C;
    border: 1px solid #E4E3E3;
    box-sizing: border-box;
    border-radius: 10px;
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    color: #C6B59C;
    min-height: 70px;
    display: inline-block;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 1em;
    margin-right: 2px;
    margin-left: 2px;
    vertical-align: top;
}

.white_rounded_container_with_shadow
{
    background: #FFFFFF;
    border: 1px solid #E4E3E3;
    box-sizing: border-box;
    box-shadow: 1px 0px 15px rgba(72, 39, 0, 0.2);
    border-radius: 30px;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 22px;
    line-height: 40px;
    color: #000000;
    padding-bottom: 1.5em;
    padding-top: 1.5em;
}

.padding_left_large
{
    padding-left: 6em;
}

.padding_left_small
{
    padding-left: 3em;
}

.padding_left_tiny
{
    padding-left: 2em;
}

.padding_right_tiny
{
    padding-right: 2em;
}

.text_match_red
{
    color: red !important;
}

.text_match_green
{
    color: #35C84D !important;
}

.input_tooltip
{
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 35px;
    color: #000000;
    background: #EBEBEB;
    border-radius: 10px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 4px;
    padding-bottom: 4px;
    position: absolute;
    bottom: 30px;
    left: 50px;
    z-index: 100;
}

.white_rounded_container_with_shadow .border_bottom
{
    border-bottom: 1px solid #CDCDCD;
}

.white_rounded_container_with_shadow .border_right
{
    border-right: 1px solid #CDCDCD;
}

.white_rounded_container_with_shadow .padding_bottom
{
    padding-bottom: 10px;
}

.white_rounded_container_with_shadow .padding_top
{
    padding-top: 10px;
}

.purple_rounded_header
{
    background: #EEE1CE;
    border: 1px solid #CDCDCD;
    box-sizing: border-box;
    border-radius: 30px 30px 0px 0px;
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 22px;
    line-height: 30px;
    color: #000000;
    min-height: 60px;
    padding-top: 16px;
}

.no_top_radius
{
    border-radius: 0px 0px 30px 30px !important;
    padding-top: 0px !important;
}

.coloured_select
{
    background: #F3F3F3;
    border: 1px solid #B2B2B2;
    box-sizing: border-box;
    border-radius: 10px;
    min-width: 40px;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 22px;
    line-height: 40px;
    text-align: center;
    color: #000000;
    cursor: pointer;
}

.coloured_select:active, .coloured_select:focus, .coloured_select:hover
{
    outline: none;
}

.grey_rounded_container_with_shadow
{
    background: #FFFCF6;
    border: 1px solid #E4E3E3;
    box-sizing: border-box;
    box-shadow: 1px 0px 15px rgba(72, 39, 0, 0.2);
    border-radius: 30px;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 22px;
    line-height: 40px;
    color: #000000;
    padding-bottom: 1.5em;
    padding-top: 1.5em;
}

.grey_rounded_container_with_shadow .row_border_bottom
{
    background: #FFFCF6;
    border-bottom: 1px solid #E4E3E3;
    margin-left: 2em;
    margin-right: 2em;
    padding-top: 1em;
    padding-bottom: 1em;
}

.grey_rounded_container_with_shadow .word_card
{
    background: #EEE1CE;
    border: 1px solid #E4E3E3;
    box-sizing: border-box;
    border-radius: 10px;
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 35px;
    text-align: center;
    color: #000000;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.transparent_input
{
    background: transparent !important;
    text-align: right;
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 35px;
}

.near_label_left
{
    position: relative;
    left: -15px;
    top: 1px;
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 35px;
}

.check_info_container
{
    font-style: italic;
    font-size: small;
}

.repeat_task_text_container
{
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 35px;
    color: #000000;
}

.color_sentence
{
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 35px;
    text-align: center;
    color: #000000;
    border: 1px solid #000000;
    box-sizing: border-box;
    border-radius: 10px;
    padding: 4px;
    cursor: pointer;
}

.color_sentence:hover
{
    background: #EEE1CE;
}

.background_image_das-ist-2-resz_task_1_1
{
    background-image: url('../images/public/lessons/das-ist-2-resz/task_1_image_1.jpg');
}

.background_image_das-ist-2-resz_task_1_2
{
    background-image: url('../images/public/lessons/das-ist-2-resz/task_1_image_2.jpg');
}

.background_image_das-ist-2-resz_task_1_3
{
    background-image: url('../images/public/lessons/das-ist-2-resz/task_1_image_3.jpg');
}

.background_image_das-ist-2-resz_task_1_4
{
    background-image: url('../images/public/lessons/das-ist-2-resz/task_1_image_4.jpg');
}

.background_image_das-ist-2-resz_task_1_5
{
    background-image: url('../images/public/lessons/das-ist-2-resz/task_1_image_5.jpg');
}

.background_image_das-ist-2-resz_task_1_6
{
    background-image: url('../images/public/lessons/das-ist-2-resz/task_1_image_6.jpg');
}

.background_image_das-ist-2-resz_task_1_7
{
    background-image: url('../images/public/lessons/das-ist-2-resz/task_1_image_7.jpg');
}

.background_image_das-ist-2-resz_task_1_8
{
    background-image: url('../images/public/lessons/das-ist-2-resz/task_1_image_8.jpg');
}

.background_image_das-ist-2-resz_task_1_9
{
    background-image: url('../images/public/lessons/das-ist-2-resz/task_1_image_9.jpg');
}

.background_image_das-ist-2-resz_task_1_10
{
    background-image: url('../images/public/lessons/das-ist-2-resz/task_1_image_10.jpg');
}

.lesson_droppable_box_with_photo.large,
.lesson_droppable_box_with_photo_2.large
{
    min-height: 370px !important;
}

.coloured_droptarget
{
    box-sizing: border-box;
    border-radius: 10px;
    box-sizing: border-box;
    box-shadow: 1px 0px 15px rgba(72, 39, 0, 0.2);
    min-height: 70px;
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 35px;
    text-align: center;
    color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1em;
}

.coloured_droptarget.yellow_bordered_box
{
    border: 5px solid #F1FF4C !important;
}
.coloured_droptarget.blue_bordered_box
{
    border: 5px solid #0038FF !important;
}
.coloured_droptarget.lila_bordered_box
{
    border: 5px solid #792BB6 !important;
}
.coloured_droptarget.green_bordered_box
{
    border: 5px solid #78D230 !important;
}
.coloured_droptarget.gray_bordered_box
{
    border: 5px solid #848484 !important;
}
.coloured_droptarget.brown_bordered_box
{
    border: 5px solid #A78B61 !important;
}
.coloured_droptarget.orange_bordered_box
{
    border: 5px solid #FFB800 !important;
}
.coloured_droptarget.black_bordered_box
{
    border: 5px solid #000000 !important;
}
.coloured_droptarget.red_bordered_box
{
    border: 5px solid #D2303A !important;
}
.coloured_droptarget.white_bordered_box
{
    border: 5px solid #fff !important;
}

.background_image_das-ist-2-resz_task_3_1
{
    background-image: url('../images/public/lessons/das-ist-2-resz/task_3_image_1.jpg');
}
.background_image_das-ist-2-resz_task_3_2
{
    background-image: url('../images/public/lessons/das-ist-2-resz/task_3_image_2.jpg');
}
.background_image_das-ist-2-resz_task_3_3
{
    background-image: url('../images/public/lessons/das-ist-2-resz/task_3_image_3.jpg');
}
.background_image_das-ist-2-resz_task_3_4
{
    background-image: url('../images/public/lessons/das-ist-2-resz/task_3_image_4.jpg');
}
.background_image_das-ist-2-resz_task_3_5
{
    background-image: url('../images/public/lessons/das-ist-2-resz/task_3_image_5.jpg');
}

.crossword_field
{
    text-align: center;
    text-transform: uppercase;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 30px;
    color: #000000;
}

.crossword_field_solution
{
    position: relative;
}

.crossword_field_solution input
{
    background-color: rgba(198, 198, 198, 0.4);
}

.crossword_field_bottom_index_large
{
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 35px;
    color: #299E00;
    position: relative;
    top: -30px;
    left: -25px;
    z-index: 1000;
}

.crossword_solution_container
{
    background: #E8E8E8;
    border: 1px solid #000000;
    box-sizing: border-box;
    box-shadow: 1px 0px 15px rgba(72, 39, 0, 0.2);
    min-height: 100px;
    min-width: 100px;
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 48px;
    line-height: 35px;
    color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
}

.audio_icon_container
{
    position: absolute;
    top: -15px;
    right: -12px;
    cursor: pointer;
}

.audio_icon_container_large
{
    position: absolute;
    top: 20px;
    right: 35px;
    cursor: pointer;
}

.border_yellow
{
    border: 5px solid #FF8A00 !important;
}

.border_pink
{
    border: 5px solid #F963B4 !important;
}

.border_blue
{
    border: 5px solid #186FF1 !important;
}

.border_cyan
{
    border: 5px solid #38BAC2 !important;
}

.border_purple
{
    border: 5px solid #792BB6 !important;
}

.pink_rounded_container
{
    width: 100%;
    background: rgba(238, 225, 206, 0.4);
    border-radius: 30px;
    padding-top: 15px;
    padding-bottom: 0px;
    padding-left: 0px;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 28px;
    color: #000000;
}

.purple_rounded_container_test
{
    width: 100%;
    background: #EEE1CE;
    border-radius: 30px;
    padding: 0;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 28px;
    color: #000000;
}

.purple_rounded_container_test .title
{
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 24px;
    line-height: 28px;
    color: #000000;
    padding-top: 1em;
    padding-bottom: 1em;
    border-bottom: 1px solid lightgrey;
}

.hoverable_button
{
    border: 3px solid transparent !important;
}

.hoverable_button:hover
{
    background: #CAF0FE;
    border: 3px solid #80D8F8 !important;
}

.task_button.selected
{
    background: #CAF0FE;
    border: 3px solid #80D8F8;
}

.task_button:active,
.task_button:focus
{
    outline: none;
}

.sound_true_false_text
{
    padding-top: 20px;
    padding-bottom: 20px;
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 35px;
    color: #000000;
    background: #E5D3B8;
    text-align: center;
    min-height: 70px;
    border-top: 1px solid #E4E3E3;
    border-bottom: 1px solid #E4E3E3;
    z-index: 1;
}

.sound_true_false_text.text_small
{
    font-size: 16px !important;
}

.sound_true_false_text.text_medium
{
    font-size: 20px !important;
}

.sound_true_false_left
{
    background: #E5D3B8;
    border-radius: 30px 0 0 30px;
    min-height: 70px;
    border: 1px solid #E4E3E3;
    box-sizing: border-box;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 40px;
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 35px;
    color: #000000;
}

.sound_true_false_right
{
    background: #E5D3B8;
    border-radius: 0 30px 30px 0;
    min-height: 70px;
    border: 1px solid #E4E3E3;
    box-sizing: border-box;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 40px;
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 35px;
    color: #000000;
}

.sound_true_false_left_white
{
    background: #fff;
    border-radius: 30px 0 0 30px;
    min-height: 70px;
    border: 1px solid #000;
    box-sizing: border-box;
    padding-top: 80px;
    padding-bottom: 20px;
    padding-left: 40px;
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 35px;
    color: #000000;
}

.sound_true_false_right_white
{
    background: #fff;
    border-radius: 0 30px 30px 0;
    min-height: 70px;
    border: 1px solid #000;
    box-sizing: border-box;
    padding-top: 80px;
    padding-bottom: 20px;
    padding-left: 40px;
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 35px;
    color: #000000;
}

.sound_true_false_image
{
    background-color: #fff;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    height: 200px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.sound_true_false_container
{
    padding: 10px;
}

.sound_true_false_icon
{
    cursor: pointer;
}

.purple_input_container
{
    background: #EEE1CE;
    border-radius: 30px;
    margin: 1em;
    width: 100%;
    min-height: 70px;
}

.purple_input_container .row
{
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 35px;
    color: #000000;
    padding-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
    min-height: 55px;
    align-items: center;
    justify-content: center;
}

.bottom_border_input_test,
.bottom_border_input_test:focus {
    text-align: center;
    width: 100%;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
    outline: none;
    background: transparent;
}

.border_match_green
{
    border: 5px solid #4DAB2B !important;
}

.border_match_red
{
    border: 5px solid #FF0202 !important;
}

.test_result_modal .title
{
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 40px;
    line-height: 47px;
    color: #000000;
}

.test_result_modal .result_text,
.test_result_modal TD
{
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: 22px;
    line-height: 26px;
    color: #000000;
    min-height: 50px;
}

.test_ribbon_container
{
    margin-top: 2em;
    margin-bottom: 1em;
    text-align: center;
}

.test_ribbon_poor
{
    width: 218px;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 22px;
    line-height: 26px;
    color: #000000;
    background-image: url('../images/public/lessons/test_ribbon_poor.svg');
    background-repeat: no-repeat;
    background-position-x: center;
    min-height: 44px;
    padding-top: 6px;
}

.test_ribbon_intermediate
{
    width: 218px;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 22px;
    line-height: 26px;
    color: #000000;
    background-image: url('../images/public/lessons/test_ribbon_intermediate.svg');
    background-repeat: no-repeat;
    background-position-x: center;
    min-height: 44px;
    padding-top: 6px;
}

.test_ribbon_good
{
    width: 218px;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 22px;
    line-height: 26px;
    color: #000000;
    background-image: url('../images/public/lessons/test_ribbon_good.svg');
    background-repeat: no-repeat;
    background-position-x: center;
    min-height: 44px;
    padding-top: 6px;
}

#modal-test_results_poor #content_left
{
    background-image: url('../images/public/lessons/test_dog_poor.svg');
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: bottom;
}

#modal-test_results_intermediate #content_left
{
    background-image: url('../images/public/lessons/test_dog_intermediate.svg');
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: bottom;
}

#modal-test_results_good #content_left
{
    background-image: url('../images/public/lessons/test_dog_good.svg');
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: bottom;
}

#modal-test_results_poor #content_right
{
    background-image: url('../images/public/lessons/test_bulb_poor.svg');
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: bottom;
}

#modal-test_results_intermediate #content_right
{
    background-image: url('../images/public/lessons/test_bulb_intermediate.svg');
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: bottom;
}

#modal-test_results_good #content_right
{
    background-image: url('../images/public/lessons/test_bulb_good.svg');
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: bottom;
}

.test_result_modal #content_text
{
    text-align: center;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #000;
}

.sound_true_false_radio
{
    -ms-transform: scale(1.5); /* IE 9 */
    -webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
    transform: scale(1.5);
    margin-left: 2px;
    margin-right: 2px;
}

.sound_box_with_photo
{
    background: #FFFFFF;
    border: 1px solid #E4E3E3;
    box-sizing: border-box;
    box-shadow: 1px 0px 15px rgba(72, 39, 0, 0.2);
    border-radius: 30px;
    min-height: 300px;
    background-position: top center;
    background-repeat: no-repeat;
    margin: 1em;
}

.sound_box_with_photo .title
{
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 30px;
    line-height: 35px;
    text-align: center;
    color: #000000;
    margin-top: 220px;
}

.sound_box_with_photo .sound_icon_container
{
    cursor: pointer;
    position: absolute;
    right: 15px;
    top: 15px;
}

.sound_box_with_photo .sound_icon_active{
    display: none;
}
.sound_box_with_photo .sound_icon_container:hover .sound_icon_active,
.sound_box_with_photo .sound_icon_container:active .sound_icon_active{
    display: inline;
}

.sound_box_with_photo .sound_icon_container:hover .sound_icon,
.sound_box_with_photo .sound_icon_container:active .sound_icon{
    display: none;
}

.language_switcher_button
{
    background: #FFCF3C;
    border-radius: 0px 29px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 18px;
    padding-right: 18px;
    border: none;
    cursor: pointer;
    font-family: Oswald;
    font-style: normal;
    font-weight: normal;
    font-size: 22px;
    line-height: 33px;
    color: #000000;
}

.language_switcher_button:hover
{
    background-color: #FFC105;
}

.language_switcher_button:active,
.language_switcher_button:focus,
.language_switcher_button:hover
{
    outline: none;
}


.white_rounded_container_with_shadow .header
{
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 24px;
    color: #000000;
}

.purple_word_container
{
    background: rgba(238, 225, 206, 0.7);
    border: 1px solid #E4E3E3;
    box-sizing: border-box;
    border-radius: 10px;
    margin: 1em;
    text-align: center;
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 35px;
    color: #000000;;
    min-height: 70px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
}

.purple_word_container.hungarian_shown
{
    background: rgba(252, 226, 142, 0.7) !important;
}

.purple_rounded_word
{
    background: #EEE1CE;
    border-radius: 30px;
    padding-left: 15px;
    padding-right: 15px;
}

.white_rounded_container_with_shadow .header_row
{
    margin-left: 1em;
    margin-right: 1em;
    margin-bottom: 1em;
    padding-bottom: 0.5em;
}

.countdown_container .timer_container
{
    font-family: Roboto;
    text-align: center;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 27px;
    color: #000000;
    min-width: 110px;
}

.countdown_container .timer_container .timer
{
    background: #EEE1CE;
    border-top-left-radius: 110px;
    border-top-right-radius: 110px;
    border: 10px solid #EEE1CE;
    border-bottom: 0;
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 4px;
    padding-bottom: 0px;
    position: relative;
}

.time_ran_out_container
{
    display: none;
}

.time_ran_out {
    content: " ";
    z-index: 10;
    display: flex;
    position: absolute;
    height: 93%;
    top: 27px;
    left: 16px;
    right: 16px;
    background: rgba(0, 0, 0, 0.2);
    text-align: center;
    justify-content: center;
    align-items: center;
    border-radius: 30px;
}

.time_ran_out .warning_button
{
    background: #FFFFFF;
    border-radius: 30px;
    padding-left: 10px;
    padding-right: 10px;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 22px;
    line-height: 35px;
    color: #000000;
    cursor: pointer;
}

.time_ran_out .warning_button:hover
{
    border: 1px solid black;
}

.countdown_question_container
{
    display: none;
}

.countdown_answer_button
{
    background: #FFFCF6;
    border: 1px solid #E4E3E3;
    box-sizing: border-box;
    box-shadow: 1px 0px 15px rgba(72, 39, 0, 0.2);
    border-radius: 10px;
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    color: #000000;
    min-height: 70px;
    margin-top: 15px;
    margin-bottom: 15px;
}

.countdown_answer_button:hover
{
    background: #CAF0FE;
    border: 3px solid #80D8F8;
}

.countdown_answer_button:focus,
.countdown_answer_button.selected:focus {
    outline: none;
}

.wrong_answer_container
{
    display: none;
}

.wrong_answer {
    content: " ";
    z-index: 10;
    display: flex;
    position: absolute;
    height: 93%;
    top: 27px;
    left: 16px;
    right: 16px;
    background: rgba(0, 0, 0, 0.2);
    text-align: center;
    justify-content: center;
    align-items: center;
    border-radius: 30px;
}

.wrong_answer .warning_button
{
    background: #FFFFFF;
    border-radius: 30px;
    padding-left: 10px;
    padding-right: 10px;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 22px;
    line-height: 35px;
    color: #000000;
    cursor: pointer;
}

.wrong_answer .warning_button:hover
{
    border: 1px solid black;
}

.task_finished_container
{
    display: none;
}

.task_finished {
    content: " ";
    z-index: 10;
    display: flex;
    position: absolute;
    height: 93%;
    top: 27px;
    left: 16px;
    right: 16px;
    background: rgba(0, 0, 0, 0.2);
    text-align: center;
    justify-content: center;
    align-items: center;
    border-radius: 30px;
}

.task_finished .warning_button
{
    background: #FFFFFF;
    border-radius: 30px;
    padding-left: 10px;
    padding-right: 10px;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 22px;
    line-height: 35px;
    color: #000000;
    cursor: pointer;
}

.task_finished .warning_button:hover
{
    border: 1px solid black;
}

.crossword_solutions_container
{
    background: #EEE1CE;
    border-radius: 30px;
    padding: 1em;
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 32px;
    color: #000000;
}

.text_blue_background
{
    background-color: #E1E0DD !important;
    padding-left: 2px;
    padding-right: 2px;
    padding-top: 1px;
    padding-bottom: 1px;
}

.crossword_index
{
    position: absolute;
    top: -8px;
    left: 4px;
    z-index: 100;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 10px;
    line-height: 35px;
    display: flex;
    align-items: center;
    color: red;
}

.crossword_index_solution
{
    position: absolute;
    bottom: -8px;
    left: 4px;
    z-index: 100;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 10px;
    line-height: 35px;
    display: flex;
    align-items: center;
    color: #4DAB2B;
}

.crossword_index_bottom
{
    position: absolute;
    bottom: -8px;
    right: 4px;
    z-index: 100;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 10px;
    line-height: 35px;
    display: flex;
    align-items: center;
    color: red;
}

.crossword_index_td
{
    position: relative;
}

.task_navigator_link .navigator_arrow_active
{
    display: none;
}

.task_navigator_link:hover .navigator_arrow,
.task_navigator_link:active .navigator_arrow{
    display: none;
}
.task_navigator_link:hover .navigator_arrow_active,
.task_navigator_link:active .navigator_arrow_active{
    display: inline;
}

.task_table_container
{
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
    border-radius: 30px;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 28px;
    color: #000000;
}

.task_table_container .border_right
{
    border-right: 1px solid #CDCDCD;
}

.border_left
{
    border-left: 1px solid #343A40;
}

.border_right
{
    border-right: 1px solid #343A40;
}

.task_table_top
{
    background: #EEE1CE;
    padding-left: 40px;
    padding-right: 40px;
    border-radius: 30px 30px 0 0;
    border-bottom: 1px solid #CDCDCD;
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 22px;
    line-height: 30px;
    display: flex;
    align-items: center;
    color: #000000;
}

.task_table_top .row
{
    padding: 0.5em;
}

.task_table_body
{
    background: #FFFFFF;
    padding-left: 40px;
    padding-right: 40px;
    border-radius: 0 0 30px 30px;
    display: flex;
    align-items: center;
    color: #000000;
}

.task_table_body .fields
{
    padding: 0.5em;
}

.purple_rounded_container_light
{
    width: 100%;
    background: #E5D3B8;
    border-radius: 30px;
    padding-top: 15px;
    padding-bottom: 25px;
    padding-left: 40px;
    padding-right: 40px;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 28px;
    color: #000000;
}

.task_table_container .checkbox
{
    transform : scale(1.5);
    cursor: pointer;
}

.bottom_border_input_test_small,
.bottom_border_input_test_small:focus {
    text-align: center;
    width: 85%;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
    outline: none;
    background: transparent;
    margin-left: 4px;
}

#task_2 .drag_sort_ul
{
    margin: 1em;
    padding: 1em;
}

#task_2 .task_2_draggable_li {
    margin: 0.5em;
}

.bottom_border_input_dynamic,
.bottom_border_input_dynamic:focus {
    text-align: center;
    width: auto;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
    outline: none;
    background: transparent;
}

.sound_collection_answers_container
{
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 35px;
    display: flex;
    align-items: center;
    color: #000000;
}

.sound_collection_answers_container .answer
{
    margin-bottom: 0.5em;
}

.input_with_tooltip_container
{
    position: relative;
}

#lesson_2 .white_rounded_container .corner_yellow_button,
#lesson_17 .white_rounded_container .corner_yellow_button
{
    top: -16px;
    right: -41px;
}

.light_purple_rounded_box
{
    background: rgba(238, 225, 206, 0.4);
    border-radius: 30px;
    text-align: center;
    padding: 2em;
}

.image_rounded
{
    border: 1px solid #CDCDCD;
    border-radius: 30px;
    margin-bottom: 1em;
}

.padding_top
{
    padding-top: 1em;
}

.lesson_droppable_box_with_translated_word.high .droptarget
{
    min-height: 120px;
}

.margin_right
{
    margin-right: 1em !important;
}

.margin_left
{
    margin-left: 1em !important;
}

.image_box_large
{
    width: 450px;
    height: 370px;
    background: #FFFFFF;
    border-radius: 30px;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: top;
    border: 1px solid #CDCDCD;
    margin: 1em;
}

.image_box_large .text_content
{
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: 34px;
    line-height: 35px;
    text-align: center;
    color: #000000;
    margin-top: 310px;
}

.normal_text
{
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 35px;
    color: #000000;
}

.margin_tiny
{
    margin: 2px !important;
}

.width_full
{
    width: 100% !important;
}

.padding_tiny
{
    padding: 0 2px 0 2px !important;
}

.image_selectable_box
{
    border-radius: 30px;
    border: 6px solid #CDCDCD;
    cursor: pointer;
}

.image_selectable_box:hover,
.image_selectable_box.selected
{
    border: 6px solid #80D8F8;
}

.border_match_green
{
    border: 6px solid #B5E497 !important;
}

.border_match_red
{
    border: 6px solid #F49FA6 !important;
}

.selectable_sound_box
{
    cursor: pointer;
}

.selectable_sound_box:hover
{
    border: 1px solid #3d4246 !important;
}

.selectable_sound_box.selected
{
    background-color: #CAF0FE;
}

.box_match_green
{
    background-color: #B5E497 !important;
}

.box_match_red
{
    background-color: #F49FA6 !important;
}

.help_button
{
    background: #FFFFFF;
    border-radius: 24px;
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 11px;
    line-height: 13px;
    color: #000000;
    border: 1px solid #FFFFFF;
}

.help_button:hover
{
    border: 1px solid #DEDEDE;
}

.help_button_purple
{
    background: rgba(238, 225, 206, 0.4);
    border-radius: 24px;
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 11px;
    line-height: 13px;
    color: #000000;
    border: 1px solid #FFFFFF;
}

.help_button_purple:hover
{
    border: 1px solid #DEDEDE;
}

.sound_box_with_photo .title_small
{
    font-size: 24px !important;
    border-bottom: 0 !important;
}

.dd_target_rounded
{
    background: #F4F4F4;
    border: 3px solid #B2B2B2;
    box-sizing: border-box;
    border-radius: 10px;
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    color: rgba(0, 0, 0, 0.5);
    margin-top: 1em;
    width: 170px;
}

.dd_item_rounded
{
    background: #FFFFFF;
    border: 1px solid #E4E3E3;
    box-sizing: border-box;
    box-shadow: 1px 0px 15px rgba(72, 39, 0, 0.2);
    border-radius: 10px;
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    color: #000000;
    margin: 0.5em;
    width: 170px;
}

.dd_target_rounded_active
{
    background-color: #FFFCF6 !important;
}

.dd_target_rounded_hover
{
    border: 3px dashed grey;
}

.no_margin_bottom
{
    margin-bottom: 0 !important;
}

.margin_small
{
    margin: 0.5em !important;
}

#lesson_21 #task_1 .drag_sort_ul
{
    margin: 1em;
    padding: 1em;
    min-width: 300px;
}

#lesson_33 #task_0 .drag_sort_ul
{
    margin: auto;
    padding: 1em;
    /*min-width: 300px;*/
}

#lesson_21 #task_1 .task_1_draggable_li {
    margin: 0.5em;
}

.true_false_button_white_small
{
    background: #FFFCF6;
    border: 1px solid #E4E3E3;
    box-sizing: border-box;
    box-shadow: 1px 0px 15px rgba(72, 39, 0, 0.2);
    border-radius: 10px;
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    color: #000000;
    margin: 5px;
    min-width: 60px;
}

.true_false_button_white_small:hover
{
    background: #CAF0FE;
    border: 1px solid #80D8F8;
}

.true_false_button_white_small.selected
{
    background: #CAF0FE;
    border: 1px solid #80D8F8;
}

.true_false_button_white_small:focus,
.true_false_button_white_small.selected:focus {
    outline: none;
}

.selectable_image
{
    border: 5px solid rgba(72, 39, 0, 0.2) !important;
    border-radius: 20px !important;
    cursor: pointer;
    margin-bottom: 1em;
    float: left;
    position: relative;
}

.selectable_image:hover,
.selectable_image.selected
{
    border: 5px solid #80D8F8 !important;
}

.selectable_image.image_match_green
{
    border: 5px solid #B5E497 !important;
}

.selectable_image.image_match_red
{
    border: 5px solid #F49FA6 !important;
}

#lesson_24 #task_2 .sound_icon_container {
    left: 180px !important;
    top: 10px !important;
    position: absolute;
}

.sound_icon_bordered
{
    border: 2px solid rgba(72, 39, 0, 0.5);
    border-radius: 50%;
}

.sound_icon_bordered_active
{
    border: 3px solid #80D8F8;
    border-radius: 50%;
}

/*------------------------------------------------------------*/
/* JAVÍTÁS A TARTALOM KIJELZŐBŐL TÚLCSORDULÁSA ELLEN - Attila */
/*------------------------------------------------------------*/
section.lesson_content_container div.postcontent {
    width: 100%;
}
.width100 {
    width: 100%;
}
/*------------------------------------------------------------*/
/* JAVÍTÁS VÉGE ----------------------------------------------*/
/*------------------------------------------------------------*/
.table_full_width
{
    width: 100%;
}

.table_row_orange
{
    background-color: #FFE5C9;
}

.table_row_blue
{
    background-color: #D9D9D9;
}

.table_row_top
{
    border-top: 2px solid black !important;
}

.table_row_bottom
{
    border-bottom: 2px solid black !important;
}

.valign_middle
{
    vertical-align: middle;
}

.table_full_width TD
{
    padding: 0.5em;
    margin: 0.5em;
    border: 1px solid black;
    vertical-align: middle;
    text-align: center;
}

.bordered_word
{
    padding: 3px;
    border: 1px solid black;
}

.warning_small_text
{
    color: red;
    font-size: 12pt;
    font-style: italic;
}

.cyan_color
{
    color: #38BAC2 !important;
}

.rounded
{
    border: 1px solid black;
    border-radius: 30px !important;
}

#lesson_36 .draggable_pop_up_box ul li .word-border
{
    font-size: 16px !important;
}

#lesson_36 .ui-draggable-handle
{
    min-width: 230px !important;
}

.help_container
{
    background: rgba(238, 225, 206, 0.4);
}

.text_20
{
    font-size: 20px !important;
}

#test_6 .text_yellow_background
{
    margin-left: 3px;
    margin-right: 3px;
    padding-left: 6px;
    padding-right: 6px;
}

.sortable_li
{
    text-align: justify;
    margin-top: 1em;
    margin-bottom: 1em;
    padding: 0.5em;
    border: 1px solid black;
    border-radius: 5px !important;
    cursor: pointer;
}

.sortable_li_highlight
{
    margin-top: 1em;
    margin-bottom: 1em;
    padding: 0.5em;
    border: 1px solid black;
    border-radius: 5px !important;
    background: rgba(238, 225, 206, 0.4);
    height: 5em;
}

.beige_background
{
    background: #e5d3b8;
}