
// in our own scope.
.settings_page_wp-shortpixel-settings
{
  .top-menu
  {
    font-size: 18px;
    a { font-size: 18px; }
  }

  .wp-shortpixel-tab-content
  {
    transition: all 1000ms linear;
  }

  //tabs
  article.sp-tabs
  {
    section
    {
      .wp-shortpixel-tab-content
      { opacity: 0; }
      &.sel-tab .wp-shortpixel-tab-content
      {
        opacity: 1;
      }
    }
    section h2 {
      position: absolute;
      font-size: 1.3em;
      font-weight: normal;
      width: 180px;
      height: 1.8em;
      top: -1.8em;
      left: 10px;
      padding: 0;
      margin: 0;
      color: #999;
      background-color: #ddd;
      /* border-radius: 5px 5px 0 0; */
      a {
          display: block;
          width: 100%;
          line-height: 1.8em;
          text-align: center;
          text-decoration: none;
          color: #23282d;
          outline: 0 none;
      }
    }
  }

  article.sp-tabs section:nth-child(2) h2 {
      left: 192px;
  }
  article.sp-tabs section:nth-child(3) h2 {
      left: 374px;
  }
  article.sp-tabs section:nth-child(4) h2 {
      left: 556px;
  }
  article.sp-tabs section:nth-child(5) h2 {
      left: 738px;
  }
  article.sp-tabs section:nth-child(6) h2 {
      left: 920px;
  }
  //article.sp-tabs section h2

  section#tab-debug
  {
     .flex {
       display: flex;
     }
     .env .flex {
        flex-wrap: wrap;
        max-width: 450px;
        span {
            width: 45%;
            padding: 4px;
        }
     }
  }

  /* In-view notice ( not on top, between the options ) - styled after WP notice */
  .view-notice
  {

    box-shadow: 0 1px 1px 0 rgba( 0, 0, 0, 0.1 );
    border: 4px solid #fff;

    padding: 1px 12px;
    p {
      margin: 1em 0 !important;
    }
    &.warning
    {
      border-left-color: #ffb900;
    }
  }

  .view-notice-row
  {
    display: none;
  }

}
