/* ---- published: 09.12.2025, 15:48:45 ---- */

/* theme: prh2 */
/* module: prh2 file: prh2.css namespace: noscope:true */



:root {
    /*
    * prh.fi colours
    */
    --prh-sininen-vaalea: #ffffff;
    --prh-sininen-tumma: #00009f;
    --prh-pinkki-keski: #c74794;
    --prh-pinkki-vaalea: #f8a9e2;
    --prh-primary: #002776;

    /* PRH Design Systemistä: */
    --prh-blue: #035ca7;
    --prh-light-blue: #f3fbfd;
    --prh-pale-blue: #e8f7fb;
    --prh-bright-blue: #0372ba;
    --prh-bright-blue-25: #fafefe;
    --prh-dark-blue: #174071;
    --prh-dark-gray: #323232;
    --prh-dark-gray-87: #5d5d5d;
    --prh-dark-gray-50: #949494;
    --prh-dark-gray-38: #b1b1b1;
    --prh-medium-gray: #d9d9d9;
    --prh-purple: #d0268f;
    --prh-deep-purple: #7b207f;
    --prh-medium-purple: #efd3e6;
    --prh-orange: #c85204;
    --prh-light-gray: #ebebeb;
    --prh-lightest-gray: #f7f7f7;
    --prh-yellow: #f7f0a1;
    --prh-green: #00816b;
    --prh-tint-topaz: #f4fbfd;
    --prh-tint-purple: #fcf6fa;
    --prh-tint-orange: #fff5ef;
    --prh-backgroun-color: #f0f7fd;


    /* Muut */
    --font-family-prh: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-family-prh-otsikko: "FagoWebPro-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --body-color: #212529;
    --background-color: var(--prh-backgroun-color);
    --primary: var(--prh-primary);

}



/*
* Bootstrap overrides
*/
.card .card-body {
    padding: 1.75rem 1.25rem;
}
@media (min-width: 1400px) {
    .container {
        max-width: 1440px;
    }
}

.container {
	padding: 0;
}

/* Peruskoko 16 px johon suhteelliset koot vertaantuvat. */
html {
    font-size: 16px;
}
html:has(.public-channel) {
	--html-font-size: 100%;
	font-size: 100%;
}
/* Kun suunnittelupuolelta linjattiin että käytetään systeemifontteja,
* body-määrittely jäi pois. Komponenteilla on myöhemmin omia määrittelyjä.
* Periaatteessa kaikki pitäisi olla ok ilman body-määrettä, jos se
* tarvii laittaa niin voi sen laittaa. Nyt kuitenkin pois päältä kun
* malli hyväksyttiin ilman.
*/
/* body {
    font-family: 'FagoWebPro-Medium', sans-serif;
} */

/* Karkeat linjat miten sivun visuaaliset osiot jaetaan.
*/
stato-frame#content:not([data-view*="prh2.tyhja"]) {
    background-color: var(--background-color);
}

main {
    background-color: white;
    padding-bottom: 2rem;
}
#content[data-view="prh2.tavaramerkkiasioinninetusivu"] main {
	background-color: unset;
}
/* Otsikkokomponenttien ja niiden rinnakkaisluokkien tyylit */
h1,
.h1,
.prh-paaotsikko h1 {
    font-family: 'FagoCompPro-Bold', 'FagoWebPro-Bold', sans-serif;
    font-weight: 700;
    font-size: 2.25rem;
}

h2 .h2 {
    font-size: 1.75rem;
    color: var(--primary);
}

/* Eräitä spesifejä otsikkoja pyydettiin säätämään erikseen. */
#otsikko-ajankohtaista {
    font-size: 1.75rem;
    color: var(--primary);
}

#otsikko-asiakastiedotteet,
#otsikko-uutiset {
    font-size: 1.75rem;
    color: #7b207f;
}

#otsikko-kysymykset {
    font-size: 1.25rem;
}

/* Yleiset linkkityylit. */
a {
    color: #035ca7;
}
a:focus, a:hover {
    color: #d0268f;
}
a:focus {
    outline: 2px solid #035ca7;
}

main a {
    text-decoration: none;
}
main a:hover {
    text-decoration: underline;
}

/* Jos linkin kanssa on ikoni, se asemoituu näin. Lainattu PRH:n Design Systemistä. */
a.link-icon::before,
a.link-icon::after {
    display: inline-block;
    background-repeat: no-repeat;
    background-size: 1rem 1rem;
    width: 1rem;
    height: 1rem;
    margin-left: 0.25rem;
    margin-right: 0.25rem;
    vertical-align: -0.175rem;
}

/* Focus linkeille, jotka ovat myös otsikoita tai listan osia. */
h1 > a:focus,
h2 > a:focus,
h3 > a:focus,
h4 > a:focus,
h5 > a:focus,
h6 > a:focus,
p > a:focus,
div > a:focus,
ol a:focus,
ul a:focus,
td a:focus,
label a:focus,
dd a:focus {
    outline: 2px solid #035ca7;
    color: #d0268f;
}

.bg-primary a:focus {
    outline: 2px solid white;
}

/* Linkin yhteydessä olevat ikonit luodaan paloista. Näin voidaan vaihtaa ikonin
* väriä CSS:llä. Menetelmä lainattu PRH:n Design Systemistä.
* Perustekstin yhteydessä. */
a.link-internal {
/* Making chevre icon */
}
a.link-internal::after {
    content: "";
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23035ca7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>');
}
a.link-internal:hover::after,
a.link-internal:focus::after,
a.link-internal:active::after {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23d0268f" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>');
}

/* link-internal-reverse katsoo vasempaan. */
a.link-internal-reverse {
/* Making reverse chevre icon */
}
a.link-internal-reverse::before {
    content: "";
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23035ca7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-left"><polyline points="9 18 15 12 9 6" transform="translate(24,0) scale(-1,1)"></polyline></svg>');
}
a.link-internal-reverse:hover::before,
a.link-internal-reverse:focus::before,
a.link-internal-reverse:active::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23d0268f" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-left"><polyline points="9 18 15 12 9 6" transform="translate(24,0) scale(-1,1)"></polyline></svg>');
}

/* Ulkoiset linkit.
* Ulkoisen linkin HTML on tämmöinen:
* <a href="#" target="_blank" class="link-icon link-external">Facebook<span class="visually-hidden"> (avautuu uuteen ikkunaan)</span></a>
*/
a.link-external {
/* Making external link icon */
}
a.link-external::after {
    content: "";
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23002776" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>');
}
a.link-external:hover::after,
a.link-external:focus::after,
a.link-external:active::after {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23002776" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>');
}

/* Tekstiin ja svg-ikoineihin liittyviä määrittelyjä, kun alla on tumma tausta.*/
.prh-tumma-tausta,
.prh-tumma-tausta h1,
.prh-tumma-tausta .h1,
.prh-tumma-tausta h2,
.prh-tumma-tausta .h2,
.prh-tumma-tausta h3,
.prh-tumma-tausta .h3,
.prh-tumma-tausta h4,
.prh-tumma-tausta .h4,
.prh-tumma-tausta h5,
.prh-tumma-tausta .h5,
.prh-tumma-tausta h6,
.prh-tumma-tausta .h6,
.prh-tumma-tausta li {
    color: white;
}
.prh-tumma-tausta a {
    color: white;
}
.prh-tumma-tausta a:focus, .prh-tumma-tausta a:hover {
    color: #ffffff;
    text-decoration: none;
}
/* .prh-tumma-tausta a:focus {
    outline: 2px solid #ffffff;
} */
.prh-tumma-tausta a.link-internal::after {
    content: "";
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>');
}
.prh-tumma-tausta a.link-internal:hover::after,
.prh-tumma-tausta a.link-internal:focus::after,
.prh-tumma-tausta a.link-internal:active::after {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23f8a9e2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>');
}
.prh-tumma-tausta a.link-internal-reverse::before {
    content: "";
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-left"><polyline points="9 18 15 12 9 6" transform="translate(24,0) scale(-1,1)"></polyline></svg>');
}
.prh-tumma-tausta a.link-internal-reverse:hover::after,
.prh-tumma-tausta a.link-internal-reverse:focus::after,
.prh-tumma-tausta a.link-internal-reverse:active::after {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23f8a9e2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-left"><polyline points="9 18 15 12 9 6" transform="translate(24,0) scale(-1,1)"></polyline></svg>');
}
.prh-tumma-tausta a.link-external::after {
    content: "";
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>');
}
.prh-tumma-tausta a.link-external:hover::after,
.prh-tumma-tausta a.link-external:focus::after,
.prh-tumma-tausta a.link-external:active::after {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23f8a9e2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>');
}
/* On ikoneita, joilla on pyöreä taustaväri. */
.ikoni-ympyra {
    display: inline-block;
    background-color: var(--primary);
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 20rem;
    padding: 0.5rem;
    width: 2.5rem;
    height: 2.5rem;
    top: 0.5rem;
    left: 1rem;
    position: absolute;
}
.ikoni-info .ikoni-ympyra {
	background-size: 15%;
}

/* Oletuksena breadcrumb on valkoisella taustalla.
* Jos onkin tummalla niin sitten näin.
*/
.prh-tumma-tausta .prh2-murupolku .prh-breadcrumb {
	padding-left: 0px;
}
.prh-tumma-tausta .prh2-murupolku .prh-breadcrumb .breadcrumb-item.active {
	color: #ebebeb;
}
.prh-tumma-tausta .prh2-murupolku .prh-breadcrumb .breadcrumb-item+.breadcrumb-item::before {
	content: "›" /"";
	color: #ffffff;
}
.prh-tumma-tausta .prh2-murupolku .prh-breadcrumb .breadcrumb li > a:hover {
    color: #ffffff;
    text-decoration: none;
}

/* yleisiä */

.fontsize-14 {
    font-size: .875rem;
}

/* Korttityylit */
.card h3:focus,
.card h3:hover,
.card h3 a:focus,
.card h3 a:hover {
    color: #fff;
}

/* Asiakaspalaute */
.prh-asiakaspalaute #lomakedata p,
.prh-asiakaspalaute #lomakedata label {
	font-size: 1rem;
}
.prh-asiakaspalaute #lomakedata legend,
.prh-asiakaspalaute #lomakedata button.feedback-topics,
.prh-asiakaspalaute #lomakedata .btn-form {
	font-size: 1.25rem;
}
.prh-asiakaspalaute #lomakedata legend {
	font-family: var(--font-family-prh-otsikko);
	margin: 0 0 0.9rem 0;
}

/* Sisältösivun sivubannerit */
.sivubannerit {
	display: none;
	padding-top: 2rem;
}

@media (max-width: 767px) {
	.sivubannerit {
		display: block;
	}
}


/* Ulkosen linkin ikonin välistys */

.content-viewer a[data-external='on']::after,
.content-viewer stato-link[data-external='on']::after,
.content-viewer a[target='_blank']:not(.stato-attachment)::after {
	padding-left: 0.5rem;
}

.tooltip {
	font-size: 16px;
}


/* PRINTTITYYLEJÄ */
@media print {

	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	stato-frameset,
	#sigma-ds-frameset,
	stato-frame {
		display: block !important;
	}
	stato-frame#content-header {
		display: none !important;
	}

	.container,
	.row {
		margin: 0 !important;
		padding: 0 !important;
	}

	.container,
	.row,
	.main-wrapper,
	section {
		break-inside: avoid;
		break-before: auto;
		break-after: auto;
		page-break-after: auto;
		page-break-inside: auto;
		page-break-before: auto;
		display: block !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	.prh2-murupolku {
		page-break-before: auto !important;
	}
	.prh2-murupolku {
		break-inside: avoid;
		break-before: auto;
		break-after: auto;
		page-break-after: avoid;
		page-break-inside: avoid;
		page-break-before: auto !important;
		display: block !important;
		margin: 0 !important;
		padding: 0 !important;
		height: auto !important;
	}

	.prh2-murupolku * {
		break-inside: avoid;
		break-before: auto;
		break-after: auto;
		page-break-before: auto !important;
		page-break-after: auto !important;
		page-break-inside: avoid !important;
	}

	.prh-logo-print {
		width: 50px;
		height: auto;
	}

	html,
	body,
	.prh-sisaltoalue {
		margin: 0 !important;
		padding: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
	}

}

/* Cludohaku */

#cludo-search-form2 {
    display: flex;
    position: relative;
}

#cludo-search-form2 button:hover {
    background-color: var(--secondary);
}

#cludo-search-form2 button {
    background-color: var(--prh-teal);
    color: #fff;
    border-radius: 0 var(--input-border-radius) var(--input-border-radius) 0;
	border-bottom-color: rgb(0, 0, 0);
	border-top-color: rgb(0, 0, 0);
	border-right-color: rgb(0, 0, 0);
	border-left-color: rgb(0, 0, 0);
}

#cludo-search-form2 input {
    display: flex;
    align-items: center;
    font-family: var(--font-family-base);
    color: var(--input-color);
    background-color: var(--input-bg);
    background-clip: padding-box;
    border-radius: var(--input-border-radius) 0 0 var(--input-border-radius);
    transition: var(--input-transition);
    width: 100%;
    border: 2px solid #484848;
}

#cludo-search-form2 input,
.search_autocomplete li {
    padding: var(--input-padding-y) var(--input-padding-x);
    font-size: var(--font-size-base);
    line-height: var(--input-line-height);
}

/* Korjaus ulkoisen linkin ikoneihin ja liitteen tietoihin, yliajo toolsien tyyliin */

.content-viewer a[data-external='on']::after,
.content-viewer stato-link[data-external='on']::after,
.content-viewer a[target='_blank']:not(.stato-attachment)::after {
    font-size: 0.7em !important;
    top: -1px !important;
}

.content-viewer a[data-type='attachment']::after,
.content-viewer .stato-attachment::after,
.content-viewer stato-attachment::after {
    font-size: 0.9em !important;
    top: -1px !important;
}

/* Includet */

/* btn-primary
    * Perusnappi yleiseen käyttöön.
*/
.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
    font-family: var(--font-family-prh-otsikko);
    font-weight: 500;
    padding: 0.5rem 1.5rem;
}
.btn-primary:focus, .btn-primary:hover {
    background-color: #d0268f;
    border-color: #d0268f;
    color: #ffffff;
    text-decoration: none;
}
.btn-primary:focus {
    outline: 2px solid #035ca7;
    box-shadow: 0 0 0 0 #ffffff;
}

/* btn-secondary
    * Tässä napissa ei ole taustaa, mutta
    * focus ja hover tuovat napin muodon esiin.
*/
.btn-secondary {
    background-color: transparent;
    border-color: #ffffff;
    color: #ffffff;
    margin: 1rem 0;
    border-radius: 2.5rem;
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    font-family: var(--font-family-prh-otsikko);
}
.btn-secondary:focus, .btn-secondary:hover {
    background-color: #d0268f;
    border-color: #ffffff;
    color: #ffffff;
}
.btn-secondary:focus img, .btn-secondary:hover img {
    filter: brightness(999%);
}

/* btn-header
* Tämä on käytössä headerissa.
*/
.btn-header {
    background-color: white;
    border-color: var(--primary);
    color: var(--primary);
    margin-left: 1rem;
    min-width: 7rem;
    width: 78px;
}
.btn-header:focus, .btn-header:hover {
    background-color: #faeafd;
    border-color: var(--primary);
    color: white;
}

/* btn-footer
    * Käytössä footterissa. Voisi käyttää tummalla pohjalla muuallakin
    * jos tarves.
*/
.btn-footer {
    background-color: #035ca7;
    text-decoration: none;
    margin-right: 1rem;
}
.btn-footer:focus, .btn-footer:hover {
    background-color: #f8a9e2;
    border-color: #f8a9e2;
    color: var(--primary) !important;
}

/* btn-link
* Jos napista pitää tehdä linkin näköinen.
*/
.btn-link {
    color: black;
    text-decoration: none;
    border: 0;
    border-radius: 0;
}
.btn-link:focus, .btn-link:hover {
    color: #d0268f;
    text-decoration: underline;
}

/* btn-vaaleansininen
    * Jossain oli käytössä erillinen vaaleansininen nappi.
*/
.btn-vaaleansininen {
    background-color: #e8f7fb;
    border-color: #e8f7fb;
    color: #035ca7;
    font-family: var(--font-family-prh-otsikko);
    font-weight: 500;
}
.btn-vaaleansininen:focus,
.btn-vaaleansininen:hover {
    background-color: #d0268f;
    border-color: #d0268f;
    color: white;
    text-decoration: none;
}

/* btn-levea
    * Tämä taitaa olla nyt turha, kun leiskamallia muutettiin
    * vielä HTML-katselmuksen jälkeen.
*/
.btn-levea {
    width: 100%;
    margin: 1rem 0;
    padding: 0.75rem;
}

/* btn-ikonilla
    * Lisäluokka jonkun muun nappityylin kylkeen. Tällä
    * saa ikonin napin sisällä näyttämään järkevältä.
*/
.btn-ikonilla {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: fit-content;
}
.btn-ikonilla span {
    display: inline-block;
    padding: 0 0.5rem;
}
.btn-ikonilla img {
    max-width: 24px;
    height: auto;
}
.btn-ikonilla .ikoni-ympyra {
    position: static;
}
.btn-ikonilla:focus .ikoni-ympyra,
.btn-ikonilla:hover .ikoni-ympyra {
    background-color: transparent;
}
.btn-ikonilla.btn-primary:focus img,
.btn-ikonilla.btn-primary:hover img {
    filter: brightness(999%);
}

/* Headerin spesiaalinappeja. */
.prh-header-hampurilainen,
.prh-header-hakunappi {
    color: var(--primary);
    border-color: var(--primary);
    border-radius: 2px;
}
.prh-header-hampurilainen span,
.prh-header-hakunappi span {
    color: var(--primary);
}
.prh-header-hampurilainen img,
.prh-header-hampurilainen.prh-header-standalone-link img,
.prh-header-hakunappi img,
.prh-header-hakunappi.prh-header-standalone-link img {
    width: 20px;
    height: 20px;
    margin-left: 0.5rem;
    margin-top: -2px;
}
@media (max-width: 991px) {
    .prh-header-hampurilainen,
    .prh-header-hakunappi {
        border: 0px;
        margin-right: 1rem;
        min-width: auto;
    }
}

.prh-header-hampurilainen[aria-expanded=true] {
    background-color: #e8f7fb;
}
.prh-header-hampurilainen[aria-expanded=true]:focus,
.prh-header-hampurilainen[aria-expanded=true]:hover {
    background-color: #f8a9e2;
    border-color: #f8a9e2;
    color: white;
}

/* Nämä napit ovat mobiilivalikon sisällä vaihtamassa navigaatiotasoa. */
.btn-mobiilinavigaatio,
.btn-mobiilinavigaatio-kaanteinen {
    background-color: #f7f7f7;
    border: 0px;
    color: black;
    border-radius: 0px;
    padding-top: 0.825rem;
    font-weight: 700;
    background-repeat: no-repeat;
    background-position: center center;
    text-indent: -9999px;
    width: 2.5rem;
}
.btn-mobiilinavigaatio:focus,
.btn-mobiilinavigaatio:active,
.btn-mobiilinavigaatio:hover,
.btn-mobiilinavigaatio-kaanteinen:focus,
.btn-mobiilinavigaatio-kaanteinen:active,
.btn-mobiilinavigaatio-kaanteinen:hover {
    background-color: #d0268f;
    color: white;
}

.btn-mobiilinavigaatio {
    border-left: 1px solid #ebebeb;
    box-shadow: 0 1px 0 0 #d9d9d9;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>');
}

.btn-mobiilinavigaatio-kaanteinen {
    min-height: 3rem;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-left"><polyline points="9 18 15 12 9 6" transform="translate(24,0) scale(-1,1)"></polyline></svg>');
}

/* Mobiilinavigaatiossa paluu edelliselle tasolle. */
.btn-valikko-takaisin {
    padding: 0.825rem 0.5rem;
}

/* Osioiden pääsivuilla voi olla sininen starttiosio.
* Tämä on sen pohja.*/
.hero-sininen-taustakuva {
    padding: 1rem 0 6rem 0;
    background-color: #035ca7;
    background-image: url("/lib/prh2/images/gr/header-etusivu-sininen.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

/* Liittyy edelliseen, käytetään yhdessä. */
.prh-tumma-tausta h2 {
    padding-bottom: 1rem;
}
.prh-tumma-tausta h2:has(+ .lista-linkit) {
    font-size: 1rem;
    padding-top: 1rem;
    padding-bottom: 0rem;
    padding-left: 0.5rem;
}
@media (max-width: 991px) {
    .prh-tumma-tausta h2:has(+ .lista-linkit) {
        padding-top: 2rem;
    }
}

/* Esimerkiksi Yritykset-ja-yhteisot.html alussa on
    * lista laakeita bokseja, jotka ovat linkkejä osion alasivuihin.
*/
.lista-linkit {
    padding-left: 0px;
    margin-bottom: 0px;
}
.lista-linkit li {
    list-style: none;
    border-bottom: 1px solid #949494;
}

/* Tämä on <li>-elementin luokka joka auttaa laittamaan
    * linkkitekstin ja siihen liittyvän chevronin siististi
    * rinnakkain.
*/
.li-ikonilla {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
}
.li-ikonilla span {
    display: block;
    padding: 0 0.5rem;
}
.li-ikonilla img {
    height: 1rem;
    width: auto;
    padding: 0 0.5rem;
}
.li-ikonilla:focus, .li-ikonilla:hover {
    color: white;
    text-decoration: underline;
    background-color: #d0268f;
}
.li-ikonilla:focus img, .li-ikonilla:hover img {
    /*filter: invert(48%) sepia(94%) saturate(502%) hue-rotate(276deg) brightness(132%) contrast(103%);*/
}

/* Leikamallin mukaan sinisen osion päälle nousee
    * desktop-näkymässä valkoisen osion tavaraa.
    * Tämä on se offset.
*/
.prh-sisalto-wrapper .prh-offset {
    position: relative;
}
.prh-sisalto-wrapper .prh-offset > div {
    margin-top: -3rem;
}
@media (max-width: 991px) {
    .prh-sisalto-wrapper .prh-offset:not(:first-child) > div {
        margin-top: 0rem;
    }
}

#main-content {
	background-color: white;
    padding-bottom: 2rem;
}

/* Koko sisältö poislukien
* header ja footer.
*/
.prh-sisalto-wrapper {
	display: flex;
	justify-content: center;
}

/* Sisältö ilman breadcrumbia ja sidebaria. */
.prh-sisaltoalue {
	max-width: 820px;
	/* .prh-sisaltoalueella on oma semanttinen footer
	* jossa Tulostettava versio ja Päivitetty viimeksi.
	*/
}

.prh-sisaltoalue h2,
.prh-sisaltoalue .h2,
.prh-sisaltoalue h3,
.prh-sisaltoalue .h3 {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.prh-sisaltoalue p a,
.prh-sisaltoalue li a,
.prh-sisaltoalue footer a {
    color: var(--primary);
    font-weight: 500;
    font-family: var(--font-family-prh-otsikko);
}

.prh-sisaltoalue a {
	font-size: 1rem;
}

@media (max-width: 991px) {
	.prh-sisaltoalue h1,
	.prh-sisaltoalue .h1,
	.prh-sisaltoalue h2,
	.prh-sisaltoalue .h2,
	.prh-sisaltoalue h3,
	.prh-sisaltoalue .h3,
	.prh-sisaltoalue h4,
	.prh-sisaltoalue .h4,
	.prh-sisaltoalue h5,
	.prh-sisaltoalue .h5,
	.prh-sisaltoalue h6,
	.prh-sisaltoalue .h6 {
		word-break: break-word;
	}
}


.prh-sisaltoalue footer {
	padding-top: 1rem;
	text-align: end;
}

.prh-sisaltoalue footer a {
	display: block;
}

/* Sidebar joka esiintyy .prh-sisaltoalueen kaverina.*/


.prh-sivupalkki {
	border-right: 1px solid #ebebeb;
	padding-right: 0px;
}
@media (min-width: 1200px) {
	.prh-sivupalkki {
		max-width: 300px;
		margin-right: 1rem;
	}
}

.prh-sivupalkki.mobiili {
	max-width: 100%;
	border-right: 0px;
	margin-right: 0;
}

.prh-sivupalkki h2 {
	font-size: 1rem;
	font-weight: 700;
	padding-left: 0.5rem;
}

.prh-sivupalkki hr {
	margin-top: 0.25rem;
	margin-bottom: 0.25rem;
	border-width: 2px;
}

.prh-sivupalkki .prh-sivupalkin-spotlight {
	padding-right: 0.25rem;
}

/* Sidebarin tyylit */
.prh-oikopolut ul,
.prh-sivupalkki ul {
	padding-left: 0px;
	margin-bottom: 0px;

}

.prh-oikopolut ul .active-path,
.prh-sivupalkki ul .active-path {
	/* background-color: #f7f7f7; */
	font-weight: 700;
}

.prh-oikopolut ul .active-path.active-page .nykyinen-sivu,
.prh-sivupalkki ul .active-path.active-page .nykyinen-sivu {
	background-color: #e8f7fb;
	padding: 0.75rem 0.5rem;
}

.prh-oikopolut ul .active-path>a,
.prh-sivupalkki ul .active-path>a {
	padding-left: 0;
}

.prh-oikopolut ul .active-page .nykyinen-sivu,
.prh-sivupalkki ul .active-page .nykyinen-sivu {
	background-color: #e8f7fb;
	border: 0px;
	padding: 0.75rem 0.5rem;
}

.prh-oikopolut ul li,
.prh-sivupalkki ul li {
	list-style: none;
	border-bottom: 1px solid #ebebeb;
	padding: 0.75rem 0.5rem;
	position: relative;
}

.prh-oikopolut ul li:has(.nykyinen-sivu),
.prh-sivupalkki ul li:has(.nykyinen-sivu) {
	padding: 0;
}

.prh-sivupalkki ul li div.nykyinen-sivu {
	/* padding: 0 0.5rem; */
	padding: 0.75rem 0.5rem;
}

.prh-oikopolut ul li:last-child,
.prh-sivupalkki ul li:last-child {
	border-bottom: 0px;
}

.prh-oikopolut ul li a,
.prh-sivupalkki ul li a {
	text-decoration: none;
	display: inline-block;
	padding-left: 1rem;
	padding-right: 2rem;
	color: black;
}

.prh-oikopolut ul li a:hover,
.prh-oikopolut ul li a:focus,
.prh-sivupalkki ul li a:hover,
.prh-sivupalkki ul li a:focus {
	color: #d0268f;
	text-decoration: underline;
}

.prh-oikopolut ul li a::before,
.prh-sivupalkki ul li a::before {
	position: absolute;
	left: 0.5rem;
	top: 1rem;
}

.prh-oikopolut ul li a::after,
.prh-sivupalkki ul li a::after {
	position: absolute;
	right: 0.5rem;
	top: 1rem;
}

.prh-oikopolut ul li a.link-internal-reverse,
.prh-sivupalkki ul li a.link-internal-reverse {
	padding-left: 1rem;
}

.prh-oikopolut ul li a.link-internal-reverse::before,
.prh-sivupalkki ul li a.link-internal-reverse::before {
	left: 0;
}

.prh-oikopolut ul ul,
.prh-sivupalkki ul ul {
	padding-left: 0rem;
}

.prh-oikopolut ul ul li,
.prh-sivupalkki ul ul li {
	padding: 0.75rem 0;
}

.prh-oikopolut ul ul li ul li,
.prh-sivupalkki ul ul li ul li {
	padding-left: 0.75rem;
}

.prh-oikopolut>ul>li:first-child,
.prh-oikopolut.prh-oikopolut ul li,
.prh-sivupalkki>ul>li:first-child,
.prh-sivupalkki.prh-oikopolut ul li {
	border-bottom: 0px;
}

.prh-oikopolut .sidebar-otsikko,
.prh-sivupalkki .sidebar-otsikko {
	padding: 0.5rem 0.25rem;
	background-color: #f7f7f7;
}

/* Liittyy edelliseen. */
.prh-oikopolut {
	margin-top: 1rem;
}

.prh-oikopolut li {
	list-style: none;
}

.prh-oikopolut img {
	width: 20px;
	height: 20px;
}

.prh-oikopolut h2 {
	font-size: 1rem;
	font-weight: 700;
	padding-left: 0.5rem;
}

/* Jossain sisältösivuissa näkyy EU-reguloitu mainos.*/
.spotlight-your-europe {
	background-color: #f7f7f7;
	padding: 0.5rem;
	transition: all 0.15s;
}

.spotlight-your-europe p {
	padding-top: 0.5rem;
}

.spotlight-your-europe a {
	color: #000000;
}

.spotlight-your-europe a:focus,
.spotlight-your-europe a:hover {
	text-decoration: none;
	color: #000000;
}

.spotlight-your-europe a:focus p span,
.spotlight-your-europe a:hover p span {
	text-decoration: underline;
}


/* PRH:n bootstrapista */

/*(.row>* selectori mutta rikkoi muita)*/
.prh-sisalto-wrapper {
    flex-shrink: 0;
    width: 100%;
    /* max-width: 100%; */
    /* padding-right: calc(var(--bs-gutter-x)* .5);
    padding-left: calc(var(--bs-gutter-x)* .5); */
    margin-top: var(--bs-gutter-y);
}

.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x)* .5);
    padding-left: calc(var(--bs-gutter-x)* .5);
    margin-right: auto;
    margin-left: auto;
}