html {
    padding: 0;
    margin: 0;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/roboto/Roboto-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/roboto/Roboto-Bold.ttf') format('truetype');
}
/*
body {
    padding: 0;
    margin: 0;
    /*font-family: "Source Sans Pro", Verdana, Geneva, sans-serif;*/
	/*font-family: "Roboto", Helvetica, Arial, sans-serif;
}*/

body {
	padding: 0;
	margin: 0;
    background-color: #f8f9fa; /* Jasnoszare tło */
    font-family: "Roboto", Helvetica, Arial, sans-serif;
    font-size: 16px; /* Lekko powiększony bazowy rozmiar fontu */
    line-height: 1.6; /* Zwiększona interlinia dla lepszej czytelności */
}


/*@font-face {
    font-family: "Source Sans Pro";
    /*font-style: "Regular";
    font-weight: "400";
    src: url("../fonts/source_sans_pro/SourceSansPro-Regular.ttf") format("truetype");
}*/

img {
    border: 0;
}

.copyr {
    letter-spacing: 2px;
}

.cont img {
    float: left;
    padding-right: 2px;
}

.cont {
    height: 30px;
    line-height: 30px;
    float: right;
    margin-left: 15px;
}

.cont a {
    text-decoration: none;
    color: inherit
}

.cont a:hover {
    text-decoration: underline;
}

pre {
	background: #f9f9f9;
}

#header-container {
    height: auto;
    text-align: center;
   /* padding: 20px 30px;*/
	padding: 10px 30px; /* Lekka korekta paddingu */
	
	background: #315584; 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 
    border-bottom: 3px solid #f68a00; /* Pomarańczowa ramka na dole */
    position: sticky; /* Przyklejenie nagłówka do góry */
    top: 0;
    z-index: 1000; /* Zapewnienie, że nagłówek jest na wierzchu */
  
    /* Old browsers */
    /*box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2);

    background: rgb(49, 85, 132);
    background: -moz-linear-gradient(180deg, rgba(49, 85, 132, 1) 0%, rgba(45, 79, 124, 1) 40%, rgba(45, 79, 124, 1) 60%, rgba(49, 85, 132, 1) 100%);
    background: -webkit-linear-gradient(180deg, rgba(49, 85, 132, 1) 0%, rgba(45, 79, 124, 1) 40%, rgba(45, 79, 124, 1) 60%, rgba(49, 85, 132, 1) 100%);
    background: linear-gradient(180deg, rgba(49, 85, 132, 1) 0%, rgba(45, 79, 124, 1) 40%, rgba(45, 79, 124, 1) 60%, rgba(49, 85, 132, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#315584", endColorstr="#315584", GradientType=1);*/
}

.navTopContainer {
    max-width: 1200px;
    margin: 0 auto;
    display: table;
    width: 100%
}

.topmenu {
    letter-spacing: 1px;
    text-transform: uppercase;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: rgb(62, 105, 160);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    text-align: left;
    margin-top: 3px;
	border-radius: 5px;
	width: 300px;
}

.dropdown-content a {
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 1em;
    border-bottom: 1px solid rgba(239, 132, 30, 0.33);
}

.dropdown-content a:hover {
    background-color: rgb(73, 121, 183)
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

.dropdown-content .lnr {
    font-size: 0.9em;
    font-weight: 300;
    margin-right: 7px;
}

#logo {
    border: 0px;
}

.logo_artoit {
    width: 300px
}

#header-container .top-r {
    display: table-cell;
    text-align: right;
    vertical-align: middle;
    padding-right: 20px;
}

#header-container li {
    list-style: none;
}

#header-container nav {
    vertical-align: middle;
}

#header-container nav ul {
    padding: 0px;
}

#header-container nav ul li {
    position: relative;
    box-sizing: border-box;
    display: inline-block;
    padding: 0
}

#language {
    display: table-cell;
    width: 120px;
    text-align: center;
    vertical-align: middle;
}

#language ul {
    font-size: 12px;
    padding: 12px 5px;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.7);
    -khtml-border-radius: 7px;
    -moz-border-radiust: 7px;
    -webkit-radius: 7px;
    border-radius: 7px
}

#language li {
    position: relative;
    box-sizing: border-box;
    display: inline-block;
}

#language li.pierwszy {
    padding-right: 5px;
    border-right: 1px solid rgba(100, 99, 99, 0.3)
}

#language a {
    display: inline-block;
    text-decoration: none;
    outline: 0px;
    color: #8f8987;
}

#language a:hover {
    font-weight: bold;
}

#logo-top {
    display: table-cell;
    margin: auto;
    vertical-align: middle;
    /*width: 35%;*/
    text-align: left;
    /*padding-left: 20px;*/
}

#nav_top a {
    /*   font-family: "Roboto", Verdana, Geneva, sans-serif;*/
    font-size: 1.0em;
    padding: 20px;
    color: #ffffff;
    text-decoration: none;
    outline: 0px;
    font-weight: 300;
	
	position: relative; /* Potrzebne do animacji podkreślenia */
    transition: color 0.3s ease;
}

#nav_top a:hover {
    /*color: #ffffff;*/
	color: #f68a00; /* Zmiana koloru tekstu na pomarańczowy */
}

#nav_top a:hover::after {
    width: 60%; /* Szerokość podkreślenia po najechaniu */
}

#nav_top a:not(.cta-button)::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 10px; /* Odległość podkreślenia od tekstu */
    left: 50%;
    transform: translateX(-50%);
    background-color: #f68a00; /* Pomarańczowe podkreślenie */
    transition: width 0.3s ease;
}

#nav_top li:last-child a { /* Zakładamy, że kontakt jest ostatni */
    background-color: #f68a00;
    color: #ffffff !important; /* Ważne, aby nadpisać inne style */
    padding: 10px 20px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
	margin-left: 15px;
}

#nav_top li:last-child a:hover {
    background-color: #e07b00; /* Ciemniejszy odcień po najechaniu */
    color: #ffffff !important;
}

#nav_top li:last-child a::after {
    display: none; /* Ukrywamy animację podkreślenia dla przycisku */
}

#nav_top a.dodatki { 
    background-color: #f68a00;
    color: #ffffff !important; 
    padding: 10px 20px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
	margin-left: 15px;
}

#nav_top a.dodatki:hover {
    background-color: #e07b00; 
    color: #ffffff !important;
}

#nav_top a.dodatki::after {
    display: none;
}

#nav_breadcrumb {
    /*   font-family: "Roboto", Verdana, Geneva, sans-serif;*/
    font-size: 0.8em;
    padding: 0px 0 15px 5px;
}

#nav_breadcrumb a {
    color: #2d4f7c;
    text-decoration: none;
    outline: 0px;
}

.lang {
    font-weight: bold;
    margin-left: 30px;
}

aside {
    color: white;
    padding: 20px;
    float: right;
    height: 500px;
    width: 200px;
    background-color: #f16529;
    border-bottom: 20px solid #e44d26;
    margin-bottom: 50px;
    -webkit-box-shadow: 0 0px 40px -10px #AAA;
    -moz-box-shadow: 0 0px 40px -10px #AAA;
    box-shadow: 0 0px 40px -10px #AAA;
}

table td,
tr {
    padding: 5px;
}

.mini {
    color: #777;
    font-size: 12px;
    margin-top: 2px;
    margin-bottom: 5px;
}

#wide {
    max-width: 1200px;
    margin: 5px auto;
    background-color: rgba(255, 255, 255, 0.5);
    padding: 0px 25px;
}

#main {
    padding: 0px;
    max-width: 1200px;
    margin: auto;
}

#main2 {
    width: auto;
    max-width: 1200px;
    margin: auto;
    padding-top: 0px;
    color: #282829;
    text-align: justify;
    padding: 5px 25px 10px 25px;
    /*background-color: rgba(255,255,255,0.5);
         border: solid 1px;
         border-color: rgba(100,99,99,0.3);*/
}

#main3 {
    width: auto;
    margin: 5px auto;
    padding-top: 0px;
    padding: 5px 0px 25px 0px;
    border: solid 0px;
    border-color: rgba(100, 99, 99, 0.3);
}

#main3 .box-l {
    width: 23%;
    min-width: 250px;
    display: table-cell;
    color: #282829;
    text-align: left;
    padding: 0px 5px 5px 5px;
    vertical-align: top;
}

#main3 .box-r {
    width: auto;
    display: table-cell;
    color: #282829;
    text-align: justify;
    padding: 5px 5px 5px 15px;
    border-left: 1px solid rgba(100, 99, 99, 0.3);
}

#main3 article {
    padding: 0px;
}

#main3 article header {
    width: 100%;
    padding: 0px;
    margin: 0;
}

#main3 h1 {
    margin: 0;
}

#main3 h3 {
    border-bottom: 1px solid rgb(246, 138, 0, 0.5);
    ;
    margin: 10px 0 0 5px;
    padding: 0 5px 0 0;
}

#main3 .pobierz {
    font-size: 1.5em;
    text-transform: uppercase;
    border-bottom: 2px solid #f68a00;
}

#main3 ul {
    margin: 0;
    padding-left: 20px;
    margin-top: 5px;
}

#main3 .box-l li {
    margin: 0;
    list-style-type: none;
    font-size: 14px;
    color: #8e8e8e;
    font-weight: normal;
    padding: 3px 3px 3px 7px;
}

#main3 li.realizacje_lewy_head,
#main3 .box-l li.realizacje_lewy_head:hover {
    list-style-type: none;
    margin-left: 0px;
    text-align: center;
    padding: 5px;
    color: white;
    text-transform: uppercase;
    font-weight: bolder;
    margin-bottom: 0px;
    border-radius: 5px 5px 5px 5px;

    background: rgb(36, 120, 180);
    background: -moz-linear-gradient(180deg, rgba(36, 120, 180, 1) 0%, rgba(27, 106, 162, 1) 30%, rgba(27, 106, 162, 1) 70%, rgba(36, 120, 180, 1) 100%);
    background: -webkit-linear-gradient(180deg, rgba(36, 120, 180, 1) 0%, rgba(27, 106, 162, 1) 30%, rgba(27, 106, 162, 1) 70%, rgba(36, 120, 180, 1) 100%);
    background: linear-gradient(180deg, rgba(36, 120, 180, 1) 0%, rgba(27, 106, 162, 1) 30%, rgba(27, 106, 162, 1) 70%, rgba(36, 120, 180, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#2478b4", endColorstr="#2478b4", GradientType=1);

    -webkit-box-shadow: 3px 3px 15px -10px rgba(66, 68, 90, 1);
    -moz-box-shadow: 3px 3px 15px -10px rgba(66, 68, 90, 1);
    box-shadow: 3px 3px 15px -10px rgba(66, 68, 90, 1);
}

#main3 .box-l li a {
    color: #282829;
    text-decoration: none;
    border-radius: 5px 5px 5px 5px;
}


#main3 .box-l li.active {
    background: rgb(175, 35, 34);
    border-radius: 5px 5px 5px 5px;
}

#main3 .box-l li:hover {
    background: rgb(175, 35, 34);
    border-radius: 5px 5px 5px 5px;
    color: white;
}

#main3 .box-l li:hover a {
    color: white;
}

#main3 .box-l li.active a {
    color: white;
}

#main3 .box-l li a.active {
    text-decoration: underline;
    color: rgb(175, 35, 34);
}

.bold_point {
    color: #140e0e;
    font-weight: bold;
}

#main2 article header {
    margin-bottom: 30px;
    padding-bottom: 0px;
    width: auto;
}

.rel p {
    font-size: 14px;
    font-style: italic;
    color: #777
}

.product-top-img {
    float: left;
    margin: 5px 10px 0px 0;
}

#box-l-realizacje ul {
    padding-left: 0px;
}

#box-l-realizacje .lnr {
    font-size: 12px;
    margin-right: 5px;
}

#box-l-realizacje li.active .lnr {
    color: #ffffff;
}

#box-l-realizacje li:hover .lnr {
    color: #ffffff;
}

#box-l-realizacje .new {
    color: darkred
}

#box-l-realizacje li.active .new {
    color: #ffffff
}

#box-l-realizacje li:hover .new {
    color: #ffffff
}

#praca {
    text-align: center;
    width: auto;
    margin: 5px auto;
    padding-top: 0px;
    padding: 5px 0px 25px 0px;
    border: solid 0px;
    border-color: rgba(100, 99, 99, 0.3);
}

#praca article {
    padding: 0px;
}

#praca article header {
    width: 100%;
    padding: 0px;
    margin: 0;
}

#praca .stanowisko {
    text-align: justify;
    max-width: 800px;
    margin: auto;
}

#praca .stanowisko ul {
    padding: 0px 15px;
}

#praca ul.lista {
    list-style-type: square;
    padding: 0;
    text-align: left;
    max-width: 400px;
    margin: auto;
}

.center {
    margin: auto;
    text-align: center;
}

.screen {
    text-align: center;
    width: 90%;
    margin: auto;
}

.screen img {
    width: auto;
    max-width: 800px;
    max-height: 500px;
	border: 1px solid darkgray;
}

.screen-nomax {
    text-align: center;
    width: 100%;
    margin: auto;
}

.screen-nomax img {
    width: auto;
}

#main2 table {
    border: #999 0px solid;
    border-spacing: 0px;
    text-align: center;
    font-size: 14px;
}

#main2 td {
    border: #e1e0e0 1px solid;
}

article header {
    margin-bottom: 50px;
    padding-bottom: 30px;
}

article header h1 {
    color: #f68a00;
}

#page_dodatek article header h1 {
    color: white;
    padding: 7px 12px;
    text-transform: uppercase;

    border-radius: 5px 5px 5px 5px;
    background: rgb(36, 120, 180);
    background: -moz-linear-gradient(180deg, rgba(36, 120, 180, 1) 0%, rgba(27, 106, 162, 1) 30%, rgba(27, 106, 162, 1) 70%, rgba(36, 120, 180, 1) 100%);
    background: -webkit-linear-gradient(180deg, rgba(36, 120, 180, 1) 0%, rgba(27, 106, 162, 1) 30%, rgba(27, 106, 162, 1) 70%, rgba(36, 120, 180, 1) 100%);
    background: linear-gradient(180deg, rgba(36, 120, 180, 1) 0%, rgba(27, 106, 162, 1) 30%, rgba(27, 106, 162, 1) 70%, rgba(36, 120, 180, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#2478b4", endColorstr="#2478b4", GradientType=1);

    -webkit-box-shadow: 3px 3px 15px -10px rgba(66, 68, 90, 1);
    -moz-box-shadow: 3px 3px 15px -10px rgba(66, 68, 90, 1);
    box-shadow: 3px 3px 15px -10px rgba(66, 68, 90, 1);
	
	font-size: 1.3em; /* Zmniejszamy bazowy rozmiar czcionki */
    word-wrap: break-word; /* Pozwala na łamanie długich słów */
    hyphens: auto; /* Opcjonalnie: dodaje dzielenie wyrazów */
    line-height: 1.4; /* Poprawia czytelność przy zawinięciu */
}

article header h2,
h3 {
    color: #f68a00;
}

#elinkerBox {
    padding: 10px;
    text-align: center;
    color: whitesmoke;
    font-size: 1.4em;
    font-weight: bold;
    margin-bottom: 15px;

    border-radius: 5px 5px 5px 5px;
    background: rgb(36, 120, 180);
    background: -moz-linear-gradient(180deg, rgba(36, 120, 180, 1) 0%, rgba(27, 106, 162, 1) 30%, rgba(27, 106, 162, 1) 70%, rgba(36, 120, 180, 1) 100%);
    background: -webkit-linear-gradient(180deg, rgba(36, 120, 180, 1) 0%, rgba(27, 106, 162, 1) 30%, rgba(27, 106, 162, 1) 70%, rgba(36, 120, 180, 1) 100%);
    background: linear-gradient(180deg, rgba(36, 120, 180, 1) 0%, rgba(27, 106, 162, 1) 30%, rgba(27, 106, 162, 1) 70%, rgba(36, 120, 180, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#2478b4", endColorstr="#2478b4", GradientType=1);
}

#elinkerBox a {
    color: whitesmoke;
    font-weight: bold;
}

#elinkerSite {
    text-align: justify
}

#elinkerSite p.wersja {
    font-size: 1.1em;
    font-weight: bold;
    padding: 0;
    margin: 0 0 7px 0
}

#elinkerSite .wersjaBox {
    background: rgba(246, 138, 0, 0.25);
    padding: 10px;
    border: 1px solid rgba(185, 107, 7, 0.74);
}

.wersjaBox {
    background: rgba(246, 138, 0, 0.25);
    padding: 10px;
    border: 1px solid rgba(185, 107, 7, 0.74);
}

.wersjaBox p {
	margin: auto;
}

p.wersja {
    font-size: 1.1em;
    font-weight: bold;
    padding: 0;
    margin: 0 0 7px 0
}

#plikiBox {
    background: rgba(246, 138, 0, 0.25);
    padding: 10px;
    border: 1px solid rgba(185, 107, 7, 0.74);
}

#plikiBox h3 {
	font-size: 1.1em;
	font-weight: bold;
	text-transform: uppercase;
	padding: 0;
	margin: 0 0 7px 0;
	border-bottom: 0;
	color: #000;
}

#plikiBox p.title {
	font-size: 1.0em;
	font-weight: bold;
	padding: 0;
	margin: 20px 0 7px 0;
}

#plikiBox p {
	font-size: 0.9em;
	font-weight: normal;
	padding: 0;
	margin: 0 0 7px 0;
}

#plikiBox .button {
	padding: 12px;
	text-decoration: none;
	background: #f68a00;
	border: 2px solid #cc7607;
	color: #fafafa;
	font-weight: bold;
	font-size: 14px;
	border-radius: 5px 5px 5px 5px;
}

h1 {
    color: #f68a00;
}

h1.dodatkiInsert {
    color: #f68a00;
    text-transform: uppercase;
    text-align: center;
    font-size: 1.7em
}

a.dodatkiInsert {
    color: #f68a00;
    text-align: center;
    text-decoration: none;
}

.down {
    text-align: left;
    display: table;
    margin-bottom: 5px
}

.down img {
    display: table-cell;
    vertical-align: middle;
    padding-right: 2px;
}

.down a {
    display: table-cell;
    vertical-align: middle;
    text-decoration: none;
    min-width: 220px;
    text-align: center;
    width: auto;
}

.down a:hover {
    text-decoration: none;
}

a.wyroznij {
    font-weight: bold;
}

#footer-container {
    background: #315584;
    margin-top: 15px;
    padding-top: 10px;
    clear: both;
    text-align: center;
    -webkit-box-shadow: 0px -1px 1px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px -1px 1px 0px rgba(0, 0, 0, 0.3);
}

#footer-container footer {
    max-width: 1200px;
    /*  font-family: "Roboto", Verdana, Geneva, sans-serif;*/
    color: #ffffff;
    font-size: 1em;
    font-weight: normal;
    margin: auto;
    padding: 0 25px;
}

.foot-l {
    display: inline-block;
    width: 48%;
    text-align: left;
}

.foot-r {
    display: inline-block;
    width: 48%;
    text-align: right;
}

.foot_cont {
    display: inline-block;
    height: 30px;
    margin-left: 15px;
}

.foot_cont a {
    text-decoration: none;
    color: inherit
}

.foot_cont a:hover {
    text-decoration: underline;
}

.foot_copr {
    height: 25px;
    text-align: left;
    width: auto;
    border-top: 1px solid #ffffff;
    margin-top: 5px;
    padding: 5px 20px;
}

.fa {
    padding: 20px;
    font-size: 30px;
    width: 50px;
    text-align: center;
    text-decoration: none;
    border: 1px solid rgba(250, 250, 250, 0.7);
    border-radius: 50%;
    margin-right: 3px;
}

.fa:hover {
    opacity: 0.7;
}

.fa-facebook {
    background: #3B5998;
    color: white;
    width: 30px;
    padding: 7px 0px;
}

.fa-google {
    background: #dd4b39;
    color: white;
    width: 30px;
    padding: 7px 0px;
}

.fa-youtube {
    background: #bb0000;
    color: white;
    width: 30px;
    padding: 7px 0px;
}

#oferta-menu {
    display: table;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    border-spacing: 30px 30px;
}

#oferta-menu .row {
    display: table-row;
}

#oferta-menu a {
    text-decoration: none;
    outline: 0px;
    color: #3a3a3a;
}

#oferta-menu .box {
    display: table-cell;
    border: #c3c1c1 1px solid;
    background: #FFF;
    height: 267px;
    width: 212px;
    padding: 5px;
    vertical-align: top;
    -khtml-border-radius: 10px;
    -moz-border-radiust: 10px;
    -webkit-radius: 10px;
    border-radius: 10px;
}

#oferta-menu h2 {
    margin-top: 5px;
    /*font-family: "Roboto", Verdana, Geneva, sans-serif;*/
    font-size: 16px;
    color: #3a3a3a;
    font-weight: bold;
}

#oferta-menu a:hover {
    color: #f78f1e;
}

#oferta-menu img {
    margin-left: 0px;
    border: 0;
}

#oferta-menu p {
    /* font-family: "Roboto", sans-serif;*/
    font-size: 11px;
    font-weight: normal;
    color: #3e3e3e;
    font-style: italic;
    vertical-align: bottom;
    margin-top: 10px;
    margin-bottom: 0px;
}

#oferta_index {
    display: block;
    margin: 20px auto;
    text-align: center;
	padding: 5px 20px;
}

#oferta_index .nadBox {
    display: block;
    margin: 0px 17px;
    width: auto;
    padding: 0px 0px 15px 0px;
    text-align: left;
}
/*
#oferta_index .box {
    display: table-cell;
    border: 0px solid rgba(197, 197, 197, 0.41);
    margin: 10px;
    background: #fafafa;
    min-height: 220px;
    width: 45%;
    padding: 15px 0px;
    vertical-align: top;
	border-radius: 3px;
}*/

#oferta_index .box div {
    display: block;
    vertical-align: middle;
}

/*
#oferta_index .row {
    display: table;
    border-spacing: 20px 10px;
    width: 100%;
}*/

#oferta_index .row {
    display: flex; /* Zmieniamy .row na kontener flexbox */
    gap: 25px;     /* Definiujemy 20px odstępu TYLKO między elementami */
    width: 100%;
	margin-bottom: 20px;
    /* Usuwamy border-spacing, bo już nie działa i nie jest potrzebny */
}

/* Zastąp istniejącą regułę dla .box */
#oferta_index .box {
    flex: 1; /* Mówimy, że każdy .box ma zająć równą część przestrzeni */
    
    /* Poniżej style z poprzedniej poprawki dla spójności wyglądu */
    background-color: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    padding: 10px 0px; /* Zmieniono z 20px, aby pasowało do starego stylu */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    min-height: 220px; /* Zachowujemy minimalną wysokość */
    vertical-align: top;
}

#oferta_index .box:hover {
	transform: translateY(-5px);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

#oferta_index .loga {
    display: block;
    background: #fafafa;
    width: 100%;
    text-align: left
}

#oferta_index .loga img {
    width: 100%;
    margin: 20px;
    box-shadow: none;
    border: 0;
    max-width: 400px;
}

#oferta_index .logoPartnera {
    display: inline-block;
    width: 48%;
    text-align: center;
}

#oferta_index p {
    /*  font-family: "Roboto", Verdana, sans-serif;*/
    font-size: 0.9em;
    font-weight: normal;
    color: #3e3e3e;
    font-style: normal;
    vertical-align: bottom;
    text-align: justify;
    padding: 0 15px 0 15px;
}

#oferta_index .cytat {
    font-style: normal;
    color: #777;
    font-size: 0.8em;
    padding: 0 15px 0 15px;
    margin: 15px 0 0 0;
    font-weight: 500;
}

#oferta_index h1 {
    margin: 0px;
    padding: 0;
    /*  font-family: "Roboto", Verdana, Geneva, sans-serif;*/
    font-size: 1.6em;
    color: #777;
    font-weight: bold;
    text-transform: uppercase;
    text-align: left;
}

#oferta_index h2 {
    background: rgb(49, 85, 132);
    margin: 0px 10px 0px 10px;
    padding: 7px 12px;
    text-align: left;
    /* font-family: "Roboto", Verdana, Geneva, sans-serif;*/
    font-size: 1.2em;
    color: #ffffff;
    font-weight: 600;
    text-transform: uppercase;
	border-radius: 5px 5px 0 0;
	border-bottom: 1px solid #f9a11b;
}

#oferta_index h2 a {
    text-decoration: none;
    outline: 0px;
    color: #ffffff;
}

#oferta_index h2 a:hover {
    color: #ffffff;
}

#oferta_index a {
    text-decoration: none;
    outline: 0px;
    color: #3e3e3e;
}

#oferta_index img {
    padding: 0px;
    border: 0px solid rgba(0, 0, 0, 0.3);
    /*max-height: 180px;*/
    box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.2);
    margin: auto;
    width: 100%;
	border-radius: 0 0 5px 5px;
}

#oferta_index .idx-box-right {
    padding: 0px 10px;
}

#table-menu {
    border: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    border-spacing: 80px 30px;
}

#table-menu a {
    text-decoration: none;
    outline: 0px;
    color: #3a3a3a;
}

#table-menu td {
    border: #c3c1c1 1px solid;
    background: #FFF;
    height: 267px;
    width: 205px;
    vertical-align: top;
    -khtml-border-radius: 10px;
    -moz-border-radiust: 10px;
    -webkit-radius: 10px;
    border-radius: 10px;
}

#table-menu h2 {
    margin-top: 5px;
    /* font-family: "Roboto", Verdana, Geneva, sans-serif;*/
    font-size: 16px;
    color: #3a3a3a;
    font-weight: bold;
}

#table-menu a:hover {
    color: #f78f1e;
}

#table-menu img {
    margin-left: 0px;
    border: 0;
}

#table-menu p {
    /*  font-family: "Roboto", sans-serif;*/
    font-size: 11px;
    font-weight: normal;
    color: #3e3e3e;
    font-style: italic;
    vertical-align: bottom;
    margin-top: 10px;
    margin-bottom: 0px;
}

#table-domeny {
    width: 100%;
}

#table-domeny tr.head {
    color: #fafafa;
    background-color: #636161;
}

#table-domeny tr.one {
    background-color: #fefefe;
}

#table-domeny tr.two {
    background-color: #f8f8f8;
}

#table-domeny td {
    padding: 5px
}

#slider-dol {
    width: auto;
    margin: 15px auto auto auto;
    max-width: 1200px;
}


div.tab {
    overflow: hidden;
}

div.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
}

div.tab button:hover {
    background-color: #ddd;
}

div.tab button.active {
    background-color: #ccc;
}

.tabcontent {
    display: none;
    -webkit-animation: fadeEffect 1s;
    animation: fadeEffect 1s;
}

@-webkit-keyframes fadeEffect {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeEffect {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/*.kontakt-box { display: table-cell; max-width: 33%; width: 30%; min-height: 100px; display: inline-table; padding: 10px 30px 0px 0px; font-size: 1.1em } */
.kontakt-box {
    display: table-cell;
    max-width: 50%;
    width: 37%;
    min-height: 100px;
    display: inline-table;
    padding: 10px 30px 0px 0px;
    font-size: 1.1em
}

.kontakt-box p {
    font-size: 1.2em;
    margin: 5px 0 5px 0;
}

.kontakt-box h3 {
    margin: 10px 0 0 0 !important;
    border-bottom: 1px solid #f68a00;
    font-size: 1.1em
}

.kontakt-box img {
    display: table-cell;
    vertical-align: middle;
    padding-right: 5px;
    float: left
}

.kontakt-box div {
    font-weight: bold;
    min-height: 35px;
    line-height: 35px;
    font-size: 1.2em;
    padding-top: 5px
}

.kontakt-box a {
    display: table-cell;
    vertical-align: middle;
    text-decoration: none;
    color: inherit
}

.kontakt-box .minDesc {
    display: table-cell;
    vertical-align: middle;
    text-decoration: none;
    color: inherit;
    font-weight: normal;
    font-size: 0.75em;
    padding-left: 5px;
}

#formularz {
    margin: 10px 0 0 0px;
    width: auto;
    padding: 10px;
    border: #c3c1c1 1px solid;
    background: #f8f8f8
}

.kontaktFormRow {
    display: table;
    width: 100%;
    margin-bottom: 5px
}

.form-l {
    width: 20%;
    display: table-cell;
    font-weight: bold;
    margin-bottom: 5px;
}

.form-p {
    width: 79%;
    display: table-cell;
    margin-bottom: 5px;
}

.form-p input {
    width: 100%;
    height: 25px;
    border: #c3c1c1 1px solid;
    font-size: 14px;
    padding-left: 5px
}

.form-p input:hover {
    border: #f68a00 1px solid;
}

#formularz textarea {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    min-height: 100px;
    max-height: 500px;
    font-family: Verdana, Arial, sans-serif;
    font-size: 14px
}

#formularz textarea:hover {
    border: #f68a00 1px solid;
}

#formularz button {
    width: 90px;
    height: 40px;
    margin-right: 0px;
    background: #f68a00;
    border: 2px solid #cc7607;
    color: #fafafa;
    font-weight: bold;
    font-size: 15px;
    font-family: Verdana, Arial;
    letter-spacing: 1px;
    margin-top: 10px;
    border-radius: 5px;
    border: 1px solid #ce7500;
}

#formularz button:hover {
    background: #f6961b;
    cursor: pointer;
}

.realizacje-box {
    /*width: 305px;*/
    min-height: 100px;
    /*display: inline-table;*/
    padding: 10px 0px 10px 0px;
    font-size: 18px
}

.realizacje-box h3 {
    margin-bottom: 0px;
    border-bottom: 1px solid #f68a00;
}

.realizacje-box h2 {
    color: #F68A00;
    font-size: 20px;
    text-align: center;
    padding: 0;
    margin: 0;
    letter-spacing: 2px;
}

.realizacje-box img {
    margin-bottom: 5px;
}

.realizacje-box div {
    border-bottom: 0px solid #c3c1c1;
    text-align: center;
    padding: 5px 0;
    color: #595756;
    display: inline-block;
    width: 275px;
}

.realizacje-box a {
    text-decoration: none;
    outline: 0px;
    color: #595756;
    display: block;
}

.realizacje-box a:hover {
    text-decoration: none;
    color: #1c1b1b;
}

#zamowienieForm {
    max-width: 1200px;
    padding: 0px 0px;
}

#zamowienieForm .radio {
	text-align: left;
	line-height: 25px;
}

#zamowienieForm .form-l {
	width: 20%;
	display: table-cell;
	font-weight: bold;
	margin-bottom: 5px;
	text-align: left;
	padding-right: 5px;
}

#zamowienieForm .form-p {
	width: 79%;
	display: table-cell;
	margin-bottom: 5px;
	padding-right: 10px;
}

#zamowienieForm .kontaktFormRow {
	display: table;
	width: 100%;
	margin-bottom: 5px;
}

#zamowienieForm .kontaktFormRowError {
	display: table;
	width: 100%;
	margin-top: 15px;
	margin-bottom: 5px;
	text-align: left;
	color: darkred;
}

#zamowienieForm .kontaktFormRow input[type="submit"] {
  width: auto;
  padding: 15px 50px;
  background: #f68a00;
  border: 2px solid #cc7607;
  color: #fafafa;
  font-weight: bold;
  letter-spacing: 1px;
  margin: 5px;
}

#zamowienieForm .czescForm {
  margin: 10px 0 0 0px;
  padding: 10px;
  border: #c3c1c1 1px solid;
  background: #f8f8f8;
}

#zamowienieForm .form-p input {
  width: 100%;
  height: 25px;
  border: #c3c1c1 1px solid;
  font-size: 14px;
  padding-left: 5px;
}

#zamowienieForm #formularz input[type="radio"] {
  display: inline-block;
  width: auto;
  vertical-align: bottom;
  font-weight: bold;
}

#zamowienieForm .form-p span {
  vertical-align: middle;
  margin-right: 15px;
  font-weight: bold;
}

#formularz .wazne {
  color: darkred;
  text-align: left;
  font-weight: bold;
}

#zamowienieForm label {
	display: inline;
}

.zapytanie {
    margin-top: 0px;
    border-bottom: 1px solid #f68a00;
    font-size: 20px;
    margin-bottom: 10px;
}

.infoFormularzZamowienia {
    width: auto;
    text-align: justify;
}

.oferta_button {
    display: block;
    width: 77%;
    margin: auto;
    padding: 12px;
    text-decoration: none;
    text-transform: uppercase;
    background: #f68a00;
    border: 2px solid #cc7607;
    color: #fafafa;
    font-weight: bold;
    font-size: 14px;
    border-radius: 5px 5px 5px 5px;
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.oferta_button:hover {
    cursor: pointer;
	background-color: #e07b00;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.oferta_button_kup {
    display: block;
    width: 90%;
    margin: auto;
    padding: 12px;
    text-decoration: none;
    text-transform: uppercase;
    background: #f68a00;
    border: 2px solid #cc7607;
    color: #fafafa;
    font-weight: bold;
    font-size: 15px;
    border-radius: 5px;
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.oferta_button_kup:hover {
    cursor: pointer;
	background-color: #e07b00;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.payu[type=submit] {
    border: 0px;
    height: 50px;
    width: 290px;
    background: url('https://static.payu.com/pl/standard/partners/buttons/payu_account_button_long_03.png');
    background-repeat: no-repeat;
    cursor: pointer;
    color: transparent;
    margin: 15px 0px;
}

/*#kontaktDiv { padding: 20px 50px; }*/
#kontakt-dane-Row {
    display: table;
    width: 100%;
}

.wyroznijBoxSklepu {
    background: rgb(240, 147, 0);
    font-size: 1.2em;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    color: white;
    padding: 5px;
    margin-top: 20px;
}

a.wyroznijBoxSklepu {
    color: white;
    font-size: 1.2em;
}

#tabela {
    width: 100%;
    margin: 20px 0;
    padding: 0;
    text-align: left;
    display: table;
    border-collapse: collapse;
}

#tabela .head {
    background: #636161;
    color: #fafafa !important;
    height: 25px !important;
    font-weight: bold;
    font-size: 14px;
    border-right: 1px solid #fff !important;
    line-height: 25px;
    text-align: center;
    padding: 0px !important;
}

#tabela .tab-1c {
    width: 25%;
    text-align: center;
    color: #f68a00;
    display: table-cell;
    vertical-align: middle;
    padding: 5px;
}

#tabela .tab-1c a {
    color: #f68a00;
}

#tabela2 .tab-1c a {
    color: #f68a00;
}

#tabela .tab-2c {
    width: auto;
    display: table-cell;
    vertical-align: middle;
    border: #e1e0e0 1px solid;
    padding: 5px;
    font-size: 14px
}

#tabela .tab-3c {
    width: 20%;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    font-weight: bold;
    padding: 15px 5px;
}

#tabela .tab-3c p {
    margin: 0;
    padding: 3px;
}

#tabela .one {
    background-color: #fefefe;
    border: #e1e0e0 1px solid;
    display: table-row;
}

#tabela .two {
    background-color: #f8f8f8;
    border: #e1e0e0 1px solid;
    display: table-row;
}

#tabela .promo {
    color: #ffffff;
    background-color: #bb3a3a;
    display: table-row;
}

#tabela .cell {
    width: 50%;
    display: table-cell;
    vertical-align: middle;
    border: #e1e0e0 1px solid;
    padding: 5px;
    font-size: 14px
}

#tabela .lewa_orange {
    color: #f68a00;
    font-size: 16px;
    text-align: center
}

#tabela .cell p {
    margin: 0px;
}

#tabela a.linkElinker {
    color: #f68a00;
    font-size: 1.1em;
}

#tabelaPola {
    width: auto;
    margin: 0;
    padding: 0;
    text-align: left;
    display: table;
    border-collapse: collapse;
}

#tabelaPola .head {
    background: #636161;
    color: #fafafa !important;
    height: 25px !important;
    font-weight: bold;
    font-size: 14px;
    border-right: 1px solid #fff !important;
    line-height: 25px;
    text-align: center;
    padding: 0px !important;
}

#tabelaPola .tab-1c {
    width: 25%;
    text-align: center;
    color: #f68a00;
    display: table-cell;
    vertical-align: middle
}

#tabelaPola .tab-2c {
    width: auto;
    display: table-cell;
    vertical-align: middle;
    border: #e1e0e0 1px solid;
    padding: 5px;
    font-size: 14px
}

#tabelaPola .tab-3c {
    width: 15%;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    font-weight: bold
}

#tabelaPola .one {
    background-color: #fefefe;
    border: #e1e0e0 1px solid;
    display: table-row;
}

#tabelaPola .two {
    background-color: #f8f8f8;
    border: #e1e0e0 1px solid;
    display: table-row;
}

#tabelaPola .promo {
    color: #ffffff;
    background-color: #bb3a3a;
    display: table-row;
}

#tabelaPola .cell {
    width: 50%;
    display: table-cell;
    vertical-align: middle;
    border: #e1e0e0 1px solid;
    padding: 5px;
    font-size: 14px
}

#tabelaPola .lewa_orange {
    color: #f68a00;
    font-size: 16px;
    text-align: center
}

#tabelaPola .cell p {
    margin: 0px
}

#tabela2 {
    width: auto;
    margin: 0;
    padding: 0;
    text-align: left;
    display: table;
    border-collapse: collapse;
}

#tabela2 .head {
    background: #636161;
    color: #fafafa !important;
    height: 25px !important;
    font-weight: bold;
    font-size: 14px;
    border-right: 1px solid #fff !important;
    line-height: 25px;
    text-align: center;
    padding: 0px !important;
}

#tabela2 .tab-1c {
    width: 25%;
    text-align: center;
    color: #f68a00;
    display: table-cell;
    vertical-align: middle
}

#tabela2 .tab-2c {
    width: auto;
    display: table-cell;
    vertical-align: middle;
    border: #e1e0e0 1px solid;
    padding: 5px;
    font-size: 14px
}

#tabela2 .tab-3c {
    width: 20%;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    font-weight: bold;
	padding: 15px 5px;
}

#tabela2 .one {
    background-color: #fefefe;
    border: #e1e0e0 1px solid;
    display: table-row;
}

#tabela2 .two {
    background-color: #f8f8f8;
    border: #e1e0e0 1px solid;
    display: table-row;
}

#tabela2 .promo {
    color: #ffffff;
    background-color: #bb3a3a;
    display: table-row;
}

#tabela2 .cell {
    width: 50%;
    display: table-cell;
    vertical-align: middle;
    border: #e1e0e0 1px solid;
    padding: 5px;
    font-size: 14px
}

#tabela2 .lewa_orange {
    color: #f68a00;
    font-size: 16px;
    text-align: center
}

#tabela2 .cell p {
    margin: 0px
}

.l-polowa {
    width: 49%;
    display: inline-block;
    text-align: center;
}

.p-polowa {
    width: 50%;
    display: inline-block;
    text-align: center;
}

#demo {
    text-align: center;
    padding-bottom: 10px;
    font-weight: bold
}

#demo a {
    color: #636161;
    text-decoration: none;
}

#demo a:hover {
    text-decoration: underline;
}

#nav_tabs .arrowdown {
    border: solid #fff;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    margin-right: 5px;
    margin-bottom: 2px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

#nav_tabs {
    margin: 0 0 20px 0;
    padding: 0;
    /* border-bottom: 1px solid rgba(36,120,180,0.5); */
	  scroll-margin-top: 100px;
}

#main3 > article,
#main3 > article > header,
#main3 article section,
#nav_tabs {
  scroll-margin-top: 85px; /* Wysokość Twojego głównego nagłówka.
                             Sprawdź w narzędziach deweloperskich, ile wynosi.
                             85px wydaje się być dobrym początkiem. */
}

#nav_tabs ul {
    text-align: left;
    color: #0576d2;
    list-style: square;
    padding: 0
}

#nav_tabs li {
    font-size: 0.9em;
    display: inline-block;
    list-style-type: square;
    margin-right: 3px;
    margin-bottom: 5px;
    padding: 5px 10px;
    background: #439843;
    border: 1px solid #357135;

    border-radius: 5px 5px 5px 5px;
}

#nav_tabs li.pobierz {
    font-size: 0.9em;
    /*background: #022769;*/
    border: 1px solid #011c4c;

    background: rgb(2, 39, 105);
    background: -moz-linear-gradient(180deg, rgba(2, 39, 105, 1) 0%, rgba(2, 30, 82, 1) 30%, rgba(2, 30, 82, 1) 70%, rgba(2, 39, 105, 1) 100%);
    background: -webkit-linear-gradient(180deg, rgba(2, 39, 105, 1) 0%, rgba(2, 30, 82, 1) 30%, rgba(2, 30, 82, 1) 70%, rgba(2, 39, 105, 1) 100%);
    background: linear-gradient(180deg, rgba(2, 39, 105, 1) 0%, rgba(2, 30, 82, 1) 30%, rgba(2, 30, 82, 1) 70%, rgba(2, 39, 105, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#022769", endColorstr="#022769", GradientType=1);
}

#nav_tabs li.kup {
    font-size: 0.9em;
    background: #af2322;
    border: 1px solid #941d1c
}

#nav_tabs li.wazne {
    font-size: 0.9em;
    background: #cc7607;
    border: 1px solid #cc7607
}

#nav_tabs a {
    /*  font-family: 'Roboto', sans-serif;*/
    text-decoration: none;
    color: #fff;
    text-transform: uppercase;
}

#nav_tabs a:hover {
    /*  font-weight: bold; */
    color: #ffeaca;
}

#opis_linki {
    margin: 0 0 35px 0;
    padding: 0;
}

#opis_linki ul {
    text-align: center;
    color: #0576d2;
    list-style: square;
    padding: 0
}

#opis_linki li {
    display: inline;
    list-style-type: square;
    padding-right: 15px
}

#opis_linki a {
    text-decoration: none;
    color: #0576d2;
}

#opis_linki a:hover {
    font-weight: bold;
}

#opis_linki_main {
    margin: 30px 0 30px 0;
    padding: 0;
}

#opis_linki_main ul {
    text-align: center;
    color: #0576d2;
    list-style: square;
    padding: 0;
}

#opis_linki_main li {
    list-style-type: square;
    padding-right: 15px;
    font-size: 1.5em;
    display: inline-block;
    width: 31%;
}

#opis_linki_main a {
    text-decoration: none;
    color: #315584;
}

#opis_linki_main a:hover {
    font-weight: bold;
}

#opis_linki_main .boxy {
    height: 250px;
    margin: 5px 0;
}

#opis img {
    max-width: 100%;
}

#linki_rozwiazania {
    margin: 0 0 0 0;
    padding: 0;
    background: linear-gradient(to bottom, #F3F3F3 0%, #EFEFEF 100%) repeat scroll 0% 0% transparent;
    height: auto;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    vertical-align: central
}

#linki_rozwiazania ul {
    text-align: center;
    font-size: auto;
    color: #0576d2;
    display: table;
    width: 100%;
    padding: 0;
    list-style-type: square;
}

#linki_rozwiazania li {
    list-style-type: square;
    padding-right: 15px;
    display: table-cell;
    width: auto;
    line-height: 40px;
}

#linki_rozwiazania a {
    text-decoration: none;
    color: #0576d2;
}

#linki_rozwiazania a:hover {
    color: rgba(14, 91, 155, 1);
}

.stara_cena {
    text-decoration: line-through;
    font-size: 0.85em;
}

.promocja {
    color: darkred;
    font-size: 1.1em;
}

#licznik {
    display: inline-block;
    width: 100%;
    text-align: center;
    margin: auto;
}

.block-wrapper {
    margin-right: auto;
    margin-left: auto;
}

.block {
    display: inline-block;
    color: #f78f1e;
    border: 3px solid #f78f1e;
    padding-top: 20px;
}

.blockm {
    width: 170px;
    height: 125px;
    margin: 10px
}

.blockd {
    width: 170px;
    height: 125px;
    margin: 10px
}

.block p {
    margin: 0;
}

.block p i {
    font-size: 40px;
    color: #f78f1e;
}

.counter-wrapper {
    font-weight: 700;
    margin: 5px 0px 5px 0px;
    font-size: 25px;
}

.text-block {
    font-size: 17px;
}

/* icon */
.lnr-wrapper {
    margin-top: 10px
}

.lnr {
    color: #f78f1e;
    font-size: 55px;
}

.fb-like {
    line-height: 7px;
}

.social {
    display: inline-block;
    padding: 5px
}

.tabelaOferta {
    width: 100%;
    margin: 5px 0;
    padding: 0;
    text-align: left;
    display: block;
    border-collapse: collapse;
}

.tabelaOferta_head {
    background: #2d4f7c;
    color: #fefefe !important;
    height: 30px !important;
    font-weight: bold;
    font-size: 14px;
    border-right: 1px solid #fff !important;
    line-height: 30px;
    text-align: center;
    padding: 0px !important;
    text-transform: uppercase;
}

.tabelaOferta_tab-1c {
    width: 25%;
    text-align: center;
    color: #f68a00;
    display: table-cell;
    vertical-align: middle;
    padding: 10px;
}

.tabelaOferta_tab-2c {
    width: auto;
    display: table-cell;
    vertical-align: middle;
    border: #e1e0e0 1px solid;
    padding: 5px;
    font-size: 14px
}

.tabelaOferta_tab-3c {
    width: 15%;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    font-weight: bold
}

.tabelaOferta_one {
    background-color: #fefefe;
    border: #e1e0e0 1px solid;
    display: table-row;
}

.tabelaOferta_two {
    background-color: rgba(248, 248, 248, 0.4);
    border: #e1e0e0 1px solid;
    display: table-row;
}

.tabelaOferta_promo {
    color: #ffffff;
    background-color: #bb3a3a;
    display: table-row;
}

.tabelaOferta_cell {
    width: 50%;
    display: table-cell;
    vertical-align: middle;
    border: #e1e0e0 1px solid;
    padding: 5px;
    font-size: 14px
}

.tabelaOferta_lewa_orange {
    color: #f68a00;
    font-size: 16px;
    text-align: center
}

.tabelaOferta_cell p {
    margin: 0px;
    font-size: 18px
}

.tabelaOferta_tab-2c a {
    color: #f68a00;
    text-decoration: none;
    font-size: 24px;
    font-weight: bold;
    outline: none
}

.tabelaOferta_tab-2c a:hover {
    text-decoration: none;
}

.tabelaOferta_tab-1c img {
    max-height: 260px;
    max-width: 220px;
    outline: none;
}

.tabelaOferta_tab-3c p {
    font-size: 18px;
    margin: 0px 0px 15px 0px
}

.tabelaOferta_tab-3c .stara_cena {
    margin: 0;
    font-size: 16px;
}

/* Styl dla nagłówka tabeli */
.tabelaOferta_one {
    background: #636161;
}

/* Style dla komórek nagłówka */
.tabelaOferta_head.tabelaOferta_tab-1c {
    border-left: 1px solid #e1e0e0;
}

.tabelaOferta_head.tabelaOferta_tab-3c {
    border-right: 1px solid #e1e0e0;
}

/* --- Klasy utworzone na podstawie stylów inline --- */

/* Klasa dla wierszy z czerwonym tłem */
.row-highlighted {
    background-color: rgba(248, 62, 62, 0.1);
}

/* Klasa dla obrazka o specyficznej szerokości */
.image-large-width {
    width: 200px;
}

/* Klasa dla komórki opisu wyrównanej do lewej */
.text-align-left {
    text-align: left;
}

/* Klasa dla mniejszego, pogrubionego tekstu (np. info o dostawie) */
.font-small-bold {
    font-size: 0.85em;
    font-weight: bold;
}

/* Klasa dla mniejszego, normalnego tekstu (np. adnotacje) */
.font-small-normal {
    font-size: 0.85em;
    font-weight: normal;
}

#filterInputGT {
    font-size: 1.1em;
    height: 40px;
    padding: 5px 20px 3px 35px;
    border: 1px solid #ddd;
    background-image: url('../images/searchicon.png');
    background-position: 7px 9px;
    background-repeat: no-repeat;
    width: 100%;
    margin-top: 5px;
    box-sizing: border-box;
}

#filterInputNexo {
    font-size: 1.1em;
    height: 40px;
    padding: 5px 20px 3px 35px;
    border: 1px solid #ddd;
    background-image: url('../images/searchicon.png');
    background-position: 7px 9px;
    background-repeat: no-repeat;
    width: 100%;
    margin-top: 5px;
    box-sizing: border-box;
}

#filterInputNavireo {
    font-size: 1.1em;
    height: 40px;
    padding: 5px 20px 3px 35px;
    border: 1px solid #ddd;
    background-image: url('../images/searchicon.png');
    background-position: 7px 9px;
    background-repeat: no-repeat;
    width: 100%;
    margin-top: 5px;
    box-sizing: border-box;
}

h2.navadds {
    color: #ef841e;
}


.baner {
    text-align: center;
    max-width: 1200px;
    margin: auto;
}

#uslugiText {
    padding: 15px 15px;
    text-align: justify;
    font-weight: 300;
    font-size: 1em
}

#uslugiText .opis {
    font-size: 0.9em;
    font-weight: 300;
    background: #fafafa;
    padding: 5px 20px;
    color: #3e3e3e
}

#uslugiText .kontakt {
    width: 80%;
    max-width: 450px;
    color: #ffffff;
    margin: auto;
    text-align: center;
    padding: 0 0px 10px 0;
}

#uslugiText .kontakt a {
    background: #f68a00;
    line-height: 50px;
    height: 50px;
    display: block;
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1.2em;
    font-weight: 300;
    border-radius: 5px;
    border: 1px solid #ce7500;
}

#uslugiText h1 {
    color: #777;
    font-size: 1.5em;
    text-align: center;
    font-weight: 300;
}

#uslugiSiBoxy {
    display: table;
    text-align: center;
    width: 100%;
    margin: 20px auto
}

#uslugiSiBoxy .box {
    display: table-cell;
    width: 33%;
    background: #fafafa;
    padding: 20px 0px 5px 0;
}

#uslugiSiBoxy .box:hover {
    background: #f0f0f0;
}

#uslugiSiBoxy .lnr {
    font-size: 85px;
    color: #ffffff;
}

#uslugiSiBoxy .spec {
    width: 85%;
    margin: 0px auto;
    text-align: left;
    background: #ffffff
}

#uslugiSiBoxy .spec div {
    padding: 0px 10px;
    border: 1px solid #ddd;
    list-style: none;
    font-size: 0.9em;
    color: #777777
}

#uslugiSiBoxy .box-top {
    background: #f68a00;
    color: #ffffff;
    padding: 20px 0 5px 0;
    width: 85%;
    margin: auto;
}

#uslugiSiBoxy h2 {
    color: #ffffff;
}

#uslugiSiBoxy h3 {
    text-align: left;
    border-bottom: 0;
    color: #f68a00;
    text-transform: uppercase;
    margin: 5px 0px
}

#uslugiSiBoxy p {
    margin: 5px 0;
}

#wdrozenia {
    font-size: 0.9em;
    font-weight: 300;
    color: #3e3e3e;
}

#artykul .image {
    text-align: center;
    width: 100%;
}

#artykul p {
    text-align: justify;
}

#artykul img {
    max-width: 100%;
    max-height: 600px;
    margin: auto;
}

#artykul h2 {
    color: #f68a00;
    font-size: 1.2rem;
    margin-top: 30px;
}

#artykul h3 {
    font-size: 1.1rem;
    color: #000;
    font-weight: bolder;
    border: none;
    padding: 0;
    margin: 0;
}

#artykul .banner {
    font-size: 1.1em;
    font-weight: 300;
    background: #fafafa;
    padding: 5px 20px;
    color: #3e3e3e
}

#artykul .banner p {
    text-align: center;
    font-size: 1.2em
}

#artykul .kontakt {
    width: 80%;
    max-width: 450px;
    color: #ffffff;
    margin: auto;
    text-align: center;
    padding: 0 0px 10px 0;
}

#artykul .kontakt a {
    background: #f68a00;
    display: block;
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1.2em;
    font-weight: 300;
    border-radius: 5px;
    border: 1px solid #ce7500;
    padding: 15px 5px;
}

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

    #artykul table {
        font-size: 0.75em;
    }
}

@media only screen and (max-width: 450px) {
    #artykul table {
        font-size: 0.6em;
    }
}

@media only screen and (max-width: 38px) {   
    #artykul .table-compare {
        display: none;
    }
}


#artykul .table-compare .head {
    background: #011c4c;
    color: white;
    text-align: center;
}

#artykul .table-compare th,
td {
    text-align: center;
    padding: 8px;
}

#artykul .table-compare td {
    font-weight: normal;
    font-size: 1.0em;
    border-left: 1px solid;
    border-color: #d5d5d5;
}

#artykul .table-compare td.desc {
    text-align: left;
    padding-left: 10px;
    padding-top: 10px;
    vertical-align: top;
}

#artykul .table-compare td.left {
    padding: 12px;
    text-align: left;
    font-weight: bolder;
    border-width: 0px 1px 0px 0px;
    border-style: solid;
    border-color: #d5d5d5;
    font-size: 1.0em;
}

#artykul td ul {
    margin: 0;
    padding: 0;
}

#artykul td ul li {
    list-style-type: none;
    padding: 0 8px;
}

#artykul td ul li:before {
    content: "-";
    display: inline-block;
    margin-left: -8px;
    width: 8px;
}

#artykul td .plus {
    color: darkgreen;
}

#artykul td .minus {
    color: darkred
}

#wdrozenia .box_wdroz {
    display: table;
    background: #fafafa;
    margin-top: 20px;
    padding: 5px 20px;
}

#wdrozenia .doubbox {
    display: table-cell;
    vertical-align: middle;
}

.box_wdroz h2 {
    margin: 10px 0;
    color: #315584;
    text-transform: uppercase
}

#wdrozenia .kontakt {
    margin-top: 20px
}

#wdrozenia .kontakt a {
    height: auto;
    padding: 5px;
    line-height: normal;
}


.table-compare {
    border-collapse: collapse;
    width: 100%;
    margin-top: 5px;
}

.table-compare th a {
    color: white;
    text-decoration: none;
    text-transform: uppercase;
}

.table-compare th {
    padding: 12px;
}

.table-compare th,
td {
    text-align: center;
    padding: 8px;
}

.table-compare td.left {
    padding: 12px;
    text-align: left;
    font-weight: normal;
    border-width: 0px 1px 0px 0px;
    border-style: solid;
    border-color: #d5d5d5;
    font-size: 1.0em;
}

.table-compare td {
    font-weight: bold;
    font-size: 1.2em
}

.table-compare tr {
    padding: 12px;
}

.table-compare tr:nth-child(even) {
    background-color: #f2f2f2
}


.table-compare .head {
    background: #011c4c;
    color: white;
    text-align: center
}

.alert {
    text-align: center;
    font-size: 25px;
    font-weight: bold;
    background: darkred;
    color: white;
    width: 72%;
    padding: 25px;
    margin: 30px auto 30px auto;
    text-transform: uppercase;
}

.alert a {
    color: white;
}

.wyroznik_box {
  font-size: 1.0em;
  background: #fafafa;
  padding: 5px 20px;
  color: #3e3e3e;
  margin-top: 25px;
  margin-bottom: 25px;
}

#edi {
    margin-top: 30px;
    padding: 15px 15px;
    text-align: justify;
    font-weight: 300;
    font-size: 1em;
}

#edi h1 {
    color: #f68a00;
    border-bottom: 1px solid #f68a00;
}

#edi h2 {
    color: #f68a00;
    /* border-bottom: 1px solid #f68a00;*/
}

#edi p {
    text-align: justify;
}

#edi ul {
    padding: 0px 5px 5px 15px;
}

#edi li {
    list-style-type: square;
}

#edi .opis {
    font-size: 0.9em;
    font-weight: 300;
    background: #fafafa;
    padding: 5px 20px;
    color: #3e3e3e;
    text-align: center !important;
}

#edi p.opis {
    font-weight: 300;
    background: #fafafa;
    padding: 0px 20px;
    color: #3e3e3e;
    font-size: 1.2em;
    text-align: center !important;
}

#edi .kontakt {
    width: 80%;
    max-width: 450px;
    color: #ffffff;
    margin: auto;
    text-align: center;
    padding: 0 0px 10px 0;
}

#edi .kontakt a {
    background: #f68a00;
    line-height: 50px;
    height: 50px;
    display: block;
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1.2em;
    font-weight: 300;
    border-radius: 5px;
    border: 1px solid #ce7500;
}

#edi img {
    max-width: 100%;
}


#change-list h4 {
    border-bottom: 1px solid #f68a00;
    margin: 10px 0 0 5px;
    padding: 0 5px 0 0;
    color: #f68a00;
}

#change-list h5 {
    font-size: 14px;
    margin: 10px 0 0 5px;
}

#change-list ul li {
    list-style-type: square;
}

#footer-list-box {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    align-content: flex-start;
}

#footer-list-box .box {
    width: 25%;
    text-align: left;
}

#footer-list-box ul {
    margin: 0 0 0 0;
    padding: 0;
}

#footer-list-box ul li {
    list-style: disc;
    margin-bottom: 5px;
    margin-left: 15px;
}

#footer-list-box h4 {
    list-style: none;
    margin: 15px 0px 15px 0;
    padding: 0;
}

#footer-list-box a {
    color: #e9ecef;
    text-decoration: none;
}

#footer-list-box a:hover,
#footer-list-box a:active {
    color: #ffffff;
    ;
    text-decoration: none;
}

#footer-container .last-box {
    margin: 20px 0 0 0;
    border-top: 1px solid;
    display: table;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
}

#footer-container .last-box-row {
    display: table-row
}

#footer-container .last-box-cell-l {
    display: table-cell;
    text-align: left;
    vertical-align: middle;
}

#footer-container .last-box-cell-r {
    display: table-cell;
    text-align: right;
    vertical-align: middle;
}

@media only screen and (max-width: 1135px) {
    #logo-top {
        width: auto;
    }

    #logo-top .logo_artoit {
        width: 170px;
    }

    #nav_top a {
        padding: 20px 5px;
    }
}


@media only screen and (max-width: 966px) {
    #linki_rozwiazania li {
        display: block;
    }

    .realizacje-box a {
        text-align: center;
    }

    .realizacje-box img {
        width: 90%;
    }

    .realizacje-box div {
        width: 100%;
        max-width: 305px;
        text-align: center;
    }

    #ytFilmik {
        width: 80%
    }

    #wdrozenia .box_wdroz {
        display: block;
        background: #fafafa;
        margin-top: 20px;
        padding: 5px 20px;
    }

    #wdrozenia .doubbox {
        display: block;
    }

    .screen-nomax img {
        width: 100%;
        margin: auto;
    }
}

@media only screen and (max-width: 800px) {
    .screen img {
        width: 80%;
    }

    .center img {
        width: 80%;
    }

    #tabela .one {
        display: none;
    }

    #tabela .two .tab-1c,
    #tabela .two .tab-2c,
    #tabela .two .tab-3c {
        display: block;
        width: 100%;
        padding: 5px 0;
    }

    #tabela .two .tab-2c {
        border-left: none;
        border-right: none;
    }

    #main3 .box-r {
        display: block;
        width: auto
    }

    #main3 .product-top-img {
        max-width: 310px;
    }

    #main3 .box-r img {
        max-height: 275px;
        max-width: 90%;
    }

    #main3 .box-r {
        padding: 0;
        margin: 0;
    }

    #main3 article {
        padding: 10px;
        margin: 0;
    }

    #oferta_index .box div {
        display: block;
    }

    #oferta_index h2 {
        text-align: center;
    }

    #oferta_index .idx-box-right {
        text-align: center;
    }

    #oferta_index .logoPartnera {
        display: block;
        width: 90%;
    }

    .tabelaOferta_one {
        display: none;
    }

    .tabelaOferta_two {
        display: block;
        padding: 10px;
    }

    .tabelaOferta_tab-1c,
    .tabelaOferta_tab-2c,
    .tabelaOferta_tab-3c {
        display: block;
        width: 100%;
        text-align: center;
        padding: 0;
        margin: 0;
    }

    .tabelaOferta_tab-2c {
        border-left: 0;
        border-right: 0;
    }

    .tabelaOferta_tab-3c p {
        margin-top: 10px;
    }

    #footer-container .cont,
    #footer-container .copyr,
    .foot-l,
    .foot-r {
        display: block;
        float: none;
        margin: 7px 0 7px 0;
        width: 100%;
        text-align: center;
        padding: 5px 0;
    }

    #footer-container .cont {
        width: 65%;
        margin: auto;
    }

    #zamowienieForm,
    #kontaktDiv {
        padding: 5px
    }

    #formularz .kontaktFormRow,
    #formularz .form-l,
    #formularz .form-p {
        display: block;
        width: 100%;
    }

    #language,

    #logo-top {
        display: block;
        margin: auto;
        max-width: 300px;
        max-height: auto;
        text-align: center;
    }

    #header-container nav ul li {
        position: relative;
        box-sizing: border-box;
        display: block;
        padding: 5px 5px 20px 5px;
    }

    #header-container .top-r {
        display: block;
        text-align: center;
        padding: 0;
    }

   /* #oferta_index .box {
        display: block !important;
        width: 100% !important;
        margin: 0;
    }*/
	
	#oferta_index .row {
    flex-direction: column; 
    gap: 10px; 
}
	
	#oferta_index .box {
		 width: 100% !important; /* Upewniamy się, że box zajmuje całą szerokość */
    margin-bottom: 0; /* Usuwamy stary margines, bo `gap` jest lepszy */
		
		background-color: #ffffff;
		border: 1px solid #e9ecef; /* Delikatna ramka */
		border-radius: 8px; /* Zaokrąglone rogi */
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); /* Subtelny cień */
		padding: 15px 0px;
		transition: transform 0.3s ease, box-shadow 0.3s ease;
	}

	#oferta_index .box:hover {
		transform: translateY(-5px); /* Lekkie uniesienie po najechaniu */
		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
	}

    #oferta_index .logoPartnera {
        display: block;
        width: 90%;
    }

    iframe {
        display: none;
    }

    #main3 .box-l {
        display: none;
    }

    #uslugiSiBoxy {
        display: block;
        text-align: center;
        width: 100%;
        margin: 20px auto
    }

    #uslugiSiBoxy .box {
        display: block;
        width: 100%;
        background: #fafafa;
        padding: 20px 0px 5px 0;
    }

    #wdrozenia img {
        width: 90%
    }

    #opis_linki_main li {
        display: none;
    }

    #footer-list-box {
        flex-direction: column;
    }

    #footer-list-box .box {
        width: 100%;
    }
}

@media only screen and (max-width: 550px) {
    #opis_linki li {
        display: block;
        padding: 7px;
    }

    #footer-container .last-box-row {
        display: block;
    }

    #footer-container .last-box-cell-l {
        display: block;
        text-align: center;
    }

    #footer-container .last-box-cell-r {
        display: block;
        text-align: center;
        padding: 10px 0px;
    }

    .kontakt-box {
        width: 100%;
        max-width: 100%;
        padding: 0px;
    }

    .form-p {
        padding: 0px;
    }

    #formularz input,
    #formularz textarea {
        padding: 0px;
    }

    #zamowienieForm,
    #kontaktDiv {
        padding: 0px;
    }

    #main3 article {
        padding: 0px;
    }

    #main3 .box-r {
        border: 0px;
    }
	
	#nav_tabs li {
		display: block;
		text-align: center;
		margin-right: auto;
		margin-left: auto;
		margin-top: 10px;
		max-width: 300px;
	}
}

@media only screen and (max-width: 480px) {
    #oferta_index img {
        max-width: 100%;
        height: auto;
    }

    #kontaktDiv .kontakt-box {
        display: block;
        max-width: none;
        width: auto;
    }

    #kontaktDiv img {
        display: none;
    }


}

@media only screen and (max-width: 440px) {
    #oferta_index h1 {
        font-size: 1.4em
    }
}

@media screen and (max-width: 370px) {
    .uslugiText img {
        width: 90%;
    }

    .uslugiText {
        text-align: justify;
    }

    #main3 .box-r,
    #main3 .box-l {
        display: block;
        width: auto
    }

    #main3 .box-r img {
        display: none;
    }

    #main3 .box-l {
        display: none;
        text-align: center;
        max-width: none;
    }

    #main3 ul {}

    .down {
        width: 100%;
    }

    .down a {
        width: 100%;
        min-width: 100px;
    }

    #slider-dol {
        display: none;
    }

    #logo {
        width: 90%;
    }
}

@media only screen and (max-width: 300px) {
    #footer-container .cont {
        width: 95%;
        margin: auto;
    }
}

/* --- Style dla Hamburgera i Menu Mobilnego --- */

/* --- POPRAWKA: Style dla Hamburgera i Menu Mobilnego --- */

#hamburger-btn {
    display: none; /* Ukryty na desktopie */
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1001;
    position: absolute; /* Ułatwia pozycjonowanie w nagłówku */
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

#hamburger-btn span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #ffffff;
    margin: 5px 0;
    transition: all 0.3s ease-in-out;
}

/* Animacja hamburgera do "X" */
#hamburger-btn.is-active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
#hamburger-btn.is-active span:nth-child(2) {
    opacity: 0;
}
#hamburger-btn.is-active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}


/* Media Query dla mobile */
@media only screen and (max-width: 966px) {
    .top-r {
        position: static; /* Reset pozycjonowania dla rodzica */
    }
    
    #nav_top {
        display: none;
        position: absolute;
        top: 68px; /* Dostosuj do wysokości nagłówka */
        left: 0;
        width: 100%;
        background-color: #315584;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        z-index: 1000;
    }

    #nav_top.is-active {
        display: block;
    }

    #nav_top ul li {
        display: block;
        width: 100%;
        text-align: center;
		margin-top: 15px;
    }

    #nav_top li:last-child a {
        margin-left: 0;
        border-radius: 0;
    }
    
    .dropdown .dropdown-content {
        display: none; /* Ukrywamy dropdowny */
        position: static;
        background-color: rgb(49, 85, 132);
        box-shadow: none;
        width: 100% !important;
        border-radius: 0;
    }
    
    .dropdown > a:after {
        content: ' ▼';
        font-size: 0.7em;
        display: inline-block;
        margin-left: 5px;
        transition: transform 0.3s ease;
    }

    .dropdown > a.submenu-active:after {
        transform: rotate(180deg);
    }
    
    #hamburger-btn {
        display: inline-block;
    }
}

/* --- Style dla Hamburgera i Menu Mobilnego --- */

#hamburger-btn {
    display: none; /* Domyślnie ukryty na desktopie */
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1001;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

#hamburger-btn span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #ffffff;
    margin: 5px 0;
    transition: all 0.3s ease-in-out;
}

/* Animacja hamburgera do "X" */
#hamburger-btn.is-active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
#hamburger-btn.is-active span:nth-child(2) {
    opacity: 0;
}
#hamburger-btn.is-active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}


/* Reguły dla urządzeń mobilnych */
@media only screen and (max-width: 966px) {

    #hamburger-btn {
        display: inline-block; /* Pokaż hamburger na mobile */
    }
    
    #nav_top {
        display: none; /* !! KLUCZOWA ZMIANA: Ukryj menu domyślnie na mobile !! */
        position: absolute;
        top: 68px; /* Dostosuj do wysokości nagłówka */
        left: 0;
        width: 100%;
        background-color: #315584;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        z-index: 1000;
    }

    #nav_top ul li {
        display: block;
        width: 100%;
        text-align: center;
		margin-top: 15px;
    }

    .dropdown .dropdown-content {
        display: none; /* Ukrywamy podmenu */
        position: static;
        background-color: rgb(49, 85, 132);
        box-shadow: none;
        width: 100% !important;
        border-radius: 0;
    }
    
    /* Strzałka przy rozwijanych elementach */
    .dropdown > a:after {
        content: ' ▼';
        font-size: 0.7em;
        display: inline-block;
        margin-left: 5px;
        transition: transform 0.3s ease;
    }

    .dropdown > a.submenu-active:after {
        transform: rotate(180deg);
    }
}

:target {
  scroll-margin-top: 150px; /* Zapas na wysokość nagłówka, można dostosować */
}

/* Style dla rozwijanego pola kodu rabatowego */
.discount-details {
    margin-bottom: 5px;
}

.discount-summary {
    cursor: pointer;
    font-weight: bold;
    color: #575757; 
    padding: 5px 0;
    outline: none; 
}

.discount-summary:hover {
    color: #f68a00; /* Kolor pomarańczowy po najechaniu */
}

/* Ukrywa domyślną strzałkę w WebKit (Chrome, Safari) */
.discount-summary::-webkit-details-marker {
    display: none;
}

.discount-content {
    padding-top: 10px;
}

/* Style dla dymka informacyjnego NIP */
/* --- NOWE Style dla dymka NIP (ikona w .form-l) --- */

/* --- FINALNA WERSJA - Style dla dymka NIP (ikona w .form-l) --- */

/* 1. Wrapper wewnątrz .form-l, który staje się kontenerem flex */
.label-wrapper {
    display: flex;
    justify-content: space-between; /* Rozsuwa tekst i ikonę */
    align-items: center;          /* Centruje je w pionie */
    width: 100%;
    height: 100%;
}

/* 2. Wrapper dla samej ikony (dla pozycjonowania dymka) */
.tooltip-wrapper {
    position: relative; 
}

/* 3. Styl ikony (bez zmian) */
.info-icon {
    display: flex;
    justify-content: center; /* Centrowanie w poziomie */
    align-items: center;     /* Centrowanie w pionie */
    
    width: 22px;
    height: 22px;
    background-color: #f68a00;
    color: white;
    border-radius: 50%;
    font-size: 16px; /* Lekkie zmniejszenie dla lepszych proporcji */
    font-weight: bold;
    font-family: 'Arial', sans-serif; /* Poprawia renderowanie litery 'i' */
    cursor: pointer;
    user-select: none;
    transition: background-color 0.3s ease;
    transform: translateX(-1px); 
}

.info-icon:hover {
    background-color: #f68a00;
}

/* 4. Dymek - pozycjonowanie względem .nip-icon-wrapper */
.tooltip-text {
    visibility: hidden;
    opacity: 0;
    width: 250px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 12px;
    position: absolute;
    z-index: 10;
    bottom: 125%; /* Odstęp od góry */
    left: 50%;
    transform: translateX(-50%); /* Idealne centrowanie dymka nad ikoną */
    transition: opacity 0.3s ease;
    font-weight: normal;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* 5. Strzałka dymka */
.tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

/* 6. Klasa do pokazywania dymka */
.tooltip-text.visible {
    visibility: visible;
    opacity: 1;
}

/* 7. Usuwamy style, które mogłyby zostać z poprzedniej wersji (opcjonalnie, dla pewności) */
.nip-label-container {
    display: block; /* Przywracamy domyślne zachowanie */
}
.form-p input[name="nip"] {
    padding-right: 5px !important;
}

/* Styl dla wyróżnionego boksu ze statusem zamówienia */
/* --- MAKSYMALNIE WIDOCZNY boks ze statusem zamówienia --- */
.order-status-box {
    margin-top: 30px;
    margin-bottom: 20px;
    padding: 20px 25px;
    background-color: #f68a00; /* ZMIANA: Pełne, pomarańczowe tło */
    color: #ffffff; /* ZMIANA: Biały kolor tekstu i ikony dla kontrastu */
    border-radius: 8px; /* Zwiększone zaokrąglenie */
    border: 1px solid #e07b00; /* Ciemniejsza ramka dla głębi */
    display: flex;
    align-items: center;
    text-align: center;
    animation: pulse-glow 2.5s infinite; /* ZMIANA: Dodanie animacji */
}

.order-status-box .status-icon {
    /* --- NOWE STYLE DLA TŁA IKONY --- */
    background-color: #ffffff;    /* 1. Białe tło */
    color: #f68a00;               /* 2. Pomarańczowy kolor samej strzałki */
    width: 35px;                  /* 3. Stała szerokość, aby stworzyć koło */
    height: 35px;                 /* 4. Stała wysokość */
    border-radius: 50%;           /* 5. Idealnie okrągły kształt */
    
    /* Użycie Flexbox do perfekcyjnego wyśrodkowania strzałki w kole */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Dodatkowe ulepszenia */
    margin-right: 20px;           /* Zwiększony margines dla "oddechu" */
    font-size: 1.6em;             /* Lekka korekta rozmiaru dla lepszych proporcji */
    flex-shrink: 0;               /* Zapobiega kurczeniu się koła przy małej szerokości ekranu */
}

.order-status-box .status-link {
    font-size: 1.25em; /* Lekko większy font */
    font-weight: 700; /* Pogrubienie */
    color: #ffffff; /* ZMIANA: Link również musi być biały */
    text-decoration: none;
    transition: text-shadow 0.2s ease-in-out;
}

.order-status-box .status-link:hover {
    text-decoration: underline;
    text-shadow: 0 0 5px rgba(0,0,0,0.3); /* Lepszy efekt hover na ciemnym tle */
}

@keyframes pulse-glow {
    0% {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
    50% {
        box-shadow: 0 6px 25px rgba(246, 138, 0, 0.7); /* "Rozświetlony" cień */
    }
    100% {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
}