/************************************
MAIN
************************************/
/* No JS */
html.no-js .js-only {
  display: none;
}

html.js .no-js {
  display: none
} 

html,
body.site-body,
.site-wrapper {
  height: 100%;
  width: 100%;
}

body::-webkit-scrollbar {
  width: 1em;
}

body::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

body::-webkit-scrollbar-thumb {
  background-color: var(--color-primary);
  outline: 1px solid var(--color-primary);
}

.site-wrapper,
.main-wrapper {
  background: var(--color-main-bg);
}

  .site-wrapper {
    display: flex;
    flex-direction: column;
  }
.site-wrapper footer {
  margin-top: auto;
}

  /* Content wrapper */
  .content-container {
    padding-top: var(--container-padding);
    padding-bottom: var(--container-padding);
  }

  .content-container .grid {
    margin-bottom: calc(0px - var(--grid-col-margin)) !important;
  }

.section-container {
  padding-top: var(--container-padding);
  padding-bottom: var(--container-padding);
}

.content-section {
  padding-bottom: var(--container-padding);
}

.list-delimeter span:last-child .delimeter,
.list-delimeter li.delimeter:last-child {
  display: none;
}

.text-size-medium {
  font-size: .9rem;
}

.page-header {
margin-bottom: 2rem;
}

/************************************
BOOTSTRAP OVERWRITE
************************************/
  /* Popover */
    .popover .popover-body {
      margin-top: 0;
    }

/************************************
FORMS
************************************/
  .form-group {
    margin-bottom: 20px;
  }

  /* Label */
  .control-label,
  .umbraco-forms .umbraco-forms-label {
    font-weight: var(--font-weight-bold-body);
  }

  .umbraco-forms-indicator {
    color: var(--color-danger);
  }

  .control-label-optional:after {
    content: "- valgfritt";
    color: #545b62;
    font-size: 13px;
    font-weight: normal;
  }

  /* Tooltip */
  .form-field-info {
    color: #0075b2 !important;
    cursor: pointer;
  }

  .umbraco-forms .help-block {display:block; font-size:.9rem}

  /* Form control */
.form-control {
  border-radius: var(--border-radius);
}

  .form-control::-webkit-input-placeholder {
    color: #767676;
    font-style: italic;
  }

  .form-control::-moz-placeholder {
    color: #767676;
    font-style: italic;
  }

  .form-control:-ms-input-placeholder, .form-control::-ms-input-placeholder {
    color: #767676;
    font-style: italic;
  }

  .form-control::placeholder {
    color: #767676;
    font-style: italic;
  }

  .form-control.valid {
    border-color: var(--color-success);
  }

  .form-control.input-validation-error {
    border-color: var(--color-danger);
  }

.form-select {
  border-radius: var(--border-radius);
}

/* Input with icon */
.input-with-icon {
  position: relative;
}

.input-icon {
  position: absolute;
  top: 0;
  width: 40px;
  padding: 15px 0;
  margin-left: 5px;
  color: #495057;
  text-align: center;
}

.input-with-icon .form-control {
  padding-left: 40px;
}

  .input-with-icon .form-control.input-validation-error + .input-icon {
    color: #dc3545
  }

  .input-with-icon .form-control.valid + .input-icon {
    color: #28a745
  }

/* Title and description field */
.umbraco-forms-page fieldset + fieldset .titleanddescription:nth-child(1) {
  margin-top: 5px;
}

.umbraco-forms-page .titleanddescription .has-caption {
  padding-left: 15px;
  border-left: 2px solid var(--color-primary);
}

.umbraco-forms-page .titleanddescription p {
  margin-top: 0;
}

  /* Radio buttons & Checkboxes */
.btn-group-toggle .btn-toggle {
  border-radius: .25rem;
  background-color: #fff;
  border-color: #fff;
  text-transform: none;
  padding: 6.5px 10px;
  margin-bottom: 5px;
  font-weight: 500;
  text-align: left;
  display: block;
  width: 100%;
}

  .btn-group-toggle .btn-toggle:hover,
  .btn-group-toggle .btn-toggle:focus {
    background-color: #c8e0cd;
    border-color: #c8e0cd;
  }

  .btn-group-toggle .btn-toggle.active {
    background-color: #28a745;
    border-color: #28a745;
    color: #fff;
  }

  .btn-group-toggle .btn-toggle span:before {
    line-height: 20px;
  }

  .btn-group-toggle .btn-toggle span:before {
    font-family: "Font Awesome 5 Pro";
    padding-right: 5px;
  }

.btn-group-toggle.btn-group-radio .btn-toggle .icon-unchecked,
.btn-group-toggle.btn-group-radio .btn-toggle.active .icon-checked {
  display: inline-block !important;
}

.btn-group-toggle.btn-group-radio .btn-toggle.active .icon-unchecked,
.btn-group-toggle.btn-group-radio .btn-toggle:not(.active) .icon-checked {
  display: none !important;
}

.btn-group-toggle.btn-group-checkbox .btn-toggle .icon-unchecked,
.btn-group-toggle.btn-group-checkbox .btn-toggle.active .icon-checked {
  display: inline-block !important;
}


.btn-group-toggle.btn-group-checkbox .btn-toggle.active .icon-unchecked,
.btn-group-toggle.btn-group-checkbox .btn-toggle:not(.active) .icon-checked {
  display: none !important;
}

  /* Validations */
.field-validation-error,
.field-validation-valid-message {
  display: block;
  margin-top: 10px;
}

.field-validation-error {
  color: var(--color-danger);
}

.field-validation-valid-message {
  color: var(--color-success);
}

.field-validation-valid {
  display: none;
}

/* Responsive embed */
.mceNonEditable.embeditem {
  position: relative;
  width: 100%;
  --bs-aspect-ratio: calc(9 / 16 * 100%);
}
.mceNonEditable.embeditem {
  display: block;
  padding-top: var(--bs-aspect-ratio);
  content: "";
}

  .mceNonEditable.embeditem > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }