/* zmienne kolorów */
:root {
  --blue: #245995;
  --orange: #eb6909;
  --green: #88C047;
  --purple: #7b4f6a;
  --teal: #00BBD4;
  --brown: #7B5446;
  --light-blue: #00ABF4;
  --gray: #A6ACBE;
  --akcent: #E1261D;
  --yellow: #D7A20C;
  --black: #000000;
  --red: #E1261D;
  --dark-red: #B71D1A;
  --akcent2: #000000;
  --akcent3: #262E6A;
  --white: #ffffff;

  --primary-dev: #E1261D;
  --accent-dev: #262E6A;
  --accent-dev-rgb: 38, 46, 106;
  
  /* Domyślny kolor dla progress-circle */
  --progress-circle-color: #F39200;
}

/* klasy kolorów tekstu */
.color-new-blue { color: var(--blue) !important; }
.color-new-yellow { color: var(--yellow) !important; }
.color-new-green { color: var(--green) !important; }
.color-new-teal { color: var(--teal) !important; }
.color-new-orange { color: var(--orange) !important; }
.color-new-brown { color: var(--brown) !important; }
.color-new-light-blue { color: var(--light-blue) !important; }
.color-new-purple { color: var(--purple) !important; }
.color-new-red { color: var(--red) !important; }
.color-new-gray { color: var(--gray) !important; }
.color-new-akcent { color: var(--akcent) !important; }
.color-new-black { color: var(--black) !important; }
.color-new-dark-red { color: var(--dark-red) !important; }
.color-new-akcent2 { color: var(--akcent2) !important; }
.color-new-akcent3 { color: var(--akcent3) !important; }
.color-new-white { color: var(--white) !important; }
.color-new-primary-dev { color: var(--primary-dev) !important; }
.color-new-accent-dev { color: var(--accent-dev) !important; }

/* Klasy dla koloru tła - bg-new-{kolor} */
.bg-new-blue { background-color: var(--blue) !important; }
.bg-new-yellow { background-color: var(--yellow) !important; }
.bg-new-green { background-color: var(--green) !important; }
.bg-new-teal { background-color: var(--teal) !important; }
.bg-new-orange { background-color: var(--orange) !important; }
.bg-new-brown { background-color: var(--brown) !important; }
.bg-new-light-blue { background-color: var(--light-blue) !important; }
.bg-new-purple { background-color: var(--purple) !important; }
.bg-new-red { background-color: var(--red) !important; }
.bg-new-gray { background-color: var(--gray) !important; }
.bg-new-akcent { background-color: var(--akcent) !important; }
.bg-new-black { background-color: var(--black) !important; }
.bg-new-dark-red { background-color: var(--dark-red) !important; }
.bg-new-akcent2 { background-color: var(--akcent2) !important; }
.bg-new-akcent3 { background-color: var(--akcent3) !important; }
.bg-new-white { background-color: var(--white) !important; }
.bg-new-primary-dev { background-color: var(--primary-dev) !important; }
.bg-new-accent-dev { background-color: var(--accent-dev) !important; }

/* Klasy dla koloru tła w ::before - bg-before-new-{kolor} */
.bg-before-new-blue::before { background-color: var(--blue) !important; }
.bg-before-new-yellow::before { background-color: var(--yellow) !important; }
.bg-before-new-green::before { background-color: var(--green) !important; }
.bg-before-new-teal::before { background-color: var(--teal) !important; }
.bg-before-new-orange::before { background-color: var(--orange) !important; }
.bg-before-new-brown::before { background-color: var(--brown) !important; }
.bg-before-new-light-blue::before { background-color: var(--light-blue) !important; }
.bg-before-new-purple::before { background-color: var(--purple) !important; }
.bg-before-new-red::before { background-color: var(--red) !important; }
.bg-before-new-gray::before { background-color: var(--gray) !important; }
.bg-before-new-akcent::before { background-color: var(--akcent) !important; }
.bg-before-new-black::before { background-color: var(--black) !important; }
.bg-before-new-dark-red::before { background-color: var(--dark-red) !important; }
.bg-before-new-akcent2::before { background-color: var(--akcent2) !important; }
.bg-before-new-akcent3::before { background-color: var(--akcent3) !important; }
.bg-before-new-white::before { background-color: var(--white) !important; }
.bg-before-new-primary-dev::before { background-color: var(--primary-dev) !important; }
.bg-before-new-accent-dev::before { background-color: var(--accent-dev) !important; }

/* ============================================
   UNIWERSALNE KLASY DLA ::before (dodatkowe do bg-before-new-{kolor})
   Użycie: .before-new-{kolor} - działa dla WSZYSTKICH elementów
   ============================================ */
.before-new-blue::before { background-color: var(--blue) !important; }
.before-new-yellow::before { background-color: var(--yellow) !important; }
.before-new-green::before { background-color: var(--green) !important; }
.before-new-teal::before { background-color: var(--teal) !important; }
.before-new-orange::before { background-color: var(--orange) !important; }
.before-new-brown::before { background-color: var(--brown) !important; }
.before-new-light-blue::before { background-color: var(--light-blue) !important; }
.before-new-purple::before { background-color: var(--purple) !important; }
.before-new-red::before { background-color: var(--red) !important; }
.before-new-gray::before { background-color: var(--gray) !important; }
.before-new-akcent::before { background-color: var(--akcent) !important; }
.before-new-black::before { background-color: var(--black) !important; }
.before-new-dark-red::before { background-color: var(--dark-red) !important; }
.before-new-akcent2::before { background-color: var(--akcent2) !important; }
.before-new-akcent3::before { background-color: var(--akcent3) !important; }
.before-new-white::before { background-color: var(--white) !important; }
.before-new-primary-dev::before { background-color: var(--primary-dev) !important; }
.before-new-accent-dev::before { background-color: var(--accent-dev) !important; }


/* ============================================
   UNIWERSALNE KLASY DLA PRZYCISKÓW
   Użycie: .btn-color-new-{kolor} - działa dla WSZYSTKICH przycisków (a, button)
   Te klasy działają niezależnie od innych klas przycisku
   ============================================ */

/* przyciski z kolorami */
a.btn-color-new-blue,
a.btn-color-new-blue:active,
a.btn-color-new-blue:visited,
button.btn-color-new-blue,
button.btn-color-new-blue:active,
button.btn-color-new-blue:visited {
  color: #fff !important;
  background: var(--blue) !important;
  border-color: var(--blue) !important;
}
a.btn-color-new-blue:hover,
a.btn-color-new-blue:focus,
button.btn-color-new-blue:hover,
button.btn-color-new-blue:focus {
  opacity: 0.9;
}

a.btn-color-new-yellow,
a.btn-color-new-yellow:active,
a.btn-color-new-yellow:visited,
button.btn-color-new-yellow,
button.btn-color-new-yellow:active,
button.btn-color-new-yellow:visited {
  color: #fff !important;
  background: var(--yellow) !important;
  border-color: var(--yellow) !important;
}
a.btn-color-new-yellow:hover,
a.btn-color-new-yellow:focus,
button.btn-color-new-yellow:hover,
button.btn-color-new-yellow:focus {
  opacity: 0.9;
}

a.btn-color-new-green,
a.btn-color-new-green:active,
a.btn-color-new-green:visited,
button.btn-color-new-green,
button.btn-color-new-green:active,
button.btn-color-new-green:visited {
  color: #fff !important;
  background: var(--green) !important;
  border-color: var(--green) !important;
}
a.btn-color-new-green:hover,
a.btn-color-new-green:focus,
button.btn-color-new-green:hover,
button.btn-color-new-green:focus {
  opacity: 0.9;
}

a.btn-color-new-teal,
a.btn-color-new-teal:active,
a.btn-color-new-teal:visited,
button.btn-color-new-teal,
button.btn-color-new-teal:active,
button.btn-color-new-teal:visited {
  color: #fff !important;
  background: var(--teal) !important;
  border-color: var(--teal) !important;
}
a.btn-color-new-teal:hover,
a.btn-color-new-teal:focus,
button.btn-color-new-teal:hover,
button.btn-color-new-teal:focus {
  opacity: 0.9;
}

a.btn-color-new-orange,
a.btn-color-new-orange:active,
a.btn-color-new-orange:visited,
button.btn-color-new-orange,
button.btn-color-new-orange:active,
button.btn-color-new-orange:visited {
  color: #fff !important;
  background: var(--orange) !important;
  border-color: var(--orange) !important;
}
a.btn-color-new-orange:hover,
a.btn-color-new-orange:focus,
button.btn-color-new-orange:hover,
button.btn-color-new-orange:focus {
  opacity: 0.9;
}

a.btn-color-new-brown,
a.btn-color-new-brown:active,
a.btn-color-new-brown:visited,
button.btn-color-new-brown,
button.btn-color-new-brown:active,
button.btn-color-new-brown:visited {
  color: #fff !important;
  background: var(--brown) !important;
  border-color: var(--brown) !important;
}
a.btn-color-new-brown:hover,
a.btn-color-new-brown:focus,
button.btn-color-new-brown:hover,
button.btn-color-new-brown:focus {
  opacity: 0.9;
}

a.btn-color-new-light-blue,
a.btn-color-new-light-blue:active,
a.btn-color-new-light-blue:visited,
button.btn-color-new-light-blue,
button.btn-color-new-light-blue:active,
button.btn-color-new-light-blue:visited {
  color: #fff !important;
  background: var(--light-blue) !important;
  border-color: var(--light-blue) !important;
}
a.btn-color-new-light-blue:hover,
a.btn-color-new-light-blue:focus,
button.btn-color-new-light-blue:hover,
button.btn-color-new-light-blue:focus {
  opacity: 0.9;
}

a.btn-color-new-purple,
a.btn-color-new-purple:active,
a.btn-color-new-purple:visited,
button.btn-color-new-purple,
button.btn-color-new-purple:active,
button.btn-color-new-purple:visited {
  color: #fff !important;
  background: var(--purple) !important;
  border-color: var(--purple) !important;
}
a.btn-color-new-purple:hover,
a.btn-color-new-purple:focus,
button.btn-color-new-purple:hover,
button.btn-color-new-purple:focus {
  opacity: 0.9;
}

a.btn-color-new-red,
a.btn-color-new-red:active,
a.btn-color-new-red:visited,
button.btn-color-new-red,
button.btn-color-new-red:active,
button.btn-color-new-red:visited {
  color: #fff !important;
  background: var(--red) !important;
  border-color: var(--red) !important;
}
a.btn-color-new-red:hover,
a.btn-color-new-red:focus,
button.btn-color-new-red:hover,
button.btn-color-new-red:focus {
  opacity: 0.9;
}

a.btn-color-new-gray,
a.btn-color-new-gray:active,
a.btn-color-new-gray:visited,
button.btn-color-new-gray,
button.btn-color-new-gray:active,
button.btn-color-new-gray:visited {
  color: #fff !important;
  background: var(--gray) !important;
  border-color: var(--gray) !important;
}
a.btn-color-new-gray:hover,
a.btn-color-new-gray:focus,
button.btn-color-new-gray:hover,
button.btn-color-new-gray:focus {
  opacity: 0.9;
}

a.btn-color-new-akcent,
a.btn-color-new-akcent:active,
a.btn-color-new-akcent:visited,
button.btn-color-new-akcent,
button.btn-color-new-akcent:active,
button.btn-color-new-akcent:visited {
  color: #fff !important;
  background: var(--akcent) !important;
  border-color: var(--akcent) !important;
}
a.btn-color-new-akcent:hover,
a.btn-color-new-akcent:focus,
button.btn-color-new-akcent:hover,
button.btn-color-new-akcent:focus {
  opacity: 0.9;
}

a.btn-color-new-black,
a.btn-color-new-black:active,
a.btn-color-new-black:visited,
button.btn-color-new-black,
button.btn-color-new-black:active,
button.btn-color-new-black:visited {
  color: #fff !important;
  background: var(--black) !important;
  border-color: var(--black) !important;
}
a.btn-color-new-black:hover,
a.btn-color-new-black:focus,
button.btn-color-new-black:hover,
button.btn-color-new-black:focus {
  opacity: 0.9;
}

a.btn-color-new-dark-red,
a.btn-color-new-dark-red:active,
a.btn-color-new-dark-red:visited,
button.btn-color-new-dark-red,
button.btn-color-new-dark-red:active,
button.btn-color-new-dark-red:visited {
  color: #fff !important;
  background: var(--dark-red) !important;
  border-color: var(--dark-red) !important;
}
a.btn-color-new-dark-red:hover,
a.btn-color-new-dark-red:focus,
button.btn-color-new-dark-red:hover,
button.btn-color-new-dark-red:focus {
  opacity: 0.9;
}

a.btn-color-new-akcent2,
a.btn-color-new-akcent2:active,
a.btn-color-new-akcent2:visited,
button.btn-color-new-akcent2,
button.btn-color-new-akcent2:active,
button.btn-color-new-akcent2:visited {
  color: #fff !important;
  background: var(--akcent2) !important;
  border-color: var(--akcent2) !important;
}
a.btn-color-new-akcent2:hover,
a.btn-color-new-akcent2:focus,
button.btn-color-new-akcent2:hover,
button.btn-color-new-akcent2:focus {
  opacity: 0.9;
}

a.btn-color-new-akcent3,
a.btn-color-new-akcent3:active,
a.btn-color-new-akcent3:visited,
button.btn-color-new-akcent3,
button.btn-color-new-akcent3:active,
button.btn-color-new-akcent3:visited {
  color: #fff !important;
  background: var(--akcent3) !important;
  border-color: var(--akcent3) !important;
}
a.btn-color-new-akcent3:hover,
a.btn-color-new-akcent3:focus,
button.btn-color-new-akcent3:hover,
button.btn-color-new-akcent3:focus {
  opacity: 0.9;
}

a.btn-color-new-white,
a.btn-color-new-white:active,
a.btn-color-new-white:visited,
button.btn-color-new-white,
button.btn-color-new-white:active,
button.btn-color-new-white:visited {
  color: var(--white) !important;
  border-color: var(--white) !important;
}
a.btn-color-new-white:hover,
a.btn-color-new-white:focus,
button.btn-color-new-white:hover,
button.btn-color-new-white:focus {
  color: #000 !important;
  background: var(--white) !important;
}

a.btn-color-new-primary-dev,
a.btn-color-new-primary-dev:active,
a.btn-color-new-primary-dev:visited,
button.btn-color-new-primary-dev,
button.btn-color-new-primary-dev:active,
button.btn-color-new-primary-dev:visited {
  color: #fff !important;
  background: var(--primary-dev) !important;
  border-color: var(--primary-dev) !important;
}
a.btn-color-new-primary-dev:hover,
a.btn-color-new-primary-dev:focus,
button.btn-color-new-primary-dev:hover,
button.btn-color-new-primary-dev:focus {
  opacity: 0.9;
}

a.btn-color-new-accent-dev,
a.btn-color-new-accent-dev:active,
a.btn-color-new-accent-dev:visited,
button.btn-color-new-accent-dev,
button.btn-color-new-accent-dev:active,
button.btn-color-new-accent-dev:visited {
  color: #fff !important;
  background: var(--accent-dev) !important;
  border-color: var(--accent-dev) !important;
}
a.btn-color-new-accent-dev:hover,
a.btn-color-new-accent-dev:focus,
button.btn-color-new-accent-dev:hover,
button.btn-color-new-accent-dev:focus {
  opacity: 0.9;
}

/* ============================================
   UNIWERSALNE KLASY DLA PRZYCISKÓW OUTLINE
   Użycie: .btn-color-outline-new-{kolor} - działa dla WSZYSTKICH przycisków (a, button)
   ============================================ */
a.btn-color-outline-new-blue,
a.btn-color-outline-new-blue:active,
a.btn-color-outline-new-blue:visited,
button.btn-color-outline-new-blue,
button.btn-color-outline-new-blue:active,
button.btn-color-outline-new-blue:visited {
  color: #fff !important;
  background: transparent !important;
  border-color: var(--blue) !important;
}
a.btn-color-outline-new-blue:hover,
a.btn-color-outline-new-blue:focus,
button.btn-color-outline-new-blue:hover,
button.btn-color-outline-new-blue:focus {
  color: #fff !important;
  background: var(--blue) !important;
}

a.btn-color-outline-new-yellow,
a.btn-color-outline-new-yellow:active,
a.btn-color-outline-new-yellow:visited,
button.btn-color-outline-new-yellow,
button.btn-color-outline-new-yellow:active,
button.btn-color-outline-new-yellow:visited {
  color: #fff !important;
  background: transparent !important;
  border-color: var(--yellow) !important;
}
a.btn-color-outline-new-yellow:hover,
a.btn-color-outline-new-yellow:focus,
button.btn-color-outline-new-yellow:hover,
button.btn-color-outline-new-yellow:focus {
  color: #fff !important;
  background: var(--yellow) !important;
}

a.btn-color-outline-new-green,
a.btn-color-outline-new-green:active,
a.btn-color-outline-new-green:visited,
button.btn-color-outline-new-green,
button.btn-color-outline-new-green:active,
button.btn-color-outline-new-green:visited {
  color: #fff !important;
  background: transparent !important;
  border-color: var(--green) !important;
}
a.btn-color-outline-new-green:hover,
a.btn-color-outline-new-green:focus,
button.btn-color-outline-new-green:hover,
button.btn-color-outline-new-green:focus {
  color: #fff !important;
  background: var(--green) !important;
}

a.btn-color-outline-new-teal,
a.btn-color-outline-new-teal:active,
a.btn-color-outline-new-teal:visited,
button.btn-color-outline-new-teal,
button.btn-color-outline-new-teal:active,
button.btn-color-outline-new-teal:visited {
  color: var(--teal) !important;
  background: transparent !important;
  border-color: var(--teal) !important;
}
a.btn-color-outline-new-teal:hover,
a.btn-color-outline-new-teal:focus,
button.btn-color-outline-new-teal:hover,
button.btn-color-outline-new-teal:focus {
  color: #fff !important;
  background: var(--teal) !important;
}

a.btn-color-outline-new-orange,
a.btn-color-outline-new-orange:active,
a.btn-color-outline-new-orange:visited,
button.btn-color-outline-new-orange,
button.btn-color-outline-new-orange:active,
button.btn-color-outline-new-orange:visited {
  color: #fff !important;
  background: transparent !important;
  border-color: var(--orange) !important;
}
a.btn-color-outline-new-orange:hover,
a.btn-color-outline-new-orange:focus,
button.btn-color-outline-new-orange:hover,
button.btn-color-outline-new-orange:focus {
  color: #fff !important;
  background: var(--orange) !important;
}

a.btn-color-outline-new-brown,
a.btn-color-outline-new-brown:active,
a.btn-color-outline-new-brown:visited,
button.btn-color-outline-new-brown,
button.btn-color-outline-new-brown:active,
button.btn-color-outline-new-brown:visited {
  color: #fff !important;
  border-color: var(--brown) !important;
}
a.btn-color-outline-new-brown:hover,
a.btn-color-outline-new-brown:focus,
button.btn-color-outline-new-brown:hover,
button.btn-color-outline-new-brown:focus {
  color: #fff !important;
  background: var(--brown) !important;
}

a.btn-color-outline-new-light-blue,
a.btn-color-outline-new-light-blue:active,
a.btn-color-outline-new-light-blue:visited,
button.btn-color-outline-new-light-blue,
button.btn-color-outline-new-light-blue:active,
button.btn-color-outline-new-light-blue:visited {
  color: #fff !important;
  border-color: var(--light-blue) !important;
}
a.btn-color-outline-new-light-blue:hover,
a.btn-color-outline-new-light-blue:focus,
button.btn-color-outline-new-light-blue:hover,
button.btn-color-outline-new-light-blue:focus {
  color: #fff !important;
  background: var(--light-blue) !important;
}

a.btn-color-outline-new-purple,
a.btn-color-outline-new-purple:active,
a.btn-color-outline-new-purple:visited,
button.btn-color-outline-new-purple,
button.btn-color-outline-new-purple:active,
button.btn-color-outline-new-purple:visited {
  color: #fff !important;
  border-color: var(--purple) !important;
}
a.btn-color-outline-new-purple:hover,
a.btn-color-outline-new-purple:focus,
button.btn-color-outline-new-purple:hover,
button.btn-color-outline-new-purple:focus {
  color: #fff !important;
  background: var(--purple) !important;
}

a.btn-color-outline-new-red,
a.btn-color-outline-new-red:active,
a.btn-color-outline-new-red:visited,
button.btn-color-outline-new-red,
button.btn-color-outline-new-red:active,
button.btn-color-outline-new-red:visited {
  color: #fff !important;
  border-color: var(--red) !important;
}
a.btn-color-outline-new-red:hover,
a.btn-color-outline-new-red:focus,
button.btn-color-outline-new-red:hover,
button.btn-color-outline-new-red:focus {
  color: #fff !important;
  background: var(--red) !important;
}

a.btn-color-outline-new-gray,
a.btn-color-outline-new-gray:active,
a.btn-color-outline-new-gray:visited,
button.btn-color-outline-new-gray,
button.btn-color-outline-new-gray:active,
button.btn-color-outline-new-gray:visited {
  color: #fff !important;
  background: transparent !important;
  border-color: var(--gray) !important;
}
a.btn-color-outline-new-gray:hover,
a.btn-color-outline-new-gray:focus,
button.btn-color-outline-new-gray:hover,
button.btn-color-outline-new-gray:focus {
  color: #fff !important;
  background: var(--gray) !important;
}

a.btn-color-outline-new-akcent,
a.btn-color-outline-new-akcent:active,
a.btn-color-outline-new-akcent:visited,
button.btn-color-outline-new-akcent,
button.btn-color-outline-new-akcent:active,
button.btn-color-outline-new-akcent:visited {
  color: #fff !important;
  background: transparent !important;
  border-color: var(--akcent) !important;
}
a.btn-color-outline-new-akcent:hover,
a.btn-color-outline-new-akcent:focus,
button.btn-color-outline-new-akcent:hover,
button.btn-color-outline-new-akcent:focus {
  color: #fff !important;
  background: var(--akcent) !important;
}

a.btn-color-outline-new-black,
a.btn-color-outline-new-black:active,
a.btn-color-outline-new-black:visited,
button.btn-color-outline-new-black,
button.btn-color-outline-new-black:active,
button.btn-color-outline-new-black:visited {
  color: #fff !important;
  background: transparent !important;
  border-color: var(--black) !important;
}
a.btn-color-outline-new-black:hover,
a.btn-color-outline-new-black:focus,
button.btn-color-outline-new-black:hover,
button.btn-color-outline-new-black:focus {
  color: #fff !important;
  background: var(--black) !important;
}

a.btn-color-outline-new-dark-red,
a.btn-color-outline-new-dark-red:active,
a.btn-color-outline-new-dark-red:visited,
button.btn-color-outline-new-dark-red,
button.btn-color-outline-new-dark-red:active,
button.btn-color-outline-new-dark-red:visited {
  color: #fff !important;
  background: transparent !important;
  border-color: var(--dark-red) !important;
}
a.btn-color-outline-new-dark-red:hover,
a.btn-color-outline-new-dark-red:focus,
button.btn-color-outline-new-dark-red:hover,
button.btn-color-outline-new-dark-red:focus {
  color: #fff !important;
  background: var(--dark-red) !important;
}

a.btn-color-outline-new-akcent2,
a.btn-color-outline-new-akcent2:active,
a.btn-color-outline-new-akcent2:visited,
button.btn-color-outline-new-akcent2,
button.btn-color-outline-new-akcent2:active,
button.btn-color-outline-new-akcent2:visited {
  color: #fff !important;
  background: transparent !important;
  border-color: var(--akcent2) !important;
}
a.btn-color-outline-new-akcent2:hover,
a.btn-color-outline-new-akcent2:focus,
button.btn-color-outline-new-akcent2:hover,
button.btn-color-outline-new-akcent2:focus {
  color: #fff !important;
  background: var(--akcent2) !important;
}

a.btn-color-outline-new-akcent3,
a.btn-color-outline-new-akcent3:active,
a.btn-color-outline-new-akcent3:visited,
button.btn-color-outline-new-akcent3,
button.btn-color-outline-new-akcent3:active,
button.btn-color-outline-new-akcent3:visited {
  color: #fff !important;
  background: transparent !important;
  border-color: var(--akcent3) !important;
}
a.btn-color-outline-new-akcent3:hover,
a.btn-color-outline-new-akcent3:focus,
button.btn-color-outline-new-akcent3:hover,
button.btn-color-outline-new-akcent3:focus {
  color: #fff !important;
  background: var(--akcent3) !important;
}

a.btn-color-outline-new-white,
a.btn-color-outline-new-white:active,
a.btn-color-outline-new-white:visited,
button.btn-color-outline-new-white,
button.btn-color-outline-new-white:active,
button.btn-color-outline-new-white:visited {
  color: var(--white) !important;
  background: transparent !important;
  border-color: var(--white) !important;
}
a.btn-color-outline-new-white:hover,
a.btn-color-outline-new-white:focus,
button.btn-color-outline-new-white:hover,
button.btn-color-outline-new-white:focus {
  color: #000 !important;
  background: var(--white) !important;
}

a.btn-color-outline-new-primary-dev,
a.btn-color-outline-new-primary-dev:active,
a.btn-color-outline-new-primary-dev:visited,
button.btn-color-outline-new-primary-dev,
button.btn-color-outline-new-primary-dev:active,
button.btn-color-outline-new-primary-dev:visited {
  color: var(--primary-dev) !important;
  background: transparent !important;
  border-color: var(--primary-dev) !important;
}
a.btn-color-outline-new-primary-dev:hover,
a.btn-color-outline-new-primary-dev:focus,
button.btn-color-outline-new-primary-dev:hover,
button.btn-color-outline-new-primary-dev:focus {
  color: #fff !important;
  background: var(--primary-dev) !important;
}

a.btn-color-outline-new-accent-dev,
a.btn-color-outline-new-accent-dev:active,
a.btn-color-outline-new-accent-dev:visited,
button.btn-color-outline-new-accent-dev,
button.btn-color-outline-new-accent-dev:active,
button.btn-color-outline-new-accent-dev:visited {
  color: var(--accent-dev) !important;
  background: transparent !important;
  border-color: var(--accent-dev) !important;
}
a.btn-color-outline-new-accent-dev:hover,
a.btn-color-outline-new-accent-dev:focus,
button.btn-color-outline-new-accent-dev:hover,
button.btn-color-outline-new-accent-dev:focus {
  color: #fff !important;
  background: var(--accent-dev) !important;
}

/* ============================================
   SPECYFICZNE KLASY DLA PRZYCISKÓW (kompatybilność wsteczna)
   ============================================ */
a.btn-zad-ins.btn-color-outline-new-blue,
a.btn-zad-ins.btn-color-outline-new-blue:active,
a.btn-zad-ins.btn-color-outline-new-blue:visited {
  color: var(--blue) !important;
  border-color: var(--blue) !important;
}
a.btn-zad-ins.btn-color-outline-new-blue:hover{
  color: #fff !important;
  background: var(--blue) !important;
}
a.btn-zad-ins.btn-color-new-blue:hover,
a.btn-zad-ins.btn-color-new-blue:focus {
  color: #fff !important;
  background: var(--blue) !important;
}

a.btn-zad-ins.btn-color-outline-new-yellow,
a.btn-zad-ins.btn-color-outline-new-yellow:active,
a.btn-zad-ins.btn-color-outline-new-yellow:visited {
  color: var(--yellow) !important;
  border-color: var(--yellow) !important;
}
a.btn-zad-ins.btn-color-new-yellow:hover,
a.btn-zad-ins.btn-color-new-yellow:focus {
  color: #fff !important;
  background: var(--yellow) !important;
}

a.btn-zad-ins.btn-color-outline-new-green,
a.btn-zad-ins.btn-color-outline-new-green:active,
a.btn-zad-ins.btn-color-outline-new-green:visited {
  color: var(--green) !important;
  border-color: var(--green) !important;
}
a.btn-zad-ins.btn-color-new-green:hover,
a.btn-zad-ins.btn-color-new-green:focus {
  color: #fff !important;
  background: var(--green) !important;
}

a.btn-zad-ins.btn-color-outline-new-teal,
a.btn-zad-ins.btn-color-outline-new-teal:active,
a.btn-zad-ins.btn-color-outline-new-teal:visited {
  color: var(--teal) !important;
  border-color: var(--teal) !important;
}
a.btn-zad-ins.btn-color-new-teal:hover,
a.btn-zad-ins.btn-color-new-teal:focus {
  color: #fff !important;
  background: var(--teal) !important;
}

a.btn-zad-ins.btn-color-outline-new-orange,
a.btn-zad-ins.btn-color-outline-new-orange:active,
a.btn-zad-ins.btn-color-outline-new-orange:visited {
  color: var(--orange) !important;
  border-color: var(--orange) !important;
}
a.btn-zad-ins.btn-color-new-orange:hover,
a.btn-zad-ins.btn-color-new-orange:focus {
  color: #fff !important;
  background: var(--orange) !important;
}

a.btn-zad-ins.btn-color-outline-new-brown,
a.btn-zad-ins.btn-color-outline-new-brown:active,
a.btn-zad-ins.btn-color-outline-new-brown:visited {
  color: var(--brown) !important;
  border-color: var(--brown) !important;
}
a.btn-zad-ins.btn-color-new-brown:hover,
a.btn-zad-ins.btn-color-new-brown:focus {
  color: #fff !important;
  background: var(--brown) !important;
}

a.btn-zad-ins.btn-color-outline-new-light-blue,
a.btn-zad-ins.btn-color-outline-new-light-blue:active,
a.btn-zad-ins.btn-color-outline-new-light-blue:visited {
  color: var(--light-blue) !important;
  border-color: var(--light-blue) !important;
}
a.btn-zad-ins.btn-color-outline-new-light-blue:hover{
  color: #fff !important;
  background: var(--light-blue) !important;
}
a.btn-zad-ins.btn-color-new-light-blue:hover,
a.btn-zad-ins.btn-color-new-light-blue:focus {
  color: #fff !important;
  background: var(--light-blue) !important;
}

a.btn-zad-ins.btn-color-outline-new-purple,
a.btn-zad-ins.btn-color-outline-new-purple:active,
a.btn-zad-ins.btn-color-outline-new-purple:visited {
  color: var(--purple) !important;
  border-color: var(--purple) !important;
}
a.btn-zad-ins.btn-color-new-purple:hover,
a.btn-zad-ins.btn-color-new-purple:focus {
  color: #fff !important;
  background: var(--purple) !important;
}

a.btn-zad-ins.btn-color-outline-new-red,
a.btn-zad-ins.btn-color-outline-new-red:active,
a.btn-zad-ins.btn-color-outline-new-red:visited {
  color: var(--red) !important;
  border-color: var(--red) !important;
}
a.btn-zad-ins.btn-color-new-red:hover,
a.btn-zad-ins.btn-color-new-red:focus {
  color: #fff !important;
  background: var(--red) !important;
}

a.btn-zad-ins.btn-color-outline-new-gray,
a.btn-zad-ins.btn-color-outline-new-gray:active,
a.btn-zad-ins.btn-color-outline-new-gray:visited {
  color: var(--gray) !important;
  border-color: var(--gray) !important;
}
a.btn-zad-ins.btn-color-new-gray:hover,
a.btn-zad-ins.btn-color-new-gray:focus {
  color: #fff !important;
  background: var(--gray) !important;
}

a.btn-zad-ins.btn-color-outline-new-akcent,
a.btn-zad-ins.btn-color-outline-new-akcent:active,
a.btn-zad-ins.btn-color-outline-new-akcent:visited {
  color: var(--akcent) !important;
  border-color: var(--akcent) !important;
}
a.btn-zad-ins.btn-color-new-akcent:hover,
a.btn-zad-ins.btn-color-new-akcent:focus {
  color: #fff !important;
  background: var(--akcent) !important;
}

a.btn-zad-ins.btn-color-outline-new-black,
a.btn-zad-ins.btn-color-outline-new-black:active,
a.btn-zad-ins.btn-color-outline-new-black:visited {
  color: var(--black) !important;
  border-color: var(--black) !important;
}
a.btn-zad-ins.btn-color-new-black:hover,
a.btn-zad-ins.btn-color-new-black:focus {
  color: #fff !important;
  background: var(--black) !important;
}

a.btn-zad-ins.btn-color-outline-new-dark-red,
a.btn-zad-ins.btn-color-outline-new-dark-red:active,
a.btn-zad-ins.btn-color-outline-new-dark-red:visited {
  color: var(--dark-red) !important;
  border-color: var(--dark-red) !important;
}
a.btn-zad-ins.btn-color-new-dark-red:hover,
a.btn-zad-ins.btn-color-new-dark-red:focus {
  color: #fff !important;
  background: var(--dark-red) !important;
}

a.btn-zad-ins.btn-color-outline-new-akcent2,
a.btn-zad-ins.btn-color-outline-new-akcent2:active,
a.btn-zad-ins.btn-color-outline-new-akcent2:visited {
  color: var(--akcent2) !important;
  border-color: var(--akcent2) !important;
}
a.btn-zad-ins.btn-color-new-akcent2:hover,
a.btn-zad-ins.btn-color-new-akcent2:focus {
  color: #fff !important;
  background: var(--akcent2) !important;
}

a.btn-zad-ins.btn-color-outline-new-akcent3,
a.btn-zad-ins.btn-color-outline-new-akcent3:active,
a.btn-zad-ins.btn-color-outline-new-akcent3:visited {
  color: var(--akcent3) !important;
  border-color: var(--akcent3) !important;
}
a.btn-zad-ins.btn-color-new-akcent3:hover,
a.btn-zad-ins.btn-color-new-akcent3:focus {
  color: #fff !important;
  background: var(--akcent3) !important;
}

a.btn-zad-ins.btn-color-outline-new-white,
a.btn-zad-ins.btn-color-outline-new-white:active,
a.btn-zad-ins.btn-color-outline-new-white:visited {
  color: var(--white) !important;
  border-color: var(--white) !important;
}
a.btn-zad-ins.btn-color-new-white:hover,
a.btn-zad-ins.btn-color-new-white:focus {
  color: #000 !important;
  background: var(--white) !important;
}

a.btn-zad-ins.btn-color-outline-new-primary-dev,
a.btn-zad-ins.btn-color-outline-new-primary-dev:active,
a.btn-zad-ins.btn-color-outline-new-primary-dev:visited {
  color: var(--primary-dev) !important;
  border-color: var(--primary-dev) !important;
}
a.btn-zad-ins.btn-color-new-primary-dev:hover,
a.btn-zad-ins.btn-color-new-primary-dev:focus {
  color: #fff !important;
  background: var(--primary-dev) !important;
}

a.btn-zad-ins.btn-color-outline-new-accent-dev,
a.btn-zad-ins.btn-color-outline-new-accent-dev:active,
a.btn-zad-ins.btn-color-outline-new-accent-dev:visited {
  color: var(--accent-dev) !important;
  border-color: var(--accent-dev) !important;
}
a.btn-zad-ins.btn-color-new-accent-dev:hover,
a.btn-zad-ins.btn-color-new-accent-dev:focus {
  color: #fff !important;
  background: var(--accent-dev) !important;
}

/* Klasy dla btn-zad-prem (premiera) */
a.btn-zad-prem.btn-color-new-blue,
a.btn-zad-prem.btn-color-new-blue:active,
a.btn-zad-prem.btn-color-new-blue:visited {
  color: var(--blue) !important;
  border-color: var(--blue) !important;
}
a.btn-zad-prem.btn-color-new-blue:hover,
a.btn-zad-prem.btn-color-new-blue:focus {
  color: var(--blue) !important;
  background: transparent !important;
}

a.btn-zad-prem.btn-color-new-yellow,
a.btn-zad-prem.btn-color-new-yellow:active,
a.btn-zad-prem.btn-color-new-yellow:visited {
  color: var(--yellow) !important;
  border-color: var(--yellow) !important;
}
a.btn-zad-prem.btn-color-new-yellow:hover,
a.btn-zad-prem.btn-color-new-yellow:focus {
  color: var(--yellow) !important;
  background: transparent !important;
}

a.btn-zad-prem.btn-color-new-green,
a.btn-zad-prem.btn-color-new-green:active,
a.btn-zad-prem.btn-color-new-green:visited {
  color: var(--green) !important;
  border-color: var(--green) !important;
}
a.btn-zad-prem.btn-color-new-green:hover,
a.btn-zad-prem.btn-color-new-green:focus {
  color: var(--green) !important;
  background: transparent !important;
}

a.btn-zad-prem.btn-color-new-teal,
a.btn-zad-prem.btn-color-new-teal:active,
a.btn-zad-prem.btn-color-new-teal:visited {
  color: var(--teal) !important;
  border-color: var(--teal) !important;
}
a.btn-zad-prem.btn-color-new-teal:hover,
a.btn-zad-prem.btn-color-new-teal:focus {
  color: var(--teal) !important;
  background: transparent !important;
}

a.btn-zad-prem.btn-color-new-orange,
a.btn-zad-prem.btn-color-new-orange:active,
a.btn-zad-prem.btn-color-new-orange:visited {
  color: var(--orange) !important;
  border-color: var(--orange) !important;
}
a.btn-zad-prem.btn-color-new-orange:hover,
a.btn-zad-prem.btn-color-new-orange:focus {
  color: var(--orange) !important;
  background: transparent !important;
}

a.btn-zad-prem.btn-color-new-brown,
a.btn-zad-prem.btn-color-new-brown:active,
a.btn-zad-prem.btn-color-new-brown:visited {
  color: var(--brown) !important;
  border-color: var(--brown) !important;
}
a.btn-zad-prem.btn-color-new-brown:hover,
a.btn-zad-prem.btn-color-new-brown:focus {
  color: var(--brown) !important;
  background: transparent !important;
}

a.btn-zad-prem.btn-color-new-light-blue,
a.btn-zad-prem.btn-color-new-light-blue:active,
a.btn-zad-prem.btn-color-new-light-blue:visited {
  color: var(--light-blue) !important;
  border-color: var(--light-blue) !important;
}
a.btn-zad-prem.btn-color-new-light-blue:hover,
a.btn-zad-prem.btn-color-new-light-blue:focus {
  color: var(--light-blue) !important;
  background: transparent !important;
}

a.btn-zad-prem.btn-color-new-purple,
a.btn-zad-prem.btn-color-new-purple:active,
a.btn-zad-prem.btn-color-new-purple:visited {
  color: var(--purple) !important;
  border-color: var(--purple) !important;
}
a.btn-zad-prem.btn-color-new-purple:hover,
a.btn-zad-prem.btn-color-new-purple:focus {
  color: var(--purple) !important;
  background: transparent !important;
}

a.btn-zad-prem.btn-color-new-red,
a.btn-zad-prem.btn-color-new-red:active,
a.btn-zad-prem.btn-color-new-red:visited {
  color: var(--red) !important;
  border-color: var(--red) !important;
}
a.btn-zad-prem.btn-color-new-red:hover,
a.btn-zad-prem.btn-color-new-red:focus {
  color: var(--red) !important;
  background: transparent !important;
}

a.btn-zad-prem.btn-color-new-gray,
a.btn-zad-prem.btn-color-new-gray:active,
a.btn-zad-prem.btn-color-new-gray:visited {
  color: var(--gray) !important;
  border-color: var(--gray) !important;
}
a.btn-zad-prem.btn-color-new-gray:hover,
a.btn-zad-prem.btn-color-new-gray:focus {
  color: var(--gray) !important;
  background: transparent !important;
}

a.btn-zad-prem.btn-color-new-akcent,
a.btn-zad-prem.btn-color-new-akcent:active,
a.btn-zad-prem.btn-color-new-akcent:visited {
  color: var(--akcent) !important;
  border-color: var(--akcent) !important;
}
a.btn-zad-prem.btn-color-new-akcent:hover,
a.btn-zad-prem.btn-color-new-akcent:focus {
  color: var(--akcent) !important;
  background: transparent !important;
}

a.btn-zad-prem.btn-color-new-black,
a.btn-zad-prem.btn-color-new-black:active,
a.btn-zad-prem.btn-color-new-black:visited {
  color: var(--black) !important;
  border-color: var(--black) !important;
}
a.btn-zad-prem.btn-color-new-black:hover,
a.btn-zad-prem.btn-color-new-black:focus {
  color: var(--black) !important;
  background: transparent !important;
}

a.btn-zad-prem.btn-color-new-dark-red,
a.btn-zad-prem.btn-color-new-dark-red:active,
a.btn-zad-prem.btn-color-new-dark-red:visited {
  color: var(--dark-red) !important;
  border-color: var(--dark-red) !important;
}
a.btn-zad-prem.btn-color-new-dark-red:hover,
a.btn-zad-prem.btn-color-new-dark-red:focus {
  color: var(--dark-red) !important;
  background: transparent !important;
}

a.btn-zad-prem.btn-color-new-akcent2,
a.btn-zad-prem.btn-color-new-akcent2:active,
a.btn-zad-prem.btn-color-new-akcent2:visited {
  color: var(--akcent2) !important;
  border-color: var(--akcent2) !important;
}
a.btn-zad-prem.btn-color-new-akcent2:hover,
a.btn-zad-prem.btn-color-new-akcent2:focus {
  color: var(--akcent2) !important;
  background: transparent !important;
}

a.btn-zad-prem.btn-color-new-akcent3,
a.btn-zad-prem.btn-color-new-akcent3:active,
a.btn-zad-prem.btn-color-new-akcent3:visited {
  color: var(--akcent3) !important;
  border-color: var(--akcent3) !important;
}
a.btn-zad-prem.btn-color-new-akcent3:hover,
a.btn-zad-prem.btn-color-new-akcent3:focus {
  color: var(--akcent3) !important;
  background: transparent !important;
}

a.btn-zad-prem.btn-color-new-white,
a.btn-zad-prem.btn-color-new-white:active,
a.btn-zad-prem.btn-color-new-white:visited {
  color: var(--white) !important;
  border-color: var(--white) !important;
}
a.btn-zad-prem.btn-color-new-white:hover,
a.btn-zad-prem.btn-color-new-white:focus {
  color: var(--white) !important;
  background: transparent !important;
}

a.btn-zad-prem.btn-color-new-primary-dev,
a.btn-zad-prem.btn-color-new-primary-dev:active,
a.btn-zad-prem.btn-color-new-primary-dev:visited {
  color: var(--primary-dev) !important;
  border-color: var(--primary-dev) !important;
}
a.btn-zad-prem.btn-color-new-primary-dev:hover,
a.btn-zad-prem.btn-color-new-primary-dev:focus {
  color: var(--primary-dev) !important;
  background: transparent !important;
}

a.btn-zad-prem.btn-color-new-accent-dev,
a.btn-zad-prem.btn-color-new-accent-dev:active,
a.btn-zad-prem.btn-color-new-accent-dev:visited {
  color: var(--accent-dev) !important;
  border-color: var(--accent-dev) !important;
}
a.btn-zad-prem.btn-color-new-accent-dev:hover,
a.btn-zad-prem.btn-color-new-accent-dev:focus {
  color: var(--accent-dev) !important;
  background: transparent !important;
}

/* Dodatkowe selektory dla przypadku gdy mamy obie klasy btn-zad-ins i btn-zad-prem razem */
a.btn-zad-ins.btn-zad-prem.btn-color-new-blue,
a.btn-zad-ins.btn-zad-prem.btn-color-new-blue:active,
a.btn-zad-ins.btn-zad-prem.btn-color-new-blue:visited {
  color: var(--blue) !important;
  border-color: var(--blue) !important;
}
a.btn-zad-ins.btn-zad-prem.btn-color-new-blue:hover,
a.btn-zad-ins.btn-zad-prem.btn-color-new-blue:focus {
  color: var(--blue) !important;
  background: transparent !important;
}

a.btn-zad-ins.btn-zad-prem.btn-color-new-yellow,
a.btn-zad-ins.btn-zad-prem.btn-color-new-yellow:active,
a.btn-zad-ins.btn-zad-prem.btn-color-new-yellow:visited {
  color: var(--yellow) !important;
  border-color: var(--yellow) !important;
}
a.btn-zad-ins.btn-zad-prem.btn-color-new-yellow:hover,
a.btn-zad-ins.btn-zad-prem.btn-color-new-yellow:focus {
  color: var(--yellow) !important;
  background: transparent !important;
}

a.btn-zad-ins.btn-zad-prem.btn-color-new-green,
a.btn-zad-ins.btn-zad-prem.btn-color-new-green:active,
a.btn-zad-ins.btn-zad-prem.btn-color-new-green:visited {
  color: var(--green) !important;
  border-color: var(--green) !important;
}
a.btn-zad-ins.btn-zad-prem.btn-color-new-green:hover,
a.btn-zad-ins.btn-zad-prem.btn-color-new-green:focus {
  color: var(--green) !important;
  background: transparent !important;
}

a.btn-zad-ins.btn-zad-prem.btn-color-new-teal,
a.btn-zad-ins.btn-zad-prem.btn-color-new-teal:active,
a.btn-zad-ins.btn-zad-prem.btn-color-new-teal:visited {
  color: var(--teal) !important;
  border-color: var(--teal) !important;
}
a.btn-zad-ins.btn-zad-prem.btn-color-new-teal:hover,
a.btn-zad-ins.btn-zad-prem.btn-color-new-teal:focus {
  color: var(--teal) !important;
  background: transparent !important;
}

a.btn-zad-ins.btn-zad-prem.btn-color-new-orange,
a.btn-zad-ins.btn-zad-prem.btn-color-new-orange:active,
a.btn-zad-ins.btn-zad-prem.btn-color-new-orange:visited {
  color: var(--orange) !important;
  border-color: var(--orange) !important;
}
a.btn-zad-ins.btn-zad-prem.btn-color-new-orange:hover,
a.btn-zad-ins.btn-zad-prem.btn-color-new-orange:focus {
  color: var(--orange) !important;
  background: transparent !important;
}

a.btn-zad-ins.btn-zad-prem.btn-color-new-brown,
a.btn-zad-ins.btn-zad-prem.btn-color-new-brown:active,
a.btn-zad-ins.btn-zad-prem.btn-color-new-brown:visited {
  color: var(--brown) !important;
  border-color: var(--brown) !important;
}
a.btn-zad-ins.btn-zad-prem.btn-color-new-brown:hover,
a.btn-zad-ins.btn-zad-prem.btn-color-new-brown:focus {
  color: var(--brown) !important;
  background: transparent !important;
}

a.btn-zad-ins.btn-zad-prem.btn-color-new-light-blue,
a.btn-zad-ins.btn-zad-prem.btn-color-new-light-blue:active,
a.btn-zad-ins.btn-zad-prem.btn-color-new-light-blue:visited {
  color: var(--light-blue) !important;
  border-color: var(--light-blue) !important;
}
a.btn-zad-ins.btn-zad-prem.btn-color-new-light-blue:hover,
a.btn-zad-ins.btn-zad-prem.btn-color-new-light-blue:focus {
  color: var(--light-blue) !important;
  background: transparent !important;
}

a.btn-zad-ins.btn-zad-prem.btn-color-new-purple,
a.btn-zad-ins.btn-zad-prem.btn-color-new-purple:active,
a.btn-zad-ins.btn-zad-prem.btn-color-new-purple:visited {
  color: var(--purple) !important;
  border-color: var(--purple) !important;
}
a.btn-zad-ins.btn-zad-prem.btn-color-new-purple:hover,
a.btn-zad-ins.btn-zad-prem.btn-color-new-purple:focus {
  color: var(--purple) !important;
  background: transparent !important;
}

a.btn-zad-ins.btn-zad-prem.btn-color-new-red,
a.btn-zad-ins.btn-zad-prem.btn-color-new-red:active,
a.btn-zad-ins.btn-zad-prem.btn-color-new-red:visited {
  color: var(--red) !important;
  border-color: var(--red) !important;
}
a.btn-zad-ins.btn-zad-prem.btn-color-new-red:hover,
a.btn-zad-ins.btn-zad-prem.btn-color-new-red:focus {
  color: var(--red) !important;
  background: transparent !important;
}

a.btn-zad-ins.btn-zad-prem.btn-color-new-gray,
a.btn-zad-ins.btn-zad-prem.btn-color-new-gray:active,
a.btn-zad-ins.btn-zad-prem.btn-color-new-gray:visited {
  color: var(--gray) !important;
  border-color: var(--gray) !important;
}
a.btn-zad-ins.btn-zad-prem.btn-color-new-gray:hover,
a.btn-zad-ins.btn-zad-prem.btn-color-new-gray:focus {
  color: var(--gray) !important;
  background: transparent !important;
}

a.btn-zad-ins.btn-zad-prem.btn-color-new-akcent,
a.btn-zad-ins.btn-zad-prem.btn-color-new-akcent:active,
a.btn-zad-ins.btn-zad-prem.btn-color-new-akcent:visited {
  color: var(--akcent) !important;
  border-color: var(--akcent) !important;
}
a.btn-zad-ins.btn-zad-prem.btn-color-new-akcent:hover,
a.btn-zad-ins.btn-zad-prem.btn-color-new-akcent:focus {
  color: var(--akcent) !important;
  background: transparent !important;
}

a.btn-zad-ins.btn-zad-prem.btn-color-new-black,
a.btn-zad-ins.btn-zad-prem.btn-color-new-black:active,
a.btn-zad-ins.btn-zad-prem.btn-color-new-black:visited {
  color: var(--black) !important;
  border-color: var(--black) !important;
}
a.btn-zad-ins.btn-zad-prem.btn-color-new-black:hover,
a.btn-zad-ins.btn-zad-prem.btn-color-new-black:focus {
  color: var(--black) !important;
  background: transparent !important;
}

a.btn-zad-ins.btn-zad-prem.btn-color-new-dark-red,
a.btn-zad-ins.btn-zad-prem.btn-color-new-dark-red:active,
a.btn-zad-ins.btn-zad-prem.btn-color-new-dark-red:visited {
  color: var(--dark-red) !important;
  border-color: var(--dark-red) !important;
}
a.btn-zad-ins.btn-zad-prem.btn-color-new-dark-red:hover,
a.btn-zad-ins.btn-zad-prem.btn-color-new-dark-red:focus {
  color: var(--dark-red) !important;
  background: transparent !important;
}

a.btn-zad-ins.btn-zad-prem.btn-color-new-akcent2,
a.btn-zad-ins.btn-zad-prem.btn-color-new-akcent2:active,
a.btn-zad-ins.btn-zad-prem.btn-color-new-akcent2:visited {
  color: var(--akcent2) !important;
  border-color: var(--akcent2) !important;
}
a.btn-zad-ins.btn-zad-prem.btn-color-new-akcent2:hover,
a.btn-zad-ins.btn-zad-prem.btn-color-new-akcent2:focus {
  color: var(--akcent2) !important;
  background: transparent !important;
}

a.btn-zad-ins.btn-zad-prem.btn-color-new-akcent3,
a.btn-zad-ins.btn-zad-prem.btn-color-new-akcent3:active,
a.btn-zad-ins.btn-zad-prem.btn-color-new-akcent3:visited {
  color: var(--akcent3) !important;
  border-color: var(--akcent3) !important;
}
a.btn-zad-ins.btn-zad-prem.btn-color-new-akcent3:hover,
a.btn-zad-ins.btn-zad-prem.btn-color-new-akcent3:focus {
  color: var(--akcent3) !important;
  background: transparent !important;
}

a.btn-zad-ins.btn-zad-prem.btn-color-new-white,
a.btn-zad-ins.btn-zad-prem.btn-color-new-white:active,
a.btn-zad-ins.btn-zad-prem.btn-color-new-white:visited {
  color: var(--white) !important;
  border-color: var(--white) !important;
}
a.btn-zad-ins.btn-zad-prem.btn-color-new-white:hover,
a.btn-zad-ins.btn-zad-prem.btn-color-new-white:focus {
  color: var(--white) !important;
  background: transparent !important;
}

a.btn-zad-ins.btn-zad-prem.btn-color-new-primary-dev,
a.btn-zad-ins.btn-zad-prem.btn-color-new-primary-dev:active,
a.btn-zad-ins.btn-zad-prem.btn-color-new-primary-dev:visited {
  color: var(--primary-dev) !important;
  border-color: var(--primary-dev) !important;
}
a.btn-zad-ins.btn-zad-prem.btn-color-new-primary-dev:hover,
a.btn-zad-ins.btn-zad-prem.btn-color-new-primary-dev:focus {
  color: var(--primary-dev) !important;
  background: transparent !important;
}

a.btn-zad-ins.btn-zad-prem.btn-color-new-accent-dev,
a.btn-zad-ins.btn-zad-prem.btn-color-new-accent-dev:active,
a.btn-zad-ins.btn-zad-prem.btn-color-new-accent-dev:visited {
  color: var(--accent-dev) !important;
  border-color: var(--accent-dev) !important;
}
a.btn-zad-ins.btn-zad-prem.btn-color-new-accent-dev:hover,
a.btn-zad-ins.btn-zad-prem.btn-color-new-accent-dev:focus {
  color: var(--accent-dev) !important;
  background: transparent !important;
}

/* ikony SVG z kolorami */
.img-color-new-blue::before {
  background-color: var(--blue) !important;
  -webkit-mask-image: url(../img/rozwoj/check-circle-svgrepo-com.svg);
  mask-image: url(../img/rozwoj/check-circle-svgrepo-com.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-image: none !important;
}

.img-color-new-yellow::before {
  background-color: var(--yellow) !important;
  -webkit-mask-image: url(../img/rozwoj/check-circle-svgrepo-com.svg);
  mask-image: url(../img/rozwoj/check-circle-svgrepo-com.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-image: none !important;
}

.img-color-new-green::before {
  background-color: var(--green) !important;
  -webkit-mask-image: url(../img/rozwoj/check-circle-svgrepo-com.svg);
  mask-image: url(../img/rozwoj/check-circle-svgrepo-com.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-image: none !important;
}

.img-color-new-teal::before {
  background-color: var(--teal) !important;
  -webkit-mask-image: url(../img/rozwoj/check-circle-svgrepo-com.svg);
  mask-image: url(../img/rozwoj/check-circle-svgrepo-com.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-image: none !important;
}

.img-color-new-orange::before {
  background-color: var(--orange) !important;
  -webkit-mask-image: url(../img/rozwoj/check-circle-svgrepo-com.svg);
  mask-image: url(../img/rozwoj/check-circle-svgrepo-com.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-image: none !important;
}

.img-color-new-brown::before {
  background-color: var(--brown) !important;
  -webkit-mask-image: url(../img/rozwoj/check-circle-svgrepo-com.svg);
  mask-image: url(../img/rozwoj/check-circle-svgrepo-com.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-image: none !important;
}

.img-color-new-light-blue::before {
  background-color: var(--light-blue) !important;
  -webkit-mask-image: url(../img/rozwoj/check-circle-svgrepo-com.svg);
  mask-image: url(../img/rozwoj/check-circle-svgrepo-com.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-image: none !important;
}

.img-color-new-purple::before {
  background-color: var(--purple) !important;
  -webkit-mask-image: url(../img/rozwoj/check-circle-svgrepo-com.svg);
  mask-image: url(../img/rozwoj/check-circle-svgrepo-com.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-image: none !important;
}

.img-color-new-red::before {
  background-color: var(--red) !important;
  -webkit-mask-image: url(../img/rozwoj/check-circle-svgrepo-com.svg);
  mask-image: url(../img/rozwoj/check-circle-svgrepo-com.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-image: none !important;
}

.img-color-new-gray::before {
  background-color: var(--gray) !important;
  -webkit-mask-image: url(../img/rozwoj/check-circle-svgrepo-com.svg);
  mask-image: url(../img/rozwoj/check-circle-svgrepo-com.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-image: none !important;
}

.img-color-new-akcent::before {
  background-color: var(--akcent) !important;
  -webkit-mask-image: url(../img/rozwoj/check-circle-svgrepo-com.svg);
  mask-image: url(../img/rozwoj/check-circle-svgrepo-com.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-image: none !important;
}

.img-color-new-black::before {
  background-color: var(--black) !important;
  -webkit-mask-image: url(../img/rozwoj/check-circle-svgrepo-com.svg);
  mask-image: url(../img/rozwoj/check-circle-svgrepo-com.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-image: none !important;
}

.img-color-new-dark-red::before {
  background-color: var(--dark-red) !important;
  -webkit-mask-image: url(../img/rozwoj/check-circle-svgrepo-com.svg);
  mask-image: url(../img/rozwoj/check-circle-svgrepo-com.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-image: none !important;
}

.img-color-new-akcent2::before {
  background-color: var(--akcent2) !important;
  -webkit-mask-image: url(../img/rozwoj/check-circle-svgrepo-com.svg);
  mask-image: url(../img/rozwoj/check-circle-svgrepo-com.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-image: none !important;
}

.img-color-new-akcent3::before {
  background-color: var(--akcent3) !important;
  -webkit-mask-image: url(../img/rozwoj/check-circle-svgrepo-com.svg);
  mask-image: url(../img/rozwoj/check-circle-svgrepo-com.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-image: none !important;
}

.img-color-new-white::before {
  background-color: var(--white) !important;
  -webkit-mask-image: url(../img/rozwoj/check-circle-svgrepo-com.svg);
  mask-image: url(../img/rozwoj/check-circle-svgrepo-com.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-image: none !important;
}

.img-color-new-primary-dev::before {
  background-color: var(--primary-dev) !important;
  -webkit-mask-image: url(../img/rozwoj/check-circle-svgrepo-com.svg);
  mask-image: url(../img/rozwoj/check-circle-svgrepo-com.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-image: none !important;
}

.img-color-new-accent-dev::before {
  background-color: var(--accent-dev) !important;
  -webkit-mask-image: url(../img/rozwoj/check-circle-svgrepo-com.svg);
  mask-image: url(../img/rozwoj/check-circle-svgrepo-com.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-image: none !important;
}

/* ikona play w przycisku */
figure.fig-pdco-play[class*="img-color-new-"]:not(.img-color-new-white) img {
  filter: brightness(0) invert(1);
}
figure.fig-pdco-play.img-color-new-white img {
  filter: brightness(0) invert(0);
}

/* span z kolorami */
.span-color-new-blue,
.span-color-new-blue span,
.span-color-new-blue span:after {
  color: var(--blue) !important;
}

.span-color-new-yellow,
.span-color-new-yellow span,
.span-color-new-yellow span:after {
  color: var(--yellow) !important;
}

.span-color-new-green,
.span-color-new-green span,
.span-color-new-green span:after {
  color: var(--green) !important;
}

.span-color-new-teal,
.span-color-new-teal span,
.span-color-new-teal span:after {
  color: var(--teal) !important;
}

.span-color-new-orange,
.span-color-new-orange span,
.span-color-new-orange span:after {
  color: var(--orange) !important;
}

.span-color-new-brown,
.span-color-new-brown span,
.span-color-new-brown span:after {
  color: var(--brown) !important;
}

.span-color-new-light-blue,
.span-color-new-light-blue span,
.span-color-new-light-blue span:after {
  color: var(--light-blue) !important;
}

.span-color-new-purple,
.span-color-new-purple span,
.span-color-new-purple span:after {
  color: var(--purple) !important;
}

.span-color-new-red,
.span-color-new-red span,
.span-color-new-red span:after {
  color: var(--red) !important;
}

.span-color-new-gray,
.span-color-new-gray span,
.span-color-new-gray span:after {
  color: var(--gray) !important;
}

.span-color-new-akcent,
.span-color-new-akcent span,
.span-color-new-akcent span:after {
  color: var(--akcent) !important;
}

.span-color-new-black,
.span-color-new-black span,
.span-color-new-black span:after {
  color: var(--black) !important;
}

.span-color-new-dark-red,
.span-color-new-dark-red span,
.span-color-new-dark-red span:after {
  color: var(--dark-red) !important;
}

.span-color-new-akcent2,
.span-color-new-akcent2 span,
.span-color-new-akcent2 span:after {
  color: var(--akcent2) !important;
}

.span-color-new-akcent3,
.span-color-new-akcent3 span,
.span-color-new-akcent3 span:after {
  color: var(--akcent3) !important;
}

.span-color-new-white,
.span-color-new-white span,
.span-color-new-white span:after {
  color: var(--white) !important;
}

.span-color-new-primary-dev,
.span-color-new-primary-dev span,
.span-color-new-primary-dev span:after {
  color: var(--primary-dev) !important;
}

.span-color-new-accent-dev,
.span-color-new-accent-dev span,
.span-color-new-accent-dev span:after {
  color: var(--accent-dev) !important;
}

/* ============================================
   UNIWERSALNE KLASY DLA PROGRESS-CIRCLE GRADIENT
   Użycie: .progress-color-new-{kolor} - działa dla WSZYSTKICH elementów
   UWAGA: Te klasy nadpisują kolor #F39200 w gradientach
   ============================================ */
.progress-color-new-blue:after {
  --progress-circle-color: var(--blue);
}

.progress-color-new-yellow:after {
  --progress-circle-color: var(--yellow);
}

.progress-color-new-green:after {
  --progress-circle-color: var(--green);
}

.progress-color-new-teal:after {
  --progress-circle-color: var(--teal);
}

.progress-color-new-orange:after {
  --progress-circle-color: var(--orange);
}

.progress-color-new-brown:after {
  --progress-circle-color: var(--brown);
}

.progress-color-new-light-blue:after {
  --progress-circle-color: var(--light-blue);
}

.progress-color-new-purple:after {
  --progress-circle-color: var(--purple);
}

.progress-color-new-red:after {
  --progress-circle-color: var(--red);
}

.progress-color-new-gray:after {
  --progress-circle-color: var(--gray);
}

.progress-color-new-akcent:after {
  --progress-circle-color: var(--akcent);
}

.progress-color-new-black:after {
  --progress-circle-color: var(--black);
}

.progress-color-new-dark-red:after {
  --progress-circle-color: var(--dark-red);
}

.progress-color-new-akcent2:after {
  --progress-circle-color: var(--akcent2);
}

.progress-color-new-akcent3:after {
  --progress-circle-color: var(--akcent3);
}

.progress-color-new-white:after {
  --progress-circle-color: var(--white);
}

.progress-color-new-primary-dev:after {
  --progress-circle-color: var(--primary-dev);
}

.progress-color-new-accent-dev:after {
  --progress-circle-color: var(--accent-dev);
}

/* btn-pdco z kolorami */
a.btn-pdco.btn-color-new-blue { --btn-color: var(--blue); }
a.btn-pdco.btn-color-new-yellow { --btn-color: var(--yellow); }
a.btn-pdco.btn-color-new-green { --btn-color: var(--green); }
a.btn-pdco.btn-color-new-teal { --btn-color: var(--teal); }
a.btn-pdco.btn-color-new-orange { --btn-color: var(--orange); }
a.btn-pdco.btn-color-new-brown { --btn-color: var(--brown); }
a.btn-pdco.btn-color-new-light-blue { --btn-color: var(--light-blue); }
a.btn-pdco.btn-color-new-purple { --btn-color: var(--purple); }
a.btn-pdco.btn-color-new-red { --btn-color: var(--red); }
a.btn-pdco.btn-color-new-gray { --btn-color: var(--gray); }
a.btn-pdco.btn-color-new-akcent { --btn-color: var(--akcent); }
a.btn-pdco.btn-color-new-black { --btn-color: var(--black); }
a.btn-pdco.btn-color-new-dark-red { --btn-color: var(--dark-red); }
a.btn-pdco.btn-color-new-akcent2 { --btn-color: var(--akcent2); }
a.btn-pdco.btn-color-new-akcent3 { --btn-color: var(--akcent3); }
a.btn-pdco.btn-color-new-primary-dev { --btn-color: var(--primary-dev); }
a.btn-pdco.btn-color-new-accent-dev { --btn-color: var(--accent-dev); }

/* border color dla btn-pdst-lab */
a.btn-pdst-lab.btn-color-new-blue { --btn-border-color: var(--blue); }
a.btn-pdst-lab.btn-color-new-yellow { --btn-border-color: var(--yellow); }
a.btn-pdst-lab.btn-color-new-green { --btn-border-color: var(--green); }
a.btn-pdst-lab.btn-color-new-teal { --btn-border-color: var(--teal); }
a.btn-pdst-lab.btn-color-new-orange { --btn-border-color: var(--orange); }
a.btn-pdst-lab.btn-color-new-brown { --btn-border-color: var(--brown); }
a.btn-pdst-lab.btn-color-new-light-blue { --btn-border-color: var(--light-blue); }
a.btn-pdst-lab.btn-color-new-purple { --btn-border-color: var(--purple); }
a.btn-pdst-lab.btn-color-new-red { --btn-border-color: var(--red); }
a.btn-pdst-lab.btn-color-new-gray { --btn-border-color: var(--gray); }
a.btn-pdst-lab.btn-color-new-akcent { --btn-border-color: var(--akcent); }
a.btn-pdst-lab.btn-color-new-black { --btn-border-color: var(--black); }
a.btn-pdst-lab.btn-color-new-dark-red { --btn-border-color: var(--dark-red); }
a.btn-pdst-lab.btn-color-new-akcent2 { --btn-border-color: var(--akcent2); }
a.btn-pdst-lab.btn-color-new-akcent3 { --btn-border-color: var(--akcent3); }
a.btn-pdst-lab.btn-color-new-white { --btn-border-color: var(--white); }
a.btn-pdst-lab.btn-color-new-primary-dev { --btn-border-color: var(--primary-dev); }
a.btn-pdst-lab.btn-color-new-accent-dev { --btn-border-color: var(--accent-dev); }

a.btn-pdco[class*="btn-color-new-"]:not(.btn-color-new-white),
a.btn-pdco[class*="btn-color-new-"]:not(.btn-color-new-white):active,
a.btn-pdco[class*="btn-color-new-"]:not(.btn-color-new-white):visited {
  background: var(--btn-color) !important;
  border-color: var(--btn-color) !important;
  color: #fff !important;
}
a.btn-pdco[class*="btn-color-new-"]:not(.btn-color-new-white):hover,
a.btn-pdco[class*="btn-color-new-"]:not(.btn-color-new-white):focus {
  opacity: 0.9;
}
a.btn-pdco.btn-color-new-white,
a.btn-pdco.btn-color-new-white:active,
a.btn-pdco.btn-color-new-white:visited {
  background: var(--white) !important;
  border-color: var(--white) !important;
  color: #000 !important;
}
a.btn-pdco.btn-color-new-white:hover,
a.btn-pdco.btn-color-new-white:focus {
  opacity: 0.9;
}

/* ikony check z kolorami */
p.p-zip-check.img-color-new-blue { --icon-color: var(--blue); }
p.p-zip-check.img-color-new-yellow { --icon-color: var(--yellow); }
p.p-zip-check.img-color-new-green { --icon-color: var(--green); }
p.p-zip-check.img-color-new-teal { --icon-color: var(--teal); }
p.p-zip-check.img-color-new-orange { --icon-color: var(--orange); }
p.p-zip-check.img-color-new-brown { --icon-color: var(--brown); }
p.p-zip-check.img-color-new-light-blue { --icon-color: var(--light-blue); }
p.p-zip-check.img-color-new-purple { --icon-color: var(--purple); }
p.p-zip-check.img-color-new-red { --icon-color: var(--red); }
p.p-zip-check.img-color-new-gray { --icon-color: var(--gray); }
p.p-zip-check.img-color-new-akcent { --icon-color: var(--akcent); }
p.p-zip-check.img-color-new-black { --icon-color: var(--black); }
p.p-zip-check.img-color-new-dark-red { --icon-color: var(--dark-red); }
p.p-zip-check.img-color-new-akcent2 { --icon-color: var(--akcent2); }
p.p-zip-check.img-color-new-akcent3 { --icon-color: var(--akcent3); }
p.p-zip-check.img-color-new-white { --icon-color: var(--white); }
p.p-zip-check.img-color-new-primary-dev { --icon-color: var(--primary-dev); }
p.p-zip-check.img-color-new-accent-dev { --icon-color: var(--accent-dev); }

p.p-zip-check[class*="img-color-new-"]::before {
  background-color: var(--icon-color) !important;
  -webkit-mask-image: url(../img/rozwoj/web-check.png);
  mask-image: url(../img/rozwoj/web-check.png);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-image: none !important;
}

/* ikony SVG w przyciskach btn-pdst-lab - ukrywamy object i używamy ::after z mask-image */
a.btn-pdst-lab[class*="btn-color-new-"] figure.new_position {
  position: relative;
  display: inline-block;
}

a.btn-pdst-lab[class*="btn-color-new-"] object.svg-pdst-dwnl,
a.btn-pdst-lab[class*="btn-color-new-"] object.svg-pdst-cert {
  display: none;
}

a.btn-pdst-lab[class*="btn-color-new-"] figure.new_position::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-color: #fff !important;
  -webkit-transition: background-color .3s ease-in-out;
  -o-transition: background-color .3s ease-in-out;
  transition: background-color .3s ease-in-out;
  position: absolute;
  left: 0;
  top: 0;
}

figure.new_position:has(object.svg-pdst-dwnl)::before {
  -webkit-mask-image: url(../img/rozwoj/download-svgrepo-com.svg);
  mask-image: url(../img/rozwoj/download-svgrepo-com.svg);
}

figure.new_position:has(object.svg-pdst-cert)::before {
  -webkit-mask-image: url(../img/rozwoj/docs-svgrepo-com.svg);
  mask-image: url(../img/rozwoj/docs-svgrepo-com.svg);
}

/* SVG check dla przycisku "Zapisz się" */
figure.fig-pdco-play:has(object.svg-pdco-check)::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-image: url(../img/rozwoj/check-circle-svgrepo-com.svg);
  mask-image: url(../img/rozwoj/check-circle-svgrepo-com.svg);
  background-color: #fff;
  position: absolute;
  right: 12px;
  top: 9px;
}

a.btn-pdst-lab[class*="btn-color-new-"]:hover figure.new_position::before,
a.btn-pdst-lab[class*="btn-color-new-"]:focus figure.new_position::before {
  background-color: #fff !important;
}

/* kompatybilność wsteczna */
h1.h1-title-blue,
h2.h1-title-blue,
h3.h1-title-blue {
  color: var(--blue) !important;
  text-transform:uppercase;
}
h1.h1-title-blue::before,
h2.h1-title-blue::before,
h3.h1-title-blue::before {
  background-color: var(--blue) !important;
}

h1.h1-title-yellow,
h2.h1-title-yellow,
h3.h1-title-yellow {
  color: var(--yellow) !important;
  text-transform:uppercase;
}
h1.h1-title-yellow::before,
h2.h1-title-yellow::before,
h3.h1-title-yellow::before {
  background-color: var(--yellow) !important;
}

h1.h1-title-green,
h2.h1-title-green,
h3.h1-title-green {
  color: var(--green) !important;
}
h1.h1-title-green::before,
h2.h1-title-green::before,
h3.h1-title-green::before {
  background-color: var(--green) !important;
}

h1.h1-title-teal,
h2.h1-title-teal,
h3.h1-title-teal {
  color: var(--teal) !important;
}
h1.h1-title-teal::before,
h2.h1-title-teal::before,
h3.h1-title-teal::before {
  background-color: var(--teal) !important;
}

h1.h1-title-orange,
h2.h1-title-orange,
h3.h1-title-orange {
  color: var(--orange) !important;
}
h1.h1-title-orange::before,
h2.h1-title-orange::before,
h3.h1-title-orange::before {
  background-color: var(--orange) !important;
}

h1.h1-title-brown,
h2.h1-title-brown,
h3.h1-title-brown {
  color: var(--brown) !important;
}
h1.h1-title-brown::before,
h2.h1-title-brown::before,
h3.h1-title-brown::before {
  background-color: var(--brown) !important;
}

h1.h1-title-light-blue,
h2.h1-title-light-blue,
h3.h1-title-light-blue {
  color: var(--light-blue) !important;
}
h1.h1-title-light-blue::before,
h2.h1-title-light-blue::before,
h3.h1-title-light-blue::before {
  background-color: var(--light-blue) !important;
}

h1.h1-title-purple,
h2.h1-title-purple,
h3.h1-title-purple {
  color: var(--purple) !important;
}
h1.h1-title-purple::before,
h2.h1-title-purple::before,
h3.h1-title-purple::before {
  background-color: var(--purple) !important;
}

h1.h1-title-red,
h2.h1-title-red,
h3.h1-title-red {
  color: var(--red) !important;
}
h1.h1-title-red::before,
h2.h1-title-red::before,
h3.h1-title-red::before {
  background-color: var(--red) !important;
}

figure.new_position {
  position: relative;
  left: -25px;
  top: -16px;
}

/* ============================================
   KLASY DLA BOX-FOR-REP Z BORDER-LEFT
   Użycie: .box-border-left-{kolor}-5 (5px) lub .box-border-left-{kolor}-10 (10px)
   ============================================ */
div.box-border-left-blue-5 { border-left: 5px solid var(--blue) !important; }
div.box-border-left-blue-10 { border-left: 10px solid var(--blue) !important; }
div.box-border-left-yellow-5 { border-left: 5px solid var(--yellow) !important; }
div.box-border-left-yellow-10 { border-left: 10px solid var(--yellow) !important; }
div.box-border-left-green-5 { border-left: 5px solid var(--green) !important; }
div.box-border-left-green-10 { border-left: 10px solid var(--green) !important; }
div.box-border-left-teal-5 { border-left: 5px solid var(--teal) !important; }
div.box-border-left-teal-10 { border-left: 10px solid var(--teal) !important; }
div.box-border-left-orange-5 { border-left: 5px solid var(--orange) !important; }
div.box-border-left-orange-10 { border-left: 10px solid var(--orange) !important; }
div.box-border-left-brown-5 { border-left: 5px solid var(--brown) !important; }
div.box-border-left-brown-10 { border-left: 10px solid var(--brown) !important; }
div.box-border-left-light-blue-5 { border-left: 5px solid var(--light-blue) !important; }
div.box-border-left-light-blue-10 { border-left: 10px solid var(--light-blue) !important; }
div.box-border-left-purple-5 { border-left: 5px solid var(--purple) !important; }
div.box-border-left-purple-10 { border-left: 10px solid var(--purple) !important; }
div.box-border-left-red-5 { border-left: 5px solid var(--red) !important; }
div.box-border-left-red-10 { border-left: 10px solid var(--red) !important; }
div.box-border-left-gray-5 { border-left: 5px solid var(--gray) !important; }
div.box-border-left-gray-10 { border-left: 10px solid var(--gray) !important; }
div.box-border-left-akcent-5 { border-left: 5px solid var(--akcent) !important; }
div.box-border-left-akcent-10 { border-left: 10px solid var(--akcent) !important; }
div.box-border-left-black-5 { border-left: 5px solid var(--black) !important; }
div.box-border-left-black-10 { border-left: 10px solid var(--black) !important; }
div.box-border-left-dark-red-5 { border-left: 5px solid var(--dark-red) !important; }
div.box-border-left-dark-red-10 { border-left: 10px solid var(--dark-red) !important; }
div.box-border-left-akcent2-5 { border-left: 5px solid var(--akcent2) !important; }
div.box-border-left-akcent2-10 { border-left: 10px solid var(--akcent2) !important; }
div.box-border-left-akcent3-5 { border-left: 5px solid var(--akcent3) !important; }
div.box-border-left-akcent3-10 { border-left: 10px solid var(--akcent3) !important; }
div.box-border-left-white-5 { border-left: 5px solid var(--white) !important; }
div.box-border-left-white-10 { border-left: 10px solid var(--white) !important; }
div.box-border-left-primary-dev-5 { border-left: 5px solid var(--primary-dev) !important; }
div.box-border-left-primary-dev-10 { border-left: 10px solid var(--primary-dev) !important; }
div.box-border-left-accent-dev-5 { border-left: 5px solid var(--accent-dev) !important; }
div.box-border-left-accent-dev-10 { border-left: 10px solid var(--accent-dev) !important; }

/* ============================================
   UNIWERSALNE KLASY DLA BORDER-COLOR
   Użycie: .border-color-new-{kolor} - zmienia border-color dla wszystkich stron
   ============================================ */
.border-color-new-blue { border-color: var(--blue) !important; }
.border-color-new-yellow { border-color: var(--yellow) !important; }
.border-color-new-green { border-color: var(--green) !important; }
.border-color-new-teal { border-color: var(--teal) !important; }
.border-color-new-orange { border-color: var(--orange) !important; }
.border-color-new-brown { border-color: var(--brown) !important; }
.border-color-new-light-blue { border-color: var(--light-blue) !important; }
.border-color-new-purple { border-color: var(--purple) !important; }
.border-color-new-red { border-color: var(--red) !important; }
.border-color-new-gray { border-color: var(--gray) !important; }
.border-color-new-akcent { border-color: var(--akcent) !important; }
.border-color-new-black { border-color: var(--black) !important; }
.border-color-new-dark-red { border-color: var(--dark-red) !important; }
.border-color-new-akcent2 { border-color: var(--akcent2) !important; }
.border-color-new-akcent3 { border-color: var(--akcent3) !important; }
.border-color-new-white { border-color: var(--white) !important; }
.border-color-new-primary-dev { border-color: var(--primary-dev) !important; }
.border-color-new-accent-dev { border-color: var(--accent-dev) !important; }

/* ============================================
   KLASY DLA SVG PATH STROKE W ELEMENTACH Z COLOR-NEW-{KOLOR}
   Użycie: .color-new-{kolor} svg path - zmienia kolor stroke dla SVG path
   ============================================ */
.color-new-blue svg path { stroke: var(--blue) !important; }
.color-new-yellow svg path { stroke: var(--yellow) !important; }
.color-new-green svg path { stroke: var(--green) !important; }
.color-new-teal svg path { stroke: var(--teal) !important; }
.color-new-orange svg path { stroke: var(--orange) !important; }
.color-new-brown svg path { stroke: var(--brown) !important; }
.color-new-light-blue svg path { stroke: var(--light-blue) !important; }
.color-new-purple svg path { stroke: var(--purple) !important; }
.color-new-red svg path { stroke: var(--red) !important; }
.color-new-gray svg path { stroke: var(--gray) !important; }
.color-new-akcent svg path { stroke: var(--akcent) !important; }
.color-new-black svg path { stroke: var(--black) !important; }
.color-new-dark-red svg path { stroke: var(--dark-red) !important; }
.color-new-akcent2 svg path { stroke: var(--akcent2) !important; }
.color-new-akcent3 svg path { stroke: var(--akcent3) !important; }
.color-new-white svg path { stroke: var(--white) !important; }
.color-new-primary-dev svg path { stroke: var(--primary-dev) !important; }
.color-new-accent-dev svg path { stroke: var(--accent-dev) !important; }

/* ============================================
   KARTY GRUP FORUM
   ============================================ */
.forum-grupa-card {
	border-radius: 12px;
	padding: 24px;
	margin-bottom: 0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	transition: box-shadow 0.3s ease;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.forum-grupa-card:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.forum-grupa-icon-wrapper {
	margin-bottom: 16px;
	display: flex;
	justify-content: center;
}

.forum-grupa-icon-bg {
	width: 64px;
	height: 64px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
}

.forum-grupa-icon-bg svg {
	width: 100%;
	height: 100%;
}

.forum-grupa-icon-bg-blue { background-color: rgba(36, 89, 149, 0.1); }
.forum-grupa-icon-bg-yellow { background-color: rgba(215, 162, 12, 0.1); }
.forum-grupa-icon-bg-green { background-color: rgba(136, 192, 71, 0.1); }
.forum-grupa-icon-bg-teal { background-color: rgba(0, 187, 212, 0.1); }
.forum-grupa-icon-bg-orange { background-color: rgba(235, 105, 9, 0.1); }
.forum-grupa-icon-bg-brown { background-color: rgba(123, 84, 70, 0.1); }
.forum-grupa-icon-bg-light-blue { background-color: rgba(0, 171, 244, 0.1); }
.forum-grupa-icon-bg-purple { background-color: rgba(123, 79, 106, 0.1); }
.forum-grupa-icon-bg-red { background-color: rgba(225, 38, 29, 0.1); }
.forum-grupa-icon-bg-gray { background-color: rgba(166, 172, 190, 0.1); }
.forum-grupa-icon-bg-akcent { background-color: rgba(225, 38, 29, 0.1); }
.forum-grupa-icon-bg-black { background-color: rgba(0, 0, 0, 0.1); }
.forum-grupa-icon-bg-dark-red { background-color: rgba(183, 29, 26, 0.1); }
.forum-grupa-icon-bg-akcent2 { background-color: rgba(0, 0, 0, 0.1); }
.forum-grupa-icon-bg-akcent3 { background-color: rgba(38, 46, 106, 0.1); }
.forum-grupa-icon-bg-primary-dev { background-color: rgba(225, 38, 29, 0.1); }
.forum-grupa-icon-bg-accent-dev { background-color: rgba(38, 46, 106, 0.1); }

.forum-grupa-content {
	display: flex;
	flex-direction: column;
}

.forum-grupa-title {
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 12px 0;
	line-height: 1.3;
}

.forum-grupa-title a {
	color: #000000;
	text-decoration: none;
	transition: color 0.2s ease;
}

.forum-grupa-title a:hover {
	color: var(--blue);
}

.forum-grupa-description {
	font-size: 14px;
	color: #666666;
	line-height: 1.5;
	margin: 0 0 20px 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.forum-grupa-stats {
	display: flex;
	gap: 24px;
	margin-bottom: 20px;
	padding-top: 16px;
	border-top: 1px solid #e5e5e5;
}

.forum-grupa-stat-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.forum-grupa-stat-number {
	font-size: 18px;
	font-weight: 700;
	color: var(--blue);
	line-height: 1.2;
}

.forum-grupa-stat-label {
	font-size: 11px;
	color: #808080;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.forum-grupa-action {
	margin-top: auto;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.forum-grupa-wypisz-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: 100%;
}

.forum-grupa-wypisz {
	display: inline-block;
	padding: 4px 0;
	color: #dc3545;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
	transition: color 0.2s ease, opacity 0.2s ease;
}

.forum-grupa-wypisz:hover {
	color: #c82333;
	text-decoration: underline;
}

.forum-grupa-wypisz-loading {
	opacity: 0.7;
	cursor: wait;
}

.forum-grupa-buttons-wrapper {
	display: flex;
	gap: 12px;
	width: 100%;
	flex-wrap: wrap;
	flex-direction: row;
}

.forum-grupa-buttons-wrapper .forum-grupa-btn-subscribed {
	flex: 1;
	min-width: 150px;
}

.forum-grupa-buttons-wrapper .forum-grupa-btn-delete {
	flex: 0 0 auto;
	min-width: 90px;
	max-width: 120px;
}

.forum-grupa-btn {
	width: 100%;
	padding: 12px 16px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	border: none;
	cursor: pointer;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.forum-grupa-btn span {
	flex-shrink: 0;
	white-space: nowrap;
}

.forum-grupa-btn-subscribed {
	background-color: #88C047;
	color: #ffffff;
	cursor: default;
}

.forum-grupa-btn-subscribed:hover {
	background-color: #88C047;
}

.forum-grupa-btn-subscribed svg {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
}

.forum-grupa-btn-delete svg {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
}

.forum-grupa-btn-delete {
	background-color: #dc3545;
	color: #ffffff;
	flex: 0 0 auto;
	min-width: 90px;
}

.forum-grupa-btn-delete:hover {
	background-color: #c82333;
}

.forum-grupa-btn-outline {
	background-color: transparent;
	border: 2px solid;
	color: inherit;
}

.forum-grupa-btn-outline-blue { border-color: var(--blue); color: var(--blue); }
.forum-grupa-btn-outline-yellow { border-color: var(--yellow); color: var(--yellow); }
.forum-grupa-btn-outline-green { border-color: var(--green); color: var(--green); }
.forum-grupa-btn-outline-teal { border-color: var(--teal); color: var(--teal); }
.forum-grupa-btn-outline-orange { border-color: var(--orange); color: var(--orange); }
.forum-grupa-btn-outline-brown { border-color: var(--brown); color: var(--brown); }
.forum-grupa-btn-outline-light-blue { border-color: var(--light-blue); color: var(--light-blue); }
.forum-grupa-btn-outline-purple { border-color: var(--purple); color: var(--purple); }
.forum-grupa-btn-outline-red { border-color: var(--red); color: var(--red); }
.forum-grupa-btn-outline-gray { border-color: var(--gray); color: var(--gray); }
.forum-grupa-btn-outline-akcent { border-color: var(--akcent); color: var(--akcent); }
.forum-grupa-btn-outline-black { border-color: var(--black); color: var(--black); }
.forum-grupa-btn-outline-dark-red { border-color: var(--dark-red); color: var(--dark-red); }
.forum-grupa-btn-outline-akcent2 { border-color: var(--akcent2); color: var(--akcent2); }
.forum-grupa-btn-outline-akcent3 { border-color: var(--akcent3); color: var(--akcent3); }
.forum-grupa-btn-outline-primary-dev { border-color: var(--primary-dev); color: var(--primary-dev); }
.forum-grupa-btn-outline-accent-dev { border-color: var(--accent-dev); color: var(--accent-dev); }

/* Hover dla przycisków outline - wypełnienie kolorem i biały tekst */
.forum-grupa-btn-outline:hover {
	color: #ffffff !important;
}

.forum-grupa-btn-outline-blue:hover { background-color: var(--blue) !important; color: #ffffff !important; }
.forum-grupa-btn-outline-yellow:hover { background-color: var(--yellow) !important; color: #ffffff !important; }
.forum-grupa-btn-outline-green:hover { background-color: var(--green) !important; color: #ffffff !important; }
.forum-grupa-btn-outline-teal:hover { background-color: var(--teal) !important; color: #ffffff !important; }
.forum-grupa-btn-outline-orange:hover { background-color: var(--orange) !important; color: #ffffff !important; }
.forum-grupa-btn-outline-brown:hover { background-color: var(--brown) !important; color: #ffffff !important; }
.forum-grupa-btn-outline-light-blue:hover { background-color: var(--light-blue) !important; color: #ffffff !important; }
.forum-grupa-btn-outline-purple:hover { background-color: var(--purple) !important; color: #ffffff !important; }
.forum-grupa-btn-outline-red:hover { background-color: var(--red) !important; color: #ffffff !important; }
.forum-grupa-btn-outline-gray:hover { background-color: var(--gray) !important; color: #ffffff !important; }
.forum-grupa-btn-outline-akcent:hover { background-color: var(--akcent) !important; color: #ffffff !important; }
.forum-grupa-btn-outline-black:hover { background-color: var(--black) !important; color: #ffffff !important; }
.forum-grupa-btn-outline-dark-red:hover { background-color: var(--dark-red) !important; color: #ffffff !important; }
.forum-grupa-btn-outline-akcent2:hover { background-color: var(--akcent2) !important; color: #ffffff !important; }
.forum-grupa-btn-outline-akcent3:hover { background-color: var(--akcent3) !important; color: #ffffff !important; }
.forum-grupa-btn-outline-primary-dev:hover { background-color: var(--primary-dev) !important; color: #ffffff !important; }
.forum-grupa-btn-outline-accent-dev:hover { background-color: var(--accent-dev) !important; color: #ffffff !important; }

/* Grid layout dla kart grup - TYLKO dla strony grup */
.box-for-main-grupy {
	/* Usunięto CSS Grid - używamy Bootstrap row/col */
	padding: 0;
}

.box-for-main-grupy .row {
	margin-left: -15px;
	margin-right: -15px;
}

.box-for-main-grupy .row > [class*="col-"] {
	padding-left: 15px;
	padding-right: 15px;
	margin-bottom: 24px;
}

@media (max-width: 1220px) {
	.forum-grupa-buttons-wrapper {
		flex-direction: column;
		gap: 8px;
	}
	
	.forum-grupa-buttons-wrapper .forum-grupa-btn-subscribed {
		min-width: 100%;
		width: 100%;
	}
	
	.forum-grupa-buttons-wrapper .forum-grupa-btn-delete {
		min-width: 100%;
		max-width: 100%;
		width: 100%;
	}
}

@media (max-width: 767px) {
	.forum-grupa-card {
		padding: 20px;
		margin-bottom: 0;
	}
	
	.forum-grupa-stats {
		gap: 16px;
	}
	
	.forum-grupa-stat-number {
		font-size: 16px;
	}
	
	.forum-grupa-stat-label {
		font-size: 10px;
	}
}

/* ============================================
   GŁÓWNA TABLICA FORUM - NOWY WYGLĄD
   ============================================ */
.forum-watek-card-glowna {
	border-radius: 12px;
	padding: 24px;
	margin-bottom: 20px;
	border: 1px solid #e5e5e5;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	transition: box-shadow 0.3s ease, border-color 0.3s ease;
	position: relative;
}

.forum-watek-card-glowna:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
	border-color: #d0d0d0;
}

.forum-watek-card-content {
	display: flex;
	flex-direction: row;
	gap: 24px;
}

.forum-watek-card-left {
	flex: 1;
	display: flex;
	gap: 16px;
}

.forum-watek-card-right {
	flex: 0 0 120px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.forum-watek-avatar {
	flex: 0 0 80px;
	height: 80px;
}

.forum-watek-avatar img {
	width: 80px !important;
	height: 80px !important;
	border-radius: 50%;
	object-fit: cover;
	background-color: #f0f0f0;
}

.forum-avatar-inicjaly {
	border-radius: 50% !important;
	background-color: #1A73E8 !important;
	color: #ffffff !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	text-transform: uppercase;
	flex-shrink: 0;
}

/* Rozmiary inicjałów */
.forum-avatar-xs {
	width: 32px !important;
	height: 32px !important;
	min-width: 32px;
	min-height: 32px;
	font-size: 12px !important;
}

.forum-avatar-sm {
	width: 48px !important;
	height: 48px !important;
	min-width: 48px;
	min-height: 48px;
	font-size: 18px !important;
}

.forum-avatar-md {
	width: 64px !important;
	height: 64px !important;
	min-width: 64px;
	min-height: 64px;
	font-size: 24px !important;
}

.forum-avatar-lg {
	width: 80px !important;
	height: 80px !important;
	min-width: 80px;
	min-height: 80px;
	font-size: 32px !important;
}

.forum-avatar-xl {
	width: 120px !important;
	height: 120px !important;
	min-width: 120px;
	min-height: 120px;
	font-size: 48px !important;
}

/* Domyślny rozmiar dla forum-watek-avatar - 80px dla widoków tablic */
.forum-watek-avatar .forum-avatar-inicjaly {
	width: 80px !important;
	height: 80px !important;
	min-width: 80px;
	min-height: 80px;
	font-size: 32px !important;
}

.forum-watek-main {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.forum-watek-title {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
}

.forum-watek-title a {
	color: #245995;
	text-decoration: none;
	transition: color 0.2s ease;
}

.forum-watek-title a:hover {
	color: #1a3f6d;
	text-decoration: underline;
}

.forum-watek-body {
	font-size: 14px;
	color: #4a4a4a;
	line-height: 1.6;
	margin: 0;
}

.forum-watek-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	font-size: 13px;
	color: #808080;
}

.forum-watek-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 50px;
	background-color: #f5f5f5;
	font-size: 13px;
	color: #808080;
	white-space: nowrap;
}

.forum-watek-meta-item svg {
	flex-shrink: 0;
}

.forum-watek-attachments {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}

.forum-watek-grupa-btn {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 6px;
	background-color: #E3F2FD;
	color: #1976D2;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.forum-watek-grupa-btn:hover {
	background-color: #BBDEFB;
	color: #1565C0;
}

.forum-watek-stats {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: center;
}

.forum-watek-stat-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.forum-watek-stat-number {
	font-size: 28px;
	font-weight: 700;
	color: #245995;
	line-height: 1.2;
}

.forum-watek-stat-label {
	font-size: 11px;
	color: #808080;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* Menu funkcji (3 kropki) dla głównej tablicy */
.forum-watek-functions-wrapper {
	position: absolute;
	top: 24px;
	right: 24px;
	z-index: 10;
}

.forum-watek-card-glowna .box-for-settings {
	position: relative;
	flex-shrink: 0;
}

.forum-watek-card-glowna .box-for-settings .svg-for-set {
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.forum-watek-card-glowna .box-for-settings .svg-for-set:hover {
	opacity: 0.7;
}

@media (max-width: 767px) {
	.forum-watek-card-content {
		flex-direction: column;
		gap: 16px;
	}
	
	.forum-watek-card-right {
		flex: 0 0 auto;
		width: 100%;
	}
	
	.forum-watek-stats {
		flex-direction: row;
		justify-content: space-around;
		width: 100%;
	}
	
	.forum-watek-card-glowna {
		padding: 20px;
	}
	
	.forum-watek-title {
		font-size: 16px;
	}
	
	.forum-watek-stat-number {
		font-size: 24px;
	}
}

/* ============================================
   KLASY DLA a-tab-bib Z KOLORAMI
   Aktywny tab ma kolor z klasy btn-color-{kolor}
   Nieaktywne taby pozostają białe
   ============================================ */
ul#TabBib a.a-tab-bib.active[class*="btn-color-blue"] { background-color: var(--blue) !important; color: #fff !important; }
ul#TabBib a.a-tab-bib.active[class*="btn-color-yellow"] { background-color: var(--yellow) !important; color: #fff !important; }
ul#TabBib a.a-tab-bib.active[class*="btn-color-green"] { background-color: var(--green) !important; color: #fff !important; }
ul#TabBib a.a-tab-bib.active[class*="btn-color-teal"] { background-color: var(--teal) !important; color: #fff !important; }
ul#TabBib a.a-tab-bib.active[class*="btn-color-orange"] { background-color: var(--orange) !important; color: #fff !important; }
ul#TabBib a.a-tab-bib.active[class*="btn-color-brown"] { background-color: var(--brown) !important; color: #fff !important; }
ul#TabBib a.a-tab-bib.active[class*="btn-color-light-blue"] { background-color: var(--light-blue) !important; color: #fff !important; }
ul#TabBib a.a-tab-bib.active[class*="btn-color-purple"] { background-color: var(--purple) !important; color: #fff !important; }
ul#TabBib a.a-tab-bib.active[class*="btn-color-red"] { background-color: var(--red) !important; color: #fff !important; }
ul#TabBib a.a-tab-bib.active[class*="btn-color-gray"] { background-color: var(--gray) !important; color: #fff !important; }
ul#TabBib a.a-tab-bib.active[class*="btn-color-akcent"] { background-color: var(--akcent) !important; color: #fff !important; }
ul#TabBib a.a-tab-bib.active[class*="btn-color-black"] { background-color: var(--black) !important; color: #fff !important; }
ul#TabBib a.a-tab-bib.active[class*="btn-color-dark-red"] { background-color: var(--dark-red) !important; color: #fff !important; }
ul#TabBib a.a-tab-bib.active[class*="btn-color-akcent2"] { background-color: var(--akcent2) !important; color: #fff !important; }
ul#TabBib a.a-tab-bib.active[class*="btn-color-akcent3"] { background-color: var(--akcent3) !important; color: #fff !important; }
ul#TabBib a.a-tab-bib.active[class*="btn-color-white"] { background-color: var(--white) !important; color: var(--black) !important; }
ul#TabBib a.a-tab-bib.active[class*="btn-color-primary-dev"] { background-color: var(--primary-dev) !important; color: #fff !important; }
ul#TabBib a.a-tab-bib.active[class*="btn-color-accent-dev"] { background-color: var(--accent-dev) !important; color: #fff !important; }

/* Nieaktywne taby z btn-color-* pozostają białe */
ul#TabBib a.a-tab-bib[class*="btn-color-"]:not(.active) {
  background-color: #fff !important;
  color: #000 !important;
}

/* ============================================
   KLASY DLA BOX-POLECANE I BOX-PNMCS Z KOLORAMI
   Użycie: .box-polecane.checked-color-{kolor} lub .box-pnmcs.checked-color-{kolor}
   ============================================ */
div.box-polecane.checked-color-blue input[name="polecane"]:checked + label,
div.box-pnmcs.checked-color-blue input[name="nacostac"]:checked + label { background: var(--blue) !important; color: #fff !important; }

div.box-polecane.checked-color-yellow input[name="polecane"]:checked + label,
div.box-pnmcs.checked-color-yellow input[name="nacostac"]:checked + label { background: var(--yellow) !important; color: #fff !important; }

div.box-polecane.checked-color-green input[name="polecane"]:checked + label,
div.box-pnmcs.checked-color-green input[name="nacostac"]:checked + label { background: var(--green) !important; color: #fff !important; }

div.box-polecane.checked-color-teal input[name="polecane"]:checked + label,
div.box-pnmcs.checked-color-teal input[name="nacostac"]:checked + label { background: var(--teal) !important; color: #fff !important; }

div.box-polecane.checked-color-orange input[name="polecane"]:checked + label,
div.box-pnmcs.checked-color-orange input[name="nacostac"]:checked + label { background: var(--orange) !important; color: #fff !important; }

div.box-polecane.checked-color-brown input[name="polecane"]:checked + label,
div.box-pnmcs.checked-color-brown input[name="nacostac"]:checked + label { background: var(--brown) !important; color: #fff !important; }

div.box-polecane.checked-color-light-blue input[name="polecane"]:checked + label,
div.box-pnmcs.checked-color-light-blue input[name="nacostac"]:checked + label { background: var(--light-blue) !important; color: #fff !important; }

div.box-polecane.checked-color-purple input[name="polecane"]:checked + label,
div.box-pnmcs.checked-color-purple input[name="nacostac"]:checked + label { background: var(--purple) !important; color: #fff !important; }

div.box-polecane.checked-color-red input[name="polecane"]:checked + label,
div.box-pnmcs.checked-color-red input[name="nacostac"]:checked + label { background: var(--red) !important; color: #fff !important; }

div.box-polecane.checked-color-gray input[name="polecane"]:checked + label,
div.box-pnmcs.checked-color-gray input[name="nacostac"]:checked + label { background: var(--gray) !important; color: #fff !important; }

div.box-polecane.checked-color-akcent input[name="polecane"]:checked + label,
div.box-pnmcs.checked-color-akcent input[name="nacostac"]:checked + label { background: var(--akcent) !important; color: #fff !important; }

div.box-polecane.checked-color-black input[name="polecane"]:checked + label,
div.box-pnmcs.checked-color-black input[name="nacostac"]:checked + label { background: var(--black) !important; color: #fff !important; }

div.box-polecane.checked-color-dark-red input[name="polecane"]:checked + label,
div.box-pnmcs.checked-color-dark-red input[name="nacostac"]:checked + label { background: var(--dark-red) !important; color: #fff !important; }

div.box-polecane.checked-color-akcent2 input[name="polecane"]:checked + label,
div.box-pnmcs.checked-color-akcent2 input[name="nacostac"]:checked + label { background: var(--akcent2) !important; color: #fff !important; }

div.box-polecane.checked-color-akcent3 input[name="polecane"]:checked + label,
div.box-pnmcs.checked-color-akcent3 input[name="nacostac"]:checked + label { background: var(--akcent3) !important; color: #fff !important; }

div.box-polecane.checked-color-white input[name="polecane"]:checked + label,
div.box-pnmcs.checked-color-white input[name="nacostac"]:checked + label { background: var(--white) !important; color: var(--black) !important; }

div.box-polecane.checked-color-primary-dev input[name="polecane"]:checked + label,
div.box-pnmcs.checked-color-primary-dev input[name="nacostac"]:checked + label { background: var(--primary-dev) !important; color: #fff !important; }

div.box-polecane.checked-color-accent-dev input[name="polecane"]:checked + label,
div.box-pnmcs.checked-color-accent-dev input[name="nacostac"]:checked + label { background: var(--accent-dev) !important; color: #fff !important; }

/* ============================================
   KLASY DLA A.A-NR-PROD BOX-NR-PROD::BEFORE Z KOLORAMI
   Użycie: .a-nr-prod.hover-bgcolor-{kolor} lub parent .hover-bgcolor-{kolor} .a-nr-prod
   ============================================ */
a.a-nr-prod.hover-bgcolor-blue:not(.wyklucz) div.box-nr-prod::before,
a.a-nr-prod.hover-bgcolor-blue:not(.wyklucz):active div.box-nr-prod::before,
a.a-nr-prod.hover-bgcolor-blue:not(.wyklucz):visited div.box-nr-prod::before { background: rgba(36, 89, 149, .9) !important; }

a.a-nr-prod.hover-bgcolor-yellow:not(.wyklucz) div.box-nr-prod::before,
a.a-nr-prod.hover-bgcolor-yellow:not(.wyklucz):active div.box-nr-prod::before,
a.a-nr-prod.hover-bgcolor-yellow:not(.wyklucz):visited div.box-nr-prod::before { background: rgba(215, 162, 12, .9) !important; }

a.a-nr-prod.hover-bgcolor-green:not(.wyklucz) div.box-nr-prod::before,
a.a-nr-prod.hover-bgcolor-green:not(.wyklucz):active div.box-nr-prod::before,
a.a-nr-prod.hover-bgcolor-green:not(.wyklucz):visited div.box-nr-prod::before { background: rgba(136, 192, 71, .9) !important; }

a.a-nr-prod.hover-bgcolor-teal:not(.wyklucz) div.box-nr-prod::before,
a.a-nr-prod.hover-bgcolor-teal:not(.wyklucz):active div.box-nr-prod::before,
a.a-nr-prod.hover-bgcolor-teal:not(.wyklucz):visited div.box-nr-prod::before { background: rgba(0, 187, 212, .9) !important; }

a.a-nr-prod.hover-bgcolor-orange:not(.wyklucz) div.box-nr-prod::before,
a.a-nr-prod.hover-bgcolor-orange:not(.wyklucz):active div.box-nr-prod::before,
a.a-nr-prod.hover-bgcolor-orange:not(.wyklucz):visited div.box-nr-prod::before { background: rgba(235, 105, 9, .9) !important; }

a.a-nr-prod.hover-bgcolor-brown:not(.wyklucz) div.box-nr-prod::before,
a.a-nr-prod.hover-bgcolor-brown:not(.wyklucz):active div.box-nr-prod::before,
a.a-nr-prod.hover-bgcolor-brown:not(.wyklucz):visited div.box-nr-prod::before { background: rgba(123, 84, 70, .9) !important; }

a.a-nr-prod.hover-bgcolor-light-blue:not(.wyklucz) div.box-nr-prod::before,
a.a-nr-prod.hover-bgcolor-light-blue:not(.wyklucz):active div.box-nr-prod::before,
a.a-nr-prod.hover-bgcolor-light-blue:not(.wyklucz):visited div.box-nr-prod::before { background: rgba(0, 171, 244, .9) !important; }

a.a-nr-prod.hover-bgcolor-purple:not(.wyklucz) div.box-nr-prod::before,
a.a-nr-prod.hover-bgcolor-purple:not(.wyklucz):active div.box-nr-prod::before,
a.a-nr-prod.hover-bgcolor-purple:not(.wyklucz):visited div.box-nr-prod::before { background: rgba(123, 79, 106, .9) !important; }

a.a-nr-prod.hover-bgcolor-red:not(.wyklucz) div.box-nr-prod::before,
a.a-nr-prod.hover-bgcolor-red:not(.wyklucz):active div.box-nr-prod::before,
a.a-nr-prod.hover-bgcolor-red:not(.wyklucz):visited div.box-nr-prod::before { background: rgba(225, 38, 29, .9) !important; }

a.a-nr-prod.hover-bgcolor-gray:not(.wyklucz) div.box-nr-prod::before,
a.a-nr-prod.hover-bgcolor-gray:not(.wyklucz):active div.box-nr-prod::before,
a.a-nr-prod.hover-bgcolor-gray:not(.wyklucz):visited div.box-nr-prod::before { background: rgba(166, 172, 190, .9) !important; }

a.a-nr-prod.hover-bgcolor-akcent:not(.wyklucz) div.box-nr-prod::before,
a.a-nr-prod.hover-bgcolor-akcent:not(.wyklucz):active div.box-nr-prod::before,
a.a-nr-prod.hover-bgcolor-akcent:not(.wyklucz):visited div.box-nr-prod::before { background: rgba(225, 38, 29, .9) !important; }

a.a-nr-prod.hover-bgcolor-black:not(.wyklucz) div.box-nr-prod::before,
a.a-nr-prod.hover-bgcolor-black:not(.wyklucz):active div.box-nr-prod::before,
a.a-nr-prod.hover-bgcolor-black:not(.wyklucz):visited div.box-nr-prod::before { background: rgba(0, 0, 0, .9) !important; }

a.a-nr-prod.hover-bgcolor-dark-red:not(.wyklucz) div.box-nr-prod::before,
a.a-nr-prod.hover-bgcolor-dark-red:not(.wyklucz):active div.box-nr-prod::before,
a.a-nr-prod.hover-bgcolor-dark-red:not(.wyklucz):visited div.box-nr-prod::before { background: rgba(183, 29, 26, .9) !important; }

a.a-nr-prod.hover-bgcolor-akcent2:not(.wyklucz) div.box-nr-prod::before,
a.a-nr-prod.hover-bgcolor-akcent2:not(.wyklucz):active div.box-nr-prod::before,
a.a-nr-prod.hover-bgcolor-akcent2:not(.wyklucz):visited div.box-nr-prod::before { background: rgba(0, 0, 0, .9) !important; }

a.a-nr-prod.hover-bgcolor-akcent3:not(.wyklucz) div.box-nr-prod::before,
a.a-nr-prod.hover-bgcolor-akcent3:not(.wyklucz):active div.box-nr-prod::before,
a.a-nr-prod.hover-bgcolor-akcent3:not(.wyklucz):visited div.box-nr-prod::before { background: rgba(38, 46, 106, .9) !important; }

a.a-nr-prod.hover-bgcolor-white:not(.wyklucz) div.box-nr-prod::before,
a.a-nr-prod.hover-bgcolor-white:not(.wyklucz):active div.box-nr-prod::before,
a.a-nr-prod.hover-bgcolor-white:not(.wyklucz):visited div.box-nr-prod::before { background: rgba(255, 255, 255, .9) !important; }

a.a-nr-prod.hover-bgcolor-primary-dev:not(.wyklucz) div.box-nr-prod::before,
a.a-nr-prod.hover-bgcolor-primary-dev:not(.wyklucz):active div.box-nr-prod::before,
a.a-nr-prod.hover-bgcolor-primary-dev:not(.wyklucz):visited div.box-nr-prod::before { background: rgba(225, 38, 29, .9) !important; }

a.a-nr-prod.hover-bgcolor-accent-dev:not(.wyklucz) div.box-nr-prod::before,
a.a-nr-prod.hover-bgcolor-accent-dev:not(.wyklucz):active div.box-nr-prod::before,
a.a-nr-prod.hover-bgcolor-accent-dev:not(.wyklucz):visited div.box-nr-prod::before { background: rgba(38, 46, 106, .9) !important; }

/* ============================================
   KLASY DLA BOX-ACTIVE BOX-WYSYLKA Z KOLORAMI
   Użycie: .box-active.box-wysylka-color-{kolor} div.box-wysylka
   ============================================ */
div.box-active.box-wysylka-color-blue div.box-wysylka { background-color: var(--blue) !important; border-color: var(--blue) !important; }
div.box-active.box-wysylka-color-yellow div.box-wysylka { background-color: var(--yellow) !important; border-color: var(--yellow) !important; }
div.box-active.box-wysylka-color-green div.box-wysylka { background-color: var(--green) !important; border-color: var(--green) !important; }
div.box-active.box-wysylka-color-teal div.box-wysylka { background-color: var(--teal) !important; border-color: var(--teal) !important; }
div.box-active.box-wysylka-color-orange div.box-wysylka { background-color: var(--orange) !important; border-color: var(--orange) !important; }
div.box-active.box-wysylka-color-brown div.box-wysylka { background-color: var(--brown) !important; border-color: var(--brown) !important; }
div.box-active.box-wysylka-color-light-blue div.box-wysylka { background-color: var(--light-blue) !important; border-color: var(--light-blue) !important; }
div.box-active.box-wysylka-color-purple div.box-wysylka { background-color: var(--purple) !important; border-color: var(--purple) !important; }
div.box-active.box-wysylka-color-red div.box-wysylka { background-color: var(--red) !important; border-color: var(--red) !important; }
div.box-active.box-wysylka-color-gray div.box-wysylka { background-color: var(--gray) !important; border-color: var(--gray) !important; }
div.box-active.box-wysylka-color-akcent div.box-wysylka { background-color: var(--akcent) !important; border-color: var(--akcent) !important; }
div.box-active.box-wysylka-color-black div.box-wysylka { background-color: var(--black) !important; border-color: var(--black) !important; }
div.box-active.box-wysylka-color-dark-red div.box-wysylka { background-color: var(--dark-red) !important; border-color: var(--dark-red) !important; }
div.box-active.box-wysylka-color-akcent2 div.box-wysylka { background-color: var(--akcent2) !important; border-color: var(--akcent2) !important; }
div.box-active.box-wysylka-color-akcent3 div.box-wysylka { background-color: var(--akcent3) !important; border-color: var(--akcent3) !important; }
div.box-active.box-wysylka-color-white div.box-wysylka { background-color: var(--white) !important; border-color: var(--white) !important; }
div.box-active.box-wysylka-color-primary-dev div.box-wysylka { background-color: var(--primary-dev) !important; border-color: var(--primary-dev) !important; }
div.box-active.box-wysylka-color-accent-dev div.box-wysylka { background-color: var(--accent-dev) !important; border-color: var(--accent-dev) !important; }

/* ============================================
   KLASY DLA FORM-ERROR Z KOLORAMI
   Użycie: .form-error.form-error-color-{kolor} - zmienia border-color inputów i kolor tekstu błędu
   ============================================ */
div.form-error.form-error-color-blue input.form-custom,
div.form-error.form-error-color-blue select.form-custom,
div.form-error.form-error-color-blue textarea.form-custom { border-color: var(--blue) !important; }
div.form-error.form-error-color-blue p.p-form-error { color: var(--blue) !important; }

div.form-error.form-error-color-yellow input.form-custom,
div.form-error.form-error-color-yellow select.form-custom,
div.form-error.form-error-color-yellow textarea.form-custom { border-color: var(--yellow) !important; }
div.form-error.form-error-color-yellow p.p-form-error { color: var(--yellow) !important; }

div.form-error.form-error-color-green input.form-custom,
div.form-error.form-error-color-green select.form-custom,
div.form-error.form-error-color-green textarea.form-custom { border-color: var(--green) !important; }
div.form-error.form-error-color-green p.p-form-error { color: var(--green) !important; }

div.form-error.form-error-color-teal input.form-custom,
div.form-error.form-error-color-teal select.form-custom,
div.form-error.form-error-color-teal textarea.form-custom { border-color: var(--teal) !important; }
div.form-error.form-error-color-teal p.p-form-error { color: var(--teal) !important; }

div.form-error.form-error-color-orange input.form-custom,
div.form-error.form-error-color-orange select.form-custom,
div.form-error.form-error-color-orange textarea.form-custom { border-color: var(--orange) !important; }
div.form-error.form-error-color-orange p.p-form-error { color: var(--orange) !important; }

div.form-error.form-error-color-brown input.form-custom,
div.form-error.form-error-color-brown select.form-custom,
div.form-error.form-error-color-brown textarea.form-custom { border-color: var(--brown) !important; }
div.form-error.form-error-color-brown p.p-form-error { color: var(--brown) !important; }

div.form-error.form-error-color-light-blue input.form-custom,
div.form-error.form-error-color-light-blue select.form-custom,
div.form-error.form-error-color-light-blue textarea.form-custom { border-color: var(--light-blue) !important; }
div.form-error.form-error-color-light-blue p.p-form-error { color: var(--light-blue) !important; }

div.form-error.form-error-color-purple input.form-custom,
div.form-error.form-error-color-purple select.form-custom,
div.form-error.form-error-color-purple textarea.form-custom { border-color: var(--purple) !important; }
div.form-error.form-error-color-purple p.p-form-error { color: var(--purple) !important; }

div.form-error.form-error-color-red input.form-custom,
div.form-error.form-error-color-red select.form-custom,
div.form-error.form-error-color-red textarea.form-custom { border-color: var(--red) !important; }
div.form-error.form-error-color-red p.p-form-error { color: var(--red) !important; }

div.form-error.form-error-color-gray input.form-custom,
div.form-error.form-error-color-gray select.form-custom,
div.form-error.form-error-color-gray textarea.form-custom { border-color: var(--gray) !important; }
div.form-error.form-error-color-gray p.p-form-error { color: var(--gray) !important; }

div.form-error.form-error-color-akcent input.form-custom,
div.form-error.form-error-color-akcent select.form-custom,
div.form-error.form-error-color-akcent textarea.form-custom { border-color: var(--akcent) !important; }
div.form-error.form-error-color-akcent p.p-form-error { color: var(--akcent) !important; }

div.form-error.form-error-color-black input.form-custom,
div.form-error.form-error-color-black select.form-custom,
div.form-error.form-error-color-black textarea.form-custom { border-color: var(--black) !important; }
div.form-error.form-error-color-black p.p-form-error { color: var(--black) !important; }

div.form-error.form-error-color-dark-red input.form-custom,
div.form-error.form-error-color-dark-red select.form-custom,
div.form-error.form-error-color-dark-red textarea.form-custom { border-color: var(--dark-red) !important; }
div.form-error.form-error-color-dark-red p.p-form-error { color: var(--dark-red) !important; }

div.form-error.form-error-color-akcent2 input.form-custom,
div.form-error.form-error-color-akcent2 select.form-custom,
div.form-error.form-error-color-akcent2 textarea.form-custom { border-color: var(--akcent2) !important; }
div.form-error.form-error-color-akcent2 p.p-form-error { color: var(--akcent2) !important; }

div.form-error.form-error-color-akcent3 input.form-custom,
div.form-error.form-error-color-akcent3 select.form-custom,
div.form-error.form-error-color-akcent3 textarea.form-custom { border-color: var(--akcent3) !important; }
div.form-error.form-error-color-akcent3 p.p-form-error { color: var(--akcent3) !important; }

div.form-error.form-error-color-white input.form-custom,
div.form-error.form-error-color-white select.form-custom,
div.form-error.form-error-color-white textarea.form-custom { border-color: var(--white) !important; }
div.form-error.form-error-color-white p.p-form-error { color: var(--white) !important; }

div.form-error.form-error-color-primary-dev input.form-custom,
div.form-error.form-error-color-primary-dev select.form-custom,
div.form-error.form-error-color-primary-dev textarea.form-custom { border-color: var(--primary-dev) !important; }
div.form-error.form-error-color-primary-dev p.p-form-error { color: var(--primary-dev) !important; }

div.form-error.form-error-color-accent-dev input.form-custom,
div.form-error.form-error-color-accent-dev select.form-custom,
div.form-error.form-error-color-accent-dev textarea.form-custom { border-color: var(--accent-dev) !important; }
div.form-error.form-error-color-accent-dev p.p-form-error { color: var(--accent-dev) !important; }

/* ============================================
   FORM FOCUS - klasy zależne od koloru
   Użycie: otoczyć inputy klasą .form-color-new-{kolor} (np. <div class="form-color-new-blue">)
   Reguły zmieniają border-color na fokusie oraz usuwają box-shadow
   ============================================ */
.form-color-new-blue input.form-custom:focus,
.form-color-new-blue textarea.form-custom:focus,
.form-color-new-blue select.form-custom:focus {
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-color: var(--blue) !important;
  background-color: transparent !important;
}

.form-color-new-yellow input.form-custom:focus,
.form-color-new-yellow textarea.form-custom:focus,
.form-color-new-yellow select.form-custom:focus {
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-color: var(--yellow) !important;
  background-color: transparent !important;
}

.form-color-new-green input.form-custom:focus,
.form-color-new-green textarea.form-custom:focus,
.form-color-new-green select.form-custom:focus {
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-color: var(--green) !important;
  background-color: transparent !important;
}

.form-color-new-teal input.form-custom:focus,
.form-color-new-teal textarea.form-custom:focus,
.form-color-new-teal select.form-custom:focus {
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-color: var(--teal) !important;
  background-color: transparent !important;
}

.form-color-new-orange input.form-custom:focus,
.form-color-new-orange textarea.form-custom:focus,
.form-color-new-orange select.form-custom:focus {
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-color: var(--orange) !important;
  background-color: transparent !important;
}

.form-color-new-brown input.form-custom:focus,
.form-color-new-brown textarea.form-custom:focus,
.form-color-new-brown select.form-custom:focus {
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-color: var(--brown) !important;
  background-color: transparent !important;
}

.form-color-new-light-blue input.form-custom:focus,
.form-color-new-light-blue textarea.form-custom:focus,
.form-color-new-light-blue select.form-custom:focus {
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-color: var(--light-blue) !important;
  background-color: transparent !important;
}

.form-color-new-purple input.form-custom:focus,
.form-color-new-purple textarea.form-custom:focus,
.form-color-new-purple select.form-custom:focus {
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-color: var(--purple) !important;
  background-color: transparent !important;
}

.form-color-new-red input.form-custom:focus,
.form-color-new-red textarea.form-custom:focus,
.form-color-new-red select.form-custom:focus {
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-color: var(--red) !important;
  background-color: transparent !important;
}

.form-color-new-gray input.form-custom:focus,
.form-color-new-gray textarea.form-custom:focus,
.form-color-new-gray select.form-custom:focus {
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-color: var(--gray) !important;
  background-color: transparent !important;
}

.form-color-new-akcent input.form-custom:focus,
.form-color-new-akcent textarea.form-custom:focus,
.form-color-new-akcent select.form-custom:focus {
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-color: var(--akcent) !important;
  background-color: transparent !important;
}

.form-color-new-black input.form-custom:focus,
.form-color-new-black textarea.form-custom:focus,
.form-color-new-black select.form-custom:focus {
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-color: var(--black) !important;
  background-color: transparent !important;
}

.form-color-new-dark-red input.form-custom:focus,
.form-color-new-dark-red textarea.form-custom:focus,
.form-color-new-dark-red select.form-custom:focus {
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-color: var(--dark-red) !important;
  background-color: transparent !important;
}

.form-color-new-akcent2 input.form-custom:focus,
.form-color-new-akcent2 textarea.form-custom:focus,
.form-color-new-akcent2 select.form-custom:focus {
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-color: var(--akcent2) !important;
  background-color: transparent !important;
}

.form-color-new-akcent3 input.form-custom:focus,
.form-color-new-akcent3 textarea.form-custom:focus,
.form-color-new-akcent3 select.form-custom:focus {
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-color: var(--akcent3) !important;
  background-color: transparent !important;
}

.form-color-new-white input.form-custom:focus,
.form-color-new-white textarea.form-custom:focus,
.form-color-new-white select.form-custom:focus {
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-color: var(--white) !important;
  background-color: transparent !important;
}

.form-color-new-primary-dev input.form-custom:focus,
.form-color-new-primary-dev textarea.form-custom:focus,
.form-color-new-primary-dev select.form-custom:focus {
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-color: var(--primary-dev) !important;
  background-color: transparent !important;
}

.form-color-new-accent-dev input.form-custom:focus,
.form-color-new-accent-dev textarea.form-custom:focus,
.form-color-new-accent-dev select.form-custom:focus {
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-color: var(--accent-dev) !important;
  background-color: transparent !important;
}

/* ============================================
   NAV-TABS - warianty kolorystyczne zależne od koloru
   Użycie: dodać klasę .nav-tabs-new-color-{kolor} na kontenerze ul.nav-tabs
   Zmienia kolor tekstu i dolny border dla aktywnego taba oraz hover/focus
   ============================================ */
.nav-tabs-new-color-blue .nav-item.show a.a-tab,
.nav-tabs-new-color-blue a.a-tab.active {
  color: var(--blue) !important;
  border: none;
  border-bottom: 2px solid var(--blue) !important;
}
.nav-tabs-new-color-blue a.a-tab:hover,
.nav-tabs-new-color-blue a.a-tab:focus {
  color: var(--blue) !important;
  border-bottom: 2px solid var(--blue) !important;
}

.nav-tabs-new-color-yellow .nav-item.show a.a-tab,
.nav-tabs-new-color-yellow a.a-tab.active {
  color: var(--yellow) !important;
  border: none;
  border-bottom: 2px solid var(--yellow) !important;
}
.nav-tabs-new-color-yellow a.a-tab:hover,
.nav-tabs-new-color-yellow a.a-tab:focus {
  color: var(--yellow) !important;
  border-bottom: 2px solid var(--yellow) !important;
}

.nav-tabs-new-color-green .nav-item.show a.a-tab,
.nav-tabs-new-color-green a.a-tab.active {
  color: var(--green) !important;
  border: none;
  border-bottom: 2px solid var(--green) !important;
}
.nav-tabs-new-color-green a.a-tab:hover,
.nav-tabs-new-color-green a.a-tab:focus {
  color: var(--green) !important;
  border-bottom: 2px solid var(--green) !important;
}

.nav-tabs-new-color-teal .nav-item.show a.a-tab,
.nav-tabs-new-color-teal a.a-tab.active {
  color: var(--teal) !important;
  border: none;
  border-bottom: 2px solid var(--teal) !important;
}
.nav-tabs-new-color-teal a.a-tab:hover,
.nav-tabs-new-color-teal a.a-tab:focus {
  color: var(--teal) !important;
  border-bottom: 2px solid var(--teal) !important;
}

.nav-tabs-new-color-orange .nav-item.show a.a-tab,
.nav-tabs-new-color-orange a.a-tab.active {
  color: var(--orange) !important;
  border: none;
  border-bottom: 2px solid var(--orange) !important;
}
.nav-tabs-new-color-orange a.a-tab:hover,
.nav-tabs-new-color-orange a.a-tab:focus {
  color: var(--orange) !important;
  border-bottom: 2px solid var(--orange) !important;
}

.nav-tabs-new-color-brown .nav-item.show a.a-tab,
.nav-tabs-new-color-brown a.a-tab.active {
  color: var(--brown) !important;
  border: none;
  border-bottom: 2px solid var(--brown) !important;
}
.nav-tabs-new-color-brown a.a-tab:hover,
.nav-tabs-new-color-brown a.a-tab:focus {
  color: var(--brown) !important;
  border-bottom: 2px solid var(--brown) !important;
}

.nav-tabs-new-color-light-blue .nav-item.show a.a-tab,
.nav-tabs-new-color-light-blue a.a-tab.active {
  color: var(--light-blue) !important;
  border: none;
  border-bottom: 2px solid var(--light-blue) !important;
}
.nav-tabs-new-color-light-blue a.a-tab:hover,
.nav-tabs-new-color-light-blue a.a-tab:focus {
  color: var(--light-blue) !important;
  border-bottom: 2px solid var(--light-blue) !important;
}

.nav-tabs-new-color-purple .nav-item.show a.a-tab,
.nav-tabs-new-color-purple a.a-tab.active {
  color: var(--purple) !important;
  border: none;
  border-bottom: 2px solid var(--purple) !important;
}
.nav-tabs-new-color-purple a.a-tab:hover,
.nav-tabs-new-color-purple a.a-tab:focus {
  color: var(--purple) !important;
  border-bottom: 2px solid var(--purple) !important;
}

.nav-tabs-new-color-red .nav-item.show a.a-tab,
.nav-tabs-new-color-red a.a-tab.active {
  color: var(--red) !important;
  border: none;
  border-bottom: 2px solid var(--red) !important;
}
.nav-tabs-new-color-red a.a-tab:hover,
.nav-tabs-new-color-red a.a-tab:focus {
  color: var(--red) !important;
  border-bottom: 2px solid var(--red) !important;
}

.nav-tabs-new-color-gray .nav-item.show a.a-tab,
.nav-tabs-new-color-gray a.a-tab.active {
  color: var(--gray) !important;
  border: none;
  border-bottom: 2px solid var(--gray) !important;
}
.nav-tabs-new-color-gray a.a-tab:hover,
.nav-tabs-new-color-gray a.a-tab:focus {
  color: var(--gray) !important;
  border-bottom: 2px solid var(--gray) !important;
}

.nav-tabs-new-color-akcent .nav-item.show a.a-tab,
.nav-tabs-new-color-akcent a.a-tab.active {
  color: var(--akcent) !important;
  border: none;
  border-bottom: 2px solid var(--akcent) !important;
}
.nav-tabs-new-color-akcent a.a-tab:hover,
.nav-tabs-new-color-akcent a.a-tab:focus {
  color: var(--akcent) !important;
  border-bottom: 2px solid var(--akcent) !important;
}

.nav-tabs-new-color-black .nav-item.show a.a-tab,
.nav-tabs-new-color-black a.a-tab.active {
  color: var(--black) !important;
  border: none;
  border-bottom: 2px solid var(--black) !important;
}
.nav-tabs-new-color-black a.a-tab:hover,
.nav-tabs-new-color-black a.a-tab:focus {
  color: var(--black) !important;
  border-bottom: 2px solid var(--black) !important;
}

.nav-tabs-new-color-dark-red .nav-item.show a.a-tab,
.nav-tabs-new-color-dark-red a.a-tab.active {
  color: var(--dark-red) !important;
  border: none;
  border-bottom: 2px solid var(--dark-red) !important;
}
.nav-tabs-new-color-dark-red a.a-tab:hover,
.nav-tabs-new-color-dark-red a.a-tab:focus {
  color: var(--dark-red) !important;
  border-bottom: 2px solid var(--dark-red) !important;
}

.nav-tabs-new-color-akcent2 .nav-item.show a.a-tab,
.nav-tabs-new-color-akcent2 a.a-tab.active {
  color: var(--akcent2) !important;
  border: none;
  border-bottom: 2px solid var(--akcent2) !important;
}
.nav-tabs-new-color-akcent2 a.a-tab:hover,
.nav-tabs-new-color-akcent2 a.a-tab:focus {
  color: var(--akcent2) !important;
  border-bottom: 2px solid var(--akcent2) !important;
}

.nav-tabs-new-color-akcent3 .nav-item.show a.a-tab,
.nav-tabs-new-color-akcent3 a.a-tab.active {
  color: var(--akcent3) !important;
  border: none;
  border-bottom: 2px solid var(--akcent3) !important;
}
.nav-tabs-new-color-akcent3 a.a-tab:hover,
.nav-tabs-new-color-akcent3 a.a-tab:focus {
  color: var(--akcent3) !important;
  border-bottom: 2px solid var(--akcent3) !important;
}

.nav-tabs-new-color-white .nav-item.show a.a-tab,
.nav-tabs-new-color-white a.a-tab.active {
  color: var(--white) !important;
  border: none;
  border-bottom: 2px solid var(--white) !important;
}
.nav-tabs-new-color-white a.a-tab:hover,
.nav-tabs-new-color-white a.a-tab:focus {
  color: var(--white) !important;
  border-bottom: 2px solid var(--white) !important;
}

.nav-tabs-new-color-primary-dev .nav-item.show a.a-tab,
.nav-tabs-new-color-primary-dev a.a-tab.active {
  color: var(--primary-dev) !important;
  border: none;
  border-bottom: 2px solid var(--primary-dev) !important;
}
.nav-tabs-new-color-primary-dev a.a-tab:hover,
.nav-tabs-new-color-primary-dev a.a-tab:focus {
  color: var(--primary-dev) !important;
  border-bottom: 2px solid var(--primary-dev) !important;
}

.nav-tabs-new-color-accent-dev .nav-item.show a.a-tab,
.nav-tabs-new-color-accent-dev a.a-tab.active {
  color: var(--accent-dev) !important;
  border: none;
  border-bottom: 2px solid var(--accent-dev) !important;
}
.nav-tabs-new-color-accent-dev a.a-tab:hover,
.nav-tabs-new-color-accent-dev a.a-tab:focus {
  color: var(--accent-dev) !important;
  border-bottom: 2px solid var(--accent-dev) !important;
}