/*
Theme Name: Divi Child
Theme URI: https://www.elegantthemes.com/
Description: Child theme for Divi
Author: Inspot
Author URI: https://www.elegantthemes.com/
Template: Divi
Version: 1.0.0
*/

/* Your custom CSS goes below this line */


:root {
  /* Färger */
  --blue:#008ffd;
  --grey:#b7b7b7;
  --darkBlue:#211E31;
  --lightGrey:#F7F7FB;
  --white:#ffffff;
  --vermilion:#e34234;
}

/* Formulär 
* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
@media screen and (max-width: 40rem) {
  form .row {
    gap: 0;
  }
}
@media only screen and (max-width: 600px) {
  .wpcf7-form input, input[type=text], input[type=email], input[type=tel], input[type=url],
form select, form textarea {
    width: 100%!important;
  }
}


form label {
  display: block;
  width: 100%;
}
form label.hidden {
  display: none;
}
form label.active {
  display: block;
}
form input, input[type=text], input[type=email], input[type=tel], input[type=url],
form select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: 0.125rem solid var(--grey);
  border-radius: 0;
  box-shadow: none;
  color: var(--darkBlue);
  height: 2.75rem;
  font-family: var(--font);
  font-size: var(--fontRegular);
  font-weight: var(--fontWeightRegular);
  margin-bottom: 1rem;
  padding: 0 0.75rem!important;
  width: calc(100% - 3.5rem - 0.25rem);
}
form input::-moz-placeholder, form select::-moz-placeholder {
  color: var(--darkBlue);
  font-family: var(--font);
  font-size: var(--fontRegular);
}
form input::placeholder,
form select::placeholder {
  color: var(--darkGreen);
  font-family: var(--font);
  font-size: var(--fontRegular);
}
form input[type=file],
form select[type=file] {
  background-color: transparent;
  border: none;
  border-radius: 0;
  height: -moz-fit-content;
  height: fit-content;
  padding: 0.5rem 0 0;
  width: 100%;
}

form input[type=checkbox], form input[type=radio],
form select[type=checkbox],
form select[type=radio] {
  background-color: transparent;
  border: 0.125rem solid var(--grey);
  border-radius: 0;
  box-sizing: border-box;
  cursor: pointer;
  height: 1rem;
  margin: 0 0.25rem 0 0;
  padding: 0;
  position: relative;
  vertical-align: text-bottom;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 1rem;
}
form input[type=checkbox]:checked, form input[type=radio]:checked,
form select[type=checkbox]:checked,
form select[type=radio]:checked {
  background-color: var(--darkBlue);
  color: var(--white) !important;
}
form input[type=checkbox]:checked::after, form input[type=radio]:checked::after,
form select[type=checkbox]:checked::after,
form select[type=radio]:checked::after {
  color: var(--white) !important;
  content: "✔";
  font-size: 0.5rem;
  left: calc(50% + 0.0625rem);
  position: absolute;
  top: calc(50% + 0.0625rem);
  transform: translate(-50%, -50%);
}
form input[type=submit],
form select[type=submit] {
  align-items: center;
  background-color: transparent;
  background-image: linear-gradient(135deg, var(--blue), var(--blue));
  border: none;
  color: var(--white);
  cursor: pointer;
  display: inline-flex;
  font-size: 1rem;
  height: -moz-fit-content;
  height: fit-content;
  justify-content: center;
  margin: 0.75rem 0 0;
  height: 3rem;
  padding: 0 1.75rem!important;
  transition: all 0.25s;
  -webkit-appearance: button;
  width: -moz-fit-content;
  width: fit-content;
}
form input[type=submit]:hover,
form select[type=submit]:hover {
  opacity: 0.7;
}
form input input[type=submit]:hover,
form select input[type=submit]:hover {
  background-color: var(--white);
  color: var(--blue);
}
form select {
  background: url(images/chevron-down-regular.svg);
  background-repeat: no-repeat;
  background-position-x: calc(100% - 1rem);
  background-position-y: 1rem;
  background-size: auto 0.75rem;
  width: calc(100% - 0.25rem);
}
form textarea {
  background-color: transparent;
  border: 0.125rem solid var(--grey);
  border-radius: 0;
  box-shadow: none;
  font-size: var(--fontSmall);
  height: 9.75rem;
  margin-bottom: 1rem;
  padding: 1rem 0.75rem!important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: calc(100% - 3.5rem - 0.25rem);
}
form textarea::-moz-placeholder {
  color: var(--darkBlue);
  font-family: var(--font);
  font-size: var(--fontSmall);
}
form textarea::placeholder {
  color: var(--darkblue);
  font-family: var(--font);
  font-size: var(--fontSmall);
}
form .wpcf7-list-item {
  margin: 0;
}
form .wpcf7-radio {
  display: flex;
  gap: 1rem;
  margin: 0.5rem 0 1rem;
}
form .wpcf7-not-valid-tip {
  color: var(--vermilion) !important;
  font-size: var(--fontSmall) !important;
  margin: -0.75rem 0 1rem;
}
form .wpcf7-radio.formArende{
  display: flex;
  justify-content: center;
  border: 2px solid;
  padding: 0.5rem;
  border-radius: 0;
}

form .valid .wpcf7-response-output,
form .sent .wpcf7-response-output {
  border: 0 !important;
  color: var(--success) !important;
  font-weight: var(--fontWeightBold);
  margin: 1rem 0 0 !important;
  padding: 0 !important;
}
form .invalid .wpcf7-response-output {
  color: var(--error) !important;
  font-size: var(--fontSmall) !important;
}