body {
  margin: 0;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
    Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container {
  font-size: 3rem;
  margin: auto;
  margin: 25px;
}

.panel-buttons {
  padding: 25px 0;
  float: right;
}

.required {
  color: brown;
}

.icon-button-contextual-menu [data-icon-name="ChevronDown"] {
  display: none;
}

.flex-container {
  display: flex;
  flex-direction: row;
  font-size: 24px;
}

.flex-item-left {
  padding: 10px;
  flex: 90%;
  text-align: left;
}

.flex-item-right {
  padding: 10px;
  flex: 10%;
  text-align: right;
}

.logout-icon {
  transform: scale(-1, 1);
}

.search-box {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-radius: 4px;
  padding: 8px;
}

/* Responsive layout - makes a one column-layout instead of two-column layout */
@media (width <= 800px) {
  .flex-container {
    flex-direction: column;
  }
}

.page-header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16;
}

.page-header-title {
  font-size: 2rem;
  margin: 0 auto;
  padding-left: 15px;
  color: #5a5a5a;
  font-weight: 500;
}

.centered-row {
  display: flex;
  align-items: center;
  height: 100%;
}

.default-values-dialog .ms-Dialog-main {
  width: 850px !important;
  max-width: 850px !important;
  min-width: 850px !important;
  min-height: 360px;
  height: auto;
}

.default-values-dialog .ms-Dialog-inner,
.default-values-dialog .ms-Dialog-content,
.default-values-dialog .ms-Dialog-main {
  height: auto;
}

.default-values-dialog-content {
  display: flex;
  flex-direction: column;
  min-height: 360px;
}

.default-values-dialog-footer {
  margin-top: auto;
}

.seed-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
}

.seed-badge-success {
  background-color: #dff6dd;
  color: #107c10;
}

.seed-badge-failure {
  background-color: #fde7e9;
  color: #a4262c;
}
/* Reset and base styles for the new layout */
.container {
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* Ensure body and html take full height */
html,
body,
#root {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

/* Remove default Create React App styles that interfere with layout */
.App {
  text-align: left; /* Changed from center to left for better admin layout */
}

/* Keep the logo animation for any potential future use */
.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

/* Updated header styles */
.App-header {
  background-color: #0078d4;
  min-height: 60px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  color: white;
  padding: 0 24px;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Additional styles for better admin interface */
.panel-buttons {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 20px;
}

/* Common page header container style */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  border-bottom: 1px solid #ccc;
  gap: 8px;
}

/* Common page title style */
.page-title {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #323130;
  padding: 16px;
}

/* Common page breadcrumb title style (with bottom margin) */
.page-breadcrumb-title {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #323130;
  margin-bottom: 4px;
}

/* Common breadcrumb left section style */
.breadcrumb-left-section {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px;
}

/* Responsive design helpers */
@media (width <= 768px) {
  .container {
    overflow-x: hidden;
  }
}
:root {
  --toastify-color-light: #fff;
  --toastify-color-dark: #121212;
  --toastify-color-info: #3498db;
  --toastify-color-success: #07bc0c;
  --toastify-color-warning: #f1c40f;
  --toastify-color-error: #e74c3c;
  --toastify-color-transparent: rgba(255, 255, 255, 0.7);
  --toastify-icon-color-info: var(--toastify-color-info);
  --toastify-icon-color-success: var(--toastify-color-success);
  --toastify-icon-color-warning: var(--toastify-color-warning);
  --toastify-icon-color-error: var(--toastify-color-error);
  --toastify-toast-width: 320px;
  --toastify-toast-offset: 16px;
  --toastify-toast-top: max(var(--toastify-toast-offset), env(safe-area-inset-top));
  --toastify-toast-right: max(var(--toastify-toast-offset), env(safe-area-inset-right));
  --toastify-toast-left: max(var(--toastify-toast-offset), env(safe-area-inset-left));
  --toastify-toast-bottom: max(var(--toastify-toast-offset), env(safe-area-inset-bottom));
  --toastify-toast-background: #fff;
  --toastify-toast-min-height: 64px;
  --toastify-toast-max-height: 800px;
  --toastify-toast-bd-radius: 6px;
  --toastify-font-family: sans-serif;
  --toastify-z-index: 9999;
  --toastify-text-color-light: #757575;
  --toastify-text-color-dark: #fff;
  --toastify-text-color-info: #fff;
  --toastify-text-color-success: #fff;
  --toastify-text-color-warning: #fff;
  --toastify-text-color-error: #fff;
  --toastify-spinner-color: #616161;
  --toastify-spinner-color-empty-area: #e0e0e0;
  --toastify-color-progress-light: linear-gradient(
    to right,
    #4cd964,
    #5ac8fa,
    #007aff,
    #34aadc,
    #5856d6,
    #ff2d55
  );
  --toastify-color-progress-dark: #bb86fc;
  --toastify-color-progress-info: var(--toastify-color-info);
  --toastify-color-progress-success: var(--toastify-color-success);
  --toastify-color-progress-warning: var(--toastify-color-warning);
  --toastify-color-progress-error: var(--toastify-color-error);
  --toastify-color-progress-bgo: 0.2;
}

.Toastify__toast-container {
  z-index: var(--toastify-z-index);
  -webkit-transform: translate3d(0, 0, var(--toastify-z-index));
  position: fixed;
  padding: 4px;
  width: var(--toastify-toast-width);
  box-sizing: border-box;
  color: #fff;
}
.Toastify__toast-container--top-left {
  top: var(--toastify-toast-top);
  left: var(--toastify-toast-left);
}
.Toastify__toast-container--top-center {
  top: var(--toastify-toast-top);
  left: 50%;
  transform: translateX(-50%);
}
.Toastify__toast-container--top-right {
  top: var(--toastify-toast-top);
  right: var(--toastify-toast-right);
}
.Toastify__toast-container--bottom-left {
  bottom: var(--toastify-toast-bottom);
  left: var(--toastify-toast-left);
}
.Toastify__toast-container--bottom-center {
  bottom: var(--toastify-toast-bottom);
  left: 50%;
  transform: translateX(-50%);
}
.Toastify__toast-container--bottom-right {
  bottom: var(--toastify-toast-bottom);
  right: var(--toastify-toast-right);
}

@media only screen and (max-width : 480px) {
  .Toastify__toast-container {
    width: 100vw;
    padding: 0;
    left: env(safe-area-inset-left);
    margin: 0;
  }
  .Toastify__toast-container--top-left, .Toastify__toast-container--top-center, .Toastify__toast-container--top-right {
    top: env(safe-area-inset-top);
    transform: translateX(0);
  }
  .Toastify__toast-container--bottom-left, .Toastify__toast-container--bottom-center, .Toastify__toast-container--bottom-right {
    bottom: env(safe-area-inset-bottom);
    transform: translateX(0);
  }
  .Toastify__toast-container--rtl {
    right: env(safe-area-inset-right);
    left: initial;
  }
}
.Toastify__toast {
  --y: 0;
  position: relative;
  -ms-touch-action: none;
      touch-action: none;
  min-height: var(--toastify-toast-min-height);
  box-sizing: border-box;
  margin-bottom: 1rem;
  padding: 8px;
  border-radius: var(--toastify-toast-bd-radius);
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  max-height: var(--toastify-toast-max-height);
  font-family: var(--toastify-font-family);
  cursor: default;
  direction: ltr;
  /* webkit only issue #791 */
  z-index: 0;
  overflow: hidden;
}
.Toastify__toast--stacked {
  position: absolute;
  width: 100%;
  transform: translate3d(0, var(--y), 0) scale(var(--s));
  transition: transform 0.3s;
}
.Toastify__toast--stacked[data-collapsed] .Toastify__toast-body, .Toastify__toast--stacked[data-collapsed] .Toastify__close-button {
  transition: opacity 0.1s;
}
.Toastify__toast--stacked[data-collapsed=false] {
  overflow: visible;
}
.Toastify__toast--stacked[data-collapsed=true]:not(:last-child) > * {
  opacity: 0;
}
.Toastify__toast--stacked:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: calc(var(--g) * 1px);
  bottom: 100%;
}
.Toastify__toast--stacked[data-pos=top] {
  top: 0;
}
.Toastify__toast--stacked[data-pos=bot] {
  bottom: 0;
}
.Toastify__toast--stacked[data-pos=bot].Toastify__toast--stacked:before {
  transform-origin: top;
}
.Toastify__toast--stacked[data-pos=top].Toastify__toast--stacked:before {
  transform-origin: bottom;
}
.Toastify__toast--stacked:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  transform: scaleY(3);
  z-index: -1;
}
.Toastify__toast--rtl {
  direction: rtl;
}
.Toastify__toast--close-on-click {
  cursor: pointer;
}
.Toastify__toast-body {
  margin: auto 0;
  -ms-flex: 1 1 auto;
      flex: 1 1 auto;
  padding: 6px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
}
.Toastify__toast-body > div:last-child {
  word-break: break-word;
  -ms-flex: 1;
      flex: 1;
}
.Toastify__toast-icon {
  -webkit-margin-end: 10px;
          margin-inline-end: 10px;
  width: 20px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -ms-flexbox;
  display: flex;
}

.Toastify--animate {
  animation-fill-mode: both;
  animation-duration: 0.5s;
}

.Toastify--animate-icon {
  animation-fill-mode: both;
  animation-duration: 0.3s;
}

@media only screen and (max-width : 480px) {
  .Toastify__toast {
    margin-bottom: 0;
    border-radius: 0;
  }
}
.Toastify__toast-theme--dark {
  background: var(--toastify-color-dark);
  color: var(--toastify-text-color-dark);
}
.Toastify__toast-theme--light {
  background: var(--toastify-color-light);
  color: var(--toastify-text-color-light);
}
.Toastify__toast-theme--colored.Toastify__toast--default {
  background: var(--toastify-color-light);
  color: var(--toastify-text-color-light);
}
.Toastify__toast-theme--colored.Toastify__toast--info {
  color: var(--toastify-text-color-info);
  background: var(--toastify-color-info);
}
.Toastify__toast-theme--colored.Toastify__toast--success {
  color: var(--toastify-text-color-success);
  background: var(--toastify-color-success);
}
.Toastify__toast-theme--colored.Toastify__toast--warning {
  color: var(--toastify-text-color-warning);
  background: var(--toastify-color-warning);
}
.Toastify__toast-theme--colored.Toastify__toast--error {
  color: var(--toastify-text-color-error);
  background: var(--toastify-color-error);
}

.Toastify__progress-bar-theme--light {
  background: var(--toastify-color-progress-light);
}
.Toastify__progress-bar-theme--dark {
  background: var(--toastify-color-progress-dark);
}
.Toastify__progress-bar--info {
  background: var(--toastify-color-progress-info);
}
.Toastify__progress-bar--success {
  background: var(--toastify-color-progress-success);
}
.Toastify__progress-bar--warning {
  background: var(--toastify-color-progress-warning);
}
.Toastify__progress-bar--error {
  background: var(--toastify-color-progress-error);
}
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--success, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--error {
  background: var(--toastify-color-transparent);
}

.Toastify__close-button {
  color: #fff;
  background: transparent;
  outline: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.7;
  transition: 0.3s ease;
  -ms-flex-item-align: start;
      align-self: flex-start;
  z-index: 1;
}
.Toastify__close-button--light {
  color: #000;
  opacity: 0.3;
}
.Toastify__close-button > svg {
  fill: currentColor;
  height: 16px;
  width: 14px;
}
.Toastify__close-button:hover, .Toastify__close-button:focus {
  opacity: 1;
}

@keyframes Toastify__trackProgress {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}
.Toastify__progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--toastify-z-index);
  opacity: 0.7;
  transform-origin: left;
  border-bottom-left-radius: var(--toastify-toast-bd-radius);
}
.Toastify__progress-bar--animated {
  animation: Toastify__trackProgress linear 1 forwards;
}
.Toastify__progress-bar--controlled {
  transition: transform 0.2s;
}
.Toastify__progress-bar--rtl {
  right: 0;
  left: initial;
  transform-origin: right;
  border-bottom-left-radius: initial;
  border-bottom-right-radius: var(--toastify-toast-bd-radius);
}
.Toastify__progress-bar--wrp {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  border-bottom-left-radius: var(--toastify-toast-bd-radius);
}
.Toastify__progress-bar--wrp[data-hidden=true] {
  opacity: 0;
}
.Toastify__progress-bar--bg {
  opacity: var(--toastify-color-progress-bgo);
  width: 100%;
  height: 100%;
}

.Toastify__spinner {
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 2px solid;
  border-radius: 100%;
  border-color: var(--toastify-spinner-color-empty-area);
  border-right-color: var(--toastify-spinner-color);
  animation: Toastify__spin 0.65s linear infinite;
}

@keyframes Toastify__bounceInRight {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    transform: translate3d(10px, 0, 0);
  }
  90% {
    transform: translate3d(-5px, 0, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutRight {
  20% {
    opacity: 1;
    transform: translate3d(-20px, var(--y), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(2000px, var(--y), 0);
  }
}
@keyframes Toastify__bounceInLeft {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
  }
  75% {
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    transform: translate3d(5px, 0, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutLeft {
  20% {
    opacity: 1;
    transform: translate3d(20px, var(--y), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(-2000px, var(--y), 0);
  }
}
@keyframes Toastify__bounceInUp {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  90% {
    transform: translate3d(0, -5px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes Toastify__bounceOutUp {
  20% {
    transform: translate3d(0, calc(var(--y) - 10px), 0);
  }
  40%, 45% {
    opacity: 1;
    transform: translate3d(0, calc(var(--y) + 20px), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
}
@keyframes Toastify__bounceInDown {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }
  75% {
    transform: translate3d(0, -10px, 0);
  }
  90% {
    transform: translate3d(0, 5px, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutDown {
  20% {
    transform: translate3d(0, calc(var(--y) - 10px), 0);
  }
  40%, 45% {
    opacity: 1;
    transform: translate3d(0, calc(var(--y) + 20px), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
}
.Toastify__bounce-enter--top-left, .Toastify__bounce-enter--bottom-left {
  animation-name: Toastify__bounceInLeft;
}
.Toastify__bounce-enter--top-right, .Toastify__bounce-enter--bottom-right {
  animation-name: Toastify__bounceInRight;
}
.Toastify__bounce-enter--top-center {
  animation-name: Toastify__bounceInDown;
}
.Toastify__bounce-enter--bottom-center {
  animation-name: Toastify__bounceInUp;
}

.Toastify__bounce-exit--top-left, .Toastify__bounce-exit--bottom-left {
  animation-name: Toastify__bounceOutLeft;
}
.Toastify__bounce-exit--top-right, .Toastify__bounce-exit--bottom-right {
  animation-name: Toastify__bounceOutRight;
}
.Toastify__bounce-exit--top-center {
  animation-name: Toastify__bounceOutUp;
}
.Toastify__bounce-exit--bottom-center {
  animation-name: Toastify__bounceOutDown;
}

@keyframes Toastify__zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
@keyframes Toastify__zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: translate3d(0, var(--y), 0) scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}
.Toastify__zoom-enter {
  animation-name: Toastify__zoomIn;
}

.Toastify__zoom-exit {
  animation-name: Toastify__zoomOut;
}

@keyframes Toastify__flipIn {
  from {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    animation-timing-function: ease-in;
  }
  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    transform: perspective(400px);
  }
}
@keyframes Toastify__flipOut {
  from {
    transform: translate3d(0, var(--y), 0) perspective(400px);
  }
  30% {
    transform: translate3d(0, var(--y), 0) perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  to {
    transform: translate3d(0, var(--y), 0) perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}
.Toastify__flip-enter {
  animation-name: Toastify__flipIn;
}

.Toastify__flip-exit {
  animation-name: Toastify__flipOut;
}

@keyframes Toastify__slideInRight {
  from {
    transform: translate3d(110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}
@keyframes Toastify__slideInLeft {
  from {
    transform: translate3d(-110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}
@keyframes Toastify__slideInUp {
  from {
    transform: translate3d(0, 110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}
@keyframes Toastify__slideInDown {
  from {
    transform: translate3d(0, -110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}
@keyframes Toastify__slideOutRight {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(110%, var(--y), 0);
  }
}
@keyframes Toastify__slideOutLeft {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(-110%, var(--y), 0);
  }
}
@keyframes Toastify__slideOutDown {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, 500px, 0);
  }
}
@keyframes Toastify__slideOutUp {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, -500px, 0);
  }
}
.Toastify__slide-enter--top-left, .Toastify__slide-enter--bottom-left {
  animation-name: Toastify__slideInLeft;
}
.Toastify__slide-enter--top-right, .Toastify__slide-enter--bottom-right {
  animation-name: Toastify__slideInRight;
}
.Toastify__slide-enter--top-center {
  animation-name: Toastify__slideInDown;
}
.Toastify__slide-enter--bottom-center {
  animation-name: Toastify__slideInUp;
}

.Toastify__slide-exit--top-left, .Toastify__slide-exit--bottom-left {
  animation-name: Toastify__slideOutLeft;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}
.Toastify__slide-exit--top-right, .Toastify__slide-exit--bottom-right {
  animation-name: Toastify__slideOutRight;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}
.Toastify__slide-exit--top-center {
  animation-name: Toastify__slideOutUp;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}
.Toastify__slide-exit--bottom-center {
  animation-name: Toastify__slideOutDown;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

@keyframes Toastify__spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/*# sourceMappingURL=ReactToastify.css.map *//* PCSPagination Component Styles */
._pagination-footer_13gwt_2 {
  padding: 16px;
  border-top: 1px solid var(--freight-border-light, #edebe9);
  margin-top: 16px;
  display: flex;
  align-items: flex-start;
}

@media (width <= 768px) {
  ._pagination-footer_13gwt_2 {
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }

  ._pagination-footer_13gwt_2 > * {
    width: 100%;
    justify-content: center;
  }
}

._pagination-controls_13gwt_23 {
  user-select: none;
}

._pagination-button_13gwt_27 {
  min-width: 32px;
  height: 32px;
  border-radius: 4px;
  border: 1px solid #d1d1d1;
  background-color: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
}

._pagination-button_13gwt_27:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._pagination-button_13gwt_27:hover:not(:disabled) {
  background-color: #f3f2f1;
  border-color: #c7c6c4;
}

._page-number_13gwt_47 {
  min-width: 32px;
  height: 32px;
  border-radius: 4px;
  border: 1px solid #d1d1d1;
  background-color: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
  justify-content: center;
}

._page-number_13gwt_47:hover {
  background-color: #f3f2f1;
  border-color: #c7c6c4;
}

._page-number-active_13gwt_63 {
  min-width: 32px;
  height: 32px;
  border-radius: 4px;
  border: 1px solid var(--pcs-theme-primary, #0078d4);
  background-color: var(--pcs-theme-primary, #0078d4);
  color: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
  justify-content: center;
}

._page-number-active_13gwt_63:hover {
  background-color: var(--pcs-theme-dark, #005a9e);
  border-color: var(--pcs-theme-dark, #005a9e);
}

._pagination-dots_13gwt_80 {
  min-width: 32px;
  height: 32px;
  cursor: pointer;
  justify-content: center;
  color: #666;
  transition: color 0.2s ease;
}
/* PCSTable Component Styles */
._pcs-table_1sbv0_2 {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  min-height: 0;
  width: 100%;
}

/* Table Container */
._table-container_1sbv0_11,
._table-container-expanded_1sbv0_12,
._table-container-fill_1sbv0_13 {
  flex: 1 1 auto;
  position: relative;
  overflow-x: auto;
  border: 1px solid var(--freight-border-light, #edebe9);
  border-radius: 4px;
  min-height: 0;
  width: 100%;
  min-width: 0;
}

._table-container_1sbv0_11 {
  max-height: calc(100vh - 400px);
}

._table-container-expanded_1sbv0_12 {
  max-height: calc(100vh - 265px);
}

/* Container-driven height: no viewport cap, so the table fills whatever the
   page gives it and scrolls internally. The border is dropped because a host
   that owns the scroll region draws its own card edge. */
._table-container-fill_1sbv0_13 {
  max-height: none;
  border: none;
}

/* Sticky header positioning */
._table-container_1sbv0_11 > * div[class*="ms-DetailsList-headerWrapper"],
._table-container-expanded_1sbv0_12 > * div[class*="ms-DetailsList-headerWrapper"],
._table-container-fill_1sbv0_13 > * div[class*="ms-DetailsList-headerWrapper"] {
  top: 0;
  position: sticky;
  z-index: 100;
}

/* Responsive table */
@media (width <= 768px) {
  ._table-container_1sbv0_11,
  ._table-container-expanded_1sbv0_12,
  ._table-container-fill_1sbv0_13 {
    overflow: auto;
  }
}

/* DetailsList overflow fix */
/* stylelint-disable-next-line selector-pseudo-class-no-unknown, selector-class-pattern -- CSS Modules :global() syntax required to target FluentUI .ms-DetailsList class */
._pcs-table_1sbv0_2 .ms-DetailsList {
  overflow: initial;
}

/* Sticky header background */
/* stylelint-disable-next-line selector-pseudo-class-no-unknown, selector-class-pattern -- CSS Modules :global() syntax required to target FluentUI sticky header classes */
._pcs-table_1sbv0_2 .ms-Sticky {
  background-color: #fff;
  z-index: 1;
}

/* Header styling */
/* stylelint-disable-next-line selector-pseudo-class-no-unknown, selector-class-pattern -- CSS Modules :global() syntax required to target FluentUI classes */
._pcs-table_1sbv0_2 .ms-DetailsHeader {
  background-color: #f8f9fa;
  border-bottom: 2px solid #0078d4;
}

/* stylelint-disable-next-line selector-pseudo-class-no-unknown, selector-class-pattern -- CSS Modules :global() syntax required to target FluentUI classes */
._pcs-table_1sbv0_2 .ms-DetailsHeader-cell {
  background-color: #f8f9fa;
  border-bottom: none;
  color: #323130;
  font-weight: 600;
  font-size: 13px;
}

/* stylelint-disable-next-line selector-pseudo-class-no-unknown, selector-class-pattern -- CSS Modules :global() syntax required to target FluentUI classes */
._pcs-table_1sbv0_2 .ms-DetailsHeader-cell:hover {
  background-color: #e1f5fe;
}

/* stylelint-disable-next-line selector-pseudo-class-no-unknown, selector-class-pattern -- CSS Modules :global() syntax required to target FluentUI classes */
._pcs-table_1sbv0_2 .ms-DetailsHeader-cellTitle {
  color: #323130;
  font-weight: 600;
}

/* stylelint-disable-next-line selector-pseudo-class-no-unknown, selector-class-pattern -- CSS Modules :global() syntax required to target FluentUI classes */
._pcs-table_1sbv0_2 .ms-DetailsHeader-cellName {
  font-size: 14px;
}

/* Sticky header when stuck */
/* stylelint-disable-next-line selector-pseudo-class-no-unknown, selector-class-pattern -- CSS Modules :global() syntax required to target FluentUI classes */
._pcs-table_1sbv0_2 .ms-Sticky .ms-DetailsHeader {
  background-color: #f8f9fa;
  border-bottom: 2px solid #0078d4;
}

/* stylelint-disable-next-line selector-pseudo-class-no-unknown, selector-class-pattern -- CSS Modules :global() syntax required to target FluentUI classes */
._pcs-table_1sbv0_2 .ms-Sticky .ms-DetailsHeader-cell {
  background-color: #f8f9fa;
  border-bottom: none;
}

/* stylelint-disable-next-line selector-pseudo-class-no-unknown, selector-class-pattern -- CSS Modules :global() syntax required to target FluentUI classes */
._pcs-table_1sbv0_2 .ms-Sticky--isSticky .ms-DetailsHeader {
  background-color: #f8f9fa;
  box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
}

/* stylelint-disable-next-line selector-pseudo-class-no-unknown, selector-class-pattern -- CSS Modules :global() syntax required to target FluentUI classes */
._pcs-table_1sbv0_2 .ms-Sticky--isSticky .ms-DetailsHeader-cell {
  background-color: #f8f9fa;
  border-bottom: none;
}

/* Empty state */
._empty-state_1sbv0_129 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
  text-align: center;
}

/* ── Clickable rows (opt in via `hasRowInteraction`) ──────────────────────
   Off by default so existing read-only tables keep their current look. */

/* stylelint-disable-next-line selector-pseudo-class-no-unknown, selector-class-pattern -- CSS Modules :global() syntax required to target FluentUI classes */
._rows-interactive_1sbv0_141 .ms-DetailsRow {
  cursor: pointer;
  border-bottom: 1px solid var(--freight-border-light, #edebe9);
}

/* stylelint-disable-next-line selector-pseudo-class-no-unknown, selector-class-pattern -- CSS Modules :global() syntax required to target FluentUI classes */
._rows-interactive_1sbv0_141 .ms-DetailsRow:hover {
  background-color: #f3f2f1;
}

/* Pinned first column (opt in with PCSTableColumn.isPinned). PCSTable adds
   these classes, and .pinned-container, only when a column is pinned, so
   other tables never match. The scoped rules' extra class also outranks the
   single-class `position: relative` that Fluent's merge-styles puts on cells.

   Each shadow layer is its own custom property, so the accent, scroll and
   print rules each switch one layer without restating the others. The
   defaults sit on a single class so that every state rule outranks them
   wherever it appears. An unused layer is a transparent zero shadow: `none`
   inside a list would invalidate the whole declaration. */
._pinned-cell_1sbv0_161,
._pinned-header-cell_1sbv0_162 {
  --pcs-pin-accent: 0 0 0 transparent;
  --pcs-pin-edge: 1px 0 0 var(--freight-border-light, #edebe9);
  --pcs-pin-scroll: 0 0 0 transparent;
}

._pinned-container_1sbv0_152 ._pinned-cell_1sbv0_161,
._pinned-container_1sbv0_152 ._pinned-header-cell_1sbv0_162 {
  position: sticky;
  left: 0;
  box-shadow: var(--pcs-pin-accent), var(--pcs-pin-edge), var(--pcs-pin-scroll);
}

._pinned-container_1sbv0_152 ._pinned-cell_1sbv0_161 {
  z-index: 2;
  background-color: inherit;
}

._pinned-container_1sbv0_152 ._pinned-header-cell_1sbv0_162 {
  z-index: 3;
  background-color: #f8f9fa;
}

/* The pinned column sits beside Fluent's checkbox column, whose width is
   Fluent's CHECK_CELL_WIDTH, published by PCSTable as a custom property. */
._pinned-container_1sbv0_152 ._pinned-after-check_1sbv0_187 {
  left: var(--pcs-check-cell-width);
}

/* Fluent paints each row's colour on .ms-DetailsRow, but the -fields wrapper
   between the row and its cells is transparent. Without this, a pinned
   cell's `inherit` never reaches the row colour, and the scrolled cells'
   text shows through the pinned cell. Inheriting (rather than a fixed
   white) also keeps the pinned cell in step with hover and selection. */
/* stylelint-disable-next-line selector-pseudo-class-no-unknown, selector-class-pattern -- CSS Modules :global() syntax required to target FluentUI classes */
._pinned-container_1sbv0_152 .ms-DetailsRow-fields {
  background-color: inherit;
}

/* The checkbox column comes before the pinned column, so it pins too, or
   the pinned column would slide over the checkboxes. */
/* stylelint-disable-next-line selector-pseudo-class-no-unknown, selector-class-pattern -- CSS Modules :global() syntax required to target FluentUI classes */
._pinned-container_1sbv0_152 .ms-DetailsRow-cellCheck {
  position: sticky;
  left: 0;
  z-index: 2;
  background-color: inherit;
}

/* stylelint-disable-next-line selector-pseudo-class-no-unknown, selector-class-pattern -- CSS Modules :global() syntax required to target FluentUI classes */
._pinned-container_1sbv0_152 .ms-DetailsHeader-cellIsCheck {
  position: sticky;
  left: 0;
  z-index: 3;
  background-color: #f8f9fa;
}

/* Fluent draws a keyboard-focused row's ring as an ::after at z-index 1, so
   the opaque pinned cells (z-index 2) would hide it across their width. The
   ring is lifted above them. The focus-visible prefix mirrors Fluent's own
   selector, so this rule is the more specific one. Above the cells, the ring
   would catch clicks meant for the Load # link, so it ignores the pointer. */
/* stylelint-disable selector-pseudo-class-no-unknown, selector-class-pattern -- CSS Modules :global() syntax required to target FluentUI classes */
.ms-Fabric--isFocusVisible
  ._pinned-container_1sbv0_152
  .ms-DetailsRow:focus::after {
  z-index: 3;
  pointer-events: none;
}
/* stylelint-enable selector-pseudo-class-no-unknown, selector-class-pattern */

._is-scrolled-horizontally_1sbv0_233 ._pinned-cell_1sbv0_161,
._is-scrolled-horizontally_1sbv0_233 ._pinned-header-cell_1sbv0_162 {
  --pcs-pin-scroll: 4px 0 8px -4px rgb(0 0 0 / 15%);

  clip-path: inset(0 -8px 0 0);
}

/* The row colour bar moves from the row wrapper onto the first pinned cell.
   PCSTable sets --pcs-row-accent on the wrapper, so the bar stays visible
   while the row scrolls sideways under the pin. */
._pinned-container_1sbv0_152 ._pinned-accent-cell_1sbv0_243 {
  --pcs-pin-accent: inset 3px 0 0 var(--pcs-row-accent, transparent);
}

/* With a checkbox column, the checkbox cell is the first pinned cell, so it
   carries the bar instead of the row's left border. */
/* stylelint-disable-next-line selector-pseudo-class-no-unknown, selector-class-pattern -- CSS Modules :global() syntax required to target FluentUI classes */
._has-pinned-accent_1sbv0_250 .ms-DetailsRow-cellCheck {
  box-shadow: inset 3px 0 0 var(--pcs-row-accent, transparent);
}

/* Fluent renders the resize handle as a separate element after the header
   cell, so pinning the cell alone lets the handle scroll under it and the
   column can no longer be resized. PCSTable publishes the pinned cell's right
   edge as --pcs-pinned-edge (usePinnedEdge); pinning the handle there keeps
   it grabbable at any scroll position. The handle straddles the column edge
   by 8px (Fluent's cellSizerStart margin), hence the offset, and it sits
   above the pinned header cell. */
/* stylelint-disable-next-line selector-pseudo-class-no-unknown, selector-class-pattern -- CSS Modules :global() syntax required to target FluentUI classes */
._pinned-container_1sbv0_152 .ms-DetailsHeader-cellSizer[data-sizer-index="0"] {
  position: sticky;
  left: calc(var(--pcs-pinned-edge, 0px) - 8px);
  z-index: 4;
}

/* A pinned column prints as an overlapping smear, so print drops the pin and
   its edge and scroll shadows; the row colour bar stays. This block stays
   last so it overrides the scrolled rule above at equal specificity. */
@media print {
  ._pinned-container_1sbv0_152 ._pinned-cell_1sbv0_161,
  ._pinned-container_1sbv0_152 ._pinned-header-cell_1sbv0_162 {
    position: static;
    clip-path: none;

    --pcs-pin-edge: 0 0 0 transparent;
    --pcs-pin-scroll: 0 0 0 transparent;
  }

  /* stylelint-disable-next-line selector-pseudo-class-no-unknown, selector-class-pattern -- CSS Modules :global() syntax required to target FluentUI classes */
  ._pinned-container_1sbv0_152 .ms-DetailsRow-cellCheck {
    position: static;
  }

  /* stylelint-disable-next-line selector-pseudo-class-no-unknown, selector-class-pattern -- CSS Modules :global() syntax required to target FluentUI classes */
  ._pinned-container_1sbv0_152 .ms-DetailsHeader-cellIsCheck {
    position: static;
  }

  /* stylelint-disable-next-line selector-pseudo-class-no-unknown, selector-class-pattern -- CSS Modules :global() syntax required to target FluentUI classes */
  ._pinned-container_1sbv0_152 .ms-DetailsHeader-cellSizer[data-sizer-index="0"] {
    position: relative;
  }
}
._search_18ds5_1 {
  position: sticky;
  top: 0;
  z-index: 1;
  background: white;
  padding: 8px;
  border-bottom: 1px solid #edebe9;
}

._wrapper_18ds5_10 {
  position: relative;

  /* Keep the wrapper hugging its content. In a grid/flex parent with the
     default align-items: stretch, a taller row-mate would stretch this wrapper
     below the 32px control, dragging the bottom-anchored clear button with it. */
  align-self: start;
}

._clear-button_18ds5_19 {
  position: absolute;
  right: 28px; /* sits just left of the dropdown chevron */

  /* Anchored to the control, which always sits at the wrapper's bottom — even
     when a label renders above it inside the same wrapper (LoadHeaderEditForm's
     dropdowns pass `label`). The button fills the control's 32px height, so
     bottom:0 centers it in both the labeled forms and the label-less toolbar.
     Centering on the wrapper instead (top:50%) mis-places it on labeled
     dropdowns, where the wrapper's height also includes the label. */
  bottom: 0;
  height: 28px;
  width: 28px;
  border-radius: 50%;
  color: #3b414b;
}

._clear-button_18ds5_19:hover {
  color: #cf222e;
  background: #f3f2f1;
}

._header-row_18ds5_41 {
  position: sticky;
  top: 0;
  z-index: 1;
  box-sizing: border-box;
  width: max-content;
  min-width: 100%;
  padding: 4px 8px;
  background: #eef1f5;
  border-bottom: 1px solid #dfe3e8;
}

._no-match_18ds5_53 {
  padding: 10px 12px;
  color: #8a8f98;
  font-style: italic;
}
/* ScrollableModal - Reusable modal component with sticky header/footer and scrollable content */

._modal-container_16ppl_3 {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 400px;
  max-height: 90vh;
  overflow: hidden;
  background: white;
}

/* Header - stays fixed at top */
._modal-header_16ppl_14 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 24px 16px;
  border-bottom: 1px solid #edebe9;
  flex-shrink: 0;
  background-color: white;
  position: sticky;
  top: 0;
  z-index: 10;
}

._modal-title_16ppl_27 {
  margin: 0;
  color: #323130;
  font-weight: 600;
}

._close-button_16ppl_33 {
  color: #605e5c;
}

._close-button_16ppl_33:hover {
  color: #323130;
  background-color: #f3f2f1;
}

/* Content - scrollable area that takes remaining space */
._modal-content_16ppl_43 {
  flex: 1;
  overflow: hidden auto;
  padding: 20px 24px;
  background-color: white;

  /* Custom scrollbar styling for better UX */
  scrollbar-width: thin;
  scrollbar-color: #c8c6c4 transparent;
}

/* Webkit browsers scrollbar styling */
._modal-content_16ppl_43::-webkit-scrollbar {
  width: 8px;
}

._modal-content_16ppl_43::-webkit-scrollbar-track {
  background: transparent;
}

._modal-content_16ppl_43::-webkit-scrollbar-thumb {
  background-color: #c8c6c4;
  border-radius: 4px;
}

._modal-content_16ppl_43::-webkit-scrollbar-thumb:hover {
  background-color: #a19f9d;
}

/* Footer - stays fixed at bottom */
._modal-footer_16ppl_73 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 16px 24px 24px;
  border-top: 1px solid #edebe9;
  flex-shrink: 0;
  background-color: white;
  position: sticky;
  bottom: 0;
  z-index: 10;
}

/* Responsive design for smaller screens */
@media (width <= 768px) {
  ._modal-header_16ppl_14 {
    padding: 16px 16px 12px;
  }

  ._modal-content_16ppl_43 {
    padding: 16px;
  }

  ._modal-footer_16ppl_73 {
    padding: 12px 16px 16px;
    flex-direction: column-reverse;
    gap: 8px;
  }

  ._modal-footer_16ppl_73 > * {
    width: 100%;
  }
}

/* Loading state modifier - can be applied when modal is in loading state */
._modal-container_16ppl_3._loading_16ppl_109 {
  pointer-events: none;
}

._modal-container_16ppl_3._loading_16ppl_109 ._modal-content_16ppl_43 {
  opacity: 0.7;
}

/* Compact modifier — for small confirm dialogs that should size to content */
._modal-container_16ppl_3._compact_16ppl_118 {
  min-height: 0;
  height: auto;
}

._modal-container_16ppl_3._compact_16ppl_118 ._modal-content_16ppl_43 {
  padding: 12px 24px;
}
._secondary_19gvn_1 {
  font-size: 12px;
  color: #605e5c;
}

._daysExpired_19gvn_6 {
  color: #a4262c;
  font-weight: 600;
}

._daysSoon_19gvn_11 {
  color: #8a5a00;
  font-weight: 600;
}

._truncate_19gvn_16 {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
._countTile_1i6l8_1 {
  background-color: #fff;
  border: 1px solid #e1e5e9;
  border-radius: 8px;
  padding: 24px;
  min-height: 170px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
  transition: box-shadow 0.2s ease-in-out;
}

/* Only tiles that do something on click get the pointer and the hover lift. The button reset keeps
   a <button> tile looking like the <div> tiles around it. */
._countTileClickable_1i6l8_18 {
  cursor: pointer;
  font: inherit;
  color: inherit;
  width: 100%;
  text-align: center;
}

._countTileClickable_1i6l8_18:hover {
  box-shadow: 0 4px 8px rgb(0 0 0 / 15%);
}

._countTileClickable_1i6l8_18:focus-visible {
  outline: 2px solid #0078d4;
  outline-offset: 2px;
}

._countTileSubLabel_1i6l8_35 {
  color: #605e5c;
  font-size: 12px;
  text-align: center;
  margin-bottom: 4px;
}

._countTileHint_1i6l8_42 {
  color: #0078d4;
  font-size: 12px;
  margin-top: 4px;
}

._countTileTitle_1i6l8_48 {
  font-weight: 600;
  color: #323130;
  text-align: center;
  margin-bottom: 12px;
  font-size: 18px;
}

._countTileValue_1i6l8_56 {
  display: inline-block;
  color: #fff;
  padding: 8px 16px;
  border-radius: 16px;
  font-size: 18px;
  font-weight: 600;
}

._countTileShimmerTitle_1i6l8_65 {
  margin-bottom: 12px;
  width: 100%;
}

._countTileShimmerValue_1i6l8_70 {
  width: 60%;
}
/* HomePage.module.css */
._container_10wgg_2 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

._header_10wgg_8 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

._title_10wgg_14 {
  font-weight: 600;
  color: #323130;
  margin-bottom: 24px;
  font-size: 2rem;
}

._refreshButton_10wgg_21 {
  width: 40px;
  height: 40px;
  margin-bottom: 24px;
}

._refreshButtonHovered_10wgg_27 {
  background-color: #f3f2f1;
}

._refreshButtonIcon_10wgg_31 {
  font-size: 18px;
  color: #0078d4;
}

._refreshButtonIconDisabled_10wgg_36 {
  color: #a19f9d;
}

._sectionTitle_10wgg_40 {
  font-weight: 600;
  color: #323130;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e1e5e9;
  font-size: 1.5rem;
}

._metricsGrid_10wgg_49 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 8px;
}

/* Section Headers */
._sectionHeader_10wgg_57 {
  font-size: 1.25rem;
  font-family: inherit;
  font-weight: 600;
  color: #323130;
  margin: 0 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e1e5e9;
}

/* Error State */
._errorState_10wgg_68 {
  grid-column: 1 / -1;
  text-align: center;
  color: #d13438;
}

/* Footer Text */
._footerText_10wgg_75 {
  color: #605e5c;
  max-width: 600px;
  line-height: 1.4;
  font-size: 1rem;
}

/* tabIndex -1: only ever focused by script, so no ring is needed. */
._sectionHeader_10wgg_57:focus {
  outline: none;
}
._container_1rd2h_1 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 12px;
}

._statusRow_1rd2h_8 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._heading_1rd2h_14 {
  font-size: 16px;
  font-weight: 600;
}

._actions_1rd2h_19 {
  display: flex;
  gap: 8px;
}

._detailGrid_1rd2h_24 {
  display: flex;
  flex-direction: column;
}

._detailRow_1rd2h_29 {
  display: flex;
  gap: 12px;
  padding: 7px 0;
  font-size: 13px;
  color: #323130;
  border-bottom: 1px solid #f3f2f1;
}

._detailRow_1rd2h_29:first-child {
  border-top: 1px solid #f3f2f1;
}

._detailLabel_1rd2h_42 {
  min-width: 110px;
  color: #605e5c;
}

/* The steps run in order, so a rail joins their icons. */
._steps_1rd2h_48 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._step_1rd2h_48 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 0 10px;
}

._step_1rd2h_48:not(:last-child)::before {
  position: absolute;
  top: 26px;
  bottom: -8px;
  left: 7px;
  width: 2px;
  content: "";
  background-color: #edebe9;
  border-radius: 1px;
}

._step_1rd2h_48[data-status="Completed"]:not(:last-child)::before {
  background-color: #107c10;
}

._stepHeader_1rd2h_77 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

._stepName_1rd2h_84 {
  flex: 1;
}

._stepIcon_1rd2h_88 {
  display: flex;
  flex: none;
  justify-content: center;
  width: 16px;
  font-size: 16px;
}

._errorText_1rd2h_96 {
  margin-left: 24px;
  font-size: 12px;
  color: #a4262c;
}

._empty_1rd2h_102 {
  font-size: 13px;
}

._badge_1rd2h_106 {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

._badgeCompleted_1rd2h_114 {
  color: #107c10;
  background-color: #dff6dd;
  border: 1px solid #a7d8a5;
}

._badgeFailed_1rd2h_120 {
  color: #a4262c;
  background-color: #fde7e9;
  border: 1px solid #f1aeb5;
}

._badgeInProgress_1rd2h_126 {
  color: #005a9e;
  background-color: #deecf9;
  border: 1px solid #a0c4e8;
}

._badgeNew_1rd2h_132 {
  color: #8a8886;
  background-color: #f3f2f1;
  border: 1px solid #d2d0ce;
}

._iconCompleted_1rd2h_138 {
  color: #107c10;
}

._iconFailed_1rd2h_142 {
  color: #a4262c;
}

._iconInProgress_1rd2h_146 {
  color: #005a9e;
}

._iconNew_1rd2h_150 {
  color: #c8c6c4;
}
._entityCell_164sq_1 {
  display: flex;
  align-items: center;
  height: 100%;
}

._pill_164sq_7 {
  /* content-box + explicit line-height so a <button> pill (has-job) and a
     <span> pill (no-job) render at exactly the same size — buttons default to
     border-box, which otherwise makes them narrower. */
  box-sizing: content-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 40px;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

._pillButton_164sq_24 {
  margin: 0;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
}

._pillSynced_164sq_31 {
  color: #155724;
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
}

._pillSyncing_164sq_37 {
  color: #005a9e;
  background-color: #deecf9;
  border: 1px solid #a0c4e8;
}

._pillFailed_164sq_43 {
  color: #721c24;
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
}

._pillNeutral_164sq_49 {
  color: #605e5c;
  background-color: #f3f2f1;
  border: 1px solid #d2d0ce;
}
._headerActions_85hao_1 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._expiryFilters_85hao_7 {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

._datePicker_85hao_15 {
  width: 150px;
}

._filterStatus_85hao_19 {
  color: #605e5c;
  font-size: 12px;
  margin-bottom: 8px;
}

/* The status container stays mounted so screen readers announce text added to it; empty, it must
   not leave a gap. */
._filterStatus_85hao_19:empty {
  margin-bottom: 0;
}
/* this gets exported as style.css and can be used for the default theming */
/* these are the necessary styles for React/Svelte Flow, they get used by base.css and style.css */
.react-flow {
  direction: ltr;

  --xy-edge-stroke-default: #b1b1b7;
  --xy-edge-stroke-width-default: 1;
  --xy-edge-stroke-selected-default: #555;

  --xy-connectionline-stroke-default: #b1b1b7;
  --xy-connectionline-stroke-width-default: 1;

  --xy-attribution-background-color-default: rgba(255, 255, 255, 0.5);

  --xy-minimap-background-color-default: #fff;
  --xy-minimap-mask-background-color-default: rgba(240, 240, 240, 0.6);
  --xy-minimap-mask-stroke-color-default: transparent;
  --xy-minimap-mask-stroke-width-default: 1;
  --xy-minimap-node-background-color-default: #e2e2e2;
  --xy-minimap-node-stroke-color-default: transparent;
  --xy-minimap-node-stroke-width-default: 2;

  --xy-background-color-default: transparent;
  --xy-background-pattern-dots-color-default: #91919a;
  --xy-background-pattern-lines-color-default: #eee;
  --xy-background-pattern-cross-color-default: #e2e2e2;
  background-color: var(--xy-background-color, var(--xy-background-color-default));
  --xy-node-color-default: inherit;
  --xy-node-border-default: 1px solid #1a192b;
  --xy-node-background-color-default: #fff;
  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);
  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #1a192b;
  --xy-node-border-radius-default: 3px;

  --xy-handle-background-color-default: #1a192b;
  --xy-handle-border-color-default: #fff;

  --xy-selection-background-color-default: rgba(0, 89, 220, 0.08);
  --xy-selection-border-default: 1px dotted rgba(0, 89, 220, 0.8);

  --xy-controls-button-background-color-default: #fefefe;
  --xy-controls-button-background-color-hover-default: #f4f4f4;
  --xy-controls-button-color-default: inherit;
  --xy-controls-button-color-hover-default: inherit;
  --xy-controls-button-border-color-default: #eee;
  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);

  --xy-edge-label-background-color-default: #ffffff;
  --xy-edge-label-color-default: inherit;
  --xy-resize-background-color-default: #3367d9;
}
.react-flow.dark {
  --xy-edge-stroke-default: #3e3e3e;
  --xy-edge-stroke-width-default: 1;
  --xy-edge-stroke-selected-default: #727272;

  --xy-connectionline-stroke-default: #b1b1b7;
  --xy-connectionline-stroke-width-default: 1;

  --xy-attribution-background-color-default: rgba(150, 150, 150, 0.25);

  --xy-minimap-background-color-default: #141414;
  --xy-minimap-mask-background-color-default: rgba(60, 60, 60, 0.6);
  --xy-minimap-mask-stroke-color-default: transparent;
  --xy-minimap-mask-stroke-width-default: 1;
  --xy-minimap-node-background-color-default: #2b2b2b;
  --xy-minimap-node-stroke-color-default: transparent;
  --xy-minimap-node-stroke-width-default: 2;

  --xy-background-color-default: #141414;
  --xy-background-pattern-dots-color-default: #777;
  --xy-background-pattern-lines-color-default: #777;
  --xy-background-pattern-cross-color-default: #777;
  --xy-node-color-default: #f8f8f8;
  --xy-node-border-default: 1px solid #3c3c3c;
  --xy-node-background-color-default: #1e1e1e;
  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);
  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, 0.08);
  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #999;

  --xy-handle-background-color-default: #bebebe;
  --xy-handle-border-color-default: #1e1e1e;

  --xy-selection-background-color-default: rgba(200, 200, 220, 0.08);
  --xy-selection-border-default: 1px dotted rgba(200, 200, 220, 0.8);

  --xy-controls-button-background-color-default: #2b2b2b;
  --xy-controls-button-background-color-hover-default: #3e3e3e;
  --xy-controls-button-color-default: #f8f8f8;
  --xy-controls-button-color-hover-default: #fff;
  --xy-controls-button-border-color-default: #5b5b5b;
  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);

  --xy-edge-label-background-color-default: #141414;
  --xy-edge-label-color-default: #f8f8f8;
}
.react-flow__background {
  background-color: var(--xy-background-color-props, var(--xy-background-color, var(--xy-background-color-default)));
  pointer-events: none;
  z-index: -1;
}
.react-flow__container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.react-flow__pane {
  z-index: 1;
}
.react-flow__pane.draggable {
    cursor: grab;
  }
.react-flow__pane.dragging {
    cursor: grabbing;
  }
.react-flow__pane.selection {
    cursor: pointer;
  }
.react-flow__viewport {
  transform-origin: 0 0;
  z-index: 2;
  pointer-events: none;
}
.react-flow__renderer {
  z-index: 4;
}
.react-flow__selection {
  z-index: 6;
}
.react-flow__nodesselection-rect:focus,
.react-flow__nodesselection-rect:focus-visible {
  outline: none;
}
.react-flow__edge-path {
  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
  stroke-width: var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));
  fill: none;
}
.react-flow__connection-path {
  stroke: var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));
  stroke-width: var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));
  fill: none;
}
.react-flow .react-flow__edges {
  position: absolute;
}
.react-flow .react-flow__edges svg {
    overflow: visible;
    position: absolute;
    pointer-events: none;
  }
.react-flow__edge {
  pointer-events: visibleStroke;
}
.react-flow__edge.selectable {
    cursor: pointer;
  }
.react-flow__edge.animated path {
    stroke-dasharray: 5;
    animation: dashdraw 0.5s linear infinite;
  }
.react-flow__edge.animated path.react-flow__edge-interaction {
    stroke-dasharray: none;
    animation: none;
  }
.react-flow__edge.inactive {
    pointer-events: none;
  }
.react-flow__edge.selected,
  .react-flow__edge:focus,
  .react-flow__edge:focus-visible {
    outline: none;
  }
.react-flow__edge.selected .react-flow__edge-path,
  .react-flow__edge.selectable:focus .react-flow__edge-path,
  .react-flow__edge.selectable:focus-visible .react-flow__edge-path {
    stroke: var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default));
  }
.react-flow__edge-textwrapper {
    pointer-events: all;
  }
.react-flow__edge .react-flow__edge-text {
    pointer-events: none;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
/* Arrowhead marker styles - use CSS custom properties as default */
.react-flow__arrowhead polyline {
  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
}
.react-flow__arrowhead polyline.arrowclosed {
  fill: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
}
.react-flow__connection {
  pointer-events: none;
}
.react-flow__connection .animated {
    stroke-dasharray: 5;
    animation: dashdraw 0.5s linear infinite;
  }
svg.react-flow__connectionline {
  z-index: 1001;
  overflow: visible;
  position: absolute;
}
.react-flow__nodes {
  pointer-events: none;
  transform-origin: 0 0;
}
.react-flow__node {
  position: absolute;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: all;
  transform-origin: 0 0;
  box-sizing: border-box;
  cursor: default;
}
.react-flow__node.selectable {
    cursor: pointer;
  }
.react-flow__node.draggable {
    cursor: grab;
    pointer-events: all;
  }
.react-flow__node.draggable.dragging {
      cursor: grabbing;
    }
.react-flow__nodesselection {
  z-index: 3;
  transform-origin: left top;
  pointer-events: none;
}
.react-flow__nodesselection-rect {
    position: absolute;
    pointer-events: all;
    cursor: grab;
  }
.react-flow__handle {
  position: absolute;
  pointer-events: none;
  min-width: 5px;
  min-height: 5px;
  width: 6px;
  height: 6px;
  background-color: var(--xy-handle-background-color, var(--xy-handle-background-color-default));
  border: 1px solid var(--xy-handle-border-color, var(--xy-handle-border-color-default));
  border-radius: 100%;
}
.react-flow__handle.connectingfrom {
    pointer-events: all;
  }
.react-flow__handle.connectionindicator {
    pointer-events: all;
    cursor: crosshair;
  }
.react-flow__handle-bottom {
    top: auto;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
  }
.react-flow__handle-top {
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
  }
.react-flow__handle-left {
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
  }
.react-flow__handle-right {
    top: 50%;
    right: 0;
    transform: translate(50%, -50%);
  }
.react-flow__edgeupdater {
  cursor: move;
  pointer-events: all;
}
.react-flow__pane.selection .react-flow__panel {
  pointer-events: none;
}
.react-flow__panel {
  position: absolute;
  z-index: 5;
  margin: 15px;
}
.react-flow__panel.top {
    top: 0;
  }
.react-flow__panel.bottom {
    bottom: 0;
  }
.react-flow__panel.top.center, .react-flow__panel.bottom.center {
      left: 50%;
      transform: translateX(-15px) translateX(-50%);
    }
.react-flow__panel.left {
    left: 0;
  }
.react-flow__panel.right {
    right: 0;
  }
.react-flow__panel.left.center, .react-flow__panel.right.center {
      top: 50%;
      transform: translateY(-15px) translateY(-50%);
    }
.react-flow__attribution {
  font-size: 10px;
  background: var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));
  padding: 2px 3px;
  margin: 0;
}
.react-flow__attribution a {
    text-decoration: none;
    color: #999;
  }
@keyframes dashdraw {
  from {
    stroke-dashoffset: 10;
  }
}
.react-flow__edgelabel-renderer {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  left: 0;
  top: 0;
}
.react-flow__viewport-portal {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.react-flow__minimap {
  background: var(
    --xy-minimap-background-color-props,
    var(--xy-minimap-background-color, var(--xy-minimap-background-color-default))
  );
}
.react-flow__minimap-svg {
    display: block;
  }
.react-flow__minimap-mask {
    fill: var(
      --xy-minimap-mask-background-color-props,
      var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default))
    );
    stroke: var(
      --xy-minimap-mask-stroke-color-props,
      var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default))
    );
    stroke-width: var(
      --xy-minimap-mask-stroke-width-props,
      var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default))
    );
  }
.react-flow__minimap-node {
    fill: var(
      --xy-minimap-node-background-color-props,
      var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default))
    );
    stroke: var(
      --xy-minimap-node-stroke-color-props,
      var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default))
    );
    stroke-width: var(
      --xy-minimap-node-stroke-width-props,
      var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default))
    );
  }
.react-flow__background-pattern.dots {
    fill: var(
      --xy-background-pattern-color-props,
      var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default))
    );
  }
.react-flow__background-pattern.lines {
    stroke: var(
      --xy-background-pattern-color-props,
      var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default))
    );
  }
.react-flow__background-pattern.cross {
    stroke: var(
      --xy-background-pattern-color-props,
      var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default))
    );
  }
.react-flow__controls {
  display: flex;
  flex-direction: column;
  box-shadow: var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default));
}
.react-flow__controls.horizontal {
    flex-direction: row;
  }
.react-flow__controls-button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 26px;
    width: 26px;
    padding: 4px;
    border: none;
    background: var(--xy-controls-button-background-color, var(--xy-controls-button-background-color-default));
    border-bottom: 1px solid
      var(
        --xy-controls-button-border-color-props,
        var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))
      );
    color: var(
      --xy-controls-button-color-props,
      var(--xy-controls-button-color, var(--xy-controls-button-color-default))
    );
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
.react-flow__controls-button svg {
      width: 100%;
      max-width: 12px;
      max-height: 12px;
      fill: currentColor;
    }
.react-flow__edge.updating .react-flow__edge-path {
      stroke: #777;
    }
.react-flow__edge-text {
    font-size: 10px;
  }
.react-flow__node.selectable:focus,
  .react-flow__node.selectable:focus-visible {
    outline: none;
  }
.react-flow__node-input,
.react-flow__node-default,
.react-flow__node-output,
.react-flow__node-group {
  padding: 10px;
  border-radius: var(--xy-node-border-radius, var(--xy-node-border-radius-default));
  width: 150px;
  font-size: 12px;
  color: var(--xy-node-color, var(--xy-node-color-default));
  text-align: center;
  border: var(--xy-node-border, var(--xy-node-border-default));
  background-color: var(--xy-node-background-color, var(--xy-node-background-color-default));
}
.react-flow__node-input.selectable:hover, .react-flow__node-default.selectable:hover, .react-flow__node-output.selectable:hover, .react-flow__node-group.selectable:hover {
      box-shadow: var(--xy-node-boxshadow-hover, var(--xy-node-boxshadow-hover-default));
    }
.react-flow__node-input.selectable.selected,
    .react-flow__node-input.selectable:focus,
    .react-flow__node-input.selectable:focus-visible,
    .react-flow__node-default.selectable.selected,
    .react-flow__node-default.selectable:focus,
    .react-flow__node-default.selectable:focus-visible,
    .react-flow__node-output.selectable.selected,
    .react-flow__node-output.selectable:focus,
    .react-flow__node-output.selectable:focus-visible,
    .react-flow__node-group.selectable.selected,
    .react-flow__node-group.selectable:focus,
    .react-flow__node-group.selectable:focus-visible {
      box-shadow: var(--xy-node-boxshadow-selected, var(--xy-node-boxshadow-selected-default));
    }
.react-flow__node-group {
  background-color: var(--xy-node-group-background-color, var(--xy-node-group-background-color-default));
}
.react-flow__nodesselection-rect,
.react-flow__selection {
  background: var(--xy-selection-background-color, var(--xy-selection-background-color-default));
  border: var(--xy-selection-border, var(--xy-selection-border-default));
}
.react-flow__nodesselection-rect:focus,
  .react-flow__nodesselection-rect:focus-visible,
  .react-flow__selection:focus,
  .react-flow__selection:focus-visible {
    outline: none;
  }
.react-flow__controls-button:hover {
      background: var(
        --xy-controls-button-background-color-hover-props,
        var(--xy-controls-button-background-color-hover, var(--xy-controls-button-background-color-hover-default))
      );
      color: var(
        --xy-controls-button-color-hover-props,
        var(--xy-controls-button-color-hover, var(--xy-controls-button-color-hover-default))
      );
    }
.react-flow__controls-button:disabled {
      pointer-events: none;
    }
.react-flow__controls-button:disabled svg {
        fill-opacity: 0.4;
      }
.react-flow__controls-button:last-child {
    border-bottom: none;
  }
.react-flow__controls.horizontal .react-flow__controls-button {
    border-bottom: none;
    border-right: 1px solid
      var(
        --xy-controls-button-border-color-props,
        var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))
      );
  }
.react-flow__controls.horizontal .react-flow__controls-button:last-child {
    border-right: none;
  }
.react-flow__resize-control {
  position: absolute;
}
.react-flow__resize-control.left,
.react-flow__resize-control.right {
  cursor: ew-resize;
}
.react-flow__resize-control.top,
.react-flow__resize-control.bottom {
  cursor: ns-resize;
}
.react-flow__resize-control.top.left,
.react-flow__resize-control.bottom.right {
  cursor: nwse-resize;
}
.react-flow__resize-control.bottom.left,
.react-flow__resize-control.top.right {
  cursor: nesw-resize;
}
/* handle styles */
.react-flow__resize-control.handle {
  width: 5px;
  height: 5px;
  border: 1px solid #fff;
  border-radius: 1px;
  background-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
  translate: -50% -50%;
}
.react-flow__resize-control.handle.left {
  left: 0;
  top: 50%;
}
.react-flow__resize-control.handle.right {
  left: 100%;
  top: 50%;
}
.react-flow__resize-control.handle.top {
  left: 50%;
  top: 0;
}
.react-flow__resize-control.handle.bottom {
  left: 50%;
  top: 100%;
}
.react-flow__resize-control.handle.top.left {
  left: 0;
}
.react-flow__resize-control.handle.bottom.left {
  left: 0;
}
.react-flow__resize-control.handle.top.right {
  left: 100%;
}
.react-flow__resize-control.handle.bottom.right {
  left: 100%;
}
/* line styles */
.react-flow__resize-control.line {
  border-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
  border-width: 0;
  border-style: solid;
}
.react-flow__resize-control.line.left,
.react-flow__resize-control.line.right {
  width: 1px;
  transform: translate(-50%, 0);
  top: 0;
  height: 100%;
}
.react-flow__resize-control.line.left {
  left: 0;
  border-left-width: 1px;
}
.react-flow__resize-control.line.right {
  left: 100%;
  border-right-width: 1px;
}
.react-flow__resize-control.line.top,
.react-flow__resize-control.line.bottom {
  height: 1px;
  transform: translate(0, -50%);
  left: 0;
  width: 100%;
}
.react-flow__resize-control.line.top {
  top: 0;
  border-top-width: 1px;
}
.react-flow__resize-control.line.bottom {
  border-bottom-width: 1px;
  top: 100%;
}
.react-flow__edge-textbg {
  fill: var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default));
}
.react-flow__edge-text {
  fill: var(--xy-edge-label-color, var(--xy-edge-label-color-default));
}
/* src/components/webhooks/outbound/SubscriptionDetailPage.module.css */
._configGrid_1m5dr_2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 8px 24px;
}

._testBadge_1m5dr_8 {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  color: white;
  background-color: #8764b8;
  font-size: 12px;
  font-weight: 600;
}
._badge_i5ib3_1 {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

._success_i5ib3_10 {
  background-color: #dff6dd;
  color: #107c10;
}

._warning_i5ib3_15 {
  background-color: #fff4ce;
  color: #797673;
}

._error_i5ib3_20 {
  background-color: #fde7e9;
  color: #a80000;
}

._info_i5ib3_25 {
  background-color: #f3f2f1;
  color: #605e5c;
}
._badge_z20n8_1 {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
}

._get_z20n8_11 {
  background-color: #deecf9;
  color: #0078d4;
}

._post_z20n8_16 {
  background-color: #dff6dd;
  color: #107c10;
}

._put_z20n8_21 {
  background-color: #fff4ce;
  color: #797673;
}

._delete_z20n8_26 {
  background-color: #fde7e9;
  color: #a80000;
}

._other_z20n8_31 {
  background-color: #f3f2f1;
  color: #605e5c;
}
._footer_1f5bl_1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background-color: #fafafa;
  border-top: 1px solid #edebe9;
  flex-shrink: 0;
}

._footer-left_1f5bl_11 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._footer-center_1f5bl_17 {
  display: flex;
  align-items: center;
}

._footer-right_1f5bl_22 {
  display: flex;
  align-items: center;
  gap: 4px;
}

._label_1f5bl_28 {
  color: #605e5c;
}

._page-text_1f5bl_32 {
  color: #605e5c;
  min-width: 100px;
  text-align: center;
}
._toolbar_1iqlm_1 {
  padding: 10px 16px;
  background: #fff;
  border-bottom: 1px solid #edebe9;
}

._grid_1iqlm_7 {
  display: grid;
  grid-template-columns: 32px repeat(5, 1fr);
  gap: 6px 8px;
  align-items: end;
}
._container_ve3n5_1 {
  flex: 1;
  overflow-y: auto;
}
._page_1as9j_1 {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
._container_2bp47_1 {
  margin-bottom: 16px;
}

._title_2bp47_5 {
  font-size: 14px;
  font-weight: 600;
  color: #323130;
  margin-bottom: 8px;
}
._container_1ihv2_1 {
  margin-bottom: 16px;
}

._title_1ihv2_5 {
  font-size: 14px;
  font-weight: 600;
  color: #323130;
  margin-bottom: 8px;
}

._body_1ihv2_12 {
  background-color: #f3f2f1;
  border: 1px solid #edebe9;
  border-radius: 4px;
  padding: 12px;
  font-family: "Cascadia Code", Consolas, "Courier New", monospace;
  font-size: 13px;
  line-height: 1.5;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 400px;
}
._page_1phql_1 {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  padding: 16px;
  gap: 16px;
}

._summary_1phql_10 {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background-color: #fff;
  border: 1px solid #edebe9;
  border-radius: 4px;
}

._summaryPath_1phql_21 {
  font-weight: 600;
  font-size: 14px;
  word-break: break-all;
}

._summaryMeta_1phql_27 {
  color: #605e5c;
  font-size: 13px;
}

._section_1phql_32 {
  background-color: #fff;
  border: 1px solid #edebe9;
  border-radius: 4px;
  padding: 16px;
}

._sectionHeading_1phql_39 {
  font-size: 16px;
  font-weight: 600;
  color: #323130;
  margin-bottom: 12px;
}

._sectionTitle_1phql_46 {
  font-size: 14px;
  font-weight: 600;
  color: #323130;
  margin-bottom: 8px;
}
._pageScroll_jlasf_1 {
  height: 100%;
  overflow: hidden auto;
}

._container_jlasf_6 {
  padding: 20px 0 40px 24px;
  max-width: 1100px;
}

._loadingArea_jlasf_11 {
  padding: 40px 0;
}

._mappingsHeaderActions_jlasf_15 {
  display: flex;
  gap: 8px;
  align-items: center;
}

._sectionDescription_jlasf_21 {
  font-size: 13px;
  color: #605e5c;
  margin-bottom: 16px;
}

._grow_jlasf_27 {
  flex: 1;
}

._searchRow_jlasf_31 {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

._searchRow_jlasf_31 ._grow_jlasf_27 {
  max-width: 480px;
}

._searchRow_jlasf_31 ._mappingsHeaderActions_jlasf_15 {
  margin-left: auto;
}

._emptyState_jlasf_46 {
  font-size: 13px;
  color: #605e5c;
  font-style: italic;
  padding: 24px 0;
  text-align: center;
}

._mappingTableWrapper_jlasf_54 {
  border: 1px solid #edebe9;
  border-radius: 4px;
  overflow: hidden;
}

._mappingTable_jlasf_54 {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

._mappingTable_jlasf_54 thead tr {
  background-color: #faf9f8;
}

._mappingTable_jlasf_54 th {
  text-align: left;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 600;
  color: #605e5c;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid #edebe9;
}

._mappingTable_jlasf_54 th._enabledHeader_jlasf_81 {
  text-align: center;
  width: 120px;
}

._enabledHeaderLabel_jlasf_86 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

._enabledHeaderInfo_jlasf_92 {
  color: #605e5c;
  cursor: help;
  font-size: 12px;
}

._mappingTable_jlasf_54 th._actionHeader_jlasf_98 {
  width: 100px;
}

._mappingTable_jlasf_54 td {
  padding: 8px 16px;
  border-bottom: 1px solid #f3f2f1;
}

._mappingTable_jlasf_54 tr:last-child td {
  border-bottom: none;
}

._mappingCell_jlasf_111 {
  font-family: monospace;
  color: #323130;
}

._companyCell_jlasf_116 {
  color: #323130;
}

._enabledCell_jlasf_120 {
  text-align: center;
}

._enabledCell_jlasf_120 .ms-Toggle {
  display: inline-flex;
  margin: 0;
  vertical-align: middle;
}

._actionCell_jlasf_130 {
  padding: 4px 8px;
  text-align: right;
  width: 100px;
  white-space: nowrap;
}

._playIconButton_jlasf_137 i {
  color: #107c10;
  font-size: 14px;
}

._deleteIconButton_jlasf_142 i {
  color: #a4262c;
  font-size: 14px;
}

._fixedMessageBar_jlasf_147 {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

._visuallyHidden_jlasf_155 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

._panelBody_jlasf_167 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 0 16px;
}

._companySearchWrapper_jlasf_174 {
  position: relative;
}

._companySearchResults_jlasf_178 {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  background-color: #fff;
  border: 1px solid #edebe9;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
  z-index: 10;
}

._companySearchItem_jlasf_192 {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  background-color: #fff;
  border: none;
  border-bottom: 1px solid #f3f2f1;
  cursor: pointer;
  font: inherit;
}

._companySearchItem_jlasf_192:last-child {
  border-bottom: none;
}

._companySearchItem_jlasf_192:hover {
  background-color: #f3f2f1;
}

._companySearchItemName_jlasf_212 {
  font-weight: 600;
  color: #323130;
  font-size: 13px;
}

._companySearchItemMeta_jlasf_218 {
  font-size: 12px;
  color: #605e5c;
  margin-top: 2px;
}

._selectedCompanyCard_jlasf_224 {
  background-color: #f3f2f1;
  border: 1px solid #edebe9;
  border-radius: 4px;
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

._selectedCompanyName_jlasf_234 {
  font-size: 15px;
  font-weight: 600;
  color: #323130;
}

._selectedCompanyMeta_jlasf_240 {
  font-size: 12px;
  color: #605e5c;
  margin-top: 2px;
}

._sourcePreview_jlasf_246 {
  font-size: 13px;
  color: #323130;
  background-color: #f3f2f1;
  border: 1px solid #edebe9;
  border-radius: 4px;
  padding: 8px 12px;
}

._sourcePreviewLabel_jlasf_255 {
  font-weight: 600;
  color: #605e5c;
}

._sourcePreviewValue_jlasf_260 {
  font-family: monospace;
}

._panelFooter_jlasf_264 {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid #edebe9;
  margin-top: 8px;
}
._pageScroll_1qpok_1 {
  height: 100%;
  overflow: hidden auto;
}

._container_1qpok_6 {
  padding: 20px 0 40px 24px;
  max-width: 1100px;
}

._loadingArea_1qpok_11 {
  padding: 40px 0;
}

._sectionHeader_1qpok_15 {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin: 16px 0 12px;
}

._sectionDescription_1qpok_22 {
  flex: 1;
  font-size: 13px;
  color: #605e5c;
}

._emptyState_1qpok_28 {
  font-size: 13px;
  color: #605e5c;
  font-style: italic;
  padding: 24px 0;
  text-align: center;
}

._tableWrapper_1qpok_36 {
  border: 1px solid #edebe9;
  border-radius: 4px;
  overflow: hidden;
}

._table_1qpok_36 {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

._table_1qpok_36 thead tr {
  background-color: #faf9f8;
}

._table_1qpok_36 th {
  text-align: left;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 600;
  color: #605e5c;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid #edebe9;
}

._table_1qpok_36 th._statusHeader_1qpok_63 {
  width: 260px;
}

._table_1qpok_36 th._actionHeader_1qpok_67 {
  width: 240px;
}

._table_1qpok_36 td {
  padding: 8px 16px;
  border-bottom: 1px solid #f3f2f1;
  color: #323130;
  vertical-align: middle;
}

._table_1qpok_36 tr:last-child td {
  border-bottom: none;
}

._nameCell_1qpok_82 {
  font-weight: 600;
}

._monoCell_1qpok_86 {
  font-family: monospace;
  white-space: nowrap;
}

._statusCell_1qpok_91 {
  width: 260px;
}

._statusChip_1qpok_95 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 12px;
}

._available_1qpok_105 {
  background-color: #dff6dd;
  color: #107c10;
}

._reserved_1qpok_110 {
  background-color: #deecf9;
  color: #0078d4;
}

._errorText_1qpok_115 {
  margin-top: 6px;
  font-size: 12px;
  color: #a4262c;
}

._subText_1qpok_121 {
  font-size: 12px;
  color: #605e5c;
}

._actionCell_1qpok_126 {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

._dangerButton_1qpok_133 {
  background-color: #a4262c;
  border-color: #a4262c;
}

._dangerButton_1qpok_133:hover {
  background-color: #8e1f24;
  border-color: #8e1f24;
}

._visuallyHidden_1qpok_143 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Keeps timestamps on one line. A wrapped timestamp adds a line to its cell
   and grows the whole row. */
._noWrapCell_1qpok_157 {
  white-space: nowrap;
}

/* Always occupies its slot, empty or not, so a database entering or leaving
   Resetting does not change the row height. */
._resetBar_1qpok_163 {
  height: 6px;
  margin-top: 4px;
}

._resetBar_1qpok_163 .ms-ProgressIndicator-itemProgress {
  padding: 2px 0;
}
._tiles_mfhfv_1 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  padding: 14px 16px;
}

._tile_mfhfv_1 {
  border: 1px solid #e1dfdd;
  border-radius: 6px;
  padding: 10px 12px;
  background: #fff;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

._tile_mfhfv_1:hover {
  border-color: #c7e0f4;
  background: #fbfdff;
}

._tile_mfhfv_1:focus-visible {
  outline: 2px solid #0078d4;
  outline-offset: 1px;
}

._total_mfhfv_28 {
  background: #0b2e51;
  border-color: #0b2e51;
  color: #fff;
  cursor: default;
}

._total_mfhfv_28:hover {
  background: #0b2e51;
  border-color: #0b2e51;
}

._domainName_mfhfv_40 {
  font-size: 13px;
  font-weight: 600;
}

._count_mfhfv_45 {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
  margin-top: 2px;
}

._countZero_mfhfv_52 {
  color: #8a8886;
}

._total_mfhfv_28 ._countZero_mfhfv_52 {
  color: #c7dcef;
}

._label_mfhfv_60 {
  font-size: 11px;
  color: #8a8886;
}

._total_mfhfv_28 ._label_mfhfv_60 {
  color: #c7dcef;
}
._toolbar_a72pz_1 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: flex-end;
  padding: 12px 16px;
  background: #f3f2f1;
  border-bottom: 1px solid #edebe9;
}

._field_a72pz_11 {
  min-width: 140px;
}
._errorDescription_jarq2_1 {
  max-width: 320px;
  white-space: normal;
  word-break: break-word;
}

._enqueued_jarq2_7 {
  white-space: nowrap;
  color: #605e5c;
}
._summaryList_psarb_1 {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  margin: 16px 0 0;
}

._summaryList_psarb_1 dt {
  color: #605e5c;
  font-size: 12px;
}

._summaryList_psarb_1 dd {
  margin: 0;
  font-size: 13px;
  word-break: break-word;
}

._rawJsonTab_psarb_19 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

._rawJsonHeader_psarb_26 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

._rawJsonLabel_psarb_32 {
  font-size: 12px;
  color: #605e5c;
}

._rawText_psarb_37 {
  background: #1e1e1e;
  color: #d4d4d4;
  border-radius: 4px;
  padding: 12px;
  margin: 0;
  font-family: Consolas, "Courier New", monospace;
  font-size: 12px;
  line-height: 1.5;
  max-height: 55vh;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

._timeline_psarb_52 {
  list-style: none;
  margin: 16px 0 0;
  padding: 0 0 0 14px;
  border-left: 2px solid #e1dfdd;
}

._timelineItem_psarb_59 {
  position: relative;
  margin-bottom: 16px;
}

._timelineItem_psarb_59::before {
  content: "";
  position: absolute;
  left: -19px;
  top: 3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #a19f9d;
}

._timelineTime_psarb_75 {
  font-family: Consolas, "Courier New", monospace;
  font-size: 11px;
  color: #8a8886;
}

._timelineText_psarb_81 {
  font-size: 13px;
}

._footer_psarb_85 {
  width: 100%;
}

._footerMessage_psarb_89 {
  margin-bottom: 12px;
}

._purgeButton_psarb_93 {
  color: #a4262c;
  border-color: #a4262c;
}

._purgeButton_psarb_93:hover {
  color: #8e1f24;
  border-color: #8e1f24;
  background-color: #fde7e9;
}
._error_19uh0_1 {
  margin-bottom: 12px;
}

._warning_19uh0_5 {
  color: #a4262c;
}

._purgeButton_19uh0_9 {
  background-color: #a4262c;
  border-color: #a4262c;
}

._purgeButton_19uh0_9:hover {
  background-color: #8e1f24;
  border-color: #8e1f24;
}
._page_ecdjt_1 {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden auto;
}

._titleSub_ecdjt_8 {
  font-size: 12px;
  font-weight: 400;
  color: #605e5c;
  margin-left: 10px;
}

._messages_ecdjt_15 {
  padding: 0 16px;
}

._tableSection_ecdjt_19 {
  padding: 0 16px;
}

._headerActions_ecdjt_23 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._bulkBar_ecdjt_29 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  margin: 0 16px;
  background: #eff6fc;
  border-radius: 2px;
}

._bulkBarCount_ecdjt_39 {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: #106ebe;
}
._pageScroll_w70yd_1 {
  height: 100%;
  overflow: hidden auto;
}

._container_w70yd_6 {
  padding: 20px 0 40px 24px;
  max-width: 1400px;
}

._headerActions_w70yd_11 {
  display: flex;
  gap: 8px;
  align-items: center;
}

._emptyState_w70yd_17 {
  font-size: 13px;
  color: #605e5c;
  font-style: italic;
  padding: 24px 0;
  text-align: center;
}

._tableWrapper_w70yd_25 {
  border: 1px solid #edebe9;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 12px;
}

._table_w70yd_25 {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

._table_w70yd_25 thead tr {
  background-color: #faf9f8;
}

._table_w70yd_25 th {
  padding: 10px 16px;
  text-align: left;
  font-weight: 600;
  color: #605e5c;
  border-bottom: 1px solid #edebe9;
  font-size: 12px;
  white-space: nowrap;
}

._sortButton_w70yd_52 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

._sortButton_w70yd_52:hover {
  color: #323130;
}

._sortIcon_w70yd_69 {
  font-size: 10px;
}

._table_w70yd_25 th._actionHeader_w70yd_73 {
  width: 60px;
}

._table_w70yd_25 td {
  padding: 8px 16px;
  border-bottom: 1px solid #f3f2f1;
  color: #323130;
  white-space: nowrap;
}

._table_w70yd_25 tr:last-child td {
  border-bottom: none;
}

._codeCell_w70yd_88 {
  font-family: monospace;
}

._actionCell_w70yd_92 {
  padding: 4px 8px;
  text-align: right;
}

._pill_w70yd_97 {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}

._pillButton_w70yd_106 {
  border: none;
  font-family: inherit;
  cursor: pointer;
}

._pending_w70yd_112 {
  background-color: #797775;
}

._inProgress_w70yd_116 {
  background-color: #0078d4;
}

._completed_w70yd_120 {
  background-color: #107c10;
}

._failed_w70yd_124 {
  background-color: #a4262c;
}

._visuallyHidden_w70yd_128 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

._panelBody_w70yd_140 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 0 16px;
}

._nameButton_w70yd_147 {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: #0078d4;
  text-align: left;
  cursor: pointer;
}

._nameButton_w70yd_147:hover,
._nameButton_w70yd_147:focus-visible {
  text-decoration: underline;
}

._detailList_w70yd_162 {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 16px;
  margin: 0;
}

._detailList_w70yd_162 dt {
  font-weight: 600;
  color: #605e5c;
}

._detailList_w70yd_162 dd {
  margin: 0;
  overflow-wrap: anywhere;
}

._panelFooter_w70yd_179 {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid #edebe9;
  margin-top: 8px;
}

._ipSection_w70yd_188 {
  border-top: 1px solid #edebe9;
  padding-top: 16px;
}

._ipHeading_w70yd_193 {
  font-size: 14px;
  font-weight: 600;
  color: #323130;
  margin: 0;
}

._ipHint_w70yd_200 {
  font-size: 12px;
  color: #605e5c;
  margin: 4px 0 8px;
}

._ipRow_w70yd_206 {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

._grow_w70yd_212 {
  flex: 1;
}

._ipList_w70yd_216 {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  border: 1px solid #edebe9;
  border-radius: 4px;
}

._ipItem_w70yd_224 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 4px 2px 12px;
  border-bottom: 1px solid #f3f2f1;
}

._ipItem_w70yd_224:last-child {
  border-bottom: none;
}

._ipValue_w70yd_236 {
  font-family: monospace;
  font-size: 13px;
}

._detailHeader_w70yd_241 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._detailCard_w70yd_247 {
  background-color: #faf9f8;
  border: 1px solid #edebe9;
  border-left: 3px solid #0078d4;
  border-radius: 4px;
  padding: 12px 16px;
}

._detailCardTitle_w70yd_255 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  color: #0078d4;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

._chipList_w70yd_267 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

._chip_w70yd_267 {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid #c8c6c4;
  border-radius: 4px;
  background-color: #fff;
  font-family: monospace;
  font-size: 12px;
  color: #323130;
}

._search_w70yd_287 {
  width: 260px;
}
._cardList_9fevv_1 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 24px;
}

._loadingRow_9fevv_8 {
  padding: 32px 24px;
  display: flex;
  justify-content: center;
}

._emptyState_9fevv_14 {
  padding: 32px 24px;
  text-align: center;
  color: #605e5c;
}

._moduleCard_9fevv_20 {
  background: #fff;
  border: 1px solid #e1e1e1;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

._moduleHeader_9fevv_29 {
  padding: 14px 20px;
  background: #f8f9fa;
  border-bottom: 1px solid #e1e1e1;
  display: flex;
  align-items: center;
  gap: 12px;
}

._moduleIconBox_9fevv_38 {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

._moduleIcon_9fevv_38 {
  font-size: 18px;
  color: #323130;
}

._moduleHeaderText_9fevv_53 {
  flex: 1;
  display: flex;
  flex-direction: column;
}

._moduleName_9fevv_59 {
  font-weight: 600;
  color: #323130;
}

._moduleDescription_9fevv_64 {
  color: #605e5c;
}

._activeBadge_9fevv_68 {
  background: #dff6dd;
  color: #107c10;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
}

._moduleBody_9fevv_77 {
  padding: 12px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._sectionLabel_9fevv_84 {
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #605e5c;
  font-size: 11px;
  margin-top: 8px;
}

._emptyLine_9fevv_92 {
  color: #a19f9d;
  font-style: italic;
}

._featurePills_9fevv_97 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

._featurePill_9fevv_97 {
  background: #f3f2f1;
  color: #605e5c;
  padding: 4px 12px;
  border-radius: 10px;
  font-size: 11px;
}

._addOnRow_9fevv_112 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid #f3f2f1;
}

._addOnRow_9fevv_112:first-of-type {
  border-top: none;
}

._addOnText_9fevv_124 {
  flex: 1;
  display: flex;
  flex-direction: column;
}

._addOnNameOn_9fevv_130 {
  font-weight: 500;
  color: #323130;
}

._addOnNameOff_9fevv_135 {
  color: #605e5c;
}

._addOnDescription_9fevv_139 {
  color: #605e5c;
  font-size: 11px;
}

._moduleFooter_9fevv_144 {
  padding: 10px 20px;
  border-top: 1px solid #e1e1e1;
  background: #faf9f8;
  display: flex;
  justify-content: flex-end;
}

._removeButton_9fevv_152 {
  color: #cf222e;
  border-color: #cf222e;
}

._removeButton_9fevv_152:hover {
  color: #fff;
  background-color: #cf222e;
  border-color: #cf222e;
}
._mutedText_1mldj_1 {
  color: #a19f9d;
  font-style: italic;
  font-size: 11px;
}

._moduleBadgeRow_1mldj_7 {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
}

._moduleBadge_1mldj_7 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  font-size: 12px;
  color: #323130;
}

._adminBadge_1mldj_25 {
  background: #f3e8fd;
  color: #7c3aed;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
}

._statusActiveBadge_1mldj_34 {
  background: #dff6dd;
  color: #107c10;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
}

._statusInactiveBadge_1mldj_43 {
  background: #fed9cc;
  color: #d83b01;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
}

._statusDuplicateBadge_1mldj_52 {
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  background: #fde7e9;
  color: #a4262c;
}

._statusNeutralBadge_1mldj_61 {
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  background: #f3f2f1;
  color: #605e5c;
}

._filterBar_1mldj_70 {
  display: flex;
  gap: 8px;
  padding: 12px 24px 0;
  align-items: center;
}

._statusIcon_1mldj_77 {
  /* mdl2 ships one weight, so font-weight would only smear the outline synthetically. The badge
     sets 11px, which is too small to tell a warning triangle from a blocked circle apart. */
  margin-right: 5px;
  font-size: 12px;
}
._grid_1b69c_1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 16px 24px;
}

@media (width <= 768px) {
  ._grid_1b69c_1 {
    grid-template-columns: 1fr;
  }
}

._card_1b69c_14 {
  background: #fff;
  border: 1px solid #e1e1e1;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

._cardHeader_1b69c_23 {
  padding: 16px 20px;
  border-bottom: 1px solid #e1e1e1;
  display: flex;
  align-items: center;
  gap: 10px;
}

._iconBox_1b69c_31 {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

._icon_1b69c_31 {
  font-size: 18px;
  color: #323130;
}

._cardTitle_1b69c_46 {
  font-weight: 600;
  color: #323130;
}

._cardBody_1b69c_51 {
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._cardLead_1b69c_58 {
  color: #605e5c;
  font-size: 12px;
}

._cardBullets_1b69c_63 {
  color: #323130;
  font-size: 12px;
  line-height: 1.6;
  margin: 0 0 4px 18px;
  padding: 0;
}

._cardBullets_1b69c_63 li {
  margin: 0;
  padding: 0;
}

._cardCta_1b69c_76 {
  width: 100%;
}

._cardCtaHint_1b69c_80 {
  color: #605e5c;
  text-align: center;
  font-style: italic;
}