@charset "utf-8"
.doctor-calendar-frontend {max-width: 1200px;margin: 0 auto;padding: 20px;}
.calendar-header {text-align: center;margin-bottom: 20px;}
.doctor-calendar-frontend .calendar-header h2 {color: #ffffff;font-size: 200%;margin: 0;font-weight: 700;line-height: 1.8;}
.mainbox .doctor-calendar-frontend .calendar-header h2 {color: #144893; }
.calendar-table {width: 100%;table-layout: fixed;border-collapse: collapse;background: white;box-shadow: 0 4px 6px rgba(0,0,0,0.1);}
.mainbox .calendar-table {}
.calendar-table thead th {background: #144893;color: white;padding: 5px;text-align: center;font-weight: bold;font-size: 80%;border: 1px solid;line-height: 1.2;}
.mainbox .calendar-table thead th:first-child {border-left: #144893 1px solid;}
.mainbox .calendar-table thead th:last-child {border-right: #144893 1px solid;}
.calendar-table tbody td {border: 1px solid #144893;padding: 0;vertical-align: top;position: relative;}

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

.calendar-table tbody td.closed {background: #f5f5f5;}
.calendar-table tbody td.empty {background: #acb9c6;}
.day-number {padding: 0;font-weight: bold;font-size: 80%;background: #dae4ee;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); }
div.closed { text-align: center; padding: 30px 10px; color: #393838; font-weight: bold; }
.calendar-day .box {height:100%;min-height: 100%;}

.calendarflex {display: flex;gap: 15px;}
.calendar-nav {display:flex; width:100%; align-items:center; justify-content:space-between;}
.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: #134893;border-radius: .5em;font-weight: 600;line-height: 1.8;}
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%23134893%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%23134893%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;}


.mainbox .calendar-nav > button {background: #134893;color: #fff;}
.mainbox 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%23ffffff%22%20opacity%3D%221%22%20data-original%3D%22%23ffffff%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E')
no-repeat center right .5em #134893;
background-size: .8em;padding-right: 2em;}

.mainbox 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%23ffffff%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 #134893;background-size: .8em;}


@media (max-width: 900px) {
.calendarflex { flex-wrap:wrap;gap: 15px;}
}
@media (max-width: 768px) {
.calendar-table { font-size: 12px;background: none; }
.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-table thead {display: none;}
.calendar-table,
.calendar-table tbody,
.calendar-table tbody tr {display: block;width: 100%;box-shadow: none;}
.calendar-table tbody td {display: block;width: 100%;margin-bottom: 5px;background: #FFF;}
.calendar-table tbody td.closed {background: #d0d0d0;}
.calendar-table tbody td.empty {display: none;}
.day-number {font-size: 140%;font-weight: bold;width: 2em;-webkit-text-combine: horizontal;-ms-text-combine-horizontal: all;text-combine-upright: all;}
.day-number:after {content:"\65E5"}
.calendar-day .box {display:flex;}
.calendar-table tbody td.closed .day-number {background: #999;}
.calendar-table tbody td:first-child {border-left:1px solid #144893}
.calendar-table tbody td:last-child {border-right:1px solid #144893} 
div.closed {padding: 20px 10px;font-size: 120%;width: 100%;}
.period-section {padding: 10px;width: calc(50% - 1.5em);}
.period-section.morning {border-bottom:none;}
.period-section.afternoon {border-left:1px solid #144893;}
.period-label {font-size:100%;font-weight: bold;padding-left: 0;display: block;margin-bottom: 8px;color: #144893;text-align: center;}

.doctor-badge {font-size:100%;padding:5px 15px;margin: 5px 0;display: block;}
.calendar-nav {flex-direction: row;gap: 5px;}
.calendar-nav .calendar-header h2 {font-size: 150%;}
}

@media (max-width: 768px) {
.doctor-calendar-frontend {position: relative;}
.doctor-calendar-frontend.collapsed .calendar-table {max-height: 100vh;overflow: hidden;}
.doctor-calendar-frontend.collapsed::after {content: '';position: absolute;bottom: 0;left: 0;right: 0;height: 15em;background: linear-gradient(to bottom, transparent, #144893 80%);pointer-events: none;}
.mainbox .doctor-calendar-frontend.collapsed::after { background: linear-gradient(to bottom, transparent, #fff 80%);}
.expand-btn {position: relative;display: block;width: 100%;padding:.8em;margin-top: 1em;background: #ffffff;color: #154893;text-align:center;border: 4px solid #154893;border-radius:.5em;font-weight: 600;cursor: pointer;z-index: 2;}
.mainbox .expand-btn { background: #154893;color: #fff;}
.collapsed .expand-btn {margin-top: -1em;}
}
@media (min-width: 769px) {
.expand-btn {display: none;}
}