﻿.wino2-editor-container {
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: auto;
  scrollbar-width: thin; /* Thin scrollbar for Firefox */
  will-change: scroll-position; /* Fixes für Scrolling-Verschiebung --> https://developer.mozilla.org/en-US/docs/Web/CSS/will-change */
}

  /* Custom scrollbar for Chrome, Safari and Opera */
  .wino2-editor-container::-webkit-scrollbar {
    width: 4px; /* Very thin scrollbar */
  }

  .wino2-editor-container::-webkit-scrollbar-track {
    background: transparent; /* Transparent track */
  }

  .wino2-editor-container::-webkit-scrollbar-thumb {
    background: var(--background-color-3);
    border-radius: 2px;
  }

    .wino2-editor-container::-webkit-scrollbar-thumb:hover {
      background: #9BB0BD; /* Slightly darker on hover */
    }

.wino2-content-area {
  width: 354px;
  height: auto;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
}

.wino2-fileupload-area {
  width: 100%;
  margin-bottom: 40px;
  padding: 0px 40px;
}

.wino2-editorheader {
  display: flex;
  font-size: var(--header-font-size);
  font-weight: bold;
  width: 100%;
  margin-bottom: 24px;
}

  .wino2-editorheader.with-control {
    justify-content: space-between;
  }

.wino2-editorsection {
  width: 100%;
  margin-bottom: 40px;
}

  .wino2-editorsection.subsection {
    padding-left: 32px;
    border-left: 2px solid var(--background-color-3);
  }

.wino2-editorlabel {
  display: flex;
  font-weight: 500;
  height: 18px;
  font-size: 15px;
  margin-bottom: 14px;
  align-items: center;
}

  .wino2-editorlabel.with-control {
    justify-content: space-between;
  }

    .wino2-editorlabel.with-control.standalone {
      margin-bottom: 0px;
    }

    .wino2-editorlabel.with-control .pointer {
      cursor: pointer;
    }

    .wino2-editorlabel.with-control .link {
      font-size: 13px;
      font-weight: normal;
      text-decoration: underline;
      cursor: pointer;
    }

      .wino2-editorlabel.with-control .link.red {
        color: var(--calendar-color-5);
      }

.wino2-editorsublabel {
  font-size: 13px;
  margin-bottom: 10px;
}

.wino2-editor-input-group {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 4px;
}

  .wino2-editor-input-group.cursor {
    cursor: pointer;
  }

.wino2-editor-input-label {
  width: 59px;
  font-size: 13px;
  margin-right: 10px;
}

  .wino2-editor-input-label.cursor {
    cursor: pointer;
  }

.wino2-editor-info-field {
  display: flex;
  align-items: center;
  justify-content: start;
  width: 100%;
  height: 44px;
  background-color: var(--background-color-1);
  border-radius: var(--main-border-radius);
}

  .wino2-editor-info-field .icon {
    margin: 0px 8px 0px 12px;
  }

  .wino2-editor-info-field .text {
    text-decoration: underline;
  }

.wino2-editor-input-field {
  width: 100%;
}

  .wino2-editor-input-field.additional-selection {
    display: flex;
    justify-content: space-between;
  }

    .wino2-editor-input-field.additional-selection .teams-meeting {
      display: flex;
      align-items: center;
    }

.wino2-editor-checkbox-container {
  display: flex;
  align-items: center;
  width: 100%;
  height: 44px;
  border-radius: 8px;
  border: 1px solid #BACCD5;
  padding: 0 10px;
}

  .wino2-editor-checkbox-container input[type="checkbox"] {
    width: 24px;
    height: 24px;
    margin-right: 10px;
    margin-left: 4px;
    accent-color: #313537;
    border-radius: var(--button-editor-border-radius);
  }

  .wino2-editor-checkbox-container label {
    font-family: 'Fira Sans', sans-serif;
    font-size: 15px;
    color: #313537;
    margin: 0px;
    padding: 0px;
  }

.wino2-editor-hr {
  border: none;
  height: 1px;
  /* bssd ToDo: der Style kommt noch vom Dave */
  background: linear-gradient(89.53deg, rgba(186, 204, 213, 0) 0.66%, #BACCD5 50.5%, rgba(186, 204, 213, 0) 99.84%);
  background: rgba(186, 204, 213, 0);
  background: linear-gradient(270deg,rgba(186, 204, 213, 0) 0%, rgba(186, 204, 213, 1) 50%, rgba(186, 204, 213, 1) 100%);
  padding: 0px;
  margin: 0px;
}


.wino2-editor-listbox {
  border: 1px solid #BACCD5;
  border-radius: 8px;
  box-shadow: 0px 7px 24px 0px #AFC0CC;
}

.wino2-editor-listbox-item-template {
  display: flex;
  align-items: center;
}

.wino2-editor-listbox-item-template-icon {
  margin: 0px 8px 0px 4px;
}

.wino2-editor-listbox-item-template-text {
  display: flex;
  flex-flow: column;
}

.wino2-editor-listbox-item-template-text-phone {
  opacity: 0.65;
}

.wino2-editor-participants-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 4px;
  border: 1px solid #BACCD5;
  border-radius: 8px;
  min-height: 36px;
  background-color: white;
}

.wino2-editor-participants-tags {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 4px;
}

.wino2-editor-participant-tag {
  display: flex;
  align-items: center;
  width: fit-content;
  background-color: var(--background-color-1);
  border: none;
  border-radius: 4px;
  padding: 4px 8px;
  margin: 2px;
  font-size: 13px;
}

.wino2-editor-participant-name {
  margin-right: 6px;
}

.wino2-editor-participant-remove {
  background: none;
  border: none;
  color: #5f6368;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0;
}

  .wino2-editor-participant-remove:hover {
    color: #d93025;
  }

.wino2-editor-placeholder-14px-bottom {
  margin: 0px 0px 14px 0px;
}
