/* Versio 0.8.8 */

body {
/*
 * fonttikoko asetetaan dynaamisesti iBaseTools.AsetaFonttikoko
 * -metodilla vastaamaan kuvaportin kokoa
 */
  background-image: url("../img/selain-pohja.png");
  background-repeat: no-repeat;
  background-size: 100vw auto;
  font-size:1.1vw;
  line-height:1.4em;
/*   font-weight:350; */
}
p{
  margin-left:1em;
}
li{
  font-size:100%;
}
h1{
  font-size:210% !important;
}
h2{
  margin-top:1.5em;
  margin-bottom:1.0em;
  font-size:150% !important;
}
h3{
  margin-top:1.5em;
  margin-bottom:1.0em;
  font-size:120% !important;
}
h4{
  margin-top:1.5em;
  margin-bottom:1.0em;
  font-size:110% !important;
}
/* ***************ylärivi *************** */
#links {
  position: -webkit-sticky;
  position: sticky;
  top:0;
  display: flex;
/*   background-color:yellow; */
  padding-left:20vw;
  padding-top:2vh;
  padding-bottom:1vh;
  text-align:center;
  vertical-align:middle;
  border-bottom:1px solid silver;
/*  background-color:white;*/
  z-index:100;
/*    padding:0.5em 0em 1em 0em; */

}
#links > div{
/*   width:10em; */
  min-width:10em;
  max-width:20em;
}
#links > div > a{
  color:black;
  font-size:110%;
  font-weight:800;
}
#user-content{
  margin-left:20%;
  width:20em;
  min-height:1em;
  overflow:visible;
}
.mobile-link-exception{
  position:relative;
  top:-0.4em;
/*   background-color:white; */
/*   border:1px solid green; */
}
/* ***************2. rivi *************** */
#h1-row{
 display: flex;
 margin-left:4em;
 margin-right:20em;
 padding-top:1em;
}

#h1-row > #h1-row-title{
  margin-left:20vw;
}
#h1-row-title{
 padding-top:3em;
}
.h1-row-content{
 padding-left:15vw;
 padding-top:1em;
 margin-left:0vw;
 width:80vw;
 min-width:80vw;
 max-width:80vw;
 overflow-x:hidden;
 text-align: center;


}
/* ***************3. rivi *************** */
#main-frame{
 display: flex;
 margin-top:6em;
 margin-right:5vw;
 margin-left:5vw;
}
#left-column{
  min-width:5vw;
  max-width:5vw;
  width:5vw;
/*   background-color:yellow; */
}

/* ***************Keskisarake*************** */
.app-content{

}

.double-row-a{
/*   border:1px solid green; */
  margin-left:-10vw;
  padding-left:10vw;
  width:100vw;
  background-image: url("../img/index-tausta-1.png");
  background-repeat: no-repeat;
  background-position-y:top 15%;
  background-size: 100%; /* Resize the background image to cover the entire container */
}
.double-row-b{
/*   border:1px solid green; */
  margin-left:-10vw;
  padding-left:10vw;
  width:100vw;
  background-image: url("../img/index-tausta-2.png");
  background-repeat: no-repeat;
  background-position-y:top 50%;
  background-size: 100%; /* Resize the background image to cover the entire container */
}

.home-content-row{
 display: flex;
 padding-bottom:5em;;
 margin-bottom:5em;;
 border-bottom:1px solid silver;
 margin-left:0vw;
 width:65vw;
 min-width:65vw;
 max-width:65vw;
 overflow-x:hidden;
}
.home-content-row-odd{
   padding-left:+0vw;
}
.home-content-row-even{
   margin-left:+5vw;
   padding-right:+0vw;
}

  .col-1{
    order:1;
/*     border:1px solid red; */
  }
  .col-2{
    order:2;
/*     border:1px solid blue; */
  }
  .col-text{
    min-width:50%;
    width:50%;
    justify-content: center;
/*     border:1px solid red; */
  }
  .col-img{
    display:flex;
    align-items: center;
    justify-content: center;
    padding-top:2em;
    min-width:50%;
    width:50%;
/*     border:1px solid green; */
  }
  .main-p-1{
    font-size:120%;
    font-weight:550;
    line-height:1.4em;
  }

  .main-p-2{
    font-size:100%;
    font-weight:350;
  }
  .logo-main-list{
    width:50%;
    float:none;
  }
  .logo-main-list-triple{
    width:20%;
  }
  .logo-main-list-double{
    width:40%;
  }
  .logo-main-list-large{
    width:80%;
    float:none;
  }
  .logo-main-list-map{
    width:25vw;
    height:30vh;
    float:none;
  }


.logo-main{
  width:4em;
}
.home-content-row-bottom{
 padding-bottom:5em;;
 margin-bottom:5em;;
 border-bottom:1px solid silver;
 width:70vw;
 min-width:70vw;
 max-width:70vw;
 overflow-x:hidden;
/*   background-color:coral; */
}

.home-content-list-havikset > li{
  line-height:2em;
}
/* ***************oikea sarake*************** */

.right-content{
  position: fixed;
  top:11em;
  right:3em;
  width:10em;
  max-height:80vh;
  border-left:1px solid silver;
  text-align:center;
  overflow-y:auto;
}
.logo-content{
  margin-top:3em;
}
.logo-content > div{
/*   border:1px solid green; */
  font-style:italic;
  font-size:80%;
  padding-top:1em;
}


/******************************************/
/*** Admin ********************************/
/******************************************/

/* Flex-container */
.admin_container {
   display: flex;
   font-size:60%;
   margin-bottom:1em;
}

.admin_title_column {
  text-align: left;
}

.admin_column {
/*  padding: 1em 2em 1em 0em;
  border: 0.4em solid #ccc;
  margin-right: 2em;*/
  text-align: left;
}
.admin_column_1, .admin_title_column_1{
  width:30vw;
}
.admin_column_2{
  width:70vw;
}
.admin_title_column_2{
  width:60vw;
  text-align:right !important;
}
.display_inline{
  display:inline-block;
  vertical-align:top;
}

/* admin page */
#result{
  border-top:0.2em solid silver;
  padding-top:1em;
}

#sivunumero-lista, #title-row {
/*   width:50vw; */
  display: flex;
  flex-wrap: wrap; /* Kääri sarakkeet riville, kun ne eivät mahdu vaakasuunnassa */
}
  #sivunumero-lista > div {
    flex: 0 0 auto;
    width: 3.5em;
    color:orange;
    text-align:center;
    font-size:80%;
  }
  .sivunumero-lista-col{} /*EVENTS VAATII*/
  .sivunumero-lista-col-current, .admin_link{
    color:black !important;
    font-weight:800;
  }

#title-row{
  display: flex;
/*   width:auto; */
  flex-wrap: wrap; /* Kääri sarakkeet riville, kun ne eivät mahdu vaakasuunnassa */
  font-weight:800;
  border-bottom:0.2em solid black;
}
.data-row{
  display: flex;
  /*flex-wrap: wrap; *//* Kääri sarakkeet riville, kun ne eivät mahdu vaakasuunnassa */
}
  #title-row > div, .data-row > div {
    flex: 0 0 10em;
    padding: 0.1em;
    background-color:transparent;
    border-bottom: 0.1em solid silver;
/*     border-top: 0.1em solid silver; */
    /* Voit lisätä muita tyylisääntöjä tarpeen mukaan */
    text-align:center;
/*     width:40%; */
/*     font-size:; */
  }

  .wide-1{
    width:10em;
    max-width:10em;
    min-width:10em;
  }
  .wide-2{
    width:20em;
    max-width:20em;
    min-width:20em;
  }
  .wide-3{
    width:30em;
    max-width:30em;
    min-width:30em;
  }
  .wide-4{
    width:40em;
    max-width:40em;
    min-width:40em;
  }
  .wide-5{
    width:50em;
    max-width:50em;
    min-width:50em;
  }
  .wide-6{
    width:60em;
    max-width:60em;
    min-width:60em;
  }
  .wide-8{
    width:80em;
    max-width:80em;
    min-width:80em;
  }
  .wide-auto{
    width:auto;
    max-width:60em;
    min-width:10em;
  }
  #event-10{
    width:90vw;
    max-width:90vw;
    min-width:90vw;

  }
#result-table{
  width:100%;
  justify-content: center; /* Keskittää vaakasuunnassa */
  align-items: center; /* Keskittää pystysuunnassa */
  font-size:60%;
  background-color:transparent;
/*   border:1px solid red; */
  margin-left:0px  !important;

}
#result-table-content{
  justify-content: center; /* Keskittää vaakasuunnassa */
  align-items: center; /* Keskittää pystysuunnassa */
  background-color:transparent;
}
#result-table-pages-content{
  background-color:transparent;
}
#result-table-pages-content > div{
  background-color:transparent;
}
#result-table-title-content{
  background-color:transparent;
}
#result-table-title-content > div{
  background-color:transparent;
}
#result-table-data-content{
  overflow-y:auto;
  max-height:70vh;
  background-color:transparent;
}
#result-table-data-content > div{
  background-color:white;
}

#result-table-title{

}


.laatikot, .laatikot-otsikko{
/*   width:50vw; */
  display: flex;
  /*flex-wrap: wrap;*/ /* Kääri sarakkeet riville, kun ne eivät mahdu vaakasuunnassa */
}
  .laatikot > div , .laatikot-otsikko > div{
    flex: 0 0 auto;
    width: 30vw;
    max-width: 30vw;
    overflow-x:hidden;
    text-align:center;
/*     font-size:60%; */
  }

.facebook-logo{
  position:relative;
  margin-left:5vw;
  height:1px;
  overflow:visible;
  max-width:9em;

}
.facebook-logo-img{
  width:8em;
}

.desc-list{
/*   background-color:orange !important; */
}
.asc-list{
/*   background-color:yellow !important; */
}
.desc-list::after{
  content: "\00a0 \f0d7 "; /*fa-caret-right*/
/*   content: '\00a0 \21E8'; */
  border: none;
  font-family: 'FontAwesome';
  font-size:100%;
  position:relative;
  top:0.05em;
}
.asc-list::after{
  content: "\00a0 \f0d8 "; /*fa-caret-right*/
/*   content: '\00a0 \21E8'; */
  border: none;
  font-family: 'FontAwesome';
  font-size:100%;
  position:relative;
  top:0.05em;
}




/* admin */


#result  .flex-grid{
  width:90vw;
  display: grid;
  grid-template-columns: 3fr 2fr;
  grid-auto-rows: minmax(2em, auto); /* Rivin korkeus minimissään 50px, mutta kasvaa sisällön mukaan */
  grid-row-gap: 0.2em; /* Pystysuora väli */
  grid-column-gap: 1em; /* Vaakasuora väli */
}
#result  .grid-table{
  max-height:80vh;
  overflow-y:auto;
}

#result  .flex-grid-table {
  width:100%;
  display: grid;
  grid-template-columns: 2fr 2fr 3fr 3fr;
      /*jos sinulla on kolme saraketta, joista yksi on 1fr, toinen 2fr ja kolmas 1fr, käytettävissä oleva tila jaetaan seuraavasti: 1/4, 2/4 ja 1/4 */
  grid-auto-rows: minmax(2em, auto); /* Rivin korkeus minimissään xx, mutta kasvaa sisällön mukaan */
  grid-row-gap: 0.2em; /* Pystysuora väli */
  grid-column-gap: 0em; /* Vaakasuora väli */

}
  .flex-grid-table .header, .flex-grid-table .header-nosort, .flex-grid-table .header-p{
    font-weight: bold;
    background-color: #f0f0f0;
    overflow:auto;
    text-align: center;
    border-bottom: 1px solid #ccc;
  }

  .flex-grid-table .cell {
    overflow:auto;
    text-align: center;
    border-bottom: 1px solid #ccc;
  }
  .flex-grid-table .cell-set {
    width:100%;
    display: grid;
    grid-template-columns: 1fr 3fr 3fr 3fr;
      /*jos sinulla on kolme saraketta, joista yksi on 1fr, toinen 2fr ja kolmas 1fr, käytettävissä oleva tila jaetaan seuraavasti: 1/4, 2/4 ja 1/4 */
    grid-auto-rows: minmax(2em, auto); /* Rivin korkeus minimissään xx, mutta kasvaa sisällön mukaan */
    grid-row-gap: 0.2em; /* Pystysuora väli */
    grid-column-gap: 0em; /* Vaakasuora väli */
    place-items: center; /* Keskittää sisällön vaaka- ja pystysuunnassa */
  }
  .flex-grid-table .cell-place {
    overflow:auto;
    max-height:3em;
    text-align: center;
    border-bottom: 1px solid #ccc;
  }
  .cell-set > checkbox, .header-nosort > checkbox {
    z-index:1000;
  }

  .cell-set > button, .header-nosort > button {
    margin-left:1em;
  }

  #result .flex-email-content-table {
    width:100%;
    display: grid;
    grid-template-columns: 1fr 7fr;
      /*jos sinulla on kolme saraketta, joista yksi on 1fr, toinen 2fr ja kolmas 1fr, käytettävissä oleva tila jaetaan seuraavasti: 1/4, 2/4 ja 1/4 */
    grid-auto-rows: minmax(2em, auto); /* Rivin korkeus minimissään 50px, mutta kasvaa sisällön mukaan */
    grid-row-gap: 0.2em; /* Pystysuora väli */
    grid-column-gap: 0em; /* Vaakasuora väli */
  }

  .flex-email-content-table > .email-header{
/*     width: 20%; */
    font-size:110;
    font-weight:900;
  }
  .flex-email-content-table  .editable-div{
    overflow:auto;
    text-align: left;
    border-bottom: 1px solid #ccc;
  }

  .flex-email-content-table  textarea{
    min-height:50vh;
    max-height:50vh;
    height:50vh;
    border:0.1em solid silver;
    padding:0.02em;
    text-align:left;
    vertical-align:top;
    border-radius:0.5em;

    vertical-align:left !important;
    overflow:auto;
  }


.deleted{
  color:red;
  text-decoration: line-through;
}