body {
/*
 * Versio 2.1.2
 * fonttikoko asetetaan dynaamisesti iBaseTools.AsetaFonttikoko
 * -metodilla vastaamaan kuvaportin kokoa.
 */

  background-image: url('../img/tunturikiuru_gpt.png');
  background-repeat: no-repeat;
  background-position: center; /* Keskittää kuvan */
  background-repeat: no-repeat; /* Ei toista kuvaa */
  background-size: cover;
  height: 100vh; /* Varmistaa, että elementti kattaa koko ikkunan korkeuden */

  font-size:1.0vw;
  line-height:1.4em;
  max-height:100vh;
/*   background-color:yellow; */
}

p {
  font-size:110%;
  font-weight:500;
}

.flex-head {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  margin-left:5%;
  margin-right:5%;
  flex-direction: row;
}

.flex-head h1 {
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  flex-wrap: nowrap;
}

.flex-head .flex-table {
  display: flex;
  justify-content: flex-end;
  flex-direction: row;
  flex-wrap: nowrap;
  height:1.4em;
}


.orange-color{
  background-color:orange;
  border:0.1em solid red;
}
.green-color{
  background-color:green;
  border:0.1em solid green;
}
.redborder{
  border:1px solid red;
}
.greenborder{
  border:1px solid green;
}
.blueborder{
  border:1px solid blue;
}
.orangeborder{
  border:1px solid orange;
}
.no-flex-wrap{
  flex-wrap: nowrap;
}


#app-content{
  height:90vh;
  width:99vw;
  max-height:90vh;
  overflow-x:auto;
  z-index:1;
}
#app-content .error-note{
  width:"40vw";
  max-width:"40vw";
  height:"60%";
  margin-top:10%;
  margin-left:20%;
  margin-right:20%;
  padding:2em 2em 2em 0.2em;
  font-size:200%;
  line-height:1.8em;
  font-weight:800;
}
.error-note p{
  padding:0.2em;
  color:red;

}
#app-content .quick-note{
  width:"40vw";
  max-width:"40vw";
  height:"60%";
  margin-top:10%;
  margin-left:20%;
  margin-right:20%;
  padding:2em 2em 2em 0.2em;
  font-size:200%;
  line-height:1.8em;
  font-weight:800;
}
.quick-note p{
  padding:0.2em;
}

.tab-1{
  margin-left:1em;
}
.selected{
    background-color:silver;
    border-radius:0.2em;
    box-shadow: 0px 0px 0.5em rgba(0, 0, 0, 0.5);
  }

.flex-img-tbl{  /* etusivun kuvataulu */
  display:flex;
  flex-wrap:wrap;
  align-items: flex-start;
  justify-content: center;
  max-width:100%;
  height:auto;
  overflow-y:auto;
}
.flex-img-tbl img{  /* etusivun kuvataulun kuva .Katso myös .img-cell */
    width: 15vw; /* Vakioleveys, jota muutetaan js:llä */
/*     min-width: 300px; /* */ */
    height: auto; /* Korkeus automaattisesti mittakaavan mukaan */
    object-fit: cover; /* Varmistaa, että kuva täyttää alustan oikein */
    border:2px solid white;
    background-color: lightgray; /* taustaväri harmaa */
    border-radius: 0.1em; /* kulmien pyöristys */

}
.img-cell{
     aspect-ratio: 1 / 1; /* Yksi suhde yhteen, korkeuden ja leveyden säilyttäminen */
}

/* debug varten */
#footer, #debug{
  position:absolute;
  bottom:0;
  width:100vw;
  height:10vh;
  max-height:10vh;
  background-color:yellow;
  overflow:auto:
}

/* item2-runko BEGIN ****************************************/
#item2 .line-height-1{
  height:3.2em;
  max-height:3.2em;
  overflow:hidden;
  padding-top:1em;
  padding-bottom:0.5em;
  background-color:white;
}
.flex-box-title{
  display: flex;
  justify-content: space-between;
  font-size:120%;
  font-weight:700;
/*   color:red; */
  width:100%;
  min-width:100%;
  padding-top:0.5em;
  padding-bottom:0.5em;
  border-bottom:1px solid silver;
}
  .flex-box-title .text{
  }
  .flex-box-title .plus{
/*     transition: transform 0.3s;*/
    color:silver;
    display: inline-block;
    font-size: 200%; /* Koon säätö */
    margin-right:0.3em;
  }
  .rotated {
    transform: rotate(90deg); /* Käännös 90 astetta myötäpäivään */
    font-size: 120% !important; /* fonttikoko ja padding-top yhteensäsamam kuin perus fonttikoko */
    padding-top:0.8em;
  }
  .item2-frame {
/*    display:flex;
    flex-wrap:wrap;*/
/*      border:1px solid orange;*/
    margin-top:0.5em;
    width:100%;
    min-width:100%;

  }

/* item2-runko END   ****************************************/

#img-trial{
  display: flex;
  justify-content: center;
  align-items: center;
  width:100%;  /* ylikirjoitetaan dynaamisesti */
  height:auto; /* ylikirjoitetaan dynaamisesti */
  z-index:100;
  position: absolute;
  z-index:10;
}
  #img-trial #img-trial-cell{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    height:100%;
    min-width:100vw;
    z-index:12;
    border:0.1em solid grey;
  }
    #item1-img{
      position:absolute;
      /*   display:block; */
      z-index:110;
      pointer-events: auto; /* Varmistaa, että hiirellä voi tapahtua kanvaasilla */
      display:none;  /* vain kanvaasi näytetään */
    }
    #item1-canvas{
      width:92%;
/*      margin-left:4%;*/
/*      margin-right:4%; */
      height:auto;
      z-index:112;
    }
    #item1 .big-font{
      font-size:200%;
      font-weight:900;
    }

    .fade-in {
        transition: opacity 0.3s ease; /* Animaation kesto ja tyyli */
        opacity: 1;  /* Alkuperäinen näkyvyys */
    }
    .fade-out {
      opacity: 0; /* Peittää kuvan */
    }

    .clickable-left {
      position: absolute;
      left: 0.0em;
      z-index:10000;
    }

    .clickable-right {
      position: absolute;
      right: 0.0em;
      z-index:10000;
  }

  .bubble {
    display: flex; /* or inline-flex */
    align-items: center;
    align-content: center;
    margin:1em;
    padding-left:0.45em;
    width:1.5em;
    height:1.5em;
    background-color:white;
    border:2px solid silver;
    border-radius: 50%;
  }

    .flex-box{
      display:flex;
      flex-wrap:wrap;
      align-items:flex-start;
      background-color:transparent;
      display:visible;
      min-width:15em;
/*       border:1px solid red; */

    }

/* item2-kuvaus BEGIN ************************************/

  .item2-kuvaus {
    grid-template-columns: minmax(5em, 20%) minmax(13em, auto);
    grid-template-rows: auto auto; /* Kaksi riviä */
    column-gap: 0.2em;
    row-gap: 0.3em;
    align-items: start; /* Asettaa sisältö yläreunaan */
    justify-items: start; /* Asettaa sisällön vasempaan reunaan */
    padding-right:1em;
  }
    .item2-kuvaus .col-1{
      width:100%;
    }
    .item2-kuvaus .col-2{
      width:100%;
    }
    #kuvaus-alkupera {
      background-color:transparent;
    }
    #kuvaus-alkupera-input {
      background-color: #f0f0f0;
/*       background-color: orange; */
    }

    #kuvaus-tarina{
      background-color:transparent;
    }
    #kuvaus-tarina-text{
      background-color:white;
      border:1px solid silver;
      min-height:20vh;
      max-height:30vh;
      padding:0.2em;
      overflow-y:auto;
    }
      #kuvaus-tarina-text:focus{
        border:1px solid gray;
        outline: none;
      }

/* item2-kuvaus END    ***********************************/


/* item2-leikkaa BEGIN ***********************************/
  #item2-leikkaa{
    grid-template-columns: minmax(5em, 100%);
    grid-template-rows: auto auto auto; /* kolme riviä */
    column-gap: 0.2em;
    row-gap: 0.3em;
    align-items: start; /* Asettaa sisältö yläreunaan */
    justify-items: start; /* Asettaa sisällön vasempaan reunaan */
  }
    #item2-leikkaa .col-1{
      width:100%;
    }

    .leikkaa-buttons{
    }

    #item2-leikkaa-img{
      display:block; /* avataan tapahtumassa #cut-save */
    }

 #item2-leikkaa .text {
    font-size:60%;
  }
/* item2-leikkaa END    **********************************/

/* item2-skaalaa BEGIN ***********************************/
  #item2-skaalaa{
    grid-template-columns: minmax(5em, 20%) minmax(15em, auto);
    grid-template-rows: auto auto auto auto; /* 4 riviä */
    column-gap: 0.2em;
    row-gap: 0.3em;
    align-items: start; /* Asettaa sisältö yläreunaan */
    justify-items: start; /* Asettaa sisällön vasempaan reunaan */
  }
    #item2-skaalaa .long{
      grid-column: span 2; /* Tämä elementti kattaa molemmat sarakkeet 1 ja 2*/
    }
    #item2-skaalaa .col-1{
      width:100%;  /* täyttää koko sarakkeelle varatun alan (20%)*/
    }
    #item2-skaalaa .col-2{
      width:100%;
    }
    .skaalaa-buttons{
    }

    #item2-skaalaa .text {
      font-size:60%;
    }

    #item2-skaalaa label {
      width: 30%
      height:1.5em;
      margin-top: 0em;
    }
    #item2-skaalaa .slider-container{
      position: relative;
      width: 80%;
    }
    #item2-skaalaa input[type="range"] {
      width: 90%;
      height:1.5em;
      margin-top: 0em;
      margin-bottom: 0em;
    }
  #item2-skaalaa .flex-slider, #item2-varit .flex-slider{
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    position: relative;
    top:-1.2em;
    font-size:60%;
  }
  #item2-skaalaa .flex-slider-buttons{
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
  }
  .flex-slider-buttons input[type="button"]{
    width:8em;
    margin:0em 1em 0.5em 1em;
    font-size:80%;
    padding:0.2em;
  }
/* item2-skaalaa END   ***********************************/


#img-trial-close{
    position:absolute;
    z-index:101;
    right:0px;
    top:0px;
    padding:0.2em;
    background-color:transparent;
    font-size:200%;
    font-weight:800;
    overflow:visible;
}

  .img-trial-close {
    width:1.4em;
    margin:0.1em;
    padding:0.1em;
    vertical-align:sub;
  }
  .img-trial-close:hover{
    width:1.6em;
    margin:0.1em;
    padding:0.0em;
    border-radius: 0.2em;
  }

.flex-box{
  display:flex;
}
.grid-box{
  display:grid;
  width: 100%; /* Koko leveys */
}
  .grid-box input[type="button"]{
    width:6em;
    margin:0em 1em 0.5em 1em;
    font-size:80%;
    padding:0.2em;
  }

.info-message{
  color:black;
}
.warn-message{
  color:orange;
  font-weight: 600;
}
.error-message{
  color:red;
  font-weight: 800;
}

  #color-slider-cur{
    position:relative;
    left:0.5em;
  }
.havis-hidden{
  visibility:hidden;
}
.overlay{
}

/* mediakyselyt */

@media only screen and (min-width: 513px) { /* leveys on vähintään 513px  */
    /* pad,laptop etc.. screen devices */

  #img-trial-cell #item1{
    position:relative;
    display:flex;
    width:80%;
    min-width:400px;
    max-width:95vw;
    height:100%;
    background-color:white;
    justify-content: center;
    align-items: center;
/*     border:1px solid red; */

  }
  #img-trial-cell #item2{
    position:relative;
    width:20%;
    height:100%;
    overflow-y:auto;
    padding:0.5em 0.5em 1em 1em;
    background-color:white;
  }
    #item2-leikkaa-img{
      display:block; /* avataan tapahtumassa #cut-save */
    }

}
@media only screen and (max-width: 512px),  /* leveys on korkeintaan 512px  */
       only screen and (orientation: portrait) { /* pystyasento */

    /* mobile screen devices */
  #img-trial-cell #item1{
    position:relative;
    display:flex;
    width:100%;
    min-width:400px;
    max-width:95vw;
    height:70%;
    background-color:white;
    justify-content: center;
    align-items: center;
/*     border:1px solid red; */

  }
  #img-trial-cell #item2{
    position:relative;
    width:100%;
    height:300%;
    overflow-y:auto;
    padding:0.5em 0.5em 1em 1em;
    background-color:white;
  }
  #item2 .line-height-1{
    height:5.2em;
    max-height:5.2em;
    overflow:hidden;
    padding-top:1em;
    padding-bottom:0.5em;
    background-color:white;
  }
    #item2-leikkaa-img{
      display:block; /* avataan tapahtumassa #cut-save */
      max-width:50vw;
    }

    .mediafont{
/*       color:cyan; */
      font-size:180%;
      line-height:1.5em;
    }
    #kuvaus-tarina-text .valja{
      line-height:1.4em;
    }

}