/* Variables are defined in ./theme.js */

.root {
  position: relative;

  font-size: var(--fontSize);
  font-family: var(--fontFamily);
  font-weight: var(--fontWeight);
  line-height: var(--lineHeight);

  color: var(--color);
  background: var(--background);

  margin-top: var(--marginTop);
  border-bottom-width: var(--borderWidth);
  border-bottom-style: solid;
}

.nothingPlannedContent {
  padding: var(--paddingWidth) 0 0 0;
}

.nothingPlannedContainer {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction:column;
  justify-content: center;
  align-items: center;
}

.nothingPlanned {
  padding-top: var(--paddingWidth);
}

.small {
  .nothingPlannedContent {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-start;
    padding: var(--paddingWidth) 0;
  }
  .nothingPlannedContainer {
    position: static;
  }
  .nothingPlanned {
    padding-top: 0;
  }
}