#loader.loading {
      border: 1px solid #DBDBDB;
      padding-top: 1px;
      padding-left: 4px;
      padding-bottom: 4px;
      width: 651px;
      background-color: #FFE3E3;
      /*+border-radius: 9px;*/
      -moz-border-radius: 9px;
      -webkit-border-radius: 9px;
      -khtml-border-radius: 9px;
      border-radius: 9px;
      margin-top: 5px;
      margin-left: 30px;
      position: absolute;
      z-index: 100;
}

div#message.message {
      padding-top: 1px;
      padding-left: 4px;
      padding-bottom: 4px;
      width: 651px;
      /*+border-radius: 9px;*/
      -moz-border-radius: 9px;
      -webkit-border-radius: 9px;
      -khtml-border-radius: 9px;
      border-radius: 9px;
      position: relative;
      z-index: 100;
      margin-left: 47px;
      margin-top: 9px;
}

.xmodal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      justify-content: center;
      align-items: center;
      z-index: 10000000;
}

.toast-notification {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      padding: 12px 20px;
      border-radius: 8px;
      color: white;
      font-size: 1rem;
      font-weight: 500;
      z-index: 9999;
      opacity: 1;
      transition: opacity 0.5s ease-in-out;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.toast-notification.success {
      background-color: #4CAF50;
      /* Hijau */
}

.toast-notification.error {
      background-color: #F44336;
      /* Merah */
}

.xmodal-content {
      background-color: white;
      padding: 20px;
      border-radius: 8px;
      width: 90%;
      max-width: 400px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.xmodal-content h2 {
      margin-top: 0;
      font-size: 24px;
      color: #333;
}

.xmodal-content label {
      display: block;
      margin: 10px 0 5px;
      font-weight: bold;
}

.xmodal-content input {
      width: 100%;
      padding: 8px;
      margin-bottom: 15px;
      border: 1px solid #CCC;
      border-radius: 4px;
      box-sizing: border-box;
}

.xmodal-content button {
      background-color: #4CAF50;
      color: white;
      padding: 10px 15px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      width: 100%;
      font-size: 16px;
}

.xmodal-content button:hover {
      background-color: #45A049;
}

.xerror {
      color: red;
      font-size: 14px;
      margin-bottom: 10px;
      display: none;
}

message {
      border: 1px solid #DBDBDB;
      padding-top: 1px;
      padding-left: 4px;
      padding-bottom: 4px;
      width: 651px;
      background-color: #FFE3E3;
      /*+border-radius: 9px;*/
      -moz-border-radius: 9px;
      -webkit-border-radius: 9px;
      -khtml-border-radius: 9px;
      border-radius: 9px;
      margin-top: 5px;
      margin-left: 6px;
      position: absolute;
      z-index: 100;
}

span.subtotali {
      position: relative;
      /*+placement: 1px -136px;*/
      position: relative;
      left: 1px;
      top: -136px;
      padding-top: 0;
}

@media screen and (max-width: 1524px) {
      /* Jika lebar layar kurang dari atau sama dengan 1920px */
}

.login-container {
      z-index: 20000;
}

.overlaya {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 19000;
      display: none;
}

div#overadmin {
      display: block;
}

.otor {
      font-size: 20px;
      text-align: center;
      margin-bottom: 54px;
      color: #C1C1C1;
}

#overadmin.overlay {
}

.login-container {
      max-width: 40%;
      width: 32%;
      max-height: 400px;
      height: auto;
      background-color: #FFF;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 20px;
      margin-left: 701px;
}

.gray {
      background-color: #F0F0F0;
      /* abu-abu */
}

.dark-gray {
      background-color: #707070;
      /* abu tua */
}

.login-container h1 {
      text-align: center;
      margin-bottom: 20px;
}

.login-container form {
      display: flex;
      flex-direction: column;
}

.login-container label {
      font-size: 16px;
      margin-bottom: 5px;
}

.login-container input {
      padding: 10px;
      margin-bottom: 15px;
      border-radius: 5px;
      border: 1px solid #CCC;
}

.login-container button {
      padding: 10px;
      background-color: #007BFF;
      color: #FFF;
      border: none;
      border-radius: 5px;
      cursor: pointer;
}

.login-container button:hover {
      background-color: #0056B3;
}

div.message.error {
      height: ;
}

div.cart-sides {
      width: 35%;
      height: 94%;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      position: fixed;
      margin-top: 33px;
}

HTMLx {
      background-color: #E1E0E0;
      position: static;
      overflow: hidden;
      width: 100%;
      height: 100%;
}

select.bhs {
      /*+placement: 856px -1px;*/
      position: relative;
      left: 856px;
      top: -1px;
}

.subtotal {
      font-weight: bold;
      font-size: 14px;
}

.coverl {
      display: grid;
      /*+placement: 0.5px -34px;*/
      position: relative;
      left: 0.5px;
      top: -34px;
}

.guedtl {
      /*+placement: 0.5px -34px;*/
      position: relative;
      left: 0.5px;
      top: -34px;
}

.meja {
      font-size: 41px;
      position: relative;
      /*+placement: 46.5px -26px;*/
      position: relative;
      left: 46.5px;
      top: -26px;
}

.lantai {
      width: 7%;
      display: flex;
      flex-wrap: nowrap;
      flex-direction: column;
      position: absolute;
      z-index: 12000;
      height: 100%;
      right: 0px;
      margin-right: 7px;
      margin-top: 7px;
      z-index: 1000;
}

.buttonl {
      width: 94%;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      background-color: #913B9D;
      margin-left: 3px;
      font-size: 16px;
      /*+border-radius: 5px;*/
      -khtml-border-radius: 5px;
      border-radius: 5px;
      height: 78px;
      line-height: 1;
      margin-top: 3px;
      color: #FFFFFF;
}

.Map {
      width: 100%;
      position: absolute;
      background-color: #7D307D;
      z-index: 11000;
      height: 100%;
      display: flex;
      top: 0;
      left: 0;
}

.Fungsi {
      width: 65%;
      position: absolute;
      z-index: 100;
      background-color: #DDDDDD;
      height: 100%;
      display: none;
      left: 35%;
      top: 6%;
      height: 94%;
}

.buttonm {
      width: 9%;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      background-color: #CDACD2;
      margin-right: -1px;
      margin-left: 3px;
      font-size: 35px;
      /*+border-radius: 5px;*/
      -khtml-border-radius: 5px;
      border-radius: 5px;
      height: 78px;
      line-height: 0.4;
}

.buttonl.selected-lantai {
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      background-color: #51045C;
      margin-right: -1px;
      margin-left: 3px;
      font-size: 16px;
      /*+border-radius: 5px;*/
      -khtml-border-radius: 5px;
      border-radius: 5px;
      height: 78px;
      color: #FBFBFB;
}

.kotak {
      cursor: pointer;
      user-select: none;
      justify-content: center;
      align-items: center;
      text-align: center;
      position: absolute;
      z-index: 1100;
      font-size: 17px;
      line-height: 1.8;
      color: #FFFFFF;
      z-index: 1001;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
}

div.kotak img {
      padding-top: 0px;
      margin-top: 0;
      /*+placement: 16px -96px;*/
      position: relative;
      left: 16px;
      top: -96px;
}

.bayar {
      cursor: pointer;
      justify-content: center;
      align-items: center;
      text-align: center;
      z-index: 1100;
      font-size: 17px;
      line-height: 1;
      color: #E33232;
      z-index: 10000;
      /*+box-shadow: 6px 7px 12px #525252;*/
      -webkit-box-shadow: 6px 7px 12px #525252;
      box-shadow: 4px 8px 7px #525252;
      padding-top: 13px;
      padding-bottom: 7px;
      padding-left: 7px;
      padding-right: 12px;
      border: 1px solid #B3B3B3;
}

.bayar span {
      color: #FFFFFF;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      line-height: 0;
      font-size: 11px;
}

.bayar img {
      /*+placement: 3px -36px;*/
      position: relative;
      left: 3px;
      top: -36px;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      width: 73px;
      padding-top: 15px;
}

span.gt {
      font-size: 14px;
      /*+placement: -2px -16px;*/
      position: relative;
      left: -2px;
      top: -16px;
      text-align: center;
      line-height: ;
}

#pmenu {
      display: inline-block;
      width: 110px;
      font-size: 13px;
      padding: 3px;
}

#wmenu {
      display: inline-block;
      width: 126px;
      font-size: 13px;
      padding: 3px;
}

input {
      margin-top: 5px;
      padding-top: 0;
      padding-bottom: 2px;
}

.context-menu input {
      margin-bottom: 0;
}

.context-menu #addmy input {
      position: relative;
      font-size: 15px;
}

.context-menu {
      position: absolute;
      flex-wrap: nowrap;
      flex-direction: column;
      background-color: white;
      border: 1px solid #CCC;
      padding: 4px 4px 4px 5px;
      box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
      z-index: 20000;
      display: block;
      margin-left: 4px;
      width: 337px;
      height: 551px;
      margin-top: -108px;
      /*+border-radius: 7px;*/
      -moz-border-radius: 7px;
      -webkit-border-radius: 7px;
      -khtml-border-radius: 7px;
      border-radius: 7px;
}

#addmy #ftipe.fname {
      margin-left: 22px;
}

div#addm {
      width: 216px;
      height: 45px;
      margin-top: 5px;
      margin-bottom: 5px;
      border-top: 1px solid #DBDBDB;
      border-bottom: 1px solid #B6B3B3;
      padding-bottom: 0px;
      padding-top: 3px;
}

 {
      width: 284px;
      height: 99px;
      border: 1px solid #C7C7C7;
      margin-top: 4px;
      margin-bottom: 7px;
      margin-left: 2px;
      padding-left: 10px;
}
div#addmy {
      width: 285px;
      height: 307px;
      border: 1px solid #C7C7C7;
      margin-top: 4px;
      margin-bottom: 7px;
      margin-left: 2px;
      padding-left: 10px;
}

input#fname {
      width: 81px;
      margin-right: 7px;
}

div.qty-sides {
      width: 7.5%;
      height: 83.5%;
      display: flex;
      flex-direction: column;
      padding-left: 0px;
      padding-right: 0px;
      left: 35%;
      flex-direction: column;
      position: fixed;
      text-align: center;
      top: 5%;
      gap: 2px;
      background-color: ;
      margin-top: 11px;
}

div#addmx input {
      height: 20px;
      width: 103.5px;
      margin-right: 4px;
}

div.qty {
      width: 86%;
      justify-content: center;
      align-items: center;
      text-align: center;
      cursor: pointer;
      height: 11%;
      background-color: #ECB87D;
      padding-top: 9px;
      /*+border-radius: 6px;*/
      -webkit-border-radius: 6px;
      -khtml-border-radius: 6px;
      font-size: 23px;
      color: #FFFFFF;
      margin-left: 4px;
}

div.fungsi-sides {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      margin-top: 1px;
      overflow: visible;
      width: 100%;
      height: 8%;
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      /* Memastikan kontainer mengisi lebar */
      margin-bottom: 11px;
}

.info {
      position: absolute;
      display: grid;
      top: 80%;
      left: 2%;
      z-index: 10;
      width: 219px;
      height: 50px;
      margin-top: -7px;
}

.NamaMeja {
      font-size: 26px;
      position: relative;
      font-weight: bold;
      /*+placement: ;*/
      position: relative;
      left: 0;
      top: 0;
}

div.fungsi {
      width: 31%;
      color: #FFFFFF;
      /*+border-radius: 7px;*/
      -webkit-border-radius: 7px;
      -khtml-border-radius: 7px;
      border-radius: 7px;
      text-align: center;
      margin-top: 5px;
      font-size: 15px;
      margin-right: 4px;
      height: 35px;
      /*+border-radius: 5px;*/
      -khtml-border-radius: 5px;
      border-radius: 5px;
      text-align: center;
      padding-top: 9px;
      /*+box-shadow: 0 0;*/
      -webkit-box-shadow: 0 0;
      box-shadow: 0 0;
      background-color: #C5929F;
      border: 1px solid black;
}

div.fungsi2-sides {
      display: inline-flex;
      width: 64.6vw;
      background-color: #D8D8D8;
      position: fixed;
      bottom: -2%;
      left: 36%;
      height: 11%;
      margin-top: 0;
}

div.note {
      color: #FFFFFF;
      /*+border-radius: 7px;*/
      border-radius: 7px;
      -webkit-border-radius: 7px;
      -khtml-border-radius: 7px;
      border-radius: 7px;
      text-align: center;
      font-size: 15px;
      margin-right: 4px;
      text-align: center;
      padding-top: 9px;
      background-color: #73A673;
      flex: 1 1 0;
}

div.payment {
      color: #FFFFFF;
      /*+border-radius: 7px;*/
      border-radius: 7px;
      -webkit-border-radius: 7px;
      -khtml-border-radius: 7px;
      border-radius: 7px;
      text-align: center;
      margin-right: 4px;
      text-align: center;
      background-color: #199019;
      width: 112px;
      justify-content: center;
      align-items: center;
      text-align: center;
      display: flex;
}

div.fungsi2 {
      color: #FFFFFF;
      /*+border-radius: 7px;*/
      border-radius: 7px;
      -webkit-border-radius: 7px;
      -khtml-border-radius: 7px;
      border-radius: 7px;
      text-align: center;
      margin-right: 4px;
      text-align: center;
      background-color: #199019;
      width: 112px;
      justify-content: center;
      align-items: center;
      text-align: center;
      display: flex;
}

div.table {
      color: #FFFFFF;
      /*+border-radius: 7px;*/
      border-radius: 7px;
      -webkit-border-radius: 7px;
      -khtml-border-radius: 7px;
      border-radius: 7px;
      text-align: center;
      margin-right: 4px;
      text-align: center;
      background-color: #73A673;
      width: 75px;
      justify-content: center;
      align-items: center;
      text-align: center;
      display: flex;
}

div.Logout {
      background-color: #E40505;
}

.fungsi2-sides div {
      color: #FFFFFF;
      border-radius: 7px;
      -webkit-border-radius: 7px;
      -khtml-border-radius: 7px;
      text-align: center;
      margin-right: 4px;
      background-color: #42914D;
      justify-content: center;
      align-items: center;
      display: flex;
      width: 11%;
      /* Lebar default */
      flex: 0 0 auto;
      /* Pastikan lebar mengikuti width, bukan flex-grow */
      font-size: 1.3vw;
      height: 72%;
      padding-top: 0;
}

div.logout {
      color: #FFFFFF;
      /*+border-radius: 7px;*/
      border-radius: 7px;
      -webkit-border-radius: 7px;
      -khtml-border-radius: 7px;
      border-radius: 7px;
      text-align: center;
      margin-right: 4px;
      text-align: center;
      background-color: #F75364;
      width: 75px;
      justify-content: center;
      align-items: center;
      text-align: center;
      display: flex;
}

div.Sent {
      background-color: #922020;
}

div.Table {
      background-color: #E8420B;
}

div.Payment {
      background-color: #031C94;
      width: 20%;
      height: ;
      position: relative;
}

div.More {
      color: #FFFFFF;
      /*+border-radius: 7px;*/
      border-radius: 7px;
      -webkit-border-radius: 7px;
      -khtml-border-radius: 7px;
      border-radius: 7px;
      text-align: center;
      margin-right: 4px;
      text-align: center;
      background-color: #1A4FE7;
      width: 78px;
      justify-content: center;
      align-items: center;
      text-align: center;
      display: flex;
}

div.sent {
      color: #FFFFFF;
      /*+border-radius: 7px;*/
      border-radius: 7px;
      -webkit-border-radius: 7px;
      -khtml-border-radius: 7px;
      border-radius: 7px;
      text-align: center;
      margin-right: 4px;
      text-align: center;
      background-color: #73A673;
      width: 119px;
      justify-content: center;
      align-items: center;
      text-align: center;
      display: flex;
}

div.guest {
      color: #FFFFFF;
      /*+border-radius: 7px;*/
      border-radius: 7px;
      -webkit-border-radius: 7px;
      -khtml-border-radius: 7px;
      border-radius: 7px;
      text-align: center;
      margin-right: 4px;
      text-align: center;
      background-color: #73A673;
      width: 104px;
      justify-content: center;
      align-items: center;
      text-align: center;
      display: flex;
      flex: 1 1 0;
      /* Agar padding dan border tidak menambah lebar total */
}

.Change_Qty {
      color: #FFFFFF;
      /*+border-radius: 7px;*/
      border-radius: 7px;
      -webkit-border-radius: 7px;
      -khtml-border-radius: 7px;
      border-radius: 7px;
      text-align: center;
      margin-right: 4px;
      text-align: center;
      background-color: #73A673;
      width: 104px;
      justify-content: center;
      align-items: center;
      text-align: center;
      display: flex;
      flex: 1 1 0;
      /* Agar padding dan border tidak menambah lebar total */
}

div.cover {
      color: #FFFFFF;
      /*+border-radius: 7px;*/
      border-radius: 7px;
      -webkit-border-radius: 7px;
      -khtml-border-radius: 7px;
      border-radius: 7px;
      text-align: center;
      margin-right: 4px;
      text-align: center;
      background-color: #73A673;
      width: 104px;
      justify-content: center;
      align-items: center;
      text-align: center;
      display: flex;
}

.editToppings {
      color: #FFFFFF;
      /*+border-radius: 7px;*/
      border-radius: 7px;
      -webkit-border-radius: 7px;
      -khtml-border-radius: 7px;
      border-radius: 7px;
      text-align: center;
      font-size: 15px;
      margin-right: 4px;
      text-align: center;
      padding-top: 9px;
      background-color: #73A673;
      flex: 1 1 0;
}

.voiditem {
      color: #FFFFFF;
      /*+border-radius: 7px;*/
      border-radius: 7px;
      -webkit-border-radius: 7px;
      -khtml-border-radius: 7px;
      border-radius: 7px;
      text-align: center;
      font-size: 1.2vw;
      margin-right: 4px;
      text-align: center;
      padding-top: 9px;
      background-color: #EA5353;
      flex: 1 1 0;
}

.qty-qty {
      width: 86%;
      cursor: pointer;
      height: 11%;
      background-color: #ECB87D;
      padding-top: 9px;
      /*+border-radius: 6px;*/
      -webkit-border-radius: 6px;
      -khtml-border-radius: 6px;
      font-size: 23px;
      color: #FFFFFF;
      margin-left: 4px;
}

div.qty-del {
      width: 100%;
      cursor: pointer;
      height: 11%;
      background-color: #FF3232;
      padding-top: 9px;
      border: 1px solid #FFFFFF;
      /*+border-radius: 6px;*/
      border-radius: 6px;
      -webkit-border-radius: 6px;
      -khtml-border-radius: 6px;
      border-radius: 6px;
      font-size: 23px;
      color: #FFFFFF;
}

div.qty-edit {
      width: 100%;
      cursor: pointer;
      height: 11%;
      background-color: #68BEC5;
      padding-top: 9px;
      border: 1px solid #FFFFFF;
      /*+border-radius: 6px;*/
      border-radius: 6px;
      -webkit-border-radius: 6px;
      -khtml-border-radius: 6px;
      border-radius: 6px;
      font-size: 11px;
      color: #FFFFFF;
}

div.judul {
      height: 6%;
      z-index: -8;
      background-color: #C2F3DB;
      position: fixed;
      width: 100%;
      margin-left: 0;
}

input[type=radio] {
      transform: scale(2);
      width: 33px;
      margin-top: 6px;
      /*+placement: 1px 6px;*/
      position: relative;
      left: 1px;
      top: 6px;
}

div.checkbox-group {
      display: flex;
      height: 33px;
      padding-top: 0px;
      margin-top: -7px;
}

subtotal {
      width: 35%;
      flex-direction: column;
      justify-content: space-between;
      left: 0%;
      top: -25%;
      background-color: #891BF2;
      /*+placement: 1px -16px;*/
      position: relative;
      left: 1px;
      top: -16px;
}

div.cart-side {
      width: 35%;
      left: 0%;
      top: -25%;
      background-color: #891BF2;
      /*+placement: 1px -16px;*/
      position: relative;
      left: 1px;
      top: -16px;
}

div.payment-optionss {
      z-index: 2;
      height: 83px;
      /*+placement: 40% 82%;*/
      position: relative;
      left: 40%;
      top: 82%;
      z-index: 0;
      display: none;
}

.belanja {
      height: 57%;
      overflow-y: scroll;
      overflow-x: hidden;
      background-color: #FFFFFF;
      width: 100%;
}

.belanja::-webkit-scrollbar {
      width: 8px;
}

.belanja::-webkit-scrollbar-thumb {
      background-color: #888;
      border-radius: 4px;
}

.cart-item {
      display: flex;
      align-items: center;
      padding: 5px 0 3px;
      width: 89%;
}

.cart-item-name {
      width: 53%;
      font-size: 14.2px;
      height: ;
}

div.xpaket-box {
      padding-left: 37px;
}

.cart-item-name1 {
      width: 65%;
      text-align: left;
      display: flex;
      /* Rata tengah vertikal */
}

.cart-item-name2 {
      width: 23%;
      text-align: left;
}

.cart-item-name3 {
      width: 22%;
      text-align: left;
}

.cart-item-name4 {
      width: 33%;
      text-align: left;
}

.cart-item-name5 {
      width: 18%;
      text-align: left;
      margin-left: 8px;
      margin-right: 0;
}

.cart-item-note {
      font-size: 15px;
      font-style: italic;
      font-weight: bold;
      margin-left: 35px;
      color: #FC5555;
      /*+placement: ;*/
      position: relative;
      left: 0;
      top: 0;
}

div.cart-item-quantity {
      width: 8%;
      left: 50%;
      text-align: right;
      font-size: 15px;
      font-weight: bold;
      font-family: 'Arial Narrow', sans-serif;
      padding-right: 7px;
      margin-right: 0;
}

div.cart-paket-item {
      font-size: 14px;
}

div.cart-item-disc {
      width: 9%;
      left: 50%;
      text-align: right;
      font-size: 13px;
      font-weight: normal;
}

.cart-item-price {
      text-align: right;
      width: 23%;
      font-size: 13px;
      font-weight: bold;
      font-family: 'Arial Narrow', sans-serif;
      margin-right: 12px;
}

.cart-item-kets {
      text-align: center;
      width: 8%;
      font-size: 12px;
      padding-left: 6px;
      font-family: 'Arial Narrow', sans-serif;
      margin-left: 326px;
}

.belanja .cart-item-ket {
      font-size: 10px;
      width: 4px;
      margin-left: 6px;
}

.xtoppings-box {
      margin-left: 8%;
}

div.striped-row {
      display: flex;
      flex-direction: column;
}

.striped-row:nth-child(even) {
      background-color: #F2F2F2;
      display: flex;
      flex-direction: row;
      display: flex;
      flex-direction: column;
}

.kerangjangmenu {
      display: flex;
      background-color: #8F8F8F;
      padding-left: 6px;
      color: #FFFFFF;
      height: 44px;
      margin-bottom: -14px;
      margin-top: 1px;
      padding-top: 6px;
      width: 100%;
}

.selected-cart {
      background-color: #ACD6F1;
}

.selected-cart-ganjil {
      background-color: #EDEDED;
}

.selected-cart-genap {
}

.cart-toping {
      text-align: left;
      font-size: 14px;
      font-style: normal;
      width: 100%;
      line-height: 1.3;
      padding-bottom: 3px;
      margin-bottom: 0;
      margin-left: 1%;
      height: 18px;
}

.kiri {
      height: 73%;
      overflow-y: scroll;
}

.header {
      width: 168px;
      height: 71px;
}

.cart-item button {
      background-color: #E74C3C;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
}

.cart-item button {
      background-color: #E74C3C;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
}

.menu-side {
      flex-direction: column;
      overflow-y: hidden;
      position: fixed;
      text-align: left;
      left: 42%;
      top: 0%;
      width: 59%;
      height: 84%;
      margin-top: 39px;
}

#app {
      font-family: arial;
      display: block;
      position: fixed;
      overflow: no-content;
      width: 100%;
      height: 100%;
}

body {
      width: 100%;
      height: 100%;
}

h2 {
      width: 100%;
      text-align: center;
}

.menu-groups {
      display: flex;
      flex-wrap: wrap;
      width: 85%;
      max-height: 89%;
      overflow: auto;
}

div.ee {
      width: 19%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      margin-right: 2px;
      margin-left: 3px;
      font-size: 15px;
      /*+border-radius: 4px;*/
      border-radius: 4px;
      -webkit-border-radius: 4px;
      -khtml-border-radius: 4px;
      border-radius: 4px;
      margin-bottom: 3px;
}

.menu-top {
      display: flex;
      overflow-y: auto;
      position: absolute;
      flex-wrap: wrap;
      left: 85%;
      height: 99%;
      gap: ;
      margin-left: 2px;
}

.menu-groups button {
      width: 110px;
      border: 1px solid #CCC;
      border-radius: 7px;
      margin: 5px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      color: #000000;
      font-weight: normal;
      font-size: 14px;
      height: 49px;
}

.menu-list {
      display: flex;
      flex-wrap: wrap;
      width: 85%;
      /*+placement: ;*/
      position: relative;
      left: 0;
      top: 0;
      max-height: 89%;
      overflow: auto;
}

::-webkit-scrollbar {
      width: 8px;
      /* Atur lebar scrollbar sesuai kebutuhan */
}

::-webkit-scrollbar {
      width: 0px;
}

::-webkit-scrollbar-thumb {
      background-color: rgba(0, 0, 0, 0.07);
      border-radius: 4px;
      /* Bentuk sudut scrollbar (opsional) */
}

h3 p {
      /*+placement: 146px -46px;*/
      position: relative;
      left: 146px;
      top: -46px;
      height: 7px;
}

.menu-item {
      height: 129px;
      background-color: rgba(255, 255, 255, 0.897);
      color: #FFFFFF;
      width: 18.5%;
      /*+border-radius: 7px;*/
      border-radius: 7px;
      -webkit-border-radius: 7px;
      -khtml-border-radius: 7px;
      border-radius: 7px;
      text-align: center;
      margin-right: 0px;
      margin-left: 5px;
      margin-top: 5px;
      font-size: 15px;
}

.jam {
      position: fixed;
      top: 1%;
      font-size: 25px;
      right: 2%;
}

.menu-image {
      min-height: 0px;
}

button {
      background-color: #C7C7C7;
}

.pp {
      color: #1100A5;
      text-align: center;
}

div.buttony {
      height: 16%;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      background-color: #02BBCA;
      color: #FFFFFF;
      width: 83%;
      /*+border-radius: 4px;*/
      border-radius: 4px;
      -webkit-border-radius: 4px;
      -khtml-border-radius: 4px;
      border-radius: 4px;
      text-align: center;
      font-size: 12px;
}

div.buttony.selected-top {
      background-color: #206088;
      color: #FFFFFF;
      margin-top: 2px;
      font-size: ;
}

BUTTONx {
      width: 18.5%;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      background-color: #CDACD2;
      margin-right: 2px;
      margin-left: 3px;
      /*+border-radius: 4px;*/
      border-radius: 4px;
      -webkit-border-radius: 4px;
      -khtml-border-radius: 4px;
      border-radius: 4px;
      margin-bottom: 3px;
      min-height: 46px;
      font-size: 14px;
}

BUTTONU {
      width: 106px;
}

BUTTONX.selected-group {
      background-color: rgba(118, 31, 125, 0.897);
      color: #FFFFFF;
}

BUTTONy {
      height: 20%;
      background-color: #00940F;
      color: #FFFFFF;
      width: 95%;
      /*+border-radius: 7px;*/
      border-radius: 7px;
      -webkit-border-radius: 7px;
      -khtml-border-radius: 7px;
      border-radius: 7px;
      text-align: center;
      margin-right: 4px;
      margin-left: 2px;
      padding-top: 11px;
}

.cart-total {
      text-align: right;
      font-weight: normal;
      width: 36%;
      height: 19px;
      /*+placement: 0px -6px;*/
      position: relative;
      left: 0px;
      top: -6px;
      left: 32%;
      position: relative;
}

.acart-total {
      text-align: left;
      padding-top: 9px;
      height: 25px;
}

.subtotal2 {
      text-align: right;
      left: 116%;
      width: 61%;
      position: absolute;
      font-weight: bold;
}

.asubtotal2 {
      position: absolute;
      font-size: 23px;
      color: #EE8989;
      text-align: right;
      margin-right: 0;
      margin-left: 24%;
      width: 155px;
}

.service-fee {
      text-align: right;
      margin-right: 19%;
      font-weight: normal;
}

.tax {
      text-align: right;
      margin-right: 19%;
      font-weight: normal;
}

.total {
      text-align: right;
      margin-right: 19%;
      font-weight: bold;
      padding-top: 14px;
}

.tombol {
      cursor: pointer;
      /*+placement: ;*/
      position: relative;
      left: 0;
      top: 0;
      height: 100%;
      margin-top: 0;
}

.cancel {
      background-color: #AE0202;
      color: white;
}

.ok {
      background-color: green;
      color: white;
}

.menu-name {
      color: #333;
      line-height: 95%;
      font-size: 14px;
      text-align: center;
      align-items: center;
      display: flex;
      justify-content: center;
      height: 74px;
      margin-top: -21px;
      margin-bottom: 0;
      font-family: 'Arial Narrow', sans-serif;
      font-weight: normal;
      width: ;
}

.menu-price {
      font-weight: bold;
      position: absolute;
      bottom: 0;
      right: 0;
      margin: 4px;
      color: rgba(0, 0, 0, 0.897);
      font-size: 15px;
      font-family: 'Arial Narrow', sans-serif;
}

.tombola {
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      margin-left: 7px;
      /*+placement: ;*/
      position: relative;
      left: 0;
      top: 0;
      height: 45px;
      width: 146px;
      /*+border-radius: 6px;*/
      -moz-border-radius: 6px;
      -webkit-border-radius: 6px;
      -khtml-border-radius: 6px;
      border-radius: 6px;
}

img#menu_img {
      max-width: 100%;
      width: 100%;
      min-height: 10%;
      max-height: 69px;
      object-fit: cover;
      height: 97px;
      /*+border-radius: 7px 4px 0px 0px;*/
      -moz-border-radius: 7px 4px 0px 0px;
      -webkit-border-radius: 7px 4px 0px 0px;
      -khtml-border-radius: 7px 4px 0px 0px;
      border-radius: 7px 4px 0px 0px;
}

.menu-group-makanan-nasi .menu-name {
      color: #E74C3C;
}

img#lantai-img {
      max-width: 100%;
      height: 103%;
      width: 100%;
      object-fit: fill;
      z-index: 0;
      user-select: none;
      top: 0;
      /*+placement: ;*/
      position: relative;
      left: 0;
      top: 0;
}

.menu-group-makanan-mie .menu-name {
      color: #3498DB;
}

.menu-group-makanan-sate .menu-name {
      color: #2ECC71;
}

.menu-group-makanan-sup .menu-name {
      color: #F39C12;
}

.menu-group-makanan-tradisional .menu-name {
      color: #9B59B6;
}

.menu-group-minuman .menu-name {
      color: #E67E22;
}

.receipt-modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      justify-content: center;
      align-items: center;
}

.receipt-content {
      background-color: white;
      padding: 20px;
      border-radius: 4px;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
      width: 317px;
}

.receipt-subtotal {
      text-align: right;
}

.receipt-service-fee {
      text-align: right;
}

.receipt-tax {
      text-align: right;
}

.receipt-item {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
}

.receipt-item-name {
      flex: 2;
}

.receipt-item-quantity, .receipt-item-price {
      flex: 1;
      text-align: center;
}

.receipt-total {
      text-align: right;
      margin-top: 10px;
      font-weight: bold;
}

.receipt-modal button {
      background-color: #E74C3C;
      color: white;
      border: none;
      border-radius: 4px;
      padding: 5px 10px;
      cursor: pointer;
}

.custom-checkbox {
      transform: scale(2);
      margin-top: 15px;
      margin-left: 13px;
      margin-right: 10px;
}

div.toppings-box {
      min-width: 200px;
      max-width: 49%;
      border: 0px solid black;
      padding: 0px 13px;
      border-radius: 7px;
      box-sizing: border-box;
      border-top: 0px solid black;
      width: 230px;
      background-color: #E8E8E8;
      margin-left: 9px;
}

.custom-checkbox:checked {
      background-color: #000F95;
}

.custom-radio {
      width: 30px;
      height: 30px;
      border-radius: 50%;
}

.custom-radio:checked {
      background-color: blue;
}

ul, .city-list {
      list-style-type: none;
      padding: 0px 0 0;
}

li, .city-item {
      height: 42px;
      margin-top: 0;
}

.header-toppings p {
      padding-top: 0px;
      margin-top: -19px;
}

.pp-grid-content .pp-grid-item {
      margin: 10px 4px -8px -6px;
      background-color: #F2EFEF;
      cursor: pointer;
      font-size: 17px;
      /*+border-radius: 4px;*/
      border-radius: 4px;
      -webkit-border-radius: 4px;
      -khtml-border-radius: 4px;
      border-radius: 4px;
      /*+placement: -8px -4px;*/
      position: relative;
      left: -8px;
      top: -4px;
      width: 99%;
      border-top: 0px solid black;
      text-align: left;
      padding-bottom: 11px;
      padding-top: 7px;
}

HAI {
      margin-top: 0;
}

.checkbox-label span {
      /*+placement: -1px 2px;*/
      position: relative;
      left: -1px;
      top: 2px;
}

.form-group {
      display: flex;
      padding-bottom: 14px;
      margin-top: 21px;
      margin-bottom: 13px;
}

span.harga-toping {
      font-size: 17px;
      color: #2867F5;
      text-align: left;
      position: absolute;
      margin-top: 12px;
      padding-left: 9px;
}

.menu-box {
      width: 100px;
      height: 100px;
      border: 1px solid black;
      display: inline-block;
      margin: 5px;
      text-align: center;
      vertical-align: middle;
      line-height: 100px;
      cursor: pointer;
}

.active-frame {
      border: 2px solid #007BFF;
      padding: 5px;
      display: inline-block;
      cursor: pointer;
}

.checkbox-label.active-frame input[type="checkbox"] {
      display: none;
}

.checkbox-label.active-frame input[type="checkbox"]:checked + span {
      background-color: #007BFF;
      border-color: #007BFF;
}

.checkbox-label.active-frame input[type="checkbox"] + span {
      display: inline-block;
      width: 20px;
      height: 20px;
      border: 2px solid #CCC;
      background-color: #FFF;
      vertical-align: middle;
}

.radiobutton-label.active-frame input[type="radio"] + span {
      display: inline-block;
      width: 20px;
      height: 20px;
      border: 2px solid #CCC;
      border-radius: 50%;
      background-color: #FFF;
      vertical-align: middle;
}

.radiobutton-label.active-frame input[type="radio"]:checked + span {
      background-color: #007BFF;
      border-color: #007BFF;
}

.toppings-list {
      margin-top: 10px;
}

.topping-box {
      padding: 10px;
      border: 1px solid gray;
      margin: 10px;
      display: inline-block;
      transition: transform 0.3s ease-in-out;
}

.topping-box:hover {
      transform: scale(1.0);
}

.item-box {
      margin: 5px;
}

.header-toppings {
      font-weight: normal;
      margin-top: 16px;
      height: 26px;
      line-height: 1.1;
      margin-left: 4px;
}

.tutupin {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #CDCDCD;
      padding: 0px 12px;
      border: 1px solid #CCC;
      box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
      z-index: 999;
      display: flex;
      flex-wrap: wrap;
      border-radius: 11px;
      justify-content: center;
      align-items: normal;
      border-top: 0px solid black;
}

.toppings-modal {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
      z-index: 100;
      width: 100%;
}

.topping-kel {
      z-index: 999;
      display: flex;
      justify-content: center;
      align-items: normal;
}

.toppings-boxr {
      min-width: 200px;
      border: 0px solid black;
      border-radius: 7px;
      box-sizing: border-box;
      border-top: 0px solid black;
      background-color: #EB9595;
      padding-left: 5px;
      margin-left: 15px;
}

@media (max-width: 800px) {
      .toppings-box {
            width: 45%;
            max-width: 45%;
      }
}

@media (max-width: 600px) {
      .toppings-box {
            width: 100%;
            max-width: 100%;
      }
}

.tutup {
      width: 100%;
      display: flex;
      text-align: center;
      justify-content: center;
      align-items: center;
      margin-top: 30px;
      margin-bottom: 17px;
}

.click-box {
      width: 150px;
      height: 150px;
      background-color: #3498DB;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 18px;
      cursor: pointer;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.click-box:hover {
      background-color: #2980B9;
}

.modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 100000;
}

.modal-content {
      background-color: white;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      height: 153px;
      text-align: center;
      font-size: 19px;
      z-index: 1000000;
}

div.button_del {
      width: 62px;
      height: 35px;
      background-color: #5BE6F2;
}

.calculator {
      display: inline-block;
      background-color: #333;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      width: 428px;
      overflow: auto;
}

.calculator .calculator-titel {
      color: #EEECEC;
      margin-bottom: 20px;
      font-size: ;
      line-height: 2;
}

div.calculator-titela {
      font-size: 18px;
      color: #E9E8E8;
      padding-bottom: 3px;
}

.calculatora {
      max-width: 390px;
      background-color: #333;
      border-radius: 12px;
      padding: 25px 20px 20px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      width: 35%;
      height: 500px;
      margin-left: 54%;
      margin-top: -14%;
      display: compact;
      position: fixed;
}

.bawah {
      margin-left: -2%;
      display: flex;
      position: fixed;
      width: 35%;
      height: 3%;
      padding-left: 17px;
      /*+border-radius: 6px;*/
      -moz-border-radius: 6px;
      -webkit-border-radius: 6px;
      -khtml-border-radius: 6px;
      border-radius: 6px;
      z-index: 1000;
      bottom: 0%;
      background-color: #D2CACA;
      padding-top: 6px;
      font-size: 13px;
}

.calculatoraa {
      max-width: 390px;
      background-color: #333;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      width: 35%;
      height: 576px;
      margin-left: 29%;
      margin-top: 1%;
      display: grid;
}

.keyboardl {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      gap: 10px;
      width: 26%;
      /*+placement: 72% -64%;*/
      position: relative;
      left: 72%;
      top: -64%;
}

.keyboardla {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      gap: 10px;
      width: 26%;
      /*+placement: 72% -101%;*/
      position: relative;
      left: 72%;
      top: -101%;
}

.bepos {
      height: 49px;
      position: absolute;
      bottom: 0%;
      background-color: ;
}

.register {
      height: 96px;
      position: absolute;
      /*+placement: -12px -13px;*/
      position: relative;
      left: -12px;
      top: -13px;
}

.register1 {
      margin-top: 0;
      /*+placement: 14px 31px;*/
      position: relative;
      left: 14px;
      top: 31px;
      color: #CBC6C6;
      font-size: 14px;
}

.bepos1 {
      font-size: 20px;
      margin-left: 10px;
      color: #FFFFFF;
      bottom: 0%;
}

.bepos2 {
      color: #FFFFFF;
      width: 88px;
      font-size: 12px;
      margin-left: 13px;
      /*+placement: -4px -4px;*/
      position: relative;
      left: -4px;
      top: -4px;
}

.beposa1 {
      font-size: 28px;
      color: #FFFFFF;
}

.beposa2 {
      text-align: center;
      width: 187px;
      color: #FFFFFF;
}

.calculatorkb {
      display: inline-table;
      background-color: #A1A1A1;
      border-radius: 12px;
      padding: 8px 20px 20px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      min-width: 56%;
      height: 592px;
      max-width: 600px;
}

.input-display {
      background-color: #222;
      color: #FFFFFF;
      font-size: 56px;
      padding: 0px 10px 10px;
      border-radius: 8px;
      margin-bottom: 22px;
      text-align: right;
      height: 64px;
}

.input-light {
      font-size: 20px;
      padding: 10px;
      border-radius: 8px;
      margin-bottom: 10px;
      text-align: left;
      height: 49px;
      background-color: #E5E4E4;
}

.input-dark {
      font-size: 20px;
      padding: 10px;
      border-radius: 8px;
      margin-bottom: 10px;
      text-align: left;
      height: 49px;
      background-color: #787878;
}

.input-display1 {
      background-color: #222;
      color: white;
      font-size: 32px;
      padding: 10px;
      border-radius: 8px;
      margin-bottom: 10px;
      text-align: left;
      height: 33px;
}

.input-display2 {
      background-color: #222;
      color: white;
      font-size: 32px;
      padding: 10px;
      border-radius: 8px;
      margin-bottom: 10px;
      text-align: left;
      height: 33px;
}

.input-displaykb {
      font-size: 20px;
      padding: 10px;
      border-radius: 8px;
      margin-bottom: 10px;
      text-align: left;
      height: 49px;
}

.keyboard {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      width: 69%;
}

.keyboardp {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      gap: 10px;
      width: 29%;
      position: relative;
      /*+placement: 279px -326px;*/
      position: relative;
      left: 279px;
      top: -326px;
      height: 0px;
}

.keyboardkb {
      display: grid;
      grid-template-columns: repeat(11, 1fr);
      margin-top: 7px;
      gap: 1%;
      width: 100%;
      overflow: visible;
}

.keyboardkb2 {
      display: grid;
      grid-template-columns: repeat(11, 1fr);
      gap: 1%;
      margin-top: 7px;
      width: 100%;
      overflow: visible;
}

.keyboardkb3 {
      display: grid;
      grid-template-columns: repeat(11, 1fr);
      margin-top: 7px;
      gap: 1%;
      overflow: visible;
      width: 100%;
}

.keyboardkb4 {
      margin-top: 24px;
      gap: 1%;
      width: 100%;
      /* overflow: no-display; */
}

button.condiment {
      margin-right: 9px;
      text-align: center;
      font-size: 17px;
      width: 149px;
      margin-top: 4px;
      overflow: hidden;
      background-color: #5A5A5A;
      height: 50px;
      padding-top: 4px;
}

button {
      padding: 16px 0 14px;
      font-size: 29px;
      border: none;
      border-radius: 8px;
      background-color: #666;
      color: #B5B5B5;
      cursor: pointer;
      outline: none;
      transition: background-color 0.3s;
      line-height: 1.5;
}

.bepos button {
      display: none;
}

.split-control-buttons .split-control-button2 {
      font-size: 17px;
      padding-top: 10px;
      background-color: #4BA293;
      color: #000000;
}

button.split-close {
      height: 38px;
      font-size: 26px;
      width: 103px;
      padding-top: 0px;
      background-color: #259B42;
      color: #FFFFFF;
}

.pp-controls button {
      background-color: #10A171;
}

.diva {
      width: 177%;
      height: 56px;
}

.divaa {
      position: relative;
      /*+placement: ;*/
      position: relative;
      left: 0;
      top: 0;
}

.divac {
      margin-left: 0%;
      width: 100%;
}

. {
      font-size: 20px;
      color: #D0D6D0;
      margin-bottom: 17px;
}

.calculator-titelkb {
      font-size: 20px;
      color: #000000;
      margin-bottom: 7px;
      padding: 0px;
}

button.enter {
      width: 57%;
      height: 292%;
      background-color: #4F8251;
      position: relative;
      border-left: 1px solid black;
}

button.entera {
      height: 156px;
      background-color: #588D5A;
      width: 100%;
}

.enterp {
      background-color: #4F8251;
      width: 101%;
      position: relative;
      height: 162px;
      font-size: 22px;
      /*+placement: -1px -64px;*/
      position: relative;
      left: -1px;
      top: -64px;
      margin-top: 62px;
}

.C {
      background-color: #814F4F;
      font-size: 19px;
      height: 100%;
      overflow: visible;
      width: 97%;
}

button.enter2 {
      width: 121%;
      height: 131%;
      background-color: #4F8251;
      margin-left: -65%;
}

button.Space {
      background-color: #C5C5C5;
      font-size: 19px;
      height: 100%;
      overflow: visible;
      width: 328%;
      color: #000000;
      /*+placement: -224% 0px;*/
      position: relative;
      left: -224%;
      top: 0px;
}

button.Cancel {
      background-color: #92424B;
      font-size: 19px;
      height: 100%;
      overflow: visible;
      width: 100%;
}

button:hover {
      background-color: #555;
}

.pp-container {
      display: flex;
      gap: 2rem;
      width: 100%;
      max-width: 1200px;
      margin-top: 52px;
}

.pp-grid-container {
      flex: 1;
      display: flex;
      flex-direction: column;
      background: white;
      border-radius: 0.75rem;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      height: 545px;
      overflow: hidden;
      width: 357px;
}

.pp-controls button {
      width: 240px;
      font-size: 17px;
      padding-top: 14px;
      margin-top: 8px;
      margin-left: 20px;
      margin-right: 21px;
      color: #FFFFFF;
}

div.pp-ok {
      margin-top: -32px;
}

.pp-grid-header {
      background: var(--header-bg);
      padding: 1rem;
      font-weight: 600;
      border-bottom: 1px solid var(--border-color);
      display: flex;
      grid-template-columns: 2fr 1fr;
      gap: 1rem;
      position: sticky;
      top: 0;
      width: 194px;
      height: 11px;
}

.pp-grid-content {
      overflow-y: auto;
      height: 100%;
}

.pp-grid-content ul {
      margin: 14px 0 0;
      padding: 0 23px 0 0;
}

.pp-grid-item {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 1rem;
      padding: 0.75rem 3.2rem 0.75rem 1rem;
      border-bottom: 1px solid var(--border-color);
      cursor: pointer;
      transition: background-color 0.2s;
      text-align: left;
      width: 80%;
}

.pp-grid-item:hover {
      background-color: #F9FAFB;
}

.pp-grid-item.pp-selected {
      background-color: #BFEEDF;
      border-left: 0px solid #85F9DE;
}

.pp-controls {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      justify-content: center;
      min-width: 180px;
}

button:hover {
      background-color: #008F00;
}

.pp-quantity {
      font-variant-numeric: tabular-nums;
      width: 49%;
      left: 53%;
      position: static;
      height: ;
      /*background-position: ;*/
      margin-left: 71px;
}

.pp-nama {
      width: 185%;
      padding-left: 12px;
}

.pp-namax {
}

.pp-grid-content {
      width: 100%;
      height: ;
}

div.pp-judulkiri {
      width: 27%;
      background-position: ;
      position: fixed;
      margin-top: 1%;
      font-size: 24px;
      text-align: center;
}

div.pp-judulkanan {
      width: 358px;
      background-position: ;
      position: fixed;
      margin-top: 1%;
      font-size: 24px;
      margin-left: 53%;
      text-align: center;
      margin-right: 0;
      left: 88px;
}

.pp-grid-item {
      width: 79%;
}

.pp-namax {
      /* Take up available space */
      text-align: left;
      /* Align text to the left */
      height: 26px;
      width: 20%;
      position: fixed;
}

.pp-quantity {
      flex: 1;
      /* Take up available space */
      text-align: center;
      /* Align text to the right */
      margin-right: 0;
      /*+placement: ;*/
      position: relative;
      left: 0;
      top: 0;
      margin-left: 226px;
      padding: 12px 0 0;
      position: absolute;
}

.pp-quantityx {
      margin-left: 280px;
      position: fixed;
}

.report-modal-content {
      background-color: white;
      z-index: 500000;
      border-radius: 8px;
      box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
      /* Efek Kaca Buram (Frosted Glass) */
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      color: var(--text-light);
      border-left: 0px solid black;
      width: 40%;
      padding-top: 14px;
}

div#transactionSummaryModal.report-modal-overlay {
      width: 974px;
      margin-left: 30%;
      margin-top: 20px;
      position: absolute;
}

div#passwordModal.report-modal-overlay {
      height: 102%;
      width: 100%;
      overflow: hidden;
      z-index: 50000;
}

#reportModal.report-modal-overlay {
      height: 100%;
}

.report-modal-close-btn {
      align-self: flex-end;
      padding: 8px 15px;
      margin-bottom: 10px;
      cursor: pointer;
      background-color: #DC3545;
      color: white;
      border: none;
      border-radius: 5px;
      display: none;
}

.report-modal-content iframe {
      width: 100%;
      height: 100%;
      border: 1px solid #CCC;
}

/* index.css */
/* --- STYLESHEET BARU UNTUK TAMPILAN LOGIN MODERN --- */
/* index.css */
/* --- STYLESHEET BARU UNTUK TAMPILAN LOGIN MODERN --- */
:root {
      --primary-accent: #f39c12;
      /* Warna oranye/amber yang hangat */
      --panel-bg: rgba(25, 25, 25, 0.7);
      /* Latar belakang panel semi-transparan gelap */
      --input-bg: rgba(0, 0, 0, 0.25);
      --keypad-bg: rgba(255, 255, 255, 0.05);
      --keypad-hover-bg: rgba(255, 255, 255, 0.1);
      --text-light: #f0f0f0;
      --text-dark: #333333;
}

/* Mengganti style .overlay lama dengan wrapper full-screen */
#overlogin.overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 19000;
      /* Latar belakang default, akan diganti oleh Vue jika login berhasil */
      display: flex;
      justify-content: center;
      align-items: center;
      /* Ganti URL gambar ini dengan gambar restoran Anda */
      background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('image/login.jpg');
      background-size: cover;
      background-position: center;
      font-family: 'Poppins', sans-serif;
      /* Menggunakan font yang lebih modern */
}

/* Panel Login Utama */
.logo-container {
      text-align: center;
}

.login-panel {
      width: 112%;
      padding: 0.4rem 1.1rem 2.5rem 1.7rem;
      min-width: 193px;
      background: var(--panel-bg);
      border-radius: 20px;
      box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
      /* Efek Kaca Buram (Frosted Glass) */
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.18);
      color: var(--text-light);
      transform: scale(0.9);
      /* <-- PENYESUAIAN UKURAN 90% */
      max-width: 423px;
      margin-left: 33%;
}

.logo-container img {
      max-width: 150px;
      height: 129px;
}

.login-header {
      text-align: center;
      margin-bottom: 2rem;
}

.login-header h1 {
      margin: 0;
      font-weight: 500;
      font-size: 1.8rem;
      color: #C7C7C7;
}

.login-header p {
      margin: 5px 0 -26px;
      color: #CCC;
      font-weight: 300;
}

/* Mengganti style .input-display1/2 lama */
.input-group-vue {
      display: flex;
      align-items: center;
      background: var(--input-bg);
      border-radius: 10px;
      padding: 0 15px;
      margin-bottom: 0.2rem;
      height: 50px;
}

.input-group-vue i {
      color: #888;
      font-size: 1.1rem;
}

.input-display-vue {
      width: 100%;
      height: 100%;
      background: transparent;
      border: none;
      outline: none;
      color: rgba(199, 199, 199, 0.663);
      font-size: 1.2rem;
      padding: 0px 10px 0;
      letter-spacing: 2px;
      cursor: pointer;
      display: flex;
      align-items: center;
      border-radius: 10px;
      /* Tambahkan ini agar highlight :style bekerja baik */
      transition: background-color 0.2s ease;
}

/* Style untuk placeholder jika input kosong */
.input-display-vue:empty::before {
      content: attr(placeholder);
      color: #888;
}

/* Keypad Grid */
.keypad {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      margin-top: 1.5rem;
}

.keypad button {
      height: 65px;
      border: none;
      border-radius: 10px;
      background: var(--keypad-bg);
      color: var(--text-light);
      font-size: 1.8rem;
      font-weight: 500;
      cursor: pointer;
      transition: background-color 0.2s ease, transform 0.1s ease;
      padding: 0;
      /* Reset padding */
}

.keypad button:hover {
      background: var(--keypad-hover-bg);
}

.keypad button:active {
      transform: scale(0.95);
}

.keypad button.keypad-login {
      grid-column: 4 / 5;
      grid-row: 3 / 5;
      /* Membentang 2 baris */
      height: auto;
      background: var(--primary-accent);
      color: var(--text-dark);
      font-weight: 700;
      font-size: 1.5rem;
      /* Sesuaikan ukuran font untuk tombol besar */
}

.keypad button.keypad-login:hover {
      background: #E67E22;
      /* Oranye sedikit lebih gelap saat hover */
}

/* Blok Info di pojok-pojok layar */
.info-block {
      position: absolute;
      padding: 10px 0px 10px 20px;
      background: rgba(71, 71, 71, 0.300);
      border-radius: 10px;
      color: var(--text-light);
      font-size: 0.8rem;
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
}

.top-left {
      top: 20px;
      left: 20px;
}

.top-left h3, .top-left p {
      margin: 0;
}

.top-left h3 {
      font-weight: 500;
}

.top-left p {
      font-size: 0.8em;
      opacity: 0.8;
}

.bottom-right {
      bottom: 20px;
      right: 20px;
      text-align: right;
      padding-bottom: 0;
      padding-right: 6px;
      position: absolute;
}

.bottom-right p {
      margin: 4px 0;
}

/* --- CSS untuk Visible Preloader --- */
#main-content {
      max-width: 312px;
      margin: -2000px auto 0 -2800px;
      padding: 20px;
      background-color: #FFF;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      left: -2000px;
      position: absolute;
}

h1 {
      text-align: center;
      color: #2C3E50;
      margin-top: 0;
}

#close-button {
      display: block;
      margin: 0 auto 20px auto;
      padding: 10px 25px;
      font-size: 16px;
      font-weight: bold;
      color: #FFF;
      background-color: #E74C3C;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.2s;
}

#close-button:hover {
      background-color: #C0392B;
}

#image-container {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 12px;
}

.menu-card {
      display: flex;
      align-items: center;
      gap: 8px;
      /* Jarak antara gambar dan teks */
      background-color: #ECF0F1;
      border: 1px solid #BDC3C7;
      border-radius: 20px;
      /* Membuat sudut lebih melengkung */
      padding: 5px 12px 5px 5px;
      font-size: 14px;
}

.menu-card img {
      width: 20px;
      /* UKURAN GAMBAR BARU */
      height: 20px;
      /* UKURAN GAMBAR BARU */
      object-fit: cover;
      border-radius: 50%;
      /* Membuat gambar menjadi lingkaran */
      flex-shrink: 0;
}

.menu-card p {
      margin: 0;
      color: #2C3E50;
}

.loading-message, .error-message {
      width: 100%;
      text-align: center;
      font-size: 1.2em;
      color: #7F8C8D;
      margin-top: 50px;
}

/* License Panel Styles */
.license-panel {
      position: absolute;
      bottom: 20px;
      left: 20px;
      backdrop-filter: blur(10px);
      background: rgba(0, 0, 0, 0.300);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 12px;
      padding: 15px;
      min-width: 280px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.license-header {
      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
      padding-bottom: 8px;
      margin-bottom: 12px;
}

.license-header h4 {
      color: #FFFFFF;
      font-size: 14px;
      margin: 0;
      display: flex;
      align-items: center;
      gap: 8px;
}

.license-header h4 i {
      color: #FFD700;
}

.license-content {
      color: #FFFFFF;
}

.license-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
      font-size: 12px;
}

.license-label {
      color: #CCCCCC;
      font-weight: normal;
}

.license-id {
      background: rgba(255, 255, 255, 0.1);
      padding: 2px 6px;
      border-radius: 4px;
      font-family: 'Courier New', monospace;
      font-size: 11px;
      color: #FFD700;
      border: 1px solid rgba(255, 215, 0, 0.3);
}

.license-status {
      font-size: 11px;
      padding: 2px 6px;
      border-radius: 4px;
      font-weight: bold;
      text-align: right;
}

.license-status.valid {
      color: #4CAF50;
      background: rgba(76, 175, 80, 0.1);
}

.license-status.warning {
      color: #FF9800;
      background: rgba(255, 152, 0, 0.1);
}

.license-status.expired {
      color: #F44336;
      background: rgba(244, 67, 54, 0.1);
}

.license-actions {
      display: flex;
      gap: 8px;
      margin-top: 12px;
      padding-top: 8px;
      border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.license-btn {
      flex: 1;
      padding: 6px 8px;
      border: none;
      border-radius: 6px;
      font-size: 10px;
      font-weight: bold;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
}

.license-btn.primary {
      background: linear-gradient(45deg, #4CAF50, #45A049);
      color: white;
}

.license-btn.primary:hover {
      background: linear-gradient(45deg, #45A049, #3D8B40);
      transform: translateY(-1px);
}

.license-btn.secondary {
      background: linear-gradient(45deg, #FF9800, #F57C00);
      color: white;
}

.license-btn.secondary:hover {
      background: linear-gradient(45deg, #F57C00, #EF6C00);
      transform: translateY(-1px);
}

.license-btn:active {
      transform: translateY(0);
}

.license-btn i {
      font-size: 10px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
      .license-panel {
            bottom: 10px;
            left: 10px;
            right: 10px;
            min-width: auto;
            max-width: 300px;
      }
      
      .license-actions {
            flex-direction: column;
      }
      
      .license-btn {
            width: 100%;
      }
}
