.pagewrapper {
  display: block;
  position: relative;
  margin: auto;
  padding: var(--pagePadding);
}
.pagewrapper.nopadding {
  padding: 0;
}
.pagewrapper.overflow {
  overflow: hidden;
  padding: 7rem var(--pagePaddingSingle);
}
.pagewrapper.alt {
  padding: 0 2rem;
}
.pagewrapper.width {
  max-width: 130rem;
}
.pagewrapper.normal {
  max-width: var(--pageWidth);
}
.pagewrapper.midWide {
  max-width: 150rem;
}
.pagewrapper.wider {
  max-width: 170rem;
}
.pagewrapper.widest {
  max-width: 180rem;
}
.pagewrapper.dyn {
  max-width: 90%;
}
.pagewrapper.margin-zero {
  margin: 0;
}
.pagewrapper.minHeight {
  min-height: 60rem;
}

.sepline {
  position: relative;
  display: block;
  background-color: var(--colorGrey02);
  height: 0.1rem;
}
.sepline.spacing {
  margin: 4rem 0;
}
.sepline.jobb {
  margin: 2rem auto 0 auto;
  max-width: 114rem;
}
.sepline.kurs {
  margin: var(--pagePaddingSingle) calc(var(--pagePaddingSingle) * -1);
}
.sepline.kurs.inline {
  margin: 2rem 0;
}
@media screen and (max-width: 650px) {
  .sepline.kurs {
    margin: 3rem -2.5rem;
  }
}

.error-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.error-placeholder img {
  margin: 0 0 2rem 0;
  width: 100%;
  max-width: 20rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--borderRadiusSmall);
  border: var(--borderSize) solid transparent;
  font-size: var(--fontSize-Small);
  font-weight: var(--fontWeight-Btn);
  height: var(--wcag-btnSize);
  padding: 0 1.4rem;
  margin: 0;
}
.btn:hover, .btn:focus, .btn:focus-within, .btn:active {
  outline: none;
}
.btn__primary {
  background-color: var(--vigiloDarkBlue);
  color: var(--colorWhite);
}
.btn__primary:hover, .btn__primary:focus, .btn__primary:active {
  background-color: #000e93;
}
.btn__primary:focus {
  box-shadow: var(--button-primary-shadow);
}
.btn__muted-light {
  background-color: var(--muted-light-bg);
  color: var(--vigiloDarkBlue);
}
.btn__muted-light:hover, .btn__muted-light:focus, .btn__muted-light:active {
  background-color: var(--muted-light-hover-bg);
  color: var(--vigiloDarkBlue);
}
.btn__muted-light:focus {
  box-shadow: 0 0 0 0.4rem rgba(241, 241, 241, 0.5);
}
.btn__quiet {
  background-color: var(--quiet-bg);
  color: var(--vigiloDarkBlue);
}
.btn__quiet:hover, .btn__quiet:focus {
  background-color: var(--quiet-hover-bg);
  border-color: var(--quiet-hover-border-bg);
  color: var(--vigiloDarkBlue);
}
.btn__quiet:active {
  background-color: var(--quiet-active-bg);
  border-color: var(--quiet-active-border-bg);
  color: var(--vigiloDarkBlue);
}
.btn__quiet-shadow {
  background-color: var(--quiet-bg);
  box-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.25);
  color: var(--vigiloDarkBlue);
}
.btn__quiet-shadow:hover, .btn__quiet-shadow:focus {
  background-color: var(--quiet-hover-bg);
  color: var(--vigiloDarkBlue);
}
.btn__quiet-shadow:active {
  background-color: var(--quiet-active-bg);
  color: var(--vigiloDarkBlue);
}
.btn[disabled] {
  cursor: not-allowed;
  opacity: 0.65;
}
.btn.hidden {
  display: none;
}

.video-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 1.4rem;
  overflow: hidden;
  margin: auto;
  height: auto;
}
.video-wrapper.kommune {
  max-width: 94rem;
}
.video-wrapper video {
  width: 100%;
  height: 100%;
}

.alert-box {
  display: flex;
  gap: 1rem;
  padding: 1.4rem;
  font-weight: var(--fontWeight-Normal);
  font-size: var(--fontSize-Small);
  border-radius: var(--borderRadiusSmall);
  background-color: var(--muted-light-bg);
  color: #252525;
}
.alert-box:not(:has(strong)) {
  align-items: center;
  padding: 1rem;
}
.alert-box strong {
  display: block;
  margin-bottom: 0.5rem;
}
.alert-box p {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}
.alert-box:before {
  content: "6";
  font-family: var(--vigiloIcons);
  font-size: 2.8rem;
  color: #7f8c8d;
  line-height: 1;
}
.alert-box.danger {
  background-color: #fdecea;
  color: #480e07;
}
.alert-box.danger:before {
  color: #e74c3c;
}
.alert-box.warning {
  background-color: #fff4e5;
  color: #4c2c00;
}
.alert-box.warning:before {
  content: "}";
  color: #f1c40f;
}
.alert-box.info {
  background-color: #e8f4fd;
  color: #062b47;
}
.alert-box.info:before {
  color: #2880b9;
}
.alert-box.success {
  background-color: #edf7ed;
  color: #173517;
}
.alert-box.success:before {
  content: "R";
  color: #27ae60;
}

.field-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.field-wrapper label.field {
  position: relative;
  display: block;
  color: var(--vigiloDarkBlue);
  font-size: var(--fontSize-Root);
  font-weight: var(--fontWeight-Normal);
  padding: 1.2rem 4rem 1.2rem 1.2rem;
  border-radius: var(--borderRadiusSmall);
  background-color: var(--input-bg);
  border: 0.1rem solid transparent;
  height: calc(100% - 2.4rem);
  transition: all 0.4s ease;
  box-sizing: border-box;
}
.field-wrapper label.field:hover, .field-wrapper label.field:focus {
  background-color: var(--input-bg-hover);
  border-color: var(--input-border-hover);
}
.field-wrapper label.field:after {
  position: absolute;
  font-family: var(--vigiloIcons);
  color: var(--input-icon-color);
  font-size: 1.8rem;
  right: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.field-wrapper label.field:has(input:checked) {
  background-color: var(--input-bg-active);
  border-color: var(--input-border-active);
}
.field-wrapper label.field:has(input:checked):after {
  color: var(--input-icon-color-active);
}
.field-wrapper label.field:has(input[type=radio]):after {
  content: "8";
}
.field-wrapper label.field:has(input[type=radio]:checked):after {
  content: "7";
}
.field-wrapper label.field:has(input[type=checkbox]):after {
  content: "Y";
}
.field-wrapper label.field:has(input[type=checkbox]:checked):after {
  content: "X";
}
.field-wrapper label.field input {
  inset: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.field-wrapper label.field input:hover, .field-wrapper label.field input:focus {
  border-radius: var(--borderRadiusSmall);
  outline-color: 0.1rem solid var(--quiet-hover-border-bg);
  outline-offset: 0.3rem;
}
.field-wrapper label.field:has(input:disabled):hover {
  background-color: var(--input-bg);
  border-color: transparent;
}
.field-wrapper label.field:has(input:disabled) input {
  cursor: not-allowed;
}

fieldset {
  border: none;
}

/* Custom Password Protection Styles */
.vigilo-password-form {
  width: 100%;
}
.vigilo-password-form .vigilo-password-form-input {
  position: relative;
}
.vigilo-password-form .vigilo-password-form-input .password-field input[type=password] {
  width: 100%;
  border-radius: 10rem;
  font-size: var(--fontSize-Root);
  background-color: var(--colorWhite);
  box-shadow: 0 0.4rem 4rem 0 rgba(0, 0, 0, 0.08);
  padding: 2.4rem;
  border: none;
  box-sizing: border-box;
}
.vigilo-password-form .vigilo-password-form-input .password-field input[type=password]:focus {
  outline: 0.2rem solid var(--vigiloSecondaryBlue);
  outline-offset: 0.2rem;
}
.vigilo-password-form .vigilo-password-form-input input[type=submit].vigilo-password-submit {
  position: absolute;
  background-color: var(--vigiloDarkBlue);
  border: 0.1rem solid var(--vigiloDarkBlue);
  right: 0.6rem;
  transition: var(--transitionStandard);
  top: 50%;
  transform: translateY(-50%);
  font-size: clamp(1.4rem, var(--fsClamp-scaler-p), 1.8rem);
  font-family: inherit;
  font-weight: 600;
  color: var(--colorWhite);
  border-radius: 10rem;
  box-sizing: border-box;
  padding: 1.6rem 2.5rem;
  cursor: pointer;
}
.vigilo-password-form .vigilo-password-form-input input[type=submit].vigilo-password-submit:focus {
  outline: none;
  box-shadow: var(--button-primary-shadow);
}
.vigilo-password-form .vigilo-password-error {
  margin-top: 1.5rem;
  border-radius: var(--borderRadiusSmall);
  background-color: #f8d7da;
  border: 0.2rem solid #f5c6cb;
  color: #dc3545;
  padding: 1rem;
}