:root{
    --highlight_cyan: #81e1fa;
    --light_border: #4b51a6;
    --hud-opacity: rgba(0, 34, 255, 0.48);
}

@keyframes lightpulse{
    from {background-color: pink;}
    to{background-color: rgb(253, 146, 114);}
}

.login_window table {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
    margin-top: 1em;
}

.root_holder{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

body{
    overflow: hidden;
    width: 100dvw;
    height: 100dvh;
    position: absolute;
    margin: 0px;
    padding: 0px;
    color: rgb(23, 23, 42);
    font-family: "Quicksand", sans-serif;
}

.maincontainer {
    width: 100dvw;
    height: 100dvh;
    padding: 0px;
    margin: 0px;
    position: absolute;
    top: 0px;
    left: 0px;
    background: #1c3c5c;
    background: linear-gradient(90deg, rgb(0, 0, 0) 0%, rgb(0, 52, 104) 38%, rgb(1, 2, 2) 100%);
}

.mainpanel{
    margin: 4px;
    background: linear-gradient(45deg, rgb(12, 35, 57) 0%, rgb(2, 0, 23) 38%, rgb(29, 35, 40) 100%);
    border: 2px solid var(--light_border);
    border-radius: 1em;
    box-shadow: 6px 6px 16px var(--highlight_cyan);
    padding: 0.5em;
    width: calc(100dvw - 24px);
    max-width: 80dvw;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    max-height: 80dvh;
    top: 10dvh;
}

.mainmenubar {
    position: relative;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
}

.fomenu{
    width: 100%;
    background: linear-gradient(90deg, rgb(12, 35, 57) 0%, rgb(23, 50, 77) 38%, rgb(26, 29, 32) 100%);
    border-radius: 0;
    height: 3.4em;
}

.menurendezo{
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 0.5em;
    gap: 1em;
    flex-flow: nowrap;
    margin-left: auto;
    margin-right: auto;
}

.spec_separator{
    height: 3px;
    width: 100%;
    border: 0;
    padding: 0;
    margin: 0;
    background: linear-gradient(90deg, rgb(122, 128, 134) 0%, rgb(88, 218, 227) 38%, rgb(58, 75, 93) 100%);
    position: relative;
    z-index: 1;
    box-shadow: 3px 3px 6px black;
}

.menucard{
    background-color: rgb(31, 31, 31);
    border: 2px solid var(--light_border);
    border-radius: 0.5em;
    box-shadow: 6px 6px 10px black, inset 3px 3px 5px lightblue, inset -3px -3px 5px black;
    min-height: 4em;
    transition: all 0.5s ease;
    display: grid;
    grid-template-columns: 1em auto 1em;
    gap: 1em;
    min-width: 15vw;
    color: white;
    cursor: pointer;
    text-align: center;
    background: linear-gradient(30deg, rgb(12, 27, 116) 0%, rgb(32, 101, 167) 50%, rgb(31, 21, 77) 100%);
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-size: 1.4em;
    justify-items: center;
    padding-left: 0.5em;
    padding-right: 0.5em;
}

.probaido_adatok .menucard{
    margin-top: 0.5em;
}

.menucard:hover{
    transform: rotate(1deg) scale(1.05);
}

.contentvalaszto{
    max-height: 80vh;
    display: flex;
    align-items: center;
    gap: 1em;
    margin: 2em;
    padding: 1em;
    background: #f5f5f5;
    background: linear-gradient(90deg, rgba(245, 245, 245, 1) 0%, rgba(218, 233, 247, 1) 50%, rgba(230, 230, 230, 1) 100%);
    box-shadow: 0px 0px 12px gray;
    flex-flow: wrap;
    border-radius: 1em;
    border: var(--light_border);
    overflow-x: hidden;
    overflow-y: auto;
}

.adatpanel{
    background: #f5f5f5;
    background: linear-gradient(90deg, rgba(245, 245, 245, 1) 0%, rgba(218, 233, 247, 1) 50%, rgba(230, 230, 230, 1) 100%);
    padding: 2em;
    box-sizing: border-box;
    margin: 1em;
    border-radius: 1em;
    border: var(--light_border);
}

#password-strength {
    height: 10px;
    border-radius: 5px;
}

#password-strength .progress-bar {
    border-radius: 5px;
}

#password-strength .bg-danger {
    background-color: red;
}

#password-strength .bg-warning {
    background-color: orange;
}

#password-strength .bg-success {
    background-color: green;
}

#password-conditions .password-condition {
    margin-top: 2px;
    width: 50%;
    color: grey;
}

#password-conditions .password-condition.met {
    background-color: green;
    color: #fff;
}

#password-conditions p{
    margin-top: 5px;
    font-size: 22px;
}

.tartalomtarolo {
    padding: 0.5em;
    margin: 0.5em;
    max-height: calc(80dvh - 5em);
    max-height: 83dvh;
    overflow-y: auto;
    transition: all 0.25s ease;
    box-sizing: border-box;
}

.szakma_input_taglist {
    width: fit-content;
    min-width: 10em;
    display: block;
    background-color: lightblue;
    border: 1px solid blue !important;
}
.kat_input_taglist{
    width: 75vw;
}

.quiz_practice_kat_holder{
    margin-left: auto;
    margin-right: auto;
}

.quiz_practice_control_bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
    position: absolute;
    bottom: 1em;
    left: 0;
    width: calc(100vw - 2em);
    padding: 1em;
}

.valasz_tarolo {
    height: calc(100vh - 20em);
    overflow-y: auto;
    border: 3px double black;
    box-shadow: 3px 3px 6px black;
    margin: 0px;
    max-height: calc(80dvh - 12em);
    background: linear-gradient(90deg, rgba(245, 245, 245, 1) 0%, rgba(218, 233, 247, 1) 50%, rgba(230, 230, 230, 1) 100%);
    border-radius: 1em;
}

.valasz_tarolo fieldset {
    display: grid;
    gap: 0.5em;
}

.azenvalaszom{
    outline: 3px solid blue;
    background-color: pink;
    padding: 4px;
    margin: 4px;
    transform: none;
    border-radius: 0.5em;
}

.egypar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5em;
    border: 1px solid black;
    padding: 0.5em;
    border-radius: 0.5em;
    background-color: pink;
}

.kerdes_eredmeny{
    border: 1px dotted black;
    margin: 0.5em;
    padding: 0.5em;
}

.eredmenykiejlzo {
    overflow-y: auto;
    max-height: calc(100vh - 18em);
    border-radius: 0.5em;
    background-color: whitesmoke;
}

.eredmenycim{
    margin-right: 2em;
    transform: none;
    font-size: larger;
    text-decoration: underline;
}

.quiz_magyarazat {
    float: right;
    border: 1px solid gold;
    box-shadow: 0px 0px 16px yellow;
    margin-right: 1em;
}

.betujel{
    background-color: darkblue;
    padding: 4px;
    border-radius: 4px;
    transform: none;
    float: left;
}

.magyarazat_doboz{
    padding: 0.5em;
    margin: 0.5em;
    margin-bottom: 5em;
}

.showhidepassword {
    margin-left: 0.5em;
}

.learning_valasz {
    border: 1px solid black;
    border-radius: 0.5em;
    padding: 0.5em;
    background-color: rgb(70, 70, 70);
    color: white;
    font-family: Segoe UI,Arial,sans-serif;
    font-size: 1.1em;
    line-height: normal;
    cursor: pointer;
    text-align: center;
    transition: all 0.25s ease;
}

.learning_valasz:hover{
    background-color: rgb(53,149,246);
}

.quiz_learn_elore{
    background-color: lightgreen;
}

.eredmenyfejlec{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
    font-size: 1.5em;
}

.sikeres{
    color: rgb(0, 46, 0);
    text-align: right;
}

.sikertelen{
    color: rgb(48, 0, 0);
    text-align: left;
}

.eredmenyfejlec div {
    border: 1px dotted black;
    padding: 0.5em;
}

.dynamic_st_data {
    width: 100%;
    box-sizing: border-box;
}

.stat_graph_kat_cimke{
    writing-mode: vertical-rl;
    align-content: center;
    letter-spacing: 0;
    transform: rotate(-12deg);
}

.stat_graph_kategoriacsoport{
    display: grid;
    gap: 0.5em;
    padding: 0.25em;
    border-radius: 1em;
    border: 1px solid black;
    align-content: baseline;
    background-color: lightgray;
    color: black;
    font-family: Segoe UI,Arial,sans-serif;
    font-weight: bold;
    width: 4em;
}

.stat_graph_kategoriacsoport_dummy{
    width: 4em;
    border-radius: 1em;
    border: 1px solid black;
    background-color: lightgray;
    color: black;
}

.jelzobogyo {
    padding: 0.5em;
    border-radius: 1em;
    border: 1px solid black;
    max-height: 2.5em;
    text-align: center;
    color: black;
}

.stat_graph_kategorialista {
    gap: 0.5em;
    overflow-x: hidden;
    margin-top: 1em;
    padding-top: 1em;
    padding-bottom: 1em;
    position: relative;
    height: 21em;
    margin-left: auto;
    margin-right: auto;
    user-select: none;
    border: 1px solid aqua;
    box-shadow: 0px 0px 10px blue;
    background-color: lightblue;
    border-radius: 1em;
}

.szakmavalaszto {
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: fit-content;
}

.eredmeny_alacsony{
    background-color: pink;
    outline: 1px solid red;
    box-shadow: 0px 0px 6px red;
}

.eredmeny_kozepes{
    background-color: lightyellow;
    outline: 1px solid goldenrod;
    box-shadow: 0px 0px 6px gold;
}

.eredmeny_jo{
    background-color: rgb(32, 178, 144);
    outline: 1px solid green;
    box-shadow: 0px 0px 6px green;
}

.eredmeny_kivalo{
    background-color: lightgreen;
    outline: 1px solid green;
    box-shadow: 0px 0px 6px lightgreen;
}

.eredmeny_na{
    background-color: lightgray;
    outline: 1px solid gray;
}

.stat_szakmavalaszto{
    font-size: 1em;
    font-family: Segoe UI,Arial,sans-serif;
    letter-spacing: 0px;
    font-weight: bold;
}

.fiokmenucard{
    background-color: rgb(0, 0, 81);
}

.stat_selected{
    outline: 3px solid gold;
    box-shadow: 0px 0px 10px yellow;
    background-color: lightyellow;
}

.stat_scroll_elem {
    position: absolute;
    transition: background 0.25s ease;
    z-index: 1;
}

.center_back{
    height: 100%;
    outline: 2px solid goldenrod;
    background-color: aliceblue;
    position: absolute;
    top: 0;
    z-index: 0;
}

.doclink{
    background-color: lightblue;
    text-decoration: underline;
    cursor: pointer;
    color: black;
}

.cookie_policy {
    z-index: 999;
    position: absolute;
    background-color: rgba(0.5, 0.5, 0.5, 0.75);
    width: 100dvw;
    height: 100dvh;
    top: 0px;
    left: 0px;
    display: grid;
    justify-content: center;
    align-content: center;
}

.cookie_content {
    background-color: whitesmoke;
    border: 1px solid black;
    width: 60dvw;
    padding: 0.5em;
    margin-left: auto;
    margin-right: auto;
}

.ontop{
    z-index: 1001;
}

.szem_adatok_tabla{
    margin-left: auto;
    margin-right: auto;
}

.fiokadatok_holder {
    text-align: center;
    background: linear-gradient(90deg, rgba(245, 245, 245, 1) 0%, rgba(218, 233, 247, 1) 50%, rgba(230, 230, 230, 1) 100%);
    border-radius: 1em;
    padding: 1em;
    max-height: 71dvh;
    overflow-y: auto;
}

.statisticsmenucard{
    background-color: #003700;
}

.fiokadatok_holder button {
    border: 1px solid gray;
    box-shadow: 3px 3px 6px gray;
    margin: 0.5em;
}

.small_separator{
    height: 0px;
    border-bottom: 1px solid black;
    width: 100%;
    box-shadow: 2px 2px 3px white, 4px 4px 6px black;
    margin: 0.5em;
}

.akciogombsav {
    display: flex;
    gap: 1em;
}

.dinamikus_szakmalista {
    display: flex;
    flex-flow: column;
    margin: 0.5em;
    border: 1px dotted black;
    height: 75dvh;
    overflow-y: auto;
    padding: 0.5em;
}

.szakma_sor {
    display: grid;
    grid-template-columns: 5fr 5fr 1fr;
    padding: 0.5em;
    border: 1px solid black;
    border-radius: 0.5em;
    background-color: lightblue;
    box-shadow: 3px 3px 6px gray;
    cursor: pointer;
}

.szakmalabel {
    border: 1px solid black;
    border-radius: 4px;
    background-color: lightblue;
    transition: all 0.25s ease;
    cursor: pointer;
    margin: 4px;
    display: block;
    margin-bottom: 0.5em;
}

.szakmalabel:hover{
    background-color: aquamarine;
}

.probaido_szakmalista {
    min-height: 1em;
    margin: 1em;
    background-color: whitesmoke;
    border: 1px solid black;
    color: black;
    max-width: 95vw;
}

.probaidolista, .aktiv_szakmalista{
    border: 1px solid black;
    box-shadow: 3px 3px 6px gray;
    min-height: 1em;
}

.cookie_policy_setup {
    margin-left: auto;
    margin-right: auto;
    display: block;
    border: 1px solid black;
    box-shadow: 0px 0px 6px aqua, 6px 6px 12px gray;
    background-color: lightblue;
}

.szamlazo_holder{
    border: 1px solid black;
    min-height: 1em;
    min-width: 15dvw;
    background-color: white;
    padding: 0.5em;
    margin-top: 1em;
    margin-bottom: 1em;
}

.szakma_sor{
    border-bottom: 1px solid black;
    border-top: 1px solid black;
}

.szakma_sor td{
    padding: 4px;
}

.szakmaelem_csomag, .szakmaelem_probaido{
    display: grid;
    grid-template-columns: auto auto auto;
    border: 1px solid black;
    padding: 4px;
    margin: 4px;
    gap: 1em;
    background-color: lightcyan;
}

.icon_fomenu {
    background-color: rgba(0, 0, 255, 0.01);
    cursor: pointer;
}

.probaido_kapcsolhato{
    cursor: pointer;
    transition: all 0.25s ease;
    background-color: lightgreen;
}

.probaido_kapcsolhato:hover{
    background-color: cyan;
}

.light {
    position: absolute;
    width: 0px;
    opacity: .75;
    background-color: #96fff5;
    box-shadow: #9fedff 0px 0px 20px 2px;
    opacity: 0;
    top: 100vh;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
}

.x1{
  -webkit-animation: floatUp 4s infinite linear;
  -moz-animation: floatUp 4s infinite linear;
  -o-animation: floatUp 4s infinite linear;
  animation: floatUp 4s infinite linear;
   -webkit-transform: scale(1.0);
   -moz-transform: scale(1.0);
   -o-transform: scale(1.0);
  transform: scale(1.0);
}

.x2{
  -webkit-animation: floatUp 7s infinite linear;
  -moz-animation: floatUp 7s infinite linear;
  -o-animation: floatUp 7s infinite linear;
  animation: floatUp 7s infinite linear;
  -webkit-transform: scale(1.6);
  -moz-transform: scale(1.6);
  -o-transform: scale(1.6);
  transform: scale(1.6);
  left: 15%;
}

.x3{
  -webkit-animation: floatUp 2.5s infinite linear;
  -moz-animation: floatUp 2.5s infinite linear;
  -o-animation: floatUp 2.5s infinite linear;
  animation: floatUp 2.5s infinite linear;
  -webkit-transform: scale(.5);
  -moz-transform: scale(.5);
  -o-transform: scale(.5);
  transform: scale(.5);
  left: -15%;
}

.x4{
  -webkit-animation: floatUp 4.5s infinite linear;
  -moz-animation: floatUp 4.5s infinite linear;
  -o-animation: floatUp 4.5s infinite linear;
  animation: floatUp 4.5s infinite linear;
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
  left: -34%;
}

.x5{
  -webkit-animation: floatUp 8s infinite linear;
  -moz-animation: floatUp 8s infinite linear;
  -o-animation: floatUp 8s infinite linear;
  animation: floatUp 8s infinite linear;
  -webkit-transform: scale(2.2);
  -moz-transform: scale(2.2);
  -o-transform: scale(2.2);
  transform: scale(2.2);
  left: -57%;
}

.x6{
  -webkit-animation: floatUp 3s infinite linear;
  -moz-animation: floatUp 3s infinite linear;
  -o-animation: floatUp 3s infinite linear;
  animation: floatUp 3s infinite linear;
  -webkit-transform: scale(.8);
  -moz-transform: scale(.8);
  -o-transform: scale(.8);
  transform: scale(.8);
  left: -81%;
}

.x7{
  -webkit-animation: floatUp 5.3s infinite linear;
  -moz-animation: floatUp 5.3s infinite linear;
  -o-animation: floatUp 5.3s infinite linear;
  animation: floatUp 5.3s infinite linear;
  -webkit-transform: scale(3.2);
  -moz-transform: scale(3.2);
  -o-transform: scale(3.2);
  transform: scale(3.2);
  left: 37%;
}

.x8{
  -webkit-animation: floatUp 4.7s infinite linear;
  -moz-animation: floatUp 4.7s infinite linear;
  -o-animation: floatUp 4.7s infinite linear;
  animation: floatUp 4.7s infinite linear;
  -webkit-transform: scale(1.7);
  -moz-transform: scale(1.7);
  -o-transform: scale(1.7);
  transform: scale(1.7);
  left: 62%;
}

.x9{
  -webkit-animation: floatUp 4.1s infinite linear;
  -moz-animation: floatUp 4.1s infinite linear;
  -o-animation: floatUp 4.1s infinite linear;
  animation: floatUp 4.1s infinite linear;
  -webkit-transform: scale(0.9);
  -moz-transform: scale(0.9);
  -o-transform: scale(0.9);
  transform: scale(0.9);
  left: 85%;
}

button:focus{
  outline: none;
}

@-webkit-keyframes floatUp{
  0%{top: 100vh; opacity: 0;}
  25%{opacity: 1;}
  50%{top: 0vh; opacity: .8;}
  75%{opacity: 1;}
  100%{top: -100vh; opacity: 0;}
}
@-moz-keyframes floatUp{
  0%{top: 100vh; opacity: 0;}
  25%{opacity: 1;}
  50%{top: 0vh; opacity: .8;}
  75%{opacity: 1;}
  100%{top: -100vh; opacity: 0;}
}
@-o-keyframes floatUp{
  0%{top: 100vh; opacity: 0;}
  25%{opacity: 1;}
  50%{top: 0vh; opacity: .8;}
  75%{opacity: 1;}
  100%{top: -100vh; opacity: 0;}
}
@keyframes floatUp{
  0%{top: 100vh; opacity: 0;}
  25%{opacity: 1;}
  50%{top: 0vh; opacity: .8;}
  75%{opacity: 1;}
  100%{top: -100vh; opacity: 0;}
}

.lanaback{
    position: absolute;
    width: 40dvw;
    left: 30dvw;
    top: 20dvh;
    opacity: 0.5;
    filter: blur(5px);
}

.noise{
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==);
}

.onlyinmobileview{
    display: none;
}

.onlywideview{
    display: block;
}

.lanasmall{
    max-height: 2.5em;
    filter: drop-shadow(0px 0px 5px aqua);
    margin-right: 0.5em;
}

.blurme{
    filter: blur(15px);
    color: lightcyan;
    background-color: lightcyan;
}
.blurme *{
    filter: blur(15px);
    color: lightcyan!important;
    background-color: lightcyan!important;
}

.fomenu button {
    font-size: 1.3em;    
}

.scifibg {
    background-image: url("/images/scifimess.svg");
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    background-size: contain;
}

.send_obs_dialog fieldset{
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0.5em;
}

.send_obs_dialog fieldset label.ui-state-active{
    background-color: navy;
    box-shadow: 0px 0px 6px blue;
}

.send_obs_dialog fieldset label.ui-state-active:hover{
    background-color: navy;
    box-shadow: 0px 0px 6px blue;
}

.parosito_panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
}

.par_jobboldal, .par_baloldal {
    display: flex;
    flex-flow: column;
    gap: 1em;
    border: 1px dotted black;
    padding: 0.5em;
    margin: 0.5em;
}

.par_elem_bal{
    cursor: pointer;
}

.par_elem_jobb{
    cursor: pointer;
}

.par_elem_bal, .par_elem_jobb {
    background-color: white;
    border: 1px solid black;
    padding: 0.5em;
    border-radius: 0.5em;
    transition: all 0.25s ease;
    cursor: pointer;
}

.par_elem_bal:hover, .par_elem_jobb:hover{
    outline: 3px solid blue;
}

.is_paired{
    outline: 2px solid green;
    box-shadow: 0px 0px 3px lightgreen;
}

.quiz_practice_control_bar button {
    z-index: 1;
}

.helyesvalasz{
    background-color: lightgreen;
    padding: 4px;
    margin: 4px;
    transform: none;
    border-radius: 0.5em;
    font-weight: 800;
}

.egyenlet {
    text-align: center;
    border: 1px solid black;
    width: fit-content;
    padding: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-radius: 1em;
    margin-bottom: 1em;
    background-color: white;
    font-size: 1.5em;
    box-shadow: 3px 3px 6px gray;
}

.szkezelo {
    background-color: whitesmoke;
    padding: 1em;
    border: 1px solid aqua;
    border-radius: 1em;
    box-shadow: 3px 3px 6px aqua;
}

.szk_actionbar {
    display: flex;
    flex-flow: row;
    gap: 2dvw;
    padding: 0.5em;
    border: 1px dotted black;
    border-radius: 1em;
    background-color: lightcyan;
    box-shadow: 3px 3px 6px gray;
    margin-bottom: 2em;
    justify-content: center;
    flex-wrap: wrap;
}

.szk_actionbar button {
    font-size: 1.2em;
    padding: 0.5em;
    border-radius: 0.5em;
    font-weight: 600;
}

.selected_tab{
    background-color: var(--highlight_cyan);
    color: black;
}

.taglista {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1em;
    font-size: 1.2em;
}

.taglista table{
    border-collapse: collapse;
}

.taglista tr:nth-child(odd){
    background-color: lightgray;
}

.group_holder_main{
    padding: 1em;
}

.group_control_bar{
    display: flex;
    flex-flow: row;
    gap: 1em;
    padding: 0.5em;
}

.group_editor{
    display: flex;
    flex-flow: column;
    gap: 0.5em;
    max-height: 70dvh;
    overflow-x: auto;
}

.org_group_element{
    background-color: lightcyan;
    box-shadow: 2px 2px 4px black;
    margin: 0.5em;
    border-radius: 0.5em;
    padding: 0.5em;
    display: grid;
    grid-template-columns: 2fr 2fr 3fr 1fr;
    justify-items: center;
    align-items: center;
}

.smalltext{
    font-size: small;
    color: gray;
}

.org_csoport_tanar{
    display: grid;
    grid-template-columns: 10fr 10fr 1fr;
    background-color: rgb(186, 242, 186);
    padding: 0.5em;
    border-radius: 0.5em;
    box-shadow: 2px 2px 4px black;
    margin-top: 0.5em;
}

.addusertogroup_dialog .ui-checkboxradio-label:hover{
    background: #333;
}

.addusertogroup_dialog .ui-focus{
    background: #333;
}

.addusertogroup_dialog .ui-focus .ui-state-active{
    background: lightblue;
}
.addusertogroup_dialog .ui-checkboxradio-label .ui-state-active:hover{
    background: lightblue;
}

.addusertogroup_dialog .ui-state-active{
    background-color: lightblue;
    color: black;
}

.addusertogroup_dialog .ui-state-active:hover{
    background-color: lightblue;
}

.addusertogroup_dialog fieldset {
    display: flex;
    flex-flow: column;
    max-height: 80dvh;
    overflow-y: auto;
}

.group_course_prof_selector{
    display: flex;
    flex-flow: wrap;
    gap: 2em;
}

.flex-break{
    flex: 1 0 100% !important;
}

.org_tanar_tananyag {
    border: 1px dotted gray;
    margin: 0.25em;
    padding: 0.25em;
    display: flex;
    flex-flow: column;
    gap: 0.25em;
}

.group_course {
    display: grid;
    grid-template-columns: 10fr 1fr 1fr;
    background-color: aliceblue;
    padding: 0.25em;
    border-radius: 0.25em;
    box-shadow: 2px 2px 4px gray;
}

.org_stats_counter {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 1em;
    justify-items: center;
    margin-bottom: 1em;
    margin-left: 10dvw;
    margin-right: 10dvw;
}

.vanhiba{
    background-color: pink;
    outline: 2px solid red;
    box-shadow: 0px 0px 16px red;
}

.todel{
    background-color: pink;
    outline: 2px solid red;
    box-shadow: 0px 0px 16px red;
    animation-name: lightpulse;
    animation-duration: 1s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
}

.userbase_table{
    border: 1px solid gray;
    border-collapse: collapse;
    margin-left: auto;
    margin-right: auto;
}

.userbase_table th, .userbase_tabletr tr, .userbase_table td{
    border: 1px solid gray;
    padding: 0.5em;
}

.csoport_eltavolit{
    transition: all 0.25s ease;
    background-color: lightgreen;
    cursor: pointer;
    height: 1em;
    width: 100%;
}
.csoport_eltavolit:hover{
    background-color: rgb(238, 186, 144);
}

.csoport_hozzaad{
    transition: all 0.25s ease;
    background-color:lightgray;
    cursor: pointer;
    height: 1em;
    width: 100%;
}
.csoport_hozzaad:hover{
    background-color: rgb(210, 254, 210);
}

.customSuggestionsList > div{
    max-height: 300px;
    min-height: 50px;
    border: 2px solid pink;
    overflow: auto;
}

.customSuggestionsList .empty{
    color: #999;
    font-size: 20px;
    text-align: center;
    padding: 1em;
}

.tanarvalaszto fieldset{
    display: flex;
    flex-flow: column;
    gap: 0.25em;
    max-height: 50dvh;
    overflow-y: auto;
}

.tanarvalaszto .ui-button {
    text-align: left;
}

.tanarvalaszto .ui-button:hover{
    border: 1px solid #333;
    background: #333;
}

.tanarvalaszto .ui-button.ui-state-active:hover{
    background: lightblue;
    color: black;
}

.tanarvalaszto .ui-visual-focus{
    border: 1px solid #333;
    background: #333;
}

.tanarvalaszto .ui-visual-focus.ui-state-active{
    background: lightblue;
    color: black;
}

.tanarvalaszto .ui-state-active{
    background: lightblue;
    color: black;
}

.pptgen_dinamikus_tarolo{
    overflow-y: auto;
}

.vazlatelem {
    display: grid;
    grid-template-columns: 1fr 10fr 1fr;
    justify-items: center;
    background: lightblue;
    box-shadow: 2px 2px 5px black;
    margin: 0.5em;
}

.vazlatelem .vazlat_szoveg {
    width: 80%;
    min-height: 4em;
}

.valasz_checkbox_multi .ui-button:hover{
    border: 1px solid #333;
    background: #333;
}

.valasz_checkbox_multi .ui-button.ui-state-active:hover{
    background: lightblue;
    color: black;
}

.valasz_checkbox_multi .ui-visual-focus{
    border: 1px solid #333;
    background: #333;
}

.valasz_checkbox_multi .ui-visual-focus.ui-state-active{
    background: lightblue;
    color: black;
}

.valasz_checkbox_multi .ui-state-active{
    background: lightblue;
    color: black;
}

.card_hidden{
    display: none;
}

.qa_card{
    position: relative;
    transform-style: preserve-3d;
    transition: all 0.5s ease;
}

.qa_card_meta{
    position: absolute;
    transition: all 0.5s ease;
    display: flex;
    flex-flow: column;
    gap: 1em;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.qa_card, .qa_card_meta {
    width: 50dvw;
    height: 50dvh;
    border-radius: 1em;
    box-sizing: border-box;
    padding: 0px;
    margin: 0px;
}

.qa_card_question{
    z-index: 2;
    backface-visibility: hidden;
    border: 2px solid var(--light_border);
    border-radius: 0.5em;
    box-shadow: 6px 6px 10px black, inset 3px 3px 5px lightblue, inset -3px -3px 5px black;
    color: #d4d4d4;
    cursor: pointer;
    background: linear-gradient(45deg, rgb(12, 35, 57) 0%, rgb(2, 0, 23) 38%, rgb(29, 35, 40) 100%);
    background-color: rgba(0, 0, 0, 0);
    font-size: 2.4dvh;
}

.qa_card_answer{
    z-index: 1;
    backface-visibility: hidden;
    background-color: rgb(31, 31, 31);
    border: 2px solid var(--light_border);
    border-radius: 0.5em;
    box-shadow: 6px 6px 10px black, inset 3px 3px 5px lightblue, inset -3px -3px 5px black;
    color: #d4d4d4;
    cursor: pointer;
    background: linear-gradient(90deg, rgb(12, 35, 57) 0%, rgb(23, 50, 77) 38%, rgb(26, 29, 32) 100%);
    background-color: rgba(0, 0, 0, 0);
    font-size: 2.4dvh;
}

.flipped{
    transform: rotateY(180deg);
}

.sideflipped{
    transform: rotateY(90deg);
}

.QA_kartya {
    background-color: whitesmoke;
    text-align: center;
    height: 70dvh;
}

.qa_pull_new_card {
    padding: 1em;
    font-size: 2em;
    margin: 1em;
    border-radius: 1em;
}

.kartyapakli {
    display: flex;
    justify-content: center;
    margin: 2em;
}

.kartya_kerdes, .kartya_valasz{
    margin: 1em;
    z-index: 3;
    text-shadow: -2px 0px 5px black, 2px 0px 5px black;
}

.card_spinning{
    box-shadow: 0px 0px 30px gold;
}

.to_halt{
    background-color: red;
    box-shadow: 0px 0px 10px red;
}

.to_wait{
    background-color: gold;
    box-shadow: 0px 0px 10px gold;
}

.to_go{
    background-color: greenyellow;
    box-shadow: 0px 0px 10px greenyellow;
}

.indicator_off{
    background-color:#333;
    box-shadow: none;
}

.round_indicator{
    width: 2em;
    height: 2em;
    border: 2px solid black;
    border-radius: 1em;
}

.kerdes_timer_holder{
    display: flex;
    flex-flow: nowrap;
    gap: 1em;
    margin-left: auto;
    margin-right: auto;
}

.lana_felirat{
    font-family: "Quicksand", sans-serif;
    color: cyan;
    transform: rotate(-45deg);
    font-size: 1.3em;
    width: 10em;
    background: linear-gradient(90deg, rgb(12, 35, 57) 0%, rgb(23, 50, 77) 38%, rgb(26, 29, 32) 100%);
}

.hang_allapot {
    position: absolute;
    right: 2em;
    top: 2em;
}

.qa_betolto_holder {
    width: 30dvw;
    height: 0.5em;
    position: absolute;
    left: 2em;
    bottom: 2em;
    border: 1px solid aqua;
    box-shadow: 0px 0px 10px aqua;
    overflow: hidden;
}
.qa_betolto_allapot{
    width: 30dvw;
    height: 0.5em;
    background-color: gray;
    position: absolute;
    left: -100%;
}

.toltodik{
    animation: toltes;
    animation-duration: 5s;
}

@keyframes toltes {
    from{ left:-100%;}
    to{ left: 0%;}
}

.smallertext {
    font-size: 0.4em;
    position: absolute;
    text-shadow: -2px -2px 2px black, 2px 2px 4px black;
    bottom: 1em;
}

.attendance_chart_holder {
    width: 40vw;
    height: 10vh;
}

.new_test_maker_dialog {
    display: flex;
    flex-flow: column;
    gap: 0.5em;
}

.tagify__input {
    background-color: lightcyan;
    border: 1px solid gray;
}

.admin_teszt_kategoriak {
    min-width: 40vw;
    max-width: 60vw;
}

.admin_teszt_nehezseg_kijelzo, #admin_teszt_nehezseg {
    max-width: 30vw;
}

.admin_teszt_nehezseg_kijelzo{
    text-align: center;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
}

.active_test_list {
    padding: 0.5em;
    border: 1px dotted gray;
    box-shadow: 3px 3px 6px gray;
    margin: 0.25em;
    background-color: lightcyan;
}

.old_test_list {
    padding: 0.5em;
    border: 1px dotted gray;
    box-shadow: 3px 3px 6px gray;
    margin: 0.25em;
    background-color: lightgoldenrodyellow;
}

.vizsga_panel{
    background: linear-gradient(90deg, rgba(245, 245, 245, 1) 0%, rgba(218, 233, 247, 1) 50%, rgba(230, 230, 230, 1) 100%);
    box-shadow: 0px 0px 12px gray;
    padding: 0.5em;
    border-radius: 0.5em;
}

.vizsga_elem {
    border: 1px solid black;
    border-radius: 0.5em;
    padding: 0.5em;
    display: flex;
    gap: 1em;
    width: fit-content;
    background: linear-gradient(45deg, lightcyan, lightblue);
    box-shadow: 3px 3px 6px;
    max-width: 95%;
    word-break: break-word;
}

.loader_c {
    position: absolute;
    top: 2em;
    width: 200px;
    aspect-ratio: 1;
    display: grid;
    border: 4px solid #0000;
    border-radius: 50%;
    border-right-color: #25b09b;
    animation: l15 1s infinite linear;
}
.loader_c::before,
.loader_c::after {    
    content: "";
    grid-area: 1/1;
    margin: 2px;
    border: inherit;
    border-radius: 50%;
    animation: l15 2s infinite;
}
.loader_c::after {
    margin: 8px;
    animation-duration: 3s;
}

@keyframes l15{ 
  100%{transform: rotate(1turn)}
}

.fixed_ {
    position: relative;
    width: 200px;
    height: 200px;
    display: grid;
    align-content: center;
    justify-items: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2em;
    overflow: hidden;
    padding: 2em;
}

.logged_in{
    background-color: lightgreen;
    color: black;
    text-shadow: 2px 2px 3px green;
}

.logged_out{
    color: rgb(83, 83, 83);
    background-color: lightgray;
}

.probaido_adatok {
    margin-left: auto;
    margin-right: auto;
}

.group_userlista {
    border: 1px dotted black;
    padding: 0.5em;
    margin-top: 1em;
    max-height: 60dvh;
    overflow-y: auto;
}

.csoportadat {
    border: 1px solid black;
    padding: 0.5em;
    margin: 0.5em;
    background-color: lightcyan;
    border-radius: 1em;
    word-break: break-word;
    width: 70dvw;
}

.ideiglenesen_rejtve{
    display: none;
}

.ui-button.ui-corner-all.ui-widget {
    padding: 0.25em;
    font-weight: inherit;
    border-radius: 0;
}

.ui-dialog{
    box-sizing: border-box;
}

.tanar_csoport_class {
    word-break: break-word;
}

.egyvalasz {
    margin-bottom: 0.5em;
    border-bottom: 1px dotted black;
}

.test_table {
    border-collapse: collapse;
}

.past_test_row {
    border: 1px solid black;
    background-color: lightblue;
    transition: all 0.25s ease;
    cursor: pointer;
}

.past_test_row:hover{
    background-color: #96fff5;
}

.special_tooltip{
    width: 80dvw;
    height: 80dvh;
    left: 10dvw;
    top: 10dvh;
    position: absolute;
    z-index: 9999;
    background-color: whitesmoke;
    border: 3px solid gray;
    box-shadow: 4px 4px 10px black;
    border-radius: 1em;
    padding: 1em;
}

.info_cell{
    background-color: lightyellow;
    border: 1px dotted black;
}

.downcount {
    font-size: larger;
    font-weight: bold;
    margin: 0.5em;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    background-color: lightcyan;
    padding: 0.25em;
    box-shadow: 3px 3px 6px gray;
    border-radius: 1em;
}

.testlist_dinamikus {
    max-height: 30dvh;
    overflow-y: auto;
    background-color: #f7ffff;
    padding: 0.5em;
    border: 1px solid black;
    box-shadow: 3px 3px 6px gray;
}

.test_contents {
    margin: 0.5em;
    padding: 0.25em;
    background-color: #fdfdf2;
    border: 1px solid black;
    box-shadow: 3px 3px 6px gray;
    max-height: 57dvh;
    overflow-y: auto;
}

.tanar_csoport_class {
    max-height: 70dvh;
}

.group_userlist_csikicsuki {
    display: flex;
    flex-flow: nowrap;
    gap: 1em;
    border: 1px dotted black;
    border-radius: 1em;
    padding-left: 1em;
    background: linear-gradient(15deg, #080852, #4b51a6);
    color: white;
box-shadow: 2px 2px 4px black;
}

.scifi_modal_back{
    display: block;
    width: 100dvw;
    height: 100dvh;
    position: absolute;
    left: 0;
    top:0;
    z-index:  9999;
}

.scifi_modal{
    width: 75dvw;
    height: 75dvh;
    left: 12.5dvw;
    top: 12.5dvh;
    z-index: 10001;
    background: linear-gradient(45deg, rgb(2, 22, 54), rgb(3, 47, 62));
    color: lightcyan;
    font-size: 1.2em;
    font-weight: bold;
    justify-content: center;
    position: absolute;
    filter: opacity(0.9);
    border-radius: 2em;
    box-shadow: 0px 0px 40px aqua;
    display: grid;
    text-align: center;
}

.scifi_modal_effect{
    will-change: text-shadow;
    animation: rgbText 1s steps(9) 0s infinite alternate;
}

@keyframes rgbText {
    0% {
        text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 1px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
    }
    25% {
        text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 1px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
    }
    45% {
        text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 5px 0 1px rgba(251, 0, 231, 0.8), 0 5px 1px rgba(0, 233, 235, 0.8), -5px 0 1px rgba(0, 242, 14, 0.8), 0 -5px 1px rgba(244, 45, 0, 0.8), 5px 0 1px rgba(59, 0, 226, 0.8);
    }
    50% {
        text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), -5px 0 1px rgba(251, 0, 231, 0.8), 0 -5px 1px rgba(0, 233, 235, 0.8), 5px 0 1px rgba(0, 242, 14, 0.8), 0 5px 1px rgba(244, 45, 0, 0.8), -5px 0 1px rgba(59, 0, 226, 0.8);
    }
    55% {
        text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 3px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
    }
    90% {
        text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), -5px 0 1px rgba(251, 0, 231, 0.8), 0 5px 1px rgba(0, 233, 235, 0.8), 5px 0 1px rgba(0, 242, 14, 0.8), 0 -5px 1px rgba(244, 45, 0, 0.8), 5px 0 1px rgba(59, 0, 226, 0.8);
    }
    100% {
        text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 5px 0 1px rgba(251, 0, 231, 0.8), 0 -5px 1px rgba(0, 233, 235, 0.8), -5px 0 1px rgba(0, 242, 14, 0.8), 0 5px 1px rgba(244, 45, 0, 0.8), -5px 0 1px rgba(59, 0, 226, 0.8);
    }
}

@keyframes holographic {
    from {
        will-change: box-shadow;
        box-shadow: 0 -75px 5px rgba(0, 252, 252, 0.15), 0 -1px 2px rgba(0, 252, 252, 0.5), 0 -45px 5px rgba(0, 252, 252, 0.15), 0 -2px 3px rgba(0, 252, 252, 0.5), 0 -3px 4px rgba(0, 252, 252, 0.5), 0 -4px 6px rgba(0, 252, 252, 0.5), 0 -5px 10px rgba(0, 252, 252, 0.75), 0 -7px 20px rgba(0, 252, 252, 0.75), 0 -10px 30px rgba(0, 252, 252, 0.75), 0 -15px 40px rgba(0, 252, 252, 0.75), 0 -25px 50px rgba(0, 252, 252, 0.75), 0 -35px 60px rgba(0, 252, 252, 0.85), 0 -45px 70px rgba(0, 252, 252, 0.95), 0 -65px 80px #00fcfc, 0 -75px 90px #00fcfc;
    }
    to {
        will-change: unset;
        box-shadow: 0 -1px 5px rgba(0, 252, 252, 0.15), 0 -1px 2px rgba(0, 252, 252, 0.5), 0 -1px 5px rgba(0, 252, 252, 0.15), 0 -2px 3px rgba(0, 252, 252, 0.5), 0 -3px 4px rgba(0, 252, 252, 0.5), 0 -4px 6px rgba(0, 252, 252, 0.5), 0 -5px 7px rgba(0, 252, 252, 0.75), 0 -7px 10px rgba(0, 252, 252, 0.75), 0 -10px 15px rgba(0, 252, 252, 0.75), 0 -15px 20px rgba(0, 252, 252, 0.75), 0 -25px 25px rgba(0, 252, 252, 0.75), 0 -35px 30px rgba(0, 252, 252, 0.85), 0 -45px 35px rgba(0, 252, 252, 0.95), 0 -65px 40px #00fcfc, 0 -75px 50px #00fcfc;
    }
}

.holo {
    position: relative;
    z-index: 2;
    width: 150px;
    height: 5px;
    margin: -5px auto 0;
    background-color: rgba(0, 252, 252, 0.35);
    border-radius: 100%;
    filter: blur(2.5px);
    transform: perspective(100px) rotateX(-30deg);
    transform-style: preserve-3d;
    -webkit-animation: holographic 1.5s infinite alternate;
        animation: holographic 1.5s infinite alternate;
    -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
}
.holo:after {
    position: absolute;
    left: -10px;
    right: -10px;
    content: "";
    height: 10px;
    background-color: rgba(0, 252, 252, 0.5);
    border-radius: 100%;
    filter: blur(2.5px);
}
.holo + .holo {
    -webkit-animation-duration: 0.75s;
        animation-duration: 0.75s;
    opacity: 0.5;
}

.scifi_modal_back {
    position: absolute;
    width: 200%;
    height: 200%;
    background-image: 
        linear-gradient(var(--hud-opacity) 1px, transparent 1px),
        linear-gradient(90deg, var(--hud-opacity) 1px, transparent 1px);
    background-size: 40px 40px;
    transform: perspective(600px) rotateX(60deg);
    animation: grid-drift 20s linear infinite;
    left: -50%;
    top: -50%;
    filter: blur(1px);
}

@keyframes grid-drift {
    from { transform: perspective(600px) rotateX(60deg) translateY(0); }
    to { transform: perspective(600px) rotateX(60deg) translateY(40px); }
}

.scifi_modal_back_underside{
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(3, 3, 18, 0.8);
    width: 100dvw;
    height: 100dvh;
    z-index: 9998;
}

.heylisten {
    background: linear-gradient(35deg, gold, lightyellow);
    box-shadow: 0px 0px 30px gold, -3px -3px 4px goldenrod inset, 3px 3px yellow inset;
    border: 2px solid darkgoldenrod;
    color: #473300;
}

.statistics_holder {
    border-radius: 1em;
    padding: 0.5em;
    max-height: 76dvh;
    overflow-y: auto;
}

.szint_star .fa-3x {
    filter: drop-shadow(0px 0px 4px black);
}

.szintelem {
    width: fit-content;
    background: radial-gradient(lightblue, white);
    border-radius: 2em;
    padding: 2em;
    text-align: center;
    font-weight: bold;
}
.road_to_success {
    display: grid;
    grid-template-columns: 1fr;
    padding: 4em;
    margin: 4px;
    margin-bottom: 2em;
}

.mediumbutton{
    padding: 0.5em;
}

.lesserbutton {
    background: linear-gradient(45deg,gray, darkgray);
    color: black;
    margin-top: 1em;
}

.rendszer_login {
    box-shadow: 0px 0px 6px white, 0px 0px 32px aqua;
    outline: 1px solid white;
}

.csoportnev{
    border: 1px solid black;
    padding: 4px;
    margin: 4px;
    background-color: lightcyan;
}

.fourinarow{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 0.5em;
    margin-left: 1em;
    margin-right: 1em;
}

.largenr {
    font-size: 2em;
    vertical-align: center;
    margin-left: 4px;
}

.test_contents td, .test_contents th {
    border: 1px solid black;
}

.test_contents table{
    border-collapse: collapse;
}

.q_pt_a{
    background-color: gainsboro;
}

.chart_data {
    max-height: 40dvh;
}

.last_selected {
    background-color: aqua;
}

.ui-widget-overlay {
    background: radial-gradient(aqua,darkblue);
    opacity: .8;
}

.tem_pikt{
    max-height: 100px;
    max-width: 100px;
    clip-path: circle(50%);
}

.temakor_piktogramm {
    border: 2px solid aqua;
    border-radius: 50px;
    width: 100px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0.5em;
    box-shadow: 0px 0px 10px lightblue;
}

.sta_kat_focim {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
    font-size: large;
}

.statcard p {
    margin: 4px;
    font-size: smaller;
}

.aimage{
    border: 1px dotted black;
    margin-left: auto;
    margin-right: auto;
    min-height: 200px;
    display: grid;
    align-items: center;
}

.aimage, .aimage img{
    max-width: 600px;
    max-height: 600px;
}

.tutwin_main{
    position: absolute;
    width: 95dvw;
    height: 75dvh;
    left: 2.5dvw;
    top: 12.5dvh;

    box-sizing: border-box;
    z-index: 10001;
    background: linear-gradient(45deg, rgba(2, 22, 54, 0.8), rgba(3, 47, 62, 0.8));
    color: lightcyan;
    font-size: 1.2em;
    font-weight: bold;
    border-radius: 2em;
    box-shadow: 0px 0px 40px aqua;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 5fr;
    grid-template-rows: 1fr 1fr 1fr;
}

.portrait {
    grid-column: 1/2;
    grid-row: 3/4;
}

.thetext {
    grid-column: 2/3;
    padding: 1em;
    background: rgba(2, 2, 123, 0.8);
    margin: 1em;
    grid-row: 1/4;
    border-radius: 2em;
    border: 1px dotted black;
    box-shadow: 0px 0px 10px black;
    position: relative;
    width: 98%;
}

.tutwin_main{
    view-transition-class: flipflop;
    view-transition-name: tutwin_main
}

.group_userlista{
    view-transition-class: flipflop_justup;
    view-transition-name: group_userlista
}

@keyframes fade-in {
  from { opacity: 0; }
}

@keyframes fade-out {
  to { opacity: 0; }
}

@keyframes slide-from-top {
  from { transform: translateY(-100px); }
}

@keyframes slide-to-bottom {
  to { transform: translateY(100px); }
}

::view-transition-new(.flipflop){
    animation: 300ms cubic-bezier(0, 0, 0.2, 1) both fade-in,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-top; 
}

::view-transition-new(.flipflop_justup){
    animation: 300ms cubic-bezier(0, 0, 0.2, 1) both fade-in,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-top; 
}

::view-transition-old(.flipflop){
    animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-bottom;
}

::view-transition-new(.flipflop_justup){
    animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-top; 
}

.ui-dialog .ui-dialog-content.teacher_stats_window {
    background: radial-gradient(white,lightblue);
    padding: 1em;
}

.teacher_group_stats_table{
    border-collapse: collapse;
    background-color: whitesmoke;
    margin-top: 1em;
}

.t_g_gyak_col {
    background-color: lightcyan;
}

.teacher_group_stats_table th, .teacher_group_stats_table table, .teacher_group_stats_table td, .teacher_group_stats_table tr{
    border: 1px solid gray;
}

.t_g_selftest_col {
    background-color: antiquewhite;
}

.t_g_vizsga_col {
    background-color: #fdfcc6;
}

.teacher_group_stats_table .leftborder{
    border-left: 3px solid black;
}

.tg_actionbar label {
    margin-left: 1em;
}

.teacher_group_stats_table .rosszvalasz_back{
    background-color: rgb(254, 180, 180);
}

.teacher_group_stats_table .jovalasz_back{
    background-color: rgb(180, 254, 180);
}

.tg_actionbar h2 {
    margin-top: 0px;
    margin-bottom: 0px;
}

.stat_bubble {
    border: 1px solid lightgray;
    padding: 0.5em;
    border-radius: 0.33em;
    background-color: white;
    width: fit-content;
    font-size: 0.7em;
    align-items: center;
}

.stat_bubble_with_icons {
    display: grid;
    grid-template-columns: 5fr 1fr;
    grid-template-rows: 1fr 2fr 1fr;
}

.bubble_heading {
    grid-row: 1/2;
    grid-column: 1/2;
    color: #003a93;
    font-weight: bold;
}

.bubble_data {
    grid-column: 1/2;
    grid-row: 2/3;
    text-align: center;
}

.bubble_data span {
    font-size: 1.5em;
    font-weight: bold;
}

.stat_totals_holder {
    display: flex;
    flex-flow: wrap;
    gap: 1em;
    padding: 0.5em;
}

.bubble_icon {
    grid-column: 2/3;
    grid-row: 1/3;
    font-size: 2em;
}

.stat_tab_tab {
    max-height: 70dvh;
    overflow-y: auto;
}

.stat_tab_tab table {
    background-color: white;
    border: 1px solid gray;
    border-collapse: collapse;
    border-radius: 1em;
    position: relative;
}

.stat_tab_tab th{
    background: linear-gradient(lightcyan,white,rgb(191, 191, 236));
    position: sticky;
    top: 0;
    box-shadow: 2px 2px 4px gray;
}

.stat_tab_tab table, .stat_tab_tab tr, .stat_tab_tab td, .stat_tab_tab th {
    border: 1px solid lightgray;
    padding: 0.25em;
}

.stat_tab_tab th {
    border-top-left-radius: 1em;
    border-top-right-radius: 1em;
}

#stat_tabs table td:nth-child(2) {
    text-align: center;
}

#stat_tabs table td:nth-child(3), #stat_tabs table td:nth-child(4), #stat_tabs table td:nth-child(5), #stat_tabs table td:nth-child(6) {
    text-align: right;
}

.stat_circle {
    width: 0.5em;
    height: 0.5em;
    border-radius: 0.25em;
    border: 1px solid black;
}

.stat_greycircle{
    background-color: lightgray;
}

.stat_yellowcircle{
    background-color: gold;
}

.stat_greencircle{
    background-color: lightgreen;
}

.stat_sorter_icon {
    display: inline-block;
}

.stat_sorter{
    cursor: pointer;
    transition: all 0.25s ease;
}

.stat_sorter:hover{
    background:linear-gradient(cyan, lightblue)
}

.stat_tabs th {
    z-index: 999;
}

.tut_closer {
    float: right;
    background: black;
    border: 1px solid pink;
    z-index: 9999;
    position: relative;
}

.tut_accordion h3{
    display: none;
}

.acc_btn{
    color: gold;
    width: 100%;
    padding: 4px;
    display: grid;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.25s ease;
    border: 1px solid aqua;
    border-radius: 0.5em;
    background: linear-gradient(45deg, black, #3a3a3a, black);
    box-shadow: 0px 0px 10px lightblue;
    box-sizing: border-box;
}

.acc_btn:hover{
    background: lightcyan;
    color: black;
}

.bot_btn{
    position: absolute;
    bottom: 0px;
}

.tut_accordion .ui-accordion-header, .tut_accordion h3 {
    height: 0;
    padding: 0;
    margin: 0;
    border: 0;
    overflow: hidden;
}

.tut_accordion.ui-accordion .ui-accordion-content {
    background: linear-gradient(45deg, aliceblue, lightblue, aliceblue);
    max-height: 60dvh;
}

.tut_accordion.ui-accordion.ui-widget {
  overflow-y: hidden;
  max-height: 65dvh;
}

.tut_singlepage{
    width: 90%;
}

#level_progress_bar {
    position: relative;
    border: 2px solid black;
    box-sizing: border-box;
    margin: 4px;
    box-shadow: 0px 0px 10px black;
    background: black;
}

.level_progress_label {
    position: absolute;
    left: calc(50% - 4.5em);
    top: 4px;
    font-weight: bold;
    text-shadow: 1px 1px 1px #000, -1px -1px 1px black;
    color: aqua;
    font-family: "Quicksand", sans-serif;
    box-shadow: 0px 0px 15px black inset, 0px 0px 5px black;
}

.pontkijelzo {
    width: 100%;
    font-size: 0.7em;
    height: 3em;
}

.ui-progressbar-value {
    background: linear-gradient(15deg,rgb(26, 87, 110),rgb(7, 38, 62), rgb(13, 99, 99));
    box-shadow: 5px 0px 5px white, 0px 10px 15px aqua;
    border-right: 1px solid aqua;
}

.highlight{
    color: #adffad;
    text-shadow: 1px 1px 1px black, 2px 2px 2px lightgreen;
}

.greyout{
    color: darkslategray;
    text-shadow: 2px 2px 2px lightgray;
}

.sz_game_stats {
    display: grid;
    align-content: center;
    justify-content: center;
}

.achivid{
    width: 90%;
    box-shadow: 0px 0px 5px black, 0px 0px 25px black;
    border-radius: 2em;
}

.smallervid{
    width: 30dvw;
}

.achi_text_under_video {
    padding: 0.25em;
}

.is_listening{
    background: linear-gradient(lightgreen, green, lightgreen);
}

.Listening{
    outline: 2px solid gold;
}

.facewid{
    width: 30dvw;
    height: 30dvw;
    border-radius: 15dvw;
    overflow: hidden;
    border: 2px solid cyan;
    background-color: darkblue;
    position: absolute;
    left: 1em;
    bottom: 1em;
    z-index: 2;
    transition: all 0.25s ease;
}

.f_talking{
    border: 2px solid red;
    box-shadow: 0px 0px 10px pink;
}

.f_recording{
    border: 2px solid green;
    box-shadow: 0px 0px 10px lightgreen;
}

.f_idle{
    border: 2px solid gold;
    box-shadow: 0px 0px 5px lightgoldenrodyellow;
}

.facewid video {
    max-width: 150px;
    max-height: 150px;
}
.facewid {
    max-width: 150px;
    max-height: 150px;
}

.input_mic_level{
    position: relative;
}

.mic_level_label{
    position: absolute;
    left: calc(50%-2em);
    top:0;
}

.wake_up{
    position: absolute;
    left: calc(50% - 8em);
    width: 16em;
    padding: 1em;
    z-index: 5;
    top: 50%;
    box-shadow: 0px 0px 50px aqua, 0px 0px 100px aqua;
    border: 25px solid aqua;
    box-sizing: border-box;
    border-radius: 10em;
}

.aiMiniWin{
    position: absolute;
    display: grid;
    gap: 4px;
    z-index: 2;
    background: linear-gradient(15deg, darkblue, aqua, darkblue);
    padding: 0.5em;
    border-radius: 1em;
    border: 1px solid aqua;
    box-shadow: 0px 0px 10px aqua;
}

.downcount_to_next{
    position: absolute;
    left: calc(50% - 50px);
    width: 100px;
    height: 100px;
    top: calc(50% - 50px);
    background-color: cyan;
    background: linear-gradient(45deg, darkblue, rgb(2, 2, 38), darkblue);
    border: 1px solid blue;
    box-shadow: 0px 0px 15px cyan;
    border-radius: 50px;
    display: grid;
    justify-content: center;
    align-items: center;
    transition: all 0.25s ease;
    z-index: 2;
}

.hologram{
    backdrop-filter: blur(5px);
    z-index: 99;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
}

.hologram span {
    position: relative;
    display: inline-block;
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
}

.hologram span::before,
.hologram span::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    opacity: 0;
    filter: blur(1px);
    transition: all 0.3s ease;
}

.hologram span::before {
    top: -2px;
    color: #ff00ff;
    transform: translateX(0);
    animation: glitch 2s infinite;
}

.hologram span::after {
    bottom: -2px;
    color: #00ffff;
    transform: translateX(0);
    animation: glitch 2s infinite reverse;
}

.bigtimer{
    font-size: 2em;
    color: aqua;
    font-weight: bold;
    font-family: "Georgia", serif;
}

.is_okay{
    border: 1px solid green;
    background-color: #003700;
    color: white;
    box-shadow: 0px 0px 5px lightgreen;
    background: linear-gradient(15deg, darkgreen, #091e09, green);
}

@keyframes glitch {
    0%, 100% { transform: translateX(0); opacity: 0.3; }
    20% { transform: translateX(-5px); opacity: 0.5; }
    40% { transform: translateX(5px); opacity: 0.7; }
    60% { transform: translateX(-3px); opacity: 0.5; }
    80% { transform: translateX(3px); opacity: 0.3; }
}

.scan-line {
    position: absolute;
    width: 100%;
    height: 2px;
    background: linear-gradient(
        to right,
        transparent,
        rgba(0, 255, 255, 0.8),
        transparent
    );
    top: 0;
    animation: scan 2s linear infinite;
    filter: blur(1px);
}

@keyframes scan {
    0% { top: -10%; }
    100% { top: 110%; }
}

.tutwin_main .tut_singlepage{
    font-size: 0.6em;
}