.lpr-setting-page {
  .nav-tab-wrapper {
    margin-bottom: 30px;
  }

  .form-table {
    background-color: #fff;
    margin-top: 30px;

    tr {
      border-bottom: 1px solid #eee;

      th {
        padding: 40px 10px 40px 20px;

        @media(max-width: 768px) {
          padding-bottom: 0;
          padding-left: 10px;
        }

        small {
          font-weight: normal;
          opacity: 0.8;
          padding-top: 5px;
          padding-right: 20px;
          display: block;
        }

        .badge {
            background: red;
            color: #fff;
            font-size: 8px;
            font-weight: lighter;
            padding: 3px 6px;
            border-radius: 3px;
        }
      }

      td {
        padding: 40px 10px;
        position: relative;

        @media(max-width: 768px) {
          padding-top: 20px;
        }

        .help {
          display: inline-block;
          color: #fff;
          background-color:#0984E3;
          font-size: 9px;
          border-radius: 3px;
          padding: 3px 5px;
          text-decoration: none;
          position: absolute;
          top: 15px;
        }
      }
        img {
          max-width: 100%;
          height: auto;
          cursor: not-allowed;
        }

        .pro-link a {
          color: red;
          font-size: 15px;
          font-weight: bold;
          margin-bottom: 13px;
          display: inline-block;
          text-decoration: none;
          outline: none !important;
        }
        .pro-link a:hover {
          text-decoration: underline;
        }

      .lpr-field-post_type_checkbox,
      .lpr-field-checkbox,
      .lpr-field-wrapper,
      .lpr-field-radio {
        label {
          margin-right: 15px !important;
        }
      }

      .lpr-field-text input {
        max-width: 100%;
        width: 500px;
      }

      .lpr-field-heading_type {
        label {
          margin-right: 15px !important;
        }
        .default_heading {
          input {
            width: 100%;
            max-width: 500px;
            margin-top: 15px;
          }
        }
        .default_heading_description {
          position: relative;
          textarea {
            visibility: hidden;
          }
        }
      }

    }

    .CodeMirror {
      border: 1px solid #ddd;
    }

    .css-editor {
      width: 100%;
      height: 300px;
    }

    .sp-replacer {
      padding: 0;
      border: 1px solid #0071a1;
      border-radius: 3px;
    }

    .sp-dd {
      padding: 0 8px;
      height: 26px;
      line-height: 26px;
      float: left;
      font-size: 10px;
      color: #eee;
    }

    .sp-dd:before {
      content: "Select Color";
      color: #000;
    }

    .sp-preview {
      height: 26px;
      width: 30px;
      border: none;
      border-right: 1px solid #ddd;
    }
  }
}

.lpr-field-wrapper_extend .fields-container {
  display: flex;
  flex-wrap: wrap;

  & > * {
    width: calc(33% - 30px);
    margin-right: 30px;
    margin-bottom: 20px;

    @media(max-width: 767px) {
      width: 100% !important;
    }
  }
  label {
    display: block;
    width: 100%;
    font-weight: 600;
  }

  select {
    width: 100%;
    max-width: 100%;
  }

  input[type="number"] {
    width: 80px;
  }

  .child-checkbox {
    margin-top: 30px;
  }

  .select2-selection__rendered {
    display: block !important;
    li {
      margin-bottom: 0;
    }
  } 

  .select2-container--default 
  .select2-search--inline 
  .select2-search__field {
    padding-left: 5px;
    padding-right: 5px;
    margin-top: 0;
    margin-bottom: 0;
  }

  .select2-container--default .select2-selection--multiple {
    border-radius: 4px;
    border: 1px solid #7e8993;
    color: #32373c;
  }
}
.lpr-field-wrapper .fields-container {
  display: flex;
  flex-wrap: wrap;

  & > * {
    width: 25%;
    margin-bottom: 20px;

    @media(max-width: 768px) {
       & {
         width: 100%;
       }
    }
  }

  label {
    white-space: nowrap;
    font-weight: 500;
    font-size: 0.9em;
    color: #202020;
    display: block;
    width: 100%;
  }

  .color-selection label {
    padding-top: 10px;
  }

  input[type="number"] {
    width: 70px;
    margin-bottom: 5px;
  }

  select {
    margin-bottom: 5px;
  }

  .reset-colors {
    display: block;
    width: 100%;
    margin-bottom: 20px;

    a {
      color: #f1310f;
      font-weight: bold;
      font-size: 0.9em;
    }
  }
}

// tutorial related code
.lpr-setting-page .tutorials .tutorials-wrapper {
  background-color: #fff;
  margin-top: 30px;
  padding: 40px 20px;
}

//help popup related code
.toplevel_page_lpr-settings .lity-wrap,
.toplevel_page_lpr-settings .lity-close {
  z-index: 999991;
}

.toplevel_page_lpr-settings .lity-youtube .lity-container {
  border: 5px solid #fff;
  border-radius: 1px;
}

.toplevel_page_lpr-settings .lity-close {
  content: '×';
  width: 30px;
  height: 30px;
  margin-top: -17px;
  margin-left: -17px;
  text-align: center;
  font-size: 30px;
  background: #202020;
  top: 0;
  left: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  position: absolute;
}

.lity-active #wpadminbar {
  z-index: 9 !important;
}