@charset "UTF-8";
@font-face {
  font-family: "Eina03-Regular";
  src: url("/assets/fonts/eina/Eina03-Regular.ttf");
}
@font-face {
  font-family: "Eina03-SemiBold";
  src: url("/assets/fonts/eina/Eina03-SemiBold.ttf");
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter/Inter.ttf");
}
.communio-title {
  font-family: "Eina03-SemiBold";
  color: #000000;
  font-size: 24px;
  line-height: normal;
  margin: 0 0 8px;
}

.communio-sub-title {
  font-family: "Eina03-Regular";
  color: #3d3d3d;
  font-size: 14px;
  line-height: normal;
  margin: 0;
}

.communio-rounded-lg {
  border-radius: 8px;
}

.communio-rounded-md {
  border-radius: 6px;
}

.title {
  max-width: 983px;
  margin-right: 15px;
}

.button-primary {
  width: 100%;
  max-width: 226px;
  font-family: "Eina03-SemiBold";
  background-color: #fc2d38;
  border: none;
  outline: none;
  padding: 8px 16px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 400;
  display: flex;
  height: 50px;
  padding: 8px 32px;
  justify-content: center;
  align-items: center;
}
.button-primary:hover {
  background-color: #fc2d38;
}

.permissions-table-container #permissions-table-details .select2.select2-container .select2-selection {
  margin-bottom: 0;
}

.status-dd {
  width: 100%;
  max-width: 307px;
  min-width: 220px;
  margin-right: 20px;
}

.rotated {
  transform: rotate(180deg);
}

.search-container {
  position: relative;
  width: 100%;
  max-width: 348px;
  display: flex;
  align-items: center;
}
.search-container .search-icon {
  left: 12px;
  position: absolute;
}
.search-container svg {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.search-container input {
  width: 100%;
  padding: 10px 10px 10px 35px;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  border-radius: 2px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
}

.filterbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .filterbar {
    flex-direction: column;
    align-items: stretch;
  }
}
.filterbar .priority-status-wrapper {
  display: flex;
  align-items: center;
  gap: 16px;
}
@media screen and (max-width: 768px) {
  .filterbar .priority-status-wrapper {
    flex-wrap: wrap;
    flex-direction: column;
    align-items: stretch;
  }
}
.filterbar .priority-status-wrapper .status-dd,
.filterbar .priority-status-wrapper .priority {
  width: 100%;
  max-width: 307px;
  min-width: 220px;
}
@media screen and (max-width: 576px) {
  .filterbar .priority-status-wrapper .status-dd,
  .filterbar .priority-status-wrapper .priority {
    max-width: 100%;
  }
}
.filterbar .priority-status-wrapper .status-dd {
  margin-right: 20px;
}
@media screen and (max-width: 768px) {
  .filterbar .priority-status-wrapper .status-dd {
    margin-right: 0;
  }
}
.filterbar .priority-status-wrapper .priority {
  margin-right: 40px;
}
@media screen and (max-width: 768px) {
  .filterbar .priority-status-wrapper .priority {
    margin-right: 0;
  }
}
.filterbar .search-container {
  display: flex;
  align-items: center;
  margin-top: 10px;
  flex: 1;
  max-width: 400px;
}
@media screen and (max-width: 768px) {
  .filterbar .search-container {
    margin-top: 0;
    max-width: 100%;
  }
}

#loading-bar,
.no-event {
  border-radius: 5px;
  background: #ffffff;
  padding: 24px;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.05);
  margin-bottom: 24px;
  text-align: center;
}

.flex-table-cell.bold {
  flex: 2;
  color: #000000;
  font-family: Eina03-SemiBold;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  position: relative;
  min-height: 2.5rem;
}
.flex-table-cell.bold .experience-title-link {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  line-height: 1.3;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.flex-table-cell.bold .experience-title-link .experience-title-name {
  display: block;
  margin: 0 0 2px 0;
}
.flex-table-cell.bold .experience-title-link .experience_text {
  margin: 0;
}
.flex-table-cell.bold .experience-title-link:hover {
  text-decoration: underline;
}

.flex-table-body .flex-table-row {
  align-items: center;
}

.flex-table-cell:last-of-type .dropdown {
  display: flex;
  justify-content: flex-end;
}

.flex-table {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow-x: auto;
  padding-bottom: 80px;
}
.flex-table .control-wrapper {
  display: flex;
  align-items: center;
  gap: 24px;
}

.flex-table-row {
  display: flex;
  width: 100%;
  min-width: -moz-fit-content;
  min-width: fit-content;
  flex: 1 0 auto;
  padding: 20px 14px;
  border-bottom: 1px solid #e5e7eb;
  background: #ffffff;
}

.flex-table-header {
  background-color: #f3f4f6;
  font-weight: bold;
  padding: 0 14px;
}
.flex-table-header .flex-table-cell {
  color: #323232;
  font-family: Inter;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  display: flex;
  align-items: center;
}
.flex-table-header .flex-table-cell:first-of-type {
  flex: 2;
}

.flex-table-cell {
  flex: 1;
  min-width: 50px;
  padding: 10px;
  text-align: left;
}
.flex-table-cell .categories-cell {
  padding: 14px 22px;
  font-size: 18px;
  text-decoration: none;
  font-family: "Eina03-SemiBold";
  background: #fc2d38;
  color: #ffffff;
  height: -moz-fit-content;
  height: fit-content;
  border-radius: 2px;
  padding: 8px 16px;
  font-size: 16px;
  border: none;
  outline: none;
}
.flex-table-cell .categories-cell:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.flex-table-cell .categories-cell:hover:not(:disabled) {
  background-color: #f30310;
}

.status {
  padding: 5px 10px;
  border-radius: 12px;
  font-size: 12px;
  margin-left: 10px;
}

.inprogress,
.successful,
.import-successful,
.current {
  background-color: #def7ec;
  color: #046c4e;
  text-align: center;
  font-family: Inter;
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 2px 12px;
  margin-left: 8px;
  border-radius: 2px;
}

.draft,
.pending-processing,
.reading-file,
.pending-approval,
.loading-data,
.past {
  background-color: #f3f4f6;
  color: #6b7280;
  text-align: center;
  font-family: Inter;
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 2px 12px;
  margin-left: 8px;
  border-radius: 2px;
}

.canceled,
.failed,
.loader-error,
.matching-error,
.import-file-read-error,
.data-import-error {
  background-color: #fde8e8;
  color: #fc2d38;
  text-align: center;
  font-family: Inter;
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 2px 12px;
  margin-left: 8px;
  border-radius: 2px;
}

.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown:hover .dropdown-content {
  display: block;
}
.dropdown .dropbtn {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  align-self: stretch;
  font-size: 25px;
  letter-spacing: 2px;
  line-height: 0.5;
}
.dropdown .dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 9999;
  border-radius: 2px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  box-shadow: 0px 7px 12.9px 0px rgba(0, 0, 0, 0.05);
  padding: 4px 0;
  min-width: 147px;
  max-height: 300px;
  overflow-y: auto;
}
@media (max-height: 600px) {
  .dropdown .dropdown-content {
    top: auto;
    bottom: 100%;
  }
}
.dropdown .dropdown-content a {
  color: black;
  padding: 8px 16px;
  text-decoration: none;
  display: block;
}
.dropdown .dropdown-content a:hover {
  font-weight: 700;
}

.table-container {
  border-radius: 5px;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

@media screen and (max-width: 768px) {
  .flex-table-body .flex-table-cell:first-of-type {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .upcoming,
  .completed {
    margin-left: 0;
    margin-top: 4px;
  }
  .filterbar {
    flex-direction: column-reverse;
  }
  .status-dd {
    margin-right: 0;
    margin-top: 30px;
    margin-bottom: 20px;
    min-width: 100%;
  }
  .search-container {
    min-width: 100%;
  }
}
@media screen and (max-width: 668px) {
  .flex-table {
    width: auto;
  }
}
.vieweditbutton {
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 400px;
  text-decoration: none;
  background: #e5e7eb;
  color: #4b5563;
  border: 0;
  outline: 0;
  border-radius: 2px;
}

.status-draft {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 20px;
  padding: 14px 8px;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 15px;
  letter-spacing: 0.03em;
  text-align: center;
  background-color: #f3f4f6;
  color: #4b5563;
  border-radius: 2px 0px 0px 0px;
  border: none;
  outline: none;
  gap: 0;
  opacity: 1;
}
.status-draft:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.status-active {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 20px;
  padding: 14px 8px;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 15px;
  letter-spacing: 0.03em;
  text-align: center;
  background-color: #def7ec;
  color: #046c4e;
  border-radius: 2px 0px 0px 0px;
  border: none;
  outline: none;
  gap: 0;
  opacity: 1;
}
.status-active:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.completed,
.successful,
.import-successful {
  background-color: #000000;
  color: #ffffff;
  text-align: center;
  font-family: Inter;
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 2px 12px;
  margin-left: 8px;
  border-radius: 2px;
}

.completed,
.successful,
.import-successful {
  background-color: #000000;
  color: #ffffff;
  text-align: center;
  font-family: Inter;
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 2px 12px;
  margin-left: 8px;
  border-radius: 2px;
}

.upcoming,
.successful,
.import-successful {
  background-color: #e1effe;
  color: #1a56db;
  text-align: center;
  font-family: Inter;
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 2px 12px;
  margin-left: 8px;
  border-radius: 2px;
}

.outreach {
  background-color: #fc2d38;
  color: #ffffff;
  text-align: center;
  font-family: Inter;
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 2px 12px;
  margin-left: 8px;
  border-radius: 2px;
}

.growthjourney {
  background-color: #ced7d8;
  color: #000000;
  text-align: center;
  font-family: Inter;
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 2px 12px;
  margin-left: 8px;
  border-radius: 2px;
}

.generic {
  background-color: #3e8696;
  color: #ffffff;
  text-align: center;
  font-family: Inter;
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 2px 12px;
  margin-left: 8px;
  border-radius: 2px;
}

.ongoingengagement {
  background-color: #0f425b;
  color: #ffffff;
  text-align: center;
  font-family: Inter;
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 2px 12px;
  margin-left: 8px;
  border-radius: 2px;
}

.experience_text {
  font-family: "Eina03-Regular", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 16.27px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  color: #3d3d3d;
}

.calendar-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.calendar-button .calendar-icon {
  width: 24px;
  /* Adjust size as needed */
  height: 24px;
}

button {
  background: none;
  /* Removes background color */
  border: none;
  /* Removes the border */
  padding: 0;
  /* Removes extra space */
  cursor: pointer;
  /* Adds a pointer cursor for better UX */
}

button i {
  font-family: "Font Awesome 5 Free";
  /* Make sure this matches your FontAwesome version */
  font-weight: 400;
  /* For regular icons, use 400; for solid icons, use 900 */
  font-size: 15px;
  /* Adjust icon size as needed */
  color: black;
  /* Adjust the color of the icon */
}

.toolbox-links {
  display: flex;
  gap: 10px;
  /* Adds space between buttons */
  align-items: center;
  /* Ensures buttons align vertically */
}

.calendar-view-btn,
.list-view-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 10px;
  width: 207px;
  height: 40px;
  font-family: "Eina03-SemiBold";
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  outline: none;
  gap: 16px;
  border-radius: 2px 0px 0px 0px;
  color: gray;
  font-size: 16px;
  font-weight: 400;
}

.calendar-view-btn i,
.list-view-btn i {
  color: #4f4f4f;
}

.create-toolbox-btn {
  max-width: 226px;
  font-family: "Eina03-SemiBold";
  background-color: #fc2d38;
  border: none;
  outline: none;
  padding: 8px 16px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 400;
}
.create-toolbox-btn span {
  margin-right: 16px;
}
.create-toolbox-btn:hover {
  background-color: #f30310;
}
@media screen and (max-width: 767px) {
  .create-toolbox-btn {
    margin: 0;
  }
}
@media screen and (max-width: 480px) {
  .create-toolbox-btn {
    padding: 8px 22px;
    font-size: 16px;
  }
}

.pagination-container {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important; /* Ensure vertical centering */
  margin: 20px 0;
  width: 100%;
}

.pagination {
  display: flex;
  list-style-type: none;
  padding: 0;
  margin: 0 auto;
}

.pagination .pagination-number {
  width: 31px;
  height: 33px;
  padding: var(--15) var(--3);
  gap: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  margin: 0;
}

.pagination .pagination-number a {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  text-align: center;
  text-decoration: none;
  display: block;
  width: 100%;
  height: 100%;
  line-height: 21px;
  color: grey;
}

.pagination .pagination-number a:hover {
  background-color: #e1effe;
  color: #1a56db;
}

.pagination .arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 33px;
  opacity: 1;
  background-color: transparent;
  margin: 0;
}

.pagination .arrow a {
  background-color: transparent;
  padding: 0;
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 33px;
  color: grey;
  font-size: 20px;
}

.pagination .arrow a:hover {
  background-color: #f0f0f0;
  color: #333;
}

.calendar-container {
  position: relative;
  top: -50px;
}

.archived,
.failed,
.loader-error,
.matching-error,
.import-file-read-error,
.data-import-error {
  background-color: rgb(207, 156, 156);
  color: #fc2d38;
  text-align: center;
  font-family: Inter;
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 2px 12px;
  margin-left: 8px;
  border-radius: 2px;
}

.no-data-message {
  text-align: center;
  font-size: 1.4rem;
  color: #555;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.calendar-container-wrap {
  margin-top: 24px;
  display: flex;
  gap: 20px;
  /* Space between the checkboxes and calendar */
}

/* Style for the checkbox container */
.checkbox-container {
  width: 13%;
  /* Adjust as needed for the left panel width */
  display: flex;
  flex-direction: column;
  /* Align items vertically */
  gap: 10px;
  /* Space between checkboxes */
}

/* Style for each checkbox label */
.checkbox-container label {
  font-weight: 600;
  display: flex;
  align-items: center;
  /* Aligns the checkbox and label text vertically */
  gap: 8px;
  /* Adds spacing between the checkbox and the label text */
  font-size: 14px;
  /* Adjust font size for label text */
  cursor: pointer;
}

.filter-label {
  font-size: 14px;
  margin-bottom: 10px;
  /* Space between the label and the first checkbox */
  color: #333;
  /* Optional: Enhance visual hierarchy */
}

input[type=checkbox] {
  width: 24px;
  height: 24px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  /* Remove default checkbox style */
  border: 1px solid #ccc;
  border-radius: 3px;
  /* Rounded corners for checkboxes */
  cursor: pointer;
  display: inline-block;
  /* Ensures the checkbox is treated as an inline element */
  vertical-align: middle;
  /* Aligns the checkbox with the label text */
  position: relative;
  /* Needed for the checkmark placement */
}
input[type=checkbox] .custom-popup {
  max-width: 300px;
  font-size: 14px;
  color: #333;
}
input[type=checkbox] .custom-popup h3 {
  margin-top: 0;
  font-size: 18px;
  color: #000;
}
input[type=checkbox] .custom-popup p {
  margin: 5px 0;
}
input[type=checkbox] .custom-popup .close-popup {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 5px;
}
input[type=checkbox] .custom-popup .close-popup:hover {
  background-color: #0056b3;
}

/* Styling for the checkmark when checked */
input[type=checkbox]:checked::after {
  content: "✔";
  /* Checkmark symbol */
  font-size: 18px;
  color: #ffffff;
  /* White checkmark */
  position: absolute;
  top: 50%;
  /* Center the checkmark vertically */
  left: 50%;
  /* Center the checkmark horizontally */
  transform: translate(-50%, -50%);
  /* Centering adjustment */
}

#allCategories {
  background: #000000;
  /* Black */
}

.categoryFilter.generic {
  background: #3e8696;
  /* Teal */
}

.categoryFilter.outreach {
  background: #fc2d38;
  /* Red */
}

.categoryFilter.ongoing {
  background: #0f425b;
  /* Navy Blue */
}

.categoryFilter.growth {
  background: #828282;
  /* Gray */
}

.custom-popup {
  position: absolute;
  z-index: 9999;
  background: white;
  border: 1px solid #ccc;
  padding: 20px;
  width: 400px;
  max-width: 90vw; /* Allow it to shrink on small screens */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  box-sizing: border-box;
  word-wrap: break-word;
}

.custom-popup h3 {
  font-size: 24px;
  margin: 10px 0;
  font-weight: bold;
}

.custom-popup .icon-calendar,
.custom-popup .icon-address {
  font-size: 16px;
  margin-right: 5px;
}

.custom-popup .close-popup {
  background: #007bff;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  margin-top: 10px;
  float: right;
}

.custom-popup .status-badge {
  padding: 5px 10px;
  border-radius: 3px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #000;
}

@media (max-width: 400px) {
  .custom-popup {
    width: 90vw;
    padding: 16px;
  }
  .custom-popup h3 {
    font-size: 18px;
  }
  .custom-popup .close-popup {
    font-size: 14px;
    padding: 4px 8px;
  }
  .custom-popup .status-badge {
    font-size: 12px;
    padding: 4px 6px;
  }
}
@media (max-width: 768px) {
  .calendar-container-wrap {
    flex-direction: column;
  }
  .checkbox-container,
  .calendar-container {
    width: 100%;
    /* Full width for both sections */
  }
}
.custom-toast-position {
  top: 130px !important;
  right: 30px !important;
}

.archive-btn.disabled {
  pointer-events: none;
  opacity: 0.6;
  cursor: not-allowed;
}

.spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.fc-event-container .fc-time {
  display: none !important;
}

/* Style for the dropdown */
.fc-month-year-dropdown {
  margin-top: 3px;
  position: relative;
  font-family: Eina03-SemiBold;
  font-size: 18px;
  font-weight: 400;
  line-height: 24.48px;
  text-align: left;
  color: #000000;
  padding-right: 25px; /* Adjust for the space needed for the arrow */
}

/* Arrow style using Font Awesome */
.fc-month-year-dropdown .fa-chevron-down {
  font-size: 12px; /* Adjust the size of the arrow */
  position: absolute;
  right: 10px; /* Position the arrow on the right */
  top: 50%;
  transform: translateY(-50%);
  color: #000000; /* Adjust the color */
}

.text-green {
  color: #0e9f6e;
}

.label-col {
  width: 200px;
  flex-shrink: 0;
}

.value-col {
  flex: 1;
  text-align: right;
}

.form-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.label-col,
.value-col {
  font-weight: bold;
}

.font-weight-bold {
  font-weight: bold;
}

.view-icon {
  color: #007bff; /* Blue for the view icon */
  font-weight: bold; /* Slightly bolder appearance */
  margin-left: 12px;
}

.icon-text {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: #007bff;
  font-weight: bold;
  margin-right: 15px;
}

.icon-text .icon {
  width: 20px;
  margin-left: 8px;
}

.no-data-message {
  justify-content: center; /* center horizontally in flex */
  align-items: center; /* center vertically */
  display: flex;
  font-style: italic;
  color: #666;
  font-size: 16px;
}