.col-sm-2-grid {
    flex: 0 0 16.66667%;
    max-width: 16.66667%;
    position: relative;
    width: 100%;
    padding-right: 40px;
    padding-left: 40px;
}

.col-sm-2-grid-text {
    flex: 0 0 16.66667%;
    max-width: 16.66667%;
    position: relative;
    width: 100%;
    padding-right: 14px;
    padding-left: 14px;
}

.col-sm-3-grid {
    flex: 0 0 22%;
    max-width: 22%;
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
  }

.col-sm-3-text {
    flex: 0 0 22%;
    max-width: 22%;
    position: relative;
    width: 100%;
    padding-right: 0px;
    padding-left: 10px;
  }

  .col-sm-4-grid {
    flex: 0 0 28%;
    max-width: 28%;
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
  }

.col-sm-4-text {
    flex: 0 0 28%;
    max-width: 28%;
    position: relative;
    width: 100%;
    padding-right: 0px;
    padding-left: 10px;
  }
  
  .box {
    display: none;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 100%;
    max-width: 100%;
  }

  .hidden {
    display: block;
    height: 0;
    opacity: 0;
  }

  .hide {
    display: block;
    animation: fadeOut 2s;
  }
  
  .show {
    display: block;
    animation : fadeIn 2s;
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to {opacity: 1; }
  }

  @keyframes fadeOut {
    from { opacity: 1; } 
    to {opacity: 0; }
  }

  /* Tooltips styling */
  .tooltip {
    position: relative;
    display: inline-block;
    border-bottom: none;
  }

  .tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #4747A1;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    position: absolute;
  }

  .tooltip:hover .tooltiptext {
    visibility: visible;
  }

  .tooltip-inner {
    background-color: #4747A1 !important;
  }

 .tooltip.show {
    opacity: 1;
  }
  
  
/* footer classes*/
.footer {
  display: flex;
  flex-flow: row wrap;
  padding: 30px 30px 20px 30px;
  color: #2f2f2f;
  background-color: #fff;
  border-top: 1px solid #e5e5e5;
  background: #F5F7FF;
  transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -webkit-transition: all 0.25s ease;
  -ms-transition: all 0.25s ease;
}

.footer > * {
  flex:  1 100%;
}

.footer__addr {
  margin-right: 1.25em;
  margin-bottom: 0.2em;
}

.footer__logo {
  font-family: 'Pacifico', cursive;
  font-weight: 400;
  text-transform: lowercase;
  font-size: 1.5rem;
}

.footer__addr h2 {
  margin-top: 1.3em;
  font-size: 15px;
  font-weight: 400;
}

.nav__title {
  font-weight: 400;
  font-size: 15px;
}

.footer address {
  font-style: normal;
  color: #999;
}

.footer__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  max-width: max-content;
  background-color: #a3a4a5;
  border-radius: 100px;
  color: #ffffff;
  line-height: 0;
  margin: 0.6em 0;
  font-size: 1rem;
  padding: 0 1.3em;
}

.footer ul {
  list-style: none;
  padding-left: 0;
}

.footer li {
  line-height: 2em;
}

.footer__nav {
  display: flex;
	flex-flow: row wrap;
}

.footer__nav > * {
  flex: 1 50%;
  margin-right: 1.25em;
}

.nav__ul a {
  color: #999;
}

.nav__ul--extra {
  column-count: 2;
  column-gap: 1.25em;
}

.legal {
  display: flex;
  flex-wrap: wrap;
  color: #999;
}
  
.legal__links {
  display: flex;
  align-items: center;
}

.heart {
  color: #2f2f2f;
}

@media screen and (min-width: 24.375em) {
  .legal .legal__links {
    margin-left: auto;
  }
}

@media screen and (min-width: 40.375em) {
  .footer__nav > * {
    flex: 1;
  }
  
  .nav__item--extra {
    flex-grow: 2;
  }
  
  .footer__addr {
    flex: 1 0px;
  }
  
  .footer__nav {
    flex: 2 0px;
  }
}

/* Articles*/

.article-container img {
  object-fit: contain;
  height:100%;
  width: 100%;
  transition: transform .2s, opacity .2s;
}

.article-container img:hover {
  transform: scale(1.1);
  opacity: 0.55;
}

.art-text {
  color: #000000;
  transition: transform .2s, opacity .2s;
}

.article-container img:hover + .art-text {
  transform: scale(1.1);
  opacity: 0.55;
}

/* custom cards */

.card.card-grey {
  background: #cdcdcd;
  color: #000000;
}
.card.card-grey:hover {
  background: #dadada;
}

/* art link */
.art-link {
  text-decoration: none;
}

.vertical-center {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

/* bios container */
.bio-container img {
  object-fit: contain;
  height:100%;
  width: 100%;
  transition: transform .4s, opacity .4s;
}

.bio-container img:hover {
  transform: scale(1.03);
  opacity: 0.8;
} 

.bio-text {
  text-align: left; 
  margin-top: 1.5rem;
}

.bio-desc {
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.5rem;
}

.bio-socials{
  margin-left: auto;
  margin-right: auto;
  padding-top: 25%;
  padding-bottom: 25%;
  padding-left: 10%;
}

.social-icon{
  color:#4747A1;
  font-size: 22px;
  transition: opacity .4s;
  -moz-transition: opacity .4s; /* Firefox 4 */
  -webkit-transition:opacity .4s; /* Safari and Chrome */
  -o-transition: opacity .4s;
}

.social-icon:hover {
  opacity: 0.55;
}

/* =========================
   Mobile-first overrides
   (append at end of calc1.css)
   ========================= */

/* stop horizontal scroll everywhere */
html, body { max-width: 100%; overflow-x: hidden; }
img, video { max-width: 100%; height: auto; display: block; }

/* give cards/content tighter spacing on phones */
@media (max-width: 767.98px){
  .grid-margin { margin: 0 0 12px 0 !important; }
  .card, .card-body { padding: 12px !important; }
}

/* ===== FORM LAYOUT =====
   Your labels often have inline flex:41%;max-width:41%.
   Force them to stack above inputs on phones. */
@media (max-width: 767.98px){
  .form-group.row > label.col-form-label,
  .row > label.col-form-label {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 6px;
  }
  /* radio/text cells collapse nicely */
  .col-sm-4-grid, .col-sm-4-text {
    flex: 0 0 50% !important; max-width: 50% !important;
    padding-left: 8px !important; padding-right: 8px !important;
  }
  .col-sm-3-grid, .col-sm-3-text {
    flex: 0 0 33.333% !important; max-width: 33.333% !important;
    padding-left: 8px !important; padding-right: 8px !important;
  }
  .col-sm-2-grid, .col-sm-2-grid-text {
    flex: 0 0 25% !important; max-width: 25% !important;
    padding-left: 8px !important; padding-right: 8px !important;
  }
  .form-check-label { display: flex; align-items: center; gap: 6px; }
  .form-group.row { margin-bottom: .75rem; }
}

/* sK input-group: allow wrapping and sane widths */
@media (max-width: 767.98px){
  .input-group { flex-wrap: wrap; }
  .input-group .input-group-prepend,
  .input-group .input-group-append { flex: 0 0 auto; }
  .input-group .form-control { flex: 1 1 160px; min-width: 0; }
}
.input-group-text { height: 44px; }
.floatNumberField { height: 44px; }

/* Buttons: stack full-width on narrow screens */
@media (max-width: 575.98px){
  .card .btn { width: 100% !important; margin-bottom: 8px; }
}

/* Article tiles: prevent hover zoom from causing side scroll */
.article-container { overflow: hidden; }
.article-container img { transform-origin: center center; }

/* Footer: one clean column on phones, back to multi-col on md+ */
.footer__nav { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px){
  .footer__nav { grid-template-columns: repeat(3, 1fr); }
}

/* Sidebar/settings UI that overlaps on mobile */
@media (max-width: 991.98px){
  #settings-trigger, .theme-setting-wrapper, #theme-settings { display: none !important; }
}

/* Navbar brand area from template is wide; shrink on phones.
   (requires calc1.css to be loaded after vendor/style1.css, which it is) */
@media (max-width: 575.98px){
  body { padding-top: 60px; } /* fixed-top navbar clearance */
  .navbar .navbar-brand-wrapper { width: 70px !important; height: 60px; }
  .navbar .brand-logo { display: none !important; }
  .navbar .brand-logo-mini { display: inline-block !important; }
}

/* DataTables / wide tables: horizontal scroll without breaking layout */
@media (max-width: 767.98px){
  table, .table { width: 100% !important; }
  .table, table.dataTable {
    display: block; overflow-x: auto; white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .dataTables_wrapper .row { margin-left: 0; margin-right: 0; }
}

/* === 1) Force colored cards to keep their background on mobile === */
/* Use the same palette your theme defines, but add !important so it wins */
.card.card-dark-blue   { background: #4747A1 !important; color:#fff !important; }
.card.card-light-blue  { background: #7978E9 !important; color:#fff !important; }
.card.card-light-danger{ background: #F3797E !important; color:#fff !important; }
/* readable body text on colored cards */
.card.card-dark-blue  .card-description,
.card.card-light-blue .card-description,
.card.card-light-danger .card-description { color: rgba(255,255,255,.85) !important; }

/* === 2) Form layout: radios + labels === */
@media (max-width: 767.98px){
  /* labels above inputs */
  .form-group.row > label.col-form-label,
  .row > label.col-form-label {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 6px;
  }
  /* 2-col radio grid for Yes/No blocks */
  .col-sm-4-grid, .col-sm-4-text {
    flex: 0 0 50% !important; max-width: 50% !important;
    padding-left: 8px !important; padding-right: 8px !important;
  }
  /* 3-col radio grids (Electrolytes/Other labels) */
  .col-sm-3-grid, .col-sm-3-text {
    flex: 0 0 33.333% !important; max-width: 33.333% !important;
    padding-left: 8px !important; padding-right: 8px !important;
  }
  /* 4-col radio grids (Left/Right/Both/None headings) */
  .col-sm-2-grid, .col-sm-2-grid-text {
    flex: 0 0 25% !important; max-width: 25% !important;
    padding-left: 8px !important; padding-right: 8px !important;
  }
  .form-group.row { margin-bottom: .75rem; }
}

/* radio alignment & hit area */
.form-check { display:flex; align-items:center; min-height: 28px; }
.form-check-input { margin: 0 6px 0 0; }
.form-check-label { display:flex; align-items:center; gap:6px; }

/* sK input group: wrap cleanly on phones */
@media (max-width: 767.98px){
  .input-group { flex-wrap: wrap; }
  .input-group .input-group-prepend,
  .input-group .input-group-append { flex: 0 0 auto; }
  .input-group .form-control { flex: 1 1 160px; min-width: 0; }
}
.input-group-text, .floatNumberField { height: 44px; }

/* spacing & scroll safety */
html, body { max-width: 100%; overflow-x: hidden; }
@media (max-width: 767.98px){
  .grid-margin { margin: 0 0 12px 0 !important; }
  .card, .card-body { padding: 12px !important; }
}

/* ===== Fix radios & labels (use native radios, no overlap) ===== */
.form-check .form-check-label {
  position: static !important;
  padding-left: 0 !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: normal;
}
.form-check .form-check-label::before,
.form-check .form-check-label::after { display: none !important; } /* kill theme's pseudo bullets */

.form-check .form-check-input{
  position: static !important;
  margin: 0 8px 0 0 !important;
  opacity: 1 !important;            /* show native radio */
  transform: none !important;
  -webkit-appearance: radio;
     -moz-appearance: radio;
          appearance: radio;
}
.form-check { display: flex; align-items: center; min-height: 32px; }

/* Keep rows tidy */
.form-group.row { row-gap: 8px; }

/* ===== Make sK group white except the purple prefix ===== */
.input-group-text:not(.bg-primary) { background-color: #fff !important; color: inherit; }
/* keep your purple prefix intact (comes from .bg-primary) */

/* ===== Inputs readable ===== */
.form-control:not(:disabled):not([readonly]) { background-color: #fff; }

/* ===== Mobile stacking rules you already wanted (kept here for completeness) ===== */
@media (max-width: 767.98px){
  .form-group.row > label.col-form-label,
  .row > label.col-form-label { flex: 0 0 100% !important; max-width: 100% !important; margin-bottom: 6px; }

  .col-sm-4-grid, .col-sm-4-text { flex: 0 0 50% !important; max-width: 50% !important; padding: 0 8px !important; }
  .col-sm-3-grid, .col-sm-3-text { flex: 0 0 33.333% !important; max-width: 33.333% !important; padding: 0 8px !important; }
  .col-sm-2-grid, .col-sm-2-grid-text { flex: 0 0 25% !important; max-width: 25% !important; padding: 0 8px !important; }

  .input-group { flex-wrap: wrap; }
  .input-group .form-control { flex: 1 1 160px; min-width: 0; }
}

/* ===== TIGHTEN LABEL ↔ RADIO ALIGNMENT ===== */

/* Top-align items in each row (stops radios from drifting down) */
.form-group.row { align-items: flex-start !important; }

/* Kill extra spacing from headings and form-check */
.form-group.row > label.col-form-label h5 { margin: 3px 0 12px 0 !important; }
.form-check { margin: 0 !important; min-height: 0; display: flex; align-items: flex-start; }
.form-check-input { margin: 2px 2px 0 0 !important; }  /* small nudge so dot aligns with first text line */
.form-check-label { display: inline-flex; align-items: flex-start; gap: 8px; }

/* Columns that hold the radios become flex, so the radio sits at the top */
.col-sm-4-grid, .col-sm-3-grid, .col-sm-2-grid { display: flex !important; align-items: flex-start !important; }

/* Header row (“Yes / No”) centering & spacing */
.col-sm-4-text .form-check,
.col-sm-3-text .form-check,
.col-sm-2-grid-text .form-check { justify-content: flex-start; }
.col-sm-4-text .form-check-label,
.col-sm-3-text .form-check-label { margin-left: 0 !important; }

/* ===== MAKE sK CHIP WHITE (except the purple prefix) ===== */

/* Be more specific than the vendor bundle */
.input-group > .input-group-prepend + .input-group-prepend > .input-group-text {
  background-color: #ffffff !important;
  color: inherit !important;
  border-color: #ced4da !important;
}

/* Also ensure all non-primary chips default to white */
.input-group .input-group-text:not(.bg-primary) { background-color: #fff !important; color: inherit !important; }

/* Inputs themselves stay white */
.form-control:not(:disabled):not([readonly]) { background-color: #fff !important; }

/* --- sK chip: czytelny, bez podkreślenia, tooltip w kolorze --- */
.input-group-text { display:flex; align-items:center; }
.input-group-text.bg-primary { background:#4747A1 !important; color:#fff !important; }

.input-group-text.bg-primary h5{
  margin:0 !important;
  border:0 !important;             /* usuwa kropkowaną linię pod "sK" */
  font-weight:600;
  font-size:1rem;
  line-height:1.2;
  display:flex; align-items:center; gap:6px;
}
.input-group-text .ti-info-alt{ color:#fff; opacity:.9; font-size:.95rem; }

/* Tooltip – tło i STRZAŁKA w tym samym kolorze (BS4 i BS5) */
.tooltip .tooltip-inner{ background:#4747A1 !important; color:#fff !important; }
.bs-tooltip-right .arrow::before,
.bs-tooltip-auto[x-placement^=right] .arrow::before,
[data-popper-placement^=right] .tooltip-arrow::before{ border-right-color:#4747A1 !important; }
.bs-tooltip-left .arrow::before,
.bs-tooltip-auto[x-placement^=left] .arrow::before,
[data-popper-placement^=left] .tooltip-arrow::before{ border-left-color:#4747A1 !important; }
.bs-tooltip-top .arrow::before,
.bs-tooltip-auto[x-placement^=top] .arrow::before,
[data-popper-placement^=top] .tooltip-arrow::before{ border-top-color:#4747A1 !important; }
.bs-tooltip-bottom .arrow::before,
.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
[data-popper-placement^=bottom] .tooltip-arrow::before{ border-bottom-color:#4747A1 !important; }

/* --- Radio: mniej „powietrza” i wyrównanie do góry --- */
.form-group.row{ align-items:flex-start !important; row-gap:8px; } /* koniec z opadaniem radia */
.form-group.row > label.col-form-label h5{ margin:0 0 6px 0 !important; } /* zbicie marginesu nagłówka */

.form-check{ margin:0 !important; display:flex; align-items:flex-start; min-height:0; }
.form-check-input{ position:static !important; margin:2px 8px 0 0 !important; } /* kropka na linii pierwszego wiersza */
.form-check-label{ position:static !important; padding-left:0 !important; display:inline-flex; align-items:flex-start; gap:8px; }

/* Kolumny z radiami jako flex – radio nie „spada” poniżej etykiety */
.col-sm-4-grid, .col-sm-3-grid, .col-sm-2-grid{ display:flex !important; align-items:flex-start !important; }