@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;
}
@media (max-width: 767.98px) {
  ul.navbar-nav {
    left: 0 !important;
    justify-content: flex-end;
  }
}
[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("/assets/images/vv_001.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;
}
@media (max-width: 1024px) {
  [data-layout=horizontal] .navbar-menu {
    display: block !important;
  }
  [data-layout=horizontal] .menu-dropdown.collapse.show {
    display: unset;
  }
}
body .modal-container {
  min-height: 66vh;
}
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 .form-check {
  padding-left: 2.6rem;
}
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: block;
  width: 100%;
  min-height: 92vh;
}
body .main-content .left-menu {
  margin-top: 3.8rem !important;
  padding: 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
  width: 100%;
  background-color: #59666d;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
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 button.dp__btn.dp__button {
  display: none;
}
body .list-wrap {
  top: 1rem;
}
body .app-menu.navbar-menu {
  margin-top: 0 !important;
  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;
  position: relative;
  top: 0.5rem;
}
body .search-panel .search-wrap {
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.5rem;
}
body .search-panel .search-wrap > div.col-6 {
  position: relative;
  margin-top: -0.45rem;
}
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 .modal-extra.left-panel, body .modal-extra.right-panel {
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
body .modal-extra.left-panel .header, body .modal-extra.right-panel .header {
  padding: 0.5rem 1rem;
  background: #f7f7f7;
  border-bottom: 1px solid #e0e0e0;
}
body .modal-extra.left-panel .header .extra-title, body .modal-extra.right-panel .header .extra-title {
  font-size: 1.1rem;
  font-weight: bold;
  color: #333;
}
body .modal-extra.left-panel .header .btn-close, body .modal-extra.right-panel .header .btn-close {
  padding: 0;
  border: none;
  background: none;
  position: absolute;
  right: 1rem;
  top: 1rem;
  cursor: pointer;
}
body .modal-extra.left-panel .header .btn-close:hover, body .modal-extra.right-panel .header .btn-close:hover {
  color: #333;
}
body .modal-extra.left-panel .btn-box, body .modal-extra.right-panel .btn-box {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
}
body .modal-extra.left-panel .btn-box .form-control, body .modal-extra.right-panel .btn-box .form-control {
  flex: 1;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 0.4rem 0.6rem;
  color: #333;
}
body .modal-extra.left-panel .btn-box .btn, body .modal-extra.right-panel .btn-box .btn {
  padding: 0.3rem 0.8rem;
  font-size: 0.9rem;
  border-radius: 4px;
}
body .modal-extra.left-panel .btn-box .btn.btn-success, body .modal-extra.right-panel .btn-box .btn.btn-success {
  background-color: #60b7cc;
  border-color: #60b7cc;
  color: #fff;
}
body .modal-extra.left-panel .btn-box .btn.btn-success:hover, body .modal-extra.right-panel .btn-box .btn.btn-success:hover {
  background-color: #4da4b8;
}
body .modal-extra.left-panel .contents, body .modal-extra.right-panel .contents {
  margin-top: 0.5rem;
  padding: 0 1rem;
}
body .modal-extra.left-panel .contents .vue3-easy-data-table .vue3-easy-data-table__main, body .modal-extra.right-panel .contents .vue3-easy-data-table .vue3-easy-data-table__main {
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
}
body .modal-extra.left-panel .contents .vue3-easy-data-table .vue3-easy-data-table__main table, body .modal-extra.right-panel .contents .vue3-easy-data-table .vue3-easy-data-table__main table {
  width: 100%;
  border-collapse: collapse;
}
body .modal-extra.left-panel .contents .vue3-easy-data-table .vue3-easy-data-table__main table thead, body .modal-extra.right-panel .contents .vue3-easy-data-table .vue3-easy-data-table__main table thead {
  background-color: #f1f1f1;
}
body .modal-extra.left-panel .contents .vue3-easy-data-table .vue3-easy-data-table__main table thead th, body .modal-extra.right-panel .contents .vue3-easy-data-table .vue3-easy-data-table__main table thead th {
  font-weight: bold;
  color: #333;
  padding: 0;
  text-align: left;
  border-bottom: 1px solid #ddd;
}
body .modal-extra.left-panel .contents .vue3-easy-data-table .vue3-easy-data-table__main table thead th .header-text, body .modal-extra.right-panel .contents .vue3-easy-data-table .vue3-easy-data-table__main table thead th .header-text {
  font-size: 0.9rem;
}
body .modal-extra.left-panel .contents .vue3-easy-data-table .vue3-easy-data-table__main table tbody tr:nth-child(even), body .modal-extra.right-panel .contents .vue3-easy-data-table .vue3-easy-data-table__main table tbody tr:nth-child(even) {
  background-color: #fafafa;
}
body .modal-extra.left-panel .contents .vue3-easy-data-table .vue3-easy-data-table__main table tbody tr:hover, body .modal-extra.right-panel .contents .vue3-easy-data-table .vue3-easy-data-table__main table tbody tr:hover {
  background-color: #f0f8ff;
}
body .modal-extra.left-panel .contents .vue3-easy-data-table .vue3-easy-data-table__main table tbody tr td, body .modal-extra.right-panel .contents .vue3-easy-data-table .vue3-easy-data-table__main table tbody tr td {
  padding: 0.5rem;
  color: #666;
}
body .modal-extra.left-panel .contents .vue3-easy-data-table .vue3-easy-data-table__footer, body .modal-extra.right-panel .contents .vue3-easy-data-table .vue3-easy-data-table__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  font-size: 0.85rem;
  color: #333;
}
body .modal-extra.left-panel .contents .vue3-easy-data-table .vue3-easy-data-table__footer .pagination__items-index, body .modal-extra.right-panel .contents .vue3-easy-data-table .vue3-easy-data-table__footer .pagination__items-index {
  margin-left: 1rem;
}
body .modal-extra.left-panel .contents .vue3-easy-data-table .vue3-easy-data-table__footer .btn.btn-sm, body .modal-extra.right-panel .contents .vue3-easy-data-table .vue3-easy-data-table__footer .btn.btn-sm {
  padding: 0.2rem 0.5rem;
  font-size: 0.8rem;
}
body .modal-extra.left-panel .contents .vue3-easy-data-table .vue3-easy-data-table__footer .btn.btn-success, body .modal-extra.right-panel .contents .vue3-easy-data-table .vue3-easy-data-table__footer .btn.btn-success {
  background-color: #60b7cc;
  border-color: #60b7cc;
  color: #fff;
}
body .modal-extra.left-panel .contents .vue3-easy-data-table .vue3-easy-data-table__footer .btn.btn-success:hover, body .modal-extra.right-panel .contents .vue3-easy-data-table .vue3-easy-data-table__footer .btn.btn-success:hover {
  background-color: #4da4b8;
}
body .modal-extra.left-panel .contents .vue3-easy-data-table .vue3-easy-data-table__footer .btn.btn-success:disabled, body .modal-extra.right-panel .contents .vue3-easy-data-table .vue3-easy-data-table__footer .btn.btn-success:disabled {
  background-color: #e0e0e0;
  color: #999;
  cursor: not-allowed;
}
body.menus .separator {
  display: none;
}
body.menus .list-btn-wrap {
  display: none;
}
body.menus .list-wrap {
  top: 0;
}
body.menus .modal-container {
  width: 98vw;
  height: 98vh;
}
body.index div.group.pos-0 {
  display: grid;
  grid-template-columns: 3fr 4fr 5fr;
  grid-template-rows: auto auto auto;
  gap: 2rem;
  width: 80%;
  margin: 0 auto;
  padding: 2rem 0;
}
body.index div.group.pos-0 .today_rv, body.index div.group.pos-0 .popular_menu, body.index div.group.pos-0 .work_log {
  grid-column: 1;
}
body.index div.group.pos-0 .top_stat {
  grid-column: 2 / span 2;
}
body.index div.group.pos-0 .order_chart, body.index div.group.pos-0 .old_orders {
  grid-column: 2;
}
body.index div.group.pos-0 .reservations, body.index div.group.pos-0 .table_bell {
  grid-column: 3;
}
body.index div.group.pos-0 .total-revenue.rcard {
  position: relative;
  left: 2rem;
}
body.index .item.popular_menu, body.index .item.order_chart {
  align-items: flex-end;
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: space-between;
}
body.index .item.popular_menu > div, body.index .item.order_chart > div {
  width: 100%;
}
body.index .item.popular_menu .sub-title, body.index .item.order_chart .sub-title {
  margin-top: 1rem;
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 2rem;
  color: #333;
}
body.index .item.popular_menu canvas, body.index .item.order_chart canvas {
  width: 100%;
  height: 100%;
}
body.index .rcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  height: 100%;
  border-radius: 12px;
  border: 1px solid #fff;
  background: rgba(237, 241, 239, 0.2);
  /* background: #EDF1EF; */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
  max-width: 15rem;
}
body.index .rcard .indicator {
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #fd695d, rgba(226, 149, 118, 0.5));
  box-shadow: inset -4px -4px 6px rgba(255, 255, 255, 0.4), inset 4px 4px 6px rgba(0, 0, 0, 0.1), -3px -3px 2px rgba(255, 255, 255, 0.9);
}
body.index .rcard .indicator .val {
  font-size: 1.5rem;
  font-weight: bold;
  color: #fff;
}
body.index .rcard .caption {
  margin-top: 1rem;
}
body.index .rcard .caption .txt {
  font-size: 1.2rem;
  font-weight: 600;
  color: #333;
}
body.index ul.top-stat.rcard {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  max-width: unset;
  width: 100%;
  padding: 0 10%;
}
body.index ul.top-stat.rcard > li {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
body.index .item.today_rv, body.index .item.top_stat {
  min-height: 13rem;
}
body.index .rcard .order .indicator {
  background: linear-gradient(145deg, #666, rgba(0, 0, 0, 0.5));
}
body.index .rcard .reservation .indicator {
  background: linear-gradient(145deg, #f09c12, rgba(240, 156, 18, 0.5));
}
body.index .rcard .menu .indicator {
  background: linear-gradient(145deg, #fa564e, rgba(250, 86, 78, 0.7));
}
body.index .rcard .tables .indicator {
  background: linear-gradient(145deg, #a3ad8e, rgba(163, 173, 142, 0.7));
}
body.index .item.reservations, body.index .item.table_bell {
  background-color: #f9f9f9;
  color: #333;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
body.index .item.reservations li, body.index .item.table_bell li {
  margin-bottom: 0;
}
body.index .item.reservations ul > li:first-of-type, body.index .item.table_bell ul > li:first-of-type {
  margin-right: 1rem;
}
body.index .item.reservations .sub-title, body.index .item.table_bell .sub-title {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  text-align: center;
  font-weight: bold;
  color: #444;
}
body.index .item.reservations .tables-header, body.index .item.table_bell .tables-header {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
  font-weight: bold;
}
body.index .item.reservations .tables-header .hh, body.index .item.table_bell .tables-header .hh {
  flex: 0 0 4rem;
  text-align: center;
  font-size: 1rem;
  background-color: #cdb59d;
  border-radius: 4px;
  padding: 0.5rem;
  color: #fff;
}
body.index .item.reservations .tables-header .table, body.index .item.table_bell .tables-header .table {
  flex: 1;
  text-align: center;
  font-size: 0.9rem;
  color: #777;
}
body.index .item.reservations .reservation, body.index .item.table_bell .reservation {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}
body.index .item.reservations .reservation .hh, body.index .item.table_bell .reservation .hh {
  flex: 0 0 4rem;
  text-align: center;
  font-size: 1rem;
  font-weight: bold;
  background-color: #e0e0e0;
  border-radius: 4px;
  padding: 0.5rem;
  color: #555;
}
body.index .item.reservations .reservation .table, body.index .item.table_bell .reservation .table {
  flex: 1;
  text-align: center;
  position: relative;
}
body.index .item.reservations .reservation .table span, body.index .item.table_bell .reservation .table span {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 4px;
  transition: all 0.3s ease-in-out;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
body.index .item.reservations .reservation .table .on, body.index .item.table_bell .reservation .table .on {
  background-color: #ff8a65;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
body.index .item.reservations .reservation .table .off, body.index .item.table_bell .reservation .table .off {
  background-color: #d6d6d6;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
body.index .item.reservations .reservation:last-child, body.index .item.table_bell .reservation:last-child {
  margin-bottom: 0;
}
body.index .item.table_bell {
  background-color: #fdfdfd;
  color: #333;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
body.index .item.table_bell .sub-title {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  text-align: center;
  font-weight: bold;
  color: #444;
}
body.index .item.table_bell .table-bell {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  gap: 1rem;
}
body.index .item.table_bell .table-bell .bell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
  padding: 0.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-align: center;
  margin: 0 !important;
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
body.index .item.table_bell .table-bell .bell:hover {
  background-color: #e0e0e0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transform: scale(1.02);
}
body.index .item.table_bell .table-bell .bell .alias {
  font-size: 1rem;
  font-weight: bold;
  color: #fff;
  margin-bottom: 0;
  position: absolute;
}
body.index .item.table_bell .table-bell .bell .dot {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  margin: 0.75rem 0;
}
body.index .item.table_bell .table-bell .bell .dot.on {
  background-color: #4caf50;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
body.index .item.table_bell .table-bell .bell .dot.off {
  background-color: #d6d6d6;
}
body.index .item.table_bell .table-bell .bell .dt {
  font-size: 0.875rem;
  color: #888;
  position: absolute;
  margin-top: 3rem;
}
body.index .item.work_log {
  color: #333;
  padding: 1rem;
}
body.index .item.work_log .sub-title {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  font-weight: bold;
  color: #444;
}
body.index .item.work_log .work-log {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: 0.25rem;
  margin: 0;
}
body.index .item.work_log .work-log .work {
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  padding: 0.75rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
body.index .item.work_log .work-log .work .dot {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  margin-right: 0.75rem;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
body.index .item.work_log .work-log .work .dot.status-requested {
  background-color: #ffc107;
}
body.index .item.work_log .work-log .work .dot.status-made {
  background-color: #2196f3;
}
body.index .item.work_log .work-log .work .dot.status-started {
  background-color: #989898;
}
body.index .item.work_log .work-log .work .dot.status-cancelled {
  background-color: #f97363;
}
body.index .item.work_log .work-log .work .dot.status-delivered {
  background-color: #4caf50;
}
body.index .item.work_log .work-log .work .st-msg {
  font-size: 1rem;
  font-weight: bold;
  color: #333;
  margin-right: auto;
}
body.index .item.work_log .work-log .work .table-id {
  font-size: 0.875rem;
  color: #888;
  font-weight: bold;
}
body.index .item.old_orders .sub-title {
  margin-top: 1rem;
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 2rem;
  color: #333;
}
body.index .item.old_orders .watings {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
}
body.index .item.old_orders .watings .wating {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.5rem;
  margin: 0;
  position: relative;
  background-color: #f3f3f3;
  margin-bottom: 3rem;
  overflow: visible;
  border-radius: 1rem;
}
body.index .item.old_orders .watings .wating > div.marked {
  height: 20px;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  max-width: 100%;
}
body.index .item.old_orders .watings .wating > div.marked > span.waiting-min {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.25rem;
  color: #fff;
  font-weight: bold;
  white-space: nowrap;
}
body.index .item.old_orders .watings .wating:nth-child(1) {
  background-color: #f9e5e5;
}
body.index .item.old_orders .watings .wating:nth-child(1) > div.marked {
  background-color: #e53935;
}
body.index .item.old_orders .watings .wating:nth-child(2) {
  background-color: #fff3e0;
}
body.index .item.old_orders .watings .wating:nth-child(2) > div.marked {
  background-color: #f57c00;
}
body.index .item.old_orders .watings .wating:nth-child(3) {
  background-color: #e8f5e9;
}
body.index .item.old_orders .watings .wating:nth-child(3) > div.marked {
  background-color: #388e3c;
}
body.index .item.old_orders span.order-title {
  position: absolute;
  right: 0;
  top: 2.5rem;
}
body.index .item.old_orders span.created_at {
  position: absolute;
  top: 2.5rem;
  display: inline-flex;
  gap: 0.5rem;
}
body.config #app .tab-header {
  display: flex;
  justify-content: center;
}
body.config #app .support_lang-label-wrap.col-3 {
  width: 22.2%;
}
body.config #app .field-trans_info .bottom-wrap {
  display: flex;
  justify-content: space-between;
}
body.config #app .field-trans_info .bottom-wrap .btn-wrap {
  text-align: right;
}
body.config #app .field-adt_info > div {
  display: grid;
  grid-template-columns: 26% 62% 6%;
  gap: 2%;
}
body.config #app .field-adt_info > div select {
  width: 8rem;
}
body.config #app .field-adt_info > div .sel-weeks {
  display: flex;
  height: 2.5rem;
  gap: 1rem;
  align-items: center;
}
body.config #app .field-adt_info > div .sel-hours {
  display: flex;
  align-items: center;
}
body.config #app .field-adt_info > div .sel-hours .label {
  width: 6rem;
}
body.config #app .field-btn_ctl select {
  width: calc(100% - 5rem);
}
body.config #app .field-btn_ctl {
  display: flex;
  gap: 0.2rem;
}
body.config #app .field-btn_ctl > button {
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid #999;
  border-radius: 0.25rem;
}
body.config #app .working_hours-wrap .input-group.cb-wrap {
  gap: 7px;
}
body.config #app span.label.working_days-label, body.config #app span.label.working_hours-label {
  display: inline-flex;
  justify-content: space-between;
  width: 100%;
}
body.config #app span.label.working_days-label i, body.config #app span.label.working_hours-label i {
  cursor: pointer;
}
body.config #app .additional-info {
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background-color: #fff;
}
body.config #app .additional-info li {
  width: 100%;
  display: grid;
  grid-template-columns: 10% 10% 10% 60% 10%;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #e0e0e0;
}
body.config #app .additional-info li:last-child {
  border-bottom: none;
}
body.config #app .additional-info li span {
  font-size: 0.9rem;
  color: #333;
  margin-right: 0.5rem;
}
body.config #app .additional-info li span:nth-child(2) {
  font-weight: bold;
  color: #5bc0de;
}
body.config #app .additional-info li span:nth-child(4) {
  color: #666;
  font-family: monospace;
}
body.config #app .additional-info li .btn-del {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background-color: #ff4d4f;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  font-size: 1rem;
  transition: background-color 0.3s ease;
}
body.config #app .additional-info li .btn-del i {
  font-size: 1rem;
}
body.config #app .additional-info li .btn-del:hover {
  background-color: #d9363e;
}
body.config #app .additional-wrap {
  padding-top: 0.5rem;
  display: block !important;
}
body.config #app .group-tabs {
  display: flex;
  list-style: none;
  padding: 0;
  margin-top: 0.5rem;
  border-bottom: 2px solid #ddd;
  width: 1140px;
  margin-top: 2rem;
}
body.config #app .group-tabs .tab {
  position: relative;
  padding: 10px 20px;
  margin-right: 10px;
  background: #f5f5f5;
  color: #333;
  font-weight: bold;
  border: 2px solid transparent;
  border-bottom: none;
  border-radius: 5px 5px 0 0;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}
body.config #app .group-tabs .tab a {
  text-decoration: none;
  color: inherit;
}
body.config #app .group-tabs .tab:hover {
  background: #e0e0e0;
}
body.config #app .group-tabs .tab.active {
  background: #60b7cc;
  color: #fff;
  border-color: #60b7cc;
}
body.config #app button#btn_reset {
  max-width: 12rem;
  background: var(--vz-danger);
  border: 0;
}
body.config #app ul.tab-contents {
  margin-bottom: 0;
}
body.config #app .card-body.p-4 {
  padding-top: 0.5rem !important;
}
body.config #app .btn_submit-wrap.col-12, body.config #app .btn_submit2-wrap.col-12 {
  padding: 0;
  width: calc(100% - 0.75rem);
  margin-top: 1rem;
}
body.category div#group_1 {
  height: 28rem;
}
body.category .modal-footer div, body.menu .modal-footer div, body.config .modal-footer div {
  display: flex;
  gap: 0.5rem;
}
body.category .lang-header, body.category .word-list, body.menu .lang-header, body.menu .word-list, body.config .lang-header, body.config .word-list {
  display: grid;
  grid-template-columns: repeat(var(--cnt), 1fr);
  list-style: none;
}
body.category .lang-header .lang, body.category .word-list .lang, body.menu .lang-header .lang, body.menu .word-list .lang, body.config .lang-header .lang, body.config .word-list .lang {
  display: inline-block;
  text-align: center;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
}
body.category .lang-header .lang a, body.category .word-list .lang a, body.menu .lang-header .lang a, body.menu .word-list .lang a, body.config .lang-header .lang a, body.config .word-list .lang a {
  text-decoration: none;
  color: #333;
  font-weight: 500;
}
body.category .lang-header .lang.active, body.category .word-list .lang.active, body.menu .lang-header .lang.active, body.menu .word-list .lang.active, body.config .lang-header .lang.active, body.config .word-list .lang.active {
  background-color: #5bc0de;
  color: #fff;
  box-shadow: 0 0 10px rgba(91, 192, 222, 0.5);
  transform: scale(1.05);
}
body.category .lang-header .lang.active a, body.category .word-list .lang.active a, body.menu .lang-header .lang.active a, body.menu .word-list .lang.active a, body.config .lang-header .lang.active a, body.config .word-list .lang.active a {
  color: #fff;
  font-weight: 700;
}
body.category .lang-header .lang:hover, body.category .word-list .lang:hover, body.menu .lang-header .lang:hover, body.menu .word-list .lang:hover, body.config .lang-header .lang:hover, body.config .word-list .lang:hover {
  background-color: #ebf5fa;
  color: #333;
}
body.category .lang-header .lang:hover a, body.category .word-list .lang:hover a, body.menu .lang-header .lang:hover a, body.menu .word-list .lang:hover a, body.config .lang-header .lang:hover a, body.config .word-list .lang:hover a {
  color: #333;
}
body.category .word-list, body.menu .word-list, body.config .word-list {
  gap: 1px;
}
body.category .text-wrap ul li, body.menu .text-wrap ul li, body.config .text-wrap ul li {
  justify-content: center;
  align-items: center;
  display: inline-flex;
}
body.category .sel_langs, body.menu .sel_langs, body.config .sel_langs {
  position: absolute;
  left: 1rem;
  bottom: 0.75rem;
}
body.category .modal-lg.expand .ext-group, body.menu .modal-lg.expand .ext-group, body.config .modal-lg.expand .ext-group {
  max-height: 80vh;
}
body.menu td.thumb a {
  max-height: 9rem;
  overflow: hidden;
  display: block;
}
body.menu img.thumb-img {
  max-width: 10rem;
}
body.menu .card-body.group_4 {
  padding: 1rem 0 !important;
  height: 80vh;
}
body.menu .card-body.group_4 .ext-group {
  height: 77vh;
  max-height: 77vh;
  overflow-y: auto;
  overflow-x: hidden;
}
body.menu .card-body.group_4 .ext-group .option_info-wrap {
  height: 73vh;
}
body.menu .option_info-wrap {
  padding-right: 3rem;
}
body.menu .option_info-wrap .text-wrap .field-option_info {
  position: relative;
  min-height: 50vh;
}
body.menu .option_info-wrap .text-wrap .field-option_info > ul {
  display: grid;
  grid-template-columns: 25% 70%;
  gap: 5%;
}
body.menu .option_info-wrap .text-wrap .field-option_info ul {
  padding: 0;
  margin: 0;
  list-style: none;
  width: 100%;
  min-height: 4rem;
}
body.menu .option_info-wrap .text-wrap .field-option_info ul li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  width: 100%;
  padding-top: 1rem;
  position: relative;
}
body.menu .option_info-wrap .text-wrap .field-option_info ul li > span.label {
  position: absolute;
  top: 0;
  left: 1rem;
  color: #678;
}
body.menu .option_info-wrap .text-wrap .field-option_info ul li .price span.label {
  width: 4.5rem;
  font-size: smaller;
  display: inline-flex;
  justify-content: space-between;
}
body.menu .option_info-wrap .text-wrap .field-option_info ul li .price {
  display: flex;
  gap: 1rem;
  align-items: center;
}
body.menu .option_info-wrap .text-wrap .field-option_info ul li.option_name {
  align-items: flex-start;
  padding-top: 1.5rem;
  position: relative;
}
body.menu .option_info-wrap .text-wrap .field-option_info ul li.option_values {
  position: relative;
}
body.menu .option_info-wrap .text-wrap .field-option_info ul li.option_values ul {
  padding-left: 1.2rem;
  margin: 0;
  list-style: none;
}
body.menu .option_info-wrap .text-wrap .field-option_info ul li.option_values ul li {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
  font-size: 1rem;
}
body.menu .option_info-wrap .text-wrap .field-option_info ul li.option_values ul li.value {
  margin-bottom: 0;
  padding-top: 0.5rem;
}
body.menu .option_info-wrap .text-wrap .field-option_info ul li.option_values ul li .value {
  display: flex;
  align-items: center;
  margin-right: 1rem;
}
body.menu .option_info-wrap .text-wrap .field-option_info ul li.option_values ul li .value input[type="hidden"] {
  display: none;
}
body.menu .option_info-wrap .text-wrap .field-option_info ul li.option_values ul li .value .txt {
  margin-right: 0.5rem;
  font-size: 1rem;
  color: #555;
}
body.menu .option_info-wrap .text-wrap .field-option_info ul li.option_values ul li .value .price {
  color: #60b7cc;
  font-weight: bold;
}
body.menu .option_info-wrap .text-wrap .field-option_info .btn {
  width: 2rem;
  height: 2rem;
  padding: 0.2rem;
  font-size: 1.2rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
  right: -3rem;
  top: 0;
  position: absolute;
}
body.menu .option_info-wrap .text-wrap .field-option_info .btn.btn-opt-add {
  background-color: #60b7cc;
  border: none;
  color: white;
}
body.menu .option_info-wrap .text-wrap .field-option_info .btn.btn-opt-add:hover {
  background-color: #4b97b6;
}
body.menu .option_info-wrap .text-wrap .field-option_info .btn.btn-opt-del {
  margin-top: 2.5rem;
  background-color: gainsboro;
  border: none;
  color: white;
}
body.menu .option_info-wrap .text-wrap .field-option_info .btn.btn-opt-del:hover {
  background-color: gainsboro;
}
body.device.register button#submit_btn {
  margin-top: 5rem;
}
body.device.register .container-wrap .container.tab-container.active {
  display: block;
  margin-top: 5rem;
}
body.orders.overview.maxmode .group.pos-0 {
  z-index: 999;
  position: absolute;
  left: 0;
  top: 0;
  height: 100vh;
  background: #fff;
}
body.orders.overview.maxmode .left-menu {
  display: none;
}
body.orders.overview .inte_list > div {
  height: calc(100vh - 3rem);
}
body.orders.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;
  position: relative;
  top: 0.5rem;
}
body.orders.overview .status-prepare span.pt_name {
  animation: blink 4s infinite;
  color: #fff;
  font-weight: bold;
}
body.orders.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.orders.overview .top_pane > div.active {
  display: flex !important;
}
body.orders.overview .top_pane > div.fs {
  display: none !important;
}
body.orders.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.orders.overview .top_pane > div button:hover {
  background-color: #357ab9;
}
body.orders.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);
  grid-auto-rows: 3rem;
  grid-row-end: span 1;
  min-height: 88vh;
}
body.orders.overview .inte_list > div.fs {
  min-height: 100vh;
}
body.orders.overview .inte_list > div ul {
  break-inside: avoid;
  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);
  display: block;
}
body.orders.overview .inte_list > div ul.status-reserved {
  background-color: #FFBD9E;
}
body.orders.overview .inte_list > div ul.status-reserved.active {
  color: #FF6F00;
  text-shadow: 0 0 8px rgba(255, 140, 0, 0.6);
}
body.orders.overview .inte_list > div ul.status-reserved:hover {
  color: #5bc0de;
  text-shadow: 0 0 4px rgba(255, 140, 0, 0.6);
}
body.orders.overview .inte_list > div ul.status-reserved i.active {
  color: #FF6F00;
  text-shadow: 0 0 8px rgba(255, 140, 0, 0.6);
}
body.orders.overview .inte_list > div ul.status-reserved i:hover {
  color: #5bc0de;
  text-shadow: 0 0 4px rgba(255, 140, 0, 0.6);
}
body.orders.overview .inte_list > div ul.status-occupied {
  background-color: #6BEBC9;
}
body.orders.overview .inte_list > div ul.status-occupied.active {
  color: #00BCD4;
  text-shadow: 0 0 8px rgba(0, 188, 212, 0.6);
}
body.orders.overview .inte_list > div ul.status-occupied:hover {
  color: #00BCD4;
  text-shadow: 0 0 4px rgba(0, 188, 212, 0.6);
}
body.orders.overview .inte_list > div ul.status-occupied i.active {
  color: #00BCD4;
  text-shadow: 0 0 8px rgba(0, 188, 212, 0.6);
}
body.orders.overview .inte_list > div ul.status-occupied i:hover {
  color: #00BCD4;
  text-shadow: 0 0 4px rgba(0, 188, 212, 0.6);
}
body.orders.overview .inte_list > div ul.status-empty {
  background-color: #9BD1EF;
}
body.orders.overview .inte_list > div ul.status-empty.active {
  color: #2196F3;
  text-shadow: 0 0 8px rgba(33, 150, 243, 0.6);
}
body.orders.overview .inte_list > div ul.status-empty:hover {
  color: #2196F3;
  text-shadow: 0 0 4px rgba(33, 150, 243, 0.6);
}
body.orders.overview .inte_list > div ul.status-empty i.active {
  color: #2196F3;
  text-shadow: 0 0 8px rgba(33, 150, 243, 0.6);
}
body.orders.overview .inte_list > div ul.status-empty i:hover {
  color: #2196F3;
  text-shadow: 0 0 4px rgba(33, 150, 243, 0.6);
}
body.orders.overview .inte_list > div ul > li {
  padding: 0.8rem;
  color: #333;
}
body.orders.overview .inte_list > div ul > li .table_id, body.orders.overview .inte_list > div ul > li .room_name {
  font-weight: bold;
  font-size: 1.3rem;
  display: flex;
  justify-content: space-between;
}
body.orders.overview .inte_list > div ul > li .ic-wrap {
  display: flex;
  gap: 0.25rem;
}
body.orders.overview .inte_list > div ul > li .ic-wrap i {
  cursor: pointer;
}
body.orders.overview .inte_list > div ul > li .pt_name {
  font-size: 2.6rem;
}
body.orders.overview .inte_list > div ul > li.status-reserved {
  background-color: #FFBD9E;
  color: #fff;
}
body.orders.overview .inte_list > div ul > li.status-occupied {
  background-color: #6BEBC9;
  color: #fff;
}
body.orders.overview .inte_list > div ul > li.status-empty {
  background-color: #9BD1EF;
  color: #fff;
}
body.orders.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.orders.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.orders.overview .waiting_list ul:hover {
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}
body.orders.overview .waiting_list ul .mdi-account {
  font-size: 2rem;
  color: #4a90e2;
  margin-bottom: 0.5rem;
}
body.orders.overview .waiting_list ul .pt-name {
  font-size: 1rem;
  font-weight: bold;
  color: #333333;
}
body.orders.overview .orders-wrap {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  background-color: #f9f9f9;
  border-radius: 8px;
}
body.orders.overview .orders-wrap .orders {
  list-style: none;
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body.orders.overview .orders-wrap .orders.order-status-requested {
  box-shadow: 0 4px 8px rgba(255, 167, 38, 0.3);
  background-color: rgba(255, 245, 230, 0.25);
}
body.orders.overview .orders-wrap .orders.order-status-started {
  box-shadow: 0 4px 12px rgba(102, 187, 106, 0.3);
  background-color: rgba(232, 245, 233, 0.5);
}
body.orders.overview .orders-wrap .orders.order-status-made {
  box-shadow: 0 4px 12px rgba(66, 165, 245, 0.3);
  background-color: rgba(227, 242, 253, 0.7);
}
body.orders.overview .orders-wrap .orders:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
body.orders.overview .orders-wrap .orders .order-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #555;
}
body.orders.overview .orders-wrap .orders .order-info .created-at-wrap, body.orders.overview .orders-wrap .orders .order-info .order-status-wrap {
  display: flex;
  gap: 1rem;
  align-items: center;
}
body.orders.overview .orders-wrap .orders .order-info .created-at-wrap .ic-wrap, body.orders.overview .orders-wrap .orders .order-info .order-status-wrap .ic-wrap {
  display: flex;
  gap: 0.7rem;
}
body.orders.overview .orders-wrap .orders .order-info .created-at-wrap .ic-wrap i, body.orders.overview .orders-wrap .orders .order-info .order-status-wrap .ic-wrap i {
  cursor: pointer;
}
body.orders.overview .orders-wrap .orders .order-info .created-at-wrap .label, body.orders.overview .orders-wrap .orders .order-info .order-status-wrap .label {
  font-weight: bold;
  margin-right: 4px;
}
body.orders.overview .orders-wrap .orders .order-info .created-at-wrap .txt, body.orders.overview .orders-wrap .orders .order-info .order-status-wrap .txt {
  color: #333;
  min-width: 4rem;
}
body.orders.overview .orders-wrap .orders li.cards {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 0;
  border-bottom: 1px dashed #ddd;
}
body.orders.overview .orders-wrap .orders li.cards:last-of-type {
  border-bottom: none;
}
body.orders.overview .orders-wrap .orders li.cards div {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #333;
}
body.orders.overview .orders-wrap .orders li.cards div .name {
  font-weight: bold;
  font-size: 1.2rem;
  text-transform: capitalize;
}
body.orders.overview .orders-wrap .orders li.cards div .qty {
  display: inline-flex;
  align-items: center;
  background-color: #f0f0f0;
  padding: 5px 10px;
  border-radius: 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  font-size: 14px;
  font-weight: 600;
  color: #333;
  gap: 0.5rem;
}
body.orders.overview .orders-wrap .orders li.cards div .qty .label {
  background-color: #ff9800;
  color: #fff;
  font-size: 16px;
  width: 20px;
  height: 20px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  display: inline-block;
  position: relative;
}
body.orders.overview .orders-wrap .orders li.cards div .qty .label i {
  position: absolute;
  margin-top: -2px;
  margin-left: 2px;
}
body.orders.overview .orders-wrap .orders li.cards div .qty .number {
  font-size: 18px;
  font-weight: bold;
  color: #4caf50;
  display: inline-block;
  min-width: 20px;
  text-align: center;
}
body.orders.overview .orders-wrap .orders li.cards div .qty:hover {
  background-color: #e1e1e1;
  cursor: pointer;
}
body.orders.overview .orders-wrap .orders li.cards div .qty:hover .label {
  background-color: #ff5722;
}
body.orders.overview .orders-wrap .orders li.cards div .qty:hover .number {
  color: #388e3c;
}
body.orders.overview .orders-wrap .orders li.cards div .opt-memo {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}
body.orders.overview .orders-wrap .orders .total-amount-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  font-size: 16px;
  font-weight: bold;
  border-top: 1px solid #ddd;
}
body.orders.overview .orders-wrap .orders .total-amount-wrap .label {
  color: #555;
}
body.orders.overview .orders-wrap .orders .total-amount-wrap .txt {
  color: #e74c3c;
}
.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.orders.list .modal-container .ext-group {
  max-height: 85vh;
}
body.orders.list .sel-range-tab {
  right: -0.4rem;
  margin-top: 2.65rem;
}
body.orders.list .edit-btn-wrap .btn-add {
  display: none;
}
body.orders.list .order_detail-wrap {
  padding: 1rem;
  box-sizing: border-box;
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow-y: auto;
  height: 30vh;
  transform: scale(0.96);
}
body.orders.list .order_detail-wrap .text-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
}
body.orders.list .order_detail-wrap .text-wrap .field-order_detail ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
body.orders.list .order_detail-wrap .text-wrap .field-order_detail ul.cart-header {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr 1fr;
  background: #5bc0de;
  color: #fff;
  font-weight: bold;
  padding: 0.5rem;
  border-radius: 6px;
}
body.orders.list .order_detail-wrap .text-wrap .field-order_detail ul.cart-header li {
  text-align: center;
  padding: 0.25rem 0;
}
body.orders.list .order_detail-wrap .text-wrap .field-order_detail ul.cart-list {
  margin-top: 0.5rem;
}
body.orders.list .order_detail-wrap .text-wrap .field-order_detail ul.cart-list li {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr 1fr;
  padding: 0.5rem;
  border-bottom: 1px solid #eee;
}
body.orders.list .order_detail-wrap .text-wrap .field-order_detail ul.cart-list li:last-child {
  border-bottom: none;
}
body.orders.list .order_detail-wrap .text-wrap .field-order_detail ul.cart-list li .cart.menu_id {
  text-align: center;
  font-weight: bold;
  color: #333;
}
body.orders.list .order_detail-wrap .text-wrap .field-order_detail ul.cart-list li .cart.name {
  font-weight: normal;
  color: #555;
  display: flex;
  flex-direction: column;
}
body.orders.list .order_detail-wrap .text-wrap .field-order_detail ul.cart-list li .cart.order_amount {
  text-align: center;
  color: #5bc0de;
  font-weight: bold;
}
body.orders.list .order_detail-wrap .text-wrap .field-order_detail ul.cart-list li .cart.qty {
  text-align: center;
  font-weight: bold;
  color: #333;
}
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.new .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.reservation.new .autocomplete {
  position: relative;
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  z-index: 99;
}
body.reservation.new .autocomplete input {
  width: 100%;
  padding: 0.5rem;
}
body.reservation.new .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.reservation.new .autocomplete ul.tx-list li {
  max-height: 450px;
  display: grid;
  grid-template-columns: 20% 80%;
}
body.reservation.new .autocomplete ul li {
  padding: 0.5rem;
  cursor: pointer;
}
body.reservation.new .autocomplete ul li:hover {
  background-color: #f0f0f0;
}
body.reservation.new .field-chart_info .label, body.reservation.new .field-tx_info .label {
  align-items: center;
  display: flex;
  gap: 0.25rem;
}
body.reservation.new .field-chart_info .dx, body.reservation.new .field-tx_info .dx {
  display: flex;
  gap: 1rem;
}
body.reservation.new .field-chart_info .tx, body.reservation.new .field-tx_info .tx {
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
  gap: 1rem;
}
body.reservation.new .field-chart_info .tx select.form-select, body.reservation.new .field-tx_info .tx select.form-select {
  width: 10rem;
}
body.reservation.new .field-chart_info .tx .tx-info-wrap, body.reservation.new .field-tx_info .tx .tx-info-wrap {
  width: calc(100% - 7rem);
}
body.reservation.new .field-chart_info .tx .tx-info-wrap select, body.reservation.new .field-tx_info .tx .tx-info-wrap select {
  max-height: 2.7rem;
}
body.reservation.new .field-chart_info .tx .tx-wrap, body.reservation.new .field-tx_info .tx .tx-wrap {
  width: 100%;
}
body.reservation.new .field-chart_info .tx-info-wrap, body.reservation.new .field-tx_info .tx-info-wrap {
  display: flex;
  gap: 0.5rem;
}
body.reservation.new .field-chart_info .choice-wrap, body.reservation.new .field-tx_info .choice-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}
body.reservation.new .field-chart_info .choice-wrap span.badge, body.reservation.new .field-tx_info .choice-wrap span.badge {
  padding: 0.5rem;
  font-size: 1em;
}
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 {
  margin-left: 0.75rem;
  cursor: pointer;
}
body.reservation.new .field-chart_info > div > *:first-child, body.reservation.new .field-tx_info > div > *:first-child {
  background-color: #f0f0f0;
  border-radius: 4px;
  padding: 1rem;
}
body.reservation.new ul.more-wrap {
  display: grid;
  grid-template-columns: 30% 68%;
  row-gap: 0.5rem;
  margin-top: 1rem;
  column-gap: 2%;
}
body.reservation.new 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.reservation.new ul.more-wrap li.opt span.tit {
  min-width: 3.3rem;
}
body.reservation.new ul.more-wrap li.opt input {
  width: 3rem;
  padding: 0.25rem;
  font-size: 14px;
  text-align: center;
  background-color: #fff;
}
body.reservation.new ul.more-wrap li.opt input.price {
  width: 10rem;
}
body.reservation.new ul.more-wrap li.opt select {
  width: 10rem;
  padding: 0.25rem;
  font-size: 14px;
  background-color: #fff;
}
body.reservation.new ul.more-wrap li.opt select.daily {
  width: 6rem;
}
body.reservation.new 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.reservation.new ul.more-wrap span.tit.exp {
  width: 13rem;
  display: flex;
  justify-content: space-between;
  font-weight: bold;
  color: #333;
}
body.reservation.new ul.more-wrap span.tit.ev {
  width: 20rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  color: #333;
}
body.reservation.new ul.more-wrap .currency, body.reservation.new ul.more-wrap .number {
  font-size: 14px;
  color: #666;
}
body.reservation.new .tx-more {
  margin-top: 1rem;
}
body.reservation.new #group_1 .field-tx_info .tx-info-wrap {
  width: 100%;
}
body.reservation.new.maxmode .left-menu {
  visibility: hidden;
}
body.reservation.new.maxmode .navbar-menu {
  display: none;
}
body.reservation.new.maxmode .header-title {
  left: -3rem;
}
body.reservation.new.maxmode .container-wrap {
  z-index: 999;
  position: absolute;
  left: 0;
  top: 10rem;
  height: calc(100vh-10rem);
  width: 100vw;
  background: #fff;
}
body.reservation.new .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.reservation.new .field-wrap {
  padding: 1.5% 0;
  border-bottom: 0.1rem solid #e6e6e6;
  display: flex;
  align-items: center;
}
body.reservation.new .field-wrap .label {
  color: #555;
  font-size: 95%;
  font-weight: 500;
  flex-shrink: 0;
}
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 {
  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.reservation.new .field-wrap input:focus, body.reservation.new .field-wrap select:focus, body.reservation.new .field-wrap textarea:focus {
  border-color: #b3b3b3;
  box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.05);
}
body.reservation.new .ext-group {
  display: flex;
  gap: 4%;
  flex-wrap: wrap;
}
body.reservation.new .ext-group .field-wrap {
  flex: 1 1 auto;
}
body.reservation.new .radio-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
body.reservation.new .radio-wrap .opt-wrap label {
  padding-left: 1rem;
}
body.reservation.new .btn-overlay {
  position: absolute;
  right: 0;
}
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.revenue .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.revenue 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.revenue .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.revenue .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.revenue .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.revenue .vertical-slider-container .vertical-slider::-webkit-slider-thumb, body.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.table-tab .tabs, body.reservation.calendar .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.room-tab .tabs, body.revenue .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.table-tab .tabs, body.revenue .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.table-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.table-tab .tabs .badge, body.reservation.calendar .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.room-tab .tabs .badge, body.revenue .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.table-tab .tabs .badge, body.revenue .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.table-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.table-tab .tabs .badge.off, 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.revenue .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.table-tab .tabs .badge.off, body.revenue .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.table-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.table-tab .tabs .badge.red, 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.revenue .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.table-tab .tabs .badge.red, body.revenue .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.table-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.table-tab .tabs .badge.red:hover, 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.revenue .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.table-tab .tabs .badge.red:hover, body.revenue .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.table-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.table-tab .tabs .badge.blue, 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.revenue .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.table-tab .tabs .badge.blue, body.revenue .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.table-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.table-tab .tabs .badge.blue:hover, 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.revenue .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.table-tab .tabs .badge.blue:hover, body.revenue .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.table-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.table-tab .tabs .badge.green, 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.revenue .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.table-tab .tabs .badge.green, body.revenue .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.table-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.table-tab .tabs .badge.green:hover, 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.revenue .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.table-tab .tabs .badge.green:hover, body.revenue .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.table-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.table-tab .tabs .badge.pink, 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.revenue .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.table-tab .tabs .badge.pink, body.revenue .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.table-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.table-tab .tabs .badge.pink:hover, 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.revenue .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.table-tab .tabs .badge.pink:hover, body.revenue .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.table-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.table-tab .tabs .badge.yellow, 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.revenue .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.table-tab .tabs .badge.yellow, body.revenue .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.table-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.table-tab .tabs .badge.yellow:hover, 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.revenue .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.table-tab .tabs .badge.yellow:hover, body.revenue .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.table-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.table-tab .tabs .badge.orange, 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.revenue .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.table-tab .tabs .badge.orange, body.revenue .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.table-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.table-tab .tabs .badge.orange:hover, 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.revenue .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.table-tab .tabs .badge.orange:hover, body.revenue .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.table-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.table-tab .tabs .badge.purple, 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.revenue .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.table-tab .tabs .badge.purple, body.revenue .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.table-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.table-tab .tabs .badge.purple:hover, 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.revenue .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.table-tab .tabs .badge.purple:hover, body.revenue .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.table-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.table-tab .tabs .badge.teal, 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.revenue .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.table-tab .tabs .badge.teal, body.revenue .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.table-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.table-tab .tabs .badge.teal:hover, 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.revenue .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.table-tab .tabs .badge.teal:hover, body.revenue .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.table-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.table-tab .tabs .badge.coral, 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.revenue .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.table-tab .tabs .badge.coral, body.revenue .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.table-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.table-tab .tabs .badge.coral:hover, 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.revenue .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.table-tab .tabs .badge.coral:hover, body.revenue .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.table-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.table-tab .tabs .badge.magenta, 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.revenue .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.table-tab .tabs .badge.magenta, body.revenue .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.table-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.table-tab .tabs .badge.magenta:hover, 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.revenue .container-wrap > form #group_1 .field-wrap .tool_box-wrap .text-wrap .field-tool_box > div.table-tab .tabs .badge.magenta:hover, body.revenue .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.table-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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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_1 .st-mon, body.revenue .container-wrap > form #group_1 .st-mon, body.staff.vacation .container-wrap > form #group_1 .st-mon {
  list-style: none;
  padding: 0;
  margin: 0;
}
body.reservation.calendar .container-wrap > form #group_1 .st-mon .mon, body.revenue .container-wrap > form #group_1 .st-mon .mon, body.staff.vacation .container-wrap > form #group_1 .st-mon .mon {
  display: grid;
  grid-template-columns: 2fr 3fr 3fr;
  padding: 6px 10px;
  background-color: #f7f7f7;
  margin-bottom: 1px;
  font-size: 13px;
  align-items: center;
  transition: background-color 0.3s ease;
}
body.reservation.calendar .container-wrap > form #group_1 .st-mon .mon span, body.revenue .container-wrap > form #group_1 .st-mon .mon span, body.staff.vacation .container-wrap > form #group_1 .st-mon .mon span {
  width: 100%;
  text-align: right;
}
body.reservation.calendar .container-wrap > form #group_1 .st-mon .mon span.ym, body.revenue .container-wrap > form #group_1 .st-mon .mon span.ym, body.staff.vacation .container-wrap > form #group_1 .st-mon .mon span.ym {
  text-align: left;
}
body.reservation.calendar .container-wrap > form #group_1 .st-mon .mon:first-child, body.revenue .container-wrap > form #group_1 .st-mon .mon:first-child, body.staff.vacation .container-wrap > form #group_1 .st-mon .mon:first-child {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
body.reservation.calendar .container-wrap > form #group_1 .st-mon .mon:last-child, body.revenue .container-wrap > form #group_1 .st-mon .mon:last-child, body.staff.vacation .container-wrap > form #group_1 .st-mon .mon:last-child {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
body.reservation.calendar .container-wrap > form #group_1 .st-mon .mon:hover, body.revenue .container-wrap > form #group_1 .st-mon .mon:hover, body.staff.vacation .container-wrap > form #group_1 .st-mon .mon:hover {
  background-color: #f0f0f0;
}
body.reservation.calendar .container-wrap > form #group_1 .st-mon .mon .ym, body.revenue .container-wrap > form #group_1 .st-mon .mon .ym, body.staff.vacation .container-wrap > form #group_1 .st-mon .mon .ym {
  font-weight: 500;
}
body.reservation.calendar .container-wrap > form #group_1 .st-mon .mon.active, body.revenue .container-wrap > form #group_1 .st-mon .mon.active, body.staff.vacation .container-wrap > form #group_1 .st-mon .mon.active {
  background-color: #60b7cc;
  color: white;
  font-weight: 600;
}
body.reservation.calendar .container-wrap > form #group_2, body.revenue .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.revenue .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.revenue .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 div.total, body.revenue .container-wrap > form #group_2 .cal-wrap.record.schedule div.total, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.record.schedule div.total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-family: Tahoma, sans-serif;
  font-size: 0.9rem;
  margin-top: 0.75rem;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.record.schedule div.total .label, body.revenue .container-wrap > form #group_2 .cal-wrap.record.schedule div.total .label, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.record.schedule div.total .label {
  font-weight: bold;
  color: #333;
  margin-right: 0.5rem;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.record.schedule div.total .val, body.revenue .container-wrap > form #group_2 .cal-wrap.record.schedule div.total .val, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.record.schedule div.total .val {
  font-weight: bold;
  color: #60b7cc;
  font-size: 1rem;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.record.schedule div.total i.mdi, body.revenue .container-wrap > form #group_2 .cal-wrap.record.schedule div.total i.mdi, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.record.schedule div.total i.mdi {
  color: #888;
  font-size: 1rem;
  margin-left: 0.5rem;
  transition: transform 0.3s ease;
  cursor: pointer;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.record.schedule div.total i.mdi.mdi-chevron-double-down:hover, body.revenue .container-wrap > form #group_2 .cal-wrap.record.schedule div.total i.mdi.mdi-chevron-double-down:hover, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.record.schedule div.total i.mdi.mdi-chevron-double-down:hover {
  transform: translateY(2px);
  color: #60b7cc;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.record.schedule li .items, body.revenue .container-wrap > form #group_2 .cal-wrap.record.schedule li .items, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.record.schedule li .items {
  display: none;
  margin-top: 0.5rem;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.record.schedule li .items.active, body.revenue .container-wrap > form #group_2 .cal-wrap.record.schedule li .items.active, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.record.schedule li .items.active {
  display: block;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.record.schedule li .items.active li.item, body.revenue .container-wrap > form #group_2 .cal-wrap.record.schedule li .items.active li.item, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.record.schedule li .items.active li.item {
  padding: 0.25rem;
  display: grid;
  grid-template-columns: 12px 2.5rem calc(100% - 3rem);
  align-items: center;
  border: 0;
  border-bottom: 1px dashed #ccc;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.record.schedule li .items.active li.item:hover, body.revenue .container-wrap > form #group_2 .cal-wrap.record.schedule li .items.active li.item:hover, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.record.schedule li .items.active li.item:hover {
  background-color: #f6f6f6;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.record.schedule li .items.active li.item .dot, body.revenue .container-wrap > form #group_2 .cal-wrap.record.schedule li .items.active li.item .dot, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.record.schedule li .items.active li.item .dot {
  width: 6px;
  height: 6px;
  background-color: #60b7cc;
  border-radius: 50%;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.record.schedule li .items.active li.item .sum_price, body.revenue .container-wrap > form #group_2 .cal-wrap.record.schedule li .items.active li.item .sum_price, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.record.schedule li .items.active li.item .sum_price {
  font-size: 0.95rem;
  font-weight: 500;
  color: #333;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.record.schedule li .items.active li.item .menu_name, body.revenue .container-wrap > form #group_2 .cal-wrap.record.schedule li .items.active li.item .menu_name, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.record.schedule li .items.active li.item .menu_name {
  font-size: 0.9rem;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.record.schedule li .records, body.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record span.name, body.revenue .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record span.reason, body.revenue .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record span.duration, body.revenue .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.revenue .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.is_first span.name, body.revenue .container-wrap > form #group_2 .cal-wrap.record.schedule li .records .record.is_first span.reason, body.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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: " d" !important;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.timeline, body.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.timeline.schedule ul.records li span.mark .k_1, body.revenue .container-wrap > form #group_2 .cal-wrap.timeline.schedule ul.records li span.mark .k_1, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.timeline.schedule ul.records li span.mark .k_1 {
  color: #ff5733;
  font-size: 0.7rem;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.timeline.schedule ul.records li span.mark .k_2, body.revenue .container-wrap > form #group_2 .cal-wrap.timeline.schedule ul.records li span.mark .k_2, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.timeline.schedule ul.records li span.mark .k_2 {
  color: #ff5733;
  font-size: 0.8rem;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.timeline.schedule ul.records li span.mark .k_3, body.revenue .container-wrap > form #group_2 .cal-wrap.timeline.schedule ul.records li span.mark .k_3, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.timeline.schedule ul.records li span.mark .k_3 {
  color: #ff5733;
  font-size: 0.9rem;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.timeline.schedule ul.records li span.mark .m_1, body.revenue .container-wrap > form #group_2 .cal-wrap.timeline.schedule ul.records li span.mark .m_1, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.timeline.schedule ul.records li span.mark .m_1 {
  color: #33c1ff;
  font-size: 0.7rem;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.timeline.schedule ul.records li span.mark .m_2, body.revenue .container-wrap > form #group_2 .cal-wrap.timeline.schedule ul.records li span.mark .m_2, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.timeline.schedule ul.records li span.mark .m_2 {
  color: #33c1ff;
  font-size: 0.8rem;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.timeline.schedule ul.records li span.mark .m_3, body.revenue .container-wrap > form #group_2 .cal-wrap.timeline.schedule ul.records li span.mark .m_3, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.timeline.schedule ul.records li span.mark .m_3 {
  color: #33c1ff;
  font-size: 0.9rem;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.timeline.schedule ul.records li span.mark .g_1, body.revenue .container-wrap > form #group_2 .cal-wrap.timeline.schedule ul.records li span.mark .g_1, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.timeline.schedule ul.records li span.mark .g_1 {
  color: #9b33ff;
  font-size: 0.7rem;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.timeline.schedule ul.records li span.mark .g_2, body.revenue .container-wrap > form #group_2 .cal-wrap.timeline.schedule ul.records li span.mark .g_2, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.timeline.schedule ul.records li span.mark .g_2 {
  color: #9b33ff;
  font-size: 0.8rem;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.timeline.schedule ul.records li span.mark .g_3, body.revenue .container-wrap > form #group_2 .cal-wrap.timeline.schedule ul.records li span.mark .g_3, body.staff.vacation .container-wrap > form #group_2 .cal-wrap.timeline.schedule ul.records li span.mark .g_3 {
  color: #9b33ff;
  font-size: 0.9rem;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.timeline.schedule ul.records li span.mark.active, body.revenue .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.reservation.calendar .container-wrap > form #group_2 .cal-wrap.timeline.schedule ul.menus, body.revenue .container-wrap > form #group_2 .cal-wrap.timeline.schedule ul.user-ids, body.revenue .container-wrap > form #group_2 .cal-wrap.timeline.schedule ul.menus, body.staff.vacation .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.menus {
  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.reservation.calendar .container-wrap > form #group_2 .cal-wrap.timeline.schedule ul.menus li, body.revenue .container-wrap > form #group_2 .cal-wrap.timeline.schedule ul.user-ids li, body.revenue .container-wrap > form #group_2 .cal-wrap.timeline.schedule ul.menus li, body.staff.vacation .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.menus li {
  margin-left: -10rem;
  border: 0;
  height: 2.4rem;
  margin-top: 0.1rem;
  background: rgba(225, 155, 55, 0.5);
  box-shadow: var(--vz-box-shadow-lg);
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.timeline.schedule ul.user-ids span.name, body.reservation.calendar .container-wrap > form #group_2 .cal-wrap.timeline.schedule ul.menus span.name, body.revenue .container-wrap > form #group_2 .cal-wrap.timeline.schedule ul.user-ids span.name, body.revenue .container-wrap > form #group_2 .cal-wrap.timeline.schedule ul.menus span.name, body.staff.vacation .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.menus span.name {
  width: 10rem;
  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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .container-wrap > form #group_2 .cal-wrap.timeline li .timeline-wrap .date-wrap .month, body.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .container-wrap > form #group_2 .cal-wrap.record > li.n4 .timeline-wrap, body.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .container-wrap > form #group_2 .cal-wrap li .records .record .minute, body.revenue .container-wrap > form #group_2 .cal-wrap li .records .record .duration, body.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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;
  white-space: nowrap;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.timelines li.timeline .time-mark .h, body.revenue .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;
  white-space: nowrap;
}
body.reservation.calendar .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.timelines li.timeline .time-mark .m, body.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .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.revenue .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .info .name, body.revenue .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .info .reason, body.revenue .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.revenue .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .info .name i, body.revenue .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .info .reason i, body.revenue .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.revenue .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .info .name .val, body.revenue .container-wrap > form #group_2 .cal-wrap li .timeline-wrap ul.cases li.case .info .reason .val, body.revenue .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;
}
@media (max-width: 767px) {
  .menu-dropdown.show {
    display: block;
  }
}