@charset "UTF-8";
/*admin väriä säätäessä ks. myös ParametriEdit.ColorCode(Parametri p)*/
/*#fa82ff*/
:root {
  --main-color1: #013F69;
  --main-color2: #3777A0;
  --main-contrast: #fff;
  --main-gradient: linear-gradient(to bottom, var(--main-color2), var(--main-color1));
  --button-color: var(--main-contrast);
  --button-bg: var(--main-gradient);
  --button-border: var(--main-color1);
  --button-color-hover: #000;
  --button-bg-hover: linear-gradient(to bottom, #fff, #ccc);
  --new-color: #ff8800;
}

/*
	css_ kaikelle ulkonäölliselle omalle css:lle
	acui_ kaikelle rakenteelliselle omalle css:lle
*/
* {
  /*font-family: "Arial", "Helvetica", sans-serif;*/
}

body {
  background-color: #fff;
  /* #F3F0E9;*/
  color: #000000;
  /*background-image:url(images/bg_image.gif);*/
  text-align: left;
  height: 100%;
  width: 100%;
  margin: 0px;
  font-size: 15px;
  /*DefaultFontSize*/
  font-family: "Open Sans", "Calibri", "Tahoma", "Arial", "sans-serif";
  /*font-size: 105%;*/
  overflow-y: scroll;
  margin-bottom: -2px;
  min-width: 300px;
}

p {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

::selection {
  color: white !important;
  background-color: #5f5f5f !important;
}

textarea {
  white-space: pre-wrap;
}

textarea, select, input[type=text], input[type=password], input[type=file], input[type=tel], input[type=email], input[type=search], div.dropdown, span.dropdown {
  font-size: 15px;
  border: solid 1px #999999;
  border-radius: 7px;
  background-color: #FFFFFF;
  font-family: "Open Sans", "Calibri", "Tahoma", "Arial", "sans-serif";
  padding: 7px;
  box-sizing: border-box;
  margin-top: 2px;
  margin-bottom: 2px;
}

input[type=checkbox], input[type=radio] {
  width: 15px;
  height: 15px;
  /*margin-bottom: 12px;*/
}

input.small {
  padding: 0px;
  margin: 0px;
  font-size: inherit;
  border-radius: 0px;
}

div.dropdown, span.dropdown {
  padding-right: 30px;
  background-image: url("../images/dropdown.gif");
  background-position: right 3px center;
  background-repeat: no-repeat;
}

.dropdown.disabled {
  background-image: none;
  border-color: #cccccc;
}

hr {
  height: 1px;
  background-color: #C0C0C0;
  border: 0px;
}

a {
  /*color: #187CE0; /* /*link-color*/
  color: #115599;
  border: 0px;
  /* Links are not underlined by default; the underline appears
     on hover/focus as the affordance. Any rule downstream that
     explicitly sets text-decoration overrides this. */
  text-decoration: none;
}

a:hover, a:focus {
  color: #0d4477;
  text-decoration: underline;
}

a[target=_blank] {
  white-space: nowrap;
}

/*Pitää olla target=_blank ja href attribuutin pitää olla olemassa*/
a[target=_blank][href]::after,
.css_uusi_lehti_kontti .css_uusi_lehti_kuva::after {
  display: inline-block;
  content: "  ";
  -webkit-mask: url(/images/SVG/uusi_lehti2.svg) no-repeat 0 0/15px 15px;
  mask: url(/images/SVG/uusi_lehti2.svg) no-repeat 0 0/15px 15px;
  width: 15px;
  height: 15px;
  margin-top: 3px;
  margin-right: 3px;
  -webkit-mask-size: cover;
  mask-size: cover;
  margin-left: 2px;
  background-color: darkgray;
}

/*Pitää olla target=_blank ja href attribuutin pitää olla olemassa*/
a[target=_blank][href]:hover::after,
.css_uusi_lehti_kontti:hover .css_uusi_lehti_kuva::after {
  margin-top: 0px;
  margin-right: 0px;
  -webkit-mask: url(/images/SVG/uusi_lehti2.svg) no-repeat 0 0/15px 15px;
  mask: url(/images/SVG/uusi_lehti2.svg) no-repeat 0 0/15px 15px;
  width: 18px;
  height: 18px;
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: #013F69;
}

nav ul.submenu a[target=_blank]::after {
  background-color: darkgray;
  /*#115599;*/
}

nav ul.submenu a[target=_blank]:hover::after {
  background-color: #fff;
}

/*a[rel=external]::after {
		content: url(/images/arrow_up.gif);
	}*/
.css_uusi_lehti_kontti {
  display: inline-block;
}

img {
  border: 0px;
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
}

.clickable {
  cursor: pointer;
}

.raahattava {
  cursor: all-scroll;
}

/*Nyt kun tää on oma luokkansa voi näitä tehdä useita ja vaihtaa värejä ja muita niin kaiken ei tartte näyttää samalta*/
.css_scrollcontainer_base {
  --background-color: rgba(255, 255, 255, 1);
  --shadow-color: darkgray;
  /*rgba(34,34,34, 0.5);*/
  --shadow-size: 0.75em;
  --transparent: rgba(255, 255, 255, 0);
  /* We can't use "transparent" directly, because Safari would interpret the color as "transparent black" (see https://css-tricks.com/thing-know-gradients-transparent-black/). Using this workaround, it works fine. */
}

.css_scrollcontainer_vertical {
  overflow-y: auto;
  background: linear-gradient(var(--background-color), var(--background-color), var(--transparent) calc(var(--shadow-size) * 2)), radial-gradient(farthest-side at 50% 0, var(--shadow-color), var(--transparent)), linear-gradient(to top, var(--background-color), var(--background-color), var(--transparent) calc(var(--shadow-size) * 2)), radial-gradient(farthest-side at 50% 100%, var(--shadow-color), var(--transparent)) 0 100%;
  background-color: var(--background-color);
  background-repeat: no-repeat;
  background-attachment: local, scroll, local, scroll;
  background-size: 100% 100%, 100% var(--shadow-size), 100% 100%, 100% var(--shadow-size);
}

.css_scrollcontainer_horizontal {
  overflow-x: auto;
  background: linear-gradient(to right, var(--background-color), var(--background-color), var(--transparent) calc(var(--shadow-size) * 2)), radial-gradient(farthest-side at 0 50%, var(--shadow-color), var(--transparent)), linear-gradient(to left, var(--background-color), var(--background-color), var(--transparent) calc(var(--shadow-size) * 2)), radial-gradient(farthest-side at 100% 50%, var(--shadow-color), var(--transparent)) 100%;
  background-color: var(--background-color);
  background-repeat: no-repeat;
  background-attachment: local, scroll, local, scroll;
  background-size: 100% 100%, var(--shadow-size) 100%, 100% 100%, var(--shadow-size) 100%;
}

em {
  font-style: italic;
}

strong {
  font-weight: bold;
}

select[multiple] > option {
  padding-right: 10px;
}

input[type=button], input[type=submit], button {
  font-size: 100%;
  padding: 5px 15px 5px 15px;
  background: var(--button-bg);
  color: var(--button-color);
  border: 1px solid var(--button-border);
  border-radius: 5px;
  cursor: pointer;
  white-space: normal;
}

:is(input[type=button], input[type=submit], button):hover:not(.no_hover) {
  background: inherit;
  background: var(--button-bg-hover);
  color: var(--button-color-hover);
}

button.icon {
  font-size: inherit;
  background: transparent;
  color: inherit;
  border: 0px;
  padding: 0px;
}

input[type=file] {
  vertical-align: middle;
  padding: 1px 15px 1px 15px;
}

input[type=button].small_button, input[type=submit].small_button, button.small_button {
  font-size: 12px;
  /*padding: 2px;*/
  min-width: 75px;
  /*margin: 2px;*/
}

a.small_button {
  cursor: pointer;
}

input.isoNappula {
  float: center;
  /*padding: 30px 300px;*/
  width: 70%;
  height: 10vh;
  min-height: 30px;
  text-align: center;
  /*text-decoration: none;
  display: inline-block;*/
  font-size: 20px;
}

input[readonly] {
  background-color: Transparent;
  border-style: none;
  padding: 0px;
}

/*input[type=button]:hover, input[type=submit]:hover
{
	color: #000000;
	background-color: #CCCCCC;
	cursor: pointer;
}*/
input[type=button][disabled], input[type=submit][disabled], button[disabled], .css_button_disabled {
  color: #666666;
  background-color: #999999;
  background: linear-gradient(to bottom, #fff, #ccc);
  cursor: auto;
}

label {
  vertical-align: middle;
}

fieldset {
  border-radius: 5px;
}

fieldset.css_fieldset_piilotyyli {
  position: relative;
  display: block;
  padding: 0px;
  padding-top: 2em;
  border: 0px;
  margin-left: 0px;
}

fieldset.css_fieldset_piilotyyli > legend {
  display: table;
  position: absolute;
  top: 5px;
  left: 0px;
  padding: 0px;
}

fieldset.css_fieldset_piilotyyli.css_no_legend {
  padding-top: 0px;
}

tr.nowrap td {
  white-space: nowrap;
}

td {
  vertical-align: top;
  text-align: left;
}

/* cellpadding */
th, td {
  padding: 5px;
  /*padding-bottom: 5px;*/
}

/* kenttien väliin tilaa*/
tr td:first-child, tr th:first-child {
  padding-left: 0px;
}

/* cellspacing */
table {
  border-collapse: separate;
  border-spacing: 0px;
}

ul {
  padding: 0px;
  margin: 0px;
  margin-left: 30px;
}

main aside {
  display: block;
  padding: 0.5em;
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.hidden {
  display: none;
}

/***********************************************
* Otsikkomäärittelyt
************************************************/
h1, h2, h3, h4 {
  padding: 0px;
  margin: 0px;
  font-weight: normal;
  letter-spacing: 0.05em;
  margin-bottom: 5px;
}

.hakemusosio h1:not(:first-of-type),
.hakemusosio h2:not(:first-of-type),
.hakemusosio h3:not(first-of-type),
.hakemusosio h4:not(first-of-type) {
  margin-top: 20px;
}

.hakemusosio .css_margin_top_ei_ensimmaiseen {
  margin-top: 20px;
}

h1.pdf {
  position: absolute;
  right: 0px;
  top: 0px;
}

h1 {
  font-size: 160%;
  font-weight: bold;
  text-align: left;
  vertical-align: middle;
  margin: 2px 0px 4px 0px;
  color: #000000;
}

h2 {
  /*display:table;*/
  text-align: left;
  font-size: 144%;
}

h2 span {
  text-align: left;
}

h3 {
  font-size: 120%;
  text-align: left;
  vertical-align: middle;
  /* padding: 3px 1px 3px 4px;*/
  padding: 3px 1px 3px 0px;
  color: #000000;
  /*background: url(images/fade_white.png);
  background-repeat: repeat-y;
  background-color: #E1E7ED;*/
}

h3 span {
  text-align: left;
}

h4 {
  display: inline;
  font-size: 100%;
  font-weight: bold;
  letter-spacing: 0px;
}

h1 a, h2 a, h3 a, h4 a {
  color: Black;
}

tr.header_row {
  font-weight: bold;
  vertical-align: top;
}

th {
  font-size: 100%;
  vertical-align: top;
  text-align: left;
  font-weight: bold;
  letter-spacing: 0px;
}

th a {
  color: Black;
}

th a.link {
  color: #115599;
  /*link-color*/
}

/* use to complement another header element, not to be used as a standalone header style (ie <h2 class='accordion_header> )*/
.accordion_header {
  width: 99%;
  background-image: url("../images/fade_white.png");
  background-repeat: repeat-y;
  background-color: #e9c380;
  padding-top: 3px;
  padding-bottom: 3px;
  cursor: pointer;
}

/* Sovelluksen pääotsikkopalkki*/
header.topheader {
  display: table;
  position: relative;
  background-color: #fff;
  width: 100%;
  /*Removed 18.3.2026 as unnecessary. z-index: 100;*/
}

div.topheader_inner {
  margin-top: 2em;
  /*max-width: 85%;*/
  max-width: 100%;
  /*margin-left: calc(4px + 10vw - 32px) !important;
  margin-right: calc(4px + 10vw - 32px) !important;*/
  margin-left: 3vw !important;
  margin-right: 3vw !important;
  position: relative;
  /*margin-left: auto;
  margin-right: auto;*/
}

.topheader_lang {
  margin-left: 10px;
  /* lippujen väliin tilaa*/
}

.topheader a.main_logo {
  /*Olemassa jos kaivataan asiakaskohtaista tyylimuutoksia*/
}

.css_svg_logo svg.logo {
  display: inline-block;
  width: 300px;
  height: 200px;
  cursor: pointer;
  transition: fill 0.3s;
  z-index: -1;
}

.website_name {
  /* = järjestelmän otsikko, entinen h1*/
  font-size: 120%;
  color: #000000;
  letter-spacing: 0.05em;
  margin-top: 0px;
  margin-bottom: 5px;
}

.website_name a {
  display: inline;
  background-color: transparent;
  font-size: 20px;
  font-family: Cabin, sans-serif;
  color: inherit;
}

.website_name a:hover, .website_name a:focus {
  filter: opacity(70%);
}

.topheader .logobar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 0.5em;
}

span.helpheader {
  font-style: italic;
  font-weight: normal;
}

/*.topheader_aluslaatikko { /* Taustakuvia varten * -- käytä asiakaskohtaisia säädöksiä.
	background-color: white;
	box-shadow: 0 0 20px 10px white;
	border-radius: 10px;
	opacity: 0.6;
}*/
/************************************************
* Sisältö-blokit
************************************************/
form {
  padding: 0px;
  margin: 0px;
}

/*@media only screen and (max-width: 650px) {
	.main_master {
		max-width: unset !important;
	}
}*/
.main_master {
  margin-left: auto;
  margin-right: auto;
  margin-top: 1px;
  /*max-width: calc(100% - 15px - (100vw / 1000px));*/
  /*min-width: 1030px;*/
  /*padding: 0px; padding-top: 6px; padding-bottom: 6px; */
  border-width: 0px;
  border-color: transparent;
  border-style: solid;
  /*border-bottom-width: 6px; 	border-top-width: 6px; 	border-left-width: 15px; 	border-right-width: 15px;*/
  /*background-color: #999999;*/
}

/* transparent footer fixed to bottom of browser window, width should be maintained to match .main_master */
div.fixed_footer {
  max-width: 95%;
  min-width: 1030px;
  position: fixed;
  right: 50%;
  margin-right: -450px;
  /* 1/2 of width */
  bottom: 0px;
  height: 40px;
  background-color: #e0e0e0;
  border-top: 1px solid black;
  padding-top: 8px;
}

/*@media only screen and (max-width: 650px) {
	div.content_area {
		padding-left: 0px !important;
		padding-right: 0px !important;
	}
}*/
div.content_area {
  padding-left:  max(calc(3vw - 10px), 0px) !important ;
  padding-right: max(calc(3vw - 10px), 0px) !important ;
  padding: 15px;
  text-align: left;
  margin: 0px;
  vertical-align: top;
  background-color: #ffffff;
  border: solid 0px #D8D8D8;
  border-top: none;
}

div.footer_area {
  /*main_masterin alaviite*/
  text-align: center;
  font-size: 12px;
}

.hanke .hanke_content {
  border: solid 1px #003366;
  border-top-width: 0px;
  background-color: #fbfbfb;
  /*background: url(images/paper.jpg); 	background-repeat: repeat;*/
  border-radius: 0px 0px 10px 10px;
  padding: 7px;
}

.hanke .hanke_content_inner {
  padding-left: 5px;
}

.hanke .hanke_content_top {
  border: solid 1px #003366;
  border-bottom-width: 0px;
  background-color: #fbfbfb;
}

.hanke_content .yhteenveto_paneeli {
  width: 95%;
  margin-left: 15px;
}

.hanke_content .yhteenveto_paneeli h2 {
  margin-left: -15px;
}

.css_lomake_tag {
  border-radius: 5px 5px 5px 5px;
  padding: 3px;
  border: 1px solid black;
  /*width: 75px;*/
  display: inline-block;
  /*text-align: center;*/
}

.huomioteksti {
  border-radius: 5px 5px 5px 5px;
  padding: 4px;
  border: 1px solid black;
  display: inline-block;
  text-align: center;
  font-style: italic;
  font-weight: bold;
  background-color: #faffbd;
}

.css_info {
  border-radius: 5px 5px 5px 5px;
  padding: 10px;
  border: 1px solid #cbd3ff;
  /*border: 10px solid #dbf3ff;*/
  display: inline-block;
  text-align: left;
  color: black;
  background: #dbf3ff;
}

div.info-huomio {
  border-radius: 5px 5px 5px 5px;
  /*padding: 3px;*/
  /*border: 1px solid #ff8080;*/
  display: inline-block;
  text-align: left;
  font-weight: bold;
  /*background-color: #abb3bf;*/
}

div.info-tarkea {
  border-radius: 5px 5px 5px 5px;
  padding: 5px;
  /*border: 1px solid #ff8080;*/
  /*border: 2px solid #727dfe;*/
  display: inline-block;
  text-align: left;
  font-weight: bold;
  /*background-color: #A9CCE3;*/
  background-color: #f0f0f0;
  color: #dd0000;
}

.css_kevyt_korostus_bg {
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  padding: 5px;
}

.css_info_peilikentta {
  background-color: #dbf3ff !important;
}

.info_admintp_text {
  color: #DB0000;
}

span.file_info {
  padding: 30px 0px 20px;
  display: inline-block;
}

.file_droparea {
  min-height: 160px;
  display: table;
  align-items: center;
  text-align: center;
  position: relative;
  width: 100%;
  margin: 0px auto;
}

.divTable {
  display: table !important;
  width: 100%;
}

.divTableBody {
  display: table-row-group !important;
}

.divTableRow {
  display: table-row !important;
}

.divTableCell, .divTableHead {
  /*border: 1px solid #999999;*/
  display: table-cell !important;
  /*width: 50%;*/
  vertical-align: top;
  padding-left: 10px;
}

.divTableCell40 {
  /*border: 1px solid #999999;*/
  display: table-cell !important;
  width: 40%;
  vertical-align: top;
}

/*.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
}*/
/*.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
	font-weight: bold;
}
.divTableFoot {
	background-color: #EEE;
	display: table-footer-group;
	font-weight: bold;
}*/
.chat-container {
  border: 2px solid #dedede;
  background-color: #f1f1f1;
  border-radius: 5px;
  padding: 5px;
  margin: 5px 0;
  overflow-y: scroll;
  max-height: 400px !important;
}

.chat-container::after {
  content: "";
  clear: both;
  display: table;
}

.chat-bubble {
  border: 2px solid #dedede;
  background-color: #f1f1f1;
  border-radius: 5px;
  padding: 5px;
  margin: 5px 0;
}

.chat-bubble::after {
  content: "";
  clear: both;
  display: table;
}

.chat-bubble .chat-user {
  font-size: smaller;
}

/**************************
* Menut                   *
***************************/
/*Perusmenu*/
nav.menubar {
  background-color: #005284;
  border-radius: 5px;
  padding: 3px;
  position: relative;
}

nav.menubar a {
  color: white;
  display: inline-block;
  font-weight: bold;
  cursor: pointer;
  /*margin: 1px 5px 1px 5px;*/
  margin: 0px;
  padding: 2px 5px 2px 5px;
  border-radius: 5px;
  text-decoration: none;
}

nav.menubar a.selected, nav.menubar a:hover {
  background-color: white;
  color: #005284;
}

nav a.css_menu_nakyy_vain_admin:hover,
nav a.css_menu_nakyy_vain_admin_tp:hover,
nav a.css_menu_ei_nay_hakijalle:hover {
  /*Katso imoortant luokka*/
  background-color: #fcd49f !important;
  color: #000 !important;
}

nav a.css_menu_nakyy_vain_admin:hover {
  background-color: #fcc0ff !important;
}

/*Päämenu*/
nav.main_menu {
  font-family: Cabin, sans-serif;
  margin-left: 0%;
  margin-right: 0%;
  margin-top: 0px;
  background: linear-gradient(to bottom, #3777A0, #013F69);
  padding: 0px;
  padding-left: 16px;
}

nav.main_menu a {
  font-size: 14px;
  text-transform: uppercase;
  margin-top: 7px;
  margin-bottom: 7px;
  padding: 4px 10px 4px 10px;
}

nav ul {
  display: block;
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

nav ul li {
  display: inline-block;
}

nav ul.vertical li {
  display: block;
}

nav.menubar li {
  /*margin: 1px 5px 1px 5px;*/
  margin: 1px;
}

nav ul.submenu {
  font-family: "Open Sans", "Calibri", "Tahoma", "Arial", "sans-serif";
  position: absolute;
  border: 1px solid black;
  font-weight: normal;
  text-align: left;
  background-color: #fff;
  border: solid 1px #222;
  margin-left: -5px;
  margin-top: -2px;
  margin-bottom: -2px;
  padding: 1px;
  z-index: 2001;
  /*999*/
}

/*ikonimenut toiseen laitaan auki*/
.topnav nav.css_iconit_menu ul.submenu {
  margin-left: 25px !important;
  transform: translate(-90%);
  max-width: 250px;
  width: 200px;
}

nav ul.submenu > li {
  display: block;
}

nav ul.submenu a {
  text-align: left;
  color: #115599;
  font-weight: normal;
  text-transform: none;
  display: block;
  margin: 0px;
  padding: 6px 20px 6px 2px;
  border-radius: 0px;
  text-decoration: none;
}

nav ul.submenu a:hover {
  background-color: #115599;
  color: #fff;
}

div.login_menu {
  margin-left: 0%;
  margin-right: 0%;
  margin-top: 0px;
  /*background-color: #EDEDED;*/
  padding: 0px;
  padding-left: 16px;
  /*border: solid 1px #000000; */
  /*border-bottom: solid 1px #999999; 	border-top: solid 1px #999999;*/
  /*border: solid 1px #999999;
  border-radius: 5px 5px 5px 5px;*/
}

div.login_menu ul {
  display: table;
  /*list-style-type: none;*/
  padding: 0px;
  margin: 0px;
  /*margin-bottom: 0px;
  	padding-top: 0px;
  	padding-bottom: 0px;*/
  text-align: left;
  /*border: 0px;*/
  width: 100%;
}

div.login_menu ul li {
  margin: 0px;
  padding: 0px;
  display: inline;
}

div.login_menu ul a {
  font-size: 110%;
  display: inline-block;
  margin-top: 7px;
  padding: 2px;
  padding-left: 5px;
  padding-right: 5px;
  text-decoration: none;
  color: grey;
  margin-right: 15px;
  border-bottom: none;
  /*border: solid 2px #005284;
  		border-top: none;*/
}

div.login_menu ul a.selected, div.login_menu ul a:hover {
  /*color: black;
  			border-bottom: solid 1px black;*/
  color: #005284;
  border-bottom: solid 1px #005284;
}

/* Login page wrapper: centered with comfortable side gutters. The
   1200px cap keeps long welcome text and long grant lists readable
   on wide monitors. */
.css_login_page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

.css_login_page_title {
  text-align: center;
  margin-bottom: 24px;
}

/* Page-level responsive layout.
   Desktop (>=900px): two independent columns.
     Left  (flexible width): welcome card, then grant calls.
     Right (fixed width)   : login card, then support links.
   Each column is a separate flex stack so a tall left-column card
   does not push the right-column card down to match — boxes in
   each column sit directly under the previous one.

   Mobile (default): single column. The .css_login_col wrappers
   become layout-invisible (display: contents) so the four items
   reorder freely via `order` — login first (primary action),
   then welcome, grants, support. */
.css_login_grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 5px;
  /* room for card shadow */
  /* Cards inside the login grid get their spacing from the
     flex `gap` only. The global `.hakemusosio { margin-bottom:
     20px }` would otherwise stack on top of the gap and make
     the vertical spacing between cards twice the horizontal
     spacing between columns. */
}
.css_login_grid .hakemusosio {
  margin-bottom: 0;
}

.css_login_col {
  display: contents;
}

.css_grid_login {
  order: 1;
}

.css_grid_welcome {
  order: 2;
}

.css_grid_grants {
  order: 3;
}

.css_grid_support {
  order: 4;
}

@media (min-width: 900px) {
  .css_login_grid {
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
  }

  .css_login_col {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  /* DOM order is right-then-left (so the login section comes
     first in the source for mobile readers); `order` flips
     the visual sequence on desktop so the welcome / grants
     column sits on the actual left. */
  .css_login_col_left {
    order: 1;
    flex: 1 1 0;
    min-width: 0;
  }

  .css_login_col_right {
    order: 2;
    flex: 0 0 480px;
    max-width: 480px;
  }
}
/* Login card: fills its grid cell on desktop, full width of the page
   container on mobile. Inner content is centered; the heading
   overrides are needed because the global h2/h3 rules force
   text-align: left. */
.css_login_box {
  text-align: center;
}
.css_login_box h2, .css_login_box h2 span, .css_login_box h3, .css_login_box h3 span {
  text-align: center;
}

/* Email/password form: labels stacked above their inputs, full-width
   inputs constrained to a comfortable reading width. */
.css_login_form {
  max-width: 320px;
  margin: 0 auto;
}

.css_login_field {
  margin-bottom: 10px;
}
.css_login_field label {
  display: block;
  margin-bottom: 3px;
  text-align: left;
}

/* Row above the password input that holds the label on the left and
   the "Forgot" link on the right, each aligned with the input's
   matching edge. */
.css_login_field_header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 3px;
}
.css_login_field_header label {
  margin-bottom: 0;
}

/* Secondary link sitting next to a field label (Forgot, Register). */
.css_login_field_link {
  font-size: 90%;
}

.css_login_input {
  width: 100%;
  box-sizing: border-box;
}

/* "or" separator between email/password login and an alternative
   method. CSS draws horizontal rules on both sides of the word.
   The separator lives inside each alt-method panel as its first
   child so it appears / hides together with the method. */
.css_login_or_separator {
  display: flex;
  align-items: center;
  text-align: center;
  color: #666;
  font-size: 90%;
  margin: 0 0 8px;
}
.css_login_or_separator::before, .css_login_or_separator::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid #ccc;
}
.css_login_or_separator::before {
  margin-right: 10px;
}
.css_login_or_separator::after {
  margin-left: 10px;
}

/* Alternative login methods stacked vertically inside the (narrower)
   login card so each method is clearly readable on any screen.
   margin-top lifts the first method's "tai" away from the login
   form above; gap controls spacing between methods (so a second
   method's "tai" appears with the same breathing room). */
.css_login_alt_options {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 18px;
}

.css_login_alt_option {
  text-align: center;
  /* HelpLabelControl renders the heading inside its own panel;
     browsers give h2/h3 a default top-margin that "shows through"
     the wrapper and leaves a visible gap above the title. Kill
     the heading's top margin so spacing is controlled only by the
     "or" separator and the .css_login_alt_options gap. */
}
.css_login_alt_option h1, .css_login_alt_option h2, .css_login_alt_option h3, .css_login_alt_option h4, .css_login_alt_option h5, .css_login_alt_option h6 {
  margin-top: 0;
}

.css_login_alt_action {
  margin-top: 8px;
}

/* Footer area inside the login card holding the register link and
   the "forgot password?" link. Each link sits in its own <p> with
   inline font-weight:bold, matching the link styling in the
   support card. */
.css_login_box_footer {
  margin-top: 20px;
  padding-top: 12px;
  border-top: 1px solid #ccc;
  text-align: center;
  font-size: 95%;
}

/*****************************************************************
* Ylälaidan navigointipalkki (viestit, asetukset, ohje, logout)  *
*****************************************************************/
.topnav {
  /*font-size: 90%;*/
  /* Mihin tämä vaikuttaa? */
  color: Black;
}

.topnav a {
  color: Black;
}

.topnav > nav {
  float: right;
}

.topnav .topnav_icon {
  vertical-align: top;
  display: inline-block;
  width: 37px;
  height: 36px;
  margin-left: 2px;
}

.topnav_icon:hover {
  text-decoration: none !important;
}

/*.topnav .admin_asetukset {
	background: url('../images/admin-asetukset.png') no-repeat;
}

.topnav .admin_asetukset:hover {
	background: url('../images/admin-asetukset-hover.png') no-repeat;
}

.topnav .asetukset {
	background: url('../images/asetukset.png') no-repeat;
}
.topnav .asetukset:hover {
	background: url('../images/asetukset_hover.png') no-repeat;
}

.topnav .ohje {
	background: url('../images/ohje.png') no-repeat;
}
.topnav .ohje:hover {
	background: url('../images/ohje_hover.png') no-repeat;
}

.topnav .viestit {
	background: url('../images/viestit.png') no-repeat;
}
.topnav .viestit:hover {
	background: url('../images/viestit_hover.png') no-repeat;
}

.topnav .logout {
	background: url('../images/logout.png') no-repeat;
}
.topnav .logout:hover {
	background: url('../images/logout_hover.png') no-repeat;
}*/
/*.topnav .hakemus {
	background: url('../images/hakemus.png') no-repeat;
}
.topnav .hakemus:hover {
	background: url('../images/hakemus_hover.png') no-repeat;
}

.topnav .maksusuunnitelma {
	background: url('../images/maksusuunnitelma.png') no-repeat;
}
.topnav .maksusuunnitelma:hover {
	background: url('../images/maksusuunnitelma_hover.png') no-repeat;
}

.topnav .maksurivit {
	background: url('../images/maksurivit.png') no-repeat;
}
.topnav .maksurivit:hover {
	background: url('../images/maksurivit_hover.png') no-repeat;
}

.topnav .selvitys {
	background: url('../images/selvitys.png') no-repeat;
}
.topnav .selvitys:hover {
	background: url('../images/selvitys_hover.png') no-repeat;
}

.topnav .seuranta {
	background: url('../images/seuranta.png') no-repeat;
}
.topnav .seuranta:hover {
	background: url('../images/seuranta_hover.png') no-repeat;
}

.topnav .kasittely {
	background: url('../images/kasittely.png') no-repeat;
}
.topnav .kasittely:hover {
	background: url('../images/kasittely_hover.png') no-repeat;
}*/
/*****************************************************************
* Etusivun ikonit                                               *
*****************************************************************/
.css_dashboard_container {
  display: flex;
  flex-wrap: wrap;
  text-align: left;
  padding: 10px;
}

.css_dashboard_icon ~ .submenu {
  transform: translateY(-95%);
}

.css_dashboard_icon {
  width: 80px;
  height: 62px;
  float: left;
  margin-right: 15px;
  margin-bottom: 10px;
  text-decoration: none;
}

.css_dashboard_icon_last {
  width: 60px;
}

.css_dashboard_icon:hover {
  text-decoration: none !important;
}

.new_arrived {
  font-size: 115%;
  background-color: #ff8800;
  color: #ffffff;
  text-shadow: -1px 0 grey, 0 1px grey, 1px 0 #565656, 0 -1px grey;
  padding: 5px 6px 5px 6px;
  border-radius: 3px;
  white-space: nowrap;
  position: absolute;
  margin-top: -5px;
}

.new {
  font-size: 115%;
  background-color: #ff8800;
  color: #ffffff;
  padding: 5px 6px 5px 6px;
  border-radius: 3px;
  white-space: nowrap;
  margin-top: -5px;
}

/************
*  Ikonit   *
************/
svg.icon_yleisvari path {
  fill: #115599;
  stroke: #115599;
}

svg.icon_yleisvari:hover path, a:focus svg.icon_yleisvari path, span:focus svg.icon_yleisvari path {
  fill: #757575;
}

.submenu *:hover svg.icon_yleisvari path {
  fill: #757575;
}

.css_perus_icon svg.icon {
  display: inline-block;
  width: 32px;
  height: 34px;
  cursor: pointer;
  transition: fill 0.3s;
  z-index: -1;
}

.css_svg_red_fill svg path {
  fill: #dd0000;
}

.css_svg_yellow_fill svg path {
  fill: #FFE881;
}

.css_svg_white_fill svg path {
  fill: #FFFFFF;
}

svg.muokkaus path, svg.roskis path {
  transition: fill 0.3s;
}

svg.roskis {
  fill: #727272;
}

svg.roskis:hover path, a:focus svg.roskis path, span:focus svg.roskis path {
  fill: #dd0000;
}

svg.profile {
  fill: #727272 !important;
}

svg.comment {
  fill: #727272 !important;
  stroke: #727272 !important;
}

.css_comment_empty {
  background-color: #E9E9E9 !important;
}

.css_comment_nonempty {
  background-color: #94EE94;
  /* vihreä */
  /*OLD: #6BF404; #64E203; #C8FAB2-#CFFABD; #94EE94-#DFFADF;*/
  background-image: linear-gradient(to bottom, #94EE94, #DFFADF);
}

.css_comment_nonempty_others {
  background-color: #FFE881;
  /* keltainen */
  /*OLD: #F5E400; #F0E000; #FDF6A6-#FDF9BF; #FFE881-#FFFAE6;*/
  background-image: linear-gradient(to bottom, #FFE881, #FFFAE6);
}

.css_comment_nonempty_current {
  background-color: #94EE94;
  /* vihreä */
  /*OLD: #6BF404; #64E203; #C8FAB2-#CFFABD; #94EE94-#DFFADF;*/
  background-image: linear-gradient(to bottom, #94EE94, #DFFADF);
}

.css_comment_nonempty_mixed {
  background-color: #FFE881;
  /* puoliksi keltainen + puoliksi vihreä */
  /*OLD: #F5E400;#F0E000;*/
  background-image: linear-gradient(to right, #FFE881 0%, #FFFAE6 50%, #DFFADF 50%, #94EE94 100%);
}

.css_toggle_icon svg.icon {
  width: 16px;
  height: 17px;
}

.css_titlebar_settings_icon svg.icon path {
  display: inline-block;
  width: 24px;
  height: 24px;
  fill: #FFFFFF !important;
  cursor: pointer;
  transition: fill 0.3s;
  z-index: -1;
}

/*svg.jakoavain {
	fill: #115599;
}
	svg.jakoavain:hover, svg.jakoavain:focus {
		fill: #757575;
	}

svg.ratas {
	fill: #115599;
	stroke: #115599;
}
	svg.ratas:hover, svg.ratas:focus {
		fill: #757575;
		stroke: #757575;
	}

svg.kirje {
	fill: #115599;
	stroke: #115599;
}
	svg.kirje:hover, svg.kirje:focus {
		fill: #757575;
	}

svg.logout {
	fill: #115599;
	stroke: #115599;
}
	svg.logout:hover, svg.logout:focus {
		fill: #757575;
	}

svg.ohje {
	fill: #115599;
	stroke: #115599;
}
	svg.ohje:hover, svg.ohje:focus {
		fill: #757575;
	}

svg.checkmark {
	fill: #115599;
	stroke: #115599;
}

	svg.checkmark:hover, svg.checkmark:focus {
		fill: #757575;
	}*/
.css_icon_0_5em .icon {
  height: 0.5em;
  width: 0.5em;
}

.css_icon_1em .icon {
  height: 1em;
  width: 1em;
}

.css_icon_1_5em .icon {
  height: 1.5em;
  width: 1.5em;
}

.css_icon_2em .icon {
  height: 2em;
  width: 2em;
}

.css_icon_2_5em .icon {
  height: 2.5em;
  width: 2.5em;
}

.css_vaara_musta .tausta {
  fill: #FFE881 !important;
  /*keltainen*/
  /*OLD: yellow*/
}

.css_vaara_musta .huuto {
  fill: #666666 !important;
  /*musta*/
  /*OLD: black*/
}

.css_vaara_musta .reuna {
  fill: #666666 !important;
  /*musta*/
  /*OLD: black*/
}

.css_vaara_keltainen .tausta {
  fill: #FFE881 !important;
  /*keltainen*/
  /*OLD: yellow*/
}

.css_vaara_keltainen .huuto {
  fill: #FF4D4D !important;
  /*punainen*/
  /*OLD: red*/
}

.css_vaara_keltainen .reuna {
  fill: #FF4D4D !important;
  /*punainen*/
  /*OLD: red*/
}

/*********
* Taulut *
*********/
table.fixed {
  table-layout: fixed;
}

table.fixed td {
  overflow: hidden;
}

/*datatablelle monirivinen teksti otsikoihin*/
.monirivi_teksti_otsikkoon th {
  white-space: unset !important;
  vertical-align: bottom;
}

.tietovarantoliittymaTaulu tbody tr td .no_overflow {
  max-height: 60px !important;
  max-width: 400px;
  overflow: auto;
  /*overflow: scroll;*/
  /*white-space: pre-line;*/
}

.tietovarantoliittymaTaulu tbody tr td.Funding, th.Funding {
  border-left: 3px double black;
}

.rivin_data_on_jo_lahetetty td {
  background-color: lightgreen;
}

span.rivin_data_on_jo_lahetetty {
  border-radius: 10px;
  padding: 5px;
  background-color: lightgreen;
}

.sisenna_1 {
  margin-left: 20px;
}

.sisenna_2 {
  margin-left: 40px;
}

.sisenna_3 {
  margin-left: 60px;
}

.sisenna_4 {
  margin-left: 80px;
}

.sisenna_5 {
  margin-left: 100px;
}

table.datatable {
  border-collapse: separate !important;
}

table.datatable td {
  padding-top: 4px;
  padding-left: 4px;
  padding-right: 10px;
}

table.datatable th {
  padding: 4px;
  padding-right: 10px;
}

table.datatable > tr:first-child > *,
table.datatable > thead > tr > * {
  border-top: solid 1px #F0F0F0;
  border-bottom: solid 1px #CECECE;
  border-left: solid 1px #DFDFDF;
  /*background-color: #F0F0F0;*/
  background: linear-gradient(to bottom, #FFFFFF, #F0F0F0);
  /*background: linear-gradient(to bottom, rgba(255,255,255, 0), rgba(10,10,10, 0.06));*/
  white-space: nowrap;
  overflow: hidden;
}

table.datatable > tr:first-child > *:last-child,
table.datatable thead > tr > *:last-child {
  border-right: solid 1px #DFDFDF;
}

table.datatable > tfoot {
  font-weight: bold;
}

table.datatable th.nohborder,
table.datatable td.noborder {
  border-left: none !important;
  border-right: none !important;
}

table.datatable tr.header_row th {
  cursor: pointer;
}

table.datatable tr.header_row th:hover {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0.17));
  overflow: visible;
}

table.datatable tr.header_row.acui_top-sticky th:hover {
  /*background-color: #D0D0D0;*/
  /*Ei läpinäkyviä otsikoita top sticky headereille*/
  background: linear-gradient(to bottom, #F0F0F0, #D0D0D0);
  overflow: visible;
}

/* Sortable table header: wraps a <button> so keyboard/screen readers work,
   while the button fills the whole cell so the entire pointer-cursor area
   (from `table.datatable tr.header_row th`) is actually clickable. The
   padding from `table.datatable th` is moved onto the button. */
th.css_sortable_header {
  padding: 0;
}

th.css_sortable_header > button {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 4px 10px 4px 4px;
  background: none;
  border: none;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: inherit;
}

.css_sort_indicator {
  margin-left: 4px;
  vertical-align: middle;
}

table.layout td, table[role=presentation] td {
  padding-right: 10px;
}

table.layout th, table[role=presentation] th {
  padding-right: 15px;
}

tr.noborder > td {
  border: none;
}

tr.topborder > td {
  border: none;
  border-top: 1px solid #F0F0F0;
}

.row, .rowalt {
  color: #000000;
  font-weight: normal;
  text-align: left;
  vertical-align: top;
}

.row:hover, .rowalt:hover {
  background-color: lightgoldenrodyellow;
}

.rowalt {
  background-color: rgba(0, 0, 0, 0.03);
}

.rowalt > td {
  border-top: 1px solid #DEDEDE;
  border-bottom: 1px solid #DEDEDE;
}

.rowalt_top > td {
  border-bottom: none !important;
}

.rowalt_bottom > td {
  border-top: none !important;
}

.altRowColorTemplate {
  color: #000000;
  font-weight: normal;
  text-align: left;
  vertical-align: top;
}

.altRowColorTemplate:nth-child(odd) {
  /*background-color: #f8f8f8;*/
  background-color: rgba(0, 0, 0, 0.03);
  border-top: 1px solid #DEDEDE;
  border-bottom: 1px solid #DEDEDE;
}

.altRowColorTemplate:nth-child(even) {
  /*background-color: #FFFFFF;*/
}

.altRowColorTemplate:not(.altRowColorTemplate_no_hover):hover {
  background-color: lightgoldenrodyellow;
}

.rowedit td {
  color: #000000;
  font-weight: normal;
  text-align: left;
  vertical-align: top;
  padding-right: 8px;
}

.rowerror {
  color: #000000;
  background-color: #FFCCCC;
  font-weight: normal;
  text-align: left;
  vertical-align: top;
}

/*.row:hover, .rowerror:hover, .rowalt:hover, .rowselected { border-collapse:separate; border:1px solid #666666;}*/
.row_footer {
  color: #000000;
  font-size: 90%;
  font-weight: normal;
  vertical-align: top;
}

table.datatable tr.footer_row td {
  border-bottom: solid 1px #F0F0F0;
  border-top: solid 1px #CECECE;
  background-color: #013F69;
  background: linear-gradient(to bottom, #3777A0, #013F69);
  /*opacity: 0.5;*/
  padding-top: 4px;
  padding-bottom: 4px;
  /*padding-right: 10px;*/
  font-weight: bold;
  color: #FFFFFF;
}

.thin_row td {
  padding-bottom: 0px !important;
  padding-top: 0px !important;
}

/****************
* Popup-näkymät *
*****************/
.popup {
  z-index: 2000;
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.4);
  position: absolute !important;
  padding: 10px;
  border-radius: 5px 5px 5px 5px;
  background-color: white;
  border: 1px solid black;
}

.popup_keskelle {
  transform: translateX(-50%) translateY(-50%);
  /*keskelle*/
}

.popup_tooltip {
  z-index: 12000;
  display: table;
  font-family: Verdana, Arial;
  font-size: 12px;
  position: fixed;
  height: auto;
  /*border-style:solid;  	border-width:2px;	 	border-color: #88AAEE; 	color:Black;  	background-color:White; */
  background-color: #eeeeee;
  /*sama kuin help_rounded luokassa*/
  /*background-color: #88AAEE;*/
  color: Black;
  padding: 8px;
  border: solid 2px #8e8e8e;
  /*tarkista .acui_tooltip tyylin leveys jos padding tai border muuttuu*/
  /*border: solid 2px #003366;*/
  border-radius: 10px;
  white-space: pre-line;
}

.popup_tooltip_hidden {
  display: none;
  position: fixed;
  width: 0px;
  height: 0px;
}

.popup_tooltip_drag_handle_left {
  display: table-cell;
  min-width: 20px;
  background-color: #bebebe;
  cursor: all-scroll;
}

.popup_tooltip_drag_handle_top {
  display: table-cell;
  height: 10px;
  background: linear-gradient(to right, #bebebe, transparent, transparent, transparent, transparent, transparent);
  cursor: all-scroll;
}

.popup_capslock {
  position: fixed;
  color: white;
  display: none;
  z-index: 9999;
  background-color: yellow;
  color: black;
}

/*BEGIN Tooltips*/
.acui_tooltip {
  position: fixed;
  display: none !important;
  max-width: calc(130px + 10vw - 32px) !important;
  /* ([50vw @ 320px] - (padding+border)*2 - 10px(from js)) + (10vw - [10vw @ 320px])  */
  text-align: left;
  overflow-wrap: break-word;
}

.acui_tooltip.wide {
  width: 300px;
}

.acui_tooltip.is_open {
  display: inline-block !important;
}

/*Horizontally positioned. */
/*Vertically positioned.*/
/*No dissapearing when moving cursor to tooltip*/
.acui_tooltip::before, .acui_tooltip::after {
  content: "";
  position: absolute;
  background-color: transparent;
}

.acui_tooltip::before {
  width: 12px;
  height: calc(100% + 12px + 15px);
  bottom: -10px;
  display: none;
}

.acui_tooltip.tooltip_left::before {
  left: 100%;
  display: block;
}

.acui_tooltip.tooltip_right::before {
  right: 100%;
  display: block;
}

.acui_tooltip.tooltip_bottom::after {
  /*::after used for placing invisible bar above tooltip  */
  height: 12px;
  width: 100%;
  left: 0px;
  right: auto;
  top: auto;
  bottom: 100%;
}

/*
.acui_tooltip.tooltip_left::after { 
	width: 30px; 
	left:calc(100% - 30px + 2px);    
}

.acui_tooltip.tooltip_right::after {
	width: 30px;     
	left: calc(-2px);   
}*/
/*END Tooltips*/
/*BEGIN ContextHelp popups*/
.acui_cthlp {
  display: block;
  position: fixed;
  height: auto;
  text-align: initial;
  white-space: pre-line;
  background-color: #FFFFAA;
  color: #000022;
  padding: 10px;
  border: solid 1px #444444;
  z-index: 9999;
  font-weight: normal;
  font-size: 15px;
  /*DefaultFontSize*/
  width: 90vw;
  max-width: 500px;
  /*overflow: auto;*/
}

.acui_cthlp > .acui_cthlp_content {
  width: 100%;
  height: auto;
  max-height: 40vw;
  overflow: auto;
}

.acui_cthlp_edit textarea {
  height: auto;
  white-space: pre-line;
  width: 90%;
  background-color: #FFFFAA;
  color: #000022;
  padding: 10px;
  border: solid 1px #444444;
}

/*Add invisible bars to prevent dissapearing when moving cursor to popup. See ContextHelp.js code before making changes*/
.acui_cthlp::after, .acui_cthlp::before {
  content: "";
  position: absolute;
  background-color: transparent;
  display: block;
}

.acui_cthlp::before {
  width: 11px;
  /* hspace(js) + 1 extra  */
  height: calc(100% + 50px);
  /* 100% + vspace(js)*2 + icon_overlap*2   */
  top: -25px;
  bottom: auto;
  display: none;
}

.acui_cthlp.cthlp_left::before {
  left: 100%;
  display: block;
}

.acui_cthlp.cthlp_right::before {
  right: 100%;
  display: block;
}

.acui_cthlp::after {
  /*::after used for placing invisible bar above popup  */
  height: 16px;
  /* vspace(js) + 1 + 10 extra */
  width: calc(100% + 62px);
  /* 100% + (hspace(js)+1)*2 + icon_overlap*2 */
  left: -31px;
  /* 0 - hspace/2 - icon_overlap */
  right: auto;
}

.acui_cthlp.cthlp_bottom::after {
  top: -10px;
  bottom: auto;
}

.acui_cthlp.cthlp_top::after {
  top: auto;
  bottom: -10px;
}

/*END ContextHelp popups*/
/*BEGIN Modaali popup*/
.modal {
  display: none;
}

.modal.is-open {
  display: block;
}

.modal_overlay {
  position: fixed;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 22000;
  background: rgba(0, 0, 0, 0.5);
}

.modal [role=dialog] {
  display: block;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 450px;
  max-width: 90vw;
  z-index: 22001;
  /*min-height: 100px;*/
  /* padding: 10px;
  margin: 0px;
  background-color: #ccddee;
  border: solid 2px black;*/
}

.modal [role=dialog].error {
  border: 3px solid #ee0000;
}

.modal [role=dialog] .modal_content {
  white-space: pre-line;
  max-width: calc(100% - 40px);
}

.modal [role=dialog] > h2 {
  margin: 0px;
  padding: 0px;
  max-width: calc(100% - 40px);
}

/*END Modaali popup*/
/*BEGIN AIChat popup*/
.css_aichat {
  display: block;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 2000;
}

.css_aichat .popup {
  display: flex;
  /*visibility: hidden;*/
  flex-direction: column;
  bottom: 50px;
  right: 0px;
  width: max(35vw, 300px);
  height: min(80vh, 450px);
  padding: 0px;
}

.css_aichat > button.css_aichat_open {
  position: absolute;
  bottom: 0px;
  right: 0px;
  padding: 12px 20px !important;
  border-radius: 20px;
  cursor: pointer;
  font-weight: bold;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.css_aichat > button.css_aichat_open:hover {
  transform: scale(1.08);
}

@supports (clip-path: polygon(0 0, 100% 0, 50% 100%)) {
  .css_aichat > button.css_aichat_open::after {
    /*Puhekuplan "häntä"*/
    content: "";
    position: absolute;
    bottom: -10px;
    right: 20px;
    width: 16px;
    height: 10px;
    margin: 0px;
    background-color: var(--button-border);
    clip-path: polygon(0 0, 100% 0, 30% 100%);
  }
}
/*END AIChat popup*/
.language_menu {
  height: auto;
  padding: 0px;
  text-align: left;
  font-size: 100%;
  display: none;
  position: absolute;
  top: -5px;
}

.language_menu a {
  width: 100%;
  padding: 0px;
  text-align: left;
  color: #115599;
}

.language_menu td {
  padding: 0px;
  padding-top: 1px;
  padding-bottom: 2px;
}

.language_menu tr:hover {
  background-color: #013F69;
}

.language_menu tr:hover a {
  text-decoration: none;
  color: #fff;
}

/*
.hover:hover
{
	background-color: #aaaaaa;
}
*/
/* container */
.acui_hover_popup {
  position: relative;
  display: inline-block;
}

.acui_hover_popup .acui_hover_sisalto {
  display: none;
  /* Position the tooltip */
  position: absolute;
  z-index: 50;
}

/* lapsi hover sisältö näkyviin jos hoverataan containerin päällä */
.acui_hover_popup:hover .acui_hover_sisalto, .acui_hover_popup:focus .acui_hover_sisalto {
  display: inline-block;
  top: 0px;
  left: 90%;
}

/* lapsi hover sisältö piiloon jos input lapsessa on focus ja hover sisältö on sen sisarus */
.acui_hover_popup input:focus ~ .acui_hover_sisalto, .acui_hover_popup textarea:focus ~ .acui_hover_sisalto {
  display: none !important;
}

/* lapsi hover sisältö näkyviin jos hoverataan containerin päällä */
.acui_hover_ala_oikea {
  display: inline-block;
  top: 90% !important;
  left: 90% !important;
}

.acui_hover_ala {
  display: inline-block;
  top: 90% !important;
  left: 50%;
  transform: translateX(-50%);
  /*keskelle*/
}

.acui_hover_vasen {
  left: 10% !important;
  transform: translateX(-100%);
  /*oikealle*/
}

/*tyylimäärite hover sisällölle, erotellaan rakenteellisesta css:tä*/
.css_hover_sisalto {
  background-color: white;
  border: 2px solid lightgrey;
  border-radius: 10px;
  padding: 10px;
  text-align: left;
}

/*********************************************
Arvosanat ja kokouskäsittelyn vaiheet        *
**********************************************/
.arvosana {
  display: inline-block;
  width: 28px;
  height: 22px;
  text-align: center;
  padding: 1px;
  font-size: 15px;
  font-weight: bolder;
  color: black;
  /*letter-spacing:1px;*/
  overflow: visible;
}

.arvosana_selector ul {
  list-style: none;
  display: table;
  padding: 7px;
  margin: 0px;
  border: solid 1px #999999;
  background-color: #eeeeee;
  position: absolute;
  z-index: 999;
}

.arvosana_selector li {
  display: table;
  padding: 0px;
  margin-bottom: 3px;
  height: 26px;
}

.arvosana_selector .arvosana {
  border: 1px dotted #aaaaaa;
  vertical-align: top;
}

ul.kkvaihe {
  display: table;
  list-style-type: none;
  margin: 0px;
  padding: 2px;
  position: absolute;
  z-index: 999;
  border: dotted 1px #666666;
  background-color: #eeeeee;
}

ul.kkvaihe li {
  display: block;
  width: 36px;
  height: 22px;
  padding: 0px;
  margin: 0px;
  white-space: nowrap;
  background-repeat: no-repeat;
  color: black;
  text-align: center;
  min-width: 46px;
  min-height: 29px;
  align-content: center;
}

/*
input.kkvaihe, input.kkvaihe:hover {
	color: transparent;
	display: block;
	width: 36px;
	height: 22px;
	padding: 0px;
	margin: 0px;
	white-space: nowrap;
	border: 0px;
	background: none;
	background-repeat: no-repeat;
}

input.kkvaihe[value=""], .kkvaihe_tyhja {
	background-image: url("../images/kk_tyhja.gif");
}

input.kkvaihe[value="+"], .kkvaihe_plus {
	background-image: url("../images/kk_plus.gif");
}

input.kkvaihe[value="+/-"], .kkvaihe_plusminus {
	background-image: url("../images/kk_plus_minus.gif");
}

input.kkvaihe[value="-"], .kkvaihe_minus {
	background-image: url("../images/kk_minus.gif");
}

input.kkvaihe[value=""]:hover, .kkvaihe_tyhja:hover {
	background-image: url("../images/kk_tyhja_hover.gif");
}

input.kkvaihe[value="+"]:hover, .kkvaihe_plus:hover {
	background-image: url("../images/kk_plus_hover.gif");
}

input.kkvaihe[value="+/-"]:hover, .kkvaihe_plusminus:hover {
	background-image: url("../images/kk_plus_minus_hover.gif");
}

input.kkvaihe[value="-"]:hover, .kkvaihe_minus:hover {
	background-image: url("../images/kk_minus_hover.gif");
}
*/
button.kkvaihe {
  border: 2px;
  border-style: solid;
  border-width: 2px;
  color: black;
  min-height: 31px;
  min-width: 52px;
}

button.kkvaihe:hover {
  border: 2px;
  border-style: solid;
  border-width: 2px;
  color: white !important;
  min-height: 31px;
}

button.kkvaihe::after, button.kkvaihe:hover::after {
  color: transparent;
}

button.kkvaihe::before {
  color: black;
}

button.kkvaihe:hover::before {
  color: white;
}

button.kkvaihe[value=""], .kkvaihe_tyhja {
  background-image: linear-gradient(to bottom, #949494, #DFDFDF);
  /*harmaa*/
}

button.kkvaihe[value="+"], .kkvaihe_plus {
  background-image: linear-gradient(to bottom, #94EE94, #DFFADF);
  /*vihreä*/
}

button.kkvaihe[value="+/-"], .kkvaihe_plusminus {
  background-image: linear-gradient(to bottom, #FFE881, #FFFAE6);
  /*keltainen*/
}

button.kkvaihe[value="-"], .kkvaihe_minus {
  background-image: linear-gradient(to bottom, #EE9494, #FADFDF);
  /*punainen*/
}

button.kkvaihe[value=""]:hover, .kkvaihe_tyhja:hover {
  background-image: linear-gradient(to bottom, #949494, #DFDFDF);
  /*harmaa*/
}

button.kkvaihe[value="+"]:hover, .kkvaihe_plus:hover {
  background-image: linear-gradient(to bottom, #94EE94, #DFFADF);
  /*vihreä*/
}

button.kkvaihe[value="+/-"]:hover, .kkvaihe_plusminus:hover {
  background-image: linear-gradient(to bottom, #FFE881, #FFFAE6);
  /*keltainen*/
}

button.kkvaihe[value="-"]:hover, .kkvaihe_minus:hover {
  background-image: linear-gradient(to bottom, #EE9494, #FADFDF);
  /*punainen*/
}

.kk_popup {
  position: absolute;
  background-color: White;
  z-index: 100;
  width: 36px;
  border: 1px solid #BBBBBB;
  margin-left: -3px;
}

.kk_popup td {
  padding: 1px 0px 1px 0px !important;
}

/************
* Viestipuu *
************/
ul.message_tree {
  padding: 0px;
  margin: 0px;
}

li.message_node .collapse_button {
  display: none;
}

li.message_node .collapse_button.collapsed {
  background-image: url("../images/expand.gif") !important;
}

li.message_node .collapse_button.collapsed:hover {
  background-image: url("../images/expand_hover.gif") !important;
}

li.message_node {
  list-style-type: none;
  margin: 0px;
  margin-left: 18px;
}

ul.message_rootnode {
  margin-bottom: 15px;
  margin-left: 0px;
  margin-right: 10px;
  position: relative;
}

.message_rootnode.collapsed .message_node {
  position: absolute;
  top: 0px;
}

.message_rootnode.collapsed .message_node .message_content {
  max-height: 90px;
  overflow: hidden;
}

/*Näytetään varjo viestiketjun sisältä niin sinne jääneet uudet viestit näkyy */
.message_rootnode.collapsed .message_new {
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.4), 10px -10px 2px #ffaf47;
}

/*Päällimmänen viesti näytetään normaalisti*/
.message_rootnode.collapsed .message_node:last-child .message_new {
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.4);
}

li.message_node:last-child {
  position: relative !important;
  max-height: none !important;
}

li.message_node:last-child .message_content {
  position: relative !important;
  max-height: none !important;
  max-height: none !important;
}

li.message_node:last-child .collapse_button {
  display: block !important;
}

.message_content {
  width: 100%;
  /*vertical-align: top;*/
  background-color: #f0f0f0;
  padding: 4px;
  margin-bottom: 3px;
  border: 1px solid black;
  border-radius: 5px;
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.4);
  box-sizing: border-box;
}

.message_bg_office {
  background-color: #D5E5F5;
  /*#bbddff, #ccddee*/
}

.message_bg_applicant {
  background-color: #fff0b1;
  /*#ffeace; */
}

.message_content_right {
  width: 75%;
  /*vertical-align: top;*/
  padding: 4px;
  margin-bottom: 3px;
  margin-left: 70px;
  border: 1px solid black;
  border-radius: 5px;
  float: right;
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.4);
}

.message_content_left {
  width: 75%;
  /*vertical-align: top;*/
  padding: 4px;
  margin-bottom: 3px;
  margin-right: 70px;
  border: 1px solid black;
  border-radius: 5px;
  float: left;
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.4);
}

.message_new {
  border: 5px solid #ffaf47;
  background-color: #ffeace;
  /*#fff0b1; #F5F5D0;*/
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.4);
}

.message_important {
  border: 5px solid red;
  /*background-color: #ffeace;*/
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.4);
}

.message_content * {
  /*vertical-align: top;*/
}

.message_rootnode_content {
  background-color: #CCDDEE;
}

div.message_text {
  margin-right: 10px;
  text-align: left;
}

div.message_info {
  font-size: 80%;
}

.add_viesti {
  color: #1B2EDD;
  text-shadow: #CCC 2px 2px 2px;
}

.add_viesti:hover {
  color: #FFF;
  text-shadow: #000 2px 2px 2px;
  cursor: pointer;
  text-decoration: none;
}

.message_grid {
  display: grid;
  grid-template-columns: min-content auto;
}

.message_grid > div {
  padding: 5px;
}

.message_grid > .msg_img {
  grid-row: 1/3;
  padding-left: 0px;
}

.message_grid > .msg_attachment {
  grid-row: 1/4;
  padding-left: 0px;
}

.message_grid > .msg_functions {
  grid-column: 1/3;
}

/*Viestit sivun hae lisää viestejä napit*/
.amt_flex_row {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: space-between;
}

.amt_flex_row input:first-child {
  flex: 1 190px;
}

.amt_flex_row input {
  flex: 1 50px;
  margin: 5px;
}

/***********************
	Tapahtumaloki
**********************/
.css_tapahtumaloki_flex {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: space-between;
  box-sizing: border-box;
}

/* > div --vain ensimmäinen div */
.css_tapahtumaloki_flex > div {
  flex: 1;
  margin: 10px;
  text-align: left;
  white-space: nowrap;
}

/************************
/*  TABLE EDITOR (AJAX) *
*************************/
.table_editor {
  clear: both;
}

/*.table_editor table {

	overflow:hidden;
	border-collapse:separate; 
	border-spacing: 0px;
}*/
/*.table_editor table td {
	/*white-space:nowrap;*
	overflow:hidden;
}*/
/*.table_editor tbody tr:hover {
	background-color:#eeeeee;
}*/
.table_editor .data input, .table_editor .data textarea, .table_editor .data select {
  /*width: 95%;*/
  /*width: calc(100% - 20px);*/
  /*float: left;*/
}

.table_editor .data input.none, .table_editor .data textarea.none, .table_editor .data select.none {
  /*width: 95%;*/
  /*width: calc(100% - 8px);*/
  /*float: left;*/
}

.table_editor .boolean {
  /*width: auto !important;*/
  /*float:left;*/
}

.table_editor .not_valid input, .table_editor .not_valid textarea, .table_editor .not_valid select {
  background-color: #FCDADA;
}

.table_editor .data img {
  visibility: hidden;
}

.table_editor .not_valid img {
  visibility: visible !important;
}

.table_editor .multiline_len {
  visibility: hidden;
  font-size: 11px;
  color: #999999;
  clear: both;
  display: block;
  height: 10px;
}

.table_editor .not_valid .maxlen {
  color: #dd0000;
}

/************************
* Allekirjoitus näkymä  *  
 ***********************/
.allekirjoitus_table tr {
  height: 25px;
}

.allekirjoitus_table td {
  padding: 4px;
}

.allekirjoitus_table tr td:first-child {
  font-weight: bold;
  text-align: right;
}

.allekirjoitus_table table tr td:first-child {
  font-weight: unset;
  text-align: unset;
}

.ak_tila_allekirjoitettu {
  color: #008500;
  font-weight: bold;
}

.ak_tila_puuttuu {
  color: #EB0000;
  font-weight: bold;
}

/******************
* Tiedotepaneelit *
*******************/
.css_tiedote {
  position: relative;
  text-align: left;
  width: 100%;
  overflow: hidden;
  overflow-style: initial;
  margin-bottom: 2px;
}

.css_tiedote_fader {
  background-image: url("../images/tiedote_piilota_bg.png");
  background-position: bottom;
  background-repeat: repeat-x;
  width: 100%;
  height: 20px;
  position: absolute;
  bottom: 0px;
  left: 0px;
  z-index: 2;
}

.css_tiedote_piilotus {
  border-top: solid 1px #C0C0C0;
  padding-top: 2px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/*.css_tiedote_piilotus.piilota_tiedote .nayta {
	display:none !important;
}
.css_tiedote_piilotus.piilota_tiedote .piilota {
	display:inline !important;
}
.css_tiedote_piilotus .nayta {
	display:inline;
}
.css_tiedote_piilotus .piilota {
	display:none;
}*/
/*.css_piilotettu_tiedote
{
	max-height: 250px;  
}*/
/*************
* Validointi *
*************/
.error_text {
  color: #ee0000;
}

.error_asterisk {
  color: #ee0000;
  font-size: 130%;
}

.error_bg {
  background-color: #ee0000;
}

.validation_summary {
  color: #bb0b0b;
  border: 1px solid #bb0b0b;
  background-color: #FCDADA;
  padding: 8px;
  padding-left: 85px;
  text-align: left;
  /*background-image: url('../images/varoitus.gif');*/
  background-image: url("../images/SVG/muuvaara.svg");
  background-size: 5em;
  background-repeat: no-repeat;
  background-position: left center;
  background-position-x: 4px;
  min-height: 45px;
}

input.validation-error, select.validation-error, textarea.validation-error {
  /*Katso myös .modal [role=dialog].error*/
  border: 1px solid #bb0000;
  background-color: #FCDADA;
}

input[type=submit].validation-error {
  /*border: 1px solid #bb0000;*/
}

input[type=file].validation-error {
  border: 1px solid #bb0000;
  background-color: #FCDADA;
  height: 35px;
  vertical-align: bottom;
  padding-top: 5px;
}

input[type=checkbox].validation-error {
  outline: 7px solid #FCDADA;
  color: #999999;
}

/*input[type=checkbox].validation-error::after {
	content: " ";
	opacity: 0.5;
	position: relative;
	right: 4px;
	border: 1px solid #bb0000;
	border-radius: 10px;
	background-color: #FCDADA;
	padding: 10px;
}*/
span.validation-error, img.validation-error {
  /*border: 1px solid #bb0000;*/
  padding: 5px;
  display: inline-block;
  background-color: #FCDADA;
  border-radius: 10px;
}

div.validation-error:not(.css_novalidationcolor),
div.validation-error:not(.css_novalidationcolor) select,
div.validation-error:not(.css_novalidationcolor) .chosen-choices {
  display: inline-block;
  background-color: #FCDADA;
  border-radius: 10px;
  padding: 5px;
}

div.validation-error:not(.css_novalidationcolor) select {
  border: 1px solid red;
}

/*häx chosenia varten*/
div.validation-error:not(.css_novalidationcolor) .chosen-choices {
  border: 1px solid red;
  background: #FCDADA;
}

/*häx chosenia varten*/
div.validation-error:not(.css_novalidationcolor) .chosen-choices input {
  color: black !important;
  font-size: 15px !important;
  /*DefaultFontSize*/
}

span.validation-ok {
  /*border: 1px solid transparent;*/
  padding: 5px;
  border-radius: 10px;
  display: inline-block;
}

table.validation-error, td.validation-error {
  /*border: 1px solid #bb0000;*/
  background-color: #FCDADA;
  border-radius: 10px;
}

table.validation-ok, td.validation-ok {
  /*border: 1px solid transparent;*/
  border-radius: 10px;
}

tr.validation-error > td {
  background-color: #FCDADA;
}

tr.validation-error > td:first-child {
  border-radius: 10px 0 0 10px;
}

tr.validation-error > td:last-child {
  border-radius: 0 10px 10px 0;
}

option.option-not-required {
  background-color: white !important;
}

option.option-required {
  background-color: #FCDADA;
}

td.value_required {
  background-color: #FCDADA;
}

span.required-color {
  color: #dd0000;
  font-weight: bolder;
}

span.hidden {
  visibility: hidden;
  color: #dd0000;
  font-weight: bolder;
}

img.validator_img {
  margin-left: 2px;
  margin-right: 2px;
}

/************
* Jquery-UI *
*************/
.ui-datepicker {
  z-index: 3000 !important;
}

.ui-effects-transfer {
  border: 2px dotted black;
  opacity: 0.5;
}

body .ui-tooltip {
  box-shadow: none !important;
  background: #fff !important;
  border: 2px solid #999 !important;
  padding: 4px !important;
  font-size: 15px !important;
  /*DefaultFontSize*/
  font-family: "Open Sans", "Calibri", "Tahoma", "Arial", "sans-serif" !important;
}

/************
* Sekalaista *
*************/
div.arviointi_tiivistelma {
  display: flex;
  width: 100%;
  min-height: 20px;
}

div.arviointi_tiivistelma > div {
  font-size: 10px;
  border: 1px dotted grey;
}

table.arviointi_tiivistelma_popup tr > td:first-child {
  font-weight: bold;
}

.link {
  cursor: pointer;
  color: #115599;
}

.red_link {
  cursor: pointer;
  color: #dd0000;
  /*link-color*/
}

.grey_link {
  cursor: pointer;
  color: #707070;
  /*link-color*/
}

.small {
  font-size: 90%;
}

.xsmall {
  font-size: 80%;
}

.large {
  font-size: 120%;
}

.xlarge {
  font-size: 130%;
}

.close {
  float: right;
  cursor: pointer;
  width: 20px !important;
  height: 20px !important;
  border: none !important;
  padding: 0px !important;
  background: url("../images/close.gif") no-repeat !important;
}
.close:hover {
  background: url("../images/close_hover.gif") no-repeat !important;
}

button.css_close {
  display: inline-block;
  box-sizing: content-box;
  position: relative;
  float: right;
  width: 16px !important;
  height: 16px !important;
  padding: 0px !important;
  margin: 0px !important;
  /*border: 2px solid;
  border-radius: 2px !important;*/
  border: none;
  background: transparent !important;
  border-color: #115599;
  --contrast-hover: #ccc;
}
button.css_close::before, button.css_close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0px;
  bottom: 0px;
  width: 2px;
  margin-left: -1px;
}
button.css_close::before {
  transform: rotate(-45deg);
}
button.css_close::after {
  transform: rotate(45deg);
}
button.css_close:hover::before, button.css_close:hover::after {
  top: 1px;
  bottom: 1px;
}
button.css_close::before, button.css_close::after {
  background-color: #115599;
}
button.css_close:hover {
  border-color: #757575;
}
button.css_close:hover::before, button.css_close:hover::after {
  background-color: #757575;
}
button.css_close.css_close_white {
  border-color: white;
}
button.css_close.css_close_white::before, button.css_close.css_close_white::after {
  background-color: white;
}
button.css_close.css_close_white:hover {
  border-color: #ccc;
}
button.css_close.css_close_white:hover::before, button.css_close.css_close_white:hover::after {
  background-color: #ccc;
}
button.css_close.css_close_contrast {
  border-color: var(--main-contrast);
}
button.css_close.css_close_contrast::before, button.css_close.css_close_contrast::after {
  background-color: var(--main-contrast);
}
button.css_close.css_close_contrast:hover {
  border-color: var(--contrast-hover);
}
button.css_close.css_close_contrast:hover::before, button.css_close.css_close_contrast:hover::after {
  background-color: var(--contrast-hover);
}
@supports (color: color-mix(in xyz, red 50%, blue)) {
  button.css_close {
    --contrast-hover: color-mix(in xyz, var(--main-contrast) 50%, var(--main-color1));
  }
}

button.css_maximize {
  display: inline-block;
  box-sizing: content-box;
  width: 16px !important;
  height: 16px !important;
  border: none;
  background: transparent !important;
  --contrast-hover: #ccc;
}
button.css_maximize:hover {
  border-color: #757575;
}
button.css_maximize.css_maximize_white:hover {
  border-color: #ccc;
}
button.css_maximize.css_maximize_contrast:hover {
  border-color: var(--contrast-hover);
}
@supports (color: color-mix(in xyz, red 50%, blue)) {
  button.css_maximize {
    --contrast-hover: color-mix(in xyz, var(--main-contrast) 50%, var(--main-color1));
  }
}

button.css_cogwheel {
  display: inline-block;
  box-sizing: content-box;
  font-size: 24px;
  width: 24px !important;
  height: 24px !important;
  border: none;
  background: transparent !important;
}

.help {
  font-size: 100%;
  color: #333333;
  font-style: italic;
}

.helpedit_nuoli {
  width: 18px !important;
  height: 18px !important;
  padding: 2px !important;
  background-color: #3777A0 !important;
}

.help_rounded {
  display: inline-block;
  background-color: #eeeeee;
  border-radius: 7px;
  padding: 10px;
  white-space: pre-line;
}

.extra_info {
  /*Lisäinfolle joka on jollain tapaa kiinnostavaa mutta ei tärkeä sivun päätoimintojen kannalta (esim aikaleimat) */
  font-size: 80%;
  font-style: italic;
}

/*.pagerold
{
	color: #FFFFFF;
	background-color: #2461BF;
	font-weight: bold;
	text-align: right;
}*/
.pager {
  background-color: Transparent;
  font-weight: bold;
  text-align: right;
}

.layout_panel {
  /*background-color: #CCDDEE;
  border: 1px solid #000033;
  padding: 10px;
  margin-bottom: 8px;
  margin-right: 8px;
  border-radius: 8px 8px 8px 8px;*/
  background-color: #F0F0F0;
  background: linear-gradient(to bottom, #FFFFFF, #F0F0F0);
  border-bottom: 1px solid #CECECE;
  border-left: 1px solid #DFDFDF;
  border-right: 1px solid #DFDFDF;
  border-top: 1px solid #F0F0F0;
  padding: 10px;
  margin-bottom: 8px;
  margin-right: 8px;
}

.layout_panel.small_panel {
  min-width: 450px;
  min-height: 40px;
}

.layout_panel.normal {
  min-width: 450px;
  min-height: 110px;
}

.layout_panel.big {
  min-width: 450px;
  min-height: 180px;
  /*equals 1 normal + 1 small*/
}

.expand_button {
  background-image: url("../images/expand.gif") !important;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  border-width: 0px;
  border: none !important;
  height: 24px;
  width: 24px;
  min-width: 1px !important;
  padding: 0px !important;
}

.expand_button:hover {
  background-image: url("../images/expand_hover.gif") !important;
  cursor: pointer;
}

.collapse_button {
  background-image: url("../images/collapse.gif") !important;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  border-width: 0px;
  border: none !important;
  height: 24px;
  width: 24px;
  min-width: 1px !important;
  padding: 0px !important;
}

.collapse_button:hover {
  background-image: url("../images/collapse_hover.gif") !important;
  cursor: pointer;
}

.multiline_len {
  font-size: 11px;
  color: #999999;
}

.watermark {
  color: #999999;
  text-align: center;
}

.avatar {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  /*
  background-color: transparent;
  background-image: url("../images/avatar_pohja.png");
  background-repeat: no-repeat;*/
  background-color: white;
  border: solid 1px #cccccc;
  height: 50px;
  width: 50px;
  /*padding: 3px;*/
  max-height: 5vw;
  /*vw, ei vh*/
  max-width: 5vw;
  max-width: 5vw;
  min-height: 20px;
  min-width: 20px;
}

.avatar img {
  display: block;
  height: 38px;
  width: 38px;
  max-height: 4vw;
  max-width: 4vw;
  min-height: 20px;
  min-width: 20px;
  /*padding: 6px;*/
}

.hanke_editing {
  border: 1px solid #FF0000;
  /*background-color: #FF1010;*/
  color: #FF1010;
  padding: 10px;
  margin-bottom: 5px;
}

.jaavi {
  color: #AAAAAA;
}

.css_arviointi_kesken {
  color: #dd0000;
  /*border-left: 1px solid red;
  border-right: 1px solid red;*/
  border-bottom: 1px dashed;
  text-decoration: none;
}

.css_arviointi_valmis {
  color: #008500;
}

.arvioijaTaustaVari {
  background-color: #bee9f7 !important;
}

.new_mail {
  background-color: #ff8800;
  color: #ffffff;
  text-shadow: -1px 0 grey, 0 1px grey, 1px 0 #565656, 0 -1px grey;
  padding: 2px 3px 2px 3px;
  border-radius: 4px;
  white-space: nowrap;
}

.important {
  margin-bottom: 5px;
  padding: 5px;
  background-color: #fcd49f !important;
  border-radius: 5px;
  display: inline-block;
}

/*joskus tätä käytetään taulukossa niin laitetaan peräkkäisille souille vähän eri väriä*/
tr.important:nth-child(odd) {
  background-color: #f6cc97 !important;
  border-top: 1px solid #DEDEDE;
  border-bottom: 1px solid #DEDEDE;
}

tr.important:nth-child(even) {
  /*ei tarvita erikoismääritelmiä tähän*/
}

tr.important:hover {
  background-color: lightgoldenrodyellow !important;
}

.css_nakyy_vain_admin, .css_nakyy_vain_admin_tp, .css_ei_nay_hakijalle {
  margin-bottom: 5px;
  padding: 5px;
  background-color: #fcd49f !important;
  border-radius: 5px;
  display: inline-block;
}

.css_nakyy_vain_admin {
  background-color: #fcc0ff !important;
}

.css_menu_nakyy_vain_admin, .css_menu_nakyy_vain_admin_tp, .css_menu_ei_nay_hakijalle {
  /*Katso nav määritteet*/
}

.css_nakyy_vain_admin_select {
  background: linear-gradient(to right, #fcc0ff, transparent, transparent, transparent, transparent, transparent);
}

.css_nakyy_vain_admin_select[selected] {
  background: linear-gradient(to right, #fcc0ff, lightgray, lightgray, lightgray, lightgray, lightgray, lightgray);
}

.css_hakemustilat_laatikko * {
  display: block;
  padding: 5px;
  /*margin-bottom: 5px;*/
}

.css_hakemustilat_laatikko_nowrap * {
  white-space: nowrap;
}

/*Listauksiin vähän tiiviimpi määritelmä*/
.css_hakemustilat_laatikko_listauksiin * {
  display: block;
  padding: 2px;
  /*margin-bottom: 5px;*/
}

.hakemustila {
  font-size: 90%;
  font-weight: bold;
  border: 1px;
  border-radius: 5px;
}

.suositustila {
  font-weight: bold;
}

.radiobuttonlist td {
  padding-right: 10px;
  padding-bottom: 6px;
}

ul.radiobuttonlist {
  list-style-type: none;
  margin-left: 0px;
}

ul.radiobuttonlist li {
  padding-bottom: 6px;
}

/*Javaskript ShowPopupMessage-funktion luoma popup-paneeli viestien näyttämiseen*/
div.popup_message_panel {
  color: #000000;
  background-color: #CCDDEE;
  border: 1px solid #000000;
  width: 260px;
  height: 140px;
  position: fixed;
  left: 50%;
  top: 50%;
  /* topleft at center of screen*/
  margin-left: -130px;
  /*using negative margins to center exactly (0.5 * width) */
  margin-top: -70px;
  /*(0.5 * height)*/
  padding: 10px;
  border-radius: 5px;
  opacity: 0.9;
  text-align: center;
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.4);
  overflow: auto;
  font-weight: bold;
  display: table;
  z-index: 999;
}

div.popup_message_panel div {
  display: table-cell;
  vertical-align: middle;
}

.table_editor_row .sarake input:focus ~ .multiline_len,
.table_editor_row .sarake textarea:focus ~ .multiline_len {
  visibility: visible;
}

/*table.test  td
{
	border: 1px solid black;
	background-color: white;
	width: 15px;
	white-space: nowrap;
}*/
#fgv_footer_row_float {
  position: fixed;
  width: 100%;
  display: none;
  z-index: 10;
}

#fgv_header_row_float {
  position: fixed;
  width: 100%;
  display: none;
  z-index: 10;
}

.loki_viesti {
  background-color: #CCDDEE !important;
}

.loki_uusi {
  font-weight: bold;
}

.loki_vanha {
  font-style: italic;
}

input[type=text][disabled], textarea[disabled] {
  border: none;
  background-color: transparent;
}

.disabled {
  pointer-events: none;
  color: black;
}

/*@media only screen and (max-width: 650px) {
	.hakemusosio {
		padding-left: 2px !important;
		padding-right: 2px !important;
	}
}*/
.hakemusosio {
  padding: 10px;
  border: solid 1px transparent;
  border-radius: 5px;
  margin-bottom: 20px;
  background-color: #fff;
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.4);
}

.hakemusKysymykset > tbody > tr > td:first-child {
  width: 220px;
  vertical-align: top;
  padding: 5px;
}

.hakemusDivTaulu {
  display: table;
  padding: 5px;
}

.hakemusDivTaulu > div {
  display: table-row;
}

.hakemusDivTaulu > div > div {
  display: table-cell;
}

.autosaver_prompt {
  position: fixed;
  z-index: 1000;
  bottom: 1px;
  border-radius: 2px;
  background-color: #fcd49f;
  margin-left: -449px;
  left: 50%;
  padding: 5px;
  width: 889px;
  display: none;
  text-align: center;
  color: #000;
  opacity: 0.9;
  border: solid 1px #000;
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.4);
}

.langedit_editable {
  border-bottom: 1px dashed blue;
  cursor: pointer;
}

.langedit_editable:hover {
  background-color: blue;
  color: white;
}

.hakemustag {
  display: inline-table !important;
  border: 1px solid black;
  padding: 4px;
  /*margin-top:5px; */
  margin-bottom: 2px;
  margin-right: 2px;
  border-radius: 5px;
  font-size: 90%;
  min-height: 1em;
  min-width: 1em;
  max-width: 180px;
  height: 1em;
  text-align: center;
  /*height:auto;*/
  /*white-space:nowrap;*/
}

.chosen_select_tags {
  padding: 0px !important;
  margin: 2px !important;
  padding: 4px !important;
}

.chosen_select_tags:hover {
  color: #fff !important;
}

/*.leima_editor tr td {
	height:32px;
	padding-left:15px;
	width:550px;
}*/
div.autosavewarning {
  color: #cc0000;
  background-color: #FCDADA;
  border: 1px dashed #cc0000;
  padding: 5px;
  border-radius: 7px;
}

:not(:checked) + label .acui_display_if_selected {
  /* Piilottaa elementin jos siihen liittyvä valintanappi ei ole valittu*/
  display: none !important;
}

/********
* Värit *
********/
.red_text {
  color: #dd0000;
}

.white_text {
  color: #ffffff;
}

.white_text_important {
  color: #ffffff !important;
}

.css_lgray_text {
  color: #999999;
}

.css_gray_text {
  color: #727272;
}

/*777777 oli pykälää liian vaalea täyttääkseeen wcag, 767676 täyttää valkoisella taustaa, 727272 myös altrowcolor harmaalla */
.css_dgray_text {
  color: #555555;
}

.green_text {
  color: #008500;
}

.yellow_text {
  color: #dd6600;
}

.blue_text {
  color: #0000ff;
}

.orange_text {
  color: #ffaf47;
}

.black_text {
  color: #000000;
}

.black_text a {
  color: #000000;
}

.cyan_text {
  color: #008888;
}

.red_bg {
  background-color: #dd2222 !important;
}

.red_light_bg {
  background-color: #F28888;
}

.green_bg {
  background-color: #009900 !important;
}

.green_bg2 {
  background-color: lightgreen;
}

.green_bg2_important {
  background: lightgreen !important;
}

.yellow_bg {
  background-color: #ff8800;
}

.yellow_light_bg {
  background-color: #fff2cc;
}

/* Two-cell grid on register.aspx. Left cell = intro paragraphs,
   right cell = choice card / form. Each cell is its own stacking
   context, so a tall intro text can never flow into / overlap
   the choice card — unlike the previous `columns: 320px 2`
   approach. Collapses to a single column on narrow viewports. */
.css_register_grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 700px) {
  .css_register_grid {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr);
    align-items: start;
  }
}
/* Registration card (choice screen or the actual form). When the
   grid above collapses to a single column the card sits directly
   under the intro paragraphs — give it some breathing room. On
   wider viewports the grid gap already separates them. */
@media (max-width: 699px) {
  .css_register_card {
    margin-top: 20px;
  }
}

/* "Needs your attention" highlight — light-yellow row background
   with an orange tab along the left edge. Used to mark a profile
   field that the user must still complete (missing HETU, missing
   phone, no answer to the secondary-email prompt) and to flag the
   strong-identification required notice on the registration choice
   screen. Apply this single class instead of pairing
   `yellow_light_bg` with an inline `border-left:...` style. */
.css_attention {
  background-color: #fff2cc;
  border-left: 0.4em solid var(--new-color);
}

/* On kahden_sarakkeen_responsiivinen rows the .rivi renders as
   display:table-row, where browsers handle `border-left`
   inconsistently (and ignore it altogether without
   border-collapse). Move the orange tab onto the first cell so
   the visual is identical to a directly-styled element. */
.kahden_sarakkeen_responsiivinen .rivi.css_attention {
  border-left: 0;
}

.kahden_sarakkeen_responsiivinen .rivi.css_attention > .sarake:first-child {
  border-left: 0.4em solid var(--new-color);
}

.dgray_bg {
  background-color: #555555;
}

.lgray_bg {
  background-color: lightgray;
}

.lgray_bg_important {
  background-color: lightgray !important;
}

.black_bg {
  background-color: #000000;
}

.css_white_bg {
  background-color: #fff;
}

.pink_bg {
  background-color: #FCDADA;
}

.color_box {
  width: 30px;
  height: 17px;
  border: 1px solid black;
  padding-top: 2px;
}

.special_feature_bg {
  background-color: rgba(0, 0, 255, 0.05);
}

.colored_bg {
  background: var(--main-gradient);
  color: var(--main-contrast);
}
.colored_bg > * {
  color: var(--main-contrast);
}

/**************
* Histogrammi *
**************/
div.histogram {
  display: table-row;
}

div.histogram div {
  display: table-cell;
  float: left;
  border: 1px solid white;
  color: white;
  text-align: center;
  padding: 2px;
}

.tapahtumat_os {
  margin-left: -28px;
  font-size: 13px;
  background-color: rgba(255, 255, 255, 0.8);
  font-weight: bold;
}

.tapahtumat_os[title=Vista] {
  margin-left: -28px;
  font-size: 11px;
}

.tapahtumat_browser {
  margin-left: -25px;
  background-color: rgba(255, 255, 255, 0.8);
  font-weight: bold;
  font-size: 11px !important;
}

.order_button_up {
  background-position: center;
  background-image: url("../images/ylos.gif") !important;
  background-repeat: no-repeat !important;
  background-color: #3777F0 !important;
}

.order_button_down {
  background-position: center;
  background-image: url("../images/alas.gif") !important;
  background-repeat: no-repeat !important;
  background-color: #3777F0 !important;
}

ul.dragsort {
  padding: 0px;
  /*width:400px;*/
}

ul.dragsort li {
  list-style: none;
  margin-top: 1px;
  background-color: #F0F0F0;
  background: linear-gradient(to bottom, #FFFFFF, #F0F0F0);
  border-bottom: 1px solid #CECECE;
  border-left: 1px solid #DFDFDF;
  border-right: 1px solid #DFDFDF;
  border-top: 1px solid #F0F0F0;
  padding: 3px;
}

ul.dragsort li div {
  display: table-cell;
  padding: 5px;
}

.ratingStar {
  font-size: 0pt;
  width: 26px;
  height: 24px;
  margin: 0px;
  padding: 0px;
  cursor: pointer;
  display: block;
  background-repeat: no-repeat;
}

.emptyRatingStar {
  background-image: url("../images/emptystar.png");
}

.filledRatingStar {
  background-image: url("../images/filledstar.png");
}

.savedRatingStar {
  background-image: url("../images/savedstar.png");
}

.fwdCellActiveHighLight {
  background-color: palegoldenrod !important;
  /*border: 1px solid darkred;*/
}

.fwdCellActive {
  background-color: lightgoldenrodyellow;
  /*border: 1px solid darkkhaki;*/
}

.fwdCellInActive {
  background-color: transparent;
  /*border: 1px solid transparent;*/
}

.fwdOrangeCellActive {
  background-color: #fae6be;
}

.fwdOrangeCellActiveHighlight {
  background-color: #fed8ba !important;
  color: #bb0b0b;
}

.fwdCell {
  padding: 5px;
  padding-top: 10px;
  padding-bottom: 10px;
  margin: 1px;
  vertical-align: middle;
}

.fwdCellPos {
  cursor: pointer;
  content: url("../images/fwd_up.png");
  /*kk_plus.gif*/
}

.fwdCellPos:hover {
  content: url("../images/fwd_up.png");
  /*kk_plus_hover.gif*/
}

.fwdCellNeg {
  cursor: pointer;
  content: url("../images/fwd_stop.png");
  /*kk_minus.gif*/
}

.fwdCellNeg:hover {
  content: url("../images/fwd_stop.png");
  /*kk_minus_hover.gif*/
}

.fwdDisabledCell {
  background-color: #dddddd;
}

.acui_top-sticky {
  position: -webkit-sticky;
  /* Safari */
  position: sticky;
  top: 0;
  z-index: 20;
}

.css_top-sticky, .css_top-sticky th {
  background-color: white;
  border-bottom: 2px solid lightgrey;
}

.acui_bottom-sticky {
  position: -webkit-sticky;
  /* Safari */
  position: sticky;
  bottom: 0;
  z-index: 10;
}

.css_bottom-sticky {
  background-color: white;
  border-top: 2px solid lightgrey;
}

.acui_left-sticky {
  position: -webkit-sticky;
  /* Safari */
  position: sticky;
  left: 0;
  z-index: 10;
}

.css_left-sticky {
  background-color: white;
  border-right: 2px solid lightgrey;
}

.completionlist {
  padding: 5px;
  background-color: white;
  border: 1px solid black;
  list-style: none;
}

.rahasto_otsikko {
  background-color: #BBBDBF;
  padding: 4px;
  padding-top: 6px;
  cursor: pointer;
  border-bottom: 1px solid black;
}

.rahasto_jaettu {
  border: 1px solid brown !important;
}

.rahasto_yhdistetty {
  border: 1px solid green !important;
}

.rahasto_yhdistettavat {
  border: 1px solid orange !important;
}

ul.rahastovuosi_row {
  padding: 0px;
  width: 400px;
  margin: 0px;
}

ul.rahastovuosi_row li {
  list-style: none;
  margin-top: 1px;
  background-color: #F0F0F0;
  background: linear-gradient(to bottom, #FFFFFF, #F0F0F0);
  border-bottom: 1px solid #CECECE;
  border-left: 1px solid #DFDFDF;
  border-right: 1px solid #DFDFDF;
  border-top: 1px solid #F0F0F0;
  padding: 3px;
}

ul.rahastovuosi_row li div {
  display: table-cell;
  padding: 5px;
}

ul.rahastovuosi_row.locked {
  color: #999999 !important;
}

.kayttajahallinta_valittu_kayttaja {
  border: dashed 1px #222222;
  padding: 2px;
  margin-left: -3px;
  background-color: #11cc11;
}

.kayttajahallinta_valittu_kayttaja a, .kayttajahallinta_valittu_kayttaja span {
  color: black !important;
}

tr.mela_tyoryhmarivi td {
  color: #bbbbbb;
}

td.mela_tyoryhmasolu {
  background-color: #dbf3ff;
}

ul.languageToolbar {
  margin: 0px;
  padding: 0px;
  padding-left: 10px;
  padding-top: 8px;
  list-style-type: none;
  text-align: left;
  border: 0px;
  float: left;
}

ul.languageToolbar li {
  margin: 0px;
  padding: 0px;
  display: inline;
}

ul.languageToolbar a {
  font-size: 110%;
  display: inline-block;
  text-decoration: none;
  color: #fff;
  margin-right: 0px;
}

table.language_popupmenu {
  width: 100%;
}

table.language_popupmenu tr:not(:first-child):hover {
  background-color: #CECECE;
  cursor: pointer;
}

.language_highlight {
  background-color: yellow;
}

li.hakemus_taydennys {
  margin: 0px !important;
  list-style-image: none !important;
}

li.hakemus_taydennys th {
  padding: 0px;
  margin: 0px;
}

li.hakemus_taydennys td {
  text-align: left;
  white-space: nowrap;
  padding-top: 0px !important;
  padding-left: 5px;
  margin: 0px;
  overflow-x: hidden;
  max-width: 300px !important;
  font-size: 14px !important;
}

.css_ruksi_label_inline {
  display: inline-block;
}

.css_cookie_panel {
  width: 100%;
  min-height: 100px;
  position: fixed;
  bottom: 0px;
  left: 0px;
  display: none;
  z-index: 9999;
  max-height: 100vh;
  overflow: auto;
}

.css_cookie_info {
  border: 1px solid black;
  background-color: #ddeeee;
  margin: auto;
  padding: 50px;
  color: black;
  text-align: center;
  font-size: 110%;
  font-style: italic;
}

.css_cookie_subinfo {
  margin: auto;
  padding-top: 50px;
  color: black;
  background-color: #ddeeee;
  text-align: left;
  font-style: italic;
  font-weight: normal;
  white-space: pre-wrap;
}

.rounded_border {
  border: 1px solid #999999;
  border-radius: 7px;
}

/******************************
Checkbox ja radiobutton css   *

	asiakas-css tiedostossa voi 
	saada asiakaskohtaisia 
	radio/checkboxvärejä
*******************************/
input[type=checkbox] {
  position: relative;
  top: 0;
  left: 0;
  width: 17px;
  height: 17px;
  /*tämä aiheuttaa hiirellä klikattaessa fokus-kehän, joka ei ole toivottavaa
  -webkit-appearance: none;*/
  -moz-appearance: none;
  margin-right: 7px;
  vertical-align: middle;
}

input[type=checkbox]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  outline: 2px solid #5e5e5e;
  box-sizing: border-box;
  background-color: white;
  /*Piilotetaan alkuperäinen valkoisen alle*/
}

input:disabled[type=checkbox]::before {
  outline-color: gray;
  background-color: lightgray;
  /*Piilotetaan alkuperäinen valkoisen alle*/
}

input[type=checkbox]:hover::before, input[type=checkbox]:focus::before {
  outline: 2px dashed black !important;
}

input:disabled[type=checkbox]:hover::before, input:disabled[type=checkbox]:focus::before {
  outline: 2px solid gray !important;
}

input:checked[type=checkbox]::before {
  outline-color: green;
  background-color: lightgreen;
}

input:checked:disabled[type=checkbox]::before {
  outline-color: gray;
  background-color: lightgray;
}

/*Outline on laatikko ja border on check merkki*/
input:checked[type=checkbox]::after {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 80%;
  content: "";
  border: 2px solid green;
  border-top: none;
  border-left: none;
  transform: translate(5px, 0px) rotate(45deg);
  /*background-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC'), linear-gradient(135deg, #B1B6BE 0%,#FFF 100%);*/
  /*background-size: contain;*/
  z-index: 5;
}

input:checked:disabled[type=checkbox]::after {
  border-color: gray;
}

/*// kommentoi styles.css tiedostosta vastaaat .red_checkbox määritteet pois, jotta tämä toimii kunnolla! Uudet määritelmät eivät ole yhteensopivia vanhan kanssa*/
.red_checkbox[type=checkbox]:before {
  background: #fff;
  outline: 1px solid red;
}

.red_checkbox[type=checkbox]:checked:before {
  outline: 1px solid red;
  background-color: #fff;
}

.red_checkbox[type=checkbox]:checked:after {
  border-color: red;
}

.blue_checkbox[type=checkbox]:before {
  background: #fff;
  outline: 2px solid skyblue;
}

.blue_checkbox[type=checkbox]:checked:before {
  outline: 2px solid skyblue;
  background-color: #fff;
}

.blue_checkbox[type=checkbox]:checked:after {
  border-color: skyblue;
}

/*  vanha red_checkbox

	.red_checkbox[type="checkbox"]:before{
	position: relative;
	display: block;
	width: 11px;
	height: 11px;
	border: 1px solid red;
	content: "";
	background: #FFF;
}
.red_checkbox[type="checkbox"]:after{
	position: relative;
	display: block;
	left: 3px;
	top:-15px;
	width: 7px;
	height: 7px;
	/*border-width: 1px;
	border-style: solid;
	border-color: #B3B3B3 #dcddde #dcddde #B3B3B3;* /
	content: "";
	/*background-image: linear-gradient(135deg, #B1B6BE 0%,#FFF 100%);
	background-repeat: no-repeat;
	background-position:center;* /
}
.red_checkbox[type="checkbox"]:checked:after{
	content: "x";
	color:red;

	/*background-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC'), linear-gradient(135deg, #B1B6BE 0%,#FFF 100%);* /
}*/
input[type=radio] {
  position: relative;
  top: 5px;
  /*Tämä siirtää alkuperäisen radiobuttonin alemmas, jotta uusi kuvio peittää sen kokonaan*/
  left: 0;
  width: 18px;
  height: 18px;
  /*tämä aiheuttaa hiirellä klikattaessa fokus-kehän, joka ei ole toivottavaa
  -webkit-appearance: none;*/
  -moz-appearance: none;
  margin-right: 7px;
}

input[type=radio]::before {
  content: "";
  position: absolute;
  top: -2px;
  /*Tämä siirtää kuvion alkuperäisen radiobuttonin päälle*/
  left: -2px;
  width: 100%;
  height: 100%;
  border: 2px solid #5e5e5e;
  border-radius: 50%;
  background-color: white;
  /*Piilotetaan alkuperäinen valkoisen alle*/
}

input:disabled[type=radio]::before {
  border-color: gray;
  background-color: lightgray;
  /*Piilotetaan alkuperäinen valkoisen alle*/
}

input[type=radio]:hover::before, input[type=radio]:focus::before {
  border: 2px dashed black;
  /*background: radial-gradient(gray 3px, white 4px, white);*/
  /*border-color: green;
  	border-style: dashed;
  	background: radial-gradient(green 3px, lightgreen 4px, lightgreen);*/
  /*Ensin vihreä, yhden pikselin levyinen värimuutos sitten vaaleanvihreä loppuun asti*/
}

input:checked[type=radio]:hover::before, input:checked[type=radio]:focus::before {
  background: radial-gradient(lightgreen 3px, green 4px, green);
}

input:disabled[type=radio]:hover::before, input:disabled[type=radio]:focus::before {
  border: 2px solid gray !important;
}

input:checked[type=radio]::before {
  /*width: 12px;
  height: 12px;*/
  /*border: 6px double lightgreen;*/
  border-color: green !important;
  border-style: solid !important;
  /*background-color: green;*/
  /*background: radial-gradient(green 5px, transparent 6px, transparent);*/
  background: radial-gradient(green 3px, lightgreen 4px, lightgreen);
  /*Ensin vihreä, yhden pikselin levyinen värimuutos sitten vaaleanvihreä loppuun asti*/
}

input:checked:disabled[type=radio]::before {
  border-color: gray !important;
  border-style: solid !important;
  background: radial-gradient(gray 3px, lightgray 4px, lightgray) !important;
}

/*Tässä on pari esimerkkiä miten näitä voi tyylitellä*/
.red_radio[type=radio]::before {
  border: 1px solid lightcoral;
}

.red_radio[type=radio]:checked::before {
  border-color: red;
  background-color: lightcoral;
}

.red_radio2[type=radio]::before {
  width: 10px;
  height: 10px;
  border: 6px solid lightcoral;
}

.red_radio2[type=radio]:checked::before {
  border-color: lightcoral;
  background-color: red;
}

/*************************
Muokkaa hakemuskenttiä   *
*************************/
.muokkaa_hakemuskenttia_arvot {
  border: 1px dotted black;
  border-radius: 0 10px 10px 10px;
  padding: 10px;
  background-color: #ddeedd;
}

.hoverHighLight:hover {
  background-color: Highlight;
  cursor: pointer;
}

/*********
* ORCID  *
**********/
button.connect-orcid-button {
  border: 1px solid #D3D3D3;
  padding: 0.3em;
  padding-right: 5px;
  background: none #fff;
  border-radius: 8px;
  box-shadow: 1px 1px 3px #999;
  cursor: pointer;
  color: #999;
  font-weight: bold;
  font-size: 0.8em;
  line-height: 24px;
  vertical-align: middle;
}

button.connect-orcid-button:hover {
  background: none #fff;
  border: 1px solid #338caf;
  color: #338caf;
}

.orcid-id-icon {
  display: block;
  margin: 0 0.5em 0 0;
  padding: 0;
  float: left;
}

/*
  Tehtavalista.ascx: #viikonTehtavat, #viikonOmatTehtavat, -> style1
*/
style1 {
  position: absolute;
  box-sizing: border-box;
  width: 900px;
  height: 950px;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  border: 1px solid;
  background-color: white;
  z-index: 2;
}

/*
  Tehtavalista.ascx: #tehtavaLista, #uusiTehtava, #tehtavaHaku, #muutaTehtavaa, -> style2
*/
style2 {
  position: absolute;
  box-sizing: border-box;
  width: 600px;
  height: 950px;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  border: 1px solid;
  background-color: white;
  z-index: 2;
}

/*
	Tehtavalista.ascx: #valitutTehtavat, -> style3
*/
style3 {
  position: absolute;
  box-sizing: border-box;
  width: 1200px;
  height: 950px;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  border: 1px solid;
  background-color: white;
  z-index: 2;
}

.white-space-pre {
  white-space: pre;
}

.white-space-pre-button {
  cursor: pointer;
  border: 1px solid black;
  border-radius: 5px;
  padding: 2px;
}

.white-space-pre-button:hover {
  background-color: lightblue;
}

.white-space-pre-button-active {
  background-color: lightblue;
}

/********************
* SessionFileUpload *
*********************/
.sessionFileUploadIframe {
  display: table;
  width: 100%;
  border: none;
  height: 38px;
  overflow: hidden;
}

/********************************************************
LiiteUpload
	Nämä tyylit saavat liiteuploadin 
	mini-taulun mukautumaan kivasti selaimen kapenemiseen
*********************************************************/
.liiteUpload_taulu > div, .liiteUpload_taulu > div > div {
  /* padding: 2px;*/
  padding-right: 10px;
  padding-bottom: 1px;
  vertical-align: top;
}

@media only screen and (min-width: 1100px) {
  .liiteUpload_taulu {
    display: table-row;
  }

  .liiteUpload_taulu > div {
    display: table-cell;
  }

  .liiteUpload_taulu > div > div:first-child {
    min-height: 2em;
  }
}
@media only screen and (max-width: 1100px) and (min-width: 600px) {
  .liiteUpload_taulu {
    display: table;
  }

  .liiteUpload_taulu > div {
    display: table-row;
  }

  .liiteUpload_taulu > div > div {
    display: table-cell;
  }
}
@media only screen and (max-width: 600px) {
  /* ei mitään, näin divit menevät kivasti allekkain */
}
/************************************************
Lisäkenttien css
	Katso @median lisäksi myös lisakentat.js
************************************************/
.kahden_sarakkeen_responsiivinen {
  width: 100%;
  box-sizing: border-box;
  display: table;
}

/* katso myös lisakentat.js */
@media only screen and (max-width: 700px) {
  .kahden_sarakkeen_responsiivinen .rivi > .sarake:first-child {
    width: 100% !important;
    max-width: 450px !important;
    vertical-align: middle;
  }

  .kahden_sarakkeen_responsiivinen .ylirivi > .rivi {
    width: 100% !important;
    max-width: 450px !important;
  }
}
@media only screen and (min-width: 700px) {
  .kahden_sarakkeen_responsiivinen .rivi {
    display: table-row;
  }

  .kahden_sarakkeen_responsiivinen .rivi > .sarake {
    display: table-cell;
    padding: 5px;
    padding-right: 10px;
    padding-left: 0px;
    vertical-align: middle;
  }

  .kahden_sarakkeen_responsiivinen .rivi > .sarake:not(:first-child) {
    width: 100%;
    max-width: 450px;
  }

  .kahden_sarakkeen_responsiivinen .rivi > .sarake:not(.sarake_vapaa_leveys):first-child {
    min-width: 220px;
    width: 220px !important;
    vertical-align: top;
  }
}
.kahden_sarakkeen_responsiivinen .rivi > .sarake_vapaa_leveys {
  width: unset !important;
  vertical-align: top;
}

.kahden_sarakkeen_responsiivinen .ylirivi:first-of-type .rivi .taulukko_sarake_label {
  display: none;
}

.sarakkeet_allekkain .ylirivi {
  display: table-row;
}

.ylirivi:nth-of-type(odd):not(.headerRivi):not(.foterRivi) {
  background-color: #f2f2f2;
  border-left: 2px solid gray;
  padding-left: 5px;
}

.ylirivi:hover {
  background-color: lightgoldenrodyellow !important;
}

.sarakkeet_allekkain .rivi {
  display: table-cell;
  vertical-align: middle;
}

.sarakkeet_allekkain .rivi .sarake {
  margin-top: 3px;
  margin-bottom: 3px;
  margin-right: 3px;
}

.sarakkeet_allekkain .rivi > .taulukko_sarake_label {
  padding-left: 4px;
  display: none;
}

.sarakkeet_allekkain .ylirivi:first-of-type .rivi .taulukko_sarake_label {
  display: inline-block;
  font-weight: bold;
}

.sarakkeet_allekkain .taulukko_sarake_summa {
  display: none;
}

.otsikko_pienella .ylirivi:first-of-type .rivi .taulukko_sarake_label {
  display: table-row;
  font-weight: unset !important;
}

.css_lisakenttaedit_nonactive {
  background-color: #F28888;
}

/********************************************************
Register
	Nämä tyylit saavat registersivun
	mini-taulun mukautumaan kivasti selaimen kapenemiseen
*********************************************************/
.register_taulu > div, .register_taulu > div > div {
  padding: 2px;
  vertical-align: top;
}

@media only screen and (min-width: 700px) {
  .register_taulu {
    display: table;
  }

  .register_taulu > div {
    display: table-row;
  }

  .register_taulu > div > div {
    display: table-cell;
  }
}
@media only screen and (max-width: 700px) {
  /* ei mitään, näin divit menevät kivasti allekkain */
}
/*******************************************************************
divTaulu
	Yleinen "taulu", jonka rivit javascript kääntää vaaka ja 
	pystysuuntiin parametrien mukaan vaihtamalla tyyliä 
	divTaulu_pystyyn ja divTaulu_vaakaan välillä

	javascriptillä asian hoitaminen välttää @media säännön ja lisäksi
	sillä saa paremmin säädeltyä kun leveyttä voi verrata taulun omaan 
	leveyteen eikä vain ruudun leveyteen, jolloin voidaan ottaa huomioon 
	muut elementit taulun ympärillä

	Katso esimerkiksi omat hakemukset 1100 sivulla

	OHJE:
	1. Aseta  divTaulu luokan diville data-breakpoint="<numero>", josta 
	   js-koodi tietää, milloin vaihtaa tyyliä edestakaisin
	2. muista myös ajaa registerDivTaulu() funktio sivun latautuessa
	Katso myös jscript.js
********************************************************************/
.divTaulu > div, .divTaulu > div > div {
  padding: 2px;
  vertical-align: top;
}

.divTaulu_pystyyn {
  display: table;
}

.divTaulu_pystyyn > div {
  display: table-row;
}

.divTaulu_pystyyn > div > div > div:not(:nth-child(2)) {
  text-align: center;
  padding: 4px;
}

.divTaulu_pystyyn > div > div > div:not(:nth-child(2)) a {
  width: auto;
  margin: auto;
}

.divTaulu_vaakaan > div {
  display: table;
}

.divTaulu_vaakaan > div > div {
  display: table-row;
}

.divTaulu_vaakaan > div > div > div {
  display: table-cell;
  padding: 4px;
  vertical-align: middle;
}

/*****************************************************************
* CSS esimerkkejä main masterin body_class ja content_area_class *
* metodien käytöstä asiakaskohtaisissa asetuksissa               *
* eli pidä nämä kommentoituna                                    *
* Kaikki nämä ovat valinnaisia.
* 
* tällä saa login sivulle asiakkaan taustakuvan
*
*  .login_body {
*     background: url('../images/asiakasnimi/kuva.png') no-repeat;
*     background-size: 100%;
*     background-attachment: fixed;
* }
*
*  Tällä saa logon keskelle sivua
*
*    .login_body .topheader_link {
*        width: auto;
*        display: block;
*        margin-left: auto;
*        margin-right: auto;
*    }
*    .login_body .topheader_link img {
*        display: block;
*        margin-left: auto;
*        margin-right: auto;
*    }
*
* Tämä on samanlainen kuin login_body mutta sitten kun ollaan jollain muulla sivulla
*
* /*.default_body {
*    background: url('../images/kuva.gif') no-repeat;
*    background-size: 10%;
* }* /
*
*
* Tällä saa login sivun content_arean läpinäkyväksi niin taustakuva näkyy paremmin
*
* .login_content_area {
*     background-color: transparent !important;
* }
*
* Aseta lisäksi asiakaskohtaisissa asetuksissa
* header.topheader luokan background-color: transparent;
*
******************************************************************/
/*********************************************************************
* TODO: Bad css practices, avoid using and try to get rid of these   *
**********************************************************************/
/* Onko kokouskäsittelylistauksen esityssolu niin erikoinen lumihiutale että sille tarvitaan ihan oma tyylimääritelmä pelkästään 
	kursorin muuttamiseksi pointer tyyliseksi? */
.esitys {
  cursor: pointer;
}

.esitys:hover {
  font-weight: bold;
}

.smallheader {
  font-weight: bold;
}

/* 'jq_' alkuiset tarkoitettu implikoimaan että kyseessä on puhtaasti jquery koodille tarkoitettu flagi johon ***ei ole liitetty tyyliä*** */
/*.jq_delete { 
	cursor:pointer;
}*/
/* Tapauksia jossa luokka nimetty suoraan tyylin mukaan esim. ".bold {font-weight-bold"}. */
.align_right {
  text-align: right;
  padding-right: 10px;
  white-space: nowrap;
}

.align_right td {
  text-align: right;
  padding-right: 10px;
  white-space: nowrap;
}

.align_right input[type=text] {
  text-align: right;
}

.align_center {
  text-align: center;
}

.align_center td {
  text-align: center;
}

/* consider using <em> element when it is semantically appropriate */
/*.italic 
{
	font-style: italic;
}*/
/* consider using <strong> element when it is semantically appropriate */
/*.highlighted, .bold 
{
	font-weight: bold;
}*/
.overflowy_hidden {
  overflow-y: hidden;
}

code::selection {
  background-color: #ee0000;
  color: white;
}

.marker {
  background-color: yellow;
}

.overlay-background {
  position: fixed;
  background: rgba(0, 0, 0, 0.2);
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 1;
}

.tervehdys_text {
  color: #008500;
}

.kk-esitys-taulu td {
  white-space: nowrap;
}

.kk-esitys-taulu input {
  width: 100px;
}

/* List control multi, break into columns with high item count but prevent column breaks inside items. */
.acui_two_column_list_control {
  column-count: 2;
  column-width: 450px;
}

.acui_two_column_list_control div[role] div {
  -webkit-column-break-inside: avoid;
  /* WebKit/Safari: honors this, not avoid-column */
  page-break-inside: avoid;
  break-inside: avoid;
}

.acui_three_column_list_control {
  column-count: 3;
  column-width: 320px;
}

.acui_three_column_list_control div[role] div {
  -webkit-column-break-inside: avoid;
  /* WebKit/Safari: honors this, not avoid-column */
  page-break-inside: avoid;
  break-inside: avoid;
}

/* The custom radio is shifted down (top: 5px) and overflows its item box. In Safari
   multicol that overflow bleeds into the next column. Centering it in the line box keeps
   it contained. margin-bottom (which grows the box, unlike the position shift) restores
   the inter-item spacing the centering removed without re-introducing the overflow. */
.acui_two_column_list_control div[role] div input[type=radio],
.acui_three_column_list_control div[role] div input[type=radio] {
  top: 0;
  vertical-align: middle;
  margin-bottom: 5px;
}

/* Accessible reveal widget for sensitive values (HETU, phone number,
   etc.). See Code/UI/SensitiveReveal.cs for the C# helper that emits
   the markup and Scripts/JScript.js for the click-toggle behaviour. */
.css_reveal_sensitive {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
}

.css_reveal_sensitive .css_reveal_full {
  display: none;
}

/* Hover (deliberate mouse aim) gives a transient peek. Keyboard
   focus alone does NOT reveal — the user has to press Enter or
   Space (which sets aria-pressed via the click handler) so the
   value isn't exposed just by tabbing through the page. */
.css_reveal_sensitive:hover .css_reveal_masked,
.css_reveal_sensitive[aria-pressed=true] .css_reveal_masked {
  display: none;
}

.css_reveal_sensitive:hover .css_reveal_full,
.css_reveal_sensitive[aria-pressed=true] .css_reveal_full {
  display: inline;
}

/* Off-screen but still readable by assistive tech. */
.css_visually_hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  white-space: nowrap;
}

/* MergeProfilesPicker UserControl — two-card chooser used by EN7030
   and login.aspx when a verified HETU matches multiple profiles. */
.css_merge_picker {
  max-width: 760px;
}

.css_merge_picker_intro {
  display: block;
  margin-bottom: 12px;
}

.css_merge_picker_cards {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.css_merge_picker_card {
  flex: 1 1 320px;
  min-width: 280px;
  border: 1px solid #cbd3ff;
  border-radius: 6px;
  padding: 12px 14px;
  background: #fbfcff;
}

.css_merge_picker_card h3 {
  margin: 0 0 8px 0;
  font-size: 1em;
  word-break: break-word;
}

.css_merge_picker_card dl {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(96px, auto) 1fr;
  gap: 4px 8px;
  font-size: 0.9em;
}

.css_merge_picker_card dt {
  font-weight: bold;
}

.css_merge_picker_card dd {
  margin: 0;
}

.css_merge_picker_choice {
  float: right;
}

.css_merge_picker_card_actions {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.css_merge_picker_actions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}