// 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;
  }

  .red {
     color: #ff0000;
  }

  //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;
  }

}

section.banner
{
   width: 100%;
   background-color: #dcfdff;
   display: flex;
   align-items: center;
   border: 1px solid #ccc;
   margin-top: 35px;
   margin-bottom: 45px;
   z-index: 12;
   position: relative;
   opacity: 0;

   span {
     text-align: center;

   }

   .image { flex: 1; }
   .line {
      flex: 3;
      h3 { color: #00d0e5 };

   }
   .button-wrap
   {
     flex: 2;
     .button {
        background: #ff0000;
        padding: 8px;
        font-weight: 700;
        font-size: 20px;
        margin: 8px;
        color: #fff;
        text-transform: uppercase;
        //height: 45px;
     }
   }
}