/*************************************************/
/*************************************************/
/*****    component: visualizations-common    *****/
@commonVisErrorColor: #f44336;
@commonVisSuccessColor: #5BC069;
@commonVisWarningColor: #f0ad4e;

@commonVisTextColor: hsl(hue(@themePrimary), 0%, if(@isLightTheme, 63%, 90%));
@commonVisTextColorSecondary: hsl(0, 0%, if(@isLightTheme, 20%, 80%));
@commonVisTextColorActive: @themePrimary;
@commonVisTextColorHover: darken(@commonVisTextColorActive, 15%);

@commonVisDisabledColor: mix(@appBackgroundColor, @commonVisTextColor);

@commonVisBorderColor: if(@isLightTheme, darken(@appBackgroundColor, 9%), lighten(@appBackgroundColor, 9%));

@commonVisBackgroundPrimary: @appBackgroundColor;
@commonVisBackgroundSecondary: if(@isLightTheme, darken(@appBackgroundColor, 4%), lighten(@appBackgroundColor, 3%));
@commonVisBackgroundSecondaryAlt: hsl(hue(@themePrimary), saturation(@themePrimary), if(@isLightTheme, lightness(@appBackgroundColor) - 4%, lightness(@appBackgroundColor) + 4%));

// Common table
@commonVisTableHeaderBackgroundColor: @commonVisBackgroundSecondaryAlt;
@commonVisTableHeaderTextColor: @commonVisTextColorSecondary;
@commonVisTableHeaderSortIconColor: @commonVisTextColor;
@commonVisTableHeaderSortIconColorActive: @commonVisTextColorActive;
@commonVisTableHeaderBorderColor: if(@isLightTheme, darken(@commonVisBackgroundSecondaryAlt, 9%), lighten(@commonVisBackgroundSecondaryAlt, 9%));
@commonVisTableHeaderBorder: 1px solid @commonVisTableHeaderBorderColor;
@commonVisTableBodyBorderColor: @commonVisBorderColor;
@commonVisTableBodyBorder: 1px solid @commonVisTableBodyBorderColor;
@commonVisTableBodyRowBackgroundColor: @commonVisBackgroundPrimary;
@commonVisTableBodyRowBackgroundColorSecondary: @commonVisBackgroundSecondary;
@commonVisTableBodyRowTextColor: @commonVisTextColorSecondary;
@commonVisTableBodyRowCellTextColorAlt: #fff;

// Paging
@commonVisPagingTextColor: @commonVisTextColor;
@commonVisPagingBackgroundColor: @commonVisBackgroundSecondary;
@commonVisPagingBorderTopColor: @commonVisBorderColor;
@commonVisPagingTextColorDisabled: @commonVisDisabledColor;
@commonVisPagingCurrentPageBackgroundColor: @commonVisBackgroundPrimary;
@commonVisPagingCurrentPageBorderColor: @commonVisBorderColor;
@commonVisPagingCurrentPageBorderActive: @inputOutlinedBorderWidth @inputOutlinedBorderType @inputThemeColor;
@commonVisPagingCurrentPageBorderRadiusActive: @inputOutlinedBorderRadius;
@commonVisPagingCurrentPageBoxShadowActive: none;
@commonVisPagingCurrentPageBoxShadowError: none;
@commonVisPagingPageSizeTextColor: @commonVisTextColor;
@commonVisPagingPageSizeTextColorActive: @commonVisTextColorActive;

// Modal
@commonVisModalHeaderBackgroundColor: @commonVisBackgroundPrimary;
@commonVisModalHeaderTextColor: @commonVisTextColorSecondary;
@commonVisModalHeaderButtonColor: @commonVisTextColorSecondary;
@commonVisModalHeaderBorderBottomColor: @commonVisBorderColor;

@commonVisModalBodyTitleColor: @commonVisTextColorSecondary;
@commonVisModalBodyBackgroundColor: @commonVisBackgroundPrimary;
@commonVisModalBodyMultiControlAddColor: @commonVisSuccessColor;
@commonVisModalBodyMultiControlRemoveColor: @commonVisTextColorSecondary;

@commonVisModalFooterBackgroundColor: @commonVisBackgroundSecondary;
@commonVisModalFooterBorderTopColor: @commonVisBorderColor;
@commonVisModalBodyIconColor: if(boolean(lightness(@commonVisModalBodyTitleColor) > 50%), darken(@commonVisModalBodyTitleColor, 20%), lighten(@commonVisModalBodyTitleColor, 20%));

// Geo editor
@commonVisGeoEditorModalBodyColor: @commonVisTextColorSecondary;
@commonVisGeoEditorModalTabsBorderColor: @commonVisModalHeaderBorderBottomColor;
@commonVisGeoEditorModalTabsIndicatorColor: @themePrimary;

// Visualizations toolbar
@commonVisToolbarBackgroundColor: @commonVisBackgroundSecondary;
@commonVisToolbarTextColor: @commonVisTextColor;
@commonVisToolbarTextColorHover: @commonVisTextColorHover;
@commonVisToolbarTextColorActive: @commonVisTextColorActive;
@commonVisToolbarTextColorDisabled: @commonVisDisabledColor;
@commonVisToolbarProgressBarColor: if(@isLightTheme, darken(@commonVisToolbarBackgroundColor, 8%), lighten(@commonVisToolbarBackgroundColor, 6%));
@commonVisToolbarProgressBarSliderColor: @commonVisTextColorActive;

.bl-common-table {
  .bl-common-table-header {
    background-color: @commonVisTableHeaderBackgroundColor;
    color: @commonVisTableHeaderTextColor;
    border-bottom: @commonVisTableBodyBorder;
  }

  .bl-common-table-header__sorting {
    .bl-common-table-header__sorting-asc-icon,
    .bl-common-table-header__sorting-desc-icon {
      border: 5px solid @commonVisTableHeaderSortIconColor;
      border-left-color: transparent;
      border-right-color: transparent;
    }

    .bl-common-table-header__sorting-asc-icon {
      border-top: none;
    }

    .bl-common-table-header__sorting-desc-icon {
      border-bottom: none;
      margin-top: 2px;
    }

    &.asc {
      .bl-common-table-header__sorting-asc-icon {
        border-bottom-color: @commonVisTableHeaderSortIconColorActive;
      }
    }

    &.desc {
      .bl-common-table-header__sorting-desc-icon {
        border-top-color: @commonVisTableHeaderSortIconColorActive;
      }
    }
  }

  .bl-common-table-row {
    background-color: @commonVisTableBodyRowBackgroundColor;

    &:nth-of-type(even) {
      background-color: @commonVisTableBodyRowBackgroundColorSecondary;
    }
  }

  .bl-common-table-row__cell {
    color: @commonVisTableBodyRowTextColor;
  }

  .bl-common-table-header .bl-common-table-header__cell {
    border-right: @commonVisTableHeaderBorder;
  }

  .bl-common-table-row .bl-common-table-row__cell {
    border-bottom: @commonVisTableBodyBorder;
    border-right: @commonVisTableBodyBorder;
  }

  .bl-common-pagination {
    color: @commonVisPagingTextColor;
    background-color: @commonVisPagingBackgroundColor;
    border-top: 1px solid @commonVisPagingBorderTopColor;

    .bl-pagination-page-controls {
      .bl-pagination-page-control-arrow {
        &.bl-pagination-page-control-arrow--disabled {
          color: @commonVisPagingTextColorDisabled;
        }
      }

      .bl-pagination-page {
        background-color: @commonVisPagingCurrentPageBackgroundColor;
        color: @commonVisTextColor;
        border-color: @commonVisPagingCurrentPageBorderColor;

        &:focus {
          box-shadow: @commonVisPagingCurrentPageBoxShadowActive;
          border: @commonVisPagingCurrentPageBorderActive;
          border-radius: @commonVisPagingCurrentPageBorderRadiusActive;

          &.bl-pagination-page--has-error {
            border-color: @commonVisErrorColor;
            box-shadow: @commonVisPagingCurrentPageBoxShadowError;
          }
        }
      }
    }

    .bl-pagination-page-size-controls {
      color: @commonVisPagingPageSizeTextColor;

      .bl-pagination-page-size {
        * {
          color: @commonVisPagingPageSizeTextColor;
        }

        &.bl-active-button--active {
          * {
            color: @commonVisPagingPageSizeTextColorActive;
          }
        }

        &.bl-active-button--disabled {
          * {
            color: @commonVisPagingTextColorDisabled;
          }
        }
      }
    }
  }

  .bl-local-type--label {
    color: @commonVisTableBodyRowCellTextColorAlt;
  }

  .bl-yes-no-value__cell-value {
    .bl-local-type-label--success {
      background-color: @commonVisSuccessColor;
    }

    .bl-local-type-label--warning {
      background-color: @commonVisWarningColor;
    }

    .bl-local-type-label--danger {
      background-color: @commonVisErrorColor;
    }
  }
}

.bl-ui-sdk-modal {
  .bl-modal-content {
    .Mui-error, .bl-visualizations-text-danger {
      color: @commonVisErrorColor;
    }

    .bl-modal-header {
      background-color: @commonVisModalHeaderBackgroundColor;
      border-bottom-color: @commonVisModalHeaderBorderBottomColor;

      .bl-modal-header-title {
        color: @commonVisModalHeaderTextColor;
      }

      .bl-modal-header-button:before {
        color: @commonVisModalHeaderButtonColor
      }
    }

    .bl-modal-body {
      background-color: @commonVisModalBodyBackgroundColor;

      .bl-modal-field-label, .bl-control-label, .bl-control-field {
        color: @commonVisModalBodyTitleColor;
      }

      .bl-multiple {
        .remove-control {
          color: @commonVisModalBodyMultiControlRemoveColor
        }

        .add-control {
          color: @commonVisModalBodyMultiControlAddColor
        }
      }
    }

    .bl-modal-footer {
      background-color: @commonVisModalFooterBackgroundColor;
      border-top-color: @commonVisModalFooterBorderTopColor;
    }
  }
}

.bl-ui-sdk-modal.bl-visualization--data-table-records-editor {
  .bl-visualization--data-table-records-editor--column-type {
    color: @commonVisModalBodyTitleColor;
    opacity: 0.4;
  }

  .bl-control-field .bl-visualization-icon {
    color: @commonVisModalBodyIconColor;
  }

  .bl-geo-editor-input--type-switcher {
    span {
      color: @themePrimary;

      &.bl-visualization--checked {
        color: @commonVisModalBodyTitleColor
      }
    }
  }
}

.bl-ui-sdk-modal .bl-table-text-template-creator {
  background-color: hsla(hue(@themePrimary), 100%, lightness(@themePrimary), 0.05);

  .bl-text-template-label {
    color: @commonVisModalBodyTitleColor
  }

  .bl-visualizations-text-danger {
    color: @commonVisErrorColor
  }
}

.bl-visualization--geo-editor {
  .bl-modal-body {
    color: @commonVisGeoEditorModalBodyColor;
  }

  .bl-visualization--tabs-menu-container {
    border-bottom-color: @commonVisGeoEditorModalTabsBorderColor;
  }

  .bl-visualization--tabs-menu-container .bl-visualization--tabs-menu-indicator {
    background-color: @commonVisGeoEditorModalTabsIndicatorColor;
  }
}

.bl-table-column-path-builder {
  .bl-table-column-path-builder-item-label {
    color: @commonVisModalBodyTitleColor
  }
}

.bl-visualization-icon-danger {
  color: @commonVisErrorColor
}

.bl-calendar-visualization,
.bl-chart-visualization,
.bl-data-grid-visualization,
.bl-view-data-grid {
  .bl-visualization-toolbar {
    background-color: @commonVisToolbarBackgroundColor;

    .bl-visualization-toolbar__progress-bar {
      background-color: @commonVisToolbarProgressBarColor;
    }

    .bl-visualization-toolbar__progress-bar-slider {
      background-color: @commonVisToolbarProgressBarSliderColor;
    }
  }

  .bl-active-button.bl-visualization-component {
    * {
      color: @commonVisToolbarTextColor;
    }

    &:not(.bl-active-button--disabled):hover {
      * {
        color: @commonVisToolbarTextColorHover;
      }
    }

    &.bl-active-button--active {
      * {
        color: @commonVisToolbarTextColorActive;
      }
    }

    &.bl-active-button--disabled {
      * {
        color: @commonVisToolbarTextColorDisabled;
      }
    }
  }
}

/******    component: visualizations-common    *****/
/***************************************************/
/***************************************************/



/***********************************/
/***********************************/
/*****    component: button    *****/
@buttonThemeColor: @themePrimary;
@buttonDisabledColor: @disabledColor;
@buttonBorderRadius: @appComponentBorderRadius;
@buttonBorderWidth: @appComponentBorderWidth;
@buttonBorderType: solid;

@buttonContainedBackground: @buttonThemeColor;
@buttonContainedColor: contrast(@buttonContainedBackground);
@buttonContainedShadowColor: @appComponentShadowColor;
@buttonContainedShadowHover: 0px 2px 4px -1px fade(@buttonContainedShadowColor, 20%), 0px 4px 5px 0px fade(@buttonContainedShadowColor, 14%), 0px 1px 10px 0px fade(@buttonContainedShadowColor, 12%);
@buttonContainedShadowActive: 0px 5px 5px -3px fade(@buttonContainedShadowColor, 20%), 0px 8px 10px 1px fade(@buttonContainedShadowColor, 14%), 0px 3px 14px 2px fade(@buttonContainedShadowColor, 12%);
@buttonContainedDisabledBackground: @buttonDisabledColor;
@buttonContainedDisabledColor: contrast(@buttonContainedDisabledBackground);

@buttonOutlinedBackground: transparent;
@buttonOutlinedColor: @buttonThemeColor;
@buttonOutlinedBorderWidth: @buttonBorderWidth;
@buttonOutlinedBorderType: @buttonBorderType;
@buttonOutlinedBorderColor: @buttonOutlinedColor;
@buttonOutlinedBorder: @buttonOutlinedBorderWidth @buttonOutlinedBorderType @buttonOutlinedBorderColor;
@buttonOutlinedDisabledColor: @buttonDisabledColor;
@buttonOutlinedDisabledBorderWidth: @buttonOutlinedBorderWidth;
@buttonOutlinedDisabledBorderType: @buttonOutlinedBorderType;
@buttonOutlinedDisabledBorderColor: @buttonDisabledColor;
@buttonOutlinedDisabledBorder: @buttonOutlinedDisabledBorderWidth @buttonOutlinedDisabledBorderType @buttonOutlinedDisabledBorderColor;

@buttonTextBackground: transparent;
@buttonTextColor: @buttonThemeColor;
@buttonTextColorHover: fade(@buttonTextColor, 4%);
@buttonTextDisabledColor: @buttonDisabledColor;

@buttonSmallBorderRadius: @buttonBorderRadius;
@buttonMediumBorderRadius: @buttonBorderRadius;
@buttonLargeBorderRadius: @buttonBorderRadius;

//TODO: deprecated, leave it for backward compatibility
@buttonContainedBorderRadius: @buttonBorderRadius;

.bl-button {
  border-radius: @buttonMediumBorderRadius;

  .bl-icon {
    color: inherit;
  }

  &.bl-button--small {
    border-radius: @buttonSmallBorderRadius;
  }

  &.bl-button--large {
    border-radius: @buttonLargeBorderRadius;
  }

  &.bl-button--contained {
    &:not(.bl-button--disabled) {
      background: @buttonContainedBackground;
      color: @buttonContainedColor;

      &:not(.bl-button--unelevated) {
        &:hover {
          box-shadow: @buttonContainedShadowHover;
        }

        &:active,
        &:focus {
          box-shadow: @buttonContainedShadowActive;
        }
      }
    }

    &.bl-button--disabled {
      background: @buttonContainedDisabledBackground;
      color: @buttonContainedDisabledColor;
    }
  }

  &.bl-button--outlined {
    &:not(.bl-button--disabled) {
      background: @buttonOutlinedBackground;
      color: @buttonOutlinedColor;
      border: @buttonOutlinedBorder;
    }

    &.bl-button--disabled {
      border: @buttonOutlinedDisabledBorder;
      color: @buttonOutlinedDisabledColor;
    }
  }

  &.bl-button--text {
    &:not(.bl-button--disabled) {
      background: @buttonTextBackground;
      color: @buttonTextColor;

      &:hover {
        background: @buttonTextColorHover;
      }
    }

    &.bl-button--disabled {
      color: @buttonTextDisabledColor;
    }
  }

}

/*****    component: button    *****/
/***********************************/
/***********************************/


/*************************************/
/*************************************/
/*****    component: checkbox    *****/
@checkboxThemeColor: @themePrimary;

@checkboxUncheckedIconColor: @checkboxThemeColor;
@checkboxCheckedIconColor: @checkboxUncheckedIconColor;
@checkboxDisabledUncheckedIconColor: @disabledColor;
@checkboxDisabledCheckedIconColor: @checkboxDisabledUncheckedIconColor;

@checkboxUncheckedTextColor: @appTextColor;
@checkboxCheckedTextColor: @checkboxUncheckedTextColor;
@checkboxDisabledUncheckedTextColor: @disabledColor;
@checkboxDisabledCheckedTextColor: @checkboxDisabledUncheckedTextColor;

.bl-checkbox {
  .bl-checkbox-root {
    svg {
      color: currentColor;
    }
  }

  .variant(@iconColor, @labelColor) {
    color: @labelColor;

    .bl-checkbox-root {
      color: @iconColor;
    }

    .bl-checkbox-label {
      color: inherit;
    }
  }

  &:not(.bl-checkbox--disabled) {
    .bl-checkbox-root:hover {
      background-color: fade(@checkboxCheckedIconColor, 10%);
    }
  }

  &:not(.bl-checkbox--checked):not(.bl-checkbox--disabled) {
    .variant(@checkboxUncheckedIconColor, @checkboxUncheckedTextColor);
  }

  &.bl-checkbox--checked:not(.bl-checkbox--disabled) {
    .variant(@checkboxCheckedIconColor, @checkboxCheckedTextColor);
  }

  &.bl-checkbox--checked.bl-checkbox--disabled {
    .variant(@checkboxDisabledCheckedIconColor, @checkboxDisabledCheckedTextColor);
  }

  &:not(.bl-checkbox--checked).bl-checkbox--disabled {
    .variant(@checkboxDisabledUncheckedIconColor, @checkboxDisabledUncheckedTextColor);
  }
}

/*****    component: checkbox    *****/
/*************************************/
/*************************************/


/*****************************************/
/*****************************************/
/*****    component: color-picker    *****/
@colorPickerPaletteBackgroundColor: @appBackgroundColor;
@colorPickerPaletteInfoInputColor: hsl(0, 0%, if(@isLightTheme, 20%, 80%));
@colorPickerPaletteInfoInputBackground: @colorPickerPaletteBackgroundColor;
@colorPickerPaletteInfoInputLabelColor: mix(@colorPickerPaletteBackgroundColor, @colorPickerPaletteInfoInputColor);
@colorPickerPaletteInfoInputBorderColor: hsl(0, 0%, if(@isLightTheme, 80%, 20%));
@colorPickerPaletteInfoInputSwitcherColor: @colorPickerPaletteInfoInputColor;
@colorPickerPaletteInfoInputSwitcherBackground: @colorPickerPaletteBackgroundColor;
@colorPickerPaletteSwatchBorderColor: hsla(0, 0%, if(@isLightTheme, 0%, 100%), 0.1);

.bl-color-picker {
  &.bl-color-picker-button {
    background-color: white;
    cursor: pointer;
    width: 40px;
    height: 20px;
    flex-shrink: 0;
    border-radius: 1px;
    padding: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1)
  }

  &.bl-color-picker--disabled {
    cursor: not-allowed;
  }

  .bl-color-picker-button-color-container {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 2px;
    overflow: hidden;
  }

  .bl-color-picker-button-color, .bl-color-picker-button-no-color {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .bl-color-picker-button-no-color {
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.35) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0.35) 75%, transparent 75%, transparent);
    background-color: #d2d3d5;
  }
}

.bl-color-picker-popover {
  position: fixed;
  z-index: 1050;

  .bl-color-picker-popover-cover {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

  .bl-color-picker-palette-chrome {
    width: 225px;
    background: @colorPickerPaletteBackgroundColor;
    border-radius: 2px;
    box-shadow: rgba(0, 0, 0, 0.3) 0 0 2px, rgba(0, 0, 0, 0.3) 0 4px 8px;
    box-sizing: initial;
  }

  .bl-color-picker-palette-saturation-wrapper {
    width: 100%;
    padding-bottom: 55%;
    position: relative;
    border-radius: 2px 2px 0 0;
    overflow: hidden;
  }

  .bl-color-picker-palette-compact-wrapper {
    width: 100%;
    position: relative;
    overflow: hidden;
  }

  .bl-color-picker-palette-body {
    padding: 16px 16px 12px;
  }

  .bl-color-picker-palette-controls {
    display: flex;
  }

  .bl-color-picker-palette-controls-color {
    width: 32px;
  }

  .bl-color-picker-palette-controls-color-swatch {
    margin-top: 6px;
    width: 16px;
    height: 16px;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
  }

  .bl-color-picker-palette-controls-color-swatch-active {
    border-radius: 8px;
    box-shadow: @colorPickerPaletteSwatchBorderColor 0 0 0 1px inset;
    z-index: 2;
    width: 100%;
    height: 100%;
  }

  .bl-color-picker-palette-controls-toggles {
    flex: 1;
  }

  .bl-color-picker-palette-toggles-alpha-wrapper {
    height: 10px;
    position: relative;
  }

  .bl-color-picker-palette-toggles-hue-wrapper {
    height: 10px;
    position: relative;
    margin-bottom: 8px;
  }

  .bl-color-picker-palette-info {
    display: flex;

    & > div {
      flex: 1;
    }

    input {
      background: @colorPickerPaletteInfoInputBackground;
      color: @colorPickerPaletteInfoInputColor !important;
      box-shadow: @colorPickerPaletteInfoInputBorderColor 0 0 0 1px inset !important;
    }

    span {
      color:@colorPickerPaletteInfoInputLabelColor !important;;
    }

    svg {
      background: @colorPickerPaletteInfoInputSwitcherBackground !important;
      fill: @colorPickerPaletteInfoInputSwitcherColor;
    }
  }
}

/*****    component: color-picker    *****/
/*****************************************/
/*****************************************/


/********************************************/
/********************************************/
/*****    component: datetime-picker    *****/
@datetimePickerPrimaryThemeColor: @themePrimary;
@datetimePickerDisabledThemeColor: @disabledColor;

@datetimePickerLabelColor: @appTextColor;
@datetimePickerLabelColorActive: @appTextColor;
@datetimePickerLabelColorDisabled: @disabledColor;

//underline
@datetimePickerUnderlineInputColor: @appTextColor;
@datetimePickerUnderlineInputColorHover: NULL;

@datetimePickerUnderlineBorderColor: @datetimePickerPrimaryThemeColor;
@datetimePickerUnderlineBorderSize: NULL;
@datetimePickerUnderlineBorderType: NULL;
@datetimePickerUnderlineShadow: NULL;

@datetimePickerUnderlineBorderColorHover: @datetimePickerUnderlineBorderColor;
@datetimePickerUnderlineBorderSizeHover: NULL;
@datetimePickerUnderlineBorderTypeHover: NULL;
@datetimePickerUnderlineShadowHover: NULL;

@datetimePickerUnderlineBorderColorActive: @datetimePickerUnderlineBorderColor;
@datetimePickerUnderlineBorderSizeActive: NULL;
@datetimePickerUnderlineBorderTypeActive: NULL;
@datetimePickerUnderlineShadowActive: NULL;

@datetimePickerUnderlineBorderColorDisabled: @datetimePickerDisabledThemeColor;
@datetimePickerUnderlineBorderTypeDisabled: NULL;
@datetimePickerUnderlineBorderSizeDisabled: NULL;
@datetimePickerUnderlineShadowDisabled: NULL;

//outlined
@datetimePickerOutlinedBorderRadius: NULL;

@datetimePickerOutlinedInputColor: @appTextColor;
@datetimePickerOutlinedInputColorHover: NULL;

@datetimePickerOutlinedBackground: NULL;

@datetimePickerOutlinedShadow: NULL;
@datetimePickerOutlinedBorder: 2px solid @datetimePickerPrimaryThemeColor;

@datetimePickerOutlinedShadowHover: NULL;
@datetimePickerOutlinedBorderHover: NULL;

@datetimePickerOutlinedShadowActive: NULL;
@datetimePickerOutlinedBorderActive: NULL;

@datetimePickerOutlinedShadowDisabled: NULL;
@datetimePickerOutlinedBorderDisabled: NULL;

//filled

@datetimePickerFilledBackground: #eee;

.bl-datetime-picker {

  //label
  .MuiFormLabel-root {
    color: @datetimePickerLabelColor;

    &.Mui-focused {
      color: @datetimePickerLabelColorActive;
    }

    &.Mui-disabled {
      color: @datetimePickerLabelColorDisabled;
    }
  }

  .MuiInputBase-root {
    &.MuiOutlinedInput-root {
      border-radius: @datetimePickerOutlinedBorderRadius;
      background-color: @datetimePickerOutlinedBackground;

      .MuiInputBase-input {
        color: @datetimePickerOutlinedInputColor;

        &:hover {
          color: @datetimePickerOutlinedInputColorHover;
        }
      }

      &:not(.Mui-disabled) {
        .MuiOutlinedInput-notchedOutline {
          border: @datetimePickerOutlinedBorder;
          box-shadow: @datetimePickerOutlinedShadow;
        }

        &.Mui-focused {
          .MuiOutlinedInput-notchedOutline {
            border: @datetimePickerOutlinedBorderActive;
            box-shadow: @datetimePickerOutlinedShadowActive;
          }
        }

        &:hover {
          .MuiOutlinedInput-notchedOutline {
            border: @datetimePickerOutlinedBorderHover;
            box-shadow: @datetimePickerOutlinedShadowHover;
          }
        }
      }

      &.Mui-disabled {
        .MuiOutlinedInput-notchedOutline {
          border: @datetimePickerOutlinedBorderDisabled;
          box-shadow: @datetimePickerOutlinedShadowDisabled;
        }
      }
    }

    &.MuiInput-underline {
      .MuiInputBase-input {
        color: @datetimePickerUnderlineInputColor;

        &:hover {
          color: @datetimePickerUnderlineInputColorHover;
        }
      }

      &:before {
        border-bottom-color: @datetimePickerUnderlineBorderColor;
        border-bottom-width: @datetimePickerUnderlineBorderSize;
        border-bottom-style: @datetimePickerUnderlineBorderType;
        box-shadow: @datetimePickerUnderlineShadow;
      }

      &:after {
        border-bottom-color: @datetimePickerUnderlineBorderColorActive;
        border-bottom-width: @datetimePickerUnderlineBorderSizeActive;
        border-bottom-style: @datetimePickerUnderlineBorderTypeActive;
        box-shadow: @datetimePickerUnderlineShadowActive;
      }

      &:hover:not(.Mui-disabled):not(.Mui-focused):before {
        border-bottom-color: @datetimePickerUnderlineBorderColorHover;
        border-bottom-width: @datetimePickerUnderlineBorderSizeHover;
        border-bottom-style: @datetimePickerUnderlineBorderTypeHover;
        box-shadow: @datetimePickerUnderlineShadowHover;
      }

      &.Mui-disabled:before {
        border-bottom-color: @datetimePickerUnderlineBorderColorDisabled;
        border-bottom-width: @datetimePickerUnderlineBorderSizeDisabled;
        border-bottom-style: @datetimePickerUnderlineBorderTypeDisabled;
        box-shadow: @datetimePickerUnderlineShadowDisabled;
      }
    }

    &.MuiFilledInput-root {
      background-color: @datetimePickerFilledBackground;
    }
  }
}

@datetimePickerDialogPrimaryColor: @themePrimary;
@datetimePickerDialogSecondaryColor: @appBackgroundColor;

@datetimePickerDialogColor: @datetimePickerDialogPrimaryColor;
@datetimePickerDialogBackground: @datetimePickerDialogSecondaryColor;
@datetimePickerDialogBorder: 1px solid @datetimePickerDialogPrimaryColor;
@datetimePickerDialogBorderRadius: NULL;
@datetimePickerDialogShadow: NULL;
@datetimePickerDialogContentOverflow: unset;


@datetimePickerDialogToolbarBackground: @datetimePickerDialogPrimaryColor;
@datetimePickerDialogToolbarColor: contrast(@datetimePickerDialogToolbarBackground);
@datetimePickerDialogToolbarColorActive: @datetimePickerDialogSecondaryColor;

@datetimePickerDialogHeaderButtonBackground: transparent;
@datetimePickerDialogHeaderButtonColor: contrast(@datetimePickerDialogSecondaryColor);
@datetimePickerDialogHeaderButtonBackgroundHover: NULL;
@datetimePickerDialogHeaderButtonColorHover: NULL;
@datetimePickerDialogHeaderButtonBackgroundDisabled: transparent;
@datetimePickerDialogHeaderButtonColorDisabled: transparent;

@datetimePickerDialogActionsBackground: rgba(0, 0, 0, 0.2);
@datetimePickerDialogActionsButtonBackground: @datetimePickerDialogPrimaryColor;
@datetimePickerDialogActionsButtonColor: contrast(@datetimePickerDialogActionsButtonBackground);

@datetimePickerDialogDaysListColor: contrast(@datetimePickerDialogBackground);

@datetimePickerDialogDaySelectedBackground: @datetimePickerDialogPrimaryColor;
@datetimePickerDialogDaySelectedColor: contrast(@datetimePickerDialogPrimaryColor);

@datetimePickerDialogDayCurrentBackground: fadeout(@datetimePickerDialogPrimaryColor, 80%);
@datetimePickerDialogDayCurrentColor: contrast(@datetimePickerDialogDayCurrentBackground);

@datetimePickerDialogDayDisabledBackground: transparent;
@datetimePickerDialogDayDisabledColor: @datetimePickerDisabledThemeColor;

@datetimePickerDialogDayBorderRadius: NULL;

@datetimePickerDialogYearBackgroundActive: fadeout(@datetimePickerDialogPrimaryColor, 60%);
@datetimePickerDialogYearColorActive: contrast(@datetimePickerDialogYearBackgroundActive);

@datetimePickerDialogYearSelectedBackground: @datetimePickerDialogPrimaryColor;
@datetimePickerDialogYearSelectedColor: contrast(@datetimePickerDialogYearSelectedBackground);

@datetimePickerDialogClockPointerColor: darken(@datetimePickerDialogBackground, 20%);

@datetimePickerTabBackground: @datetimePickerPrimaryThemeColor;
@datetimePickerTabIndicatorBackground: contrast(@datetimePickerPrimaryThemeColor);
@datetimePickerTabIconsColor: contrast(@datetimePickerPrimaryThemeColor);

.bl-datetime-picker-dialog {

  .MuiPaper-root {
    overflow: @datetimePickerDialogContentOverflow;
    color: @datetimePickerDialogColor;
    background: @datetimePickerDialogBackground;
  }

  .MuiDialog-paper {
    overflow: @datetimePickerDialogContentOverflow;
    background: @datetimePickerDialogBackground;
    border: @datetimePickerDialogBorder;
    border-radius: @datetimePickerDialogBorderRadius;
    box-shadow: @datetimePickerDialogShadow;
  }

  .MuiDialogContent-root {
    overflow: @datetimePickerDialogContentOverflow;
  }

  .MuiToolbar-root {
    background: @datetimePickerDialogToolbarBackground;

    .MuiPickersToolbarText-toolbarTxt {
      color: @datetimePickerDialogToolbarColor;
    }

    .MuiPickersToolbarText-toolbarBtnSelected {
      color: @datetimePickerDialogToolbarColorActive;
    }
  }

  .MuiPickersCalendarHeader-switchHeader {
    margin: 5px;

    .MuiButtonBase-root {
      background: @datetimePickerDialogHeaderButtonBackground;
      color: @datetimePickerDialogHeaderButtonColor;

      &:hover {
        background-color: @datetimePickerDialogHeaderButtonBackgroundHover;
        color: @datetimePickerDialogHeaderButtonColorHover;
      }

      &.Mui-disabled {
        background: @datetimePickerDialogHeaderButtonBackgroundDisabled;
        color: @datetimePickerDialogHeaderButtonColorDisabled;
      }
    }

  }

  .MuiPickersCalendarHeader-dayLabel {
    color: @datetimePickerDialogDaysListColor;
  }

  .MuiPickersDay-day {
    color: inherit;
    border-radius: @datetimePickerDialogDayBorderRadius;

    &.MuiPickersDay-current {
      background: @datetimePickerDialogDayCurrentBackground;
      color: @datetimePickerDialogDayCurrentColor;
    }

    &.MuiPickersDay-daySelected {
      background: @datetimePickerDialogDaySelectedBackground;
      color: @datetimePickerDialogDaySelectedColor;
    }

    &.MuiPickersDay-dayDisabled {
      background: @datetimePickerDialogDayDisabledBackground;
      color: @datetimePickerDialogDayDisabledColor;
    }
  }

  .MuiPickersYear-root {
    &:focus,
    &:hover {
      background: @datetimePickerDialogYearBackgroundActive;
      color: @datetimePickerDialogYearColorActive;
    }

    &.MuiPickersYear-yearSelected {
      background: @datetimePickerDialogYearSelectedBackground;
      color: @datetimePickerDialogYearSelectedColor;
    }
  }

  .MuiPickersClockNumber-clockNumber {
    color: inherit;

    &.MuiPickersClockNumber-clockNumberSelected {
      color: #fff;
    }
  }

  .MuiPickersClock-pin,
  .MuiPickersClockPointer-pointer {
    background: @datetimePickerDialogClockPointerColor;
  }

  .MuiPickersClockPointer-thumb {
    background: @datetimePickerDialogClockPointerColor;
    border: 14px solid @datetimePickerDialogClockPointerColor;
  }

  .MuiTabs-root {
    .MuiTab-root {
      background-color: @datetimePickerTabBackground;
      opacity: 1;
    }

    .MuiTabs-indicator {
      background-color: @datetimePickerTabIndicatorBackground;
    }

    .MuiSvgIcon-root {
      fill: @datetimePickerTabIconsColor;
    }
  }


  .MuiDialogActions-root {
    background: @datetimePickerDialogActionsBackground;

    .MuiButton-root {
      background: @datetimePickerDialogActionsButtonBackground;
      color: @datetimePickerDialogActionsButtonColor;
    }
  }
}

/*****    component: datetime-picker    *****/
/********************************************/
/********************************************/


/*********************************/
/*********************************/
/*****    component: icon    *****/
@iconColor: @themePrimary;

.bl-icon {
  color: @iconColor;
}


/*****    component: icon    *****/
/*********************************/
/*********************************/


/**********************************/
/**********************************/
/*****    component: input    *****/
@inputThemeColor: @themePrimary;

/* Common */
@inputFontFamily: inherit;

/* Filled */
@inputFilledShadow: NULL;
@inputFilledShadowHover: NULL;
@inputFilledShadowActive: NULL;
@inputFilledShadowDisabled: NULL;

@inputFilledBackground: #eee;
@inputFilledBackgroundHover: NULL;
@inputFilledBackgroundActive: #f1f1f1;
@inputFilledBackgroundDisabled: #dbdbdb;

@inputFilledBorder: NULL;
@inputFilledBorderHover: NULL;
@inputFilledBorderActive: NULL;
@inputFilledBorderDisabled: NULL;

@inputFilledUnderlineColor: @inputThemeColor;
@inputFilledUnderlineWidth: @appComponentBorderWidth;
@inputFilledUnderlineType: solid;
@inputFilledUnderline: @inputFilledUnderlineWidth @inputFilledUnderlineType @inputFilledUnderlineColor;

@inputFilledBorderRadius: @appComponentBorderRadius;
@inputFilledBorderRadiusTopLeft: @inputFilledBorderRadius;
@inputFilledBorderRadiusTopRight: @inputFilledBorderRadius;
@inputFilledBorderRadiusBottomRight: 0;
@inputFilledBorderRadiusBottomLeft: 0;

@inputFilledColor: contrast(@inputFilledBackground);
@inputFilledFontSize: inherit;
@inputFilledFontFamily: @inputFontFamily;
@inputFilledColorHover: contrast(@inputFilledBackground);
@inputFilledColorActive: contrast(@inputFilledBackground);
@inputFilledColorDisabled: contrast(@inputFilledBackgroundDisabled);

@inputFilledAutofillColor: @inputFilledColor;
@inputFilledAutofillColorHover: @inputFilledColorHover;
@inputFilledAutofillColorActive: @inputFilledColorActive;

@inputFilledAutofillBackgroundColor: transparent;
@inputFilledAutofillBackgroundColorHover: transparent;
@inputFilledAutofillBackgroundColorActive: transparent;

@inputFilledLabelColor: @inputFilledColor;
@inputFilledLabelFontSize: @inputFilledFontSize;
@inputFilledLabelFontFamily: @inputFilledFontFamily;
@inputFilledLabelColorHover: @inputFilledLabelColor;
@inputFilledLabelColorActive: @inputFilledLabelColor;
@inputFilledLabelColorDisabled: @disabledColor;

/* Outlined */
@inputOutlinedFontSize: inherit;
@inputOutlinedFontFamily: @inputFontFamily;

@inputOutlinedShadow: NULL;
@inputOutlinedShadowHover: NULL;
@inputOutlinedShadowActive: NULL;
@inputOutlinedShadowDisabled: NULL;

@inputOutlinedBackground: NULL;
@inputOutlinedBackgroundHover: NULL;
@inputOutlinedBackgroundActive: NULL;
@inputOutlinedBackgroundDisabled: NULL;

@inputOutlinedBorderWidth: @appComponentBorderWidth;
@inputOutlinedBorderType: solid;

@inputOutlinedBorder: @inputOutlinedBorderWidth @inputOutlinedBorderType @inputThemeColor;
@inputOutlinedBorderHover: NULL;
@inputOutlinedBorderActive: @inputOutlinedBorderWidth @inputOutlinedBorderType @inputThemeColor;
@inputOutlinedBorderDisabled: @inputOutlinedBorderWidth @inputOutlinedBorderType @disabledColor;

@inputOutlinedBorderRadius: @appComponentBorderRadius;
@inputOutlinedBorderRadiusTopLeft: @inputOutlinedBorderRadius;
@inputOutlinedBorderRadiusTopRight: @inputOutlinedBorderRadius;
@inputOutlinedBorderRadiusBottomRight: @inputOutlinedBorderRadius;
@inputOutlinedBorderRadiusBottomLeft: @inputOutlinedBorderRadius;

@inputOutlinedColor: @appTextColor;
@inputOutlinedColorHover: @appTextColor;
@inputOutlinedColorActive: @appTextColor;
@inputOutlinedColorDisabled: @disabledColor;

@inputOutlinedAutofillColor: @inputOutlinedColor;
@inputOutlinedAutofillColorHover: @inputOutlinedColorHover;
@inputOutlinedAutofillColorActive: @inputOutlinedColorActive;

@inputOutlinedAutofillBackgroundColor: transparent;
@inputOutlinedAutofillBackgroundColorHover: transparent;
@inputOutlinedAutofillBackgroundColorActive: transparent;

@inputOutlinedLabelColor: @appTextColor;
@inputOutlinedLabelFontSize: @inputOutlinedFontSize;
@inputOutlinedLabelFontFamily: @inputOutlinedFontFamily;
@inputOutlinedLabelColorHover: @inputOutlinedLabelColor;
@inputOutlinedLabelColorActive: @inputOutlinedLabelColor;
@inputOutlinedLabelColorDisabled: @disabledColor;

/* Standard */
@inputStandardShadow: NULL;
@inputStandardShadowHover: NULL;
@inputStandardShadowActive: NULL;
@inputStandardShadowDisabled: NULL;

@inputStandardUnderlineWidth: @appComponentBorderWidth;
@inputStandardUnderlineType: solid;
@inputStandardUnderlineColor: @inputStandardColor;
@inputStandardUnderlineColorActive: @inputThemeColor;
@inputStandardUnderlineColorDisabled: @disabledColor;

@inputStandardUnderline: @inputStandardUnderlineWidth @inputStandardUnderlineType fade(@inputStandardUnderlineColor, 70%);
@inputStandardUnderlineHover: calc(@inputStandardUnderlineWidth + 1px) @inputStandardUnderlineType @inputStandardUnderlineColor;
@inputStandardUnderlineActive: @inputStandardUnderlineWidth @inputStandardUnderlineType @inputStandardUnderlineColorActive;
@inputStandardUnderlineDisabled: @inputStandardUnderlineWidth @inputStandardUnderlineType @inputStandardUnderlineColorDisabled;

@inputStandardColor: @appTextColor;
@inputStandardFontSize: inherit;
@inputStandardFontFamily: @inputFontFamily;
@inputStandardColorHover: @appTextColor;
@inputStandardColorActive: @appTextColor;
@inputStandardColorDisabled: @disabledColor;

@inputStandardAutofillColor: @inputStandardColor;
@inputStandardAutofillColorHover: @inputStandardColorHover;
@inputStandardAutofillColorActive: @inputStandardColorActive;

@inputStandardLabelColor: @inputStandardColor;
@inputStandardLabelFontSize: @inputStandardFontSize;
@inputStandardLabelFontFamily:@inputStandardFontFamily;
@inputStandardLabelColorHover: @inputStandardLabelColor;
@inputStandardLabelColorActive: @inputStandardLabelColor;
@inputStandardLabelColorDisabled: @disabledColor;


.bl-input {
  &.bl-input--outlined {
    fieldset {
      border-radius: @inputOutlinedBorderRadiusTopLeft @inputOutlinedBorderRadiusTopRight @inputOutlinedBorderRadiusBottomRight @inputOutlinedBorderRadiusBottomLeft;
    }

    .bl-input-label {
      color: @inputOutlinedLabelColor;
      font-size: @inputOutlinedLabelFontSize;
      font-family: @inputOutlinedFontFamily;
    }

    &:hover .bl-input-label:not(.bl-input-label--disabled):not(.bl-input-label--focused) {
      color: @inputOutlinedLabelColorHover;
    }

    .bl-input-label--disabled {
      color: @inputOutlinedLabelColorDisabled;
    }

    .bl-input-label--focused {
      color: @inputOutlinedLabelColorActive;
    }

    .bl-input-input-root {
      &:not(.bl-input-input--focused):not(.bl-input-input--disabled):hover {
        fieldset {
          border: @inputOutlinedBorderHover;
          box-shadow: @inputOutlinedShadowHover;
        }

        input:-webkit-autofill:hover {
          -webkit-text-fill-color: @inputOutlinedAutofillColorHover;
          transition: background-color 5000s ease-in-out 0s;
          caret-color: @inputOutlinedAutofillColorHover;
          -webkit-box-shadow: 0 0 0 30px @inputOutlinedAutofillBackgroundColorHover inset;
        }

        background-color: @inputOutlinedBackgroundHover;
        color: @inputOutlinedColorHover;
      }

      &.bl-input-input--focused {
        fieldset {
          border: @inputOutlinedBorderActive;
          box-shadow: @inputOutlinedShadowActive;
        }

        input:-webkit-autofill:focus {
          -webkit-text-fill-color: @inputOutlinedAutofillColorActive;
          transition: background-color 5000s ease-in-out 0s;
          caret-color: @inputOutlinedAutofillColorActive;
          -webkit-box-shadow: 0 0 0 30px @inputOutlinedAutofillBackgroundColorActive inset;
        }

        background-color: @inputOutlinedBackgroundActive;
        color: @inputOutlinedColorActive;
      }

      &.bl-input-input--disabled {
        fieldset {
          border: @inputOutlinedBorderDisabled;
          box-shadow: @inputOutlinedShadowDisabled;
        }

        background-color: @inputOutlinedBackgroundDisabled;
        color: @inputOutlinedColorDisabled;
      }

      fieldset {
        border: @inputOutlinedBorder;
        box-shadow: @inputOutlinedShadow;
      }

      input:-webkit-autofill {
        -webkit-text-fill-color: @inputOutlinedAutofillColor;
        transition: background-color 5000s ease-in-out 0s;
        caret-color: @inputOutlinedAutofillColor;
        -webkit-box-shadow: 0 0 0 30px @inputOutlinedAutofillBackgroundColor inset;
      }

      background-color: @inputOutlinedBackground;
      color: @inputOutlinedColor;
      font-size: @inputOutlinedFontSize;
      font-family: @inputOutlinedFontFamily;
    }
  }

  &.bl-input--filled {
    ::after {
      border-bottom: @inputFilledUnderline;
    }

    .bl-input-label {
      color: @inputFilledLabelColor;
      font-size: @inputFilledLabelFontSize;
      font-family: @inputFilledFontFamily;
    }

    &:hover .bl-input-label:not(.bl-input-label--disabled):not(.bl-input-label--focused) {
      color: @inputFilledLabelColorHover;
    }

    .bl-input-label--disabled {
      color: @inputFilledLabelColorDisabled;
    }

    .bl-input-label--focused {
      color: @inputFilledLabelColorActive;
    }

    .bl-input-input-root {
      &:not(.bl-input-input--focused):not(.bl-input-input--disabled):hover {
        input:-webkit-autofill:hover {
          -webkit-text-fill-color: @inputFilledAutofillColorHover;
          transition: background-color 5000s ease-in-out 0s;
          caret-color: @inputFilledAutofillColorHover;
          -webkit-box-shadow: 0 0 0 30px @inputFilledAutofillBackgroundColorHover inset;
        }

        border: @inputFilledBorderHover;
        box-shadow: @inputFilledShadowHover;
        background-color: @inputFilledBackgroundHover;
        color: @inputFilledColorHover;
      }

      &.bl-input-input--focused {
        input:-webkit-autofill:focus {
          -webkit-text-fill-color: @inputFilledAutofillColorActive;
          transition: background-color 5000s ease-in-out 0s;
          caret-color: @inputFilledAutofillColorActive;
          -webkit-box-shadow: 0 0 0 30px @inputFilledAutofillBackgroundColorActive inset;
        }

        border: @inputFilledBorderActive;
        box-shadow: @inputFilledShadowActive;
        background-color: @inputFilledBackgroundActive;
        color: @inputFilledColorActive;
      }

      &.bl-input-input--disabled {
        border: @inputFilledBorderDisabled;
        box-shadow: @inputFilledShadowDisabled;
        background-color: @inputFilledBackgroundDisabled;
        color: @inputFilledColorDisabled;
      }

      input:-webkit-autofill {
        -webkit-text-fill-color: @inputFilledAutofillColor;
        transition: background-color 5000s ease-in-out 0s;
        caret-color: @inputFilledAutofillColor;
        -webkit-box-shadow: 0 0 0 30px @inputFilledAutofillBackgroundColor inset;
      }

      border-radius: @inputFilledBorderRadiusTopLeft @inputFilledBorderRadiusTopRight @inputFilledBorderRadiusBottomRight @inputFilledBorderRadiusBottomLeft;
      border: @inputFilledBorder;
      box-shadow: @inputFilledShadow;
      background-color: @inputFilledBackground;
      color: @inputFilledColor;
      font-size: @inputFilledFontSize;
      font-family: @inputFilledFontFamily;
    }
  }

  &.bl-input--standard {
    .bl-input-label {
      color: @inputStandardLabelColor;
      font-size: @inputStandardLabelFontSize;
      font-family: @inputStandardFontFamily;
    }

    &:hover .bl-input-label:not(.bl-input-label--disabled):not(.bl-input-label--focused) {
      color: @inputStandardLabelColorHover;
    }

    .bl-input-label--disabled {
      color: @inputStandardLabelColorDisabled;
    }

    .bl-input-label--focused {
      color: @inputStandardLabelColorActive;
    }

    .bl-input-input-root {
      &::after {
        border-bottom: @inputStandardUnderlineActive;
      }

      &::before {
        border-bottom: @inputStandardUnderline;
      }

      &:not(.bl-input-input--focused):not(.bl-input-input--disabled):hover {
        input:-webkit-autofill:hover {
          -webkit-text-fill-color: @inputStandardAutofillColorHover;
          transition: background-color 5000s ease-in-out 0s;
          caret-color: @inputStandardAutofillColorHover;
        }

        &::before {
          border-bottom: @inputStandardUnderlineHover;
        }

        box-shadow: @inputStandardShadowHover;
        color: @inputStandardColorHover;
      }

      &.bl-input-input--focused {
        input:-webkit-autofill:focus {
          -webkit-text-fill-color: @inputStandardAutofillColorActive;
          transition: background-color 5000s ease-in-out 0s;
          caret-color: @inputStandardAutofillColorActive;
        }

        box-shadow: @inputStandardShadowActive;
        color: @inputStandardColorActive;
      }

      &.bl-input-input--disabled {
        &::before {
          border-bottom: @inputStandardUnderlineDisabled;
        }

        box-shadow: @inputStandardShadowDisabled;
        color: @inputStandardColorDisabled;
      }

      input:-webkit-autofill {
        -webkit-text-fill-color: @inputStandardAutofillColor;
        transition: background-color 5000s ease-in-out 0s;
        caret-color: @inputStandardAutofillColor;
      }

      box-shadow: @inputStandardShadow;
      color: @inputStandardColor;
      font-size: @inputStandardFontSize;
      font-family: @inputStandardFontFamily;
    }
  }
}

/*****    component: input    *****/
/**********************************/
/**********************************/


/*****************************************/
/*****************************************/
/*****    component: radio-button    *****/
@radioColor: @themePrimary;
@radioUncheckedColor: @radioColor;
@radioCheckedColor: @radioColor;
@radioDisabledColor: @disabledColor;
@radioRippleColor: @radioColor;

//label
@radioLabelColor: @appTextColor;
@radioLabelColorChecked: @appTextColor;
@radioLabelColorDisabled: @radioDisabledColor;

//unchecked
@radioOuterCircleColor: @radioUncheckedColor;

//checked
@radioCheckedInnerCircleColor: @radioCheckedColor;
@radioCheckedOuterCircleColor: @radioCheckedColor;

//disabled unchecked
@radioDisabledOuterCircleColor: @radioDisabledColor;

//disabled checked
@radioCheckedDisabledInnerCircleColor: @radioDisabledColor;
@radioCheckedDisabledOuterCircleColor: @radioDisabledColor;

//shadow on hover
@radioCheckedHoverShadow: @radioCheckedInnerCircleColor;
@radioUncheckedHoverShadow: @radioOuterCircleColor;

// --------RADIO-BUTTON------- //
.bl-radio-button {

  .bl-radio-button-label {
    font-size: inherit;
  }

  .bl-radio-button-color-secondary.bl-radio-button--checked {
    color: @radioCheckedInnerCircleColor;
  }

  &.bl-radio-button--checked {
    .bl-radio-button-label {
      color: @radioLabelColorChecked;
    }
  }

  &.bl-radio-button--checked.bl-radio-button--disabled {
    .bl-radio-button-label {
      color: @radioLabelColorDisabled;
    }
  }

  .bl-radio-button-label {
    &.bl-radio-button--disabled {
      color: @radioLabelColorDisabled;
    }

    color: @radioLabelColor;
  }

  .bl-radio-button-control {
    &.bl-radio-button-color-secondary {
      &.bl-radio-button--checked:hover {
        background-color: fade(@radioCheckedHoverShadow, 4%);
      }

      &:hover {
        background-color: fade(@radioUncheckedHoverShadow, 4%);
      }
    }

    &.bl-radio-button--disabled.bl-radio-button--checked {
      svg.MuiSvgIcon-root {
        color: @radioCheckedDisabledOuterCircleColor;
      }

      svg + svg.MuiSvgIcon-root {
        color: @radioCheckedDisabledInnerCircleColor;
      }
    }

    &.bl-radio-button--disabled {
      svg.MuiSvgIcon-root {
        color: @radioDisabledOuterCircleColor;
      }
    }

    &.bl-radio-button--checked {
      svg.MuiSvgIcon-root {
        color: @radioCheckedOuterCircleColor;
      }

      svg + svg.MuiSvgIcon-root {
        color: @radioCheckedInnerCircleColor;
      }
    }

    svg.MuiSvgIcon-root {
      color: @radioOuterCircleColor;
    }
  }
}


/*****    component: radio-button    *****/
/*****************************************/
/*****************************************/


/************************************/
/************************************/
/*****    component: spinner    *****/
.base-spinner {
  position: relative;
  animation: base-spinner_rotate 2s linear infinite;
  color: @themePrimary;

  circle {
    stroke-dasharray: 2, 400;
    stroke-dashoffset: 0;
    animation: base-spinner_dash 1.5s ease-in-out infinite;
    stroke-linecap: round;
  }
}

@keyframes base-spinner_rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes base-spinner_dash {
  0% {
    stroke-dasharray: 2, 400;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 89, 400;
    stroke-dashoffset: -35;
  }

  100% {
    stroke-dasharray: 89, 400;
    stroke-dashoffset: -124;
  }
}

/*****    component: spinner    *****/
/************************************/
/************************************/


/***********************************/
/***********************************/
/*****    component: switch    *****/
@switchThemeColor: @themePrimary;

@switchUncheckedThumbColor: #fff;
@switchUncheckedTrackBackground: contrast(@appBackgroundColor);

@switchCheckedThumbColor: @switchThemeColor;
@switchCheckedTrackBackground: @switchCheckedThumbColor;

.bl-switch {

  .bl-switch-base {
    color: @switchThemeColor;
  }

  .variant(@trackBackground, @thumbColor) {
    .bl-switch-track {
      background: @trackBackground;
    }

    .bl-switch-thumb {
      background: @thumbColor;
    }
  }

  .variant(@switchUncheckedTrackBackground, @switchUncheckedThumbColor);

  &.bl-switch--checked {
    .variant(@switchCheckedTrackBackground, @switchCheckedThumbColor);
  }

  &.bl-switch--disabled {
    .bl-switch-root {
      opacity: .38;
    }

    .bl-switch-track {
      opacity: .54;
    }

    .bl-switch-thumb {
      opacity: 1;
    }
  }
}

/*****    component: switch    *****/
/***********************************/
/***********************************/


/*************************************/
/*************************************/
/*****    component: textarea    *****/
@textareaThemeColor: @themePrimary;

//default
@textareaDefaultShadow: NULL;
@textareaDefaultShadowHover: NULL;
@textareaDefaultShadowActive: NULL;
@textareaDefaultShadowDisabled: NULL;

@textareaDefaultBackground: #eee;
@textareaDefaultBackgroundHover: NULL;
@textareaDefaultBackgroundActive: #f1f1f1;
@textareaDefaultBackgroundDisabled: #dbdbdb;

@textareaDefaultBorder: NULL;
@textareaDefaultBorderHover: NULL;
@textareaDefaultBorderActive: NULL;
@textareaDefaultBorderDisabled: NULL;

@textareaDefaultUnderlineColor: @textareaThemeColor;

@textareaDefaultBorderRadius: @appComponentBorderRadius;
@textareaDefaultBorderRadiusTopLeft: @textareaDefaultBorderRadius;
@textareaDefaultBorderRadiusTopRight: @textareaDefaultBorderRadius;
@textareaDefaultBorderRadiusBottomRight: 0;
@textareaDefaultBorderRadiusBottomLeft: 0;

@textareaDefaultColor: contrast(@textareaDefaultBackground);
@textareaDefaultColorHover: contrast(@textareaDefaultBackground);
@textareaDefaultColorActive: contrast(@textareaDefaultBackground);
@textareaDefaultColorDisabled: contrast(@textareaDefaultBackgroundDisabled);

@textareaDefaultLabelColor: @textareaDefaultColor;
@textareaDefaultLabelColorHover: @textareaDefaultColor;
@textareaDefaultLabelColorActive: @textareaDefaultColor;
@textareaDefaultLabelColorDisabled: @disabledColor;

//outlined
@textareaOutlinedShadow: NULL;
@textareaOutlinedShadowHover: NULL;
@textareaOutlinedShadowActive: NULL;
@textareaOutlinedShadowDisabled: NULL;

@textareaOutlinedBackground: NULL;
@textareaOutlinedBackgroundHover: NULL;
@textareaOutlinedBackgroundActive: NULL;
@textareaOutlinedBackgroundDisabled: NULL;

@textareaOutlinedBorderWidth: @appComponentBorderWidth;
@textareaOutlinedBorderType: solid;

@textareaOutlinedBorder: @textareaOutlinedBorderWidth @textareaOutlinedBorderType @textareaThemeColor;
@textareaOutlinedBorderHover: NULL;
@textareaOutlinedBorderActive: @textareaOutlinedBorderWidth @textareaOutlinedBorderType @textareaThemeColor;
@textareaOutlinedBorderDisabled: @textareaOutlinedBorderWidth @textareaOutlinedBorderType @disabledColor;

@textareaOutlinedBorderRadius: @appComponentBorderRadius;
@textareaOutlinedBorderRadiusTopLeft: @textareaOutlinedBorderRadius;
@textareaOutlinedBorderRadiusTopRight: @textareaOutlinedBorderRadius;
@textareaOutlinedBorderRadiusBottomRight: @textareaOutlinedBorderRadius;
@textareaOutlinedBorderRadiusBottomLeft: @textareaOutlinedBorderRadius;

@textareaOutlinedColor: @appTextColor;
@textareaOutlinedColorHover: @appTextColor;
@textareaOutlinedColorActive: @appTextColor;
@textareaOutlinedColorDisabled: @disabledColor;

@textareaOutlinedLabelColor: @appTextColor;
@textareaOutlinedLabelColorHover: @textareaOutlinedLabelColor;
@textareaOutlinedLabelColorActive: @textareaOutlinedLabelColor;
@textareaOutlinedLabelColorDisabled: @disabledColor;

//standard
@textareaStandardShadow: NULL;
@textareaStandardShadowHover: NULL;
@textareaStandardShadowActive: NULL;
@textareaStandardShadowDisabled: NULL;

@textareaStandardUnderlineWidth: @appComponentBorderWidth;
@textareaStandardUnderlineType: solid;
@textareaStandardUnderlineColor: @textareaStandardColor;
@textareaStandardUnderlineColorActive: @textareaThemeColor;
@textareaStandardUnderlineColorDisabled: @disabledColor;

@textareaStandardUnderline:  @textareaStandardUnderlineWidth @textareaStandardUnderlineType fade(@textareaStandardUnderlineColor, 70%);
@textareaStandardUnderlineHover: calc(@textareaStandardUnderlineWidth + 1px) @textareaStandardUnderlineType @textareaStandardUnderlineColor;
@textareaStandardUnderlineActive: @textareaStandardUnderlineWidth @textareaStandardUnderlineType @textareaStandardUnderlineColorActive;
@textareaStandardUnderlineDisabled: @textareaStandardUnderlineWidth @textareaStandardUnderlineType @textareaStandardUnderlineColorDisabled;

@textareaStandardColor: @appTextColor;
@textareaStandardColorHover:@appTextColor;
@textareaStandardColorActive: @appTextColor;
@textareaStandardColorDisabled: @disabledColor;

@textareaStandardLabelColor: @textareaStandardColor;
@textareaStandardLabelColorHover: @textareaStandardLabelColor;
@textareaStandardLabelColorActive: @textareaStandardLabelColor;
@textareaStandardLabelColorDisabled: @disabledColor;

.bl-textarea {
  &.bl-textarea--outlined {
    fieldset {
      border-radius: @textareaOutlinedBorderRadiusTopLeft @textareaOutlinedBorderRadiusTopRight @textareaOutlinedBorderRadiusBottomRight @textareaOutlinedBorderRadiusBottomLeft;
    }

    .bl-textarea-label {
      color: @textareaOutlinedLabelColor;
    }

    &:hover .bl-textarea-label:not(.bl-textarea-label--disabled):not(.bl-textarea-label--focused) {
      color: @textareaOutlinedLabelColorHover;
    }

    .bl-textarea-label--disabled {
      color: @textareaOutlinedLabelColorDisabled;
    }

    .bl-textarea-label--focused {
      color: @textareaOutlinedLabelColorActive;
    }

    .bl-textarea-input-root {
      &:not(.bl-textarea-input--focused):not(.bl-textarea-input--disabled):hover {
        fieldset {
          border: @textareaOutlinedBorderHover;
          box-shadow: @textareaOutlinedShadowHover;
        }

        background-color: @textareaOutlinedBackgroundHover;
        color: @textareaOutlinedColorHover;
      }

      &.bl-textarea-input--focused {
        fieldset {
          border: @textareaOutlinedBorderActive;
          box-shadow: @textareaOutlinedShadowActive;
        }

        background-color: @textareaOutlinedBackgroundActive;
        color: @textareaOutlinedColorActive;
      }

      &.bl-textarea-input--disabled {
        fieldset {
          border: @textareaOutlinedBorderDisabled;
          box-shadow: @textareaOutlinedShadowDisabled;
        }

        background-color: @textareaOutlinedBackgroundDisabled;
        color: @textareaOutlinedColorDisabled;
      }

      fieldset {
        border: @textareaOutlinedBorder;
        box-shadow: @textareaOutlinedShadow;
      }

      background-color: @textareaOutlinedBackground;
      color: @textareaOutlinedColor;
    }
  }

  &.bl-textarea--filled {
    ::after {
      border-bottom-color: @textareaDefaultUnderlineColor;
    }

    .bl-textarea-label {
      color: @textareaDefaultLabelColor;
    }

    &:hover .bl-textarea-label:not(.bl-textarea-label--disabled):not(.bl-textarea-label--focused) {
      color: @textareaDefaultLabelColorHover;
    }

    .bl-textarea-label--disabled {
      color: @textareaDefaultLabelColorDisabled;
    }

    .bl-textarea-label--focused {
      color: @textareaDefaultLabelColorActive;
    }

    .bl-textarea-input-root {
      &:not(.bl-textarea-input--focused):not(.bl-textarea-input--disabled):hover {
        border: @textareaDefaultBorderHover;
        box-shadow: @textareaDefaultShadowHover;
        background-color: @textareaDefaultBackgroundHover;
        color: @textareaDefaultColorHover;
      }

      &.bl-textarea-input--focused {
        border: @textareaDefaultBorderActive;
        box-shadow: @textareaDefaultShadowActive;
        background-color: @textareaDefaultBackgroundActive;
        color: @textareaDefaultColorActive;
      }

      &.bl-textarea-input--disabled {
        border: @textareaDefaultBorderDisabled;
        box-shadow: @textareaDefaultShadowDisabled;
        background-color: @textareaDefaultBackgroundDisabled;
        color: @textareaDefaultColorDisabled;
      }

      border-radius: @textareaDefaultBorderRadiusTopLeft @textareaDefaultBorderRadiusTopRight @textareaDefaultBorderRadiusBottomRight @textareaDefaultBorderRadiusBottomLeft;
      border: @textareaDefaultBorder;
      box-shadow: @textareaDefaultShadow;
      background-color: @textareaDefaultBackground;
      color: @textareaDefaultColor;
    }
  }

  &.bl-textarea--standard {
    .bl-textarea-label {
      color: @textareaStandardLabelColor;
    }

    &:hover .bl-textarea-label:not(.bl-textarea-label--disabled):not(.bl-textarea-label--focused) {
      color: @textareaStandardLabelColorHover;
    }

    .bl-textarea-label--disabled {
      color: @textareaStandardLabelColorDisabled;
    }

    .bl-textarea-label--focused {
      color: @textareaStandardLabelColorActive;
    }

    .bl-textarea-input-root {
      &::after {
        border-bottom: @textareaStandardUnderlineActive;
      }

      &::before {
        border-bottom: @textareaStandardUnderline;
      }

      &:not(.bl-textarea-input--focused):not(.bl-textarea-input--disabled):hover {
        &::before {
          border-bottom: @textareaStandardUnderlineHover;
        }

        box-shadow: @textareaStandardShadowHover;
        color: @textareaStandardColorHover;
      }

      &.bl-textarea-input--focused {
        box-shadow: @textareaStandardShadowActive;
        color: @textareaStandardColorActive;
      }

      &.bl-textarea-input--disabled {
        &::before {
          border-bottom: @textareaStandardUnderlineDisabled;
        }

        box-shadow: @textareaStandardShadowDisabled;
        color: @textareaStandardColorDisabled;
      }

      box-shadow: @textareaStandardShadow;
      color: @textareaStandardColor;
    }
  }
}

/*****    component: textarea    *****/
/*************************************/
/*************************************/


/***********************************/
/***********************************/
/*****    component: select    *****/
@selectThemeColor: @themePrimary;

@selectDropdownIconColor: @selectThemeColor;
@selectDropdownIconColorHover: @selectThemeColor;
@selectDropdownIconColorActive: @selectThemeColor;
@selectDropdownIconColorDisabled: @disabledColor;

/* Common */
@selectFontFamily: inherit;

/* Outlined */
@selectOutlinedLabelColor: @appTextColor;
@selectOutlinedLabelColorHover: @appTextColor;
@selectOutlinedLabelColorActive: @appTextColor;
@selectOutlinedLabelColorDisabled: @disabledColor;

@selectOutlinedFontFamily: @selectFontFamily;

@selectOutlinedColor: @appTextColor;
@selectOutlinedColorHover: @appTextColor;
@selectOutlinedColorActive: @appTextColor;
@selectOutlinedColorDisabled: @disabledColor;

@selectOutlinedBorderWidth: @appComponentBorderWidth;
@selectOutlinedBorderType: solid;

@selectOutlinedBorder: @selectOutlinedBorderWidth @selectOutlinedBorderType @selectThemeColor;
@selectOutlinedBorderHover: @selectOutlinedBorderWidth @selectOutlinedBorderType @selectThemeColor;
@selectOutlinedBorderActive: @selectOutlinedBorderWidth @selectOutlinedBorderType @selectThemeColor;
@selectOutlinedBorderDisabled: @selectOutlinedBorderWidth @selectOutlinedBorderType @disabledColor;

@selectOutlinedBorderRadius: @appComponentBorderRadius;
@selectOutlinedBorderRadiusTopLeft: @selectOutlinedBorderRadius;
@selectOutlinedBorderRadiusTopRight: @selectOutlinedBorderRadius;
@selectOutlinedBorderRadiusBottomRight: @selectOutlinedBorderRadius;
@selectOutlinedBorderRadiusBottomLeft: @selectOutlinedBorderRadius;

@selectOutlinedShadow: NULL;
@selectOutlinedShadowHover: NULL;
@selectOutlinedShadowActive: NULL;
@selectOutlinedShadowDisabled: NULL;

/* Filled */
@selectFilledBackground: #eee;

@selectFilledLabelColor: @selectFilledColor;
@selectFilledLabelColorHover: @selectFilledLabelColor;
@selectFilledLabelColorActive: @selectFilledLabelColor;
@selectFilledLabelColorDisabled: @disabledColor;

@selectFilledFontFamily: @selectFontFamily;

@selectFilledColor: #000;
@selectFilledColorHover: @selectFilledColor;
@selectFilledColorActive: @selectFilledColor;
@selectFilledColorDisabled: @disabledColor;

@selectFilledBorder: NULL;
@selectFilledBorderHover: NULL;
@selectFilledBorderActive: NULL;
@selectFilledBorderDisabled: NULL;

@selectFilledShadow: NULL;
@selectFilledShadowHover: NULL;
@selectFilledShadowActive: NULL;
@selectFilledShadowDisabled: NULL;

@selectFilledDropdownIconColor: #000000;
@selectFilledDropdownIconColorHover: #000000;
@selectFilledDropdownIconColorActive: #000000;

/* Standard */
@selectStandardLabelColor: @appTextColor;
@selectStandardLabelColorHover: @selectStandardLabelColor;
@selectStandardLabelColorActive: @selectStandardColorActive;
@selectStandardLabelColorDisabled: @disabledColor;

@selectStandardFontFamily: @selectFontFamily;

@selectStandardColor: @appTextColor;
@selectStandardColorHover: @appTextColor;
@selectStandardColorActive: @appTextColor;
@selectStandardColorDisabled: @disabledColor;

@selectStandardUnderlineWidth: @appComponentBorderWidth;
@selectStandardUnderlineType: solid;
@selectStandardUnderlineColor: @selectStandardColor;
@selectStandardUnderlineColorActive: @selectThemeColor;
@selectStandardUnderlineColorDisabled: @disabledColor;

@selectStandardUnderline: @selectStandardUnderlineWidth @selectStandardUnderlineType fade(@selectStandardUnderlineColor, 70%);
@selectStandardUnderlineHover: calc(@selectStandardUnderlineWidth + 1px) @selectStandardUnderlineType @selectStandardUnderlineColor;
@selectStandardUnderlineActive: @selectStandardUnderlineWidth @selectStandardUnderlineType @selectStandardUnderlineColorActive;
@selectStandardUnderlineDisabled: @selectStandardUnderlineWidth @selectStandardUnderlineType @selectStandardUnderlineColorDisabled;

@selectStandardShadow: NULL;
@selectStandardShadowHover: NULL;
@selectStandardShadowActive: NULL;
@selectStandardShadowDisabled: NULL;

@selectStandardDropdownIconColor: #000000;
@selectStandardDropdownIconColorHover: #000000;
@selectStandardDropdownIconColorActive: #000000;

.bl-select {
  .bl-select-label {
    &.bl-select-label-outlined {
      color: @selectOutlinedLabelColor;
      font-family: @selectOutlinedFontFamily;
    }

    &.bl-select-label-filled {
      color: @selectFilledLabelColor;
      font-family: @selectFilledFontFamily;
    }

    &.bl-select-label-standard {
      color: @selectStandardLabelColor;
      font-family: @selectStandardFontFamily;
    }
  }

  &:hover .bl-select-label:not(.bl-select-label--disabled):not(.bl-select-label--focused) {
    &.bl-select-label-outlined {
      color: @selectOutlinedLabelColorHover;
    }

    &.bl-select-label-filled {
      color: @selectFilledLabelColorHover;
    }

    &.bl-select-label-standard {
      color: @selectStandardLabelColorHover;
    }
  }

  .bl-select-label--disabled {
    &.bl-select-label-outlined {
      color: @selectOutlinedLabelColorDisabled;
    }

    &.bl-select-label-filled {
      color: @selectFilledLabelColorDisabled;
    }

    &.bl-select-label-standard {
      color: @selectStandardLabelColorDisabled;
    }
  }

  .bl-select-label--focused {
    &.bl-select-label-outlined {
      color: @selectOutlinedLabelColorActive;
    }

    &.bl-select-label-filled {
      color: @selectFilledLabelColorActive;
    }

    &.bl-select-label-standard {
      color: @selectStandardLabelColorActive;
    }
  }

  .bl-select-box {
    fieldset {
      border-radius: @selectOutlinedBorderRadiusTopLeft @selectOutlinedBorderRadiusTopRight @selectOutlinedBorderRadiusBottomRight @selectOutlinedBorderRadiusBottomLeft;
    }

    &.bl-select-outlined {
      .bl-select-root {
        color: @appTextColor;
        font-family: @selectOutlinedFontFamily;
      }

      .bl-select-icon {
        color: @selectDropdownIconColor;
      }

      fieldset {
        border: @selectOutlinedBorder;
        box-shadow: @selectOutlinedShadow;
      }

      &:hover {
        .bl-select-root {
          color: @appTextColor;
        }

        .bl-select-icon {
          color: @selectDropdownIconColorHover;
        }

        fieldset {
          border: @selectOutlinedBorderHover;
          box-shadow: @selectOutlinedShadowHover;
        }
      }

      &.bl-select--disabled {
        .bl-select-root {
          color: @selectOutlinedColorDisabled;
        }

        .bl-select-icon {
          color: @selectDropdownIconColorDisabled;
        }

        fieldset {
          border: @selectOutlinedBorderDisabled;
          box-shadow: @selectOutlinedShadowDisabled;
        }
      }

      &.Mui-focused {
        .bl-select-root {
          color: @selectOutlinedColorActive;
        }

        .bl-select-icon {
          color: @selectDropdownIconColorActive;
        }

        fieldset {
          border: @selectOutlinedBorderActive;
          box-shadow: @selectOutlinedShadowActive;
        }
      }
    }

    &.bl-select-filled {
      //none
      background-color: @selectFilledBackground;

      .bl-select-root {
        color: @selectFilledColor;
        font-family: @selectFilledFontFamily;
      }

      .bl-select-icon {
        color: @selectFilledDropdownIconColor;
      }

      fieldset {
        border: @selectFilledBorder;
        box-shadow: @selectFilledShadow;
      }

      &:hover {
        .bl-select-root {
          color: @selectFilledColorHover;
        }

        .bl-select-icon {
          color: @selectFilledDropdownIconColorHover;
        }

        fieldset {
          border: @selectFilledBorderHover;
          box-shadow: @selectFilledShadowHover;
        }
      }

      &.bl-select--disabled {
        .bl-select-root {
          color: @selectFilledColorDisabled;
        }

        .bl-select-icon {
          color: @selectDropdownIconColorDisabled;
        }

        fieldset {
          border: @selectFilledBorderDisabled;
          box-shadow: @selectFilledShadowDisabled;
        }
      }

      &.Mui-focused {
        .bl-select-root {
          color: @selectFilledColorActive;
        }

        .bl-select-icon {
          color: @selectFilledDropdownIconColorActive;
        }

        fieldset {
          border: @selectFilledBorderActive;
          box-shadow: @selectFilledShadowActive;
        }
      }
    }

    &.bl-select-standard {
      &::after {
        border-bottom: @selectStandardUnderlineActive;
      }

      &::before {
        border-bottom: @selectStandardUnderline;
      }

      &:hover {
        &::before {
          border-bottom: @selectStandardUnderlineHover;
        }
      }

      .bl-select-root {
        color: @selectStandardColor;
        font-family: @selectStandardFontFamily;
      }

      .bl-select-icon {
        color: @selectStandardDropdownIconColor;
      }

      fieldset {
        box-shadow: @selectStandardShadow;
      }

      &:hover {
        .bl-select-root {
          color: @selectStandardColorHover;
        }

        .bl-select-icon {
          color: @selectStandardDropdownIconColorHover;
        }

        fieldset {
          box-shadow: @selectStandardShadowHover;
        }
      }

      &.bl-select--disabled {
        &::before {
          border-bottom: @selectStandardUnderlineDisabled;
        }

        .bl-select-root {
          color: @selectStandardColorDisabled;
        }

        .bl-select-icon {
          color: @selectDropdownIconColorDisabled;
        }

        fieldset {
          box-shadow: @selectStandardShadowDisabled;
        }
      }

      &.Mui-focused {
        .bl-select-root {
          color: @selectStandardColorActive;
        }

        .bl-select-icon {
          color: @selectStandardDropdownIconColorActive;
        }

        fieldset {
          box-shadow: @selectStandardShadowActive;
        }
      }
    }
  }
}

/* Options */
@selectOptionsBackground: @appBackgroundColor;
@selectOptionsFontFamily: @selectFontFamily;

@selectOptionsShadow: @appComponentShadow;
@selectOptionsBorder: NULL;

@selectOptionsBorderRadius: NULL;
@selectOptionsBorderRadiusTopLeft: @selectOptionsBorderRadius;
@selectOptionsBorderRadiusTopRight: @selectOptionsBorderRadius;
@selectOptionsBorderRadiusBottomRight: @selectOptionsBorderRadius;
@selectOptionsBorderRadiusBottomLeft: @selectOptionsBorderRadius;

@selectOptionsColor: @appTextColor;

@selectOptionsItemColorHover: NULL;
@selectOptionsItemBackgroundHover: NULL;

/* Options */
.MuiMenu-paper {
  background-color: @selectOptionsBackground;
  box-shadow: @selectOptionsShadow;
  border: @selectOptionsBorder;
  border-radius: @selectOptionsBorderRadiusTopLeft @selectOptionsBorderRadiusTopRight @selectOptionsBorderRadiusBottomRight @selectOptionsBorderRadiusBottomLeft;

  .MuiList-root.MuiMenu-list {
    color: @selectOptionsColor;
    background-color: @selectOptionsBackground;

    .bl-select-option {
      font-family: @selectOptionsFontFamily;

      &:hover {
        color: @selectOptionsItemColorHover;
        background-color: @selectOptionsItemBackgroundHover;
      }
    }
  }
}

/*****    component: select    *****/
/***********************************/
/***********************************/


/***************************************************/
/***************************************************/
/*****    component: calendar-visualization    *****/
// general
@calendarVisualizationBorderColor: if(@isLightTheme, darken(@appBackgroundColor, 9%), lighten(@appBackgroundColor, 9%));

@calendarVisualizationBackgroundPrimary: @appBackgroundColor;
@calendarVisualizationBackgroundSecondary: if(@isLightTheme, darken(@appBackgroundColor, 4%), lighten(@appBackgroundColor, 3%));
@calendarVisualizationBackgroundSecondaryAlt: hsl(hue(@themePrimary), saturation(@themePrimary), if(@isLightTheme, lightness(@appBackgroundColor) - 4%, lightness(@appBackgroundColor) + 4%));

@calendarVisualizationTextColor: hsl(hue(@themePrimary), 0%, if(@isLightTheme, 63%, 90%));
@calendarVisualizationTextColorSecondary: hsl(0, 0%, if(@isLightTheme, 20%, 80%));
@calendarVisualizationTextColorActive: @themePrimary;

@calendarVisualizationErrorColor: #f44336;
@calendarVisualizationSuccessColor: #5BC069;
@calendarVisualizationWarningColor: #f0ad4e;

// panel
@calendarVisualizationPanelBorderRadius: @appComponentBorderRadius;
@calendarVisualizationPanelShadow: @appComponentShadow;
@calendarVisualizationPanelBorder: @appBlockBorder;

// container
@calendarVisualizationBackgroundColor: @appBackgroundColor;
@calendarVisualizationGridBordersColor: if(@isLightTheme, darken(@calendarVisualizationBackgroundColor, 5%), lighten(@calendarVisualizationBackgroundColor, 4%));

// navigator
@calendarVisualizationNavigatorTitleColor: @calendarVisualizationTextColorSecondary;
@calendarVisualizationNavigatorBtnBackgroundColor: @calendarVisualizationBackgroundSecondary;
@calendarVisualizationNavigatorBtnColor: if(@isLightTheme, darken(@calendarVisualizationBackgroundSecondary, 45%), lighten(@calendarVisualizationBackgroundSecondary, 45%));

// week days
@calendarVisualizationWeeksDayColor: @calendarVisualizationTextColorSecondary;
@calendarVisualizationWeeksTodayBackgroundColor: @calendarVisualizationTextColorActive;
@calendarVisualizationWeeksTodayColor: if(boolean(lightness(@calendarVisualizationWeeksTodayBackgroundColor) > 50%), #000, #FFF);

// all day events
@calendarVisualizationAllDayEventsColor: if(@isLightTheme, darken(@calendarVisualizationBackgroundColor, 50%), lighten(@calendarVisualizationBackgroundColor, 50%));
@calendarVisualizationAllDayEventsBorderColor: @calendarVisualizationGridBordersColor;
@calendarVisualizationAllDayEventsHoverBackgroundColor: @calendarVisualizationAllDayEventsBorderColor;

// cell
@calendarVisualizationCellBorderColor: @calendarVisualizationGridBordersColor;
@calendarVisualizationCellTodayDateBackgroundColor: @calendarVisualizationTextColorActive;
@calendarVisualizationCellDateColor: @calendarVisualizationTextColorSecondary;
@calendarVisualizationCellTodayDateColor: if(boolean(lightness(@calendarVisualizationCellTodayDateBackgroundColor) > 50%), #000, #FFF);
@calendarVisualizationCellWeekendBackgroundColor: if(@isLightTheme, darken(@calendarVisualizationBackgroundColor, 2%), lighten(@calendarVisualizationBackgroundColor, 2%));
@calendarVisualizationCellHoveredBackgroundColor: @calendarVisualizationBackgroundSecondaryAlt;
@calendarVisualizationCellAddBtnBackgroundColor: @calendarVisualizationGridBordersColor;
@calendarVisualizationCellAddBtnColor: @calendarVisualizationTextColorSecondary;
@calendarVisualizationCellShowMoreColor: @calendarVisualizationTextColorSecondary;

// timeline grid
@calendarVisualizationTimelineLabelColor: @calendarVisualizationAllDayEventsColor;
@calendarVisualizationTimelineBorderColor: @calendarVisualizationCellBorderColor;

// show more menu
@calendarVisualizationShowMoreMenuBackgroundColor: @calendarVisualizationBackgroundColor;
@calendarVisualizationShowMoreMenuBorderColor: if(boolean(lightness(@calendarVisualizationShowMoreMenuBackgroundColor) > 50%), hsla(0, 0%, 0%, 0.05), hsla(0, 0%, 100%, 0.05));
@calendarVisualizationShowMoreMenuTitleColor: @calendarVisualizationTextColorSecondary;
@calendarVisualizationShowMoreMenuIconColor: @calendarVisualizationTextColor;

//modal
@calendarVisualizationModalHeaderBorderBottomColor: @calendarVisualizationBorderColor;

@calendarVisualizationModalBodyTitleColor: @calendarVisualizationTextColorSecondary;
@calendarVisualizationModalBodyIconColor: if(boolean(lightness(@calendarVisualizationModalBodyTitleColor) > 50%), darken(@calendarVisualizationModalBodyTitleColor, 20%), lighten(@calendarVisualizationModalBodyTitleColor, 20%));
@calendarVisualizationModalBodyBackgroundColor: @calendarVisualizationBackgroundPrimary;
@calendarVisualizationModalBodyMultiControlAddColor: @calendarVisualizationSuccessColor;
@calendarVisualizationModalBodyMultiControlRemoveColor: @calendarVisualizationModalBodyIconColor;

@calendarVisualizationModalFooterBackgroundColor: @calendarVisualizationBackgroundSecondary;
@calendarVisualizationModalFooterBorderTopColor: @calendarVisualizationBorderColor;

// modal labels color
@calendarVisualizationLabelsColorModalSection1BackgroundColor: @calendarVisualizationBackgroundSecondary;
@calendarVisualizationLabelsColorModalSection2BackgroundColor: @calendarVisualizationModalBodyBackgroundColor;
@calendarVisualizationLabelsColorModalAccordionHeaderIconColor: @calendarVisualizationModalBodyIconColor;
@calendarVisualizationLabelsColorModalAccordionHeaderDescribeColor: @calendarVisualizationLabelsColorModalAccordionHeaderIconColor;
@calendarVisualizationLabelsColorModalAccordionHeaderTitleColor: @calendarVisualizationTextColorSecondary;

.bl-calendar-visualization {
  position: relative;
  border-radius: @calendarVisualizationPanelBorderRadius;
  box-shadow: @calendarVisualizationPanelShadow;
  border: @calendarVisualizationPanelBorder;

  .bl-calendar-visualization-container {
    background-color: @calendarVisualizationBackgroundColor;

    .bl-calendar-visualization--navigator-title {
      color: @calendarVisualizationNavigatorTitleColor;
    }

    .bl-calendar-visualization--navigator-control-panel {
      .bl-calendar-visualization--navigator-control {
        background-color: @calendarVisualizationNavigatorBtnBackgroundColor;
        color: @calendarVisualizationNavigatorBtnColor;
      }
    }

    .bl-calendar-weeks-day {
      color: @calendarVisualizationWeeksDayColor;
    }

    .bl-calendar-weeks-day-date {
      color: @calendarVisualizationWeeksDayColor;
    }

    .bl-calendar-weeks-day-date--today {
      background-color: @calendarVisualizationWeeksTodayBackgroundColor;
      color: @calendarVisualizationWeeksTodayColor;
    }

    .bl-calendar-visualization--all-day-events-container {
      color: @calendarVisualizationAllDayEventsColor;
    }

    .bl-calendar-visualization--all-day-events--item {
      border-color: @calendarVisualizationAllDayEventsBorderColor;

      .bl-calendar-visualization--grid-row-cell--show-more {
        color: @calendarVisualizationAllDayEventsColor;
      }
    }

    .bl-calendar-visualization--all-day-events--item--with-value {
      &:hover {
        background-color: @calendarVisualizationAllDayEventsHoverBackgroundColor;
      }
    }

    .bl-calendar-visualization--grid-row-cell {
      border-color: @calendarVisualizationCellBorderColor;
    }

    .bl-calendar-visualization--grid-row-cell--date {
      color: @calendarVisualizationCellDateColor;
    }

    .bl-calendar-visualization--grid-row-cell--today {
      .bl-calendar-visualization--grid-row-cell--date {
        background-color: @calendarVisualizationCellTodayDateBackgroundColor;
        color: @calendarVisualizationCellTodayDateColor;
      }
    }

    .bl-calendar-visualization--grid-row-cell--weekend {
      background-color: @calendarVisualizationCellWeekendBackgroundColor;
    }

    .bl-calendar-visualization--grid-row-cell--timeline-mode {
      &:first-child {
        border-left-color: @calendarVisualizationCellBorderColor;
      }
    }

    .bl-calendar-visualization--grid-row-cell--hovered {
      background-color: @calendarVisualizationCellHoveredBackgroundColor;
    }

    .bl-calendar-visualization--grid-row-cell--header--add-btn {
      color: @calendarVisualizationCellAddBtnColor;

      &:hover {
        background-color: @calendarVisualizationCellAddBtnBackgroundColor;
      }
    }

    .bl-calendar-visualization--grid-row-cell--show-more {
      color: @calendarVisualizationCellShowMoreColor;
    }

    .bl-calendar-visualization--timeline-item-label {
      color: @calendarVisualizationTimelineLabelColor
    }

    .bl-calendar-visualization--timeline-item-border {
      border-color: @calendarVisualizationTimelineBorderColor;
    }
  }
}

.bl-calendar-visualization--show-more-menu {
  .bl-calendar-visualization--grid-row-cell--show-more-menu {
    background-color: @calendarVisualizationShowMoreMenuBackgroundColor;
    border-color: @calendarVisualizationShowMoreMenuBorderColor;
  }

  .bl-calendar-visualization--grid-row-cell--show-more-menu-container-header-content {
    color: @calendarVisualizationShowMoreMenuTitleColor;
    border-bottom-color: @calendarVisualizationShowMoreMenuBorderColor;

    .bl-visualization-icon {
      color: @calendarVisualizationShowMoreMenuIconColor;
    }
  }
}

.bl-calendar-visualization-modal.bl-ui-sdk-modal {
  &.bl-calendar-visualization--labels-color-modal {
    .Mui-error, .bl-visualizations-text-danger {
      color: @calendarVisualizationErrorColor;
    }

    &.bl-visualizations-accordion--root-error {
      border-color: @calendarVisualizationErrorColor;
    }

    .bl-calendar-visualization--labels-color-modal-section > * {
      background-color: @calendarVisualizationLabelsColorModalSection1BackgroundColor;
    }

    .bl-visualizations-accordion-header--content {
      i {
        color: @calendarVisualizationLabelsColorModalAccordionHeaderIconColor;
      }

      .bl-visualizations-accordion-header--content-describe {
        color: @calendarVisualizationLabelsColorModalAccordionHeaderDescribeColor;
      }
    }

    .bl-visualizations-accordion-header--content-label {
      color: @calendarVisualizationLabelsColorModalAccordionHeaderTitleColor
    }

    .bl-visualizations-accordion-header--expand-icon {
      color: @calendarVisualizationLabelsColorModalAccordionHeaderIconColor;
    }

    .bl-visualizations-data-settings-conditions {
      .bl-multiple-child-wrapper:not(:first-child) {
        border-top-color: @calendarVisualizationModalHeaderBorderBottomColor;
      }
    }

    .bl-calendar-visualization--labels-color-modal--by-condition--item {
      background-color: @calendarVisualizationLabelsColorModalSection2BackgroundColor;
    }
  }
}

.bl-visualization-icon-danger {
  color: @calendarVisualizationErrorColor
}

/*****    component: calendar-visualization    *****/
/***************************************************/
/***************************************************/


/************************************************/
/************************************************/
/*****    component: chart-visualization    *****/
// panel
@chartVisualizationBorderRadius: @appComponentBorderRadius;
@chartVisualizationBoxShadow: @appComponentShadow;
@chartVisualizationBorder: @panelBorder;

// preview
@chartVisualizationBackgroundColor: @appBackgroundColor;

.bl-chart-visualization {
  position: relative;
  border-radius: @chartVisualizationBorderRadius;
  box-shadow: @chartVisualizationBoxShadow;
  border: @chartVisualizationBorder;

  .bl-chart-visualization-container {
    .bl-chart-visualization-preview {
      background-color: @chartVisualizationBackgroundColor;
    }
  }
}

/*****    component: chart-visualization    *****/
/************************************************/
/************************************************/


/****************************************************/
/****************************************************/
/*****    component: data-grid-visualization    *****/
//general
@dataGridBorderColor: if(@isLightTheme, darken(@appBackgroundColor, 9%), lighten(@appBackgroundColor, 9%));

@dataGridBackgroundPrimary: @appBackgroundColor;
@dataGridBackgroundSecondary: if(@isLightTheme, darken(@appBackgroundColor, 4%), lighten(@appBackgroundColor, 3%));
@dataGridBackgroundSecondaryAlt: hsl(hue(@themePrimary), saturation(@themePrimary), if(@isLightTheme, lightness(@appBackgroundColor) - 4%, lightness(@appBackgroundColor) + 4%));

@dataGridTextColor: hsl(hue(@themePrimary), 0%, if(@isLightTheme, 63%, 90%));
@dataGridTextColorSecondary: hsl(0, 0%, if(@isLightTheme, 20%, 80%));
@dataGridTextColorActive: @themePrimary;
@dataGridTextColorHover: darken(@dataGridTextColorActive, 15%);

@dataGridDisabledColor: mix(@appBackgroundColor, @dataGridTextColor);

@dataGridBorderRadius: @appComponentBorderRadius;
@dataGridBorder: @appBlockBorder;
@dataGridShadow: @appComponentShadow;

@dataGridErrorColor: #f44336;
@dataGridSuccessColor: #5BC069;
@dataGridWarningColor: #f0ad4e;

//container
@dataGridContainerBackgroundColor: @dataGridBackgroundPrimary;
@dataGridContainerBorderTop: @dataGridBorderColor;
@dataGridContainerHeaderBackgroundColor: @dataGridBackgroundSecondaryAlt;
@dataGridContainerHeaderBorderColor: if(@isLightTheme, darken(@dataGridBackgroundSecondaryAlt, 9%), lighten(@dataGridBackgroundSecondaryAlt, 9%));
@dataGridContainerHeaderBorder: 1px solid @dataGridContainerHeaderBorderColor;
@dataGridContainerHeaderTextColor: @dataGridTextColorSecondary;
@dataGridContainerHeaderSortIconColor: @dataGridTextColor;
@dataGridContainerHeaderSortIconColorActive: @dataGridTextColorActive;
@dataGridContainerHeaderResizerStripColor: @dataGridTextColorActive;
@dataGridContainerBodyRowBackgroundColor: @dataGridBackgroundPrimary;
@dataGridContainerBodyRowBackgroundColorSecondary: @dataGridBackgroundSecondary;
@dataGridContainerBodyRowTextColor: @dataGridTextColorSecondary;
@dataGridContainerBodyRowCellTextColorAlt: #fff;
@dataGridContainerBodyBorderColor: @dataGridBorderColor;
@dataGridContainerBodyBorder: 1px solid @dataGridContainerBodyBorderColor;
@dataGridContainerBodyGroupLvl1TitleBackgroundColor: if(@isLightTheme, darken(@dataGridBackgroundPrimary, 2%), lighten(@dataGridBackgroundPrimary, 9%));
@dataGridContainerBodyGroupLvl1BackgroundColor: lighten(@dataGridContainerBodyGroupLvl1TitleBackgroundColor, 2%);
@dataGridContainerBodyGroupLvl1BorderColor: darken(@dataGridContainerBodyGroupLvl1TitleBackgroundColor, 9%);
@dataGridContainerBodyGroupLvl1PagingBackgroundColor: @dataGridContainerBodyGroupLvl1TitleBackgroundColor;
@dataGridContainerBodyGroupLvl2TitleBackgroundColor: if(@isLightTheme, darken(@dataGridBackgroundPrimary, 7%), lighten(@dataGridBackgroundPrimary, 6%));
@dataGridContainerBodyGroupLvl2BackgroundColor: lighten(@dataGridContainerBodyGroupLvl2TitleBackgroundColor, 2%);
@dataGridContainerBodyGroupLvl2BorderColor: darken(@dataGridContainerBodyGroupLvl2TitleBackgroundColor, 9%);
@dataGridContainerBodyGroupLvl2PagingBackgroundColor: @dataGridContainerBodyGroupLvl2TitleBackgroundColor;
@dataGridContainerBodyGroupLvl3TitleBackgroundColor: if(@isLightTheme, darken(@dataGridBackgroundPrimary, 11%), lighten(@dataGridBackgroundPrimary, 2%));
@dataGridContainerBodyGroupLvl3BackgroundColor: lighten(@dataGridContainerBodyGroupLvl3TitleBackgroundColor, 2%);
@dataGridContainerBodyGroupLvl3BorderColor: darken(@dataGridContainerBodyGroupLvl3TitleBackgroundColor, 9%);
@dataGridContainerBodyGroupLvl3PagingBackgroundColor: @dataGridContainerBodyGroupLvl3TitleBackgroundColor;
@dataGridContainerBodyGroupTitleColor: @dataGridTextColorSecondary;
@dataGridContainerBodyFreezedBorderRight: 1px solid @dataGridBorderColor;
@dataGridContainerBodyGroupedBackgroundColor: @dataGridBackgroundPrimary;

//pagination
@dataGridPagingTextColor: @dataGridTextColor;
@dataGridPagingBackgroundColor: @dataGridBackgroundSecondary;
@dataGridPagingBorderTopColor: @dataGridBorderColor;
@dataGridPagingTextColorDisabled: @dataGridDisabledColor;
@dataGridPagingCurrentPageBackgroundColor: @dataGridBackgroundPrimary;
@dataGridPagingCurrentPageBorderColor: @dataGridBorderColor;
@dataGridPagingCurrentPageBorderActive: @inputOutlinedBorderWidth @inputOutlinedBorderType @inputThemeColor;
@dataGridPagingCurrentPageBorderRadiusActive: @inputOutlinedBorderRadius;
@dataGridPagingCurrentPageBoxShadowActive: none;
@dataGridPagingCurrentPageBoxShadowError: none;
@dataGridPagingPageSizeTextColor: @dataGridTextColor;
@dataGridPagingPageSizeTextColorActive: @dataGridTextColorActive;

//group pagination
@dataGridGroupPagingBackgroundColor: @dataGridBackgroundSecondary;
@dataGridGroupPagingTextColor: @dataGridTextColor;
@dataGridGroupPagingButtonColor: @dataGridTextColor;
@dataGridGroupPagingButtonColorActive: @dataGridTextColorActive;
@dataGridGroupPagingButtonColorDisabled: @dataGridDisabledColor;

//density
@dataGridDensityMenuBackgroundColor: @dataGridBackgroundPrimary;
@dataGridDensityMenuTextColor: @dataGridTextColorSecondary;
@dataGridDensityMenuTextColorActive: @dataGridBackgroundPrimary;
@dataGridDensityMenuBackgroundColorActive: @dataGridTextColorHover;

.bl-data-grid-visualization, .bl-view-data-grid {
  position: relative;
  border: @dataGridBorder;
  box-shadow: @dataGridShadow;
  border-radius: @dataGridBorderRadius;

  .bl-data-grid {
    color: @dataGridTextColor;

    .bl-data-grid-container {
      background-color: @dataGridContainerBackgroundColor;
      border-top: 1px solid @dataGridContainerBorderTop;

      .bl-common-table-header {
        background-color: @dataGridContainerHeaderBackgroundColor;
        color: @dataGridContainerHeaderTextColor;
        border-bottom: @dataGridContainerBodyBorder;

        .bl-common-table-header__cell {
          .bl-common-table-header__cell-title {
            .bl-common-table-header__sorting {
              .bl-common-table-header__sorting-asc-icon,
              .bl-common-table-header__sorting-desc-icon {
                border: 5px solid @dataGridContainerHeaderSortIconColor;
                border-left-color: transparent;
                border-right-color: transparent;
              }

              .bl-common-table-header__sorting-asc-icon {
                border-top: none;
              }

              .bl-common-table-header__sorting-desc-icon {
                border-bottom: none;
                margin-top: 2px;
              }

              &.asc {
                .bl-common-table-header__sorting-asc-icon {
                  border-bottom-color: @dataGridContainerHeaderSortIconColorActive;
                }
              }

              &.desc {
                .bl-common-table-header__sorting-desc-icon {
                  border-top-color: @dataGridContainerHeaderSortIconColorActive;
                }
              }
            }
          }

          .bl-common-table-header__resizer {
            &:hover {
              .bl-common-table-header__resizer-strip {
                background-color: @dataGridContainerHeaderResizerStripColor;
              }
            }
          }
        }
      }

      .bl-data-grid-body {
        .bl-common-table-row__cell, .bl-data-grid-group__title {
          .bl-local-type--label {
            color: @dataGridContainerBodyRowCellTextColorAlt;
          }

          .bl-yes-no-value__cell-value {
            .bl-local-type-label--success {
              background-color: @dataGridSuccessColor;
            }

            .bl-local-type-label--warning {
              background-color: @dataGridWarningColor;
            }

            .bl-local-type-label--danger {
              background-color: @dataGridErrorColor;
            }
          }
        }

        .bl-common-table-row {
          background-color: @dataGridContainerBodyRowBackgroundColor;

          &:nth-of-type(even) {
            background-color: @dataGridContainerBodyRowBackgroundColorSecondary;
          }

          .bl-common-table-row__cell {
            color: @dataGridContainerBodyRowTextColor;
          }
        }
      }

      .bl-common-table-header .bl-common-table-header__cell {
        border-right: @dataGridContainerHeaderBorder;
      }

      .bl-data-grid-body .bl-common-table-row .bl-common-table-row__cell {
        border-bottom: @dataGridContainerBodyBorder;
        border-right: @dataGridContainerBodyBorder;
      }

      .bl-data-grid-group {
        &.bl-data-grid-group-level-3 {
          background-color: @dataGridContainerBodyGroupLvl3BackgroundColor;
          border-color: @dataGridContainerBodyGroupLvl3BorderColor;

          .bl-data-grid-group__title {
            background-color: @dataGridContainerBodyGroupLvl3TitleBackgroundColor;
          }

          .bl-data-grid-group-pagination {
            background-color: @dataGridContainerBodyGroupLvl3PagingBackgroundColor;
          }
        }

        &.bl-data-grid-group-level-2 {
          background-color: @dataGridContainerBodyGroupLvl2BackgroundColor;
          border-color: @dataGridContainerBodyGroupLvl2BorderColor;

          .bl-data-grid-group__title {
            background-color: @dataGridContainerBodyGroupLvl2TitleBackgroundColor;
          }

          .bl-data-grid-group-pagination {
            background-color: @dataGridContainerBodyGroupLvl2PagingBackgroundColor;
          }
        }

        &.bl-data-grid-group-level-1 {
          background-color: @dataGridContainerBodyGroupLvl1BackgroundColor;
          border-color: @dataGridContainerBodyGroupLvl1BorderColor;

          .bl-data-grid-group__title {
            background-color: @dataGridContainerBodyGroupLvl1TitleBackgroundColor;
          }

          .bl-data-grid-group-pagination {
            background-color: @dataGridContainerBodyGroupLvl1PagingBackgroundColor;
          }
        }

        .bl-data-grid-group__title {
          color: @dataGridContainerBodyGroupTitleColor
        }
      }

      .bl-data-grid-left-pane {
        border-right: @dataGridContainerBodyFreezedBorderRight;
      }

      .bl-data-grid-left-pane, .bl-data-grid-right-pane {
        background: @dataGridContainerBodyGroupedBackgroundColor;
      }
    }

    .bl-data-grid-pagination {
      color: @dataGridPagingTextColor;
      background-color: @dataGridPagingBackgroundColor;
      border-top: 1px solid @dataGridPagingBorderTopColor;

      .bl-pagination-page-controls {
        .bl-pagination-page-control-arrow {
          &.bl-pagination-page-control-arrow--disabled {
            color: @dataGridPagingTextColorDisabled;
          }
        }

        .bl-pagination-page {
          background-color: @dataGridPagingCurrentPageBackgroundColor;
          color: @dataGridTextColor;
          border-color: @dataGridPagingCurrentPageBorderColor;

          &:focus {
            box-shadow: @dataGridPagingCurrentPageBoxShadowActive;
            border: @dataGridPagingCurrentPageBorderActive;
            border-radius: @dataGridPagingCurrentPageBorderRadiusActive;

            &.bl-pagination-page--has-error {
              border-color: @dataGridErrorColor;
              box-shadow: @dataGridPagingCurrentPageBoxShadowError;
            }
          }
        }
      }

      .bl-pagination-page-size-controls {
        color: @dataGridPagingPageSizeTextColor;

        .bl-pagination-page-size {
          * {
            color: @dataGridPagingPageSizeTextColor;
          }

          &.bl-active-button--active {
            * {
              color: @dataGridPagingPageSizeTextColorActive;
            }
          }

          &.bl-active-button--disabled {
            * {
              color: @dataGridPagingTextColorDisabled;
            }
          }
        }
      }
    }

    .bl-data-grid-group-pagination {
      background-color: @dataGridGroupPagingBackgroundColor;

      .bl-data-grid-page-control {
        .bl-active-button {
          * {
            color: @dataGridGroupPagingButtonColorActive;
          }
        }

        .bl-active-button--disabled {
          * {
            color: @dataGridGroupPagingButtonColorDisabled;
          }
        }
      }

      .bl-data-grid-page-size-control {
        color: @dataGridGroupPagingTextColor;

        .bl-data-grid-page-size-btn {
          * {
            color: @dataGridGroupPagingButtonColor;
          }

          &.bl-active-button--active {
            * {
              color: @dataGridGroupPagingButtonColorActive;
            }
          }

          &.bl-active-button--disabled {
            * {
              color: @dataGridGroupPagingButtonColorDisabled;
            }
          }
        }
      }
    }
  }
}

.bl-data-grid-density-menu.bl-menu {
  ul {
    background-color: @dataGridDensityMenuBackgroundColor;

    li {
      color: @dataGridDensityMenuTextColor;

      &:hover,
      &.Mui-selected,
      &.Mui-selected:hover {
        color: @dataGridDensityMenuTextColorActive;
        background-color: @dataGridDensityMenuBackgroundColorActive;
      }
    }
  }
}

/*****    component: data-grid-visualization    *****/
/****************************************************/
/****************************************************/


/*********************************************************/
/*********************************************************/
/*****    component: heat-map-fixed-visualization    *****/
@calendarVisualizationBackgroundSecondary: if(@isLightTheme, darken(@appBackgroundColor, 4%), lighten(@appBackgroundColor, 3%));

@calendarVisualizationTextColorSecondary: hsl(0, 0%, if(@isLightTheme, 20%, 80%));
@calendarVisualizationTextColorActive: @themePrimary;

// panel
@heatMapVisualizationBorderRadius: @appComponentBorderRadius;
@heatMapVisualizationBoxShadow: @appComponentShadow;
@heatMapVisualizationBorder: @panelBorder;

// container
@calendarVisualizationBackgroundColor: @appBackgroundColor;
@calendarVisualizationGridBordersColor: if(@isLightTheme, darken(@calendarVisualizationBackgroundColor, 5%), lighten(@calendarVisualizationBackgroundColor, 4%));

// navigator
@calendarVisualizationNavigatorTitleColor: @calendarVisualizationTextColorSecondary;
@calendarVisualizationNavigatorBtnBackgroundColor: @calendarVisualizationBackgroundSecondary;
@calendarVisualizationNavigatorBtnColor: if(@isLightTheme, darken(@calendarVisualizationBackgroundSecondary, 45%), lighten(@calendarVisualizationBackgroundSecondary, 45%));

// week days
@calendarVisualizationWeeksDayColor: @calendarVisualizationTextColorSecondary;
@calendarVisualizationWeeksTodayBackgroundColor: @calendarVisualizationTextColorActive;
@calendarVisualizationWeeksTodayColor: if(boolean(lightness(@calendarVisualizationWeeksTodayBackgroundColor) > 50%), #000, #FFF);

// cell
@calendarVisualizationCellBorderColor: @calendarVisualizationGridBordersColor;
@calendarVisualizationCellTodayDateBackgroundColor: @calendarVisualizationTextColorActive;
@calendarVisualizationCellDateColor: @calendarVisualizationTextColorSecondary;
@calendarVisualizationCellTodayDateColor: if(boolean(lightness(@calendarVisualizationCellTodayDateBackgroundColor) > 50%), #000, #FFF);
@calendarVisualizationCellWeekendBackgroundColor: if(@isLightTheme, darken(@calendarVisualizationBackgroundColor, 2%), lighten(@calendarVisualizationBackgroundColor, 2%));
@calendarVisualizationCellMonthNameColor: @calendarVisualizationTextColorActive;

.bl-heat-map-visualization {
  position: relative;
  border-radius: @heatMapVisualizationBorderRadius;
  box-shadow: @heatMapVisualizationBoxShadow;
  border: @heatMapVisualizationBorder;

  .bl-heat-map {
    background-color: @calendarVisualizationBackgroundColor;

    .bl-calendar--period-title {
      color: @calendarVisualizationNavigatorTitleColor;
    }

    .bl-heat-map-visualization--navigator-control-panel {
      .bl-calendar--navigator-control {
        background-color: @calendarVisualizationNavigatorBtnBackgroundColor;
        color: @calendarVisualizationNavigatorBtnColor;
      }
    }

    .bl-calendar-weeks-day {
      color: @calendarVisualizationWeeksDayColor;
    }

    .bl-calendar-weeks-day-date {
      color: @calendarVisualizationWeeksDayColor;
    }

    .bl-calendar-weeks-day-date--today {
      background-color: @calendarVisualizationWeeksTodayBackgroundColor;
      color: @calendarVisualizationWeeksTodayColor;
    }

    .bl-calendar-day-cell {
      border-color: @calendarVisualizationCellBorderColor;
    }

    .bl-calendar-day-cell--date {
      color: @calendarVisualizationCellDateColor;
    }

    .bl-calendar-day-cell--today {
      .bl-calendar-day-cell--date {
        background-color: @calendarVisualizationCellTodayDateBackgroundColor;
        color: @calendarVisualizationCellTodayDateColor;
      }
    }

    .bl-calendar-day-cell--weekend {
      background-color: @calendarVisualizationCellWeekendBackgroundColor;
    }

    .bl-calendar-grid-month-name {
      color: @calendarVisualizationCellMonthNameColor;
    }

    .bl-grid-by-months {
      .bl-calendar-day-cell--today {
        .bl-calendar-day-cell--date {
          color: @calendarVisualizationCellTodayDateBackgroundColor;
        }
      }
    }
  }
}

/*****    component: heat-map-fixed-visualization    *****/
/*********************************************************/
/*********************************************************/


/***************************************************/
/***************************************************/
/*****    component: heat-map-visualization    *****/
@calendarVisualizationBackgroundSecondary: if(@isLightTheme, darken(@appBackgroundColor, 4%), lighten(@appBackgroundColor, 3%));

@calendarVisualizationTextColorSecondary: hsl(0, 0%, if(@isLightTheme, 20%, 80%));
@calendarVisualizationTextColorActive: @themePrimary;

// panel
@heatMapVisualizationBorderRadius: @appComponentBorderRadius;
@heatMapVisualizationBoxShadow: @appComponentShadow;
@heatMapVisualizationBorder: @panelBorder;

// container
@calendarVisualizationBackgroundColor: @appBackgroundColor;
@calendarVisualizationGridBordersColor: if(@isLightTheme, darken(@calendarVisualizationBackgroundColor, 5%), lighten(@calendarVisualizationBackgroundColor, 4%));

// navigator
@calendarVisualizationNavigatorTitleColor: @calendarVisualizationTextColorSecondary;
@calendarVisualizationNavigatorBtnBackgroundColor: @calendarVisualizationBackgroundSecondary;
@calendarVisualizationNavigatorBtnColor: if(@isLightTheme, darken(@calendarVisualizationBackgroundSecondary, 45%), lighten(@calendarVisualizationBackgroundSecondary, 45%));

// week days
@calendarVisualizationWeeksDayColor: @calendarVisualizationTextColorSecondary;
@calendarVisualizationWeeksTodayBackgroundColor: @calendarVisualizationTextColorActive;
@calendarVisualizationWeeksTodayColor: if(boolean(lightness(@calendarVisualizationWeeksTodayBackgroundColor) > 50%), #000, #FFF);

// cell
@calendarVisualizationCellBorderColor: @calendarVisualizationGridBordersColor;
@calendarVisualizationCellTodayDateBackgroundColor: @calendarVisualizationTextColorActive;
@calendarVisualizationCellDateColor: @calendarVisualizationTextColorSecondary;
@calendarVisualizationCellTodayDateColor: if(boolean(lightness(@calendarVisualizationCellTodayDateBackgroundColor) > 50%), #000, #FFF);
@calendarVisualizationCellWeekendBackgroundColor: if(@isLightTheme, darken(@calendarVisualizationBackgroundColor, 2%), lighten(@calendarVisualizationBackgroundColor, 2%));
@calendarVisualizationCellMonthNameColor: @calendarVisualizationTextColorActive;

.bl-heat-map-visualization {
  position: relative;
  border-radius: @heatMapVisualizationBorderRadius;
  box-shadow: @heatMapVisualizationBoxShadow;
  border: @heatMapVisualizationBorder;

  .bl-heat-map {
    background-color: @calendarVisualizationBackgroundColor;

    .bl-calendar--period-title {
      color: @calendarVisualizationNavigatorTitleColor;
    }

    .bl-heat-map-visualization--navigator-control-panel {
      .bl-calendar--navigator-control {
        background-color: @calendarVisualizationNavigatorBtnBackgroundColor;
        color: @calendarVisualizationNavigatorBtnColor;
      }
    }

    .bl-calendar-weeks-day {
      color: @calendarVisualizationWeeksDayColor;
    }

    .bl-calendar-weeks-day-date {
      color: @calendarVisualizationWeeksDayColor;
    }

    .bl-calendar-weeks-day-date--today {
      background-color: @calendarVisualizationWeeksTodayBackgroundColor;
      color: @calendarVisualizationWeeksTodayColor;
    }

    .bl-calendar-day-cell {
      border-color: @calendarVisualizationCellBorderColor;
    }

    .bl-calendar-day-cell--date {
      color: @calendarVisualizationCellDateColor;
    }

    .bl-calendar-day-cell--today {
      .bl-calendar-day-cell--date {
        background-color: @calendarVisualizationCellTodayDateBackgroundColor;
        color: @calendarVisualizationCellTodayDateColor;
      }
    }

    .bl-calendar-day-cell--weekend {
      background-color: @calendarVisualizationCellWeekendBackgroundColor;
    }

    .bl-calendar-grid-month-name {
      color: @calendarVisualizationCellMonthNameColor;
    }

    .bl-grid-by-months {
      .bl-calendar-day-cell--today {
        .bl-calendar-day-cell--date {
          color: @calendarVisualizationCellTodayDateBackgroundColor;
        }
      }
    }
  }
}

/*****    component: heat-map-visualization    *****/
/***************************************************/
/***************************************************/