.appointment-scheduler-wrapper {padding:15px;}
.appointment-scheduler-wrapper h2, .appointment-scheduler-wrapper h3, .appointment-scheduler-wrapper h4, .appointment-scheduler-wrapper h5 {margin:0;padding:0;text-align:center;}
.appointment-scheduler-wrapper h4 {border-bottom:1px solid #ddd;padding-bottom:10px;margin-bottom:10px;}
.appointment-loader{background:rgba(50,50,50,.15);display:none;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
.appointment-card{background:#fff;border:1px solid #ccd0d4;border-radius:8px;padding:16px;max-width:640px}
.appointment-filters-wrap {background:rgba(0, 0, 0, .05);display:flex;flex-direction:row;padding:30px;border:1px solid #bbb;border-radius:3px;margin:15px 0}
.appointment-filters-wrap > div {flex:1 1 auto;display:flex;flex-direction:row;align-items:center}
.appointment-filters-wrap label {font-weight:700;margin-right:5px}
.appointment-filters-wrap select {margin:0;padding:0 12px}
.appointment-field{margin:12px 0}
.appointment-field label{display:block;font-weight:600;margin-bottom:6px}
.appointment-help{color:#646970;font-size:12px}
.appointment-error{border:1px solid #d63638;background:#fef2f2;color:#8a2424;padding:12px;border-radius:6px}
.appointment-empty{border:1px solid #ddd;background:#fafafa;color:#333;padding:12px;border-radius:6px}
.appointment-clinics{display:grid;gap:16px}
.appointment-clinic{border:1px solid #eee;border-radius:10px;padding:16px}
.appointment-clinic__name{font-weight:700;font-size:1.1rem;margin-bottom:6px}
.appointment-clinic__phone{margin-top:6px}
.appointment-clinic__actions{margin-top:10px}
.appointment-clinic__btn{background:#2271b1;color:#fff;border:none;border-radius:6px;padding:8px 12px;cursor:pointer}
.appointment-clinic__btn:hover{filter:brightness(0.95)}
.appointment-patient-wrap .appointment-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.appointment-patient-wrap label{display:flex;flex-direction:column;font-weight:600;gap:4px}
.appointment-patient-wrap input{padding:8px;border:1px solid #ddd;border-radius:6px}
#appointment-submit-appointment{background:#2271b1;color:#fff;border:none;border-radius:6px;padding:10px 14px;cursor:pointer}
#appointment-submit-appointment[disabled]{opacity:.6;cursor:not-allowed}
#schedulerModal{display:none;position:fixed;z-index:1;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4);}
#schedulerModal .modal-content{background-color:#fefefe;margin:100px auto;padding:20px;border:1px solid #888;width:700px;max-width:80%;}
#schedulerModal .close{color:#aaa;float:right;font-size:28px;font-weight:bold;}
#schedulerModal .close:hover,#schedulerModal .close:focus{color:black;text-decoration:none;cursor:pointer;}
.appointmentDateWrapper, .appointmentWeekWrapper, .appointment-calendar-wrapper {display:flex;flex-direction:row;flex-wrap:nowrap;flex:1 1 auto;}
.prevWeek, .nextWeek {flex-basis:50px;}
.prevWeek:hover, .nextWeek:hover {cursor:pointer;}
.day-wrapper {flex:1;padding:10px;}
.day-wrapper button {width:100%;padding:10px;margin-bottom:5px;border-radius:3px;border:1px solid #bbb}
.appointment-filters-wrap .appointment-date-wrap, .appointment-filters-wrap .appointment-slots-wrap {display: none;}
.chevron {height:50px;margin-top:30px;transition:opacity .3s ease 0s;width:50px;}
.chevron:hover {opacity:.7;}
.appointment-calendar-wrapper {display:flex;flex-direction:row;flex-wrap:nowrap;}
.appointment-calendar-wrapper > div {flex:1 1 auto;}
.appointment-calendar-wrapper .day-wrapper {display:flex;flex-direction:row;flex-wrap:wrap; gap:10px;}
.appointment-calendar-wrapper .day-wrapper button {flex: 1 1 48%; width: auto;}
.appointment-calendar-wrapper .ui-datepicker-inline.ui-datepicker {width: 300px;}
.appointment-calendar-wrapper .ui-state-default, .appointment-calendar-wrapper .ui-widget-content .ui-state-default, .appointment-calendar-wrapper .ui-widget-header .ui-state-default {padding: 13px 10px 12px 10px;}
.appointment-scheduler-wrapper .day-wrapper h3 {display: block;width: 100%;text-align: left;}


@media only screen and (max-width: 1200px){
	.appointment-filters-wrap > div {display:block;}
	.appointment-filters-wrap label {margin:0 0 5px;}
}

@media only screen and (max-width: 700px){
	.appointment-filters-wrap {display:block;}
	.appointment-filters-wrap > div {margin-bottom:15px;}
	.appointment-appointment-wrap, .appointment-provider-wrap {text-align:center;}
	.appointmentDateWrapper {display:block;}
	.appointment-calendar-wrapper {display:block;}
	.appointment-calendar-wrapper .ui-datepicker-inline.ui-datepicker {margin: 0 auto;}
	.appointment-scheduler-wrapper .day-wrapper h3, .appointment-scheduler-wrapper .day-wrapper h5 {text-align: center;}
}