.werkhervatting-table-container {
  width: 100%;
  overflow-x: auto;
}

.werkhervatting-table {
  background: #fff;
}

.werkhervatting-table th,
.werkhervatting-table td {
  padding: 0.5rem 0.75rem;
  vertical-align: middle;
}

.werkhervatting-table .form-group {
  margin: 0;
}

.werkhervatting-table .form-check {
  margin: 0;
}

.werkhervatting-table .form-check-input {
  margin-left: 0;
}

.werkhervatting-table .form-control-grouping {
  display: flex;
  align-items: center;
  justify-content: center;
}

.werkhervatting-table .custom-control-label {
  font-size: 0;
}

.werkhervatting-table .custom-control-label::before,
.werkhervatting-table .custom-control-label::after {
  border-radius: 50%;
}

.werkhervatting-table .col-wijzigen,
.werkhervatting-table .col-gemuteerd {
  text-align: center;
  white-space: nowrap;
}
/* Ensure height is aligned with different control types; otherwise we see alignment offsets */
/* 27333 Time field height issue */
.generic-form .form-control,
.generic-form .form-control-grouping,
.generic-form .type-html > div {
  min-height: 52px;
}

/* Datepicker expanding width based on parent */
.generic-form .form-group .input-datepicker .input-group-prepend > .input-group-append > div:first-child {
  flex-grow: 1;
}

.generic-form .form-group .input-datepicker .react-datepicker-wrapper,
.generic-form .form-group .input-datepicker .input-group-prepend,
.generic-form .form-group .input-datepicker .input-group-prepend > .input-group-append {
  width: 100%;
}

/* Datepicker border issues */
.generic-form .form-group .input-datepicker .form-control {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.generic-form .form-group .input-datepicker .input-group-icon {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

/* Repeatable table */
.generic-form table .type-fieldgroup {
  position: relative;
}

.generic-form table button.has-icon {
  position: absolute;
  top: 0;
  right: 0;
}

.generic-form table button.has-icon-trash .btn-inner--text {
  display: none;
}

/* Tables */
.generic-form table td {
  vertical-align: middle;
}

/* Form sizes */
.generic-form .fs-2x {
  font-size: 2rem;
}

.generic-form .fs-1-5x {
  font-size: 1.5rem;
}

.generic-form .has-icon .icon {
  vertical-align: baseline;
}

/* Explicit form, hide cancel buttons in interface */
/* TODO We might want to refactor this and actually filter out the button at some point */
.taskform-explicit button.type-cancel {
  display: none !important;
}
/* There actually is an offset in the icon font causing a gap here */
.go-back-link .icon { margin-left: -5px; }.table.align-middle tbody td { vertical-align: middle; }
.skeleton {
    border: 1px solid #E6E0DA;
    border-radius: 8px;
    opacity: .7;
    animation: loading 1.5s linear infinite alternate;
}

.skeleton--type-card {
    height: 220px;
}

.skeleton--type-overzicht-tiles {
    height: 1280px;
}

.skeleton--type-table {
    height: 800px;
}

.skeleton--type-title {
    height: 96px;
    border: none;
}

/* align height with not-found-result */
.skeleton--type-task-form {
    height: 23rem;
}


@keyframes loading {
    0% {
        background-color: hsl(30, 35%, 93%);
    }

    100% {
        background-color: hsl(30, 35%, 100%);

    }
}

.toolbar { gap: 2rem; }
.toolbar .date-picker .react-datepicker-wrapper input { border-radius: 0.5rem; }

.toolbar .date-picker .input-group-prepend .input-group-icon { border-radius: 0.5rem 0 0 0.5rem; }
.toolbar .date-picker .input-group-append .input-group-icon { border-radius:  0 0.5rem 0.5rem 0; }

.toolbar .date-picker > div:first-child:not(:only-child) .react-datepicker-wrapper input { border-bottom-right-radius: 0; border-top-right-radius: 0; }