:root {
  --dialog_width: 300px;
  --dialog_height: auto;
  --dialog_background: white;
  --dialog_color: black;
  --dialog_padding: 10px;
  --dialog_radius: 8px;
}

.dialog {
  display: flex;
  position: absolute;
  justify-content: center;   /* horizontal centering */
  align-items: center;       /* vertical centering */
  height: 100%;
  width: 100%;
  top: 0px;
  z-index: -1;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.dialog_wrapper {
  display: flex;
  justify-content: center;   /* horizontal centering */
  align-items: center;       /* vertical centering */
  box-sizing: border-box;
  width: var(--dialog_width);
  height:var(--dialog_height);
  padding: var(--dialog_padding);
  background: var(--dialog_background);
  border-color: var(--dialog_color);
  border-radius: var(--dialog_radius); 
  box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 8px; 
  display: none;
}

.dialog_wrapper.visible {
    display: flex;
}

.dialog_content {
  box-sizing: border-box;
  width:100%;
  height: 100%;
  text-align: center;
  border: solid;
  border-radius: inherit;
  border-color: inherit;
  border-width: 1px;
  padding: 30px;
}

/* Toggle this class - hide and show the dialog */
.dialog .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the dialog) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}