/* SITEVISION DECORATIONS (Dekorationer) 
---------------------------------------------------------------------------- */

/* Title holder (Titelhållare)
---------------------------------------------------------------------------- */

.dv-decoration-title-holders_container {
  margin: 0rem 0 1.5rem 0;
}

.dv-decoration-title-holders_container h1,
.dv-decoration-title-holders_container h2,
.dv-decoration-title-holders_container h3 {
  font-family: "Noto Sans",sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 2rem;
  color: #000000;
  line-height: 1.3;
  margin: 0!important;
}

.dv-decoration-title-holders_container p {
  margin: 0!important;
}

.dv-decoration-title-holders_content {
  /*position: relative;*/
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  text-align: left;
}

.dv-decoration-title-holders_content:before,
.dv-decoration-title-holders_content:after {
  content: '';
  border-top: 2px solid #858585;
  margin: 0 2rem 0 0;
  flex: 1 0 20px;
}

.dv-decoration-title-holders_content:after {
  margin: 0 0 0 2rem;
}


/* Boxes
---------------------------------------------------------------------------- */

.sv-decoration-info-box,
.sv-decoration-standard-box,
.sv-decoration-warning-box {
    background-color: var(--dv-decoration-box-background-color);
    border-radius: var(--dv-decoration-box-border-radius, var(--env-border-radius));
    color: var(--dv-decoration-box-color);
    margin-bottom: var(--dv-decoration-box-spacing, var(--env-spacing-medium));
    margin-top: var(--dv-decoration-box-spacing, var(--env-spacing-medium));
    padding: var(--dv-decoration-box-padding, var(--env-spacing-medium));
    padding-left: calc(var(--dv-decoration-box-padding, var(--env-spacing-medium)) + 1em + var(--env-spacing-small));
}

.sv-decoration-info-box::before,
.sv-decoration-warning-box::before {
    float: left;
    font: var(--fa-font-solid);
    margin-left: calc(-1em - var(--env-spacing-small));
    position: relative;
    top: 0.15rem;
}

.sv-decoration-info-box .normal,
.sv-decoration-info-box .env-text,
.sv-decoration-info-box .subheading,
.sv-decoration-info-box .subheading3,
.sv-decoration-info-box .normal a,
.sv-decoration-standard-box .normal,
.sv-decoration-standard-box .env-text,
.sv-decoration-standard-box .subheading,
.sv-decoration-standard-box .subheading3,
.sv-decoration-standard-box .normal a,
.sv-decoration-warning-box .normal,
.sv-decoration-warning-box .env-text,
.sv-decoration-warning-box .subheading,
.sv-decoration-warning-box .subheading3,
.sv-decoration-warning-box .normal a {
    color: inherit;
}
.sv-decoration-info-box textarea.normal {
   color: #555;
}

.sv-decoration-info-box .normal a:focus-visible,
.sv-decoration-standard-box .normal a:focus-visible,
.sv-decoration-warning-box .normal a:focus-visible {
    outline-color: currentColor;
}

.sv-decoration-info-box .sv-text-portlet-content :first-child,
.sv-decoration-standard-box .sv-text-portlet-content :first-child,
.sv-decoration-warning-box .sv-text-portlet-content :first-child {
    margin-top: 0;
}

.sv-decoration-info-box .sv-text-portlet-content :last-child,
.sv-decoration-standard-box .sv-text-portlet-content :last-child,
.sv-decoration-warning-box .sv-text-portlet-content :last-child {
    margin-bottom: 0;
}

/* Info box */

.sv-decoration-info-box {
    --dv-decoration-box-background-color: var(--dv-decoration-info-box-background-color, var(--dv-color-blue));
    --dv-decoration-box-color: var(--dv-decoration-info-box-color, var(--dv-color-text-white));
}

.sv-decoration-info-box::before {
    content: "\f05a";
}

/* Standard box */

.sv-decoration-standard-box {
  --dv-decoration-box-background-color: var(--dv-decoration-standard-box-background-color, var(--dv-color-blue));
  --dv-decoration-box-color: var(--dv-decoration-standard-box-color, var(--dv-color-text-white));

  padding-left: var(--dv-decoration-box-padding, var(--env-spacing-medium));
}

/* Warning box */

.sv-decoration-warning-box {
    --dv-decoration-box-background-color: var(--dv-decoration-warning-box-background-color, var(--dv-color-red));
    --dv-decoration-box-color: var(--dv-decoration-warning-box-color, var(--dv-color-text-white));
}

.sv-decoration-warning-box::before {
    content: "\f071";
}

/* Puffhållare 2 kolumner  
---------------------------------------------------------------------------- */

/* Container */
.dv-card-container-col-2 {
  box-sizing: border-box;
  margin-top: 0rem;
}

/* Row */
.dv-card-container-col-2 > div {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -1rem;
}

/* Cols */
.dv-card-container-col-2 > div > div {
  display: flex;
  width: 100%;
  padding: 0 1rem;
  flex: 0 0 auto;
  /*height:100%;*/
}



/* Small devices (phones, 576px and up) */
@media (min-width: 576px) {
  .dv-card-container-col-2 > div > div {
      width: 50%;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .dv-card-container-col-2 > div > div {
      width: 50%;
  }   
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .dv-card-container-col-2 > div > div {
      width: 50%;
  }
}

/* Fix for outer DIV in WebApp*/
.dv-card-container-col-2 > div > div > div[data-cid],
.dv-card-container-col-2 > div > div > div:not(:empty) {
  display: flex;
  flex: 0 0 auto;
  width: 100%;
}

/* Puffhållare 3 kolumner   
---------------------------------------------------------------------------- */

/* Container */
.dv-card-container-col-3 {
  box-sizing: border-box;
  margin-top: 0rem;
}

/* Row */
.dv-card-container-col-3 > div {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -1rem;
}

/* Cols */
.dv-card-container-col-3 > div > div {
  display: flex;
  width: 100%;
  padding: 0 1rem ;
  box-sizing: border-box;
}

/* Small devices (phones, 576px and up) */
@media (min-width: 576px) {
  .dv-card-container-col-3 > div > div {
      width: 50%;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .dv-card-container-col-3 > div > div {
      width: 33.333333%;
  }   
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .dv-card-container-col-3 > div > div {
      width: 33.333333%;
  }
}

/* Fix for outer DIV in WebApp*/
.dv-card-container-col-3 > div > div > div[data-cid],
.dv-card-container-col-3 > div > div > div:not(:empty) {
  display: flex;
  flex: 0 0 auto;
  width: 100%;
}

/* Puffhållare 4 kolumner   
---------------------------------------------------------------------------- */

/* Container */
.dv-card-container-col-4 {
  box-sizing: border-box;
  margin-top: 0rem;
}

/* Row */
.dv-card-container-col-4 > div {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -1rem;
}

/* Cols */
.dv-card-container-col-4 > div > div {
  display: flex;
  width: 100%;
  padding: 0 1rem ;
  box-sizing: border-box;
}

/* Small devices (phones, 576px and up) */
@media (min-width: 576px) {
  .dv-card-container-col-4 > div > div {
      width: 50%;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .dv-card-container-col-4 > div > div {
      width: 33.333333%;
  }   
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .dv-card-container-col-4 > div > div {
      width: 25%;
  }
}

/* Fix for outer DIV in WebApp*/
.dv-card-container-col-4 > div > div > div[data-cid],
.dv-card-container-col-4 > div > div > div:not(:empty) {
  display: flex;
  flex: 0 0 auto;
  width: 100%;
}