div.webRow {
  flex: 1;
  display: flex;	
  width: 100%;
  margin-top : 5px;
  padding: 10px;
  flex-wrap: wrap;
  align-items: stretch;
}

div.webBox
{
justify-content: center;
align-items: center;
border: 1px solid lightgrey;
border-radius: 10px;
padding: 10px;
text-align: center;
}

div.loginParent {
  display: flex; /* Ustaw DivA jako Flexbox */
  justify-content: center; /* Wyśrodkowanie poziome */
  align-items: center; /* Wyśrodkowanie pionowe */
  width: 100%; /* Opcjonalna szerokość DivB */
  height: 100%; /* Opcjonalna wysokość DivB */
}

div.login {
  display: flex;
  margin-top : 10%;
  border: 1px solid lightgrey;
  border-radius: 10px;
  height: auto;
  max-width: 635px;
  text-align: center;
  justify-content: center;
}

div.box {
	width: 100%;
	height: auto;
}

div.box50 {
	min-width: 50px;
    max-width: 50px;
    height: 50px;
}

div.box100 {
    min-width: 100px;
	max-width: 100px;
	height: 100px;
}

div.box150 {
	min-width: 150px;
    max-width: 150px;
	height: 250px;
}

div.box200 {
    min-width: 200px;
    max-width: 200px;
	height: 200px;
}

div.box250 {
    min-width: 250px;
    max-width: 250px;
	height: 250px;
}

div.box300 {
    min-width: 300px;
    max-width: 300px;
	height: 300px;
}

div.box350 {
    min-width: 350px;
    max-width: 350px;
	height: 350px;
}

div.box400 {
    min-width: 400px;
    max-width: 400px;
	height: 400px;
}

div.box450 {
    min-width: 450px;
    max-width: 450px;
	height: 450px;
}

div.box500 {
    min-width: 500px;
    max-width: 500px;
	height: 500px;
}

div.box600 {
            min-width: 600px;
            max-width: 600px;
			height: 600px;
}

div.box700 {
            min-width: 700px;
            max-width: 700px;
			height: 700px;
}

div.box800 {
            min-width: 800px;
            max-width: 800px;
			height: 800px;
}

div.box900 {
            min-width: 900px;
            max-width: 900px;
			height: 900px;
}

div.box1000 {
            min-width: 1000px;
            max-width: 1000px;
			height: 1000px;
}

div.box1200 {
            min-width: 1200px;
            max-width: 1200px;
			height: 1200px;
}

div.flex {
  display: flex;
  width: auto;
}

div.block {
  display: block;
  width: auto;
}

div.b1 {
border: 1px solid lightgrey;	
}

div.m1 {
margin: 1px;
}

div.m2 {
margin: 2px;
}

div.m3 {
margin: 3px;
}

div.m4 {
margin: 4px;
}

div.m5 {
margin: 5px;
}

div.m10 {
margin: 10px;
}

div.mt1 {
margin-top: 1px;
}

div.mt3 {
margin-top: 3px;
}

div.mt5 {
margin-top: 5px;
}

div.mt10 {
margin-top: 10px;
}

div.mb1 {
margin-bottom: 1px;
}

div.mb3 {
margin-bottom: 3px;
}

div.mb5 {
margin-bottom: 5px;
}

div.mb10 {
margin-bottom: 10px;
}

div.p1 {
padding: 1px;
}

div.p2 {
padding: 2px;
}

div.p3 {
padding: 3px;
}

div.p4 {
padding: 4px;
}

div.p5 {
padding: 5px;
}

div.p10 {
padding: 10px;
}

div.p20 {
padding: 20px;
}

div.p30 {
padding: 30px;
}

div.p40 {
padding: 40px;
}

div.p50 {
padding: 50px;
}

div.r10 {
border-radius: 10px;
}

div.f9 { 
  font-size: 9px;
}

div.f10 { 
  font-size: 10px;
}

div.f11 { 
  font-size: 11px;
}

div.f12 { 
  font-size: 12px;
}

div.f13 { 
  font-size: 13px;
}

div.f14 { 
  font-size: 14px;
}

div.f16 { 
  font-size: 16px;
}

div.f18 { 
  font-size: 18px;
}

div.f20 { 
  font-size: 20px;
}

div.f22 { 
  font-size: 22px;
}

div.f24 { 
  font-size: 24px;
}

div.f28 { 
  font-size: 28px;
}

div.f32 { 
  font-size: 32px;
}

div.f36 { 
  font-size: 36px;
}

div.f40 { 
  font-size: 40px;
}

div.f50 { 
  font-size: 50px;
}

div.b1 {
border: 1px solid lightgrey;	
}


div.bold {
  font-weight: bold;
}

div.center {
  text-align: center;
  justify-content: center;
}

div.left {
  text-align: left;
  justify-content: left;
}

div.right {
  text-align: right;
}

a {
    color: darkblue;        /* Kolor czarny dla linków */
    text-decoration: none; /* Brak podkreślenia */
}

a:hover {
    color: darkblue;          /* Zmiana koloru na niebieski po najechaniu */
}

/* Style the list */
ul.webBreadcrumb {
  padding: 10px 16px;
  list-style: none;
}

/* Display list items side by side */
ul.webBreadcrumb li {
  display: inline;
}

/* Add a slash symbol (/) before/behind each list item */
ul.webBreadcrumb li+li:before {
  padding: 8px;
  color: black;
  content: ">\00a0";
}

/* Add a slash symbol (/) before/behind each list item */
li.webBreadcrumb {
  padding: 8px;
  color: black;
  content: "x\00a0";
}

/* Add a color to all links inside the list */
ul.webBreadcrumb li a {
  color: #0275d8;
  text-decoration: none;
}

/* Add a color on mouse-over */
ul.webBreadcrumb li a:hover {
  color: #01447e;
  text-decoration: underline;
}


div.webLogo {
            display: flex;
			margin: 0px;           
			width: 100%;
            height: 130px;
            justify-content: center;
            align-items: center;			
}

.webBox a {
            width: 100%;
            height: 100%;
            color: inherit; /* Inherit color from parent */
            text-decoration: none; /* Remove underline from links */
}

.webLogo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}


div.webBoxLR {
  display: flex; /* Ustawienie kontenera na flexbox */
  justify-content: space-between; /* Rozłożenie elementów na krańcach kontenera */
  padding-top: 5px;
  border-top: 1px solid lightgray;
  text-align: center;
  margin-left: 30px;
  margin-right: 30px;
  margin-top: 10px;
}	

div.webItemLR {
  width: calc(50% - 5px); /* Szerokość obliczana na podstawie połowy szerokości kontenera i odstępu między divami */
  box-sizing: border-box; /* Ustawienie modelu pudełka na box-sizing */
  bottom: 10;
  padding-top: 5px;
  color: #5f5f5f;
  font-size: 13px; 

}


img.gal {
max-width: 100%;
height: auto;	
}

img.rounded-circle {
height: auto;		
}

img.logo {
  width: 90px;
 object-fit: contain; 	
}

img.avatar {
  width: 200px;
  height: 200px;
  border-radius: 50%;	
}

img.avatar5 {
  width: 100px;
  height: 100px;
  border-radius: 50%;	
}

a img {
    border: none; 
    transition: transform 0.3s; /* Dodanie płynnego efektu przejścia */
}

a:hover img {
    transform: scale(1.03); /* Przy najechaniu na obrazek, zwiększenie jego rozmiaru o 10% */
}

div.counter {
  color: #fff;
  font-size: 24px;  
}


html, body {
  margin: 0;
  padding: 0;
  height: 100%; /* Pełna wysokość widoku przeglądarki */
}

main {
  min-height: calc(100vh - 146px); /* Odejmujemy wysokość stopki */
  padding-bottom: 20px;
}

footer {
  height: 50px; /* Wysokość stopki */
  background-color: #333;
  color: #fff;
  display: flex;
  justify-content: center; /* Wyśrodkowanie poziome */
  align-items: center; /* Wyśrodkowanie pionowe */
  text-align: center;
  position: relative; /* Ustawienie domyślne (nie fixed) */
}
/*FORMULARZE 
/////////////////////////////
/* Style the container */
div.webForm {
   width: 100%;
   background: white;
   padding: 10px;
   border-radius: 10px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

div.webFormRowResponsive {
   display: flex;
   margin-bottom: 2px;
   padding: 10px;
}

div.webFormRowStacked {
   margin-bottom: 2px;
   padding: 10px;
}

div.webFormButton {
    width: 100%;
    padding: 5px;
	text-align: right;
}

div.webFormLabel {
    padding: 5px;
    text-align: right;
    font-weight: bold;
    border-radius: 10px 0 0 10px;
	}
	
div.LabelResponsive {
width: 25%;	
background-color: #f8f9fa;
}

div.ControlResponsive {
width: 75%;	
}

div.webFormControl {
    padding: 5px;
}

        @media (max-width: 800px) {
            .webFormRow {
                flex-direction: column;
            }
            .webFormLabel, .webFormControl {
                width: 100%;
                border-radius: 5px;
            }
            .webFormLabel {
                border-bottom: 1px solid #ddd;
            }
        }

input[type=text],input[type=password], select, textarea{
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
}

input[type=submit] {
  background-color: #04AA6D;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}

input:focus, select:focus, textarea:focus {
  border-color: #007bff;
  outline: none;
  box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
  }

/*wyszukiwarka*/ 
input[type=text].szukaj {
  width: 130px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}

/* When the input field gets focus, change its width to 100% */
input[type=text].szukaj:focus {
  width: 300px;
}


div.hidden {
opacity: 0;
transform: translateY(100px);
transition: opacity 0.5s ease-out, transform 0.5s ease-out;	
}

div.visible {
opacity: 1;
transform: translateY(0);
}

 /* Styl przełącznika */
        .toggle-container {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 15px;
        }

        .toggle-label {
            font-size: 16px;
            margin-right: 10px;
        }

        .switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 24px;
        }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .3s;
            border-radius: 24px;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: .3s;
            border-radius: 50%;
        }

        input:checked + .slider {
            background-color: #4CAF50;
        }

        input:checked + .slider:before {
            transform: translateX(26px);
        }