@charset "UTF-8";
/*admin väriä säätäessä ks. myös ParametriEdit.ColorCode(Parametri p)*/
/*
    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;
}

a:hover, a:focus {
  color: #0d4477;
}

/*a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:active { text-decoration: none; }
a:hover { text-decoration: underline; }*/
a.readonly {
  text-decoration: none;
}

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-color: #3777A0;
  background: linear-gradient(to bottom, #3777A0, #013F69);
  color: #fff;
  border: solid 1px #013F69;
  border-radius: 5px;
  cursor: pointer;
  white-space: normal;
}

input[type=button]:hover, input[type=submit]:hover, button:hover {
  background: inherit;
  background-color: #fff;
  background: linear-gradient(to bottom, #fff, #ccc);
  color: #013F69;
}

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 {
  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] {
  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%;
  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: #fa82ff !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: 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;
}

/*****************************************************************
* 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;
}

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;
}

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;
}

/*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;
}

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*/
.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;
}

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");
  /*background-image: linear-gradient(to bottom, #94EE94, #DFFADF);*/
  /*vihreä*/
}

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

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

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");
}

.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) {
  display: inline-block;
  background-color: #FCDADA;
  border-radius: 10px;
  padding: 5px;
}

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 {
  background: url("../images/close.gif") no-repeat !important;
  float: right;
  cursor: pointer;
  width: 20px !important;
  height: 20px !important;
  border: none !important;
  padding: 0px !important;
}

.close:hover {
  background: url("../images/close_hover.gif") no-repeat !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: #fa82ff !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, #fa82ff, transparent, transparent, transparent, transparent, transparent);
}

.css_nakyy_vain_admin_select[selected] {
  background: linear-gradient(to right, #fa82ff, 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;
}

.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);
}

/**************
* 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;
}

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

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

.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: 0;
  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: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;
}