#sidebar_left {	
    min-height:350px;
    padding-top: 8px; 
     width: 310px;
}

.mobil {
    width: 428px !IMPORTANT;
margin: 0 auto;
}
.mobil.full
{
    background: none;
    padding: 0;
    margin: 0 auto;
    max-width: 100%;
    width: calc(100% - 25px) !important;
    height: auto;
    margin-left: 25px;
}
#slide_content .nahlas_div h2{
    font-weight: bold;
        color: #55382F;
    line-height: 1.1em;
    padding: 8px;
}
.skupiny a ,
.triedy a {
padding:2px 15px;
font-size:13px;
font-weight:bold;
color:#707171;
}
#slide_content #level {
    padding-bottom: 15px !important;
    height: auto;
}
#slide_content #level .progress-value {
    font-size: 11px;
    color: #848484;
    position: absolute;
    top: 11px;
    right: -8px;
}
#error_staus .errortext span {
    position: relative !important;
    color: #000;
    font-size: 19px;
    margin-top: 25px;
    display: block;
    text-align: center;
    line-height: 1.6em;
}
#sidebar_left .skupiny a.active,
.triedy a.active {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    /*background:#297770;*/
    
    margin-right: 2px;
}
#sidebar_left .skupiny a
{
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    /*background: #dff3fd;*/
    
    padding: 4px;
    width: 43%;
    margin-right: 4px;
    margin-bottom: 10px;
}
#sidebar_left .skupiny a:last-child
{
    margin-right: 0px;
}
#sidebar_left  .skupiny a span.nazov_skupiny
{
    font-size: 16px;
    margin: 10px 0px;
    display: block;
    
    font-weight: bold;
    text-align: center;
}

fieldset.balicek:hover
{
	cursor: pointer;
}
fieldset.balicek:hover > .run > button.run_skupina,  button.run_skupina:hover
{
 	background: url(/images/run_papagaj.png) #88cdef;
	 background-position: calc(100% - 6px) 6px;
	 background-repeat: no-repeat;
	 outline: none;
	 background-size: 30px;

}
.zoom08 {
    zoom: 0.8;
}
fieldset.balicek.small{
    width: 236px;
    padding-bottom: 2px;
        margin-bottom: 4px;
}
.kurz_row 
{
    padding: 20px 0px;
    border-bottom: 1px solid #ddd;
}
.kurz_row > .head
{
    margin-bottom: 7px;;
}
.nazov_kurzu
{
    font-size: 19px;
    font-weight: 600;
    align-items: center;
    display: inline-flex;
    line-height: 1em;
}
.grid 
{
    display: grid;
    gap: 0.2rem;
    max-width: 99%;
}
.grid.slovicka_kurz 
{
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

#knihy_form .slovicko,
#kurzy_form .slovicko
{
    padding:0px;
    padding: 0px;
    height: 50px;
    width: 50px;
    margin: 0px;
}
#knihy_form p,
#kurzy_form p{
    font-size: 14px;
    text-align: left;
}
.kurz_img
{
    width: 48%;
    margin-right: 5px;
    align-items: stretch;
    display: inline-flex;
    height: 210px;
    flex-direction: row-reverse;

}
    .male a {
       font-size: 11px;
        font-weight: bold;
        margin: 0 0 10px;
        padding: 2px 5px;
    }

    #sidebar_left input[type=submit],
    #content input[type=submit], #content button.run_opakovanie ,#content button:not(.btn), #content button.run_ucenie , #content button.button   ,
    #registracia input[type=submit],
    input[type=submit].bk {
        border:0;
        background:#F58220;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        color: #FFFFFF;
        font-size: 16px;
        font-weight: bold;
        padding: 8px;
        cursor:pointer;
    }

    #content button.bk, #registracia input[type=submit].bk, input[type=submit].bk, #sidebar_left input.bk, #registracia input.bk, #content input.bk {
        font-size: 16px;
        padding: 12px;
        padding-top: 9px;
        font-family: "marvin", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-stretch: normal;
        box-shadow: inset 0 -0.15rem 0 rgba(0, 0, 0, 0.2);
    }
    #sidebar_left input[type=submit].small, #content input[type=submit].small, #content button.small, #registracia input[type=submit].small, input[type=submit].bk.small {
        font-size: 13px;
        padding: 7px;
        padding-top: 5px;
        line-height: 1.3em;
    }
    #content button.answer_button.answer_button {
        height: 58px;
        color: #000;
        outline: 0;
        background: none repeat scroll 0 0 #5cc8e0;
        font-weight: 300;
        font-size: 17px;
        border-bottom: 1px solid #fff;
        font-family: 'Roboto', sans-serif;
        width: 100%;
        border-radius: 0;
        line-height: 1em;
        /*border: 0;*/
    }
    #content button.answer_button:hover {
        background: none repeat scroll 0 0 #F58220;
        color: #fff;
    }

    #content button.answer_button.correct {
        color: #fff;
        background: none repeat scroll 0 0 #9fcf67;
    }
    #content button.answer_button.active {
        color: #415a68;
        background: none repeat scroll 0 0 #fff16e;
    }
    #content button.answer_button.incorrect {
    color: #fff;
    background: none repeat scroll 0 0 #FF454B;
}

/**************** -- slovicka--****************************/
.skupina_balicek
{
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}
.skupina_balicek.progress
{
	border-top: 1px solid #ffffff;
    padding-top: 8px;
    margin-top: 8px;
	flex-wrap: nowrap;
	align-items: center;
	text-align: left;
}
fieldset.balicek
{
	background: #f58220;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: normal;
    height: auto;
	padding: 6px;
	/*top: -13px;*/
    position: relative;
	/*margin-top: 11px;*/
	margin-bottom: 11px;
	/*margin-bottom: 23px;*/
   /* margin-top: 22px;*/
}
/**************** -- slovicka--****************************/
#Countdown_balicek {
	/*left: calc((100% - 126px)/2);*/
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
	position: absolute;
    /* height: auto; */
    /* min-height: 61px; */
	margin-top: 75px;
    padding: 7px;
    border-radius: 4px;

    background-color: #f58220 !important;
    border: 0 !important;
}
#Countdown_balicek span {
    display: block;
    float: left;
	width: 12px;
    height: 23px;
    background: url(/images/countdown2.png) no-repeat 0 0;
}
#Countdown1 span.image0, #Countdown_free span.image0, #Countdown_balicek span.image0 {
    background-position: -107px 0;
}

#Countdown1 span.image1, #Countdown_free span.image1, #Countdown_balicek span.image1 {
    background-position: -1px 0;
}

#Countdown1 span.image2, #Countdown_free span.image2, #Countdown_balicek span.image2 {
    background-position: -12px 0;
}

#Countdown1 span.image3, #Countdown_free span.image3, #Countdown_balicek span.image3 {
    background-position: -23px 0;
}

#Countdown1 span.image4, #Countdown_free span.image4, #Countdown_balicek span.image4 {
    background-position: -35px 0;
}

#Countdown1 span.image5, #Countdown_free span.image5, #Countdown_balicek span.image5 {
    background-position: -47px 0;
}

#Countdown1 span.image6, #Countdown_free span.image6, #Countdown_balicek span.image6 {
    background-position: -59px 0;
}

#Countdown1 span.image7, #Countdown_free span.image7, #Countdown_balicek span.image7 {
    background-position: -71px 0;
}

#Countdown1 span.image8, #Countdown_free span.image8, #Countdown_balicek span.image8 {
    background-position: -83px 0;
}

#Countdown1 span.image9, #Countdown_free span.image9, #Countdown_balicek span.image9 {
    background-position: -95px 0;
}

#Countdown1 span.imageSep, #Countdown_free span.imageSep, #Countdown_balicek span.imageSep {
    background-position: -121px 0;
    width: 7px;
}
fieldset.inactive
{
	opacity: 0.35;
}
fieldset.balicek > div.legend
{
	/*background: white;
    color: black;
    margin-left: 15px;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 14px;
	border: 1px solid #f58220;*/

	/*background: #f58220; */
    color: #54372f;
    /* margin-left: 15px; */
    padding: 8px 4px;
    /* border-radius: 4px 4px 0px 0px; */
    font-size: 15px;
    /* border: 1px solid #f58220; */
    /*top: 16px;*/
    position: relative;
    font-weight: bold;
	padding-top: 2px;
	text-align: left;
}
fieldset.balicek  .skupina_balicek .slovicko , .skupina_balicek .slovicko 
{
    width: 49px;
    height: auto;
    position: relative;
    margin-top: 0px;
       padding: 4px 5px 4px 5px;
   font-size: 11px;
    color: #553830;
    text-transform: capitalize;
	margin: 0;
}
.skupina_balicek .slovicko .image_zvieratko
{
    box-shadow: 1px 2px 6px 2px #ddd;
	margin-bottom: 3px;
}
fieldset.balicek  .skupina_balicek .slovicko .image_zvieratko
{
    box-shadow: 1px 2px 7px 0px #514d497d;
	margin-bottom: 3px;
	background-color: white;
}

fieldset.balicek  figcaption
{
	text-align: right;
	padding-right: 5px;    
	color: #5f320b;
	font-size: 11px;
	margin-top: 1px;
}
fieldset.balicek  .pridane_balik
{
	text-align: right;
	/*padding-right: 5px;   */ 
	font-size: 10px;
	margin-top: 1px;
}
fieldset.balicek .skupina_balicek .slovicko, .skupina_balicek .slovicko div.text-overflow
{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#level {
    padding-bottom: 10px;
}
#bkp_left .kurzy img, 
#bkp_left .knihy img, 
#sidebar_left .kurzy img,
#sidebar_left .knihy img
{
   /* background: url(/images/Papagaj_menu_kurzy_310x80.png);
   // background-size: cover;*/
   width: 100%;
   max-width: 325px;
    height: auto;
    max-height: 84px;
   /* background-position: center -1px;*/
    border-radius: 8px;
    margin-bottom: 10px;
    /* box-shadow: 2px 2px 14px 2px #f5822059; */
    /* box-sizing: border-box; */
    transform: scale(1);
   /* border: 1px solid #f5822030;*/
   /* background-size: 101% auto;*/
    transition: all .2s ease-in-out; 
    -moz-transition: all .2s ease-in-out; 
    -web-kit-transition: all .2s ease-in-out; 
    /*background-repeat: no-repeat;*/
}
/*#bkp_left .knihy img, 
#sidebar_left .knihy img
{
    background-image: url(/images/Papagaj_menu_ucebnice.png);
}*/
img.round_top
{
    border-radius: 8px 8px 0px 0px;
    max-width: 100%;
}
.skupina_balicek .slovicko .image_zvieratko
{
    box-shadow: 1px 2px 6px 2px #ddd;
	margin-bottom: 3px;
}
fieldset.balicek  .skupina_balicek .slovicko .image_zvieratko
{
    box-shadow: 1px 2px 5px 1px #5f320bad;
	margin-bottom: 3px;
	background-color: white;
}

/*.chosen-container {
    border-top: 1px solid #fff;
}*/
/*----------------------------------------------------------*/
#content button.run_skupina,
button.run_skupina
{
	/*position: absolute;*/
   /* right: 11px;*/
    border-radius: 10px;
    height: 35px;
    border: 0px solid #88cdef;
    background: #f58220;
    cursor: pointer;
    background: url(/images/run_papagaj.png) #a0d067;
    background-position: calc(100% - 4px) 3px;
    background-repeat: no-repeat;
  /*  margin-top: -44px;*/
	outline: none;
    padding-right: 34px;
    padding-left: 13px;
    color: #fffdff;
    font-weight: bold;
    z-index: 2;
	background-size: 37px;
	margin-bottom: 4px;
	margin-right: 6px;
}
#bkp_left .kurzy.click img, 
#bkp_left .knihy.click img, 
#sidebar_left .kurzy.click img,
#sidebar_left .knihy.click img
{
    z-index: 100000;
    transform: scale(0.95);
    box-shadow: 0px 0px 15px 0px #ff000052;
   
}
#sidebar_left button.run_opakovanie
{
	    /* position: absolute; */
    /* right: -5px; */
    border-radius: 10px;
    border: 0px solid #88cdef;
    background: #f58220;
    cursor: pointer;
    background: url(/images/run_papagaj.png) #a0d067;
    background-position: calc(100% - 11px) 22px;
    background-repeat: no-repeat;
    /* margin-top: -51px; */
    outline: none;
    padding-right: 42px;
    padding-left: 13px;
    color: #fffdff;
    font-weight: bold;
    z-index: 2;
    /* background-size: 37px; */
    display: flex;
    justify-content: center;
    align-items: center;
	/*margin-bottom: 18px;*/
	margin-top: 10px;
	box-shadow: 2px 4px 14px 2px #a0d06799;
    border: 1px solid #90bd5b;
}
button.run_opakovanie > .papagaj_text
{
	width: 77%;
    padding: 20px 13px;
    font-size: 16px;
}
button.run_opakovanie:hover
{
 	background: url(/images/run_papagaj.png) #88cdef;
	 background-position: calc(100% - 8px) 22px;
	 background-repeat: no-repeat;
	 outline: none;
}
hr.viac {
	background-color: #e0e6e6;
    margin-top: 5px;
    margin-bottom: -10px;
}
div.center > input[type=button].zobraz_viac_slovicka
{
	border: 1px solid #f58220;
	padding: 4px 8px;
	color: #5f320b;
	border-radius: 6px;
	background: #efefef;
	cursor: pointer;
	outline: none;
}
div.center > input[type=button].zobraz_viac_slovicka:hover
{
	cursor: pointer;
	border: 1px solid #5bc8e0;

	color: #5f320b;
}
.progress_skupina {
    width: 50%;
    margin-left: 10px;
}
.progress_skupina {
    height: 20px;
    margin-bottom: 15px;
    overflow: hidden;
    background-color: #f5f5f5;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 2px rgb(0 0 0 / 10%);
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 10%);
}
.progress_skupina.small {
    height: 13px; 
    margin-left: 5px;
}
.progress-bar_skupina {
    float: left;
    width: 0;
    min-width: 13%;
    height: 100%;
    font-size: 12px;
    line-height: 20px;
    color: #fff;
    text-align: center;
    background-color: #a0d067;
    -webkit-box-shadow: inset 0 -1px 0 rgb(0 0 0 / 15%);
    box-shadow: inset 0 -1px 0 rgb(0 0 0 / 15%);
    -webkit-transition: width .6s ease;
    -o-transition: width .6s ease;
    transition: width .6s ease;
}
.progress_skupina.small .progress-bar_skupina {
   min-width: 12%;
    height: 100%;
    font-size: 10px;
    line-height: 16px;
    color: #000000;
}
#error_staus, #koniec_status
{
	padding-top: 0px;
}
#koniec_status h1
{
	background:none;
	font-size: 28px;
	text-align: center;
    margin-top: 20px;
}
#KoniecButton button
{
	box-shadow: 2px 2px 4px 0px #deb592;
	margin: 8px;
	border-radius: 8px;
	border: 1px solid #ce7121;
    outline: none;
    width: calc(100% - 16px);
}
#KoniecButton button:hover
{
    border: 1px solid #ef540f !important;
}
#KoniecButton button.green:hover
{
    border: 1px solid #598625 !important;
}
#KoniecButton button:disabled
{
	opacity: 0.5;
    border: 1px solid #ce7121 !important;
}
#KoniecButton button.green:disabled
{
	opacity: 0.5;
    border: 1px solid #90bd5b !important;
}
#KoniecButton button.green
{
	box-shadow: 2px 2px 4px 0px #bfe296;
	background-color:#a0d067;
	border: 1px solid #90bd5b;
}
#KoniecButton button.blue
{
	box-shadow: 2px 2px 4px 0px #9ee3f3;
	background-color:#5AC8E0;
	border: 1px solid #2b9bb4;
}
#KoniecButton button.blue:hover
{
    border: 1px solid #5159d1 !important;
}
#KoniecButton button.yellow
{
    box-shadow: 2px 2px 4px 0px #d7df21bf;
    background-color: #d7df21;
    border: 1px solid #c7cf30;
    color: #553830;
}
.error_slide {
	display: flex;
    justify-content: space-between;
    flex-direction: column;
    height: calc(100% - 50px);
    padding: 25px 0px;

}
.skupina_balicek {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    max-width: 300px;
}
img.help_sound
{
    width: 25px;
    /* height: 45px; */
    cursor: pointer;
    top: 3px;
    position: relative;
    margin-left: 7px;
}
#koniec_status .errortext span
{
    position: relative !important;
	font-size: 22px;
    margin-top: 25px;
    display: block;
    text-align: center;
    line-height: 1.5em;
    padding: 0 20px;
}
button.run_opakovanie > .papagaj_text {

    padding: 20px 13px;
    font-size: 16px;
}
button.run_ucenie > .papagaj_text {

    padding: 7px 13px;
    font-size: 16px;
}
.half1 .text {
    margin-bottom: 0px;
    color: black;
    text-shadow: 0px 0px 7px #ffffff;
    background-color: #ffffff99;
    border-radius: 13px;
    border-radius: 0px;
    padding: 17px 30px;
    margin-bottom: 15px;
}
#ucenie .big_div {
    width: 100%;
    /* height: 80%; */
    text-align: center;
    height: 474px;
    /* min-height: 507px; */
    vertical-align: middle;
    margin: 0 auto;
    justify-content: center;
    display: flex;
    -webkit-align-items: center;
    align-items: flex-start;
    -webkit-justify-content: center;
    justify-content: center;
}
#ucenie .big_div .aktual_text {
    /* vertical-align: middle; */
    font-size: 40px;
    line-height: normal;
    display: flex;
    flex-flow: column;
    justify-content: start;
    height: 465px;
    align-items: center;
    width: 100%;
    background-size: cover;
    background-position: center;
    border-bottom: 7px solid #fff;
}
#ucenie .big_div .aktual_text .image {
    height: 67%;
}
#ucenie .big_div .aktual_text .image > img {
   /* max-width: 427px;*/
    /* max-width: 100%; */
    /* margin-top: -2px; */
    height: 465px;
    padding-bottom: 0;
}
#ucenie .big_div .text {
    margin-bottom: 0px;
    color: black !important;
    text-shadow: 0px 0px 7px #ffffff;
   /*background-color: #ffffff99;*/
    border-radius: 13px;
    border-radius: 0px;
    padding: 17px 30px;
    margin-bottom: 15px;
}
.foto_text {
    margin-bottom: 0px;
    color: black !important;
    text-shadow: 0px 0px 7px #ffffff;
   /*background-color: #ffffff99;*/
    border-radius: 13px;
    border-radius: 0px;
    padding: 17px 30px;
    margin-bottom: 15px;
    line-height: 1em;
}
.half1 .foto_text {
margin-bottom: 0px;
color: black;
text-shadow: 0px 0px 7px #ffffff;
background-color: #ffffff99;

padding: 17px 30px;

text-align: center;


}

#ucenie .big_div .aktual_text.noimage .image
{
    height: 40%;
}
#ucenie .big_div .aktual_text.noimage .text
{
    background: none;
}
#answer.odpovede
{
    display: flex;
    justify-content: space-around;
    /* height: 58%; */
    border-top: 1px solid #e0e6e6;
    padding-top: 3px;
    flex-direction: column;
   width: 100%;
}
#answer.odpovede.row
{
    flex-direction: row;
    flex-wrap: wrap;
}

#content #answer.odpovede.row div.button{
    width: 49%;
    margin-top: 3px;
}
#content #answer.odpovede.row div.button.incorrect
{
    background: none repeat scroll 0 0 #FF454B !important;
}
#content #answer.odpovede.row button.answer_button.answer_button
{
    height: 120px;
}

/*#content button.answer_button.incorrect, 
#content button.answer_button.answer_button.incorrect
{
   opacity: 0.5;
}*/
#content #answer.odpovede.row  button.answer_button.answer_button.image
{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 150px;
    background-color: white;
}
#content #answer.odpovede.row  button.answer_button.image.incorrect
{
    border: 3px solid #FF454B;
}
div.id_ul{
    position: relative;
    left: 1px;
    text-align: left;
    color: darkgray;
    font-size: 10px;
}
#answer.choose_letter
{
    /*display: flex;
    justify-content: space-around;
    height: 40%;
    border-top: 1px solid #e0e6e6;
    padding-top: 35px;
    flex-wrap: wrap;
    */
    display: flex;
    justify-content: space-around;
    /* height: 58%; */
    border-top: 1px solid #e0e6e6;
    padding-top: 15px;
    flex-wrap: wrap;
    align-items: center;
}
#answer.choose_mic
{
    display: flex;
    justify-content: space-around;
     height: 58%; 
    border-top: 1px solid #e0e6e6;
    padding-top: 15px;
    align-items: center;
    flex-direction: column;
}
#answer.choose_mic .mic_text
{
   position: relative;
   font-size: 13px;
   padding: 5px 10px;
   text-align: center;
   color: #ce7121;
}
#answer.choose_mic .mic_text.error
{
    background: #ffc1c1;
    color: red;
    border: 1px solid red;
    font-size: 15px;
    line-height: 1.3em;
    margin-bottom: 7px;
    margin-top: -7px;
}
#answer.choose_mic #mic_status.warning
{
   color: #ce7121;
   
}
#answer.choose_mic p
{
    margin-left: 0px;
    font-size: 14px;
    text-align: center;
    margin-bottom: 0px;
   
}
#answer.choose_letter > div.button >button.answer_button   
{
    padding: 20px 35px;
    border-radius: 8px;
    font-size: 32px;
    height: auto;
    width: 90px;
}
#answer.choose_letter > div.button >button.letter_small   
{
    padding: 17px 27px;
    border-radius: 8px;
    font-size: 27px;
    height: auto;
    width: 79px;
}
#question.letter .text{
    letter-spacing: 6px;
    font-size: 35px;
    line-height: 1em;
}
#question .big_div, #diktak_past .big_div {
    flex-direction: column;
   /* justify-content: start !important;*/
   max-height: 490px !IMPORTANT;
}
#question.letter .big_div .text
{
    line-height: 1em;
}
#question.letter .big_div .text.correct {
    background-color: #a0d067;
}
#question.letter .big_div  .text.incorrect {
    background-color: rgb(212, 54, 54);
}
#question .big_div .aktual_text.center {
   /* height: auto;*/
}
#question .big_div .odpoved_text.center {
    height: auto;
    vertical-align: middle;
    font-size: 25px;
    line-height: normal;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
/*#question.letter .big_div .aktual_text .image {
    height: 50%;
}*/
#question.letter .big_div .text {
    margin-bottom: 3px;
    padding: 16px 5px;
    color: black;
    margin-top: 1px;
}
#question.letter .big_div .text-correnct {
    margin-bottom: 0px;
    margin-bottom: 0px;
    color: black;
    text-shadow: 0px 0px 7px #ffffff;
    background: none;
    border-radius: 13px;
    border-radius: 0px;
    margin-bottom: 0px;
line-height: 1em;
    padding: 16px 30px;
    letter-spacing: 6px;
    font-size: 35px;
    background-color: #a0d067;
}

#question .big_div .aktual_text .image > img {
    max-height: 282px !important;
}
#question .big_div .aktual_text .image.bigimage > img {
    max-height: 417px !important;
}

#question .big_div .aktual_text .image {
    max-width: 427px;
    max-width: 100%;
    /* margin-top: -2px; */
    max-height: 417px;
    padding-bottom: 17px;
}
#question .big_div .aktual_text.image_zadanie
{
    width: 100%;
    max-height: 295px;
    background-size: contain;
    background-position: top;
    background-repeat: no-repeat;
    /*height: 56%;*/
}
#question .big_div .aktual_text.big.image_zadanie
{
    max-height: 330px;
}
#question.letter .big_div .text .letter0
{
    letter-spacing: 0;
   /* font-size: 25px;*/
    margin-top: 10px;
}
#aktualny-skupina
{
    border-radius: 8px;
    margin-bottom: 11px;
}
.farba1
{
    background-color:#f58220 !important;
    color: #5f320b !important;
}
.farba1  small.ucitel_skupiny, .farba1  span.nazov_skupiny, .farba1  small, fieldset.farba1 > div.legend, fieldset.farba1 figcaption, .farba1 .skupina_balicek .slovicko
{
    color: #5f320b !important;
}
/*.farba1 .chosen-container-single > .chosen-single{
    background: #f58220;
    color: #5f320b !important;
    border: 0;
  }*/
.farba2
{
    background-color: #d7df21 !important;
    color: #553830 !important;
    border: 1px solid #ced522 !important;
}
.farba2  small.ucitel_skupiny, .farba2  span.nazov_skupiny, .farba2  small, fieldset.farba2 > div.legend, fieldset.farba2 figcaption, .farba2 .skupina_balicek .slovicko
{
    color: #553830 !important;
    
}
.farba2 .skupina_balicek.progress
{
    border-top: 1px solid #ffffff !important
}
.farba2 img.sipka
{
    border: 1px solid #ffffff !important;
}
/*.farba2 .chosen-container-single > .chosen-single{
    background: #dff3fd;
    color: #553830 !important;
    border: 0;
}*/
/*.farba3
{
    background-color:#297770 !important;
    color: #ffffff !important;
}
.farba3  small.ucitel_skupiny, .farba3  span.nazov_skupiny, .farba3  small, fieldset.farba3 > div.legend, fieldset.farba3 figcaption, .farba3 .skupina_balicek .slovicko
{
    color: #ffffff !important;
}*/
/*.farba3 .chosen-container-single > .chosen-single{
    background: #297770;
    color: #ffffff !important;
    border: 0;
  }*/
/*#sidebar_left .farba3 .chosen-container-single > .chosen-single span{
    color: #ffffff;
  }

.farba4
{
    background-color:#bb6293 !important;
    color: #110c0a !important;
    border: 1px solid #dd75af !important;
}
.farba4  small.ucitel_skupiny, .farba4  span.nazov_skupiny, .farba4  small, fieldset.farba4 > div.legend, fieldset.farba4 figcaption, .farba4 .skupina_balicek .slovicko
{
    color: #110c0a !important;
    
}
.farba4 .skupina_balicek.progress
{
    border-top: 1px solid #bb6293 !important;
}
.farba4 img.sipka
{
    border: 1px solid #bb6293 !important;
}
.farba4 .chosen-container-single > .chosen-single{
    background: #bb6293;
    color: #110c0a !important;
    border: 0;
  }
.farba5
{
    background-color:#ffffff !important;
    color: #110c0a !important;
    border: 1px solid #110c0a !important;
}
.farba5  small.ucitel_skupiny, .farba5  span.nazov_skupiny, .farba5  small, fieldset.farba5 > div.legend, fieldset.farba5 figcaption, .farba5 .skupina_balicek .slovicko
{
    color: #110c0a !important;
    
}
.farba5 .skupina_balicek.progress
{
    border-top: 1px solid #110c0a !important;
}
.farba5 img.sipka
{
    border: 1px solid #110c0a !important;
}
.farba5 .chosen-container-single > .chosen-single{
    background: #ffffff;
    color: #110c0a !important;
    border: 0;
  }
.farba6
{
    background-color:#005bbb !important;
    color: #ffffff !important;
    border: 1px solid #04386e  !important;
}
.farba6  small.ucitel_skupiny, .farba6  span.nazov_skupiny, .farba6  small, fieldset.farba6 > div.legend, fieldset.farba6 figcaption, .farba6 .skupina_balicek .slovicko
{
    color: #ffffff !important;
    
}
.farba6 .skupina_balicek.progress
{
    border-top: 1px solid #04386e  !important;
}
.farba6 img.sipka
{
    border: 1px solid #04386e  !important;
}
.farba6 .chosen-container-single > .chosen-single{
    background: #005bbb;
    color: #ffffff !important;
    border: 0;
  }
.farba7
{
    background-color:#ffd501 !important;
    color: #110c0a !important;
    border: 1px solid #c2a204  !important;
}
.farba7  small.ucitel_skupiny, .farba7  span.nazov_skupiny, .farba7  small, fieldset.farba7 > div.legend, fieldset.farba7 figcaption, .farba7 .skupina_balicek .slovicko
{
    color: #110c0a !important;
    
}
.farba7 .skupina_balicek.progress
{
    border-top: 1px solid #c2a204  !important;
}
.farba7 img.sipka
{
    border: 1px solid #c2a204  !important;
}
.farba7 .chosen-container-single > .chosen-single{
    background: #ffd501;
    color: #110c0a !important;
    border: 0;
  }

.farba8
{
    background-color:#f26649 !important;
    color: #110c0a !important;
    border: 1px solid #a84b38  !important;
}
.farba8  small.ucitel_skupiny, .farba8  span.nazov_skupiny, .farba8  small, fieldset.farba8 > div.legend, fieldset.farba8 figcaption, .farba8 .skupina_balicek .slovicko
{
    color: #110c0a !important;
    
}
.farba8 .skupina_balicek.progress
{
    border-top: 1px solid #a84b38  !important;
}
.farba8 img.sipka
{
    border: 1px solid #a84b38  !important;
}*/
.farba_complete
{
    background-color:#a0d067 !important;
    color: #5f320b !important;
    border: 1px solid #88cdef  !important;
}
.farba_complete  small.ucitel_skupiny, .farba_complete  span.nazov_skupiny, .farba_complete  small, fieldset.farba_complete > div.legend, fieldset.farba_complete figcaption, .farba_complete .skupina_balicek .slovicko
{
   color: #5f320b !important;
    
}
.farba_complete .skupina_balicek.progress
{
    border-top: 1px solid #a0d067  !important;
}
.farba_complete img.sipka
{
    border: 1px solid #a0d067  !important;
}
/*#sidebar_left .farba8 .chosen-container-single > .chosen-single{
    background: #f26649;
    color: #110c0a !important;
    border: 0;
  }*/
  .pointer
  {
      cursor: pointer;
  }
.foreverflex
{
    display: flex !important;
}

.full_without_header
{
    clear: both;
    width: 100%;
    display: flex;
    justify-content: center;
}
#splash_congrat h3{
    margin-left:0;
    padding-left:0;
}
.pismenka
{
    min-height: 70px; 
    margin-top: 2px;
}
#question .big_div .text {
    margin-bottom: 0px;
    color: black;
    text-shadow: 0px 0px 7px #ffffff;
    background-color: #ffffff99;
    border-radius: 13px;
    border-radius: 0px;
    padding: 17px 30px;
    margin-bottom: 15px;
    text-align: center;
    font-size: 31px;
    line-height: 1em;
    margin-top: 15px;
}
.errorimg > img{
    max-width: 59%;
}

#question.speed {
    height: 100%;
    justify-content: center;
    display: flex;
}

.half2
{
    border-top: 7px solid #fff;
    width: 100%;
    min-height: 120px;
}
.half2 .speaker {
    margin-top: -55px;
    cursor: pointer;
}
.swiper-slide
{
    display: flex !important;
    flex-direction: column;

}
#question.ucenie .big_div .aktual_text.image_zadanie
{
    height: 100%;
    max-height: 100%;
    background-size: cover;
    background-position: center;
}
#KoniecButton {
    min-height: 80px;
    width: 100%;
}
#mic_img > img
{
    height: 120px;
}
#koniec_status h1 {
    font-size: 30px;
    text-align: center;
    margin-top: 20px;
    line-height: 1em;
}



#submenu, #submenu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#submenu {
    width: auto;
    background-color: #415a68;
    -moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
    -webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
    box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
    float: right;
    margin-right: 6px;
    /*    margin-top: -31px;*/
}

#submenu:before,
#submenu:after {
    content: "";
    display: table;
}

#submenu:after {
    clear: both;
}

#submenu {
    zoom:1;
}

#submenu li {
    float: left;
    border-right: 1px solid #222;
    -moz-box-shadow: 1px 0 0 #444;
    -webkit-box-shadow: 1px 0 0 #444;
    box-shadow: 1px 0 0 #444;
    position: relative;
}

#submenu a {
    float: left;
    padding: 8px 15px;
    color: white;
    text-transform: uppercase;
    font: bold 12px Arial, Helvetica;
    text-decoration: none;
    text-shadow: 0 1px 0 #000;
}

#submenu li:hover > a {
    background-color: #dc0963;
    color: white;
    text-decoration: none;
}

#submenu ul {
    margin: 10px 0 0 0;
    _margin: 0; /*IE6 only*/
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 35px;
    left: 0;
    z-index: 1;
    background: #444;
    background: -moz-linear-gradient(#444, #111);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
    background: -webkit-linear-gradient(#444, #111);
    background: -o-linear-gradient(#444, #111);
    background: -ms-linear-gradient(#444, #111);
    background: linear-gradient(#444, #111);
    -moz-box-shadow: 0 -1px rgba(255,255,255,.3);
    -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
    box-shadow: 0 -1px 0 rgba(255,255,255,.3);
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

#submenu li:hover > ul {
    opacity: 1;
    visibility: visible;
    margin: 0;
}

#submenu ul ul {
    top: 0;
    left: 150px;
    margin: 0 0 0 20px;
    _margin: 0; /*IE6 only*/
    -moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
    -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
    box-shadow: -1px 0 0 rgba(255,255,255,.3);
}

#submenu ul li {
    float: none;
    display: block;
    border: 0;
    _line-height: 0; /*IE6 only*/
    -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
    -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
    box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}

#submenu ul li:last-child {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

#submenu ul a {
    padding: 7px;
    width: 80px;
    _height: 10px; /*IE6 only*/
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
}

#submenu ul a:hover {
    background-color: #28a6b2;
}

#submenu ul li:first-child > a {
    -moz-border-radius: 3px 3px 0 0;
    -webkit-border-radius: 3px 3px 0 0;
    border-radius: 3px 3px 0 0;
}

#submenu ul li:first-child > a:after {
    content: '';
    position: absolute;
    left: 40px;
    top: -6px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #444;
}

/*********************************************************/
ul.zalozky {
	width: 100%;
	height: 80px;
	margin: 0 auto;
	list-style: none;
	overflow: hidden;
	padding: 0;
	border-bottom: 1px solid #d7d7d7;
    flex-wrap: nowrap;
    display: flex;
    overflow: hidden;
}
ul.zalozky li {	
    display: inline;
}
ul.zalozky li a {
	position: relative;
	display: block;
	height: 58px;
	margin-top: 24px;
	padding: 13px 12px 0px 12px;
	font-family: 'Open Sans', sans-serif;
	font-size: 18px;
	text-align: center;	
	text-decoration: none;
	color: #ffffff !important;
	background: #f58220  !important;
	-webkit-box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
	   -moz-box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
	        box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
	        	border: 0px solid #000000;
	-webkit-transition: padding 0.2s ease, margin 0.2s ease;
       -moz-transition: padding 0.2s ease, margin 0.2s ease;
         -o-transition: padding 0.2s ease, margin 0.2s ease;
        -ms-transition: padding 0.2s ease, margin 0.2s ease;
            transition: padding 0.2s ease, margin 0.2s ease;
}
.zalozky li:first-child a {
	z-index: 3;
}
.zalozky li:nth-child(2) a {
	z-index: 2;
}
.zalozky li:last-child a {
	z-index: 1;
}
ul.zalozky li a:hover {
    margin-top: 18px;
}
ul.zalozky li a.active {
	margin: 10px 0 0 0;
	padding: 12px 11px 0px 12px;
	background: #545f60;
	color: #6edeef;
	/*color: #ff6831;*/
	z-index: 4;
	outline: none;
}
ul.zalozky li a > img {
    width: 40px;
}
ul.zalozky li a.active >img {
    width: 50px;
}
ul.zalozky li a.active:hover
{
	text-decoration: none !important;
}
.group:before,
.group:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}
.group:after {
    clear: both;
}
#content_tab {
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding-top: 15px;
      display: flex;
    justify-content: center;
}
#content_tab>div
{
	display: none;
    width: 100%;
}
#content_tab div.jazyk_tab:first-child 
{
	display: block;
} 
/*.chosen-container .chosen-results {
    max-height: 164px !important;
    position: relative !important;
}
.chosen-container .chosen-drop {
    position: relative !important;
}

.chosen-container .chosen-drop ::-webkit-scrollbar {
    width: 5px;
  }
  
 
  .chosen-container .chosen-drop ::-webkit-scrollbar-track {
    background: #f1f1f1;
  }
  

  .chosen-container .chosen-drop ::-webkit-scrollbar-thumb {
    background: #888;
  }
  

  .chosen-container .chosen-drop ::-webkit-scrollbar-thumb:hover {
    background: #555;
  }*/
  .reload
  {
    width: 22px;
    margin-top: 0px;
    background-color: #5cc8e0;
    padding: 6px 7px 6px 6px;
    border-radius: 50%; 
    height: 22px;
    box-sizing: content-box;
  }
  #helpik {
    margin-right: 10px;
    z-index: 100000;
    cursor: pointer;
}
  #toast-spelovanie-container>div {
    position: relative;
    pointer-events: auto;
    overflow: hidden;
    margin: 0 0 6px;
    padding: 15px 15px 15px 50px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    background-position: 15px center;
    background-repeat: no-repeat;
    -moz-box-shadow: 0 0 12px #999;
    -webkit-box-shadow: 0 0 12px #999;
    box-shadow: 0 0 12px #999;
    color: #FFF;
    opacity: .8;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
    filter: alpha(opacity=80);
}
#toast-spelovanie-container>.toast-success {
    background-image: url("/images/question.png")!important;
}
  #toast-spelovanie-container>div
  {
    opacity: 1 !important;
    font-size: 16px;
  }
  
#toast-spelovanie-container {
    width: calc(99% - 0px);
    z-index: 100000;
    top: 182px;
    position: absolute;
    max-width: 416px;
}
/*----------------------------- ---------- -----------------------------------------*/
.skupiny_wrapper_div
{
   /* max-height: 200px;*/
    overflow-y: auto;
    overflow-x: hidden;
    /*width: 100%;*/
    border: 1px solid #f58220 ;
    border-top: 1px solid white;
    color: #5f320b !important;
    margin-top: -1px;
    border-radius: 0 0 8px 8px;
    background-clip: padding-box;

    scrollbar-color: #a0d067 #f1f1f1;
    scrollbar-width: thin;

}
#active_balicek{
    width: 100%;
    max-width: 300px;
}
.ucitel_skupiny
{
    font-size: 10px;
    white-space: nowrap;
}
span.nazov_skupiny
{
    font-size: 13px !important;
    white-space: nowrap;
}
span.sutaz
{
    font-size: 9px !important;
    white-space: nowrap;
    background-color: #553830;
    color: #dff3fd;
    padding: 3px 5px;
    border-radius: 4px;
    font-size: 9px;
}
#skupina_select .skupina_row:last-child
{
    border-bottom: none;
}
/* width */
/*.skupiny_wrapper_div::-webkit-scrollbar {
    width: 10px;
  }
  

  .skupiny_wrapper_div::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px 3px 6px 3px;
    margin-bottom: 1px;
  }
   

  .skupiny_wrapper_div::-webkit-scrollbar-thumb {
    background: #a0d067;
    border-radius: 3px 3px 3px 3px;
  }

 
  .skupiny_wrapper_div::-webkit-scrollbar-thumb:hover {
    background: #7EC248;
  }*/
  .skupiny_wrapper_div div.skupina_row 
  {
    border-bottom: 1px dotted #5BC8E0;
    margin: 0;
    padding: 5px 6px;
    padding-top: 5px;
    padding-bottom: 5px;
    list-style: none;
    line-height: 37px;
    word-wrap: break-word;
    -webkit-touch-callout: none;
    text-align: left;
    min-width: 100%;
    white-space: nowrap;
    position: relative;
    border-bottom: 1px dotted #5BC8E0;
    padding: 5px 7px 5px 5px;
    cursor: pointer;
    box-sizing: border-box;
  }
/*----------------------------- ---------- -----------------------------------------*/
/*----------------------------- ---------- -----------------------------------------*/
#overlay_balicky_papagaj .loading,
#overlay_papagaj .loading,
#overlay .loading {
    position: relative;
    display: inline-flex;
    margin: 0 auto;
    /* width: 1px; */
}
.se-pre-con {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: #29777082;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
}
.se-pre-con-papagaj {
    position: absolute;
    width: inherit;
    height: 768px;
    z-index: 9999;
    background: #29777082;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
}
.se-pre-con-papagaj .rotacia,
.se-pre-con .rotacia{
    /*top: -55px;
    position: absolute;
    left: -21px;*/
    -webkit-animation-name: spinvpravo;
    -webkit-animation-duration: 4000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: cubic-bezier;
    -moz-animation-name: spinvpravo;
    -moz-animation-duration: 4000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: cubic-bezier;
    -ms-animation-name: spinvpravo;
    -ms-animation-duration: 4000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: cubic-bezier;

    animation-name: spinvpravo;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier;
}
.se-pre-con .rotacia.vlavo,
.se-pre-con-papagaj .rotacia.vlavo
{
	-webkit-animation-name: spinvlavo;
	-moz-animation-name: spinvlavo;
	-ms-animation-name: spinvlavo;
	animation-name: spinvlavo;
}

.se-pre-con .posbigkol,
.se-pre-con-papagaj .posbigkol{
    /*position: absolute;*/
  /*  left: -52px;
    top: 1px;*/
}
#overlay_message
{
	margin: 0 auto;
	margin-top: 20px;
}
#overlay_message .over_text
{
	color: #f1f8f4;
    background: #251a1f;
    padding: 6px;
    margin-bottom: 0px;
    text-align: center;
    font-size: 17px;
}
@keyframes spinvpravo {
    from {
        -ms-transform: rotate(0deg); /* IE 9 */
	-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
	transform: rotate(0deg);
    }
    to {
        -ms-transform: rotate(360deg); /* IE 9 */
	-webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
	transform: rotate(360deg);
    }
}

@keyframes spinvlavo {
    from {
        -ms-transform: rotate(360deg); /* IE 9 */
	-webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
	transform: rotate(360deg);
    }
    to {
        -ms-transform: rotate(0deg); /* IE 9 */
	-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
	transform: rotate(0deg);
    }
}

button.run_skupina
{
	cursor: pointer;
	 box-shadow: 0 0 0 0 rgba(250, 185, 64, 0.7);
  border-radius: 50%;
  -webkit-animation: pulse 1.75s infinite cubic-bezier(0.66, 0, 0, 1);
  -moz-animation: pulse 1.75s infinite cubic-bezier(0.66, 0, 0, 1);
  -ms-animation: pulse 1.75s infinite cubic-bezier(0.66, 0, 0, 1);
  animation: pulse 1.75s infinite cubic-bezier(0.66, 0, 0, 1);
}
button.run_skupina:hover 
{
  -webkit-animation: none;-moz-animation: none;-ms-animation: none;animation: none;
}
@-webkit-keyframes pulse { to { box-shadow: 0 0 0 45px rgba(250, 185, 64, 0); } }
@-moz-keyframes pulse { to { box-shadow: 0 0 0 45px rgba(250, 185, 64, 0); } }
@-ms-keyframes pulse { to { box-shadow: 0 0 0 45px rgba(250, 185, 64, 0); } }
@keyframes pulse { to { box-shadow: 0 0 0 45px rgba(250, 185, 64, 0); } }

    #sidebar_left .btn_vsetko{
        background-color: #5BC8DF;
        color: #FFFFFF;
        font-weight: bold;
        padding: 8px;
        border-radius: 8px 8px 8px 8px;
        cursor: Pointer;
        font-size: 16px;
        text-decoration: none;
    }
    #sidebar_left span.select-box {
        right: 4px;
        top: 3px;
        position: absolute;
    }
    #sidebar_left span.select-box select{
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border: 1px solid #949494;
    }
    #sidebar_left ul.filter_ucitelia li {
        padding: 5px 20px 5px 5px;
        position: relative;
        font-weight: bold;
        font-size: 13px;
        text-transform: none;
    }
	#slide_content h1.kniha
	{
		font-family: "marvin", sans-serif;
		font-size: 33px;
		color: #A2005B;
		background: none;
		line-height: 1.1em;
		font-weight: 400;
		text-align: center;
		font-stretch: normal;
        padding: 8px;
		margin-bottom: 11px;
		border-bottom: 1px solid #DDDDDD;
		margin-top: 0px;
	margin-top: 0px;
		border-radius:0;
		padding-top: 0;;
		display: flex;
		padding-left: 0px;
		align-items: center;
	}
#kurzy_form h1.marvin{
    background: none;
    font-family: "marvin", sans-serif;
    font-size: 33px;
	color: #A2005B;
    font-weight:normal;
    line-height: 1.4em;
    padding-top: 0;
}
	

 #content h3.lekcia  {
   
	font-size: 20px;
    color: #444;
    margin-left: 0;
    padding-bottom: 13px;
    /* padding-left: 12px; */
    line-height: 1.15em;
    font-family: "marvin", sans-serif;
    margin-bottom: 0px;
    text-align: left;
	padding-left: 0;
    padding-top: 0;
    border-bottom: 1px solid #DDDDDD;

 } 
  #content h3.lekcia.top{
    margin-bottom: 10px;
  } 
  #content h3.lekcia a.zmenit {
	font-size: 14px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
	cursor: pointer;
    color:#444;
  }
 #content h4.lekcia  {
    font-weight: 600;
    color: #000000;
    font-size: 15px;
    margin-left: 0;
    line-height: 1.1em;
    text-align: left;
    margin-bottom: 0px;
    border-bottom: 1px solid #DDDDDD;
    padding: 6px 4px 6px 12px;
}
#content h4.lekcia.active{
    padding: 6px 4px 6px 12px;
}
#content #lekcie_zoznam a{
    color: #55382F;
    text-decoration: none;
}
#content h4.active {
    background-color: #FFCACA;
    padding: 4px;
}
/*----------------------------- ---------- -----------------------------------------*/

  @media screen and (max-width: 980px) {
    .mobil.full
    {
        width: 100% !important;
        margin-left: 0px;
    }
    #RunMenu .tretina {
        width: 100%;
        margin-top: 0;
    }
    h1.kniha {
        margin-bottom: 10px !important;
    }
}
@media screen and (max-width: 630px) {
    .grid.slovicka_kurz 
    {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    
}

@media screen and (max-width: 480px) {
    #container_balicky{
        overflow-y: auto;
        max-height: 300px;
        margin-right: 1px;
        padding-right: 2px !important;
    }
    #container_balicky.no-scroll{
        height: 100%;
        max-height: 100%;
    }
    
    #sidebar_left .progress_container, #koniec_status .progress_container, #slide_content .progress_container{
        zoom: 0.6 !important;
    }
    #bkp_left .kurzy img, #bkp_left .knihy img, #sidebar_left .kurzy img, #sidebar_left .knihy img
    {
        margin-bottom: 0px;
    }
    .mobil #main_content #kurzy_form{
        width: calc(100% - 10px);
      
        padding: 0 5px;
    }
    ul.zalozky li a > img {
        width: 33px;
    }
    ul.zalozky li a.active >img {
        width: 39px;
    }
    ul.zalozky li a
    {
        padding: 11px 7px 0px 8px;
    }
    /* width */
    #container_balicky::-webkit-scrollbar {
    width: 10px;
    }

    /* Track */
    #container_balicky::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey; 
    border-radius: 8px;
    }
    
    /* Handle */
    #container_balicky::-webkit-scrollbar-thumb {
    background: #a2005b; 
    border-radius: 8px;
    }

    /* Handle on hover */
    #container_balicky::-webkit-scrollbar-thumb:hover {
    background: #b30000; 
    }
    #wrapper {
        padding-bottom: 0px !IMPORTANT;
    }


    /* odpoctove bliacky kazi to odpocet */
    /*#content.noflex1180 .mobil {
        height: 100%;
    }*/
    #mic_img > img
    {
        height: 80px;
    }
    #toast-spelovanie-container {
        top: 56px;
    }
    .half2 .speaker {
        margin-top: -37px !important;
        width: 67px;
    }
    .hide480
    {
        display: none;
    }

    #slide_content {
        overflow: auto !IMPORTANT;
        padding: 4px 4px;
        height: calc(100% - 8px);
    }
    .error_slide
    {
        padding: 4px 4px;
        height: calc(100% - 8px);
        width: calc(100% - 8px);

    }
    .grid.slovicka_kurz 
    {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    #koniec_status h1 {
        font-size: 25px;
        text-align: center;
        margin-top: 20px;
        line-height: 1em;
    }
    .se-pre-con-papagaj {
        width: 100%  !important;
        height: 100%  !important;
    }
    .foto_text {
        font-size: 27px !important;
        padding: 0 15px;
        margin: 0;
        padding-top: 12px;
    }
    button.run_opakovanie > .papagaj_text
    {
        padding: 10px 5px;
        font-size: 14px; 
    }
    #question .big_div .text {
        font-size: 20px;
        padding: 12px 10px;
        margin-bottom: 0px;
        margin-top: 0px;
    }
    .errorimg > img{
        max-width: 40%;
    }
    #koniec_status .errortext span
    {
        font-size: 17px;
        margin-top: 10px;
    }
    #question .big_div .aktual_text.image_zadanie
    {

        width: 100%;
        max-height: 295px;
        background-size: contain;
        background-position: top;
        background-repeat: no-repeat;
        height: 100%;
    }
    .fullheight
    {
        width: 100%;
    }
    #KoniecButton button {
        margin:8px 0;
        width: 100%;
    }
    .error_slide {
        height: calc(100% - 10px);
    padding: 5px 0px;
    }
    #full_without_header
    {
        height: calc(100% - 40px);
    }
    #question.letter .big_div .text
    {
        padding: 0px 2px;
        font-size: 25px;
    }
    #question.letter .big_div .text .letter0, 
    #question.letter .big_div .text .letterspecial,
    #question.letter .big_div .text-correnct {
        font-size: 25px;
    }
    #question .big_div .odpoved_text.center
    {
        font-size: 18px;
    }
    #answer.choose_letter > div.button >button.answer_button
    {
        padding: 8px 15px;
        border-radius: 6px;
        font-size: 23px;
        height: auto;
        width: 60px;
    }
    #footer
    {
        display: none !important;
    }
}
@media screen and (max-width: 350px) {

    .kurz_img {
        width: 99%;
        margin-right: 15px;
        margin: 0 auto;
        margin-bottom: 7px;
    }
    .grid.slovicka_kurz 
    {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
 
}

  @media screen and (max-width: 330px) {
    ul.zalozky li a > img {
        width: 21px;
    }
    ul.zalozky li a
    {
        padding: 12px 5px 0px 5px;
    }
    ul.zalozky li a.active >img {
        width: 30px;
    }
    ul.zalozky {
        width: 100%;
        height: 68px;
    }
    ul.zalozky li a.active {
        margin: 15px 0 0 0;
        padding: 12px 5px 0px 9px;
    }
}
/*---------------------------------------------------------------------------*/
.book-container {
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 600px;
  }

  
  .book {
    width: 200px;
    height: 300px;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateY(338deg);

  }
  
  
  .book > :first-child {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 300px;
    transform: translateZ(15px);
    background-color: #ffffff;
    border-radius: 0 2px 2px 0;
   border: 1px solid #d1d1d1;
    box-sizing: border-box;

   /* box-shadow: 5px 5px 20px #666;*/


   max-width: 200px !IMPORTANT;
   height: 300px;

   object-fit: cover;
  }
  
  .book::before {
    position: absolute;
    content: ' ';
    background-color: blue;
    left: 0;
    top: 1px;
    width: 28px;
    height: 298px;
    transform: translateX(184px) rotateY(90deg);
    background: linear-gradient(90deg, 
      #fff 0%,
      #f9f9f9 5%,
      #fff 10%,
      #f9f9f9 15%,
      #fff 20%,
      #f9f9f9 25%,
      #fff 30%,
      #f9f9f9 35%,
      #fff 40%,
      #f9f9f9 45%,
      #fff 50%,
      #f9f9f9 55%,
      #fff 60%,
      #f9f9f9 65%,
      #fff 70%,
      #f9f9f9 75%,
      #fff 80%,
      #f9f9f9 85%,
      #fff 90%,
      #f9f9f9 95%,
      #fff 100%
      );
  }
  
  .book::after {
    position: absolute;
    top: 0;
    left: 0;
    content: ' ';
    width: 200px;
    height: 300px;
    transform: translateZ(-15px);
    background-color: #01060f;
    border-radius: 0 2px 2px 0;
    box-shadow: -10px 0 50px 10px #cbcbcb;
   /* box-shadow: -8px 3px 10px 5px #666;*/
  }
  .not-allowed
  {
    cursor: not-allowed;
  }
  /*-----------------------------------------------------*/  
  #nahlas-button img{
    border: 3px solid #fff;
    border-radius: 50%;
    margin-top: -3px;
  }


  #sidebar_left .progress_container, 
  #koniec_status .progress_container, 
  #slide_content .progress_container{
	position: relative;
    display: flex;
    justify-self: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: 5px;
    flex-direction: column;
    margin-left: 26px;
    margin-top: -10px;
  }
    #sidebar_left .progress_container{
        flex-direction: row-reverse;
        margin-left: 0px;
        margin-top: 0px;
        gap:0;
            zoom: 0.8;
         width: 100%; 
        /* display: flex; */
        align-content: flex-start;
        justify-content: space-between;
        margin-bottom: 15px;
    }


  #sidebar_left .progress_container .prog,
  #koniec_status .progress_container .prog,
  #slide_content .progress_container .prog
    {
        position: relative;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        color: #fff;
        background: #dbd7d7  linear-gradient(to right, transparent 50%, var(--clr) 0);
		background: #dbd7d7  -webkit-linear-gradient(left, transparent 50% , var(--clr) 0);
		/*background: #444  -webkit-linear-gradient(right, transparent 50%,var(--clr) 0); 
		background: #444  -moz-linear-gradient(right, transparent 50%,var(--clr) 0);  
		background: #444  linear-gradient(to right, transparent 50%,var(--clr) 0);      
		background: #444  -webkit-gradient(linear, right top, left top, color-stop(50%, transparent), color-stop(0%,var(--clr))); */
		
    } 
    #sidebar_left .progress_container .diplom,
    #koniec_status .progress_container .diplom,
    #slide_content .progress_container .diplom
    {
        background-image: url(/gui/diplom_mini.png);
        /* background-size: 70px 24px; */
        background-repeat: no-repeat;
		
    }

    #sidebar_left .progress_container .diplom.sutaz,
    #koniec_status .progress_container .diplom.sutaz,
    #slide_content .progress_container .diplom.sutaz
    {   
         background-image: url(/gui/diplom_sutaz_mini.png);
    }


    #koniec_status .progress_container .diplom,
    #slide_content .progress_container .diplom
    {
        width: 70px;
        height: 49px;
        display: block;
    }

    #sidebar_left .progress_container .diplom::before,
    #koniec_status .progress_container .diplom::before,
    #slide_content .progress_container .diplom::before
    {
        content: '';
        display: block;
        background-image: url(/gui/diplom_mini_gr.png);
        width: 70px;
        height: 49px;
        background-repeat: no-repeat;
		
    } 

    #sidebar_left .progress_container .diplom.sutaz::before,
    #koniec_status .progress_container .diplom.sutaz::before,
    #slide_content .progress_container .diplom.sutaz::before
    {
        background-image: url(/gui/diplom_sutaz_gr_mini.png);
    }
    
    #sidebar_left .progress_container .diplom::after,
    #koniec_status .progress_container .diplom::after,
    #slide_content .progress_container .diplom::after
    {
        content: '';
        display: block;
        background-image: url(/gui/diplom_mini.png);
        width: calc((var(--per) / 100) * 70px);;
        height: 49px;
        background-repeat: no-repeat;
        position: absolute;
        top:0;
		
    }


    #sidebar_left .progress_container .diplom.sutaz::after,
    #koniec_status .progress_container .diplom.sutaz::after,
    #slide_content .progress_container .diplom.sutaz::after
    {
        background-image: url(/gui/diplom_sutaz_mini.png);
    }

    #sidebar_left  .progress_container .prog h3,
    #koniec_status  .progress_container .prog h3,
    #slide_content  .progress_container .prog h3
    {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 1.35em !important;
        z-index: 1;
        font-weight: 500 !important;
        border-bottom:none;
        line-height:1em !important;
        padding: 0 !important;
        margin:0 !important;
        font-family: Arial, Helvetica, sans-serif !important;
        color: #000000 !important;
    }
    #sidebar_left  .progress_container .prog h3 span,
    #koniec_status  .progress_container .prog h3 span,
    #slide_content  .progress_container .prog h3 span
    {
        font-size: 0.62em;
        font-weight: 300;
    }
    #sidebar_left  .progress_container .prog h4,
    #koniec_status  .progress_container .prog h4,
    #slide_content  .progress_container .prog h4
    {
        position: absolute;
        top: 58%;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1;
        font-size: 0.7em;
        font-weight: 500;
        color: #000000;
        /*text-transform: uppercase;*/
    }
    #sidebar_left  .progress_container .prog::before,
    #koniec_status  .progress_container .prog::before,
    #slide_content  .progress_container .prog::before
    {
        content: '';
        display: block;
        height: 100%;
        margin-left: 50%;
        transform-origin: left;
        border-radius: 0 100% 100% 0/50%;
    } 
    #sidebar_left  .progress_container .prog::after,
    #koniec_status  .progress_container .prog::after,
    #slide_content  .progress_container .prog::after
    {
        content: '';
        position: absolute;
        inset: 6px;
        border-radius: 50%;
        background: #f6f6f6;

    }
    #sidebar_left .progress_container .prog::before,
    #koniec_status .progress_container .prog::before,
    #slide_content .progress_container .prog::before
    {
        background: var(--clr);
        transform: rotate(calc(((var(--i) - 50) * 0.01turn)));
    }
	#sidebar_left .progress_container .prog.less::before,
	#koniec_status .progress_container .prog.less::before,
	#slide_content .progress_container .prog.less::before
    {
        background: #dbd7d7;
        transform: rotate(calc(((var(--i) - 0) * 0.01turn)));
    }
    #sidebar_left .progress_container .prog.complete::after,
    #koniec_status .progress_container .prog.complete::after,
    #slide_content .progress_container .prog.complete::after
    {
        background: var(--clr);
        background: var(--clr) -webkit-linear-gradient(left,  var(--clr) 42%, var(--clr2) 100%)
        
    }
    #sidebar_left .progress_container .prog.complete > h3,
    #koniec_status .progress_container .prog.complete > h3,
    #slide_content .progress_container .prog.complete > h3
    {
        display: none;
    }  
    #sidebar_left .progress_container .prog.complete > h4,
    #koniec_status .progress_container .prog.complete > h4,
    #slide_content .progress_container .prog.complete > h4
    {
        position: absolute;
        top: 36%;
        font-size: 1.25em;
        color: #ffffff;
        white-space: nowrap;
    }
    #sidebar_left .progress_container .prog.complete,
    #koniec_status .progress_container .prog.complete,
    #slide_content .progress_container .prog.complete
    {
        background: #dbd7d7  -webkit-linear-gradient(left,  var(--clr) 80%, var(--clr2) 100%);
    }

    #sidebar_left .progress_container .prog.complete::after,
    #koniec_status .progress_container .prog.complete::after,
    #slide_content .progress_container .prog.complete::after {
        inset: 1px;
    }