/* Install the blueprint css */
@import "~normalize.css/normalize.css";
@import "~@blueprintjs/core/lib/css/blueprint.css";
@import "~@blueprintjs/icons/lib/css/blueprint-icons.css";
@import "~@blueprintjs/select/lib/css/blueprint-select.css";

@import '~@ripedata/components/src/common';

html, body {
  height: 100%;

  @extend %text-body-copy
}

/* App container div */
#app {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: $color-lt-gray;
}

#app-container {
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-flow: column;
}

a:link {
  color: $color-orange;
  font-style: normal;
}

a:active {
  color: $color-orange;
  font-style: normal;
}

a:visited {
  color: $color-orange;
  font-style: normal;
}

a:hover{
  color: $color-turquoise;
  font-style: normal;
}

.workspace {
  margin: 0;
  flex: 1;
  flex-order: 2;
  overflow: auto;

  /* This is a flex container as well */
  display: flex;

  &-container {
    flex: 1;
    flex-order: 0;
    overflow: auto;

    /* Workspace containers are flex box components */
    display: flex;
    flex-flow: column;
    align-items: stretch; /* align items in Cross Axis */
    align-content: stretch; /* Extra space in Cross Axis */
  }
}

.notice-footer {
  width: 100%;
  padding: 5px 20px 5px 20px;
  background-color: $color-orange;
}

.notice-footer-text {
  color: $color-white;
}