/*
 * The official color scheme is defined here:
 * https://zpl.io/V0LpN4o
 * https://zpl.io/2pvPq6l
 */
:root {
  /* START: THEMING API */
  --default-color-rgb: 53, 59, 68;
  --default-color: rgba(var(--default-color-rgb), 1); /* #353B44 */
  --primary-color-rgb: 35, 112, 183;
  --primary-color: rgb(var(--primary-color-rgb));
  --disabled-color: var(--gray-04); /* re-defined for .dark-bg below */
  --muted-color: var(--gray-06);
  --primary-color-darken-15: hsl(209deg, 68%, 36.55%);
  --primary-color-darken-30: hsl(209deg, 68%, 30.1%);

  /* Link colors */
  --link-color-rgb: 25, 90, 166;
  --link-color: rgb(var(--link-color-rgb));
  --link-color-10: rgba(var(--link-color-rgb), 0.1);
  --link-color-35: rgba(var(--link-color-rgb), 0.35);
  --link-color-light: #81bbff;
  --visited-link-color-rgb: var(--link-color-rgb);
  --visited-link-color: rgb(var(--visited-link-color-rgb));
  --visited-link-color-light: var(--link-color-light);
  /* END: THEMING API */

  /* Error colors */
  --color-error-light: #ffa6a6;
  --color-error-lighter: #f23535;
  --color-error: #c01818;
  --color-error-rgb: 192, 24, 24;
  --color-error-10: rgba(var(--color-error-rgb), 0.1);
  --color-error-10-opaque: #f9e8e8;
  --color-error-20: rgba(var(--color-error-rgb), 0.2);
  --color-error-50: rgba(var(--color-error-rgb), 0.5);
  --color-error-dark: #a61414;

  /* Warning colors */
  --color-warning-light: #ffe28c;
  --color-warning: #fcc422;
  --color-warning-rgb: 252, 196, 34;
  --color-warning-10: rgba(var(--color-warning-rgb), 0.1);
  --color-warning-20: rgba(var(--color-warning-rgb), 0.2);
  --color-warning-20-opaque: #fef3d3;
  --color-warning-88: rgba(var(--color-warning-rgb), 0.88);
  --color-warning-darker: #dba918;
  --color-warning-dark: #664d0c;

  /* Info colors */
  --color-info-light: #add3ff;
  --color-info-light-rgb: 172, 211, 255;
  --color-info-light-60: rgba(var(--color-info-light-rgb), 0.6);
  --color-info: var(--link-color);
  --color-info-10: rgba(var(--link-color-rgb), 0.1);
  --color-info-10-opaque: #e8eff7;
  --color-info-30: rgba(var(--link-color-rgb), 0.3);
  --color-info-dark: #14426b;

  /* Success colors */
  --color-success-light: #b1d04d;
  --color-success: #7fa429;
  --color-success-rgb: 127, 164, 41;
  --color-success-10: rgba(var(--color-success-rgb), 0.1);
  --color-success-20: rgba(var(--color-success-rgb), 0.2);
  --color-success-20-opaque: #e5edd4;
  --color-success-dark: #4b6018;

  /* Gray values */
  --gray-01: rgba(var(--default-color-rgb), 0.05);
  --gray-02: rgba(var(--default-color-rgb), 0.1);
  --gray-03: rgba(var(--default-color-rgb), 0.2);
  --gray-04: rgba(var(--default-color-rgb), 0.32);
  --gray-05: rgba(var(--default-color-rgb), 0.5);
  --gray-06: rgba(var(--default-color-rgb), 0.72);
  --gray-07: rgba(var(--default-color-rgb), 0.88);
  --gray-08: var(--default-color);
  --gray-09: #101214;

  /* Opaque gray values */
  --gray-01-opaque: #f3f4f4;
  --gray-02-opaque: #ebeced;
  --gray-03-opaque: #d7d8da;
  --gray-04-opaque: #bdbfc2;
  --gray-05-opaque: #9a9da2;
  --gray-06-opaque: #6d7177;
  --gray-07-opaque: #4d525a;
  --gray-08-opaque: var(--gray-08);
  --gray-09-opaque: var(--gray-09);

  /* White values */
  --white-rgb: 255, 255, 255;
  --white-01: rgba(var(--white-rgb), 0.05);
  --white-02: rgba(var(--white-rgb), 0.1);
  --white-03: rgba(var(--white-rgb), 0.2);
  --white-04: rgba(var(--white-rgb), 0.32);
  --white-05: rgba(var(--white-rgb), 0.48);
  --white-06: rgba(var(--white-rgb), 0.62);
  --white-07: rgba(var(--white-rgb), 0.76);
  --white-08: rgba(var(--white-rgb), 0.88);

  /* Changed from --white-09: white; to use rgba because CSS names do not work with color.ts utility */
  --white-09: rgba(var(--white-rgb), 1);
}
.dark-bg {
  --disabled-color: var(--white-04);
}
:root {
  /* Font families */
  --default-font-family: 'Titillium Web', arial, helvetica, sans-serif; /* THEMING API */
  --heading-font-family: var(--default-font-family); /* THEMING API */
  --monospace-font-family: consolas, menlo, monaco, 'DejaVu Sans Mono', 'Droid Sans Mono', 'Courier New', monospace;

  /* Base font sizes */
  --font-size-1: 12px; /* THEMING API */
  --font-size-2: 14px; /* THEMING API */
  --font-size-3: 16px; /* THEMING API */
  --font-size-4: 18px; /* THEMING API */
  --font-size-5: 20px; /* THEMING API */
  --font-size-6: 24px; /* THEMING API */
  --font-size-7: 28px; /* THEMING API */
  --font-size-8: 32px; /* THEMING API */
  --font-size-9: 36px; /* THEMING API */

  /* Font sizes */
  --small-font-size: var(--font-size-1);
  --default-font-size: var(--font-size-2);
  --heading-font-size: var(--font-size-4);

  /* Font weights */
  --default-font-weight: 400;
  --bold-font-weight: 600;

  /* Line heights */
  --small-line-height: 16px;
  --default-line-height: 18px;
  --heading-line-height: 24px;
}
@media (pointer: coarse) {
  :root {
    /* Font sizes (on --touch +1 base font size) */
    --small-font-size: var(--font-size-2);
    --default-font-size: var(--font-size-3);
    --heading-font-size: var(--font-size-5);

    /* Line heights */
    --default-line-height: 20px;
  }
}
/* IMPORTANT: Do not just add random z-index variables to this file, this is for well defined stacking context only
* Z-index properties should be avoided! Only in the UNLIKELY CASE where you have a well defined stacking context you should add more variables here.
* If the value of the z-indexes below change, make sure that: left sidebar > onDemand > left-sidebar-backdrop > right sidebar */
:root {
  --table-settings-z-index: 14;
  --sidebar-backdrop-z-index: 15; /* The sidebar should cover the table settings on small screens */
  --left-sidebar-z-index: 17; /* We want the left sidebar to always be on top of all other stacking contexts, because it contains the navigator, legend, filter etc */
  --fullscreen-modal-z-index: 18; /* The left sidebar has the same parent stacking context as the export map dialog, namely the html element, since the export map has to be on top, we need to add +1 */
  --sticky-element-z-index: 1; /* Force the sticky element to be on top of scrolling content */

  /* Workbooks */
  --worksheet-on-demand: 2; /* draw the worksheet on demand overlay above maximized views */
}
:root {
  /* success */
  --alert-color-success: var(--color-success-dark);
  --alert-color-success-background: var(--color-success-20);

  /* info */
  --alert-color-info: var(--color-info-dark);
  --alert-color-info-background: var(--color-info-10);
  --alert-color-info-background-opaque: var(--color-info-10-opaque);

  /* warning */
  --alert-color-warning: var(--gray-08);
  --alert-color-warning-background: var(--color-warning-20);
  --alert-color-warning-background-opaque: var(--color-warning-20-opaque);

  /* error */
  --alert-color-error: var(--color-error);
  --alert-color-error-background: var(--color-error-10);
  --alert-color-error-background-opaque: var(--color-error-10-opaque);
}
.dark-bg {
  /* success */
  --alert-color-success: var(--color-success-light);
  --alert-color-success-background: var(--color-success-20);

  /* info */
  --alert-color-info: var(--color-info-light);
  --alert-color-info-background: var(--color-info-30);

  /* warning */
  --alert-color-warning: var(--color-warning-light);
  --alert-color-warning-background: var(--color-warning-20);

  /* error */
  --alert-color-error: var(--color-error-light);
  --alert-color-error-background: var(--color-error-20);
}
:root {
  --default-box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.32);
  --default-outline-width: 3px;
  --default-outline: 0 0 0 var(--default-outline-width) rgba(var(--default-color-rgb), 0.32);
  --default-page-margin: 8px;
  --default-transition: 200ms ease-in-out;

  /*
   * make the native outline transparent, so that it's visible only in high-contrast mode,
   * when the box-shadow is not visible.
   */
  --default-native-outline: solid transparent;

  /*
   * We also use form group sizes for other components to align them with sibling form groups.
   * Instead of introducing further magic numbers, we make these sizes globally available.
   */
  --form-group-width-xs: 248px;
  --form-group-width-s: 368px;
  --form-group-width: 512px;
  --form-group-width-l: 776px;
}
@media (min-width: 600px) {
:root {
    --default-page-margin: 16px;
}
  }
.dark-bg {
  --default-outline: 0 0 0 var(--default-outline-width) var(--white-05);
}
:root {
  --default-component-size: 32px;
  --small-component-size: 24px;
  --default-view-header-height: 40px;
  --map-toolbar-height: 40px;
}
@media (pointer: coarse) {
  :root {
    --default-component-size: 44px;
    --small-component-size: 32px;
    --default-view-header-height: 56px;
    --map-toolbar-height: 56px;
  }
}
.d-alert {
  --bg: transparent;
  --color: var(--default-color);
  --font-size: var(--default-font-size);
  --icon: none;
  --icon-color: var(--color);
  --icon-gap: 4px;
  --icon-size: 20px;
  --line-height: var(--default-line-height);
  --padding-x: 8px;
  --padding-y: 12px;
  --text-offset: calc((var(--icon-size) - var(--line-height))/2);
  --p-margin: 8px;

  background-color: var(--bg);
  color: var(--color);
  display: block;
  font-family: var(--default-font-family);
  font-size: var(--font-size);
  line-height: var(--line-height);
  padding: calc(var(--padding-y) + var(--text-offset)) var(--padding-x);
  position: relative;
  text-align: left;
}
.d-alert:where(.d-alert-success,.d-alert-info,.d-alert-warning,.d-alert-error):where(.d-alert-with-button) .d-alert--text::before,.d-alert:where(.d-alert-success,.d-alert-info,.d-alert-warning,.d-alert-error):where(:not(.d-alert-with-button))::before {
      background-color: var(--icon-color);
      content: '';
      display: block;
      height: var(--icon-size);
      -webkit-mask-image: var(--icon);
              mask-image: var(--icon);
      -webkit-mask-size: var(--icon-size);
              mask-size: var(--icon-size);
      width: var(--icon-size);
    }
.d-alert:not(.d-alert-small,.d-alert-xs) {
    padding-left: calc(var(--padding-x) + var(--icon-size) + var(--icon-gap));
  }
.d-alert.d-alert-with-button:not(.d-alert-small,.d-alert-xs) .d-alert--text::before,.d-alert:not(.d-alert-small,.d-alert-xs):not(.d-alert-with-button)::before {
      left: var(--padding-x);
      position: absolute;
      top: var(--padding-y);
    }
.d-alert:empty {
    display: none;
  }
.d-alert:where(:not(:last-child)) {
    margin-bottom: 16px;
  }
.d-alert .d-alert--text {
    display: block;
  }
.d-alert p:not(:last-child) {
    margin-bottom: var(--p-margin);
  }
.d-alert ul {
    list-style: square inside;
    margin-bottom: 4px;
    margin-top: 4px;
    padding: 0;

    /* reduce distance between bullet point and text to 4px */
  }
:is(.d-alert ul) li span {
      left: -6px;
      position: relative;
    }
.d-alert .title {
    font-weight: var(--bold-font-weight);
  }
:is(.d-alert .title):empty {
      display: none;
    }
.d-alert-success {
  --bg: var(--alert-color-success-background);
  --color: var(--alert-color-success);
  --icon: url('~@disy/cadenza-icons/check.svg');
}
.d-alert-info {
  --bg: var(--alert-color-info-background);
  --color: var(--alert-color-info);
  --icon: url('~@disy/cadenza-icons/info.svg');
}
.d-alert-warning {
  --bg: var(--alert-color-warning-background);
  --color: var(--alert-color-warning);
  --icon: url('~@disy/cadenza-icons/warning.svg');
  --icon-color: var(--color-warning-dark);
}
.d-alert-error {
  --bg: var(--alert-color-error-background);
  --color: var(--alert-color-error);
  --icon: url('~@disy/cadenza-icons/error.svg');
}
.d-alert-info:where(.d-alert-opaque) {
    --bg: var(--alert-color-info-background-opaque);
  }
.d-alert-warning:where(.d-alert-opaque) {
    --bg: var(--alert-color-warning-background-opaque);
  }
.d-alert-error:where(.d-alert-opaque) {
    --bg: var(--alert-color-error-background-opaque);
  }
:where(.d-alert-xs).d-alert-warning {
  --color: var(--color-warning-dark);
}
.d-alert-with-button:is(.d-alert-small,.d-alert-xs) .d-alert--text::before,:is(.d-alert-small,.d-alert-xs):not(.d-alert-with-button)::before {
    float: left;
    margin-right: var(--icon-gap);
    margin-top: calc(var(--text-offset)*-1);
  }
/*
 * Unfortunately, the alert size default is not sensible, because usually we use the small size.
 * To mitigate issues with people forgetting to apply the small size, we make default alerts
 * *look* like small alerts in modals and popups.
 */
:where(.d-modal, .d-popup) .d-alert,
.d-alert-small {
  --icon-size: 16px;
  --padding-y: 8px;
  --p-margin: 4px;
}
:is(:where(.d-modal,.d-popup) .d-alert,.d-alert-small):where(:not(:last-child)) {
    margin-bottom: 6px;
  }
.d-alert-xs {
  --bg: transparent;
  --icon-gap: 2px;
  --p-margin: 4px;

  padding: 0;
}
.d-alert-xs:where(:not(:last-child)) {
    margin-bottom: 4px;
  }
@media (hover: hover) {
.d-alert-xs {
    --icon-size: 16px; /* icon size 'xs' */
}
  }
.d-alert-with-button {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
}
.d-alert-with-button .d-alert--text + * {
    margin-left: 8px;
  }
.d-alert-with-button-bottom {
  --button-gap: 8px;
}
.d-alert-with-button-bottom .d-alert--text ~ * {
    margin: var(--button-gap) var(--button-gap) 0 0;
  }
.d-alert-with-button-bottom.d-alert-small {
    --button-gap: 4px;
  }
html,
body {
  height: 100%;
  overflow: hidden;
}
.d-page--content > .d-alert {
  left: var(--default-page-margin);
  max-width: 640px; /* TBD */
  position: absolute;
  top: 40px;
  width: calc(100% - var(--default-page-margin)*2);
}
/* ----- END of page footer ----- */
body {
  margin: 0;
  padding-top: 0;
}
textarea.error {
  width: 90%;
  height: 90%;
}
h4 {
  margin-bottom: 6px;
}
.section {
  padding: 20px;
}
.section form {
  width: 95%;
}
.subsection {
  padding-left: 0;
}
/* ---- Form Controls ---- */
/* 	Set the margin of form elements in WPS Input Parameter views
   to the same value since otherwise this collides with other types of parameter. */
.wpsProcessInputsContainer input,
.wpsProcessInputsContainer button,
.wpsProcessInputsContainer select,
.wpsProcessInputsContainer .olControlPanel {
  margin: 4px;
}
input:where([type='text'], [type='password']),
select {
  padding: 0;
  /* Minimum width for all input fields, may not be appropriate sometimes, override at will */
  min-width: 16em;
}
input:disabled {
  color: #71757c;
}
.disabled {
  color: #71757c !important;
}
form {
  margin: 0;
  padding: 0;
}
.description,
.info,
.error {
  border: 2px solid;
  margin: 10px;
  padding: 6px;
  border-color: #e0e0e0;
  background-color: #f9f9f9;
}
.error {
  border-color: #ff0000;
}
.exceptionStackTrace {
  width: 450px;
  height: 200px;
  margin-bottom: 12px;
}
.debug {
  border: 2px solid #bdb76b;
  background-color: #eee8aa;
  clear: both;
  height: 100%;
}
.toolbar {
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  padding: 0 0 5px !important;
}
.remoteContent {
  width: 95%;
  height: 88%;
  border: none;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
d-data {
  display: none;
}
.d-progress-spinner.spinner-over-content {
  width: 100%;
  height: 100%;
}
.d-progress-spinner.spinner-over-content .progress-spinner {
  margin: auto;
}
.disable-user-selection {
  -webkit-user-select: none;
          user-select: none;
}