body {
    background-color: white;
    margin-bottom: 60px;
    text-size-adjust: 100%;
    font-feature-settings: normal;
    -webkit-tap-highlight-color: transparent;
    font-family: ui-sans-serif, -apple-system, system-ui, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
    font-variation-settings: normal;
    line-height: 1.5;
    tab-size: 4;
    margin: 0px;
	opacity: 0;
	transition: opacity 2s ease-in-out;
}

body.no-scroll {
  overflow: hidden;
  height: 100vh;
}

.waiting {
	color: #333;
	font-weight: 300;
	display: flex;
	justify-content: center;
	align-items: center;
    text-align: center;
}

.waiting-text {
	animation: pulseText 2s infinite ease-in-out;
}

@keyframes pulseText {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.6; transform: scale(1.05); }
}

.spinner {
	margin-left: 20px;
	margin-top: 10px;
	border: 4px solid #f3f3f3;
	border-top: 4px solid #333;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	animation: spin 4s linear infinite, pulseCircle 2s infinite ease-in-out;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}


/* Animacja zanikania strony 
.fade-out {
	opacity: 0;
	transition: opacity 1s ease-in-out;
}
*/
/* Pulsowanie tekstu */
@keyframes pulse-text {
	0% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1.15); opacity: 0.7; }
	100% { transform: scale(1); opacity: 1; }
}

.pulsing-text {
	display: inline-block;
	animation: pulse-text 1.2s infinite ease-in-out;
}

/* Styl dla spinnera */
.loading-spinner {
	display: none;
	width: 16px;
	height: 16px;
	border: 2px solid white;
	border-top: 2px solid transparent;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	margin-left: 8px;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
	
.pricing-container {
	display: flex;
	justify-content: center;
	gap: 20px;
	flex-wrap: wrap;
	padding: 40px;
}

.pricing-card {
	background: #ffffff;
	border-radius: 10px;
	padding: 30px;
	text-align: center;
	width: 280px;
	box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pricing-card:hover {
	transform: translateY(-5px);
	box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.15);
}

.pricing-title {
	font-size: 22px;
	font-weight: bold;
	color: #333;
}

.pricing-price {
	font-size: 28px;
	color: rgb(181 181 181);
	margin: 10px 0;
}

.pricing-features {
	list-style: none;
	padding: 0;
	margin: 20px 0;
	color: #333;
}

.pricing-features li {
	margin-bottom: 10px;
}

.pricing-button {
	background: #4CAF50;
	color: white;
	padding: 12px 20px;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	transition: background 0.3s;
	font-size: 16px;
	width: 100%;
}

.pricing-button:hover {
	background: #45a049;
}

.premium {
	border: 2px solid #888;
	position: relative;
}

.premium::before {
	content: "Najlepszy wybór";
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
	background: #888;
	color: white;
	padding: 5px 10px;
	font-size: 12px;
	border-radius: 5px;
}

.popup-container {
	position: fixed;
	bottom: 20px;
	right: 20px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	z-index: 1000;
}

.popup {
	background: rgba(255, 69, 58, 0.95);
	color: black;
	padding: 15px 20px;
	border-radius: 8px;
	font-size: 16px;
	box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
	margin-top: 10px;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.5s ease, transform 0.5s ease;
	cursor: pointer;
	animation: fadeIn 0.5s forwards;
}

.popup.success {
	background: RGBA(204, 204, 204, 0.8);
}

.popup.warning {
	background: rgba(255, 165, 0, 0.8);
}

.popup.error {
	background: RGBA(255, 0, 0, 0.6);
}

.popup.show {
	opacity: 1;
	transform: translateY(0);
}

.popup.hide {
	opacity: 0;
	transform: translateY(20px);
}
/*
.popup.hide {
    animation: fadeOut 0.5s forwards;
}
*/
/* Animacje */

.fade-out {
    animation: fadeOut 1s forwards; /* Animacja zanikania */
}

.fade-in {
    animation: fadeIn 2s forwards; /* Animacja pojawiania się */
}

@keyframes fadeIn {
    from {
        opacity: 0;
        /*transform: translateX(20px);*/
    }
    to {
        opacity: 1;
        /*transform: translateX(0);*/
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        /*transform: translateX(0);*/
    }
    to {
        opacity: 0;
        /*transform: translateX(20px);*/
    }
}

.top-bar {
    position: sticky;
    top: 0;
    left: -1%;
    width: 100%;
    height: 70px;
    background-color: #2b2b2b; /* Kolor paska u góry */
    padding: 0px;
    padding-left: 0px;
    padding-right: 0px;
    text-align: center;
    font-size: 28px;
    color: rgb(0, 0, 0);
    cursor: default;
    font-weight: 500;
    font-size: 32px;
    /* box-shadow: 0 0 10px rgba(0,0,0,0.05); */
    clip-path: inset(0 -0 -15px 0);
    white-space: nowrap;
    z-index: 1000;
}

.base-text {
    position: sticky;
    transform: translateX(-50%);
    left: 50%;
    display: block;
    align-items: center;
    height: 70px;
    width: 140px;
    background: url(
    "images/YTA2-Trans-Neg.png") no-repeat center;
     /* wielkość ikony, dopasuj do preferencji */
    align-content: center;
    background-size: 80px;
    padding-top: 5px;
}

.changing-text {
    font-size: 14px;
    color: rgb(181 181 181);
}

/* Sekcja wprowadzająca (np. YTA Prawo / YTA Podatki) */
.intro-section {
    text-align: center;
    padding: 2rem 1rem;
    background-color: #f8f8f8; /* delikatny szary */
}

/* Kafle (dla dwóch kafelków) */
.intro-tiles {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Pojedynczy kafelek */
.tile {
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 2rem;
    width: 584px;
    transition: transform 0.5s ease;
}

.tile:hover {
    transform: scale(1.05);
    z-index: 2;
}

.tile-podatki {
    background: url("images/icon-podatki.svg") no-repeat center center;
    background-size: 40% auto; /* wielkość ikony, dopasuj do preferencji */
    background-color: #f8f8f8; 
    background-position: -20% center;
}
  
.tile-prawo {
    background: url("images/icon-prawo.svg") no-repeat center center;
    background-size: 40% auto; /* wielkość ikony, dopasuj do preferencji */
    background-color: #f8f8f8; 
    background-position: 120% center;
}

/* Przyciski w kafelkach - można skorzystać z Twoich styli "button", 
   lub zrobić bardziej unikatowe */
.tile button {
    background-color: #4b4b4b;
    color: #fff;
    border: none;
    padding: 0.5rem 1rem;
    cursor: pointer;
    text-align: center;
}

/* Sekcja "oferta" (możesz użyć w .offer-section: YTA Podatki, YTA Prawo) */
.offer-section {
    max-width: 800px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.offer-section h2 {
    margin-top: 0;
    margin-bottom: 1rem;
    text-align: center;
}

.offer-section ul {
    list-style: disc;
    margin-left: 1.5rem;
    margin-top: 1rem;
}

/* Sekcja "O nas" */
.about-section {
    max-width: 800px;
    margin: 2rem auto;
    padding: 0 1rem;
    text-align: center;
}

/* Sekcja "Kontakt" */
.contact-section {
    max-width: 800px;
    margin: 2rem auto;
    padding: 0 1rem;
    text-align: center;
}

.menu-container {
    position: absolute;
    top: 8%;
    height: 40px;
    right: 10px;
    padding: 0px 0px;
    display: flex;
    align-items: center; /* Opcjonalne: wyrównanie elementów w pionie */
    gap: 10px; /* Odstęp między elementami */
}

button {
    margin: 10px 0;
    padding: 10px;
    width: 150px;
    transition: border-radius 0.5s, box-shadow 0.5s;
    cursor: pointer;
    border: 0px solid rgba(0,0,0,0.1);
    background-color: white;
    border-radius: 5px;
    color: #4f4f4f;
    font-size: 13px;
    text-align: left;
    font-family: inherit;
    text-shadow: 0px -0.5px 0px black;
}

.side-menu button{
    border: 0.5px solid #ececec ;
    width: 99%;
    border-radius: 5px;
    margin-top: 0px;
    margin-bottom: 5px;
}

/* Efekty wizualne przycisków przy klikaniu */
button:hover {
    color: #000000;
    background-color: #eeeeee;
    box-shadow: 3px 0px 10px rgba(0, 0, 0, 0.05);
}



/* Styl przycisku */
.menu-button1 {
    position: fixed;
    top: 20px;
    left: 20px;
    width: 40px;
    height: 30px;
    cursor: pointer;
    z-index: 1201;
    opacity: 0.8; /* Przezroczystość */
}


.menu-button1 .line1 {
    width: 20%;
    height: 1.5px;
    background-color: black;
    margin: 5px 0;
    border-radius: 10px;
    transition: width 0.3s;
}

.menu-button1 .line2 {
    width: 35%;
    height: 1.5px;
    background-color: black;
    margin: 5px 0;
    border-radius: 10px;
    transition: width 0.3s;
}

.menu-button1 .line3 {
    width: 50%;
    height: 1.5px;
    background-color: black;
    margin: 5px 0;
    border-radius: 10px;
    transition: width 0.3s;
}

.menu-button1:hover .line1 {
    width: 50%;
    height: 1.5px;
    background-color: black;
    margin: 5px 0;
    border-radius: 10px;
}

.menu-button1:hover .line2 {
    width: 50%;
    height: 1.5px;
    background-color: black;
    margin: 5px 0;
    border-radius: 10px;
}

.menu-button1:hover .line3 {
    width: 50%;
    height: 1.5px;
    background-color: black;
    margin: 5px 0;
    border-radius: 10px;
}

/* Styl menu */
.side-menu {
    position: fixed;
    top: 0;
    left: -300px; /* Ukryte menu poza ekranem - wartość większa od szerokości menu */
    width: 250px;
    height: 100%;
    background-color: #ffffff;
    color: rgb(0, 0, 0);
    padding: 5px;
    padding-top: 70px;
    transition: left 0.8s cubic-bezier(0.65, 0.05, 0.36, 1), width 0.8s cubic-bezier(0.46, 0.03, 0.52, 0.96);
    z-index: 1200; /* Wyższy niż overlay */
    text-align: center; /* Tekst opcji wyśrodkowany */
    align-items: center;     /* Wyśrodkowanie poziome */
    /* box-shadow: 3px 0px 8px rgb(0, 0, 0, 0.05); */
    clip-path: inset(1px -15px 0 0);
    flex-direction: column;
    justify-content: space-between;
}

.side-menu::after {
    content: '';
    position: absolute;
    right: 0; /* Przylega do prawej ściany */
    top: 50%; /* Pozycjonowanie względem środka */
    transform: translateY(-50%); /* Przesunięcie, aby wyśrodkować w pionie */
    width: 1px; /* Szerokość ramki */
    height: 100%; /* Długość ramki */
    background-color: rgb(169, 169, 169, 0.3); /* Kolor ramki */
}

.side-menu ul {
    list-style-type: none;
    padding: 0;
    margin-top: 5px;
    margin-bottom: 0px;
}
.bottom-btn-logout2 {
    margin-bottom: 0px;
}

.side-menu ul li {
    padding: 20px 0;
    
}

/* Overlay (półprzezroczyste tło) */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 150; /* Pomiędzy menu a resztą */
    display: none; /* Domyślnie ukryte */
}



/* Gdy menu jest aktywne */
.side-menu.active {
    left: 0; /* Przesuń menu na ekran */
}

.overlay.active {
    display: block;
}

/* Ukryj przycisk, gdy menu jest aktywne */
.menu-button1.hidden {
    display: block;
}

.hidden {
    display: none !important;
}

.bottom-box {
    position: fixed;
    width: 55%;
    height: 20px;
    max-height: 100px;
    background-color: #ffffff; /* Możesz zmienić kolor tła */
    padding: 15px;
    text-align: center; /* Wyrównanie tekstu w boxie */
    left: 50%; /* Ustawienie lewego marginesu na 50% szerokości ekranu */
    transform: translateX(-50%); /* Przesunięcie boxa o połowę jego szerokości w lewo */
    bottom: 50px;
    padding-left: 2rem;
    padding-right: 3.5rem;
    border: 1px solid rgba(0,0,0,0.1);
    transition: box-shadow 0.5s;
    border-radius: 5px;
}


.bottom-box:hover {
    background-color: #ffffff;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.arrow {
    border: solid rgb(255, 255, 255);
    border-width: 0 3px 3px 0;
    display: block;
    padding: 4px;
}
  
.right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}




.question-box {
    width: 100%;                 /* Szerokość pola tekstowego */
    overflow: hidden;              /* Ukrywa scrollbar */
    border: none;           /* Usunięcie obramowania */
    background-color: transparent; /* Przezroczyste tło */
    color: #000;            /* Kolor tekstu */
    resize: none;           /* Wyłącza możliwość zmiany rozmiaru */
    outline: none;          /* Usunięcie podświetlenia */
    box-sizing: border-box;
    font-family: inherit;
    max-height: 90px;
    overflow-y: auto;
}

.bottom-box button{
    position: fixed;
    bottom: 9px;
    margin: 0px;
    right: 1%;
    height: 30px;
    width: 30px;
    background-color: #000000;
    border-radius: 50%;
}

/* Animacja po najechaniu myszÄ… */
.send-it:hover .arrow {
   animation: slideAndFade 1s linear; /* Wywołanie animacji */
}

.model button {
    text-align: left;
}

@keyframes slideAndFade {
    0% {
        transform: translateX(0) translateY(0%) rotate(-45deg); /* Punkt poczÄ…tkowy */
        opacity: 1; /* Strzałka widoczna */
    }
    45% {
        opacity: 1; /* Strzałka wciąż widoczna */
    }
    50% {
        transform: translateX(17.5px) translateY(0%) rotate(-45deg); /* Pozycja poza prawą krawędzią */
        opacity: 0; /* Strzałka staje się niewidoczna */
    }
    51% {
        transform: translateX(-17.5px) translateY(0%) rotate(-45deg); /* Pojawienie siÄ™ z lewej strony */
        opacity: 0; /* Strzałka nadal niewidoczna */
    }
    55% {
        opacity: 1; /* Strzałka pojawia się z lewej strony */
    }
    100% {
        transform: translateX(0) translateY(0%) rotate(-45deg); /* Powrót do punktu początkowego */
        opacity: 1; /* Strzałka znowu widoczna */
    }
}


.response-box {
    width: 100%;
    min-height: 10px;
    text-align: left;
    padding-right: 100px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: justify;
}

.qusetionwr {   
    margin-top: 20px;
    margin-bottom: 20px;
    width: 100%;
    min-height: 10px;
    text-align: left;
    font-weight: 550;
    text-align: justify;
}

#main-container {
    width: 100%;
    max-width: 600px; /* Maksymalna szerokość kontenera głównego */
    margin: 0 auto;
    padding: 10px;
    border: 1px solid #ddd;
}

.dynamic-div {
    padding: 10px;
    margin-top: 10px; /* Odstęp między dodanymi divami */
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    word-wrap: break-word; /* Zawija długie słowa */
}


.box-container {
    margin-top: 30px;
    position: absolute; 
    width: 55%;
    height: 65%;
    overflow-y: auto;
    left: 50%;
    transform: translateX(-50%);
    overflow-x: hidden;
    padding-right: 40px;
    padding-left: 40px;
}

.linebtw {
    position: relative;
    width: 90%;
    height: 1px;
    background-color: rgb(169, 169, 169, 0.3);
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 10px;
    left: 50%; /* Ustawienie lewego marginesu na 50% szerokości ekranu */
    transform: translateX(-50%); /* Przesunięcie boxa o połowę jego szerokości w lewo */
}


/* Dla przeglÄ…darek opartych na Webkit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 4px; /* szerokość scrollbara */
}

::-webkit-scrollbar-track {
    background: #f1f1f1; /* kolor tła scrollbara */
    border-radius: 500px /* opcjonalnie zaokrÄ…glenie */
}

::-webkit-scrollbar-thumb {
    background: #9999; /* kolor suwaka */
    border-radius: 50px; /* zaokrÄ…glenie suwaka */
}

::-webkit-scrollbar-thumb:hover {
    background: #888; /* kolor suwaka podczas najechania myszÄ… */
}

.loader {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border: 3px solid #f3f3f3; /* Light gray background */
    border-top: 3px solid #696969; /* Blue top border for effect */
    border-radius: 50%; /* Rounded shape */
    width: 15px; /* Width */
    height: 15px; /* Height */
    animation: spin 1s linear infinite; /* Animation */
    overflow: hidden;
}
  
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loader1 {
    position: relative;
    top: 3px;
    border: 3px solid #f3f3f3; /* Light gray background */
    border-top: 3px solid #696969; /* Blue top border for effect */
    border-radius: 50%; /* Rounded shape */
    width: 15px; /* Width */
    height: 15px; /* Height */
    animation: spin1 1s linear infinite; /* Animation */
    overflow: hidden;
}
  
@keyframes spin1 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

button.loading1 {
    pointer-events: none;
    cursor: not-allowed;
}

button.loading1:hover {

    background-color: white;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);

}

/* Ukrycie scrollbara */
.twoj-element::-webkit-scrollbar {
    display: none;
}

body.loading {
    overflow: hidden; /* Ukrywa przewijanie */
}

.containerlogin {
    display: flex;
    justify-content: center;
    align-items: center; /* Wyśrodkowanie pionowe */
    flex-direction: column;
    min-height: 90vh; /* Utrzymanie pełnej wysokości strony */
    padding: 10px 0;
    margin: 0 auto; /* Wyśrodkowanie kontenera */
    box-sizing: border-box;
    width: 100%; /* Upewnienie się, że kontener rozciąga się na całą szerokość */
}

.login-box {
    width: 500px;
    padding: 30px;
    border-radius: 6px;
    border: 1px solid #e7e7e7;
    box-sizing: border-box;
    background-color: #ffffff;
    transition: border-radius 0.3s;

    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.06);
}

.login-input {
    width: 100%;
    padding: 15px;
    margin: 15px 0;
    border-radius: 6px;
    border: 1px solid #e7e7e7;
    box-sizing: border-box;
    transition: box-shadow 0.5s;
}

.login-input:hover {
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.09);
}

.login-input:focus {
    outline: none;
}

.login-submit {
    padding: 15px;
    width: 100%;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    text-align: center;
	border: 1px solid #e7e7e7;
}

.register-link {
    margin-top: 20px;
    text-align: center;
}

.register-link a {
    color: #007BFF;
    text-decoration: none;
}

.register-link a:hover {
    text-decoration: underline;
}

.pin-v {
    padding: 20px;
    text-align: center;
    font-size: 24px;
    color: rgb(0, 0, 0);
    cursor: default;
}

#paymentBox {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1000px;
    height: 450px;
    border-radius: 8px;
    border: 1px solid #e6e6e6;
    background-color: white;
    padding: 20px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.pay {
    text-align: center;
}

.left, .right1 {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Wyśrodkowanie pionowe */
    align-items: center; /* Wyśrodkowanie poziome */
    flex-wrap: wrap;
}

.left button, .right1 button {
    margin: 15px 0;
    width: 300px;
}

.left h3, .right1 h3 {
    text-align: center;
}

.left a, .right1 a {
    text-align: left;
}

/* Półprzezroczyste tło */
#overlay1 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.02); /* Czarne, półprzezroczyste tło */
    z-index: 999; /* Założenie, że box z płatnościami ma z-index 1000 */
}

#overlay1, #paymentBox {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0s 0.5s; /* Zatrzymanie visibility po przejściu */
}




#usermenu button{
    border: 0px solid #ececec ;
    width: 170px;
    border-radius: 5px;
    margin-top: 0px;
    margin-bottom: 5px;
}

#userbutton {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  padding: 6px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  z-index: 1100;
  transition: background 0.3s ease;
}

#userbutton:hover {
  background: rgba(0, 0, 0, 0.05);
}

#userbutton svg {
  width: 100%;
  height: 100%;
  fill: #666;
  transition: transform 0.2s ease;
}

#userbutton:hover svg {
  transform: scale(1.1);
}
  
.show {
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 0.5s ease !important; /* Przejście opacity */
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dwie kolumny o równej szerokości */
    grid-template-rows: 0px; /* Wysokość dopasowana do zawartości */
    gap: 0px; /* Odstęp między elementami */
}
  
.header {
    grid-column: 1 / -1; /* Kolumna zajmująca całą szerokość */
    /* padding: 20px; */
    height: 50px;
}
  
.column {
    padding-bottom: 20px;
}

.bottom-container {
    position: fixed;
    left: 50%; /* Ustawienie lewego marginesu na 50% szerokości ekranu */
    transform: translateX(-50%); /* Przesunięcie boxa o połowę jego szerokości w lewo */
    width: 20%;
    height: 30px;
    bottom: 16.5%;
}
.bottom-container button {
    width: 35px;
    height: 35px;
    padding: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
}

.bottom-container button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bottom-container svg {
    transition: opacity 0.3s ease;
}

.bottom-container #copyIcon, .bottom-container #confirmIcon {
    width: 22px;
    height: 22px;
}


#scrollDownButton{
    display: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    text-align: center;
}

.bottom-container #scrollDownButton {
    transition: opacity 0.3s ease;
}

.linesidemenu {
    width: 250px;
    height: 0.5px;
    background-color: rgb(169, 169, 169, 0.3);
    margin-top: 10px;
}

.linesidemenu1 {
    width: 250px;
    height: 0.5px;
    background-color: rgb(169, 169, 169, 0.3);
    margin-top: 10px;
    margin-bottom: 10px;
}

.teksth1 {
    font-size: 12px;
    font-weight: 600;
    color: rgba(181, 181, 181, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(0, 0, 0, 0.05);
    padding: 5px 10px;
    border-radius: 5px;
    display: inline-block;
}

.historia button {
    border: 0px solid #ececec ;
}

.historia {
    overflow: visible !important;
    height: 240px;
}

.tooltip-container {
    position: relative; /* Pozwala na pozycjonowanie dymku względem tego kontenera */
    display: inline-block;
}

.tooltip-container button {
    width: 33px;
    height: 33px;
    padding: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    text-align: center;
}
  
  /* Styl dla dymku */
.tooltip-text {
    visibility: hidden; /* Domyślnie dymek jest niewidoczny */
    background-color: #626262; /* TÅ‚o dymka */
    color: #fff; /* Kolor tekstu */
    text-align: center;
    padding: 5px 10px;
    border-radius: 5px;

    /* Pozycjonowanie */
    position: absolute;
    bottom: 125%; /* Dymek pojawia siÄ™ nad przyciskiem */
    left: 50%;
    transform: translateX(-50%);

    /* Efekt płynnego wyświetlania */
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip-text1 {
    visibility: hidden; /* Domyślnie ukryty */
    background-color: #626262; /* TÅ‚o dymka */
    color: #fff; /* Kolor tekstu */
    text-align: left; /* Wyrównanie tekstu */
    padding: 5px 10px; /* Wewnętrzne odstępy */
    border-radius: 5px; /* ZaokrÄ…glone rogi */
    white-space: normal;
    display: -webkit-box; /* Wykorzystanie Flexboxa z ograniczeniem linii */
    -webkit-line-clamp: 4; /* Ograniczenie do 3 linii */
    -webkit-box-orient: vertical;
    max-width: 160px; /* Szerokość dymka */
    min-width: fit-content;
    overflow: hidden; /* Ukryj nadmiar tekstu */
    text-overflow: ellipsis; /* Dodaj wielokropek na końcu tekstu */

    /* Pozycjonowanie */
    position: absolute;
    bottom: 125%; /* Wyświetlanie nad przyciskiem */
    left: 50%; /* Wyśrodkowanie względem przycisku */
    transform: translateX(-50%);
    z-index: 1200; /* Zapewnienie widoczności ponad innymi elementami */

    /* Animacja */
    opacity: 0; /* Domyślnie niewidoczny */
    transition: opacity 0.3s ease-in-out;
}

/* Wyświetlanie dymku po najechaniu */
.tooltip-container:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

.history-btn:hover .tooltip-text1 {
    visibility: visible;
    opacity: 1;
}

.history-btn {
    position: relative;
    display: inline-block;
    align-items: center;
    justify-content: space-between;
    width: 91%;
    border-radius: 5px;
    margin-top: 0px;
    margin-bottom: 5px;
    padding: 10px;
    transition: border-radius 0.5s, box-shadow 0.5s;
    cursor: pointer;
    border: 0px solid rgba(0,0,0,0.1);
    background-color: white;
    border-radius: 5px;
    color: #4f4f4f;
    font-size: 13px;
    text-align: left;
    font-family: inherit;
    text-shadow: 0px -0.5px 0px black;
    text-overflow: ellipsis; /* Dodaj wielokropek na końcu */
    overflow: visible !important;
}

.cloudHistory {
    overflow: hidden; /* Ukryj nadmiarowy tekst */
    white-space: nowrap; /* Nie Å‚am tekstu */
    text-overflow: ellipsis; /* Dodaj wielokropek */
    display: inline-block; /* Ustaw tekst w jednej linii */
    max-width: 90%; /* Ogranicz szerokość tekstu */
    vertical-align: middle; /* Wyrównanie w pionie */
    color: rgb(127 127 127);
}

.history-btn:hover {
    color: #000000;
    background-color: #eeeeee;
    box-shadow: 3px 0px 10px rgba(0, 0, 0, 0.05);
}

.historytext {
    display: inline-block;
}

.delete-btn {
    display: none;
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px !important;
    height: 18px !important;
    background: none;
    border: none;
    cursor: pointer;
    
}

.delete-btn::before,
.delete-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70%;
    height: 2px;
    background-color: #888;
    transform-origin: center;
}

.delete-btn:hover {
    background-color: #d1d1d1;
}

.delete-btn::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.delete-btn::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.history-btn:hover .delete-btn {
    display: inline-block; /* Pokazuje przycisk "Usuń" */
}
/*
.saldo {
    position: relative;
    font-size: 11px;
}

.saldo1 {
    position: relative;
    font-size: 11px;
}

.lewo {
    padding: 10px;
}

.prawo {
    padding: 10px;
    margin-left: auto; /* Przesuwa element na prawo 
}
*/

.userData {
    position:fixed;
    border: 1px solid grey;
    border-radius: 5px;
    width: 100px;
    height: 20px;
    top: 10px;
    right: 60px;
    font-size: 12px;
    padding: 5px;
    z-index: 1202;
}

.userData p, .userData strong {
    margin: 0px;
    text-align: center;
    font-weight: 500;
}

.tooltip1 {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.tooltip1 .tooltiptext1 {
    visibility: hidden;
    width: 200px;
    background-color: #626262;
    color: #fff;
    text-align: center;
    padding: 5px;
    border-radius: 5px;


    /* Pozycjonowanie */
    position: absolute;
    z-index: 9999999 !important;
    bottom: -210%; /* Ustawienie nad tekstem */
    left: 50%;
    transform: translateX(-50%);

    /* Efekt pojawiania siÄ™ */
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltiptext1 {
    max-width: 200px;
}

/* Wyświetlanie dymka po najechaniu */
.tooltip1:hover .tooltiptext1 {
    visibility: visible;
    opacity: 1;
}

body.dark-mode .tooltip1 {
    position: relative;
    display: inline-block;
    cursor: pointer;
	color: rgba(227, 227, 227, 0.9);
}

body.dark-mode .tooltip1 .tooltiptext1 {
    visibility: hidden;
    max-width: 200px;
    background-color: rgba(30, 30, 30, 0.9); /* Ciemne, ale lekko przezroczyste tło */
    color: rgba(227, 227, 227, 0.9); /* Jasnoszary tekst dla lepszej czytelności */
    text-align: center;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;

    /* Pozycjonowanie */
    position: absolute;
    z-index: 9999999 !important;
    bottom: -210%; /* Ustawienie nad tekstem */
    left: 50%;
    transform: translateX(-50%);

    /* Efekt pojawiania się */
    opacity: 0;
    transition: opacity 0.3s, transform 0.2s;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3); /* Delikatny cień dla głębi */
}

/* Efekt delikatnego pojawiania się */
body.dark-mode .tooltip1:hover .tooltiptext1 {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(-3px); /* Lekki ruch w górę przy pojawianiu */
}


#userName {
    justify-items: center;
    padding: 5px;
    font-size: 14px;
}

#userName strong{
    display: block;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.main-func {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    font-family: inherit;
    width: 60%;
    margin-bottom: 200px;
}

.container-func {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
	opacity: 0;
	transition: opacity 2s ease-in-out;
}

.tbl-func {
    padding: 15px;
    padding-left: 20px;
    padding-bottom: 15px;
    width: 600px;
    overflow: hidden;              /* Ukrywa scrollbar */
    border: 1px solid grey;
    border-radius: 5px;          /* Usunięcie obramowania */
    background-color: transparent; /* Przezroczyste tło */
    color: #000;            /* Kolor tekstu */
    resize: none;           /* Wyłącza możliwość zmiany rozmiaru */
    outline: none;          /* Usunięcie podświetlenia */
    box-sizing: border-box;
    font-family: inherit;
    height: 47px;
}



.button-func {
    height: 50px;
    width: 300px;
    text-align: center;
    margin: 25px;
    margin-bottom: 30px;
    border: 1px solid grey;
    border-radius: 5px;
    font-size: 16px;
}

.output-func {
    position: relative;
    text-align: left;
    width: 95%;
    left: 50%;
    transform: translateX(-50%);
    font-family: inherit;
    margin-bottom: 30px;
}

.output-func pre {
    font-family: inherit;
    overflow-wrap: break-word;
    white-space: normal;
    
}

.container-tbl-func {
    width: 600px;
    margin: 15px;
    height: 47px;

}

.container-tbl-func label {
    text-align: left;
    margin-left: 10px;
}

.p-func {
    width: 600px;
    text-align: justify;
}

#additionalButtons {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.8s linear;

}

#additionalButtons.active {
    max-height: 400px; /* Dopasuj do wysokości przycisków */
    overflow-y: auto;
}


/* Stylizacja przełączników */
.toggle-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.toggle-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: pointer;
    font-size: 14px;
}

.toggle-label a {
    text-decoration: none;
    color: #007bff;
}

.toggle-label a:hover {
    text-decoration: underline;
}

.toggle-label input {
    display: none;
}

.toggle-slider1 {
    position: relative;
    width: 40px;
    height: 16px;
    background: #ccc;
    border-radius: 16px;
    transition: background 0.3s;
}   

.toggle-slider1::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 3px;
    width: 13px;
    height: 13px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s;
}

.toggle-slider {
	position: relative;
	width: 40px;
	height: 20px;
	background: #ccc;
	border-radius: 18px;
	transition: background 0.3s;
	display: inline-block;
	margin-left: inherit;
	vertical-align: middle;
}
  
.toggle-slider::before {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	background: #fff;
	border-radius: 50%;
	transition: transform 0.3s;
}

 /* Gdy przycisk ma klasę .active, zmień suwak na 'włączony' */
.context.active .toggle-slider {
	background: #000000;
}

.context.active .toggle-slider::before {
	transform: translateX(20px);
}

.toggle-label input:checked + .toggle-slider {
    background: #4caf50;
}

.toggle-label input:checked + .toggle-slider::before {
    transform: translateX(20px);
}

/* Stylizacja modali */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
}

.modal-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
    width: 800px;
    max-height: 80vh;
    text-align: left;
    overflow-y: auto;
}

.modal-content h2 {
    text-align: center;
}

.close {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 20px;
    cursor: pointer;
}


/* Dymek ostrzegawczy */
.warning-bubble {
    display: none;
    background-color: rgba(255, 0, 0, 0.8);
    color: white;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    position: relative;
    top: -10px;
    margin-bottom: 10px;
    font-size: 14px;
    animation: fadeIn 0.3s ease-in-out;
}

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

.tools-button {
    display: flex;
}

.tools-button span {
    transition: transform 0.3s ease-in-out;
}

.tools-button.active span {
    transform: rotate(360deg);
}

#togglePlus {
    display: flex;
    margin-left: auto;
}



.settings-menu button {
    margin: 0 0 5px;
    margin-left: 5px;
    margin-right: 5px;
    cursor: pointer;
    width: 210px;
}

.settings-menu p:hover {
    color: #ddd;
}

.close-settings {
    background: none;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
    float: right;
}

/* Początkowe ukrycie */
.settings-menu, #usermenu {
    position: fixed;
    background-color: white;
    border: 1px solid #d0d0d0;
    border-radius: 5px;
    padding-top: 5px;
    opacity: 0;
    transform: translateY(-10px); /* Początkowe przesunięcie do góry */
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none; /* Blokuje interakcję, gdy niewidoczne */
}

/* Pozycjonowanie */
.settings-menu {
    top: 60px;
    right: 250px;
    width: 220px;
    height: 180px;
    z-index: 1201;
}

#usermenu {
    width: 180px;
    height: 230px;
    top: 60px;
    right: 60px;
    text-align: center;
    align-items: center; 
    z-index: 1201;
}

/* Animacja pojawiania się */
.settings-menu.active, #usermenu.active {
    opacity: 1;
    transform: translateY(0); /* Przesuwa na miejsce */
    pointer-events: auto; /* Odblokowuje interakcję */
}



/* Cześć dotycząc strony głównej */
.home-Topbar button {
    text-align: center;
    font-size: 18px;
    padding: 0px;
    background-color: #2b2b2b;
    color: white;
}

.homeLeft-topBar button {
    margin:0px;
    border-radius: 0px;
    height: 70px;
}

.homeRight1-topBar button {
    margin:0px;
    border-radius: 0px;
    height: 70px;
}

.homeLeft-topBar button:hover {
    background-color: rgb(65 65 65);
}

.homeRight1-topBar button:hover {
    background-color: rgb(65 65 65);
}

.homeLeft-topBar {
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translateX(calc(-50% - 350px));
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dwie kolumny o równej szerokości */
    grid-template-rows: 70px; /* Wysokość dopasowana do zawartości */
    gap: 0px; /* Odstęp między elementami */
}

.homeRight1-topBar {
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translateX(calc(-50% + 350px));
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dwie kolumny o równej szerokości */
    grid-template-rows: 70px; /* Wysokość dopasowana do zawartości */
    gap: 0px; /* Odstęp między elementami */
}

.homeRight-topBar button {
    height: 30px;
    padding: 0px;
    font-size: 15px;
    width: 120px;
    position: relative;
    top: 0px;
    border-radius: 8px;
    box-shadow: 0px 0px 10px rgb(28 28 28);
}

.homeRight-topBar button:hover {
    background-color: rgb(65 65 65);
}

.homeRight-topBar {
    position:absolute;
    height: 70px;
    top: 0px;
    right: 20px;
    color: black;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
/* Prosty reset / bazowe ustawienia */

#hero {
    opacity: 0;
	transition: opacity 1s ease-in;
}

#yta-tiles {
    opacity: 0;
	transition: opacity 1s ease-in;
}

#yta-podatki { 
    opacity: 0;
	transition: opacity 1s ease-in;
}

#yta-prawo { 
    opacity: 0;
	transition: opacity 1s ease-in;
}

#about { 
    opacity: 0;
	transition: opacity 1s ease-in;
}

#cta { 
    opacity: 0;
	transition: opacity 1s ease-in;
}

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

header, main, footer {
    width: 100%;
    margin: 0 auto;
    overflow-x: hidden;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 90px; /* Dostosuj do swojej wysokości nagłówka */
    z-index: 3;
    background-color: #f8f8f8; /* Upewnij się, że nagłówek nie jest przezroczysty */
    overflow-y: hidden;
}


  .container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 0;
    margin-top: 90px;
  }

  .container1 {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 0;
    margin-top: 0px;
  }

  nav {
    display: flex;
    justify-content: flex-end;
    gap: 20px;
    margin-top: 20px;
  }
  nav a {
    font-weight: 500;
  }
  /* Sekcja HERO */
  .hero {
    padding: 0 0;
    text-align: center;
    background-color: #f8f8f8;
  }
  .hero h1 {
    font-size: 2rem;
    margin-bottom: 20px;
  }
  .hero p {
    font-size: 1rem;
    max-width: 700px;
    margin: 0 auto 30px auto;
    line-height: 1.5;
  }
  .button-primary {
    padding: 12px 24px;
    background-color: #333;
    color: #fff;
    border-radius: 4px;
    transition: background-color 0.3s;
    display: inline-block;
    margin-top: 10px;
  }
  .button-primary:hover {
    background-color: #555;
  }
  /* Sekcja USŁUGI */
  .services {
    text-align: center;
    background-color: #fff;
  }
  .services h2 {
    font-size: 2rem;
    margin-bottom: 10px;
    margin-top: 10px;
  }

  .services h3 {
    font-size: 1.4rem;
    margin-bottom: 10px;
    margin-top: 10px;
  }
  .services p.section-description {
    max-width: 700px;
    margin: 0 auto 40px auto;
    color: #666;
    margin-top: 20px;
  }
  .services-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-radius: 10px;
    column-gap: 180px;
    justify-self: center;
    align-self: center;
    align-content: center;
    max-width: 1400px;
    width: 100%;
  }

.last-row {
    display: flex;
    justify-content: center;
    grid-column: span 4; /* Rozciąga ostatni wiersz na całą szerokość */
    gap: 20px;
}

  .service-item {
    flex: 0 1 auto;
    border-radius: 4px;
    padding: 20px;
    text-align: center;
    align-content: center;
    background-color: #e5e5e5;
    justify-content: center;
  }

  .service-item h3 {
    margin-bottom: 10px;
    font-size: 1.1rem;
    margin-top: 5px;
  }

  .service-item-l {
    display: grid;
    grid-template-columns: auto 1fr;
    border-radius: 4px;
    padding: 20px;
    text-align: left;
    align-content: center;
    justify-content: center;
  }

  .service-item-l h3 {
    margin-top: 5px;
    margin-bottom: 10px;
    font-size: 1.1rem;
    text-align: left;
  }

  .service-item-r {
    border-radius: 4px;
    padding: 20px;
    text-align: left;
    align-content: center;
    justify-content: center;
  }

  .service-item-r h3 {
    margin-top: 5px;
    margin-bottom: 10px;
    font-size: 1.1rem;
    text-align: right;
  }

  .service-item-grid-r {
    display: grid;
    grid-template-columns: auto auto;
    border-radius: 4px;
    padding: 20px;
    text-align: right;
    align-content: center;
    justify-content: right;
  }

  .service-item-grid-r h3 {
    margin-top: 5px;
    margin-bottom: 10px;
    font-size: 1.1rem;
    text-align: right;
  }

  .service-item-grid-l {
    display: grid;
    grid-template-columns: auto auto;
    border-radius: 4px;
    padding: 20px;
    text-align: left;
    align-content: center;
    justify-content: left;
  }

  .service-item-grid-l h3 {
    margin-top: 5px;
    margin-bottom: 10px;
    font-size: 1.1rem;
    text-align: left;
  }

.line-grid {
    
height: 3px;
    
max-width: 800px;
    
width: 70%;
    
background-image: radial-gradient(circle, #5b5b5b 75%, #717171 85%, #ededed 100%);
    
border-radius: 50%;
    
margin-top: 10px;
    
margin-bottom: 10px;
    
align-self: center;
    
justify-self: center;
}

.footerText:hover {
    color:#2f2f2f
}

/* Stylizacja modali */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
}

.modal-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
    width: 800px;
    max-height: 80vh;
    text-align: left;
    overflow-y: auto;
}

.modal-content h2 {
    text-align: center;
}

.close {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 20px;
    cursor: pointer;
    color: white;
}


.in-service-item {
    width: 95%;
    max-width: 350px;
    align-self: center;
}

  .service-icon {
    width: 100px;
    height: 100px;
    margin-bottom: 0px;
  }

  /* Sekcja O NAS */
  .about {
    text-align: center;
    background-color: #fafafa;
  }
  .about h2 {
    font-size: 1.8rem;
    margin-bottom: 20px;
  }
  .about .section-description {
    max-width: 700px;
    margin: 0 auto 30px auto;
    color: #666;
  }
  /* CTA */
  .cta {
    text-align: center;
    background-color: #fff;
  }
  .cta h2 {
    font-size: 1.8rem;
    margin-bottom: 20px;
  }
  .cta p {
    color: #666;
    max-width: 600px;
    margin: 0 auto 30px auto;
    line-height: 1.5;
  }
  /* FOOTER */
  footer {
    text-align: center;
    padding: 20px;
    background-color: #f0f0f0;
    padding-left: 0px;
    padding-right: 0px;
  }
  footer p {
    margin: 5px 0;
    color: #666;
}

.historia, .history-btn, #contentBelow {
    overflow-x: visible !important;
    position: relative !important;
    z-index: 10 !important;
}

#contentBelow {

}

#contentBelow .linesidemenu {
    height: 1px;
    background-color: rgb(73 73 73 / 50%);
}

#settings:hover,
#settings.hover-active {
    color: #000000;
    background-color: #eeeeee;
    box-shadow: 3px 0px 10px rgba(0, 0, 0, 0.05);
}

.app-switcher {
    position: relative; /* pozwala na pozycjonowanie panelu absolutnie względem rodzica */
    display: inline-block;
}

/* Panel z przyciskami wyboru aplikacji */
.app-chooser {
    position: absolute;
    top: 100%;    /* tuż poniżej przycisku */
    right: 0;     /* wyrównany do prawej krawędzi rodzica */
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    padding: 8px;
    border-radius: 4px;
}


/* Przyciski w panelu wyboru (YTA Podatki / YTA Prawo) */
.app-chooser button {
    display: block;       /* każdy przycisk w osobnej linii */
    width: 100%;
    margin: 4px 0;
    padding: 8px;
    background-color: #f8f8f8;
    border: 1px solid #ccc;
    border-radius: 3px;
    cursor: pointer;
    text-align: left;
}

.app-chooser button:hover {
    background-color: #eee;
}

/* Overlay – tło półprzezroczyste na całą stronę */
.overlay2 {
    position: fixed;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* lekko przyciemnione */
    z-index: 1001; /* aby pojawiło się nad resztą */
    display: flex; 
    align-items: center; 
    justify-content: center; 
  }
  
  /* Okienko modalne */
  .modal-box {
    background-color: #fff;
    width: 600px; /* szerokość okna */
    height: 450px;
    max-width: 90%; /* ograniczenie na małych ekranach */
    padding: 60px;
    border-radius: 8px;
    position: relative; /* dla przycisku 'X' */
    align-content: center;
    text-align: center;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
  }
  
  /* Przycisk zamykania okna (X) */
  .close-btn {
    position: sticky;
    top: 10px;
    width: 24px;
    padding: 0px;
    margin: 0px;
    left: 100%;
    background: none;
    border: none;
    font-size: 18px;
    text-align: center;
    cursor: pointer;
    background-color: #d6d6d6;
  }
  
  /* Tytuł i opis w oknie (opcjonalne) */
  .modal-box h2 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 2.5rem;
  }
  
  .modal-box h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.5rem;
  }

  .modal-box p {
    margin-bottom: 40px;
    line-height: 1.4;
    font-size: 1rem;
    color: #333;
  }
  
  /* Kontener przycisków */
.modal-buttons {
  display: flex;
  align-items: stretch;
  gap: 20px;
}
  
  /* Przykład stylu przycisków w oknie */
  .modal-buttons button {
    background-color: #414141;
    border: none;
    color: #fff;
    width: 180px;
    height: 50px;
    padding: 12px;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    transition: transform 0.3s ease;
    font-size: 1.2rem;
  }

.tile2 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1; /* każdemu dajemy równą szerokość */
  background-color: #f8f8f8;
  padding: 20px;
  border-radius: 10px;
  box-sizing: border-box;
  text-align: center;
  min-height: 100%; /* pozwala się rozciągać równo */
}

.tile2:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.tile2 button {
  margin-top: auto; /* przyklej go do dołu */
  width: 100%;
  padding: 10px;
  font-size: 16px;
  background-color: #333;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}


.tile2 button:hover {
  background-color: #555;
}


.lastthread { 
    position: relative;
    z-index: 1;
}

.modal-buttons button:hover {
    
    z-index: 2;   
}
  .modal-buttons button:hover {
    background-color: #6b6b6b;
  }

.line-YTA {
    
height: 3px;
    
width: 250px;
    
background-color: #a3a3a3;
    
justify-self: center;
    
margin: 0px;
    
border-radius: 10px;
}

.container-background {

}

.container-bg {
    
}

#modalOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-box {
  background-color: #fff;
  padding: 20px;
  border-radius: 12px;
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
  animation: fadeInUp 0.3s ease-out;
}

/* Domyślnie: desktop pokazuje tekst, mobile ukryty */
.desktop-only {
  display: inline-block;
}

.mobile-only {
  display: none;
}

@media (min-width: 768px) {
    .intro-tiles {
        flex-direction: row;
        justify-content: space-around;
    }
    .tile {
        max-width: 45%;
    }
}

@media screen and (max-width: 1400px) {
    .homeLeft-topBar {
        left: 60%;
    } 
    .homeRight1-topBar{
        left: 40%;
    }
}

@media screen and (max-width: 768px) {
  /* Ogólne kontenery */
  .login-box,
  .tbl-func,
  .p-func,
  .container-tbl-func,
  .tile,
  .box-container,
  #paymentBox,
  .main-func,
  .bottom-box,
  .container1,
  .modal-box {
    width: 90% !important;
    max-width: 90% !important;
    padding: 15px !important;
    font-size: 14px;
    box-sizing: border-box;
  }

  /* Przyciski – większe i czytelniejsze */
  button,
  .tile button,
  .pricing-button {
    padding: 14px 18px;
    font-size: 16px;
    width: 100%;
  }

  /* Top bar i nawigacja */
  .top-bar {
    font-size: 22px;
    flex-direction: column;
    height: auto;
    padding: 10px;
    text-align: center;
  }

  .home-Topbar,
  .homeLeft-topBar,
  .homeRight-topBar,
  .homeRight1-topBar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  /* Ikony w tle kafelków */
  .tile-podatki,
  .tile-prawo {
    background-position: center top;
    background-size: 40px auto;
    padding-top: 80px;
  }

  /* Kafelki: pionowo */
  .intro-tiles {
    flex-direction: column;
    align-items: center;
  }

  /* Siatka usług */
  .services-grid {
    flex-direction: column !important;
    align-items: center;
  }

  .service-item-grid-l,
  .service-item-grid-r {
    flex-direction: column !important;
    align-items: center;
    text-align: center;
  }

  .service-item-l,
  .service-item-r {
    margin-bottom: 10px;
  }

  /* Bottom button */
  .bottom-box button {
    right: 15px;
    bottom: 12px;
  }

  /* Popup/modal */
  .modal-box {
    top: 45%;
    left: 45%;
    transform: translate(-50%, -50%);
    height: auto;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 0px;
  }

  /* Side menu */
  .side-menu {
    width: 80%;
  }

  /* Ukrycie scrolla w poziomie */
  body {
    overflow-x: hidden;
  }

 /* Ustaw .services-grid pionowo – jeden element na rząd */
  .services-grid {
    display: flex;
    flex-direction: column !important;
    gap: 20px; /* zamiast 30px */
    margin-bottom: 10px;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  /* Każdy pojedynczy element też pełna szerokość */
  .service-item-grid-l,
  .service-item-grid-r {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    text-align: center;
  }

  /* Ikona */
  .service-item-l,
  .service-item-r {
    margin-bottom: 10px;
  }

  /* Treść pod ikoną */
  .in-service-item {
    width: 90%;
    max-width: 400px;
    text-align: center;
  }

  .in-service-item h3 {
    text-align: center;
  }

.service-icon {
  max-width: 60px;
  height: auto;
  margin-bottom: 10px;
}

  #userbutton {
    top: 18px;
    right: 12px;
    width: 34px;
    height: 34px;
    padding: 4px;
  }

    /* Kontener wszystkich kafelków */
  .tiles-prawo, .tiles-law, .tile-wrapper, .tile-prawo-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0 16px;
    align-items: center;
  }

  /* Pojedynczy kafelek */
  .tile-prawo {
    display: block !important;
    width: 90% !important;
    margin: 10px auto !important;
    text-align: center;
  }
    .last-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 0 16px;
  }

  .last-row > div {
    width: 100% !important;
    max-width: 95%;
    box-sizing: border-box;
    text-align: center;
  }
    .modal-content {
    width: 80%;
    max-width: 500px;
    margin: 0 auto;
  }

    .overlay2-options {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .overlay2-options .option-box {
    width: 100%;
  }

    .modal-buttons {
    flex-direction: column;
  }

  .tile2 {
    width: 100%;
  }

  .tile2 button {
    font-size: 16px;
  }

    .desktop-only {
    display: none !important;
  }

  .mobile-only {
    display: inline-block !important;
  }

  .line-grid {
    padding: 0 16px;
    width: 100%;
    box-sizing: border-box;
  }

  .line-grid > * {
    margin-left: auto;
    margin-right: auto;
  }

    .line-YTA {
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 90%; /* lub mniej, jeśli chcesz cieńszą linię */
  }
}