/* Base */
svg.mud-icon-root {
  display: none;
}

.mud-icon-button,
.mud-snackbar-icon {
  font-size: 1.5rem;
}

*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  border-radius: 4px;
  background-color: var(--color-transparent);
}

*::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: var(--color-basic-500);
}

@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--color-basic-500), var(--color-transparent);
  }
}

/* Popover */
.mud-popover {
  --arrow-color: #fff;
  margin-top: 6px;
  box-shadow: 0px 8px 12px #00000016;
  border-radius: 8px;
  filter: drop-shadow(0px 0px 1px #000);
}

  .mud-popover.mud-tooltip {
    --arrow-color: var(--color-basic-700);
    max-width: 368px !important;
  }

  .mud-popover::after {
    --translate-x: 0px;
    --rotate: 0deg;
    content: '';
    display: block;
    position: absolute;
    height: 6px;
    width: 12px;
    background-color: var(--arrow-color);
    clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
    transform: translateX(var(--translate-x)) rotate(var(--rotate));
  }

  .mud-popover.mud-popover-anchor-bottom-right::after,
  .mud-popover.mud-popover-anchor-bottom-left::after,
  .mud-popover.mud-popover-anchor-bottom-center::after {
    bottom: 99%;
  }

  .mud-popover.mud-popover-anchor-top-right,
  .mud-popover.mud-popover-anchor-top-left,
  .mud-popover.mud-popover-anchor-top-center {
    transform: translateY(-14px);
  }

    .mud-popover.mud-popover-anchor-top-right::after,
    .mud-popover.mud-popover-anchor-top-left::after,
    .mud-popover.mud-popover-anchor-top-center::after {
      --rotate: 180deg;
      top: 99%;
    }

  .mud-popover.mud-popover-top-right,
  .mud-popover.mud-popover-bottom-right {
    transform: translateX(4px);
  }

    .mud-popover.mud-popover-top-right::after,
    .mud-popover.mud-popover-bottom-right::after {
      right: 15px;
    }

  .mud-popover.mud-popover-top-center::after,
  .mud-popover.mud-popover-bottom-center::after {
    --translate-x: -50%;
    left: 50%;
  }

  .mud-popover.mud-popover-top-left,
  .mud-popover.mud-popover-bottom-left {
    transform: translateX(-4px);
  }

    .mud-popover.mud-popover-top-left::after,
    .mud-popover.mud-popover-bottom-left::after {
      left: 15px;
    }

  .mud-popover .mud-menu-list {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .mud-popover.mud-popover-top-center.mud-popover-anchor-top-center::after {
    content: unset;
  }

  .mud-popover .mud-menu-item {
    padding-block: 8px;
    padding-inline: 16px;
  }

  .mud-popover.popover-select {
    transform: unset;
    margin-top: 2px;
    overflow: hidden;
  }

    .mud-popover.popover-select::after {
      content: unset;
    }

/* Inputs */
.mud-input-control {
  --mud-palette-text-secondary: var(--color-basic-700);
}

  .mud-input-control + .mud-input-control {
    margin-top: 1rem;
  }

.mud-input.mud-input-text {
  padding: 12px 8px;
  border: 1px solid var(--color-basic-300);
  border-radius: 8px;
  background: var(--color-white);
}

.mud-input.mud-disabled {
  background-color: var(--color-basic-100);
}

.mud-input.mud-input-text.mud-input-error {
  border-color: var(--mud-palette-error)
}

.mud-input.mud-input-text input::placeholder {
  color: var(--color-basic-500);
}

.mud-input-label-inputcontrol {
  margin-bottom: 0.25rem;
  order: -1;
}

.mud-radio-group .mud-input-control + .mud-input-control {
  margin-top: 0;
}

.mud-checkbox {
  gap: 0.75rem;
}

  .mud-checkbox .mud-button-root {
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    padding: 0;
    margin-top: 1px;
    background-color: transparent;
    border: 1px solid var(--color-basic-500);
    border-radius: 4px;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    position: relative;
  }

    .mud-checkbox .mud-button-root .mud-icon-root {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 50%;
      left: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--color-white);
      transition-property: transform;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
      transition-duration: 300ms;
      transform: translate(0, -50%);
    }

    .mud-checkbox .mud-button-root.mud-checkbox-true {
      background-color: var(--color-secondary);
      border-color: var(--color-secondary);
    }

.mud-radio-input {
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  clip-path: inset(100%)
}

.mud-radio-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mud-radio {
  display: flex;
  margin: 0;
  gap: 0.75rem;
}

  .mud-radio .mud-icon-button {
    align-self: flex-start;
    padding: 0;
    margin-top: 1px;
  }

    .mud-radio .mud-icon-button:before {
      content: '';
      display: block;
      box-sizing: border-box;
      border: 1px solid var(--color-basic-500);
      border-radius: 9999px;
      height: 20px;
      width: 20px;
      transition-property: all;
      transition-timing-function: ease-out;
      transition-duration: 100ms;
    }

    .mud-radio .mud-icon-button.mud-checked:before {
      border: 6px solid var(--color-secondary);
      background-color: var(--color-white);
    }

.mud-picker-input-text input:first-child:has(~input) {
  text-align: right;
}

/* Buttons */
.btn .mud-input.mud-input-text {
  height: 100%;
  padding: 0 1rem;
  border: none;
  gap: 0.5rem;
}

.btn .mud-input-control-input-container {
  height: 100%;
}

.btn .mud-button-label:has(.mud-icon-root) {
  display: inline-flex;
}

/* Tables */
.mud-table {
  --padding-x: 1rem;
  --padding-y: 1rem;
  padding: var(--padding-y) var(--padding-x);
  border-radius: 1rem;
}

@media not all and (max-width: 768px) {
  .mud-table {
    --padding-x: 1.5rem;
  }
}

.mud-table .mud-progress-linear::before {
  background-color: var(--color-basic-300) !important;
  opacity: 1 !important;
}

.mud-table .mud-progress-linear .mud-progress-linear-bar {
  background-color: var(--color-primary) !important;
}

.mud-table-cell {
  vertical-align: top;
}

.mud-table-root .mud-table-body .mud-table-cell .mud-menu {
  position: static;
}

/* Header unit table */
.tables__header-units-table .mud-table {
  --mud-palette-table-lines: var(--color-basic-500);
  --mud-palette-action-default: var(--color-white);
  --mud-palette-surface: transparent;
  --mud-default-borderradius: 0;
  --table-offset-top: 32px;
  --table-offset-bottom: 60px;
  padding: 0;
}

  .tables__header-units-table .mud-table .mud-table-container {
    max-height: calc(100dvh - var(--header-height) - var(--table-offset-top) - var(--table-offset-bottom));
  }

  .tables__header-units-table .mud-table .mud-table-head .mud-table-cell {
    background-color: var(--mud-palette-table-lines);
    color: var(--color-white);
    border-color: var(--color-white);
  }

  .tables__header-units-table .mud-table td {
    border: none;
  }

    .tables__header-units-table .mud-table td:first-child {
      border-top-left-radius: 6px;
      border-bottom-left-radius: 6px;
    }

    .tables__header-units-table .mud-table td:last-child {
      border-top-right-radius: 6px;
      border-bottom-right-radius: 6px;
    }

@media not all and (max-width: 768px) {
  .tables__header-units-table .mud-table {
    --table-offset-top: 96px;
  }
}

/* Dialogs */
.mud-dialog {
  --mud-palette-action-default: var(--color-secondary);
  --padding-x: 1rem;
  --padding-y: 1rem;
}

  .mud-dialog h6 {
    font-size: 1.75rem;
    line-height: 1.2;
  }

  .mud-dialog .mud-dialog-title > *:first-child {
    flex: 1;
    border-right: 1px solid var(--color-basic-300);
    padding-right: 1rem;
  }

  .mud-dialog .mud-button-close {
    margin-left: 1rem;
  }

@media not all and (max-width: 768px) {
  .mud-dialog {
    --padding-x: 1.5rem;
  }
}

/* MudPicker */
.mud-picker-datepicker-toolbar {
  background-color: var(--mud-palette-table-lines) !important;
  padding-block: 1rem;
  padding-inline: 1.5rem;
}

.mud-button-year {
  padding-inline: 0.75rem;
  padding-block: 0.375rem;
  color: var(--mud-palette-primary);
}

.mud-button-date {
  padding-inline: 0.5rem;
  color: var(--mud-palette-text-primary);
  font-size: 1.75rem;
  line-height: 1.2;
}

.mud-button-month {
  color: var(--mud-palette-primary);
}

.mud-picker-calendar .mud-day {
  font-family: var(--mud-typography-h1-family) !important;
}

/* Expansion panels */
.mud-expand-panel.faq-category {
  border: none;
  border-top: 1px solid var(--mud-palette-lines-default);
}

  .mud-expand-panel.faq-category:first-child {
    border-top: none;
  }

  .mud-expand-panel.faq-category .mud-expand-panel-content:has(.pl-6) {
    padding: 0;
  }

.mud-expand-panel.mud-panel-expanded .mud-expand-panel-header.faq-category-header {
  border-bottom: 1px solid var(--mud-palette-lines-default);
}

.mud-expand-panel .mud-expand-panel-header.faq-category-header .mud-expand-panel-icon.mud-transform {
  transform: rotate(90deg);
}

/* Dropzone */

.mud-drop-zone .mud-dropitem-placeholder {
  border-radius: 6px;
  height: 40px;
  background: var(--color-basic-100);
  border: 1px solid var(--color-basic-300) !important;
}

  .mud-drop-zone .mud-dropitem-placeholder.d-none {
    display: none;
  }

/* Collapse component */
.cards__usage-card .mud-collapse-entered {
  overflow: auto;
}

/* Snackbar */
#mud-snackbar-container {
  --max: calc((var(--container-max-width) - (var(--gap) * 11)) / 12);
  top: calc(var(--header-height) - 8px);
  left: 0;
  right: 0;
  display: grid;
  row-gap: 1rem;
  grid-template-columns: minmax(0, 1fr) [outer-start] var(--padding-px) repeat(5, [content-start] minmax(0, var(--max)) [content-gap] var(--gap)) [content-start] minmax(0, var(--max)) [content-gap] calc(var(--gap) / 2) [half] calc(var(--gap) / 2) repeat(5, [content-start] minmax(0, var(--max)) [content-gap] var(--gap)) [content-start] minmax(0, var(--max)) [content-gap content-end] var(--padding-px) [outer-end] minmax(0, 1fr);
  grid-auto-rows: auto;
}

.mud-snackbar {
  grid-column: content;
  justify-self: center;
}

  .mud-snackbar .mud-snackbar-close-button {
    background-color: var(--color-basic-500);
    border-radius: 4px;
    padding: 0;
  }