@charset "utf-8";

.admin-dashboard-section > .admin-content-header .square-btn {column-gap: var(--fs-20);}
.admin-dashboard-section > .admin-content-header .custom-toggle {width: fit-content;}

.admin-dashboard-section .admin-table th,
.admin-dashboard-section .admin-table td {height: 44px; font-size: var(--fs-15);}

.admin-booking-status {width: 100%; display: flex; justify-content: space-between; gap: 2px;}
.booking-status-item {flex: 1; transition:border-color .25s, box-shadow .25s; padding:var(--fs-20) var(--fs-10); display:flex; flex-direction:column; align-items:center; justify-content: space-between; row-gap: 4px; border:1px solid var(--grayscale3); border-radius:var(--fs-10); background:var(--color-white);}
.booking-status-item.today {background:var(--calendar-lightblue); border:1px solid var(--calendar-blue); margin:-1px;}
.booking-status-item.today .booking-status-bar {background-color: var(--color-white);}
.booking-status-head {width:100%; display:flex; justify-content:center; align-items:center; column-gap: 6px;}
.booking-status-head strong {font-size:var(--fs-16); line-height: 1.5; color:var(--grayscale11); flex-shrink: 0;}
.booking-status-head .label {padding: 4px 8px; font-size: 12px; font-weight: 600; flex-shrink: 0;}
.booking-status-head .blue {color:var(--calendar-blue);}
.booking-status-head .label.blue {border: 1px solid var(--calendar-blue-border); background-color: #EAF2FF;}
.booking-status-head .red {color:var(--calendar-red);}
.booking-status-percent {margin-top:6px; font-size:var(--fs-24); font-weight:500; line-height:1.5; color:var(--grayscale11);}
.booking-status-bar {margin: var(--fs-36) 0; width:14px; height:75px; display:flex; align-items:flex-end; border-radius:999px; background:var(--grayscale2);}
.booking-status-bar span {display:block; width:100%; height:0; border-radius:999px; background:var(--calendar-blue); opacity:.5;}
.booking-status-item.best .booking-status-bar span {opacity:1;}
.booking-status-info {display:flex; flex-direction:column; align-items:center; row-gap:6px;}
.booking-status-info p {font-size:var(--fs-16); font-weight: 400 !important; font-weight: 1.5; color:var(--grayscale6);}
.booking-status-info strong {font-size:var(--fs-16); font-weight: 400 !important; font-weight: 1.5; color:var(--grayscale10);}

/*****/
/*****/
/*****/
/*****/
/*****/
/*****/
/*****/
/*****/
/*****/
/*****/
/*****/
/*****/
/*****/