/*
 * Compat-CSS voor Materialize 1.2.2 (fork) met views die nog voor 0.97.6 geschreven zijn (H22 optie B).
 * Overgenomen uit 0.97.6 (MIT): checkbox/radio met een <label> direct na de input (1.x verwacht een <span>)
 * en de klassen valign, bordered en text-white die 1.x niet meer kent. Weg zodra de views omgezet zijn.
 */
.shades-text.text-white {
  color: #FFFFFF !important;}
.valign-wrapper {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;}
.valign-wrapper .valign {
  display: block;}
table.bordered > thead > tr,
table.bordered > tbody > tr {
  border-bottom: 1px solid #d0d0d0;}
[type="radio"]:not(:checked) + label,
[type="radio"]:checked + label {
  position: relative;
  padding-left: 35px;
  cursor: pointer;
  display: inline-block;
  height: 25px;
  line-height: 25px;
  font-size: 1rem;
  transition: .28s ease;
  
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;}
[type="radio"] + label:before,
[type="radio"] + label:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  margin: 4px;
  width: 16px;
  height: 16px;
  z-index: 0;
  transition: .28s ease;}
[type="radio"]:not(:checked) + label:before,
[type="radio"]:not(:checked) + label:after,
[type="radio"]:checked + label:before,
[type="radio"]:checked + label:after,
[type="radio"].with-gap:checked + label:before,
[type="radio"].with-gap:checked + label:after {
  border-radius: 50%;}
[type="radio"]:not(:checked) + label:before,
[type="radio"]:not(:checked) + label:after {
  border: 2px solid #5a5a5a;}
[type="radio"]:not(:checked) + label:after {
  z-index: -1;
  -webkit-transform: scale(0);
          transform: scale(0);}
[type="radio"]:checked + label:before {
  border: 2px solid transparent;}
[type="radio"]:checked + label:after,
[type="radio"].with-gap:checked + label:before,
[type="radio"].with-gap:checked + label:after {
  border: 2px solid #26a69a;}
[type="radio"]:checked + label:after,
[type="radio"].with-gap:checked + label:after {
  background-color: #26a69a;
  z-index: 0;}
[type="radio"]:checked + label:after {
  -webkit-transform: scale(1.02);
          transform: scale(1.02);}
[type="radio"].with-gap:checked + label:after {
  -webkit-transform: scale(0.5);
          transform: scale(0.5);}
[type="radio"].tabbed:focus + label:before {
  box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1);}
[type="radio"].with-gap:disabled:checked + label:before {
  border: 2px solid rgba(0, 0, 0, 0.26);}
[type="radio"].with-gap:disabled:checked + label:after {
  border: none;
  background-color: rgba(0, 0, 0, 0.26);}
[type="radio"]:disabled:not(:checked) + label:before,
[type="radio"]:disabled:checked + label:before {
  background-color: transparent;
  border-color: rgba(0, 0, 0, 0.26);}
[type="radio"]:disabled + label {
  color: rgba(0, 0, 0, 0.26);}
[type="radio"]:disabled:not(:checked) + label:before {
  border-color: rgba(0, 0, 0, 0.26);}
[type="radio"]:disabled:checked + label:after {
  background-color: rgba(0, 0, 0, 0.26);
  border-color: #BDBDBD;}
[type="checkbox"] + label {
  position: relative;
  padding-left: 35px;
  cursor: pointer;
  display: inline-block;
  height: 25px;
  line-height: 25px;
  font-size: 1rem;
  -webkit-user-select: none;
  
  -moz-user-select: none;
  
  -khtml-user-select: none;
  
  -ms-user-select: none;}
[type="checkbox"] + label:before,
[type="checkbox"]:not(.filled-in) + label:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  z-index: 0;
  border: 2px solid #5a5a5a;
  border-radius: 1px;
  margin-top: 2px;
  transition: .2s;}
[type="checkbox"]:not(.filled-in) + label:after {
  border: 0;
  -webkit-transform: scale(0);
          transform: scale(0);}
[type="checkbox"]:not(:checked):disabled + label:before {
  border: none;
  background-color: rgba(0, 0, 0, 0.26);}
[type="checkbox"].tabbed:focus + label:after {
  -webkit-transform: scale(1);
          transform: scale(1);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1);
  background-color: rgba(0, 0, 0, 0.1);}
[type="checkbox"]:checked + label:before {
  top: -4px;
  left: -5px;
  width: 12px;
  height: 22px;
  border-top: 2px solid transparent;
  border-left: 2px solid transparent;
  border-right: 2px solid #26a69a;
  border-bottom: 2px solid #26a69a;
  -webkit-transform: rotate(40deg);
          transform: rotate(40deg);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform-origin: 100% 100%;
          transform-origin: 100% 100%;}
[type="checkbox"]:checked:disabled + label:before {
  border-right: 2px solid rgba(0, 0, 0, 0.26);
  border-bottom: 2px solid rgba(0, 0, 0, 0.26);}
[type="checkbox"]:indeterminate + label:before {
  top: -11px;
  left: -12px;
  width: 10px;
  height: 22px;
  border-top: none;
  border-left: none;
  border-right: 2px solid #26a69a;
  border-bottom: none;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform-origin: 100% 100%;
          transform-origin: 100% 100%;}
[type="checkbox"]:indeterminate:disabled + label:before {
  border-right: 2px solid rgba(0, 0, 0, 0.26);
  background-color: transparent;}
[type="checkbox"].filled-in + label:after {
  border-radius: 2px;}
[type="checkbox"].filled-in + label:before,
[type="checkbox"].filled-in + label:after {
  content: '';
  left: 0;
  position: absolute;
  
  transition: border .25s, background-color .25s, width .20s .1s, height .20s .1s, top .20s .1s, left .20s .1s;
  z-index: 1;}
[type="checkbox"].filled-in:not(:checked) + label:before {
  width: 0;
  height: 0;
  border: 3px solid transparent;
  left: 6px;
  top: 10px;
  -webkit-transform: rotateZ(37deg);
  transform: rotateZ(37deg);
  -webkit-transform-origin: 20% 40%;
  transform-origin: 100% 100%;}
[type="checkbox"].filled-in:not(:checked) + label:after {
  height: 20px;
  width: 20px;
  background-color: transparent;
  border: 2px solid #5a5a5a;
  top: 0px;
  z-index: 0;}
[type="checkbox"].filled-in:checked + label:before {
  top: 0;
  left: 1px;
  width: 8px;
  height: 13px;
  border-top: 2px solid transparent;
  border-left: 2px solid transparent;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  -webkit-transform: rotateZ(37deg);
  transform: rotateZ(37deg);
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%;}
[type="checkbox"].filled-in:checked + label:after {
  top: 0;
  width: 20px;
  height: 20px;
  border: 2px solid #26a69a;
  background-color: #26a69a;
  z-index: 0;}
[type="checkbox"].filled-in.tabbed:focus + label:after {
  border-radius: 2px;
  border-color: #5a5a5a;
  background-color: rgba(0, 0, 0, 0.1);}
[type="checkbox"].filled-in.tabbed:checked:focus + label:after {
  border-radius: 2px;
  background-color: #26a69a;
  border-color: #26a69a;}
[type="checkbox"].filled-in:disabled:not(:checked) + label:before {
  background-color: transparent;
  border: 2px solid transparent;}
[type="checkbox"].filled-in:disabled:not(:checked) + label:after {
  border-color: transparent;
  background-color: #BDBDBD;}
[type="checkbox"].filled-in:disabled:checked + label:before {
  background-color: transparent;}
[type="checkbox"].filled-in:disabled:checked + label:after {
  background-color: #BDBDBD;
  border-color: #BDBDBD;}

/* Roboto zoals in 0.97 (1.x levert zelf geen lettertype mee); bestanden staan al in /fonts/roboto */
@font-face {
  font-family: "Roboto";
  src: local(Roboto Thin), url("../../fonts/roboto/Roboto-Thin.eot");
  src: url("../../fonts/roboto/Roboto-Thin.eot?#iefix") format("embedded-opentype"), url("../../fonts/roboto/Roboto-Thin.woff2") format("woff2"), url("../../fonts/roboto/Roboto-Thin.woff") format("woff"), url("../../fonts/roboto/Roboto-Thin.ttf") format("truetype");
  font-weight: 200;
}
@font-face {
  font-family: "Roboto";
  src: local(Roboto Light), url("../../fonts/roboto/Roboto-Light.eot");
  src: url("../../fonts/roboto/Roboto-Light.eot?#iefix") format("embedded-opentype"), url("../../fonts/roboto/Roboto-Light.woff2") format("woff2"), url("../../fonts/roboto/Roboto-Light.woff") format("woff"), url("../../fonts/roboto/Roboto-Light.ttf") format("truetype");
  font-weight: 300;
}
@font-face {
  font-family: "Roboto";
  src: local(Roboto Regular), url("../../fonts/roboto/Roboto-Regular.eot");
  src: url("../../fonts/roboto/Roboto-Regular.eot?#iefix") format("embedded-opentype"), url("../../fonts/roboto/Roboto-Regular.woff2") format("woff2"), url("../../fonts/roboto/Roboto-Regular.woff") format("woff"), url("../../fonts/roboto/Roboto-Regular.ttf") format("truetype");
  font-weight: 400;
}
@font-face {
  font-family: "Roboto";
  src: url("../../fonts/roboto/Roboto-Medium.eot");
  src: url("../../fonts/roboto/Roboto-Medium.eot?#iefix") format("embedded-opentype"), url("../../fonts/roboto/Roboto-Medium.woff2") format("woff2"), url("../../fonts/roboto/Roboto-Medium.woff") format("woff"), url("../../fonts/roboto/Roboto-Medium.ttf") format("truetype");
  font-weight: 500;
}
@font-face {
  font-family: "Roboto";
  src: url("../../fonts/roboto/Roboto-Bold.eot");
  src: url("../../fonts/roboto/Roboto-Bold.eot?#iefix") format("embedded-opentype"), url("../../fonts/roboto/Roboto-Bold.woff2") format("woff2"), url("../../fonts/roboto/Roboto-Bold.woff") format("woff"), url("../../fonts/roboto/Roboto-Bold.ttf") format("truetype");
  font-weight: 700;
}
html {
  font-family: "Roboto", sans-serif;
}

/* tabs: 0.97 kleurde de actieve tab niet rood (style.css zet de tekstkleur) */
.tabs .tab a.active,
.tabs .tab a:focus.active {
  color: #212121;
  background-color: transparent;
}

/* modal-footer: 0.97 zette knoppen rechts in omgekeerde DOM-volgorde (float); zonder dit wisselen Bevestigen en Annuleren van plek */
.modal .modal-footer .btn,
.modal .modal-footer .btn-large,
.modal .modal-footer .btn-flat {
  float: right;
}

/* focuslijn: 1.x heeft :not(.browser-default) in de selector en wint daarmee van style.css (#546e7a); zelfde kleur, hogere specificiteit */
input:not([type]):not(.browser-default):focus:not([readonly]),
input[type=text]:not(.browser-default):focus:not([readonly]),
input[type=password]:not(.browser-default):focus:not([readonly]),
input[type=email]:not(.browser-default):focus:not([readonly]),
input[type=url]:not(.browser-default):focus:not([readonly]),
input[type=time]:not(.browser-default):focus:not([readonly]),
input[type=date]:not(.browser-default):focus:not([readonly]),
input[type=datetime]:not(.browser-default):focus:not([readonly]),
input[type=datetime-local]:not(.browser-default):focus:not([readonly]),
input[type=tel]:not(.browser-default):focus:not([readonly]),
input[type=number]:not(.browser-default):focus:not([readonly]),
input[type=search]:not(.browser-default):focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]) {
  border-bottom: 1px solid #546e7a;
  box-shadow: 0 1px 0 0 #546e7a;
}

/* label bij focus: style.css zet #9e9e9e, 1.x wint met teal door :not(.browser-default) */
input:not([type]):not(.browser-default):focus:not([readonly]) + label,
input[type=text]:not(.browser-default):focus:not([readonly]) + label,
input[type=password]:not(.browser-default):focus:not([readonly]) + label,
input[type=email]:not(.browser-default):focus:not([readonly]) + label,
input[type=url]:not(.browser-default):focus:not([readonly]) + label,
input[type=time]:not(.browser-default):focus:not([readonly]) + label,
input[type=date]:not(.browser-default):focus:not([readonly]) + label,
input[type=datetime]:not(.browser-default):focus:not([readonly]) + label,
input[type=datetime-local]:not(.browser-default):focus:not([readonly]) + label,
input[type=tel]:not(.browser-default):focus:not([readonly]) + label,
input[type=number]:not(.browser-default):focus:not([readonly]) + label,
input[type=search]:not(.browser-default):focus:not([readonly]) + label,
textarea.materialize-textarea:focus:not([readonly]) + label {
  color: #9e9e9e;
}

/* maatvoering zoals 0.97: negatieve rij-marge in .container (1.x alleen in .col), card-padding 20px,
   geen ondermarge op .input-field, invoer 1rem met 15px ondermarge, knoppen erven de lettergrootte */
.container .row { margin-left: -0.75rem; margin-right: -0.75rem; }
.card .card-content, .card .card-action { padding: 20px; }
.input-field { margin-bottom: 0; }
.btn, .btn-large, .btn-flat { font-size: inherit; }
input:not([type]):not(.browser-default),
input[type=text]:not(.browser-default),
input[type=password]:not(.browser-default),
input[type=email]:not(.browser-default),
input[type=url]:not(.browser-default),
input[type=time]:not(.browser-default),
input[type=date]:not(.browser-default),
input[type=datetime]:not(.browser-default),
input[type=datetime-local]:not(.browser-default),
input[type=tel]:not(.browser-default),
input[type=number]:not(.browser-default),
input[type=search]:not(.browser-default),
textarea.materialize-textarea {
  font-size: 1rem;
  margin-top: 0; margin-bottom: 15px; /* geen shorthand: margin-left komt van .prefix ~ input */
}

/* knoppen, tabs, collapsible en navbar-links zoals 0.97 */
.btn, .btn-large, .btn-flat { padding: 0 2rem; }
.tabs .tab { letter-spacing: .8px; }
.tabs .tab a { font-size: inherit; padding: 0; }
.collapsible-header { display: block; min-height: 3rem; line-height: 3rem; padding: 0 1rem; }
.collapsible-body { padding: 0; }
nav ul a { display: inline-block; }

/* materialize-tags: het binnenste invoerveld verliest in 1.x op specificiteit en krijgt anders een eigen onderlijn */
.materialize-tags input:not(.browser-default) { border: none; box-shadow: none; background-color: transparent; padding: 0; margin: 0; }
.materialize-tags input:not(.browser-default):focus:not([readonly]) { border: none; box-shadow: none; }

/* collapsible-icoon en kopmarges zoals 0.97 (1.x heeft grotere bovenmarges) */
.collapsible-header i { display: block; float: left; line-height: 3rem; }
h1 { margin: 2.1rem 0 1.68rem 0; }
h2 { margin: 1.78rem 0 1.424rem 0; }
h3 { margin: 1.46rem 0 1.168rem 0; }
h4 { margin: 1.14rem 0 0.912rem 0; }
h5 { margin: 0.82rem 0 0.656rem 0; }
h6 { font-size: 1rem; margin: 0.5rem 0 0.4rem 0; }

/* card-titel en card-action-links zoals 0.97 */
.card .card-content .card-title { line-height: 48px; margin-bottom: 0; }
.card .card-action a:not(.btn):not(.btn-small):not(.btn-large):not(.btn-large):not(.btn-floating) { margin-right: 20px; }

/* 0.97 negeerde .browser-default op tekstvelden (alleen select/ul); 1.x laat ze dan ongestyled. 61 velden in 18 views
   (o.a. setup/app, setup/sso, setup/bi) hebben die klasse: hier krijgen ze de normale 1.x/0.97-stijl terug */
input:not([type]).browser-default,
input[type=text].browser-default,
input[type=password].browser-default,
input[type=email].browser-default,
input[type=url].browser-default,
input[type=time].browser-default,
input[type=date].browser-default,
input[type=datetime].browser-default,
input[type=datetime-local].browser-default,
input[type=tel].browser-default,
input[type=number].browser-default,
input[type=search].browser-default {
  background-color: transparent; border: none; border-bottom: 1px solid #9e9e9e; border-radius: 0; outline: none;
  height: 3rem; width: 100%; font-size: 1rem; margin-top: 0; margin-bottom: 15px; padding: 0; box-shadow: none; box-sizing: content-box;
  transition: box-shadow .3s, border .3s;
}
input:not([type]).browser-default:disabled,
input[type=text].browser-default:disabled,
input[type=password].browser-default:disabled,
input[type=email].browser-default:disabled,
input[type=url].browser-default:disabled,
input[type=time].browser-default:disabled,
input[type=date].browser-default:disabled,
input[type=datetime].browser-default:disabled,
input[type=datetime-local].browser-default:disabled,
input[type=tel].browser-default:disabled,
input[type=number].browser-default:disabled,
input[type=search].browser-default:disabled {
  color: rgba(0,0,0,.42); border-bottom: 1px dotted rgba(0,0,0,.42);
}
input:not([type]).browser-default:focus:not([readonly]),
input[type=text].browser-default:focus:not([readonly]),
input[type=password].browser-default:focus:not([readonly]),
input[type=email].browser-default:focus:not([readonly]),
input[type=url].browser-default:focus:not([readonly]),
input[type=time].browser-default:focus:not([readonly]),
input[type=date].browser-default:focus:not([readonly]),
input[type=datetime].browser-default:focus:not([readonly]),
input[type=datetime-local].browser-default:focus:not([readonly]),
input[type=tel].browser-default:focus:not([readonly]),
input[type=number].browser-default:focus:not([readonly]),
input[type=search].browser-default:focus:not([readonly]) {
  border-bottom: 1px solid #546e7a; box-shadow: 0 1px 0 0 #546e7a;
}

/* prefix-icoon: 0.97 had geen top, 1.x zet top:.5rem (icoon 7px lager) */
.input-field .prefix { top: 0; }

/* labels: 0.97 gaf .input-field label overal left .75rem (1.x alleen in .col) en verschoof alleen .active labels;
   1.x zet ook statische labels (65x style="position:static" in 21 views, vooral modals) 12px omlaag */
.input-field > label { left: 0.75rem; }
.input-field > label[style*="position:static"],
.input-field > label[style*="position: static"] { transform: none; }
.input-field > label.active[style*="position:static"],
.input-field > label.active[style*="position: static"] { transform: none; font-size: 0.8rem; }

/* sidenav-items zoals 0.97 .side-nav (64px hoog, 30px padding) */
.sidenav li { line-height: 64px; }
.sidenav li > a { color: #444; font-size: 1rem; font-weight: normal; height: 64px; line-height: 64px; padding: 0 30px; }
.sidenav .collapsible-header { padding: 0 30px; }

/* 1.x geeft ook .col .row een negatieve marge (0.97 alleen .container .row): velden in modals schoven 12px op */
.col .row { margin-left: auto; margin-right: auto; }
.container .row { margin-left: -0.75rem; margin-right: -0.75rem; }

/* formulierelementen erven het lettertype zoals in 0.97 (1.x: systeemfont-stack op button/input) */
button, input, optgroup, select, textarea { font-family: inherit; }
/* dropdowns openen in body (zie $.fn.dropdown in de compat-js); vervangt 'table.table .dropdown-content li>a' uit style.css */
.dropdown-content.mz-table-dropdown li > a { font-size: 14px; }
/* 1.x zet iconen in dropdown-items links vast met 24px marge (menu 31px breder); 0.97 deed dat niet */
.dropdown-content li > a > i { float: none; margin: 0; width: auto; }
/* textarea zoals 0.97: content-box met 1.6rem padding (leeg 94px); 1.x: border-box met .8rem (45px) */
textarea.materialize-textarea { padding: 1.6rem 0; box-sizing: content-box; }
/* 1.x geeft .chip 5px marge rechts en onder (tabelrijen met chips 5px hoger); 0.97 had geen marge, style.css vult zelf aan */
.chip { margin-bottom: 0; margin-right: 0; }
/* 0.97 stijlde het sluitkruisje als .chip i.material-icons; 1.x alleen .chip .close, dus materialize-tags kreeg een 24px-icoon
   dat de tekst omlaag duwde (/surveys, categorieën). Regel van 0.97 terug; style.css zet de regelhoogte in tags-velden op 20px. */
.chip i.material-icons { cursor: pointer; float: right; font-size: 16px; line-height: 32px; padding-left: 8px; }
/* hamburgermenu (alleen op telefoonbreedte): 0.97 nav .button-collapse i was 2.7rem, 1.x maakt nav-iconen 24px */
nav .button-collapse i { font-size: 2.7rem; height: 56px; line-height: 56px; }