UPDATE: I was able to force the box and text to work by adding a "height" value in CSS but the BG image won't load in. Inspector shows the image is loading from the correct source but it will not display in Firefox. I tried setting the null check to false and droping the "!" operator from the getElementByID code but that did not fix it.

I made a simple typing game that is supposed to create an overlay with a dialogue box that allows the player to either go back to the selection page or repeat the game. The dialogue box displays just fine in Chrome and Edge (IE) but in Firefox the Inspector shows the box div as collapsed to 1px height.

here is the code: HTML

...
 <div className="overlay" id="overlay_2">
          <div className="dialog">
            <div className="dialogcontainer">
              <img className="dialogbg"/>
              <h3 className="dialogtext">Would you like to repeat this quest?</h3>
              <a href="/affirmation"><h2 className="no">Go back</h2></a>
              <h2 className="yes" onClick={repeat}>Repeat</h2>
            </div>
          </div>
        </div>
...

JS

function endGame() {
      var end = document.getElementById('audio_end')!;
      (end as HTMLAudioElement).play();
      document.getElementById('overlay_2')!.setAttribute("style","display: block; opacity:1; -moz-opacity:1; filter:alpha(opacity=100); z-index: 20");
  }

CSS

.dialog {
  position: absolute;
  left:50%;
  top: 50%;
  transform: translate(-50%, -75%);
}
.dialogcontainer {
  position: relative;
  text-align: center;
}

.dialogbg {
  position: relative;
  width: 500px;
  content: url("/Images/Video%20Page/dialog.jpg");
}

.dialogtext {
  position: absolute;
  width: 70%;
  top: 50px;
  left: 50%;
  transform: translate(-50%, 0);
}

.yes {
  position: absolute;
  width: 40%;
  bottom: 30px;
  right: 30px;
  cursor: url('/Images/Main%20Menu/mouse2.png'), auto;  
}


.no {
  position: absolute;
  width: 40%;
  bottom: 30px;
  left: 30px;
  cursor: url('/Images/Main%20Menu/mouse2.png'), auto;  
}

.yes:hover, .no:hover {
  color: #555;
}

The black translucent overlay works fine in Firefox but the box does not show. I have disabled all ad-blockers in Firefox but that wasn't the problem. Any help is greatly appreciated.