section.appointments.create{padding:32px;}
section.appointments.create h1{text-align: center;}
section.appointments.create > p > span:hover{cursor: pointer;}
section.appointments.create > .dates{display: flex; align-items: center; justify-content: center;}
section.appointments.create > .dates input.selectDate{padding:8px 12px;outline:0;}
section.appointments.create > .appointment-list{display: flex; flex-wrap:wrap; justify-content: center;padding:32px;background:#f9f9f9;margin-top:32px;}
section.appointments.create > .appointment-list .appointment p.no-results{font-size:24px; font-weight:700; text-align:center;}

section.appointments.create > .appointment-list .appointment:not(.no-results){background:#f7f7f7; border-radius:10px;margin-left:16px;margin-bottom:16px;border:1px solid #000;padding:16px;}
section.appointments.create > .appointment-list .appointment:not(.no-results) .data p{text-align: center;}
section.appointments.create > .appointment-list .appointment:not(.no-results) .data p.date{font-weight: 700;}
section.appointments.create > .appointment-list .appointment:not(.no-results) button{ padding:12px 24px; border-radius: 32px; border:0; background: #000; color: #fff; box-shadow: none;}
section.appointments.create > .appointment-list .appointment:not(.no-results) button:hover{cursor: pointer;}

section.appointments .modal{position: fixed; top:0; left:0; bottom:0; right:0;background:rgba(255,255,255, .8); display: none; justify-content: center; align-items: center;z-index: -99;}
section.appointments .modal.open{display: flex;z-index:999;}
section.appointments .modal .container{background:#fff;border:1px solid #000;padding:32px; position: relative;}
section.appointments .modal .container .close{position: absolute; top:16px; right:16px;}
section.appointments .modal .container .close:hover{cursor: pointer;}
section.appointments .modal .container label{display: block;margin-top:8px;}
section.appointments .modal .container input{display: block; width:100%;padding:8px 12px;outline:0;}
section.appointments .modal .container button{ padding:8px 12px; border-radius: 16px; background: #000; color: #fff; box-shadow: none;margin-top:16px;}
section.appointments .modal .container button:hover{cursor: pointer;}

section.appointments.my-appointments{padding:32px 0;}
section.appointments.my-appointments .appointment-list .appointment{border:1px solid #000;margin-top:16px;padding:16px 32px;background:#f7f7f7;}
section.appointments.my-appointments .appointment-list .appointment .data{display: flex; align-items: center;justify-content: space-between;}
section.appointments.my-appointments .appointment-list .appointment .data button{ padding:8px 12px; border-radius: 16px; background: #000; color: #fff; box-shadow: none;}
section.appointments.my-appointments .appointment-list .appointment .data button:hover{cursor: pointer;}

section.appointments.list-all-filter{padding:32px 0;}
section.appointments.list-all-filter h1{text-align: center;}
section.appointments.list-all-filter > .dates{display: flex; align-items: center; justify-content: center;}
section.appointments.list-all-filter > .dates input.filterDate{padding:8px 12px;outline:0;}
section.appointments.list-all-filter .appointment-list{max-width:960px;margin:0 auto;}
section.appointments.list-all-filter .appointment-list .appointment{border:1px solid #000;margin-top:16px;padding:16px 32px;background:#f7f7f7;}
section.appointments.list-all-filter .appointment-list .appointment.past{opacity:.4;}
section.appointments.list-all-filter .appointment-list .appointment .data{display: flex; align-items: center;justify-content: space-between;}
section.appointments.list-all-filter .appointment-list .appointment p.no-results{font-size:24px; font-weight:700; text-align:center;}

section.appointments.list-all{padding:32px 0;}
section.appointments.list-all h1{text-align: center;}
section.appointments.list-all > .dates{display: flex; align-items: center; justify-content: center;}
section.appointments.list-all > .dates input.filterDate{padding:8px 12px;outline:0;}
section.appointments.list-all .appointment-list{max-width:960px;margin:0 auto;}
section.appointments.list-all .appointment-list .appointment{border:1px solid #000;margin-top:16px;padding:16px 32px;background:#f7f7f7;}
section.appointments.list-all .appointment-list .appointment.past{opacity:.4;}
section.appointments.list-all .appointment-list .appointment .data{display: flex; align-items: center;justify-content: space-between;}
section.appointments.list-all .appointment-list .appointment p.no-results{font-size:24px; font-weight:700; text-align:center;}