@charset "UTF-8";
[v-cloak] {
  display: none;
}
:root {
  --vz-primary: #60b7cc;
  --vz-primary-text-emphasis: #2d5a6b;
  --vz-topnav-item-active-color: #0a253c;
  --vz-topnav-item-color: #333;
}
.dp__theme_light {
  --dp-primary-color: #60b7cc !important;
  --dp-action-button-height: auto !important;
}
[data-layout=horizontal] .navbar-menu {
  padding: 0.25rem calc(1.5rem* .5) !important;
}
@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  10% {
    opacity: 0;
  }
}
@media (max-width: 767px) {
  .container-fluid {
    padding: 0;
  }
  .my-video-dimensions {
    max-width: 100vw;
    height: auto !important;
  }
  [data-layout=horizontal] .navbar-menu {
    display: block;
  }
  a.nav-link.menu-link {
    padding: 0.5rem !important;
  }
}
ul.navbar-nav {
  left: 14% !important;
  position: relative;
}
[data-layout=horizontal] .navbar-menu .navbar-nav > li:nth-of-type(2) > .nav-link.menu-link {
  padding-left: 1.5rem !important;
}
.nav-wrap {
  margin-left: 3rem;
}
.nav-wrap .menu-dropdown {
  display: block;
  position: relative;
  left: 1rem;
  box-shadow: unset;
  background-color: unset;
  background-clip: unset;
  border: 0;
  border-radius: unset;
}
.nav-wrap > li {
  margin-top: 0.5rem;
}
.nav-wrap a.nav-link:hover {
  text-decoration: underline;
}
a.btn-expand {
  position: absolute;
  top: 0;
  cursor: pointer;
}
body.login div#auth-particles {
  background-image: url("https://medical.mn1.net/assets/images/bg01.png") !important;
}
body.login h5.text-primary {
  color: #607777 !important;
  font-size: 1.2rem;
}
body.login .bg-overlay {
  background: #000 !important;
  opacity: 0.42 !important;
}
body.login p.mt-3.fs-22.fw-medium {
  display: none;
}
body.login .mt-sm-5 {
  margin-top: 7rem !important;
}
body .ext-group label.grid {
  margin-bottom: 0;
}
body .ext-group label.grid > div.grid-block {
  height: 10vh;
}
body .expand .ext-group label.grid > div.grid-block {
  height: 21vh;
}
body [class*="_pic-wrap"].col-12 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 0.25rem;
}
body .d-flex.ext-group {
  row-gap: 1rem;
}
body .main-content {
  display: grid;
  grid-template-columns: 12% 88%;
  min-height: 99vh;
}
body .main-content .left-menu {
  margin-top: 3.5rem !important;
  padding: 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
  width: 100%;
  background-color: #59666d;
}
body .main-content .left-menu .nav-wrap {
  color: #f5f5f3;
  list-style: none;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
body .main-content .left-menu .nav-wrap > li.nav-item > a {
  font-size: 1rem;
  font-weight: 500;
}
body .main-content .left-menu .nav-wrap .nav-item {
  margin-bottom: 0.5rem;
  color: #f5f5f3;
}
body .main-content .left-menu .nav-wrap .nav-item .nav-link {
  display: flex;
  align-items: center;
  padding: 0.8rem 1rem;
  color: #333;
  text-decoration: none;
  border-radius: 0.3rem;
  color: #d6d9d3;
}
body .main-content .left-menu .nav-wrap .nav-item .nav-link:hover {
  background-color: #e2e6ea;
  color: #273139;
}
body .main-content .left-menu .nav-wrap .nav-item .nav-link.active {
  background-color: #007bff;
  color: #ffffff;
}
body .main-content .left-menu .nav-wrap .nav-item .nav-link span {
  display: block;
}
body select.select-input {
  min-width: 4rem;
  border-color: lightgray;
  margin-left: 0.5rem;
}
body select#status {
  width: unset;
  height: unset;
  position: unset;
  left: unset;
  top: unset;
  margin: unset;
}
body span.field-process_step, body span.field-process_json {
  display: inline-flex;
  align-items: center;
  width: 100%;
}
body .process_step-wrap, body .process_json-wrap {
  align-items: center;
  display: inline-flex;
}
body ul.process-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 2%;
}
body ul.process-wrap li.process-step {
  display: flex;
  flex-direction: column;
  border: 2px dashed #666;
  border-radius: 4px;
  border-collapse: separate;
  width: 8rem;
}
body ul.process-wrap li.process-step.av {
  cursor: pointer;
}
body ul.process-wrap li.process-step.av:hover {
  background: #9f9;
}
body ul.process-wrap li.process-step.on {
  cursor: unset !Important;
}
body ul.process-wrap li.process-step.on:hover {
  background: unset !important;
}
body ul.process-wrap li.process-step.on i.mdi.mdi-fingerprint {
  color: #db3700;
}
body ul.process-wrap li.process-step span {
  text-align: center;
  padding-top: 0.3rem;
}
body ul.process-wrap li.process-step span.full-name, body ul.process-wrap li.process-step span.stamp {
  border-bottom: 1px dotted #333;
}
body ul.process-wrap li.process-step span.full-name, body ul.process-wrap li.process-step span.name {
  height: 2rem;
  align-items: center;
}
body ul.process-wrap li.process-step span.stamp {
  height: 6rem;
  font-size: 3.5rem;
}
body .modal-extra .contents {
  margin-top: 0.5rem;
  overflow-y: scroll;
  max-height: 75vh;
}
body .sel-range-tab {
  position: absolute;
  margin-top: 2.7rem;
  right: 0;
}
body .input-group.has-range {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
body .input-group.has-range .btn-light {
  background: #a2cdd6;
  color: #fff;
}
body:not(.login) [class*="label-wrap"] {
  background-color: #f0f0f0;
  border-radius: 4px;
  padding: 0.75rem 1rem;
  font-weight: 500;
  height: 100%;
}
body:not(.login) [class*="tmp-label-wrap"] {
  display: none;
}
body .app-menu.navbar-menu {
  margin-top: 0 !important;
  /*  background: #d9d8d1;*/
  background: linear-gradient(to bottom, rgba(217, 216, 209, 0.9), rgba(217, 216, 209, 0.1));
}
body .logo-txt {
  position: absolute;
  font-size: 2rem;
  cursor: pointer;
  left: 3.3%;
}
body .logo-txt b {
  display: inline-block;
  background: linear-gradient(45deg, #1a5e8c, #3a8ee0, #70b1e8, #a0d4ef, #ecf0f1, #70b1e8, #3a8ee0, #1a5e8c);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 800%;
  animation: gradient-animation 20s ease infinite;
}
@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  25% {
    background-position: 50% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  75% {
    background-position: 50% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
body div.main-content > div.page-content {
  padding: 0 !important;
  margin-top: 3.5rem !important;
}
[data-layout=horizontal] .navbar-menu {
  margin-top: 0 !important;
}
@media (min-width: 1024.1px) {
  [data-layout=horizontal] .container-fluid, [data-layout=horizontal] .layout-width {
    max-width: 70%;
    margin: 0 auto;
  }
}
.modal-footer.v-modal-footer {
  gap: 0.5rem;
}
.modal-footer.v-modal-footer a.btn.btn-link.link-success.fw-medium {
  background: slategray;
  color: #fff !important;
}
body .dp__menu_inner {
  min-height: 10rem;
}
@media (min-width: 1024.1px) {
  body #layout-wrapper .container-fluid, body #layout-wrapper .layout-width {
    max-width: 90%;
    margin: 0 auto;
  }
}
body #modal .ck.ck-content {
  height: 40vh;
}
body .field-wrap.row {
  min-height: 2rem;
}
body .separator {
  margin-top: 2rem;
}
body .footer {
  display: none;
}
body .search-panel {
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #edeeeb;
}
body .search-panel .search-wrap {
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.5rem;
}
body .search-panel .search-wrap .col-3 {
  display: flex;
  flex: 1 1 23%;
  align-items: center;
  margin-bottom: 1rem;
}
body .search-panel .search-wrap .col-3 .search-label {
  font-weight: bold;
  font-size: 1rem;
  color: #333;
}
body .search-panel .search-wrap .col-3 .search-box {
  flex: 1;
}
body .search-panel .search-wrap .col-3 .search-box input.form-control, body .search-panel .search-wrap .col-3 .search-box select.form-select {
  width: 100%;
  padding: 0.5rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}
body .search-panel .btn-wrap {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1rem;
}
body .search-panel .btn-wrap .btn {
  padding: 0.5rem 1rem;
  font-size: 1rem;
  color: #fff;
  background-color: #007bff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}
body .search-panel .btn-wrap .btn:hover {
  background-color: #0056b3;
}
body .search-panel .btn-wrap .btn.btn-primary:last-child {
  background-color: #6c757d;
}
body .search-panel .btn-wrap .btn.btn-primary:last-child:hover {
  background-color: #5a6268;
}
body .table.table-nowrap {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
  text-align: left;
}
body .table.table-nowrap thead {
  background-color: #f5f5f5;
  font-weight: bold;
}
body .table.table-nowrap thead th {
  padding: 0.75rem 1rem;
  border-bottom: 2px solid #ddd;
  position: relative;
}
body .table.table-nowrap thead th .sort-wrap {
  display: inline-flex;
  flex-direction: column;
  margin-left: 0.5rem;
  font-size: 0.8rem;
}
body .table.table-nowrap thead th .sort-wrap .ic-up, body .table.table-nowrap thead th .sort-wrap .ic-down {
  color: #ccc;
  cursor: pointer;
  transition: color 0.2s;
}
body .table.table-nowrap thead th .sort-wrap .ic-up:hover, body .table.table-nowrap thead th .sort-wrap .ic-down:hover {
  color: #555;
}
body .table.table-nowrap tbody tr {
  border-bottom: 1px solid #eee;
}
body .table.table-nowrap tbody tr:hover {
  background-color: #fafafa;
}
body .table.table-nowrap tbody tr td {
  padding: 0.75rem 1rem;
  white-space: nowrap;
}
body .table.table-nowrap tbody tr td.id, body .table.table-nowrap tbody tr td.age, body .table.table-nowrap tbody tr td.gender {
  text-align: center;
}
body .table.table-nowrap tbody tr td.status {
  font-weight: bold;
  color: #007bff;
}
body .table.table-nowrap tbody tr td.reception_btn, body .table.table-nowrap tbody tr td.op_btn {
  text-align: center;
}
body .table.table-nowrap tbody tr td.reception_btn a, body .table.table-nowrap tbody tr td.op_btn a {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  font-size: 0.9rem;
  color: #fff;
  background-color: #007bff;
  border-radius: 4px;
  text-decoration: none;
}
body .table.table-nowrap tbody tr td.reception_btn a:hover, body .table.table-nowrap tbody tr td.op_btn a:hover {
  background-color: #0056b3;
}
body .table.table-nowrap tbody tr td a {
  color: #007bff;
  text-decoration: none;
}
body .table.table-nowrap tbody tr td a:hover {
  text-decoration: underline;
}
body .table.table-nowrap colgroup col {
  width: auto;
}
body.index .group.pos-0 {
  gap: 1rem;
  display: flex;
  flex-wrap: wrap;
  padding-top: 3rem;
  margin: 0 auto;
  margin-bottom: 3rem;
}
body.index .item.intro {
  align-items: center;
  display: grid;
  grid-template-columns: 10rem 70% 20%;
}
body.index .item.intro .main-logo {
  margin-right: 20px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}
body.index .item.intro .welcome-msg {
  font-size: 1.65rem;
  color: #333;
  font-weight: 600;
  line-height: 1.5;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  background-image: linear-gradient(to right, #60b7cc, #82d0e9);
  -webkit-background-clip: text;
  color: transparent;
}
body.index .item.intro .reference-items {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  padding: 20px;
  background-color: #f0f0ec;
  border-radius: 8px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}
body.index .item.intro .reference-items .manual {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 15px 20px;
  text-decoration: none;
  color: #333;
  background-color: #f7f7f5;
  border-radius: 6px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  font-weight: 500;
  font-size: 1rem;
}
body.index .item.intro .reference-items .manual:hover {
  transform: translateY(-3px);
  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15);
  background-color: #e1e1db;
}
body.index .item.intro .reference-items .manual:active {
  transform: translateY(0);
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}
body.index .item.intro .reference-items .manual::before {
  content: url("download-icon.svg");
  margin-right: 10px;
  width: 20px;
  height: 20px;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}
body.index .item.intro .reference-items .manual:hover::before {
  opacity: 1;
}
body.reception ul.vital-sign {
  display: flex;
  margin-bottom: 0;
  gap: 1.2rem;
  flex-wrap: wrap;
}
body.reception ul.vital-sign li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
body.reception ul.vital-sign li input {
  max-width: 5rem;
  border: 1px solid #ced4da;
}
body.reception.new .header-title, body.preset .header-title, body.reservation.new .header-title, body.room.grid .header-title {
  text-align: center;
  padding: 0 3rem;
  color: #000;
  font-weight: 600;
  font-size: 2rem;
  margin-bottom: 0;
  letter-spacing: 0.3rem;
  position: relative;
  top: 0.6rem;
}
body.reception.new .autocomplete, body.preset .autocomplete, body.reservation.new .autocomplete, body.room.grid .autocomplete {
  position: relative;
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  z-index: 99;
}
body.reception.new .autocomplete input, body.preset .autocomplete input, body.reservation.new .autocomplete input, body.room.grid .autocomplete input {
  width: 100%;
  padding: 0.5rem;
}
body.reception.new .autocomplete ul, body.preset .autocomplete ul, body.reservation.new .autocomplete ul, body.room.grid .autocomplete ul {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 550px;
  overflow-y: auto;
  border: 1px solid #ccc;
  background-color: #fff;
  list-style: none;
  margin: 0;
  padding: 0;
}
body.reception.new .autocomplete ul.tx-list li, body.preset .autocomplete ul.tx-list li, body.reservation.new .autocomplete ul.tx-list li, body.room.grid .autocomplete ul.tx-list li {
  max-height: 450px;
  display: grid;
  grid-template-columns: 20% 80%;
}
body.reception.new .autocomplete ul li, body.preset .autocomplete ul li, body.reservation.new .autocomplete ul li, body.room.grid .autocomplete ul li {
  padding: 0.5rem;
  cursor: pointer;
}
body.reception.new .autocomplete ul li:hover, body.preset .autocomplete ul li:hover, body.reservation.new .autocomplete ul li:hover, body.room.grid .autocomplete ul li:hover {
  background-color: #f0f0f0;
}
body.reception.new .field-chart_info .label, body.reception.new .field-tx_info .label, body.preset .field-chart_info .label, body.preset .field-tx_info .label, body.reservation.new .field-chart_info .label, body.reservation.new .field-tx_info .label, body.room.grid .field-chart_info .label, body.room.grid .field-tx_info .label {
  align-items: center;
  display: flex;
  gap: 0.25rem;
}
body.reception.new .field-chart_info .dx, body.reception.new .field-tx_info .dx, body.preset .field-chart_info .dx, body.preset .field-tx_info .dx, body.reservation.new .field-chart_info .dx, body.reservation.new .field-tx_info .dx, body.room.grid .field-chart_info .dx, body.room.grid .field-tx_info .dx {
  display: flex;
  gap: 1rem;
}
body.reception.new .field-chart_info .tx, body.reception.new .field-tx_info .tx, body.preset .field-chart_info .tx, body.preset .field-tx_info .tx, body.reservation.new .field-chart_info .tx, body.reservation.new .field-tx_info .tx, body.room.grid .field-chart_info .tx, body.room.grid .field-tx_info .tx {
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
  gap: 1rem;
}
body.reception.new .field-chart_info .tx select.form-select, body.reception.new .field-tx_info .tx select.form-select, body.preset .field-chart_info .tx select.form-select, body.preset .field-tx_info .tx select.form-select, body.reservation.new .field-chart_info .tx select.form-select, body.reservation.new .field-tx_info .tx select.form-select, body.room.grid .field-chart_info .tx select.form-select, body.room.grid .field-tx_info .tx select.form-select {
  width: 10rem;
}
body.reception.new .field-chart_info .tx .tx-info-wrap, body.reception.new .field-tx_info .tx .tx-info-wrap, body.preset .field-chart_info .tx .tx-info-wrap, body.preset .field-tx_info .tx .tx-info-wrap, body.reservation.new .field-chart_info .tx .tx-info-wrap, body.reservation.new .field-tx_info .tx .tx-info-wrap, body.room.grid .field-chart_info .tx .tx-info-wrap, body.room.grid .field-tx_info .tx .tx-info-wrap {
  width: calc(100% - 7rem);
}
body.reception.new .field-chart_info .tx .tx-info-wrap select, body.reception.new .field-tx_info .tx .tx-info-wrap select, body.preset .field-chart_info .tx .tx-info-wrap select, body.preset .field-tx_info .tx .tx-info-wrap select, body.reservation.new .field-chart_info .tx .tx-info-wrap select, body.reservation.new .field-tx_info .tx .tx-info-wrap select, body.room.grid .field-chart_info .tx .tx-info-wrap select, body.room.grid .field-tx_info .tx .tx-info-wrap select {
  max-height: 2.7rem;
}
body.reception.new .field-chart_info .tx .tx-wrap, body.reception.new .field-tx_info .tx .tx-wrap, body.preset .field-chart_info .tx .tx-wrap, body.preset .field-tx_info .tx .tx-wrap, body.reservation.new .field-chart_info .tx .tx-wrap, body.reservation.new .field-tx_info .tx .tx-wrap, body.room.grid .field-chart_info .tx .tx-wrap, body.room.grid .field-tx_info .tx .tx-wrap {
  width: 100%;
}
body.reception.new .field-chart_info .tx-info-wrap, body.reception.new .field-tx_info .tx-info-wrap, body.preset .field-chart_info .tx-info-wrap, body.preset .field-tx_info .tx-info-wrap, body.reservation.new .field-chart_info .tx-info-wrap, body.reservation.new .field-tx_info .tx-info-wrap, body.room.grid .field-chart_info .tx-info-wrap, body.room.grid .field-tx_info .tx-info-wrap {
  display: flex;
  gap: 0.5rem;
}
body.reception.new .field-chart_info .choice-wrap, body.reception.new .field-tx_info .choice-wrap, body.preset .field-chart_info .choice-wrap, body.preset .field-tx_info .choice-wrap, body.reservation.new .field-chart_info .choice-wrap, body.reservation.new .field-tx_info .choice-wrap, body.room.grid .field-chart_info .choice-wrap, body.room.grid .field-tx_info .choice-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}
body.reception.new .field-chart_info .choice-wrap span.badge, body.reception.new .field-tx_info .choice-wrap span.badge, body.preset .field-chart_info .choice-wrap span.badge, body.preset .field-tx_info .choice-wrap span.badge, body.reservation.new .field-chart_info .choice-wrap span.badge, body.reservation.new .field-tx_info .choice-wrap span.badge, body.room.grid .field-chart_info .choice-wrap span.badge, body.room.grid .field-tx_info .choice-wrap span.badge {
  padding: 0.5rem;
  font-size: 1em;
}
body.reception.new .field-chart_info .choice-wrap span.badge i.mdi.mdi-close, body.reception.new .field-tx_info .choice-wrap span.badge i.mdi.mdi-close, body.preset .field-chart_info .choice-wrap span.badge i.mdi.mdi-close, body.preset .field-tx_info .choice-wrap span.badge i.mdi.mdi-close, body.reservation.new .field-chart_info .choice-wrap span.badge i.mdi.mdi-close, body.reservation.new .field-tx_info .choice-wrap span.badge i.mdi.mdi-close, body.room.grid .field-chart_info .choice-wrap span.badge i.mdi.mdi-close, body.room.grid .field-tx_info .choice-wrap span.badge i.mdi.mdi-close {
  margin-left: 0.75rem;
  cursor: pointer;
}
body.reception.new .field-chart_info > div > *:first-child, body.reception.new .field-tx_info > div > *:first-child, body.preset .field-chart_info > div > *:first-child, body.preset .field-tx_info > div > *:first-child, body.reservation.new .field-chart_info > div > *:first-child, body.reservation.new .field-tx_info > div > *:first-child, body.room.grid .field-chart_info > div > *:first-child, body.room.grid .field-tx_info > div > *:first-child {
  background-color: #f0f0f0;
  border-radius: 4px;
  padding: 1rem;
}
body.reception.new ul.more-wrap, body.preset ul.more-wrap, body.reservation.new ul.more-wrap, body.room.grid ul.more-wrap {
  display: grid;
  grid-template-columns: 30% 68%;
  row-gap: 0.5rem;
  margin-top: 1rem;
  column-gap: 2%;
}
body.reception.new ul.more-wrap li.opt, body.preset ul.more-wrap li.opt, body.reservation.new ul.more-wrap li.opt, body.room.grid ul.more-wrap li.opt {
  width: 100%;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  padding: 0.5rem 1.5rem;
  background-color: #f8f8f8;
  border-radius: 4px;
}
body.reception.new ul.more-wrap li.opt span.tit, body.preset ul.more-wrap li.opt span.tit, body.reservation.new ul.more-wrap li.opt span.tit, body.room.grid ul.more-wrap li.opt span.tit {
  min-width: 3.3rem;
}
body.reception.new ul.more-wrap li.opt input, body.preset ul.more-wrap li.opt input, body.reservation.new ul.more-wrap li.opt input, body.room.grid ul.more-wrap li.opt input {
  width: 3rem;
  padding: 0.25rem;
  font-size: 14px;
  text-align: center;
  background-color: #fff;
}
body.reception.new ul.more-wrap li.opt input.price, body.preset ul.more-wrap li.opt input.price, body.reservation.new ul.more-wrap li.opt input.price, body.room.grid ul.more-wrap li.opt input.price {
  width: 10rem;
}
body.reception.new ul.more-wrap li.opt select, body.preset ul.more-wrap li.opt select, body.reservation.new ul.more-wrap li.opt select, body.room.grid ul.more-wrap li.opt select {
  width: 10rem;
  padding: 0.25rem;
  font-size: 14px;
  background-color: #fff;
}
body.reception.new ul.more-wrap li.opt select.daily, body.preset ul.more-wrap li.opt select.daily, body.reservation.new ul.more-wrap li.opt select.daily, body.room.grid ul.more-wrap li.opt select.daily {
  width: 6rem;
}
body.reception.new ul.more-wrap li.choice, body.preset ul.more-wrap li.choice, body.reservation.new ul.more-wrap li.choice, body.room.grid ul.more-wrap li.choice {
  align-items: center;
  display: inline-flex;
  font-size: 18px;
  font-weight: bold;
  color: #333;
  padding: 1rem;
  background-color: #f0f0f0;
  border-radius: 4px;
}
body.reception.new ul.more-wrap span.tit.exp, body.preset ul.more-wrap span.tit.exp, body.reservation.new ul.more-wrap span.tit.exp, body.room.grid ul.more-wrap span.tit.exp {
  width: 13rem;
  display: flex;
  justify-content: space-between;
  font-weight: bold;
  color: #333;
}
body.reception.new ul.more-wrap span.tit.ev, body.preset ul.more-wrap span.tit.ev, body.reservation.new ul.more-wrap span.tit.ev, body.room.grid ul.more-wrap span.tit.ev {
  width: 20rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  color: #333;
}
body.reception.new ul.more-wrap .currency, body.reception.new ul.more-wrap .number, body.preset ul.more-wrap .currency, body.preset ul.more-wrap .number, body.reservation.new ul.more-wrap .currency, body.reservation.new ul.more-wrap .number, body.room.grid ul.more-wrap .currency, body.room.grid ul.more-wrap .number {
  font-size: 14px;
  color: #666;
}
body.reception.new .tx-more, body.preset .tx-more, body.reservation.new .tx-more, body.room.grid .tx-more {
  margin-top: 1rem;
}
body.reception.new #group_1 .field-tx_info .tx-info-wrap, body.preset #group_1 .field-tx_info .tx-info-wrap, body.reservation.new #group_1 .field-tx_info .tx-info-wrap, body.room.grid #group_1 .field-tx_info .tx-info-wrap {
  width: 100%;
}
body.preset.list .tx-info-wrap {
  width: 100% !important;
}
body.preset.list .edit-btn-wrap .btn-add {
  display: none;
}
body.reception.new.maxmode .left-menu, body.reservation.new.maxmode .left-menu, body.preset.add.maxmode .left-menu {
  visibility: hidden;
}
body.reception.new.maxmode .navbar-menu, body.reservation.new.maxmode .navbar-menu, body.preset.add.maxmode .navbar-menu {
  display: none;
}
body.reception.new.maxmode .header-title, body.reservation.new.maxmode .header-title, body.preset.add.maxmode .header-title {
  left: -3rem;
}
body.reception.new.maxmode .container-wrap, body.reservation.new.maxmode .container-wrap, body.preset.add.maxmode .container-wrap {
  z-index: 999;
  position: absolute;
  left: 0;
  top: 10rem;
  height: calc(100vh-10rem);
  width: 100vw;
  background: #fff;
}
body.reception.new .container, body.reservation.new .container, body.preset.add .container {
  padding: 1.5% 3% 2% 3%;
  background-color: #fdfdfd;
  border: 0.1rem solid #dddddd;
  border-radius: 0.4rem;
  box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.04);
}
body.reception.new .field-wrap, body.reservation.new .field-wrap, body.preset.add .field-wrap {
  padding: 1.5% 0;
  border-bottom: 0.1rem solid #e6e6e6;
  display: flex;
  align-items: center;
}
body.reception.new .field-wrap .label, body.reservation.new .field-wrap .label, body.preset.add .field-wrap .label {
  color: #555;
  font-size: 95%;
  font-weight: 500;
  flex-shrink: 0;
}
body.reception.new .field-wrap input[type="text"], body.reception.new .field-wrap input[type="email"], body.reception.new .field-wrap input[type="password"], body.reception.new .field-wrap select, body.reception.new .field-wrap textarea, body.reservation.new .field-wrap input[type="text"], body.reservation.new .field-wrap input[type="email"], body.reservation.new .field-wrap input[type="password"], body.reservation.new .field-wrap select, body.reservation.new .field-wrap textarea, body.preset.add .field-wrap input[type="text"], body.preset.add .field-wrap input[type="email"], body.preset.add .field-wrap input[type="password"], body.preset.add .field-wrap select, body.preset.add .field-wrap textarea {
  border: 0.1rem solid #cccccc;
  border-radius: 0.3rem;
  font-size: 100%;
  color: #333;
  background-color: #ffffff;
  padding: 1%;
  box-shadow: inset 0 0.05rem 0.1rem rgba(0, 0, 0, 0.02);
  flex-grow: 1;
}
body.reception.new .field-wrap input:focus, body.reception.new .field-wrap select:focus, body.reception.new .field-wrap textarea:focus, body.reservation.new .field-wrap input:focus, body.reservation.new .field-wrap select:focus, body.reservation.new .field-wrap textarea:focus, body.preset.add .field-wrap input:focus, body.preset.add .field-wrap select:focus, body.preset.add .field-wrap textarea:focus {
  border-color: #b3b3b3;
  box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.05);
}
body.reception.new .ext-group, body.reservation.new .ext-group, body.preset.add .ext-group {
  display: flex;
  gap: 4%;
  flex-wrap: wrap;
}
body.reception.new .ext-group .field-wrap, body.reservation.new .ext-group .field-wrap, body.preset.add .ext-group .field-wrap {
  flex: 1 1 auto;
}
body.reception.new .radio-wrap, body.reservation.new .radio-wrap, body.preset.add .radio-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
body.reception.new .radio-wrap .opt-wrap label, body.reservation.new .radio-wrap .opt-wrap label, body.preset.add .radio-wrap .opt-wrap label {
  padding-left: 1rem;
}
body.reception.new .btn-overlay, body.reservation.new .btn-overlay, body.preset.add .btn-overlay {
  position: absolute;
  right: 0;
}
body.reception.account button.btn.btn-primary.btn-add {
  display: none;
}
body.reception.patients .modal-footer div {
  display: flex;
  gap: 0.5rem;
}
body.reception.patients .has_parent-wrap.col-8 {
  padding-left: 2rem;
}
.op-list-wrap {
  width: 100%;
  padding: 1rem;
  background-color: #f9f9f9;
  border-radius: 4px;
  overflow-y: auto;
}
.op-list-wrap ul.op {
  list-style: none;
  margin: 0;
  padding: 0;
}
.op-list-wrap ul.op li {
  display: grid;
  grid-template-columns: 30% 32% 6% 32%;
  grid-template-areas: "chart_id start_time sp end_time" "memo memo memo memo";
  align-items: center;
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid #e0e0e0;
}
.op-list-wrap ul.op li:last-child {
  border-bottom: none;
}
.op-list-wrap ul.op li span {
  font-size: 0.875rem;
  color: #333;
}
.op-list-wrap ul.op li .chart_id {
  grid-area: chart_id;
  font-weight: bold;
  color: #1a73e8;
}
.op-list-wrap ul.op li .sp {
  grid-area: sp;
}
.op-list-wrap ul.op li .start_time {
  grid-area: start_time;
  color: #5f6368;
}
.op-list-wrap ul.op li .end_time {
  grid-area: end_time;
  color: #5f6368;
}
.op-list-wrap ul.op li .memo {
  grid-area: memo;
  font-style: italic;
  color: #757575;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 0.5rem;
}
body.room.grid .field-chart_list, body.reception.patients .field-chart_list {
  display: grid;
  grid-template-columns: 35% 60%;
  gap: 5%;
}
body.room.grid .field-chart_list .list-wrap, body.reception.patients .field-chart_list .list-wrap {
  height: 65vh;
  background-color: #f5f5f5;
  overflow-y: auto;
  padding: 20px;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
}
body.room.grid .field-chart_list .list-wrap .chart_id, body.room.grid .field-chart_list .list-wrap .start_time, body.room.grid .field-chart_list .list-wrap .ds_name, body.room.grid .field-chart_list .list-wrap .ds_reason, body.reception.patients .field-chart_list .list-wrap .chart_id, body.reception.patients .field-chart_list .list-wrap .start_time, body.reception.patients .field-chart_list .list-wrap .ds_name, body.reception.patients .field-chart_list .list-wrap .ds_reason {
  display: block;
  font-size: 0.9em;
  color: #333;
}
body.room.grid .field-chart_list .list-wrap .chart_id, body.reception.patients .field-chart_list .list-wrap .chart_id {
  font-weight: bold;
  color: #007bff;
}
body.room.grid .field-chart_list .list-wrap ul.visit, body.reception.patients .field-chart_list .list-wrap ul.visit {
  list-style: none;
  padding: 0;
  margin: 0;
}
body.room.grid .field-chart_list .list-wrap ul.visit li, body.reception.patients .field-chart_list .list-wrap ul.visit li {
  background: #ffffff;
  border: 1px solid #ddd;
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s ease;
}
body.room.grid .field-chart_list .list-wrap ul.visit li:hover, body.reception.patients .field-chart_list .list-wrap ul.visit li:hover {
  background: #e8f4ff;
}
body.room.grid .field-chart_list .detail-wrap, body.reception.patients .field-chart_list .detail-wrap {
  background-color: #ffffff;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
body.room.grid .field-chart_list .detail-wrap .summary, body.reception.patients .field-chart_list .detail-wrap .summary {
  margin-bottom: 1rem;
  padding: 10px 15px;
  background: #f9f9f9;
  border: 1px solid #ddd;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}
body.room.grid .field-chart_list .detail-wrap .summary.part-1, body.reception.patients .field-chart_list .detail-wrap .summary.part-1 {
  margin-bottom: 0;
}
body.room.grid .field-chart_list .detail-wrap .summary.part-2, body.reception.patients .field-chart_list .detail-wrap .summary.part-2 {
  border-top: 0;
}
body.room.grid .field-chart_list .detail-wrap .summary:first-of-type, body.reception.patients .field-chart_list .detail-wrap .summary:first-of-type {
  border-radius: 8px 8px 0 0;
}
body.room.grid .field-chart_list .detail-wrap .summary:last-of-type, body.reception.patients .field-chart_list .detail-wrap .summary:last-of-type {
  border-radius: 0 0 8px 8px;
}
body.room.grid .field-chart_list .detail-wrap .summary span.ind, body.reception.patients .field-chart_list .detail-wrap .summary span.ind {
  position: absolute;
  right: 2rem;
  width: 4rem;
  margin-top: -0.5rem;
  text-align: center;
  font-size: 0.85em;
  color: lightslategray;
}
body.room.grid .field-chart_list .detail-wrap .summary .dur, body.room.grid .field-chart_list .detail-wrap .summary .doc, body.reception.patients .field-chart_list .detail-wrap .summary .dur, body.reception.patients .field-chart_list .detail-wrap .summary .doc {
  color: #555;
  margin-bottom: 3px;
}
body.room.grid .field-chart_list .detail-wrap .summary .vital, body.room.grid .field-chart_list .detail-wrap .summary .ds-info, body.reception.patients .field-chart_list .detail-wrap .summary .vital, body.reception.patients .field-chart_list .detail-wrap .summary .ds-info {
  padding-top: 8px;
  border-top: 1px solid #eaeaea;
  display: flex;
  gap: 1rem;
}
body.room.grid .field-chart_list .detail-wrap .summary .vital .label, body.room.grid .field-chart_list .detail-wrap .summary .ds-info .label, body.reception.patients .field-chart_list .detail-wrap .summary .vital .label, body.reception.patients .field-chart_list .detail-wrap .summary .ds-info .label {
  font-weight: bold;
  font-size: 0.9em;
  color: #333;
  margin-bottom: 5px;
  display: block;
}
body.room.grid .field-chart_list .detail-wrap .summary .vital ul, body.room.grid .field-chart_list .detail-wrap .summary .ds-info ul, body.reception.patients .field-chart_list .detail-wrap .summary .vital ul, body.reception.patients .field-chart_list .detail-wrap .summary .ds-info ul {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin-top: 5px;
  list-style: none;
  padding: 0;
}
body.room.grid .field-chart_list .detail-wrap .summary .vital ul .name, body.room.grid .field-chart_list .detail-wrap .summary .ds-info ul .name, body.reception.patients .field-chart_list .detail-wrap .summary .vital ul .name, body.reception.patients .field-chart_list .detail-wrap .summary .ds-info ul .name {
  font-weight: bold;
  color: #666;
  font-size: 0.8em;
}
body.room.grid .field-chart_list .detail-wrap .summary .vital ul .val, body.room.grid .field-chart_list .detail-wrap .summary .ds-info ul .val, body.reception.patients .field-chart_list .detail-wrap .summary .vital ul .val, body.reception.patients .field-chart_list .detail-wrap .summary .ds-info ul .val {
  color: #333;
  font-size: 0.8em;
}
body.room.grid .field-chart_list .detail-wrap .summary .ds-info .code, body.reception.patients .field-chart_list .detail-wrap .summary .ds-info .code {
  font-weight: bold;
  font-size: 0.9em;
  color: #007bff;
}
body.room.grid .field-chart_list .detail-wrap .summary .ds-info .name, body.reception.patients .field-chart_list .detail-wrap .summary .ds-info .name {
  color: #333;
  font-size: 0.9em;
}
body.room.grid .field-chart_list .detail-wrap .tx-item, body.reception.patients .field-chart_list .detail-wrap .tx-item {
  list-style: none;
  padding: 0;
  margin: 0;
}
body.room.grid .field-chart_list .detail-wrap .tx-item li, body.reception.patients .field-chart_list .detail-wrap .tx-item li {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  padding: 8px;
  background: #f4f8ff;
  border: 1px solid #e0eaff;
  border-radius: 6px;
}
body.room.grid .field-chart_list .detail-wrap .tx-item li .badge, body.reception.patients .field-chart_list .detail-wrap .tx-item li .badge {
  display: inline-block;
  padding: 4px 8px;
  background-color: #17a2b8;
  color: #ffffff;
  font-size: 0.85em;
  font-weight: bold;
  border-radius: 4px;
  margin-right: 10px;
}
body.room.grid .field-chart_list .detail-wrap .tx-item li .name, body.reception.patients .field-chart_list .detail-wrap .tx-item li .name {
  font-weight: bold;
  color: #333;
  margin-right: 8px;
}
body.room.grid .field-chart_list .detail-wrap .tx-item li .desc, body.reception.patients .field-chart_list .detail-wrap .tx-item li .desc {
  color: #666;
  font-size: 0.85em;
  position: absolute;
  right: 2rem;
}
body.room.grid .p-top.pagination-wrap {
  display: none;
}
body.room.grid .has_parent-wrap.col-8 {
  padding-left: 2rem;
}
body.room.grid #modal form.status-empty ul.nav > li:not(:first-child) {
  display: none;
}
body.room.grid .set-selector {
  position: absolute;
  margin-top: 3.2rem;
  margin-left: 1.8rem;
  color: #999;
}
body.room.grid .set-selector .form-check {
  margin-left: 5.2rem;
  margin-top: -1.6rem;
}
body.room.grid .set-selector .form-check-input[type=checkbox] {
  border: 1px solid #dde;
}
body.room.grid .btn-grid {
  padding: 0.6em 1.2em;
  font-size: 100%;
  font-weight: 500;
  color: #333;
  background-color: #f5f5f5;
  border: 0.1rem solid #cccccc;
  border-radius: 0.3rem;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  margin-right: 0.5rem;
}
body.room.grid .btn-grid:hover {
  background-color: #e9e9e9;
  border-color: #bbbbbb;
}
body.room.grid .btn-grid:focus {
  outline: none;
  box-shadow: 0 0 0.3rem rgba(0, 123, 255, 0.25);
}
body.room.grid .btn-grid.active {
  background-color: #007bff;
  color: #ffffff;
  border-color: #007bff;
}
body.room.grid .btn-grid.active:hover {
  background-color: #0069d9;
  border-color: #0062cc;
}
body.room.grid > li.room_name, body.room.grid > li.name {
  font-size: 1rem;
  margin-bottom: 1rem;
}
body.room.grid div.items {
  gap: 2%;
  padding: 2%;
}
body.room.grid div.items .grid {
  border: 1% solid #ddd;
  border-radius: 2%;
  background-color: #f9f9f9;
  padding: 4%;
  box-shadow: 0 2% 4% rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
  list-style: none;
}
body.room.grid div.items .grid:hover {
  transform: translateY(-2%);
  box-shadow: 0 4% 8% rgba(0, 0, 0, 0.15);
}
body.room.grid div.items .grid.status-empty {
  background-color: #eef6f7;
}
body.room.grid div.items .grid.status-prepare {
  background-color: #fffae6;
}
body.room.grid div.items .grid.status-work {
  background-color: #d9edf7;
}
body.room.grid div.items .grid li {
  margin-bottom: 3%;
  font-size: 90%;
  color: #333;
  font-weight: 400;
}
body.room.grid div.items .grid .room_name, body.room.grid div.items .grid .name {
  font-size: 110%;
  font-weight: 700;
}
body.room.grid div.items .grid .room_name a, body.room.grid div.items .grid .name a {
  text-decoration: none;
  color: #333;
}
body.room.grid div.items .grid .room_name a:hover, body.room.grid div.items .grid .name a:hover {
  color: #0056b3;
}
body.room.grid div.items .grid .status {
  font-weight: 600;
  color: #888;
}
body.room.grid div.items .grid .staff_id, body.room.grid div.items .grid .room_desc, body.room.grid div.items .grid .pt_id, body.room.grid div.items .grid .pt_names {
  color: #555;
}
body.room.grid div.items .grid .pt_id span, body.room.grid div.items .grid .pt_names span {
  font-weight: 600;
}
body.room.grid .view-col-2 div.items {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
body.room.grid .view-col-3 div.items {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
body.room.grid .view-col-4 div.items {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
body.room.grid ul.grid.status-work .status {
  color: tomato;
}
body.room.grid ul.grid.status-empty .status {
  color: deepskyblue;
}
body.room.grid ul.grid.status-prepare .status {
  color: forestgreen;
}
body.room.grid .chart_info-wrap {
  height: 65vh;
}
body.room.grid .chart_info-wrap span.label {
  min-width: 10rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: #345;
}
body.room.grid .chart_info-wrap .tx span.label {
  height: 5rem;
}
body.room.grid .chart_info-wrap .total-amount-wrap {
  position: absolute;
  right: 2rem;
}
body.room.grid .chart_list-wrap {
  height: 65vh;
}
body.room.grid .examination {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
  gap: 1rem;
}
body.room.grid .examination span.label {
  flex: 1;
}
body.room.grid .examination textarea.form-control {
  width: calc(100% - 7rem);
}
body.room.grid .ds-info-wrap {
  display: flex;
  gap: 1rem;
}
body.room.grid .ds-info-wrap .ds-info {
  align-items: center;
  display: inline-flex;
  gap: 0.5rem;
}
body.room.grid .modal-footer .btn.btn-danger {
  display: none;
}
body.room.grid .modal-footer button.btn.btn-info {
  display: none;
}
body.room.grid .modal-footer.group_2 button.btn.btn-primary {
  display: none;
}
body.room.grid .modal-footer.group_2 button.btn.btn-info {
  display: block;
}
body.room.grid .modal-footer.v-modal-footer > div {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}
body.room.queue .modal-footer.group_2 .btn-danger, body.op.queue .modal-footer.group_2 .btn-danger {
  display: none;
}
body.room.queue .modal-footer > div, body.op.queue .modal-footer > div {
  display: flex;
  gap: 0.5rem;
}
body.room.queue .rcv_info-wrap, body.op.queue .rcv_info-wrap {
  display: flex;
  flex-direction: column;
  padding: 0;
}
body.room.queue .rcv_info-wrap .text-wrap, body.op.queue .rcv_info-wrap .text-wrap {
  background: #f8f9fa;
  padding: 1rem;
  border-radius: 5px;
}
body.room.queue .rcv_info-wrap .field-rcv_info, body.op.queue .rcv_info-wrap .field-rcv_info {
  min-height: 30vh;
}
body.room.queue .rcv_info-wrap .field-rcv_info .rcv-wrap .row, body.op.queue .rcv_info-wrap .field-rcv_info .rcv-wrap .row {
  margin-bottom: 1rem;
}
body.room.queue .rcv_info-wrap .field-rcv_info .rcv-wrap .row > div, body.op.queue .rcv_info-wrap .field-rcv_info .rcv-wrap .row > div {
  display: flex;
  align-items: center;
}
body.room.queue .rcv_info-wrap .field-rcv_info .rcv-wrap .row > div .field-wrap, body.op.queue .rcv_info-wrap .field-rcv_info .rcv-wrap .row > div .field-wrap {
  min-width: 7.5rem;
  font-weight: bold;
  color: #333;
  margin-right: 1rem;
}
body.room.queue .rcv_info-wrap .field-rcv_info .rcv-wrap .row > div .value, body.op.queue .rcv_info-wrap .field-rcv_info .rcv-wrap .row > div .value {
  flex: 1;
  display: flex;
  align-items: center;
  width: 100%;
}
body.room.queue .rcv_info-wrap .field-rcv_info .rcv-wrap .row > div .value.em, body.op.queue .rcv_info-wrap .field-rcv_info .rcv-wrap .row > div .value.em {
  font-size: 1rem;
  font-weight: 600;
  text-decoration: underline;
  color: #4880d2;
}
body.room.queue .rcv_info-wrap .field-rcv_info .rcv-wrap .row > div .value select.form-control, body.room.queue .rcv_info-wrap .field-rcv_info .rcv-wrap .row > div .value input.form-control, body.op.queue .rcv_info-wrap .field-rcv_info .rcv-wrap .row > div .value select.form-control, body.op.queue .rcv_info-wrap .field-rcv_info .rcv-wrap .row > div .value input.form-control {
  width: 100%;
  max-width: 12rem;
  padding: 0.5rem;
  font-size: 1rem;
  border-radius: 4px;
  border: 1px solid #ccc;
}
body.room.queue .rcv_info-wrap .field-rcv_info .rcv-wrap .product-items, body.op.queue .rcv_info-wrap .field-rcv_info .rcv-wrap .product-items {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}
body.room.queue .rcv_info-wrap .field-rcv_info .rcv-wrap .product-items .product-item, body.op.queue .rcv_info-wrap .field-rcv_info .rcv-wrap .product-items .product-item {
  display: grid;
  padding: 0.5rem 0;
  border-bottom: 1px solid #e5e5e5;
  grid-template-columns: 10% 10% 20% 25% 20% 15%;
}
body.room.queue .rcv_info-wrap .field-rcv_info .rcv-wrap .product-items .product-item span, body.op.queue .rcv_info-wrap .field-rcv_info .rcv-wrap .product-items .product-item span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
body.room.queue .rcv_info-wrap .field-rcv_info .rcv-wrap .product-items .product-item input, body.op.queue .rcv_info-wrap .field-rcv_info .rcv-wrap .product-items .product-item input {
  width: calc(100% - 5rem);
}
body.room.queue .rcv_info-wrap .field-rcv_info .rcv-wrap .product-items .product-item.w, body.op.queue .rcv_info-wrap .field-rcv_info .rcv-wrap .product-items .product-item.w {
  grid-template-columns: 35% 25% 20% 20%;
}
body.room.queue .rcv_info-wrap .field-rcv_info .rcv-wrap .product-items .product-item:last-child, body.op.queue .rcv_info-wrap .field-rcv_info .rcv-wrap .product-items .product-item:last-child {
  border-bottom: none;
}
body.room.queue .rcv_info-wrap .field-rcv_info .rcv-wrap .product-items .product-item .tx-type, body.room.queue .rcv_info-wrap .field-rcv_info .rcv-wrap .product-items .product-item .code, body.room.queue .rcv_info-wrap .field-rcv_info .rcv-wrap .product-items .product-item .name, body.room.queue .rcv_info-wrap .field-rcv_info .rcv-wrap .product-items .product-item .cnt, body.room.queue .rcv_info-wrap .field-rcv_info .rcv-wrap .product-items .product-item .sub_amount, body.op.queue .rcv_info-wrap .field-rcv_info .rcv-wrap .product-items .product-item .tx-type, body.op.queue .rcv_info-wrap .field-rcv_info .rcv-wrap .product-items .product-item .code, body.op.queue .rcv_info-wrap .field-rcv_info .rcv-wrap .product-items .product-item .name, body.op.queue .rcv_info-wrap .field-rcv_info .rcv-wrap .product-items .product-item .cnt, body.op.queue .rcv_info-wrap .field-rcv_info .rcv-wrap .product-items .product-item .sub_amount {
  font-size: 0.9rem;
  color: #555;
}
body.room.queue .rcv_info-wrap .field-rcv_info .rcv-wrap .product-items .product-item .tx-type, body.op.queue .rcv_info-wrap .field-rcv_info .rcv-wrap .product-items .product-item .tx-type {
  font-weight: bold;
  color: #60b7cc;
  margin-right: 0.5rem;
}
body.room.queue .rcv_info-wrap .field-rcv_info .rcv-wrap .product-items .product-item .sub_amount, body.op.queue .rcv_info-wrap .field-rcv_info .rcv-wrap .product-items .product-item .sub_amount {
  font-weight: bold;
  color: #333;
}
body.room.queue .edit-btn-wrap .btn-add, body.op.queue .edit-btn-wrap .btn-add {
  display: none;
}
body.reception.overview.maxmode .group.pos-0 {
  z-index: 999;
  position: absolute;
  left: 0;
  top: 0;
  height: 100vh;
  background: #fff;
}
body.reception.overview.maxmode .left-menu {
  display: none;
}
body.reception.overview .tit {
  font-size: 1.5rem;
  font-weight: bold;
  color: #333333;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-align: center;
}
body.reception.overview .status-prepare span.pt_name {
  animation: blink 4s infinite;
  color: #fff;
  font-weight: bold;
}
body.reception.overview .top_pane > div {
  height: 5rem;
  align-items: center;
  justify-content: center;
  background-color: #3b5998;
  color: #fff;
  font-size: 1.2rem;
  font-weight: bold;
  gap: 1rem;
  display: none;
}
body.reception.overview .top_pane > div.active {
  display: flex !important;
}
body.reception.overview .top_pane > div button {
  padding: 0.5rem 1rem;
  background-color: #4a90e2;
  border: none;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.3s;
}
body.reception.overview .top_pane > div button:hover {
  background-color: #357ab9;
}
body.reception.overview .inte_list > div {
  flex-grow: 1;
  overflow-y: auto;
  padding: 1rem;
  background-color: #f0f4f7;
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(var(--col-count, 3), 1fr);
}
body.reception.overview .inte_list > div ul {
  list-style: none;
  padding: 0;
  margin: 0;
  border-radius: 0.3rem;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
body.reception.overview .inte_list > div ul li {
  display: flex;
  justify-content: space-between;
  padding: 0.8rem;
  color: #333;
  height: 6rem;
}
body.reception.overview .inte_list > div ul li .room_name {
  font-weight: bold;
  font-size: 1.3rem;
}
body.reception.overview .inte_list > div ul li .pt_name {
  font-size: 2.6rem;
}
body.reception.overview .inte_list > div ul li.status-prepare {
  background-color: #ff9800;
  color: #fff;
}
body.reception.overview .inte_list > div ul li.status-work {
  background-color: #4caf50;
  color: #fff;
}
body.reception.overview .inte_list > div ul li.status-empty {
  background-color: #9e9e9e;
  color: #fff;
}
body.reception.overview .waiting_list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 1rem;
  padding: 1rem;
  background-color: #f7fafc;
  border-top: 2px solid #e0e6eb;
}
body.reception.overview .waiting_list ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
  transition: box-shadow 0.3s;
}
body.reception.overview .waiting_list ul:hover {
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}
body.reception.overview .waiting_list ul .mdi-account {
  font-size: 2rem;
  color: #4a90e2;
  margin-bottom: 0.5rem;
}
body.reception.overview .waiting_list ul .pt-name {
  font-size: 1rem;
  font-weight: bold;
  color: #333333;
}
.detail-list-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-collapse: collapse;
}
.detail-list-wrap .detail-header, .detail-list-wrap .detail-item {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #ddd;
  align-items: center;
}
.detail-list-wrap .detail-header span, .detail-list-wrap .detail-item span {
  flex: 1;
  text-align: center;
}
.detail-list-wrap .detail-header span:first-child, .detail-list-wrap .detail-item span:first-child {
  flex: 2;
  text-align: left;
}
.detail-list-wrap .detail-header {
  background-color: #f4f4f4;
  font-weight: bold;
}
.detail-list-wrap .del i {
  font-size: 1.2rem;
  cursor: pointer;
}
.detail-list-wrap .del i:hover {
  color: #d96c37;
}
.detail-list-wrap .detail-item:nth-child(even) {
  background-color: #fafafa;
}
.detail-list-wrap .detail-item:hover {
  background-color: #f1f1f1;
}
.detail-list-wrap.type-2 li {
  padding-right: 0.5rem;
}
.detail-list-wrap.type-2 span {
  flex: 1;
  text-align: center;
}
.detail-list-wrap.type-2 span:first-child {
  flex: 1;
  text-align: center;
  padding: 0;
}
.detail-list-wrap.type-2 span:nth-child(2) {
  flex: 3;
  text-align: left;
  padding-left: 1rem;
}
.detail-list-wrap.type-2 span.add-btn {
  text-align: right;
}
body.disease .cat1-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 1rem;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 5px;
  justify-content: center;
}
body.disease .cat1-wrap .cat1 {
  width: 2.5rem;
  height: 2.5rem;
  background-color: #3a3a3a;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  font-size: 0.9rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
}
body.disease .cat1-wrap .cat1:hover {
  background-color: #505050;
}
body.disease .cat1-wrap .cat1:active {
  background-color: #2b2b2b;
  transform: scale(0.95);
}
body.disease .cat1-wrap .cat1:first-child {
  background-color: #17a2b8;
}
body.disease .cat1-wrap .cat1:first-child:hover {
  background-color: #138496;
}
body.disease .cat1-wrap .cat1:first-child:active {
  background-color: #0f6f72;
}
body.disease .cat1-wrap .cat1:last-child {
  background-color: #477bff;
}
body.disease .cat1-wrap .cat1:last-child:hover {
  background-color: #0056b3;
}
body.disease .cat1-wrap .cat1:last-child:active {
  background-color: #004085;
}
body.drug.cat1 .search-wrap, body.drug.cat2 .search-wrap {
  width: 20vw;
  display: grid;
  grid-template-columns: 30% 50% 20%;
  gap: 0.4rem;
  position: absolute;
  right: 6vw;
  margin-top: 3rem;
  z-index: 5;
}
body.drug td.img_url img {
  width: 5rem;
}
body.drug .list-wrap .edit-btn-wrap {
  display: none;
}
body.drug .items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  padding: 1rem;
}
body.drug .items .grid {
  background-color: #f9f9f9;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 1rem;
  transition: box-shadow 0.3s, transform 0.3s;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
body.drug .items .grid:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}
body.drug .items .grid .cls_code a {
  font-weight: bold;
  font-size: 1.1rem;
  color: #555;
  margin-bottom: 0.5rem;
}
body.drug .items .grid .cnt {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
  color: #555;
}
body.drug .items .grid .cnt .number {
  font-weight: bold;
  color: #007bff;
}
body.drug .items .grid .cnt .gr {
  color: #777;
}
body.drug.cat2 .table.table-nowrap tbody tr td.detail_url a.btn.btn-primary {
  color: #fff;
}
body.insurance.criteria .card-header.group_1 {
  display: none;
}
body.insurance.criteria pre {
  text-wrap-mode: wrap;
  line-height: 1.5rem;
}
body.insurance.criteria .modal-footer button {
  display: none;
}
body.insurance.criteria .edit-btn-wrap button {
  display: none;
}
body.codeman.drug .list-wrap .edit-btn-wrap {
  display: inline-flex;
}
body.codeman .card-header.group_1 {
  display: none;
}
body.codeman .vue3-easy-data-table {
  display: block;
  width: 100%;
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 0.5rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
body.codeman .vue3-easy-data-table__main {
  width: 100%;
  overflow-x: auto;
}
body.codeman .vue3-easy-data-table__main table {
  width: 100%;
  border-collapse: collapse;
  color: #333;
  font-size: 0.9rem;
}
body.codeman .vue3-easy-data-table__main table thead {
  background-color: #42b883;
  color: #ffffff;
}
body.codeman .vue3-easy-data-table__main table thead th {
  padding: 0.75rem;
  font-weight: bold;
  text-align: left;
  border-bottom: 2px solid #e0e0e0;
}
body.codeman .vue3-easy-data-table__main table thead .header-text {
  padding: 0 0.25rem;
}
body.codeman .vue3-easy-data-table__main table tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}
body.codeman .vue3-easy-data-table__main table tbody tr:hover {
  background-color: #e0f7fa;
}
body.codeman .vue3-easy-data-table__main table tbody tr td {
  padding: 0.25rem 0.5rem;
  border-bottom: 1px solid #e0e0e0;
}
body.codeman .vue3-easy-data-table__main table tbody tr td.direction-left {
  text-align: left;
}
body.codeman .vue3-easy-data-table__main table tbody tr td:nth-child(1).direction-left {
  text-align: center;
}
body.codeman .vue3-easy-data-table__main table tbody tr td .easy-checkbox {
  display: inline-block;
  position: relative;
  cursor: pointer;
}
body.codeman .vue3-easy-data-table__main table tbody tr td .easy-checkbox input[type="checkbox"] {
  display: none;
}
body.codeman .vue3-easy-data-table__main table tbody tr td .easy-checkbox label {
  width: 1rem;
  height: 1rem;
  background: #ddd;
  display: block;
  border-radius: 0.2rem;
}
body.codeman .vue3-easy-data-table__main table tbody tr td .easy-checkbox label:hover {
  background: #bbb;
}
body.codeman .vue3-easy-data-table__main table tbody tr td .easy-checkbox input[type="checkbox"]:checked + label {
  background: #42b883;
}
body.codeman .vue3-easy-data-table .operation-wrapper {
  display: flex;
  gap: 0.25rem;
}
body.codeman .vue3-easy-data-table .operation-wrapper .btn {
  width: 2rem;
  height: 2rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border-radius: 0.3rem;
}
body.codeman .vue3-easy-data-table .operation-wrapper .btn.btn-warning {
  background-color: #ffa726;
}
body.codeman .vue3-easy-data-table .operation-wrapper .btn.btn-warning:hover {
  background-color: #fb8c00;
}
body.codeman .vue3-easy-data-table .operation-wrapper .btn.btn-danger {
  background-color: #ef5350;
}
body.codeman .vue3-easy-data-table .operation-wrapper .btn.btn-danger:hover {
  background-color: #e53935;
}
body.codeman .vue3-easy-data-table__footer {
  display: flex;
  align-items: center;
  padding: 0.75rem;
  border-top: 1px solid #e0e0e0;
  background-color: #fafafa;
}
body.codeman .vue3-easy-data-table__footer .pagination__items-index {
  color: #666;
  font-size: 0.85rem;
}
body.codeman .vue3-easy-data-table__footer .btn {
  font-size: 0.85rem;
  padding: 0.25rem 0.75rem;
  border-radius: 0.25rem;
  color: #fff;
  background-color: #42b883;
  border: none;
}
body.codeman .vue3-easy-data-table__footer .btn:disabled {
  background-color: #ddd;
  cursor: not-allowed;
}
body.codeman .vue3-easy-data-table__footer .btn:hover:not(:disabled) {
  background-color: #399e72;
}
body.config .d-flex.ext-group.edit {
  row-gap: 0.5rem;
}
body.config .list-btn-wrap, body.config .pagination-wrap {
  display: none;
}
body.config .items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 60px 20px;
  background-color: #f5f5f5;
  border-radius: 8px;
  min-height: 400px;
  align-items: center;
  margin-top: 4rem;
}
body.config .grid {
  list-style: none;
  background-color: #e0e7ff;
  border-radius: 8px;
  padding: 20px 25px;
  min-width: 150px;
  max-width: 200px;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
body.config .grid:hover {
  background-color: #c7d2fe;
}
body.config .grid .name {
  font-weight: 500;
  color: #333;
}
body.config .grid .name a {
  font-size: 1.25rem;
}
body.config .sms_ev_tit-wrap .field-sms_ev_tit {
  font-size: 0.8rem;
}
body.config .modal-footer button.btn.btn-danger {
  display: none;
}
body.reference.pic .items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 15px;
  padding: 15px;
  background-color: #f7f8fc;
}
body.reference.pic .items .grid {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 10px;
  column-gap: 20px;
  padding: 15px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: relative;
}
body.reference.pic .items .grid span.label {
  margin-right: 1.5rem;
}
body.reference.pic .items .grid .image_path {
  grid-row: 1 / span 5;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.reference.pic .items .grid .image_path img {
  cursor: pointer;
  width: 100%;
  height: 100%;
  max-height: 120px;
  object-fit: cover;
  border-radius: 6px;
  border: 2px solid #e0e6ed;
}
body.reference.pic .items .grid .image_type {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 5px 10px;
  background-color: #007acc;
  color: #fff;
  font-size: 0.75em;
  font-weight: 600;
  border-radius: 12px;
}
body.reference.pic .items .grid .pt_id, body.reference.pic .items .grid .pt_name, body.reference.pic .items .grid .description {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 0.9em;
}
body.reference.pic .items .grid .pt_id .label, body.reference.pic .items .grid .pt_name .label, body.reference.pic .items .grid .description .label {
  font-weight: 600;
  color: #333;
  font-size: 0.9em;
}
body.reference.pic .items .grid .pt_id .txt, body.reference.pic .items .grid .pt_name .txt, body.reference.pic .items .grid .description .txt {
  color: #007acc;
  border-color: #007acc;
  font-size: 0.9em;
  border-bottom: 1px solid;
  padding: 2px;
}
body.reference.pic .items .grid .pt_id .txt {
  color: #005f99;
  border-color: #005f99;
}
body.reference.pic .items .grid .pt_name .txt {
  color: #005f99;
  border-color: #005f99;
}
body.reference.pic .items .grid .description .txt {
  color: #339acc;
  border-color: #339acc;
}
body.reference.pic .items .grid .seq {
  display: none;
}
body.reference.pic .items .grid .created_at {
  font-size: 0.85em;
  color: #999;
}
body.reference.pic .items .grid .created_at .label {
  font-weight: 500;
  color: #888;
}
body.reference.pic .items .grid .created_at .txt {
  color: #bbb;
  font-size: 0.85em;
}
body.reference.pic .card-header {
  display: none;
}
body.reference.pic .modal-footer button.btn-primary {
  display: none;
}
body.reservation.new .date-wrap .dp__menu_inner {
  min-height: 10rem;
}
body.reservation.new .reason-label-wrap.col-3 {
  width: 20.4%;
}
body.reservation.new #group_2 {
  margin: 0;
  max-width: 100%;
  left: 0;
  position: absolute;
  z-index: 9999;
  overflow-x: hidden;
  margin-top: 0.5rem;
  background: #d9d8d1;
}
body.reservation.new #group_2 .field-wrap.row.col-12 {
  position: relative;
  left: 0.7rem;
}
body.reservation.new #group_2 .container {
  padding: 2rem;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
}
body.reservation.new #group_2 .ext-group {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
body.reservation.new #group_2 .field-wrap {
  padding: 2px;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}
body.reservation.new #group_2 .field-wrap .time_schedule-label-wrap .label {
  font-size: 1.5rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 1rem;
}
body.reservation.new #group_2 .field-wrap .time_schedule-wrap {
  background-color: #fafafa;
  padding: 1rem;
  border-radius: 8px;
  min-height: 18rem;
}
body.reservation.new #group_2 .field-wrap .time_schedule-wrap .text-wrap .field-time_schedule .label {
  font-size: 1rem;
  color: #555;
  margin-bottom: 1.5rem;
  letter-spacing: 0.1rem;
}
body.reservation.new #group_2 .field-wrap .time_schedule-wrap .text-wrap .field-time_schedule .time-ruler {
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  border-bottom: 2px solid #eee;
}
body.reservation.new #group_2 .field-wrap .time_schedule-wrap .text-wrap .field-time_schedule .time-ruler .num {
  width: calc(100% / var(--col-count));
  text-align: center;
  padding: 0.5rem 0;
  font-weight: bold;
  color: #666;
  border-right: 1px solid #ddd;
  position: relative;
}
body.reservation.new #group_2 .field-wrap .time_schedule-wrap .text-wrap .field-time_schedule .time-ruler .num .time-indicator {
  display: flex;
  justify-content: space-around;
  position: relative;
}
body.reservation.new #group_2 .field-wrap .time_schedule-wrap .text-wrap .field-time_schedule .time-ruler .num .line-spliter {
  height: 2px;
  width: 30%;
  background: #5a8bb2;
  position: absolute;
  margin-top: 0.5rem;
}
body.reservation.new #group_2 .field-wrap .time_schedule-wrap .text-wrap .field-time_schedule .time-ruler .num span.time-pick {
  margin-top: -1.5rem;
  left: 60%;
  position: absolute;
  width: 30%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.3rem;
  font-weight: 600;
  color: #3a3a3a;
  font-size: 1em;
  background-color: #e0f0ff;
  border: 1px solid #a0c4ff;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}
body.reservation.new #group_2 .field-wrap .time_schedule-wrap .text-wrap .field-time_schedule .time-ruler .num span.time-pick:first-child {
  margin-left: -45%;
}
body.reservation.new #group_2 .field-wrap .time_schedule-wrap .text-wrap .field-time_schedule .time-ruler .num span.time-pick:hover {
  background-color: #a0c4ff;
  color: #fff;
}
body.reservation.new #group_2 .field-wrap .time_schedule-wrap .text-wrap .field-time_schedule .time-ruler .num:last-child {
  border-right: none;
}
body.reservation.new #group_2 .field-wrap .time_schedule-wrap .text-wrap .field-time_schedule .time-assigner {
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding: 0;
  margin: 0;
}
body.reservation.new #group_2 .field-wrap .time_schedule-wrap .text-wrap .field-time_schedule .time-assigner.has-none {
  display: none;
}
body.reservation.new #group_2 .field-wrap .time_schedule-wrap .text-wrap .field-time_schedule .time-assigner li {
  width: calc(100% / var(--col-count));
  padding: 0.2rem;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  border-radius: 5px;
  background-color: #ffffff;
}
body.reservation.new #group_2 .field-wrap .time_schedule-wrap .text-wrap .field-time_schedule .time-assigner li:last-child {
  border-right: none;
}
body.reservation.new #group_2 .field-wrap .time_schedule-wrap .text-wrap .field-time_schedule .time-assigner li .pts {
  background-color: #f1f1f1;
  padding: 0.5rem;
  margin-bottom: 2px;
  border: 1px solid #e1e1e1;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  position: relative;
}
body.reservation.new #group_2 .field-wrap .time_schedule-wrap .text-wrap .field-time_schedule .time-assigner li .pts .duration {
  font-size: 0.9rem;
  color: #888;
}
body.reservation.new #group_2 .field-wrap .time_schedule-wrap .text-wrap .field-time_schedule .time-assigner li .pts .pt_name, body.reservation.new #group_2 .field-wrap .time_schedule-wrap .text-wrap .field-time_schedule .time-assigner li .pts .reason, body.reservation.new #group_2 .field-wrap .time_schedule-wrap .text-wrap .field-time_schedule .time-assigner li .pts .note {
  display: flex;
  align-items: center;
  font-size: 0.85rem;
}
body.reservation.new #group_2 .field-wrap .time_schedule-wrap .text-wrap .field-time_schedule .time-assigner li .pts .pt_name i, body.reservation.new #group_2 .field-wrap .time_schedule-wrap .text-wrap .field-time_schedule .time-assigner li .pts .reason i, body.reservation.new #group_2 .field-wrap .time_schedule-wrap .text-wrap .field-time_schedule .time-assigner li .pts .note i {
  margin-right: 0.3rem;
  color: #888;
}
body.reservation.new #group_2 .field-wrap .time_schedule-wrap .text-wrap .field-time_schedule .time-assigner li .pts .pt_name {
  font-weight: bold;
  color: #333;
}
body.reservation.new #group_2 .field-wrap .time_schedule-wrap .text-wrap .field-time_schedule .time-assigner li .pts .reason {
  color: #555;
}
body.reservation.new #group_2 .field-wrap .time_schedule-wrap .text-wrap .field-time_schedule .time-assigner li .pts .note {
  color: #999;
}
body.reservation.new #group_2 .field-wrap .time_schedule-wrap .text-wrap .field-time_schedule .time-assigner li .pts .display2 {
  position: absolute;
  margin-top: 2.5rem;
  right: 0.4rem;
  transform: translateY(-50%);
  background-color: #5a8bb2;
  color: #fff;
  padding: 0.3rem 0.6rem;
  border-radius: 12px;
  font-size: 0.8em;
  font-weight: bold;
  white-space: nowrap;
}
body.reservation.list .duration-wrap button, body.reservation.calendar .duration-wrap button {
  max-width: 5rem;
  padding: 0.6rem;
}
body.reservation.calendar .page-content > .container-fluid, body.staff.vacation .page-content > .container-fluid {
  max-width: 100% !important;
  margin: 0;
  padding: 0;
}
body.reservation.calendar span.multi-date, body.staff.vacation span.multi-date {
  max-width: 34vw;
  position: absolute;
  left: 3rem;
  display: inline-flex;
  gap: 1rem;
}
body.reservation.calendar .vertical-slider-container, body.staff.vacation .vertical-slider-container {
  display: flex;
  align-items: center;
  height: 4rem;
}
body.reservation.calendar .vertical-slider-container .vertical-slider, body.staff.vacation .vertical-slider-container .vertical-slider {
  -webkit-appearance: slider-vertical;
  width: 8px;
  height: 100%;
  writing-mode: vertical-lr;
  direction: rtl;
  background-color: #e0e7ec;
}
body.reservation.calendar .vertical-slider-container .vertical-slider::-webkit-slider-runnable-track, body.staff.vacation .vertical-slider-container .vertical-slider::-webkit-slider-runnable-track {
  background: linear-gradient(to bottom, #b3c9d1, #e0e7ec);
  border-radius: 10px;
}
body.reservation.calendar .vertical-slider-container .vertical-slider::-webkit-slider-thumb, body.reservation.calendar .vertical-slider-container .vertical-slider::-moz-range-thumb, body.staff.vacation .vertical-slider-container .vertical-slider::-webkit-slider-thumb, body.staff.vacation .vertical-slider-container .vertical-slider::-moz-range-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background-color: #a0cad1;
  cursor: pointer;
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}
body.reservation.calendar .container-wrap > form, body.staff.vacation .container-wrap > form {
  display: grid;
  grid-template-columns: 20% 80%;
}
body.reservation.calendar .container-wrap > form #group_1 .ext-group, body.staff.vacation .container-wrap > form #group_1 .ext-group {
  padding: 1rem;
  background-color: #f7f9fc;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
body.reservation.calendar .container-wrap > form #group_1 .field-wrap, body.staff.vacation .container-wrap > form #group_1 .field-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
}
body.reservation.calendar .container-wrap > form #group_1 .field-wrap .tool_box-wrap.col-12, body.staff.vacation .container-wrap > form #group_1 .field-wrap .tool_box-wrap.col-12 {
  padding: 0;
}
body.reservation.calendar .container-wrap > form #group_1 .field-wrap .tool_box-label-wrap .tool_box-label, body.staff.vacation .container-wrap > form #group_1 .field-wrap .tool_box-label-wrap .tool_box-label {
  font-weight: bold;
  font-size: 1.25rem;
  color: #333;
  margin-bottom: 1rem;
}
body.reservation.calendar .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap, body.staff.vacation .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap {
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #ffffff;
}
body.reservation.calendar .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div, body.staff.vacation .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div {
  margin-bottom: 1.5rem;
}
body.reservation.calendar .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.room-tab .tabs, body.staff.vacation .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.room-tab .tabs {
  grid-template-columns: repeat(2, 1fr);
}
body.reservation.calendar .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.room-tab .tabs .badge, body.staff.vacation .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.room-tab .tabs .badge {
  padding: 0.5rem 0 !important;
  font-size: 0.75rem;
  font-weight: 400;
  background-color: #f1f3f5;
}
body.reservation.calendar .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.room-tab .tabs .badge.off, body.staff.vacation .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.room-tab .tabs .badge.off {
  background-color: #d3d3d3;
}
body.reservation.calendar .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.room-tab .tabs .badge.red, body.staff.vacation .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.room-tab .tabs .badge.red {
  border-top: 1px solid #ff5733;
}
body.reservation.calendar .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.room-tab .tabs .badge.red:hover, body.staff.vacation .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.room-tab .tabs .badge.red:hover {
  border-color: #ff2d00;
}
body.reservation.calendar .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.room-tab .tabs .badge.blue, body.staff.vacation .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.room-tab .tabs .badge.blue {
  border-top: 1px solid #33c1ff;
}
body.reservation.calendar .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.room-tab .tabs .badge.blue:hover, body.staff.vacation .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.room-tab .tabs .badge.blue:hover {
  border-color: #00b2ff;
}
body.reservation.calendar .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.room-tab .tabs .badge.green, body.staff.vacation .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.room-tab .tabs .badge.green {
  border-top: 1px solid #75ff33;
}
body.reservation.calendar .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.room-tab .tabs .badge.green:hover, body.staff.vacation .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.room-tab .tabs .badge.green:hover {
  border-color: #52ff00;
}
body.reservation.calendar .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.room-tab .tabs .badge.pink, body.staff.vacation .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.room-tab .tabs .badge.pink {
  border-top: 1px solid #ff33a8;
}
body.reservation.calendar .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.room-tab .tabs .badge.pink:hover, body.staff.vacation .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.room-tab .tabs .badge.pink:hover {
  border-color: #ff0092;
}
body.reservation.calendar .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.room-tab .tabs .badge.yellow, body.staff.vacation .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.room-tab .tabs .badge.yellow {
  border-top: 1px solid #f3ff33;
}
body.reservation.calendar .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.room-tab .tabs .badge.yellow:hover, body.staff.vacation .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.room-tab .tabs .badge.yellow:hover {
  border-color: #f0ff00;
}
body.reservation.calendar .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.room-tab .tabs .badge.orange, body.staff.vacation .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.room-tab .tabs .badge.orange {
  border-top: 1px solid #ffac33;
}
body.reservation.calendar .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.room-tab .tabs .badge.orange:hover, body.staff.vacation .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.room-tab .tabs .badge.orange:hover {
  border-color: #ff9700;
}
body.reservation.calendar .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.room-tab .tabs .badge.purple, body.staff.vacation .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.room-tab .tabs .badge.purple {
  border-top: 1px solid #9b33ff;
}
body.reservation.calendar .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.room-tab .tabs .badge.purple:hover, body.staff.vacation .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.room-tab .tabs .badge.purple:hover {
  border-color: #8200ff;
}
body.reservation.calendar .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.room-tab .tabs .badge.teal, body.staff.vacation .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.room-tab .tabs .badge.teal {
  border-top: 1px solid #33ffb8;
}
body.reservation.calendar .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.room-tab .tabs .badge.teal:hover, body.staff.vacation .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.room-tab .tabs .badge.teal:hover {
  border-color: #00ffa6;
}
body.reservation.calendar .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.room-tab .tabs .badge.coral, body.staff.vacation .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.room-tab .tabs .badge.coral {
  border-top: 1px solid #ff5733;
}
body.reservation.calendar .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.room-tab .tabs .badge.coral:hover, body.staff.vacation .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.room-tab .tabs .badge.coral:hover {
  border-color: #ff2d00;
}
body.reservation.calendar .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.room-tab .tabs .badge.magenta, body.staff.vacation .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.room-tab .tabs .badge.magenta {
  border-top: 1px solid #ff33b1;
}
body.reservation.calendar .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.room-tab .tabs .badge.magenta:hover, body.staff.vacation .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.room-tab .tabs .badge.magenta:hover {
  border-color: #ff009e;
}
body.reservation.calendar .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div .label, body.staff.vacation .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div .label {
  font-size: 1rem;
  font-weight: 600;
  color: #666;
  margin-bottom: 0.5rem;
  display: block;
}
body.reservation.calendar .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div .tabs, body.staff.vacation .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div .tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  width: 100%;
}
body.reservation.calendar .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div .tabs .badge, body.staff.vacation .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div .tabs .badge {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 1rem;
  background-color: #e9ecef;
  color: #333;
  border-radius: 0.25rem;
  cursor: pointer;
}
body.reservation.calendar .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div .tabs .badge:hover, body.staff.vacation .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div .tabs .badge:hover {
  background-color: #d3d3d3;
}
body.reservation.calendar .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div .tabs .badge.active, body.staff.vacation .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div .tabs .badge.active {
  background-color: #60b7cc;
  color: white;
  font-weight: bold;
}
body.reservation.calendar .container-wrap > form #group_2, body.staff.vacation .container-wrap > form #group_2 {
  max-width: 100%;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap, body.staff.vacation .container-wrap > form #group_2 .cal-wrap {
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 1px;
  position: relative;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.record, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.record {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.record.schedule li .records, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.record.schedule li .records {
  height: 12rem;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record {
  padding: 0 0.25rem;
  position: absolute;
  width: calc(100% + 0.15rem);
  margin-left: -1rem;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.pos-1, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.pos-1 {
  margin-top: calc(0 * 1.4rem);
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.pos-2, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.pos-2 {
  margin-top: calc(1 * 1.4rem);
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.pos-3, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.pos-3 {
  margin-top: calc(2 * 1.4rem);
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.pos-4, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.pos-4 {
  margin-top: calc(3 * 1.4rem);
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.pos-5, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.pos-5 {
  margin-top: calc(4 * 1.4rem);
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.pos-6, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.pos-6 {
  margin-top: calc(5 * 1.4rem);
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.pos-7, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.pos-7 {
  margin-top: calc(6 * 1.4rem);
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.pos-8, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.pos-8 {
  margin-top: calc(7 * 1.4rem);
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.pos-9, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.pos-9 {
  margin-top: calc(8 * 1.4rem);
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.pos-10, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.pos-10 {
  margin-top: calc(9 * 1.4rem);
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.pos-11, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.pos-11 {
  margin-top: calc(10 * 1.4rem);
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.pos-12, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.pos-12 {
  margin-top: calc(11 * 1.4rem);
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.red, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.red {
  background: #f8d4d0;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.red:hover, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.red:hover {
  border-color: #f1aba4;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.blue, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.blue {
  background: #d5eaf7;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.blue:hover, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.blue:hover {
  border-color: #aad5ef;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.green, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.green {
  background: #d9f2d9;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.green:hover, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.green:hover {
  border-color: #b3e5b3;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.pink, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.pink {
  background: #f7d9e5;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.pink:hover, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.pink:hover {
  border-color: #eeafc8;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.yellow, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.yellow {
  background: #fdf5d7;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.yellow:hover, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.yellow:hover {
  border-color: #fbe9a6;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.orange, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.orange {
  background: #fce4cc;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.orange:hover, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.orange:hover {
  border-color: #f9cb9c;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.purple, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.purple {
  background: #e4d9f7;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.purple:hover, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.purple:hover {
  border-color: #c6afee;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.teal, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.teal {
  background: #d5f7ed;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.teal:hover, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.teal:hover {
  border-color: #aaefdb;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.coral, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.coral {
  background: #fad9d3;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.coral:hover, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.coral:hover {
  border-color: #f5b1a5;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.magenta, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.magenta {
  background: #f7d0e9;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.magenta:hover, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.magenta:hover {
  border-color: #f0a4d5;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record span.name, body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record span.reason, body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record span.duration, body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record span.dot, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record span.name, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record span.reason, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record span.duration, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record span.dot {
  visibility: hidden;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.is_first span.name, body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.is_first span.reason, body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.is_first span.dot, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.is_first span.name, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.is_first span.reason, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.is_first span.dot {
  visibility: visible;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.is_first span.name, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.is_first span.name {
  margin-left: 0.75rem;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.is_first span.reason, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.is_first span.reason {
  top: 0 !important;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.is_last span.duration, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.is_last span.duration {
  visibility: visible;
  border: 1px solid #999;
  background: #fff;
  z-index: 111;
  margin-top: 1rem !important;
  height: 1.2rem !important;
  position: absolute;
  padding-top: 0 !important;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.is_last span.duration:before, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.is_last span.duration:before {
  content: "" !important;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.is_last span.duration:after, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.is_last span.duration:after {
  content: " 일" !important;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.timeline, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.timeline {
  display: flex;
  flex-direction: column;
  width: calc(100% - 2rem);
  padding-left: 2rem;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.timeline.schedule > ul, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.timeline.schedule > ul {
  gap: 1px;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.timeline.schedule ul.records, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.timeline.schedule ul.records {
  display: flex;
  height: 2.5rem;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.timeline.schedule ul.records li, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.timeline.schedule ul.records li {
  width: 100%;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.timeline.schedule ul.records li span.mark, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.timeline.schedule ul.records li span.mark {
  padding: 0;
  width: 100%;
  display: block;
  height: 100%;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.timeline.schedule ul.records li span.mark.active, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.timeline.schedule ul.records li span.mark.active {
  background: #e6d88a;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.timeline.schedule ul.user-ids, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.timeline.schedule ul.user-ids {
  position: absolute;
  margin-top: 1.7rem;
  display: flex;
  flex-wrap: wrap;
  width: 2rem;
  flex-direction: column;
  gap: 1px;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.timeline.schedule ul.user-ids li, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.timeline.schedule ul.user-ids li {
  margin-left: -2rem;
  border: 0;
  height: 2.5rem;
  background: transparent;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.timeline.schedule ul.user-ids span.name, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.timeline.schedule ul.user-ids span.name {
  width: 2rem;
  display: flex;
  flex-wrap: wrap;
  line-height: 1rem;
  align-items: flex-end;
  justify-content: flex-end;
  font-size: 0.8rem;
  padding-top: 0.5rem;
  padding-right: 0.3rem;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.timeline.schedule ul.ruler, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.timeline.schedule ul.ruler {
  display: flex;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.timeline.schedule ul.ruler li, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.timeline.schedule ul.ruler li {
  width: 100%;
  border: 0;
  align-items: center;
  justify-content: center;
  background: transparent;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.timeline.schedule ul.ruler span.day-indicator, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.timeline.schedule ul.ruler span.day-indicator {
  font-size: 1.1rem;
  font-weight: 600;
  color: #999;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.timeline::after, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.timeline::after {
  content: none;
  width: 0;
  background: none;
  position: static;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.timeline li.inactive, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.timeline li.inactive {
  display: none;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.timeline li, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.timeline li {
  padding: 0;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.timeline li .timeline-wrap, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.timeline li .timeline-wrap {
  position: absolute;
  width: 100%;
  left: 0;
  margin-top: 0;
  border: 0;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.timeline li .timeline-wrap .date-wrap, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.timeline li .timeline-wrap .date-wrap {
  position: absolute;
  left: -2rem;
  z-index: 88;
  top: -1px;
  width: 2rem;
  /*                height: 5rem;*/
  height: var(--dynamic-height, 10rem);
  background: #e2f1f5;
  border-top-left-radius: 0.2rem;
  border-bottom-left-radius: 0.2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid #ddd;
  border-right: 0;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.timeline li .timeline-wrap .date-wrap .month, body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.timeline li .timeline-wrap .date-wrap .day, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.timeline li .timeline-wrap .date-wrap .month, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.timeline li .timeline-wrap .date-wrap .day {
  display: block;
  text-align: center;
  width: 100%;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.timeline li .timeline-wrap .date-wrap .month, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.timeline li .timeline-wrap .date-wrap .month {
  font-size: 1rem;
  color: #666;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.timeline li .timeline-wrap .date-wrap .day, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.timeline li .timeline-wrap .date-wrap .day {
  font-size: 1rem;
  color: #666;
  font-weight: 600;
  text-align: right;
  padding-right: 0.4rem;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.timeline li .timeline-wrap .date-wrap span.divider, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.timeline li .timeline-wrap .date-wrap span.divider {
  height: 2px;
  background: #ffffff;
  width: 80%;
  opacity: 0.65;
  transform: rotate(-20deg);
  margin: 0.2rem;
  display: block;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.timeline li .timeline-wrap ul.cases, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.timeline li .timeline-wrap ul.cases {
  height: auto;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.timeline li .timeline-wrap ul.cases li.case .mark.pos-2, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.timeline li .timeline-wrap ul.cases li.case .mark.pos-2 {
  top: 1rem;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.timeline li .timeline-wrap ul.cases li.case .mark.pos-3, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.timeline li .timeline-wrap ul.cases li.case .mark.pos-3 {
  top: 2rem;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.timeline li .timeline-wrap ul.cases li.case .mark.pos-4, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.timeline li .timeline-wrap ul.cases li.case .mark.pos-4 {
  top: 3rem;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.timeline li .timeline-wrap ul.cases li.case .mark.pos-5, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.timeline li .timeline-wrap ul.cases li.case .mark.pos-5 {
  top: 4rem;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.timeline li .timeline-wrap ul.cases li.case .mark.is_last, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.timeline li .timeline-wrap ul.cases li.case .mark.is_last {
  border-top-right-radius: 0.5rem !important;
  border-bottom-right-radius: 0.5rem !important;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.timeline li .timeline-wrap ul.cases li.case .mark.is_first, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.timeline li .timeline-wrap ul.cases li.case .mark.is_first {
  border-top-left-radius: 0.5rem !important;
  border-bottom-left-radius: 0.5rem !important;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap .ic-wrap, body.staff.vacation .container-wrap > form #group_2 .cal-wrap .ic-wrap {
  position: absolute;
  font-size: 1.3rem;
  color: #666;
  display: flex;
  top: 1rem;
  left: -1.4rem;
  z-index: 99;
  cursor: pointer;
  flex-wrap: wrap;
  width: 1.2rem;
  justify-content: center;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap .ic-wrap i.mdi, body.staff.vacation .container-wrap > form #group_2 .cal-wrap .ic-wrap i.mdi {
  opacity: 0.5;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap .ic-wrap i.mdi.active, body.staff.vacation .container-wrap > form #group_2 .cal-wrap .ic-wrap i.mdi.active {
  opacity: 1;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.record > li, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.record > li {
  min-height: 4rem;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.record > li.n4 .timeline-wrap, body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.record > li.n5 .timeline-wrap, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.record > li.n4 .timeline-wrap, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.record > li.n5 .timeline-wrap {
  margin-top: -18rem;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.timeline > li, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.timeline > li {
  /*            min-height: 5rem;*/
  min-height: var(--dynamic-height, 10rem);
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li {
  padding: 1rem;
  border: 1px solid #ddd;
  background-color: #fafafa;
  text-align: center;
  position: relative;
  border-radius: 4px;
  font-size: 0.9rem;
  /* timeline-wrap start */
  /* timeline-wrap end */
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li.inactive, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li.inactive {
  opacity: 0.5;
  color: #999;
  background-color: #f2f2f2;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li.sun, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li.sun {
  color: #d9534f;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li.sat, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li.sat {
  color: #5bc0de;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li:hover, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li:hover {
  background-color: #f1f1f1;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li.mon, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li.mon {
  grid-column-start: 2;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li.tue, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li.tue {
  grid-column-start: 3;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li.wed, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li.wed {
  grid-column-start: 4;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li.thu, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li.thu {
  grid-column-start: 5;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li.fri, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li.fri {
  grid-column-start: 6;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li.sat, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li.sat {
  grid-column-start: 7;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .top-part, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .top-part {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .top-part .day-indicator, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .top-part .day-indicator {
  font-size: 1.2rem;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .top-part .day-indicator:hover, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .top-part .day-indicator:hover {
  cursor: pointer;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .top-part .cnt-indicator, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .top-part .cnt-indicator {
  border-radius: 50%;
  padding: 0.3rem;
  min-width: 1.5rem;
  text-align: center;
  display: inline-block;
  padding-bottom: 0;
  border-bottom: 2px solid #60b7cc;
  color: #333;
  font-weight: bold;
  font-size: 0.9rem;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .top-part .cnt-indicator:hover, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .top-part .cnt-indicator:hover {
  cursor: pointer;
  background: #fff;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .records, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .records {
  margin-top: 0.5rem;
  padding: 0;
  list-style: none;
  text-align: left;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .records .record, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .records .record {
  padding: 0.5rem;
  position: relative;
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  margin-bottom: 2px;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .records .record.red, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .records .record.red {
  border-top: 1px solid #ff5733;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .records .record.red:hover, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .records .record.red:hover {
  border-color: #ff2d00;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .records .record.blue, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .records .record.blue {
  border-top: 1px solid #33c1ff;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .records .record.blue:hover, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .records .record.blue:hover {
  border-color: #00b2ff;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .records .record.green, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .records .record.green {
  border-top: 1px solid #75ff33;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .records .record.green:hover, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .records .record.green:hover {
  border-color: #52ff00;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .records .record.pink, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .records .record.pink {
  border-top: 1px solid #ff33a8;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .records .record.pink:hover, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .records .record.pink:hover {
  border-color: #ff0092;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .records .record.yellow, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .records .record.yellow {
  border-top: 1px solid #f3ff33;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .records .record.yellow:hover, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .records .record.yellow:hover {
  border-color: #f0ff00;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .records .record.orange, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .records .record.orange {
  border-top: 1px solid #ffac33;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .records .record.orange:hover, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .records .record.orange:hover {
  border-color: #ff9700;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .records .record.purple, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .records .record.purple {
  border-top: 1px solid #9b33ff;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .records .record.purple:hover, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .records .record.purple:hover {
  border-color: #8200ff;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .records .record.teal, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .records .record.teal {
  border-top: 1px solid #33ffb8;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .records .record.teal:hover, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .records .record.teal:hover {
  border-color: #00ffa6;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .records .record.coral, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .records .record.coral {
  border-top: 1px solid #ff5733;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .records .record.coral:hover, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .records .record.coral:hover {
  border-color: #ff2d00;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .records .record.magenta, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .records .record.magenta {
  border-top: 1px solid #ff33b1;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .records .record.magenta:hover, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .records .record.magenta:hover {
  border-color: #ff009e;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .records .record .dot, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .records .record .dot {
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  position: absolute;
  top: 16%;
  left: 3px;
  transform: translateY(-50%);
  background-color: #2ecc71;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .records .record.done .dot, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .records .record.done .dot {
  background-color: #2ecc71;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .records .record.canceled .dot, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .records .record.canceled .dot {
  background-color: #e74c3c;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .records .record.finished .dot, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .records .record.finished .dot {
  background-color: #3498db;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .records .record.plan .dot, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .records .record.plan .dot {
  background: var(--vz-gray-500);
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .records .record.confirmed .dot, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .records .record.confirmed .dot {
  background: var(--vz-gray-800);
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .records .record .name, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .records .record .name {
  font-weight: bold;
  color: #333;
  cursor: pointer;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .records .record .minute, body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .records .record .duration, body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .records .record .reason, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .records .record .minute, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .records .record .duration, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .records .record .reason {
  color: #666;
  font-size: 0.8rem;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .records .record .minute, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .records .record .minute {
  position: absolute;
  font-size: 0.9rem;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 0.2rem 0.4rem;
  color: #333;
  font-size: 0.85rem;
  transition: background-color 0.2s;
  border-bottom: 2px dashed #60b7cc;
  padding-bottom: 2px;
  width: 3rem;
  display: inline-block;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .records .record .minute:hover, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .records .record .minute:hover {
  background-color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .records .record .duration, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .records .record .duration {
  position: absolute;
  padding: 0.2rem 0.4rem;
  border-radius: 0.3rem;
  color: #666;
  font-size: 12px;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .records .record .duration:before, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .records .record .duration:before {
  content: "+";
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .records .record .duration:after, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .records .record .duration:after {
  content: " 분";
  font-size: 10px;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .records .record .minute, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .records .record .minute {
  right: 2.9rem;
  margin-top: -0.2rem;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .records .record .duration, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .records .record .duration {
  margin-top: 0.4rem;
  right: 0;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .records .record .reason, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .records .record .reason {
  position: relative;
  top: -0.4rem;
  font-size: 0.75rem;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .timeline-wrap {
  position: fixed;
  width: 64vw;
  z-index: 77;
  left: 32vw;
  margin-top: 2.3rem;
  border: 1px solid #ccc;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap a.btn-close, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .timeline-wrap a.btn-close {
  position: absolute;
  right: 0.2rem;
  bottom: 0.5rem;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap .selected-date, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .timeline-wrap .selected-date {
  left: 0.5rem;
  margin-top: -1.5rem;
  position: absolute;
  padding: 0.5rem 1rem;
  color: #fafafa;
  border-radius: 0.3rem;
  background-color: white;
  border: 1px solid #addae5;
  border-radius: 8px;
  color: #24616f;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap .selected-date .label, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .timeline-wrap .selected-date .label {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.05rem;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.timelines, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.timelines {
  display: flex;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.timelines li.timeline, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.timelines li.timeline {
  width: 1.5rem;
  border: 0;
  padding: 0;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.timelines li.timeline .time-mark, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.timelines li.timeline .time-mark {
  text-align: center;
  font-weight: bold;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.timelines li.timeline .time-mark .h, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.timelines li.timeline .time-mark .h {
  text-decoration: underline;
  font-size: 0.8rem;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.timelines li.timeline .time-mark .m, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.timelines li.timeline .time-mark .m {
  font-size: 0.6rem;
  color: #999;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.timelines li.timeline .time-mark.has_apmt, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.timelines li.timeline .time-mark.has_apmt {
  background: #ff5733 !important;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.timelines li.timeline .time-mark.has_apmt span, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.timelines li.timeline .time-mark.has_apmt span {
  color: #fff;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.timelines li.timeline .time-mark.active, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.timelines li.timeline .time-mark.active {
  position: relative;
  color: #495057;
  background-color: #f8f9fa;
  border-radius: 0.2rem;
  border-radius: 2px;
  cursor: pointer;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.timelines li.timeline .time-mark.active:hover, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.timelines li.timeline .time-mark.active:hover {
  background-color: #e9ecef;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  border: 1px solid #dee2e6;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.timelines li.timeline .time-mark.active:hover::before, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.timelines li.timeline .time-mark.active:hover::before {
  content: "+";
  position: absolute;
  margin-top: -0.15rem;
  margin-left: 0.25rem;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.timelines li.timeline .time-mark.active::before, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.timelines li.timeline .time-mark.active::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 0.3rem;
  transform: translate(-50%, -50%) scale(1);
  transition: transform 0.2s ease-out;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.timelines li.timeline .time-mark.active:hover::before, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.timelines li.timeline .time-mark.active:hover::before {
  transform: translate(-50%, -50%) scale(1.05);
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases {
  position: relative;
  width: 100%;
  height: 12rem;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case {
  position: relative;
  padding: 0;
  margin-top: 0.5rem;
  border: 0;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .mark, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .mark {
  color: #fff;
  display: block;
  position: absolute;
  height: 1rem;
  min-width: 1.3rem;
  border: 0 !important;
  border-radius: 0;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .mark.pos-1, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .mark.pos-1 {
  top: 0;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .mark.pos-2, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .mark.pos-2 {
  top: 2.5rem;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .mark.pos-3, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .mark.pos-3 {
  top: 5rem;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .mark.pos-4, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .mark.pos-4 {
  top: 7.5rem;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .mark.pos-5, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .mark.pos-5 {
  top: 10rem;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .mark.is_last, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .mark.is_last {
  border-top-right-radius: 0.5rem !important;
  border-bottom-right-radius: 0.5rem !important;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .mark.is_first, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .mark.is_first {
  border-top-left-radius: 0.5rem !important;
  border-bottom-left-radius: 0.5rem !important;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .mark.red, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .mark.red {
  background: #ff5733;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .mark.blue, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .mark.blue {
  background: #33c1ff;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .mark.green, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .mark.green {
  background: #75ff33;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .mark.pink, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .mark.pink {
  background: #ff33a8;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .mark.yellow, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .mark.yellow {
  background: #f3ff33;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .mark.orange, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .mark.orange {
  background: #ffac33;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .mark.purple, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .mark.purple {
  background: #9b33ff;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .mark.teal, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .mark.teal {
  background: #33ffb8;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .mark.coral, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .mark.coral {
  background: #ff5733;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .mark.magenta, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .mark.magenta {
  background: #ff33b1;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .info, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .info {
  position: absolute;
  z-index: 99;
  display: inline-flex;
  flex-direction: column;
  padding: 0.2rem 0.5rem;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
  font-size: 0.75rem;
  margin-top: 0.3rem;
  margin-left: -0.5rem;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .info.pos-1, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .info.pos-1 {
  top: 1rem;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .info.pos-2, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .info.pos-2 {
  top: 3.5rem;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .info.pos-3, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .info.pos-3 {
  top: 5rem;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .info.pos-4, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .info.pos-4 {
  top: 7.5rem;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .info.pos-5, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .info.pos-5 {
  top: 9rem;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .info.dur-10, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .info.dur-10 {
  min-width: calc((10 / 10)* 1.28rem);
  max-width: calc((10 / 10* 3rem));
  /*                      width: calc((10 / 10) * 1.28rem); */
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .info.dur-20, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .info.dur-20 {
  min-width: calc((20 / 10)* 1.28rem);
  max-width: calc((20 / 10* 3rem));
  /*                      width: calc((20 / 10) * 1.28rem); */
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .info.dur-30, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .info.dur-30 {
  min-width: calc((30 / 10)* 1.28rem);
  max-width: calc((30 / 10* 3rem));
  /*                      width: calc((30 / 10) * 1.28rem); */
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .info.dur-40, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .info.dur-40 {
  min-width: calc((40 / 10)* 1.28rem);
  max-width: calc((40 / 10* 3rem));
  /*                      width: calc((40 / 10) * 1.28rem); */
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .info.dur-50, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .info.dur-50 {
  min-width: calc((50 / 10)* 1.28rem);
  max-width: calc((50 / 10* 3rem));
  /*                      width: calc((50 / 10) * 1.28rem); */
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .info.dur-60, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .info.dur-60 {
  min-width: calc((60 / 10)* 1.28rem);
  max-width: calc((60 / 10* 3rem));
  /*                      width: calc((60 / 10) * 1.28rem); */
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .info.dur-70, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .info.dur-70 {
  min-width: calc((70 / 10)* 1.28rem);
  max-width: calc((70 / 10* 3rem));
  /*                      width: calc((70 / 10) * 1.28rem); */
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .info.dur-80, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .info.dur-80 {
  min-width: calc((80 / 10)* 1.28rem);
  max-width: calc((80 / 10* 3rem));
  /*                      width: calc((80 / 10) * 1.28rem); */
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .info.dur-90, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .info.dur-90 {
  min-width: calc((90 / 10)* 1.28rem);
  max-width: calc((90 / 10* 3rem));
  /*                      width: calc((90 / 10) * 1.28rem); */
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .info.dur-100, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .info.dur-100 {
  min-width: calc((100 / 10)* 1.28rem);
  max-width: calc((100 / 10* 3rem));
  /*                      width: calc((100 / 10) * 1.28rem); */
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .info.dur-110, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .info.dur-110 {
  min-width: calc((110 / 10)* 1.28rem);
  max-width: calc((110 / 10* 3rem));
  /*                      width: calc((110 / 10) * 1.28rem); */
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .info.dur-120, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .info.dur-120 {
  min-width: calc((120 / 10)* 1.28rem);
  max-width: calc((120 / 10* 3rem));
  /*                      width: calc((120 / 10) * 1.28rem); */
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .info .name, body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .info .reason, body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .info .note, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .info .name, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .info .reason, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .info .note {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  text-wrap-mode: nowrap;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .info .name i, body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .info .reason i, body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .info .note i, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .info .name i, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .info .reason i, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .info .note i {
  color: #60b7cc;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .info .name .val, body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .info .reason .val, body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .info .note .val, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .info .name .val, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .info .reason .val, body.staff.vacation .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .info .note .val {
  font-weight: bold;
}
body.reservation.calendar .panel-mode-wrap {
  display: none;
}
body.history .edit-btn-wrap .btn {
  display: none;
}
body.history .room_id-wrap .panel-mode-wrap, body.history .tx_type-wrap .panel-mode-wrap {
  display: none;
}
body.history .modal-footer.v-modal-footer {
  gap: 0.5rem;
}
body.history .modal-footer.v-modal-footer button {
  display: none;
}
body.history .event_code-wrap .panel-mode-wrap {
  display: none;
}
body.history.payment .product_item-wrap.col-12 {
  padding: 1rem;
  background: #D1F5F5;
  border-radius: 0.5rem;
}
body.history.payment .details-wrap .tit {
  font-weight: bold;
  margin-bottom: 1rem;
}
body.history.payment .details-wrap ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
body.history.payment .details-wrap li {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  padding: 0.5rem 0;
  border-bottom: 1px solid #666;
}
body.history.payment .details-wrap li .name {
  grid-column: 1 / 2;
}
body.history.payment .details-wrap li .ev_price {
  grid-column: 2 / 3;
  text-align: right;
}
body.history.payment .details-wrap li .cnt {
  grid-column: 3 / 4;
  text-align: center;
}
body.history.payment .details-wrap li .sub_amount {
  grid-column: 4 / 5;
  text-align: right;
}
body.history.payment span.field-dc_rate::after {
  content: " %";
}
body.history.payment span[class^="field-"][class$="_amount"]::after {
  content: " 원";
}
body.staff.vacation .only_work_day-wrap .form-switch {
  position: relative;
  left: 1rem;
}
body.configure .container-wrap {
  width: 60%;
  margin: 0 auto;
}
body.index .main-logo {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: #60b7cc;
  border-radius: 50%;
}
body.index .main-logo .cross {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%);
}
body.index .main-logo .cross::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 30%;
  background-color: #ffffff;
  top: 50%;
  transform: translateY(-50%);
}
body.index .main-logo .cross::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 30%;
  background-color: #ffffff;
  left: 50%;
  transform: translateX(-50%);
}
body.index .overview {
  display: grid;
  grid-template-columns: 30% 30% 37%;
  gap: 20px;
  padding: 20px;
  background-color: #f0f0ec;
  border-radius: 8px;
}
body.index .overview .user-stats, body.index .overview .database-stats {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
body.index .overview .user-stats .tit, body.index .overview .database-stats .tit {
  font-size: 1.2rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 15px;
}
body.index .overview .user-stats .item, body.index .overview .database-stats .item {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  gap: 10px;
  width: 100%;
}
body.index .overview .user-stats .item li, body.index .overview .database-stats .item li {
  display: grid;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  background-color: #fbfbf9;
  border-radius: 6px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}
body.index .overview .user-stats .item li .label, body.index .overview .database-stats .item li .label {
  font-size: 0.9rem;
  margin: 0.3rem 0;
  color: #666;
  grid-column: 1 / 3;
}
body.index .overview .user-stats .item li .value, body.index .overview .database-stats .item li .value {
  font-size: 1.1rem;
  font-weight: 700;
  color: #333;
  display: flex;
  align-items: center;
}
body.index .overview .user-stats .item li .value .total, body.index .overview .database-stats .item li .value .total {
  font-size: 1.2rem;
  color: #333;
  font-family: "Tahoma", sans-serif;
  margin-right: 5px;
}
body.index .overview .user-stats .item li .value .delta, body.index .overview .database-stats .item li .value .delta {
  font-size: 1.2rem;
  color: #60b7cc;
  font-weight: bold;
  padding: 2px 5px;
  border-radius: 40%;
  background-color: rgba(96, 183, 204, 0.2);
  font-family: "Tahoma", sans-serif;
}
body.index .overview .user-stats .item li .value .delta.empty, body.index .overview .database-stats .item li .value .delta.empty {
  display: none;
}
body.index .overview .user-stats .item li .unit, body.index .overview .database-stats .item li .unit {
  font-size: 0.9rem;
  color: #999;
}
body.index .today_stats {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  background-color: #f8f8f8;
  border-radius: 10px;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.05);
}
body.index .today_stats .today-msg {
  background-color: #e6f4ff;
  padding: 15px;
  border-radius: 8px;
  text-align: center;
  font-size: 1.1rem;
  color: #0078d7;
  font-weight: bold;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
}
body.index .today_stats .today-msg .txt {
  margin: 0;
}
body.index .today_stats .stats-wrap .stats {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
body.index .today_stats .stats-wrap .stats li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
  background-color: #fbfbf9;
  border-radius: 6px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, background-color 0.3s ease;
}
body.index .today_stats .stats-wrap .stats li:hover {
  background-color: #f0f8ff;
  transform: translateY(-2px);
  cursor: pointer;
}
body.index .today_stats .stats-wrap .stats li .label {
  font-size: 0.95rem;
  color: #555;
  font-weight: 500;
}
body.index .today_stats .stats-wrap .stats li .value {
  display: flex;
  align-items: baseline;
}
body.index .today_stats .stats-wrap .stats li .value .number {
  font-size: 1.5rem;
  font-weight: bold;
  color: #333;
  margin-right: 5px;
}
body.index .today_stats .stats-wrap .stats li .value .unit, body.index .today_stats .stats-wrap .stats li .value .divider {
  font-size: 0.9rem;
  color: #888;
}
body.index .today_stats .stats-wrap .stats .finished .label {
  color: #28a745;
}
body.index .today_stats .stats-wrap .stats .finished .number {
  color: #28a745;
}
body.index .today_stats .stats-wrap .stats .waiting .label {
  color: #ffc107;
}
body.index .today_stats .stats-wrap .stats .waiting .number {
  color: #ffc107;
}
body.index .today_stats .stats-wrap .stats .current-room .label {
  color: #17a2b8;
}
body.index .today_stats .stats-wrap .stats .current-room .number {
  color: #17a2b8;
}
body.index .today_stats .stats-wrap .stats .today-scheduled .label {
  color: #007bff;
}
body.index .today_stats .stats-wrap .stats .today-scheduled .number {
  color: #007bff;
}