var modal = document.getElementById('id01');
var modal2 = document.getElementById('id02');
var modal3 = document.getElementById('id03');
var modal4 = document.getElementById('id04');
var modal5 = document.getElementById('id05');
var modal6 = document.getElementById('id06');
var modal7 = document.getElementById('id07');
var modal8 = document.getElementById('id08');
var modal9 = document.getElementById('id09');
var modal10 = document.getElementById('id10');
var modal11 = document.getElementById('id11');
var modal12 = document.getElementById('id12');
var modal13 = document.getElementById('id13');
var modal14 = document.getElementById('id14');
var modal15 = document.getElementById('id15');
var modal16 = document.getElementById('id16');
var modal17 = document.getElementById('id17');
var modal18 = document.getElementById('id18');
var modal19 = document.getElementById('id19');
var modal20 = document.getElementById('id20');
var modal21 = document.getElementById('id21');
var modal22 = document.getElementById('id22');
var modal23 = document.getElementById('id23');
var modal24 = document.getElementById('id24');
var modal25 = document.getElementById('id25');
var modal26 = document.getElementById('id26');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
  if (event.target == modal2) {
    modal2.style.display = "none";
  }
  if (event.target == modal3) {
    modal3.style.display = "none";
  }
  if (event.target == modal4) {
    modal4.style.display = "none";
  }
  if (event.target == modal5) {
    modal5.style.display = "none";
  }
  if (event.target == modal6) {
    modal6.style.display = "none";
  }
  if (event.target == modal7) {
    modal7.style.display = "none";
  }
  if (event.target == modal8) {
    modal8.style.display = "none";
  }
  if (event.target == modal9) {
    modal9.style.display = "none";
  }
  if (event.target == modal10) {
    modal10.style.display = "none";
  }
  if (event.target == modal11) {
    modal11.style.display = "none";
  }
  if (event.target == modal12) {
    modal12.style.display = "none";
  }
  if (event.target == modal13) {
    modal13.style.display = "none";
  }
  if (event.target == modal14) {
    modal14.style.display = "none";
  }
  if (event.target == modal15) {
    modal15.style.display = "none";
  }
  if (event.target == modal16) {
    modal16.style.display = "none";
  }
  if (event.target == modal17) {
    modal17.style.display = "none";
  }
  if (event.target == modal18) {
    modal18.style.display = "none";
  }
  if (event.target == modal19) {
    modal19.style.display = "none";
  }
  if (event.target == modal20) {
    modal20.style.display = "none";
  }
  if (event.target == modal21) {
    modal21.style.display = "none";
  }
  if (event.target == modal22) {
    modal22.style.display = "none";
  }
  if (event.target == modal23) {
    modal23.style.display = "none";
  }
  if (event.target == modal24) {
    modal24.style.display = "none";
  }
  if (event.target == modal25) {
    modal25.style.display = "none";
  }
  if (event.target == modal26) {
    modal26.style.display = "none";
  }
}
  
function off() {
    document.getElementById("overlay_detail").style.display = "none";
}