@themePrimary: #337ab7;

@disabledColor: gray;

@appBackgroundColor: #fff;
@appTextColor: contrast(@appBackgroundColor);

@isLightTheme: boolean(lightness(@appBackgroundColor) > 50%);

@appComponentShadowColor: #000;
@appComponentShadow: 0 3px 1px -2px fade(@appComponentShadowColor, 20%), 0 2px 2px 0 fade(@appComponentShadowColor, 14%), 0 1px 5px 0 fade(@appComponentShadowColor, 12%);

@appComponentBorderRadius: 4px;
@appComponentBorderWidth: 2px;

@appBlockBackgroundColor: @appBackgroundColor;
@appBlockTextColor: @appTextColor;
@appBlockBorder: 1px solid fadeout(contrast(@panelBackgroundColor), 95%);
@appBlockBorderRadius: @appComponentBorderRadius;
@appBlockShadow: @appComponentShadow;

@appLayoutMaxPhoneWidth: 479px;
@appLayoutMinTabletWidth: @appLayoutMaxPhoneWidth + 1px;
@appLayoutMaxTabletWidth: 839px;
@appLayoutMinDesktopWidth: @appLayoutMaxTabletWidth + 1px;

@appLayoutPhoneGap: 16px;
@appLayoutTabletGap: 16px;
@appLayoutDesktopGap: 24px;

html,
body,
#app,
#page {
  height: 100%;
  display: flex;
  flex-direction: column;
}

body {
  margin: 0;
  font-family: Roboto, sans-serif;
  background-color: @appBackgroundColor;
}

* {
  box-sizing: border-box;
}

@tooltipColor: NULL;
@tooltipBackground: NULL;
@tooltipArrowBackground: @tooltipBackground;
@tooltipArrowVisibility: NULL;

.bl-tooltip {
  color: @tooltipColor;
  background: @tooltipBackground;

  .bl-tooltip--arrow {
    color: @tooltipArrowBackground;
    visibility: @tooltipArrowVisibility;
  }
}



/*************************************************/
/*************************************************/
/*****    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;
@commonVisModalBodyTextColor: @commonVisTextColor;
@commonVisModalBodyBackgroundColor: @commonVisBackgroundPrimary;
@commonVisModalBodyMultiControlAddColor: @commonVisSuccessColor;
@commonVisModalBodyMultiControlRemoveColor: @commonVisTextColorSecondary;

@commonVisModalSectionBackgroundColor: @commonVisBackgroundSecondary;
@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 {
        color: @commonVisModalHeaderButtonColor;
      }
    }

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

      .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-modal-data-settings .bl-visualization-data-settings--modal-section {
  .bl-visualizations-accordion--root {
    background-color: @commonVisModalSectionBackgroundColor;
  }

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

.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-calendar-heatmap-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: block    *****/
.bl-block {
  display: flex;
}

/*****    component: block    *****/
/**********************************/
/**********************************/


/***********************************/
/***********************************/
/*****    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: chart-visualization    *****/
@chartVisualizationBackgroundPrimary: @appBackgroundColor;
@chartVisualizationBorderRadius: @appComponentBorderRadius;
@chartVisualizationBoxShadow: @appComponentShadow;
@chartVisualizationBorder: @panelBorder;
@chartVisualizationBackgroundSecondary: if(@isLightTheme, darken(@chartVisualizationBackgroundPrimary, 4%), lighten(@chartVisualizationBackgroundPrimary, 3%));

// preview
@chartVisualizationBackgroundColor: @chartVisualizationBackgroundPrimary;
@chartVisualizationDateSetupControlColor: if(@isLightTheme, darken(@chartVisualizationBackgroundSecondary, 45%), lighten(@chartVisualizationBackgroundSecondary, 45%));
@chartVisualizationDateSetupControlBackgroundColor: @chartVisualizationBackgroundSecondary;

// modal
@chartVisualizationModalBodyTitleColor: hsl(0, 0%, if(@isLightTheme, 20%, 80%));

// data setup modal
@chartVisualizationDataSetupModalBackgroundColor: @chartVisualizationBackgroundSecondary;
@chartVisualizationDataSetupModalSectionBackgroundColor: @chartVisualizationBackgroundPrimary;

@chartVisualizationXAxisBackgroundColor: @chartVisualizationDataSetupModalSectionBackgroundColor;

@chartVisualizationSeriesItemBackgroundColor: @chartVisualizationDataSetupModalBackgroundColor;

@chartVisualizationSeriesItemHeaderBorderColor: if(@isLightTheme, darken(@chartVisualizationBackgroundPrimary, 9%), lighten(@chartVisualizationBackgroundPrimary, 9%));
@chartVisualizationSeriesItemBorder: 1px solid @chartVisualizationSeriesItemHeaderBorderColor;
@chartVisualizationSeriesItemTitleColor: @appTextColor;

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

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

    .bl-chart--date-setup-control {
      background-color: @chartVisualizationDateSetupControlBackgroundColor;
      color: @chartVisualizationDateSetupControlColor;
    }

    .bl-datetime-picker-input-icon {
      color: @chartVisualizationDateSetupControlColor;
    }
  }
}

.bl-chart-visualization-modal.bl-ui-sdk-modal .bl-modal-content .bl-modal-body {
  .bl-chart-visualization-series-settings {
    .bl-x-axis-settings-container {
      background-color: @chartVisualizationXAxisBackgroundColor;
    }

    .bl-chart-series-item-settings {
      background-color: @chartVisualizationSeriesItemBackgroundColor;

      .bl-series-item-header {
        border-bottom: @chartVisualizationSeriesItemBorder;

        .bl-series-item-title {
          color: @chartVisualizationSeriesItemTitleColor;
        }
      }
    }
  }
}

.bl-ui-sdk-modal.bl-chart-visualization-series-modal {
  color: @chartVisualizationModalBodyTitleColor;

  .bl-modal-header,
  .bl-modal-body,
  .bl-modal-footer {
    background-color: @chartVisualizationDataSetupModalBackgroundColor;
  }

  .bl-x-axis-settings-container,
  .bl-y-axis-settings-container,
  .bl-chart-type-settings-container {
    background-color: @chartVisualizationDataSetupModalSectionBackgroundColor;
  }
}

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


/*******************************************************/
/*******************************************************/
/*****    component: autocomplete-google-places    *****/
@autocompleteGooglePlacesThemeColor: @themePrimary;

//default
@autocompleteGooglePlacesFilledShadow: NULL;
@autocompleteGooglePlacesFilledShadowHover: NULL;
@autocompleteGooglePlacesFilledShadowActive: NULL;
@autocompleteGooglePlacesFilledShadowDisabled: NULL;

@autocompleteGooglePlacesFilledBackground: #eee;
@autocompleteGooglePlacesFilledBackgroundHover: NULL;
@autocompleteGooglePlacesFilledBackgroundActive: #f1f1f1;
@autocompleteGooglePlacesFilledBackgroundDisabled: #dbdbdb;

@autocompleteGooglePlacesFilledBorder: NULL;
@autocompleteGooglePlacesFilledBorderHover: NULL;
@autocompleteGooglePlacesFilledBorderActive: NULL;
@autocompleteGooglePlacesFilledBorderDisabled: NULL;

@autocompleteGooglePlacesFilledUnderlineColor: @autocompleteGooglePlacesThemeColor;
@autocompleteGooglePlacesFilledUnderlineWidth: @appComponentBorderWidth;
@autocompleteGooglePlacesFilledUnderlineType: solid;
@autocompleteGooglePlacesFilledUnderline: @autocompleteGooglePlacesFilledUnderlineWidth @autocompleteGooglePlacesFilledUnderlineType @autocompleteGooglePlacesFilledUnderlineColor;

@autocompleteGooglePlacesFilledBorderRadius: @appComponentBorderRadius;
@autocompleteGooglePlacesFilledBorderRadiusTopLeft: @autocompleteGooglePlacesFilledBorderRadius;
@autocompleteGooglePlacesFilledBorderRadiusTopRight: @autocompleteGooglePlacesFilledBorderRadius;
@autocompleteGooglePlacesFilledBorderRadiusBottomRight: 0;
@autocompleteGooglePlacesFilledBorderRadiusBottomLeft: 0;

@autocompleteGooglePlacesFilledColor: contrast(@autocompleteGooglePlacesFilledBackground);
@autocompleteGooglePlacesFilledColorHover: contrast(@autocompleteGooglePlacesFilledBackground);
@autocompleteGooglePlacesFilledColorActive: contrast(@autocompleteGooglePlacesFilledBackground);
@autocompleteGooglePlacesFilledColorDisabled: contrast(@autocompleteGooglePlacesFilledBackgroundDisabled);

@autocompleteGooglePlacesFilledAutofillColor: @autocompleteGooglePlacesFilledColor;
@autocompleteGooglePlacesFilledAutofillColorHover: @autocompleteGooglePlacesFilledColorHover;
@autocompleteGooglePlacesFilledAutofillColorActive: @autocompleteGooglePlacesFilledColorActive;

@autocompleteGooglePlacesFilledAutofillBackgroundColor: transparent;
@autocompleteGooglePlacesFilledAutofillBackgroundColorHover: transparent;
@autocompleteGooglePlacesFilledAutofillBackgroundColorActive: transparent;

@autocompleteGooglePlacesFilledLabelColor: @autocompleteGooglePlacesFilledColor;
@autocompleteGooglePlacesFilledLabelColorHover: @autocompleteGooglePlacesFilledLabelColor;
@autocompleteGooglePlacesFilledLabelColorActive: @autocompleteGooglePlacesFilledLabelColor;
@autocompleteGooglePlacesFilledLabelColorDisabled: @disabledColor;

//outlined
@autocompleteGooglePlacesOutlinedShadow: NULL;
@autocompleteGooglePlacesOutlinedShadowHover: NULL;
@autocompleteGooglePlacesOutlinedShadowActive: NULL;
@autocompleteGooglePlacesOutlinedShadowDisabled: NULL;

@autocompleteGooglePlacesOutlinedBackground: NULL;
@autocompleteGooglePlacesOutlinedBackgroundHover: NULL;
@autocompleteGooglePlacesOutlinedBackgroundActive: NULL;
@autocompleteGooglePlacesOutlinedBackgroundDisabled: NULL;

@autocompleteGooglePlacesOutlinedBorderWidth: @appComponentBorderWidth;
@autocompleteGooglePlacesOutlinedBorderType: solid;

@autocompleteGooglePlacesOutlinedBorder: @autocompleteGooglePlacesOutlinedBorderWidth @autocompleteGooglePlacesOutlinedBorderType @autocompleteGooglePlacesThemeColor;
@autocompleteGooglePlacesOutlinedBorderHover: NULL;
@autocompleteGooglePlacesOutlinedBorderActive: @autocompleteGooglePlacesOutlinedBorderWidth @autocompleteGooglePlacesOutlinedBorderType @autocompleteGooglePlacesThemeColor;
@autocompleteGooglePlacesOutlinedBorderDisabled: @autocompleteGooglePlacesOutlinedBorderWidth @autocompleteGooglePlacesOutlinedBorderType @disabledColor;

@autocompleteGooglePlacesOutlinedBorderRadius: @appComponentBorderRadius;
@autocompleteGooglePlacesOutlinedBorderRadiusTopLeft: @autocompleteGooglePlacesOutlinedBorderRadius;
@autocompleteGooglePlacesOutlinedBorderRadiusTopRight: @autocompleteGooglePlacesOutlinedBorderRadius;
@autocompleteGooglePlacesOutlinedBorderRadiusBottomRight: @autocompleteGooglePlacesOutlinedBorderRadius;
@autocompleteGooglePlacesOutlinedBorderRadiusBottomLeft: @autocompleteGooglePlacesOutlinedBorderRadius;

@autocompleteGooglePlacesOutlinedColor: @appTextColor;
@autocompleteGooglePlacesOutlinedColorHover: @appTextColor;
@autocompleteGooglePlacesOutlinedColorActive: @appTextColor;
@autocompleteGooglePlacesOutlinedColorDisabled: @disabledColor;

@autocompleteGooglePlacesOutlinedAutofillColor: @autocompleteGooglePlacesOutlinedColor;
@autocompleteGooglePlacesOutlinedAutofillColorHover: @autocompleteGooglePlacesOutlinedColorHover;
@autocompleteGooglePlacesOutlinedAutofillColorActive: @autocompleteGooglePlacesOutlinedColorActive;

@autocompleteGooglePlacesOutlinedAutofillBackgroundColor: transparent;
@autocompleteGooglePlacesOutlinedAutofillBackgroundColorHover: transparent;
@autocompleteGooglePlacesOutlinedAutofillBackgroundColorActive: transparent;

@autocompleteGooglePlacesOutlinedLabelColor: @appTextColor;
@autocompleteGooglePlacesOutlinedLabelColorHover: @autocompleteGooglePlacesOutlinedLabelColor;
@autocompleteGooglePlacesOutlinedLabelColorActive: @autocompleteGooglePlacesOutlinedLabelColor;
@autocompleteGooglePlacesOutlinedLabelColorDisabled: @disabledColor;

//standard
@autocompleteGooglePlacesStandardShadow: NULL;
@autocompleteGooglePlacesStandardShadowHover: NULL;
@autocompleteGooglePlacesStandardShadowActive: NULL;
@autocompleteGooglePlacesStandardShadowDisabled: NULL;

@autocompleteGooglePlacesStandardUnderlineWidth: @appComponentBorderWidth;
@autocompleteGooglePlacesStandardUnderlineType: solid;
@autocompleteGooglePlacesStandardUnderlineColor: @autocompleteGooglePlacesStandardColor;
@autocompleteGooglePlacesStandardUnderlineColorActive: @autocompleteGooglePlacesThemeColor;
@autocompleteGooglePlacesStandardUnderlineColorDisabled: @disabledColor;

@autocompleteGooglePlacesStandardUnderline: @autocompleteGooglePlacesStandardUnderlineWidth @autocompleteGooglePlacesStandardUnderlineType fade(@autocompleteGooglePlacesStandardUnderlineColor, 70%);
@autocompleteGooglePlacesStandardUnderlineHover: calc(@autocompleteGooglePlacesStandardUnderlineWidth + 1px) @autocompleteGooglePlacesStandardUnderlineType @autocompleteGooglePlacesStandardUnderlineColor;
@autocompleteGooglePlacesStandardUnderlineActive: @autocompleteGooglePlacesStandardUnderlineWidth @autocompleteGooglePlacesStandardUnderlineType @autocompleteGooglePlacesStandardUnderlineColorActive;
@autocompleteGooglePlacesStandardUnderlineDisabled: @autocompleteGooglePlacesStandardUnderlineWidth @autocompleteGooglePlacesStandardUnderlineType @autocompleteGooglePlacesStandardUnderlineColorDisabled;

@autocompleteGooglePlacesStandardColor: @appTextColor;
@autocompleteGooglePlacesStandardColorHover: @appTextColor;
@autocompleteGooglePlacesStandardColorActive: @appTextColor;
@autocompleteGooglePlacesStandardColorDisabled: @disabledColor;

@autocompleteGooglePlacesStandardAutofillColor: @autocompleteGooglePlacesStandardColor;
@autocompleteGooglePlacesStandardAutofillColorHover: @autocompleteGooglePlacesStandardColorHover;
@autocompleteGooglePlacesStandardAutofillColorActive: @autocompleteGooglePlacesStandardColorActive;

@autocompleteGooglePlacesStandardLabelColor: @autocompleteGooglePlacesStandardColor;
@autocompleteGooglePlacesStandardLabelColorHover: @autocompleteGooglePlacesStandardLabelColor;
@autocompleteGooglePlacesStandardLabelColorActive: @autocompleteGooglePlacesStandardLabelColor;
@autocompleteGooglePlacesStandardLabelColorDisabled: @disabledColor;

@autocompleteGooglePlacesListBoxBackgroundColor: white;

@autocompleteGooglePlacesListBoxOptionBackgroundColor: white;
@autocompleteGooglePlacesListBoxNoOptionBackgroundColor: @autocompleteGooglePlacesListBoxOptionBackgroundColor;
@autocompleteGooglePlacesListBoxOptionBackgroundColorHover: fade(@disabledColor, 20%);
@autocompleteGooglePlacesListBoxNoOptionBackgroundColorHover: @autocompleteGooglePlacesListBoxOptionBackgroundColorHover;

@autocompleteGooglePlacesListBoxOptionTextColor: @appTextColor;
@autocompleteGooglePlacesListBoxNoOptionTextColor: @autocompleteGooglePlacesListBoxOptionTextColor;
@autocompleteGooglePlacesListBoxOptionTextColorHover: @appTextColor;
@autocompleteGooglePlacesListBoxNoOptionTextColorHover: @autocompleteGooglePlacesListBoxOptionTextColorHover;

@autocompleteGooglePlacesListBoxOptionSecondaryTextColor: @disabledColor;
@autocompleteGooglePlacesListBoxOptionSecondaryTextColorHover: @disabledColor;

.bl-autocomplete-google-places {
  &.bl-autocomplete-google-places-input--outlined {
    fieldset {
      border-radius: @autocompleteGooglePlacesOutlinedBorderRadiusTopLeft @autocompleteGooglePlacesOutlinedBorderRadiusTopRight @autocompleteGooglePlacesOutlinedBorderRadiusBottomRight @autocompleteGooglePlacesOutlinedBorderRadiusBottomLeft;
    }

    .bl-autocomplete-google-places-label {
      color: @autocompleteGooglePlacesOutlinedLabelColor;
    }

    &:hover .bl-autocomplete-google-places-label:not(.bl-autocomplete-google-places-label--disabled):not(.bl-autocomplete-google-places-label--focused) {
      color: @autocompleteGooglePlacesOutlinedLabelColorHover;
    }

    .bl-autocomplete-google-places-label--disabled {
      color: @autocompleteGooglePlacesOutlinedLabelColorDisabled;
    }

    .bl-autocomplete-google-places-label--focused {
      color: @autocompleteGooglePlacesOutlinedLabelColorActive;
    }

    .bl-autocomplete-google-places-input-input-root {
      &:not(.bl-autocomplete-google-places-input-input--focused):not(.bl-autocomplete-google-places-input-input--disabled):hover {
        fieldset {
          border: @autocompleteGooglePlacesOutlinedBorderHover;
          box-shadow: @autocompleteGooglePlacesOutlinedShadowHover;
        }

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

        background-color: @autocompleteGooglePlacesOutlinedBackgroundHover;
        color: @autocompleteGooglePlacesOutlinedColorHover;
      }

      &.bl-autocomplete-google-places-input-input--focused {
        fieldset {
          border: @autocompleteGooglePlacesOutlinedBorderActive;
          box-shadow: @autocompleteGooglePlacesOutlinedShadowActive;
        }

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

        background-color: @autocompleteGooglePlacesOutlinedBackgroundActive;
        color: @autocompleteGooglePlacesOutlinedColorActive;
      }

      &.bl-autocomplete-google-places-input-input--disabled {
        fieldset {
          border: @autocompleteGooglePlacesOutlinedBorderDisabled;
          box-shadow: @autocompleteGooglePlacesOutlinedShadowDisabled;
        }

        background-color: @autocompleteGooglePlacesOutlinedBackgroundDisabled;
        color: @autocompleteGooglePlacesOutlinedColorDisabled;
      }

      fieldset {
        border: @autocompleteGooglePlacesOutlinedBorder;
        box-shadow: @autocompleteGooglePlacesOutlinedShadow;
      }

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

      background-color: @autocompleteGooglePlacesOutlinedBackground;
      color: @autocompleteGooglePlacesOutlinedColor;
    }
  }

  &.bl-autocomplete-google-places-input--filled {
    ::after {
      border-bottom: @autocompleteGooglePlacesFilledUnderline;
    }

    .bl-autocomplete-google-places-label {
      color: @autocompleteGooglePlacesFilledLabelColor;
    }

    &:hover .bl-autocomplete-google-places-label:not(.bl-autocomplete-google-places-label--disabled):not(.bl-autocomplete-google-places-label--focused) {
      color: @autocompleteGooglePlacesFilledLabelColorHover;
    }

    .bl-autocomplete-google-places-label--disabled {
      color: @autocompleteGooglePlacesFilledLabelColorDisabled;
    }

    .bl-autocomplete-google-places-label--focused {
      color: @autocompleteGooglePlacesFilledLabelColorActive;
    }

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

        border: @autocompleteGooglePlacesFilledBorderHover;
        box-shadow: @autocompleteGooglePlacesFilledShadowHover;
        background-color: @autocompleteGooglePlacesFilledBackgroundHover;
        color: @autocompleteGooglePlacesFilledColorHover;
      }

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

        border: @autocompleteGooglePlacesFilledBorderActive;
        box-shadow: @autocompleteGooglePlacesFilledShadowActive;
        background-color: @autocompleteGooglePlacesFilledBackgroundActive;
        color: @autocompleteGooglePlacesFilledColorActive;
      }

      &.bl-autocomplete-google-places-input-input--disabled {
        border: @autocompleteGooglePlacesFilledBorderDisabled;
        box-shadow: @autocompleteGooglePlacesFilledShadowDisabled;
        background-color: @autocompleteGooglePlacesFilledBackgroundDisabled;
        color: @autocompleteGooglePlacesFilledColorDisabled;
      }

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

      border-radius: @autocompleteGooglePlacesFilledBorderRadiusTopLeft @autocompleteGooglePlacesFilledBorderRadiusTopRight @autocompleteGooglePlacesFilledBorderRadiusBottomRight @autocompleteGooglePlacesFilledBorderRadiusBottomLeft;
      border: @autocompleteGooglePlacesFilledBorder;
      box-shadow: @autocompleteGooglePlacesFilledShadow;
      background-color: @autocompleteGooglePlacesFilledBackground;
      color: @autocompleteGooglePlacesFilledColor;
    }
  }

  &.bl-autocomplete-google-places-input--standard {
    .bl-autocomplete-google-places-label {
      color: @autocompleteGooglePlacesStandardLabelColor;
    }

    &:hover .bl-autocomplete-google-places-label:not(.bl-autocomplete-google-places-label--disabled):not(.bl-autocomplete-google-places-label--focused) {
      color: @autocompleteGooglePlacesStandardLabelColorHover;
    }

    .bl-autocomplete-google-places-label--disabled {
      color: @autocompleteGooglePlacesStandardLabelColorDisabled;
    }

    .bl-autocomplete-google-places-label--focused {
      color: @autocompleteGooglePlacesStandardLabelColorActive;
    }

    .bl-autocomplete-google-places-input-input-root {
      &::after {
        border-bottom: @autocompleteGooglePlacesStandardUnderlineActive;
      }

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

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

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

        box-shadow: @autocompleteGooglePlacesStandardShadowHover;
        color: @autocompleteGooglePlacesStandardColorHover;
      }

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

        box-shadow: @autocompleteGooglePlacesStandardShadowActive;
        color: @autocompleteGooglePlacesStandardColorActive;
      }

      &.bl-autocomplete-google-places-input-input--disabled {
        &::before {
          border-bottom: @autocompleteGooglePlacesStandardUnderlineDisabled;
        }

        box-shadow: @autocompleteGooglePlacesStandardShadowDisabled;
        color: @autocompleteGooglePlacesStandardColorDisabled;
      }

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

      box-shadow: @autocompleteGooglePlacesStandardShadow;
      color: @autocompleteGooglePlacesStandardColor;
    }
  }
}

.bl-autocomplete-google-places--listbox {
  background-color: @autocompleteGooglePlacesListBoxBackgroundColor;

  .bl-autocomplete-google-places--option {
    background-color: @autocompleteGooglePlacesListBoxOptionBackgroundColor;
    color: @autocompleteGooglePlacesListBoxOptionTextColor;

    .MuiTypography-colorTextSecondary {
      color: @autocompleteGooglePlacesListBoxOptionSecondaryTextColor
    }

    &:hover {
      background-color: @autocompleteGooglePlacesListBoxOptionBackgroundColorHover;
      color: @autocompleteGooglePlacesListBoxOptionTextColorHover;

      .MuiTypography-colorTextSecondary {
        color: @autocompleteGooglePlacesListBoxOptionSecondaryTextColorHover
      }
    }
  }
}

.bl-autocomplete-google-places--noOptions {
  background-color: @autocompleteGooglePlacesListBoxNoOptionBackgroundColor;
  color: @autocompleteGooglePlacesListBoxNoOptionTextColor;

  &:hover {
    background-color: @autocompleteGooglePlacesListBoxNoOptionBackgroundColorHover;
    color: @autocompleteGooglePlacesListBoxNoOptionTextColorHover;
  }
}


/*****    component: autocomplete-google-places    *****/
/*******************************************************/
/*******************************************************/


/***************************************************/
/***************************************************/
/*****    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;
      background-color: @calendarVisualizationBackgroundColor;
    }

    .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--events-grid-timeline--show-more-out-fit-btn {
      background-color: @calendarVisualizationNavigatorBtnBackgroundColor;
      color: @calendarVisualizationNavigatorBtnColor;
    }

    .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: chip    *****/
@chipThemeColor: @themePrimary;
@chipDisabledColor: @disabledColor;
@chipBorderRadius: 16px;
@chipWidth: max-content;
@chipIconWidth: auto;
@chipIconHeight: auto;
@chipBorderWidth: @appComponentBorderWidth;
@chipBorderType: solid;
@chipFontSizeSmall: 16px;

@chipBackground: @chipThemeColor;
@chipColor: contrast(@chipBackground);
@chipIconColor: inherit;
@chipFrontIconColor: @chipIconColor;
@chipDeleteIconColor: @chipIconColor;
@chipDisabledBackground: @chipDisabledColor;

@chipOutlinedBackground: transparent;
@chipOutlinedColor: @chipThemeColor;
@chipOutlinedIconColor: inherit;
@chipOutlinedFrontIconColor: @chipOutlinedIconColor;
@chipOutlinedDeleteIconColor: @chipOutlinedIconColor;
@chipOutlinedBorderWidth: @chipBorderWidth;
@chipOutlinedBorderType: @chipBorderType;
@chipOutlinedBorderColor: @chipOutlinedColor;
@chipOutlinedBorder: @chipOutlinedBorderWidth @chipOutlinedBorderType @chipOutlinedBorderColor;
@chipOutlinedDisabledColor: @chipDisabledColor;
@chipOutlinedDisabledBorderWidth: @chipOutlinedBorderWidth;
@chipOutlinedDisabledBorderType: @chipOutlinedBorderType;
@chipOutlinedDisabledBorderColor: @chipDisabledColor;
@chipOutlinedDisabledBorder: @chipOutlinedDisabledBorderWidth @chipOutlinedDisabledBorderType @chipOutlinedDisabledBorderColor;

.bl-chip {
  border-radius: @chipBorderRadius;
  width: @chipWidth;

  &:not(.bl-chip--outlined) {
    background: @chipBackground;
    color: @chipColor;

    .bl-chip-front-icon {
      color: @chipFrontIconColor;
    }

    .bl-chip-delete-icon {
      color: @chipDeleteIconColor;
      width: @chipIconWidth;
      height: @chipIconHeight;
    }

    .MuiChip-deleteIconSmall {
      font-size: @chipFontSizeSmall;
    }

    &.bl-chip--disabled {
      background: @chipDisabledBackground;
      color: @chipDisabledColor;
    }
  }

  &.bl-chip--outlined {
    &:not(.bl-chip--disabled) {
      background: @chipOutlinedBackground;
      color: @chipOutlinedColor;
      border: @chipOutlinedBorder;

      .bl-chip-front-icon {
        color: @chipOutlinedFrontIconColor;
      }

      .bl-chip-delete-icon {
        width: @chipIconWidth;
        height: @chipIconHeight;
        color: @chipOutlinedDeleteIconColor;
      }
    }

    &.bl-chip--disabled {
      border: @chipOutlinedDisabledBorder;
      color: @chipOutlinedDisabledColor;

      .bl-chip-front-icon {
        color: @chipOutlinedDisabledColor;
      }

      .bl-chip-delete-icon {
        color: @chipOutlinedDisabledColor;
      }
    }
  }
}

//Mui classes
.MuiChip-deleteIconSmall {
  font-size: @chipFontSizeSmall;
}

.MuiChip-iconSmall {
  font-size: 18px;
}

/*****    component: chip    *****/
/*********************************/
/*********************************/


/*****************************************/
/*****************************************/
/*****    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: 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: chart    *****/
@chartBorderRadius: @appComponentBorderRadius;
@chartBoxShadow: @appComponentShadow;
@chartBackgroundColor: #FFF;

.bl-chart {
  position:relative;
  background-color:@chartBackgroundColor;
  border-radius: @chartBorderRadius;
  box-shadow: @chartBoxShadow;
}
/*****    component: chart    *****/
/**********************************/
/**********************************/


/***********************************************************/
/***********************************************************/
/*****    component: calendar-heatmap-visualization    *****/
@calendarHeatmapVisualizationBackgroundSecondary: if(@isLightTheme, darken(@appBackgroundColor, 4%), lighten(@appBackgroundColor, 3%));

@calendarHeatmapVisualizationTextColorSecondary: hsl(0, 0%, if(@isLightTheme, 20%, 80%));
@calendarHeatmapVisualizationTextColorActive: @themePrimary;
@calendarHeatmapVisualizationTextColorHover: darken(@calendarHeatmapVisualizationTextColorActive, 15%);

// panel
@calendarHeatmapVisualizationBorderRadius: @appComponentBorderRadius;
@calendarHeatmapVisualizationBoxShadow: @appComponentShadow;
@calendarHeatmapVisualizationBorder: @panelBorder;

// relation panel
@calendarHeatmapVisualizationRelationPanelBackgroundColor: @commonVisBackgroundSecondary;

// coloring modal
@calendarHeatmapVisualizationColoringModalBackgroundColor: @calendarHeatmapVisualizationBackgroundSecondary;
@calendarHeatmapVisualizationColoringModalSectionBackgroundColor: @calendarHeatmapVisualizationBackgroundColor;
@calendarHeatmapVisualizationColoringModalSectionTitleColor: @calendarHeatmapVisualizationTextColorSecondary;

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

// navigator
@calendarHeatmapVisualizationNavigatorTitleColor: @calendarHeatmapVisualizationTextColorSecondary;
@calendarHeatmapVisualizationNavigatorTextColorHover: @calendarHeatmapVisualizationTextColorHover;

// week days
@calendarHeatmapVisualizationWeeksDayColor: @calendarHeatmapVisualizationTextColorSecondary;
@calendarHeatmapVisualizationWeeksTodayBackgroundColor: @calendarHeatmapVisualizationTextColorActive;
@calendarHeatmapVisualizationWeeksTodayColor: if(boolean(lightness(@calendarHeatmapVisualizationWeeksTodayBackgroundColor) > 50%), #000, #FFF);

// cell
@calendarHeatmapVisualizationCellBorderColor: @calendarHeatmapVisualizationGridBordersColor;
@calendarHeatmapVisualizationCellMonthBorderColor: if(@isLightTheme, darken(@calendarHeatmapVisualizationBackgroundSecondary, 45%), lighten(@calendarHeatmapVisualizationBackgroundSecondary, 45%));
@calendarHeatmapVisualizationCellTodayDateBackgroundColor: @calendarHeatmapVisualizationTextColorActive;
@calendarHeatmapVisualizationCellMonthHiddenBackgroundColor: @calendarHeatmapVisualizationBackgroundSecondary;
@calendarHeatmapVisualizationCellDateColor: @calendarHeatmapVisualizationTextColorSecondary;
@calendarHeatmapVisualizationCellTodayDateColor: if(boolean(lightness(@calendarHeatmapVisualizationCellTodayDateBackgroundColor) > 50%), #000, #FFF);
@calendarHeatmapVisualizationCellWeekendBackgroundColor: if(@isLightTheme, darken(@calendarHeatmapVisualizationBackgroundColor, 2%), lighten(@calendarHeatmapVisualizationBackgroundColor, 2%));
@calendarHeatmapVisualizationCellMonthNameColor: @calendarHeatmapVisualizationTextColorActive;

.bl-calendar-heatmap-visualization {
  position: relative;
  border-radius: @calendarHeatmapVisualizationBorderRadius;
  box-shadow: @calendarHeatmapVisualizationBoxShadow;
  border: @calendarHeatmapVisualizationBorder;

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

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

    .bl-calendar--navigator-control,
    .bl-switch-label-root {
      &:hover {
        color: @calendarHeatmapVisualizationNavigatorTextColorHover;
      }
    }

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

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

    .bl-calendar-weeks-day-date--today {
      background-color: @calendarHeatmapVisualizationWeeksTodayBackgroundColor;
      color: @calendarHeatmapVisualizationWeeksTodayColor;
    }

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

      &.border-bottom::after,
      &.border-right::before {
        background-color: @calendarHeatmapVisualizationCellMonthBorderColor;
      }
    }

    .bl-histogram .bl-calendar-day-cell--hidden {
      background-color: @calendarHeatmapVisualizationCellMonthHiddenBackgroundColor;
    }

    .bl-histogram-by-weeks .bl-calendar-grid-row:first-child {
      border-left-color: @calendarHeatmapVisualizationCellBorderColor;
    }

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

    .bl-calendar-day-cell--today {
      .bl-calendar-day-cell--date {
        background-color: @calendarHeatmapVisualizationCellTodayDateBackgroundColor;
        color: @calendarHeatmapVisualizationCellTodayDateColor;
      }
    }

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

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

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

    .bl-heat-map-calendar--summary,
    .bl-heat-map-calendar--summary-header,
    .bl-heat-map-summary-chart {
      border-color: @calendarHeatmapVisualizationGridBordersColor;
    }
  }
}

.bl-ui-sdk-modal.bl-heat-map-visualization--data-source-settings-modal {
  .bl-data-source-settings-relations-panel,
  .bl-related-selection {
    background-color: @calendarHeatmapVisualizationRelationPanelBackgroundColor;
  }
}

.bl-ui-sdk-modal.bl-heat-map-visualization--coloring-modal {
  .bl-modal-body,
  .bl-modal-header,
  .bl-coloring-modal--ranges-settings {
    background-color: @calendarHeatmapVisualizationColoringModalBackgroundColor;
  }

  .bl-coloring-modal--section {
    background-color: @calendarHeatmapVisualizationColoringModalSectionBackgroundColor;
  }

  .bl-panel__title {
    color: @calendarHeatmapVisualizationColoringModalSectionTitleColor;
  }
}

/*****    component: calendar-heatmap-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: data-table    *****/
@dataTablePrimaryColor: @themePrimary;
@dataTableDisabledColor: @disabledColor;

@dataTableBackground: @appBackgroundColor;

@dataTableScrollColor: fadeout(contrast(@dataTableBackground), 80%);

@dataTableColor: contrast(@dataTableBackground);
@dataTableBorder: @panelBorder;
@dataTableBorderRadius: @panelBorderRadius;
@dataTableShadow: @panelShadow;

@dataTableButtonColor: @dataTableColor;
@dataTableButtonColorActive: @dataTablePrimaryColor;

@dataTableTitleColor: NULL;

@dataTableSearchLabelColor: @dataTableDisabledColor;
@dataTableSearchTextColor: @dataTableColor;
@dataTableSearchButtonColorDisabled: transparent;

@dataTableInputUnderlineBorder: 1px solid @dataTableDisabledColor;
@dataTableInputUnderlineBorderHover: 1px solid @dataTableColor;
@dataTableInputUnderlineBorderActive: 2px solid @dataTablePrimaryColor;

@dataTableHeadCellColor: @dataTableColor;
@dataTableHeadCellSize: NULL;
@dataTableHeadCellBorder: 1px solid @dataTableDisabledColor;
@dataTableHeadSortLabelColor: inherit;
@dataTableHeadSortLabelColorActive: @dataTablePrimaryColor;

@dataTableBodyCellColor: NULL;
@dataTableBodyCellBorder: @dataTableHeadCellBorder;

@dataTableBodyRowBackgroundEven: NULL;
@dataTableBodyRowBackgroundOdd: NULL;
@dataTableBodyRowBackgroundHover: NULL;
@dataTableBodyRowBackgroundSelected: NULL;

@dataTablePaginationColor: @dataTableColor;

.bl-data-table {
  display: flex;
  flex-direction: column;

  background: @dataTableBackground;
  color: @dataTableColor;
  box-shadow: @dataTableShadow;
  border: @dataTableBorder;
  border-radius: @dataTableBorderRadius;

  .MuiButtonBase-root:not(.Mui-disabled) {
    color: @dataTableButtonColor;

    &:hover {
      color: @dataTableButtonColorActive;
    }
  }

  .MuiInputBase-root {
    color: @dataTableSearchTextColor;

    .MuiInputAdornment-positionStart {
      color: @dataTableSearchLabelColor;
    }

    input {
      color: inherit;
    }

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

    &:hover:not(.Mui-disabled):before {
      border-bottom: @dataTableInputUnderlineBorderHover;
    }

    &:after {
      border-bottom: @dataTableInputUnderlineBorderActive;
    }

  }

  .bl-data-table-toolbar {
    .bl-data-table-title {
      color: @dataTableTitleColor;
    }

    .bl-data-table-search-field {
      .MuiIconButton-root.Mui-disabled {
        color: @dataTableSearchButtonColorDisabled;
      }

    }
  }

  .bl-data-table-head-cell {
    color: @dataTableHeadCellColor;
    font-size: @dataTableHeadCellSize;
    border-bottom: @dataTableHeadCellBorder;

    .MuiTableSortLabel-root {
      .MuiTableSortLabel-icon {
        color: @dataTableHeadSortLabelColor;
      }

      &.MuiTableSortLabel-active {
        color: @dataTableHeadSortLabelColorActive;

        .MuiTableSortLabel-icon {
          color: inherit;
        }
      }
    }
  }

  .bl-data-table-row {
    td {
      overflow-wrap: anywhere;
      color: @dataTableBodyCellColor;
      border-bottom: @dataTableBodyCellBorder;
    }

    &:nth-child(2n) {
      background-color: @dataTableBodyRowBackgroundEven;
    }

    &:nth-child(2n-1) {
      background-color: @dataTableBodyRowBackgroundOdd;
    }

    &:hover {
      background: @dataTableBodyRowBackgroundHover;
    }

    &.Mui-selected {
      background-color: @dataTableBodyRowBackgroundSelected;
    }
  }

  .bl-data-table-edit-row {
    .bl-data-table-field {
      .MuiInputBase-root {
        &:before {
          border-bottom: @dataTableInputUnderlineBorderHover;
        }
      }
    }

    .MuiTableCell-body {
      color: inherit;
    }
  }

  .bl-data-table-pagination {
    border-bottom: none;
    color: @dataTablePaginationColor;

    .MuiIconButton-root {
      color: @dataTablePaginationColor;

      &.Mui-disabled {
        color: @dataTableDisabledColor
      }
    }

    .MuiTypography-caption {
      color: @dataTableDisabledColor;
    }

    .bl-data-table-pagination-select-icon {
      color: inherit;
    }
  }

  ::-webkit-scrollbar-thumb {
    background-color: @dataTableScrollColor;
  }

  ::-webkit-scrollbar {
    width: 8px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }
}

.bl-data-table.MuiPaper-root {
  color: @dataTableColor;
  background: @dataTableBackground;
}

/*****    component: data-table    *****/
/***************************************/
/***************************************/


/************************************/
/************************************/
/*****    component: divider    *****/
@dividerColor:@themePrimary;
@dividerWidth:@appComponentBorderWidth;

.bl-divider {
  border-color: @dividerColor;
  border-width: @dividerWidth;
}
/*****    component: divider    *****/
/************************************/
/************************************/


/***************************************/
/***************************************/
/*****    component: google-map    *****/
@googleMapBackgroundColor: contrast(@appBlockBackgroundColor);
@googleMapBorder: @appBlockBorder;
@googleMapBorderRadius: @appBlockBorderRadius;
@googleMapShadow: @appBlockShadow;

.bl-google-map {
  display:flex;
  flex-grow:1;

  background-color: @googleMapBackgroundColor;
  border: @googleMapBorder;
  border-radius: @googleMapBorderRadius;
  box-shadow: @googleMapShadow;

  .map {

  }
}

/*****    component: google-map    *****/
/***************************************/
/***************************************/


/****************************************/
/****************************************/
/*****    component: icon-button    *****/
@iconButtonSmallPadding: 8px;
@iconButtonSmallFontSize: 1.3em;

@iconButtonMediumPadding: 12px;
@iconButtonMediumFontSize: 1.5em;

@iconButtonLargePadding: 16px;
@iconButtonLargeFontSize: 2em;

.bl-button.bl-icon-button {
  border-radius: 50%;
  min-width: initial;
  padding: @iconButtonMediumPadding;

  .bl-icon {
    font-size: @iconButtonMediumFontSize;
  }

  &.bl-button--small {
    padding: @iconButtonSmallPadding;
    border-radius: 50%;

    .bl-icon {
      font-size: @iconButtonSmallFontSize;
    }
  }

  &.bl-button--large {
    padding: @iconButtonLargePadding;
    border-radius: 50%;

    .bl-icon {
      font-size: @iconButtonLargeFontSize;
    }
  }

  &.bl-button--outlined,
  &.bl-button--text {
    .bl-icon {
      color: inherit;
    }
  }
}

/*****    component: icon-button    *****/
/****************************************/
/****************************************/


/********************************************/
/********************************************/
/*****    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: form    *****/
@formBackgroundColor: @appBlockBackgroundColor;
@formShadow: @appBlockShadow;
@formTextColor: @appBlockTextColor;
@formBorder: @appBlockBorder;
@formBorderRadius: @appBlockBorderRadius;

.bl-form {
  display:flex;
  flex-direction:column;

  background-color: @formBackgroundColor;
  box-shadow: @formShadow;
  color: @formTextColor;
  border: @formBorder;
  border-radius: @formBorderRadius;
}


/*****    component: form    *****/
/*********************************/
/*********************************/


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

.bl-icon {
  color: @iconColor;
}


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


/***********************************/
/***********************************/
/*****    component: iframe    *****/
@iframeBorder: @appBlockBorder;
@iframeBorderRadius: @appBlockBorderRadius;
@iframeShadow: @appBlockShadow;

.bl-iframe {
  flex:1;
  overflow: hidden;

  border: @iframeBorder;
  border-radius: @iframeBorderRadius;
  box-shadow: @iframeShadow;
}

/*****    component: iframe    *****/
/***********************************/
/***********************************/


/**************************************/
/**************************************/
/*****    component: jumbotron    *****/
@jumbotronBackground: #dbdbdb;
@jumbotronShadow: NULL;
@jumbotronTextColor: NULL;
@jumbotronBorder: NULL;
@jumbotronBorderRadius: 12px;
@jumbotronPadding: 48px 24px 48px 24px;
@jumbotronMargin: 0 0 48px 0;

.bl-jumbotron {
  display:flex;
  flex-direction:column;

  background: @jumbotronBackground;
  box-shadow: @jumbotronShadow;
  color: @jumbotronTextColor;
  border: @jumbotronBorder;
  border-radius: @jumbotronBorderRadius;
  padding: @jumbotronPadding;
  margin: @jumbotronMargin;
}

/*****    component: jumbotron    *****/
/**************************************/
/**************************************/


/****************************************/
/****************************************/
/*****    component: layout-cell    *****/
.bl-layout-cell {
  width: auto;
  grid-column-end: span 4;
  margin: 0;
  box-sizing: border-box;
}

.cell-variant(@size, @device) {
  .bl-layout-cell--@{size}-@{device} {
    grid-column-end: span @size;
  }
}

@media (max-width: @appLayoutMaxPhoneWidth) {
  .cell-variant(1, phone);
  .cell-variant(2, phone);
  .cell-variant(3, phone);
  .cell-variant(4, phone);
}

@media (max-width: @appLayoutMaxTabletWidth) and (min-width: @appLayoutMinTabletWidth) {
  .cell-variant(1, tablet);
  .cell-variant(2, tablet);
  .cell-variant(3, tablet);
  .cell-variant(4, tablet);
  .cell-variant(5, tablet);
  .cell-variant(6, tablet);
  .cell-variant(7, tablet);
  .cell-variant(8, tablet);
}

@media (min-width: @appLayoutMinDesktopWidth) {
  .cell-variant(1, desktop);
  .cell-variant(2, desktop);
  .cell-variant(3, desktop);
  .cell-variant(4, desktop);
  .cell-variant(5, desktop);
  .cell-variant(6, desktop);
  .cell-variant(7, desktop);
  .cell-variant(8, desktop);
  .cell-variant(9, desktop);
  .cell-variant(10, desktop);
  .cell-variant(11, desktop);
  .cell-variant(12, desktop);
}

/*****    component: layout-cell    *****/
/****************************************/
/****************************************/


/***********************************/
/***********************************/
/*****    component: layout    *****/
.bl-layout {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/*****    component: layout    *****/
/***********************************/
/***********************************/


/**********************************/
/**********************************/
/*****    component: image    *****/
@imageBorder: NULL;
@imageBorderRadius: @appComponentBorderRadius;
@imageBoxShadow: NULL;

.bl-image {
  border: @imageBorder;
  border-radius: @imageBorderRadius;
  box-shadow: @imageBoxShadow;
}

/*****    component: image    *****/
/**********************************/
/**********************************/


/*********************************************/
/*********************************************/
/*****    component: layout-container    *****/
@containerPhonePadding: @appLayoutPhoneGap;
@containerTabletPadding: @appLayoutTabletGap;
@containerDesktopPadding: @appLayoutDesktopGap;

.bl-layout-container {
  box-sizing: border-box;
  margin: 0 auto;
  flex-shrink: 0;
}

@media (max-width: @appLayoutMaxPhoneWidth) {
  .bl-layout-container {
    padding: @containerPhonePadding;
  }
}

@media (max-width: @appLayoutMaxTabletWidth) and (min-width: @appLayoutMinTabletWidth) {
  .bl-layout-container {
    padding: @containerTabletPadding;
  }
}

@media (min-width: @appLayoutMinDesktopWidth) {
  .bl-layout-container {
    padding: @containerDesktopPadding;
  }
}

/*****    component: layout-container    *****/
/*********************************************/
/*********************************************/


/***************************************/
/***************************************/
/*****    component: layout-row    *****/
@rowPhoneGap: @appLayoutPhoneGap;
@rowTabletGap: @appLayoutTabletGap;
@rowDesktopGap: @appLayoutDesktopGap;

.bl-layout-row {
  display: grid;
  margin: 0;
  flex-flow: row wrap;
  align-items: stretch;
}

@media (max-width: @appLayoutMaxPhoneWidth) {
  .bl-layout-row {
    gap: @rowPhoneGap;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: @appLayoutMaxTabletWidth) and (min-width: @appLayoutMinTabletWidth) {
  .bl-layout-row {
    gap: @rowTabletGap;
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}

@media (min-width: @appLayoutMinDesktopWidth) {
  .bl-layout-row {
    gap: @rowDesktopGap;
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}

/*****    component: layout-row    *****/
/***************************************/
/***************************************/


/*********************************/
/*********************************/
/*****    component: page    *****/
.bl-page {

}

/*****    component: page    *****/
/*********************************/
/*********************************/


/*********************************/
/*********************************/
/*****    component: link    *****/
@linkColor: @appTextColor;
@linkFontSize: NULL;
@linkFontWeight: NULL;

.bl-link {
  color: @linkColor;
  font-size: @linkFontSize;
  font-weight: @linkFontWeight;
}
/*****    component: link    *****/
/*********************************/
/*********************************/


/*****************************************/
/*****************************************/
/*****    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: paragraph    *****/
@paragraphColor: @appTextColor;
@paragraphFontSize: NULL;
@paragraphFontWeight: NULL;

.bl-paragraph {
  color: @paragraphColor;
  font-size: @paragraphFontSize;
  font-weight: @paragraphFontWeight;
}


/*****    component: paragraph    *****/
/**************************************/
/**************************************/


/**********************************/
/**********************************/
/*****    component: panel    *****/
@panelBackgroundColor: @appBlockBackgroundColor;
@panelShadow: @appBlockShadow;
@panelTextColor: @appBlockTextColor;
@panelBorder: @appBlockBorder;
@panelBorderRadius: @appBlockBorderRadius;
@panelPadding: NULL;
@panelMargin: NULL;

.bl-panel {
  background-color: @panelBackgroundColor;
  box-shadow: @panelShadow;
  color: @panelTextColor;
  border: @panelBorder;
  border-radius: @panelBorderRadius;
  padding: @panelPadding;
  margin: @panelMargin;
}

/*****    component: panel    *****/
/**********************************/
/**********************************/


/************************************************/
/************************************************/
/*****    component: radio-buttons-group    *****/
.bl-radio-button-group {

}
/*****    component: radio-buttons-group    *****/
/************************************************/
/************************************************/


/**********************************/
/**********************************/
/*****    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: slider    *****/
@sliderThemeColor: @themePrimary;
@sliderDisabledColor: @disabledColor;
@sliderTextColor: @appTextColor;

@sliderRailColor: fade(@sliderTrackColor, 38);
@sliderRailColorHover: NULL;
@sliderRailColorDisabled: fade(@sliderTrackColorDisabled, 38);

@sliderTrackColor: @sliderThemeColor;
@sliderTrackColorHover: NULL;
@sliderTrackColorDisabled: @sliderDisabledColor;

@sliderMarkColor: @sliderTrackColor;
@sliderMarkColorHover: NULL;
@sliderMarkColorDisabled: @sliderTrackColorDisabled;

@sliderMarkActiveColor: contrast(@sliderTrackColor);
@sliderMarkActiveColorHover: NULL;
@sliderMarkActiveColorDisabled: contrast(@sliderTrackColorDisabled);

@sliderMarkLabelColor: @sliderTextColor;
@sliderMarkLabelColorDisabled: @sliderDisabledColor;

@sliderThumbColor: @sliderTrackColor;
@sliderThumbColorActive: @sliderThumbColor;
@sliderThumbColorOnComponentHover: NULL;
@sliderThumbColorHover: NULL;
@sliderThumbColorDisabled: @sliderTrackColorDisabled;

@sliderThumbShadowHover: 0px 0px 0px 8px fade(@sliderTrackColor, 16);
@sliderThumbShadowActive: 0px 0px 0px 14px fade(@sliderTrackColor, 16);

@sliderThumbLabelColor: @sliderThumbColor;
@sliderThumbLabelColorActive: @sliderThumbLabelColor;
@sliderThumbLabelColorOnComponentHover: NULL;
@sliderThumbLabelColorHover: NULL;
@sliderThumbLabelColorDisabled: @sliderThumbColorDisabled;

@sliderThumbLabelTextColor: contrast(@sliderThumbLabelColor);
@sliderThumbLabelTextColorActive: @sliderThumbLabelTextColor;
@sliderThumbLabelTextColorOnComponentHover: NULL;
@sliderThumbLabelTextColorHover: NULL;
@sliderThumbLabelTextColorDisabled: contrast(@sliderThumbLabelColorDisabled);

.bl-slider {
  &:hover {
    .bl-slider-rail {
      color: @sliderRailColorHover;
    }

    .bl-slider-track {
      color: @sliderTrackColorHover;
    }

    .bl-slider--mark {
      color: @sliderMarkColorHover;
    }

    .bl-slider--mark-active {
      background-color: @sliderMarkActiveColorHover;
    }

    .bl-slider-thumb {
      & .bl-slider--value-label * {
        background: @sliderThumbLabelColorOnComponentHover;
        color: @sliderThumbLabelTextColorOnComponentHover;
      }

      color: @sliderThumbColorOnComponentHover;
    }
  }

  &.bl-slider--disabled {
    .bl-slider-rail {
      color: @sliderRailColorDisabled;
    }

    .bl-slider-track {
      color: @sliderTrackColorDisabled;
    }

    .bl-slider--mark {
      color: @sliderMarkColorDisabled;
    }

    .bl-slider--mark-label {
      color: @sliderMarkLabelColorDisabled;
    }

    .bl-slider--mark-active {
      background-color: @sliderMarkActiveColorDisabled;
    }

    .bl-slider-thumb {
      & .bl-slider--value-label {
        & * {
          background: @sliderThumbLabelColorDisabled;
          color: @sliderThumbLabelTextColorDisabled;
        }

        left: auto;
      }

      color: @sliderThumbColorDisabled;
    }
  }

  .bl-slider-rail {
    color: @sliderRailColor;
    opacity: 1;
  }

  .bl-slider-track {
    color: @sliderTrackColor;
    opacity: 1;
  }

  .bl-slider--mark {
    color: @sliderMarkColor;
    opacity: 1;
  }

  .bl-slider--mark-active {
    background-color: @sliderMarkActiveColor;
  }

  .bl-slider--mark-label {
    color: @sliderMarkLabelColor;
  }

  .bl-slider-thumb {
    &:hover {
      .bl-slider--value-label * {
        background: @sliderThumbLabelColorHover;
        color: @sliderThumbLabelTextColorHover;
      }

      box-shadow: @sliderThumbShadowHover;
      color: @sliderThumbColorHover
    }

    .bl-slider--value-label * {
      background: @sliderThumbLabelColor;
      color: @sliderThumbLabelTextColor;
    }

    &.bl-slider-thumb--focus {
      box-shadow: @sliderThumbShadowHover;
    }

    &.bl-slider--active {
      & .bl-slider--value-label * {
        background: @sliderThumbLabelColorActive;
        color: @sliderThumbLabelTextColorActive;
      }

      box-shadow: @sliderThumbShadowActive;
      color: @sliderThumbColorActive;
    }

    color: @sliderThumbColor;
  }
}

/*****    component: slider    *****/
/***********************************/
/***********************************/


/************************************/
/************************************/
/*****    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: text    *****/
@textColor: @appTextColor;
@textFontSize: NULL;
@textFontWeight: NULL;

.bl-text {
  color: @textColor;
  font-size: @textFontSize;
  font-weight: @textFontWeight;
}


/*****    component: text    *****/
/*********************************/
/*********************************/


/***********************************/
/***********************************/
/*****    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: video    *****/
@videoBorder: @appComponentBorderRadius;
@videoBorderRadius: @appComponentBorderRadius;
@videoShadow: @appBlockShadow;

.bl-video {
  border: @videoBorder;
  border-radius: @videoBorderRadius;
  box-shadow: @videoShadow;
}

/*****    component: video    *****/
/**********************************/
/**********************************/


/***********************************/
/***********************************/
/*****    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: view-data-grid    *****/
// Styles in data-grid-visualization

/*****    component: view-data-grid    *****/
/*******************************************/
/*******************************************/