/* ReSize = RS */
.css-d {
--opener-h3:162.5%;
}
.css-t {
--opener-h3:150%;
}



/*********predpisy z layoutu.css, ktere potrebuji a o kterých se předpokládá, ze přibudou do layoutu2.css**************/

/*
 Pro zvyseni prehlednosti navrhuji zavest promennou pro misto na obrazek, abychom pri premisteni fotky doprava nemuseli psat celou tu konstrukci.
 Take se tim bude moct z jednoho mista ovladat
 velikost mezery vedle obrazku
*/
.art {--img-space:calc(var(--art-img-w) + var(--spacing-075, .75rem)); }

.css-t .art-tags {padding:.75em 0;}


/*urceno k likvidaci pote co prg odstrani ze stranek*/
.list-art-menu {position:relative; overflow:hidden; margin:0 0 var(--spacing-1)} 
.list-art-menu li {float:left; display:block; margin:.4em 0 0 .8em; padding:0; font-size:100%}
.list-art-menu li:first-child {position:relative; z-index:2; margin:0 18px 0 0; text-transform:uppercase; font-weight:600; font-size:175%; line-height:1.2; font-family:var(--ff-h, 'Fira Sans')}
.list-art-menu li:first-child a {color:inherit}
.list-art-menu li:first-child a:hover {color:#1B3E7A} 
.list-art-menu li:first-child:after {display:none}
.list-art-menu a:hover {text-decoration:none; color:#E41F1F}
.list-art-menu li .ttn {text-transform:none}

.art-full .related-list {clear:both; margin:0 0 2em}
.related-list .list-art-menu {margin-left:0}


/*zkopirovane z odb.css, upravene barvy dle knihovny, uprava: .calendar-wrapper[style*="z-index"]:before {width:100%}*/
/*doresit dark, touch, ikonky*/
.calendar, .calendarmini {position:relative; float:left; margin:0 1em .875rem 0; font-size:87.5%; line-height:1.429} 
.calendarmini-act {z-index:5}
.timeline-box .calendar, .timeline-box .calendarmini {margin:0}
/*#datum, #datummini {position:relative; width:10em; padding:.5rem 1.5em .5rem 2.5em; border:1px solid var(--tgl-pri30,  #4C70B5); border-radius:.25rem; font-size:100%; line-height:inherit; text-decoration:none; color:var(--tgl-pri80, #122E5B); background:url('/u/icon/137/select.svg') no-repeat calc(100% - .5em) 50% / .875em .875em, var(--tgl-white, #FFF) url('/u/icon/137/date.svg') no-repeat .5em 50% / 1.5em 1.5em; box-sizing:border-box; -moz-appearance:none; -webkit-appearance:none; appearance:none}
.css-t #datum, .css-t #datummini {width:9em; padding-right:.5em; background-image:url('/u/icon/137/date.svg'); background-position:.5em 50%; background-size:1.5em 1.5em}
.dark #datum, .dark #datummini {background-image:url('/u/icon/cdf/date.svg')}*/

.calendar-wrapper input, .calendar input, .calendarmini input {position:relative; width:10em; padding:.5rem 1.5em .5rem 2.5em; border:1px solid var(--tgl-pri30,  #4C70B5); border-radius:.25rem; font-size:100%; line-height:inherit; text-decoration:none; color:var(--tgl-pri80, #122E5B); background:url('/u/icon/137/select.svg') no-repeat calc(100% - .5em) 50% / .875em .875em, var(--tgl-white, #FFF) url('/u/icon/137/date.svg') no-repeat .5em 50% / 1.5em 1.5em; box-sizing:border-box; -moz-appearance:none; -webkit-appearance:none; appearance:none}
.css-t .calendar-wrapper input, .css-t .calendar input, .css-t .calendarmini input {width:9em; padding-right:.5em; background-image:url('/u/icon/137/date.svg'); background-position:.5em 50%; background-size:1.5em 1.5em}
.dark .calendar-wrapper input, .dark .calendar input, .dark .calendarmini input {background-image:url('/u/icon/cdf/date.svg')}

.calendar-wrapper {display:block; font-family:inherit}
.calendar-wrapper[style*="z-index"] #datum, .calendarmini-act #datummini {z-index:2;}
.calendar-wrapper[style*="z-index"]:before, .calendarmini-act:before {content:''; position:absolute; top: calc(100% - 9px); left:0; z-index:3; width:100%; height:10px; border: solid var(--pri30, #4C70B5); border-width:0 1px; background:var(--tgl-white, #FFF); box-sizing:border-box}
.calendar-box {display:none; position:absolute; top:100%; left:0; z-index:1; width:20em; padding:1rem; border:1px solid var(--tgl-pri30, #D6DEEB); border-radius:var(--radius-m); overflow:visible; font-size:100%; color:var(--tgl-neutral90); background:var(--tgl-white, #FFF); box-shadow:0 0 .8em 0  var(--tgl-pri9-o10)}
.calendarmini-act .calendar-box {display:block}
.calendar-box ul, .calendar-box li {list-style:none; width:auto; margin:0; padding:0}
.calendar-months, .calendar-years {clear:both; overflow:hidden; width:100%; line-height:1.6em}
.calendar-prev, .calendar-next {float:right}
.calendar-prev a, .calendar-next a {display:block; width:1.5rem; height:1.5rem; margin:0 0 0 1em; border-radius:100%; background:var(--tgl-pri10, #D6DEEB) url('/u/icon/fff/arrow2-right.svg') no-repeat 70% 50% / 1rem 1rem}
.calendar-prev a:hover, .calendar-next a:hover {filter:none; background-color:#4C70B5}
.calendar-prev a {transform:rotate(180deg)}
.calendar-prev a img, .calendar-next a img {display:none}
.calendar-months li, .calendar-years li {text-align:left}
.calendar-years {background:none; color:inherit; font-weight:600}
.calendar-days {clear:both}
.calendar-days table {width:100%; border-collapse:collapse; table-layout:fixed; line-height:2.2em; background:none}
.calendar-days th {text-align:center; font-weight:400; font-size:100%; line-height:inherit}
.calendar-days td {text-align:center; vertical-align:middle; padding:0}
.calendar-days .calendar-weeks {border-bottom:none}
.calendar-days .calendar-bookmark {table-layout:auto; margin:1em 0 0}
.calendar-days a {display:block; width:2.2em; height:2.2em; margin:0 auto; padding:0; border:1px solid transparent; border-radius:100%; color:var(--tgl-pri80, #122E5B); background:none; text-decoration:none}
.calendar-days a:link:hover, .calendar-days a:visited:hover {border-color:var(--tgl-pri10, #D6DEEB); color:var(--txt-neutral90, #2B3135); background:var(--tgl-pri05, #EDF2F9);}
.calendar-days .calendar-overflow a {background:none}
.calendar-days .calendar-disabled a {color:#8C8C8C; cursor:default}
.calendar-selected a {background:#4C70B5 !important; color:#FFF !important}
.calendar-dayoff {font-weight:600}
.calendar-bookmark.calendar-bookmark a {width:auto; border:1px solid var(--tgl-pri10, #D6DEEB); border-radius:.25rem; font-weight:600; color:var(--tgl-pri80, #122E5B); background:var(--tgl-pri05, #EDF2F9); }
/* schovavacka roku */
.calendar-years, .calendar-years li {clear:none; display:inline; font-weight:600}
.calendar-years li {padding:0 .3em}
.calendar-years .calendar-next, .calendar-years .calendar-prev {display:none}
.calendar-months {display:inline; font-weight:600}
.calendar-months:after {content:''; display:block; clear:both; height:1em}
.calendar-months li {float:left; text-transform:capitalize}
.calendar-months .calendar-next, .calendar-months .calendar-prev {float:right}
/* schovavacka roku - END */


/*.art-archiv - prestylovano*/
.art-archiv {margin:0 0 22px}
.art-archiv h2 {margin:0 0 8px; color:var(--tgl-neutral60, #75868E); font-weight:600; font-size:162.5%; text-align:left}
.art-archiv .warning h2 {height:auto; line-height:1.25em}
.art-archiv .inputs {position: relative; float:left; margin-bottom:12px}
.art-archiv .inputs input, .art-archiv .inputs select {width:11em; /* margin-right:.75rem;*/ box-shadow:0 .25em .5em 0 var(--tgl-black-o10, #0000001a); border:1px solid var(--tgl-neutral10, #D3D7DA); color:var(--txt-neutral90, #2B3135); background:var(--tgl-pri05, #EDF2F9);}
.art-archiv .calendar-wrapper[style*="z-index"]  input#zedne {border-bottom-left-radius: 0; border-bottom-right-radius: 0;}

.art-archiv .bt {width:5em; height: 2.25em; margin:.86em 0 0 .2em; border: 0; border-radius: .2em; font-weight: 600; text-align: center; color: var(--tgl-white, #FFF); 
                 background-color:var(--tgl-pri60, #1B3E7A); /*background: var(--tgl-neutral20, #B2B9BE);*/}

.art-archiv label {display:block; font-size:68.75%}
.art-archiv label.calendar-wrapper {display:inline-block; margin-bottom:5px; font-size:100%}
.art-archiv .calendar-wrapper .calendar-box {font-size:81.25%}


/*
*****predpisy, ktere mozna budu potrebovat (nutno prebrat) ****

.divide-...

 .btn

 online, online podle misi

.taglist
.nav
.list-tit

 uploader
 instagram-box
 voice, captcha
 #inc
 .imagelist-instagram

 .opener-foto-info-box ?

 .flag

 .tabs-nav

 .catchbox 
 .fulltoc

*/


/*********** nove predpisy, o kterých se předpokládá, ze přibudou do layoutu2.css *********************/

.kolotoc {position:relative}
.kolotoc-prev, .kolotoc-next {position:absolute; top:0; bottom:0; cursor:pointer}
.kolotoc-prev {right:100%}
.kolotoc-next {left:100%}
.kolotoc-prev:before, .kolotoc-next:before {content:''; display:block; width:1.5rem; height:100%; background:url('/u/icon/000/arrow-right.svg') no-repeat 50% 50% / contain; filter:var(--filter-txt-pri80)}
.kolotoc-prev:before {transform:rotate(180deg)}

.kolotoc .box-in {overflow: hidden; position: relative;}
.kolotoc .box-in ul {display:flex; gap: .5rem; clear: both; min-height: 1em; list-style: none; overflow: hidden;}
.kolotoc .box-in li {flex:0 0 auto}

.css-t .kolotoc-prev, .css-t .kolotoc .kolotoc-next {display:none}
.css-t .kolotoc .box-in {margin-left: calc(-1 *  var(--spacing-15, 1.5rem)); margin-right: calc(-1 *  var(--spacing-15, 1.5rem)); padding-left: var(--spacing-15, 1.5rem); padding-right: var(--spacing-15, 1.5rem); overflow-x:scroll;}
.css-t .kolotoc ul { overflow:visible; scrollbar-width:thin; scroll-behavior:smooth;}




/********** prepisy layoutu2.css - je zadouci co nejvice je redukovat *************/

.cols-sph {width: 988px;}
.cols-sph .col-a {flex:0 0 608px}
.cols-sph .col-b {flex:0 0 348px; gap:1.5rem; border-left: 1px solid var(--pri30, #5370A0);}

.art h3 {margin-left:0; margin-right:-12px; padding-left:0; padding-right:12px}

/* --img-space viz vyse */
.art:not(.opener1) {min-height:calc(var(--art-img-h) + var(--spacing-15, 1.5rem));  
                    margin-bottom:var(--spacing-15, 1.5rem); 
                    padding: 0  var(--img-space) var(--spacing-15, 1.5rem) 0; 
                    border-bottom: 1px solid var(--tgl-pri10, #C9D2E1);}

/*cary s carou kvuli predpisu prebijejicimu touch */
.art.art.art {border-bottom: 1px solid var(--tgl-pri10, #C9D2E1);}
.art.art.art.opener2 {border:none;}

.art-videoplayer.art-videoplayer.art-videoplayer { padding-bottom: var(--spacing-15, 1.5rem)}

.art.art.art + .opener2 {padding-bottom:var(--spacing-15, 1.5rem); border-bottom: 1px solid var(--tgl-pri10, #C9D2E1);}

.art .art-img {left:auto; right:0; margin-right: 0;}

.arts-row .art.art.art {border:none}

/* opakovani predpisu, aby nebyly prebite styly pro ln */
.arts-row .art {padding: 0;}



.art.art.art.opener1 {border:none}

.opener1 {padding: 56.19% 0 0;/*padding: calc(var(--spacing-05) + 56.19%) 0 0;*/ }
.opener1 h4 {margin-top:var(--spacing-05);}
.opener1 .art-link.art-link {padding-top:var(--spacing-05)}
.opener1 h4 + .art-link.art-link {padding-top:0}
.opener1 .art-img {position:absolute}

/*misto definovani min-height zmenit promennou art-img-h ?*/
.css-d .opener2 {--art-img-h: 234px; padding-right: 428px ;}

.css-t .opener2 {padding-right: 0; padding-top: calc(var(--spacing-05) + 56.19%);}
.css-t .opener2 .art-img {position:absolute}

/*prepis*/
.art h4 a {color: var(--txt-pri80, #122E5B);}
.group-infinity .art h4 {text-transform:uppercase}

/*hodilo by se v idn4 stylech prepsat selector .art img na .art .art-img img, aby se predpisy nepropisovaly do authorbox fota */
.art .authorbox-foto img {position:static}

.artsum .art-info .brisk {color: var(--tgl-neutral90)}

.r-art .r-head {left:auto; right:0}



/************ nove predpisy pro lidovky ******************************/

.art-authors {display:flex; align-items: center; gap: .25rem; margin: var(--spacing-025, .875rem) 0 0; text-align:left}
.art-authors .name {display: block; font-size:.75rem}
.art-authors .name strong {font-weight:400}
.art-authors .description {display:block; font-size:10px}

.art .authorbox-foto {float:left; width:2rem; height:2rem; border-width:.125rem; margin: 0; filter: grayscale(100%);}
.art .authorbox-foto + .authorbox-foto { z-index: 1; margin-left: -.5em;}

/*.opener1 .art-authors .name {font-size:.75rem}
.opener2 .art-authors .name {font-size:.75rem}*/

.cols-sph .nejnej-out  {border:solid transparent; border-width:0 var(--spacing-15, 1.5rem);}
/*.cols-sph .nejnej-out:before {content:""; position:absolute; left:calc(-1 * var(--spacing-15, 1.5rem)); top:0; bottom:0; border-left: 1px solid var(--pri30, #5370A0);}*/
.section-sph .nejnej-out {padding:var(--spacing-15, 1.5rem); border-top: 1px solid var(--pri30, #5370A0);}

.kolotoc .video-art {width:154px}
.kolotoc .video-art h3 {font-size:.875rem}

.authortoc ul {display: flex; gap:1rem; align-items:flex-end}
.authortoc a:hover {text-decoration:none}
.authortoc .authorsnip {display:flex; width:186px; align-items: flex-end; font-size:var(--rs-h8);}
.authortoc img {filter: grayscale(1);}

/*na zviditelneni stinu u obrazku*/
.authortoc  .box-in {margin-top:calc(-1 * var(--spacing-15)); margin-bottom:calc(-1 * var(--spacing-15))}
.authortoc ul {padding-top:var(--spacing-15); padding-bottom:var(--spacing-15)}

.authorsnip {display:flex; gap:.5rem}
.authorsnip .authorbox-foto {flex:0 0 auto; width:4.6em; height:auto; aspect-ratio:1; margin:0; border-width: 2px;}
.authorsnip .name {display: block; font-size:var(--rs-h8, .875rem); font-weight:600; } 
.authorsnip .description {display:block; font-size:.75rem; color:var(--txt-neutral90)}

.group-line {padding-top: var(--spacing-15, 1.5rem); padding-bottom: var(--spacing-15, 1.5rem); border:solid var(--tgl-pri30); border-width:1px 0}
.group-botline {border-bottom:1px solid var(--tgl-pri30, #5370A0)}
.group-neviditelnypes {padding-top: var(--spacing-15, 1.5rem); border:solid var(--tgl-qua60, #008A27); border-width:1px 0}
.group-neviditelnypes .group-tit {}
.group-neviditelnypes .group-tit:after { content: ''; display: inline-block; width: 60px; height: 34px; margin-left: var(--spacing-075); vertical-align: text-bottom; background: url(//1gr.cz/o/pes/neviditelnypes-trbg.png) no-repeat; background-size: contain;
}

.group-nazory {padding: var(--spacing-15, 1.5rem); padding-bottom:0; border-radius:var(--radius-m, 0.2500rem); background:linear-gradient(180deg, var(--tgl-white), transparent)}
.group-nazory .art-img {filter:grayscale(100%)}

.group-kvizy {padding-bottom: 2.5rem; border-bottom:1px solid var(--tgl-pri30)}
.group-kvizy .art h4 {display:none}

.group-neviditelnypes .person-foto {display: inline-block; vertical-align: text-bottom;width:1.125rem; height:1.125rem; margin-right:.25rem; border:none; box-shadow:none}
.group-neviditelnypes .related {padding-bottom: var(--spacing-15, 1.5rem); overflow:auto}

.css-t .group-neviditelnypes .related {margin: 0 calc(-1* var(--spacing-15, 1.5rem)) var(--rs-3-2); padding: 0 var(--spacing-15, 1.5rem)  var(--spacing-15, 1.5rem);}

.group-neviditelnypes .related ul {display:flex; gap:2rem;}
.group-neviditelnypes .related li {/*flex:1 0 0px;*/ flex:1 0 197px}
.group-neviditelnypes .related li:before {filter: var(--filter-tgl-qua60);}
.group-neviditelnypes .related .name {font-weight:400}

.lnarchiv-box {position:relative;display:flex;flex-direction:row-reverse; justify-content: center; align-items:center;  height:102px; margin:0 auto; /*padding-right:170px; */box-sizing:border-box; border-radius: var(--radius-M-0, 4px); background: linear-gradient(180deg, var(--tgl-pri10-o30) -3.12%, var(--tgl-pri10-o90) 100%);}
.lnarchiv-box:before {content:""; display:block;  width:198px; height:100%; background:url(/o/lidovky/noviny.png) no-repeat center;}
.lnarchiv-box hgroup {padding-left:10px}
.lnarchiv-box h4 {text-transform:uppercase; color: var(--tgl-pri60, #1C4382);font-size: var(--rs-h5, 20px);font-weight: 600;line-height: 110%;}
.lnarchiv-box h5 {text-transform:uppercase; color: var(--tgl-pri60, #1C4382);font-size: var(--rs-h8, 14px);font-weight: 600;line-height: 110%;}
.lnarchiv-box h5:after {content:""; display:inline-block; width:.75em; height:.75em; margin-left:2px; background:url(/u/icon/000/arrow2-right.svg) no-repeat; background-size:contain; filter:var(--filter-tgl-pri60)}

.css-d .lnarchiv-box {width: 300px;}
.css-t .lnarchiv-box { margin:0 auto var(--spacing-15, 24px); margin-left: calc(-1* var(--spacing-15, 1.5rem)); margin-right: calc(-1* var(--spacing-15, 1.5rem)); border-radius:0}


/*doufejme ze docasne a casem zmizi*/
.search {clear:both; padding:20px 0px}
.search form {display:block; position:relative}
.search .keywords, .search .btn {font-size:112.5%}
.search .keywords {width:100%; height:3em; padding:0 12em 0 3em; border:1px solid var(--tgl-pri10, #C9D2E1); border-radius:var(--radius-s);  color:var(--tgl-neutral90, #212121); box-shadow:inset 0 2px 4px var(--black-o10); background:var(--tgl-white, #FFF) url('/u/icon/777/search.svg') no-repeat .8em 50% / 1.5em 1.5em}
.dark .search .keywords {background-image:url('/u/icon/bbb/search.svg')}
.search .keywords::placeholder {color:var(--tgl-neutral60, #757575);}
.search .keywords:focus {border-color:var(--tgl-pri30, #4C70B5); box-shadow:none; background-color:var(--tgl-white, #FFF); background-image:url('/u/icon/148/search.svg')}
.dark .search .keywords:focus {background-image:url('/u/icon/cde/search.svg')}
.search .btn {position:absolute; top:0; right:0; width:6em; height:2.6em; margin:.2em; border:0; border-radius:var(--radius-s); font-weight:600; text-align:center; color: #FFF; background:var(--tgl-pri60b, #1C4382)}
.search .keywords:focus ~ .btn {background-color:var(--tgl-pri80b, #0f306a)}
.search .btn.btn:hover {background-color:var(--tgl-pri80b, #0f306a)}
.search #words {left:54px}
.searchpage .res-count {display: block; margin: 1rem 0 2rem;}


/****piano****/
.piano {clear:both; margin:0 }
.piano-tit { margin: 0 0 var(--spacing-1); font-size: var(--rs-h3); line-height: 1.2; font-family: var(--ff-h, var(--ff-h, 'Fira Sans')); text-transform: uppercase; letter-spacing: 0; }

.piano .arts-row > * {flex: 1 0 0px;}
.css-t .piano .arts-row .art:nth-child(n+3), .css-t .group-sph-premium .arts-row .art:nth-child(n+3){display:none}
/*.css-t .piano .arts-row h3 {font-size:.875rem}*/

.piano .art h4, .piano .art-authors {display:none; }
.piano .art-img .brisk { color: #fff; background: #000;}
/*.piano .r-head {position: absolute;  top: -14px;}*/

/*reklama.css prepis*/
#hyper300 {background: none;}

#selfart .r-body {padding: 0 229px 0 0;}
#selfart h3 img {left:auto; right:0}
