/* Taken from https://www.figma.com/design/BJNHvdL9j4WCPxN5y3UVbz/NEW-DELPHIUS?node-id=12166-8282&p=f&t=IecbUgvGbmOx1uTD-0 */
/* COLLAPSABLECONTAINER */
.collapse-header-left {
  display: flex;
  align-items: center;
  flex-grow: 1;
  /* So it fills the left space */
}
/* Phone number */
.flex-content {
  display: flex;
  gap: 8px;
  align-items: center;
}
/* Card Expiry */
.expiry-wrapper {
  position: relative;
  display: inline-block;
}
.expiry-dropdown {
  position: absolute;
  top: 100%;
  z-index: 9999;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  background-color: white;
}
/* Primary disable button */
.custom-disabled-button.mud-button {
  background-color: var(--mud-palette-primary) !important;
  color: var(--mud-palette-primary-text) !important;
  opacity: 0.6;
  pointer-events: none;
}
/* Multi select */
.mud-list-subheader {
  padding: 8px 2px;
}
.mud-list-item {
  padding: 2px 8px;
}
/* More specific selector to override MudBlazor */
.mud-expand-panel.custom-expansion-panel .mud-expand-panel-header {
  padding: 8px 12px;
  /* or whatever values you prefer */
}
.progress-circle-wrapper {
  position: relative;
  width: 60px;
  /* match Size.Large visually */
  height: 60px;
  display: inline-block;
  margin-right: 8px;
  /* spacing from text */
}
.progress-circle-bg,
.progress-circle-fg {
  position: absolute;
  top: 0;
  left: 0;
}
.progress-text {
  position: absolute;
  top: 46%;
  left: 45%;
  transform: translate(-46%, -45%);
  font-size: 0.75rem;
  /* adjust as needed */
  font-weight: 600;
  color: black;
  z-index: 2;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}
.green-check {
  font-size: 28px;
  color: green;
  top: 42%;
  left: 42%;
  transform: translate(-42%, -42%);
  position: absolute;
}
.custom-dialog {
  width: 810px;
  max-width: 95%;
  max-height: 96vh;
}
.custom-dialog .mud-dialog-title {
  background-color: #3f51b5;
  color: white;
  padding: 8px;
  /*min-height: 56px;*/
  display: flex;
  align-items: center;
}
.custom-dialog .mud-dialog-title .mud-button-close {
  color: white;
  top: auto;
  padding: 1px;
}
.dialog-title-text {
  font-weight: 600;
}
.file-name {
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}
.custom-dialog .mud-dialog-content {
  overflow-y: auto;
  max-height: calc(96vh - 100px);
}
.custom-dialog .mud-toolbar {
  height: 20px;
}
/* For Time Picker */
.time-select-wrapper {
  position: relative;
  display: inline-block;
}
.custom-popover {
  background-color: white !important;
  border: 1px solid #1976d2;
  padding: 16px;
  border-radius: 4px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 2000 !important;
  width: 550px;
  height: 500px;
}
.popover-content {
  display: inline-flex;
  gap: 1rem;
  max-width: 550px;
  max-height: 500px;
  margin-top: 10px;
}
.time-list {
  width: 150px;
  max-height: 390px;
}
.time-list.scrollable {
  overflow-y: auto;
}
.time-item {
  padding: 0.5rem;
  cursor: pointer;
  font-size: 14px;
}
.time-item.sticky {
  position: sticky;
  top: 0;
  font-weight: bold;
  margin-bottom: 4px;
}
.time-item.selected {
  background-color: #1976d2;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.time-clock {
  display: flex;
  align-items: center;
}
.selected-big-time {
  font-size: 40px;
  padding-left: 40px;
}
.mud-icon-button:hover {
  background-color: white;
}
/* Time Picker */