@import url('https://altinncdn.no/fonts/altinn-din/altinn-din.css');

/* Font */
:root {
  --font-family: 'Altinn-DIN', sans-serif;
  font-family: var(--font-family);
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.5;
  text-align: left;
  color: var(--ds-color-neutral-text-default);
}

/* Global variables */
:root {
  /* @see altinnAppTheme.tsx */
  --colors-primary-blueDarker: #022f51;
  --colors-primary-blueDark: #0062ba;
  --colors-primary-blueDarkHover: #1a72c1;
  --colors-primary-blueMedium: #008fd6;
  --colors-primary-blue: #1eadf7;
  --colors-primary-blueHover: #37b7f8;
  --colors-primary-blueLight: #cff0ff;
  --colors-primary-blueLighter: #e3f7ff;
  --colors-primary-green: #12aa64;
  --colors-primary-greenHover: #45d489;
  --colors-primary-greenLight: #d4f9e4;
  --colors-primary-red: #d5203b;
  --colors-primary-redLight: #f9cad3;
  --colors-primary-purple: #3f3161;
  --colors-primary-purpleLight: #e0daf7;
  --colors-primary-yellow: #ffda06;
  --colors-primary-yellowLight: #fbf6bd;
  --colors-primary-black: #000;
  --colors-primary-grey: #6a6a6a;
  --colors-primary-greyMedium: #bcc7cc;
  --colors-primary-greyLight: #efefef;
  --colors-primary-white: #fff;

  --table-input-margin: 15px; /* From design-system, move to figma-tokens? */

  --repeating-group-edit-surface-color: #f1fbff;
  --repeating-group-edit-border-color: var(--ds-color-accent-border-default);
  --repeating-group-edit-divider-color: var(--ds-color-accent-border-subtle);
  --repeating-group-error-color: var(--ds-color-danger-surface-tinted);

  /*Border styles*/
  --border-color-primary: var(--colors-primary-blueMedium);
  --dashed-border-primary: 1px dashed var(--border-color-primary);
  --solid-border-primary: 2px solid var(--border-color-primary);
  --dotted-border-primary: 2px dotted var(--border-color-primary);

  --button-margin-top: 2rem;
  --button-gap: 0.75rem;

  /* Toast styles */
  --toastify-color-info: var(--ds-color-accent-base-default);
  --toastify-color-success: var(--ds-color-success-base-default);
  --toastify-color-warning: var(--ds-color-warning-surface-default);
  --toastify-color-error: var(--ds-color-danger-base-default);
  --toastify-toast-width: 400px;
}

.Toastify__toast {
  line-height: 1.5rem;
  padding: var(--ds-size-3) var(--ds-size-3) var(--ds-size-4) var(--ds-size-3);
}

/* Custom CSS for all app */

/* Workaround to avoid (PDF) postfix from Altinn designsystem */
a[href$='.pdf']::after {
  content: none !important;
  display: inline !important;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background-color: var(--colors-primary-greyLight);
}

@media print {
  body {
    background-color: white !important;
  }
}

input:checked + .slider {
  background-color: #1eaef7;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

input:focus + .slider {
  box-shadow: 0 0 1px #1eaef7;
}

option {
  overflow: hidden;
  text-overflow: 'ellipsis';
}

select.disabled {
  border: 2px solid var(--colors-primary-grey) !important;
  color: var(--colors-primary-black);
  background:
    url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjhweCIgaGVpZ2h0PSI0cHgiIHZpZXdCb3g9IjAgMCA4IDQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQwLjIgKDMzODI2KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5UcmlhbmdsZTwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwb2x5Z29uIGlkPSJUcmlhbmdsZSIgZmlsbD0iIzAwMDAwMCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNC4wMDAwMDAsIDIuMDAwMDAwKSBzY2FsZSgxLCAtMSkgdHJhbnNsYXRlKC00LjAwMDAwMCwgLTIuMDAwMDAwKSAiIHBvaW50cz0iNCAwIDggNCAwIDQiPjwvcG9seWdvbj4KICAgIDwvZz4KPC9zdmc+)
      no-repeat right 0.469rem center,
    repeating-linear-gradient(
      135deg,
      var(--colors-primary-greyLight),
      var(--colors-primary-greyLight) 2px,
      var(--colors-primary-white) 3px,
      var(--colors-primary-white) 5px
    ) !important;
  background-size:
    8px 10px,
    cover !important;
}

ol,
ul,
dl {
  padding-left: 1.5rem;
  margin-top: 0;
}

/* Workaround: The above style affects DropdownMenu from the design system */
.ds-dropdown ul {
  padding: 0;
}

/* Align text in table when right to left languages*/
[dir='rtl'] td {
  text-align: right;
}

/* Link styling */
.altinnLink {
  --dsc-link-background--active: var(--ds-color-surface-tinted);
  --dsc-link-color--active: var(--ds-color-text-default);
  --dsc-link-color--hover: var(--ds-color-text-default);
  --dsc-link-color: var(--ds-color-text-subtle);
  --dsc-link-background--focus: var(--ds-color-focus-outer);
  --dsc-link-color--focus: var(--ds-color-focus-inner);
  --dsc-link-color--visited: var(--ds-link-color-visited);
  --dsc-link-text-decoration-thickness--hover: 0.125em;
  --dsc-link-text-decoration-thickness: 0.0625em;
  color: var(--dsc-link-color);
  outline: none;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: var(--dsc-link-text-decoration-thickness);
  text-underline-offset: 0.27em;
}
.altinnLink:hover {
  color: var(--dsc-link-color--hover);
  text-decoration-thickness: var(--dsc-link-text-decoration-thickness--hover);
}
.altinnLink:focus-visible {
  color: var(--dsc-link-color--focus);
  background: var(--dsc-link-background--focus);
  outline: transparent solid 2px;
}

.altinnLink[target='_blank']::after {
  display: inline-block;
  width: 1.3em;
  background-image: url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 36 36%27%3E%3Cstyle%3E.st0%7Bfill:%23022f51%7D.st1%7Bfill:%23fff%7D.st2,.st3,.st4%7Bfill:none;stroke:%23fff;stroke-width:2.5;stroke-miterlimit:10%7D.st3,.st4%7Bstroke-width:2%7D.st4%7Bfill:%23fff%7D.st5%7Bfill:none%7D.st5,.st6,.st7,.st8%7Bstroke:%23022f51;stroke-miterlimit:10%7D.st6%7Bstroke-width:.9636;fill:none%7D.st7,.st8%7Bfill:%23fff%7D.st8%7Bfill:%23022f51%7D.st9%7Bopacity:.3%7D.st10%7Bfill:%23ff1d25%7D.st11%7Bfill:none;stroke:%23022f51;stroke-width:8;stroke-miterlimit:10%7D.st12%7Bopacity:.5;stroke:%23ffa683;stroke-width:2%7D.st12,.st13,.st14%7Bfill:none;stroke-miterlimit:10%7D.st13%7Bopacity:.5;stroke:%23ffa683;stroke-width:1.4142%7D.st14%7Bstroke:%23022f51;stroke-width:4%7D%3C/style%3E%3Cpath class=%27st0%27 d=%27M15 11v2h8.7L12.1 24.7l1.4 1.4L25 14.6V24h2V11z%27 id=%27Layer_1%27/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-size: 119% auto;
  vertical-align: middle;
  margin-top: -4px;
  margin-left: -3px;
  content: '(external link)';
  white-space: nowrap;
  overflow: hidden;
  text-indent: 1.3em;
}
.altinnLink[target='_blank']:focus-visible::after {
  display: inline-block;
  width: 1.3em;
  background-image: url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 36 36%27%3E%3Cstyle%3E.st0%7Bfill:%23ffffff%7D.st1%7Bfill:%23fff%7D.st2,.st3,.st4%7Bfill:none;stroke:%23fff;stroke-width:2.5;stroke-miterlimit:10%7D.st3,.st4%7Bstroke-width:2%7D.st4%7Bfill:%23fff%7D.st5%7Bfill:none%7D.st5,.st6,.st7,.st8%7Bstroke:%23022f51;stroke-miterlimit:10%7D.st6%7Bstroke-width:.9636;fill:none%7D.st7,.st8%7Bfill:%23fff%7D.st8%7Bfill:%23022f51%7D.st9%7Bopacity:.3%7D.st10%7Bfill:%23ff1d25%7D.st11%7Bfill:none;stroke:%23022f51;stroke-width:8;stroke-miterlimit:10%7D.st12%7Bopacity:.5;stroke:%23ffa683;stroke-width:2%7D.st12,.st13,.st14%7Bfill:none;stroke-miterlimit:10%7D.st13%7Bopacity:.5;stroke:%23ffa683;stroke-width:1.4142%7D.st14%7Bstroke:%23022f51;stroke-width:4%7D%3C/style%3E%3Cpath class=%27st0%27 d=%27M15 11v2h8.7L12.1 24.7l1.4 1.4L25 14.6V24h2V11z%27 id=%27Layer_1%27/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-size: 119% auto;
  vertical-align: middle;
  margin-top: -4px;
  margin-left: -3px;
  content: '(external link)';
  white-space: nowrap;
  overflow: hidden;
  text-indent: 1.3em;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
