.grecaptcha-badge { visibility: hidden; }
.google-recaptcha-message {
  font-size: 1.4rem;
}

.skjemastyle {
  --color-placeholder: #bbbbbb;
  --color-label: var(--color-primary);
  --color-borders: var(--color-text);
  --color-input-txt: var(--color-text);
  --color-choice-txt: var(--color-text); 
  --color-choice-box: var(--color-primary);
  --color-choice-box-hover: #f2f2f2;
  --color-errors: var(--color-primary);
  --color-submit-button: var(--color-primary);
  --border-radius-input: 0;
  --padding-input: 12px 0.7em;
  --fontsize-label: 1.6rem;
  --fontsize-input: inherit;  
  --fontsize-choice: 90%;
  --fontweight-label: 600;
  --fontweight-choice: 500;
  --gap-horizontal: 30px;
  --gap-vertical: 30px;
}

input[type=text],
input[type=email],
input[type=tel],
input[type=url],
input[type=search],
input[type=submit],
input[type=password]
input[type=select],
textarea {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  -o-appearance:none;
}

.skjemastyle *:focus {
}

.skjemastyle ::-webkit-input-placeholder {
   color: var(--color-placeholder);
}

.skjemastyle :-moz-placeholder { /* Firefox 18- */
   color: var(--color-placeholder);
}

.skjemastyle ::-moz-placeholder {  /* Firefox 19+ */
   color: var(--color-placeholder);
}

.skjemastyle :-ms-input-placeholder {  
    color: var(--color-placeholder);
} 

.freeform-row {
  display: flex;
  gap: var(--gap-horizontal);
}

.freeform-row .freeform-column {
  margin-bottom: var(--gap-vertical);
}

.skjemastyle label {
  display: block;
}

.freeform-label {
  font-size: var(--fontsize-label);  
  color: var(--color-label);
  margin-bottom: 0.4em;
  font-weight: var(--fontweight-label);
}

.freeform-row .freeform-column .freeform-label.freeform-required:after {
  content:"*";
  margin-left: 5px;
}

.freeform-row .freeform-column .freeform-input {
  width: 100%;
  display: block;
}

.skjemastyle input,
.skjemastyle textarea,
.skjemastyle select[multiple] {
  color: var(--color-input-txt);
  border: 1px solid var(--color-borders);
  border-radius: var(--border-radius-input);
  line-height: 1.3em;
  padding: var(--padding-input);
  font-size: var(--fontsize-input);
}

.freeform-row .freeform-column .freeform-instructions {
  margin: 0 0 5px;
  font-size: 15px;
  color: #ABA7A7;
}

.freeform-row .freeform-column.freeform-column-content-align-left {
  text-align:left
}
.freeform-row .freeform-column.freeform-column-content-align-left button:not(:first-of-type){
  margin-left: 5px
}
.freeform-row .freeform-column.freeform-column-content-align-center {
  text-align: center;
}
.freeform-row .freeform-column.freeform-column-content-align-center button:not(:first-of-type) {
  margin-left: 5px;
}
.freeform-row .freeform-column.freeform-column-content-align-right {
  text-align: right;
}
.freeform-row .freeform-column.freeform-column-content-align-right button:not(:first-of-type) {
  margin-left: 5px;
}
.freeform-row .freeform-column.freeform-column-content-align-spread button:first-child {
  float:left;
}
.freeform-row .freeform-column.freeform-column-content-align-spread button:last-child{
  float:right;
}

.freeform-row .freeform-column-1 { width:8.33333%; }
.freeform-row .freeform-column-2 { width:16.66667%; }
.freeform-row .freeform-column-3 { width:25%; }
.freeform-row .freeform-column-4 { width:33.33333%; }
.freeform-row .freeform-column-5 { width:41.66667%; }
.freeform-row .freeform-column-6 { width:50%; }
.freeform-row .freeform-column-7 { width:58.33333%; }
.freeform-row .freeform-column-8 { width:66.66667%; }
.freeform-row .freeform-column-9 { width:75%; }
.freeform-row .freeform-column-10 { width:83.33333%; }
.freeform-row .freeform-column-11 { width:91.66667%; }
.freeform-row .freeform-column-12 { width:100%; }

.skjemastyle .freeform-form-has-errors {
  list-style:none;
  background: var(--color-errors);
  color: #fff;
  padding: 20px;
  margin-bottom: 20px;
}

.skjemastyle .freeform-errors li {
  font-size: 16px;
  background: var(--color-errors);
  color: #fff !important;
  padding: 8px 15px;
  margin: 0;
  width: auto;
  display: inline-block;
}

/* ----- Popup-error */

.freeform-form-popup-errors {
  z-index: 9999;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.opacity-errors {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  opacity: 0.80;
  z-index: 900;
}

.error-popup-box {
  z-index: 1001;
  background: var(--color-errors);
  padding: 40px;
  width: 90%;
  max-width: 999px;
}

.error-popup-box p {
  color: #fff;
  margin-bottom: 40px;
  text-align: center;
}

.knapp.knapp-error {
  color: #fff;
  max-width: none;
  display: block;
  text-align: center;
  text-decoration: none;
  width: 60px;
  border: 2px solid #fff;
  margin: 0 auto !important;
  padding: 10px;
}

.hideerror {
  display: none;
}

/* ----- Select */

.skjemastyle .select-style {
    padding: 0;
    margin: 0;
    border: 1px solid var(--color-borders);
    width: 100%;
    max-width: 500px;
    overflow: hidden;
    background-color: #fff;
    background: #fff;
    position: relative;
}

.skjemastyle .select-style:after {
    top: 50%;
    right: 20px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(0, 0, 0, 0);
    border-top-color: var(--color-borders);
    border-width: 8px;
    margin-top: -4px;
    z-index: 100;
}

.skjemastyle .select-style select {
    font-size: 100%;
    color: #707070;
    line-height: 1.5em;
    padding: 12px 0.7em;
    width: 130%;
    border: none;
    box-shadow: none;
    background-color: transparent;
    background-image: none;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}

/* ----- Radiobuttons/Checkboxes */
.skjemastyle .radiocontainer,
.skjemastyle .checkboxcontainer {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-top: 6px;
  margin-bottom: 6px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: var(--color-choice-txt);
  font-size: var(--fontsize-choice);
}

.skjemastyle label.radiocontainer,
.skjemastyle label.checkboxcontainer {
  font-weight: var(--fontweight-choice);
}

/* Hide the browser's default radio button */
.skjemastyle .radiocontainer input,
.skjemastyle .checkboxcontainer input {
  position: fixed;
  opacity: 0;
  cursor: pointer;
}

.skjemastyle .checkboxcontainer input {
  height: 0;
  width: 0;
}

/* Create a custom radio button */
.skjemastyle .checkmark {
  position: absolute;
  top: 3px;
  left: 0;
  height: 24px;
  width: 24px;
  background-color: #fff;
  border: 1px solid var(--color-borders);
}

.skjemastyle .radiocontainer .checkmark {
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.skjemastyle .radiocontainer:hover input ~ .checkmark,
.skjemastyle .checkboxcontainer:hover input ~ .checkmark {
  background-color: var(--color-choice-box-hover);
}

/* When the radio button is checked, add a red background */
.skjemastyle .radiocontainer input:checked ~ .checkmark,
.skjemastyle .checkboxcontainer input:checked ~ .checkmark {
  background-color: var(--color-choice-box);
  border: 1px solid var(--color-choice-box)
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.skjemastyle .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.skjemastyle .radiocontainer input:checked ~ .checkmark:after,
.skjemastyle .checkboxcontainer input:checked ~ .checkmark:after {
  display: block;
}

/* Style the radio indicator (dot/circle) */
.skjemastyle .radiocontainer .checkmark:after {
  top: 7px;
  left: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}

/* Style the checkmark/indicator */
.skjemastyle .checkboxcontainer .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.radiocontainer input:focus + .checkmark,
.checkboxcontainer input:focus + .checkmark {
  box-shadow: 0 0 0 3px #95b2f5;
}

/* Submit-button */

.skjemastyle button {
  font-size: inherit;
  font-weight: 700;
  background-color: var(--color-submit-button);
  border: none;
  color: #fff;
  padding: 16px 32px;
  text-decoration: none;
  margin: 0;
  margin-top: 10px;
  cursor: pointer;
}

.skjemastyle button:hover {
  opacity: 0.8;
}

@media only screen and (max-width: 1279px) {
  
.skjemastyle .select-style {
    max-width: 100%;
}

.skjemastyle input,
.skjemastyle textarea,
.skjemastyle select[multiple] {
  padding: 12px 0.7em;
}

/* Radiobuttons */
.skjemastyle .radiocontainer {
  margin-top: 6px;
  margin-bottom: 6px;
}

/* Create a custom radio button */
.skjemastyle .checkmark {
  top: 1px;
}

}

@media only screen and (max-width: 1023px) {
  
.freeform-row {
  display: block;
}

.freeform-row .freeform-column {
  width: 100%;
  margin-bottom: 25px;
}

}