.wc-gzd-settings {
  .nav-tab-wrapper {
    a.nav-tab[href*="tab=germanized"] {
      border-bottom: 1px solid #f1f1f1;
      background: #f1f1f1;
      color: #000;
      margin-bottom: -1px;
      box-shadow: none;
    }
  }

  &.wc-gzd-settings-modern-nav {
    .nav-tab-wrapper {
      a.nav-tab[href*="tab=germanized"] {
        border-bottom: 2px solid var(--wp-admin-theme-color, #3858e9);
        color: #070707;
        background: 0 0;
        margin-bottom: 0;
      }
    }
  }

  p.tab-description {

  }

  ul.subsubsub:not(.list-table-filters) {
    margin-top: 0;

    li a {
      .wc-gzd-pro {
        margin-left: 3px;
      }
    }

    li a.current {
      .wc-gzd-pro {
        color: #222;
        border: 1px solid #222;
      }
    }
  }

  .wc-gzd-dash-button {
    margin-right: 5px;
    text-indent: 9999px;
    position: relative;
    display: inline-block;
    padding: 0;
    height: 2em;
    width: 2em;
    min-height: 25px;
    overflow: hidden;
    vertical-align: middle;

    &::after {
      font-family: Dashicons;
      speak: none;
      font-weight: 400;
      font-variant: normal;
      text-transform: none;
      margin: 0;
      text-indent: 0;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      text-align: center;
      line-height: 1.85;
      content: "\f464";
    }

    &.help-link {
      &::after {
        content: "?";
        font-family: inherit;
        font-weight: bold;
      }
    }

    &.install {
      &::after {
        content: "\f106";
      }
    }

    &.wc-gzd-is-loading {
      &::after {
        content: "";
      }
    }
  }

  .wc-gzd-settings-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    font-size: 1.4em;
    align-items: center;
    margin-bottom: .5em;

    li.breadcrumb-item {
      display: flex;
      flex-wrap: wrap;
      align-items: center;

      a.page-title-action {
        margin-left: 1em;
        position: inherit;
        top: 0;
      }

      a.breadcrumb-link {
        text-decoration: none;
        display: inline-flex;
        white-space: nowrap;
        align-items: center;
        color: #444;

        &:hover {
          color: #000 !important;
        }

        &::after {
          font-family: Dashicons;
          font-weight: 400;
          margin: 0 2px;
          margin-top: 2px;
          font-size: .9em;
          text-transform: none;
          line-height: 1;
          text-indent: 0;
          width: 100%;
          height: 100%;
          text-align: center;
          content: "\f345";
        }
      }

      &.breadcrumb-item-active {
        font-weight: 600;
        color: #000;
      }
    }
  }

  .wc-gzd-setting-header {
    font-size: 1.4em;

    .page-title-action {
      top: -1px;
    }
  }

  .gzd-pro-install-steps {
    font-size: 1.3em;
    display: flex;
    flex-wrap: wrap;

    .gzd-pro-install-step {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      margin: 1.5em 0;

      .pro-step {
        width: 50px;
        line-height: 50px;
        height: 50px;
        border-radius: 50%;
        text-align: center;
        background-color: var(--wp-admin-theme-color);
        color: white;
        margin-right: 1em;
      }

      .license-form-wrapper {
        display: flex;
        flex-direction: column-reverse;

        input, button {
          height: 50px;
          font-size: 15px;
        }

        input {
          min-width: 250px;
          margin-right: 10px;
        }

        .submit {
          padding: 0;
          margin: 0;
          border-radius: 0;
        }

        .error {
          border: none;
          background: transparent;
          padding: 0;
          margin: 0;
          color: #a00;
          box-shadow: none;

          p {
            font-size: 12px;
            margin-top: 5px;
          }
        }
      }

      .pro-step-desc {
        h4 {
          margin-top: 0;
          margin-bottom: 10px;
        }

        p {
          margin-bottom: 0;
          font-size: 14px;
        }
      }
    }
  }

  .wc-gzd-ajax-loading-btn {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;

    &.wc-gzd-is-loading {
      .btn-text {
        opacity: .3;
        z-index: 0;
      }

      .spinner {
        position: absolute;
        opacity: 1;
        z-index: 5;
        background-size: 16px 16px;
        float: none;
        text-align: center;
        width: 16px;
        height: 16px;
        vertical-align: middle;
        margin: 0;
      }
    }
  }

  .wc-gzd-setting-tabs {
    margin-top: 1.5em;

    .wc-gzd-setting-tab-enabled {
      .wc-gzd-install-extension-btn {
        line-height: 26px;
        min-height: 26px;
        height: 26px;
      }
    }

    th, td {
      display: table-cell !important;
      padding: 1em !important;
      vertical-align: top;
      line-height: 1.75em;
      font-size: 14px;
    }

    th {
      font-weight: 600;
    }

    td.wc-gzd-setting-tab-enabled, th.wc-gzd-setting-tab-enabled {
      width: 1%;
      text-align: center;

      .status-disabled, .status-enabled {
        display: inline-block;
        margin-top: 3px;
      }
    }

    a {
      .wc-gzd-pro {
        margin-left: 3px;
      }
    }

    td.wc-gzd-setting-tab-actions, th.wc-gzd-setting-tab-actions {
      width: 15%;
      text-align: right;
    }

    td.wc-gzd-setting-tab-actions {
      display: flex;
      justify-content: flex-end;
      flex-wrap: wrap;

      .button {
        margin-right: 5px;

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

    td.wc-gzd-setting-tab-name, th.wc-gzd-setting-tab-name {
      width: 25ch;
    }

    td.wc-gzd-setting-tab-name {
      font-weight: 700;
      white-space: nowrap;
    }

    tr:nth-child(odd) td {
      background: #f9f9f9;
    }
  }
}

.wc-gzd-admin-settings {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;

  &.wc-gzd-admin-settings-has-sidebar {
    box-sizing: border-box;

    .wc-gzd-admin-settings-fields {
      width: 65%;
      padding-right: 5%;
    }
    .wc-gzd-admin-settings-sidebar {
      width: 30%;
    }
  }

  tbody.ui-sortable tr:hover {
    cursor: move;
  }

  table.form-table tr {
    th.titledesc-image {
      padding-right: 0 !important;
    }
  }

  .forminp-radio fieldset p {
    margin-bottom: 1em;
  }

  &.wc-gzd-admin-settings-germanized-emails-attachments,
  &.wc-gzd-admin-settings-contract,
  &.wc-gzd-admin-settings-invoices,
  &.wc-gzd-admin-settings-multistep_checkout,
  &.wc-gzd-admin-settings-terms_generator,
  &.wc-gzd-admin-settings-revocation_generator {
    th.titledesc-image {
      padding-top: 0;
    }
  }

  .wc-gzd-premium img, .titledesc-image img {
    max-width: 100%;
    height: auto;
    opacity: 0.7;
  }

  #woocommerce_gzdp_terms_generator {
    img {
      max-width: 100%;
    }
  }

  tr.single_select_page .description {
    display: block;
    margin-top: .5em;
  }

  td {
    .wc-gzd-additional-desc {
      margin-top: 1em;
      line-height: 1.5em;
      background: #fff;
      padding: .5em;
      font-style: normal;
      font-size: 14px;
      box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);

      .wc-gzd-tax-example {
        margin-top: .5em;
      }
    }
  }

  .wc-gzd-label-wrap {
    position: relative;
    display: block;
    vertical-align: middle;

    .woocommerce-help-tip {
      margin: -8px -24px 0 0 !important;
      position: absolute;
      right: 0;
      top: 50%;
    }
  }

  td.forminp-gzd_toggle {
    span.description, p.description {
      display: inline-block;
      font-style: normal;
      font-size: 14px;
      margin-left: 5px;

      .wc-gzd-additional-desc {
        margin-bottom: -1em;
      }
    }

    fieldset {
      margin-top: 1.25em;

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

.wc-gzd-setting-tabs, .wc-gzd-admin-settings {
  a.woocommerce-gzd-input-toggle-trigger {
    color: transparent;
    border: none;
    text-decoration: none;

    &:focus {
      color: transparent;
      box-shadow: none;
      border: none;
    }
  }
}

/**
 Checkbox UI
 */
table.wc-gzd-legal-checkboxes {
  thead th {
    vertical-align: middle;

    &.wc-gzd-legal-checkbox-sort {
      text-align: center;
    }
  }

  th, td {
    vertical-align: top;
    line-height: 24px;
    padding: 1em !important;
    font-size: 14px;
    background: #fff;
    display: table-cell !important;

    ul {
      margin: 0;
    }

    .status-enabled, .status-disabled {
      margin-top: 3px;
    }

    &.wc-gzd-legal-checkbox-locations {
      ul li {
        line-height: 24px;
        font-size: 14px;
        color: #555;
        display: inline;
        margin: 0;
      }

      ul li::before {
        content: ', ';
      }
      ul li:first-child::before {
        content: '';
      }
    }
  }

  td {
    &.wc-gzd-legal-checkbox-sort::before {
      content: '\f333';
      font-family: Dashicons;
      text-align: center;
      line-height: 1;
      color: #999;
      display: block;
      width: 17px;
      float: left;
      height: 100%;
      line-height: 24px;
    }
  }

  tbody.wc-gzd-legal-checkbox-rows {
    td {
      border-top: 2px solid #f9f9f9;
    }

    tr {
      &:first-child {
        td {
          border-top: 0;
        }
      }

      &:nth-child(odd) {
        td {
          background: #f9f9f9;
        }
      }
    }
  }
}

.wc-gzd-premium-overlay {
  border-left-color: #639aff !important;
}

.wc-gzd-admin-settings-sidebar {
  box-sizing: border-box;

  .wc-gzd-admin-settings-sidebar-inner {
    padding: 1em;
    background: #FFF;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);

    &.sticky {
      position: sticky;
      top: 50px;
    }
  }

  h1:first-of-type, h2:first-of-type, h3:first-of-type {
    margin-top: 0;
  }

  img {
    width: 100%;
  }

  .browser {
    border-radius: 3px;
  }

  .small {
    font-size: 0.9em;
    display: block;
    margin-top: 0.5em;
    color: #888;
  }
}

/**
 * Add bigger distance to Woo admin header if active
 */
body.woocommerce-feature-enabled-store-alerts {
  .wc-gzd-admin-settings-sidebar {
    .wc-gzd-admin-settings-sidebar-inner {
      &.sticky {
        top: 120px;
      }
    }
  }
}

.wc-gzd-admin-settings-checkboxes {
  td.forminp-textarea p code {
    margin: .5em 0;
    display: block;
  }
  td.forminp-textarea p {
    margin-bottom: 1em;
  }
  td.forminp-textarea .gzd-small-desc {
    font-size: 12px;
    font-style: italic;
    display: block;
  }
  td.forminp-text .description {
    margin-top: .5em;
    line-height: 1.5em;
    display: block;
  }
}