@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Raleway:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');



:root {
    /* --main-bg-color: SteelBlue; */
    --main-bg-color:#4682B4;
    --main-txt-color:white;
    --main-hover-color:lightgrey;
    /* --button-bg-color:lightblue; */
    --button-bg-color:#ADD8E6;
    --button-txt-color:black;    
    --button-hover-color:lightgrey;
    --popFrm-border-color: grey;
    --popFrm-btn-bg-color: rgb(80, 220, 255);
    --border-color:black;
    --nappi-bg-color:whitesmoke;
    --box-bg-color: whitesmoke;
    --button-disabled-bg-color:grey;
    --body-fonts:'Poppins', sans-serif;
    --nav-active-bg-color:##04AA6D;
    --nav-bg-color:#333;
    --nav-bg-hover-color:#ddd;
    --omaTable-bg-color:lightyellow;
    --omaTable-txt-color:black;
    --omaTable-th-color:#ADD8E6;
    --omaTable-row-bg-color:whitesmoke;
    --omaTable-rowODD-bg-color:white;    
    --asetus-bg-color: #daeaff;
    --hover-brightness:1.2;
    --scr-maxwidth:1600px;
    --puuttuu-color:red;
    --bg-color-tehtava: beige;
    --bg-color-kalenteri: #DBDBA9;

    --palkki-bg-color:#BDE3FF;
  
    /* --palkki-bg-color:green; */
    --palkki-yla-korkeus:50px;
    --palkki-ala-korkeus:40px;    
    --user-bg-color:#F8F8F8;
    /* --user-bg-color:#a93ad4; */
    --user-box-bg-color:white;
    --chat-border-color:#666;
    --user-txt-color: #1E1E1E;
    --login-bg-color: #FFCD29;
    --vainluku-bg-color: lightgray;
    

}




body {
  font-family: var(--body-fonts);
  background-color: #f7991f !important;
  height:100%;
  align-content: center;
  margin:auto;
  width:100%;
  /* padding-top: 70px; */ 
} 





.a  {
  color: #cd2525 !important;
}

.tausta {
  background-color: #f7991f;
}


@media only screen and (min-width: 800px) {
  .tausta {
    /* background-color: black; */
    background-color: #fbfbfb !important;
  }
}


.content {
  /* background-color: var(--user-bg-color); */
  max-width: var(--scr-maxwidth);
  margin: auto;
  height:100vh ;
  border: 2px solid var(--chat-border-color);
 
}

.content-login {
  /* background: var(--user-bg-color); */
  min-width:300px;
  width:50%;
  max-width: 800px;
  margin: auto;
 
}

#logo-img {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  margin-top: 5rem;
  margin-bottom: 5rem;
  max-width: 550px;
}

@media only screen and (max-width: 600px) {
  #logo-img {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    margin-top: 3rem;
    margin-bottom: 3rem;
    max-width: 280px;
  }
}



#sisalto {
  background-color: var(--user-bg-color);
  border: 2px solid var(--chat-border-color);
}

.vaalea {
  background:lighten(var(--main-bg-color), 20%);
}

input[type=text], input[type=password] {
    width: 100%;
    padding: 12px 20px;
    margin: 10px 0;
    display: inline-block;
    border: 1px solid #cd2525;
    box-sizing: border-box;
    background-color:var(--box-bg-color);
    border-radius: 5px;
  }

  [type="checkbox"]{
    vertical-align:middle;
}

input#nimike-ip {
  padding: unset;
  margin: unset;
  background-color: unset;
  padding-left:5px;
}

button {
  background-color: #fff;
  color: black;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  border-radius: 10px;
  border: 2px solid black;
  }
  
button:hover:not([disabled]){
  /* opacity: 0.7; */
  filter:brightness(var(--hover-brightness));
  }

button:disabled {
  background-color: lightgrey;
    color: black;
    border: 1px solid black;

  }

  .palkinVari {
    background-color: var(--palkki-bg-color) !important;
  }
  .userLogin {
    background-color:#fcfcfc;
    border: 2px solid #cd2525;
    margin-top: 5rem;
    padding-bottom: 5rem;
    border-radius: 20px;
    }

  
    .login-btn {
  
      /* font-family: 'Roboto'; */
      font-size: 16px;
      color: black;
      background-color: white;
      border: 1px solid black;
      border-radius: 5px;
      height: 40px;
      font-weight: bold;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0px 8px 16px 0px rgb(0 0 0 / 20%);
      margin: 2rem 0;
    }

  .login-txt {
    font-size: 18px;
    color: #3d3d3d;
    /* font-family: "fredoka"; */
  }

  .unohdus {
    color: #757575;
  }

  .login-otsikko {
    font-size: 40px;
    font-weight: bold;
    color: var(--user-txt-color);
    margin-left: 15%;

  }

  .login-container {
    margin-left: 15%;
    margin-right: 15%;
    border-radius: 5px;
    border: 2px solid ar(--chat-border-color);
  }

  .pikkunappi {
    padding: 4px 4px;
    margin: 0px 0;
    width:50%;
    
  }

  .oikealle {
    float: right;
    margin:auto;
  }
  
  .vasemmalle {
    float:left;
    margin:auto;
  }

  .keskelle {
    float:center;
    margin:auto;
  }

  .valikkoRyhma {
    border-color: gray;
    border-bottom-width: 1px;
    border-bottom-style: ridge;
  }
  
  

/* Extra styles for the cancel button */
.cancelbtn {
  width: auto;
  padding: 10px 18px;
  background-color:var(--nappi-bg-color);
}

/* Center the image and position the close button */
.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
  position: relative;
}

img.avatar {
  width: 40%;
  border-radius: 50%;
}

.container {
  padding: 16px;
  border-radius: 0 0 20px 20px;
  color:var(--main-txt-color);
}

.user-container {
 width: inherit;
 color:var(--user-txt-color);
}


span.psw {
  float: right;
  padding-top: 16px;
}

.uusiKayttis {
  margin-right: 0;
}

/* The Modal (background) */
.modal {
  /* display: block;  */
  /* position: fixed;  */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  /* width: 100%; Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: var(--button-hover-color);
  padding-top: 60px;
  padding-bottom: 60px;
  margin: auto;
}


/* Modal Content/Box */
.modal-content {
  background-color:var(--main-bg-color);
  margin:auto;
  /*margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
  border-radius: 20px;
}

/* The Close Button (x) */
.close {
  position: absolute;
  right: 25px;
  top: 0;
 
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: red;
  cursor: pointer;
}

/* Add Zoom Animation */
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)} 
  to {-webkit-transform: scale(1)}
}
  
@keyframes animatezoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
  span.psw {
     display: block;
     float: none;
  }
  .cancelbtn {
     width: 100%;
     /* background-color: var(--cancel-btn-bg-color); */
  }
}

.yhteysTiedot {  
  /* background-color: var(--main-bg-color); */
  background-color: white;
}


td select {
  width:100%;
  border-radius: 5px;  
  display: inline-block;
  border: 1px solid var(--chat-border-color);
  background-color: var(--box-bg-color);
}

.pois {
  color:darkgray;
}

.omainen:after {
  content: " omainen";
  font-size:  0.7rem;
}

.gridTausta {
  /* background-color:var(--main-bg-color); */
  padding: 5px;   
  color: var(--button-txt-color);
  /* border-radius: 10px; */
  margin:auto;
  margin-bottom:2px;
  width:90%;
}

.grid10 {
  display: grid; 
  grid-template-columns: repeat(10, 1fr);
  height:50px;
}

.grid10child {
  width: 100%;
}


.grid5 {
  display: grid; 
  grid-template-columns: repeat(5, 1fr);
  height:100px;
}

.grid10child {
  width: 100%;
}




.grid7 {
  display: grid; 
  /* grid-template-columns: 25% 25% 25% 25%; */
  grid-template-columns:  auto auto auto auto auto auto auto;
}

@media screen and (max-width: 1200px) {
  .grid7 {
    display: grid; 
    /* grid-template-columns: 25% 25% 25% 25%; */
    grid-template-columns:  auto auto auto auto;
  }
}


@media screen and (max-width: 768px) {
  .grid7 {
    display: grid; 
    grid-template-columns: 33% 33% 34%;
  }
}


@media screen and (max-width: 560px) {
  .grid7 {
    display: grid; 
    grid-template-columns: 50% 50% ;
  }
}


@media screen and (max-width: 500px) {
  .grid7 {
    display: grid; 
    grid-template-columns:  auto auto auto auto;
  }
}


@media screen and (max-width: 500px) {
  .grid7 {
    display: grid; 
    grid-template-columns:  auto auto auto ;
  }
}



.grid4 {
  display: grid; 
  grid-template-columns: auto auto auto auto;
}



.grid05 {
  display: grid; 
  grid-template-columns: auto auto auto auto auto;
}


@media screen and (max-width: 768px) {
  .grid4 {
    display: grid; 
    grid-template-columns: auto auto;
  }
}

.grid4Kapea {
  display: grid; 
  grid-template-columns: auto auto auto auto;
}

@media screen and (max-width: 768px) {
  .grid4Kapea {
    display: grid; 
    grid-template-columns: auto ;
  }
}


@media screen and (max-width: 500px) {
  .grid4{
    display: grid; 
    grid-template-columns: auto;
  }
}

.grid3 {
  display: grid; 
  grid-template-columns: auto auto auto;
}

.grid3alas {
  display: grid;
  grid-template-columns: 33% 34% 33%;
  /* background: #cd2525 !important; */
  /* border: 2px solid #cd2525; */
  background-color: #f7991f;
  /* border: 2px solid #B3BAFF; */
 

  border-radius: 0 0 10px 10px;
}

.alavalikko {
  text-align: -webkit-center;
  justify-content: center;
}


.usericon {
  display:block;
  /* float: right; */
  color:var(--button-txt-color); 
}


@media screen and (max-width: 768px) {
  .grid3 {
    display: grid; 
    grid-template-columns: auto auto;
  }
}


@media screen and (max-width: 500px) {
  .grid3{
    display: grid; 
    grid-template-columns: auto;
  }
}

.gridYhteys {
  display: grid; 
  /* grid-template-columns: 20% 30% 50%; */
  grid-template-columns: 50% 50%; 
  border-bottom: 1px solid #ccc;
}

.yksiYhteys {
  display: flex;
  background-color: lightgray;
}

   
.yksiYhteys:nth-of-type(even) {
  background-color:var(--user-bg-color);
  }



.gridYhteysEdit {
  display: grid; 
  grid-template-columns: 20% 30% 50%;
  /* border-bottom: 1px solid #ccc; */
  width: 90%;
}


@media screen and (max-width: 768px) {
  .gridYhteys {
    display: grid; 
    grid-template-columns: 30% 70%;
    grid-template-rows: auto auto;
  }
  .gridYhteysEdit {
    display: grid; 
    grid-template-columns: 30% 70%;
    grid-template-rows: auto auto;
  }
  
}

@media screen and (max-width: 400px) {
  .gridYhteys {
    display: grid; 
    grid-template-columns: auto;
    grid-template-rows: auto auto auto;
    border-bottom:none;
    border: 1px solid #ccc;
  }
  .gridYhteysEdit {
    display: grid; 
    grid-template-columns: auto;
    grid-template-rows: auto auto auto;
    border-bottom:none;
    /* border: 1px solid #ccc; */
  }
}

.samaryhma {
    border: 1px solid gray;
    margin: 1px 10px 1px 10px;
    border-radius: 10px;
    padding: 5px 0px 5px 0px;
}

.grid2 {
  display: grid; 
  grid-template-columns: 50% 50%;
}

@media screen and (max-width: 768px) {
  .grid2 {
    display: grid; 
    grid-template-columns: auto;
  }
}


@media screen and (max-width: 500px) {
  .grid2{
    display: grid; 
    grid-template-columns: auto;
  }
}


.grid2Kapea {
  display: grid; 
  grid-template-columns: auto auto;
}

@media screen and (max-width: 768px) {
  .grid2Kapea{
    display: grid; 
    grid-template-columns: auto;
  }
}

.lisenssi {
  width:150px;
  grid-template-columns: 85% 15%;
}

.grid1{
  display: grid; 
  grid-template-columns: auto;
}

.gridPv {
  display: grid; 
  grid-template-columns: 50% 50%;
  width:70px;
}

.vko {
  width:100%;
}

div[class*="grid"]:not(.user-teht) {
  align-items: center !important;
}


.matIcon > span { 
  font-family: 'Material Icons'; 
  background-color: transparent;
}



/* .omat > span {
  font-family: 'Material Icons'; 
}
 */



.popUpGrid {
  display: grid;
  grid-template-columns: auto ;
}

.hloGrid{
  grid-template-columns: 50% 50% ;
}



@media screen and (max-width: 500px) {
  .hloGrid {
    grid-template-columns: auto;
  }
}



@media screen and (max-height: 500px) {
  .popUpGrid {
    grid-template-columns: auto auto;
  }
}


.grid-item  {
  color:var(--user-txt-color);
  font-size: small; 
  margin-left:10px; 
  display: flex;
}
.grid-item input{
  border-radius: 5px;
  width:90%
}

.grid-itemTahdet {
  display: inline-grid;
  justify-content: center;
}

.grid-item #cmbFiilis {
  /* background-color:initial; */
  width:60px;
}

.yhteystieto {
 
  color: black;
  margin-top: 6px;
  margin-bottom: 6px;
  /* font-family: 'Fredoka'; */
  font-weight: 400;  
}

.ui-page-theme-a a, html .ui-bar-a a, html .ui-body-a a, html body .ui-group-theme-a a {
    /* color: #cd2525; */
    font-weight: 400;
    /* font-family: 'Roboto'; */
}

.ui-page-theme-a a:visited, html .ui-bar-a a:visited, html .ui-body-a a:visited, html body .ui-group-theme-a a:visited {
    color: #cd2525;
}

.yhteystieto-huom {
  font-style: italic;  
}

.yhteystieto-huomEdit{
  font-style: italic;  
}

.yhteystieto-editBtn {
  /* grid-column:10%; */
  padding-left: 0px; 
  /* width:10%   */
}

@media screen and (max-width: 768px) {
  .yhteystieto-huom {
    grid-column: 1/ span 2;
    padding-left: 15px;
  }
  .yhteystieto-huomEdit{
    grid-column: 1/ span 2;
    grid-column: 90%;
    padding-left: 15px;
  }
}


@media screen and (max-width: 400px) {
  .yhteystieto {
    grid-column:auto;
    margin-top:0px;
  }
  .yhteystieto-huom {
    grid-column:auto;
    padding-left: 0px;   
   
  }
  .yhteystieto-huomEdit {
    grid-column:90%;
    padding-left: 0px;   
   
  }
 
}


.vainLuku{
  background-color: inherit ;/* var(--main-bg-color);   var(--vainluku-bg-color); */
  border:0px;
  pointer-events: none;

}

.eiKayttaja {
  font-style: italic;
}

.poista::after {
  color:red;
  content: "POISTA ";
}
.tietoGrid {
  display: grid;
  grid-template-columns: 35% 65%;
  padding-top: 4px;
  padding-bottom: 4px;
}

.omainenGrid {
  display: grid;
  grid-template-columns: 35% 65%;
  padding-top: 0px;
  padding-bottom: 0px;
}


@media screen and (max-width: 600px) {
  .tietoGrid {   
    padding-top: 1px;
    padding-bottom: 1px;
  }
}


.grid-item #ID, #id{
  display: none;
}

.grid-item #lblID{
  display: none;
}

.grid-item select {
  width:90%;
  border-radius: 5px;  
  display: inline-block;
  border: 2px solid var(--chat-border-color);
  background-color: var(--user-box-bg-color);
}
.piilota{
  display: none !important;
}

.piilotaGrid{
  display: none !important;
}

.lev100{
  width:100%
}


.lev90{
  width:90%;
}


.lev80{
  width:80%;
}

.lev10 {
  width:10%;
}

lev20 {
  width:20%;
}


.otsikko {
  width: 100%;
  font-size: large;
  font-weight: 400;
  text-align: center;
  padding-bottom: 5px;
  font-family: "roboto";
  padding-top: 15px;
}

#cancel-btn, #hloTiedotTallenna {
  color: black;
}


.alaotsikko { 
  /* width:100%;
  font-weight: bold;
  text-align: center; */
  font-size:medium;
  text-align: left;
  margin-left:10px;
  /* background-color: var(--user-bg-color); */
  background-color: inherit;
}



.otsikkoalue{
  padding-top:15px;
  width:100%;
  max-width: 800px;;
  border:none;
  display:inline-flex;
  align-items: center;
  background-color: var(--main-bg-light-color);
}
/* 
.otsikkoalue .material-icons {
  width:auto;
  border:none;
  display:flex;
  float: right;
  margin-left: -1px;
  margin-right: 4px;
 
} */

.icon {
  display:flex;
  float: right;
  color:var(--button-txt-color); 
}



.klikattava {
  cursor: pointer;
 
}


.vainPC {
  display:inherit; 
}

.asiVainPC {
  display: table-row;
}
@media screen and (max-width: 600px) {
  .vainPC {
    display: none;  
  }  
  .asiVainPC {
    display: none;
  }

}


.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24;
  /* color: #fff; */
  color: black;
}




.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  cursor: pointer;
  fill: 1;
  color: #f7991f ;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'liga';

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

.material-icons2 {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  cursor: pointer;
  fill: 1;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'liga';

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}



.m14 { 
  font-size: 14px !important; 
}

.m40 { 
  font-size: 40px; 
} 

.m30 { 
  font-size: 30px; 
} 



.m60 { 
  font-size: 60px; 
}  

.m12vh {
  font-size: 12vh; 
}

.m10vh {
  font-size: 10vh; 
}


.m5vv {
  font-size: 5vmin; 
}

.material-icons:disabled {
  cursor: not-allowed;
}



 .disabloi{
  cursor:none;
  color:var(--button-disabled-bg-color);
  filter: blur(3px);
 }

 .disabloiImg {
  filter: blur(3px);
  cursor:none;
 }

.omaTable {
  background-color: var(--omaTable-bg-color); 
  width:100%;  
  color:var(--omaTable-txt-color); 
  border-collapse:collapse;
  border:solid black 1px;
  border-radius:6px;
  border-spacing: 0px;
  margin-top:10px;
}

.omaTable tr td th { 
  height: 10px;   
  overflow: hidden !important; 
}

.omaTable .thKnt {
  font-weight:bold;
  text-align: left;
  background-color: var(--palkki-bg-color);  

}
.omaTable tr  {
  border: solid lightgray 1px;
  background-color: var(--omaTable-row-bg-color); 
 
}
.vaihto {
  border-bottom-color: black !important;
}


.omaTable tr:nth-of-type(odd)  {
  /* background-color: var(--omaTable-row-bg-color) */
  background-color: var(--omaTable-rowODD-bg-color);
}   


.btnThKnt {
  width:160px;
  text-align: left;
  background-color: var(--palkki-bg-color);  
}
@media screen and (max-width: 768px) {
  .omaTable .kapea {
    display: none;
  }
  #soittoTD {
    display:  table-cell;
  }p
  #puhelinTD {
    display: none;
  }
  .btnThKnt {
    width:80px;
  
  }
}


 
  .nappialue {
    float: right;
  }

  
  .nappialueVasen {
    float: left;
  }


.yleinen-popup {
  display: none;
  position: absolute;
  top: 2% ;
  /* left: 50% !important; */
  left:5%;
  right:5%;
  margin-left: auto;
  margin-right: auto;
  width:50vw;
  /* width: 600px; */
  max-width: 750px;
  min-width: 400px;
  /* transform: translate(25%, -50%); */
  /* transform: translateY(-50%) translateX(-50%); */
  border-radius: 10px;
  border: 2px solid black;
  background: white;
  z-index: 9;
  color: var(--user-txt-color);
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}  

.hlo-popup {
  /* top:2%; */
  position: absolute;
  width:600px;
  max-width:80%;

 
  /* transform: translateY(-50%) translateX(-50%); */
  margin-left: auto;
  margin-right: auto;
  z-index: 9;  
 
  color:var(--user-txt-color);
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
  
}

.pvKirja-popup {
  display: none;
  position: absolute;
  top:10%;
  height: 80%;
  position:absolute;
  left:20%;
  width:60%;
  max-width: 600px;
  border-radius: 12px;
  border: 3px solid var(--chat-border-color);
  background: var(--user-bg-color);
  z-index: 9;
  color: var(--user-txt-color);
  box-shadow: 0px 8px 16px 0px rgb(0 0 0 / 20%);
}




@media screen and (max-width: 800px) {
  
  .yleinen-popup {
    display: none;
    position: absolute;
    top: 2%; 
    left:10%;
    width:80%;
    /* max-width:80%; */
    
    /* transform: translate(25%, -50%); */
    /* transform: translateY(-50%) translateX(-50%); */
    border-radius: 12px;
    border: 3px solid var(--chat-border-color);
    background:  #fff;
    z-index: 9; 
    color:var(--user-txt-color);
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 

  }  

  .hlo-popup {
    position: absolute;
    width:80%;
    max-width:80%;
   
    left:10%;
    /* transform: translateY(-50%) translateX(-50%); */
    margin-left: auto;
    margin-right: auto;
    z-index: 9; 
    top:0px;
    margin-top:5%;
    color:var(--user-txt-color);
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
    
  }

  .pvKirja-popup {
    display: none;
    position: absolute;
    top:2%;
    height: 80%;
    position:absolute;
    left:10%;
    width:80%;
    max-width:80%;
  
    border-radius: 12px;
    border: 3px solid var(--chat-border-color);
    background: var(--user-bg-color);
    z-index: 9;
    color: var(--user-txt-color);
    box-shadow: 0px 8px 16px 0px rgb(0 0 0 / 20%);
  }

  .admin-popup {
    left:10%;
    right: auto;
   
    width: 80%;
  }




}


.yhteys-popup {
  background-color: whitesmoke;
  position: absolute;
  top: 2%; 
 
  /* margin-left: auto;
  margin-right: auto;
  transform:  translateX(10%); */
  /* width:80%; */
 
  border: 3px solid var(--popFrm-border-color);
  height:fit-content;
  border-radius: 12px;
  z-index: 9; 
  left:5%; 
  right:5%;
  /* width:80%; */
  margin-left: auto;
  margin-right: auto;
  width: 50vw;
  max-height: 80%;
  max-width: 750px;
  min-width: 400px;

}


@media screen and (max-width: 600px) {
  
  .yleinen-popup {
    display: none;
    position: absolute;
    top: 5%; 
    left:2%;
    right:2%;
    margin-left: auto;
    margin-right: auto;
    width:90%;
    max-width: 90%;
    min-width: unset;
   
    
    /* transform: translate(25%, -50%); */
    /* transform: translateY(-50%) translateX(-50%); */
    border-radius: 12px;
    border: 3px solid var(--chat-border-color);
    background:  #fff;
    z-index: 9; 
    color:var(--user-txt-color);
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 

  }  

  .hlo-popup {
    position: absolute;
    width:90%;
    max-width:90%;
   
    left:2%;
    /* transform: translateY(-50%) translateX(-50%); */
    margin-left: auto;
    margin-right: auto;
    z-index: 9; 
    top:0px;
    margin-top:5%;
    color:var(--user-txt-color);
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
    
  }

  .pvKirja-popup {
    display: none;
    position: absolute;
    top:2%;
    height: 80%;
    position:absolute;
    left:2%;
    width:90%;
    max-width:90%;
  
    border-radius: 12px;
    border: 3px solid var(--chat-border-color);
    background: var(--user-bg-color);
    z-index: 9;
    color: var(--user-txt-color);
    box-shadow: 0px 8px 16px 0px rgb(0 0 0 / 20%);
  }

  .admin-popup {
    left:20%;
    right: auto;
   
    width: 90%;
  }

  

.yhteys-popup {
  background-color: whitesmoke;
  position: absolute;
  top: 2%; 
 
  /* margin-left: auto;
  margin-right: auto;
  transform:  translateX(10%); */
  /* width:80%; */
 
  border: 3px solid var(--popFrm-border-color);
  height:fit-content;
  border-radius: 12px;
  z-index: 9; 
  left:5%; 
  right:5%;
  /* width:80%; */
  margin-left: auto;
  margin-right: auto;
  width: 80vw;
  max-height: 80%;
  max-width: 500px;
  min-width: 300px;

}




}



.isompi {
  top:40%;
  left:50%;
  max-width:60%;
  min-height:300px;
}

.yleinen-popup input,.yleinen-popup select, .iso-popup input,.iso-popup select {
  /* width:80%; */
  /* border-radius: 12px;  */
  /* text-align: center; */
  height: 25px; 
}

.yleinen-popup input,.yleinen-popup checkbox select ,.iso-popup input,.iso-popup checkbox select {
 
  height: 25px; 
  border: 2px solid var(--chat-border-color);
   
}

.txtKeskelle {
  text-align: center;
}

.txtOikealle {
  text-align: right !important;
}


.txtVasemmalle {
  text-align: left;
}


.yleinen-popup:not(.vainLuku)  input:hover, select:hover ,.iso-popup:not(.vainLuku)  input:hover, select:hover {
  background-color:var(--main-hover-color);
}
.yleinen-popup .vainLuku ,.iso-popup .vainLuku{

  background-color:inherit; /*var(--main-bg-color);  var(--vainluku-bg-color);*/
  border:0px;
  pointer-events: none;
}

.iso-popup {
  display: none;
  position: absolute;
  top: 2%; 
  margin-left: auto;
  margin-right: auto;
  width:80%;
  max-width:1100px;  
  transform:  translateX(10%);
  border-radius: 10px;
  border: 3px solid var(--chat-border-color);
  background-color: var(--user-bg-color);
  z-index: 9; 
}
.yleinen-popup input.vainLuku  ,.iso-popup  input.vainLuku {
  background-color:var(--vainluku-bg-color);
}



.sulje{
 
  color: #ffffff !important;
}



.valkoinen{
 
  background-color: var(--main-txt-color);
 

}


.yhdenTehtavat-popup {
  display: none;
  position: absolute;
  /* top: 10%;  */
  left:50%;
  width:80%;

  /* transform: translate(25%, -50%); */
  transform: translateY(-50%) translateX(-50%);
  width:80%;
  max-width:1000px;
 
  /* transform: translate(25%, -50%); */
  /* transform: translateY(-50%) translateX(-50%); */
  border-radius: 4px;
  border: 3px solid var(--chat-border-color);
  background: var(--user-bg-color);
  z-index: 9; 
  color:var(--user-txt-color);
}  


.eiNay {
  visibility: hidden;
}

.hidden {
  display: none;
}

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

/* 
.combo {
  border-radius:6px;
  
} */
/* 
.combo:hover {
  background-color:var(--main-hover-color);
} */

.hakuKnt {
  width:100%;
  border-radius: 10px;
  margin:8px 0;
  padding:10px 10px;
  display: inline-block;
  border: 1px solit #ccc;
  background-color: var(--box-bg-color);

}

@media screen and (max-width: 768px) {
  .hakuKnt {
    margin:4px 0;
    padding:5px 10px;
  }
}


.switch {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 16px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
 
}

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

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* background-color: var(--main-hover-color); */
  background-color: darkgray;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 0px;
  bottom: 0px;
  background-color: #cd2525;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before:disabled {
  background-color: grey;
}

input:checked + .slider {
  /* background-color: var(--nappi-bg-color); */
  background-color: darkgray;
}

input:focus + .slider {
  box-shadow: 0 0 1px  var(--main-hover-color); 
}

input:hover {
  background-color: var(--main-hover-color);
}

input:checked + .slider:before {
  -webkit-transform: translateX(16px);
  -ms-transform: translateX(16px);
  transform: translateX(16px);
  background-color: green;
  
}


/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
  
}


.hakuEhdot { 
  position: relative;
  overflow: hidden;
}

.asetusAlue {
  max-width: 800px;
  margin: auto; 
}

.asetusAlueAd {
  max-width: 1000px;
  margin: auto; 
}

.asetusTausta { 
    grid-template-columns: 60% 40% ;
    background-color:#fff;
    padding: 5px;   
    color: var(--button-txt-color);
    border-radius: 10px;
    margin:auto;
    margin-bottom:2px;
    width:90%;
}

.asTaustaKapea {
  width:50% !important;
  min-width: 300px !important;
}
.asTausta5050 {
  grid-template-columns: 50% 50% !important;
}

.asTausta1090 {
  grid-template-columns: 10% 90% !important;
}

.asTausta2080 {
  grid-template-columns: 20% 80% !important;
}

.asTausta3070 {
  grid-template-columns: 30% 70% !important;
}


@media screen and (max-width: 600px) {
  .asTausta3070 {
    grid-template-columns: auto !important;
  }
}

.asTausta4060 {
  grid-template-columns: 40% 60% !important;
}


.asTausta8020 {
  grid-template-columns: 80% 20% !important;
}

@media screen and (max-width: 600px) {
  /* .asTausta8020 {
    grid-template-columns: auto !important;
  } */
}

.asTausta7030 {
  grid-template-columns: 70% 30% !important;
}

.asTausta701020 {
  grid-template-columns: 70% 10% 20% !important;
}

@media screen and (max-width: 600px) {
.asTausta701020 {
  grid-template-columns: 50% 20% 30% !important;
}
}
.reunat {
  border: 2px solid var(--chat-border-color);
}


.pyoristys {
  border-radius: 10px;
}
.asetusTxt {
  color:var(--omaTable-txt-color);
  font-size: 1.1rem;
  padding-left: 10px;
}

.eiPadd {
  padding-left: 0px;
}

.ohjeTxt {
  font-size: 0.7rem;
}

.user-ohjeTxt {
  font-size: 1rem;
  text-align: left;
  margin-left: 10px;
}

.yllapitoTausta {
  grid-template-columns: 60% 40% ;
  background-color:var(--user-bg-color);
  /* padding: 5px;    */
  color: var(--user-txt-color);
  border-radius: 5px;
  margin:auto;
  /* margin-bottom:2px; */
  width:90%;  
}

.ypLevea {
  width: 100%;
  padding-left:0px;
  grid-template-columns: 40% 40% 20%;
  padding-top: 2px;
  margin-top:1px
}

.valintaAlue {
  width:60%;
  max-width: 700px;
  float: right;
}



@media screen and (max-width: 768px) {

  .rivita {
    /* inline-size: 150px; */
    overflow-wrap: break-word;
  }
}

.asetusArvo {
  padding-left: 10px;
  height:18px ;  
}

.muokkausIP {
  border:none;
  width:100%;
  background-color: transparent;
  /* background-color: var(--omaTable-row-bg-color); */

}

.muokkausIP:hover :not(read-only){
  background-color: white !important;
  border-radius: 0;
}

.auto_height { 
  min-width: 80%;
}

.omaTextArea{
  width: 80%;
  border-radius: 5px;
  font:var(--body-fonts);
  /* font-size: 1.1rem; */
  /* height: 25px; */
}


.loader {
  border: 16px solid #f3f3f3;
 
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 80px;
  height: 80px;
  /* text-align: center; */
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
  z-index: 100;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

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

.center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  
}

.samarivi {
  /* position: relative; */
  display: flex;
  vertical-align: middle;
}


.navbar {
  /* overflow: hidden; */
  background-color: black; 
  display: block;
  width:unset;
}

#alku-nav{
  display: none;
}


.omatieto {
  color:white; 
  margin-right: 20px;
}


.menuicon {
  display:none;
  float: left;
  color:var(--main-txt-color); 
}


.dropbtn {
  background-color: black;
  color: white;
  padding: 12px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}


.userdropbtn {
 
  color: black;
  padding: 12px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.closebtn {
  display: none;
}


.dropdown {
  position: relative;
  display: inline-block;
}




.dropdownOikea {
  position: relative;
  display: inline-block;
}



.dropupOikea {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
  z-index: 1;
}


.dropup-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 8px 8px;
  text-decoration: none;
  display: block;
}


.dropdownOikea-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  right:0;
  z-index: 1;
}


.dropupOikea-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  right:5%;
  bottom:70px;
  z-index: 1;
}

.dropdownOikea-content a {  
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}


.dropupOikea-content a {  
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-weight: 400;
}


/* 
.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}


.dropdownOikea-content a:hover {background-color: #ddd;}

.dropdownOikea:hover .dropdownOikea-content {display: block;}


.dropdownOikea-content a:active {background-color: #ddd;}
.dropdownOikea:active .dropdownOikea-content {display: block;}

*/


.dropdown:hover .dropbtn {
  background-color: whitesmoke; 
   color: black;
}

/*
.dropdownOikea:hover .dropbtn {
  background-color: whitesmoke;
  color: black;
}


.dropdownOikea:hover .dropbtn {
  background-color: whitesmoke;
  color: black;
} */

@media screen and (max-width: 768px) {
  .navbar {
    /* overflow: hidden; */   
      height: 100%;
      width: 0;
      position: fixed;
      z-index: 1;
      top: 0;
      left: 0;
      background-color: #111;
      overflow-x: hidden;
      transition: 0.5s;
      padding-top: 60px;
  }  
    
  .menuicon {
    display:flex;
    float: left;
    color:var(--main-txt-color); 
  }
  #alku-nav{
    display: inline
  }

    
  .closebtn {
    display: block;
    position: absolute;
    top: 0;
    right: 25px;
    font-size:1.5vh;
    margin-left: 50px;
    padding-top: 10px;
    color:var(--main-txt-color); 
  }

  

  .dropbtn {
    /* color:black; */
    /* display: block; */
    background-color: transparent;
    left: 0px;
  }

    
  .dropdown {
    position: relative;
    display: block;    
  }

  .dropdownOikea-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block ;
  } 
    
    
  .omatieto {
    color:black;   
  }

  
.dropdownOikea-content {
  display: none;
  position: relative;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  right:0;
  z-index: 1;
}

.dropdownOikea-content a {
  /* position: relative; */
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.vainLevea {
  display: none !important;
}
  
}
 
.fiilisNappi {
  /* font-size: 60px;  */
  margin-left: 10px;
 
}

.eiCursoria {
  cursor: none;
}

.isohata {
  background-color: red;;
}

.fiilisCmb {
  width:auto !important;
}


.fiilisPieni {
  font-size: 30px; 
}

.fiilisP {
  border-radius: 50%;
}
.fiilis1 {   
  background-color: #8faadc !important;   
}
.fiilis2 {   
  background-color: #dae3f3 !important;   
}
.fiilis3 {   
  background-color: #ffe699 !important;   
}
.fiilis4 {   
  background-color: #e2f0d9 !important;   
}

.fiilis5{
  background-color: #a9d18e !important;   
}

.fiilisRajaus {
  margin: 0px;
 
}


.aikaleima {
  font-size: 0.5rem;
  text-align: center;
}


.dialog-ovelay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.50);
  z-index: 999999
}
.dialog-ovelay .dialog {
  width: 400px;
  margin: 100px auto 0;
  background-color: #fff;
  box-shadow: 0 0 20px rgba(0,0,0,.2);
  border-radius: 10px;
  overflow: hidden
}
.dialog-ovelay .dialog header {
  padding: 10px 8px;
  /* background-color: #f6f7f9; */
  background-color: var(--palkki-bg-color);
  border-bottom: 1px solid #e5e5e5
}
.dialog-ovelay .dialog header h3 {
  font-size: 14px;
  margin: 0;
  color: #555;
  display: inline-block
}
.dialog-ovelay .dialog header .fa-close {
  float: right;
  color: #c4c5c7;
  cursor: pointer;
  transition: all .5s ease;
  padding: 0 2px;
  border-radius: 1px    
}
.dialog-ovelay .dialog header .fa-close:hover {
  color: #b9b9b9
}
.dialog-ovelay .dialog header .fa-close:active {
  box-shadow: 0 0 5px #673AB7;
  color: #a2a2a2
}
.dialog-ovelay .dialog .dialog-msg {
  padding: 12px 10px
}
.dialog-ovelay .dialog .dialog-msg p{
  margin: 0;
  font-size: 15px;
  color: #333
}
.dialog-ovelay .dialog footer {
  border-top: 1px solid #e5e5e5;
  padding: 8px 10px
}
.dialog-ovelay .dialog footer .controls {
  direction: rtl
}
.dialog-ovelay .dialog footer .controls .button {
  padding: 5px 15px;
  border-radius: 3px
}
.button {
cursor: pointer
}
.button-default {
  background-color: rgb(248, 248, 248);
  border: 1px solid rgba(204, 204, 204, 0.5);
  color: #5D5D5D;
}
.button-danger {
  background-color: #f44336;
  border: 1px solid #d32f2f;
  color: #f5f5f5
}

.button-ok {
  background-color: #43f436;
  border: 1px solid #2fd32f;
  color: var(--button-txt-color)
}


@media only screen and (max-width: 550px) {  
  .help-popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    border: 3px solid black;
    border-radius:15px;
    z-index: 15; 
    min-height:250px ;
    max-height: -moz-calc(100% - 40px);
    /* WebKit */
    max-height: -webkit-calc(100% - 40px);
    /* Opera */
    max-height: -o-calc(100% - 40px);
    /* Standard */
    max-height: calc(100% - 40px);
  }
}



@media only screen and  (min-width: 551px)  {
  .help-popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    border: 3px solid var(--omaTable-txt-color);
    border-radius:15px;
    z-index: 15; 
    min-height:250px ;
    /* max-height: 80vh; */
    /* Firefox */
    max-height: -moz-calc(100% - 18px);
    /* WebKit */
    max-height: -webkit-calc(100% - 18px);
    /* Opera */
    max-height: -o-calc(100% - 18px);
    /* Standard */
    max-height: calc(100% - 18px);

  }
}




.help-container {
  max-width: 100%;
  padding: 10px;
  border-bottom-left-radius:15px;
  border-bottom-right-radius:15px;
  background-color: var(--omaTable-bg-color); 
  color:var(--omaTable-txt-color);
  min-height:250px ;
  /* overflow:auto; */

}   

.help label { 
  border:1px;
  padding-left:10px;
}

.helppi {
  text-align: right ;
  cursor: pointer;
}

.helppi-Item {
  display: inline-flex;
  flex-direction: row-reverse;;

}

.helppi-otsikko {
  background-color: black;
  color:white;
  border-top-left-radius:13px;
  border-top-right-radius:13px;
  padding-left:10px;
}

.sulkiBtn {
  margin-right: 10px;
  float: right;
  cursor: pointer;
}
.samaRivi {
 
  vertical-align: middle;

}

.yleisHelppi {
  /* margin-right:5%; */
  float:right;
  width:5%;
 
}

.ikoni {
  color: #cd2525;
  display: inline-block; /* Inline elements with width and height. TL;DR they make the icon buttons stack from left-to-right instead of top-to-bottom */
  position: relative; /* All 'absolute'ly positioned elements are relative to this one */
  padding: 2px 5px; /* Add some padding so it looks nice */
}

.button__badge {
  background-color: #fa3e3e;
  border-radius: 50%;
  color: white;
 
  padding: 1px 3px;
  font-size: 10px;
  
  position: absolute; /* Position the badge within the relatively positioned button */
  top: 0;
  right: 0;
}


.button__badgeAlas {
  background-color: #fa3e3e;
  border-radius: 50%;
  color: white;
 
  padding: 1px 3px;
  font-size: 10px;
  
  position: absolute; /* Position the badge within the relatively positioned button */
  bottom: 0;
  right: 0;
}


.pikkuChart {
  width:100px;
  height:25px;
  display: block;
}

.isoChart {
  height:100px;
  display: "";
}

.nimiTd {
  width:150px;
  max-width: 25%;
}

.siirtoBtnAlue {
  padding-top:10px;
  padding-bottom:10px;
  width:300px;
  align-content: center;
  background-color: var(--box-bg-color);
  display: flex;
  margin-top: 5px;
  border-radius: 12px;
  margin-left: auto;
  margin-right: 2px;
}

.siirtoBtnAlue label, input {
  /* text-align:center; */
  width:40px;
  color:black;
   margin-right:20px;
   font-size: 1.1em;
}

@media only screen and  (max-width: 768px)  {
  .siirtoBtnAlue {
      margin-right: auto;
  }
}

.kaavio {
  background-color: var(--box-bg-color);
}

.vaihtoBtnAlue {
  padding-top:10px;
  padding-bottom:10px;
  width:70;
  align-content: center;
  background-color: var(--box-bg-color);
  /* display: flex; */
  margin-top: 5px;
  border-radius: 12px;
  /* margin-left: auto; */
  margin-right: auto;
}

.valinnat{
  display:flex
}

#kaavioInfo-div{
  padding: 15px;
  text-align: center;
  background-color: var(--button-bg-color);
}

.kaavio-popup {

  display: none;
  position: absolute;
  top: 5%; 
  margin-left: auto;
  margin-right: auto;
  width:94%;
  max-width:1500px;  
  transform:  translateX(3%);
  border-radius: 10px;
  border: 3px solid var(--popFrm-border-color);
  background-color: var(--main-txt-color);
  z-index: 15; 

}

.kokosivu {
  height:500px;
}

.tehtava {
  color:var(--omaTable-txt-color);
  font-size: 1.1em;
  padding: 0;
  margin-left: 0;
}

select:not(.fiilisCmb) {
  min-width:100px;
}

.margin0 {
  margin-left: 0;
  margin-right: 0;
}

.paddingL0 {
  padding-left: 0;
}

.puuttuu {
  color:var(--puuttuu-color);
  border-color: var(--puuttuu-color);
  border: 3px;
}

.puuttuva {
  background-color: var(--puuttuu-color) !important;

}

.aliTaulu {
  padding-left: 10px;
  font-size: 0.9em;
  width:90%;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid;
}

.infoTd {
  /* display:inline-block; */
  min-width: 100px;
  font-size: 0.9em;

}

.hloOtsikko {
  font-size: larger;
  font-weight: bold;
  background-color: var(--palkki-bg-color);
  /* width:80%;  */
  margin-left: auto;
  margin-right: auto;
  padding-top: 3px;
  margin-top:2px;
}

.jaksoOtsikko {
  font-weight: bold;
  width:100%;
  margin-left: auto;
  margin-right: auto;
  /* vertical-align: bottom; */
  height: 25px;
  padding-top:2px;
}

.tehtavaTaulu {
  background-color: var(--omaTable-bg-color); 
  
  color:var(--omaTable-txt-color); 
  border-collapse:collapse;
  border:solid black 1px;
  border-radius:6px;
  border-spacing: 0px;
  /* margin-top:10px; */
  width:100%;
  margin-left: auto;
  margin-right: auto;
}

.tehtavaTaulu tr  {
  border: solid lightgray 1px;
  background-color: var(--omaTable-row-bg-color); 
  height:30px;
 
}

.tehtavaTaulu tr:nth-of-type(odd)  {
  /* background-color: var(--omaTable-row-bg-color) */
  background-color: var(--omaTable-rowODD-bg-color);
}   


.lstFiilis {
  padding-top: 1vh;
  padding-bottom: 1vh;
  width: 200px;
  /* display: flex; */
  margin-left: auto;
  margin-right: auto;
}

.fiilisLista {
  text-align: center;
  /* width:60%;
  min-width: 300px;
  max-width: 600px; */
  margin-left: auto;
  margin-right: auto;
  border: 1px solid;
  border-radius: 12px;
  background-color: lime;
}



.userTausta {
  background-color: gray;
}

.user-alue {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  /* border: 1px solid; */
  background-color: #fff;
  height: 90vh;
  position: relative;
  overflow-x: auto;
  border-left: 2px solid #f0f2ff;
  border-right: 2px solid  #f0f2ff;
}


.viimFillikset { 
  text-align: center; 
  margin-left: auto;
  margin-right: auto;
  /* border: 1px solid; */
  height:var(--palkki-yla-korkeus);
  background-color:var(--palkki-bg-color);
}


.user-palkki {
  background-color: #f7991f;
  display: block;
  margin-left: auto;
  margin-right: auto;
  color: black; 
  /* font-family: "fredoka"; */
  font-size: 18px !important;
  text-shadow: none !important;
  font-weight: 400 !important;
}

.user-ylapalkki {
  /* background-color: black; */
  color: black;
  /* padding: 12px; */
  font-size: 20px;
  font-weight: bold;
  border: none; 
  /* position: relative; */
  /* position: fixed; */
  top:0;
  left:0;
  right: 0;
  display: content;  
  /* display: flex-block; */
  /* height:var(--palkki-yla-korkeus); */
  
}

.user-alapalkki {
  /* background-color: black; */
  color: var(--user-txt-color);
  /* padding: 12px; */
  font-size: 16px;
  border: none; 
  position: fixed;
  bottom:0;
  left:0;
  right: 0;
  display: inline-block;  
  height:var(--palkki-ala-korkeus);
}

.user-ylapalkkiOtsikko {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
  /* background: #cd2525; */
  border-radius: 10px 10px 0 0;
  /* border: 2px solid #cd2525; */
  /* color: #fff !important; */
  /* font-size: 18px !important; */
  /* font-family: "fredoka"; */
  /* text-shadow: none !important; */
  /* font-weight: 600 !important; */
  background-color:#f7991f;
  color: black;
  font-family: 'Poppins', sans-serif !important;
    font-size: 24px;
    font-weight: 500;
}

/*.popUpOtsikko {
  color: #fff !important;
  font-size: 18px;
  font-family: "fredoka";
  text-shadow: none !important;
 }*/

.pop-ylanapit {
  text-align: right;
  padding-right: 10px;    
  height: 40px;
  background-color: var(--palkki-bg-color);
  display: none;
}



.userLeveys {
  /* width:760px; */
  /* min-width: 400px; */
  max-width: 800px;
}
/* 
@media only screen and (max-width: 800px) { 
  .userLeveys {
    width:95%
  }
  
} */

/* .fiilis-btn-ylamargin {
  margin-top: 0.25vh;
} */

.fiilis-btn{ 
    display: inline-block;
    background-color: #7b38d8;
    /* padding: 20px; */
    /* width: 200px; */
    color: #ffffff;
    text-align: center;
    border: 4px double #cccccc;
    border-radius: 50%;
    /* font-size: 28px; */
    cursor: pointer; /* add this line */
    /* margin: 5px;  */
}

/* .user-tehtAlue {
  margin-left: auto;
  margin-right: auto;
  border: 1px solid;
  border-radius: 12px;
  background-color: yellowgreen;
 
} 
*/
.user-teht {
  /* height: 25px; */
  padding-bottom: 5px;
  display: flex;
  align-items: center;
  font-size: 16px;
  margin-bottom: 5px;
  /* font-family: "fredoka"; */
  font-weight: 400;   
}

.user-teht-otsikko {
  height: 35px;
  font-size: 18px;
  /* font-style: oblique; */
  /* background-color: #555; */
  text-align: left;
  display: grid;
  font-weight: 400;
  color: black;
  text-shadow: none;
  margin-top: 3px;

 
}

.user-teht-chk {
  width: 20px;
  height: 20px;
}

.user-teht-aika {
  font-size:12px;
  /* justify-content: flex-end; */
 
}
.user-pisteet {
  justify-content: flex-end;
}

.user-teht-otsikko-vari {
  color: var(--button-txt-color);
}

.user-teht-vari {
  color: var(--button-txt-color);
}

.user-teht-ohjetxt {
  font-size: 12px;
  text-align: left;
  margin-left:30px;
}
/* 
@media only screen and (max-width: 800px) { 
  .user-teht {
    height:5.0vh;
    font-size:2vh;
  }
    
  .user-teht-aika {
    font-size:1.2vh;
  }

  .user-teht-otsikko {
    height:5vh;
    font-size:3vmin;  
  }
} */

/* 
@media only screen and (max-width: 400px) { 
  .user-teht {
    height:5.0vh;
    font-size:1.5vh;
   
  }
    
  .user-teht-aika {
    font-size:1vh;
  
  }

  .user-teht-otsikko {
    height:4vh;
    font-size:2vmin;  
  }

  .user-teht-chk {
    width: 2.5vh;
    height: 2.5vh;
  }  
} */


.user-teht[class*="grid"] {
  align-items: bottom !important;
}


.chat-popup {
  display: none;
  position: absolute;
  /* top: 50%; */
  /* left: 50%; */
  /* width: 600px; */
  /* max-width: 40%; */
  /* transform: translate(25%, -50%); */
  /* transform: translateY(-50%) translateX(-50%); */
  border-radius: 10px;
  border: 2px solid black;
  /* background: var(--main-bg-color); */
  z-index: 9;
  bottom: 0;
  right: 0;
}  

.chatKirjoitusAlue {
  display: flex;   
  margin-left: auto;      
  margin-right: auto;         
  right: 0;
}


.chatTR {
  border-bottom: 1px solid lightgray;
}

.chatTd {
  text-align: left;
}


.chat-txt {
  font-size: 1.3rem;
  color:var(--user-txt-color);
}

.chatcombo {
  width:60%;
}

.chat_title {
  color: black;
  background-color: #f7991f;
  padding-left: 5px;
  border-bottom: 2px solid #f7991f;
  letter-spacing: 0.5px;
  padding-top: 0.7rem;
  height: 30px;
  overflow: hidden;
  text-shadow: none !important;
}

.chatti {
	position: absolut;		
	height: 45vh;
  width:90vW;
  max-width:500px;
	border: 1px solid #aaa;
	/* box-shadow: 0px 0px 6px #a66; */
	background-color:var(--user-bg-color);
}

 
.chatGrid {
  display: grid;
  grid-template-columns:  30% 50% 20%;
}

.chatGridItem {
  display: grid;
}

/* 
@media only screen and (max-width: 500px) { 

  .chatti {
    max-width: 500px;
    height: 80vh;;
  }
} */


.chat_inner {
	/* height: 350px; */
  height: calc(100% - 100px);
	/* max-width: 500px;
  width:90%; */
  width:100%;
}

.clear {
  clear: both;
  height: 5px;
}

.chat-grid {
  display: grid;
  grid-template-columns:  70px auto;
  height: 70px;
  width:90%;
  padding-top: 15px;
  margin-left: auto;
  margin-right: auto;

}
.chat-grid-item {
 
  color:var(--user-txt-color);
  background-color: var(--user-box-bg-color);  
}


.chat-grid-border {
  border-radius: 5px;
  border: 2px solid #f7991f;
}


.chat_messages {
	/* height: 250px; */
	padding: 2px 0px 2px 5px;
	overflow-y: auto;
	overflow-x: hidden;
  height: 95%;
  z-index: 500;
  /* bottom: 0; */
  /* width: 90%; */
  margin-right: 0;
  position: absolute;
  /* display: flex; */
  align-items: flex-end;
  flex-direction: row-reverse;
  height: calc(100% - 100px);
  width: -webkit-fill-available;
}

.chat-writer {
  float:left;
  font-size: 80%;
  margin-top: 2px;
  
  text-align: left;
  color: var(--user-txt-color);
}

.gray {
	color: #999;
}


.blockquote {
  padding: 0.5em 20px; /* add some space within the quote */
  border: 1px solid #ccc;
  border-left: 4px solid #007acc; /* add a left border to signify the quote */
  font-style: italic; /* make the text italic to differentiate */
  position: relative;
  font-size: 80%;
  color: #888;
  background-color: #fffff8;
  overflow-y: hidden;
  overflow-x: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  word-break: break-word;
}

.blockquote:before {
  content: '“';
  font-size: 2em;
  position: absolute;
  left: 3px;
  top: -5px;
}

.blockquote:after {
  content: '”';
  font-size: 2em;
  position: absolute;
  right: 10px;
  bottom: -5px;
}

chat-message-container
.chat-message-container-other > .chat_emojis {
	float: left;
	margin-left: 50px;
	min-height: 40px;
  
}


.chat-message-container-own {
	float: right;
	margin-right: 10px;
	min-height: 40px;
  min-width:80%;
  display:inline-flex; display: inline-flex;
  justify-content: flex-end;
}

.chat-message-container-other {
	float: left;
	/* margin-left: 50px; */
	min-height: 40px;
  min-width:80%;
  display:inline-flex;

}

.chat-message-content {
	width: 75%;
    max-width: none;
}


.chat_textarea_container, .publicchat_textarea_container {
  border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
  /* background-color: #fff; */
  /* background-color: rgb(15, 241, 15); */
}
.chat_textarea_container {
bottom: 0;
width: 100%;
position: absolute;
/* display: flex; */
}

.chat_textarea_quote {
	margin: 3px;
	display: none;
	height: 15vh;
}
.chat_textarea_quote > img {
	/* max-height: 4em !important; */
	margin-top: -20px;
}
.chat_textarea_quote_close {
	float: right;
    top: -2px;
    right: -15px;
    position: relative;
}

.chat-img {
  border-radius: 50%;
  width:45px;
  height:45px;
}


.chat_textarea {
	display: block; /*inline-block;*/
	border: 0px none;
	overflow: auto;
	overflow-x: hidden;
	color: #333;
	/* resize: none; */
	/* width: 80vw !important; */
  /* max-width:400px; */
	min-height: 50px;
	padding: 0px;
	padding-bottom: env(safe-area-inset-bottom);
	/* background-color: transparent; */
	margin-top: 2px;
	margin-left: 2px;
	line-height: normal;
  align-items: flex-end;
  bottom: 0;
  position:absolute;
}

.chat-message {
  border: 1px solid #dcdee3;
  border: 1px solid rgba(0, 0, 0, .18);
  border-bottom-color: rgba(0, 0, 0, .29);
  color: #373e4d;
  min-height: 14px;
  box-shadow: 0 1px 0 #dce0e6;
  padding-bottom: 3px;
  padding-top: 4px;
  /* text-shadow: rgb(255 255 255 / 50%) 0 1px 0; */
  white-space: pre-wrap;

  word-wrap: break-word;
  word-break: break-word;
  border-radius: 10px;
  font-size: 90%;
  display: inline-block;
  text-align:left;
  min-height: 40px;
  margin-top: 6px;
  margin-bottom: 6px;
  width:50%;
  ;
}

.chat-message-own {
  background-color: var(--user-box-bg-color);
  /* background-image: -webkit-gradient(linear, center bottom, center top, from(#c7defe), to(#e7f1fe));
  background-image: -webkit-linear-gradient(bottom, #c7defe, #e7f1fe); */
  margin-right: 6px;
  padding-left: 6px;
  padding-right: 5px;
  /* max-width: 65%; */
  float: right;
  border-top-right-radius: 0;
  
  /* width: count(90%- 50px); */
  
}

.chat-message-other {
	margin-right: 6px;
	margin-left: 5px;
	padding-right: 6px;
	padding-left: 5px;
	background-color: var(--user-box-bg-color);
	/* background-image: -webkit-gradient(linear, center bottom, center top, from(#f2f2f2), to(#fff));
	background-image: -webkit-linear-gradient(bottom, #f2f2f2, #fff); */
	border-top-left-radius: 0;
  
  float: left;
}

.chat_history_container {
	position: relative;
	margin-top: 1rem;
}
@media (max-width: 1000px) {
	#chat_search {
		width: 50% !important;
	}
}
.chat_history_user {
	display: inline;
	vertical-align: top;
	margin-left: 15px;
	/* font-size: 16px; */
	line-height: 20px;
}

.chat_time_status_container {
	float: right;
}
.chat_time {
	font-size: 10px;
	color: #888;
  float: right;
  margin-right: 7px;;
}

.chat-ryhmat {
  height: 40px;
  padding-top: 5px;
  text-align: right;
  width: 90%;
  margin-right: auto;
  margin-left: auto;
}

.chat-ryhma {
  font-weight: 500;
  float: left;
  /* font-family: 'Fredoka'; */
  font-size: 18px;
}


.chat-alue {
  background-color: var(--user-bg-color); 
  margin-top: 10px;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  height:60px;
 
}

.chat-kooste {
  display: flex;
  height:100px;

}

.chat-kuva {
  width: 40px;
  border-radius: 50%;
  background-color: #fff;
  height: 40px;
  margin: 10px;
  margin-left: 20px;
  border: 2px solid #cd2525;
}

.chat-osa {
  padding-top: 5px;
  padding-bottom: 5px;  
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  
}
.taytaDiv {
  width: -webkit-fill-available;
}


.chat-listaus {
  background-color: #fff;
  display: grid;
  grid-template-columns: 50% 50%;
 
}
.chat-listaus-viesti {
float: left;
padding-left: 20px;
font-size: 16px;
font-family: "roboto";
}

.chat-listaus-tiedot {
  display:flow-root
}

.chat_send_button, .publicchat_send_button {
	float: right;
    padding-top: 3px;
    /* padding-bottom: 7px; */
    padding-left: 7px;
    padding-right: 5px;
    margin-top: 2px;
    margin-right: 2px;
    /* margin-bottom: 5px; */
	  /* border-radius: 12px;	 */
    width:40px;
    display: inline-flex;
    justify-content: space-around;
    /* align-content: center; */
    display: inline-flex;
    justify-content: space-around;
    align-items: center;
}
.mobilechat .chat_send_button {
	margin-right: 4px;
}
.chat_send_button > i, .publicchat_send_button > i {
	font-size: 15px !important;
	vertical-align: baseline;
}


.profilephoto_thumb {
	height: 50px;
	width: 50px;
	/* float: left; */
	background-size: cover;	
	background-position: center;
	cursor: pointer;	
	border-radius: 25px;
}

.vierasKuva {
  float: left;
  background-color: #fff;
  color:#cd2525;
  border: 2px solid #cd2525;
}

.omaKuva {
  float: right;
  background-color: #fff;
  color:#cd2525;
  border: 2px solid #cd2525;
}


@media only screen and (max-width: 768px) { 

  .chat-popup {
    /* max-width: 500px; */
    width:99vw;
    display: none;
    position: absolute;  
    border-radius: 10px;
    border: 2px solid black;
   
    z-index: 9;
    bottom: 0;
    right: 0;
   
  }
  .chatti {
    width: 99vw;
    max-width: none;
    height: 100vh;
    bottom: 0;
    position: fixed;
  }

  
.chatGrid {
  display: grid;
  grid-template-columns:  30% 50% 20%;
}

.chatGridItem {
  display: grid;
}

    
  .chat_inner {
    /* height: 350px; */
    height: 100vh;
    width: 99vw;
  }

  .chat-message {
    width: 70%;
  }

  
.chat-kuva {
  display: none;
  padding-left: 0px;

}

.chat-listaus-viesti {
  float: left;
  padding-left: 0px;
  
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  
}

}


.valkIkoni {
  color:white;
}

#lisaaNappi-div {
  width: 300px; 
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.yleisBtn {
  color: #cd2525;
  background-color: #fff;
  border: 2px solid #cd2525;
  border-radius: 10px;
  height:30px;
  font-weight: 400;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  /* font-family: "fredoka"; */
}

.btnOikealle {
  margin-right: 10px;
  margin-left: auto;
}

.inputLevee {
  width:100% !important; 
  padding-left: 0; 
  
}

.tehtOtsikko {
  background-color: #f0f2ff;
}
.kalOtsikko {
  background-color: var(--bg-color-kalenteri);
}

.vinkkiAlue {
  width:90%;
  border: 1px solid black;
  border-radius: 12px;
  padding:5px;
  display: none;
  background-color: whitesmoke;
  overflow: visible;
  /* box-shadow: 5px 5px 2px #888888; */
  position: inherit;
  margin-left: auto;
  margin-right: auto;
}

.yhtTiedotTbl {
  width:100%;
}

.yhtTiedotTd {
  font-size: small;
}
.aihe {
  width:40%;
  padding-left: 5px;
}
.tieto {
  width: 100%;
}
 
.profiilikuva {
  display: inline-block;
  overflow: hidden;
  width:100%;
  height: 60%;  
}

.tnKuva {
  float: left;
  margin-left: 5px;
  margin-top: 5px;
}

#profiilikuva {
  max-width: 100%;
  max-height: 100%;
}

.userAliOsa{
  border: 1px solid var(--chat-border-color);
  background-color: aliceblue;
}

.stars a {
  display: inline-block;
  padding-right: 4px;
  text-decoration: none;
  margin: 0;
}

.stars a:after {
  position: relative;
  font-size: 18px;
  font-family: 'FontAwesome', serif;
  display: block;
  content: "\f005";
  color: gray;
}

#spantahdet {
  font-size: 0;
 
}

.stars a:hover~a:after {
  color: gray !important;
}

span.active a.active~a:after {
  color: #f7991f;
}

span:hover a:after{
  color: #e97221 !important;
}

span.active a:after,
.stars a.active:after{
  color: #e97221;
}

#arviointi-div {
  display: flex;
  /* justify-content: space-around; */
  width:90%;
  margin-left: auto;
  margin-right: auto;
}

.kommenttiosa {
  width: 80%;
  margin-left: auto;
  margin-right: auto; 
}

.tahdet a {
  display: inline-block;
  padding-right: 4px;
  text-decoration: none;
  margin: 0;
}


.tahdet a:after {
  position: relative;
  font-size: 18px;
  font-family: 'FontAwesome', serif;
  display: block;
  content: "\f005";
  
}



.ohjaajanKuitti {
  font-weight: bold;
}
.omaArvio {
  color:#f7991f !important;
}

.ohjaajaArvio {
  color:green !important;
}

.eiNahty {
  color:red;
  font-size: 1,2rem;
}

.kuittaus-btn{    
  width:100px;

}

.lisaa-btn{    
  width:150px;
}

.luo-btn {
  display: flex;
  justify-content: flex-end;
  margin-right: 40px;
}

.vaihto-btn {
  height: 35px;
  padding-top: 6px;
  font-size: 16px;
}

.teht-btn {
  width:100px;
}


.teht-btn-div {
  display: flex;
  justify-content: flex-end;
  margin-right: 10px;
}

.vastaus-div {
  margin-left: 20px;
}

.poistaHlo-btn {
  width: 80%;
  /* margin-left: auto; */
  margin-right: auto;
}

.virheHuom {
  text-align: center;
  color: red;  
}

.vinkkiKnt {
  width:300px;
  max-width:60%
}

.chatPoimi {
  display: flex;
    justify-content: flex-end;
    margin-right: 5%;
}

.chatKorostus {
  background-color: salmon;
}

.chatKpl {
  display: flex;
  align-self: flex-end;

}

.chat-AktValinta {
  background-color: var(--palkki-bg-color); 
   width: 80%;
}

.valittuRivi{
  border: 2px solid darkgray!important;
  background-color: darkgray!important;
}

.valmisNimike {
  padding-left:5px;
  font-style: italic;
}

.modal-box {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.arvioBtnAlue {
  display: flex;
  padding-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}
/* section.active .show-modal {
  display: none;
} */
/* .overlay {
  position: fixed;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
} */
/* section.active .overlay {
  opacity: 1;
  pointer-events: auto;
} */
.modal-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 380px;
  width: 100%;
  padding: 30px 20px;
  padding-top: 0px;
  border-radius: 24px;
  background-color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  transform: translate(-50%, -50%) scale(1.2);
  z-index: 100;
}
section.active .modal-box {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
.modal-box i {
  font-size: 70px;
  color: #4070f4;
}
.modal-box h2 {
  margin-top: 20px;
  font-size: 25px;
  font-weight: 500;
  color: #333;
}
.modal-box h3 {
  font-size: 16px;
  font-weight: 400;
  color: #333;
  text-align: center;
}
.modal-box .buttons {
  margin-top: 25px;
}
.modal-box button {
  font-size: 14px;
  padding: 6px 12px;
  margin: 0 10px;
}

.sanaFunction {
  cursor: pointer;
    color: blue;
    text-decoration: underline;
}

.lisaaPrKuva {
  display: inline-flex;
  justify-content: flex-end;
  float: right;
  /* width: 50%; */
  margin-right: 5%;
}

.odotaIlmoitus{
    margin-top: 20%;  
    margin-right: auto;
    margin-left: auto;
    z-index: 100;
    width: 200px;
    height: 80px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: beige;
    border: 2px solid var(--chat-border-color);
    box-shadow: 2px 2px 2px lightgrey;
    text-align: center;

}

.lstZones{
 
 margin-top: 20px;
  /* display: flex; */
  margin-left: auto;
  margin-right: auto;
}
.zonesP {
  border-radius: 50%;
}

.zones-iso {
  width:150px;
  height:150px;
}
.zones-punainen {
  background-color: red;
}

.zones-vihrea {
  background-color: green;
}

.zones-keltainen {
  background-color: yellow;
}

.zones-sininen {
  background-color: blue;
}

.zones-grid {
  display: grid; 
  grid-template-columns: auto;
}

.zones-griditem {
  border: 0px;
  width:30px; 
}

.zones-vaaka-aika { 
  display: inline-flex; 
  align-items: center;
}

.zones-yksi {
  width:30px;
  height: 30px;
}

.zones-tehtava {
  display: flex; 
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

.zones-tehtava:after {
  content: "T";
}

#popKaavio {
  height: 700px;
}

.taulunRivi {
  box-shadow: inset 1px -1px 2px 2px #333;
  border-radius: 15px;
  border-spacing: 2px;

}

[data-title]:hover:after {
  opacity: 1;
  transition: all 0.1s ease 0.5s;
  visibility: visible;
}
[data-title]:after {
  content: attr(data-title);
  background-color:var(--palkki-bg-color);
  color: #111;
  font-size: 100%;
  position: absolute;
  padding: 1px 5px 2px 5px;
  bottom: -1.6em;
  left: 100%;
  white-space:pre-wrap;
  box-shadow: 1px 1px 3px #222222;
  opacity: 0;
  border: 1px solid #111111;
  z-index: 99999;
  visibility: hidden;
}
[data-title] {
  position: relative;
}


#pvKirja-tbl .aikaleima,  .pvKirjaTbl .aikaleima {
  font-size: 0.7rem;
  text-align: left;
}


#pvKirja-tbl .tahdet ,  .pvKirjaTbl .tahdet {
  display: inline-flex;
  float: right;
}


#pvKirja-tbl .teksti ,  .pvKirjaTbl .teksti {
  display: inline-flex;
  float: left; 
}

.pvKirjaTbl {
  margin-left: 20px;
  margin-right: 20px;
  background-color: beige;
  width: 90%;
  border: 1px solid black;
  margin-top: 0;
}

.pvTietoTbl {
  padding-top:3px;
  padding-bottom:3px;

}

.custom-radio{
  width: 16px;
  height: 16px;
  display: inline-block;
  position: relative;
  z-index: 1;
  top: 3px;
  /* background: url("radio.png") no-repeat; */
}
.custom-radio:hover{            
  /* background: url("radio-hover.png") no-repeat; */
}
.custom-radio.selected{
  /* background: url("radio-selected.png") no-repeat; */
}
.custom-radio input[type="radio"]{
  margin: 1px;
  position: absolute;
  z-index: 2;            
  cursor: pointer;
  outline: none;
  opacity: 0;
}

.radar{
  width:70%;
  height:70%;
  margin-left: auto;
  margin-right: auto;
}

.muuKaavio {
  width:100;
  height: auto;
}

.lisenssiHaly {
  background-color: var(--puuttuu-color);
}

.tehtPalkki {
  display: flex;
  justify-content: space-between;
}

.gi2 {
  display: grid; 
  grid-template-columns: 30% 70%;
  
}

.gi3 {
  display: grid; 
  grid-template-columns: 20% 40% 40%;
  
}

.git {
  display: flex;
}


.arvioTa {
  width:90%;
 
}

.arvioTaKommentti {
  width:100%;
 
}


#scroll-container {
  border: 3px solid black;
  border-radius: 5px;
  overflow: hidden;
}

#scroll-text {
  /* animation properties */
  -moz-transform: translateX(100%);
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  
  -moz-animation: my-animation 15s linear infinite;
  -webkit-animation: my-animation 15s linear infinite;
  animation: my-animation 15s linear infinite;
}

/* for Firefox */
@-moz-keyframes my-animation {
  from { -moz-transform: translateX(100%); }
  to { -moz-transform: translateX(-100%); }
}

/* for Chrome */
@-webkit-keyframes my-animation {
  from { -webkit-transform: translateX(100%); }
  to { -webkit-transform: translateX(-100%); }
}

@keyframes my-animation {
  from {
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  to {
    -moz-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}

.eiTehtavia {
  margin-top: 50px;
  font-size: large;
  font-weight: 600;
}

.chkbutton {
  float: left;
  /* margin: 0 5px 0 0; */
  width: 40px;
  height: 40px;
  position: relative;
  border-radius: 50%;
  /* background-color: #f7991f; */
}

.chkbutton label,
.chkbutton input {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: inherit;
  font-size: large;
}

.chkbutton input[type="radio"] {
  opacity: 0.011;
  z-index: 100;
}

.chkbutton input[type="radio"]:checked + label {
  
  
  /* background-color: white; */
  border: 3px solid blue ;
  border-radius: 50%;
  top:-5px;
  left:-5px;
  width: 45px;
  height: 45px;
}


.chkbutton input[type="radio"]:checked + .chkbutton {
  border-color: blue;
  /* background-color: white; */
  border: 3px solid;
  border-radius: 50%;
}

.chkbutton label {
  cursor: pointer;
  z-index: 90;
  display: flex;
  justify-content: center;
  align-items: center;
  /* line-height: 1.8em; */
  /* padding-top: 20%; */
}

.chkBtn1 {
  background-color: red;
}


.chkBtn2 {
  background-color: orange;
}

.chkBtn3 {
  background-color: yellow;
}

.chkBtn4 {
  background-color: lightgreen;
}

.chkBtn5 {
  background-color:green;
}

.infobar {
  width:100%; 
  background-color: blanchedalmond;
  display: inline-block;

}
#infobar {
  /* border: 3px solid black; */
  /* border-radius: 5px; */
  /* overflow: hidden; */
}

#infotext {
  color:black;
  /* animation properties */
  -moz-transform: translateX(100%);
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  
  -moz-animation: my-animation 25s linear infinite;
  -webkit-animation: my-animation 25s linear infinite;
  animation: my-animation 25s linear infinite;
}


.valintaBtn {
  padding: 10px;
  width:100%;
  margin: auto;
}

.logoutBtn  {
  border: red;
}



@media only screen and (max-width: 1000px) { 
  #infotext {
    -moz-animation: my-animation 15s linear infinite;
    -webkit-animation: my-animation 15s linear infinite;
    animation: my-animation 15s linear infinite;
  }
 
  
}



/* for Firefox */
@-moz-keyframes my-animation {
  from { -moz-transform: translateX(100%); }
  to { -moz-transform: translateX(-100%); }
}

/* for Chrome */
@-webkit-keyframes my-animation {
  from { -webkit-transform: translateX(100%); }
  to { -webkit-transform: translateX(-100%); }
}

@keyframes my-animation {
  from {
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  to {
    -moz-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}