.dri-candidate {
  background: linear-gradient(135deg, #fff 0%, #f1faf8 100%);
  border: 1px solid rgba(18, 96, 107, .14);
  border-radius: 22px;
  box-shadow: 0 16px 38px rgba(18, 96, 107, .09);
  padding: clamp(20px, 4vw, 32px);
}
.dri-candidate .dri-appointments {
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.dri-candidate .appointment-option {
  background: #fff !important;
  border: 1px solid #c7d9d6 !important;
  border-radius: 15px !important;
  cursor: pointer;
  display: flex !important;
  min-height: 76px;
  padding: 16px !important;
  position: relative;
  transition: .2s;
}
.dri-candidate .appointment-option:hover {
  border-color: #48a6aa !important;
  box-shadow: 0 10px 22px rgba(18, 96, 107, .09);
  transform: translateY(-2px);
}
.dri-candidate .appointment-option:has(input:checked) {
  background: #effbf4 !important;
  border: 2px solid #2fae66 !important;
  box-shadow: 0 0 0 4px rgba(47, 174, 102, .1);
}
.dri-candidate .appointment-option input {
  accent-color: #2fae66;
  flex: 0 0 auto;
  height: 18px !important;
  margin: 2px 0 0 !important;
  width: 18px !important;
}
.dri-candidate .appointment-option span {
  font-weight: 800;
  line-height: 1.45;
}
.dri-candidate .dri-appointments > .button {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 6px;
}
.dri-access-pending {
  background: #edf7fa;
  border-left: 4px solid #48a6aa;
  border-radius: 10px;
  display: grid;
  gap: 4px;
  padding: 14px 16px;
}
.dri-access-pending span {
  color: #587072;
  font-size: 13px;
}
.dri-meeting-access {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 2px;
}
.dri-meeting-access .button.disabled {
  cursor: not-allowed;
  filter: grayscale(.25);
  opacity: .5;
  pointer-events: none;
}
.dri-meeting-access small {
  color: #587072;
  font-size: 12px;
  line-height: 1.5;
}
.dri-meeting-access.dri-access-pending {
  align-items: flex-start;
}
.dri-proposal-reschedule {
  border-top: 1px solid #d7e4e2;
  margin-top: 8px;
  padding-top: 16px;
}
.dri-proposal-reschedule summary {
  color: #12606b;
  cursor: pointer;
  font-weight: 800;
}
.dri-proposal-reschedule[open] summary {
  margin-bottom: 12px;
}
@media (max-width: 600px) {
  .dri-candidate .dri-appointments { grid-template-columns: 1fr; }
  .dri-candidate .dri-appointments > .button {
    justify-self: stretch;
    width: 100%;
  }
}

.dri-reschedule,.dri-reschedule *{box-sizing:border-box;min-width:0}
.dri-reschedule label{display:grid;gap:8px;color:#143f43;font-size:14px;font-weight:700}
.dri-reschedule input[type="datetime-local"],.dri-reschedule textarea{width:100%;max-width:100%;padding:12px 14px;border:1px solid #c7d9d6;border-radius:10px;background:#fff;color:#143f43;font:inherit;min-height:46px}
.dri-reschedule input:focus,.dri-reschedule textarea:focus{outline:2px solid #48a6aa;outline-offset:2px}
.dri-date-picker{display:flex;align-items:stretch;gap:8px;min-width:0}
.dri-date-picker input{flex:1;min-width:0}
.dri-date-picker .button,.dri-reschedule>.button{padding:12px 16px;border:1px solid #12606b;border-radius:10px;background:#12606b;color:#fff;font:inherit;font-size:14px;font-weight:700;cursor:pointer;justify-self:start}
.dri-date-picker .button{background:#edf7f6;color:#12606b;white-space:nowrap}
.dri-reschedule small{color:#587072;line-height:1.5}
.dri-reschedule :disabled{cursor:not-allowed;opacity:.6}
@media(max-width:600px){.dri-date-picker{flex-direction:column}.dri-date-picker .button,.dri-reschedule>.button{width:100%;justify-self:stretch}}

/* All appointment choices use one column until desktop width. */
.dri-candidate .dri-appointments,.dri-reschedule-options .dri-appointments{grid-template-columns:1fr}
.dri-appointments>.button{grid-column:1/-1;justify-self:start}
@media(min-width:1024px){.dri-candidate .dri-appointments,.dri-reschedule-options .dri-appointments{grid-template-columns:repeat(2,minmax(0,1fr))}}