.navi-top{
        padding: 20px 20px 20px 0px; 
        margin: 0;
        color:#e8eaed;
        text-align: center;
        font-family: Arial, sans-serif;
        font-size: 24px;
        font-weight: bold;
    }
    .button2, .button3{
        /*background-image: url("../img/events/filters_35_main/filter_alt_off_black.png");*/
        background-repeat: no-repeat;
        background-size: 40px;
        background-position: center; 
    }
    .button2:hover{
        background-color: #f9cf00;
        background-image: url("../../img/events/filters_35_main/filter_alt_off_white.png");
        cursor: pointer;
    }
    .filter-1{
        background-image: url("../../img/events/filters_35_main/filter_alt_off_grey.png");
    }
    .filter-2{
        background-image: url("../../img/events/filters_35_main/filter_alt_off_grey6.png");
    }

    /*tekst przedzielony linią*/
    .line-with-text {
        display: flex;
        align-items: center;
        text-align: center;
        color:#e8eaed;
        padding: 5px 10px 5px 10px;
        }

    .line-with-text::before,
    .line-with-text::after {
        content: '';
        flex: 1;
        border-bottom: 1px solid #e8eaed;
        
        }

    .line-with-text::before {
        margin-right: 10px;
        }

    .line-with-text::after {
        margin-left: 10px;
        }

    .line-with-text span {
        font-weight: bold;
        padding: 0 5px;
        color:#e8eaed;
        }
    /*END tekst przedzielony linią*/



    /*wyszukiwarka miejscowości*/ 
    .search-container {
        text-align: center;
        width: 300px;
        margin: 10px auto;
        position: relative;
    }

    #search-input {
        width: 80%;
        padding: 8px;
        font-size: 15px;
        border: 1px solid #e8eaed;
        /*border-radius: 4px;*/
        transition: box-shadow 0.3s ease;
    }
    #search-input:focus {
        outline: none;/* Wyłączamy domyślne podświetlenie */
        box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.5); /* poświetlenie zewnętrzne inputa */
        color: #e8eaed;
    }
    #search-input:hover {
        color: black;
    }
    #search-input-2 {
        width: 80%;
        height: 50px;
        padding: 8px;
        font-size: 20px;
        border: 3px solid #f9cf00;
        border-radius: 4px;
        outline: #f9cf00;
        transition: box-shadow 0.3s ease;
    }    
    #search-input-2:focus {
        outline: none;/* Wyłączamy domyślne podświetlenie */
        box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.5); /* poświetlenie zewnętrzne inputa */
    }   
    .suggestions-box, .suggestions-box-2 {
        text-align: left;
        /*display: flex;*/
            /*  justify-content: center;  Wyśrodkowanie poziome */
        /*position: relative;*/
        max-width: 300px;
        margin: auto;
        padding: 1px;
        background-color: #e8eaed;
        border: 0px solid black;
        border-top: none;
        max-height: 100px;
        width: 80%;
        overflow-y: auto;
        z-index: 1;
    }

    .suggestion-item, .suggestion-item-2 {
        padding: 2px 2px 2px 5px;
        cursor: pointer;
        font-family: Arial, sans-serif;
        font-size: 13px;
        background-color: #f5f5d5;
        /*background: linear-gradient(0.25turn, #f5f5d5, #f5f5d5, #f9cf00);*/
    }

    .suggestion-item:hover {
        background-color: #e8eaed;
    }
    /*END wyszukiwarka miejscowości */

    /*modyfikacja svg */
    .svg-icon{
        height:40px; 
        width:40px;
    }

    /*END modyfikacja svg */
    .filter-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .filter {
        float: left;
        padding: 1px 1px 1px 1px;
        margin: 0px 0px 0px 0px;
        width: 70px;
        height: 70px;   
        color:#e8eaed;
        text-align: center;
        border-radius: 5px;
        cursor: pointer;
        font-family: Arial, sans-serif;
        font-weight: 600;
        font-size: 14px;
        user-select: none;
        transition: background-color 0.3s;
        fill: #e8eaed; /*kolor svg*/
    }


    .filter.selected {
        background-color: #d8d0a7;   
        color: white;
        outline: 1px solid white;
    }   

    .filter:hover {
        background-color: #e0e0e0;
        color: #f9cf00;
        fill: #f9cf00; /*kolor svg*/
    }

    #submit-button, #clearSessionBtn{
        width: 90px;
        padding: 10px 5px 10px 5px;
        background-color: #f0a500;
        color: #e8eaed;
        border: none;
        border-radius: 3px;
        cursor: pointer;
        font-weight: 600;
        margin-top: 5px;
        outline: 1px #e8eaed solid;
        /*display: block;*/
    }
    
    #submit-button:hover, #clearSessionBtn:hover {
        background-color: white;
        color: #f9cf00;
        outline: 1px #f0a500 solid;
    }
    /*przycisk przesuniecia daty o 7 dni*/
    .date-input{
        width: 150px;
        height: 35px;
        padding: 4px 4px 4px 12px;
        font-size: 15px;
        border: 1px solid #e8eaed;
        /*border-radius: 4px;*/
        transition: box-shadow 0.3s ease;
        outline: none;/* Wyłączamy domyślne podświetlenie */
        box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.5); /* poświetlenie zewnętrzne inputa */
        
    }

    .shift-button{
        color:#e8eaed;
        background-color: #f9cf00;
        text-align: center;
        border-radius: 5px;
        cursor: pointer;
        font-family: Arial, sans-serif;
        font-weight: 600;
        font-size: 16px;
        user-select: none;
        transition: background-color 0.3s;
        width: 70px;
        height: 25px;
        padding: 2px 3px 2px 3px;
        border: none;
    }
    .shift-button:hover{
        background-color: #e0e0e0;
        color: #f9cf00;
        outline: none;/* Wyłączamy domyślne podświetlenie */
        
    }   

    /*SUWAK*/
    /* Podstawowy styl dla suwaka */
    .distance-slider {
        -webkit-appearance: none;
        appearance: none;
        width: 250px;
        height: 8px;
        background: #ddd;
        border-radius: 5px;
        outline: none;
        opacity: 0.7;
        transition: opacity 0.2s;
    }

    .distance-slider:hover {
        opacity: 1;
    }

    /* Pseudo-element before – kolorowy zakres */
    .distance-slider::-webkit-slider-runnable-track {
        background: linear-gradient(to right, #FFF 0%, #e8eaed 84%, #f9cf00 84%);
    }

    .distance-slider::-moz-range-track {
        background: linear-gradient(to right, #FFF 0%, #e8eaed 84%, #f9cf00 84%);
        height: 8px;
    }


    /* Styl uchwytu suwaka */
    .distance-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 40px; /* Szerokość uchwytu */
        height: 40px; /* Wysokość uchwytu */
        background: url('http://opodal.com/img/logo.png') no-repeat center center; /* Logo jako uchwyt */
        background-size: contain;
        cursor: pointer;
        border: none;
        transform: translateX(-50%); /* Przesunięcie środka uchwytu */
        
    }

    .distance-slider::-moz-range-thumb {
        width: 40px;
        height: 40px;
        background: url('http://opodal.com/img/logo.png') no-repeat center center;
        background-size: contain;
        cursor: pointer;
        border: none;
        transform: translateX(-50%); /* Przesunięcie środka uchwytu */
    }

    /* Styl wyświetlający wartość odległości */
    .distancevalue {
        text-align: center;
        font-size: 16px;
        margin-top: 14px;
        margin-bottom: 0px;
        color: #e8eaed;
        font-family: Arial, sans-serif;
        
    }
/*END SUWAK*/

/*START INTRO)*/
    .intro{
        margin: 5px 5px 15px 5px; 
        font-size: 18px;
        font-weight: 400;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-family: 'National2Web', sans-serif !important;
        font-weight: 700;
        
    }

    @media (max-width: 640px) {
        .intro{

            display: flex;
            justify-content: left;
            align-items: left;
            text-align: left;
        }

    }

    .intro-box{
        text-align: left;
        border-left: 40px solid grey;/* #f9cf00d8;*/
        /*border-bottom: 10px solid #00000072;*/
        padding-left: 10px;
        /*
        border-image: linear-gradient(to right, #f9cf00, #f0a500, #f0dbaf) 1;*/
    }
    .img_intro{
        margin-right: 20px; 
        margin-left: -40px;
        width: 20px;
        height: 20px;
    }
    .sorting{
        border-top: 2px solid #b9b9b9;
        color:#b9b9b9;
        border-bottom: 2px solid #b9b9b9;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-family: 'National2Web', sans-serif !important;
        font-weight: 700;
        background-color: white;
    }
    .sorting_in{
        border-right: 3px solid #b9b9b9;
        width: 50%;
        display: flex;
        justify-content: right;
        text-align: right;
        padding-right: 15px;
    }
    .sorting_in_last{
        width: 50%;
        
        text-align: left;
        padding-left: 15px;
    }
    .g-b:hover{
        filter: brightness(0) saturate(100%) invert(64%) sepia(0%) saturate(0%) hue-rotate(160deg) brightness(0%) contrast(100%);
        transition: filter 0.3s ease;
    }
    
    .g-b {
        filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(0%);
    }


/*END INTRO)*/

/*START Toggle Switch - przelacznik kolorow w menu filtorw*/

    .switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
    margin: 10px;
    }
    .switch input {
    opacity: 0;
    width: 0;
    height: 0;
    }
    .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #e8eaed;
    transition: .4s;
    border-radius: 34px;
    }
    .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: #f0a500;
    transition: .4s;
    border-radius: 50%;
    }
    input:checked + .slider {
    background-color: black;
    }
    input:checked + .slider:before {
    transform: translateX(26px);
    }

    /* Tryb ciemny – możesz dopasować */
    .dark-mode {
    color: white !important;
    background-color: black !important;
    }

/*END Toggle Switch - przelacznik kolorow w menu filtorw*/

/* Domyślnie jasna czcionka */
.pure-drawer {
    color: #fff;
    max-height: 100vh;
    overflow-y: auto; /* SUWAK w przypadku przepełnienia */
}

/* Po kliknięciu przycisku: czarna czcionka */
.pure-drawer.dark {
    color: #000;
}

.pure-drawer.dark a,
.pure-drawer.dark p,
.pure-drawer.dark span,
.pure-drawer.dark label {
    color: #000 !important;
}
.distancevalue.dark {
    color: black;
  }
.shift-button{
    color: black; 
}
/* Input zawsze czarny, niezależnie od trybu */
.pure-drawer input {
    color: #000 !important;
}
.dark {
    color: black;
    fill: black;
  }