#dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.0); /* Semi-transparent background */
    z-index: 99; /* Make sure it's behind the modal but above everything else */
    display: none;
    transition: all 0.5s ease-in-out;
}

#dialog-overlay.show {
    background: rgba(0, 0, 0, 0.3);
    display: block;
}


#dialog-modal {
    position: absolute;
    width: 1300px;
    height: 700px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background: #fff;
    z-index: 100;
    /* display: none; */
    border: 5px solid #666666;
    background: #91c4c7;
    display: none;
}

#dialog-modal .close {
    font-size: 2.5em;
    position: fixed;
    /* display: inline-block; */
    float: left;
    margin-left: 15px;
    margin-top: 15px;
}

#dialog-window {
    position: relative;
    padding-left: 100px;
    padding-right: 100px;
    width: 1100px;
    height: 700px;
    left: 0;
    right: 0;
    margin: auto;
    /* background: #eeeeee; */
    overflow-x: hidden;
    overflow-y: scroll;
}

.dialog-bubble {
    /* position: absolute;
    right: 25px;
    top: 25px; */
    margin-top: 20px;
    margin-bottom: 20px;
    width: 65%;
    min-height: 100px;
    background: #ffffff;
    border: 6px solid #666666;
    font-size: 1.5rem;
    font-weight: bold;
    font-family: "courier new", sans-serif;
    /* Ensures that the container is behaving like a block element */
    display: block;
    padding: 10px;
   
}

.dialog-bubble iframe {
    width: 100%
}

.dialog-bubble img {
    width: 100%
}


.dialog-bubble.left {
    /* margin-left: auto; */
    margin-left: 20px;
    border: 6px solid #ff0000;
    background: #ffe7e7;
}


.dialog-bubble.right {
    margin-left: auto;
    margin-right: 20px;
    background: #e7e7e7;
}

.dialog-bubble button {
    /* Makes buttons sit in a row */
    display: inline-block;
    /* Adds some spacing between the buttons */
    margin-right: 10px;
    border: 6px solid #666666;
    font-size: 2rem;
    padding: 5px 10px;
    background: #92C4C7;
    transition: all 0.3s ease-in-out;
    margin-top: 5px;
}

.dialog-bubble button:hover {
 
    background: #666666;
    color: #fff;
}
.dialog-bubble button.chosen {
 
    background: #666666;
    color: #fff;
}

.speaker-profil {
    background: #ff0000;
    width: 240px;
    height: 320px;
    position: absolute;
   
}

.speaker-profil.right{
    right: -160px;
    top: -40px;
    z-index: 1001;
    border: 6px solid #444444;
    
}

.speaker-profil.left{
    left: -160px;
    bottom: -40px;
    z-index: 1001;
    border: 6px solid #ff0000;
}
.speaker-profil img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* .dialog-bubble.right:after{
    content:'';
    position:relative;
    border:10px solid transparent;
    border-left:10px solid #000;
    top:20px;
    right:-100px;
   
  } */