:root {
  /*
  --termin-background-color: var(--dds-semantic-green-200);
  --termin-brand-color: var(--dds-white-100);
  --termin-header-background-color: var(--dds-semantic-green-1600);
  --termin-navbar-background-color: var(--dds-semantic-green-1200);
  --termin-navbar-color: var(--dds-semantic-green-300);
  --termin-navbar-icon-color: var(--dds-semantic-green-600);

  --termin-footer-background-color: var(--dds-semantic-green-1200);
  --termin-footer-color: var(--dds-semantic-green-300);
  --termin-footer-link-color: var(--dds-semantic-green-300);
  --termin-footer-icon-color: var(--dds-semantic-green-600);
  */

  /* --termin-background-color: #f5f7fa; */
  --termin-background-color: #edf4f2;
  --termin-brand-color: #e2e2e2;
  --termin-brand-color-dark:#37f0bf;
  --termin-brand-background-inverted: #0b3d3e;
  --termin-header-background-color: #1c1f26;
  --termin-navbar-background-color: var(--dds-black-30);
  --termin-navbar-color: #fff;
  --termin-navbar-icon-color:  #fff;

  /* --termin-footer-background-color: #eef2f6; */
  /* --termin-footer-color: #6a6b7a; */
  /* --termin-footer-link-color: #606b7a; */
  --termin-footer-background-color: #0b3d3e;
  --termin-footer-color: #ffffff;
  --termin-footer-link-color: #ffffff;
  --termin-footer-icon-color: #707a8a;

  --termin-function-color: #fff;
  --termin-function-color-hover: var(--dds-black-80);
  --termin-function-invert: #37f0bf;
  --termin-function-background: transparent;
  --termin-function-background-hover: #37f0bf;

  --termin-bacground-color-darker: var( --termin-card-light-background);
  --termin-dict-background-color: #ffffff;

  --termin-result-link-color: #707a8a;

  --termin-card-background: white;
  --termin-card-light-background: #a9ebdc;
  --termin-card-gradient-background: linear-gradient(104.65deg, #0b3d3e 14.69%, #2c927c 96.46%);
  --termin-card-color: black;

  --termin-input-focus-background: rgb(255, 255, 228);
}

.web-integration {
  display: none;

}

.termin-product-name {
  font-size: 1.5em;
  font-weight: bold;

  color: var(--termin-brand-color)
}

.termin-background {
  background-color: var(--termin-background-color);
  position: relative;
  min-height: 100vh;
  overflow-x: clip;
}

app-root {
  position: relative;
  z-index: 1;
}

.highlight {
  background-color: var(--dds-semantic-orange-400);
}

.termin-screen {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
}


@media (min-width: 992px) {
  .termin-container {
    padding:0 2em;
  }
}

@media (min-width: 768px) {
  .termin-container {
    padding:0 1.5em;
  }
}

@media (min-width: 375px) {
  width: 375px;
  overflow-x: auto;
}

.termin-section {
  width: 100%;
  margin: 0;
  padding: 0;
}

.termin-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding:0 1em;
}


.termin-header-linkbar {
  background-color: transparent;
}

.relative {
  position: relative;
}

.hero {
  background-color: #0b3d3e;
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 480px;
  overflow: hidden;
  pointer-events: none;
  z-index:0;
}

.hero:before {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
  background: radial-gradient(89.07% 89.07% at 41.58% 113.92%, #254d88cc, #254d8800);
  transform: rotate(180deg) translate(0, 200px);
  pointer-events: none;
}

.hero:after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(94.82% 94.82% at 5.91% 40.11%, #041f1f 23.74%, #041f1f00 87.5%);
  transform: translateX(-200px);
  pointer-events: none;
}


.hero-inner {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-inner:before {
  content: "";
  position: absolute;
  top: -200px;
  left: 0;
  width: 2600px;
  height: 2600px;
  background: radial-gradient(94.82% 94.82% at 5.91% 40.11%, #42f9c8 23.74%, #1c1f2600 87.5%);
  transform: rotate(-110deg);
  opacity: .35;
  pointer-events: none;
}

.hero-inner:after {
  content: "";
  position: absolute;
  top: -236.111px;
  width: 1800px;
  height: 2400px;
  left: calc(100% - 1205px);
  rotate: -150deg;
  z-index: 11;
  opacity: .45;
  background: linear-gradient(89.11deg, #42f9c8 10.25%, #1c1f2600 92.62%);
  pointer-events: none;
}


.hero-logo {
  position: absolute;
  width: 800px;
  height: 800px;
  top: -180px;
  left: 60%;
  pointer-events: none;

  stroke: #15534f;
  stroke-width: 0;
  fill: #317a6f29;
}

.layout-holder {
  position: absolute;
  top: 0;
  width: 100%;
}


autofill-inline-menu-button {
  display: none !important;
}

.document-page {
  width: 100%;
  margin-top: 2rem;
  padding: 2rem;
  background-color: #fff;
  min-height: 20rem;
  border-radius: 1rem;
  outline: 2px solid var(--termin-card-light-background);
  outline-offset: 0.4rem;
}

.document-title {
  width: 100%;
}

.document-text {
  width: 100%;
  text-align: justify;
  white-space: pre-line;
}

button .button--primary {
  background-color: var(--termin-function-color);
  color: var(--termin-function-color-hover);
}


dap-ds-button {
  --dds-button-border-radius: 0.8rem;
  --dds-button-primary-color-bg: var(--dds-teal-alpha-100);
  --dds-button-primary-color-bg-hover: var(--dds-teal-1100);
  --dds-button-outline-color-border: var(--dds-teal-alpha-30);
  --dds-button-outline-color-border-hover: var(--dds-teal-alpha-60);
  --dds-button-outline-color-text: var(--dds-teal-1100);
  --dds-button-outline-color-text-hover: var(--dds-teal-1500);
}


dap-ds-pager {
  --dds-pager-button-background: var(--dds-background-neutral-base);
}

dap-ds-input::part(input):focus {
  background-color: var(--termin-input-focus-background);
  outline-style: none;
}

dap-ds-password-input::part(input):focus {
  background-color: var(--termin-input-focus-background);
  outline-style: none;
}

dap-ds-search::part(base):focus {
  outline-style: none;
  outline-color: transparent;
}

div.intro-text p  {
  margin: 0.5rem 0;
}


div.intro-text ul  {
  padding-left: 2rem !important;
}

div.intro-text li  {
  margin-bottom: 0.4rem;
}