body {
  font-family: system-ui;
  font-weight: 300;
}

h2, h3, h4, .h2, .h3, .h4 {
  font-family: 'Roboto' !important;
  font-weight: 300;
  text-decoration: none;
}

/* Modern table styles */

/* Payment Methods List Styling */
#paymentMethodsTable {
  border-collapse: separate;
  border-spacing: 0 10px; /* Add space between rows */
  margin-top: 15px;
  background: transparent; /* Override general table background if needed */
  box-shadow: none; /* Override general table shadow if needed */
}

#paymentMethodsTable thead th {
  border-bottom: 2px solid #dee2e6;
  padding-bottom: 10px;
  font-weight: 600;
  background: transparent; /* Override general table th background */
  color: #283044; /* Keep text color or adjust */
}

#paymentMethodsTable tbody tr {
  background-color: #f8f9fa; /* Light background for each card item */
  border-radius: 5px; /* Rounded corners for each item */
  box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* Subtle shadow */
  transition: box-shadow 0.2s ease-in-out;
}

#paymentMethodsTable tbody tr:hover {
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  background-color: #f1f3f5; /* Slightly different hover for these rows */
}

#paymentMethodsTable tbody td {
  padding: 15px; /* More padding within cells */
  vertical-align: middle;
  border-top: none; /* Remove top border for "card" look */
  border-bottom: none; /* Remove bottom border */
  background-color: transparent; /* Let the TR background show */
}
/* Ensure first and last cells in a row have rounded corners if table has border-radius */
#paymentMethodsTable tbody tr td:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
#paymentMethodsTable tbody tr td:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}


/* Specific cell styling */
#paymentMethodsTable .card-brand-icon { /* Class for the icon itself */
  font-size: 1.8em; /* Larger card icons */
  margin-right: 12px;
  vertical-align: middle;
  color: #333; /* Default icon color */
}
/* Specific brand colors - add more as needed */
#paymentMethodsTable .fa-cc-visa { color: #1A1F71; }
#paymentMethodsTable .fa-cc-mastercard { color: #EB001B; }
#paymentMethodsTable .fa-cc-amex { color: #2671B9; }
#paymentMethodsTable .fa-cc-discover { color: #FF6000; }


#paymentMethodsTable .card-brand-name {
  font-weight: 500;
  color: #333;
  vertical-align: middle;
}

#paymentMethodsTable .card-last4,
#paymentMethodsTable .card-expiry {
  color: #555;
  font-size: 0.95em;
  vertical-align: middle;
}

#paymentMethodsTable .card-default .fa-check-circle {
  font-size: 1.2em;
  vertical-align: middle;
}
#paymentMethodsTable .card-default .text-success {
    font-weight: 500;
    vertical-align: middle;
}


/* Action buttons styling */
#paymentMethodsTable .card-actions .btn-link {
  padding: 0.25rem 0.5rem;
  text-decoration: none; /* Remove underline from link buttons */
  font-size: 1.1em; /* Slightly larger action icons */
  vertical-align: middle;
}
#paymentMethodsTable .card-actions .btn-link:hover {
  background-color: #e9ecef; /* Slight hover effect */
}
#paymentMethodsTable .card-actions .btn-link + .btn-link {
  margin-left: 8px; /* Space between action buttons */
}

/* Remove default table borders if using border-spacing */
/* This is handled by border: none on TDs and specific styling for TR */

/* End Payment Methods List Styling */

/* Modern table styles */
table, .table {
  border-radius: 5px;
  box-shadow: 0 1px 8px rgba(30, 60, 90, 0.07);
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  overflow: hidden;
}

table th, .table th {
  background: #f4f8fb;
  color: #283044;
  padding: 14px 14px;
  font-weight: 500;
  border-bottom: 2px solid #e2e6ea;
}

table td, .table td {
  padding: 12px 14px;
  color: #3f4656;
  border-bottom: 1px solid #f0f4f8;
  background: #fff;
  transition: background 0.17s;
}

table tr:nth-child(even) td, .table tr:nth-child(even) td {
  background: #f8fafc;
}

table tr:hover td, .table tr:hover th {
  background: #e7f1fb;
}

.coretable th, .coretable td {
  padding: 10px 16px !important;
  font-family: 'system-ui', 'Segoe UI', 'Arial', sans-serif;
  font-size: 1rem;
}
.coretable th {
  font-weight: 700;
  background: #eaeef4 !important;
  color: #17213c !important;
  letter-spacing: 0.03em;
  box-shadow: 0 2px 0 0 #dde3ee;
}

table th, .table th {
  font-weight: 700;
}

table thead {
  background: #f3f7fa !important;
}

/* Remove double-border at end */
table tr:last-child td, .table tr:last-child td {
  border-bottom: none;
}

table td {
  vertical-align: middle !important;
}

input {
  font-family: Roboto;
  font-weight: 300;
}

.navbar {
  background-color: black;
}

.navbar-brand {
  font-family: "Helvetica"
}

.edi-analytics {
  font-weight: 100;
  color: whitesmoke;
}

#diner_summary_box{
  width: 20%;
  height: 400px;
  background-color: whitesmoke;
  display: inline-block;
  margin-right: 120px;
}

.monospace-left {
  text-align: left;
  font-family: 'Roboto Mono', Consolas, 'IBM Plex Mono', monospace;
}


.left {
  text-align: left !important;
}

.right {
  text-align: right !important;
}

.monospace {
  font-family: 'Roboto Mono', Consolas, 'IBM Plex Mono', monospace !important;
}

.login_header1 {
  font-family: Roboto;
  font-weight: 100;
  color: grey;
  font-size: 60pt;
}
.home_header1{
  font-family: Roboto;
  font-weight: 100;
  text-align: center;
  display: block;
  color: grey;
  font-size: 60pt;
  padding-top: 40px;
  margin: 0;
}

.home_header2{
  font-family: Roboto;
  font-weight: 100;
  text-align: center;
  display: block;
  color: grey;
  font-size: 24pt;
  margin-top: -20px;
}

.home_container_large{
  display: block;
  text-align: center;
  margin: auto;
  width: auto;
  margin-top: 30px;
}

.home_container_small{
  display: inline-block;
  height: 180px;
}

.header-btn {
  margin-bottom: 10px;
}

.preview {
  .ignore-css{all:unset;}
}

/* allow multi line tooltips */
.tooltip-inner {
  white-space:pre-wrap;
}

.drillDown {
  cursor: pointer;
}

.loader {
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.priority_feature {

}

.not_priority_feature {
  display: none;
}

.loadingModal {
  position: absolute;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.6);
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.lds-text {
  display: flex;
}

.lds-dual-ring:after {
  content: " ";
  display: flex;
  width: 64px;
  height: 64px;
  margin: 8px;
  border-radius: 50%;
  border: 6px solid #fff;
  border-color: #fff transparent #fff transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.user-avatar {
  height: 48;
  width: 48;
  border-radius: 50%;
}

.user-avatar-big {
  height: 256;
  width: 256;
  border-radius: 50%;
}

.user-avatar-small {
  height: 32;
  width: 32;
  border-radius: 50%;
}

.knowledgegroup {
  background-color: #f3f3f3;
  border-radius: 8px;
  padding: 8px;
}

.knowledgegroupDesc {
  font-size: 8pt;
  display: 'block';
  margin-bottom: 8px;
} 

#chatContext {
  display: flex;
  background-color: white; /* Background color */
  flex-direction: column;
  padding-left: 10px;
  height: calc(100vh - 200px);
  overflow-y: auto;
}

#chatContextPublic {
  position: fixed;
  bottom: 0; /* Pin to bottom */
  top: 70;
  right: 0;
  left: 0; /* 250 */
  background-color: white; /* Background color */
  flex-direction: column;
  display: flex;
  padding-left: 10px;
}

.chatWindow {
  flex-grow: 1;
  overflow-y: auto; 
}

.chatWarning {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 8pt;
  /* yellowish background */

  background-color: #fff3cd;
  border-color: #ffeeba;
  border-radius: 4px;
  margin-left: 10px;
  margin-right: 10px;

  position: relative;
  bottom: 5px;
}

#chatEntry {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
}

#dropZone {
  border-style: dashed;
  height: 200px;
  background-color: #007bff; /* Bootstrap primary color */
  color: #fff; /* White text color */
  transition: background-color 0.3s, box-shadow 0.3s; /* Smooth transition for background and shadow */
}
/* Highlight effect when dragging files over */
#dropZone.highlight {
  background-color: #0056b3; /* Darker blue when highlighted */
  box-shadow: 0 0 10px #4d90fe; /* Light blue shadow */
}

#chatFooter {
  padding: 10px;
  text-align: center;
}

.wide-column-50 {
  white-space: nowrap;
  max-width: 50%;
}

.wide-column-20 {
  white-space: nowrap;
  max-width: 20%;
}

.mono {
  font-family: 'Roboto Mono', 'Consolas', 'Menlo', 'Monaco', 'Liberation Mono', monospace !important;
  font-size: 0.97em;
  letter-spacing: 0.01em;
  background: #fbfbfc;
  color: #23272c;
  padding-left: 6px;
  padding-right: 6px;
  text-align: right;
}

.font-monospace {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Billing Tab Styles */
#billing h3 {
  margin-bottom: 1.5rem; /* Or a suitable value for spacing below the main tab title */
  font-weight: 500; /* Ensure consistent font weight, adjust as needed */
}

#billing h4 {
  margin-bottom: 1rem; /* Or another suitable value */
}

.limits-table {
  max-width: 450px; /* Slightly adjusted max-width */
  margin-bottom: 2rem; /* Increased bottom margin for better separation */
  border: 1px solid #dee2e6; /* Softer border than table-bordered default */
  border-radius: 0.25rem; /* Optional: match Bootstrap's default border-radius */
}

.limits-table th,
.limits-table td {
  padding: 0.75rem; /* Consistent padding */
  vertical-align: middle;
}

.limits-table th {
  width: 60%; /* Restoring the width previously set inline */
  background-color: #f8f9fa; /* Light background for the header */
  font-weight: 500; /* Standard font-weight for table headers */
  border-bottom: 1px solid #dee2e6; /* Separator for header */
}

/* Style for the Add New Card button - primarily for margin if flex alignment isn't enough */
.add-new-card-btn {
    /* Potentially add margin-left: auto; if it were not for justify-content-between on parent */
    /* No specific styles needed if Bootstrap classes on H4 handle alignment and spacing */
}

/* Refined Payment Methods Table Styles */
#paymentMethodsTable thead th {
  /* font-weight: 600; is existing */
  /* color: #283044; /* Existing */
  /* text-transform: uppercase; /* Optional: Consider for a more formal look */
  /* letter-spacing: 0.05em; /* Optional: Consider for refinement */
  padding-top: 0.75rem; /* Adjusted padding */
  padding-bottom: 0.75rem; /* Adjusted padding */
}

#paymentMethodsTable tbody tr {
  /* background-color: #f8f9fa; /* Existing */
  /* border-radius: 5px; /* Existing */
  /* box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* Existing */
  border: 1px solid #e9ecef; /* Softer top/bottom border for each card */
}

#paymentMethodsTable tbody tr:hover {
  /* box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Existing */
  /* background-color: #f1f3f5; /* Existing */
  border-color: #dee2e6; /* Slightly darken border on hover */
}

#paymentMethodsTable tbody td {
  padding: 1rem; /* Increased padding */
}

#paymentMethodsTable .card-last4,
#paymentMethodsTable .card-expiry {
  /* color: #555; /* Existing */
  font-size: 0.9em; /* Slightly smaller for secondary info */
}

#paymentMethodsTable .card-default .fa-check-circle {
  /* font-size: 1.2em; /* Existing */
  color: #28a745; /* Bootstrap success green */
}

#paymentMethodsTable .card-default .text-success {
    /* font-weight: 500; /* Existing */
    color: #28a745 !important; /* Ensure success color is applied */
}

/* Action Buttons in table */
#paymentMethodsTable .card-actions .btn {
    padding: 0.375rem 0.75rem; /* Standard Bootstrap sm button padding */
    font-size: 0.875rem; /* Standard Bootstrap sm button font size */
    margin-left: 0.25rem; /* Add small margin between buttons */
}
#paymentMethodsTable .card-actions .btn:first-child {
    margin-left: 0;
}

/* Styling for Payment Method Messages (Loading, Error, No Data) */
.payment-methods-messages {
    padding: 1rem;
    margin-top: 15px; /* Consistent with table's top margin */
    margin-bottom: 15px;
    text-align: center;
    border-radius: 0.25rem; /* Standard Bootstrap border radius */
}

/* Icon spacing for card headers and general use */
.me-2 {
  margin-right: 0.75rem !important; /* Increased from 0.5rem for better icon spacing */
}

/* Card header icon spacing */
.card-header i {
  margin-right: 0.75rem !important; /* Increased from 0.5rem for better icon spacing */
}

/* General icon spacing in card bodies */
.card-body i {
  margin-right: 0.75rem !important; /* Increased from 0.5rem for better icon spacing */
}

#paymentMethodsLoading.payment-methods-messages {
    background-color: #f8f9fa; /* Light background */
    color: #495057; /* Standard text color */
    /* Spinner is already in HTML */
}

#paymentMethodsError.payment-methods-messages {
    /* .alert .alert-danger classes from Bootstrap already provide good styling */
    /* Ensure text color contrasts, Bootstrap usually handles this well */
}

/* Simple copy-to-clipboard styling */
.copy-url-group {
  /* Use default Bootstrap input-group styling */
}

.copy-url-group .form-control {
  font-family: 'Roboto Mono', 'Consolas', 'Menlo', 'Monaco', 'Liberation Mono', monospace;
  font-size: 0.9em;
  background-color: #f8f9fa;
}

.copy-url-group .copy-btn {
  /* Standard Bootstrap button styling */
}

.copy-url-group .copy-btn i {
  margin-right: 0.75rem;
}

/* Form group spacing for copy URL sections */
.copy-url-section .form-group {
  margin-bottom: 1.5rem;
}

.copy-url-section .form-group:last-child {
  margin-bottom: 0;
}
