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


/*
---------------------------------------------------------
ÅTERSTÄLLNINGAR
---------------------------------------------------------*/

/* Återställer plattformspecifik styling */
div .env-form-input,
.pagecontent input[type=text],
.pagecontent input[type=email],
.pagecontent input[type=url],
.pagecontent input[type=tel],
.pagecontent input[type=number],
.pagecontent input[type=password],
.pagecontent textarea {
  -webkit-appearance: none;
}

button,
.pagecontent input[type='button'],
.pagecontent input[type='submit'],
.pagecontent input[type='reset'] {
  -webkit-appearance: none;
}


/* Återställer SiteVision's styling */
div .env-form-input {
  border-radius: 0;
  transition: none;
}

.pagecontent input[type=text],
.pagecontent input[type=email],
.pagecontent input[type=url],
.pagecontent input[type=tel],
.pagecontent input[type=number],
.pagecontent input[type=password],
.pagecontent input[type=date],
.pagecontent input[type=search],
.pagecontent textarea,
.pagecontent select {
  border-radius: 0;
  box-shadow: none;
  height: auto;
  transition: none;
}

.env-button {
  border-radius: 0;
  white-space: normal;
}

.env-button:focus {
  box-shadow: none;
}

.pagecontent input[type=button],
.pagecontent input[type=submit],
.pagecontent input[type=reset] {
  border-radius: 0;
  box-sizing: border-box;
}

div [type=checkbox]:focus + label .env-checkbox__fake {
  box-shadow: none;
}


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

.pagecontent input[type=text],
.pagecontent input[type=email],
.pagecontent input[type=url],
.pagecontent input[type=tel],
.pagecontent input[type=number],
.pagecontent input[type=password],
.pagecontent input[type=date],
.pagecontent input[type=search],
.pagecontent textarea,
.pagecontent select {
  box-sizing: border-box;
}

/* Ger inputfält samma textfärg som body */
div .env-form-input {
  color: inherit;
}

/* Trevligare vald checkbox */
div [type=checkbox]:checked + label .env-checkbox__fake:after {
  border-bottom-width: 3px;
  border-left-width: 3px;
  height: 0.3em;
  top: 43%;
  width: 0.675em;
}

/* Tydligare tabbning av checkboxar och radioknappar */
div [type=radio]:focus + label .env-form-radio__label,
div [type=checkbox]:focus + label .env-checkbox__label {
  text-decoration: underline;
}

div [type=checkbox]:hover + label span {
  cursor: pointer;
}


/* Fixar */
button,
input[type='button'],
input[type='submit'],
input[type='reset'] {
  cursor: pointer;
}

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

button::-moz-focus-inner,
.pagecontent input[type=button]::-moz-focus-inner {
  border: 0;
  padding: 0;
}


/*
---------------------------------------------------------
TYPSNITT
--------------------------------------------------------- */

div .env-form,
div .env-form-input,
div .env-form-multiple-select select[multiple] > option,
div .env-button,
.pagecontent button,
.pagecontent input[type=button],
.pagecontent input[type=submit],
.pagecontent input[type=reset] {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
}


/*
---------------------------------------------------------
STORLEK OCH FORM
--------------------------------------------------------- */

/* Inmatningsfält */
div .env-form-input,
.pagecontent input[type=text],
.pagecontent input[type=email],
.pagecontent input[type=url],
.pagecontent input[type=tel],
.pagecontent input[type=number],
.pagecontent input[type=password],
.pagecontent input[type=date],
.pagecontent input[type=search],
.pagecontent textarea,
.pagecontent select {
  border-radius: 0.25em;
  font-size: 1em;
  line-height: 1.4 !important; /* important skriver över SiteVision's styling */
  padding: 0.5em;
}


/* Knappar */
div .env-button,
.pagecontent button,
.pagecontent input[type=button],
.pagecontent input[type=submit],
.pagecontent input[type=reset] {
  border-radius: 0.2em;
  font-size: 1em;
  line-height: 1.4;
  padding: 0.5em 1em;
}

/* Större knapp */
div .env-button--large {
  font-size: 1.111em;
  padding: 0.6501em 2em;
}

/* Mindre knapp */
div .env-button--small {
  font-size: 0.889em;
  line-height: 1.4;
  padding: 0.5em 1em;
}




/*
---------------------------------------------------------
FÄRG
--------------------------------------------------------- */

/* Inmatningsfält */
div .env-form-input,
.pagecontent input[type=text],
.pagecontent input[type=email],
.pagecontent input[type=url],
.pagecontent input[type=tel],
.pagecontent input[type=number],
.pagecontent input[type=password],
.pagecontent input[type=date],
.pagecontent input[type=search],
.pagecontent textarea,
.pagecontent select {
  background-color: #fff;
  border: 1px solid #ccc;
}

div .env-form-input:hover,
.pagecontent input[type=text]:hover,
.pagecontent input[type=email]:hover,
.pagecontent input[type=url]:hover,
.pagecontent input[type=tel]:hover,
.pagecontent input[type=number]:hover,
.pagecontent input[type=password]:hover,
.pagecontent input[type=date]:hover,
.pagecontent input[type=search]:hover,
.pagecontent textarea:hover,
.pagecontent select:hover {
  border-color: #aaa;
}

div .env-form-input:focus,
div [type=checkbox]:focus + label .env-checkbox__fake,
.pagecontent input[type=text]:focus,
.pagecontent input[type=email]:focus,
.pagecontent input[type=url]:focus,
.pagecontent input[type=tel]:focus,
.pagecontent input[type=number]:focus,
.pagecontent input[type=password]:focus,
.pagecontent input[type=date]:focus,
.pagecontent input[type=search]:focus,
.pagecontent textarea:focus,
.pagecontent select:focus {
  border-color: #666;
  box-shadow: none;
  /* samma utseende vid musklick som vid tabbning */
  outline: none;
}


/* Flerval */
div .env-form-multiple-select option:hover {
  background: #f2f2f2 linear-gradient(0deg, #f2f2f2 0%, #f2f2f2 100%);
}

div .env-form-multiple-select option:checked {
  background: #d9d9d9 linear-gradient(0deg, #d9d9d9 0%, #d9d9d9 100%);
}

div .env-form-multiple-select select:focus option:checked {
  background: #393939 linear-gradient(0deg, #393939 0%, #393939 100%);
}


/* Vald checkbox */
div [type=checkbox]:checked + label .env-checkbox__fake {
  background-color: #393939;
}

/* Vald radiobutton */
div [type=radio]:checked + label .env-form-radio__fake:before {
  border-color: #393939;
}


/* Knappar */
/* Fall back */
div .env-button {
  background-color: #f2f2f2;
  border-color: #f2f2f2;
  color: inherit;
}

div .env-button:active,
div .env-button:hover {
  background-color: #d9d9d9;
  box-shadow: none;
}

div .env-button:focus {
  background-color: #d9d9d9;
  border-color: #d9d9d9;
}

/* Primär knapp */
div .env-button--primary,
.pagecontent button,
.pagecontent input[type=button],
.pagecontent input[type=submit],
.pagecontent input[type=reset] {
  background-color: #393939;
  border-color: #393939;
  color: #fff;
}

div .env-button--primary:active,
div .env-button--primary:hover,
.pagecontent button:active,
.pagecontent button:hover,
.pagecontent input[type=button]:active,
.pagecontent input[type=button]:hover,
.pagecontent input[type=submit]:active,
.pagecontent input[type=submit]:hover,
.pagecontent input[type=reset]:active,
.pagecontent input[type=reset]:hover {
  background-color: #444;
  border-color: #444;
  color: #fff;
}

div .env-button--primary:focus,
.pagecontent button:focus,
.pagecontent input[type=button]:focus,
.pagecontent input[type=submit]:focus,
.pagecontent input[type=reset]:focus {
  background-color: #222;
  border-color: #222;
  color: #fff;
  /* samma utseende vid musklick som vid tabbning */
  outline: none;
}


/*
---------------------------------------------------------
ENVISION - FLIKAR
--------------------------------------------------------- */

div .env-tabs__nav--border-bottom {
  border-color: #393939;
}

div .env-tabs__link--active {
  background-color: #393939;
  color: #fff;
}

div .env-tabs__link:hover {
  background-color: #444;
  color: #fff;
}

/* Skriver över SiteVision's styling */
div .env-tabs__link:focus {
  outline: 3px solid #000;
}

/*
---------------------------------------------------------
YOUTUBE IFRAME
--------------------------------------------------------- */

.sv-limepark-webapp-common-info .sv-youtube-portlet > iframe {
  position: initial;
  width: 100%;
}