body.popup-no-scroll {
  overflow: hidden; }

.popup {
  background: rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1006;
  opacity: 1;
  transition: opacity 0.3s ease; }
  .popup.removing {
    opacity: 0; }
  .popup > div {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    background: rgba(0, 0, 0, 0.1);
    padding: 5px;
    position: absolute;
    left: 50%;
    top: 50%; }
    .popup > div.fill-height {
      top: 0;
      max-height: 100%; }
    .popup > div.fill-width {
      left: 0;
      max-width: 100%; }
    .popup > div.fill-edge {
      left: 0.9375rem;
      top: 0.9375rem;
      right: 0.9375rem;
      bottom: 0.9375rem; }
    .popup > div > div {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
      max-width: 100%;
      max-height: 100%;
      min-height: 100%;
      background: #f1f1f1;
      padding: 1.25rem; }
      .popup > div > div > * {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex; }
      .popup > div > div div.caption {
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        color: #2b2b2b;
        font-size: 1.143em;
        font-weight: bold;
        margin-top: -5px;
        padding: 0 0 1.25rem 1.875rem; }
        .popup > div > div div.caption .close {
          position: absolute;
          top: 0.9375rem;
          left: 0.9375rem; }
      .popup > div > div div.body {
        -webkit-flex: 0 1 auto;
        -ms-flex: 0 1 auto;
        flex: 0 1 auto;
        overflow-y: auto; }
      .popup > div > div > nav {
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        padding-top: 0.9375rem;
        justify-content: flex-start; }
        .popup > div > div > nav > * {
          margin-right: 0.625rem;
          vertical-align: top; }

/
