.modal {
  &.upgrade-license-modal {
    @include media-breakpoint-up(lg) {
      padding: 154px 0 40px !important;
      align-items: center;
      justify-items: center;
    }
  }
}

#upgrade-license-modal-content {
  background-color: var(--surface-nav-bg);
  max-width: 1026px;
  width: 100%;
  overflow: hidden;

  @include media-breakpoint-down(lg) {
    min-height: 100dvh;
  }

  @include media-breakpoint-up(lg) {
    box-shadow: 0px 12px 24px 0px rgba(0, 0, 0, 0.08);
    border-radius: 15px;
  }

  & > .title {
    display: flex;
    flex-flow: row;
    align-content: center;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;

    padding: 25px 20px 10px;

    @include media-breakpoint-up(lg) {
      padding: 56px 20px 10px;
    }

    p {
      @include typography(app-title);
    }
  }

  & > .image-container {
    align-items: center;
    display: flex;
    flex-flow: row;
    justify-content: center;

    padding-bottom: 20px;

    @include media-breakpoint-up(lg) {
      padding-bottom: 45px;
    }
  }

  .controls {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px 20px;
    flex-flow: column-reverse;
    gap: 18px;

    @include media-breakpoint-up(lg) {
      padding: 0 50px 50px;
      flex-flow: row;
    }

    .btn,
    a {
      width: 100%;
    }

    a {
      text-decoration: none;
    }
  }

  & > .content {
    box-sizing: border-box;
    padding: 0 20px 40px;

    & > :nth-child(1) {
      padding-bottom: 20px;
    }

    @include media-breakpoint-up(lg) {
      padding: 0 50px 40px;

      & > :nth-child(1) {
        padding-bottom: 40px;
      }
    }

    p {
      @include typography(app-welcome-2);
    }

    ul {
      padding-left: 28px;
      list-style: none;
      padding-bottom: 32px;

      @include media-breakpoint-up(lg) {
        padding-bottom: 40px;
      }

      li {
        position: relative;
        @include typography(app-welcome-2);

        &::before {
          user-select: none;
          position: absolute;
          left: -24px;
          top: 50%;
          transform: translateY(-50%);
          content: ' ';
          width: 18px;
          height: 18px;
          background: var(--list-image);
        }
      }
    }
  }
}
