*:not(mwc-textfield){
  --mdc-typography-font-family: "Comfortaa";
  /* --mdc-typography-subtitle1-font-size: "14px"; */
}

.surface {
  --app-datepicker-weekday-color: var(--on-surface);
  --mdc-button-outline-color: var(--on-surface);
  --mdc-checkbox-ink-color: var(--surface);
  --mdc-checkbox-unchecked-color: var(--on-surface);
  --mdc-dialog-content-ink-color: var(--on-surface);
  --mdc-dialog-heading-ink-color: var(--strong-color);
  --mdc-select-dropdown-icon-color: var(--on-surface);
  --mdc-select-fill-color: var(--surface);
  --mdc-select-hover-line-color: var(--surface);
  --mdc-select-idle-line-color: var(--surface);
  --mdc-select-ink-color: var(--on-surface);
  --mdc-select-label-ink-color: var(--on-surface);
  --mdc-select-outlined-hover-border-color: var(--on-surface);
  --mdc-select-outlined-idle-border-color: var(--on-surface);
  --mdc-switch-selected-handle-color: var(--primary-color);
  --mdc-switch-selected-track-color: var(--surface);
  --mdc-tab__text-color: var(--on-surface);
  --mdc-text-field-fill-color: var(--surface);
  --mdc-text-field-ink-color: var(--on-surface);
  --mdc-text-field-label-ink-color: var(--on-surface);
  --mdc-text-field-outlined-hover-border-color: var(--primary-color);
  --mdc-text-field-outlined-idle-border-color: var(--on-surface);
  --mdc-theme-primary: var(--primary-color);
  --mdc-theme-secondary: var(--primary-color);
  --mdc-theme-surface: var(--surface);
  --mdc-theme-text-primary-on-background: var(--strong-color);
  --mdc-theme-text-secondary-on-background: var(--on-surface);
}

.background {
  --app-datepicker-weekday-color: var(--on-background);
  --mdc-button-outline-color: var(--on-background);
  --mdc-checkbox-ink-color: var(--background);
  --mdc-checkbox-unchecked-color: var(--on-background);
  --mdc-dialog-content-ink-color: var(--on-background);
  --mdc-dialog-heading-ink-color: var(--strong-color);
  --mdc-select-dropdown-icon-color: var(--on-background);
  --mdc-select-fill-color: var(--background);
  --mdc-select-hover-line-color: var(--background);
  --mdc-select-idle-line-color: var(--background);
  --mdc-select-ink-color: var(--on-background);
  --mdc-select-label-ink-color: var(--on-background);
  --mdc-select-outlined-hover-border-color: var(--on-background);
  --mdc-select-outlined-idle-border-color: var(--on-background);
  --mdc-switch-selected-handle-color: var(--primary-color);
  --mdc-switch-selected-track-color: var(--background);
  --mdc-tab__text-color: var(--on-background);
  --mdc-text-field-fill-color: var(--background);
  --mdc-text-field-ink-color: var(--on-background);
  --mdc-text-field-label-ink-color: var(--on-background);
  --mdc-text-field-outlined-hover-border-color: var(--primary-color);
  --mdc-text-field-outlined-idle-border-color: var(--on-background);
  --mdc-theme-primary: var(--primary-color);
  --mdc-theme-secondary: var(--primary-color);
  --mdc-theme-background: var(--background);
  --mdc-theme-text-primary-on-background: var(--strong-color);
  --mdc-theme-text-secondary-on-background: var(--on-background);
}

.surface .mdc-dialog .mdc-dialog__content,
.surface .mdc-data-table__pagination-total,
.surface .mdc-data-table__pagination-rows-per-page-label,
.surface .mdc-data-table__cell {
  color: var(--on-surface);
}

.white {
  --mdc-theme-primary: #FFF;
  --mdc-theme-secondary: #FFF;
  --mdc-theme-on-primary: #FfF;
  --mdc-checkbox-ink-color: #333;
  --mdc-checkbox-unchecked-color: #FFF;
  --mdc-theme-text-primary-on-background: #FFF;
  --mdc-text-field-outlined-idle-border-color: white;
  --mdc-text-field-ink-color: white;
  --mdc-text-field-outlined-hover-border-color: white;
  --mdc-text-field-fill-color: white;
  --mdc-text-field-label-ink-color: white;
  --mdc-theme-text-disabled-on-light: #FFF;
}

.primary-color {
  color: var(--primary-color);
  --mdc-theme-primary: var(--primary-color);
  --mdc-switch-selected-icon-color: #FFF;
  --mdc-theme-on-primary: var(--primary-color);
  --mdc-switch-selected-track-color: var(--background);
  --mdc-theme-text-disabled-on-light: var(--primary-color);
}

/* TABLE */

.mdc-data-table__header-row th {
  border-bottom: 1px solid var(--primary-color);
}

.surface .mdc-data-table__header-cell {
  color: var(--strong-color);
}

.mdc-data-table__row:hover .mdc-data-table__cell {
  color: var(--strong-color);
}

table .select-column {
  display:none;
}

table.show-selection .select-column {
  display:table-cell;
}

table.show-selection td [table-action="more-button"]{ display: none;
}

.mdc-data-table__cell.table-menu-column {
  overflow: visible;
}

.mdc-data-table__row.selected .mdc-data-table__cell {
  background-color: var(--primary-variant-color-alpha);
}

.md-font {
  -webkit-font-smoothing: antialiased;
  font-family: var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
}

accordion-list {
  display: flex; flex-direction: column;
}

accordion-item .accordion-less,
accordion-item[selected] .accordion-more {
  display: none;
}

accordion-head, button.accordion-head:focus {
  outline: none; cursor: pointer;
}

accordion-item .accordion-body {
  height: 0px; overflow: auto; transition: height 0.2s ease-in-out;
}

accordion-item[selected] .accordion-body {
  overflow: hidden;
}

accordion-item[selected] .accordion-less,
accordion-item .accordion-more {
  display: block;
}

catalyst-toggle-switch {
  --catalyst-toggle-switch-bar-color: #D1D1D1;
  --catalyst-toggle-switch-knob-color: #FFF;
  --catalyst-toggle-switch-bar-width: 30px;
  --catalyst-toggle-switch-bar-height: 10px;
  --catalyst-toggle-switch-knob-size: 18px;
  --catalyst-toggle-switch-knob-offset: 4px;
}

catalyst-toggle-switch[checked] {
  --catalyst-toggle-switch-bar-color: var(--primary-color-alpha-50);
  --catalyst-toggle-switch-knob-color: var(--primary-color);
}

mdc-tab-panel {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  overflow-x: clip;
}

mdc-tab-panel.transition .mdc-tab-panel-item,
mdc-tab-panel.transition mdc-tab-panel-item {
  transition: transform 0.2s ease-in-out;
}

mdc-tab-panel-item, .mdc-tab-panel-item {
  grid-column: 1/2;
  grid-row: 1/2;
  transform: translateX(-100%);
}

button.mdc-tab .mdc-tab__text-label,
button.mdc-tab .mdc-tab__icon{
  color: var(--on-surface);
}

button.mdc-tab.mdc-tab--active .mdc-tab__icon,
button.mdc-tab.mdc-tab--active .mdc-tab__text-label {
  color: var(--primary-color);
}

search-select-item[selected] > * {
  background: var(--primary-color-alpha) !important;
}

search-select-list {
  position: absolute;
  z-index: 2;
  height: 250px;
  overflow-y: auto;
  background-color: var(--surface);
  border: 1px solid var(--background);
  display: block;
  border-radius: 0 0 6px 6px;
  min-width: 100%;
}

search-select[fixedMenuPosition] search-select-list{
  position: fixed;
  min-width: unset;
}

search-select-list mwc-list-item {
  display: block;
  display: flex !important;
}

search-select, select-one {
  display:inline-block; position: relative;
}

search-select > .material-icons-outlined
{
  color: var(--on-surface);
  position: absolute;
  right: 10px;
  top: 29px;
  transform: translateY(-50%);
  z-index: 1;
}

search-select > .material-icons-outlined.active{
  color: var(--primary-color);
}

search-select mwc-textfield {
  display: block;
}

search-select[nofloat] search-select-list {
  position: static;
}

select-loader {
  display:inline-block
}

select-loader > * {
  width: 100%;
}

drawer-wrapper { display: block;
}

mwc-button[outlined] {
  --mdc-button-outline-color: var(--primary-color);
}

drawer-wrapper { display: block;
}

.material-textarea-wrapper {
  position: relative;
}

.material-textarea-wrapper span {
  position: absolute;
  background: var(--surface);
  top: -12px;
  left: 10px;
  padding: 0 5px;
  font-size: 12px;
}

.material-textarea {
  border: 1px solid var(--on-surface);
  border-radius: 5px;
  padding: 10px;
  transition: 200ms;
  min-height: 100px;
  resize: vertical;
  background: var(--surface);
}

.material-textarea:focus ~ span,
.material-textarea:hover ~ span {
  color: var(--primary-color);
}

.material-textarea:hover {
  border: 1px solid var(--primary-color);
}

.material-textarea:focus {
  border: 2px solid var(--primary-color);
}

.material-textarea::-moz-placeholder {
  color: var(--on-surface);
}

.material-textarea:-ms-input-placeholder {
  color: var(--on-surface);
}

.material-textarea::placeholder {
  color: var(--on-surface);
}

/* CHECKBOXES */

mwc-checkbox{
  --mdc-checkbox-checked-color: var(--primary-variant-color);
  --mdc-theme-secondary: var(--primary-variant-color);
  --mdc-checkbox-ink-color: var(--surface);
}

/* mwc icon */

mwc-icon,
mwc-icon-button {
  --mdc-icon-font: 'Material Icons Outlined';
}

/* Initial Display Block */

mwc-icon-button,
image-uploader
{
  display: block;
}

/* textfield with wrapper and icon */

.textfield-icon-wrapper {
  position: relative;
}

.textfield-icon-wrapper > mwc-icon,
.textfield-icon-wrapper > .material-icons-outlined {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 15px;
}

/* Default Input */

input.default-input{
  border: 1px solid var(--on-surface);
  border-radius: 5px;
  padding: 10px;
  background: var(--surface);
}

/* dialog-input */

dialog-input-date,
dialog-input-select {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto 0;
  grid-template-areas: "label label" "input down";
  cursor: pointer;
}

dialog-input-date label,
dialog-input-select label {
  grid-area: label;
  color: var(--strong-color);
  font-size: 0.8em;
  white-space: nowrap;
  display: block;
}

dialog-input-date locale-date {
  grid-area: input;
  font-size: 1em;
}

locale-date {
  min-width: 10ch;
  white-space: nowrap;
  display: inline-block;
}

dialog-input-date:after,
dialog-input-select:after {
  font-family: 'Material Icons';
  grid-area: down;
  content: "expand_more";
  font-size: 1em;
  text-align: right;
  padding-left: 1ex;
}

dialog-input-select:before {
  display: inline-block;
  content: attr(placeholder);
  grid-area: input;
  opacity: 0;
  z-index: 0;
}

dialog-input-select[showplaceholder]:before {
  opacity: 1;
  z-index: 2;
}

dialog-input-select:has([selected]):before {
  opacity: 0 !important;
  z-index: 0 !important;
}

dialog-input-options {
  grid-area: input;
  font-size: 1em;
  white-space: nowrap;
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
}

dialog-input-option {
  white-space: nowrap;
  font-size: 1em;
  display: none;
  background-color: #0000;
  z-index: 1;
  grid-column: 1/2;
  grid-row: 1/2;
}

dialog-input-option[selected] {
  z-index: 2;
  display: inline-block;
}

/* loop-toggler */

loop-toggler {
  display: inline-grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
}

loop-toggler-item {
  background-color: #0000;
  z-index: 1;
  opacity: 0;
  grid-column: 1/2;
  grid-row: 1/2;
}

loop-toggler-item[selected] {
  z-index: 2;
  opacity: 1;
}

/* */

.stack {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  grid-template-areas: 'stack';
}

.stack > * {
  grid-area: stack;
}

script-data {
  display:none;
}

adv-select {
  position: relative;
  display: inline-flex;
  flex-direction: column;
}

adv-select::after {
  content: "arrow_drop_down";
  font-family: 'Material Icons';
  font-size: 24px;
  font-style: normal;
  font-weight: normal;
  position: absolute;
  right: 10px;
  top: 10px;
}

adv-select[opened]::after {
  content: "arrow_drop_up";
}

adv-select mwc-textfield,
adv-select adv-select-list {
  width: 100%;
}

adv-select mwc-textfield::part(input){
  padding-right: 50px;
}

adv-select mwc-textfield[readonly] {
  cursor: pointer;
}

adv-select-list {
  display: inline-block;
}

adv-select-list[outlined] {
  border: 1px solid var(--closed-color, --outline-color, currentColor);
  border-radius: 4px;
}

adv-select-list[filtering] adv-select-item {
  display: none;
}

adv-select-list[filtering] adv-select-item[matched] {
  display: flex;
}

adv-select adv-select-list {
  height: 0; overflow: hidden; width: 100%; --closed-color: #0000;
}

adv-select adv-select-list[opened] {
  height: auto; --closed-color: var(--outline-color, currentColor);
}

adv-select:has(adv-select adv-select-list[drop]) {
  position: relative;
}

adv-select adv-select-list[opened][drop] {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: #fff;
  z-index: 3;
}

adv-select-item {
  align-items: center;
  display: flex;
  gap: 1rem;
  padding: 0 1rem;
  min-height: 48px;
  justify-content: space-between;
  cursor: pointer;
}

adv-select-item:hover {
  background-color: var(--bg-hover, #0004);
}

adv-select-list[multi] adv-select-item::after {
  content: "check_box_outline_blank";
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
}

adv-select-list[multi] adv-select-item[checked]::after {
  color: var(--primary-color);
  content: "check_box";
}

/* tree-option */

tree-option-select tree-option-table {
  display: none;
}

tree-option-select[opened] tree-option-table {
  display: block;
}

tree-option-select mwc-textfield {
  width: 100%;
}

/* calendar */

calendar-data {
  display:none;
}

/* dialog-select-input */

tree-item tree-item:before {
  font-family: 'Material Icons';
  content: "chevron_right";
}

tree-options {
  grid-area: input;
}

tree-options, tree-list {
  display: inline-grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  grid-template-areas: "item";
  height: 1rem;
}

tree-item {
  grid-area: item;
  display: none;
}

tree-item {
  gap: 0.25ch;
}

tree-item[selected] {
  display: inline-flex;
}

tree-text {
  white-space: nowrap;
}

tree-item, tree-text {
  z-index:1;
}

tree-item[indeterminate], tree-item[selected], tree-item[selected] > tree-text {
  z-index:2;
}

/*
tree-list, tree-item, tree-options {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas: "input";
    height: 1rem;
}

tree-options, tree-list, tree-item, tree-text {
    grid-area: input;
}

tree-item, tree-text {
    opacity: 0;
    z-index:1;
}

tree-item[indeterminate], tree-item[selected], tree-item[selected] > tree-text {
    opacity: 1;
    z-index:2;
}
*/

input-colorpicker{
  display: flex;
  align-items: center;
  gap: .5rem;
}

input-colorpicker mwc-textfield{
  width: calc(100% - .25rem - 40px);
}

input-colorpicker input[type="color"]{
  cursor: pointer;
  width: 40px;
  height: 28px;
}