:root {
     --sait: var(--android-safe-area-inset-top, 0px);
     --saib: var(--android-safe-area-inset-bottom, 0px);
     --sail: var(--android-safe-area-inset-left, 0px);
     --sair: var(--android-safe-area-inset-right, 0px);
 }


 body,
 html {
     font-family: 'Inter', sans-serif;
     background-color: #fafaf9;
     margin: 0;
     padding: 0;
     height: 100%;
     overflow-x: hidden;
 }

 #app-header {
     background-color: #ffffff;
     top: 0;
     left: 0;
     position: fixed;
     width: 100%;
     height: calc(52px + var(--sait));
 }

 #app-header>div {
     margin-top: var(--sait);
     height: 52px;
 }

 #app {
     padding-top: calc(52px + var(--sait));
     min-height: screen;
     margin-bottom: 50px;
 }

 #mobile-menu-dropdown {
     top: calc(52px + var(--sait));
 }

 #order-header {
     top: calc(52px + var(--sait));
 }

 #fixed-customer-details {
     top: calc(52px + var(--sait));
 }

 #worker-gold-mgmt {
     top: calc(52px + var(--sait));
 }

 #gold-rate-header {
     top: calc(52px + var(--sait));
 }

 #transactions-header {
     top: calc(52px + var(--sait));
 }

 #app-footer {
     background-color: #f8f8f8;
     bottom: 0;
     left: 0;
     position: fixed;
     width: 100%;
     height: calc(62px + var(--saib));
     display: flex;
     align-items: flex-end;
 }

 /* Inner container for the footer content */
 #app-footer>div {
     width: 100%;
     height: calc(60px + var(--saib));
     /* margin-bottom: var(--saib); */
 }

 /* https://ruoyusun.com/2020/10/21/webview-fullscreen-notch.html */

 .modal-container {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.7);
     display: flex;
     align-items: flex-end;
     justify-content: center;
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.3s, visibility 0.3s;
     z-index: 50;
 }

 .customers-container {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.7);
     display: flex;
     align-items: flex-end;
     justify-content: center;
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.3s, visibility 0.3s;
     z-index: 99;
 }

 .customers-container:target {
     opacity: 1;
     visibility: visible;
 }

 .modal-container:target {
     opacity: 1;
     visibility: visible;
 }

 .modal-content {
     background: white;
     border-radius: 1.5rem 1.5rem 0 0;
     padding: 1.5rem;
     width: 100%;
     height: 80vh;
     overflow-y: auto;
     border-top: 4px solid #fcd34d;
     box-shadow: 0 -10px 25px -5px rgba(0, 0, 0, 0.2);
     position: relative;
 }

 .customers-container-content {
     background: white;
     border-radius: 1.5rem 1.5rem 0 0;
     padding: 1.5rem;
     width: 100%;
     height: 55vh;
     overflow-y: auto;
     border-top: 4px solid #fcd34d;
     box-shadow: 0 -10px 25px -5px rgba(0, 0, 0, 0.2);
     position: relative;
 }

 .workers-container-content {
     background: white;
     border-radius: 1.5rem 1.5rem 0 0;
     padding: 1.5rem;
     width: 100%;
     height: 85vh;
     overflow-y: auto;
     border-top: 4px solid #fcd34d;
     box-shadow: 0 -10px 25px -5px rgba(0, 0, 0, 0.2);
     position: relative;
 }

 .modal-close-target {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 40;
 }

 .toast-bg {
     background-color: #92400E;
 }

 .toast-transition {
     transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
 }

 .toast-hidden {
     transform: translateY(100%);
     opacity: 0;
     pointer-events: none;
 }

 #preloader {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(255, 255, 255, 0.95);
     z-index: 9999;
     display: flex;
     justify-content: center;
     align-items: center;
     transition: opacity 0.5s ease;
 }

 .spinner {
     border: 4px solid #f3f3f3;
     border-top: 4px solid #92400E;
     border-radius: 50%;
     width: 40px;
     height: 40px;
     animation: spin 1s linear infinite;
 }

 .preloader-hidden {
     opacity: 0;
     pointer-events: none;
 }

 @keyframes spin {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }

 .preloader-hidden {
     opacity: 0;
     pointer-events: none;
 }


 @media (min-width: 768px) {
     .modal-container {
         align-items: center;
     }

     .modal-content {
         max-width: 32rem;
         height: auto;
         max-height: 90vh;
         border-radius: 0.75rem;
     }
 }