/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role=list],
ol[role=list] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
textarea,
select {
  font: inherit;

  border-radius: 4px;
  padding: 0.35em;
  background-color: #f1f2f6;
  border: 0;
  /* background-color: white; */
  /* border: 1px solid #c0c0c0; */
}

textarea {
  width: 80%;
  height: 10em;
}

fieldset {
  border-radius: 6px;
  border: 1px solid #c0c0c0;
  padding: 2em;
  background-color: white;
  margin-top: 2em;
}

button {
  cursor: pointer;
  outline: 0;
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
  display: inline-block;
  margin-right: 0.25em;
  /* font-weight: 500; */
  line-height: 1.5;
  text-align: center;
  border: 1px solid transparent;
  padding: 6px 12px;
  /* font-size: 1.25em; */
  font-size: 1em;
  border-radius: 5px;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

button:hover {
  color: #fff;
  background-color: #0b5ed7;
  border-color: #0a58ca;
}


/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
input,
textarea,
button,
select,
label,
a {
  -webkit-tap-highlight-color: transparent;
}

* {
  box-sizing: border-box;
}

html {
  margin: 0px;
  padding: 0px;
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  color: black;
  background-color: #121826;
  background-color: #112549;
  line-height: 1.7em;
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
}

a {
  color: dodgerblue;
  text-decoration: none;
  padding: 0.25em 0.5em;
  /* background-color: #f5f5f5; */
}
a:hover {
  background-color: rgb(222, 238, 255);
  border-radius: 4px;
}
a:active {
  background-color: rgb(207, 224, 241);
  border-radius: 4px;
}


.textfield {
  width: 100%;
}

.textfield:focus-within label {
  color: limegreen;
}

#container {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 60px 1fr 30px;
  max-width: 1860px;
  margin: 0 auto;
}
@media only screen and (max-width: 800px) {
  #container {
    display: flex;
    flex-direction: column;
  }
}

header {
  grid-column: 1/3;
  margin: 0px;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
}
header h1 {
  margin: 0;
  padding: 0;
  font-size: 1.2rem;
  color: white;
  text-transform: uppercase;
  font-weight: normal;
}
@media only screen and (max-width: 800px) {
  header {
    display: none;
  }
}
@media only screen and (min-width: 801px) {
  header {
    display: flex;
  }
}

#header-mobile {
  margin: 0px;
  padding: 0px;
  height: 80px;
  display: none;
  justify-content: space-between;
  align-items: center;
  color: white;
}
#header-mobile h1 {
  margin: 0;
  padding: 0;
  font-size: 1.2rem;
  color: white;
  text-transform: uppercase;
  font-weight: normal;
}
@media only screen and (max-width: 800px) {
  #header-mobile {
    display: flex;
  }
}
@media only screen and (min-width: 801px) {
  #header-mobile {
    display: none;
  }
}

svg {
  overflow: hidden;
  vertical-align: middle;
}

nav {
  display: none;
  grid-column: 1/2;
  padding: 20px 20px;
  font-weight: normal;
}
nav svg {
  margin-right: 0.5em;
  fill: whitesmoke;
}
nav ul {
  list-style: none;
  padding-left: 1em;
}
nav a {
  color: hsl(0, 0%, 25%);
  color: white;
  text-decoration: none;
  padding: 0;
}
nav a:hover {
  color: hsl(164, 95%, 40%);
}
nav h3 {
  /* color: hsl(181, 36%, 45%); */
  color: hsl(219, 62%, 60%);
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.9em;
  margin-top: 2em;
  padding: 0px;
}
@media only screen and (max-width: 800px) {
  nav {
    display: none;
  }
}
@media only screen and (min-width: 801px) {
  nav {
    display: block;
  }
}

.no-scroll {
  overflow-y: hidden;
}

#mobile-layer {
  display: none;
  z-index: 999;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  position: fixed;
  left: 0px;
  top: 0px;
  /* transition: all 1s ease-out; */
  transition: all 1s;
}
#mobile-layer #layer-content {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100vw;
  height: 100%;
  /* background-color: white; */
  background-color: #112549;
  padding: 20px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
#mobile-layer.open {
  display: block;
}


#sidebar {
  z-index: 99;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  position: fixed;
  left: 0px;
  top: 0px;
  opacity: 0;
  pointer-events: none;
  /* transition: all 0.25s ease-out; */
  transition: all 0.15s ease-out;
  transition: all 0.15s;
  /* transition: transform 0.25s ease-out; */
}

#sidebar.open {
  /* backdrop-filter: blur(3px); */
  background-color: rgba(0, 0, 0, 0.35);
}

#sidebar #bar {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 100vw;
  max-width: 500px;
  height: 100%;
  background-color: white;
  padding: 20px;
  padding: 18px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  transform: translate(100vw);
  transition: 0.15s ease-out;
  /* transition: 5s ease-out; */
}

#sidebar #bar.open {
  transform: translate(0px);
}

#sidebar #bar.close {
  transform: translate(100vw);
}


#nav-mobileORGGGG {
  display: none;
  padding: 20px 40px;
  background-color: hsl(164, 95%, 40%);
  font-weight: normal;
}
#nav-mobileORGGGG ul {
  list-style: none;
  padding-left: 1em;
}
#nav-mobileORGGGG li {
  margin-bottom: 0.5em;
}
#nav-mobileORGGGG a {
  color: hsl(0, 0%, 25%);
  text-decoration: none;
}
#nav-mobileORGGGG a:hover {
  color: hsl(164, 95%, 40%);
}
#nav-mobileORGGGG h3 {
  color: hsl(164, 95%, 35%);
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.9em;
  margin-top: 2em;
  padding: 0px;
}
#nav-mobileORGGGG.open {
  display: block;
}
@media only screen and (max-width: 800px) {
  #nav-mobileORGGGG {
    display: none;
  }
}
@media only screen and (min-width: 801px) {
  #nav-mobileORGGGG {
    display: none;
  }
}

#user-mobile {
  display: none;
  position: absolute;
  background-color: hsl(164, 95%, 40%);
}
#user-mobile.open {
  display: flex;
}
@media only screen and (max-width: 800px) {
  #user-mobile {
    display: none;
  }
}
@media only screen and (min-width: 801px) {
  #user-mobile {
    display: none;
  }
}

main {
  overflow: auto;
  grid-column: 2/3;
  padding: 40px;
  flex-grow: 1;
  background-color: white;
  /* background-color: hsl(0, 0%, 96%); */
  /* background-color: hsl(219, 62%, 97%); */
  border-radius: 8px;
  margin: 0 20px 0 0;
}
@media only screen and (max-width: 800px) {
  main {
    padding: 20px;
    margin: 0 20px;
  }
}

footer {
  grid-column: 1/3;
  margin: 0px;
  padding: 0px;
  width: 100%;
  min-height: 30px;
  color: white;
  font-size: 11px;
  padding-left: 0.5em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.server {
  margin: 0px;
  padding: 0px 0.5em;
  height: 30px;
  background-color: hsl(164, 95%, 40%);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#menu ul {
  list-style-position: inside;
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

#menu a {
  text-decoration: none;
}

#menu li {
  /* color: #62799d; */
  /* font-size: 1rem; */
  /* line-height: 36px; */
  width: 100%;
  /* padding: 0 10px; */
  position: relative;
  /* display: block; */
  /* background-color: #292f3b; */
  color: white;
  padding: 1em 1em;
  border-radius: 8px;
  text-decoration: none;
}

#menu a li:hover {
  /* background: #1d242f; */
  /* color: lightgray; */
  /* display: block; */
  background-color: hsla(0, 0%, 0%, 0.2);
  color: white;
  /* padding: 1em 2em; */
  /* border-radius: 8px; */
  /* text-decoration: none; */
}

#menu li .icon {
  margin: 0 10px;
  font-size: 1.4rem;
}

#menu li .sidebar-badge {
  position: absolute;
  right: 20px;
  top: 12px;
}

#menu .sidebar-header {
  color: #364872;
  padding: 1.125rem 1.5rem 0.375rem;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1rem;
}

.dropdown-button {
  width: 24px;
  height: 24px;
}
.dropdown-content {
  display: none;
  position: absolute;
  margin: 0px;
  transform: translate3d(0px, 0px, 0px);
  background-color: #c0c0c0;
  border-radius: 4px;
  z-index: 2;
}
.popup-button {
  width: 24px;
  height: 24px;
}
.popup-content {
  display: none;
  position: absolute;
  margin: 0px;
  transform: translate3d(0px, 0px, 0px);
  background-color: #111;
  border-radius: 4px;
  z-index: 2;
}

.show {
  display: block;
}

.badge {
  display: inline-block;
  padding: 0.25em 0.4em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.badge-primary {
  color: #fff;
  background-color: crimson;
}

.valittu {
  color: #fff;
  background-color: black;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 5px;
  margin: 2.5px;
}
.valittu.loma {
  background-color: #0C3;
}
.valittu.sairas {
  background-color: #F63;
}
.valittu.muu {
  background-color: #F9C;
}
.valittu.eta {
  background-color: dodgerblue;
}

.dashGrid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.dashGrid > div {
  /* border: 1px solid lightgray; */
  /* border: 1px solid hsl(0, 0%, 90%); */
  background-color: #f8f8f8;
  border-radius: 12px;
  padding: 20px;
  margin: 5px;
}
.dashGrid > div > h2 {
  margin-bottom: 0.5em;
}

.dashGrid2 {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.dashGrid2 > div {
  /* border: 1px solid lightgray; */
  /* border: 1px solid hsl(0, 0%, 90%); */
  /* background-color: #f8f8f8; */
  border-radius: 12px;
  /* padding: 20px; */
  margin: 5px;
}
.dashGrid2 > div > h2 {
  margin-bottom: 0.5em;
}

.divLink {
  padding: 0;
}
.divLink > div {
  width: auto;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 5px;
  background-color: #f0f0f0;
}
.divLink > div:hover {
  background-color: #f6f6f6;
}/*# sourceMappingURL=main.css.map */


.laitteet_laiterivi {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.laitteet_laiterivi > div {
  background-color: #f9f9f9;

  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

}

.laitteet_laiterivi > div:first-child {
  background-color: white;
  font-weight: bold;
}
  .laitteet_laiterivi > div:first-child:hover {
    background-color: transparent;
  }

.laitteet_laiterivi > div:last-child {
  background-color: white;
  color:green;
}

.laitteet_laiterivi > div:hover {
  background-color: #f0f0f0;
}
  .laitteet_laiterivi > div:last-child:hover {
    background-color: transparent;
  }




.huoltotyo_rivi {
  display: table;
  /* flex-direction: column; */
  gap: 1em;
  background-color: #f9f9f9;
  width: 100%;
  border-radius: 5px;
  border: 1px solid lightgray;
  overflow: hidden;
}

.huoltotyo_rivi>div {
  display: table-row;
  /* grid-template-columns: 1fr 1fr 2fr 1fr 1fr 1fr; */
  
}
.huoltotyo_rivi>div>div {
  display: table-cell;
  padding: 0.25em 0.5em;
  /* grid-template-columns: 1fr 1fr 2fr 1fr 1fr 1fr; */
  border-top: 1px solid lightgray;
}


.huoltotyo_rivi > div:first-child {
  background-color: lightgray;
  font-weight: bold;
}
  /* .huoltotyo_rivi > div:first-child:hover {
    background-color: transparent;
  } */

/* .huoltotyo_rivi > div:last-child {
  background-color: white;
  color:green;
} */
.huoltotyo_rivi>div:not(:first-child):hover {
  background-color: #f0f0f0;
  border-radius: 5px;
}
  /* .huoltotyo_rivi > div:last-child:hover {
    background-color: transparent;
  } */

/* .huoltotyo_rivi {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background-color: #f9f9f9;
  width: 100%;
}

.huoltotyo_rivi>div { 
  display: grid;
  grid-template-columns: 1fr 1fr 2fr 1fr 1fr 1fr;
  border: 1px solid gray;
}
.huoltotyo_rivi > div:first-child {
  background-color: white;
  font-weight: bold;
}
  .huoltotyo_rivi > div:first-child:hover {
    background-color: transparent;
  }

/* .huoltotyo_rivi > div:last-child {
  background-color: white;
  color:green;
} */

/* .huoltotyo_rivi > div:hover {
  background-color: #f0f0f0;
  border-radius: 5px;
} */
  /* .huoltotyo_rivi > div:last-child:hover {
    background-color: transparent;
  } */



.radio-group {
  display: flex;
  flex-direction: column;
  list-style-type: none;
  gap: 0.335em;
  /* list-style-position: inside; */
  margin: 0;
  padding: 0;
}
.radio-group label {
  cursor: pointer;
}

.radio-group-item {
  display: flex;
  flex-direction: row;

  width: fit-content;
  border-radius: 7px;
  border-radius: calc(5px + 0.335em);

  padding: 0.335em;

  background-color: hsl(0, 0%, 97%);
}
.radio-group-item input {
  display: none;
}
.radio-group-item label {
  padding: 0.5em 1em;

  border-radius: 5px;
  transition: 0.05s linear;
}

.radio-group-item input:checked+label {
  color: dodgerblue;
  background-color: white;
  box-shadow: 0px 2px 4px hsla(0, 0%, 0%, 0.1);
}

.radio-group-item input:not(:checked)+label {
  color: hsl(0, 0%, 40%);
  box-shadow: none;
}
.radio-group-item input:not(:checked)+label:hover {
  color: hsl(0, 0%, 20%);
}

/* käytä jos puhdas nappula-grou */
/* .radio-group-item input:first-child+label {
  border-radius: 5px 0 0 5px;
}
.radio-group-item label:last-child {
  border-radius: 0 5px 5px 0;
} */


.radio-group2 {
  display: flex;
  flex-direction: column;
  list-style-type: none;
  gap: 0.335em;
  /* list-style-position: inside; */
  margin: 0;
  padding: 0;
  border-bottom: 3px solid dodgerblue;
}

.radio-group2 label {
  cursor: pointer;
}

.radio-group2-item {
  display: flex;
  flex-direction: row;

  width: fit-content;
  /* border-radius: 7px; */
  /* border-radius: calc(5px + 0.335em); */

  /* padding: 0.5em; */

  /* background-color: hsl(0, 0%, 97%); */
}

.radio-group2-item input {
  display: none;
}

.radio-group2-item label {
  padding: 0.5em 1em;
  padding: 1em 2em;

  /* border-radius: 5px; */
  transition: 0.05s linear;
}

.radio-group2-item input:checked+label {
  color: dodgerblue;
  background-color: white;
  border-bottom: 3px solid dodgerblue;
  /* box-shadow: 0px 2px 4px hsla(0, 0%, 0%, 0.1); */
}

.radio-group-item2 input:not(:checked)+label {
  color: hsl(0, 0%, 40%);
  box-shadow: none;
}

.radio-group-item2 input:not(:checked)+label:hover {
  color: hsl(0, 0%, 20%);
}





.radio-group3 {

  --underline-height: 5px;
  --underline-border-radius: 999px;
  --underline-gap: 2px;

  --underline-height: 3px;
  --underline-border-radius: 0px;
  --underline-gap: 0px;
  

  display: flex;
  flex-direction: row;
  width: 100%;
  height: 3em;
  list-style-type: none;
  gap: 0.335em;
  gap: 2px;
  gap: var(--underline-gap);
  /* list-style-position: inside; */
  margin: 0;
  padding: 0;
  /* border-bottom: 3px solid hsl(0, 0%, 85%); */
}

.radio-group3 label {
  cursor: pointer;
}

.radio-group3-item:last-child {

  background-color: #0C3;
}

.radio-group3-item {
  /* display: flex; */
  /* flex-direction: row; */

  /* width: fit-content; */
  /* border-radius: 7px; */
  /* border-radius: calc(5px + 0.335em); */

  /* padding: 0.5em; */
  /* background-color: hsl(0, 0%, 97%); */
}

.radio-group3-item-end {
  width: 100%;
  
}

.radio-group3-item input {
  display: none;
}

.radio-group3-item label {
  padding: 0.5em 1em;
  padding: 1em 2em;
  padding: 0em 2em;
  height: 2.5em;
  display: inline-block;

  /* border-radius: 5px; */
  transition: 0.05s linear;
  transition: 0.1s linear;
}
.radio-group3-item-end .empty {
  padding: 0.5em 1em;
  padding: 1em 2em;
  padding: 0em 2em;
  height: 2.5em;
  display: inline-block;
  width: 100%;

  /* border-radius: 5px; */
  transition: 0.05s linear;
}

.radio-group3-item input:checked+label {
  color: dodgerblue;
  background-color: white;
  /* border-bottom: 3px solid dodgerblue; */
  /* box-shadow: 0px 2px 4px hsla(0, 0%, 0%, 0.1); */
}

.radio-group3-item .bar {
  display: block;
  width: auto;
  /* height: 4px; */
  height: var(--underline-height);
  border-radius: var(--underline-border-radius);
  background-color: dodgerblue;

  transition: 0.1s linear;
}
.radio-group3-item-end .bar {
  display: block;
  width: auto;
  /* height: 4px; */
  height: var(--underline-height);
  border-radius: var(--underline-border-radius);
  background-color: hsl(0, 0%, 85%);
}
.radio-group3-item input:not(:checked)+label+.bar {
  background-color: hsl(0, 0%, 85%);
}

.radio-group3-item input:not(:checked)+label {
  color: hsl(0, 0%, 40%);
  box-shadow: none;
}

.radio-group3-item input:not(:checked)+label:hover {
  color: hsl(0, 0%, 20%);
}




.pill-group {
  /* display: flex; */
  /* flex-direction: column; */
  list-style-type: none;
  /* gap: 0.335em; */
  /* list-style-position: inside; */
  margin: 0;
  padding: 0;
}
.pill-group label {
  cursor: pointer;
}

.pill-group-item {
  display: flex;
  flex-direction: row;
  flex-flow: wrap;

  width: fit-content;
  border-radius: 10px;
  /* border-radius: calc(5px + 0.335em); */

  /* padding: 0.335em; */
  padding: 0;

  /* background-color: hsl(0, 0%, 97%); */
}
.pill-group-item input {
  display: none;
}
.pill-group-item label {
  /* padding: 0.5em 1em; */
  padding: 0.25em 0.5em;

  /* border-radius: 5px; */
  border-radius: 999px;
  transition: 0.05s linear;
}

.pill-group-item input:checked+label {
  color: dodgerblue;
  background-color: hsl(210, 100%, 95%);
  /* background-color: white; */
  /* box-shadow: 0px 2px 4px hsla(0, 0%, 0%, 0.1); */
}

.pill-group-item input:not(:checked)+label {
  color: hsl(0, 0%, 40%);
  box-shadow: none;
}
.pill-group-item input:not(:checked)+label:hover {
  /* color: hsl(0, 0%, 20%); */
  color: dodgerblue;
}


#valittuCont {
  display: flex;
  /* background-color: #fff; */
  background-color: #f0f0f0;
  /* border: 5px solid dodgerblue; */
  border-radius: 10px;
  /* padding-top: 1em; */
  padding: 1em;
  overflow: auto;
  position: relative;
  gap: 1em;
}

#valittuInfoCont {
  /* background-color: #f0f0f0; */
  /* padding: 1em; */
  width: 30%;
}

#valittuInfoContDetails {
  background-color: hsl(0, 0%, 98%);
  background-color: #fff;
  /* border: 1px solid #f0f0f0; */
  /* border: 1px solid hsl(211, 100%, 85%); */
  border-radius: 10px;
  /* padding: 3.5em; */
  width: 70%;
  height: fit-content;
}

@media only screen and (max-width: 1000px) {
  #valittuInfoCont {
    flex-grow: 2;
  }

  #valittuInfoContDetails {
    display: none;
  }

}
/* 
@media only screen and (min-width: 801px) {
  header {
    display: flex;
  }
} */


.huoltotyoCont {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.huoltotyoCont .otsikko {
  border-radius: 10px 10px 0 0;
  background-color: #111;
  color: white;
  padding: 1.5em;
}

.huoltotyoCont .sisalto {
  /* display: flex; */
  /* flex-direction: row; */
  /* gap: 2em; */
  padding: 3em;
  /* background-color: limegreen; */
}

.keikkaListaElementtiCont {
  max-height: auto;
  overflow: auto;
  display: flex;
  flex-direction: column;
  /* gap: 0.5em; */
  gap: 1px;
  gap: 0.25em;
  /* padding: 2px; */
}

.keikkaListaRivi {
  cursor: pointer;
  display: block;
  color: black;
  padding: 1em 0.5em;
  padding: 1em 1em;
  border-radius: 6px;
  /* border: 1px solid hsl(0, 0%, 93%); */
  background-color: hsl(211, 100%, 97%);
  background-color: hsl(0, 0%, 98%);
  background-color: hsl(0, 0%, 97%);
  background-color: white;

  /* border-bottom: 1px solid #c0c0c0; */
  /* border-left: 6px solid hsl(210, 100%, 70%); */
  /* border-left: 6px solid hsl(0, 0%, 69%); */
  /* filter: drop-shadow(0px 2px 2px #e2e2e2); */

  /* color: #111; */

}
.keikkaListaRivi:hover {
  background-color: hsl(211, 100%, 98%);
}
.keikkaListaRiviValittu {
  /* outline: 2px solid dodgerblue; */
  /* outline: 1px solid hsl(211, 100%, 80%); */
  /* border: 1px solid hsl(211, 100%, 85%); */
  /* background-color: hsl(219, 62%, 90%); */
  /* outline: 1px solid hsl(211, 100%, 85%); */
  border-left: 6px solid #111;
}
/* @media only screen and (max-width: 1000px) {
  .keikkaListaRivi {
    display: none;
  }
}

@media only screen and (min-width: 1000px) {
  .MobileOnly {
    display: none;
  }
} */

.tabsNavi {
  /* width: 100%; */
  /* overflow: auto; */
  display: flex;
  flex-flow: wrap;
  /* gap: 1px; */
}
.tabsNavi a {
  /* border-radius: 999px; */
  border-radius: 20px 20px 0 0;
  padding: 0.75em 0.75em;
  background-color: white;
  color: #111;

  font-size: 1.5em;
  font-weight: bold;
}
.tabsNavi a:hover {
  background-color: #f7f7f7;
}
.tabsNavi .tabValittu {
  /* outline: 2px solid dodgerblue; */
  /* color: white; */
  color: #111;
  /* background-color: #111; */
  /* background: rgb(245, 245, 245); */
  /* background: linear-gradient(0deg, rgba(245, 245, 245, 1) 0%, rgba(243, 246, 252, 1) 100%); */
  background-color: #f0f0f0;
}
.tabsNavi .tabValittu:hover {
  /* outline: 2px solid dodgerblue; */
  /* color: white; */
  background-color: #f0f0f0;
}

#omatKeikatCont {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#avoimetKeikatCont {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
#valittuInfoCont {
  display: flex;
  flex-direction: column;
  gap: 5px;
}




table.tuoterivit {
  margin: 0px;
  padding: 0px;
  border-collapse: collapse;
}

table.tuoterivit td {
  border: 1px solid #f0f0f0;
  padding: 0.5em;
}

table.tuoterivit tr:hover:not(:first-child) {
  background-color: #f0f0f0;
}

table.tuoterivit tr:first-child td {
  background-color: none;
  border: none;
  /* font-weight: bold; */
}
.tuoterivi {
  display: table-row;
}

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

.peek {
  display: none;
}
.peek.open {
  display: block;
}

.pill {
  display:  inline-block;
  color: #222;
  background: lightgray;
  padding: 1px 0.65em;
  border-radius: 999px;
  margin-bottom: 2px;
}
.comment {
  /* display:  inline-block; */
  color: #222;
  background: #ebebeb;
  padding: 0.65em;
  border-radius: 4px;
  margin-bottom: 4px;
}

.loader {
  width: 24px;
  height: 24px;
  border: 4px solid #e0e0e0;
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  /* animation: rotation 0.75s ease-in infinite; */
  animation: rotation 0.85s linear infinite;
}

.mapExpand {
  width: 1200px;
  height: 600px;
}

.mapButtons button {
  background-color: transparent;
  color: gray;
  border-radius: 999px;
  border: none;
  outline: none;
}
.mapButtons button:hover {
  background-color: #f0f0f0;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}