/*Color variables*/
:root {
    --color-beige: #ece4cf;
    --color-third: #739072;
    --color-theme: white;
    --color-font: black;
    --color-secondary: #4f6f52;
    --color-primary: #3a4d39;
    --color-boxshadow: rgba(0, 0, 0, 0.15);
    --color-delay: #820300;
    --color-warning: #B67352;
    --color-info: grey;
    --color-theme-second: rgba(204, 204, 204, 0.69);
    --color-toast: #ecca9e;
    --color-live: #4f6f52;

    --slide-animation: transform 0.18s -0.1s cubic-bezier(0, 0, 0.2, 1), opacity 0.08s 0s cubic-bezier(0, 0, 0.2, 1), display 0.08s 0s cubic-bezier(0, 0, 0.2, 1) allow-discrete;
    --slide-in-animation: transform 0.18s 0s cubic-bezier(0, 0, 0.2, 1), opacity 0.08s 0s cubic-bezier(0, 0, 0.2, 1), display 0.08s 0s cubic-bezier(0, 0, 0.2, 1) allow-discrete;
    --slide-amount: 3rem;

    overscroll-behavior: none;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-theme: rgb(33, 33, 36);
        --color-theme-second: rgba(74, 74, 74, 0.69);
        --color-font: rgb(220, 220, 220);
        --color-secondary: #739072;
        --color-primary: var(--color-font);
        --color-boxshadow: rgba(200, 200, 200, 0.08);
        --color-delay: #a85150;
        --color-live: rgb(220, 220, 220);

        --color-warning: #f3986a !important;
        --color-info: #dadada !important;
        --color-toast: #925507 !important;
    }

    body {
        color: var(--color-font);
    }

    a {
        text-decoration: none;
        color: var(--color-secondary);
    }
}





body {
    overflow-x: hidden;
    -webkit-user-select: none;
    user-select: none;
    font-family: "Open Sans", sans-serif;
    font-size: 0.8rem;
    height: 100%;
}




.loader {
    border: 0.5em solid #9cbfba;
    /* Light grey */
    border-top: 0.5em solid var(--color-primary);
    border-radius: 50%;
    width: 2em;
    height: 2em;
    animation: spin 1.5s cubic-bezier(.46, .18, .17, .74) infinite;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 999;
    translate: -50% -50%;
}



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

    100% {
        transform: rotate(360deg);
    }
}

.no {
    display: none !important;
}

button:not(.zamudas button) {
    height: 2em;
}


/*Containers*/

/* The transitions work nicely (both ways) in Chrome. For unknown reason, fading out with display: none and allow-discrete happens instantaniously in Firefox. (It fades in correctly) */
#favorites {
    transform: translateX(0);
    opacity: 1;
    transition: var(--slide-animation);

    @starting-style {
        opacity: 0;
        transform: translateX(calc(-1 * var(--slide-amount)));

    }
}

#favorites.no {
    transform: translateX(calc(-1 * var(--slide-amount)));
    opacity: 0;
    transition: var(--slide-in-animation);
}

#timetable_container {
    transform: translateX(0);
    opacity: 1;
    transition: var(--slide-animation);

    @starting-style {
        opacity: 0;
        transform: translateX(var(--slide-amount));

    }
}

#timetable_container.no {
    transform: translateX(var(--slide-amount));
    opacity: 0;
    transition: var(--slide-in-animation);
}

.site_container {
    min-height: 350px;
    left: 0;
    right: 0;
    border-radius: 1.5rem 1.5rem 0 0;
    box-shadow: 0 0 20px 0 var(--color-boxshadow);
    position: absolute;
    top: calc(100dvh - 120px - env(safe-area-inset-bottom));
    background-color: var(--color-theme);
    padding-bottom: calc(85px + env(safe-area-inset-bottom));
    z-index: 1;

}

.tool_container {
    height: 85px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0%;
    border-radius: 1.5rem 1.5rem 0 0;
    background-color: var(--color-theme);
    opacity: 1;
    box-shadow: 0 0 20px 0 var(--color-boxshadow);
    display: block;
    z-index: 2;
    padding-bottom: env(safe-area-inset-bottom);
}


.delay_container {
    min-height: 100vh;
    left: 0;
    right: 0;
    border-radius: 1.5rem 1.5rem 0 0;
    box-shadow: 0 0 20px 0 var(--color-boxshadow);
    position: fixed;
    top: 0;
    background-color: var(--color-theme);
    margin-bottom: 80px;
    z-index: 0;
}

.non_existent_container {
    position: fixed;
    width: 80vw;
    height: fit-content;
    top: 25%;
    left: 10vw;
    transform: translate(0, -50%);
    color: white;
    background-color: #820300;
    opacity: 0;
    border-radius: 1.5rem;
    box-shadow: 0 0 20px 0 var(--color-boxshadow);
    z-index: 1;
}

.offline_warning {
    position: fixed;
    background-color: var(--color-theme);
    border-radius: 1.5rem;
    box-shadow: 0 0 20px 0 var(--color-boxshadow);
    opacity: 0.95;
    bottom: 150px;
    left: 5vw;
    width: 90vw;
    height: 130px;
    z-index: 100;
}

.toast_message {
    position: fixed;
    background-color: var(--color-theme);
    color: var(--color-font);
    border-radius: 1.5rem;
    box-shadow: 0 0 20px 0 var(--color-boxshadow);
    opacity: 0.95;
    bottom: 150px;
    left: 5vw;
    width: 90vw;
    height: auto;
    padding-top: 1rem;
    padding-bottom: 1rem;
    z-index: 100;
}

.info-container {
    position: fixed;
    width: 60px;
    height: 120px;
    top: 0;
    right: 0;
    background-color: var(--color-theme);
    border-radius: 0 0 0 1.5rem;

}

.info-panel {
    position: fixed;
    width: 90vw;
    max-width: 400px;
    height: 450px;
    top: 40%;
    left: calc((100vw - min(400px, 90vw))/2);
    transform: translate(0, -50%);
    background-color: var(--color-theme);
    border-radius: 1.5rem;
    box-shadow: 0 0 20px 0 var(--color-boxshadow);
    z-index: 10;
}

.tool_item {
    font-size: 0.8em;
    position: absolute;
    transform: translateX(-50%);
    bottom: calc(10px + env(safe-area-inset-bottom));
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    color: var(--color-primary);

}



.pritozba {
    background-color: var(--color);
    color: black;
    box-shadow: 0 0 8px 0 var(--color-boxshadow);
    border-color: white;
    border-radius: 1rem;
    width: fit-content;
    padding: 0.5rem 1rem;
    margin-left: 5px;
    margin-right: 5px;
    display: inline-block;
    font-size: 0.5rem;
    position: absolute;
    display: none;
}

/*BEGIN Search elements*/
.search_container {
    position: fixed;
    width: 80vw;
    max-width: 400px;
    height: 50px;
    top: calc(10% + env(safe-area-inset-top));
    left: calc((100vw - min(400px, 80vw))/2);
    transform: translate(0, -50%);
    background-color: var(--color-theme);
    border-radius: 25px;
    box-shadow: 0 0 20px 0 var(--color-boxshadow);
    opacity: 0.9;
    z-index: 10;

}

#search_field {
    /*     position: relative; */
    font-family: 'Open Sans', sans-serif;
    background-color: var(--color-theme);
    width: 70%;
    /* left:10px; */
    margin-left: 10px;
    border: none;
    text-align: left;
    z-index: 5;
}

input:-webkit-autofill {
    -webkit-background-clip: text;
    background-clip: text;
}

#search_logo {
    /* position: absolute; */
    position: relative;
    right: 20px;
    /* transform: translate(0, 60%); */
    font-size: 2em;
    color: var(--color-primary);
    z-index: 5;

}

#search_results_container {
    background-color: var(--color-theme);
    border-radius: 0 0 25px 25px;
    margin-top: -30px;
    padding-top: 20px;
    opacity: 0.9;
    z-index: 2;
    transition: opacity 0.2s ease-in-out;
}

#search_results_container:not(:has(li)) {
    opacity: 0;
}

#search_results {
    font-size: 0.9rem;
    color: var(--color-primary);
    padding-left: 40px;
    padding-right: 40px;
    height: fit-content;
    max-height: calc(100dvh - (40dvh + env(safe-area-inset-top) + 50px + 20px + 110px + env(safe-area-inset-bottom)));
    padding-bottom: 10px;
    overflow-y: auto;
    min-height: 3rem;
    transition: all 0.2s ease-in-out;
}

#search_results:not(:has(li)) {
    min-height: 0;
    max-height: 0;
    height: 0;
}

#search_results li {
    /* width: fit-content; */
    list-style-type: none;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    opacity: 0.8;

}

#search_results li:active {
    background-color: #00000008;
    border-radius: 0.45rem;
}

.busLive {
    right: calc(5% + 25px);
    padding-top: 3px;
    position: absolute;
    color: var(--color-primary);
    font-size: 0.9rem;
}

.tripLive {
    box-shadow: 0 0 4px 0 var(--color-secondary);
}

/*END Search elements*/


/*BEGIN Float button elements */
.float {
    position: fixed;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background-color: var(--color-theme);
    box-shadow: 0 0 20px 0 var(--color-boxshadow);
    padding: 0 0 0 0;
    opacity: 1;
    transition: opacity 0.5s;
}

.refresh {
    bottom: calc(210px + env(safe-area-inset-bottom));
    right: 20px;
}

.locate {
    bottom: calc(150px + env(safe-area-inset-bottom));
    right: 20px;
}

.float_icon {
    color: var(--color-primary);
    font-size: 30px;
    position: relative;
    top: 10px;

}

.locate_float:active {
    opacity: 0.5;
}

.refresh_animate {
    animation: sync_spin 1s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite;

}



/*BEGIN Map elements*/
.map {
    height: calc(100dvh - 80px);
    border-radius: 0 0 10px 10px;
    margin-top: 0;
    left: 0;
    width: 100vw;
    position: fixed;
    top: 0;
    z-index: 0;


}

.leaflet-touch .leaflet-control-attribution {
    display: none;
}

#map_attributions {
    position: absolute;
    color: grey;
    bottom: calc(40px + env(safe-area-inset-bottom));
    right: 5px;
    z-index: 1000;
    padding: 0.5rem;
    opacity: 0.5;
    transition: opacity 0.5s;

}

#map_attributions a {
    color: grey;
    text-decoration: none;
}

#map_attributions:hover {
    opacity: 1;
}

#map_attributions:active {
    opacity: 1;
}

img[alt*="MapTiler logo"] {
    margin-bottom: calc(40px + env(safe-area-inset-bottom));
    opacity: 0.8;
}

/*END Map elements*/


footer {
    font-size: small;
    color: gray;
    padding-bottom: 1.5rem;
    padding-top: 1.5rem;
    text-align: center;
}

.line {
    height: 0.35rem;
    border-radius: 5rem;
    border-style: hidden;
    width: 30vw;
    background-color: var(--color-primary);
    position: relative;
    top: 5px
}




/*Icons*/

.tool_icon {
    font-size: 2.5em;
    color: var(--color-primary);
    padding-top: 5px;
    padding: 0.5rem;
    position: absolute;
    transform: translateX(-50%);
}

.tool_icon:active {
    color: var(--color-secondary);
    background-color: var(--color-boxshadow);
    border-radius: 50%;
    padding: 0.5rem;
    opacity: 0.9;
}

.tool_container:has(~ #menu:not(.closed) #favorites:not(.no)) .toolbarFavourite,
.tool_container:has(~ #menu:not(.closed) #timetable_container:not(.no)) .toolbarTimetable {
    /* Toolbar shows which pannel is currently selected */
    background-color: var(--color-theme-second);
    border-radius: 50%;
}

.material-symbols-outlined {
    font-variation-settings:
        'FILL' 0,
        'wght' 200,
        'GRAD' 0,
        'opsz' 48
}

/*Buttons*/
.btn_general {
    background-color: var(--color-secondary);
    color: white;
    box-shadow: 0 8px 8px 0 var(--color-boxshadow);
    border-color: white;
    border-radius: 1rem;
    width: fit-content;

    padding: 0.5rem 1rem;

    font-family: 'Open Sans', sans-serif;
    font-size: 0.8rem;
}

.btn_return {
    background-color: var(--color-theme);
    color: var(--color-font);
    box-shadow: 0 8px 8px 0 var(--color-boxshadow);
    border-radius: 1.5rem;
    width: fit-content;
    position: fixed;
    bottom: calc(env(safe-area-inset-bottom) + 180px);
    left: 50%;
    transform: translate(-50%);
    padding-right: 1.5rem;
    padding-left: 1.5rem;
    padding-bottom: 1rem;
    padding-top: 0.5rem;

    font-family: 'Open Sans', sans-serif;
    font-size: 0.8rem;
    opacity: 0.8;
}

.btn_offline {
    background-color: var(--color-theme-second);
    color: var(--color-font);
    box-shadow: 0 8px 8px 0 var(--color-boxshadow);
    border-color: var(--color-theme-second);
    border-radius: 1rem;
    width: fit-content;

    margin-top: 15px !important;
    margin-bottom: 20px !important;
    padding: 0.5rem 1rem;

    font-family: 'Open Sans', sans-serif;
    font-size: 0.8rem;
}

.btn_delay_more {
    background-color: white;
    color: black;
    box-shadow: 0 0px 8px 0 var(--color-boxshadow);
    border-color: white;
    border-radius: 1rem;
    width: fit-content;

    margin-top: 15px !important;
    padding: 0.5rem 1rem;

    font-family: 'Open Sans', sans-serif;
    font-size: 0.8rem;
}

.btn_delay_more:active {
    filter: brightness(0.9);
}

.btn_busstop {
    background-color: white;
    color: black;
    box-shadow: 0 8px 8px 0 var(--color-boxshadow);
    border-color: white;
    border-radius: 1rem;
    width: fit-content;
    padding: 0.5rem 1rem;
    margin-left: 5px;
    margin-right: 5px;
    margin-block-end: 5px;
    margin-block-start: 5px;
    display: inline-block;
    font-size: 0.8rem;
}

.btn_busstop:active {
    background-color: var(--color-beige);
}

.btn_busline {
    background-color: var(--color-third);
    color: white;
    box-shadow: 0 8px 8px 0 var(--color-boxshadow);
    border-color: white;
    border-radius: 1rem;
    width: fit-content;
    padding: 0.5rem 1rem;
    margin-left: 5px;
    margin-right: 5px;
    margin-block-end: 5px;
    margin-block-start: 5px;
    display: inline-block;
    font-size: 0.8rem;
}

.btn_busline:active {
    background-color: var(--color-secondary);
}

/*BEGIN Menu elements*/
#menu {
    scroll-margin: 20dvh;
}

/* END Menu elements*/

/*BEGIN Delay elements*/
.zamuda_entry {
    position: relative;
    left: 35%;
    height: 1.5rem;
    width: fit-content;
}

.zamuda_entry.first {
    margin-top: 15px;
    height: 2rem;
}

.postaja {
    position: relative;
    left: 10px;
    font-size: 0.8rem;
    color: var(--color-font);

}

.zamuda {
    position: absolute;
    left: -65px;
    width: 50px;
    text-align: right;
    ;
    font-size: 0.8rem;
}

.dot {
    position: relative;
    height: 0.6rem;
    width: 0.6rem;
    background-color: var(--color-theme);
    border: 0.2rem solid var(--color-secondary);
    border-radius: 100%;
    display: inline-block;
}

.big {
    transform: translate(-0.2rem);
    height: 1rem;
    width: 1rem;
}

.red {
    color: var(--color-delay) !important;
    border-color: var(--color-delay) !important;
}

.green {
    color: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
}

#delay_content {
    padding-top: 15px;
    padding-bottom: 20px;
}

#delay_container {
    scroll-margin-bottom: 100px;
}

.zamuda_line {
    position: absolute;
    margin-left: 0.5rem;
    transform: translate(-50%);
    z-index: 0;
    border-left: 4px solid var(--color-secondary);
    display: inline-block;
    filter: opacity(0.75);
    height: 1.5rem;
}

/*END Delay elements*/

/*BEGIN Popup elements*/

.leaflet-popup-content-wrapper {
    width: fit-content;
    max-width: 90vw;
    background-color: var(--color-theme);
    display: none;
}

.leaflet-popup-tip {
    background-color: var(--color-theme);
    display: none;
}

.leaflet-popup {
    opacity: 0.85 !important;
    display: none;
}

.leaflet-popup-close-button {
    display: none;
}

.popup-relacija {
    padding-left: 10px;
    font-family: "Open Sans", sans-serif;
    font-size: 1.1rem;
    color: var(--color-primary) !important;
    text-decoration: none;
}

.bus_info {
    height: 1.2rem;
    margin-top: -0.2rem;
    color: var(--color-font);
}


.popup_route {
    color: var(--color-primary) !important;
    text-decoration: none !important;
    display: block;
    width: 90vw !important;
    font-size: 1rem;
}

.popup_id {
    text-emphasis: italic !important;
    color: var(--color-font);
}

.popup_zamuda_button {
    background-color: var(--color-third) !important;
    color: white;
    box-shadow: 0 0px 8px 0 var(--color-boxshadow);
    border-color: white;
    border-radius: 1rem;
    width: fit-content;
    padding: 0.5rem 1rem;
    margin-top: 10px;
    margin-bottom: 10px;
    display: inline-block;
    font-size: 0.8rem;
    z-index: 10;
}

/*END Popup elements*/

/*BEGIN Schedule elements*/
table {
    border-collapse: separate;
    border-spacing: 10px 10px;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

table thead td {
    font-weight: bold;
    color: var(--color-primary);
    text-align: center;
    padding-bottom: 5px;
    padding-top: 5px;
}

table thead tr {
    box-shadow: unset;
}

table td {
    text-align: center;
}

.ura {
    padding-left: 5px;
}

table td .zeleniRelacijskiGumb {
    color: white;
    text-decoration: none;
    background-color: var(--color-third);
    border: 0.1rem solid var(--color-third);
    border-radius: 1rem;
    width: 60%;
    padding: 0.1rem 1rem;
    margin-left: 5px;
    margin-right: 5px;
    margin-block-end: 10px;
    margin-block-start: 10px;
    display: inline-block;
    font-size: 0.6rem;

}

table td .zeleniRelacijskiGumb:active {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
}

table tr {
    box-shadow: 0 0 4px 0 var(--color-boxshadow);
    border-radius: 10px;
    border-color: white;

}

/*Missed bus styling*/
.missed {
    opacity: 0.5 !important;
}

.on_route {
    opacity: 0.8;
    border: 2px solid var(--color-secondary) !important;
}


/*BEGIN Schedule information elements*/
.bubble {
    border: 2px solid black;
    font-size: 0.7rem;
    padding: 0.5rem 1rem;
    margin-left: 10vw;
    margin-right: 10vw;
    margin-block-end: 5px;
    margin-block-start: 5px;
    display: inline-block;
    border-radius: 1rem;
    opacity: 0.5;
}

.warning {

    color: var(--color-warning);
    border-color: var(--color-warning);
}

.spinning {
    animation: sync_spin 3s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite !important;
}

@keyframes sync_spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-360deg);
    }
}

.info {
    border-color: var(--color-info);
    color: var(--color-info);

}

/*END Schedule information elements*/



.center {
    text-align: center;
    display: table;
    margin: 0 auto;

}

h2 {
    font-family: "Open Sans", sans-serif;
    font-size: 1.5rem;
    font-weight: 100;
    color: var(--color-primary);
}

.rotated-marker {
    transform-origin: center;
}

input[type='text'] {
    text-align: center;
    border: none;
    border-bottom: 2px solid var(--color-primary);
    width: 60%;
    padding: 0.5rem 1rem;
    /*     margin-left: auto; */
    margin-right: auto;
    margin-block-end: 10px;
    margin-block-start: 10px;
    display: inline-block;
    font-size: 0.8rem;
    color: var(--color-primary);
    outline: none;

}

#update-info {
    font-size: xx-small;
    color: gray;
    text-align: center;
}

.share-button {
    position: absolute !important;
    left: -50px;
    bottom: -30px;
    color: var(--color-primary);
    font-size: 1.5rem;
    cursor: pointer;
    display: none;

}

.realtime_container {
    width: calc(100% - 0.5rem);
    border-color: var(--color-secondary);
    border-radius: 1rem;
    border-width: 0.1rem;
    border-style: dotted;
    padding-left: 1.5rem;
    padding-right: 0.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    margin-left: -2rem;
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
}

.nextStopLiveData {
    color: var(--color-secondary);
    font-size: 0.9rem;
    font-weight: bold;
    margin-left: 0.3rem;
}

.busInfoContainer {
    position: fixed;
    width: 90vw;
    height: fit-content;
    background-color: var(--color-theme);
    border-radius: 1.5rem;
    box-shadow: 0 0 20px 0 var(--color-boxshadow);
    top: calc(env(safe-area-inset-top) + 40px);
    left: calc(5vw);
    opacity: 0.85;
    animation: fadein 0.5s;
}

.busInfoContainer.hidden {
    display: none !important;
    animation: fadeout 0.5s;

}

.popupIcon {
    padding-right: 0.5rem;
    margin-top: 0.3rem;
}

.timeLabel {
    font-size: 0.6rem;
    color: grey;
    margin-left: 0.4rem;
    padding-bottom: 0.5rem;
}

.shareContainer {
    background-color: var(--color-secondary);
    width: 3.5rem;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    text-align: center;
    border-radius: 0 1.5rem 1.5rem 0;
}

.shareContainer :hover {
    opacity: 0.6;
}

.shareContainer[disabled] {
    pointer-events: none;
    opacity: 0.4;
}

.selected::before {
    content: "🟡 ";
}

.selected {
    font-weight: bold;
}

#search_results_container li:hover {
    background-color: var(--color-theme-second);
}

#label_search_field {
    z-index: 6;
    /*     position: absolute;
    right: 2rem;
    top: 1.1rem; */
    background-color: var(--color-theme-second);
    height: 50px;
    /* Always set to same as element search_container */
    border-radius: 25px 0 0 25px;
    display: flex;
    align-items: center;
}

/* Timetable date row: 1 row, 3 columns */
#timetable_date_row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    width: 80vw;
    margin-bottom: 2rem;
    padding-bottom: 0.1rem;
    padding-top: 0.1rem;
    margin-left: auto;
    margin-right: auto;
    background-color: rgba(200, 200, 200, 0.1);
    border-radius: 5rem;
    height: fit-content;

    .float {
        /* neutralize global .float fixed positioning inside this row */
        position: static;
        width: auto;
        height: auto;
        box-shadow: none;
    }

    >.btn_general {
        flex: 0 0 20%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0.75rem 0rem;
        border-radius: 5rem;
        transform: scale(0.8);
        opacity: 0.8;
        transition: all 0.3s ease-in-out;
    }

    >.btn_general:hover {
        opacity: 0.9;
        transform: scale(0.9);
    }

    >#timetable_date_display {
        flex: 1 1 auto;
        text-align: center;
        display: block;
    }
}

.hidden {
    /* These are not clickable/holdable/hoverable on Firefox */
    visibility: hidden;
}