@egovernments/digit-ui-components-css 0.0.2-beta.11 → 0.0.2-beta.12

package/src/index.scss

@@ -1,681 +1,681 @@
-/*@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 "./pages/employee/index.scss";
-@import "./pages/employee/login.scss";
-
-@import "./digitv2/index.scss";
-@import "./digitv2/typography.scss";
-
-
-.display-none {
-  display: none;
-}
-
-.p-unset {
-  padding: unset !important;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-size: inherit;
-  font-weight: inherit; }
-
-
-.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;
-}
-
-.employeeCard {
-  /*  TODO need to revisit that we need mx-md NABEEL/ANIL
-   @apply mb-md mx-md !important;
-  */
-  @apply mb-md !important;
-  --bg-opacity: 1;
-  background-color: rgba(255, 255, 255, var(--bg-opacity));
-  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 16%);
-  padding: 16px;
-  border-radius: 4px;
-}
-
-.home-link {
-  margin-left: 16px;
-  margin-bottom: 16px;
-
-  a {
-    color: theme(colors.link.normal);
-  }
-}
-
-.clear-search-label {
-  color: theme(colors.primary.main);
-  cursor: pointer;
-}
-
-.search-submit-bar {
-  margin-top: 32;
-  margin-left: auto;
-}
-
-.application-details-link-button {
-  @apply flex justify-between items-center;
-
-  .download-button {
-    color: theme(colors.primary.main);
-    margin-left: 8px;
-  }
-}
-
-.response-download-button {
-  @apply flex mb-sm;
-
-  .download-button {
-    color: theme(colors.primary.main);
-    margin-left: 8px;
-  }
-}
-
-.check-page-link-button {
-  color: theme(colors.primary.main) !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: theme(colors.primary.main);
-  }
-
-  color: theme(colors.primary.main);
-
-  cursor: pointer;
-  font-weight: 500;
-  width: fit-content;
-}
-
-.primaryColor {
-  color: theme(colors.text.primary) !important;
-}
-
-input[readonly] {
-  background-color:  theme(digitv2.lightTheme.generic-background);
-  border-color: theme(digitv2.lightTheme.text-secondary);
-  color: theme(digitv2.lightTheme.text-secondary);
-  --border-opacity: 1;
-  border-color: #9E9E9E;
-  border-color: rgba(158, 158, 158, var(--border-opacity));
-}
-
-.hide-input-type-file {
-  position: absolute;
-  clip: rect(0, 0, 0, 0);
-  pointer-events: none !important;
-}
-
-@media (hover: hover) {
-  .primary-label-btn {
-    &:hover {
-      color: #000;
-
-      svg {
-        fill: #000;
-      }
-    }
-  }
-}
-
-.disabled {
-  pointer-events: none !important;
-  --border-opacity: 1;
-  border-color: #9E9E9E;
-  border-color: rgba(158, 158, 158, var(--border-opacity));
-  --text-opacity: 1;
-  color: #9E9E9E;
-  color: rgba(158, 158, 158, var(--text-opacity));
-}
-
-.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 theme(colors.text.primary);
-    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 theme(colors.text.primary);
-  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 theme(colors.text.primary);
-  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: 155px;
-  }
-}
-
-.error-boundary {
-  width: 100vw;
-  height: 100vh;
-  font-size: 16px;
-  font-family: sans-serif;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  .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: theme(colors.primary.main);
-    }
-  }
-}
-
-.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;
-  a {
-    color: inherit;
-    text-decoration: inherit;
-  }
-}
-.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,
-  .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: theme(colors.text.primary);
-  font-size: 24px;
-  margin-bottom: 1rem;
-}
-.privacy-icon {
-  cursor: pointer;
-}
-.privacy-icon:hover {
-  path {
-    fill: rgba(244, 119, 56, 1);
-  }
-}
-
-.privacy-icon-2 {
-  cursor: pointer;
-}
-.privacy-icon-2:hover {
-  path {
-    fill: none;
-  }
-}
-
-.audit-card {
-  width: 80%;
-  margin-left: -260px;
-  margin-right: -27%;
-  max-height: 120px;
-  margin-top: 90px;
-}
+/*@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 "./pages/employee/index.scss";
+@import "./pages/employee/login.scss";
+
+@import "./digitv2/index.scss";
+@import "./digitv2/typography.scss";
+
+
+.display-none {
+  display: none;
+}
+
+.p-unset {
+  padding: unset !important;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-size: inherit;
+  font-weight: inherit; }
+
+
+.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;
+}
+
+.employeeCard {
+  /*  TODO need to revisit that we need mx-md NABEEL/ANIL
+   @apply mb-md mx-md !important;
+  */
+  @apply mb-md !important;
+  --bg-opacity: 1;
+  background-color: rgba(255, 255, 255, var(--bg-opacity));
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 16%);
+  padding: 16px;
+  border-radius: 4px;
+}
+
+.home-link {
+  margin-left: 16px;
+  margin-bottom: 16px;
+
+  a {
+    color: theme(colors.link.normal);
+  }
+}
+
+.clear-search-label {
+  color: theme(colors.primary.main);
+  cursor: pointer;
+}
+
+.search-submit-bar {
+  margin-top: 32;
+  margin-left: auto;
+}
+
+.application-details-link-button {
+  @apply flex justify-between items-center;
+
+  .download-button {
+    color: theme(colors.primary.main);
+    margin-left: 8px;
+  }
+}
+
+.response-download-button {
+  @apply flex mb-sm;
+
+  .download-button {
+    color: theme(colors.primary.main);
+    margin-left: 8px;
+  }
+}
+
+.check-page-link-button {
+  color: theme(colors.primary.main) !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: theme(colors.primary.main);
+  }
+
+  color: theme(colors.primary.main);
+
+  cursor: pointer;
+  font-weight: 500;
+  width: fit-content;
+}
+
+.primaryColor {
+  color: theme(colors.text.primary) !important;
+}
+
+input[readonly] {
+  background-color:  theme(digitv2.lightTheme.generic-background);
+  border-color: theme(digitv2.lightTheme.text-secondary);
+  color: theme(digitv2.lightTheme.text-secondary);
+  --border-opacity: 1;
+  border-color: #9E9E9E;
+  border-color: rgba(158, 158, 158, var(--border-opacity));
+}
+
+.hide-input-type-file {
+  position: absolute;
+  clip: rect(0, 0, 0, 0);
+  pointer-events: none !important;
+}
+
+@media (hover: hover) {
+  .primary-label-btn {
+    &:hover {
+      color: #000;
+
+      svg {
+        fill: #000;
+      }
+    }
+  }
+}
+
+.disabled {
+  pointer-events: none !important;
+  --border-opacity: 1;
+  border-color: #9E9E9E;
+  border-color: rgba(158, 158, 158, var(--border-opacity));
+  --text-opacity: 1;
+  color: #9E9E9E;
+  color: rgba(158, 158, 158, var(--text-opacity));
+}
+
+.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 theme(colors.text.primary);
+    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 theme(colors.text.primary);
+  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 theme(colors.text.primary);
+  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: 155px;
+  }
+}
+
+.error-boundary {
+  width: 100vw;
+  height: 100vh;
+  font-size: 16px;
+  font-family: sans-serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  .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: theme(colors.primary.main);
+    }
+  }
+}
+
+.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;
+  a {
+    color: inherit;
+    text-decoration: inherit;
+  }
+}
+.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,
+  .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: theme(colors.text.primary);
+  font-size: 24px;
+  margin-bottom: 1rem;
+}
+.privacy-icon {
+  cursor: pointer;
+}
+.privacy-icon:hover {
+  path {
+    fill: rgba(244, 119, 56, 1);
+  }
+}
+
+.privacy-icon-2 {
+  cursor: pointer;
+}
+.privacy-icon-2:hover {
+  path {
+    fill: none;
+  }
+}
+
+.audit-card {
+  width: 80%;
+  margin-left: -260px;
+  margin-right: -27%;
+  max-height: 120px;
+  margin-top: 90px;
+}