.appointment-panel { padding: 24px 0; max-width: 760px; }
.appointment-panel h3 { margin-top: 0; font-size: 24px; }
.appointment-panel > p { color: #657080; line-height: 1.7; }
.appointment-form { margin-top: 24px; }
.appointment-form .form-group { margin-bottom: 20px; }
.appointment-form label { display: block; margin-bottom: 8px; font-weight: 600; }
.appointment-form .form-control { height: 46px; border-radius: 6px; border: 1px solid #cdd6df; padding: 10px 12px; background: #fff; color: #263b4c; }
.appointment-form .form-control[readonly] { background: #f4f6f8; }
.appointment-form .form-control:disabled { background: #f4f6f8; cursor: not-allowed; }
.appointment-form .appointment-picker { display: flex; width: 100%; }
.appointment-form .input-group.appointment-picker > .form-control { flex: 1; min-width: 0; float: none; border-radius: 6px 0 0 6px; background: #fff; cursor: pointer; }
.appointment-picker-toggle { display: flex; align-items: center; justify-content: center; flex: 0 0 46px; width: 46px; height: 46px; padding: 0; border: 1px solid #cdd6df; border-left: 0; border-radius: 0 6px 6px 0; background: #f4f6f8; color: #2876af; cursor: pointer; }
.appointment-picker-toggle:hover, .appointment-picker-toggle:focus { background: #e8f1f8; color: #173f60; }
.appointment-form .form-control:focus { border-color: #2876af; box-shadow: 0 0 0 3px rgba(40,118,175,.12); }
.appointment-form .has-error .form-control { border-color: #b83232; }
.appointment-error { display: block; color: #b83232; font-size: 13px; margin-top: 5px; }
.appointment-form .btn { min-height: 46px; border-radius: 6px; padding: 10px 24px; }
.appointment-form .help-block { margin-bottom: 0; }
.appointment-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
#appointment-message[hidden] { display: none; }
/* jQuery 3 restores the active calendar view without an inline display value. */
.datepicker.appointment-datepicker > div { display: block; }
.appointment-form .bootstrap-timepicker-widget { width: 190px; max-width: 100%; padding: 6px; margin-top: 8px; box-shadow: 0 6px 25px rgba(20,45,70,.18); }
.appointment-form .bootstrap-timepicker-widget input.form-control { width: 54px; height: 40px; padding: 8px; margin: auto; display: inline-block; border-radius: 5px; }
@media (max-width: 767px) { .appointment-schedule > div + div { margin-top: 20px; } }
@media (max-width: 575px) { .appointment-panel { padding: 18px 0; } .appointment-form .btn { width: 100%; } }