@import "./utilities.css/button.css";
@import "./utilities.css/checkbox.css";
@import "./utilities.css/helper.css";
@import "./utilities.css/input.css";
@import "./utilities.css/navbar.css";
@import "./utilities.css/radio.css";
@import "./utilities.css/slider.css";
@import "./utilities.css/toolbar.css";
@import "./utilities.css/modal.css";

@import "./palettes/caverne-kirikou.css";
@import "./palettes/feedback.css";

@import "parameters-column.css";
@import "plots-column.css";
@import "explanation-modal.css";

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: inherit;
}

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;

  padding-top: 3.25rem;

  margin: 0;

  font-family: sans-serif;
}

main {
  display: flex;
  flex-direction: row;

  flex: 1;
  min-height: 0;

  overflow-x: auto;

  background: var(--color-background);
  color: var(--color-text-dark);
}

.confirm { background-color: var(--color-confirm); }
.cancel  { background-color: var(--color-cancel);  }
.danger  { background-color: var(--color-danger);  }

.confirm:hover { background-color: var(--color-confirm-hover); }
.cancel:hover  { background-color: var(--color-cancel-hover);  }
.danger:hover  { background-color: var(--color-danger-hover);  }