/* Form */
section#form{
  align-items: flex-end;
}
/* Header er eneste som skal være venstrestillet */
.formHeader{
  align-self:flex-start;
}

input,
select {
  display: block;
  margin: min(var(--form-padding), var(--mobile-padding)) 0;
  padding: min(var(--form-padding),var(--mobile-padding));
  border: 1px solid #333;
  border-radius: 5px;
}

input,
select {
  font-size: 1em;
}

/* Er nødt til selv at sætte opacity, fordi Firefox selv dimmer den, mens Safari ikke gør */
input::placeholder {
  color: var(--base-blue);
  opacity: 1;
}

select,
input[type="text"],
input[type="tel"],
input[type="email"]
 {
  width: min(calc(100% - var(--form-padding) * 2), calc(100% - var(--mobile-padding)));
  /*width:100%;*/
}
div.divBlank{width:100%;}

input[type="checkbox"],
.statistik label {
  display: inline;
  margin-left: 10px;
}

input:not([type="submit"]):focus {
  background-color: #cceeff;
}

input[type="submit"] {
  background: #0077b3;
  color: #fff;
  cursor: pointer;
  font: 900 15px 'Raleway', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: calc(var(--form-padding) * 1.5) calc(var(--form-padding)*2);
}

/* Disable submit button style */
input[type="submit"][disabled] {
  background: #959595 !important;
  cursor: not-allowed !important;
}

input[type="submit"]:active {
  background: #002e51;
  color: #fff;
  cursor: pointer;
}

input[type="submit"]:hover,
input[type="submit"]:focus {
  background: #003e6f;
}

.invalid-input::-webkit-input-placeholder {
  color: #ffffff;
}

label.error {
  width: 100%;
}

#folkekirkenudmelding {
  width: 100%;
}

input:invalid,
[aria-invalid=true] {
  border-color: hsl(351, 100%, 27%);
}

.notification {
    width: 300px;
    padding: 15px;
    border: 5px solid #e61b1b;
    align-self: flex-start;
    position: absolute;
    left: 110%;
    top: -50%;
}

@media screen and (min-width: 1200px) {
  .notification {
    width: 300px;
  }
}

@media screen and (max-width: 1199px) {
  .notification {
    position: static;
    width: auto;
    margin-top: 20px;
    order: 10;
  }
}