/*
Písmo: 000000
Hoover-start: #90F9BA
Hoover-finish: #78FAAE
Hoover-color: #0E3A2F
Checked-start: #0E3A2F
Checked-finish: #1C5144
Checked-color: #FFFFFF
Alert: F15252
*/


@import url("./FONTS/stylesheet.css");


input[type=text] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    font-family: SkodaNext, Calibri, sans-serif;
    padding: 8px;    
    box-sizing: border-box;
    border: 2px solid #DCDCDC;
    color: #000000;
    background: #FFFFFF; 
    font-size: 17px;       
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;    
    border-radius: 5px;
}

input[type=text]:focus {
    border: 2px solid #1C5144;
    background: linear-gradient(180deg,#F3F3F3 0,#F8F8F8 100%);
}

input[type="text"]:disabled {
  background: linear-gradient(180deg,#E0E4E5 0,#E0E4E5 100%);
  user-select: none;
}

input[type=text]:-webkit-autofill,
input[type=text]:-webkit-autofill:hover, 
input[type=text]:-webkit-autofill:focus, 
input[type=text]:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px #FFFFFF inset !important;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


input[type=number] {
    -webkit-appearance: none;
    appearance: none;
    -moz-appearance: textfield;    

    font-family: SkodaNext, Calibri, sans-serif;
    padding: 8px;    
    box-sizing: border-box;
    border: 2px solid #DCDCDC;
    color: #000000;
    background: #FFFFFF; 
    font-size: 17px;       
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;    
    border-radius: 5px;
}


input[type=number]:focus {
    border: 2px solid #1C5144;
    background: linear-gradient(180deg,#F3F3F3 0,#F8F8F8 100%);
}

input[type=number]:disabled {
  background: linear-gradient(180deg,#E0E4E5 0,#E0E4E5 100%);
  user-select: none;
}

textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    font-family: SkodaNext, Calibri, sans-serif;
    padding: 8px;
    box-sizing: border-box;
    border: 2px solid #DCDCDC;
    color: #000000;
    background: #FFFFFF; 
    font-size: 17px;       
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
    border-radius: 5px;
    width: 950px;
    max-width: 95%;
    height: 150px;
    resize: none;    
}

textarea:focus {
    border: 2px solid #1C5144;
    background: linear-gradient(180deg,#F3F3F3 0,#F8F8F8 100%);
}

.alertbunka {
    background: #EFBFBF !important;    
}

em {
    font-size: 0.9em;
}

strong {    
    font-weight: 600;
}

b {
    font-weight: 500;
    color: #000000;
}


body {
    background: #F3F3F3;
    -webkit-tap-highlight-color: transparent;
}

.telocele {
    font-family: SkodaNext, Calibri, sans-serif; 
    font-size: 17px;     
    width: 1000px; 
    max-width: 95%; 
    margin-left: auto; 
    margin-right: auto;  
    padding: 5px; 
    background: #FFFFFF;
    color: #000000;
    border: 1px solid #F3F3F3;
    border-radius: 5px;
    font-weight: 300;
    user-select: none;
}

.delitko {
    width: 100%; 
    display: flex;
    margin-top: 5px;
}
.smallpruh {
    width: 10%; 
    background: #1C5144; 
    height: 2px;
}
.bigpruh {
    width: 90%; 
    background: #78FAAE; 
    height: 2px;
}

.hrcolor {
   background: linear-gradient(180deg,#E0E4E5 0,#E0E4E5 100%);
   max-width: 100%; 
   height: 2px;       
}
.hrcolor_obal {
    width: 100%;
    margin-bottom: 10px;
    user-select: none; 
}

.restartbutton {
    width: 140px; 
    max-width: 96%; 
    color: #000000;
    background: linear-gradient(180deg,#E0E4E5 0,#E0E4E5 100%);
    cursor: pointer; 
    padding: 8px; 
    display: flex; 
    justify-content: center;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    border-radius: 5px;
    user-select: none;
    font-weight: 500;
    font-size: 15px;          
}

.restartbutton_hoover {
    width: 140px; 
    max-width: 96%; 
    color: #000000;
    background: linear-gradient(180deg,#EAEEEF 0,#EAEEEF 100%);
    cursor: pointer; 
    padding: 8px; 
    display: flex; 
    justify-content: center;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    border-radius: 5px;
    user-select: none;
    font-weight: 500;
    font-size: 15px;          
}
.instruction {
    text-transform: uppercase;
    color: #0094FF;
    font-weight: 500;
}


.otazkatext {
    width: 94%; 
    text-align: left; 
    margin-left: 3%; 
    margin-right: 3%; 
    margin-top: 2%; 
    margin-bottom: 30px; 
    font-size: 18px;
    user-select: none;    
}

.phpalert {
    margin-top: 10px;
    margin-bottom: 10px; 
    color: #F15252;
    font-weight: 500;
    text-align: left;
    font-size: 16px;    
}

.phpalert_table {
    margin-top: 3px; 
    color: #F15252;
    font-weight: 500;
    text-align: inherit;
    font-size: 16px;       
}

.tazid {
    width: 100%;
    font-weight: bold;
    font-size: 0.7em;
    margin-bottom: 10px;
}

.odsadit2 {
    padding-left: 10px;
}

.odsadit_shora {
    margin-top: 20px;
}


.hiddenform {
  display: none;
}

.telootazky {
    width: 1000px; 
    max-width: 100%; 
    display: flex; 
    justify-content: space-around;
    flex-flow: row wrap;
    gap: 5px;
}

.formular {
    width: 1000px; 
    max-width: 100%;
    user-select: none;
}

.progressbararea {
    width: 100%; 
    display: flex; 
    margin-top: 30px; 
    margin-bottom: 10px;
}

.progressbar {    
    background: linear-gradient(180deg,#1C5144 0,#0E3A2F 100%);
    height: 5px;
}

.progressrest {
    background: linear-gradient(180deg,#CACECF 0,#CACECF 100%);
    height: 5px;
}


.submitarea {
    margin-top: 20px;
    margin-bottom: 20px;
    width: 100%; 
    display: flex;
    flex-flow: row wrap; 
    justify-content: center;
    gap: 20px;   
}

.subsubmitarea {
    width: 98%; 
    display: flex;
    flex-flow: row wrap; 
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;    
}

.navigationarea { 
    display: flex;
    flex-flow: row wrap; 
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

@media only screen and (max-width: 550px) {
    .navigationarea { 
        width: 100%;
    }
}

@media only screen and (max-width: 361px) {
    .navigationarea, .subsubmitarea { 
        width: 100%;
        justify-content: space-around;
    }
}


.submitbutton {
    width: 140px; 
    max-width: 96%; 
    color: #FFFFFF;
    background: linear-gradient(180deg,#1C5144 0,#0E3A2F 100%);
    cursor: pointer; 
    padding: 8px; 
    display: flex; 
    justify-content: center;
    align-items: center;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    border-radius: 5px;
    user-select: none;
    font-size: 15px;
    font-weight: 500;
    text-align: center;    
}

.submitbutton_hoover {
    background: linear-gradient(180deg,#78FAAE 0,#78FAAE 100%); 
    color: #0E3A2F;    

    width: 140px; 
    max-width: 96%;  
    cursor: pointer;  
    padding: 8px; 
    display: flex; 
    justify-content: center;
    align-items: center;
    -webkit-transition: 0.3s;
    transition: 0.3s;    
    border-radius: 5px;
    user-select: none;
    font-size: 15px;    
    font-weight: 500;
    text-align: center;
}

.nadpisVrotaciObal {
    background: linear-gradient(180deg,#E0E4E5 0,#E0E4E5 100%);
    max-width: 98%; 
    text-align: center; 
    padding: 8px; 
    border-radius: 5px;
}

.nadpisVrotaci {
    font-size: 1.3em;      
    line-height: 1.4em; 
    color: #1C5144;
    font-weight: 500;
}

/*Buttony pro single a multiple*/

.buttontextcolumn {
    width: 450px;
    max-width: 100%; 
    display: flex; 
    flex-direction: column;
    align-items: center;
    gap: 5px;    
}
    
.buttontext_default {
    background: linear-gradient(180deg,#E0E4E5 0,#E0E4E5 100%);
    color: #000000;
    
    width: 450px; 
    max-width: 96%;  
    cursor: pointer;      
    padding: 8px; 
    text-align: center;
    border-radius: 5px;
    user-select: none;    
}

.buttontext_checked {
    background: linear-gradient(180deg,#1C5144 0,#0E3A2F 100%);
    color: #FFFFFF;
    
    width: 450px; 
    max-width: 96%;     
    cursor: pointer;      
    padding: 8px; 
    text-align: center;
    border-radius: 5px;
    user-select: none;   
}

.buttontext_hoover {
    background: linear-gradient(180deg,#78FAAE 0,#78FAAE 100%); 
    color: #0E3A2F;    
    
    width: 450px; 
    max-width: 96%;      
    cursor: pointer;      
    padding: 8px;
    text-align: center;
    border-radius: 5px;
    user-select: none;
}

.vlozeny_text {
    width: 450px;
    max-width: 96%;    
    text-align: center;
    padding: 8px;    
    padding-bottom: 4px;
    font-weight: 500;
    background: #FFFFFF;
    user-select: none;
}

/*Text answer*/

.qtextfield {
    width: 94%;
    margin-left: 3%; 
    margin-right: 3%;
    display: flex;
    justify-content: center;
    flex-flow: row wrap;  
    margin-bottom: 20px; 
}

.qtextrow {
    width: 920px;
    max-width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    margin-bottom: 3px;
}

@media only screen and (max-width: 999px) {
    .qtextrow {
        justify-content: left;
    }
}


.qtextlabelfield {
    width: 300px;
    max-width: 90%;
    text-align: right;
    padding: 5px;
    font-size: 15px;
    user-select: none;
}

@media only screen and (max-width: 999px) {
    .qtextlabelfield {
        text-align: left;
    }
}

.qtextanswerfield {
    width: 610px;
    max-width: 100%;
}

.qtextanswer {
    width: 100%;
    text-align: left;
    font-size: 15px !important;
}



/*Numeric answer*/

.qnumfield {
    width: 94%;
    margin-left: 3%; 
    margin-right: 3%;
    display: flex;
    justify-content: center;
    flex-flow: row wrap;  
    margin-bottom: 20px;
    box-sizing: border-box;
}

.qnumrow {
    width: 920px;
    max-width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: left;
    align-items: center;
    margin-bottom: 3px;
    gap: 3px;
    box-sizing: border-box;
}

.qnumlabelfield {
    width: 150px;
    max-width: 48%;
    text-align: right;
    font-size: 15px;
    user-select: none;
    box-sizing: border-box;
    word-wrap: break-word;
}

@media only screen and (max-width: 300px) {
    .qnumlabelfield {
        text-align: left;
    }
}

.qnumvpravo {
    display: flex;
    flex-flow: row wrap;
    justify-content: left;
    gap: 3px;
    align-items: center;
    width: 150px;
    max-width: 48%;
    box-sizing: border-box;    
} 


.qnumzaotazkou {
    text-align: left;
    font-size: 15px;
    user-select: none;
    box-sizing: border-box;    
}

@media only screen and (max-width: 300px) {
    .qnumzaotazkou {
        display: none;
    }
}

.qnumanswerfield {
    width: 100px;
    max-width: 100%;
    box-sizing: border-box; 
}

.qnumanswer {
    width: 100%;
    text-align: center;
    font-size: 15px !important;
}
           
.prodisabled {
    font-style: italic;
    font-weight: bold;    
}




/*TYPE10 - GRID single*/

.type10answerbut_default {
    background: linear-gradient(180deg,#E0E4E5 0,#E0E4E5 100%);
    color: #000000;
   
    font-size: 15px;
    max-width: 96%;      
    cursor: pointer;
    margin: 2px; 
    margin-bottom: 5px; 
    padding: 5px;
    display: flex; 
    justify-content: center;    
    align-items: center;
    text-align: center;
    border-radius: 5px;
    user-select: none;    
}

.type10answerbut_checked {
    background: linear-gradient(180deg,#1C5144 0,#0E3A2F 100%);
    color: #FFFFFF;

    font-size: 15px;    
    max-width: 96%;      
    cursor: pointer; 
    margin: 2px;
    margin-bottom: 5px; 
    padding: 5px; 
    display: flex; 
    justify-content: center;    
    align-items: center;    
    text-align: center;
    border-radius: 5px;
    user-select: none;
}

.type10answerbut_hoover {
    background: linear-gradient(180deg,#78FAAE 0,#78FAAE 100%); 
    color: #0E3A2F;    

    font-size: 15px;
    max-width: 96%; 
    cursor: pointer;
    margin: 2px; 
    margin-bottom: 5px; 
    padding: 5px; 
    display: flex; 
    justify-content: center;    
    align-items: center;    
    text-align: center;
    border-radius: 5px;
    user-select: none;
}

.type10answerfield {
    display: flex;
    flex-flow: row wrap;
    justify-content: left;    
}

.type10otazka {
    font-size: 17px;  
    user-select: none;
}

.type10row {
    width: 100%;
    margin-bottom: 5px;
    padding-bottom: 5px;
    display: flex;    
    flex-flow: row wrap;
    align-items: center;
}

.type10rowlast {
    width: 100%;
    margin-bottom: 5px;
    padding-bottom: 0px;
    display: flex;      
    flex-flow: row wrap;
    align-items: center;  
}

.type10field {
    width: 94%; 
    display: flex;
    flex-direction: column;
    justify-content: left; 
    margin-left: 3%; 
    margin-right: 3%;  
}

.type10otalert {
    display: flex;
    flex-direction: column;  
    margin-right: 3px;
}
/*ORDER Question*/

.qorderfield {
    width: 94%; 
    display: flex;    
    flex-flow: row wrap; 
    user-select: none;   
    justify-content: space-around;   
}

.ordersourcecolumn, .ordertargetcolumn {
    width: 450px; 
    max-width: 95%; 
    display: flex; 
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 15px;
}

.ordersourcerow, .ordertargetrow {
    width: 100%; 
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    gap: 4px;
}

.order_columns_nadpis {
    background: linear-gradient(180deg,#78FAAE 0,#78FAAE 100%); 
    color: #FFFFFF;    
    padding: 8px;
    border-radius: 5px;
    text-align: center;
    width: 95%;
    font-weight: bold;
}

.pole_moznosti {
    width: 95%;
    display: flex; 
    flex-flow: row wrap;
    justify-content: center;
    align-items: flex-start;
    margin-top: 5px;    
}

.ordersourceouter {
    background: linear-gradient(180deg,#E0E4E5 0,#E0E4E5 100%);
    color: #000000;  
         
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;       
    cursor: pointer;
    border-radius: 5px;
    font-size: 16px;
    padding: 6px;
    text-align: center;
    margin-top: 2px;
    margin-bottom: 2px;
}

.ordersourceouterhoover {
    background: linear-gradient(180deg,#78FAAE 0,#78FAAE 100%); 
    color: #0E3A2F;    

    display: flex;
    justify-content: center;
    align-items: center;        
    width: 100%; 
     
    cursor: pointer;
    border-radius: 5px;
    font-size: 16px;
    padding: 6px;
    text-align: center;
    margin-top: 2px;
    margin-bottom: 2px;    
}

.ordersourceouterchecked {
    background: linear-gradient(180deg,#1C5144 0,#0E3A2F 100%);
    color: #FFFFFF;
     
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; 
      
    cursor: pointer;
    border-radius: 5px;
    font-size: 16px;
    padding: 6px;
    text-align: center;
    margin-top: 2px;
    margin-bottom: 2px;        
}


.targetnumberouter {
    background: linear-gradient(180deg,#E0E4E5 0,#E0E4E5 100%);
    color: #000000;
    
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25px;  
    cursor: pointer;
    border-radius: 5px;
    font-size: 16px;
    padding: 6px;
    text-align: center;
    margin-top: 2px;
    margin-bottom: 2px;        
}

.targetnumberouterhoover {
    background: linear-gradient(180deg,#78FAAE 0,#78FAAE 100%); 
    color: #0E3A2F;    
    
    display: flex;
    justify-content: center;
    align-items: center;    
    width: 25px;      
    cursor: pointer;
    border-radius: 5px;
    font-size: 16px;
    padding: 6px;
    text-align: center;
    margin-top: 2px;
    margin-bottom: 2px;
}

.targetnumberouterchecked {
    background: linear-gradient(180deg,#1C5144 0,#0E3A2F 100%);
    color: #FFFFFF;

    width: 25px;   
    display: flex;
    justify-content: center;
    align-items: center;              
    cursor: pointer;
    border-radius: 5px;
    font-size: 16px;
    padding: 6px;
    text-align: center;
    margin-top: 2px;
    margin-bottom: 2px;
}


.ordertargetouter {
    background: linear-gradient(180deg,#E0E4E5 0,#E0E4E5 100%);
    color: #000000;  
    font-style: italic;
    
    width: 310px;
    max-width: auto;
    display: flex;
    justify-content: center;
    align-items: center;          
    cursor: pointer;
    border-radius: 5px;
    font-size: 15px;
    padding: 6px;
    text-align: center;
    margin-top: 2px;
    margin-bottom: 2px;
}


.ordertargetouterhoover {
    background: linear-gradient(180deg,#78FAAE 0,#78FAAE 100%); 
    color: #0E3A2F;    
    font-style: normal;    
    
    width: 310px;
    max-width: auto;
    display: flex;
    justify-content: center;
    align-items: center;          
    cursor: pointer;
    border-radius: 5px;
    font-size: 15px;
    padding: 6px;
    text-align: center;
    margin-top: 2px;
    margin-bottom: 2px;
}


.ordertargetouterchecked {
    background: linear-gradient(180deg,#1C5144 0,#0E3A2F 100%);
    color: #FFFFFF;
    font-style: normal;
        
    width: 310px;
    max-width: auto;
    display: flex;
    justify-content: center;
    align-items: center;          
    cursor: pointer;
    border-radius: 5px;
    font-size: 15px;
    padding: 6px;
    text-align: center;
    margin-top: 2px;
    margin-bottom: 2px;
}

.orderupouterfirst {
    visibility: hidden;
    width: 20px;  
    display: flex; 
    align-items: center;    
}

.orderupouter {
    width: 20px;  
    display: flex; 
    align-items: center;
    cursor: pointer;
}

.orderdownouterlast {
    visibility: hidden;
    width: 20px; 
    display: flex; 
    align-items: center;    
}

.orderdownouter {
    width: 20px;  
    display: flex; 
    align-items: center;
    cursor: pointer;
}

.deleteouter {
    width: 20px;  
    display: flex; 
    align-items: center;
    cursor: pointer;
}


.no_color {
    color: #C00000;
}

.order_icon {
    font-size: 25px;
}


/*Type13 Question - Selectbox*/

.type13field {
    display: flex;
    flex-flow: row wrap;    
    width: 95%;    
}



.selectcolumn {
    width: 310px;
    max-width: 100%;
    display: flex;
    flex-direction: column;             
}
.selectpopis {    
    background: linear-gradient(180deg,#E0E4E5 0,#E0E4E5 100%);
    color: #000000;

    width: 240px; 
    max-width: 90%; 
    padding: 9px;
    margin: 2px;
    margin-top: 10px;
    cursor: pointer;
    border-radius: 5px;
}
.selectpopis_checked {    
    background: linear-gradient(180deg,#1C5144 0,#0E3A2F 100%);
    color: #FFFFFF;

    width: 240px; 
    max-width: 90%; 
    padding: 9px;
    margin: 2px;
    margin-top: 10px;
    cursor: pointer;
    border-radius: 5px;
}

.selectpole {
    overflow-y: scroll; 
    max-height:350px; 
    width: 300px; 
    max-width: 95%; 
    display: none; 
    flex-direction: column;
}

.selectbutton {
    background: linear-gradient(180deg,#E0E4E5 0,#E0E4E5 100%);
    color: #000000;

    
    width: 240px; 
    max-width: 95%; 
    padding: 9px; 
    margin: 2px;
    cursor: pointer;
    border-radius: 5px;
}

.selectbutton_hoover {
    background: linear-gradient(180deg,#78FAAE 0,#78FAAE 100%); 
    color: #0E3A2F;    
    
    
    width: 240px; 
    max-width: 95%;      
    padding: 9px; 
    margin: 2px;
    cursor: pointer;
    border-radius: 5px;
}



/*Type14 Multiple picture*/

.buttonpic_default {
    background: #FFFFFF;
    color: #000000;
    font-weight: 500;
    border: 4px solid #E5E5E5;
         
    width: 212px; 
    max-width: 96%; 
    cursor: pointer; 
    margin: 3px; 
    padding: 5px;        
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 5px;
}

.buttonpic_checked {
    background: #FFFFFF;
    color: #0E3A2F;
    font-weight: 700;
    border: 4px solid #0E3A2F;    

    width: 212px; 
    max-width: 96%;      
    cursor: pointer; 
    margin: 3px;
    padding: 5px;  
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 5px;
}

.buttonpic_hoover {
    background: #FFFFFF;
    color: #78FAAE;
    font-weight: 700;
    border: 4px solid #78FAAE;    
       

    width: 212px; 
    max-width: 96%; 
    cursor: pointer; 
    margin: 3px; 
    padding: 5px; 
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 5px;
}

.type14field {
    display: flex;
    flex-flow: row wrap;
    width: 95%; 
    justify-content: center;  
}

.buttonpic_label {
    text-align: center;
}

/*TYPE12 - Párové srovnání*/

.type12answerbut_default {
    background: linear-gradient(180deg,#E0E4E5 0,#E0E4E5 100%);
    color: #000000;
            
    font-size: 15px;
    max-width: 96%;      
    cursor: pointer;
    margin: 2px; 
    margin-bottom: 5px; 
    padding: 8px;
    display: flex; 
    text-align: center;    
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    width: 30px;
    min-height: 30px;            
}

.type12answerbut_checked {
    background: linear-gradient(180deg,#1C5144 0,#0E3A2F 100%);
    color: #FFFFFF;

    font-size: 15px;
    max-width: 96%;      
    cursor: pointer; 
    margin: 2px;
    margin-bottom: 5px; 
    padding: 8px; 
    display: flex; 
    text-align: center;    
    align-items: center;   
    justify-content: center;
    border-radius: 5px;
    width: 30px;
    min-height: 30px;
}

.type12answerbut_hoover {
    background: linear-gradient(180deg,#78FAAE 0,#78FAAE 100%); 
    color: #0E3A2F;    

    font-size: 15px;   
    max-width: 96%; 
    cursor: pointer;
    margin: 2px; 
    margin-bottom: 5px; 
    padding: 8px; 
    display: flex; 
    text-align: center;  
    align-items: center;    
    justify-content: center;
    border-radius: 5px;
    width: 30px;
    min-height: 30px;
}

.type12answerbutexcl_default {
    background: #FFFFFF;
    color: #000000; 
    border: 2px solid #71706f;
   
    font-size: 15px;
    max-width: 96%;      
    cursor: pointer;
    margin: 2px; 
    margin-bottom: 5px; 
    padding: 8px;
    display: flex; 
    text-align: center;    
    align-items: center;   
    justify-content: center;
    border-radius: 5px;
    width: 200px;
    min-height: 20px;           
}

.type12answerbutexcl_checked {
    background: linear-gradient(180deg,#1C5144 0,#0E3A2F 100%);
    color: #FFFFFF;

    font-size: 15px;
    max-width: 96%;      
    cursor: pointer; 
    margin: 2px;
    margin-bottom: 5px; 
    padding: 8px; 
    display: flex; 
    text-align: center;    
    align-items: center; 
    justify-content: center;
    border-radius: 5px;
    width: 200px;
    min-height: 20px;           
}

.type12answerbutexcl_hoover {
    background: linear-gradient(180deg,#78FAAE 0,#78FAAE 100%); 
    color: #0E3A2F;    

    font-size: 15px;   
    max-width: 96%; 
    cursor: pointer;
    margin: 2px; 
    margin-bottom: 5px; 
    padding: 8px; 
    display: flex; 
    text-align: center;  
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    width: 200px;
    min-height: 20px;    
}

.type12answerfield {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;    
}

.type12otazka {
    font-size: 16px;  
    padding: 3px; 
    border: 2px solid #FFFFFF;
    padding: 5px;
    width: 940px;
    max-width: 100%;
    font-weight: 500;    
}

.type12LabelsOptions{
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
    width: 100%;    
}

.type12row {
    display: flex;    
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.type12rowlast {
    display: flex;      
    flex-flow: row wrap;  
    align-items: center;
    justify-content: center;
    width: 100%;
}

.type12field {
    width: 94%; 
    display: flex;
    flex-direction: column;
    justify-content: left; 
    margin-left: 3%; 
    margin-right: 3%;  
}

.type12otalert {
    display: flex;
    flex-direction: column;  
    margin-bottom: 5px;
    text-align: left;    
    width: 100%;    
}

.leftlabelfield, .rightlabelfield {
    width: 320px;
    font-size: 16px;
    font-weight: 300;
    cursor: pointer;
}
.leftlabelfield {
    text-align: right;
}
.rightlabelfield {
    text-align: left;
}

.type12exclfield {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;  
    margin-top: 10px;  
}
.type12icon {
    font-size: 12px;
}

/*Typ 11 - 2 prvková baterie sloupcová*/ 
.type11answerbut_default {
    background: linear-gradient(180deg,#E0E4E5 0,#E0E4E5 100%);
    color: #000000;

    width: 350px; 
    max-width: 95%;      
    cursor: pointer;
    margin: 2px; 
    margin-bottom: 5px; 
    padding: 8px; 
    text-align: center; 
    border-radius: 5px;        
}

.type11answerbut_checked {
    background: linear-gradient(180deg,#1C5144 0,#0E3A2F 100%);
    color: #FFFFFF;

    width: 350px; 
    max-width: 95%;      
    cursor: pointer;
    margin: 2px; 
    margin-bottom: 5px; 
    padding: 8px; 
    text-align: center; 
    border-radius: 5px;   
}

.type11answerbut_hoover {
    background: linear-gradient(180deg,#78FAAE 0,#78FAAE 100%); 
    color: #0E3A2F;    

    width: 350px; 
    max-width: 95%;      
    cursor: pointer;
    margin: 2px; 
    margin-bottom: 5px; 
    padding: 8px; 
    text-align: center; 
    border-radius: 5px;   
}

.type11field {
    width: 95%; 
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    row-gap: 20px;
    column-gap: 40px;
    margin-bottom: 15px; 
}


.type11otazka {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-end;
    justify-content: center;
    text-align: center;
    width: 100%;
    font-weight: 400;        
    margin-bottom: 10px;
    font-size: 18px;    
}
.type11nadpis {
    margin-bottom: 10px;
    font-weight: bold;
    background: #1C5144;
    color: #FFFFFF;
    width: 350px;
    max-width: 95%;
    padding: 8px;
    text-align: center; 
    border-radius: 5px;
}




.type11answerfield {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


.type11row {
    display: flex;
    width: 350px;
    max-width: 100%;
    flex-flow: column;
    justify-content: space-between;
}

.type11comment {
    font-style: italic;
    font-size: 0.9em;
    width: 100%; 
    text-align: center;
    margin-top: 25px;  
    margin-bottom: 20px;     
}

.qnricon {
    font-size: 2.5em;
    color: #1C5144;
    margin-right: 20px;
}

/*barometr*/
input[type=range] {
   width: 100%;
  -webkit-appearance: none;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 11px;
  cursor: pointer;
  background: #DCDCDC;
  border-radius: 1px;
  border: 1px solid #304D68;
}
input[type=range]::-webkit-slider-thumb {
  border: 1px solid #304D68;
  height: 26px;
  width: 26px;
  border-radius: 15px;
  background: #1C5144;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -8px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #DCDCDC;
}


input[type=range]::-moz-range-track {
  width: 100%;
  height: 11px;
  cursor: pointer;
  background: #DCDCDC;
  border-radius: 1px;
  border: 1px solid #304D68;
}
input[type=range]::-moz-range-thumb {
  border: 1px solid #304D68;
  height: 26px;
  width: 26px;
  border-radius: 15px;
  background: #1C5144;
  cursor: pointer;
}

input[type=range]::-ms-track {
    height: 11px;
    background: transparent;
    border-color: transparent;
    border-width: 15px 0;
    color: transparent;
}
input[type=range]::-ms-fill-lower {
    background: #DCDCDC;
    border-radius: 0px;
}
input[type=range]::-ms-fill-upper {
    background: #DCDCDC;
    border-radius: 0px;
}
input[type=range]::-ms-thumb {
    border: none;
    height: 26px;
    width: 26px;
    border-radius: 15px;
    background: #1C5144;
    margin-top: 0px;
}
input[type=range]:focus::-ms-fill-lower {
    background: #DCDCDC;
}
input[type=range]:focus::-ms-fill-upper {
    background: #DCDCDC;
}


/*TYPE 21 Maxdiff*/
.type21field{
    width: 94%; 
    display: flex;
    flex-flow: row wrap;
    justify-content: center; 
    margin-left: 3%; 
    margin-right: 3%;  
}
.type21row {
    width: 100%; 
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
}

@media only screen and (max-width: 700px) {
    .type21row {
        font-size: 17px;
    }
}

@media only screen and (max-width: 500px) {
    .type21row {
        font-size: 16px;
    }
}

@media only screen and (max-width: 400px) {
    .type21row {
        font-size: 15px;
    }
}


.type21nadpiskrajgreen, .type21nadpiskrajred {
    padding: 5px;
    padding-bottom: 2px;
    font-weight: 500;
    width: 120px;
    max-width: 20%;    
    display: flex;
    justify-content: center;
    align-items: flex-end;
    text-align: center;    
}
.type21nadpiskrajgreen {
    color: #1B842C; 
}
.type21nadpiskrajred {
    color: #1C5144; 
}

.type21nadpiscenter {
    padding: 5px;
    padding-bottom: 2px;
    font-weight: 500;
    width: 350px;
    max-width: 60%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    text-align: center;    
}

.type21answerbut_default, .type21answerbut_green, .type21answerbut_red, .type21answerbut_hoovergr, .type21answerbut_hooverred, .type21labelfield_default, .type21labelfield_green, .type21labelfield_red {
    padding: 5px;
    border-left: 2px solid #808080;        
    border-top: 2px solid #808080;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;       
    min-height: 30px; 
}

.type21answerbut_default, .type21answerbut_green, .type21answerbut_red, .type21answerbut_hoovergr, .type21answerbut_hooverred {
    width: 120px;
    max-width: 20%;
    cursor: pointer;
}

.type21answerbut_default {
    background: #FFFFFF;
}
.type21answerbut_green {
    background: #1B842C;
}
.type21answerbut_red {
    background: #1C5144;
}
.type21answerbut_hoovergr {
    background: #A5D3AC;
}
.type21answerbut_hooverred {
    background: #D1A5A5;
}

.type21labelfield_default {
    width: 350px;
    max-width: 60%;
    font-weight: 500;
}
.wraping {
    word-wrap: break-word;
    width: 100%;
}

/*Otázka 22 - numeric s exclusive button*/

.exclbuttons {    
    width: 100%; 
    display: flex; 
    flex-flow: row-wrap;
    justify-content: flex-start;
    margin-top: 20px;
}

/* Obarvovač */

.type19field {
    width: 94%; 
    display: flex;
    flex-direction: column;
    justify-content: left; 
    margin-left: 3%; 
    margin-right: 3%;  
}

.type19hlavicka {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;  
    margin-bottom: 20px;   
}

.type19pos, .type19neg, .type19erase, .type19pos_checked, .type19neg_checked, .type19erase_checked {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
    font-size: 1.0em;    
    cursor: pointer;    
    text-align: center;
    width: 100px;
    margin: 5px;
    margin-top: 0px;
    font-weight: 500;
    color: #FFFFFF;
    border-radius: 5px;
    gap: 5px;
}
.type19_text {
    width: 80px;
    display: flex;
    justify-content: center;
    align-items: center;    
}
.type19_icon {
    width: 20px;
    display: flex;
    justify-content: center;
    align-items: center;    
} 

.type19pos {
    background: #617C64;
}

.type19pos_checked {
    background: #005608;
}

.type19neg {
    background: #7C6262;
}

.type19neg_checked {
    background: #8E1313;
}

.type19erase {
    background: #808080;
}

.type19erase_checked {
    background: #3D3D3D;
}

.type19obarv {
    border: 1px solid #DCDCDC;
    padding: 15px;
    font-size: 1.25em;
    font-style: italic;
    font-weight: 500;
    line-height: 1.5em;
    border-radius: 5px;
}

.prvek, .prvek_hoover, .prvek_pos, .prvek_neg {
    cursor: pointer;
    border-radius: 3px;
}
.prvek {
    background: #FFFFFF;
    color: #000000;
}
.prvek_hoover {
    background: #DCDCDC;
    color: #000000;
}
.prvek_pos {
    background: #005608;
    color: #FFFFFF;
} 
.prvek_neg {
    background: #8E1313;
    color: #FFFFFF;
}

/*Otázka 22 - numeric s exclusive button*/

.exclbuttons {    
    width: 100%; 
    max-width: 100%;
    display: flex; 
    flex-flow: row wrap;
    justify-content: space-between;
}

.exclbuttons_obal {    
    width: 100%; 
    display: flex; 
    flex-flow: row wrap;
    justify-content: flex-start;
    margin-top: 20px;        
}

/*Otázka 23 / 24 - textarea*/
.qtextarea_obal {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;    
}

.exclbuttons_textarea_row {
    width: 920px;
    max-width: 100%; 
    display: flex; 
    flex-flow: row wrap;
    justify-content: flex-start;
    margin-top: 20px;       
}

.exclbuttons_textarea {    
    width: 610px;
    max-width: 100%; 
    display: flex; 
    flex-flow: row wrap;
    justify-content: space-around;
    gap: 10px;
    margin-top: 20px;
}

.buttonexcl_default {
    background: linear-gradient(180deg,#E0E4E5 0,#E0E4E5 100%);
    color: #000000;
    
    width: 250px; 
    max-width: 96%;  
    cursor: pointer;      
    padding: 8px; 
    text-align: center;
    border-radius: 5px;
    user-select: none;    
}

.buttonexcl_checked {
    background: linear-gradient(180deg,#1C5144 0,#0E3A2F 100%);
    color: #FFFFFF;
    
    width: 250px; 
    max-width: 96%;     
    cursor: pointer;      
    padding: 8px; 
    text-align: center;
    border-radius: 5px;
    user-select: none;   
}

.buttonexcl_hoover {
    background: linear-gradient(180deg,#78FAAE 0,#78FAAE 100%); 
    color: #0E3A2F;
    
    width: 250px; 
    max-width: 96%;      
    cursor: pointer;      
    padding: 8px;
    text-align: center;
    border-radius: 5px;
    user-select: none;
}

/*TYPE26 - GRID single sloupcovy s textem*/

.type26answerbut_default, .type26answerbut_checked, .type26answerbut_hoover {  
    font-size: 16px;
    text-align: center;          
    width: 100%;   
    
    margin-bottom: 5px; 
    padding: 8px;       
    border-radius: 5px; 
    user-select: none;
    cursor: pointer;
}
.type26answerbut_default {
    background: linear-gradient(180deg,#E0E4E5 0,#E0E4E5 100%);
    color: #000000;
}
.type26answerbut_checked {
    background: linear-gradient(180deg,#1C5144 0,#0E3A2F 100%);
    color: #FFFFFF;
}
.type26answerbut_hoover {
    background: linear-gradient(180deg,#78FAAE 0,#78FAAE 100%); 
    color: #FFFFFF;    
}

.type26answerfield {
    width: 1000px;
    max-width: 100%;

    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

.type26otazka {
    font-size: 17px;      
    font-weight: 500;
    width: 96%;
    max-width: 96%;
    text-align: center;         
}

.type26otalert {
    width: 100%;
    max-width: 100%;
    font-weight: 500;
    
    display: flex;
    flex-direction: column;  
    margin-top: 10px;
    margin-bottom: 10px;
    user-select: none;
    text-align: center;
}

.type26row {
    width: 350px;
    max-width: 100%;
    display: flex;    
    flex-flow: row wrap;
    justify-content: center;
    align-items: flex-end;     
    margin-bottom: 5px;
    padding-bottom: 5px;
}

.type26field {
    width: 94%;
    max-width: 94%; 
    display: flex;
    flex-flow: row wrap;    
    justify-content: space-around;
    align-items: flex-end; 
}

.qbutopen {
    width: 98%;
    font-size: 15px !important;
    text-align: center;
}

/********Type20 - single po řádcích*/
.type20field {
    width: 94%; 
    display: flex;
    flex-direction: column;
    justify-content: left;
    gap: 5px; 
}

.type20col {
    width: 100%;
    display: flex;
    flex-flow: row wrap;  
    justify-content: left;
    gap: 5px;
}

.type20button_default, .type20button_checked, .type20button_hoover {
    padding: 5px;       
    cursor: pointer;    
    width: 40px; 
    text-align: center;
    font-size: 15px; 
    border-radius: 5px;                
}

.type20button_default {
    background: linear-gradient(180deg,#E0E4E5 0,#E0E4E5 100%);
    color: #000000;
}
.type20button_hoover {
    background: linear-gradient(180deg,#78FAAE 0,#78FAAE 100%); 
    color: #FFFFFF;    
}
.type20button_checked {
    background: linear-gradient(180deg,#1C5144 0,#0E3A2F 100%);
    color: #FFFFFF;
}

/*TYPE 31 - obarvovač obrázků*/
.whole_container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
.picture_container {
  position: relative;        
}
.picture_self, .clickable_self {
  position: absolute;
  top: 0;
  left: 0;
}
.clickable_self {
  z-index: 5;  
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: flex-start;  
  gap: 0;
}
.obrazek_check {   
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;    
}
.obrazek_check_pos, .obrazek_check_neg, .obrazek_check_hoover {
    opacity: 0.7;
}
.obrazek_check_pos {
    background: #0DFF00;
}
.obrazek_check_neg {
    background: #FF0000;
}
.obrazek_check_hoover {
    background: #FFFFFF;
}

/* přehledová tabulka*/
li {
    margin-top: 5px;
}
ul {
    margin: 0px;
    margin-top: 5px;
    margin-bottom: 20px;
}
.table_nadpis {
    font-weight: 700;
    font-size: 1.3em;
    margin-bottom: 10px;
}
.table_podnadpis {
    font-weight: 700;
    font-size: 1.1em;
    margin-bottom: 10px;
    margin-top: 15px;    
}



.table_result {
    display: flex;
    flex-flow: row wrap;
    box-sizing: border-box;
    margin-top: 20px;
    overflow-x: auto;        
}

.table_result_row {
    box-sizing: border-box;
    display: flex;
    flex-flow: row nowrap;        
}

.table_result_cell {    
    box-sizing: border-box;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
    padding: 5px;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    font-weight: 300;
    text-size-adjust: 100%; 
    -ms-text-size-adjust: 100%; 
    -moz-text-size-adjust: 100%; 
    -webkit-text-size-adjust: 100%;    
}
.vlevo {
    border-left: 1px solid #000000;
}

.nahore {
    border-top: 1px solid #000000;
}


.cell_size_400 {    
    width: 400px;
}
.cell_size_600 {    
    width: 600px;
}

.zmensi {
    font-size: 14px;
}
.zmensi2 {
    font-size: 12px;
}
.zmensi3 {
    font-size: 9px;
}
.cell_size_200 {
    justify-content: center;
    width: 200px;        
}
.cell_size_100 {
    justify-content: center;
    width: 100px;
    text-align: center;        
}
.cell_size_105 {
    justify-content: center;
    width: 105px;
    text-align: center;        
}
.cell_size_95 {
    justify-content: center;
    width: 95px;
    text-align: center;        
}
.cell_size_110 {
    justify-content: center;
    width: 110px;
    text-align: center;        
}
.cell_size_120 {
    justify-content: center;
    width: 120px;
    text-align: center;        
}
.cell_size_74 {
    justify-content: center;
    text-align: center;
    width: 74px;        
}
.velka_sirka {
    width: 1180px;        
}

.sede_pozadi {
    background: #E0E4E5;
}
.skoda_svetle_pozadi {
    background: #78FAAE;
    color: #0E3A2F;
}
.skoda_tmave_pozadi {
    background: #0E3A2F;
    color: #FFFFFF;
}
@media print {
    .pdf_export_odsad_stranku {
        break-before: page;
    }
}
@media not print {
    .pdf_export_odsad_stranku {
        margin-bottom: 0px;
    }
}

/*Report*/
.report_hlavicka {
    width: 100%;
    display: flex;
    justify-content: left;
    align-items: center;
    flex-flow: row wrap;        
}
.report_nadpis {
    padding: 15px;
    width: 100%;
    font-size: 30px;
    margin-top: 10px;
}
.report_menu_obal {   
    width: 100%;
    display: flex;  
    flex-flow: row wrap;
    justify-content: flex-start;    
}
.report_menu_row {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    gap: 15px;
    padding: 15px;
    border-bottom: 1px solid #E0E4E5; 
}
.report_menubutton {
    width: 200px;
    max-width: 100%;
    background: linear-gradient(180deg,#E0E4E5 0,#E0E4E5 100%);
    color: #000000;
    padding: 5px;
    font-size: 16px;
    cursor: pointer;
    text-align: center;
    border-radius: 5px;
}
.selected {
    background: linear-gradient(180deg,#1C5144 0,#0E3A2F 100%);
    color: #FFFFFF;
}
.paddington15 {
    padding: 15px;
}

.table_result_table {
    box-sizing: border-box;
    margin-top: 20px;
    overflow-x: auto;        
}
.table_result_table_table {
    box-sizing: border-box;
    border-collapse: collapse;        
}

.table_result_table_row {
    display: flex;
    flex-flow: row nowrap;    
}

.table_result_table_cell {
    max-width: 100%;
    box-sizing: border-box;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
    padding: 5px;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    font-weight: 300;
    text-size-adjust: 100%; 
    -ms-text-size-adjust: 100%; 
    -moz-text-size-adjust: 100%; 
    -webkit-text-size-adjust: 100%;     
}



/*Konec report*/