:root {
    /* Brand colors */
    --Brand-Color-1: #E9477A;
    --Brand-Color-1-enough-contrast: #E41B5B;
    --Brand-Hover-effect: #C2003E;
    --Brand-Color-2-enough-contrast: #127EA5;

    /* Text colors */
    --Text-Heading: #0D0D0D;
    --Text-Core: #333333;
    --Text-Link: #E41B5B;
    --Text-Deemphasized: #757575;
    --Text-Contrast-Neutral5: #6E6E6E;
    --Text-Contrast-NeutralBg: #696969;

    /* Neutral & background */
    --Neutral-White: #FFFFFF;
    --Neutral-Bg: #F5F5F5;
    --Neutral-5: #F2F2F2;
    --Grey: #999999;

    /* Lines & borders */
    --Line-Input-border: #949494;
    --Line-Divider: #E0E0E0;
    --Line-Input-border-enough-contrast-for-bg: #858585;

    /* Spacing */
    --bl---separation: 32px;
    --bl---belong: 24px;

    /* Shadows */
    --Shadow-Subtle: 0 4px 4px 0 rgba(0, 0, 0, 0.05);
    --Shadow-Tooltip: 0 4px 16px 0 rgba(0, 0, 0, 0.25);

    /* Border radius */
    --RoundedCornersUI: 8px;
  }
  


  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }


  * {
    margin: 0;
    padding: 0;
  }

  
  /* In eerste instantie is mobiel niet nodig */
  
body {
    -webkit-font-smoothing: antialiased;
    font-family: Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5em;
    color: var(--Text-Core);
    display: grid;
    min-height: 100vh;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto 1fr auto;
  }
  
  
header {
    grid-column: 1 / 13;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 16px;
    justify-content: space-around;
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--Neutral-White);
    box-shadow: var(--Shadow-Subtle);
  }
  
  
  header h1 {
    grid-column: 1 / 13;
    padding: 8px 32px;
    background-color: var(--Text-Heading);
    color: var(--Neutral-White);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5em;
  }
  
  
  nav {
    grid-column: 1 / 13;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    justify-content: space-around;
    height: 2.5em;
  }

  nav a {
    color: var(--Text-Core);
    text-decoration: none;
  }

  nav a:hover {
    color: var(--Text-Link);
    text-decoration: underline;
  }

  
  #logo {
    grid-column: 1 / 2;
    height: 2em;
    margin: 0 32px;
  }

  
  #navlinks {
    height: 2em;
    grid-column: 2 / 10;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 32px;
  }


  #profilelinks {
    grid-column: 11 / 13;
    margin-right: 32px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 32px;
  }
 

  
main {
    grid-column: 1 / 13;
    background-repeat: no-repeat;
    background-color: var(--Neutral-Bg);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    justify-content: center;
    background-position: 1rem 1rem;
  }
  

  .container {
    grid-column: 2 / 12;
    background-color: var(--Neutral-White);
    margin: 16px;
    padding: 32px;
    border-radius: var(--RoundedCornersUI);
    box-shadow: var(--Shadow-Subtle);
  }

  .container form {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 480px;
  }
  
    .container h2 {
    color: var(--Brand-Color-1-enough-contrast);
    font-weight: 700;
    font-size: 20px;
  }

 /* overzichten algemeen */ 

  .overzicht-regel {
      border-top: 1px solid var(--Line-Divider);
      padding: 0.5em 0;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr  1fr 1fr 1fr 1fr  1fr 1fr 1fr 1fr;
      }


    .kolom-start-1 {
      grid-column-start: 1;
    }

        .kolom-start-2 {
      grid-column-start: 2;
    }

        .kolom-start-3 {
      grid-column-start: 3;
    }

        .kolom-start-4 {
      grid-column-start: 4;
    }

        .kolom-start-5 {
      grid-column-start: 5;
    }

     .kolom-start-6 {
      grid-column-start: 6;
    }

        .kolom-start-7 {
      grid-column-start: 7;
    }

        .kolom-start-8 {
      grid-column-start: 8;
    }

        .kolom-start-9 {
      grid-column-start: 9;
    }

        .kolom-start-10 {
      grid-column-start: 10;
    }

        .kolom-start-11 {
      grid-column-start: 11;
    }

        .kolom-start-12 {
      grid-column-start: 12;
    }

      .kolom-span-1 {
      grid-column: span 1;
    }

          .kolom-span-2 {
      grid-column: span 2;
    }

          .kolom-span-3 {
      grid-column: span 3;
    }

          .kolom-span-4 {
      grid-column: span 4;
    }

          .kolom-span-5 {
      grid-column: span 5;
    }

          .kolom-span-6 {
      grid-column: span 6 ;
    }

          .kolom-span-7 {
      grid-column: span 7;
    }

          .kolom-span-8 {
      grid-column: span 8;
    }

          .kolom-span-9 {
      grid-column: span 9;
    }

          .kolom-span-10 {
      grid-column: span 10;
    }

          .kolom-span-11 {
      grid-column: span 11;
    }

          .kolom-span-11 {
      grid-column: span 11;
    }

      .kolom-span-12 {
      grid-column: span 12;
    }

.paginanummers  {
  font-variant: small-caps;
  display: inline-block;
  margin: 0 8px;
}


/* Autocomplete dropdown (jQuery UI override) */

.ui-autocomplete {
  background: var(--Neutral-White);
  border: 1px solid var(--Line-Divider);
  border-radius: var(--RoundedCornersUI);
  box-shadow: var(--Shadow-Tooltip);
  padding: 8px 0;
  list-style: none;
  z-index: 1000;
}

.ui-menu-item-wrapper {
  display: block;
  padding: 8px 16px;
  font-size: 16px;
  line-height: 24px;
  color: var(--Text-Core);
  cursor: pointer;
  border-radius: 4px;
}

.ui-menu-item-wrapper.ui-state-active,
.ui-menu-item-wrapper:hover {
  background: var(--Neutral-5);
  color: var(--Brand-Color-1-enough-contrast);
  border: none;
  margin: 0;
}


/* Forms */

fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

.form-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-top: 1px solid var(--Line-Divider);
  padding-top: 16px;
}

.form-section legend {
  font-weight: 700;
  font-size: 16px;
  color: var(--Text-Core);
  margin-bottom: 8px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.input-label {
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: var(--Text-Core);
}

.input {
  background: var(--Neutral-White);
  border: 1px solid var(--Line-Input-border);
  border-radius: var(--RoundedCornersUI);
  padding: 12px 16px;
  font-size: 16px;
  line-height: 24px;
  color: var(--Text-Core);
  width: 100%;
}

.input:focus {
  outline: 2px solid var(--Brand-Color-1-enough-contrast);
  outline-offset: 2px;
}

.select {
  background: var(--Neutral-White);
  border: 1px solid var(--Line-Input-border);
  border-radius: var(--RoundedCornersUI);
  height: 48px;
  padding: 0 16px;
  width: 100%;
  font-size: 16px;
  line-height: 24px;
  color: var(--Text-Core);
  cursor: pointer;
}

.select:focus {
  outline: 2px solid var(--Brand-Color-1-enough-contrast);
  outline-offset: 2px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 32px;
  border-radius: var(--RoundedCornersUI);
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s;
}

.btn-primary {
  background-color: var(--Text-Core);
  color: var(--Neutral-White);
}

.btn-primary:hover {
  background-color: var(--Brand-Hover-effect);
}
button:focus, .btn:focus, input[type="submit"]:focus, input[type="button"]:focus {
  outline: 4px solid var(--Brand-Color-1-enough-contrast);
  outline-offset: 2px;
  background-color: var(--Brand-Hover-effect);
  color: var(--Neutral-White);
  transform: scale(1.02);
}




   
footer {
    grid-column: 1 / 13;
    display: grid;
    flex-direction: column;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    background-color: var(--Text-Core);
    color: var(--Neutral-White);
    text-align: center;
    padding: 16px;
  }
  
  
  .copyright {
    grid-column: 1 / 6;
    text-align: left;
    display: block;
    padding: 8px 16px;
  }
  
  
  footer a {
    color: var(--Neutral-White);
    display: block;
    padding: 8px 16px;
    text-decoration: none;
    cursor: pointer;
  }

  .footerlinks {
    grid-column: 6 / 12;
    text-align: left;
    display: flex;
  }
  
  
  footer a:hover {
    color: var(--Neutral-White);
    padding: 8px 16px;
    text-decoration: underline;
    cursor: pointer;
  }

  
 /* mobiel  */

 @media only screen and (max-width: 1200px) {

body {
    -webkit-font-smoothing: antialiased;
    font-size: 14px;
    line-height: 1em;
    display: grid;
    min-height: 100vh;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto 1fr auto;
  }
  
  
header {
    grid-column: 1 / 5;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 12px;
  }
  
  
  header h1 {
    grid-column: 1 / 5;
    padding: 0.5rem 1rem;
    font-size: 14px;
    line-height: 1em;
  }
  
  
  nav {
    grid-column: 1 / 5;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    height: 2em;
  }

    #navlinks {
    height: 2em;
    grid-column: 2 / 4;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 32px;
  }


  #profilelinks {
    grid-column: 4 / 5;
    margin-right: 32px;
    gap: 32px;
  }
 

  
main {
    grid-column: 1 / 5;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    justify-content: center;
    background-position: 1rem 1rem;
  }
  

  .container {
    grid-column: 1 / 5;
    padding: 16px;
    margin: 0;
    border-radius: var(--RoundedCornersUI);
    box-shadow: var(--Shadow-Subtle);
  }

  .container form {
    max-width: 100%;
  }
  
    .container h2 {
    font-weight: 700;
    font-size: 20px;
  }

 /* overzichten algemeen */ 

  .overzicht-regel {
      border-top: 1px solid var(--Line-Divider);
      padding: 0.5em 0;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      }


    .kolom-start-1 {
      grid-column-start: 1;
    }

        .kolom-start-2 {
      grid-column-start: 2;
    }

        .kolom-start-3 {
      grid-column-start: 3;
    }

        .kolom-start-4 {
      grid-column-start: 4;
    }

        .kolom-start-5 {
      grid-column-start: 5;
    }

      .kolom-span-1 {
      grid-column: span 1;
    }

          .kolom-span-2 {
      grid-column: span 2;
    }

          .kolom-span-3 {
      grid-column: span 3;
    }

          .kolom-span-4 {
      grid-column: span 4;
    }

          .kolom-span-5 {
      grid-column: span 5;
    }



footer {
    grid-column: 1 / 5;
    display: grid;
    flex-direction: column;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    padding: 16px;
  }
  
  
  .copyright {
    grid-column: 1 / 2;
    text-align: left;
    display: block;
    padding: 8px 16px;
  }
  
    .footerlinks {
    grid-column: 3 / 5;
  }
  
  
 }




/* Search form styling */
#searchform {
  grid-column: 10 / 11;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-right: 16px;
}

#searchform form {
  display: flex;
  gap: 8px;
  align-items: center;
}

#searchform input {
  width: 120px;
  background: var(--Neutral-White);
  border: 1px solid var(--Line-Input-border);
  border-radius: var(--RoundedCornersUI);
  padding: 4px 8px;
  font-size: 14px;
  line-height: 20px;
  color: var(--Text-Core);
  height: 24px;
}

#searchform input:focus {
  outline: 2px solid var(--Brand-Color-1-enough-contrast);
  outline-offset: 2px;
}

#searchform button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border-radius: var(--RoundedCornersUI);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s;
  background-color: var(--Text-Core);
  color: var(--Neutral-White);
  height: 24px;
}

#searchform button:hover {
  background-color: var(--Brand-Hover-effect);
}

#searchform button:focus {
  outline: 2px solid var(--Brand-Color-1-enough-contrast);
  outline-offset: 2px;
  background-color: var(--Brand-Hover-effect);
  color: var(--Neutral-White);
}

#searchform form {
  display: flex;
  gap: 8px;
  max-width: 600px;
  margin: 0 auto;
}

#searchform input {
  flex: 1;
  background: var(--Neutral-White);
  border: 1px solid var(--Line-Input-border);
  border-radius: var(--RoundedCornersUI);
  padding: 12px 16px;
  font-size: 16px;
  line-height: 24px;
  color: var(--Text-Core);
}

#searchform input:focus {
  outline: 2px solid var(--Brand-Color-1-enough-contrast);
  outline-offset: 2px;
}

#searchform button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: var(--RoundedCornersUI);
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s;
  background-color: var(--Text-Core);
  color: var(--Neutral-White);
}

#searchform button:hover {
  background-color: var(--Brand-Hover-effect);
}

#searchform button:focus {
  outline: 4px solid var(--Brand-Color-1-enough-contrast);
  outline-offset: 2px;
  background-color: var(--Brand-Hover-effect);
  color: var(--Neutral-White);
}