/* Required duration selection for 10-class program purchases. */

.program-card-art .program-art-code {
  display: inline-flex !important;
}

.program-dialog-art > span {
  display: grid !important;
}

.program-duration-picker {
  display: grid;
  gap: 7px;
  margin-top: 28px;
  padding: 18px;
  border: 1px solid #d2e3fc;
  border-radius: 18px;
  background: #f4f8ff;
}

.program-duration-picker label {
  color: #202124;
  font-size: 14px;
  font-weight: 850;
}

.program-duration-picker select {
  width: 100%;
  min-height: 50px;
  padding: 0 14px;
  border: 1px solid #b8cdf5;
  border-radius: 13px;
  color: #202124;
  background: #ffffff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
}

.program-duration-picker select:focus {
  border-color: #4285f4;
  outline: 3px solid rgba(66, 133, 244, .16);
  outline-offset: 1px;
}

.program-duration-picker small {
  color: #5f6368;
  font-size: 12px;
  line-height: 1.5;
}

.program-duration-picker select:disabled {
  color: #6f7783;
  border-color: #d8dde5;
  background: #e8ebef;
  cursor: not-allowed;
}

.program-card-price {
  min-width: 0;
}

.program-card-price small {
  max-width: 185px;
  line-height: 1.35;
}

@media (max-width: 620px) {
  .program-dialog-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .program-dialog-footer .pc-button {
    width: 100%;
  }
}