#annika.speech {

   
    position: absolute;
    width: 600px;
    height: 700px;
    left: 490px;
    top: 425px;
    background: url(/Images/CitizenDialog__Annika_bl.png) no-repeat !important;
    background-size: 90% !important;
    
}

#main-container.scene-dialog {

    background: #C3B0A3;
}

#citizens {
    background: #C3B0A3;

}
#citizens .citizen {
    position: absolute;
   
    width: 120px;
    height: 260px;
    
    background-repeat: no-repeat;
    background-size: 100%;
}

.citizen.no-1{
    left: 100px;
    top: 290px;
}

.citizen.no-2{
    left: 230px;
    top: 290px;
}

.citizen.no-3{
    left: 360px;
    top: 290px;
}

.citizen.no-4{
    left: 100px;
    top: 540px;
}

.citizen.no-5{
    left: 230px;
    top: 540px;
}

.citizen.no-6{
    left: 360px;
    top: 540px;
}

.citizen.no-7{
    left: 980px;
    top: 290px;
}

.citizen.no-8{
    left: 1110px;
    top: 290px;
}

.citizen.no-9{
    left: 1240px;
    top: 290px;
}

.citizen.no-10{
    left: 980px;
    top: 540px;
}

.citizen.no-11{
    left: 1110px;
    top: 540px;
}

.citizen.no-12{
    left: 1240px;
    top: 540px;
}

.citizen.no-13{
    left: 540px;
    top: 220px;
}

.citizen.no-14{
    left: 670px;
    top: 220px;
}

.citizen.no-15{
    left: 800px;
    top: 220px;
}

.citizen.Academics {
    background: url(/Images/CitizenDialogue__CitizenclassB_bl.png);
}

.citizen.Iratics {
    background: url(/Images/CitizenDialogue__CitizenclassA_bl.png);
}

.citizen.Hesitants {
    background: url(/Images/CitizenDialogue__CitizenclassC_bl.png);
}

.citizen.null {
    background: url(/Images/CitizenDialogue__EmptyChair_bl.png);
}


#action-Container.scene-dialog {
    position: absolute;
    /* left: 1445px;
    top: 8px; */
    left: 1438px;
    top: 2px;
    width: 484px;
    height: 817px;
    background: url('/Images/UI__Aktionsleiste_bl.png');
    background-repeat: no-repeat;
    overflow: hidden;

} 

#action-Container.scene-dialog .title {
    position: relative;
    right: 0px;
    top: 50px;
    width: 420px;
    text-align: center;
    font-size: 2.5em;
    font-weight: bold;
    
}
#action-Container.scene-dialog .wrap{
    overflow: scroll;
    /* height: 750px; */
    height: 630px;
    top: 125px;
    position: relative;


}


#action-Container.scene-dialog .information {
    position: relative;
    right: -40px;
    top: 20px;
    width: 420px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 20px;
    text-align: left;
    font-size: 1.5em;
    font-weight: bold;
}

#action-Container.scene-dialog .interaction-container {
    position: relative;
    right: -40px;
    /* top: 100px; */
    width: 420px;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: left;
    font-size: 1.5em;
    font-weight: normal;
}


.animated-progress {
    display: inline-block;
    width: 300px;
    height: 50px;
    border-radius: 5px;
    margin: 20px 10px;
    border: 1px solid rgb(189, 113, 113);
    overflow: hidden;
    position: relative;
  }
  
  .animated-progress span {
    height: 100%;
    display: block;
    width: 0;
    color: #000000;
    line-height: 50px;
    position: absolute;
    text-align: end;
    padding-right: 5px;
  }
  
  .progress-neutral span {
    background-color: #F8BC02;
  }
  .progress-happy span {
    background-color: #17FF00;
  }
  .progress-unsettled span {
    background-color: #4BCDF3;
  }
  .progress-angry span {
    background-color: #FD0100;
  }

  .emotional-state {
    width: 70px;
    display: inline-block;
    position: relative;
    top: -15px;
  }