.limit-login-page-settings {
  .field-col {
    display: inline-block;
    margin-right: 20px;
  }
  .limit-login-log {
    table {
      background-color: #fff;
      th, td {
        padding: 10px;
      }
      tr:nth-child(even) {
        background-color: rgba(#000, .09);
      }
    }
  }

  #limit-login-app-setup-code {
    width: 85%;
  }

  .nav-tab-wrapper {
    position: relative;

    .llar-failover-link {
      font-size: 14px;
      float: right;
      line-height: 2;
    }
  }

  .limit-login-app-dashboard {
    .llar-table-scroll-wrap {
      max-height: 400px;
      overflow-y: auto;
    }

    .form-table {
      background-color: #fff;
      border: 1px solid #f4f4f4;
      border-top: 3px solid #3c8dbc;
      position: relative;

      &.llar-preloader {
        &:before {
          content: "";
          display: block;
          width: 100%;
          height: 100%;
          background-color: rgba(255,255,255,0.7);
          z-index: 999;
          position: absolute;
          top: 0;
          left: 0;
        }
      }

      th {
        //color: #3c8dbc;
        font-weight: bold;
        border-bottom: 1px solid #dbdbdb !important;
      }
      th, td {
        padding: 10px;
        border: 1px solid #b9b9b9;

        &.llar-col-nowrap {
          white-space: nowrap;
        }

        .llar-log-country-flag {
          display: flex;
          align-items: center;
          white-space: nowrap;

          img {
            width: 20px;
            height: auto;
          }
        }
      }
      td {
        button {
          line-height: 1;
          margin-right: 5px;

          &:last-child {
            margin-right: 0;
          }

          .dashicons {
            vertical-align: middle;
          }
        }
        &.llar-app-log-actions {
          text-align: center;

          .llar-app-log-action-btn {
            display: inline-block;
            line-height: 20px;
            cursor: pointer;

            i {
              vertical-align: middle;
            }

            &:hover {
              i {
                color: #3c8dbc;
              }
            }
          }

        }
      }
      tr:nth-child(even) {
        background-color: #f9f9f9;
      }
    }
    .llar-table-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 15px 0 5px;

      h3 {
        margin: 0;
      }
      .right-link {
        line-height: 1.625;
        a {
          font-size: 14px;
        }
        .llar-tooltip {
          text-decoration: none;
          font-size: 12px;
          display: inline-block;

          &:before {
            display: none;
          }
          &:hover {
            &:before {
              display: block;
              right: 0;
              left: auto;
            }
          }
        }
      }
    }
    .llar-app-log-pagination {
      > a {
        font-size: 16px;
        line-height: 1.625;
      }
      .spinner {
        float: none;
      }
    }
    .llar-app-acl-rules {
      display: flex;
      justify-content: space-between;

      .app-rules-col {
        flex: 0 0 49%;

        h3 {
          display: flex;
          justify-content: space-between;

          .help-link {
            font-size: 14px;
            font-weight: normal;

            .dashicons {
              text-decoration: none !important;
            }
          }
        }

        .form-table {
          select {
            width: 100%;
          }

          .origin {
            float: right;
            opacity: 0.5;
          }

          .llar-app-acl-action-col {
            text-align: center;
          }

          .llar-app-rule-pass {
            background-color: #cffbe8;
          }
          .llar-app-rule-allow {
            background-color: #abdfff;
          }
          .llar-app-rule-deny {
            background-color: #fd2c2c3d;
          }
          .llar-app-acl-remove {
            color: crimson;
            border-color: crimson;
          }
        }
      }
    }

    .llar-block-country-section {
      background-color: #fff;
      padding: 15px;
      border:1px solid #b9b9b9;
      border-top: 3px solid #3c8dbc;

      .llar-block-country-mode {
        display: inline-block;
        margin-right: 5px;
        vertical-align: top;
      }
      .llar-toggle-countries-list {
        text-decoration-style: dotted;
        vertical-align: middle;
        line-height: 1.6;
      }
      .llar-block-country-list {
        display: flex;
        flex-wrap: wrap;
        max-height: 400px;
        overflow-y: auto;

        &:first-child {
          margin-top: 0;
        }

        .llar-country {
          flex: 0 0 10%;

          label {
            padding-bottom: 10px;
            display: inline-block;
          }
        }

        &.llar-all-countries-selected {
          display: inline;
          vertical-align: middle;
          overflow: hidden;

          .llar-country {
            margin-bottom: 0;
            display: inline-block;
            margin-right: 10px;

            label {
              padding-bottom: 0;
              white-space: nowrap;
            }
          }
        }
        &.llar-all-countries-list {
          display: none;
          margin: 10px 0;

          &.visible {
            display: flex;
            border-top: 1px solid #dddada;
            padding-top: 10px;
          }
        }
      }
    }
  }

  .llar-app-notice {
    background-color: #fff;
    box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
    padding: 15px;
    border-radius: 3px;
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 14px;
    border-left: 5px solid #ffba00;

    &.success {
      border-color: #46b450;
    }

    p {
      font-size: inherit;
      margin: 0 0 20px;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  input[name="admin_notify_email"] {
    min-width: 243px;
  }

  .llar-protect-notice {
    font-size: 15px;
    color: #848484;
    margin-left: 10px;

    a {
      color: #222222;
      //text-decoration-style: dotted;
      //text-underline-offset: 3px;
      text-decoration: none;
      border-bottom: 1px dashed;
    }
  }



  .llar-toggle-setup-field {
    color: #2271b1;
    text-decoration-style: dashed;
    &:hover {
      color: #222;
    }
  }

  .setup-code-wrap {
    display: none;

    &.active {
      display: block;
    }
  }

  .app-form-field {
    display: none;

    &.active {
      display: table-row;
    }
  }

  .llar-app-field {
    display: none;

    &.active {
      display: table-row;
    }
  }
}

.llar-notice-review,
.llar-notice-notify {
  display: flex;
  padding: 15px 20px 0 !important;
  border-left: 4px solid #333 !important;

  .llar-review-image {
    img {
      margin-top: 10px;
      margin-bottom: 20px;
    }
    span {
      font-size: 80px;
      color: orange;
      width: 80px;
      height: auto;
      margin-bottom: 20px;
    }
  }
  .llar-review-info {
    flex: 1;
    margin-left: 30px;

    .llar-buttons {
      display: flex;
      align-items: center;

      li {
        margin-right: 10px;

        .dashicons {
          margin-right: 5px;
        }
      }
    }
  }
}

.llar-accordion {
  .ui-accordion-header {
    font-weight: bold;
    background: #778899;
    color: #fff;

    &.ui-accordion-header-active {
      background: #87CEFA;
    }
  }
}

.custom-app-tab {
  position: relative;
  .spinner {
    float: none;
  }
  .llar-app-ajax-msg {
    font-size: 13px;
    margin-top: 5px;
    display: block;

    &.error {
      color: red;
    }
    &.success {
      color: green;
    }
  }
  .llar-delete-app {
    color: #dc3232;
    position: absolute;
    bottom: 15px;
    right: 15px;

    &:hover {
      opacity: 0.8;
    }
  }
  .llar-why-use-premium-text {
    margin-top: 20px;

    .title {
      font-weight: bold;
      font-size: 16px;
      color: #4d4d4d;
    }
    ul {
      li {
        .dashicons {
          color: #3ab54a;
          font-size: 25px;
          width: 25px;
          top: -2px;
          position: relative;
        }
      }
    }
  }
}

#llar-progress-bar {
  position: fixed;
  top: 0;
  height: 6px;
  left: 0;
  width: 100%;
  z-index: 999999;
  background-color: #eee;

  span {
    height: 100%;
    position: absolute;
    display: block;
    width: 0;
    background-color: #00b357;
    transition: width 0.4s;
  }
}

#llar-header-upgrade-message {
  text-align: center;
  background-color: #f5f0c0;
  color: #222;
  padding: 10px;
  margin-left: -20px;
  //margin-right: -20px;
  box-shadow: 0 0 3px rgba(0,0,0,0.2);

  p {
    margin: 0;

    .dashicons {
      color: #f2a64c;
      margin-right: 5px;
    }
  }
}

.settings_page_limit-login-attempts {
  .update-nag {
    display: none;
  }
}

#llar-welcome-page {
  padding: 50px 0;

  img {
    max-width: 100%;
    height: auto;
  }

  .llar-welcome-page-container {
    width: 100%;
    max-width: 760px;
    margin: 0 auto 30px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 0 4px rgba(#000, 0.1);

    &.llar-premium {
      border-top: 5px solid #50c1cd;
    }

    .llar-welcome-page-section {
      padding: 20px;
      text-align: center;

      .llar-logo {
        text-align: center;
        margin-top: 20px;
        margin-bottom: 30px;
      }

      h2 {
        font-size: 2.4em;
        line-height: 1.4;
      }

      h3 {
        font-size: 1.5em;
        line-height: 1.4;
      }

      p {
        font-size: 17px;
        color: #444;
      }
    }
    .llar-welcome-page-video-wrap {
      img {
        width: 100%;
        height: auto;
        cursor: pointer;
      }
    }
  }

  .llar-welcome-page-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 15px;
    counter-reset: cnt1;

    .llar-feature-item {
      flex: 0 0 24%;
      text-align: center;
      margin-bottom: 40px;
      position: relative;
      padding-bottom: 60px;

      &:before {
        content: counter(cnt1);
        counter-increment: cnt1;
        position: absolute;
        left: 50%;
        transform: translatex(-50%);
        bottom: 0;
        font-size: 1em;
        font-weight: 600;
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        border-radius: 50%;
        background-color: #ecedef;
        color: #979aaa;
      }
      &:after {
        position: absolute;
        content: '';
        left: -39%;
        width: 69%;
        height: 1px;
        bottom: 1.4em;
        background-color: #ecedef;
      }

      &:nth-child(4n+1) {
        &:after {
          display: none;
        }
      }

      .llar-feature-image {
        margin-bottom: 15px;
      }
      .llar-feature-info {
        .llar-feature-title {
          font-weight: bold;
          margin-bottom: 15px;
        }
        .llar-feature-desc {
          color: #979aaa;
        }
      }
    }

    @media (max-width: 768px) {
      display: block;
    }
  }
  .llar-why-recommend {
    text-align: left;
    font-size: 17px;

    ul {
      li {
        span {
          margin-right: 5px;
          width: auto;
          height: auto;
          font-size: 25px;
          vertical-align: middle;
          color: green;
        }
      }
    }
  }
  .llar-welcome-list {
    font-size: 17px;
    text-align: left;
    line-height: 1.4;
    list-style: none;

    li {
      span {
        margin-right: 10px;
        width: auto;
        height: auto;
        font-size: 22px;
        vertical-align: top;
        color: orange;
      }
    }
  }
  .llar-upgrade-btn-wrap {
    padding: 20px;
    a {
      display: inline-block;
      background-color: #e27800;
      color: #fff;
      font-size: 22px;
      padding: 20px;
      text-decoration: none;
      font-weight: 600;

      &:hover {
        background-color: darken(#e27800, 10%);
      }
    }
  }
  .llar-upgrade-questions {
    font-size: 17px;
  }
}

.dashboard_page_llar-welcome,
.toplevel_page_limit-login-attempts {
  .update-nag,
  .notice {
    display: none;
  }
  .video-container {
    position: relative;
    padding-bottom: 56.1%;
    height: 0;
    overflow: hidden;

    iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }
}

.jconfirm .jconfirm-box div.jconfirm-closeIcon {
  top: -2px !important;
  right: -2px !important;
}

.llar-tooltip {
  text-decoration: underline;
  text-decoration-style: dotted;
  cursor: pointer;
  position: relative;

  &:before {
    content: attr(data-text);
    position: absolute;
    width: 200px;
    padding: 5px;
    background-color: rgba(#000, 0.8);
    color: #fff;
    font-size: 13px;
    top: 100%;
    z-index: 999;
    visibility: hidden;
    opacity: 0;
    transition: all .2s;
    font-weight: 300;
    cursor: auto;
  }

  &:hover {
    &:before {
      visibility: visible;
      opacity: 1;
    }
  }
}

//#toplevel_page_limit-login-attempts {
//  .wp-menu-image {
//    &:before {
//      content: '';
//      background: url('../img/icon-logo-menu.png') no-repeat center center / 27px auto;
//      display: block;
//      position: absolute;
//      top: 10px;
//      left: 5px;
//      width: 30px;
//    }
//  }
//}
#toplevel_page_limit-login-attempts {
  .wp-menu-image.svg {
    background-size: 25px auto !important;
    margin-top: 7px;
  }
}

.llar-alert-icon-animation {
  animation-duration: 10s;
  animation-timing-function: ease-out;
  animation-delay: 3s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
  animation-name: shake;
}

#menu-settings {
  li {
    position: relative;
    .llar-alert-icon-animation {
      position: absolute;
      right: 5px;
      top: 7px;
      min-width: 15px;
      line-height: 15px;
      height: 15px;
    }
  }
}

@keyframes shake {
  1%, 9% {
    transform: translate3d(-1px, 0, 0);
  }

  2%, 8% {
    transform: translate3d(2px, 0, 0);
  }

  3%, 5%, 7% {
    transform: translate3d(-3px, 0, 0);
  }

  4%, 6% {
    transform: translate3d(3px, 0, 0);
  }
}

@import "dashboard-page";
@import "admin-dashboard-widgets";