/*@import 'normalize.css';*/

/*@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;500;700&family=Roboto:wght@400;500;700&display=swap");*/

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

@import "react-date-range/dist/styles.css";
@import "react-date-range/dist/theme/default.css";

@import "./components/loader.scss";

@import "./components/body.scss";
@import "./components/navbar.scss";
@import "./components/card.scss";
@import "./components/buttons.scss";
@import "./components/radiobtn.scss";
@import "./components/selectdropdown.scss";
@import "./components/textfields.scss";
@import "./components/bannercomponents.scss";
@import "./components/datewrap.scss";
@import "./components/datatable.scss";
@import "./components/checkpoint.scss";
@import "./components/checkbox.scss";
@import "./components/inputotp.scss";
@import "./components/map.scss";
@import "./pages/employee/tooltip.scss";
@import "./components/menu.scss";
@import "./components/submiterrors.scss";
@import "./components/ratingstar.scss";
@import "./components/keynote.scss";
@import "./components/statushighlight.scss";
@import "./components/imageviewer.scss";
@import "./components/actionbar.scss";
@import "./components/table.scss";
@import "./components/popup.scss";
@import "./components/uploadcomponents.scss";
@import "./components/toast.scss";
@import "./components/detailscontainer.scss";
@import "./components/telephone.scss";
@import "./components/grey.scss";
@import "./components/actionLink.scss";
@import "./components/sectionalDropdown.scss";
@import "./components/detailscard.scss";
@import "./components/searchAction.scss";
@import "./components/tag.scss";
@import "./components/topbar.scss";
@import "./components/languageSelector.scss";
@import "./components/custombtn.scss";
@import "./components/citizenInfoLabel.scss";
@import "./components/roundedLabel.scss";
@import "./components/changeLanguage.scss";
@import "./components//metricsTable.scss";
@import "./components/filters.scss";
@import "./components//charts.scss";
@import "./components/summary.scss";
@import "./components/multiLink.scss";
@import "./components/info-banner.scss";
@import "./components/multiSelectDropdown.scss";
@import "./components/EllipsisMenu.scss";
@import "./components/CitizenHomeCard.scss";
@import "./components/PropertySearchForm.scss";
@import "./components/SearchForm.scss";
@import "./components/cardHeaderWithOptions.scss";
@import "./components/TimeLine.scss";
@import "./components/PageBasedInput.scss";
@import "./components/StandaloneSearchBar.scss";
@import "./components/CardBasedOptions.scss";
@import "./components/WhatsNewCard.scss";
@import "./components/SearchOnRadioButton.scss";
@import "./components/EventCalendarView.scss";
@import "./components/OnGroundEventCard.scss";
@import "./components/PopupHeadingLabel.scss";
@import "./components/staticSideBar.scss";
@import "./components/hoc/index.scss";
@import "./components/FAQ.scss";
@import "./components//howItWorks.scss";
@import "./components/staticDynamicMessages.scss";
@import "./components/toggleSwitch.scss";
@import "./components/plusMinus.scss";

@import "./pages/employee/index.scss";
@import "./pages/employee/cardfix.scss";
@import "./pages/employee/popupmodule.scss";
@import "./pages/employee/container.scss";
@import "./pages/employee/inbox.scss";
@import "./pages/employee/response.scss";
@import "./pages/employee/form-fields.scss";
@import "./pages/employee/scroll-table.scss";
@import "./pages/employee/EmployeeLogin.scss";
@import "./pages/employee/updateNumber.scss";
@import "./pages/employee/oldMobileInbox.scss";
@import "./pages/employee/dss.scss";
@import "./pages/employee/iframe.scss";

@import "./pages/citizen/payment/payment-type.scss";
@import "./pages/citizen/container.scss";
@import "./pages/citizen/HomePageWrapper.scss";
@import "./pages/citizen/CitizenEngagementNotificationWrapper.scss";
@import "./pages/citizen/Events.scss";
@import "./pages/citizen/DocumentList.scss";
@import "./pages/citizen/SurveyList.scss";
@import "./pages/citizen/updatePropertyNumber.scss";
@import "./pages/citizen/citizenDocument.scss";
@import "./pages/employee/surveys.scss";

.display-none {
  display: none;
}
.primary-label-btn{
  margin: 10px auto 0px !important;
}
.p-unset {
  padding: unset !important;
}

.flex-one {
  @apply flex-1;
}

.display-flex-gap-2 {
  @apply flex gap-3;
}
.rm-mb {
  margin-bottom: unset !important;
}

.w-fullwidth {
  @apply w-full;
}

.margin-unset {
  margin: unset !important;
}

.text-align-center {
  @apply text-center;
}

.desktop-only {
  @apply hidden;
}

@screen dt {
  .desktop-only {
    @apply block;
  }
}

.mobile-only {
  @apply block;
}

@screen dt {
  .mobile-only {
    @apply hidden;
  }
}

.dark {
  @apply text-text-primary;
}

.mrlg {
  @apply mr-lg;
}

.mrsm {
  @apply mr-sm;
}

.mbsm {
  @apply mb-sm;
}

.home-link {
  margin-left: 16px;
  margin-bottom: 16px;

  a {
    color: #1d70b8;
  }
}

.clear-search-label {
  color: #a82227;
  cursor: pointer;
}

.search-submit-bar {
  margin-top: 32;
  margin-left: auto;
}

.application-details-link-button {
  @apply flex justify-between items-center;

  .download-button {
    color: a82227;
    margin-left: 8px;
  }
}

.response-download-button {
  @apply flex mb-sm;

  .download-button {
    color: #a82227;
    margin-left: 8px;
    white-space: nowrap;

  }
}

.check-page-link-button {
  color: #a82227 !important;
}

.pt-application-download-btn {
  display: flex;
  justify-content: flex-end;
  margin: 0px 8px;
}

.form-pt-dropdown-only {
  .options-card {
    position: unset;
  }
}
.application-table-container {
  @apply mt-lg ml-lg flex-1;
}

.primary-label-btn {
  @apply flex;
  gap: 10px;

  svg {
    fill: #a82227;
  }

  color: #5a1166;

  cursor: pointer;
  font-weight: 500;
  width: fit-content;
}

.primaryColor {
  color: #0b0c0c !important;
}

@media (hover: hover) {
  .primary-label-btn {
    &:hover {
      color: #000;

      svg {
        fill: #000;
      }
    }
  }
}

.disabled {
  @apply border-grey-dark text-grey-dark !important;
  pointer-events: none !important;
}

.card-date-input {
  @apply absolute top-0 left-0 w-3/4 bg-white pl-sm border border-input-border border-solid border-r-0;
  outline: transparent solid 1px;
  height: 2.5rem;
}

.h4 {
  @apply mb-sm;
}

.react-time-picker {
  width: 194px;
  height: 2.5rem;
  &__wrapper {
    border: 2px solid #0b0c0c;
    padding-left: 16px;
  }
  &__inputGroup__input {
    @apply px-sm;
    line-height: 2.5rem;
    min-width: 16px;
    &:focus {
      outline: 2px solid black;
    }
  }
}

.border-none {
  border: none;
  justify-content: space-between;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

.static {
  @apply flex flex-col;
  min-height: 85vh;

  &-wrapper {
    flex: 1;
    max-height: 75vh;
    overflow: scroll;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */

    &::-webkit-scrollbar {
      display: none;
    }
  }
}

.bill-summary {
  border: #e8e7e6 solid 1px;
  @apply bg-grey-light w-full;

  .bill-account-details {
    @apply flex mb-md;
    padding: 5px;

    .label {
      @apply w-1/2 font-bold;
    }

    .value {
      @apply w-1/2 text-right;
    }
  }

  .amount-details {
    @apply flex mb-md items-center;
    padding: 5px;

    .label {
      @apply w-1/2 font-bold;
    }

    .value {
      @apply w-1/2 font-bold text-right;
      font-size: 18px;
    }
  }
}

.bill-payment-amount {
  @apply sticky bottom-0 bg-white;
  padding-bottom: 32px;

  .payment-amount-front {
    @apply absolute z-10 w-10 flex justify-center items-center;
    background-color: #efefef;
    padding: 7px 12px;
    color: #9a9a9a;
  }
}

.text-indent-xl input {
  text-indent: 40px;
}

.select-payment-type {
  @apply flex justify-center font-bold items-center;
  padding-top: 10px;
  padding-bottom: 25px;

  .value {
    font-size: 20px;
  }
}

.cheque-date {
  @apply flex items-center mb-lg;
  border: 2px solid #0b0c0c;
  border-radius: 2px;

  input {
    @apply outline-none w-full;
    border: 0px;
    background: transparent;
    text-indent: 5px;
    padding: 6px 0px;
  }

  button {
    @apply outline-none;
    border: 0px;
    background: transparent;
    text-indent: 2px;
  }
}

.w-half {
  @apply w-1/2;
}

.ifsc-field {
  @apply flex items-center mb-lg;
  border: 2px solid #0b0c0c;
  border-radius: 2px;

  input {
    @apply outline-none w-full;
    border: 0px;
    background: transparent;
    text-indent: 5px;
    padding: 6px 0px;
  }
  button {
    @apply outline-none;
    border: 0px;
    background: transparent;
    text-indent: 2px;
  }
}

.text-input {
  @apply relative w-full;
  input {
    &:hover {
      @apply border-2 border-solid border-primary-main;
    }
  }
}

.text-input-width {
  max-width: 540px;
}

.text-mobile-input-width {
  max-width: 500px;
}

.custom-time-picker {
  @apply w-full;
  max-width: 200px;
}

.sla-cell {
  @apply text-text-secondary;
}

.submit-bar-search {
  margin-top: 32px;
  margin-left: 16px;
  max-width: 256px;
}

.clear-search-container {
  @apply flex justify-between items-center;
}

.card-label-smaller {
  @apply w-1/3;
  margin-bottom: revert;
}

.card-label-APK {
  @apply w-1/3;
  margin-bottom: revert;
  width: 100%;
}

.underline {
  border-color: #e7e6e6;
  @apply mb-sm;
}

.box-shadow-none {
  box-shadow: none;
}

.component-in-front {
  @apply flex justify-center items-center;
}

.subform-composer {
  @apply flex;
}

.inbox-search-container {
  .result {
    @apply mt-lg;
  }
}

.payment-form-text-input-correction {
  width: 100% !important;
}


.edcr-citizen-inbox{ 
   thead th:first-child{
  min-width:100px; 
}

}

.error-boundary {
  width: 100vw;
  height: 100vh;
  font-size: 16px;
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: absolute !important;
  .error-container {
    display: flex;
    width: 400px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    h1 {
      font-size: 32px;
      font-weight: bold;
    }
    button {
      height: 40px;
      width: 153px;
      border-radius: 0px;
      padding: 8px 24px;
      color: white;
      cursor: pointer;
      background-color: #a82227;
    }
  }
}

.error-boundary summary,
.error-boundary details {
  width: 300px;
  background-color: rgb(218, 100, 100);
  margin: 5px;
  border: 2px solid #222;
  border-radius: 3px;
  padding: 3px;
}

.full-width-card {
  width: 92vw !important;
}
.full-employee-card-link {
  width: 100% !important;
  margin: 7px 0px;
}
.full-employee-card-height {
  height: unset !important;
}

@media (min-width: 640px) {
  .full-employee-card-height {
    height: 196px !important;
  }
  .full-employee-card-link {
    width: 30% !important;
  }
  .full-width-card {
    @apply w-full !important;
  }
}
.applications-list-container {
}
.complaint-summary {
  @media (min-width: 780px) {
    flex: 1 0 auto;
    margin-left: 1rem;
    margin-top: 1rem;
  }
}

@media (min-width: 780px) {
  .citizen-form-wrapper {
    width: calc(100% - 219px);
    display: flex;
    justify-content: center;
    margin-top: 1rem;
    padding-left: 16px;
    padding-right: 16px;
  }
}
@media (min-width: 780px) {
  .citizen-card-container {
    padding-left: 15px;
    padding-right: 15px;
    margin-top: 1rem;
  }
}

@media (min-width: 780px) {
  .citizen-obps-wrapper,
  .selection-card-wrapper,
  .fsm-citizen-wrapper,
  .pgr-citizen-wrapper,
  .pt-citizen,
  .bill-citizen,
  .bills-citizen-wrapper,
  .payer-bills-citizen-wrapper,
  .engagement-citizen-wrapper,
  .citizen-all-services-wrapper,
  .mcollect-citizen,
  .ws-citizen-wrapper,
  .tl-citizen {
    width: calc(100% - 219px);
    padding-left: 16px;
    padding-right: 16px;
    margin-top: 1rem;
  }
}
@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  .error-boundary {
    height: 75vh;
  }
}
.employee-app-wrapper {
  min-height: calc(100vh - 8em);
}

.ws-custom-wrapper {
  .submit {
    display: flex !important;
    flex-direction: row-reverse !important;
    width: 100% !important;
    align-items: center;
    button {
      width: 240px !important;
    }
    p {
      width: unset;
      margin-right: 1rem;
    }
  }
}

.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;
  }
}

.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;
  }
}

.modal-header-ws {
  padding: 1rem;
  font-weight: 400;
}
.modal-body-ws {
  padding: 1rem;
  font-weight: 700;
  color: #0b0c0c;
  font-size: 24px;
  margin-bottom: 1rem;
}
.privacy-icon {
  cursor: pointer;
}
.privacy-icon:hover {
  path {
    fill: rgba(244, 119, 56, 1);
  }
}

.employee-app-wrapper{
min-height: calc(100vh - 8em);
}
.submit-bar header{
  line-height: 2.0rem !important;
}
.logo-removeBorderRadiusLogo svg{
  width: 50px;
  height: 60px;
}

.icon-banner-employee {
    background-color:#d7aefc !important;
}
.icon-banner-employee svg{
  background-color:#bf2f3b !important;
  width: 40px;
  height: 40px;
}
.inboxButton{
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 4px 2px;
    cursor: pointer;
    height: fit-content;
    border-radius: 5px;
    font-family: sans-serif;
    font-weight: 700;
}
.employee .inboxButton{
  padding: 5px 15px;
  background: #ba2b36
}
.citizen .inboxButton{
  padding: 15px;
  font-size: 1.2rem
}

@media screen and (max-width: 768px) {
  .citizen .inboxButton{
    font-size: 1rem;
  }
}