#me-anjan-wqg-container {

  padding: 0;

  div {
    box-sizing: border-box;
  }

  .row {
    margin: 0;
    box-sizing: border-box;
  }

  .me-anjan-wqg-ajax-error {
    color: red;
  }

  h2.me-anjan-wqg-sub-heading {
    font-size: 1em;
    border: none;
    padding: 0 0 15px;
    margin: 0 0 15px;
  }

  .me-anjan-wqg-output-block {
    margin-top: 5px;
    margin-bottom: 5px;

    .CodeMirror {
      width: 100%;
      height: auto !important;
    }
  }



  .me-anjan-wqg-buttons-container {
    margin: 15px 10px;
  }
}

.me-anjan-wqg-tabpanel {

  & > .me-anjan-wqg-tab-buttons {
    width: 15%;
    float: left;
    padding: 0;
    margin: 0;
    position: relative;
    z-index: 2;
    box-sizing: border-box;

    li {
      padding: 0;
      margin: 0;
      position: relative;
      z-index: 3;
      border-right: solid 1px #CECACA;

      a {

        display: block;
        padding: 5px 10px;
        color: #000;
        text-decoration: none;
        outline: none;
        box-shadow: none;
      }

      &.active {

        background-color: #f1f1f1;
        position: relative;
        z-index: 3;

        border: solid 1px #CECACA;
        border-right: solid 1px #fff;

        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;

        a {
          background-color: #fff;
          color: #333;
          font-weight: bold;
          border-top-left-radius: 5px;
          border-bottom-left-radius: 5px;

        }
      }
    }
  }

  & > .me-anjan-wqg-tab-contents {
    width: 85%;
    float: left;
    background-color: #fff;
    box-sizing: border-box;
    border: solid 1px #CECACA;
    margin-left: -1px;
    position: relative;
    z-index: 1;

    & > .me-anjan-wqg-tab-pane {
      display: none;
      padding: 5px 10px;

      table.form-table {
        margin-top : 0;

        td {
          padding: 10px 0;

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

          label {
            line-height: 2em;
          }

        }
      }

      &.active {
        display: block;
      }

      .panel-header {
        margin-top: 0;
        margin-bottom: 0;
      }
    }

  }

  @media screen and (max-width: 449px) {
    .me-anjan-wqg-tab-buttons {
      width: 40%;
    }

    .me-anjan-wqg-tab-contents {
      width: 60%;
    }
  }

  @media screen and (min-width: 450px) {
    .me-anjan-wqg-tab-buttons {
      width: 35%;
    }

    .me-anjan-wqg-tab-contents {
      width: 65%;
    }
  }

  @media screen and (min-width: 768px) {
    .me-anjan-wqg-tab-buttons {
      width: 25%;
    }

    .me-anjan-wqg-tab-contents {
      width: 75%;
    }
  }

  @media screen and (min-width: 1024px) {
    .me-anjan-wqg-tab-buttons {
      width: 15%;
    }

    .me-anjan-wqg-tab-contents {
      width: 85%;
    }
  }

}

.me-anjan-wqg-tabpanel.horizontal {

  & > .me-anjan-wqg-tab-buttons {
    width: 100% !important;
    float: none !important;

    margin-left: 20px;
    margin-bottom: -1px;

    & > li {
      float: left;

      border: none 0;

      &.active {

        border: solid 1px #CECACA;
        border-bottom: solid 1px #fff;
        border-radius: 0;



        a {
          border-radius: 0;
        }
      }
    }
  }

  & > .me-anjan-wqg-tab-contents {
    width: 100% !important;
    float: none !important;
  }
}

#me-anjan-wqg-form {

  margin-bottom: 20px;
  margin-top: 10px;

  @media screen and (max-width: 449px) {
    padding: 5px;
  }

  label {

    margin-top: 10px;

    strong {

      @media screen and (max-width: 449px) {
        display: block;
      }

      @media screen and (min-width: 450px) {
        display: block;
      }

      @media screen and (min-width: 1024px) {
        display: inline;
      }

      &:after{

        content : '—';
        margin-left: 5px;
        margin-right: 5px;

        @media screen and (max-width: 449px) {
          display: none;
        }

        @media screen and (min-width: 450px) {
          display: none;
        }

        @media screen and (min-width: 1024px) {
          display: inline;
        }
      }
    }

    select {

      width: 20em;

      @media screen and (max-width: 449px) {
        width: 100%;

        &[multiple] {
          height: 100px;
        }
      }

      @media screen and (min-width: 450px) {
        width: 100%;

        &[multiple] {
          height: 100px;
        }
      }

      @media screen and (min-width: 1024px) {
        width: 20em;
      }

    }
  }

  .me-anjan-wqg-tax-query-block {

    .left,.right {
      float: left;
      width: 50%;
      padding: 5px;
    }

    @media screen and (max-width: 1023px) {
      .left,.right {
        width: 100%;
      }
    }

    .me-anjan-wqg-tax-block {
      position: relative;
      background-color: #fbd2cd;
      margin-bottom: 10px;
      padding: 5px;
      width: 100%;
      float: left;

      @media screen and (min-width: 768px) {
        width: 48%;
        margin: 1%;
      }

      @media screen and (min-width: 1024px) {
        width: 31.3333333%;
        margin: 1% 2% 1% 0;
      }

      label {

        display: block;
        width: 100%;

        span {
          display: block;
          margin-bottom: 5px;
        }

        select {

          width: 100%;

        }

      }

      textarea {
        width: 100%;

        margin-bottom: 5px;
      }

      .dashicons-dismiss {
        position: absolute;
        right: 2px;
        top: 2px;
        cursor: pointer;

        &:hover {
          color: red;
        }
      }

    }
  }

  .button-primary.red {

    $btn-primary-red-bg : indianred;

    background-color: $btn-primary-red-bg;
    box-shadow: lighten($btn-primary-red-bg,10%) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.14902) 0px 1px 0px 0px;
    border-color: darken($btn-primary-red-bg,10%);

    &:hover {
      background-color: darken($btn-primary-red-bg,5%);
    }

    &:Active {
      background-color: darken($btn-primary-red-bg,5%);

      -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
      box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
      -webkit-transform: translateY(1px);
      -ms-transform: translateY(1px);
      transform: translateY(1px);
    }

  }
}

.clearfix {
  overflow: auto;
  zoom: 1;
}

.me-anjan-wqg-code-help {

  font-size: 1.2em;
  padding: 5px;
  background-color: lighten(#f80,10%);
  margin-top: 10px;
  margin-bottom: 10px;
  color: #fff;
}

.syntaxhighlighter {
  font-size: 1.2em !important;
}

#me-anjan-wqg-preview-box {
  margin-top: 10px;
  overflow: auto;
}

.me-anjan-wqg-error {
  color: red;
}

.me-anjan-wqg-btn-preview {
  float: right;
}

#me-anjan-wqg-tabpanel-params {
  margin-top: 10px;
}

.me-anjan-wqg-ajax-loader {

  display: block;
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 1em;
  color: blue;

  &.img-loader {
    background: url('../images/ajax/loader.gif') no-repeat left center;
    padding: 5px 5px 5px 20px;
  }
}

.me-anjan-wqg-privew-table {
  min-width: 920px;
}

#me-anjan-wqg-date-criteria-container {
  margin-top: 10px;
}

.me-anjan-wqg-date-criteria-box {
  position: relative;
  background-color: #fbd2cd;
  margin-bottom: 10px;
  padding: 5px;
  width: 100%;
  float: left;

  @media screen and (min-width: 768px) {
    width: 48%;
    margin: 1%;
  }

  @media screen and (min-width: 1024px) {
    width: 18%;
    margin: 1% 2% 1% 0;
  }

  label {

    margin-top: 2px !important;
    display: block;
    width: 100%;

    span {
      display: block;
      margin-bottom: 2px;
    }

    select {

      width: 100% !important;

    }

    input[type=text] {
      width: 100%;
    }

  }

  textarea {
    width: 100%;

    margin-bottom: 5px;
  }

  .dashicons-dismiss {
    position: absolute;
    right: 2px;
    top: 2px;
    cursor: pointer;

    &:hover {
      color: red;
    }
  }

}

.me-anjan-wqg-meta-criteria-box {
  position: relative;
  background-color: #fbd2cd;
  margin-bottom: 10px;
  padding: 5px;
  width: 100%;
  float: left;

  @media screen and (min-width: 768px) {
    width: 48%;
    margin: 1%;
  }

  @media screen and (min-width: 1024px) {
    width: 23%;
    margin: 1% 2% 1% 0%;
  }

  label {

    margin-top: 2px !important;
    display: block;
    width: 100%;

    span {
      display: block;
      margin-bottom: 2px;
    }

    select {

      width: 100% !important;

    }

    input[type=text] {
      width: 100%;
    }

  }

  textarea {
    width: 100%;

    margin-bottom: 5px;
  }

  .dashicons-dismiss {
    position: absolute;
    right: 2px;
    top: 2px;
    cursor: pointer;

    &:hover {
      color: red;
    }
  }

}

#me-anjan-wqg-btn-reset-data {
  float: right;
}

.chosen-single {
  span {
    color: #FF00B8;
  }
}