/*
  HvA-inspired whitelabel override for custom sites.
  Intended for the Site.CSS field served from /content/css.
  Do not import this in src/Modules/Tool/Index.js unless the whole shared tool
  experience should inherit the whitelabel theme.

  Style references taken from the HvA style handbook:
  - Open Sans as primary typeface
  - HvA purple: #25167A
  - Supporting green for CTA blocks: #007D68
  - White as dominant surface color
*/

.steunKleur,
nav div.menu div.item.ok:before,
nav div.menu div.openItem.ok:before,
nav div.menu div.currentsubcategory:before {
  color: #25167a !important;
}

.steunKleurBg,
main div.content div.progress .progress-bar {
  background-color: #007d68 !important;
}

.header.steunKleurBg,
.contentFull.steunKleurBg,
main div.toelichting h1.steunKleurBg,
main div.content div.vraag div.devraag.steunKleurBg {
  color: #fff !important;
}

body {
  background:
    linear-gradient(90deg, #fbfbfd 0%, #fbfbfd 78%, #f2efff 78%, #f2efff 100%) fixed !important;
  color: #111 !important;
  font-family: 'Open Sans', Arial, sans-serif !important;
}

a {
  color: #25167a;
}

nav div.menu {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 12px 0 32px rgba(37, 22, 122, 0.08);
}

nav div.menu div.logo {
  text-align: center;
  background: #fff;
}

nav div.logo div.logoWrapper {
  padding: 22px 0;
}

nav div.menu div.item,
nav div.menu div.logo,
nav div.menu div.openItem {
  border-bottom-color: rgba(37, 22, 122, 0.08);
}

nav div.menu div.item a,
nav div.menu div.item span,
nav div.menu div.openItem a,
nav div.menu div.openItem span {
  color: #25167a;
}

nav div.menu div.openItem a,
nav div.menu div.openItem span {
  background: transparent;
}

nav div.menu div.item.current a,
nav div.menu div.openItem.currentCursor a,
nav div.menu div.openItem.currentCursor span {
  color: #25167a;
}

main div.contentFull,
main div.content div.header,
main div.content div.vraag,
main div.toelichting,
main div.dossiers div.dossier div.kaartje,
body div.bannerWrapper div.banner {
  background: #fff;
  border: 1px solid rgba(37, 22, 122, 0.08);
  box-shadow: 0 14px 34px rgba(24, 21, 45, 0.08);
}

main div.content div.header,
main div.content div.vraag,
main div.contentFull,
main div.toelichting,
main div.dossiers div.dossier div.kaartje {
  border-radius: 4px;
}

main div.content div.header h1,
main div.contentFull h1,
div.story h1 {
  color: #25167a;
  font-family: 'Open Sans', Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.01em;
}

main div.content div.header div.subtitle,
main div.contentFull p,
main div.contentFull li,
main div.content div.vraag div.devraag,
main div.toelichting > div {
  line-height: 1.6;
}

main div.content div.header {
  border-top: 4px solid #25167a;
}

main div.content div.progress {
  background-color: rgba(37, 22, 122, 0.12);
  border-radius: 999px;
  overflow: hidden;
}

main div.content div.vraag {
  border-color: rgba(37, 22, 122, 0.08);
}

main div.content div.vraag div.devraag {
  background: #f4f1ff;
  color: #25167a;
  border-top: 4px solid #25167a;
}

main div.toelichting {
  background: #fff;
  border-color: rgba(37, 22, 122, 0.08);
}

main div.toelichting h1 {
  background: #25167a !important;
}

main div.toelichting a.bannerAction {
  border-color: #007d68;
  color: #007d68;
}

main div.toelichting a.bannerAction:hover {
  border-color: #25167a;
  color: #25167a;
}

a.linkCta,
input[type='submit'].linkCta,
button.linkCta,
body .contentFull.steunKleurBg a,
body .header.steunKleurBg a {
  background: #007d68 !important;
  border-radius: 2px;
  color: #fff !important;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.linkCta:hover,
input[type='submit'].linkCta:hover,
button.linkCta:hover {
  filter: brightness(92%);
}

body input[type='text'],
body input[type='email'],
body input[type='number'],
body input[type='password'],
body select,
body input[type='file'],
body .inputMachine,
textarea {
  border-color: rgba(37, 22, 122, 0.2);
  border-radius: 2px;
  font-family: 'Open Sans', Arial, sans-serif;
}

body input[type='text']:focus,
body input[type='email']:focus,
body input[type='number']:focus,
body input[type='password']:focus,
body select:focus,
textarea:focus {
  border-color: #25167a;
  box-shadow: 0 0 0 2px rgba(37, 22, 122, 0.12);
  outline: none;
}

input[type='radio'] + label span,
input[type='checkbox'] + label span,
div.buttons input[type='radio'] + label span {
  border-color: #25167a;
  background-color: #fff;
}

input[type='radio']:checked + label span::before,
input[type='checkbox']:checked + label span::before,
div.buttons input[type='radio']:checked + label span::before {
  background-color: #007d68;
}

ul.special {
  margin-bottom: 28px;
}

ul.special li {
  border-bottom-color: rgba(37, 22, 122, 0.08);
  padding: 10px 7px;
}

ul.special li:before {
  color: #25167a;
}

ul.special li.tijd:before,
ul.special li.voorwaarde:before,
ul.special li.gratis:before,
ul.special li.document:before,
ul.special li.email:before,
ul.special li.linkedin:before,
ul.special li.argument:before,
ul.special li.opslaan:before,
ul.special li.kruis:before,
ul.special li.rapport:before,
ul.special li.docwg:before,
ul.special li.pc:before,
ul.special li.euro:before,
ul.special li.download:before,
ul.special li.contact:before,
ul.special li.letop:before,
ul.special li.link:before,
ul.special li.clipboard:before {
  color: #25167a;
}

.contentFull ul.menu {
  border-bottom-color: rgba(37, 22, 122, 0.18);
}

body main .contentFull ul.menu a {
  color: #25167a;
}

body main .contentFull ul.menu li.active {
  border-bottom-color: #25167a;
}

body main .contentFull ul.menu li.active a {
  color: #25167a;
  font-weight: 700;
}

tbody tr th {
  border-top-color: rgba(37, 22, 122, 0.14);
  border-bottom-color: rgba(37, 22, 122, 0.14);
  color: #25167a;
}

tbody tr:nth-child(odd) td {
  background-color: rgba(37, 22, 122, 0.03);
}

main div.contentFull a:not(.steunKleur):not(.steunKleurBg) {
  color: #25167a;
}

footer {
  background: #25167a;
}

footer,
footer a {
  color: #fff !important;
}