/************************** Wissenslandkarte ******************/

.map div .step {
    text-align: right;
    padding-right: 40vw;
    background-image: url(images/flag1.svg);
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: 65vw center;
  }
  
  .map div:nth-child(even) .step { /* rechte Flagge */
    background-image: url(images/flag2.svg);
    padding-right: 25vw;
  }
  
  .map div:first-child .step { /* linke Flagge */
    background-image: url(images/flag_start.svg);
    padding-right: 40vw;
  }
  

  .map div:last-child:nth-child(even) .step.disable { /* rechte Endflagge */
    background-image: url(images/flag_end_even.svg);
    padding-right: 25vw;
  }

  .map div:last-child:nth-child(odd) .step.disable { /* linke Endflagge */
    background-image: url(images/flag_end_odd.svg);
  }


  .map div:last-child:nth-child(even) .step { /* rechte Endflagge */
    background-image: url(images/flag_end_even_open.svg);
    padding-right: 25vw;
  }

  .map div:last-child:nth-child(odd) .step { /* linke Endflagge */
    background-image: url(images/flag_end_odd_open.svg);
  }


  /* Step Zusätze */
  .map div .step.checked.playicon {background-image: url(images/flag1-play.svg);} /* rechte playicon */
  .map div:nth-child(even) .step.checked.playicon {background-image: url(images/flag2-play.svg);} /* linke playicon */
  .map div .step.checked {background-image: url(images/flag1-checked.svg) !important; } /* rechte checked */
  .map div:nth-child(even) .step.checked {background-image: url(images/flag2-checked.svg) !important;} /* linke checked */
  .map div:first-child .step.checked {background-image: url(images/flag_start-checked.svg)  !important;} /* checked startflagge oben */

/************************** Tinder ******************/


.plugin_tinder_input .item {
  background-color: rgb(255, 255, 255);
  border-radius: 1rem;
  margin-left: 1rem;
  margin-right: 1rem;
  padding: 2vh;
  box-shadow: 1px 1px 4px 0px rgba(199,199,199,0.3);
  
}

.plugin_tinder_input .contentbox {
  text-align: center;
}

.plugin_tinder_input .triggerbox {
  display: flex;
  margin-top: 1rem;
  margin-bottom: 1rem;
}


.plugin_tinder_input .trigger {
  border: 0.5vh solid #58bbb8;
  color: #58bbb8;
  font-size: 150%;
  flex: 1;
}


.plugin_tinder_input .trigger.ui-yes {
  border-top-right-radius: 20vw;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 20vw;
}
.plugin_tinder_input .trigger.ui-no {
  border-top-right-radius: 0;
  border-top-left-radius: 20vw;
  border-bottom-left-radius: 20vw;
  border-bottom-right-radius: 0;
  margin-right: 0.5rem;
}

.plugin_tinder_input .infoslide,
.plugin_tinder_input .exampleslide {
  width: 100%;
}



.plugin_tinder_output {
  padding-right: 4vw;
}

.plugin_tinder_output li {
  list-style-type: disc;
  margin-right: 4vw;
  padding-bottom: 2vh;
}



/*** Plugin question */

.question {
  margin-bottom: 4vw;
}



/*** Plugin Icons */

.icon-wrap-center {
  text-align: center;
}

.icon-wrap-center .icon {
  width: 20vw;
}




/************ trigger spezial ******* */


/* .selectfield {
    max-height: 40vh;
    overflow-x: hidden;
    overflow-y: auto;
  } */
  
  .selectfield {
    padding-top: 2vh;
  }
  


/****** Plugin: timeline */

.iconfield .trigger {
    background-position: center center;
    background-size: auto 100%;
    background-repeat: no-repeat;
  
    opacity: 0.3;
  }
  
  .iconfield .trigger.active {
    opacity: 1;
  }
  
  
  /****** Plugin: audio */
  
  .audioBtn .audio-text {
    margin-left: 15vw !important;
  }
  .audioBtn,
  .trigger.audioBtn {
    min-height: 12vw;
    background-image: url(images/icons_play.svg) !important;
    background-position: left center !important;
    background-size: 10vw auto !important;
    background-repeat: no-repeat !important;
    
  }
  
  .audioBtn.playing,
  .trigger.audioBtn.playing {
    background-image: url(images/icons_pause.svg) !important;
  }
  
  /**** Plugin: finish  */
  
  .buttonFavorite {
    border: 0.2vh solid white;
    border-radius: 20vw;
    color: white;
    font-size: 150%;
  
    background-image: url(images/icon_star.svg);
    background-position: 5vw center;
    background-size: 5vw auto;
    background-repeat: no-repeat;

    padding-left: 6vw;
  
  }
  
  .buttonFavorite.active {
    background-image: url(images/icon_star_active.svg);
  }
  
  .page-finish h1 {
    font-size: 200%;
  }
  
  
  /****** plugin_select_input */
  
  .plugin_select_input .trigger {
    display: flex;
    max-height: 10vh;
  }
  
  .plugin_select_input .trigger p {
    flex:1;
  }


  /****** plugin_test_output */

  .plugin_test_output .draw-wrap {
    display: flex;
  }
  .plugin_test_output .labely-wrap {
    flex: 1;
    max-width: 5vh;
  }
  .plugin_test_output .labely-wrap .labely {
    padding-right: 2rem;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    transform: rotate(-90deg) translateX(-3rem);
  }
  .plugin_test_output #drawing {
    flex: 1;
  }
  .plugin_test_output .labelx {
    padding-right: 2rem;
  }
  
  
  
  
  /******** plugin_koffer_input */
  
  .plugin_koffer_input .listimage {
    display: flex;
    flex-direction: column;
  }
  
  .plugin_koffer_input .listimage .trigger {

    flex: 1;

  
    min-height: 30vh;
  
    background-size: cover;
    opacity: 0.3;
  }
  
  .plugin_koffer_input .listimage .trigger.active {
    opacity: 1;
  }


  .plugin_koffer_output div {
    padding-top: 1vh;
    padding-bottom: 1vh;
  }

  .plugin_koffer_output .kofferAudioBtn {

      background-image: url(images/icons_play.svg) ;
      background-position: center center ;
      background-size: 15vw auto ;
      background-repeat: no-repeat ;
  }
  .plugin_koffer_output .kofferAudioBtn.playing {
      background-image: url(images/icons_pause.svg) ;
    }
  
  /******** plufin_wimmel */
  
  .plugin_wimmel_input {
    direction: ltr;
  }

  .plugin_wimmel_input .icon-wrap-center {
    display: flex;
    justify-content: center;
  }

  .wimmel_wrap {
    overflow-x: scroll;
    overflow-y: hidden;
  }
  
  .wimmel_trigger {
    position: relative;
    z-index: 99999;
  
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
  
  }
  
  .debug {
    border: 1px solid red;
  }
  
  
  .wimmel_btnwrap {
    position: relative;
    height: 0;
    width: 0;
    top: 0;
    left: 0;
  }

  .wimmel_w337 {
    width: 337vh;
  }

  
  
  
  /******* plugin sync */
  
  /* #sync-progress-bar {
    background-image: linear-gradient(to right, #58bbb8 0%, #FFAC1D 50%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 100%)
  } */
  
  
  
  /***** plugin video */
  
  video {
    background-origin: center top;
    margin-bottom: 2.5vh;
    width: 100%;
  }
  
  .videoposter {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 999999;
    top: -100vw;
  
    background-image: url(images/icons_play_video.svg);
    background-position: center center;
    background-size: 20%;
    background-repeat: no-repeat;
  }

  .video-img {
    opacity: 0.3;
  }


/***** plugin koerper_list */

.koerper_list  .trigger {

    background-position: center center;
    background-size: auto 100%;
    background-repeat: no-repeat;

    height: 10vh;

}



/**** plugin select_category */

#outputlist > li {
    margin-bottom: 2vh;
}

#outputlist .catlist {
    padding-right: 4vw;
    padding-top: 2vh;
}

#outputlist .catlist li {
    list-style-type: disc;
}


/**** texteara  */

.plugin_textarea_output li {
    padding-top: 1vh;
    padding-bottom: 1vh;
}


/***** plugin multiselect */

.plugin_multiselect_output ul {
    padding-right: 4vw;
} 

.plugin_multiselect_output li {
    list-style-type: disc;
} 

/************************** Urkunde (ist Page Class auf einem Output *************************************/


.urkunde .plugin_multiselect_output {
  border: 1vw solid #6bd4a5 !important;
  background-image: url(images/banner.svg);
  background-position: center 2%;
  background-size: auto 12vh;
  background-repeat: no-repeat;
  padding-bottom: 5vh;
  padding-top: 12vh;

}

.urkunde .plugin_multiselect_output li {
  list-style: none !important;
  text-align: center;
  font-weight: bold;
}
.urkunde .plugin_multiselect_output .urkunde-wrap {
  /* display: flex !important;
  justify-content: center;
  padding-top: 2rem; */

  height: 15vh;
  margin-top: 3vh;
  background-image: url('images/quality.svg');
  background-position: center center;
  background-size: auto 100%;
  background-repeat: no-repeat;
}
/* .urkunde .plugin_multiselect_output .urkunde-wrap .urkunde-img {
  max-width: 25%; 
} */


/**** plugin select_multipages */



.plugin_select_multipage_output .list-content li {
  list-style-type: disc;
  margin-right: 4vw;
}


/******************** Comic *******************/

.plugin_comic_output {

    
}

.plugin_comic_output .out_img  {
    background-image: url('images/comic-default.jpg');
    background-size: cover;
    background-position: center center;
    position: relative;
    border-bottom: 0.25vh solid white;
}

.plugin_comic_output .out_name  {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #fff;
    color:#58bbb8;
    padding: 1vh;
}

.plugin_comic_output .out_text  {
    position: absolute;
    border-radius: 0.5vh;
    top: 1vh;
    right: 1vh;
    background-color: white;
    padding: 1vh;
 }


.plugin_comic_output .out_text:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 40%;
	width: 0;
	height: 0;
	border: 19px solid transparent;
	border-top-color: white;
	border-bottom: 0;
	border-left: 0;
	margin-left: -6px;
	margin-bottom: -12px;
}


/******************** Timeline *******************/

.plugin_timeline_output {

}

.plugin_timeline_output>div {
  margin-right: 2vw;
  margin-left: 2vw;
  position: relative;
  padding-left: 15vw;
  margin-bottom: 5vh;
   
}


.plugin_timeline_output .age {
  font-weight: bold;
}

.plugin_timeline_output>div:after {
	content: '';
	position: absolute;
	bottom: -2.5vw;
	left: 50%;
	width: 4vw;
	height: 4vw;
  background-color: white;
  border-radius: 5vw;
  border: 0.5vw solid #6bd4a5;
}

.plugin_timeline_output>div:before {
	content: '';
	position: absolute;
	bottom: -5vh;
	left: 48vw;
	width: 0.5vw;
	height: 5vh;
  background-color: #6bd4a5;
}


.plugin_timeline_output img {
  height: 5vh;
  position: absolute;
  left: 1vh;
  top: 1vh;
}

/*

  Plugin: image
*/

.plugin_image_input  {
  padding-top: 2vh;
}

.plugin_image_input .btn_box {
  display: flex;
  padding-bottom: 2vh;
}
.plugin_image_input button {
  flex: 1;
  max-width: 20vw;
  margin-left: 2rem;
}
.icon-camera {
  background-image: url(images/002-photo-camera.svg);
  background-position: center;
  background-size: auto 70%;
  background-repeat: no-repeat;
}
.icon-gallery {
  background-image: url(images/003-image.svg);
  background-position: center;
  background-size: auto 70%;
  background-repeat: no-repeat;
}
.icon-remove {
  background-image: url(images/004-cancel.svg);
  background-position: center;
  background-size: auto 90%;
  background-repeat: no-repeat;
}

.plugin_image_input .img_box {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
/* .plugin_image_input .output_img {
  width: 90vw;
  height: auto;
} */

/**************** Relatation OUtput ****************/
.plugin_relation_output {
  background-image: url(images/relation_bkgr.jpg);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin: 0 2vw 0 2vw;
  border-radius: 1vh;
  padding-top: 5vh;
  padding-bottom: 5vh;

}

.plugin_relation_output>div {
  text-align: center !important;
  background-image: url(images/relation1.svg);
  background-position: center top;
  background-size: 100% auto;
  background-repeat: no-repeat;
  margin-bottom: 5vh;  
}

.plugin_relation_output>div article {
  display: inline-block;
  margin: 0 1vw 0 1vw;
  text-align: center !important;
}

.plugin_relation_output>div article .image {
  width: 12vw;
  height: 12vw;
  margin-right: auto;
  margin-left: auto;
  display: block;
  background-color:white;
  border-radius:10vw;
  background-image: url(images/relation-profil.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border: 0.5vw solid #58bbb8;
  box-shadow: 0 3px 5px 0 rgba(0,0,0,0.1);

}



.plugin_select_multipage_output .list-content li {
  margin-left: 4vw;
}