.complaint-links-container {
  @apply bg-white;
  border-radius: 4px;
  .header {
    @apply flex items-center border-b border-border justify-between;

    .logo {
      width: 56px;
      height: 56px;
      @apply bg-focus;
      padding: 12px;
      border-radius: 4px;
      svg {
        @apply w-8 h-8;
      }
    }

    .text {
      @apply pl-md text-heading-m font-bold;
    }
  }

  .body {
    padding: 10px;
    @apply flex items-start flex-col;
    margin-left: 46px;

    .link {
      @apply p-sm text-primary-main items-center;
      display: flex !important;
      color: #a82227 !important;
    }

    .inbox-total {
      padding: 4px;
      display: table;
      @apply whitespace-normal text-center text-white w-8 h-8 bg-primary-main rounded-full ml-xs;
      background-color: #a82227 !important;
    }
  }

  .links-wrapper {
    @apply pl-md py-sm text-text-btn;
    .link {
      padding: 0 !important;
      padding-bottom: 4px !important;
      color: #a82227 !important;
      svg {
        @apply ml-sm;
      }
    }
  }
}

.MobilePopupHeadingWrapper {
  @apply flex place-content-between mb-md;
  h2 {
    @apply text-heading-l font-bold;
  }
}

.filter-button {
  @apply text-primary-main;
  &:hover {
    @apply text-primary-dark cursor-pointer;
  }
}

.employeeCard-info-box {
  @apply flex justify-end ml-md;
  background-color: #fafafa;
  div {
    margin-right: 32px;
    span:nth-child(2) {
      @apply font-bold;
      color: #4f5a5f;
    }
  }
  .employeeCard-info-data {
    display: flex;
    flex-direction: column;
  }
}

.filter-form {
  .filter-card {
    @apply bg-white min-h-full;
    padding: 10px;

    .heading {
      justify-content: unset;
      @apply flex;

      .clearAll {
        display: none;
      }
    }

    .filter-label {
      @apply font-bold text-heading-l flex gap-3;
      padding-bottom: 6px;
      svg {
        fill: #0b0c0c;
      }
    }
    .sub-filter-label {
      font-weight: 400;
      font-size: 16px;
    }
  }
  .filter-form-field {
    p {
      @apply text-form-field text-text-primary block mb-md;
    }
  }
}

.inbox-container {
  .filters-container {
    .filter {
      .filter-card {
        @apply bg-white;
        padding: 10px;
        .filter-card-close-button {
          @apply flex flex-row-reverse;
        }
        .heading {
          @apply flex justify-between;

          .clearAll {
            display: none;
          }
        }

        .filter-label {
          @apply text-heading-m block flex gap-3 items-center;
          padding-bottom: 6px;
          svg {
            fill: #0b0c0c;
          }
        }

        .sub-filter-label {
          font-weight: 400;
          font-size: 16px;
        }
      }
    }

    .search-complaint-container {
      @apply items-center bg-white p-md;

      .complaint-input-container {
        @apply w-full;
        .complaint-input {
          @apply flex flex-col;

          .clear-search {
            @apply text-focus;
            display: none;
            &:hover {
              color: #003078;
              cursor: pointer;
            }
          }
        }

        .mobile-input {
        }
      }
    }
  }

  .status-container {
    margin-bottom: 50px;
  }
}

.clear-search,
.clear-search .link-label {
  @apply text-focus;
  @apply block;
  cursor: pointer;
  &:hover {
    color: #000;
  }
}
.button-clear {
  @apply text-focus text-body-s-dt;
}

.inbox-count {
  @apply inline ml-sm p-sm bg-primary-main rounded-full text-white text-heading-s align-middle text-center font-regular;
}

@screen dt {
  .complaint-links-container {
    @apply bg-white;

    .header {
      @apply flex items-center border-b border-border;

      .logo {
        @apply bg-focus;
        padding: 12px;
        border-radius: 4px;
      }

      .text {
        @apply pl-md text-heading-m-dt font-bold;
      }
    }

    .body {
      padding: 10px;
      @apply flex items-start flex-col;
      margin-left: 46px;

      .link {
        color:#a82227 !important;
        @apply p-sm text-primary-main;
      }
    }
  }

  .inboxLinks {
    margin: 0 !important;
    padding: 0 !important;
    .header {
      border: none;
      @apply justify-start;
      .logo {
        @apply bg-white;
        svg {
          path {
            fill: #a82227;
          }
        }
      }
    }
    .body {
      margin-left: 0;
    }
  }

  .filter-form {
    .filter-card {
      @apply p-md bg-white;

      .heading {
        @apply flex justify-between;
      }

      .label {
        @apply text-heading-s;
      }
    }
  }

  .inbox-container {
    @apply flex;

    .filters-container {
      width: 270px;

      .filter {
        @apply mt-md;

        .filter-card {
          @apply p-md bg-white;

          .heading {
            @apply flex justify-between;
          }

          .label {
            @apply text-heading-s;
          }
        }
      }
      .citizen-filter {
        margin-top: unset;
      }
    }

    .search-container {
      width: 874px;

      .search-complaint-container {
        margin: auto;
        @apply flex flex-col items-start  mb-md bg-white p-md;

        .complaint-header {
          display: flex;
          @apply flex justify-between w-full;
          margin-bottom: 20px;
        }

        .complaint-input-container {
          /* display: inline-block !important; */
          display: grid !important;
          grid-template-columns: 33.33% 33.33% 33.33%;

          &.for-pt {
            &.for-search {
              grid-template-columns: 25% 25% 25% 25%;

              .input-fields:nth-child(3n) {
                @apply mr-md !important;
              }

              .input-fields:nth-child(4n) {
                margin-right: 0 !important;
              }

              .search-submit-wrapper {
                grid-column: 4/5;
                /* margin-top: 56px;*/
                max-width: unset;
                margin-left: unset;
              }
            }
          }

          .search-submit-wrapper {
            grid-column: 3/4;
            margin-left: 50%;
            max-width: 50%;
            grid-column: 3/4;
            @apply flex flex-col justify-center text-center;

            .submit-bar-search {
              margin-top: unset;
              width: 100%;
              margin-bottom: 20px;
              margin-left: unset;
              max-width: 100%;
              width: 100%;
            }
          }

          .input-fields {
            /*width: calc(50% - 16px);*/

            @apply inline-block mr-md !important;

            .inbox-search-form-error {
              padding-top: 0;
              margin-top: 0;
              @apply absolute;
            }
          }

          .input-fields:nth-child(3n) {
            margin-right: 0 !important;
          }

          .complaint-input {
            @apply flex flex-col;

            .clear-search {
              @apply text-focus;
              @apply block;
              cursor: pointer;
              &:hover {
                color: #003078;
                cursor: pointer;
              }
            }
          }

          .mobile-input {
            @apply ml-sm;
          }
        }

        .search-action-wrapper {
          width: 33%;
          margin-top: 28px;
          @apply inline-block align-middle text-center;
          button {
            margin: 0;
            width: 100%;
            max-width: 300px !important;
          }
        }
      }

      .search-complaint-container-for-search {
      }
    }
  }
}

.document-clear-all {
  grid-area: 2/2;
  display: flex;
  justify-content: flex-end;
  padding-right: 16px;
  align-items: center;
}

.cell-text {
  color: #505a5f;
}

.sla-cell-error {
  color: #d4351c;
  background-color: rgba(212, 53, 28, 0.12);
  padding: 0 24px;
  border-radius: 11px;
}

.sla-cell-success {
  color: #00703c;
  background-color: rgba(0, 112, 60, 0.12);
  padding: 0 24px;
  border-radius: 11px;
}

.complain-no-cell-text {
  margin-top: "4px";
  color: "#505A5F";
}

.search-error-label {
  @apply font-bold text-legend text-error mb-sm !important;
}

.inbox-action-container {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}
.complaint-links-container .header .removeHeight {
  line-height: 28px;
}

@screen dt {
  .complaint-links-container .header .removeBorderRadiusLogo {
    border-radius: 2px !important;
    background-color: #a82227
  }
}
@screen dt {
  .customEmployeeCard {
    width: 320px !important;
    height: 220px !important;
    padding: 0px !important;
  }
}
.employeeTotalLink{
  color: #a82227;
  
  font-size: 12px;
}

@screen dt {
  .groupBill-custom {
    .custom-group-merge-container {
      display: flex !important;
      justify-content: space-between !important;
      .header {
        display: flex;
        align-items: baseline;
        .logo {
          margin-right: 1rem;
          svg {
            path {
              fill: #a82227;
            }
          }
        }
        .h1 {
          font-size: 24px;
          line-height: 28px;
          font-weight: 400;
          color: #a82227;
        }
      }
    }
    .inbox-container {
      .search-container {
        .search-complaint-container {
          display: flex;
          flex-direction: row;
        }
        .group-complaint-input-container {
          width: 33% !important;
          display: flex;
          flex-direction: column;
        }
      }
    }
    .inbox-action-container {
      display: flex;
      flex-direction: row-reverse;
      .clear-search {
        margin-top: 65px;
        margin-left: 16px;
        padding-top: unset !important;
      }
      .submit-bar-search {
        margin-top: 55px !important;
      }
    }
  }
}

@screen dt {
  .groupBill-custom {
    .custom-group-merge-container {
      display: flex !important;
      justify-content: space-between !important;
      .header {
        display: flex;
        align-items: baseline;
        .logo {
          margin-right: 1rem;
          svg {
            path {
              fill: #a82227;
            }
          }
        }
        .h1 {
          font-size: 24px;
          line-height: 28px;
          font-weight: 400;
          color: #a82227;
        }
      }
    }
    .inbox-container {
      .search-container {
        .search-complaint-container {
          display: flex;
          flex-direction: row;
        }
        .group-complaint-input-container {
          width: 33% !important;
          display: flex;
          flex-direction: column;
        }
      }
    }
    .inbox-action-container {
      display: flex;
      flex-direction: row-reverse;
      .clear-search {
        margin-top: 65px;
        margin-left: 16px;
        padding-top: unset !important;
      }
      .submit-bar-search {
        margin-top: 55px !important;
      }
    }
  }
}

.inboxLinksFSM {
  margin: 0 !important;
}
.complaint-links-container .body .link{
  color: #a82227 !important;
}

.employee .customEmployeeCard:nth-child(odd){
  .employeeCustomCard{
    background-image: url("https://in-egov-assets.s3.ap-south-1.amazonaws.com/images/top-red-card.png");
    background-size: cover
  }
}
.employee .customEmployeeCard:nth-child(even){
  .employeeCustomCard{
background-image: url("https://in-egov-assets.s3.ap-south-1.amazonaws.com/images/top-green-card.png");
background-size: cover
  }
}
.employee .employeeCustomCard {
  border-radius: 4%;
    .employeeCustomCard {
      border-radius: 4%;
  }
}
.employee-card-banner{
    background-color: white;
    width: 88%;
    margin: 0 auto;
    bottom: 0px;
    position: absolute;
    margin-bottom: -10%;
    left: 6%;
    box-shadow: 1px 5px 6px 0px #e3e4e3;
    border-radius: 10px;
}
.text-employee-card{
  font-size: 1.5rem;
  font-weight: 700;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  position: absolute;
  top:10%;
  padding-left: 10%;
  color: white !important;
  width: 300px;

}

.plumber-details-new-value-wrapper {
  flex: 2 1 auto;
}

.connection-details-new-value-wrapper {
  flex: 1 1 auto;
}

.connection-details-old-value-wrapper,
.plumber-details-old-value-wrapper {
  flex: 1 1 auto;

  .old-value-null-wrapper {
    visibility: hidden;
    padding-bottom: 8px;
    margin-bottom: 8px;
  }
  .row {
    color: #b1b4b6;
    font-weight: 700;
    font-size: 16px;
  }
}

.search-tabs-container {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  margin-bottom: 35px;
  display: flex;
  justify-content: space-between;

  .search-tab-head {
    padding: 10px 35px;
  }

  .search-tab-head-selected {
    padding: 10px 35px;
    color: rgb(244, 119, 56);
    border-bottom: 4px solid rgb(244, 119, 56);
    font-weight: bold;
  }

  .search-tab-head-selected:focus {
    outline: 0;
  }
}

.card-with-background {
  background: rgb(250, 250, 250);
  border: 1px solid rgb(214, 213, 212);

  .card-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
  }

  h2 {
    font-size: 16px;
    font-weight: 700;
  }
}

.registryTable {
  tHead {
    tr {
      th {
        text-align: left;
      }
    }
  }
  tBody {
    tr {
      td {
        text-align: left;
      }
    }
  }
}