.modal-block {
  background-color: var(--modal-block-background);
  opacity: .1; }

.modal-block-blur {
  filter: blur(2.5px); }

.modal {
  position: absolute;
  top: 50px;
  max-width: calc(100vw - 50px);
  display: none;
  border-width: 8px;
  border-style: solid;
  border-color: var(--modal-border-color);
  border-radius: 30px;
  overflow: auto;
  background-color: var(--modal-background);
  box-shadow: 8px 8px 10px var(--modal-shadow-color); }
  .modal > .modal-header {
    border-bottom: solid 1px var(--modal-separations-color);
    padding: 10px;
    margin: 0px 15px 10px 15px;
    text-align: center; }
  .modal > .modal-body {
    margin: 0px 15px 0px 15px;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 70vh; }
    .modal > .modal-body > * {
      margin: 10px; }
  .modal > .modal-footer {
    margin: 10px 15px 0px 15px;
    padding: 10px; }

.modal-show {
  top: -50px;
  opacity: 0;
  animation: modal-show 400ms ease-in-out forwards; }

@keyframes modal-show {
  0% {
    top: -150px;
    opacity: 0; }
  100% {
    top: 50px;
    opacity: 1; } }

.modal-hidden {
  animation: modal-hidden 400ms ease-in-out forwards; }

@keyframes modal-hidden {
  0% {
    top: 50px;
    opacity: 1; }
  100% {
    top: -150px;
    opacity: 0; } }