@import 'common';

#poststuff {
  .du_first_run_container {
    padding: 120px 20%;
    text-align: center;
    background-color: $brand_color_dark;

    .du_fr_col_50 {
      float: left;
      width: 40%;
      margin: 0 5%;

      p {
        border-top: 1px solid $light_text;
        margin-top: 15px;
        padding-top: 15px;

        a {
          text-decoration: none;
          font-size: 16px !important;
        }
      }
    }

    .du_fr_step_2 {
      display: none;
    }

    .notice {
      color: $alert_highlight;
      font-weight: 400;

      p {
        color: $alert_highlight;
        font-weight: 400;

        a {
          color: $alert_highlight;
          font-weight: 400;
        }
      }
    }

    h1 {
      font-size: 26px;
      padding: 0;
      margin-bottom: 40px;
      color: $light_text;
    }

    h2 {
      font-size: 18px;
      padding: 0;
      color: $subtle_grey;
      text-transform: uppercase;
    }

    p {
      font-size: 16px;
      line-height: 1.2em;
      font-size: 18px;
      color: $light_text;

      .dashicons {
        margin-right: 10px;
      }

      .du_api_key {
        font-size: 20px;
        color: $brand_color_dark;
        background-color: $light_text;
        padding: 10px 20px 11px;
        width: 430px;
        line-height: 1em;
        border: none;
        border-radius: 0;
        margin: 0;
      }

      button {
        font-size: 20px;
        color: $light_text;
        background-color: $alert_highlight;
        padding: 10px 20px;
        line-height: 1em;
        border: 2px solid $alert_highlight;
        display: inline-block;
        cursor: pointer;
      }

      a {
        font-size: 18px;
        color: $light_text;
        font-weight: 700;
      }
    }

    p.du_logo {
      margin-bottom: 20px;
      border-bottom: 1px solid $light_text;

      img {
        margin-bottom: 20px;
        display: inline-block;
        max-width: 400px;
      }
    }

    p.du_no_key_help {
      font-size: 14px;
      line-height: 1.2em;

      a {
        font-size: 14px;
        line-height: 1.2em;
      }
    }

    p.du_skip_wizard {
      margin-top: 75px;

      a {
        font-size: 12px;
      }
    }
  }
}

.du-account-active {
  color: $alert_go;
}

.du-account-expired {
  color: $alert_stop;
}

.du_builder_col {
  margin-right: 50px;
  float: left;
  margin-top: 20px;
  width: 100px;
  min-height: 175px;

  .du_builder_img {
    border: 1px solid $subtle_grey;
    max-width: 100px;
  }

  .du_status_overlay {
    position: absolute;
    top: -10px;
    right: -10px;
  }

  > div {
    position: relative;
  }

  h3 {
    font-size: 14px;
  }
}

.du_text_left {
  text-align: left;
}

@media screen and (max-width: 1024px) {
  #poststuff {
    .du_first_run_container {
      padding: 60px 5%;

      p.du_logo {
        img {
          max-width: 60%;
        }
      }
    }
  }
}
