* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box; }

@media (max-width: 800px) {
  .banner {
    background-position: 0 0;
    height: 20vw; }
    .banner .slogan::before {
      left: unset;
      top: unset;
      right: 5pt;
      bottom: 3pt;
      font-size: 3vw;
      text-align: right; }
    .banner .date {
      display: none; } }

.banner {
  background-image: url(../img/banner2020.svg);
  background-size: cover;
  background-position: 20% 50%;
  position: relative; }
  .banner .date {
    float: none;
    padding: 0;
    margin: 0;
    position: absolute;
    right: 0.5em;
    bottom: 0.5em; }
  .banner .slogan {
    color: #828f93; }
    .banner .slogan::before {
      position: absolute;
      content: "duikt erin!";
      white-space: nowrap;
      font-style: italic;
      font-family: Arial, sans-serif;
      font-size: 20pt;
      left: 62%;
      top: 72%; }

.pagination {
  width: auto;
  max-width: 790px; }

body {
  font-size: initial;
  font-size: smaller; }

.menubar {
  height: initial; }
  .menubar::after {
    content: '';
    display: block;
    clear: both; }

.disclaimer::before {
  display: block;
  content: '';
  clear: both;
  height: 1.5em; }

.profielnaam {
  font-weight: bold; }

.sessionform {
  text-align: right; }
  .sessionform span.logon {
    display: inline-block; }
  .sessionform a.logonformactivator {
    display: none; }
  .sessionform .logonformblokje {
    text-align: left;
    float: left; }
  @media (max-width: 500px) {
    .sessionform a.logonformactivator {
      display: inline-block; }
    .sessionform .logonformblokje {
      display: none; }
      .sessionform:focus-within .logonformactivator {
        display: block;
        overflow: hidden;
        height: 0;
        padding: 0; }
      .sessionform:focus-within .logonformblokje {
        display: inline-block; }
      .sessionform:focus-within .logonformblokje {
        display: block;
        float: none; }
      .sessionform:focus-within span.logon {
        display: table-row; }
        .sessionform:focus-within span.logon label {
          display: table-cell;
          padding: 0.4em 0.2em; } }
@media (max-width: 500px) {
  .sessionform .profielbla {
    display: none; } }

.menuitems {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end; }

a.menuitem, div.search {
  float: none;
  flex-grow: 1; }

div.search {
  align-self: flex-start;
  flex-basis: 10em; }
  div.search a.search, div.search form, div.search input {
    float: none; }
  div.search a.search {
    border-right: none; }
  div.search form {
    display: flex;
    justify-content: flex-end; }
  div.search input {
    width: calc(100% - 45px);
    min-width: 12em;
    max-width: 20em; }

div[style="width: 535px"] {
  width: auto !important; }

.page .pageinner a {
  color: #777; }
  .page .pageinner a:hover, .page .pageinner a:active {
    color: #779190; }

.verzoeker {
  position: relative;
  margin-top: 1em;
  height: 2em; }
  .verzoeker div {
    position: absolute;
    left: 0;
    top: 0; }
  .verzoeker div:first-child {
    left: unset;
    right: 0;
    text-align: right; }
  .verzoeker .verzoekvoorvoegsel {
    display: none; }

.pageinner > .ovd {
  font-size: 85%; }
  .pageinner > .ovd .content p {
    line-height: 1.4em;
    margin: 0; }
  .pageinner > .ovd * {
    box-sizing: border-box; }

.pageinner .sessionbar {
  width: calc(100% + 40px);
  line-height: 2em;
  padding-top: 0.3em; }
.pageinner .sessionbarlink {
  display: inline-block;
  padding: 0.2em 0.5em; }
.pageinner .sessionbarlinkseparator {
  border-left: 1px solid #999; }

.dashboard {
  margin-top: 10px; }
  .dashboard::after {
    display: block;
    content: '';
    clear: both;
    height: 2em; }

.box.border {
  border-radius: 20px;
  border: thin solid #e3e3e3;
  box-shadow: 2px 2px 3px 0px #ccc; }

.box {
  overflow: hidden; }

.foot_container {
  background-color: #f0f0f0;
  background-image: linear-gradient(to right, #e6e6e6, #f0f0f0);
  background-position: cover;
  text-align: right; }

.geen_footer .foot_container {
  display: none; }

h2 {
  font-weight: bold;
  color: #888;
  font-size: 120%;
  padding-top: 0.2em;
  white-space: pre; }

.box {
  position: relative;
  padding: 0.2em 1em 3.2em 1em; }
  .box .foot_container {
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 100%;
    padding: 0 1em;
    height: 1.9em; }
    .box .foot_container .body {
      line-height: 1.9em; }

.rangnummer, .weeknummer, #ovd_top10tien, #ovd_verzoeksummarynr, #ovd_top10top, #ovd_verzoeksummarytxt, .rang, .ovd_tags {
  font: small-caps bold 1em 'Times New Roman';
  text-align: center;
  white-space: no-wrap; }

.ovd_tags {
  padding-top: 0.5em;
  font-size: 80%;
  text-align: left;
  /*&::before {
   content: '';
   display: block;
   clear: both;
   }*/ }

.pageinner a.weeknummer {
  display: block;
  padding: 58px 0 0 0;
  font-size: 12pt;
  color: #660000; }

.dashboard_weeknummer {
  position: relative;
  text-decoration: none;
  margin: 0;
  background: #f0f0f0 url(v_img/ovd_weeknr.svg) no-repeat center 6px;
  text-align: center;
  width: 94px;
  height: 84px; }

.dashboard_totop10, .dashboard_verzoeksummary {
  width: 106px;
  text-align: center; }
  .dashboard_totop10 .content, .dashboard_verzoeksummary .content {
    display: none; }

.dashboard_totop10 h2 {
  padding-top: 0; }

.content {
  padding-top: 0.3em; }

#ovd_top10tien, #ovd_verzoeksummarynr {
  display: block;
  line-height: 1em;
  position: relative;
  z-index: 2;
  font-size: 30pt;
  color: #660000; }

.dashboard_totop10, .dashboard_verzoeksummary {
  width: 130px;
  text-align: center; }
  .dashboard_totop10 .content, .dashboard_verzoeksummary .content {
    display: none; }

#ovd_top10tien, #ovd_verzoeksummarynr {
  font-size: 13pt;
  display: inline-block; }

#ovd_verzoeksummarytxt {
  font-size: 11pt;
  color: #779190; }

#ovd_top10top {
  font-size: 17pt;
  color: #779190; }

.dashboard_stijger {
  width: 120px; }

.dashboard_welkom {
  float: left;
  width: 230px;
  height: 144px;
  position: relative;
  margin-right: 10px; }

.dashboard_mijnverzoeken {
  float: left;
  width: 192px;
  height: 144px;
  position: relative; }

.dashboard_nav {
  float: right;
  width: 300px;
  height: 144px;
  position: relative; }

.dashboard_totop10, .dashboard_weeknummer, .dashboard_verzoeksummary, .dashboard_stijger, .dashboard_resterend {
  position: absolute; }

.dashboard_weeknummer {
  right: 0;
  top: 0; }

.dashboard_totop10, .dashboard_verzoeksummary {
  right: 0;
  bottom: 0;
  height: 50px; }

.dashboard_stijger {
  left: 0;
  top: 0;
  width: calc(100% - 104px);
  height: 84px; }

.dashboard_resterend {
  left: 0;
  bottom: 0;
  height: 50px;
  width: calc(100% - 140px); }

.rang {
  display: block;
  background-color: #660000;
  border-radius: 40px;
  width: 45px;
  height: 45px;
  line-height: 45px;
  position: absolute;
  right: 20px;
  bottom: 10px;
  color: #f0f0f0; }
  .rang.een {
    font-size: 26pt; }
  .rang.twee {
    font-size: 20pt; }
  .rang.drie {
    font-size: 16pt; }
  .rang::before {
    position: absolute;
    top: -8px;
    right: -8px;
    content: '';
    text-align: center;
    line-height: 20px;
    display: block;
    background: #394460 url(v_img/stijgerpijl.svg) center center no-repeat;
    background-size: 80% 80%;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    border: 1px solid white;
    font-size: 10pt; }

.ovd_resterend .stem {
  display: inline-block;
  border-radius: 2em;
  width: 1.7em;
  height: 1.7em;
  background-color: #660000; }
  .ovd_resterend .stem.gebruikt {
    background-color: #e6e6e6; }
  .ovd_resterend .stem img {
    display: none; }
.ovd_resterend .tekst {
  display: none; }

.stijger a {
  display: inline-block;
  padding-right: 60px;
  height: 90px;
  font-weight: bold; }

.ovd_view {
  margin-top: 20px; }

.ovd_view.overzicht .extrakopje {
  text-align: right;
  padding-bottom: 0.5em; }
.ovd_view.overzicht .rangnummer {
  color: #660000;
  background-color: transparent;
  text-align: right; }

@media (min-width: 501px) {
  .ovd_view.reglement {
    width: calc(100% - 120px); }
    .ovd_view.overzicht .contents img.verzoekicon {
      float: left;
      margin: 0 1em 0.5em 0; }
  .ovd-pagina.uitgelogd .dashboard_nav {
    width: 130px;
    float: right !important; }
  .ovd-pagina.uitgelogd .dashboard_welkom {
    margin: 0;
    float: left !important;
    width: calc(100% - 140px); }
  .ovd_view.recent, .ovd_view.aanbevolen {
    width: 340px;
    float: right; }
  .ovd_view.top10 {
    width: 375px;
    float: left;
    margin-right: 20px; } }

@media (min-width: 501px) and (max-width: 800px) {
  .ovd-pagina .dashboard_welkom {
    height: auto;
    width: auto;
    float: none !important;
    clear: both;
    margin: 20px 0 0 0; }
  .ovd-pagina .dashboard_mijnverzoeken {
    width: calc(100% - 310px); }
    .ovd-pagina .dashboard_mijnverzoeken td:first-child {
      padding-right: 0.5em; }
  .ovd_view.top10, .ovd_view.recent, .ovd_view.aanbevolen {
    float: left;
    width: 375px; } }

@media (min-width: 501px) and (max-width: 800px) {
  .dashboard_mijnverzoeken {
    margin-right: 10px;
    flex: 3 1; }
  .dashboard_nav {
    flex: 5 1; } }

@media (max-width: 800px) {
  .ovd-pagina {
    display: flex;
    flex-wrap: wrap; }
    .ovd-pagina > * {
      width: 100%; }
    .ovd-pagina .dashboard_welkom {
      order: 0;
      margin: 10px 0 10px 0; }
    .ovd-pagina .ovd_view.aanbevolen {
      display: none;
      order: 2; }
    .ovd-pagina .ovd_view.recent {
      order: 4; }
    .ovd-pagina .ovd_view.top10 {
      order: 3; } }

@media (max-width: 500px) {
  .dashboard_mijnverzoeken {
    order: 8;
    margin-top: 20px; } }

@media (max-width: 500px) {
  x.sessionbar form b::after {
    display: block;
    clear: both;
    height: 1px;
    content: " "; }
  .lightbox {
    overflow: hidden; }
  .verzoekpopup {
    display: none; }
  .ovd_view, .ovd_view.top10 {
    width: 100%;
    max-width: 100%;
    float: none; }
    .ovd-pagina.ingelogd .dashboard_welkom {
      display: none; }
    .ovd-pagina .dashboard_mijnverzoeken, .ovd-pagina .dashboard_welkom {
      height: auto; }
    .ovd-pagina .dashboard_mijnverzoeken, .ovd-pagina .dashboard_welkom, .ovd-pagina .dashboard_nav {
      clear: both; }
    .ovd-pagina::after {
      height: 0; } }

.ovd_item .contents {
  display: block !important;
  height: 0;
  overflow: hidden;
  transition: all 0.3s ease;
  padding-bottom: 0.7em;
  margin-bottom: 0.4em;
  opacity: 0;
  transform: translateY(-0.5em) scaleY(0.8);
  transform-origin: top left; }

.ovd_item_container.open .ovd_item .contents {
  height: unset;
  padding-top: 0.7em;
  opacity: 1;
  transform: translateY(0); }

/*.ovd_view .content {
 width: 45.5%;
 float: right;
 margin-top: 20px;
 }
 .ovd_view.top10 {
 width: calc(45.5% + 3em);
 margin-right: 20px;
 float: left;
 }
 */
.ovd_item_container {
  position: relative; }

.ovd_view.overzicht .ovd_item, .ovd_view.top10 .ovd_item {
  padding-left: 3em; }

.rangnummer_container {
  position: absolute;
  left: 0; }

.rangnummer {
  background-color: #660000;
  color: #f0f0f0;
  border-radius: 2em;
  width: 1.5em;
  height: 1.5em;
  line-height: 1.5em;
  font-size: 150%; }

.toolbar > .bekijkknop, .stemknop {
  transition: all 0.1s ease; }
  .toolbar > .bekijkknop:hover, .stemknop:hover {
    transform: scale(1.3, 1.3); }
  .toolbar > .bekijkknop:active, .stemknop:active {
    transform: scale(1.3, 1.3) translate(0.1em, 0.12em); }
  .toolbar > .bekijkknop img, .stemknop img {
    display: none; }

.toolbar > .bekijkknop {
  display: block;
  float: right;
  width: 14pt;
  height: 12pt; }

.toolbar > .bekijkknop {
  display: none; }

.topbar h3 > .bekijkknop::after {
  transition: all 0.2s ease;
  width: 10pt;
  height: 8pt;
  content: '';
  margin-left: 0.3em;
  display: inline-block;
  background: url(v_img/triangel.svg) center center no-repeat;
  background-size: contain;
  transform: translateY(1pt); }
  .open .topbar h3 > .bekijkknop::after {
    transform: rotate(180deg); }

.cat_ovd a.stemknop {
  font-style: small-caps;
  font-weight: bold;
  letter-spacing: 0.05em;
  background-color: #660000;
  color: white;
  border-radius: 3em;
  display: inline-block;
  box-shadow: 0.15em 0.2em #666; }
  .cat_ovd a.stemknop.algestemd {
    background-color: #999; }
  .cat_ovd a.stemknop::after {
    content: 'STEM';
    display: inline-block;
    padding: 0 0.7em;
    font-size: 80%;
    line-height: 1.5em; }
  .cat_ovd a.stemknop:hover {
    box-shadow: 0.2em 0.25em #666;
    transform: scale(1.3, 1.3);
    color: white; }
  .cat_ovd a.stemknop:active {
    box-shadow: 0.1em 0.12em #666;
    transform: scale(1.3, 1.3) translate(0.1em, 0.12em);
    color: white; }

.scorebalk_container div {
  background-color: #779190;
  border-radius: 2em;
  box-sizing: content-box;
  padding: 0 0.1em; }

.ovd_item a.lightbox {
  position: relative;
  display: block; }
.ovd_item .verzoekpopup {
  position: absolute;
  z-index: 1;
  left: calc(312px - 1.5em);
  top: calc(156px - 1.5em);
  background: url('v_img/groter.svg') no-repeat;
  background-size: contain;
  width: 1.5em;
  height: 1.5em; }

.ovd_view.top10 .verzoekdatumhead, .ovd_view.recent .verzoekdatumhead, .ovd_view.overzicht .verzoekdatumhead {
  display: none; }
.ovd_view #special_top1 .contents .lightbox {
  display: none; }
.ovd_view .contents::after {
  content: '';
  display: block;
  clear: both; }
.ovd_view .ovd_item::after {
  content: '';
  display: block;
  clear: both;
  border-top: thin solid #999;
  height: 0.7em; }
  .ovd_view .contents + div img {
    display: none; }
.ovd_view h3, .ovd_view h3 a {
  padding: 0.2em 0;
  background: none;
  border: none;
  font-weight: bold; }
.ovd_view .topbar::after {
  content: '';
  display: block;
  clear: both; }
.ovd_view .scorebalk_container {
  width: calc(100% - 4.5em);
  position: absolute;
  left: 0;
  bottom: 0; }
.ovd_view .topbar {
  position: relative;
  /*h3 {
   position: relative;
   left: 17pt;
   } */ }
.ovd_view .toolbar .bekijkknop {
  right: 0;
  top: 3pt;
  position: absolute; }
.ovd_view .open .toolbar .bekijkknop {
  top: -1pt; }
.ovd_view .toolbar .stemknop {
  text-align: right;
  position: absolute;
  right: 0;
  bottom: 0; }

@media (min-width: 801px) {
  .ovd_view.overzicht h3 {
    display: inline-block; }
  .ovd_view.overzicht .score {
    display: block;
    float: right; }
  .ovd_view.overzicht .verzoekdatumhead {
    display: inline; }
  .ovd_view.overzicht .verzoekvoorvoegsel {
    display: inline; }
  .ovd_view.overzicht .verzoekdatumfoot {
    display: none; } }

/*
 @media (max-width: 800px) {
 .ovd_view {
 float: none;
 width: auto;
 .content {
 display: flex;
 flex-wrap: wrap;
 }
 }
 .ovd_item_container {
 border: 1px solid blue;
 width: 10em;
 overflow: visible;
 flex: 1 10 10%;
 }
 .ovd_item_container.open {
 flex: 1 0 320px;
 //min-width: 300px;
 }
 .verzoekicon {
 display: inline-block;
 }
 }*/
.menubar a.search {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  background: url(v_img/zoek128.png) center center no-repeat;
  background-size: 70% 70%; }
  .menubar a.search img {
    display: none; }

#special_top1 .contents .verzoekicon {
  display: none; }

@media (prefers-color-scheme: dark) {
  html {
    color: #e6e6e6; }
  body {
    background-image: none;
    background-color: #111; }
  .page {
    background-color: #222; }
  .menubar {
    filter: invert(100%); }
    .menubar a.search {
      filter: invert(100%); }
  .sessionbar {
    background-color: #666; }
  .ovd_resterend .stem.resterend, .rang, .top10 .rangnummer {
    border: thin solid white; }
  .ovd_view.overzicht .rangnummer {
    color: #779190; }
  #ovd_top10tien, #ovd_verzoeksummarynr, .page .pageinner a {
    color: #ccc; }
  .score {
    color: #999; }
  .box.border {
    border: thin solid #555;
    box-shadow: 2px 2px 3px 0px #333; }
  .foot_container {
    background-color: #333;
    background-image: linear-gradient(to right, #555, #333); }
  .dashboard_weeknummer, .dashboard_resterend {
    background-color: #555; }
  .ovd_resterend .stem.gebruikt {
    background-color: #222; }
  .disclaimer a.contact {
    color: #e6e6e6; }
  .contents {
    color: #aaa; }
    .page .pageinner a:active, .page .pageinner a:hover {
      color: #779190; } }

@media (prefers-color-scheme: dark) {
  table.mailinfo, .ovd_notificatiemail.heading {
    color: #999; }
  .mailview {
    color: #ccc; }
    .page .pageinner .mailview a {
      color: #779190; }
    .page .pageinner .mailview a:hover {
      color: white; }
  .ovd_notificatiemail.heading {
    background-image: none; } }