:root {
  --tsf-color-primary: #801B5D;
}

[shell-host] {
  /* position and height fix the disappearing shell when
     react-select dropdown is open. Reason: react-select
     adds "position: relative" and "height: 100%" to body
     which breaks our absolute positioning (100% does not
     fill vertical viewport).*/
  position: static;
  height: 100vh;
}

[tsf-shell__content-inner] {
  position: relative;
  padding: 1em;
}

[dimmer-host] {
  z-index: 1250;
}

:host {
  background-color: var(--tsf-color-primary);
  /** Image is inlined with inline css file **/
}

[header-host] {
  background-color: var(--tsf-color-primary);
  background-size: cover;
  /** Image is inlined with inline css file **/
}

[tsf-content-header] {
  height: unset;
  min-height: 38px;
}

[tsf-content-header__content-wrapper] {
  flex: 1;
  min-height: 0;
}

[tsf-content-header__wrapper] {
  width: 100%;
}

[tsf-header__triangle] {
  left: 256px;
}

[tsf-header__toolbar] {
  left: 310px;
}

[tsf-header__overlay] {
  padding-right: 16px;
}

[tsf-header__logo] {
  width: 256px;
  margin-top: 5px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60%;
  /** Real background image inlined with inline css file **/
}

[tsf-shell__header-item] {
  margin-right: 0px;
}

[tsf-shell__header-item]:only-child {
  width: 100%;
}

[tsf-header__global-functions] {
  gap: 8px;
}

[side-panel-host] {
  width: unset;
  border-right: unset;
  position: relative;
  background-color: var(--tsf-color-alabaster);
}

/* Here we add a hover effect to the tsf-button
   with look=toolbar to match the hover effect
   of all other tsf-buttons */
[tsf-button][look=toolbar]::before {
  position: absolute;
  content: "";
  top: 50%;
  bottom: 50%;
  left: 50%;
  background-color: var(--tsf-color-gallery);
  border-radius: 19px;
  width: 0px;
  transition: all 0.5s;
}

[tsf-button][look=toolbar]:hover::before {
  top: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
}

[tsf-button][look=toolbar]:disabled::before {
  background-color: unset;
}

#global-create-button {
  position: relative;
  left: -500px;
  width: 0px;
}

#global-create-button>div>div {
  width: 180px;
}

:focus::after {
  box-shadow: none;
}

[tsf-list-item__button] {
  height: unset;
  min-height: 38px;
}

[tsf-list-item__button][look=sidepanel] {
  height: 48px;
}

[wizard-host] {
  /* min-*: 0; forces wizard into flexbox boundaries */
  min-height: 0;
}

[tsf-scroll-panel-host] {
  /* With min-height set to 0 the ScrollPanel host is forced
     to stay within the bounds of a flex container. Without this,
     it might overflow its parent without showing scollbars. */
  min-height: 0;
  min-width: 0;
  max-height: 100%;
  max-width: 100%;
}

[tsf-scroll-panel__shadow-top] {
  /* Needed to overlay profile view header background */
  z-index: 1000;
}

[tsf-scroll-panel__shadow-bottom] {
  /* Needed to overlay profile view header background */
  z-index: 1000;
}

[tsf-dialog__container] {
  min-height: 0px;
  /* Needed to force dialog content into its bounds */
  display: flex;
  flex-direction: column;
  max-height: 80%;
}

[tsf-dialog__content] {
  /* Force content to take as much space as possible.
  Without this a forced dialog height, that is bigger
  than header, content and toolbar combined will not
  place the toolbar at the bottom of the dialog, but
  below the content (which does not fill the height) */
  flex: 1;

  /* Force the dialog content into the bounds of
  surrounding flex box and align content inside
  flexbox, as well. With this, overflowing can be
  handled by children and Shapefield's ScrollPanel
  can be used without providing a max height, as
  it already defines min-height:0px and min-width:0px */
  min-height: 0px;
  display: flex;
  flex-direction: column;
}