style.css
/* mesta u vozu */

.div1 {
    grid-area: 1 / 1 / 2 / 2;
}

.div2 {
    grid-area: 1 / 2 / 2 / 3;
}

.div3 {
    grid-area: 1 / 3 / 2 / 4;
}

.div4 {
    grid-area: 1 / 4 / 2 / 5;
}

.div5 {
    grid-area: 1 / 5 / 2 / 6;
}

.div6 {
    grid-area: 1 / 6 / 2 / 7;
}

.div7 {
    grid-area: 1 / 7 / 2 / 8;
}

.div8 {
    grid-area: 1 / 8 / 2 / 9;
}

.div9 {
    grid-area: 2 / 1 / 3 / 2;
}

.div10 {
    grid-area: 2 / 2 / 3 / 3;
}

.div11 {
    grid-area: 2 / 3 / 3 / 4;
}

.div12 {
    grid-area: 2 / 4 / 3 / 5;
}

.div13 {
    grid-area: 2 / 5 / 3 / 6;
}

.div14 {
    grid-area: 2 / 6 / 3 / 7;
}

.div15 {
    grid-area: 2 / 7 / 3 / 8;
}

.div16 {
    grid-area: 2 / 8 / 3 / 9;
}

.div17 {
    grid-area: 5 / 1 / 6 / 2;
}

.div18 {
    grid-area: 5 / 2 / 6 / 3;
}

.div19 {
    grid-area: 5 / 3 / 6 / 4;
}

.div20 {
    grid-area: 5 / 4 / 6 / 5;
}

.div21 {
    grid-area: 5 / 5 / 6 / 6;
}

.div22 {
    grid-area: 5 / 6 / 6 / 7;
}

.div23 {
    grid-area: 5 / 7 / 6 / 8;
}

.div24 {
    grid-area: 5 / 8 / 6 / 9;
}

.div25 {
    grid-area: 6 / 1 / 7 / 2;
}

.div26 {
    grid-area: 6 / 2 / 7 / 3;
}

.div27 {
    grid-area: 6 / 3 / 7 / 4;
}

.div28 {
    grid-area: 6 / 4 / 7 / 5;
}

.div29 {
    grid-area: 6 / 5 / 7 / 6;
}

.div30 {
    grid-area: 6 / 6 / 7 / 7;
}

.div31 {
    grid-area: 6 / 7 / 7 / 8;
}

.div32 {
    grid-area: 6 / 8 / 7 / 9;
}

/* kola 23 */
.kola23 .div1 {
    grid-area: 1 / 1 / 2 / 2;
}

.kola23 .div2 {
    grid-area: 1 / 2 / 2 / 3;
}

.kola23 .div3 {
    grid-area: 1 / 3 / 2 / 4;
}

.kola23 .div4 {
    grid-area: 1 / 4 / 2 / 5;
}

.kola23 .div5 {
    grid-area: 1 / 5 / 2 / 6;
}

.kola23 .div6 {
    grid-area: 1 / 6 / 2 / 7;
}

.kola23 .div7 {
    grid-area: 1 / 7 / 2 / 8;
}

.kola23 .div8 {
    grid-area: 1 / 8 / 2 / 9;
}

.kola23 .div9 {
    grid-area: 1 / 9 / 2 / 10;
}

.kola23 .div10 {
    grid-area: 1 / 10 / 2 / 11;
}

.kola23 .div11 {
    grid-area: 2 / 1 / 3 / 2;
}

.kola23 .div12 {
    grid-area: 2 / 2 / 3 / 3;
}

.kola23 .div13 {
    grid-area: 2 / 3 / 3 / 4;
}

.kola23 .div14 {
    grid-area: 2 / 4 / 3 / 5;
}

.kola23 .div15 {
    grid-area: 2 / 5 / 3 / 6;
}

.kola23 .div16 {
    grid-area: 2 / 6 / 3 / 7;
}

.kola23 .div17 {
    grid-area: 2 / 7 / 3 / 8;
}

.kola23 .div18 {
    grid-area: 2 / 8 / 3 / 9;
}

.kola23 .div19 {
    grid-area: 2 / 9 / 3 / 10;
}

.kola23 .div20 {
    grid-area: 2 / 10 / 3 / 11;
}

.kola23 .div21 {
    grid-area: 5 / 1 / 6 / 2;
}

.kola23 .div22 {
    grid-area: 5 / 2 / 6 / 3;
}

.kola23 .div23 {
    grid-area: 5 / 3 / 6 / 4;
}

.kola23 .div24 {
    grid-area: 5 / 4 / 6 / 5;
}

.kola23 .div25 {
    grid-area: 5 / 5 / 6 / 6;
}

.kola23 .div26 {
    grid-area: 5 / 6 / 6 / 7;
}

.kola23 .div27 {
    grid-area: 5 / 7 / 6 / 8;
}

.kola23 .div28 {
    grid-area: 5 / 8 / 6 / 9;
}

.kola23 .div29 {
    grid-area: 5 / 9 / 6 / 10;
}

.kola23 .div30 {
    grid-area: 5 / 10 / 6 / 11;
}

.kola23 .div31 {
    grid-area: 6 / 1 / 7 / 2;
}

.kola23 .div32 {
    grid-area: 6 / 2 / 7 / 3;
}

.kola23 .div33 {
    grid-area: 6 / 3 / 7 / 4;
}

.kola23 .div34 {
    grid-area: 6 / 4 / 7 / 5;
}

.kola23 .div35 {
    grid-area: 6 / 5 / 7 / 6;
}

.kola23 .div36 {
    grid-area: 6 / 6 / 7 / 7;
}

.kola23 .div37 {
    grid-area: 6 / 7 / 7 / 8;
}

.kola23 .div38 {
    grid-area: 6 / 8 / 7 / 9;
}

.kola23 .div39 {
    grid-area: 6 / 9 / 7 / 10;
}

.kola23 .div40 {
    grid-area: 6 / 10 / 7 / 11;
}


.kola413 .div1 { grid-area: 1 / 1 / 2 / 2; }
.kola413 .div2 { grid-area: 1 / 2 / 2 / 3; }
.kola413 .div3 { grid-area: 1 / 3 / 2 / 4; }
.kola413 .div4 { grid-area: 1 / 4 / 2 / 5; }
.kola413 .div5 { grid-area: 1 / 5 / 2 / 6; }
.kola413 .div6 { grid-area: 2 / 1 / 3 / 2; }
.kola413 .div7 { grid-area: 2 / 2 / 3 / 3; }
.kola413 .div8 { grid-area: 2 / 3 / 3 / 4; }
.kola413 .div9 { grid-area: 2 / 4 / 3 / 5; }
.kola413 .div10 { grid-area: 2 / 5 / 3 / 6; }
.kola413 .div11 { grid-area: 5 / 1 / 6 / 2; }
.kola413 .div12 { grid-area: 5 / 2 / 6 / 3; }
.kola413 .div13 { grid-area: 5 / 3 / 6 / 4; }
.kola413 .div14 { grid-area: 5 / 4 / 6 / 5; }
.kola413 .div15 { grid-area: 5 / 5 / 6 / 6; }
.kola413 .div16 { grid-area: 6 / 1 / 7 / 2; }
.kola413 .div17 { grid-area: 6 / 2 / 7 / 3; }
.kola413 .div18 { grid-area: 6 / 3 / 7 / 4; }
.kola413 .div19 { grid-area: 6 / 4 / 7 / 5; }
.kola413 .div20 { grid-area: 6 / 5 / 7 / 6; }
.kola413 .div21 { grid-area: 1 / 7 / 2 / 8; }
.kola413 .div22 { grid-area: 1 / 8 / 2 / 9; }
.kola413 .div23 { grid-area: 1 / 9 / 2 / 10; }
.kola413 .div24 { grid-area: 1 / 10 / 2 / 11; }
.kola413 .div25 { grid-area: 1 / 11 / 2 / 12; }
.kola413 .div26 { grid-area: 1 / 12 / 2 / 13; }
.kola413 .div27 { grid-area: 1 / 13 / 2 / 14; }
.kola413 .div28 { grid-area: 1 / 14 / 2 / 15; }
.kola413 .div29 { grid-area: 1 / 15 / 2 / 16; }
.kola413 .div30 { grid-area: 1 / 16 / 2 / 17; }
.kola413 .div31 { grid-area: 1 / 17 / 2 / 18; }
.kola413 .div32 { grid-area: 1 / 18 / 2 / 19; }
.kola413 .div33 { grid-area: 1 / 19 / 2 / 20; }
.kola413 .div34 { grid-area: 2 / 7 / 3 / 8; }
.kola413 .div35 { grid-area: 2 / 8 / 3 / 9; }
.kola413 .div36 { grid-area: 2 / 9 / 3 / 10; }
.kola413 .div37 { grid-area: 2 / 10 / 3 / 11; }
.kola413 .div38 { grid-area: 2 / 11 / 3 / 12; }
.kola413 .div39 { grid-area: 2 / 12 / 3 / 13; }
.kola413 .div40 { grid-area: 2 / 13 / 3 / 14; }
.kola413 .div41 { grid-area: 2 / 14 / 3 / 15; }
.kola413 .div42 { grid-area: 2 / 15 / 3 / 16; }
.kola413 .div43 { grid-area: 2 / 16 / 3 / 17; }
.kola413 .div44 { grid-area: 2 / 17 / 3 / 18; }
.kola413 .div45 { grid-area: 2 / 18 / 3 / 19; }
.kola413 .div46 { grid-area: 2 / 19 / 3 / 20; }
.kola413 .div47 { grid-area: 5 / 7 / 6 / 8; }
.kola413 .div48 { grid-area: 5 / 8 / 6 / 9; }
.kola413 .div49 { grid-area: 5 / 9 / 6 / 10; }
.kola413 .div50 { grid-area: 5 / 10 / 6 / 11; }
.kola413 .div51 { grid-area: 5 / 11 / 6 / 12; }
.kola413 .div52 { grid-area: 5 / 12 / 6 / 13; }
.kola413 .div53 { grid-area: 5 / 13 / 6 / 14; }
.kola413 .div54 { grid-area: 5 / 14 / 6 / 15; }
.kola413 .div55 { grid-area: 5 / 15 / 6 / 16; }
.kola413 .div56 { grid-area: 5 / 16 / 6 / 17; }
.kola413 .div57 { grid-area: 5 / 17 / 6 / 18; }
.kola413 .div58 { grid-area: 5 / 18 / 6 / 19; }
.kola413 .div59 { grid-area: 5 / 19 / 6 / 20; }
.kola413 .div60 { grid-area: 6 / 7 / 7 / 8; }
.kola413 .div61 { grid-area: 6 / 8 / 7 / 9; }
.kola413 .div62 { grid-area: 6 / 9 / 7 / 10; }
.kola413 .div63 { grid-area: 6 / 10 / 7 / 11; }
.kola413 .div64 { grid-area: 6 / 11 / 7 / 12; }
.kola413 .div65 { grid-area: 6 / 12 / 7 / 13; }
.kola413 .div66 { grid-area: 6 / 13 / 7 / 14; }
.kola413 .div67 { grid-area: 6 / 14 / 7 / 15; }
.kola413 .div68 { grid-area: 6 / 15 / 7 / 16; }
.kola413 .div69 { grid-area: 6 / 16 / 7 / 17; }
.kola413 .div70 { grid-area: 6 / 17 / 7 / 18; }
.kola413 .div71 { grid-area: 6 / 18 / 7 / 19; }
.kola413 .div72 { grid-area: 6 / 19 / 7 / 20; }
.kola413 .div73 { grid-area: 1 / 6 / 2 / 7; }
.kola413 .div74 { grid-area: 2 / 6 / 3 / 7; }
.kola413 .div75 { grid-area: 5 / 6 / 6 / 7; }
.kola413 .div76 { grid-area: 6 / 6 / 7 / 7; }







.kola {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: 22px 22px 0px 10px 22px 22px;
    grid-column-gap: 7px;
    grid-row-gap: 10px;
    width: 100%;
    min-width: 345px;
}
.kola413 {
    display: grid;
    grid-template-columns: repeat(19, 1fr);
    grid-template-rows: 22px 22px 0px 10px 22px 22px;
    grid-column-gap: 7px;
    grid-row-gap: 10px;
    width: 100%;
    min-width: 345px;
}

.kola23 {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: 22px 22px 0px 10px 22px 22px;
    grid-column-gap: 3px;
    grid-row-gap: 10px;
    width: 100%;
}

.kola>div, .kola413>div {
    background-color: #234167;
    padding: 5px 4px;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    color: #ffffff;
    position: relative;
    text-align: center;

}

.kola>div:hover {
    opacity: 0.8;
}

.kola>div.sto:before, .kola413>div.sto:before {
    content: "";
    height: 24px;
    width: 20px;
    background: #eff3f6;
    position: absolute;
    top: 14px;
    left: -15px;
    border-radius: 8px;
    z-index: 99;
}

.kola>div.stop:before, .kola413>div.stop:before {
    content: "";
    height: 20px;
    width: 20px;
    background: #eff3f6;
    position: absolute;
    top: -14px;
    left: -15px;
    border-radius: 8px;
    z-index: 99;
}

.kola>div.sto:hover:before, .kola413>div.sto:hover:before {
    opacity: 1;
}

.kola>div.taken,
.kola>div.takenp,
.kola413>div.taken,
.kola413>div.takenp {
    background-color: #d2d2d2;
    color: #a6a6a6;
    cursor: default;
}

.kola>div.taken.free,
.kola>div.takenp.free,
.kola413>div.taken.free,
.kola413>div.takenp.free {
    background-color: #234167;
    color: #ffffff;
}

.kola>div.takenplace,
.kola>div.takenplacep,
.kola413>div.takenplace,
.kola413>div.takenplacep {
    background-color: #a10707;
    color: #ffffff;
    cursor: pointer;
}

.kola .mystyle {
    background-color: green;
}

.voz-kola,
.vozp-kola {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 2rem;

}

h3 {
    margin: 0;
    margin-bottom: 10px;
    font-size: 12px;


}

.ceo-voz {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
}

.ceo-voz .kola-voz,
.ceo-voz .kolap-voz {
    background-color: #234167;
    color: #ffffff;
    padding: 5px 15px;
    cursor: pointer;

}

#kola {
    display: flex;
    gap: 40px;
}

.ceo-voz .kola-voz.selected,
.ceo-voz .kolap-voz.selected {
    background-color: #e2e8ec;
    color: #234167;
    font-weight: 500;
}

.voz-kola,
.voz-kola.vis,
.vozp-kola,
.vozp-kola.vis {
    display: flex;
    padding: 14px 14px 20px;
    font-size: 12px;
    /* width: fit-content; */
    background: #e2e8ec;
    flex-wrap: wrap;
}

.voz-kola.nonvis,
.vozp-kola.nonvis {
    display: none;
}

.voz-kola>div,
.vozp-kola>div {
    flex: 1;
}

.vagon {
    width: 100%;
    padding: 10px;
    background: #eff3f6;
    position: relative;
}

.prvi-razred {
    position: absolute;
    font-size: 30px;
    opacity: 0.1;
    top: 75px;
    font-weight: 900;
    letter-spacing: -2px;
    color: #336699;
    text-align: center;
    width: 100%;
}

.drugi-razred {
    position: absolute;
    font-size: 30px;
    opacity: 0.1;
    top: 62px;
    font-weight: 900;
    letter-spacing: -2px;
    color: #363737;
    width: 100%;
}

@media (max-width:500px) {

    .voz-kola,
    .voz-kola.vis,
    .vozp-kola,
    .vozp-kola.vis {
        padding: 14px 10px 10px;
    }

    .kola>div {
        padding: 4px 6px;
    }

    .kola {
        grid-column-gap: 5px;
        grid-row-gap: 8px;
        min-width: 300px;
        width: 100%;
    }

    .ceo-voz {
        gap: 1px;
    }

    .ceo-voz .kola-voz,
    .ceo-voz .kolap-voz {
        padding: 5px 13px;
    }

    div.sto:before {
        content: "";
        height: 21px;
        width: 17px;
        background: #eff3f6;
        position: absolute;
        top: 14px;
        left: -11px;
        border-radius: 8px;
        z-index: 99;
    }

    .drugi-razred,
    .prvi-razred {
        top: 56px;
    }
}

@media (max-width:400px) {

    .kola>div {
        padding: 4px 3px;
        font-size: 12px;
    }

    .kola {
        grid-column-gap: 5px;
        grid-row-gap: 8px;
        min-width: 200px;
        width: 100%;
        grid-template-rows: 20px 20px 0px 10px 20px 20px;
    }

    .kola23 {
        grid-column-gap: 5px;
        grid-row-gap: 8px;
        min-width: 200px;
        grid-template-columns: repeat(10, 1fr);
        grid-template-rows: 20px 20px 0px 10px 20px 20px;

        width: 100%;
    }

    .kola>div.sto:before {
        content: "";
        height: 20px;
        width: 17px;
        background: #eff3f6;
        position: absolute;
        top: 13px;
        left: -11px;
        border-radius: 8px;
        z-index: 99;
    }


}

.mesta h4 {
    font-size: 22px;
}

/* ostali stilovi*/

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #0e4e82;
    --bs-btn-border-color: #0e4e82;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0e4e82;
    --bs-btn-hover-border-color: #0e4e82;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0e4e82;
    --bs-btn-active-border-color: #0e4e82;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #0e4e82;
    --bs-btn-disabled-border-color: #0e4e82;
}

a {
    color: #0e4e82;
    text-decoration: underline;
}

.input-group>div {
    width: calc(100% - 67px);
}

[uib-typeahead-popup].dropdown-menu {
    display: block;
    width: 100%;
    border-radius: 0;
    max-height: 250px;
    overflow-y: scroll;

}

li.uib-typeahead-match a {
    padding: 5px 10px;
    text-decoration: none;
    color: #333333;
    width: 100%;
    display: block;
}

li.uib-typeahead-match a:hover {
    background-color: #ebebee;
}

.uib-weeks .btn.disabled,
.uib-weeks .btn:disabled,
.uib-weeks fieldset:disabled .btn {
    border-color: transparent;
}

.uib-weeks [type=button]:not(:disabled),
.uib-weeks button:not(:disabled) {
    border-color: #A09E9E;
}

.uib-weeks [type=button]:not(:disabled):hover,
.uib-weeks button:not(:disabled):hover {
    background-color: #cccccc;
}

.uib-weeks .btn.active {
    background-color: #0B4B7C;
    color: #ffffff;
}

.uib-datepicker-popup li:focus-visible {
    outline-width: 0;
}

.uib-datepicker-popup.dropdown-menu {
    padding: 10px;
}

.slobodno-mesto-info {
    background: #cae8fa;
    border-radius: 0;
    padding: 5px 15px;
    color: #00568a;
}

.table>:not(caption)>*>* {
    vertical-align: middle;
    height: 65px;
}

.napomena {
    font-size: 80%;
    color: #cc1111;
    line-height: 1.1;
    margin-top: 1rem;
}

.sakrij {
    display: none;
}

.putnik-broj {
    font-size: 64px;
    color: #ebebee;
}

.cena {
    font-size: 20px;
    font-weight: 700;
}

.putnik {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.putnik-1,
.putnik-3,
.putnik-5 {
    background-color: #f8f8f8
}

.label-warning {
    background: #f8e5e4;
    padding: 3px 11px;
    font-size: 75%;
}

.btn.btn-sv.btn-danger.rounded-0:disabled,
.btn.btn-sv.btn-danger.rounded-0[disabled] {
    background-color: silver;
    border: 1px solid silver;
}

.kupovina h4 {
    font-size: 20px;
}

.userProfile .kaoslika {
    max-width: 64px;
    margin-top: 0px;
    margin-bottom: 15px;
    backface-visibility: hidden;
    vertical-align: top;
    border-radius: 50px;
    background: #dddddd;
    text-align: center;
    padding: 0;
    font-size: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    line-height: 1;
    width: 64px;
    height: 64px;
}

.userProfile .figcaption {
    font-size: 22px;
}

/* Main Ticket Style */
.ticketContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
}

.ticket {
    /* animation: bouncingCard 0.6s ease-out infinite alternate; */
    background-color: white;
    color: darkslategray;
    border-radius: 12px;
}

.ticketShadow {
    /* animation: bouncingShadow 0.6s ease-out infinite alternate; */
    margin-top: 4px;
    width: 95%;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.4);
    filter: blur(12px);
}

/* Ticket Content */
.ticketTitle {
    font-size: 1.3rem;
    font-weight: 700;
    padding: 12px 16px 4px;
    line-height: 1.2;
}

.ticketTitle small {
    font-size: 1.1rem;
    opacity: 0.8;
}

hr {
    width: 90%;
    border: 1px solid #efefef;
}

.ticketDetail {
    font-size: 1.1rem;
    font-weight: 500;
    padding: 4px 26px;
}

.ticketSubDetail {
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
    padding: 12px 16px;
}

.ticketSubDetail .code {
    margin-right: 24px;
}

/* Ticket Ripper */
.ticketRip {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.circleLeft {
    width: 12px;
    height: 24px;
    background-color: #dc3545;
    border-radius: 0 12px 12px 0;
}

.ripLine {
    width: 100%;
    border-top: 3px solid #dc3545;
    border-top-style: dashed;
}

.circleRight {
    width: 12px;
    height: 24px;
    background-color: #dc3545;
    border-radius: 12px 0 0 12px;
}

.wrapper {
    text-transform: uppercase;
    background: #ececec;
    color: #555;
    cursor: help;
    font-family: "Gill Sans", Impact, sans-serif;
    font-size: 20px;
    position: relative;
    text-align: center;
    -webkit-transform: translateZ(0);
    /* webkit flicker fix */
    -webkit-font-smoothing: antialiased;
    /* webkit text rendering fix */
}

.wrapper .tooltip {
    background: #1496bb;
    bottom: 100%;
    color: #fff;
    display: block;
    left: -20px;
    margin-bottom: 15px;
    opacity: 0;
    padding: 20px;
    pointer-events: none;
    position: absolute;
    width: 100%;
    -webkit-transform: translateY(10px);
    -moz-transform: translateY(10px);
    -ms-transform: translateY(10px);
    -o-transform: translateY(10px);
    transform: translateY(10px);
    -webkit-transition: all .25s ease-out;
    -moz-transition: all .25s ease-out;
    -ms-transition: all .25s ease-out;
    -o-transition: all .25s ease-out;
    transition: all .25s ease-out;
    -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
    -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
    -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
    -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}

/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.wrapper .tooltip:before {
    bottom: -20px;
    content: " ";
    display: block;
    height: 20px;
    left: 0;
    position: absolute;
    width: 100%;
}

/* CSS Triangles - see Trevor's post */
.wrapper .tooltip:after {
    border-left: solid transparent 10px;
    border-right: solid transparent 10px;
    border-top: solid #1496bb 10px;
    bottom: -10px;
    content: " ";
    height: 0;
    left: 50%;
    margin-left: -13px;
    position: absolute;
    width: 0;
}

.wrapper:hover .tooltip {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
}

/* IE can just show/hide with no transition */
.lte8 .wrapper .tooltip {
    display: none;
}

.lte8 .wrapper:hover .tooltip {
    display: block;
}

.message-nema-vozova {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    border: 1px solid #ffd0d4;
    background-color: #fff3f4;
    padding: 16px 24px;
    border-radius: 1px;
    max-width: 700px;
    margin: 0 auto;
}

.message-nema-vozova svg {
    width: 36px;
    stroke: #dc3545;

}

.lista-stanica-red {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
    width: 250px;

}

.zameni-stanice-red {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
}

.zameni-stanice {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
    color: #ffffff;
    background-color: #dc3545;
    padding: 4px 8px;
    font-size: 12px;
}

div.btn-danger[disabled] {
    background-color: #e9ecef;
    color: #b0b2b5;
    border: 1px solid #dedede;
}

.navbar {
    padding: 0;
}

.nav-link {
    font-size: 18px;
    font-weight: 600;
    position: relative;
    padding: 24px;
}

.nav-item {
    position: relative;
}

.nav-item:after {
    content: "";
    display: block;
    width: 0;
    height: 2px;
    background: #dc3545;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: all 0.3s ease-in;

}

.nav-item:hover:after {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background: #dc3545;
    position: absolute;
    bottom: 0;
    left: 0;

}

.nav-item a,
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
    color: #0e4e82;
}

.nav-item a:hover,
.navbar-nav .nav-link.active:hover,
.navbar-nav .nav-link.show:hover {
    color: #dc3545;
}

.proverena-legitimacija {
    padding: 20px;
    background: #f3fcf3;
    border: 1px solid #89cc89;
    font-size: 22px;
    font-weight: 600;
}

.izabrana-mesta-col {
    border: 1px solid #dfecf8;
    padding: 10px 20px;
    background: #f0f8ff;
    display: flex;
    justify-content: flex-start;
    gap: 50px;
    flex-wrap: wrap;
}

.izabrana-mesta-col .izabranoMesto:nth-child(2) {
    border-left: 1px solid #dfecf8;
    padding-left: 25px;
}

.izabranoMesto h3 {
    font-size: 16px;
    margin-bottom: 26px;
}

.promena-mesta-col {
    display: flex;
    flex-direction: column;
    gap: 42px;
}

.legitimacija-validna {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border: 1px solid #d0eed3;
    background-color: #f0f8ee;
    padding: 4px;
    border-radius: 1px;
    max-width: 700px;
    margin: 0 auto;
}

.legitimacija-validna svg {
    width: 20px;
    stroke: #056d0a;

}

.legitimacija-nije-validna {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border: 1px solid #ffd0d4;
    background-color: #fff3f4;
    padding: 4px;
    border-radius: 1px;
    max-width: 700px;
    margin: 0 auto;
}

.legitimacija-nije-validna svg {
    width: 20px;
    stroke: #dc3545;

}
.leg-row{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px;
}
.leg-row div:first-child{
    width: 120px;;
}
.pagination {
    display: flex;
    gap: 10px;
    padding: 10px 0;;
}

.pagination span {
    cursor: pointer;
    padding: 5px 10px;
    border: 1px solid #ccc;
    aspect-ratio: 1/1;
}

.pagination .active {
    background-color: #093a6e;
    color: white;
}