.koben-timeline {
display: flex;
flex-direction: column;
position: relative;
margin: 20px 0;
}
@media (min-width: 768px) {
    .koben-timeline:before {
        content: "";
        position: absolute;
        top: 0;
        left: 50px; /* Pozycjonowanie linii względem kół */
        width: 2px; /* Szerokość linii */
        height: 100%;
        background: #ddd; /* Kolor linii */
        z-index: 0;
        }
}



.koben-timeline-item {
display: flex;
align-items: center;
margin-bottom: 20px;
position: relative;
gap: 20px;
}
.koben-timeline-date {
width: 100px;
height: 100px;
text-align: center;
justify-content: center;
align-items: center;
background-color: #35a8e0;
color: white;
font-size: 14px;
font-weight: bold;
z-index: 1; /* Nad linią */
position: relative; /* Kontekst dla koła */
}
.form_godz{
font-size: 26px;
width: 100%;
text-align: center;
display: block;
padding-top: 10px;
}
.form_data{
    width: 100%;
    text-align: center;
    display: block;
padding-top: 10px;

 }

.koben-timeline-content {
flex: 1;
background: #f9f9f9;
padding: 0px 20px 0px 20px;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
display: flex;
justify-content: space-between;
align-items: center;
}
.koben-timeline-text {
flex: 1;
padding-right:50px;
}
.koben-timeline-text h3 {
margin-top: 0;
color: #000 !important;
font-size: 18px;
font-weight: bold;
}
.koben-timeline-text p {
margin: 5px 0;
padding-top:10px !important;
padding-bottom:10px !important;
font-size: 14px;
color: #666;
}
.koben-timeline-button {
background-color: #007bff;
color: white !important;
padding: 10px 15px;
border-radius: 5px;
text-align: center;
text-decoration: none;
font-size: 14px;
font-weight: bold;
white-space: nowrap;
}
.koben-timeline-button.Szkolenie {
background-color: #000016;
}
.koben-timeline-button.Webinar {
background-color: green;
}

@media (max-width: 768px) {
.koben-timeline-content {
flex-direction: column;
align-items: flex-start;
}
.koben-timeline-text {
padding-right:0px !important;
}
.koben-timeline-button {
margin-top: 10px; /* Odstęp od tekstu */
align-self: stretch; /* Dopasowanie szerokości do kontenera */
text-align: center;
}
}

/* Popup container */
.koben-popup {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.6);
z-index: 1000;
justify-content: center;
align-items: center;
}

/* Popup content */
.koben-popup-content {
background: white;
padding: 20px;
width: 90%;
max-width: 500px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
position: relative;
}

/* Close button */
.koben-popup-close {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
font-size: 20px;
font-weight: bold;
}


.koben-popup { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1000; justify-content: center; align-items: center; }
.koben-popup h3{ font-size:28px !important;}
.koben-meta-wydarzenia{
padding-top: 0 !important;
padding-bottom: 20px !important;
font-size:14px !important;
}
.koben-popup-content { background: #fff; padding: 40px; border-radius: 10px; width: 90%; max-width: 1200px; position: relative; max-height: 80vh; overflow-y: auto; }
.koben-popup-close { position: absolute; top: 10px; right: 10px; cursor: pointer; font-size: 20px; }
.koben-timeline-button { cursor: pointer; }
.koben-uczestnik { border: 1px solid #ccc; padding: 10px; margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 10px;}
.koben-uczestnik p {flex: 1 1 calc(33.333% - 20px); box-sizing: border-box; margin: 0; padding-top: 0px !important; padding-bottom: 0px !important;}
@media (max-width: 768px) {
    .koben-uczestnik p { flex: none;  gap: 0px;}
}
.dane-do-faktury { border: 1px solid #ccc; padding: 10px; margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 10px;}
.dane-do-faktury p {flex: 1 1 calc(50% - 20px); box-sizing: border-box; margin: 0; padding-top: 0px !important; padding-bottom: 0px !important;}
@media (max-width: 768px) {
    .dane-do-faktury p { flex: none;  gap: 0px;}
}
.oswiadczenia { display: flex; flex-wrap: wrap; gap: 10px;}
.oswiadczenia p {box-sizing: border-box; margin: 0; padding-top: 0px !important; padding-bottom: 0px !important;}

#koben-dodaj-uczestnika { margin-bottom: 20px; }
.koben-popup h1, .koben-popup h2, .koben-popup h3, .koben-popup h4{color:#000 !important;}
.koben-form-row { display: flex; flex-wrap: wrap; gap: 10px;}
.koben-form-row label, .koben-uczestnik label, .dane-do-faktury label, .oswiadczenia label{ font-size:12px !important;}
.koben-form-row p {flex: 1 1 calc(50% - 20px); box-sizing: border-box; margin: 0; padding-top: 0px !important; padding-bottom: 0px !important;}
.koben-form-row input, .koben-uczestnik input, .dane-do-faktury input{ width:100%}
@media (max-width: 768px) {
    .koben-form-row p { flex: none;  gap: 0px;}
}
.koben-usun-uczestnika{
    font-size: 12px !important;
    background-color: #2b2d32 !important;
    border: none;
}
.koben-timeline button{
border: none;
}
.field-error {
    border: 2px solid red !important;
    background-color: #ffe6e6 !important;
}

.koben-popup-content select{
    width: 100%;
}

@media (max-width: 768px) {
    .koben-timeline-item {
        flex-direction: column; /* Ustaw elementy jeden pod drugim */
        align-items: flex-start; /* Wyrównanie do lewej */
        gap:0px;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    }

    .koben-timeline-date {
        margin-bottom: 0px; /* Dodaj odstęp między datą a zawartością */
        width: 100%; /* Szerokość bloku daty na 100% */
        text-align: left; /* Opcjonalne: wyrównaj tekst do lewej */
    }
    .koben-timeline-text {
        padding: 10px !important;
        text-align: center;
        width: calc(100% - 20px);
    }
    .koben-timeline-content {
        width: 100%; /* Szerokość bloku treści na 100% */
        padding: 0px;
        border-radius:0px;
        
    }
    .koben-timeline-button {
        border-radius: 0px;
    }
    .koben-popup-content h3{
        font-size: 20px !important;
        line-height: 32px !important;
        padding-top: 20px;
    }
    .koben-popup-content {
        max-height: 100vh;
        padding: 20px;
        border-radius:0px;
    }
  
    #koben-dodaj-uczestnika{
        width:100%;
    }
    .koben-uczestnik, .koben-form-row, .dane-do-faktury {
        display: grid;
    }
    .koben-send-form{
        margin-bottom:50px;
    }
}