
.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 201;
  overflow: hidden;
  outline: 0;
}

.modal div[role=dialog] {
  max-height: 80vh;
  overflow-y: auto;
}

.modal div[role=dialog]:focus {
  outline: dashed 1px rgb(255, 255, 255);
  outline-offset: 3px;
}

.modalScreen {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.modal header {
  padding: 0.3125rem 0.3125rem 0.3125rem 1.25rem;
}

.modal header button {
  padding: 0.875rem 0.9125rem;
}

.modal header button::before {
  width: 16px;
}