body {
  font-family: var(--font_family);
  color: var(--wl_txt) !important;
}

h1 {
  font-family: var(--font_family);
  color: var(--wl_h1) !important;
}

h2 {
  font-family: var(--font_family);
  color: var(--wl_h2) !important;
}

h3 {
  font-family: var(--font_family);
  color: var(--wl_h3) !important;
}

h4 {
  font-family: var(--font_family);
  color: var(--wl_h4) !important;
}

a,
.a,
p,
.p,
.page_section p,
.section-diagonal-left p,
.section-diagonal-right p,
p.form-text span {
  font-family: var(--font_family);
}

a.link {
  color: var(--wl_link);
}
a.linknotuppercase {
  color: var(--wl_link);
}

a.link:hover {
  color: var(--wl_link_hover);
}

.smallText {
  color: var(--wl_small_txt) !important;
}

.btn-primary,
.btn-primary:focus,
.button1,
.button1:focus,
.btn.button1,
.btn.button1:focus {
  color: var(--wl_btn_primary_txt) !important;
  background-color: var(--wl_btn_primary_background) !important;
  transition:none !important;
}

.btn-primary:active,
.btn-primary:hover,
.btn-primary:active:hover,
.btn-primary:active:focus,
.btn-primary:active.focus,
.btn-primary.active:hover,
.btn-primary.active:focus,
.btn-primary.active.focus,
.btn.button1:active,
.btn.button1:hover,
.btn.button1:active:hover,
.btn.button1:active:focus,
.btn.button1:active.focus,
.btn.button1.active:hover,
.btn.button1.active:focus,
.btn.button1.active.focus,
.button1:active,
.button1:hover,
.button1:active:hover,
.button1:active:focus,
.button1:active.focus,
.button1.active:hover,
.button1.active:focus,
.button1.active.focus {
  color: var(--wl_btn_primary_txt_hover) !important;
  background-color: var(--wl_btn_primary_background_hover) !important;
}

.btn-primary:disabled {
  color: var(--wl_btn_primary_txt);
  background-color: var(--wl_btn_primary_background);
}

.btn-secondary,
.btn-secondary:focus {
  color: var(--wl_btn_secondary_txt);
  background-color: transparent;
  border: solid 1px var(--wl_btn_secondary_txt);
}

.btn-secondary:active,
.btn-secondary:hover,
.btn-secondary:active:hover,
.btn-secondary:active:focus,
.btn-secondary:active.focus,
.btn-secondary.active:hover,
.btn-secondary.active:focus,
.btn-secondary.active.focus,
.btn.button2:active,
.btn.button2:hover,
.btn.button2:active:hover,
.btn.button2:active:focus,
.btn.button2:active.focus,
.btn.button2.active:hover,
.btn.button2.active:focus,
.btn.button2.active.focus,
.button2:active,
.button2:hover,
.button2:active:hover,
.button2:active:focus,
.button2:active.focus,
.button2.active:hover,
.button2.active:focus,
.button2.active.focus {
  color: var(--wl_btn_secondary_txt_hover) !important;
  background-color: transparent !important;
  border: solid 1px var(--wl_btn_secondary_txt_hover);
}

.btn-secondary:disabled {
  color: var(--wl_btn_sondary_txt);
  background-color: transparent;
}

.btn-dark,
.btn-dark:focus,
.btn-dark:focus-visible {
  color: var(--wl_btn_tertiary_txt);
  background-color: var(--wl_btn_tertiary_background);
  border-color: var(--wl_btn_tertiary_border);
}

.btn-dark:active,
.btn-dark:hover,
.btn-dark:active:hover,
.btn-dark:active:focus,
.btn-dark:active.focus,
.btn-dark.active:hover,
.btn-dark.active:focus,
.btn-dark.active.focus {
  color: var(--wl_btn_tertiary_txt_hover);
  background-color: var(--wl_btn_tertiary_background_hover);
  border-color: var(--wl_btn_tertiary_txt_hover);
}

.btn-dark:disabled {
  color: var(--wl_btn_tertiary_txt);
  border-color: var(--wl_btn_tertiary_txt);
}

/* Page */
.wl-sub-headline {
  color: var(--wl_h1) !important;
}

.wl-page-head-block {
  color: var(--wl_h1);
}

/* Tabs */
.wl-tab {
  color: var(--wl_secondary);
}

.wl-tab.active {  
  color: var(--wl_primary);
  border-bottom-color: var(--wl_primary);
}

/* List */
.wl-list .row.wl-list-header {
  color: var(--wl_txt);
}

.wl-list .row {
  color: var(--wl_txt);
}

.wl-list-items {
  color: var(--wl_txt);
}

/* Navigation */
.static-top.navbar-dark {
  background-color: var(--wl_navigation_background) !important;
  color: var(--wl_navigation_text) !important;
}

/** MODAL START **/
.wl-modal-title {
  font-family: var(--font_family);
  color: var(--wl_h1);
}

.wl-modal-body {
  font-family: var(--font_family);
  color: var(--wl_h1);
}
/** MODAL END **/

/* Footer */
[data-component-theme="portalThemeColor4"],
footer .footer-bottom {
  background-color: var(--wl_footer_background) !important;
  color: var(--wl_footer_text) !important;
}

[data-component-theme="portalThemeColor4"] p.smallText,
footer .footer-bottom p.smallText {
  color: var(--wl_footer_text) !important;
}

/** START FORM STYLING **/
.crmEntityFormView .field-label {
  color: var(--wl_txt);
  font-family: var(--font_family);
}

.crmEntityFormView .form-control,
.crmEntityFormView .form-control:focus {
  font-family: var(--font_family);
  color: var(--wl_secondary);
}

.crmEntityFormView .picklist-cell[role="radiogroup"] .picklist.horizontal label {
  color: var(--wl_questionnaire_accent);
}

.crmEntityFormView .validation-summary a {
  color: var(--wl_questionnaire_accent) !important;
}

.crmEntityFormView .datetimepicker .input-group-addon.btn {
  color: var(--wl_questionnaire_accent);
}

/* Samtykke */
.crmEntityFormView [data-name="tab_5_section_6"] .checkbox-cell {
  color: var(--wl_questionnaire_accent);
}

.crmEntityFormView [data-name="tab_5_section_6"] .checkbox-cell label {
  color: var(--wl_questionnaire_accent);
}

/* Tro og love erklæring */
.crmEntityFormView [data-name="tab_5_section_7"] .checkbox-cell {
  color: var(--wl_questionnaire_accent);
}

.crmEntityFormView [data-name="tab_5_section_7"] .checkbox-cell label {
  color: var(--wl_questionnaire_accent);
}

/* File picker */
.crmEntityFormView input::file-selector-button {
  border-color: var(--wl_questionnaire_accent);
  background-color: var(--wl_questionnaire_accent);
}

/* Back button */
.crmEntityFormView .btn-default {
  color: var(--wl_btn_secondary_txt);
  border: solid 1px var(--wl_btn_secondary_txt);
}

.crmEntityFormView .btn-default:hover,
.crmEntityFormView .btn-default:focus {
  color: var(--wl_btn_secondary_txt_hover);
  border: solid 1px var(--wl_btn_secondary_txt_hover);
}

/* Action Buttons */
.styled-select {
  color: var(--wl_questionnaire_accent);
}

.styled-select::after {
  color: var(--wl_questionnaire_accent);
}

input[type="radio"] {
  border: 2px solid var(--wl_questionnaire_accent);
}

input[type="radio"]:checked::before {
  background: var(--wl_questionnaire_accent);
}

/** END FORM STYLING **/

/** PROGRESSBAR START **/

ol.progress {
  font-family: var(--font_family);
}

[id$="_ProgressIndicator"] .sr-only {
  font-family: var(--font_family);
  color: var(--wl_h2);
}

.list-group-item {
  color: var(--wl_questionnaire_accent) !important;
}

.progress .list-group-item.active {
  color: var(--wl_progressbar_txt) !important;
}

.progress li:before {
  color: var(--wl_questionnaire_accent);
  background: var(--wl_progressbar_inactive);
}

.progress li:after {
  background: var(--wl_progressbar_inactive);
}

.progress li.list-group-item.active:before {
  background: var(--wl_progressbar_active);
}

.progress li.list-group-item.active:after {
  background: linear-gradient(90deg,
      var(--wl_progressbar_completed) 0%,
      var(--wl_progressbar_completed) 50%,
      var(--wl_progressbar_active) 50%,
      var(--wl_progressbar_active) 50%,
      var(--wl_progressbar_inactive) 50%,
      var(--wl_progressbar_inactive) 100%);
}

.progress li:first-child.list-group-item.active:after{
  background: var(--wl_progressbar_inactive);
}
.progress li:last-child.list-group-item.active:after {
  background: var(--wl_progressbar_active);
}

.progress li.list-group-item-success:before,
.progress li.list-group-item-success:after {
  background: var(--wl_progressbar_completed);
}

.progress .text-muted {
  color: var(--wl_progressbar_txt) !important;
}

ol.progress li.incomplete {
  color: var(--wl_progressbar_txt) !important;
}

.progress li.incomplete:before {
  color: var(--wl_progressbar_inactive);
}
  
/** PROGRESSBAR END **/

.wl_breadcrumb.breadcrumb {
    margin-top: 16px;
    margin-bottom: 13px;
    margin-left: -20px;
  }

  .breadcrumb>li a {
    font-family: var(--font-family) !important;
    font-size: 12px;
    font-weight: normal;
    color: var(--wl_primary);
    text-decoration: underline;
    margin-left: 0 !important;
  }

  li.breadcrumb-item {
    line-height: 25px;
  }
  
  
  
  .breadcrumb>.active span {
    font-family: var(--font-family) !important;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 2px;
    line-height: 25px;
    color: var(--wl_primary);
  }
  
  .breadcrumb-item+.breadcrumb-item {
    padding-left: 0;
  }
  
  .breadcrumb-item+.breadcrumb-item::before {
    content: "";
    padding-right: 0;
  }
  
  li.breadcrumb-item svg {
    margin: 0 2px 0 6px;
  }