@import url("https://fonts.googleapis.com/css2?family=Azeret+Mono:wght@300;500&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@375;500;700&display=swap");

@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@325&display=swap');

/*
 * Copyright © 2020-2022 Metreeca srl
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

:root {
	--tool-icon-size: 1.5ex;
}

tool-icon, *.lucide {

	display: inline-block;

	flex-shrink: 0;

	width: var(--tool-icon-size);
	height: var(--tool-icon-size);

}

tool-icon {

	background-size: contain;
	background-repeat: no-repeat;
	background-position: 50%;

}/*
 * Copyright © 2020-2022 Metreeca srl
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

tool-note {

	display: flex;
	flex-direction: column;
	align-items: center;

	grid-row-gap: 1em;

	margin: auto

}

tool-note > *:not(p) {
		white-space: nowrap;
	}

tool-note > :first-child {

		display: flex;
		flex-direction: row;
		align-items: center;

		grid-column-gap: 0.5em

	}

tool-note > :first-child > :first-child {
			font-size: 2em;
		}

tool-note.question > :first-child {

		padding: 0.75ex 0.75em;

		border-style: solid;
		border-radius: 0.5em;

	}

tool-note.warning > :first-child {

		font-weight: 700

	}

tool-note.warning > :first-child:hover:not(:active), tool-note.warning > :first-child > :first-child {
			color: red !important;
		}

tool-note > :empty {
		display: none;
	}

tool-note > div {
		text-align: center;
		white-space: pre;
	}

tool-note > section {

		max-height: 7.5em;

		padding: 0.5em 0;
		border-style: solid none;
		overflow-y: auto;
		overflow-x: hidden

	}

tool-note > section::before, tool-note > section::after {

			display: block;
			content: '';

			position: sticky;
			z-index: 1;

			box-shadow: 0 0 0.5em 0.5em var(--tool--background-color);

		}

tool-note > section::before {
			top: 0;
			transform: translateY(-0.5em);
		}

tool-note > section::after {
			bottom: 0;
			transform: translateY(0.5em);
		}

tool-note > code {
		max-width: 50em;
		padding: 1em 0;
		border-style: solid none;
		overflow: auto;
		white-space: pre-wrap;
		font-size: 0.75em;
	}
/*
 * Copyright © 2020-2022 Metreeca srl
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */


tool-path {

	display: flex;
	flex-direction: row;
	align-items: baseline;

	overflow: hidden

}


tool-path > * {
		font-weight: inherit;
	}


tool-path > *:not(:last-child)::after {
			content: "›";
			padding: 0 0.33em;
		}


tool-path > a:not(:first-child) {
		flex-shrink: 1;
		overflow: hidden;
		text-overflow: ellipsis;
	}


tool-path > :last-child {
		flex-shrink: 1;
		overflow: hidden;
		text-overflow: ellipsis;
	}


tool-path select {
		padding: 0 0.25em;
		border-style: solid;
		border-radius: 0.25em;
	}/*
 * Copyright © 2020-2022 Metreeca srl
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

:root {

	--tool-spin-color: #666;
	--tool-spin-period: 1s;

}

tool-spin {

	display: inline-block;

	margin: auto

}

tool-spin > button {

		display: inline-block;

		width: 100%;
		height: 100%

	}

tool-spin > button > svg.lucide {

			color: var(--tool-spin-color);

			animation: tool-spin var(--tool-spin-period) infinite linear;

		}

@keyframes tool-spin {
	100% {
		transform: rotate(360deg);
	}
}
/*
 * Copyright © 2020-2022 Metreeca srl
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

:root {
  --tool-page-icon-size: 150%;
  --tool-page--header-box-shadow: 0 0 var(--tool-page--header-box-shadow-size)
    var(--tool-page--header-box-shadow-size);
  --tool-page--header-box-shadow-size: 0.75rem;
  --tool-page-tabs-color: #666;
  --tool-page-pane-width: 20rem;
  --tool-page-pane-border-color: #ddd;
  --tool-page-pane-background-color: var(--tool--background-color-edit);
  --tool-page-lock-filter: brightness(0.66) opacity(0.66);
}

.nav-border-bottom {
  border-bottom: solid 1px var(--tool-page-pane-border-color);
}
.nav-border-bottom-unset {
  border-bottom: unset !important;
}
.nav-border-left {
  border-left: solid 1px var(--tool-page-pane-border-color);
}

.navbar-top {
  height: min-content;
}

.row-1 {
  grid-row: 1;
}

.row-2 {
  grid-row: 2;
}
.col-1 {
  grid-column: 1;
}
.col-2 {
  grid-column: 2;
}
.col-3 {
  grid-column: 3;
}
.col-4 {
  grid-column: 4;
}
.col-1-span-3 {
  grid-column: 1 / span 3;
}
.col-2-span-3 {
  grid-column: 2 / span 3;
}
.col-3-span-3 {
  grid-column: 3 / span 3;
}
.col-4-span-4 {
  grid-column: 4 / span 4;
}
.hidden {
  visibility: hidden;
}
.displayNone {
  display: none;
}

.form-grid-2 {
  grid-template-columns: min-content minmax(1.5em, 1fr);
}

/* .form-grid-3 {
	grid-template-columns: min-content 2px minmax(1.5em, 1fr); 
} */

.form-grid-3 {
  grid-template-columns: minmax(min-content, max-content) 2px minmax(1.5em, 1fr);
}

.form-grid-4 {
  grid-template-columns: min-content minmax(min-content, max-content) 2px minmax(
      1.5em,
      1fr
    );
}

.form-grid-2-navbar-right {
  grid-template-columns: minmax(1.5em, 1fr) min-content;
}

.form-grid-3-navbar-right {
  grid-template-columns: 2px minmax(1.5em, 1fr) min-content; /* minmax(min-content, var(--tool-page-pane-width)) */
}

.form-grid-4-navbar-right {
  grid-template-columns: minmax(min-content, max-content) 2px minmax(1.5em, 1fr) min-content;
}

.form-grid-row-enable {
  grid-template-rows: min-content 1fr;
}

.form-grid-row-disable {
  grid-template-rows: unset !important;
}

.position-relative {
  position: relative;
}

.flex-direction-row {
  flex-direction: row;
}

.flex-direction-column {
  flex-direction: column;
}

.tool-icon-home-logo {
  padding-top: calc(2 * var(--tool--box-shadow-size-scrolling));
}

.navbar-settings-menu {
  background: unset;
  display: flex;
  position: absolute;
  padding-left: unset;
  padding-right: unset;
  text-align: initial;
  background-color: white;
  border: 1px solid gray;
  font-size: 24px;
  padding: 8px;
  border-radius: 10px;
}

.navbar-settings-menu-top {
  align-items: start;
  flex-direction: column;
  right: 90px;
  top: 100px;
  z-index: 1000;
  gap: 12px;
}
.navbar-settings-menu-right {
  align-items: end;
  flex-direction: row;
  right: 130px;
  bottom: 85px;
  z-index: 1000;
}
.navbar-settings-menu-left {
  align-items: end;
  flex-direction: row;
  margin-left: 110px;
  bottom: 85px;
  z-index: 1000;
  right: unset !important;
}

.navbar-setting-menu-box-shadow {
  box-shadow: rgba(0, 0, 0, 0.7) 0px 3px 8px;
}

.navbar-settings-positions-list {
  display: flex;
  flex-direction: row;
  padding-left: unset;
  padding-right: unset;
  margin-top: auto;
  margin-bottom: auto;
}

.navbar-settings-positions-list-item {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 5px;
  margin-right: 5px;
  border: 2px solid gray;
  border-radius: 10px;
  background-color: white;
  padding: 5px;
  font-size: 16px;
}
.navbar-settings-positions-list-item > svg {
  width: 40px;
  height: 40px;
}

.navbar-settings-positions-list-item-selected {
  background-color: gray;
  color: white;
}

.main-header-showing-receipts {
  box-shadow: unset !important;
}
tool-page {
  display: block;
  height: 100%

  
}
tool-page > form {
    /* background: linear-gradient(to right, #fffcdc, #d9a7c7);  */
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: grid

    /* MODE - TRAY */
  }
tool-page > form.tray > nav,
      tool-page > form.tray > aside {
        visibility: visible;
      }
tool-page > form.tray > main {
        pointer-events: none;
        filter: var(--tool-page-lock-filter);
      }
tool-page > form {

    /* MODE - BUSY */
  }
tool-page > form.busy {
      pointer-events: none;
      filter: var(--tool-page-lock-filter);
    }
tool-page > form {

    /* MODE - EDIT */
  }
tool-page > form.edit a:not(.alwaysLinkable, [target="_blank"]) {
      pointer-events: none;
      opacity: 0.5;
    }
tool-page > form {

    /* navbar: divider between logo and buttons collections*/
  }
tool-page > form .nav-header-section-divider {
      margin: 0.25em 0;
      margin-top: calc(2 * var(--tool--box-shadow-size-scrolling));
      margin-left: 10%;
      margin-right: 10%;
    }
tool-page > form .nav-header-section-divider-vertical {
      margin: 0.25em 0;
      margin-top: calc(2 * var(--tool--box-shadow-size-scrolling));
      margin-left: calc(2 * var(--tool--box-shadow-size-scrolling));
      margin-right: calc(2 * var(--tool--box-shadow-size-scrolling));
      height: 100%;
      border-left: 1px solid #ccc;
    }
tool-page > form .navbar-settings-menu-button {
      border-radius: "10px";
    }
tool-page > form .navbar-settings-menu-button > svg {
      margin-right: 0em !important;
      margin-bottom: 5px;
      border-radius: 10px;
      padding: 4px;
      background-color: white;
      color: #666;
    }
tool-page > form .navbar-settings-menu-button-open > svg {
      background-color: #666;
      color: white;
    }
tool-page > form {

    /* ALL ELEMENTS INSIDE FORM */
  }
tool-page > form > * {
      visibility: visible;
      grid-row: 1;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      overflow: auto
    }
tool-page > form > * > *:not(hr) {
        flex-shrink: 0;
        padding-left: 1rem;
        padding-right: 1rem;
      }
tool-page > form > * > header {
        z-index: 999;
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        height: 4rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        grid-column-gap: 0.5em;
        white-space: nowrap;
        font-size: 1em;
        font-weight: 600
      }
tool-page > form > * > header * {
          font: inherit;
        }
tool-page > form > * > header > * {
          flex: 1 1;
        }
tool-page > form > * > header > a,
        tool-page > form > * > header > button {
          flex: 0 0;
          min-width: min-content;
          font-size: var(--tool-page-icon-size);
        }
tool-page > form > * > header > span {
          overflow: hidden;
          text-overflow: ellipsis;
        }
tool-page > form > * > header > nav {
          flex: 0 0;
          width: 100px;
          display: flex;
          flex-direction: row-reverse;
          align-items: center;
          grid-column-gap: 0.25em;
          min-width: min-content;
          font-size: 150%
        }
tool-page > form > * > header > nav > tool-spin {
            pointer-events: auto;
          }
tool-page > form > * > header > span-container-toolpath {
          display: flex;
        }
tool-page > form > * > .main-header-collection {
        z-index: 999;
      }
tool-page > form > * > section {
        z-index: 1;
        flex-grow: 1;
        position: relative; /* support absolute content positioning  */
        display: flex;
        flex-direction: column;
        align-items: stretch;
        padding-top: calc(2 * var(--tool--box-shadow-size-scrolling));
        padding-bottom: 1rem;
      }
tool-page > form > * > footer {
        display: flex;
        flex-direction: row;
        align-items: center;
        height: 4rem;
        white-space: nowrap
      }
tool-page > form > * > footer:empty {
          display: none;
        }
:is(tool-page > form > * > footer) > * + * {
          margin-left: 0.25em;
        }
tool-page > form > .flex-direction-row > section {
      flex-direction: row;
      gap: 11px;
    }
tool-page > form {

    /* MARK */
  }
tool-page > form > mark {
      z-index: 710;
      grid-column: 1 / span 4;
      background-color: rgba(255, 255, 255, 0.66)
    }
:is(tool-page > form > mark) ~ * {
        filter: blur(2px);
      }
tool-page > form > mark > header {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between
      }
tool-page > form > mark > header > * {
          margin: 0;
        }
tool-page > form > mark > header > :first-child {
          font-size: var(--tool-page-icon-size);
          pointer-events: none;
        }
tool-page > form > mark > header > :last-child {
          font-size: 150%;
          color: inherit;
          pointer-events: auto;
        }
tool-page > form > mark > section {
        display: grid;
        align-items: center;
        justify-items: center;
        font-size: 1.5em;
      }
tool-page > form > nav {
      flex-shrink: 0;
      color: var(--tool-page-tabs-color);
      z-index: 1;
      visibility: visible;
      border-right: solid 1px var(--tool-page-pane-border-color);
      white-space: nowrap
    }
tool-page > form > nav a,
      tool-page > form > nav a:visited {
        color: inherit;
      }
tool-page > form > nav > :not(header) {
        font-size: 200%;
      }
tool-page > form > nav > header {
        justify-content: center;
      }
tool-page > form > nav > section {
        align-items: center
      }
tool-page > form > nav > section > hr {
          align-self: stretch;
          margin-top: 1.5rem;
          margin-bottom: 1.5rem
        }
tool-page > form > nav > section > hr:last-child {
            display: none;
          }
:is(tool-page > form > nav > section) > *:not(hr) + *:not(hr) {
          margin-top: 0.5rem;
        }
tool-page > form > nav > footer {
        justify-content: center;
      }
tool-page > form > aside {
      overflow: scroll;
      background-color: var(--tool-page-pane-background-color);
      min-width: max-content;
      z-index: 31;
      visibility: visible;
      border-right: solid 1px var(--tool-page-pane-border-color);
      white-space: nowrap;
      box-shadow: unset !important;
    }
tool-page > form > aside {
      scrollbar-width: thin;
      scrollbar-color: #a5a5a5 transparent;
    }
tool-page > form {

    /* Chrome, Edge and Safari */
  }
tool-page > form > aside::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }
tool-page > form > aside::-webkit-scrollbar-track {
      border-radius: 5px;
      background-color: transparent;
    }
tool-page > form > aside::-webkit-scrollbar-track:hover {
      background-color: transparent;
    }
tool-page > form > aside::-webkit-scrollbar-track:active {
      background-color: transparent;
    }
tool-page > form > aside::-webkit-scrollbar-thumb {
      border-radius: 5px;
      background-color: #a5a5a5;
    }
tool-page > form > aside::-webkit-scrollbar-thumb:hover {
      background-color: #9d9d9d;
    }
tool-page > form > aside::-webkit-scrollbar-thumb:active {
      background-color: #9d9d9d;
    }
tool-page > form > main {
      z-index: 30;
      display: grid;
      grid-template-columns: 100%;
      grid-template-rows: min-content 1fr;
      overflow: hidden;
      height: inherit
    }
tool-page > form > main > header {
        box-shadow: var(--tool-page--header-box-shadow)
          var(--tool--background-color);

        position: sticky;
        z-index: 999;
        overflow: hidden;
        grid-row: 1;
      }
tool-page > form > main > section {
        z-index: 998;

        position: relative;

        grid-row: 2;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;

        overflow: auto;
      }
tool-page > form > main > .section-collections {
        overflow: hidden;
      }
tool-page > form > main > .section-tool-sheet-tool-table {
        overflow: unset;
        display: flex;
      }
tool-page > form > main > footer {
        color: var(--tool--color-label);
      }
/*
 * Copyright © 2020-2022 Metreeca srl
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

tool-item {

	width: 100%;

	display: flex;
	flex-direction: column;
	align-items: stretch;

	grid-gap: 0.25em;

	white-space: nowrap

}

tool-item[disabled] {

		color: var(--tool--color-disabled);
		pointer-events: none

	}

tool-item[disabled] * {
			color: inherit;
		}

tool-item[expanded]:not(:last-child) {

		margin-bottom: 0.75em;

	}

tool-item.rule > header {
		padding: 0.25ex 0;
		border-bottom-style: solid;
	}

tool-item > header {

		display: grid;
		align-items: center;

		grid-column-gap: 0.5em;
		grid-template-columns: min-content 1fr min-content

	}

tool-item > header > :empty {
			display: none;
		}

tool-item > header > span {
			overflow: hidden;
			text-overflow: ellipsis;
		}

tool-item > header > nav {

			display: flex;
			flex-direction: row;
			align-items: center;

			grid-column-gap: 0.25em;

			z-index: 1;
			color: #333

		}

tool-item > header > nav:first-child {
				grid-column: 1;
			}

tool-item > header > nav:last-child {
				grid-column: 3;
				transform: scale(0.9) translateY(5%);
			}

tool-item > section {

		display: flex;
		flex-direction: column;
		align-items: stretch;

		margin-left: 0.2em;

		font-size: 80%;

	}
/*
 * Copyright © 2020-2022 Metreeca srl
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

tool-date {

}/*
 * Copyright © 2020-2022 Metreeca srl
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

.tool-input {

	display: inline-flex;
	flex-direction: column;
	align-items: stretch;

	--horizontal-padding: 0.3em;
	--vertical-padding: 0.15em

}

.tool-input .placeholder {
		white-space: nowrap;
		font-size: 90%;
		color: var(--tool--color-placeholder);
	}

.tool-input textarea,
	.tool-input input[type=text],
	.tool-input input[type=date],
	.tool-input input[type=email],
	.tool-input input[type=number],
	.tool-input input[type=password] {

		box-sizing: content-box;
		padding: var(--vertical-padding) var(--horizontal-padding);
		border-radius: 0.25em;
		border-style: solid

	}

:is(.tool-input textarea,.tool-input input[type=text],.tool-input input[type=date],.tool-input input[type=email],.tool-input input[type=number],.tool-input input[type=password]):not(:disabled):not(:read-only) {
			background-color: var(--tool--background-color-edit);
		}

.tool-input textarea {
		resize: vertical;
	}

.tool-input select {

		box-sizing: content-box;
		padding: var(--vertical-padding) var(--horizontal-padding);
		border-style: solid;
		border-radius: 0.25em

	}

.tool-input select:not(:disabled) {
			background-color: var(--tool--background-color-edit);
		}

.tool-input select:focus {
			box-shadow: var(--tool--box-shadow-focus);
		}

.tool-input select:invalid {
			border-color: var(--tool--color-invalid);
		}

.tool-input small {
		color: var(--tool--color-placeholder);
		font-size: 75%;
		transform: translateY(15%);
	}


/*
 * Copyright © 2020-2022 Metreeca srl
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

tool-field,
tool-facet {

	display: flex;
	flex-direction: column;
	align-items: stretch;

	grid-row-gap: 0.5em

	/* transform: scale(1); /* local stacking context */

}

tool-field.expanded:not(.compact):not(:first-child), tool-facet.expanded:not(.compact):not(:first-child) {
			margin-top: 0.5em;
		}

tool-field.expanded:not(.compact):not(:last-child), tool-facet.expanded:not(.compact):not(:last-child) {
			margin-bottom: 0.5em;
		}

tool-field > header, tool-facet > header {

		display: flex;
		flex-direction: row;
		align-items: center;

		grid-column-gap: 0.25em;

		font-weight: 500

	}

:is(tool-field > header) + *, :is(tool-facet > header) + * {
			font-size: 90%;
		}

tool-field > header > nav, tool-facet > header > nav {

			display: flex;
			flex-direction: row;
			align-items: center;

			grid-column-gap: 0.1em;

			margin-left: auto;

			color: red;

		}

tool-field > header > input, tool-facet > header > input {

			width: 0;
			flex-grow: 1

		}

tool-field > header > input:focus, tool-facet > header > input:focus {
				box-shadow: none;
			}

tool-field > section:empty, tool-facet > section:empty {
			display: none;
		}


tool-handle-setup > dl {

		display: grid;
		grid-template-columns: min-content 1fr;
		align-items: center;

		grid-gap: 0 0.5em;

		font-weight: 500

	}


tool-handle-setup > dl > dt, tool-handle-setup > dl > dd {
			margin: 0 !important;
			font-weight: inherit;
		}


tool-handle-setup > dl > dt {
			text-align: right;
			color: var(--tool--color-label);
		}


tool-handle-setup > dl > dd > * {
				width: 100%;
			}


tool-handle-setup > dl > hr {

			grid-column: span 2;

			margin: 0.5em 0;

		}.react-datepicker__tab-loop {
  position: fixed;
  z-index: 1000 !important;
  width: 500px;
}
.react-datepicker-popper {
  z-index: 4999 !important;
}
.react-datepicker-popper  * {
  z-index: 4999 !important;
}
.datepicker-custom-input {
  display: flex;
  flex-direction: row;
  gap: 5px;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

.datepicker-custom-input input {
  width: 100%;
}
.input-container-for-firefox input {
  position: absolute;
  overflow: hidden;
}
.datepicker-custom-input input::-webkit-calendar-picker-indicator {
  background: none;
  display: none;    
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.datepicker-custom-input input[type="date"]::-webkit-calendar-picker-indicator {
  background: none;
  display: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.datepicker-custom-input input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  background: none;
  display: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.datepicker-custom-input input[type="time"]::-webkit-calendar-picker-indicator {
  background: none;
  display: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.custom-input-icon-container {
  position: absolute;
  right: 0;
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: center;
  justify-content: center;
}
.custom-input-ipad-span-value {
  width: 100%;
}@charset "UTF-8";
.react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow, .react-datepicker__navigation-icon::before {
  border-color: #ccc;
  border-style: solid;
  border-width: 3px 3px 0 0;
  content: "";
  display: block;
  height: 9px;
  position: absolute;
  top: 6px;
  width: 9px;
}
.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
  margin-left: -4px;
  position: absolute;
  width: 0;
}
.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
  box-sizing: content-box;
  position: absolute;
  border: 8px solid transparent;
  height: 0;
  width: 1px;
  content: "";
  z-index: -1;
  border-width: 8px;
  left: -8px;
}
.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {
  border-bottom-color: #aeaeae;
}

.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
  top: 0;
  margin-top: -8px;
}
.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
  border-top: none;
  border-bottom-color: #f0f0f0;
}
.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
  top: 0;
}
.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {
  top: -1px;
  border-bottom-color: #aeaeae;
}

.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {
  bottom: 0;
  margin-bottom: -8px;
}
.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after {
  border-bottom: none;
  border-top-color: #fff;
}
.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after {
  bottom: 0;
}
.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before {
  bottom: -1px;
  border-top-color: #aeaeae;
}

.react-datepicker-wrapper {
  display: inline-block;
  padding: 0;
  border: 0;
  width: 100%;
}

.react-datepicker {
  font-family: "Helvetica Neue", helvetica, arial, sans-serif;
  font-size: 0.8rem;
  background-color: #fff;
  color: #000;
  border: 1px solid #aeaeae;
  border-radius: 0.3rem;
  display: inline-block;
  position: relative;
}

.react-datepicker--time-only .react-datepicker__triangle {
  left: 35px;
}
.react-datepicker--time-only .react-datepicker__time-container {
  border-left: 0;
}
.react-datepicker--time-only .react-datepicker__time,
.react-datepicker--time-only .react-datepicker__time-box {
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}

.react-datepicker__triangle {
  position: absolute;
  left: 50px;
}

.react-datepicker-popper {
  z-index: 1;
}
.react-datepicker-popper[data-placement^=bottom] {
  padding-top: 10px;
}
.react-datepicker-popper[data-placement=bottom-end] .react-datepicker__triangle, .react-datepicker-popper[data-placement=top-end] .react-datepicker__triangle {
  left: auto;
  right: 50px;
}
.react-datepicker-popper[data-placement^=top] {
  padding-bottom: 10px;
}
.react-datepicker-popper[data-placement^=right] {
  padding-left: 8px;
}
.react-datepicker-popper[data-placement^=right] .react-datepicker__triangle {
  left: auto;
  right: 42px;
}
.react-datepicker-popper[data-placement^=left] {
  padding-right: 8px;
}
.react-datepicker-popper[data-placement^=left] .react-datepicker__triangle {
  left: 42px;
  right: auto;
}

.react-datepicker__header {
  text-align: center;
  background-color: #f0f0f0;
  border-bottom: 1px solid #aeaeae;
  border-top-left-radius: 0.3rem;
  padding: 8px 0;
  position: relative;
}
.react-datepicker__header--time {
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
}
.react-datepicker__header--time:not(.react-datepicker__header--time--only) {
  border-top-left-radius: 0;
}
.react-datepicker__header:not(.react-datepicker__header--has-time-select) {
  border-top-right-radius: 0.3rem;
}

.react-datepicker__year-dropdown-container--select,
.react-datepicker__month-dropdown-container--select,
.react-datepicker__month-year-dropdown-container--select,
.react-datepicker__year-dropdown-container--scroll,
.react-datepicker__month-dropdown-container--scroll,
.react-datepicker__month-year-dropdown-container--scroll {
  display: inline-block;
  margin: 0 15px;
}

.react-datepicker__current-month,
.react-datepicker-time__header,
.react-datepicker-year-header {
  margin-top: 0;
  color: #000;
  font-weight: bold;
  font-size: 0.944rem;
}

.react-datepicker-time__header {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.react-datepicker__navigation {
  align-items: center;
  background: none;
  display: flex;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  position: absolute;
  top: 2px;
  padding: 0;
  border: none;
  z-index: 1;
  height: 32px;
  width: 32px;
  text-indent: -999em;
  overflow: hidden;
}
.react-datepicker__navigation--previous {
  left: 2px;
}
.react-datepicker__navigation--next {
  right: 2px;
}
.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
  right: 85px;
}
.react-datepicker__navigation--years {
  position: relative;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.react-datepicker__navigation--years-previous {
  top: 4px;
}
.react-datepicker__navigation--years-upcoming {
  top: -4px;
}
.react-datepicker__navigation:hover *::before {
  border-color: #a6a6a6;
}

.react-datepicker__navigation-icon {
  position: relative;
  top: -1px;
  font-size: 20px;
  width: 0;
}
.react-datepicker__navigation-icon--next {
  left: -2px;
}
.react-datepicker__navigation-icon--next::before {
  transform: rotate(45deg);
  left: -7px;
}
.react-datepicker__navigation-icon--previous {
  right: -2px;
}
.react-datepicker__navigation-icon--previous::before {
  transform: rotate(225deg);
  right: -7px;
}

.react-datepicker__month-container {
  float: left;
}

.react-datepicker__year {
  margin: 0.4rem;
  text-align: center;
}
.react-datepicker__year-wrapper {
  display: flex;
  flex-wrap: wrap;
  max-width: 180px;
}
.react-datepicker__year .react-datepicker__year-text {
  display: inline-block;
  width: 4rem;
  margin: 2px;
}

.react-datepicker__month {
  margin: 0.4rem;
  text-align: center;
}
.react-datepicker__month .react-datepicker__month-text,
.react-datepicker__month .react-datepicker__quarter-text {
  display: inline-block;
  width: 4rem;
  margin: 2px;
}

.react-datepicker__input-time-container {
  clear: both;
  width: 100%;
  float: left;
  margin: 5px 0 10px 15px;
  text-align: left;
}
.react-datepicker__input-time-container .react-datepicker-time__caption {
  display: inline-block;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container {
  display: inline-block;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {
  display: inline-block;
  margin-left: 10px;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {
  width: auto;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time] {
  -moz-appearance: textfield;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {
  margin-left: 5px;
  display: inline-block;
}

.react-datepicker__time-container {
  float: right;
  border-left: 1px solid #aeaeae;
  width: 85px;
}
.react-datepicker__time-container--with-today-button {
  display: inline;
  border: 1px solid #aeaeae;
  border-radius: 0.3rem;
  position: absolute;
  right: -87px;
  top: 0;
}
.react-datepicker__time-container .react-datepicker__time {
  position: relative;
  background: white;
  border-bottom-right-radius: 0.3rem;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
  width: 85px;
  overflow-x: hidden;
  margin: 0 auto;
  text-align: center;
  border-bottom-right-radius: 0.3rem;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
  list-style: none;
  margin: 0;
  height: calc(195px + (1.7rem / 2));
  overflow-y: scroll;
  padding-right: 0;
  padding-left: 0;
  width: 100%;
  box-sizing: content-box;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
  height: 30px;
  padding: 5px 10px;
  white-space: nowrap;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
  cursor: pointer;
  background-color: #f0f0f0;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
  background-color: #216ba5;
  color: white;
  font-weight: bold;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
  background-color: #216ba5;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
  color: #ccc;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
  cursor: default;
  background-color: transparent;
}

.react-datepicker__week-number {
  color: #ccc;
  display: inline-block;
  width: 1.7rem;
  line-height: 1.7rem;
  text-align: center;
  margin: 0.166rem;
}
.react-datepicker__week-number.react-datepicker__week-number--clickable {
  cursor: pointer;
}
.react-datepicker__week-number.react-datepicker__week-number--clickable:hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}

.react-datepicker__day-names,
.react-datepicker__week {
  white-space: nowrap;
}

.react-datepicker__day-names {
  margin-bottom: -8px;
}

.react-datepicker__day-name,
.react-datepicker__day,
.react-datepicker__time-name {
  color: #000;
  display: inline-block;
  width: 1.7rem;
  line-height: 1.7rem;
  text-align: center;
  margin: 0.166rem;
}

.react-datepicker__month--selected, .react-datepicker__month--in-selecting-range, .react-datepicker__month--in-range,
.react-datepicker__quarter--selected,
.react-datepicker__quarter--in-selecting-range,
.react-datepicker__quarter--in-range {
  border-radius: 0.3rem;
  background-color: #216ba5;
  color: #fff;
}
.react-datepicker__month--selected:hover, .react-datepicker__month--in-selecting-range:hover, .react-datepicker__month--in-range:hover,
.react-datepicker__quarter--selected:hover,
.react-datepicker__quarter--in-selecting-range:hover,
.react-datepicker__quarter--in-range:hover {
  background-color: #1d5d90;
}
.react-datepicker__month--disabled,
.react-datepicker__quarter--disabled {
  color: #ccc;
  pointer-events: none;
}
.react-datepicker__month--disabled:hover,
.react-datepicker__quarter--disabled:hover {
  cursor: default;
  background-color: transparent;
}

.react-datepicker__day,
.react-datepicker__month-text,
.react-datepicker__quarter-text,
.react-datepicker__year-text {
  cursor: pointer;
}
.react-datepicker__day:hover,
.react-datepicker__month-text:hover,
.react-datepicker__quarter-text:hover,
.react-datepicker__year-text:hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}
.react-datepicker__day--today,
.react-datepicker__month-text--today,
.react-datepicker__quarter-text--today,
.react-datepicker__year-text--today {
  font-weight: bold;
}
.react-datepicker__day--highlighted,
.react-datepicker__month-text--highlighted,
.react-datepicker__quarter-text--highlighted,
.react-datepicker__year-text--highlighted {
  border-radius: 0.3rem;
  background-color: #3dcc4a;
  color: #fff;
}
.react-datepicker__day--highlighted:hover,
.react-datepicker__month-text--highlighted:hover,
.react-datepicker__quarter-text--highlighted:hover,
.react-datepicker__year-text--highlighted:hover {
  background-color: #32be3f;
}
.react-datepicker__day--highlighted-custom-1,
.react-datepicker__month-text--highlighted-custom-1,
.react-datepicker__quarter-text--highlighted-custom-1,
.react-datepicker__year-text--highlighted-custom-1 {
  color: magenta;
}
.react-datepicker__day--highlighted-custom-2,
.react-datepicker__month-text--highlighted-custom-2,
.react-datepicker__quarter-text--highlighted-custom-2,
.react-datepicker__year-text--highlighted-custom-2 {
  color: green;
}
.react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range,
.react-datepicker__month-text--selected,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--selected,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--selected,
.react-datepicker__year-text--in-selecting-range,
.react-datepicker__year-text--in-range {
  border-radius: 0.3rem;
  background-color: #216ba5;
  color: #fff;
}
.react-datepicker__day--selected:hover, .react-datepicker__day--in-selecting-range:hover, .react-datepicker__day--in-range:hover,
.react-datepicker__month-text--selected:hover,
.react-datepicker__month-text--in-selecting-range:hover,
.react-datepicker__month-text--in-range:hover,
.react-datepicker__quarter-text--selected:hover,
.react-datepicker__quarter-text--in-selecting-range:hover,
.react-datepicker__quarter-text--in-range:hover,
.react-datepicker__year-text--selected:hover,
.react-datepicker__year-text--in-selecting-range:hover,
.react-datepicker__year-text--in-range:hover {
  background-color: #1d5d90;
}
.react-datepicker__day--keyboard-selected,
.react-datepicker__month-text--keyboard-selected,
.react-datepicker__quarter-text--keyboard-selected,
.react-datepicker__year-text--keyboard-selected {
  border-radius: 0.3rem;
  background-color: #bad9f1;
  color: rgb(0, 0, 0);
}
.react-datepicker__day--keyboard-selected:hover,
.react-datepicker__month-text--keyboard-selected:hover,
.react-datepicker__quarter-text--keyboard-selected:hover,
.react-datepicker__year-text--keyboard-selected:hover {
  background-color: #1d5d90;
}
.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
.react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
.react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
.react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range) {
  background-color: rgba(33, 107, 165, 0.5);
}
.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range) {
  background-color: #f0f0f0;
  color: #000;
}
.react-datepicker__day--disabled,
.react-datepicker__month-text--disabled,
.react-datepicker__quarter-text--disabled,
.react-datepicker__year-text--disabled {
  cursor: default;
  color: #ccc;
}
.react-datepicker__day--disabled:hover,
.react-datepicker__month-text--disabled:hover,
.react-datepicker__quarter-text--disabled:hover,
.react-datepicker__year-text--disabled:hover {
  background-color: transparent;
}

.react-datepicker__month-text.react-datepicker__month--selected:hover, .react-datepicker__month-text.react-datepicker__month--in-range:hover, .react-datepicker__month-text.react-datepicker__quarter--selected:hover, .react-datepicker__month-text.react-datepicker__quarter--in-range:hover,
.react-datepicker__quarter-text.react-datepicker__month--selected:hover,
.react-datepicker__quarter-text.react-datepicker__month--in-range:hover,
.react-datepicker__quarter-text.react-datepicker__quarter--selected:hover,
.react-datepicker__quarter-text.react-datepicker__quarter--in-range:hover {
  background-color: #216ba5;
}
.react-datepicker__month-text:hover,
.react-datepicker__quarter-text:hover {
  background-color: #f0f0f0;
}

.react-datepicker__input-container {
  position: relative;
  display: inline-block;
  width: 100%;
}

.react-datepicker__year-read-view,
.react-datepicker__month-read-view,
.react-datepicker__month-year-read-view {
  border: 1px solid transparent;
  border-radius: 0.3rem;
  position: relative;
}
.react-datepicker__year-read-view:hover,
.react-datepicker__month-read-view:hover,
.react-datepicker__month-year-read-view:hover {
  cursor: pointer;
}
.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {
  border-top-color: #b3b3b3;
}
.react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow {
  transform: rotate(135deg);
  right: -16px;
  top: 0;
}

.react-datepicker__year-dropdown,
.react-datepicker__month-dropdown,
.react-datepicker__month-year-dropdown {
  background-color: #f0f0f0;
  position: absolute;
  width: 50%;
  left: 25%;
  top: 30px;
  z-index: 1;
  text-align: center;
  border-radius: 0.3rem;
  border: 1px solid #aeaeae;
}
.react-datepicker__year-dropdown:hover,
.react-datepicker__month-dropdown:hover,
.react-datepicker__month-year-dropdown:hover {
  cursor: pointer;
}
.react-datepicker__year-dropdown--scrollable,
.react-datepicker__month-dropdown--scrollable,
.react-datepicker__month-year-dropdown--scrollable {
  height: 150px;
  overflow-y: scroll;
}

.react-datepicker__year-option,
.react-datepicker__month-option,
.react-datepicker__month-year-option {
  line-height: 20px;
  width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.react-datepicker__year-option:first-of-type,
.react-datepicker__month-option:first-of-type,
.react-datepicker__month-year-option:first-of-type {
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
}
.react-datepicker__year-option:last-of-type,
.react-datepicker__month-option:last-of-type,
.react-datepicker__month-year-option:last-of-type {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}
.react-datepicker__year-option:hover,
.react-datepicker__month-option:hover,
.react-datepicker__month-year-option:hover {
  background-color: #ccc;
}
.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {
  border-bottom-color: #b3b3b3;
}
.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {
  border-top-color: #b3b3b3;
}
.react-datepicker__year-option--selected,
.react-datepicker__month-option--selected,
.react-datepicker__month-year-option--selected {
  position: absolute;
  left: 15px;
}

.react-datepicker__close-icon {
  cursor: pointer;
  background-color: transparent;
  border: 0;
  outline: 0;
  padding: 0 6px 0 0;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
}
.react-datepicker__close-icon::after {
  cursor: pointer;
  background-color: #216ba5;
  color: #fff;
  border-radius: 50%;
  height: 16px;
  width: 16px;
  padding: 2px;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  content: "×";
}

.react-datepicker__today-button {
  background: #f0f0f0;
  border-top: 1px solid #aeaeae;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
  padding: 5px 0;
  clear: left;
}

.react-datepicker__portal {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  left: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  z-index: 2147483647;
}
.react-datepicker__portal .react-datepicker__day-name,
.react-datepicker__portal .react-datepicker__day,
.react-datepicker__portal .react-datepicker__time-name {
  width: 3rem;
  line-height: 3rem;
}
@media (max-width: 400px), (max-height: 550px) {
  .react-datepicker__portal .react-datepicker__day-name,
  .react-datepicker__portal .react-datepicker__day,
  .react-datepicker__portal .react-datepicker__time-name {
    width: 2rem;
    line-height: 2rem;
  }
}
.react-datepicker__portal .react-datepicker__current-month,
.react-datepicker__portal .react-datepicker-time__header {
  font-size: 1.44rem;
}

.react-datepicker__children-container {
  width: 13.8rem;
  margin: 0.4rem;
  padding-right: 0.2rem;
  padding-left: 0.2rem;
  height: auto;
}

.react-datepicker__aria-live {
  position: absolute;
  clip-path: circle(0);
  border: 0;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  width: 1px;
  white-space: nowrap;
}
/*
 * Copyright © 2020-2022 Metreeca srl
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

tool-stats {

	display: flex;
	align-items: stretch;

	--expand: 0.25em;

	margin-left: calc(-1 * var(--expand));
	margin-right: calc(-1 * var(--expand))

}

tool-stats > input {

		flex: 1 1 auto;

		display: block;
		border-style: solid;
		background-color: var(--tool--background-color-edit)

	}

tool-stats > input::-webkit-calendar-picker-indicator {
			margin: 0 0.1em;
			font-size: 66%;
		}

tool-stats > tool-stats-container {

		flex: 1 1 auto;

		display: block;
		border-style: solid;
		background-color: var(--tool--background-color-edit)

	}

tool-stats > tool-stats-container::-webkit-calendar-picker-indicator {
			margin: 0 0.1em;
			font-size: 66%;
		}

tool-stats.row {

		flex-direction: row;

		grid-column-gap: 0.25em

	}

tool-stats.row > input {

			width: 0;

			padding: 0.3em 0.1em 0.2em 0.5em

		}

tool-stats.row > input:first-of-type {
				border-top-left-radius: 0.5em;
				border-bottom-left-radius: 0.5em;
			}

tool-stats.row > input:last-of-type {
				border-top-right-radius: 0.5em;
				border-bottom-right-radius: 0.5em;
			}

tool-stats.row > tool-stats-container {

			width: 0;

			padding: 0.3em 0.1em 0.2em 0.5em

		}

tool-stats.row > tool-stats-container:first-of-type {
				border-top-left-radius: 0.5em;
				border-bottom-left-radius: 0.5em;
			}

tool-stats.row > tool-stats-container:last-of-type {
				border-top-right-radius: 0.5em;
				border-bottom-right-radius: 0.5em;
			}

tool-stats.col {

		flex-direction: column;

		grid-row-gap: 0.25em

	}

tool-stats.col > input {

			height: 2em;

			padding: 0.3em 0.5em 0.2em

		}

tool-stats.col > input:first-child {
				border-top-left-radius: 0.5em;
				border-top-right-radius: 0.5em;
			}

tool-stats.col > input:last-child {
				border-bottom-left-radius: 0.5em;
				border-bottom-right-radius: 0.5em;
			}

tool-stats.col > .tool-stats-container {

			height: 2em;

			padding: 0.3em 0.5em 0.2em

		}

tool-stats.col > .tool-stats-container:first-child {
				border-top-left-radius: 0.5em;
				border-top-right-radius: 0.5em;
			}

tool-stats.col > .tool-stats-container:last-child {
				border-bottom-left-radius: 0.5em;
				border-bottom-right-radius: 0.5em;
			}

.input-temporal-ipad-ios {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.no-arrows::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.input-wrapper {
	width: 100px;
	display: flex; 
	flex-direction: row;
}
.no-arrows{
	border: 1px solid #CCC;
	border-radius: 0.5em;
	padding: 0.25em;
	padding-left: 0.5em;
	width: 120px;
}

.no-arrows-x{
	color: #999;
	margin: 0 3px 3px 3px;
	font-size: initial;
}

/* Firefox */
.no-arrows[type=number] {
  -moz-appearance: textfield;
}/*
 * Copyright © 2020-2022 Metreeca srl
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

tool-facet.facet-disabled-layer {
		box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2); 
		border-radius: 5px;
		background-color: rgba(255, 255, 255, .15);
		backdrop-filter: blur(5px);
	}

tool-facet {

	position: relative

}

tool-facet:not(.setup) {

		grid-row-gap: 0.25em

	}

tool-facet:not(.setup):not(:first-child) {
			margin-top: 0.25em;
		}

tool-facet:not(.setup):not(:last-child) {
			margin-bottom: 0.25em;
		}

tool-facet:not(.setup) > header {

			min-height: 1.25em;

			margin: 0 -0.5em -0.9em -0.25em;

			font-size: 0.8em !important

		}

tool-facet:not(.setup) > header > * {
				z-index: 1;
			}

tool-facet:not(.setup) > header > :first-child {

				margin-top: -0.5em;
				margin-left: 0.5em;

				padding-right: 0.3em;
				padding-left: 0.3em;

				font-size: 0.75em;

			}

tool-facet:not(.setup) > header > :last-child {
				padding-left: 0.25em;
			}/*
 * Copyright © 2020-2022 Metreeca srl
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/* media query for ipads and desktops */
@media only screen and (min-width: 768px){
    tool-terms{
		width:  18.75em;
	}
}

tool-terms {

	display: flex;
	flex-direction: column;
	align-items: stretch;

	margin: 0 -0.25em;

	border-style: solid;
	border-radius: 0.5em;

	overflow: hidden;

	font-size: 80%

}

tool-terms.focused {
		box-shadow: var(--tool--box-shadow-focus);
	}

tool-terms > * {

		margin: 0;

		padding-left: 0.5em;
		padding-right: 0.5em

	}

tool-terms > *:empty {
			display: none;
		}

tool-terms > header {

		display: grid;
		align-items: center;

		grid-template-columns: min-content 1fr min-content;
		grid-column-gap: 0.25em;

		padding-top: 0.33em;
		padding-bottom: 0.25em

	}

:is(tool-terms > header) ~ * {

			padding-top: 0.33em;
			padding-bottom: 0.33em;

			border-top-style: solid;

		}

tool-terms > header > svg {

			color: var(--tool--color-light);

			background-color: transparent;
			transform: scale(0.9);

			pointer-events: none;

		}

tool-terms > header > input:focus {
				box-shadow: none;
			}

tool-terms > small {

		padding-top: 0.66em;
		padding-bottom: 0.5em;

		border-top-style: solid;

	}

tool-terms > section {

		display: grid;
		grid-template-columns: min-content 1fr  min-content;
		align-items: center;
		justify-items: stretch;

		grid-column-gap: 0.5em

	}

tool-terms > section > * {

			display: contents

		}

tool-terms > section > *.unavailable > * {
				color: var(--tool--color-disabled) !important;
				display: none;
			}

tool-terms > section > * > input {
				align-self: center;
			}

tool-terms > section > * > a, tool-terms > section > * > span {
				overflow: hidden;
				text-overflow: ellipsis;
			}

tool-terms > section > * > span:empty {

				color: var(--tool--color-label)
			}

tool-terms > section > * > span:empty::before {
					content: "‹" attr(data-placeholder) "›";
				}

tool-terms > section > * > button,
			tool-terms > section > * > small {

				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: end;

				grid-column-gap: 0.25em;

				font-size: 70%;
				color: #999;
			}

.blank-color{
	color: #BBB !important;
	cursor: default !important;
}/*
 * Copyright © 2020-2022 Metreeca srl
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */


tool-field.grouping + tool-field:not(.grouping) {
		margin-top: 0.5em;
		padding-top: 0.5em;
		border-top-style: solid;
	}/*
 * Copyright © 2020-2022 Metreeca srl
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

tool-term.disabled, tool-term.disabled * {
		color: var(--tool--color-disabled);
	}
/*
 * Copyright © 2020-2022 Metreeca srl
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

tool-table {
	overflow: hidden;

	--cell-max-width: 30em;

	z-index: 1; /* scroll over header and other elements in the same stacking context */

	flex-grow: 1;

	font-size: 0.8em;

	background-color: var(--tool--background-color);

	box-shadow: var(--tool--box-shadow-scrolling) var(--tool--background-color)
	
}

tool-table .dragging {
		background-color: red;	
	}

tool-table .not-display {
		display: none;
	}

tool-table .table-empty > svg {
		display: block;
		margin: auto;
		width: 10%;
		height: 10%;
		color: #ccc;
		opacity: 0.38;		
	}

tool-table > table {

		display: grid;
		align-items: stretch;
		justify-items: stretch;

		grid-auto-rows: min-content

	}

tool-table > table > thead, tool-table > table > tbody {

			display: contents

		}

tool-table > table > thead > tr, tool-table > table > tbody > tr {

				display: contents

			}

tool-table > table > thead > tr > th, tool-table > table > tbody > tr > th, tool-table > table > thead > tr > td, tool-table > table > tbody > tr > td {

					flex-shrink: 1;

					display: flex;
					flex-direction: row;
					align-items: center;

					padding: 0.4rem 0.5rem;
					border-bottom: solid 1px #EEE;

					max-width: var(--cell-max-width)

				}

tool-table > table > thead > tr > th > *, tool-table > table > tbody > tr > th > *, tool-table > table > thead > tr > td > *, tool-table > table > tbody > tr > td > * {
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

tool-table > table > thead > tr > th > .right, tool-table > table > tbody > tr > th > .right, tool-table > table > thead > tr > td > .right, tool-table > table > tbody > tr > td > .right {
						margin-left: auto;
						margin-right: 1em; /* align with sorting placeholder in th */
					}

tool-table > table > thead > tr > th:first-child, tool-table > table > tbody > tr > th:first-child {
					z-index: 4;
				}

tool-table > table > thead > tr > th, tool-table > table > tbody > tr > th {

					z-index: 3;

					position: sticky;
					top: 0;

					padding-top: 0;

				}

tool-table > table > thead > tr > :first-child, tool-table > table > tbody > tr > :first-child {

					z-index: 2;

					position: sticky;
					left: 0;
					padding-left: 0.5rem;
					padding-right: 0.25rem;

				}

tool-table > table > thead {

			color: var(--tool--color-label)

		}

tool-table > table > thead > tr > th {

				display: flex;
				flex-direction: row;
				align-items: center;

				border-bottom: solid 1px #DDD;
				margin-bottom: 0.75rem;
				cursor: move;

				background-color: ligthgrey

			}

tool-table > table > thead > tr > th > button {

					width: 100%;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;

					grid-column-gap: 0.25em;

					font-weight: 700

				}

tool-table > table > thead > tr > th > button > svg:last-child {
						color: #999;
						transform: translateY(5%);
					}

tool-table > table > thead > tr > th.right > button {
					justify-content: end;
				}

tool-table > table > tbody > tr {

			font-size: 80%

		}

tool-table > table > tbody > tr.group > td {
					max-width: none;
				}

tool-table > table > tbody > tr.group * {
					font-weight: 700;
				}

tool-table > table > tbody > tr:nth-child(odd) {

				background-color: #FFF

			}

tool-table > table > tbody > tr:nth-child(odd) > :first-child,
				tool-table > table > tbody > tr:nth-child(odd) > :last-child {
					/*box-shadow: 0 0 1em 0.25em #FFF;*/
				}

tool-table > table > tbody > tr:nth-child(even) {

				background-color: #F4F4F4

			}

tool-table > table > tbody > tr:nth-child(even) > :first-child,
				tool-table > table > tbody > tr:nth-child(even) > :last-child {
					/*box-shadow: 0 0 1em 0.25em #F4F4F4;*/
				}

tool-table .disabled, tool-table .disabled * {
		color: #DDD;
	}

tool-table-report-detail {
	overflow: hidden;

	--cell-max-width: 30em;

	z-index: 1; /* scroll over header and other elements in the same stacking context */

	flex-grow: 1;

	font-size: 0.8em;

	background-color: var(--tool--background-color);

	box-shadow: var(--tool--box-shadow-scrolling) var(--tool--background-color)
	
}

tool-table-report-detail .dragging {
		background-color: red;	
	}

tool-table-report-detail .not-display {
		display: none;
	}

tool-table-report-detail .table-empty > svg {
		display: block;
		margin: auto;
		width: 10%;
		height: 10%;
		color: #ccc;
		opacity: 0.38;		
	}

tool-table-report-detail > table {

		display: grid;
		align-items: stretch;
		justify-items: stretch;

		grid-auto-rows: min-content;
		overflow-x: scroll;
		height: 100%

	}

tool-table-report-detail > table > thead, tool-table-report-detail > table > tbody {

			display: contents

		}

tool-table-report-detail > table > thead > tr, tool-table-report-detail > table > tbody > tr {

				display: contents

			}

tool-table-report-detail > table > thead > tr > th, tool-table-report-detail > table > tbody > tr > th, tool-table-report-detail > table > thead > tr > td, tool-table-report-detail > table > tbody > tr > td {

					flex-shrink: 1;

					display: flex;
					flex-direction: row;
					align-items: center;

					padding: 0.4rem 0.5rem;
					border-bottom: solid 1px #EEE;

					max-width: var(--cell-max-width)

				}

tool-table-report-detail > table > thead > tr > th > *, tool-table-report-detail > table > tbody > tr > th > *, tool-table-report-detail > table > thead > tr > td > *, tool-table-report-detail > table > tbody > tr > td > * {
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

tool-table-report-detail > table > thead > tr > th > .right, tool-table-report-detail > table > tbody > tr > th > .right, tool-table-report-detail > table > thead > tr > td > .right, tool-table-report-detail > table > tbody > tr > td > .right {
						margin-left: auto;
						margin-right: 1em; /* align with sorting placeholder in th */
					}

tool-table-report-detail > table > thead > tr > th:first-child, tool-table-report-detail > table > tbody > tr > th:first-child {
					z-index: 4;
				}

tool-table-report-detail > table > thead > tr > th, tool-table-report-detail > table > tbody > tr > th {

					z-index: 3;

					position: sticky;
					top: 0;

					padding-top: 0;

				}

tool-table-report-detail > table > thead > tr > :first-child, tool-table-report-detail > table > tbody > tr > :first-child {

					z-index: 2;

					position: sticky;
					left: 0;

					padding-left: 0.5rem;
					padding-right: 0.25rem;

				}

tool-table-report-detail > table > thead {

			color: var(--tool--color-label)

		}

tool-table-report-detail > table > thead > tr > th {

				display: flex;
				flex-direction: row;
				align-items: center;

				border-bottom: solid 1px #DDD;
				margin-bottom: 0.75rem;
				cursor: move;

				background-color: ligthgrey

			}

tool-table-report-detail > table > thead > tr > th > button {

					width: 100%;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;

					grid-column-gap: 0.25em;

					font-weight: 700

				}

tool-table-report-detail > table > thead > tr > th > button > svg:last-child {
						color: #999;
						transform: translateY(5%);
					}

tool-table-report-detail > table > thead > tr > th.right > button {
					justify-content: end;
				}

tool-table-report-detail > table > tbody > tr {

			font-size: 80%

		}

tool-table-report-detail > table > tbody > tr.group > td {
					max-width: none;
				}

tool-table-report-detail > table > tbody > tr.group * {
					font-weight: 700;
				}

tool-table-report-detail > table > tbody > tr:nth-child(odd) {

				background-color: #FFF

			}

tool-table-report-detail > table > tbody > tr:nth-child(odd) > :first-child,
				tool-table-report-detail > table > tbody > tr:nth-child(odd) > :last-child {
					/*box-shadow: 0 0 1em 0.25em #FFF;*/
				}

tool-table-report-detail > table > tbody > tr:nth-child(even) {

				background-color: #F4F4F4

			}

tool-table-report-detail > table > tbody > tr:nth-child(even) > :first-child,
				tool-table-report-detail > table > tbody > tr:nth-child(even) > :last-child {
					/*box-shadow: 0 0 1em 0.25em #F4F4F4;*/
				}

tool-table-report-detail .disabled, tool-table-report-detail .disabled * {
		color: #DDD;
	}

/* paginations styles */	
.eye-table-container {
	position: relative;
	height: 100%;
	overflow: scroll;
	padding-bottom: 60vh;
}
.no-scroll {
	overflow: hidden !important;
}
.eye-table-pagination-main-container {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: min-content min-content 1fr;
	overflow: auto;
}
.pagination-buttons-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wra;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	margin-bottom: 15px;
	margin-top: 10px;
	position: unset;
	bottom: unset;
	height: min-content;
}

.pagination-buttons-container-bottom {
	height: 50px;
	display: flex;
	flex-direction: row;
	flex-wrap: wra;
	margin-left: auto;
	margin-right: auto;
	width: 10%;
	margin-bottom: 30p;
	margin-top: 30px;
	position: "absolute";
	bottom: 10px;	
}

.pagination-button {
	border-radius: 7px; 
	flex: 1;
	text-decoration-line: underline;
	padding-right: 10px;
}

.pagination-button-left-span {
	float: left;
	font-size: medium;
}

.pagination-button-right-span {
	float: right;
	font-size: medium;
}/*
 * Copyright © 2020-2022 Metreeca srl
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

tool-menu {

	display: grid;
	align-items: center;
	justify-items: start;

	grid-template-columns: min-content 1fr;

	grid-column-gap: 0.25em;
	grid-row-gap: 0.25em

}

tool-menu > * {

		display: contents

	}

tool-menu > * > :first-child {
			font-size: 1.5em;
		}

tool-menu > hr {

		display: block;
		justify-self: stretch;

		grid-column: span 2

	}

tool-menu > hr:first-child,
		tool-menu > hr:last-child,
		:is(tool-menu > hr) + hr {
			display: none;
		}/*
 * Copyright © 2020-2022 Metreeca srl
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

tool-search {

	position: relative;

	flex-grow: 1;

	display: grid;
	align-items: center;

	grid-template-columns: min-content 1fr min-content;

	white-space: nowrap;

	font-weight: 300 !important

}

tool-search.rule {

		overflow: hidden

	}

tool-search.rule > input {
			border-bottom-style: solid;
			box-shadow: none;
		}

tool-search.rule:focus-within::after {
			content: '';
			display: block;
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			height: 1px;
			box-shadow: var(--tool--box-shadow-focus);

		}

tool-search:not(.rule) > nav:first-child {
			margin-left: 0.15em;
		}

tool-search:not(.rule) > nav:last-child {
			margin-right: 0.15em;
		}

tool-search:not(.rule) > input {
			margin: 0 -0.25em;
			border-style: solid;
			border-radius: 2ex;
		}

tool-search > * {
		grid-row: 1;
	}

tool-search > input {

		grid-column: 1 / cols 3;

		padding: 0.25ex 1.5em;

		font-size: 90%;

		max-width: 300px;

	}

tool-search > nav {

		z-index: 1;
		color: #333;

		background-color: transparent;
		transform: scale(0.9) translate(0, 5%)

	}

tool-search > nav:first-child {
			grid-column: 1;
			pointer-events: none;
		}

tool-search > nav:last-child {
			grid-column: 3;
		}

tool-search[disabled] > nav {
		color: var(--tool--color-disabled);
	}/*
 * Copyright © 2020-2022 Metreeca srl
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

tool-hint {

	display: grid;

	width: 100%;
	height: 100%;

	color: #DDD

}

tool-hint > div {

		margin: auto;
		transform: scale(10)
	}

tool-hint > div > .lucide {
			stroke-width: 1px;
		}/*
 * Copyright © 2020-2022 Metreeca srl
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

tool-options {

	overflow: visible !important

}

tool-options > select.default {
		color: var(--tool--color-disabled);
	}/*
 * Copyright © 2020-2022 Metreeca srl
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */


tool-text > div {
		white-space: pre-line;
	}
/*
 * Copyright © 2020-2022 Metreeca srl
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

tool-tabs {

	display: grid;

	grid-template-columns: min-content minmax(min-content, 1fr);
	grid-template-rows: min-content;
	grid-row-gap: 3ex;

	padding-bottom: 5ex

}

tool-tabs > * {

		display: contents

	}

tool-tabs > * > :first-child {
			padding-right: 1em;
			text-align: right;
			font-weight: 700;
			font-size: 90%;
			color: #888;
		}

tool-tabs > * > :last-child {
			padding-left: 1em;
			border-left-style: solid;
		}/*
 * Copyright © 2020-2022 Metreeca srl
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

tool-label {

	display: flex;
	flex-direction: column;
	align-items: stretch;

	grid-gap: 0.5em;

	flex-shrink: 0;
	flex-grow: 0

}

tool-label[large] {
		flex-grow: 1;
	}

tool-label[small] {
		flex-shrink: 1;
	}

tool-label[right] {
		align-items: end;
	}

tool-label > * {
		margin: 0;
	}

tool-label > label {

		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;

		white-space: nowrap

	}

tool-label > label > span {

			font-size: 90%;
			font-weight: 700;

			color: var(--tool--color-label)

		}

tool-label > label > span * {
				font-weight: inherit;
			}

tool-label > small {
		margin-top: 0.25em;
	}

tool-label[rule] > label {
			padding-bottom: 0.25em;
			border-bottom-style: solid;
		}
/*
 * Copyright © 2020-2022 Metreeca srl
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

tool-panel {

	display: flex;
	flex-direction: row;
	/* flex-wrap: wrap; */ 
	align-items: baseline;

	grid-column-gap: 1.5em;
	grid-row-gap: 2ex;

	min-width: min-content;
	max-width: 50em

	

}

tool-panel[data-name] {

		border-top-style: solid;
		margin-top: 2.5ex
	}

tool-panel[data-name]::before {
			align-self: start;
			content: attr(data-name);
			position: relative;
			top: -1ex;
			padding-right: 0.5em;
			font-weight: 700;
			color: #777;
			background-color: inherit;
		}

tool-panel[stack] {
		flex-direction: column;
		align-items: stretch;
	}

tool-panel[cover] > * {
		width: 0;
		flex-grow: 1;
	}

tool-panel[large] {
		flex-grow: 1;
	}

tool-panel > * {
		flex-shrink: 0;
		flex-grow: 0;
	}

tool-panel > [large] {
		flex-grow: 1;
	}

tool-panel > [small] {
		flex-shrink: 1;
	}/*
 * Copyright © 2020-2022 Metreeca srl
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

tool-sheet {

	flex-grow: 1;

	display: flex;
	flex-direction: column;

}/*
 * Copyright © 2020-2022 Metreeca srl
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

tool-check {

}/*
 * Copyright © 2020-2022 Metreeca srl
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

tool-grid {

	display: grid;

	grid-template-columns: min-content minmax(min-content, 1fr);
	align-items: baseline;

	grid-column-gap: 0.75em;
	grid-row-gap: 0.1em;

	white-space: nowrap;

	overflow: hidden

}

tool-grid > * {
		overflow: hidden;
		text-overflow: ellipsis;
	}

tool-grid > dt {
		text-align: right;
		font-size: 90%;
		font-weight: 700;
		color: var(--tool--color-label);
	}

tool-grid > hr {
		display: block;
		grid-column: 1 / span 2;
	}/*
 *   Copyright © 2022 Luxottica. All rights reserved.
 */

tool-load:hover {
        color: var(--tool--color-hover) !important;
    }

tool-load:active {
        color: var(--tool--color-focus) !important;
    }

tool-load > label {
        cursor: pointer;
        color: inherit;
    }

tool-load > * {
        display: flex;
        align-items: center;
        column-gap: 4px;
    }/*
 *   Copyright © 2021 Luxottica. All rights reserved.
 */

 eye-attachment-points {
	width: 100%
}

 eye-attachment-points > table {
		display: grid;
		align-items: baseline;
		grid-template-columns: 17.5em 0.975fr 10px
	}

 eye-attachment-points > table > thead, eye-attachment-points > table > tbody {
			display: contents
		}

 eye-attachment-points > table > thead > tr, eye-attachment-points > table > tbody > tr {
			
				display: contents

			}

 eye-attachment-points > table > thead > tr > *, eye-attachment-points > table > tbody > tr > * {
					display: flex;
					flex-direction: row;
					align-items: center
				}

 eye-attachment-points > table > thead > tr > *:first-child:empty, eye-attachment-points > table > tbody > tr > *:first-child:empty {
						width: 0;
					}

 eye-attachment-points > table > thead > tr > *:not(:first-child), eye-attachment-points > table > tbody > tr > *:not(:first-child) {
						padding-left: 0.5em;
					}

 eye-attachment-points > table > thead > tr > * > *, eye-attachment-points > table > tbody > tr > * > * {
						color: var(--tool--color);
					}

 eye-attachment-points > table > thead > tr > * > span, eye-attachment-points > table > tbody > tr > * > span {
						white-space: nowrap;
					}

 eye-attachment-points > table > thead > tr > * > pre, eye-attachment-points > table > tbody > tr > * > pre {
						white-space: pre-wrap;
					}

 eye-attachment-points > table > thead > tr > * > input:only-child, eye-attachment-points > table > tbody > tr > * > input:only-child {
						flex-grow: 1;
					}

 eye-attachment-points > table > thead > tr > * > input:not(:last-child), eye-attachment-points > table > tbody > tr > * > input:not(:last-child) {
						margin-right: 0.5em;
					}

 eye-attachment-points > table > thead > tr > th, eye-attachment-points > table > tbody > tr > th {
					font: inherit;
				}

 eye-attachment-points > table > thead > tr > .cell-input, eye-attachment-points > table > tbody > tr > .cell-input {
					display: flex;
					align-items: center;
				}

 eye-attachment-points > table > thead > tr > td, eye-attachment-points > table > tbody > tr > td {
					padding-top: 0.5em
				}

 eye-attachment-points > table > thead > tr > td > .submit-input, eye-attachment-points > table > tbody > tr > td > .submit-input {
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						width: 100%;
						background-color: var(--tool--background-color-edit);
						
					}

 eye-attachment-points > table > thead > tr > td > .cellLink, eye-attachment-points > table > tbody > tr > td > .cellLink {
						color: var(--tool--color-enabled);
					}

 eye-attachment-points > table > thead > tr > *:empty::after, eye-attachment-points > table > tbody > tr > *:empty::after {
					content: ' '; /* prevent collapsing */
				}/*
 *   Copyright © 2022 Luxottica. All rights reserved.
 */

/*
 *   Copyright © 2021 Luxottica. All rights reserved.
 */

eye-points {

	width: 100%

}

eye-points > table {

		display: grid;
		align-items: baseline;

		grid-template-columns: 12.5em 1fr min-content

	}

eye-points > table > thead, eye-points > table > tbody {

			display: contents

		}

eye-points > table > thead > tr, eye-points > table > tbody > tr {

				display: contents

			}

eye-points > table > thead > tr > *, eye-points > table > tbody > tr > * {

					display: flex;
					flex-direction: row;
					align-items: center

				}

eye-points > table > thead > tr > *:first-child:empty, eye-points > table > tbody > tr > *:first-child:empty {
						width: 0;
					}

eye-points > table > thead > tr > *:not(:first-child), eye-points > table > tbody > tr > *:not(:first-child) {
						padding-left: 0.5em;
					}

eye-points > table > thead > tr > * > *, eye-points > table > tbody > tr > * > * {
						color: var(--tool--color);
					}

eye-points > table > thead > tr > * > span, eye-points > table > tbody > tr > * > span {
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

eye-points > table > thead > tr > * > pre, eye-points > table > tbody > tr > * > pre {
						white-space: pre-wrap;
					}

eye-points > table > thead > tr > * > input:only-child, eye-points > table > tbody > tr > * > input:only-child {
						flex-grow: 1;
					}

eye-points > table > thead > tr > * > input:not(:last-child), eye-points > table > tbody > tr > * > input:not(:last-child) {
						margin-right: 0.5em;
						overflow: hidden;
						text-overflow: ellipsis;
					}

eye-points > table > thead > tr > th, eye-points > table > tbody > tr > th {
					font: inherit;
				}

eye-points > table > thead > tr > td, eye-points > table > tbody > tr > td {
					padding-top: 0.5em
	
				}

eye-points > table > thead > tr > td > .RadioButtonError, eye-points > table > tbody > tr > td > .RadioButtonError {
						border: 1px solid var(--tool--color-invalid);
						outline: 1px solid var(--tool--color-invalid);
					}

eye-points > table > thead > tr > *:empty::after, eye-points > table > tbody > tr > *:empty::after {
					content: ' '; /* prevent collapsing */
				}
	
	.form-control {
		font-family: system-ui, sans-serif;
		font-size: 2rem;
		font-weight: bold;
		line-height: 1.1;
		display: grid;
		grid-template-columns: 1em auto;
		gap: 0.5em;
		}
		
		.form-control + .form-control {
		margin-top: 1em;
		}
		
		.form-control--disabled {
		color: var(--form-control-disabled);
		cursor: not-allowed;
		}.form-control-radio {
    font-family: system-ui, sans-serif;
    font-size: 2rem;
    font-weight: bold;
    line-height: 1.1;
    display: grid;
    grid-template-columns: 1em auto;
    gap: 0.5em;
    }
    
    .form-control-radio + .form-control-radio {
    margin-top: 1em;
    }
    
    .form-control-radio:focus-within {
    color: var(--form-control-color);
    }

    #radioID{
    /* Add if not using autoprefixer */
    -webkit-appearance: none;
    /* Remove most all native input styles */
    appearance: none;
    /* For iOS < 15 */
    background-color: red;
    background-image:
    radial-gradient(
    #F17573,
    #FAD7D7
    );
    
    /* Not removed via appearance */
    margin: 0;
    
    font: inherit;
    color: currentColor;
    width: 0.5em;
    height: 0.5em;
    border: 1px solid red;
    border-radius: 50%;
    transform: translateY(-0.075em);
    
    display: grid;
    place-content: center;
    }

    #radioID:disabled{
        /* Add if not using autoprefixer */
        -webkit-appearance: none;
        /* Remove most all native input styles */
        appearance: none;
        /* For iOS < 15 */
        background-color: gray;
        background-image:
        radial-gradient(
            white,
            white
        );
        
        /* Not removed via appearance */
        margin: 0;
        
        font: inherit;
        color: currentColor;
        width: 0.5em;
        height: 0.5em;
        border: 1px solid gray;
        border-radius: 50%;
        transform: translateY(-0.075em);
        
        display: grid;
        place-content: center;
        }
    
    #radioID::before {
    content: "";
    width: 0.2em;
    height: 0.2em;
    border-radius: 50%;
    transform: scale(0);
    transition: 20ms transform ease-in-out;
    box-shadow: inset 1em 1em black;
    /* Windows High Contrast Mode */
    background-color: red;
    }
    
    #radioID:checked::before {
    transform: scale(1);
    
    }

#checkID {
    /* Add if not using autoprefixer */
    -webkit-appearance: none;
    /* Remove most all native input styles */
    appearance: none;
    /* For iOS < 15 */
    background-color: red;
    background-image:
    radial-gradient(
    #F17573,
    #FAD7D7
    

    );
    
    /* Not removed via appearance */
    margin: 0;
    
    font: inherit;
    color: currentColor;
    width: 14px;
    height: 14px;
    border: 1px solid red;
    border-radius: 0.15em;
    
    display: grid;
    place-content: center;
    }

    #checkID:disabled{
        /* Add if not using autoprefixer */
        -webkit-appearance: none;
        /* Remove most all native input styles */
        appearance: none;
        /* For iOS < 15 */
        background-color: gray;
        background-image:
        radial-gradient(
        white,
        white
        
    
        );
        
        /* Not removed via appearance */
        margin: 0;
        
        font: inherit;
        color: currentColor;
        width: 14px;
        height: 14px;
        border: 1px solid gray;
        border-radius: 0.15em;
        
        display: grid;
        place-content: center;
        }

    
    #checkID::before {
    content: "";
    width: 0.25em;
    height: 0.25em;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    transform: scale(0);
    transform-origin: bottom left;
    transition: 120ms transform ease-in-out;
    /* Windows High Contrast Mode */
    background-color: CanvasText;
    }
    
    #checkID:checked::before {
    transform: scale(1);
    }
/*
 *   Copyright © 2022 Luxottica. All rights reserved.
 */
eye-receipt-copy {
  --border: 1px solid #000;
  display: grid;
  margin: auto
}
eye-receipt-copy > div {
    box-sizing: unset;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    grid-row-gap: 2em;
    width: 35em;
    padding: 1em;
    margin: auto;
    border: var(--border);
    white-space: nowrap;
    font-family: "Azeret Mono", monospace;
    font-size: 65%;
    font-weight: 300;
    word-break: break-all
  }
@media print {
eye-receipt-copy > div {
      margin: 10% auto
  }
    }
eye-receipt-copy > div > .store {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
eye-receipt-copy > div > .status {
      display: flex;
      flex-direction: column;
      align-items: center
    }
eye-receipt-copy > div > .status > span {
        font-weight: 1000;
      }
eye-receipt-copy > div > .void-transaction {
      display: flex;
      flex-direction: column;
      align-items: left
    }
eye-receipt-copy > div > .void-transaction > span {
        font-weight: 1000;
      }
eye-receipt-copy > div > .smart-shopper {
      display: flex;
      flex-direction: column;
      align-items: left
    }
eye-receipt-copy > div > .smart-shopper > span {
        font-weight: 300;
        margin-top: 5px;
        white-space: pre-wrap;
      }
eye-receipt-copy > div > .smart-shopper > .order-delivery-label {
        letter-spacing: 5px;
      }
eye-receipt-copy > div > div {
      display: grid
    }
eye-receipt-copy > div > div > div,
      eye-receipt-copy > div > div > div {
        display: contents
      }
eye-receipt-copy > div > div > div > div, eye-receipt-copy > div > div > div > div {
          display: contents;
        }
eye-receipt-copy > div > .details {
      display: flex;
      flex-direction: column;
      align-items: left
    }
eye-receipt-copy > div > .details > span {
        white-space: pre-wrap;
      }
eye-receipt-copy > div .exchangesTitle {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-weight: 1000;
    }
eye-receipt-copy > div .taxExemptHeaderFooter {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-weight: 1000;
    }
eye-receipt-copy > div .taxExemptItem {
      display: flex;
      flex-direction: column;
      align-items: left;
      font-weight: 100;
    }
eye-receipt-copy > div > div.lines > div .salesRow .salesLabel, eye-receipt-copy > div > div.lines > div .salesRow .salesLabel {
            margin-left: 0px;
            white-space: pre-wrap;
            /* word-break: break-all; */
          }
eye-receipt-copy > div > div.lines > div .salesRow .salesValue, eye-receipt-copy > div > div.lines > div .salesRow .salesValue {
            margin-right: 10%;
            float: right;
          }
eye-receipt-copy > div > div.lines > div .itemRow .itemLabel, eye-receipt-copy > div > div.lines > div .itemRow .itemLabel {
            margin-left: 0px;
            white-space: pre-wrap;
            /* word-break: break-all; */
          }
eye-receipt-copy > div > div.lines > div .itemRow .itemValue, eye-receipt-copy > div > div.lines > div .itemRow .itemValue {
            margin-right: 10%;
            float: right;
          }
eye-receipt-copy > div > div.lines > div .discountRow .discountLabel, eye-receipt-copy > div > div.lines > div .discountRow .discountLabel {
            margin-left: 0px;
            white-space: pre-wrap;
            /* word-break: break-all; */
          }
eye-receipt-copy > div > div.lines > div .discountRow .discountValue, eye-receipt-copy > div > div.lines > div .discountRow .discountValue {
            margin-right: 10%;
            float: right;
            /* word-break: break-all; */
          }
eye-receipt-copy > div > div.lines > div .insuranceRow .insuranceLabel, eye-receipt-copy > div > div.lines > div .insuranceRow .insuranceLabel {
            margin-left: 0px;
            white-space: pre-wrap;
            word-break: break-all;
          }
eye-receipt-copy > div > div.lines > div .insuranceRow > .linesSalesOrderFor > span, eye-receipt-copy > div > div.lines > div .insuranceRow > .linesSalesOrderFor > span {
            white-space: pre-wrap;
            /* word-break: break-all; */
          }
eye-receipt-copy > div > div.lines > div > div > div,
          eye-receipt-copy > div > div.lines > div > div > div,
          eye-receipt-copy > div > div.lines > div > div > span.recipt-cell,
          eye-receipt-copy > div > div.lines > div > div > span.recipt-cell {
            padding: 0.1em 0.25em;
            font: inherit;
            color: inherit
          }
:is(eye-receipt-copy > div > div.lines > div > div > div,eye-receipt-copy > div > div.lines > div > div > div,eye-receipt-copy > div > div.lines > div > div > span.recipt-cell,eye-receipt-copy > div > div.lines > div > div > span.recipt-cell):not(:first-child) {
              text-align: right;
            }
eye-receipt-copy > div > div.lines > div > div > div, eye-receipt-copy > div > div.lines > div > div > div {
            font-weight: 700;
          }
eye-receipt-copy > div > div.lines > div > div > span.recipt-cell:only-child, eye-receipt-copy > div > div.lines > div > div > span.recipt-cell:only-child {
            padding-top: 0.5em;
            grid-column: 1 / span 4;
            font-weight: 700
          }
eye-receipt-copy > div > div.lines > div > div > span.recipt-cell.light:only-child, eye-receipt-copy > div > div.lines > div > div > span.recipt-cell.light:only-child {
              font-weight: 300;
            }
eye-receipt-copy > div > div.lines > div > div > span.recipt-cell.discount:only-child, eye-receipt-copy > div > div.lines > div > div > span.recipt-cell.discount:only-child {
              font-weight: 300;
              text-align: left;
            }
eye-receipt-copy > div > div.lines > div > div span.recipt-cell.returnLabel, eye-receipt-copy > div > div.lines > div > div span.recipt-cell.returnLabel {
            font-weight: 100;
          }
eye-receipt-copy > div > div.lines > div > div span.recipt-cell.return, eye-receipt-copy > div > div.lines > div > div span.recipt-cell.return {
            grid-column-start: 1;
            grid-column-end: 4;
            padding-left: 2em;
            font-weight: 300;
          }
eye-receipt-copy > div > div.lines > div > div > .salesOrderDivider, eye-receipt-copy > div > div.lines > div > div > .salesOrderDivider {
            padding-bottom: 0.25em;
            margin-bottom: 0.5em;
            border-bottom: var(--border);
          }
eye-receipt-copy > div > div.lines > div > div > .linesSalesOrderFor, eye-receipt-copy > div > div.lines > div > div > .linesSalesOrderFor {
            display: flex;
            flex-direction: column;
            align-items: left;
          }
eye-receipt-copy > div > div.lines > div > div > div {
        padding-bottom: 0.25em;
        margin-bottom: 0.5em;
        border-bottom: var(--border);
      }
eye-receipt-copy > div > div.summary {
      grid-template-columns: min-content 1fr 7.55em
    }
eye-receipt-copy > div > div.summary span.recipt-cell:not(:first-child) {
        text-align: right;
      }
eye-receipt-copy > div > div.summary div.total > span.recipt-cell {
        padding-top: 0.5em;
        margin-top: 1em;
        border-top: var(--border);
        font-weight: 700;
      }
eye-receipt-copy > div > div.summary div > div > span.recipt-cell.paymentData {
        grid-column-start: 1;
        grid-column-end: 4;
        padding-left: 2em;
      }
eye-receipt-copy > div span.recipt-cell {
      display: table-cell;
      vertical-align: inherit;
    }
.receipts-modal-content {
  position: absolute;
  max-width: 95vw;
  max-height: 95vh;
  border: 1px solid black;
  background-color: white;
  border-radius: 7px;
  padding: 15px;
  align-self: center;
  margin-top: 3vh;
  display: flex;
  flex-direction: column;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px
}


.receipts-modal-content .eye-table-container {
    padding-bottom: unset;
  }


.receipts-modal-content-navbar {
  display: flex;
  flex-direction: row;
  gap: 4px;
}

.receipts-modal-content-navbar-close-button {
  margin-right: auto;
  font-size: smaller;
}

.receipts-modal-content-carousel {
  display: flex;
  overflow: auto;
  height: 100vh;
  padding: 10px;
  position: relative;
}/*
 *   Copyright © 2021 Luxottica. All rights reserved.
 */

.eye-receipt-carousel {
	display: grid;
	align-items: center;
	justify-content: center;
	grid-column-gap: 1em;
	width: 100%;
	height: 100%;
	grid-template-columns: min-content 1fr min-content ;
	grid-template-rows: 1fr ;
}

.button-arrow {
	transform: scale(3);
}
/*
 * Copyright © 2020-2022 Metreeca srl
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */



tool-combo {

	--radius: 0.25em;

	position: relative;
	overflow: visible !important

}



tool-combo * {
		border-style: none;
	}



tool-combo > header {

		--padding: 0.5em;

		display: grid;
		align-items: center;

		grid-template-columns: 1fr min-content;
		grid-template-rows: auto

	}



tool-combo > header > input[type=text] {

			grid-column: 1 / span 2;
			grid-row: 1;

			padding-right: calc(1em + var(--padding));

		}



tool-combo > header > button {

			grid-column: 2 / 2;
			grid-row: 1;

			padding: 0 var(--padding);
			background-color: transparent;

		}



tool-combo {

	 
	/* & > footer { */

}



tool-combo > .combo-button-item {
		z-index: 1;

		position: absolute;

		left: 0;
		right: 0;
		top: calc(100% + 0.5ex);

		/* visibility: hidden; */

		display: flex;
		flex-direction: column;
		align-items: stretch;

		grid-row-gap: 0.1em;

		padding: 0.5ex 0.5em;

		border-style: solid;
		border-radius: var(--radius);

		overflow: hidden auto;

		background-color: var(--tool--background-color-edit)

	}



tool-combo > .combo-button-item > * {

			white-space: nowrap;

			overflow: hidden;
			text-overflow: ellipsis;
			text-align: left;

			font-size: 90%;
			font-weight: inherit;
			background-color: transparent

		}



tool-combo > .combo-button-item > *:focus {
				text-decoration: underline;
				color: var(--tool--color-focus);
			}



tool-combo > .combo-button-item > small {
			color: var(--tool--color-label);
			transform: translateY(-5%);
		}



tool-combo:focus-within > .combo-button-item:not(:empty) {
		visibility: visible;
	}



tool-combo {
	/* &:focus-within > footer:not(:empty) {
		visibility: visible;
	} */

}/*
 * Copyright © 2020-2022 Metreeca srl
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

tool-frame {

	display: flex;
	flex-direction: column;
	align-items: stretch

}

tool-frame > tool-combo:not(:last-child) {
		margin-bottom: 0.66em;
	}

tool-frame > small {
		font-size: 85%;
	}

tool-frame > span {

		display: flex;
		flex-direction: row;
		align-items: center;

		grid-column-gap: 0.25em

		/*padding-right: 0.45em;*/

	}

tool-frame > span > a {

			/* !!! width: 0; /* auto-sizing */

			flex-grow: 1;
			flex-shrink: 1;

			white-space: nowrap;

			overflow: hidden;
			text-overflow: ellipsis;
		}

tool-frame > span + span {
		margin-top: 0.1em;
		/*
		padding-top: 0.1em;
		border-top-style: dotted;
		*/
	}::placeholder{
    color: black;
    opacity: 1;
}

.enter_value{
    background-color: red;
    border: solid 1px red;
    background-image:
    radial-gradient(
    #F17573,
    #FAD7D7
    );
}

.enter_value:focus::placeholder{
    color: transparent;
}/*
 * Copyright © 2020-2022 Metreeca srl
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

tool-board {

	--cols: 2;
	--gap: 1em;
	--ratio: 4 /3;

	--width: calc(max(15em, 100% / var(--cols) - var(--gap) * var(--cols)));


	display: grid;

	grid-gap: var(--gap);
	grid-template-columns: repeat(auto-fit, minmax(var(--width), 1fr))

}

tool-board > * {
		aspect-ratio: var(--ratio)
	}/*
 *   Copyright © 2021 Luxottica. All rights reserved.
 */

eye-dashboard-entry {

	display: flex;
	flex-direction: column;
	align-items: stretch;

	border-style: solid;
	border-radius: 0.5em;

	overflow: auto

}

eye-dashboard-entry > :first-child {

		flex-shrink: 0;

		position: sticky;
		top: 0;
		left: 0;

		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;

		grid-column-gap: 0.5em;

		padding: 0.5em 0.5em 0.5em 0.75em

	}

eye-dashboard-entry > :first-child * {
			font-weight: 700;
		}

eye-dashboard-entry > :last-child {
		font-size: 80%;
	}/*
 * Copyright © 2020-2022 Metreeca srl
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */



/*
 *   Copyright © 2022 Luxottica. All rights reserved.
 */

tool-grant {

    display: grid;
    grid-template-columns: 1em;
    grid-template-rows: 0.75em

}

tool-grant > * {
        grid-area: 1 / 1 / 1 / 1
    }

tool-grant > span {

        pointer-events: none

    }

tool-grant > span > .lucide-eye-off {
            color: var(--tool--color-disabled)
        }

tool-grant > .ipad-no-appareance {
        -webkit-appearance: none;
        -moz-appearance: none;
    }.grants-table {
    margin-bottom: 100px;
}
.small-table {
    width: fit-content;
}
.grants-table > tbody > tr:nth-child(even) {
    background-color: #F4F4F4;
}
.grants-table > thead > tr > th {
    border-bottom: solid 1px #DDD;
    text-align: center;
}

.grants-table > thead > tr > th:is(:first-child) {
    text-align: left;
}

.checkbox-cell{
    text-align: center;
    padding-left: unset !important;
    padding-top: unset !important;
}
.multiple-delete-container {
  display: flex; 
  flex-direction: column;
  gap: 50px; 
  align-items: center; 
  justify-content: center;
  margin-bottom: 50px
}

.multiple-delete-top {
  max-width: 70%; 
  display: inline-block;
  overflow-wrap: break-word; 
  white-space: break-spaces; 
  font-size: 23px;
  line-height: 35px;
}

.multiple-delete-bottom {
  display: flex; 
  flex-direction: column;
  gap: 20px;
  align-items: center; 
  justify-content: center;
}

.multiple-delete-bottom .list-container {
  display: flex; 
  flex-direction: row;
  gap: 20px;
  overflow: hidden; 
  overflow-wrap: break-word; 
  white-space: break-spaces; 
  font-size: 23px;
  line-height: 35px;
  align-items: self-start;
  justify-content: center;
}
  #metric-detail-form .tool-input {
    max-width: fit-content;
  }
#metric-detail-form .tool-input-only-number {
    min-width: 190px;
  }
#metric-detail-form tool-frame {
    max-width: fit-content;
  }
.page-lux-logo {
  transform: rotate(90deg);
  width: 2.5em;
  filter: opacity(0.66);
  margin-top: auto;
  margin-bottom: auto;
}
.flex-direction-row > section > .page-lux-logo {
  transform: rotate(0deg);
  margin-left: auto;
  margin-right: auto;
}

.page-button-pane {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center
}

.page-button-pane > svg {
    margin-right: 0em !important;
    margin-bottom: 5px;
    border-radius: 10px;
    width: 30px;
    height: 30px;
    padding: 3px;
  }

.page-button-pane > span {
    font-size: 0.3em;
    opacity: 1;
    color: #666;
  }

.page-button-pane-selected {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center
}

.page-button-pane-selected > svg {
    margin-right: 0em !important;
    color: white;
    background-color: #666;
    border-radius: 10px;
    margin-bottom: 5px;
    width: 30px;
    height: 30px;
    padding: 3px;
  }

.page-button-pane-selected > .page-button-label-pane {
    display: block;
  }

.page-button-pane-selected > span {
    opacity: 1;
    font-size: 0.3em;
    color: #666;
  }
/*
 *   Copyright © 2021 Luxottica. All rights reserved.
 */

eye-gate {

	display: grid;
	justify-content: center;
	align-content: center;

	width: 100%;
	height: 100%;

	grid-template-cols: min-content;
	grid-template-rows: 1fr min-content 1.5fr;
	grid-row-gap: 1em

}

eye-gate > header {

		grid-row-start: 2;

		display: flex;
		flex-direction: row;

		align-items: center;
		justify-content: center;

		font-size: 2rem;
		font-weight: 700

	}

eye-gate > header > :first-child {

			font-weight: inherit;
			transform: translate(0, 5%)

		}

eye-gate > header > :first-child > svg {
				stroke-width: 3
			}

eye-gate > header > tool-icon {
			margin: 0.8em;
			transform: scale(1.5);
		}

eye-gate > header > label {

			background-size: 1em;
			background-repeat: no-repeat;
			background-position: left center;

		}

eye-gate > footer {

		grid-row-start: 3;
		align-self: self-start;

		padding: 1ex 1em;

		border-style: solid;
		border-radius: 0.5em;
		border-color: var(--tool--color-invalid);

		white-space: pre

	}

eye-gate > footer:empty {
			display: none;
		}

.modal-error-full-page-container {
	position: absolute; 
	align-items: center; 
	z-index: 1000;
	width: 100%; 
	height: 100%; 
	display: flex; 
	justify-content: center; 
	background: rgb(85 85 85 / 79%);
	backdrop-filter: blur(2px);
}

.modal-error-modal-message {
	position: relative;
	background-color: white; 
	display: flex;
	flex-direction: column;
	z-index: 1001; 
	gap: 40px; 
	padding: 40px; 
	border-radius: 5px;
	border: 1px solid #CCC;
	max-width: 60%;
	justify-content: center;
	align-items: center;
}
/*
 *   Copyright © 2022 Luxottica. All rights reserved.
 */
/*
 * Copyright © 2020-2022 Metreeca srl
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
:root {

	--tool--border-style: solid;
	--tool--border-color: #CCC;
	--tool--border-width: 1px;

	--tool--font-size: 16pt;

	--tool--color: #000;
	--tool--color-light: #999;
	--tool--color-label: #BBB;
	--tool--color-placeholder: #BBB;
	--tool--color-enabled: #567;
	--tool--color-disabled: #CCC;
	--tool--color-invalid: #D60;

	--tool--color-hover: #B50;
	--tool--color-focus: #789;

	--tool--color-accent-lite: #D60;
	--tool--color-accent-dark: #345;

	--tool--background-color: #FFF;
	--tool--background-color-edit: #F1F2F4;
	--tool--background-color-stripe: #F4F4F4;

	--tool--box-shadow-size-scrolling: 0.5rem;

	--tool--box-shadow-scrolling: 0 0 var(--tool--box-shadow-size-scrolling) var(--tool--box-shadow-size-scrolling);
	--tool--box-shadow-focus: 0 0 2px 1px var(--tool--color-focus);

}
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	outline: none 1px #CCC;
	border: none 1px #CCC;
	overflow: visible;
	font-family: inherit;
	font-style: inherit;
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
	background-color: inherit;
}
[hidden] {
	display: none;
}
/**** Fonts ***********************************************************************************************************/
body {
	font-family: Quicksand, Helvetica, Arial, sans-serif;
	font-weight: 375;
	line-height: 1.2;
}
h1, h2, h3 {

	font-weight: 500

}
* + h1, * + h2, * + h3 {
		margin-top: 1.5em

}
h1 {
	padding-bottom: 0.5ex;
	margin-bottom: 1.5em;
	border-bottom-style: solid;
	font-size: 1.25em;
}
code, var {
	font-family: Inconsolata, Courier, monospace;
}
strong {
	font-weight: 700;
}
a {
	font-weight: 500;
}
button {
	font-weight: 500;
}
/**** Blocks **********************************************************************************************************/
html, body {
	width: 100%;
	height: 100%;
}
body {
	font-size: var(--tool--font-size);
	color: var(--tool--color);
	background-color: var(--tool--background-color);
}
ul, ol {

	padding-left: 1.5em

}
ul > li, ol > li {
		list-style-type: square;
	}
dl > dt {

		margin-bottom: 1ex;

		font-weight: 700

	}
dl > dt:not(:first-child) {
			margin-top: 1ex;
		}
p {

	margin-bottom: 1em;

}
hr {
	align-self: stretch;
	margin: 0.75em 0;
	border-bottom: solid 1px #CCC;
}
th {
	text-align: left;
	font-size: 90%;
	font-weight: 700;
	color: var(--tool--color-label);
}
td {
	padding-top: 0.5em;
}
th:not(:first-child),
td:not(:first-child) {
	padding-left: 0.75em;
}
/**** Inlines *********************************************************************************************************/
small {
	font-size: 75%;
	color: var(--tool--color-label);
}
a, a:visited {

	text-decoration: none;
	color: var(--tool--color-enabled);

	cursor: pointer

}
:is(a,a:visited):focus {
		text-decoration: underline !important;
	}
:is(a,a:visited):hover {
		color: var(--tool--color-hover) !important;
	}
:is(a,a:visited):active {
		color: var(--tool--color-focus) !important;
	}
/**** Controls ********************************************************************************************************/
label {
	font-weight: 500;
	color: var(--tool--color-label);
}
a > svg:first-child:not(:last-child), button > svg:first-child:not(:last-child), label > svg:first-child:not(:last-child) {
		margin-right: 0.25em;
	}
input:focus {

		box-shadow: inset var(--tool--box-shadow-focus)

	}
input[type=checkbox]:focus, input[type=radio]:focus {
			box-shadow: var(--tool--box-shadow-focus);
		}
input:invalid {
		border-color: var(--tool--color-invalid);
	}
input[type="date"][value=''] {
		color: var(--tool--color-placeholder);
	}
button:disabled {
		color: var(--tool--color-disabled);
		pointer-events: none;
	}
button:enabled {

		cursor: pointer

	}
button:enabled:hover {
			color: var(--tool--color-hover) !important;
		}
button:enabled:active {
			color: var(--tool--color-focus) !important;
		}
select[disabled] {
	color: var(--tool--color-disabled);
}
*::placeholder {
	color: var(--tool--color-placeholder);
}
eye-root {

	--tool-page-pane-width: 20rem;
	/* zoom: 80%; */
}
.eye-page-main-section {
	position: relative;
	height: 100%;
	overflow: scroll;
	padding-bottom: 50px;
}
.eye-page-section-table-container {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: min-content min-content 1fr;    
	overflow: auto;
}
@media print {
  html, body {
    height: initial !important;
    overflow: initial !important;
  }
}