.form-field-wrapper {
  display: flex;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.25rem;
  border-radius: 0.375rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-bottom: 0.375rem;
  padding-top: 0.625rem;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-inset: inset;
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(214 211 209 / var(--tw-ring-opacity));
}

.form-field-wrapper:focus-within {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(87 83 78 / var(--tw-ring-opacity));
}

.form-field-wrapper:hover {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(120 113 108 / var(--tw-ring-opacity));
}

.form-field-lable {
  display: block;
  text-align: left;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(120 113 108 / var(--tw-text-opacity));
}

.form-field-input {
  display: block;
  width: 100%;
  border-width: 0px;
  padding: 0px;
  --tw-text-opacity: 1;
  color: rgb(28 25 23 / var(--tw-text-opacity));
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.form-field-input::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(168 162 158 / var(--tw-text-opacity));
}

.form-field-input::placeholder {
  --tw-text-opacity: 1;
  color: rgb(168 162 158 / var(--tw-text-opacity));
}

.form-field-input:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

@media (min-width: 640px) {
  .form-field-input {
    font-size: 0.875rem;
    line-height: 1.5rem;
  }
}

select.form-field-input {
  -moz-appearance: none;
       appearance: none;
  /* safari */
  -webkit-appearance: none;
  /* other styles for aesthetics */
  width: 100%;
  background-color: #fff;
  color: black;
  cursor: pointer;
}

select.form-field-input option[value=""] {
  color: darkgray;
}

input:optional {
  border-color: gray;
}

.form-field-wrapper:has(input:required) {
  position: relative;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(214 211 209 / var(--tw-ring-opacity));
}

.form-field-wrapper:hover,
.form-field-wrapper:has(input:required):hover,
.form-field-wrapper:has(input:focus) {
  position: relative;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(14 165 233 / var(--tw-ring-opacity));
}

.form-field-wrapper:has(input:required):after {
  content: "*";
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  --tw-text-opacity: 1;
  color: rgb(120 113 108 / var(--tw-text-opacity));
}

input:invalid {
  border-color: red;
}

::-webkit-datetime-edit {
  height: 1.5rem;
}

::-webkit-datetime-edit-fields-wrapper {
  background: transparent;
}

::-webkit-datetime-edit-text {
  --tw-text-opacity: 1;
  color: rgb(28 25 23 / var(--tw-text-opacity));
}

::-webkit-datetime-edit-month-field {
  --tw-text-opacity: 1;
  color: rgb(28 25 23 / var(--tw-text-opacity));
}

::-webkit-datetime-edit-day-field {
  --tw-text-opacity: 1;
  color: rgb(28 25 23 / var(--tw-text-opacity));
}

::-webkit-datetime-edit-year-field {
  --tw-text-opacity: 1;
  color: rgb(28 25 23 / var(--tw-text-opacity));
}

::-webkit-inner-spin-button {
  display: none;
}

/* ::-webkit-calendar-picker-indicator {
  background: orange;
} */

.worktime-grid-row {
  display: grid;
  align-items: center;
  padding-right: 0.75rem;
  grid-template-columns: 4fr 1fr 1rem 1fr 1fr 1fr 0.5fr;
  grid-template-areas: "date start arrow stop pause worktime actions";
}

@media only screen and (max-width: 600px) {
  .worktime-grid-row {
    display: flex;
    flex-wrap: wrap;
  }
}

.arrow {
  grid-area: arrow;
}

.actions {
  grid-area: actions;
}

.date {
  grid-area: date;
}

.start {
  grid-area: start;
}

.stop {
  grid-area: stop;
}

.pause {
  grid-area: pause;
}

.type {
  grid-area: type;
}

.worktime {
  grid-area: worktime;
}