.circle-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: white;
}

.line-vertical {
    width: 2px;
    background-color: white;
    flex-grow: 1;
    margin: 4px 0;
}

.search-box {
    background-color: var(--dark-blue);
}

    .search-box select,
    .search-box input {
        background-color: var(--white);
        color: var(--dark-blue);
    }
/* Stilizuj track (pozadina) */
.form-switch .form-check-input {
    width: 3rem;
    height: 1.5rem;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 1.5rem;
    position: relative;
    transition: background-color 0.3s ease;
}

    /* Stilizuj thumb (krug) */
    .form-switch .form-check-input::before {
        content: '';
        position: absolute;
        top: 2px;
        left: 2px;
        width: 1.1rem;
        height: 1.1rem;
        border-radius: 50%;
        background-color: #aaa; /* siva kada nije uključeno */
        transition: all 0.3s ease;
    }

/* Kada je uključeno – thumb postaje tamno plav i pomera se */
.form-check-input:checked::before {
    background-color: #004080; /* tamno plava kada je uključeno */
    transform: translateX(1.4rem);
    transition: all 0.3s ease;
}

.flatpickr-date,
.flatpickr-time {
    height: 40px; /* ista visina */
    padding: 6px 10px; /* unutrašnji razmak */
    font-size: 1rem; /* čitljiv font */
    font-weight: 500;
    color: var(--dark-blue);
    text-align: center;
}

.flatpickr-time {
    max-width: 100px; /* suženi time picker */
}

.flatpickr-date {
    max-width: 150px;
}


    .flatpickr-date::placeholder,
    .flatpickr-time::placeholder {
        color: var(--dark-blue);
        opacity: 1;
    }

/* Sužavanje celog kalendara (vremenski deo) */
.flatpickr-calendar {
    width: auto !important;
    min-width: 0 !important;
}

/* Sužavanje samo vremenskog dela */
.flatpickr-time {
    width: 90px !important;
    min-width: 90px !important;
    padding: 4px !important;
    justify-content: center !important;
}

    /* Sužavanje input polja za sat i minut */
    .flatpickr-time input,
    .flatpickr-time .numInputWrapper {
        width: 35px !important;
        padding: 2px !important;
        font-size: 0.9rem;
    }

    /* Separator (:) između HH i MM */
    .flatpickr-time .flatpickr-time-separator {
        margin: 0 2px;
    }

    /* Sakrij sekunde ako se pojavljuju */
    .flatpickr-time .flatpickr-second {
        display: none !important;
    }

.search-box select,
.search-box input {
    background-color: white;
    color: var(--dark-blue);
}

.ms-3 {
    margin-left: 12px; /* razmak između map ikone i dropdown-a */
}

/* Modal overlay */
#modal-overlay {
    position: absolute;
    top: 10%;
    left: 5%;
    width: 90%;
    height: 70%;
    background-color: white;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    display: none;
    z-index: 1000;
    overflow: hidden;
}

#map {
    width: 100%;
    height: 100%;
    background-color: #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #333;
}

.open-btn {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border: none;
    background-color: #3498db;
    color: white;
    border-radius: 5px;
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 24px;
    color: #888;
    cursor: pointer;
    z-index: 1001;
}

    .close-btn:hover {
        color: #000;
    }

@media (max-width: 768px) {


    #modal-overlay {
        width:95%;
        height:60%;
        left:2%;
        top: 12%;
    }
}