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

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


/*******************************************************/
/*******************************************************/
/*****    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: button    *****/
@buttonThemeColor: @themePrimary;
@buttonDisabledColor: @disabledColor;
@buttonBorderRadius: @appComponentBorderRadius;
@buttonBorderWidth: @appComponentBorderWidth;
@buttonBorderType: solid;

@buttonContainedBackground: @buttonThemeColor;
@buttonContainedColor: contrast(@buttonContainedBackground);
@buttonContainedBorderRadius: @buttonBorderRadius;
@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;
@buttonOutlinedBorderRadius: @buttonBorderRadius;
@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%);
@buttonTextBorderRadius: @buttonBorderRadius;
@buttonTextDisabledColor: @buttonDisabledColor;

.bl-button {

  &.bl-button--contained {
    border-radius: @buttonContainedBorderRadius;

    &: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 {
    border-radius: @buttonOutlinedBorderRadius;

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

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


  &.bl-button--text {
    border-radius: @buttonTextBorderRadius;

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

      &:hover {
        background: @buttonTextColorHover;
      }
    }

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

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


/************************************************/
/************************************************/
/*****    component: chart-visualization    *****/
@chartVisualizationBorderRadius: @appComponentBorderRadius;
@chartVisualizationBoxShadow: @appComponentShadow;
@chartVisualizationBackgroundColor: @appBackgroundColor;
@chartVisualizationBorder: @panelBorder;
@chartVisualizationShadow: @panelShadow;

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

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

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


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

.bl-chart {
  position:relative;

  background-color:@chartBackgroundColor;
  border-radius: @chartBorderRadius;
  box-shadow: @chartBoxShadow;
}

/*****    component: chart    *****/
/**********************************/
/**********************************/


/****************************************************/
/****************************************************/
/*****    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: @panelBorder;
@dataGridShadow: @panelShadow;

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

//toolbar
@dataGridToolbarBackgroundColor: @dataGridBackgroundSecondary;
@dataGridToolbarTextColor: @dataGridTextColor;
@dataGridToolbarTextColorHover: @dataGridTextColorHover;
@dataGridToolbarTextColorActive: @dataGridTextColorActive;
@dataGridToolbarTextColorDisabled: @dataGridDisabledColor;

//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;
@dataGridContainerBodyGroupBorder: @dataGridContainerBodyBorder;
@dataGridContainerBodyGroupLvl1TitleBackgroundColor: if(@isLightTheme, darken(@dataGridBackgroundPrimary, 2%), lighten(@dataGridBackgroundPrimary, 9%));
@dataGridContainerBodyGroupLvl1BackgroundColor: lighten(@dataGridContainerBodyGroupLvl1TitleBackgroundColor, 2%);
@dataGridContainerBodyGroupLvl1PagingBackgroundColor: @dataGridContainerBodyGroupLvl1TitleBackgroundColor;
@dataGridContainerBodyGroupLvl2TitleBackgroundColor: if(@isLightTheme, darken(@dataGridBackgroundPrimary, 7%), lighten(@dataGridBackgroundPrimary, 6%));
@dataGridContainerBodyGroupLvl2BackgroundColor: lighten(@dataGridContainerBodyGroupLvl2TitleBackgroundColor, 2%);
@dataGridContainerBodyGroupLvl2PagingBackgroundColor: @dataGridContainerBodyGroupLvl2TitleBackgroundColor;
@dataGridContainerBodyGroupLvl3TitleBackgroundColor: if(@isLightTheme, darken(@dataGridBackgroundPrimary, 11%), lighten(@dataGridBackgroundPrimary, 2%));
@dataGridContainerBodyGroupLvl3BackgroundColor: lighten(@dataGridContainerBodyGroupLvl3TitleBackgroundColor, 2%);
@dataGridContainerBodyGroupLvl3PagingBackgroundColor: @dataGridContainerBodyGroupLvl3TitleBackgroundColor;
@dataGridContainerBodyGroupTitleBottomBorder: 1px solid @dataGridBorderColor;
@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;

//modal
@dataGridModalHeaderBackgroundColor: @dataGridBackgroundPrimary;
@dataGridModalHeaderTextColor: @dataGridTextColorSecondary;
@dataGridModalHeaderButtonColor: @dataGridTextColorSecondary;
@dataGridModalHeaderBorderBottomColor: @dataGridBorderColor;

@dataGridModalBodyTitleColor: @dataGridTextColorSecondary;
@dataGridModalBodyBackgroundColor: @dataGridBackgroundPrimary;
@dataGridModalBodyMultiControlAddColor: @dataGridSuccessColor;
@dataGridModalBodyMultiControlRemoveColor: @dataGridTextColorSecondary;

@dataGridModalFooterBackgroundColor: @dataGridBackgroundSecondary;
@dataGridModalFooterBorderTopColor: @dataGridBorderColor;
@dataGridModalFooterButtonBorderColor: #999;
@dataGridModalFooterButtonTextColor: @dataGridTextColorSecondary;
@dataGridModalFooterButtonBackgroundColor: @dataGridBackgroundPrimary;
@dataGridModalFooterButtonBackgroundColorAlt: @themePrimary;
@dataGridModalFooterButtonTextColorAlt: @dataGridBackgroundPrimary;

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

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

    .bl-visualization-toolbar {
      background-color: @dataGridToolbarBackgroundColor;

      .bl-visualization-toolbar__controls {
        color: @dataGridToolbarTextColor;

        div {
          &:not(.disabled) button {
            color: @dataGridToolbarTextColor;

            &:hover {
              color: @dataGridToolbarTextColorHover;
            }
          }

          &.active {
            button {
              color: @dataGridToolbarTextColorActive;
            }
          }

          &.disabled {
            button {
              color: @dataGridToolbarTextColorDisabled
            }
          }
        }
      }
    }

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

      .bl-data-grid-header {
        background-color: @dataGridContainerHeaderBackgroundColor;
        color: @dataGridContainerHeaderTextColor;
        border-bottom: @dataGridContainerBodyBorder;

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

              .bl-data-grid-header__sorting-asc-icon {
                border-top: none;
              }

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

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

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

          .bl-data-grid-header__resizer {
            &:hover {
              .bl-data-grid-header__resizer-strip {
                background-color: @dataGridContainerHeaderResizerStripColor;
              }
            }
          }
        }
      }

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

          .yes-no-value {
            .label-success {
              background-color: @dataGridSuccessColor;
            }

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

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

        .bl-data-grid-row {
          background-color: @dataGridContainerBodyRowBackgroundColor;

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

          .bl-data-grid-row__cell {
            color: @dataGridContainerBodyRowTextColor;
          }
        }
      }

      .bl-data-grid-header .bl-data-grid-header__cell {
        border-right: @dataGridContainerHeaderBorder;
      }

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

      .bl-data-grid-group {
        &.bl-data-grid-group-level-3 {
          background-color: @dataGridContainerBodyGroupLvl3BackgroundColor;
          border-color: darken(@dataGridContainerBodyGroupLvl3TitleBackgroundColor, 9%);

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

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

        &.bl-data-grid-group-level-2 {
          background-color: @dataGridContainerBodyGroupLvl2BackgroundColor;
          border-color: darken(@dataGridContainerBodyGroupLvl2TitleBackgroundColor, 9%);

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

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

        &.bl-data-grid-group-level-1 {
          background-color: @dataGridContainerBodyGroupLvl1BackgroundColor;
          border-color: darken(@dataGridContainerBodyGroupLvl1TitleBackgroundColor, 9%);

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

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

        .bl-data-grid-group__title {
          border-bottom: @dataGridContainerBodyGroupTitleBottomBorder;
          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-data-grid-pagination-page-controls {
        > i {
          &.not-allowed {
            color: @dataGridPagingTextColorDisabled;
          }
        }

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

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

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

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

          &.active {
            color: @dataGridPagingPageSizeTextColorActive;
          }
        }
      }
    }

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

      .bl-data-grid-page-control {
        button.Mui-disabled {
          .bl-data-grid-page-control-label {
            color: @dataGridGroupPagingButtonColorDisabled
          }
        }

        .bl-data-grid-page-control-label {
          color: @dataGridGroupPagingButtonColorActive;
        }
      }

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

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

          &.active {
            color: @dataGridGroupPagingButtonColorActive;
          }
        }
      }
    }
  }
}

.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;
      }
    }
  }
}

.bl-data-grid-modal.bl-ui-sdk-modal {
  .bl-modal-content {
    .Mui-error, .bl-text-danger {
      color: @dataGridErrorColor;
    }

    .bl-modal-header {
      background-color: @dataGridModalHeaderBackgroundColor;
      border-bottom-color: @dataGridModalHeaderBorderBottomColor;

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

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

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

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

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

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

    .bl-modal-footer {
      background-color: @dataGridModalFooterBackgroundColor;
      border-top-color: @dataGridModalFooterBorderTopColor;

      .bl-btn {
        background-color: @dataGridModalFooterButtonBackgroundColor;
        border: 1px solid @dataGridModalFooterButtonBorderColor;

        &.MuiButton-contained {
          background-color: @dataGridModalFooterButtonBackgroundColor;
          border: 1px solid @dataGridModalFooterButtonBorderColor;
          color: @dataGridModalFooterButtonTextColor;

          &:hover {
            background-color: darken(@dataGridModalFooterButtonBackgroundColor, 5%);
            border-color: darken(@dataGridModalFooterButtonBorderColor, 10%);
          }

          &.bl-btn-primary {
            background-color: @dataGridModalFooterButtonBackgroundColorAlt;
            color: @dataGridModalFooterButtonTextColorAlt;
            border-color: darken(@dataGridModalFooterButtonBackgroundColorAlt, 5%);

            &:hover {
              background-color: darken(@dataGridModalFooterButtonBackgroundColorAlt, 5%);
              border-color: darken(@dataGridModalFooterButtonBackgroundColorAlt, 10%);
            }
          }
        }
      }
    }
  }
}

/*****    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;
        }
      }
    }
  }

  .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;
  }
}

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


/********************************************/
/********************************************/
/*****    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;

@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 {
    color: @datetimePickerDialogColor;
    background: @datetimePickerDialogBackground;
  }

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

  .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: divider    *****/
@dividerColor:@themePrimary;
@dividerWidth:@appComponentBorderWidth;

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


/*********************************/
/*********************************/
/*****    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: 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    *****/
@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: image    *****/
@imageBorder: NULL;
@imageBorderRadius: @appComponentBorderRadius;
@imageBoxShadow: NULL;

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

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


/**********************************/
/**********************************/
/*****    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: 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-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: link    *****/
@linkColor: @appTextColor;
@linkFontSize: NULL;
@linkFontWeight: NULL;

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


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

}

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


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

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


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


/*****************************************/
/*****************************************/
/*****    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: radio-buttons-group    *****/
.bl-radio-button-group {

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


/***********************************/
/***********************************/
/*****    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;

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

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

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


/***********************************/
/***********************************/
/*****    component: slider    *****/
@sliderThemeColor: @themePrimary;
@sliderDisabledColor: @disabledColor;

@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);

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

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


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


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

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

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


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

@viewDataBackgroundPrimary: @appBackgroundColor;
@viewDataBackgroundSecondary: if(@isLightTheme, darken(@appBackgroundColor, 4%), lighten(@appBackgroundColor, 3%));
@viewDataBackgroundSecondaryAlt: hsl(hue(@themePrimary), saturation(@themePrimary), if(@isLightTheme, lightness(@appBackgroundColor) - 4%, lightness(@appBackgroundColor) + 4%));

@viewDataTextColor: hsl(hue(@themePrimary), 0%, if(@isLightTheme, 63%, 90%));
@viewDataTextColorSecondary: hsl(0, 0%, if(@isLightTheme, 20%, 80%));
@viewDataTextColorActive: @themePrimary;
@viewDataTextColorHover: darken(@viewDataTextColorActive, 15%);

@viewDataDisabledColor: mix(@appBackgroundColor, @viewDataTextColor);

@viewDataBorderRadius: @appComponentBorderRadius;
@viewDataBorder: @panelBorder;
@viewDataShadow: @panelShadow;

@viewDataErrorColor: #f44336;
@viewDataSuccessColor: #5BC069;
@viewDataWarningColor: #f0ad4e;

//toolbar
@viewDataToolbarBackgroundColor: @viewDataBackgroundSecondary;
@viewDataToolbarTextColor: @viewDataTextColor;
@viewDataToolbarTextColorHover: @viewDataTextColorHover;
@viewDataToolbarTextColorActive: @viewDataTextColorActive;
@viewDataToolbarTextColorDisabled: @viewDataDisabledColor;

//container
@viewDataContainerBackgroundColor: @viewDataBackgroundPrimary;
@viewDataContainerBorderTop: @viewDataBorderColor;
@viewDataContainerHeaderBackgroundColor: @viewDataBackgroundSecondaryAlt;
@viewDataContainerHeaderBorderColor: if(@isLightTheme, darken(@viewDataBackgroundSecondaryAlt, 9%), lighten(@viewDataBackgroundSecondaryAlt, 9%));
@viewDataContainerHeaderBorder: 1px solid @viewDataContainerHeaderBorderColor;
@viewDataContainerHeaderTextColor: @viewDataTextColorSecondary;
@viewDataContainerHeaderSortIconColor: @viewDataTextColor;
@viewDataContainerHeaderSortIconColorActive: @viewDataTextColorActive;
@viewDataContainerHeaderResizerStripColor: @viewDataTextColorActive;
@viewDataContainerBodyRowBackgroundColor: @viewDataBackgroundPrimary;
@viewDataContainerBodyRowBackgroundColorSecondary: @viewDataBackgroundSecondary;
@viewDataContainerBodyRowTextColor: @viewDataTextColorSecondary;
@viewDataContainerBodyRowCellTextColorAlt: #fff;
@viewDataContainerBodyBorderColor: @viewDataBorderColor;
@viewDataContainerBodyBorder: 1px solid @viewDataContainerBodyBorderColor;
@viewDataContainerBodyGroupBorder: @viewDataContainerBodyBorder;
@viewDataContainerBodyGroupLvl1TitleBackgroundColor: if(@isLightTheme, darken(@viewDataBackgroundPrimary, 2%), lighten(@viewDataBackgroundPrimary, 9%));
@viewDataContainerBodyGroupLvl1BackgroundColor: lighten(@viewDataContainerBodyGroupLvl1TitleBackgroundColor, 2%);
@viewDataContainerBodyGroupLvl1PagingBackgroundColor: @viewDataContainerBodyGroupLvl1TitleBackgroundColor;
@viewDataContainerBodyGroupLvl2TitleBackgroundColor: if(@isLightTheme, darken(@viewDataBackgroundPrimary, 7%), lighten(@viewDataBackgroundPrimary, 6%));
@viewDataContainerBodyGroupLvl2BackgroundColor: lighten(@viewDataContainerBodyGroupLvl2TitleBackgroundColor, 2%);
@viewDataContainerBodyGroupLvl2PagingBackgroundColor: @viewDataContainerBodyGroupLvl2TitleBackgroundColor;
@viewDataContainerBodyGroupLvl3TitleBackgroundColor: if(@isLightTheme, darken(@viewDataBackgroundPrimary, 11%), lighten(@viewDataBackgroundPrimary, 2%));
@viewDataContainerBodyGroupLvl3BackgroundColor: lighten(@viewDataContainerBodyGroupLvl3TitleBackgroundColor, 2%);
@viewDataContainerBodyGroupLvl3PagingBackgroundColor: @viewDataContainerBodyGroupLvl3TitleBackgroundColor;
@viewDataContainerBodyGroupTitleBottomBorder: 1px solid @viewDataBorderColor;
@viewDataContainerBodyGroupTitleColor: @viewDataTextColorSecondary;
@viewDataContainerBodyFreezedBorderRight: 1px solid @viewDataBorderColor;
@viewDataContainerBodyGroupedBackgroundColor: @viewDataBackgroundPrimary;

//pagination
@viewDataPagingTextColor: @viewDataTextColor;
@viewDataPagingBackgroundColor: @viewDataBackgroundSecondary;
@viewDataPagingBorderTopColor: @viewDataBorderColor;
@viewDataPagingTextColorDisabled: @viewDataDisabledColor;
@viewDataPagingCurrentPageBackgroundColor: @viewDataBackgroundPrimary;
@viewDataPagingCurrentPageBorderColor: @viewDataBorderColor;
@viewDataPagingCurrentPageBorderActive: @inputOutlinedBorderWidth @inputOutlinedBorderType @inputThemeColor;
@viewDataPagingCurrentPageBorderRadiusActive: @inputOutlinedBorderRadius;
@viewDataPagingCurrentPageBoxShadowActive: none;
@viewDataPagingCurrentPageBoxShadowError: none;
@viewDataPagingPageSizeTextColor: @viewDataTextColor;
@viewDataPagingPageSizeTextColorActive: @viewDataTextColorActive;

//group pagination
@viewDataGroupPagingBackgroundColor: @viewDataBackgroundSecondary;
@viewDataGroupPagingTextColor: @viewDataTextColor;
@viewDataGroupPagingButtonColor: @viewDataTextColor;
@viewDataGroupPagingButtonColorActive: @viewDataTextColorActive;
@viewDataGroupPagingButtonColorDisabled: @viewDataDisabledColor;

//density
@viewDataDensityMenuBackgroundColor: @viewDataBackgroundPrimary;
@viewDataDensityMenuTextColor: @viewDataTextColorSecondary;
@viewDataDensityMenuTextColorActive: @viewDataBackgroundPrimary;
@viewDataDensityMenuBackgroundColorActive: @viewDataTextColorHover;

//modal
@viewDataModalHeaderBackgroundColor: @viewDataBackgroundPrimary;
@viewDataModalHeaderTextColor: @viewDataTextColorSecondary;
@viewDataModalHeaderButtonColor: @viewDataTextColorSecondary;
@viewDataModalHeaderBorderBottomColor: @viewDataBorderColor;

@viewDataModalBodyTitleColor: @viewDataTextColorSecondary;
@viewDataModalBodyBackgroundColor: @viewDataBackgroundPrimary;
@viewDataModalBodyMultiControlAddColor: @viewDataSuccessColor;
@viewDataModalBodyMultiControlRemoveColor: @viewDataTextColorSecondary;

@viewDataModalFooterBackgroundColor: @viewDataBackgroundSecondary;
@viewDataModalFooterBorderTopColor: @viewDataBorderColor;
@viewDataModalFooterButtonBorderColor: #999;
@viewDataModalFooterButtonTextColor: @viewDataTextColorSecondary;
@viewDataModalFooterButtonBackgroundColor: @viewDataBackgroundPrimary;
@viewDataModalFooterButtonBackgroundColorAlt: @themePrimary;
@viewDataModalFooterButtonTextColorAlt: @viewDataBackgroundPrimary;

.bl-view-data-grid {
  border: @viewDataBorder;
  box-shadow: @viewDataShadow;
  border-radius: @viewDataBorderRadius;

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

    .bl-visualization-toolbar {
      background-color: @viewDataToolbarBackgroundColor;

      .bl-visualization-toolbar__controls {
        color: @viewDataToolbarTextColor;

        div {
          &:not(.disabled) button {
            color: @viewDataToolbarTextColor;

            &:hover {
              color: @viewDataToolbarTextColorHover;
            }
          }

          &.active {
            button {
              color: @viewDataToolbarTextColorActive;
            }
          }

          &.disabled {
            button {
              color: @viewDataToolbarTextColorDisabled
            }
          }
        }
      }
    }

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

      .bl-data-grid-header {
        background-color: @viewDataContainerHeaderBackgroundColor;
        color: @viewDataContainerHeaderTextColor;
        border-bottom: @viewDataContainerBodyBorder;

        .bl-data-grid-header__cell {
          .bl-data-grid-header__cell-title {
            .bl-data-grid-header__sorting {
              .bl-data-grid-header__sorting-asc-icon,
              .bl-data-grid-header__sorting-desc-icon {
                border: 5px solid @viewDataContainerHeaderSortIconColor;
                border-left-color: transparent;
                border-right-color: transparent;
              }

              .bl-data-grid-header__sorting-asc-icon {
                border-top: none;
              }

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

              &.asc {
                .bl-data-grid-header__sorting-asc-icon {
                  border-bottom-color: @viewDataContainerHeaderSortIconColorActive;
                }
              }

              &.desc {
                .bl-data-grid-header__sorting-desc-icon {
                  border-top-color: @viewDataContainerHeaderSortIconColorActive;
                }
              }
            }
          }

          .bl-data-grid-header__resizer {
            &:hover {
              .bl-data-grid-header__resizer-strip {
                background-color: @viewDataContainerHeaderResizerStripColor;
              }
            }
          }
        }
      }

      .bl-data-grid-body {
        .bl-data-grid-row__cell, .bl-data-grid-group__title {
          .label {
            color: @viewDataContainerBodyRowCellTextColorAlt;
          }

          .yes-no-value {
            .label-success {
              background-color: @viewDataSuccessColor;
            }

            .label-warning {
              background-color: @viewDataWarningColor;
            }

            .label-danger {
              background-color: @viewDataErrorColor;
            }
          }
        }

        .bl-data-grid-row {
          background-color: @viewDataContainerBodyRowBackgroundColor;

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

          .bl-data-grid-row__cell {
            color: @viewDataContainerBodyRowTextColor;
          }
        }
      }

      .bl-data-grid-header .bl-data-grid-header__cell {
        border-right: @viewDataContainerHeaderBorder;
      }

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

      .bl-data-grid-group {
        &.bl-data-grid-group-level-3 {
          background-color: @viewDataContainerBodyGroupLvl3BackgroundColor;
          border-color: darken(@viewDataContainerBodyGroupLvl3TitleBackgroundColor, 9%);

          .bl-data-grid-group__title {
            background-color: @viewDataContainerBodyGroupLvl3TitleBackgroundColor;
            border-color: inherit;
          }

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

        &.bl-data-grid-group-level-2 {
          background-color: @viewDataContainerBodyGroupLvl2BackgroundColor;
          border-color: darken(@viewDataContainerBodyGroupLvl2TitleBackgroundColor, 9%);

          .bl-data-grid-group__title {
            background-color: @viewDataContainerBodyGroupLvl2TitleBackgroundColor;
            border-color: inherit;
          }

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

        &.bl-data-grid-group-level-1 {
          background-color: @viewDataContainerBodyGroupLvl1BackgroundColor;
          border-color: darken(@viewDataContainerBodyGroupLvl1TitleBackgroundColor, 9%);

          .bl-data-grid-group__title {
            background-color: @viewDataContainerBodyGroupLvl1TitleBackgroundColor;
            border-color: inherit;
          }

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

        .bl-data-grid-group__title {
          border-bottom: @viewDataContainerBodyGroupTitleBottomBorder;
          color: @viewDataContainerBodyGroupTitleColor
        }
      }

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

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

    .bl-data-grid-pagination {
      color: @viewDataPagingTextColor;
      background-color: @viewDataPagingBackgroundColor;
      border-top: 1px solid @viewDataPagingBorderTopColor;

      .bl-data-grid-pagination-page-controls {
        > i {
          &.not-allowed {
            color: @viewDataPagingTextColorDisabled;
          }
        }

        .bl-data-grid-pagination-page {
          background-color: @viewDataPagingCurrentPageBackgroundColor;
          color: @viewDataTextColor;
          border-color: @viewDataPagingCurrentPageBorderColor;

          &:focus {
            box-shadow: @viewDataPagingCurrentPageBoxShadowActive;
            border: @viewDataPagingCurrentPageBorderActive;
            border-radius: @viewDataPagingCurrentPageBorderRadiusActive;

            &.has-error {
              border-color: @viewDataErrorColor;
              box-shadow: @viewDataPagingCurrentPageBoxShadowError;
            }
          }
        }
      }

      .bl-data-grid-pagination-page-size-controls {
        .bl-data-grid-pagination-page-size {
          color: @viewDataPagingPageSizeTextColor;

          &.active {
            color: @viewDataPagingPageSizeTextColorActive;
          }
        }
      }
    }

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

      .bl-data-grid-page-control {
        button.Mui-disabled {
          .bl-data-grid-page-control-label {
            color: @viewDataGroupPagingButtonColorDisabled
          }
        }

        .bl-data-grid-page-control-label {
          color: @viewDataGroupPagingButtonColorActive;
        }
      }

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

        .bl-data-grid-page-size-btn {
          color: @viewDataGroupPagingButtonColor;

          &.active {
            color: @viewDataGroupPagingButtonColorActive;
          }
        }
      }
    }
  }
}

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

    li {
      color: @viewDataDensityMenuTextColor;

      &:hover,
      &.Mui-selected,
      &.Mui-selected:hover {
        color: @viewDataDensityMenuTextColorActive;
        background-color: @viewDataDensityMenuBackgroundColorActive;
      }
    }
  }
}

.bl-data-grid-modal.bl-ui-sdk-modal {
  .bl-modal-content {
    .Mui-error, .bl-text-danger {
      color: @viewDataErrorColor;
    }

    .bl-modal-header {
      background-color: @viewDataModalHeaderBackgroundColor;
      border-bottom-color: @viewDataModalHeaderBorderBottomColor;

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

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

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

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

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

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

    .bl-modal-footer {
      background-color: @viewDataModalFooterBackgroundColor;
      border-top-color: @viewDataModalFooterBorderTopColor;

      .bl-btn {
        background-color: @viewDataModalFooterButtonBackgroundColor;
        border: 1px solid @viewDataModalFooterButtonBorderColor;

        &.MuiButton-contained {
          background-color: @viewDataModalFooterButtonBackgroundColor;
          border: 1px solid @viewDataModalFooterButtonBorderColor;
          color: @viewDataModalFooterButtonTextColor;

          &:hover {
            background-color: darken(@viewDataModalFooterButtonBackgroundColor, 5%);
            border-color: darken(@viewDataModalFooterButtonBorderColor, 10%);
          }

          &.bl-btn-primary {
            background-color: @viewDataModalFooterButtonBackgroundColorAlt;
            color: @viewDataModalFooterButtonTextColorAlt;
            border-color: darken(@viewDataModalFooterButtonBackgroundColorAlt, 5%);

            &:hover {
              background-color: darken(@viewDataModalFooterButtonBackgroundColorAlt, 5%);
              border-color: darken(@viewDataModalFooterButtonBackgroundColorAlt, 10%);
            }
          }
        }
      }
    }
  }
}

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