:root {
    --color-primary: #3273dc;
    --color-secondary: #23d160;
    --color-background: #f9f9f9;
    --color-text: #363636c8;
    --color-white: #fff;
    --color-light-gray: #ccc;
    --color-flash: #48c78e;
    --color-flash-text: #f9f9f9;
    --color-link-hover: #255aa7;
    --color-shadow: rgba(0 0 0 / 20%);
  }
  
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  
  * {
    margin: 0;
    padding: 0;
  }
  
  input,
  button {
    font: inherit;
  }
  
  body {
    display: grid;
    grid-template: "header header" min-content "sidebar content" auto / 275px auto;
  
    height: 100vh;
  
    font-family: Roboto, sans-serif;
    font-size: 62.5%;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text);
  }
  
  header {
    position: relative;
  
    grid-area: header;
  
    background-color: var(--color-primary);
    border-bottom: 1px solid var(--color-light-gray);
    box-shadow: 0 6px 12px var(--color-shadow);
  }
  
  #sidebar {
    grid-area: sidebar;
    padding: 25px;
    background-color: var(--color-background);
  }
  
  #content {
    grid-area: content;
    width: 80%;
    padding: 25px;
  }
  
  header a {
    display: block;
  
    height: 100%;
    padding: 20px;
  
    color: var(--color-white);
    text-decoration: none;
  }

  span#title {
    font-size: 3rem;
    font-weight: 300;
  }

  h1 {
    font-size: 2rem;
    font-weight: 300;
    color: var(--color-primary);
  }
  
  h2 {
    margin-top: 2rem;
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1;
    color: var(--color-primary);
  }

  h3 {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    font-size: 1rem;
    line-height: 2;
    color: var(--color-primary);
  }

  h4 {
    font-size: 1rem;
    color: var(--color-text);
    font-weight: 900;
  }
  
  ul {
    font-size: 1rem;
    list-style: none;
    margin-bottom: 1rem;
    list-style-position: outside;
    padding-left: 1.5em; 
  }
  
  ul li::before {
    content: '👉';
    margin-right: 10px;
  }
  
  ul a {
    color: var(--color-text);
    text-decoration: none;
  }
  
  li {
    text-indent: -1.5em; /* Bullet optisch compenseren */
    padding-left: 1.5em; /* Begin tekst inspringen vanaf bullet */
  }

  .actions a,
  .actions button {
    font-size: 1.1rem;
    color: var(--color-primary);
  }
  
  button.link {
    cursor: pointer;
  
    padding: 0 !important;
  
    text-decoration: underline;
  
    background: none !important;
    border: none;
  }
  
  ul a:hover {
    text-decoration: underline;
  }
  
  p {
    font-size: 1.2rem;
    padding-bottom: 20px;
  }
  
  label {
    display: block;
    margin-bottom: 0.2rem;
    font-size: 1rem;
  }
  
  input[type="text"],
  input[type="email"] {
    width: 400px;
    margin-bottom: 1rem;
    padding: 0.3rem;
  
    font-size: 1.2rem;
  
    background-color: var(--color-background);
    border: 1px solid var(--color-light-gray);
  }
  
  input[type="text"]:focus,
  input[type="email"]:focus {
    border-color: var(--color-primary);
    outline: none;
  }
  
  button[type="submit"]:not(.link) {
    cursor: pointer;
  
    padding: 0.6rem 1.2rem;
  
    font-size: 1rem;
    color: var(--color-white);
  
    background-color: var(--color-primary);
    border: none;
    border-radius: 0.3em;
  
    transition: background-color 0.3s ease;
  }
  
  button[type="submit"]:hover {
    background-color: var(--color-link-hover);
  }
  
  ul + .actions,
  p + .actions {
    margin-top: 1rem;
  }
  
  .flash {
    width: 100%;
    margin-bottom: 2rem;
    padding: 0.8rem;
  
    font-size: 1.0rem;
    color: var(--color-flash-text);
  
    background-color: var(--color-flash);
    border-radius: 3px;
    box-shadow: 0 2px 4px var(--color-shadow);
  }

  #okta-sign-in {
    width: 100% !important;
    margin: 0px !important;
    border: none !important;
    font-family: Roboto, sans-serif !important;
  }