.jrb-modal {
  --margin: 30px;
  --mt: var(--margin);
  --mb: var(--margin);
  --ml: var(--margin);
  --mr: var(--margin);
  position: fixed;
  z-index: 999999;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: fit-content;
  height: fit-content;
  margin: auto;
  padding: 1rem;
  padding-top: 1.5rem;
  border: 1px solid #000;
  border-radius: var(--br);
  background-color: #fff;
}

.jrb-modal[data-state="hide"] {
  display: none;
}

.jrb-modal-overlay {
  display: none;
}

.jrb-modal-close {
  position: absolute;
  top: 0.25rem;
  right: 0.5rem;
  cursor: pointer;
}

.jrb-modal h2 {
  margin-top: 0;
}

.jrb-modal[data-pos="c"] {
  margin-top: auto;
  margin-bottom: auto;
  margin-left: auto;
  margin-right: auto;
}

.jrb-modal[data-pos*="t"] {
  margin-top: var(--mt);
}

.jrb-modal[data-pos*="b"] {
  margin-bottom: var(--mb);
}

.jrb-modal[data-pos*="l"] {
  margin-left: var(--ml);
}

.jrb-modal[data-pos*="r"] {
  margin-right: var(--mr);
}

@media screen and (max-width: 991px) {
  .jrb-modal[data-state="show"] + .jrb-modal-overlay {
    display: block;
    position: fixed;
    z-index: 999998;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
  }

  .jrb-modal[data-mobile="c"] {
    margin-top: auto;
    margin-bottom: auto;
    margin-left: auto;
    margin-right: auto;
  }

  .jrb-modal[data-mobile*="t"] {
    margin-top: var(--mt);
  }

  .jrb-modal[data-mobile*="b"] {
    margin-bottom: var(--mb);
  }

  .jrb-modal[data-mobile*="l"] {
    margin-left: var(--ml);
  }

  .jrb-modal[data-mobile*="r"] {
    margin-right: var(--mr);
  }
}