.progress-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 170px 5%;
    width: 90%;
    margin: auto;
}

.progress-line {
    position: absolute;
    left: 0;  
    right: 8%;
    height: 2px;
    background-color: black;
    transform: translateY(-50%);
    top: 50%;
    z-index: 1;
}

.progress-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    flex-grow: 0; 
    padding: 0 15px; 
	margin-right: 15;
    z-index: 2;
	order: 0;
}
.progress-items-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    width: 100%;
    padding: 0 15px;
}
.progress-circle {
    width: 50px;
    height: 50px;
    top: 50%;
    border-radius: 50%;
    margin: 0 15px;
    display: inline-block;
    vertical-align: middle;
    transform: translateY(-50%);
    position: absolute;
    z-index: 2;
    border: 3px solid #FFB900; /* Kolor obramówki kółka */ 
    box-sizing: border-box; 
}
/* Nagłówek etapu */
.progress-header {
    margin-bottom: 6px;  /* Dodane, aby oddzielić nagłówek od kółka */
    font-size: 16px;  /* Dodane, aby kontrolować wielkość czcionki */
    font-weight: bold;  /* Dodane, aby pogrubiać tekst */
}
/* Opis etapu */
.progress-description {
    margin-top: 6px;  /* Dodane, aby oddzielić opis od kółka */
    font-size: 12px;  /* Dodane, aby kontrolować wielkość czcionki */
}

/* Ikony etapu */
.progress-item .image-container {
    width: 50px; /* Szerokość kółka */
    height: 50px; /* Wysokość kółka */
    border-radius: 50%; /* Zaokrąglenie kółka */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white; /* Tło kółka */
    border: 3px solid #FFB900;  /* Domyślna obramówka */
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

/* Style dla obrazka wewnątrz białego koła */
.progress-item img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 30px; /* Szerokość obrazka w kółku */ 
    height: 30px; /* Wysokość obrazka w kółku */
}
    filter: grayscale(1);  /* Domyślnie obrazek jest wyszarzany */
}


.status-not_started .image-container,
.status-completed .image-container {
    border-color: gray;  /* Szara obramówka dla statusu "nie rozpoczęto" i "zakończono" */
}

.status-completed .image-container {
    border-color: gray;  /* Szara obramówka dla statusu "zakończono" */
}
.status-not_started .image-container {
    border-color: gray;  /* Szara obramówka dla statusu "nie rozpoczęto" */
}

.status-not_started img,
.status-completed img {
    filter: grayscale(1);  /* Wyszarzanie obrazka dla statusu "nie rozpoczęto" i "zakończono" */
}

.status-in_progress img {
    filter: grayscale(0);  /* Przywrócenie kolorów dla obrazka w statusie "w trakcie" */
}

/* Kolory statusu */
.status-not_started .progress-circle {
    background-color: white; /* Kolor tła kółka dla statusu "nie rozpoczęto" */
    border-color: #FFB900; /*Kolor obramówki dla statusu "nie rozpoczęto" */
}

/* Ustawienia małego kółka, wewnątrz kółka statusu "nie rozpoczęto" */
.status-not_started .progress-circle::before {  
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px; /* Szerokość małego kółka */
    height: 8px; /* Wysokość małego kółka */
    background-color: #FFB900; /* Kolor małego kółka */
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.status-in_progress .progress-circle {
    background-color: #997d35; /* Kolor tła kółka ze statusem "w trakcie" */
    border-color: #FFB900; /*Kolor obramówki kółka ze statusem 'w trakcie' */
}
/* Ustawienia małego kółka, wewnątrz kółka statusu "w trakcie" */
.status-in_progress .progress-circle::before {  
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px; /* Szerokość małego kółka */
    height: 8px; /* Wysokość małego kółka */
    background-color: white; /* Kolor małego kółka */
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.status-completed .progress-circle {
    background-color: #997d35; /* Kolor tła kółka ze statusem "Zakończono" */
    border-color: #FFB900; /*Kolor obramówki kółka ze statusem 'Zakończono' */
}
/* Ustawienia ikonki, wewnątrz kółka statusu "Zakończono */
.status-completed .progress-circle::before {  
    content: "✓"; /* Ikonka dla statusu "Zakończono" */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white; /* kolor ikonki */
    font-size: 20px; /* Wielkość ikonki */
}
/* Kolory tekstów dla różnych statusów */
.status-not_started .progress-header,
.status-not_started .progress-description {
    color: gray; /* kolor Nagłówka i opisu dla statusu "nie rozpoczęto" */
}

.status-in_progress .progress-header,
.status-in_progress .progress-description {
    color: #dfa100; /* kolor Nagłówka i opisu dla statusu "w trakcie" */
}

.status-completed .progress-header,
.status-completed .progress-description {
    color: black; /* kolor Nagłówka i opisu dla statusu "Zakończono" */
}

.text-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%); 
    width: 100%;
	max-width: 300px;
	min-width: 150px;
    margin-top: 20px; 
    margin-bottom: 20px; 
}

.progress-item[data-text-position="top"] .text-container {
    bottom: 100%; 
    margin-bottom: 50px; 
}

.progress-item[data-text-position="bottom"] .text-container {
    top: 100%; 
    margin-top: 50px; 
}
/* Powiększenie podczas najechania */
.progress-item:hover .progress-circle {
    transform: translateY(-50%) scale(1.1);  
}

/*.progress-item:hover .text-container {
    transform: translateX(-50%) scale(1.1);  'Odkomentuj ten fragment, jeśli chcesz, aby tekst się powiększał'
}*/

.progress-item:hover img  {
    transform: translate(-50%, -50%) scale(1.1);  
    filter: grayscale(0);  /* Przywrócenie oryginalnych kolorów */
}

.progress-item:hover .image-container {
    transform: translateY(-50%) scale(1.1);  
    filter: grayscale(0);  /* Przywrócenie oryginalnych kolorów */
}

/* Zmiana koloru obramowania podczas najechania dla statusów "nie rozpoczęto" i "Zakończono" */
.progress-item.status-not_started:hover .image-container,
.progress-item.status-completed:hover .image-container {
    border-color: #FFB900; /*kolor obramówki */
}
/* Zmiana koloru tekstu podczas najechania dla statusu "nie rozpoczęto */
.status-not_started:hover .progress-header,
.status-not_started:hover .progress-description {
    color: black; /* kolor tekstu */
}

/* Płynne przejścia animacji */
.progress-item .progress-circle, 
.progress-item .text-container, 
.progress-item img,
.progress-item .image-container {
    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;  /* płynne powiększenie i zmiana filtru */
}

.progress-item.status-not_started .image-container,
.progress-item.status-completed .image-container {
    transition: border-color 0.3s ease-in-out;  /* płynna zmiana koloru obramowania */
}

.status-not_started .progress-header,
.status-not_started .progress-description {
    transition: color 0.3s ease-in-out;  /* płynna zmiana koloru  */
}
/* Styl dla ekranów o szerokości od 4000px */
@media (min-width: 4000px) {
    .progress-item:last-child {
        margin-right: -120px;
    }
}
/* Styl dla ekranów o szerokości od 3500px do 3999px */
@media (max-width: 3999px) and (min-width: 3500px) {
    .progress-item:last-child {
        margin-right: -80px;
    }
}

/* Styl dla ekranów o szerokości od 3000px do 3499px */
@media (max-width: 3499px) and (min-width: 3000px) {
    .progress-item:last-child {
        margin-right: -60px;
    }
}

/* Styl dla ekranów o szerokości od 2500px do 2999px */
@media (max-width: 2999px) and (min-width: 2500px) {
    .progress-item:last-child {
        margin-right: -40px;
    }
}

/* Styl dla ekranów o szerokości od 2000px do 2499px */
@media (max-width: 2499px) and (min-width: 2000px) {
    .progress-item:last-child {
        margin-right: -30px;
    }
}

/* Styl dla ekranów o szerokości od 1750px do 1999px */
@media (max-width: 1999px) and (min-width: 1750px) {
    .progress-item:last-child {
        margin-right: -25px;
    }
}

/* Styl dla ekranów o szerokości od 1500px do 1749px */
@media (max-width: 1749px) and (min-width: 1500px) {
    .progress-item:last-child {
        margin-right: -20px;
    }
}

/* Styl dla ekranów o szerokości od 1250px do 1499px */
@media (max-width: 1499px) and (min-width: 1250px) {
    .progress-item:last-child {
        margin-right: -15px;
    }
}

/* Styl dla ekranów o szerokości od 1000px do 1249px */
@media (max-width: 1249px) and (min-width: 1000px) {
    .progress-item:last-child {
        margin-right: -10px;
    }
}

.text-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%); 
    width: 100%;
	max-width: 300px;
	min-width: 150px;
    margin-top: 20px; 
    margin-bottom: 20px; 
}

.progress-item[data-text-position="top"] .text-container {
    bottom: 100%; 
    margin-bottom: 50px; 
}

.progress-item[data-text-position="bottom"] .text-container {
    top: 100%; 
    margin-top: 50px; 
}
/* Kółko początkowe na osi */
.start-circle {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 10px; /* Szerokość kółka */
    height: 10px; /* Wysokość kółka */
    background-color: black; /* kolor kółka */
    border-radius: 50%;
    z-index: 2;
    left: 0px;
}
@media (max-width: 768px) {
    .progress-container {
        flex-direction: column;
        height: 100%; 
        padding-top: 0; 
        padding-bottom: 0;
    }

    .progress-line {
        width: 2px;
        height: 100%;
        top: 0;
		bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    .progress-items-wrapper {
        flex-direction: column; 
        align-items: center; 
        width: auto; 
        padding: 0;
        justify-content: space-between; 
        height: calc(100% - 100px); 
    }

    .progress-item {
        order: 0;
        margin-right: 0;
        margin-bottom: 0; 
        display: flex; 
        flex-direction: column; 
        align-items: center; 
    }
	.progress-item:last-child {
    margin-bottom: -60px;  /* Wartość ujemna może przesunąć ostatni element w dół */
	margin-right: 0px;
	}

    .progress-item[data-text-position="top"] .text-container {
        position: static;
        transform: none;
        margin: 0;
        margin-right: 230px;
    }

    .progress-item[data-text-position="bottom"] .text-container {
        position: static;
        transform: none;
        margin: 0;
        margin-left: 230px;
    }

    .text-container {
        position: static;
        left: auto;
        transform: none;
		height: 100px;
        max-width: 40%;  /* Dodane, aby kontrolować maksymalną szerokość tekstu */
    }

    .progress-header {
        margin-bottom: 0;
        margin-top: 20px;  /* Dodane, aby utworzyć odstęp między progress-circle a progress-header */
        word-wrap: break-word;  /* Dodane, aby umożliwić zawijanie tekstu do nowej linii */
    }

    .progress-description {
        margin-top: 10px;  /* Dodane, aby utworzyć odstęp między progress-header a progress-description */
        word-wrap: break-word;  /* Dodane, aby umożliwić zawijanie tekstu do nowej linii */
    }

    .start-circle {
    left: 50%;
    top: 0;
    transform: translateX(-50%);
	}
}
/* Stylowanie elementów formularza w menu administracyjnym */
.admin-page-wrapper {
    padding: 20px;
    background-color: #f1f1f1;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.admin-page-wrapper form {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.admin-page-wrapper h2 {
    margin-bottom: 20px;
    font-size: 24px;
    color: #333;
}

.admin-page-wrapper input[type="text"],
.admin-page-wrapper input[type="number"],
.admin-page-wrapper select,
.admin-page-wrapper textarea {
    width: 100%;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #ccc;
    margin-bottom: 10px;
}

.reset-style {
    background-color: #EC5839;
	color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}
.reset-style:hover {
    background-color: #d43f00;
}
.save-button {
    background-color: #9cc800;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

.save-button:hover {
    background-color: #7cb500;
}
.add-step-button {
    background-color: #c9a54b;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}
.add-step-button:hover {
    background-color: #917734;
}
.toggle_step {
    background-color: #0085ba;
    color: #fff;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.toggle_step:hover {
    background-color: #006799;
}

.step_content {
    background-color: #f9f9f9;
    padding: 15px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
}
.add-line-button{
    background-color: #8e24a3;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    margin: 10px 0;
}
.add-line-button:hover {
    background-color: #541561;
}

.remove-step-button {
    background-color: #d43f00;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    margin: 10px 0;
}

.remove-step-button:hover {
    background-color: #ec4139;
}

.remove-line-button {
    background-color: #d43f00;
}

.remove-line-button:hover {
    background-color: #b33500;
}

.line {
    margin-bottom: 30px;
    padding: 20px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.line > h2 {
    font-size: 20px;
    color: #555;
    margin-bottom: 20px;
}

.line > h2 > button {
    float: right;
    background-color: #EC5839;
    color: #fff;
    padding: 5px 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.line > h2 > button:hover {
    background-color: #ec4139;
}