*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    cursor: url(assets/cursor.gif), auto;
    scrollbar-color: rgba(0, 0, 0, 0.3) transparent; /* firefox*/
}

*::selection {
  background: rgba(245, 39, 67, 0.69); /* color 5 */
  color: #ffffff;
}
*::-moz-selection {
  background: rgba(245, 39, 67, 0.69); /* color 5 */
  color: #ffffff;
}
*::-webkit-selection {
  background: rgba(245, 39, 67, 0.69); /* color 5 */
  color: #ffffff;
}
*::-webkit-scrollbar-track {
    background: transparent;
}

@media (min-width: 1024px) { /* desktop */
    .mobile{
        display: none;
    }
    body{
        color: #333;
        line-height: 1.6;
        background-color: #000;
    }
   .navbar{
        position: sticky;
        top: 0;
        width: 100%;
        height: 60px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 1000;
        -webkit-box-shadow: 0px 37px 50px -10px rgba(0,0,0,0.77); 
        box-shadow: 0px 10px 20px -10px rgba(0,0,0,0.77);
    }
    .nav-logo{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding-left: 5px;
        width: 340px;
        height: 90%;
        border-radius: 1rem;
    }
    .nav-logo a{
        width: 20%;
    }
    .nav-logo img{
        height: 100%;
        width: auto;
    }
    .nav-logo p{
        align-self: center;
        color: #fff;
        font-size: 2.5rem;
        font-weight: 600;
        font-family: "Karla";
    }
    .nav-gombok{ /* a nav gombokat tarto div */
        overflow: hidden;
        border-radius: 5px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    } 
    .nav-gombok ul{
         list-style-type: none;
         margin: 0;
         padding: 0;
         overflow: hidden;
         display: flex;
         flex-direction: row;
         gap: 0.2rem;
    }
    .nav-gombok ul li a {     /* desktop!! a tenyleges nav gombok*/
        display: flex;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        padding: 22px 16px;
        transition: all 0.3s ease;
        background-color: none;
        border-radius: 10px;
        color:#fff;
        /*border: 1px solid #fff; /* test border */
        text-shadow: 1px 1px 0.1px rgba(0, 0, 0, 0.7); /* t_shadow 2 (fekete) white text */
        font-family: "Karla";
        font-size: 1rem;
    }
    .nav-gombok ul li a:hover {    /* hover anim */
        transform: translateY(-3px);
    }
    .nav-gombok ul li a::before {     /* hover anim */
         content: "";
         position: absolute;
         z-index: -1;
         bottom: -1px;
         left: 0;
         right: 0;
         height: 5px;
         background-color:rgba(243, 245, 39, 0.94); /* color 2 */
         transform: scaleY(0);
         transform-origin: bottom;
         transition: transform 0.3s ease;
    }
    .nav-gombok ul li a:hover::before {   /* hover anim */
         transform: scaleY(1);
    }
    .feladatok_section{
        display: flex;
        flex-direction: row;
        height: calc(100vh - 60px);
    }
    .feladatok_sidemenu{ /* fontos hogy ez a kitoltendo feladatnal van, nem a valasztonal*/
        width: 230px;
        border-right: 3px solid #000;
        background:none;
        height: calc(100vh - 60px);
        position: relative;
        z-index: 0;
        overflow: hidden;
        filter: grayscale(20%);

    }
    .feladatok_sidemenu_lista::-webkit-scrollbar {
        width: 6px;
    }
    .feladatok_sidemenu::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.15);
    }
    .feladatok_sidemenu_lista::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.45);
        border-radius: 3px;
    }
    .feladatok_sidemenu_lista::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.65);
    }
    .feladatok_sidemenu::before{
        content: "";
        position: fixed;
        top: 60px;
        left: 0px;
        width: 220px;
        height: 100%;
        background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2)), url(assets/feladatok/kitolto_feladatback_2.jpg);
        background-size: cover, cover;
        background-repeat: no-repeat, no-repeat;
        filter: blur(2px);
        z-index: -2;
        scale: 1.2;
        translate: -5% -5%;
        overflow: hidden;
    }
    .feladatok_sidemenu_lista{
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        height: calc(100vh - 60px - 70px); /* teljes magassag - navbar - cim */
        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.45) rgba(0, 0, 0, 0.15);
        padding-bottom: 1rem;
        padding-top: 1rem;
        border-bottom: #000 solid 1px;
        border-left: #000 solid 1px;
        border-right: #000 solid 1px;
        box-shadow: 
            inset 0 -1px 0 rgba(0, 0, 0, 0.3),         /* test */
            0 1px 2px rgba(0, 0, 0, 0.3); 
        background: radial-gradient(circle 30vw at top left, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1));
    }
    .feladatok_sidemenu_cim{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 70px;
        border: 1px solid #000;
        background: linear-gradient(to right, rgba(255, 255, 255, 0.6),rgba(255, 255, 255, 0.5)) ;
        box-shadow: 
            inset 0 -1px 0 rgba(0, 0, 0, 0.3),         /* test */
            0 1px 2px rgba(0, 0, 0, 0.3); 
    }
    .feladatok_sidemenu_cim p{
        font-size: clamp(1.3rem, 0.8rem + 0.7vw, 1.6rem);
        font-weight: 700;
        color: rgb(255, 255, 255);
        text-shadow: 0 0 4px rgba(0, 0, 0, 0.7), 0 0 12px rgba(0, 0, 0, 0.8);
        line-height: 1.8rem;
        font-family: "Crimson Pro", serif;
        text-align: center;
    }
    .feladatok_sidemenu_listaelem{
        position: relative;
        border: 1px solid #000; /* test border */
        border-radius: 0.5rem;
        width: 92%;
        height: auto;
        min-height: 100px;
        flex-shrink: 0;
        align-self: flex-end;
        padding: 0.2rem 0;
        margin-right: 5px;
        transition: transform 0.3s ease-out, box-shadow 0.3s ease-out; /* a transition se bo shadow propertyt modositsa --> a state ahove kerul annal kell defineolni mire ez csak az anim ut oda */
    }
    .feladatok_sidemenu_listaelem::before{ /* a vonal a listaelemektol balra*/
        content: "";
        position: absolute;
        left: -8px;
        top: 20%;
        height: 60%;
        width: 3px;
        background: rgba(0, 0, 0, 0.6);
        border-radius: 1px;
    }
    .feladatok_sidemenu_listaelem:hover{
        transform: translateY(-2px);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
    }
    .feladatok_sidemenu_listaelem p{
        font-size: 0.9rem;
        font-weight: 500;
        font-family: "Karla";
        text-align: center;

    }
    .feladatok_maincontent{ /* konyvholder volt elotte*/
        width: 90%;
        height: calc(100vh - 60px);
    }
    .szovegertes_wrapper{
        width: 95%;
        height: 95%;
        top: 50%;
        overflow: hidden;
    }
    .kitolto_wrapper{
        width: 70%;
        height: 95%;
        top: 50%;
        overflow: hidden;
    }
    .szovegertes_left_cimwrapper, .kitolto_cimwrapper{
        min-height: 20%;

    }
}
@media (min-width: 768px){ /*desktop + tablet*/
                        /*feladat valaszto oldal*/
    .feladatok_felkeszito_card{
        width: 300px;
        height: 350px;
    }
    .feladatok_regular_card{ /*reg card*/
        width: 280px;
        height: 300px;
    }
    .sidefeature_feladatok_regular_card{
        height: auto;
        min-height: 190px;
        flex-shrink: 0;
    }
    .feladatok_felkeszito_card:hover, .feladatok_regular_card:hover, .sidefeature_feladatok_regular_card:hover{
        transform: translateY(-2px);    /*transition 1 emelkedo*/
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);     /*transition 1 emelkedo*/
    }
    .feladatok_extramaincontent_wrapper{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        margin-left: 20px; /*kurzusok css miatt bevan huzva valamiert jobrol??(scrollbar?)*/
    }
    .feladatok_extrakategholder_left{
        min-width: 350px;
        width: 25%;
        display: flex;
        justify-content: center;
    }
    .feladatok_extrakategholder_right{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }
    .f_regular_card_top, .f_felkeszito_card_top{
        height: 30px;
    }
    .f_f_card_top_flag{
        width: 20%;
    }
    .f_f_card_main_nagykep img{
        height: 100%;
    }
    .f_r_card_main_nagykep img{
        height: 90%;
    }
    .kurzusok_sidecontent::before{
        background: linear-gradient(180deg, rgba(133, 81, 49, 0.6), rgba(59, 38, 25, 0.6));
    }
    .k_s_k_listaelem_alelemmel{
        width: 95%;
    }

                                /*feladat kitolto oldal*/

    .szovegertes_title{ /* a felso path like sor*/
        height: 45px;
        background: linear-gradient(to right, rgba(255, 255, 255, 0.5),rgba(255, 255, 255, 0.3)) ;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .szovegertes_title_backbutton a{
        height: 45px;
        display: flex; /* kulonk ell mert kulomben overwriteolja a mobile hideot*/
    }
    .szovegertes_title_text p, .szovegertes_title_backbutton a{
        font-size: clamp(1.2rem, 1.58vw, 1.4rem);
        line-height: 1.8rem;
    }
    .szovegertes_maincontent{
        height: calc(100% - 45px);
        justify-content: space-evenly;
        align-items: center;
        background: radial-gradient(circle 30vw at top left, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1));
    }
    .szovegertes_right, .szovegertes_left{
        width: 49%;
        height: 98%;
        padding: 1%;
        scrollbar-color: rgba(255, 255, 255, 0.45) rgba(0, 0, 0, 0.15);
    }
    .kitolto_center{
        width: 70%;
        height: 98%;
        padding: 1%;
        scrollbar-color: rgba(255, 255, 255, 0.45) rgba(0, 0, 0, 0.15);
    }
    .szovegertes_left_cimwrapper_title p{
        font-size: clamp(1.4rem, 1.68vw, 2.2rem);
    }
    .szovegertes_left_text{
        font-size:clamp(1.2rem, 1.5vw, 1.4rem);
        line-height: clamp(1.4rem, 3vw, 1.8rem);
    }
    .szovegertes_left_forrasok, .kitolto_forrasok{
        font-size:clamp(1rem, 1.3vw, 1.2rem);
    }
    form{ /* weird global rule de a form neve mindig valtozik*/
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 10px;
    }
    .szovegertes_left_forrasok_linkek a{
        font-size: clamp(0.7rem, 1.18vw, 1.1rem);
        transition: transform 0.3s ease-out, box-shadow 0.3s ease-out; /*transition 1 emelkedo*/
        cursor: pointer;
    }
    .szovegertes_left_forrasok_linkek a:hover{
        transform: translateY(-0.5px);  /*kicsit felfele nyomodik */
    }
    .szovegertes_right::-webkit-scrollbar-track, .szovegertes_left::-webkit-scrollbar-track {
        background: transparent;
    }
    .kerdes_csoport{
        border-radius: 10px;
        background: radial-gradient(circle at 50% 35%, #f8ebcfee 0%, #efe3ccec 70%, #e8dfd0e8 100%);
    }
    .feladat_cim{
        font-size: clamp(1.2rem, 1.48vw, 1.4rem);
        line-height: clamp(1.4rem, 1.48vw, 1.6rem);
    }
    .kerdes_cim span{ /* azert kell egy span a p-n belul mert sima text centerrel extendel a border is mivel alapbol full width */
        font-size:clamp( 0.9rem, 1.48vw, 1.1rem);
    }
    .single_feleletvalaszto p{
        font-size:clamp(0.9rem, 1.48vw, 1rem);
    }
    .single_feleletvalaszto label, .multi_feleletvalaszto label, .igaz_hamis label, .behuzo_field label, .parosito_lehetseges_megoldas, .behelyettesito_lehetseges_megoldas, .behelyettesito_sidebyside_lehetseges_megoldas[data-side="left"], .behelyettesito_sidebyside_lehetseges_megoldas[data-side="right"] {
        font-size:clamp(0.7rem, 0.9vw, 1.2rem);
    }
    .igaz_hamis label:hover, .single_feleletvalaszto label:hover, .multi_feleletvalaszto label:hover{
        background: rgba(114, 120, 114, 0.18); /*color 7 mod opacity*/
        transform: translateY(-0.5px);  /*kicsit felfele nyomodik */
    }
    .szovegertes_submit_wrapper{
        padding-top: 5px;
    }
    .szovegertes_submit:hover {
        transform: translateY(-2px);
    }
    .behelyettesito_szoveg {
        font-size:clamp(1.1rem, 1.28vw, 1.3rem);
        line-height: 1.7rem;
    }
    .behelyettesito_single_dropzone .behelyettesito_lehetseges_megoldas,
    .behelyettesito_multi_dropzone .behelyettesito_lehetseges_megoldas{
            font-size:clamp(0.7rem, 0.9vw, 1.2rem);
    }
    .szovegertes_left{
        border-right: 2px solid #000;
    }
    .kitolto_forrasok{
        max-width: 60%;
        width: 60%;
        margin: 0 auto;
    }
    .osszpont_wrapper{
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -45%);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        display: flex;
        padding: 5px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 15px;
        border: 1px solid #000;
        width: 20%;
        max-width: 90%;
        height: auto;
        max-height: 80vh;
        overflow: hidden;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(240, 240, 240, 0.9));
        z-index: 1004;
        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    }
    .osszpont_wrapper.active {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, -50%);
        pointer-events: auto;
    }
    .osszpont_backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 1003;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        pointer-events: none;
    }
    .osszpont_backdrop.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    body.osszpont-open {
        overflow: hidden;
    }
    .osszpont_cim{
        width: 100%;
        flex-shrink: 0;
        font-size: clamp(1.2rem, 5vw, 1.8rem);
        font-weight: 600;
        font-family: "Crimson Pro", serif;
        text-align: center;
    }
    .szovegertes_osszpont{
        width: 100%;
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        font-size: clamp(1rem, 3vw, 1.6rem);
        font-weight: 500;
        font-family: "Crimson Pro", serif;
        text-align: center;
        color: #000000e1; /* font color 1 whitelike*/
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
    }
    .osszpont_buttonwrapper{
        width: 100%;
        flex-shrink: 0;
        padding: 0.5rem 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .osszpont_buttonwrapper button{
    margin: 5px 10% 5px 10%;
    padding: 12px 30px 12px 30px;
    border-radius: 1rem;
    color: rgba(226, 226, 226, 0.9);
    text-wrap: nowrap;
    font-family: "Crimson Pro", serif;
    font-weight: 700;
    font-size: 1.1rem;
    text-shadow: 1px 1px 0.1px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    background: linear-gradient(150deg, #ad2562, #9785ab);
    }
    .szovegertes_left_cimwrapper_kep img{
        width: 120px; 
        height: 120px;
    }


}       
    

@media (max-width: 1024px) { /* tablet + telefon view*/
    .m_navbar{ /* mobile navbar*/
        position: fixed;
        top: 0;
        width: 100vw;
        height: 45px;
        display: flex;
        justify-content: center;
        background-color: rgba(27, 46, 28, 0.9); /* color 6 + black */
        z-index: 1000;
        transition: transform 0.3s ease;
    }
    .m_navbar.m_navbar_hidden{
        transform: translateY(-100%);
    }
    .m_navbar_wrapper{
        height: 100%;
        display: flex;
        justify-content: space-between;
    }
    .m_navbar_logo{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .m_navbar_logo_img{
        height: 48px;
    }
    .m_navbar_Navigationbutton{ /* a button holder-divje*/
        height: 45px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .m_navbar_Navigationbutton button{ /* oldallista button */
        background-color: transparent;
        border: none;
        color: #fff;
    }
    .m_navbar_menubutton_img{
        height: 45px;
    }
   .m_navbar_Navigationbutton_image{
        height: 45px;
    }
    .m_navbar_SiteMenu{
        position: fixed;
        top: 0;
        left: 0;
        width: 250px;
        height: 100%;
        background: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.4));
        box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.3);
        -webkit-backdrop-filter: blur(4px) contrast(50%);
        backdrop-filter: blur(4px) contrast(50%);
        z-index: 1300;
        transform: translateX(-100%);
        transition: transform 0.4s ease;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        pointer-events: none;
    }
    .m_navbar_SiteMenu.m_menu_open{
        transform: translateX(0);
        pointer-events: auto;
    }
    .m_navbar_SiteMenu button{   /*sitenav close button */
        position: fixed;
        top:15px;
        left: 190px;
        width: 50px;
        height: 50px;
        background-color: transparent;
        border: none;
        background: rgb(128, 2, 2);
        flex-shrink: 0;
        background-size: 100% 100%;
        cursor: pointer;
        border: 1px solid rgba(0, 0, 0, 0.472);
        border-radius: 0.8rem;
        color: #fff;
        font-size: 18px;
        font-weight: 700;
    }
    .m_navbar_SiteMenu_lista{
        margin-top: 150px;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        width: 70%;
        height: 50%;
    }
    .m_navbar_SiteMenu_lista img{
        margin-bottom: 50px;
    }
    .m_navbar_SiteMenu_lista a{
        text-align: center;
        font-weight: 700;
        font-size: 1.6rem;
        font-family: "Crimson Pro", serif;
        text-decoration: none;
        color: rgba(255, 255, 255, 0.99);
        text-shadow: 2px 2px 0.3px rgba(0, 0, 0, 0.7);
        background: linear-gradient(to right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
        box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.3);
        padding: 10px 20px 10px 20px;
        border-radius: 0.5rem;
    }
    .desktop{
        display: none;
    }
    .k_s_k_listaelem_alelemmel{
        width: 95%;
    }
}

.nav_green{ /*kitolto_feladatback_3.jpg*/
    background: linear-gradient(180deg, rgb(27, 46, 28), rgba(27, 46, 28, 0.8));
}
.nav_lila{ /*kitolto_feladatback_1.jpg*/
    background: linear-gradient(180deg, rgb(46, 27, 42), rgba(46, 27, 42, 0.8));
}
.nav_orange{ /*kitolto_feladatback_2.jpg*/
    background: linear-gradient(180deg, rgb(59, 38, 25), rgba(59, 38, 25, 0.8));
}
.nav_red{ /*kitolto_feladatback_4.jpg*/
    background: linear-gradient(180deg, rgb(45, 22, 22), rgba(45, 22, 22, 0.8));
}
.nav_blue{ /*kitolto_feladatback_5.jpg*/
    background: linear-gradient(180deg, rgb(27, 31, 46), rgba(27, 31, 46, 0.8));
}



/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) { 
    .mt_szovegertes_megoldasok_close, .mt_szovegertes_megoldasokwrapper{
        display: none;
    }
    .feladatok_sidemenu{
        display: none;
    }
    .desktop.k_sidecontent_collapse { 
        display: flex;
    }
    .feladatok_section{
        display: flex;
        flex-direction: row;
        height: 100dvh;
    }
   .feladatok_maincontent{ /* konyvholder volt elotte*/
        width: 100%;
        height: 100dvh;
    }
    .szovegertes_wrapper, .kitolto_wrapper{
        width: 97%;
        height: calc(98% - 45px);
        top: calc(50% + 27.5px);
        overflow: hidden;
    }
    body:has(.szovegertes_wrapper) .m_navbar.m_navbar_hidden {
        transform: translateY(0);
    }
    body:has(.kitolto_wrapper) .m_navbar.m_navbar_hidden {
        transform: translateY(0);
    }
    .m_navbar_wrapper{
        width: 100%;
    }
    .m_navbar_logo{
        width: calc(100% - 100px);
    }
    .m_navbar_Navigationbutton{
        width: 50px;
    }
    .m_navbar_feladatkitolto_backbutton{
        display: none;
    }
    .szovegertes_left_cimwrapper, .kitolto_cimwrapper{
        height: 100px;
    }
    .szovegertes_title_backbutton button{
        display: none;
    }
}

@media (max-width: 767px) { /* telefon */
    .desktop{
        display: none;
    }
    .m_navbar_wrapper{
        width: 90%
    }
    .m_navbar_feladatkitolto_backbutton{ /* ez csak a telfonnal aktualis, mert itt jelenik meg  a navba avissza button, ami nem egy button hanem egy anchor*/
        background-color: transparent;
        border: none;
        color: #fff;
        text-decoration: none;
    }
    .m_navbar_logo{
       width: 80%;
    }
    .m_navbar_Navigationbutton{
        width: 10%;
    }
    .m_navbar_feladatkitolto_backbutton img, .m_navbar_menubutton_img{
        height: 45px;
    }
                    /*feladat valaszto oldal*/
    .feladatok_felkeszito_card{
        width: 46%;
        height: 310px;
    }
    .feladatok_regular_card{ /*reg card*/
        width: 46%;
        height: 270px;
    }
    .feladatok_extramaincontent_wrapper{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .feladatok_extrakategholder_left{
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .feladatok_extrakategholder_right{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }
    .f_regular_card_top, .f_felkeszito_card_top{
        height: 25px;
    }
    .f_f_card_top_flag{
        width: 30%;
    }
    .f_f_card_main_nagykep img{
        height: 90%;
    }
    .f_r_card_main_nagykep img{
        height: 75%;
    }
    .kurzusok_sidecontent::before{
        background: linear-gradient(180deg, rgba(133, 81, 49, 0.8), rgba(59, 38, 25, 0.8));
    }
    .k_s_k_listaelem_alelemmel{
        width: 92%;
    }


                    /*feladat kitolto oldal*/
    .feladatok_section{
        display: flex;
        width: 100%;
        flex-direction: row;
        height: 100dvh;
    }
    .feladatok_sidemenu{
        display: none;

    }
    .feladatok_maincontent{ /* konyvholder volt elotte*/
        width: 100%;
        height: 100%;
    }
    .mt_szovegertes_megoldasokwrapper{ /* also valaszok gomb*/
        position: fixed;
        display: flex;
        justify-content: center;
        align-items: center;
        bottom: 0;
        height: 60px;
        width: 100%;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2),rgba(255, 255, 255, 0.7));;
    }
    .mt_szovegertes_megoldasokwrapper button{
        width: 55%;
        height: 80%;
        border: outset rgba(0, 0, 0, 0.7) 1.5px;
        border-radius: 1.5rem;
        background: linear-gradient(150deg, #d01c52, #a6357e);
        font-size:clamp(1.3rem, 6vw, 2rem);
        color: rgba(240, 238, 238, 0.9);
        text-shadow: 1px 1px 0.1px rgba(0, 0, 0, 0.8);
        font-weight: 700;
        font-family: "Crimson Pro", serif;
        box-shadow:
        0 8px 10px rgba(0,0,0,0.40),
        3px 4px 4px rgba(0,0,0,0.20);

    }
    .szovegertes_wrapper, .kitolto_wrapper{ /* telefonon csak a left section lathato folytonosan*/
        height: 100dvh; /* full magassag - navbar 45px + megoldas 60px*/
        width: 100%;
        top: 50%; /*444*/
        overflow: visible
    }
    .kitolto_wrapper {
        position: static;
        left: auto;
        translate: none;
    }

    .szovegertes_title{ /* a felso path like sor*/
        position: fixed;
        flex-direction: row-reverse;
        top: 0;
        left: 0;
        width: 100%;
        height: 40px;
        z-index: 999;
        display: none;
        overflow: hidden;
        background: linear-gradient(to right, rgba(255, 255, 255, 0.8),rgba(255, 255, 255, 0.6)), url(assets/feladatok/kitolto_feladatback_3.jpg); ;
    }
    .szovegertes_title.title_navbar_hidden{
        top: 0;
    }

    .szovegertes_title_backbutton button{
        width: 100px;
        background: linear-gradient(to right, rgba(142, 25, 25, 0.8) 0%,rgba(142, 25, 25, 0.6) 100%) ;
        border-right: 1.5px outset rgba(13, 24, 24, 0.7);
        border-radius: 0;
        text-decoration: none;
        height: 40px;
        font-size: 1.2rem;
        color: rgba(255, 255, 255, 0.89);
        text-shadow: 1px 1px 0.1px rgba(0, 0, 0, 0.8);
        font-weight: 700;
        font-family: "Karla";
        text-align: center;
    }
    .szovegertes_title .szovegertes_title_text p{
        width: 100%;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        white-space: normal;
        word-break: break-word;
        text-align: center;
        padding-left: 0.5rem;
        padding-right: 0.3rem;
        font-size: clamp(0.9rem, 4vw, 1.3rem);
        line-height: 1.05;
    }
    .szovegertes_maincontent{
        height: 100dvh;
        justify-content: center;
        align-items: center;
        background: radial-gradient(circle 30vw at top left, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.2));
    }
    .szovegertes_right, .szovegertes_left, .kitolto_center{
        width: 98%;
        height: 99%;
        padding: 0 1% 0 1%;
    }
    .szovegertes_left_cimwrapper, .kitolto_cimwrapper{ /*444/*/
        min-height: 100px; /*valamiert csak min-heightra hallgat*/
    }
    .kitolto_cimwrapper{
        width: 95%;
        margin: 0 auto;
    }
    .szovegertes_left_cimwrapper_title p{
        font-size: clamp(1rem, 4.5vw, 1.8rem);
    }
    .szovegertes_left{
        padding-top: 50px;
        padding-bottom: 60px;
    }
    .szovegertes_left_text{
        font-size: clamp(0.9rem, 5vw, 1.4rem);
        line-height: clamp(1.2rem, 6vw, 1.8rem);
    }
    .szovegertes_left_forrasok, .kitolto_forrasok{
        font-size:clamp(0.8rem, 4vw, 1.3rem);
    }
    .szovegertes_left_forrasok_linkek a{
        font-size: clamp(0.7rem, 3vw, 1.1rem);
        outline: none;
        -webkit-tap-highlight-color: transparent;
    }
    .szovegertes_right{
        display: none;
        position: fixed;
        top: 40px;
        height: calc(100dvh - 40px);
        bottom: 0;
        width: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        z-index: 1001;
        transform: translateY(100%);
        transition: transform 0.3s ease;
    }
    .kitolto_center{
        display: block;
        position: fixed;
        top: 40px;
        height: calc(100dvh - 40px);
        bottom: 0;
        width: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        z-index: 1001;
    }
    form{ /* weird global rule de a form neve mindig valtozik*/
        padding-top: 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 10px;
    }

    .szovegertes_right::before, .kitolto_center::before{
        content: "";
        display: block;
        position: sticky;
        top: 0;
        width: 100%;
        height: calc(100dvh - 40px);
        margin-bottom: calc(-100dvh + 40px);
        z-index: 0;
        pointer-events: none;
        background: linear-gradient(
            rgba(0, 0, 0, 0.3),
            rgba(0, 0, 0, 0.2) 
            ), url(assets/feladatok/kitolto_feladatback_3.jpg);
        background-size: cover;
        filter: blur(2px);
        background-repeat: no-repeat;
        scale: 1.2;
        overflow: hidden;
    }
    .szovegertes_right.m_megoldasok_visible{
        transform: translateY(0);
    }
    .szovegertes_right > *, .kitolto_center > *{
        position: relative;
        z-index: 1;
    }
    .kerdes_csoport{
        border-radius: 20px;
        margin: 0 2% 0 2%;
        background: radial-gradient(circle at 50% 35%, #f8ebcfdb 0%, #efe3ccd4 70%, #e8dfd0e0 100%);
    }
    .feladat_cim{
        font-size: clamp(0.9rem, 4.5vw, 1.5rem);
        line-height: clamp(0.9rem, 5vw, 1.4rem);
    }
    .kerdes_cim span{ /* azert kell egy span a p-n belul mert sima text centerrel extendel a border is mivel alapbol full width */
        font-size:clamp(0.7rem, 4vw, 1.2rem);
    }
    .single_feleletvalaszto p{
        font-size:clamp(0.7rem, 4vw, 1.1rem);
    }
    .single_feleletvalaszto label, .multi_feleletvalaszto label, .igaz_hamis label, .behuzo_field label, .parosito_lehetseges_megoldas, .behelyettesito_lehetseges_megoldas, .behelyettesito_sidebyside_lehetseges_megoldas[data-side="left"], .behelyettesito_sidebyside_lehetseges_megoldas[data-side="right"]{
        font-size:clamp(0.7rem, 4vw, 1.2rem);
    }
    .szovegertes_submit_wrapper{
        padding-top: 10px;
    }
    .behelyettesito_szoveg {
        font-size: clamp(0.9rem, 4.5vw, 1.4rem);
        line-height: clamp(1rem, 6vw, 1.8rem);
    }
    .behelyettesito_single_dropzone .behelyettesito_lehetseges_megoldas,
    .behelyettesito_multi_dropzone .behelyettesito_lehetseges_megoldas{
        font-size:clamp(0.7rem, 4vw, 1.2rem);
    }
    .kitolto_forrasok{
        max-width: 80%;
        width: 80%;
        margin: 0 auto;
    }
        .osszpont_wrapper{
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -45%);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        display: flex;
        padding: 5px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 15px;
        border: 1px solid #000;
        top: 50%;
        left: 50%;
        width: 60%;
        max-width: 90%;
        height: auto;
        max-height: 80vh;
        overflow: hidden;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(240, 240, 240, 0.9));
        z-index: 1004;
        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    }
    .osszpont_wrapper.active {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, -50%);
        pointer-events: auto;
    }
    .osszpont_cim{
        width: 100%;
        flex-shrink: 0;
        font-size: clamp(1.2rem, 7vw, 2.4rem);
        font-weight: 600;
        font-family: "Crimson Pro", serif;
        text-align: center;
    }
    .szovegertes_osszpont{
        width: 100%;
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        font-size: clamp(1rem, 3vw, 1.6rem);
        font-weight: 500;
        font-family: "Crimson Pro", serif;
        text-align: center;
        color: #000000e1; /* font color 1 whitelike*/
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
    }
    .osszpont_buttonwrapper{
        width: 100%;
        flex-shrink: 0;
        padding: 0.5rem 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .osszpont_buttonwrapper button{
    margin: 5px 10% 5px 10%;
    padding: 12px 30px 12px 30px;
    border-radius: 1rem;
    color: rgba(226, 226, 226, 0.9);
    text-wrap: nowrap;
    font-family: "Crimson Pro", serif;
    font-weight: 700;
    font-size: 1.1rem;
    text-shadow: 1px 1px 0.1px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    background: linear-gradient(150deg, #ad2562, #9785ab);
    }

    .szovegertes_left_cimwrapper_kep img{
        width: 100px; 
        height: 100px;
    }



}
/*override desktop ultrawide*/
@media (min-aspect-ratio: 21/9) {
    .szovegertes_wrapper{
        max-width: 1920px;
        max-height: 1080px;
    }
    .kitolto_wrapper{
        max-width: 1200px;
        max-height: 1080px;
    }
    .feladatok_maincontent::before{
        background-size: cover;
        background-position: center;
    }
}
@media (min-width: 2300px){ /* 2k feletti*/
    .szovegertes_wrapper{
        max-width: 1920px;
        max-height: 1080px;
    }
    ..kitolto_wrapper{
        max-width: 1200px;
        max-height: 1080px;
    }
    .feladatok_maincontent::before{
        background-size: cover;
        background-position: center;
    }

}
/* viewport nelkuli global*/

    .feladatok_maincontent{ /* konyvholder volt elotte*/
        position: relative;
        margin: 0 auto;    
        z-index: 0;
        overflow: hidden;
    }
    .feladatok_maincontent::before{ /* a kep alatti blur hatas */
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        background: linear-gradient(
            rgba(0, 0, 0, 0.4),
            rgba(0, 0, 0, 0.3) 
            ), url(assets/feladatok/kitolto_feladatback_3.jpg);
        background-size: 100% 100%;
        filter: blur(4px);
        background-repeat: no-repeat;
        scale: 1.2;
        overflow: hidden;
    }
    .szovegertes_wrapper, .kitolto_wrapper{
        position: absolute;
        left: 50%;
        translate: -50% -50%;
        z-index: 2;
        display: flex;
        flex-direction: column;
        text-shadow: 1px 1px 0.1px rgba(255, 255, 255, 0.2); /* t_shadow 1 (feher) blacktext */
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); /* standard box shadow img*/
    }
    .szovegertes_title{ /* a felso path like sor*/
        width: 100%;
        border: 1px solid #000;
        box-shadow: 
            inset 0 -1px 0 rgba(0, 0, 0, 0.3),         /* test */
            0 1px 2px rgba(0, 0, 0, 0.3); 
    }
    .szovegertes_title_backbutton{
        width: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .szovegertes_title_backbutton a{
        width: 100px;
        background: linear-gradient(to right, rgba(142, 25, 25, 0.8) 0%,rgba(142, 25, 25, 0.6) 100%) ;
        border-right: 1.5px outset rgba(13, 24, 24, 0.7);
        border-radius: 0;
        text-decoration: none;
        cursor: pointer;
        justify-content: center;
        align-items: center;
        color: rgba(255, 255, 255, 0.89);
        text-shadow: 1px 1px 0.1px rgba(0, 0, 0, 0.8);
        
    }
    .szovegertes_title_text{
        width: calc(100% - 100px);
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #111111; /* font color 1 whitelike*/
        text-shadow: 1px 1px 0.1px rgba(255, 255, 255, 0.2); /* t_shadow 1 (feher) blacktext */
    }
    .szovegertes_title_text p, .szovegertes_title_backbutton a{
        font-weight: 700;
        color: rgb(255, 255, 255);
        text-shadow: 0 0 4px rgba(0, 0, 0, 0.7), 0 0 12px rgba(0, 0, 0, 0.8);
        font-family: "Karla";
        text-align: center;
    }
    .szovegertes_maincontent{
        display: flex;
        border-left: #000 solid 1px;
        border-right: #000 solid 1px;
        box-shadow: 
            inset 0 -1px 0 rgba(0, 0, 0, 0.3),         /* test */
            0 1px 2px rgba(0, 0, 0, 0.3); 
        
    }
    .szovegertes_right, .szovegertes_left, .kitolto_center{
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        font-family: "Crimson Pro", serif;
    }
    .szovegertes_left_cimwrapper, .kitolto_cimwrapper{
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        border: 1px solid rgba(44, 54, 44, 0.9); /* color 7 */
        border-radius: 10px;
        background: radial-gradient(circle at 50% 35%, #f8ebcfee 0%, #efe3ccec 70%, #e8dfd0e8 100%);
        box-shadow:
            0 4px 12px rgba(0, 0, 0, 0.25),      /* main depth */
            0 0 0 1px rgba(255, 255, 255, 0.4) inset,  /* inner light border */
            0 1px 0 rgba(255, 255, 255, 0.6);    /* top highlight */
    }
    .kitolto_cimwrapper{
        margin-bottom: 10px;
    }
    .szovegertes_left_cimwrapper_kep{
        width: 30%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .szovegertes_left_cimwrapper_title p{
        font-family: "Crimson Pro", serif;
        font-style: normal;
        font-weight: 700;
        text-align: center;
    }
    .szovegertes_left{
        display: flex;
        flex-direction: column;
        gap: 2%;
    }
    .szovegertes_left_text{
        font-family: "Crimson Pro", serif;
        font-weight: 450;
        font-style: normal;
        text-align: justify;
    }
    .szovegertes_left_textwrapper{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 75%;
        flex-shrink: 0;
        padding: 3%;
        border: 1px solid rgba(44, 54, 44, 0.9); /* color 7 */
        border-radius: 10px;
        background: radial-gradient(circle at 50% 35%, #f8ebcfee 0%, #efe3ccec 70%, #e8dfd0e8 100%);
        box-shadow:
            0 4px 12px rgba(0, 0, 0, 0.25),      /* main depth */
            0 0 0 1px rgba(255, 255, 255, 0.4) inset,  /* inner light border */
            0 1px 0 rgba(255, 255, 255, 0.6);    /* top highlight */
    }
    .szovegertes_left_forrasok{
        margin-top: 20px;
        padding-top: 5px;
        width: 90%;
        border-top: 1px solid rgba(44, 54, 44, 0.9); /* color 7 */;
        min-height: 40px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
    }
    .kitolto_forrasok{
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        align-items: center;
        width: 60%;
        max-width: 80%;
        align-self: center;
        margin: 0 auto 10px;
        padding: 5px;
        border: 1px solid rgba(44, 54, 44, 0.9); /* color 7 */
        border-radius: 10px;
        background: radial-gradient(circle at 50% 35%, #f8ebcfee 0%, #efe3ccec 70%, #e8dfd0e8 100%);
        box-shadow:
            0 4px 12px rgba(0, 0, 0, 0.25),      /* main depth */
            0 0 0 1px rgba(255, 255, 255, 0.4) inset,  /* inner light border */
            0 1px 0 rgba(255, 255, 255, 0.6);    /* top highlight */
    }
    .szovegertes_left_forrasok_linkek{
        display: flex;
        flex-direction: row;
        gap: 1rem;
    }
    .szovegertes_left_forrasok_linkek a{
        font-weight: 500;
        color: rgba(0, 0, 0, 0.9);
        padding: 1px 15px 1px 15px;
        border-radius: 10px;
        background: linear-gradient(150deg, #d01c5288, #a6357e89);
        text-shadow: 1px 1px 0.1px rgba(255, 255, 255, 0.2); /* t_shadow 1 (feher) blacktext */
        border: solid 0.5px rgba(0, 0, 0, 0.3);
        text-decoration: none;
    }

.feladat_cim{
    font-weight: 500;
    text-align: center;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60%, 100% { transform: translateX(-3px); }
    40%, 80% { transform: translateX(3px); }
}

@keyframes scaleAnimation {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}

.feladat_max_szavak {
    display: inline-block;
}

.feladat_max_szavak.shake {
    animation: shake 0.5s;
}

.feladat_max_warning {
    display: inline-block;
    color: #dc3545;
    font-weight: bold;
    font-size: 0.9rem;
    margin-left: 5px;
}
.kerdes_csoport{
    border: 1px solid rgba(44, 54, 44, 0.9); /* color 7 */
    padding: 2% 4% 2% 4%;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.25),      /* main depth */
        0 0 0 1px rgba(255, 255, 255, 0.4) inset,  /* inner light border */
        0 1px 0 rgba(255, 255, 255, 0.6);    /* top highlight */
}
.kerdes_cim{
    text-align: center;
    padding: 3px 0 5px 0;
}
.kerdes_cim span{ /* azert kell egy span a p-n belul mert sima text centerrel extendel a border is mivel alapbol full width */
    display: inline-block;
    font-weight: bold;
    border-bottom: solid 0.4px #000000;
}
.single_feleletvalaszto{
    text-align: center;
}
.single_feleletvalaszto p{
    text-align: left;
}
.multi_feleletvalaszto{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.3rem;
    margin-bottom: 0.5rem;
}
.single_feleletvalaszto label{
    min-width: 20%;
    background: linear-gradient(150deg, #d3511e20, #9011002c);
}
.single_feleletvalaszto label, .multi_feleletvalaszto label {
    display: inline-block;
    cursor: pointer;
	border: 1px outset #000000;
	color: #000000;
	margin-right: 1rem;
	padding: 0.5em;
	border-radius: 10px;
    text-shadow: 1px 1px 0.1px rgba(255, 255, 255, 0.2); /* t_shadow 1 (feher) blacktext*/
    text-align: center;
    transition: border-style 0.3s ease-out, box-shadow 0.3s ease-out, transform 0.1s ease, background 0.3s ease-out;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
     user-select: none;
    -webkit-user-select: none; 
    -moz-user-select: none;
}
.single_feleletvalaszto label:active, .multi_feleletvalaszto label:active {
    transform: scale(0.97);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}
.multi_feleletvalaszto label{
     min-width: 15%;
     background: rgba(2, 255, 2, 0.15); /* color 7 */
}
.igaz_hamis{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.3rem;
    margin-bottom: 0.5rem;
}
.igaz_hamis label{  /* border radius valtas miatt clone */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background: linear-gradient(150deg, #e3be1834, #ffbc4f2d); 
    min-width: 20%;
	border: 1.5px outset #000000;
	color: #000000;
	margin-right: 1rem;
	padding: 0.5em;
	border-radius: 5px;
    text-shadow: 1px 1px 0.1px rgba(255, 255, 255, 0.2); /* t_shadow 1 (feher) blacktext */
    text-align: center;
    transition: border-style 0.3s ease-out, box-shadow 0.3s ease-out, transform 0.1s ease, background 0.3s ease-out;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
     user-select: none;
    -webkit-user-select: none; 
    -moz-user-select: none;
}
.igaz_hamis label:active {
    transform: scale(0.97);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}

.single_feleletvalaszto label, .igaz_hamis label{
    margin-top: 0.3rem;
    margin-bottom: 0.5rem;
}

.h_checkbox{  /* pipalhato menuknel ne jelenleg meg a checkbox */
    appearance: none;
	-webkit-appearance: none;
}

.single_feleletvalaszto label:has(input[type=radio]:checked) {          /*csak radiosra szinvnaltas checkelesnel */
	background: linear-gradient(150deg, #d3511e, #901100);
	color: #fff;
    text-shadow: 1px 1px 0.1px rgba(0, 0, 0, 0.7); /* t_shadow 2 (fekete) white text */
    border: 1.5px inset rgba(13, 24, 24, 0.7); /* color 8 mod opacity */
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3); /* animacio */
}
.multi_feleletvalaszto label:has(input[type=checkbox]:checked) {                    /* ugyanaz checkboxra */
    background: linear-gradient(150deg, #0eab14, #466a3e);        
    color: #fff;
    text-shadow: 1px 1px 0.1px rgba(0, 0, 0, 0.7); /* t_shadow 2 (fekete) white text */
    border: 1.5px inset rgba(13, 24, 24, 0.7); /* color 8 mod opacity */
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3); /* animacio */
}

.igaz_hamis label:has(input[type=radio]:checked){
    background: linear-gradient(150deg, #e3be18, #ffbb4f);           /*color  1 mod szin*/
    color: rgba(0, 0, 0, 0.9);
    text-shadow: 1px 1px 0.1px rgba(255, 255, 255, 0.7); /* t_shadow 2 (fekete) white text */
    border: 1.5px inset rgba(13, 24, 24, 0.7); /* color 8 mod opacity */
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3); /* animacio */
}
.behuzo{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
    padding-top: 10px;
}
.behuzo_field {      /* maguk a behuzhato goimbok */
    display: inline-block;
    min-width: 150px;
    min-height: 44px;
    padding: 0.5rem 1rem;
    margin: 0.2rem 0;
    border: 1.5px solid rgba(13, 24, 24, 0.7); /* color 8 mod opacity */
    border-radius: 0.5rem;
    background: linear-gradient(  /*test*/
        150deg,
        rgba(255, 255, 255, 0.50),
        rgba(240, 240, 240, 0.40)
        )
}
.behuzo_field label{ /* ahova behuzod, annak a textje*/
    color: #000000;
    text-shadow: 1px 1px 0.1px rgba(255, 255, 255, 0.4); /* t_shadow 1 (feher) blacktext */
}

.behuzo_field:focus { 
    outline: 3px solid rgba(79, 144, 188, 0.25); 
}

.behuzo_field:not(:empty) { /* nem pontos mire jo a not empty, ui. ennek semmi ertelme */
   /* background: rgba(255, 255, 255, 0.1); /* color 7 mod opacity*/
    /*border: 1.5px outset #000000;*/
}

.behuzo_lehetosegek_lista {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 0.5rem;
    padding: 12px;
    min-height: 50px;
}

.behuzo_lehetseges_megoldas { /*legacy */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.3rem 1.4rem;
    background: rgba(178, 211, 30, 0.2);      /*color  1 mod szin*/
    border: 1.5px outset rgba(13, 24, 24, 0.7); /* color 8 mod opacity */
    border-radius: 6px;
    cursor: grab;
    user-select: none;
    font-weight: 550; /* text bolding */
    transition: all 0.2s;
}

.behuzo_lehetseges_megoldas:hover {
    /*background: #e0e0e0; */ /* kene animacio minden gomb hoverre*/
}

.behuzo_lehetseges_megoldas:active {
    cursor: grabbing;
    opacity: 0.7;
}


.szovegertes_submit_wrapper{ /*ez tartja 100/ szelessegen az egeszet*/
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 1rem;
}
.szovegertes_submit_wrapper > .szovegertes_osszpont{ /* a generator egyes kitolto fajloknal duplikalja ezt az elemet a buttonwrapper melle, ez a masolat sose kap tartalmat, csak eltolja a gombot */
    display: none;
}
.szovegertes_submit_buttonwrapper{ /*ez kulon csak a hattere a gombnak*/
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(44, 54, 44, 0.9); /* color 7 */
    border-radius: 10px;
    padding: 2% 4% 2% 4%;
    background: radial-gradient(circle at 50% 35%, #f8ebcfee 0%, #efe3ccec 70%, #e8dfd0e8 100%);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.25),      /* main depth */
        0 0 0 1px rgba(255, 255, 255, 0.4) inset,  /* inner light border */
        0 1px 0 rgba(255, 255, 255, 0.6);    /* top highlight */
}
.szovegertes_submit {
    margin: 5px 20% 5px 20%;
    padding: 12px 30px 12px 30px;
    border-radius: 1rem;
    color: rgba(226, 226, 226, 0.9);
    text-wrap: nowrap;
    font-family: "Crimson Pro", serif;
    font-weight: 700;
    font-size: 1.1rem;
    text-shadow: 1px 1px 0.1px rgba(0, 0, 0, 0.4); /* t_shadow 1 (feher) blacktext */
    cursor: pointer;
    background: linear-gradient(150deg, #34632f, #003400)
}

/* Parosito styles - a regi fajta behuzo cloneja */
.parosito{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 5px;
    gap: 0.6rem;
}
.parosito_field {
    display: flex;
    flex-direction: column;
    align-items: space-around;
    min-width: 60%;
    max-width: 95%;
    padding: 0.5rem 1rem;
    margin: 0.2rem 0;
    border: 1.5px solid rgba(13, 24, 24, 0.7); /* color 8 mod opacity */
    border-radius: 0.5rem;
    background: linear-gradient( 
        150deg,
        rgba(255, 255, 255, 0.50),
        rgba(240, 240, 240, 0.40)
        );
}
.parosito_field label {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    color: #000000;
    text-shadow: 1px 1px 0.1px rgba(255, 255, 255, 0.4); /* t_shadow 1 (feher) blacktext */
}
.parosito_osszekotoline{
    height: 2px;
    width: 100%;
    background-color: #000;
}
.parosito_field:focus {
    outline: 3px solid rgba(79, 144, 188, 0.25);
}

.parosito_field:not(:empty) { /*teljesen folosleges de kell legacy importok miatt*/
    /*background: rgba(255, 255, 255, 0.1); /* color 7 mod opacity*/
   /* border: 1.5px outset #000000;*/
}

.parosito_dropzone {
    display: inline-block;
    min-width: 90px;
    min-height: 26px;
    padding: 0;
    border: 0.15rem dashed rgba(13, 24, 24, 0.7); /* color 8 mod opacity */
    border-radius: 8px 8px 10px 10px;
    color: #000000;
    cursor: grab;
    background-color: transparent;
    text-align: center;
    vertical-align: middle;
    background: linear-gradient(150deg, #9b25ad23, #a885ab27);
}
.parosito_dropzone:not(:empty){
    border: none;
}
.parosito_dropzone:focus {
    outline: none;
}

.parosito_lehetosegek_lista {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 0.5rem;
    padding: 12px;
    min-height: 50px;
}

.parosito_lehetseges_megoldas {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px 18px;
    background: linear-gradient(150deg, #9a25ad, #a885ab);
    border: 1.5px outset rgba(13, 24, 24, 0.7); /* color 8 mod opacity */
    border-radius: 8px 8px 10px 10px;
    cursor: grab;
    user-select: none;
    font-weight: 550; /* text bolding */
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    color: rgb(255, 255, 255);
    text-shadow: 1px 1px 0.1px rgba(0, 0, 0, 0.7); /* t_shadow 2 (fekete) white text */
}
.parosito_lehetseges_megoldas.parosito_alreadyfilled {
    background: linear-gradient(150deg, #ad2564, #ab8599);
}
.parosito_lehetseges_megoldas:active {
    cursor: grabbing;
    opacity: 0.7;
}
/* BEHELYETTESÍTŐ sTYLE */
        .behelyettesito {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 100%;
        }

        .behelyettesito_szoveg {
            width: 95%;
            font-family: "Crimson Pro", serif;
            font-weight: normal;
            color: #333;
            text-align: justify;
        }

        .behelyettesito_field {
            display: inline;
            margin: 0 0.2rem;
            white-space: normal;
        }

        .behelyettesito_field label {
            display: inline;
        }

        .behelyettesito_single_dropzone, .behelyettesito_multi_dropzone{
            display: inline-block;
            position: relative;
            min-width: 70px;
            min-height: 26px;
            padding: 2px 4px;
            border: 0.15rem dashed rgba(13, 24, 24, 0.6);
            border-radius: 4px;
            color: #000000;
            text-align: center;
            vertical-align: middle;
        }

        .behelyettesito_single_dropzone:focus {
            outline: none;
        }
        .behelyettesito_single_dropzone{
            background: linear-gradient(150deg, #27b0f51f, #60978f1f);
        }
        .behelyettesito_multi_dropzone {
            background-color: rgba(39, 178, 245, 0.15);
            margin: 4px 6px;
        }

        .behelyettesito_multi_dropzone:focus {
            outline: none;
        }

        .behelyettesito_multi_dropzone + .behelyettesito_multi_dropzone::before {
            content: ",";
            position: absolute;
            left: -10px;
            color: #333;
            font-size: 1.2rem;
        }

        .behelyettesito_sidebyside_multi_dropzone[aria-label$="_left"] {
            display: inline-block;
            min-width: 50px;
            min-height: 26px;
            padding: 2px 8px;
            border: 0.15rem dashed rgba(0, 0, 0, 0.5);
            border-right: none;
            border-radius: 6px 0 0 6px;
            color: #000000;
            background-color: rgba(219, 206, 16, 0.25);
            text-align: center;
            vertical-align: middle;
            margin-right: 0;
            white-space: normal;
        }

        .behelyettesito_sidebyside_multi_dropzone[aria-label$="_right"] {
            display: inline-block;
            min-width: 50px;
            min-height: 26px;
            padding: 2px 8px;
            border: 0.15rem dashed rgba(0, 0, 0, 0.5);
            border-left: none;
            border-radius: 0 6px 6px 0;
            color: #000000;
            background-color: rgba(250, 57, 22, 0.25);
            text-align: center;
            white-space: normal;
            vertical-align: middle;
        }

        .behelyettesito_sidebyside_multi_dropzone:focus {
            outline: none;
        }

        /* Filled dropzone states - dropzone INVISIBLE, bubble shows */
        .behelyettesito_single_dropzone:not(:empty),
        .behelyettesito_multi_dropzone:not(:empty) {
            border: none;
            background-color: transparent;
            padding: 0;
            min-width: 0;
            min-height: 0;
            white-space: normal;
            max-width: 100%;
        }
        .behelyettesito_sidebyside_multi_dropzone:not(:empty) {
            border: none;
            background-color: transparent;
            padding: 0;
            min-width: 0;
            min-height: 0;
        }
        .behelyettesito_sidebyside_multi_dropzone[aria-label$="_left"]:not(:empty) {
            margin-right: -2px;
        }
        .behelyettesito_sidebyside_multi_dropzone[aria-label$="_right"]:not(:empty) {
            margin-left: -2px;
        }

        /* Bubbles inside dropzones - KEEP colors, adjust size */
        .behelyettesito_single_dropzone .behelyettesito_lehetseges_megoldas,
        .behelyettesito_multi_dropzone .behelyettesito_lehetseges_megoldas {
            height: auto;
            padding: 4px 10px;
            line-height: normal;
            margin: 0;
            white-space: normal;
            max-width: 100%;
            word-break: break-word;
        }
        /* Sidebyside bubbles - text aligned to form word */
        .behelyettesito_sidebyside_multi_dropzone[aria-label$="_left"] .behelyettesito_sidebyside_lehetseges_megoldas {
            justify-content: flex-end;
            text-align: right;
            padding: 4px 10px;
            border-radius: 6px 0 0 6px;
            margin: 0;
            height: auto;
            line-height: normal;
        }
        .behelyettesito_sidebyside_multi_dropzone[aria-label$="_right"] .behelyettesito_sidebyside_lehetseges_megoldas {
            justify-content: flex-start;
            text-align: left;
            padding: 4px 10px;
            border-radius: 0 6px 6px 0;
            margin: 0;
            height: auto;
            line-height: normal;
        }

        .behelyettesito_lehetosegek {
            margin-top: 1rem;
            padding-top: 0.5rem;
        }

        .behelyettesito_lehetseges_megoldas {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            padding: 6px 18px;
            background: linear-gradient(150deg, #27b2f5, #60978f);
            border: 1.5px outset rgba(13, 24, 24, 0.6);
            border-radius: 6px;
            user-select: none;
            font-weight: 550;
            margin: 0.2rem;
            color: rgb(255, 255, 255);
            text-shadow: 1px 1px 0.1px rgba(0, 0, 0, 0.7); /* t_shadow 2 (fekete) white text */
        }

        .behelyettesito_sidebyside_lehetseges_megoldas[data-side="left"] {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            padding: 6px 18px;
            background: linear-gradient(90deg, #d4a60e 0%, #d4a60e 60%, #c49a0a 100%);
            border: 1.5px outset rgba(13, 24, 24, 0.6);
            border-right: 2px solid rgba(0, 0, 0, 0.3);
            border-radius: 6px 0 0 6px;
            user-select: none;
            font-weight: 550;
            margin: 0.2rem;
            color:rgb(255, 255, 255);
            text-shadow: 1px 1px 0.3px rgba(0, 0, 0, 0.9); /* t_shadow 2 (fekete) white text */
        }

        .behelyettesito_sidebyside_lehetseges_megoldas[data-side="right"] {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            padding: 6px 18px;
            background: linear-gradient(270deg, #d3511e 0%, #d3511e 60%, #e08a1e 100%);
            border: 1.5px outset rgba(13, 24, 24, 0.6);
            border-left: 2px solid rgba(0, 0, 0, 0.3);
            border-radius: 0 6px 6px 0;
            user-select: none;
            font-weight: 550;
            margin: 0.2rem;
            color:rgb(255, 255, 255);
            text-shadow: 1px 1px 0.3px rgba(0, 0, 0, 0.7); /* t_shadow 2 (fekete) white text */
        }





/*base feladatok oldal overrideok mert a kurzusokbol lett forkolva*/


.kurzusok_maincontent::before{
    background: linear-gradient(
        rgba(13, 24, 24, 0.2), /* Dark green tint top */
        rgba(13, 24, 24, 0.2)  /* Dark green tint bottom */
    ), url(assets/feladatok/feladatok_main_back.jpg);
    background-size: 100% 100%;
    filter: blur(4px);
}
.k_m_fokategoria_cim p {
    width: 99%;
    text-align: center;
    font-family: "Crimson Pro", serif;
    font-weight: 600;
    font-size: 1.3rem;
    color: rgb(255, 255, 255);
}
.f_main_fokategira_cim{ /*magára a p tagre override*/
       
    
    /* +++!!!!! javítsd erre a tagre a fölötte lévőt !!!!!*/
}
.feladatok_felkeszito_card, .feladatok_regular_card, .sidefeature_feladatok_regular_card{
    position: relative;
    padding: 12px;
    display: flex;
    flex-direction: column;
    border-radius: 13px;
    border: 1px solid rgba(0, 0, 0, 0.582);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.25),      /* main depth */
        0 0 0 1px rgba(255, 255, 255, 0.4) inset,  /* inner light border */
        0 1px 0 rgba(255, 255, 255, 0.6);    /* top highlight */
    /*box-shadow:
    0 8px 20px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.4);*/
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out; /*transition 1 emelkedo*/
        
}

.f_felkeszito_card_top{

    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.f_regular_card_top, .sidefeature_f_regular_card_top{ /* a regular card a felkeszitobol lett forkolva ezert sok element ugyan az benne*/
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.sidefeature_f_regular_card_top{
    height: 25px;
}
.f_regular_card_top img, .sidefeature_f_regular_card_top img{
    height: 90%;
}
.f_f_card_top_flag{
    display: flex;
    align-items: center;
    justify-content: center;
}
.f_f_card_top_flag img{
    width: 90%;
    height: 90%;
}
.f_f_card_top_miniicons{
    width: 80%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}
.f_f_card_top_miniicons img{
    height: 20px;
}
.f_f_card_main{
    height: calc(100% - 30px);
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}
.f_f_card_main_title{
    height: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.f_f_card_main_title p, .f_r_card_main_title p, .sidecontent_f_r_card_main_title p{
    font-family: "Crimson Pro", serif;
    font-weight: 600;
    text-align: center;
    line-height: 1.2rem;
}
.f_f_card_main_title p, .f_r_card_main_title p{
    font-size: clamp(1rem, 4.5vw, 1.5rem);
}
.sidecontent_f_r_card_main_title p{
    font-size: clamp(1.1rem, 1.38vw, 1.3rem);
}
.f_f_card_main_nagykep{
    height: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sidecontent_f_r_card_main_nagykep img{
    height: 80%;
}
.f_r_card_main_nagykep, .sidecontent_f_r_card_main_nagykep{ /*reg card*/
    height: 60%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.f_f_card_main_leiras{
    height: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.f_f_card_main_leiras p{
    font-family: "Crimson Pro", serif;
    font-weight: 600;
    font-size: clamp(1rem, 4.5vw, 1.4rem);
    text-align: center;
    line-height: 1.2rem;
}
.f_r_card_main_title{ /*reg card*/
    height: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.f_f_card_main_button{
    height: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.f_r_card_main_button{ /*reg card*/
    height: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.f_f_card_redirbutton{
    padding: 5px 40px 5px 40px;
    border-radius: 1rem;
}
.f_f_card_redirbutton, .sidecontent_f_f_card_redirbutton{
    font-weight: 700;
    font-family: "Crimson Pro", serif;
    font-size: clamp(0.9rem, 1.18vw, 1.1rem);
    color: #fff;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    z-index: 1; 
    border: 1px solid #000;
    transition: color 0.35s ease;
    -webkit-transition: color 0.35s ease;
}
.f_f_card_redirbutton::before, .sidecontent_f_f_card_redirbutton::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.35s ease;
    -webkit-transition: opacity 0.35s ease;
    pointer-events: none;
}
.f_f_card_redirbutton, .sidecontent_f_f_card_redirbutton{
    color: #fff;
    text-decoration: none;
    text-shadow: 1px 1px 0.1px rgba(0, 0, 0, 0.7);
}
.sidecontent_f_f_card_redirbutton{
    padding: 6px 30px 6px 30px;
    border-radius: 1rem;
}

.sidefeature_feladatok_regular_card .f_f_card_main{
    height: auto;
    gap: 0.5rem;
}
.sidefeature_feladatok_regular_card .sidecontent_f_r_card_main_title{
    height: auto;
}
.sidefeature_feladatok_regular_card .sidecontent_f_r_card_main_nagykep{
    height: auto;
    width: 100%;
}
.sidefeature_feladatok_regular_card .sidecontent_f_r_card_main_nagykep img{
    max-width: 70%;
    max-height: 70px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 0.4rem;
}
.sidefeature_feladatok_regular_card .f_r_card_main_button{
    height: auto;
}

.f_card_white{
    background: linear-gradient(  /*test*/
        135deg,
        rgba(255, 255, 255, 0.75),
        rgba(240, 240, 240, 0.65)
        );
}
.f_card_blue {
    background: linear-gradient(
        135deg,
        rgba(190, 215, 255, 0.85) 0%,
        rgba(225, 235, 255, 0.75) 40%,
        rgba(255, 255, 255, 0.60) 100%
    );
}
.f_card_red {
    background: linear-gradient(
        135deg,
        rgba(235, 190, 190, 0.85) 0%,
        rgba(245, 215, 215, 0.75) 40%,
        rgba(255, 255, 255, 0.60) 100%
    );
}
.f_card_rozsaszin {
    background: linear-gradient(
        135deg,
        rgba(240, 200, 225, 0.85) 0%,
        rgba(250, 220, 240, 0.75) 40%,
        rgba(255, 255, 255, 0.60) 100%
    );
}
.f_card_green {
    background: linear-gradient(
        135deg,
        rgba(200, 230, 200, 0.85) 0%,
        rgba(220, 240, 220, 0.75) 40%,
        rgba(255, 255, 255, 0.60) 100%
    );
}

.f_card_button_c1{
    background: linear-gradient(150deg, #d01c52, #a6357e);
}
.f_card_button_c1::before{
    background: linear-gradient(150deg, #e8406e, #c055a0);
}

.f_card_button_c2{
    background: linear-gradient(150deg, #D93D04,#8C1C03);
}
.f_card_button_c2::before{
    background: linear-gradient(150deg, #e47938, #b44830);
}

.f_card_button_c3{
    background: linear-gradient(150deg, #6669e6,#6b498a);
}
.f_card_button_c3::before{
    background: linear-gradient(150deg, #7b7cf0, #8160a8);
}

.f_card_button_c4{
    background: linear-gradient(150deg, #f56e64, #d54a73);
}
.f_card_button_c4::before{
    background: linear-gradient(150deg, #ff8b8a, #da6aa1);
}

.f_card_button_c1:hover::before, .f_card_button_c2:hover::before, .f_card_button_c3:hover::before, .f_card_button_c4:hover::before{
    opacity: 1;
}

.kurzusok_sidecontent::before{;
    background-repeat: no-repeat;
    background-size: cover;

    filter: blur(4px);
}
.feladatokvalaszto_focim{ /*ez csak a felso sor es hulyen van megoldva*/
    color: rgba(246, 244, 244, 0.9);
    text-shadow: 1px 1px 0.1px rgba(0, 0, 0, 0.7); /* t_shadow 2 (fekete) white text */
    font-weight: 700;
    font-size: 2.5rem;
    text-align: center;
}
.k_s_k_l_checkbox:checked ~ .k_s_k_l_checkbox_switch{
    background-color: rgba(196, 81, 4, 0.998);
}
.f_main_fokategira_cim {
    color: #fffdf4; 
    text-shadow: 0 1px 2px rgba(13, 24, 24, 0.9), 0 2px 6px rgba(13, 24, 24, 0.7), 0 0 12px rgba(13, 24, 24, 0.5);
}
.k_s_k_listaelem_alelemmel{
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        border-top: #000 1px solid;
        border-bottom: #000 1px solid;
        line-height: 1rem;
        flex-shrink: 0;
        
}
.k_s_k_listaelem_alelemmel_fo{
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin: 0.1rem;
        cursor: pointer;
        gap: 0.2rem;
        height: 48px;
        flex-shrink: 0;
}
.k_s_k_listaelem_alelemmel_al{
    display: flex;
    width: 80%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 0.1rem;
    cursor: pointer;
    gap: 0.2rem;
    height: 40px;
    flex-shrink: 0;
}
.k_s_k_listaelem_alelemmel_al span p{
    font-size: 1rem;
}
.validation-correct {
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 5px #28a745 !important;
    transition: box-shadow 0.3s ease;
    margin: 5px 6px !important;
}

.validation-incorrect {
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 5px #dc3545 !important;
    transition: box-shadow 0.3s ease;
    margin: 5px 6px !important;
}

.szovegertes_osszpont {
    color: #000000 !important;
}

.score-summary {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
}
.score-line {
    font-size: 0.95rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.score-value-green { color: #28a745; font-weight: 700; }
.score-value-yellow { color: #d39e00; font-weight: 700; }
.score-value-red { color: #dc3545; font-weight: 700; }
.summary-total {
    margin-top: 0.25rem;
    padding-top: 0.75rem;
    border-top: 2px solid rgba(0, 0, 0, 0.25);
    font-size: 1.15rem;
    font-weight: 800;
    text-align: center;
}

.score-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
}

.score-dot-green {
    background-color: #28a745;
}

.score-dot-yellow {
    background-color: #ffc107;
}

.score-dot-red {
    background-color: #dc3545;
}

/* Greyscale for parent (fo) row when its checkbox is off */
.k_s_k_listaelem_alelemmel_fo.kategoria-off .k_s_k_l_image img {
    filter: grayscale(100%);
    opacity: 0.45;
    transition: filter 0.3s ease, opacity 0.3s ease;
}
.k_s_k_listaelem_alelemmel_fo.kategoria-off .k_s_K_l_checkbox_text p {
    filter: grayscale(100%);
    opacity: 0.45;
    transition: filter 0.3s ease, opacity 0.3s ease;
}
.k_s_k_listaelem_alelemmel_fo .k_s_k_l_image img,
.k_s_k_listaelem_alelemmel_fo .k_s_K_l_checkbox_text p {
    transition: filter 0.3s ease, opacity 0.3s ease;
}
.kotelezo_heading{
    display: none;
}