/* src/assets/themes/custom-theme.scss */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap");
/* Import the base PrimeNG theme */
@import "node_modules/primeng/resources/themes/lara-light-indigo/theme";
@import "node_modules/primeng/resources/primeng";
@import "node_modules/primeicons/primeicons";
@import "node_modules/@angular/material/prebuilt-themes/indigo-pink.css";
// @import "node_modules/ngx-spinner/animations/ball-scale-multiple.css";

// Quill text editor theme
@import "~quill/dist/quill.snow.css";
@import "~quill/dist/quill.core.css";

// Toaster
@import "ngx-toastr/toastr";

body {
  margin: 0;
  padding: 0;
  font-family: Poppins, sans-serif !important;
  background-color: #f0f0f0;
  max-height: 100vh;
}

.p-component {
  font-family: Poppins, sans-serif !important;
}

a {
  text-decoration: none;
}

.p-tooltip .p-tooltip-text {
  background-color: #000 !important;
  color: #fff !important;
  font-size: 0.875rem;
  white-space: nowrap;
  padding: 0.25rem;
}

.p-tooltip {
  right: 100% !important;
}

/* Custom colors */
/* Root CSS Variables for Colors */
:root {
  --primaryColor: #2162c2;
  --hovercolour: #1a4f9a;
  --disabled: #d3d3d3;
  --disabledfontcolor: #a0a0a0;
  /* Your primary color */
  --primaryDarkColor: #2980b9;
  /* Darker version of primary color */
  --primaryLightColor: #5dade2;
  /* Lighter version of primary color */

  --secondaryColor: #4a90e2;
  --secondaryColorHover: #357abd;

  /* Your secondary color */
  --backgroundColor: #f0f0f0;
  /* Background color */
  --textColor: #000000;
  /* Main text color */

  --Disable: #e70000;
  /* Your disable color */
  --backgroundColor: #f8f8f8;
  /* Background color */
  --textColor: #000000;
  /* Main text color */

  --borderColor: #cfc8c8;
  /* Border color for inputs, buttons, etc. */
  --disabletext: #a0a0a0;

  --whitecolor: #ffffff;
}

/* Apply colors globally */
body {
  background-color: var(--backgroundColor);
  color: var(--textColor);
  font-family: "Poppins", sans-serif;
}

// font sizes  start//

.page-header {
  font-size: 1.75rem;
  line-height: 2.25rem;
  letter-spacing: 0.006rem;
  font-weight: 600;
  margin-top: 1rem;
  margin-bottom: 0.75rem;
  padding-left: 0rem;
  padding-right: 0rem;
  color: var(--textColor);
}

.heading {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 500;
  letter-spacing: 0.006rem;
  margin-top: 1.25rem;
  margin-bottom: 1rem;
  padding-left: 0rem;
  padding-right: 0rem;
  color: var(--textColor);
}

.sub-heading {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 500;
  letter-spacing: 0.006rem;
  margin-top: 1rem;
  margin-bottom: 0.75rem;
  padding-left: 0rem;
  padding-right: 0rem;
  color: var(--textColor);
}

.sub-header-h4 {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.006rem;
  margin-top: 0.75rem;
  margin-bottom: 0.5rem;
  padding-left: 0rem;
  padding-right: 0rem;
  color: var(--textColor);
}

.bodytext {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  margin-top: 0.5rem;
  letter-spacing: 0.006rem;
  margin-bottom: 0.5rem;
  padding-left: 0rem;
  padding-right: 0rem;
  color: var(--textColor);
}

.smalltest {
  font-size: 0.875rem;
  line-height: 1rem;
  font-weight: 400;
  margin-top: 0.25rem;
  letter-spacing: 0.006rem;
  margin-bottom: 0.25rem;
  padding-left: 0rem;
  padding-right: 0rem;
  color: var(--textColor);
}

.side-navtext {
  font-size: 0.625rem;
  line-height: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.006rem;
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
  padding-left: 0rem;
  padding-right: 0rem;
  color: var(--textColor);
}

// font sizes  close //

//table code start//

.p-datatable-thead th {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  margin-top: 0.5rem;
  letter-spacing: 0.006rem;
  margin-bottom: 0.5rem;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
  color: var(--textColor);
  height: 2.875rem !important;
  background: #f8f9fa;
  padding: 0rem;
}

.p-datatable-thead th:hover {
  background: #e9ecef !important;
}

.p-datatable-tbody td {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  margin-top: 0.5rem;
  letter-spacing: 0.006rem;
  margin-bottom: 0.5rem;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
  color: var(--textColor);
  padding: 0rem;
  border-bottom: 0.063rem solid #dee2e6 !important;
  height: 2.875rem !important;
  word-break: break-all;
}

.p-datatable-tbody tr:hover td {
  background: #f6f9fc !important;
}

.table-background {
  background-color: #fff !important;
  padding: 1.875rem !important;
  border-radius: 0.625rem !important;
}

.p-datatable .p-sortable-column .p-sortable-column-icon {
  color: #a3aab1 !important;
}

.p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
  color: #4a90e2 !important;
}

.truncate-text {
  display: inline-block;
  max-width: 9.375rem;
  /* Adjust as needed */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: top;
}

.id-column {
  cursor: pointer;
  color: #2572e3;
}

.delete-btn {
  border: none;
  background: none;
}

.delete-btn:hover {
  opacity: 1;
  color: rgb(85, 74, 74);
}

.edit-btn {
  border: none;
  background: none;
}

.no-records-message {
  text-align: center;
  height: 100%;
}

img.edit-image {
  height: 1.5625rem;
}

// tablecode code end //

// input code start //
.custom-input {
  color: #000;
  width: 100%;
  border: 0.063rem solid #eee9e9;
  border-radius: 0.25rem;
  transition: none;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  padding: 0.5rem 0.5rem !important;
  font-family: "poppins", sans-serif !important;
}

.custom-input:hover {
  width: 100%;
  border: 0.063rem solid #4a90e2;
  border-radius: 0.25rem;
}

.custom-input:focus {
  width: 100%;
  border: 0.063rem solid #4691ff;
  border-radius: 0.25rem;
  box-shadow: #cfdff7 !important;
}

.name-heading {
  position: relative;
  width: 13%;
  font-size: 0.875rem;
  line-height: 1rem;
  left: 0.75rem;
  bottom: 0.313rem;
  font-family: "Poppins", sans-serif;
  color: #000 !important;
}

// input code end //

.p-input-icon-left > .p-inputtext {
  padding-top: 0.375rem !important;
  padding-bottom: 0.375rem !important;
  padding-left: 2.375rem !important;
  padding-right: 0.375rem !important;
}

.p-multiselect {
  width: 100%;
  border: 0.063rem solid #eee9e9;
  font-size: inherit;
  padding: 0 !important;
  /* Remove padding to apply custom padding */
}

/* Styling input wrapper inside multiSelect */
.p-multiselect .p-multiselect-label {
  color: #000 !important;
  transition: border 0.3s;
  width: 100%;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  padding: 0.5rem 0.5rem !important;
  font-family: "poppins", sans-serif !important;
}

/* Hover effect for the input wrapper */
.p-multiselect:hover {
  border: 0.063rem solid #4a90e2;
  transition: border 0.3s;
}

/* Focus style for input wrapper */
.p-multiselect:focus {
  border: 0.063rem solid #4691ff !important;
  box-shadow: 0 0 0.313rem #cfdff7 !important;
}

/* Custom dropdown arrow style */
.custom-multiselect .p-multiselect .p-multiselect-trigger:hover {
  background-color: #4a90e2;
  /* Arrow background color on hover */
  transition: background-color 0.3s;
}

//split button start //

.p-splitButton {
  background: var(--primaryColor) !important;
  border: none !important;
  height: 2.25rem;
  font-size: 0.875rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.006rem;
}

button.p-element.p-splitbutton-defaultbutton.p-button.p-component {
  height: 2.25rem;
  font-size: 0.875rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.006rem;
  background: var(--primaryColor) !important;
  border: 0.063rem solid #2162c2;
}

button.p-element.p-splitbutton-menubutton.p-button-icon-only.p-button.p-component {
  height: 2.25rem;
  background: var(--primaryColor) !important;
  border: 0.063rem solid #2162c2;
}

button.p-element.p-splitbutton-defaultbutton:hover.p-button.p-component {
  background-color: var(--hovercolour) !important;
}

button.p-element.p-splitbutton-menubutton:hover.p-button-icon-only.p-button.p-component {
  background-color: var(--hovercolour) !important;
}

// .p-button .p-button-label {
//   font-weight: 500;
// }

.disabled-button {
  // pointer-events: none;
  cursor: not-allowed;
  opacity: 0.6;
  /* Optional: Visual indication of disabled state */
}

//split button end //

//secondary button start //

.button-secondary {
  background: var(--secondaryColor) !important;
  border: none !important;
  height: 2.25rem;
  font-size: 0.875rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.006rem;
}

.button-secondary:hover {
  border: none !important;
  background-color: var(--secondaryColorHover) !important;
}

.button-secondary:focus {
  box-shadow: #cfdff7 !important;
}

//secondary button emd //

//primary button \start //

.p-button-primary {
  background: var(--primaryColor) !important;
  border: none !important;
  height: 2.25rem;
  font-size: 0.875rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.006rem;
}

.p-button-primary:hover {
  border: none !important;
  background-color: var(--hovercolour) !important;
}

//primary button end //

//disable button start //
.disabled {
  height: 2.25rem;
  font-size: 0.875rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.006rem;
  background: var(--disabled) !important;
  color: var(--disabledfontcolor) !important;
  border: none;
  border-radius: 0.313rem;
}

//disable button end //

//link button start //

button.p-ripple.p-element.p-button.p-component.p-button-link {
  background: none;
  color: var(--primaryColor) !important;
}

.p-button.p-button-link:enabled:focus {
  box-shadow: none !important;
}

//lnk button end //

// cross button start//

.p-button-rounded {
  border-radius: 50% !important;
  height: 2.5rem !important;
  width: 2.5rem !important;
  color: #e9ecef !important;
}

.p-button.p-button-danger.p-button-text {
  color: var(--textColor) !important;
}

//icon button  \start //

.icon-bacground-button {
  background: var(--whitecolor) !important;
  border: 0.063rem solid #d2d2d2 !important;
  height: 2.4rem;
  font-size: 0.875rem;
  margin-top: 0.15rem;
  line-height: 1rem;
  font-weight: 500;
  border-radius: 0.5rem;
}

.icon-bacground-button:hover {
  border: 0.063rem solid #4a90e2 !important;
}

.icon-bacground-button:focus {
  border: 0.063rem solid #4691ff !important;
  box-shadow: #cfdff7 !important;
}

.icon-bacground-button .p-button-icon.pi.pi-filter {
  color: #000 !important;
}

//clear button start
// .p-button .p-button-label {
//   font-weight: 500;
// }

.p-button .p-button-label {
  font-weight: 400;
  color: #000 !important;
}

button.p-clear-button {
  background: #ffffff !important;
  height: 2.25rem;
  font-size: 0.875rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.006rem;
  border: 1px solid #2162c2;
  color: #2162c2 !important;
}

// clear button end
//icon button  end //

.p-dropdown {
  width: 100%;
  border: 0.063rem solid #eee9e9;
  font-size: inherit;
  padding: 0 !important;
  /* Remove padding to apply custom padding */
}

/* Styling input wrapper inside multiSelect */
.p-dropdown .p-dropdown-label {
  color: #000 !important;
  transition: border 0.3s;
  width: 100%;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  padding: 0.5rem 0.5rem !important;
  font-family: "poppins", sans-serif !important;
}

.p-dropdown .p-dropdown-clear-icon {
  // display: none;
}

/* Hover effect for the input wrapper */
.p-dropdown:hover {
  border: 0.063rem solid #4a90e2;
  transition: border 0.3s;
}

/* Focus style for input wrapper */
.p-dropdown:focus {
  border: 0.063rem solid #4691ff !important;
  box-shadow: 0 0 0.313rem #cfdff7 !important;
}

label.dropdown-label {
  position: relative;
  font-size: 0.875rem;
  line-height: 1rem;
  left: 0.75rem;
  bottom: 0.313rem;
  font-family: "Poppins", sans-serif;
  color: #000000 !important;
}

.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover {
  border-color: var(--primaryColor) !important;
  background: var(--primaryColor) !important;
  color: #ffffff;
}

.p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
  border-color: var(--primaryColor) !important;
  background: var(--primaryColor) !important;
  color: #ffffff;
}

.p-slider .p-slider-range {
  background: var(--primaryColor) !important;
}

.checkbox-label {
  position: relative;
  font-size: 0.875rem;
  line-height: 1rem;
  left: 0.75rem;
  font-family: "Poppins", sans-serif;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}

.ng-star-inserted.ng-trigger.ng-trigger-animation.p-component.p-dialog.p-dialog-draggable.p-dialog-resizable.p-element {
  width: 83.438rem;
  z-index: 1073;
  height: 35rem;
}

//textaea start code //

.text-area {
  width: 100%;
}

.text-area {
  width: 100%;
  border: 0.063rem solid #eee9e9;
  border-radius: 0.25rem;
  transition: none;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  font-family: "poppins", sans-serif !important;
}

.text-area:hover {
  width: 100%;
  border: 0.063rem solid #4a90e2 !important;
  border-radius: 0.25rem;
}

.text-area:focus {
  width: 100%;
  border: 0.063rem solid #4691ff !important;
  border-radius: 0.25rem;
  box-shadow: #cfdff7 !important;
}

//textaea end code //

// inputnumber code start //

.number-input-main {
  display: flex;
  flex-direction: column;
}

.number-input-main .p-inputnumber {
  display: inline-flex;
  width: 100% !important;
}

.number-input-main .p-inputtext {
  width: 100%;
  border: 0.063rem solid #eee9e9;
  border-radius: 0.25rem;
  transition: none;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  padding: 0.5rem 0.5rem !important;
  font-family: "poppins", sans-serif !important;
}

//textaea start code //

.text-area {
  width: 100%;
}

.text-area {
  width: 100%;
  border: 0.063rem solid #eee9e9;
  border-radius: 0.25rem;
  transition: none;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  font-family: "poppins", sans-serif !important;
}

.text-area:hover {
  width: 100%;
  border: 0.063rem solid #4a90e2 !important;
  border-radius: 0.25rem;
}

.text-area:focus {
  width: 100%;
  border: 0.063rem solid #4691ff !important;
  border-radius: 0.25rem;
  box-shadow: #cfdff7 !important;
}

//textaea end code //

.number-input-main .p-inputtext:hover {
  width: 100%;
  border: 0.063rem solid #4a90e2;
  border-radius: 0.25rem;
}

.number-input-main .p-inputtext:focus {
  width: 100%;
  border: 0.063rem solid #4691ff;
  border-radius: 0.25rem;
  box-shadow: #cfdff7 !important;
}

.number-heading {
  position: relative;
  font-size: 0.875rem;
  line-height: 1rem;
  left: 0.75rem;
  font-family: "Poppins", sans-serif;
  bottom: 0.25rem;
}

// inputnumber code end //

//search input input code start //

.Search-input .p-input-icon-left {
  width: 100%;
}

.Search-input .p-input-icon-left > .p-inputtext {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  padding-left: 2.375rem !important;
  padding-right: 0.375rem !important;
  font-family: "poppins", sans-serif !important;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  width: 100%;
}

//search input input code end //

//search input input code end //

// CALENDAR CSS - START
.date-cotainer {
  margin: 1.25rem 0;
  display: flex;
  flex-direction: column;
}

.common-label {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.25rem;
  // letter-spacing: 0.25rem;
  margin: 0.5rem 0;
  padding: 0rem;
  color: #000;
}

.p-datepicker table,
.p-datepicker-title,
.p-calendar-container input {
  font-family: "Poppins", sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.25rem;
  // letter-spacing: 0.125rem;
  padding: 0.375rem;
  color: #000;
}

.p-calendar-container .p-datepicker-trigger {
  padding: 0.375rem 0.375rem;
  background-color: #2162c2;
}

.p-calendar-container .p-datepicker-trigger:hover {
  background: #1a4f9a;
}

.p-calendar-container .p-button-text,
p-datepicker-month {
  font-family: "Poppins", sans-serif;
  color: #2162c2;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  // letter-spacing: 0.25rem;
  padding: 0.5rem 0.625rem 0.5rem 0.75rem;
}

.p-button-label button,
.p-calendar-container table,
.p-datepicker-title .p-datepicker-month.p-link,
.p-datepicker-title .p-datepicker-year.p-link {
  font-family: "Poppins", sans-serif;
  color: #000;
}

// CALENDAR CSS - END

//  TOOLTIP START
.p-tooltip .p-tooltip-text,
.pa-tooltip-container {
  font-family: "Poppins", sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.25rem;
  // letter-spacing: 0.25rem;
  padding: 0.375rem;
  color: #000;
}

//  TOOLTIP END

.toast-top-center {
  top: 5.625rem !important;
}

.toast-success {
  background-color: #ffffff !important;
  border-left: 0.375rem solid #51a351 !important;
}

.toast-message {
  word-wrap: break-word;
  font-size: 0.875rem;
  line-height: 1.25rem;
  display: block;
  color: #000 !important;
  background-color: transparent;
}

.toast-success {
  position: relative;
}

.toast-success::after {
  content: "";
  position: absolute;
  background: url(../success-alert.svg) !important;
  position: absolute !important;
  width: 2rem !important;
  height: 2rem !important;
  background-size: 1.25rem 1.313rem !important;
  display: inline-block;
  background-repeat: no-repeat !important;
  top: 0.875rem;
  left: 1.125rem;
}

.toast-warning {
  background-color: #ffffff !important;
  border-left: 0.375rem solid #f76800 !important;
  position: relative;
}

.toast-warning::after {
  content: "";
  position: absolute;
  background: url(../warning-alert.svg) !important;
  position: absolute !important;
  width: 2rem !important;
  height: 2rem !important;
  background-size: 1.25rem 1.313rem !important;
  display: inline-block;
  background-repeat: no-repeat !important;
  top: 0.875rem;
  left: 1.125rem;
}

.toast-error {
  background-color: #ffffff !important;
  border-left: 0.375rem solid #c00000 !important;
  position: relative;
}

.toast-error::after {
  content: "";
  position: absolute;
  background: url(../error-alert.svg) !important;
  position: absolute !important;
  width: 2rem !important;
  height: 2rem !important;
  background-size: 1.25rem 1.313rem !important;
  display: inline-block;
  background-repeat: no-repeat !important;
  top: 0.875rem;
  left: 1.125rem;
  vertical-align: center !important;
  line-height: inherit !important;
}

body .toast-container {
  max-width: none !important;
  width: 100% !important;
}

// time line start //

.timeline .p-timeline .p-timeline-event-marker {
  border: 0.125rem solid #4a90e2 !important;
}

.timeline .p-timeline.p-timeline-vertical .p-timeline-event-content {
  padding: 0 1rem;
  font-size: 0.875rem;
  line-height: 1rem;
  font-weight: 400;
  letter-spacing: 0.006rem;
  font-family: "poppins", sans-serif;
}

//three dot menu//
.dots-3:hover {
  background-color: #c3dafe;
}

.dots-3 {
  width: 2.625rem;
  height: 2.4rem;
  background-color: #f5f5f5;
  border: 0.036rem solid #cecece;
  border-radius: 0.313rem;
  background: none;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0.3125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555; // Adjust as needed for icon color

  &:hover {
    color: #333; // Darken on hover
  }

  i.a-more {
    font-size: 0.875rem;
  }
}

.mat-menu-panel {
  padding: 0;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
}

mat-menu {
  min-width: 12.5rem;
}

.mat-menu-item {
  display: flex;
  align-items: center;
  padding: 0.625rem 0.9375rem;

  &:hover {
    background-color: #f5f5f5;
  }

  img {
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.5rem;
    object-fit: contain;
  }

  span {
    font-size: 0.875rem;
    color: #333;
    flex-grow: 1;
  }
}

// Responsive adjustments
@media (max-width: 37.5rem) {
  .mat-menu-panel {
    min-width: 9.375rem;
  }

  .dots-3 {
    font-size: 1rem;
  }

  .mat-menu-item span {
    font-size: 0.8125rem;
  }
}

//icons

.a-more {
  position: relative;
  z-index: 1;
}

.a-more::before {
  content: "";
  position: absolute !important;
  width: 2.25rem !important;
  height: 2.25rem !important;
  background-size: 1.5rem 1.5rem !important;
  display: inline-block;
  background-repeat: no-repeat !important;
  left: -0.688rem;
  top: -0.688rem;
  opacity: 0.8;
  background-image: url(../moremore.svg);
  cursor: pointer;
}

//inpu border bottom code //

.border-bootam .border-bottom-input {
  border: none;
  border-bottom: 0.125rem solid #0000001a;
  outline: none;
  padding: 0.25rem;
  font-size: 1rem;
  width: 100%;
  background: none;
}

// code end //
// three dots ment close //
// time line start //

::ng-deep input.p-inputtext.p-component.p-element.p-password-input {
  width: 100%;
  border: 0.063rem solid #eee9e9;
  border-radius: 0.25rem;
  transition: none;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  padding: 0.5rem 0.5rem !important;
  font-family: "poppins", sans-serif !important;
}

::ng-deep .p-password.p-component.p-inputwrapper {
  height: 2.0125rem !important;
}

::ng-deep input.p-inputtext.p-component.p-element.p-password-input {
  width: 100%;
  height: 2.375rem !important;
}

.textarea-container {
  display: flex;
  flex-direction: column;
  margin-bottom: 1em;
}

.textarea-container label {
  font-weight: 400;
  margin-bottom: 0.5em;
  font-size: 1rem;
  color: #333;
}

.textarea-container textarea {
  padding: 0.75rem;
  /* 12px */
  font-size: 1rem;
  /* 16px */
  border-radius: 0.25rem;
  /* 4px */
  border: 0.0625rem solid #ccc;
  /* 1px */
  resize: vertical;
}

.textarea-container textarea:focus {
  border-color: #007ad9;
  outline: none;
  box-shadow: 0 0 0.25rem rgba(0, 122, 217, 0.3);
  /* 4px */
}

.task-attachment {
  // margin: 2rem;
  padding: 1rem;
  max-width: 37.5rem;
  /* 600px */
}

/* Title and Close Button */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.title {
  color: #001533;
  font-size: 1.2rem;
  /* 19.2px */
  line-height: 1.5rem;
  /* 24px */
  font-weight: 500;
  flex: 1;
}

.close-icon {
  width: 1.5rem;
  /* 24px */
  height: 1.5rem;
  /* 24px */
  background: url("../close.svg") no-repeat center;
  background-size: contain;
  cursor: pointer;
}

/* File Input and Remove Button */
.choose-file {
  width: 100%;
  max-width: 100%;
  padding: 0.5rem;
  /* 8px */
  margin-bottom: 0.5rem;
  /* 8px */
  font-size: 0.9rem;
  /* 14.4px */
}

// .p-button {
//   margin-top: 0.5rem;
//   /* 8px */
// }

.save-attachments {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
}

.save-attachments button {
  padding: 0.5rem 1rem;
  /* 8px 16px */
  font-size: 0.9rem;
  /* 14.4px */
}

/* Responsive Design */
@media (max-width: 48rem) {
  /* 768px equivalent */
  .task-attachment {
    margin: 1rem;
    padding: 1rem;
  }

  .title {
    font-size: 1.1rem;
    /* 17.6px */
  }

  .close-icon {
    width: 1.25rem;
    /* 20px */
    height: 1.25rem;
    /* 20px */
  }

  .choose-file {
    font-size: 0.85rem;
    /* 13.6px */
  }

  .save-attachments button {
    padding: 0.4rem 0.8rem;
    /* 6.4px 12.8px */
    font-size: 0.85rem;
    /* 13.6px */
  }
}

@media (max-width: 30rem) {
  /* 480px equivalent */
  .task-attachment {
    margin: 0.5rem;
    /* 8px */
    padding: 0.75rem;
    /* 12px */
  }

  .title {
    font-size: 1rem;
    /* 16px */
    line-height: 1.4rem;
    /* 22.4px */
  }

  .choose-file {
    font-size: 0.8rem;
    /* 12.8px */
  }

  .save-attachments button {
    padding: 0.35rem 0.75rem;
    /* 5.6px 12px */
    font-size: 0.8rem;
    /* 12.8px */
  }
}

.att-save:disabled {
  background: #598ad2;
  color: rgba(255, 255, 255, 0.6) !important;
  /* #ffffff9a */
  cursor: not-allowed;
}

.att-save {
  width: 4.75rem;
  /* 76px */
  padding: 0.40625rem 0 !important;
  /* 6.5px 0 */
  background: #2162c2;
  border-radius: 0.3125rem;
  /* 5px */
  color: #ffffff !important;
  border: 0.0625rem solid;
  /* 1px */
  margin-left: 1.25rem !important;
  /* 20px */
  margin-top: 1.625rem;
  /* 26px */
}

// LAYOUT START
.layout-container {
  min-height: 100vh;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main-content {
  display: flex;
  // height: calc(100vh - 50px);
}

.main-content {
  flex-grow: 1;
}

// LAYOUT END

// Reports Start

.repo-title {
  font-family: "Poppins", sans-serif;
  font-size: 24px;

  font-weight: 500;
  margin-left: 67px;
}

p {
  margin: 0px;
  padding: 0px;
}

.main-reports {
  background: #f1f1f1 0% 0% no-repeat padding-box;
  box-shadow: 0px 3px 6px #00000029;
  width: 100%;
  padding: 20px;
}

.sections-main {
  width: 86vw;
  height: 90.5vh;
  background: #ffffff 0% 0% no-repeat padding-box;
  border-radius: 10px;
  opacity: 1;
  padding: 20px 30px 30px 30px;
}

.section-1 {
  display: flex;
  flex-direction: row;
  gap: 352px;
}

.border-div {
  border: 1px solid #d8d8d8;
  border-radius: 2px;
  opacity: 1;
  height: 75vh;
}

.table-div {
  margin: 20px;
}

.report-title {
  font: normal normal medium 16px/4px Poppins;
  letter-spacing: 0.03px;
  color: #000000;
  font-weight: 500;
  margin-top: 20px;
  margin-bottom: 30px;
}

.class-divide {
  display: flex;
}

button {
  // border: none;
  height: 36px;
  background: none;
}

.a-back {
  position: relative;
  z-index: 1;
  left: 7px;
}

.a-back::before {
  content: "";
  position: absolute !important;
  width: 36px !important;
  height: 36px !important;
  background-size: 24px 24px !important;
  display: inline-block;
  background-repeat: no-repeat !important;
  // background-image: url(../../../assets/image/back.svg);
  cursor: pointer;
  top: 8px;
}

.backline {
  position: relative;
  z-index: 1;
}

.backline:before {
  // content: "";
  // background: url(../../../assets/image/line.svg);
  height: 41px;
  width: 2px;
  position: absolute;
  right: -50px;
}

// Reports End

.error-message {
  color: #f44336;
  font-size: 0.75rem;
}

.p-dialog .p-dialog-header {
  color: #000000 !important;
}

.p-dropdown:not(.p-disabled).p-focus {
  outline: none;
  outline-offset: 0;
  box-shadow: 0 0 0 0.2rem #c7d2fe;
  border-color: #4a90e2;
}

.p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
  background: #e1f4ff;
}

.p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
  color: #2162c2;
  background: #e1f4ff;
}

.p-dropdown-panel
  .p-dropdown-items
  .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
  background: #e1f4ff;
  color: #2162c2;
}
.p-dropdown .p-dropdown-label.p-placeholder {
  color: #6c757d !important;
}

.p-multiselect .p-multiselect-label.p-placeholder {
  color: #6c757d !important;
}