.modal { position: fixed; top: 0; right: 0; bottom: 0; right: 0; z-index: 1050; display: none; overflow: hidden; -webkit-overflow-scrolling: touch; outline: 0; }
.modal { z-index: 10000; }
.add-line-item-btn { border-radius: 4px; background-color: #eee; }
svg.icon { width: 16px; height: 16px; fill: currentColor; }
.grey-bg, .associated-txn:hover { background-color: #fbfafa; }

.rounded-xlg, .uncattxns-info-icon, .new-Approvals .Approval-tab { border-radius: 10px !important; }

.mt-5, .my-5 { margin-top: 20px !important; }
.total-section .total-row { min-height: 28px; }
.total-section .jtotal-row .total-label { width: 60%; }

.total-section .total-row .total-label { display: inline-block; min-height: 28px; width: 20%; padding: 10px 1%; font-weight: 600; }
.total-section .jtotal-row .total-amount { width: 21%; padding-right: 2%; }

.total-section .total-row .total-amount { float: right; padding: 10px 1.5%; min-height: 28px; width: 20%; margin-right: -1%; text-align: right; color: #777; }
.total-section .total-row { min-height: 28px; }
.btn-bottom-toolbar { bottom: 0; right: 0; padding: 20px 10px; background: #fff; width: calc(100%); }

.text-right { text-align: right; }
.form-control-plaintext { display: block; width: 100%; padding-top: .375rem; padding-bottom: .375rem; margin-bottom: 0; line-height: 1.6; color: #212529; background-color: transparent; border: solid transparent; border-width: 1px 0; }
.font-xs { font-size: 12px; }
.rounded-xlg, .uncattxns-info-icon, .new-Approvals .Approval-tab { border-radius: 10px !important; }
.panel, .panel-body, .panel_s { background-color: rgb(255 255 255/var(--tw-bg-opacity)); border-radius: .375rem; }
.mtop20 { margin-top: 20px; }
.mtop5 { margin-top: 5px; }
.mtop10 { margin-top: 10px; }

.label-default { --tw-border-opacity: 1; --tw-bg-opacity: 1; --tw-text-opacity: 1; background-color: rgb(248 250 252/var(--tw-bg-opacity)); border-color: rgb(226 232 240/var(--tw-border-opacity)); border-style: solid; border-width: 1px; color: rgb(51 65 85/var(--tw-text-opacity)); }

.pull-right { float: right !important; }

.btn-default { --tw-border-opacity: 1; --tw-bg-opacity: 1; --tw-text-opacity: 1; background-color: rgb(255 255 255/var(--tw-bg-opacity)); border-color: rgb(203 213 225/var(--tw-border-opacity)); color: rgb(51 65 85/var(--tw-text-opacity)); }

.btn, .btn-group > .btn { border-radius: .375rem; font-size: 13.45px; font-weight: 500; line-height: 20px; }
.btn-group, .btn-group-vertical { position: relative; display: inline-block; vertical-align: middle; }
no-mbot { padding: 4px; }
.invoice-preview { position: relative; margin-bottom: 35px; box-shadow: 0 0 6px #ccc; padding: 18px; }
.ribbon { position: absolute !important; top: 5px; right: -5px; left:auto; overflow: hidden; width: 96px; height: 94px; }
.ribbon .ribbon-draft { background-color: #94a5a6; border-color: #788e8f; }
.ribbon .ribbon-inner { text-align: center; color: #fff; top: 26px; left: -20px; width: 92px; padding: 0px; position: relative; transform: rotate(40deg); }
.ribbon .ribbon-inner:before { left: 0; border-left: 2px solid transparent; color: #2e8fda; }
.ribbon .ribbon-inner:after { right: -3px; border-bottom: 3px solid transparent; color: #2e8fda; }
.ribbon .ribbon-inner:before { left: 0; border-left: 2px solid transparent; color: #2e8fda; }
.ribbon .ribbon-success { background-color: #1fcd6d; border-color: #18a155; }
.ribbon .ribbon-overdue { background-color: #f59d00; border-color: #c27c00; }


.primary-info { margin: -10px -10px; padding: 28px 20px 10px; background: #fbfafa; border-bottom: #fbfafa; }
.text-success { color: #22b378 !important; }
.text-success { color: #22b378 !important; }
.text-overdue { color: #f76831; }
.text-warning { color: #eb7c11; }

.choose-product-goods { width: 60%; }
.stock-Exipary-goods { float: left; width: 30%; }
.stock-on-hand-goods { float: left; width: 10%; }

.choose-product { width: 70%; }
.stock-on-hand { float: left; width: 30%; }

.contact .info i { float: right; }
.contact .info h4 { padding: 0 60px 0 0; }
.contact .info p { padding: 0 60px 10px 0; }

.pricing ul { text-align: left; }

.pricing ul li { padding: 10px 0px 10px 30px; }

.pricing ul i { right: 0; }

.navbar-mobile { position: fixed; overflow: hidden; top: 0; right: 0; left: 0; bottom: 0; background: rgba(40, 58, 90, 0.9); transition: 0.3s; z-index: 999; }

.navbar-mobile .mobile-nav-toggle { position: absolute; top: 15px; left: 15px; }

.about .content ul li { padding-right: 28px; }

.about .content ul i { right: 0; }

.loading-container { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.8); display: flex; justify-content: center; align-items: center; z-index: 999; }

/* Add this to your CSS file */
select optgroup { background-color: #f8f9fa; /* Light background color */ color: #343a40; /* Dark text color */ font-weight: bold; /* Bold text */ padding: 5px; /* Padding for better spacing */ border-radius: 5px; /* Rounded corners */ }