/**************************************************************************************************************
 * CSS Template
 **************************************************************************************************************/

:root {
  --primary: var(--blue); /* e.g. rgba(41, 150, 204, 1) */
  --accent: var(--dark-blue); /* rgba(17, 44, 116, 1) */
  --warn: var(--dark-red); /* rgba(208, 50, 55, 1) */

  /* main background color and text color */
  --background-color: white;
  --color: #353535;

  /* logo */
  --logo: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjE1MCIgdmlld0JveD0iMCAwIDMwMCAxNTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHRleHQgeD0iNTAlIiB5PSI1MCUiIGRvbWluYW50LWJhc2VsaW5lPSJtaWRkbGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiCiAgICAgICAgZm9udC1mYW1pbHk9IkFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjcyIiBmaWxsPSJ3aGl0ZSIgZm9udC13ZWlnaHQ9ImJvbGQiPgogICAgTE9HTwogIDwvdGV4dD4KPC9zdmc+');
  /*--logo-size: contain;*/

  /* app header background color, image and text color */
  --header-background-color: var(--accent);
  --header-background-image: unset;
  --header-color: white;

  /* app footer background color, text color */
  --footer-background-color: unset;
  --footer-color: unset;

  /* user menu button background color and text color */
  --user-button-background-color: unset;
  --user-button-color: unset;

  /* primary button background color and text color */
  --primary-button-background-color: var(--primary); /* (e.g. blue) */
  --primary-button-color: white; /* (e.g. white) */

  /* secondary button background color and text color */
  --secondary-button-background-color: var(--blue-20); /* (e.g. blue) */
  --secondary-button-color: var(--primary); /* (e.g. white) */

  /* table background color and border color */
  --table-background-color: white; /* (e.g. white) */

  /* outline color */
  --outline: lightgray; /* (e.g. blue) */
}

/** CSS definitions **/

body {
  --mat-sys-on-surface-variant: var(--color);
  --mat-sys-outline: var(--color);
  --mat-sys-primary: var(--primary);
  --mat-sys-on-primary: var(--primary-button-color);
  --mat-icon-color: var(--primary);
  --mat-sys-surface: var(--background-color);

  --mat-table-background-color: var(--table-background-color, var(--background-color)) !important;
  --mat-paginator-container-text-color: var(--mat-sys-on-surface-variant, inherit) !important;
  --mat-select-enabled-arrow-color: var(--mat-sys-on-surface-variant) !important;
  --mat-select-enabled-trigger-text-color: var(--mat-sys-on-surface-variant) !important;
  --mat-sort-arrow-color: var(--mat-sys-on-surface-variant) !important;
  --mat-select-focused-arrow-color: var(--mat-sys-primary) !important;
  --mat-option-selected-state-label-text-color: var(--mat-sys-primary) !important;
  --mat-select-panel-background-color: var(--background-color) !important;
  --mat-menu-container-color: var(--background-color) !important;
  --mat-option-label-text-color: var(--mat-sys-on-surface-variant) !important;
  --mat-radio-checked-ripple-color: var(--mat-sys-primary) !important;
  --mat-paginator-enabled-icon-color: var(--mat-sys-primary) !important;
  --mat-timepicker-container-background-color: var(--mat-sys-surface) !important;
  --mat-datepicker-calendar-date-selected-state-background-color: var(--mat-sys-primary) !important;
  --mdc-circular-progress-active-indicator-color: var(--mat-sys-primary) !important;

  --mdc-outlined-text-field-hover-outline-color: var(--mat-sys-primary) !important;
  --mdc-outlined-text-field-focus-outline-color: var(--mat-sys-primary) !important;
  --mdc-outlined-text-field-outline-color: var(--mat-sys-outline) !important;
  --mdc-outlined-text-field-caret-color: var(--mat-sys-primary) !important;
  --mdc-outlined-text-field-input-text-color: var(--mat-sys-on-surface-variant) !important;
  --mdc-filled-button-container-color: var(--mat-sys-surface) !important;
  --mdc-filled-button-label-text-color: var(--mat-sys-primary) !important;
  --mdc-checkbox-selected-checkmark-color: var(--mat-sys-on-primary) !important;


  --Schemes-Outline-Variant: var(--mat-sys-outline) !important;
  --Schemes-Surface: var(--mat-sys-surface) !important;
  --M3-sys-light-surface: var(--mat-sys-surface) !important;
  --M3-sys-light-outline-variant: var(--mat-sys-on-surface-variant) !important;
  --M3-sys-light-outline: var(--mat-sys-primary) !important;

  background-color: var(--background-color);
  color: var(--color);
}

header,
header:before {
  background-color: var(--header-background-color, var(--background-color)) !important;
  background-image: var(--header-background-image) !important;
}

header .pas-font,
header:before,
header {
  color: var(--header-color, var(--color)) !important;
}

header .mat-icon {
  --mat-icon-color: var(--header-color, var(--color)) !important;
}

.logo {
  background-image: var(--logo) !important;
  background-size: var(--logo-size, contain) !important;
  background-repeat: no-repeat !important;
  background-position: var(--logo-position, left center) !important;
  height: var(--logo-height, 60px) !important;
}

.pas-user-button button {
  background-color: var(--user-button-background-color, var(--header-background-color, var(--background-color))) !important;
  color: var(var(--user-button-color, --header-color, var(--color))) !important;
}

.pas-app-layout-user-menu hr {
  background-color: var(--outline) !important;
}

footer {
  background-color: var(--footer-background-color, var(--background-color)) !important;
  color: var(--footer-color, var(--color)) !important;
}

.pas-primary-button button {
  background-color: var(--primary-button-background-color, var(--primary)) !important;
}

.pas-primary-button .mat-icon {
  color: var(--primary-button-color, inherit) !important;
  fill: var(--primary-button-color, inherit) !important;
}

.pas-primary-button .pas-font {
  color: var(--primary-button-color, inherit) !important;
}

.mat-icon,
.mat-icon.mat-primary {
  color: var(--mat-icon-color, var(--primary)) !important;
  fill: var(--mat-icon-color, var(--primary)) !important;
  --mat-icon-color: var(--mat-icon-color, var(--primary)) !important;
}

.mdc-checkbox__native-control:enabled:checked ~ .mdc-checkbox__background,
.mdc-checkbox__native-control:enabled:indeterminate ~ .mdc-checkbox__background {
  --mdc-checkbox-selected-icon-color: var(--mat-sys-primary, var(--primary)) !important;
  border-color: var(--mdc-checkbox-selected-icon-color, var(--mat-sys-primary)) !important;
  background-color: var(--mdc-checkbox-selected-icon-color, var(--mat-sys-primary)) !important;
}

.mdc-checkbox__background {
  --mdc-checkbox-unselected-icon-color: var(--mat-sys-on-surface-variant, inherit) !important;
  --mdc-checkbox-unselected-hover-icon-color: var(--mat-sys-on-surface-variant, inherit) !important;
  --mdc-checkbox-unselected-focus-icon-color: var(--mat-sys-on-surface-variant, inherit) !important;
}

.mat-mdc-checkbox.pas-mat-checkbox .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background .mdc-checkbox__checkmark,
.mat-mdc-checkbox.pas-mat-checkbox .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background .mdc-checkbox__mixedmark {
  --mdc-checkbox-selected-checkmark-color: var(--mdc-checkbox-selected-checkmark-color, inherit) !important;
}

.mat-mdc-checkbox .mdc-checkbox__ripple {
  --mdc-checkbox-selected-pressed-state-layer-color: var(--mat-sys-primary) !important;
  --mdc-checkbox-selected-focus-state-layer-color: var(--mat-sys-primary) !important;
}

.mat-mdc-form-field.pas-file-upload button {
  color: var(--mat-sys-primary, var(--primary)) !important;
}

.mat-mdc-form-field.pas-file-upload .file-name {
  color: var(--mat-sys-primary, inherit) !important;
}

.mdc-linear-progress__bar-inner {
  --mdc-linear-progress-active-indicator-color: var(--mat-sys-primary, var(--primary)) !important;
}

.mat-mdc-form-field.pas-file-upload .drag-and-drop-container.ppe-drag-and-drop-container {
  border-color: var(--mat-sys-primary) !important;
  background-color: var(--background-color) !important;
  background-image: linear-gradient(rgba(255, 255, 255, 0.9)), linear-gradient(var(--mat-sys-primary)) !important;
}

.drag-zone-info,
.drag-zone-label {
  color: var(--mat-sys-on-surface-variant, inherit) !important;
}

/*.mat-mdc-paginator-touch-target,*/
.pas-data-table-lazy,
.pas-data-table {
  /*--mat-table-row-item-outline-color: var(--mat-sys-outline) !important;*/
  --pas-form-element-table-item-outline-color: var(--mat-sys-outline) !important;
  --Schemes-Surface: var(--mat-table-background-color) !important;
  --pas-form-element-paginator-selct-field-background-color: var(--mat-table-background-color) !important;
  background-color: var(--mat-table-background-color) !important;
  color: var(--mat-sys-on-surface-variant, inherit) !important;
}

.pas-data-list {
  --pas-form-element-table-row-ripple-color: unset !important;
}

.mat-mdc-table.pas-data-table-mat-table .mat-mdc-row:nth-child(even) {
  background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), linear-gradient(var(--mat-table-background-color), var(--mat-table-background-color)) !important;

}

.mat-mdc-header-row {
  background-color: unset !important;
  background-image: linear-gradient(rgba(0, 0, 0, 0.2)), linear-gradient(var(--mat-table-background-color)) !important;
}

.pas-font {
  color: var(--color, inherit) !important;
}

.mat-mdc-form-field {

}

.mdc-text-field__input::placeholder,
.mdc-text-field__input {
  color: var(--mat-sys-on-surface-variant, inherit) !important;
}

.mdc-text-field__input::placeholder {
  opacity: 0.5 !important;
}

.pas-avatar > * {
  background-color: unset !important;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.8)), radial-gradient(circle, var(--mat-sys-primary)) !important;
  color: var(--mat-sys-primary, inherit) !important;
}

.mat-mdc-radio-button.mat-primary {
  --mat-radio-checked-ripple-color: var(--mat-sys-on-surface-variant) !important;

  --mdc-radio-selected-icon-color: var(--mat-sys-primary) !important;
  --mdc-radio-selected-focus-icon-color: var(--mat-sys-primary) !important;
  --mdc-radio-selected-hover-icon-color: var(--mat-sys-primary) !important;
  --mdc-radio-selected-pressed-icon-color: var(--mat-sys-primary) !important;

  --mdc-radio-unselected-icon-color: var(--mat-sys-on-surface-variant) !important;
  --mdc-radio-unselected-focus-icon-color: var(--mat-sys-on-surface-variant) !important;
  --mdc-radio-unselected-hover-icon-color: var(--mat-sys-on-surface-variant) !important;
  --mdc-radio-unselected-pressed-icon-color: var(--mat-sys-on-surface-variant) !important;
}

.mat-calendar-body-today:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
  --mat-datepicker-calendar-date-today-outline-color: var(--mat-sys-primary) !important;
  --mat-datepicker-calendar-date-text-color: var(--mat-sys-primary) !important;
}

.mat-datepicker-content {
  --mat-datepicker-calendar-container-background-color: var(--mat-sys-surface) !important;
  --mat-datepicker-calendar-container-text-color: var(--mat-sys-on-surface) !important;
}

.mat-datepicker-content ppe-icon-button-next .mat-icon,
.mat-datepicker-content ppe-icon-button-previous .mat-icon {
  color: var(--mat-sys-on-surface) !important;
  fill: var(--mat-sys-on-surface) !important;
}

.pas-date-input-mat-calendar ~ .mat-datepicker-actions .pas-datetime-input-timepicker-container .mat-mdc-form-field .mat-mdc-text-field-wrapper {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.9)), radial-gradient(circle, var(--mat-sys-primary)) !important;
}

.mat-datepicker-content .mat-calendar-table-header {
  --mat-datepicker-calendar-header-text-color: var(--mat-sys-on-surface) !important;
}

.mat-calendar-body-cell-content {
  color: var(--color) !important;
}

.pas-date-input-am-pm-switch-mat-button-toggle-group {
  --mat-standard-button-toggle-selected-state-text-color: var(--primary-button-color) !important;
  --mat-standard-button-toggle-selected-state-background-color: var(--mat-sys-primary) !important;
  --mat-standard-button-toggle-background-color: var(--mat-sys-surface) !important;
  --mat-standard-button-toggle-text-color: var(--mat-sys-on-surface) !important;
  --mat-standard-button-toggle-divider-color: var(--mat-sys-surface) !important;
}

.pas-date-input-select-period-content .mat-icon {
  --mat-sys-on-surface: var(--color) !important;
  color: var(--mat-sys-on-surface) !important;
  fill: var(--mat-sys-on-surface) !important;
}

.mat-calendar-body-selected {
  color: var(--primary-button-color) !important;
}

.pas-secondary-button .mdc-button.pas-mat-button:not([disabled]) {
  background-color: var(--secondary-button-background-color) !important;
}

.pas-secondary-button .pas-font {
  color: var(--secondary-button-color) !important;
}

.pas-text-button:not(.pas-primary-button) .pas-font {
  color: var(--mat-sys-primary) !important;
}

.pas-primary-button.pas-text-button .pas-font {
  color: var(--primary-button-color) !important;
}