@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Display:wght@400;700&display=swap');

/* --- RTS-LOGO ALKAA --- */

/* Oletuksena piilota RTS-logo */
.logo-rts {
    display: none;
}

body.RTS .logo-rts {
    display: block !important;
    margin: 0 auto;
    height: auto;
    padding-left: 20px;
    /* padding: 50px;*/
    padding: 20px 60px 20px 20px
}

/* Piilota normaalilogo RTS-tilassa */
body.RTS .navbar-brand img:not(.logo-rts) {
    display: none;
}

/* Logon koko navigaatiopalkissa */

.navbar-brand { /* Normaali rakennustieto logo */
    display: flex !important; /* Käyttää Flexboxia */
    /*justify-content: center !important;*/ /* Keskittää vaakasuunnassa */
    align-items: center !important; /* Keskittää pystysuunnassa */
    height: 100%; /* Täyttää navigaatiopalkin korkeuden */
}

/* Responsiivisuus: Pienennä logo pienemmillä näytöillä alle 991px */
@media (max-width: 991px) {

    .navbar-brand img { /* Normaali rakennustieto logo */
        max-width: 150px; /* Pienempi maksimi leveys pienemmillä näytöillä */
        max-height: 30px; /* Pienempi maksimi korkeus pienemmillä näytöillä */
    }

    body.RTS .navbar-brand img { /* RTS tilan rakennustieto logo */
        max-width: 150px;
        padding: 0px;
    }
}

@media (max-width: 576px) { /* Normaali rakennustieto logo */
    .navbar-brand img {
        max-width: 120px; /* Maksimi leveys erittäin pienillä näytöillä */
        max-height: 25px; /* Maksimi korkeus erittäin pienillä näytöillä */
    }
}

/* --- RTS-LOGO LOPPUU --- */

/* --- NAVBAR CUSTOM TYYLIT DESKTOPISSA ALKAA --- */

.navbar-custom {
    width: 100%; /* Varmistaa täyden leveyden */
    position: fixed; /* Kiinnittää navbarin sivun yläreunaan */
    top: 0; /* Asettaa navbarin yläreunaan */
    left: 0; /* Asettaa navbarin vasempaan reunaan */
    z-index: 1050 !important; /* Varmistaa, että navbar on muiden elementtien päällä */
    height: 63px !important; /* Määrittää navbarin korkeuden */
    background-color: #004a87; /* Taustaväri */
    padding-right: 33px !important; /* Lisää tilaa oikealle */
    /*padding-left: 20px;*/ /* Lisää tilaa vasemmalle */
    font-family: 'Noto Sans Display', sans-serif; /* Lisää fontti navbarille */
}

.container-fluid {
    padding-right: 0 !important;
}

/* Määritä linkkien värit */
.navbar-custom .navbar-brand,
.navbar-custom .nav-link,
.navbar-custom .user-info {
    color: white !important; /* Navbarin linkkien ja logon tekstiväri */
}

.navbar-nav {
    gap: 22px;
}

.navbar-custom a.nav-link:hover {
    color: #ffffff; /* Valkoinen teksti hoverissa */
    background-color: #0077d9; /* Tumma sininen tausta hoverissa */
    text-decoration: none; /* Poistaa alleviivauksen */
    transition: background-color 0.3s ease, color 0.3s ease; /* Lisää pehmeän siirtymän */
}

/* Säädä ikonien kokoa tarpeen mukaan */
.navbar-nav i {
    font-size: 13px; /* Ikonin koko */
}

.navbar-expand .navbar-nav .nav-link {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Lisää hover-efekti linkille */
.nav-item.not-logged-in .nav-link:hover {
    background-color: #007bff; /* Vaihda haluamaksesi taustaväriksi */
    color: #fff; /* Tekstin väri hover-tilassa */
    text-decoration: none; /* Poistaa alleviivauksen */
}

/* Piilota hamburger-painike */
.navbar-toggler {
    display: none !important;
}

.navbar-toggler-icon {
    background-image: none !important;
}

.navbar-toggler:focus,
.navbar-toggler:hover {
    box-shadow: none !important;
    border-color: white !important;
}

/* --- NAVBAR CUSTOM TYYLIT DESKTOPISSA LOPPUU --- */

/* --- NAVBAR CUSTOM TYYLIT MOBIILI ALKAA --- */

/* Headerin ikoneiden ja tekstien käyttäytyminen mobiilissa ja desktopissa */

/* Näytetään tekstisisältö navbarissa kun ruutukoko on yli 991px */
@media (min-width: 991px) {
    .navbar-nav .nav-link span {
        display: inline !important; /* Näytä tekstisisältö linkeistä */
        font-size: 14px !important;
        /*letter-spacing: -.14px;*/
        margin-left: 6px !important;
        margin-right: 4px;
    }

    #user-name {
        display: inline !important; /* Näytä käyttäjän nimi */
        font-size: 14px;
        /*letter-spacing: -.14px;*/
    }

}

/* ASETUKSET RUUTUKOILLE JOTKA OVAT ALLE 991px */

@media (max-width: 991px) {

    /* Piilota tekstisisältö linkeistä */
    .navbar-nav .nav-link span {
        display: none !important; /* Piilota tekstit */
    }

    /* Piilota käyttäjän nimi */
    #user-name {
        display: none !important; /* Piilota käyttäjän nimi mobiilissa */
    }

    /* Ikonien koko navbarissa */
    /*.navbar-nav .nav-link i {
        font-size: 1.2rem;*/ /* Säädä tästä ikonien kokoa */
    /*}*/

    /* Tyhjätila ikonien välissä */
    .navbar-nav {
        gap: 22px;
    }

    .navbar-custom {
        height: 63px !important; /* Määrittää navbarin korkeuden */
    }

}

/* --- NAVBAR CUSTOM TYYLIT MOBIILI LOPPUU --- */

/* --- KÄYTTÄJÄN PUDOTUSVALIKKO DESKTOPISSA ALKAA --- */

/*.user-dropdown {
    background-color: #004a87 !important;*/ /* Taustaväri valikolle */
    /*border: none !important;*/ /* Poistaa reunat / Ei reunoja */
    /*border-radius: 0 !important;*/ /* Pyöristäminen / Poistaa pyöristyksen */
    /*top: 49px !important;*/ /* Pudotusvalikon sijainti ylös/alas */
    /*right: -25px !important;*/
    /*box-shadow: -15px 15px 17px -7px rgba(0, 0, 0, 0.50);*/ /* Varjostus */
    /*animation: userdropdownanim 200ms ease-in 0s 1 normal forwards;*/ /* Animaatio pudotusvalikolle */
    /*z-index: 5 !important;
    padding: 0;
}*/

#userDropdown {
    text-decoration: none;
}

@keyframes userdropdownanim {
    0% {
        opacity: 0;
        transform: translateY(-50px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.user-dropdown li {
    padding: 0 !important;
}

/*.dropdown-toggle::after {
    font-size: 18px;
    display: inline-block;
    margin-left: .255em;
    position: relative;*/ /* Mahdollistaa nuolen siirtämisen */
    /*top: 2px;*/ /* Siirtää nuolta alaspäin */
    /*left: 5px;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
}*/

/* DROPDOWN LAATIKOIDEN MÄÄRITTELYT ALKAA */

.user-dropdown .dropdown-item {
    color: white !important; /* Valkoinen teksti */
    font-size: 14px !important; /* Tekstin koko */
    padding: 8px 15px !important; /* Lisää tilaa sisältöön */
    background-color: transparent !important; /* Ei taustaväriä */
    text-decoration: none; /* Poistaa oletusalleviivauksen */
    transition: text-decoration 0.3s ease; /* Hienovarainen siirtymä alleviivaukselle */
}

/* Dropdown-item hover-tilassa */
.user-dropdown .dropdown-item:hover {
    background-color: transparent !important; /* Ei taustaväriä hover-tilassa */
    color: white !important; /* Teksti pysyy valkoisena */
    text-decoration: underline !important; /* Alleviivaa tekstin hover-tilassa */
}

/* Linkkien väri ja tyyli (a-tagit) */
.user-dropdown .dropdown-item a {
    color: white !important; /* Valkoinen linkkiteksti */
    text-decoration: none; /* Poistaa oletusalleviivauksen */
}

/* Linkkien hover-tila */
.user-dropdown .dropdown-item a:hover {
    color: white !important; /* Teksti pysyy valkoisena */
    text-decoration: underline !important; /* Alleviivaa linkin tekstin hover-tilassa */
    background-color: transparent !important; /* Ei taustaväriä hover-tilassa */
}

.user-dropdown .dropdown-divider {
    border-color: white !important; /* Jakoviivan väri */
    margin: 0 !important; /* Poistaa ylimääräiset marginaalit */
}

/* Kirjaudu ulos -painikkeen tyyli */
.logout-button {
    background-color: transparent !important; /* Läpinäkyvä tausta */
    border: none !important;
    text-align: center !important; /* Keskittää tekstin */
    display: block !important; /* Varmistaa, että nappi vie koko leveyden */
    width: 100% !important; /* Täyttää dropdownin leveyden */
    padding: 8px !important; /* Lisää tilaa napin sisälle */
    color: white !important; /* Valkoinen teksti */
    font-size: 14px !important; /* Tekstin koko */
    text-decoration: none !important; /* Poistaa oletusalleviivauksen */
}
    /* Kirjaudu ulos -painikkeen hover-tila */
    .logout-button:hover {
        background-color: transparent !important; /* Ei taustaväriä hover-tilassa */
        color: white !important; /* Teksti pysyy valkoisena */
        text-decoration: underline !important; /* Alleviivaa tekstin hover-tilassa */
    }

/* --- KÄYTTÄJÄN PUDOTUSVALIKKO DESKTOPISSA LOPPUU --- */

.services-dropdown, .user-dropdown {
    top: 49px !important;
    background-color: #004a87 !important; /* Taustaväri */
    border: none !important; /* Poistaa reunat */
    border-radius: 0 !important; /* Poistaa pyöristyksen */
    margin: 0 !important; /* Poistaa ylimääräiset marginit */
    padding: 0 !important; /* Poistaa paddingit */
    box-shadow: -15px 15px 17px -7px rgba(0, 0, 0, 0.50); /* Varjostus */
    animation: servicesdropdownanim 200ms ease-in 0s 1 normal forwards;
    z-index: 5 !important;
}

/* --- PALVELUT PUDOTUSVALIKKO DESKTOPISSA ALKAA --- */

/*.services-dropdown {
    background-color: #004a87 !important;*/ /* Taustaväri */
    /*border: none !important;*/ /* Poistaa reunat */
    /*border-radius: 0 !important;*/ /* Poistaa pyöristyksen */
    /*margin: 0 !important;*/ /* Poistaa ylimääräiset marginit */
    /*padding: 0 !important;*/ /* Poistaa paddingit */
    /*box-shadow: -15px 15px 17px -7px rgba(0, 0, 0, 0.50);*/ /* Varjostus */
    /*animation: servicesdropdownanim 200ms ease-in 0s 1 normal forwards;
    z-index: 5 !important;

}*/

@keyframes servicesdropdownanim {
    0% {
        opacity: 0;
        transform: translateY(-50px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* DROPDOWN LAATIKOIDEN MÄÄRITTELYT ALKAA */

.services-dropdown .dropdown-item {
    color: white !important; /* Valkoinen teksti */
    font-size: 14px !important; /* Tekstin koko */
    padding: 8px 15px !important; /* Lisää tilaa sisältöön */
    background-color: #004a87 !important; /* Varmistaa sinisen taustan */
    transition: background-color 0.3s, text-decoration 0.3s; /* Pehmeät siirtymät */
}
/*.services-dropdown .dropdown-item a {
	color: white;*/ /* Valkoinen teksti */
/*text-decoration: none;
}*/

/* Lihavoitu teksti dropdownin #text-elementille */
.services-dropdown li.dropdown-item[href="#"] {
    font-weight: bold; /* Lihavoitu teksti */
    color: white; /* Valkoinen väri */
    font-size: 16px; /* Isompi tekstikoko */
    background-color: #004a87; /* Sama taustaväri kuin dropdown */
    padding: 10px 15px; /* Tilaa ympärille */
    text-align: left; /* Aseta teksti vasemmalle */
    border-bottom: 1px solid #ffffff33; /* Viiva tekstin alle */
}

/*.services-dropdown .dropdown-item:hover {
	background-color: #003766 !important;*/ /* Hover-tila */
/*color: white;
}*/

/* Hover-tila dropdown-itemille */
.services-dropdown .dropdown-item:hover,
.services-dropdown .dropdown-item:focus {
    background-color: #004a87 !important; /* Pidä tausta sinisenä */
    /* Poistettu text-decoration: underline; */
}

/* Muuta luettelomerkit taustavärin värisiksi */
.services-dropdown ul {
    list-style-type: disc; /* Varmista, että luettelomerkit säilyvät */
    /*list-style-position: inside;*/ /* Luettelomerkit pysyvät tekstin tasalla */
    color: #004a87; /* Muuta merkkien väri taustavärin väriseksi */
    padding-left: 15px; /* Varmista, että teksti pysyy samassa kohdassa */
}

/* Linkkien tyylit */
.services-dropdown .dropdown-item a {
    color: white !important; /* Valkoinen teksti linkeille */
    text-decoration: none !important; /* Poista oletus alleviivaus */
    display: block; /* Varmistaa, että koko alue on klikattava */
    font-weight: normal;
}

/* Hover-tila linkeille */
.services-dropdown .dropdown-item a:hover {
    text-decoration: underline !important; /* Alleviivaa linkin teksti */
    color: white !important; /* Varmista, että linkin väri pysyy valkoisena */
}

.services-dropdown .dropdown-divider {
    border-color: white !important; /* Jakoviivan väri */
    margin: 0 !important; /* Poistaa ylimääräiset marginaalit */
}

/* DROPDOWN LAATIKOIDEN MÄÄRITTELYT LOPPUU */

/* PUDOTUSLATIKOIDEN VARJOSTUKSET MOBIILISSA ALKAA */

/* Poista box-shadow mobiilissa */
@media (max-width: 991px) {
    .user-dropdown,
    .services-dropdown {
        box-shadow: none !important; /* Poistaa varjostuksen mobiilissa */
    }
}

/* PUDOTUSLATIKOIDEN VARJOSTUKSET MOBIILISSA LOPPUU */

/* --- NAVBAR CUSTOM TYYLIT MOBIILI ALKAA --- */

/* Navbarin säädöt mobiilissa ja pienillä ruuduilla jotka alle (≤ 991px) */

@media (max-width: 991px) {
    /* Navbarin tyyli mobiilissa */
    .navbar-custom {
        background-color: #004a87 !important; /* Tumma sininen tausta */
        width: 100% !important; /* Täysi leveys */
        box-shadow: none; /* Poista varjo mobiilissa */
        height: 63px !important; /* Määrittää navbarin korkeuden */
    }

    /* Säädä artikkelin marginaali navbarin alapuolelle */

    #article {
        margin-top: 63px; /* Lisää marginaali navbarin tilan huomioimiseksi */
    }

    .navbar-nav .nav-link span {
        display: inline !important;
        font-size: 14px !important;
        letter-spacing: -.14px;
        margin-left: 6px !important;
    }
}

/* Navbarin säädöt mobiilissa ja pienillä ruuduilla jotka alle (≤ 991px) */
@media (max-width: 576px) {

    .navbar-nav .nav-link span {
        display: inline !important;
        font-size: 14px !important;
        letter-spacing: -.14px;
        margin-left: 2px !important;
    }

    .navbar-nav {
        gap: 12px;
    }

    .navbar-custom {
        padding-right: 0 !important;
    }

}

@media (max-width: 817px) {
    .navbar-nav .nav-link span {
        display: none !important; /* Näytetään tekstisisältö linkeistä */
    }

    #user-name {
        display: none !important; /* Näytetään käyttäjän nimi */
    }
}

        /* Palvelut dropdown mobiilissa */
        /*.services-dropdown {
        background-color: #004a87 !important;*/ /* Tumma sininen tausta */
        /*top: 104px !important;*/ /* Aseta dropdown navbarien alapuolelle */
        /*}*/
        /* --- Käyttäjä Dropdown mobiilissa --- */
        /*.user-dropdown {
        background-color: #004a87 !important;*/ /* Tumma sininen tausta */
        /*top: 104px !important;*/ /* Aseta dropdown navbarien alapuolelle */
        /*}*/
    }

/* Näytä tekstisisältö ikoneissa kun ruutukoko on 991px tai suurempi */

@media (min-width: 965px) {
    .navbar-nav .nav-link span {
        display: inline !important; /* Näytetään tekstisisältö linkeistä */
    }

    #user-name {
        display: inline !important; /* Näytetään käyttäjän nimi */
    }
}

/* --- Kirjaudu Ulos -Painike --- */
.logout-button {
    background-color: #004a87 !important; /* Sininen tausta */
    border: none !important;
    text-align: center !important; /* Keskittää tekstin */
    display: block !important; /* Varmistaa, että nappi vie koko leveyden */
    width: 100% !important; /* Täyttää dropdownin leveyden */
    padding: 8px !important; /* Lisää tilaa napin sisälle */
}

.logout-button:hover {
    background-color: #ddd !important; /* Hover-väri */
    color: #003766 !important; /* Tekstin hover-väri */
}

/* --- Logon Koko Navigaatiopalkissa --- */

.navbar-brand img {
    height: auto; /* Anna korkeus määräytyä leveydestä */
    width: 92%; /* Skaalaa leveys suhteessa vanhempaan elementtiin */
    max-width: 247px; /* Maksimileveys suuremmille näytöille
    /*max-height: 40px;*/ /* Maksimikorkeus suuremmille näytöille */
    object-fit: contain; /* Varmistaa, että kuva ei leikkaudu tai veny */
    transition: max-width 0.3s ease, max-height 0.3s ease; /* Pehmeä siirtymä */
    padding-left: 8px;
}

/* RTS TILA ALKAA (VALKOINEN) */

/* User-dropdown RTS alkaa */

/* Dropdownin yleinen tyyli */
body.RTS .user-dropdown {
    background-color: white !important; /* Valkoinen tausta oletuksena */
    border: none; /* Poistetaan mahdolliset reunaviivat */
    box-shadow: 15px 15px 15px 2px rgba(0, 0, 0, 0.10);
}

/* Dropdownin kohteet ilman hoveria */
body.RTS .user-dropdown .dropdown-item {
    background-color: white; /* Valkoinen tausta */
    color: black !important; /* Musta teksti */
    text-decoration: none; /* Poistetaan alleviivaus */
    transition: background-color 0.3s ease, color 0.3s ease; /* Pehmeät siirtymät */
}

/* Dropdownin hover-tila */
body.RTS .user-dropdown .dropdown-item:hover {
    background-color: white !important; /* Valkoinen tausta hoverissa */
    color: black !important; /* Musta teksti hoverissa */
    text-decoration: underline;
}

/* Linkkien tyyli dropdownin sisällä */
body.RTS .user-dropdown .dropdown-item a {
    display: block; /* Tee linkistä blokki, jotta koko alue saa hoverin */
    background-color: white; /* Valkoinen tausta oletuksena */
    color: black !important; /* Mustat linkit oletuksena */
    text-decoration: none; /* Poistetaan alleviivaus */
    transition: background-color 0.3s ease, color 0.3s ease; /* Pehmeä siirtymä */
}

/* Linkkien hover-tila */
body.RTS .user-dropdown .dropdown-item:hover a {
    background-color: white !important; /* Valkoinen tausta hoverissa */
    color: black !important; /* Mustat linkit hoverissa */
    text-decoration: none; /* Ei alleviivausta hoverissa */
}

/* Alilistojen linkit ilman hoveria */
body.RTS .user-dropdown .dropdown-item ul a {
    display: block; /* Tee linkistä blokki, jotta koko alue saa hoverin */
    color: black !important; /* Mustat linkit oletuksena */
    background-color: white; /* Valkoinen tausta oletuksena */
    text-decoration: none; /* Poistetaan alleviivaus */
}

/* Alilistojen hover-tila */
body.RTS .user-dropdown .dropdown-item ul li:hover {
    background-color: white; /* Valkoinen tausta hoverissa */
}

body.RTS .user-dropdown .dropdown-item ul li:hover a {
    color: black; /* Musta teksti hoverissa */
    text-decoration: underline; /* Alleviivaus hoverissa */
}

/* Logout-painike */
body.RTS .logout-button {
    background-color: white !important; /* Valkoinen tausta logout-painikkeelle */
    color: black !important; /* Musta teksti */
    text-decoration: none; /* Poistetaan alleviivaus */
    transition: background-color 0.3s ease, color 0.3s ease; /* Pehmeä siirtymä */
}

body.RTS .logout-button:hover {
    background-color: white; /* Valkoinen tausta hoverissa */
    color: black; /* Musta teksti hoverissa */
    text-decoration: underline; /* Alleviivaus hoverissa */
}

body.RTS .navbar-custom .nav-link:hover {
    color: white !important;
    background-color: #0077d9 !important;
}

/* User-dropdown RTS loppuu */

/* Yleinen tausta (patharea-wrapper) */
.patharea-wrapper {
    background: #ffffff; /* Vaaleanharmaa tausta */
}

/* Dropdownin yleinen tyyli RTS-tilassa */
body.RTS .services-dropdown {
    background-color: white !important; /* Varmistetaan valkoinen tausta */
    border: none; /* Poistetaan reunaviivat */
    box-shadow: 15px 15px 15px 2px rgba(0, 0, 0, 0.10);
    padding: 10px; /* Lisää sisäistä tyhjää tilaa */
}

/* Dropdownin kohteet ilman hoveria */
body.RTS .services-dropdown .dropdown-item {
    background-color: white !important; /* Valkoinen tausta */
    color: black !important; /* Musta teksti */
    text-decoration: none; /* Poistetaan alleviivaus */
    transition: background-color 0.3s ease, color 0.3s ease; /* Pehmeät siirtymät */
}

/* Otsikoiden tyyli (ilman linkkiä) */
body.RTS .services-dropdown .dropdown-item:not(:has(a)) {
    font-weight: bold; /* Lihavoitu teksti otsikoille */
    color: black !important; /* Musta teksti */
    background-color: white !important; /* Valkoinen tausta */
    text-decoration: none !important; /* Ei alleviivausta */
    cursor: default; /* Ei linkkimäistä osoitinta */
}

/* Poista hover-efektit otsikoilta */
body.RTS .services-dropdown .dropdown-item:not(:has(a)):hover {
    background-color: white !important; /* Valkoinen tausta hoverissa */
    color: black !important; /* Musta teksti hoverissa */
    text-decoration: none !important; /* Ei alleviivausta hoverissa */
}

/* Linkkien tyyli ilman hoveria */
body.RTS .services-dropdown .dropdown-item a {
    display: block; /* Tee linkistä blokki */
    color: black !important; /* Mustat linkit oletuksena */
    background-color: white; /* Valkoinen tausta oletuksena */
    text-decoration: none; /* Ei alleviivausta */
    transition: color 0.3s ease, background-color 0.3s ease; /* Pehmeät siirtymät */
}

/* Linkkien hover-tila */
body.RTS .services-dropdown .dropdown-item a:hover {
    background-color: white !important; /* Valkoinen tausta hoverissa */
    color: black !important; /* Mustat linkit hoverissa */
    text-decoration: underline !important; /* Alleviivaus vain linkeille */
}

/* Alilistojen linkit ilman hoveria */
body.RTS .services-dropdown .dropdown-item ul a {
    display: block; /* Tee linkistä blokki */
    color: black !important; /* Mustat linkit oletuksena */
    background-color: white !important; /* Valkoinen tausta oletuksena */
    text-decoration: none !important; /* Ei alleviivausta */
}

/* Alilistojen hover-tila */
body.RTS .services-dropdown .dropdown-item ul li:hover {
    background-color: white !important; /* Valkoinen tausta hoverissa */
}

body.RTS .services-dropdown .dropdown-item ul li:hover a {
    color: black !important; /* Musta teksti hoverissa */
    text-decoration: underline !important; /* Alleviivaus vain linkeille */
}

/* Alilistojen kohteet (li-elementit) */
body.RTS .services-dropdown .dropdown-item ul li {
    position: relative; /* Tarvitaan pseudo-elementtiä varten */
    list-style: none; /* Poistetaan oletuksena listamerkki */
    padding-left: 20px; /* Tilaa pseudo-elementille */
}

/* Listamerkit ilman hoveria */
body.RTS .services-dropdown .dropdown-item ul li::before {
    content: ''; /* Luo listamerkin */
    position: absolute;
    left: 0; /* Aseta listamerkki vasemmalle */
    top: 50%; /* Keskittää pystysuunnassa */
    transform: translateY(-50%);
    width: 10px; /* Listamerkin koko */
    height: 10px; /* Listamerkin koko */
    background-color: black; /* Musta listamerkki */
    border-radius: 50%; /* Pyöristetty merkki */
    transition: background-color 0.3s ease, border 0.3s ease; /* Pehmeä siirtymä hoveriin */
}

/* Listamerkit hover-tilassa */
body.RTS .services-dropdown .dropdown-item ul li:hover::before {
    background-color: black; /* Merkki pysyy mustana */
    border: none; /* Ei reunusta */
}

/* --- RTS-luokan mukaiset tyylit --- */

/* Muuta tekstin väri, kun body sisältää RTS-luokan */
body.RTS .text-white {
    color: #000000 !important; /* Esimerkki: kultainen väri */
}

    body.RTS .text-white:hover {
        color: #003766 !important;
    }

/* Muuta navbarin taustaväri RTS-tilassa */
body.RTS .navbar-custom {
    background-color: #ffffff !important; /* Tummempi sininen */
}

/* Muuta vertikaalisen palkin taustaväri RTS-tilassa */
body.RTS .vertical-sidebar {
    background-color: #ffffff !important; /* Tummempi sininen */
}

/* Muuta vaakasuoran palkin taustaväri RTS-tilassa */
body.RTS .horizontal-sidebar {
    background-color: white !important; /* Tummempi sininen */
}

/*::-webkit-scrollbar {
    width: 16px;    
}*/

/* RTS TILA LOPPUU (VALKOINEN) */

/* Logged-in ja not-logged-in säännöt body*/
/* Kirjautunut käyttäjä + kirjautumattoman elementti. TAI Kirjautumaton käyttäjä + kirjautuneen elementti. */
body.logged-in .not-logged-in, body.not-logged-in .logged-in {
    display: none !important;
}
/* Kirjautunut käyttäjä + kirjautumattoman elementti. TAI Kirjautumaton käyttäjä + kirjautuneen elementti. */
body.logged-in .logged-in, body.not-logged-in .not-logged-in {
    display: block; /* Näyttää kirjautumattoman elementit */
}
/* Murupolkun erottimen piilotus piilotettujen perästä */
body.logged-in .breadcrumb-item.not-logged-in + .breadcrumb-item::before {
    display: none !important;
}
/*-------------------------------------------------------------------*/

/* Dialogitekstit lukutilassa */
body.logged-in .for-not-logged-in {
	display: none;
}
body:not(.logged-in) .for-canNotRead {
	display: none;
}
/*-------------------------------------------------------------------*/

/* dropdown palstoitus */
ul.services-dropdown[aria-labelledby="servicesDropdown"] {
	max-height: 80vh; /* Prevents it from becoming too tall */
	overflow: auto; /* Allows scrolling if needed */
	column-count: 2; /* Adjust number of columns as needed */
	column-gap: 20px; /* Space between columns */
	white-space: nowrap; /* Prevents items from wrapping */
}
ul.services-dropdown[aria-labelledby="servicesDropdown"] > li {
	break-inside: avoid-column; /* Ensures main items stay together */
}