/** color constant **/
@basicBg:      @bila;           //Hlavni barva pozadi ( casto bila ) ------ bila
@mainColor:    @zelena;         //Hlavni barva webu ( nejedna se o pozadi ) ------ zelena
@secondColor:  @svetleSeda;     //Druha barva webu ( nejedna se o pozadi ) predpoklad tmavsi barvy - pouzivana na border, buttony atd. ------ svetlejsi modra
@inverseColor: @bila;         //Inverzni barva k jedne z hlavnich barev, pro viditelne barvy pisma na pozadi ------ bila

@zelena:       #007C31;
@bila:         #ffffff;
@cerna:        #222222;
@seda:         #aaaaaa;
@svetleSeda:   #E3E3E3;
@nasedla:      #F8F8F8;
@tmaveSeda:    #333333;


// Barvy pozadi layoutu
@header:       @basicBg; 
@mainMenu:     @basicBg;
@container:    @basicBg;
@content:      @basicBg;
@footer:       @basicBg;

// Barvy obsahové části
@fontColor:    @cerna;
@linkColor:    @secondColor;

@formBg:       @basicBg;                 // barva pozadi inputu
@iconColor:    @secondColor;             // barva icon
@tableBg:      @basicBg;                 // barva pozadi tabulky 
@tableBgTop1:  darken(@basicBg, 10%);    // barva hlavicky a buttonu tabulky 
@tableBgTop2:  lighten(@basicBg, 0%);    // barva  hlavicky a buttonu tabulky svetla


/** size constant **/
@sizeRow:         1060px;
@sizeRowPercent:  100%;
@lineHeight:      24px;
@fontSize:        14px;
@marginBottom:    10px;


/** general class **/
.flex { display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:space-evenly; align-items:center; align-content:space-around; }


.radius (@radius:0px) { border-radius:@radius; -webkit-border-radius:@radius; -moz-border-radius:@radius; } // obecny radius
.radiusTopLeft (@radius:0px) { -webkit-border-top-left-radius:@radius; -moz-border-radius-topleft:@radius; border-top-left-radius:@radius; } // obecny jednoho rohu radius
.radiusTopRight (@radius:0px) { -webkit-border-top-right-radius:@radius; -moz-border-radius-topright:@radius; border-top-right-radius:@radius; } // obecny jednoho rohu radius
.radiusBottomLeft (@radius:0px) { -webkit-border-bottom-left-radius:@radius; -moz-border-radius-bottomleft:@radius; border-bottom-left-radius:@radius; } // obecny jednoho rohu radius
.radiusBottomRight (@radius:0px) { -webkit-border-bottom-right-radius:@radius; -moz-border-radius-bottomright:@radius; border-bottom-right-radius:@radius; } // obecny jednoho rohu radius

.border (@border:1px) { border:solid @border @borderColor; }
.borderLeft (@border:1px) { border-left:solid @border @borderColor; }
.borderRight (@border:1px) { border-right:solid @border @borderColor; }
.borderTop (@border:1px) { border-top:solid @border @borderColor; }
.borderBottom (@border:1px) { border-bottom:solid @border @borderColor; }
.borderButton (@border:1px) { border-left:solid @border lighten(@borderColor, 10%); border-top:solid @border lighten(@borderColor, 10%); border-right:solid @border darken(@borderColor, 10%); border-bottom:solid @border darken(@borderColor, 10%); }
.borderButtonHover (@border:1px) { border:solid @border @borderColor; }

.layoutRow { margin:0 auto; }
.genPadding { padding:5px; } // obecny padding
.genPaddingSide { padding:5px 10px; } // obecny padding bocni
.formRadius { .radius(0px) } // nastaveni radiusu pro button, input, textarea, select prvky formulare
.iconRadius { .radius(5px) } // nastaveni radiusu icony s pozadim
.iconShadow { text-shadow:1px 1px 1px darken(@iconColor, 30%); }


/* form */
select,
textarea,
input { .formRadius; display:block; }
input[type=submit],
button,
.button { background:@zelena; color:@bila; }
button:hover,
.button:hover {  }
.ui-state-default,
.ui-widget-content
.ui-state-default,
.ui-widget-header
.ui-state-default {  }
.inputHiddenBlock.ui-buttonset .ui-button { float:left; }

/* icon */
.icon { color:@zelena; font-size:@fontSize * 1.3; line-height:@lineHeight; }
.button .icon,
.icon.icoBg { padding:0 4px; background:transparent; color:@bila; }
a .icon { }
a:hover .icon { color:lighten(@zelena, 15%); }
a .icon.icoBg { }
button:hover .icon,
.button:hover .icon,
a:hover .icon.icoBg { background:transparent; color:@bila; }


/* table */
table { background:@tableBg; border:1px solid @zelena; .radius(); }
table thead th { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, @tableBgTop1), color-stop(1, @tableBgTop2) ); background:-moz-linear-gradient( center top, @tableBgTop1 5%, @tableBgTop2 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='@tableBgTop1', endColorstr='@tableBgTop2'); background-color:@tableBgTop1; color:@fontColor; font-weight:bold; border-left:1px solid @secondColor; }
table tbody td { color:@fontColor; border-left:1px solid @secondColor;  }
table tbody tr:nth-child(odd) { background:darken(@tableBg, 10%); } 
table tfoot td { border-top:1px solid @secondColor; background:lighten(@tableBgTop1, 30%); }
table tfoot li a { color:@fontColor; border:1px solid @secondColor; .radius(); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, @tableBgTop1), color-stop(1, @tableBgTop2) ); background:-moz-linear-gradient( center top, @tableBgTop1 5%, @tableBgTop2 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='@tableBgTop1', endColorstr='@tableBgTop2'); background-color:@tableBgTop1; }
table tfoot ul a.active,
table tfoot ul a:hover { border-color:@secondColor; }


/* JS - popup */
.tooltip { border:1px solid lighten(@secondColor, 20%); color:@bila; font-size:@fontSize; background:@zelena; -webkit-box-shadow:3px 3px 5px 3px @secondColor; box-shadow:3px 3px 5px 3px @secondColor; }


/* typography */
body * { font-family:Tahoma,Arial,"Trebuchet MS","Geneva CE",lucida,sans-serif; font-family:'Titillium Web', sans-serif; font-size:@fontSize; line-height:@lineHeight; }
h1 { font-size:@fontSize * 2.5; line-height:@lineHeight * 2.5; margin-bottom:@marginBottom * 1.5; }
h2 { font-size:@fontSize * 2.0; line-height:@lineHeight * 2.0; margin-bottom:@marginBottom * 1.4; }
h3 { font-size:@fontSize * 1.8; line-height:@lineHeight * 1.8; margin-bottom:@marginBottom * 1.3; }
h4 { font-size:@fontSize * 1.6; line-height:@lineHeight * 1.6; margin-bottom:@marginBottom * 1.2; }
h5 { font-size:@fontSize * 1.4; line-height:@lineHeight * 1.4; margin-bottom:@marginBottom * 1.1; }
h6 { font-size:@fontSize * 1.2; line-height:@lineHeight * 1.2; margin-bottom:@marginBottom * 1.0; }
p { margin-bottom:@marginBottom; }
ul, ol { margin:0 0 @marginBottom 10px; padding-left:10px; }
dl { .genPadding; border:@secondColor dashed 1px; }
blockquote { border-left:10px solid darken(@secondColor, 20%); }
blockquote:before { color:darken(@secondColor, 20%); font-size:@fontSize * 4; line-height:@lineHeight; }
a { color:@zelena; }
a span { color:@zelena; }


/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/** body **/
#body {  }
#header,
#container,
#footer { .flex; width:auto; margin:0 auto; background:transparent; }


/** header **/
#header { width:100%; justify-content:space-between; }
#header #headerContent { width:auto; margin:0; padding:0; }
#header h1 { margin:0; padding:10px 15px; }
#header h1 a {}
#header h1 a span { color:@inverseColor; padding:8px 0 0 20px; font-size:12px; font-weight:normal; text-transform:uppercase; }


/** menuBar **/
#menuBar { background:transparent; width:auto; margin:0; padding:0; }
#menuBar #mainMenu { margin:0 auto; padding:0; }
#menuBar #mainMenu li { margin:0; padding:0 1px; background:transparent; }
#menuBar #mainMenu li:hover,
#menuBar #mainMenu li.menuItemActiv { background:transparent; }
#menuBar #mainMenu li a { padding:7px 15px; color:@zelena; border-left:none; font-size:16px; border-bottom:@zelena solid 1px; background:@bila; }
#menuBar #mainMenu li a:hover,
#menuBar #mainMenu li.menuItemActiv a { color:@cerna; border-bottom:@cerna solid 1px; }
#menuBar #mainMenu li a.closeX,
#menuBar #mainMenu li a.closeTab { display:none; }


/** container **/
#container { background:@container; padding:10px; border-bottom:none; align-items:flex-start; min-height:calc(~"100vh - 169px"); }


/** sidebar **/
#sidebar { background:transparent; max-width:345px; width:auto; float:none; padding:0; }
#sidebar .searchInputBlock { .flex; align-items:flex-start; }
#sidebar .searchInputBlock .inputForm.searchInput { flex:1 1 100px; }
#sidebar .searchInputBlock .button.searchButtonDiv { flex:0 0 32px; }
#sidebar .searchInputBlock .inputForm.searchInput .icon,
#sidebar .searchInputBlock .inputForm.searchInput .icon:hover { background:transparent; }
#sidebar .titleRadio { display:block; padding:10px 0 0 0; font-size:12px; font-weight:bold; width:100%; overflow:hidden; }
#sidebar .titleRadio .icon { position:relative; top:0; left:0; display:block; width:25px; float:left; }
#sidebar .titleRadio span { display:block; width:calc(~"100% - 25px"); float:left; }
#sidebar #searchedListPosition { padding:1px; margin:0; flex-direction:column; }
#sidebar #searchedListPosition span { width:100%; margin:0; padding:0; .flex; flex:1 1 auto; justify-content:flex-start; }
#sidebar #searchedListPosition span .icon { flex:0 0 20px; }
#sidebar #searchedListPosition strong { width:100%; margin:0; padding:0; font-weight:normal; padding-left:20px; overflow:visible; }
#sidebar #searchedListPosition strong:before { }
#sidebar #searchAdvancedBlock1 { padding:5px; background:@svetleSeda; }


/** content **/
#content { background:@content; }
#content h1 { padding:0; font-family:'Roboto', sans-serif; font-weight:normal; padding-right:30px; }
.contentArticle .navigatorLine:nth-child(odd) { background:darken(@content, 3%); }
#print2pdf { display:none; }
.button.searchButtonDiv .icon { left:5%; }
.searchNavig { background:@seda;  }
#content .contentArticle .itemRow.typeRecord .tabularValue { font-size:120%; font-weight:bold; }
.contentBlock { position:relative; }
#permalinkUrlDetail { top:55px; }


#homepage { width:100%; .flex; flex-wrap:wrap; align-items:stretch; align-content:center; }
#homepage h2 { width:100%; line-height:28px; font-size:20px; text-align:center; }
#homepage .oblibenyBlock { width:100%; .flex; flex-wrap:wrap; align-items:stretch; gap:5px; }
#homepage .homepageli { .flex; flex:1 1 200px; background:@zelena; align-items:stretch; align-content:center; margin:0; width:auto; overflow:visible; float:none; }
#homepage .homepageli .permaLabelLink,
#homepage .homepageli .infoUrl { background:@zelena; text-align:center; text-decoration:none; padding:16px 5px; line-height:17px; height:auto; color:@bila; }
#homepage .homepageli .permaLabelLink { width:100%; }
#homepage .homepageli .infoUrl { width:30px; }
#homepage .homepageli .permaLabelLink .permaLabel,
#homepage .homepageli .infoUrl .icon { color:@bila; font-size:16px; line-height:18px; }
#homepage .homepageli .infoUrl .icon {  }
#homepage .homepageli .permaLabelLink:hover,
#homepage .homepageli .infoUrl:hover { background:@cerna; }


#content .aktualne { padding:30px 10px; width:auto; overflow:hidden; clear:both; }
#content .aktualne .logoRight { float:right; }
#content .aktualne h1 { margin:0; padding-bottom:0px; margin-top:10px; }
#content .aktualne h2 { font-size:18px; line-height:30px; font-weight:normal; padding-bottom:0px; margin-bottom:0px; }
#content .aktualne h3 { font-size:16px; line-height:30px; font-weight:normal; padding-bottom:0px; margin-bottom:0px; }
#content .aktualne h4 { font-size:16px; line-height:30px; font-weight:normal; padding-bottom:0px; margin-bottom:0px; }
#content .aktualne h5 { font-size:16px; line-height:30px; font-weight:normal; padding-bottom:0px; margin-bottom:0px; }
.descriptionText { text-decoration:none; text-align:justify; padding:5px 10px; margin-left:14px; background:@seda; font-weight:normal; font-size:11px; }

.searchNavig { background:@seda; }
.searchNavig .navigatorLine.treeComponent * { color:@bila; }
#content .contentArticle h1 { padding:5px; text-transform:uppercase; font-weight:bold; }


/** footer **/
#footer { padding:0; border-top:none; background:@tmaveSeda; .flex; }
#footer * { color:@inverseColor; }
#footer #copyrightBlock,
#footer #footerNewsBlock { .flex; padding:10px 20px; margin:0; }
#footer #copyrightBlock { order:1; }
#footer #footerNewsBlock { order:2; }
#footer #footerNewsBlock p { padding:0; margin:0; }
#footer #copyrightBlock { }
#footer #copyrightBlock .eu-logo { float:right; }

.logaEU { margin:0 auto; display:block; }

/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------- 2018 - 01 - 07 --------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
.button.searchButtonDiv { width:30px; }
searchButtonDiv:hover { background:@seda; }



/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/* > 768px & < 1024px ----------- */
@media (min-width:768px) and (max-width:1024px) {
}

/* < 768px ----------- */
@media (max-width:768px) {
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width:320px) and (max-device-width:480px) {
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width:321px) {
} 

/* Smartphones (portrait) ----------- */
@media only screen and (max-width:320px) {
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width:768px) and (max-device-width:1024px) {
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:landscape) {
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait) {
}

/* Desktops and laptops ----------- */
@media only screen and (min-width:1224px) {
}

/* Large screens ----------- */
@media only screen and (min-width:1824px) {
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio:1.5),
only screen and (min-device-pixel-ratio:1.5) {
}