/*#region button */

.disabled-button {
  background-color: #ccc;
  color: #666;
  opacity: 0.6;
}

.button-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.spinner-wrapper {
  display: flex;
  align-items: center;
}

.spinner-border {
  width: 1.2rem;
  height: 1.2rem;
  border-width: 0.15em;
}

.small .spinner-border {
  width: 1rem;
  height: 1rem;
  border-width: 0.12em;
}

.primary-button .spinner-border {
  border-color: var(--main-color-3);
  border-right-color: transparent;
}

.secondary-button .spinner-border {
  border-color: var(--main-color-2);
  border-right-color: transparent;
}

/*#region Primary button layout */

.primary-button {
  position: relative;
  height: 40px;
  border: none;
  border-radius: var(--button-border-radius);
  padding: var(--button-padding);
  white-space: nowrap;
  font-size: var(--main-font-size);
}

  .primary-button.addon-icon::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    vertical-align: sub;
    background-size: contain;
    background-repeat: no-repeat;
  }

  .primary-button.small {
    height: 28px;
    border-radius: var(--button-small-border-radius);
    padding: var(--button-small-padding);
  }

    .primary-button.small.addon-icon::before {
      width: 13px;
      height: 13px;
      margin-right: 8px;
    }

  .primary-button.editor {
    height: 34px;
    border-radius: var(--button-editor-border-radius);
  }

.primary-iconbutton {
  height: 40px;
  width: 40px;
  border: none;
  border-radius: var(--iconbutton-border-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

  .primary-iconbutton::before {
    content: '';
    display: inline-block;
    width: 11px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
  }

  .primary-iconbutton.small {
    height: 28px;
    width: 28px;
  }

    .primary-iconbutton.small::before {
      content: '';
      display: inline-block;
      width: 7px;
      height: 14px;
      background-size: contain;
      background-repeat: no-repeat;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

/*#endregion Primary button layout */

/*#region Primary button colors */

.primary-button:active:not(:disabled) {
  background: var(--main-color-2) !important;
}

.primary-button.editor:active:not(:disabled) {
  background: var(--background-color-3);
}

.primary-button.standard {
  border: 1px solid #62717B;
  color: var(--main-color-3);
  background: linear-gradient(180deg, #313537 0%, var(--main-color-2) 88.1%);
}

  .primary-button.standard.stateActive {
    /*    color: var(--main-color-3);
    background: var(--main-color-2);*/
    background-color: green;
    color: white;
  }

  .primary-button.standard:hover:not(:disabled) {
    background: var(--main-color-0);
  }

.primary-button.editor {
  background: var(--background-color-3);
}

  .primary-button.editor:hover:not(:disabled) {
    background: var(--secondary-color-1);
  }

.primary-button.addon-icon:hover:not(:disabled)::before {
  color: inherit;
}

.primary-button.red {
  color: var(--main-color-3);
  background: var(--signal-color-1);
}

  .primary-button.red:hover:not(:disabled) {
    background: var(--hover-color-2);
  }

  .primary-button.red:active:not(:disabled) {
    background: var(--signal-color-1) !important;
  }

.primary-button.green {
  color: var(--main-color-0);
  background: var(--calendar-color-4);
}

  .primary-button.green:hover:not(:disabled) {
    color: var(--main-color-3);
    background: var(--hover-color-1);
  }

  .primary-button.green:active:not(:disabled) {
    color: var(--main-color-0) !important;
    background: var(--calendar-color-4) !important;
  }

.primary-iconbutton {
  background: var(--secondary-color-1);
}

  .primary-iconbutton:hover:not(:disabled) {
    background: var(--background-color-3);
  }

  .primary-iconbutton:active:not(:disabled) {
    background: var(--secondary-color-1);
  }

  .primary-iconbutton:disabled {
    opacity: 0.5;
    /*cursor: not-allowed;*/
  }

/*#endregion Primary button colors */

/*#region Primary button icons */

.primary-button.icon-save::before {
  background-image: var(--icon-save-white);
}

.primary-button.green.icon-save::before {
  background-image: var(--icon-save-dark);
}

.primary-button.green.icon-save:hover:not(:disabled)::before {
  background-image: var(--icon-save-white);
}

.primary-button.green.icon-save:active:not(:disabled)::before {
  background-image: var(--icon-save-dark);
}

.primary-button.icon-trash::before {
  background-image: var(--icon-trash-white);
}

.primary-button.green.icon-trash:hover:not(:disabled)::before {
  background-image: var(--icon-trash-green);
}

.primary-button.icon-calendar::before {
  background-image: var(--icon-calendar-white);
}

.primary-button.icon-edit-pen::before {
  background-image: var(--icon-edit-pen);
}

.primary-iconbutton.icon-arrow-left::before {
  background-image: var(--icon-arrow-left-dark);
}

.primary-iconbutton.icon-arrow-right::before {
  background-image: var(--icon-arrow-right-dark);
}

/*#endregion Primary button icons */

/*#region Secondary button layout */

.secondary-button {
  position: relative;
  height: 40px;
  border: 1px solid transparent;
  border-radius: var(--button-border-radius);
  padding: var(--button-padding);
  white-space: nowrap;
  font-size: var(--main-font-size);
}

  .secondary-button.addon-icon::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    vertical-align: sub;
    background-size: contain;
    background-repeat: no-repeat;
  }

  .secondary-button.small {
    height: 28px;
    border: 1px solid transparent;
    border-radius: var(--button-small-border-radius);
    padding: var(--button-small-padding);
  }

    .secondary-button.small.addon-icon::before {
      width: 13px;
      height: 13px;
      margin-right: 8px;
    }

  .secondary-button.no-border {
    border: 1px transparent;
    padding: 4px 32px;
    border-radius: var(--button-border-radius);
    display: flex;
    align-items: center;
  }

  .secondary-button.small.no-border {
    padding: 4px 4px;
    border-radius: var(--button-editor-border-radius);
  }

  .secondary-button.no-border .buttontext {
    margin-left: 0px;
  }

  .secondary-button.dotted {
    border: 1px dotted var(--main-color-2);
    padding: 10px;
    display: flex;
    align-items: center;
  }

    .secondary-button.dotted:disabled {
      border-color: #777;
    }

    .secondary-button.dotted .buttontext {
      margin-left: 10px;
    }

    .secondary-button.dotted svg {
      display: block;
    }

  .secondary-button:disabled, .secondary-button.standard:disabled {
    color: #777;
  }

    .secondary-button.standard:disabled:hover, .secondary-button:disabled:active {
      background: none;
    }

.secondary-iconbutton {
  height: 40px;
  width: 40px;
  border: solid 1px;
  border-radius: var(--iconbutton-border-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

  .secondary-iconbutton::before {
    content: '';
    display: inline-block;
    width: 11px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
  }


  .secondary-iconbutton.icon-close-x {
    border: none;
  }

    .secondary-iconbutton.icon-close-x::before {
      width: 24px;
      height: 24px;
    }

  .secondary-iconbutton.small {
    height: 28px;
    width: 28px;
  }

    .secondary-iconbutton.small::before {
      content: '';
      display: inline-block;
      width: 7px;
      height: 14px;
      background-size: contain;
      background-repeat: no-repeat;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .secondary-iconbutton.small.icon-close-x::before {
      width: 24px;
      height: 24px;
    }

/*#endregion Secondary button layout */

/*#region Secondary button colors */

.secondary-button:active:not(:disabled) {
  background: var(--main-color-3);
}

.secondary-button.standard {
  color: var(--main-color-1);
  border-color: var(--main-color-1);
  background: transparent;
}

  .secondary-button.standard:hover:not(:disabled) {
    background: var(--secondary-color-1);
  }

.secondary-button.red {
  color: var(--signal-color-1);
  border-color: var(--signal-color-1);
  background: var(--main-color-3);
}

  .secondary-button.red:hover:not(:disabled) {
    color: var(--signal-color-1);
    background: #FFE2E1;
  }

.secondary-button.green {
  color: var(--signal-color-2);
  border-color: var(--signal-color-2);
  background: var(--main-color-3);
}

  .secondary-button.green:hover:not(:disabled) {
    color: var(--signal-color-2);
    background: var(--signal-color-5);
  }

.secondary-iconbutton {
  border-color: var(--secondary-color-1);
  background: transparent;
}

  .secondary-iconbutton:hover:not(:disabled) {
    border-color: var(--background-color-3);
    background: var(--background-color-1);
  }

  .secondary-iconbutton:active:not(:disabled) {
    border-color: var(--secondary-color-1);
    background: var(--main-color-3);
  }

  .secondary-iconbutton:disabled {
    opacity: 0.5;
    /*cursor: not-allowed;*/
  }

  .secondary-iconbutton.icon-close-x:hover:not(:disabled) {
    border-color: transparent;
    background: transparent;
  }

  .secondary-iconbutton.icon-close-x:active:not(:disabled) {
    border-color: transparent;
    background: transparent;
  }

/*#endregion Secondary button colors */

/*#region Secondary button icons */

.secondary-button.icon-save::before {
  background-image: var(--icon-save-dark);
}

.secondary-button.red.icon-save::before {
  background-image: var(--icon-save-red);
}

.secondary-button.green.icon-save::before {
  background-image: var(--icon-save-green);
}

.secondary-button.icon-trash::before {
  background-image: var(--icon-trash-dark);
}

.secondary-button.red.icon-trash::before {
  background-image: var(--icon-trash-red);
}

.secondary-button.green.icon-trash::before {
  background-image: var(--icon-trash-green);
}

.secondary-button.icon-calendar::before {
  background-image: var(--icon-calendar-dark);
}

.secondary-button.icon-edit-pen::before {
  background-image: var(--icon-edit-pen);
}

.secondary-button.icon-add::before {
  background-image: var(--icon-add);
}

.secondary-iconbutton.icon-arrow-left::before {
  background-image: var(--icon-arrow-left-dark);
}

.secondary-iconbutton.icon-arrow-right::before {
  background-image: var(--icon-arrow-right-dark);
}

.secondary-iconbutton.icon-close-x::before {
  background-image: var(--icon-close-x);
}

.secondary-iconbutton.icon-close-x:hover:not(:disabled)::before {
  background-image: var(--icon-close-x-hover);
}

/*#endregion Secondary button icons */

/*#region NavStyle button */

.navstyle {
  color: var(--main-color-1);
  background: white;
  position: relative;
  height: 33px;
  border: none;
  border-radius: var(--iconbutton-border-radius);
  padding: var(--button-navstyle-padding);
  white-space: nowrap;
  font-size: var(--main-font-size);
}

  .navstyle:active:not(:disabled) {
    background: var(--secondary-color-3);
  }

  .navstyle:disabled {
    opacity: 0.5;
    /*cursor: not-allowed;*/
  }

  .navstyle::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 14px;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .navstyle.icon-arrow-left,
  .navstyle.icon-arrow-right {
    width: 28px;
    padding: 0px;
  }

    .navstyle.icon-arrow-left::before {
      background-image: var(--icon-arrow-left-dark);
    }

    .navstyle.icon-arrow-right::before {
      background-image: var(--icon-arrow-right-dark);
    }

  .navstyle .spinner-border {
    width: 1rem;
    height: 1rem;
    border-width: 0.12em;
    border-color: var(--main-color-2);
    border-right-color: transparent;
  }

/*#endregion NavStyle button */

/*#region ItemSelectButton */
/*#region ItemSelectButton layout */
.item-select-button {
  height: 32px;
  border: none;
  border-radius: var(--main-border-radius);
  padding: var(--itemselectbutton-padding);
  white-space: nowrap;
  font-size: var(--main-font-size);
  text-align: start;
}

  .item-select-button svg {
    width: 24px;
    height: 24px;
    margin-right: 8px;
  }

  .item-select-button.addon-icon::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    vertical-align: sub;
    background-size: contain;
    background-repeat: no-repeat;
  }

  /*#endregion ItemSelectButton layout */

  /*#region ItemSelectButton colors */

  .item-select-button:active {
    background: var(--background-color-1) !important;
  }

  .item-select-button.standard {
    color: var(--main-color-1);
    background: var(--main-color-3);
  }

    .item-select-button.standard.stateActive {
      background-color: var(--background-color-1);
    }

      .item-select-button.standard.stateActive:hover {
        background-color: var(--background-color-2);
      }

    .item-select-button.standard:hover {
      background: var(--background-color-2);
    }

  .item-select-button.addon-icon:hover::before {
    color: inherit;
  }

  /*#endregion ItemSelectButton colors */

  /*#region ItemSelectButton icons */

  .item-select-button.icon-calendar::before {
    background-image: var(--icon-calendar-dark);
  }

  .item-select-button.icon-edit-pen::before {
    background-image: var(--icon-edit-pen);
  }


/*#endregion ItemSelectButton icons */

/*#endregion ItemSelectButton */

/*#region toggle button */

.toggleButton {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.toggleButton-content {
  flex: 1 0 0%;
  display: flex;
  align-items: center;
  padding-right: 15px;
  padding-left: 15px;
}

/*#region Standard Toggle Button */

.toggle-standard-label {
  font-size: var(--main-font-size);
  font-weight: normal;
  white-space: nowrap;
  vertical-align: sub;
  display: flex;
  align-items: center;
}

.toggle-standard-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
  margin: 0px;
}

.toggle-standard-input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-standard-slider {
  position: absolute;
  cursor: pointer;
  border-radius: 34px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(359.84deg, #FFFFFF -49.71%, #BACCD5 109.2%);
  -webkit-transition: var(--change-state-duration);
  transition: var(--change-state-duration);
}

  .toggle-standard-slider:before {
    position: absolute;
    content: "";
    border-radius: 50%;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: linear-gradient(180deg, #313537 0%, #444F56 100%);
    -webkit-transition: var(--change-state-duration);
    transition: var(--change-state-duration);
  }

.toggle-standard-input:checked + .toggle-standard-slider {
  background: linear-gradient(180deg, #348D2C 0%, #69BA61 100%);
}

  .toggle-standard-input:checked + .toggle-standard-slider:before {
    background: linear-gradient(180deg, #313537 0%, #444F56 100%);
    -webkit-transform: translateX(18px);
    -ms-transform: translateX(18px);
    transform: translateX(26px);
  }

/*#endregion Standard Toggle Button */

/*#region Custom Toggle Button */

.toggle-custom-label {
  font-size: var(--main-font-size);
  white-space: nowrap;
  vertical-align: sub;
  display: flex;
  align-items: center;
}

.toggle-custom-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
  margin: unset;
}

.toggle-custom-input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-custom-slider {
  position: absolute;
  cursor: pointer;
  border-radius: 34px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(359.84deg, #FFFFFF -49.71%, #BACCD5 109.2%);
  -webkit-transition: var(--change-state-duration);
  transition: var(--change-state-duration);
}

  .toggle-custom-slider:before {
    position: absolute;
    /*content: "✗";*/
    content: "";
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: linear-gradient(180deg, #313537 0%, #444F56 100%);
    color: var(--main-color-3);
    -webkit-transition: var(--change-state-duration);
    transition: var(--change-state-duration);
  }

.toggle-custom-input:checked + .toggle-custom-slider {
  background: linear-gradient(180deg, #348D2C 0%, #69BA61 100%);
}

  .toggle-custom-input:checked + .toggle-custom-slider:before {
    content: "";
    /*content: "✓";*/
    font-size: 12px;
    color: var(--main-color-3);
    background: linear-gradient(180deg, #313537 0%, #444F56 100%);
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }

/*#endregion Custom Toggle Button */

/*#endregion Toggle Button */

/*#region switcher */

.base-switcher-container {
  background: transparent;
  border: solid 1px white;
  border-radius: var(--button-small-border-radius);
  height: 33px;
  display: flex;
  align-items: center;
  padding: 4px;
  gap: 4px;
}

  .base-switcher-container button {
    width: 70px;
    background: white;
    border: none;
    border-radius: var(--button-small-border-radius) !important;
    border: none;
    height: 25px;
    font-size: 13px;
    /* padding: 0px 16px; */
    /* margin: 0px 8px; */
  }

    .base-switcher-container button:first-child {
      /*margin-left: 24px;*/
    }

    .base-switcher-container button:last-child {
      /*margin-right: 24px;*/
    }

    .base-switcher-container button.active {
      background: linear-gradient(180deg, #313537 0%, #444F56 100%);
      color: var(--main-color-3);
      border-radius: var(--button-small-border-radius);
    }

    .base-switcher-container button:hover {
      background-color: var(--main-color-1);
      color: var(--main-color-3);
      border-radius: var(--button-small-border-radius);
    }

/*#endregion switcher */

/*#region selector */

.selector-timerecording-container,
.selector-add-container {
  background-color: transparent;
  height: 68px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
}

  .selector-timerecording-container:hover,
  .selector-add-container:hover {
    /*background-color: var(--background-color-1);*/
    background: linear-gradient(28.44deg, #FFFFFF 37.77%, #D3E7F1 110.16%);
    border-radius: var(--button-editor-border-radius);
  }

  .selector-timerecording-container button,
  .selector-add-container button {
    background: none;
    border: none;
    font-size: 11px;
    line-height: 13.2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

    .selector-timerecording-container button.active,
    .selector-add-container button.active {
      background-color: var(--background-color-1);
      border-radius: var(--main-border-radius);
    }

    .selector-timerecording-container button:hover,
    .selector-add-container button:hover {
      /*background-color: var(--secondary-color-3);*/
      /*border-radius: var(--main-border-radius);*/
    }

    .selector-timerecording-container button .icon {
      background-image: var(--icon-calendar-with-clock-dark);
      width: 24px;
      height: 24px;
      background-size: contain;
      background-repeat: no-repeat;
      margin-bottom: 3px;
    }

    .selector-add-container button .icon {
      background-image: var(--icon-calendar-with-addsign-dark);
      width: 24px;
      height: 24px;
      background-size: contain;
      background-repeat: no-repeat;
      margin-bottom: 3px;
    }

    .selector-timerecording-container button .textrow,
    .selector-add-container button .textrow {
      width: 62px;
      display: flex;
      align-items: center;
    }

    .selector-timerecording-container button .text,
    .selector-add-container button .text {
      width: 50px;
      margin: 0px;
      padding: 0px;
    }

    .selector-timerecording-container button .chevron,
    .selector-add-container button .chevron {
      width: 12px;
      height: 7px;
      pointer-events: none;
    }

      .selector-timerecording-container button .chevron.rotated,
      .selector-add-container button .chevron.rotated {
        transform: rotate(180deg);
      }

/*#endregion selector */

/*#region radio button control */

.radio-button-control {
  padding: 10px;
}

.radio-button-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--main-font-size);
  font-weight: 500;
  line-height: 15.6px;
  letter-spacing: 0.01em;
  text-align: left;
  padding: 0px 0px 4px 0px;
}

  .radio-button-header label {
    margin: 0;
  }

.radio-button-button {
  display: flex;
  align-items: center;
  height: 20px;
  width: 20px;
  border: none;
  background: none;
  padding: 0px;
  margin: 0px;
}

.radio-button-icon {
  width: 12px;
  height: 7px;
}

.radio-button-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.radio-button-item {
  align-content: center;
  height: 44px;
}

  .radio-button-item.wino-radio-border {
    border: 1px solid var(--background-color-3);
    border-radius: var(--radiobutton-border-radius);
  }

  .radio-button-item.wino-radio-box {
    background: linear-gradient(56.64deg, var(--main-color-3) -12.82%, var(--background-color-3) 96.94%);
    border-radius: var(--radiobutton-border-radius);
  }

.radio-button-input {
  appearance: none;
  height: 22px;
  width: 22px;
  margin-left: 12px;
  margin-right: 8px;
  border-radius: 50%;
  border: 1px solid var(--main-color-2);
  outline: none;
  cursor: pointer;
  position: relative;
}

  .radio-button-input:checked {
    background-color: var(--main-color-3);
    border-color: var(--main-color-2);
  }

    .radio-button-input:checked::before {
      content: '';
      display: block;
      width: 14px;
      height: 14px;
      background-color: var(--main-color-2);
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

.radio-button-label {
  display: flex;
  align-items: center;
  font-size: var(--main-font-size);
  margin: 0px;
}

/*#endregion radio button control */
/*#region custom a tag (for download of file using query)*/
a.documentlink:not([href]), a.documentlink:not([href]):hover {
  text-decoration: underline;
  cursor: pointer;
}
/*#endregion custom a tag (for download of file using query)*/

/*#region closebutton*/

button.close {
  width: 24px;
  height: 24px;
  background-color: var(--secondary-color-1);
  border: none;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}

button.close.transparent {
  background-color: transparent;
}

button.close:hover {
  background-color: var(--main-color-1);
}
/*#endregion closebutton*/
/*#region custom a tag*/
a:not([href]):not([tabindex]).hrefless {
  text-decoration: underline;
  cursor: pointer;
}
/*#endregion custom a tag*/