/*
=========================================================
FORM OBJECTS CSS
=========================================================
 * Innehåller kundanpassad styling av formulär,
 * inmatningsfält, knappar et.c. utanför Envision
 *
 * Copyright (C) Limepark AB.
 * https://limepark.se/licensvillkor
=========================================================*/
/* stylelint-disable no-duplicate-selectors */
/* stylelint-disable selector-type-no-unknown */


/*
---------------------------------------------------------
GENERELLA FORMULÄROBJEKT
--------------------------------------------------------- */

button {
  cursor: pointer;
  font-family: inherit;
}

textarea {
  font-family: inherit;
}

input,
textarea,
select,
.env-form-input {
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

input:not([type='submit']):focus,
textarea:focus,
select:focus,
.env-form-input:focus {
  border-color: #000 !important;
  box-shadow: 0 0 0 0.4rem rgb(0 160 230 / 50%);
  outline: none;
  z-index: 1;
}

/* Felmeddelanden */
.sv-formField [role=alert] {
  border: 1px solid #a94442;
  font-size: 16px;
  padding: 5px;
}

/* Inputfält för filer */

.sv-defaultFormTheme input[type=file]::file-selector-button {
  background-color: transparent;
  border: 1px solid var(--lp-font-color);
  border-radius: var(--lp-border-radius);
  font-size: var(--lp-font-size-small);
  padding: 0.4em 0.6em;
  font-weight: 300;
  margin-right: 0.5em;
  transition: var(--lp-transition-default);
}

.sv-defaultFormTheme input[type=file]::file-selector-button:hover {
  cursor: pointer;
  background-color: #dedede;
}


/*
---------------------------------------------------------
FIXAR/FÖRBÄTTRINGAR
---------------------------------------------------------*/

.sv-defaultFormTheme input[type=submit]::-moz-focus-inner {
  border: 0;
  /* fix för felaktig höjd i Firefox */
  padding: 0;
}

.sv-defaultFormTheme input[type=text],
.sv-defaultFormTheme input[type=email],
.sv-defaultFormTheme input[type=url],
.sv-defaultFormTheme input[type=tel],
.sv-defaultFormTheme input[type=number],
.sv-defaultFormTheme textarea,
.sv-defaultFormTheme select,
#simpliform input.form-control[type=text],
#simpliform input.form-control[type=email],
#simpliform input.form-control[type=url],
#simpliform input.form-control[type=tel],
#simpliform input.form-control[type=number] {
  box-shadow: none;
  height: auto;
  transition: none;
}

.sv-defaultFormTheme input[type=text],
.sv-defaultFormTheme input[type=email],
.sv-defaultFormTheme input[type=url],
.sv-defaultFormTheme input[type=tel],
.sv-defaultFormTheme input[type=number],
.sv-defaultFormTheme textarea,
#simpliform input.form-control[type=text],
#simpliform input.form-control[type=email],
#simpliform input.form-control[type=url],
#simpliform input.form-control[type=tel],
#simpliform input.form-control[type=number] {
  -webkit-appearance: none;
}

.sv-defaultFormTheme input[type=button],
.sv-defaultFormTheme input[type=submit],
.sv-defaultFormTheme input[type=reset] {
  border-style: solid;
  /* sätts för att undvika konstig default i Chrome */
  box-sizing: border-box;

  -webkit-appearance: none;
}


/* Fixar för Envision */
.env-form textarea {
  font-family: inherit;
}

.env-form-radio__fake {
  top: 2px;
}

[type=radio]:checked + label .env-form-radio__fake:before {
  border-color: #6892d5;
  top: 0;
}

[type=checkbox]:checked + label .env-checkbox__fake:after {
  border-bottom: 4px solid #fff;
  border-left: 4px solid #fff;
  height: 0.35em;
  width: 0.6em;
}


/*
---------------------------------------------------------
DEFAULT FORM THEME - INMATNINGSFÄLT
--------------------------------------------------------- */

.sv-defaultFormTheme input[type=text],
.sv-defaultFormTheme input[type=email],
.sv-defaultFormTheme input[type=url],
.sv-defaultFormTheme input[type=tel],
.sv-defaultFormTheme input[type=number],
.sv-defaultFormTheme textarea,
.sv-defaultFormTheme select,
.limepark-uppsala-vatten-calculator__field__input,
.limepark-uppsala-vatten-wcc__field__input,
#simpliform input.form-control[type=text],
#simpliform input.form-control[type=email],
#simpliform input.form-control[type=url],
#simpliform input.form-control[type=tel],
#simpliform input.form-control[type=number],
#simpliform input.form-control[type=search],
#simpliform textarea.form-control {
  background-color: #fff;
  border: 1px solid var(--lp-color-1);
  border-radius: 4px;
  font-size: 1.8rem;
  height: auto;
  line-height: 1.6 !important;
  /* Important skriver över SiteVision's styling */
  padding: 1rem 1.5rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

body #simpliform select.form-control {
  font-size: 1.8rem;
  height: auto;
  line-height: 1.6;
  padding: 1rem 1.5rem;
}

.sv-defaultFormTheme input[type=text]:hover,
.sv-defaultFormTheme input[type=email]:hover,
.sv-defaultFormTheme input[type=url]:hover,
.sv-defaultFormTheme input[type=tel]:hover,
.sv-defaultFormTheme input[type=number]:hover,
.sv-defaultFormTheme textarea:hover,
.sv-defaultFormTheme select:hover,
.limepark-uppsala-vatten-calculator__field__input:hover,
.limepark-uppsala-vatten-wcc__field__input:hover,
#simpliform input.form-control[type=text]:hover,
#simpliform input.form-control[type=email]:hover,
#simpliform input.form-control[type=url]:hover,
#simpliform input.form-control[type=tel]:hover,
#simpliform input.form-control[type=number]:hover {
  border-color: #3f4d09;
}

.sv-defaultFormTheme input[type=text]:focus,
.sv-defaultFormTheme input[type=email]:focus,
.sv-defaultFormTheme input[type=url]:focus,
.sv-defaultFormTheme input[type=tel]:focus,
.sv-defaultFormTheme input[type=number]:focus,
.sv-defaultFormTheme textarea:focus,
.sv-defaultFormTheme select:focus,
.limepark-uppsala-vatten-calculator__field__input:focus,
.limepark-uppsala-vatten-wcc__field__input:focus,
#simpliform input.form-control[type=text]:focus,
#simpliform input.form-control[type=email]:focus,
#simpliform input.form-control[type=url]:focus,
#simpliform input.form-control[type=tel]:focus,
#simpliform input.form-control[type=number]:focus {
  /*samma utseende vid musklick som vid tabbning */
  border-color: #000 !important;
  box-shadow: 0 0 0 0.4rem rgb(1 125 183 / 50%);
}


/*
---------------------------------------------------------
DEFAULT FORM THEME - KNAPPAR
--------------------------------------------------------- */

/*
---------------------------------------------------------
DEFAULT FORM THEME - KNAPPAR
--------------------------------------------------------- */

.sv-defaultFormTheme input[type=button],
.sv-defaultFormTheme input[type=submit],
.sv-defaultFormTheme input[type=reset],
.sv-limepark-uppsala-vatten-calculator button,
.limepark-uppsala-vatten-wcc__calculator__submit,
.limepark-uppsala-vatten-acc__calculator__button,
#simpliform .pagination-wrapper .btn,
#simpliform .pagination-wrapper .btn-success {
  background-color: var(--lp-color-1);
  border-color: var(--lp-color-1);
  border-radius: 4px;
  color: var(--lp-color-1-text);
  cursor: pointer;
  font-size: 1.8rem;
  line-height: 1.6;
  padding: 1rem 2rem;
}

.sv-defaultFormTheme input[type=button]:hover,
.sv-defaultFormTheme input[type=submit]:hover,
.sv-defaultFormTheme input[type=reset]:hover,
.sv-limepark-uppsala-vatten-calculator button:hover,
.limepark-uppsala-vatten-wcc__calculator__submit:hover,
.sv-defaultFormTheme input[type=button]:active,
.sv-defaultFormTheme input[type=submit]:active,
.sv-defaultFormTheme input[type=reset]:active .sv-limepark-uppsala-vatten-calculator button:active,
.limepark-uppsala-vatten-wcc__calculator__submit:active,
#simpliform .pagination-wrapper .btn:active,
#simpliform .pagination-wrapper .btn-success:active {
  background-color: var(--lp-color-1-dark);
  border-color: var(--lp-color-1-dark);
  color: var(--lp-color-1-text);
}

.sv-defaultFormTheme input[type=reset]:focus,
.sv-defaultFormTheme input[type=submit]:focus,
.sv-defaultFormTheme input[type=button]:focus,
.sv-limepark-uppsala-vatten-calculator button:focus,
.limepark-uppsala-vatten-wcc__calculator__submit:focus,
#simpliform .pagination-wrapper .btn:focus,
#simpliform .pagination-wrapper .btn-success:focus {
  background-color: var(--lp-color-1-dark);
  border-color: var(--lp-color-1-dark);
  color: var(--lp-color-1-text);
  /* samma utseende vid musklick som vid tabbning */
}

.sv-defaultFormTheme input[type=reset]:focus {
  outline: none;
}

/*
---------------------------------------------------------
Formulärmoduler i innehållsytor
--------------------------------------------------------- */
lime-form #simpliform,
.pagecontent .sv-form-portlet {
  background-color: var(--lp-form-background-color);
  border-radius: 1rem;
}

.pagecontent .sv-form-portlet {
  padding: 2rem;
}

.pagecontent .lp-expandable-content .sv-form-portlet {
  background-color: transparent;
  padding: 0;
}

/* Checkboxar och radioknappar*/


.pagecontent .sv-form-portlet input[type='checkbox'],
.pagecontent .sv-form-portlet input[type='radio'] {
  height: 1px;
  left: -10000px;
  overflow: hidden;
  position: absolute;
  top: auto;
  width: 1px;
}

/* Fokuserade checkbox + radioknapp */

.pagecontent .sv-form-portlet input[type='checkbox'] + label,
.pagecontent .sv-form-portlet input[type='radio'] + label {
  cursor: pointer;
  font-size: 1.5rem;
  font-weight: normal;
  line-height: 1.5;
  padding: 0.4em 0.6em 0.4em 2em;
  position: relative;
}

/* Fokuserade checkbox + radioknapp */

.pagecontent .sv-form-portlet input[type='checkbox']:focus + label:before,
.pagecontent .sv-form-portlet input[type='radio']:focus + label:before {
  box-shadow: 0 0 0 0.4rem rgb(1 125 183 / 50%);
}

/* Ruta/cirkel bakom checkbox + radioknapp */

.pagecontent .sv-form-portlet input[type='checkbox'] + label:before,
.pagecontent .sv-form-portlet input[type='radio'] + label:before {
  background-color: #fff;
  border: 1px solid var(--lp-color-1);
  content: '';
  height: 1.1em;
  left: 0.5rem;
  position: absolute;
  top: 0.3em;
  width: 1.1em;
}

.pagecontent .sv-form-portlet input[type='radio'] + label:before {
  border-radius: 50%;
}

/* Checkad checkbox + radioknapp */

.pagecontent .sv-form-portlet input[type='radio']:checked + label:before {
  background-color: var(--lp-color-1);
  box-shadow: inset 0 0 0 0.2em #fff;
}

.pagecontent .sv-form-portlet input[type='checkbox']:checked + label:after {
  background-color: var(--lp-color-1);
  content: '';
  display: block;
  height: 0.9em;
  left: calc(0.6rem + 0.1em);
  opacity: 1;
  position: absolute;
  top: 0.45em;
  transition: all 0.3s ease;
  width: 0.9em;
  z-index: 1;

  -webkit-clip-path: polygon(14% 38%, 0 53%, 45% 91%, 100% 24%, 85% 11%, 41% 61%);
  clip-path: polygon(14% 38%, 0 53%, 45% 91%, 100% 24%, 85% 11%, 41% 61%);
}



/* Asterisk */
/*
.pagecontent .sv-form-portlet .sv-field-title-container span[title*='Denna fråga är obligatorisk'] {
  display: none;
}

.pagecontent .sv-form-portlet .sv-field-title-container span[title*='Denna fråga är obligatorisk']+.sv-visuallyhidden {
  clip: initial;
  color: #ba1e21;
  font-weight: normal;
  height: auto;
  left: initial !important;
  overflow: initial;
  position: static !important;
  top: initial !important;
  width: auto;
}

.pagecontent .sv-form-portlet .sv-field-title-container span[title*='Denna fråga är obligatorisk']+.sv-visuallyhidden::before {
  background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D\'0%200%2026%2026\'%20xmlns%3D\'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg\'%20fill%3D\'%23ba1e21\'%3E%3Cpath%20%20d%3D%22M11.007%206.262c0%201.799-.015%203.271-.033%203.271-.018-.001-1.3-.729-2.849-1.62-2.093-1.202-2.829-1.606-2.866-1.57-.06.058-1.922%203.316-1.922%203.362%200%20.017%201.267.758%202.817%201.646%201.549.888%202.824%201.628%202.833%201.643.009.015-1.259.758-2.817%201.652-1.558.893-2.833%201.637-2.833%201.652%200%20.043%201.864%203.302%201.922%203.361.037.038.734-.343%202.866-1.57%201.549-.891%202.831-1.621%202.849-1.621.018-.001.033%201.471.033%203.27v3.272h3.986v-3.272c0-1.799.015-3.271.033-3.27.018%200%201.3.73%202.849%201.621%202.132%201.227%202.829%201.608%202.866%201.57.058-.059%201.922-3.318%201.922-3.361%200-.015-1.275-.759-2.833-1.652-1.558-.894-2.826-1.637-2.817-1.652.009-.015%201.284-.755%202.833-1.643%201.55-.888%202.817-1.629%202.817-1.647%200-.045-1.862-3.301-1.922-3.361-.037-.036-.781.372-2.866%201.57a177.065%20177.065%200%200%201-2.849%201.62c-.018%200-.033-1.472-.033-3.271V2.99h-3.986v3.272%22%2F%3E%3C%2Fsvg%3E');
  background-size: 100% 100%;
  content: '';
  display: inline-block;
  height: 1rem;
  margin-bottom: 0.3rem;
  width: 1rem;
}
*/
/* Samtycke */

.sv-formField .sv-form-consent {
  padding-left: 0;
}

.pagecontent .sv-form-portlet .sv-form-consent input[type='checkbox'] + label:before,
.pagecontent .sv-form-portlet .sv-form-consent input[type='radio'] + label:before {
  left: 0;
}

.pagecontent .sv-form-portlet .sv-form-consent input[type='checkbox']:checked + label:after {
  left: calc(0.1rem + 0.1em);
}

/* Orderfält */


.pagecontent .sv-form-orderfield > div:first-child {
  width: 100%;
}

.pagecontent .sv-form-orderfield > div:first-child {
  width: 100%;
}

.pagecontent .sv-form-orderfield legend + div {
  width: 100%;
}

.pagecontent .sv-form-orderfield table {
  width: 100%;
}

.pagecontent .sv-form-orderfield tr {
  align-items: center;
  display: flex;
  margin-bottom: 1rem;

  justify-content: space-between;
}

.pagecontent .sv-form-orderfield tr td:nth-child(1) {
  padding-right: 1rem;

  flex-grow: 1;
}

.pagecontent .sv-form-orderfield tr td:nth-child(2) {
  order: 1;
}

.pagecontent .sv-form-orderfield tr td:nth-child(3) {
  padding-right: 1rem;
}

.pagecontent .sv-form-orderfield > div:last-child {
  text-align: right;
}

.pagecontent .sv-form-orderfield > div:last-child > span {
  font-weight: bold;
}

/* Select datefields */

fieldset.sv-form-datefield div.sv-float-left + div.sv-float-left {
  margin-top: 0.5rem;
}

fieldset.sv-form-datefield div select {
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23000%22%20aria-hidden%3D%22true%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cpath%20d%3D%22M43.486%2011.979a1.5%201.5%200%200%200-1.047.46L24%2030.88%205.56%2012.439a1.5%201.5%200%200%200-1.076-.455%201.5%201.5%200%200%200-1.045%202.577l19.5%2019.5a1.5%201.5%200%200%200%202.122%200l19.5-19.5a1.5%201.5%200%200%200-1.075-2.582z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
  background-position: bottom 50% right 0.7rem;
  background-repeat: no-repeat;
  background-size: 11px 11px;
  color: var(--env-font-color);
  font-size: 1.5rem;
  padding: 0.7rem 2.5rem 0.7rem 1.1rem;

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/*Lime form*/

lime-form #simpliform .simpliform-content-wrapper {
  padding: 2rem 0.5rem;
}

lime-form #simpliform div[data-type='HtmlField'] {
  font-size: 1.5rem;
}

lime-form .label-wrap {
  margin-bottom: 0 !important;
}

lime-form #simpliform .pagination-wrapper {
  display: flex;
  padding: 3rem 1.5rem 3.5rem !important;

  flex-flow: row-reverse;
  justify-content: space-between;
}

lime-form #simpliform button.btn .fa-icon {
  /* display: none;*/
}

lime-form #simpliform .btn-default.helptext-toggle {
  background-color: transparent;
  border-color: transparent;
  color: #484848;
}

lime-form #simpliform a {
  color: var(--env-link-font-color);
  text-decoration: underline;
}

lime-form #simpliform h2 > span,
lime-form #simpliform h2 > strong > span {
  font-size: 2.4rem !important;
  /* Skriver över inline style */
}

lime-form #simpliform h3 > span,
lime-form #simpliform h3 > strong > span {
  font-size: 2rem !important;
  /* Skriver över inline style */
}

lime-form #simpliform h3,
lime-form #simpliform .h3 {
  padding-left: 1.5rem;
}

lime-form #simpliform div[class*='col'] h3 {
  padding-left: 0;
}

body lime-form #simpliform .date-picker-input {
  background: #fff !important;
  /* important skriver över simpli-forms egen important-regel kring ingen bakgrund på datumfält */
}

lime-form #simpliform .field-fastighetsadress {
  width: 100%;
}

lime-form #simpliform .checkbox input[type=checkbox] {
  margin-top: 0.4em;
}

lime-form #simpliform hr {
  border-top: 1px solid #000;
}


/* Ikon för felmeddelande i formulär */

.sv-signup-portlet .sv-form-field-message > span[role='alert']:before,
.sv-form-portlet .sv-form-field-message > span[role='alert']:before,
.sv-signup-portlet .sv-form-userattributefield span[role='alert']:before,
.sv-form-portlet .sv-form-userattributefield span[role='alert']:before {
  background-color: var(--env-ui-color-status-error-text);
  content: '';
  display: inline-block;
  height: 1.2em;
  margin-bottom: -4px;
  margin-right: 0.3em;
  width: 1.2em;

  -webkit-mask-image: var(--lp-icon-lp-warning);
  mask-image: var(--lp-icon-lp-warning);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/*
---------------------------------------------------------
DATUMFÄLT
--------------------------------------------------------- */

input[type='date'] {
  min-width: 0; /* Fix för Safari i mobil */
  width: -webkit-fill-available; /* Fix för Safari i mobil */
  max-width: 100%;
}

input[type='date']::-webkit-date-and-time-value {
  text-align: left;
}