/* Node template*/
.duty-circle-container {
  position: absolute;
  height: 15%;
  width: 80%;
  top: 10%;
  display: flex;
  justify-content: space-evenly;
  margin: 4px;
}

.duty-circle {
  flex: 1;
  height: 100%;
  border-radius: 50%;
  max-width: 7px;
  max-height: 7px;
  border: 1px solid #366764;
}

/* Container and search bar */

.duty-list-container {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 12px;
  background-color: #e9ecef;
  display: inline-block;
  box-sizing: border-box;
  margin-bottom: 5px;
  zoom: 1.2;
}

.duty-list-container-hidden {
  display: none;
}

.duty-header-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.duty-search.e-control-wrapper {
  display: block !important;
  width: auto !important;
  max-width: 240px;
  margin-left: 16px;  maybe make more robust later 
}

/* Duty boxes */

.duty-tree .e-ul {
  display: flex !important;
  flex-wrap: wrap !important;
}

.duty-tree .e-fullrow {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  pointer-events: none !important;
}

.duty-tree .e-list-item,
.duty-tree .e-text-content,
.duty-tree .e-list-text {
  display: inline-flex !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

.duty-tree .duty-box {
  pointer-events: auto;
  display: flex;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 6px;
  margin: 4px;
  box-sizing: border-box;
  white-space: nowrap;
  min-width: 80px;
  font-size: 1.3rem;
}

/* Dragged item */

.e-drag-item:has(.duty-box) {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

  .e-drag-item:has(.duty-box) .e-text-content,
  .e-drag-item:has(.duty-box) .e-list-text {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
  }

  .e-drag-item:has(.duty-box) .duty-box {
    margin: 0 !important;
  }

/* Node template*/
.employee-circle-container {
  position: absolute;
  height: 15%;
  width: 80%;
  top: 10%;
  display: flex;
  justify-content: space-evenly;
  margin: 4px;
}

.employee-circle {
  flex: 1;
  height: 100%;
  border-radius: 50%;
  max-width: 7px;
  max-height: 7px;
  border: 1px solid #366764;
}

/* Container and search bar */

.employee-list-container {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 12px;
  background-color: #e9ecef;
  display: inline-block;
  box-sizing: border-box;
  margin-bottom: 5px;
  zoom: 1.2;
}

.employee-list-container-hidden {
  display: none;
}

.employee-header-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.employee-search.e-control-wrapper {
  display: block !important;
  width: auto !important;
  max-width: 240px;
  margin-left: 16px; /* maybe make more robust later */
  margin-top: 5px !important;
}

/* Employee boxes */

.employee-tree .e-ul {
  display: flex !important;
  flex-wrap: wrap !important;
}

.employee-tree .e-fullrow {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  pointer-events: none !important;
}

.employee-tree .e-list-item,
.employee-tree .e-text-content,
.employee-tree .e-list-text {
  display: inline-flex !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

.employee-tree .employee-box {
  pointer-events: auto;
  display: flex;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 6px;
  margin: 4px;
  box-sizing: border-box;
  white-space: nowrap;
  background-color: #e0fbff;
  min-width: 120px;
}

/* Dragged item */

.e-drag-item:has(.employee-box) {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

  .e-drag-item:has(.employee-box) .e-text-content,
  .e-drag-item:has(.employee-box) .e-list-text {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
  }

  .e-drag-item:has(.employee-box) .employee-box {
    margin: 0 !important;
  }

/* Schedule Dialog*/
.e-dialog.e-schedule-dialog {
  min-height: auto !important;
  height: auto !important;
  max-height: 95vh !important;
  display: flex;
  flex-direction: column;
}

.e-schedule-dialog.e-dialog .e-dlg-content,
.e-schedule-dialog .e-form-container,
.e-schedule-dialog form.e-schedule-form {
  height: auto !important;
  min-height: auto !important;
  flex: 1 0 auto;
}

.e-schedule-dialog .e-multi-line-input.e-input-group {
  height: auto !important;
  min-height: auto !important;
}

.e-schedule-dialog textarea#Description {
  min-height: 60px !important;
  height: 100px; 
  resize: vertical !important; 
  overflow-y: auto; 
}