$border-color: #f3f3f3;
.th-tab-heading {
  display: block;
  font-size: 22px;
  line-height: 1;
  margin: 27px auto 22px auto;
  border-bottom: 1px solid #f0f0f1;
  padding-bottom: 58px;
  color: #2e2e2e;
  font-weight: bold;
  letter-spacing: 0.5px;
  width: 100%;
}
[data-group-tabs][data-tab-container] {
  display: none;
}

.active[data-group-tabs][data-tab-container] {
  display: block;
}

.th-product-compare-wrap {
  margin-top: 20px;

  * {
    box-sizing: border-box;
  }

  a:focus {
    box-shadow: none;
    outline: none;
  }

  .th-product-compare-container {
    display: flex;
    flex-wrap: wrap;

    .logo-detail {
      text-align: -webkit-center;
      padding: 32px 0;
      display: flex;
      flex-direction: column;
      grid-gap: 10px;
      border-bottom: 1px solid #d2d2d2;

      span {
        color: black;
        font-size: 20px;
        display: block;
        line-height: 1;
        font-weight: 600;
      }
    }

    .th-nav_ {
      display: flex;
      flex-direction: column;
      width: 18%;
      position: relative;
      padding: 0 0 67px 0;
      border-right: 1px solid #f3f3f3;
      background-color: #f0f0f1;

      > a {
        padding: 24px 15px;
        text-decoration: none;
        color: black;
        border-bottom: 1px solid #d2d2d2;
        letter-spacing: 0.7px;
        font-size: 16px;
        line-height: 1.3;
        border-left: 4px solid #f7f7f700;
        font-weight: 600;

        &:last-child {
          border: none;
        }

        &:hover,
        &.active {
          background: white;
          color: #fd654b;
          border-left: 4px solid;
        }
        &[data-tab="pro-feature"] {
          color: #ef653f;
        }
      }

      // save btn
      .th-save-btn {
        width: 100%;
        display: flex;
        justify-content: center;
        padding: 9px;
        grid-gap: 20px;
        position: absolute;
        left: 0;
        bottom: 0;
        background: #ebebeb;

        button {
          display: flex;
          grid-gap: 7px;
          padding: 0 25px;

          &:before {
            font-family: "dashicons";
            height: unset;
            width: unset;
          }

          &.th-compare-reset-style-btn:before {
            content: "\f531";
          }

          &.loading {
            pointer-events: none;
            opacity: 0.5;

            &:before {
              content: "\f463";
              animation: loaderTMK 0.8s linear 0s infinite forwards;
            }
          }
        }
      }
    }
  }

  // tabs container
  .container-tabs {
    width: 58%;
    padding: 30px;
    background: white;
  }
}

.color-output {
  display: block;
  height: 30px;
  width: 60px;
  border: 1px solid #dcdcdc;
  border-radius: 3px;
  cursor: pointer;
}

label.color-output {
  display: block;
  height: 25px;
  width: 45px;
  border: 1px solid #dcdcdc;
  border-radius: 3px;
  cursor: pointer;
}

.th-color-title {
  font-weight: 400;
  font-size: 15px;
  word-spacing: 0.05rem;
}

.bold-heading {
  color: #2e2e2e;
  font-size: 16px;
  font-weight: 500;
}

.th-general {
  display: flex;
  justify-content: space-between;

  .th-option_ {
    flex: 1;
    // width: 90%;
    // box-shadow: 0px 0px 10px 0px #d0eaf5;
    // padding: 30px;

    table {
      tr {
        margin: 21px 0;
        display: flex;
        // border-bottom : 1px dashed #dbdbdb;
        padding-bottom: 6px;
        &:first-child {
          margin-top: 0;
        }
        .bold-heading {
          // border-bottom: 1px dashed #dbdbdb;
          &:first-child {
            max-width: unset;
          }
        }

        td {
          flex: 1;
          line-height: 1;

          &:first-child {
            min-width: 258px;
            max-width: 258px;
          }

          &.shortcode-appear {
            font-size: 15px;
            color: #565c62;
            background: #efefef;
            max-width: 604px;
            text-align: center;
            padding: 13px 10px;
            border-radius: 4px;
          }
        }
      }

      input,
      select {
        width: 250px;
        padding: 5px;
        border-color: #e4e4e7;
      }

      // .title_ {
      //     color         : #565c62;
      //     display       : block;
      //     font-size     : 16px;
      //     line-height   : 1;
      //     font-weight   : 500;
      //     letter-spacing: 0.05rem;
      // }
    }
  }
}

@keyframes loaderTMK {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
.description {
  font-size: 12px;
  font-weight: 300;
  color: #a7a7a7;
  font-style: normal;
  margin-top: 6px;
  display: block;
}