/* CSS Document */

/* variables */
:root {
  --lines: #51C4B4;
  --lines_2: #444444;
  --link: #93BFDE;
  --linkHover: #d2e9f8;
  --h1: #BBEEEE;
  --h2: #94C1C1;
  --titles: #3D9387;
  --text: #eeeeee;
  --note: #A8A8A8;
  --bg-colorDark: #041215;
  --bg-button:#11232D; 
  --bg-button-hover:#18313F; 
  --bg-button-active:#214457; 
  --today: #5db25d;
  --yesterday: #778877;
}



/* elements */
html {scrollbar-gutter: stable;}
body {margin:0; color:#eee; font-family:Roboto,verdana; 
      background:#000 url('https://www.livingfuture.cz/img/bg_galaxy_small.webp'); background-size:cover; background-position: center center; background-attachment: fixed; user-select:auto;
      caret-color: transparent; overflow-x: hidden;}
/* body.stellar {background:url('https://www.livingfuture.cz/img/bg_galaxy_small.webp'); background-size:cover;} */
.mainContainer {max-width: 1300px;  margin: 0 auto;}

a {color:var(--link); text-decoration:none;}
  a:hover {color:var(--linkHover);}
  .abutton {display:inline-block; margin:5px 10px 0 0; padding:3px 8px; border:1px solid #999; border-radius:3px; background:#333;}

img {border:0;} 

h1 {margin:15px 0 5px 0; font-size:140%; color:var(--h1);}
  h1 .small {font-size:50%; color:#3ea699; font-weight:100;}
  h1.index {color:var(--lines); font-size:70%; font-weight:100;}

h2, #main h5 {margin:10px 0 0 0; padding:0; color:var(--h2); font-size:110%; font-family:verdana;}
  .chapterTitle {margin:8px 0 4px 0; padding-top:4px; border-top:1px solid var(--lines); color:var(--titles); font-size:70%;}
    .chapterTitle.white {border-top:1px dashed #6f6f6f; color:#cecece;}  
  #right .chapterTitle {padding-left:15px; text-align:left;}
  #right .chapterTitle:first-child {margin-top:0px !important; border:0;}
  h2.chapterTitle {font-weight:lighter;}

h3 {margin:0; color:var(--h1);}
  h3.light {font-weight:100;} 
h4 {font-size:120%; margin:30px 0 0 0; padding:0;}

table {border-spacing:0;}
td, th {padding:0;}

input, select {background: var(--bg-colorDark);
    border: 1px solid var(--link);
    border-radius: 4px;
    color: var(--text);
    padding: 8px 16px;
    font-size: 14px;}

.perex {font-weight:bold;}
pre {overflow:hidden; margin:0; padding:0; font-family:arial, "Times New Roman", Times, serif; white-space: pre; white-space: -moz-pre-wrap; white-space: -hp-pre-wrap; white-space: -o-pre-wrap; white-space: -pre-wrap; white-space: pre-wrap; white-space: pre-line; word-wrap: break-word;}
    pre .inside_img {width:100%; margin:5px 10px 10px 0; font-size:90%; font-family:verdana; font-style:italic; color:#aaa;}
    pre .video {text-align:center;}
    pre h3 {margin-top:10px; margin-bottom:-10px; color:#637b7b}
    pre h5 {margin-bottom:-10px !important; font-family:arial !important;}
    pre ul, pre ol {margin:0; padding:0 0 0 17px;}
      pre ul li, pre ol li {margin-bottom:-10px; font-size:80%; list-style-image:url('https://www.livingfuture.cz/img/ico/list.png');}
    pre table, .tableStar, .starlist {width:100%; margin-top:10px; font-size:80%;}       
      pre table td {padding:5px 5px 5px 0; border-bottom:1px solid #274844; vertical-align:top;}  
      pre table th, .tableStar th, .starlist th {vertical-align:bottom; color:#8a8a8a;}  
      pre table th span, .tableStar th span, .starlist th span {font-weight:lighter; font-size:80%;}  

.button-row { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 24px;}







/* primary classes */

.today {color:var(--today);}
.yesterday {color:var(--yesterday);}

  .source {font-style:italic; text-align:right;}
  .info {width:660px; font-size:80%; color:#666;}
  .popis {font-family:arial; font-size:70%; letter-spacing:0.1px; word-spacing:0.3px; text-align:left;}
  .done {color:#154416; font-size:90%;}
  .error {color:#531111; font-size:90%;}

  .noteBig {color:var(--note); font-size:90%;} 
  .note {color:var(--note); font-size:80%;} 
    .note span {font-size:80%; color:var(--note);} 

.sectionTitle {position:absolute; display:block; width:498px; margin:72px 0 0 611px; line-height:18px; font-size:150%; font-weight:bold; color:#3ea699;}
  .sectionTitle span {font-size:40%; font-weight:lighter; color:#2F796F;}

.share {color:#555; font-family:arial; font-size:90%;}
.lowerIndex {font-size:60%; opacity:0.8;}
.button-twitter {padding:3px 15px; border-radius:10px; background:var(--bg-button); font-size:80%;}

.mobile {display:none;}

.social {background:#121c34; text-align:center;}

.starSource {margin-bottom:10px; display:flex;}
  .starSource .icon {width:12px; height:12px; margin:4px 5px 0 0;}

.tags {display:inline-block; float:left; margin-right:30px; color:var(--note); font-size:80%; font-weight:bold;}  
  .tags a {margin-right:10px;}                                                                                    
.date {display:inline-block; margin-bottom:16px; color:var(--note); font-size:80%;}  
  .date .icon {width:10px; height:10px; margin-right:5px;} 

.moreNews {display:block; margin-top:10px; padding:0 0 0 20px; background:url('https://www.livingfuture.cz/img/ico/arrowRight_hover.png') no-repeat; color:#328a80; font-family:verdana; font-size:80%;}
  .moreNews:hover {background:url('https://www.livingfuture.cz/img/ico/arrowRight.png') no-repeat; color:#51b9ad;}
.moreLink {display:inline-block; margin-left:20px; padding:5px 20px 5px 10px; background:url('img/ico_moreLink.webp') right center no-repeat; background-size:12px; font-size:80%; color:var(--link);}
  .moreLink:hover {color:var(--linkHover);}
.moreLink2 {display:inline-block; margin-left:0px; padding:5px 10px 5px 20px; background:url('https://www.livingfuture.cz/img/ico_moreLink2.png') left center no-repeat; background-size:12px; font-size:80%;}
/*
.about {margin-left:10px; padding-left:18px; background:url('https://www.livingfuture.cz/img/ico/about.png') no-repeat left 3px;}
  .about:hover {background:url('https://www.livingfuture.cz/img/ico/about_hover.png') no-repeat left 3px;}
.dopis {margin-left:10px; padding-left:18px; background:url('https://www.livingfuture.cz/img/ico/dopis.png') no-repeat left 3px;}
  .dopis:hover {background:url('https://www.livingfuture.cz/img/ico/dopis_hover.png') no-repeat left 3px;}
.mobil {display:block; float:right !important; margin-right:10px; padding-left:18px; background:url('https://www.livingfuture.cz/img/ico/mobil.png') no-repeat left 3px;}
  .mobil:hover {background:url('https://www.livingfuture.cz/img/ico/mobil_hover.png') no-repeat left 3px;}     */

/* button */
.buttonFinal {display:inline-flex; margin:10px 0 5px 0; padding:5px 20px; border:1px solid var(--link); border-radius:5px; background:var(--bg-button); align-items:center; color:var(--link); cursor:pointer;}
  .buttonFinal:hover, .buttonFinal.active {background:var(--bg-button-hover); border:1px solid var(--lines);}
  .buttonFinal .icon {width:16px; height:16px; margin-right:10px;}
  .buttonFinal .text {line-height:130%; font-size:70%; text-align:left;}
  .buttonFinal .text strong {font-size:130%;}
.buttonFinal.right .text {font-weight:bold; font-size:80%;}
.buttonFinal.right .icon {width:10px; height:10px; margin-right:0px; margin-left:10px;}

.buttonText {display:inline-flex; align-items: center;}

.tooltip {display:none;}
.tooltip.open {display:flex;}
/* Ensure tooltips hide even when other .row rules set display:flex */
.row.tooltip {display:none !important;}
.row.tooltip.open {display:flex !important;}
  .infoCircle {display:inline-block; width:14px; height:14px; margin-left:4px; background:#0e1928; border:1px solid #164668; border-radius:50%; text-align:center; font-weight:lighter; color:var(--link); cursor:pointer;}
  .infoCircle:hover {color:var(--linkHover);}
  .infoContent {display:flex !important; flex-direction:column; gap:8px; margin:4px 20px 32px 20px; padding:12px; border-radius:4px; border:1px solid #005447; background:#011b1c; font-size:90%; color:#c9c9c9;}
    .infoContent .title2 {display:flex; gap:6px; align-items:center; font-weight:bold; color:var(--h2); font-size:120%;}
    .infoContent a .icon {margin-right:6px !important;}

.icon {height:16px;}
.ico-name {display:flex; align-items:center; gap:4px;}


  


/* layout header */
#header2023 {display:flex; justify-content:space-between; align-items:center; margin-top:8px;}
.logo {}
  .logo:hover {filter:brightness(1.5);}
  .logo img {width: 213px; height:62px; margin-top: 4px;}

.menuCont {display:flex; flex-direction:row-reverse;}
.mainMenu {display:flex; border-bottom:1px solid var(--lines_2);}
  .mainMenu .item {display:flex; align-items:center; margin-left:25px; text-transform:uppercase; letter-spacing:0.2em; font-weight:bold;}
  .mainMenu .item:first-child {margin-left:0px;}
  .mainMenu .item .icon {width:16px; height:16px; margin-right:5px;}
  .mainMenu .item.active {border-bottom:1px solid var(--link);}
.subMenu {position:absolute; flex-direction:column; margin-top:-165px; padding:5px 10px; border:1px solid var(--lines_2); border-top:0; background:#000; z-index:100;}
  .subMenu a {display:block;}
  .subMenu .icon {width:16px; height:12px; margin-right:5px;}

.pageSectionBC {display:flex; align-items:center; gap:5px; font-size:80%}
  .pageSectionBC .active {color:var(--titles); font-weight:bold;}
  .pageSectionBC .icon {width:16px;}

.content-top {}
.content-top .pageSectionTitle {margin-bottom:5px; color:var(--titles); font-size:80%;}
.content-top .pageSectionDesc {margin-bottom:10px; font-size:80%;}
.content-top h1 {margin-top:20px;}
.content-top .desc {margin-bottom:16px;}

.content-top.ads {display:flex; justify-content: space-between;}
.content-top.ads .left {width:47%;}
.content-top.ads .right {width:47%; margin-top: 20px;}


/* layout body */
.cols2-in {display:flex; justify-content:space-evenly; align-items:center;}
.cols2 {display:flex; justify-content:space-between; align-items:flex-start;}
.column {display:flex; justify-content:flex-start; align-items:stretch; flex-direction:column; width:49%;}
.rows2 {display:flex; flex-direction: column;}

#page {clear:both; margin:0; padding:0; overflow:hidden; background:url('https://www.livingfuture.cz/img/bg_page.png'); font-family:arial;}
  #page.oneCol {background:none;}
  
#main {float:left; width:700px; margin:0px 0 20px 0; letter-spacing:0.8px; word-spacing:1px; text-align:left;} 
#mainWide {margin-bottom:50px;}
  #mainWide .mainBox {padding-right:0;}
#main .datumLine {height:15px;}
    .datumLine .tags {float:right; font-size:90%;}
      .datumLine .tags a {color:var(--note); margin-left:10px;}
      .datumLine .tags a:hover {color:#666666; border-top: 1px solid #444444;}
#main p {margin:0 0 10px 0;}
  #main p strong {font-weight:bold;}

/* main box for content */
.mainBox {margin:24px 0;}   
  .mainBox.social {margin:0; padding-bottom:15px; text-align:center; background:#000a0b;}
  .mainbox.intro {margin-top:10px; margin-bottom:25px; text-align:center;}
    .mainbox.intro img {width:33%;}
  .mainBox.introImage {display:flex; gap:10%;}
    .mainBox.introImage img {width:500px;}
  .mainBox.study {display:flex; flex-direction:column; gap:4px;}
    .mainBox.study h1 {padding:0; margin:0;}
  .mainBox.twocol {display:flex; justify-content:space-between; gap:64px;}
    .mainBox.twocol .left {width:800px;}
    .mainBox.twocol .right {display:flex; flex-direction:column; gap:24px;}

.ads-title {color:#a2a2a2; font-size:80%;}
.ads-cont {padding:0 8px 0 8px; border:1px solid #555555; text-align: center; background: #9999990f; min-height:90px; min-width: 350px;overflow: hidden;}
.ad-slot {display:block; width:100%;  min-height:250px; max-height:400px;}
.ad-slot--faq {aspect-ratio:16 / 9; min-height:90px; max-height:150px;}

.studyBody {display: flex; gap: 16px;}
.studyBody .right {min-width:33%;}

/* list of stars in table */
.starlist2 {width:100%; font-size:80%;}
.starlist2 tr:first-child td {border-top:1px solid #1c3833;}
.starlist2 td {padding:3px 0; border-bottom:1px solid #1c3833;}
  .starlist2.singlerow td {border-bottom:0;}
  .starlist2 td a {display:block;}
.starlist2 th {color:var(--titles); border-bottom:1px solid #19af9b;}                   
  .starlist2 th span {font-weight:lighter; font-size:80%; color:var(--note);}
.starlist2 tr.noborder td {border-bottom:0 !important;}
  .starlist2 tr.noborder .starIcon {border-bottom:1px solid #1c3833 !important;}
.starlist2 tr:hover td {border-bottom:1px solid #2f5c54;}
.starlist2 .starIcon {width:35px; height:30px; padding-right:5px; text-align:center;}
.starlist2 .number {min-width:50px; max-width:70px; padding-left:5px; font-size:90%; text-align:right; color:var(--note);}
.starlist2 .active td {background:#092026;}

/* bordered box | stellar */  
.contentBox {margin-bottom:50px;}
  .contentBox .top {display:flex; align-items:stretch; justify-content:space-between; }
    .contentBox .top .icon {width:16px; height:16px; margin:0 4px 0 10px; vertical-align:text-bottom;}
    .contentBox .top h2 {min-width:33%; display:flex; align-items:center; gap:4px; margin:0; border-top:1px solid #3d9387; border-left:1px solid #3d9387; background:#142623; font-size:100%;}
    .contentBox .cornerValue {border-bottom:1px solid #3d9387; width:-webkit-fill-available; color:var(--titles); font-size:70%; text-align:right;}
  .contentBox .content {display:flex; flex-direction:column; gap:8px; padding:8px 10px 5px 10px; border:1px solid #3d9387; border-top:0; background:#004a3a26;}
    .contentBox .contentRow {display:flex; justify-content:space-between; gap:32px;}
    .contentBox .content .contentItem {min-width:400px; margin:0;}
    .contentBox .content .contentItem.row {display: flex; gap: 32px;}
    .itemBody {display:flex; align-items:flex-start; gap:8px;}
    .contentBox .title {margin-top:4px; margin-bottom:4px; font-weight:bold; color:var(--titles);}
    .contentBox .starlist2 {width:100%; font-size:80%;}
    .contentBox .starIMG {max-width:16px; max-height:16px;}
    .contentBox .img_bg {height:32px;}
    .contentBox .listItem {display:block;}

/* bordered box | stats */
.statContent {display:flex; flex-direction:column; gap:8px; background:#55555530; font-size:90%; padding:16px; border-radius:4px; border:1px solid #545454; color:#a2a2a2;}
.statContent .title {font-weight:bold;}



  .box {min-height: 100px; margin:10px 0;}
    .box h5 {font-size:90%;}
    .box strong.name {display:block;}    
    
  .starIMG {position:absolute; min-width:2.5px; min-height:2.5px; max-width:35px; max-height:35px;}
  .starmap_starName2 {font-size:400%;}
  
                                          
  .starTypesList {display:flex; align-items:flex-end; justify-content:space-between;}
    .starTypesList .starType {min-width:90px;}

    

/* footer */
#footer {clear:both; display:flex; justify-content:space-evenly; border-top:1px solid var(--lines); padding:10px 10px 50px 10px; overflow:auto;}
  #footer a {opacity:0.8; font-size:70%;}
  #footer a:hover {}
  #footer .section {min-width:150px;}
  	#footer .section a {display:flex; padding:5px 0;}
  	#footer .section a .icon {width:12px; height:12px; margin-right:4px; vertical-align:middle;}
  #footer .chapterTitle {margin:0; padding-bottom:5px; border:0;}

 

    
/* paging and filter */ 
.pagingandfilter {display:flex; justify-content:space-between; align-items:center; margin-top:10px; margin-bottom:5px;}
.paging {display:flex; justify-content:flex-end; align-items:center;}
  .paging a {display:flex; justify-content:center; align-items:center; border:1px solid var(--link); margin-left:10px;}
  .paging a:hover {border:1px solid var(--linkHover);}


/* article list */
  .HPbox3 {margin:0 0 5px 0; padding-top:5px; border-top:1px solid #3c3c3c; overflow:hidden;}
    .HPbox3:first-child {border-top:0;}
  .chapterTitle + .HPbox3 {border:0;}
    .HPbox3 a .perex, .HPbox3 a .HPboxImg {opacity:0.9;}
      .HPbox3 a:hover .perex, .HPbox3 a:hover .HPboxImg {opacity:1;}
    .HPbox3 .dateLine {display:flow-root;}
    .HPbox3 .perex {margin:0 !important; font-weight:200; color:#eee; text-align:justify;} 
    .HPbox3 .moreLink {margin-left:0; padding-left:0px;} 
    .HPbox3 .HPboxImg {float:left; display:flex; justify-content:center; align-items:center; width:200px; max-height:104px; margin:3px 10px 0 0; overflow:hidden;}
      .HPbox3 .HPboxImg img {width:250px;}
      #right .HPboxImg {width:100%;}
        #right .HPboxImg img {width:100%;}
    .HPbox3.noPerex h3 {float:none; clear:none; padding-top:2px;}
      .HPbox3.noPerex .HPboxImg {clear:both; max-height:97px; margin-top:5px;}   



/* news */      
.newsList {display:flex; flex-direction:row; gap:24px;}
  .newsList .left {display:flex; flex-direction:column; gap:24px; width:66%;}
  .newsList .right {width: 33%; display: flex; flex-direction: column; gap: 32px;}
  .newsItem {display:flex; flex-direction:column; align-items: flex-start; gap:8px; border-bottom:1px solid #505050; padding-bottom:28px; overflow: hidden;}
  .newsItem .title {font-size:20px; font-weight:bold;}
  .newsContainer {display:flex; align-items: flex-start; gap:16px; color:var(--note);}
    .newsContainer img {width:200px;}
    .top .newsContainer img {width:300px;}    
  .newsDateLine {display: flex; gap: 16px;}
  .newsDate {width: max-content; display: flex; align-items: center; gap: 4px; color:#888; font-size:12px;}
    .newsDate .icon {width:12px; height:12px;}
  .newsDesc {margin-bottom:4px;}


  




  
  
                                                                                /* stars and planets */
/* stars | map layout */
.starmapLeft {position:absolute; top:60px; width:5%; height:92%; border-right:1px solid #51c4b4;}
.starmapRight {position:absolute; top:75px; right:0; width:5%; height:92%; border-left:1px solid #51c4b4;}

.bottomItem {display:inline-block; width:90%; text-align:left; overflow:hidden;}
.bottomItem.tools {width:89%; height:50px; display:flex; flex-direction:row-reverse; margin-bottom:5px;}
.bottomItem.tools .separator {width:20px; height:50px;}
.bottomItem.tools .tool {width:32px; height:32px; margin:0 5px; border:1px solid var(--lines); border-radius:5px; font-size:60%; text-align:center; cursor:pointer; opacity:0.4;}
  .bottomItem.tools .tool.zoomIn {background:url(https://www.livingfuture.cz/img/ico_zoomIn.webp);}
  .bottomItem.tools .tool.zoomOut {background:url(https://www.livingfuture.cz/img/ico_zoomOut.webp);}
  .bottomItem.tools .tool.fs {background:url(https://www.livingfuture.cz/img/ico_fs.png); background-repeat:no-repeat; background-position:center;}
  .bottomItem.tools .tool.fs2 {background:url(https://www.livingfuture.cz/img/ico_fs2.png); background-repeat:no-repeat; background-position:center;}
.bottomItem.tools .tool.disable {display:none;}
.bottomItem.tools .tool.active {opacity:1;}
  
.bottomItem.tools .tool img {width:100%;}
.bottomItem.info {width:90%; height:100px; border:1px solid #50C4B4; background:var(--bg-colorDark); }

.starBottomInfo {min-width:300px; margin:5px 10px;}
  .starBottomInfo .starImage {display:inline-block; border-radius:50%; vertical-align:middle;}
  .starBottomInfo .starImage img {display:flex; opacity:0.8;}
  .starBottomInfo .starBottomInfo2 {display:inline-block; min-width:350px;}

.starBottomInfo {}  
  .starBottomInfo .title {margin-bottom:5px;}  
  .starBottomInfo .title strong {font-size:150%; color:var(--lines);}  
  .starBottomInfo .starImage {margin:5px 15px;}  

/* stars | star list */
  .starlist {padding:0; font-size:80%;}  
    .starlist th {position:sticky; top:0; padding-bottom:5px; background:#000; vertical-align:top;}  
    .starlist th span {color:var(--note);} 
    .starlist a {display:block; padding:5px 0;}  
  .starIMG_detail {position:absolute; min-width:10px; min-height:10px; max-width:500px; max-height:500px;}
  .starIMG3 {text-align:center;}

/* stars | star detail | starframe */
.starframe_wrap {
  position: relative;
  min-width: 300px;
  max-width: 1400px;
  width: 100%;
  height: 300px;
  min-height: 300px;
  max-height: 300px;
  aspect-ratio: 14 / 3;
  border-bottom: 1px solid var(--lines);
}
.starframe_wrap--deferred {overflow:hidden;}
.starframe_content {
  position:absolute;
  inset:0;
  opacity:0;
  visibility:hidden;
  transition:opacity .35s ease, visibility .35s ease;
}
.starframe_wrap--loaded .starframe_content {
  opacity:1;
  visibility:visible;
}
.starframe_loader {
  position:absolute;
  inset:0;
  z-index:20;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:18px;
  background:linear-gradient(180deg, rgba(0,0,0,.95) 0%, rgba(6,11,16,.96) 100%);
  border:1px solid rgba(69,216,251,.25);
  color:var(--lines);
  text-align:center;
  transition:opacity .35s ease, visibility .35s ease;
}
.starframe_wrap--loaded .starframe_loader {
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.starframe_loaderLabel {
  font-size:120%;
  letter-spacing:.04em;
  color:#fff;
}
.starframe_loaderNote {
  font-size:80%;
  color:var(--note);
}
.starframe_loaderBar {
  width:min(280px, 78%);
  height:4px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 0 0 1px rgba(0,0,0,.35) inset;
}
.starframe_loaderBar span {
  display:block;
  width:100%;
  height:100%;
  border-radius:inherit;
  background:#19af9b;
  transform-origin:left center;
  animation:starframeLoadBar var(--starframe-delay, 6500ms) linear 1 forwards;
}
@keyframes starframeLoadBar {
  0% {transform:scaleX(0);}
  100% {transform:scaleX(1);}
}
.starframe_wrap.full {position:fixed; top:0; left:0; width:100vw; height:100vh; z-index:9999; margin:0; background:#000;}
.starframe {width:100%; height:300px; min-height: 300px; max-height: 300px; border: 1px solid var(--lines); background:transparent;}
  .starframe.full {position:absolute; top:0; left:0; width:100vw; height:100vh; max-height:100vh; border:none; z-index:10000;}
.starframe_corner {display:flex; flex-direction:row-reverse; width: 135px; height: 32px; z-index:10; position:absolute; right:-1px; margin:0;}
  .starframe_corner .note {padding-left:5px; background:#000; border:1px solid var(--lines); border-width:0 0 1px 0; color:var(--lines); text-align:right;line-height: 12px;}
.starframe_links {position:absolute; z-index:10; top:12px; left:12px; width: 32px; height: 32px; margin:0;}
  .starframe_links a {display:inline-flex; width:32px; height:32px; border:1px solid var(--link); border-radius:5px; overflow:hidden;}
  .starframe_links a img {width:100%; height:100%; opacity:0.8;}
  .starframe_links a:hover {border:1px solid var(--linkHover);}
  .starframe_links a:hover img {opacity:1;}

/* stars | star detail | graph */
.starColorGraph {position:relative; display:inline-block; width:160px; background:#000; padding:5px 10px; text-align:center; border:1px solid #373737; border-radius:3px;}
  .starColorGraph .lines {position:absolute; width:160px; height:70px; font-size:50%; color:#999; text-align:left;}
  .starColorGraph .graphMag {position:relative; display:flex; align-items:flex-end; height:67px; margin-left:12px; padding-left:5px; border-left:1px solid #555;}
  .starColorGraph .graphColCont {display:flex; align-items:flex-end; width:18px; }
  .starColorGraph .graphCol  {display:inline-block; width:10px; background-image:url(https://www.livingfuture.cz/img/bg_column.webp);}
  .starColorGraph .graphCol.avg {display:none; width:2px; margin-left:1px; margin-right:5px;}
  .starColorGraph .legend {clear:both; display:flex; margin-left:17px; line-height:10px; font-size:40%; color:#999;}
  .starColorGraph .legend .graphCol {width:18px;}

.starColorGraph.big {width:93%; margin-top:5px; }
  .starColorGraph.big .lines {width:95%;}
  .starColorGraph.big .lines .line {height:9px; border-bottom:1px solid #1f1f1f;}
  .starColorGraph.big .graphColCont {width:40px;}
  .starColorGraph.big .graphCol {width:20px;}
  .starColorGraph.big .legend .graphCol {width:35px; margin-left:5px; text-align:left;}

/* infoboxes on stars page */  
.star_systemInfo {display:flex; justify-content:space-between; min-height:250px;}
  .star_systemInfo .row {display:flex; gap:4px; margin:5px 0; line-height:14px;}
  .star_systemInfo .row .separator {display:inline-block; margin:0 4px; opacity:0.3;}
  .star_systemInfo .row .icon, .star_systemInfo table .icon {width:14px; height:14px; margin-right:4px; vertical-align:initial;}
  .star_systemInfo table .icon {margin-right:0;}
  .star_systemInfo .title {display:flex; align-items:center; margin-top:0; margin-bottom:0px; font-size:150%; color:#ab9c01;}
  .star_systemInfo .title.small {font-size:130%; color:var(--h2);}
  .star_systemInfo .title .icon {margin-right:8px;}
  .star_systemInfo .item {display:flex; align-items:flex-end; gap:8px;}
  .star_systemInfo .valueEstimate {color:#b58552;}
  .value {color:#45d8fb;}
  .star_desc {margin-bottom:15px;}
  .star_systemInfo h3 {font-size:100%; margin-top:16px;} 
  .star_params ul {margin-top:0; font-size:80%;}

.starInfo {display:inline-block; margin:10px 0; padding:15px 10px; border-top:1px solid #45d8fb; border-bottom:1px solid #185868; background:var(--bg-colorDark); text-align:left; vertical-align:top; min-height:50px;}
  
.exoplanet_icon {width:10px; height:10px; background:#6b502f; border-radius:50%; display:inline-block; vertical-align:middle; margin:0 5px 0 0;}


.articleStarInfo {
    min-width: 170px;
    max-width: 180px;
    background: #142623;
    border-radius: 4px;
    border: 1px solid #3d9387;
    padding: 8px 12px;
    font-size: 16px;
    color: #bbc5c3;
}

.articleStarHeader {
  display: flex;
  align-items: center;
  gap: 8px;
}

.articleStarInfo .item {
  padding-left:16px;
  background-image:url('https://www.livingfuture.cz/img/ico/list.png');
  background-repeat:no-repeat;
  background-position:left center;
  background-size: 16px 16px;
}








/* Fix: remove unexpected right padding added to runtime #document element (iframe) */
#document {padding-right: 0 !important; margin-right: 0 !important;}
	.exoplanet_icon .shadow {width:100%; height:100%; background:url(https://www.livingfuture.cz/img/object_night_002.webp); background-size:100%; opacity:0.93;}

/* stars | map | star card */
 .star4 {font-size:300%;}
  .starmap_cardCont {min-width:1200px; margin-top:-2%; margin-left:54%; cursor:pointer;}
    .starmap_cardCont .note {text-align:left;}
  .star4 .starmap_title {color:#50C4B4; padding-bottom:10px; opacity:0.5;}  
    .star4 .starmap_title .icon {display:none; width:50px; vertical-align:top;}  
  .star4 .starmap_card {display:none;}  
  
  .star4 .starmap_cardCont:hover .starmap_title, .star4 .starmap_cardCont.active .starmap_title {opacity:1;}  
    .star4 .starmap_cardCont:hover .starmap_card {display:block; position:absolute; width:100%; border:2px solid var(--lines); border-radius:10px; background:url(https://www.livingfuture.cz/img/bg_blue_transparent.png); padding:5px 10px; font-size:150%; color:#50C4B4; opacity:1;}  
    .star4 .starmap_title:hover .icon {display:inline-block;}  



.starMap_small {float:left; width:50%; height:200px; margin:0 20px 30px 0;} 
.starmap_starName {display:block; width:100%; margin-left:600px; font-size:600%;}  
.starBox {}  
  .starBox.half {width:48%; margin-right:2%;}
.starmapLine {position:absolute; width:0; height:45%; left:50%; top:50%; opacity:0.5; border:1px dashed #51C4B4; transform:rotate(0deg);}  
  
  
/* exoplanets | list */
.exoplanetsList {width:100%; line-height:14px;}
.exoplanetsList td {border-left:1px solid #555; padding:3px 5px;}
  .exoplanetsList td:first-of-type {border-left:0px solid #555; padding-left:0;}

.planet {margin:0 auto;}
  .planet .sphere {position:absolute;}



/* 3D UI elements */
.ui3d {
  background-color: rgba(81, 196, 180, 0.3);
  border: 1px solid var(--lines);
  border-radius: 2px;
  padding: 4px 8px;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(81, 196, 180, 0.3);
  color: var(--text);
  font-size: 50%;
  opacity:0.5;
  margin-top:-50%
}

.ui3d .title {
  color: var(--h1);
}

.ui3d .separator {
  width: 100%;
  height: 1px;
  background-color: var(--note);
  margin: 5px 0;
}

.ui3d .list {
  font-size: 70%;
  padding: 2px 0;
}

.ui3d .list .value {
  color: #45d8fb;
}

.ui3d:hover {
  background-color: rgba(81, 196, 180, 0.35);
  border-color: var(--link);
  box-shadow: 0 2px 12px rgba(81, 196, 180, 0.4);
  font-size:90%;
  opacity:0.8;
} 

/* converter */
.tab-menu {display: flex; gap: 16px; margin-bottom: 16px;}
  .tab-menu a {display: flex; align-items: center; gap:4px; border-bottom:1px solid transparent;}
  .tab-menu a .icon {height:16px;}
  .tab-menu a.active {border-bottom:1px solid var(--h2); color: var(--h2); font-weight:bold;}
.converter-form {display: flex; gap: 8px;}
#conversionResult .title {margin:4px 0 0 0; color:var(--note); font-size:80%;}

.converter-box-link {display: flex; padding: 16px; background: rgba(255,255,255,0.02); transition: background 0.2s;}
  .converter-box-link .icon {width:40px; height:40px;margin-right:16px;}
  .converter-box-link .right {display: flex; flex-direction: column;}
  .converter-box-link p {margin: 0; color: var(--note);}

/* radius comparison visualization */
#radiusComparison .title {margin:4px 0 0 0; color:var(--note); font-size:80%;}


/* missions */
.missionsTable {border-spacing: 16px 4px;}




/* animations | rotation */      
.rotate {animation: rotation 12s infinite linear;} 
@keyframes rotation {
  from {transform: rotate(0deg);}
  to {transform: rotate(359deg);}
}  

/* animations | loader */
@keyframes intro { 
    0% {display:block; opacity:1;} 
    100% {display:none; opacity:0;} 
}    

@keyframes spin { 
    100% {transform:rotate(360deg); } 
}    

@keyframes orbits {
    0% {width:50px; height:50px; border:1px dashed #4771be;}
    10% {width:500px; height:500px; border:1px dashed #ea9343; filter:blur(0);}
    20% {width:250px; height:250px; border:1px dashed #4771be; filter:blur(0);}
    30% {width:450px; height:450px; border:1px dashed #ea9343; filter:blur(0);}
    40% {width:260px; height:260px; border:1px dashed #4771be; filter:blur(0);}
    50% {width:400px; height:400px; border:1px dashed #ea9343; filter:blur(0.1px);}
    60% {width:275px; height:275px; border:1px dashed #4771be; filter:blur(0.2px);}
    70% {width:375px; height:375px; border:2px solid #ea9343; filter:blur(4px);}
    80% {width:300px; height:300px; border:5px solid #4771be; filter:blur(10px);}
    90% {width:325px; height:325px; border:7px solid #43EAD4; filter:blur(14px);}
    100% {width:350px; height:350px; border:10px solid #43EAD4; filter:blur(20px);}
}

#loader {display:flex; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; z-index:1000; opacity:0.9; justify-content:center; align-items:center; pointer-events:none;}
.loaderDone #loader {display:none;}
  #loader .desc {position:absolute; margin-top:100px; font-size:60%; color:#999; text-align:center;}
    #loader .desc .cancel {color:#f99;}
  #loader .earth {position:absolute; width:75px; animation:spin 10s linear infinite;}
  #loader .moon {position:absolute; animation:spin 45s linear infinite;}
  #loader .orbits {position:absolute; border-radius:50%; animation:spin 45s linear infinite;}
    #loader .orbits1 {animation:orbits 21s linear infinite;}
    #loader .orbits2 {animation:orbits 18s linear infinite;}
    #loader .orbits3 {animation:orbits 15s linear infinite;}
    #loader .orbits4 {animation:orbits 12s linear infinite;}
    #loader .orbits5 {animation:orbits 9s linear infinite;}
    
#loaderSC2 {position:fixed; top:0; left:0; display:flex; width:100%; height:100%; z-index:1000; justify-content:center; align-items:center;}
  #loaderSC2 .solarSystem {position:absolute; width:8000px; height:4000px;background:url('https://www.stellarcatalog.com/img/solarSystem.webp'); background-size:cover; background-position:center center; animation:disappear 5s ease-in-out; animation-fill-mode:forwards;}
  #loaderSC2 .sun {position:absolute; width:150px; height:150px; background:url('https://www.stellarcatalog.com/img/sun-2d-150.webp'); background-size:cover; background-position:center center; animation:disappearSun 5s ease-in-out; animation-fill-mode:forwards;}
  #loaderSC2 .asteroidBelt {position:absolute; width:4000px; height:2000px; background:url('https://www.stellarcatalog.com/img/asteroidBelt.webp'); background-size:cover; background-position:center center; animation:disappearBelt 5s ease-in-out; animation-fill-mode:forwards;}
  #loaderSC2 .oortCloud {position:absolute; width:4000px; height:4000px; background:url('https://www.stellarcatalog.com/img/oortCloud.webp'); background-size:cover; background-position:center center; animation:disappearOort 5s ease-in-out; animation-fill-mode:forwards;}

@keyframes disappear {
  0% {width:8000px; height:4000px; opacity:1;}
  98% {width:10px; height:5px; opacity:1;}
  100% {width:2px; height:1px; opacity:0;}
}
@keyframes disappearSun {
  0% {width:150px; height:150px; opacity:1;}
  98% {width:10px; height:10px; opacity:1;}
  100% {width:10px; height:10px; opacity:0;}
}
@keyframes disappearBelt {
  0% {width:8000px; height:4000px; opacity:1;}
  50% {width:8000px; height:4000px; opacity:1;}
  98% {width:100px; height:50px; opacity:1;}
  100% {width:10px; height:10px; opacity:0;}
}
@keyframes disappearOort {
  0% {width:8000px; height:8000px; opacity:1;}
  70% {width:8000px; height:8000px; opacity:1;}
  98% {width:100px; height:100px; opacity:1;}
  100% {width:10px; height:10px; opacity:0;}
}













/* medium */  
@media only screen and (max-width: 1350px) {
    body {width:95%;}
}








/* mobile */  
@media only screen and (max-width: 1024px) {
  body {width:98%; font-size:90%; background-image:url('https://www.livingfuture.cz/img/bg_galaxy_small_mobile.webp');}
  .mainContainer {padding:0 8px;}
    
    .mobile {display:block;}
    .notMobile {display:none;}
    
#header2023 {flex-direction:column;}
  #header2023 .mainMenu {justify-content:space-around; width:100%; margin-top:15px; font-size:90%;}
    #header2023 .mainMenu a {margin-left:0;}
    .menuCont {width:100%;}
      .subMenu {margin-top:-165px;}
      .subMenu a {padding:10px 5px;}


    .starlist {font-size:90%;}  
    .starlist a {padding:10px 0;}
    .starmapLeft {height:82%; width:10px;}
    .starmapRight {height:82%; width:10px;}

    .starframe {border-left:0; border-right:0; width:99%;}
    .starframe_corner {width:99%;}


    .chapterTitle {text-align:center; font-size:80%; margin-top:15px; width:auto !important;}  
      .chapterTitle.white {text-align:left}  
    .sourceBox.half {width:98%;}
    
    .content-top {width:100%; min-height:20px; margin-top:8px;}
    .pageSectionBC {align-items:center;}

    .pagingandfilter {overflow:scroll;}

    h3 {font-size:100%;}
    #HPboxNew .HPbox3 h3 {line-height:20px;}
      .HPbox4 a h3 {line-height:15px;}
      .HPbox3 .HPboxImg {width:125px; max-height:81px;}
        .HPbox3 .HPboxImg img {width:150px;}
    #page {background:none; }
      #page.higher {margin-top:-20px;}

    .mainBox, #main .mainBox, #mainWide .mainBox, #right .mainBox {margin-left:0; margin-right:0; padding-right:0px; padding-left:0px;}
      #main2 .mainBox {padding-right:10px;}   


    .sourceBox ul li {margin-bottom:20px;}
    
    .mainBox.gallery {margin:0}     
    .mainBox.gallery.small {display:block;}
    .mainbox.intro img {width:200px;}     
    .gallery a {max-width:47%;}
    .mainBox.introImage {flex-direction:column;}
      .mainBox.introImage img {width:100%;}
    .mainBox.twocol {flex-direction:column; gap:32px;}
      .mainBox.twocol .left {width:100%;}
      .mainBox.twocol .right {width:100%;}

  .newsList {flex-direction:column;}
  .newsList .left, .newsList .right {width: 100%;}
    .newsItem .title {font-size:18px; font-weight:bold;}
  .newsContainer {flex-direction:row;}
    .top .newsContainer {flex-direction:column;}
    .newsContainer img {width:120px; height:auto;}
    .top .newsContainer img {width:100%;}    
  .newsDesc {margin-top:0;}


    .contentBox .top h2 {min-width:66%;}
    .contentBox .content {flex-direction:column;}
    .contentBox .content .contentItem {min-width:auto;}
    .contentBox .content .contentItem.row {flex-direction: column;}
    .contentBox .contentRow {flex-direction:column; gap:16px;}
    
    .cols2-in, .cols2 {flex-direction:column; gap:8px;}
    .rows2 {display:flex; flex-direction:row; justify-content:center; gap:15px;}
    .column {width:100%;}

    #main,#right {width:100%;}
      #right {border:0;}
      #right .chapterTitle:first-child {border-top:1px solid var(--lines);}
    #main #tagCloud, .sourceBox.half, #main .middleblock {width:100%;}
      #main.articleMain,#HPboxNew, .HPbox4, #photo, #photo img {width:98%;}
    
    #main #tagCloud ul li {line-height:30px;}  

    #footer {flex-direction:  column;}
      #footer .section {text-align:center;}
      
    .feedShort {padding-right:0px;}

    .content-top.ads {flex-direction: column;}
      .content-top.ads .left {width:100%;}
      .content-top.ads .right {width:100%; }
    
    .studyBody {flex-direction:column;}
      
    #bc,#main a.HPboxH4, #photo .photoNavi {display:none;}
    .img_mobile {display:block; width:100%; margin-bottom:15px; border-top:1px solid #50c4b4; border-bottom:1px solid #50c4b4; background:url(https://www.livingfuture.cz/img/right_descr.png);}
      .img_mobile img {width:100%;}
      
    .missionTop {flex-direction:column;}
    .missionsTable td a {padding:10px 0;}


      
    
    .starTypesList {overflow:scroll;}


    .star_systemInfo {flex-direction:column;}
    .star_systemInfo .starInfo {min-width:75%;}

    .starBox, .starBox.half {width:95%; float:none; margin-left:auto; margin-right:auto;}
    .starIMG_detail {max-width:300px; max-height:300px;}
    .starIMG_detail img {max-width:100%; max-height:100%;}

    .starBottomInfo .starBottomInfo2 {min-width:auto;}
    
    .exoplanetsList td {padding:10px 5px;}

.converter-form {flex-direction: column;}

/* radius comparison on mobile */
#radiusComparison > div > div {flex-direction: column !important;}

.ads-cont {min-width: 320px;
  min-height: 100px;}

}    

















/* Converter box link hover effect */
.converter-box-link:hover {
    background: rgba(255,255,255,0.05) !important;
}
/* GDPR Cookie Banner */
#cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, rgba(4,18,21,0.95) 0%, rgba(4,18,21,0.98) 100%);
    border-top: 2px solid var(--lines);
    padding: 20px;
    z-index: 10000;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.5);
}

.cookie-content {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.cookie-content p {
    margin: 0;
    color: var(--text);
    font-size: 14px;
    flex: 1;
    min-width: 300px;
}

.cookie-buttons {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.cookie-accept, .cookie-reject {
    padding: 10px 24px;
    border: 1px solid var(--link);
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: Roboto, verdana;
}

.cookie-accept {
    background: var(--link);
    color: #000;
}

.cookie-accept:hover {
    background: var(--linkHover);
    border-color: var(--linkHover);
}

.cookie-reject {
    background: transparent;
    color: var(--text);
}

.cookie-reject:hover {
    background: rgba(147,191,222,0.1);
}

@media (max-width: 768px) {
    .cookie-content {
        flex-direction: column;
        align-items: stretch;
    }
    
    .cookie-content p {
        text-align: center;
        min-width: auto;
    }
    
    .cookie-buttons {
        justify-content: center;
        width: 100%;
    }
    
    .cookie-accept, .cookie-reject {
        flex: 1;
    }
}