body {background: white; font-size:1em}

#content {padding:0em}

/*--------------------------------------------------------------
## Header
--------------------------------------------------------------*/
.site-branding {
    background: #0ff;
    text-align: left;
}

.site-branding .container-inner {
    padding-top: 20px;
    padding-bottom: 20px;
    width:80%;
}

.site-title {
    margin-bottom: 5px;
    font-family: 'Open Sans', sans-serif;
    font-size: 2em;
    font-weight: bold;
}
.site-title a,
.site-title a:hover,
.site-title a:visited{
    color: #58bed;
    text-decoration: none
}
.silver {color:silver}
.header-image-block img{
    width: 100% !important;
    height: auto;
}

.nav-item a:hover {background:#8EC641!important; border-radius: 3px}
.nav-link {color:#8EC641;}

.row-deal-variable {}
.row-deal-fix {}

.table td {text-transform: ;}

.table-striped > tbody > tr:nth-of-type(2n+1) > * {color:inherit}

.table tr {border-bottom:1px solid silver; background:#ffffff}
.table tr:hover {border-bottom:1px solid silver; background: #d9eaaf; }
.table tr.row-deal-variable:hover {background: #d9eaaf; }
.table tr.row-deal-fix:hover {background: #ffffd9; }
.table tr td a {text-decoration:none; color:#38d7ff}
.table tr:hover td a {text-decoration:none; color:black}

.table {--bs-table-striped-bg: rgba(0, 0, 0, 0.02);}


.px-md-4 {
  padding-right: 0rem !important;
  padding-left: 0rem !important;
}
.ms-sm-auto {
  margin-left: 0 !important;
}

.col-md-9 {
  flex: 0 0 auto;
  width: 99%;
}



body {padding:0em 0.5em}
.namecard h1 {font-weight:100}
.namecard h3 {font-size:1.3em; font-weight:700; letter-spacing:0.15em}
h3.h3 {margin-top:1em}
table h3 {font-weight:100}
table p {font-size:0.7em; line-height:1em}
xtable th:nth-child(1) {width:1em}
.blabel {padding-bottom:2px; margin:0px; font-weight:800  }
.blabel-50 {width:49%; display:inline-block; padding-right:1em  }
.blabel-25 {width:25%; display:inline-block; padding-right:1em  }
.s50 {color:silver}
.box {margin:0em; width:100%; float:none; clear:both}
.box.b1 {margin-top:2.5em; display:block}
.box .price {width:6em; display:inline-block; text-align:left  }
.box ul {margin:0; padding:0}
.box li {list-style-type:none; padding:0.5em 0em; background-color:white; transition: background-color 0.9s; border-bottom:1px dotted gray}
.box li:hover {background-color:#d9eaaf; transition: background-color 0s}
.box .padding-left-5 {padding-left:1em; float:none; display:block; clear:both}
.column3 {width:32.9%; float:left; padding:1em; }
.column3:nth-child(2) {border-left:1px dotted black; border-right:1px dotted black}
.table-value {width:auto; display:block; float:left; padding:0.5em; margin-left:0.5em; border-right:1px dotted silver}
table .status {min-width:4em; line-height:1.5em; font-size:1.5em; padding:0; margin:0; display:inline-block}
// ** togle
.control-me::after {}
#toggle:checked ~ .control-me::after {}

label {
    background: #A5D6A7;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
}
form label {
    background:transparent;
}

.visually-hidden {
position: absolute;
left: -100vw;

/* Note, you may want to position the checkbox over top the label and set the opacity to zero instead. It can be better for accessibilty on some touch devices for discoverability. */
}


.thumbnail {
position: relative;
z-index: 0;
font-size:1.5em;
margin:0 0.15em;
}

.thumbnail:hover {
background-color: transparent;
z-index: 50;
}

.thumbnail span {
/*CSS for enlarged image*/
position: absolute;
background-color: silver;
padding: 5px;
left: -15000px;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img {
/*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span {
/*CSS for enlarged image on hover*/
position:absolute;
visibility: visible;
top: 30px;
left: -100px; /*position where enlarged image should offset horizontally */
}

h3 span {display:block; clear:both}
h3 .main {font-size:1.6em; font-weight:200; line-height:2em}
h3 .car {font-size:0.8em;line-height:1em}
h3 .mechanic {font-size:0.5em; font-weight:500; line-height:2em; color:silver; border-top:1px #ddd solid; margin-top:0.5em }

/* posun ikonky od textu */
.fa-solid, .fas {
  margin-right: 0.5em;
}


/* tabs do boku pre mobil */

.mobile-tabs-container {
  width: 100%;
  overflow: hidden;
}

/* Skryté radio inputy */
input[type="radio"] {
  display: none;
}

/* Taby hore – label ako tlačidlá */
.tab-label {
  display: inline-block;
  width: 32%;
  text-align: center;
  padding: 14px 0;
  background: #f0f0f0;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.3s, color 0.3s;  /* hladký prechod */
}

/* Hover efekt – pre všetky taby */
.tab-label:hover {
  background: #d0d0d0;
}

/* Active (pri držení kliku) – pre všetky */
.tab-label:active {
  background: #007bff;
  color: white;
}

/* Vybraný (checked) tab – trvalá zmena po kliknutí */
input[type="radio"]:checked + .tab-label {
  background: #007bff;   /* modrá alebo tvoja farba */
  color: white;
}

/* Obsah stĺpcov */
.tab-content {
  position: relative;
  width: 300%;            /* 3 stĺpce vedľa seba */
  display: flex;
  transition: transform 0.4s ease;  /* slide animácia */
}

.column {
  width: 33.33%;
  min-width: 33.33%;
  padding: 15px;
  box-sizing: border-box;
  flex-shrink: 0;
}


/* Posun podľa vybraného tabu */
#tab1:checked ~ .tab-content { transform: translateX(0); }
#tab2:checked ~ .tab-content { transform: translateX(-33.33%); }
#tab3:checked ~ .tab-content { transform: translateX(-66.66%); }

/* Posun podľa vybraného tabu */
#tab4:checked ~ .tab-content { transform: translateX(0); }
#tab5:checked ~ .tab-content { transform: translateX(-33.33%); }
#tab6:checked ~ .tab-content { transform: translateX(-66.66%); }


.column li a {text-decoration:none}

/* fakturovana vs nefakturovana */
tr.row-invoice-yes, .row-invoice-yes {background:#f9f1d1}
tr.row-invoice-no, .row-invoice-no {background:transparent}


/* Najlepší univerzálny kód pre 2025/2026 */
.responsive-table {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Voliteľne: pridaj tieň pre lepší UX */
.responsive-table {
  position: relative;
}

.responsive-table::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 20px;
  background: linear-gradient(to left, rgba(255,255,255,0.8), transparent);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}

.responsive-table[scrollable]::after {
  opacity: 1;
}  

@media only screen and (max-width: 600px) {

/* ------------------------------- */
/* 3. Zamknutie prvých 2–3 stĺpcov */
th, td {
  min-width: 100px;            /* minimálna šírka buniek – uprav podľa potreby */
}

/* Prvý stĺpec – najviac vľavo */
xtd:nth-child(5),
xth:nth-child(5) {
  position: sticky;
  left: 0;
  background: #f8f9fa;         /* svetlé pozadie, aby bolo vidieť, že je fixný */
  z-index: 2;                  /* nad ostatnými bunkami */
}

/* Druhý stĺpec */
td:last-child,
th:last-child {
  position: sticky;
  right: 0px;                 /* musí byť rovné šírke prvého stĺpca */
  background: #f8f9fa;
  z-index: 1;
}

/* Tretí stĺpec (ak chceš aj ten) */

/* Hlavička tabuľky – ak chceš, aby zostala hore pri vertikálnom scrolli */
thead th {
  position: sticky;
  top: 0;
  background: #e9ecef;
  z-index: 3;
} 

} /* koniec media */
.table tr:hover th {background:#fff; color:inherit}
.table tr:hover th a {color:inherit}