@charset "utf-8"
.doctor-calendar-frontend {max-width: 1200px;margin: 0 auto;padding: 20px;}
.calendar-nav > div.calendar-header {text-align: center;width: auto;min-width: initial;}
.doctor-calendar-frontend .calendar-header h2 {color: #ffffff;font-size: 150% !important;margin: 0 auto .2em!important;font-weight: 700;line-height: 1.8;}
.doctor-calendar-frontend .calendar-header h2:before {content: none !important;}
.calendar-table {width: 100%;table-layout: fixed;border-collapse: collapse;background: white;}
.calendar_dc_list { display:none;}
.calendar-table thead th {background: #f9cf7d;padding: 5px;text-align: center;font-weight: bold;font-size: 80%;border: 1px solid #cccccc;line-height: 1.2;}
.calendar-table tbody td {border: 1px solid #cccccc;padding: 0;vertical-align: top;position: relative;}

.calendar-table tbody td:first-child {border-left: #cccccc 1px solid;}
.calendar-table tbody td:last-child {border-right: #cccccc 1px solid;}

.calendar-table tbody td.closed {background: #f5f3ee;}
.calendar-table tbody td.empty {background: #f9f8f5;}
.day-number {padding: 0;font-weight: bold;font-size: 80%;background: #ffebc2;text-align: center;line-height: 1.4;}
.period-section {padding: 2px .1em;line-height: 1.2;}
.period-section.morning { border-bottom: 1px dashed #ddd; }
.period-label {font-size: 70%;color: #1f1f1f;padding-left: .5em;display: inline-block;}
.doctor-badge {display: block;color: #FFF;padding: 5px;margin: 3px;border-radius: 999px;font-size: 60%;text-align: center;text-decoration: none;transition: transform 0.2s, box-shadow 0.2s;}
.doctor-badge:hover { transform: translateY(-2px);color: #FFF; box-shadow: 0 4px 8px rgba(0,0,0,0.2); }
.doctor-badge:hover { transform: translateY(-2px);color: #FFF; box-shadow: 0 4px 8px rgba(0,0,0,0.2); }
.calendar-day .box {height:100%;min-height: 100%;}
.closed { text-align: center; padding: 30px 10px; color: #393838; font-weight: bold; }

.calendarflex {display: flex;gap: 15px;}
.calendar-nav {display:flex;width:100%;align-items:center;justify-content:space-between;margin-bottom: .3em;}
.calendar-nav .calendar-header {margin-bottom: 0px;margin: auto;}
.calendar-nav > * { min-width:3em;}
.calendar-nav > button {cursor: pointer;border:none;background: #ffffff;margin:0;padding: .2em 1em;color: #373532;border-radius: .5em;font-weight: 600;line-height: 1.8;}
.calendar-nav > div {width: 6em;}
button.nav-btn.next-month {
background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20width%3D%22512%22%20height%3D%22512%22%20x%3D%220%22%20y%3D%220%22%20viewBox%3D%220%200%2032%2032%22%20style%3D%22enable-background%3Anew%200%200%20512%20512%22%20xml%3Aspace%3D%22preserve%22%20class%3D%22%22%3E%3Cg%3E%3Cpath%20d%3D%22M26.17%2012.37%209%202.45A3.23%203.23%200%200%200%207.38%202%203.38%203.38%200%200%200%204%205.38v21.29a3.33%203.33%200%200%200%205.1%202.82l17.19-10.86a3.65%203.65%200%200%200-.12-6.26z%22%20data-name%3D%2201-Play%22%20fill%3D%22%23373532%22%20opacity%3D%221%22%20data-original%3D%22%23000000%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E')
no-repeat center right .5em #FFF;
background-size: .8em;padding-right: 2em;}

button.nav-btn.prev-month {padding-left: 2em;background: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20512%20512%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.st0%20%7B%20fill%3A%20%23373532%3B%20%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M93.3461252%2C314.06981l274.7200012%2C158.7199974c7.8529053%2C4.6460724%2C16.7958984%2C7.1302376%2C25.9199982%2C7.2000008%2C29.8675613%2C0%2C54.0800018-24.2124405%2C54.0800018-54.0800018h0V85.2697764c-.0056381-29.4257202-23.8644791-53.2754211-53.2902069-53.2697754-10.015007.0018921-19.8267059%2C2.8264771-28.3097992%2C8.1497803L91.4261118%2C213.909791c-27.3405762%2C17.1107178-35.6335449%2C53.1455994-18.5228271%2C80.4861755%2C5.0934753%2C8.1386719%2C12.1149597%2C14.8960114%2C20.4428406%2C19.6738281v.0000153Z%22%2F%3E%3C%2Fsvg%3E')
no-repeat center left .5em #FFF;background-size: .8em;}

@media (max-width: 900px) {
.calendarflex { flex-wrap:wrap;gap: 15px;}
}
@media (max-width: 768px) {
.calendar-table { font-size: 12px;}
.day-number { font-size: 14px; padding: 5px; }
.doctor-badge { font-size: 11px; padding: 3px 8px; display: block; margin: 2px 0; }
.period-label { font-size: 10px; }
.closed { padding: 15px 5px; font-size: 12px; }
}

@media (max-width: 768px) {
.calendar-nav {flex-direction: row;gap: 5px;}
.calendar-nav .calendar-header h2 {font-size: 150%;}
.doctor-badge {font-size:70%;}
.calendar_dc_list {display:block;background:#FFF;margin-top:.5em;padding:4%;border-radius:.5em;border: .4em solid #ffedc5;}
.calendar_dc_list ul {display:flex; flex-wrap:wrap; gap: 0 .2em;}
.calendar_dc_list ul li{ font-size:3.5vw;}
.calendar_dc_list ul li a,.calendar_dc_list ul li span{ color:#FFF; border-radius:.5em; padding:.2em .6em;}
}
@media (max-width:500px) {
.calendar-table thead th { padding: 5px; font-size: 4vw;}
.day-number { font-size: 4vw; padding:0; }
div.closed { text-align: center; padding: 0;font-size: 2.4vw;}
.period-section {line-height:1;display: flex;flex-wrap: wrap;}
.period-label {display:block;text-align: center;padding: 0;font-size: 2.4vw;width: 100%;}
.doctor-badge {display: inline-block;padding:0;font-size:0%;width: 46%;height:15px;border-radius: 3.5px;margin: 2px 2%;}
}