.popup-types td {
  vertical-align: middle;
  text-align: center;
  width: 33%; }

.popup-types .swal2-icon,
.popup-types button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 auto !important; }

.popup-types .swal2-success::before, .popup-types .swal2-success::after {
  background: transparent !important; }


button,
.button {
  background-color: #3085d6;
  color: #fff;
  border: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
  font-size: 1.125em;
  font-weight: 500;
  border-radius: .1875em;
  padding: .9em 2.1875em;
  cursor: pointer;
  white-space: nowrap; }
  button:hover,
  .button:hover {
    background-color: #297dce; }
  button:focus:not(.swal2-close):not(.btn),
  .button:focus:not(.swal2-close):not(.btn) {
    -webkit-box-shadow: 0 0 0 0.125em #f2f4f6, 0 0 0 0.25em #a7adb2;
            box-shadow: 0 0 0 0.125em #f2f4f6, 0 0 0 0.25em #a7adb2;
    outline: none; }
  button::-moz-focus-inner,
  .button::-moz-focus-inner {
    border: 0; }
  button:active,
  .button:active {
    background-color: #236bb0; }
  button.cancel,
  .button.cancel {
    background-color: #d0d0d0; }
    button.cancel:hover,
    .button.cancel:hover {
      background-color: #c8c8c8; }
    button.cancel:active,
    .button.cancel:active {
      background-color: #b7b7b7; }

.center-container {
  max-width: 45.3125rem;
  margin: 4.375em auto; }

pre {
  color: #f7f7f7;
  background: #282c34;
  text-align: left;
  position: relative; }
  pre code {
    display: block;
    padding: .5em;
    border-radius: .3125em; }
  pre .comment {
    color: #8d98a5; }
    pre .comment a {
      color: #8d98a5;
      text-decoration: underline; }
  pre.code-sample:hover::after {
    opacity: 1;
    top: -2em; }
  pre.code-sample::after {
    content: 'Try it on CodePen';
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 13em;
    height: 2em;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    top: 0;
    right: .5em;
    padding-left: .8em;
    opacity: 0;
    background: #000 url("/images/codepen.svg") 11.6em 0.2em no-repeat;
    background-size: 1.6em;
    cursor: pointer;
    -webkit-transition: top .2s ease-in-out, opacity .2s ease-in-out;
    transition: top .2s ease-in-out, opacity .2s ease-in-out; }
    @media all and (max-width: 46.875rem) {
      pre.code-sample::after {
        display: none; } }

.swal2-content code {
  text-align: center; }

kbd {
  border: 1px solid #8d98a5;
  border-radius: .1875em;
  padding: 0 .125em; }

.showcase {
  background-color: #e2e5e8;
  margin-top: .9em;
  padding: 1.25em;
  display: inline-block;
  width: 23.9375em;
  vertical-align: top;
  position: relative; }
  @media all and (max-width: 54.0625rem) {
    .showcase {
      padding: 0 .625em; }
      .showcase.normal,
      .showcase img {
        display: none; } }
  @media all and (max-width: 26.4375rem) {
    .showcase {
      width: 90%; } }
  .showcase h4 {
    font-size: 1em;
    color: #b3b3b3;
    line-height: 1.375em;
    margin: 0 auto;
    font-weight: 800; }
  .showcase.sweet {
    padding-top: .875em; }
    .showcase.sweet button {
      margin-top: .8125em; }
  .showcase button {
    margin: 1.25em; }
  .showcase .vs-icon {
    background-image: -webkit-image-set(url("/images/vs_icon.png") 1x, url("/images/vs_icon@2x.png") 2x);
    background-image: image-set(url("/images/vs_icon.png") 1x, url("/images/vs_icon@2x.png") 2x);
    background-repeat: no-repeat;
    width: 4.3125em;
    height: 4.3125em;
    position: absolute;
    right: -2.125em;
    top: 3.75em;
    z-index: 2; }
    @media all and (max-width: 54.0625rem) {
      .showcase .vs-icon {
        margin: .3125em auto;
        right: auto;
        left: 50%;
        margin-left: -2.1875em;
        top: auto;
        bottom: -2.1875em; } }

.examples {
  list-style-type: none;
  width: 50.875rem;
  margin: 0 auto;
  text-align: left;
  padding-left: 0; }
  @media all and (max-width: 47.375rem) {
    .examples {
      width: auto; } }
  .examples li {
    padding-left: 0; }
  .examples .ui,
  .examples pre {
    display: inline-block;
    vertical-align: top; }
    @media all and (max-width: 47.375rem) {
      .examples .ui,
      .examples pre {
        display: block;
        max-width: none;
        margin: 0 auto;
        font-size: .8em; } }
  .examples .ui {
    width: 18.75rem;
    text-align: center; }
    .examples .ui button {
      margin-top: .75em; }
    .examples .ui p {
      text-align: center;
      margin-bottom: 0;
      padding: 0 2em; }
  .examples pre {
    max-width: 33em;
    margin-top: 2.5em; }
    @media all and (max-width: 47.375rem) {
      .examples pre {
        margin-top: 1em !important;
        margin-bottom: 3.75em; } }

ol {
  max-width: 45.3125rem;
  margin: 4.375em auto;
  list-style-position: inside;
  padding-left: 0; }
  ol li {
    color: #a7adb2; }
    ol li p {
      margin-bottom: .625em; }

table {
  width: 45.3125rem;
  margin: .625em auto;
  text-align: left;
  border-collapse: collapse; }
  @media all and (max-width: 46.875rem) {
    table {
      width: auto;
      margin: .625em auto; } }
  table th {
    background-color: #fff;
    padding: .625em 1.25em;
    color: #666;
    font-weight: 400;
    position: relative;
    white-space: nowrap; }
    @media all and (max-width: 22.5rem) {
      table th {
        padding: .625em .25em; } }
  table td {
    padding: .625em 1.25em;
    vertical-align: top; }
    @media all and (max-width: 22.5rem) {
      table td {
        padding: .625em .25em; }
        table td b {
          font-size: .8125em; } }

@media all and (max-width: 46.875rem) {
  .popup-types th:nth-child(2),
  .popup-types td:nth-child(2),
  .input-types th:nth-child(2),
  .input-types td:nth-child(2) {
    display: none; } }

.input-types td {
  vertical-align: middle;
  text-align: center;
  width: 33%; }

@media all and (max-width: 46.875rem) {
  .dismiss-reasons tr {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: .625em 1.25em; }
  .dismiss-reasons th {
    display: none; }
  .dismiss-reasons td {
    padding: 0; }
    .dismiss-reasons td:nth-child(3) {
      display: none; } }

.hidden {
  opacity: 0; }

.nowrap {
  white-space: nowrap; }

@media all and (max-width: 46.875rem) {
  .mobile-hidden {
    display: none; } }

.github-corner {
  position: fixed;
  top: 0;
  right: 0; }

.carbonads-wrapper {
  height: 126px;
  opacity: 0; }

.frameworks-integrations,
.donation-options,
.collaborators {
  max-width: 43.75rem;
  margin: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  font-size: 1.25em; }
  .frameworks-integrations a,
  .donation-options a,
  .collaborators a {
    display: inline-block;
    min-width: 6.875em;
    text-decoration: none; }
  .frameworks-integrations img,
  .donation-options img,
  .collaborators img {
    width: 5em;
    height: 5em;
    margin-top: .625em; }

.collaborators {
  font-size: .8125em; }

.hall-of-donators {
  display: inline-block;
  font-size: 1.2em;
  margin: 1em auto 0; }

.stats {
  font-size: .8125em;
  opacity: 0;
  margin-top: .4375em; }