@color-backendless-dark-blue: #161A24;
@headerTextColor: hsl(hue(@themePrimary), 0%, if(@isLightTheme, 63%, 90%));
@headerBackgroundColor: if(@isLightTheme, darken(@appBackgroundColor, 4%), lighten(@appBackgroundColor, 3%));
@headerBorderColor: if(@isLightTheme, darken(@headerBackgroundColor, 8%), lighten(@headerBackgroundColor, 6%));

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

body {
  margin: 0;
  font-family: Roboto, sans-serif;
  background-color:  @color-backendless-dark-blue;
  font-size: 14px;
  color: #333333;
}

* {
  box-sizing: border-box;
  outline: none;
}

.backendless-logo-container {
  width: 200px;
  height: 100%;
}

.backendless-logo {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 200px;
  height: 100%;
}

.bl-visualization-calendar-preview,
.bl-visualization-chart-preview,
.bl-visualization-data-grid-preview,
.bl-visualization-calendar-heatmap-preview {
  display: flex;
  flex-direction: column;
  flex-grow: 1;

  .bl-visualization-container-header {
    background: @headerBackgroundColor;
    color: @headerTextColor;
    border-top: 1px solid @headerBorderColor;
    border-bottom: 1px solid @headerBorderColor;
  }
}

.bl-visualization {
  position: relative;
  flex: 1 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: unset;
  border-radius: 0;
}