$brand_darkblue: #0C3A5B;
$brand_lightgrey: #B9B9BA;
$brand_white: #fff;
$brand_lightblue: #409EBB;
$brand_midgrey: #545764;
$brand_darkgrey: #2E3744;
$brand_orange: #Ef4f15;
$brand_gold: #EBCE10;
$color_qmark: $brand_white;
$color_2: $brand_white;
$background_color_qmark: $brand_lightblue;
$background_color_tip: $brand_darkblue;
$background_pointer: $brand_darkblue;

/* CSS animation */
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  100% {
    opacity: 100%;
    transform: scale(1);
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 100%;
  }
}
.help-tip__td {
  float: right;
}
.help-tip {
  position: relative;
  text-align: center;
  background-color: $background_color_qmark;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 14px;
  line-height: 20px;
  cursor: default;

  &:before {
    content: '?';
    font-weight: bold;
    color: $color_qmark;
  }

  &:hover {
    p {
      display: block;
      transform-origin: 100% 0;
      -webkit-animation: fadeIn 0.3s ease-in-out;
      animation: fadeIn 0.3s ease-in-out;
    }
  }

  p {
    z-index: 9000;
    display: none;
    text-align: left;
    background-color: $background_color_tip;
    padding: 20px;
    width: 300px;
    @media screen and (max-width: 400px) {
      width: 200px;
    }
    position: absolute;
    border-radius: 3px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    right: -4px;
    color: $color_2;
    font-size: 13px;
    line-height: 1.4;

    &:before {
      position: absolute;
      content: '';
      width: 0;
      height: 0;
      border: 6px solid transparent;
      border-bottom-color: $background_pointer;
      right: 10px;
      top: -12px;
    }

    &:after {
      width: 100%;
      height: 40px;
      content: '';
      position: absolute;
      top: -40px;
      left: 0;
    }
  }
}

.wp-core-ui {
  .fs-page {
    &.wrap {
      margin: 0 0 0 -20px;
      @media screen and (max-width: 782px) {
        margin: 0 0 0 -10px;
      }
    }

    h2.brand {
      background: $brand_darkblue;
      padding: 10px 0 0 0;
      margin: 0;
    }

    #poststuff {
      margin: 10px 20px 0 22px;
    }

    .logo {
      height: 80px;
      padding-right: 35px;
      vertical-align: middle;
    }

    .text {
      background: $brand_lightgrey;
      color: $brand_darkgrey;
      padding: 10px;
      margin-top: 10px;
      font-weight: bold;
    }

    .button-secondary, .button {
      color: $brand_midgrey;
      border-color: $brand_lightgrey;
      background: $brand_white;
      box-shadow: 0 1px 0 $brand_midgrey;

      &:hover {
        background: $brand_lightgrey;
        border-color: $brand_midgrey;
        color: $brand_white;
      }
    }

    .button-primary, .page-title-action {
      background: $brand_darkblue;
      border-color: $brand_darkgrey;
      box-shadow: 0 1px 0 $brand_darkgrey;
      color: #fff;
      text-shadow: none;

      &:hover {
        background: $brand_lightblue;
        border-color: $brand_lightgrey;
        color: $brand_white;
      }

      &.orange {
        background: $brand_orange;
        border-color: $brand_orange;
        box-shadow: 0 1px 0 $brand_orange;

        &:hover {
          background: $brand_gold;
          border-color: $brand_gold;
          color: $brand_darkblue;
          box-shadow: none;
        }
      }
    }


  }
}

.fs-settings-meta-box-wrap {
  img {
    max-width: 100%;
  }
}


.wp-admin {
  .toplevel_page_fwas-hidden-menu-page {
    display: none;
  }
}

.fs-email-view {
  pre {
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
  }
}

// Upgrade notice styles (compact)
.fwas-upgrade-notice {
  position: relative;
  background: #fff;
  border-left: 4px solid $brand_lightblue;
  padding: 12px 18px;
  margin: 15px 20px 15px 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);

  .notice-dismiss {
    position: absolute;
    top: 5px;
    right: 5px;
    padding: 9px;
    background: none;
    border: none;
    color: #787c82;
    cursor: pointer;
    text-decoration: none;

    &:before {
      content: '\f153';
      font: normal 16px/20px dashicons;
      display: inline-block;
      width: 20px;
      height: 20px;
      speak: never;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    &:hover {
      color: #1d2327;
    }
  }

  h3 {
    margin: 0 0 8px 0;
    padding: 0;
    color: $brand_darkblue;
    font-size: 15px;
  }

  .fwas-protection-summary {
    margin: 0 0 8px 0;
    font-size: 13px;
    line-height: 1.4;

    strong {
      color: $brand_darkblue;
    }
  }

  .fwas-upgrade-benefits {
    margin: 0 0 10px 0;
    font-size: 13px;
    line-height: 1.4;
    color: #555;
  }

  .fwas-trial-cta {
    margin: 0 8px 0 0;
    padding: 8px 16px;
    background: $brand_lightblue;
    color: #fff;
    border: none;
    border-radius: 3px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: background 0.2s;

    &:hover {
      background: $brand_darkblue;
      color: #fff;
    }

    &:focus {
      box-shadow: 0 0 0 2px rgba(64, 158, 187, 0.3);
      outline: none;
    }
  }

  .fwas-trial-details {
    font-size: 11px;
    color: #666;
  }
}