.inail-mat-date-picker .mat-mdc-form-field-icon-suffix {
  padding: 0 !important;
}

/* Button per aprire il date picker */
.inail-mat-date-picker-toggle {
  position: relative !important;
  transform: translateY(60%) !important;
  width: 24px !important;
  height: 24px !important;
  right: 40px !important;
  background: transparent !important;
  border: none !important;
  font-size: 20px !important;
  color: #002E5F !important;
  padding: 1px 6px !important;
  outline: none !important;
}

.inail-mat-date-picker-toggle:focus {
  outline: 3px solid #19191a !important;
  outline-offset: 2px !important;
  border-radius: 2px !important;
}

.fa-calendar-disabled {
  color: #7E858B !important;
}

mat-form-field:has(mat-error.inail-mat-date-picker-error) .inail-mat-date-picker-toggle {
  color: #c9291b !important;

}

.inail-mat-label-container {
  width: max-content !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* Input date picker */
.mat-mdc-input-element[aria-owns^="mat-datepicker"] {
  outline: 1px solid #000000 !important;
  outline-offset: 2px !important;
}

/* Table all'interno del date picker */
.mat-calendar-content table {
  display: table !important;
}

.mat-calendar-content td,
.mat-calendar-content tr {
  background-color: white !important;
  color: black !important;
}

.mat-calendar-content th {
  color: white !important;
}

.mat-calendar-header {
  background-color: #002e5f !important;
}

mat-calendar table thead th {
  border: 2px solid #002e5f !important;
}

.mat-calendar-table-header-divider {
  display: none !important;
}

.mat-datepicker-content .mat-calendar-previous-button:not(.mat-mdc-button-disabled),
.mat-datepicker-content .mat-calendar-next-button:not(.mat-mdc-button-disabled) {
  color: white !important;
  background: transparent !important;
}

.mat-datepicker-content .mat-calendar-previous-button:not(.mat-mdc-button-disabled):focus,
.mat-datepicker-content .mat-calendar-next-button:not(.mat-mdc-button-disabled):focus {
  outline: 3px solid white !important;
  outline-offset: -10px !important;
  border-radius: 0px !important;
}

.mat-calendar-period-button:focus {
  outline: 3px solid white !important;
  outline-offset: -5px !important;
  border-radius: 0px !important;
}

.mat-datepicker-content .mat-calendar-previous-button:disabled,
.mat-datepicker-content .mat-calendar-next-button:disabled {
  // color: white !important;
  background: transparent !important;
}




.mat-calendar-arrow {
  fill: white !important;
}

.mat-calendar-controls {
  margin: 0 !important;
  justify-content: space-between;
}

.mat-calendar-content {
  padding: 0 !important;
}

.mat-datepicker-content .mat-calendar {
  height: auto !important;
}

/* Stile data odierna */
.mat-calendar-body-today {
  background-color: #0e821a !important;
  color: white !important;
  border-radius: 0 !important;
  border-color: transparent !important;
}

/* Stile data selezionata */
.mat-calendar-body-selected:not(.mat-calendar-body-today) {
  background-color: #3276b1 !important;
  color: white !important;
  border-radius: 0 !important;
  border-color: transparent !important;
}

/* Stile hover sulla data */
.mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical):not(.mat-calendar-body-today) {
  background: #002e5f !important;
  color: white !important;
  cursor: pointer !important;
  border-radius: 0 !important;
}

/* Stile hover sulla data con keyboard */
.cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),
.cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical):not(.mat-calendar-body-today) {
  background: #002e5f !important;
  color: white !important;
  cursor: pointer !important;
  border-radius: 0 !important;
}

.mat-calendar-body-selected.mat-calendar-body-today {
  box-shadow: none !important;
}

/* Date picker disabilitato, icona e button */
.mat-form-field-disabled button,
.mat-form-field-disabled em {
  cursor: not-allowed !important;
}

.inail-mat-date-picker-toggle[disabled] {
  opacity: 1 !important;
  cursor: not-allowed !important;
}

/* Date picker range*/
.inail-mat-date-picker-range {
  display: flex;
  display: flex;
  align-items: baseline;
}

.inail-mat-label-date-picker {
  margin-right: 5px !important;
  font-size: 14.44px !important;
}

mat-label,
label,
.mat-form-field-label {
  overflow: visible !important;
}

.date-range .mat-mdc-form-field-infix {
  padding-top: 0px !important;
}

// .date-range>div {
//   padding-left: 0px !important;
//   min-width: 200px !important;
//   max-width: 200px !important;
//   width: 200px !important;
// }

// .date-range .mdc-text-field {
//   padding-left: 0px !important;
// }

// .date-range>p {
//   line-height: 20.6333px !important;
//   font-size: 14.44px !important;
//   color: #000 !important;
//   margin-bottom: 3px !important;
// }

.mat-calendar-controls .mat-mdc-icon-button.mat-mdc-button-base {
  --mdc-icon-button-state-layer-size: 40px !important;
  width: var(--mdc-icon-button-state-layer-size) !important;
  height: var(--mdc-icon-button-state-layer-size) !important;
  padding: 8px !important;
}

.mdc-icon-button {
  display: inline-block !important;
  position: relative !important;
  box-sizing: border-box !important;
  border: none !important;
  outline: none !important;
  background-color: rgba(0, 0, 0, 0) !important;
  fill: currentColor !important;
  text-decoration: none !important;
  cursor: pointer !important;
  user-select: none !important;
  z-index: 0 !important;
  overflow: visible !important;
}

.mat-calendar-spacer {
  display: none;
}

.mat-calendar-header .mat-calendar-controls .mat-calendar-previous-button {
  position: absolute !important;
}

.mat-calendar-header .mat-calendar-controls .mat-mdc-button {
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.mat-datepicker-content .mat-calendar {
  width: 220px !important;
}

// .mat-mdc-form-field-infix:has(.mat-datepicker-input) {
//   max-width: 200px !important;
//   min-width: 200px !important;
//   width: 200px !important;
//   min-height: auto;
// }

//fixed width so the calendar isn't triggered when clicking outside the input
// . inail-mat-date-picker {
//   width: 200px !important;
// }

.mat-datepicker-content {
  padding: 5px;
  margin-top: 10px;
  /* Space between input and picker */
  border: 1px solid rgb(56, 56, 56);
  /* Border for the datepicker */
  background: white;
  border-radius: 6px;
  position: relative;
  //  Replace position: relative with the code below to lock the calendars BELOW the input field
  //  position: absolute !important;
  //  transform: translateY(0) !important;
}

/* Triangle seamlessly attached to the border */
.mat-datepicker-content[style*="transform-origin: left top"]::before {
  content: "";
  position: absolute;
  top: -8px;
  width: 0;
  height: 0;

  left: 5%;
  transform: translateX(-5%);

  /* Triangle with same border as datepicker */
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid rgb(56, 56, 56);
  /* Border color */
}

/* Inner white triangle to blend with background */
.mat-datepicker-content[style*="transform-origin: left top"]::after {
  content: "";
  position: absolute;
  top: -7px;
  width: 0;
  height: 0;

  left: calc(5% + 1px);
  transform: translateX(-5%);

  /* White inner triangle */
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid white;
}

/* Triangle when the datepicker is below the input */
.mat-datepicker-content[style*="transform-origin: left bottom"]::before {
  content: "";
  position: absolute;
  bottom: -8px;
  /* Move to bottom instead of top */
  width: 0;
  height: 0;

  left: 5%;
  transform: translateX(-5%);

  /* Triangle with same border as datepicker */
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid rgb(56, 56, 56);
  /* Adjusted for bottom */
}

/* Inner white triangle to blend with background */
.mat-datepicker-content[style*="transform-origin: left bottom"]::after {
  content: "";
  position: absolute;
  bottom: -7px;
  /* Move to bottom instead of top */
  width: 0;
  height: 0;

  left: calc(5% + 1px);
  transform: translateX(-5%);

  /* White inner triangle */
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid white;
  /* Adjusted for bottom */
}


.mat-calendar-arrow {
  display: none !important;
}

.mat-calendar-controls span {
  font-size: 11px;
  text-transform: lowercase;
  color: white !important;

  &::first-letter {
    text-transform: uppercase;
  }
}

.mat-calendar-body-label {
  opacity: 0;
}

.date-range .inail-mat-date-picker-toggle {
  top: 50%;
  transform: translateX(-120%) !important;
}

.mat-mdc-form-field-icon-suffix,
[dir=rtl] .mat-mdc-form-field-icon-prefix {
  width: 0px !important;
}

.inail-mat-date-picker-spacer {
  margin-right: 15px !important;
}

.inail-mat-date-picker-toggle-margin {
  top: 10px !important;
}

.inail-mat-date-picker-label {
  color: #19191A;
}

@media screen and (max-width: 768px) {

  /* Date picker range*/
  .inail-mat-date-picker-range {
    display: unset;
    display: unset;
    align-items: unset;
  }

  // .inail-mat-date-picker-toggle {
  //   top: 10px !important;
  // }
}

.inail-mat-date-range-title {
  font-weight: 600 !important;
  font-size: 18px !important;
  line-height: 24px !important;
  letter-spacing: 0px !important;
  vertical-align: middle !important;
  text-transform: uppercase !important;
  color: #19191A !important;
  border: none !important;
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}