:root {
  --panel-color: #323336;
  --panel-border-color: #424348;
  --primary-color: #26b9fd;
  --secondary-color: #fd6a26;
  --background-color: #27282a;
  --primary-font-color: #f6f6f6;
  --dark-primary: #133d57;
  --dark-secondary: #4b1f0b;
  --secondary-font-color: #c2cacc;
  --red-alert-bright: #f24949;
  --red-alert-dark: #802626;
  --yellow-alert-bright: #efc847;
  --yellow-alert-dark: #856f28;
  --green-bright: #62ff51;
  --green-dark: #386633;

  --primary-shade-1: #1a81b1;
  --primary-shade-2: #0f4a65;
  --primary-tint-1: #67cefd;
  --primary-tint-2: #a8e3fe;
  
  --menu-width: 260px;
  --panel-border-radius: 6px;
  --menu-border-radius: var(--panel-border-radius);
  --page-top-margin: 14px;
  --page-right-margin: 16px;

  color: var(--primary-font-color);
}

html {
  background-color: var(--panel-color);
  font-family: var(--sl-font-sans);
}

body {
  margin: 0px;
  min-height: 100vh;
}

#page-content-wrapper {
  background-color: var(--panel-color);
  margin-left: var(--menu-width);
  margin-right: var(--page-right-margin);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#page-title {
  background-color: var(--background-color);
  border-radius: var(--panel-border-radius);
  padding: 16px;
  border-bottom: 3px solid var(--panel-color);
  font-size: 20px;
  font-weight: 500;
  margin-top: var(--page-top-margin);
}

#page-content {
  background-color: var(--background-color);
  /* border-radius: var(--panel-border-radius); */
  border-top-left-radius: var(--panel-border-radius);
  border-top-right-radius: var(--panel-border-radius);
  padding: 16px;
  flex: 1;
  /* margin-bottom: 16px; */
}