/*
style based on
https://lh3.googleusercontent.com/proxy/PPqIofq-8GVKJ_W3iq8Y31HxXSmVvHRFgCAbaPN6oIJ9sAfCRvnaYYZmxCMKEevuHN1S8G-0qGVWlnDbKN0WN7FS
*/

@font-face {
  font-family: 'MS Sans Serif';
  font-style: normal;
  font-weight: normal;
  src: local('MS Sans Serif'), url('../fonts/ms-sans-serif.ttf') format('ttf');
}

.win95 .dialog {
  background-color: #c0c0c0;
  min-height: 100px;
  margin: auto;
  font-family: "MS Sans Serif", Arial, sans-serif;
  font-size: 11px;
  box-shadow: inset 1px 1px #fff, inset -1px -1px #808080, 1px 1px #000;
  border: 1px solid #dfdfdf;
  padding: 3px;
}

.win95 .dialog .header {
  background: linear-gradient(90deg, #000080, #1084d0);
  height: 18px;
  color: white;
  font-weight: bold;
  font-size: 11px;
  padding: 2px 3px;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row-reverse;
}

.win95 .dialog .header .x:before {
  content: '✕';
}

.win95 .dialog .header .x {
  width: 16px;
  height: 14px;
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #c0c0c0;
  color: black;
  box-shadow: inset 1px 1px #fff, inset -1px -1px #808080;
  border: 1px solid #000;
  font-family: sans-serif;
  font-weight: bold;
  position: static;
  margin-right: 2px;
}

.win95 .dialog .body .buttons {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 10px;
}

.win95 .dialog .body .button {
  min-width: 75px;
  height: 23px;
  background: #c0c0c0;
  border: 1px solid #000;
  box-shadow: inset 1px 1px #fff, inset -1px -1px #808080;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  padding: 0 10px;
}

.win95 .dialog .body .button-ok {
  border: 1px solid #000;
  outline: 1px solid #000; /* Focused border look */
  outline-offset: -4px;
}