/* vim: set ft=css:
   usefull: set nodiff, set nofoldenable */

/* 
Velkost pisma v elemente body definuje veskost vsetkych relativne definovanych velkosti.
Standardna velkost pisma v prehliadacoch je 16px, ale verdana je velka, tak som ju zmensil.
Relativne jednotky em a rem funguju ako percenta, t.j 0.9em je 90% velkosti pisma rodicovskeho elementu, 0.9rem (root em) je 90% velkosti pisma root (html) elementu.
Relativne jednotky maju vacsiu pouzivatelsku variabilitu v responsive dizajne.
rem nefunguje v IE8.
*/

html {
    /* vsetky velkosti uvedene v jednotkach rem su relativnymi hodnotami tejto velkosti */
    font-size: 62.5%; /* zmensim velkost standardneho fontu (16px) na 10px, potom sa lepsie prevadzaju px na em a rem (10px = 1em) */
    background-color: var(--body_bg_color);
}

body, div, span {  
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    margin: 0;
    font-size: 1.4rem;
    line-height: 1.2; /* nasobok aktualnej velkosti pisma */
    color: var(--text_main_color);
}

*:focus { /* prepisem vychodzie oramovanie browsera fokusovaneho elementu */
    outline: 1px solid var(--inputs_focused_outline_color);
}

p {
    margin: 1rem 0;
    line-height: 1.5; /* nasobok aktualnej velkosti pisma */
}

i, em {
    font-style: italic;
}

small {
    font-size: 1.1rem; 
}

ol {
    list-style-type: decimal; /* TinyMCE ani mPDF nema bez tejto definicie cislovany zoznam */
}

ul {
    list-style-type: circle;
}

li {
    list-style-image: url(../img/svg.php?file=li.svg); 
    line-height: 1.8rem;
    margin: 0.7rem 0 0.7rem 4rem;
}

abbr {
    text-decoration: underline;
    cursor: help;
}

ul {
    margin-bottom: 2rem;
}

pre {
    font-family: monospace;
    white-space: pre;
}

/* label by mal mat rovnake velkostne parametre ako input */
label {
    display: inline-block;
    width: 20rem;
    text-align: right;
    min-height: 1.95rem;
    padding: .2rem .2rem .3rem .2rem;
}

/* ak treba viac stlpcov typu label: data label: data, tak za labelom pouzijem span s triedou stlpec2 */
.stlpec2 {
    display: inline-block;
    width: 15rem;
    text-align: left;
    min-height: 1.95rem;
    padding: .2rem .2rem .3rem .2rem;
}

hr {
    border: 0;
    background-color: var(--main_borders_color);
    height: .2rem;
}

img {
    vertical-align: middle;
}

h1,h2,h3,h4,h5,h6,b,strong,.strong {
    font-weight: bold;
}

h1 {
    font-size: 1.6rem;
    margin: 1.2rem 1rem 0.8rem 0rem;
    color: var(--headings_color);
    text-decoration: underline;
}

h2 {
    font-size: 1.6rem;
    margin: 1.2rem 1rem 0.8rem 0rem;
    color: var(--headings_color);
}

h3 {
    font-size: 1.6rem;
    margin: 1.2rem 1rem 0.8rem 0rem;
}

h4 {
    font-size: 1.4rem;
    margin: 1.2rem 1rem 0.8rem 0rem;
    color: var(--headings_color);
    text-decoration: underline;
}

h5 {
    font-size: 1.4rem;
    margin: 1.2rem 1rem 0.8rem 0rem;
    color: var(--headings_color);
}

h6 {
    font-size: 1.4rem;
    margin: 1.2rem 1rem 0.8rem 0rem;
}

sup {
    vertical-align: super;
    font-size: 1rem; 
}

sub {
    vertical-align: sub;
    font-size: 1rem;
}

code {
    font-family: monospace;
}

blockquote {
    display: block;
    padding: 0 2rem 0rem 4.5rem;
    margin: 0 0 2rem;
    position: relative;
    border-left: .5rem solid var(--inactive_color);
}

blockquote:before {
    content: "\201C"; /*Unicode for Left Double Quote*/
      
    /*Font*/
    font-family: Georgia, serif;
    font-size: 6rem;
    font-weight: bold;
    color: var(--inactive_color);
      
    /*Positioning*/
    position: absolute;
    left: 1rem;
    top: -1rem;
}

blockquote p {
    margin: 0 .2rem 0 .2rem;
}

/* ----- MAIN ----- */

#mainContent {
    width: 100rem;
    margin: 0 0rem 0 0rem;
}

#mainHeader {
    font-size: 1.8rem;
    min-height: 1.8rem;
    padding: .4rem;
    text-align: center;
    background-color: var(--headers_bg_color);
    color: var(--headers_color);
    border-style: solid;
    border-color: var(--supp_borders_color);
    border-width: 0 0 .3rem 0;
}

#mainContainer {
    padding: 0.5rem 0 0 1rem;
}

/* ----- NAVBAR a FOOTER ----- */

#navBar {
    min-height: 2.5rem;
    padding: .3rem 0 .3rem 0;
    border-style: solid;
    border-color: var(--menu_bg_color);
    border-width: 0 0 .4rem 0;
    text-align: center; /* vsetky objekty v navBare budu horizontalne v strede kym nepoviem inak */
}

/* zrusim plavanie za navBarom */
#navBar:after {
    content: '';
    display: block;
    clear: both;
}

#footer {
    min-height: 2.5rem;
    padding: .3rem 0 .3rem 0;
    border-style: solid;
    border-color: var(--menu_bg_color);
    border-width: 0 0 .4rem 0;
    text-align: center; /* vsetky objekty v footer budu horizontalne v strede kym nepoviem inak */
}

span.left {
    float: left;
    /* margin-top: .3rem; /* vertikalne pozicovanie v navBare */
}

span.right {
    float: right;
    text-align: right;
}

.separator {
    height: 2rem;
}

/* ----- ODKAZY ----- */
a {
    line-height: 1.4;
    padding: 1px .2rem .2rem .2rem;
    color: var(--a_color);
}

a:link {
    color: var(--a_color);
    text-decoration: underline;
}

a:visited {
    color: var(--a_visited_color);
    text-decoration: underline;
}

a:hover {
    color: var(--a_hover_color);
    background-color: var(--a_hover_bg_color);
}

a img {
    border-width: 0;
    vertical-align: middle;
}

/* trieda nodek znamena ze nedame podfarbenie pri prechode mysou 
 * treba dat najma u obrazkov */
a.nodek {
    padding: 0;
    text-decoration: none;
}

a.nodek:hover {
    background-color: transparent;
}

/* v css 4 uz existuje parent selector, ale v r 2012 tomu nie je podpora v IE 
 * toto by mohlo nahradit v buducnosti nodek u obrazkov
 * ak a obsahuje img tak nebude mat pozadie
$a > img { background-color: transparent; } 
 */

/* ----- TABLE ----- */

table {  
    border: 0;
    border-collapse: collapse;
}

td {
    font-size: 1.3rem; 
    height: 2.6rem;
    line-height: 1.1;
    padding: .2rem;
    vertical-align: middle;
}

th {
    font-size: 1.5rem; /* malo by sa rovnat thead td font-size */
    font-weight: bold;
    min-height: 1.8rem;
    padding: .2rem;
    line-height: 2rem;
    vertical-align: middle;
    text-align: left;
}
 
caption {
    font-size: 1.5rem;
    font-weight: bold;
    padding: .2rem;
}

thead td, tfoot td {
    font-size: 1.5rem;
    text-align: left;
}
 
thead, tfoot, caption {
    min-height: 2.6rem;
    line-height: 2;
}

/* cast mmf_table zodpoveda potrebam triedy MMF_table z HtmlTable */
.mmf_table {
    width: 100%;
    margin: .5rem 0 .5rem 0;
}

.mmf_table > thead, .mmf_table > caption {
    background-color: var(--headers_bg_color);
    color: var(--headers_color);
    font-weight: bold;
}

.mmf_table > tfoot {
    background-color: var(--tables_sub_header_bg_color);
    color: var(--headers_color);
    font-weight: bold;
}

.mmf_table_border {
    border: var(--tables_border_color);
    border-width: 1px;
    border-style: solid;
}

.mmf_table_cells_border > td, .mmf_table_cells_border > th{
    border: var(--tables_border_color);
    border-width: 1px;
    border-style: solid;
}

.mmf_table_stripes > tbody > tr:nth-child(even) {
    background-color: var(--tr_even_bg_color);
}

.mmf_table_stripes > tbody > tr:nth-child(odd) {
    background-color: var(--tr_odd_bg_color);
}

/* deprecated styles for old HtmlTable */
.tableHead {
    min-height: 1.8rem;
    background-color: var(--headers_bg_color);
    color: var(--headers_color);
}

.tableHead td {
    font-size: 1.5rem;
}

.tableEven {
    background-color: var(--tr_even_bg_color);
}
    
.tableOdd {
    background-color: var(--tr_odd_bg_color);
}

.tableBlank {
    border: none;
    background-color: transparent;
}

.tableTien {
    width: 100%;
    border: var(--tables_border_color);
    border-width: 1px;
    border-style: solid;
    margin: .5rem 0 .5rem 0;
}

.tableNeTien {
    width: 100%;
    margin: .5rem 0 .5rem 0;
}
/* deprecated end */

.tableSubHead {
    background-color: var(--tables_sub_header_bg_color);
    color: var(--text_main_color);
    font-weight: bold;
}

.tableSubHead td {
    font-size: 1.2rem;
}

/* jquery.balloon.js treba najprv nastavit css: null, classname: balloon */
.balloon {
    font-size: 1.5rem;
    padding: .2rem .5rem;
    border: 1px solid var(--inputs_border_color);
    border-radius: 3px;
    box-shadow: 2px 2px 4px var(--inputs_focused_outline_color);
    color: var(--inputs_color);
    background-color: var(--inputs_bg_color);
    opacity: 0.98;
    z-index: 32767;
    text-align: left;
}

/*  pouzitie napr. class="tableHead inactive" */
.inactive {
    color: var(--inactive_color);
    opacity: 0.6;
}

/* ----- FORMULARE ----- */

fieldset {
    border-color: var(--main_borders_color);
    border-width: .2rem;
    border-style: solid;
    padding: .5rem .5rem 2rem .5rem;
    margin: 0 0 .5rem 0;
/*    border-radius: .5rem;*/
}

legend {
    color: var(--headers_color);
    padding: 1rem;
}

legend img {
    vertical-align: middle;
    /* margin-right: 1rem; toto zmensovalo obrazok */
}

legend span { /* svg obrazky zabalene v span elemente budu mat odsadenie od textu v legende */
    margin-right: 1rem !important;
}

input[type=radio] {
    padding: 0;
    margin: .4rem;
    background-color: transparent;
    border-width: 0;
}

/* vytvorim vlastne spravanie a dizajn checkboxu */
input[type=checkbox] {
    padding: 0;
    margin: 0;
    cursor: pointer;
    border: none;
    width: 2rem;
    height: 2rem;
    appearance: none; /* potlacim spravanie checkboxu z OS; lepsia podpora zacala byt az v roku 2020, pozri caniuse */
    -webkit-appearance: none;
    -moz-appearance: none;
    background: url('../img/svg.php?file=checkbox_unchecked.svg') no-repeat center center;
    background-size: 100%;
}
input[type=checkbox]:checked {
    background: url('../img/svg.php?file=checkbox_checked.svg') no-repeat center center;
    background-size: 100%;
}
input[type="checkbox"]:focus {
    outline: 1px dotted var(--inputs_focused_outline_color);
}
input[type="checkbox"]:invalid {
    background: url('../img/svg.php?file=checkbox_invalid.svg') no-repeat center center;
    background-size: 100%;
}
input[type="checkbox"]:disabled {
    opacity: 0.4;
}

input[type=submit], input[type=reset] {
    cursor: pointer;
    padding: .4rem;
    border-width: .2rem;
    border-radius: .4rem;
    font-weight: bold;
    background-color: var(--inputs_bg_color);
}

input {
    font-size: 1.3rem;
    min-height: 1.95rem;
    display: inline-block;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    background-color: var(--inputs_bg_color);
    color: var(--inputs_color);
    margin: .5rem .4rem .4rem 0;
    vertical-align: middle;
    border: solid var(--inputs_border_color) 1px;
    padding: .2rem .2rem .4rem .2rem;
}

/* :valid :invalid :required :optional :focus su pseudotriedy "Selectors Level 4" a su v drafte, podporovane od IE10 */
/* farebny pasik dosahujem dvomi metodami - pomocou background-image a box-shadow pre istotu */
input:not([type='checkbox']):required:not(:focus):invalid,
textarea:required:not(:focus):invalid,
select:required:invalid,
.input_invalid { 
    box-shadow: inset -0.25rem 0 0 0 var(--highlights_color);
}

/* selector s viacerymi moznostami vyberu by dostal vysku bezneho selectoru uvedeneho nizsie */
select[multiple] {
    height: auto; /* da sa menit pomocou size="" */
}

input:not([type='checkbox']):focus:invalid, textarea:focus:invalid {
    box-shadow: inset -0.3rem 0 0 0 #ff8000;
}

input[type="text"]:required:valid,
input[type="number"]:required:valid,
input[type="password"]:required:valid,
select:required:valid,
textarea:required:valid,
.input_valid {
    box-shadow: inset -0.25rem 0 0 0 var(--ok_color);
}

/* radio button je komplikovany, neriesim podfarbenie */
input[type="radio"],
input[type="radio"]:not(:focus){
    box-shadow: none;
}

textarea {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 1.3rem;
    background-color: var(--inputs_bg_color);
    color: var(--inputs_color);
    margin: .5rem .4rem .4rem 0;
    vertical-align: middle;
    border: solid var(--inputs_border_color) 1px;
    padding: .2rem;
    overflow: auto;
}

select  {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 1.3rem;
    height: 2.9rem;
    line-height: 2.9rem;
    background-color: var(--inputs_bg_color);
    color: var(--inputs_color);
    margin: .5rem .4rem .4rem 0;
    vertical-align: middle;
    border: solid var(--inputs_border_color) 1px;
}

/* ----- TRIEDY TEXTOVYCH POLI ----- */

/* sada informacii (div, fieldset) graficky jemne odlisena od pozadia */
.block {
    border: 1px solid var(--block_border_color);
    border-radius: .5rem;
    background-color: var(--block_bg_color);
    margin: 0 0 .5rem 0;
}

div.block {
    padding: 1rem 1rem 1rem 1rem;
    margin: 1rem 0 1rem 0;
}

.help {
    border: var(--main_borders_color);
    border-width: .2rem;
    background-color: var(--help_bg_color);
    border-style: solid;
    margin-top: 1rem;
    padding: .5rem;
    font-size: 90%;
}

/* label ma sirku 20rem a form note ma margin-left 21.4rem aby text zacinal nad input prvkom */
.form_note {
    display: block;
    margin: 1rem 0 0 21.4rem;
    vertical-align: middle;
    font-size: 1.1rem;
    font-style: italic;
}

.form_error {
    vertical-align: middle;
    font-size: 1.1rem;
    font-style: italic;
    color: var(--highlights_color);
}

.message, .warning, .ok {
    font-size: 1.5rem;
    line-height: 2; /* nasobok aktualnej velkosti pisma */
    color: var(--highlights_color);
}

.highlight {
    color: var(--highlights_color);
}

.highlight2 {
    color: var(--highlights2_color);
}

.warning {
    background:url(../img/svg.php?file=vykricnik.svg);
    background-size: 3rem 3rem;
    background-repeat: no-repeat;
    display: inline-block;
    padding-left: 3.5rem;
    min-height: 2.7rem;
}

.ok {
    background:url(../img/svg.php?file=ok.svg);
    background-size: 3rem 3rem;
    background-repeat: no-repeat;
    display: inline-block;
    padding-left: 3.5rem;
    min-height: 2.7rem;
    color: var(--ok_color);
}

.odsadenie {
    position: relative;
    left: 3rem;
}

/* niektore prvky napr vo formularoch potrebujem odsadit o sirku label + left margin input prvkov*/
.odsadenie2 {
    margin: .4rem 3rem .4rem 20.9rem;
}

.note {
    font-size: 1.2rem;
    font-style: italic;
}

/* jquery ui widget elements */
.ui-widget * {
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

/* jquery ui autocomplete item focus */
.ui-widget-content .ui-state-focus {
    border: 1px solid silver;
    background-color: #fdf5ce;
    font-weight: bold;
    color: black;
}

.ui-menu-item a:hover {
    background-color: transparent;
}

/* jquery ui datepicker - weekendy dam inou farbou */
.ui-datepicker-week-end, .ui-datepicker-week-end a.ui-state-default {
    color:gray;
}

.ui-datepicker-today > a {
    border-color: var(--main_borders_color) !important;
    background-color: var(--highlights_bg_color) !important;
}

/* napr. v skripte poziadavkaForm3 davam sviatkom triedu sviatky_class */
.ui-datepicker-calendar .sviatky_class span{
    color: var(--highlights_color);
}

/* velkost obrazka kalendara */
.ui-datepicker-trigger {
    width: 2.7rem;
    height: 2.7rem;
}

.ui-widget-shadow {
    -webkit-box-shadow: -0.2rem -0.2rem 0.2rem gray;
    box-shadow: -0.2rem -0.2rem 0.2rem gray;
}

.ui-tooltip {
    background-color: var(--menu_bg_color);
    background-image: none; /* niekedy tema jquery-ui pridava obrazok pozadia, ktory nechcem */
}

/* zarovnanie textu doprava, napr v bunkach tabuliek */
.aright {
    text-align: right;
}

/* zarovnanie textu do stredu, napr v bunkach tabuliek */
.acenter {
    text-align: center;
}

/* pouzivam v HtmlTable pre definovanie sirky stlpcov, display: none to neriesi */
.invisible {
    height: 0;
    padding: 0;
}

/* deprecated - používa sa iba v KEB */
.bg_sub {
    background-color: #a7c1cd;
}

.bg_sub_light {
    background-color: var(--highlights2_bg_color) !important;
}

.bg_highlight {
    background-color: var(--highlights_bg_color) !important;
}

/* SVG grafika*/
.svg_icon_xsmall {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: middle;
    margin: 0 .2rem 0 .2rem;
}

.svg_icon_small {
    display: inline-block;
    width: 2.5rem;
    height: 2.5rem;
    vertical-align: middle;
    margin: 0 .2rem 0 .2rem;
}

.svg_icon_middle {
    display: inline-block;
    width: 3rem;
    height: 3rem;
    vertical-align: middle;
    margin: 0 .2rem 0 .2rem;
}