/******************************************************

CSN Formulär

Styling för formulärelement och knappar.

******************************************************/

/******************************************************
Sökfält
******************************************************/
.csn-formular-sok {
  position: relative;
}

.csn-formular-soklabel {
  position: absolute;
  top: -999px;
}
/*Snabbfix för formulär textfält Pressmeddelanden, Rapporter*/
input[type="text"].csn-formular-sokfalt,
input[type="text"].csn-formular-textfalt {
  width: 100%;
  height: 3rem;
  padding: 0 56px 0 0.75rem;
  border: 1px solid #979797;
  font-size: 1rem;
  box-sizing: border-box;
  border-radius: 4px;
  color: #333333;
  background: #fff;
}

.sv-searchform-portlet input[type="text"].csn-formular-sokfalt {
  border: 0;
}

.sv-searchform-portlet input[type="text"].csn-formular-sokfalt::-ms-clear {
  display: none;
}

.csn-formular-sok .csn-formular-sokknapp {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 60px;
  height: 42px;
  border: 0;
  border-radius: 0.25rem;
  box-sizing: border-box;
  /*padding: 7px 8px;*/
  -webkit-appearance: none;
  color: #000;
  background: #eaeaea;
}

.csn-formular-sok .csn-formular-rensaknapp:hover {
  opacity: 0.8;
}

.csn-formular-sok .csn-formular-rensaknapp:focus {
  opacity: 0.8;
}

.csn-formular-sok .csn-formular-rensaknapp {
  display: none;
  position: absolute;
  top: 3px;
  right: 70px;
  opacity: 0.7;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 0.25rem;
  box-sizing: border-box;
  /* padding: 7px 8px; */
  -webkit-appearance: none;
  cursor: pointer;
  color: transparent;
  background-color: #fff;
  background-image: url("/images/18.2098c27216269538309df5/ic_close_black_24px.svg");
  background-size: 28px 28px;
  background-repeat: no-repeat;
  background-position: center;
}

.csn-formular-sok .csn-formular-rensaknapp--synlig {
  display: block;
}

.csn-formular-sokfalt::-webkit-input-placeholder {
  opacity: 1;
  color: #888;
  text-transform: none;
  font-weight: normal;
}
.csn-formular-sokfalt:-moz-placeholder {
  opacity: 1;
  color: #888;
  text-transform: none;
  font-weight: normal;
}
.csn-formular-sokfalt::-moz-placeholder {
  opacity: 1;
  color: #888;
  text-transform: none;
  font-weight: normal;
}
.csn-formular-sokfalt:-ms-input-placeholder {
  opacity: 1;
  color: #888;
  text-transform: none;
  font-weight: normal;
}

.csn-sidfot-sok .csn-formular-sokfalt::-webkit-input-placeholder {
  opacity: 1;
  color: #344546;
  text-transform: none;
}
.csn-sidfot-sok .csn-formular-sokfalt:-moz-placeholder {
  opacity: 1;
  color: #344546;
  text-transform: none;
}
.csn-sidfot-sok .csn-formular-sokfalt::-moz-placeholder {
  opacity: 1;
  color: #344546;
  text-transform: none;
}
.csn-sidfot-sok .csn-formular-sokfalt:-ms-input-placeholder {
  opacity: 1;
  color: #344546;
  text-transform: none;
}

.pagecontent .csn-formular-sokfalt::-webkit-input-placeholder {
  opacity: 1;
  color: #333;
  text-transform: none;
}
.pagecontent .csn-formular-sokfalt:-moz-placeholder {
  opacity: 1;
  color: #333;
  text-transform: none;
}
.pagecontent .csn-formular-sokfalt::-moz-placeholder {
  opacity: 1;
  color: #333;
  text-transform: none;
}
.pagecontent .csn-formular-sokfalt:-ms-input-placeholder {
  opacity: 1;
  color: #333;
  text-transform: none;
}

/******************************************************
CSN knappar - Nya generella knappar
******************************************************/
.csn-knapp-container-vertical .csn-knapp {
  margin-top: 0.5em;
}

.csn-knapp-container-vertical .csn-knapp:first-of-type {
  margin-top: 0;
}

.csn-knapp-container-horisontal {
  overflow: hidden;
}

.csn-knapp-container-horisontal .csn-knapp {
  float: left;
  margin-right: 0.5em;
}

.csn-knapp-container-horisontal .csn-knapp:last-child {
  margin-right: 0;
}

.csn-knapp-container-horisontal.csn-toppmeny .csn-knapp {
  float: right;
  margin-left: 0.5em !important;
  margin-right: 0 !important;
}

.csn-knapp-container-vertical .csn-knapp:first-of-type {
  margin-left: 0;
}

.sv-form-portlet div.sv-defaultFormTheme input[type="button"],
.sv-form-portlet div.sv-defaultFormTheme input[type="submit"],
.sv-form-portlet div.sv-defaultFormTheme input[type="reset"] {
  font-size: 1rem;
  border: 0;
  background-color: #3c1e5f;
  color: #fff;
  padding: 12px 1rem;
  line-height: 1.5;
}

.csn-knapp {
  display: block;
  color: #000;
  background: #ccc;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  padding: 12px 1rem;
  border: none;
  cursor: pointer;
  text-decoration: none;
  font-family: -apple-system, San Francisco, Segoe UI, Roboto, Helvetica Neue,
    system, Arial, sans-serif;
  font-size: 16px;
}

.csn-knapp:active {
  opacity: 0.8;
}

.csn-knapp span {
  border-bottom: 1px solid;
  padding-bottom: 1px;
}

.csn-knapp--stang:before {
  content: "";
  background: url("/images/18.6f9e8e215890cf4d214220/ic_close_white_24px.svg");
  background-size: 24px 24px;
  width: 24px;
  height: 24px;
  float: right;
  margin-right: -7px;
}

.csn-knapp--gul {
  background: #ffd164;
}

.csn-knapp--rod {
  background: #e4022d;
  color: #fff;
}

.csn-knapp--rod-alt {
  background: #ee7c7d;
}

.csn-knapp--vinrod {
  background: #780a5a;
  color: #fff;
}

.csn-knapp--turkos {
  background: #75c5c9;
  color: #333;
}

.csn-knapp--lila {
  background: #3c1e5f;
  color: #fff;
}

.csn-knapp--lila-alt {
  background: #6a4e86;
  color: #fff;
}

.csn-knapp--ikon {
  padding: 12px;
}

.csn-mobilmeny-text {
  margin-top: 2em;
  font-size: 1em;
  color: #d9d5de;
}

.csn-knapp--more > div {
  height: 24px;
  width: 8px;
  background: url("/images/18.3dd372ef161455237a99c5/ic_more_vert_white_24px.svg")
    no-repeat;
  background-position: center center;
}

/******************************************************
CSN knappar - Standard
******************************************************/
.csn-knapp-rod,
.csn-knapp-rod.ikon {
  display: block;
  color: #fff;
  background: #e4022d;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  padding: 0.625rem 1rem;
  border: none;
  cursor: pointer;
}

.csn-knapp-rod:active {
  opacity: 0.8;
}

.csn-knapp-rod.ikon:before {
  vertical-align: middle;
  display: inline-block;
  content: "";
  margin-right: 0.5rem;
  line-height: 1.5;
  background-size: 17px 17px;
  width: 17px;
  height: 17px;
  margin-top: -2px;
}

.csn-knapp-rod.fullbredd {
  width: 100%;
}

.csn-knapp--gron {
  background: #5ea728;
}

.csn-knapp--gra {
  background: #777;
}
.csn-blankett {
  background-color: #75c5c9;
}

/******************************************************
CSN knappar - Etjänster
******************************************************/

.csn-form-buttons {
  overflow: hidden;
}

.csn-form-buttons > button,
.csn-form-buttons > input[type="submit"],
.csn-form-buttons > input[type="button"] {
  float: left;
  margin-left: 0.5em;
}

.csn-form-buttons > button:first-child,
.csn-form-buttons > input[type="submit"]:first-child,
.csn-form-buttons > input[type="button"]:first-child {
  margin-left: 0;
}

.csn-knapp-etjanst {
  position: relative;
  display: block;
  color: #222;
  padding: 0.7rem 1.5rem 0.5rem 1rem;
  text-align: left;
  font-size: 1rem;
  line-height: 1.6;
  text-decoration: none;
  max-width: 310px;
  cursor: pointer;
  border: none;
  border-right: 1px solid rgba(0, 0, 0, 0.12);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.csn-knapp-etjanst:active {
  opacity: 0.8;
}

.csn-knapp-etjanst > span {
  display: inline-block;
  margin-right: 2.625rem;
}

.csn-knapp-etjanst > .icon {
  position: absolute;
  top: 50%;
  margin-top: -12px;
  right: 1rem;
  vertical-align: middle;
  display: inline;
  content: "";
  background-repeat: no-repeat;
  background-size: 24px 24px;
  min-width: 24px;
  min-height: 24px;
}

.csn-knapp-etjanst .icon.demo {
  background: url("ic_face_black_24dp_1x.png");
}

.csn-knapp-etjanst.rod {
  background: #ffd164;
  color: #333;
}

.csn-knapp-etjanst.bla {
  background: #75c5c9;
  color: #fff;
  width: 100%;
}

/* ikoner för csn knapp */

.csn-knapp-rod.ikon.lock_outline:before {
  background-image: url("/images/18.448c6fa015890d2c81f1cc/ic_lock_outline_white_24px.svg");
}

.csn-knapp-rod.ikon.alarm:before {
  background-image: url("/images/18.448c6fa015890d2c81f1cb/ic_alarm_white_24px.svg");
}

.csn-knapp-rod.ikon.user:before {
  background-image: url("/images/18.448c6fa015890d2c81f355/account-circle.svg");
}

.csn-knapp-rod.ikon.languages:before {
  background-image: url("/images/18.448c6fa015890d2c81f357/icon-language.svg");
}

.csn-knapp-rod.ikon.kundservice:before {
  background-image: url("/images/18.448c6fa015890d2c81f356/icon-help.svg");
}

.csn-knapp-rod.ikon.mer:before {
  background-image: url("/images/18.6f9e8e215890cf4d21513/ic_more_vert_white_24px.svg");
}

.csn-knapp-rod.ikon.mer.active:before {
  background-image: url("/images/18.6f9e8e215890cf4d21514/ic_more_vert_yellow_24px.svg");
}

.csn-knapp-rod.ikon.mer.demo:before {
  background-image: url("ic_face_black_24dp_1x.png");
}
.csn-blankett .icon.blankett {
  background: url("/images/18.2bc92e1f15a2288a5b615f2/ic_document_black_24px.svg");
  opacity: 0.7;
}

/* ikoner för e-tjänst knapp */

.csn-knapp-etjanst .icon.lock_outline {
  background: url("/images/18.2bc92e1f15a2288a5b669/ic_lock_outline_black_24px.svg");
  opacity: 0.7;
}

.csn-knapp-etjanst .icon.note {
  background: url("/images/18.6f9e8e215890cf4d2150f/ic_note_white_24px.svg");
  -ms-transform: rotate(-90deg); /* IE 9 */
  -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
  transform: rotate(-90deg);
}

/******************************************************
Temporär Feedback Knapp
******************************************************/
.csn-knapp-feedback {
  vertical-align: middle;
  display: none;
  font-family: arial;
  color: #fff;
  background: #7bc7a3;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  height: 2.5rem;
  padding: 0 1rem;
  border: none;
  cursor: pointer;
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 99;
}

.csn-knapp-feedback:active,
.csn-knapp-feedback:hover {
  background: #83d4ae;
}

.csn-knapp-feedback.moved {
  position: absolute;
  top: -20px;
  bottom: initial;
}

/* 
.csn-knapp-feedback:before {
	background-image: url('/images/18.6f9e8e215890cf4d214ae/1480670465224/ic_mood_white_24px.svg');
	vertical-align: middle;
	display: inline-block;
	content: '';
	background-size: 16px 16px;
	width: 16px;
	height: 16px;
	margin-right: 0.5rem;
	line-height: 1.5;
}
*/

/******************************************************
CSN Formulär
******************************************************/
input,
textarea {
  display: inline-block;
}
/*********************************************************Fyll på med klasser för sök, prenumerera, nyheter form
input[type="text"],
input[type="password"],
select,
textarea,*/
.csn-knapp,
.csn-sidmeny a {
  border-radius: 4px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
/*********************************************************Fyll på med klasser för sök, prenumerera, nyheter form

input[type="text"],
input[type="password"],
select,
textarea {
	width: 100%;
	height: 3rem;
	padding: 0 0.75rem;
	border: 1px solid #979797;
	font-size: 1rem;
	/*font-weight: 700;*/
/*box-sizing: border-box;
}*/
/*********************************************************Fyll på med klasser för sök, prenumerera, nyheter form

textarea {
	min-height: 9.375rem;
	padding: 0.5rem;
}*/

::-webkit-input-placeholder {
  font-weight: normal;
}
:-moz-placeholder {
  font-weight: normal;
} /* Firefox 18- */
::-moz-placeholder {
  font-weight: normal;
} /* Firefox 19+ */
:-ms-input-placeholder {
  font-weight: normal;
}

.csn-input-lista {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
}

/******************************************************
CSN Formulär Labels
******************************************************/
/*********************************************************
Fyll på med klasser för sök, prenumerera, nyheter form
*/

/*
.env-form-element > label {
   display: inline-block;
   margin-bottom: 0.5rem;
}
*/

input[type="checkbox"],
input[type="checkbox"] + label,
input[type="radio"],
input[type="radio"] + label {
  cursor: pointer;
}

.csn-label-checkbox,
.csn-label-radio,
.csn-label-select,
.csn-label-input {
  font-size: 1rem;
  line-height: 1.5;
  font-weight: normal;
  color: inherit;
}

.csn-label-select,
.csn-label-input {
  font-weight: 700;
}

.csn-label-input-child-block {
  display: block;
  margin-top: -0.5rem;
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.5;
  color: #979797;
}

.csn-label-input-child-inline {
  display: inline-block;
  margin-left: 0.25rem;
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.5;
  color: #979797;
}

.csn-label-input-child-inline:before {
  content: "- ";
}

/******************************************************
CSN Formulär Felmeddelande
******************************************************/
.csn-formular-felmeddelande {
  padding-left: 1rem;
  border-left: 2px solid red;
  color: red;
}

.csn-formular-felmeddelande input,
.csn-formular-felmeddelande select {
  border: 2px solid red;
  color: red;
}

.csn-formular-felmeddelande-label {
  display: block;
  margin-top: 8px;
  margin-bottom: 0;
  font-weight: bold;
}

/******************************************************
Dölj submittknapp i formulär med action #
******************************************************/
form[action="#"] input[type="submit"] {
  display: none;
}