/*
 * versio V.1.7.3
 * © Ilkka Koivistoinen 11/2025
 */
body{

  font-family: 'Playfair Display', sans-serif;
/*   font-family: 'Lato', sans-serif; */
/*   font-display: block; */
}
div{
/*   background-color:white; */
/*   border:1px dotted red */
}
@keyframes vilkku {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.vilkkuKuva {
  /* Jos muutat, muista korjata myös js -koodi */
  animation: vilkku 1s 19; /* Toistuu 19 kertaa, 1 sekunti kierrokselle */
}

.white-text{
  color:white;
}
.bg-transparent{
  background-color:transparent;
}
.italic{
  font-style:italic;
}
.text-sm-left{
  font-size:60%;
  text-align:left;
}
.link-container{
  border-right:2px dashed silver;
  padding-top:5em;
  margin-right:1em;
  flex-grow: 1;
  flex-basis:  15vw;
  max-width:10vw;
  min-width:10em;
  width:9vw;
  overflow-y:visible;
  overflow-x:hidden;
/*   border:1px solid blue */
}
.app-content-browser{
 margin-top:10vh;

  flex-grow: 4;  /*Tarvitaanko*/
  flex-basis:  70vw;
  padding-left:2em;
  padding-right:0.5em;
  max-height:84vh;
  overflow-y:auto;
  overflow-x:visible;
}
.right-content{
  flex-grow: 1;  /*Tarvitaanko*/
  flex-basis:  15vw;
}
.nav-link-img{
  width:1.1em;
  margin:0.1em;
  padding:0.1em;
  vertical-align:sub;
}
.nav-link-img:hover{
  max-width:1.3em;
  margin:0.1em;
  padding:0.0em;
  border-radius: 0.2em;
}
.link-forward-m{
  color:black;
  font-weight:600;
}
.link-reverse-m{
  color:black;
  font-weight:600;
}
.color-eko{
  color:green;
  font-weight:800;
}
.link-forward-m::after{
  content: "\00a0 \f0da "; /*fa-caret-down*/
  border: none;
  font-family: 'FontAwesome';
  font-size:100%;
  position:relative;
  top:0.05em;
}
.link-forward::after{
  content: "\00a0 \f0da "; /*fa-caret-down*/
  border: none;
  font-family: 'FontAwesome';
  font-size:100%;
  position:relative;
  top:0.05em;
}
.link-forward-white::after{
  content: "\00a0 \f0da "; /*fa-caret-down*/
  border: none;
  font-family: 'FontAwesome';
  font-size:100%;
  color:white;
  position:relative;
  top:0.05em;
}
.link-reverse::before{
   content: " \f0d9 \00a0\00a0";    /*fa-caret-up*/
  border: none;
  font-family: 'FontAwesome';
  font-size:100%;
  position:relative;
  top:0.05em;
}
.link-reverse-m::before{
   content: " \f0d9 \00a0\00a0";    /*fa-caret-up*/
  border: none;
  font-family: 'FontAwesome';
  font-size:100%;
  position:relative;
  top:0.05em;
}
.link-down::after{
  content: "\00a0 \f0d7 "; /*fa-caret-right*/
/*   content: '\00a0 \21E8'; */
  border: none;
  font-family: 'FontAwesome';
  font-size:100%;
  position:relative;
  top:0.05em;
}
.havis-hidden{
  height:0px;
  visibility:hidden;
/*   overflow:hidden; */
}
.havis-visible{
  height:auto;
  visibility:visible;
}
.tomato-text {
  background-color:tomato;
}
.green-text {
  background-color:DarkSeaGreen;
}
.blue-text {
  background-color:Lavender;
}
.scaled-font80{
  font-size:80%;
}
.scaled-font60{
  font-size:60%;
}
.silver-background{
  background-color:silver;
}
.green-text {
  background-color:LightGreen;
}
.redborder{
  border:1px solid red;
}
.greenborder{
  border:1px solid green;
}
.blueborder{
  border:1px solid blue;
}
.orangeborder{
  border:1px solid orange;
}
.shadow-box{
  border-radius:2em;
  box-shadow:0.5em 0.1em 1.3em silver;
}
.rotate--5-box{
  rotate: -5deg;
}
.rotate-5-box{
  rotate: +5deg;
}
.rotate-3-box{
  rotate: +3deg;
}
.rotate--3-box{
  rotate: -3deg;
}
.navbar-sub{
  width:13em;
  padding-left:2em;
}
.havis-left{
  float:left;
}
.havis-right{
  float:right;
}
.havis-clear{
  clear:both;
}
.havis-center{
  text-align: center;
}
.licence, .login-hint{
  font-size:90%;
  font-style:italic;
}
.map-popup{
  font-size:60%;
  font-style:italic;
  background-color:transparent;
}

.birdmarker{color:red;}  /* pakollinen */

.nav-font-size{
  font-size:110% !important;
}
.i-container {
  display: flex;
  margin-left:3%;
  margin-right:5%;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
}
.container-title{
  margin-top:2em;
/*   padding-bottom:1em; */
  margin-bottom:1em;
  max-height:10vh;
  border-bottom:2px solid silver;
  overflow:visible;
}


.logo-content{
  flex-grow: 1;
  flex-basis:  20vw;
}
.title-content{
  flex-grow: 4;
  flex-basis:  80vw;
}
.user-content{
  flex-grow: 2;
  flex-basis:  10vw;
  max-height:1.6em;
}
.title-logo1-main{
  width:4.5vw;
}
.title-logo1{
  position:absolute;
  width:6vw;
}
.title-logo2{
  width:4.5vw;
}
.tab-5{
  margin-left:5em;
}
.tab-1{
  margin-left:1em;
}
.tab-2{
  margin-left:2em;
}
.vtab-2{
  margin-top:2em;
}
.img-help{
  width:10em;
}
.mobile-help-bg{
  background-color:#b3ffff;
}
.img-mobile-large{
  width:80%;
  max-height:80vh;
}
.flex-table {
  display: flex;
  margin-left:5%;
  margin-right:5%;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

.flex-table-col {
  border-right:2px dashed silver;
  padding-top:5em;
  margin-right:1em;
  flex-grow: 1;
  flex-basis:  15vw;
}

.flex-table-setup {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

  .flex-table-setup .cell-setup{
  }
    .cell-setup .cell-1 {
      flex: 0 0 60%; /* Ensimmäinen sarake vie 60% */
    }
    .cell-setup .cell-2 {
      flex: 0 0 40%; /* Toinen sarake vie 40% */
    }

.leaflet-tooltip-own{
  font-size:60%;
}

.elem-dot{
/*   font-size:120%; */
  padding:0.0em 0.1em 0.4em 0.1em;
  margin:0.5em;
  width:1.6em;
  height:1.6em;
  border-radius: 0.8em;
  display: inline-block;
  font-weight:700;
}
.find-info-row{
  font-size:120%;
  font-weight:700;
  min-width:100%;
}

.left{
  float:left;
}
.right{
  float:right;
}
.center{
/*   float:center; */
}
.clear{
  clear:both;
}
.bold{
  font-weight:800;
}
.laatikko{
  border:0.1em solid silver;
  padding:0.2em;
  text-align:center;
  vertical-align:middle;
  border-radius:0.5em;
}
.laatikko_left{
  border:0.1em solid silver;
  padding:0.2em;
  text-align:left;
  border-radius:0.5em;
}

.display_inline{
  display:inline-block;
  vertical-align:top;
}
.copy-link-img{
  width:2.1em;
  margin:0.1em;
  padding:0.1em;
  vertical-align:sub;
}
.copy-link-img:hover{
  max-width:2.3em;
  margin:0.1em;
  padding:0.0em;
  border-radius: 0.2em;
}
.update-alert{
  background-color:tomato;
  color:white;
  padding:1em;
  border-radius:0.5em;
}
.mobile-img{
  border:0.4em solid silver;
  border-radius: 1.5em;
  padding:0.4em;
}
  .uusi-tools-termit {
    display: grid;
    grid-template-columns: repeat(8, 2em);
    grid-gap: 0.4em;  /* Riviväli */
    grid-column-gap: 1.2em;    /* Sarakeväli */
    justify-content: left;
    margin-top: 0em;
/*     margin-top: 2em; */
/*     border:1px solid red; */
}

  .uusi-tools-bg-imgA{
     background-image: url("../images/markers/tiira.png");
     background-repeat: no-repeat, no-repeat;
     background-size: 60%;
     background-position: center;
  }
  .uusi-tools-bg-imgB{
     background-image: url("../images/icons-png/keypad.png");
     background-repeat: no-repeat, no-repeat;
     background-size: 60%;
     background-position: center;

  }

.uusi-tools-num{}  /* oltava */

/*   havainto korjaa/poista browser */
.media-update{
  position:absolute;
  top:0px;
  width:90%;
  height:72%;
  background-color:white;
  z-index:10000;
}
#havis-new-frame-text-container{
  height:0px;
  overflow:visible;
  padding:0em 1em 0em 1em;
  background-color:white;
/*   border:0.2em solid green; */
  border-radius: 2em;
  z-index:10001;
}

#havis-new-frame-img-container{
  display:flex;
  justify-content: center; /* Voit käyttää myös "align-items: center;" pystysuoraan keskittämiseen */
  align-items: center;
  flex-wrap: wrap;
  overflow-x:auto;

  width:95%; /* lasketaan dynaamisesti */
  max-width:900%;

  height:70%;
  min-height:70%; /* jotta elementti peittää yläosan*/
  max-height:40vh;

  padding:1em;
  background-color:white;
  border:0.2em solid lightgray;
  border-radius: 2em;
  z-index:10001;
}
  .havis-new-frame-img{
    border:0.2em solid white;
    border-radius: 1em;
    box-shadow: 0px 0px 0.5em rgba(0, 0, 0, 0.5);
    min-height:unset;
    max-height:unset;
/*    width:  Määrätään jqueryllä */
/*    height: Määrätään jqueryllä */
  }
  #havis-new-frame-img-container  .havis-new-frame-img-close{
    position:absolute;
    top:0.5em;
    left:1.1em;
    z-index:10002;
    border-radius: 40%;
    padding: 0.5em;
    width:3em;
    background-color:white;
  }
  #havis-new-frame-img-container  .havis-new-frame-img-waste{
    position:absolute;
    top:0.5em;
    right:1.1em;
    z-index:10001;
    border-radius: 40%;
    padding: 0.5em;
    width:3em;
    background-color:white;
  }
    .havis-new-frame-img-waste img, .havis-new-frame-img-close img{
      width:2em;
    }

.show-thumb{}  /* oltava */


        .attachements-kaavake-form-group {
            display:flex;
            flex-direction: row;
            flex-wrap: wrap;
/*             margin: 1em 0; */
            border:1px solid green;
        }
        .attachements-kaavake-form-group label {
            display: inline-block;
            font-size:100%;
/*            width: 6em;*/
            margin-top: auto;
            border:1px solid blue;
            color:red;
        }
        .attachements-kaavake-form-group input[type="text"] {
            width: 16em;
            max-height:2em;
            margin-top: auto;
            overflow-y:hidden;
            border:1px solid red;
        }

  .flex-row-5{
    display:flex;
    flex-wrap: wrap;
    align-content:flex-start;
    gap:0.2em;
    flex-grow:4;
    flex-shrink:1; /*" Tämä määrittelee joustavan elementin kyvyn kutistua, jos se on tarpeen."*/
    flex-basis:70%;
    background-color:#e6f2ff;
    overflow-x:hidden;
    overflow-y:auto;
    height:10em;
    max-height:10em;
    margin-left:1em;
  }
    .flex-row-5  img{
      height:5em;
      padding:0.2em;
      width:auto;
      cursor: pointer;
      display:block;
      z-index:10002;
/*      border:0.2em solid black;*/
      border-radius: 0.2em;
    }
    .flex-row-5  input{
      position: absolute; /* Asetetaan absoluuttinen sijainti */
      top: 0; /* Asetetaan y-koordinaatti ykköseen */
      left: 0; /* Asetetaan x-koordinaatti ykköseen */
      width: 5em; /* Peittää kuvan */
      height:5em;
      width: 100%; /* Peittää koko korkeuden */
      opacity: 0; /* Tehdään painike läpinäkyväksi */
      cursor: pointer; /* Näyttää osoittimen */
      z-index:10003;
    }
    .attachements-tiedostot  .flex-row-5{
       position: relative; /* Asetetaan suhteellinen sijainti */
       display: inline-block; /* Mahdollistaa elementin suojaamisen */
    }

.update-image-thumb{
  border:1px solid red;
} /*oltava */

.media-background{
  background-image:url("../img/mobile.png");
}
/*   attachements */
.attachements-elem, .attachements-setup {
}
.attachements-kaavake {
  margin-left:1em;
}
  .attachements-kaavake .selected{
    background-color:silver;
    border-radius:0.2em;
    box-shadow: 0px 0px 0.5em rgba(0, 0, 0, 0.5);
  }



/* *********************** SWITCH BEGIN ********************************* */
/* havaintokaavakkeet tiedot-media kytkin */
.media-toggle-container {
    display: flex;
    align-items: center;
}

.toggle-label {
    margin: 0 1em; /* marginaalina 1em */
}

.toggle-switch {
    position: relative;
}

.toggle-switch input {
    display: none;
}

.toggle-switch label {
    width: 3em; /* leveys 3em */
    height: 1.5em; /* korkeus 1.5em */
    background-color: lightgray; /* taustaväri harmaa */
    border-radius: 1.5em; /* kulmien pyöristys */
    cursor: pointer;
    display: block;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s, box-shadow 0.3s; /* siirtymät */
}

.toggle-switch label:before {
    content: "";
    width: 1.2em; /* "pallon" leveys 1.2em */
    height: 1.2em; /* "pallon" korkeus 1.2em */
    background-color: gray; /* "pallon" väri */
    border-radius: 50%;
    position: absolute;
    left: 0.15em; /* vasen tila 0.15em */
    top: 0.1em; /* ylätila 0.1em */
    transition: 0.3s;
}

.toggle-switch input:checked + label {
    background-color: gray; /* taustaväri aktiivisena */
}

.toggle-switch input:checked + label:before {
    transform: translateX(1.5em); /* siirto aktiivisena */
    background-color: black; /* "pallon" väri aktiivisena */
}


/* *********************** SWITCH END   ********************************* */

.table-new-grid{
    display: grid;
    grid-template-columns: 40% 60%; /* Määritetään sarakkeiden leveydet */
    max-height: 50%;
/*     border:1px solid red; */

}
  .table-new-grid .left-cell {
    padding: 0.5em; /* Sisätilan lisääminen */
    overflow:hidden;
  }

/* Tekstien tyylit */
.text-left, .text-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 80%; /* Fonttikoko */
    color: white; /* Fontin väri */
}

.text-left {
    left: 10px; /* Vasen etäisyys */
    background-color: green; /* Vihreä tausta */
    padding: 5px; /* Tyhjää sisältöä */
    border-radius: 5px; /* Pyöristyminen */
}

.text-right {
    right: 10px; /* Oikea etäisyys */
    background-color: red; /* Punainen tausta */
    padding: 5px; /* Tyhjää sisältöä */
    border-radius: 5px; /* Pyöristyminen */
}

  .table-new-grid .table-new{
    margin-bottom:1em;

  }
  .table-new-grid .right-cell {
    padding: 0.5em; /* Sisätilan lisääminen */
    overflow:hidden;
    display:flex;
    flex-wrap: wrap;
    justify-content:left;

  }

.uusi-tools-keypad {
    display: grid;
    grid-template-columns: repeat(3, 2em);
    grid-gap: 0.4em;  /* Riviväli */
    grid-column-gap: 1.2em;    /* Sarakeväli */
    justify-content: left;
/*     margin-top: 2em; */
    z-index:100;
/*     border:1px solid red; */
}
.uusi-tools-n {
  background-color:red;
}
.uusi-tools-t {
  line-height: 80%;
}
.uusi-tools-numero {
    width: 3em;
    height: 3em;
    font-size: 100%;
    cursor: pointer;
    border: 0.2em solid #333;
    background-color: #f0f0f0;
    border-radius: 50%;  /* Makes the buttons round */
    box-shadow: 0.1em 0.1em #999;  /* Adds shadow below the button */
    transition: background-color 0.3s, box-shadow 0.1s;
    display: flex;
    justify-content: center;
    align-items: center;
}

  .uusi-tools-numero:active {
      background-color: #ddd;  /* Changes the background color when clicked */
      box-shadow: 0.1em 0.1em #666;  /* Reduces shadow to create a pressed effect */
      transform: translate(0.1em);  /* Moves the button down slightly */
  }

  .uusi-tools-numero:hover {
      background-color: #e0e0e0;
  }

  .uusi-tools-t.termit-tools-t-m{
    background-color: rgba(255, 0, 0, 0.2); /* Punainen väri,  läpinäkyvyys */
  }

  .uusi-tools-t.termit-tools-t-t{
    background-color: rgba(255, 255, 0, 0.2); /* Keltainen väri,  läpinäkyvyys */
  }

  .uusi-tools-t.termit-tools-t-p{
    background-color: rgba(0, 255, 0, 0.2); /* Vihreä väri,  läpinäkyvyys */
  }
  .uusi-tools-t.termit-tools-t-a{
    background-color: rgba(0, 0, 255, 0.2); /* Vihreä väri,  läpinäkyvyys */
  }

/* notification -laatikon leveys erikokoisille näytöille */
@media (max-width: 600px) {
  .notification-c{
    width:50%
  }
}
@media (min-width: 601px{
  .notification-c{
    border:30%
  }
}