/* Bootstrap-achtige look, alleen op het UM-loginformulier */
.um.um-login .um-form { --umbs-radius:.375rem; --umbs-border:#ced4da; --umbs-focus:rgba(13,110,253,.25); --umbs-bg:#fff; --umbs-text:#212529; --umbs-muted:#6c757d; --umbs-primary:#0d6efd; --umbs-primary-dark:#0b5ed7; }

/* Inputs / textarea / select */
.um.um-login .um-form input[type="text"],
.um.um-login .um-form input[type="email"],
.um.um-login .um-form input[type="password"],
.um.um-login .um-form input[type="url"],
.um.um-login .um-form input[type="tel"],
.um.um-login .um-form input[type="number"],
.um.um-login .um-form textarea,
.um.um-login .um-form select{
  display:block; width:100%;
  padding:.375rem .75rem; font-size:1rem; line-height:1.5; color:var(--umbs-text);
  background-color:var(--umbs-bg); background-clip:padding-box;
  border:1px solid var(--umbs-border); border-radius:var(--umbs-radius);
  box-shadow:none; height:auto;
}

/* focus-glow zoals Bootstrap — overrulet UM’s shorthand met !important */
.um.um-login .um-form input[type="text"]:focus,
.um.um-login .um-form input[type="email"]:focus,
.um.um-login .um-form input[type="password"]:focus,
.um.um-login .um-form input[type="url"]:focus,
.um.um-login .um-form input[type="tel"]:focus,
.um.um-login .um-form input[type="number"]:focus,
.um.um-login .um-form textarea:focus,
.um.um-login .um-form select:focus,
.um.um-login .um-form input[type="text"]:focus-visible,
.um.um-login .um-form input[type="email"]:focus-visible,
.um.um-login .um-form input[type="password"]:focus-visible,
.um.um-login .um-form input[type="url"]:focus-visible,
.um.um-login .um-form input[type="tel"]:focus-visible,
.um.um-login .um-form input[type="number"]:focus-visible,
.um.um-login .um-form textarea:focus-visible,
.um.um-login .um-form select:focus-visible {
  border: 1px solid #86b7fe !important;             /* shorthand */
  outline: 0 !important;
  box-shadow: 0 0 0 .2rem rgba(13,110,253,.25) !important;
}


/* Disabled/readonly */
.um.um-login .um-form input[disabled],
.um.um-login .um-form select[disabled],
.um.um-login .um-form textarea[disabled]{ background-color:#e9ecef; opacity:1; }

/* Checkbox & radio */
.um.um-login .um-form input[type="checkbox"],
.um.um-login .um-form input[type="radio"]{
  width:1em; height:1em; vertical-align:middle; cursor:pointer;
  border:1px solid var(--umbs-border); border-radius:.25em;
  appearance:none; -webkit-appearance:none; outline:0; background-color:#fff;
}
.um.um-login .um-form input[type="radio"]{ border-radius:50%; }
.um.um-login .um-form input[type="checkbox"]:checked{
  background-color:var(--umbs-primary); border-color:var(--umbs-primary);
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='white' d='M13.485 1.929a1 1 0 0 1 .086 1.414l-7 8a1 1 0 0 1-1.495.06l-3-3a1 1 0 1 1 1.414-1.414l2.243 2.243 6.293-7.192a1 1 0 0 1 1.459-.111z'/%3e%3c/svg%3e");
  background-repeat:no-repeat; background-position:center; background-size:80% 80%;
}
.um.um-login .um-form input[type="radio"]:checked{
  background-color:var(--umbs-primary); border-color:var(--umbs-primary); box-shadow:inset 0 0 0 .2em #fff;
}

/* Labels & veldmarges */
.um.um-login .um-form .um-field-label label{ display:block; margin-bottom:.5rem; font-weight:500; }
.um.um-login .um-form .um-field{ margin-bottom:1rem; }

/* Foutmeldingen */
.um.um-login .um-field-error{ display:block; color:#dc3545; font-size:.875rem; margin-top:.25rem; }

/* UM-knop -> Bootstrap-achtig */
.um.um-login .um-button, .um.um-login input.um-button{
  display:inline-block; font-weight:600; line-height:1.5; text-align:center; text-decoration:none; user-select:none;
  padding:.375rem .75rem; border-radius:var(--umbs-radius);
  color:#fff; background-color:var(--umbs-primary); border:1px solid var(--umbs-primary);
}
.um.um-login .um-button:hover, .um.um-login input.um-button:hover{ background-color:var(--umbs-primary-dark); border-color:var(--umbs-primary-dark); }

/* Helptekst */
.um.um-login .um-form .um-tip{ color:var(--umbs-muted); font-size:.875rem; }